:root{font-family:Arial,Helvetica,sans-serif;color:#f0f2e8;background:#101b25;--mint:#73cdb8;--gold:#ffcc73;--line:#314552;--hero:#73cdb8}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;font-size:12px;font-weight:800;letter-spacing:1px;min-height:48px}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid var(--mint);outline-offset:4px}.hidden{display:none!important}.brand{height:88px;max-width:1400px;padding:0 48px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand a{font-weight:950;font-size:25px;color:var(--gold);text-decoration:none;letter-spacing:-1px}.brand span{font:10px monospace;letter-spacing:2px;color:#9db0bb;margin-left:18px}.online{font:10px monospace;letter-spacing:2px;color:#b5c5c9}.online i{display:inline-block;background:var(--mint);width:6px;height:6px;border-radius:50%;margin-right:8px}.page{max-width:1304px;margin:0 auto;padding:44px 24px}.eyebrow{font:10px monospace;letter-spacing:2px;color:var(--mint)}h1{font-size:clamp(40px,5vw,66px);line-height:1.04;letter-spacing:-3px;margin:20px 0}h1 em{font-style:normal;color:var(--gold)}h2{letter-spacing:-1px}.intro{font-size:15px;line-height:1.7;color:#9eb1bc;margin:0 0 32px}.home-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;max-width:1000px}.game-card,.join-card{border:1px solid var(--line);background:#15232f}.card-top{display:flex;justify-content:space-between;padding:16px 22px;font:10px monospace;letter-spacing:1px}.game-art{height:220px;background:#284b52;position:relative;overflow:hidden}.game-art h2{position:absolute;left:24px;top:12px;margin:0;color:#ffcc73;font-size:62px;line-height:.84;letter-spacing:-4px;transform:rotate(-4deg);text-shadow:4px 4px #101b25}.sun{position:absolute;border-radius:50%;background:#e3ad67;width:130px;height:130px;right:28px;top:24px}.skyline{position:absolute;inset:40px 0 0;background:repeating-linear-gradient(90deg,transparent 0 38px,#1c383e 38px 82px,transparent 82px 104px);clip-path:polygon(0 40%,15% 20%,28% 45%,43% 5%,58% 40%,75% 12%,100% 50%,100% 100%,0 100%)}.ground{height:28px;background:repeating-linear-gradient(90deg,#a17b50 0 22px,#604b38 22px 25px);border-top:6px solid #94b16d;position:absolute;bottom:0;width:100%}.pixel-hero{position:absolute;bottom:28px;width:24px;height:34px;background:var(--mint);box-shadow:0 -16px 0 -2px #efbf96,0 -24px 0 -2px #73cdb8,-7px 4px 0 -1px #73cdb8,22px 1px 0 -6px #eee4c3,0 8px #182732}.h1{right:154px}.h2{right:112px;background:#e1b766;transform:scale(1.2)}.h3{right:70px;background:#91a8ed}.h4{right:28px;background:#dc8fc6}.card-body{padding:22px}.card-body h3{font-size:17px;margin:0 0 8px}.card-body p,.join-card p{color:#a5b8c0;font-size:13px;line-height:1.7}.primary,.secondary{padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--gold);color:#14232b;min-height:52px}.card-body .primary{width:100%;margin:20px 0 10px}.card-body small{font-size:10px;color:#839aa8}.join-card{padding:28px}.join-card h2{font-size:30px;margin:16px 0 8px}.join-card label{display:block;font:10px monospace;letter-spacing:1px;color:#a5b8c0;margin:20px 0 9px}.join-card input{width:100%;padding:13px 14px;background:#101b25;color:#fff;border:1px solid #3a5360;border-radius:0;min-height:48px}.join-card #code{font:24px monospace;letter-spacing:6px;text-transform:uppercase}.secondary{background:var(--mint);width:100%;margin-top:22px}.steps{border-top:1px solid var(--line);margin-top:24px;padding-top:20px;font:9px monospace;letter-spacing:1px;color:#7f9ca8}.quiet{background:transparent;border:1px solid var(--line);color:#b9cbd1;padding:12px 16px;font-size:10px}.screen-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:16px}.screen-title h2{font-size:30px;margin:10px 0 0}.screen-tools{display:flex;gap:8px}.screen-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:20px}.stage{position:relative;border:1px solid var(--line);min-width:0;overflow:hidden;background:#233e4d}canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.invite{border:1px solid var(--line);background:#15232f;padding:20px;text-align:center}.invite strong{display:block;font:34px monospace;letter-spacing:4px;margin:16px 0;color:var(--gold)}.invite img{width:100%;max-width:190px;background:#fff}.invite p{font-size:12px;line-height:1.7;color:#b6c9cf}.invite a{display:block;font:11px monospace;color:var(--mint);overflow-wrap:anywhere;line-height:1.6}.invite button{width:100%;margin:16px 0}.invite small{display:block;color:#819aa7;font-size:10px;line-height:1.6}.screen-note{font-size:12px;color:#829ca8}#lobby-overlay{position:absolute;inset:0;background:#142630ed;padding:36px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}#lobby-overlay h2{font-size:40px;margin:14px 0}#lobby-overlay p{font-size:12px;color:#9eb5bf}#roster{display:flex;gap:10px;margin:16px 0;flex-wrap:wrap;justify-content:center}.player-slot{border:1px solid var(--line);padding:14px;width:130px;background:#172f3b}.player-slot b,.player-slot span{display:block;font-size:12px;margin:6px 0}.player-slot small{font-size:10px;color:#a9c6c2}.slot-empty{opacity:.5}#start-hint{margin-bottom:0}.hero-choice{background:#192e3c;border:1px solid var(--line);padding:24px;color:#fff;min-height:110px}.hero-choice b,.hero-choice small{display:block;margin:8px 0}.hero-choice.selected{border:2px solid var(--hero);background:#233d49}.hero-choice .avatar{font-size:28px;color:var(--hero)}#hero-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:28px 0;max-width:850px}#controller-lobby h1{font-size:48px}#waiting{font-size:13px;color:#a8bcc5}#notice{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);max-width:90vw;background:#ffcc73;color:#10242c;padding:14px 22px;font-size:13px;font-weight:bold;z-index:20;display:none}#notice.visible{display:block}#rotate{display:none}.controlling{overflow:hidden;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}.controlling>.brand{display:none}#gamepad{height:100dvh;padding:env(safe-area-inset-top,12px) max(env(safe-area-inset-right),20px) env(safe-area-inset-bottom,12px) max(env(safe-area-inset-left),20px);background:radial-gradient(ellipse at 20% 50%,#203e49,#101b25 70%);display:flex;flex-direction:column}.pad-header{height:65px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:14px}.pad-header b{color:var(--hero);letter-spacing:2px;font-size:18px}.pad-header span{font:10px monospace;color:#9bb4bd;margin-left:15px}#health{color:var(--hero);font-size:24px;letter-spacing:3px}.pad-body{display:flex;align-items:center;justify-content:space-between;flex:1;min-height:0;gap:24px}#joystick{position:relative;flex-shrink:0;width:clamp(150px,29vw,250px);height:clamp(150px,29vw,250px);border:1px solid #456575;border-radius:50%;touch-action:none;background:#1b333f88;margin:10px 30px}.stick-ring{position:absolute;inset:18%;border:1px dashed #4c6c79;border-radius:50%;display:flex;justify-content:space-between;align-items:center;color:#88aab5;padding:8px}#stick{position:absolute;left:50%;top:50%;width:35%;height:35%;background:var(--hero);border:5px solid #ffffff20;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 6px 0 #0004;pointer-events:none}#joystick small{position:absolute;bottom:-24px;left:0;right:0;text-align:center;font:9px monospace;letter-spacing:3px;color:#96b0b9}#actions{display:grid;grid-template-columns:repeat(2,minmax(95px,150px));grid-template-rows:repeat(2,minmax(75px,100px));gap:12px;margin:10px 20px}.action{border:1px solid #52656b;border-radius:24px;background:#203745;color:#d4e5e7;touch-action:none;position:relative;padding:8px;font-size:11px}.action i{display:block;font-style:normal;font-size:32px;margin-bottom:4px}.action.primary-action{grid-row:1/3;background:var(--gold);color:#182832;border-color:#ffe1a4;font-size:15px}.action.primary-action i{font-size:50px}.action.pressed{filter:brightness(1.4);transform:scale(.96)}.action.cooling{opacity:.5}.pad-footer{height:30px;display:flex;justify-content:space-between;align-items:center;font:9px monospace;letter-spacing:1px;color:#849eac}.controller-won .pad-body,.no-host .pad-body{opacity:.35;pointer-events:none}
@media(max-width:800px){.brand{padding:0 20px;height:70px}.brand span{display:none}.page{padding:30px 20px}.home-grid{grid-template-columns:1fr}.screen-layout{grid-template-columns:1fr}.invite{display:grid;grid-template-columns:1fr 120px;gap:8px;align-items:center}.invite img{grid-column:2;grid-row:1/5;width:120px}.invite strong{font-size:28px}.invite p{margin:0}.invite small{grid-column:1/3}.screen-title{flex-wrap:wrap}.screen-title h2{font-size:24px}#lobby-overlay{padding:15px}#lobby-overlay h2{font-size:26px}.player-slot{padding:6px;width:95px}#roster{margin:4px 0}#hero-picker{grid-template-columns:repeat(2,1fr)}#joystick{margin:10px 8px}#actions{margin:0 6px;grid-template-columns:repeat(2,minmax(80px,125px));grid-template-rows:repeat(2,minmax(65px,85px))}.pad-header{height:52px}.pad-header span{font-size:9px}.pad-header b{font-size:15px}#health{font-size:18px}}
@media(orientation:portrait){.controlling #rotate{display:block;position:fixed;bottom:40px;left:10px;right:10px;text-align:center;color:var(--gold);font-size:11px;pointer-events:none}.pad-body{flex-direction:column;justify-content:center;gap:50px}#joystick{width:180px;height:180px}#actions{grid-template-columns:repeat(2,120px);grid-template-rows:repeat(2,75px)}.pad-header span{display:block;margin:5px 0}.pad-footer{font-size:8px}#lobby-overlay h2{font-size:20px}#lobby-overlay p{font-size:10px}.player-slot{width:70px;padding:3px}.player-slot span{font-size:9px}#start-btn{min-height:36px;padding:8px 14px;font-size:10px}#lobby-overlay .eyebrow{display:none}}