:root{color-scheme:light;--paper:#fff8e8;--ink:#254845;--muted:#7c8980;--orange:#e98036;--gold:#ffd174;--line:#31555024;--teal:#2d746d}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #2c8f89;outline-offset:3px}[hidden]{display:none!important}::selection{background:#f8ca7d;color:#24443c}.game-shell{min-height:100svh;position:relative}.game-top{height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 30px;border-bottom:1px solid var(--line);background:#fffbed}.acre{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:13px;font-weight:850;letter-spacing:.12em;text-decoration:none}.acre>span{font-size:36px;color:var(--orange);font-weight:400}.acre small{font-size:9px;color:#7f8d7d}.game-identity{font-size:15px;font-weight:950;letter-spacing:.06em}.game-identity span{display:block;font:7px ui-monospace,monospace;letter-spacing:.14em;text-align:center;margin-top:5px;color:#7d8e7b}.top-actions{display:flex;align-items:center;gap:8px}.quiet,.secondary{border:1px solid #31555036;background:#fffaf0;color:var(--ink);border-radius:8px;padding:10px 13px;font-size:11px;font-weight:650}.quiet:hover,.secondary:hover{background:#f1ead5;border-color:#31555070}.primary{display:flex;justify-content:space-between;align-items:center;min-height:47px;padding:13px 17px;width:100%;border:1px solid #cf6e2e;border-radius:8px;background:var(--orange);color:#fff9e9;font-size:13px;font-weight:800;box-shadow:0 4px 0 #af58232b}.primary:hover{background:#d66e2b}.volume-label{display:flex;align-items:center;font-size:0}.volume-label input{width:60px;height:20px;accent-color:var(--orange)}.text-button{border:0;background:none;color:var(--teal);padding:7px 0;font-size:10px;font-weight:700}.eyebrow{font:750 9px ui-monospace,monospace;letter-spacing:.16em;color:#697e63}.muted{font-size:12px;line-height:1.8;color:var(--muted)}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:20px;padding:22px;max-width:1920px;margin:auto;min-height:calc(100svh - 74px)}.arena{min-height:730px;position:relative;overflow:hidden;border:1px solid #d9c8a0;border-radius:16px;background:#fbedd0;box-shadow:0 9px 25px #755a3510}.arena:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff6d8b3,#fff6d808 68%),url('/arcade/assets/sunboman-cover.png') 63% 50%/cover;pointer-events:none}.arena canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline-offset:-4px}.attract-copy{position:relative;padding:55px 43px;pointer-events:none;max-width:600px}.attract-copy .eyebrow{color:#805c32;font-size:9px}.attract-copy .eyebrow span{font-size:17px;margin-right:8px}.attract-copy h1{font:950 clamp(80px,8.5vw,145px)/.83 system-ui,sans-serif;letter-spacing:-.09em;color:#d26c2f;margin:41px 0 25px;text-shadow:0 3px #fff2c9}.attract-copy h1>span{display:block;color:#294f43}.title-dot{color:#d26c2f}.attract-copy>p{font:750 28px/1.16 system-ui,sans-serif;letter-spacing:-.045em;color:#385245;margin:28px 0 25px}.hero-rule{width:42px;height:3px;border-radius:2px;background:#d18b48}.hero-description{font-size:12px;line-height:1.9;margin-top:21px;color:#6d775d}.feature-tags{display:flex;gap:14px;margin-top:27px;flex-wrap:wrap}.feature-tags span{font:750 8px ui-monospace,monospace;letter-spacing:.08em;color:#5c765c}.feature-tags span+span:before{content:'✦';color:#d88b44;margin-right:14px;font-size:7px}.hero-stamp{display:flex;gap:10px;align-items:center;margin-top:52px;transform:rotate(-5deg);transform-origin:left}.hero-stamp b{font-size:43px;color:#b77835}.hero-stamp span{font:800 8px/1.65 ui-monospace,monospace;letter-spacing:.13em;color:#7c704e}.game-tip{position:absolute;bottom:15px;left:20px;right:20px;text-align:center;font:600 7px ui-monospace,monospace;letter-spacing:.14em;color:#987b4f;pointer-events:none}.control-panel{align-self:start;border:1px solid var(--line);border-radius:14px;padding:28px 24px;background:#f7f1dd}.control-panel h2{font-size:31px;line-height:1.07;letter-spacing:-.05em;margin:19px 0;font-weight:850}.control-panel label:not(.check){display:block;font:700 8px ui-monospace,monospace;letter-spacing:.12em;margin:22px 0 8px;color:#798271}.control-panel input:not([type=checkbox]){width:100%;min-height:44px;padding:11px 13px;border:1px solid #71897938;border-radius:7px;background:#fffcf3;color:var(--ink);font-size:13px}.control-panel input::placeholder{color:#99a18f}.check{display:flex;align-items:center;gap:8px;font-size:10px;color:#7b856f;margin:17px 0;line-height:1.7}.check input{width:15px;height:15px;accent-color:var(--teal)}.divider{display:flex;align-items:center;gap:13px;font:700 7px ui-monospace,monospace;letter-spacing:.16em;color:#97a28a;margin-top:25px}.divider:before,.divider:after{content:'';height:1px;background:var(--line);flex:1}.join-row{display:grid;grid-template-columns:1fr auto;gap:8px}.rooms-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:25px}.rooms-heading h3{font-size:12px}.entry-note{font-size:9px;line-height:1.8;color:#99a08a;margin-top:25px}.open-room{border-top:1px solid var(--line);padding:12px 0;display:flex;justify-content:space-between;align-items:center;font-size:11px}.open-room small{display:block;font-size:8px;color:var(--muted);margin-top:4px}.open-room button{padding:8px 12px;border:1px solid var(--line);border-radius:7px;background:#fff9eb;color:var(--teal);font-size:10px}.notice{font-size:10px;line-height:1.7;color:var(--teal);margin-top:15px}.notice.error{color:#b54e35}.room-title{display:flex;align-items:center;justify-content:space-between;gap:7px}.room-title h2{font-family:ui-monospace,monospace;letter-spacing:.08em;font-size:29px}.player-row{display:flex;align-items:center;gap:9px;font-size:11px;padding:13px 0;border-bottom:1px solid var(--line)}.player-row:before{content:'☀';color:var(--player);font-size:25px}.player-row>div{flex:1}.player-row strong{display:block}.player-row small{display:block;font-size:7px;margin-top:4px;color:#9aa088}.ready-label{font:600 8px ui-monospace,monospace}.leave{color:#ad705b;margin-top:18px}#room-actions{display:grid;gap:10px;margin-top:22px}
.game-shell.playing .game-layout{grid-template-columns:minmax(0,1fr) 215px;padding:14px 18px 0;gap:18px;min-height:0;max-width:none}.game-shell.playing .arena{min-height:420px;height:calc(100svh - 179px);border-radius:14px}.game-shell.playing .arena:before{background:radial-gradient(ellipse at 50% 30%,#fff4d9,#e4e9d1)}.game-shell.playing .control-panel{display:none}.game-shell.playing.menu-open .control-panel{display:block;position:fixed;z-index:40;right:22px;top:89px;width:320px;max-height:calc(100svh - 105px);overflow:auto;box-shadow:0 0 0 100vmax #20433ba6}.match-menu{position:absolute;bottom:10px;right:11px;z-index:41;min-height:30px;padding:6px 13px;border:1px solid #3b655b3b;border-radius:7px;color:var(--teal);background:#fff9e5e8;font-size:10px;font-weight:700}.match-hud{position:absolute;z-index:3;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:13px;padding:17px 22px;pointer-events:none}.match-hud>div>span{display:block;font:750 8px ui-monospace,monospace;letter-spacing:.14em;color:#9b8864}.match-hud>div>strong{display:block;font-size:23px;letter-spacing:-.035em;margin-top:3px}.time-block{min-width:62px;text-align:right}.time-block strong{font-variant-numeric:tabular-nums}.time-block small{display:block;font:650 6px ui-monospace,monospace;letter-spacing:.14em;color:#9a977c;margin-top:4px}.storm-label{font:700 10px ui-monospace,monospace;color:#ba6336;text-align:center}.storm-label.urgent{color:#c44a32}.score-panel{padding:22px 5px 0}.score-panel h2{font-size:25px;letter-spacing:-.045em;margin:14px 0 7px}.score-panel>.muted{font-size:10px;margin-bottom:18px}.sun-score{display:grid;grid-template-columns:30px minmax(0,1fr) 39px;gap:8px;align-items:center;padding:12px 6px;margin:4px 0;border:1px solid transparent;border-bottom-color:var(--line);border-radius:7px;color:var(--ink)}.sun-score.mine{background:#fff3d8;border-color:#d5b679}.sun-score.out{opacity:.42}.sun-orb{font-size:27px;color:var(--player)}.sun-name{font-size:10px;font-weight:750;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sun-name small{display:block;font:7px ui-monospace,monospace;color:#8c9983;margin-top:5px}.sun-wins{color:var(--orange);font-size:11px;text-align:right;letter-spacing:1px;white-space:nowrap}.power-guide{border-top:1px solid var(--line);margin-top:22px;padding-top:8px}.power-guide h3{font-size:15px;letter-spacing:-.02em;margin-bottom:8px}.power-guide>p{font-size:9px;line-height:1.8;color:#929b86}.power-row{display:flex;gap:9px;align-items:center;margin-top:11px;font-size:9px;color:#7d8d77}.power-row b{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;border:1px solid color-mix(in srgb,var(--power) 35%,transparent);color:var(--power);background:color-mix(in srgb,var(--power) 9%,transparent);font-size:15px}.score-note{font-size:11px;line-height:1.7;color:#a8ad95;margin:25px 0}.score-note b{color:#7e9676;font-weight:650}.play-footer{height:91px;padding:15px 20px;display:flex;align-items:center;gap:20px;max-width:1920px;margin:auto}.inventory{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inventory .inv{display:flex;align-items:center;gap:7px;min-height:35px;padding:8px 12px;border:1px solid #a7b1934a;border-radius:7px;background:#f8f1de;color:#788568;font-size:10px;font-weight:650}.inv b{font-size:15px;color:var(--power,var(--teal));font-weight:750}.inv.active{border-color:#639e8a73;color:#356956;background:#eaf0dd}.keyboard-hint{margin-left:auto;font:650 8px ui-monospace,monospace;color:#95a18a;letter-spacing:.07em;white-space:nowrap}.keyboard-hint span{margin:0 8px}.keyboard-hint kbd{border:1px solid #6e8c5a25;padding:5px 7px;border-radius:4px;font:700 9px ui-monospace,monospace;color:#688366}.touch-controls{display:none}.countdown{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#fff1c977;font-size:110px;font-weight:900;color:#d98235;letter-spacing:-.07em;backdrop-filter:blur(3px)}.countdown span{font:800 9px ui-monospace,monospace;letter-spacing:.15em;color:#446652;margin-top:10px}.round-overlay{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#fff6d2bf;backdrop-filter:blur(3px);text-align:center;pointer-events:none}.round-overlay>div{font-size:64px;color:var(--orange);line-height:1}.round-overlay h2{font-size:38px;letter-spacing:-.05em;margin:17px 10px 8px;max-width:90%}.round-overlay p{font-size:12px;color:#839373;margin:6px 20px;line-height:1.7}.spectator{position:absolute;z-index:4;left:50%;bottom:42px;transform:translateX(-50%);padding:10px 18px;border:1px solid #dbaa685c;border-radius:8px;max-width:90%;width:max-content;background:#fff5dfea;color:#936f42;font-size:10px;text-align:center}.event-toast{position:absolute;z-index:12;top:79px;left:50%;transform:translate(-50%,-8px);background:#355f51;color:#fff8df;padding:10px 17px;font-size:11px;border-radius:8px;opacity:0;transition:opacity .18s,transform .18s;pointer-events:none;text-align:center;max-width:90%;width:max-content}.event-toast.active{opacity:1;transform:translate(-50%,0)}.result{position:fixed;inset:0;z-index:70;background:#f7f1dce8;backdrop-filter:blur(12px);display:grid;place-items:center;padding:20px;overflow:auto}.result-card{width:min(440px,100%);padding:30px;background:#fffae9;border:1px solid #d8bf8b;border-radius:18px;box-shadow:0 25px 80px #8e775724;text-align:center;margin:auto}.result-sun{font-size:63px;color:var(--orange)}.result-card .eyebrow{margin-top:17px;font-size:8px}.result-card h2{font-size:43px;line-height:1.02;letter-spacing:-.06em;margin:20px 0 12px}.result-card .muted{font-size:11px}.result-card .primary{margin-top:25px}.score-row{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:14px 0;text-align:left;font-size:10px}.score-row strong{font-weight:650}.score-row span{white-space:nowrap;color:#b78135}.result #result-scores{margin-top:23px}dialog{width:min(770px,calc(100% - 30px));max-height:90svh;overflow:auto;border:1px solid #b6bc9a;border-radius:16px;background:#fff9e8;color:var(--ink);padding:40px;box-shadow:0 30px 90px #31514344}dialog::backdrop{background:#244e427e;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:28px;color:#8e9f7f;padding:2px 7px}dialog h2{font-size:35px;line-height:1.1;letter-spacing:-.045em;margin:22px 0 30px}dialog h2 em{font-style:normal;color:#d5803a}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px}.guide-grid article>b{font:850 12px ui-monospace,monospace;color:#d69755}.guide-grid h3{font-size:17px;letter-spacing:-.03em;margin:9px 0}.guide-grid p,.guide-foot{font-size:11px;line-height:1.9;color:#8a977b;margin:0}.guide-foot{border-top:1px solid var(--line);padding-top:20px;margin-top:24px}
@media(min-width:1600px){.attract-copy{padding:77px 63px}.attract-copy h1{font-size:152px}.game-layout{grid-template-columns:minmax(0,1fr) 350px}.control-panel{padding:35px 28px}}
@media(max-width:1100px){.game-identity{display:none}.game-layout{grid-template-columns:minmax(0,1fr) 285px;padding:14px;gap:14px}.attract-copy{padding:53px 28px}.attract-copy h1{font-size:100px}.attract-copy>p{font-size:24px}.control-panel{padding:25px 20px}.control-panel h2{font-size:28px}.feature-tags{gap:9px}.feature-tags span{font-size:7px}.feature-tags span+span:before{margin-right:9px}.game-shell.playing .game-layout{grid-template-columns:minmax(0,1fr) 165px;gap:12px}.score-panel h2{font-size:22px}.sun-score{grid-template-columns:22px minmax(0,1fr) 33px;gap:5px}.sun-orb{font-size:23px}.sun-name{font-size:9px}.sun-name small{font-size:6px}.sun-wins{font-size:9px}.keyboard-hint{display:none}.play-footer{justify-content:center}.power-row{font-size:8px}.match-hud{padding:15px}.match-hud>div>strong{font-size:20px}}
@media(max-width:760px){.game-top{height:58px;padding:0 14px;gap:8px}.acre{font-size:10px;gap:7px}.acre>span{font-size:29px}.acre small,.volume-label{display:none}.top-actions{gap:6px}.top-actions .quiet{font-size:10px;padding:8px 9px}.game-layout{display:flex;flex-direction:column;min-height:0;padding:8px;gap:12px}.arena{height:620px;min-height:620px}.arena:before{background:linear-gradient(90deg,#fff6d8c2,#fff6d824),url('/arcade/assets/sunboman-cover.png') 59% 50%/cover}.attract-copy{padding:39px 25px}.attract-copy h1{font-size:105px;margin-top:34px}.attract-copy .eyebrow{font-size:7px}.attract-copy>p{font-size:25px}.hero-description{font-size:11px}.hero-stamp{margin-top:28px}.control-panel{width:100%;padding:28px;max-width:none}.control-panel h2{font-size:33px}.game-shell.playing .game-layout{padding:0 6px;gap:0;display:flex}.game-shell.playing .arena{order:2;height:calc(100svh - 262px);min-height:335px;border-radius:10px}.score-panel{order:1;display:flex;align-items:center;height:59px;padding:6px 2px;overflow:hidden}.score-panel>.eyebrow,.score-panel>h2,.score-panel>.muted,.power-guide,.score-note{display:none}.score-panel #scoreboard{display:flex;gap:5px;overflow:auto;scrollbar-width:none;width:100%}.sun-score{width:93px;min-width:93px;height:44px;padding:5px;grid-template-columns:19px minmax(0,1fr);gap:3px;margin:0;border:1px solid #d7d5b8;background:#f8f3df}.sun-orb{font-size:23px;grid-row:1/3}.sun-name{font-size:8px}.sun-name small{display:none}.sun-wins{text-align:left;font-size:8px;grid-column:2;letter-spacing:2px}.match-hud{padding:13px 11px;gap:8px;align-items:flex-start}.match-hud>div>span{font-size:6px}.match-hud>div>strong{font-size:19px}.storm-label{font-size:8px;max-width:104px;line-height:1.6;margin-top:10px}.time-block{min-width:45px}.time-block small{font-size:5px}.game-tip{font-size:5px;bottom:12px;left:12px;right:65px;text-align:left;letter-spacing:.07em}.match-menu{font-size:8px;min-height:25px;padding:5px 9px;bottom:6px;right:6px}.play-footer{height:145px;display:block;padding:9px 13px 8px;margin:0}.inventory{justify-content:center;gap:5px;flex-wrap:nowrap}.inventory .inv{padding:5px 7px;min-height:27px;font-size:8px;gap:4px}.inventory .inv b{font-size:12px}.touch-controls{display:flex;justify-content:space-between;align-items:center;margin-top:7px;gap:10px}.dpad{display:grid;grid-template-columns:repeat(3,32px);grid-template-rows:repeat(3,29px);gap:2px;touch-action:none;user-select:none}.dpad button{border:1px solid #3d716a38;background:#e6edda;color:#487367;border-radius:7px;touch-action:none;font-size:11px}.dpad button.pressed{background:#a4cbba;color:#fff}.dpad [data-dir=up]{grid-column:2}.dpad [data-dir=left]{grid-column:1;grid-row:2}.dpad>span{grid-column:2;grid-row:2;display:grid;place-items:center;color:#b4c3a1;font-size:22px}.dpad [data-dir=right]{grid-column:3;grid-row:2}.dpad [data-dir=down]{grid-column:2;grid-row:3}.touch-note{font:650 7px/1.8 ui-monospace,monospace;letter-spacing:.07em;color:#a7ae95;text-align:center}.touch-note b{color:#899f7c}#bomb-button{width:83px;height:78px;border:1px solid #dd984d;border-radius:23px;background:#f5bf67;color:#866131;box-shadow:0 4px 0 #d3934844;font:800 10px ui-monospace,monospace;touch-action:none;user-select:none}#bomb-button span{display:block;font-size:29px;line-height:1.2;margin-bottom:3px}#bomb-button.pressed{transform:translateY(3px);box-shadow:0 1px 0 #d3934844;background:#e7a44c}.game-shell.playing.menu-open .control-panel{top:70px;right:14px;width:calc(100% - 28px);max-height:calc(100svh - 88px)}.round-overlay h2{font-size:30px}.round-overlay>div{font-size:55px}.round-overlay p{font-size:10px}.spectator{bottom:39px;font-size:9px;padding:8px 12px}.event-toast{top:68px;font-size:10px;padding:9px 14px}.guide-grid{grid-template-columns:1fr;gap:20px}dialog{padding:34px 25px}dialog h2{font-size:28px}.result-card{padding:25px}.result-card h2{font-size:36px}.score-row{padding:12px 0;font-size:9px}.countdown{font-size:85px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body.reduced-motion *,body.reduced-motion *:before,body.reduced-motion *:after{animation:none!important;transition:none!important}
@media(min-width:761px){.game-shell.playing .score-panel{height:calc(100svh - 179px);min-height:420px;overflow-y:auto;scrollbar-width:thin;padding-bottom:15px}}