* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #0a0a10; font-family: 'Figtree', system-ui, sans-serif; --hb-font: 'Figtree', system-ui, sans-serif; }

/* ---------- layout: the game's own gold-and-dark panel on the LEFT ---------- */
.app { position: relative; display: grid; grid-template-columns: 348px minmax(0, 1fr); height: 100%; min-height: 0; }
.stage-wrap { position: relative; min-width: 0; min-height: 0; display: flex; }
.stage-wrap .dice { flex: 1; }

.panel { display: flex; flex-direction: column; gap: 13px; padding: 16px 16px 14px; overflow-y: auto; background: linear-gradient(180deg, #171106 0%, #100d06 55%, #0b0906 100%); border-right: 1px solid #6b5316; color: #f5ecd7; }
.p-balance { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; font-weight: 700; letter-spacing: .05em; color: #c9b98a; }
.p-balance hb-balance { font-size: 15px; color: #ffe9a8; }
.p-tabs { display: flex; padding: 3px; gap: 3px; background: rgba(245, 179, 1, .10); border: 1px solid rgba(245, 179, 1, .22); border-radius: 9px; }
.p-tabs button { flex: 1; height: 36px; border: 0; border-radius: 7px; background: transparent; color: #c9b98a; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.p-tabs button.on { background: #3a2c07; color: #ffe9a8; box-shadow: inset 0 0 0 1px rgba(245, 179, 1, .45); }
.p-label { font-size: 12px; font-weight: 800; letter-spacing: .07em; color: #e8dcbc; }
.p-ctl { display: flex; flex-direction: column; gap: 6px; }
.p-ctl[hidden] { display: none; }

hb-bet-amount { --hb-font: 'Figtree', system-ui, sans-serif; color: #f5ecd7; }
hb-bet-amount::part(field) { background: #1d180b; border: 1px solid #6b5316; border-radius: 10px; height: 50px; padding-left: 14px; }
hb-bet-amount::part(label) { color: #e8dcbc; }
hb-bet-amount::part(caption) { color: #a8976b; }

.p-seg { display: flex; padding: 3px; gap: 3px; background: rgba(245, 179, 1, .08); border: 1px solid rgba(245, 179, 1, .2); border-radius: 9px; }
.p-seg button { flex: 1; height: 36px; border: 0; border-radius: 7px; background: transparent; color: #c9b98a; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.p-seg button.on { background: #3a2c07; color: #ffe9a8; box-shadow: inset 0 0 0 1px rgba(245, 179, 1, .45); }
.p-hilostat { background: #1d180b; border: 1px solid #6b5316; border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 700; color: #ffe9a8; font-variant-numeric: tabular-nums; min-height: 20px; }

.p-counts { display: flex; gap: 4px; }
.p-counts button { flex: 1; height: 32px; border-radius: 8px; border: 1px solid #4a3a12; background: #171106; color: #d8c896; font: 700 12px 'Figtree', system-ui, sans-serif; cursor: pointer; }
.p-counts button.on { border-color: #f5b301; color: #ffe9a8; background: #2a2005; }
.p-autostatus { font-size: 12px; font-weight: 600; color: #ffd94d; min-height: 15px; font-variant-numeric: tabular-nums; }
.p-autonote { margin: 0; font-size: 11.5px; font-weight: 600; color: #a8976b; }
.p-autobox { display: flex; flex-direction: column; gap: 9px; }
.p-autobox[hidden] { display: none; }
#autoHiloCtl { display: flex; flex-direction: column; gap: 9px; }
#autoHiloCtl[hidden] { display: none; }

.p-betrow { display: flex; gap: 8px; align-items: stretch; }
hb-bet { flex: 1; height: 50px; --hb-bet-bg: linear-gradient(180deg, #ffd94d, #f5b301); --hb-bet-color: #2b1d00; --hb-bet-radius: 10px; --hb-bet-font: 'Red Hat Display', 'Figtree', system-ui, sans-serif; }
hb-bet::part(button) { font-weight: 800; letter-spacing: .06em; }
hb-bet[hidden] { display: none; }
.p-speed { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 64px; border-radius: 10px; border: 1px solid #4a3a12; background: #171106; color: #d8c896; font: 800 10px 'Figtree', system-ui, sans-serif; letter-spacing: .04em; cursor: pointer; }
.p-speed.on { border-color: #f5b301; color: #ffe9a8; background: #2a2005; box-shadow: 0 0 10px rgba(245, 179, 1, .25); }
.p-speed:disabled { opacity: .45; cursor: default; }
.p-cashbtn { height: 46px; border-radius: 10px; border: 1px solid #2fbf71; background: linear-gradient(180deg, #14532d, #0c3520); color: #c9f5da; font: 800 15px 'Red Hat Display', 'Figtree', system-ui, sans-serif; letter-spacing: .04em; cursor: pointer; }
.p-cashbtn b { color: #fff; }
.p-cashbtn:disabled { opacity: .38; cursor: default; filter: grayscale(.5); }
.p-rules { height: 38px; border-radius: 9px; border: 1px solid #6b5316; background: rgba(245, 179, 1, .08); color: #ffe9a8; font: 700 13.5px 'Figtree', system-ui, sans-serif; cursor: pointer; }
.p-rules:hover { background: rgba(245, 179, 1, .16); }
.panel [hidden] { display: none !important; }

/* ---------- the stage ---------- */
.dice { container-type: inline-size; position: relative; display: flex; flex-direction: column; width: 100%; min-height: 0; padding: 14px 18px 16px; font-family: 'Figtree', system-ui, sans-serif; background: radial-gradient(120% 90% at 50% 0%, #101018 0%, #0a0a10 60%); color: #e8e8f0; overflow: hidden; }
.topbar { display: flex; align-items: center; gap: 12px; }
.mode-tabs { display: flex; padding: 3px; gap: 3px; background: rgba(255, 255, 255, .05); border: 1px solid #2c2c38; border-radius: 9px; flex: none; }
.mode-tabs button { height: 32px; padding: 0 16px; border: 0; border-radius: 7px; background: transparent; color: #9b9bab; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.mode-tabs button.on { background: #3a2c07; color: #ffe9a8; box-shadow: inset 0 0 0 1px rgba(245, 179, 1, .45); }
.mode-tabs button:disabled { opacity: .45; cursor: default; }
.pills { flex: 1; display: flex; gap: 5px; justify-content: flex-end; overflow: hidden; min-height: 24px; }
.pill { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; border: 1px solid; }
.pill.win { color: #7bf1a8; border-color: #14684c; background: rgba(20, 104, 76, .25); }
.pill.lose { color: #ff9db0; border-color: #7e1f3a; background: rgba(126, 31, 58, .25); }
.pill.push { color: #ffe9a8; border-color: #8a6d1a; background: rgba(245, 179, 1, .14); }
.top-right { display: flex; gap: 8px; flex: none; }
.gear { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid #232b3d; background: #12161f; color: #ffe9a8; font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer; padding: 0; }
.gear svg { width: 17px; height: 17px; }
.gear:hover { color: #ffd94d; border-color: #4a3a10; }

.view { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 0; width: min(880px, 100%); margin: 0 auto; }
.view[hidden] { display: none; }
.caption { font: 800 13px 'Red Hat Display', 'Figtree', system-ui, sans-serif; letter-spacing: .34em; color: #9b9bab; text-indent: .34em; }
.bigval { font-family: 'Red Hat Display', 'Figtree', system-ui, sans-serif; font-weight: 900; font-size: clamp(72px, 17cqi, 132px); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 6px 34px rgba(0, 0, 0, .6); }
.bv-int { color: #fff; }
.bv-dec { color: #5d6478; }
.status { min-height: 20px; color: #9b9bab; font-size: 14px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.status b { color: #e8e8f0; }
.status b, .hilometa b { color: #ffd94d; }

/* classic slider */
.slider-block { width: 100%; margin-top: 6px; }
.slider { position: relative; height: 30px; border-radius: 999px; background: #1b1b24; border: 1px solid #2c2c38; cursor: pointer; touch-action: none; }
.zone { position: absolute; top: 0; height: 100%; }
.zone-win { background: linear-gradient(180deg, #2fbf71, #15803d); border-radius: 999px; }
.zone-lose { background: linear-gradient(180deg, #b3352c, #7f1d1d); border-radius: 999px; }
.roll-marker { position: absolute; top: -9px; width: 0; height: 0; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid #e8e8f0; z-index: 3; }
.roll-marker.win { border-top-color: #2ee06f; }
.handle { position: absolute; top: 50%; width: 36px; height: 36px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe066, #f5b301 60%, #b97e06); border: 2px solid #ffe9a8; box-shadow: 0 4px 14px rgba(0, 0, 0, .55), 0 0 12px rgba(245, 179, 1, .45); cursor: grab; z-index: 2; }
.handle:focus-visible { outline: 2px solid #ffe9a8; outline-offset: 2px; }
.scale { display: flex; justify-content: space-between; margin-top: 5px; padding: 0 2px; font-size: 11px; font-weight: 700; color: #5d6478; font-variant-numeric: tabular-nums; }
.statboxes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; width: 100%; margin-top: 8px; }
.statbox { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 10px 11px; border-radius: 12px; border: 1px solid #2c2c38; background: linear-gradient(170deg, #15151f, #0e0e14); }
.sb-label { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #9b9bab; }
.sb-val { font-size: clamp(19px, 4.4cqi, 27px); font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; }
.sb-val.gold { color: #ffd94d; }
.flip { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 7px; border: 1px solid #4a3a12; background: #171106; color: #ffe9a8; font-size: 13px; cursor: pointer; }
.statbox:has(.flip) .sb-label { margin-right: 24px; }

/* hi-lo */
.hilometa { min-height: 20px; color: #9b9bab; font-size: 14px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.pips { display: flex; gap: 4px; align-items: center; min-height: 12px; }
.pip { width: 8px; height: 8px; border-radius: 50%; background: #26262e; border: 1px solid #3a3a44; }
.pip.on { background: #0d5f6e; border-color: #5cf6f6; box-shadow: 0 0 6px rgba(92, 246, 246, .5); }
.pip.goldpip { width: 11px; height: 11px; border-color: #8a6d1a; }
.pip.goldpip.on { background: #f5b301; border-color: #ffe066; box-shadow: 0 0 9px rgba(245, 179, 1, .85); }
.pip.nextgold { border-color: #f5b301; animation: pip-pulse 1s ease-in-out infinite; }
@keyframes pip-pulse { 50% { box-shadow: 0 0 10px rgba(245, 179, 1, .9); } }
.trail { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; min-height: 24px; }
.tchip { padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; border: 1px solid #3a3a44; color: #9b9bab; background: #15151f; }
.tchip.win { color: #7bf1a8; border-color: #14684c; }
.tchip.gold { color: #2b1d00; background: linear-gradient(180deg, #ffd94d, #f5b301); border-color: #ffe066; }
.tchip.lose { color: #ff9db0; border-color: #7e1f3a; }
.tchip.push { color: #ffe9a8; border-color: #8a6d1a; }
.tchip.start { color: #e8e8f0; border-color: #5d6478; }
.track-block { width: 100%; }
.track { position: relative; height: 12px; border-radius: 999px; background: #1b1b24; border: 1px solid #2c2c38; overflow: visible; }
.tz { position: absolute; top: 0; height: 100%; }
.tz-lo { left: 0; background: linear-gradient(180deg, rgba(255, 157, 77, .5), rgba(255, 157, 77, .22)); border-radius: 999px 0 0 999px; }
.tz-hi { background: linear-gradient(180deg, rgba(77, 163, 255, .5), rgba(77, 163, 255, .22)); border-radius: 0 999px 999px 0; }
.track-marker { position: absolute; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c9cede 65%, #8a93a8); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .6); z-index: 2; }
.guessrow { display: grid; grid-template-columns: 1fr 1.25fr 1.25fr; gap: 10px; width: 100%; }
.gbox { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 13px 8px 12px; border-radius: 12px; border: 1px solid #2c2c38; background: linear-gradient(170deg, #15151f, #0e0e14); color: #e8e8f0; font: inherit; }
button.gbox { cursor: pointer; }
button.gbox:hover:not(:disabled) { filter: brightness(1.25); }
button.gbox:disabled { opacity: .45; cursor: default; }
.gb-label { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: #9b9bab; }
.gb-label.hi { color: #4da3ff; }
.gb-label.lo { color: #ff9d4d; }
.gbox-hi { border-color: #274a75; box-shadow: inset 0 0 18px rgba(77, 163, 255, .08); }
.gbox-lo { border-color: #755227; box-shadow: inset 0 0 18px rgba(255, 157, 77, .08); }
.gbox.goldnext { border-color: #f5b301; box-shadow: 0 0 16px rgba(245, 179, 1, .4), inset 0 0 18px rgba(245, 179, 1, .12); }
.gb-val { font-size: clamp(18px, 4.2cqi, 26px); font-weight: 900; font-variant-numeric: tabular-nums; }
.gb-sub { font-size: 11.5px; font-weight: 700; color: #9b9bab; font-variant-numeric: tabular-nums; min-height: 14px; }

/* gold moment */
.goldfx { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; pointer-events: none; }
.goldfx[hidden] { display: none; }
.goldfx-rays { position: absolute; width: 340px; height: 340px; border-radius: 50%; background: repeating-conic-gradient(rgba(245, 179, 1, .16) 0 9deg, transparent 9deg 24deg); animation: goldspin 2.4s linear infinite; }
@keyframes goldspin { to { transform: rotate(360deg); } }
.goldfx-txt { position: relative; font: 900 clamp(30px, 8cqi, 52px) 'Red Hat Display', 'Figtree', system-ui, sans-serif; letter-spacing: .06em; color: #ffd94d; text-shadow: 0 0 26px rgba(245, 179, 1, .8), 0 4px 18px rgba(0, 0, 0, .7); animation: goldpop 300ms cubic-bezier(.2, 1.6, .4, 1); }
@keyframes goldpop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dice.noanim .goldfx-rays, .dice.noanim .goldfx-txt, .dice.noanim .pip.nextgold { animation: none; }

/* win popup */
.winpop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; min-width: 158px; padding: 16px 24px 14px; border-radius: 12px; border: 2px solid #22c55e; background: linear-gradient(180deg, #0e2018, #08130d); box-shadow: 0 0 0 1px rgba(34, 197, 94, .35), 0 0 34px rgba(34, 197, 94, .45), 0 14px 34px rgba(0, 0, 0, .6); text-align: center; cursor: pointer; }
.winpop[hidden] { display: none; }
.winpop.pop { animation: winpop-in 260ms cubic-bezier(.2, 1.6, .4, 1); }
@keyframes winpop-in { from { transform: translate(-50%, -50%) scale(.7); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.dice.noanim .winpop.pop { animation: none; }
.winpop-x { color: #2ee06f; font-size: 34px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(46, 224, 111, .45); }
.winpop-div { border-top: 2px dotted rgba(120, 200, 150, .4); margin: 9px 2px; }
.winpop-amt { display: flex; align-items: center; justify-content: center; gap: 7px; color: #eafff1; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.winpop-coin { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7bf1a8, #22c55e 60%, #15803d); color: #052e16; font-size: 12px; font-weight: 900; }

/* settings overlay */
.settings { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(4, 6, 10, .68); }
.settings[hidden] { display: none; }
.settings-card { width: min(320px, calc(100% - 40px)); max-height: calc(100% - 20px); overflow-y: auto; padding: 16px 18px 12px; border-radius: 14px; border: 1px solid #22304a; background: linear-gradient(180deg, #101828, #0a0f1a); box-shadow: 0 18px 44px rgba(0, 0, 0, .65); color: #e8ecf4; }
.settings-head { display: flex; align-items: center; justify-content: space-between; font: 900 14px 'Red Hat Display', 'Figtree', system-ui, sans-serif; letter-spacing: .1em; color: #ffd94d; margin-bottom: 8px; }
.settings-close { width: 26px; height: 26px; border: 0; border-radius: 7px; background: #1a2233; color: #9aa3b8; font-size: 12px; cursor: pointer; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid #1b2436; }
.set-label { font-size: 14px; font-weight: 700; }
.set-sub { display: block; font-size: 11px; font-weight: 600; color: #77809a; margin-top: 1px; }
.switch { flex: none; position: relative; width: 46px; height: 26px; border-radius: 999px; border: 1px solid #2c3a5f; background: #131b2c; cursor: pointer; transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #5b6480; transition: left .15s, background .15s; }
.switch[aria-checked="true"] { background: #7a5b00; border-color: #f5b301; }
.switch[aria-checked="true"]::after { left: 22px; background: #ffd94d; }
.set-keys { border-top: 1px solid #1b2436; padding: 9px 0 4px; font-size: 11.5px; font-weight: 600; color: #9aa3b8; line-height: 2; }
.set-keys.off { opacity: .35; }
.set-keys kbd { display: inline-block; min-width: 15px; text-align: center; padding: 1px 5px; margin-right: 4px; border-radius: 5px; border: 1px solid #2c3a5f; border-bottom-width: 2px; background: #131b2c; color: #e8ecf4; font: 700 10.5px system-ui, sans-serif; }

/* intro popup */
.intro { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 14px; background: rgba(4, 8, 10, .55); }
.intro[hidden] { display: none; }
.intro-card { position: relative; width: min(648px, 100%); max-height: 100%; overflow-y: auto; padding: 18px 18px 16px; border-radius: 16px; border: 1px solid #c99a2e; background: linear-gradient(170deg, #1d180b, #100d06); box-shadow: 0 18px 60px rgba(0, 0, 0, .7), 0 0 26px rgba(245, 179, 1, .15); color: #f5ecd7; }
.intro-logo { display: block; width: min(248px, 76%); height: auto; margin: 0 auto 12px; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5)); }
.intro-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 8px; border: 1px solid #6b5316; background: #171106; color: #ffe9a8; font-size: 17px; line-height: 1; cursor: pointer; }
.intro-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.intro-box { border: 1px solid #6b5316; border-radius: 12px; background: rgba(245, 179, 1, .05); padding: 12px 10px 11px; text-align: center; }
.intro-art { height: 88px; display: grid; place-items: center; margin-bottom: 9px; }
.intro-art svg { display: block; height: 100%; width: auto; max-width: 100%; }
.intro-box-t { font: 800 15px 'Red Hat Display', 'Figtree', system-ui, sans-serif; letter-spacing: .03em; color: #ffd94d; margin-bottom: 4px; }
.intro-box-p { margin: 0; font-size: 12.5px; line-height: 1.5; font-weight: 600; color: #f5ecd7; }
.intro-fair { margin: 0 auto 12px; max-width: 540px; text-align: center; font-size: 11.5px; line-height: 1.5; font-weight: 600; color: #a8976b; }
.intro-check { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; color: #c9b98a; margin-bottom: 12px; cursor: pointer; }
.intro-check input { width: 17px; height: 17px; accent-color: #f5b301; }
.intro-go { display: block; width: min(320px, 100%); margin: 0 auto; height: 46px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #ffd94d, #f5b301); color: #2b1d00; font: 800 15px 'Red Hat Display', 'Figtree', system-ui, sans-serif; letter-spacing: .05em; cursor: pointer; }
@media (max-width: 900px) {
  .intro-boxes { grid-template-columns: 1fr; }
  .intro-art { height: 64px; }
}

/* rules screen */
.rules { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 14px; background: rgba(4, 8, 10, .72); }
.rules[hidden] { display: none; }
.rules-card { width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column; border-radius: 16px; border: 1px solid #c99a2e; background: linear-gradient(170deg, #1d180b, #100d06); box-shadow: 0 18px 60px rgba(0, 0, 0, .7), 0 0 26px rgba(245, 179, 1, .15); overflow: hidden; }
.rules-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 10px; font: 800 17px 'Red Hat Display', 'Figtree', system-ui, sans-serif; letter-spacing: .05em; color: #ffe9a8; }
.rules-x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #6b5316; background: #171106; color: #ffe9a8; font-size: 17px; line-height: 1; cursor: pointer; }
.rules-body { overflow-y: auto; padding: 0 16px 8px; color: #e8dcbc; font-size: 13.5px; line-height: 1.55; }
.rules-body h3 { margin: 12px 0 4px; font: 800 13px 'Red Hat Display', 'Figtree', system-ui, sans-serif; letter-spacing: .08em; color: #f5b301; text-transform: uppercase; }
.rules-body p { margin: 0 0 6px; }
.rules-foot { padding: 10px 16px 14px; }
.rules-intro { width: 100%; height: 38px; border-radius: 9px; border: 1px solid #6b5316; background: rgba(245, 179, 1, .08); color: #ffe9a8; font: 700 13.5px 'Figtree', system-ui, sans-serif; cursor: pointer; }

/* ---------- phone: stage on top, compact panel under it ---------- */
@media (max-width: 699px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .stage-wrap { order: -1; }
  .panel { gap: 7px; padding: 8px 10px 10px; border-right: 0; border-top: 1px solid #6b5316; overflow-y: visible; }
  .p-balance { display: none; }
  .p-tabs button { height: 30px; font-size: 13px; }
  hb-bet-amount::part(field) { height: 44px; }
  hb-bet { height: 44px; }
  .p-seg button { height: 32px; }
  .p-cashbtn { height: 42px; font-size: 14px; }
  .p-rules { height: 32px; font-size: 12.5px; }
  .p-hilostat { padding: 7px 10px; font-size: 13px; }
  .dice { padding: 10px 10px 12px; }
  .view { gap: 7px; }
  .bigval { font-size: clamp(56px, 19cqi, 96px); }
  .sb-label { font-size: 10px; letter-spacing: .06em; }
  .statboxes { gap: 7px; }
  .statbox { padding: 8px 6px; }
  .guessrow { gap: 7px; }
  .gbox { padding: 9px 5px; }
  .pills { display: none; }
  .intro { padding: 8px; }
  .intro-card { padding: 12px 13px 11px; }
  .rules { padding: 8px; }
  .rules-body { font-size: 12.5px; }
}

/* Short frame (364×440): the budget is set against the REAL
   hb-bet-amount (~90px tall with its label + hint), so the panel and
   stage both run compact and nothing leaves the frame. */
@media (max-width: 699px) and (max-height: 500px) {
  .panel { gap: 5px; padding: 6px 8px 8px; }
  .p-tabs button { height: 25px; }
  hb-bet-amount::part(field) { height: 40px; }
  hb-bet-amount::part(caption) { display: none; }
  hb-bet-amount::part(hint) { display: none; }
  hb-bet { height: 38px; }
  .p-seg button { height: 28px; font-size: 12.5px; }
  .p-speed { width: 54px; }
  .p-cashbtn { height: 36px; font-size: 13px; }
  .p-counts button { height: 27px; }
  .p-autostatus { min-height: 0; }
  .p-rules { display: none; }
  .p-hilostat { padding: 5px 9px; font-size: 12px; min-height: 0; }
  .p-label { font-size: 10.5px; }
  .dice { padding: 6px 8px; }
  .topbar { gap: 7px; }
  .mode-tabs button { height: 26px; padding: 0 10px; font-size: 12px; }
  .gear { width: 24px; height: 24px; }
  .gear svg { width: 14px; height: 14px; }
  .view { gap: 2px; }
  .caption { font-size: 10.5px; }
  .bigval { font-size: 52px; }
  /* Hi-Lo carries more rows than Classic; in the short frame it runs
     tighter still — the meta line is dropped (the status line under
     the boxes narrates the same state), the trail chips and the
     track's scale row give way (the pips still track the streak),
     and the value shrinks. */
  #hiloView .bigval { font-size: 36px; }
  .hilometa { display: none; }
  .trail { display: none; }
  .track-block .scale { display: none; }
  .status, .hilometa { font-size: 11.5px; min-height: 15px; }
  .slider { height: 22px; }
  .handle { width: 28px; height: 28px; }
  .scale { font-size: 9.5px; margin-top: 3px; }
  .statboxes { gap: 6px; margin-top: 4px; }
  .statbox { padding: 6px 4px; }
  .sb-val { font-size: 16px; }
  .sb-label { font-size: 9.5px; }
  .flip { width: 22px; height: 22px; top: 5px; right: 5px; }
  .pips { min-height: 9px; }
  .pip { width: 6px; height: 6px; }
  .pip.goldpip { width: 8px; height: 8px; }
  .trail { min-height: 19px; }
  .tchip { font-size: 11px; padding: 1px 7px; }
  .track { height: 9px; }
  .track-marker { width: 14px; height: 14px; }
  .guessrow { gap: 6px; }
  .gbox { padding: 5px 4px; }
  .gb-val { font-size: 16px; }
  .gb-label { font-size: 10.5px; }
  .gb-sub { font-size: 10px; min-height: 12px; }
  .intro-boxes { gap: 7px; margin-bottom: 9px; }
  .intro-box { padding: 8px; }
  .intro-art { height: 52px; margin-bottom: 6px; }
  .intro-box-p { line-height: 1.4; }
  .intro-fair { font-size: 11px; margin-bottom: 9px; }
  .intro-go { height: 40px; }
  .intro-card { padding: 10px 12px 9px; }
  .intro-logo { width: min(160px, 58%); margin-bottom: 5px; }
  .intro-check { margin-bottom: 8px; }
}