/* TLC Arcade core: extra pieces for games built on tlc-arcade-core.js.
   Loads after cosmic-shooter.css (the shared cabinet, overlay and buttons). */

.tlc-arcade .ar-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tlc-arcade .ar-layer > * { pointer-events: auto; }
.tlc-arcade .ar-actions { gap: 10px; }
.tlc-arcade .ar-label { margin: 8px 0 0; font-family: var(--cs-pixel); font-size: 0.56rem; letter-spacing: 0.1em; color: var(--cs-amber); }
.tlc-arcade .ar-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tlc-arcade .cs-btn.ar-alt { color: var(--cs-cyan); background: rgba(34, 230, 255, 0.06); border-color: var(--cs-cyan); box-shadow: 0 0 14px var(--cs-cyan-soft); padding: 13px 14px; }
.tlc-arcade .cs-btn.ar-alt:hover { background: rgba(34, 230, 255, 0.16); }
.tlc-arcade .ar-menu { background: none; border: 0; padding: 4px; cursor: pointer; }

/* ---------- Glow Blocks: on-screen buttons (touch screens) + taller well on phones ---------- */
.tlc-arcade .gb-pad { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; gap: 8px; justify-content: center; align-items: center; padding: 0 10px; }
.tlc-arcade .gb-pad[hidden] { display: none; }
.tlc-arcade .gb-btn {
  flex: 1 1 0; max-width: 72px; height: 48px; display: flex; align-items: center; justify-content: center;
  color: var(--cs-cyan); background: rgba(34, 230, 255, 0.07); border: 1px solid var(--cs-cyan-soft); border-radius: 8px;
  touch-action: none; -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.tlc-arcade .gb-btn:active { background: rgba(34, 230, 255, 0.22); }
.tlc-arcade .gb-btn svg { width: 22px; height: 22px; }
.tlc-arcade .gb-btn[data-gb="drop"] { color: var(--cs-magenta); border-color: var(--cs-magenta-soft); background: rgba(255, 62, 165, 0.08); }
@media (max-width: 640px) { .tlc-arcade.gb-cabinet .gm-screen { aspect-ratio: 2 / 3; } }

/* ---------- Count the Stars: prompt + big number buttons ---------- */
.tlc-arcade .ct-prompt {
  position: absolute; top: 14px; left: 14px; right: 104px; margin: 0;
  font-family: var(--cs-pixel); font-size: clamp(0.6rem, 2vw, 0.8rem); line-height: 1.6; color: var(--cs-white);
  text-shadow: 0 0 10px rgba(34, 230, 255, 0.5);
}
.tlc-arcade .ct-prompt[hidden], .tlc-arcade .ct-pad[hidden] { display: none; }
.tlc-arcade .ct-pad { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: clamp(8px, 2vw, 16px); padding: 0 12px; }
.tlc-arcade .ct-num {
  flex: 0 1 84px; min-width: 56px; height: 64px; cursor: pointer; border-radius: 10px;
  font-family: var(--cs-pixel); font-size: clamp(1rem, 3vw, 1.4rem); color: #07051A;
  background: var(--cs-cyan); border: 3px solid #F6F8FC; box-shadow: 0 0 18px var(--cs-cyan-soft);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tlc-arcade .ct-num:hover:not([disabled]) { background: #5EF0FF; }
.tlc-arcade .ct-num:focus-visible { outline: 3px solid var(--cs-amber); outline-offset: 3px; }
.tlc-arcade .ct-num.is-right { background: var(--cs-amber); box-shadow: 0 0 26px rgba(240, 138, 60, 0.8); }
.tlc-arcade .ct-num.is-wrong, .tlc-arcade .ct-num[disabled] { opacity: 0.3; cursor: default; box-shadow: none; }

/* ---------- Word Beam: guess grid + on-screen keyboard ---------- */
.tlc-arcade .wb-wrap {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  --wb-t: 48px; --wb-g: 6px; --wb-kh: 48px; --wb-kw: 34px; --wb-kg: 6px;
}
.tlc-arcade .wb-grid { display: flex; flex-direction: column; gap: var(--wb-g); margin: auto 0; }
.tlc-arcade .wb-row { display: flex; gap: var(--wb-g); }
.tlc-arcade .wb-tile {
  width: var(--wb-t); height: var(--wb-t); display: flex; align-items: center; justify-content: center;
  font-family: var(--cs-pixel); font-size: calc(var(--wb-t) * 0.4); color: var(--cs-white);
  border: 2px solid rgba(166, 176, 194, 0.28); border-radius: 6px; background: rgba(7, 5, 26, 0.55); box-sizing: border-box;
}
.tlc-arcade .wb-tile.is-filled { border-color: rgba(246, 248, 252, 0.6); }
.tlc-arcade .wb-tile.is-hit { background: var(--cs-cyan); border-color: var(--cs-cyan); color: #07051A; box-shadow: 0 0 14px var(--cs-cyan-soft); }
.tlc-arcade .wb-tile.is-near { background: var(--cs-amber); border-color: var(--cs-amber); color: #07051A; box-shadow: 0 0 14px rgba(240, 138, 60, 0.45); }
.tlc-arcade .wb-tile.is-out { background: #2A2840; border-color: #2A2840; color: #A6B0C2; }
.tlc-arcade .wb-tile.is-pop { animation: wb-pop 0.1s ease-out; }
.tlc-arcade .wb-tile.is-flip { animation: wb-flip 0.26s ease-in-out; }
.tlc-arcade .wb-row.is-shake { animation: wb-shake 0.36s; }
@keyframes wb-pop { 50% { transform: scale(1.1); } }
@keyframes wb-flip { 50% { transform: scaleY(0); } }
@keyframes wb-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.tlc-arcade .wb-kb { display: flex; flex-direction: column; gap: var(--wb-kg); align-items: center; }
.tlc-arcade .wb-krow { display: flex; gap: var(--wb-kg); }
.tlc-arcade .wb-key {
  width: var(--wb-kw); height: var(--wb-kh); padding: 0; cursor: pointer; border-radius: 6px;
  font-family: var(--cs-pixel); font-size: clamp(0.56rem, 1.6vw, 0.72rem); color: var(--cs-white);
  background: rgba(139, 92, 255, 0.18); border: 1px solid rgba(139, 92, 255, 0.55);
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tlc-arcade .wb-key.wb-wide { width: calc(var(--wb-kw) * 1.5 + var(--wb-kg) / 2); font-size: clamp(0.44rem, 1.3vw, 0.56rem); }
.tlc-arcade .wb-key svg { width: 20px; height: 15px; }
.tlc-arcade .wb-key:hover { background: rgba(139, 92, 255, 0.32); }
.tlc-arcade .wb-key:active { transform: translateY(1px); }
.tlc-arcade .wb-key.is-hit { background: var(--cs-cyan); border-color: var(--cs-cyan); color: #07051A; }
.tlc-arcade .wb-key.is-near { background: var(--cs-amber); border-color: var(--cs-amber); color: #07051A; }
.tlc-arcade .wb-key.is-out { background: #1C1A2E; border-color: #1C1A2E; color: #5E6478; }
.tlc-arcade .wb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
@media (max-width: 640px) { .tlc-arcade.wb-cabinet .gm-screen { aspect-ratio: 2 / 3; } }
@media (prefers-reduced-motion: reduce) { .tlc-arcade .wb-tile.is-flip, .tlc-arcade .wb-tile.is-pop, .tlc-arcade .wb-row.is-shake { animation: none; } }
@media (min-width: 641px) and (max-width: 1023px) { .tlc-arcade.wb-cabinet .gm-screen { aspect-ratio: 4 / 3; } }
@media (max-width: 640px) { .tlc-arcade.wb-cabinet .gm-cabinet-inner { padding: 6px; } }

/* ---------- Quick Fire Trivia: timer bar, question, four answers ---------- */
.tlc-arcade .qf-wrap {
  position: absolute; inset: 0; margin: 0 auto; max-width: 780px; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 54px 18px 18px; text-align: left;
}
.tlc-arcade .qf-wrap[hidden] { display: none; }
.tlc-arcade .qf-tbar { height: 8px; border: 1px solid var(--cs-cyan-soft); border-radius: 2px; overflow: hidden; flex: none; }
.tlc-arcade .qf-tfill { display: block; height: 100%; background: var(--cs-cyan); box-shadow: 0 0 10px var(--cs-cyan-soft); transform-origin: left center; }
.tlc-arcade .qf-tbar.is-low .qf-tfill { background: var(--cs-magenta); box-shadow: 0 0 10px var(--cs-magenta-soft); }
.tlc-arcade .qf-tbar.is-hit { animation: qf-hit 0.45s steps(3) 1; }
@keyframes qf-hit { 0%, 66% { border-color: var(--cs-magenta); box-shadow: 0 0 14px var(--cs-magenta); } }
.tlc-arcade .qf-meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--cs-pixel); font-size: 0.6rem; letter-spacing: 0.08em; }
.tlc-arcade .qf-cat { color: var(--cs-amber); }
.tlc-arcade .qf-clock { color: var(--cs-cyan); }
.tlc-arcade .qf-q { margin: 0; min-height: 3em; font-family: var(--cs-mono); font-size: clamp(1rem, 2.4vw, 1.3rem); line-height: 1.5; color: var(--cs-white); text-wrap: balance; }
.tlc-arcade .qf-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tlc-arcade .qf-opt {
  display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 14px; text-align: left; cursor: pointer;
  font-family: var(--cs-mono); font-size: 0.9rem; line-height: 1.35; color: var(--cs-white);
  background: #0B0820; border: 2px solid rgba(139, 92, 255, 0.55); border-radius: 6px;
  transition: border-color 0.15s, background 0.15s; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tlc-arcade .qf-opt:hover:not([disabled]) { border-color: var(--cs-cyan); background: rgba(34, 230, 255, 0.08); }
.tlc-arcade .qf-opt:focus-visible { outline: 2px solid var(--cs-white); outline-offset: 2px; }
.tlc-arcade .qf-opt[disabled] { cursor: default; }
.tlc-arcade .qf-key { flex: none; font-family: var(--cs-pixel); font-size: 0.55rem; color: var(--cs-cyan); }
.tlc-arcade .qf-opt.is-right { border-color: var(--cs-amber); background: rgba(240, 138, 60, 0.16); box-shadow: 0 0 14px rgba(240, 138, 60, 0.4); }
.tlc-arcade .qf-opt.is-wrong { border-color: var(--cs-magenta); background: rgba(255, 62, 165, 0.16); }
.tlc-arcade .qf-fb { margin: 0; min-height: 1.6em; font-family: var(--cs-mono); font-size: 0.85rem; color: var(--cs-muted); }
.tlc-arcade .qf-fb.is-good { color: var(--cs-cyan); }
.tlc-arcade .qf-fb.is-bad { color: var(--cs-amber); }
.tlc-arcade .qf-best { white-space: nowrap; margin: 0 6px; }
.tlc-arcade .qf-bests { display: block; margin-top: 10px; font-family: var(--cs-pixel); font-size: 0.5rem; line-height: 1.8; color: var(--cs-amber); }
@media (min-width: 641px) and (max-width: 1023px) { .tlc-arcade.qf-cabinet .gm-screen { aspect-ratio: 4 / 3; } }
@media (max-width: 640px) {
  .tlc-arcade.qf-cabinet .gm-screen { aspect-ratio: 2 / 3; }
  .tlc-arcade.qf-cabinet .gm-cabinet-inner { padding: 6px; }
  .tlc-arcade .qf-wrap { padding: 50px 12px 12px; gap: 10px; }
  .tlc-arcade .qf-opts { grid-template-columns: 1fr; gap: 8px; }
  .tlc-arcade .qf-opt { min-height: 48px; }
}

/* ---------- board games (B4 onward): a square grid of buttons centred in the screen ---------- */
.tlc-arcade .pz-wrap {
  position: absolute; inset: 0; box-sizing: border-box; padding: 46px 10px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.tlc-arcade .pz-wrap[hidden] { display: none; }
.tlc-arcade .pz-info {
  flex: none; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; min-height: 1em;
  font-family: var(--cs-pixel); font-size: 0.55rem; letter-spacing: 0.08em; color: var(--cs-amber);
}
.tlc-arcade .pz-info .is-low { color: var(--cs-magenta); }
.tlc-arcade .pz-grid { flex: none; display: grid; grid-auto-rows: 1fr; gap: 4px; touch-action: manipulation; }
.tlc-arcade .pz-cell {
  -webkit-appearance: none; appearance: none; margin: 0; padding: 0; min-width: 0; min-height: 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-family: var(--cs-pixel); font-size: inherit; line-height: 1; color: var(--cs-white);
  background: #0B0820; border: 2px solid rgba(139, 92, 255, 0.5); border-radius: 6px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.tlc-arcade .pz-cell:focus-visible { outline: 2px solid var(--cs-white); outline-offset: 1px; }
.tlc-arcade .pz-cell[disabled] { cursor: default; }
.tlc-arcade .pz-cell svg { width: 100%; height: 100%; display: block; pointer-events: none; }
/* Slide 15 */
.tlc-arcade .s15-tile { border-color: var(--cs-cyan-soft); background: linear-gradient(160deg, rgba(34, 230, 255, 0.16), rgba(139, 92, 255, 0.16)), #0B0820; }
.tlc-arcade .s15-tile.is-home { border-color: var(--cs-amber); color: var(--cs-amber); }
.tlc-arcade .s15-gap { visibility: hidden; }
/* Light Grid */
.tlc-arcade .lg-cell.is-on { background: var(--cs-cyan); border-color: var(--cs-white); box-shadow: 0 0 14px var(--cs-cyan-soft); }
/* Pipe Flow */
.tlc-arcade .pf-grid { gap: 0; }
.tlc-arcade .pf-cell { border: 0; border-radius: 0; color: #6B5BB5; box-shadow: inset 0 0 0 1px rgba(139, 92, 255, 0.22); }
.tlc-arcade .pf-cell.is-live { color: var(--cs-cyan); }
.tlc-arcade .pf-cell.is-src { box-shadow: inset 6px 0 0 var(--cs-amber), inset 0 0 0 1px rgba(139, 92, 255, 0.22); }
.tlc-arcade .pf-cell.is-drain { box-shadow: inset -6px 0 0 var(--cs-magenta), inset 0 0 0 1px rgba(139, 92, 255, 0.22); }
/* Gem Swap */
.tlc-arcade .gs-grid { gap: 2px; touch-action: none; }
.tlc-arcade .gs-cell { border-color: transparent; background: rgba(139, 92, 255, 0.09); }
.tlc-arcade .gs-cell.is-sel { border-color: var(--cs-white); background: rgba(255, 255, 255, 0.12); }
.tlc-arcade .gs-cell.is-pop svg { animation: gs-pop 0.22s ease-in forwards; }
.tlc-arcade .gs-cell.is-drop svg { animation: gs-drop 0.18s ease-out; }
.tlc-arcade .gs-cell.is-no { animation: gs-no 0.25s; }
@keyframes gs-pop { to { transform: scale(0.15); opacity: 0; } }
@keyframes gs-drop { from { transform: translateY(-55%); opacity: 0.4; } }
@keyframes gs-no { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .tlc-arcade .gs-cell svg, .tlc-arcade .gs-cell { animation: none !important; } }

/* ---------- word games (B5): word list, letter tiles, on-screen keys, crossword ---------- */
.tlc-arcade .wd-list {
  flex: none; display: flex; flex-wrap: wrap; gap: 3px 10px; justify-content: center; max-width: 560px; margin: 0; padding: 0; list-style: none;
  font-family: var(--cs-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--cs-white);
}
.tlc-arcade .wd-list .is-found { color: var(--cs-muted); text-decoration: line-through; }
.tlc-arcade .ws-grid { gap: 0; touch-action: none; -webkit-user-select: none; user-select: none; }
.tlc-arcade .ws-cell { border: 0; border-radius: 4px; background: transparent; font-family: var(--cs-mono); font-weight: 500; }
.tlc-arcade .ws-cell.is-found { background: rgba(34, 230, 255, 0.2); color: var(--cs-cyan); }
.tlc-arcade .ws-cell.is-pick { background: var(--cs-amber); color: #07051A; }
.tlc-arcade .wd-tiles { flex: none; display: flex; gap: 5px; justify-content: center; width: 100%; }
.tlc-arcade .wd-tile { flex: 0 1 46px; aspect-ratio: 1; font-size: clamp(0.8rem, 3.4vw, 1.1rem); }
.tlc-arcade .wd-tile.is-slot { border-style: dashed; background: transparent; }
.tlc-arcade .wd-tile.is-used { visibility: hidden; }
.tlc-arcade .wd-tiles.is-bad { animation: gs-no 0.25s; }
.tlc-arcade .wd-tiles.is-good .wd-tile { border-color: var(--cs-amber); color: var(--cs-amber); }
.tlc-arcade .wd-btns { flex: none; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tlc-arcade .wd-btn {
  font-family: var(--cs-pixel); font-size: 0.5rem; letter-spacing: 0.06em; color: var(--cs-cyan); background: transparent; cursor: pointer;
  border: 1px solid var(--cs-cyan-soft); border-radius: 4px; padding: 10px 12px; touch-action: manipulation;
}
.tlc-arcade .wd-btn:focus-visible, .tlc-arcade .wd-key:focus-visible { outline: 2px solid var(--cs-white); outline-offset: 1px; }
.tlc-arcade .wd-kb { flex: none; width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 5px; }
.tlc-arcade .wd-krow { display: flex; gap: 4px; justify-content: center; }
.tlc-arcade .wd-key {
  flex: 1 1 0; max-width: 46px; min-width: 0; height: 38px; padding: 0; cursor: pointer; border-radius: 5px;
  font-family: var(--cs-pixel); font-size: clamp(0.5rem, 1.6vw, 0.66rem); color: var(--cs-white);
  background: rgba(139, 92, 255, 0.18); border: 1px solid rgba(139, 92, 255, 0.55);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tlc-arcade .wd-key.is-wide { flex: 1.6 1 0; max-width: 70px; }
.tlc-arcade .wd-key.is-hit { background: var(--cs-cyan); border-color: var(--cs-cyan); color: #07051A; }
.tlc-arcade .wd-key.is-out { background: #1C1A2E; border-color: #1C1A2E; color: #5E6478; }
.tlc-arcade .wd-word { flex: none; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.tlc-arcade .wd-blank {
  width: 1.3em; min-height: 1.5em; text-align: center; border-bottom: 2px solid var(--cs-cyan);
  font-family: var(--cs-pixel); font-size: clamp(0.8rem, 3.2vw, 1.2rem); color: var(--cs-white);
}
.tlc-arcade .wd-blank.is-miss { color: var(--cs-magenta); border-color: var(--cs-magenta); }
.tlc-arcade .as-scene { flex: 1 1 60px; min-height: 60px; max-height: 170px; width: 100%; max-width: 440px; display: block; }
.tlc-arcade .cw-grid { gap: 3px; }
.tlc-arcade .cw-cell { position: relative; font-family: var(--cs-mono); font-weight: 500; text-transform: uppercase; border-radius: 4px; }
.tlc-arcade .cw-block { visibility: hidden; }
.tlc-arcade .cw-cell.is-act { background: rgba(34, 230, 255, 0.14); }
.tlc-arcade .cw-cell.is-cur { border-color: var(--cs-amber); box-shadow: 0 0 10px rgba(240, 138, 60, 0.5); }
.tlc-arcade .cw-cell.is-bad { color: var(--cs-magenta); border-color: var(--cs-magenta); }
.tlc-arcade .cw-num { position: absolute; top: 2px; left: 3px; font-family: var(--cs-mono); font-size: 0.55rem; line-height: 1; color: var(--cs-amber); }
.tlc-arcade .cw-clue { flex: none; margin: 0; max-width: 520px; min-height: 2.7em; text-align: center; font-family: var(--cs-mono); font-size: 0.8rem; line-height: 1.35; color: var(--cs-white); }
.tlc-arcade .cw-clue b { font-family: var(--cs-pixel); font-size: 0.55rem; font-weight: 400; color: var(--cs-amber); margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .tlc-arcade .wd-tiles.is-bad { animation: none; } }

/* ---------- Trivia & Quiz pack (quiz-games.js): reuses the Quick Fire layout ---------- */
.tlc-arcade .qz-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tlc-arcade .qz-two .qf-opt { min-height: 72px; justify-content: center; font-family: var(--cs-pixel); font-size: 0.7rem; letter-spacing: 0.06em; }
.tlc-arcade .qz-wrap .qf-fb { min-height: 3.2em; line-height: 1.5; }
@media (max-width: 640px) {
  .tlc-arcade .qz-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tlc-arcade .qz-wrap { padding-top: 48px; gap: 7px; }
  .tlc-arcade .qz-wrap .qf-q { min-height: 0; font-size: 0.95rem; line-height: 1.4; }
  .tlc-arcade .qz-wrap .qf-opts { gap: 7px; }
  .tlc-arcade .qz-wrap .qf-opt { min-height: 44px; padding: 7px 12px; font-size: 0.8rem; }
  .tlc-arcade .qz-wrap .qf-key { display: none; }                 /* number keys are for keyboards */
  .tlc-arcade .qz-wrap .qf-fb { min-height: 2.8em; font-size: 0.78rem; line-height: 1.4; }
  .tlc-arcade .qz-two .qf-opt { min-height: 64px; font-size: 0.62rem; }
}

/* ---------- Kids & Learning pack: Letter Pop, Shape Sorter, Math Rocket, Animal Memory Match ---------- */
.tlc-arcade .kd-wrap { position: absolute; inset: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 50px 12px 12px; }
.tlc-arcade .kd-wrap[hidden] { display: none; }
.tlc-arcade .kd-prompt {
  flex: none; margin: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; min-height: 2.6em; text-align: center;
  font-family: var(--cs-pixel); font-size: clamp(0.55rem, 1.9vw, 0.8rem); line-height: 1.6; color: var(--cs-white); text-shadow: 0 0 10px rgba(34, 230, 255, 0.5);
}
.tlc-arcade .kd-big { font-size: clamp(1.8rem, 7vw, 3rem); line-height: 1; color: var(--cs-amber); text-shadow: 0 0 16px rgba(240, 138, 60, 0.7); }
.tlc-arcade .kd-big.is-word { font-size: clamp(1rem, 4vw, 1.7rem); }
.tlc-arcade .kd-say {
  flex: none; width: 40px; height: 40px; padding: 9px; cursor: pointer; color: var(--cs-cyan); background: rgba(34, 230, 255, 0.08);
  border: 2px solid var(--cs-cyan-soft); border-radius: 8px; touch-action: manipulation;
}
.tlc-arcade .kd-say svg { display: block; width: 100%; height: 100%; }
.tlc-arcade .kd-say:focus-visible { outline: 2px solid var(--cs-white); outline-offset: 2px; }
/* Letter Pop */
.tlc-arcade .lp-field { position: relative; flex: 1; align-self: stretch; min-height: 0; }
.tlc-arcade .lp-bub {
  position: absolute; left: 0; top: 0; margin: 0; padding: 0; border-radius: 50%; cursor: pointer; line-height: 1;
  font-family: var(--cs-pixel); color: var(--cs-white); text-shadow: 0 2px 0 rgba(7, 5, 26, 0.6);
  border: 3px solid var(--c, #22E6FF); background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.06) 42%, rgba(7, 5, 26, 0.35) 100%), var(--c, #22E6FF);
  background-blend-mode: normal; box-shadow: 0 0 16px var(--c, #22E6FF), inset 0 0 0 100px rgba(7, 5, 26, 0.45);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 0.3s, opacity 0.3s;
}
.tlc-arcade .lp-bub:focus-visible { outline: 3px solid var(--cs-white); outline-offset: 2px; }
.tlc-arcade .lp-bub.is-pop { transform: scale(1.45); box-shadow: 0 0 34px var(--cs-amber); border-color: var(--cs-amber); }
.tlc-arcade .lp-bub.is-fade { opacity: 0.18; cursor: default; }
.tlc-arcade .lp-bub.is-wrong { opacity: 0.25; filter: grayscale(1); cursor: default; box-shadow: none; }
/* Shape Sorter */
.tlc-arcade .ss-wrap { justify-content: space-evenly; }
.tlc-arcade .ss-row { flex: none; display: grid; justify-content: center; }
.tlc-arcade .ss-hole, .tlc-arcade .ss-piece { margin: 0; padding: 4px; background: none; border: 0; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
.tlc-arcade .ss-hole svg, .tlc-arcade .ss-piece svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tlc-arcade .ss-hole { cursor: pointer; background: rgba(7, 5, 26, 0.55); box-shadow: inset 0 0 0 2px rgba(139, 92, 255, 0.45); touch-action: manipulation; }
.tlc-arcade .ss-hole svg { fill: #05030F; stroke: rgba(246, 248, 252, 0.8); stroke-width: 3; stroke-dasharray: 7 5; stroke-linejoin: round; }
.tlc-arcade .ss-hole.is-filled { cursor: default; box-shadow: inset 0 0 0 2px var(--cs-amber), 0 0 14px rgba(240, 138, 60, 0.5); }
.tlc-arcade .ss-hole.is-filled svg { fill: var(--c); stroke: #F6F8FC; stroke-dasharray: none; }
.tlc-arcade .ss-hole.is-no { animation: ss-no 0.4s steps(4) 1; }
@keyframes ss-no { 0%, 50% { transform: translateX(-5px); } 25%, 75% { transform: translateX(5px); } }
.tlc-arcade .ss-piece { cursor: grab; touch-action: none; position: relative; }
.tlc-arcade .ss-piece svg { fill: var(--c); stroke: #F6F8FC; stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 0 8px var(--c)); }
.tlc-arcade .ss-piece.is-drag { cursor: grabbing; z-index: 6; }
.tlc-arcade .ss-piece.is-sel { box-shadow: inset 0 0 0 3px var(--cs-white), 0 0 16px var(--cs-cyan); }
.tlc-arcade .ss-piece.is-gone { visibility: hidden; }
.tlc-arcade .ss-hole:focus-visible, .tlc-arcade .ss-piece:focus-visible { outline: 3px solid var(--cs-white); outline-offset: 1px; }
/* Math Rocket (answer buttons reuse Count the Stars) */
.tlc-arcade .mr-sum {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%); margin: 0; padding: 8px 14px; text-align: center; white-space: nowrap;
  background: rgba(7, 5, 26, 0.62); border: 2px solid var(--cs-cyan-soft); border-radius: 10px;
  font-family: var(--cs-pixel); font-size: clamp(1.15rem, 5.6vw, 2.2rem); line-height: 1.2; color: var(--cs-white); text-shadow: 0 3px 0 #07051A, 0 0 16px rgba(34, 230, 255, 0.7);
}
.tlc-arcade .mr-sum span { color: var(--cs-amber); }
.tlc-arcade .mr-sum[hidden] { display: none; }
.tlc-arcade .mr-pad .ct-num.is-right, .tlc-arcade .mr-pad .ct-num.is-right:hover { background: var(--cs-amber); }
/* Animal Memory Match */
.tlc-arcade .am-grid { grid-auto-rows: auto; }
.tlc-arcade .am-card { position: relative; flex-direction: column; gap: 6%; border-color: rgba(139, 92, 255, 0.7); background: linear-gradient(160deg, rgba(139, 92, 255, 0.35), rgba(255, 62, 165, 0.2)), #0B0820; }
.tlc-arcade .am-card::before { content: '?'; font-size: 2.4em; color: var(--cs-cyan); text-shadow: 0 0 10px var(--cs-cyan-soft); }
.tlc-arcade .am-card .am-pic { display: none; width: 62%; aspect-ratio: 1; image-rendering: pixelated; pointer-events: none; }
.tlc-arcade .am-card .am-name { display: none; font-size: 1em; letter-spacing: 0.04em; color: var(--cs-white); }
.tlc-arcade .am-card.is-up { background: #0B0820; border-color: var(--cs-cyan); }
.tlc-arcade .am-card.is-up::before { content: none; }
.tlc-arcade .am-card.is-up .am-pic, .tlc-arcade .am-card.is-up .am-name { display: block; }
.tlc-arcade .am-card.is-matched { border-color: var(--cs-amber); box-shadow: 0 0 12px rgba(240, 138, 60, 0.5); cursor: default; }

/* ---------- Strategy & Board pack: Checkers, Flip Disc, Ultimate Tic-Tac-Toe, Outpost ---------- */
.tlc-arcade .bd-grid { gap: 0; border-radius: 4px; box-shadow: 0 0 0 2px rgba(139, 92, 255, 0.85), 0 0 18px rgba(139, 92, 255, 0.35); }
.tlc-arcade .bd-sq { position: relative; border: 0; border-radius: 0; }
.tlc-arcade .bd-light { background: #2A2160; cursor: default; }
.tlc-arcade .bd-dark { background: #0B0820; }
.tlc-arcade .fd-sq { background: #0F1F3A; box-shadow: inset 0 0 0 1px rgba(34, 230, 255, 0.22); }
.tlc-arcade .bd-disc { position: relative; display: block; width: 76%; height: 76%; border-radius: 50%; box-sizing: border-box; pointer-events: none; }
.tlc-arcade .bd-disc.is-p1 { background: radial-gradient(circle at 35% 30%, #B4F8FF, #22E6FF 55%, #0E8FA3); box-shadow: 0 0 8px var(--cs-cyan-soft); }
.tlc-arcade .bd-disc.is-p2 { background: radial-gradient(circle at 35% 30%, #FFC2E2, #FF3EA5 55%, #A3165F); box-shadow: 0 0 8px var(--cs-magenta-soft); }
.tlc-arcade .bd-disc.is-king { border: 3px solid var(--cs-amber); }
.tlc-arcade .bd-disc.is-king::after { content: ''; position: absolute; left: 50%; top: 50%; width: 40%; height: 40%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--cs-amber); box-shadow: 0 0 0 2px #07051A; }
.tlc-arcade .bd-disc.is-flip { animation: bd-flip 0.35s ease-out 1; }
@keyframes bd-flip { 0% { transform: scaleX(0.08); } 100% { transform: scaleX(1); } }
.tlc-arcade .bd-sq.is-last { background-image: linear-gradient(rgba(240, 138, 60, 0.2), rgba(240, 138, 60, 0.2)); }
.tlc-arcade .bd-sq.is-sel { box-shadow: inset 0 0 0 3px var(--cs-white); }
.tlc-arcade .bd-sq.is-target::after { content: ''; position: absolute; left: 50%; top: 50%; width: 28%; height: 28%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--cs-amber); box-shadow: 0 0 10px rgba(240, 138, 60, 0.9); }
.tlc-arcade .bd-sq.is-must .bd-disc { outline: 2px dashed var(--cs-amber); outline-offset: 2px; }
.tlc-arcade .bd-sq:focus-visible { outline: 2px solid var(--cs-white); outline-offset: -2px; z-index: 1; }
/* Ultimate Tic-Tac-Toe */
.tlc-arcade .ut-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tlc-arcade .ut-board {
  position: relative; min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px;
  border-radius: 6px; background: rgba(139, 92, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(139, 92, 255, 0.45);
}
.tlc-arcade .ut-board.is-active { background: rgba(34, 230, 255, 0.12); box-shadow: inset 0 0 0 2px var(--cs-cyan), 0 0 12px var(--cs-cyan-soft); }
.tlc-arcade .ut-cell { border-width: 1px; border-radius: 3px; }
.tlc-arcade .ut-cell.is-x { color: var(--cs-cyan); }
.tlc-arcade .ut-cell.is-o { color: var(--cs-magenta); }
.tlc-arcade .ut-cell.is-last { border-color: var(--cs-amber); box-shadow: 0 0 8px rgba(240, 138, 60, 0.6); }
.tlc-arcade .ut-board.is-x .ut-cell, .tlc-arcade .ut-board.is-o .ut-cell, .tlc-arcade .ut-board.is-tie .ut-cell { opacity: 0.22; }
.tlc-arcade .ut-won { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--cs-pixel); font-size: 3.6em; line-height: 1; pointer-events: none; }
.tlc-arcade .ut-won:empty { display: none; }
.tlc-arcade .ut-board.is-x .ut-won { color: var(--cs-cyan); text-shadow: 0 0 14px var(--cs-cyan); }
.tlc-arcade .ut-board.is-o .ut-won { color: var(--cs-magenta); text-shadow: 0 0 14px var(--cs-magenta); }
/* Outpost */
.tlc-arcade .op-info { position: absolute; top: 14px; left: 14px; right: 104px; display: flex; flex-wrap: wrap; gap: 4px 12px; pointer-events: none; font-family: var(--cs-pixel); font-size: 0.55rem; line-height: 1.6; color: var(--cs-amber); }
.tlc-arcade .op-info .is-low { color: var(--cs-magenta); }
.tlc-arcade .op-info[hidden], .tlc-arcade .op-bar[hidden] { display: none; }
.tlc-arcade .op-bar { position: absolute; left: 8px; right: 8px; bottom: 8px; min-height: 54px; display: flex; gap: 6px; justify-content: center; align-items: stretch; }
.tlc-arcade .op-btn {
  flex: 1 1 0; min-width: 0; max-width: 160px; min-height: 54px; padding: 6px 2px; cursor: pointer; font-family: var(--cs-pixel); font-size: 0.5rem; line-height: 1.7;
  color: var(--c, var(--cs-cyan)); background: #0B0820; border: 2px solid var(--c, var(--cs-cyan)); border-radius: 8px; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tlc-arcade .op-btn b { display: block; font-weight: normal; color: var(--cs-white); }
.tlc-arcade .op-btn[disabled] { opacity: 0.4; cursor: default; }
.tlc-arcade .op-btn.is-next { --c: var(--cs-amber); }
.tlc-arcade .op-btn.is-sell { --c: var(--cs-magenta); }
.tlc-arcade .op-btn:focus-visible { outline: 2px solid var(--cs-white); outline-offset: 2px; }
.tlc-arcade .op-tip { flex: 2 1 0; align-self: center; text-align: center; font-family: var(--cs-mono); font-size: 0.78rem; line-height: 1.4; color: var(--cs-muted); }

/* ---------- Seasonal pack: Season Hunt (the other three seasonal games draw on the canvas) ---------- */
.tlc-arcade .hn-wrap { gap: 8px; }
.tlc-arcade .hn-wrap .qf-tbar { align-self: stretch; }
.tlc-arcade .hn-prompt { min-height: 0; gap: 10px; }
.tlc-arcade .hn-want { width: 34px; height: 34px; image-rendering: pixelated; filter: drop-shadow(0 0 6px rgba(240, 138, 60, 0.8)); }
.tlc-arcade .hn-field { position: relative; flex: 1; align-self: stretch; min-height: 0; overflow: hidden; border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(139, 92, 255, 0.55); }
.tlc-arcade .hn-item {
  position: absolute; margin: 0; padding: 0; background: none; border: 0; cursor: pointer; transform: rotate(var(--r, 0deg));
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: opacity 0.3s, transform 0.3s;
}
.tlc-arcade .hn-item img { display: block; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 2px 0 rgba(7, 5, 26, 0.5)); }
.tlc-arcade .hn-item.is-found { opacity: 0; transform: rotate(var(--r, 0deg)) scale(1.7); cursor: default; }
.tlc-arcade .hn-item.is-no img { animation: ss-no 0.4s steps(4) 1; }
.tlc-arcade .hn-item:focus-visible { outline: 2px solid var(--cs-white); outline-offset: 1px; }