/* Tic Tac Triumph - prototype styles.
   Four switchable looks (Settings -> Game look), his pick 2026-10-23:
   1 Toy Block Table (DEFAULT), 2 Retro Bowling Scoreboard, 3 Stamp Journal,
   4 Mission Control Console. The look is colours + materials + type only;
   layout and gameplay never change. All theme values live in the variables
   below; component rules read variables, never hard-coded theme colours. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }

/* ---- Theme variables: Toy Block Table is the default ---- */
body {
  --bg: #f6efe2; --ink: #3d2c22; --muted: #7a6a5c;
  --panel: #fffaf0; --panel-ink: #3d2c22;
  --accent: #e8483f; --accent-ink: #ffffff;
  --slate: #0f6f76; --slate-ink: #ffffff;
  --disabled: #cbbfa9; --disabled-ink: #8a7a66;
  --nav-bg: #fff3df; --nav-ink: #8a7a66; --nav-active: #3d2c22; --nav-line: #eadfc9;
  --x: #d63c32; --o: #0f6f76; --sym-x: #a8261e; --sym-o: #0a4e57;
  --x-bg: linear-gradient(165deg, #f2604f, #e8483f 60%, #d63c32);
  --o-bg: linear-gradient(165deg, #17808a, #0f6f76 60%, #0b5a61);
  --cell-bg: linear-gradient(165deg, #fffaf0, #f7ecd7 60%, #efdfc2);
  --board-bg: #e0c08a;
  --cell-shadow: inset 0 2px 2px rgba(255,255,255,.9), inset 0 -4px 6px rgba(146,110,60,.25), 0 7px 0 #e0cda6, 0 12px 16px rgba(93,64,32,.20);
  --cell-radius: 20px;
  --val-bg: #ffffff; --val-ink: #33302e;
  --val-shadow: 0 2px 5px rgba(93,64,32,.30), inset 0 -2px 3px rgba(0,0,0,.06);
  --acted-x: inset 0 2px 2px rgba(255,255,255,.85), inset 0 -4px 6px rgba(120,80,40,.25), 0 0 0 3px #d63c32, 0 7px 0 #e0cda6, 0 12px 16px rgba(93,64,32,.25);
  --acted-o: inset 0 2px 2px rgba(255,255,255,.85), inset 0 -4px 6px rgba(120,80,40,.25), 0 0 0 3px #0f6f76, 0 7px 0 #e0cda6, 0 12px 16px rgba(93,64,32,.25);
  --win-bg: linear-gradient(165deg, #fff3c4, #ffd968);
  --title-a: #5d3a1a; --title-b: #5d3a1a;
  --font-display: "Arial Rounded MT Bold", "Baloo 2", "Segoe UI", sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, sans-serif;
}
body[data-theme="bowling"] {
  --bg: #f3ead8; --ink: #26221c; --muted: #6f6455;
  --panel: #fff8ea; --panel-ink: #26221c;
  --accent: #f2b234; --accent-ink: #26221c;
  --slate: #1f8a99; --slate-ink: #ffffff;
  --disabled: #cfc4ab; --disabled-ink: #7a7263;
  --nav-bg: #fff8ea; --nav-ink: #6f6455; --nav-active: #26221c; --nav-line: #26221c;
  --x: #ef5b4d; --o: #1f8a99; --sym-x: #26221c; --sym-o: #26221c;
  --x-bg: #ef5b4d; --o-bg: #1f8a99; --cell-bg: #fff8ea; --board-bg: #9db8a4;
  --cell-shadow: inset 0 0 0 3px #26221c, 0 4px 0 #26221c;
  --cell-radius: 10px;
  --val-bg: #fff8ea; --val-ink: #26221c; --val-shadow: inset 0 0 0 2px #26221c;
  --acted-x: inset 0 0 0 3px #26221c, 0 0 0 6px #f2b234, 0 4px 0 #26221c;
  --acted-o: inset 0 0 0 3px #26221c, 0 0 0 6px #f2b234, 0 4px 0 #26221c;
  --win-bg: #ffe08a;
  --title-a: #e2483a; --title-b: #e2483a;
  --font-display: "Arial Black", "Archivo Black", "Segoe UI", sans-serif;
}
body[data-theme="stamp"] {
  --bg: #faf5ea; --ink: #22304f; --muted: #7c7466;
  --panel: #fffdf6; --panel-ink: #22304f;
  --accent: #c9332a; --accent-ink: #ffffff;
  --slate: #22304f; --slate-ink: #ffffff;
  --disabled: #ddd3bf; --disabled-ink: #8b8271;
  --nav-bg: #faf5ea; --nav-ink: #7c7466; --nav-active: #22304f; --nav-line: #22304f;
  --x: #c9332a; --o: #1e3a66; --sym-x: #c9332a; --sym-o: #1e3a66;
  --x-bg: #fdfaf1; --o-bg: #fdfaf1; --cell-bg: #fdfaf1; --board-bg: #dcc79c;
  --cell-shadow: inset 0 0 0 2px #22304f;
  --cell-radius: 3px;
  --val-bg: #ffffff; --val-ink: #22304f; --val-shadow: inset 0 0 0 2px #22304f;
  --acted-x: inset 0 0 0 2px #22304f, 0 0 0 3px #c9332a;
  --acted-o: inset 0 0 0 2px #22304f, 0 0 0 3px #1e3a66;
  --win-bg: #f7e7bd;
  --title-a: #22304f; --title-b: #22304f;
  --font-display: Georgia, "Times New Roman", serif;
}
body[data-theme="mission"] {
  --bg: #ece7db; --ink: #26313f; --muted: #6d7683;
  --panel: #f7f3e8; --panel-ink: #26313f;
  --accent: #d8402f; --accent-ink: #ffffff;
  --slate: #2456a6; --slate-ink: #ffffff;
  --disabled: #c4bcab; --disabled-ink: #7d7668;
  --nav-bg: #2456a6; --nav-ink: #c9d6f2; --nav-active: #ffd94d; --nav-line: #1a3f7c;
  --x: #d8402f; --o: #2456a6; --sym-x: #ffffff; --sym-o: #ffffff;
  --x-bg: linear-gradient(180deg, #e05240, #c93325);
  --o-bg: linear-gradient(180deg, #2f66bd, #1f4c96);
  --cell-bg: linear-gradient(180deg, #fdfaf0, #efe7d2);
  --board-bg: #c3ccd4;
  --cell-shadow: inset 0 2px 0 rgba(255,255,255,.8), inset 0 -4px 0 rgba(38,49,63,.25), inset 0 0 0 2px #26313f, 0 5px 0 rgba(38,49,63,.45);
  --cell-radius: 14px;
  --val-bg: #fffdf4; --val-ink: #26313f;
  --val-shadow: inset 0 0 0 2px #26313f, 0 2px 3px rgba(38,49,63,.3);
  --acted-x: inset 0 2px 0 rgba(255,255,255,.8), inset 0 -4px 0 rgba(38,49,63,.25), inset 0 0 0 2px #26313f, 0 0 0 3px #ffd94d, 0 5px 0 rgba(38,49,63,.45);
  --acted-o: inset 0 2px 0 rgba(255,255,255,.8), inset 0 -4px 0 rgba(38,49,63,.25), inset 0 0 0 2px #26313f, 0 0 0 3px #ffd94d, 0 5px 0 rgba(38,49,63,.45);
  --win-bg: #ffd94d;
  --title-a: #26313f; --title-b: #26313f;
  --font-display: "Segoe UI", system-ui, sans-serif;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
}
/* Top padding clears the fixed top nav (its height + the phone's safe-area
   inset). Bottom padding gives scroll room so the dice row can always be
   scrolled fully into view, clear of any browser toolbar. */
#app { max-width: 430px; margin: 0 auto; padding: calc(88px + env(safe-area-inset-top)) 16px 120px; }
.screen { display: none; }
.screen.active { display: block; }

/* Title - one row (his direction) */
.game-title {
  font-family: var(--font-display);
  font-weight: 900; letter-spacing: .5px; text-align: center;
  font-size: clamp(25px, 8.2vw, 37px); margin: 8px 0 2px; white-space: nowrap;
}
.game-title.small { font-size: clamp(21px, 6.6vw, 30px); }
.t-yellow { color: var(--title-a); } .t-coral { color: var(--title-b); }
.tagline { text-align: center; margin: 0 0 18px; font-weight: 700; font-size: 15px; }
.build-stamp { text-align: center; color: var(--muted); font-size: 12px; font-weight: 700; margin: -10px 0 16px; }
.screen-title { text-align: center; font-size: 24px; margin: 10px 0 14px; font-family: var(--font-display); }

/* Pills and buttons */
.pill {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; border: none; border-radius: 999px; cursor: pointer;
  font-size: 20px; font-weight: 800; padding: 15px 18px; margin: 10px 0; color: var(--ink);
  font-family: inherit;
}
.pill-primary { background: var(--accent); color: var(--accent-ink); }
.pill-primary:active { transform: translateY(2px); }
.pill-slate { background: var(--slate); color: var(--slate-ink); font-size: 16px; }
.pill-disabled { background: var(--disabled); color: var(--disabled-ink); cursor: not-allowed; }
.later-tag { background: var(--ink); color: var(--bg); font-size: 11px; padding: 4px 8px; border-radius: 7px; letter-spacing: .4px; }
.home-note { text-align: center; color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.note { color: var(--muted); font-size: 14px; line-height: 1.45; }

/* Board tiles - shared by the board cells and the home mini board.
   The material comes from the theme variables: chunky toy plastic, flat
   printed card, stamped paper, or a beveled console module. */
.cell, .mini-cell {
  position: relative; border: none; border-radius: var(--cell-radius);
  background: var(--cell-bg);
  box-shadow: var(--cell-shadow);
}
/* Carved/stamped symbols: an SVG layer filling the whole tile face; the ink
   colour is the theme's (CSS fill/stroke overrides the SVG attributes). */
.sym { position: absolute; inset: 0; display: block; z-index: 1; }
.sym svg { width: 100%; height: 100%; display: block; }
.sym-x svg g:last-of-type { fill: var(--sym-x); }
.sym-o svg circle:last-of-type { stroke: var(--sym-o); }
.val {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  border-radius: 50%;
  background: var(--val-bg);
  box-shadow: var(--val-shadow);
  color: var(--val-ink); font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}

/* Player colours: a claimed tile takes its owner's colour (his direction) */
.cell.own-x, .mini-cell.own-x { background: var(--x-bg); }
.cell.own-o, .mini-cell.own-o { background: var(--o-bg); }

/* Home mini board */
.mini-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 210px; margin: 8px auto 20px; container-type: inline-size; }
.mini-cell { aspect-ratio: 1 / 1.06; display: flex; align-items: center; justify-content: center; }
.mini-cell .val { width: 24px; height: 24px; font-size: 14px; width: 15cqw; height: 15cqw; font-size: 9.5cqw; }

/* Game screen */
.chips { display: flex; gap: 10px; margin: 12px 0 10px; }
.chip {
  flex: 1; background: var(--panel); color: var(--panel-ink); border-radius: 16px; padding: 9px 11px;
  display: flex; align-items: center; gap: 9px; border: 2px solid transparent;
}
#chip-you { border-color: var(--x); }
#chip-bot { border-color: var(--o); }
.chip.turn { box-shadow: 0 0 0 2px var(--accent); }
.chip .avatar { font-size: 24px; }
.chip-main { display: flex; flex-direction: column; }
.chip-name { font-weight: 800; font-size: 15px; }
.chip-status { font-size: 12px; font-weight: 700; color: var(--muted); }
.chip.turn .chip-status { color: var(--ink); }
.sym-x-text { color: var(--x); } .sym-o-text { color: var(--o); }
.move-pill {
  text-align: center; background: var(--panel); color: var(--panel-ink); border-radius: 999px;
  padding: 7px 12px; font-weight: 800; font-size: 14px; margin: 0 auto 14px; width: fit-content;
}
.move-pill .pressure-on { color: #e07b24; }

/* Board width is capped by viewport HEIGHT as well as width: at full width
   the board is so tall that the whole game screen overflows a phone screen
   and the dice row ends up off-screen / under the nav (his screenshot,
   2026-10-23). 46dvh keeps title + chips + board + dice on one screen (the
   status text that used to sit under the board was removed, freeing room). */
/* The board sits on a contrasting "table" panel (--board-bg per theme): the
   page background and the tiles are both pale cream and were too close in
   colour (his report, 2026-10-23), so the grid now reads as tiles ON a table. */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 0 auto 20px; width: min(100%, 46vh); width: min(100%, 46dvh); container-type: inline-size; background: var(--board-bg); padding: 13px; border-radius: 22px; box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 12px 24px rgba(60,40,20,.16); }
.board .cell {
  aspect-ratio: 1 / 1.06; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .06s ease;
}
/* Value sized to the cell; the symbol layer fills the tile (see .sym) */
.board .cell .val { width: 36px; height: 36px; font-size: 20px; width: 15cqw; height: 15cqw; font-size: 9.5cqw; }
.board .cell:active { transform: translateY(4px); }
/* Non-target tiles mute by filter, not opacity, so the tile face never washes out to the page colour */
.board .cell.dim { filter: saturate(.3) brightness(.82); }
/* A full line that is not all 12s yet: dashed ring — three in a row, not a win */
.board .cell.almost::before { content: ""; position: absolute; inset: 7px; border-radius: 9px; border: 2px dashed rgba(35,32,56,.4); pointer-events: none; }
.board .cell::after { content: ""; position: absolute; inset: -3px; border-radius: 15px; border: 3px solid transparent; pointer-events: none; }
.board .cell.legal-place::after { border-color: #35d07f; }
.board .cell.legal-buff::after { border-color: #ffc53d; }
.board .cell.legal-attack::after { border-color: #ff5a52; }
/* The tile the last move touched keeps a pulsing ring in the mover's colour
   until the next move, so the bot's move can actually be seen (his direction). */
.board .cell.acted-x { box-shadow: var(--acted-x); animation: actedPulse 1.1s ease-in-out infinite alternate; }
.board .cell.acted-o { box-shadow: var(--acted-o); animation: actedPulse 1.1s ease-in-out infinite alternate; }
@keyframes actedPulse { from { transform: scale(1); } to { transform: scale(1.05); } }
.board .cell.win { background: var(--win-bg); }
.board .cell.flash { animation: cellflash .5s ease; }
@keyframes cellflash { 0% { filter: brightness(1.35); } 100% { filter: brightness(1); } }

/* (The .dice-text status lines under the board were removed, his direction.) */

/* Dice position: the 3D die sits beside the ROLL button (his direction) */
.roll-row { display: flex; align-items: center; gap: 16px; }
.roll-row .roll-btn { flex: 1; margin: 0; }
.roll-btn { font-size: 22px; letter-spacing: 1px; font-family: var(--font-display); }
.roll-btn:disabled { background: var(--disabled); color: var(--disabled-ink); cursor: not-allowed; }

/* Dice — the Dice Garden component, ported as-is: true CSS 3D cube, six
   faces, opposite faces sum to 7, flat per-face tones (top brightest),
   casino-red pips, slight tilt at rest, 1s multi-axis tumble plus a hop
   on every roll, settling on exactly the rolled face. Pure CSS.
   Per-theme tweaks: only the pip colour and face tint change. */
.dice-scene { width: 80px; height: 80px; perspective: 600px; flex: none; }
.dice-scene.hopping { animation: diceHop 1s ease-out 1; }
@keyframes diceHop {
  0% { transform: translateY(0); }
  25% { transform: translateY(-22px); }
  50% { transform: translateY(0); }
  72% { transform: translateY(-11px); }
  100% { transform: translateY(0); }
}
.cube {
  width: 100%; height: 100%; position: relative; color: #d92b2b;
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}
.cube-face {
  position: absolute; width: 80px; height: 80px;
  background: #f4f4f2; border: 1px solid #d9d9d6; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
}
.face-3 { background: #ffffff; }
.face-1 { background: #f7f7f5; }
.face-5 { background: #eeeeec; }
.face-2 { background: #e9e9e7; }
.face-6 { background: #e3e3e1; }
.face-4 { background: #dededb; }
body[data-theme="bowling"] .cube { color: #26221c; }
body[data-theme="bowling"] .cube-face { background: #f7ead2; border-color: #d8c9a4; }
body[data-theme="stamp"] .cube { color: #1e3a66; }
body[data-theme="stamp"] .cube-face { background: #fffdf6; border-color: #d9d2c0; }
body[data-theme="mission"] .cube { color: #26313f; }
body[data-theme="mission"] .cube-face { background: #f5c93f; border-color: #c99a1d; }
.dot-container {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  width: 80%; height: 80%; padding: 5px;
}
.dot { width: 16px; height: 16px; border-radius: 50%; background: currentColor; align-self: center; justify-self: center; }
.dot.off { opacity: 0; }
.face-1 { transform: rotateY(0deg) translateZ(40px); }
.face-2 { transform: rotateY(90deg) translateZ(40px); }
.face-3 { transform: rotateX(90deg) translateZ(40px); }
.face-4 { transform: rotateX(-90deg) translateZ(40px); }
.face-5 { transform: rotateY(-90deg) translateZ(40px); }
.face-6 { transform: rotateY(180deg) translateZ(40px); }
.cube.is-rolling { animation: tumble 1s cubic-bezier(0.25, 0.6, 0.35, 1) 1; }
@keyframes tumble {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  30% { transform: rotateX(290deg) rotateY(210deg) rotateZ(120deg); }
  55% { transform: rotateX(520deg) rotateY(430deg) rotateZ(230deg); }
  80% { transform: rotateX(655deg) rotateY(610deg) rotateZ(320deg); }
  100% { transform: rotateX(720deg) rotateY(720deg) rotateZ(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cube { transition: none; }
  .cube.is-rolling { animation: none; }
  .dice-scene.hopping { animation: none; }
}

/* Rules */
.rules { line-height: 1.5; font-size: 15px; padding-left: 22px; }
.rules li { margin-bottom: 10px; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.stat { background: var(--panel); color: var(--panel-ink); border-radius: 14px; padding: 14px 6px; text-align: center; }
.stat-num { display: block; font-size: 26px; font-weight: 900; font-family: var(--font-display); }
.stat-label { font-size: 12px; color: var(--muted); font-weight: 700; }

/* Settings */
.setting-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--panel); color: var(--panel-ink); border-radius: 14px; padding: 13px 15px; margin-bottom: 11px; font-weight: 700;
}
.toggle { border: none; border-radius: 999px; padding: 7px 16px; font-weight: 900; cursor: pointer; background: var(--disabled); color: var(--disabled-ink); font-family: inherit; }
.toggle.on { background: var(--accent); color: var(--accent-ink); }
.setting-value { color: var(--accent); }

/* Settings look picker: four looks, Toy Block Table is the default */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.theme-opt {
  background: var(--panel); color: var(--panel-ink); border: 3px solid transparent;
  border-radius: 14px; padding: 10px 12px; cursor: pointer; text-align: left;
  font-family: inherit; font-weight: 800; font-size: 14px; line-height: 1.3;
}
.theme-opt .theme-sub { display: block; font-weight: 700; font-size: 12px; color: var(--muted); margin-top: 2px; }
.theme-opt.active { border-color: var(--accent); }
.theme-swatches { display: flex; gap: 5px; margin-bottom: 7px; }
.theme-swatches i { width: 16px; height: 16px; border-radius: 5px; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }

/* Bottom nav */
/* The nav bar lives at the TOP (his direction, 2026-10-23) so nothing fixed
   covers the dice row at the bottom of the game screen. */
#top-nav {
  position: fixed; left: 50%; transform: translateX(-50%); top: 0; width: 100%; max-width: 430px;
  background: var(--nav-bg); display: flex; padding: calc(8px + env(safe-area-inset-top)) 6px 8px;
  border-radius: 0 0 18px 18px; z-index: 30; border-bottom: 2px solid var(--nav-line);
}
.nav-btn {
  flex: 1; background: none; border: none; color: var(--nav-ink); cursor: pointer;
  font-size: 11.5px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: inherit;
}
.nav-btn .nav-ico { font-size: 20px; }
.nav-btn.active { color: var(--nav-active); }

/* Splash screens (launch sequence: studio logo -> game name -> tutorial) */
.splash {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; cursor: pointer;
  animation: splash-in .35s ease-out;
}
.splash.hidden { display: none; }
#splash-studio { background: #ffffff; }
#splash-studio img { width: min(62vw, 300px); height: auto; }
/* Background matches the logo artwork's own cream (#ffedcc, sampled from the
   image corners) and the image carries no card styling, so the logo melts
   into the screen with no visible edges (his direction). */
#splash-game { background: #ffedcc; }
#splash-game img {
  width: min(84vw, 380px); height: auto;
}
@keyframes splash-in { from { opacity: 0; } to { opacity: 1; } }

/* Popups */
#popup-wrap, #tutorial-wrap {
  position: fixed; inset: 0; background: rgba(20, 14, 8, .55);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
#popup-wrap.hidden, #tutorial-wrap.hidden { display: none; }
.popup-card { background: var(--panel); color: var(--panel-ink); border-radius: 20px; padding: 22px; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 18px 40px rgba(30,20,10,.35); }
.popup-title { font-size: 24px; font-weight: 900; margin-bottom: 8px; font-family: var(--font-display); }
.popup-body { font-size: 15px; line-height: 1.5; }
.popup-count { font-size: 14px; font-weight: 800; color: var(--accent); min-height: 20px; margin-top: 6px; }
.popup-buttons { margin-top: 14px; }
.tutorial-body { text-align: left; }
.dont-show { display: block; margin-top: 10px; font-size: 13.5px; color: var(--muted); }

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; }