/* Miracle High-Low Card — dark-first */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700&family=Barlow:wght@400;600&display=swap');
.mhl-root*,.mhl-root *::before,.mhl-root *::after{box-sizing:border-box;margin:0;padding:0}
.mhl-root{--bg:#0d1117;--card:#161b22;--card2:#1c2330;--gold:#D4AF37;--gold2:#f5d76e;--ink:#e6edf3;--muted:#8b949e;--line:rgba(255,255,255,.07);--green:#3fb950;--danger:#f85149;--red:#e53935;--black:#e6edf3;font-family:'Barlow',sans-serif;color:var(--ink);background:var(--bg);min-height:100vh;padding:16px 12px 32px}
html:not([data-theme="dark"]) .mhl-root{--bg:#f0f4f8;--card:#fff;--card2:#f6f8fa;--ink:#1a2744;--muted:#6b7280;--line:rgba(0,0,0,.08);--black:#1a1a1a}
.mhl-card{max-width:420px;margin:0 auto;background:var(--card);border-radius:20px;padding:22px 18px 28px;box-shadow:0 8px 40px rgba(0,0,0,.5);position:relative}
.mhl-head{text-align:center;margin-bottom:14px}
.mhl-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(26px,7vw,38px);text-transform:uppercase;background:linear-gradient(160deg,var(--gold2),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:1px}
.mhl-sub{color:var(--muted);font-size:13px;margin-top:2px}
.mhl-hud{display:flex;gap:8px;margin-bottom:14px}
.mhl-hud-item{flex:1;background:var(--card2);border-radius:10px;padding:8px 10px;text-align:center;border:1px solid var(--line)}
.mhl-hud-val{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;color:var(--gold)}
.mhl-hud-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
/* Playing card */
.mhl-stage{display:flex;justify-content:center;align-items:center;gap:16px;margin-bottom:18px;min-height:130px}
.mhl-playing-card{width:88px;height:122px;border-radius:10px;background:#fff;border:2px solid #ddd;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:36px;font-weight:700;box-shadow:0 4px 16px rgba(0,0,0,.4);position:relative;flex-shrink:0}
.mhl-playing-card .mhl-suit-tl{position:absolute;top:6px;left:8px;font-size:13px;line-height:1}
.mhl-playing-card .mhl-suit-br{position:absolute;bottom:6px;right:8px;font-size:13px;line-height:1;transform:rotate(180deg)}
.mhl-playing-card.red{color:var(--red)}
.mhl-playing-card.black{color:#1a1a1a}
.mhl-playing-card.face-down{background:linear-gradient(135deg,#1a3a5c,#0d2137);border-color:#2a5080;font-size:28px}
.mhl-arrow{font-size:28px;color:var(--muted);flex-shrink:0}
/* History strip */
.mhl-history{display:flex;gap:4px;overflow-x:auto;margin-bottom:14px;padding-bottom:4px;min-height:28px}
.mhl-hist-chip{flex-shrink:0;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:700;font-family:'Barlow Condensed',sans-serif}
.mhl-hist-chip.win{background:rgba(63,185,80,.2);color:var(--green);border:1px solid rgba(63,185,80,.3)}
.mhl-hist-chip.loss{background:rgba(248,81,73,.15);color:var(--danger);border:1px solid rgba(248,81,73,.2)}
/* Bet setup */
.mhl-setup{display:flex;align-items:center;gap:10px;margin-bottom:14px;background:var(--card2);border-radius:10px;padding:10px 12px;border:1px solid var(--line)}
.mhl-setup label{color:var(--muted);font-size:13px;flex-shrink:0}
.mhl-bet-input{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--ink);font-size:15px;flex:1;-webkit-appearance:none}
/* Guess buttons */
.mhl-guesses{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.mhl-guess-btn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;padding:14px 0;border-radius:14px;border:0;cursor:pointer;text-transform:uppercase;transition:transform .12s;-webkit-tap-highlight-color:transparent}
.mhl-guess-btn.higher{background:linear-gradient(160deg,#56d364,var(--green));color:#0d1117}
.mhl-guess-btn.lower{background:linear-gradient(160deg,#f85149,#c62020);color:#fff}
.mhl-guess-btn:active{transform:scale(.96)}
.mhl-guess-btn:disabled{opacity:.45;cursor:not-allowed}
.mhl-actions{display:flex;gap:8px;margin-bottom:12px}
.mhl-btn{flex:1;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;padding:11px 0;border-radius:12px;border:0;cursor:pointer;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
.mhl-btn-start{background:linear-gradient(160deg,var(--gold2),var(--gold));color:#1a1a1a}
.mhl-btn-start:disabled{opacity:.5;cursor:not-allowed}
.mhl-btn-cashout{background:var(--card2);color:var(--gold);border:1px solid var(--gold);font-size:14px}
.mhl-btn-cashout:disabled{opacity:.45;cursor:not-allowed}
.mhl-result{text-align:center;min-height:36px;font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;margin-bottom:8px}
.mhl-result.win{color:var(--green)}.mhl-result.loss{color:var(--danger)}.mhl-result.error{color:var(--danger);font-size:13px}
.mhl-sound-btn{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;font-size:16px;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.mhl-sound-btn.is-muted{opacity:.5}
.mhl-notice{text-align:center;padding:12px;border-radius:10px;background:var(--card2);border:1px solid var(--line);font-size:14px;color:var(--muted)}
.mhl-notice a{color:var(--gold)}