/* Cohesive readable game and lobby surfaces; game mechanics remain server-owned. */
.screen.join-screen{padding-top:20px}.screen.join-screen .join-back{position:static;margin:0 0 22px;min-height:44px}
body:has(.range-stage)>header,body:has(.range-stage) .bottomnav,body:has(.range-stage)>footer,body:has(.wood-stage)>header,body:has(.wood-stage) .bottomnav{display:none}
body:has(.range-stage) main{padding-top:10px;padding-bottom:20px}
.screen:has(.range-stage){padding-top:0}.screen:has(.range-stage)>.eyebrow{display:none}.screen:has(.range-stage)>h1{font-size:25px;margin:8px 0}.screen:has(.range-stage) .arc-scoreline{margin:8px 0 12px}
.wood-stage,.range-stage{position:relative;overflow:hidden;border-radius:20px;border:1px solid #704638;background:#170c12;box-shadow:0 18px 40px #0007}
.wood-stage canvas,.range-stage canvas{display:block;width:100%;height:auto}
.wood-stage{max-width:390px;margin:12px auto 0}.range-stage{width:clamp(210px,calc((100svh - 320px)*.85),340px);max-width:100%;margin:auto}
.wood-label,.range-brand{position:absolute;top:14px;left:0;right:0;text-align:center;font:600 9px system-ui;letter-spacing:3px;color:#dab98b;pointer-events:none}
.wood-status{display:flex;justify-content:space-between;gap:12px;align-items:center}.wood-status strong{font-size:16px}.wood-status span{font-size:12px;color:#c4a998;white-space:nowrap}
.wood-camera{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0}.wood-camera button{width:48px;height:44px;border-radius:12px;background:#301a21;border:1px solid #73404c;color:#f2d9b9;font-size:26px}.wood-camera span{font:12px system-ui;color:#c4ada6}
.wood-controls{background:#231319;border:1px solid #60333c;padding:18px;border-radius:16px;margin:12px 0}.wood-controls label{font-size:14px;line-height:1.4;display:block;margin:10px 0}.wood-controls input[type=range]{width:100%;min-height:48px;accent-color:#e8b780;touch-action:none;padding:0}.wood-controls select{width:100%;font-size:16px;min-height:48px;background:#130c11;color:#f5dfcd;border:1px solid #735147;border-radius:10px;padding:10px}.wood-slots{display:flex;gap:8px}.wood-slots button{flex:1;min-height:46px;background:#38201c;border:1px solid #865d40;color:#f6dfbd;border-radius:9px}.wood-slots button[aria-pressed=true]{background:#b97f45;color:#160e0d}.wood-slots button:disabled{opacity:.25}
.range-console{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:370px;margin:16px auto 0}.range-aim{text-align:center;flex:0 0 95px}.range-aim small,.range-trigger small{display:block;font-size:10px;letter-spacing:1px;margin-top:8px}.range-aim small{color:#cbb5a3}#range-pad{width:90px;height:90px;display:grid;place-items:center;border-radius:50%;border:2px solid #715a50;background:radial-gradient(#38272b,#100c10);box-shadow:inset 0 4px 15px #0009;touch-action:none;user-select:none}#range-stick{display:grid;place-items:center;width:45px;height:45px;border-radius:50%;background:linear-gradient(150deg,#70615b,#332b2a);border:1px solid #a09079;color:#f3e3cf;font-size:23px;pointer-events:none;box-shadow:0 4px 10px #0008}.range-mag{flex:1;text-align:center;min-width:0}#range-ammo{color:#e6ba77;font-size:13px;letter-spacing:1px;white-space:nowrap}.range-mag button{font-size:12px;min-height:44px;padding:8px;margin:7px 0}.range-mag small{display:block;font-size:10px;color:#bfaaa4}.range-trigger{flex:0 0 91px;width:91px;height:91px;border-radius:50%;border:3px solid #d75262;background:radial-gradient(at 30% 20%,#e92b4c,#790e25);box-shadow:0 6px 0 #470b19,0 10px 20px #0007;color:#fff0e0;font-size:32px;touch-action:manipulation;user-select:none}.range-trigger small{margin:0}.range-trigger:active{transform:translateY(3px);box-shadow:0 3px 0 #470b19}.range-trigger:disabled{opacity:.45}
.screen .roster{grid-template-columns:repeat(2,minmax(0,1fr))}
.screen .roster .member{min-width:0;gap:10px;align-items:flex-start}
.screen .roster .member .face{position:static;flex:0 0 36px;width:36px;height:36px;overflow:hidden}
.screen .roster .member .player-avatar{width:36px;height:36px;max-width:100%}
.screen .roster .member>div{flex:1;min-width:0}
.screen .roster .member strong,.screen .roster .member small{overflow-wrap:anywhere;line-height:1.4}
.screen .roster .member button{max-width:100%;white-space:normal;font-size:12px}
:root{--fg:#fbf3ee;--muted:#c0afb7;--accent:#ec2347;--lime:#ec2347}
body{background:#0d090d;color:#f8f0ed;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.screen{max-width:620px;margin:auto;padding:20px 0 38px;position:relative}
.screen h1{font:700 clamp(30px,6.5vw,44px)/1.1 Georgia,serif;letter-spacing:-1px;color:#fff5ed;margin:16px 0 22px}
.screen h2{color:#fff4ee;line-height:1.35}.screen p{font-size:16px;line-height:1.65;color:#d4c7cd}
.screen .eyebrow{font-size:11px;line-height:1.5;letter-spacing:1.6px;color:#f08aa0;margin-top:22px}
.screen .back{position:sticky;top:8px;z-index:20;display:inline-flex;align-items:center;gap:9px;border:1px solid #794051;border-radius:24px;padding:10px 15px;min-height:44px;background:#201017f5;color:#f9e6ec;font:500 14px system-ui,sans-serif;box-shadow:0 6px 20px #0005;cursor:pointer;text-decoration:none}
.screen .back svg{width:18px;height:18px;transform:rotate(180deg)}
.screen .primary{background:linear-gradient(120deg,#ed1943,#ac0c2d);border:1px solid #fa5a7760;color:#fff;border-radius:12px;min-height:50px;font-size:16px;padding:14px 20px;box-shadow:0 8px 20px #9a092026}
.screen .ghost{border:1px solid #734050;border-radius:12px;min-height:46px;color:#edd7df;background:#1b1017;font-size:14px}
.screen input,.screen textarea,.screen select{font:400 16px/1.5 system-ui,sans-serif;color:#fff1f4;background:#100b10;border:1px solid #795064;border-radius:12px;min-height:48px;padding:13px;box-sizing:border-box;max-width:100%}
.screen label{color:#e7d2dc;font-size:14px;line-height:1.5}.screen input::placeholder,.screen textarea::placeholder{color:#b69da9}
.screen .box,.screen .group-form{background:linear-gradient(145deg,#26121c,#140e14);border:1px solid #5c2a3c;border-radius:20px;padding:22px}
.screen .notice,.screen .noticebox,.screen .arc-instruction{font-size:13px!important;line-height:1.65;color:#c8b6bf!important}
.screen .noticebox{background:#28141e;border:1px solid #603044;border-radius:12px;padding:15px}
.game-cover-scene{display:block;width:100%;aspect-ratio:1;background-repeat:no-repeat;border-radius:18px;box-shadow:inset 0 -35px 40px #0004}
.social-cover:has(.game-cover-scene),.rules-art:has(.game-cover-scene){height:auto;max-width:290px;display:block;margin:18px auto 24px}
.social-cover.small:has(.game-cover-scene){max-width:150px}.rules-art .tile-art:has(.game-cover-scene){height:auto;background:none;margin:0}.rules-art .game-cover-scene{width:100%}
.screen .member{background:linear-gradient(125deg,#321624,#1b1019);border:1px solid #653448;border-radius:14px;padding:15px}.screen .member strong{color:#f7e8ed;font-size:16px}.screen .member small{color:#c6a9b6;font-size:12px}.screen .member .face{background:#7b203e;color:#ffdfeb;border:1px solid #bf5577}
.screen .codecard{background:linear-gradient(125deg,#541628,#22121d);border-color:#ab3b59;border-radius:18px}.screen .codecard strong{color:#ffb4c6;font-size:34px;letter-spacing:5px}.screen .codecard small{color:#d3aab9;font-size:11px}
.screen .secret{background:radial-gradient(ellipse at 50% 10%,#682338,#23101b 75%);border:1px solid #b66378;border-radius:20px;box-shadow:inset 0 0 0 6px #2f1321,inset 0 0 0 7px #8c42534d,0 18px 32px #0006;padding:35px 22px;color:#f4d1de;min-height:220px;display:flex;flex-direction:column;justify-content:center}
.screen .secret strong{font-family:Georgia,serif;color:#ffe6d9;font-size:38px}.screen .secret p{font-size:15px;color:#d3abbc}
.screen .memorycard{border-radius:12px;border:1px solid #b5677b;background:repeating-linear-gradient(45deg,#4c1b2c 0 2px,#32111f 2px 12px);box-shadow:inset 0 0 0 4px #29101b,inset 0 0 0 5px #ba617950,0 5px 10px #0004;color:#f5c4d3;min-height:64px;transition:transform .18s,background .18s}
.screen .memorycard.flipped{background:#f2e3d4;color:#421c2c;transform:translateY(-2px)}.screen .memorycard.matched{background:#46342e;color:#ffe8b9;box-shadow:0 0 0 1px #c79d65}
.screen .answer,.screen .choices button,.screen .social-choice{min-height:54px;padding:16px;border:1px solid #784356;border-radius:13px;background:linear-gradient(120deg,#301722,#20101a);color:#f9edf0;font:500 16px/1.4 system-ui,sans-serif;box-shadow:0 4px 10px #0002}
.screen .answer.correct{background:#183b2d;border-color:#7ccd9f;color:#e0ffeb}.screen .answer.wrong{background:#61182d;border-color:#ef6783;color:#ffe3ea}
.screen .statbox{background:#23131c;border:1px solid #653248;border-radius:14px}.screen .statbox strong{color:#ff9db8;font-size:28px}.screen .statbox small{font-size:11px;color:#c6a2b3}
.screen .reactionpad{border-radius:26px;background:radial-gradient(ellipse at 45% 20%,#aa3d59,#5e152a 70%);border:2px solid #d4617d;box-shadow:inset 0 5px 6px #ffbcc230,inset 0 -14px 18px #27041280,0 12px 0 #280d18,0 20px 28px #0008;color:#fff0f3;font-size:25px;min-height:220px}
.screen .reactionpad.ready{background:radial-gradient(ellipse at top,#c6f1b3,#59a753);border-color:#d5ffc4;color:#102a12}.screen .reactionpad.wait{background:radial-gradient(ellipse at top,#a72949,#530e25);color:#ffdae3}
.screen .tabucard{background:linear-gradient(145deg,#f1dfcf,#d4b9a2);color:#40212b;border:1px solid #ffe7cd;border-radius:20px;box-shadow:0 15px 30px #0005;padding:30px}.screen .tabucard span{border-color:#9c757155;color:#633746}
.screen .cup{background:radial-gradient(ellipse at 30% 15%,#996274,#3c1629 80%);border-color:#c3869d;box-shadow:inset 0 2px 8px #f6b4cd38,0 9px 15px #0006;border-radius:18px;color:#ffe8ef}.screen .cup.loser{background:#b1183c;border-color:#ff92ad;box-shadow:0 0 35px #df234a55}
.screen .quote,.screen .social-story,.screen .mission-secret,.screen .clue-card{background:linear-gradient(145deg,#3a1928,#1b0e18);border:1px solid #814359;border-radius:18px;box-shadow:0 12px 25px #0003;color:#fce9f0}
.screen .social-story p{font-size:16px}.screen .social-story small,.screen .clue-card small{color:#eba9bf;font-size:12px}.screen .clue-card strong{color:#ffe1ed}
.screen .fortune-card{background:repeating-linear-gradient(45deg,#512337 0 1px,#28131e 1px 10px);box-shadow:inset 0 0 0 5px #29121f,inset 0 0 0 6px #d58a9e60,0 7px 13px #0005;border-color:#b37087;color:#f3c2d4}
.screen .fortune-card.opened{background:linear-gradient(140deg,#a53c5a,#411b2d);color:#fff1e6}.screen .fortune-stage{font-size:13px;color:#ccb0be}
.screen .arc-field{border:1px solid #966172;background:radial-gradient(ellipse at top,#512232,#120b11 75%);box-shadow:inset 0 0 0 5px #1d0c14,0 18px 36px #0007;border-radius:22px}
.screen .arc-scoreline strong{font-size:19px;color:#ffe9f0}.screen .arc-scoreline span{font-size:11px;color:#d5aabd}.screen .arc-score{color:#ff799e;font-weight:700;font-size:38px}.screen .arc-score small{font-size:10px;color:#d4a8bb}
.screen .arc-result-row{background:#24121d;border-color:#5b293e;font-size:15px;padding:19px 16px}.screen .arc-result-row strong{color:#f9e6ef}.screen .arc-result-row b{color:#ffa0bf}.screen .arc-result-row:first-child{background:linear-gradient(110deg,#5d1e36,#2a1322)}
.screen .word-stages span{font-size:12px;padding:10px 5px;color:#c7a4b6}.screen .word-stages .active{background:#8c284c;color:#fff0f6}
.screen .color-options button{font-size:16px;min-height:56px;color:#fbe6f2}.screen .color-options button span{width:18px;height:18px;box-shadow:0 0 0 2px #ffffff25}
@media(max-width:600px){body:not(.premium-home) main{padding:12px 18px 95px}.screen{padding-top:0}.screen h1{font-size:34px}.screen .box,.screen .group-form{padding:19px}.screen .social-prompt,.screen .social-big{font-size:27px}.social-cover:has(.game-cover-scene),.rules-art:has(.game-cover-scene){max-width:220px}}
@media(prefers-reduced-motion:reduce){.screen *{transition:none!important}}