:root{color-scheme:dark;--ink:#eefaff;--cyan:#19dbff;--navy:#061323;--panel:#123455;--gold:#ffd34c;--tile:48px;font-family:"Trebuchet MS","Microsoft YaHei",sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;overflow:hidden;background:#020914;color:var(--ink)}
body{background:radial-gradient(circle at 50% 12%,#183c61 0,#07182d 38%,#020914 78%)}
button,input{font:inherit}
button{color:inherit}
.page-shell{height:100vh;display:grid;place-items:center;padding:10px}
.game-frame{width:min(1180px,100%);border:3px solid #49cdf3;border-radius:22px;overflow:hidden;background:#07182d;box-shadow:0 0 0 6px #102d4a,0 22px 70px #000c;position:relative}
.top-strip{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:linear-gradient(#2378a8,#0d416b);border-bottom:3px solid #56dcff;text-shadow:0 2px 2px #00395d}
.brand{display:flex;gap:10px;align-items:center;font-size:22px;font-weight:1000;letter-spacing:2px}
.brand-bubble{width:28px;height:28px;border-radius:50%;display:block;background:radial-gradient(circle at 34% 28%,#fff 0 10%,#78ecff 12%,#22b9f2 48%,#0873bc 74%);border:2px solid #bdf8ff;box-shadow:inset -4px -6px 8px #00488a88,0 2px 5px #002b4e}
.round-readout{display:flex;gap:18px;align-items:center;font-size:14px}.round-readout strong{font-size:19px;color:var(--gold)}
.icon-button,.help-bar button{border:1px solid #69dcff;background:#0c3154;border-radius:12px;padding:7px 11px;cursor:pointer}
.play-layout{display:grid;grid-template-columns:178px 1fr;min-height:624px;background:#06111e}
.hud{padding:9px;background:linear-gradient(90deg,#0b385e,#0a2440);border-right:3px solid #3fb8e4;display:flex;flex-direction:column;gap:8px}
.player-card{position:relative;min-height:140px;border-radius:17px;padding:10px 8px 8px;border:3px solid var(--pc);background:linear-gradient(145deg,color-mix(in srgb,var(--pc) 45%,#16365d),#08192d 72%);box-shadow:inset 0 0 20px #0007,0 3px 0 #001b2c}
.player-card.dead{filter:grayscale(.95);opacity:.46}.player-card .tag{position:absolute;top:7px;left:8px;font-size:11px;font-weight:900;color:#06233b;background:var(--pc);padding:2px 7px;border-radius:8px;z-index:2}
.portrait{width:74px;height:70px;margin:3px auto 5px;background-image:url("assets/bubble-atlas.png");background-size:400% 400%;filter:drop-shadow(0 4px 2px #00152d);background-position:var(--portrait)}
.player-card h3{text-align:center;margin:0 0 5px;font-size:13px}.stats{display:flex;justify-content:center;gap:5px}.stat{min-width:42px;padding:3px 5px;text-align:center;border-radius:8px;background:#061525aa;font-size:10px}.stat b{display:block;color:#fff;font-size:14px}
.stage-wrap{position:relative;overflow:hidden;background:#020812}
#gameCanvas{display:block;width:100%;height:auto;max-height:calc(100vh - 128px);object-fit:contain;image-rendering:auto;touch-action:none;background:#071829}
.modal-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(500px,88%);padding:26px 30px;border-radius:25px;text-align:center;background:linear-gradient(155deg,#124e78ef,#07182df5 72%);border:3px solid #65e3ff;box-shadow:0 0 0 7px #0b2947cc,0 18px 70px #000d;backdrop-filter:blur(5px);z-index:8}
.modal-card h1,.modal-card h2{margin:5px 0 8px;color:#fff;font-size:42px;letter-spacing:2px;text-shadow:0 4px 0 #075a8e,0 7px 12px #000}.modal-card h2{font-size:34px}.modal-card p{color:#c8efff;line-height:1.55;margin:8px auto 18px;max-width:420px}.tiny-kicker,.result-badge{font-weight:900;letter-spacing:3px;color:#82eaff;font-size:11px}
.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.choice{padding:10px;border:2px solid #34769b;border-radius:14px;background:#0a2845;cursor:pointer}.choice span{display:block;font-weight:900;font-size:18px}.choice small{color:#83a9c2}.choice.active{border-color:#ffe459;background:linear-gradient(#7d6720,#342b17);box-shadow:0 0 15px #ffd84b66}
.range-label{display:block;margin:14px}.range-label input{width:100%;accent-color:#52ddff}.range-label strong{color:#ffe461}.primary-button,.secondary-button{width:100%;border:0;border-radius:15px;padding:13px;margin-top:10px;font-weight:1000;font-size:18px;cursor:pointer}.primary-button{color:#072136;background:linear-gradient(#fff06e,#ffb51e);box-shadow:0 5px 0 #a55700}.primary-button:active{transform:translateY(3px);box-shadow:0 2px 0 #a55700}.secondary-button{border:2px solid #4ca8d0;background:#0b2b49}.controls-line{font-size:11px;color:#8fbed3;margin-top:18px}.controls-line kbd{padding:3px 6px;border-radius:5px;background:#061525;border:1px solid #397395}
.hidden{display:none!important}.result-stats{display:flex;justify-content:center;gap:8px}.result-stats span{background:#061525;border-radius:10px;padding:8px 13px;font-size:12px}.result-stats b{display:block;font-size:20px;color:#ffe562}.result-badge{display:inline-block;padding:5px 9px;background:#0b233b;border-radius:8px}.toast{position:absolute;left:50%;top:18px;transform:translateX(-50%) translateY(-20px);opacity:0;padding:8px 15px;border-radius:13px;background:#061525dd;border:2px solid #65e3ff;font-weight:900;z-index:6;transition:.2s}.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.help-bar{height:43px;display:flex;align-items:center;gap:22px;padding:0 14px;background:#0d3a60;border-top:2px solid #2e88b4;font-size:11px;color:#9dd4ea}.help-bar span:before{content:"◆";color:#ffd64d;margin-right:6px}.help-bar button{margin-left:auto;padding:5px 9px;font-size:11px}
.touch-controls{display:none;pointer-events:none;position:absolute;inset:0;z-index:7}.touch-controls button{pointer-events:auto;touch-action:none;user-select:none;border:2px solid #9cecff88;background:#0b4168c9;box-shadow:inset 0 2px 8px #fff4;border-radius:14px}
.dpad{position:absolute;left:18px;bottom:18px;width:150px;height:150px}.dpad button{position:absolute;width:52px;height:52px}.dpad .up{left:49px;top:0}.dpad .left{left:0;top:49px}.dpad .down{left:49px;top:98px}.dpad .right{left:98px;top:49px}.bomb-button{position:absolute;right:25px;bottom:28px;width:88px;height:88px;border-radius:50%!important}.bomb-button span{display:block;width:30px;height:30px;border-radius:50%;margin:auto;background:radial-gradient(circle at 35% 25%,white,#2ad7ff 25%,#0872be 70%)}.bomb-button b{font-size:12px}
@media (max-width:800px),(pointer:coarse){.page-shell{padding:0}.game-frame{width:100%;height:100vh;border:0;border-radius:0;display:flex;flex-direction:column}.top-strip{height:48px}.brand{font-size:16px}.brand-bubble{width:22px;height:22px}.round-readout{gap:7px}.round-readout span:first-child{display:none}.icon-button{font-size:10px}.play-layout{display:block;min-height:0;flex:1}.hud{position:absolute;left:5px;top:53px;right:5px;z-index:5;height:58px;flex-direction:row;border:0;background:transparent;padding:0;pointer-events:none}.player-card{flex:1;min-height:0;height:58px;padding:2px;border-width:2px;border-radius:10px}.portrait{width:34px;height:32px;margin:1px auto;background-size:400% 400%}.player-card h3,.player-card .stats,.player-card .tag{display:none}.stage-wrap{height:100%;display:grid;place-items:center}#gameCanvas{width:100%;height:auto;max-height:100%;object-fit:contain}.help-bar{display:none}.touch-controls{display:block}.modal-card{padding:19px 18px}.modal-card h1{font-size:32px}.controls-line{display:none}}