/* Styles for the newer online games (data/play-extra.js): Lucky Boxes, Team Race, Sort It, Heads Up.
   Loaded on every /play/ page after play.css. Prefixes: lb-, tr-/tg-, so-, hu-; shared helpers px-. */

/* ---------- shared helpers ---------- */
.px-shake { animation: px-shake .5s ease; }
@keyframes px-shake { 15%, 55% { transform: translateX(-10px) rotate(-2deg); } 35%, 75% { transform: translateX(10px) rotate(2deg); } }
.px-quake { animation: px-quake .6s ease; }
@keyframes px-quake { 10%, 50%, 90% { transform: translate(-7px, 4px); } 30%, 70% { transform: translate(7px, -4px); } }
.tool-panel .play-card button.px-ok { background: #3c8f37; border-color: #3c8f37; color: #fff; }
.tool-panel .play-card button.px-no { background: #e2453c; border-color: #e2453c; color: #fff; }
.tool-panel .play-card button.px-ok:hover, .tool-panel .play-card button.px-no:hover { filter: brightness(1.08); }

/* ---------- Lucky Boxes ---------- */
.lb-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; max-width: 860px; margin: -6px auto 22px; }
.lb-legend span { background: #fff8d6; color: #4a3200; font-weight: 700; padding: 6px 12px; border-radius: 4px; box-shadow: 0 6px 10px -6px rgba(0,0,0,.5); transform: rotate(-1deg); }
.lb-legend span:nth-child(3n+2) { background: #dff1fb; transform: rotate(1deg); }
.lb-legend span:nth-child(3n) { background: #ffe1ea; }
.lb-wrap { display: flex; flex-direction: column; gap: 14px; }
.lb-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; text-align: center; }
.lb-turn { font: 700 clamp(1.3rem, 2.6vw, 1.9rem) var(--font-display); color: var(--chalk); }
.lb-left { font: 700 1.1rem var(--font-display); color: rgba(244,241,232,.7); }
.tool-panel .lb-status button { padding: 6px 12px; font-size: .9rem; }
.lb-grid { display: grid; grid-template-columns: repeat(var(--cols, 8), 1fr); gap: clamp(8px, 1.4vw, 16px); width: 100%; max-width: 1180px; margin: 0 auto; padding-top: 8px; }
.lb-box.c0, .lb-reveal.c0 { --bc: #e2453c; --rb: #ffd25e; } .lb-box.c1, .lb-reveal.c1 { --bc: #2f6fd1; --rb: #ffd25e; }
.lb-box.c2, .lb-reveal.c2 { --bc: #e8a300; --rb: #e2453c; } .lb-box.c3, .lb-reveal.c3 { --bc: #3c8f37; --rb: #ffd25e; }
.lb-box.c4, .lb-reveal.c4 { --bc: #8e6bbf; --rb: #ffd25e; } .lb-box.c5, .lb-reveal.c5 { --bc: #17a08a; --rb: #ffe1ea; }
.tool-panel .lb-box { position: relative; display: block; aspect-ratio: 1 / .9; padding: 0; border: 0; background: none; border-radius: 12px; animation: lb-in .45s cubic-bezier(.2,1.4,.4,1) backwards; animation-delay: var(--d, 0s); }
.tool-panel .lb-box:hover { background: none; }
@keyframes lb-in { from { transform: translateY(-30px) scale(.6); opacity: 0; } }
.lb-lid, .lb-body { position: absolute; display: block; }
.lb-lid { z-index: 2; top: 0; left: -4%; right: -4%; height: 27%; border-radius: 8px; background: linear-gradient(var(--rb), var(--rb)) 50% 0 / 16% 100% no-repeat, var(--bc); box-shadow: inset 0 -5px 0 rgba(0,0,0,.22), 0 4px 6px rgba(0,0,0,.25); filter: brightness(1.08); transition: transform .25s ease; }
.lb-body { top: 22%; bottom: 0; left: 0; right: 0; border-radius: 0 0 12px 12px; background: linear-gradient(var(--rb), var(--rb)) 50% 0 / 16% 100% no-repeat, var(--bc); box-shadow: inset 0 -8px 0 rgba(0,0,0,.2), 0 10px 16px -8px rgba(0,0,0,.6); display: grid; place-items: center; }
.lb-body b { position: relative; z-index: 1; display: grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .2em; border-radius: 50%; background: #fffdf7; color: #2b2a33; font: 700 clamp(1.15rem, 2.6vw, 2.3rem)/1 var(--font-display); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.tool-panel .lb-box:hover .lb-lid, .lb-box.is-cursor .lb-lid { transform: translateY(-14%) rotate(-5deg); }
.lb-box.is-cursor { outline: 4px dashed var(--chalk); outline-offset: 5px; }
.lb-box.is-picked { animation: lb-wobble .5s ease-in-out infinite; }
@keyframes lb-wobble { 25% { transform: rotate(-5deg) scale(1.05); } 75% { transform: rotate(5deg) scale(1.05); } }
.lb-box.is-open { display: grid; place-items: center; align-content: center; gap: 2px; aspect-ratio: 1 / .9; border-radius: 12px; border: 3px dashed var(--tc); background: rgba(0,0,0,.2); animation: pop .3s ease; }
.lb-prize { font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1; }
.lb-box.is-open small { font: 700 clamp(.85rem, 1.5vw, 1.2rem) var(--font-display); color: var(--tc); }
.lb-card { width: min(820px, 100%); }
.lb-card .qs-ask { color: var(--ink); }
.lb-q { font-size: clamp(1.6rem, 3.8vw, 2.9rem) !important; line-height: 1.2; }
.lb-shut { font: 700 1.6rem var(--font-hand); color: #c0392b; margin: 12px 0 0; }
.play-lucky-boxes .play-stage { min-height: 470px; }
.lb-reveal { position: relative; height: clamp(150px, 24vh, 250px); display: grid; place-items: center; overflow: hidden; margin: -6px 0 4px; }
.lb-rays { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,201,60,.55) 0 9deg, transparent 9deg 18deg); -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%); opacity: 0; transform: scale(.4); transition: opacity .4s, transform .6s; }
.lb-reveal.is-open .lb-rays { opacity: 1; transform: scale(1); animation: lb-spin 8s linear infinite; }
@keyframes lb-spin { to { rotate: 360deg; } }
.lb-bigbox { position: relative; width: clamp(96px, 15vh, 150px); aspect-ratio: 1 / .9; translate: 0 28%; }
.lb-reveal.is-open .lb-bigbox .lb-body b { opacity: 0; transition: opacity .2s; }
.lb-bigbox .lb-body b { font-size: 2.2rem; }
.lb-reveal.is-shaking .lb-bigbox { animation: lb-rattle .12s linear infinite; }
@keyframes lb-rattle { 25% { transform: rotate(-4deg) translateX(-3px); } 75% { transform: rotate(4deg) translateX(3px); } }
.lb-reveal.is-open .lb-lid { animation: lb-lidoff .7s cubic-bezier(.2,.8,.4,1) forwards; }
@keyframes lb-lidoff { to { transform: translate(-60%, -200%) rotate(-45deg); opacity: 0; } }
.lb-reveal.is-open .lb-bigbox { animation: lb-squash .4s ease; }
@keyframes lb-squash { 40% { transform: scale(1.15, .85); } }
.lb-bigprize { position: absolute; z-index: 3; font-size: clamp(4.5rem, 12vh, 7rem); line-height: 1; transform: scale(0); opacity: 0; filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.lb-reveal.is-open .lb-bigprize { animation: lb-prize .8s cubic-bezier(.2,1.6,.4,1) .15s forwards; }
@keyframes lb-prize { 0% { transform: translateY(40%) scale(0); opacity: 1; } 100% { transform: translateY(-22%) scale(1); opacity: 1; } }
.lb-ptitle { margin: 0 0 6px !important; animation: pop .35s ease .5s backwards; }
.lb-ptext { font: 700 1.35rem var(--font-display); margin: 4px 0 8px; }
.lb-after:empty { min-height: 40px; }
.tool-panel:fullscreen .lb-grid { max-width: min(1500px, 150vh); }

/* ---------- Team Race ---------- */
.tr-wrap { display: flex; flex-direction: column; gap: 14px; }
.tr-qbox { text-align: center; }
.tr-qnum { font: 700 1.4rem var(--font-hand); color: rgba(244,241,232,.7); margin: 0; }
.tr-q { color: #fff; font-size: clamp(1.5rem, 3.6vw, 2.7rem); line-height: 1.2; margin: 2px auto 10px; max-width: 1000px; }
.tr-q.is-long { font-size: clamp(1.25rem, 2.6vw, 2rem); }
.tr-arow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; min-height: 52px; }
.tr-arow .play-answer { margin: 0; }
.tr-track { display: flex; flex-direction: column; gap: 8px; }
.tool-panel .tr-lane { display: grid; grid-template-columns: minmax(5.5em, 8em) 1fr 3.6em; align-items: center; gap: 12px; width: 100%; padding: 6px 12px; text-align: left; border: 0; border-left: 8px solid var(--tc); border-radius: 12px; background: rgba(0,0,0,.18); transition: background .2s, box-shadow .2s; }
.tool-panel .tr-lane:hover { background: rgba(255,255,255,.08); border-style: solid; }
.tool-panel .tr-lane.is-on { background: rgba(255,255,255,.1); box-shadow: 0 0 0 3px var(--tc); }
.tr-name { font: 700 clamp(1rem, 1.8vw, 1.35rem) var(--font-display); color: var(--tc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-road { position: relative; height: clamp(44px, 7vh, 76px); border-radius: 10px; background: rgba(0,0,0,.22); }
.tr-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(calc(var(--len) + 1), 1fr); border-radius: inherit; overflow: hidden; }
.tr-cell { position: relative; border-right: 2px dashed rgba(244,241,232,.2); display: grid; place-items: center; font-style: normal; }
.tr-cell.is-start { border-right: 3px solid rgba(244,241,232,.55); }
.tr-cell.is-boost::after { content: '⭐'; font-size: 1.1rem; opacity: .75; }
.tr-cell.is-finish { border-right: 0; background: repeating-conic-gradient(rgba(255,255,255,.85) 0 25%, rgba(30,30,30,.85) 0 50%) 0 0 / 16px 16px; }
.tr-token { position: absolute; z-index: 2; top: 50%; left: calc((var(--x) + .5) * 100% / (var(--len) + 1)); transform: translate(-50%, -50%); font-size: clamp(1.8rem, 4.6vh, 3.1rem); line-height: 1; transition: left .6s cubic-bezier(.3,1.5,.5,1); filter: drop-shadow(0 4px 3px rgba(0,0,0,.4)); }
.tr-token > span { display: inline-block; }
.tok-animals > span, .tok-cars > span { transform: scaleX(-1); }
.tok-rockets > span { transform: rotate(45deg); }
.tr-token.hop { animation: tr-hop .55s ease; }
@keyframes tr-hop { 35% { translate: 0 -45%; } 70% { translate: 0 5%; } }
.tr-lane.is-lead .tr-token::before { content: '👑'; position: absolute; left: 50%; top: -.55em; transform: translateX(-50%); font-size: .5em; }
.tr-steps { font: 700 clamp(1rem, 1.8vw, 1.3rem) var(--font-display); color: var(--chalk); text-align: right; }
.tool-panel .tr-lane.is-winner { box-shadow: 0 0 0 4px #ffd25e, 0 0 30px #ffd25e; }
.tr-lane.is-winner .tr-token { animation: tr-dance .5s ease-in-out infinite; }
@keyframes tr-dance { 50% { translate: 0 -30%; rotate: 10deg; } }
.tool-panel:fullscreen .tr-road { height: clamp(50px, 9vh, 110px); }
.tool-panel:fullscreen .tr-token { font-size: clamp(2rem, 7vh, 4.6rem); }

/* Tug of war */
.tg-field { position: relative; height: clamp(190px, 34vh, 360px); border-radius: 14px; background: rgba(0,0,0,.16); overflow: hidden; }
.tg-zone { position: absolute; top: 0; bottom: 0; width: 12%; background: repeating-linear-gradient(45deg, var(--tc) 0 8px, transparent 8px 22px); opacity: .5; }
.tg-zone.z0 { left: 0; } .tg-zone.z1 { right: 0; }
.tg-zone span { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font: 700 1.2rem var(--font-display); color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.6); }
.tg-marks i { position: absolute; top: 18%; bottom: 18%; width: 0; left: calc(50% + var(--s) * 38% / var(--len)); border-left: 2px dashed rgba(244,241,232,.2); }
.tg-marks i.mid { border-left: 4px solid rgba(244,241,232,.75); }
.tg-marks i.end { top: 6%; bottom: 6%; border-left: 5px solid rgba(255,255,255,.9); }
.tg-rope { position: absolute; left: 2%; right: 2%; top: 58%; height: 14px; transform: translateY(-50%); border-radius: 8px; background: repeating-linear-gradient(60deg, #e2b170 0 7px, #a8743c 7px 14px); background-position: calc(var(--k) * 38px) 0; box-shadow: 0 4px 6px rgba(0,0,0,.35); transition: background-position .6s ease; }
.tg-knot { position: absolute; z-index: 2; top: 58%; left: calc(50% + var(--k) * 38% / var(--len)); width: 18px; height: 70px; transform: translate(-50%, -50%); background: #e2453c; border: 3px solid #fff; border-radius: 6px; box-shadow: 0 6px 12px rgba(0,0,0,.4); transition: left .6s cubic-bezier(.3,1.5,.5,1); }
.tg-crew { position: absolute; top: 58%; transform: translateY(-88%); display: flex; gap: 2px; font-size: clamp(2rem, 6vh, 3.6rem); line-height: 1; transform-origin: 50% 100%; }
.tg-crew.c0 { left: 2%; }
.tg-crew.c1 { right: 2%; }
.tg-crew.c1 > span { transform: scaleX(-1); display: inline-block; }
.tg-crew.c0 > span { display: inline-block; }
.tg-crew span:nth-child(2) { animation-delay: .08s; } .tg-crew span:nth-child(3) { animation-delay: .16s; }
.tg-field.pull-0 .tg-crew.c0 > span { animation: tg-pull0 .5s ease; }
.tg-field.pull-1 .tg-crew.c1 > span { animation: tg-pull1 .5s ease; }
@keyframes tg-pull0 { 40% { transform: translateX(-10px) rotate(-14deg); } }
@keyframes tg-pull1 { 40% { transform: scaleX(-1) translateX(-10px) rotate(-14deg); } }
.tg-field.is-won .tg-knot { animation: tg-glow .6s ease-in-out infinite; }
@keyframes tg-glow { 50% { box-shadow: 0 0 0 8px rgba(255,210,94,.6), 0 0 30px #ffd25e; } }
.tg-btns .qs-tm { font-size: clamp(1.1rem, 2.4vw, 1.6rem); padding: 14px 26px; }

/* ---------- Sort It ---------- */
.so-wrap { display: flex; flex-direction: column; gap: 12px; }
.so-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; min-height: 40px; }
.so-turn { font: 700 clamp(1.15rem, 2.2vw, 1.6rem) var(--font-display); color: var(--chalk); }
.so-left { font: 700 1.15rem var(--font-display); color: rgba(244,241,232,.7); }
.so-clock { font: 700 clamp(1.4rem, 2.6vw, 2rem) var(--font-display); color: #ffd25e; font-variant-numeric: tabular-nums; }
.so-pile { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 12px 14px; min-height: 70px; padding: 6px 4px 10px; }
.tool-panel .so-card { position: relative; z-index: 1; padding: 14px 22px 12px; border: 0; border-radius: 6px; color: var(--ink); font: 700 clamp(1.1rem, 2.1vw, 1.75rem)/1.15 var(--font-display); background: linear-gradient(#f0a7a0, #f0a7a0) 0 9px / 100% 2px no-repeat, #fffdf7; box-shadow: 0 5px 0 rgba(0,0,0,.16), 0 12px 18px -8px rgba(0,0,0,.6); transform: rotate(var(--r, 0deg)); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; animation: so-deal .45s cubic-bezier(.2,1.3,.4,1) backwards; animation-delay: var(--d, 0s); }
@keyframes so-deal { from { transform: translateY(-50px) rotate(12deg); opacity: 0; } }
.tool-panel .so-card:hover { background: linear-gradient(#f0a7a0, #f0a7a0) 0 9px / 100% 2px no-repeat, #fff; border-style: none; filter: brightness(1.03); }
.tool-panel .so-card.is-drag { z-index: 30; cursor: grabbing; box-shadow: 0 22px 30px -10px rgba(0,0,0,.65); animation: none; }
.tool-panel .so-card.is-back { transition: transform .3s cubic-bezier(.3,1.4,.5,1); }
.tool-panel .so-card.is-sel { outline: 5px solid #ffd25e; outline-offset: 3px; transform: translateY(-6px); }
.tool-panel .so-card.px-shake { box-shadow: 0 0 0 4px #ff6b5a, 0 12px 18px -8px rgba(0,0,0,.6); }
.so-buckets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.so-buckets.n3 { grid-template-columns: repeat(3, 1fr); } .so-buckets.n4 { grid-template-columns: repeat(4, 1fr); }
.so-bucket { --bk: #ffd25e; position: relative; min-height: clamp(150px, 27vh, 340px); padding: 10px 12px 12px; border: 3px dashed var(--bk); border-radius: 16px; background: rgba(0,0,0,.16); transition: transform .15s, background .15s, box-shadow .2s; cursor: pointer; }
.so-bucket.b1 { --bk: #5aa2ff; } .so-bucket.b2 { --bk: #ff6b5a; } .so-bucket.b3 { --bk: #7dd87a; }
.so-bucket h3 { margin: 0 0 10px; text-align: center; color: var(--bk); font: 700 clamp(1.2rem, 2.4vw, 1.9rem)/1.15 var(--font-display); }
.so-bucket h3 kbd { font-size: .55em; vertical-align: .3em; color: rgba(244,241,232,.6); }
.so-bucket.is-over { border-style: solid; background: rgba(255,255,255,.1); transform: scale(1.02); }
.so-bucket.is-right { animation: so-ok .6s ease; }
.so-bucket.is-wrong { animation: px-shake .5s ease; box-shadow: 0 0 0 4px #ff6b5a; }
@keyframes so-ok { 30% { box-shadow: 0 0 0 6px #7dd87a, 0 0 30px #7dd87a; transform: scale(1.03); } }
.so-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.so-chip { background: var(--bk); color: #1d1d1d; font: 700 clamp(.95rem, 1.5vw, 1.2rem) var(--font-display); padding: 4px 12px; border-radius: 999px; animation: so-snap .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes so-snap { from { transform: scale(1.8); opacity: 0; } }
.so-times { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; padding: 0; margin: -4px 0 18px; }
.so-times li { font: 700 1.1rem var(--font-display); color: var(--tc); background: rgba(0,0,0,.25); padding: 4px 14px; border-radius: 999px; }
.so-times b { color: #fff; }
.so-record { font: 700 1.7rem var(--font-hand); color: #ffd25e; margin: 0 0 16px; }
.tool-panel:fullscreen .so-card { font-size: clamp(1.3rem, 3vh, 2.2rem); }

/* ---------- Heads Up ---------- */
.hu-roundno { font: 700 1.5rem var(--font-hand) !important; color: rgba(244,241,232,.7) !important; margin: 0 auto 4px !important; }
.hu-ready h2 .pk-who { font-size: 1.1em; }
.hu-count { text-align: center; font: 700 clamp(7rem, 26vh, 16rem)/1 var(--font-display); color: #ffd25e; text-shadow: 0 8px 0 rgba(0,0,0,.25); animation: pop .4s ease; }
.hu-live { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hu-top { display: flex; align-items: center; gap: 14px; }
.hu-who { font: 700 clamp(1.2rem, 2.4vw, 1.7rem) var(--font-display); color: var(--chalk); }
.hu-tally { margin-left: auto; font: 700 clamp(1.4rem, 2.6vw, 2rem) var(--font-display); color: #7dd87a; }
.hu-clock { display: grid; place-items: center; min-width: 64px; height: 64px; padding: 0 8px; border-radius: 999px; background: rgba(0,0,0,.3); border: 3px solid #ffd25e; font: 700 2rem/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.hu-clock.is-low { border-color: #ff6b5a; color: #ff6b5a; animation: hu-pulse 1s ease-in-out infinite; }
@keyframes hu-pulse { 50% { transform: scale(1.12); } }
.hu-bar { margin: 0; }
.hu-stack { position: relative; flex: 1; display: grid; place-items: center; min-height: clamp(230px, 40vh, 620px); }
.hu-card { grid-area: 1 / 1; width: min(1000px, 100%); background: var(--paper); color: var(--ink); border-radius: 18px; border-top: 14px solid #ec6f9c; padding: clamp(22px, 5vh, 56px) 24px; text-align: center; box-shadow: 0 22px 40px -12px rgba(0,0,0,.6); transform: rotate(-1deg); }
.hu-card.is-in { animation: hu-in .3s cubic-bezier(.2,1.4,.4,1); }
@keyframes hu-in { from { transform: rotate(-1deg) scale(.8); opacity: 0; } }
.hu-word { margin: 0; color: var(--ink); font: 700 clamp(3rem, 10vw, 8.5rem)/1.05 var(--font-display); overflow-wrap: anywhere; }
.hu-word.is-long { font-size: clamp(2.3rem, 7vw, 6rem); }
.hu-word.is-xlong { font-size: clamp(1.8rem, 5vw, 4.4rem); }
.hu-no { margin-top: clamp(10px, 2vh, 22px); }
.hu-no p { margin: 0 0 6px; font: 700 1.6rem var(--font-hand); color: #c0392b; }
.hu-no ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 0; }
.hu-no li { background: #ffe1ea; color: #8a1c2b; border: 2px solid #f3a5b5; font: 700 clamp(1.1rem, 2.4vw, 1.9rem) var(--font-display); padding: 4px 16px; border-radius: 999px; }
.hu-ghost { pointer-events: none; z-index: 2; }
.hu-ghost.is-got { animation: hu-got .55s ease-in forwards; border-top-color: #4f9d4a; background: #eaf6e7; }
.hu-ghost.is-passed { animation: hu-pass .55s ease-in forwards; border-top-color: #8a8f98; background: #eceae4; }
@keyframes hu-got { to { transform: translate(30%, -70%) rotate(14deg) scale(.6); opacity: 0; } }
@keyframes hu-pass { to { transform: translate(-60%, 10%) rotate(-14deg) scale(.7); opacity: 0; } }
.hu-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
.tool-panel .hu-btns button { justify-content: center; padding: clamp(14px, 2.4vh, 24px) 16px; border: 0; border-radius: 14px; color: #fff; font: 700 clamp(1.3rem, 3vw, 2.3rem) var(--font-display); box-shadow: inset 0 -6px 0 rgba(0,0,0,.22); }
.tool-panel .hu-btns .hu-got { background: #3c8f37; }
.tool-panel .hu-btns .hu-pass { background: #6b7480; }
.tool-panel .hu-btns button:hover { filter: brightness(1.1); border-style: none; }
.tool-panel .hu-btns kbd { font-size: .5em; }
.tool-panel .hu-stop { padding: 6px 12px; font-size: .9rem; opacity: .8; }
.hu-sum { text-align: center; }
.hu-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 18px; max-width: 980px; }
.hu-w { font: 700 clamp(1rem, 1.8vw, 1.35rem) var(--font-display); padding: 5px 14px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(244,241,232,.75); }
.hu-w.got { background: #dff3da; color: #245c20; }
.hu-w.passed { background: rgba(0,0,0,.25); color: rgba(244,241,232,.7); }
.hu-all { max-width: 980px; margin: 0 auto 16px; text-align: left; }
.hu-all summary { cursor: pointer; font: 700 1.5rem var(--font-hand); color: var(--chalk); text-align: center; }
.hu-allbox { max-height: 30vh; overflow: auto; }
.hu-allrow { padding: 8px 0; border-bottom: 2px dashed rgba(244,241,232,.15); }
.hu-allrow > b { display: block; font: 700 1.1rem var(--font-display); color: var(--chalk); margin-bottom: 6px; }
.hu-allrow .hu-words { justify-content: flex-start; margin: 0; }
.tool-panel:fullscreen .hu-word { font-size: clamp(4rem, 17vh, 13rem); }
.tool-panel:fullscreen .hu-word.is-long { font-size: clamp(3rem, 12vh, 9rem); }
.tool-panel:fullscreen .hu-word.is-xlong { font-size: clamp(2.2rem, 8vh, 6rem); }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  #lb-mode, #so-play, #hu-taboo, #tr-mode, #tr-token { max-width: 56vw; }
  .lb-grid { gap: 8px; }
  .tool-panel .tr-lane { grid-template-columns: 4.6em 1fr 2.6em; gap: 6px; padding: 5px 8px; }
  .tr-name kbd { display: none; }
  .tr-cell.is-boost::after { font-size: .8rem; }
  .tg-crew { font-size: 1.6rem; }
  .so-buckets, .so-buckets.n3, .so-buckets.n4 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .so-bucket { min-height: 120px; padding: 8px; }
  .tool-panel .so-card { padding: 10px 14px 9px; }
  .hu-clock { min-width: 52px; height: 52px; font-size: 1.6rem; }
  .hu-btns { grid-template-columns: 1fr 1fr; }
}

/* ---------- full screen on the projector ---------- */
.tool-panel:fullscreen .so-bucket { min-height: 34vh; }
.tool-panel:fullscreen .tr-q { font-size: clamp(2rem, 5vh, 3.6rem); }
.tool-panel:fullscreen .lb-q { font-size: clamp(2rem, 5vh, 3.6rem) !important; }