:root{
  color-scheme:dark;
  --bg:#03090c;
  --shell:#071216;
  --panel:#0b1a20;
  --panel-2:#10242b;
  --tile:#102a30;
  --tile-edge:#24505a;
  --line:#1a343c;
  --text:#f3f8f8;
  --muted:#81959b;
  --accent:#11d5b2;
  --accent-deep:#07987f;
  --danger:#ff654f;
  --positive:#20deb8;
  --shadow:0 24px 80px rgba(0,0,0,.42);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}

html,body,#app{min-height:100%;margin:0;max-width:100%;overflow-x:hidden}

body{
  background:
    radial-gradient(circle at 50% -20%,rgba(20,105,104,.22),transparent 40%),
    var(--bg);
  color:var(--text);
  font-size:14px;
}

button,input{font:inherit}
button{color:inherit}

.game-shell{
  width:min(1440px,100%);
  max-width:100vw;
  overflow:hidden;
  min-height:100vh;
  margin:0 auto;
  background:linear-gradient(180deg,#071318,#050d11);
  border-inline:1px solid rgba(69,105,113,.32);
  box-shadow:var(--shadow);
}

.game-header{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  border-bottom:1px solid var(--line);
  background:rgba(5,16,20,.92);
  backdrop-filter:blur(18px);
}

.brand-lockup,.header-actions{display:flex;align-items:center}
.brand-lockup{gap:16px;letter-spacing:.04em}
.brand-lockup>strong{font-size:28px;color:var(--accent);letter-spacing:.08em}
.brand-lockup>span{width:1px;height:30px;background:var(--line)}
.brand-lockup>b{font-size:18px}
.apps-mark{width:24px;display:grid;grid-template-columns:repeat(3,4px);gap:4px;place-content:center}
.apps-mark i{width:4px;height:4px;background:#a7b8bc;border-radius:1px}
.game-mark{position:relative;width:26px;height:26px}
.game-mark .tile-symbol{width:100%;height:100%}

.header-actions{gap:12px}
.balance-card{
  min-width:190px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 15px;
  background:#09171c;
  border:1px solid var(--line);
  border-radius:9px;
}
.balance-card span{color:var(--muted);font-size:12px}
.balance-card strong{font-size:18px;font-variant-numeric:tabular-nums}

.icon-button{
  width:44px;height:44px;display:grid;place-items:center;
  background:#0b1c21;border:1px solid var(--line);border-radius:9px;cursor:pointer
}
.icon-button:hover{border-color:#2a5b64;background:#10262c}
.icon-button svg{width:21px;height:21px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu-button{gap:4px;padding:11px}
.menu-button i{display:block;width:17px;height:2px;background:#d8e4e6;border-radius:2px}

.game-stage{
  display:grid;
  grid-template-columns:340px minmax(0,1fr);
  min-height:620px;
}

.control-panel{
  padding:30px;
  background:linear-gradient(180deg,#0c1b21,#08161b);
  border-right:1px solid var(--line);
}

.field-block{margin-bottom:28px}
.field-block label{display:block;margin-bottom:8px;font-size:13px;font-weight:750}
.field-block input{
  width:100%;height:48px;padding:0 14px;color:var(--text);font-size:18px;font-weight:750;
  background:#071419;border:1px solid #234048;border-radius:8px;outline:none
}
.bet-entry-row{min-width:0}
.field-block input:focus{border-color:var(--accent)}
.field-block input:disabled{opacity:1;color:#adc0c4}
.split-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.split-buttons button,.stepper button{
  height:38px;background:#203239;border:1px solid #35515a;border-radius:7px;font-weight:800;cursor:pointer
}
.split-buttons button:hover,.stepper button:hover{background:#2a4149}
button:disabled{cursor:not-allowed;opacity:.48}

.mine-field{padding-top:24px;border-top:1px solid var(--line)}
.field-heading{display:flex;align-items:center;justify-content:space-between}
.mine-entry-row>small{display:block;margin-top:8px;color:var(--muted);text-align:center}
.stepper{
  height:48px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;
  background:#071419;border:1px solid #234048;border-radius:8px;overflow:hidden
}
.stepper button{height:100%;border:0;border-radius:0;font-size:22px}
.stepper strong{text-align:center;font-size:18px}

.primary-action{
  width:100%;min-height:58px;padding:10px 18px;border:1px solid #25e6c0;border-radius:9px;
  color:#031310;background:linear-gradient(180deg,#14d7b4,#07947d);font-size:19px;font-weight:900;
  box-shadow:0 12px 30px rgba(9,207,171,.13),inset 0 1px rgba(255,255,255,.28);cursor:pointer
}
.primary-action:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.primary-action.cashout{display:grid;gap:2px;color:white}
.primary-action.cashout span{font-size:14px}.primary-action.cashout strong{font-size:20px}
.primary-action.cashout{margin-top:10px}
.button-spinner{display:block;width:22px;height:22px;margin:auto;border:3px solid rgba(0,0,0,.25);border-top-color:#031310;border-radius:50%;animation:spin .7s linear infinite}

.round-metrics{
  display:grid;grid-template-columns:1fr 1fr;margin-top:14px;padding:16px 8px;
  background:#071419;border:1px solid var(--line);border-radius:9px
}
.round-metrics>div{display:grid;gap:7px;text-align:center}
.round-metrics>div+div{border-left:1px solid var(--line)}
.round-metrics span{color:var(--muted);font-size:11px}.round-metrics strong{font-size:21px;font-variant-numeric:tabular-nums}.round-metrics div:first-child strong{color:var(--accent)}
.round-help{margin-top:14px;color:var(--muted);font-size:11px;text-align:center}

.board-wrap{
  position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-width:0;max-width:100%;padding:24px 4vw 30px;overflow:hidden
}
.board-wrap:before{content:"";position:absolute;inset:12% 18%;background:radial-gradient(circle,rgba(10,120,109,.14),transparent 64%);filter:blur(20px);pointer-events:none}
.status-line{width:min(560px,100%);display:flex;align-items:center;gap:9px;margin-bottom:14px;color:var(--muted);font-size:12px}
.status-line strong{color:#dce8e9}.status-line>span:last-child{margin-left:auto}
.status-dot{width:8px;height:8px;border-radius:50%;background:#42575d}.status-dot.live{background:var(--accent);box-shadow:0 0 12px var(--accent)}

.mines-grid{
  position:relative;z-index:1;width:min(560px,100%);min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px
}
.mine-tile{
  position:relative;width:100%;min-width:0;padding:0;aspect-ratio:1;border:1px solid var(--tile-edge);border-radius:10px;
  background:linear-gradient(145deg,#17363d,#0b2026);box-shadow:0 7px 0 #061316,0 13px 22px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.05);
  transition:transform .16s ease,filter .16s ease,border-color .16s ease;cursor:pointer;overflow:hidden
}
.mine-tile:not(:disabled):hover{transform:translateY(-3px);filter:brightness(1.15);border-color:#3a7880}
.mine-tile:disabled{opacity:1}
.tile-core{position:absolute;inset:34%;border:2px solid #315159;transform:rotate(45deg);border-radius:3px;opacity:.58}
.mine-tile.safe{background:radial-gradient(circle at 50% 45%,#124e4c,#0b2c31 70%);border-color:#19a993;animation:reveal .22s ease-out}
.mine-tile.mine{background:radial-gradient(circle at 50% 45%,#4a211d,#231313 70%);border-color:#9f4639;animation:mineReveal .35s ease-out}
.tile-symbol{position:absolute;width:58%;height:58%;left:21%;top:20%}
.crystal{filter:drop-shadow(0 0 8px rgba(25,236,199,.48))}.crystal-body{fill:#0dcbb0;stroke:#75ffea;stroke-width:1.2}.crystal-left{fill:#087b76}.crystal-right{fill:#13a99d}.crystal-center{fill:#30e2c4}.crystal-lines{fill:none;stroke:#a0fff0;stroke-width:1;stroke-linejoin:round}
.mine-spikes{fill:#ff6a35;stroke:#ff9a58;stroke-width:.6}.mine-outer{fill:#251b1a;stroke:#ff7041;stroke-width:3}.mine-inner{fill:#10181a;stroke:#6c3b2d;stroke-width:3}.mine-rim{fill:#252425;stroke:#ff8a4c;stroke-width:2}.mine-cross{fill:none;stroke:#ffad6a;stroke-width:5;stroke-linecap:round}
.toast{position:absolute;bottom:18px;z-index:4;padding:10px 15px;background:#13252a;border:1px solid #31515a;border-radius:8px;box-shadow:var(--shadow);font-size:12px}

.bet-history{border-top:1px solid var(--line);background:#071318;padding:0 28px 22px}
.history-head{height:58px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}
.history-tabs{height:100%;display:flex;gap:22px}.history-tabs button{position:relative;padding:0 6px;background:none;border:0;color:var(--muted);font-weight:800;cursor:pointer}
.history-tabs button.active{color:var(--accent)}.history-tabs button.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent)}
.preview-label{padding:5px 8px;border:1px solid #344950;border-radius:5px}
.history-scroll{overflow:auto;border:1px solid var(--line);border-radius:9px}
table{width:100%;border-collapse:collapse;min-width:650px}th,td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(37,61,68,.6);font-size:12px;font-variant-numeric:tabular-nums}th{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}tbody tr:last-child td{border-bottom:0}.positive{color:var(--positive)}.negative{color:var(--danger)}.history-empty{padding:28px;text-align:center;color:var(--muted);border:1px solid var(--line);border-radius:9px}

.launch-screen,.fatal-screen{min-height:100vh;display:grid;place-content:center;justify-items:center;background:radial-gradient(circle,rgba(17,213,178,.12),transparent 34%),#03090c}
.launch-brand{margin-bottom:26px;color:var(--accent);font-size:34px;font-weight:950;letter-spacing:.14em}
.launch-screen>strong{margin-top:20px;font-size:20px;letter-spacing:.24em}.launch-screen>small{margin-top:8px;color:var(--muted)}
.launch-spinner{position:relative;width:58px;height:58px}.launch-spinner span{position:absolute;inset:0;border:4px solid transparent;border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}.launch-spinner span:nth-child(2){inset:8px;border-top-color:#9af7e6;animation-duration:.78s;animation-direction:reverse}.launch-spinner span:nth-child(3){inset:17px;border-top-color:#157f72;animation-duration:.62s}
.fatal-card{width:min(420px,calc(100vw - 36px));padding:34px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:14px}.fatal-card .tile-symbol{position:static;width:70px;height:70px}.fatal-card p{color:var(--muted)}.fatal-card button{padding:11px 18px;background:var(--accent);border:0;border-radius:8px;color:#04211c;font-weight:850}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes reveal{0%{transform:scale(.72) rotateY(75deg)}100%{transform:scale(1) rotateY(0)}}
@keyframes mineReveal{0%{transform:scale(.7)}55%{transform:scale(1.08)}100%{transform:scale(1)}}

@media(max-width:860px){
  body{font-size:13px}.game-shell{border:0}.game-header{position:relative;height:126px;padding:14px;display:block}.brand-lockup{position:absolute;top:20px;left:50%;transform:translateX(-50%);gap:9px}.brand-lockup>strong{font-size:20px}.brand-lockup>span,.apps-mark,.game-mark,.brand-lockup>b{display:none}.header-actions{display:contents}.balance-card{position:absolute;top:72px;left:50%;transform:translateX(-50%);width:224px;min-width:0;height:40px;padding:0 14px;gap:8px}.balance-card strong{font-size:15px}.icon-button{position:absolute;top:14px;width:40px;height:40px}.icon-button[data-action="sound"]{right:14px}.menu-button{display:grid;left:14px;gap:4px}
  .game-stage{display:flex;min-width:0;max-width:100%;flex-direction:column;min-height:auto}.board-wrap{order:1;width:100%;min-width:0;padding:14px 14px 26px}.status-line{display:none}.mines-grid{width:100%;max-width:620px;min-width:0;gap:8px}.mine-tile{min-width:0;padding:0;border-radius:8px;box-shadow:0 4px 0 #061316,0 8px 14px rgba(0,0,0,.22)}
  .control-panel{order:2;width:100%;min-width:0;padding:20px 14px;border-right:0;border-top:1px solid var(--line)}.field-block{margin-bottom:16px}.field-block input{height:44px}.bet-entry-row{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:8px}.split-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}.split-buttons button{height:44px}.mine-field{padding-top:16px}.mine-entry-row{display:grid;grid-template-columns:minmax(0,1fr) 84px;align-items:center;gap:10px}.mine-entry-row>small{margin:0;text-align:right}.primary-action{min-height:54px}.round-metrics{margin-top:10px}.round-help{display:none}
  .bet-history{padding:0 14px 18px}.history-head{height:54px}.history-scroll{border-radius:7px}.toast{bottom:8px}
}

@media(max-width:430px){
  .balance-card{width:224px}.mines-grid{gap:6px}.mine-tile{border-radius:7px}.board-wrap{padding:14px 10px 24px}.control-panel{padding:16px 10px 18px}.bet-entry-row{grid-template-columns:minmax(0,1fr) 132px}.mine-entry-row{grid-template-columns:minmax(0,1fr) 76px}.bet-history{padding-inline:10px}.history-head>span{font-size:9px}.launch-brand{font-size:29px}
}