/* ============================================================
   雀館 Mahjong Parlor — night-parlor palette
   lacquer rosewood · jade felt · bone ivory · cinnabar · brass
   ============================================================ */

:root {
    --lacquer: #241310;
    --lacquer-2: #38201a;
    --lacquer-3: #4a2b21;
    --felt: #1d5244;
    --felt-deep: #143b31;
    --ivory: #f6efdc;
    --ivory-2: #e9dfc4;
    --bone-edge: #c9b992;
    --cinnabar: #b83a2e;
    --cinnabar-deep: #93291f;
    --jade: #2e7d5b;
    --brass: #c9a227;
    --ink: #253a5e;
    --display: "Marcellus", "Noto Serif SC", Georgia, serif;
    --hanzi: "Noto Serif SC", "SimSun", serif;
    --body: Georgia, "Noto Serif SC", serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    font-family: var(--body);
    color: var(--ivory);
    background:
        radial-gradient(ellipse at 50% -10%, rgba(201, 162, 39, 0.08), transparent 55%),
        repeating-linear-gradient(93deg, rgba(0,0,0,0.12) 0 3px, transparent 3px 9px),
        linear-gradient(180deg, var(--lacquer-2), var(--lacquer) 60%);
    background-attachment: fixed;
}

#app { min-height: 100dvh; }

h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: 0.02em; }

button { font-family: var(--display); }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        transition-duration: 0.001s !important;
    }
}

/* ---------------- boot screen ---------------- */

.boot-screen {
    min-height: 100dvh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 18px;
}
.boot-tile {
    width: 84px; height: 112px;
    border-radius: 10px;
    display: grid; place-items: center;
    font-family: var(--hanzi); font-size: 52px; font-weight: 700;
    color: var(--cinnabar);
    background: linear-gradient(160deg, #fbf6e8, #efe5cc 60%, #e2d5b6);
    border-bottom: 10px solid var(--jade);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    animation: boot-bob 1.6s ease-in-out infinite;
}
.boot-label { color: var(--ivory-2); font-style: italic; opacity: 0.8; }
@keyframes boot-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ---------------- buttons ---------------- */

.btn {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 15px;
    cursor: pointer;
    color: var(--ivory);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.big { font-size: 18px; padding: 12px 28px; }
.btn.cinnabar {
    background: linear-gradient(180deg, var(--cinnabar), var(--cinnabar-deep));
    border-color: #d9705f;
    box-shadow: 0 3px 10px rgba(184, 58, 46, 0.35);
}
.btn.jade {
    background: linear-gradient(180deg, var(--jade), #205740);
    border-color: #58a880;
}
.btn.gold {
    background: linear-gradient(180deg, #d9b84a, #a8861c);
    border-color: #ecd88a;
    color: #2a1d04;
}
.btn.quiet {
    background: transparent;
    border-color: rgba(246, 239, 220, 0.35);
    color: var(--ivory-2);
}
.btn.quiet:hover:not(:disabled) { border-color: var(--ivory); }

/* ---------------- toast + error ui ---------------- */

.toast {
    position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
    background: var(--cinnabar-deep);
    color: var(--ivory);
    border: 1px solid #d9705f;
    padding: 10px 22px; border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.5);
    z-index: 300;
    animation: toast-in 0.2s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }

#blazor-error-ui {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--cinnabar-deep); color: var(--ivory);
    padding: 10px 20px; z-index: 400;
}
#blazor-error-ui .reload { color: var(--brass); margin-left: 8px; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* ============================================================
   TILES — fully CSS-drawn bone tiles (the signature element)
   ============================================================ */

.tile {
    --tw: 40px;
    /* tile-set variables — themes override these on an ancestor (.ts-*) */
    --tf1: #fcf7ea; --tf2: #f2e9d2; --tf3: #e3d6b7;   /* face gradient */
    --tback: #3c8a6b;                                  /* backing strip */
    --tbk1: #2c6b55; --tbk2: #1c4a3a;                  /* tile back */
    --t-red: #b83a2e; --t-green: #2e7d5b; --t-blue: #2f4d8a;
    --t-ink: #253a5e;                                  /* wind/numeral ink */
    --t-notch: rgba(246, 239, 220, 0.9);               /* bamboo segment gaps */
    --t-engrave: rgba(255, 255, 255, 0.55);            /* glyph emboss shadow */

    width: var(--tw);
    height: calc(var(--tw) * 1.36);
    flex: 0 0 auto;
    position: relative;
    border-radius: calc(var(--tw) * 0.14);
    background: linear-gradient(160deg, var(--tf1) 0%, var(--tf2) 55%, var(--tf3) 100%);
    border-bottom: calc(var(--tw) * 0.14) solid var(--tback);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -2px 3px rgba(146, 125, 86, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.45);
    user-select: none;
}
.tile.sm { --tw: 26px; }
.tile.md { --tw: 34px; }
.tile.lg { --tw: 48px; }
.tile.xl { --tw: 120px; }

.tile.clickable { cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.tile.clickable:hover {
    transform: translateY(-9px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -2px 3px rgba(146, 125, 86, 0.35),
        0 10px 16px rgba(0, 0, 0, 0.55);
}
.tile.raised { transform: translateY(-6px); }
.tile.highlight {
    box-shadow:
        0 0 0 2px var(--brass),
        0 0 14px 2px rgba(201, 162, 39, 0.65),
        0 2px 4px rgba(0, 0, 0, 0.45);
}

.tile-face { position: absolute; inset: 4% 6%; }

/* playing-card style corner index (1-9, E/S/W/N) */
.corner-idx {
    position: absolute;
    top: -2%; left: 0;
    z-index: 1;
    font-family: var(--display);
    font-weight: 700;
    font-size: calc(var(--tw) * 0.26);
    line-height: 1;
    color: var(--t-ink);
    opacity: 0.75;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    pointer-events: none;
}

.tile-back {
    position: absolute; inset: 0;
    border-radius: inherit;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 6px),
        linear-gradient(160deg, var(--tbk1), var(--tbk2) 70%);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* pips shared canvas */
.pips { position: absolute; inset: 0; }

/* dots */
.dot {
    position: absolute;
    width: 26%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 36% 30%,
            rgba(255, 255, 255, 0.85) 0 14%,
            var(--c) 34% 58%,
            transparent 60%),
        radial-gradient(circle,
            transparent 0 60%,
            var(--c) 62% 84%,
            rgba(0, 0, 0, 0.18) 86% 100%);
}
.dot.big { width: 56%; }
.dot.r { --c: var(--t-red); }
.dot.g { --c: var(--t-green); }
.dot.b { --c: var(--t-blue); }

/* bamboo sticks */
.stick {
    position: absolute;
    width: 13%; height: 27%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: linear-gradient(180deg,
        var(--c) 0 14%, var(--t-notch) 14% 18%,
        var(--c) 18% 48%, var(--t-notch) 48% 52%,
        var(--c) 52% 82%, var(--t-notch) 82% 86%,
        var(--c) 86% 100%);
    box-shadow: inset 1px 0 1px rgba(255,255,255,0.4), inset -1px 0 2px rgba(0,0,0,0.25);
}
.stick.grand { width: 22%; height: 62%; }
.stick.gr { --c: var(--t-green); }
.stick.rd { --c: var(--t-red); }

/* the 1-bamboo peacock only appears in decorative sets */
.peacock { display: none; }

/* characters (numeral over 萬) */
.char-tile {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: space-evenly;
    font-family: var(--hanzi); font-weight: 700; line-height: 1;
}
.char-num {
    font-size: calc(var(--tw) * 0.40);
    color: var(--t-ink);
    text-shadow: 0 1px 0 var(--t-engrave);
}
.char-wan {
    font-size: calc(var(--tw) * 0.44);
    color: var(--t-red);
    text-shadow: 0 1px 0 var(--t-engrave);
}

/* winds + dragons */
.honor-tile {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--hanzi); font-weight: 700;
    font-size: calc(var(--tw) * 0.56);
    line-height: 1;
    text-shadow: 0 1px 0 var(--t-engrave);
}
.honor-tile.ink { color: var(--t-ink); }
.honor-tile.cinnabar { color: var(--t-red); }
.honor-tile.jade { color: var(--t-green); }

.dragon-white {
    position: absolute; inset: 14% 18%;
    border: calc(var(--tw) * 0.055) double var(--t-blue);
    border-radius: calc(var(--tw) * 0.08);
    opacity: 0.85;
}

/* melds */
.meld { display: flex; gap: 2px; align-items: flex-end; }

/* ---------------- tile sets (host picks at table creation) ----------------
   Garden Party: white faces, pastel pinks/mints/lavenders, soft pink backing.
   Midnight Jade: deep green faces, luminous glyphs, brass backing.          */

.ts-garden .tile {
    --tf1: #ffffff; --tf2: #fbfafc; --tf3: #efecf1;
    --tback: #f2b1c4;
    --tbk1: #bfe6d9; --tbk2: #92cdbc;
    --t-red: #ec6f9d; --t-green: #3cbfa0; --t-blue: #8d7bd8;
    --t-ink: #4d92c1;
    --t-notch: #ffffff;
    --t-engrave: rgba(255, 255, 255, 0.9);
}

.ts-midnight .tile {
    --tf1: #2b5647; --tf2: #204434; --tf3: #142e23;
    --tback: #c9a227;
    --tbk1: #3a2b14; --tbk2: #221806;
    --t-red: #ff8672; --t-green: #82e3b6; --t-blue: #8ec1ff;
    --t-ink: #f0e8cf;
    --t-notch: #16352a;
    --t-engrave: rgba(0, 0, 0, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 3px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.55);
}
.ts-midnight .dragon-white { opacity: 1; }

/* ------------------------------------------------------------------
   Palm Beach — replica of the pastel American set: white faces, pink
   backs, flower-medallion dots colored per rank, colored 萬 pairs,
   compass-triangle winds, peacock 1-bamboo.
   ------------------------------------------------------------------ */

.ts-palm .tile {
    --tf1: #ffffff; --tf2: #fdfcfd; --tf3: #f2eff2;
    --tback: #f0a9c4;                       /* pink backing strip */
    --tbk1: #f7c8da; --tbk2: #ec9fc0;       /* pink tile backs */
    --t-red: #e8619c;                       /* 中 pink */
    --t-green: #3d9e57;                     /* 發 green */
    --t-blue: #3fbdbd;                      /* white-dragon teal frame */
    --t-ink: #5b8fd4;
    --t-notch: #ffffff;
    --t-engrave: rgba(255, 255, 255, 0.9);
}
.ts-palm .corner-idx { color: #8a93a3; }

/* --- dots: a ring holding a small flower (center + six petals) --- */
.ts-palm .dot {
    width: 29%;
    background:
        radial-gradient(circle at 50% 21%, var(--c) 0 10%, transparent 13%),
        radial-gradient(circle at 75% 35%, var(--c) 0 10%, transparent 13%),
        radial-gradient(circle at 75% 65%, var(--c) 0 10%, transparent 13%),
        radial-gradient(circle at 50% 79%, var(--c) 0 10%, transparent 13%),
        radial-gradient(circle at 25% 65%, var(--c) 0 10%, transparent 13%),
        radial-gradient(circle at 25% 35%, var(--c) 0 10%, transparent 13%),
        radial-gradient(circle, var(--c) 0 12%, transparent 15%),
        radial-gradient(circle, transparent 0 52%, var(--c) 55% 68%, transparent 71%);
    box-shadow: none;
}
/* 1-dot: maroon ring around an orange flower */
.ts-palm .dot.big {
    width: 58%;
    background:
        radial-gradient(circle at 50% 24%, #e08a3c 0 8%, transparent 10%),
        radial-gradient(circle at 72% 37%, #e08a3c 0 8%, transparent 10%),
        radial-gradient(circle at 72% 63%, #e08a3c 0 8%, transparent 10%),
        radial-gradient(circle at 50% 76%, #e08a3c 0 8%, transparent 10%),
        radial-gradient(circle at 28% 63%, #e08a3c 0 8%, transparent 10%),
        radial-gradient(circle at 28% 37%, #e08a3c 0 8%, transparent 10%),
        radial-gradient(circle, #e64c66 0 10%, transparent 12%),
        radial-gradient(circle, transparent 0 54%, #a44a4f 56% 68%, transparent 70%);
}
/* per-rank dot palettes, echoing the photo */
.ts-palm .d2 .dot:nth-child(odd) { --c: #e8619c; }
.ts-palm .d2 .dot:nth-child(even) { --c: #e08a3c; }
.ts-palm .d3 .dot { --c: #3fbdbd; }
.ts-palm .d4 .dot { --c: #d9a05b; }
.ts-palm .d5 .dot:nth-child(5n+1) { --c: #e8619c; }
.ts-palm .d5 .dot:nth-child(5n+2) { --c: #e08a3c; }
.ts-palm .d5 .dot:nth-child(5n+3) { --c: #3fbdbd; }
.ts-palm .d5 .dot:nth-child(5n+4) { --c: #5b8fd4; }
.ts-palm .d5 .dot:nth-child(5n) { --c: #9b7fd4; }
.ts-palm .d6 .dot:nth-child(odd) { --c: #e08a3c; }
.ts-palm .d6 .dot:nth-child(even) { --c: #5b8fd4; }
.ts-palm .d7 .dot:nth-child(odd) { --c: #e64c66; }
.ts-palm .d7 .dot:nth-child(even) { --c: #e8619c; }
.ts-palm .d8 .dot:nth-child(odd) { --c: #e8619c; }
.ts-palm .d8 .dot:nth-child(even) { --c: #9b7fd4; }
.ts-palm .d9 .dot:nth-child(3n+1) { --c: #b2b84a; }
.ts-palm .d9 .dot:nth-child(3n+2) { --c: #8fae3e; }
.ts-palm .d9 .dot:nth-child(3n) { --c: #3fbdbd; }

/* --- bamboo: greens, teals and chartreuse per rank; peacock on 1 --- */
.ts-palm .stick { box-shadow: none; border-radius: 999px; }
.ts-palm .b2 .stick { --c: #3d9e57; }
.ts-palm .b3 .stick { --c: #3fbdbd; }
.ts-palm .b4 .stick:nth-child(odd) { --c: #3d9e57; }
.ts-palm .b4 .stick:nth-child(even) { --c: #3fbdbd; }
.ts-palm .b5 .stick.gr { --c: #3d9e57; }
.ts-palm .b6 .stick:nth-child(odd) { --c: #3fbdbd; }
.ts-palm .b6 .stick:nth-child(even) { --c: #b2b84a; }
.ts-palm .b7 .stick.gr:nth-child(odd) { --c: #3d9e57; }
.ts-palm .b7 .stick.gr:nth-child(even) { --c: #b2b84a; }
.ts-palm .b8 .stick { --c: #b2b84a; }
.ts-palm .b9 .stick.gr:nth-child(3n+1) { --c: #3fbdbd; }
.ts-palm .b9 .stick.gr:nth-child(3n+2) { --c: #3d9e57; }
.ts-palm .b9 .stick.gr:nth-child(3n) { --c: #b2b84a; }
.ts-palm .b1 .stick.grand { display: none; }
.ts-palm .peacock {
    display: grid; place-items: center;
    position: absolute; inset: 0;
    font-size: calc(var(--tw) * 0.60);
    line-height: 1;
}

/* --- characters: numeral and 萬 in their own colors per rank --- */
.ts-palm .char-num.r1, .ts-palm .char-wan.r1 { color: #e8619c; }
.ts-palm .char-num.r2 { color: #e8619c; } .ts-palm .char-wan.r2 { color: #3fbdbd; }
.ts-palm .char-num.r3 { color: #3fbdbd; } .ts-palm .char-wan.r3 { color: #e8619c; }
.ts-palm .char-num.r4, .ts-palm .char-wan.r4 { color: #9b7fd4; }
.ts-palm .char-num.r5 { color: #3fbdbd; } .ts-palm .char-wan.r5 { color: #3d9e57; }
.ts-palm .char-num.r6 { color: #3d9e57; } .ts-palm .char-wan.r6 { color: #3fbdbd; }
.ts-palm .char-num.r7 { color: #e8619c; } .ts-palm .char-wan.r7 { color: #9b7fd4; }
.ts-palm .char-num.r8, .ts-palm .char-wan.r8 { color: #e08a3c; }
.ts-palm .char-num.r9, .ts-palm .char-wan.r9 { color: #5b8fd4; }

/* --- winds: white hanzi on a compass triangle (E→right, S→down, W→left, N→up) --- */
.ts-palm .honor-tile.ink {
    isolation: isolate;
    color: #ffffff;
    font-size: calc(var(--tw) * 0.30);
    text-shadow: none;
}
.ts-palm .honor-tile.ink::before {
    content: "";
    position: absolute;
    inset: 20% 16%;
    z-index: -1;
}
.ts-palm .honor-tile.w1::before { background: #f087b0; clip-path: polygon(0 0, 0 100%, 100% 50%); }
.ts-palm .honor-tile.w2::before { background: #3d9e57; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ts-palm .honor-tile.w3::before { background: #3fbdbd; clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.ts-palm .honor-tile.w4::before { background: #e64c66; clip-path: polygon(50% 0, 0 100%, 100% 100%); }
/* nudge the hanzi toward the triangle's visual center */
.ts-palm .honor-tile.w1 { padding-right: 18%; }
.ts-palm .honor-tile.w3 { padding-left: 18%; }
.ts-palm .honor-tile.w2 { padding-bottom: 16%; }
.ts-palm .honor-tile.w4 { padding-top: 16%; }

.ts-palm .dragon-white { border-style: solid; opacity: 1; }

/* ------------------------------------------------------------------
   National Park — replica of the teal camping set: coral climbers,
   pine trees with tents, animal-track dots, trail-sign winds,
   wildlife warning-diamond dragons.
   ------------------------------------------------------------------ */

.ts-park .tile {
    --tf1: #2cb8b0; --tf2: #1ea59d; --tf3: #158d86;
    --tback: #0d6d67;
    --tbk1: #1ea59d; --tbk2: #0f7d76;
    --t-red: #f4737e;      /* coral art + 中 sign */
    --t-green: #58c98d;    /* 發 sign */
    --t-blue: #cba6e8;     /* white-dragon lavender frame */
    --t-ink: #f7c948;      /* trail-sign yellow */
    --t-notch: #1ea59d;
    --t-engrave: rgba(0, 0, 0, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -2px 3px rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.5);
}
.ts-park .corner-idx { color: #f7c948; opacity: 0.95; }

/* --- dots: animal tracks (paw = pad + three toes); boot print on the 1 --- */
.ts-park .dot {
    width: 30%;
    border-radius: 0;
    background:
        radial-gradient(circle at 50% 68%, var(--c) 0 24%, transparent 27%),
        radial-gradient(circle at 22% 32%, var(--c) 0 11%, transparent 14%),
        radial-gradient(circle at 50% 20%, var(--c) 0 11%, transparent 14%),
        radial-gradient(circle at 78% 32%, var(--c) 0 11%, transparent 14%);
}
.ts-park .dot.big {
    width: 42%;
    background:
        radial-gradient(ellipse 42% 32% at 50% 30%, #f78fb8 0 96%, transparent 100%),
        radial-gradient(ellipse 30% 16% at 50% 82%, #f78fb8 0 96%, transparent 100%);
}
.ts-park .d2 .dot, .ts-park .d5 .dot, .ts-park .d8 .dot { --c: #cba6e8; }
.ts-park .d3 .dot, .ts-park .d6 .dot, .ts-park .d9 .dot { --c: #97e8de; }
.ts-park .d4 .dot, .ts-park .d7 .dot { --c: #f78fb8; }

/* --- bamboo: pine-tree silhouettes with a small tent pitched below --- */
.ts-park .stick {
    width: 24%; height: 30%;
    border-radius: 0;
    box-shadow: none;
    background: var(--c);
    clip-path: polygon(50% 0, 78% 36%, 64% 36%, 92% 70%, 58% 70%, 58% 100%, 42% 100%, 42% 70%, 8% 70%, 36% 36%, 22% 36%);
}
.ts-park .stick.gr { --c: #8fdca6; }
.ts-park .stick.rd { --c: #f78fb8; }
.ts-park .b2::after, .ts-park .b3::after, .ts-park .b4::after, .ts-park .b5::after,
.ts-park .b6::after, .ts-park .b7::after, .ts-park .b8::after, .ts-park .b9::after,
.ts-park .b1::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 1%;
    width: 30%; height: 16%;
    transform: translateX(-50%);
    background: #b9e2f5;
    clip-path: polygon(50% 0, 100% 100%, 78% 100%, 50% 34%, 22% 100%, 0 100%);
}
.ts-park .b1 .stick.grand { display: none; }
.ts-park .peacock { display: grid; place-items: center; position: absolute; inset: 0 0 12% 0; font-size: 0; }
.ts-park .peacock::after { content: "🦅"; font-size: calc(var(--tw) * 0.44); line-height: 1; }

/* --- characters: coral numeral + climber --- */
.ts-park .char-num { color: #f4737e; font-size: calc(var(--tw) * 0.30); }
.ts-park .char-wan { font-size: 0; }
.ts-park .char-wan::after { content: "🧗"; font-size: calc(var(--tw) * 0.44); line-height: 1; }

/* --- winds: trail-sign words --- */
.ts-park .honor-tile.ink { font-size: 0; }
.ts-park .honor-tile.ink::after {
    font-family: var(--display);
    font-weight: 700;
    font-size: calc(var(--tw) * 0.19);
    letter-spacing: 0.06em;
    color: #f7c948;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.ts-park .honor-tile.w1::after { content: "EAST"; }
.ts-park .honor-tile.w2::after { content: "SOUTH"; }
.ts-park .honor-tile.w3::after { content: "WEST"; }
.ts-park .honor-tile.w4::after { content: "NORTH"; }

/* --- dragons: wildlife signs --- */
.ts-park .honor-tile.cinnabar, .ts-park .honor-tile.jade { font-size: 0; isolation: isolate; }
.ts-park .honor-tile.cinnabar::before, .ts-park .honor-tile.jade::before {
    content: "";
    position: absolute; inset: 26%;
    transform: rotate(45deg);
    border-radius: 14%;
    border: calc(var(--tw) * 0.05) solid var(--sign);
}
.ts-park .honor-tile.cinnabar { --sign: #f4737e; }
.ts-park .honor-tile.jade { --sign: #58c98d; }
.ts-park .honor-tile.cinnabar::after {
    content: "!";
    font-size: calc(var(--tw) * 0.34);
    font-weight: 700;
    color: #f4737e;
}
.ts-park .honor-tile.jade::after {
    content: "🐻";
    font-size: calc(var(--tw) * 0.26);
    line-height: 1;
}
.ts-park .dragon-white { opacity: 1; }

/* in-game toolbar (tile set, score, mute) */
.game-toolbar {
    position: fixed;
    top: 22px; right: 26px;
    z-index: 210;
    display: flex; align-items: center; gap: 8px;
}
.round-button {
    min-width: 42px; height: 42px;
    padding: 0 14px;
    border-radius: 21px;
    font-size: 15px;
    font-family: var(--display);
    color: var(--ivory);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(201, 162, 39, 0.4);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease;
}
.round-button:hover { transform: scale(1.06); border-color: var(--brass); }
.tileset-select.slim {
    height: 42px;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 21px;
    max-width: 220px;
}

/* tile-set picker in the lobby */
.tileset-select {
    font-family: var(--body); font-size: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(201, 162, 39, 0.4);
    background: var(--lacquer-2);
    color: var(--ivory);
    cursor: pointer;
}

/* ============================================================
   PARLOR (lobby)
   ============================================================ */

.parlor {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 20px 80px;
}
.parlor-header { text-align: center; margin-bottom: 36px; }
.parlor-mark {
    font-family: var(--hanzi);
    font-size: 64px; font-weight: 700;
    color: var(--brass);
    text-shadow: 0 2px 12px rgba(201, 162, 39, 0.35);
    display: block;
}
.parlor-header h1 { margin: 6px 0 4px; font-size: 34px; color: var(--ivory); }
.parlor-sub { margin: 0; color: var(--ivory-2); opacity: 0.7; font-style: italic; }

.name-card {
    background: linear-gradient(170deg, var(--ivory), var(--ivory-2));
    color: var(--lacquer);
    border-radius: 12px;
    border-bottom: 8px solid var(--jade);
    padding: 26px 28px;
    max-width: 440px; margin: 0 auto;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.name-card label { font-family: var(--display); font-size: 17px; display: block; margin-bottom: 12px; }
.name-row { display: flex; gap: 10px; }

input {
    font-family: var(--body); font-size: 15px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(36, 19, 16, 0.35);
    background: #fffdf6;
    color: var(--lacquer);
    flex: 1; min-width: 0;
}
input:focus { border-color: var(--jade); }

.lobby { display: flex; flex-direction: column; gap: 22px; }
.lobby-you {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1px solid rgba(201, 162, 39, 0.3);
    padding-bottom: 10px;
}
.lobby-you .stats { color: var(--ivory-2); opacity: 0.7; font-size: 14px; }
.lobby-create { display: flex; gap: 10px; }

.lobby-tables h2 { font-size: 20px; color: var(--brass); margin: 4px 0 12px; }
.lobby-tables .empty { color: var(--ivory-2); opacity: 0.65; font-style: italic; }

.table-row {
    display: flex; justify-content: space-between; align-items: center;
    background: linear-gradient(180deg, var(--lacquer-3), var(--lacquer-2));
    border: 1px solid rgba(201, 162, 39, 0.35);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 10px;
}
.table-row.playing { opacity: 0.65; }
.table-name { display: flex; flex-direction: column; gap: 2px; }
.table-name span { font-size: 13px; color: var(--ivory-2); opacity: 0.7; }
.table-meta { display: flex; align-items: center; gap: 14px; }
.playing-tag { color: var(--brass); font-style: italic; font-size: 14px; }

/* ============================================================
   WAITING ROOM
   ============================================================ */

.waiting-room {
    max-width: 560px; margin: 0 auto;
    padding: 56px 20px;
    text-align: center;
    display: flex; flex-direction: column; gap: 22px;
}
.waiting-status { color: var(--ivory-2); opacity: 0.8; margin: 0; }
.waiting-seats { display: flex; flex-direction: column; gap: 10px; }
.waiting-seat {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(180deg, var(--lacquer-3), var(--lacquer-2));
    border: 1px solid rgba(201, 162, 39, 0.35);
    border-radius: 10px;
    padding: 12px 18px;
    text-align: left;
}
.waiting-seat.open { border-style: dashed; opacity: 0.75; }
.seat-wind {
    font-family: var(--hanzi); font-weight: 700;
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(201, 162, 39, 0.15);
    color: var(--brass);
    border: 1px solid rgba(201, 162, 39, 0.5);
    flex: 0 0 auto;
}
.dim { opacity: 0.6; }
.waiting-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ============================================================
   GAME TABLE
   ============================================================ */

.game-loading {
    min-height: 100dvh; display: grid; place-items: center;
    font-family: var(--display); font-size: 20px; color: var(--ivory-2);
}

.game-shell { height: 100dvh; padding: 14px; }

.table-frame {
    height: 100%;
    border-radius: 22px;
    padding: 14px;
    background: linear-gradient(180deg, var(--lacquer-3), var(--lacquer) 80%);
    border: 1px solid rgba(201, 162, 39, 0.4);
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35), 0 18px 48px rgba(0, 0, 0, 0.6);
}

.table {
    height: 100%;
    border-radius: 14px;
    background:
        radial-gradient(ellipse at center, #27614f 0%, var(--felt) 45%, var(--felt-deep) 100%);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.45);
    display: grid;
    grid-template-columns: minmax(70px, auto) 1fr minmax(70px, auto);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "top top top"
        "left center right"
        "bottom bottom bottom";
    gap: 6px;
    padding: 10px;
    overflow: hidden;
}

.seat-zone { display: flex; align-items: center; gap: 10px; min-width: 0; }
.seat-zone.top { grid-area: top; flex-direction: row; justify-content: center; }
/* Side seats put the name plate at the top of the column so it never hides behind tiles. */
.seat-zone.left { grid-area: left; flex-direction: column; justify-content: flex-start; padding-top: 4px; }
.seat-zone.right { grid-area: right; flex-direction: column; justify-content: flex-start; padding-top: 4px; }
.seat-zone.bottom { grid-area: bottom; flex-direction: column; align-items: stretch; gap: 8px; }

.plaque {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(201, 162, 39, 0.35);
    border-radius: 999px;
    padding: 4px 14px 4px 5px;
    white-space: nowrap;
}
.plaque-wind {
    font-family: var(--hanzi); font-weight: 700; font-size: 15px;
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(201, 162, 39, 0.16);
    color: var(--brass);
    border: 1px solid rgba(201, 162, 39, 0.5);
}
.plaque-name {
    font-family: var(--display); font-size: 14px;
    max-width: 120px; overflow: hidden; text-overflow: ellipsis;
}
.seat-zone.left .plaque, .seat-zone.right .plaque { z-index: 5; }
.away { font-size: 11px; color: #e2a49b; font-style: italic; }

.seat-zone.active .plaque {
    border-color: var(--brass);
    box-shadow: 0 0 14px rgba(201, 162, 39, 0.55);
}

.opp-hand { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.opp-hand.vertical { flex-direction: column; align-items: center; max-height: 38vh; flex-wrap: nowrap; }
.opp-hand.vertical .tile { --tw: 20px; }
.opp-melds { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* center: rivers + hub */
.center {
    grid-area: center;
    display: grid;
    grid-template-columns: minmax(60px, auto) 1fr minmax(60px, auto);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        ". rtop ."
        "rleft hub rright"
        ". rbottom .";
    gap: 6px;
    min-height: 0;
}
.river {
    display: flex; flex-wrap: wrap; gap: 3px;
    align-content: flex-start;
    justify-content: center;
    min-width: 0; min-height: 0;
    overflow: hidden;
    max-width: 60vw;
    margin: 0 auto;
}
.river.top { grid-area: rtop; }
.river.bottom { grid-area: rbottom; }
.river.left { grid-area: rleft; flex-direction: column; align-items: center; max-height: 100%; }
.river.right { grid-area: rright; flex-direction: column; align-items: center; max-height: 100%; }

.hub-panel {
    grid-area: hub;
    align-self: center; justify-self: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 14px;
    padding: 14px 26px;
    max-width: 340px;
}
.wall-count { font-family: var(--display); font-size: 34px; color: var(--brass); line-height: 1; }
.wall-label { font-size: 12px; color: var(--ivory-2); opacity: 0.65; margin-top: 2px; }
.status-line { margin-top: 10px; font-size: 14px; color: var(--ivory); font-style: italic; }

/* your zone */
.you-row {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}
.your-melds { display: flex; gap: 8px; }
.self-actions { display: flex; gap: 8px; }

.hand {
    display: flex; align-items: flex-end; justify-content: center;
    gap: 4px;
    padding: 10px 6px 4px;
    min-height: 84px;
    flex-wrap: wrap;
}
.drawn-gap { width: 18px; flex: 0 0 auto; }

/* claim bar */
.claim-bar {
    position: fixed;
    left: 50%; bottom: 150px;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 16px;
    background: linear-gradient(180deg, var(--lacquer-3), var(--lacquer-2));
    border: 1px solid var(--brass);
    border-radius: 14px;
    padding: 14px 20px 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
    z-index: 200;
    overflow: hidden;
}
.claim-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.claim-caption {
    font-size: 12px; color: var(--ivory-2);
    max-width: 120px; text-align: center; line-height: 1.3;
}
.claim-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.claim-timer {
    position: absolute; left: 0; bottom: 0;
    height: 4px; width: 100%;
    background: var(--cinnabar);
    animation: timer-drain linear forwards;
    transform-origin: left;
}
@keyframes timer-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* tile gallery (/tiles) */
.gallery {
    max-width: 860px; margin: 0 auto;
    padding: 40px 20px 80px;
    display: flex; flex-direction: column; gap: 20px;
}
.gallery-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.gallery-header h1 { margin: 0; }
.gallery-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.gallery-row h2 { font-size: 17px; color: var(--brass); margin: 0 0 10px; }
.gallery-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery > .btn { align-self: flex-start; }

/* pass-and-play hand-off screen: opaque enough to hide the previous hand */
.pass-overlay { background: rgba(14, 8, 5, 0.94); }
.pass-hint { margin: 0; color: var(--lacquer); font-size: 15px; }

/* standings */
.score-card { min-width: 320px; }
.score-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 15px;
}
.score-table th {
    font-family: var(--display); font-weight: 500;
    text-align: left; padding: 4px 12px;
    color: rgba(36, 19, 16, 0.6);
    border-bottom: 1px solid rgba(36, 19, 16, 0.25);
}
.score-table td { padding: 6px 12px; }
.score-table .score-wind { font-family: var(--hanzi); color: var(--jade); }
.score-table .score-name { font-family: var(--display); }
.score-table .score-points { text-align: right; font-variant-numeric: tabular-nums; }
.score-table .gain { color: var(--jade); font-weight: 700; }
.score-table .loss { color: var(--cinnabar-deep); font-weight: 700; }
.score-table .you-row-highlight { background: rgba(46, 125, 91, 0.12); }

/* pass & play setup rows in the lobby */
.passplay {
    border: 1px solid rgba(201, 162, 39, 0.35);
    border-radius: 10px;
    padding: 18px;
    background: rgba(0, 0, 0, 0.18);
    display: flex; flex-direction: column; gap: 10px;
}
.passplay h2 { font-size: 20px; color: var(--brass); margin: 0; }
.passplay .empty { margin: 0; }
.pp-row { display: flex; gap: 8px; }
.pp-row select {
    font-family: var(--body); font-size: 14px;
    padding: 8px 10px; border-radius: 8px;
    border: 1px solid rgba(201, 162, 39, 0.4);
    background: var(--lacquer-2); color: var(--ivory);
}
.passplay > .btn { align-self: flex-start; }

/* discard confirmation */
.confirm-card {
    background: linear-gradient(170deg, var(--ivory), var(--ivory-2));
    color: var(--lacquer);
    border-radius: 14px;
    border-bottom: 10px solid var(--jade);
    padding: 26px 40px 30px;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
    display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.confirm-card h2 { margin: 0; font-size: 22px; color: var(--lacquer); }
.confirm-name { font-family: var(--display); font-size: 16px; color: var(--jade); }
.confirm-buttons { display: flex; gap: 12px; }
/* quiet buttons sit on the ivory card here — use ink instead of ivory */
.confirm-card .btn.quiet { color: var(--lacquer); border-color: rgba(36, 19, 16, 0.45); }
.confirm-card .btn.quiet:hover:not(:disabled) { border-color: var(--lacquer); }

/* result overlay */
.overlay {
    position: fixed; inset: 0;
    background: rgba(12, 6, 4, 0.7);
    backdrop-filter: blur(3px);
    display: grid; place-items: center;
    z-index: 250;
    animation: overlay-in 0.25s ease;
}
@keyframes overlay-in { from { opacity: 0; } }

.result-card {
    background: linear-gradient(170deg, var(--ivory), var(--ivory-2));
    color: var(--lacquer);
    border-radius: 14px;
    border-bottom: 10px solid var(--cinnabar);
    padding: 30px 38px;
    max-width: 560px; width: calc(100vw - 40px);
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
    display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.result-card h2 { margin: 0; font-size: 26px; color: var(--cinnabar-deep); }
.result-fan { font-family: var(--display); font-size: 20px; color: var(--jade); }
.result-patterns {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.result-patterns li {
    background: rgba(46, 125, 91, 0.12);
    border: 1px solid rgba(46, 125, 91, 0.4);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 13px;
}
.result-hand { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------------- responsive ---------------- */

@media (max-width: 900px) {
    .tile.lg { --tw: 38px; }
    .tile.md { --tw: 30px; }
    .tile.sm { --tw: 22px; }
    .opp-hand.vertical .tile { --tw: 16px; }
    .claim-bar { bottom: 120px; width: calc(100vw - 24px); justify-content: center; }
    .game-shell { padding: 8px; }
    .table-frame { padding: 8px; }
    .hub-panel { padding: 10px 16px; }
    .wall-count { font-size: 26px; }
}