* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --gold: #f7cf79; --gold-deep: #927044; --panel: #11110f; --lime: #f7cf79;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px);
  --console-height: 126px; --footer-height: 0px;
}
html, body { width: 100%; height: 100%; height: 100dvh; overflow: hidden; background: #080d12;
  color: #f6e4c1; font-family: Georgia, 'Times New Roman', serif; user-select: none;
  -webkit-user-select: none; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button, input { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: default; }
#app { position: relative; width: 100%; height: 100%; isolation: isolate; }
#game-container { position: absolute; inset: 0; }
#game-container canvas { display: block; touch-action: none; }
#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.hidden { display: none !important; }
.label { color: #e5c889; font-size: 12px; letter-spacing: 1.5px; font-weight: 400; }
#topbar { position: absolute; inset: 0 0 auto; height: 180px;
  padding: calc(18px + var(--safe-top)) calc(26px + var(--safe-right)) 0 calc(36px + var(--safe-left));
  display: flex; justify-content: space-between; align-items: flex-start;
  background: linear-gradient(#04070a80, transparent); }
.brand { width: clamp(240px, 32vw, 465px); height: auto; filter: drop-shadow(0 8px 8px #000b); }
.top-actions { display: flex; gap: 12px; pointer-events: auto; }
.icon-button, #menu-button { width: 52px; height: 50px; display: grid; place-content: center; gap: 5px;
  border: 1px solid #b98b4e; border-radius: 9px; color: #f3d5a0; font-size: 32px;
  background: linear-gradient(135deg, #292821, #0c0e0e 70%); box-shadow: inset 0 0 0 3px #0b0c0b, 0 3px 6px #000a; }
.icon-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
#menu-button span { width: 22px; height: 2px; background: #e9c888; border-radius: 2px; }
#quick-sound[aria-pressed='true'] { color: #82725b; }
#multiplier-ladder { position: absolute; top: calc(90px + var(--safe-top)); right: calc(26px + var(--safe-right));
  bottom: calc(var(--console-height) + var(--footer-height) + 94px + var(--safe-bottom));
  width: clamp(172px, 17vw, 250px); min-height: 325px; padding: 27px 29px 24px;
  display: flex; flex-direction: column; gap: 9px; color: #231a10;
  background: url('assets/images/dungeon/ladder.webp') center / 100% 100% no-repeat;
  border: 0; border-radius: 0; filter: drop-shadow(0 8px 12px #0009); transform: rotate(-.8deg); }
.ladder-heading { text-align: center; font-size: clamp(11px, 1vw, 16px); white-space: nowrap; font-weight: 700; }
#ladder-steps { list-style: none; display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; }
#ladder-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 5px; flex: 1; min-height: 0; position: relative; }
#ladder-steps span, #ladder-steps strong { display: grid; place-items: center;
  border: 1px solid #726043; background: linear-gradient(135deg, #2b2820, #111310);
  color: #f6d895; text-shadow: 0 1px 2px #000; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1; }
#ladder-steps span { border-radius: 4px; font-size: 16px; }
#ladder-steps strong { border-radius: 2px; font-size: clamp(14px, 1.5vw, 22px); }
#ladder-steps .next strong, #ladder-steps .next span { border-color: #e1bd74; color: #ffdf94; }
#ladder-steps .current strong, #ladder-steps .current span { border-color: #ffcf66;
  background: linear-gradient(135deg, #60401d, #231b12); box-shadow: 0 0 10px #ffb6388a, inset 0 0 7px #ecac3726; }
#ladder-steps .current::before { content: '▸'; position: absolute; left: -21px; top: 50%; transform: translateY(-50%); color: #ffe193; font-size: 23px; }
#ladder-steps .passed strong, #ladder-steps .passed span { color: #9f967f; }
#multiplier-ladder p { text-align: center; font-size: 13px; line-height: 1.3; letter-spacing: 1px; }
.ladder-compass { text-align: center; font-size: 24px; line-height: .8; }
#journey-status { position: absolute; left: 50%; bottom: calc(var(--console-height) + var(--footer-height) + 30px + var(--safe-bottom));
  transform: translateX(-50%); width: 270px; padding: 13px 20px 11px; text-align: center;
  background: linear-gradient(145deg, #262820f2, #0d1112f7); border: 2px solid #b1915b;
  outline: 4px solid #181911; outline-offset: 2px; border-radius: 12px;
  box-shadow: inset 0 0 0 3px #151813, 0 4px 20px #0009; }
#journey-status strong { display: block; font-size: 36px; line-height: 1.2; color: #f9d78d; font-weight: 400; text-shadow: 0 2px 4px #000; }
#trail-progress { position: absolute; right: 10px; bottom: 9px; color: #a2957b; font: 10px 'Segoe UI', sans-serif; }
#controls { position: absolute; left: calc(18px + var(--safe-left)); right: calc(18px + var(--safe-right));
  bottom: calc(var(--footer-height) + 10px + var(--safe-bottom)); height: var(--console-height);
  display: grid; grid-template-columns: minmax(155px, .8fr) minmax(275px, 1.5fr) minmax(320px, 1.45fr);
  gap: 18px; padding: 18px 24px; align-items: center; pointer-events: auto;
  border: 2px solid #a28555; border-radius: 14px; background: linear-gradient(165deg, #282923f7, #111512fa 35%, #0b0e0efa);
  box-shadow: inset 0 0 0 4px #151511, inset 0 0 0 5px #5c4c33, 0 -5px 24px #0008; }
.balance-box { min-width: 0; text-align: center; display: flex; flex-direction: column; gap: 9px; padding-right: 18px; border-right: 1px solid #6453376b; }
#balance { display: block; color: #fbe5b9; font-size: clamp(19px, 1.9vw, 29px); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; background: #090d0ec9; border: 1px solid #6f614d; border-radius: 5px; padding: 9px 5px;
  font-variant-numeric: tabular-nums; text-shadow: 0 2px 2px #000; }
#bet-panel { display: flex; gap: 16px; align-items: center; justify-content: center; min-width: 0; }
.bet-adjust { flex: 1; min-width: 0; text-align: center; }
.bet-row { display: grid; grid-template-columns: 36px minmax(60px, 1fr) 36px; align-items: center; margin-top: 9px; gap: 7px; }
#bet-input { width: 100%; min-width: 0; height: 42px; text-align: center; border: 1px solid #62533c;
  border-radius: 5px; background: #090d0ec9; color: #f8e4b6; font-size: 24px; outline: none; }
.stepper { height: 36px; border: 1px solid #b89960; border-radius: 5px; background: linear-gradient(#30312a, #121716);
  color: #f8da99; box-shadow: inset 0 0 0 2px #0d100e; font: 24px Arial, sans-serif; }
#bet-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: 120px; flex-shrink: 0; }
.preset { border: 1px solid #695a41; border-radius: 4px; background: #171b16; color: #d9c394;
  min-height: 30px; font: 12px 'Segoe UI', sans-serif; padding: 4px; }
.preset.selected { background: #5b4526; border-color: #d4af69; color: #ffe5a8; }
#action-panel { display: flex; gap: 12px; width: 100%; height: 90px; }
.big-btn { min-width: 0; flex: 1; padding: 10px; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  border: 2px solid #edbc60; border-radius: 9px; color: #281708;
  background: linear-gradient(145deg, #ffe4a0, #d69b39 43%, #b6771c 72%, #f6c367);
  box-shadow: inset 0 0 0 3px #7e501b, inset 0 0 0 4px #ffd67f, 0 0 0 3px #15130e, 0 4px 8px #0008;
  font-size: 34px; font-weight: 400; text-shadow: 0 1px 0 #ffeeb3; transition: filter .16s, transform .16s; }
.big-btn.cashout { background: linear-gradient(135deg, #342a1c, #101611); color: #f6d285; border-color: #ae884d; text-shadow: 0 2px 2px #000; box-shadow: inset 0 0 0 3px #181912, inset 0 0 0 4px #705b38, 0 0 0 3px #15130e; }
.btn-title { font-size: clamp(22px, 2.2vw, 33px); letter-spacing: 1px; }
.btn-sub { font: 12px 'Segoe UI', sans-serif; text-shadow: none; }
button:disabled, #bet-input:disabled { opacity: .52; }
.big-btn:active:not(:disabled) { transform: translateY(2px); }
#message { position: absolute; top: 205px; left: 50%; max-width: calc(100% - 40px); transform: translateX(-50%);
  border: 1px solid #9a7c47; border-radius: 5px; background: #0e1514e6; padding: 10px 18px;
  text-align: center; color: #f7db9e; font: 14px 'Segoe UI', sans-serif; opacity: 0; transition: opacity .2s; }
#message.show { opacity: 1; }
#boot-splash { --px: min(.0520833vw, .0925926vh); position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: calc(83.5 * var(--px)); background: #000; transition: opacity .3s; }
.splash-brand { width: calc(472 * var(--px)); height: calc(297 * var(--px)); }
.splash-bar { width: calc(1000 * var(--px)); height: max(2px, calc(8 * var(--px))); margin-top: calc(97.5 * var(--px)); overflow: hidden; }
.splash-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, transparent, white 50%, transparent);
  background-size: calc(1000 * var(--px)) 100%; transition: width .2s; }
#splash-percent { margin-top: calc(51 * var(--px)); font: calc(40 * var(--px)) 'Arial Narrow', 'Segoe UI', sans-serif; color: #fff; }
#popup, #menu-overlay, #error-overlay { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
  padding: calc(20px + var(--safe-top)) calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left));
  background: #030607b8; backdrop-filter: blur(5px); pointer-events: auto; }
#popup { z-index: 20; pointer-events: none; }
#popup-card, #menu-card, #error-card { position: relative; width: min(560px, 94vw); border: 2px solid #b4945b;
  border-radius: 14px; background: radial-gradient(ellipse at top, #3a3322, #111818 70%);
  box-shadow: inset 0 0 0 4px #151711, 0 8px 50px #000b; animation: pop .25s ease-out; }
#popup-card { padding: 36px; text-align: center; }
#popup-title { font-size: 23px; color: #f5ce82; letter-spacing: 2px; }
#popup-amount { margin: 14px 0 8px; color: #ffe4a2; font-size: clamp(28px, 6vw, 44px); overflow-wrap: anywhere; }
#popup-mult { color: #bcb39e; font-size: 19px; }
#popup-card.tier-mega, #popup-card.tier-max { box-shadow: 0 0 60px #e8b44870; }
#menu-card { --menu-max-h: calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom)); max-height: var(--menu-max-h); overflow: hidden; }
.menu-view { padding: 34px; max-height: var(--menu-max-h); overflow-y: auto; overscroll-behavior: contain; }
.menu-view h2 { color: #f1cb83; text-align: center; letter-spacing: 2px; font-weight: 400; font-size: 28px; margin: 8px 45px 28px; }
.menu-close { position: absolute; z-index: 2; right: 14px; top: 14px; width: 38px; height: 38px;
  border: 1px solid #9e8150; border-radius: 5px; background: #151b17; color: #f1d69c; font: 24px Arial, sans-serif; }
.menu-actions { display: grid; gap: 12px; }
.menu-action { min-height: 50px; width: 100%; color: #ecd6a9; border: 1px solid #8f7549; border-radius: 6px;
  background: linear-gradient(#302e23, #151b17); font-size: 16px; letter-spacing: 1px; }
.menu-back { margin-top: 20px; }
#menu-rules-description { font: 14px/1.6 'Segoe UI', sans-serif; color: #cac2af; margin-bottom: 20px; }
.rules-scroll { max-height: min(390px, 45vh); overflow-y: auto; }
.rules-table { width: 100%; border-collapse: collapse; font: 14px 'Segoe UI', sans-serif; }
.rules-table th { text-align: left; font-weight: 400; font-size: 11px; letter-spacing: 1px; color: #b6a886; padding: 10px; }
.rules-table td { border-bottom: 1px solid #77614250; padding: 10px; }
.rules-table th:last-child, .rules-table td:last-child { text-align: right; color: #efd293; }
.settings-list { display: grid; gap: 15px; margin: 20px 0; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 15px;
  padding: 15px; border: 1px solid #65553b; border-radius: 6px; font: 15px 'Segoe UI', sans-serif; }
.toggle-switch { position: relative; width: 94px; height: 40px; flex-shrink: 0; border: 1px solid #7d6d4e; border-radius: 25px; background: #171a16; color: #a8a08a; }
.toggle-switch span { position: absolute; top: 5px; left: 5px; width: 28px; height: 28px; border-radius: 50%; background: #8c8168; transition: left .2s; }
.toggle-switch b { position: absolute; top: 13px; right: 12px; font: 11px 'Segoe UI', sans-serif; }
.toggle-switch.active { background: #5b472a; color: #ffe2a6; border-color: #c79f5a; }
.toggle-switch.active span { left: 59px; background: #f6d392; }
.toggle-switch.active b { left: 13px; right: auto; }
#error-overlay { z-index: 60; }
#error-card { padding: 34px; text-align: center; max-height: calc(100dvh - 40px); overflow-y: auto; }
#error-title { color: #f2bc78; margin-bottom: 20px; font-size: 25px; }
#error-description { font: 15px/1.6 'Segoe UI', sans-serif; margin-bottom: 25px; }
#error-code { font: 11px 'Segoe UI', sans-serif; color: #a19079; margin-top: 15px; }
#error-action { width: 200px; }
@keyframes pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
:focus-visible { outline: 2px solid #ffe4a2; outline-offset: 4px; }
@media (hover: hover) { button:hover:not(:disabled) { filter: brightness(1.18); } }
@media (max-width: 1050px) and (min-width: 721px) {
  #controls { gap: 12px; padding: 18px; grid-template-columns: minmax(135px, .7fr) minmax(220px, 1.3fr) minmax(230px, 1.3fr); }
  #bet-presets { width: 100px; } #bet-panel { gap: 8px; }
    #multiplier-ladder { width: 174px; padding: 17px 20px 20px; }
}
@media (max-width: 720px) {
  :root { --console-height: 178px; --footer-height: 0px; }
  #topbar { padding: calc(12px + var(--safe-top)) 12px 0 14px; height: 120px; }
  .brand { width: min(62vw, 300px); }
  .top-actions { gap: 6px; }
  .icon-button, #menu-button { width: 35px; height: 36px; font-size: 23px; border-radius: 5px; }
  .icon-button svg { width: 18px; height: 18px; }
  #menu-button span { width: 17px; }
  #multiplier-ladder { top: calc(115px + var(--safe-top)); right: 10px; bottom: calc(var(--console-height) + var(--footer-height) + 116px + var(--safe-bottom));
    width: 132px; min-height: 265px; padding: 16px 16px 17px; gap: 7px; }
  .ladder-heading { font-size: 10px; line-height: 1.05; white-space: normal; }
  #ladder-steps { gap: 3px; }
  #ladder-steps li { grid-template-columns: 23px 1fr; gap: 3px; }
  #ladder-steps span { font-size: 12px; } #ladder-steps strong { font-size: 14px; }
  #multiplier-ladder p { font-size: 9px; }
  .ladder-compass { font-size: 20px; }
    #journey-status { width: 225px; padding: 10px 14px 8px; bottom: calc(var(--console-height) + var(--footer-height) + 26px + var(--safe-bottom)); }
  #journey-status .label { font-size: 10px; }
  #journey-status strong { font-size: 30px; }
  #controls { left: calc(10px + var(--safe-left)); right: calc(10px + var(--safe-right)); bottom: calc(var(--footer-height) + 8px + var(--safe-bottom));
    height: var(--console-height); grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 12px; padding: 13px; border-radius: 9px; }
  .balance-box { padding-right: 10px; gap: 7px; }
  .label { font-size: 10px; letter-spacing: 1px; }
  #balance { font-size: clamp(15px, 4.5vw, 23px); padding: 9px 4px; }
  #bet-panel { gap: 7px; }
  .bet-row { grid-template-columns: 30px minmax(40px, 1fr) 30px; gap: 4px; margin-top: 7px; }
  .stepper { height: 35px; font-size: 22px; }
  #bet-input { height: 39px; font-size: 20px; }
  #bet-presets { display: none; }
  #action-panel { grid-column: 1 / -1; height: 75px; }
  .big-btn { font-size: 31px; }
  .btn-title { font-size: 25px; }
  #message { top: auto; bottom: calc(var(--console-height) + var(--footer-height) + 118px + var(--safe-bottom));
    left: 15px; transform: none; max-width: calc(100% - 160px); padding: 7px 10px; font-size: 11px; }
  .menu-view { padding: 25px 20px; }
  .menu-view h2 { font-size: 24px; }
}
@media (max-height: 650px) and (min-width: 721px) {
  :root { --console-height: 94px; --footer-height: 0px; }
  .brand { width: 270px; }
  #topbar { padding-top: 10px; }
  #multiplier-ladder { top: 73px; bottom: 148px; min-height: 0; padding: 18px 23px 15px; gap: 5px; }
  #multiplier-ladder p, .ladder-compass { display: none; }
  #multiplier-ladder { width: 210px; padding: 15px 24px; }
  .ladder-heading { font-size: 10px; }
  #ladder-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 5px; }
  #ladder-steps li { grid-template-columns: 15px minmax(0, 1fr); gap: 2px; }
  #ladder-steps strong { font-size: 10px; } #ladder-steps span { font-size: 9px; }
    #controls { padding: 11px 20px; }
  #action-panel { height: 65px; }
  #journey-status { padding: 8px 16px; bottom: 148px; width: 230px; }
  #journey-status strong { font-size: 27px; }
  #message { top: 125px; }
  .menu-view { padding: 18px 24px; } .menu-view h2 { margin-bottom: 18px; }
  .settings-list { gap: 9px; margin: 12px 0; } .settings-row { padding: 10px; }
  .rules-scroll { max-height: 37vh; }
}
@media (max-width: 720px) and (max-height: 710px) {
  :root { --console-height: 158px; --footer-height: 0px; }
  #multiplier-ladder { top: 100px; bottom: 272px; min-height: 0; }
  #multiplier-ladder p, .ladder-compass { display: none; }
  #ladder-steps { gap: 2px; }
  #ladder-steps strong, #ladder-steps span { font-size: 12px; }
  #controls { gap: 8px; padding: 11px; }
  #action-panel { height: 62px; }
  #journey-status strong { font-size: 26px; }
  #journey-status { bottom: 209px; padding: 8px 14px; }
}
@media (orientation: portrait) {
  #boot-splash { --px: min(.0925926vw, .0520833vh); padding-bottom: calc(258 * var(--px)); }
  .splash-brand { width: calc(708 * var(--px)); height: calc(445.5 * var(--px)); }
  .splash-bar { margin-top: calc(223.25 * var(--px)); } #splash-percent { font-size: calc(80 * var(--px)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 720px) {
  #multiplier-ladder { top: calc(105px + var(--safe-top)); left: 10px; right: 10px;
    bottom: auto; width: auto; height: 104px; min-height: 0; padding: 8px 10px;
    gap: 6px; background: linear-gradient(145deg, #292820f5, #101512f5);
    border: 1px solid #9d7d46; border-radius: 8px; transform: none; filter: none; color: #f6d895; }
  .ladder-heading { font-size: 11px; letter-spacing: 1px; }
  #ladder-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  #ladder-steps li { display: flex; flex-direction: column; gap: 1px; }
  #ladder-steps span { border: 0; background: none; font-size: 9px; }
  #ladder-steps strong { min-height: 20px; font-size: 10px; border-radius: 3px; }
  #ladder-steps .current::before, #multiplier-ladder p, .ladder-compass { display: none; }
  #message { left: 15px; right: 15px; max-width: none; }
}

@media (max-width: 720px) and (max-height: 710px) {
  #topbar { padding-top: 8px; height: 90px; }
  .brand { width: min(56vw, 240px); }
  #multiplier-ladder { top: calc(90px + var(--safe-top)); height: 86px; padding: 5px 8px; gap: 3px; }
  #ladder-steps { gap: 2px 4px; }
  #ladder-steps strong { min-height: 16px; font-size: 9px; }
  #journey-status { bottom: calc(var(--console-height) + 20px + var(--safe-bottom)); padding: 6px 14px; }
  #journey-status strong { font-size: 24px; }
}