/* Create By Asking: Yahtzee and Farkle score keeper. Loaded after style.css, tools.css and family.css;
   reuses the dark .tool-shell look. Prefix sk- on screen, skp- for the printed sheets. */

.sk { --gold: #FFC93C; --pink: #FF5C99; --green: #45D19E; --red: #FF7A62; --soft: #CBBFE8; --dim: #A597CC; --panel: rgba(255, 255, 255, 0.05); --line2: rgba(255, 255, 255, 0.1); position: relative; gap: 14px; }
.sk .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sk button { -webkit-tap-highlight-color: transparent; }
.sk button:disabled { cursor: default; }
.sk .btn { min-height: 46px; justify-content: center; }
.sk .btn:disabled { opacity: 0.4; }
.sk .btn small { font: 600 0.72rem/1 var(--mono); opacity: 0.7; }
.sk-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sk-fine { font-size: 0.8rem; color: var(--dim); line-height: 1.45; }
.sk-link { border: 0; background: none; color: var(--soft); font: 600 var(--step--1)/1.2 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px 2px; }
.sk-link:hover { color: #fff; }
.sk-check { display: flex !important; grid-template-columns: none; gap: 10px !important; align-items: center; color: #fff !important; font-size: var(--step--1); cursor: pointer; min-height: 40px; }
.sk-check input { width: 22px; height: 22px; accent-color: #FFC93C; flex: none; padding: 0; }
.sk-empty { color: var(--soft); padding: 20px 0; }
.eyebrow { color: var(--dim); }

/* ---------- top bar: game tabs and tools ---------- */
.sk-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.sk-tabs { display: flex; gap: 4px; padding: 4px; background: rgba(255, 255, 255, 0.07); border-radius: 999px; }
.sk-tabs button { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 9px 18px 9px 12px; min-height: 44px; background: none; color: var(--soft); font: 700 1.05rem/1 var(--display); cursor: pointer; }
.sk-tabs button[aria-selected="true"] { background: var(--gold); color: #1C0F3F; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.sk-tabs .sk-die { width: 22px; }
.sk-tools { display: flex; gap: 4px; flex-wrap: wrap; }
.sk-tb { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 56px; min-height: 48px; padding: 6px 8px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.07); color: #fff; font: 600 0.7rem/1 var(--body); cursor: pointer; }
.sk-tb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sk-tb:hover:not(:disabled), .sk-tb[aria-expanded="true"] { background: rgba(255, 255, 255, 0.16); }
.sk-tb[aria-expanded="true"] { color: var(--gold); }
.sk-tb:disabled { opacity: 0.35; }

/* ---------- panels (players, history, print, settings) ---------- */
.sk-panel { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line2); border-radius: 14px; padding: 14px 16px; display: grid; gap: 12px; animation: sk-in 0.18s ease-out; }
.sk-panel-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sk-panel-h h3 { font-size: var(--step-1); }
.sk-x { border: 0; background: rgba(255, 255, 255, 0.08); color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; flex: none; }
.sk-x:hover { background: rgba(255, 255, 255, 0.18); }
@keyframes sk-in { from { opacity: 0; transform: translateY(-4px); } }
.sk-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sk-plist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 6px; align-items: center; }
.sk-plist input { width: 100%; min-height: 44px; font-weight: 600; }
.sk-plist .icon-btn { width: 40px; height: 44px; font-size: 1.05rem; }
.sk-del:hover { background: rgba(255, 122, 98, 0.3) !important; }
.sk-av-btn { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; }
.sk-avpick { grid-column: 1 / -1; background: rgba(0, 0, 0, 0.2); border-radius: 12px; padding: 10px; display: grid; gap: 10px; }
.sk-colors, .sk-emojis { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-colors button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; background: var(--c); cursor: pointer; }
.sk-colors button[aria-pressed="true"] { border-color: #fff; }
.sk-emojis button { width: 40px; height: 40px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, 0.07); font-size: 1.3rem; cursor: pointer; }
.sk-emojis button[aria-pressed="true"] { background: var(--gold); }
.sk-log { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; display: grid; gap: 2px; font-size: var(--step--1); }
.sk-log li { display: grid; grid-template-columns: 48px auto 1fr; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line2); color: #fff; }
.sk-log time { font: 500 0.75rem/1 var(--mono); color: var(--dim); }
.sk-tagg { font: 600 0.65rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); }
.sk-print-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sk-print-grid > div { display: grid; gap: 8px; align-content: start; }
.sk-print-grid .btn { justify-content: flex-start; }
.sk-private { background: rgba(69, 209, 158, 0.1); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; justify-items: start; font-size: var(--step--1); color: #DDF7EC; }

/* ---------- players strip ---------- */
.sk-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.sk-pl { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; min-height: 62px; border-radius: 14px; border: 2px solid transparent; background: var(--panel); color: #fff; cursor: pointer; overflow: hidden; font: inherit; }
.sk-pl:hover { background: rgba(255, 255, 255, 0.09); }
.sk-pl.is-turn { border-color: var(--gold); background: rgba(255, 201, 60, 0.1); box-shadow: 0 0 0 4px rgba(255, 201, 60, 0.12); }
.sk-pl-t { display: grid; min-width: 0; line-height: 1.2; }
.sk-pl-n { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-pl small { color: var(--dim); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-pl strong { font: 800 1.5rem/1 var(--display); font-variant-numeric: tabular-nums; }
.sk-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--w); background: var(--c); border-radius: 0 4px 0 0; transition: width 0.5s; }
.sk-turn-tag { position: absolute; top: 0; right: 0; background: var(--gold); color: #1C0F3F; font: 700 0.6rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 7px; border-radius: 0 0 0 8px; }
.sk-pl.is-turn strong { padding-top: 8px; }
.sk-pl-add { grid-template-columns: auto 1fr; border: 2px dashed rgba(255, 255, 255, 0.16); background: none; color: var(--soft); font-weight: 600; }
.sk-plus { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); font-size: 1.3rem; }
.sk-av { --c: #FF5C8A; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c); font-size: 1.15rem; line-height: 1; flex: none; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
.sk-av.is-big { width: 52px; height: 52px; font-size: 1.7rem; }
.sk-crown { font-size: 0.85rem; }

/* ---------- dice ---------- */
.sk-die { --pip: #1C0F3F; display: inline-grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; aspect-ratio: 1; padding: 16%; gap: 6%; border-radius: 20%; background: linear-gradient(145deg, #FFFFFF, #ECE6F7); box-shadow: inset 0 -4px 0 rgba(28, 15, 63, 0.14), 0 3px 8px rgba(0, 0, 0, 0.3); }
.sk-die i { border-radius: 50%; }
.sk-die i.on { background: var(--pip); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4); }
.sk-die[data-v="1"] i.on { background: #E0115F; transform: scale(1.25); }
.sk-die.is-mini { width: 18px; padding: 3px; gap: 1px; border-radius: 4px; box-shadow: none; vertical-align: middle; }
.sk-die.is-blank { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14); }
.sk-die.is-rolling { animation: sk-tumble 0.32s linear infinite; }
@keyframes sk-tumble { 0% { transform: rotate(0) translateY(0); } 25% { transform: rotate(90deg) translateY(-8%); } 50% { transform: rotate(180deg) translateY(0); } 75% { transform: rotate(270deg) translateY(-6%); } 100% { transform: rotate(360deg); } }
.sk-die.is-spare { opacity: 0.35; filter: grayscale(1); }
.sk-tray { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 64px)); gap: clamp(6px, 1.6vw, 10px); justify-content: center; padding: 14px 10px; border-radius: 16px; background: radial-gradient(circle at 50% 0, #2A6B4F, #17402F); box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.45); }
.sk-slot { position: relative; display: block; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 20%; }
.sk-slot.is-empty, .sk-slot.is-aside { cursor: default; }
.sk-slot.is-aside .sk-die { opacity: 0.35; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 4px, transparent 4px 8px); }
.sk-slot .sk-die { animation: sk-drop 0.22s ease-out; }
.sk-slot.is-empty .sk-die, .sk-slot.is-aside .sk-die { animation: none; }
@keyframes sk-drop { from { transform: translateY(-10px) scale(0.85); opacity: 0.4; } }
.sk-die.is-held { box-shadow: 0 0 0 3px var(--gold), 0 3px 8px rgba(0, 0, 0, 0.3); transform: translateY(-4px); }
.sk-kept { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); background: var(--gold); color: #1C0F3F; font: 700 0.58rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 5px; border-radius: 6px; }
.sk-keypad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sk-keypad button { border: 0; padding: 8px; min-height: 52px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); cursor: pointer; display: grid; place-items: center; }
.sk-keypad button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.sk-keypad button:active:not(:disabled) { transform: scale(0.94); }
.sk-keypad button:disabled { opacity: 0.3; }
.sk-keypad .sk-die { width: min(36px, 100%); padding: 15%; box-shadow: inset 0 -3px 0 rgba(28, 15, 63, 0.14); }
.sk-hint { color: var(--soft); font-size: var(--step--1); min-height: 2.9em; line-height: 1.45; text-align: center; }
.sk-roll { flex: 1 1 auto; }

/* ---------- game layout ---------- */
.sk-pane { background: var(--panel); border-radius: 16px; padding: clamp(12px, 2.4vw, 18px); display: grid; gap: 12px; align-content: start; min-width: 0; }
.sk-pane-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sk-pane-h h3 { font-size: var(--step-1); }
.sk-y { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 14px; align-items: start; }
.sk-f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sk-f-rules { grid-column: 1 / -1; }
.sk-turn { display: flex; gap: 12px; align-items: center; }
.sk-turn > div { display: grid; line-height: 1.2; }
.sk-turn strong { font: 800 var(--step-2)/1.1 var(--display); color: #fff; }
.sk-turn span { font-size: var(--step--1); color: var(--dim); }
.sk-over { display: grid; gap: 8px; padding: 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 201, 60, 0.18), rgba(255, 92, 153, 0.14)); text-align: center; justify-items: center; }
.sk-over strong { font: 800 var(--step-3)/1.05 var(--display); color: #fff; }
.sk-foot { justify-content: space-between; gap: 4px 14px; }

/* Yahtzee: "score it in" choices */
.sk-picks { display: grid; gap: 8px; animation: sk-in 0.2s ease-out; }
.sk-picks-h { font: 600 0.68rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.sk-pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sk-pick { display: flex; justify-content: space-between; align-items: center; gap: 6px; text-align: left; border: 0; border-radius: 10px; padding: 9px 11px; min-height: 48px; background: rgba(255, 255, 255, 0.08); color: #fff; font: 600 0.88rem/1.15 var(--body); cursor: pointer; }
.sk-pick span { display: grid; gap: 3px; }
.sk-pick em { font: 700 0.6rem/1 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); }
.sk-pick em.is-most { color: var(--green); }
.sk-pick b { font: 800 1.3rem/1 var(--display); font-variant-numeric: tabular-nums; display: grid; justify-items: end; }
.sk-pick b small { font: 700 0.62rem/1 var(--mono); color: var(--green); }
.sk-pick:hover { background: rgba(255, 255, 255, 0.16); }
.sk-pick.is-best { background: var(--gold); color: #1C0F3F; grid-column: 1 / -1; min-height: 56px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.sk-pick.is-best em { color: #8A1240; }
.sk-pick.is-best b small { color: #0C6B47; }
.sk-pick.is-zero { color: var(--dim); }
.sk-pick.is-zero b { color: #FF9C8A; }
.sk-joker { background: rgba(69, 209, 158, 0.14); color: #DDF7EC; border-radius: 10px; padding: 10px 12px; font-size: var(--step--1); }
.sk-joker b { color: var(--green); }

/* Yahtzee: the score card */
.sk-y-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
.sk-padwho { width: 100%; }
.sk-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; overscroll-behavior-x: contain; }
.sk-card { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.sk-card th, .sk-card td { padding: 0; border-bottom: 1px solid var(--line2); text-align: center; }
.sk-card thead th { position: sticky; top: 0; padding: 6px 4px 8px; font: 600 0.78rem/1.15 var(--body); color: var(--soft); vertical-align: bottom; min-width: 64px; }
.sk-card thead th .sk-av { width: 30px; height: 30px; font-size: 1rem; display: grid; margin: 0 auto 4px; }
.sk-pn { display: block; max-width: 92px; margin: 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-card thead th.is-turn { color: var(--gold); }
.sk-lab { position: sticky; left: 0; z-index: 1; background: #22134A; text-align: left !important; padding: 6px 10px 6px 4px !important; font: 600 0.88rem/1.15 var(--body); color: #fff; white-space: nowrap; min-width: 116px; }
.sk-lab small { display: block; font: 500 0.68rem/1.2 var(--body); color: var(--dim); }
.sk-card thead .sk-lab { background: #22134A; z-index: 2; }
.sk-hr th { text-align: left; padding: 12px 4px 4px !important; font: 600 0.66rem/1 var(--mono) !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold) !important; position: static !important; background: none !important; }
.sk-card td.is-turn { background: rgba(255, 201, 60, 0.07); }
.sk-c { display: grid; place-items: center; width: 100%; min-height: 44px; padding: 4px; border: 0; background: none; color: #fff; font: 700 1.05rem/1 var(--display); cursor: pointer; border-radius: 8px; }
.sk-c:hover { background: rgba(255, 255, 255, 0.1); }
.sk-c.is-scratch { color: var(--dim); }
.sk-c.is-pop { animation: sk-pop 0.5s ease-out; }
@keyframes sk-pop { 0% { transform: scale(1.7); color: var(--gold); } 100% { transform: scale(1); } }
.sk-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.sk-c.is-prev { color: rgba(255, 201, 60, 0.85); background: rgba(255, 201, 60, 0.08); box-shadow: inset 0 0 0 1.5px rgba(255, 201, 60, 0.35); font-weight: 600; }
.sk-c.is-prev.is-zero { color: rgba(255, 156, 138, 0.8); background: none; box-shadow: inset 0 0 0 1.5px rgba(255, 156, 138, 0.25); }
.sk-c.is-best { background: var(--gold); color: #1C0F3F; box-shadow: 0 0 0 3px rgba(255, 201, 60, 0.3); animation: sk-glow 1.4s ease-in-out infinite; }
@keyframes sk-glow { 50% { box-shadow: 0 0 0 6px rgba(255, 201, 60, 0.12); } }
.sk-c.is-locked { opacity: 0.35; }
.sk-yb { display: block; font-size: 0.6rem; color: var(--green); letter-spacing: -1px; }
.sk-c.is-yb { gap: 2px; }
.sk-sum { font: 700 0.95rem/1 var(--display); color: var(--soft); padding: 10px 4px !important; }
.sk-sum small { display: block; font: 600 0.62rem/1.1 var(--mono); margin-top: 3px; }
.sk-up { color: var(--green); }
.sk-down { color: #FF9C8A; }
.sk-need { color: var(--dim); white-space: nowrap; font-size: 0.58rem !important; }
.sk-sum.is-bonus { color: var(--green); }
.sk-sr th.sk-lab { color: var(--soft); font-weight: 500; }
.sk-sr.is-grand th, .sk-sr.is-grand td { border-bottom: 0; border-top: 2px solid rgba(255, 255, 255, 0.25); }
.sk-sum.is-grand { color: #fff; font-size: 1.3rem; }
.sk-card.is-pad thead th { min-width: 58px; }
.sk-future { background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 255, 255, 0.025) 6px 12px); }

/* Farkle */
.sk-worth { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); animation: sk-in 0.2s ease-out; }
.sk-worth > strong { font: 800 clamp(2.4rem, 8vw, 3.2rem)/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.sk-worth.is-farkle { background: rgba(255, 122, 98, 0.16); }
.sk-worth.is-farkle strong { color: var(--red); animation: sk-shake 0.4s; }
@keyframes sk-shake { 20%, 60% { transform: translateX(-6px) rotate(-3deg); } 40%, 80% { transform: translateX(6px) rotate(3deg); } }
.sk-worth.is-hot { background: linear-gradient(135deg, rgba(255, 122, 98, 0.25), rgba(255, 201, 60, 0.2)); }
.sk-worth p { color: var(--soft); font-size: var(--step--1); }
.sk-hot { font: 700 0.7rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: #1C0F3F; background: var(--gold); padding: 5px 8px; border-radius: 6px; }
.sk-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; width: 100%; font-size: var(--step--1); }
.sk-parts li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
.sk-parts li > span { display: flex; gap: 3px; }
.sk-parts b { font-variant-numeric: tabular-nums; }
.sk-keeps { display: grid; gap: 6px; }
.sk-keep { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: left; border: 0; border-radius: 12px; padding: 10px 12px; min-height: 52px; background: rgba(255, 255, 255, 0.08); color: #fff; font: 600 0.92rem/1.2 var(--body); cursor: pointer; }
.sk-keep small { display: block; font-weight: 500; font-size: 0.74rem; color: var(--dim); }
.sk-keep-d { display: flex; gap: 3px; flex-wrap: wrap; max-width: 130px; }
.sk-keep b { font: 800 1.25rem/1 var(--display); }
.sk-keep:hover { background: rgba(255, 255, 255, 0.15); }
.sk-keep.is-best { background: var(--gold); color: #1C0F3F; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.sk-keep.is-best small { color: #5F4B12; }
.sk-tt { display: grid; justify-items: center; gap: 2px; padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.18); }
.sk-tt strong { font: 800 clamp(2.6rem, 9vw, 3.6rem)/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.sk-tt > span:last-child { font-size: var(--step--1); color: var(--soft); }
.sk-tparts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sk-tparts li { font: 600 0.78rem/1 var(--mono); background: rgba(255, 255, 255, 0.08); color: var(--soft); padding: 6px 8px; border-radius: 6px; }
.sk-actions .btn { flex: 1 1 auto; }
.sk .sk-bank { background: var(--green); color: #0B2A1E; font-size: 1.1rem; flex-grow: 2 !important; }
.sk .sk-bad { background: var(--red); color: #2A0B05; }
.sk-final { background: linear-gradient(135deg, rgba(255, 92, 153, 0.25), rgba(255, 201, 60, 0.18)); border-radius: 12px; padding: 10px 12px; font-size: var(--step--1); color: #fff; }
.sk-warn { color: #FF9C8A; }
.sk-sheet summary, .sk-edit summary { cursor: pointer; font-weight: 700; color: #fff; padding: 6px 0; display: flex; gap: 10px; align-items: baseline; }
.sk-sheet summary::-webkit-details-marker, .sk-edit summary::-webkit-details-marker { display: none; }
.sk-sheet summary::before, .sk-edit summary::before { content: "▸"; color: var(--gold); transition: transform 0.15s; }
.sk-sheet[open] summary::before, .sk-edit[open] summary::before { transform: rotate(90deg); }
.sk-ftab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.sk-ftab th, .sk-ftab td { padding: 5px 6px; border-bottom: 1px solid var(--line2); text-align: center; }
.sk-ftab thead th { color: var(--soft); font-weight: 600; font-size: 0.78rem; min-width: 64px; }
.sk-ftab thead .sk-av { width: 26px; height: 26px; font-size: 0.9rem; display: grid; margin: 0 auto 3px; }
.sk-ftab tbody th { color: var(--dim); font: 500 0.75rem/1 var(--mono); width: 28px; }
.sk-ftab td { color: #fff; font-weight: 600; }
.sk-ftab td small { display: block; color: var(--dim); font-weight: 500; font-size: 0.72rem; }
.sk-ftab td.is-f { color: #FF9C8A; }
.sk-rules-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sk-chart { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.sk-chart th, .sk-chart td { padding: 7px 8px; border-bottom: 1px solid var(--line2); text-align: left; }
.sk-chart th { font-weight: 500; color: var(--soft); }
.sk-chart td { font: 700 1rem/1.2 var(--display); color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.sk-chart td small { display: block; font: 500 0.72rem/1.3 var(--body); color: var(--dim); }
.sk-settings { display: grid; gap: 12px; }
.sk-settings select, .sk-settings input[type="number"] { width: 100%; min-height: 44px; }
.sk-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }

/* ---------- toast, dialog, celebrations ---------- */
.sk-toast { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; display: flex; gap: 10px; align-items: center; max-width: min(92vw, 460px); background: #FFF8E6; color: #1C0F3F; padding: 12px 18px; border-radius: 999px; font-size: var(--step--1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform 0.25s, opacity 0.25s; }
.sk-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.sk-toast.is-big { top: 40%; bottom: auto; font: 800 1.5rem/1.1 var(--display); padding: 16px 26px 16px 16px; }
.sk-toast.is-big .sk-av { width: 52px; height: 52px; font-size: 1.7rem; }
.sk-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(10, 5, 25, 0.7); backdrop-filter: blur(3px); }
.sk-modal[hidden] { display: none; }
.sk-modal-box { width: min(440px, 100%); max-height: 90vh; overflow: auto; background: #241552; color: #F2ECFF; border-radius: 18px; padding: 18px; display: grid; gap: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: sk-in 0.18s ease-out; }
.sk-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sk-modal-head h3 { color: #fff; font-size: var(--step-1); }
.sk-modal-body { display: grid; gap: 12px; }
.sk-q { color: var(--soft); font-size: var(--step--1); }
.sk-q b { color: #fff; }
.sk-vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sk-vals.is-many { grid-template-columns: repeat(6, 1fr); gap: 6px; }
.sk-vals button { border: 0; min-height: 52px; border-radius: 12px; background: rgba(255, 255, 255, 0.09); color: #fff; font: 800 1.2rem/1 var(--display); cursor: pointer; display: grid; place-items: center; gap: 2px; }
.sk-vals.is-many button { min-height: 44px; font-size: 1rem; }
.sk-vals button small { font: 500 0.66rem/1 var(--mono); color: var(--dim); }
.sk-vals button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); }
.sk-vals button[aria-pressed="true"] { background: var(--gold); color: #1C0F3F; }
.sk-vals button:disabled { opacity: 0.3; }
.sk-ap-out { display: block; text-align: center; font: 800 2.6rem/1 var(--display); color: var(--gold); padding: 6px; font-variant-numeric: tabular-nums; }
.sk-ap-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sk-ap-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sk-ap-quick button, .sk-ap-keys button { border: 0; min-height: 46px; border-radius: 10px; background: rgba(255, 255, 255, 0.09); color: #fff; font: 700 1rem/1 var(--body); cursor: pointer; }
.sk-ap-quick button { background: rgba(69, 209, 158, 0.16); color: #DDF7EC; font-size: 0.9rem; }
.sk-party { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(10, 5, 25, 0.55); }
.sk-party[hidden] { display: none; }
.sk-party canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sk-party-card { position: relative; display: grid; gap: 10px; justify-items: center; text-align: center; padding: 26px 24px; border-radius: 22px; width: min(420px, 100%); background: #241552; color: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); animation: sk-boing 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); }
.sk-party-card strong { font: 400 clamp(2.4rem, 9vw, 3.6rem)/1 var(--brand); color: var(--gold); text-shadow: 0 4px 0 #E0115F; letter-spacing: 0.01em; }
.sk-party-card p { color: var(--soft); }
.sk-party-card .sk-row { justify-content: center; margin-top: 6px; }
.sk-party-card.is-yahtzee strong { font-size: clamp(2.8rem, 12vw, 4.4rem); animation: sk-wobble 0.9s ease-in-out 0.4s 2; }
.sk-party-dice { display: grid; grid-template-columns: repeat(5, 46px); gap: 8px; }
.sk-die.is-fly { animation: sk-fly 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both; animation-delay: calc(var(--i) * 0.07s); }
@keyframes sk-fly { from { transform: translateY(-120px) rotate(-200deg) scale(0.4); opacity: 0; } }
@keyframes sk-boing { from { transform: scale(0.5); opacity: 0; } }
@keyframes sk-wobble { 25% { transform: rotate(-4deg) scale(1.06); } 75% { transform: rotate(4deg) scale(1.06); } }

/* ---------- full screen ---------- */
.sk.is-fs, .sk.is-full { overflow: auto; border-radius: 0; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); }
.sk.is-full { position: fixed; inset: 0; z-index: 50; }
.sk.is-fs .tool-note, .sk.is-full .tool-note { display: none; }

/* ---------- narrower screens ---------- */
@media (max-width: 900px) {
  .sk-y, .sk-f { grid-template-columns: minmax(0, 1fr); }
  .sk-rules-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .sk-top { gap: 8px; }
  .sk-tabs { width: 100%; }
  .sk-tabs button { flex: 1; justify-content: center; }
  .sk-tools { width: 100%; display: grid; grid-template-columns: repeat(6, 1fr); }
  .sk-tb { min-width: 0; padding: 6px 2px; }
  .sk-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .sk-pl { grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; padding: 8px 10px; }
  .sk-pl strong { grid-column: 2; grid-row: 2; font-size: 1.25rem; padding-top: 0 !important; }
  .sk-pl .sk-av { grid-row: span 2; width: 32px; height: 32px; font-size: 1rem; }
  .sk-pl-t small { display: none; }
  .sk-pl-add { grid-column: 1 / -1; display: flex; justify-content: center; min-height: 44px; padding: 4px 10px; }
  .sk-pl-add .sk-plus { width: 28px; height: 28px; font-size: 1.1rem; }
  .sk-print-grid { grid-template-columns: 1fr; }
  .sk-lab { min-width: 104px; font-size: 0.82rem; }
  .sk-lab small { display: none; }
  .sk-card thead th { min-width: 52px; }
  .sk-pick-grid { grid-template-columns: 1fr 1fr; }
  .sk-edit-grid { grid-template-columns: 1fr; }
  .sk-vals.is-many { grid-template-columns: repeat(5, 1fr); }
  .sk-toast.is-big { font-size: 1.25rem; }
}

/* ---------- printed sheets ---------- */
.sk-print { display: none; }
@media print {
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body::before { display: none !important; }
  body > *:not(.sk-print) { display: none !important; }
  .sk-print { display: block !important; color: #1C0F3F; font: 400 10pt/1.25 "Figtree", Arial, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.skp-page { display: flex; flex-direction: column; break-after: page; page-break-after: always; overflow: hidden; }
.skp-page:last-child { break-after: auto; page-break-after: auto; }
.skp-yhead { display: flex; align-items: center; gap: 4mm; padding: 0 0 2.5mm; flex: none; }
.skp-yhead strong { font: 800 17pt/1 "Bricolage Grotesque", "Arial Black", sans-serif; letter-spacing: -0.02em; }
.skp-line { flex: 1; border-bottom: 0.3mm solid #1C0F3F; font-size: 9pt; padding-bottom: 0.8mm; min-width: 30mm; }
.skp-line:last-child { flex: 0 1 45mm; }
.skp-logo { display: flex; gap: 1.2mm; }
.sk-print .sk-die { width: 7mm; padding: 1.2mm; gap: 0.4mm; border-radius: 1.4mm; background: #fff; box-shadow: none; border: 0.35mm solid #1C0F3F; }
.sk-print .sk-die i.on { background: #1C0F3F; box-shadow: none; }
.sk-print .sk-die[data-v="1"] i.on { background: #E0115F; }
.skp-ycard { display: flex; flex-direction: column; }
.skp-y { width: calc(100% - 0.6mm); border-collapse: collapse; table-layout: fixed; }
.skp-y th, .skp-y td { border: 0.3mm solid #1C0F3F; padding: 0 1.6mm; height: var(--rh, 7mm); text-align: center; font-size: 9.5pt; }
.skp-y th { text-align: left; font-weight: 700; white-space: nowrap; overflow: hidden; }
.skp-y thead th { background: #1C0F3F; color: #fff; text-align: center; font-size: 8.5pt; }
.skp-y thead th:first-child { text-align: left; }
.skp-c1 { width: 33mm; }
.skp-c2 { width: 37mm; }
.skp-how { font-size: 7.5pt !important; color: #5F5580; text-align: left !important; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skp-pip { display: inline-block; vertical-align: middle; margin-left: 1mm; }
.skp-pip .sk-die { width: 4.4mm; padding: 0.7mm; border-width: 0.25mm; border-radius: 0.9mm; }
.skp-t th, .skp-t td { background: #F1ECFA; }
.skp-tt th, .skp-tt td { border-bottom-width: 0.7mm; }
.skp-sec th { background: #1C0F3F; color: #fff; font-size: 8.5pt; }
.skp-sec td { background: #1C0F3F; }
.skp-grand th, .skp-grand td { background: #FFE9A8; font-weight: 800; font-size: 11pt; border-top-width: 0.7mm; }
.skp-yb td { font-size: 8pt; }
.skp-cut { flex: none; text-align: center; font-size: 8pt; color: #8A80A8; border-top: 0.3mm dashed #8A80A8; margin: 5mm 0 4mm; padding-top: 0.6mm; line-height: 1; height: 3mm; }
.skp-game .skp-y th, .skp-game .skp-y td { height: 8.6mm; }
.skp-game .skp-y thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skp-game .skp-y td { font-size: 11pt; }
.skp-small th, .skp-small td { height: 7mm !important; font-size: 9pt !important; }
.skp-h4 { font: 800 12pt/1 "Bricolage Grotesque", Arial, sans-serif; margin: 6mm 0 2.5mm; }
.skp-ftable { flex: 1 1 auto; }
.skp-f { width: calc(100% - 0.6mm); border-collapse: collapse; table-layout: fixed; }
.skp-f th, .skp-f td { border: 0.3mm solid #1C0F3F; height: var(--rh, 7.5mm); padding: 0 1mm; text-align: center; font-size: 9pt; }
.skp-f thead th { height: 6mm; background: #F1ECFA; font-size: 7.5pt; color: #5F5580; font-weight: 600; }
.skp-f thead tr:first-child th { background: #1C0F3F; color: #fff; font-size: 9pt; height: 7mm; }
.skp-f .skp-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.skp-f .skp-n { width: 11mm; font-size: 8pt; color: #5F5580; background: #F1ECFA; }
.skp-f thead .skp-n { background: #1C0F3F; color: #fff; }
.skp-f tbody td:nth-child(odd) { background: #FAF8FE; font-weight: 700; }
.skp-rules { flex: none; height: 58mm; margin-top: 3mm; border: 0.3mm solid #1C0F3F; border-radius: 2mm; padding: 2.5mm 3.5mm; overflow: hidden; }
.skp-rules strong { font: 800 10.5pt/1 "Bricolage Grotesque", Arial, sans-serif; }
.skp-rules ul { list-style: none; margin: 1.8mm 0; padding: 0; columns: 3; column-gap: 6mm; font-size: 8.3pt; }
.skp-rules li { display: flex; justify-content: space-between; gap: 2mm; border-bottom: 0.2mm dotted #8A80A8; padding: 0.55mm 0; break-inside: avoid; }
.skp-rules li b { white-space: nowrap; }
.skp-rules p { font-size: 7.6pt; color: #3B3060; line-height: 1.3; }

/* ---------- reference tables in the guide (light and dark) ---------- */
.sk-ref-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.sk-ref { width: 100%; border-collapse: collapse; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.sk-ref th, .sk-ref td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.sk-ref thead th { font: 600 0.7rem/1.2 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.sk-ref tbody th { font-weight: 600; white-space: nowrap; }
.sk-ref tbody tr:last-child th, .sk-ref tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) { .sk-ref th, .sk-ref td { padding: 8px 10px; } .sk-ref tbody th { white-space: normal; } }