.arw { display: flex; align-items: center; gap: 8px; flex: none; }
.arw > button { width: max(60px, calc(52 * var(--u))); height: max(60px, calc(52 * var(--u))); border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px var(--f-line); color: #fff; font: 700 max(calc(30 * var(--u)), 34px)/1 var(--f-font); cursor: pointer; display: grid; place-items: center; padding: 0 0 5px; }
.arw > button:active { background: var(--f-yellow); color: var(--f-ink); transform: translateY(1px); }
.arw-v { min-width: max(150px, calc(180 * var(--u))); display: flex; flex-direction: column; align-items: center; gap: 7px; }
.arw-v b { font: 700 max(calc(19 * var(--u)), 21px)/1 var(--f-font); text-transform: uppercase; letter-spacing: 0.02em; color: #fff; white-space: nowrap; }
.arw-dots { display: flex; gap: 5px; }
.arw-dots i { width: max(18px, calc(20 * var(--u))); height: 5px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); }
.arw-dots i.on { background: var(--f-yellow); }

.set-page .f-page-head { gap: calc(14 * var(--u)); }
.set-page .f-page-head .f-title { flex: none; }
.set-tabs { flex: 1 1 auto; min-width: 0; justify-content: center; gap: 6px; }
.set-tabs .f-tab { display: inline-flex; align-items: center; gap: 8px; min-height: max(56px, calc(50 * var(--u))); font-size: max(calc(17 * var(--u)), 19px); background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 0 max(12px, calc(16 * var(--u))); text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); }
.set-tabs .f-tab.sel { background: var(--f-nav-sel); text-shadow: none; }
.set-tabs .f-tab svg { width: max(24px, calc(22 * var(--u))); height: max(24px, calc(22 * var(--u))); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.set-tabs .f-tab svg .fill { fill: currentColor; stroke: none; }
.set-list { max-width: 1040px; margin: calc(10 * var(--u)) auto 0; display: flex; flex-direction: column; gap: 8px; }
.srow { display: flex; align-items: center; gap: 14px; min-height: max(74px, calc(64 * var(--u))); padding: 7px 8px 7px max(16px, calc(20 * var(--u))); border-radius: 8px; background: rgba(8, 30, 90, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: #fff; }
.srow-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.srow-l b { font: 700 max(calc(19 * var(--u)), 20px)/1.1 var(--f-font); text-transform: uppercase; letter-spacing: 0.01em; }
.srow-l small { font: 500 max(calc(14 * var(--u)), 15px)/1.2 var(--f-font); color: var(--f-dim); }
.srow .f-btn { min-width: max(130px, calc(140 * var(--u))); min-height: max(58px, calc(52 * var(--u))); font-size: max(calc(17 * var(--u)), 18px); }
.sbtns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.sbtns .f-btn { min-width: 0; padding: 0 18px; }
.svol { display: flex; align-items: center; gap: 12px; flex: none; }
.svol b { min-width: 3ch; text-align: right; font: 700 max(calc(20 * var(--u)), 22px)/1 var(--f-font); }
.svol input[type=range] { -webkit-appearance: none; appearance: none; width: max(220px, calc(280 * var(--u))); height: max(60px, calc(52 * var(--u))); margin: 0; background: transparent; cursor: pointer; touch-action: none; }
.svol input[type=range]::-webkit-slider-runnable-track { height: 14px; border-radius: 3px; background: linear-gradient(90deg, var(--f-yellow) var(--p, 50%), rgba(255, 255, 255, 0.2) var(--p, 50%)); }
.svol input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 46px; margin-top: -16px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 3px var(--f-yellow), 0 2px 6px rgba(0, 0, 0, 0.35); }
.svol input[type=range]::-moz-range-track { height: 14px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); }
.svol input[type=range]::-moz-range-progress { height: 14px; border-radius: 3px; background: var(--f-yellow); }
.svol input[type=range]::-moz-range-thumb { width: 34px; height: 46px; border: 0; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 3px var(--f-yellow); }

#hud, #names, #toasts, #fps, .callout, .adfake, .coach, #hint, #menu, .sheet-over { font-family: var(--f-font); }
#hud .pad { font-family: var(--font); }

#hud .plaque { align-items: center; gap: calc(8 * var(--u)); min-height: max(40px, calc(44 * var(--u))); padding: 0 calc(14 * var(--u)) 0 calc(12 * var(--u)); border-radius: 6px; background: linear-gradient(90deg, rgba(8, 18, 52, 0.78), rgba(8, 18, 52, 0.55)); box-shadow: inset 0 0 0 1px var(--f-line), inset 4px 0 0 var(--f-yellow); backdrop-filter: none; -webkit-backdrop-filter: none; font-weight: 700; font-size: max(calc(22 * var(--u)), 18px); line-height: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); padding-left: calc(16 * var(--u)); }
#hud .plaque .lbl { font-size: max(calc(12 * var(--u)), 12px); font-weight: 600; opacity: 1; color: var(--f-dim); letter-spacing: 0.06em; }
#hud .plaque .sep { width: 2px; height: 60%; align-self: center; background: rgba(255, 255, 255, 0.18); margin: 0 calc(2 * var(--u)); transform: skewX(-12deg); }
#hud .cool-chip { align-items: center; gap: calc(6 * var(--u)); }
#hud .cool-chip b { color: var(--f-yellow); font-weight: 700; }
#hud .rank-dot { width: max(12px, calc(14 * var(--u))); height: max(12px, calc(14 * var(--u))); border-radius: 3px; transform: rotate(45deg); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
#hud .plaque .coin { width: max(18px, calc(20 * var(--u))); height: max(18px, calc(20 * var(--u))); }
#hud .pips { gap: 3px; margin-left: 2px; }
#hud .pips i { width: max(6px, calc(7 * var(--u))); height: max(12px, calc(14 * var(--u))); border-radius: 2px; background: rgba(255, 255, 255, 0.22); transform: skewX(-12deg); }
#hud .pips i.on { background: var(--f-yellow); box-shadow: 0 0 6px rgba(255, 226, 52, 0.6); }
#hud .combo { border-radius: 6px; padding: calc(6 * var(--u)) calc(14 * var(--u)); background: var(--f-yellow); color: var(--f-ink); font-weight: 700; font-style: italic; font-size: max(calc(22 * var(--u)), 17px); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 3px 10px rgba(0, 0, 0, 0.25); }
#hud .pop { border-radius: 4px; padding: calc(5 * var(--u)) calc(14 * var(--u)) calc(5 * var(--u)) calc(12 * var(--u)); background: rgba(8, 18, 52, 0.72); box-shadow: inset 3px 0 0 var(--f-yellow); font-weight: 700; font-size: max(calc(15 * var(--u)), 13px); text-transform: uppercase; letter-spacing: 0.01em; }
#hud .pop small { color: var(--f-yellow); font-size: 0.95em; }
#hud .pop.bank { background: var(--f-yellow); color: var(--f-ink); box-shadow: inset 3px 0 0 rgba(0, 0, 0, 0.25); }
#hud .pop.bank small { color: var(--f-ink); }
#hud .pop.lost { background: rgba(160, 20, 40, 0.8); color: #fff; box-shadow: inset 3px 0 0 var(--f-red); }

#hud .hud-tr { gap: calc(8 * var(--u)); align-items: center; }
#hud .hud-tr .icon-btn { width: max(48px, calc(50 * var(--u))); height: max(48px, calc(50 * var(--u))); border-radius: 8px; background: rgba(8, 18, 52, 0.6); box-shadow: inset 0 0 0 1px var(--f-line), 0 2px 6px rgba(0, 0, 0, 0.2); backdrop-filter: none; -webkit-backdrop-filter: none; }
#hud .hud-tr .icon-btn svg { width: 54%; height: 54%; stroke-width: 2.2; }
#hud .hud-tr .icon-btn:active { transform: translateY(1px); background: rgba(8, 18, 52, 0.85); }
#hud .hud-tr .auto-btn.active { background: var(--f-yellow); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
#hud .hud-tr .auto-btn.active svg { stroke: var(--f-ink); }
#hud .hud-tr .auto-btn.active svg .fill { fill: var(--f-ink); }
#hud .hud-tr .icon-btn.off { background: rgba(8, 18, 52, 0.4); }
#hud .hud-tr .icon-btn.off svg { stroke: rgba(255, 255, 255, 0.6); }
#hud .room-pill { display: inline-flex; align-items: center; gap: 6px; min-height: max(40px, calc(44 * var(--u))); padding: 0 calc(12 * var(--u)); border-radius: 6px; background: rgba(8, 18, 52, 0.6); box-shadow: inset 0 0 0 1px var(--f-line); font-weight: 700; font-size: max(calc(18 * var(--u)), 15px); }
#hud .room-pill svg { width: max(18px, calc(20 * var(--u))); height: max(18px, calc(20 * var(--u))); margin: 0; vertical-align: 0; }

#hud .regrabs { border-radius: 6px; padding: calc(6 * var(--u)) calc(16 * var(--u)); background: rgba(8, 18, 52, 0.62); color: #fff; box-shadow: inset 0 0 0 1px var(--f-line); font-weight: 700; font-size: max(calc(17 * var(--u)), 14px); text-transform: uppercase; letter-spacing: 0.02em; }
#hud .bot-caption { border-radius: 6px; padding: calc(6 * var(--u)) calc(16 * var(--u)); background: var(--f-yellow); color: var(--f-ink); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: max(calc(16 * var(--u)), 13px); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 3px 10px rgba(0, 0, 0, 0.25); }

#toasts { max-width: min(620px, 70vw); gap: 8px; }
#toasts .toast { position: relative; overflow: hidden; border-radius: 4px; min-height: max(44px, calc(46 * var(--u))); padding: calc(8 * var(--u)) calc(20 * var(--u)) calc(8 * var(--u)) calc(22 * var(--u)); background: linear-gradient(90deg, rgba(8, 22, 70, 0.96), rgba(18, 60, 160, 0.92)); box-shadow: inset 6px 0 0 var(--f-yellow), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.35); color: #fff; font-weight: 600; font-size: max(calc(17 * var(--u)), 14px); line-height: 1.15; white-space: normal; text-align: left; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); animation-name: fToast; }
#toasts .toast.sticky { animation-name: fToastIn; }
#toasts .toast.good { background: linear-gradient(90deg, rgba(10, 70, 40, 0.96), rgba(30, 130, 70, 0.92)); box-shadow: inset 6px 0 0 var(--f-green), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.35); }
#toasts .toast.gold { background: linear-gradient(90deg, #ffe234, #ffc83a); color: var(--f-ink); text-shadow: none; box-shadow: inset 6px 0 0 #fff, 0 6px 18px rgba(0, 0, 0, 0.35); }
#toasts .toast.err { background: linear-gradient(90deg, rgba(110, 10, 30, 0.96), rgba(180, 30, 50, 0.92)); box-shadow: inset 6px 0 0 var(--f-red), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.35); }
#toasts .toast button { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 6px; background: var(--f-yellow); color: var(--f-ink); font-family: var(--f-font); font-weight: 700; text-transform: uppercase; font-size: max(calc(15 * var(--u)), 13px); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
@keyframes fToast { 0% { transform: translateX(-24px); opacity: 0; } 7% { transform: none; opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fToastIn { from { transform: translateX(-24px); opacity: 0; } }

.callout { top: calc(env(safe-area-inset-top) + var(--edge) + 62 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: 0; background: none; color: #fff; font-family: var(--f-font); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: max(calc(30 * var(--u)), 22px); line-height: 1.15; letter-spacing: 0.01em; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), 0 0 18px rgba(0, 20, 80, 0.6); -webkit-text-stroke: 1px rgba(0, 0, 0, 0.35); max-width: min(80vw, 1100px); animation: fCallout 2.6s ease-out forwards; }
@keyframes fCallout { 0% { transform: translateX(-50%) scale(1.35); opacity: 0; } 8% { transform: translateX(-50%) scale(1); opacity: 1; } 82% { opacity: 1; } 100% { transform: translateX(-50%) translateY(-8px); opacity: 0; } }

.nameplate { font-family: var(--f-font); font-weight: 700; gap: 3px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 6px rgba(0, 0, 0, 0.4); }
.nameplate b { font-size: max(calc(16 * var(--u)), 13px); text-transform: uppercase; letter-spacing: 0.02em; }
.nameplate span { padding: 1px calc(7 * var(--u)); border-radius: 3px; background: rgba(8, 18, 52, 0.72); box-shadow: inset 0 -2px 0 var(--rc); font-weight: 700; }
.nameplate .bubble { border-radius: 8px; font-family: var(--f-font); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); }

#fps { font: 700 max(calc(13 * var(--u)), 12px) var(--f-font); padding: 3px 10px; border-radius: 4px; background: rgba(8, 18, 52, 0.7); box-shadow: inset 0 0 0 1px var(--f-line); bottom: calc(env(safe-area-inset-bottom) + 6px); letter-spacing: 0.04em; }

#hint, #menu { background: rgba(4, 10, 36, 0.55); }
#hint .card, #menu .card { color: #fff; border-radius: 10px; background: linear-gradient(135deg, var(--f-bg1), var(--f-bg2) 70%, var(--f-bg3)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2), 0 14px 40px rgba(0, 0, 0, 0.45); scrollbar-width: none; }
#hint .card::-webkit-scrollbar, #menu .card::-webkit-scrollbar { display: none; }
#hint .card h2, #menu .card h2 { font-family: var(--f-font); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: max(calc(34 * var(--u)), 26px); line-height: 1; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
#hint .card { padding: calc(16 * var(--u)) calc(22 * var(--u)); max-height: calc(100vh - 2 * var(--edge) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
#hint .rules { gap: 8px; }
#hint .rule { background: rgba(8, 30, 90, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 8px 12px; }
#hint .rule img { background: rgba(255, 255, 255, 0.14); border-radius: 8px; }
#hint .rule b { font-weight: 700; text-transform: uppercase; font-size: max(calc(17 * var(--u)), 14px); }
#hint .rule span { color: var(--f-dim); font-weight: 500; font-size: max(calc(14 * var(--u)), 12px); line-height: 1.2; }
#hint .keys { color: var(--f-dim); opacity: 1; font-weight: 500; font-size: max(calc(13 * var(--u)), 12px); }
#hint .btn, #menu .btn { font-family: var(--f-font); font-weight: 700; text-transform: uppercase; border-radius: 8px; min-height: max(52px, calc(56 * var(--u))); padding: 0 calc(48 * var(--u)); background: var(--f-yellow); color: var(--f-ink); font-size: max(calc(22 * var(--u)), 18px); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), 0 3px 10px rgba(0, 0, 0, 0.25); }

#menu .menu-card { padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)); width: min(820px, 90vw); max-height: calc(100vh - 2 * var(--edge) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
#menu .menu-head h2 { margin: 0; }
#menu .icon-btn.dark { width: 48px; height: 48px; min-width: 48px; min-height: 48px; border-radius: 8px; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 2px var(--f-line); }
#menu .icon-btn.dark svg { stroke: #fff; }
#menu .menu-body h3 { font-family: var(--f-font); font-weight: 700; font-style: italic; text-transform: uppercase; color: #fff; opacity: 1; letter-spacing: 0.02em; font-size: max(calc(17 * var(--u)), 14px); margin: calc(12 * var(--u)) 0 calc(6 * var(--u)); }
#menu .m-note { margin: calc(8 * var(--u)) 0 0; font-weight: 500; font-size: max(calc(14 * var(--u)), 12px); color: var(--f-dim); }
#menu .m-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: calc(10 * var(--u)); padding: 5px 6px 5px 16px; border-radius: 8px; background: rgba(8, 30, 90, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
#menu .m-lbl { flex: 1; min-width: 0; font-weight: 700; text-transform: uppercase; font-size: max(calc(17 * var(--u)), 14px); }
#menu .chips { gap: 6px; }
#menu .chip { min-height: 48px; border-radius: 6px; padding: 0 calc(14 * var(--u)); background: rgba(8, 30, 90, 0.5); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font-family: var(--f-font); font-weight: 700; text-transform: uppercase; font-size: max(calc(15 * var(--u)), 13px); }
#menu .chip.sel { background: var(--f-yellow); color: var(--f-ink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
#menu .swatches { gap: 8px; }
#menu .swatch { width: 48px; height: 48px; border-radius: 8px; border: 3px solid rgba(255, 255, 255, 0.85); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
#menu .swatch.sel { border-color: var(--f-yellow); box-shadow: 0 0 0 3px var(--f-yellow), 0 0 14px rgba(255, 226, 52, 0.6); }

.sheet-over { background: rgba(4, 10, 36, 0.6); }
.sheet-over .pnl, .panel-wrap > .pnl.small { --text: #fff; --muted: var(--f-dim); color: #fff; font-family: var(--f-font); border-radius: 10px; background: linear-gradient(135deg, var(--f-bg1), var(--f-bg2) 70%, var(--f-bg3)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2), 0 14px 40px rgba(0, 0, 0, 0.45); }
.panel-wrap:has(> .pnl.small) { background: rgba(4, 10, 36, 0.6); }
.sheet-over .pnl-head h2, .panel-wrap > .pnl.small .pnl-head h2 { font-family: var(--f-font); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: max(calc(30 * var(--u)), 24px); line-height: 1.05; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.sheet-over .x-btn, .panel-wrap > .pnl.small .x-btn { width: 48px; height: 48px; border-radius: 8px; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 2px var(--f-line); }
.sheet-over .x-btn svg, .panel-wrap > .pnl.small .x-btn svg { stroke: #fff; }
.sheet-over .pnl-body, .panel-wrap > .pnl.small .pnl-body { font-size: max(calc(17 * var(--u)), 14px); }
.sheet-over .pnl-body p, .panel-wrap > .pnl.small .pnl-body p { font-weight: 500 !important; line-height: 1.25; }
.sheet-over .pnl-foot, .panel-wrap > .pnl.small .pnl-foot { border-top: 1px solid rgba(255, 255, 255, 0.14); background: rgba(4, 16, 60, 0.3); }
.sheet-over .btn, .panel-wrap > .pnl.small .btn { font-family: var(--f-font); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; border-radius: 8px; min-height: 48px; font-size: max(calc(17 * var(--u)), 15px); background: var(--f-yellow); color: var(--f-ink); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), 0 3px 10px rgba(0, 0, 0, 0.25); }
.sheet-over .btn.ghost, .panel-wrap > .pnl.small .btn.ghost { background: rgba(140, 150, 220, 0.45); color: #fff; box-shadow: none; }
.sheet-over .btn.mint, .panel-wrap > .pnl.small .btn.mint { background: var(--f-green); color: var(--f-ink); }
.sheet-over .btn:active, .panel-wrap > .pnl.small .btn:active { transform: translateY(2px); filter: brightness(0.92); }
.panel-wrap > .pnl.small .summary .big { font-family: var(--f-font); font-weight: 700; font-size: max(calc(46 * var(--u)), 34px); text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.sheet-over .odds td { border-bottom-color: rgba(255, 255, 255, 0.14); }

.adfake { font-family: var(--f-font); background: linear-gradient(135deg, rgba(10, 40, 130, 0.97), rgba(8, 18, 52, 0.97)); }
.adfake .adtag { font-weight: 600; letter-spacing: 0.1em; color: var(--f-dim); opacity: 1; font-size: max(calc(16 * var(--u)), 13px); }
.adfake .adnum { font-weight: 700; font-style: italic; font-size: max(calc(80 * var(--u)), 56px); line-height: 1; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
.adfake .adbar { height: 12px; border-radius: 3px; }
.adfake .adbar i { background: var(--f-yellow); }
.adfake .adhint { font-weight: 500; opacity: 1; color: var(--f-dim); font-size: max(calc(16 * var(--u)), 13px); }
.adfake .adx { border-radius: 8px; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 2px var(--f-line); font-family: var(--f-font); font-weight: 700; display: grid; place-items: center; padding: 0 0 3px; }
.adfake.end .adx { background: var(--f-yellow); color: var(--f-ink); box-shadow: none; }

.coach .hole { border-radius: 10px; box-shadow: 0 0 0 4px var(--f-yellow), 0 0 0 9999px rgba(4, 10, 36, 0.55); animation: fHole 1.1s ease-in-out infinite alternate; }
@keyframes fHole { to { box-shadow: 0 0 0 8px var(--f-yellow), 0 0 0 9999px rgba(4, 10, 36, 0.55); } }
.coach .tip { max-width: min(360px, 70vw); padding: 12px 14px 12px 18px; border-radius: 8px; color: #fff; font-weight: 500; background: linear-gradient(135deg, rgba(10, 40, 130, 0.97), rgba(22, 100, 220, 0.95)); box-shadow: inset 5px 0 0 var(--f-yellow), inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 12px 30px rgba(0, 0, 0, 0.4); font-size: max(calc(15 * var(--u)), 13px); line-height: 1.25; }
.coach .tip-top { display: flex; align-items: baseline; gap: 10px; }
.coach .tip b { flex: 1; display: block; margin: 0; font-weight: 700; font-style: italic; text-transform: uppercase; font-size: max(calc(22 * var(--u)), 18px); line-height: 1.05; }
.coach .tip-n { font-weight: 700; color: var(--f-yellow); font-size: max(calc(14 * var(--u)), 12px); }
.coach .tip p { margin: 6px 0 10px; color: rgba(255, 255, 255, 0.9); }
.coach .tip-foot { display: flex; justify-content: flex-end; }
.set-page .f-page-head .f-title { padding-right: 0.18em; overflow: visible; }
.set-page .f-close { width: max(58px, calc(50 * var(--u))); height: max(58px, calc(50 * var(--u))); font-size: 30px; }
.srow .sval { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 12px; font: 700 max(calc(20 * var(--u)), 20px)/1.2 var(--f-font); color: var(--f-yellow); }
.srow .sval small { color: var(--f-dim); font-size: 0.8em; }
@media (max-width: 1000px) { #hud #cool-chip .lbl { display: none; } }
#hud .regrabs { top: calc(env(safe-area-inset-top) + var(--edge)); min-height: max(40px, calc(44 * var(--u))); display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
#hud .bot-caption { top: calc(env(safe-area-inset-top) + var(--edge) + max(48px, calc(56 * var(--u)))); max-width: calc(100vw - 2 * var(--edge) - 40px); overflow: hidden; text-overflow: ellipsis; }
body.online #hud .regrabs { display: none; }
#hud .room-pill { position: absolute; right: 0; top: calc(100% + 8px); }
@media (max-aspect-ratio: 3/2) { #hud .room-pill { position: static; } }
#hud .hud-mid { position: absolute; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + var(--edge) + max(48px, calc(56 * var(--u)))); display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); pointer-events: none; max-width: 44vw; }
#hud .hud-mid #popups { position: static; align-items: center; max-width: none; }
#hud .hud-tr .auto-btn { position: absolute; right: 0; top: calc(100% + 8px); }
body:has(#btn-auto:not([hidden])) #hud .room-pill { right: calc(max(48px, calc(50 * var(--u))) + 8px); }

#hud .act.big { --bw: max(calc(150 * var(--u)), 110px); --bh: var(--bw); }
#hud .act.twist, #hud .act.letgo { --bw: max(calc(96 * var(--u)), 72px); --bh: var(--bw); }
#hud .shape-grid .act { --bw: max(calc(112 * var(--u)), 84px); --bh: max(calc(100 * var(--u)), 74px); }
body.lay-custom #hud .pad { inset: 0; width: auto; height: auto; transform: none; }
body.lay-custom #hud .shape-grid { display: contents; }
body.lay-custom #hud .pad .act {
  --k: calc(var(--ls, 1) * var(--pad-scale, 1));
  position: absolute; margin: 0; right: auto; bottom: auto; width: var(--bw); height: var(--bh);
  left: clamp(calc(env(safe-area-inset-left) + var(--edge) + var(--bw) * var(--k) / 2), calc(var(--lx, 0.5) * 100%), calc(100% - env(safe-area-inset-right) - var(--edge) - var(--bw) * var(--k) / 2));
  top: clamp(calc(env(safe-area-inset-top) + var(--edge) + var(--bh) * var(--k) / 2), calc(var(--ly, 0.5) * 100%), calc(100% - env(safe-area-inset-bottom) - var(--edge) - var(--bh) * var(--k) / 2));
  translate: -50% -50%; scale: var(--k);
}

body.lay-edit #hud { display: block; z-index: 10; background: linear-gradient(135deg, var(--f-bg1), var(--f-bg2) 60%, var(--f-bg3)); }
body.lay-edit #hud > :not(.pad) { opacity: 0.3; }
body.lay-edit #hud .act.letgo { opacity: 1; }
#lay-edit { position: absolute; inset: 0; z-index: 11; touch-action: none; font-family: var(--f-font); color: #fff; }
.le-fr { position: absolute; border: 2px dashed rgba(255, 255, 255, 0.75); border-radius: 12px; cursor: grab; touch-action: none; }
.le-fr.on { border: 3px solid var(--f-yellow); box-shadow: 0 0 0 2px rgba(8, 18, 52, 0.5), 0 0 18px rgba(255, 226, 52, 0.35); }
.le-hk { position: absolute; width: 52px; height: 52px; margin: -26px; display: none; cursor: nwse-resize; touch-action: none; }
.le-hk::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--f-yellow); box-shadow: inset 0 0 0 3px var(--f-ink), 0 2px 6px rgba(0, 0, 0, 0.4); }
.le-fr.on .le-hk { display: block; }
.le-hk.l { left: 0; } .le-hk.r { left: 100%; } .le-hk.t { top: 0; } .le-hk.b { top: 100%; }
.le-bar { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + var(--edge)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: calc(100vw - 2 * var(--edge) - env(safe-area-inset-left) - env(safe-area-inset-right)); padding: 8px 14px 10px; border-radius: 10px; background: linear-gradient(135deg, rgba(10, 40, 130, 0.97), rgba(22, 100, 220, 0.95)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2), 0 10px 30px rgba(0, 0, 0, 0.4); }
.le-bar.bot { top: auto; bottom: calc(env(safe-area-inset-bottom) + var(--edge)); }
.le-row { display: flex; align-items: center; gap: 12px; }
.le-row .svol { margin-left: 8px; }
.le-name { min-width: max(150px, calc(160 * var(--u))); font: 700 italic max(calc(21 * var(--u)), 19px)/1.05 var(--f-font); text-transform: uppercase; color: var(--f-yellow); white-space: nowrap; }
.le-name small { display: block; font: 500 normal max(calc(14 * var(--u)), 13px)/1.2 var(--f-font); text-transform: none; color: var(--f-dim); }
.le-bar .svol input[type=range] { width: max(170px, calc(220 * var(--u))); }
.le-bar .svol b { min-width: 4ch; }
.le-bar .f-btn { min-height: max(56px, calc(58 * var(--u))); font-size: max(calc(19 * var(--u)), 18px); padding: 0 max(16px, calc(22 * var(--u))); }
.srow .f-btn.lay-open { min-width: max(220px, calc(220 * var(--u))); }
@media (max-height: 460px) {
  body.mode-lobby .set-page .f-page-head > .f-title { display: none; }
  .set-tabs { justify-content: flex-start; }
  .set-tabs .f-tab { flex: 1 0 auto; justify-content: center; }
}
.le-bar { transition: opacity 0.15s; }
.le-bar.dim { opacity: 0.35; pointer-events: none; }
body:not(.mode-lobby):not(.mode-replay):not(.mode-podium):not(.page-open) #hud .hud-mid { left: calc(env(safe-area-inset-left) + var(--edge)); transform: none; top: calc(env(safe-area-inset-top) + var(--edge) + max(46px, calc(50 * var(--u))) + 8px); align-items: flex-start; max-width: 30vw; gap: 3px; }
body:not(.mode-lobby):not(.mode-replay):not(.mode-podium):not(.page-open) #hud .hud-mid #popups { align-items: flex-start; }
body:not(.mode-lobby):not(.mode-replay):not(.mode-podium):not(.page-open) #hud .hud-mid .combo { font-size: max(calc(14 * var(--u)), 12px); padding: 2px 9px; }
body:not(.mode-lobby):not(.mode-replay):not(.mode-podium):not(.page-open) #hud .hud-mid .pop { font-size: max(calc(11 * var(--u)), 11px); padding: 2px 9px 2px 8px; }
body:not(.mode-lobby):not(.mode-replay):not(.mode-podium):not(.page-open) #toasts { top: calc(env(safe-area-inset-top) + var(--edge) + max(46px, calc(50 * var(--u))) + 8px); bottom: auto; left: 50%; transform: translateX(-50%); align-items: center; max-width: 34vw; gap: 3px; flex-direction: column; }
body:not(.mode-lobby):not(.mode-replay):not(.mode-podium):not(.page-open) #toasts .toast { min-height: 0; padding: 3px 10px 3px 12px; font-size: max(calc(12 * var(--u)), 11px); box-shadow: inset 4px 0 0 var(--f-yellow), 0 3px 10px rgba(0, 0, 0, 0.3); }
body:not(.mode-lobby):not(.mode-replay):not(.mode-podium):not(.page-open) #toasts .toast.gold { box-shadow: inset 4px 0 0 #fff, 0 3px 10px rgba(0, 0, 0, 0.3); }
body:not(.mode-lobby):not(.mode-replay):not(.mode-podium):not(.page-open) .callout { top: calc(env(safe-area-inset-top) + var(--edge) + max(46px, calc(50 * var(--u))) + 6px); font-size: max(calc(15 * var(--u)), 13px); -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); padding: 0 8px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
body:not(.mode-lobby):not(.mode-replay):not(.mode-podium):not(.page-open):has(.callout) #toasts { margin-top: 26px; }