:root { --relay-ink:#17324d; --relay-paper:#fffdf8; }
.mode-picker[hidden],.local-setup[hidden],.invite-panel[hidden],.play-panel[hidden],.waiting-panel[hidden],.guess-panel[hidden],.reveal-panel[hidden],.clue-card[hidden] { display:none; }
.relay-shell { max-width:62rem; grid-template-rows:auto auto minmax(0,1fr); }
.relay-status { display:flex; justify-content:space-between; gap:1rem; padding:.65rem 1rem; border:2px solid var(--relay-ink); border-radius:12px; background:#fffdf8; color:var(--relay-ink); }
.relay-status span { color:#627080; text-align:right; }
.relay-stage { overflow:hidden; touch-action:manipulation; }
.mode-picker,.local-setup,.invite-panel,.waiting-panel,.guess-panel,.reveal-panel { width:min(100%,30rem); padding:1.25rem; border:2px solid var(--relay-ink); border-radius:16px; background:#fffdf8; box-shadow:6px 6px 0 rgba(23,50,77,.13); text-align:center; }
.mode-picker img { width:100%; height:auto; border-radius:12px; }
.mode-picker h2,.local-setup h2,.invite-panel h2,.waiting-panel h2,.guess-panel h2,.reveal-panel h2 { color:var(--relay-ink); font-family:Georgia,serif; }
.mode-picker .action-button,.local-setup .action-button,.invite-panel .action-button { width:100%; margin-top:.55rem; }
.local-setup label { display:grid; gap:.35rem; margin:.8rem 0; text-align:left; font-weight:800; }
.local-setup input,.guess-panel input { width:100%; min-height:3rem; padding:.7rem .8rem; border:2px solid var(--relay-ink); border-radius:10px; font:inherit; }
.play-panel { width:min(100%,48rem); height:100%; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; gap:.45rem; }
.clue-card { padding:.35rem .65rem; border:2px solid var(--relay-ink); border-radius:10px; background:#fff2c8; text-align:center; }
.clue-card small { display:block; color:#6a5932; font-weight:900; text-transform:uppercase; letter-spacing:.09em; }
.clue-card strong { display:block; color:var(--relay-ink); font-size:clamp(.95rem,3.6vw,1.25rem); }
.canvas-wrap,.preview-wrap { min-height:0; overflow:hidden; border:3px solid var(--relay-ink); border-radius:12px; background:var(--relay-paper); box-shadow:4px 4px 0 rgba(23,50,77,.14); touch-action:none; }
#relay-canvas { display:block; width:100%; height:100%; touch-action:none; }
.preview-wrap canvas { display:block; width:100%; height:100%; object-fit:contain; }
.palette,.drawing-actions { display:flex; justify-content:center; gap:.4rem; }
.drawing-actions .action-button { min-width:0; min-height:2.65rem; flex:1 1 0; padding:.45rem .35rem; }
.color { width:2.25rem; height:2.25rem; border:3px solid white; border-radius:999px; background:var(--color); box-shadow:0 0 0 2px var(--relay-ink); }
.color.selected { transform:scale(1.15); box-shadow:0 0 0 4px #e2ad36; }
.waiting-pencil { display:block; color:#d96955; font-size:4rem; animation:pencil 1.2s ease-in-out infinite alternate; }
.guess-panel,.reveal-panel { width:min(100%,48rem); height:100%; min-height:0; padding:.7rem; display:grid; gap:.45rem; }
.guess-panel { grid-template-rows:auto minmax(7rem,1fr) auto auto auto; }
.guess-heading h2,.guess-heading p,.reveal-heading p,.reveal-heading h2 { margin:.1rem 0; }
.guess-panel input { min-height:2.65rem; padding:.45rem .7rem; text-align:center; font-weight:800; }
.guess-keyboard { display:grid; gap:.28rem; }
.guess-keyboard[hidden] { display:none; }
.key-row { display:flex; justify-content:center; gap:.22rem; }
.guess-key { min-width:0; min-height:2.25rem; flex:1 1 0; padding:.15rem; border:1px solid var(--relay-ink); border-radius:6px; background:#eef4f2; color:var(--relay-ink); font-size:clamp(.65rem,2.8vw,.85rem); font-weight:850; }
.utility-key { flex:0 1 45%; }
.guess-submit { min-height:2.65rem; padding:.4rem; }
.reveal-panel { grid-template-rows:auto minmax(10rem,1fr) auto auto; }
.reveal-panel #answer { margin:.1rem 0; font-size:clamp(1.8rem,8vw,3rem); text-transform:capitalize; }
.guess-result { margin:.4rem 0; padding:.7rem; border-radius:10px; background:#eef4f2; }
.pass-cover { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:1rem; background:#17324d; color:white; }
.pass-cover[hidden] { display:none; }.pass-cover>div { width:min(100%,28rem); text-align:center; }.pass-cover h2 { font:2.2rem Georgia,serif; }
.pass-cover .action-button { width:100%; }
#confirm-submit { max-width:24rem; border:0; border-radius:14px; padding:0; }#confirm-submit::backdrop{background:rgba(23,50,77,.7)}#confirm-submit form{padding:1.4rem;text-align:center}#confirm-submit form div{display:flex;gap:.5rem}
@keyframes pencil { to { transform:translateX(1rem) rotate(-8deg); } }
@media(prefers-reduced-motion:reduce){.waiting-pencil{animation:none}}
@media(max-width:600px) and (orientation:portrait){.relay-shell{padding:max(.35rem,env(safe-area-inset-top)) .4rem max(.35rem,env(safe-area-inset-bottom));gap:.35rem}.game-header{min-height:2.7rem}.relay-status{min-height:0;padding:.3rem .5rem;gap:.4rem;font-size:.78rem}.relay-status span{max-width:55%;font-size:.68rem}.relay-stage{place-items:stretch}.clue-card small{font-size:.58rem}.play-panel{width:100%;gap:.3rem}.palette{padding:.12rem 0}.guess-panel,.reveal-panel{width:100%;border-radius:10px;box-shadow:none}.guess-heading p{font-size:.75rem}.guess-result{margin:.2rem 0;padding:.35rem;font-size:.78rem}}
@media(max-height:650px) and (orientation:landscape){.relay-shell{grid-template-columns:minmax(12rem,1fr) minmax(0,2fr)}.relay-status{grid-column:1}.relay-stage{grid-column:2;grid-row:1/span 3;place-items:stretch}.mode-picker{width:100%;height:100%;padding:.45rem;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(11rem,.8fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:.2rem .55rem;text-align:left}.mode-picker img{grid-column:1;grid-row:1/-1;width:100%;height:100%;object-fit:contain}.mode-picker h2,.mode-picker p{margin:.15rem 0}.mode-picker h2{font-size:1.2rem}.mode-picker p{font-size:.7rem;line-height:1.3}.mode-picker .action-button{grid-column:2;min-height:2.35rem;margin-top:0;padding:.35rem .5rem;font-size:.72rem}.local-setup{width:100%;height:100%;padding:.55rem;display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:.35rem .55rem}.local-setup h2{grid-column:1/-1;margin:0;font-size:1.25rem}.local-setup label{gap:.2rem;margin:0;font-size:.72rem}.local-setup input{min-height:2.35rem;padding:.35rem .55rem}.local-setup .action-button{grid-column:1/-1;min-height:2.35rem;margin:0;padding:.35rem}.canvas-wrap{max-height:70vh}.play-panel{grid-template-columns:1fr auto}.clue-card,.canvas-wrap{grid-column:1}.palette,.drawing-actions{grid-column:2;flex-direction:column}}