/* ONE X FOUR — bright "casual game" skin (sky-blue ground, glossy pill
   buttons, gold/orange accents — no pink).
   Loaded after each page's inline <style>, so these win by document order.
   Swaps the shared design tokens + restyles the shared chrome components. */

/* Self-hosted rather than Google Fonts: the packaged APK has to look right
   with no network, and it drops a third-party request from every page load. */
@import url('/vendor/fonts/fonts.css');

:root{
  --panel:#fdf1d9;
  --panel-hi:#fffaf0;
  --panel-edge:#eab857;
  --wood-lo:#f28b2c;      /* board frame gradient -> orange */
  --wood-hi:#ffce8f;
  --neon-cyan:#4bb6e8;
  --neon-magenta:#f5943f; /* accent / --pc fallback -> orange (was pink) */
  --neon-lime:#7ecb7a;
  --neon-amber:#f7b93c;
  --neon-violet:#9b7fd6;
  --text:#6b4a2a;
  --text-dim:#95713f;
  --text-dim2:#b18a55;
  --font-display:'Fredoka','Baloo 2',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,-apple-system,sans-serif;

  --stitch:#ffffff;
  --frame:#e6a634;
}

body,
.arena{
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.6), transparent 42%),
    linear-gradient(180deg,#8fd6ef 0%,#5fbfe4 48%,#4bb0da 100%) !important;
}

/* main-menu hero title -> chunky flat, orange stroke pops on the blue ground */
.hero h1{
  font-family:var(--font-display) !important; font-style:normal !important;
  background:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  -webkit-text-fill-color:#fff !important; color:#fff !important;
  -webkit-text-stroke:2.4px #e0761f !important; paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(224,118,31,.4) !important;
  filter:none !important;
  letter-spacing:1.5px !important;
}
.hero h1 span{ -webkit-text-fill-color:#fff2dc !important; color:#fff2dc !important; }

/* hub: mode heading + game tiles */
.mode-heading span{
  font-family:var(--font-display) !important; font-style:normal !important;
  background:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  -webkit-text-fill-color:#fff !important; color:#fff !important;
  -webkit-text-stroke:1.8px #e0761f !important; paint-order:stroke fill;
  text-shadow:0 3px 0 rgba(224,118,31,.35) !important;
}
.tile{
  border:3px solid #fff !important;
  outline:3px dashed var(--panel-edge); outline-offset:-8px;
  border-radius:20px !important;
}
.tile-img{ border-radius:14px !important; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5), inset 0 -14px 22px -10px rgba(150,90,40,.16) !important; }
.tile-name{ font-style:normal !important; font-family:var(--font-display) !important; letter-spacing:.4px !important; }

/* chunky flat title */
.game-title{
  font-style:normal !important;
  -webkit-text-fill-color:#fff;
  background:none !important;
  color:#fff !important;
  -webkit-text-stroke:2.4px #e0761f !important;
  paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(224,118,31,.4);
  filter:none !important;
  letter-spacing:1.5px !important;
}

/* pill buttons: thick white inner stroke + gloss, keeps each page's --pc */
.btn,.resume-btn,.quit-link,.lb-btn,.settings-music-btn{
  font-style:normal !important;
  border:3px solid #fff !important;
  border-radius:999px !important;
  box-shadow:
    0 6px 0 color-mix(in srgb,var(--pc,var(--neon-magenta)) 45%,#000 55%),
    0 10px 18px -6px rgba(150,90,40,.4),
    inset 0 3px 6px rgba(255,255,255,.6) !important;
}
.btn:active,.resume-btn:active,.quit-link:active,.lb-btn:active,.settings-music-btn:active{
  transform:translateY(6px);
  box-shadow:0 0 0 color-mix(in srgb,var(--pc,var(--neon-magenta)) 45%,#000 55%),
    inset 0 3px 6px rgba(255,255,255,.6) !important;
}

/* round corner button */
.pause-btn{
  background:linear-gradient(180deg,#fff,#ffe0bf) !important;
  border:3px solid #f6a24d !important;
  color:#e0761f !important;
  box-shadow:0 4px 0 #e0761f, inset 0 2px 4px rgba(255,255,255,.8) !important;
}

/* stitched cartoon panels */
.pause-modal,.banner,.mini-lb{
  background:var(--panel) !important;
  border:4px dashed var(--stitch) !important;
  outline:4px solid var(--frame);
  border-radius:26px !important;
  box-shadow:0 14px 34px rgba(60,90,120,.35) !important;
}

.board-frame{
  background:linear-gradient(160deg,var(--wood-hi),var(--wood-lo)) !important;
  border:4px dashed var(--stitch) !important;
  outline:4px solid #c25e18;
  border-radius:28px !important;
  box-shadow:0 10px 0 -2px #a8480f, 0 18px 30px rgba(150,80,20,.35),
    inset 0 2px 0 rgba(255,255,255,.5) !important;
}

/* name / score inputs */
.name-field input{ border:2px solid var(--panel-edge) !important; border-radius:12px !important; }

/* ---- main-menu player-count tiles (index.html) ---- */
.player-select{ gap:12px !important; }
.p-btn{
  height:auto !important;
  padding:10px 6px 8px !important;
  border:3px solid #fff !important;
  outline:3px dashed var(--panel-edge); outline-offset:-8px;
  border-radius:20px !important;
  box-shadow:0 5px 0 var(--panel-edge), 0 10px 18px -8px rgba(150,90,40,.3) !important;
}
.p-btn svg{ width:74% !important; opacity:1 !important; }
.p-btn small{
  font-family:var(--font-display) !important; font-weight:700 !important;
  font-size:10px !important; letter-spacing:.2px !important; text-transform:none !important;
  white-space:nowrap; opacity:1 !important; color:var(--text) !important;
}
.p-btn:hover{ transform:translateY(-3px) !important; }
.p-btn:active{ transform:translateY(4px) !important;
  box-shadow:0 1px 0 var(--panel-edge), 0 4px 10px -6px rgba(150,90,40,.3) !important; }
.p-btn.active{
  border-color:#fff !important;
  outline-color:rgba(255,255,255,.65);
  box-shadow:0 6px 0 color-mix(in srgb,var(--pc) 55%,#000 45%),
    0 12px 22px -6px rgba(150,90,40,.45) !important;
}
.p-btn.active small{
  color:#fff !important;
  -webkit-text-stroke:1.2px color-mix(in srgb,var(--pc) 60%,#000 40%); paint-order:stroke fill;
}

/* pause scrim */
.pause-overlay,.lb-overlay{ background:rgba(30,55,80,.45) !important; }

/* ---- pause menu, floating-tab redesign (CSS-only, markup unchanged) ---- */
.pause-modal{
  position:relative !important;   /* anchor the floating title pill */
  overflow:visible !important;
  padding:40px 20px 22px !important;
  border:5px solid #ffd6a0 !important;
  outline:4px dashed #fff !important;
  outline-offset:-11px !important;
}
/* title floats as a pill tab overlapping the top edge */
.pause-modal h2{
  position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  margin:0 !important; white-space:nowrap;
  font-style:normal !important; font-size:18px !important; letter-spacing:1px !important;
  color:#fff !important;
  -webkit-text-stroke:2px #c25e18; paint-order:stroke fill;
  background:linear-gradient(180deg,#ffbf78,#f0842e) !important;
  border:3px solid #fff; border-radius:999px;
  padding:8px 26px !important;
  box-shadow:0 5px 0 #a8480f, 0 8px 14px -4px rgba(150,80,20,.4);
}
/* list rows get soft dashed dividers + room */
.pause-modal .settings-row{ margin-bottom:0 !important; padding:14px 4px !important; }
.pause-modal .settings-row + .settings-row{ border-top:2px dashed var(--panel-edge); }
.pause-modal .settings-label{ font-family:var(--font-body) !important; font-weight:700; }
/* music toggle -> fat green pill */
.pause-modal .settings-music-btn{
  border-radius:999px !important; border:3px solid #fff !important;
  background:linear-gradient(180deg,#a6e6ac,#6cc47a) !important;
  color:#2f6b3a !important; font-family:var(--font-body) !important; font-weight:800 !important;
  box-shadow:0 4px 0 #4f9e5c, inset 0 2px 4px rgba(255,255,255,.6) !important;
}
/* slider track + thumb tinted to theme */
.pause-modal input[type=range]{ background:#ffe9d6 !important; height:8px !important; }
.pause-modal input[type=range]::-webkit-slider-thumb{ background:#f5943f !important; border-color:#fff !important; }
.pause-modal input[type=range]::-moz-range-thumb{ background:#f5943f !important; border-color:#fff !important; }

/* ---- shared pause-modal difficulty selector + info + reset confirm ---- */
.pause-modal .pm-diff-row{ margin:2px 0 12px; }
.pause-modal .pm-diff-row .settings-label{ margin-bottom:8px; }
.pause-modal .pm-pills{ display:flex; gap:6px; }
.pause-modal .pm-pill{
  flex:1; font-family:var(--font-body) !important; font-weight:800; font-size:11px;
  letter-spacing:.4px; text-transform:uppercase; color:var(--text-dim);
  background:#fff; border:2px solid var(--panel-edge); border-radius:999px;
  padding:8px 2px; cursor:pointer; transition:transform .08s ease, box-shadow .1s ease;
}
.pause-modal .pm-pill[data-d="easy"]{ --dc:#7ecb7a; }
.pause-modal .pm-pill[data-d="medium"]{ --dc:#f7b93c; }
.pause-modal .pm-pill[data-d="hard"]{ --dc:#ef7a3a; }
.pause-modal .pm-pill.active{ color:#fff; border-color:var(--dc); background:var(--dc); box-shadow:0 3px 0 color-mix(in srgb,var(--dc) 60%,#000 40%); }
.pause-modal .pm-pill:active{ transform:translateY(2px); }
.pause-modal .pm-info-btn{
  width:100%; margin:0 0 10px; padding:9px; border-radius:12px;
  background:#fff; border:2px solid var(--panel-edge); color:var(--text);
  font-family:var(--font-body); font-weight:700; font-size:12px; cursor:pointer;
}
.pause-modal .pm-info{
  font-family:var(--font-body); font-size:11px; line-height:1.6; color:var(--text-dim);
  background:#fff; border:2px dashed var(--panel-edge); border-radius:12px;
  padding:10px 12px; margin:0 0 12px; text-align:left;
}
.pm-reset{
  position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center;
  padding:22px; background:rgba(30,55,80,.5);
}
.pm-reset .pm-reset-box{
  width:100%; max-width:280px; text-align:center;
  background:var(--panel); border:5px solid #fff; border-radius:22px; padding:22px 20px;
  box-shadow:0 18px 40px rgba(0,0,0,.4), 0 0 0 4px var(--panel-edge);
}
.pm-reset .pm-reset-box .t{ font-family:var(--font-display); font-weight:800; font-style:normal; text-transform:uppercase; font-size:16px; color:#e0761f; }
.pm-reset .pm-reset-box .s{ font-family:var(--font-body); font-size:12px; color:var(--text-dim); margin:8px 0 16px; line-height:1.5; }
.pm-reset .pm-reset-box .row{ display:flex; gap:10px; }
.pm-reset .pm-reset-box button{
  flex:1; font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:12px;
  border:3px solid #fff; border-radius:14px; padding:11px 6px; cursor:pointer; color:#fff;
}
.pm-reset .pm-reset-box .cancel{ background:linear-gradient(180deg,#d8c3a4,#b39a74); box-shadow:0 4px 0 #7d6743; }
.pm-reset .pm-reset-box .go{ background:linear-gradient(180deg,#ffbf78,#f0842e); box-shadow:0 4px 0 #a8480f; }

/* ---- pencil hint on every editable player-name field ---- */
.name-field input,
.p-chip .pn input,
.p-chip .name-wrap input,
.rv-name{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a5896f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 8px center !important;
  background-size:13px 13px !important;
  padding-right:26px !important;
}
.name-field input:focus,
.p-chip .pn input:focus,
.p-chip .name-wrap input:focus,
.rv-name:focus{ background-image:none !important; padding-right:8px !important; }
.race-vert[data-n="3"] .rv-name,
.race-vert[data-n="4"] .rv-name{ background-position:right 4px center !important; background-size:10px 10px !important; padding-right:18px !important; }

/* ---- hide the running play-by-play / commentary line in every game ---- */
.status-line{ display:none !important; }

/* ---- compact HUD ----------------------------------------------------------
   Every game stacked a big title row above a second row of stats, which on a
   phone is height the board never gets back. The stats ride in the title row
   instead, inside a .hud-slot, and the row below carries only the name field.

   These live here rather than in each game because theme.css loads after each
   game's own <style>, so one block overrides all of them without editing six
   copies of the same rules. */
.top-header{ justify-content:flex-start !important; gap:10px !important; margin-bottom:9px !important; }
.top-header .game-title{ font-size:clamp(17px, 5vw, 26px) !important; letter-spacing:.6px !important; }

.hud-slot{ display:flex; align-items:center; gap:14px; }

/* The title takes the free space, not the stats. Pushing from the stats side
   (margin-left:auto on .hud-slot) only worked in games that HAVE stats: the
   ones that don't -- tic-tac-toe, dots & boxes, ludo, chess, pool and the rest
   -- had nothing to push, so their pause button sat pressed against the title
   instead of at the right edge. Pushing from the title works either way. */
.top-header .game-title{ margin-right:auto !important; }
/* Basis 0: the title only ever gets the space left over once the stats and the
   pause button have theirs, and folds onto two lines inside it. Without this,
   flexbox squeezed the title and the stats proportionally, so two score chips
   wrapped into a column even when folding the title would have left room for
   them side by side. The title still never shrinks below its longest word. */
.top-header .game-title{ flex:1 1 0 !important; }
.top-header .hud, .top-header .hud-slot{ margin-left:0 !important; }
.hud-slot > *{ text-align:right; }
.hud-slot .label, .hud-slot .stat-label{
  font-size:9px !important; letter-spacing:1.3px !important; line-height:1.1 !important;
}
.hud-slot .value, .hud-slot .stat-value{ font-size:19px !important; line-height:1.05 !important; }
.hud-slot .hearts{ font-size:13px !important; line-height:1.2 !important; }
/* The chip-styled stats (sudoku's timer, fruit ninja's score) carry their own
   box, which was sized for a row of its own. */
.hud-slot .stat-chip, .hud-slot .stat-field[class]{ padding:4px 11px !important; border-radius:11px !important; }

/* ---- stat boxes ------------------------------------------------------
   Score, moves, time and lives each sit in their own box instead of floating
   as bare text beside the title. A number with no container reads as a label
   rather than a live readout, and the name field next door already has one --
   so the header is now two kinds of box, not a box and some loose text.

   Written against every shape a stat takes across the games (candy's
   .hud-item, snake's .score-field, sudoku's .stat-chip, the .stat-field that
   memory, nutbolt and fruit ninja nest), so one rule gives them all the same
   box. */
.hud-item,
.hud-slot .score-field,
.hud-slot .stat-field,
.hud-slot .stat-chip{
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important;
  /* Sized by content, not a fixed minimum: Candy carries three of these in
     the title row, and a 62px floor on each squeezed the title onto two
     lines on a 375px phone. */
  min-width:0 !important;
  padding:5px 7px 6px !important;
  background:var(--panel, #fff8ec) !important;
  border:2px solid var(--panel-edge, #f0cf9a) !important;
  border-radius:12px !important;
  box-shadow:0 3px 0 var(--panel-edge, #f0cf9a) !important;
  text-align:center !important;
}
.hud-item .k,
.hud-slot .label,
.hud-slot .stat-label{
  margin:0 !important; line-height:1.1 !important;
  letter-spacing:.7px !important;   /* the label, not the number, sets most box widths */
}
.hud-item .v,
.hud-slot .value,
.hud-slot .stat-value{
  margin-top:2px !important;
}
/* Memory and nut & bolt wrap their stat in a row; keep that row from adding
   a second, larger box around the one above. */
.hud-slot .stat-row,
.hud-slot .stats-row{
  background:none !important; border:none !important; box-shadow:none !important;
  padding:0 !important; gap:8px !important;
}
.hud{ gap:6px !important; }
.hud-slot{ gap:6px !important; }
.top-header{ gap:8px !important; }
/* No nowrap on the title, deliberately. Candy carries three stat boxes in this
   row, and the score box widens as the score grows -- a title forced onto one
   line then pushes the pause button off the right edge mid-game. Letting it
   wrap means a crowded header folds the title onto two lines instead of
   clipping a control. Wide enough screens still get one line. */

.top-bar{ margin-bottom:9px !important; }
.top-bar .name-field{ flex-direction:row !important; align-items:center !important; gap:8px !important; }
/* The field's own placeholder already says "Player Name", so a visible
   "PLAYER" label beside it just said the same word twice. Hidden from sight
   only: a placeholder vanishes the moment someone types and is not a reliable
   accessible name, so the real <label> stays for screen readers. */
.name-field label{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important;
}
.top-bar .name-field input{ padding:5px 9px !important; font-size:12.5px !important; width:120px !important; }

/* ---- per-player score chips in the title row ----------------------------
   Dots & boxes and memory show one chip per player, up to four. They sit in
   the title row with every other game's stats instead of stranded on a row of
   their own. Four chips will not fit beside a title and a pause button on a
   phone, so the row may wrap: at three or four players the chips fold into a
   two-by-two block inside the header rather than pushing pause off the edge.
   The chips double as the turn indicator (.active), so they stay in view at
   the top rather than being trimmed down to fit. */
.top-header .hud-slot{ min-width:0; flex:0 1 auto; }
.top-header .score-row{
  display:flex !important; flex-wrap:wrap !important;
  justify-content:flex-end !important; gap:5px !important; min-width:0;
}
.top-header .score-chip{
  padding:4px 8px !important; gap:5px !important; border-radius:11px !important;
}
.top-header .score-chip .label{
  font-size:9px !important; letter-spacing:.5px !important; line-height:1.1 !important;
}
.top-header .score-chip .value{ font-size:16px !important; line-height:1.05 !important; }