:root{font-family:Arial,sans-serif;color:#344d43;background:#f5f1e6;--bg:#f5f1e6;--card:#fffcf3;--ink:#344d43;--muted:#89927e;--accent:#bd7858;--line:#dfe1d2;--field:#d9dece;--header:#344d43;--soft:#e9ebdd;--button-text:#fff9e6}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}button,input{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}header{height:40px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--header);color:#fff8e8;padding:0 16px;flex-shrink:0}header button{height:40px;border:0;background:transparent;color:inherit;padding:0 10px;font-size:11px}header>div{display:flex}.brand{font-size:11px;font-weight:700;letter-spacing:2px}.brand small{font-size:8px;opacity:.6;letter-spacing:1px;margin-left:7px}.landing{max-width:1250px;margin:auto;padding:58px 44px 42px;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:90px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:2px;color:var(--accent);display:flex;align-items:center;gap:9px}.eyebrow:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent)}h1{font:normal clamp(55px,5.1vw,77px)/1.04 Georgia,serif;letter-spacing:-3px;margin:22px 0}h1 em{font-weight:400;color:var(--accent)}.intro{font-size:14px;line-height:1.8;color:var(--muted);margin-bottom:26px}.illustration{height:330px;position:relative;overflow:hidden;border-radius:24px;background:#e3e7d6;border:1px solid var(--line);isolation:isolate}.illustration:before{content:'';position:absolute;width:370px;height:370px;border-radius:50%;border:1px solid #93a38955;left:-80px;top:20px}.illustration canvas{height:470px;width:313.33px;position:absolute;right:60px;top:-67px;transform:rotate(-12deg);border:10px solid #fff9eb;border-radius:18px;box-shadow:15px 20px 30px #2b413329}.art-label{position:absolute;bottom:22px;left:22px;background:var(--card);border-radius:10px;padding:13px 15px;box-shadow:0 5px 20px #10282d15;font-size:10px;letter-spacing:1px}.art-label b{display:block;font-size:8px;margin-top:5px;color:var(--muted)}.sticker{position:absolute;right:18px;top:24px;border-radius:50%;height:86px;width:86px;background:#e8b76d;color:#424e39;text-align:center;display:grid;place-content:center;font:16px Georgia,serif;transform:rotate(12deg);box-shadow:0 4px 0 #ad976b22}.sticker small{font:9px Arial,sans-serif;margin-top:5px}.hero-footer{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:8px;letter-spacing:1px;margin-top:20px}.setup{background:var(--card);border:1px solid var(--line);padding:30px;border-radius:22px;box-shadow:0 18px 50px #20362b09}.setup h2{font:29px Georgia,serif;letter-spacing:-1px;margin:22px 0 10px}.setup>.sub{font-size:12px;color:var(--muted);line-height:1.7;margin-bottom:26px}fieldset{border:0;padding:0;margin:0 0 21px}legend{font-size:12px;font-weight:700;margin-bottom:12px}.devices{display:flex;gap:8px}.devices button{flex:1;border:1px solid var(--line);border-radius:11px;background:transparent;text-align:left;padding:14px 12px;min-height:63px;font-size:13px;font-weight:700}.devices button small{display:block;font-size:9px;font-weight:400;color:var(--muted);margin-top:7px}.devices .selected{border-color:var(--ink);background:var(--soft)}.player-choice{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:15px}#counts{display:flex;gap:5px}#counts button{height:42px;width:42px;border:1px solid var(--line);border-radius:9px;background:transparent}#counts .selected{background:var(--ink);color:var(--bg)}#names{display:flex;gap:6px}#names label{flex:1;min-width:0;font-size:9px;color:var(--muted)}#names input{width:100%;margin-top:6px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:11px 9px;border-radius:8px;font-size:12px}.ad-choice{display:flex;align-items:center;gap:7px;margin:17px 0;font-size:10px;color:var(--muted);min-height:24px}.ad-choice input{width:17px;height:17px;accent-color:var(--accent)}.primary{width:100%;display:flex;justify-content:space-between;align-items:center;background:var(--accent);color:var(--button-text);border:0;border-radius:10px;font-weight:700;padding:15px 18px;min-height:53px;box-shadow:0 4px 0 #703c2e25}.primary span{font-size:24px}.how{font-size:11px;line-height:1.8;color:var(--muted);padding:17px 0}.how b{color:var(--ink)}.record{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--line)}.record span{font-size:9px;color:var(--muted);letter-spacing:1px}.record b{font-size:19px}#ad{height:32px;display:grid;place-content:center;background:var(--soft);color:var(--muted);font-size:10px;letter-spacing:1px;border-top:1px solid var(--line);flex-shrink:0}body.playing{height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-bottom:env(safe-area-inset-bottom)}#game{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--soft)}#boards{flex:1;min-height:0;display:flex;gap:8px;padding:8px}.board{flex:1;min-width:0;min-height:0;position:relative;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:var(--field);box-shadow:0 4px 12px #12262d15}.hud{height:34px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;gap:5px;padding:0 10px;font-size:10px;background:var(--header);color:#fff8e9}.hud-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28%}.progress{color:#eac89d}.field{min-height:0;flex:1;position:relative;display:flex;justify-content:center;align-items:center;touch-action:none;user-select:none;-webkit-user-select:none}.field canvas{display:block;max-width:100%;max-height:100%;touch-action:none}.controls{display:flex;align-items:center;justify-content:center;gap:7px;padding:6px;background:var(--header);flex-shrink:0}.controls button{height:44px;min-width:44px;border:1px solid #a2b2a44d;border-radius:8px;background:#ffffff0e;color:#ffedcf;font-size:24px;touch-action:none}.controls button:active{background:#ffffff35}.overlay{position:absolute;inset:34px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;background:#152b2cc9;backdrop-filter:blur(5px);color:#fff7e6;text-align:center;z-index:3;overflow:auto;padding:12px}.overlay h2{font:30px Georgia,serif;margin:7px 0 12px}.overlay p{font-size:12px;line-height:1.6}.overlay button{min-height:42px;border:0;border-radius:8px;background:#e6b77e;color:#273e3a;padding:10px 16px;font-weight:700;font-size:12px;margin:4px}.ranking{list-style:none;padding:0;margin:7px 0;font-size:12px;line-height:1.8;max-width:100%;overflow-wrap:anywhere}.countdown{font-size:75px!important}.message{position:absolute;top:45px;left:50%;transform:translateX(-50%);background:#fff7dfed;color:#3e5148;border-radius:10px;font-size:11px;white-space:nowrap;padding:8px 12px;pointer-events:none;z-index:2}.game-footer{height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 14px;font-size:10px;color:var(--ink)}.game-footer button{height:30px;border:0;background:transparent;font-size:11px}.duel{flex-direction:column}.duel .board:first-child{transform:rotate(180deg)}.duel .controls{padding:3px}.duel .hud{height:30px}.duel .overlay{inset:30px 0 0}.duel .overlay h2{font-size:23px}.duel .ranking{font-size:11px}.duel .overlay button{padding:8px 12px}.duel .message{font-size:10px}#toast{position:fixed;bottom:45px;left:50%;transform:translateX(-50%);background:var(--header);color:#fff8e6;padding:14px;border-radius:10px;z-index:9;font-size:12px;max-width:90%}
body.orbital{--bg:#141d2d;--card:#1c283b;--ink:#e0e5ee;--muted:#92a3ba;--accent:#e6ad86;--line:#344358;--field:#152235;--header:#101c2b;--soft:#1a283b;--button-text:#273243;background:var(--bg);color:var(--ink)}.orbital h1{font-family:Arial,sans-serif;font-weight:800;letter-spacing:-4px}.orbital h1 em{font-style:normal;color:#9abed2}.orbital .illustration{background:radial-gradient(ellipse at 70% 30%,#374765,#192a40)}.orbital .illustration canvas{border-color:#56677a;border-width:7px;transform:rotate(12deg);right:70px;top:-63px}.orbital .illustration:before{border-color:#97b6c950;transform:rotate(-30deg);border-radius:50%;width:440px;height:160px;left:-20px;top:90px}.orbital .sticker{background:#b4c3e1;color:#273347}.orbital .overlay{background:#101c34c9}.orbital .setup h2{font-family:Arial,sans-serif;font-size:27px;font-weight:650}.orbital .devices .selected{border-color:#b6cae1}
@media(max-width:950px){.landing{gap:35px;padding:40px 26px}.setup{padding:24px}h1{font-size:58px}.illustration canvas{right:25px}.hero-footer{font-size:7px}.orbital .illustration canvas{right:30px}}
@media(max-width:650px){header{padding:0 5px}header button{padding:0 7px}.brand{font-size:10px}.brand small{display:none}.landing{display:block;padding:30px 20px}.hero,.setup{max-width:440px;margin:auto}h1{font-size:58px}.orbital h1{font-size:55px;letter-spacing:-3px}.intro{font-size:13px}.illustration{height:250px}.illustration canvas{height:370px;width:246.67px;top:-65px;right:40px}.orbital .illustration canvas{top:-48px;right:50px}.setup{margin-top:30px}.hero-footer{font-size:6px}.setup h2{font-size:27px}.eyebrow{font-size:8px;letter-spacing:1.4px}#boards{gap:4px;padding:4px}.hud{padding:0 6px;font-size:9px}.controls{gap:5px}.game-footer{padding:0 8px;font-size:9px}#status{display:none}.class-mode .hud{height:48px;flex-wrap:wrap;padding:5px}.class-mode .hud-name{max-width:100%;width:100%}.class-mode .controls{flex-wrap:wrap;gap:3px;padding:4px}.class-mode .overlay{inset:48px 0 0;padding:5px}.class-mode .overlay h2{font-size:19px}.class-mode .overlay button{font-size:10px;padding:6px}.class-mode .ranking{font-size:10px}.class-mode .message{top:54px;white-space:normal;max-width:95%;font-size:9px}.duel .overlay h2{font-size:21px}.duel .overlay p{font-size:10px}.duel .ranking{font-size:10px}}
@media(max-height:500px) and (orientation:landscape){.controls{position:absolute;right:7px;bottom:7px;display:grid;grid-template-columns:44px 44px;border-radius:9px;background:#1c343eaa;gap:4px}.overlay h2{font-size:22px}.overlay p{margin:4px}.ranking{font-size:10px}.overlay button{padding:7px}.duel .controls{grid-template-columns:repeat(3,44px)}.duel .overlay h2{font-size:17px}.duel .overlay{padding:4px}.duel .ranking{margin:2px;line-height:1.4}.game-footer{height:26px}.game-footer button{height:26px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}