/* ==========================================================================
   Skins (ui/shop.js, app/config/cosmetics.json): board, stones, avatar frame,
   plan badges and the shop sheet.

   A skin is a set of custom properties on [data-board-skin] / [data-stone-skin].
   <html> carries the equipped ones, so the real boards pick them up; a shop
   preview carries its own, so it shows the skin without equipping it. The
   classic skins define the same properties but never repaint the real board.
   ========================================================================== */

[data-board-skin="board-classic"] {
    --skin-frame: linear-gradient(180deg, #eedfc4, #e5d3b1);
    --skin-pit: linear-gradient(180deg, #dcc7a5, #d9c39f);
    --skin-kazan: linear-gradient(180deg, #dcc7a5, #d9c39f);
    --skin-ink: #5a4127;
    --skin-edge: rgba(98, 60, 27, 0.34);
}
[data-board-skin="board-sunset"] {
    --skin-frame: linear-gradient(180deg, #f8c27c, #f2ad58);
    --skin-pit: linear-gradient(180deg, #c48a4b, #d19b5d);
    --skin-kazan: linear-gradient(180deg, #e8a24f, #e49b45);
    --skin-ink: #4b2b10;
    --skin-edge: #5f3715;
}
[data-board-skin="board-birch"] {
    --skin-frame: repeating-linear-gradient(92deg, rgba(150, 120, 80, 0.05) 0 3px, transparent 3px 11px), linear-gradient(180deg, #f6eedc, #ebdfc4);
    --skin-pit: linear-gradient(180deg, #f1e6cf, #e6d7b8);
    --skin-kazan: linear-gradient(180deg, #efe3c9, #e3d3b2);
    --skin-ink: #5b4a33;
    --skin-edge: rgba(130, 100, 60, 0.28);
}
[data-board-skin="board-walnut"] {
    --skin-frame: repeating-linear-gradient(3deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 9px), linear-gradient(180deg, #6e472b, #4b2d19);
    --skin-pit: linear-gradient(180deg, #7d5233, #5a3720);
    --skin-kazan: linear-gradient(180deg, #74492c, #53321d);
    --skin-ink: #f3e2c6;
    --skin-edge: rgba(30, 14, 4, 0.55);
}
[data-board-skin="board-night"] {
    --skin-frame: radial-gradient(120% 80% at 50% 0%, rgba(120, 150, 210, 0.18), transparent 60%), linear-gradient(180deg, #1f2734, #121823);
    --skin-pit: linear-gradient(180deg, #2a3548, #1b2434);
    --skin-kazan: linear-gradient(180deg, #263145, #182131);
    --skin-ink: #dde6f3;
    --skin-edge: rgba(150, 175, 220, 0.22);
}
[data-board-skin="board-felt"] {
    --skin-frame: linear-gradient(180deg, #5a3a22, #3f2716);
    --skin-pit: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.06), transparent 40%), repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px), linear-gradient(180deg, #2d6d51, #1f5640);
    --skin-kazan: linear-gradient(180deg, #2a654b, #1d503b);
    --skin-ink: #e8f5ee;
    --skin-edge: rgba(10, 40, 25, 0.5);
}
[data-board-skin="board-gold"] {
    --skin-frame: linear-gradient(110deg, #a87b2c 0%, #e9c870 22%, #b8893a 45%, #f3dc93 62%, #a87b2c 100%);
    --skin-pit: linear-gradient(180deg, #f1d991, #d8b35e);
    --skin-kazan: linear-gradient(180deg, #ecd185, #d3ab55);
    --skin-ink: #3b2a0b;
    --skin-edge: rgba(110, 75, 15, 0.45);
}
[data-board-skin="board-marble"] {
    --skin-frame: repeating-linear-gradient(118deg, rgba(110, 112, 122, 0.10) 0 1px, transparent 1px 23px), repeating-linear-gradient(32deg, rgba(150, 150, 160, 0.08) 0 2px, transparent 2px 37px), linear-gradient(180deg, #f7f6f3, #e6e4df);
    --skin-pit: linear-gradient(180deg, #f3f2ef, #e2e0db);
    --skin-kazan: linear-gradient(180deg, #efeeea, #dddbd6);
    --skin-ink: #3c3934;
    --skin-edge: rgba(90, 90, 100, 0.22);
}

[data-stone-skin="stones-classic"] { --skin-stone: radial-gradient(circle at 34% 28%, #555753 0, #555753 7%, #292b27 42%, #121510 100%); }
[data-stone-skin="stones-ivory"]   { --skin-stone: radial-gradient(circle at 34% 28%, #fffdf6 0, #fff8ea 10%, #e7dbc1 52%, #c4b28d 100%); }
[data-stone-skin="stones-jade"]    { --skin-stone: radial-gradient(circle at 34% 28%, #d6ffe6 0, #a9efc6 10%, #3faa77 52%, #1d6544 100%); }
[data-stone-skin="stones-amber"]   { --skin-stone: radial-gradient(circle at 34% 28%, #fff1c4 0, #ffd98a 10%, #ee9f35 52%, #9e5510 100%); }
[data-stone-skin="stones-star"]    { --skin-stone: radial-gradient(circle at 34% 28%, #c9d0ff 0, #8d98ff 10%, #3a3f9e 50%, #0e1035 100%); }

/* ── The real boards ──────────────────────────────────────────────────────── */

/* The board owners (milestone.css) paint pits and stones with !important under
   :is(#screen-game, .tp-material-board-scope); the same scope after html and
   body is just specific enough to win. The wood-grain overlay stays. */

html:not([data-board-skin="board-classic"])[data-board-skin] body :is(#screen-game, .tp-material-board-scope) .board-container {
    background: var(--skin-frame) !important;
    border-color: var(--skin-edge) !important;
}
html:not([data-board-skin="board-classic"])[data-board-skin] body :is(#screen-game, .tp-material-board-scope) :is(.pit, .kazan-track) {
    background: var(--skin-pit) !important;
    border-color: var(--skin-edge) !important;
}
html:not([data-board-skin="board-classic"])[data-board-skin] body :is(#screen-game, .tp-material-board-scope) .kazan-track { background: var(--skin-kazan) !important; }
html:not([data-board-skin="board-classic"])[data-board-skin] body :is(#screen-game, .tp-material-board-scope) .board-container :is(.pit-number, .pit-count-label, .num-label, .kazan-score) {
    color: var(--skin-ink) !important;
}
html[data-board-skin="board-gold"] body :is(#screen-game, .tp-material-board-scope) .board-container {
    background-size: 220% 100% !important;
    animation: tp-skin-gold 6s ease-in-out infinite alternate;
}
@keyframes tp-skin-gold { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Sunset: a flat table of two rows and no kazans; the count is written beside the
   board. The tracks stay in the layout at no height: captured stones fly to them.
   The doubled shell id outranks the per-board rules for pit numbers. */
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container {
    grid-template-rows: minmax(0, 1fr) 0 0 0 minmax(0, 1fr) !important;
    row-gap: clamp(3px, 0.9%, 6px) !important;
    padding-block: 24px !important;
    border: 1px solid rgba(120, 70, 24, 0.55) !important;
    box-shadow: 0 8px 20px rgba(120, 66, 16, 0.22) !important;
}
/* The game's own board has a row of counts for each row of pits: they go outside. */
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container:has(> .pit-counts-row) {
    grid-template-rows: auto minmax(0, 1fr) 0 0 0 minmax(0, 1fr) auto !important;
    padding-block: 8px !important;
}
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container > #pit-counts-top { grid-row: 1 !important; }
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container > #row-top { grid-row: 2 !important; }
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container > #row-bottom { grid-row: 6 !important; }
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container > #pit-counts-bottom { grid-row: 7 !important; }
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container::before,
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container::after,
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .board-ornament,
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .board-join { display: none !important; }
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .kazan-track {
    visibility: hidden !important;
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .pit {
    overflow: visible !important;
    border: 1.5px solid #5f3715 !important;
    border-radius: 8px !important;
    box-shadow: inset 0 2px 4px rgba(84, 46, 14, 0.25) !important;
}
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .pit::before { display: none !important; }
/* A tuzdyk stands out by a deeper wood; the gold of the classic board melts into this table. */
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .pit.tuzdyk { background: linear-gradient(180deg, #8f5a2b, #a56c37) !important; border-color: #4b2a0f !important; }
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .pit.tuzdyk :is(.tuzdyk-marker, .tuzdyk-ornaments) { color: #ffe9bd !important; }
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .pit.legal-move {
    box-shadow: inset 0 0 0 1.5px rgba(255, 238, 200, 0.8), inset 0 2px 4px rgba(84, 46, 14, 0.2) !important;
}
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .pit:is(:hover, :focus-visible, .selected-pit) { background: linear-gradient(180deg, #dba869, #e6b67a) !important; }
/* As on PlayOK: the pit's number small inside it, how many stones it holds outside. */
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .pit .pit-number {
    inset: 5px 0 auto 0 !important;
    z-index: 2;
    justify-content: center;
    width: auto !important;
    height: 13px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: rgba(75, 43, 16, 0.72) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 13px !important;
    text-align: center;
}
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .pit .pit-value {
    right: 0 !important;
    left: 0 !important;
    justify-content: center;
    width: auto !important;
    min-width: 0 !important;
    height: 16px !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #3f230c !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
}
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .row-top .pit .pit-value { top: auto !important; bottom: calc(100% + 4px) !important; }
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .row-bottom .pit .pit-value { top: calc(100% + 4px) !important; bottom: auto !important; }
html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .pit-count-label { color: #3f230c !important; font-size: 14px !important; font-weight: 800 !important; }
html[data-board-skin="board-sunset"][data-stone-skin="stones-classic"] body #tp-app-shell#tp-app-shell .board-container .stone {
    background: radial-gradient(circle at 34% 28%, #7c5230 0, #6a4326 12%, #3f2412 58%, #27150a 100%) !important;
}
/* A phone: the board keeps PlayOK's short, wide shape instead of filling the height. */
@media (max-width: 767px) {
    html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-layout {
        aspect-ratio: auto !important;
        height: auto !important;
        min-height: 0 !important;
    }
    html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container {
        --sunset-pit: calc((100vw - 42px) / 9 * 2.3);
        height: auto !important;
        padding-block: 20px !important;
        padding-inline: 5px !important;
        grid-template-rows: var(--sunset-pit) 0 0 0 var(--sunset-pit) !important;
    }
    html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container:has(> .pit-counts-row) {
        grid-template-rows: auto var(--sunset-pit) 0 0 0 var(--sunset-pit) auto !important;
        padding-block: 6px !important;
    }
    html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .pit { border-radius: 6px !important; }
    html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .pit .pit-number { top: 3px !important; font-size: 10px !important; }
    html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .pit .pit-value { font-size: 13px !important; }
    html[data-board-skin="board-sunset"] body #tp-app-shell#tp-app-shell .board-container .pit-count-label { font-size: 13px !important; }
}

html:not([data-stone-skin="stones-classic"])[data-stone-skin] body :is(#screen-game, .tp-material-board-scope) .stone { background: var(--skin-stone) !important; }
html[data-stone-skin="stones-amber"] body :is(#screen-game, .tp-material-board-scope) .stone { box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.3), 0 0 3px rgba(240, 160, 60, 0.5) !important; }
html[data-stone-skin="stones-star"] body :is(#screen-game, .tp-material-board-scope) .stone { animation: tp-skin-star 3.2s ease-in-out infinite; }
html[data-stone-skin="stones-star"] body :is(#screen-game, .tp-material-board-scope) .stone:nth-child(3n) { animation-delay: -1.1s; }
html[data-stone-skin="stones-star"] body :is(#screen-game, .tp-material-board-scope) .stone:nth-child(3n + 1) { animation-delay: -2.2s; }
@keyframes tp-skin-star {
    0%, 100% { box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.25), 0 0 0 rgba(140, 150, 255, 0); }
    50%      { box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.35), 0 0 5px rgba(140, 150, 255, 0.85); }
}

/* ── Avatar frames ────────────────────────────────────────────────────────── */

[data-frame="frame-gold"] { box-shadow: 0 0 0 2px #e9c46c, 0 0 10px rgba(233, 196, 108, 0.45) !important; }
[data-frame="frame-ornament"] { box-shadow: 0 0 0 2px #7d1f22, 0 0 0 4px #dcab45, 0 0 0 5px #7d1f22 !important; }
[data-frame="frame-flame"] { animation: tp-frame-flame 1.6s ease-in-out infinite; }
@keyframes tp-frame-flame {
    0%, 100% { box-shadow: 0 0 0 2px #ff8a3c, 0 0 8px 1px rgba(255, 110, 30, 0.55); }
    50%      { box-shadow: 0 0 0 2px #ffc15e, 0 0 14px 3px rgba(255, 150, 50, 0.75); }
}

/* ── Plan badges ──────────────────────────────────────────────────────────── */

.tp-plan-badge {
    display: inline-flex;
    align-items: center;
    height: 17px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1;
    vertical-align: middle;
    text-transform: uppercase;
}
.tp-plan-badge--standard { background: color-mix(in srgb, #2aa58a 22%, transparent); color: #49c7a8; }
.tp-plan-badge--pro { background: linear-gradient(180deg, #f2cf75, #d39a32); color: #2b1a04; }
.tp-plan-badge--ultra { background: linear-gradient(110deg, #8a5cff, #e0b052); color: #fff; }

/* ── The shop sheet ───────────────────────────────────────────────────────── */

.tp-shop {
    position: fixed;
    z-index: 900;
    inset: 0;
    display: grid;
    align-items: end;
    background: rgba(8, 6, 4, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.tp-shop[hidden] { display: none; }

.tp-shop__sheet {
    width: min(560px, 100%);
    max-height: min(88dvh, 760px);
    margin: 0 auto;
    overflow: auto;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px 26px 0 0;
    background: var(--tp-color-surface-raised, #1f1a16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 -20px 50px -20px rgba(0, 0, 0, 0.6);
    animation: tp-shop-up 260ms cubic-bezier(.2, 1, .3, 1) both;
}
@keyframes tp-shop-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 768px) { .tp-shop { align-items: center; } .tp-shop__sheet { border-radius: 26px; } }

.tp-shop__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.tp-shop__title { margin: 0; color: var(--tp-color-text); font-size: 22px; font-weight: 800; letter-spacing: -0.015em; }
.tp-shop__close {
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: color-mix(in srgb, var(--tp-color-text) 8%, transparent);
    color: var(--tp-color-text); font-size: 18px; cursor: pointer;
}
.tp-shop__plan { margin: 0 0 14px; color: var(--tp-color-text-muted); font-size: 13px; line-height: 1.4; }

.tp-shop__tabs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    margin-bottom: 14px; padding: 4px; border-radius: 14px;
    background: color-mix(in srgb, var(--tp-color-text) 6%, transparent);
}
.tp-shop__tab {
    min-height: 38px; border: 0; border-radius: 10px; background: transparent;
    color: var(--tp-color-text-muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.tp-shop__tab[aria-selected="true"] { background: var(--tp-color-surface, #2a241e); color: var(--tp-color-text); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }

.tp-shop__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.tp-shop__card {
    display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--tp-color-text) 5%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tp-color-text) 8%, transparent);
}
.tp-shop__card.is-equipped { box-shadow: inset 0 0 0 2px var(--tp-color-primary); }
.tp-shop__name { color: var(--tp-color-text); font-size: 14px; font-weight: 800; line-height: 1.2; }
.tp-shop__meta { color: var(--tp-color-text-muted); font-size: 11.5px; line-height: 1.3; }
.tp-shop__action {
    min-height: 38px; border: 0; border-radius: 12px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
    background: color-mix(in srgb, var(--tp-color-text) 9%, transparent); color: var(--tp-color-text);
}
.tp-shop__action--buy { background: var(--tp-color-primary); color: var(--tp-color-primary-ink, #fff); }
.tp-shop__action[disabled] { opacity: 0.65; cursor: default; }

/* Previews: a strip of the board, a cluster of stones, an avatar in its frame. */
.tp-skin-preview {
    position: relative; display: grid; place-items: center; height: 84px; border-radius: 12px; overflow: hidden;
    background: color-mix(in srgb, var(--tp-color-text) 4%, transparent);
}
.tp-skin-preview__board {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; width: 92%; padding: 5px;
    border-radius: 9px; background: var(--skin-frame); box-shadow: inset 0 0 0 1px var(--skin-edge);
}
.tp-skin-preview__board[data-board-skin="board-gold"] { background-size: 220% 100%; animation: tp-skin-gold 6s ease-in-out infinite alternate; }
.tp-skin-preview__pit {
    display: grid; grid-template-columns: repeat(2, 7px); justify-content: center; align-content: end; gap: 2px;
    height: 54px; padding-bottom: 5px; border-radius: 6px;
    background: var(--skin-pit); box-shadow: inset 0 0 0 1px var(--skin-edge);
}
.tp-skin-preview__stone { width: 7px; height: 7px; border-radius: 50%; background: var(--skin-stone); box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.2); }
.tp-skin-preview--stones { gap: 4px; grid-template-columns: repeat(4, 16px); align-content: center; }
.tp-skin-preview--stones .tp-skin-preview__stone { width: 16px; height: 16px; }
.tp-skin-preview[data-stone-skin="stones-star"] .tp-skin-preview__stone { animation: tp-skin-star 3.2s ease-in-out infinite; }
.tp-skin-preview__avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #e9d5b5, #b48e5e); color: #3a2614;
    display: grid; place-items: center; font-weight: 900; font-size: 20px;
}

.tp-shop__buy {
    margin-top: 14px; padding: 14px; border-radius: 16px;
    background: color-mix(in srgb, var(--tp-color-primary) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tp-color-primary) 28%, transparent);
}
.tp-shop__buy[hidden] { display: none; }
.tp-shop__buy p { margin: 0 0 10px; color: var(--tp-color-text); font-size: 13.5px; line-height: 1.45; }
.tp-shop__buy a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
    border-radius: 12px; background: var(--tp-color-primary); color: var(--tp-color-primary-ink, #fff);
    font-weight: 800; text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    html[data-board-skin="board-gold"] .board-container,
    .tp-skin-preview__board[data-board-skin="board-gold"],
    html[data-stone-skin="stones-star"] .stone,
    .tp-skin-preview[data-stone-skin="stones-star"] .tp-skin-preview__stone,
    [data-frame="frame-flame"],
    .tp-shop__sheet { animation: none; }
}