:root{--ink:#e8f0ec;--muted:#91a29d;--panel:#101b1d;--line:#2a3939;--blue:#40c8ff;--red:#ff625c;--amber:#efb74a}*{box-sizing:border-box}html,body{min-height:100%;color:var(--ink);background:#071012;margin:0}body{font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}button,input{font:inherit}button{color:inherit}.game-shell{background:radial-gradient(circle at 50% 0,#173034 0,#091416 44%,#060c0e 100%);min-height:100vh;padding-bottom:18px}.topbar{background:#060d0ff0;border-bottom:1px solid #233234;grid-template-columns:1fr auto 1fr;align-items:center;height:72px;padding:0 28px;display:grid}.brand{align-items:center;gap:12px;display:flex}.brand-mark{width:38px;height:38px;color:var(--amber);letter-spacing:1px;border:1px solid #5c7775;border-radius:50%;place-items:center;font-size:12px;font-weight:900;display:grid;box-shadow:inset 0 0 0 4px #0c181a}.brand strong{letter-spacing:2px;font-size:15px;display:block}.brand small{color:#728783;letter-spacing:2.2px;font-size:9px}.scoreboard{text-align:center;grid-template-columns:38px 14px 38px;align-items:center;font-size:26px;font-weight:900;display:grid}.scoreboard .blue{color:var(--blue)}.scoreboard .red{color:var(--red)}.scoreboard small{color:#81928f;letter-spacing:1.5px;text-transform:uppercase;grid-column:1/4;font-size:9px;font-weight:500}.wind{text-align:right;justify-self:end}.wind span{color:#6f817e;letter-spacing:2px;font-size:9px;display:block}.wind b{color:var(--amber);font-size:17px}.battlefield-wrap{border-bottom:1px solid #2b3939;height:min(61vh,680px);min-height:430px;position:relative;overflow:hidden}.battlefield-canvas,.battlefield-canvas canvas{cursor:grab;width:100%;height:100%;display:block}.battlefield-canvas canvas:active{cursor:grabbing}.battlefield-canvas.webgl-unavailable{color:#9fb0ac;text-align:center;letter-spacing:1px;background:radial-gradient(circle at 50% 20%,#173035,#071012 70%);place-items:center;padding:30px;font-size:12px;display:grid}.battlefield-loading{color:#90a39e;letter-spacing:1.4px;text-transform:uppercase;background:radial-gradient(circle at 50% 20%,#173035,#071012 70%);place-items:center;font-size:11px;display:grid}.phase-pill{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;letter-spacing:1.5px;text-transform:uppercase;pointer-events:none;background:#050c0eb8;border:1px solid #9ab8b147;border-radius:2px;min-width:260px;padding:10px 18px;font-size:11px;font-weight:700;position:absolute;top:18px;left:50%;transform:translate(-50%);box-shadow:0 12px 30px #00000038}.phase-pill i{background:var(--amber);width:6px;height:6px;box-shadow:0 0 10px var(--amber);border-radius:50%;margin-right:9px;display:inline-block}.camera-help{color:#9db0aa;letter-spacing:.8px;text-transform:uppercase;pointer-events:none;background:#040a0cb3;border:1px solid #a3b9b429;gap:14px;padding:8px 11px;font-size:9px;display:flex;position:absolute;bottom:16px;left:18px}.room-code{cursor:pointer;letter-spacing:1px;background:#051114cc;border:1px solid #40c8ff73;padding:8px 12px;font-size:9px;position:absolute;bottom:16px;right:18px}.room-code b{color:var(--blue);letter-spacing:2px;margin-left:6px;font-size:15px}.room-code span{color:#78928f;margin-top:2px;display:block}.lobby-card{border:1px solid #2d4040;border-top:2px solid var(--amber);background:linear-gradient(160deg,#152122fa,#091113fa);width:min(940px,100% - 32px);margin:-1px auto 0;padding:24px 28px;position:relative;box-shadow:0 18px 50px #00000059}.lobby-title{align-items:center;gap:14px;margin-bottom:18px;display:flex}.lobby-title>span{color:#566967;font:900 34px/1 Georgia,serif}.lobby-title p{color:var(--amber);letter-spacing:2.3px;margin:0 0 3px;font-size:9px}.lobby-title h1{margin:0;font:700 24px/1.1 Georgia,serif}.field-label,.join-card label{color:#82938f;letter-spacing:1.6px;flex-direction:column;gap:6px;font-size:9px;display:flex}.field-label input,.join-card input{color:#fff;background:#091214;border:1px solid #334645;border-radius:2px;outline:none;padding:11px 12px}.field-label input:focus,.join-card input:focus{border-color:var(--amber);box-shadow:0 0 0 2px #efb74a1a}.mode-grid{grid-template-columns:1.2fr 1fr 1.2fr;gap:12px;margin-top:16px;display:grid}.mode-card{cursor:pointer;text-align:left;background:#111d1f;border:1px solid #334744;min-height:84px;padding:14px;transition:all .2s}.mode-card:hover{border-color:#779087;transform:translateY(-2px)}.mode-card.primary{background:linear-gradient(135deg,#2a251b,#121d1d);border-color:#8d713a}.mode-icon{float:left;width:38px;height:38px;color:var(--amber);border:1px solid #60726e;border-radius:50%;place-items:center;margin-right:11px;font-size:22px;display:grid}.mode-card strong{margin:3px 0 5px;font-size:13px;display:block}.mode-card small{color:#7f918d;font-size:10px}.join-card{background:#0d181a;border:1px solid #314342;grid-template-columns:1fr auto;align-items:end;gap:8px;padding:11px;display:grid}.join-card input{text-transform:uppercase;letter-spacing:3px;width:100%;font-weight:800}.join-card button{cursor:pointer;background:#253431;border:1px solid #556b67;height:39px;padding:0 13px;font-size:11px}.join-card button:disabled,.mode-card:disabled{opacity:.45;cursor:wait}.control-deck{grid-template-columns:1fr 1fr;gap:14px;width:min(1180px,100% - 28px);margin:14px auto 0;display:grid;position:relative}.player-controls{--player:var(--blue);border:1px solid #2c3e3d;border-top:2px solid var(--player);background:linear-gradient(155deg,#111d1ffa,#081012fa);grid-template-columns:145px 1fr 1fr 112px;align-items:center;gap:18px;padding:14px 16px;display:grid}.player-controls.player-2{--player:var(--red)}.player-name{align-items:center;gap:10px;display:flex}.player-name>span{border:1px solid var(--player);width:40px;height:40px;color:var(--player);border-radius:50%;place-items:center;font-weight:900;display:grid}.player-name small{color:#718582;letter-spacing:1.4px;font-size:8px;display:block}.player-name strong{text-overflow:ellipsis;margin-top:3px;font-size:13px;display:block;overflow:hidden}.player-controls label>span{color:#7f918e;letter-spacing:1.2px;justify-content:space-between;font-size:8px;display:flex}.player-controls label b{color:var(--player);font-size:12px}.player-controls input{width:100%;accent-color:var(--player);cursor:pointer;margin-top:9px}.player-controls .wheel-control{cursor:ns-resize;border:1px solid #0000;border-radius:3px;margin:-7px -8px -5px;padding:7px 8px 5px;transition:border-color .18s,background .18s}.player-controls .wheel-control:hover{border-color:color-mix(in srgb,var(--player) 36%,transparent);background:color-mix(in srgb,var(--player) 6%,transparent)}.player-controls .wheel-control:has(input:disabled){cursor:not-allowed;opacity:.58}.player-controls>button{border:1px solid var(--player);color:var(--player);cursor:pointer;letter-spacing:1px;background:#ffffff0a;padding:11px 8px;font-size:10px;font-weight:900}.player-controls>button.ready{color:#071012;background:var(--player)}.player-controls>button:disabled{opacity:.48;cursor:not-allowed}.opponent-card{border:1px solid #423538;border-top:2px solid var(--red);background:#15191a;justify-content:space-between;align-items:center;padding:20px;display:flex}.opponent-card.p1{border-top-color:var(--blue)}.opponent-card span{color:#7e8c89;letter-spacing:2px;font-size:9px}.opponent-card strong{font-size:16px}.opponent-card i{color:#9a7774;letter-spacing:1.4px;font-size:9px;font-style:normal}.opponent-card i.ready{color:#75c68c}.restart-button,.exit-button{border:1px solid var(--amber);color:var(--amber);cursor:pointer;letter-spacing:1px;background:#2a2419;grid-column:1/3;justify-self:center;padding:10px 24px;font-weight:800}.exit-button{color:#869895;background:0 0;border-color:#394b49;padding:7px 18px;font-size:10px}.error-message{color:#ff938c;margin:12px 0 0;font-size:11px}.deck-error{text-align:center;grid-column:1/3}@media (width<=900px){.battlefield-wrap{height:52vh;min-height:370px}.mode-grid{grid-template-columns:1fr}.player-controls{grid-template-columns:120px 1fr 1fr}.player-controls>button{grid-column:1/4}.camera-help{display:none}.control-deck{grid-template-columns:1fr}.restart-button,.exit-button,.deck-error{grid-column:1}.opponent-card{min-height:76px}.topbar{padding:0 14px}.brand strong{font-size:12px}.brand small{display:none}}@media (width<=600px){.topbar{grid-template-columns:1fr auto;height:62px}.wind{display:none}.scoreboard{font-size:20px}.brand-mark{width:32px;height:32px}.battlefield-wrap{min-height:350px}.phase-pill{min-width:220px;font-size:9px;top:10px}.lobby-card{padding:18px 16px}.lobby-title h1{font-size:20px}.player-controls{grid-template-columns:1fr 1fr;gap:12px;padding:12px}.player-name,.player-controls>button{grid-column:1/3}.room-code{bottom:10px;right:10px}.control-deck{width:calc(100% - 18px)}}