/* Jhandi Munda — player screens. One file, no build step.
   Mobile first: 320px phones up to wide desktops, portrait and landscape. */

:root {
    --room: #7d0f1d;
    --room-hi: #f08a1c;
    --room-lo: #2e040b;
    --felt: #1b8a2c;
    --felt-hi: #43bd34;
    --felt-lo: #0d5a1a;
    --line: rgba(214, 255, 226, .38);
    --rim: #6e0c19;
    --rim-hi: #c8283a;
    --gold: #f6c453;
    --gold-2: #d4921a;
    --gold-ink: #3b2400;
    --ivory: #fff8e8;
    --ink: #1f2937;
    --win: #22c55e;
    --hit: #ff4d4d;
    --radius: 16px;
    --die: clamp(48px, 15vw, 62px);
    --display: "Baloo 2", "Poppins", system-ui, sans-serif;
    --body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Emoji (👑 🚩) in full colour, card suits (♥ ♠) as plain glyphs that take the symbol's colour. */
@font-face {
    font-family: "JM Emoji";
    src: local("Segoe UI Emoji"), local("Apple Color Emoji"), local("Noto Color Emoji");
    unicode-range: U+1F000-1FAFF, U+2B50, U+2705, U+231A-231B;
}

html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }

body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--body);
    color: var(--ivory);
    background:
        radial-gradient(ellipse 55% 40% at 50% 16%, rgba(255, 226, 120, .55) 0%, transparent 70%),
        repeating-conic-gradient(from 0deg at 50% 16%, rgba(255, 214, 90, .16) 0 7deg, transparent 7deg 15deg),
        radial-gradient(ellipse 100% 60% at 50% 26%, var(--room-hi) 0%, transparent 74%),
        radial-gradient(ellipse 120% 60% at 50% 120%, var(--room-lo) 0%, transparent 70%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><path d='M28 6c6 8 14 10 22 10-8 2-14 8-14 18 0-10-4-16-8-18-4 2-8 8-8 18 0-10-6-16-14-18 8 0 16-2 22-10z' fill='%23ffffff' fill-opacity='.035'/></svg>"),
        var(--room);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

/* ---------- Shared bits ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 0;
    border-radius: 999px;
    padding: .95rem 1.4rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .1s ease, filter .15s ease;
}
.btn:active { transform: translateY(2px); }
.btn--gold {
    color: var(--gold-ink);
    background: linear-gradient(180deg, #ffe08a, var(--gold) 40%, var(--gold-2));
    box-shadow: 0 4px 0 #8a5a0a, 0 10px 24px rgba(212, 146, 26, .35);
    font-family: var(--display);
    font-size: 1.15rem;
    letter-spacing: .02em;
}
.btn--gold:hover { filter: brightness(1.06); }
.btn--block { width: 100%; }

.icon-btn {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(246, 196, 83, .45);
    background: rgba(0, 0, 0, .3);
    color: var(--ivory);
    cursor: pointer;
    padding: 0;
    transition: background .15s ease, transform .1s ease;
}
.icon-btn:hover { background: rgba(246, 196, 83, .18); }
.icon-btn:active { transform: scale(.94); }
.icon-btn .ico { width: 20px; height: 20px; }
.ico { display: block; width: 1em; height: 1em; }
.icon-btn--info {
    color: var(--gold-ink);
    background: linear-gradient(180deg, #ffe08a, var(--gold-2));
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(246, 196, 83, .25);
}
.icon-btn--info:hover { background: linear-gradient(180deg, #fff0b8, var(--gold)); }
#sound-btn .ico-sound-off { display: none; }
body.is-muted #sound-btn .ico-sound-on { display: none; }
body.is-muted #sound-btn .ico-sound-off { display: block; }

.sym {
    display: inline-grid;
    place-items: center;
    line-height: 1;
    font-family: "JM Emoji", "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", "Apple Color Emoji", sans-serif;
    user-select: none;
}
.sym--img { width: 70%; height: 70%; object-fit: contain; }

.coin {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    flex: none;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #fff3c4, transparent 40%),
        radial-gradient(circle, #f6c453 0 55%, #b7790f 56% 64%, #f6c453 65%);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .5);
}

.avatar {
    --hue: 20;
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
    background: radial-gradient(circle at 35% 30%, hsl(var(--hue) 70% 62%), hsl(var(--hue) 65% 34%));
    box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px rgba(0, 0, 0, .35), 0 4px 10px rgba(0, 0, 0, .45);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.avatar--me { --hue: 42; width: 46px; height: 46px; font-size: 1.3rem; }

.alert {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .5);
    color: #b91c1c;
    border-radius: 12px;
    padding: .75rem .9rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    font-weight: 600;
}

/* ---------- 3D dice: they lie on the table, the result is the face on top ---------- */

.die {
    --h: calc(var(--die) / 2);
    position: relative;
    width: var(--die);
    height: var(--die);
    perspective: calc(var(--die) * 8);
}
.die__tilt {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(16deg) rotateZ(var(--spin, 0deg));
}
.cube {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1.1s cubic-bezier(.17, .89, .32, 1.15);
}
.cube__face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 16%;
    background: radial-gradient(circle at 30% 22%, #ffffff 0%, #f7f4ee 50%, #ded8cb 100%);
    box-shadow:
        inset 0 0 0 1px rgba(90, 70, 40, .18),
        inset 0 calc(var(--die) * -.06) calc(var(--die) * .12) rgba(90, 70, 40, .2);
    backface-visibility: hidden;
    overflow: hidden;
}
.cube__face .sym { font-size: calc(var(--die) * .56); }
.cube__face .sym--face { width: 96%; height: 96%; }
.cube__face::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 40%, rgba(60, 40, 10, .12));
    pointer-events: none;
}
.cube__face--1 { transform: translateZ(var(--h)); }
.cube__face--2 { transform: rotateY(90deg) translateZ(var(--h)); }
.cube__face--3 { transform: rotateY(180deg) translateZ(var(--h)); }
.cube__face--4 { transform: rotateY(-90deg) translateZ(var(--h)); }
.cube__face--5 { transform: rotateX(90deg) translateZ(var(--h)); }
.cube__face--6 { transform: rotateX(-90deg) translateZ(var(--h)); }
.die__shadow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--die) * -.1);
    height: calc(var(--die) * .45);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5), transparent 70%);
    filter: blur(2px);
    z-index: -1;
}

.die.is-rolling .die__tilt { animation: hop .3s ease-in-out infinite alternate; }
.die.is-rolling .cube { transition: none; animation: tumble .6s linear infinite; }
.die:nth-child(2).is-rolling .cube { animation-duration: .52s; animation-direction: reverse; }
.die:nth-child(3).is-rolling .cube { animation-duration: .68s; }
.die:nth-child(2).is-rolling .die__tilt { animation-delay: -.1s; }
.die:nth-child(3).is-rolling .die__tilt { animation-delay: -.2s; }
.die.is-rolling .die__shadow { animation: shadow .3s ease-in-out infinite alternate; }

@keyframes tumble {
    from { transform: rotateX(0) rotateY(0) rotateZ(0); }
    to { transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg); }
}
@keyframes hop {
    from { transform: rotateX(16deg) translateZ(0); }
    to { transform: rotateX(16deg) translateY(calc(var(--die) * -.4)); }
}
@keyframes shadow {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(.65); opacity: .45; }
}

/* ---------- Casino chips ---------- */

.chip {
    --chip: #c0392b;
    --size: 52px;
    position: relative;
    width: var(--size);
    height: var(--size);
    flex: none;
    border: 0;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    background:
        radial-gradient(circle, var(--chip) 0 57%, transparent 58%),
        repeating-conic-gradient(var(--chip) 0 22.5deg, #fffaf0 22.5deg 45deg);
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, .25),
        0 3px 0 rgba(0, 0, 0, .45),
        0 8px 14px rgba(0, 0, 0, .35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.chip::before {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, .75);
}
.chip span {
    position: relative;
    display: grid;
    place-items: center;
    height: 100%;
    font-family: var(--display);
    font-weight: 800;
    font-size: calc(var(--size) * .3);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.chip:hover { transform: translateY(-2px); }
.chip.is-selected {
    transform: translateY(-7px) scale(1.08);
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, .25),
        0 0 0 3px var(--gold),
        0 0 22px rgba(246, 196, 83, .7),
        0 12px 18px rgba(0, 0, 0, .4);
}
.chip--pile, .fly {
    position: absolute;
    --size: clamp(18px, 5vw, 24px);
    cursor: default;
    pointer-events: none;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .45), 0 3px 5px rgba(0, 0, 0, .35);
}
.chip--pile::before, .fly::before { inset: 20%; border-width: 1px; }
.chip--pile.is-mine { box-shadow: 0 0 0 2px var(--gold), 0 2px 0 rgba(0, 0, 0, .45); }
.chip--pile.is-new { animation: drop .35s ease-out; }
@keyframes drop { from { transform: translateY(-14px) scale(1.3); opacity: 0; } }
.fly { position: fixed; z-index: 60; margin: 0; will-change: transform, opacity; }

/* ---------- Login ---------- */

.login {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.login__brand { display: grid; justify-items: center; gap: 1.4rem; }
.login__logo { width: min(280px, 72vw); height: auto; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45)); }
.login__dice { --die: clamp(50px, 14vw, 66px); display: flex; gap: clamp(14px, 4vw, 22px); }
.login__dice .die:nth-child(2) { transform: translateY(-8px); }

.login__card {
    width: 100%;
    max-width: 400px;
    background: var(--ivory);
    color: var(--ink);
    border-radius: 22px;
    padding: 1.6rem 1.4rem 1.3rem;
    border-top: 5px solid var(--gold-2);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}
.login__card h1 { margin: 0; font-family: var(--display); font-size: 1.7rem; line-height: 1.1; color: #6b1424; }
.login__sub { margin: .35rem 0 1.2rem; font-size: .88rem; color: #5b6170; }
.login__foot { margin: 1rem 0 0; text-align: center; font-size: .82rem; color: #6b7280; }
.login__legal { margin: 0; font-size: .78rem; opacity: .65; text-align: center; }

.field { display: block; margin-bottom: 1rem; }
.field span { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; color: #374151; }
.field input {
    width: 100%;
    padding: .85rem .95rem;
    border: 1.5px solid #e2d6bb;
    border-radius: 12px;
    font: inherit;
    font-size: 1rem;
    background: #fff;
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 4px rgba(246, 196, 83, .3); }
.check { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.2rem; font-size: .9rem; color: #374151; }
.check input { width: 18px; height: 18px; accent-color: var(--gold-2); }

/* ---------- Game: frame ---------- */

.room { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: max(8px, env(safe-area-inset-top)) 12px 6px;
}
.hud__brand { display: flex; min-width: 0; }
.hud__brand img { height: 34px; width: auto; display: block; }
.hud__right { display: flex; align-items: center; gap: 6px; }
.hud__right form { margin: 0; }

.arena {
    flex: 1;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "seats" "dealer" "table" "dock";
}
.arena > .dealer { grid-area: dealer; }
.arena > .dock { grid-area: dock; align-self: end; }

/* ---------- Dealer ---------- */

.dealer {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 8px;
    margin-bottom: -16px;
}
.dealer__person {
    position: relative;
    width: clamp(110px, 32vw, 170px);
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45));
}
.dealer::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: clamp(200px, 56vw, 340px);
    aspect-ratio: 2;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 200, 120, .22), transparent 70%);
    pointer-events: none;
}
.dealer.is-throwing .dealer__person { animation: lean .35s ease-in-out 2 alternate; }
@keyframes lean { to { transform: translateY(4px) rotate(-2deg); } }
.dealer__side { display: grid; gap: 6px; padding-bottom: 26px; }
.dealer__side--left { justify-items: end; text-align: right; }
.dealer__side--right { justify-items: start; }
.dealer__players { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; opacity: .8; }
.dealer__players-ico .ico { width: 14px; height: 14px; }
.bubble {
    position: relative;
    max-width: 100%;
    padding: .4rem .7rem;
    border-radius: 12px;
    background: #fffaf0;
    color: #6b1424;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(.8rem, 3.2vw, 1rem);
    line-height: 1.15;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}
.bubble::after {
    content: "";
    position: absolute;
    right: -6px;
    left: auto;
    bottom: 10px;
    border: 7px solid transparent;
    border-left-color: #fffaf0;
    border-right: 0;
}

.timer {
    position: relative;
    width: clamp(46px, 12vw, 58px);
    height: clamp(46px, 12vw, 58px);
    display: grid;
    place-items: center;
}
.timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.timer__track { fill: rgba(0, 0, 0, .45); stroke: rgba(255, 255, 255, .14); stroke-width: 4; }
.timer__ring {
    fill: none;
    stroke: var(--gold);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 119.38;
    stroke-dashoffset: 119.38;
    transition: stroke-dashoffset .25s linear, stroke .3s ease;
}
.timer span {
    position: relative;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.05rem, 4.2vw, 1.35rem);
    font-variant-numeric: tabular-nums;
}
.timer.is-hurry .timer__ring { stroke: #f87171; }
.timer[data-mode="result"] .timer__ring { stroke: #cbd5e1; }
.timer[data-mode="result"] span { color: #cbd5e1; font-size: .95em; }
.timer[data-mode="rolling"] span, .timer[data-mode="waiting"] span, .timer[data-mode="paused"] span { font-size: .8rem; letter-spacing: 1px; opacity: .8; }
.timer.is-hurry span { color: #fecaca; animation: beat .5s ease-in-out infinite alternate; }
@keyframes beat { to { transform: scale(1.15); } }

/* ---------- Seats (other players) ---------- */

.arena__mid { display: contents; }
.table { grid-area: table; position: relative; z-index: 2; }
.seats { display: flex; gap: 10px; }
.seats--left { grid-area: seats; justify-content: center; flex-wrap: wrap; min-height: 0; }
.seats--left:not(:empty) { margin-bottom: 2px; }
.seats--right { display: none; }
.seat {
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 58px;
    animation: rise .3s ease-out;
}
.seat .avatar { width: 34px; height: 34px; font-size: .95rem; }
.seat b {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .66rem;
    font-weight: 600;
}
.seat small {
    padding: 0 .4rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    color: var(--gold);
    font-size: .62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- The table ---------- */

.table__rim {
    position: relative;
    padding: clamp(10px, 2.6vw, 18px);
    border-radius: clamp(20px, 5vw, 34px);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 22%, transparent 70%, rgba(0, 0, 0, .4)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
        radial-gradient(ellipse at 50% 0%, var(--rim-hi), var(--rim) 70%);
    box-shadow:
        0 0 0 2px #1d0c04,
        inset 0 0 0 2px rgba(255, 210, 150, .18),
        0 24px 50px rgba(0, 0, 0, .6);
}
.table__rim::before {
    content: "";
    position: absolute;
    inset: clamp(4px, 1vw, 7px);
    border-radius: inherit;
    border: 3px dotted rgba(246, 196, 83, .85);
    pointer-events: none;
}
.table__rim::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: calc(clamp(20px, 5vw, 34px) + 3px);
    background:
        radial-gradient(circle at 0 0, #f6d27a 0 12px, #9a6410 13px 15px, transparent 16px),
        radial-gradient(circle at 100% 0, #f6d27a 0 12px, #9a6410 13px 15px, transparent 16px),
        radial-gradient(circle at 0 100%, #f6d27a 0 12px, #9a6410 13px 15px, transparent 16px),
        radial-gradient(circle at 100% 100%, #f6d27a 0 12px, #9a6410 13px 15px, transparent 16px);
    opacity: .9;
    pointer-events: none;
    z-index: 3;
}
.table__cup {
    position: absolute;
    top: -16px;
    left: calc(50% + clamp(56px, 15vw, 96px));
    z-index: 4;
    width: clamp(34px, 8.5vw, 46px);
    transform: translateX(-50%);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5));
    transform-origin: 50% 90%;
}
.table__cup.is-shaking { animation: shake .18s ease-in-out infinite alternate; }
@keyframes shake {
    from { transform: translateX(-50%) rotate(-14deg) translateY(-6px); }
    to { transform: translateX(-50%) rotate(14deg) translateY(-2px); }
}
.table__felt {
    position: relative;
    border-radius: clamp(12px, 3vw, 20px);
    background:
        radial-gradient(ellipse 75% 65% at 50% 42%, var(--felt-hi), transparent 78%),
        radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0, 20, 8, .55)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
        var(--felt);
    background-blend-mode: normal, normal, soft-light, normal;
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, .4),
        inset 0 0 0 5px rgba(246, 196, 83, .35),
        inset 0 0 0 6px rgba(0, 0, 0, .25),
        inset 0 14px 34px rgba(0, 0, 0, .5);
    overflow: hidden;
}

.boxes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(6px, 1.6vw, 10px);
    padding: clamp(8px, 2vw, 14px);
}
.box {
    position: relative;
    display: block;
    min-height: clamp(104px, min(38vw, calc((100vh - 384px) / 3)), 176px);
    min-height: clamp(104px, min(38vw, calc((100dvh - 384px) / 3)), 176px);
    padding: 0;
    border: 0;
    border-radius: clamp(10px, 2.4vw, 16px);
    background:
        radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, .09), transparent 65%),
        rgba(0, 30, 12, .18);
    box-shadow:
        inset 0 0 0 1.5px rgba(246, 196, 83, .55),
        inset 0 0 0 4px rgba(0, 0, 0, .12),
        inset 0 0 0 5px rgba(246, 196, 83, .16),
        inset 0 10px 22px rgba(0, 0, 0, .22);
    cursor: pointer;
    overflow: hidden;
    touch-action: manipulation;
    transition: background .25s ease, box-shadow .25s ease, transform .15s ease;
}
body[data-phase="betting"] .box:hover {
    background:
        radial-gradient(ellipse at 50% 38%, rgba(255, 236, 170, .16), transparent 65%),
        rgba(0, 30, 12, .1);
    box-shadow:
        inset 0 0 0 1.5px var(--gold),
        inset 0 0 0 4px rgba(0, 0, 0, .1),
        inset 0 0 26px rgba(246, 196, 83, .25);
}
body[data-phase="betting"] .box:active { transform: scale(.985); }
.box.is-bumped { animation: flash .35s ease; }
@keyframes flash { 40% { background: rgba(246, 196, 83, .18); } }
.box:disabled { cursor: default; }

.box__head {
    position: absolute;
    top: 5px;
    left: 7px;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 3px;
    padding: 1px 7px 1px 3px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .3);
    font-size: clamp(.68rem, 2.8vw, .8rem);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.box__head::before { content: ""; width: 1.05em; height: 1.05em; align-self: center; border-radius: 50%; background: radial-gradient(circle, #f6c453 0 55%, #b7790f 56% 64%, #f6c453 65%); }
.box__mine { font-family: var(--display); font-size: 1.15em; font-weight: 800; color: var(--gold); }
.box.has-mine .box__head { background: rgba(0, 0, 0, .55); box-shadow: 0 0 0 1.5px var(--gold); }
.box__mine.is-bumped { animation: grow .35s ease; display: inline-block; }
@keyframes grow { 40% { transform: scale(1.45); } }
.box__sep, .box__total { color: rgba(255, 255, 255, .75); }

.box__print {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 46%;
    max-height: 56%;
    aspect-ratio: 1;
    object-fit: contain;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)) drop-shadow(0 0 1px rgba(255, 255, 255, .4));
    transition: transform .3s ease, opacity .3s ease, filter .3s ease;
    pointer-events: none;
    user-select: none;
}
body[data-phase="betting"] .box:hover .box__print { transform: translate(-50%, -52%) scale(1.06); }
.box__print--text {
    display: grid;
    place-items: center;
    font-size: clamp(2.6rem, 12vw, 4rem);
    color: rgba(4, 50, 26, .42);
    background: none;
    -webkit-mask: none;
    mask: none;
}
.box__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 26px;
    text-align: center;
    font-family: var(--display);
    font-size: clamp(.66rem, 2.6vw, .82rem);
    font-weight: 700;
    color: rgba(240, 255, 244, .78);
    letter-spacing: .03em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.box__pile { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.box__hits {
    position: absolute;
    top: 5px;
    right: 7px;
    z-index: 3;
    display: none;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: var(--win);
    color: #052e16;
    font-family: var(--display);
    font-weight: 800;
    font-size: .85rem;
}
.box__trail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: 4px 4px 5px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .38));
    border-top: 1px solid rgba(246, 196, 83, .22);
}
.box__trail i {
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    border-radius: 3px;
    background: rgba(0, 0, 0, .35);
    font-style: normal;
    font-size: .64rem;
    font-weight: 800;
    color: rgba(255, 255, 255, .4);
}
.box__trail i.is-hit { background: #fff1f1; color: #d01b2a; }

body:not([data-phase="betting"]) .box:not(.is-winner) .box__print { opacity: .45; filter: grayscale(.6) drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
.box.is-winner {
    background: radial-gradient(circle at 50% 45%, rgba(246, 196, 83, .38), rgba(246, 196, 83, .07) 70%);
    box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 30px rgba(246, 196, 83, .45);
    animation: glow 1s ease-in-out infinite alternate;
}
.box.is-winner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 245, 200, .35) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: sweep 1.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes sweep { to { transform: translateX(100%); } }
.box.is-winner .box__print { transform: translate(-50%, -50%) scale(1.12); filter: drop-shadow(0 0 14px rgba(255, 220, 120, .9)) drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
.box.is-winner .box__hits { display: block; }
@keyframes glow { to { box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 46px rgba(246, 196, 83, .75); } }

/* Dice thrown onto the table */
.dice-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.dice-layer .die {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 12%);
    transform: translate(-50%, -50%);
    transition: left .75s cubic-bezier(.2, .8, .25, 1), top .75s cubic-bezier(.2, .8, .25, 1), opacity .3s ease;
}
.dice-layer.is-idle .die { opacity: 0; }

.banner {
    position: absolute;
    left: 50%;
    top: clamp(10px, 3vw, 18px);
    z-index: 6;
    transform: translate(-50%, 0);
    width: max-content;
    max-width: 90%;
    text-align: center;
    font-family: var(--display);
    font-weight: 800;
    padding: .55rem 1.3rem;
    border-radius: 999px;
    font-size: clamp(1rem, 4vw, 1.3rem);
    line-height: 1.2;
    pointer-events: none;
    animation: pop-in .35s ease-out, settle .6s ease 3.5s forwards;
}
.banner--win {
    color: var(--gold-ink);
    background: linear-gradient(180deg, #ffe08a, var(--gold) 50%, var(--gold-2));
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .3), 0 0 40px rgba(246, 196, 83, .8);
    font-size: clamp(1.15rem, 5vw, 1.6rem);
}
.banner--lose { background: rgba(0, 0, 0, .7); color: #f3f4f6; font-weight: 700; }
.banner--info { background: rgba(0, 0, 0, .6); color: var(--ivory); font-weight: 600; font-family: var(--body); font-size: .92rem; }
@keyframes pop-in { from { transform: translate(-50%, -12px) scale(.85); opacity: 0; } }
@keyframes settle { to { transform: translate(-50%, 0) scale(.8); opacity: .85; } }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }

/* ---------- Dock: me, chips, rebet ---------- */

.dock {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "me rebet" "chips chips";
    align-items: center;
    gap: 10px 12px;
    margin: 12px -10px 0;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(26, 4, 8, .55), rgba(26, 4, 8, .95) 30%);
    border-top: 1px solid rgba(246, 196, 83, .3);
    backdrop-filter: blur(8px);
}
.me { grid-area: me; display: flex; align-items: center; gap: 10px; min-width: 0; }
.me__text { display: grid; min-width: 0; }
.me__name { font-size: .8rem; font-weight: 600; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me__coins {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1.1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}
.me__coins.is-up { animation: coins-up .6s ease; color: #a7f3d0; }
@keyframes coins-up { 40% { transform: scale(1.18); } }
.dock__chips {
    grid-area: chips;
    justify-self: center;
    display: flex;
    justify-content: center;
    gap: clamp(6px, 2.2vw, 12px);
    padding: 10px 12px 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .2));
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .06);
}
.dock__chips .chip { --size: clamp(44px, 13vw, 56px); }
.rebet {
    grid-area: rebet;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffe08a, var(--gold) 45%, var(--gold-2));
    color: var(--gold-ink);
    font-family: var(--display);
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 3px 0 #8a5a0a, 0 8px 16px rgba(0, 0, 0, .35);
    transition: filter .15s ease, transform .1s ease;
}
.rebet .ico { width: 18px; height: 18px; }
.rebet:hover:not(:disabled) { filter: brightness(1.06); }
.rebet:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a5a0a; }
.rebet:disabled { opacity: .45; cursor: default; }

/* ---------- Info sheet ---------- */

.sheet {
    width: min(560px, 100%);
    max-width: 100%;
    max-height: 88vh;
    max-height: 88dvh;
    margin: auto auto 0;
    padding: 22px 20px max(20px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 22px 22px 0 0;
    background: var(--ivory);
    color: var(--ink);
    overflow-y: auto;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, .5);
}
.sheet[open] { animation: sheet-in .25s ease-out; }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
.sheet::backdrop { background: rgba(20, 2, 6, .7); backdrop-filter: blur(3px); }
.sheet h2 { margin: 0 0 .6rem; font-family: var(--display); font-size: 1.5rem; color: #6b1424; }
.sheet h3 { margin: 1.3rem 0 .5rem; font-family: var(--display); font-size: 1.15rem; color: #6b1424; }
.sheet__close { position: sticky; top: 0; float: right; margin: -6px -6px 0 0; }
.sheet__close button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: #efe5cf;
    cursor: pointer;
    font-size: 1rem;
}
.steps { margin: 0; padding-left: 1.2rem; font-size: .92rem; line-height: 1.55; }
.payouts { width: 100%; border-collapse: collapse; font-size: .92rem; }
.payouts th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; padding: .4rem .3rem; border-bottom: 2px solid #eadfc7; }
.payouts td { padding: .65rem .3rem; border-bottom: 1px solid #f0e7d4; }
.payouts td:nth-child(2) { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: #15803d; }
.payouts td:last-child, .payouts th:last-child { text-align: right; }
.payouts tr.is-lost td:nth-child(2) { color: #b91c1c; font-size: .95rem; }
.payouts .dots { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: middle; }
.payouts .dots i { width: 14px; height: 14px; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1.5px #d01b2a; }
.limits { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.limits li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: .6rem .8rem;
    border-radius: 10px;
    background: #f6eedc;
    font-size: .9rem;
}
.limits b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.note { margin: .5rem 0 0; font-size: .78rem; color: #6b7280; }
.history { display: flex; flex-wrap: wrap; gap: 8px; }
.history__item { display: flex; gap: 3px; padding: 4px; border-radius: 10px; background: #efe5cf; }
.history__item:first-child { box-shadow: 0 0 0 2px var(--gold-2); }
.mini { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: #fff; }
.mini .sym--img { width: 100%; height: 100%; }
.history__empty { margin: 0; font-size: .85rem; color: #6b7280; }

/* ---------- Toast and coin rain ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(150px + env(safe-area-inset-bottom));
    z-index: 70;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 32px);
    padding: .75rem 1.15rem;
    border-radius: 14px;
    background: #111827;
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
    animation: rise .2s ease-out;
}
.burst { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.burst i {
    position: absolute;
    left: var(--pos);
    top: -30px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff3c4, #f6c453 45%, #b7790f);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
    animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }

/* ---------- Larger screens ---------- */

@media (min-width: 600px) {
    :root { --die: 60px; }
    .hud { padding-left: 20px; padding-right: 20px; }
    .hud__brand img { height: 40px; }
    .arena { padding: 0 20px; }
    .dock {
        margin: 14px -20px 0;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "me chips rebet";
        padding: 12px 20px max(12px, env(safe-area-inset-bottom));
    }
    .dock__chips { padding-top: 0; }
    .sheet { margin: auto; border-radius: 22px; padding: 26px 26px 24px; }
    .toast { bottom: calc(110px + env(safe-area-inset-bottom)); }
}

/* Wide: players sit on both sides of the table, 3 × 2 boxes like the real mat. */
@media (min-width: 900px) {
    :root { --die: clamp(50px, 9.5vh, 74px); }
    .arena { grid-template-areas: "dealer" "mid" "dock"; grid-template-rows: auto auto auto; align-content: center; }
    .arena > .dock { align-self: start; position: static; margin: 12px 0 14px; border-radius: 18px; border: 1px solid rgba(246, 196, 83, .3); }
    .arena__mid {
        grid-area: mid;
        position: relative;
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr) 96px;
        grid-template-areas: "left table right";
        gap: 14px;
        align-items: center;
    }
    .seats { flex-direction: column; align-items: center; gap: 16px; }
    .seats--left { grid-area: left; flex-wrap: nowrap; }
    .seats--right { grid-area: right; display: flex; }
    .table { width: 100%; max-width: calc((100vh - 250px) * 2.1); justify-self: center; }
    .seat { width: 88px; }
    .seat .avatar { width: 46px; height: 46px; font-size: 1.2rem; }
    .seat b { font-size: .74rem; }
    .seat small { font-size: .7rem; }
    .boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .box { min-height: clamp(96px, min(19vw, calc((100vh - 392px) / 2)), 210px); min-height: clamp(96px, min(19vw, calc((100dvh - 392px) / 2)), 210px); }
    .box__trail i { width: 18px; height: 18px; font-size: .72rem; }
    .dealer__person { width: clamp(110px, 23vh, 200px); }
    .dock__chips { padding: 10px 18px 8px; }
}

/* Phones held sideways: compact dealer, table fills the height. */
@media (orientation: landscape) and (max-height: 520px) {
    .login { flex-direction: row; gap: 2.5rem; }
}

/* ---------- Phones: the table is always played sideways ----------
   game.js sets html.phone-landscape on phones, and html.force-landscape when
   the phone is held upright: then the whole game is turned 90° so it still
   shows as a wide table, like the real Jhandi Munda apps. --app-w/--app-h are
   the width and height of the game as the player sees it. */

html.force-landscape,
html.force-landscape body { height: 100%; overflow: hidden; }
html.force-landscape .room {
    position: fixed;
    top: 0;
    left: 100%;
    width: var(--app-w);
    height: var(--app-h);
    transform: rotate(90deg);
    transform-origin: 0 0;
}

html.phone-landscape { --die: clamp(36px, calc(var(--app-h) * .105), 52px); }
html.phone-landscape .room { height: var(--app-h); min-height: 0; overflow: hidden; }
html.phone-landscape .hud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 6px 10px;
    pointer-events: none;
}
html.phone-landscape .hud > * { pointer-events: auto; }
html.phone-landscape .hud__brand img { height: 24px; }
html.phone-landscape .icon-btn { width: 32px; height: 32px; }
html.phone-landscape .icon-btn .ico,
html.phone-landscape #sound-btn .ico { width: 17px; height: 17px; }

html.phone-landscape .arena {
    height: 100%;
    max-width: none;
    padding: 0 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "dealer" "mid" "dock";
    align-content: stretch;
}
html.phone-landscape .dealer { margin-bottom: -14px; gap: 6px; }
html.phone-landscape .dealer__person { width: clamp(76px, calc(var(--app-h) * .3), 124px); }
html.phone-landscape .dealer::before { width: 240px; }
html.phone-landscape .dealer__side { padding-bottom: 22px; gap: 3px; }
html.phone-landscape .bubble { font-size: .74rem; padding: .25rem .6rem; }
html.phone-landscape .timer { width: 40px; height: 40px; }
html.phone-landscape .timer span { font-size: 1rem; }

html.phone-landscape .arena__mid {
    grid-area: mid;
    position: relative;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 62px;
    grid-template-areas: "left table right";
    gap: 8px;
    align-items: stretch;
    min-height: 0;
}
html.phone-landscape .seats { flex-direction: column; justify-content: center; align-items: center; gap: 8px; margin: 0; }
html.phone-landscape .seats--left { grid-area: left; flex-wrap: nowrap; }
html.phone-landscape .seats--right { grid-area: right; display: flex; }
html.phone-landscape .seat { width: 60px; }
html.phone-landscape .seat .avatar { width: 30px; height: 30px; font-size: .85rem; }

html.phone-landscape .table { grid-area: table; min-height: 0; max-width: none; }
html.phone-landscape .table__rim { height: 100%; display: flex; flex-direction: column; padding: 8px; border-radius: 22px; }
html.phone-landscape .table__felt { flex: 1; min-height: 0; border-radius: 15px; }
html.phone-landscape .table__cup { width: 28px; top: -11px; left: calc(50% - 74px); }
html.phone-landscape .boxes {
    height: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 7px;
}
html.phone-landscape .box { min-height: 0; border-radius: 11px; }
html.phone-landscape .box__name { display: none; }
html.phone-landscape .box__print { top: 47%; width: 40%; max-height: 52%; }
html.phone-landscape .box__head { top: 4px; left: 5px; font-size: .62rem; padding: 0 6px 0 2px; }
html.phone-landscape .box__hits { top: 4px; right: 5px; font-size: .7rem; }
html.phone-landscape .box__trail { padding: 2px 3px 3px; gap: 1.5px; }
html.phone-landscape .box__trail i { width: 12px; height: 12px; font-size: .52rem; border-radius: 2px; }
html.phone-landscape .chip--pile { --size: 17px; }
html.phone-landscape .banner { font-size: .9rem; padding: .3rem .9rem; top: 8px; }
html.phone-landscape .banner--win { font-size: 1.05rem; }

html.phone-landscape .arena > .dock,
html.phone-landscape .dock {
    position: static;
    grid-area: dock;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "me chips rebet";
    align-self: end;
    gap: 10px;
    margin: 6px 0;
    padding: 4px 10px;
    border-radius: 14px;
    border: 1px solid rgba(246, 196, 83, .3);
}
html.phone-landscape .avatar--me { width: 32px; height: 32px; font-size: .95rem; }
html.phone-landscape .me__name { font-size: .66rem; }
html.phone-landscape .me__coins { font-size: .98rem; }
html.phone-landscape .dock__chips { padding: 4px 10px; gap: 8px; }
html.phone-landscape .dock__chips .chip { --size: 36px; }
html.phone-landscape .chip.is-selected { transform: translateY(-4px) scale(1.06); }
html.phone-landscape .rebet { height: 32px; padding: 0 12px; font-size: .88rem; }

/* Things that live outside the turned table turn with it. */
html.force-landscape .toast { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%) rotate(90deg); }
html.force-landscape .sheet[open] {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    width: min(560px, calc(var(--app-w) * .92));
    max-height: calc(var(--app-h) * .9);
    border-radius: 22px;
    transform: translate(-50%, -50%) rotate(90deg);
    animation: none;
}
html.force-landscape .burst i { top: var(--pos); left: auto; right: -30px; animation-name: fall-side; }
@keyframes fall-side { to { transform: translateX(-115vw) rotate(540deg); } }

/* The first tap on a phone: go full screen and turn the table sideways. */
.start {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 18px;
    padding: 24px;
    text-align: center;
    background:
        radial-gradient(ellipse 80% 50% at 50% 30%, rgba(255, 196, 120, .18), transparent 70%),
        rgba(26, 4, 8, .96);
}
.start__logo { width: min(240px, 66vw); height: auto; }
.start__phone { width: 74px; height: 74px; color: var(--gold); animation: turn 2.2s ease-in-out infinite; }
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
.start p { margin: 0; max-width: 280px; font-size: .88rem; opacity: .8; }
.start .btn { min-width: 220px; font-size: 1.25rem; }

@media (max-width: 359px) {
    .hud__brand img { height: 28px; }
    .icon-btn { width: 36px; height: 36px; }
    .box__trail i { width: 12px; height: 13px; font-size: .56rem; }
    .rebet { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Recharge ---------- */

.topup {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #052e16;
    background: radial-gradient(circle at 35% 30%, #bbf7d0, #22c55e 55%, #15803d);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 3px 8px rgba(0, 0, 0, .4);
    cursor: pointer;
    transition: transform .12s ease, filter .15s ease;
}
.topup .ico { width: 20px; height: 20px; stroke-width: 3; }
.topup:hover { filter: brightness(1.08); }
.topup:active { transform: scale(.92); }
.topup.is-low { animation: nudge 1.2s ease-in-out infinite; }
.topup.is-waiting { background: radial-gradient(circle at 35% 30%, #fde68a, #f59e0b 55%, #b45309); }
@keyframes nudge {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 0 0 0 rgba(34, 197, 94, .7); }
    50% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 0 0 10px rgba(34, 197, 94, 0); }
}

.sheet h2 .sheet__ico { display: inline-grid; vertical-align: -3px; margin-right: 4px; }
.sheet h2 .sheet__ico .ico { width: 24px; height: 24px; }
.sheet--recharge .note { margin: 0 0 1rem; font-size: .85rem; }
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-bottom: 1rem; }
.pack {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: .7rem .5rem;
    border: 1.5px solid #e6d6b0;
    border-radius: 12px;
    background: #fffdf6;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.05rem;
    color: #3b2400;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.pack .coin { font-size: .9rem; }
.pack:hover { border-color: var(--gold-2); }
.pack.is-selected { border-color: var(--gold-2); background: #fff3cf; box-shadow: 0 0 0 3px rgba(246, 196, 83, .35); }
.pack:active { transform: scale(.97); }

.req {
    display: grid;
    gap: 4px;
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: #f6eedc;
    border-left: 5px solid #f59e0b;
}
.req.is-approved { border-left-color: #16a34a; background: #ecfdf3; }
.req.is-rejected, .req.is-cancelled { border-left-color: #e11d48; background: #fff1f2; }
.req__amount { font-family: var(--display); font-size: 1.6rem; font-weight: 800; color: #3b2400; line-height: 1.1; }
.req__status { font-weight: 700; font-size: .92rem; }
.req__meta { font-size: .78rem; color: #6b7280; }

.btn--whatsapp {
    margin-bottom: .6rem;
    color: #fff;
    background: linear-gradient(180deg, #34d97a, #1faa59);
    box-shadow: 0 4px 0 #128145, 0 10px 22px rgba(31, 170, 89, .35);
    font-family: var(--display);
    font-size: 1.1rem;
    text-decoration: none;
}
.btn--whatsapp .ico { width: 22px; height: 22px; }
.btn--ghost { background: transparent; color: #6b7280; border: 1.5px solid #e5dccb; margin-top: .4rem; }
.btn--ghost:hover { background: #f6eedc; }
.sheet--recharge .btn--gold { margin-top: .2rem; }
.sheet--recharge .field input { background: #fff; }

.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 1rem; border-radius: 12px; background: #f1e7d0; }
.tabs__tab {
    padding: .55rem .5rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1rem;
    color: #7c5a1d;
    cursor: pointer;
}
.tabs__tab.is-active { background: #fff; color: #3b2400; box-shadow: 0 1px 4px rgba(59, 36, 0, .18); }

.available { display: flex; align-items: center; gap: 6px; margin: 0 0 .8rem; font-size: .92rem; color: #374151; }
.available b { font-family: var(--display); font-size: 1.2rem; color: #3b2400; }
.field__row { display: flex; gap: 8px; margin: 0; }
.field__row input { flex: 1; min-width: 0; }
.pack--all { flex: none; padding: 0 1rem; font-size: .95rem; }

.sheet--confirm { max-width: 360px; }
.sheet--confirm .note { margin: 0 0 1rem; font-size: .9rem; }

html.phone-landscape .topup { width: 28px; height: 28px; }
html.phone-landscape .topup .ico { width: 16px; height: 16px; }


/* ---------- Mela theme: golden sunburst, bunting, coins ---------- */

body.page-play::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    z-index: 0;
    pointer-events: none;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='30' viewBox='0 0 120 30'><path d='M0 4 Q60 14 120 4' fill='none' stroke='%23fff3c4' stroke-opacity='.7' stroke-width='1.4'/><path d='M6 7 L22 7 L14 24z' fill='%23ef4444'/><path d='M30 9 L46 9 L38 26z' fill='%23facc15'/><path d='M54 10 L70 10 L62 27z' fill='%2322c55e'/><path d='M78 9 L94 9 L86 26z' fill='%233b82f6'/><path d='M102 7 L118 7 L110 24z' fill='%23f97316'/></svg>") repeat-x top / 120px 30px;
    opacity: .9;
}
body.page-play::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22vh;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 18% 70% at 4% 100%, #f6c453 0 38%, #b7790f 40% 46%, transparent 48%),
        radial-gradient(ellipse 18% 70% at 96% 100%, #f6c453 0 38%, #b7790f 40% 46%, transparent 48%);
    opacity: .55;
}
.room { position: relative; z-index: 1; }

.table__felt {
    background:
        radial-gradient(ellipse 75% 65% at 50% 42%, var(--felt-hi), transparent 78%),
        radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0, 30, 6, .55)),
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .22) 0 1.5px, transparent 2px) 0 0 / 46px 46px,
        radial-gradient(circle at 70% 70%, rgba(255, 230, 140, .25) 0 1.5px, transparent 2px) 0 0 / 61px 61px,
        var(--felt);
}

.dealer__person { cursor: pointer; transition: transform .15s ease; }
.dealer__person:hover { transform: scale(1.04); }
.dealer__person:active { transform: scale(.97); }
body.no-tip .dealer__person { cursor: default; }
.dealer__tip {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    padding: 1px 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #e0303f, #a50f20);
    border: 1px solid #f6c453;
    color: #fff3c4;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .5px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.dealer__wrap { position: relative; display: block; }
body.no-tip .dealer__tip { display: none; }

.login__brand { background: none; }
.login__hero { width: min(220px, 56vw); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 40px rgba(246, 196, 83, .4); }

/* ---------- Betting boxes: ivory cards with a gold frame, like the dice faces ---------- */

.boxes { gap: clamp(8px, 2vw, 14px); padding: clamp(10px, 2.4vw, 16px); }
.box {
    background:
        radial-gradient(ellipse at 50% 40%, #fffdf3 0%, #fbeec6 58%, #efd68e 100%);
    box-shadow:
        0 0 0 2px #7a0f1c,
        0 0 0 4px var(--gold),
        0 0 0 5px #8a5a0a,
        0 8px 14px rgba(0, 0, 0, .45),
        inset 0 0 0 3px rgba(255, 255, 255, .55),
        inset 0 -14px 22px rgba(160, 100, 10, .22);
}
.box::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: inherit;
    border: 1.5px dashed rgba(170, 20, 35, .45);
    pointer-events: none;
}
body[data-phase="betting"] .box:hover {
    background: radial-gradient(ellipse at 50% 40%, #fffef8 0%, #fff3ca 58%, #f6dc94 100%);
    box-shadow:
        0 0 0 2px #7a0f1c,
        0 0 0 4px #ffe08a,
        0 0 0 5px #8a5a0a,
        0 0 26px rgba(255, 220, 120, .8),
        0 8px 14px rgba(0, 0, 0, .45),
        inset 0 0 0 3px rgba(255, 255, 255, .6);
    transform: translateY(-2px);
}
body[data-phase="betting"] .box:active { transform: translateY(0) scale(.985); }
.box__print { filter: drop-shadow(0 3px 3px rgba(80, 40, 0, .35)); }
.box__print--text { color: rgba(122, 15, 28, .55); }
.box__head {
    top: 8px;
    left: 9px;
    background: linear-gradient(180deg, #c3202f, #7a0f1c);
    box-shadow: 0 0 0 1.5px var(--gold), 0 2px 4px rgba(0, 0, 0, .35);
    color: #fff3c4;
}
.box.has-mine .box__head { background: linear-gradient(180deg, #d82a3b, #8a1020); box-shadow: 0 0 0 2px #ffe08a, 0 0 10px rgba(255, 220, 120, .8); }
.box__mine { color: #ffe08a; }
.box__name {
    left: 14%;
    right: 14%;
    bottom: 29px;
    padding: 1px 0;
    border-radius: 4px;
    background: linear-gradient(180deg, #c3202f, #8a1020);
    color: #fff3c4;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    box-shadow: 0 0 0 1px #f6c453, 0 2px 3px rgba(0, 0, 0, .3);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.box__trail {
    background: linear-gradient(180deg, rgba(122, 15, 28, .78), rgba(70, 6, 14, .92));
    border-top: 1.5px solid var(--gold);
    border-radius: 0 0 inherit inherit;
}
.box__trail i { background: rgba(255, 255, 255, .14); color: rgba(255, 243, 196, .5); }
.box__hits { background: linear-gradient(180deg, #4ade80, #16a34a); color: #052e16; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .4); }
body:not([data-phase="betting"]) .box:not(.is-winner) { filter: saturate(.7) brightness(.92); }
.box.is-winner {
    background: radial-gradient(circle at 50% 45%, #fffbe0, #ffe27a 70%);
    box-shadow: 0 0 0 2px #7a0f1c, 0 0 0 4px #fff, 0 0 34px rgba(255, 225, 120, .95), inset 0 0 22px rgba(255, 190, 40, .6);
    animation: none;
    transform: scale(1.03);
    z-index: 2;
}
.box:disabled { opacity: 1; }

/* ---------- Dock: player card and chip rack ---------- */

.dock {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 40%),
        linear-gradient(180deg, #8a1020, #4a0610);
    border-top: 2px solid var(--gold);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 240, 180, .35);
}
.me {
    padding: 5px 12px 5px 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .3));
    box-shadow: 0 0 0 1.5px var(--gold), inset 0 2px 6px rgba(0, 0, 0, .5);
}
.avatar--me { box-shadow: 0 0 0 2px var(--gold), 0 3px 8px rgba(0, 0, 0, .5); }
.me__name { color: #fff3c4; opacity: 1; letter-spacing: .02em; }
.me__coins { text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.dock__chips {
    gap: clamp(8px, 2.6vw, 16px);
    padding: 12px clamp(14px, 4vw, 26px) 10px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .12), transparent 70%),
        linear-gradient(180deg, #0f6a22, #0a4a18);
    box-shadow:
        0 0 0 2px #f6c453,
        0 0 0 4px #6e0c19,
        inset 0 3px 10px rgba(0, 0, 0, .65),
        0 6px 14px rgba(0, 0, 0, .4);
}
.dock__chips .chip {
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, .25),
        inset 0 0 0 4px rgba(255, 255, 255, .25),
        0 4px 0 rgba(0, 0, 0, .5),
        0 10px 14px rgba(0, 0, 0, .4);
}
.dock__chips .chip span { font-size: calc(var(--size) * .32); }
.dock__chips .chip.is-selected {
    transform: translateY(-9px) scale(1.12);
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, .25),
        0 0 0 3px #fff3c4,
        0 0 0 5px var(--gold),
        0 0 24px rgba(255, 220, 120, .9),
        0 14px 18px rgba(0, 0, 0, .45);
}
.dock__chips .chip.is-selected::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    transform: translateX(-50%);
    box-shadow: 0 0 8px var(--gold);
}
.rebet { box-shadow: 0 3px 0 #8a5a0a, 0 0 0 2px #6e0c19, 0 8px 16px rgba(0, 0, 0, .35); }
html.phone-landscape .dock { background: linear-gradient(180deg, #8a1020, #4a0610); }
html.phone-landscape .dock__chips { padding: 5px 14px 4px; box-shadow: 0 0 0 1.5px #f6c453, inset 0 2px 6px rgba(0, 0, 0, .6); }
html.phone-landscape .me { padding: 3px 10px 3px 4px; }

/* ---------- Lobby: the list of games (Silverbab teal, silver and gold) ---------- */

body.page-lobby {
    --lobby-teal: #0f7f8e;
    --lobby-teal-dk: #08414d;
    --lobby-teal-xdk: #04262e;
    --silver: #dfe5ec;
    background:
        radial-gradient(ellipse 70% 40% at 50% 0%, rgba(120, 220, 230, .28), transparent 70%),
        radial-gradient(ellipse 100% 60% at 50% 110%, rgba(246, 196, 83, .12), transparent 70%),
        linear-gradient(180deg, #0a5562 0%, var(--lobby-teal-dk) 45%, var(--lobby-teal-xdk) 100%);
    background-attachment: fixed;
}
.lobby { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.lobby__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: max(10px, env(safe-area-inset-top)) clamp(12px, 3vw, 28px) 10px;
    background: linear-gradient(180deg, #12909f, var(--lobby-teal) 55%, #0b6874);
    border-bottom: 3px solid var(--gold);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.lobby__brand img { height: 48px; width: auto; display: block; }
.lobby__me { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lobby__me form { margin: 0; }
.lobby__coins {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 4px 14px 4px 8px;
    border-radius: 999px;
    background: rgba(0, 30, 36, .55);
    box-shadow: 0 0 0 1.5px var(--gold), inset 0 2px 6px rgba(0, 0, 0, .35);
    font-family: var(--display);
    font-size: 1.05rem;
    color: #ffe08a;
    font-variant-numeric: tabular-nums;
}
.lobby .icon-btn { border-color: rgba(255, 255, 255, .55); background: rgba(0, 30, 36, .35); }
.lobby .icon-btn:hover { background: rgba(255, 255, 255, .18); }
.lobby__main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 22px clamp(12px, 3vw, 28px) 30px; }
.lobby__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 26vw, 180px), 1fr)); gap: clamp(10px, 2.2vw, 18px); }
.gamecard {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    background: var(--lobby-teal-xdk);
    box-shadow: 0 0 0 2px var(--silver), 0 0 0 4px rgba(15, 127, 142, .9), 0 10px 20px rgba(0, 0, 0, .45);
    transition: transform .18s ease, box-shadow .18s ease;
}
.gamecard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gamecard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(2, 28, 34, .9)); }
.gamecard:hover, .gamecard:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold), 0 0 28px rgba(246, 196, 83, .6), 0 14px 24px rgba(0, 0, 0, .5);
    outline: none;
}
.gamecard:hover img { transform: scale(1.07); }
.gamecard__tag {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 2;
    padding: 1px 9px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe08a, var(--gold-2));
    color: var(--gold-ink);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .08em;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
}
.gamecard__name { position: absolute; left: 10px; right: 10px; bottom: 38px; z-index: 2; font-family: var(--display); font-size: 1.02rem; font-weight: 800; line-height: 1.15; text-shadow: 0 2px 4px rgba(0, 0, 0, .85); }
.gamecard__play {
    position: absolute;
    left: 10px;
    bottom: 9px;
    z-index: 2;
    padding: 2px 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f5f7fa, var(--silver) 50%, #9aa6b3);
    color: #08333b;
    font-family: var(--display);
    font-weight: 800;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    box-shadow: 0 2px 0 #66727f;
}
.gamecard:hover .gamecard__play { background: linear-gradient(180deg, #ffe08a, var(--gold) 50%, var(--gold-2)); box-shadow: 0 2px 0 #8a5a0a; }
.lobby__note { margin: 26px 0 0; text-align: center; font-size: .76rem; color: rgba(255, 255, 255, .5); }

/* ---------- Teen Patti: a table of five ---------- */

.tp__arena { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 0 10px 8px; display: flex; flex-direction: column; gap: 10px; }
.tp__strip { position: relative; z-index: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .4); box-shadow: 0 0 0 1.5px rgba(246, 196, 83, .6); font-size: .74rem; color: #fff3c4; }
.tp__strip b { color: #ffe08a; font-variant-numeric: tabular-nums; }

.tp__table { position: relative; z-index: 2; }
.tp__felt {
    position: relative;
    aspect-ratio: 1 / 1.02;
    max-height: 62vh;
    margin: 0 auto;
    width: 100%;
    border-radius: 46% / 40%;
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%, var(--felt-hi), transparent 80%),
        radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0, 30, 6, .6)),
        var(--felt);
    box-shadow: 0 0 0 4px var(--gold), 0 0 0 9px var(--rim), 0 20px 40px rgba(0, 0, 0, .55), inset 0 12px 30px rgba(0, 0, 0, .45);
}
.tp__dealer { position: absolute; left: 50%; top: -8%; width: 18%; z-index: 0; transform: translateX(-50%); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); pointer-events: none; }
.tp__center { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; text-align: center; width: 46%; }
.tp__pot { display: inline-flex; align-items: center; gap: 6px; padding: 3px 16px 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .45); box-shadow: 0 0 0 1.5px var(--gold); font-family: var(--display); font-size: clamp(1.1rem, 5vw, 1.6rem); color: #ffe08a; font-variant-numeric: tabular-nums; }
.tp__potlabel { font-size: .62rem; letter-spacing: .2em; color: rgba(255, 243, 196, .75); }
.tp__msg { margin-top: 6px; padding: 3px 10px; border-radius: 10px; background: rgba(0, 0, 0, .35); font-size: .76rem; font-weight: 600; color: #fff3c4; min-height: 1.4em; }
.tp__msg:empty { display: none; }
.tp .banner { top: 46%; z-index: 8; max-width: 86%; white-space: normal; }

/* Seats: positions by table size, counted from the player ("You" is always first, at the bottom). */
.tp__seats { position: absolute; inset: 0; }
.seat { position: absolute; z-index: 2; display: grid; justify-items: center; gap: 2px; width: 24%; transform: translate(-50%, -50%); transition: opacity .3s; }
.seat--empty { opacity: .4; }
.seat.is-out { opacity: .5; }
.pos-5-0, .pos-4-0, .pos-3-0, .pos-2-0 { left: 50%; top: 92%; }
.pos-5-1 { left: 13%; top: 68%; }
.pos-5-2 { left: 16%; top: 28%; }
.pos-5-3 { left: 84%; top: 28%; }
.pos-5-4 { left: 87%; top: 68%; }
.pos-4-1 { left: 13%; top: 52%; }
.pos-4-2 { left: 50%; top: 17%; }
.pos-4-3 { left: 87%; top: 52%; }
.pos-3-1 { left: 16%; top: 30%; }
.pos-3-2 { left: 84%; top: 30%; }
.pos-2-1 { left: 50%; top: 17%; }
.seat__avatar {
    --p: 0;
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(40px, 11vw, 54px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(160deg, #2b6f78, #0a4350);
    color: #fff;
    font-family: var(--display);
    font-weight: 800;
    font-size: .9rem;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), 0 4px 8px rgba(0, 0, 0, .45);
}
.seat.is-me .seat__avatar { background: linear-gradient(160deg, #f6c453, #b9770e); color: #3b2400; box-shadow: 0 0 0 2px #fff3c4, 0 4px 8px rgba(0, 0, 0, .45); }
.seat.is-turn .seat__avatar { box-shadow: 0 0 0 3px #ffe08a, 0 0 18px rgba(255, 224, 138, .9); animation: turn-pulse 1s ease-in-out infinite alternate; }
.seat.is-turn { --p: 1; }
.seat.is-turn .seat__avatar::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; background: conic-gradient(#ffe08a calc(var(--p, 1) * 360deg), transparent 0); -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%); mask: radial-gradient(circle, transparent 62%, #000 64%); }
.seat.is-winner .seat__avatar { box-shadow: 0 0 0 3px #4ade80, 0 0 22px rgba(74, 222, 128, .9); }
@keyframes turn-pulse { to { transform: scale(1.06); } }
.seat__dealer { position: absolute; right: -6px; bottom: -4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #7a0f1c; font-style: normal; font-size: .62rem; font-weight: 800; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.seat__name { font-size: .66rem; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); white-space: nowrap; }
.seat__tag { padding: 0 8px; border-radius: 999px; background: rgba(0, 0, 0, .5); font-size: .58rem; font-weight: 800; letter-spacing: .08em; color: #fff3c4; }
.seat__tag--packed { background: rgba(120, 20, 30, .85); }
.seat__tag--waiting { background: rgba(70, 90, 100, .8); }
.seat__bet { display: inline-flex; align-items: center; gap: 3px; padding: 0 8px; border-radius: 999px; background: linear-gradient(180deg, #c3202f, #7a0f1c); box-shadow: 0 0 0 1.5px var(--gold); font-size: .68rem; font-weight: 800; color: #fff3c4; font-variant-numeric: tabular-nums; }
.seat__bet .coin { width: 11px; height: 11px; }
.seat__rank { font-size: .6rem; font-weight: 800; color: #ffe08a; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.seat__cards { display: flex; gap: 2px; min-height: 30px; }
.mini-card { display: grid; place-items: center; width: 22px; height: 30px; border-radius: 4px; background: linear-gradient(160deg, #fff, #f3ead2); color: #111827; font-size: .6rem; line-height: 1; box-shadow: 0 3px 4px rgba(0, 0, 0, .4); }
.mini-card b { font-family: var(--display); font-size: .74rem; }
.mini-card i { font-style: normal; font-size: .72rem; }
.mini-card.is-red { color: #c81e2e; }
.mini-card.is-back { background: repeating-linear-gradient(45deg, rgba(255, 224, 138, .35) 0 2px, transparent 2px 6px), linear-gradient(160deg, #c3202f, #6e0c19); box-shadow: 0 3px 4px rgba(0, 0, 0, .4), inset 0 0 0 1.5px #f6c453; }
.mini-card.is-packed { opacity: .35; }

/* The player's own cards and moves */
.tp__me { display: grid; justify-items: center; gap: 10px; }
.tp__mycards { display: flex; gap: clamp(6px, 2vw, 12px); }
.tp__mycards.is-hidden { visibility: hidden; }
.tp__mycards.is-dealing .pcard { animation: deal-in .5s ease-out backwards; }
.tp__mycards.is-dealing .pcard:nth-child(2) { animation-delay: .12s; }
.tp__mycards.is-dealing .pcard:nth-child(3) { animation-delay: .24s; }
@keyframes deal-in { from { transform: translateY(-120px) rotateY(180deg) scale(.5); opacity: 0; } }
.tp__see { min-width: 200px; }
.tp__timerbar { position: relative; width: min(420px, 92%); height: 20px; border-radius: 999px; background: rgba(0, 0, 0, .45); overflow: hidden; box-shadow: 0 0 0 1.5px rgba(246, 196, 83, .6); }
.tp__timerbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #4ade80, #facc15); transition: width .25s linear; }
.tp__timerbar span { position: relative; display: block; text-align: center; font-size: .7rem; font-weight: 800; line-height: 20px; color: #052e16; }
.tp__timerbar.is-hurry i { background: linear-gradient(90deg, #ef4444, #f97316); }
.tp__actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.act {
    display: grid;
    justify-items: center;
    gap: 0;
    padding: 9px 4px;
    border: 0;
    border-radius: 12px;
    font-family: var(--display);
    font-weight: 800;
    font-size: .95rem;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 8px 14px rgba(0, 0, 0, .3);
    transition: transform .1s ease, filter .15s ease;
}
.act b { font-size: .78rem; font-variant-numeric: tabular-nums; min-height: 1.1em; }
.act:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.act:disabled { opacity: .4; cursor: default; filter: grayscale(.4); }
.act--pack { background: linear-gradient(180deg, #e0303f, #a50f20); color: #fff; }
.act--chaal { background: linear-gradient(180deg, #ffe08a, var(--gold) 45%, var(--gold-2)); color: var(--gold-ink); }
.act--raise { background: linear-gradient(180deg, #7ee0ee, #12818f); color: #04262e; }
.act--show { background: linear-gradient(180deg, #86efac, #16a34a); color: #052e16; }
.act[hidden] { display: none; }

.tp__dock { position: static; margin: 4px -10px 0; }
.tp__note { margin: 6px 0 0; text-align: center; font-size: .7rem; color: #ffe9a8; grid-column: 1 / -1; }
.entry__notice { margin: 1rem 0 1.2rem; padding: .9rem 1rem; border-radius: 12px; background: #fff3c4; border-left: 5px solid var(--gold-2); color: #3b2400; font-weight: 600; line-height: 1.45; }

/* Playing cards */
.pcard {
    position: relative;
    display: block;
    width: clamp(54px, 16vw, 84px);
    aspect-ratio: 5 / 7;
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.3, .8, .3, 1);
}
.pcard.is-back { transform: rotateY(180deg); }
.pcard__face, .pcard__back { position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 6px 8px rgba(0, 0, 0, .4); }
.pcard__face { display: grid; align-content: center; justify-items: center; background: linear-gradient(160deg, #fff, #f3ead2); color: #111827; font-style: normal; box-shadow: 0 6px 8px rgba(0, 0, 0, .4), inset 0 0 0 1.5px rgba(0, 0, 0, .12); }
.pcard.is-red .pcard__face { color: #c81e2e; }
.pcard__face b { font-family: var(--display); font-size: clamp(1.3rem, 5vw, 1.9rem); line-height: 1; }
.pcard__face span { font-size: clamp(1.3rem, 5.4vw, 2rem); line-height: 1; }
.pcard__back { transform: rotateY(180deg); background: repeating-linear-gradient(45deg, rgba(255, 224, 138, .35) 0 2px, transparent 2px 7px), linear-gradient(160deg, #c3202f, #6e0c19); box-shadow: 0 6px 8px rgba(0, 0, 0, .4), inset 0 0 0 2.5px #f6c453, inset 0 0 0 4.5px #6e0c19; }

/* ---------- Teen Patti theme: royal red & gold casino hall ---------- */

body.page-teen-patti {
    background:
        radial-gradient(ellipse 80% 45% at 50% 0%, rgba(255, 214, 140, .35), transparent 70%),
        radial-gradient(ellipse 120% 70% at 50% 40%, #7d0f2b, #3b0614 70%, #1d0209);
    background-attachment: fixed;
}
.page-teen-patti .tp__strip { background: linear-gradient(180deg, rgba(60, 4, 20, .85), rgba(30, 2, 10, .85)); box-shadow: 0 0 0 1.5px #f6c453, 0 4px 10px rgba(0, 0, 0, .5); }
.page-teen-patti .tp__felt {
    border-radius: 50% / 42%;
    background:
        radial-gradient(ellipse 60% 50% at 50% 45%, #ff7a2f 0%, #e0301f 38%, transparent 78%),
        radial-gradient(ellipse 110% 100% at 50% 50%, transparent 50%, rgba(60, 0, 8, .75)),
        #b3121f;
    box-shadow:
        0 0 0 3px #fff0b0,
        0 0 0 8px #d99a1c,
        0 0 0 11px #7a4a06,
        0 0 0 14px #ffd76a,
        0 0 30px 10px rgba(255, 190, 70, .35),
        0 24px 44px rgba(0, 0, 0, .6),
        inset 0 0 0 3px rgba(255, 224, 138, .55),
        inset 0 14px 34px rgba(0, 0, 0, .45);
}
.page-teen-patti .tp__felt::before {
    content: ""; position: absolute; inset: 7%; border-radius: 50% / 42%;
    box-shadow: inset 0 0 0 2px rgba(255, 224, 138, .5), 0 0 14px rgba(255, 200, 80, .35);
    pointer-events: none;
}
.page-teen-patti .tp__dealer { top: -11%; width: 22%; filter: drop-shadow(0 0 12px rgba(255, 200, 90, .6)) drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.page-teen-patti .tp__pot {
    background: linear-gradient(180deg, #5a0a1b, #2a0310);
    box-shadow: 0 0 0 2px #ffd76a, 0 0 16px rgba(255, 200, 80, .55), inset 0 2px 6px rgba(0, 0, 0, .5);
    color: #fff1b8; text-shadow: 0 0 8px rgba(255, 200, 80, .8);
}
.page-teen-patti .tp__potlabel { color: #ffe9a8; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.page-teen-patti .tp__msg { background: rgba(40, 2, 12, .6); box-shadow: 0 0 0 1px rgba(255, 215, 106, .45); }
.page-teen-patti .seat__avatar {
    background: radial-gradient(circle at 35% 30%, #5d6a86, #1e2740 75%);
    box-shadow: 0 0 0 2px #ffd76a, 0 0 0 4px #7a4a06, 0 5px 10px rgba(0, 0, 0, .55);
}
.page-teen-patti .seat.is-me .seat__avatar { background: radial-gradient(circle at 35% 30%, #ffe08a, #b9770e 80%); }
.page-teen-patti .seat.is-turn .seat__avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ffd76a, 0 0 22px rgba(255, 224, 138, .95); }
.page-teen-patti .seat__name { background: rgba(30, 2, 10, .7); padding: 0 8px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(255, 215, 106, .4); }
.page-teen-patti .seat__bet { background: linear-gradient(180deg, #ffe08a, #d99a1c); color: #4a2a00; box-shadow: 0 0 0 1.5px #7a4a06; }
.page-teen-patti .tp__timerbar { background: rgba(30, 2, 10, .7); box-shadow: 0 0 0 1.5px #ffd76a; }

/* Action bar: glossy buttons on a magenta stage, like the reference */
.page-teen-patti .tp__me {
    position: relative; padding: 12px 10px 14px; margin: 0 -10px; border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 30%), linear-gradient(135deg, #ff3fa4, #a1136b 55%, #5b0840);
    box-shadow: 0 -4px 18px rgba(255, 63, 164, .35), inset 0 2px 0 rgba(255, 255, 255, .35);
}
.page-teen-patti .act { border-radius: 14px; box-shadow: 0 4px 0 rgba(0, 0, 0, .4), 0 8px 14px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .45); }
.page-teen-patti .act--pack { background: linear-gradient(180deg, #ff6a76, #c3202f 55%, #8c0f1c); }
.page-teen-patti .act--raise { background: linear-gradient(180deg, #ffb35c, #f07a12 55%, #b8520a); color: #3a1a00; }
.page-teen-patti .act--show { background: linear-gradient(180deg, #8ff0a8, #1ea853 55%, #0f7a37); }
.page-teen-patti .pcard__face { background: linear-gradient(160deg, #fffdf6, #f1e4c0); }
.page-teen-patti .pcard__back { background: repeating-linear-gradient(45deg, rgba(255, 224, 138, .4) 0 2px, transparent 2px 7px), linear-gradient(160deg, #d3243a, #6e0c19); }

/* Teen Patti: landscape hall layout and artwork, matching the reference */
body.page-teen-patti {
    background: #2a0510 url('../images/theme/tp-hall.svg') center top / cover no-repeat fixed;
}
.page-teen-patti .tp__arena { max-width: 860px; }
.page-teen-patti .tp__felt {
    aspect-ratio: 1.55 / 1;
    max-height: none;
    margin-top: 9%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 55% 50% at 50% 48%, #ffb347 0%, #f2562a 30%, #d01f26 55%, transparent 80%),
        radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(70, 0, 10, .8)),
        #a8101c;
}
.page-teen-patti .tp__felt::before { border-radius: 50%; inset: 9%; }
.page-teen-patti .tp__dealer { top: -26%; width: 26%; }
.page-teen-patti .tp__center { top: 50%; width: 40%; }
.page-teen-patti .tp__center::before {
    content: ""; position: absolute; left: 50%; top: -92%; width: 80%; aspect-ratio: 220 / 120; transform: translateX(-50%);
    background: url('../images/theme/tp-coins.svg') center / contain no-repeat; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); pointer-events: none;
}
.page-teen-patti .pos-5-0, .page-teen-patti .pos-4-0, .page-teen-patti .pos-3-0, .page-teen-patti .pos-2-0 { left: 50%; top: 96%; }
.page-teen-patti .pos-5-1 { left: 7%; top: 70%; }
.page-teen-patti .pos-5-2 { left: 17%; top: 22%; }
.page-teen-patti .pos-5-3 { left: 83%; top: 22%; }
.page-teen-patti .pos-5-4 { left: 93%; top: 70%; }
.page-teen-patti .pos-4-1 { left: 8%; top: 50%; }
.page-teen-patti .pos-4-2 { left: 50%; top: 8%; }
.page-teen-patti .pos-4-3 { left: 92%; top: 50%; }
.page-teen-patti .pos-3-1 { left: 14%; top: 28%; }
.page-teen-patti .pos-3-2 { left: 86%; top: 28%; }
.page-teen-patti .pos-2-1 { left: 50%; top: 8%; }
.page-teen-patti .seat { width: 20%; }
.page-teen-patti .seat__avatar {
    width: clamp(46px, 12.5vw, 70px);
    background: url('../images/theme/tp-frame.svg') center / 100% 100% no-repeat;
    box-shadow: 0 6px 10px rgba(0, 0, 0, .5);
    border-radius: 0; color: #fff3c4; text-shadow: 0 1px 2px #000;
    filter: drop-shadow(0 0 5px rgba(255, 200, 80, .5));
}
.page-teen-patti .seat.is-me .seat__avatar { background-color: transparent; filter: drop-shadow(0 0 9px rgba(255, 224, 138, .95)); color: #fff; box-shadow: none; }
.page-teen-patti .seat.is-turn .seat__avatar { box-shadow: none; filter: drop-shadow(0 0 14px #ffe08a) drop-shadow(0 0 4px #fff); }
.page-teen-patti .seat.is-winner .seat__avatar { box-shadow: none; filter: drop-shadow(0 0 16px #4ade80); }
.page-teen-patti .seat__cards { min-height: 34px; }
.page-teen-patti .mini-card { width: 26px; height: 36px; }

/* Winner banner as the gold ribbon */
.page-teen-patti .banner--win {
    min-width: 62%; aspect-ratio: 320 / 110; display: grid; place-items: end center; padding-bottom: 6%;
    background: url('../images/theme/tp-winner.svg') center / contain no-repeat;
    color: #fff3c4; font-weight: 800; font-size: .8rem; text-shadow: 0 1px 3px #000; box-shadow: none; border: 0;
    filter: drop-shadow(0 0 16px rgba(255, 200, 80, .8));
}

/* Teen Patti: rectangular table, menu, side show and the player's record */
.page-teen-patti .tp__felt {
    aspect-ratio: 1.5 / 1;
    border-radius: 20px;
    background:
        radial-gradient(ellipse 60% 55% at 50% 50%, #ff8a3a 0%, #e8402a 32%, #c4182a 62%, transparent 92%),
        linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 30%, rgba(60, 0, 8, .5)),
        #a8101c;
    box-shadow:
        0 0 0 3px #fff0b0, 0 0 0 8px #d99a1c, 0 0 0 11px #7a4a06, 0 0 0 14px #ffd76a,
        0 0 30px 10px rgba(255, 190, 70, .35), 0 24px 44px rgba(0, 0, 0, .6),
        inset 0 0 0 3px rgba(255, 224, 138, .55), inset 0 14px 34px rgba(0, 0, 0, .45);
}
.page-teen-patti .tp__felt::before { border-radius: 12px; inset: 6%; }
.page-teen-patti .tp__dealer { top: -24%; }
.page-teen-patti .pos-5-1 { left: 9%; top: 74%; }
.page-teen-patti .pos-5-2 { left: 9%; top: 26%; }
.page-teen-patti .pos-5-3 { left: 91%; top: 26%; }
.page-teen-patti .pos-5-4 { left: 91%; top: 74%; }
.page-teen-patti .pos-4-1 { left: 9%; top: 50%; }
.page-teen-patti .pos-4-3 { left: 91%; top: 50%; }
.page-teen-patti .pos-3-1 { left: 9%; top: 36%; }
.page-teen-patti .pos-3-2 { left: 91%; top: 36%; }

/* Menu in the left corner */
.tp__menu { position: relative; z-index: 30; }
.tp__menulist { position: absolute; left: 0; top: calc(100% + 6px); min-width: 190px; display: grid; padding: 6px; border-radius: 14px; background: linear-gradient(180deg, #4a0a1b, #260310); box-shadow: 0 0 0 2px #ffd76a, 0 12px 24px rgba(0, 0, 0, .55); }
.tp__menulist[hidden] { display: none; }
.tp__menulist button, .tp__menulist a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; color: #fff3c4; font: inherit; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.tp__menulist button:hover, .tp__menulist a:hover { background: rgba(255, 215, 106, .16); }
.tp__menulist .ico { width: 20px; height: 20px; }

/* Four moves: Pack, Chaal, Side Show, + */
.page-teen-patti .tp__actions { grid-template-columns: 1fr 1.2fr 1.2fr .8fr; }
.page-teen-patti .act--side { background: linear-gradient(180deg, #7ee0ee, #1a98a8 55%, #0d6672); color: #04262e; }
.page-teen-patti .act span { font-size: .85rem; }
.page-teen-patti .act .act__plus { font-size: 1.7rem; line-height: 1; }

/* Side show: question, wait and outcome */
.tp__ask { position: fixed; left: 50%; top: 18%; z-index: 40; width: min(92vw, 360px); transform: translateX(-50%); padding: 14px; border-radius: 16px; text-align: center; background: linear-gradient(180deg, #5a0a1b, #2a0310); box-shadow: 0 0 0 2px #ffd76a, 0 0 26px rgba(255, 200, 80, .5), 0 14px 30px rgba(0, 0, 0, .6); color: #fff3c4; }
.tp__ask[hidden] { display: none; }
.tp__ask p { margin: 0 0 10px; font-weight: 700; }
.tp__ask-btns { display: flex; gap: 10px; justify-content: center; }
.tp__ask-btns[hidden], .tp__ask-cards[hidden] { display: none; }
.tp__ask-cards { display: flex; justify-content: center; gap: 22px; margin-bottom: 4px; }
.tp__ask-cards small { display: block; margin-bottom: 3px; font-size: .68rem; color: #ffe08a; }
.tp__ask-cards .mini-card { margin: 0 1px; width: 30px; height: 42px; }

/* The player's record at this table */
.sheet--me { max-width: 340px; }
.mecard { display: grid; justify-items: center; gap: 4px; text-align: center; }
.mecard h2 { margin: 6px 0 0; }
.mecard__table { margin: 0 0 8px; font-size: .8rem; color: #6b7280; }
.mecard__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin: 6px 0 10px; }
.mecard__stats div { padding: 12px 6px; border-radius: 14px; background: #fff3c4; }
.mecard__stats b { display: block; font-family: var(--display); font-size: 1.6rem; color: #3b2400; font-variant-numeric: tabular-nums; }
.mecard__stats b.is-up { color: #15803d; }
.mecard__stats b.is-down { color: #b91c1c; }
.mecard__stats span { font-size: .72rem; color: #6b4a10; }
.page-teen-patti .tp__mycards { cursor: pointer; }

/* Teen Patti: compact moves, responsive on every screen */
.page-teen-patti .tp__me { width: min(100%, 480px); margin: 0 auto; padding: 8px 10px 10px; gap: 8px; border-radius: 18px; }
.page-teen-patti .tp__actions { gap: 6px; }
.page-teen-patti .act { padding: 6px 2px; border-radius: 11px; box-shadow: 0 3px 0 rgba(0, 0, 0, .4), 0 5px 10px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .45); }
.page-teen-patti .act span { font-size: .78rem; }
.page-teen-patti .act b { font-size: .66rem; min-height: 1em; }
.page-teen-patti .act .act__plus { font-size: 1.4rem; }
.page-teen-patti .tp__see { min-width: 0; padding: 7px 18px; font-size: .85rem; }
.page-teen-patti .pcard { width: clamp(44px, 12vw, 62px); }
.page-teen-patti .tp__felt { max-width: calc(58vh * 1.5); }
@media (min-width: 900px) {
    .page-teen-patti .tp__arena { max-width: 980px; }
    .page-teen-patti .tp__me { width: 520px; }
}

/* Phones: the table is always wide (the page turns itself if held upright) */
html.phone-landscape .page-teen-patti .tp__arena {
    position: relative; flex: none; height: 100%; max-width: none; padding: 38px 10px 6px; gap: 4px 8px;
    display: grid; align-items: center;
    grid-template-columns: minmax(104px, 24%) minmax(0, 1fr) minmax(190px, 44%);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "table table table" "dock cards actions";
}
html.phone-landscape .page-teen-patti .tp__strip { position: absolute; z-index: 25; top: 7px; left: 50%; transform: translateX(-50%); flex-wrap: nowrap; gap: 4px 10px; padding: 2px 10px; font-size: .6rem; white-space: nowrap; }
html.phone-landscape .page-teen-patti #s-table { display: none; }
html.phone-landscape .page-teen-patti .tp__table { grid-area: table; height: 100%; min-height: 0; }
html.phone-landscape .page-teen-patti .tp__felt {
    width: 100%; max-width: none; height: 100%; max-height: none; aspect-ratio: auto; margin: 0; border-radius: 16px;
    box-shadow: 0 0 0 2px #fff0b0, 0 0 0 5px #d99a1c, 0 0 0 7px #7a4a06, 0 8px 18px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(255, 224, 138, .55), inset 0 8px 20px rgba(0, 0, 0, .45);
}
html.phone-landscape .page-teen-patti .tp__felt::before { inset: 5%; border-radius: 10px; }
html.phone-landscape .page-teen-patti .tp__dealer { top: -5%; width: auto; height: 36%; }
html.phone-landscape .page-teen-patti .tp__center { top: 55%; width: 34%; }
html.phone-landscape .page-teen-patti .tp__center::before { width: 62%; top: -66%; }
html.phone-landscape .page-teen-patti .tp__pot { font-size: .95rem; padding: 1px 12px 1px 8px; }
html.phone-landscape .page-teen-patti .tp__potlabel { display: none; }
html.phone-landscape .page-teen-patti .tp__msg { margin-top: 2px; padding: 1px 8px; font-size: .62rem; }
html.phone-landscape .page-teen-patti .seat { width: 64px; gap: 1px; }
html.phone-landscape .page-teen-patti .seat.is-me { display: none; }
html.phone-landscape .page-teen-patti .seat__avatar { width: 34px; font-size: .62rem; }
html.phone-landscape .page-teen-patti .seat__name { font-size: .5rem; padding: 0 5px; }
html.phone-landscape .page-teen-patti .seat__tag { font-size: .46rem; padding: 0 5px; }
html.phone-landscape .page-teen-patti .seat__bet { font-size: .56rem; padding: 0 5px; }
html.phone-landscape .page-teen-patti .seat__rank { font-size: .5rem; }
html.phone-landscape .page-teen-patti .seat__cards { min-height: 24px; }
html.phone-landscape .page-teen-patti .mini-card { width: 17px; height: 24px; }
html.phone-landscape .page-teen-patti .pos-5-1, html.phone-landscape .page-teen-patti .pos-4-1 { left: 8%; top: 70%; }
html.phone-landscape .page-teen-patti .pos-5-2 { left: 8%; top: 28%; }
html.phone-landscape .page-teen-patti .pos-5-3 { left: 92%; top: 28%; }
html.phone-landscape .page-teen-patti .pos-5-4, html.phone-landscape .page-teen-patti .pos-4-3 { left: 92%; top: 70%; }
html.phone-landscape .page-teen-patti .pos-4-1 { top: 50%; }
html.phone-landscape .page-teen-patti .pos-4-3 { top: 50%; }
html.phone-landscape .page-teen-patti .pos-4-2, html.phone-landscape .page-teen-patti .pos-2-1 { left: 25%; top: 24%; }
html.phone-landscape .page-teen-patti .pos-3-1 { left: 8%; top: 40%; }
html.phone-landscape .page-teen-patti .pos-3-2 { left: 92%; top: 40%; }

/* bottom row: my coins | my cards | the four moves */
html.phone-landscape .page-teen-patti .tp__me { display: contents; }
html.phone-landscape .page-teen-patti .tp__mycards { grid-area: cards; justify-self: start; gap: 5px; }
html.phone-landscape .page-teen-patti .pcard { width: 38px; }
html.phone-landscape .page-teen-patti .pcard__face b { font-size: 1rem; }
html.phone-landscape .page-teen-patti .pcard__face span { font-size: 1rem; }
html.phone-landscape .page-teen-patti .tp__see { grid-area: cards; justify-self: end; padding: 6px 10px; font-size: .7rem; }
html.phone-landscape .page-teen-patti .tp__actions { grid-area: actions; gap: 5px; }
html.phone-landscape .page-teen-patti .act { padding: 4px 1px; border-radius: 9px; }
html.phone-landscape .page-teen-patti .act span { font-size: .62rem; }
html.phone-landscape .page-teen-patti .act b { font-size: .56rem; }
html.phone-landscape .page-teen-patti .act .act__plus { font-size: 1.15rem; }
html.phone-landscape .page-teen-patti .tp__timerbar { position: absolute; z-index: 24; top: 26px; left: 50%; transform: translateX(-50%); width: 150px; height: 13px; }
html.phone-landscape .page-teen-patti .tp__timerbar span { font-size: .55rem; line-height: 13px; }
html.phone-landscape .page-teen-patti .tp__dock { grid-area: dock; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
html.phone-landscape .page-teen-patti .tp__note { display: none; }
html.phone-landscape .page-teen-patti .tp__menulist { min-width: 160px; }
html.phone-landscape .page-teen-patti .tp__menulist button, html.phone-landscape .page-teen-patti .tp__menulist a { padding: 7px 10px; font-size: .8rem; }

/* the question box lives outside the turned page, so it turns with it */
html.force-landscape .tp__ask { top: 50%; transform: translate(-50%, -50%) rotate(90deg); width: min(360px, calc(var(--app-w) * .8)); }
html.phone-landscape .tp__ask { padding: 9px; }
.page-teen-patti .tp__center { z-index: 1; }
.page-teen-patti .tp__center::before { z-index: -1; }
html.phone-landscape .page-teen-patti .tp__center { top: 58%; }
html.phone-landscape .page-teen-patti .tp__center::before { width: 70%; top: -52%; }
html.phone-landscape .page-teen-patti .tp__dealer { top: 1%; height: 30%; }
.page-teen-patti .seat__avatar, .page-teen-patti .seat.is-me .seat__avatar { background: url('../images/theme/tp-frame.svg') center / 100% 100% no-repeat; box-shadow: none; }
.page-teen-patti .tp__felt { max-width: calc(46vh * 1.5); }
@media (max-width: 899px) { .page-teen-patti .tp__felt { max-width: calc(54vh * 1.5); } }

/* Teen Patti: no pillars or gold mounds, a tappable dealer, a big countdown */
body.page-teen-patti::after { display: none; }
.page-teen-patti .tp__dealer { pointer-events: auto; cursor: pointer; z-index: 6; transition: transform .15s ease; }
.page-teen-patti .tp__dealer:active { transform: translateX(-50%) scale(.96); }
.page-teen-patti .tp__dealer[hidden] { display: none; }
.tp__count { position: absolute; z-index: 7; right: 22%; top: 40%; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; text-align: center; background: radial-gradient(circle at 35% 30%, #5a0a1b, #2a0310); box-shadow: 0 0 0 3px #ffd76a, 0 0 18px rgba(255, 200, 80, .6); color: #fff3c4; line-height: 1; }
.tp__count[hidden] { display: none; }
.tp__count small { margin-top: 9px; font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; }
.tp__count b { margin-bottom: 9px; font-family: var(--display); font-size: 1.6rem; color: #ffe08a; font-variant-numeric: tabular-nums; }
html.phone-landscape .tp__count { width: 50px; height: 50px; right: 20%; top: 36%; }
html.phone-landscape .tp__count b { font-size: 1.25rem; }

/* ---------- Teen Patti: final polish ---------- */

/* Table: studded gold rim, quilted felt, soft spotlight */
.page-teen-patti .tp__felt {
    background:
        repeating-linear-gradient(45deg, rgba(255, 224, 138, .07) 0 2px, transparent 2px 14px),
        repeating-linear-gradient(-45deg, rgba(255, 224, 138, .07) 0 2px, transparent 2px 14px),
        radial-gradient(ellipse 58% 55% at 50% 48%, #ff9a45 0%, #ea4a2b 30%, #c4182a 60%, transparent 92%),
        linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 28%, rgba(60, 0, 8, .55)),
        #a8101c;
}
.page-teen-patti .tp__felt::after {
    content: ""; position: absolute; inset: 2.5%; border-radius: 14px; pointer-events: none;
    border: 3px dotted rgba(255, 233, 160, .85); opacity: .75;
}
html.phone-landscape .page-teen-patti .tp__felt::after { inset: 2%; border-width: 2px; border-radius: 10px; }

/* Avatars: a person in the frame, the state as a coloured plate underneath */
.page-teen-patti .seat__avatar {
    font-size: 0;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='40' r='13' fill='%23f6dcae'/><path d='M24 74q0-19 26-19t26 19z' fill='%23f6dcae'/></svg>") center 55% / 62% no-repeat,
        url('../images/theme/tp-frame.svg') center / 100% 100% no-repeat;
}
.page-teen-patti .seat.is-me .seat__avatar {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='40' r='13' fill='%23ffe08a'/><path d='M24 74q0-19 26-19t26 19z' fill='%23ffe08a'/></svg>") center 55% / 62% no-repeat,
        url('../images/theme/tp-frame.svg') center / 100% 100% no-repeat;
}
.page-teen-patti .seat__name { font-weight: 700; letter-spacing: .02em; }
.page-teen-patti .seat__tag { font-weight: 800; }
.page-teen-patti .seat__tag--active { background: linear-gradient(180deg, #3b82f6, #1d4ed8); color: #fff; }
.page-teen-patti .seat__tag--packed { background: linear-gradient(180deg, #ef4444, #991b1b); color: #fff; }
.page-teen-patti .seat__tag--waiting { background: rgba(30, 20, 40, .8); color: #d6c9a8; }
.page-teen-patti .seat__dealer { right: -2px; bottom: 0; background: linear-gradient(180deg, #fff, #ffe9a0); color: #7a0f1c; box-shadow: 0 0 0 1.5px #b9770e; }

/* Pot and message: one tidy cluster */
.page-teen-patti .tp__msg { background: linear-gradient(180deg, rgba(60, 4, 20, .85), rgba(30, 2, 10, .85)); box-shadow: 0 0 0 1px rgba(255, 215, 106, .6); color: #ffe9a8; }

/* Moves: glossy and a little taller to tap */
.page-teen-patti .act { position: relative; overflow: hidden; }
.page-teen-patti .act::after { content: ""; position: absolute; inset: 0 0 52% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)); pointer-events: none; }
.page-teen-patti .act { min-height: 44px; }
html.phone-landscape .page-teen-patti .act { min-height: 38px; }

/* Bottom row sits clear of the screen edge */
html.phone-landscape .page-teen-patti .tp__arena { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
html.phone-landscape .page-teen-patti .tp__dock .me { transform: scale(.92); transform-origin: left center; }

/* ---------- Teen Patti: night-lounge background, no bunting, new move panel ---------- */
body.page-teen-patti { background: #05030f url('../images/theme/tp-lounge.svg') center / cover no-repeat fixed; }
body.page-teen-patti::before, body.page-teen-patti::after { display: none; }

/* The move panel: a glass console with a gold edge */
.page-teen-patti .tp__me {
    background: linear-gradient(180deg, rgba(40, 24, 86, .9), rgba(10, 5, 28, .96));
    border: 2px solid #ffd76a; border-bottom: 0;
    box-shadow: 0 -8px 26px rgba(150, 100, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
    border-radius: 24px 24px 0 0; padding: 10px 12px 12px; gap: 9px;
}
.page-teen-patti .tp__actions { gap: 8px; }
.page-teen-patti .act {
    min-height: 54px; padding: 7px 2px 6px; gap: 3px; border-radius: 15px; align-content: center;
    border: 1.5px solid rgba(255, 255, 255, .55);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .5), 0 8px 14px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -8px 12px rgba(0, 0, 0, .18);
    letter-spacing: .03em;
}
.page-teen-patti .act span { font-size: .86rem; font-weight: 800; text-shadow: 0 1px 0 rgba(255, 255, 255, .3); }
.page-teen-patti .act b {
    display: inline-block; min-width: 2.6em; padding: 1px 9px; border-radius: 999px; font-size: .72rem; line-height: 1.25; min-height: 0;
    background: rgba(0, 0, 0, .38); color: #fff; text-shadow: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
}
.page-teen-patti .act b:empty { visibility: hidden; }
.page-teen-patti .act--pack { background: linear-gradient(180deg, #ff7480, #d02435 55%, #8f0f1e); color: #fff; }
.page-teen-patti .act--pack span { text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.page-teen-patti .act--chaal { background: linear-gradient(180deg, #fff0a8, #f7bd2c 55%, #b9770e); color: #3b2400; }
.page-teen-patti .act--side { background: linear-gradient(180deg, #8fe6f5, #1fa3b6 55%, #0b6371); color: #03252c; }
.page-teen-patti .act--raise { background: linear-gradient(180deg, #ffbf70, #f2801a 55%, #b9520a); color: #3a1a00; }
.page-teen-patti .act .act__plus { font-size: 1.7rem; font-weight: 900; line-height: .9; }
.page-teen-patti .act:disabled { opacity: .38; filter: grayscale(.5) brightness(.85); box-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.page-teen-patti .act:not(:disabled) { animation: act-ready 1.6s ease-in-out infinite alternate; }
@keyframes act-ready { to { box-shadow: 0 4px 0 rgba(0, 0, 0, .5), 0 0 16px rgba(255, 224, 138, .55), inset 0 2px 0 rgba(255, 255, 255, .5); } }
html.phone-landscape .page-teen-patti .act { min-height: 42px; padding: 4px 1px 3px; border-radius: 11px; gap: 1px; }
html.phone-landscape .page-teen-patti .act span { font-size: .64rem; }
html.phone-landscape .page-teen-patti .act b { font-size: .56rem; padding: 0 6px; min-width: 2em; }
html.phone-landscape .page-teen-patti .act .act__plus { font-size: 1.25rem; }

/* Dealing, chips and folding */
.tp__fx { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.tp__fx .fx { position: absolute; display: block; will-change: transform, opacity; }
.tp__fx .fx--card .mini-card { width: 20px; height: 28px; }
.tp__fx .fx--coin .coin { display: block; width: 17px; height: 17px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
html.phone-landscape .tp__fx .fx--card .mini-card { width: 16px; height: 22px; }
html.phone-landscape .tp__fx .fx--coin .coin { width: 13px; height: 13px; }
.tp__felt.is-dealing .seat__cards { visibility: hidden; }
.tp__dealer.is-dealing { animation: dealer-deal .5s ease-in-out 3; transform-origin: 50% 100%; }
@keyframes dealer-deal { 0%, 100% { transform: translateX(-50%) rotate(0); } 50% { transform: translateX(-50%) rotate(-4deg) translateY(2px); } }
.tp__mycards.is-dealing .pcard { animation-delay: 1s; }
.tp__mycards.is-dealing .pcard:nth-child(2) { animation-delay: 1.12s; }
.tp__mycards.is-dealing .pcard:nth-child(3) { animation-delay: 1.24s; }

/* ---------- Teen Patti: cards on the table, one compact move panel ---------- */
.page-teen-patti .seat.is-me { display: none; }

/* My cards sit on the felt in front of me */
.tp__hand { position: absolute; z-index: 6; left: 50%; bottom: 4%; transform: translateX(-50%); display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 5px 8px; }
.tp__hand .tp__mycards { grid-column: 1 / -1; justify-self: center; gap: 5px; }
.page-teen-patti .tp__hand .pcard { width: clamp(36px, 10.5vw, 54px); }
.page-teen-patti .tp__hand .pcard__face b { font-size: clamp(1rem, 3.6vw, 1.5rem); }
.page-teen-patti .tp__hand .pcard__face span { font-size: clamp(1rem, 3.8vw, 1.6rem); }
.page-teen-patti .tp__hand .tp__see { margin: 0; padding: 4px 12px; font-size: .72rem; min-width: 0; }
.tp__mybet { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: 999px; font-size: .6rem; font-weight: 800; letter-spacing: .06em; color: #fff; background: linear-gradient(180deg, #3b82f6, #1d4ed8); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55); }
.tp__mybet[hidden] { display: none; }
.tp__mybet--seen { background: linear-gradient(180deg, #22c55e, #15803d); }
.tp__mybet--packed { background: linear-gradient(180deg, #ef4444, #991b1b); }
.tp__mybet.is-turn { box-shadow: 0 0 0 2px #ffe08a, 0 0 12px rgba(255, 224, 138, .9); }
.tp__mybet span { display: inline-flex; align-items: center; gap: 3px; color: #ffe9a8; font-variant-numeric: tabular-nums; }
.tp__mybet .coin { width: 10px; height: 10px; }
.page-teen-patti .tp__center { top: 44%; }
.page-teen-patti .tp__center::before { width: 62%; top: -62%; }
.page-teen-patti .tp__potlabel { display: none; }

/* The move panel: coins and name on top, five moves, the deduction note under it */
.page-teen-patti .tp__panel {
    width: min(100%, 520px); margin: 0 auto; padding: 8px 10px 9px; display: grid; gap: 7px;
    background: linear-gradient(180deg, rgba(40, 24, 86, .92), rgba(10, 5, 28, .97));
    border: 2px solid #ffd76a; border-bottom: 0; border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 26px rgba(150, 100, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.tp__panelhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.tp__panel .me { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tp__panel .avatar--me { width: 32px; height: 32px; font-size: .9rem; flex: none; }
.tp__panel .me__name { font-size: .72rem; }
.tp__panel .me__coins { font-size: .98rem; }
.tp__panel .topup { flex: none; }
.tp__panel .tp__timerbar { flex: 1; width: auto; max-width: 220px; height: 16px; }
.tp__panel .tp__timerbar span { line-height: 16px; font-size: .62rem; }
.page-teen-patti .tp__actions { grid-template-columns: .9fr .8fr 1.05fr 1.2fr 1fr; gap: 6px; }
.page-teen-patti .act { min-height: 42px; padding: 4px 2px 3px; gap: 2px; border-radius: 12px; }
.page-teen-patti .act span { font-size: .74rem; }
.page-teen-patti .act--side span { font-size: .66rem; }
.page-teen-patti .act b { padding: 0 7px; min-width: 2.2em; font-size: .62rem; }
.page-teen-patti .act .act__plus { font-size: 1.45rem; }
.page-teen-patti .act--show { background: linear-gradient(180deg, #9af2b0, #1fb55a 55%, #0e7a3a); color: #04260f; }
.page-teen-patti .tp__note { margin: 0; font-size: .62rem; line-height: 1.25; color: #ffe9a8; text-align: center; }

/* Phones on their side: table above, the panel as one slim row below */
html.phone-landscape .page-teen-patti .tp__arena { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "table" "panel"; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
html.phone-landscape .page-teen-patti .tp__panel { grid-area: panel; width: 100%; max-width: none; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "head actions" "note note"; align-items: center; gap: 2px 10px; padding: 5px 10px 4px; border-radius: 14px 14px 0 0; }
html.phone-landscape .page-teen-patti .tp__panelhead { grid-area: head; }
html.phone-landscape .page-teen-patti .tp__actions { grid-area: actions; }
html.phone-landscape .page-teen-patti .tp__note { grid-area: note; display: block; font-size: .52rem; }
html.phone-landscape .page-teen-patti .tp__panel .avatar--me { width: 26px; height: 26px; font-size: .75rem; }
html.phone-landscape .page-teen-patti .tp__panel .me__coins { font-size: .85rem; }
html.phone-landscape .page-teen-patti .act { min-height: 34px; padding: 2px 1px; border-radius: 9px; }
html.phone-landscape .page-teen-patti .act span { font-size: .6rem; }
html.phone-landscape .page-teen-patti .act--side span { font-size: .54rem; }
html.phone-landscape .page-teen-patti .act b { font-size: .52rem; padding: 0 5px; min-width: 1.8em; }
html.phone-landscape .page-teen-patti .act .act__plus { font-size: 1.1rem; }
html.phone-landscape .page-teen-patti .tp__hand { bottom: 3%; gap: 3px 6px; }
html.phone-landscape .page-teen-patti .tp__hand .tp__mycards, html.phone-landscape .page-teen-patti .tp__hand .tp__see { grid-area: auto; }
html.phone-landscape .page-teen-patti .tp__hand .tp__mycards { grid-column: 1 / -1; justify-self: center; }
html.phone-landscape .page-teen-patti .tp__hand .pcard { width: 32px; }
html.phone-landscape .page-teen-patti .tp__hand .pcard__face b, html.phone-landscape .page-teen-patti .tp__hand .pcard__face span { font-size: .85rem; }
html.phone-landscape .page-teen-patti .tp__hand .tp__see { padding: 2px 8px; font-size: .58rem; }
html.phone-landscape .tp__mybet { font-size: .5rem; padding: 0 7px; }
html.phone-landscape .page-teen-patti .tp__center { top: 46%; }
html.phone-landscape .page-teen-patti .tp__center::before { width: 52%; top: -50%; }

/* Hands turned over: each card flips up, one after another */
.mini-card.flip { animation: card-flip .75s cubic-bezier(.2, .8, .3, 1) backwards; animation-delay: calc(var(--i, 0) * .16s); }
@keyframes card-flip {
    from { transform: perspective(220px) rotateY(90deg) scale(.7); opacity: 0; }
    60% { transform: perspective(220px) rotateY(-10deg) scale(1.18); opacity: 1; }
    to { transform: perspective(220px) rotateY(0) scale(1); }
}
.tp__ask-cards .mini-card.flip { animation-duration: .9s; }

/* ---------- Teen Patti: choose a boot level ---------- */
body.page-tp-tables { background: #05030f url('../images/theme/tp-lounge.svg') center / cover no-repeat fixed; }
body.page-tp-tables::before, body.page-tp-tables::after { display: none; }
.tiers__title { margin: 6px 0 4px; text-align: center; font-family: var(--display); font-size: clamp(1.5rem, 5vw, 2.1rem); color: #ffe9a8; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.tiers__lead { margin: 0 auto 18px; max-width: 520px; text-align: center; font-size: .86rem; color: rgba(255, 243, 196, .8); }
.tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: clamp(10px, 2.2vw, 16px); }
.tier {
    display: grid; gap: 8px; justify-items: center; padding: 16px 14px 14px; border-radius: 20px; text-align: center;
    background: linear-gradient(180deg, rgba(60, 36, 120, .85), rgba(16, 8, 40, .95));
    box-shadow: 0 0 0 2px #ffd76a, 0 12px 26px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
    color: #fff3c4;
}
.tier.is-locked { opacity: .6; filter: saturate(.6); }
.tier__name { padding: 2px 14px; border-radius: 999px; font-family: var(--display); font-weight: 800; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; color: #3b2400; background: linear-gradient(180deg, #fff0a8, #f7bd2c 55%, #b9770e); }
.tier__boot small { display: block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 243, 196, .7); }
.tier__boot b { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 2.1rem; line-height: 1.1; color: #ffe08a; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(255, 200, 80, .5); }
.tier__boot .coin { width: 24px; height: 24px; }
.tier__rules { display: grid; gap: 3px; width: 100%; margin: 0; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .3); font-size: .78rem; }
.tier__rules div { display: flex; justify-content: space-between; gap: 8px; }
.tier__rules dt { color: rgba(255, 243, 196, .7); }
.tier__rules dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.tier__players { font-size: .72rem; color: #9be3b0; }
.tier .btn.is-disabled { pointer-events: none; font-size: .78rem; }
body.page-tp-tables .lobby__bar { background: linear-gradient(180deg, rgba(40, 24, 86, .95), rgba(14, 7, 36, .95)); border-bottom: 2px solid #ffd76a; }

/* ---------- Teen Patti: the menu, and a move panel as wide as the table ---------- */
.page-teen-patti .tp__panel { width: min(100%, calc(46vh * 1.5)); max-width: none; }
@media (max-width: 899px) { .page-teen-patti .tp__panel { width: min(100%, calc(54vh * 1.5)); } }
html.phone-landscape .page-teen-patti .tp__panel { width: 100%; }

.tp__menulist { min-width: 214px; padding: 6px; gap: 1px; border-radius: 16px; background: linear-gradient(180deg, #3a2478, #170a3c); box-shadow: 0 0 0 1.5px #ffd76a, 0 14px 28px rgba(0, 0, 0, .6); }
.tp__menulist hr { margin: 4px 8px; border: 0; border-top: 1px solid rgba(255, 215, 106, .22); }
.mhead { display: flex; align-items: center; gap: 10px; padding: 6px 8px 8px; margin-bottom: 2px; border-bottom: 1px solid rgba(255, 215, 106, .22); }
.mhead .avatar--me { width: 30px; height: 30px; font-size: .85rem; flex: none; }
.mhead__text { display: grid; gap: 1px; min-width: 0; }
.mhead__text b { font-size: .8rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mhead__text > span { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: #ffe08a; font-variant-numeric: tabular-nums; }
.mhead__text .coin { width: 12px; height: 12px; }
.tp__menulist .mi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; color: #fff3c4; font: inherit; font-size: .8rem; font-weight: 600; line-height: 1.2; text-align: left; text-decoration: none; cursor: pointer; }
.tp__menulist .mi:hover, .tp__menulist .mi:focus-visible { background: rgba(255, 215, 106, .14); outline: 0; }
.tp__menulist .mi__ico { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 215, 106, .16); color: #ffd76a; }
.tp__menulist .mi__ico .ico { width: 14px; height: 14px; }
.tp__menulist .mi--exit { color: #ffb4ba; }
.tp__menulist .mi--exit .mi__ico { background: rgba(255, 90, 100, .18); color: #ff8a93; }
html.phone-landscape .page-teen-patti .tp__menulist { min-width: 190px; }
html.phone-landscape .page-teen-patti .tp__menulist .mi { padding: 4px 8px; font-size: .72rem; }
html.phone-landscape .page-teen-patti .tp__menulist .mi__ico { width: 22px; height: 22px; }
html.phone-landscape .page-teen-patti .tp__menulist .mi__ico .ico { width: 12px; height: 12px; }

/* The game menu in every game, not only Teen Patti */
html.phone-landscape .tp__menulist { min-width: 190px; }
html.phone-landscape .tp__menulist .mi { padding: 4px 8px; font-size: .72rem; }
html.phone-landscape .tp__menulist .mi__ico { width: 22px; height: 22px; }
html.phone-landscape .tp__menulist .mi__ico .ico { width: 12px; height: 12px; }
html.phone-landscape .tp__menulist .mhead { padding: 4px 8px 6px; }

/* The player's session record */
.mecard__stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mecard__stats--3 div { padding: 10px 4px; }
.mecard__stats--3 b { font-size: 1.3rem; }
.mecard__head { margin: 10px 0 0; font-family: var(--display); font-size: 1rem; color: #6b1424; }
.dock .me { cursor: pointer; }
.page-teen-patti .tp__panel .me { cursor: pointer; }

/* ---------- Privacy policy ---------- */
body.page-policy { min-height: 100vh; background: #05030f url('../images/theme/tp-lounge.svg') center / cover no-repeat fixed; color: #1f2937; }
.policy { max-width: 760px; margin: 0 auto; padding: 18px 16px 40px; }
.policy__brand { display: flex; justify-content: center; margin: 4px 0 16px; }
.policy__brand img { height: 44px; width: auto; }
.policy__card { padding: clamp(18px, 4vw, 34px); border-radius: 20px; background: #fffaf0; box-shadow: 0 0 0 2px #ffd76a, 0 18px 40px rgba(0, 0, 0, .5); line-height: 1.6; }
.policy__card h1 { margin: 0; font-family: var(--display); font-size: clamp(1.7rem, 5vw, 2.3rem); color: #5a0a1b; }
.policy__date { margin: 2px 0 14px; font-size: .8rem; color: #6b7280; }
.policy__card h2 { margin: 22px 0 6px; font-family: var(--display); font-size: 1.15rem; color: #5a0a1b; }
.policy__card p, .policy__card li { font-size: .93rem; }
.policy__card ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 5px; }
.policy__back { margin: 18px 0 0; text-align: center; }
.policy__back a { color: #ffe9a8; font-weight: 600; }
.login__legal a, .lobby__note a { color: inherit; text-decoration: underline; }

.mhead__fun { margin-top: 2px; font-size: .62rem; font-weight: 600; letter-spacing: .02em; color: rgba(255, 243, 196, .7); }
.alert--gift { background: linear-gradient(180deg, #fff3c4, #ffe08a); color: #3b2400; border-radius: 12px; padding: .7rem 1rem; margin-bottom: 14px; font-weight: 600; text-align: center; }

/* ---------- Login: the SilverDada welcome ---------- */
body.page-login {
    background:
        radial-gradient(ellipse 90% 55% at 50% -5%, #20b7c9 0%, rgba(15, 127, 142, .55) 38%, transparent 70%),
        radial-gradient(ellipse 120% 80% at 50% 110%, #052a33 0%, transparent 70%),
        linear-gradient(180deg, #0a5562 0%, #08414d 45%, #04262e 100%);
    background-attachment: fixed;
    color: #eaf6f8;
}
.login { position: relative; overflow: hidden; isolation: isolate; gap: 1.2rem; }
.login__beams {
    position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none;
    background: conic-gradient(from 180deg at 50% 0%, transparent 0 38deg, rgba(255, 255, 255, .10) 48deg, transparent 60deg 112deg, rgba(255, 233, 168, .11) 124deg, transparent 138deg 360deg);
    animation: beams 14s ease-in-out infinite alternate;
}
@keyframes beams { to { transform: rotate(5deg) scale(1.06); } }

.login__chip {
    position: absolute; z-index: -1; width: 56px; aspect-ratio: 1; border-radius: 50%; opacity: .9; pointer-events: none;
    background: radial-gradient(circle at 35% 30%, #fff3b0 0 18%, #f6c453 40%, #b9770e 78%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .35), inset 0 0 0 5px rgba(122, 74, 6, .55), inset 0 0 0 8px rgba(255, 233, 160, .55);
    animation: bob 7s ease-in-out infinite;
}
.login__chip--a { left: 7%; top: 14%; width: 46px; }
.login__chip--b { right: 8%; top: 22%; width: 62px; animation-delay: -2s; }
.login__chip--c { left: 12%; bottom: 14%; width: 66px; animation-delay: -4s; }
.login__chip--d { right: 10%; bottom: 18%; width: 40px; animation-delay: -1s; }
@keyframes bob { 50% { transform: translateY(-14px) rotate(12deg); } }

.login__brand { gap: 1rem; }
.login__logo { width: min(260px, 66vw); }
.login__medal { position: relative; width: min(224px, 56vw); aspect-ratio: 1; display: grid; place-items: center; }
.login__medal::before {
    content: ""; position: absolute; inset: -9px; border-radius: 50%;
    background: conic-gradient(#ffe9a8, #d99a1c, #fff3c4, #b9770e, #ffe9a8);
    animation: spin 14s linear infinite;
    -webkit-mask: radial-gradient(circle, transparent 66%, #000 68%); mask: radial-gradient(circle, transparent 66%, #000 68%);
    filter: drop-shadow(0 0 14px rgba(246, 196, 83, .6));
}
@keyframes spin { to { transform: rotate(360deg); } }
.login__medal .login__hero { width: 100%; border: 0; box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 3px rgba(255, 233, 160, .85); }
.login__tag { margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: #ffe9a8; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); text-align: center; }

.login__card {
    position: relative; max-width: 410px; color: #eaf6f8; border-top: 0; border-radius: 26px;
    padding: 1.7rem 1.45rem 1.35rem;
    background: linear-gradient(180deg, rgba(9, 60, 71, .86), rgba(4, 34, 42, .93));
    border: 1.5px solid rgba(246, 196, 83, .65);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 6px rgba(246, 196, 83, .08), inset 0 1px 0 rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.login__card h1 { color: #ffe9a8; font-size: 1.85rem; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.login__sub { color: rgba(234, 246, 248, .78); }
.login__card .field__label { margin-bottom: .4rem; color: rgba(234, 246, 248, .85); font-size: .8rem; letter-spacing: .03em; }
.field__box {
    display: flex; align-items: center; gap: .6rem; padding: 0 .35rem 0 .95rem; border-radius: 15px;
    background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .2);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field__box:focus-within { border-color: #f6c453; background: rgba(255, 255, 255, .13); box-shadow: 0 0 0 4px rgba(246, 196, 83, .22); }
.field__box > svg { width: 19px; height: 19px; flex: none; color: #f6c453; }
.login__card .field__box input {
    flex: 1; min-width: 0; padding: .9rem .2rem; border: 0; border-radius: 0; background: transparent; color: #fff; box-shadow: none;
}
.login__card .field__box input::placeholder { color: rgba(234, 246, 248, .45); }
.login__card .field__box input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 40px #0b4a56 inset; caret-color: #fff; }
.field__eye { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent; color: rgba(234, 246, 248, .65); cursor: pointer; }
.field__eye svg { width: 20px; height: 20px; }
.field__eye:hover, .field__eye.is-on { color: #f6c453; }
.login__card .check { color: rgba(234, 246, 248, .85); }
.login__card .alert { margin-bottom: 1rem; background: rgba(220, 38, 38, .18); border: 1px solid rgba(248, 113, 113, .6); color: #ffd7d7; border-radius: 12px; }

.login__submit { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 52px; font-size: 1.08rem; letter-spacing: .02em; margin-top: .3rem; }
.login__submit svg { width: 20px; height: 20px; transition: transform .2s ease; }
.login__submit:hover svg { transform: translateX(4px); }
.login__submit::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: shine 4.5s ease-in-out infinite; }
@keyframes shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.login__submit.is-busy { pointer-events: none; opacity: .75; }
.login__foot { color: rgba(234, 246, 248, .6); }
.login__legal { color: rgba(234, 246, 248, .65); opacity: 1; }
.login__legal a { color: #ffe9a8; }

@media (orientation: landscape) and (max-height: 520px) {
    .login__medal { width: 150px; }
    .login__tag, .login__chip { display: none; }
    .login__logo { width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
    .login__beams, .login__chip, .login__medal::before, .login__submit::after { animation: none; }
}
.login__card .check input { accent-color: #f6c453; width: 18px; height: 18px; }
@media (min-width: 900px) and (max-height: 920px) {
    .login { gap: .8rem; padding-top: 14px; padding-bottom: 14px; }
    .login__logo { width: 220px; }
    .login__medal { width: 170px; }
    .login__brand { gap: .6rem; }
    .login__card { padding-top: 1.3rem; }
}