:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #edf4f8; color: #152638; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-width: 320px; background: #edf4f8; }
button { font: inherit; touch-action: manipulation; }
.app-shell { min-height: 100dvh; max-width: 820px; margin: 0 auto; background: #fff; box-shadow: 0 0 36px rgba(23, 58, 88, .12); }
.screen { min-height: 100dvh; }
.hidden { display: none !important; }
.apply-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 28px calc(48px + env(safe-area-inset-bottom)); text-align: center; }
.brand-mark { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 30px; background: linear-gradient(145deg, #1e76aa, #103a5b); color: #fff; font-size: 68px; font-weight: 800; box-shadow: 0 12px 28px rgba(20, 78, 117, .28); }
h1 { margin: 22px 0 8px; color: #123c5c; letter-spacing: .08em; }
.subtle, .hint { color: #647789; }
.hint { font-size: 14px; }
.primary-button, .secondary-button, .danger-button { min-height: 58px; border: 0; border-radius: 14px; color: #fff; font-weight: 750; font-size: 21px; cursor: pointer; }
.primary-button { width: min(100%, 360px); margin: 24px 0 4px; background: #1d78af; box-shadow: 0 8px 18px rgba(29,120,175,.25); }
.primary-button:disabled { background: #aab5bd; box-shadow: none; }
.topbar { display: flex; align-items: center; min-height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; border-bottom: 1px solid #dce6ed; gap: 12px; }
.icon-button { border: 0; background: #eef4f7; border-radius: 9px; width: 36px; height: 36px; font-size: 21px; }
#machine-label { flex: 1; color: #123c5c; }
.connection { font-size: 13px; font-weight: 700; color: #9a6a00; }
.connection.online { color: #138444; }.connection.offline { color: #c33232; }
.marquee { margin: 0; padding: 8px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: #5c6e7b; background: #f5f9fb; }
.video-panel { position: relative; aspect-ratio: 4 / 3; background: #05080b; overflow: hidden; }
video { width: 100%; height: 100%; object-fit: contain; background: #05080b; }
.video-message { position: absolute; inset: 0; display: grid; place-items: center; color: #c8d4dc; font-size: 14px; }
.score-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 10px; border-bottom: 1px solid #dde6ec; text-align: center; }
.score-panel div { min-width: 0; }.score-panel span { display: block; color: #778896; font-size: 12px; }.score-panel strong { display: block; overflow: hidden; color: #c83232; font-size: clamp(23px, 7vw, 42px); line-height: 1.22; text-overflow: ellipsis; white-space: nowrap; }
.bet-panel { display: grid; grid-template-columns: repeat(5, minmax(52px, 1fr)); gap: 8px; padding: 13px 10px; }
.bet-button { position: relative; min-height: 72px; border: 7px solid currentColor; border-radius: 50%; background: #fff; color: #1c2730; font-size: clamp(27px, 8vw, 46px); font-weight: 800; cursor: pointer; user-select: none; }
.bet-button.red { color: #c83232; }.bet-button.gold { color: #bd8100; }.bet-button:active { transform: scale(.94); background: #fff2c3; }
.bet-button small { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); color: #566875; font-size: 12px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 27px 12px calc(16px + env(safe-area-inset-bottom)); }
.secondary-button { background: #1d78af; }.danger-button { background: #c73b3b; }
.menu { position: fixed; z-index: 5; top: calc(58px + env(safe-area-inset-top)); left: max(10px, calc((100vw - 820px)/2 + 10px)); display: grid; min-width: 168px; padding: 8px; gap: 4px; background: #fff; border: 1px solid #d7e2e9; border-radius: 12px; box-shadow: 0 10px 28px rgba(20,47,66,.22); }
.menu button { padding: 12px; border: 0; border-radius: 8px; background: #f1f6f8; text-align: left; }.menu .menu-danger { color: #bb2929; background: #fff1f1; }
.toast { position: fixed; z-index: 10; bottom: calc(22px + env(safe-area-inset-bottom)); left: 50%; max-width: calc(100vw - 36px); transform: translateX(-50%); padding: 11px 15px; border-radius: 10px; background: rgba(20,38,54,.92); color: #fff; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
@media (min-width: 720px) { .game-screen { min-height: 0; }.video-panel { max-height: 470px; }.bet-panel { gap: 16px; padding: 20px; }.bet-button { min-height: 110px; } }