/* 俄罗斯方块 · 毛毡绿+金框（纯积分娱乐，无任何真实货币）。视觉沿用 slot-game/uno-game。 */
* { box-sizing:border-box; margin:0; padding:0; }
:root { --felt:#1c6b46; --felt-dark:#145034; --board-deep:#0c3a26; --panel:#fff; --line:#d9e2dc; --ink:#1c2b24; --accent:#0f8a5f; --accent-dark:#0b6b49; --gold:#d4a017; --gold-bright:#f3ce62; --gold-pale:#fff8df; --gold-deep:#8a6400; --red:#d63031; --gray:#7a8a80; }
body { font-family:"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif; min-height:100vh; color:var(--ink); background:linear-gradient(160deg,#07180f 0%,#10281d 48%,#07180f 100%); background-attachment:fixed; }
button, input { font:inherit; } button { -webkit-tap-highlight-color:transparent; } a { color:inherit; } .hidden { display:none !important; } .app { max-width:1080px; margin:0 auto; padding:18px 16px 26px; position:relative; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; } .brand { display:flex; align-items:center; gap:12px; }
.brand-badge { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:28px; background:linear-gradient(160deg,var(--felt),#0b3a27); border:2px solid var(--gold-bright); box-shadow:0 0 18px rgba(243,206,98,.25); }
.brand-copy h1 { color:#fff; font-size:26px; letter-spacing:1px; } .brand-en { font-size:12px; color:var(--gold-bright); letter-spacing:3px; margin-left:6px; }
.slogan { color:#bcd6c8; font-size:12.5px; margin-top:2px; } .slogan b { color:var(--gold-bright); } .topbar-side { display:flex; align-items:center; gap:10px; }
.conn-tag { display:inline-flex; align-items:center; gap:7px; background:rgba(0,0,0,.35); color:#cfe3d7; border:1px solid #3d5c4c; padding:7px 12px; border-radius:999px; font-size:13px; cursor:pointer; }
.conn-dot { width:8px; height:8px; border-radius:50%; background:var(--gray); }
.conn-tag.online .conn-dot { background:#35d07f; } .conn-tag.connecting .conn-dot { background:var(--gold-bright); } .conn-tag.offline .conn-dot { background:var(--red); }
.btn { background:var(--accent); color:#fff; border:1px solid transparent; padding:10px 18px; border-radius:10px; font-size:15px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.btn:hover { background:var(--accent-dark); } .btn:disabled { opacity:.45; cursor:not-allowed; } .btn.big { font-size:17px; padding:13px 22px; } .btn.small { padding:6px 12px; font-size:13px; border-radius:8px; }
.btn.alt { background:#2563a8; } .btn.warn { background:var(--gold); color:#332500; } .btn.ghost { background:transparent; color:#cfe3d7; border-color:#3d5c4c; }
.btn.gold { background:linear-gradient(180deg,#f8dc86 0%,var(--gold) 55%,#ac7c08 100%); color:#2f2300; border-color:#ffe8a5; }
.card-panel { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:0 6px 22px rgba(0,0,0,.35); }
.panel-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:10px; } .panel-head h2 { font-size:15px; }
.tag { background:var(--gold-pale); color:var(--gold-deep); border:1px solid #ecd9a0; font-size:12px; padding:3px 9px; border-radius:999px; font-weight:700; }
.stats-panel { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; text-align:center; } .stat span { display:block; font-size:12px; color:var(--gray); }
.stat b { font-size:20px; font-variant-numeric:tabular-nums; } .layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:14px; align-items:start; }
.play-col { min-width:0; } .side-col { display:grid; gap:14px; } .board-panel { background:linear-gradient(180deg,#fff,#f4f7f3); }
.board-wrap { display:grid; place-items:center; } #board { background:var(--board-deep); border:3px solid var(--gold); border-radius:10px; box-shadow:0 0 22px rgba(212,160,23,.4); max-width:100%; height:auto; }
.board-foot { display:flex; justify-content:space-between; gap:10px; margin-top:10px; font-size:13px; color:var(--gray); flex-wrap:wrap; } .status-line { font-weight:700; color:var(--accent-dark); }
.board-note { color:#9db8a9; font-size:12px; margin-top:10px; } .board-note b { color:var(--gold-bright); } .bet-levels { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:10px; }
.bet-level { padding:8px 4px; border-radius:8px; border:1.5px solid var(--line); background:#fbfdfc; font-weight:800; cursor:pointer; font-size:13px; }
.bet-level.active { border-color:var(--gold); background:var(--gold-pale); color:var(--gold-deep); } .bet-level:disabled { opacity:.4; cursor:not-allowed; } .allin-btn { width:100%; margin-bottom:10px; }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; } .btn-row .btn { flex:1; }
.low-chips { display:flex; align-items:center; gap:8px; margin-top:10px; background:#fdf3f2; border:1px solid #eecac7; border-radius:8px; padding:8px 10px; font-size:12.5px; color:var(--warn); } .acct-form { display:grid; gap:8px; }
.acct-form input { padding:9px 11px; border:1px solid #b9ccc1; border-radius:8px; font-size:14px; background:#fbfdfc; color:var(--ink); outline:none; } .acct-form input:focus { border-color:var(--accent); }
.acct-info { display:grid; gap:8px; } .acct-line { display:flex; align-items:center; gap:8px; font-weight:700; } .acct-line.small { font-size:12.5px; color:var(--gray); font-weight:400; }
.next-panel canvas { display:block; margin:0 auto; background:var(--board-deep); border-radius:8px; } .curve-list { display:grid; gap:5px; }
.curve-row { display:flex; justify-content:space-between; font-size:13px; padding:5px 9px; border-radius:7px; background:#f6f9f6; } .curve-row b { color:var(--gold-deep); } .curve-row.hot { background:var(--gold-pale); }
.curve-note { font-size:11.5px; color:var(--gray); margin-top:8px; } .empty-note { color:var(--gray); font-size:12.5px; } .modal { position:fixed; inset:0; background:rgba(4,16,10,.66); display:grid; place-items:center; z-index:50; }
.modal-card { background:var(--panel); border-radius:18px; padding:26px 30px; width:min(400px,92vw); box-shadow:0 20px 60px rgba(0,0,0,.5); text-align:center; }
.settle-title { font-size:15px; letter-spacing:6px; color:var(--gray); margin-bottom:14px; } .settle-score span, .settle-mult span, .settle-payout span { font-size:12.5px; color:var(--gray); letter-spacing:4px; display:block; }
.settle-score b { font-size:46px; font-variant-numeric:tabular-nums; } .settle-mult b { font-size:26px; color:var(--accent); margin:6px 0; }
.settle-payout b { font-size:34px; color:var(--gold); } .settle-payout.lose b { color:var(--warn); } .settle-note { font-size:12px; color:var(--gray); margin:12px 0 16px; }
.toast { position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(20px); background:#12271c; color:#fff; padding:10px 18px; border-radius:10px; font-size:13.5px; opacity:0; pointer-events:none; transition:opacity .2s; z-index:60; max-width:88vw; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); } .page-foot { text-align:center; color:#7fa08e; font-size:12px; margin-top:22px; } .page-foot b { color:var(--gold-bright); }
@media (max-width:900px) { .layout { grid-template-columns:1fr; } }