:root{font-family:Nunito,system-ui,sans-serif;color:#f5dfb5;background:#201c32;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden;overscroll-behavior:none}button,select{font:inherit}button{color:#2c2343;background:#f7b35a;border:2px solid #3a284c;border-radius:10px;min-height:44px;padding:8px 14px;font-weight:900;cursor:pointer;box-shadow:0 3px #141526}button:hover{background:#ffca7c}button:active,button.held{transform:translateY(2px);box-shadow:0 1px #141526;background:#70cbb6}button:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid #89e1ca;outline-offset:2px}[hidden]{display:none!important}main{height:100dvh;max-width:1500px;margin:auto;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);background:#2b2540}header{height:58px;flex-shrink:0;padding:5px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#27213c}header strong{font-size:16px;letter-spacing:1px;line-height:1.1}header strong span{display:block;font-size:11px;letter-spacing:3px;color:#eea65b}nav{display:flex;gap:7px}nav button{font-size:12px;padding:5px 9px;background:#ddd0e5}#hud{height:60px;flex-shrink:0;display:flex;justify-content:space-around;align-items:center;background:#372a48;border-bottom:3px solid #df9149;gap:6px}#hud>div{display:flex;gap:8px;align-items:center;width:32%;justify-content:center}#hud strong{font-size:30px;font-variant-numeric:tabular-nums;line-height:1}#hud small{font-size:12px;max-width:65%;line-height:1.15;font-weight:900;color:#f8d693}#hud .clock{flex-direction:column;gap:3px}#hud .clock strong{font-size:22px}#hud .clock small{font-size:10px;max-width:100%;text-align:center}#field{position:relative;flex:1;min-height:100px;overflow:hidden;background:#38304e}canvas{display:block;width:100%;height:100%;touch-action:none;image-rendering:pixelated}#banner{position:absolute;left:50%;top:37%;transform:translate(-50%,-50%);color:#ffe4a7;text-shadow:0 3px #2c2343;font-weight:1000;font-size:clamp(22px,6vw,42px);pointer-events:none;white-space:nowrap}#call{position:absolute;bottom:45px;left:50%;transform:translateX(-50%);background:#27213cdd;border-radius:10px;padding:4px 9px;font-weight:900;font-size:12px;pointer-events:none;white-space:nowrap}#call:empty{display:none}#timing{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);width:180px;pointer-events:none;text-align:center}#timing small{background:#27213cdd;border-radius:5px;font-size:11px;padding:2px 7px;color:#ffe4a7}#timing>div{height:12px;background:#181a2b;border:2px solid #b9a2c5;border-radius:5px;position:relative;margin-top:4px;overflow:hidden}#green{position:absolute;top:0;bottom:0;background:#78d5ac}#charge{position:absolute;top:0;bottom:0;left:0;background:#ffe6a9aa;border-right:3px solid #fff}#controls{flex-shrink:0;background:#27213c;padding:8px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));display:flex;gap:12px;justify-content:center;user-select:none;touch-action:none}.seat{flex:1;max-width:530px}.seat>small{display:block;font-size:10px;color:#f3c384;margin:0 0 5px;text-align:center;font-weight:900}.buttons{display:flex;justify-content:space-between;gap:10px;align-items:center}.buttons button{width:85px;height:63px;font-size:12px;padding:4px;touch-action:none;overflow-wrap:anywhere}.dpad{display:flex;gap:8px}.dpad button{width:62px;font-size:22px;background:#afa6c9}.action{background:#7ac7b0!important;min-width:85px}.buttons>button[data-action=jump]{background:#f1c77c}#notice{margin:0;font-size:11px;text-align:center;line-height:1.3;background:#35283e;color:#f9d491;padding:0 4px;padding-bottom:env(safe-area-inset-bottom)}dialog{width:min(630px,94vw);max-height:92dvh;border:2px solid #9c7dab;border-radius:20px;box-shadow:0 15px 70px #0008;padding:22px;background:#332941;color:#f6dfbc;overflow:auto}dialog::backdrop{background:#171629dc}dialog h2{font-size:25px;margin:0 0 12px}dialog p{font-size:14px;line-height:1.55}dialog>button{margin:5px}#menu{padding:0 0 16px}#menu>p,#menu>details{margin:12px 22px}.hero{height:210px;position:relative;overflow:hidden;background:#432c50}.hero>img{width:100%;height:100%;object-fit:cover}.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#211b36de,transparent 85%)}.hero>div{position:absolute;left:22px;bottom:16px;color:#ffe9b9;z-index:1;text-shadow:0 3px #201c32}.hero small{font-size:10px;letter-spacing:3px}.hero h1{font-size:42px;line-height:1;margin:6px 0;letter-spacing:-1px}.actions{padding:0 22px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.actions #continue{grid-column:span 2}.settings{padding:14px 22px 0;display:grid;grid-template-columns:1fr 1fr;gap:9px;font-size:12px}.settings label{display:flex;gap:6px;justify-content:space-between;align-items:center}.settings label:has(input){justify-content:flex-start}select{background:#f1e4ce;color:#2c2343;border-radius:7px;border:1px solid #af98b7;min-height:36px;padding:3px;max-width:135px}input[type=checkbox]{accent-color:#65bcaa;width:19px;height:19px}#players{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.player{display:grid;grid-template-columns:80px 1fr;gap:6px;text-align:left;padding:9px;background:#ddd0e5;min-height:130px}.player img{width:78px;height:112px;object-fit:contain;image-rendering:pixelated;grid-row:span 4}.player strong{font-size:16px}.player small{font-size:11px;line-height:1.4}.player.selected{outline:3px solid #78cfb4;background:#ade3ca}.player.locked{filter:saturate(.35);opacity:.7}#contracts p{font-size:13px;margin:7px 0}summary{min-height:30px;font-size:13px;font-weight:900;cursor:pointer}details{margin:12px 0}#rosterdialog footer{position:sticky;bottom:-22px;display:flex;justify-content:space-between;gap:8px;padding:12px 0;background:#332941;border-top:1px solid #ad879c;z-index:2}#rosterdialog footer button{flex:1;font-size:12px}#opponentSelect{display:flex;align-items:center;gap:12px;font-size:13px}#resultPlayer{float:right;width:100px;height:160px;object-fit:contain;image-rendering:pixelated;margin-left:12px}body[data-motion=false] *{transition:none!important;scroll-behavior:auto!important}
@media(max-width:550px){header{height:52px;padding:4px 8px;gap:4px}header strong{font-size:12px}header strong span{font-size:9px;letter-spacing:1.5px}nav{gap:4px}nav button{padding:3px 7px;font-size:10px}#hud{height:54px}#hud>div{gap:5px}#hud strong{font-size:25px}#hud small{font-size:10px}#controls{padding:8px 8px 10px;gap:7px}.buttons{gap:6px}.buttons button{width:65px;height:59px;font-size:11px}.dpad{gap:5px}.dpad button{width:54px;font-size:20px}.action{min-width:71px}body[data-local=true] #controls{flex-direction:column}.seat{max-width:none}dialog{padding:16px;border-radius:16px}.hero{height:172px}.hero h1{font-size:34px}.hero>div{left:16px;bottom:12px}.actions,.settings{padding-left:16px;padding-right:16px}.actions button{font-size:12px;padding:6px}.settings{font-size:11px}.settings select{max-width:98px}#menu>p,#menu>details{margin:10px 16px}#players{grid-template-columns:1fr}.player{min-height:124px}#rosterdialog footer{bottom:-16px}#resultPlayer{width:78px;height:124px}}
@media(max-height:500px) and (min-width:600px){header{height:44px}#hud{height:42px}#hud strong{font-size:25px}#hud .clock strong{font-size:18px}#controls{padding:4px 12px 7px}.seat>small{margin-bottom:2px}.buttons button{height:44px;width:77px}.dpad button{width:48px}.action{min-width:77px}body[data-local=true] .buttons{gap:6px}.hero{height:130px}.hero h1{font-size:30px}.actions{grid-template-columns:1fr 1fr 1fr}.actions #continue{grid-column:auto}.settings{grid-template-columns:1fr 1fr 1fr}dialog{max-height:94dvh}}

#guides{height:34px;flex-shrink:0;display:flex;justify-content:center;background:#27213c;padding:2px 0}#timing{position:static;transform:none;width:180px}#timing small{font-size:10px;padding:0 4px;line-height:12px}#timing>div{height:9px;margin-top:2px}#call{top:9px;bottom:auto}