/* Nunito (UI text + canvas labels) and Baloo 2 (titles) cover the Latin text; Chinese and Korean glyphs come from the --font-cjk stack below. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@400;500;600;700;800;900&display=swap');

/* =====================================================================
   MEWMEW — UI design system
   Cosy night palette (deep plum / indigo) + peach, pink & cream accents
   that match the cats' "sticker" look: fill → warm-dark ink → cream rim.
   ===================================================================== */
:root {
    --ink: #2b1d2e;
    --ink-soft: rgba(43, 29, 46, 0.9);
    --cream: #fff4e6;
    --cream-2: #ffe7d1;
    --peach: #ffb38a;
    --peach-2: #ff9870;
    --pink: #ff8ab8;
    --pink-2: #ff6f9f;
    --lilac: #b9a3ff;
    --mint: #7fe3c4;
    --sky: #7cc8ff;
    --gold: #ffd166;
    --gold-2: #ffb938;
    --coral: #ff6f7d;
    --badge-bronze: #d9925a;
    --badge-silver: #d3dbec;
    --badge-gold: #ffd166;
    --badge-diamond: #8eeaff;

    --bg-0: #150f2a;
    --bg-1: #1d1538;
    --bg-2: #281d4a;
    --surface: rgba(34, 24, 60, 0.84);
    --surface-2: rgba(49, 36, 84, 0.92);
    --surface-solid: #231a42;
    --surface-raise: #2d2253;
    --line: rgba(255, 234, 216, 0.13);
    --line-2: rgba(255, 234, 216, 0.24);
    --line-3: rgba(255, 234, 216, 0.42);

    --text: #fff6ee;
    --text-2: #e2d6f3;
    --text-3: #a998c9;

    --grad-cta: linear-gradient(180deg, #ffc69d 0%, #ff9dbb 100%);
    --grad-cta-hover: linear-gradient(180deg, #ffd2b0 0%, #ffabc6 100%);
    --grad-mint: linear-gradient(180deg, #a6f0d6 0%, #6fd8b8 100%);

    --shadow-soft: 0 10px 28px rgba(9, 4, 22, 0.42);
    --shadow-card: 0 14px 34px rgba(9, 4, 22, 0.5);
    --sticker: 0 0 0 2.5px var(--cream);

    /* --font-cjk: per-language fallback for Chinese / Korean glyphs (Baloo 2 and Nunito are Latin-only; js/i18n.js sets <html lang>) */
    --font-cjk: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR';
    --font-display: 'Baloo 2', 'Nunito', var(--font-cjk), system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Nunito', var(--font-cjk), system-ui, -apple-system, 'Segoe UI', sans-serif;

    --hud-h: 40px;
    --hud-gap: 8px;
    --hud-edge: 14px;
}

/* Chinese / Korean: put the right CJK family first so Han and Hangul glyphs come from one matching font */
:root:lang(zh-Hans) { --font-cjk: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', 'Source Han Sans SC'; }
:root:lang(ko) { --font-cjk: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Noto Sans CJK KR', 'Source Han Sans KR'; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

input, textarea { user-select: text; -webkit-user-select: text; }

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-0);
    font-family: var(--font-body);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; color: inherit; }
button:focus-visible, input:focus-visible {
    outline: 2.5px solid var(--peach);
    outline-offset: 2px;
}

kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 6px;
    background: var(--cream);
    color: var(--ink);
    font: 800 11px/1 var(--font-body);
    box-shadow: 0 2px 0 rgba(43, 29, 46, 0.55);
}

/* Custom scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(201, 178, 255, 0.28); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201, 178, 255, 0.45); }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

/* Primary "sticker" button: peach→pink fill, ink outline, cream rim + cat-ear notches */
.btn-cat {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--grad-cta);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.2px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--sticker), 0 7px 16px rgba(255, 128, 160, 0.28), 0 3px 0 2.5px rgba(20, 10, 34, 0.35);
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.3), box-shadow 0.18s ease, background 0.18s ease;
}

.btn-cat::before,
.btn-cat::after {
    content: '';
    position: absolute;
    top: -5px;
    width: 13px;
    height: 13px;
    background:
        radial-gradient(circle at 36% 36%, #ff8fb4 0 2.4px, transparent 3px),
        #ffc69d;
    border-top: 2px solid var(--ink);
    border-left: 2px solid var(--ink);
    border-radius: 5px 0 0 0;
    box-shadow: 0 0 0 2.5px var(--cream);
    clip-path: polygon(-70% -70%, 170% -70%, -70% 170%);
    transform: rotate(45deg);
    pointer-events: none;
}
.btn-cat::before { left: 16%; transform: rotate(38deg); }
.btn-cat::after { right: 16%; transform: rotate(52deg); }

.btn-cat:hover {
    background: var(--grad-cta-hover);
    transform: translateY(-2px) scale(1.03);
    box-shadow: var(--sticker), 0 10px 22px rgba(255, 128, 160, 0.4), 0 4px 0 2.5px rgba(20, 10, 34, 0.35);
}
.btn-cat:hover::before, .btn-cat:hover::after { background: radial-gradient(circle at 36% 36%, #ff8fb4 0 2.4px, transparent 3px), #ffd2b0; }
.btn-cat:active { transform: translateY(1px) scale(0.98); }

/* Secondary HUD / toolbar button (plum glass pill) */
.hud-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--hud-h);
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(36, 25, 64, 0.86);
    border: 1.5px solid var(--line-2);
    color: var(--text);
    font: 700 13px/1 var(--font-body);
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(10, 5, 24, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.hud-btn .ico { font-size: 16px; line-height: 1; }
.hud-btn:hover {
    background: rgba(58, 42, 98, 0.95);
    border-color: var(--line-3);
    transform: translateY(-2px);
}
.hud-btn:active { transform: translateY(0); }
.hud-btn.icon-only { width: var(--hud-h); padding: 0; font-size: 16px; }


/* Drawn gold coin (the coin emoji has no glyph on Windows 10) */
.coin {
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    border-radius: 50%;
    vertical-align: -0.17em;
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.95) 0 11%, transparent 13%),
        radial-gradient(circle, #ffe27a 0 44%, #e89a1c 46% 54%, #ffd24a 56% 100%);
    box-shadow: inset 0 0 0 1.4px #8a5210;
    flex-shrink: 0;
}
.pill-ico .coin { font-size: 13px; }

/* Currency / level pills */
.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 11px 0 4px;
    border-radius: 999px;
    font: 800 13.5px/1 var(--font-body);
    background: rgba(26, 18, 48, 0.72);
    border: 1.5px solid var(--line);
    white-space: nowrap;
}
.stat-pill .pill-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.1);
}
.stat-pill.sparks { color: #ffe27a; border-color: rgba(255, 214, 102, 0.34); }
.stat-pill.sparks .pill-ico { background: rgba(255, 214, 102, 0.2); }
.stat-pill.coins { color: #ffc27a; border-color: rgba(255, 179, 110, 0.34); }
.stat-pill.coins .pill-ico { background: rgba(255, 179, 110, 0.2); }
.stat-pill.level { height: 22px; padding: 0 8px; gap: 3px; font-size: 11.5px; color: var(--ink); background: linear-gradient(180deg, #ffe08a, #ffc05c); border: 1.5px solid var(--ink); }

/* =====================================================================
   BRAND LOGO (HUD) — paw badge + MewMew wordmark
   ===================================================================== */
.brand-paw {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 21px;
    background: var(--grad-cta);
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 2.5px var(--cream), 0 6px 14px rgba(255, 128, 160, 0.3);
    flex-shrink: 0;
    animation: pawBob 3.2s ease-in-out infinite;
}

.brand-words {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-title {
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: 0.4px;
    line-height: 1;
    color: var(--cream);
    white-space: nowrap;
}

.brand-title em {
    font-style: normal;
    background: linear-gradient(180deg, #ffc69d, #ff8fb4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* =====================================================================
   AVATAR DRAWER — the cat wardrobe
   ===================================================================== */
.avatar-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 6, 26, 0.58);
    backdrop-filter: blur(4px);
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.avatar-drawer-backdrop.active { opacity: 1; visibility: visible; }

.avatar-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 440px;
    max-width: 94vw;
    height: 100%;
    background:
        radial-gradient(ellipse 90% 35% at 50% 0%, rgba(255, 170, 140, 0.14) 0%, transparent 100%),
        linear-gradient(180deg, #241a45 0%, #1b1436 100%);
    border-left: 2px solid var(--line-2);
    z-index: 70;
    transform: translateX(104%);
    transition: transform 0.34s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: -16px 0 48px rgba(6, 2, 16, 0.7);
    display: flex;
    flex-direction: column;
}
.avatar-drawer.active { transform: translateX(0); }

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1.5px solid var(--line);
}

.drawer-title { display: flex; align-items: center; gap: 12px; }
.drawer-title-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    font-size: 20px;
    background: var(--grad-cta);
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 2px var(--cream);
}
.drawer-title-main { font: 800 21px/1.15 var(--font-display); color: var(--cream); }
.drawer-title-sub { font-size: 12px; font-weight: 600; color: var(--text-3); margin-top: 1px; }

.drawer-close-btn,
.modal-close-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 244, 230, 0.08);
    border: 1.5px solid var(--line-2);
    color: var(--cream);
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.drawer-close-btn:hover,
.modal-close-btn:hover { background: var(--cream); color: var(--ink); transform: rotate(90deg); }

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.drawer-body > * { flex-shrink: 0; }

.drawer-avatar-preview-stage {
    width: 100%;
    height: 192px;
    border-radius: 22px;
    background:
        radial-gradient(ellipse 60% 26% at 50% 88%, rgba(255, 179, 138, 0.3) 0%, transparent 100%),
        radial-gradient(circle at 50% 60%, rgba(185, 163, 255, 0.28) 0%, rgba(30, 21, 58, 0) 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='90'%3E%3Cg fill='%23fff4e6'%3E%3Ccircle cx='14' cy='18' r='1.2' opacity='.5'/%3E%3Ccircle cx='70' cy='10' r='1' opacity='.4'/%3E%3Ccircle cx='104' cy='40' r='1.4' opacity='.5'/%3E%3Ccircle cx='40' cy='60' r='.9' opacity='.35'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg, #2c2152 0%, #1f173d 100%);
    border: 2px solid var(--line-2);
    box-shadow: inset 0 -20px 40px rgba(12, 6, 26, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

#drawerPreviewCanvas {
    display: block;
    width: 100%;
    max-width: 360px;
    height: 180px;
}

.drawer-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 800 13px/1.2 var(--font-body);
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.9px;
    margin-bottom: 10px;
}
.drawer-section-title > span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(255, 244, 230, 0.08);
    font-size: 13px;
    letter-spacing: 0;
}

/* Collar swatches */
.color-swatch-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
}

.color-swatch-btn {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px solid var(--ink);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16), inset 0 3px 0 rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.4), box-shadow 0.18s ease;
    outline: none;
}
.color-swatch-btn:hover { transform: scale(1.12); }
.color-swatch-btn.active {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px var(--cream), 0 0 16px rgba(255, 244, 230, 0.45), inset 0 -4px 0 rgba(0, 0, 0, 0.16);
}
.color-swatch-btn.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 9px;
    height: 9px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #ffd23c;
    border: 1.5px solid var(--ink);
}

/* Item cards (hats & pets) */
.drawer-item-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.drawer-item-card,
.coat-card {
    border-radius: 18px;
    background: rgba(255, 244, 230, 0.05);
    border: 1.5px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.3), background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.drawer-item-card { padding: 10px 6px; gap: 5px; }

.drawer-item-card:hover,
.coat-card:hover {
    background: rgba(255, 244, 230, 0.1);
    border-color: var(--line-3);
    transform: translateY(-2px);
}

.drawer-item-card.active,
.coat-card.active {
    background: linear-gradient(180deg, rgba(255, 179, 138, 0.22), rgba(255, 138, 184, 0.14));
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 2.5px var(--cream), 0 8px 18px rgba(255, 128, 160, 0.25);
}

.item-card-icon { font-size: 28px; line-height: 46px; }

.item-card-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
}

.coat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.coat-card { padding: 7px 2px 8px; gap: 3px; }

.coat-card-canvas {
    width: 50px;
    height: auto;
    max-width: 100%;
    aspect-ratio: 1;
}

.coat-card-name {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text);
    text-align: center;
}

.item-card-canvas { width: 46px; height: 46px; }

.drawer-footer {
    padding: 16px 22px 18px;
    border-top: 1.5px solid var(--line);
    display: flex;
    gap: 12px;
    background: rgba(20, 14, 40, 0.6);
}

.btn-drawer-save {
    flex: 1;
    height: 48px;
    font-size: 16px;
}

/* =====================================================================
   GAME VIEW & HUD
   ===================================================================== */
#gameView {
    position: absolute;
    inset: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
}

#gameCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}

.ui-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 15;
}

.interactive { pointer-events: auto; }

/* Top HUD: row 1 (brand · mode · nav) + row 2 (player card) */
.top-bar {
    position: absolute;
    top: 12px;
    left: var(--hud-edge);
    right: var(--hud-edge);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hud-gap);
    pointer-events: none;
}

.hud-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.brand-section {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--hud-h);
    padding: 0 14px 0 3px;
    cursor: pointer;
    flex-shrink: 0;
    /* same plum pill as the title badge, so the logo stays readable over busy map art */
    border-radius: 999px;
    background: rgba(24, 16, 46, 0.72);
    border: 1.5px solid var(--line);
    box-shadow: 0 6px 16px rgba(10, 5, 24, 0.26);
}
.brand-section .brand-paw { width: 32px; height: 32px; font-size: 15px; box-shadow: 0 0 0 2px var(--cream), 0 4px 10px rgba(255, 128, 160, 0.25); }
.brand-section .brand-title { font-size: 20px; text-shadow: 0 2px 8px rgba(12, 6, 26, 0.6); }
.brand-section:hover .brand-paw { transform: rotate(-12deg) scale(1.06); }

.hud-mode {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 0 1 auto;
}

.in-game-title-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: var(--hud-h);
    padding: 0 16px 0 6px;
    border-radius: 999px;
    background: rgba(24, 16, 46, 0.8);
    border: 1.5px solid var(--line-2);
    font: 800 14px/1.2 var(--font-display);
    color: var(--cream);
    box-shadow: 0 6px 16px rgba(10, 5, 24, 0.3);
}
#inGameIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 244, 230, 0.1);
    font-size: 15px;
}
#inGameName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: 1px;
}

/* Plaza only: the simulated "players online" pill beside the mode title (HubWorld in js/hub.js fills it; the data-mode rule
   hides it in every other mode). Shorter than the title badge, so the HUD row keeps its height. */
.online-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    height: 26px;
    padding: 0 11px 0 9px;
    border-radius: 999px;
    background: rgba(24, 16, 46, 0.8);
    border: 1.5px solid var(--line-2);
    box-shadow: 0 6px 16px rgba(10, 5, 24, 0.3);
    font: 800 12.5px/1 var(--font-body);
    color: var(--cream);
    white-space: nowrap;
    pointer-events: none;
}
.online-pill[hidden],
#gameView:not([data-mode="hub"]) .online-pill { display: none; }
.op-dot {
    position: relative;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 1.5px rgba(43, 29, 46, 0.6);
}
/* a soft ring that swells and fades (transform + opacity only: it never repaints the HUD) */
.op-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #4ade80;
    animation: onlinePulse 2.4s ease-out infinite;
}
.online-pill.calm .op-dot::after { animation: none; opacity: 0; }   /* power-saving graphics level */
.op-num { display: none; }
@keyframes onlinePulse {
    0% { transform: scale(1); opacity: 0.55; }
    70%, 100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .op-dot::after { animation: none; opacity: 0; }
}

.nav-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Player card */
.hud-player-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border-radius: 22px;
    background: rgba(28, 19, 52, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid var(--line-2);
    box-shadow: 0 8px 22px rgba(10, 5, 24, 0.32);
}

.hud-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #4a3781 0%, #2a1e4f 80%);
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 2.5px var(--cream);
    cursor: pointer;
}

.hud-vitals {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 176px;
}

.hud-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.hud-name {
    font: 800 13.5px/1.15 var(--font-display);
    color: var(--cream);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hp-bar-container {
    position: relative;
    width: 100%;
    height: 16px;
    border-radius: 999px;
    background: rgba(10, 6, 22, 0.66);
    border: 1.5px solid var(--ink);
    box-shadow: 0 0 0 1.5px rgba(255, 244, 230, 0.55);
    overflow: hidden;
}

.hp-bar-fill {
    height: 100%;
    width: 100%;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffa3b8 0%, #ff6f91 55%, #f2527c 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35);
    transition: width 0.2s ease;
}

.hp-heart {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-52%);
    font-size: 9px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(43, 29, 46, 0.7);
}

.hp-bar-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(43, 29, 46, 0.9);
}

.hud-wallet {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hud-wallet .stat-pill { height: 23px; padding: 0 9px 0 2px; font-size: 12.5px; }
.hud-wallet .stat-pill .pill-ico { width: 19px; height: 19px; font-size: 11px; }

/* Floating announcement toast (positioned by GameEngine.layoutHUD) */
.announcement-bar {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translate(-50%, -6px) scale(0.97);
    max-width: min(620px, calc(100vw - 24px));
    width: max-content;
    z-index: 110;           /* above the modals too: shop / hatch / quest feedback stays visible (pointer-events: none) */
    padding: 10px 22px;
    border-radius: 22px;
    background: rgba(33, 22, 60, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 2.5px var(--cream), 0 12px 28px rgba(10, 5, 24, 0.5);
    color: var(--cream);
    font: 800 14px/1.35 var(--font-body);
    text-align: center;
    text-wrap: balance;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.announcement-bar.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* "Go now" card after a daily quest (built by GameEngine.showQuestChain; below the modals, above the HUD) */
.quest-chain-card {
    position: fixed;
    top: 118px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 95;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(360px, calc(100vw - 24px));
    padding: 12px 14px 12px;
    border-radius: 22px;
    background: rgba(33, 22, 60, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 2.5px var(--cream), 0 12px 28px rgba(10, 5, 24, 0.5);
    color: var(--cream);
    animation: quest-chain-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}
.quest-chain-card[hidden] { display: none; }
.quest-chain-title { font: 800 14px/1.3 var(--font-display); color: var(--cream); }
.quest-chain-text { font: 700 12.5px/1.45 var(--font-body); color: var(--text-2); }
.quest-chain-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.quest-chain-actions .shop-buy-btn { min-height: 34px; padding: 6px 14px; font-size: 12.5px; }
.quest-chain-close {
    position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
    border: 0; background: transparent; color: var(--text-3); font: 800 14px/1 var(--font-body); cursor: pointer;
}
.quest-chain-close:hover { color: var(--cream); }
.quest-go-btn { background: var(--grad-cta); color: var(--ink); }
@keyframes quest-chain-in { from { opacity: 0; transform: translate(-50%, -10px) scale(0.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@media (max-width: 600px) { .quest-chain-card { top: 96px; } }
@media (prefers-reduced-motion: reduce) { .quest-chain-card { animation: none; } }

/* Wellbeing reminder card (D10; built by GameEngine.showWellbeingCard, parked by positionWellbeingCard): stays until the
   player taps OK. Above the modals (100) so it is never hidden under one, below the toast (110); it never blocks the game. */
.wellbeing-card {
    position: fixed;
    top: 132px;
    left: 14px;
    z-index: 105;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: min(300px, calc(100vw - 24px));
    padding: 12px 14px;
    border-radius: 22px;
    background: rgba(33, 22, 60, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 2.5px var(--cream), 0 12px 28px rgba(10, 5, 24, 0.5);
    color: var(--cream);
    animation: wellbeing-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}
.wellbeing-card[hidden] { display: none; }
.wellbeing-title { font: 800 14px/1.3 var(--font-display); color: var(--cream); }
.wellbeing-text { font: 700 12.5px/1.45 var(--font-body); color: var(--text-2); }
.wellbeing-actions { display: flex; justify-content: flex-end; }
.wellbeing-actions .shop-buy-btn { min-height: 34px; min-width: 64px; padding: 6px 18px; font-size: 12.5px; }
@keyframes wellbeing-in { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 600px) { .wellbeing-card { left: 12px; } }
@media (prefers-reduced-motion: reduce) { .wellbeing-card { animation: none; } }

/* Bed Wars hotbar */
.bedwars-hud {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 20;
}

.resource-row {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(28, 19, 52, 0.84);
    border: 1.5px solid var(--line-2);
    box-shadow: 0 6px 16px rgba(10, 5, 24, 0.3);
    font-size: 12.5px;
    font-weight: 800;
}
.res-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.05);
}
.res-iron { color: #e3e7f5; }
.res-gold { color: #ffd166; }
.res-diamond { color: #8eeaff; }
.res-blocks { color: #ffb99a; }
.res-lbl { font-weight: 700; opacity: 0.85; }

.hotbar-container {
    display: flex;
    gap: 7px;
    padding: 7px;
    border-radius: 22px;
    background: rgba(28, 19, 52, 0.98);
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 2.5px rgba(255, 244, 230, 0.75), 0 10px 26px rgba(10, 5, 24, 0.45);
}

.hotbar-slot {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: rgba(255, 244, 230, 0.06);
    border: 1.5px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.hotbar-slot:hover { background: rgba(255, 244, 230, 0.12); transform: translateY(-2px); }
.hotbar-slot.active {
    background: linear-gradient(180deg, rgba(255, 198, 157, 0.35), rgba(255, 157, 187, 0.25));
    border: 2px solid var(--cream);
    transform: translateY(-3px);
}
.slot-num {
    position: absolute;
    top: 3px;
    left: 6px;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-3);
}
.hotbar-slot.active .slot-num { color: var(--cream); }
.slot-icon { font-size: 22px; line-height: 1.1; }
.slot-name { font-size: 9px; font-weight: 800; color: var(--text-2); white-space: nowrap; }

/* Chat & emote dock */
.chat-dock {
    position: absolute;
    bottom: 18px;
    left: 18px;
    width: clamp(240px, 25vw, 320px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 20;
}

.chat-logs {
    max-height: 124px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 12px;
    border-radius: 18px;
    background: rgba(24, 16, 46, 0.66);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid var(--line);
    font-size: 12px;
}

.chat-row { line-height: 1.4; word-break: break-word; }
.chat-sender { font-weight: 800; color: var(--peach); margin-right: 4px; }
.chat-text { color: var(--text); }

.chat-input-row { display: flex; gap: 6px; }

.chat-input {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(24, 16, 46, 0.82);
    border: 1.5px solid var(--line-2);
    color: var(--text);
    font: 500 12.5px var(--font-body);
    outline: none;
}
.chat-input::placeholder { color: var(--text-3); }
.chat-input:focus { border-color: var(--peach); background: rgba(24, 16, 46, 0.95); }

.chat-send-btn {
    height: 34px;
    padding: 0 15px;
    border-radius: 999px;
    border: 2px solid var(--ink);
    background: var(--grad-cta);
    color: var(--ink);
    font: 800 12.5px/1 var(--font-display);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.chat-send-btn:hover { transform: translateY(-1px) scale(1.04); }

.emote-bar { display: flex; gap: 5px; flex-wrap: wrap; }

.emote-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(24, 16, 46, 0.78);
    border: 1.5px solid var(--line);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.2, 0.9, 0.3, 1.6), background 0.15s ease, border-color 0.15s ease;
}
.emote-btn:hover { transform: translateY(-3px) scale(1.14); background: rgba(58, 42, 98, 0.95); border-color: var(--line-3); }
/* a bigger invisible hit area than the drawn circle (small phone buttons stay easy to tap) */
.emote-btn { position: relative; }
.emote-btn::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }

/* chat toggle: only shown on short touch screens, where the chat & emotes fold behind it */
.chat-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: rgba(36, 25, 64, 0.9);
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 2.5px rgba(255, 244, 230, 0.8), 0 6px 14px rgba(10, 5, 24, 0.4);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

/* Mobile virtual joystick & action buttons */
.mobile-controls {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: none;
    z-index: 25;
}

@media (pointer: coarse) {
    .mobile-controls { display: block; }
}

.joystick-zone {
    position: absolute;
    bottom: 36px;
    left: 30px;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 244, 230, 0.06) 0%, rgba(255, 244, 230, 0.12) 100%);
    border: 2.5px solid rgba(255, 244, 230, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    touch-action: none;
}

.joystick-knob {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--grad-cta);
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 2.5px var(--cream), 0 6px 14px rgba(10, 5, 24, 0.4);
    pointer-events: none;
    transition: transform 0.05s ease-out;
}

.mobile-actions {
    position: absolute;
    bottom: 36px;
    right: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    pointer-events: auto;
}

.circle-action-btn {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--grad-cta);
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 2.5px var(--cream), 0 6px 16px rgba(10, 5, 24, 0.45);
    color: var(--ink);
    font: 800 18px/1 var(--font-display);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: none;
}
.circle-action-btn.dash {
    width: 54px;
    height: 54px;
    font-size: 12px;
    background: linear-gradient(180deg, #d6c6ff, #a98bff);
}

/* =====================================================================
   MODALS (dex, shop, quests, kit, help, catch, match end, dialog)
   ===================================================================== */
.game-modal {
    position: fixed;
    inset: 0;
    background: rgba(12, 6, 26, 0.66);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px 16px 16px;
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    border-radius: 28px;
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255, 170, 140, 0.12) 0%, transparent 100%),
        linear-gradient(180deg, #2a1f4f 0%, #1e1639 100%);
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 3px var(--cream), 0 26px 60px rgba(6, 2, 16, 0.7);
    animation: modalIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

/* cat ears on every modal window */
.modal-content::before,
.modal-content::after {
    content: '';
    position: absolute;
    top: -12px;
    width: 26px;
    height: 26px;
    background: radial-gradient(circle at 36% 36%, #ff9dbd 0 5px, transparent 6px), #2a1f4f;
    border-top: 2px solid var(--ink);
    border-left: 2px solid var(--ink);
    border-radius: 8px 0 0 0;
    box-shadow: 0 0 0 3px var(--cream);
    clip-path: polygon(-70% -70%, 170% -70%, -70% 170%);
    pointer-events: none;
}
.modal-content::before { left: 34px; transform: rotate(36deg); }
.modal-content::after { right: 34px; transform: rotate(54deg); }

.modal-content.modal-wide { max-width: 640px; }
.modal-content.modal-narrow { max-width: 420px; }
.modal-content.modal-dialog { max-width: 500px; }

@keyframes modalIn {
    from { transform: translateY(10px) scale(0.94); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 14px;
    border-bottom: 1.5px solid var(--line);
}

.modal-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 800 20px/1.2 var(--font-display);
    color: var(--cream);
}
.modal-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(255, 244, 230, 0.1);
    font-size: 17px;
    flex-shrink: 0;
}

.modal-body {
    padding: 18px 22px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

.modal-hint { color: var(--text-3); font-size: 13px; line-height: 1.5; }

/* what the player can spend, inside the Bed Wars smith (the HUD resource bar sits under the modal) */
.bw-shop-wallet { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; font-size: 12.5px; font-weight: 800; }
.bw-shop-wallet .res-item { background: rgba(255, 244, 230, 0.06); border: 1.5px solid var(--line); }

/* footer that stays in view while a long modal body scrolls (help modal on phones) */
.modal-sticky-foot {
    position: sticky;
    bottom: -22px;
    flex-shrink: 0;
    margin: 0 -22px -22px;
    padding: 14px 22px 22px;
    border-radius: 0 0 26px 26px;
    background: linear-gradient(180deg, rgba(30, 22, 57, 0) 0%, #1e1639 34%);
}

.modal-actions { display: flex; gap: 10px; }
.modal-actions > * { flex: 1; }

/* Generic buttons inside modals */
.shop-buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--grad-mint);
    color: #123a33;
    font: 800 13.5px/1.15 var(--font-display);
    border: 2px solid var(--ink);
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(20, 10, 34, 0.35);
    transition: transform 0.15s ease, filter 0.15s ease;
}
.shop-buy-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.shop-buy-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(20, 10, 34, 0.35); }
.shop-buy-btn:disabled { cursor: default; filter: saturate(0.6); transform: none; }
.shop-buy-btn.btn-cat { background: var(--grad-cta); color: var(--ink); box-shadow: var(--sticker), 0 4px 0 2.5px rgba(20, 10, 34, 0.35); }
.shop-buy-btn.btn-soft { background: rgba(255, 244, 230, 0.1); color: var(--cream); border-color: var(--line-3); box-shadow: none; }
.shop-buy-btn.btn-sea { background: linear-gradient(180deg, #9ad8ff, #62b4f2); color: #10304a; }
.shop-buy-btn.btn-lilac { background: linear-gradient(180deg, #dccdff, #b39bff); color: #2a1a55; }
.shop-buy-btn.btn-equip { background: linear-gradient(180deg, #9ad8ff, #62b4f2); color: #10304a; }
.shop-buy-btn.btn-using { background: rgba(127, 227, 196, 0.16); color: var(--mint); border-color: rgba(127, 227, 196, 0.5); box-shadow: none; }
.btn-block { width: 100%; }

.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.shop-grid.shop-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.shop-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 14px 12px;
    border-radius: 20px;
    background: rgba(255, 244, 230, 0.05);
    border: 1.5px solid var(--line);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.shop-card:hover { transform: translateY(-2px); border-color: var(--line-3); background: rgba(255, 244, 230, 0.08); }
.shop-card .shop-buy-btn { margin-top: auto; width: 100%; }
.shop-card.upgrade { background: rgba(142, 234, 255, 0.06); }

.shop-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: rgba(255, 244, 230, 0.08);
    font-size: 27px;
}
.shop-name { font-weight: 800; font-size: 13px; line-height: 1.3; color: var(--text); }

.shop-price {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    color: var(--gold);
    background: rgba(255, 214, 102, 0.12);
}
.shop-price.iron { color: #e3e7f5; background: rgba(227, 231, 245, 0.1); }
.shop-price.gold { color: var(--gold); background: rgba(255, 214, 102, 0.13); }
.shop-price.diamond { color: #8eeaff; background: rgba(142, 234, 255, 0.12); }

/* Kit cards */
.kit-card { cursor: pointer; border-color: color-mix(in srgb, var(--kit, #fff) 30%, transparent); }
.kit-card:hover { border-color: var(--kit, var(--cream)); box-shadow: 0 0 22px color-mix(in srgb, var(--kit, #fff) 22%, transparent); }
.kit-card .shop-ico { background: color-mix(in srgb, var(--kit, #fff) 18%, transparent); }
.kit-name { font: 800 15px/1.2 var(--font-display); color: var(--kit, var(--cream)); }
.kit-desc { font-size: 12px; color: var(--text-2); line-height: 1.45; }

/* Currency exchange */
.exchange-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.exchange-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    border-radius: 20px;
    background: rgba(255, 244, 230, 0.05);
    border: 1.5px solid var(--line-2);
    color: var(--text);
    font: 800 14px/1.2 var(--font-body);
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.exchange-card:hover { transform: translateY(-2px); border-color: var(--peach); background: rgba(255, 179, 138, 0.1); }
.ex-arrow { color: var(--peach); font-size: 13px; }
.ex-to { color: var(--gold); }

/* Quest cards (built in GameEngine.openQuestModal) */
.quest-list { gap: 12px; }
.quest-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(255, 244, 230, 0.05);
    border: 1.5px solid var(--line);
}
.quest-card.done { border-color: rgba(127, 227, 196, 0.6); background: rgba(127, 227, 196, 0.07); }
.quest-card.claimed { opacity: 0.62; }
.quest-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.quest-title { font: 800 15.5px/1.2 var(--font-display); color: var(--cream); }
.quest-reward {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 214, 102, 0.13);
    color: var(--gold);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.quest-desc { font-size: 12.5px; color: var(--text-3); line-height: 1.4; }
.quest-bar {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: rgba(10, 6, 22, 0.6);
    border: 1.5px solid var(--ink);
    overflow: hidden;
}
.quest-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffd0b0, #ff9dbb);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35);
    transition: width 0.3s ease;
}
.quest-card.done .quest-bar-fill { background: linear-gradient(180deg, #a6f0d6, #5fd3ae); }
.quest-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.quest-progress { font-size: 12px; font-weight: 700; color: var(--text-2); }
.quest-state { font-size: 12px; font-weight: 800; color: var(--text-3); }
.quest-card .shop-buy-btn { min-height: 32px; padding: 5px 14px; font-size: 12.5px; }

/* Rod shop cards */
.rod-stats { font-size: 11px; color: var(--text-3); line-height: 1.4; }

/* Dex */
.dex-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.dex-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: 18px;
    background: rgba(255, 244, 230, 0.05);
    border: 1.5px solid var(--line);
}
.dex-card.caught {
    background: rgba(124, 200, 255, 0.07);
    border-color: rgba(124, 200, 255, 0.3);
    border-color: color-mix(in srgb, var(--rar, #7cc8ff) 55%, transparent);
}
/* species still to catch: a cream fish silhouette in a dashed frame tinted with the rarity colour,
   so the grid reads as a collection to fill (only the text lines are dimmed, no filters) */
.dex-card.locked {
    background: rgba(255, 244, 230, 0.03);
    border-style: dashed;
    border-color: rgba(255, 244, 230, 0.2);
    border-color: color-mix(in srgb, var(--rar, #c9bfe0) 38%, transparent);
}
.dex-card.locked .dex-name, .dex-card.locked .dex-meta { opacity: 0.6; }
.dex-card.locked .dex-rarity { opacity: 0.85; }
.dex-icon { font-size: 32px; line-height: 1.2; }
.dex-fish { display: block; width: 46px; height: 31px; margin: 4px auto 3px; }
.dex-fish path { fill: rgba(255, 244, 230, 0.55); }
.dex-fish text { fill: #2b1d2e; fill-opacity: 0.7; font: 900 15px var(--font-display); }
.dex-name { font-size: 12.5px; font-weight: 800; color: var(--text); }
.dex-rarity { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; }
.dex-meta { font-size: 11px; color: var(--text-3); }

.rarity-common { color: #c9bfe0; }
.rarity-rare { color: #7cc8ff; }
.rarity-epic { color: #c9a8ff; }
.rarity-legendary { color: #ffc15e; }
.rarity-mythic { color: #ff8fd0; }

/* Catch dialog */
.catch-dialog-body {
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 20px 24px 24px;
}
.catch-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(124, 200, 255, 0.35) 0%, rgba(124, 200, 255, 0.05) 70%);
    border: 2px dashed rgba(124, 200, 255, 0.45);
}
.catch-icon-big { font-size: 62px; animation: bounce 1s infinite; }
.catch-name-big { font: 800 24px/1.2 var(--font-display); color: var(--cream); }
.catch-rarity {
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.catch-length { font-size: 13.5px; color: var(--text-3); font-weight: 600; }
.catch-reward-big {
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(255, 214, 102, 0.14);
    color: var(--gold);
    font: 800 18px/1.2 var(--font-display);
}
.catch-dialog-body .shop-buy-btn { margin-top: 8px; }

/* Match end */
.match-end .modal-header { justify-content: center; text-align: center; }
.match-end .modal-title { justify-content: center; font-size: 23px; }
.match-end-body { align-items: center; text-align: center; padding: 20px 24px 24px; }
.match-end-paws { font-size: 18px; letter-spacing: 6px; opacity: 0.8; }
.match-end-desc { color: var(--text-2); font-size: 14.5px; line-height: 1.55; text-wrap: balance; }
.reward-chip {
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 214, 102, 0.14);
    border: 1.5px solid rgba(255, 214, 102, 0.4);
    color: var(--gold);
    font: 800 16px/1.2 var(--font-display);
}
.reward-chip:empty { display: none; }
.match-end-body .modal-actions { width: 100%; margin-top: 6px; }

/* NPC dialog */
.dialog-speaker-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dialog-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #4a3781 0%, #2a1e4f 80%);
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 2.5px var(--cream);
}
.dialog-text {
    position: relative;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 244, 230, 0.07);
    border: 1.5px solid var(--line-2);
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
}
.dialog-ok { align-self: flex-end; min-width: 150px; }

/* Help modal */
/* Graphics quality picker (help modal) */
.gfx-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 244, 230, 0.06);
    border: 1px solid var(--line);
}
.gfx-label { font: 800 14px/1.2 var(--font-display); color: var(--cream); }
.gfx-seg {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    border-radius: 999px;
    background: rgba(12, 8, 26, 0.45);
    border: 1px solid var(--line-2);
}
.gfx-opt,
.lang-opt {
    appearance: none;
    border: 0;
    cursor: pointer;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: transparent;
    color: var(--text-2);
    font: 800 13px/1 var(--font-body);
    transition: background 0.15s ease, color 0.15s ease;
}
.gfx-opt:hover, .lang-opt:hover { background: rgba(255, 244, 230, 0.1); color: var(--cream); }
.gfx-opt.active, .lang-opt.active { background: var(--grad-cta); color: var(--ink); box-shadow: 0 2px 0 rgba(43, 29, 46, 0.35); }
.lang-row .lang-opt { white-space: nowrap; }
.gfx-status { font-size: 12px; color: var(--text-3); margin-left: auto; }
@media (max-width: 420px) {
    .gfx-status { margin-left: 0; width: 100%; }
}

/* Language picker. Help modal: the .lang-row segmented control above reuses the .gfx-row / .gfx-seg look.
   HUD: #btnLang (🌐, in #hudNav) opens #langMenu, a small sticker-style popover right-aligned under the button. */
.lang-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.lang-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 168px;
    max-width: calc(100vw - 20px);
    padding: 6px;
    border-radius: 20px;
    background: rgba(33, 22, 60, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 2.5px var(--cream), 0 12px 28px rgba(10, 5, 24, 0.5);
    transform-origin: calc(100% - 18px) 0;
    animation: langMenuIn 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}
.lang-menu[hidden] { display: none; }
.lang-menu-opt {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 0 16px 0 10px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--text-2);
    font: 800 14px/1 var(--font-body);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.lang-menu-opt:hover, .lang-menu-opt:focus-visible { background: rgba(255, 244, 230, 0.1); color: var(--cream); }
.lang-menu-opt .lang-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--line-2);
    font-size: 11px;
    font-weight: 900;
    color: transparent;
}
.lang-menu-opt.active { background: var(--grad-cta); color: var(--ink); box-shadow: 0 2px 0 rgba(43, 29, 46, 0.35); }
.lang-menu-opt.active .lang-check { background: var(--ink); border-color: var(--ink); color: var(--cream); }
@keyframes langMenuIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* touch: finger-sized rows */
@media (pointer: coarse) {
    .lang-menu-opt { min-height: 46px; font-size: 15px; }
    .lang-opt { min-height: 38px; }
}

/* Play notice (D10), at the foot of the help modal: this was the portal footer */
.help-notice { display: flex; align-items: center; gap: 10px; }
.help-notice .modal-hint { margin: 0; }

.controls-list { display: flex; flex-direction: column; gap: 7px; }
.control-row {
    display: grid;
    grid-template-columns: minmax(150px, 44%) 1fr;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(255, 244, 230, 0.04);
}
.control-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.control-keys i { font-style: normal; color: var(--text-3); font-size: 12px; margin: 0 2px; }
.control-keys kbd.wide { padding: 0 8px; }
.control-desc { font-size: 13px; color: var(--text-2); line-height: 1.4; }
.control-desc b { color: var(--cream); }

/* =====================================================================
   Animations
   ===================================================================== */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes pawBob {
    0%, 100% { transform: rotate(-6deg); }
    50% { transform: rotate(6deg) translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
    .brand-paw, .catch-icon-big, .modal-content, .lang-menu { animation: none; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* Narrow desktop / tablet landscape: HUD nav becomes icon-only (tooltips via title).
   v3 has one more button (daily check-in), so the labels give way from 1340 px instead of 1220 px. */
@media (max-width: 1339px) {
    .nav-buttons .hud-btn .lbl { display: none; }
    .nav-buttons .hud-btn { width: var(--hud-h); padding: 0; }
    .nav-buttons .hud-btn .ico { font-size: 17px; }
}

/* Tablet portrait */
@media (max-width: 899px) {
    :root { --hud-h: 38px; --hud-edge: 12px; }
    .brand-section .brand-words { display: none; }
    .brand-section { padding: 0; background: none; border: 0; box-shadow: none; }
    .brand-section .brand-paw { width: 38px; height: 38px; font-size: 18px; box-shadow: 0 0 0 2.5px var(--cream), 0 6px 14px rgba(255, 128, 160, 0.3); }
    .in-game-title-badge { max-width: 240px; font-size: 13.5px; }
    .chat-dock { width: 250px; }
    .chat-logs { max-height: 92px; }
    .emote-bar { gap: 4px; }
    .emote-btn { width: 30px; height: 30px; font-size: 14px; }
    #gameView[data-mode="bedwars"] .chat-dock { bottom: 150px; }
}

/* "Players online" pill where the title row is tight (a tablet's single HUD row, and phones under 400 px): keep the dot and
   the bare number; the full "{n} online" text stays in the page for screen readers */
@media (min-width: 641px) and (max-width: 899px), (max-width: 399px) {
    .online-pill { gap: 6px; padding: 0 9px 0 8px; font-size: 12px; }
    .online-pill .op-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .online-pill .op-num { display: inline; }
}

/* Phones */
@media (max-width: 640px) {
    :root { --hud-h: 36px; --hud-gap: 6px; --hud-edge: 10px; }
    .top-bar { top: 10px; }
    .hud-row { flex-wrap: wrap; row-gap: 6px; column-gap: 6px; }
    .hud-mode { flex: 1 1 0; }
    .in-game-title-badge { max-width: none; flex: 1 1 auto; font-size: 13px; padding-right: 12px; }
    .nav-buttons {
        order: 3;
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
        padding: 4px;
        border-radius: 999px;
        background: rgba(24, 16, 46, 0.62);
        border: 1.5px solid var(--line);
    }
    .nav-buttons .hud-btn { --hud-h: 34px; box-shadow: none; }
    .brand-section .brand-paw { width: 34px; height: 34px; font-size: 16px; }

    .hud-player-stats { gap: 8px; padding: 5px 9px 5px 5px; border-radius: 20px; }
    .hud-avatar { width: 36px; height: 36px; }
    .hud-vitals { width: 118px; gap: 4px; }
    .hud-name { display: none; }
    .hud-name-row { justify-content: flex-start; }
    .hp-bar-container { height: 14px; }
    .hp-bar-text { font-size: 9px; }
    .hud-wallet .stat-pill { height: 21px; font-size: 11.5px; }

    .chat-dock { left: 10px; bottom: 10px; width: min(236px, 62vw); gap: 5px; }
    .chat-logs { max-height: 60px; font-size: 11px; padding: 6px 10px; border-radius: 14px; }
    .chat-input, .chat-send-btn { height: 30px; font-size: 11.5px; }
    .emote-btn { width: 28px; height: 28px; font-size: 13px; }
    #gameView[data-mode="bedwars"] .chat-dock { bottom: 142px; }

    .bedwars-hud { bottom: 10px; gap: 6px; }
    .hotbar-container { gap: 5px; padding: 5px; border-radius: 18px; }
    .hotbar-slot { width: 50px; height: 50px; border-radius: 13px; }
    .slot-icon { font-size: 19px; }
    .res-item { padding: 0 7px; height: 24px; font-size: 11.5px; }
    .res-lbl { display: none; }

    .announcement-bar { font-size: 12.5px; padding: 8px 14px; border-radius: 18px; }

    /* drawer & modals */
    .drawer-header { padding: 12px 16px; }
    .drawer-body { padding: 14px 16px 18px; gap: 18px; }
    .drawer-footer { padding: 12px 16px 14px; }
    .color-swatch-grid { gap: 7px; }
    .coat-grid { gap: 6px; }
    .game-modal { padding: 26px 10px 10px; }
    .modal-content { border-radius: 24px; max-height: calc(100vh - 44px); }
    .modal-header { padding: 16px 16px 12px; }
    .modal-title { font-size: 17.5px; }
    .modal-body { padding: 14px 16px 18px; }
    .modal-sticky-foot { bottom: -18px; margin: 0 -16px -18px; padding: 12px 16px 18px; border-radius: 0 0 22px 22px; }
    .shop-grid.shop-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .modal-actions.stack-sm, .match-end-body .modal-actions { flex-direction: column; }
    .control-row { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 420px) {
    .coat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* very narrow phones: up to seven mode buttons plus the language button must still fit the nav bar */
@media (max-width: 360px) {
    .nav-buttons { gap: 3px; padding: 3px; }
    .nav-buttons .hud-btn { --hud-h: 32px; }
}

/* Touch devices: keep the chat dock clear of the virtual joystick & action buttons */
@media (pointer: coarse) {
    .chat-dock { bottom: 178px; }
    #gameView[data-mode="bedwars"] .chat-dock { bottom: 178px; }
}
/* Touch phones in Bed Wars: the hotbar fills the bottom edge, so the stick & buttons sit above it
   and the chat dock (input + emotes; the log is hidden to save room) sits above the stick */
@media (pointer: coarse) and (max-width: 640px) {
    #gameView[data-mode="bedwars"] .bedwars-hud { bottom: 12px; }
    #gameView[data-mode="bedwars"] .mobile-actions { bottom: 150px; }
    #gameView[data-mode="bedwars"] .joystick-zone { bottom: 150px; }
    #gameView[data-mode="bedwars"] .chat-logs { display: none; }
    #gameView[data-mode="bedwars"] .chat-dock { bottom: 288px; }
}

/* =====================================================================
   TOUCH PHONES (portrait phones and short / landscape screens)
   The chat log, input and emotes fold behind a chat button parked above the stick, so they never cover
   the player card / HP bar, the cat or the Bed Wars bed; tapping it opens a small panel beside the button.
   ===================================================================== */
@media (pointer: coarse) and (max-height: 700px), (pointer: coarse) and (max-width: 640px) {
    .chat-toggle { display: inline-flex; }
    .chat-dock, #gameView[data-mode="bedwars"] .chat-dock {
        bottom: 172px;              /* stick: bottom 36 + 124 tall + a 12 px gap */
        left: 30px;
        width: auto;
        gap: 6px;
    }
    .chat-dock > .chat-logs, .chat-dock > .chat-input-row, .chat-dock > .emote-bar { display: none; }
    .chat-dock.open, #gameView[data-mode="bedwars"] .chat-dock.open {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        grid-template-areas: "tog form" "tog emo";
        align-items: end;
        column-gap: 8px;
        row-gap: 6px;
        width: min(340px, calc(100vw - 20px));
        padding: 6px;
        margin: 0 0 -6px -6px;      /* the toggle button stays exactly where it was */
        border-radius: 24px;
        background: rgba(24, 16, 46, 0.92);
        border: 1.5px solid var(--line-2);
        box-shadow: 0 10px 26px rgba(10, 5, 24, 0.45);
    }
    .chat-dock.open > .chat-toggle { grid-area: tog; }
    .chat-dock.open > .chat-input-row { display: flex; grid-area: form; }
    .chat-dock.open > .emote-bar { display: flex; grid-area: emo; flex-wrap: nowrap; gap: 4px; justify-content: space-between; }
    .chat-dock.open .emote-btn { width: 32px; height: 32px; font-size: 15px; flex: 0 0 auto; }
}
/* narrow phones in Bed Wars: the stick sits above the hotbar (bottom 150), so the button sits above the stick */
@media (pointer: coarse) and (max-width: 640px) {
    #gameView[data-mode="bedwars"] .chat-dock { bottom: 286px; }
}
/* phones in landscape: a compact stick and buttons in the bottom corners, the Bed Wars hotbar between them */
@media (pointer: coarse) and (max-height: 500px) {
    .joystick-zone, #gameView[data-mode="bedwars"] .joystick-zone {
        bottom: 14px;
        left: 14px;
        width: 100px;
        height: 100px;
    }
    .joystick-knob { width: 44px; height: 44px; }
    .mobile-actions, #gameView[data-mode="bedwars"] .mobile-actions {
        bottom: 14px;
        right: 14px;
        flex-direction: row;        /* Dash, then E in the corner under the thumb */
        align-items: flex-end;
        gap: 10px;
    }
    .circle-action-btn { width: 56px; height: 56px; font-size: 16px; }
    .circle-action-btn.dash { width: 46px; height: 46px; font-size: 11px; }
    #gameView[data-mode="bedwars"] .bedwars-hud { bottom: 8px; }
    .chat-dock, #gameView[data-mode="bedwars"] .chat-dock { bottom: 124px; left: 14px; }
}

/* =====================================================================
   V3 ECONOMY UI (docs/economy/ARCHITECTURE.md section 9)
   The other packages render into the containers of index.html. A container gets its LAYOUT here, while every card / row
   carries its own look. The class names below are the ones the renderers of progression.js, wardrobe.js, fishermon.js,
   hub.js, tycoon.js and game.js create. No number in this block is an economy value: sizes only.
   ===================================================================== */

/* [hidden] must win over the display rules below (renderers toggle it) */
.quest-pane[hidden],
.tab-lock-overlay[hidden],
.econ-chip[hidden],
.pay-lines[hidden],
.match-end-note[hidden],
.catch-dex-note[hidden],
.dex-milestones[hidden] { display: none; }

/* ---------------------------------------------------------------------
   Item cards (wardrobe drawer + shop): price / days / gate / owned / new badges
   --------------------------------------------------------------------- */
.drawer-item-card,
.coat-card,
.shop-card,
.decor-card { position: relative; }

.item-price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 214, 102, 0.13);
    color: var(--gold);
    font: 800 11px/1.25 var(--font-body);
    white-space: nowrap;
}
.item-price .coin { font-size: 11px; }
.item-price.sparks { background: rgba(255, 226, 122, 0.16); color: #ffe27a; }
.item-price.free { background: rgba(127, 227, 196, 0.14); color: var(--mint); }
/* a premium price is a full number ("🔒 6,000 ..."): it may wrap on the narrow coat cards instead of overflowing */
.item-price.item-premium { white-space: normal; text-align: center; border-radius: 10px; }

/* "≈ N play days" under the price */
.item-days {
    max-width: 100%;
    color: var(--text-3);
    font: 700 10px/1.25 var(--font-body);
    text-align: center;
    overflow-wrap: anywhere;
}

/* why the item cannot be bought yet (Level N / Expired / Needs X) and the owned state */
.item-lock,
.item-owned {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    font: 800 10.5px/1.25 var(--font-body);
    text-align: center;
}
.item-lock { background: rgba(255, 111, 125, 0.14); border: 1px solid rgba(255, 111, 125, 0.45); color: #ffd0d6; }
.item-owned { background: rgba(127, 227, 196, 0.14); border: 1px solid rgba(127, 227, 196, 0.5); color: var(--mint); }

.item-new {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 1;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--grad-cta);
    border: 1.5px solid var(--ink);
    color: var(--ink);
    font: 900 9px/1.4 var(--font-body);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    pointer-events: none;
}

/* small cards (the 5-column coat grid) */
.coat-card .item-price,
.coat-card .item-lock,
.coat-card .item-owned { padding: 1px 5px; font-size: 9.5px; }
.coat-card .item-days { font-size: 9px; }

/* gated card: the art stays visible, just dimmed (the drawer marks every unowned card .locked, only gated ones carry a pill) */
.drawer-item-card:has(.item-lock) canvas,
.drawer-item-card:has(.item-lock) .item-card-icon,
.coat-card:has(.item-lock) canvas,
.shop-card.locked .shop-ico { filter: grayscale(0.5) opacity(0.75); }
/* fresh from an egg, a drop or a season reward */
.drawer-item-card.fresh,
.coat-card.fresh { border-color: var(--peach); box-shadow: 0 0 0 2px rgba(255, 179, 138, 0.35), 0 0 16px rgba(255, 179, 138, 0.25); }

/* "Buy for N?" row inside a card: the card takes the whole grid row while it asks */
.confirm-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.confirm-text { flex: 1 1 100%; color: var(--text-2); font: 800 11.5px/1.35 var(--font-body); text-align: center; }
.confirm-row .shop-buy-btn { flex: 1 1 0; min-height: 30px; padding: 4px 8px; font-size: 12px; }
.coat-card:has(> .confirm-row),
.drawer-item-card:has(> .confirm-row) { grid-column: 1 / -1; }

/* collar colours: a round swatch with its badges under it (v2 had the bare swatch in an 8-column grid) */
.color-swatch-grid { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 12px 8px; }
.color-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.color-cell .color-swatch-btn { width: 38px; height: 38px; flex-shrink: 0; }
.color-cell.locked .color-swatch-btn { opacity: 0.85; }

/* shop cards of the limited / service kinds */
.shop-card.owned { border-color: rgba(127, 227, 196, 0.5); }
.shop-card.upcoming { border-style: dashed; opacity: 0.8; }
.shop-card.service .item-days { font-size: 11px; }
.limited-timer { color: var(--gold); font-weight: 800; }

/* ---------------------------------------------------------------------
   Odds tables (fishing zones, wish fountain, eggs): every random reward shows its odds (H6)
   The custom property --pct (optional, e.g. "35%") draws a bar behind a row.
   --------------------------------------------------------------------- */
.odds-table { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.odds-table .odds-table { display: contents; }     /* a table nested in a table container flattens */
.odds-head { color: var(--cream); font: 800 14px/1.4 var(--font-display); }
.odds-note { color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
.odds-note.item-lock { display: block; padding: 8px 12px; border-radius: 14px; text-align: left; font-weight: 700; }
.odds-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255, 214, 102, 0.14) var(--pct, 0%), rgba(255, 244, 230, 0.05) var(--pct, 0%));
    border: 1.5px solid var(--line);
    color: var(--text-2);
    font: 700 13px/1.3 var(--font-body);
}
.odds-row > :not(.odds-pct):not(.odds-icon):not(.odds-rar) { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.odds-icon { flex: 0 0 auto; width: 24px; text-align: center; font-size: 16px; }
.odds-rar { flex: 0 0 auto; color: var(--rar, var(--text-3)); font: 800 10px/1.2 var(--font-body); letter-spacing: 0.6px; text-transform: uppercase; }
.odds-pct {
    flex-shrink: 0;
    min-width: 48px;
    margin-left: auto;
    text-align: right;
    color: var(--gold);
    font: 800 13px/1 var(--font-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.odds-row.miss { border-style: dashed; }
.odds-row.rarity-common { --rar: #c9bfe0; }
.odds-row.rarity-rare { --rar: #7cc8ff; }
.odds-row.rarity-epic { --rar: #c9a8ff; }
.odds-row.rarity-legendary { --rar: #ffc15e; }
.odds-row.rarity-mythic { --rar: #ff8fd0; }

/* ---------------------------------------------------------------------
   Tab strips: quests (daily / weekly / season) and fishing zones
   --------------------------------------------------------------------- */
.quest-tabs-wrap { flex-shrink: 0; padding: 12px 22px 0; }
.quest-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(12, 8, 26, 0.35);
    border: 1.5px solid var(--line);
}
.quest-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 36px;
    padding: 0 8px;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid transparent;
    color: var(--text-3);
    font: 800 13px/1.1 var(--font-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.16s ease, background 0.16s ease;
}
.quest-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.quest-tab.active,
.quest-tab[aria-selected="true"] { color: var(--ink); background: var(--cream); border-color: var(--ink); }

.zone-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.zone-tabs:empty { display: none; }
.zone-tabs > button {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid var(--line);
    color: var(--text-2);
    font: 700 13px/1 var(--font-body);
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.zone-tabs > button:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); border-color: var(--line-2); }
.zone-tabs > button.active,
.zone-tabs > button[aria-selected="true"],
.zone-tabs > button[aria-pressed="true"] {
    background: var(--grad-cta);
    color: var(--ink);
    border: 2px solid var(--ink);
    font-weight: 800;
}
.zone-tabs > button.locked { opacity: 0.6; }
.zone-tabs > button:disabled { opacity: 0.55; cursor: default; }

/* rod cards */
.rod-card.current { border-color: rgba(127, 227, 196, 0.6); }
.rod-card.owned:not(.current) { border-color: rgba(124, 200, 255, 0.4); }
.rod-payback { color: var(--mint); font: 700 11px/1.35 var(--font-body); }

/* ---------------------------------------------------------------------
   Quests: pick 2 of 5, all-clear card, notes
   --------------------------------------------------------------------- */
.quest-pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.quest-section-title {
    color: var(--text-2);
    font: 800 13px/1.3 var(--font-body);
    letter-spacing: 0.9px;
    text-transform: uppercase;
}
.quest-note {
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(255, 244, 230, 0.04);
    border: 1.5px dashed var(--line);
    color: var(--text-3);
    font-size: 12.5px;
    line-height: 1.5;
}
.quest-card.offered { border-style: dashed; border-color: var(--line-3); }
.quest-card.offered:hover { border-color: var(--peach); background: rgba(255, 179, 138, 0.08); }
.quest-card.picked:not(.done):not(.claimed) { border-color: rgba(255, 179, 138, 0.75); background: rgba(255, 179, 138, 0.08); }
.quest-card.locked { opacity: 0.55; }
.quest-card.extra { border-color: rgba(255, 214, 102, 0.55); }

.quest-pick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--grad-cta);
    color: var(--ink);
    font: 800 12.5px/1.15 var(--font-display);
    border: 2px solid var(--ink);
    box-shadow: 0 3px 0 rgba(20, 10, 34, 0.35);
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.quest-pick-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.quest-pick-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(20, 10, 34, 0.35); }
.quest-pick-btn:disabled { cursor: default; filter: saturate(0.6); transform: none; opacity: 0.7; }

.allclear-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 214, 102, 0.16), rgba(255, 138, 184, 0.1));
    border: 2px dashed rgba(255, 214, 102, 0.5);
}
.allclear-card.ready {
    border-style: solid;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(255, 214, 102, 0.28), 0 0 24px rgba(255, 214, 102, 0.22);
    animation: allclearGlow 2s ease-in-out infinite;
}
.allclear-card.claimed { border-style: solid; border-color: rgba(127, 227, 196, 0.5); background: rgba(127, 227, 196, 0.07); opacity: 0.62; }
@keyframes allclearGlow {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255, 214, 102, 0.28), 0 0 18px rgba(255, 214, 102, 0.16); }
    50% { box-shadow: 0 0 0 3px rgba(255, 214, 102, 0.4), 0 0 30px rgba(255, 214, 102, 0.3); }
}

/* ---------------------------------------------------------------------
   Season: header, XP bar, week track and a grid of tiers (reached = XP earned, claimed = reward received)
   --------------------------------------------------------------------- */
.season-head { display: flex; flex-direction: column; gap: 2px; }
.season-xp { display: flex; flex-direction: column; gap: 6px; }
.season-weektrack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(255, 244, 230, 0.05);
    border: 1.5px solid var(--line);
}
.season-weektrack.claimed { border-color: rgba(127, 227, 196, 0.55); background: rgba(127, 227, 196, 0.07); }
.season-weektrack .quest-title { flex: 1 1 auto; min-width: 0; }
.season-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
    min-width: 0;
}
.season-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 74px;
    padding: 10px 6px;
    border-radius: 16px;
    background: rgba(255, 244, 230, 0.05);
    border: 1.5px solid var(--line);
    color: var(--text-2);
    font: 700 11.5px/1.3 var(--font-body);
    text-align: center;
    overflow-wrap: anywhere;
}
.season-tier-num { color: var(--cream); font: 800 12px/1.2 var(--font-display); }
.season-tier-reward { color: var(--gold); font-weight: 800; }
.season-tier.reached { border-color: rgba(255, 179, 138, 0.7); background: rgba(255, 179, 138, 0.09); }
.season-tier.claimed { border-color: rgba(127, 227, 196, 0.55); background: rgba(127, 227, 196, 0.08); }
.season-tier .quest-state { position: absolute; top: 4px; right: 6px; color: var(--mint); font-size: 11px; }

/* ---------------------------------------------------------------------
   Daily login ladder (daily check-in): the modal body, the rung grid, its notes
   --------------------------------------------------------------------- */
.login-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.login-ladder {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}
.login-rung {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 78px;
    padding: 8px 4px;
    border-radius: 16px;
    background: rgba(255, 244, 230, 0.05);
    border: 1.5px dashed var(--line-2);
    color: var(--text-2);
    font: 700 11.5px/1.3 var(--font-body);
    text-align: center;
    overflow-wrap: anywhere;
}
.login-rung-day { color: var(--cream); font: 800 12px/1.2 var(--font-display); }
.login-rung-reward { color: var(--gold); font-weight: 800; }
.login-rung .quest-state { position: absolute; top: 4px; right: 6px; color: var(--mint); font-size: 11px; }
.login-rung.done { border-style: solid; border-color: rgba(127, 227, 196, 0.55); background: rgba(127, 227, 196, 0.08); opacity: 0.82; }
.login-rung.today {
    border-style: solid;
    border-color: var(--peach);
    background: linear-gradient(180deg, rgba(255, 179, 138, 0.24), rgba(255, 138, 184, 0.14));
    box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(255, 179, 138, 0.5), 0 8px 18px rgba(255, 128, 160, 0.25);
    color: var(--text);
    animation: rungPulse 2s ease-in-out infinite;
}
@keyframes rungPulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* a "there is something to claim" dot on the login / quest buttons (toggled by the core with .has-claim) */
.hud-btn.has-claim { position: relative; }
.hud-btn.has-claim::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--coral);
    border: 1.5px solid var(--ink);
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   HUD economy chip: fatigue / per-mode cap status, hangs under the player card
   --------------------------------------------------------------------- */
.hud-player-stats { position: relative; }
.econ-chip {
    position: absolute;
    top: calc(100% + 6px);
    left: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: min(300px, calc(100vw - 24px));
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(26, 18, 48, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid var(--line-2);
    color: var(--text-2);
    font: 800 11px/1.3 var(--font-body);
    pointer-events: none;
}
.econ-chip:empty { display: none; }
.econ-chip.fatigue { color: #ffe0b0; border-color: rgba(255, 179, 104, 0.6); background: rgba(74, 44, 24, 0.84); }
.econ-chip.capped { color: #ffd0d6; border-color: rgba(255, 111, 125, 0.6); background: rgba(74, 24, 40, 0.84); }

/* ---------------------------------------------------------------------
   Fail-closed calendar card (no trusted time: login, limited item, quests show it instead of a claim)
   --------------------------------------------------------------------- */
.time-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(124, 200, 255, 0.07);
    border: 1.5px dashed rgba(124, 200, 255, 0.45);
    color: var(--text-2);
    font: 700 13.5px/1.5 var(--font-body);
    text-align: center;
}
.time-gate-title { color: var(--cream); font: 800 15px/1.35 var(--font-display); }
.time-gate-text { color: var(--text-2); }
.time-gate-state { min-height: 1.4em; color: var(--text-3); font-size: 12.5px; }
.time-gate-state:empty { display: none; }
.time-gate .shop-buy-btn { min-height: 34px; padding: 6px 16px; font-size: 12.5px; }

/* ---------------------------------------------------------------------
   Another tab holds the save: full-screen notice (not a .game-modal)
   --------------------------------------------------------------------- */
.tab-lock-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    background: rgba(12, 6, 26, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.tab-lock-card {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 26px 22px 24px;
    border-radius: 28px;
    background: linear-gradient(180deg, #2a1f4f 0%, #1e1639 100%);
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 3px var(--cream), 0 26px 60px rgba(6, 2, 16, 0.7);
    text-align: center;
}
.tab-lock-ico { font-size: 44px; line-height: 1; animation: bounce 1.6s infinite; }
.tab-lock-text { color: var(--text); font: 800 16px/1.55 var(--font-display); text-wrap: balance; }
.tab-lock-card .shop-buy-btn { text-decoration: none; }

/* ---------------------------------------------------------------------
   Welcome back (migration report) and the veteran badge tiers
   --------------------------------------------------------------------- */
.welcome-back {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.55;
}
.welcome-title { color: var(--cream); font: 800 18px/1.25 var(--font-display); text-align: center; }
.welcome-intro { text-align: center; text-wrap: balance; }
.welcome-lines { display: grid; gap: 6px; list-style: none; }
.welcome-lines li {
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(255, 244, 230, 0.06);
    font-weight: 700;
    overflow-wrap: anywhere;
}
.welcome-package {
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(255, 244, 230, 0.05);
    border: 1.5px dashed var(--line-2);
    font-weight: 800;
    text-align: center;
    overflow-wrap: anywhere;
}
.welcome-package.granted { background: rgba(127, 227, 196, 0.1); border: 1.5px solid rgba(127, 227, 196, 0.55); color: #c9f5e6; }
.welcome-package.pending { background: rgba(124, 200, 255, 0.08); border-color: rgba(124, 200, 255, 0.5); color: #d5eeff; }
.welcome-package.expired { opacity: 0.7; }

.badge-veteran-1,
.badge-veteran-2,
.badge-veteran-3,
.badge-veteran-4 {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--badge, #ffd166) 82%, #fff) 0%, var(--badge, #ffd166) 100%);
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 2px var(--cream);
    color: var(--ink);
    font: 800 13px/1.3 var(--font-display);
    text-align: center;
}
.badge-veteran-1 { --badge: var(--badge-bronze); }
.badge-veteran-2 { --badge: var(--badge-silver); }
.badge-veteran-3 { --badge: var(--badge-gold); }
.badge-veteran-4 { --badge: var(--badge-diamond); }

/* ---------------------------------------------------------------------
   Zoo decor: bounded furniture sets (a summary, then one section per set with a grid of cards)
   --------------------------------------------------------------------- */
.decor-list { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.decor-summary {
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(255, 244, 230, 0.05);
    color: var(--text-2);
    font: 800 13px/1.4 var(--font-body);
    text-align: center;
}
.decor-set {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border-radius: 22px;
    background: rgba(255, 244, 230, 0.03);
    border: 1.5px solid var(--line);
}
.decor-set.locked { border-style: dashed; }
.decor-set-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.decor-set-name { flex: 1 1 auto; min-width: 0; color: var(--cream); font: 800 15px/1.25 var(--font-display); }
.decor-set-count {
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 214, 102, 0.13);
    color: var(--gold);
    font: 800 11.5px/1.3 var(--font-body);
}
.decor-set-badge {
    padding: 2px 10px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 209, 102, 0.75);
    color: var(--gold);
    font: 800 11px/1.3 var(--font-body);
}
.decor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr));
    gap: 10px;
    min-width: 0;
}
.decor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 12px 8px;
    border-radius: 18px;
    background: rgba(255, 244, 230, 0.05);
    border: 1.5px solid var(--line);
    color: var(--text);
    font: inherit;
    text-align: center;
    overflow-wrap: anywhere;
}
.decor-name { font-weight: 800; font-size: 13px; line-height: 1.3; }
.decor-card .shop-buy-btn { width: 100%; min-height: 32px; margin-top: auto; padding: 5px 10px; font-size: 12.5px; }
.decor-card.owned { border-color: rgba(127, 227, 196, 0.55); background: rgba(127, 227, 196, 0.08); }
.decor-card.locked { border-style: dashed; opacity: 0.62; }
.set-complete {
    border-color: rgba(255, 209, 102, 0.75);
    background: linear-gradient(180deg, rgba(255, 209, 102, 0.14), rgba(255, 138, 184, 0.07));
    box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.25), 0 0 22px rgba(255, 209, 102, 0.18);
}

/* ---------------------------------------------------------------------
   Match end: what the run was paid for, and why it was capped. Catch card: the Dex note lines.
   --------------------------------------------------------------------- */
.pay-lines { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; text-align: left; }
.pay-lines:empty { display: none; }
.pay-lines .pay-lines { display: contents; }
.pay-lines > :not(.pay-lines) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 12px;
    background: rgba(255, 244, 230, 0.06);
    color: var(--text-2);
    font: 700 13px/1.35 var(--font-body);
    overflow-wrap: anywhere;
}
.pay-label { min-width: 0; }
.pay-val,
.pay-lines b { flex-shrink: 0; color: var(--gold); font-weight: 800; white-space: nowrap; }
.match-end-note { color: var(--text-3); font-size: 12.5px; line-height: 1.5; text-align: center; text-wrap: balance; }
.match-end-note:empty { display: none; }
.catch-dex-note { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.catch-dex-note:empty { display: none; }
.catch-note-line { color: var(--mint); font: 800 13px/1.4 var(--font-body); text-align: center; text-wrap: balance; }

/* ---------------------------------------------------------------------
   Dex milestones (one row per species-count milestone)
   --------------------------------------------------------------------- */
.dex-milestones { display: flex; flex-direction: column; gap: 8px; }
.dex-milestones:empty { display: none; }
.dex-chip,
.dex-milestone {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 244, 230, 0.06);
    border: 1.5px solid var(--line);
    color: var(--text-3);
    font-size: 12px;
    font-weight: 800;
}
.dex-milestone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 8px 12px;
    border-radius: 14px;
}
.dex-milestone .quest-title { flex: 1 1 auto; min-width: 0; font-size: 13.5px; }
.dex-chip.got,
.dex-milestone.reached { background: rgba(127, 227, 196, 0.1); border-color: rgba(127, 227, 196, 0.55); color: var(--text-2); }
.dex-milestone.paid { opacity: 0.7; }
.dex-chip.got { background: var(--grad-mint); border-color: var(--ink); color: #123a33; }
.dex-reward.got { color: var(--mint); }
.dex-zones { font-size: 10.5px; }

/* ---------------------------------------------------------------------
   Shop sections, exchange panel, egg panel, wish status
   --------------------------------------------------------------------- */
.shop-section { display: flex; flex-direction: column; min-width: 0; }
.shop-section:has(> .shop-slot:empty) { display: none; }
.shop-slot { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.exchange-panel,
#eggPanel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 20px;
    background: rgba(255, 244, 230, 0.05);
    border: 1.5px solid var(--line-2);
    color: var(--text-2);
    font: 700 13px/1.5 var(--font-body);
}
.exchange-panel:empty,
#eggPanel:empty { display: none; }
.exchange-title { color: var(--cream); font: 800 15px/1.3 var(--font-display); }
.exchange-rate { color: var(--gold); font-weight: 800; }
.exchange-controls { display: flex; align-items: center; gap: 12px; }
.exchange-range { flex: 1 1 auto; min-width: 0; height: 28px; accent-color: var(--peach); cursor: pointer; }
.exchange-amount { flex-shrink: 0; min-width: 44px; text-align: right; color: var(--cream); font: 800 15px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.exchange-left { color: var(--text-3); font-size: 12.5px; }
.exchange-btn { width: 100%; }
.exchange-btn:disabled { opacity: 0.6; }
.exchange-panel .exchange-card { width: 100%; }
#eggPanel .shop-buy-btn { align-self: stretch; }
.egg-pity { padding: 8px 12px; border-radius: 14px; background: rgba(185, 163, 255, 0.1); border: 1.5px solid rgba(185, 163, 255, 0.35); color: var(--text-2); font-size: 12.5px; line-height: 1.5; }
.egg-result { padding: 8px 12px; border-radius: 14px; background: rgba(127, 227, 196, 0.1); border: 1.5px solid rgba(127, 227, 196, 0.5); color: #c9f5e6; font-weight: 800; text-align: center; }

.wish-status { color: var(--text-2); font-size: 13px; font-weight: 800; line-height: 1.45; text-align: center; }
.wish-status:empty { display: none; }

/* ---------------------------------------------------------------------
   Save backup / restore
   --------------------------------------------------------------------- */
.help-tools { display: flex; flex-direction: column; gap: 6px; }
.save-code {
    display: block;
    width: 100%;
    min-height: 76px;
    resize: vertical;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(12, 8, 26, 0.55);
    border: 1.5px solid var(--line-2);
    color: var(--text);
    font: 600 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
    overflow-wrap: anywhere;
    word-break: break-all;
}
.save-code[readonly] { color: var(--text-2); }
.save-code:focus { outline: none; border-color: var(--peach); box-shadow: 0 0 0 4px rgba(255, 179, 138, 0.16); }
.save-msg { color: var(--text-2); font-size: 13px; font-weight: 800; line-height: 1.45; }
.save-msg:empty { display: none; }
.save-msg.ok { color: #c9f5e6; }
.save-msg.warn { color: var(--gold); }
.save-msg.err { color: #ffd0d6; }

/* ---------------------------------------------------------------------
   V3 responsive (phones from 360 px: no horizontal scroll)
   --------------------------------------------------------------------- */
@media (max-width: 899px) {
    .season-track { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
}
@media (max-width: 640px) {
    .quest-tabs-wrap { padding: 10px 16px 0; }
    .season-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .decor-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); }
    .odds-row { padding: 6px 10px; gap: 8px; }
    .shop-slot { gap: 10px; }
    .econ-chip { left: 4px; }
}
@media (max-width: 420px) {
    .quest-tab { padding: 0 4px; font-size: 12px; }
    .login-ladder { gap: 6px; }
    .login-rung { min-height: 72px; font-size: 11px; }
    .season-tier { padding: 10px 4px; }
    .color-swatch-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .allclear-card.ready, .login-rung.today, .tab-lock-ico { animation: none; }
}

/* CRYPTO:BEGIN */
/* =====================================================================
   CRYPTO EDITION (cryptoui.js): points / wallet chip, locked gift badge, wallet modal, shop, Genesis badges.
   Everything here is inert unless the script shows it (offline the chip / buttons stay [hidden]).
   The portal build (CRYPTO_BUILD=0) strips this whole block.
   ===================================================================== */

/* [hidden] must win over the display rules of .stat-pill / .hud-btn */
#walletChip[hidden],
#shopCryptoSection[hidden],
.holder-gate[hidden] { display: none; }

#shopCryptoSection { display: flex; flex-direction: column; gap: 14px; }

/* points chip: third pill of the HUD player card */
.stat-pill.mew {
    position: relative;
    color: #e6dcff;
    border-color: rgba(185, 163, 255, 0.42);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}
.stat-pill.mew:hover { border-color: var(--lilac); background: rgba(46, 33, 84, 0.9); }
.stat-pill.mew .pill-ico { background: rgba(185, 163, 255, 0.22); }
.stat-pill.mew.is-mock { border-style: dashed; }
.stat-pill.mew.is-warn { color: #ffd0d6; border-color: rgba(255, 111, 125, 0.6); }

.wc-text { display: inline-flex; align-items: center; }
.wc-short { display: none; }
.wc-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 2px rgba(127, 227, 196, 0.28);
}
.wc-addr {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
    letter-spacing: 0.2px;
}
.wc-bal,
.wc-bal-short { color: var(--cream); font-weight: 900; }
.wc-bal-short { display: none; }   /* phones: compact balance (12k), see the 640px block */
.wc-unit { font-size: 0.82em; font-weight: 800; opacity: 0.75; }
/* the locked welcome gift next to the balance: a small badge, never a balance */
.wc-gift {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 209, 102, 0.16);
    border: 1px solid rgba(255, 209, 102, 0.4);
    color: var(--gold);
    font-size: 0.8em;
    font-weight: 900;
    line-height: 1.3;
}
.wc-gift-amt { margin: 0 1px; }
.wc-mock {
    padding: 1px 5px;
    border-radius: 6px;
    background: var(--gold);
    color: var(--ink);
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: 0.4px;
}

/* something to claim: a soft mint ring pulses around the chip */
.stat-pill.mew.can-claim::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    border: 2px solid var(--mint);
    opacity: 0;
    pointer-events: none;
    animation: walletPulse 1.8s ease-out infinite;
}
@keyframes walletPulse {
    0% { opacity: 0.9; transform: scale(0.96); }
    70%, 100% { opacity: 0; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .stat-pill.mew.can-claim::after { animation: none; opacity: 0.65; }
}

/* Genesis badge on wardrobe cards: data-genesis is 'locked' (not owned yet) or 'owned' */
.drawer-item-card[data-genesis]::after,
.coat-card[data-genesis]::after {
    content: '✦ Genesis';
    position: absolute;
    top: 3px;
    right: 3px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(185, 163, 255, 0.24);
    border: 1px solid rgba(185, 163, 255, 0.55);
    color: #e6dcff;
    font: 800 8.5px/1.5 var(--font-body);
    letter-spacing: 0.3px;
    pointer-events: none;
}
.drawer-item-card[data-genesis="locked"]::after,
.coat-card[data-genesis="locked"]::after {
    content: '🔒 Genesis';
    background: rgba(255, 111, 125, 0.22);
    border-color: rgba(255, 111, 125, 0.55);
    color: #ffd0d6;
}
.drawer-item-card[data-genesis="locked"] canvas,
.drawer-item-card[data-genesis="locked"] .item-card-icon,
.coat-card[data-genesis="locked"] canvas { filter: grayscale(0.6) opacity(0.72); }
/* the badge text follows the page language (js/i18n.js sets <html lang>) */
:root:lang(zh-Hans) .drawer-item-card[data-genesis]::after,
:root:lang(zh-Hans) .coat-card[data-genesis]::after { content: '✦ 创世'; }
:root:lang(zh-Hans) .drawer-item-card[data-genesis="locked"]::after,
:root:lang(zh-Hans) .coat-card[data-genesis="locked"]::after { content: '🔒 创世'; }
:root:lang(ko) .drawer-item-card[data-genesis]::after,
:root:lang(ko) .coat-card[data-genesis]::after { content: '✦ 제네시스'; }
:root:lang(ko) .drawer-item-card[data-genesis="locked"]::after,
:root:lang(ko) .coat-card[data-genesis="locked"]::after { content: '🔒 제네시스'; }

/* MOCK / THỬ NGHIỆM: never hidden while the chain is the local mock */
.mock-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: repeating-linear-gradient(45deg, #ffd166 0 8px, #ffc247 8px 16px);
    border: 1.5px solid var(--ink);
    color: var(--ink);
    font: 900 10px/1.4 var(--font-body);
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.mock-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 209, 102, 0.1);
    border: 1.5px dashed rgba(255, 209, 102, 0.6);
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.4;
}

/* Wallet & Genesis shop modals: scroll inside, fit iOS Safari with the URL bar */
.game-modal[data-crypto] .modal-content { max-height: calc(100vh - 44px); max-height: calc(100dvh - 44px); }

.wallet-view { display: flex; flex-direction: column; gap: 14px; }
.wallet-lead { font-size: 14px; line-height: 1.55; color: var(--text-2); }

.wallet-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(255, 244, 230, 0.05);
    border: 1.5px solid var(--line);
}
.wallet-card > .drawer-section-title { margin-bottom: 0; flex-wrap: wrap; }
.wallet-card .modal-hint { margin: 0; }

.wallet-note {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(124, 200, 255, 0.08);
    border: 1.5px solid rgba(124, 200, 255, 0.3);
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.5;
}
.wallet-note.warn { background: rgba(255, 209, 102, 0.09); border-color: rgba(255, 209, 102, 0.42); }
.wallet-note.err { background: rgba(255, 111, 125, 0.1); border-color: rgba(255, 111, 125, 0.5); color: #ffd0d6; }
.wallet-note.signin { background: rgba(185, 163, 255, 0.08); border-color: rgba(185, 163, 255, 0.38); }
.wallet-note.signin strong { color: var(--cream); font-size: 13.5px; }
.wallet-note.signin p { margin-top: 4px; }

.wallet-note a,
.wallet-links a,
.wallet-lasttx a,
.tx-link { color: var(--sky); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.tx-sig { font: 700 11.5px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--text-3); }

/* wallet picker */
.wallet-picker { display: flex; flex-direction: column; gap: 10px; }
.wallet-picker > .drawer-section-title { margin-bottom: 0; }
.wallet-list { display: flex; flex-direction: column; gap: 8px; }
/* the wallets that were not found in this browser: Install / Open in app links under their own small title */
.wallet-sub-title { margin-top: 4px; color: var(--text-2); font: 800 12.5px/1.3 var(--font-body); letter-spacing: 0.02em; }
.wallet-list-other .wallet-opt { background: rgba(255, 244, 230, 0.03); }
.wallet-list-other .wallet-opt-tag { background: rgba(124, 200, 255, 0.16); color: var(--sky); }
.wallet-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(255, 244, 230, 0.06);
    border: 1.5px solid var(--line-2);
    color: var(--text);
    font: 800 14.5px/1.2 var(--font-body);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.wallet-opt:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--lilac); background: rgba(185, 163, 255, 0.12); }
.wallet-opt:disabled { opacity: 0.55; cursor: default; }
.wallet-opt-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; object-fit: contain; }
.wallet-opt-icon.fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 244, 230, 0.1);
    font-size: 16px;
}
.wallet-opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-opt-tag {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 244, 230, 0.1);
    color: var(--text-2);
    font-size: 10.5px;
    font-weight: 900;
}
.wallet-opt-tag.mock { background: var(--gold); color: var(--ink); }
.wallet-links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.wallet-remember {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 2px;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}
.wallet-remember input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--peach); cursor: pointer; }
.wallet-remember em { color: var(--text-3); font-style: normal; }

/* connected wallet */
.wallet-hero {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 12px 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(185, 163, 255, 0.16), rgba(185, 163, 255, 0.06));
    border: 1.5px solid rgba(185, 163, 255, 0.4);
}
.wallet-hero-main { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wallet-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 800 16px/1.2 var(--font-display); color: var(--cream); }
.wallet-addr {
    font: 700 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
    color: var(--text-2);
    word-break: break-all;
    user-select: text;
    -webkit-user-select: text;
}
.wallet-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wallet-hero-actions .shop-buy-btn { min-height: 34px; padding: 6px 12px; font-size: 12.5px; }

.wallet-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.4;
}
.wallet-banner.ok { background: rgba(127, 227, 196, 0.12); border: 1.5px solid rgba(127, 227, 196, 0.55); color: #c9f5e6; }
.wallet-banner.err { background: rgba(255, 111, 125, 0.12); border: 1.5px solid rgba(255, 111, 125, 0.55); color: #ffd0d6; }
.wallet-banner.info { background: rgba(124, 200, 255, 0.1); border: 1.5px solid rgba(124, 200, 255, 0.45); color: #d5eeff; }   /* sent, still being credited: not a failure */

.wallet-balances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bal-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 244, 230, 0.05);
    border: 1.5px solid var(--line);
}
.bal-card.mew { background: rgba(185, 163, 255, 0.1); border-color: rgba(185, 163, 255, 0.4); }
.bal-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-3); }
.bal-value { font: 800 22px/1.1 var(--font-display); color: var(--cream); overflow-wrap: anywhere; }

.claim-card { background: rgba(255, 209, 102, 0.06); border-color: rgba(255, 209, 102, 0.4); }
.claim-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.claim-num { font: 800 30px/1 var(--font-display); color: var(--gold); overflow-wrap: anywhere; }
.claim-unit { font-size: 13px; font-weight: 700; color: var(--text-2); }

.cap-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; color: var(--text-2); font-size: 13px; font-weight: 700; }
.cap-day { color: var(--text-3); font-size: 12px; }

.quest-reward.mew { background: rgba(185, 163, 255, 0.16); color: #e6dcff; }
.quest-card.server { border-color: rgba(185, 163, 255, 0.3); }
.quest-card.server.done { border-color: rgba(127, 227, 196, 0.6); }
.server-quests {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1.5px dashed var(--line-2);
}
.server-quests > .drawer-section-title { margin-bottom: 0; }
.server-quests .modal-hint { margin: 0; }

.dex-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.shop-price.mew { color: #e6dcff; background: rgba(185, 163, 255, 0.16); overflow-wrap: anywhere; }
.sku-grant { color: var(--gold); font-size: 13px; font-weight: 800; }

.lb-list { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.lb-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(255, 244, 230, 0.05);
    font-size: 13px;
    font-weight: 700;
}
.lb-rank { min-width: 30px; color: var(--gold); }
.lb-wallet { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.lb-amt { color: #e6dcff; white-space: nowrap; }

.wallet-rules { color: var(--text-2); font-size: 12.5px; }
.wallet-rules summary { color: var(--cream); font-weight: 800; cursor: pointer; }
.wallet-rules ul { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0 18px; line-height: 1.45; }
.wallet-lasttx { color: var(--text-3); font-size: 12.5px; }

/* Genesis shop */
.market-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(185, 163, 255, 0.1);
    border: 1.5px solid rgba(185, 163, 255, 0.35);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 700;
}
.market-status .shop-buy-btn { min-height: 34px; padding: 6px 14px; font-size: 12.5px; }
.market-card { position: relative; }
.market-card.owned { border-color: rgba(127, 227, 196, 0.5); }
.market-card.focus { border-color: var(--lilac); box-shadow: 0 0 0 2px var(--lilac), 0 0 22px rgba(185, 163, 255, 0.4); animation: marketFocus 1.1s ease 2; }
@keyframes marketFocus {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}
.market-kind {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(185, 163, 255, 0.2);
    color: #e6dcff;
    font-size: 10.5px;
    font-weight: 900;
}
.market-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-top: 12px;
    border-radius: 22px;
    background: radial-gradient(circle at 50% 40%, rgba(185, 163, 255, 0.28), rgba(30, 21, 58, 0.4));
    border: 1.5px solid var(--line-2);
}
.market-canvas { width: 56px; height: 56px; }
.market-supply { color: var(--text-3); font-size: 11.5px; font-weight: 700; }
.market-actions { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: auto; }
.market-card .market-actions .shop-buy-btn { margin-top: 0; }
.market-actions .shop-buy-btn:disabled { opacity: 0.85; }
/* a blocked action (a buy while a payment is still being confirmed) must not look clickable */
#walletModal .shop-card .shop-buy-btn:disabled,
.market-actions .shop-buy-btn.btn-cat:disabled { opacity: 0.5; }

@media (max-width: 640px) {
    /* chip: dot + balance only (the address stays in the wallet modal); the balance is the compact form (12k) */
    .wc-full, .wc-addr, .wc-unit { display: none; }
    .wc-short { display: inline; }
    .wc-bal { display: none; }
    .wc-bal-short { display: inline; }
    /* the gift badge hangs off the bottom right corner of the chip (like the MOCK tag off the left one): it must not widen the player
       card, whose right edge has to stay left of the radar rim */
    .stat-pill.mew .wc-gift { position: absolute; right: -5px; bottom: -8px; gap: 0; padding: 0 3px; background: #2a1f4f; font-size: 9px; line-height: 1.5; }
    .wc-gift-amt { display: none; }
    /* HUD chip: the MOCK tag hangs off the corner instead of widening the player card */
    .stat-pill.mew .wc-mock { position: absolute; left: -3px; right: auto; bottom: -6px; }   /* left corner: the right one points at the radar */

    .wallet-card { padding: 12px 12px; }
    .wallet-hero-actions { width: 100%; }
    .wallet-hero-actions .shop-buy-btn { flex: 1; }
    .bal-value { font-size: 19px; }
    .claim-num { font-size: 26px; }
    .market-status { flex-direction: column; align-items: stretch; }
}
@media (max-width: 420px) {
    .market-grid { grid-template-columns: minmax(0, 1fr); }
    .wallet-balances { gap: 8px; }
}
@media (max-width: 380px) {
    /* the points chip is the third pill of the HUD player card: drop the Sparks pill so the card keeps its 58px height and
       stays clear of the radar (Sparks are still in the shop) */
    body.crypto-on .hud-wallet .stat-pill.sparks { display: none; }
}
@media (max-width: 347px) {
    /* very narrow phones: a shorter HP bar so the card's right edge stays left of the radar rim (it overlapped it at 320px
       even before the wallet chip existed; 82px keeps 4-char balances such as 1.2k / 1.2M clear too);
       GameEngine.layoutHUD re-measures through its ResizeObserver */
    .hud-vitals { width: 82px; }
}

/* ---------------------------------------------------------------------
   Access gate: a full-screen lock until the player did the social step and signed in with a wallet. It is drawn as a teaser first (.is-teaser:
   the world and the HUD stay visible behind a soft shade, one button at the bottom) and as the card once the player pressed that button; the
   card dims the world only a little. Either way the layer covers the whole page, so no click reaches the locked game. Like the tab lock it is
   not a .game-modal, so the game's Esc / closeAll cannot dismiss it (the ✕ and Esc of the card only fold it back into the teaser). Above the
   modals (z-index 100), below the human-check box; the in-page test-wallet approval stays above it.
   --------------------------------------------------------------------- */
.holder-gate {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    overflow-y: auto;
    padding: 20px 16px;
    background: rgba(12, 6, 26, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.holder-gate:focus { outline: none; }
#mockWalletModal.game-modal { z-index: 320; }
/* the teaser: clear at the top (the Plaza shows through), darker towards the panel at the bottom centre; no blur */
.holder-gate.is-teaser {
    align-items: flex-end;
    justify-content: center;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(12, 6, 26, 0) 0%, rgba(12, 6, 26, 0.12) 45%, rgba(12, 6, 26, 0.7) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.holder-gate-teaser {
    width: 100%;
    max-width: 400px;
    margin-top: auto;   /* (bottom of the page; a panel taller than a short landscape screen starts at the top and scrolls) */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 14px;
    border-radius: 24px;
    background: rgba(30, 22, 57, 0.9);
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 3px var(--cream), 0 18px 40px rgba(6, 2, 16, 0.55);
    text-align: center;
}
.holder-gate-teaser-title { color: var(--cream); font: 800 26px/1.1 var(--font-display); }
/* the button of the teaser: it pulses gently until it is pressed (not while it waits for the first answer, nor under hover / reduced motion) */
.gate-cta { min-height: 52px; font-size: 18px; animation: gateCtaPulse 2.4s ease-in-out infinite; }
.gate-cta:hover, .gate-cta:active, .gate-cta:disabled { animation: none; }
@keyframes gateCtaPulse {
    0%, 100% { transform: scale(1); box-shadow: var(--sticker), 0 4px 0 2.5px rgba(20, 10, 34, 0.35), 0 0 0 0 rgba(255, 157, 187, 0.5); }
    50% { transform: scale(1.035); box-shadow: var(--sticker), 0 4px 0 2.5px rgba(20, 10, 34, 0.35), 0 0 18px 5px rgba(255, 157, 187, 0.5); }
}
.holder-gate-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 24px 20px 20px;
    border-radius: 28px;
    background: linear-gradient(180deg, #2a1f4f 0%, #1e1639 100%);
    border: 2px solid var(--ink);
    box-shadow: 0 0 0 3px var(--cream), 0 26px 60px rgba(6, 2, 16, 0.7);
    text-align: center;
}
.holder-gate-ico { align-self: center; font-size: 44px; line-height: 1; animation: bounce 1.6s infinite; }
.holder-gate-title { color: var(--cream); font: 800 20px/1.3 var(--font-display); text-wrap: balance; }
.holder-gate-text { color: var(--text-2); font: 700 14px/1.55 var(--font-body); text-wrap: pretty; }
.holder-gate-card .wallet-card,
.holder-gate-card .wallet-picker,
.holder-gate-card .wallet-note,
.holder-gate-card .wallet-banner,
.holder-gate-card .modal-hint { text-align: left; }
.gate-actions { display: flex; flex-direction: column; gap: 8px; }
.gate-actions .shop-buy-btn { text-decoration: none; text-align: center; justify-content: center; }
/* the social step: the post and the two links to X (a tick once clicked) */
.social-post { align-self: center; color: var(--lilac); font-size: 13.5px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.social-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.social-btn.done { border-color: rgba(127, 227, 196, 0.6); }
.social-check { color: var(--mint); font-weight: 900; }
.gate-langs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.gate-lang {
    min-height: 30px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1.5px solid var(--line-2);
    background: transparent;
    color: var(--text-2);
    font: 800 12px/1 var(--font-body);
    cursor: pointer;
}
.gate-lang.active { background: var(--cream); border-color: var(--cream); color: var(--ink); }
/* the ✕ of the card (top right): back to the teaser */
.holder-gate-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--line-2);
    background: transparent;
    color: var(--text-2);
    font: 800 14px/1 var(--font-body);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.holder-gate-close:hover, .holder-gate-close:focus-visible { color: var(--cream); border-color: var(--line-3); }

/* Premium shop sections: Limited, Apex, Genesis, services */
.market-section { display: flex; flex-direction: column; gap: 10px; }
.market-section > .drawer-section-title { margin-bottom: 0; }
.market-section > .modal-hint { margin: 0; }
.market-card.soon { opacity: 0.8; }
/* the locked welcome gift (wallet view) and the lock notes of the shop */
.gift-card { background: rgba(255, 209, 102, 0.07); border-color: rgba(255, 209, 102, 0.4); }
.gift-title { color: var(--cream); font: 800 18px/1.3 var(--font-display); overflow-wrap: anywhere; }
.gift-unlock { color: var(--gold); font-size: 13px; font-weight: 800; }
.shop-lock-btn:disabled { opacity: 0.8; }
.wallet-note.shop-locked { font-weight: 800; }

@media (max-width: 420px) {
    .holder-gate { padding: 12px 12px; }
    .holder-gate.is-teaser { padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .holder-gate-card { padding: 20px 14px 16px; border-radius: 24px; }
    .holder-gate-title { font-size: 18px; }
    .holder-gate-teaser { gap: 8px; padding: 14px 14px 12px; border-radius: 20px; }
    .holder-gate-teaser-title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .holder-gate-ico { animation: none; }
    .gate-cta { animation: none; }
}
/* v5 welcome gift: the HUD gift box (claimed gift), the flying coins of the claim and the claim screen */
.stat-pill.mewgift { color: #ffe7a3; border-color: rgba(255, 210, 74, 0.55); }
.stat-pill.mewgift[hidden] { display: none; }
.stat-pill.mewgift .pill-ico { background: rgba(255, 210, 74, 0.2); }
.stat-pill.mewgift .mp-unit { margin-left: 4px; font-size: 0.78em; opacity: 0.85; }
.stat-pill.mewgift .mp-short { display: none; }
@media (max-width: 640px) {
    .stat-pill.mewgift .mp-full, .stat-pill.mewgift .mp-unit { display: none; }
    .stat-pill.mewgift .mp-short { display: inline; }
}
.stat-pill.mewgift.mew-hit { animation: mewHit 0.22s ease-out; }
.stat-pill.mewgift.mew-done { animation: mewDone 1.1s ease-out; }
@keyframes mewHit {
    0% { transform: scale(1); }
    45% { transform: scale(1.14); box-shadow: 0 0 16px rgba(255, 210, 74, 0.85); }
    100% { transform: scale(1); }
}
@keyframes mewDone {
    0% { box-shadow: 0 0 0 0 rgba(255, 210, 74, 0.9); }
    100% { box-shadow: 0 0 0 18px rgba(255, 210, 74, 0); }
}
.coin-flight { position: fixed; inset: 0; pointer-events: none; z-index: 400; overflow: hidden; }
.coin-flight .flying-coin {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 26px;
    will-change: transform, opacity;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}
.gift-claim .modal-body { text-align: center; }
.gift-claim-coin { font-size: 64px; line-height: 1; margin: 6px auto 8px; animation: giftCoinBob 1.6s ease-in-out infinite; }
.gift-claim-coin .coin { box-shadow: inset 0 0 0 3px #8a5210, 0 0 28px rgba(255, 210, 74, 0.55); }
@keyframes giftCoinBob {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-8px) rotate(6deg); }
}
.gift-claim-lead { margin: 4px 0 6px; font-weight: 700; }
.gift-claim-amount { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 6px 0 14px; }
.gift-claim-num { font-size: 40px; font-weight: 900; color: #ffd24a; text-shadow: 0 2px 0 #8a5210; }
.gift-claim-unit { font-size: 18px; font-weight: 800; color: #ffe7a3; }
.gift-claim-done { font-weight: 800; color: var(--mint, #7fe3c4); margin: 6px 0; }
@media (prefers-reduced-motion: reduce) {
    .gift-claim-coin, .stat-pill.mewgift.mew-hit, .stat-pill.mewgift.mew-done { animation: none; }
}

/* username card of the wallet modal */
.username-row { display: flex; gap: 8px; align-items: center; }
.username-input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(185, 163, 255, 0.45);
    background: rgba(20, 14, 40, 0.65);
    color: inherit;
    font: inherit;
    font-weight: 700;
}
.username-input:focus { outline: none; border-color: var(--lilac, #b9a3ff); box-shadow: 0 0 0 3px rgba(185, 163, 255, 0.25); }
.username-row .shop-buy-btn { flex: 0 0 auto; }

.gift-claim .onboard-name { margin: 10px 0 12px; }
.gift-claim .onboard-name .username-input { text-align: center; font-size: 18px; }

/* CRYPTO:END */