/* Curio Cabinet — dark walnut, brass and old paper. gamekit supplies the
   screens, buttons, roster, PIN pad and leaderboard; this file themes them
   through the --gk-* custom properties and adds the map, the board screen, the
   results card and the theme picker.

   Every colour that carries text has been measured against its own background
   rather than eyeballed: gk-base's own green (#2fbf7a, 2.37:1 on white) and
   blue (#3f9be0, 3.01:1) both fail under white lettering, and the .row-btns3
   buttons are small text, so the 4.5:1 bar applies to them and not the 3:1
   large-text one. */

:root {
  --gk-accent:#d9a441;  --gk-accent-sh:#9c7020;
  --gk-green:#1a8253;   --gk-green-sh:#125c3a;
  --gk-blue:#2670ab;    --gk-blue-sh:#1a4e78;
  --gk-grey:#616675;    --gk-grey-sh:#42464f;
  --gk-danger:#c0463d;  --gk-danger-sh:#8a3128;
  --gk-ink:#1a120a;
  --gk-card:rgba(246,241,230,.96);
  --gk-key-bg:#efe7d6;  --gk-key-sh:#cdc2ac;
  --gk-input-border:#c7b99e;

  --wood:#241a10;
  --wood2:#372718;
  --brass:#d9a441;
  /* Brass is a 3:1-class colour: fine on the big display type, and it fails
     the 4.5:1 small-text bar on the pale card fill the lists use. Small brass
     text takes the lighter one. */
  --brass-lite:#eec377;
  --paper:#f6f1e6;
  --text:#eadfcd;
  --dim:#ac9a80;
}

/* The root has to carry the base colour, not just the body: with
   viewport-fit=cover iOS extends the visual viewport past height:100% in
   standalone mode, and a colour set only on body leaves a white strip behind
   the home indicator. */
html { background: var(--wood); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Baloo 2', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: radial-gradient(120% 80% at 50% -10%, #4a3520 0%, #2e2114 45%, #1d150c 100%);
  background-color: var(--wood);   /* after the shorthand, which resets it */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

h1, h2, h3 { font-weight: 800; }
.sec { font-size: 17px; margin: 22px 0 6px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.nudge { font-size: 15px; line-height: 1.45; color: var(--dim); margin: 4px 0 14px; }

/* ------------------------------------------------------------- buttons -- */
/* Overriding a gk-base component means overriding ALL of it: colour, shadow
   and margin come as a set, and leaving one out ships a white label on a pale
   fill or a stray drop shadow under it. gk-base's plain .btn is white on
   --gk-accent, which here is brass — so the default button takes dark ink. */
.btn { color: var(--gk-ink); }
.btn.green, .btn.blue, .btn.grey, .btn.danger { color: #fff; }
.btn.ghost {
  background: transparent; color: var(--brass); box-shadow: none;
  border: 2px solid rgba(217,164,65,.42); padding: 12px 18px; font-size: 16px; margin: 6px 0;
}
.btn.ghost:active { transform: translateY(2px); box-shadow: none; }
.btn.big { font-size: 21px; padding: 18px 28px; }
.btn.small { font-size: 15px; padding: 10px 14px; box-shadow: 0 4px 0 var(--gk-accent-sh); }
.btn:disabled { filter: grayscale(.65) brightness(.75); }

.row-btns3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.row-btns3 .btn { margin: 0; font-size: 15px; padding: 14px 6px; }
.row-btns2 .btn { font-size: 16px; }

.topbar.sticky { position: sticky; top: 0; z-index: 5; background: rgba(29,21,12,.94); backdrop-filter: blur(6px); }
.map-player { font-size: 18px; }
.map-stat { font-size: 15px; font-weight: 800; color: var(--brass-lite); white-space: nowrap; }

/* gk-base styles .sheet, which is the markup the profile and install modals
   inject — it has no .modal-box rule at all, so a game that forgets to write
   one gets dark ink floating on the 50% black scrim at about 1.2:1. */
.modal-box {
  background: linear-gradient(180deg, #332516 0%, #241a10 100%);
  color: var(--text);
  width: min(92vw, 400px); max-height: 86vh; overflow-y: auto;
  border-radius: 20px; padding: 22px; text-align: center;
  border: 2px solid rgba(217,164,65,.34);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.modal-box h2 { margin: 0 0 8px; color: var(--paper); }
.modal-box p { font-size: 15px; line-height: 1.5; color: var(--dim); }
.avatar-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.avatar-choice { font-size: 24px; padding: 8px 0; border-radius: 12px; background: rgba(255,255,255,.08); border: none; cursor: pointer; }
.avatar-choice.sel { background: var(--brass); }

/* -------------------------------------------------------------- splash -- */
.crest { font-size: 60px; filter: drop-shadow(0 0 26px rgba(217,164,65,.5)); }
.logo {
  font-size: clamp(36px, 12vw, 56px); line-height: .92; margin: 6px 0 8px;
  letter-spacing: .04em; color: var(--paper); text-shadow: 0 4px 0 rgba(0,0,0,.5);
}
.logo span { display: block; color: var(--brass); }
.tagline { max-width: 430px; font-size: 16px; line-height: 1.45; color: var(--dim); margin: 0 0 18px; padding: 0 18px; }
.splash-foot { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 14px; color: var(--dim); }

/* ------------------------------------------------------------ hall map -- */
.wing { margin: 20px 0 4px; border-left: 4px solid var(--wc, var(--brass)); padding-left: 12px; }
.wing h3 { margin: 0 0 2px; font-size: 20px; color: var(--paper); }
.wing-blurb { margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: var(--dim); }

.hall-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 480px) { .hall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hall {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: rgba(255,255,255,.07); border: none; border-radius: 14px;
  padding: 10px 12px; cursor: pointer; color: var(--text); font-family: inherit;
  box-shadow: 0 4px 0 rgba(0,0,0,.35); text-align: left;
}
.hall:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.hall.next { outline: 3px solid var(--brass); }
.hall.locked { opacity: .38; cursor: not-allowed; }
.hl-n { font-size: 13px; font-weight: 800; color: var(--wc, var(--brass)); }
.hl-name { font-size: 16px; font-weight: 800; color: var(--paper); }
.hl-size { font-size: 12px; color: var(--dim); }
.hl-stars { font-size: 14px; color: var(--brass-lite); letter-spacing: .06em; }

/* --------------------------------------------------------- board screen -- */
/* NEVER set `display` in a #screen-* rule: gk-base shows and hides screens
   with .screen / .screen.active, and an id selector outranks both — which pins
   the game screen visible on top of every other screen, forever. .screen
   already supplies flex-direction: column. */
#screen-game {
  align-items: stretch;      /* .screen centres its children, collapsing the stage to 0 wide */
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
  touch-action: none;
}

.gamebar {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: calc(8px + env(safe-area-inset-top)) 12px 6px;
  background: rgba(29,21,12,.92);
}
.gamebar .grow { flex: 1; }
.iconbtn.small { width: 38px; height: 38px; font-size: 17px; border-radius: 11px; }
.hud { font-size: 15px; font-weight: 800; white-space: nowrap; color: var(--text); }
.hud.time { color: var(--brass); min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.hud.time.urgent { color: #ff8f7a; }
#hud-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper); }

.game-sub {
  margin: 0; padding: 3px 14px 6px; font-size: 13px; line-height: 1.35;
  color: var(--dim); text-align: center; background: rgba(29,21,12,.92);
}

/* Whose turn it is, in a fixed-height strip so the board never reflows when
   the name inside it changes length. */
.duel-turn {
  height: 34px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #fff; background: #2670ab;
}
.duel-turn.p1 { background: #b5423f; }

.game-stage { position: relative; flex: 1; width: 100%; min-height: 0; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ------------------------------------------------------------- results -- */
.res-inner { margin: auto; width: 100%; max-width: 460px; padding: 20px; text-align: center; }
.res-emoji { font-size: 60px; }
.res-title { font-size: 28px; margin: 2px 0 4px; color: var(--paper); }
.res-stars { font-size: 34px; color: var(--brass); letter-spacing: .1em; }
.res-score { font-size: 40px; font-weight: 800; color: var(--brass); font-variant-numeric: tabular-nums; }
.res-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 14px 0; font-size: 14px; color: var(--dim); }
.res-note { font-size: 15px; line-height: 1.45; color: var(--text); margin: 6px 0 4px; }
.res-finished { font-size: 15px; color: var(--brass-lite); font-weight: 800; }
.res-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.res-actions .btn { margin: 4px 0; }

/* --------------------------------------------------- two player · sizes -- */
.field { display: block; margin: 0 0 14px; }
.field span { display: block; font-size: 14px; color: var(--dim); margin-bottom: 5px; }
.field input {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 17px;
  padding: 12px 14px; border-radius: 12px; border: 2px solid var(--gk-input-border);
  background: var(--paper); color: var(--gk-ink);
}

.size-list { display: flex; flex-direction: column; gap: 10px; }
.size-card {
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px;
  background: rgba(255,255,255,.07); border: none; border-radius: 16px; padding: 14px;
  cursor: pointer; color: var(--text); font-family: inherit; text-align: left;
  box-shadow: 0 5px 0 rgba(0,0,0,.35);
}
.size-card:active { transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.size-icon { font-size: 30px; }
.size-info { display: flex; flex-direction: column; }
.size-name { font-size: 18px; font-weight: 800; color: var(--paper); }
.size-meta { font-size: 13px; color: var(--dim); line-height: 1.4; }
.size-best { font-size: 16px; font-weight: 800; color: var(--brass-lite); text-align: right; }

/* ------------------------------------------------------------- cabinet -- */
.theme-list { display: flex; flex-direction: column; gap: 10px; }
.theme {
  display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 14px;
  background: rgba(255,255,255,.07); border: none; border-radius: 16px; padding: 12px;
  cursor: pointer; color: var(--text); font-family: inherit; text-align: left;
  box-shadow: 0 5px 0 rgba(0,0,0,.35);
}
.theme:active { transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.theme.on { outline: 3px solid var(--brass); }
.theme.locked { opacity: .5; cursor: not-allowed; }
.th-swatch {
  width: 62px; height: 46px; border-radius: 10px; border: 2px solid;
  display: flex; align-items: center; justify-content: center;
}
.th-card { width: 22px; height: 30px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.th-info { display: flex; flex-direction: column; gap: 2px; }
.th-name { font-size: 17px; font-weight: 800; color: var(--paper); }
.th-blurb { font-size: 13px; color: var(--dim); line-height: 1.35; }

.lb-rows .lb-row { grid-template-columns: 40px 42px 1fr auto auto; }

/* --------------------------------------------------------------- modal -- */
.howto { text-align: left; max-width: 440px; }
.howto p { font-size: 15px; line-height: 1.5; color: var(--text); }
.howto-list { margin: 10px 0 16px; padding-left: 20px; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.howto-list li { margin-bottom: 8px; }
.modal-box .btn.wide { margin-top: 6px; }