/* Sign-in modal, account chip, plan badges, locked tanks, leaderboard — shared by play.html, account.html, pro.html */
.si-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(4,5,3,0.78); backdrop-filter: blur(3px); padding: 16px; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #e8ecdc; }
.si-panel { position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: linear-gradient(180deg, #1c2116, #12150e); border: 1px solid rgba(242,193,78,0.35); box-shadow: 0 20px 60px rgba(0,0,0,0.6); padding: 26px 24px 18px; }
.si-panel h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: 0.04em; }
.si-panel label { display: block; margin: 12px 0 4px; font-size: 13px; color: #b9c0a6; }
.si-panel label.chk { display: flex; gap: 10px; align-items: flex-start; color: #e8ecdc; font-size: 14px; }
.si-panel label.chk input { margin-top: 4px; width: 18px; height: 18px; accent-color: #f2c14e; }
.si-panel input:not([type=checkbox]) { width: 100%; min-width: 0; padding: 10px 12px; background: #0c0e09; border: 1px solid rgba(170,180,140,0.35); color: #fff; font: inherit; border-radius: 3px; }
.si-panel input:focus-visible, .si-panel button:focus-visible { outline: 2px solid #f2c14e; outline-offset: 2px; }
.si-panel a { color: #f2c14e; }
.si-panel .btn { cursor: pointer; }
.si-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: #9ca38b; font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.si-x:hover { color: #fff; }
.si-reason { margin: 0 0 14px; color: #c9cfb8; font-size: 14px; }
.si-providers { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-top: 12px; }
.si-google, .si-apple { display: flex; justify-content: center; min-height: 44px; }
.si-gbtn, .si-abtn { width: 280px; max-width: 100%; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 4px; font: 500 15px system-ui, sans-serif; cursor: pointer; }
.si-gbtn { background: #131314; color: #e3e3e3; border: 1px solid #8e918f; }
.si-gbtn b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #4285f4; font: 700 15px system-ui; }
.si-abtn { background: #000; color: #fff; border: 1px solid #555; }
.si-abtn svg { width: 18px; height: 18px; }
.si-loading { color: #9ca38b; font-size: 13px; align-self: center; }
.si-or { display: flex; align-items: center; gap: 10px; color: #8d947c; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; margin: 18px 0 2px; }
.si-or::before, .si-or::after { content: ''; flex: 1; height: 1px; background: rgba(170,180,140,0.25); }
.si-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: stretch; }
.si-email .si-row { margin-top: 0; flex-wrap: nowrap; } .si-email .si-row input { flex: 1; }
.si-ts { margin-top: 10px; min-height: 0; }
.si-code { display: flex; gap: 8px; justify-content: center; margin: 8px 0 4px; }
.si-panel .si-digit { width: 46px; height: 56px; padding: 0; text-align: center; font: 700 26px ui-monospace, monospace; }
.si-fine { font-size: 12px; color: #8d947c; margin: 14px 0 0; }
.si-status { min-height: 1.4em; margin: 10px 0 0; font-size: 13px; color: #b9c0a6; }
.si-status.err { color: #ff8a7a; }
.si-modal.busy .si-panel { cursor: progress; } .si-modal.busy button { opacity: 0.6; pointer-events: none; }
@media (max-width: 420px) { .si-panel .si-digit { width: 40px; height: 50px; font-size: 22px; } .si-panel { padding: 22px 16px 14px; } }

/* account chip + plan badges */
.acct-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid rgba(170,180,140,0.3); background: rgba(20,24,15,0.8); color: #e8ecdc; text-decoration: none; font-size: 13px; cursor: pointer; font-family: inherit; }
.acct-chip:hover { border-color: #f2c14e; }
.badge { display: inline-block; padding: 1px 7px; font: 700 11px ui-monospace, monospace; letter-spacing: 0.08em; border-radius: 2px; vertical-align: middle; }
.badge.free { background: #3a4430; color: #d8e0c4; } .badge.pro { background: linear-gradient(#e8b94a, #a87a1c); color: #1a1203; } .badge.guest { background: #333; color: #bbb; } .badge.trial { background: #2c4a6a; color: #d6ecff; }
/* plan gating in the lobby */
.tank-card.locked { opacity: 0.62; position: relative; }
.tank-card.locked::after { content: 'PRO'; position: absolute; top: 4px; right: 6px; font: 700 10px ui-monospace, monospace; color: #f2c14e; }
.gate { border: 1px dashed rgba(242,193,78,0.5); background: rgba(242,193,78,0.06); padding: 10px 12px; margin: 8px 0; font-size: 13px; }
.gate .btn { margin-top: 8px; }
.gate a { color: #f2c14e; }
/* leaderboard */
.lb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lb-table th, .lb-table td { padding: 5px 8px; text-align: right; border-bottom: 1px solid rgba(170,180,140,0.15); }
.lb-table th:nth-child(2), .lb-table td:nth-child(2) { text-align: left; }
.lb-table tr.me td { color: #f2c14e; }
.lb-modal .si-panel { width: min(640px, 100%); }
.lb-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.lb-filters select { background: #0c0e09; color: #e8ecdc; border: 1px solid rgba(170,180,140,0.35); padding: 6px 8px; font: inherit; }

/* account.html / pro.html */
.acct-page { max-width: 880px; margin: 0 auto; padding: 32px 20px 60px; }
.acct-page h1.page-title { font: 800 clamp(30px, 5vw, 44px)/1.1 system-ui; letter-spacing: 0.02em; margin: 0 0 18px; text-shadow: none; }
.card { background: linear-gradient(180deg, #1a1e14, #12140e); border: 1px solid rgba(170,180,140,0.18); padding: 18px 20px; margin: 0 0 16px; }
.card h2 { font-size: 19px; margin: 0 0 10px; letter-spacing: 0.03em; }
.card p { margin: 6px 0; }
.card .muted, .acct-page .muted { color: #9ca38b; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-size: 15px; }
.kv dt { color: #9ca38b; } .kv dd { margin: 0; overflow-wrap: anywhere; }
.acct-page form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 0; }
.acct-page input[type=text], .acct-page input:not([type]) { flex: 1 1 220px; min-width: 0; padding: 10px 12px; background: #0c0e09; border: 1px solid rgba(170,180,140,0.35); color: #fff; font: inherit; }
.acct-page .btn { padding: 10px 18px; cursor: pointer; font: 700 13px system-ui; }
.acct-page .btn.danger { background: #4a1712; border-color: #a33a2c; color: #ffd9d2; }
.msg { min-height: 1.3em; font-size: 14px; margin: 6px 0 0; } .msg.ok { color: #9fd47a; } .msg.err { color: #ff8a7a; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.stat-box { background: rgba(0,0,0,0.25); border: 1px solid rgba(170,180,140,0.15); padding: 10px; text-align: center; }
.stat-box b { display: block; font: 800 24px system-ui; color: #f2c14e; } .stat-box span { font-size: 12px; color: #9ca38b; text-transform: uppercase; letter-spacing: 0.08em; }
.devices { list-style: none; padding: 0; margin: 0; font-size: 14px; } .devices li { padding: 4px 0; border-bottom: 1px solid rgba(170,180,140,0.1); }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
/* pro page */
.pro-hero { text-align: center; padding: 20px 0 10px; }
.pro-hero h1 { font: 900 clamp(40px, 8vw, 72px)/1 system-ui; margin: 0 0 10px; letter-spacing: 0.06em; }
.price { font: 800 30px system-ui; margin: 8px 0 0; } .price small { font: 400 15px system-ui; color: #9ca38b; }
.trial-note { color: #9fd47a; font-weight: 600; margin: 4px 0 0; }
.cmp { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 15px; }
.cmp th, .cmp td { padding: 10px 12px; border-bottom: 1px solid rgba(170,180,140,0.15); text-align: left; vertical-align: top; }
.cmp th[scope=col] { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca38b; }
.cmp td.pro { background: rgba(242,193,78,0.06); }
.buy { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 18px 0 0; }
.buy form { justify-content: center; }
.buy .btn.primary { font-size: 16px; padding: 14px 30px; }
.fine { font-size: 13px; color: #9ca38b; text-align: center; max-width: 620px; margin: 8px auto 0; }
html.native .buy-only { display: none !important; }