/* Shared styles for landing, player, and host. Tokens follow prototype/index.html.
   System fonts only: cold start on bad LTE is a product requirement. */
:root{
  --ground:#e9ece9; --surface:#f8faf8; --surface-2:#eef1ee; --line:#d3dad4;
  --ink:#16201c; --ink-2:#4a5852; --ink-3:#6b7972;
  --teal:#0f6d63; --teal-soft:#d7e8e4; --on-teal:#fff;
  --brass:#8a6519; --brass-soft:#f2e6c9;
  --coral:#b23f36; --coral-soft:#f7ddd9;
  --shadow:0 1px 2px rgba(20,32,28,.07), 0 8px 24px rgba(20,32,28,.07);
  --display:ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --body:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0d1310; --surface:#161e1a; --surface-2:#1e2823; --line:#2c3a33;
    --ink:#e8efea; --ink-2:#a3b2ab; --ink-3:#8a9992;
    --teal:#4fbfae; --teal-soft:#123833; --on-teal:#06201c;
    --brass:#d9ab52; --brass-soft:#33280f;
    --coral:#e8736a; --coral-soft:#3a1c19;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --ground:#0d1310; --surface:#161e1a; --surface-2:#1e2823; --line:#2c3a33;
  --ink:#e8efea; --ink-2:#a3b2ab; --ink-3:#8a9992;
  --teal:#4fbfae; --teal-soft:#123833; --on-teal:#06201c;
  --brass:#d9ab52; --brass-soft:#33280f;
  --coral:#e8736a; --coral-soft:#3a1c19;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;
  -webkit-text-size-adjust:100%;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}
a{color:var(--teal)}
[hidden]{display:none !important}

.app{max-width:520px;margin:0 auto;min-height:100vh;background:var(--surface);display:flex;flex-direction:column}
.pad{padding:16px}
.stack{display:flex;flex-direction:column;gap:14px}
.grow{flex:1}
.center{text-align:center}
.muted{color:var(--ink-3);font-size:13px}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--surface-2);position:sticky;top:0;z-index:2}
.topbar .title{font-family:var(--display);font-weight:700;font-size:16px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.score{font-family:var(--mono);font-weight:700;color:var(--brass);font-variant-numeric:tabular-nums}

.btn{display:block;width:100%;padding:14px;border-radius:12px;background:var(--teal);color:var(--on-teal);
  font-weight:600;text-align:center;font-size:16px;min-height:48px}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.small{width:auto;display:inline-block;padding:8px 14px;min-height:0;font-size:14px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;font-size:14px;
  font-weight:600;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);min-height:40px}
.pill.on,.pill[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.pills{display:flex;gap:8px;flex-wrap:wrap}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

label.field{display:flex;flex-direction:column;gap:6px}
input[type=text],input[type=number],select,textarea{font:inherit;font-size:16px;padding:12px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%}
textarea{min-height:80px;resize:vertical}

.code{font-family:var(--mono);font-size:34px;font-weight:700;letter-spacing:.14em;color:var(--teal)}
.code-input{font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;text-align:center;font-size:22px}
.qr{width:180px;height:180px;margin:0 auto;display:block;border-radius:10px;background:#fff;padding:6px}

.list{display:flex;flex-direction:column}
.row{display:flex;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);
  text-align:left;width:100%;min-height:56px}
.row .body{flex:1;min-width:0}
.row .name{font-weight:600}
.row .meta{font-size:12.5px;color:var(--ink-3);display:flex;gap:8px;flex-wrap:wrap}
.row.done .name{color:var(--ink-3);text-decoration:line-through}
.pts{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--brass);white-space:nowrap}
.check{width:32px;height:32px;border-radius:9px;border:2px solid var(--line);flex:none;display:grid;
  place-items:center;font-size:17px;color:transparent;background:var(--surface)}
.check.on{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.check.pop{animation:pop .22s ease-out}
@keyframes pop{50%{transform:scale(1.18)}}
.typeicon{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:15px;
  background:var(--surface-2);border:1px solid var(--line)}
.section-head{padding:14px 16px 6px;display:flex;justify-content:space-between;align-items:baseline}
.section-head h2{font-size:18px}
.controls{display:flex;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.controls select{width:auto;padding:8px 10px;font-size:14px}

.feedback{padding:12px 14px;border-radius:11px;font-size:15px;font-weight:500}
.feedback.bad{background:var(--coral-soft);color:var(--coral)}
.feedback.good{background:var(--teal-soft);color:var(--teal)}
.shake{animation:shake .4s}
@keyframes shake{10%,90%{transform:translateX(-3px)}30%,70%{transform:translateX(5px)}50%{transform:translateX(-6px)}}
@media (prefers-reduced-motion:reduce){.shake,.check.pop{animation:none}}

.sheet{position:fixed;inset:0;background:var(--surface);z-index:10;display:flex;flex-direction:column;
  max-width:520px;margin:0 auto;overflow:auto}
.prompt{font-family:var(--display);font-size:23px;font-weight:700;line-height:1.25}
.bottom{position:sticky;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--line)}

.lb .r{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line)}
.lb .rank{font-family:var(--mono);font-size:13px;color:var(--ink-3);width:18px}
.lb .nm{flex:1;font-weight:600}
.lb .r.you{background:var(--teal-soft)}
.feed{font-size:14px;color:var(--ink-2);padding:8px 16px;border-bottom:1px solid var(--line)}

.banner{padding:10px 16px;font-size:14px;background:var(--brass-soft);color:var(--brass);font-weight:600}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:10px;font-size:14px;z-index:20;
  max-width:calc(100% - 32px)}
.card{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--surface-2)}
.warn{border-color:var(--brass);background:var(--brass-soft)}
.hostlink{font-family:var(--mono);font-size:12px;word-break:break-all;color:var(--ink-2)}

/* Template picker */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px;border-radius:14px;
  border:2px solid var(--line);background:var(--surface-2);min-height:88px}
.tile .name{font-weight:700;font-family:var(--display)}
.tile .meta{font-size:12.5px;color:var(--ink-3)}
.tile[aria-pressed="true"]{border-color:var(--teal);background:var(--teal-soft)}
.tile[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

/* Phases and unlock rules */
.section-head.locked h2{color:var(--ink-3)}
.phase-rule{padding:0 16px 10px;display:flex;flex-direction:column;gap:6px}
.rule{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rule select{width:auto;padding:8px 10px;font-size:14px}
.rule input[type=number]{width:80px;padding:8px 10px;font-size:14px}
.notice ul{margin:0;padding-left:18px}

/* Photos and recordings */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .remove{position:absolute;top:4px;right:4px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:14px}
.thumb .busy{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.4);color:#fff;font-size:13px;font-weight:600}
.addphoto{aspect-ratio:1;border-radius:10px;border:2px dashed var(--line);display:grid;place-items:center;text-align:center;
  color:var(--ink-2);font-size:13px;font-weight:600;padding:6px;background:var(--surface)}
.file-hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.recorder{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0}
.recbtn{width:96px;height:96px;border-radius:50%;background:var(--coral);color:#fff;font-weight:700;font-size:15px}
.recbtn.on{animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 12px var(--coral-soft)}}
@media (prefers-reduced-motion:reduce){.recbtn.on{animation:none}}
audio{width:100%}
.status-note{font-size:13px;font-weight:600}
.status-note.wait{color:var(--brass)}
.status-note.back{color:var(--coral)}

/* Host review queue */
.review{display:flex;flex-direction:column;gap:10px}
.review .media{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.review .media img{width:100%;border-radius:10px;display:block;aspect-ratio:1;object-fit:cover}
.flag{color:var(--coral);font-size:13px;font-weight:600}
.badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--coral);color:#fff;font-size:12px;font-weight:700}

/* Library picker */
.row.unavailable{opacity:.55;cursor:not-allowed}
input[type=search]{font:inherit;font-size:16px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);flex:1;min-width:120px}