/* Okey Club accounts — shared green felt and warm coin palette. */
:root { color-scheme: dark; --club-bg:#081b16; --club-panel:#102a22; --club-line:#2a493e; --club-text:#f3f5ec; --club-muted:#a4b9ad; --club-gold:#e4c179; --club-green:#69dbb1; }
.club-page { background:var(--club-bg); color:var(--club-text); font-size:16px; line-height:1.5; }
.club-shell { max-width:1120px; padding:0 28px 40px; }
.club-bg { display:none; }
.club-header { height:auto; min-height:90px; background:rgba(8,27,22,.96); border-bottom:1px solid var(--club-line); margin-bottom:22px; gap:18px; }
.brand-chip { background:var(--club-gold); box-shadow:none; border-radius:10px; width:46px; height:48px; font-size:20px; }
.brand-copy strong { font-size:16px; letter-spacing:.07em; }
.brand-copy small { font-size:12px; letter-spacing:.08em; color:var(--club-muted); }
.header-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.header-status { font-size:12px; color:var(--club-muted); }
.quiet-button,.text-btn,.password-toggle { min-height:44px; background:transparent; color:#d5e5da; border:1px solid var(--club-line); border-radius:10px; padding:9px 14px; text-decoration:none; font-size:14px; font-weight:600; }
.text-btn,.password-toggle { border-color:transparent; color:var(--club-green); padding-inline:0; }
.quiet-button:hover { background:#1b3a2e; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid var(--club-gold); outline-offset:4px; }
button:disabled { opacity:.48; cursor:not-allowed; }
.auth-view { max-width:460px; margin:36px auto 70px; padding:0; }
.auth-brand { display:none; }
.auth-card { background:var(--club-panel); border:1px solid var(--club-line); padding:32px; border-radius:20px; }
.auth-card h1 { font-size:30px; line-height:1.2; letter-spacing:-.025em; margin:12px 0; }
.auth-card p { font-size:16px; color:var(--club-muted); }
.auth-kicker,.kicker { color:var(--club-gold); font-size:12px; letter-spacing:.13em; }
.auth-tabs { background:#081d16; padding:5px; border:1px solid var(--club-line); margin-top:24px; }
.auth-tab { font-size:14px; min-height:44px; border-radius:9px; color:var(--club-muted); }
.auth-tab.active { background:#214536; color:var(--club-text); }
.auth-form .input-label,.input-label,.sheet-label { font-size:14px; color:#d2e2d7; margin-top:16px; }
.club-input,.sheet-input { font:inherit; width:100%; background:#0a2119; color:var(--club-text); border:1px solid #385749; border-radius:10px; padding:13px 14px; min-height:48px; }
.club-input:focus,.sheet-input:focus { outline:none; border-color:var(--club-green); box-shadow:0 0 0 3px #69dbb120; }
textarea.sheet-input { resize:vertical; }
input::placeholder,textarea::placeholder { color:#8ca395; }
.auth-note { border:0; background:none; padding:0; font-size:14px!important; line-height:1.6; }
.auth-benefits { font-size:12px; gap:8px 16px; color:var(--club-muted); }
.primary-cta,.sheet-create-btn { background:var(--club-green); color:#062017; box-shadow:none; font-size:16px; min-height:50px; border-radius:10px; }
.secondary-cta { background:#193b2e; color:var(--club-text); border:1px solid #325541; font-size:16px; min-height:48px; }
.panel { background:var(--club-panel); border:1px solid var(--club-line); box-shadow:none; border-radius:18px; }
.play-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:30px 0 22px; }
.play-heading h1 { font-size:clamp(30px,4vw,42px); margin:5px 0; line-height:1.2; letter-spacing:-.035em; }
.play-heading p { color:var(--club-muted); margin:8px 0 0; }
.badge { color:var(--club-gold); font-size:12px; background:#e4c1790d; padding:8px 12px; white-space:nowrap; }
.play-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:20px; }
.login-panel,.wallet-card { padding:28px; }
.panel-heading h2 { font-size:24px; line-height:1.3; }
.account-preview { background:transparent; border:0; padding:12px 0; margin:8px 0 16px; }
.account-avatar { width:52px; height:52px; background:#355442; flex-shrink:0; }
.account-preview strong { font-size:16px; overflow-wrap:anywhere; }
.account-preview small { font-size:14px; color:var(--club-muted); }
.profile-shortcut { display:block; margin:12px auto 0; }
.wallet-card { background:linear-gradient(130deg,#263c27,#132e22); display:flex; flex-direction:column; }
.wallet-top { display:flex; justify-content:space-between; align-items:center; }
.coin-mark { color:var(--club-gold); border:1px solid #e4c17966; border-radius:50%; display:grid; place-items:center; width:44px; height:44px; font-size:16px; font-weight:800; }
.wallet-amount { display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin:20px 0 8px; }
.wallet-amount b { font-size:clamp(28px,4vw,46px); font-variant-numeric:tabular-nums; color:var(--club-gold); line-height:1.2; overflow-wrap:anywhere; }
.wallet-amount span { font-size:16px; color:#dacaa0; }
.wallet-card p { color:var(--club-muted); margin:8px 0 26px; }
.wallet-card .secondary-cta { margin-top:auto; display:flex; justify-content:space-between; }
.account-stats { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--club-line); margin:24px 0; padding:24px 0; }
.account-stats div { padding:0 24px; border-right:1px solid var(--club-line); }
.account-stats div:last-child { border:0; }
.account-stats b,.account-stats span { display:block; }
.account-stats b { font-size:28px; font-weight:600; }
.account-stats span { font-size:14px; color:var(--club-muted); margin-top:4px; }
.section-head h2 { font-size:28px; }
.filter-row { flex-wrap:wrap; overflow:visible; gap:8px; }
.filter { background:#102b20; font-size:14px; color:var(--club-muted); padding:10px 16px; min-height:44px; }
.filter.active { background:#245340; color:var(--club-text); border-color:#42765b; }
.create-room-btn { font-size:14px; background:var(--club-green); color:#062017; min-height:44px; margin-left:auto; border-radius:10px; }
.code-form { display:flex; align-items:center; gap:10px; margin:8px 0 24px; flex-wrap:wrap; }
.code-form label { font-size:14px; color:var(--club-muted); }
.code-form .club-input { width:130px; text-transform:uppercase; letter-spacing:.1em; }
.code-form #refreshRoomsBtn { margin-left:auto; }
.room-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.room-card { background:var(--club-panel); border:1px solid var(--club-line); padding:20px; }
.room-main h3 { font-size:20px; }
.room-main p,.room-players span,.room-member-names span,.room-live,.room-code { font-size:12px; color:var(--club-muted); }
.room-players b { font-size:20px; }
.room-join { background:#24553e; font-size:16px; min-height:46px; }
.empty-rooms { grid-column:1/-1; padding:40px; text-align:center; border:1px dashed var(--club-line); border-radius:14px; }
.empty-rooms strong,.empty-rooms span { display:block; font-size:16px; }
.empty-rooms span { color:var(--club-muted); margin-top:8px; }
.profile-preview { padding:16px; }
.profile-preview h3 { font-size:18px; }.profile-preview p { font-size:14px; color:var(--club-muted); }
.mobile-nav { width:min(1120px,100%); background:#0a211af5; border-color:var(--club-line); }
.mobile-tab { min-height:48px; }.mobile-tab small { font-size:14px; letter-spacing:0; }.mobile-tab.active { color:var(--club-green); }
.profile-sheet-panel,.room-sheet-panel { background:var(--club-bg); color:var(--club-text); border:1px solid var(--club-line); padding:28px; width:min(600px,100%); max-height:90dvh; overflow-y:auto; border-radius:20px 20px 0 0; }
.sheet-head h2 { font-size:26px; }.sheet-head p { font-size:14px; color:var(--club-muted); line-height:1.6; }
.sheet-close { width:44px; height:44px; flex-shrink:0; font-size:24px; background:#193a2c; color:#e6f0e8; }
.profile-hero { border-color:var(--club-line); background:var(--club-panel); gap:18px; }
.profile-hero h3 { font-size:24px; }.profile-hero p { font-size:12px; color:var(--club-muted); overflow-wrap:anywhere; }.profile-level { font-size:12px; }
.sheet-section-head { font-size:16px; }.sheet-section-head small,.sheet-label small { font-size:12px; color:var(--club-muted); }
.avatar-choice { background:var(--club-panel); border:2px solid var(--club-line); }.avatar-choice.selected { border-color:var(--club-green); }
.rack-choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.rack-choice { background:var(--club-panel); border:2px solid var(--club-line); padding:8px; color:var(--club-text); border-radius:12px; text-align:left; }.rack-choice img { width:100%; height:52px; object-fit:cover; border-radius:6px; }.rack-choice span { display:block; font-size:14px; margin-top:5px; }.rack-choice.selected { border-color:var(--club-green); }
.profile-account { display:grid; gap:4px; margin:20px 0; overflow-wrap:anywhere; font-size:14px; }.profile-account small { color:var(--club-muted); font-size:12px; }
.profile-stats-grid>div { background:var(--club-panel); border-color:var(--club-line); }.profile-stats-grid b { font-size:24px; }.profile-stats-grid span { font-size:12px; color:var(--club-muted); }
.sheet-cancel-btn { font-size:14px; min-height:44px; color:var(--club-muted); }
.security-details { border-top:1px solid var(--club-line); margin-top:16px; padding-top:20px; }.security-details summary { min-height:44px; cursor:pointer; }.security-details form { padding-top:8px; }
.muted { color:var(--club-muted); font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.wallet-history-heading { display:flex; justify-content:space-between; align-items:center; margin-top:25px; }.wallet-history-heading h3 { font-size:18px; }
.transaction { padding:18px 0; border-bottom:1px solid var(--club-line); display:grid; grid-template-columns:1fr auto; gap:8px 16px; }.transaction p { margin:0; overflow-wrap:anywhere; }.transaction small { font-size:12px; color:var(--club-muted); display:block; margin-top:5px; }.transaction .delta { font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; }.positive { color:var(--club-green); }.negative { color:#ffb3a6; }
.pagination { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:22px 0 0; font-size:14px; color:var(--club-muted); }
.toast { z-index:1000; font-size:14px; max-width:650px; right:auto; bottom:92px; }.toast.success { background:#173e2c; border-color:#42765b; color:#e0f9e9; }.toast.success .toast-icon { background:#39795a; }
.mode-pick,.setting-row,.private-hint { background:var(--club-panel); border-color:var(--club-line); }.mode-pick b,.setting-row b { font-size:16px; }.mode-pick small,.setting-row small,.private-hint { font-size:14px; color:var(--club-muted); }.sheet-section-head small { font-size:12px; }
@media(min-width:800px) { .profile-sheet-panel,.room-sheet-panel { margin:5dvh auto; border-radius:20px; }.mobile-nav { border:1px solid var(--club-line); border-bottom:0; border-radius:18px 18px 0 0; max-width:560px; }.club-page { padding-bottom:90px; } }
@media(max-width:700px) { .club-shell { padding:0 16px 24px; }.club-header { min-height:78px; margin-bottom:16px; }.header-status { display:none; }.brand-copy strong { font-size:14px; }.brand-copy small { font-size:12px; }.header-actions { gap:4px; }.header-actions .quiet-button { padding:8px; }.play-heading { margin-top:22px; align-items:flex-start; }.play-heading>.badge { display:none; }.play-grid { grid-template-columns:1fr; gap:16px; }.login-panel,.wallet-card { padding:22px; }.wallet-card { padding:20px 22px; }.wallet-card p { margin-bottom:12px; }.wallet-amount { margin-top:10px; }.account-stats div { padding:0 12px; }.account-stats span { font-size:12px; }.room-list { grid-template-columns:1fr; }.auth-card { padding:24px; }.auth-view { margin-top:22px; }.profile-sheet-panel,.room-sheet-panel { padding:24px 18px; }.code-form #refreshRoomsBtn { margin-left:0; }.code-form label { width:100%; }.profile-hero h3 { font-size:20px; }.brand { gap:8px; }.create-room-btn { margin-left:0; } }
@media(prefers-reduced-motion:reduce) { .club-page * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }

.auth-view { min-height:auto; } .auth-view.active { display:block; }

.offline-test-cta { display:flex; align-items:center; justify-content:space-between; gap:12px; border-color:#6e613e; background:#2a3327; color:var(--club-text); }
.offline-test-cta small { color:var(--club-gold); font-size:11px; font-weight:800; }
.offline-test-cta:disabled { opacity:.62; cursor:wait; }

.test-login-separator { display:flex; align-items:center; gap:10px; margin:18px 0 12px; color:var(--club-muted); font-size:10px; font-weight:800; letter-spacing:.16em; }
.test-login-separator::before,.test-login-separator::after { content:""; height:1px; background:var(--club-line); flex:1; }
.test-login-btn { width:100%; min-height:50px; border:1px dashed #8b7447; background:#2b3024; color:var(--club-text); border-radius:10px; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; font:inherit; font-weight:800; cursor:pointer; }
.test-login-btn:hover { background:#353a2b; border-color:var(--club-gold); }
.test-login-btn small { color:var(--club-gold); font-size:11px; font-weight:700; }
.test-login-btn:disabled { cursor:wait; opacity:.65; }
.test-login-note { margin:8px 0 0!important; font-size:11px!important; color:#809689!important; }