/* Independent touch interface. Deliberately does not import desktop styles. */
:root { color-scheme: dark; --bg:#101722; --panel:#1b2533; --line:#334153; --text:#f3f0e7; --muted:#a7b3c4; --accent:#d7f27d; --red:#ff7985; --blue:#80b8ff; --green:#88e2b3; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); min-height:100svh; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
[hidden] { display:none !important; }
button,input,select { font:inherit; }
button,select { min-height:48px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--text); padding:12px 16px; }
button { cursor:pointer; touch-action:manipulation; font-weight:650; }
button:active { filter:brightness(.86); }
button:disabled { opacity:.45; cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
button.primary { background:var(--accent); border-color:var(--accent); color:#182216; }
button.danger { background:#f5818c; color:#271419; border-color:#f5818c; }
input { width:100%; min-width:0; min-height:50px; margin-top:8px; border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#101722; color:var(--text); font-size:16px; }
input::placeholder { color:#7e8ba0; }
label { display:block; font-size:14px; font-weight:550; }
select { display:block; width:100%; margin-top:8px; }
h1,h2,p { margin:0; overflow-wrap:anywhere; }
h2 { font-size:21px; }
p { line-height:1.55; }
.muted { color:var(--muted); font-size:14px; }
.eyebrow { color:var(--accent); font-size:11px; letter-spacing:.13em; font-weight:750; }
.app-header { max-width:740px; margin:auto; display:flex; align-items:center; justify-content:space-between; padding:10px 16px; }
.brand { color:var(--text); font-weight:900; font-size:18px; letter-spacing:-.05em; text-decoration:none; line-height:1; }
.brand span { color:var(--accent); }.brand small { display:block; font-size:9px; letter-spacing:.34em; color:var(--muted); margin-top:6px; }
.icon-button { width:48px; padding:10px; flex-shrink:0; font-size:20px; }
main { max-width:740px; margin:auto; padding:0 16px 24px; }
.connection { text-align:center; background:#433b24; color:#ffe1a2; padding:8px 12px; font-size:13px; }
.entry { padding-top:24px; }.entry h1 { font-size:clamp(32px,8.5vw,52px); letter-spacing:-.045em; line-height:1.07; margin:16px 0; }.entry h1 em { font-style:normal; color:var(--accent); }
.panel { border:1px solid var(--line); background:var(--panel); border-radius:22px; padding:20px; margin-top:28px; }
.stack { display:flex; flex-direction:column; gap:16px; }.stack .primary { display:flex; justify-content:space-between; }
.divider { text-align:center; color:var(--muted); font-size:12px; margin:2px 0; }
#room-code { text-transform:uppercase; letter-spacing:.18em; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:16px 0 24px; }.section-heading h1 { font-size:30px; letter-spacing:.08em; margin-top:4px; }
.name-edit { margin-bottom:20px; }
.mode-picker { display:grid; grid-template-columns:1fr 1.2fr .8fr; gap:6px; }.mode-picker button { padding:10px 4px; font-size:12px; border-radius:12px; }
.mode-picker button[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); background:#293626; }
#mode-description { margin:12px 0 20px; }
.teams { display:grid; gap:14px; }.team-panel { padding:18px; border-radius:20px; border:1px solid var(--line); border-top:3px solid var(--team-color); background:var(--panel); }
.team-panel h2 { font-size:18px; color:var(--team-color); }.team-panel ul { padding:0; margin:14px 0; list-style:none; }.team-panel li { font-size:14px; padding:7px 0; overflow-wrap:anywhere; }.team-panel li small { display:block; color:var(--muted); }
.team-controls { display:flex; flex-direction:column; gap:12px; }.team-controls label { display:flex; align-items:center; min-height:44px; gap:10px; }.team-controls input { width:22px; min-height:22px; height:22px; margin:0; accent-color:var(--accent); }
.wide { width:100%; }#start-hint,#unassigned { margin:14px 0; }
.game-status { position:sticky; top:0; z-index:2; background:var(--bg); padding:8px 0 14px; border-bottom:1px solid var(--line); }
.status-line { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }.status-line .muted { font-size:12px; }
.role-pill { font-size:11px; border:1px solid var(--line); border-radius:50px; padding:4px 9px; }
#turn-title { font-size:16px; line-height:1.2; letter-spacing:-.02em; }.clue-line { font-size:14px; margin-top:6px; line-height:1.4; color:var(--accent); }
.clue-word { display:block; font-size:26px; line-height:1.2; font-weight:750; }.clue-attempts { display:block; margin-top:4px; font-size:12px; color:var(--muted); }
.board-caption { display:flex; justify-content:space-between; gap:12px; font-size:10px; color:var(--muted); margin:12px 0 8px; }.board-caption span:last-child { white-space:nowrap; font-size:9px; letter-spacing:.05em; }
.board { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.tile { position:relative; min-height:0; padding:0; aspect-ratio:1; border:3px solid var(--card-color,#556174); border-radius:9px; background:#d1c9b5; overflow:hidden; }
.art { display:block; width:100%; height:100%; background-repeat:no-repeat; object-fit:cover; }
.coordinate { position:absolute; left:2px; bottom:2px; color:white; background:#111b; border-radius:4px; padding:1px 4px; font-size:9px; font-weight:650; }
.marks { position:absolute; right:2px; top:2px; background:var(--accent); color:#162012; font-size:10px; border-radius:8px; padding:2px 5px; }
.tile[data-revealed="true"] .art { filter:brightness(.45) saturate(.5); }
.card-badge { position:absolute; inset:0; display:grid; place-items:center; font-size:24px; color:white; text-shadow:0 2px 5px black; pointer-events:none; }
.tile[data-partial="true"] { border-style:dashed; }
.tile[data-color="black"] { border-color:transparent; background:linear-gradient(#d1c9b5,#d1c9b5) padding-box, repeating-linear-gradient(45deg,#000,#000 5px,#444 5px,#444 10px) border-box; }
.tile[data-color="black"]:not([data-revealed="true"]) .art { filter:brightness(0.75); }
.legend { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:10px; margin-top:12px; }.legend-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); }
#game-screen { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
.phase-hint { margin:22px 0 16px; }.action-bar { position:fixed; bottom:0; left:0; right:0; max-width:740px; margin:auto; padding:12px max(16px,env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right)); background:var(--bg); display:grid; grid-template-columns:auto 1fr; gap:10px; z-index:2; border-top:1px solid var(--line); }.action-bar button { font-size:14px; }
.result { margin-top:16px; padding:16px; border:1px solid var(--accent); border-radius:16px; }.result p { color:var(--muted); margin-top:6px; }
.sheet { color:var(--text); background:var(--bg); border:1px solid var(--line); width:min(100%,560px); max-width:100%; max-height:94dvh; margin:auto auto 0; border-radius:24px 24px 0 0; padding:18px 18px calc(22px + env(safe-area-inset-bottom)); overscroll-behavior:contain; overflow-y:auto; }
.sheet::backdrop { background:#040910bf; }.sheet-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }.sheet-header .icon-button { background:transparent; }
body:has(dialog[open]) { overflow:hidden; }
.card-preview { width:min(100%,48dvh); aspect-ratio:1; margin:auto; border:5px solid var(--card-color,#556174); border-radius:18px; overflow:hidden; position:relative; background:#d1c9b5; }
.card-preview[data-partial="true"] { border-style:dashed; }
.card-preview[data-color="black"] { border-color:transparent; background:linear-gradient(#d1c9b5,#d1c9b5) padding-box, repeating-linear-gradient(45deg,#000,#000 8px,#444 8px,#444 16px) border-box; }
.card-preview[data-color="black"]:not([data-revealed="true"]) .art { filter:brightness(0.75); }
.card-preview .card-badge { font-size:60px; }.card-preview[data-revealed="true"] .art { filter:brightness(.65); }
.preview-navigation { display:grid; grid-template-columns:48px 1fr 48px; align-items:center; gap:10px; margin:14px 0; }.preview-navigation button { padding:10px; }.preview-navigation p { text-align:center; font-size:13px; }
.card-actions { display:grid; grid-template-columns:1fr 1.3fr; gap:10px; margin-top:16px; }.card-actions button { font-size:14px; padding:12px 8px; }
#card-help,#card-highlights { margin:8px 0; font-size:13px; }.confirmation { border-top:1px solid var(--line); padding-top:16px; margin-top:16px; }
fieldset { border:0; padding:0; margin:0; }legend { font-size:14px; margin-bottom:12px; }.count-picker { display:flex; flex-wrap:wrap; gap:8px; }.count-picker button { width:48px; padding:10px; }.count-picker button[aria-pressed="true"] { background:var(--accent); color:#182216; }
#menu-room { margin-bottom:16px; }#roster { margin-bottom:22px; }#roster p { padding:8px 0; font-size:14px; border-bottom:1px solid var(--line); }#roster small { color:var(--muted); }
#mobile-rules { font-size:15px; line-height:1.65; }#mobile-rules h3 { color:var(--accent); }#mobile-rules li { margin:8px 0; }
.toast { position:fixed; z-index:10; left:16px; right:16px; bottom:calc(20px + env(safe-area-inset-bottom)); max-width:530px; margin:auto; background:var(--text); color:var(--bg); padding:14px 18px; border-radius:14px; font-size:14px; box-shadow:0 10px 40px #0007; }
@media (min-width:560px) { .teams { grid-template-columns:1fr 1fr; }.board { gap:10px; }.coordinate { font-size:12px; }.entry { max-width:500px; margin:auto; } }
@media (orientation:landscape) and (max-height:540px) { .game-status { position:static; }.board { max-width:480px; margin:auto; }.sheet { max-height:100dvh; }.card-preview { width:40dvh; }.action-bar { position:static; } }
@media (prefers-reduced-motion:no-preference) { .sheet[open] { animation:appear .15s ease-out; }@keyframes appear { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } }

/* Readable entry content, hidden together with the entry screen during play. */
.game-intro { width:100%; max-width:640px; margin:32px auto 0; text-align:left; line-height:1.65; overflow-wrap:anywhere; }
.game-intro h2 { font-size:20px; line-height:1.3; margin:24px 0 12px; }
.game-intro p { margin:12px 0; }
.game-intro ul { padding-left:22px; }
.game-intro li { margin:8px 0; }

.game-intro { color:var(--muted); font-size:16px; }
.game-intro h2,.game-intro strong { color:var(--text); }