/*
 * Game Collection – platform look (start page, lobby, menus, admin).
 * Games bring their own stylesheet (games/<id>/style.css), active only while the game is on screen.
 * Lobby colours come from the selected game's theme via CSS variables (--t-…), see styleguide.md.
 */
:root {
  --ink: #1b1420;
  --ink2: #3a2c3a;
  --night: #231b3a;
  --night2: #3a2e5c;
  --lav: #a99be0;
  --lav2: #6c5ba8;
  --pink: #ff5d8f;
  --pink2: #b8325f;
  --mint: #3fc7a8;
  --mint2: #1f8a74;
  --gold: #f5c84c;
  --gold2: #c48a1c;
  --paper: #fffaf0;
  --paper2: #efe3c8;
  --paper3: #d6c4a0;
  --green: #7cc24f;
  --green2: #2f6b32;
  --red: #e06a5c;
  --red2: #842424;
  --shadow: 4px 4px 0 rgba(8, 4, 20, .5);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* theme (overwritten by the selected game in lobby and game) */
  --t-bg: var(--night);
  --t-tile: url("assets/tile_night.png");
  --t-panel: var(--paper);
  --t-panel2: var(--paper2);
  --t-ink: var(--ink);
  --t-accent: var(--lav2);
  --t-accent-ink: var(--paper);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  background-color: var(--t-bg);
  background-image: var(--t-tile);
  background-size: 64px 64px;
  image-rendering: pixelated;
  min-height: 100vh;
  transition: background-color .35s;
}
body.screen-home { animation: drift 60s linear infinite; }
@keyframes drift { from { background-position: 0 0; } to { background-position: -256px 128px; } }
img.px { image-rendering: pixelated; image-rendering: crisp-edges; display: inline-block; vertical-align: middle; }
button, input { font-family: inherit; font-size: inherit; }
.hidden { display: none !important; }
h1, h2, h3 { line-height: 1.15; }

/* ---------------------------------------------------------------- building blocks */
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row.center { justify-content: center; }
.grow { flex: 1 1 auto; }
.right { margin-left: auto; }
.hint { font-size: 14px; line-height: 1.5; color: #5a4e5e; }
.muted { color: #8a7f8c; }
.err { color: #a3261b; font-weight: 700; }
.warn-text { color: #8f4a14; }
.tag { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; padding: 1px 6px; border: 2px solid var(--ink); background: var(--paper2); white-space: nowrap; }
.tag.warn { background: #ffd9a8; }
.tag.ok { background: #cfe9bf; }
.tag.host { background: #fff1b8; }
.swatch { display: inline-block; width: 16px; height: 16px; border: 3px solid var(--ink); flex: none; }
.dot { width: 10px; height: 10px; border: 2px solid var(--ink); display: inline-block; }
.dot.on { background: var(--mint); } .dot.off { background: #9a8f9c; }
.thinking::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.sectlabel { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #5a4e5e; margin: 10px 0 6px; border-bottom: 2px dashed #c9bfae; padding-bottom: 3px; }
.code-chip { font-family: ui-monospace, Menlo, monospace; letter-spacing: 3px; background: var(--ink); color: var(--gold); padding: 0 8px; }

/* ---------------------------------------------------------------- panels & cards */
.panel, .card {
  background: var(--t-panel);
  border: 4px solid var(--ink);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--t-panel2), var(--shadow);
  padding: 14px 16px;
  position: relative;
}
.panel > h2, .panel > h3, .card > h3 {
  margin: -14px -16px 12px;
  padding: 7px 14px 6px;
  background: var(--t-accent);
  color: var(--t-accent-ink);
  border-bottom: 4px solid var(--ink);
  text-shadow: 2px 2px 0 var(--ink);
  font-size: 17px; letter-spacing: .5px;
  display: flex; align-items: center; gap: 8px;
}
.panel > h2 .right, .panel > h3 .right, .card > h3 .right { margin-left: auto; font-size: 14px; }
.panel > h2 .hint, .card > h3 .hint { color: inherit; opacity: .85; text-shadow: none; font-weight: 600; }
/* header styles a game can pick in its theme */
body.hdr-wood .panel > h2, body.hdr-wood .lobby-banner { background-image: repeating-linear-gradient(0deg, transparent 0 10px, rgba(0,0,0,.14) 10px 12px); }
body.hdr-stripes .panel > h2, body.hdr-stripes .lobby-banner { background-image: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,.12) 12px 24px); }

/* ---------------------------------------------------------------- buttons & inputs */
.btn {
  border: 3px solid var(--ink);
  background: var(--gold);
  color: var(--ink);
  padding: 7px 14px 6px;
  cursor: pointer;
  box-shadow: inset -3px -3px 0 var(--gold2), inset 3px 3px 0 #fff6c8, 3px 3px 0 rgba(0,0,0,.35);
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  line-height: 1.1;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translate(2px, 2px); box-shadow: inset -3px -3px 0 var(--gold2), inset 3px 3px 0 #fff6c8; }
.btn:disabled { filter: grayscale(.8) brightness(.9); cursor: not-allowed; opacity: .7; transform: none; }
.btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.btn.green { background: var(--green); box-shadow: inset -3px -3px 0 var(--green2), inset 3px 3px 0 #c8f0a0, 3px 3px 0 rgba(0,0,0,.35); }
.btn.blue { background: #6fb5e6; box-shadow: inset -3px -3px 0 #1d5a7c, inset 3px 3px 0 #c8ecff, 3px 3px 0 rgba(0,0,0,.35); }
.btn.red { background: var(--red); box-shadow: inset -3px -3px 0 var(--red2), inset 3px 3px 0 #ffc0b0, 3px 3px 0 rgba(0,0,0,.35); }
.btn.plain { background: var(--paper); box-shadow: inset -3px -3px 0 var(--paper3), inset 3px 3px 0 #fff, 3px 3px 0 rgba(0,0,0,.35); }
.btn.on { background: var(--mint); box-shadow: inset -3px -3px 0 var(--mint2), inset 3px 3px 0 #bff3e6, 3px 3px 0 rgba(0,0,0,.35); }
.btn.small { padding: 4px 9px 3px; font-size: 14px; }
.btn.big { padding: 11px 20px 10px; font-size: 18px; }
.btn.wide { width: 100%; }
.txt {
  border: 3px solid var(--ink); background: #fff; padding: 8px 10px; min-width: 0;
  box-shadow: inset 3px 3px 0 #e2dccf; color: var(--ink);
}
.txt:focus { outline: 3px solid var(--pink); outline-offset: 1px; }
.code-input { width: 7.5em; text-transform: uppercase; letter-spacing: 4px; font-family: ui-monospace, Menlo, monospace; font-weight: 800; }

/* ---------------------------------------------------------------- navbar (every screen) */
/* left edge lines up with the .home / .lobby column */
.navbar { position: relative; z-index: 25; padding: 6px max(16px, calc((100% - 1060px) / 2 + 16px)); background: var(--night); border-bottom: 4px solid var(--ink); box-shadow: 0 4px 0 rgba(8, 4, 20, .35); }
.nav-home { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--gold); text-decoration: none; }
.nav-home img.px { filter: drop-shadow(2px 2px 0 rgba(0,0,0,.5)); transition: transform .08s; }
.nav-home:hover img.px { transform: translateY(-2px) rotate(-4deg); }
.nav-name { font-weight: 900; font-size: 17px; letter-spacing: 2px; text-transform: uppercase; text-shadow: 2px 2px 0 var(--pink2); }
.nav-home:focus-visible { outline: 3px solid var(--pink); outline-offset: -3px; }

/* ---------------------------------------------------------------- start page */
.home, .lobby { max-width: 1060px; margin: 0 auto; padding: 22px 16px 90px; display: grid; gap: 18px; }
.hero { display: flex; align-items: center; gap: 22px; padding: 10px 6px 4px; color: var(--paper); }
.hero h1 {
  margin: 0; font-size: clamp(34px, 7vw, 60px); letter-spacing: 3px; font-weight: 900; text-transform: uppercase;
  color: var(--gold); text-shadow: 4px 4px 0 var(--pink2), 8px 8px 0 var(--ink);
}
.hero .sub { color: var(--lav); font-size: 17px; max-width: 560px; margin: 6px 0 10px; }
.version { display: inline-block; padding: 2px 10px; border: 2px solid var(--lav); color: var(--lav); font-size: 13px; font-weight: 700; cursor: help; }
.home-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
.card-label { display: flex; align-items: center; gap: 8px; font-weight: 800; margin-bottom: 8px; font-size: 17px; }
.name-card .txt { width: 100%; font-size: 18px; margin-bottom: 6px; }
.join-card .row { margin-bottom: 6px; }
.shelf-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 2px dashed #c9bfae; }
.locked-note { border-color: #b33a2e; }
.locked-note > h3 { background: var(--red2); }

/* game tiles (start page + lobby picker): minimal so many games fit */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.gtile {
  display: grid; justify-items: center; gap: 4px; padding: 8px 6px 7px; text-align: center;
  border: 3px solid var(--ink); background: var(--paper); color: var(--ink); font: inherit;
  box-shadow: 3px 3px 0 rgba(0,0,0,.3); transition: transform .08s, box-shadow .08s;
}
button.gtile { cursor: pointer; }
button.gtile:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 rgba(0,0,0,.3); }
.gtile.sel { background: #fff4c8; box-shadow: 0 0 0 3px var(--c-accent), 4px 4px 0 rgba(0,0,0,.35); }
.gtile-art { display: grid; place-items: center; width: 84px; height: 84px; border: 3px solid var(--ink); background-color: var(--c-bg); background-size: 48px 48px; image-rendering: pixelated; }
.gtile-name { font-size: 14px; font-weight: 900; line-height: 1.15; }
.gtile-meta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: #6a5e70; }
.gtile:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

/* ---------------------------------------------------------------- lobby */
.lobby-banner {
  position: relative; overflow: hidden;
  border: 4px solid var(--ink); background-color: var(--t-accent); color: var(--t-accent-ink);
  box-shadow: var(--shadow); padding: 14px 18px 16px;
}
.banner-row { display: flex; justify-content: space-around; align-items: flex-end; opacity: .32; margin: -6px -10px 4px; filter: grayscale(.2); }
.banner-main { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.banner-cover { border: 4px solid var(--ink); line-height: 0; box-shadow: 4px 4px 0 rgba(0,0,0,.35); animation: pop .35s ease-out; }
@keyframes pop { from { transform: scale(.8) rotate(-4deg); opacity: 0; } }
.banner-text { flex: 1 1 260px; text-shadow: 2px 2px 0 var(--ink); }
.banner-text h1 { margin: 0; font-size: clamp(28px, 5vw, 42px); font-weight: 900; letter-spacing: 1px; }
.banner-kicker { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; opacity: .9; }
.banner-text .sub { font-weight: 600; }
.banner-code { display: grid; gap: 8px; justify-items: center; }
.lobby-code {
  font-family: ui-monospace, Menlo, monospace; font-weight: 900; font-size: 34px; letter-spacing: 8px; padding: 2px 6px 2px 14px;
  background: var(--paper); color: var(--ink); border: 4px solid var(--ink); box-shadow: 4px 4px 0 rgba(0,0,0,.35); text-shadow: none;
}
.lobby-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
.seat {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 8px;
  border: 3px solid var(--ink); background: var(--paper); box-shadow: inset 6px 0 0 var(--pc, #bbb), 3px 3px 0 rgba(0,0,0,.2); padding-left: 14px;
}
.seat .name { font-weight: 800; font-size: 17px; }
.seat.me { background: #fff4c8; }
.seat.empty { border-style: dashed; background: transparent; box-shadow: none; opacity: .75; }
.seat.spec { --pc: #8f939c; }
.seat.over { background: #ffe1db; }
.setting { padding: 8px 0 10px; border-bottom: 2px dashed #ddd2bf; }
.setting:last-child { border-bottom: 0; }
.setting-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.setting-label { font-weight: 800; min-width: 120px; }
.setting-ctl { gap: 6px; }
.setting .hint { margin-top: 4px; font-size: 13px; }
.numval { min-width: 44px; text-align: center; font-weight: 900; font-size: 18px; }

/* ---------------------------------------------------------------- overlays: menu, toast, votes, connection */
.modal-bg { position: fixed; inset: 0; background: rgba(15, 8, 30, .62); display: grid; place-items: center; z-index: 50; padding: 16px; overflow-y: auto; }
.modal { max-width: min(560px, 94vw); width: 100%; }
.modal.menu { max-width: 440px; }
.slider { display: grid; grid-template-columns: 70px 1fr 48px; gap: 8px; align-items: center; margin: 6px 0; font-weight: 700; }
.slider input { width: 100%; accent-color: var(--pink); }
.mute { font-weight: 600; text-transform: none; letter-spacing: 0; display: flex; gap: 6px; align-items: center; }
.confirm { border: 3px solid var(--ink); background: #ffe1db; padding: 10px; display: grid; gap: 8px; }
.manage { display: grid; gap: 6px; }
.mrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 6px; border: 2px solid var(--ink); background: var(--paper); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--paper); border: 3px solid var(--gold); padding: 10px 16px; font-weight: 700; box-shadow: var(--shadow); max-width: min(560px, calc(100vw - 32px)); }
.toast.error { border-color: var(--pink); }
.autoreturn { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 70; pointer-events: none; background: var(--ink); color: var(--paper); border: 3px solid var(--gold); padding: 6px 14px; font-size: 14px; font-weight: 700; box-shadow: var(--shadow); white-space: nowrap; }
.autoreturn.hidden { display: none; }
.votebar { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 55; width: min(640px, calc(100vw - 24px)); }
.netbanner { position: fixed; left: 0; right: 0; top: 0; z-index: 58; background: var(--red2); color: var(--paper); text-align: center; padding: 8px; font-weight: 700; border-bottom: 3px solid var(--ink); }
.boot { min-height: 60vh; display: grid; place-items: center; }
.boot-card { background: var(--paper); border: 4px solid var(--ink); padding: 14px 22px; font-weight: 800; box-shadow: var(--shadow); }
.fast-tip { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; max-width: 320px; white-space: pre-line; padding: 6px 9px; background: var(--ink); color: var(--paper); border: 2px solid var(--gold); font-size: 13px; line-height: 1.35; opacity: 0; transition: opacity .08s; }
.fast-tip.on { opacity: 1; }
.fast-tip.wide { white-space: pre; max-width: calc(100vw - 16px); }

/* ---------------------------------------------------------------- tutorial */
.modal.tutorial { max-width: 520px; }
.tut-art { display: flex; justify-content: center; align-items: flex-end; gap: 14px; flex-wrap: wrap; min-height: 112px; padding: 16px 10px; border: 3px solid var(--ink); background: var(--c-bg); box-shadow: inset 0 -6px 0 rgba(0,0,0,.18); }
.tut-art img { filter: drop-shadow(3px 3px 0 rgba(0,0,0,.4)); animation: pop .3s ease-out; }
.tut-title { margin: 14px 0 4px; font-size: 22px; font-weight: 900; line-height: 1.2; }
.tut-text { margin: 0 0 12px; min-height: 4.4em; font-size: 16px; line-height: 1.5; }
.tut-dots { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tut-dot { width: 14px; height: 14px; padding: 0; border: 2px solid var(--ink); background: var(--paper2); cursor: pointer; }
.tut-dot.on { background: var(--pink); }
.center-text { text-align: center; }

/* ---------------------------------------------------------------- admin */
.admin-lock { position: fixed; right: 16px; bottom: 16px; z-index: 30; padding: 6px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 #0006; cursor: pointer; line-height: 0; transition: transform .08s; }
.admin-lock:hover { transform: translateY(-2px); }
.admin-lock:active { transform: translateY(1px); box-shadow: 1px 1px 0 #0006; }
.admin-lock.is-locked { background: #ffd9d2; }
.adminview { max-width: min(760px, 94vw); max-height: 88vh; overflow-y: auto; }
.adminform { display: grid; gap: 8px; }
.lockstate { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 3px solid var(--ink); flex-wrap: wrap; }
.lockstate.active { background: #e3f3d6; }
.lockstate.locked, .lockstate.confirm { background: #ffe1db; }
.agames { display: grid; gap: 8px; }
.agame { border: 2px solid var(--ink); background: var(--paper); padding: 8px 10px; display: grid; gap: 6px; }
.agame-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agame-head .code { font-family: ui-monospace, Menlo, monospace; font-size: 16px; letter-spacing: 1px; }
.aplayers { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.aplayer { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.aplayer.off { opacity: .55; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 760px) {
  .home-top, .lobby-grid { grid-template-columns: 1fr; }
  .hero { flex-direction: column; text-align: center; }
  .banner-main { justify-content: center; text-align: center; }
  .lobby-code { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}