@import url("/reels/theme.css");
:root{font-family:"Helvetica Neue",Arial,sans-serif;color:white;background:#0b110e;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #ffef66;outline-offset:3px}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}#app{position:relative;width:100%;height:100dvh;overflow:hidden;background:#0b110e;isolation:isolate}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline:none}header{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:13px;padding:max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 0 max(22px,env(safe-area-inset-left));z-index:2}header>a{font-size:30px;line-height:1;text-decoration:none;color:white;min-width:30px;min-height:44px;display:grid;place-items:center}header>span{font-size:10px;letter-spacing:.16em;flex:1}header>button{width:44px;height:44px;border:0;background:none;color:white;font-size:15px;letter-spacing:2px}#wallet{padding:8px 12px;border-radius:10px;background:#ffffff12;box-shadow:inset 0 1px 0 #ffffff50;text-align:right;min-height:44px;display:flex;justify-content:center;flex-direction:column}#wallet>b{font-size:13px;font-weight:400}#wallet>small{font-size:6px;letter-spacing:.15em;color:#ffffff9c;margin-top:4px}.progress-hud{position:absolute;top:16%;left:50%;transform:translateX(-50%);width:min(210px,48%);text-align:center;pointer-events:none}.track{height:5px;border:1px solid #d7f9ffbd;background:#031638a6;padding:1px}.track i{display:block;height:1px;background:#a3f0cb;width:0}.progress-hud>span{display:block;font-size:11px;font-weight:400;margin-top:10px;letter-spacing:.05em}.progress-hud small{font-size:8px;letter-spacing:.1em;margin-top:8px;color:#ffffff9c}#cue{position:absolute;top:38%;left:0;right:0;text-align:center;color:#faffb4;font-size:11px;letter-spacing:.04em;pointer-events:none}#notice{position:absolute;top:29%;left:20px;right:20px;text-align:center;font-size:11px;line-height:1.6;color:#fff8cf;pointer-events:none}.bottom{position:absolute;left:22px;right:22px;bottom:max(25px,env(safe-area-inset-bottom));margin:auto;max-width:245px;z-index:2}.entry-row{display:flex;border-radius:11px;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,#ffffff6b,#ffffff24);box-shadow:inset 1px 1px 0 #ffffffb8,inset -1px -1px 0 #ffffff40,0 10px 25px #03295b30}.primary{position:relative;isolation:isolate;width:100%;min-height:44px;padding:14px 18px;border:0;border-radius:11px;background:linear-gradient(135deg,#ffffff6b,#ffffff24);box-shadow:inset 1px 1px 0 #ffffffb8,inset -1px -1px 0 #ffffff40;color:white;font-size:12px;font-weight:500}.primary:before,.entry-row:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(#ffffff40,transparent 45%);z-index:-1}.entry-row>.primary{background:none;box-shadow:none;border-radius:0;padding-left:42px}.entry-row>.primary:before{display:none}#stakeButton{width:44px;min-width:44px;min-height:44px;border:0;border-left:1px solid #ffffff2b;color:white;font-size:18px;background:none}.menu{position:absolute;right:max(22px,env(safe-area-inset-right));top:76px;min-width:190px;padding:7px;border-radius:12px;background:#d9eeff35;border:1px solid #ffffff3a;box-shadow:inset 0 1px 0 #ffffff60,0 12px 35px #03285b30;z-index:5}.menu>button,.menu>a{display:flex;justify-content:space-between;align-items:center;min-height:44px;width:100%;padding:10px 12px;background:none;border:0;color:white;font-size:11px;text-align:left;text-decoration:none}.menu span{color:#ffffff9c}.veil{position:absolute;inset:0;z-index:6;display:flex;align-items:flex-end;justify-content:center;padding:14px;background:#072d6120}.sheet{position:relative;width:100%;max-width:340px;max-height:85dvh;overflow:auto;border-radius:21px;padding:27px;background:#e8f4fa45;border:1px solid #ffffff46;box-shadow:inset 0 1px 0 #ffffff80,0 18px 48px #021a4630;color:white}.close{position:absolute;right:8px;top:8px;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:white;font-size:22px}.sheet h2{font-size:27px;font-weight:400;letter-spacing:-.04em;margin:15px 30px 19px 0}.sheet p,.sheet li{font-size:11px;line-height:1.7;color:#ffffffdf}.sheet ul{padding-left:17px}.sheet .eyebrow{font-size:8px;letter-spacing:.15em;color:#ffffffa9}.stakes{display:flex;gap:8px;margin:20px 0}.stakes button{flex:1;min-height:44px;border:1px solid #ffffff4a;border-radius:7px;background:#ffffff12;color:white;font-size:13px}.stakes button[aria-pressed=true]{background:#ffffff4a;border-color:#ffffffaa}.custom{display:flex;align-items:center;justify-content:space-between;margin:18px 0 23px;font-size:11px;color:#ffffffcb}.custom>span{border-bottom:1px solid #ffffff50;padding:8px 0}.custom input{width:78px;color:white;border:0;background:none;text-align:right;font-size:13px;outline:none}.text-button{min-height:44px;background:none;border:0;color:#ffffffe5;font-size:11px;width:100%;margin-top:5px}.result{font-size:50px;font-weight:300;letter-spacing:-.06em;margin:20px 0 3px}.result-line{display:flex;justify-content:space-between;align-items:center;font-size:11px;padding:12px 0;border-top:1px solid #ffffff30}.result-line>span{color:#ffffffb5}.result-line>b{font-weight:500}.embedded header{display:none}.embedded .progress-hud{top:13%}@media(min-width:700px){header{padding:24px 30px 0}.progress-hud{top:14%;width:240px}.bottom{bottom:28px}.veil{padding-bottom:20px}.embedded .progress-hud{top:13%}}@media(orientation:landscape) and (max-height:500px){header{padding-top:10px}.progress-hud,.embedded .progress-hud{top:17%;width:180px}.progress-hud>span{font-size:9px;margin-top:7px}.bottom{bottom:18px}#cue{top:32%}.sheet{max-height:calc(100dvh - 24px);padding:21px}.sheet h2{font-size:23px;margin-top:9px}.sheet p,.sheet li{font-size:10px}.stakes{margin:12px 0}.custom{margin:12px 0 16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Full-screen touch input; chrome stays clear of phone notches and the home indicator. */
header>a{min-width:44px}.bottom{bottom:max(25px,calc(env(safe-area-inset-bottom) + 12px));left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right))}.menu{right:max(22px,calc(env(safe-area-inset-right) + 12px))}.veil{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));padding-bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px))}.custom input{min-height:44px}.sheet .text-button{min-height:44px}@media(orientation:landscape) and (max-height:500px){.bottom{bottom:max(18px,calc(env(safe-area-inset-bottom) + 8px))}.sheet{max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))}.custom{margin:7px 0 12px}.custom>span{padding:0}.stakes{margin:9px 0}.sheet p,.sheet li{line-height:1.55}}

.embedded .progress-hud{top:max(13%,calc(env(safe-area-inset-top) + 76px))}@media(orientation:landscape) and (max-height:500px){.embedded .progress-hud{top:max(76px,calc(env(safe-area-inset-top) + 66px));width:160px}.embedded #cue{top:32%}}

/* Shared charcoal-and-green platform controls. */
.entry-row,.play-row{background:linear-gradient(135deg,#25352ae6,#101b14d6);border:1px solid #d6f4c72b;box-shadow:inset 0 1px 0 #e4ffda33,0 10px 32px #0004}.primary,body[data-game=metro] .primary{background:linear-gradient(135deg,#b8ef79,#83d849);color:#14220f;border:1px solid #d8ffa7;text-shadow:none;box-shadow:inset 0 1px 0 #f7ffe499,0 9px 24px #0003}.entry-row>.primary,.play-row>.primary{border:0;background:none;color:#eff9e9;box-shadow:none}.stake-toggle,#stakeButton{color:#d4efc3;border-left-color:#ddf9d51f}.menu,.sheet,.result-card{background:linear-gradient(145deg,#243328ed,#111c15e8);color:#eef8e8;border-color:#c7f0bb36;box-shadow:inset 0 1px 0 #deffd52e,0 18px 50px #0005}.menu a,.menu button,.sheet h2,.sheet label,.sheet input,.sheet-head button,.close{color:#edf7e7}.sheet p,.sheet li,.sheet small,.sheet .eyebrow,.menu span,.result-card p{color:#bacdb2}.stakes button,.stake-options button{color:#d9ead2;border-color:#d6f4c72b}.stakes button[aria-pressed=true],.stake-options button[aria-pressed=true]{background:#b5ed7326;border-color:#b5ed73;color:#dfffbc}.custom input,.custom-label input,.sheet input{color:#eef8e8}.text-button,.practice-entry,.drawer-rules{color:#c6dfb8}.result-line{border-color:#d6efc922}.result-line b{color:#f0f8e8}.sheet::backdrop{background:#07120c66}

/* The UI shares the course palette; only the actual playfield edges glow. */
.progress-hud{width:min(194px,46%)}.track{height:3px;padding:0;border:0;border-radius:3px;background:#c7e9b820;box-shadow:inset 0 1px 0 #0004;overflow:hidden}.track i{height:3px;border-radius:3px;background:#a3f0cb;box-shadow:0 0 9px #a3f0cb40}.progress-hud>span{color:#d9e8cf;font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.12em}.progress-hud small{color:#abc09f}#cue{color:#c7d7bd;font-size:10px;opacity:.75}#notice{color:#e1eacb}#wallet{background:#b0d49d0d;box-shadow:inset 0 1px 0 #d9f3cc26}button:focus-visible,a:focus-visible,input:focus-visible{outline-color:#a3f0cb}.veil{background:#07100b30}.menu{}.sheet{}

/* Performance: no backdrop blur anywhere — it re-blurs the live canvas on every frame in WKWebView. Chrome uses opaque tints instead. */
#wallet{background:#141a16d9}.menu,.sheet{background:linear-gradient(145deg,#243328f7,#111c15f5)}
.track{height:4px;background:#e6f5dc1f}.track i{height:4px}.progress-hud>span{font-weight:600;color:#eef8e6;font-size:11px}

/* Soft Arcade tokens (reels/theme.css). Blur only on idle/modal chrome: during a run the entry row is hidden and menus pause rendering. */
:root{font-family:var(--sa-font);background:var(--sa-bg)}#app{background:var(--sa-bg)}
button:focus-visible,a:focus-visible,input:focus-visible{outline-color:var(--sa-mint)}
.bottom{left:50%;right:auto;transform:translateX(-50%);width:var(--sa-primary-width);max-width:none;bottom:var(--sa-safe-bottom);margin:0}
.entry-row{min-height:var(--sa-primary);border-radius:var(--sa-radius-m);border:1px solid var(--sa-line);background:var(--sa-surface);backdrop-filter:var(--sa-blur);-webkit-backdrop-filter:var(--sa-blur);box-shadow:var(--sa-highlight),var(--sa-shadow)}
.entry-row>.primary{min-height:calc(var(--sa-primary) - 2px);padding-left:var(--sa-control);font-size:var(--sa-fs-button);color:var(--sa-text)}
.entry-row>.primary:disabled{color:var(--sa-text-2);opacity:1}
.entry-row:has(>.primary:not(:disabled)){background:var(--sa-mint-fill);border-color:rgba(214,255,234,.7)}
.entry-row:has(>.primary:not(:disabled))>.primary,.entry-row:has(>.primary:not(:disabled))>#stakeButton{color:var(--sa-mint-ink)}
#stakeButton{width:var(--sa-control);font-size:18px;color:var(--sa-text-2);border-left-color:var(--sa-line)}
.primary:not(.entry-row>.primary){background:var(--sa-mint-fill);color:var(--sa-mint-ink);min-height:var(--sa-primary);border-radius:var(--sa-radius-m);font-size:var(--sa-fs-button);font-weight:var(--sa-weight-strong)}
.menu,.sheet{background:var(--sa-surface-strong);border-color:var(--sa-line);backdrop-filter:var(--sa-blur-strong);-webkit-backdrop-filter:var(--sa-blur-strong);box-shadow:var(--sa-highlight),var(--sa-shadow-lg)}
.menu{border-radius:var(--sa-radius-m)}.sheet{border-radius:var(--sa-radius-l)}.veil{background:var(--sa-scrim);padding-bottom:var(--sa-safe-bottom)}
.stakes button{min-height:48px;border-radius:var(--sa-radius-s)}.stakes button[aria-pressed=true]{background:var(--sa-mint-soft);border-color:var(--sa-mint);color:var(--sa-mint)}
.track i{background:var(--sa-mint);box-shadow:0 0 9px var(--sa-mint-glow)}.progress-hud>span{font-size:var(--sa-fs-caption);color:var(--sa-text-2)}.embedded .progress-hud{top:var(--sa-chrome-clearance)}
.result{font-size:var(--sa-fs-result);color:var(--sa-mint);font-variant-numeric:tabular-nums}
/* v5 ladder: gold cash-out after the first checkpoint. */
#cashout{position:absolute;left:22px;right:22px;bottom:max(25px,env(safe-area-inset-bottom));margin:auto;max-width:300px;height:72px;z-index:3;border:0;border-radius:22px;background:linear-gradient(180deg,#ffe08a,#ffc94a);color:#2a1d00;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 14px 44px #ffc94a55,inset 0 1px #fff8;touch-action:manipulation;-webkit-user-select:none;user-select:none;font:inherit}
#cashout[hidden]{display:none}
#cashout span{font-size:12px;font-weight:800;letter-spacing:.16em;opacity:.8}#cashout b{font-size:25px;font-weight:800;font-variant-numeric:tabular-nums}
#cashout:active{transform:scale(.98)}
#completion{font-size:24px!important;font-weight:650!important;letter-spacing:-.01em!important;font-variant-numeric:tabular-nums;text-shadow:0 2px 14px #000a}
/* Odds, rules and results copy is disclosure: 12 px and up (mates-core#26, docs/design §4.5). */
.sheet p,.sheet li,.result-line,.custom,.menu>button,.menu>a{font-size:var(--sa-fs-fine)}
.sheet .eyebrow{font-size:var(--sa-fs-micro)}
/* Quick stakes beside Play (mates-games#73). */
.entry-row>.primary{padding-left:14px}
.stake-quick{width:40px;min-width:40px;min-height:44px;border:0;border-left:1px solid #ffffff2b;border-radius:0;background:none;color:inherit;font-size:15px;font-weight:800}
.stake-quick:disabled{opacity:.4}
/* Swipes over the result card and HUD never select text. */
.sheet,#sheetContent,.hud,header,.top{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
