/* ============ Board tools (/tools/*). Loaded after style.css on tool pages only. ============ */
.tl-panel { --chalk-y: #ffd25e; --chalk-p: #ff9db5; --chalk-b: #8fd0ff; --chalk-g: #9be38f; --chalk-r: #ff8a7a; display: flex; flex-direction: column; min-height: 520px; overflow: hidden; }
.tl-panel > * { min-width: 0; }
.tl-panel [hidden] { display: none !important; }

/* Team colours */
.team-red { --tc: #ff6b5a; } .team-blue { --tc: #5aa2ff; } .team-yellow { --tc: #ffd25e; } .team-green { --tc: #7dd87a; }
.team-violet { --tc: #c4a3ff; } .team-teal { --tc: #4fd6bd; } .team-orange { --tc: #ffa45c; } .team-pink { --tc: #ff8fc8; }
.team-sky { --tc: #8fd8ff; } .team-lime { --tc: #c9f06b; } .team-brown { --tc: #d9a066; } .team-silver { --tc: #d6d6d6; }

/* ---------- top bar, chips, buttons ---------- */
.tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 2px dashed rgba(244,241,232,.16); }
.tl-bar label { display: flex; align-items: center; gap: 6px; font-size: .95rem; font-weight: 700; color: rgba(244,241,232,.88); }
.tl-bar label.check input { width: 18px; height: 18px; accent-color: var(--yellow); }
.tl-spacer { flex: 1 1 0; min-width: 0; }
.tl-label { font-weight: 700; font-size: .95rem; color: rgba(244,241,232,.88); }
.tool-panel .tl-bar button, .tool-panel .tl-controls button, .tool-panel .tl-setup button { min-height: 42px; }
.tool-panel button { display: inline-flex; align-items: center; gap: 4px; font: 700 .98rem var(--font-body); cursor: pointer; transition: transform .1s ease, background .15s ease; }
.tool-panel button:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.tool-panel button:focus-visible { outline: 3px solid var(--chalk-y); outline-offset: 2px; }
.tool-panel button.tl-edit.on, .tool-panel .tl-chips button.on, .tool-panel button[aria-pressed="true"]:not([data-tfx-mute]) { background: var(--chalk); color: #2b4636; border: 2px solid var(--chalk); }
.tool-panel button.tl-big { font: 700 1.3rem var(--font-display); padding: 12px 30px; min-height: 56px; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-panel .tl-chips button { padding: 8px 12px; min-width: 46px; justify-content: center; }
.tl-controls { justify-content: center; margin: 12px 0 4px; }
.tl-icon-btn .tl-btn-text { font-weight: 700; }
.tl-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 10px 0 0; font-size: .85rem; color: rgba(244,241,232,.6); }
.tl-keys kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border-radius: 5px; border: 1.5px solid rgba(244,241,232,.35); border-bottom-width: 3px; font: 700 .78rem var(--font-body); color: var(--chalk); text-align: center; }
.tl-stage { position: relative; flex: 1 1 auto; min-height: 0; }

/* Sample-content note: a little sticky note on the board */
.tl-note { align-self: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 0 auto 10px; padding: 8px 14px; background: linear-gradient(#fff2a8, #ffe57a); color: #3b3320; border-radius: 3px 3px 12px 3px; font-weight: 700; font-size: .95rem; box-shadow: 0 8px 12px -8px rgba(0,0,0,.6); transform: rotate(-.6deg); }
.tool-panel .tl-note button { background: #fff8d6; color: #3b3320; border: 2px solid #e5c34a; padding: 4px 12px; min-height: 0; }

/* Teacher setup panel */
.tl-setup { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: rgba(0,0,0,.24); border: 2px dashed rgba(244,241,232,.3); }
.tl-setup .tool-row { margin: 10px 0; }
.tl-setup textarea { width: 100%; font: 600 1rem/1.55 var(--font-body); resize: vertical; margin-top: 6px; }
.tl-setup label.block { display: block; font-weight: 700; color: rgba(244,241,232,.88); }
.tl-setup .small { margin: 8px 0; }
.tl-warn { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: rgba(255,201,60,.16); border-left: 5px solid var(--yellow); color: #ffe6a3; font-weight: 700; font-size: .92rem; }
.tl-panel:fullscreen .tl-keys, .tl-panel:fullscreen .tl-note { display: none; }
/* Lists with answers never show on the projected full screen. */
#hang-app:fullscreen .tl-setup, #jep-app:fullscreen #jep-editor { display: none !important; }

/* Roster chips (picker, team generator) */
.tl-roster { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 0; }
.tool-panel .tl-roster button { padding: 5px 12px; min-height: 0; border-radius: 999px; font-size: .92rem; background: rgba(255,255,255,.08); border: 2px solid rgba(244,241,232,.25); }
.tool-panel .tl-roster button.used { background: rgba(155,227,143,.18); border-color: rgba(155,227,143,.55); color: #d7f5d0; }
.tool-panel .tl-roster button.used::before { content: "✓ "; }
.tool-panel .tl-roster button.absent { text-decoration: line-through; opacity: .45; border-style: dashed; }
.tl-roster .star { color: var(--chalk-y); margin-left: 4px; }

/* Team chips (hangman) */
.tl-teams { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 10px; }
.tl-teams:empty { display: none; }
.tl-team { display: flex; align-items: center; gap: 10px; padding: 6px 16px; border-radius: 999px; background: rgba(0,0,0,.24); border: 3px solid var(--tc); transition: transform .2s ease, box-shadow .2s ease; }
.tl-team b { font: 700 1.5rem/1 var(--font-display); color: #fff; }
.tl-team span { font: 700 1rem var(--font-display); color: var(--tc); }
.tl-team.is-turn { transform: translateY(-2px) scale(1.07); box-shadow: 0 0 0 4px rgba(255,255,255,.15), 0 0 22px var(--tc); }
.tl-team.is-turn span::before { content: "▶ "; }

/* ---------- reveal card, confetti, toast ---------- */
.tl-reveal { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(12,26,18,.66); backdrop-filter: blur(2px); animation: tl-fade .2s ease; }
.tl-reveal-card { position: relative; width: min(760px, 100%); max-height: 100%; overflow: auto; padding: 26px 26px 18px; text-align: center; color: #3b3320; background: linear-gradient(#fff6c4, #ffeea0); border-radius: 4px 4px 22px 4px; box-shadow: 0 30px 50px -20px rgba(0,0,0,.7); transform: rotate(-1deg); animation: tl-pop .45s cubic-bezier(.2,1.6,.4,1); }
.tl-reveal-card::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 6px, transparent 6px 12px), rgba(90,162,255,.5); }
.tl-reveal-emoji { font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1; animation: tl-bob 1.6s ease-in-out infinite; }
.tl-reveal-kicker { margin: 6px 0 0; font: 700 clamp(1.3rem, 3vw, 1.9rem) var(--font-hand); color: #8a5528; }
.tl-reveal-title { margin: 4px 0 6px; font: 700 clamp(2.6rem, 9vw, 6.5rem)/1.08 var(--font-display); color: #2b2a33; white-space: nowrap; overflow: hidden; }
.tl-reveal-sub { margin: 0 0 6px; font: 700 clamp(1.05rem, 2.4vw, 1.5rem) var(--font-display); color: #5b4a20; }
.tl-reveal-btns { justify-content: center; margin: 14px 0 0; }
.tool-panel .tl-reveal-card button { color: #3b3320; background: #fff8d6; border: 2px solid #e5c34a; min-height: 46px; }
.tool-panel .tl-reveal-card button.primary { background: var(--yellow); border-color: #e0a800; box-shadow: 0 4px 0 #c99500; }
.tl-reveal-sad .tl-reveal-card { background: linear-gradient(#e2eefc, #c9def7); }
.tl-panel:fullscreen .tl-reveal-card { width: min(1100px, 92%); padding: 4vh 4vw 3vh; }
.tl-panel:fullscreen .tl-reveal-title { font-size: 13vh; }
.tl-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 40; }
.tl-confetti i { position: absolute; top: -16px; width: 11px; height: 17px; border-radius: 2px; animation: tl-fall linear forwards; }
.tl-toast { position: fixed; left: 50%; bottom: 60px; z-index: 300; max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; box-shadow: 0 10px 24px rgba(0,0,0,.35); transform: translate(-50%, 30px); opacity: 0; transition: all .3s ease; }
.tl-toast.show { opacity: 1; transform: translate(-50%, 0); }
@keyframes tl-fall { to { top: 108%; transform: translateX(var(--dx)) rotate(var(--r)); } }
@keyframes tl-pop { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }
@keyframes tl-fade { from { opacity: 0; } }
@keyframes tl-bob { 50% { transform: translateY(-6px) rotate(-5deg); } }
@keyframes tl-shake { 20%, 60% { transform: translateX(-8px) rotate(-1deg); } 40%, 80% { transform: translateX(8px) rotate(1deg); } }
@keyframes tl-pulse { 50% { transform: scale(1.06); } }
@keyframes tl-in { from { transform: translateY(14px) scale(.8); opacity: 0; } }

/* ---------- full screen: the board fills the screen, watermark corner kept clear ---------- */
.tool-panel.tl-panel:fullscreen { display: flex; flex-direction: column; padding: 2.4vh 3vw 54px; overflow: hidden; }
.tl-panel:fullscreen .tl-bar { margin-bottom: 1vh; }
.tl-panel:fullscreen .tl-stage { flex: 1 1 0; }
.tl-panel:fullscreen .tl-setup { overflow: auto; max-height: 40vh; flex: none; }

/* Bigger controls on a projected full screen */
.tl-panel:fullscreen .tl-bar button, .tl-panel:fullscreen .tl-bar label, .tl-panel:fullscreen .tl-bar select, .tl-panel:fullscreen .tl-label { font-size: max(1rem, 1.7vh); }
.tool-panel.tl-panel:fullscreen .tl-controls button, .tool-panel.tl-panel:fullscreen .jep-card .tool-row button, .tool-panel.tl-panel:fullscreen .tl-reveal-btns button, .tool-panel.tl-panel:fullscreen .bingo-side button { font-size: max(1.05rem, 2.3vh); padding: 1.1vh 2.2vh; }
.tool-panel.tl-panel:fullscreen .tl-controls button.tl-big { font-size: max(1.3rem, 3vh); padding: 1.4vh 4vh; }
.tool-panel.tl-panel:fullscreen .picker-acts button { font-size: max(.95rem, 2vh); }
.tl-panel:fullscreen .picker-status, .tl-panel:fullscreen .noise-status { font-size: 3.6vh; }

/* =================== Timer =================== */
.timer-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.tool-panel input.timer-task { width: min(720px, 100%); text-align: center; font: 700 clamp(1.5rem, 3.6vw, 2.4rem) var(--font-hand); color: var(--chalk-y); background: transparent; border: 2px dashed transparent; padding: 2px 10px; }
.tool-panel input.timer-task:hover, .tool-panel input.timer-task:focus { border-color: rgba(244,241,232,.3); outline: none; }
.tool-panel input.timer-task::placeholder { color: rgba(244,241,232,.38); }
.timer-face { position: relative; width: min(440px, 82vw); aspect-ratio: 1; cursor: pointer; container-type: inline-size; border-radius: 50%; }
.timer-face:focus-visible { outline: 3px dashed var(--chalk-y); outline-offset: 6px; }
.timer-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.timer-track { fill: rgba(0,0,0,.18); stroke: rgba(244,241,232,.14); stroke-width: 14; }
.timer-prog { fill: none; stroke: var(--chalk-g); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 0; transition: stroke .4s ease; filter: drop-shadow(0 0 6px rgba(155,227,143,.35)); }
.timer-face.warn .timer-prog { stroke: var(--chalk-y); }
.timer-face.hurry .timer-prog { stroke: var(--chalk-r); }
.timer-face.hurry .timer-display { color: #ffb3a8; animation: tl-pulse 1s ease-in-out infinite; }
.timer-face.paused .timer-display { opacity: .7; }
.timer-inner { position: absolute; inset: 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tool-panel .timer-display { padding: 0; font: 700 22cqw/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--chalk); text-shadow: 0 0 2px rgba(255,255,255,.35); white-space: nowrap; }
.timer-display.long { font-size: 15.5cqw; }
.timer-sub { margin-top: 2cqw; font: 700 7cqw/1.1 var(--font-hand); color: rgba(244,241,232,.7); }
.timer-face.done .timer-prog { stroke: var(--chalk-r); }
.timer-face.done { animation: tl-shake .6s ease 3; }
.timer-face.done .timer-display { color: var(--chalk-r); animation: flash 1s steps(2) 5; }
.timer-face.done .timer-sub { color: var(--chalk-r); font-size: 9cqw; }
.tool-panel:fullscreen .timer-display { font-size: 22cqw; }
.tl-panel:fullscreen .timer-face { width: min(62vh, 86vw); }
.tl-panel:fullscreen input.timer-task { font-size: 5vh; }
#timer-app .tl-bar { justify-content: flex-start; }

/* =================== Random name picker =================== */
.picker-stage { display: flex; align-items: center; justify-content: center; min-height: 250px; }
.picker-cards { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; width: 100%; }
.picker-card { position: relative; flex: 0 1 auto; min-width: min(420px, 100%); max-width: 100%; padding: 26px 30px 18px; text-align: center; background: linear-gradient(#fff2a8, #ffe57a); color: #2b2a33; border-radius: 3px 3px 18px 3px; box-shadow: 0 16px 22px -12px rgba(0,0,0,.7); transform: rotate(-1.2deg); }
.picker-card:nth-child(2) { background: linear-gradient(#ffd3e2, #ffbcd3); transform: rotate(1.2deg); }
.picker-card:nth-child(3) { background: linear-gradient(#d4ecff, #b9dfff); transform: rotate(-.6deg); }
.picker-card:nth-child(4) { background: linear-gradient(#d8f5cf, #bfeab2); transform: rotate(1.6deg); }
.picker-card::before { content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 24px; transform: translateX(-50%) rotate(-3deg); background: repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 6px, transparent 6px 12px), rgba(242,183,5,.5); }
.picker-name { font: 700 clamp(3rem, 9vw, 6.4rem)/1.1 var(--font-display); white-space: nowrap; overflow: hidden; }
.picker-cards.multi .picker-card { min-width: min(240px, 100%); flex: 1 1 220px; max-width: 46%; }
.picker-cards.multi .picker-name { font-size: clamp(2rem, 5vw, 3.6rem); }
.picker-idle { background: transparent !important; box-shadow: none; transform: none; color: rgba(244,241,232,.55); border: 3px dashed rgba(244,241,232,.25); }
.picker-idle::before { display: none; }
.picker-card.spinning .picker-name { filter: blur(.6px); opacity: .85; }
.picker-card.won { animation: tl-pop .5s cubic-bezier(.2,1.6,.4,1); }
.picker-card .picker-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.tool-panel .picker-acts button { padding: 6px 12px; min-height: 0; font-size: .9rem; color: #3b3320; background: rgba(255,255,255,.55); border: 2px solid rgba(0,0,0,.12); }
.tool-panel .picker-acts button:hover { background: #fff; }
.picker-stars { font-size: 1.4rem; min-height: 1.4em; letter-spacing: 2px; }
.picker-status { text-align: center; margin: 4px 0 0; font: 700 1.5rem var(--font-hand); color: rgba(244,241,232,.82); }
.tl-panel:fullscreen .picker-name { font-size: 15vh; }
.tl-panel:fullscreen .picker-cards.multi .picker-name { font-size: 8vh; }
.tl-panel:fullscreen .picker-card { padding: 4vh 4vw 2vh; }
.tl-panel:fullscreen .tl-roster button { font-size: 1.1rem; }

/* =================== Team generator =================== */
.teams-empty { text-align: center; padding: 40px 10px; font: 700 clamp(1.5rem, 3.4vw, 2.3rem) var(--font-hand); color: rgba(244,241,232,.7); }
.teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 22px 18px; margin: 10px 0 0; }
.teams-grid .team { position: relative; padding: 16px 16px 14px; border-top: 10px solid var(--tc); animation: tl-in .4s ease both; }
.teams-grid .team h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 1.35rem var(--font-display); color: #2b2a33; }
.teams-grid .team h3 .tsize { margin-left: auto; font: 700 .85rem var(--font-body); color: rgba(43,42,51,.55); }
.teams-grid ul { list-style: none; margin: 0; padding: 0; font-weight: 700; }
.teams-grid li { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; border-bottom: 1px dashed rgba(0,0,0,.12); font-size: 1.08rem; overflow-wrap: anywhere; }
.teams-grid li.dealt { animation: tl-in .3s ease; }
.teams-grid li:last-child { border-bottom: 0; }
.teams-grid li .role { margin-left: auto; flex: none; font-size: .8rem; font-weight: 800; color: #6a4c13; background: rgba(255,255,255,.55); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.tl-panel:fullscreen .teams-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tl-panel:fullscreen .teams-grid li { font-size: clamp(1.2rem, 3.2vh, 2.4rem); }
.tl-panel:fullscreen .teams-grid h3 { font-size: clamp(1.4rem, 4vh, 2.8rem); }
.tl-panel:fullscreen .teams-stage { overflow: auto; }

/* =================== Scoreboard =================== */
.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 16px; height: 100%; }
.score-team { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 12px 14px; border-radius: 16px; background: rgba(0,0,0,.2); border: 4px solid var(--tc); box-shadow: inset 0 0 0 2px rgba(0,0,0,.1); text-align: center; transition: box-shadow .3s ease, transform .3s ease; }
.score-team.is-lead { box-shadow: 0 0 0 4px rgba(255,255,255,.12), 0 0 28px var(--tc); }
.score-crown { position: absolute; top: -22px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 2.2rem; opacity: 0; transition: opacity .3s; }
.score-team.is-lead .score-crown { opacity: 1; animation: tl-bob 2s ease-in-out infinite; }
.tool-panel .score-team input.score-name { width: 100%; text-align: center; font: 700 1.8rem var(--font-hand); color: var(--tc); background: transparent; border-color: transparent; padding: 2px 6px; }
.tool-panel .score-team input.score-name:hover, .tool-panel .score-team input.score-name:focus { border-color: rgba(244,241,232,.3); }
.score-num { font: 700 clamp(3.6rem, 9vw, 6.4rem)/1.05 var(--font-display); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.2); }
.score-num.bump { animation: tl-pulse .35s ease; }
.score-btns { display: flex; justify-content: center; gap: 10px; margin-top: 8px; width: 100%; }
.tool-panel .score-btns button { flex: 1; max-width: 120px; min-height: 58px; justify-content: center; font: 700 1.5rem var(--font-display); border-radius: 14px; }
.tool-panel .score-btns .score-plus { background: var(--tc); color: #2b2a33; border: 0; box-shadow: 0 5px 0 rgba(0,0,0,.25); }
.score-key { position: absolute; top: 8px; left: 10px; font: 700 .8rem var(--font-body); color: rgba(244,241,232,.5); border: 1.5px solid rgba(244,241,232,.3); border-radius: 5px; padding: 0 6px; }
.tool-panel .score-x { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; font-size: 1.1rem; display: none; }
.score-grid.editing .score-x { display: inline-flex; }
.score-float { position: absolute; left: 50%; top: 38%; pointer-events: none; font: 700 2.6rem var(--font-hand); color: var(--tc); animation: score-float 1s ease-out forwards; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
@keyframes score-float { from { transform: translate(-50%, 0) scale(.7); opacity: 1; } to { transform: translate(-50%, -80px) scale(1.3); opacity: 0; } }
.tl-panel:fullscreen .score-num { font-size: min(12vw, 20vh); }
.tl-panel:fullscreen .score-team input.score-name { font-size: 4.4vh; }
.tl-panel:fullscreen .score-btns button { min-height: 9vh; font-size: 4vh; max-width: 200px; }
.score-podium { list-style: none; margin: 8px auto 4px; padding: 0; max-width: 460px; text-align: left; }
.score-podium li { display: flex; align-items: center; gap: 10px; padding: 6px 12px; margin: 5px 0; border-radius: 10px; background: rgba(255,255,255,.55); border-left: 8px solid var(--tc); font: 700 1.15rem var(--font-display); }
.score-podium li b { margin-left: auto; font-size: 1.35rem; }

/* =================== Jeopardy =================== */
.jep-turn { min-height: 2.2em; text-align: center; font: 700 clamp(1.3rem, 2.6vw, 1.8rem) var(--font-hand); color: var(--tc, var(--chalk)); }
.jep-board { display: grid; gap: 8px; height: 100%; grid-auto-rows: minmax(54px, 1fr); }
.jep-board .cat { background: #1f5fae; color: #fff; font: 700 clamp(.85rem, 1.6vw, 1.15rem)/1.15 var(--font-display); text-align: center; padding: 10px 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); overflow-wrap: anywhere; }
.tool-panel .jep-board button { position: relative; justify-content: center; font: 700 clamp(1.3rem, 3vw, 2.2rem) var(--font-display); padding: 10px 4px; color: #ffd25e; background: #173d8a; border: 0; border-radius: 6px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.25); text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.tool-panel .jep-board button:hover:not(:disabled) { background: #1f4fa8; transform: scale(1.03); }
.tool-panel .jep-board button.used { background: rgba(23,61,138,.25); color: transparent; text-shadow: none; box-shadow: none; }
.tool-panel .jep-board button.used::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: var(--tc, transparent); opacity: .8; }
.jep-scores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.jep-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-top: 12px; }
.jep-foot .jep-scores { margin: 0; }
.tl-icon-btn[data-tfx-mute] .tl-btn-text { display: none; }
.jep-scores div.jep-score { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 14px; border-radius: 999px; background: rgba(0,0,0,.24); border: 3px solid var(--tc); transition: transform .2s, box-shadow .2s; }
.jep-score.is-turn { transform: translateY(-3px) scale(1.06); box-shadow: 0 0 0 4px rgba(255,255,255,.15), 0 0 22px var(--tc); }
.jep-score span { cursor: pointer;  font: 700 1rem var(--font-display); color: var(--tc); }
.jep-score b { font: 700 1.6rem/1 var(--font-display); color: #fff; min-width: 2.2em; text-align: center; font-variant-numeric: tabular-nums; }
.tool-panel .jep-score button { width: 30px; height: 30px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; font-size: 1rem; }
.jep-modal { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(12,20,40,.72); backdrop-filter: blur(3px); }
.jep-card { position: relative; width: 100%; max-width: 960px; max-height: 100%; overflow: auto; padding: 26px 26px 20px; border: 12px solid var(--wood); border-radius: 18px; background: #173d8a; color: #fff; text-align: center; box-shadow: var(--shadow-lg); animation: tl-pop .35s ease; }
.jep-meta { margin: 0 0 10px; font: 700 1.3rem var(--font-hand); color: #ffd25e; }
.jep-q { font: 600 clamp(1.5rem, 4vw, 2.8rem)/1.25 var(--font-display); overflow-wrap: anywhere; }
.jep-a { display: inline-block; margin-top: 18px; padding: 6px 20px; border-radius: 12px; background: rgba(255,255,255,.1); font: 700 clamp(1.7rem, 4vw, 2.8rem) var(--font-hand); color: #ffd25e; animation: tl-pop .3s ease; overflow-wrap: anywhere; }
.jep-card .tool-row { justify-content: center; margin-top: 20px; }
.tool-panel .jep-card .tool-row button { border-style: solid; }
.tool-panel .jep-card button.jep-award { background: var(--tc); color: #1c1c28; border: 0; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.tool-panel .jep-card button.jep-miss { background: transparent; color: var(--tc); border: 2px solid var(--tc); }
.jep-award-group { display: inline-flex; gap: 4px; }
.jep-timer { position: relative; height: 18px; margin: 18px auto 0; max-width: 520px; border-radius: 999px; background: rgba(0,0,0,.35); overflow: hidden; }
.jep-timer i { position: absolute; inset: 0; width: 100%; background: linear-gradient(90deg, #7dd87a, #ffd25e); border-radius: inherit; transform-origin: left; }
.jep-timer.low i { background: #ff6b5a; }
.jep-timer b { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 700 .85rem var(--font-display); }
.jep-dd { font: 700 clamp(2.6rem, 9vw, 6rem)/1 var(--font-display); color: #ffd25e; text-shadow: 0 5px 0 #8a5528; animation: jep-dd 1.2s ease; }
@keyframes jep-dd { 0% { transform: scale(.2) rotate(-200deg); opacity: 0; } 60% { transform: scale(1.15) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.jep-wagers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0 0; text-align: left; }
.jep-wagers label { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; border: 3px solid var(--tc); font-weight: 700; color: var(--tc); }
.tool-panel .jep-wagers input { width: 100%; }
.tl-panel:fullscreen .jep-q { font-size: 6vh; }
.tl-panel:fullscreen .jep-a { font-size: 6vh; }
.tl-panel:fullscreen .jep-card { max-width: 82vw; padding: 5vh 4vw 4vh; }
.tl-panel:fullscreen .jep-board .cat { font-size: 2.6vh; }
.tl-panel:fullscreen .jep-board button { font-size: 5.2vh; }

/* =================== Hangman =================== */
.hang-wrap { display: grid; grid-template-columns: minmax(150px, 280px) 1fr; gap: 26px; align-items: center; }
.hang-art { text-align: center; }
.hang-svg { width: 100%; height: auto; max-height: 360px; overflow: visible; }
.hang-svg .ghost * { stroke: rgba(244,241,232,.08); stroke-dasharray: 4 7; }
.hang-svg .part { stroke: var(--chalk); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hang-svg .part.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hang-draw .7s ease forwards; }
.hang-svg .part.dot { fill: var(--chalk); stroke: none; }
.hang-svg .part.carrot { stroke: #ffa45c; fill: rgba(255,164,92,.35); }
.hang-svg .part.hat { stroke: var(--chalk-p); }
.hang-svg .part.scarf { stroke: #ff6b5a; }
.hang-svg .ghost * { stroke: rgba(244,241,232,.1) !important; fill: none !important; stroke-dasharray: 3 7 !important; animation: none !important; }
@keyframes hang-draw { to { stroke-dashoffset: 0; } }
.hang-lives { margin-top: 6px; font: 700 1.4rem var(--font-hand); color: rgba(244,241,232,.8); }
.hang-lives .snow { letter-spacing: 3px; color: var(--chalk-b); }
.hang-count { margin: 0 0 6px; font: 700 1.2rem var(--font-hand); color: rgba(244,241,232,.6); }
.hang-word { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: flex-end; min-height: 1.4em; }
.hang-w { display: flex; gap: .16em; flex-wrap: nowrap; }
.hang-l { display: inline-flex; align-items: flex-end; justify-content: center; width: .9em; height: 1.25em; border-bottom: .09em solid var(--chalk); font: 700 var(--hs, clamp(2rem, 5.2vw, 3.6rem))/1 var(--font-display); color: var(--chalk); text-transform: uppercase; }
.hang-l.punct { border-bottom-color: transparent; width: auto; min-width: .4em; text-transform: none; }
.hang-l.shown { animation: tl-pop .4s cubic-bezier(.2,1.6,.4,1); }
.hang-l.missed { color: var(--chalk-r); }
.hang-hint { margin: 10px 0 0; font: 700 1.5rem var(--font-hand); color: var(--chalk-b); }
.hang-msg { min-height: 1.5em; margin: 10px 0 4px; font: 700 1.7rem var(--font-hand); color: var(--chalk-y); }
.hang-wrong { min-height: 1.6em; font: 700 1.5rem var(--font-display); color: var(--chalk-r); letter-spacing: .25em; }
.hang-wrong s { text-decoration-thickness: 3px; margin-right: .1em; }
.hang-keys { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.tool-panel .hang-keys button { min-height: 50px; padding: 0; justify-content: center; font: 700 1.25rem var(--font-display); border-style: solid; }
.tool-panel .hang-keys button.hit { background: rgba(125,216,122,.35); border-color: #7dd87a; color: #fff; opacity: 1; }
.tool-panel .hang-keys button.miss { background: transparent; border-color: rgba(255,107,90,.4); color: rgba(255,138,122,.6); text-decoration: line-through; }
.hang-keys button:disabled { cursor: default; }
.hang-keys button:disabled:not(.hit):not(.miss) { opacity: .3; }
.hang-wrap.won .hang-l { color: var(--chalk-g); border-bottom-color: var(--chalk-g); }
.hang-wrap.lost .hang-svg { animation: tl-shake .6s ease 1; }
.tl-panel:fullscreen .hang-wrap { grid-template-columns: minmax(200px, 38vh) 1fr; }
.tl-panel:fullscreen .hang-svg { max-height: 52vh; }
.tl-panel:fullscreen .hang-keys button { min-height: 7vh; font-size: 3.2vh; }
.tl-panel:fullscreen .hang-msg, .tl-panel:fullscreen .hang-hint { font-size: 4vh; }

/* =================== Bingo =================== */
.tl-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-panel .tl-tabs button[aria-selected="true"] { background: var(--yellow); color: #3b2a00; border: 2px solid var(--yellow); }
.bingo-out { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 16px; margin-top: 14px; }
.bingo-card { position: relative; border-radius: 6px; padding: 14px; background: var(--paper); color: #111; break-inside: avoid; }
.bingo-card h3 { text-align: center; margin: 0 0 10px; font-size: 1.25rem; color: #2b2a33; }
.bingo-card .bingo-no { position: absolute; top: 10px; right: 12px; font: 700 .85rem var(--font-body); color: #6e6a73; }
.bingo-card table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.bingo-card td { border: 2px solid #b9cde4; height: 60px; text-align: center; vertical-align: middle; font-size: .88rem; font-weight: 700; padding: 2px; overflow-wrap: anywhere; }
.bingo-card td.long { font-size: .74rem; }
.bingo-card td.xlong { font-size: .64rem; }
.bingo-card td.free { background: #ffe57a; font: 700 1.3rem var(--font-hand); }
.bingo-card td.hit { background: #c9f0c0; position: relative; }
.bingo-card td.hit::after { content: ""; position: absolute; inset: 6px; border: 3px solid rgba(228,87,46,.75); border-radius: 50%; }
.bingo-card td.line { background: #ffd25e; }
.bingo-caller { display: grid; grid-template-columns: minmax(200px, 360px) 1fr; gap: 26px; align-items: center; }
.bingo-ball-wrap { display: grid; place-items: center; }
.bingo-ball { position: relative; width: min(320px, 70vw); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14%; text-align: center; background: radial-gradient(circle at 35% 30%, #fff 0 18%, #fffdf7 30%, #e9dfc4 75%, #c8b991); color: #2b2a33; box-shadow: 0 20px 30px -14px rgba(0,0,0,.7), inset 0 -10px 20px rgba(0,0,0,.12); border: 10px solid var(--bc, #e4572e); container-type: inline-size; }
.bingo-ballnum { font: 700 8cqw var(--font-display); color: rgba(43,42,51,.5); }
.bingo-current { max-width: 100%; font: 700 15cqw/1.1 var(--font-display); white-space: nowrap; overflow: hidden; }
.bingo-ball.roll { animation: bingo-roll .7s cubic-bezier(.2,1.4,.4,1); }
@keyframes bingo-roll { from { transform: translateX(-120px) rotate(-260deg) scale(.6); opacity: 0; } }
.bingo-progress { margin: 0; font: 700 1.7rem var(--font-hand); color: var(--chalk-y); }
.bingo-side .tool-row { margin: 10px 0; }
.bingo-check { padding: 10px 12px; border-radius: 12px; border: 2px dashed rgba(244,241,232,.25); }
.tool-panel .bingo-check input { width: 80px; }
.bingo-h { margin: 16px 0 8px; font: 700 1.3rem var(--font-hand); color: rgba(244,241,232,.75); }
.bingo-history { display: flex; flex-wrap: wrap; gap: 8px; }
.bingo-history span { padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 2px solid rgba(244,241,232,.25); font-weight: 700; font-size: 1.05rem; }
.bingo-history span:first-child { animation: tl-in .3s ease; }
.bingo-history span:first-child { background: var(--yellow); color: #3b2a00; border-color: var(--yellow); }
.bingo-history span small { opacity: .6; margin-right: 4px; }
.bingo-bankbox { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 12px; border-radius: 12px; background: rgba(0,0,0,.22); }
.bingo-bankbox span { padding: 3px 10px; border-radius: 8px; background: rgba(255,255,255,.08); font-weight: 700; }
.bingo-bankbox span.called { background: rgba(255,210,94,.25); color: #ffe7a3; text-decoration: line-through; }
.bingo-checkcard { display: flex; justify-content: center; margin: 8px 0 0; }
.bingo-checkcard .bingo-card { width: min(440px, 100%); box-shadow: 0 6px 14px rgba(0,0,0,.2); }
.tl-panel:fullscreen .bingo-caller { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tl-panel:fullscreen .bingo-ball { width: min(50vh, 100%); }
.tl-panel:fullscreen .bingo-progress { font-size: 4.4vh; }
.tl-panel:fullscreen .bingo-history span { font-size: 2.4vh; }
.tl-panel:fullscreen #bingo-cards-pane { overflow: auto; flex: 1; }

/* =================== Spin the wheel =================== */
.wheel-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 26px; align-items: center; }
.wheel-box { position: relative; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 1; }
.wheel-box canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 14px 18px rgba(0,0,0,.4)); cursor: pointer; }
.wheel-pointer { position: absolute; left: 50%; top: -14px; z-index: 2; width: 44px; height: 58px; margin-left: -22px; background: linear-gradient(#ff7a5c, #d9432a); clip-path: polygon(50% 100%, 0 0, 100% 0); filter: drop-shadow(0 3px 2px rgba(0,0,0,.4)); transform: none; border: 0; transform-origin: 50% 10%; transition: transform .08s ease-out; }
.wheel-pointer.flick { transform: rotate(-22deg); transition: none; }
.tool-panel .wheel-spin { position: absolute; left: 50%; top: 50%; z-index: 2; width: 22%; height: 22%; min-height: 0; transform: translate(-50%, -50%); border-radius: 50%; justify-content: center; padding: 0; font: 700 clamp(.9rem, 2.4vw, 1.5rem) var(--font-display); border: 5px solid #fffdf7; box-shadow: 0 6px 0 #c99500, 0 10px 20px rgba(0,0,0,.4); }
.tool-panel .wheel-spin:hover { transform: translate(-50%, -52%); }
.tool-panel .wheel-spin:active { transform: translate(-50%, -48%); }
.wheel-result { font: 700 clamp(2rem, 5vw, 3.6rem)/1.15 var(--font-display); color: var(--chalk-y); min-height: 1.3em; overflow-wrap: anywhere; }
.wheel-left { margin: 6px 0 12px; font: 700 1.3rem var(--font-hand); color: rgba(244,241,232,.75); }
.wheel-h { margin: 0 0 6px; font: 700 1.2rem var(--font-hand); color: rgba(244,241,232,.75); }
.wheel-history { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; max-height: 190px; overflow: auto; }
.wheel-history li { padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.1); font-weight: 700; text-decoration: line-through; text-decoration-color: rgba(255,138,122,.8); }
.tl-panel:fullscreen .wheel-box { max-width: min(84vh, 56vw); }
.tl-panel:fullscreen .wheel-result { font-size: 7vh; }

/* =================== Noise meter =================== */
.noise-stage { display: grid; grid-template-columns: 1.2fr 90px 1fr; gap: 26px; align-items: center; }
.noise-facebox { text-align: center; }
.noise-face { width: min(280px, 100%); height: auto; overflow: visible; transition: transform .2s; }
.nf-head { fill: #7dd87a; stroke: rgba(0,0,0,.25); stroke-width: 4; transition: fill .4s ease; }
.nf-cheek { fill: rgba(255,120,120,.35); }
.nf-eye { fill: #2b2a33; transition: ry .2s; }
.nf-brow, .nf-mouth { fill: none; stroke: #2b2a33; stroke-width: 7; stroke-linecap: round; }
.noise-stage.warn .nf-head { fill: #ffd25e; }
.noise-stage.loud .nf-head { fill: #ff6b5a; }
.noise-stage.loud .noise-face { animation: tl-shake .5s ease infinite; }
.noise-stage.off .noise-face { opacity: .55; filter: grayscale(.5); }
.noise-status { margin: 10px 0 0; text-align: center; font: 700 clamp(1.5rem, 3vw, 2.2rem) var(--font-hand); color: var(--chalk); }
.noise-meter { height: 100%; min-height: 300px; display: flex; justify-content: center; }
.noise-tube { position: relative; width: 56px; height: 100%; min-height: 300px; border-radius: 999px; background: rgba(0,0,0,.28); border: 4px solid rgba(244,241,232,.3); overflow: visible; }
.noise-fill { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 0; width: auto; border-radius: 999px; background: #7dd87a; transition: background .3s ease; }
.noise-fill.warn { background: #ffd25e; }
.noise-fill.loud { background: #ff6b5a; }
.noise-limit { position: absolute; top: auto; left: -14px; right: -14px; width: auto; height: 4px; margin-bottom: -2px; background: var(--chalk); border-radius: 2px; }
.noise-limit span { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); white-space: nowrap; font: 700 1.1rem var(--font-hand); color: var(--chalk-r); }
.noise-jarbox { text-align: center; }
.noise-jar { width: min(220px, 100%); height: auto; overflow: visible; }
.noise-jar .glass { fill: rgba(200,230,255,.1); stroke: rgba(244,241,232,.7); stroke-width: 4; }
.noise-jar .lid { fill: #b5793f; stroke: #8a5528; stroke-width: 3; }
.noise-jar .marble { stroke: rgba(0,0,0,.25); stroke-width: 1.5; }
.noise-jar .marble.new { animation: marble-drop .6s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes marble-drop { from { transform: translateY(-150px); } }
.noise-jarlabel { margin: 6px 0 0; font: 700 1.6rem var(--font-hand); color: var(--chalk); }
.noise-jarlabel b { font: 700 2.2rem var(--font-display); color: var(--chalk-y); }
.noise-calm { margin: 0; font: 700 1.2rem var(--font-hand); color: rgba(244,241,232,.7); min-height: 1.4em; }
.noise-row { justify-content: center; }
.noise-row input[type=range], .tl-setup input[type=range] { width: 180px; padding: 0; accent-color: var(--yellow); }
.noise-stage.loud::after { content: "🤫"; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: clamp(5rem, 16vw, 11rem); pointer-events: none; animation: tl-pop .4s ease; opacity: .9; }
.tl-panel:fullscreen .noise-face { width: min(46vh, 100%); }
.tl-panel:fullscreen .noise-jar { width: min(40vh, 100%); }
.tl-panel:fullscreen .noise-tube { min-height: 56vh; }

/* =================== Dice =================== */
.dice-stage { display: flex; align-items: center; justify-content: center; min-height: 230px; }
.dice-row { --ds: 120px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(var(--ds) * .38); padding: 24px 0 10px; }
.dice-row.n4, .dice-row.n5, .dice-row.n6 { --ds: 100px; }
.die3d { width: var(--ds); height: var(--ds); perspective: calc(var(--ds) * 6); cursor: pointer; }
.die-tilt { width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-16deg) rotateY(20deg); }
.cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.2,.75,.25,1.05); }
.cube .face { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 14%; border-radius: 18%; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 55%), var(--dc, #e4572e); box-shadow: inset 0 0 0 3px rgba(0,0,0,.12), inset 0 -6px 10px rgba(0,0,0,.18); backface-visibility: hidden; }
.cube .pip { width: 76%; height: 76%; place-self: center; border-radius: 50%; background: #fffdf7; box-shadow: inset 0 2px 3px rgba(0,0,0,.35); }
.cube .f1 { transform: translateZ(calc(var(--ds) / 2)); }
.cube .f6 { transform: rotateY(180deg) translateZ(calc(var(--ds) / 2)); }
.cube .f2 { transform: rotateX(90deg) translateZ(calc(var(--ds) / 2)); }
.cube .f5 { transform: rotateX(-90deg) translateZ(calc(var(--ds) / 2)); }
.cube .f3 { transform: rotateY(90deg) translateZ(calc(var(--ds) / 2)); }
.cube .f4 { transform: rotateY(-90deg) translateZ(calc(var(--ds) / 2)); }
.die3d.hop { animation: die-hop 1.1s ease; }
@keyframes die-hop { 0% { transform: translateY(0); } 25% { transform: translateY(-40px); } 50% { transform: translateY(0); } 65% { transform: translateY(-12px); } 80% { transform: translateY(0); } }
.die-poly { position: relative; width: var(--ds); height: var(--ds); display: grid; place-items: center; cursor: pointer; filter: drop-shadow(0 10px 10px rgba(0,0,0,.4)); }
.die-poly::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.4), transparent 55%), var(--dc, #3a7bd5); clip-path: var(--shape); }
.die-poly b { position: relative; font: 700 calc(var(--ds) * .4)/1 var(--font-display); color: #fffdf7; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.die-poly.d4 { --shape: polygon(50% 3%, 98% 92%, 2% 92%); } .die-poly.d4 b { margin-top: 22%; font-size: calc(var(--ds) * .32); }
.die-poly.d8 { --shape: polygon(50% 0, 97% 50%, 50% 100%, 3% 50%); }
.die-poly.d10 { --shape: polygon(50% 0, 98% 40%, 80% 100%, 20% 100%, 2% 40%); }
.die-poly.d12 { --shape: polygon(50% 0, 90% 18%, 100% 60%, 76% 98%, 24% 98%, 0 60%, 10% 18%); }
.die-poly.d20 { --shape: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); }
.die-poly.spin { animation: die-spin 1s cubic-bezier(.2,.7,.3,1); }
@keyframes die-spin { 0% { transform: translateY(-30px) rotate(-540deg) scale(.6); } 70% { transform: translateY(0) rotate(15deg) scale(1.05); } 100% { transform: rotate(0); } }
.dice-total { text-align: center; margin: 4px 0 0; min-height: 1.3em; font: 700 clamp(2rem, 5vw, 3.4rem)/1.2 var(--font-display); color: var(--chalk-y); }
.dice-total small { font: 700 .55em var(--font-hand); color: rgba(244,241,232,.75); margin-right: 8px; }
.dice-total.show { animation: tl-pop .45s cubic-bezier(.2,1.6,.4,1); }
.dice-history { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; min-height: 1.6em; }
.dice-history span { padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(244,241,232,.7); font-weight: 700; font-size: .9rem; }
.dice-history span:first-child { color: var(--chalk); background: rgba(255,255,255,.16); }
.tl-panel:fullscreen .dice-row { --ds: min(24vh, 15vw); }
.tl-panel:fullscreen .dice-row.n4, .tl-panel:fullscreen .dice-row.n5, .tl-panel:fullscreen .dice-row.n6 { --ds: min(19vh, 12vw); }
.tl-panel:fullscreen .dice-total { font-size: 9vh; }

/* =================== Phones =================== */
@media (max-width: 860px) {
  .wheel-wrap, .bingo-caller { grid-template-columns: 1fr; }
  .wheel-side { text-align: center; }
  .wheel-history { justify-content: center; }
  .noise-stage { grid-template-columns: 1fr 70px 1fr; gap: 12px; }
}
@media (max-width: 640px) {
  .tool-panel.tl-panel { padding: 14px 12px; min-height: 0; }
  .tl-keys { display: none; }
  .tl-btn-text { display: none; }
  .tl-bar { gap: 6px 8px; }
  .tl-bar label { font-size: .88rem; }
  .tool-panel .tl-chips button { min-width: 0; padding: 6px 9px; font-size: .88rem; }
  .tool-panel button.tl-big { font-size: 1.15rem; padding: 10px 20px; }
  .hang-wrap { grid-template-columns: 1fr; gap: 8px; }
  .hang-svg { max-width: 170px; max-height: 180px; }
  .hang-word { gap: 10px 18px; justify-content: center; }
  .hang-main { text-align: center; }
  .hang-keys { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .tool-panel .hang-keys button { min-height: 42px; font-size: 1.05rem; }
  .noise-stage { grid-template-columns: 1fr 1fr; }
  .noise-meter { grid-column: 1 / -1; grid-row: 2; min-height: 0; height: auto; }
  .noise-tube { width: 100%; height: 34px; min-height: 0; }
  .noise-fill { top: 4px; bottom: 4px; left: 4px; right: auto; height: auto !important; }
  .noise-limit { top: -12px; bottom: -12px; left: auto; right: auto; width: 4px; height: auto; margin: 0 0 0 -2px; }
  .noise-limit span { left: 50%; top: calc(100% + 2px); bottom: auto; transform: translateX(-50%); }
  .noise-meter { margin: 6px 0 22px; }
  .dice-row { --ds: 82px; }
  .dice-row.n4, .dice-row.n5, .dice-row.n6 { --ds: 64px; }
  .picker-card { padding: 20px 14px 12px; min-width: 0; width: 100%; }
  .picker-cards.multi .picker-card { max-width: 100%; }
  .score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .score-team { padding: 14px 6px 10px; }
  .tool-panel .score-team input.score-name { font-size: 1.35rem; }
  .tool-panel .score-btns button { min-height: 48px; }
  .jep-board { gap: 4px; grid-auto-rows: minmax(44px, auto); }
  .jep-board .cat { font-size: .72rem; padding: 6px 2px; }
  .tool-panel .jep-board button { font-size: 1rem; padding: 8px 0; }
  .bingo-ball { width: min(240px, 70vw); }
  .tool-row input[type=text] { width: 100%; }
}

/* =================== Print (bingo cards only) =================== */
@media print {
  .tool-bingo .tl-bar, .tool-bingo #bingo-call-pane, .tool-bingo .tl-keys, .tool-bingo .tl-reveal { display: none !important; }
  .tool-bingo #bingo-cards-pane { display: block !important; }
  .tool-bingo .tool-panel { min-height: 0; }
  .tool-bingo .bingo-card { box-shadow: none; }
  .tool-bingo .bingo-card h3 { font-size: 20pt; }
  .tool-bingo .bingo-card td { height: 78px; font-size: 14pt; }
  .tool-bingo .bingo-card td.long { font-size: 12pt; } .tool-bingo .bingo-card td.xlong { font-size: 10pt; }
}