*{box-sizing:border-box}html{overflow-x:hidden}body{margin:0;background:#f8f4e9;color:#211b3c;font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #f7a34c;outline-offset:3px}.shell{max-width:1100px;margin:auto;padding:clamp(20px,4vw,48px) clamp(15px,4vw,36px) 70px}.eyebrow{font-size:.74rem;letter-spacing:.16em;font-weight:900;color:#6b50ad}.hero h1{font-size:clamp(3.2rem,7.7vw,6rem);line-height:1.02;letter-spacing:-.07em;margin:8px 0}.hero h1 em{color:#ef714b;font-family:Georgia,serif;font-weight:400}.hero p{margin:6px 0 23px;color:#777184;font-size:1.1rem}.modebar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}.modebar button{border:2px solid #dbd4e4;border-radius:17px;background:white;color:#392d60;min-height:76px;text-align:left;padding:12px 16px;font-size:1rem;font-weight:900}.modebar button small{display:block;font-size:.76rem;font-weight:600;color:#777184;margin-top:2px}.modebar button[aria-pressed=true]{border-color:#4a337b;background:#302251;color:white;box-shadow:4px 5px 0 #f5b75a}.modebar button[aria-pressed=true] small{color:#e1d8f2}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:18px 0}.stats>div{background:white;border:1px solid #e4dce8;border-radius:15px;padding:9px 14px;min-width:0}.stats small{display:block;font-size:.65rem;font-weight:900;letter-spacing:.08em;color:#806e92}.stats strong{font-size:1.5rem}.layout{display:grid;grid-template-columns:minmax(0,650px) minmax(255px,1fr);gap:20px;align-items:start}.game{background:#302251;color:white;border-radius:25px;padding:clamp(14px,2.5vw,23px);min-width:0;box-shadow:0 17px 34px #33245b33}.board-head{display:flex;justify-content:space-between;gap:10px;color:#ffdc9c;font-size:.76rem;font-weight:900;letter-spacing:.1em;padding-bottom:12px}canvas{display:block;width:min(100%,510px);height:auto;aspect-ratio:360/500;margin:0 auto;border:4px solid #c79859;border-radius:18px;background:#192450;touch-action:none}.meters{display:grid;grid-template-columns:72px 1fr;gap:10px 14px;align-items:center;margin:19px auto;max-width:540px}.meters label{font-size:.92rem;font-weight:900}.meters output{display:block;color:#ffd487;font-weight:800;font-size:.78rem}.meters input{width:100%;height:44px;accent-color:#f4ab59;touch-action:pan-x}.actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.actions button{border:2px solid #ad96c7;border-radius:13px;background:#4c3675;color:#fff;font-weight:850;min-height:54px;padding:9px 19px}.actions button.primary{background:#f5944b;border-color:#ffc88c;color:#261937;font-size:1.05rem}.actions button:disabled{opacity:.48;cursor:default}.shot-dots{display:flex;justify-content:center;gap:7px;margin:20px 0 8px}.shot-dots span{width:24px;height:24px;border:2px solid #d2b4e5;border-radius:50%;display:grid;place-items:center;font-size:14px}.shot-dots .made{background:#d9ef88;color:#271d42;border-color:#d9ef88}.shot-dots .missed{background:#7d628e}.shot-dots .current{border-color:#ffc46c;box-shadow:0 0 0 3px #ffc46c44}.message{text-align:center;color:#f9e8c0;font-weight:800;min-height:2.8em}.result{text-align:center;border-top:1px solid #8f77ae;margin-top:15px;padding:10px}.result h2{margin:6px}.result p{color:#fae0ab}.side{background:white;border:1px solid #e4dce8;border-radius:23px;padding:25px}.side h2{font-size:1.7rem;line-height:1.12;margin:8px 0 18px}.side p{color:#68637a}.side strong{color:#352754}.side .small{font-size:.87rem}.side a,.foot a{color:#6545a1;font-weight:850}.foot{color:#756e83;margin-top:25px}[hidden]{display:none!important}@media(max-width:850px){.modebar{grid-template-columns:repeat(2,minmax(0,1fr))}.layout{grid-template-columns:1fr}.side{margin-top:2px}}@media(max-width:590px){.modebar{grid-template-columns:1fr;gap:7px}.modebar button{min-height:57px;padding:8px 13px}.modebar button small{display:inline;margin-left:8px}.stats{gap:5px}.stats>div{padding:8px}.stats strong{font-size:1.2rem}.stats small{font-size:.56rem}.board-head{font-size:.62rem}.game{border-radius:19px}.actions button{flex:1;min-width:100px;padding:8px 10px}.actions #sound{flex:0 1 auto}.meters{grid-template-columns:58px 1fr;gap:6px 9px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Charge control and the fifth challenge mode. */
.modebar{grid-template-columns:repeat(3,minmax(0,1fr))}
.modebar button{font-size:.88rem;padding:11px}
.charge-label{font-size:.92rem;font-weight:900}
.charge-label output{display:block;color:#ffd487;font-size:.78rem}
.charge-track{height:22px;border:2px solid #bba4d5;border-radius:99px;background:#1c173a;overflow:hidden}
.charge-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#f2aa5b,#ffe08a);border-radius:99px;transition:width .045s linear}
.charge-hint{max-width:540px;margin:-5px auto 16px;text-align:center;color:#e1cde9;font-size:.85rem;line-height:1.4}
.actions #shoot{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.actions #shoot.charging{background:#ffe4a1;border-color:#fff0c5;box-shadow:0 0 0 4px #f5944b66}
@media(max-width:1050px){.modebar{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.modebar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:590px){.modebar{grid-template-columns:1fr}}