/* Colors come from Telegram's theme variables so the page follows whatever theme the
   player has set in their client. The fallbacks after each var() are what a desktop
   browser sees during local development, where Telegram sets none of them. */
:root {
    --bg: var(--tg-theme-bg-color, #ffffff);
    --text: var(--tg-theme-text-color, #1c1c1e);
    --hint: var(--tg-theme-hint-color, #8e8e93);
    --card: var(--tg-theme-secondary-bg-color, #f2f2f7);
    --link: var(--tg-theme-link-color, #2f7bd8);
    --button: var(--tg-theme-button-color, #2f7bd8);
    --button-text: var(--tg-theme-button-text-color, #ffffff);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 0 32px;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.hall-header { padding: 20px 16px 8px; }
.hall-header h1 { margin: 0; font-size: 22px; font-weight: 600; }

.state { padding: 24px 16px; color: var(--hint); text-align: center; }

.game-list { list-style: none; margin: 0; padding: 8px 16px; display: grid; gap: 10px; }

.game {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.game[disabled] { cursor: default; opacity: 0.55; }

.game-text { flex: 1; min-width: 0; }
.game-title { font-weight: 600; }
/* Long titles truncate rather than pushing the status out of the row. */
.game-title, .game-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-note { margin-top: 2px; font-size: 13px; color: var(--hint); }
.game-go { flex: none; font-size: 13px; color: var(--link); }

.sheet {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
}

/* `display: flex` above outranks the browser's own `[hidden] { display: none }`, so without
   this the sheet showed on load, empty, and closing it (sheet.hidden = true) changed nothing. */
.sheet[hidden] { display: none; }

.sheet-body {
    width: 100%;
    max-width: 480px;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    background: var(--bg);
    display: grid;
    gap: 12px;
}

.sheet-message { margin: 0; }

.sheet-action {
    padding: 12px;
    border: 0;
    border-radius: 10px;
    background: var(--button);
    color: var(--button-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.sheet-close {
    padding: 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--hint);
    font: inherit;
    cursor: pointer;
}

/* --- the wallet (design 2026-10-08 §2.3) --- */

/* Same reason as .sheet[hidden]: these set display, which would otherwise outrank [hidden]. */
.wallet[hidden], .withdraw-form[hidden], main[hidden] { display: none; }

.wallet { padding: 8px 16px 24px; display: grid; gap: 12px; }

.wallet-card { padding: 16px; border-radius: 12px; background: var(--card); }
.wallet-label { margin: 0; font-size: 13px; color: var(--hint); }
.wallet-balance { margin: 4px 0 0; font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }

.wallet-heading { margin: 8px 0 0; font-size: 16px; font-weight: 600; }

.deposit-list { display: grid; gap: 12px; }
.deposit { display: grid; gap: 8px; justify-items: center; padding: 16px; border-radius: 12px; background: var(--card); }
.deposit-chain { font-weight: 600; justify-self: start; }
.deposit-qr svg { display: block; width: 180px; height: 180px; background: #ffffff; border-radius: 8px; }
.deposit-address { width: 100%; font: 13px/1.4 ui-monospace, Menlo, monospace; word-break: break-all; text-align: center; }
.deposit-memo-label { justify-self: start; font-weight: 600; }

.withdraw-form { display: grid; gap: 10px; }
.withdraw-form input, .withdraw-form select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--card);
    border-radius: 10px;
    background: var(--card);
    color: var(--text);
    font: inherit;
}

.hint { margin: 0; font-size: 13px; color: var(--hint); }
.hint.warn { color: #d93025; font-weight: 600; }

.primary, .copy {
    padding: 12px;
    border: 0;
    border-radius: 10px;
    background: var(--button);
    color: var(--button-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.copy { padding: 8px 12px; font-size: 13px; }
.primary[disabled] { opacity: 0.45; cursor: default; }

.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.history-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; border-radius: 10px; background: var(--card); }
.history-amount { text-align: right; font-variant-numeric: tabular-nums; }
.history-time { grid-column: 1 / -1; font-size: 12px; color: var(--hint); }