.cannon-page{--ink:#eef7ff;--muted:#8ba2b7;--cyan:#59efff;--lime:#bcff4d;--red:#ff4968;--panel:#0c1620;--line:rgba(117,215,230,.18);max-width:1480px;margin:0 auto 4rem;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.cannon-page button,.cannon-page input,.cannon-page select{font:inherit}.cannon-hero{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:end;padding:2rem 0 1.4rem;border-bottom:1px solid var(--line)}.cannon-back{align-self:start;color:var(--muted);text-decoration:none;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em}.cannon-kicker,.cannon-section-number{display:block;color:var(--cyan);font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.cannon-hero h1{margin:.3rem 0 0;font-size:clamp(2.8rem,7vw,6.6rem);font-weight:950;letter-spacing:-.075em;line-height:.82}.cannon-hero h1 em{color:transparent;font-style:normal;-webkit-text-stroke:1px var(--cyan);text-shadow:0 0 30px rgba(89,239,255,.3)}.cannon-hero p,.cannon-content-head p{margin:.9rem 0 0;color:var(--muted)}.cannon-hero-stats{display:flex;gap:1.8rem}.cannon-hero-stats span{display:grid;color:var(--muted);font-size:.65rem;text-transform:uppercase;letter-spacing:.1em}.cannon-hero-stats strong{color:var(--ink);font-size:1.1rem}.cannon-nav{display:flex;gap:.25rem;padding:.7rem 0 1.2rem;overflow:auto}.cannon-nav button,.cannon-board-tabs button{border:0;border-bottom:2px solid transparent;padding:.65rem .9rem;color:var(--muted);background:transparent;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}.cannon-nav button.is-active,.cannon-board-tabs button.is-active{border-color:var(--cyan);color:var(--cyan)}#soundToggle{margin-left:auto}.cannon-screen{display:none}.cannon-screen.is-active{display:block}.cannon-layout{display:grid;grid-template-columns:minmax(230px,310px) minmax(380px,1fr) minmax(250px,330px);gap:1rem}.cannon-panel,.cannon-stage-shell,.cannon-upgrade,.cannon-manual article,.cannon-profile-strip,.cannon-leaderboard{border:1px solid var(--line);background:linear-gradient(155deg,rgba(15,28,39,.98),rgba(7,14,21,.98));box-shadow:0 24px 70px rgba(0,0,0,.25)}.cannon-panel{padding:1.15rem}.cannon-panel h2{margin:.25rem 0 1rem;font-size:1.35rem}.cannon-toggle{display:grid;grid-template-columns:1fr 1fr;margin-bottom:1rem;border:1px solid var(--line);padding:.2rem}.cannon-toggle button,.cannon-difficulties button{border:0;background:transparent;color:var(--muted);padding:.65rem}.cannon-toggle button.is-active{color:#061016;background:var(--cyan);font-weight:900}.cannon-setup label,.cannon-readouts label{display:grid;gap:.5rem;margin:.7rem 0;color:var(--muted);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.cannon-setup input,.cannon-setup select{width:100%;min-height:48px;border:1px solid var(--line);border-radius:0;padding:.65rem;background:#071019;color:var(--ink)}.cannon-setup small{color:var(--muted)}.cannon-difficulties{display:grid;gap:.4rem;margin:.6rem 0 1rem}.cannon-difficulties button{display:grid;text-align:left;border:1px solid var(--line);padding:.65rem .75rem}.cannon-difficulties button.is-active{border-color:var(--lime);box-shadow:inset 3px 0 var(--lime);color:var(--ink)}.cannon-difficulties small{font-size:.68rem}.cannon-primary,.cannon-fire{width:100%;border:0;padding:.9rem 1rem;background:var(--lime);color:#091006;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.cannon-primary span{float:right}.cannon-message{min-height:1.3rem;margin:.7rem 0 0;color:var(--muted);font-size:.75rem}.cannon-stage-shell{overflow:hidden}.cannon-topbar,.cannon-playerbar{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;padding:.7rem .9rem;background:#08111a}.cannon-topbar>div{display:grid;color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em}.cannon-topbar strong{color:var(--red);font-size:.92rem}.cannon-turn{padding:.38rem .8rem!important;border:1px solid var(--cyan);color:var(--cyan)!important;text-align:center}.cannon-canvas-wrap{position:relative;overflow:hidden;aspect-ratio:3/4;background:#050b12}.cannon-canvas-wrap canvas{display:block;width:100%;height:100%;object-fit:contain}.cannon-stage-overlay{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:rgba(3,9,15,.68);backdrop-filter:blur(5px)}.cannon-stage-overlay[hidden]{display:none}.cannon-stage-overlay span{color:var(--cyan);font-size:.68rem;letter-spacing:.2em}.cannon-stage-overlay strong{font-size:2.4rem;letter-spacing:.15em}.cannon-stage-overlay small{color:var(--muted)}.cannon-pause{position:absolute;right:.65rem;top:.65rem;width:38px;height:38px;border:1px solid var(--line);background:rgba(5,11,18,.75);color:var(--ink)}.cannon-playerbar{grid-template-columns:auto 1fr}.cannon-avatar{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--lime);color:var(--lime);font-weight:900}.cannon-playerbar-main>div{display:flex;justify-content:space-between;gap:1rem;font-size:.75rem}.cannon-playerbar-main span{color:var(--muted)}.cannon-meter{height:5px;margin-top:.45rem;background:#1b2b34}.cannon-meter i{display:block;width:0;height:100%;background:var(--lime);box-shadow:0 0 14px var(--lime);transition:width .35s}.cannon-weapon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}.cannon-weapon{position:relative;min-height:54px;border:1px solid var(--line);background:#071019;color:var(--ink);font-size:.65rem}.cannon-weapon.is-active{border-color:var(--cyan);box-shadow:inset 0 -3px var(--cyan)}.cannon-weapon[disabled]{opacity:.32}.cannon-weapon small{display:block;color:var(--muted)}.cannon-readouts output{float:right;color:var(--ink);font-size:1rem}.cannon-readouts input{width:100%;accent-color:var(--cyan)}.cannon-weapon-info{min-height:54px;margin:.65rem 0;padding:.65rem;border-left:2px solid var(--cyan);background:rgba(89,239,255,.05);color:var(--muted);font-size:.72rem}.cannon-fire{display:flex;justify-content:space-between;align-items:center;background:var(--red);color:#fff;font-size:1.2rem}.cannon-fire:disabled{filter:grayscale(1);opacity:.45}.cannon-fire small{font-size:.58rem}.cannon-abilities{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin-top:.6rem}.cannon-abilities button{min-height:50px;border:1px solid var(--line);background:#0b1721;color:var(--ink);font-size:.65rem}.cannon-abilities small{display:block;color:var(--muted);font-size:.55rem}.cannon-content-head{max-width:740px;margin:1rem 0 1.5rem}.cannon-content-head h2{margin:.2rem 0;font-size:clamp(2rem,5vw,4rem);letter-spacing:-.04em}.cannon-profile-strip{padding:1rem;margin-bottom:1rem}.cannon-upgrade-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem}.cannon-upgrade{display:grid;gap:.8rem;padding:1rem}.cannon-upgrade>span{font-size:2rem;color:var(--cyan)}.cannon-upgrade h3{font-size:1rem}.cannon-upgrade p{min-height:48px;color:var(--muted);font-size:.75rem}.cannon-upgrade button,.cannon-secondary{border:1px solid var(--cyan);padding:.65rem;background:transparent;color:var(--cyan);font-size:.72rem;font-weight:800;text-transform:uppercase}.cannon-board-tabs{display:flex}.cannon-leaderboard{display:none;min-height:220px;padding:.6rem}.cannon-leaderboard.is-active{display:block}.cannon-rank-row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;padding:.8rem;border-bottom:1px solid var(--line)}.cannon-rank-row>strong{color:var(--cyan);font-size:1.2rem}.cannon-rank-row span{display:grid}.cannon-rank-row small{color:var(--muted)}.cannon-manual{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}.cannon-manual article{padding:1rem}.cannon-manual b{color:var(--cyan);font-size:2rem}.cannon-manual p{color:var(--muted);font-size:.85rem}.cannon-keymap{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem;color:var(--muted)}.cannon-keymap kbd{margin-right:.2rem;background:#10212d;border:1px solid var(--line)}.cannon-dialog{width:min(94vw,560px);border:1px solid var(--cyan);padding:1.5rem;background:#08121b;color:var(--ink);box-shadow:0 0 80px rgba(89,239,255,.2)}.cannon-dialog::backdrop{background:rgba(2,7,11,.82);backdrop-filter:blur(6px)}.cannon-dialog h2{font-size:3rem}.cannon-dialog-close{float:right;border:0;background:none;color:var(--muted);font-size:1.5rem}.cannon-result-score{color:var(--lime);font-size:4rem;font-weight:950}.cannon-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:1rem 0}.cannon-result-grid span{padding:.7rem;background:#101f2a;color:var(--muted);font-size:.7rem}.cannon-result-grid strong{display:block;color:var(--ink);font-size:1rem}.select2-container--default .select2-selection--single{height:48px!important;border:1px solid var(--line)!important;border-radius:0!important;background:#071019!important}.select2-selection__rendered{line-height:46px!important;color:var(--ink)!important}.select2-selection__arrow{height:46px!important}
@media(max-width:1100px){.cannon-layout{grid-template-columns:250px 1fr}.cannon-controls{grid-column:1/-1}.cannon-upgrade-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.cannon-page{margin-inline:-.75rem}.cannon-hero{grid-template-columns:1fr;padding-inline:1rem}.cannon-back{order:-1}.cannon-hero-stats{display:none}.cannon-nav{padding-inline:.5rem}.cannon-layout{grid-template-columns:1fr}.cannon-setup{order:1}.cannon-stage-shell{order:2}.cannon-controls{order:3}.cannon-canvas-wrap{max-height:74vh}.cannon-upgrade-grid,.cannon-manual{grid-template-columns:1fr}.cannon-content-head,.cannon-profile-strip,.cannon-upgrade-grid,.cannon-manual,.cannon-keymap,.cannon-board-tabs,.cannon-leaderboard{margin-inline:.7rem}.cannon-result-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}