:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --game-max: 560px;
  --cyan: #31e7ff;
  --blue: #4d7cff;
  --pink: #ff4fd8;
  --gold: #ffd66b;
  --lime: #7cff9b;
  --ink: #06091c;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; min-height: 100%; overflow: hidden; overscroll-behavior: none; background: #030516; color: #fff; font-family: Inter, "Trebuchet MS", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.blockblast-game { width: 100vw; height: 100dvh; touch-action: none; user-select: none; }
body.blockblast-game::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 13%, rgba(49,231,255,.22), transparent 34%), radial-gradient(circle at 18% 82%, rgba(255,79,216,.18), transparent 32%), linear-gradient(180deg, #070b2a 0%, #030516 100%); }
body.blockblast-game::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent 100%); }
#blockblast-canvas { position: fixed; z-index: 1; top: 0; bottom: 0; left: max(0px, calc((100vw - var(--game-max)) / 2)); width: min(100vw, var(--game-max)); height: 100dvh; display: block; background: #06091c; touch-action: none; box-shadow: 0 0 70px rgba(0,0,0,.72); backface-visibility: hidden; transform: translateZ(0); }
body.collision-shake #blockblast-canvas { animation: collisionShake .34s cubic-bezier(.36,.07,.19,.97); }
@keyframes collisionShake { 0%,100%{transform:translate3d(0,0,0)} 20%{transform:translate3d(-5px,2px,0)} 40%{transform:translate3d(5px,-3px,0)} 60%{transform:translate3d(-3px,-1px,0)} 80%{transform:translate3d(2px,2px,0)} }
html.is-android, html.is-android body { height: 100%; min-height: 100%; }
html.is-android body.blockblast-game, html.is-android #blockblast-canvas { height: 100svh; }
html.is-android body.blockblast-game::after { display: none; }

.boot-loader { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 22px; background: radial-gradient(circle at 50% 18%, rgba(49, 231, 255, .25), transparent 36%), linear-gradient(180deg, #0c1240 0%, #030516 100%); transition: opacity .25s ease, visibility .25s ease; }
.boot-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-card { width: min(90vw, 350px); padding: 25px 21px 21px; border: 1px solid rgba(103,233,255,.24); border-radius: 26px; background: linear-gradient(180deg, rgba(12,23,67,.96), rgba(4,7,28,.97)); box-shadow: 0 24px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); text-align: center; }
.boot-card h1 { margin: 12px 0 5px; color: #fff; font-size: 1.55rem; letter-spacing: -.05em; font-weight: 1000; }
.boot-card p { margin: 0 0 14px; color: rgba(235,248,255,.76); font-size: .84rem; line-height: 1.38; }
.boot-card small { color: rgba(235,248,255,.74); font-weight: 900; }
.boot-mark { width: 74px; height: 74px; margin: 0 auto; position: relative; border-radius: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; padding: 10px; background: linear-gradient(135deg, rgba(49,231,255,.22), rgba(255,79,216,.22)); box-shadow: 0 0 35px rgba(49,231,255,.24); }
.boot-mark span, .boot-mark i { display: block; border-radius: 8px; background: linear-gradient(135deg, var(--cyan), var(--blue)); animation: bootTile 1s ease-in-out infinite; }
.boot-mark i { background: linear-gradient(135deg, var(--pink), var(--gold)); animation-delay: .18s; }
.boot-progress { height: 7px; margin: 14px 0 8px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.14); }
.boot-progress span { display: block; width: 35%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--pink), var(--gold)); animation: bootLoad 1.2s ease-in-out infinite; }
@keyframes bootTile { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(.94); } }
@keyframes bootLoad { 0% { transform: translateX(-110%); } 100% { transform: translateX(300%); } }

.top-hud { position: fixed; z-index: 20; top: calc(0px + var(--safe-top)); left: 50%; width: min(100vw, var(--game-max)); min-height: 82px; padding: 14px 16px 0; transform: translateX(-50%); display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; pointer-events: none; text-shadow: 0 2px 2px rgba(0,0,0,.55); }
.hud-item { min-width: 0; color: rgba(239,249,255,.74); font-size: .68rem; font-weight: 900; text-transform: uppercase; line-height: 1.05; }
.hud-item span { display: block; }
.hud-item strong { display: block; margin-top: 4px; color: #fff; font-size: .9rem; line-height: 1; letter-spacing: -.025em; text-transform: none; }
.hud-item small { display: block; margin-top: 5px; color: rgba(234,249,255,.62); font-size: .58rem; text-transform: none; }
.hud-item small b { color: #fff; font-size: inherit; }
.hud-bet { text-align: left; }
.hud-bet strong { color: #eaffff; }
.demo-hud .hud-bet strong { color: var(--gold); text-transform: uppercase; }
.hud-prize { justify-self: center; text-align: center; }
.hud-prize strong { margin-top: 2px; color: #5fe8ff; font-family: "Arial Black", "Trebuchet MS", sans-serif; font-size: clamp(1.65rem, 6.8vw, 2.45rem); letter-spacing: -.075em; text-shadow: 0 4px 0 #153c87, 0 6px 10px rgba(0,0,0,.46); white-space: nowrap; }
.hud-target { justify-self: end; text-align: right; }
.hud-target strong { color: var(--gold); font-size: 1.18rem; font-family: "Arial Black", "Trebuchet MS", sans-serif; text-shadow: 0 3px 0 rgba(100,60,0,.62), 0 6px 12px rgba(0,0,0,.36); }

.exit-btn { position: fixed; z-index: 23; top: calc(62px + var(--safe-top)); right: max(14px, calc((100vw - var(--game-max)) / 2 + 14px)); min-width: 50px; height: 32px; padding: 0 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: rgba(7,12,39,.62); color: #f4fbff; font-weight: 900; font-size: .8rem; box-shadow: 0 6px 16px rgba(0,0,0,.22); cursor: pointer; }
.exit-btn:active { transform: scale(.97); }

.round-panel { position: fixed; z-index: 20; top: calc(76px + var(--safe-top)); left: 50%; width: min(250px, 48vw); transform: translateX(-50%); pointer-events: none; }
.progress-track { height: 13px; padding: 3px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; background: rgba(1,7,23,.56); box-shadow: inset 0 2px 4px rgba(0,0,0,.28); }
.progress-track span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #31e7ff 0%, #ff4fd8 60%, #ffd66b 100%); box-shadow: 0 0 14px rgba(49,231,255,.42); transition: width .18s ease; }
.round-panel small { display: none; }

.sound-btn { position: fixed; z-index: 24; right: max(16px, calc((100vw - var(--game-max)) / 2 + 16px)); bottom: calc(17px + var(--safe-bottom)); width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 16px; background: rgba(7,12,39,.78); color: #fff; box-shadow: 0 10px 22px rgba(0,0,0,.35); cursor: pointer; }
.sound-btn svg { width: 28px; height: 28px; fill: currentColor; }
.sound-btn.muted { color: rgba(255,255,255,.42); }
.sound-btn:active { transform: scale(.96); }

.cashout-btn { position: fixed; z-index: 32; left: 50%; bottom: calc(82px + var(--safe-bottom)); width: min(82vw, 330px); height: 52px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.48); border-radius: 16px; background: linear-gradient(180deg, #fff470, #36efff 52%, #5f74ff); color: #061126; font-size: 1rem; font-weight: 1000; box-shadow: 0 14px 34px rgba(49,231,255,.32); cursor: pointer; }
.cashout-btn.hidden { display: none; }
.cashout-btn:active { transform: translateX(-50%) scale(.985); }
body[data-mode="demo"] .cashout-btn { border-color:#ffe7a6; background:linear-gradient(180deg,#ffb229 0%,#ff7a00 55%,#f45100 100%); color:#2b1000; box-shadow:0 12px 34px rgba(255,106,0,.58),0 0 18px rgba(255,172,37,.42); animation:demoRescuePulse .9s ease-in-out infinite; }
@keyframes demoRescuePulse { 0%,100% { transform:translateX(-50%) scale(1); } 50% { transform:translateX(-50%) scale(1.07); } }
@keyframes demoRescuePulseDocked { 0%,100% { transform:scale(1); } 50% { transform:scale(1.035); } }

.gesture-hint { position: fixed; z-index: 34; top: 51%; left: 50%; width: min(90vw, 520px); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; pointer-events: none; text-align: center; }
.gesture-hint.hidden { display: none; }
.gesture-hint strong { color: #f6fbff; font-family: "Arial Black", "Trebuchet MS", sans-serif; font-size: clamp(1.45rem, 6.4vw, 2.45rem); letter-spacing: -.06em; line-height: 1; text-shadow: 0 4px 0 rgba(16,56,145,.72), 0 7px 16px rgba(0,0,0,.54); animation: hintPulse 1.15s ease-in-out infinite; }
.gesture-hint small { max-width: 310px; color: rgba(255,255,255,.84); font-size: .74rem; font-weight: 900; text-shadow: 0 2px 8px rgba(0,0,0,.65); }
@keyframes hintPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.overlay, .bet-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: calc(18px + var(--safe-top)) 14px calc(18px + var(--safe-bottom)); background: rgba(2,5,20,.67); backdrop-filter: blur(6px); transition: opacity .22s ease, visibility .22s ease; }
.overlay.hidden, .bet-modal.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.panel, .bet-card { width: min(90vw, 372px); padding: 23px 19px 19px; border: 1px solid rgba(103,233,255,.26); border-radius: 25px; background: radial-gradient(circle at 12% 0, rgba(49,231,255,.17), transparent 32%), radial-gradient(circle at 94% 10%, rgba(255,79,216,.16), transparent 34%), linear-gradient(180deg, rgba(13,23,69,.98), rgba(4,8,31,.98)); box-shadow: 0 24px 68px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); text-align: center; }
.panel-badge { display: inline-flex; min-height: 29px; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid rgba(255,214,107,.28); border-radius: 99px; background: rgba(255,214,107,.12); color: var(--gold); font-size: .68rem; font-weight: 1000; letter-spacing: .08em; text-transform: uppercase; }
.panel h1, .bet-card h2 { margin: 13px 0 7px; color: #fff; font-size: 1.55rem; font-weight: 1000; letter-spacing: -.05em; }
.panel p, .bet-card p { margin: 0 0 17px; color: rgba(236,248,255,.8); font-size: .88rem; font-weight: 750; line-height: 1.42; }
.panel button, .bet-btn { width: 100%; height: 50px; border: 0; border-radius: 15px; background: linear-gradient(180deg, #fff470, #34e5ff 58%, #6978ff); color: #061126; font-size: .96rem; font-weight: 1000; box-shadow: 0 12px 28px rgba(49,231,255,.25); cursor: pointer; }
.panel button:disabled { opacity: .6; cursor: wait; }
body[data-mode="demo"] .overlay.demo-result .panel-badge { display: none; }
body[data-mode="demo"] .overlay.demo-result .panel h1 { margin: 0 0 12px; font-size: 1.12rem; letter-spacing: -.025em; }
body[data-mode="demo"] .overlay.demo-result .panel p { margin: 0 0 21px; color: #fff470; font-size: clamp(2.25rem, 10vw, 3.15rem); font-weight: 1000; line-height: 1; letter-spacing: -.065em; text-shadow: 0 4px 0 rgba(16,56,145,.55), 0 10px 24px rgba(255,226,48,.2); }
body[data-mode="demo"] .overlay.demo-result .panel button { text-transform: uppercase; background: linear-gradient(180deg,#ffb229 0%,#ff7a00 55%,#f45100 100%); color:#2b1000; box-shadow:0 12px 34px rgba(255,106,0,.4); }
.bet-btn.secondary { border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: #fff; box-shadow: none; }
.bet-actions { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9px; margin-top: 14px; }
.bet-stepper { display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px; align-items: center; margin: 12px 0 8px; }
.bet-stepper > * { min-width:0; }
.bet-step-btn { height: 48px; border: 1px solid rgba(255,255,255,.17); border-radius: 14px; background: rgba(255,255,255,.08); color: #fff; font-size: 1.3rem; font-weight: 1000; }
#bet-input { width:100%; min-width:0; height:48px; border:1px solid rgba(255,255,255,.18); border-radius:14px; outline:0; background:rgba(0,0,0,.22); color:var(--gold); text-align:center; font-size:1.32rem; font-weight:1000; }
.bet-card small { display: block; color: rgba(235,248,255,.66); font-size: .7rem; font-weight: 850; }
#bet-preview { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
#bet-preview span { color:rgba(235,248,255,.72); }
#bet-preview strong { padding:6px 10px; border:1px solid rgba(255,214,107,.3); border-radius:999px; background:rgba(255,214,107,.12); color:var(--gold); font-size:.88rem; }
.bet-suggest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 11px 0; }
.bet-suggest-btn { height: 37px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: rgba(255,255,255,.08); color: #effbff; font-weight: 900; }
.bet-suggest-btn,.bet-btn { min-width:0; }

.gain-feed { position: fixed; inset: 0; z-index: 31; pointer-events: none; overflow: hidden; }
.gain-pop { position: absolute; color: #fff470; font-family: "Arial Black", "Trebuchet MS", sans-serif; font-size: 1.05rem; font-weight: 1000; white-space: nowrap; text-shadow: 0 3px 0 rgba(16,56,145,.72), 0 6px 14px rgba(0,0,0,.42); animation: gainRise .72s ease-out forwards; }
@keyframes gainRise { from { opacity: 0; transform: translate(-50%, 4px) scale(.88); } 16% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -54px) scale(1.06); } }

@media (max-width: 430px) {
  .top-hud { padding-inline: 14px; }
  .hud-item { font-size: .63rem; }
  .hud-item strong { font-size: .8rem; }
  .hud-prize strong { font-size: clamp(1.6rem, 8.4vw, 2.18rem); }
  .hud-target strong { font-size: 1.05rem; }
  .round-panel { top: calc(72px + var(--safe-top)); width: 220px; max-width: 47vw; }
  .progress-track { height: 13px; }
  .exit-btn { top: calc(60px + var(--safe-top)); right: 14px; }
  .gesture-hint { top: 51%; }
  .cashout-btn {
    left: max(14px, calc((100vw - var(--game-max)) / 2 + 14px));
    right: max(76px, calc((100vw - var(--game-max)) / 2 + 76px));
    bottom: calc(17px + var(--safe-bottom));
    width: auto;
    height: 52px;
    transform: none;
    font-size: .95rem;
  }
  .cashout-btn:active { transform: scale(.985); }
  body[data-mode="demo"] .cashout-btn { animation: demoRescuePulseDocked .9s ease-in-out infinite; }
}

@media (max-width: 360px) {
  .top-hud { padding-inline: 10px; }
  .hud-prize strong { font-size: 1.55rem; }
  .round-panel { width: 145px; }
  .panel, .bet-card { padding: 20px 16px 16px; border-radius: 21px; }
  .panel h1, .bet-card h2 { font-size: 1.38rem; }
  .sound-btn { width: 48px; height: 48px; border-radius: 15px; }
  .cashout-btn {
    right: max(70px, calc((100vw - var(--game-max)) / 2 + 70px));
    height: 48px;
    border-radius: 15px;
    font-size: .88rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot-mark span, .boot-mark i, .boot-progress span, .gesture-hint strong, body[data-mode="demo"] .cashout-btn, body.collision-shake #blockblast-canvas { animation: none; }
}