/* Tile Memory game — uses site theme variables so it matches the rest of the site. */

/* Page hero reuses the site's standard .page-hero (theme-adaptive: evergreen by
   default, dark in high-contrast — identical to tools/index.html and about.html).
   It sits OUTSIDE <main> so its green background spans the full viewport width,
   edge to edge, exactly like tools/index.html. Only the inner .wrap is scoped
   so the content column lines up with the 960px game grid below. */
.page-hero.game-hero{padding:50px 0 46px}
.page-hero.game-hero .wrap{max-width:960px;padding:0 20px}
.page-hero.game-hero .eyebrow{margin-bottom:12px}
.page-hero.game-hero h1{margin:0 0 14px}

.game-shell{max-width:780px;margin:22px auto 0}

/* Framed "control console" — used identically for Campaign and Versus so
   both single- and two-player modes read as a premium, bordered panel. */
.game-bar{
  display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
  margin-bottom:18px;
  border:1px solid var(--rule);
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(150% 130% at 0% 0%, rgba(176,141,87,.12), transparent 55%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:0 12px 28px rgba(20,42,30,.10), inset 0 1px 0 rgba(255,255,255,.75);
}

/* stat block — small engraved label over a large serif value */
.stats{display:grid;grid-template-columns:repeat(4,1fr);flex:1 1 300px;min-width:0}
.stat{
  display:flex;flex-direction:column;gap:5px;justify-content:center;
  padding:14px 15px;
  border-right:1px solid var(--rule);
  font-family:var(--sans);
}
.stat:last-child{border-right:none}
.stat .lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stat .val{display:flex;align-items:baseline;gap:3px;line-height:1}
.stat b{font-family:var(--serif);font-size:23px;color:var(--evergreen-deep);font-variant-numeric:tabular-nums;font-weight:700}
.stat .sep{font-size:18px;color:var(--muted);font-weight:600}
.stat .den{font-size:15px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}

/* danger (low time) */
.game-shell.danger #time{color:#c0392b;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* control zone (selects, toggle, swatches, buttons) */
.controls-zone{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 16px;
  background:rgba(255,255,255,.42);
  border-left:1px solid var(--rule);
}
.buttons{display:flex;gap:10px;align-items:center;margin-left:auto}
.game-bar .btn-primary{padding:9px 16px;font-size:13.5px}
.game-bar .btn-ghost{padding:9px 16px;font-size:13.5px}
#nextLevel:disabled{opacity:.45;cursor:not-allowed}
#nextLevel:not(:disabled){margin-left:0}

/* mode tabs — premium segmented control */
.mode-tabs{display:flex;gap:0;justify-content:center;margin:0 auto 18px;padding:5px;width:fit-content;max-width:100%;border:1px solid var(--rule);border-radius:999px;background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 16px rgba(20,42,30,.08)}
.mode-tab{font-family:var(--sans);font-size:14px;font-weight:600;padding:9px 20px;border-radius:999px;border:none;background:transparent;color:var(--ink-soft);cursor:pointer;transition:.18s}
.mode-tab.is-on{background:var(--evergreen);color:#fff;box-shadow:0 2px 8px rgba(20,42,30,.28)}
.mode-tab:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* level progress dots */
.lvl-dots{display:flex;gap:9px;justify-content:center;margin:14px 0 2px}
.lvl-dot{width:11px;height:11px;border-radius:50%;background:var(--rule);border:1px solid var(--line);transition:.2s}
.lvl-dot.done{background:var(--evergreen);border-color:var(--evergreen)}
.lvl-dot.current{background:var(--brass);border-color:var(--brass);box-shadow:0 0 0 3px rgba(176,141,87,.25)}

/* relaxed toggle — custom switch */
.relaxed{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:12.5px;color:var(--muted);font-weight:600;cursor:pointer;white-space:nowrap}
.relaxed .relaxed-text span{opacity:.8}
.switch{position:relative;width:38px;height:21px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.slider{position:absolute;inset:0;border-radius:999px;background:var(--rule);transition:.2s;box-shadow:inset 0 1px 3px rgba(0,0,0,.22)}
.slider::before{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:.2s}
.switch input:checked + .slider{background:var(--evergreen)}
.switch input:checked + .slider::before{transform:translateX(17px)}
.switch input:focus-visible + .slider{outline:2px solid var(--brass);outline-offset:2px}

/* controls: labels + selects + back-pattern swatches */
.controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ctl{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12.5px;color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ctl .sel{font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 10px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);text-transform:none;letter-spacing:0;font-weight:500;transition:.15s}
.ctl .sel:hover{border-color:var(--brass)}
.backs{display:flex;gap:6px;padding:5px 7px;border:1px solid var(--rule);border-radius:11px;background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.swatch{width:24px;height:24px;border-radius:7px;border:2px solid transparent;cursor:pointer;padding:0;transition:.15s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.swatch:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.swatch.is-on{border-color:var(--brass);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 3px rgba(176,141,87,.22)}
.swatch.back-evergreen{background:linear-gradient(150deg,var(--evergreen),var(--evergreen-deep))}
.swatch.back-brass{background:linear-gradient(150deg,#C9B27E,#A6884F)}
.swatch.back-midnight{background:linear-gradient(150deg,#2a3a5c,#101a2e)}
.swatch.back-crimson{background:linear-gradient(150deg,#A66B6B,#6E3F3F)}

/* small-screen: stack the console, swap the left divider for a top one */
@media (max-width:680px){
  .game-bar{flex-direction:column}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid var(--rule)}
  .stat:nth-child(2n){border-right:none}
  .stat:nth-last-child(-n+2){border-bottom:none}
  .stat:last-child{border-right:none}
  .controls-zone{border-left:none;border-top:1px solid var(--rule);justify-content:flex-start}
  .buttons{margin-left:0;width:100%}
  .buttons .btn{flex:1}
}

/* 2-Player Versus uses the same framed console; drop the stray left divider
   since its control zone is the only child. */
.game-bar.versus-bar .controls-zone{border-left:none}
.game-bar.versus-bar .btn-primary{margin-left:auto}
@media (max-width:680px){
  .game-bar.versus-bar .btn-primary{margin-left:0;flex:1 1 100%}
}

/* board grid — column count driven by data-cols (set per difficulty) */
.board{display:grid;gap:12px;justify-items:center}
.board[data-cols="4"]{grid-template-columns:repeat(4,1fr)}
.board[data-cols="5"]{grid-template-columns:repeat(5,1fr)}
.board[data-cols="6"]{grid-template-columns:repeat(6,1fr)}
@media (max-width:560px){
  .board[data-cols]{grid-template-columns:repeat(4,1fr);gap:9px}
}

/* Single-player board gets a framed "tile tray" card so it reads like the
   Versus panels (which sit inside .vs-side). Without this the campaign tiles
   floated bare on the page — inconsistent with the 2P mode. */
#board{
  width:100%;
  margin:2px auto 0;
  padding:22px;
  border:1px solid var(--rule);
  border-radius:18px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(176,141,87,.10), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:0 12px 30px rgba(20,42,30,.10), inset 0 1px 0 rgba(255,255,255,.7);
}
#board .cell{max-width:84px}
@media (max-width:560px){
  #board{padding:14px;border-radius:14px}
  #board .cell{max-width:72px}
}

.cell{width:100%;display:flex;justify-content:center}
.tile-btn{position:relative;width:100%;max-width:78px;height:106px;aspect-ratio:62/84;border:none;background:transparent;padding:0;cursor:pointer;border-radius:11px;overflow:hidden;transition:transform .14s ease,box-shadow .14s ease;box-shadow:0 3px 0 #d7d0bf,0 6px 11px rgba(20,42,30,.26)}
.tile-btn:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 6px 0 #d7d0bf,0 16px 26px rgba(20,42,30,.36),0 0 0 2px rgba(176,141,87,.55)}
.tile-btn:active{transform:translateY(0) scale(.98);box-shadow:0 2px 0 #d7d0bf,0 6px 12px rgba(20,42,30,.26)}
.tile-btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
/* gentle pop when a pair is solved */
.cell.matched .tile-btn{animation:tile-pop .42s ease}
@keyframes tile-pop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
.tile-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:11px;transition:opacity .18s ease}
.tile-back{background:linear-gradient(150deg,var(--evergreen),var(--evergreen-deep));box-shadow:inset 0 2px 3px rgba(255,255,255,.2),inset 0 -4px 7px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.1),0 4px 12px rgba(14,42,30,.22)}
/* Crisp tile-back glyph: a single dark shadow only (no opposing white halo,
   which made the "?" read as blurry). */
.tile-back span{font-family:var(--serif);font-size:27px;color:var(--brass-lt);font-weight:700;letter-spacing:.01em;-webkit-font-smoothing:antialiased;text-shadow:0 1px 1px rgba(0,0,0,.28)}
.tile-front{background:linear-gradient(158deg,#fffdf8,#f0e9da);box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -3px 6px rgba(40,30,10,.08),inset 0 0 0 1px rgba(0,0,0,.05),0 2px 5px rgba(14,42,30,.1)}
.tile-front .tl{width:100%;height:100%}
.cell.flipped .tile-back,.cell.matched .tile-back{opacity:0}
.cell.matched .tile-front{box-shadow:inset 0 0 0 2px var(--brass),inset 0 1px 1px rgba(255,255,255,.9),0 2px 5px rgba(14,42,30,.1);opacity:.95}
.cell:not(.flipped):not(.matched) .tile-front{opacity:0}

/* selectable back patterns — a faint diagonal weave differentiates each */
.board[data-back="evergreen"] .tile-back{background:linear-gradient(150deg,var(--evergreen),var(--evergreen-deep)),repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px);color:var(--brass-lt)}
.board[data-back="brass"] .tile-back{background:linear-gradient(150deg,#C9B27E,#A6884F),repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px);color:#fbf3df}
.board[data-back="midnight"] .tile-back{background:linear-gradient(150deg,#2a3a5c,#101a2e),repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px);color:#bcd0f0}
.board[data-back="crimson"] .tile-back{background:linear-gradient(150deg,#A66B6B,#6E3F3F),repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px);color:#f6dede}
.board .tile-back span{color:inherit}

.game-msg{margin-top:18px;font-family:var(--sans);font-size:15px;color:var(--evergreen);min-height:1.2em;text-align:center}

/* ---- Versus (2–4 players) ---- */
.versus{max-width:860px}
/* Title block mirrors the Campaign stat block so both modes share the same
   framed-console look (the "unified style" the brief asks for). */
.game-bar.versus-bar .vs-title{display:flex;flex-direction:column;justify-content:center;padding:14px 18px;border-right:1px solid var(--rule);flex:0 0 auto}
.vs-title .lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.vs-title .vsub{font-family:var(--serif);font-size:18px;color:var(--evergreen-deep);font-weight:700;margin-top:3px;line-height:1.05}
.game-bar.versus-bar .controls-zone{flex:1 1 auto}

/* Players segmented control — same visual language as the mode tabs. */
.vs-players{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:3px;background:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.pseg{font-family:var(--sans);font-size:13px;font-weight:600;padding:6px 13px;border:none;border-radius:999px;background:transparent;color:var(--ink-soft);cursor:pointer;transition:.16s}
.pseg.is-on{background:var(--evergreen);color:#fff;box-shadow:0 2px 7px rgba(20,42,30,.22)}
.pseg:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* Per-player accent strip so each board is identifiable even when the tile
   backs share one chosen color (selected via the Backs swatches). */
.vs-side.pi-0{--pacc:var(--evergreen)}
.vs-side.pi-1{--pacc:#2a3a5c}
.vs-side.pi-2{--pacc:#A6884F}
.vs-side.pi-3{--pacc:#6E3F3F}
.vs-side{border:1px solid var(--line);border-left:4px solid var(--pacc);border-radius:14px;padding:14px;background:var(--surface);transition:.2s}
.vs-side.is-active{border-color:var(--brass);border-left-color:var(--pacc);box-shadow:0 0 0 3px rgba(176,141,87,.18)}
.vs-side.locked{opacity:.45;filter:grayscale(.3)}
.vs-side.done{opacity:1;filter:none;border-style:dashed}
.vs-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-family:var(--sans);font-weight:600;color:var(--ink)}
.vs-name{font-size:15px;display:inline-flex;align-items:center}
.vs-name::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--pacc);margin-right:8px;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.vs-stat{font-variant-numeric:tabular-nums;color:var(--evergreen-deep);font-size:13.5px}
.vs-board{gap:9px}
.vs-board .tile-btn{max-width:74px}

/* 2-up layout on wide screens (works for 2, 3 or 4 players). */
.vs-arena{display:grid;grid-template-columns:1fr;gap:18px;margin-top:8px}
.vs-arena.cols2{display:grid}
@media (min-width:900px){
  .vs-arena.cols2{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .game-bar.versus-bar .vs-title{border-right:none;border-bottom:1px solid var(--rule)}
  .vs-side.locked{opacity:1;filter:none}
}

/* ---- celebration: banner + confetti burst ---- */
.celebrate{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.celebrate-banner{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);text-align:center;animation:cb-pop 2.8s ease forwards}
.cb-head{font-family:var(--serif);font-size:34px;line-height:1.1;color:var(--brass);text-shadow:0 2px 10px rgba(0,0,0,.28);font-weight:700}
.cb-sub{font-family:var(--sans);font-size:16px;color:var(--evergreen-deep);margin-top:8px;font-weight:600}
.celebrate--big .celebrate-banner{top:28%}
.celebrate--big .cb-head{font-size:50px;color:var(--brass)}
.celebrate--big .cb-sub{font-size:18px;margin-top:10px}
@keyframes cb-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1)}}
.confetti{position:absolute;top:42%;left:50%;width:9px;height:13px;border-radius:2px;opacity:0;transform:translate(-50%,-50%);animation:confetti-burst linear forwards}
@keyframes confetti-burst{
  0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 38vh)) rotate(var(--rot)) scale(.7)}
}