/* Public companion showcase — warm light theme, independent of the dark admin
   dashboard in style.css. Palette and type scale come from the approved design. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --ink: #241E1A;
    --paper: #F4EDE4;
    --card: #fff;
    --sand: #FBF7F2;
    --line: #EADFD2;
    --line-strong: #E0D4C6;
    --rust: #D65F3E;
    --rust-deep: #B04A2E;
    --violet: #6D4CE0;
    --green: #2E9E6B;
    --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --display: 'Bricolage Grotesque', var(--sans);
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --cn: 'Noto Sans SC', var(--sans);
}

body.pub {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

body.pub a { color: inherit; text-decoration: none; }

.pub-wrap { max-width: 1240px; margin: 0 auto; padding: 0 26px; width: 100%; }

/* ── Nav ─────────────────────────────────────────────── */
.pub-nav { background: var(--card); border-bottom: 1px solid var(--line); }
.pub-nav-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pub-nav-left { display: flex; align-items: center; gap: 26px; }
.pub-logo { font: 700 19px var(--display); letter-spacing: -.02em; }
.pub-logo span { color: var(--rust); }
.pub-logo-sm { font-size: 15px; }
.pub-nav-links { display: flex; gap: 20px; font: 500 13.5px var(--sans); }
.pub-nav-links a { color: rgba(36,30,26,.6); padding-bottom: 3px; white-space: nowrap; }
.pub-nav-links a:hover { color: var(--ink); }
.pub-nav-links a.is-active { color: var(--ink); border-bottom: 2px solid var(--rust); }
.pub-nav-extra { display: none; }
.pub-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
}
.pub-nav-toggle svg { width: 22px; height: 22px; }

/* ── Hero ────────────────────────────────────────────── */
.pub-hero { background: var(--card); border-bottom: 1px solid var(--line); padding: 30px 0 22px; }
.pub-hero h1 {
    font: 800 40px/1.05 var(--display);
    letter-spacing: -.03em;
    max-width: 600px;
}
.pub-hero-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.pub-hero-row p { font: 15px/1.55 var(--sans); color: rgba(36,30,26,.65); max-width: 440px; }
.pub-hero-stats { display: flex; gap: 28px; padding-bottom: 4px; }
.pub-stat-n { font: 700 26px var(--display); }
.pub-stat-on { color: var(--green); }
.pub-stat-l { font: 500 10px var(--mono); letter-spacing: .1em; color: rgba(36,30,26,.5); }

/* ── Layout ──────────────────────────────────────────── */
.pub-body {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 0;
    align-items: start;
    flex: 1;
    padding: 0 26px;
}

/* ── Facet sidebar ───────────────────────────────────── */
.pub-facets {
    padding: 24px 22px 40px 0;
    border-right: 1px solid var(--line);
    position: sticky;
    top: 0;
}
.pub-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    padding: 9px 11px;
    margin-bottom: 22px;
}
.pub-search-icon { font: 600 12px var(--mono); color: rgba(36,30,26,.35); }
.pub-search input {
    border: none;
    outline: none;
    background: none;
    width: 100%;
    font: 14px var(--sans);
    color: var(--ink);
}
.pub-facet-label {
    font: 500 10px var(--mono);
    letter-spacing: .12em;
    color: rgba(36,30,26,.45);
}
.pub-facet-list { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.pub-facet-row {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 7px;
    padding: 6px 8px;
    border: 1px solid transparent;
}
.pub-facet-row:hover { background: rgba(36,30,26,.04); }
body.pub a.pub-facet-row.is-on { background: var(--ink); color: #fff; }
.pub-facet-row.is-on .pub-facet-cn,
.pub-facet-row.is-on .pub-facet-n { color: rgba(255,255,255,.6); }
.pub-facet-row.is-on .pub-code { background: rgba(255,255,255,.16); color: #fff; }
.pub-type-row .pub-facet-cn-lg { font-weight: 600; }
.pub-facet-text { flex: 1; min-width: 0; }
.pub-facet-en {
    display: block;
    font: 500 13px/1.25 var(--sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pub-facet-cn { display: block; font: 11px/1.2 var(--cn); color: rgba(36,30,26,.45); }
.pub-facet-cn-lg { display: block; font: 500 13px/1.25 var(--cn); }
.pub-facet-n { font: 500 11px var(--mono); color: rgba(36,30,26,.4); }
.pub-facet-note {
    background: var(--paper);
    border-radius: 9px;
    padding: 10px 11px;
    font: 11.5px/1.5 var(--sans);
    color: rgba(36,30,26,.55);
    margin-top: 10px;
}

/* Collapsible facet groups */
.pub-facet-group {
    border-bottom: 1px solid var(--line);
    padding: 4px 0 14px;
}
.pub-facet-group:first-of-type { border-top: 1px solid var(--line); margin-top: 4px; }
.pub-facet-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 2px 6px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.pub-facet-summary::-webkit-details-marker { display: none; }
.pub-facet-summary .pub-facet-label { flex: 1; }
.pub-facet-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--rust);
    color: #fff;
    font: 700 10px var(--mono);
}
.pub-facet-chev {
    width: 15px;
    height: 15px;
    color: rgba(36,30,26,.4);
    transition: transform .18s ease;
}
.pub-facet-group[open] > .pub-facet-summary .pub-facet-chev { transform: rotate(180deg); }
.pub-facet-summary:hover .pub-facet-chev { color: var(--ink); }

/* Cap the game list so a long roster scrolls instead of pushing the page down */
.pub-facet-scroll {
    max-height: 268px;
    overflow-y: auto;
    padding-right: 4px;
    margin-right: -4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(36,30,26,.2) transparent;
}
.pub-facet-scroll::-webkit-scrollbar { width: 6px; }
.pub-facet-scroll::-webkit-scrollbar-thumb {
    background: rgba(36,30,26,.18);
    border-radius: 6px;
}
.pub-facet-scroll::-webkit-scrollbar-track { background: transparent; }
.pub-code {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 6px;
    background: #EFE7DC;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 9px var(--mono);
    color: rgba(36,30,26,.55);
}
.pub-code-sm { width: 22px; height: 22px; border-radius: 6px; font-size: 8px; }
.pub-code-lg { width: 34px; height: 34px; border-radius: 9px; font-size: 10px; }
/* Uploaded game logo variant — same footprint as the letter badge */
.pub-code-img { object-fit: cover; background: #fff; padding: 0; }

.pub-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    padding: 9px 11px;
    font: 500 13px var(--sans);
    margin-top: 4px;
}
.pub-track {
    width: 34px;
    height: 19px;
    border-radius: 20px;
    background: #DDD2C4;
    position: relative;
    display: block;
    transition: background .16s;
}
.pub-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    transition: left .16s;
}
.pub-toggle.is-on .pub-track { background: var(--green); }
.pub-toggle.is-on .pub-knob { left: 17px; }
body.pub a.pub-reset {
    display: inline-block;
    margin-top: 16px;
    padding: 7px 12px;
    border-radius: 8px;
    background: rgba(176,74,46,.08);
    font: 600 12.5px var(--sans);
    color: var(--rust-deep);
}
body.pub a.pub-reset:hover { background: rgba(176,74,46,.15); }

/* ── Results ─────────────────────────────────────────── */
.pub-results { padding: 22px 0 34px 26px; min-height: 640px; }
.pub-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.pub-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 30px; }
.pub-count { font: 500 13px var(--sans); color: rgba(36,30,26,.6); }
body.pub a.pub-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--ink);
    color: #fff;
    border-radius: 20px;
    padding: 5px 8px 5px 11px;
    font: 500 12.5px var(--sans);
}
.pub-chip span { opacity: .6; font: 11px var(--mono); }
.pub-sort { display: flex; align-items: center; gap: 8px; }
.pub-sort-label { font: 500 10px var(--mono); letter-spacing: .1em; color: rgba(36,30,26,.45); }
.pub-sort select {
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: 7px 10px;
    font: 500 13px var(--sans);
    color: var(--ink);
    cursor: pointer;
}
.pub-sort-go {
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 10px;
    font: 500 12px var(--sans);
    cursor: pointer;
}

.pub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.pub-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 13px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.pub-card:hover {
    border-color: var(--ink);
    box-shadow: 0 6px 20px rgba(36,30,26,.09);
    transform: translateY(-1px);
}
.pub-card-top { display: flex; gap: 12px; padding: 14px 14px 12px; }
.pub-avatar-wrap { position: relative; flex: none; }
.pub-avatar {
    width: 62px;
    height: 62px;
    border-radius: 12px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EFE7DC;
    font: 700 20px var(--display);
    color: rgba(36,30,26,.5);
}
.pub-avatar-ph { text-transform: uppercase; }
.pub-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2.5px solid #fff;
}
.pub-card-id { min-width: 0; flex: 1; }
.pub-name-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.pub-name { font: 700 17px/1.15 var(--display); letter-spacing: -.01em; }
/* "New" pill — companions whose profile is under 7 days old. */
.pub-new-pill {
    align-self: center;
    font: 700 10px var(--sans);
    letter-spacing: .02em;
    color: #1F7A51;
    background: rgba(46,158,107,.14);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}
.pub-profile-namerow .pub-new-pill { font-size: 11px; padding: 3px 10px; }
.pub-meta { display: flex; align-items: center; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.pub-star { font: 500 12.5px var(--sans); color: var(--rust-deep); }
.pub-meta-dim { font: 12.5px var(--sans); color: rgba(36,30,26,.45); }
/* Inviting CTA for brand-new companions in place of an empty order count. */
.pub-meta-cta { color: var(--rust-deep); font-weight: 600; }
.pub-avail { font: 500 11px var(--mono); margin-top: 4px; }

.pub-bio {
    margin: 0 14px 12px;
    font: 13.5px/1.5 var(--sans);
    color: rgba(36,30,26,.7);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pub-gamerow { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }

/* Game pill: code chip · name · type badge, as one rounded unit. */
.pub-gtag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 4px 3px 4px;
    transition: border-color .15s, box-shadow .15s;
}
.pub-card:hover .pub-gtag { border-color: var(--line-strong); }
.pub-gtag .pub-code {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    font-size: 8px;
    background: #EFE7DC;
}
.pub-gtag-name {
    font: 600 12.5px var(--sans);
    color: var(--ink);
    line-height: 1;
}
body.pub-zh .pub-gtag-name { font-family: var(--cn); }
.pub-gtag-more {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 11px;
    font: 600 12px var(--sans);
    color: rgba(36,30,26,.55);
    background: var(--sand);
    border: 1px solid var(--line);
}

/* Type badge — a small pill tinted by service type, sitting at the pill's end. */
.pub-type {
    font: 600 10.5px var(--cn);
    border-radius: 999px;
    padding: 3px 8px;
    line-height: 1;
    letter-spacing: .02em;
}
.pub-type-inline { padding: 3px 9px; font-size: 12px; }
/* Next to a name the row aligns on the text baseline; centre the pill like the "New" pill. */
.pub-name-row .pub-type,
.pub-profile-namerow .pub-type { align-self: center; white-space: nowrap; }

.pub-card-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-top: 1px solid #F1E8DC;
    background: #FDFBF8;
}
.pub-foot-meta { font: 500 12.5px var(--sans); color: rgba(36,30,26,.55); }
.pub-book {
    background: var(--violet);
    color: #fff;
    border-radius: 8px;
    padding: 7px 13px;
    font: 600 13px var(--sans);
}

/* ── Empty state ─────────────────────────────────────── */
.pub-empty {
    border: 1px dashed #DCCFBE;
    border-radius: 13px;
    padding: 52px 30px;
    text-align: center;
    background: var(--card);
}
.pub-empty-art {
    width: 74px;
    height: 74px;
    border-radius: 16px;
    margin: 0 auto 18px;
    background: #EFE7DC;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(36,30,26,.45);
}
.pub-empty-art svg { width: 34px; height: 34px; }
.pub-empty-title { font: 700 21px var(--display); margin-bottom: 6px; }
.pub-empty p {
    margin: 0 auto 20px;
    max-width: 340px;
    font: 14px/1.55 var(--sans);
    color: rgba(36,30,26,.6);
}
body.pub a.pub-btn-dark {
    display: inline-block;
    background: var(--ink);
    color: #fff;
    border-radius: 9px;
    padding: 10px 16px;
    font: 600 13.5px var(--sans);
}

/* ── CTA ─────────────────────────────────────────────── */
body.pub a.pub-cta {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--ink);
    border-radius: 13px;
    padding: 20px 24px;
    color: #fff;
}
.pub-cta > div { flex: 1; }
.pub-cta-title { font: 700 19px var(--display); letter-spacing: -.01em; }
.pub-cta-sub { font: 13.5px/1.5 var(--sans); color: rgba(255,255,255,.6); margin-top: 4px; }
body.pub .pub-cta-btn {
    background: #fff;
    color: var(--ink);
    border-radius: 9px;
    padding: 10px 16px;
    font: 600 13.5px var(--sans);
    white-space: nowrap;
}

/* ── Profile ─────────────────────────────────────────── */
.pub-detail { padding-top: 22px; padding-bottom: 40px; flex: 1; }
.pub-back { font: 500 13px var(--sans); color: rgba(36,30,26,.6); }
.pub-back:hover { color: var(--ink); }

/* Two-column: main content + sticky booking sidebar */
.pub-profile-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 26px;
    margin-top: 16px;
    align-items: start;
}
.pub-profile-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Hero card — banner, overlapping avatar, identity, stats */
.pub-profile-hero {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}
.pub-profile-banner {
    height: 110px;
    background: repeating-linear-gradient(45deg, #EFE7DC, #EFE7DC 10px, #E8DECE 10px, #E8DECE 20px);
}
.pub-profile-hero-body { padding: 0 24px 22px; }
.pub-profile-avatar-wrap { position: relative; width: 104px; margin-top: -52px; margin-bottom: 14px; }
.pub-profile-avatar {
    width: 104px; height: 104px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--card);
    background: #EFE7DC;
    display: flex; align-items: center; justify-content: center;
    font: 700 34px var(--display); color: rgba(36,30,26,.5);
}
.pub-profile-namerow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pub-profile-namerow h1 { font: 800 30px/1.1 var(--display); letter-spacing: -.025em; }
body.pub-zh .pub-profile-namerow h1 { font-family: var(--cn); letter-spacing: 0; }
.pub-profile-avail {
    font: 600 11px var(--sans);
    background: rgba(46,158,107,.12);
    border-radius: 999px; padding: 3px 10px;
    align-self: center;
}
.pub-lead { font: 15px/1.6 var(--sans); color: rgba(36,30,26,.82); margin-top: 12px; white-space: pre-wrap; }
.pub-profile-stats { display: flex; gap: 30px; margin-top: 18px; }
.pub-profile-stats > div { display: flex; flex-direction: column; }
.pub-profile-stats b { font: 700 22px var(--display); }
.pub-profile-stats span { font: 11px var(--sans); color: rgba(36,30,26,.5); margin-top: 2px; }

/* Content sections below the hero */
.pub-profile-section {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px 24px;
}
.pub-profile-section .pub-sec-label:first-child { margin-top: 0; }

.pub-sec-label {
    font: 500 10px var(--mono);
    letter-spacing: .13em;
    color: rgba(36,30,26,.45);
    margin: 26px 0 11px;
}
.pub-sec-label-tight { margin: 0 0 10px; }

/* Compact 2-column service grid — scales to many games without endless scroll */
.pub-svc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.pub-svc {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 11px;
    min-width: 0;
}
.pub-svc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pub-svc-name {
    font: 600 13.5px var(--sans);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.pub-zh .pub-svc-name { font-family: var(--cn); }
.pub-svc-sub {
    font: 11px var(--sans);
    color: rgba(36,30,26,.45);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pub-svc-sub:empty { display: none; }
.pub-svc .pub-type { flex: none; }
/* Shared 'booked by the hour' line, shown once under the grid instead of per row */
.pub-svc-note { font: 12px var(--sans); color: rgba(36,30,26,.5); margin-top: 10px; }

@media (max-width: 560px) {
    .pub-svc-grid { grid-template-columns: 1fr; }
}

.pub-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pub-gallery a { display: block; cursor: zoom-in; }
.pub-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line);
}

/* Gift wall: every catalog gift as a tile, received first, greyed until received */
.pub-gift-stats {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.pub-gift-stat {
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pub-gift-stat b { font: 800 26px/1.1 var(--display); }
.pub-gift-stat small { font: 600 15px var(--display); color: rgba(36,30,26,.4); }
.pub-gift-stat > span { font: 12px var(--sans); color: rgba(36,30,26,.55); margin-top: 2px; }
.pub-gift-progress .pub-bar-track { margin-top: 8px; height: 8px; }
.pub-gift-progress .pub-bar-fill { height: 8px; background: linear-gradient(90deg, var(--rust), #F0A04B); }

.pub-gift-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
button.pub-gift-tab {
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: rgba(36,30,26,.7);
    border-radius: 999px;
    padding: 6px 14px;
    font: 600 13px var(--sans);
    cursor: pointer;
}
body.pub-zh button.pub-gift-tab { font-family: var(--cn); }
.pub-gift-tab span { font: 500 11px var(--mono); opacity: .6; margin-left: 3px; }
button.pub-gift-tab:hover { border-color: var(--rust); color: var(--rust-deep); }
button.pub-gift-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.pub-gift-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
button.pub-gift-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: linear-gradient(180deg, #FFF4EC, var(--sand));
    border: 1px solid #F1D3C2;
    border-radius: 14px;
    padding: 14px 6px 11px;
    min-width: 0;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    transition: transform .12s, box-shadow .15s, border-color .15s;
}
button.pub-gift-tile[hidden] { display: none; }
button.pub-gift-tile:hover { transform: translateY(-2px); border-color: var(--rust); box-shadow: 0 6px 16px rgba(214,95,62,.14); }
button.pub-gift-tile:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.pub-gift-tile img { width: 52px; height: 52px; object-fit: contain; }
.pub-gift-emoji { font-size: 36px; line-height: 52px; height: 52px; }
.pub-gift-name {
    font: 600 12.5px var(--sans);
    max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.pub-zh .pub-gift-name { font-family: var(--cn); }
.pub-gift-count {
    position: absolute;
    top: 6px;
    right: 6px;
    font: 700 11px var(--mono);
    color: #fff;
    background: var(--rust);
    border-radius: 999px;
    padding: 1px 7px;
}
.pub-gift-lock { position: absolute; top: 8px; right: 8px; width: 13px; height: 13px; color: rgba(36,30,26,.3); }
button.pub-gift-tile.is-locked { background: var(--card); border: 1px dashed var(--line-strong); }
.pub-gift-tile.is-locked img,
.pub-gift-tile.is-locked .pub-gift-emoji { filter: grayscale(1); opacity: .3; }
.pub-gift-tile.is-locked .pub-gift-name { color: rgba(36,30,26,.4); }

body.pub button.pub-gift-more {
    display: block;
    margin: 10px auto 0;
    background: none;
    border: none;
    color: var(--rust-deep);
    font: 600 13px var(--sans);
    cursor: pointer;
    padding: 6px 10px;
}
body.pub button.pub-gift-more[hidden] { display: none; }
button.pub-gift-more:hover { color: var(--rust); text-decoration: underline; }

.pub-gift-fans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pub-gift-fan {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    min-width: 0;
}
.pub-gift-fan .pub-review-av { flex: none; }
.pub-gift-rank {
    flex: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font: 700 11px var(--mono);
    background: #EFE7DC;
    color: rgba(36,30,26,.55);
}
.pub-gift-fan-1 .pub-gift-rank { background: #F5C451; color: #6B4A00; }
.pub-gift-fan-2 .pub-gift-rank { background: #D5D9DE; color: #424A52; }
.pub-gift-fan-3 .pub-gift-rank { background: #E3A87A; color: #5E3214; }
.pub-gift-fan-1 { border-color: #F2DB9E; background: #FFFAEC; }
.pub-gift-fan-text { min-width: 0; display: flex; flex-direction: column; }
.pub-gift-fan-text b { font: 600 13.5px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-gift-fan-text span { font: 11.5px var(--mono); color: rgba(36,30,26,.5); }

.pub-gift-feed { display: flex; flex-direction: column; gap: 8px; }
.pub-gift-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 13px;
    font: 13.5px/1.5 var(--sans);
}
.pub-gift-row[hidden] { display: none; }
.pub-gift-row .pub-review-av { flex: none; }
.pub-gift-row-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pub-gift-row-icon { flex: none; width: 40px; height: 40px; object-fit: contain; font-size: 28px; line-height: 40px; text-align: center; }
.pub-gift-reply {
    margin-top: 7px;
    background: var(--sand);
    border-radius: 4px 10px 10px 10px;
    padding: 7px 10px;
    font-size: 13px;
    color: rgba(36,30,26,.75);
}
.pub-gift-reply span { display: block; font: 600 11px var(--sans); color: var(--rust-deep); margin-bottom: 1px; }
.pub-gift-empty { font: 13.5px var(--sans); color: rgba(36,30,26,.55); margin-top: 14px; text-align: center; }

.pub-gift-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font: 12.5px var(--sans);
    color: rgba(36,30,26,.55);
}
body.pub a.pub-gift-send {
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 6px 14px;
    font: 600 13px var(--sans);
    color: var(--ink);
}
body.pub a.pub-gift-send:hover { border-color: var(--rust); color: var(--rust-deep); }

.pub-gift-dialog {
    margin: auto;
    border: none;
    border-radius: 18px;
    padding: 0;
    width: min(340px, calc(100% - 32px));
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(36,30,26,.25);
}
.pub-gift-dialog::backdrop { background: rgba(36,30,26,.45); }
.pub-gift-dialog-body { position: relative; padding: 28px 22px 20px; text-align: center; }
button.pub-gift-dialog-x {
    position: absolute; top: 10px; right: 12px;
    width: 32px; height: 32px;
    border: none; border-radius: 50%;
    background: var(--sand);
    color: rgba(36,30,26,.6);
    font-size: 20px; line-height: 1;
    cursor: pointer;
}
.pub-gift-dialog-art {
    width: 96px; height: 96px;
    margin: 0 auto 10px;
    border-radius: 24px;
    background: linear-gradient(180deg, #FFF4EC, var(--sand));
    display: flex; align-items: center; justify-content: center;
    font-size: 54px;
}
.pub-gift-dialog-art img { width: 76px; height: 76px; object-fit: contain; }
.pub-gift-dialog.is-locked .pub-gift-dialog-art { background: var(--sand); filter: grayscale(1); opacity: .45; }
.pub-gift-dialog h3 { font: 700 20px var(--display); }
body.pub-zh .pub-gift-dialog h3 { font-family: var(--cn); }
.pub-gift-dialog-status { font: 700 14px var(--sans); color: var(--rust-deep); margin-top: 4px; }
.pub-gift-dialog.is-locked .pub-gift-dialog-status { color: rgba(36,30,26,.5); }
.pub-gift-dialog-sub { font: 13px/1.5 var(--sans); color: rgba(36,30,26,.6); margin: 4px 0 16px; }

@media (max-width: 560px) {
    .pub-gift-stats { grid-template-columns: 1fr 1fr; }
    .pub-gift-wall { grid-template-columns: repeat(3, 1fr); }
    .pub-gift-fans { grid-template-columns: 1fr; }
    .pub-gift-foot { flex-direction: column; align-items: stretch; text-align: center; }
    body.pub a.pub-gift-send { text-align: center; }
    .pub-gift-dialog { margin: auto auto 0; width: 100%; max-width: 100%; border-radius: 18px 18px 0 0; }
    .pub-gift-dialog-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

.pub-rating-box {
    display: flex;
    align-items: center;
    gap: 22px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.pub-rating-big { text-align: center; padding-right: 20px; border-right: 1px solid #F1E8DC; }
.pub-rating-n { font: 800 34px/1 var(--display); }
.pub-rating-stars { font: 12px var(--sans); color: var(--rust-deep); margin-top: 3px; }
.pub-bars { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 5px; }
.pub-bar-row { display: flex; align-items: center; gap: 9px; }
.pub-bar-star { font: 500 11px var(--mono); color: rgba(36,30,26,.5); width: 20px; }
.pub-bar-track {
    flex: 1;
    height: 6px;
    border-radius: 6px;
    background: #F1E8DC;
    overflow: hidden;
    display: block;
}
.pub-bar-fill { display: block; height: 6px; border-radius: 6px; background: var(--rust); }
.pub-bar-n { font: 500 11px var(--mono); color: rgba(36,30,26,.45); width: 20px; text-align: right; }

.pub-reviews { display: flex; flex-direction: column; gap: 10px; }
.pub-review {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 15px 17px;
}
.pub-review-head { display: flex; align-items: center; gap: 10px; }
.pub-review-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #EFE7DC;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 12px var(--display);
    color: rgba(36,30,26,.5);
}
.pub-review-who { flex: 1; min-width: 0; }
.pub-review-author { font: 600 14px var(--sans); }
.pub-review-meta { font: 11.5px var(--mono); color: rgba(36,30,26,.45); margin-top: 1px; }
.pub-review p { margin-top: 10px; font: 14px/1.6 var(--sans); color: rgba(36,30,26,.78); }

.pub-profile-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
.pub-side-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 17px;
}
.pub-side-note { font: 13.5px/1.55 var(--sans); color: rgba(36,30,26,.65); margin-bottom: 12px; }
body.pub a.pub-btn-primary,
button.pub-btn-primary {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--violet);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 14px;
    font: 600 14px var(--sans);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .15s, transform .12s;
}
.pub-btn-primary:hover,
button.pub-btn-primary:hover { background: #5a3ecf; }
.pub-btn-primary:active,
button.pub-btn-primary:active { transform: translateY(1px); }
.pub-side-games { display: flex; flex-direction: column; gap: 6px; }
.pub-side-game {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 500 13px var(--sans);
    padding: 5px 6px;
    border-radius: 7px;
}
.pub-side-game:hover { background: var(--sand); }
.pub-side-links { display: flex; flex-direction: column; gap: 8px; font: 13px var(--sans); }
body.pub .pub-side-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rust-deep);
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 8px 11px;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
    transition: border-color .15s, background .15s;
}
body.pub .pub-side-links a:hover { border-color: var(--rust-deep); background: var(--card); }
.pub-side-links a svg { flex: none; width: 15px; height: 15px; opacity: .7; }
.pub-side-links a .pub-link-text { min-width: 0; overflow-wrap: anywhere; }
.pub-side-links > span {
    color: rgba(36,30,26,.6);
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ── Static pages ────────────────────────────────────── */
.pub-page { flex: 1; padding-top: 34px; padding-bottom: 48px; }
.pub-page h1 { font: 800 36px/1.08 var(--display); letter-spacing: -.03em; max-width: 620px; }
.pub-page-lead {
    font: 16px/1.6 var(--sans);
    color: rgba(36,30,26,.65);
    max-width: 560px;
    margin-top: 10px;
}
.pub-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-top: 32px;
}
.pub-step {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px 20px 20px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(18px);
    transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .5s ease,
                box-shadow .25s ease, border-color .25s ease;
}
.pub-step.in { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 90ms); }
.pub-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(36,30,26,.13);
    border-color: var(--line-strong);
}
/* Big translucent step number in the corner. */
.pub-step-num {
    position: absolute;
    top: -10px;
    right: 4px;
    font: 800 68px/1 var(--display);
    letter-spacing: -.04em;
    color: rgba(214,95,62,.09);
    pointer-events: none;
    transition: transform .25s ease;
}
.pub-step:nth-child(even) .pub-step-num { color: rgba(109,76,224,.10); }
.pub-step:hover .pub-step-num { transform: scale(1.12) translateY(2px); }
/* Accent icon tile. */
.pub-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(214,95,62,.1);
    color: var(--rust);
    margin-bottom: 15px;
    transition: transform .25s cubic-bezier(.2,.7,.3,1), background .25s ease;
}
.pub-step:nth-child(even) .pub-step-icon { background: rgba(109,76,224,.1); color: var(--violet); }
.pub-step:hover .pub-step-icon { transform: scale(1.1) rotate(-4deg); }
.pub-step-icon svg { width: 23px; height: 23px; display: block; }
.pub-step-n {
    font: 700 11px var(--mono);
    letter-spacing: .1em;
    color: var(--rust-deep);
    margin-bottom: 6px;
}
.pub-step:nth-child(even) .pub-step-n { color: var(--violet); }
.pub-step h3 { font: 700 17px var(--display); margin-bottom: 5px; }
.pub-step p { font: 13.5px/1.55 var(--sans); color: rgba(36,30,26,.65); }
@media (prefers-reduced-motion: reduce) {
    .pub-step { opacity: 1; transform: none; transition: box-shadow .25s ease, border-color .25s ease; }
    .pub-step:hover { transform: none; }
}

/* "See how ↓" link on a step card — only shown when that step has demo media. */
body.pub a.pub-step-demo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    font: 600 12.5px var(--sans);
    color: var(--rust-deep);
    border-bottom: 1px solid rgba(214,95,62,.3);
    padding-bottom: 1px;
    transition: color .2s ease, border-color .2s ease;
}
body.pub .pub-step:nth-child(even) a.pub-step-demo { color: var(--violet); border-color: rgba(109,76,224,.3); }
body.pub a.pub-step-demo:hover { color: var(--ink); border-color: var(--ink); }

/* ── Step-by-step walkthrough (guide media) ──────────── */
.pub-guide { margin-top: 64px; scroll-margin-top: 80px; }
.pub-guide-head { max-width: 560px; margin-bottom: 26px; }
.pub-guide-kicker {
    display: inline-block;
    font: 700 11px var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rust-deep);
    background: rgba(214,95,62,.1);
    border-radius: 999px;
    padding: 4px 10px;
    margin-bottom: 12px;
}
.pub-guide-head h2 { font: 800 28px/1.12 var(--display); letter-spacing: -.02em; }
.pub-guide-head p { font: 15px/1.6 var(--sans); color: rgba(36,30,26,.65); margin-top: 8px; }

.pub-guide-step {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 32px;
    align-items: start;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 28px;
    margin-top: 18px;
    scroll-margin-top: 80px;
}
.pub-guide-step:target { border-color: var(--rust); box-shadow: 0 0 0 3px rgba(214,95,62,.15); }
.pub-guide-step:nth-of-type(even):target { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(109,76,224,.15); }
/* Alternate sides so a long page doesn't read as one flat column. */
.pub-guide-step:nth-of-type(even) { grid-template-columns: 1fr minmax(220px, 300px); }
.pub-guide-step:nth-of-type(even) .pub-guide-text { order: 2; }
.pub-guide-text { position: relative; padding-top: 6px; }
@media (min-width: 821px) {
    .pub-guide-text { position: sticky; top: 90px; }
}
.pub-guide-num {
    display: block;
    font: 800 64px/1 var(--display);
    letter-spacing: -.04em;
    color: rgba(214,95,62,.14);
    margin-bottom: 8px;
}
.pub-guide-step:nth-of-type(even) .pub-guide-num { color: rgba(109,76,224,.15); }
.pub-guide-step:nth-of-type(even) .pub-step-n { color: var(--violet); }
.pub-guide-text h3 { font: 700 21px/1.2 var(--display); margin-bottom: 8px; }
.pub-guide-text p { font: 14.5px/1.6 var(--sans); color: rgba(36,30,26,.65); }

.pub-guide-media { display: grid; gap: 16px; min-width: 0; }
.pub-guide-media.is-multi { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pub-guide-figure { margin: 0; min-width: 0; }
.pub-guide-figure img,
.pub-guide-figure video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: contain;
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(36,30,26,.08);
}
.pub-guide-figure video { background: var(--ink); }
.pub-guide-zoom { display: block; cursor: zoom-in; }
.pub-guide-zoom img { transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; }
.pub-guide-zoom:hover img { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(36,30,26,.14); }
.pub-guide-figure figcaption {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font: 13px/1.5 var(--sans);
    color: rgba(36,30,26,.62);
    margin-top: 10px;
    padding: 0 2px;
}
.pub-guide-idx {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--sand);
    border: 1px solid var(--line);
    font: 700 11px var(--mono);
    color: var(--ink);
}
body.pub-zh .pub-guide-head h2,
body.pub-zh .pub-guide-text h3 { font-family: var(--cn); letter-spacing: 0; }

@media (max-width: 820px) {
    .pub-guide { margin-top: 48px; }
    .pub-guide-step,
    .pub-guide-step:nth-of-type(even) { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
    .pub-guide-step:nth-of-type(even) .pub-guide-text { order: 0; }
    .pub-guide-num { font-size: 48px; margin-bottom: 4px; }
    .pub-guide-head h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .pub-guide-zoom img { transition: none; }
    .pub-guide-zoom:hover img { transform: none; }
}

/* Generic scroll-reveal: fade + rise as an element enters the viewport. The JS
   in public_base adds .in via IntersectionObserver. Kept separate from any
   element's own hover transform — .in clears the transform to none, so hover
   effects (e.g. .pub-card) take over cleanly afterwards. Stagger with --i. */
.pub-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
    transition-delay: calc(var(--i, 0) * 60ms);
    will-change: opacity, transform;
}
.pub-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .pub-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Footer ──────────────────────────────────────────── */
.pub-footer {
    border-top: 1px solid var(--line);
    background: var(--card);
    padding: 20px 0;
    margin-top: auto;
}
.pub-footer .pub-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    /* keeps the links clear of the floating back-to-top button */
    padding-right: 84px;
}
.pub-foot-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
    font: 12.5px var(--sans);
    color: rgba(36,30,26,.5);
}
/* each item wraps whole, and the dot stays at the end of the line it follows */
.pub-foot-note > * { white-space: nowrap; }
.pub-foot-note > :not(:last-child)::after {
    content: "\00b7";
    margin: 0 7px;
    color: rgba(36,30,26,.5);
    font-weight: 400;
}
/* phones: one row, the logo and the Discord/Instagram links */
@media (max-width: 560px) {
    .pub-footer .pub-wrap { flex-wrap: nowrap; padding-left: 18px; padding-right: 64px; }
    .pub-footer .pub-logo { flex-shrink: 0; }
    .pub-foot-note { flex-wrap: nowrap; }
    .pub-foot-wide { display: none; }
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1080px) {
    .pub-grid { grid-template-columns: repeat(2, 1fr); }
    .pub-profile-layout { grid-template-columns: 1fr; }
    .pub-profile-side { position: static; }
}

@media (max-width: 820px) {
    .pub-body { grid-template-columns: 1fr; }
    .pub-facets {
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding: 20px 0;
    }
    .pub-results { padding-left: 0; }
    .pub-hero h1 { font-size: 30px; }
    .pub-nav-inner { padding: 12px 18px; }
    .pub-nav-links { padding-left: 18px; padding-right: 18px; }
}

/* The bar folds into a menu button only when its links don't fit. A script
   in public_base.html measures that and sets .is-compact, so the point where
   it folds follows the language, the wallet figures and who is signed in
   rather than one fixed width. Phones (820px and under) are always compact. */
/* one step before folding: the wallet already leads to Games, so its text link goes first */
.pub-nav.is-snug .pub-nav-me { display: none; }
.pub-nav.is-lean .pub-nav-links a.pub-nav-apply { display: none; }
.pub-nav-pin { display: none; }
.pub-nav.is-compact { position: relative; }
.pub-nav.is-compact .pub-nav-left { gap: 16px; }
/* Moments stays in the bar when everything else is behind the menu button */
body.pub .pub-nav.is-compact a.pub-nav-pin {
    display: inline-block;
    padding-bottom: 3px;
    font: 600 13.5px var(--sans);
    color: rgba(36,30,26,.7);
    white-space: nowrap;
}
body.pub .pub-nav.is-compact a.pub-nav-pin.is-active { color: var(--ink); border-bottom: 2px solid var(--rust); }
.pub-nav.is-compact .pub-nav-links a.pub-nav-pinned { display: none; }
.pub-nav.is-cramped .pub-wallet span + span { display: none; }
.pub-nav.is-compact .pub-nav-toggle { display: inline-flex; }
.pub-nav.is-compact .pub-nav-me,
.pub-nav.is-compact .pub-acct,
.pub-nav.is-compact .pub-lang,
.pub-nav.is-compact .pub-nav-login,
.pub-nav.is-packed .pub-nav-join { display: none !important; }
body.pub .pub-nav.is-compact a.pub-nav-join { padding: 7px 11px; font-size: 12.5px; }
.pub-nav.is-compact .pub-nav-links .pub-nav-extra { display: block; }
.pub-nav.is-compact .pub-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    flex-direction: column;
    gap: 0;
    padding: 8px 26px 14px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(36,30,26,.12);
    font-size: 15px;
}
.pub-nav.is-compact.open .pub-nav-links { display: flex; }
.pub-nav.is-compact .pub-nav-links a { padding: 12px 2px; border-bottom: 1px solid var(--line); }
.pub-nav.is-compact .pub-nav-links a:last-child { border-bottom: none; }
.pub-nav.is-compact .pub-nav-links a.is-active { border-bottom: 1px solid var(--line); color: var(--rust-deep); }

@media (max-width: 620px) {
    .pub-grid { grid-template-columns: 1fr; }
    .pub-gallery { grid-template-columns: repeat(3, 1fr); }
    .pub-hero-stats { gap: 20px; }
    .pub-profile-namerow h1 { font-size: 24px; }
    .pub-cta { flex-direction: column; align-items: flex-start; }
}

body.pub .pub-foot-link { color: var(--rust-deep); font-weight: 500; }
body.pub .pub-foot-link:hover { color: var(--rust); }

/* Status: an accepted order outranks presence, so it gets its own colour. */
.pub-stat-busy { color: var(--violet); }
.pub-avail { line-height: 1.35; }
.pub-book-busy { background: rgba(109,76,224,.12); color: var(--violet); }
.pub-avail-detail {
    font: 500 12px var(--mono);
    color: rgba(36,30,26,.45);
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 2px 7px;
}

/* ── Language switch ─────────────────────────────────── */
body.pub a.pub-lang {
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: 6px 12px;
    font: 500 12px var(--mono);
    color: rgba(36,30,26,.7);
    white-space: nowrap;
}
body.pub a.pub-lang:hover { color: var(--ink); border-color: var(--ink); }

/* ── Account menu: profile and log out behind the avatar ── */
.pub-acct { position: relative; }
.pub-acct summary {
    list-style: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #EFE7DC;
    border: 1px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 13px var(--display);
    color: rgba(36,30,26,.6);
    text-transform: uppercase;
}
.pub-acct summary::-webkit-details-marker { display: none; }
.pub-acct summary:hover,
.pub-acct[open] summary { border-color: var(--ink); }
.pub-acct summary img { width: 100%; height: 100%; object-fit: cover; }
.pub-acct summary svg { width: 18px; height: 18px; }
.pub-acct-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 70;
    min-width: 190px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 14px 28px rgba(36,30,26,.12);
}
.pub-acct-name {
    padding: 8px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
    font: 700 13px var(--sans);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.pub .pub-acct-menu a.pub-acct-vip {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 10px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
    border-radius: 8px 8px 0 0;
    white-space: normal;
    min-width: 0;
}
.pub-acct-vip-name {
    font: 700 13px var(--sans);
    color: var(--vip-solid);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pub-acct-vip-note { font: 12px/1.4 var(--sans); color: rgba(36,30,26,.6); overflow-wrap: anywhere; }
body.pub .pub-acct-menu a {
    padding: 8px 10px;
    border-radius: 8px;
    font: 500 13.5px var(--sans);
    color: rgba(36,30,26,.75);
    white-space: nowrap;
}
body.pub .pub-acct-menu a:hover { background: var(--sand); color: var(--ink); }

/* Chinese sets denser line-height and no italics. */
body.pub-zh { font-family: var(--cn); }
body.pub-zh .pub-hero h1,
body.pub-zh .pub-page h1,
body.pub-zh .pub-name,
body.pub-zh .pub-cta-title,
body.pub-zh .pub-empty-title,
body.pub-zh .pub-step h3 { font-family: var(--cn); letter-spacing: 0; }
body.pub-zh .pub-hero h1 { font-size: 36px; line-height: 1.2; }

/* ── Pricing ─────────────────────────────────────────── */
/* Two-column layout: price sheet on the left, calculator on the right. */
.pub-price-layout {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-top: 26px;
}
.pub-price-left { flex: 1 1 44%; min-width: 0; }
.pub-price-right { flex: 1 1 56%; min-width: 0; }
.pub-price-layout.is-solo .pub-price-right { flex: 1 1 100%; }
.pub-price-right .pub-calc { margin-top: 0; }

.pub-price-carousel { position: relative; text-align: center; }
.pub-price-img {
    display: none;
    width: auto;
    max-width: 100%;
    max-height: 80vh;
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--card);
}
.pub-price-img.is-active { display: block; }
.pub-price-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font: 400 24px/1 var(--sans);
    color: var(--ink);
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(36, 30, 26, .12);
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.pub-price-nav:hover { background: #fff; }
.pub-price-prev { left: 10px; }
.pub-price-next { right: 10px; }
.pub-price-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.pub-price-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(36, 30, 26, .22);
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.pub-price-dot.is-on { background: var(--rust); transform: scale(1.25); }
.pub-price-empty { margin-top: 26px; }

@media (max-width: 760px) {
    .pub-price-layout { flex-direction: column; }
    .pub-price-left, .pub-price-right { flex: 1 1 100%; width: 100%; }
    .pub-price-img { max-height: 70vh; }
}

/* ─── Fee calculator ──────────────────────────────────── */
.pub-calc {
    margin-top: 30px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px 22px 20px;
}
.pub-calc-head h2 { font: 700 20px var(--display); letter-spacing: -.01em; }
.pub-calc-head p { margin: 4px 0 0; font-size: 13.5px; color: rgba(36,30,26,.55); }
.pub-calc-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
}
.pub-calc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 180px;
}
.pub-calc-field.pub-calc-qty { flex: 0 0 110px; }
.pub-calc-field > span {
    font: 600 12px var(--sans);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(36,30,26,.5);
}
.pub-calc-select, .pub-calc-input {
    width: 100%;
    padding: 10px 12px;
    font: 15px var(--sans);
    color: var(--ink);
    background: var(--sand);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    appearance: none;
    -webkit-appearance: none;
}
.pub-calc-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23241E1A' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    cursor: pointer;
}
.pub-calc-select:focus, .pub-calc-input:focus {
    outline: none;
    border-color: var(--rust);
    box-shadow: 0 0 0 3px rgba(214,95,62,.14);
}
.pub-calc-extras { margin-top: 18px; }
.pub-calc-sublabel {
    display: block;
    font: 600 12px var(--sans);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(36,30,26,.5);
    margin-bottom: 10px;
}
.pub-calc-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.pub-calc-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    font-size: 14px;
    background: var(--sand);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
}
.pub-calc-check input { accent-color: var(--rust); width: 15px; height: 15px; cursor: pointer; }
.pub-calc-result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.pub-calc-total-label { font: 600 14px var(--sans); color: rgba(36,30,26,.6); }
.pub-calc-total { font: 800 30px var(--display); letter-spacing: -.02em; color: var(--rust); }
.pub-calc-note { margin: 12px 0 0; font-size: 12.5px; color: rgba(36,30,26,.45); }

/* Booking sidebar: price link under the purple Book button */
.pub-book-card .pub-btn-primary { margin-bottom: 10px; }
body.pub a.pub-book-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    padding: 11px 14px;
    font: 600 13px var(--sans);
    color: var(--ink);
    background: var(--sand);
    transition: border-color .15s, background .15s;
}
body.pub a.pub-book-price:hover { border-color: var(--violet); background: var(--card); }
.pub-book-price b { font: 700 13px var(--display); color: var(--rust-deep); }

/* ── Rate card ───────────────────────────────────────── */
.pub-rate-groups { display: flex; flex-direction: column; gap: 14px; }
.pub-rate-group {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 13px;
    overflow: hidden;
}
.pub-rate-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 18px;
    background: var(--sand);
    border-bottom: 1px solid var(--line);
}
.pub-rate-head-name { font: 700 15px var(--display); }
body.pub-zh .pub-rate-head-name { font-family: var(--cn); }
.pub-rate-head-sub { font: 500 11px var(--mono); color: rgba(36,30,26,.45); }
.pub-rate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 18px;
    flex-wrap: wrap;
}
.pub-rate-row + .pub-rate-row { border-top: 1px dashed var(--line); }
.pub-rate-name { display: flex; flex-direction: column; min-width: 0; }
.pub-rate-name > span:first-child { font: 600 14.5px var(--sans); }
body.pub-zh .pub-rate-name > span:first-child { font-family: var(--cn); }
.pub-rate-sub { font: 12px var(--sans); color: rgba(36,30,26,.45); }
.pub-rate-prices { display: flex; gap: 18px; flex-wrap: wrap; }
.pub-rate-price { display: flex; align-items: baseline; gap: 4px; }
.pub-rate-price b { font: 700 17px var(--display); color: var(--rust-deep); }
.pub-rate-unit { font: 12px var(--sans); color: rgba(36,30,26,.5); }
.pub-rate-note {
    margin-top: 14px;
    font: 12.5px var(--sans);
    color: rgba(36,30,26,.45);
    text-align: center;
}
.pub-price-sheets { margin-bottom: 8px; }

@media (max-width: 560px) {
    .pub-rate-row { align-items: flex-start; }
    .pub-rate-prices { gap: 12px; }
    .pub-rate-price b { font-size: 15px; }
}

/* ── Pagination ──────────────────────────────────────── */
.pub-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 26px;
}
body.pub a.pub-page-btn,
.pub-page-btn {
    padding: 8px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: var(--card);
    color: var(--ink);
    font: 600 13px var(--sans);
    white-space: nowrap;
}
body.pub a.pub-page-btn:hover { border-color: var(--ink); }
.pub-page-btn.is-disabled { color: rgba(36,30,26,.3); background: transparent; border-color: var(--line); cursor: default; }
.pub-page-nums { display: flex; align-items: center; gap: 4px; }
body.pub a.pub-page-num,
.pub-page-num {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font: 500 13px var(--sans);
    color: var(--ink);
}
body.pub a.pub-page-num:hover { background: rgba(36,30,26,.06); }
.pub-page-num.is-current { background: var(--ink); color: #fff; font-weight: 700; }
.pub-page-dots { padding: 0 4px; color: rgba(36,30,26,.4); }

/* ── Back to top ─────────────────────────────────────── */
.pub-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--violet);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(36,30,26,.22);
    z-index: 60;
    transition: transform .15s, background .15s;
}
.pub-top:hover { transform: translateY(-2px); background: #5a3ecf; }
.pub-top svg { width: 20px; height: 20px; }
/* Pages with their own sticky bottom bar (the profile editor) hide the
   floating scroll-top button so it can't overlap the Save button. */
body.pub-no-top .pub-top { display: none !important; }

@media (max-width: 560px) {
    .pub-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}

/* ── Nav: My profile + right cluster ─────────────────── */
.pub-nav-right { display: flex; align-items: center; gap: 12px; }
body.pub a.pub-nav-me {
    font: 500 13px var(--sans);
    color: rgba(36,30,26,.6);
    padding: 6px 10px;
    border-radius: 8px;
}
body.pub a.pub-nav-me:hover,
body.pub a.pub-nav-me.is-active { color: var(--ink); background: rgba(36,30,26,.05); }
body.pub a.pub-nav-join {
    background: var(--ink);
    color: #fff;
    border-radius: 9px;
    padding: 8px 14px;
    font: 600 13px var(--sans);
    white-space: nowrap;
    transition: background .15s;
}
body.pub a.pub-nav-join:hover { background: var(--rust-deep); }
body.pub a.pub-nav-login {
    font: 600 13px var(--sans);
    color: var(--ink);
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
}
body.pub a.pub-nav-login:hover { background: rgba(36,30,26,.06); }
/* "new posts" dot on Moments, and how many companions are free right now */
.pub-nav-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--rust);
    vertical-align: top;
}
.pub-nav-online {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(46,158,107,.12);
    color: #1f7a51;
    font: 600 11px var(--mono);
    vertical-align: 1px;
}
.pub-nav-online::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* ── Self-service profile editor ─────────────────────── */
.pub-me { max-width: 1180px; padding-bottom: 40px; }
.pub-alert {
    border-radius: 10px;
    padding: 11px 14px;
    font: 500 13.5px var(--sans);
    margin: 18px 0;
}
.pub-alert-ok { background: rgba(46,158,107,.12); color: #1f7a51; }
.pub-alert-err { background: rgba(176,74,46,.1); color: var(--rust-deep); }

.pub-signin { text-align: center; padding: 40px 0; }
.pub-signin .pub-page-lead { margin: 10px auto 22px; }
body.pub a.pub-btn-discord {
    display: inline-flex; align-items: center; gap: 10px;
    background: #5865F2; color: #fff; border-radius: 11px;
    padding: 12px 22px; font: 600 15px var(--sans);
}
body.pub a.pub-btn-discord:hover { background: #4752c4; }

/* Two-column editor + live preview */
.pub-me-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: start;
    padding-top: 22px;
}
.pub-me-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pub-me-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.pub-me-head h1 { font: 800 30px/1.1 var(--display); letter-spacing: -.025em; }
body.pub-zh .pub-me-head h1 { font-family: var(--cn); letter-spacing: 0; }
body.pub a.pub-me-view {
    flex: none;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--card);
    padding: 8px 14px;
    font: 600 13px var(--sans);
    color: var(--ink);
    white-space: nowrap;
}
body.pub a.pub-me-view:hover { border-color: var(--ink); }

.pub-me-card {
    --card-pad: 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: var(--card-pad);
}
.pub-field-label {
    display: block;
    font: 600 11px var(--mono);
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(36,30,26,.5);
    margin-bottom: 7px;
}
.pub-me-card .pub-charcount ~ .pub-field-label { margin-top: 16px; }
.pub-input {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    padding: 11px 13px;
    font: 14px var(--sans);
    color: var(--ink);
    background: var(--sand);
    resize: vertical;
}
.pub-input:focus { outline: none; border-color: var(--violet); background: var(--card); }
.pub-charcount { text-align: right; font: 11px var(--mono); color: rgba(36,30,26,.4); margin-top: 5px; }
.pub-hint { display: block; font: 12px var(--sans); color: rgba(36,30,26,.5); margin-top: 8px; }

/* Profile header card: banner edge to edge, avatar over its bottom edge,
   name beside it — then the photos. */
.pub-me-media { padding-top: 0; overflow: hidden; }
.pub-me-identity {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: -44px 0 20px;
}
.pub-me-avatar-edit { position: relative; flex: none; cursor: pointer; border-radius: 50%; }
.pub-me-avatar {
    width: 88px; height: 88px; flex: none;
    border-radius: 50%;
    border: 4px solid var(--card);
    object-fit: cover;
    background: #EFE7DC;
    display: flex; align-items: center; justify-content: center;
    font: 700 30px var(--display); color: rgba(36,30,26,.5);
}
.pub-me-avatar-cam {
    position: absolute; right: 2px; bottom: 2px;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--card);
    background: var(--ink); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.pub-me-avatar-cam svg { width: 14px; height: 14px; }
.pub-me-avatar-edit:hover .pub-me-avatar-cam { background: var(--violet); }
.pub-me-avatar-edit:focus-within { outline: 2px solid var(--violet); outline-offset: 2px; }
.pub-me-identity-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.pub-me-identity-name {
    font: 800 20px/1.2 var(--display);
    letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.pub-zh .pub-me-identity-name { font-family: var(--cn); letter-spacing: 0; }
.pub-me-identity-link { font: 600 13px var(--sans); color: var(--violet); cursor: pointer; width: fit-content; }
.pub-me-identity-link:hover { text-decoration: underline; }
.pub-upload-label { font: 600 13px var(--sans); color: rgba(36,30,26,.7); }

/* Games picker — companion chooses which games they list; the type badge on
   each chip is admin-set and shown read-only. */
.pub-me-games { position: relative; }
.pub-me-games-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pub-me-games-tags:empty { margin-bottom: 0; }
.pub-me-game-tag {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--sand);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 5px 8px 5px 12px;
    font: 600 13px var(--sans); color: rgba(36,30,26,.85);
}
.pub-me-game-type {
    font: 600 10px var(--sans);
    border-radius: 999px; padding: 2px 7px;
}
.pub-me-game-x {
    border: none; background: none; cursor: pointer;
    font-size: 16px; line-height: 1; color: rgba(36,30,26,.45);
    padding: 0 2px;
}
.pub-me-game-x:hover { color: var(--red, #B04A2E); }
.pub-me-games-search { width: 100%; }
.pub-me-games-drop {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
    margin-top: 4px; max-height: 260px; overflow-y: auto;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(36,30,26,.12);
    padding: 6px;
}
.pub-me-games-opt {
    display: block; width: 100%; text-align: left;
    border: none; background: none; cursor: pointer;
    padding: 8px 10px; border-radius: 8px;
    font: 500 14px var(--sans); color: rgba(36,30,26,.85);
}
.pub-me-games-opt:hover { background: var(--sand); }
.pub-me-game-sub { color: rgba(36,30,26,.45); font-size: 12px; margin-left: 6px; }
.pub-me-games-empty { padding: 10px; color: rgba(36,30,26,.5); font: 13px var(--sans); }

/* Propose-a-game disclosure under the picker */
.pub-me-propose { margin-top: 12px; }
.pub-me-propose > summary {
    cursor: pointer; width: fit-content;
    font: 600 13px var(--sans); color: var(--violet);
    list-style: none;
}
.pub-me-propose > summary::-webkit-details-marker { display: none; }
.pub-me-propose > summary:hover { text-decoration: underline; }
.pub-me-propose[open] > summary { margin-bottom: 10px; }
.pub-me-propose .pub-input { margin-bottom: 8px; }
.pub-me-propose #propose-status { display: inline-block; margin-left: 10px; }

/* Banner upload — a wide drop that doubles as the current-banner preview */
.pub-me-banner-drop {
    position: relative;
    display: block;
    margin: 0 calc(-1 * var(--card-pad));
    overflow: hidden;
    cursor: pointer;
}
.pub-me-banner-drop:hover .pub-upload-label { background: #fff; color: var(--ink); }
.pub-me-banner-preview {
    height: 140px;
    background-size: cover;
    background-position: center;
}
.pub-me-banner-empty {
    background: repeating-linear-gradient(45deg, #EFE7DC, #EFE7DC 10px, #E8DECE 10px, #E8DECE 20px);
}
/* top right: the bottom left is under the avatar */
.pub-me-banner-drop .pub-upload-label {
    position: absolute; right: 12px; top: 12px;
    background: rgba(255,255,255,.88);
    padding: 5px 12px; border-radius: 999px;
    backdrop-filter: blur(2px);
    transition: background .15s;
}

/* Gallery grid */
.pub-me-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}
.pub-gal-cell {
    position: relative;
    aspect-ratio: 1;
    border-radius: 11px;
    overflow: hidden;
    border: 1px solid var(--line);
    cursor: grab;
}
.pub-gal-cell.is-dragging { opacity: .4; }
/* touch: the photo being held lifts instead of fading */
.pub-gal-cell.is-held { opacity: .92; transform: scale(1.06); box-shadow: 0 10px 24px rgba(36,30,26,.25); z-index: 2; }
.pub-gal-cell img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.pub-gal-cover {
    position: absolute; left: 6px; bottom: 6px;
    background: var(--rust); color: #fff;
    font: 700 9px var(--mono); letter-spacing: .05em;
    padding: 3px 7px; border-radius: 999px;
}
.pub-gal-x {
    position: absolute; top: 5px; right: 5px;
    width: 22px; height: 22px;
    border: none; border-radius: 50%;
    background: rgba(36,30,26,.55); color: #fff;
    font-size: 15px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.pub-gal-x:hover { background: var(--rust-deep); }
.pub-gal-set {
    position: absolute; top: 5px; left: 5px;
    border: none; border-radius: 999px;
    background: rgba(255,255,255,.9); color: var(--ink);
    font: 600 9px var(--sans); padding: 3px 7px; cursor: pointer;
    opacity: 0; transition: opacity .15s;
}
.pub-gal-cell:hover .pub-gal-set { opacity: 1; }
/* phones have no hover: keep "Set cover" visible and the buttons easy to tap */
/* the cover already is the cover */
.pub-gal-cell:has(.pub-gal-cover) .pub-gal-set { display: none; }
@media (hover: none) {
    .pub-gal-set {
        opacity: 1;
        top: auto; bottom: 5px; left: 5px; right: 5px;
        font-size: 11px; padding: 5px 4px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .pub-gal-x { width: 28px; height: 28px; font-size: 17px; }
}
.pub-gal-cell.pub-gal-new { cursor: default; }
.pub-gal-newtag {
    position: absolute; top: 5px; right: 5px;
    background: var(--green); color: #fff;
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.pub-gal-add {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px dashed var(--line-strong);
    border-radius: 11px;
    color: rgba(36,30,26,.4);
    font-size: 26px; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.pub-gal-add:hover { border-color: var(--violet); color: var(--violet); }

/* ── Live preview card ── */
.pub-me-preview-col { position: sticky; top: 16px; }
.pub-preview-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.pub-preview-title { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px var(--sans); color: rgba(36,30,26,.7); }
.pub-preview-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.pub-preview-note { font: 12px var(--sans); color: rgba(36,30,26,.4); }

.pub-preview-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(36,30,26,.06);
}
.pub-preview-banner {
    height: 92px;
    background: repeating-linear-gradient(45deg, #EFE7DC, #EFE7DC 10px, #E8DECE 10px, #E8DECE 20px);
}
.pub-preview-body { padding: 0 22px 22px; }
.pub-preview-avatar-wrap { margin-top: -44px; margin-bottom: 12px; }
.pub-preview-avatar {
    width: 88px; height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--card);
    background: #EFE7DC;
    display: flex; align-items: center; justify-content: center;
    font: 700 30px var(--display); color: rgba(36,30,26,.5);
}
.pub-preview-namerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pub-preview-name { font: 800 22px var(--display); letter-spacing: -.02em; }
body.pub-zh .pub-preview-name { font-family: var(--cn); letter-spacing: 0; }
.pub-preview-avail {
    font: 600 11px var(--sans);
    background: rgba(46,158,107,.12);
    border-radius: 999px; padding: 3px 9px;
}
.pub-preview-bio { font: 14px/1.55 var(--sans); color: rgba(36,30,26,.82); margin-top: 10px; white-space: pre-wrap; }
.pub-preview-bio:empty { display: none; }
.pub-preview-stats { display: flex; gap: 26px; margin: 16px 0 4px; }
.pub-preview-stats > div { display: flex; flex-direction: column; }
.pub-preview-stats b { font: 700 19px var(--display); }
.pub-preview-stats span { font: 11px var(--sans); color: rgba(36,30,26,.5); }
.pub-preview-services-label {
    font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase;
    color: rgba(36,30,26,.45); margin: 16px 0 10px;
    padding-top: 14px; border-top: 1px solid var(--line);
}
.pub-preview-services { display: flex; flex-direction: column; gap: 8px; }
.pub-preview-service {
    display: flex; align-items: center; gap: 10px;
    background: var(--sand); border: 1px solid var(--line);
    border-radius: 11px; padding: 9px 12px;
}
.pub-preview-svc-name { flex: 1; font: 600 13.5px var(--sans); }
body.pub-zh .pub-preview-svc-name { font-family: var(--cn); }
.pub-preview-book {
    display: block; text-align: center;
    background: var(--rust); color: #fff;
    border-radius: 11px; padding: 12px; margin-top: 16px;
    font: 700 14px var(--sans);
}

/* ── Sticky save bar ── */
.pub-me-bar {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(36,30,26,.06);
    padding: 12px 26px;
}
.pub-me-status { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font: 600 13px var(--sans); color: rgba(36,30,26,.55); }
#save-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-me-status-dot { flex: none; }
.pub-me-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.pub-me-status.is-dirty { color: var(--rust-deep); }
.pub-me-status.is-dirty .pub-me-status-dot { background: var(--rust); }
.pub-me-bar-actions { display: flex; align-items: center; gap: 10px; flex: none; }
/* the fixed save bar would otherwise sit over the footer's links */
.pub-has-bar .pub-footer { padding-bottom: 76px; }
body.pub a.pub-me-jump { display: none; font: 600 13.5px var(--sans); color: var(--violet); padding: 10px 4px; }
.pub-me-preview-col { scroll-margin-top: 12px; }
body.pub a.pub-btn-ghost {
    display: inline-block; text-align: center;
    border: 1px solid var(--line-strong); border-radius: 10px;
    padding: 10px 16px; font: 600 13.5px var(--sans); color: var(--ink);
}
body.pub a.pub-btn-ghost:hover { border-color: var(--ink); }
body.pub a.pub-btn-ghost-sm { padding: 9px 16px; font-size: 13px; }
body.pub button.pub-btn-inline, .pub-btn-inline { display: inline-block; width: auto; padding: 11px 26px; }

@media (max-width: 900px) {
    .pub-me-grid { grid-template-columns: 1fr; }
    .pub-me-preview-col { position: static; }
    body.pub a.pub-me-jump { display: inline-block; }
}

/* Phones: more room for the editor, and 16px text in boxes so iPhone
   doesn't zoom the page in when one is tapped. */
@media (max-width: 560px) {
    .pub-wrap.pub-me { padding-left: 14px; padding-right: 14px; }
    .pub-me-grid { gap: 18px; padding-top: 14px; }
    .pub-me-head h1 { font-size: 26px; }
    .pub-me-card { --card-pad: 16px; border-radius: 14px; }
    .pub-me-banner-preview { height: 120px; }
    .pub-me-avatar { width: 80px; height: 80px; }
    .pub-me-identity { margin-top: -40px; }
    .pub-me .pub-input { font-size: 16px; }
    .pub-me-bar { padding: 10px 14px; gap: 10px; }
    .pub-me-bar-actions { gap: 6px; }
    body.pub .pub-me-bar a.pub-btn-ghost-sm { padding: 9px 12px; }
    body.pub .pub-me-bar .pub-btn-inline { padding: 11px 18px; }
}


/* ── Bio helper toolbar (emoji + Unicode text styles) ── */
.bio-tools-wrap { position: relative; margin-bottom: 8px; }
.bio-tools { display: flex; flex-wrap: wrap; gap: 5px; }
.bio-tool {
    border: 1px solid var(--line-strong);
    background: var(--sand);
    color: var(--ink);
    border-radius: 7px;
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    font: 500 13px var(--sans);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, background .15s;
}
.bio-tool:hover { border-color: var(--violet); background: #fff; }
.bio-tool-bold { font-weight: 800; }
.bio-tool-italic { font-style: italic; }
.bio-tool-emoji { font-size: 12.5px; gap: 4px; }

.bio-emoji-pop {
    display: none;               /* closed by default; .is-open reveals it */
    position: absolute;
    top: 36px;
    left: 0;
    z-index: 40;
    width: min(320px, 90vw);
    max-height: 200px;
    overflow-y: auto;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
    padding: 8px;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    box-shadow: 0 8px 24px rgba(36,30,26,.15);
}
.bio-emoji-pop.is-open { display: grid; }
.bio-emoji {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 19px;
    line-height: 1;
    padding: 4px;
    border-radius: 6px;
}
.bio-emoji:hover { background: rgba(109,76,224,.12); }
.pub-file-count { color: var(--violet); font-weight: 600; }

@media (max-width: 480px) {
    .bio-emoji-pop { grid-template-columns: repeat(8, 1fr); }
}

/* Feedback when a bio action can't apply (over the length limit, or no text selected). */
@keyframes bio-flash-kf {
    0%, 100% { border-color: var(--line-strong); }
    30%      { border-color: var(--rust); box-shadow: 0 0 0 3px rgba(214,95,62,.15); }
}
.pub-input.bio-flash { animation: bio-flash-kf .4s ease; }
@media (prefers-reduced-motion: reduce) {
    .pub-input.bio-flash { animation: none; }
}

/* ── Wallet chip (signed-in visitors) ────────────────── */
body.pub a.pub-wallet {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 13px;
    font: 500 12.5px var(--mono);
    color: var(--ink);
    white-space: nowrap;
    transition: border-color .15s, background .15s;
}
body.pub a.pub-wallet:hover { border-color: var(--line-strong); background: var(--card); }
.pub-wallet b { font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 400px) {
    body.pub a.pub-wallet { padding: 5px 9px; gap: 8px; font-size: 12px; }
}

/* ── Minigames ───────────────────────────────────────── */
.pub-games { --felt: color-mix(in srgb, var(--green) 62%, var(--ink)); }
.pub-games [hidden] { display: none !important; }
.pub-games button:focus-visible,
.pub-games summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

.pub-games-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}
.pub-games-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 20px; }
.pub-page .pub-games-side h1 { font-size: 30px; }
.pub-games-lead { font: 13.5px/1.55 var(--sans); color: rgba(36,30,26,.6); margin-top: 8px; }
.pub-games-nav { display: flex; flex-direction: column; gap: 4px; }
body.pub a.pub-games-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font: 600 14.5px var(--sans);
    color: rgba(36,30,26,.72);
}
body.pub a.pub-games-tab:hover { background: rgba(36,30,26,.05); color: var(--ink); }
body.pub a.pub-games-tab.is-on { background: var(--ink); color: #fff; }
body.pub a.pub-games-tab:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.pub-games-tab-note { margin-left: auto; font: 500 12px var(--sans); opacity: .6; white-space: nowrap; }
.pub-purse { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 18px; }
.pub-purse-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pub-purse-n {
    font: 800 24px/1.05 var(--display);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.pub-purse-l { font: 500 13px var(--sans); color: rgba(36,30,26,.6); }
/* VIP colours come from each level's own colour, set inline as --vip-bg
   (badge fill), --vip-fg (text on it) and --vip-solid (name colour) by
   vip.look(). vip-t0 = no level yet. */
.vip-t0 { --vip-bg: var(--card); --vip-fg: var(--ink); --vip-solid: rgba(36,30,26,.55); --vip-edge: var(--line); }

.pub-vip-bar { height: 6px; border-radius: 99px; background: rgba(36,30,26,.12); overflow: hidden; }
.pub-vip-bar i { display: block; height: 100%; border-radius: inherit; background: var(--vip-solid, var(--rust)); }

/* Minigames sidebar card — links to the VIP page */
body.pub a.pub-vip {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--vip-edge);
    background: var(--vip-bg);
    color: var(--vip-fg);
    min-width: 0;
}
body.pub a.pub-vip:hover { filter: brightness(1.05); }
body.pub a.pub-vip:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.pub-vip .pub-purse-l { color: inherit; opacity: .8; }
.pub-vip-name {
    font: 800 20px/1.05 var(--display);
    letter-spacing: -.01em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pub-vip-name.is-none { font: 500 14px var(--sans); opacity: .6; }
.pub-vip-note { font: 12.5px/1.5 var(--sans); opacity: .8; overflow-wrap: anywhere; }
.pub-vip:not(.vip-t0) .pub-vip-bar { background: rgba(255,255,255,.3); }
.pub-vip:not(.vip-t0) .pub-vip-bar i { background: var(--vip-fg); }

/* The VIP badge: the level's colour, a small cut gem, the level's name */
.pub-vip-chip {
    display: inline-flex;
    align-items: center;
    gap: .42em;
    max-width: 11em;
    padding: 0 .7em 0 .55em;
    margin-right: 6px;
    border-radius: 4px;
    background: var(--vip-bg);
    color: var(--vip-fg);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.18);
    font: 700 10.5px/1.7 var(--sans);
    letter-spacing: .01em;
    vertical-align: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pub-vip-chip::before {
    content: "";
    flex: none;
    width: .62em;
    height: .62em;
    transform: rotate(45deg);
    border-radius: 1px;
    background: linear-gradient(135deg, currentColor 50%, color-mix(in srgb, currentColor 55%, transparent) 50%);
}

.pub-vip-signin {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 20px;
    max-width: 620px;
    margin-top: 22px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
}
.pub-vip-signin p { flex: 1 1 240px; font: 14px/1.5 var(--sans); color: rgba(36,30,26,.75); }

/* Pricing page: a card linking to the VIP levels */
body.pub a.pub-vip-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    padding: 16px 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    color: rgba(36,30,26,.65);
    font: 14px/1.5 var(--sans);
    transition: border-color .15s, box-shadow .15s;
}
body.pub a.pub-vip-cta:hover { border-color: rgba(109,76,224,.35); box-shadow: 0 4px 16px rgba(109,76,224,.08); }
body.pub a.pub-vip-cta:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.pub-vip-cta-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(109,76,224,.1);
    color: var(--violet);
}
.pub-vip-cta-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pub-vip-cta-text b { color: var(--ink); font: 700 16px/1.3 var(--display); }
.pub-vip-cta-go {
    flex: none;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(109,76,224,.1);
    color: var(--violet);
    font-weight: 700;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
body.pub a.pub-vip-cta:hover .pub-vip-cta-go { background: var(--violet); color: #fff; }
@media (max-width: 560px) {
    body.pub a.pub-vip-cta { flex-wrap: wrap; align-items: flex-start; padding: 14px; }
    .pub-vip-cta-text { flex-basis: calc(100% - 60px); }
    .pub-vip-cta-go { width: 100%; text-align: center; }
}
.pub-vip-how { margin-top: 18px; max-width: 620px; font: 13.5px/1.6 var(--sans); color: rgba(36,30,26,.6); }
.pub-games-who { font: 13px var(--sans); color: rgba(36,30,26,.55); }
body.pub .pub-games-who a { color: var(--rust-deep); font-weight: 500; margin-left: 8px; }
body.pub .pub-games-who a:hover { color: var(--rust); }

.pub-spin-layout {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 34px;
    align-items: center;
}
.pub-spin-info { display: flex; flex-direction: column; gap: 12px; }
.pub-spin-info .pub-spin-text,
.pub-spin-info .pub-game-note { text-align: left; }
.pub-bj-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
    align-items: start;
}

/* PvP blackjack: open tables, waiting, and the two-player table */
.pub-pvp-msg { font: 500 14px var(--sans); color: var(--rust-deep); }
.pub-pvp-msg:empty { display: none; }
.pub-pvp-h { font: 600 14px var(--sans); margin-bottom: 10px; }
.pub-pvp-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pub-pvp-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 14px;
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.pub-pvp-who { flex: 1; min-width: 0; font: 600 14px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-pvp-bet { font: 500 13px var(--mono); color: rgba(36,30,26,.6); white-space: nowrap; }
.pub-pvp-list button.pub-btn-primary { width: auto; flex: none; padding: 8px 18px; }
.pub-pvp-list button.pub-btn-quiet { flex: none; padding: 7px 12px; }
.pub-pvp-list li.is-invite { background: var(--card); border-color: var(--violet); }

/* Friends drawer: slides in from the right over the page; the button that
   opens it sits under the game tabs. */
button.pub-fr-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: var(--card);
    font: 600 14.5px var(--sans);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s;
}
button.pub-fr-toggle:hover { border-color: var(--ink); }
.pub-fr-toggle .pub-games-tab-note { margin-left: auto; }
.pub-fr-toggle .pub-games-tab-note.is-alert { opacity: 1; color: var(--rust-deep); }
.pub-fr-backdrop { position: fixed; inset: 0; z-index: 75; background: rgba(36,30,26,.35); }
.pub-games-friends {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    width: 340px;
    max-width: 90vw;
    gap: 12px;
    padding: 20px 18px;
    border-radius: 18px 0 0 18px;
    border-right: none;
    overflow-y: auto;
    box-shadow: -12px 0 32px rgba(36,30,26,.16);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .22s ease, visibility 0s .22s;
}
.pub-games-friends.is-open { transform: none; visibility: visible; transition: transform .22s ease; }
@media (prefers-reduced-motion: reduce) {
    .pub-games-friends, .pub-games-friends.is-open { transition: none; }
}
.pub-fr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pub-fr-head button.pub-btn-quiet { padding: 5px 12px; font-size: 16px; }
.pub-games-friends h2 { font-size: 18px; }
.pub-games-friends .pub-pvp-empty { padding: 20px 14px; font-size: 13.5px; }
.pub-games-friends .pub-hint { margin-top: 0; }
.pub-games-friends .pub-pvp-list li { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
.pub-games-friends .pub-pvp-who { flex-basis: 50%; }
.pub-fr-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.pub-fr-dot.is-on { background: var(--green); }
.pub-fr-list .pub-pvp-bet { font-family: var(--sans); }
.pub-pvp-list:empty { display: none; }
.pub-pvp-list li.pub-fr-none { justify-content: center; background: none; border-style: dashed; font: 13.5px var(--sans); color: rgba(36,30,26,.6); }
@media (max-width: 480px) {
    .pub-pvp-list li { flex-wrap: wrap; }
    .pub-pvp-who { flex-basis: 50%; }
}
.pub-pvp-empty {
    padding: 26px 18px;
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    font: 14px/1.5 var(--sans);
    color: rgba(36,30,26,.6);
    text-align: center;
}
.pub-pvp-waiting {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 46px 20px;
    background: var(--sand);
    border-radius: 14px;
    text-align: center;
}
.pub-pvp-waiting-text { font: 700 18px/1.35 var(--display); }
body.pub-zh .pub-pvp-waiting-text { font-family: var(--cn); }
.pub-pvp-table { display: flex; flex-direction: column; gap: 14px; max-width: 680px; }
.pub-pvp-status { font: 600 14.5px var(--sans); font-variant-numeric: tabular-nums; }
.pub-pvp-status:empty { display: none; }

/* Duel: an arcade fight stage — dusk rooftop, health bars across the top,
   two fighters, then the four moves. Its colours are its own; the rest of the
   page stays on the site palette. */
#duel-table { max-width: none; }
.pub-stage {
    --dusk-top: #2A2145;
    --dusk-mid: #7A3F72;
    --dusk-low: #E0703F;
    --glow: #FFD27A;
    --floor: #2B211D;
    position: relative;
    isolation: isolate;
    aspect-ratio: 16 / 8;
    min-height: 320px;
    border-radius: 16px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 50% 66%, var(--glow) 0 7%, rgba(255,210,122,.45) 7.4% 13%, transparent 26%),
        linear-gradient(var(--dusk-top) 0%, var(--dusk-mid) 38%, var(--dusk-low) 66%, var(--floor) 66.2%);
}
.pub-stage-city {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34%;
    width: 100%;
    height: 30%;
    fill: #1F1830;
    opacity: .78;
    z-index: -1;
}
/* The rooftop: boards running toward the horizon, and a painted ring. */
.pub-stage::before {
    content: "";
    position: absolute;
    inset: 66% 0 0 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 46% 60% at 50% 46%, transparent 0 86%, rgba(255,255,255,.16) 87% 91%, transparent 92%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9%),
        linear-gradient(#4A352B, var(--floor));
}
.pub-stage.is-shake { animation: pub-shake-kf .34s linear; }
/* Knockout: one white flash over the whole stage. */
.pub-stage::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.pub-stage.is-ko::after { animation: pub-ko-kf .5s ease-out; }
@keyframes pub-ko-kf { 0% { opacity: .85; } 100% { opacity: 0; } }
@keyframes pub-shake-kf {
    20% { transform: translate(-6px, 3px); }
    45% { transform: translate(5px, -3px); }
    70% { transform: translate(-3px, 2px); }
}

.pub-hud {
    position: absolute;
    inset: 14px 16px auto 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
.pub-hud-side { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pub-hud-side.is-them { text-align: right; }
.pub-hud-name {
    font: 800 15px var(--display);
    letter-spacing: .01em;
    text-shadow: 0 2px 0 rgba(0,0,0,.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.pub-zh .pub-hud-name { font-family: var(--cn); }
.pub-hp {
    height: 18px;
    padding: 2px;
    background: rgba(0,0,0,.62);
    box-shadow: 0 0 0 2px #fff, 0 3px 0 2px rgba(0,0,0,.35);
    clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.pub-hud-side.is-them .pub-hp { transform: scaleX(-1); }
.pub-hp-fill {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(#FFE27A, #F2A83B);
    transition: width .5s cubic-bezier(.2, .8, .3, 1), background .3s;
}
.pub-hp-fill.is-low { background: linear-gradient(#FF8F6B, #D9412B); }
.pub-hud-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pub-hud-side.is-them .pub-hud-sub { flex-direction: row-reverse; }
.pub-hp-n { font: 500 11.5px var(--mono); color: rgba(255,255,255,.8); white-space: nowrap; }
.pub-meter { display: inline-flex; gap: 3px; }
.pub-meter i { width: 22px; height: 7px; background: rgba(0,0,0,.5); box-shadow: 0 0 0 1px rgba(255,255,255,.5); transform: skewX(-18deg); transition: background .25s; }
.pub-meter i.is-on { background: #7FE3FF; }
.pub-meter.is-full i { background: #fff; box-shadow: 0 0 0 1px #fff, 0 0 10px #7FE3FF; animation: pub-meter-kf .8s ease-in-out infinite alternate; }
@keyframes pub-meter-kf { to { background: #7FE3FF; } }
.pub-hud-clock { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pub-hud-clock b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #17121F;
    box-shadow: 0 0 0 2px #fff, 0 3px 0 2px rgba(0,0,0,.35);
    font: 700 21px var(--mono);
    font-variant-numeric: tabular-nums;
}
.pub-hud-clock b.is-low { color: #FF8F6B; }
.pub-hud-clock span { font: 600 11.5px var(--sans); color: rgba(255,255,255,.85); white-space: nowrap; text-shadow: 0 1px 0 rgba(0,0,0,.5); }

/* Brawl's bars: a face beside each, a strip that trails behind damage, and a clock in a gold ring. */
#brawl-play .pub-hud-side {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 4px;
    align-items: start;
}
#brawl-play .pub-hud-side.is-them { grid-template-columns: minmax(0, 1fr) 60px; }
#brawl-play .pub-hud-face {
    grid-row: 1 / 4;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: #17121F;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #17121F, 0 5px 0 4px rgba(0,0,0,.3);
}
#brawl-play .pub-hud-side.is-you > :not(canvas) { grid-column: 2; }
#brawl-play .pub-hud-side.is-them > :not(canvas) { grid-column: 1; }
#brawl-play .pub-hud-side.is-them .pub-hud-face { grid-column: 2; }
#brawl-play .pub-hud-name { font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: #FFE680; }
#brawl-play .pub-hud-side.is-me .pub-hud-face { box-shadow: 0 0 0 2px #FFE680, 0 0 0 4px #17121F, 0 0 14px 3px rgba(255,230,128,.55); }
#brawl-play .pub-hud-side:not(.is-me) .pub-hud-name { color: #fff; }
#brawl-play .pub-hp {
    display: grid;
    height: 28px;
    box-sizing: border-box;
    padding: 3px;
    border: 3px solid #fff;
    background: #120D1A;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
#brawl-play .pub-hp > * { grid-area: 1 / 1; display: block; height: 100%; justify-self: start; }
#brawl-play .pub-hp-ghost { width: 100%; background: #E2553A; transition: width .55s ease .45s; }
#brawl-play .pub-hp-fill {
    background: linear-gradient(180deg, #FFF59A 0 36%, #FAD22E 36% 64%, #F2A81D 64%);
    transition: width .08s linear;
}
#brawl-play .pub-hp-fill.is-low { background: linear-gradient(180deg, #FFB39E 0 36%, #FF6B4A 36% 64%, #D9412B 64%); }
#brawl-play .pub-hud-clock b {
    width: 62px;
    height: 62px;
    background: radial-gradient(#3A2D5C, #17121F 72%);
    box-shadow: 0 0 0 3px #F2D65A, 0 0 0 5px #17121F, 0 0 18px rgba(242,214,90,.35);
    font: 800 28px var(--display);
    text-shadow: 0 2px 0 rgba(0,0,0,.6);
}

.pub-fighter {
    position: absolute;
    bottom: 9%;
    left: 23%;
    width: clamp(92px, 17%, 168px);
    --gi: var(--rust);
    --gi-shade: var(--rust-deep);
}
.pub-fighter.is-them { left: auto; right: 23%; --gi: #7C5BE8; --gi-shade: #4E36B0; }
.pub-fighter-fig { display: block; width: 100%; height: auto; overflow: visible; }
.pub-fighter.is-them .pub-fighter-fig { transform: scaleX(-1); }
.f-shadow { fill: rgba(0,0,0,.42); }
.f-body { transition: transform .2s cubic-bezier(.2, .8, .3, 1); transform-box: fill-box; transform-origin: 50% 100%; }
.f-body * { stroke: #17121F; stroke-width: 3; stroke-linejoin: round; }
.f-skin { fill: #EFC29C; }
.f-hair, .f-belt, .f-shoe { fill: #17121F; }
.f-gi { fill: var(--gi); }
.f-gi-shade { fill: var(--gi-shade); }
.f-trim { fill: #FBF3E6; }
.f-glove, .f-grab { fill: #FBF3E6; }
.f-grab { visibility: hidden; }
.f-arm, .f-leg, .f-head { transition: transform .2s cubic-bezier(.2, .8, .3, 1); transform-box: fill-box; }
.f-arm { transform-origin: 50% 9%; }
.f-arm-front { transform: rotate(-24deg); }
.f-arm-back { transform: rotate(-52deg); }
.f-leg-front { transform-origin: 27% 0; }
.f-leg-back { transform-origin: 62% 0; }
.f-head { transform-origin: 50% 100%; }

/* Breathing: everything above the belt, so the feet stay planted. */
.f-bob { animation: pub-bob-kf 1.5s ease-in-out infinite alternate; }
.pub-fighter.is-them .f-bob { animation-delay: -.7s; }
@keyframes pub-bob-kf { to { transform: translateY(2.5px); } }

/* One face at a time, picked by data-face; a fighter on the floor is always out cold. */
.f-body .f-face * { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.f-body .f-face .f-ink { fill: #17121F; stroke: none; }
.f-face { display: none; }
.pub-fighter[data-face="idle"] .f-face-idle,
.pub-fighter[data-face="fierce"] .f-face-fierce,
.pub-fighter[data-face="hurt"] .f-face-hurt,
.pub-fighter[data-face="tired"] .f-face-tired,
.pub-fighter[data-face="lose"] .f-face-tired,
.pub-fighter[data-face="win"] .f-face-win { display: inline; }
.f-body .f-sweat { fill: #7FE3FF; stroke-width: 2; visibility: hidden; }

.pub-fighter.pose-strike .f-body { transform: translateX(34%); }
.pub-fighter.pose-strike .f-arm-front { transform: rotate(-96deg); }
.pub-fighter.pose-strike .f-arm-back { transform: rotate(28deg); }
.pub-fighter.pose-strike .f-leg-front { transform: rotate(-16deg); }
.pub-fighter.pose-strike .f-leg-back { transform: rotate(14deg); }
.pub-fighter.pose-block .f-body { transform: translateX(-4%) scaleY(.94); }
.pub-fighter.pose-block .f-arm-front { transform: rotate(-164deg); }
.pub-fighter.pose-block .f-arm-back { transform: rotate(-150deg); }
.pub-fighter.pose-block .f-leg-front { transform: rotate(-9deg); }
.pub-fighter.pose-block .f-leg-back { transform: rotate(11deg); }
.pub-fighter.pose-throw .f-body { transform: translateX(26%) rotate(9deg); }
.pub-fighter.pose-throw .f-arm-front { transform: rotate(-76deg); }
.pub-fighter.pose-throw .f-arm-back { transform: rotate(-104deg); }
.pub-fighter.pose-throw .f-leg-front { transform: rotate(-10deg); }
.pub-fighter.pose-throw .f-leg-back { transform: rotate(22deg); }
.pub-fighter.pose-throw .f-glove { visibility: hidden; }
.pub-fighter.pose-throw .f-grab { visibility: visible; }
/* Special: a short wind-up, then both fists out and a wave across the stage. */
.pub-fighter.pose-special .f-body { transform: translateX(38%) scale(1.07); animation: pub-windup-kf .3s ease-in; }
@keyframes pub-windup-kf {
    0% { transform: none; }
    45% { transform: translateX(-12%) scale(.95); }
}
.pub-fighter.pose-special .f-arm-front,
.pub-fighter.pose-special .f-arm-back { transform: rotate(-100deg); }
.pub-fighter.pose-special .f-leg-front { transform: rotate(-12deg); }
.pub-fighter.pose-special .f-leg-back { transform: rotate(18deg); }
.pub-fighter.pose-special .pub-fighter-fig { filter: drop-shadow(0 0 14px #7FE3FF) drop-shadow(0 0 4px #fff); }
.f-wave { fill: #7FE3FF; stroke: #fff; stroke-width: 3; stroke-linejoin: round; opacity: 0; transform-box: fill-box; transform-origin: 0 50%; }
.pub-fighter.pose-special .f-wave { animation: pub-wave-kf .6s ease-out .12s both; }
@keyframes pub-wave-kf {
    0% { opacity: 0; transform: scale(.4); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translateX(150px) scale(1.25); }
}

/* Move effects, drawn in the fighter's own space so the mirrored side gets them too:
   a swoosh off the fist, a shield when a block holds. */
.f-fx { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; opacity: 0; }
.f-shield { stroke: #7FE3FF; stroke-width: 5; }
.pub-fighter.pose-strike .f-swoosh { animation: pub-swoosh-kf .32s ease-out .06s; }
@keyframes pub-swoosh-kf {
    0% { opacity: 0; transform: translateX(-26px); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateX(14px); }
}
.pub-fighter.is-guard .f-shield { animation: pub-shield-kf .5s ease-out; }
@keyframes pub-shield-kf {
    0% { opacity: 0; transform: translateX(-8px); }
    20% { opacity: 1; filter: drop-shadow(0 0 6px #7FE3FF); }
    100% { opacity: 0; transform: translateX(6px); }
}

/* Between exchanges: worn out when low on health, then arms up or slumped at the end. */
.pub-fighter.is-tired .f-bob,
.pub-fighter.is-lose .f-bob { animation: pub-pant-kf .5s ease-in-out infinite alternate; }
@keyframes pub-pant-kf { to { transform: translateY(4px); } }
.pub-fighter.is-tired .f-head { transform: rotate(7deg); }
.pub-fighter.is-tired .f-sweat,
.pub-fighter.is-lose .f-sweat { visibility: visible; }
.pub-fighter.is-win .f-body { animation: pub-cheer-kf .36s ease-out infinite alternate; }
@keyframes pub-cheer-kf { to { transform: translateY(-9px); } }
.pub-fighter.is-win .f-arm-front { transform: rotate(-138deg); }
.pub-fighter.is-win .f-arm-back { transform: rotate(-200deg); }
.pub-fighter.is-lose .f-body { transform: translateY(2px); }
.pub-fighter.is-lose .f-head { transform: rotate(16deg); }
.pub-fighter.is-lose .f-arm-front { transform: rotate(-6deg); }
.pub-fighter.is-lose .f-arm-back { transform: rotate(-14deg); }
.pub-fighter.is-lose .f-leg-front { transform: rotate(-12deg); }
.pub-fighter.is-lose .f-leg-back { transform: rotate(12deg); }
.pub-fighter.is-hurt { animation: pub-hurt-kf .42s ease-out; }
@keyframes pub-hurt-kf {
    20% { transform: translateX(-12px); filter: brightness(2) saturate(.4); }
    60% { transform: translateX(6px); }
}
.pub-fighter.is-them.is-hurt { animation-name: pub-hurt-them-kf; }
@keyframes pub-hurt-them-kf {
    20% { transform: translateX(12px); filter: brightness(2) saturate(.4); }
    60% { transform: translateX(-6px); }
}
/* Thrown: lifted and tipped over. --dir flips it for the right-hand fighter. */
.pub-fighter { --dir: 1; }
.pub-fighter.is-them { --dir: -1; }
.pub-fighter.is-thrown { animation: pub-thrown-kf .6s cubic-bezier(.3, .7, .4, 1); }
@keyframes pub-thrown-kf {
    35% { transform: translate(calc(var(--dir) * -10px), -30%) rotate(calc(var(--dir) * -38deg)); filter: brightness(1.6); }
    70% { transform: translate(calc(var(--dir) * -16px), 0) rotate(calc(var(--dir) * -8deg)); }
}
.pub-fighter.is-down .f-body { transform: translateX(-18%) rotate(-84deg); transition: transform .5s cubic-bezier(.34, 1.4, .64, 1); }
.pub-fighter.is-down .f-bob { animation: none; }
.pub-fighter.is-down .f-arm-front { transform: rotate(-165deg); }
.pub-fighter.is-down .f-arm-back { transform: rotate(-10deg); }
.pub-fighter.is-down .f-leg-front { transform: rotate(-18deg); }
.pub-fighter.is-down .f-leg-back { transform: rotate(8deg); }
.pub-fighter.is-down .f-face { display: none; }
.pub-fighter.is-down .f-face-ko { display: inline; }
.pub-fighter.is-down .pub-fighter-move { visibility: hidden; }
.pub-fighter-hit {
    position: absolute;
    top: -6%;
    left: 50%;
    transform: translateX(-50%);
    font: 800 30px var(--display);
    color: #fff;
    text-shadow: 0 3px 0 #D9412B, 0 0 12px rgba(0,0,0,.5);
    opacity: 0;
    pointer-events: none;
}
.pub-fighter-hit.is-on { animation: pub-hit-kf 1.2s ease-out; }
@keyframes pub-hit-kf {
    0% { opacity: 0; transform: translate(-50%, 14px) scale(.6); }
    14% { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -34px) scale(1); }
}
.pub-fighter-move {
    position: absolute;
    left: 50%;
    bottom: -9%;
    transform: translateX(-50%);
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    font: 700 12.5px var(--sans);
    white-space: nowrap;
}
.pub-fighter-move:empty { display: none; }

/* Impact burst, placed on whoever was hit */
.pub-spark {
    position: absolute;
    bottom: 34%;
    left: 50%;
    width: 13%;
    aspect-ratio: 1;
    margin-left: -6.5%;
    background: radial-gradient(circle, #fff 0 22%, var(--glow) 23% 60%, #FF8F6B 61%);
    clip-path: polygon(50% 0, 61% 34%, 98% 22%, 70% 50%, 100% 78%, 62% 66%, 50% 100%, 38% 66%, 0 78%, 30% 50%, 2% 22%, 39% 34%);
    opacity: 0;
    pointer-events: none;
}
.pub-spark.is-you { left: 34%; }
.pub-spark.is-them { left: 66%; }
.pub-spark.is-on { animation: pub-spark-kf .38s ease-out; }
@keyframes pub-spark-kf {
    0% { opacity: 1; transform: scale(.3) rotate(0); }
    60% { opacity: 1; transform: scale(1.25) rotate(18deg); }
    100% { opacity: 0; transform: scale(1.5) rotate(26deg); }
}

.pub-callout {
    position: absolute;
    left: 0;
    right: 0;
    top: 29%;
    font: 800 clamp(34px, 7vw, 68px)/1 var(--display);
    letter-spacing: .02em;
    text-align: center;
    text-shadow: 0 5px 0 #17121F, 0 0 26px rgba(255,210,122,.7);
    opacity: 0;
    pointer-events: none;
}
body.pub-zh .pub-callout { font-family: var(--cn); }
.pub-callout.is-on { animation: pub-call-kf 1.15s cubic-bezier(.2, .8, .3, 1); }
@keyframes pub-call-kf {
    0% { opacity: 0; transform: scale(1.9); }
    18% { opacity: 1; transform: scale(1); }
    78% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(.94); }
}

.pub-duel-moves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
button.pub-duel-move {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 11px;
    align-items: center;
    padding: 12px 14px;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-bottom-width: 4px;
    border-radius: 12px;
    font: 13px var(--sans);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, transform .1s, background .15s;
}
button.pub-duel-move svg { grid-row: span 2; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
button.pub-duel-move b { font: 700 15px var(--sans); }
button.pub-duel-move span { color: rgba(36,30,26,.6); font-size: 12px; line-height: 1.3; }
button.pub-duel-move:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-2px); }
button.pub-duel-move:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; margin-bottom: 3px; }
button.pub-duel-move.is-picked { background: var(--ink); border-color: var(--ink); color: #fff; opacity: 1; }
button.pub-duel-move.is-picked span { color: rgba(255,255,255,.7); }
button.pub-duel-move[data-duel-move="special"]:not(:disabled) { border-color: var(--violet); color: var(--violet); }
button.pub-duel-move[data-duel-move="special"]:not(:disabled) b { color: var(--violet); }

/* Brawl: the canvas is the stage; the HUD and call-outs sit over it */
.pub-stage.is-brawl { aspect-ratio: 2 / 1; min-height: 0; background: #2A2145; touch-action: none; }
.pub-stage.is-brawl::before { display: none; }
.pub-stage.is-brawl #brawl-canvas { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; }
.pub-callout.is-held { opacity: 1; }
.pub-rounds { display: inline-flex; gap: 5px; }
.pub-rounds i { width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,.5); box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }
.pub-rounds i.is-on { background: #FFD27A; }
.pub-brawl-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
button.pub-brawl-level {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 14px;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-bottom-width: 4px;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, transform .1s;
}
button.pub-brawl-level b { font: 700 16px var(--sans); pointer-events: none; }
button.pub-brawl-level span { font: 12.5px var(--sans); color: rgba(36,30,26,.6); pointer-events: none; }
button.pub-brawl-level:hover { border-color: var(--ink); transform: translateY(-2px); }
.pub-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; margin-bottom: 12px; font: 13.5px var(--sans); }
.pub-keys div { display: flex; align-items: center; gap: 9px; }
.pub-keys dt { display: flex; gap: 4px; }
.pub-keys kbd {
    min-width: 27px;
    padding: 3px 7px;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-bottom-width: 3px;
    border-radius: 6px;
    font: 600 12px var(--mono);
    text-align: center;
}
.pub-pad { display: none; justify-content: space-between; gap: 12px; margin-top: 12px; user-select: none; -webkit-user-select: none; }
.pub-pad-move { display: grid; grid-template: "left up right" 52px "left down right" 52px / 56px 56px 56px; gap: 7px; }
.pub-pad-hit { display: grid; grid-template-columns: repeat(2, 70px); grid-auto-rows: 52px; gap: 7px; }
.pub-pad button {
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-bottom-width: 4px;
    border-radius: 13px;
    font: 700 13px var(--sans);
    touch-action: none;
    cursor: pointer;
}
.pub-pad button.is-down { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (pointer: coarse), (max-width: 900px) {
    .pub-pad { display: flex; }
}
@media (max-width: 480px) {
    .pub-pad { gap: 8px; }
    .pub-pad-move { grid-template-columns: 46px 46px 46px; gap: 6px; }
    .pub-pad-hit { grid-template-columns: repeat(2, 62px); gap: 6px; }
}
/* Full screen: the fight covers everything. `is-turned` draws it on its side
   for a phone held upright that could not be switched to landscape. */
button.pub-full-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: rgba(0,0,0,.5);
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}
button.pub-full-btn:hover { background: rgba(0,0,0,.72); }
button.pub-full-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pub-full-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pub-full-out, .pub-full-btn[aria-pressed="true"] .pub-full-in { display: none; }
.pub-full-btn[aria-pressed="true"] .pub-full-out { display: inline; }
button.pub-sound-btn {
    position: absolute;
    right: 60px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: rgba(0,0,0,.5);
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}
button.pub-sound-btn:hover { background: rgba(0,0,0,.72); }
button.pub-sound-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pub-sound-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pub-snd-off, .pub-sound-btn[aria-pressed="true"] .pub-snd-on { display: none; }
.pub-sound-btn[aria-pressed="true"] .pub-snd-off { display: inline; }

html.pub-game-full, html.pub-game-full body { overflow: hidden; }
#brawl-play.is-full { position: fixed; inset: 0; z-index: 300; margin: 0; background: #120E1A; }
#brawl-play.is-full .pub-brawl-frame {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#brawl-play.is-full.is-turned .pub-brawl-frame {
    inset: auto;
    top: 0;
    left: 100%;
    width: 100vh;
    width: 100dvh;
    height: 100vw;
    transform-origin: 0 0;
    transform: rotate(90deg);
}
#brawl-play.is-full .pub-stage {
    width: min(100vw, 200vh);
    width: min(100vw, 200dvh);
    border-radius: 0;
}
#brawl-play.is-full.is-turned .pub-stage { width: min(100vh, 200vw); width: min(100dvh, 200vw); }
#brawl-play.is-full .pub-full-btn { left: 50%; right: auto; bottom: 10px; margin-left: -20px; }
#brawl-play.is-full .pub-sound-btn { left: 50%; right: auto; bottom: 10px; margin-left: 30px; }
/* controls float over the fight, in the corners */
#brawl-play.is-full .pub-pad {
    position: absolute;
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    margin: 0;
    align-items: flex-end;
    pointer-events: none;
}
#brawl-play.is-full .pub-pad > div { pointer-events: auto; opacity: .82; }
#brawl-play.is-full .pub-pad button { background: rgba(251,243,230,.92); }
#brawl-play.is-full .pub-pad button.is-down { background: var(--ink); }
#brawl-play.is-full #brawl-result,
#brawl-play.is-full #brawl-quit { display: none; }
#brawl-play.is-full .pub-brawl-end {
    position: absolute;
    left: 50%;
    bottom: 22%;
    width: min(440px, 80%);
    margin: 0;
    transform: translateX(-50%);
}

.pub-brawl-end { display: flex; gap: 10px; margin-top: 12px; }
.pub-brawl-end .pub-btn-primary { flex: 1; }
#brawl-play .pub-bj-result { margin-top: 12px; }
#brawl-quit { display: block; margin: 10px 0 0 auto; }

/* Draw & Guess: room list, then the board with players and chat beside it */
#draw-menu { display: flex; flex-direction: column; gap: 12px; }
#draw-menu .pub-btn-primary { max-width: 280px; }
.pub-draw { display: flex; flex-direction: column; gap: 12px; }
.pub-draw-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 46px;
    padding: 8px 14px;
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.pub-draw-clock { min-width: 3ch; font: 700 16px var(--mono); font-variant-numeric: tabular-nums; }
.pub-draw-clock.is-low { color: var(--rust-deep); }
.pub-draw-word { flex: 1; min-width: 0; font: 700 20px/1.2 var(--display); text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; }
body.pub-zh .pub-draw-word { font-family: var(--cn); }
.pub-draw-turn { font: 500 13px var(--sans); color: rgba(36,30,26,.6); white-space: nowrap; }
.pub-draw-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.pub-draw-stage {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
}
.pub-draw-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.pub-draw-stage.is-mine canvas { cursor: crosshair; }
.pub-draw-over {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px;
    background: color-mix(in srgb, var(--card) 86%, transparent);
    text-align: center;
}
.pub-draw-over .pub-pvp-waiting-text { white-space: pre-line; overflow-wrap: anywhere; }
.pub-draw-over .pub-pvp-waiting-text:empty { display: none; }
.pub-draw-over .pub-btn-primary { width: auto; padding-left: 32px; padding-right: 32px; }
.pub-draw-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pub-draw-choices button.pub-btn-quiet { padding: 12px 20px; font-size: 16px; }
.pub-draw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
.pub-draw-set { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pub-draw-swatch {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    cursor: pointer;
}
.pub-draw-swatch.is-on { border-color: var(--card); box-shadow: 0 0 0 2px var(--ink); }
.pub-draw-size {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    cursor: pointer;
}
.pub-draw-size i { display: block; border-radius: 50%; background: var(--ink); }
.pub-draw-size.is-on { border-color: var(--ink); background: var(--sand); }
.pub-draw-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pub-draw-players { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pub-draw-players li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--sand);
    border: 1px solid transparent;
    border-radius: 8px;
    font: 600 13.5px var(--sans);
}
.pub-draw-players li.is-you { border-color: var(--line-strong); }
.pub-draw-players li.is-got { background: color-mix(in srgb, var(--green) 14%, var(--card)); }
.pub-draw-players i { flex: none; width: 18px; font-style: normal; text-align: center; color: var(--green); }
.pub-draw-players span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-draw-players b { font: 600 13px var(--mono); font-variant-numeric: tabular-nums; }
.pub-draw-chat {
    height: 220px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font: 13.5px/1.45 var(--sans);
    overflow-wrap: anywhere;
}
.pub-draw-chat b { font-weight: 600; }
.pub-draw-chat p.is-sys { font-weight: 600; color: color-mix(in srgb, var(--green) 80%, var(--ink)); }
.pub-draw-form { display: flex; gap: 8px; }
.pub-draw-form .pub-input { flex: 1; min-width: 0; }
.pub-draw-form button.pub-btn-primary { width: auto; flex: none; padding: 8px 16px; }
#draw-leave { display: block; margin: 0 0 0 auto; }
@media (max-width: 900px) {
    .pub-draw-layout { grid-template-columns: minmax(0, 1fr); }
    .pub-draw-chat { height: 150px; }
}

.pub-practice { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.pub-practice p { font: 13.5px/1.5 var(--sans); color: rgba(36,30,26,.6); margin-bottom: 12px; }
.pub-practice-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-practice-levels button { flex: 1; min-width: 90px; }
.pub-game {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px;
}
.pub-game h2 { font: 800 22px/1.15 var(--display); letter-spacing: -.02em; }
body.pub-zh .pub-game h2 { font-family: var(--cn); letter-spacing: 0; }
.pub-game-head p { font: 13.5px/1.55 var(--sans); color: rgba(36,30,26,.6); margin-top: 4px; }
.pub-game-note { font: 13px var(--sans); color: rgba(36,30,26,.55); text-align: center; }
.pub-game button:disabled { opacity: .45; cursor: not-allowed; }

/* Prize wheel — the hub is the Spin button. */
.pub-wheel-wrap {
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 1;
    margin: 6px auto 0;
}
.pub-wheel { display: block; width: 100%; height: 100%; filter: drop-shadow(0 10px 18px rgba(36,30,26,.14)); }
.pub-wheel-disc { transform-origin: 0 0; transition: transform 4.2s cubic-bezier(.12, .62, .1, 1); }
.pub-wheel-slice { stroke: var(--line-strong); stroke-width: .6; }
.pub-wheel-slice.is-plain-a { fill: var(--card); }
.pub-wheel-slice.is-plain-b { fill: var(--sand); }
.pub-wheel-slice.is-plain-c { fill: #F1E8DC; }
.pub-wheel-slice.is-jackpot { fill: var(--rust); }
.pub-wheel-slice.is-multiplier { fill: var(--violet); }
.pub-wheel-rim { fill: none; stroke: var(--ink); stroke-width: 3; }
.pub-wheel-label { font: 700 11px var(--mono); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.pub-wheel-label.is-light { fill: #fff; }
.pub-wheel-label.is-emoji { font-size: 15px; }
.pub-wheel-label.is-narrow { font-size: 6px; }
.pub-wheel-pointer {
    position: absolute;
    top: -6px;
    left: 50%;
    z-index: 2;
    width: 0;
    height: 0;
    margin-left: -11px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 22px solid var(--ink);
}
button.pub-wheel-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 27%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 4px solid var(--card);
    border-radius: 50%;
    background: var(--violet);
    color: #fff;
    font: 700 16px var(--sans);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(36,30,26,.25);
    transition: background .15s, transform .12s;
}
button.pub-wheel-hub:hover:not(:disabled) { background: #5a3ecf; }
button.pub-wheel-hub:active:not(:disabled) { transform: translate(-50%, -50%) scale(.96); }
button.pub-wheel-hub:disabled { opacity: 1; background: #b9aee8; }
.pub-spin-text { font: 700 18px/1.3 var(--display); text-align: center; min-height: 1.3em; }
body.pub-zh .pub-spin-text { font-family: var(--cn); }
.pub-spin-text.is-error { font: 500 14px var(--sans); color: var(--rust-deep); }

.pub-odds { border-top: 1px solid var(--line); padding-top: 12px; font: 13px var(--sans); }
.pub-odds summary { cursor: pointer; color: rgba(36,30,26,.65); font-weight: 500; width: fit-content; }
.pub-odds ul { list-style: none; margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; }
.pub-odds li { display: flex; justify-content: space-between; gap: 10px; color: rgba(36,30,26,.75); }
.pub-odds li span:last-child { font-family: var(--mono); font-size: 12px; color: rgba(36,30,26,.5); }

/* Blackjack table */
.pub-felt {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 14px;
    background: var(--felt);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 40px rgba(0,0,0,.18);
    color: #fff;
}
.pub-felt-who { display: flex; align-items: baseline; gap: 8px; font: 500 13px var(--sans); color: rgba(255,255,255,.75); margin-bottom: 8px; }
.pub-felt-who b { font: 700 15px var(--mono); color: #fff; min-width: 1.4em; }
.pub-bj-cards { display: flex; flex-wrap: wrap; gap: 8px; min-height: 84px; }
.pub-bj-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 84px;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 3px 8px rgba(0,0,0,.28);
}
.pub-bj-card i { position: absolute; top: 5px; left: 7px; font: 700 15px/1 var(--mono); font-style: normal; }
.pub-bj-card b { font-size: 30px; line-height: 1; font-weight: 400; }
.pub-bj-card.is-red { color: var(--rust); }
.pub-bj-card.is-back {
    border: 3px solid #fff;
    background: repeating-linear-gradient(45deg, var(--violet) 0 6px, #8468ea 6px 12px);
}
.pub-bj-card.is-new { animation: pub-deal-kf .32s cubic-bezier(.2, .8, .3, 1) backwards; }
.pub-bj-card.is-flip { animation: pub-flip-kf .36s ease-out backwards; }
@keyframes pub-deal-kf {
    from { opacity: 0; transform: translate(46px, -34px) rotate(9deg); }
}
@keyframes pub-flip-kf {
    from { transform: rotateY(90deg); }
}
.pub-bj-result {
    border-radius: 10px;
    padding: 10px 14px;
    font: 700 15px var(--sans);
    background: rgba(255,255,255,.14);
    color: #fff;
}
.pub-bj-result:empty { display: none; }
.pub-bj-result.is-win { background: #fff; color: color-mix(in srgb, var(--green) 80%, var(--ink)); }
.pub-bj-result.is-lose { background: rgba(0,0,0,.24); }

.pub-bj-actions { display: flex; gap: 10px; }
.pub-bj-actions button { flex: 1; padding-top: 14px; padding-bottom: 14px; }
button.pub-btn-quiet {
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    padding: 11px 14px;
    font: 600 14px var(--sans);
    cursor: pointer;
    transition: border-color .15s, transform .12s;
}
button.pub-btn-quiet:hover { border-color: var(--ink); }
button.pub-btn-quiet:active { transform: translateY(1px); }

.pub-bj-bet { display: flex; flex-direction: column; gap: 14px; }
.pub-stake { display: flex; align-items: baseline; gap: 12px; }
.pub-stake-l { font: 500 13px var(--sans); color: rgba(36,30,26,.6); }
.pub-stake b { font: 800 30px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
button.pub-link-btn {
    margin-left: auto;
    background: none;
    border: none;
    padding: 4px 2px;
    font: 500 13px var(--sans);
    color: var(--rust-deep);
    cursor: pointer;
}
button.pub-link-btn:hover { color: var(--rust); }
.pub-chips { display: flex; flex-wrap: wrap; gap: 10px; }
button.pub-chip {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px dashed rgba(255,255,255,.75);
    background: var(--chip, var(--ink));
    box-shadow: 0 0 0 3px var(--chip, var(--ink)), 0 4px 8px rgba(36,30,26,.18);
    color: #fff;
    font: 700 13px var(--mono);
    cursor: pointer;
    transition: transform .12s;
}
button.pub-chip:hover:not(:disabled) { transform: translateY(-3px); }
button.pub-chip:active:not(:disabled) { transform: translateY(0); }
.pub-chip[data-chip="10"] { --chip: #8A7F74; }
.pub-chip[data-chip="50"] { --chip: var(--rust); }
.pub-chip[data-chip="100"] { --chip: var(--green); }
.pub-chip[data-chip="500"] { --chip: var(--violet); }
.pub-chip[data-chip="1000"] { --chip: var(--ink); }
.pub-bj-bet .pub-hint { margin-top: -4px; }

/* Signed-out teaser */
.pub-games-out {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    align-items: center;
    padding: 34px 0 20px;
}
.pub-games-out .pub-page-lead { margin-bottom: 22px; }
.pub-games-out-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 640px;
}
.pub-games-out-list li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.pub-games-out-icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--sand);
    font-size: 21px;
}
.pub-games-out-list b { font: 700 15px/1.3 var(--sans); color: var(--ink); }
.pub-games-out-list li > span:last-child { font: 13.5px/1.45 var(--sans); color: rgba(36,30,26,.65); }
.pub-games-art { position: relative; width: 300px; height: 260px; }
.pub-games-art-wheel {
    position: absolute;
    left: 0;
    top: 0;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 5px solid var(--ink);
    background: conic-gradient(var(--rust) 0 36deg, var(--card) 0 72deg, var(--sand) 0 108deg, var(--card) 0 144deg,
        var(--violet) 0 180deg, var(--sand) 0 216deg, var(--card) 0 252deg, var(--sand) 0 288deg, var(--card) 0 324deg, var(--sand) 0);
    box-shadow: 0 12px 22px rgba(36,30,26,.14);
}
.pub-games-art .pub-bj-card { position: absolute; bottom: 0; box-shadow: 0 6px 14px rgba(36,30,26,.2); border: 1px solid var(--line); }
.pub-games-art .pub-bj-card:nth-of-type(2) { right: 52px; transform: rotate(-8deg); }
.pub-games-art .pub-bj-card:nth-of-type(3) { right: 0; transform: rotate(7deg); }

@media (max-width: 900px) {
    .pub-games-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .pub-games-side { position: static; gap: 14px; }
    /* The sidebar folds into a tab bar with the balances on one line. */
    .pub-games-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    body.pub a.pub-games-tab {
        flex: 1 1 30%;
        min-width: 0;
        flex-direction: column;
        gap: 2px;
        padding: 9px 6px;
        background: var(--card);
        border: 1px solid var(--line);
        font-size: 12.5px;
        line-height: 1.25;
        text-align: center;
    }
    body.pub a.pub-games-tab.is-on { border-color: var(--ink); }
    .pub-games-tab-note { margin-left: 0; font-size: 11px; min-height: 1.25em; }
    .pub-purse { flex-direction: row; gap: 26px; border-top: none; padding-top: 0; }
    .pub-purse-item { justify-content: flex-start; }
    .pub-spin-layout,
    .pub-bj-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .pub-spin-info .pub-spin-text,
    .pub-spin-info .pub-game-note { text-align: center; }
    .pub-duel-moves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pub-stage { aspect-ratio: 4 / 3.3; }
    .pub-hud { inset: 10px 10px auto 10px; gap: 8px; }
    .pub-hud-clock b { width: 42px; height: 42px; font-size: 17px; }
    #brawl-play .pub-hud-clock b { width: 44px; height: 44px; font-size: 19px; }
    #brawl-play .pub-hud-side { grid-template-columns: 40px minmax(0, 1fr); column-gap: 7px; }
    #brawl-play .pub-hud-side.is-them { grid-template-columns: minmax(0, 1fr) 40px; }
    #brawl-play .pub-hud-face { width: 40px; height: 40px; }
    #brawl-play .pub-hp { height: 22px; }
    #brawl-play .pub-hud-name { font-size: 13px; }
    .pub-meter i { width: 15px; }
    .pub-fighter { left: 9%; width: 30%; }
    .pub-fighter.is-them { right: 9%; }
    .pub-games-out { grid-template-columns: minmax(0, 1fr); }
    .pub-games-out-list { grid-template-columns: minmax(0, 1fr); }
    .pub-games-art { display: none; }
    /* Keep Hit / Stand under the thumb while the cards scroll above. */
    .pub-bj-actions {
        position: sticky;
        bottom: 10px;
        z-index: 5;
        padding: 8px;
        margin: 0 -8px;
        border-radius: 14px;
        background: var(--card);
        box-shadow: 0 6px 20px rgba(36,30,26,.16);
    }
}
@media (max-width: 480px) {
    .pub-game { padding: 16px; }
    .pub-felt { padding: 14px; }
    .pub-bj-card { width: 52px; height: 74px; }
    .pub-bj-cards { min-height: 74px; }
    .pub-odds ul { grid-template-columns: 1fr; }
    button.pub-chip { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
    .pub-wheel-disc { transition: none; }
    .pub-bj-card.is-new,
    .pub-bj-card.is-flip { animation: none; }
    .f-body, .f-arm, .f-leg, .f-head, .pub-fighter.is-down .f-body { transition: none; }
    .f-bob, .pub-fighter.is-tired .f-bob, .pub-fighter.is-lose .f-bob,
    .pub-fighter.is-win .f-body, .pub-fighter.pose-special .f-body, .pub-fighter.pose-special .f-wave,
    .pub-fighter.is-thrown, .pub-stage.is-ko::after,
    .pub-fighter.is-hurt, .pub-stage.is-shake, .pub-meter.is-full i,
    .pub-spark.is-on, .pub-fighter-hit.is-on { animation: none; }
}

/* ── Moments ─────────────────────────────────────────── */
/* Feed on the left, side panel (post box, who's posting) on the right. The
   panel is first in the markup so on a phone it lands above the feed. */
.pub-moments { max-width: 1060px; }
.pub-moments .pub-alert { margin-bottom: 0; }
.pub-moments-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 316px;
    grid-template-areas: "main side";
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}
.pub-moments-main { grid-area: main; min-width: 0; }
.pub-moments-side {
    grid-area: side;
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.pub-moment-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: 16px;
}
.pub-moment-note { font: 13.5px/1.55 var(--sans); color: rgba(36,30,26,.6); }
body.pub a.pub-moment-login { margin-top: 12px; padding: 10px 16px; font-size: 14px; }

/* Post box */
.pub-moment-compose-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.pub-moment-add {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    padding: 9px 12px;
    font: 600 13px var(--sans);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.pub-moment-add:hover { border-color: var(--violet); background: var(--sand); }
.pub-moment-add svg { width: 16px; height: 16px; }
.pub-moment-picked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pub-moment-picked[hidden] { display: none; }
.pub-moment-picked img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
}

/* Who's posting: click a name to see only their moments */
.pub-moment-people { display: flex; flex-direction: column; gap: 2px; }
body.pub a.pub-moment-person {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 10px;
    font: 600 13.5px var(--sans);
    transition: background .12s;
}
body.pub a.pub-moment-person:hover { background: var(--sand); }
body.pub a.pub-moment-person.is-on { background: rgba(109,76,224,.1); color: var(--violet); }
.pub-moment-person-av {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #EFE7DC;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 12px var(--display);
    color: rgba(36,30,26,.5);
    text-transform: uppercase;
}
.pub-moment-person-av img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pub-moment-person-av svg { width: 15px; height: 15px; }
.pub-moment-person-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-moment-person-n { font: 500 11.5px var(--mono); color: rgba(36,30,26,.45); }
.pub-moment-dot {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--card);
}

/* "Showing Ana's moments" above a filtered feed */
.pub-moment-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    font: 600 13.5px var(--sans);
}
body.pub .pub-moment-filter a { color: var(--violet); white-space: nowrap; }
body.pub .pub-moment-filter a:hover { text-decoration: underline; }

/* One post = one card: who and when, the post, action bar, likes and comments */
.pub-moment-feed { display: flex; flex-direction: column; gap: 14px; }
.pub-moment {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 15px;
}
.pub-moment-head { display: flex; align-items: center; gap: 11px; padding: 16px 16px 0; }
.pub-moment-av {
    position: relative;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #EFE7DC;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 15px var(--display);
    color: rgba(36,30,26,.5);
    text-transform: uppercase;
}
.pub-moment-av img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pub-moment-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pub-moment-name {
    font: 700 14.5px/1.35 var(--sans);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.pub a.pub-moment-name:hover { color: var(--violet); }
.pub-moment-time { font: 12px/1.4 var(--sans); color: rgba(36,30,26,.5); }

/* The "..." menu on your own post (or any post, for a moderating admin) */
.pub-moment-menu { position: relative; flex: none; }
.pub-moment-menu summary {
    list-style: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(36,30,26,.45);
}
.pub-moment-menu summary::-webkit-details-marker { display: none; }
.pub-moment-menu summary:hover,
.pub-moment-menu[open] summary { background: var(--sand); color: var(--ink); }
.pub-moment-menu summary svg { width: 18px; height: 18px; }
.pub-moment-menu form {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    min-width: 130px;
    padding: 5px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(36,30,26,.12);
}
.pub-moment-menu form button {
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
    font: 600 13px var(--sans);
    color: var(--rust-deep);
}
.pub-moment-menu form button:hover { background: rgba(176,74,46,.08); }

.pub-moment-body {
    padding: 12px 16px 0;
    font: 15px/1.6 var(--sans);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.pub-moment-imgs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 12px 16px 0;
    max-width: 480px;
}
.pub-moment-imgs.is-two { grid-template-columns: repeat(2, 1fr); max-width: 360px; }
.pub-moment-imgs.is-one { grid-template-columns: 1fr; max-width: 340px; }
.pub-moment-imgs a { display: block; cursor: zoom-in; }
.pub-moment-imgs img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid var(--line);
}
.pub-moment-imgs.is-one img { aspect-ratio: auto; max-height: 400px; }

/* Action bar: Like | Comment, each half the width of the card */
.pub-moment-bar { display: flex; margin-top: 14px; border-top: 1px solid var(--line); }
.pub-moment-act,
body.pub a.pub-moment-act {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 8px;
    border: none;
    background: none;
    font: 600 13px var(--sans);
    color: rgba(36,30,26,.6);
    transition: background .12s, color .12s;
}
.pub-moment-act + .pub-moment-act,
body.pub a.pub-moment-act + a.pub-moment-act { border-left: 1px solid var(--line); }
.pub-moment-act:first-child { border-bottom-left-radius: 14px; }
.pub-moment-act:last-child { border-bottom-right-radius: 14px; }
button.pub-moment-act, a.pub-moment-act { cursor: pointer; }
button.pub-moment-act:hover,
body.pub a.pub-moment-act:hover { background: var(--sand); color: var(--ink); }
.pub-moment-act svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.pub-moment-act b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pub-moment-act b:empty { display: none; }
.pub-moment-act.is-on,
button.pub-moment-act.is-on:hover { color: var(--rust); }
.pub-moment-act.is-on svg { fill: currentColor; }

/* Likes and comments, in the foot of the card */
.pub-moment-social {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px 14px;
    background: var(--sand);
    border-top: 1px solid var(--line);
    border-radius: 0 0 14px 14px;
}
.pub-moment-likers {
    display: flex;
    gap: 7px;
    font: 600 13px/1.5 var(--sans);
    color: var(--violet);
    overflow-wrap: anywhere;
}
.pub-moment-likers[hidden],
.pub-moment-social[hidden],
.pub-moment-reply[hidden] { display: none; }
.pub-moment-likers svg { flex: none; width: 14px; height: 14px; margin-top: 3px; fill: var(--rust); }
.pub-moment-comments { display: flex; flex-direction: column; gap: 4px; }
.pub-moment-comments:empty { display: none; }
.pub-moment-comment { font: 13.5px/1.5 var(--sans); overflow-wrap: anywhere; }
.pub-moment-comment b { font-weight: 600; color: var(--violet); margin-right: 6px; }
.pub-moment-comment i { font-style: normal; color: rgba(36,30,26,.5); margin-right: 6px; }
.pub-moment-comment-more { font: 12px var(--sans); color: rgba(36,30,26,.45); }
/* someone else's comment: click it to reply */
.pub-moment-comment[data-reply-to] {
    margin: 0 -6px;
    padding: 1px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s;
}
.pub-moment-comment[data-reply-to]:hover,
.pub-moment-comment[data-reply-to]:focus-visible { background: rgba(36,30,26,.06); outline: none; }
.pub-moment-comment-del {
    border: none;
    background: none;
    padding: 0 2px;
    margin-left: 6px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    color: rgba(36,30,26,.35);
}
.pub-moment-comment-del:hover { color: var(--rust-deep); }
.pub-moment-reply { display: flex; flex-direction: column; gap: 6px; }
.pub-moment-reply-row { display: flex; gap: 8px; }
.pub-moment-reply .pub-input { background: var(--card); padding: 8px 11px; font-size: 13.5px; }
.pub-moment-replying {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 600 12px var(--sans);
    color: var(--violet);
    overflow-wrap: anywhere;
}
.pub-moment-replying[hidden] { display: none; }
.pub-moment-replying button {
    border: none;
    background: none;
    padding: 0 2px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    color: rgba(36,30,26,.4);
}
.pub-moment-replying button:hover { color: var(--rust-deep); }
.pub-moment-send {
    border: none;
    border-radius: 9px;
    background: var(--ink);
    color: #fff;
    padding: 0 14px;
    font: 600 13px var(--sans);
    white-space: nowrap;
    cursor: pointer;
}
.pub-moment-send:disabled { opacity: .5; cursor: default; }

/* "Load more" under the feed; fetched on its own as it scrolls into view */
body.pub a.pub-moment-more {
    display: block;
    margin-top: 14px;
    padding: 12px;
    text-align: center;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--card);
    font: 600 13px var(--sans);
    color: rgba(36,30,26,.7);
}
body.pub a.pub-moment-more:hover { border-color: var(--ink); color: var(--ink); }
.pub-moment-more.is-loading { opacity: .5; pointer-events: none; }
.pub-moments .pub-empty p { margin-bottom: 0; }

/* Full-screen photo viewer (Moments and companion galleries) */
body.pub-viewer-open { overflow: hidden; }
.pub-viewer {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20,16,13,.92);
    touch-action: pan-y;
}
.pub-viewer[hidden] { display: none; }
.pub-viewer img {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    object-fit: contain;
    border-radius: 6px;
    user-select: none;
}
.pub-viewer-btn {
    position: absolute;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}
.pub-viewer-btn:hover { background: rgba(255,255,255,.28); }
.pub-viewer-close { top: 16px; right: 16px; }
.pub-viewer-prev { left: 16px; top: 50%; margin-top: -22px; }
.pub-viewer-next { right: 16px; top: 50%; margin-top: -22px; }
.pub-viewer.is-single .pub-viewer-prev,
.pub-viewer.is-single .pub-viewer-next { display: none; }
.pub-viewer-count {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    text-align: center;
    font: 500 12px var(--mono);
    color: rgba(255,255,255,.75);
    pointer-events: none;
}

/* One column: the side panel stacks above the feed, and the list of
   companions becomes a row you can swipe sideways. */
@media (max-width: 900px) {
    .pub-moments-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "main"; gap: 14px; }
    .pub-moments-side { position: static; }
    .pub-moment-people {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        /* room for the status dots, which hang past the avatars */
        padding: 2px 2px 5px;
        scrollbar-width: none;
    }
    .pub-moment-people::-webkit-scrollbar { display: none; }
    body.pub a.pub-moment-person {
        flex: none;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 4px 12px 4px 4px;
        gap: 8px;
    }
    body.pub a.pub-moment-person.is-on { border-color: var(--violet); }
    .pub-moment-person-av { width: 28px; height: 28px; border-radius: 50%; }
    .pub-moment-person-name { flex: none; max-width: 120px; }
}
@media (max-width: 560px) {
    .pub-moment-head { padding: 14px 13px 0; }
    .pub-moment-body { padding: 11px 13px 0; }
    .pub-moment-imgs { margin: 11px 13px 0; }
    .pub-moment-social { padding: 11px 13px 13px; }
}

/* ── Photo crop sheet (photo-tools.js) ── */
html.ph-crop-open { overflow: hidden; }
.ph-crop {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(20,16,14,.72);
}
.ph-crop-box {
    width: min(520px, 100%);
    max-height: 100%;
    overflow: auto;
    display: flex; flex-direction: column; gap: 14px;
    background: var(--card);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.ph-crop-title { font: 800 18px var(--display); color: var(--ink); }
body.pub-zh .ph-crop-title { font-family: var(--cn); }
.ph-crop-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #1d1916;
    touch-action: none;
    cursor: grab;
    -webkit-user-select: none; user-select: none;
}
.ph-crop-stage:active { cursor: grabbing; }
.ph-crop-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
/* avatar: dim everything outside the circle that will show */
.ph-crop-stage.is-round::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 999px rgba(20,16,14,.55);
    outline: 2px solid rgba(255,255,255,.8);
    pointer-events: none;
}
.ph-crop-hint { font: 12.5px/1.4 var(--sans); color: rgba(36,30,26,.55); text-align: center; }
.ph-crop-zoom { width: 100%; accent-color: var(--violet); }
.ph-crop-actions { display: flex; justify-content: flex-end; gap: 10px; }
.ph-crop-actions button {
    border-radius: 10px;
    padding: 11px 20px;
    font: 600 14px var(--sans);
    cursor: pointer;
}
.ph-crop-cancel { border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); }
.ph-crop-use { border: none; background: var(--violet); color: #fff; }
.ph-crop-use:disabled { opacity: .6; cursor: default; }

/* ── VIP show-off for others to see (the "show to others" switch) ── */
body.pub .pub-vip-user { color: var(--vip-solid); font-weight: 700; }
body.pub .pub-vip-tagged { font-family: inherit; font-size: inherit; line-height: inherit; }
/* name and badge in one row: the name shortens with "…", the badge stays whole */
.pub-vip-tagged { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.pub-vip-tagged > .pub-vip-user-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-vip-tagged > .pub-vip-chip { flex: none; margin: 0; }
/* the row keeps its own look inside boxes that style every span (e.g. the gift wall) */
.pub-vip-tagged > .pub-vip-user-name { font: inherit; color: inherit; display: block; }
.pub-vip-tagged > .pub-vip-chip { font: 700 10.5px/1.7 var(--sans); color: var(--vip-fg); letter-spacing: .01em; display: inline-flex; }
/* in running text (comments, gift feed) the row sits on the text's line */
.pub-moment-comment .pub-vip-tagged, .pub-gift-row-body .pub-vip-tagged { vertical-align: bottom; }
/* the top level's name shines — the name, not its badge */
body.pub .pub-vip-user.is-top > .pub-vip-user-name {
    background: linear-gradient(90deg, var(--vip-solid), color-mix(in srgb, var(--vip-solid) 45%, #fff), var(--vip-solid));
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: vip-shine 3s linear infinite;
}
@keyframes vip-shine { to { background-position: -200% 0; } }
/* profile page: the badge beside the big name */
.pub-vip-chip.pub-vip-chip-lg { align-self: center; margin: 0; padding: 3px 11px; font-size: 13px; }

/* Draw & Guess: a VIP walking into the room */
.pub-draw-chat p.pub-vip-entrance {
    margin: 4px 0;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--vip-bg);
    background-size: 200% 100%;
    color: var(--vip-fg);
    font-weight: 700;
    animation: vip-sweep 1.6s ease-out 1;
}
@keyframes vip-sweep {
    from { transform: translateX(-12px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* own avatar in the top bar: a ring in the level's colour */

@media (prefers-reduced-motion: reduce) {
    body.pub .pub-vip-user.is-top > .pub-vip-user-name, .pub-draw-chat p.pub-vip-entrance,
    .pub-vl-rail i, .vip-frame-top::before { animation: none; }
}

/* ── VIP page: a ladder of your own name, highest level first ── */
/* One centred column, like My orders: cards this narrow left-aligned in the
   1240px wrap leave the right of a desktop screen empty. */
.pub-wrap.pub-vl { max-width: 880px; }
.pub-vl > * { max-width: none; }
.pub-vl-you {
    margin-top: 28px;
    padding: 26px 28px 24px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    --frame-gap: var(--card);
}
.pub-vl-you-name {
    font: 800 clamp(30px, 6vw, 46px)/1.1 var(--display);
    letter-spacing: -.025em;
    color: var(--ink);
    min-width: 0;
}
body.pub-zh .pub-vl-you-name { font-family: var(--cn); letter-spacing: 0; }
.pub-vl-you .pub-vip-tagged { gap: 14px; }
.pub-vl-you .pub-vip-tagged > .pub-vip-chip { font-size: 15px; padding: 2px 12px 2px 10px; letter-spacing: 0; }
.pub-vl-you-line { margin-top: 18px; max-width: 60ch; font: 16px/1.55 var(--sans); color: rgba(36,30,26,.75); }
.pub-vl-given { color: rgba(36,30,26,.5); }

/* where you stand: one stop per level, the line filled up to you */
.pub-vl-track { position: relative; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.pub-vl-track ol { list-style: none; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.pub-vl-rail {
    position: absolute;
    top: 24px;
    left: calc(100% / var(--n) / 2);
    right: calc(100% / var(--n) / 2);
    height: 3px;
    border-radius: 99px;
    background: var(--line);
}
.pub-vl-rail i {
    display: block;
    width: var(--fill);
    height: 100%;
    border-radius: inherit;
    background: var(--vip-solid, var(--ink));
    animation: vl-fill .9s cubic-bezier(.2, .7, .2, 1) .15s both;
}
@keyframes vl-fill { from { width: 0; } }
.pub-vl-track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.pub-vl-stop {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--card);
    box-shadow: inset 0 0 0 2px var(--line-strong);
}
.pub-vl-track li.is-reached .pub-vl-stop { background: var(--vip-bg); box-shadow: none; }
.pub-vl-track li.is-current .pub-vl-stop { box-shadow: 0 0 0 4px var(--card), 0 0 0 6px var(--vip-solid); }
.pub-vl-stop-name {
    max-width: 100%;
    font: 600 12px var(--sans);
    color: rgba(36,30,26,.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pub-vl-track li.is-reached .pub-vl-stop-name { color: var(--vip-solid); }

/* the ladder */
.pub-vl-ladder { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.pub-vl-row {
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    --frame-gap: var(--card);
}
/* name and where you stand, on a wash of the level's colour */
.pub-vl-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    padding: 14px 22px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--vip-solid, var(--line)) 10%, var(--card)), var(--card) 75%);
}
.pub-vl-row-name { min-width: 0; font: 700 18px/1.3 var(--sans); color: var(--ink); }
.pub-vl-row-name .pub-vip-tagged > .pub-vip-chip { font-size: 11.5px; }
.pub-vl-row-meta {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    font: 13px/1.3 var(--sans);
    color: rgba(36,30,26,.55);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pub-vl-status {
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--sand);
    box-shadow: inset 0 0 0 1px var(--line);
    font: 700 12.5px/1.4 var(--sans);
    color: rgba(36,30,26,.7);
}
.pub-vl-status.is-reached {
    background: color-mix(in srgb, var(--vip-solid) 12%, var(--card));
    box-shadow: none;
    color: var(--vip-solid);
}
.pub-vl-status.is-current { background: var(--vip-bg, var(--vip-solid)); box-shadow: none; color: #fff; }
/* what this level adds, as chips under the name */
.pub-vl-row-adds {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 22px 16px 80px;
    border-top: 1px solid var(--line);
    font: 13.5px/1.4 var(--sans);
    color: rgba(36,30,26,.8);
}
.pub-vl-row-adds li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vip-solid, var(--line-strong)) 8%, var(--card));
}
.pub-vl-row-adds li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vip-solid, var(--line-strong));
}
.pub-vl-row.is-locked { background: transparent; }
.pub-vl-row.is-locked .pub-vl-row-head { background: none; }
.pub-vl-row.is-locked .pub-vl-row-name, .pub-vl-row.is-locked .pub-vl-row-adds { opacity: .55; }
.pub-vl-row.is-current {
    border-color: var(--vip-solid);
    box-shadow: 0 0 0 1px var(--vip-solid), 0 6px 20px color-mix(in srgb, var(--vip-solid) 12%, transparent);
}
.pub-vl-row.is-current .pub-vl-row-head {
    background: linear-gradient(90deg, color-mix(in srgb, var(--vip-solid) 16%, var(--card)), var(--card) 80%);
}

@media (max-width: 520px) {
    .pub-vl-you { padding: 20px 18px; }
    .pub-vl-row-head { flex-wrap: wrap; padding: 12px 16px; }
    .pub-vl-row-meta { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
    .pub-vl-row-adds { padding: 12px 16px 14px; }
    .pub-vl-stop-name { font-size: 11px; }
}

/* ── Avatar frame (the VIP page's "frame from" level and up) ──
   A ring in the level's colour drawn just outside the avatar, following its
   shape (--fr: the avatar's corner radius). Two levels on: a double ring and
   a gem under the avatar. Top level: the ring's shine turns slowly. */
@property --vip-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.vip-frame { position: relative; --fr: 50%; --gem: 10px; }
.vip-frame::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: calc(var(--fr) + 4px);
    border: 2px solid var(--vip-solid);
    pointer-events: none;
    z-index: 1;
}
.vip-frame-2::before {
    inset: -7px;
    border-radius: calc(var(--fr) + 7px);
    border: 5px double var(--vip-solid);
}
.vip-frame-top::before {
    inset: -5px;
    border-radius: calc(var(--fr) + 5px);
    border: 0;
    padding: 3px;
    background: conic-gradient(from var(--vip-a), var(--vip-solid), color-mix(in srgb, var(--vip-solid) 30%, #fff),
                var(--vip-solid), color-mix(in srgb, var(--vip-solid) 30%, #fff), var(--vip-solid));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: vip-frame-turn 5s linear infinite;
}
@keyframes vip-frame-turn { to { --vip-a: 360deg; } }
.vip-frame-2::after, .vip-frame-top::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(var(--gem) * -1);
    width: var(--gem);
    height: var(--gem);
    transform: translateX(-50%) rotate(45deg);
    border-radius: 2px;
    background: var(--vip-bg);
    box-shadow: 0 0 0 2px var(--frame-gap, var(--card));
    pointer-events: none;
    z-index: 2;
}
/* the avatars' own shapes */
.pub-moment-av.vip-frame { --fr: 11px; }
.pub-avatar-wrap.vip-frame { --fr: 12px; }
.pub-profile-avatar-wrap.vip-frame { --gem: 14px; }
/* The online / idle dot stays on top of the frame, centred on the ring where
   it turns the corner; its own white edge cuts a clean gap in the ring. */
.vip-frame > .pub-dot, .vip-frame > .pub-moment-dot { z-index: 3; }
.pub-avatar-wrap.vip-frame > .pub-dot { right: -7px; bottom: -7px; }
.pub-profile-avatar-wrap.vip-frame > .pub-dot { right: 6px; bottom: 6px; }
/* Small avatars (Moments posts, gift wall, reviews) sit right beside a name,
   so their frame is drawn inside the avatar's own box: the photo shrinks a
   little and nothing around it moves — every post's name lines up the same,
   framed or not. Rings only, no gem. */
.pub-moment-av.vip-frame, .pub-review-av.vip-frame { padding: 4px; background-clip: content-box; }
.pub-moment-av.vip-frame-2, .pub-review-av.vip-frame-2,
.pub-moment-av.vip-frame-top, .pub-review-av.vip-frame-top { padding: 5px; }
.pub-moment-av.vip-frame::before, .pub-review-av.vip-frame::before { inset: 0; border-radius: var(--fr); }
.pub-moment-av.vip-frame-2::before, .pub-review-av.vip-frame-2::before { border-width: 4px; }
.pub-moment-av.vip-frame-top::before, .pub-review-av.vip-frame-top::before { padding: 2.5px; }
.pub-moment-av.vip-frame::after, .pub-review-av.vip-frame::after { content: none; }
.pub-moment-av.vip-frame img { border-radius: calc(var(--fr) - 4px); }

/* VIP page: your face with the frame each level gives */
.pub-vl-you-head { display: flex; align-items: center; gap: 22px; min-width: 0; }
.pub-vl-face {
    position: relative;
    flex: none;
    width: 36px;
    height: 36px;
    margin-right: 18px;
    border-radius: 50%;
    background: #EFE7DC;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 12px var(--display);
    color: rgba(36,30,26,.5);
    text-transform: uppercase;
    --gem: 7px;
}
.pub-vl-face img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pub-vl-face.pub-vl-face-lg { width: 64px; height: 64px; margin-right: 0; font-size: 24px; --gem: 12px; }
.pub-vl-row-name { display: flex; align-items: center; padding: 4px 0 6px 4px; }

/* ── My orders ───────────────────────────────────────── */
/* One centred column: a list this narrow left-aligned in the 1240px wrap
   leaves the right half of a desktop screen empty. */
.pub-wrap.pub-orders { max-width: 880px; }
.pub-orders h1, .pub-orders .pub-page-lead, .pub-orders .pub-vip-signin { max-width: none; }
.pub-orders-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 22px;
}
body.pub .pub-orders-tabs a {
    padding: 7px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--card);
    font: 600 13px var(--sans);
    white-space: nowrap;
}
body.pub .pub-orders-tabs a:hover { border-color: var(--ink); }
body.pub .pub-orders-tabs a.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.pub-orders-tabs span { margin-left: 4px; font: 500 11px var(--mono); opacity: .6; }
.pub-orders-list {
    list-style: none;
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    overflow: hidden;
}
.pub-order-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
}
.pub-order-row + .pub-order-row { border-top: 1px solid var(--line); }
.pub-order-row .pub-code { width: 34px; height: 34px; border-radius: 9px; font-size: 10px; }
.pub-order-main { flex: 1; min-width: 0; }
.pub-order-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.pub-order-head b { font: 700 15px/1.3 var(--sans); }
.pub-order-id { font: 500 12px var(--mono); color: rgba(36,30,26,.45); }
.pub-order-status {
    padding: 1px 8px;
    border-radius: 999px;
    font: 600 11.5px var(--sans);
    color: var(--green);
    background: color-mix(in srgb, var(--green) 12%, transparent);
}
.pub-order-row.is-cancelled .pub-order-status { color: rgba(36,30,26,.55); background: rgba(36,30,26,.07); }
.pub-order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin-top: 3px;
    font: 13px/1.5 var(--sans);
    color: rgba(36,30,26,.6);
}
.pub-order-role { font-weight: 600; color: var(--rust-deep); }
.pub-order-stars { color: var(--rust); letter-spacing: 1px; }
.pub-order-partner {
    flex: none;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 8px;
    max-width: 40%;
    text-align: right;
}
.pub-order-partner small {
    grid-column: 1 / -1;
    font: 500 11px var(--sans);
    color: rgba(36,30,26,.45);
}
.pub-order-face {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #EFE7DC;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font: 700 11px var(--display);
    color: rgba(36,30,26,.5);
    text-transform: uppercase;
}
.pub-order-face img { width: 100%; height: 100%; object-fit: cover; }
.pub-order-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13.5px var(--sans); }
.pub-order-name.is-muted { grid-column: 1 / -1; font-weight: 500; color: rgba(36,30,26,.5); }
body.pub a.pub-order-partner:hover .pub-order-name { color: var(--rust-deep); }
.pub-orders-empty {
    margin-top: 22px;
    padding: 26px 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
}
.pub-orders-empty b { font: 700 16px var(--sans); }
.pub-orders-empty p { margin: 4px 0 16px; font: 14px/1.5 var(--sans); color: rgba(36,30,26,.65); }
body.pub .pub-orders-empty a.pub-nav-join { display: inline-block; }
@media (max-width: 560px) {
    .pub-order-row { flex-wrap: wrap; padding: 12px 14px; gap: 10px 12px; }
    .pub-order-main { flex-basis: calc(100% - 48px); }
    .pub-order-partner { max-width: none; margin-left: 46px; text-align: left; grid-template-columns: auto auto 1fr; }
    .pub-order-partner small, .pub-order-name.is-muted { grid-column: auto; }
}