/* ── Hero ──────────────────────────────────────────────────────────── */
.bg-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a1e 100%);
    color: #f1f5f9;
    text-align: center;
    padding: 3rem 1rem 2.5rem;
}
.hero-title { font-size: 2.2rem; font-weight: 800; margin-bottom: 0.5rem; }
.hero-subtitle { font-size: 1.1rem; color: #a3e8a3; margin-bottom: 0; }

/* ── Currency badges ───────────────────────────────────────────────── */
.currency-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15em 0.5em;
    border-radius: 4px;
    vertical-align: middle;
}
.currency-badge.ban { background: #fb923c; color: #fff; }
.currency-badge.xno { background: #38bdf8; color: #0f172a; }

.prize-amount { font-weight: 700; color: #22c55e; font-size: 0.95rem; }

/* ── Board — full size ─────────────────────────────────────────────── */
.board-wrap { overflow-x: auto; }

.board {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.board td, .board-mini td {
    border: 1px solid #cbd5e1;
    width: 10%;
    min-width: 36px;
    height: 52px;
    position: relative;
    vertical-align: top;
    padding: 2px 3px;
    font-size: 0.62rem;
    background: #f8fafc;
}

.tile-num {
    display: block;
    font-size: 0.58rem;
    color: #94a3b8;
    line-height: 1;
}

.tile-icon {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    margin-top: 1px;
}

/* ── Tile type colors ──────────────────────────────────────────────── */
.tile-vine_up    { background: #dcfce7 !important; }
.tile-fall_down  { background: #fee2e2 !important; }
.tile-fruit      { background: #fef9c3 !important; }
.tile-sleep      { background: #f3e8ff !important; }
.tile-random     { background: #dbeafe !important; }
.tile-start      { background: #e0f2fe !important; border: 2px solid #38bdf8 !important; }
.tile-finish     { background: #fef08a !important; border: 2px solid #ca8a04 !important; }

/* ── Player tokens ─────────────────────────────────────────────────── */
.tile-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 2px;
}
.token {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.3);
    cursor: default;
}

/* ── Mini board (home page) ────────────────────────────────────────── */
.board-mini-wrap { overflow-x: auto; }

.board-mini {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.board-mini td {
    height: 36px;
    min-width: 28px;
    font-size: 0.55rem;
}

/* ── Players list ──────────────────────────────────────────────────── */
.players-list { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.player-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 2px solid #ccc;
    border-radius: 20px;
    padding: 2px 10px 2px 6px;
    font-size: 0.82rem;
    background: #fff;
}
.player-chip .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.player-chip .muted { color: #94a3b8; font-size: 0.75rem; }

/* ── Player row (game panel) ───────────────────────────────────────── */
.player-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #f1f5f9;
}
.player-row .dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.player-row .player-name { flex: 1; font-weight: 500; }
.player-row .player-pos { font-size: 0.82rem; color: #64748b; }

/* ── Inline roll result panel ──────────────────────────────────────── */
.roll-result-panel {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
}
.dice-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #1e293b;
    color: #f1f5f9;
    font-size: 1.5rem;
    font-weight: 800;
    border-radius: 8px;
    flex-shrink: 0;
}
.gap-3 { gap: 0.75rem; }

/* ── Roll dice display ─────────────────────────────────────────────── */
.roll-dice-display {
    display: inline-block;
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 12px;
    padding: 0.4rem 1.5rem;
    margin: 0.5rem 0;
}
.roll-dice-display .dice-face {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}
.roll-dice-display.small-dice .dice-face { font-size: 2rem; }

/* ── Event banner ──────────────────────────────────────────────────── */
.event-banner {
    background: linear-gradient(135deg, #1e3a1e 0%, #14532d 100%);
    color: #dcfce7;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
}
.event-banner p { font-size: 0.85rem; color: #a7f3d0; }

/* ── Roll button ───────────────────────────────────────────────────── */
.btn-roll {
    min-width: 200px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ── Legend ────────────────────────────────────────────────────────── */
.legend-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
}
.legend-dot {
    display: inline-block;
    width: 16px; height: 16px;
    border-radius: 3px;
    border: 1px solid #cbd5e1;
    flex-shrink: 0;
}
.legend-dot.tile-vine_up   { background: #dcfce7; }
.legend-dot.tile-fall_down { background: #fee2e2; }
.legend-dot.tile-fruit     { background: #fef9c3; }
.legend-dot.tile-sleep     { background: #f3e8ff; }
.legend-dot.tile-random    { background: #dbeafe; }
.legend-dot.tile-finish    { background: #fef08a; }

/* ── Board card header — three-column layout ───────────────────────── */
.header-col-left,
.header-col-center,
.header-col-right {
    flex: 1;
}
.header-col-center {
    text-align: center;
}
.header-col-right {
    text-align: right;
    white-space: nowrap;
}
.balance-label {
    font-size: 0.82rem;
    color: #94a3b8;
}
.balance-amount {
    font-weight: 700;
    color: #38bdf8;
    font-size: 0.95rem;
}

/* ── Roll control strip (embedded in board card) ───────────────────── */
.roll-control-strip {
    border-top: 1px solid #e2e8f0;
    padding: 0.6rem 0.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tile-position-label {
    font-size: 0.9rem;
    color: #475569;
    white-space: nowrap;
}

/* ── Roll result strip (embedded in board card) ─────────────────────── */
.roll-result-strip {
    border-top: 1px solid #e2e8f0;
    padding: 0.5rem 0.5rem 0;
}

/* ── Event pill ─────────────────────────────────────────────────────── */
.event-pill {
    display: inline-block;
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.15em 0.65em;
    white-space: nowrap;
}

/* ── Roll log free indicator ────────────────────────────────────────── */
.green-bold {
    color: #16a34a;
    font-weight: 700;
}