.breakout-card{--breakout-height:clamp(250px,55dvh,640px);padding:clamp(12px,2vw,24px);border:1px solid #7a9dba60;border-radius:24px;background:linear-gradient(145deg,#182a40,#101c30);color:#e6edf2;max-width:960px;margin:0 auto;box-sizing:border-box}
.breakout-heading .game-title{color:#ffe1aa;font-size:clamp(22px,3vw,32px);margin:4px 0}.breakout-heading .game-eyebrow{color:#d6b9d6;font-size:12px;letter-spacing:.06em}.breakout-intro{font-size:14px;line-height:1.55;max-width:74ch;color:#c7d9e7;margin:10px 0}
.breakout-stats{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;padding:10px 0;font-size:14px}.breakout-level{color:#ffe1a4}.breakout-score{color:#aee2d4}.breakout-lives{color:#f6b6c6}
.breakout-stage{display:flex;justify-content:center;min-width:0;overflow:hidden;border-radius:18px;border:1px solid #718eab;background:#26334a;box-shadow:0 8px 28px #050b1a50}.breakout-board{display:block;width:min(100%,720px,calc(var(--breakout-height) * 1.125));height:auto;max-height:none;aspect-ratio:720/640;touch-action:none;outline-offset:-4px;cursor:ew-resize}.breakout-board:focus-visible{outline:3px solid #f6d89a}.breakout-active-powers{min-height:22px;margin:9px 0;color:#c6dbec;font-size:13px}
.breakout-controls{display:flex;flex-wrap:wrap;gap:8px}.breakout-controls button{min-height:44px;padding:10px 15px;border-radius:12px;font-size:14px}.breakout-launch{background:#9fe0dc!important;color:#102c3c!important;font-weight:800}.breakout-controls [hidden]{display:none!important}.breakout-status{min-height:24px;font-size:14px;color:#f4dcae;line-height:1.6;margin:10px 0}.breakout-status button{margin:6px}
.breakout-guide,.breakout-ranking{font-size:14px;border-top:1px solid #ffffff1c;padding:10px 0;color:#c6d8e6}.breakout-guide summary,.breakout-ranking summary{cursor:pointer;min-height:34px;padding-top:8px;font-weight:700}.breakout-guide p{line-height:1.65}.breakout-power-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0;list-style:none}.breakout-power-list li{display:grid;gap:4px;background:#ffffff07;border:1px solid #ffffff14;border-radius:12px;padding:12px}.breakout-power-list strong{color:#f2d6b5}.breakout-ranking-list{padding-left:28px}.breakout-ranking-list li{padding:8px 4px;border-bottom:1px solid #ffffff12}.breakout-ranking-list li span{float:right;margin-left:12px}.breakout-my-score{color:#a4ead3}.breakout-slider{display:none;width:100%;min-height:44px;accent-color:#9fe0dc}
.breakout-card:fullscreen,.breakout-card.breakout-expanded{background:#101b2b;max-width:none;width:100%;height:100dvh;border:0;border-radius:0;padding:12px clamp(12px,4vw,72px);overflow:auto}.breakout-card.breakout-expanded{position:fixed;inset:0;z-index:9999}.breakout-card:fullscreen .breakout-board,.breakout-expanded .breakout-board{--breakout-height:calc(100dvh - 230px);width:min(100%,980px,calc(var(--breakout-height) * 1.125))}.breakout-card:fullscreen .breakout-intro,.breakout-expanded .breakout-intro{display:none}.breakout-card:fullscreen .breakout-stage,.breakout-expanded .breakout-stage{border:0;background:#101b2b}
@media(pointer:coarse){.breakout-slider{display:block}.breakout-guide{font-size:13px}.breakout-controls button{flex:1 1 auto}.breakout-card{--breakout-height:62dvh}}
@media(max-width:560px){.breakout-card{--breakout-height:clamp(250px,55dvh,640px);padding:12px;border-radius:16px}.breakout-heading .game-title{color:#ffe1aa;font-size:23px}.breakout-intro{font-size:13px}.breakout-level{flex-basis:100%}.breakout-stats{gap:8px;font-size:13px}.breakout-power-list{grid-template-columns:1fr}.breakout-ranking-list li span{float:none;display:block;margin:3px 0}.breakout-card{--breakout-height:70dvh}}
