/* =============================================================================
   MAHJONG (turtle solitaire) — game-specific styles.
   Shared section chrome (.game-toolbar, .game-btn, .game-status-bar, modal,
   leaderboard) lives in games.css / games-board.css; site tokens come from
   style.css :root. Tile positions/sizes and the responsive scale transform
   are computed by JS — this file only styles the pieces.
   ============================================================================= */

.mj-root {
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.mj-toolbar {
    flex-wrap: wrap;
}

.mj-audio-toggles {
    margin-left: auto;
    display: flex;
    gap: 0.35rem;
}

/* ---------------- HUD ---------------- */

.mj-hud {
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
}

.mj-hud-item {
    white-space: nowrap;
}

.mj-deal-info {
    margin: 0.35rem 0 0.6rem;
    font-size: 0.85rem;
    color: var(--color-gray-600);
}

/* ---------------- Board container ---------------- */

/* Horizontal scroll container for tiny screens: the scaled board never
   shrinks below its JS minimum scale, so it scrolls sideways instead. */
.mj-board-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    -webkit-overflow-scrolling: touch;
}

/* Sized by JS to the scaled board footprint. */
.mj-scale {
    position: relative;
    margin: 0 auto;
}

/* Fixed logical-pixel canvas, scaled with transform by JS. */
.mj-board {
    position: relative;
    transform-origin: top left;
}

/* ---------------- Tiles ---------------- */

.mj-tile {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: default;
    border: 1px solid #b8a988;
    border-radius: 7px;
    /* Ivory face with a darker "stack side" showing bottom-right, plus a
       drop shadow — layered depth per tile; higher layers sit on top. */
    background: linear-gradient(135deg, #fffdf6 0%, #f7f0dd 55%, #ece1c4 100%);
    box-shadow:
        inset -2px -3px 0 #d8c9a3,
        inset 1px 1px 0 #ffffff,
        2px 3px 4px rgba(60, 45, 15, 0.35);
    font-family: var(--font-family);
    line-height: 1;
    transition: filter 0.12s ease, box-shadow 0.12s ease;
}

/* Big mahjong glyph (Unicode tile). If the font is missing, the corner
   index below stays readable. */
.mj-glyph {
    font-size: 52px;
    line-height: 1;
    color: #2e2a20;
    pointer-events: none;
}

/* Small always-visible corner index — the reliability fallback. */
.mj-corner {
    position: absolute;
    top: 3px;
    left: 5px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.5px;
    pointer-events: none;
    color: var(--color-gray-700);
}

.mj-corner--dot  { color: #1d4ed8; }
.mj-corner--bam  { color: #15803d; }
.mj-corner--man  { color: #b91c1c; }
.mj-corner--wind { color: #374151; }
.mj-corner--drr  { color: #b91c1c; }
.mj-corner--drg  { color: #15803d; }
.mj-corner--drw  { color: #6b7280; }
.mj-corner--flw  { color: #be185d; }
.mj-corner--sea  { color: #b45309; }

/* Blocked tiles are slightly dimmed; free tiles are clickable. */
.mj-tile:not(.mj-tile--free) {
    filter: brightness(0.82) saturate(0.85);
}

.mj-tile--free {
    cursor: pointer;
}

.mj-tile--free:hover {
    filter: brightness(1.05);
}

.mj-tile--selected {
    border-color: var(--color-primary);
    box-shadow:
        inset -2px -3px 0 #d8c9a3,
        inset 1px 1px 0 #ffffff,
        0 0 0 3px var(--color-primary),
        2px 3px 5px rgba(60, 45, 15, 0.4);
    filter: brightness(1.06);
}

.mj-tile--hint {
    animation: mj-hint-pulse 0.7s ease-in-out infinite alternate;
    border-color: var(--color-warning, #d97706);
}

@keyframes mj-hint-pulse {
    from {
        box-shadow:
            inset -2px -3px 0 #d8c9a3,
            inset 1px 1px 0 #ffffff,
            0 0 0 2px rgba(217, 119, 6, 0.55),
            2px 3px 4px rgba(60, 45, 15, 0.35);
    }
    to {
        box-shadow:
            inset -2px -3px 0 #d8c9a3,
            inset 1px 1px 0 #ffffff,
            0 0 0 5px rgba(217, 119, 6, 0.85),
            2px 3px 6px rgba(60, 45, 15, 0.45);
    }
}

/* Tap on a blocked tile: quick shake + extra dim. */
.mj-tile--blocked-flash {
    animation: mj-shake 0.32s ease;
    filter: brightness(0.68) saturate(0.7);
}

@keyframes mj-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    50%      { transform: translateX(4px); }
    75%      { transform: translateX(-3px); }
}

/* Removed tiles keep their slot (positions are absolute) but vanish. */
.mj-tile--removed {
    visibility: hidden;
    pointer-events: none;
}

/* ---------------- Misc ---------------- */

.mj-live {
    min-height: 1.3em;
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--color-gray-600);
}

.mj-best-title {
    margin: 0.9rem 0 0.3rem;
    font-size: 0.95rem;
}

.mj-best-list {
    margin: 0;
    padding-left: 1.2rem;
}

/* Mobile: tighter chrome; the board itself scales/scrolls via JS. */
@media (max-width: 600px) {
    .mj-board-wrap {
        padding: 0.3rem;
    }

    .mj-audio-toggles {
        margin-left: 0;
    }
}