/* Fantasy Idle — dark fantasy theme.
   Night stone and bronze, gold leaf on what matters, parchment text. Headings are carved (Cinzel), the
   rest stays in a clean sans for numbers. Colors are tokens here; components below only use them,
   except for the game's own meanings (rarity, skill and zone colors come from the data). */
:root {
    color-scheme: dark;
    --bg-color: #0d0a07;
    --panel: #1a1510;
    --panel-2: #110d09;
    --well: rgba(0, 0, 0, 0.26);            /* a recess inside a panel */
    --glass-bg: var(--panel);                /* older name, still read by a few rules */
    --glass-border: rgba(214, 170, 92, 0.2); /* bronze hairline */
    --line: rgba(214, 170, 92, 0.2);
    --line-strong: rgba(214, 170, 92, 0.48);
    --corner: rgba(214, 170, 92, 0.6);
    --text-main: #efe6d2;                    /* parchment */
    --text-muted: #a8998a;                   /* weathered */
    --heading: #f3dfb1;                      /* gilded */
    --accent-color: #d6aa5c;                 /* bronze gold */
    --accent-hover: #f0c674;
    --gold-color: #fcd34d;
    --iron-color: #cbd5e1;
    --gem-color: #e879f9;
    --atk-color: #f87171;
    --def-color: #60a5fa;
    --arcane: #b794f6;                       /* prestige, perks, affixes, mastery */
    --verdigris: #34d399;                    /* working, done */
    --ember: #dc2626;                        /* danger */
    --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 14px 32px rgba(0, 0, 0, 0.55);
    --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Cinzel', 'Trajan Pro', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    --radius: 14px;
}

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

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-main);
    background-color: var(--bg-color);
    background-image:
        radial-gradient(ellipse 60% 45% at 50% -8%, rgba(214, 150, 70, 0.15), transparent 70%),
        radial-gradient(ellipse 50% 60% at 100% 100%, rgba(130, 40, 20, 0.14), transparent 70%),
        radial-gradient(ellipse 40% 50% at 0% 60%, rgba(40, 70, 90, 0.12), transparent 70%);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 2rem;
    position: relative;
    overflow-x: hidden;
}
body::before { /* the guild hall (assets/paint/guildhall.webp) behind everything, dimmed, under a stone grain */
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.7 0 0 0 0 0.45 0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
        radial-gradient(ellipse 80% 70% at 50% 45%, rgba(13, 10, 7, 0.45), rgba(13, 10, 7, 0.82)),
        url(assets/paint/guildhall.webp);
    background-size: auto, cover, cover;
    background-position: 0 0, center, center 55%;
}
::selection { background: rgba(214, 170, 92, 0.35); color: #fff; }

#app.layout-sidebar {
    width: 100%; max-width: 1600px;
    display: flex; flex-direction: row; gap: 1.5rem; align-items: stretch;
}

/* ---------- panels ---------- */
.glass-panel {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(255, 236, 200, 0.035), transparent 42%),
        linear-gradient(180deg, rgba(26, 21, 16, 0.84), rgba(17, 13, 9, 0.9));
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 230, 180, 0.06), inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}
/* the header is thinner glass: the guild hall shows through it */
#header.glass-panel { background: linear-gradient(180deg, rgba(255, 236, 200, 0.035), transparent 42%), linear-gradient(180deg, rgba(26, 21, 16, 0.66), rgba(17, 13, 9, 0.76)); }
/* the sidebar stands on a painting of its own: the hall's red banner behind the mark, its trophy
   cabinet behind the places, under a shade that keeps the names easy to read */
#sidebar.glass-panel {
    background:
        linear-gradient(180deg, rgba(14, 10, 7, 0.42) 0%, rgba(14, 10, 7, 0.74) 20%, rgba(14, 10, 7, 0.86) 48%, rgba(14, 10, 7, 0.8) 100%),
        url(assets/paint/hall.webp) 86% 0 / auto 100% no-repeat,
        #15100b;
}
/* A painted panel (render.js painted()): its place's painting under a shade that is lighter at the top,
   where the title sits, and darker where the cards are; the cards let a little of it through. */
.glass-panel.painted, .dock-group.painted, .modal-content.painted {
    background:
        linear-gradient(180deg, rgba(17, 13, 9, 0.38), rgba(17, 13, 9, 0.66) 38%, rgba(17, 13, 9, 0.8)),
        var(--art) var(--art-at, center 35%) / cover no-repeat,
        var(--panel-2);
    -webkit-backdrop-filter: none; backdrop-filter: none; /* nothing shows through a painting */
}
.painted :is(.node-card, .shop-item, .medal, .ach-item, .plot-card, .course-slot, .course-run, .pet-card, .dungeon-body, .backup-row,
    .info-strip, .clan-boss, .bank-tile, .seed-bag, .forge-bar) {
    background: linear-gradient(180deg, rgba(33, 26, 19, 0.8), rgba(18, 13, 9, 0.86));
}
.painted .node-card.active { background: linear-gradient(180deg, rgba(33, 26, 19, 0.82) 0%, color-mix(in srgb, var(--accent, var(--verdigris)) 18%, rgba(18, 13, 9, 0.88)) 100%); }
.painted .panel-header h2, .painted .dock-title { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95); }
.glass-panel::before { /* gilded corner brackets */
    content: ""; position: absolute; inset: 5px; pointer-events: none;
    background:
        linear-gradient(var(--corner), var(--corner)) top left / 14px 1px no-repeat,
        linear-gradient(var(--corner), var(--corner)) top left / 1px 14px no-repeat,
        linear-gradient(var(--corner), var(--corner)) top right / 14px 1px no-repeat,
        linear-gradient(var(--corner), var(--corner)) top right / 1px 14px no-repeat,
        linear-gradient(var(--corner), var(--corner)) bottom left / 14px 1px no-repeat,
        linear-gradient(var(--corner), var(--corner)) bottom left / 1px 14px no-repeat,
        linear-gradient(var(--corner), var(--corner)) bottom right / 14px 1px no-repeat,
        linear-gradient(var(--corner), var(--corner)) bottom right / 1px 14px no-repeat;
}
header { display: flex; flex-direction: column; gap: 0.5rem; }
h2 {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; letter-spacing: 0.03em;
    color: var(--heading); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); text-wrap: balance;
}
.panel-header > h2 { flex-shrink: 0; }
.panel-header {
    display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem;
    padding-bottom: 0.6rem; margin-bottom: 1rem;
    border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, var(--line-strong), transparent 85%) 1;
}
.section-title {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 0.6rem;
    font-family: var(--font-display); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-color);
}
.muted { color: var(--text-muted); }
.small { font-size: 0.78rem; }
.warn { color: #fbbf24; }
.ok { color: #4ade80; }
.missing { color: #f87171; }
.req { font-size: 0.78rem; font-weight: 700; color: #f87171; }
.b { font-weight: 700; }
.sp-text { color: #fbbf24; text-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }

/* ---------- buttons ---------- */
button {
    position: relative; overflow: hidden;
    padding: 0.8rem 1.5rem; border-radius: 10px;
    font-family: inherit; font-weight: 600; font-size: 0.95rem; color: var(--text-main);
    background: linear-gradient(180deg, #2a2119, #1a140f);
    border: 1px solid rgba(214, 170, 92, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.08), 0 2px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s;
}
button:hover {
    transform: translateY(-1px); color: #fff3d6; border-color: rgba(240, 198, 116, 0.7);
    background: linear-gradient(180deg, #34291e, #1f1812);
    box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.12), 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 12px rgba(214, 170, 92, 0.16);
}
button:active { transform: translateY(1px) scale(0.97); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55); transition-duration: 0.05s; }
button[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
[role="button"]:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.big { padding: 0.9rem 1.6rem; font-size: 1rem; }
.mini-btn { padding: 0.35rem 0.6rem; font-size: 0.75rem; border-radius: 8px; }
.mini-btn.active { color: #fff3d6; border-color: var(--accent-hover); background: linear-gradient(180deg, #4a3818, #2a1f0e); box-shadow: 0 0 10px rgba(214, 170, 92, 0.3); }
.mini-btn.danger { color: #fca5a5; border-color: rgba(239, 68, 68, 0.5); }
.mini-btn.danger:hover { border-color: #f87171; background: linear-gradient(180deg, #3a1512, #1f0b09); }
/* the primary action: bronze */
.prestige-btn { color: #fff3d6; border-color: #b8893f; background: linear-gradient(180deg, #7c5a26, #4d3613); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); }
.prestige-btn:hover { color: #fff; border-color: #f0c674; background: linear-gradient(180deg, #936c2f, #5c4118); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 14px rgba(214, 170, 92, 0.35); }
/* prestige itself: arcane */
.prestige-btn.arcane { color: #f3e8ff; border-color: #a78bfa; background: linear-gradient(180deg, #53358f, #2b1a55); }
.prestige-btn.arcane:hover { border-color: #d8b4fe; background: linear-gradient(180deg, #6443a8, #352066); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 16px rgba(167, 139, 250, 0.45); }
/* to battle: war red */
.prestige-btn.war { color: #fff1dc; border-color: #e0a45c; background: linear-gradient(180deg, #9b2c1c, #5a120b); font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em; }
.prestige-btn.war:hover { border-color: #fcd34d; background: linear-gradient(180deg, #b3341f, #6a160d); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 18px rgba(220, 38, 38, 0.4); }
/* spend gold: gilded */
.gold-btn { padding: 0.6rem 1.2rem; font-weight: 800; color: #1f1406; border-color: #f7d88a; background: linear-gradient(180deg, #e2b95f, #9c7127); text-shadow: 0 1px 0 rgba(255, 240, 200, 0.35); }
.gold-btn:hover { color: #140d03; border-color: #fff1c9; background: linear-gradient(180deg, #f0cb72, #b08233); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 16px rgba(252, 211, 77, 0.4); }
/* spend skill points: arcane */
.shop-btn { padding: 0.6rem 1.2rem; font-weight: 700; color: #f3e8ff; border-color: rgba(167, 139, 250, 0.7); background: linear-gradient(180deg, #3f2a6e, #22143f); }
.shop-btn:hover { border-color: #d8b4fe; background: linear-gradient(180deg, #4f3589, #2b1a52); box-shadow: 0 0 14px rgba(167, 139, 250, 0.4); }
.sell-btn { color: #fde68a; border-color: rgba(252, 211, 77, 0.4); }
.sell-btn:hover { border-color: #fcd34d; box-shadow: 0 0 12px rgba(252, 211, 77, 0.25); }
.equip-btn { color: #bfdbfe; border-color: rgba(96, 165, 250, 0.45); }
.equip-btn:hover { border-color: #93c5fd; box-shadow: 0 0 12px rgba(96, 165, 250, 0.3); }
.btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.toggle { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-main); cursor: pointer; }
.toggle input { accent-color: var(--accent-color); }

/* ---------- fields ---------- */
.material-select, .text-input {
    color: var(--text-main); font: inherit; font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(214, 170, 92, 0.3); border-radius: 8px; outline: none;
}
.material-select { padding: 0.4rem 0.8rem; font-weight: 600; cursor: pointer; }
.material-select:focus, .text-input:focus { border-color: var(--accent-hover); }
.material-select option { background: #1a1510; }
.text-input { width: 100%; padding: 0.5rem 0.65rem; margin-top: 0.2rem; }
.auth-error { color: #f87171; font-size: 0.85rem; min-height: 1.2rem; margin-bottom: 0.5rem; }
/* the 6-digit code from the email: big, spaced, in the middle */
.auth-form .code-input { font-family: 'Courier New', monospace; font-size: 1.6rem; letter-spacing: 0.45em; text-align: center; padding-left: 0.45em; }
.auth-links { margin: 0.6rem 0 0; text-align: center; }
.auth-links a { color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- sidebar ---------- */
#sidebar {
    width: 250px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0.5rem;
    overflow-y: auto; height: calc(100vh - 4rem); position: sticky; top: 2rem; padding: 1.4rem 0.9rem;
    scrollbar-width: thin; scrollbar-color: rgba(214, 170, 92, 0.35) transparent;
}
/* the game's mark: the hero as they are now in a gold-rimmed seal on the meadow, and the name in beveled gold */
.brand {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 0.8rem;
    margin: 0 0 0.4rem; padding: 0.15rem 0 1.15rem; font-size: inherit; font-weight: inherit;
}
.brand::before { /* a filigree rule under the mark, fading both ways */
    content: ""; position: absolute; left: 6%; right: 6%; bottom: 4px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(214, 170, 92, 0.55) 25%, rgba(214, 170, 92, 0.55) 75%, transparent);
}
.brand::after { /* and a small gem at its middle */
    content: ""; position: absolute; left: 50%; bottom: 1px; width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg);
    background: linear-gradient(135deg, #fde68a, #b07a1c); box-shadow: 0 0 0 1px #2a1a08, 0 0 8px rgba(252, 211, 77, 0.55);
}
.brand-seal {
    position: relative; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; overflow: hidden;
    background: url(assets/paint/meadow.webp) 55% 72% / 330% auto no-repeat, #3a5a2a;   /* a window onto the meadow */
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.55), 0 0 0 2px #2a1a08, 0 0 0 4px #c9a45c, 0 0 0 5px #5c4318, 0 5px 14px rgba(0, 0, 0, 0.65);
}
.brand-seal::after { /* the glass: a soft light from above */
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: radial-gradient(120% 70% at 50% 0%, rgba(255, 244, 214, 0.28), transparent 55%);
}
.brand-seal .hero-doll { position: absolute; left: 50%; top: 3px; transform: translateX(-50%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55)); }
.brand-name { display: flex; flex-direction: column; align-items: stretch; line-height: 1; }
.brand-fantasy {
    font-family: var(--font-display); font-size: 1.62rem; font-weight: 800; letter-spacing: 0.035em;
    background: linear-gradient(110deg, transparent 42%, rgba(255, 251, 235, 0.9) 50%, transparent 58%) 160% 0 / 260% 100% no-repeat,
                linear-gradient(180deg, #fff8dc 0%, #ffe593 36%, #e8ad3c 50%, #ffd76e 63%, #c58a2a 100%);   /* polished gold: a bright top, a sharp horizon, a warm lower band */
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 1px 0 #4a2f0c) drop-shadow(0 2px 1px rgba(10, 6, 2, 0.85)) drop-shadow(0 0 12px rgba(240, 190, 90, 0.3));
    animation: brandSheen 9s ease-in-out 2s infinite;
}
.brand-idle {
    display: flex; align-items: center; gap: 0.45rem; margin-top: 0.32rem;
    font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.55em; text-indent: 0.55em; color: #e5c271;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.brand-idle::before, .brand-idle::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(229, 194, 113, 0.75)); }
.brand-idle::after { background: linear-gradient(90deg, rgba(229, 194, 113, 0.75), transparent); }
/* now and then a light passes over the name */
@keyframes brandSheen { 0%, 84% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
body.reduced-motion .brand-fantasy { animation: none; }
#nav { order: 1; display: flex; flex-direction: column; gap: 0.18rem; }
#nav-next { order: 2; display: flex; flex-direction: column; } /* under the tabs on a desktop */
#nav-next:empty { display: none; }
#sidebar h3 {
    display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0; margin: 1.05rem 0 0.3rem 0.2rem;
    font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; color: #dcb86c;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
#sidebar h3::before { /* a small gem, like the one under the mark */
    content: ""; flex: 0 0 auto; width: 6px; height: 6px; transform: rotate(45deg);
    background: linear-gradient(135deg, #fde68a, #b07a1c); box-shadow: 0 0 0 1px #2a1a08, 0 0 7px rgba(252, 211, 77, 0.5);
}
#sidebar h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
/* each place: a medallion ringed in its skill's colour (--c, gold for the rest), its name, its level
   on a gold-rimmed badge, and its XP in its colour underneath */
#sidebar .nav-btn {
    --c: #d6aa5c;
    position: relative; display: flex; justify-content: flex-start; align-items: center; gap: 0.65rem; flex-shrink: 0;
    padding: 0.3rem 0.65rem 0.5rem 0.45rem; text-align: left; font-size: 0.95rem; font-weight: 600; color: var(--text-main);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    background: transparent; border: 1px solid transparent; border-radius: 12px; box-shadow: none;
}
.nav-icon {
    position: relative; flex: 0 0 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c, #d6aa5c) 24%, #2a2119), #0e0a06 74%);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.75), 0 0 0 1.5px color-mix(in srgb, var(--c, #d6aa5c) 75%, #2a1a08), 0 0 0 3px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.2s ease;
}
.nav-icon .spr, .hot-icon .spr, .h-icon .spr { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7)); }
.nav-emoji { font-size: 1.05rem; line-height: 1; }
.nav-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the next place to open: its picture, its name, what to do and how far along */
.nav-next {
    position: relative; overflow: hidden; flex-shrink: 0; margin-top: 0.9rem; min-height: 96px; padding: 0.7rem 0.8rem 0.95rem;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 0.05rem; text-align: left;
    border-radius: 12px; border: 1px dashed rgba(214, 170, 92, 0.5);
    background: linear-gradient(180deg, rgba(13, 10, 7, 0.2), rgba(13, 10, 7, 0.9) 68%), var(--art, none) var(--art-at, center) / cover no-repeat, var(--panel-2);
}
.nav-next:hover { transform: none; border-style: solid; background: linear-gradient(180deg, rgba(13, 10, 7, 0.05), rgba(13, 10, 7, 0.85) 68%), var(--art, none) var(--art-at, center) / cover no-repeat, var(--panel-2); }
.nav-next-kicker { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-color); text-shadow: 0 1px 2px #000; }
.nav-next-name { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; line-height: 1.2; color: var(--heading); text-shadow: 0 1px 3px #000; }
.nav-next-task { font-size: 0.76rem; font-weight: 400; color: var(--text-main); text-shadow: 0 1px 2px #000; }
.nav-next .goal-bar { left: 0.8rem; right: 0.8rem; bottom: 7px; }
/* a place earned and on its way (data/unlocks.js): its frame warms while the breather runs out */
.nav-next.coming { border-style: solid; border-color: rgba(252, 211, 77, 0.55); animation: nextComing 2.4s ease-in-out infinite; }
.nav-next.coming .nav-next-task { color: #fde68a; }
@keyframes nextComing { 0%, 100% { box-shadow: 0 0 0 rgba(252, 211, 77, 0); } 50% { box-shadow: 0 0 14px rgba(252, 211, 77, 0.35); } }
body.reduced-motion .nav-next.coming { animation: none; }
@media (prefers-reduced-motion: reduce) { .nav-next.coming { animation: none; } }
#sidebar .nav-btn:hover { transform: translateX(3px); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, transparent), transparent 85%); border-color: rgba(214, 170, 92, 0.22); box-shadow: none; }
#sidebar .nav-btn:hover .nav-icon { box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.75), 0 0 0 1.5px var(--c), 0 0 0 3px rgba(0, 0, 0, 0.5), 0 0 12px color-mix(in srgb, var(--c) 55%, transparent); }
/* the tab on screen: lit in its colour, a gold edge */
#sidebar .nav-btn.active {
    transform: none; color: #fff3d6; border-color: rgba(214, 170, 92, 0.55);
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 26%, transparent), rgba(214, 170, 92, 0.06) 62%, transparent);
    box-shadow: inset 3px 0 0 var(--gold-color), 0 2px 10px rgba(0, 0, 0, 0.35);
}
#sidebar .nav-btn.active .nav-icon { box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.75), 0 0 0 1.5px #f3d48a, 0 0 0 3px rgba(0, 0, 0, 0.5), 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
/* the place the hero is working (or fighting) right now: its medallion breathes, its tool bobs, its bar shines */
#sidebar .nav-btn.action-active { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, transparent), transparent 80%); box-shadow: inset 3px 0 0 var(--c); }
#sidebar .nav-btn.active.action-active { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, transparent), rgba(214, 170, 92, 0.06) 62%, transparent); box-shadow: inset 3px 0 0 var(--gold-color), 0 2px 10px rgba(0, 0, 0, 0.35); }
#sidebar .nav-btn.action-active .nav-icon { animation: navWork 1.8s ease-in-out infinite; }
#sidebar .nav-btn.action-active .nav-icon .spr { animation: navBob 0.9s ease-in-out infinite; }
@keyframes navWork {
    0%, 100% { box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.75), 0 0 0 1.5px var(--c), 0 0 0 3px rgba(0, 0, 0, 0.5), 0 0 6px color-mix(in srgb, var(--c) 35%, transparent); }
    50% { box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.75), 0 0 0 1.5px var(--c), 0 0 0 3px rgba(0, 0, 0, 0.5), 0 0 16px color-mix(in srgb, var(--c) 75%, transparent); }
}
@keyframes navBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
#sidebar .nav-btn.locked { opacity: 0.42; cursor: default; }
#sidebar .nav-btn.locked:hover { transform: none; background: transparent; border-color: transparent; }
/* the level: a gold-rimmed badge in the title type; solid gold at 99 */
.nav-level {
    min-width: 30px; padding: 0.12rem 0.42rem 0.08rem; text-align: center; border-radius: 8px;
    font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: #fde9b0;
    background: linear-gradient(180deg, #2b2016, #110c07) padding-box, linear-gradient(180deg, #f3d48a, #7a5518) border-box;
    border: 1px solid transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.nav-level.max { color: #2a1a05; text-shadow: 0 1px 0 rgba(255, 240, 190, 0.6); background: linear-gradient(180deg, #fff1b8, #e0a83a) padding-box, linear-gradient(180deg, #fff7d6, #8a6420) border-box; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 10px rgba(252, 211, 77, 0.45); }
/* the XP to the next level, under the name, in the skill's colour */
.nav-xp { position: absolute; left: calc(0.45rem + 36px + 0.65rem); right: 0.65rem; bottom: 5px; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(214, 170, 92, 0.1); pointer-events: none; }
.nav-xp::after {
    content: ""; display: block; height: 100%; width: var(--p, 0%); border-radius: 2px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c, #d6aa5c) 45%, #1a120a), var(--c, #d6aa5c));
    box-shadow: 0 0 6px color-mix(in srgb, var(--c, #d6aa5c) 65%, transparent); transition: width 0.5s ease-out;
}
#sidebar .nav-btn.action-active .nav-xp::after {
    background: linear-gradient(100deg, transparent 35%, rgba(255, 252, 240, 0.75) 50%, transparent 65%) -160% 0 / 60% 100% no-repeat,
                linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, #1a120a), var(--c));
    animation: navShine 2.2s ease-in-out infinite;
}
@keyframes navShine { 0%, 20% { background-position: -160% 0, 0 0; } 100% { background-position: 260% 0, 0 0; } }
body.reduced-motion #sidebar .nav-btn .nav-icon, body.reduced-motion #sidebar .nav-btn .nav-icon .spr, body.reduced-motion #sidebar .nav-btn .nav-xp::after { animation: none; }
.node-card.active .skill-action-art { animation: medallionPulse 1.6s ease-in-out infinite; }
@keyframes medallionPulse { 0%, 100% { box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.65), 0 0 0 3px rgba(0, 0, 0, 0.35), 0 0 10px color-mix(in srgb, var(--accent, #34d399) 30%, transparent); } 50% { box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.65), 0 0 0 3px rgba(0, 0, 0, 0.35), 0 0 22px color-mix(in srgb, var(--accent, #34d399) 60%, transparent); } }

#main-content { flex-grow: 1; display: flex; flex-direction: column; gap: 1rem; overflow-x: hidden; }

/* ---------- header: purse, status, stats ---------- */
#header { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem 1rem; }
.header-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }
.pills { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; flex: 1 1 auto; min-width: 0; }
.header-right { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-left: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
    --coin: #fcd34d; --coin-dark: #7a5410;
    display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.8rem 0.3rem 0.4rem;
    border-radius: 999px; border: 1px solid rgba(214, 170, 92, 0.35);
    background: linear-gradient(180deg, #221a13, #15100c); box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.07);
}
.chip::before { /* the currency's coin */
    content: ""; flex-shrink: 0; width: 17px; height: 17px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fffbe8 0 8%, var(--coin) 38%, var(--coin-dark) 100%);
    box-shadow: 0 0 6px color-mix(in srgb, var(--coin) 55%, transparent), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.chip span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
/* a chip that opens something (the SP chip opens the perks): it keeps the chip's look, and lifts a little */
button.chip { font: inherit; color: inherit; cursor: pointer; }
button.chip:hover { transform: translateY(-1px); background: linear-gradient(180deg, #2c2218, #18120d); border-color: rgba(240, 198, 116, 0.65); box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.1), 0 0 12px rgba(125, 211, 252, 0.25); }
button.chip:active { transform: scale(0.97); }
.chip b { font-size: 0.98rem; font-variant-numeric: tabular-nums; }
.chip i { font-size: 0.7rem; font-style: normal; color: var(--arcane); }
.chip.gold b { color: var(--gold-color); }
.chip.tokens { --coin: #c4a5ff; --coin-dark: #4c2a8a; }
.chip.tokens b { color: #d8c4ff; }
.chip.sp { --coin: #7dd3fc; --coin-dark: #0c4a6e; }
.chip.sp b { color: #bae6fd; }
.chip.essence { --coin: #f0abfc; --coin-dark: #701a75; }
.chip.essence b { color: #f5c2fc; }
.status-pill, .cloud-pill, .focus-pill, .bonfire-pill, .event-pill {
    padding: 0.28rem 0.7rem; border-radius: 999px; font-size: 0.8rem;
    border: 1px solid rgba(214, 170, 92, 0.25); background: rgba(0, 0, 0, 0.28);
}
button.status-pill { display: inline-flex; align-items: center; gap: 0.35rem; font: inherit; font-size: 0.8rem; color: inherit; box-shadow: none; cursor: pointer; }
.cloud-pill { display: inline-flex; align-items: center; gap: 0.35rem; }
.cloud-pill .ico { width: 16px; height: 16px; }
.retreat-btn, .map-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; }
button.status-pill:hover { transform: none; background: rgba(214, 170, 92, 0.1); }
.status-pill.working { border-color: rgba(52, 211, 153, 0.5); color: #bbf7d0; }
.status-pill.fighting { border-color: rgba(239, 68, 68, 0.55); color: #fecaca; }
.goal-bar { position: absolute; left: 0.7rem; right: 0.7rem; bottom: 4px; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, 0.45); }
.goal-bar::after { content: ""; display: block; height: 100%; width: var(--p, 0%); border-radius: 2px; background: linear-gradient(90deg, #b8862e, #fcd34d); box-shadow: 0 0 6px rgba(252, 211, 77, 0.6); transition: width 0.6s ease-out; }
.cloud-pill.local { color: var(--text-muted); cursor: pointer; font-family: inherit; font-weight: inherit; line-height: inherit; }
.cloud-pill.local.nudge { color: #bfdbfe; border-color: rgba(96, 165, 250, 0.55); animation: cloudNudge 2.6s ease-in-out infinite; }
@keyframes cloudNudge { 0%, 100% { box-shadow: 0 0 0 rgba(96, 165, 250, 0); } 50% { box-shadow: 0 0 14px rgba(96, 165, 250, 0.45); } }
.focus-pill { border-color: rgba(125, 211, 252, 0.5); color: #bae6fd; background: rgba(56, 189, 248, 0.08); }
.bonfire-pill { border-color: rgba(249, 115, 22, 0.5); color: #fdba74; background: rgba(249, 115, 22, 0.1); }
.event-pill { font: inherit; font-size: 0.8rem; color: inherit; cursor: pointer; border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.daily-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.85rem 0.4rem 0.6rem; border-radius: 999px; font-size: 0.8rem; }
.daily-btn .spr { margin: -6px 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
.daily-btn.ready { color: #1f1406; font-weight: 800; border-color: #f7d88a; background: linear-gradient(180deg, #e2b95f, #9c7127); animation: liveBadgePulse 1.3s ease-in-out infinite; }
.daily-btn b { font-weight: 800; }
.daily-btn.great { background: linear-gradient(180deg, #fff1b8, #e9b54a 55%, #b07a1c); box-shadow: 0 0 16px rgba(252, 211, 77, 0.65); }

/* ---------- layout ---------- */
#tab { display: flex; flex-direction: column; gap: 1rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.grid-span { grid-column: 1 / -1; margin: 0.4rem 0 0; }

/* ---------- cards: one family of recessed tiles ---------- */
.node-card, .dungeon-card, .plot-card, .course-slot, .pet-card, .ach-item, .shop-item,
.backup-row, .course-run, .clan-boss, .info-strip, .prestige-box, .inv-item, .slot {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 236, 200, 0.03), rgba(0, 0, 0, 0.22));
}

/* skill actions */
.node-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.1rem; }
.node-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1.1rem;
    border-radius: 14px; text-align: center; cursor: pointer; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    background: linear-gradient(180deg, #211a13, #15100c);
}
.node-card:hover { transform: translateY(-3px); border-color: rgba(240, 198, 116, 0.55); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45); }
.node-card.active {
    border-color: var(--accent, var(--verdigris));
    background: linear-gradient(180deg, #211a13 0%, color-mix(in srgb, var(--accent, var(--verdigris)) 16%, #15100c) 100%);
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent, var(--verdigris)) 30%, transparent);
}
.node-card.stalled { border-color: #ef4444; }
.node-card.locked { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.8); }
.node-card.locked:hover { transform: none; box-shadow: none; border-color: var(--line); }
.node-name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--heading); text-align: center; }
.node-io i { color: var(--text-muted); font-style: normal; }
.node-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; padding: 0.4rem 0.8rem; border-radius: 8px; font-size: 0.75rem; color: var(--text-muted); background: var(--well); }
.skill-action-art { /* a medallion */
    position: relative; width: 58px; height: 58px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.9rem;
    background: radial-gradient(circle at 35% 30%, #3a2e22, #140f0a 72%);
    border: 1px solid rgba(214, 170, 92, 0.5);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.65), 0 0 0 3px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.4);
}
.action-progress-container { width: 100%; height: 8px; margin-top: 0.5rem; border-radius: 4px; overflow: hidden; background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); }
.action-progress-fill {
    height: 100%; width: 0%; background: var(--verdigris); transition: width 0.05s linear;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.22) 80%);
    background-size: 40px 100%; animation: progressFlow 0.9s linear infinite;
}
.res-tag { white-space: nowrap; }
.tool-badge { padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.75rem; color: #fde68a; background: rgba(252, 211, 77, 0.08); border: 1px solid rgba(252, 211, 77, 0.35); }
/* the skill potion: a chip in the header beside the tool, its tray of bottles opening under it */
.potion-chip-wrap { position: relative; display: inline-flex; }
.potion-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.6rem 0.18rem 0.35rem; border-radius: 999px; font: inherit; font-size: 0.75rem; font-weight: 700; color: #bbf7d0; background: rgba(74, 222, 128, 0.07); border: 1px solid rgba(74, 222, 128, 0.3); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.potion-chip:hover, .potion-chip.open { border-color: rgba(74, 222, 128, 0.7); background: rgba(74, 222, 128, 0.14); }
.potion-chip:not(.on) { color: var(--text-muted); }
.potion-chip .spr.dim { opacity: 0.55; filter: grayscale(0.4); }
.potion-tray { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: flex; gap: 6px; padding: 7px; border-radius: 12px; background: linear-gradient(180deg, #1e1810, #120d07); border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); }
.potion-tray .pick { width: 40px; height: 40px; }
.potion-tray-empty { align-self: center; padding: 0 0.4rem; font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.skill-info { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; }
.skill-level { padding: 0.2rem 0.65rem; border-radius: 999px; font-weight: 800; color: #1f1406; background: linear-gradient(180deg, #f0cb72, #b08233); box-shadow: 0 0 10px rgba(214, 170, 92, 0.3); }
.xp-bar-container { width: 120px; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(214, 170, 92, 0.25); }
.xp-bar-fill {
    height: 100%; width: 0%; transition: width 0.3s ease;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.18) 80%), linear-gradient(90deg, #b8862e, #fcd34d);
    background-size: 42px 100%, 100% 100%; animation: progressFlow 1.1s linear infinite;
}
.skill-xp { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* mini-games */
.minigame-panel {
    position: relative; overflow: hidden; margin-bottom: 1rem; padding: 1rem 1.1rem; border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--minigame-accent) 40%, transparent);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--minigame-accent) 18%, transparent), transparent 35%),
        linear-gradient(180deg, rgba(255, 236, 200, 0.04), rgba(0, 0, 0, 0.2));
    box-shadow: 0 0 26px color-mix(in srgb, var(--minigame-accent) 10%, transparent);
}
.minigame-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 0.65rem; }
.minigame-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--heading); }
.minigame-desc { font-size: 0.8rem; color: var(--text-muted); max-width: 560px; }
.minigame-boost-pill { padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.72rem; white-space: nowrap; color: var(--text-main); background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); }

/* a mini-game's ×2 running: the working card glows and says so, its bar shines */
.node-grid.boosted .node-card.active { box-shadow: 0 0 0 1px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent); }
.node-grid.boosted .node-card.active::after { content: '×2'; position: absolute; top: 0.45rem; right: 0.5rem; padding: 0.05rem 0.45rem; border-radius: 999px; font-weight: 900; font-size: 0.8rem; color: #120d08; background: var(--gold-color, #fbbf24); box-shadow: 0 0 10px rgba(251, 191, 36, 0.6); z-index: 2; }
.node-grid.boosted .node-card.active .action-progress-fill { background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%) !important; background-size: 200% 100%; animation: boost-shine 0.9s linear infinite; }
@keyframes boost-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
body.reduced-motion .node-grid.boosted .node-card.active .action-progress-fill { animation: none; }
@media (prefers-reduced-motion: reduce) { .node-grid.boosted .node-card.active .action-progress-fill { animation: none; } }
.minigame-boost-pill.live {
    color: #fff; border-color: color-mix(in srgb, var(--minigame-accent) 55%, transparent);
    background: color-mix(in srgb, var(--minigame-accent) 18%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--minigame-accent) 25%, transparent);
    animation: liveBadgePulse 1.3s ease-in-out infinite;
}
.minigame-meta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; font-size: 0.72rem; color: var(--text-muted); }
.minigame-prompt { margin-bottom: 0.7rem; font-size: 0.85rem; color: var(--text-main); }
.minigame-prompt.pulse { color: #fde68a; animation: promptGlow 1.2s ease-in-out infinite; }
@keyframes promptGlow { 0%, 100% { text-shadow: none; } 50% { text-shadow: 0 0 10px rgba(253, 230, 138, 0.75); } }
/* the time left in a mini-game: a bar draining under its prompt */
.mg-time { display: block; height: 4px; margin: -0.35rem 0 0.7rem; border-radius: 2px; background: linear-gradient(90deg, var(--minigame-accent) var(--p), rgba(0, 0, 0, 0.45) var(--p)); transition: background 0.25s linear; }
.minigame-actions, .minigame-choice-grid { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.minigame-start-btn, .minigame-action-btn, .minigame-secondary-btn, .minigame-choice-btn { padding: 0.65rem 0.9rem; border-radius: 10px; font-size: 0.82rem; font-weight: 700; }
.minigame-action-btn, .minigame-choice-btn { background: color-mix(in srgb, var(--minigame-accent) 18%, #1a140f); border-color: color-mix(in srgb, var(--minigame-accent) 45%, transparent); }
.minigame-secondary-btn { color: var(--text-muted); }
.minigame-timing-track { position: relative; height: 24px; margin-bottom: 0.85rem; border-radius: 999px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--line); }
.minigame-timing-zone { position: absolute; top: 0; bottom: 0; border-radius: 999px; opacity: 0.8; box-shadow: 0 0 18px color-mix(in srgb, var(--minigame-accent) 45%, transparent); }
.minigame-timing-marker { position: absolute; top: -4px; width: 12px; height: 24px; margin-left: -6px; border: 2px solid #fff; border-radius: 999px; background: rgba(255, 255, 255, 0.18); }
.minigame-timing-marker:has(.spr) { top: -5px; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; border-color: color-mix(in srgb, var(--minigame-accent) 80%, #fff); background: radial-gradient(circle at 50% 40%, #3a2c1c, #120d08 75%) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--minigame-accent) 50%, transparent); }
.minigame-timing-marker .spr, .minigame-timing-marker .sp-fallback { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8)); }  /* the tool, or the quarry, rides the marker */
.minigame-heat-track { position: relative; height: 20px; margin-bottom: 0.85rem; border-radius: 999px; overflow: hidden; background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), rgba(239, 68, 68, 0.2)); border: 1px solid var(--line); }
.minigame-heat-fill { position: absolute; top: 0; left: 0; bottom: 0; opacity: 0.85; transition: width 0.12s linear; }
.minigame-drag-shell { position: relative; padding: 0.7rem 0 0.4rem; }
.minigame-drag-zone { position: absolute; left: 0; right: 0; top: 7px; height: 10px; border-radius: 999px; opacity: 0.35; }
.minigame-drag-slider { position: relative; z-index: 1; width: 100%; appearance: none; background: transparent; }
.minigame-drag-slider::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.minigame-drag-slider::-webkit-slider-thumb { appearance: none; width: 24px; height: 24px; margin-top: -7px; border-radius: 50%; background: #fff7e6; border: 2px solid rgba(16, 185, 129, 0.55); box-shadow: 0 0 16px rgba(16, 185, 129, 0.45); }
/* the zone's gold centre is Perfect; a held game's band moves, glows while held, and the bar under it fills */
.minigame-perfect { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(180deg, #fef3c7, #f59e0b); box-shadow: 0 0 10px rgba(253, 224, 71, 0.85); }
.minigame-band { position: absolute; top: 0; bottom: 0; z-index: 1; border-radius: 999px; background: transparent !important; border: 2px solid var(--minigame-accent); box-shadow: inset 0 0 10px color-mix(in srgb, var(--minigame-accent) 45%, transparent); }
.minigame-heat-fill { border-right: 3px solid #fff7e6; }
.minigame-heat-track.inside, .minigame-drag-shell.inside .minigame-drag-zone { box-shadow: 0 0 16px color-mix(in srgb, var(--minigame-accent) 65%, transparent); }
.minigame-drag-shell.inside .minigame-drag-zone { opacity: 0.7; }
.minigame-hold { height: 8px; margin: -0.3rem 0 0.8rem; border-radius: 4px; overflow: hidden; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(253, 230, 138, 0.25); }
.minigame-hold i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #f59e0b, #fde68a) !important; box-shadow: 0 0 10px rgba(253, 224, 71, 0.6); }   /* gold: the dish filling, not the time running out */

/* mastery */
.mastery-row { display: flex; align-items: center; gap: 0.45rem; width: 100%; font-size: 0.72rem; color: var(--text-muted); }
.mastery-row + .node-grid { margin-top: 0.6rem; }
.mastery-lvl { white-space: nowrap; font-weight: 700; color: #d8c4ff; }
.mastery-lvl.max { color: var(--gold-color); }
.mastery-bar { flex: 1; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(0, 0, 0, 0.5); }
.mastery-bar > div { height: 100%; background: linear-gradient(90deg, #7c5cc4, #d8c4ff); }
.mastery-total { padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap; font-size: 0.75rem; font-weight: 700; color: #d8c4ff; background: rgba(124, 92, 196, 0.16); border: 1px solid rgba(183, 148, 246, 0.35); }

/* ---------- combat tab (the fight itself is the battle scene below) ---------- */
/* the combat panel: food, potion and the drops in the main column; the orders on the side */
.combat-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.9rem 1.6rem; align-items: start; }
.combat-main { min-width: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.combat-side { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; min-width: 168px; padding-left: 1.2rem; border-left: 1px solid var(--line); }
.combat-side .mini-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.5rem 0.8rem; font-size: 0.82rem; }
.combat-side .stay-toggle { margin-top: 0.2rem; }
.combat-controls { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: flex-start; }
.loadout { display: flex; flex-direction: column; gap: 0.4rem; flex: 1 1 300px; min-width: 0; }
.loadout-label { font-size: 0.82rem; font-weight: 700; color: var(--text-main); }
.pick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pick { position: relative; width: 54px; height: 54px; padding: 0; display: grid; place-items: center; border-radius: 10px;
    color: var(--text-main); border: 1px solid rgba(214, 170, 92, 0.25); background: radial-gradient(circle at 50% 40%, #2a2016, #0e0a07 75%); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6); }
.pick:hover { transform: translateY(-2px); border-color: rgba(240, 198, 116, 0.7); }
.pick.on { border-color: #f0c674; background: radial-gradient(circle at 50% 40%, #4a3818, #140e07 75%); box-shadow: 0 0 0 2px rgba(240, 198, 116, 0.3), 0 0 14px rgba(240, 198, 116, 0.3), inset 0 0 8px rgba(0, 0, 0, 0.5); }
/* food Auto will eat from: lit softly, like the Auto it belongs to; food or potions that won't be used: dimmed */
.pick.in-play { border-color: rgba(240, 198, 116, 0.62); box-shadow: 0 0 10px rgba(240, 198, 116, 0.22), inset 0 0 8px rgba(0, 0, 0, 0.5); }
.pick.idle > .spr, .pick.idle > .pick-qty, .pick.idle > .pick-sub, .pick.idle > .pick-tier { opacity: 0.4; }
.pick.idle:hover > .spr, .pick.idle:hover > .pick-qty, .pick.idle:hover > .pick-sub, .pick.idle:hover > .pick-tier { opacity: 0.85; }
.pick .spr { margin-top: -6px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7)); }
/* the tile that goes to where food or potions are made: dashed, like a slot waiting to be filled */
.pick-go { border-style: dashed; border-color: rgba(214, 170, 92, 0.5); }
.pick-go:hover { border-style: solid; }
.pick-go .spr { margin-top: -10px; }
.pick-go .pick-sub { color: var(--gold-color); letter-spacing: 0.04em; }
.pick-word { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; }
.pick-qty { position: absolute; right: 3px; top: 1px; font-size: 0.62rem; font-weight: 800; color: #fff3d6; text-shadow: 0 1px 2px #000, 0 0 3px #000; font-variant-numeric: tabular-nums; }
.pick-sub { position: absolute; left: 0; right: 0; bottom: 2px; font-size: 0.6rem; font-weight: 800; color: #86efac; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.pick-tier { position: absolute; left: 0; right: 0; bottom: 1px; font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; color: #fde68a; text-shadow: 0 1px 2px #000, 0 0 3px #000; }   /* a potion's tier, I to IV */
.dungeon-potion, .clan-potion { margin-bottom: 0.75rem; }
.zone-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.fact { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--well); border: 1px solid var(--line); }
/* the camp: three upgrades as tokens on the camp painting */
/* the camp on the combat tab: one strip on its painting, the title beside its three tokens */
.camp-panel {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.4rem; padding: 0.85rem 1.25rem;
    background: linear-gradient(90deg, rgba(17, 13, 9, 0.9) 10%, rgba(17, 13, 9, 0.55)), var(--art, none) var(--art-at, center) / cover no-repeat, var(--panel-2);
}
.camp-panel h2 { flex: 0 0 auto; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9); }
.camp-panel .camp-tokens { flex: 1 1 480px; gap: 0.6rem; }
@media (min-width: 601px) { .camp-panel .camp-token { flex-direction: row; align-items: center; } } /* room to spare: Max sits beside the token (under it on a phone) */
.camp-panel .camp-buy { flex: 1 1 auto; background: rgba(13, 10, 7, 0.78); }
.camp-panel .camp-buy:hover { background: rgba(30, 23, 15, 0.9); }
.camp-medal, .shop-art { position: relative; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #3a2e22, #140f0a 72%); border: 1px solid rgba(214, 170, 92, 0.55); box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.65), 0 0 0 3px rgba(0, 0, 0, 0.35); }
.camp-medal { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; }
.camp-medal .spr, .shop-art .spr { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.65)); }
.camp-lv { position: absolute; right: -5px; bottom: -5px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #1f1406; background: linear-gradient(180deg, #f0cb72, #b08233); box-shadow: 0 0 0 2px #140f0a; }
.shop-item .gold-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.45rem 0.9rem; }
/* prestige in one line */
.prestige-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1rem; padding: 1rem 1.25rem; background: linear-gradient(90deg, rgba(17, 13, 9, 0.95) 30%, rgba(17, 13, 9, 0.45)), var(--art, none) var(--art-at, center) / cover no-repeat, var(--panel-2); }
.prestige-strip-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.strip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.strip-actions .shop-btn.ready { border-color: #d8b4fe; box-shadow: 0 0 14px rgba(167, 139, 250, 0.4); }
.perk-cost { margin-left: 0.25rem; font-size: 0.72rem; font-weight: 700; opacity: 0.8; }   /* what a perk's next level costs */
.perk-max { min-width: 4.5rem; text-align: center; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-color); }
.perk-purse { margin: -0.4rem 0 0.8rem; color: var(--text-main); }
.prestige-panel, .titan-panel { background: linear-gradient(180deg, rgba(17, 13, 9, 0.8), rgba(17, 13, 9, 0.96)), var(--art, none) var(--art-at, center) / cover no-repeat, var(--panel-2); }
/* the battle log, folded away */
.log-drawer { padding: 0.75rem 1.25rem; }
.log-drawer summary { display: flex; align-items: center; gap: 0.8rem; cursor: pointer; list-style: none; }
.log-drawer summary::-webkit-details-marker { display: none; }
.log-title { white-space: nowrap; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-color); }
.log-title::before { content: "▸ "; }
.log-drawer[open] .log-title::before { content: "▾ "; }
.log-last { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; color: var(--text-muted); }
.log-last.death { color: #fca5a5; }
.log-last.loot { color: #d8c4ff; }
.log-drawer[open] .log-last { visibility: hidden; }
.log-drawer .log-list { margin-top: 0.7rem; }
.log-list { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; }
.log-line { padding: 0.35rem 0.6rem 0.35rem 0.7rem; border-radius: 6px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 2px 0 0 rgba(214, 170, 92, 0.35); }
.log-line.death { color: #fca5a5; box-shadow: inset 2px 0 0 rgba(239, 68, 68, 0.6); }
.log-line.loot { color: #d8c4ff; box-shadow: inset 2px 0 0 rgba(183, 148, 246, 0.6); }
.log-line.prestige { color: #f0abfc; box-shadow: inset 2px 0 0 rgba(240, 171, 252, 0.6); }
.combat-bar { position: relative; width: 100%; max-width: 300px; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(214, 170, 92, 0.35); }
.combat-fill { position: relative; height: 100%; width: 100%; transition: width 0.2s ease-out; }
.enemy-fill { float: right; transform-origin: right; background: linear-gradient(180deg, #f87171, #b91c1c); }

/* ---------- inventory: the armory ---------- */
.armory { display: grid; grid-template-columns: minmax(290px, 360px) minmax(0, 1fr); grid-template-areas: "doll bag" "doll detail"; gap: 1rem; align-items: start; }
/* wide screens: the item on the table gets its own column and stays in view while browsing the bag */
@media (min-width: 1440px) {
    .armory { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) minmax(260px, 300px); grid-template-areas: "doll bag detail"; }
    .detail-panel { position: sticky; top: 1rem; }
    .armory.bare { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); grid-template-areas: "doll bag"; }  /* no gear yet: no table for it */
}
.doll-panel { grid-area: doll; }
.detail-panel { grid-area: detail; }
.bag-panel { grid-area: bag; }
.doll { display: grid; grid-template-columns: 58px minmax(0, 1fr) 58px; grid-template-areas: "left figure right" "hands hands hands"; gap: 0.6rem; align-items: center; }
.doll-col { display: flex; flex-direction: column; gap: 0.4rem; }
.doll-col:first-child { grid-area: left; }
.doll-col:nth-child(3) { grid-area: right; }
.doll-figure { grid-area: figure; height: 100%; min-height: 240px; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 62%, rgba(214, 170, 92, 0.16), transparent 65%); }
.doll-hands { grid-area: hands; display: flex; justify-content: center; gap: 1.4rem; }
.doll-hands .doll-slot { width: 58px; }
.doll-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.doll-label { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.doll-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 0.9rem; margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.doll-stats b { color: var(--text-main); }
.tile {
    --r: #e2e8f0;
    position: relative; width: 100%; aspect-ratio: 1; padding: 0; border-radius: 10px;
    display: grid; place-items: center;
    border: 1px solid color-mix(in srgb, var(--r) 55%, #2a2016);
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--r) 16%, #1d1610), #0e0a07 75%);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
}
.tile:hover { transform: translateY(-2px); border-color: var(--r); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--r) 26%, #1d1610), #0e0a07 75%); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5), 0 0 12px color-mix(in srgb, var(--r) 35%, transparent); }
.tile.r-rare, .tile.r-epic { box-shadow: inset 0 0 12px color-mix(in srgb, var(--r) 30%, transparent), 0 0 8px color-mix(in srgb, var(--r) 30%, transparent); }
.tile.r-legendary, .tile.r-mythic, .tile.r-primal { box-shadow: inset 0 0 14px color-mix(in srgb, var(--r) 40%, transparent), 0 0 12px color-mix(in srgb, var(--r) 45%, transparent); animation: legendGlow 2.4s ease-in-out infinite; }
.tile.selected { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.tile.unwearable .tile-icon { filter: grayscale(0.7) brightness(0.65); }
.tile.empty { border: 1px dashed rgba(214, 170, 92, 0.16); background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5); }
.tile.empty .tile-icon { opacity: 0.22; filter: grayscale(1); }
.tile-icon { font-size: 1.65rem; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7)); }
.tile-up { position: absolute; right: 4px; bottom: 2px; font-size: 0.62rem; font-weight: 800; color: #fde68a; text-shadow: 0 1px 2px #000; }
.tile-lock { position: absolute; left: 3px; top: 2px; font-size: 0.58rem; font-style: normal; }
.tile-better { position: absolute; right: 4px; top: 1px; font-size: 0.72rem; font-style: normal; color: #4ade80; text-shadow: 0 0 6px rgba(74, 222, 128, 0.8); }
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; margin-bottom: 0.8rem; }
.bag-hint { margin: -0.3rem 0 0.8rem; }
.detail { position: relative; display: flex; flex-direction: column; gap: 0.6rem; }
.detail-close { display: none; }
.detail-head { display: flex; align-items: center; gap: 0.75rem; }
.detail-art { width: 58px; height: 58px; flex-shrink: 0; display: grid; place-items: center; font-size: 2rem; border-radius: 12px; border: 1px solid var(--r); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--r) 24%, #1d1610), #0e0a07 75%); box-shadow: 0 0 14px color-mix(in srgb, var(--r) 35%, transparent); }
.detail-title { flex: 1; min-width: 0; }
.detail-name { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; line-height: 1.2; color: var(--r); text-shadow: 0 1px 0 #000; overflow-wrap: anywhere; }
.detail-sub { font-size: 0.74rem; color: var(--text-muted); }
.detail-stats { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.detail-affixes { list-style: none; display: flex; flex-direction: column; gap: 0.2rem; margin: 0; padding: 0.5rem 0.7rem; border-radius: 8px; font-size: 0.82rem; color: #e4d4ff; background: var(--well); }
.detail-affixes li::before { content: "◆ "; color: var(--arcane); }
.detail-compare { font-size: 0.8rem; color: var(--text-muted); }
.detail-compare .up, .detail-compare .down { margin-left: 0.35rem; font-weight: 700; }
.detail-compare .up { color: #4ade80; }
.detail-compare .down { color: #f87171; }
.detail-gain { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.detail-gain .up, .dock-gain .up { color: #4ade80; }
.detail-gain .down, .dock-gain .down { color: #f87171; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.detail-actions .prestige-btn { padding: 0.45rem 1.1rem; font-size: 0.85rem; }
.detail-empty { padding: 0.6rem 0.4rem; text-align: center; font-size: 0.9rem; }
/* nothing picked: the vault's empty pedestal waits, with the hint at its foot */
.painted .detail-empty { min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; background: none; border: 0; }
.painted .detail-empty .muted { color: var(--text-main); text-shadow: 0 1px 4px #000, 0 0 12px #000; }
.detail-empty p + p { margin-top: 0.3rem; }
@keyframes legendGlow { 0%, 100% { box-shadow: inset 0 0 14px color-mix(in srgb, var(--r) 40%, transparent), 0 0 10px color-mix(in srgb, var(--r) 40%, transparent); } 50% { box-shadow: inset 0 0 16px color-mix(in srgb, var(--r) 50%, transparent), 0 0 18px color-mix(in srgb, var(--r) 60%, transparent); } }
@keyframes sheetUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
    .armory { grid-template-columns: minmax(0, 1fr); grid-template-areas: "doll" "bag" "detail"; }
}
/* phones: the picked item slides up as a sheet over the bag */
@media (max-width: 700px) {
    .detail-panel.has-item { position: fixed; left: 0.5rem; right: 0.5rem; bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); z-index: 90; max-height: 62vh; overflow-y: auto; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.75); animation: sheetUp 0.3s cubic-bezier(.2, 1.2, .4, 1); }
    .detail-panel.has-item .detail-close { display: block; position: absolute; top: -0.35rem; right: -0.35rem; z-index: 1; padding: 0.2rem 0.6rem; font-size: 0.9rem; }
    .detail-panel:not(.has-item) { display: none; }
}

/* ---------- inventory ---------- */
.slot-list { display: flex; flex-direction: column; gap: 0.6rem; }
.slot { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0.6rem 1rem; border-radius: 12px; border-style: dashed; transition: border-color 0.3s; }
.slot:hover { border-color: rgba(214, 170, 92, 0.45); }
.slot-info { display: flex; align-items: center; gap: 1rem; flex: 1; }
.slot-name { min-width: 50px; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.item-thumb {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
    background: radial-gradient(circle at 35% 30%, #2e241a, #120d09 75%); border: 1px solid rgba(214, 170, 92, 0.35);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
}
.empty-thumb { opacity: 0.45; }
.item-name { font-weight: 600; font-size: 0.9rem; color: var(--text-main); }
.item-atk { color: var(--atk-color); }
.item-def { color: var(--def-color); }
.item-hp { color: #fb7185; }
.inv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.8rem; }
.inv-item { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.8rem; padding: 1rem; border-radius: 12px; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.inv-item:hover { transform: translateY(-3px); border-color: rgba(240, 198, 116, 0.5); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45); }
.inv-header { display: flex; justify-content: space-between; align-items: center; }
.inv-title-wrap { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.inv-type { width: fit-content; margin-top: 0.25rem; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); }
.inv-stats-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; border-radius: 6px; background: var(--well); }
.inv-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
.inv-actions button { flex: 1; padding: 0.5rem; font-size: 0.8rem; border-radius: 8px; }
.affixes { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
.affix { padding: 0.1rem 0.45rem; border-radius: 6px; font-size: 0.68rem; color: #e4d4ff; background: rgba(124, 92, 196, 0.18); border: 1px solid rgba(183, 148, 246, 0.25); }
.filter-row { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.bank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; margin-top: 0.6rem; }
.bank-qty { position: absolute; right: 4px; bottom: 1px; font-size: 0.7rem; font-weight: 800; color: #fff3d6; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.bank-hint { margin-top: 0.7rem; }
.bank-detail { display: flex; align-items: center; gap: 0.6rem 0.9rem; flex-wrap: wrap; margin-top: 0.8rem; padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--well); border: 1px solid color-mix(in srgb, var(--r) 45%, #2a2016); }
.bank-detail-art { line-height: 0; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.6)); }
.bank-detail-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 12rem; }
.bank-detail-qty { font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { /* the picked material stays in view above the hotbar while the bank scrolls */
    .bank-detail { position: sticky; bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px)); z-index: 5; background: #17110b; box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.65); }
}
.res-actions { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
.empty-state { padding: 3rem; text-align: center; font-style: italic; color: var(--text-muted); border-radius: 12px; background: var(--well); border: 1px dashed var(--line); }
.lock-btn { padding: 0.2rem 0.45rem; font-size: 0.9rem; border-radius: 8px; background: transparent; }
.lock-btn.on { border-color: rgba(252, 211, 77, 0.6); background: rgba(252, 211, 77, 0.1); }
.lock-btn:not(.on) .glyph { opacity: 0.45; filter: grayscale(1); }   /* unlocked: the same lock, dimmed */
.tile-lock .glyph { display: block; }
.locked-item { box-shadow: inset 0 0 0 1px rgba(252, 211, 77, 0.25); }
.badge-upgrade { padding: 0 0.3rem; border-radius: 6px; font-size: 0.65rem; font-weight: 800; color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.4); }
.auto-salvage { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }
/* the auto-salvage level as pills in each rarity's colour (the picked one filled) */
.rarity-pills { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.rarity-pill { padding: 0.22rem 0.65rem; border-radius: 999px; font: inherit; font-size: 0.78rem; font-weight: 700; color: var(--r); background: rgba(0, 0, 0, 0.35); border: 1px solid color-mix(in srgb, var(--r) 45%, transparent); box-shadow: none; cursor: pointer; }
.rarity-pill:hover { transform: none; border-color: var(--r); background: color-mix(in srgb, var(--r) 12%, rgba(0, 0, 0, 0.35)); }
/* a phone: the clan's tables keep what matters and fit (attacks made, total level left out) */
@media (max-width: 600px) { .clan-board :is(th, td):nth-child(4), .clan-members :is(th, td):nth-child(3) { display: none; } }
.rarity-pill.on { color: #120d08; background: var(--r); border-color: var(--r); box-shadow: 0 0 10px color-mix(in srgb, var(--r) 45%, transparent); }

/* ---------- shop, prestige, achievements ---------- */
.shop-list { display: flex; flex-direction: column; gap: 0.6rem; }
.shop-item { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; border-radius: 12px; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.shop-item:hover { transform: translateY(-2px); border-color: rgba(240, 198, 116, 0.5); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); }
.shop-item-info { display: flex; flex-direction: column; gap: 0.2rem; }
.shop-item-name { font-weight: 700; font-size: 1.05rem; color: var(--heading); }
.shop-item-desc { font-size: 0.8rem; color: var(--text-muted); }
.prestige-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.8rem; }
.prestige-stats div { display: flex; flex-direction: column; padding: 0.6rem 0.75rem; border-radius: 10px; background: var(--well); border: 1px solid rgba(183, 148, 246, 0.2); }
.prestige-stats b { font-family: var(--font-display); font-size: 1.3rem; color: #e4d4ff; }
.prestige-stats span { font-size: 0.72rem; color: var(--text-muted); }
.prestige-box { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border-radius: 10px; border-style: dashed; }
.prestige-box h4 { margin-bottom: 0.5rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.prestige-box.highlight { border-style: solid; border-color: rgba(183, 148, 246, 0.5); background: rgba(124, 92, 196, 0.08); }
.prestige-reward { font-size: 1.2rem; font-weight: 700; color: #e4d4ff; text-shadow: 0 0 8px rgba(183, 148, 246, 0.4); }
/* the prestige dialog: what is gained first and big, then what starts over and what stays, in pictures */
.prestige-modal .modal-body { display: flex; flex-direction: column; gap: 0.7rem; }
.pg-gain { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; padding: 0.95rem 1rem; border-radius: 12px; border: 1px solid rgba(183, 148, 246, 0.5); background: radial-gradient(120% 140% at 50% 0%, rgba(124, 92, 196, 0.22), rgba(20, 14, 26, 0.6)); }
.pg-get { flex: 1 1 11rem; display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; align-items: center; }
.pg-get .coin-dot { grid-row: span 2; width: 36px; height: 36px; }
.pg-get b { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.05; color: #ece0ff; text-shadow: 0 0 12px rgba(183, 148, 246, 0.6); }
.pg-get b span { font-size: 0.95rem; }
.pg-get small { font-size: 0.75rem; color: var(--text-muted); }
.pg-get.sp b { color: #cdeefe; text-shadow: 0 0 12px rgba(125, 211, 252, 0.55); }
.pg-get.legacy b { color: #fde9b8; text-shadow: 0 0 12px rgba(233, 178, 58, 0.55); }
.coin-dot { display: inline-block; flex-shrink: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffbe8 0 8%, var(--coin) 38%, var(--coin-dark) 100%); box-shadow: 0 0 12px color-mix(in srgb, var(--coin) 55%, transparent), inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.coin-dot.tokens { --coin: #c4a5ff; --coin-dark: #4c2a8a; }
.coin-dot.sp { --coin: #7dd3fc; --coin-dark: #0c4a6e; }
.coin-dot.legacy { --coin: #f0cb72; --coin-dark: #7a4f12; }
.pg-rank { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; gap: 0.9rem; padding-top: 0.7rem; border-top: 1px solid rgba(183, 148, 246, 0.25); }
.pg-rank > span { display: flex; flex-direction: column; }
.pg-rank b { font-family: var(--font-display); font-size: 1.25rem; color: var(--heading); }
.pg-rank small { font-size: 0.72rem; color: var(--text-muted); }
.pg-rank small:first-child { letter-spacing: 0.16em; text-transform: uppercase; color: #fcd34d; font-weight: 700; }
.pg-rank .hero-doll { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7)); }
.pg-note { flex: 1 1 100%; }
.pg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding: 0.7rem 0.9rem; border-radius: 10px; background: rgba(0, 0, 0, 0.28); border: 1px dashed var(--line); }
.pg-row h4 { flex: 1 1 100%; margin: 0; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.pg-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; }
.pg-pip { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; color: #3b2a10; background: radial-gradient(circle at 35% 30%, #fde68a, #c08a2a); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); }
.pg-keep { display: flex; flex-wrap: wrap; gap: 0.25rem 0.45rem; }
.pg-keep-item { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(214, 170, 92, 0.2); }
.pg-keep-item .nav-emoji { font-size: 1.1rem; }
.ach-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.medal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; margin-top: 0.6rem; }
.medal { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.9rem 0.6rem 0.75rem; border-radius: 12px; text-align: center; background: var(--well); border: 1px solid rgba(214, 170, 92, 0.16); }
.medal-disc { position: relative; width: 64px; height: 64px; margin-bottom: 0.3rem; display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3a3026, #120d09 72%); border: 2px solid #3d3226; box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7); }
.medal-disc .spr { filter: grayscale(1) brightness(0.45); }
/* a medal that brings a look: the hero in it, on the disc's rim */
.medal-look { position: absolute; right: -10px; bottom: -6px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a2c1c, #120d08 75%); border: 1px solid rgba(214, 170, 92, 0.6); overflow: hidden; }
.medal-look .hero-doll { margin-top: 6px; }
.medal-look .hero-doll .spr { filter: none; }
.medal-look .hero-doll.silhouette .spr { filter: brightness(0) drop-shadow(0 0 1px rgba(214, 170, 92, 0.8)); }
.medal-name { font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; line-height: 1.2; color: var(--text-muted); text-wrap: balance; }
.medal-desc { font-size: 0.72rem; color: var(--text-muted); text-wrap: balance; }
.medal-bar { width: 80%; height: 5px; margin-top: 0.3rem; border-radius: 3px; overflow: hidden; background: rgba(0, 0, 0, 0.55); }
.medal-bar i { display: block; width: var(--p); height: 100%; background: linear-gradient(90deg, #9c7127, #e2b95f); }
.medal-count { font-size: 0.68rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.medal.won { border-color: rgba(252, 211, 77, 0.45); background: linear-gradient(180deg, rgba(252, 211, 77, 0.09), rgba(0, 0, 0, 0.22)); }
.medal.won .medal-disc { border-color: #e2b95f; background: radial-gradient(circle at 35% 30%, #6a4f22, #2a1c0a 72%);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(42, 28, 10, 0.9), 0 0 18px rgba(252, 211, 77, 0.35); }
.medal.won .medal-disc .spr { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6)); }
.medal.won .medal-name { color: var(--heading); }
.medal-reward { margin-top: 0.2rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; color: #fcd34d; background: rgba(252, 211, 77, 0.1); }
.ach-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 0.9rem; border-radius: 12px; }
.ach-item.done { border-color: rgba(252, 211, 77, 0.5); background: linear-gradient(90deg, rgba(252, 211, 77, 0.1), rgba(0, 0, 0, 0.2)); }
.ach-name { font-weight: 700; }
.ach-item.done .ach-name { color: var(--heading); }
.ach-name .ico { vertical-align: -2px; margin-right: 0.1rem; color: #86efac; }
.ach-reward { font-size: 0.75rem; text-align: right; color: #fbbf24; }

/* ---------- dungeons, titan, collection ---------- */
.dungeon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.8rem; }
.dungeon-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 0 0 0.9rem; overflow: hidden; border-radius: 14px; }
.dungeon-card.locked { opacity: 0.6; }
/* each dungeon on its painting, its boss in front */
.dungeon-art {
    position: relative; isolation: isolate;
    display: flex; align-items: flex-end; gap: 0.7rem; min-height: 120px; padding: 0.7rem 0.9rem;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
}
/* the painting in a layer of its own */
.dungeon-art::before, .dungeon-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.dungeon-art::before { z-index: -2; background: var(--art, none) var(--art-at, center) / cover no-repeat; }
.dungeon-art::after { z-index: -1; background: linear-gradient(180deg, rgba(12, 8, 5, 0) 25%, rgba(12, 8, 5, 0.92)); }
.dungeon-card.locked .dungeon-art { filter: grayscale(0.75) brightness(0.65); }
.dungeon-title { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; padding-bottom: 0.2rem; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.8); }
.dungeon-title b { font-family: var(--font-display); font-size: 1.08rem; color: var(--heading); }
.dungeon-body { display: flex; flex-direction: column; gap: 0.45rem; padding: 0 0.9rem; }
/* who waits inside, room by room (a silhouette for a kind never met, the boss ringed in red) */
.lineup { display: flex; flex-wrap: wrap; gap: 3px; }
.lineup-face { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #2a2016, #0c0906 75%); border: 1px solid rgba(214, 170, 92, 0.3); }
.lineup-face.boss { width: 32px; height: 32px; border-color: rgba(239, 68, 68, 0.7); }
.lineup-face .spr.silhouette { opacity: 0.75; filter: brightness(0) drop-shadow(0 0 1px rgba(214, 170, 92, 0.7)); }
.dungeon-card.active { border-color: rgba(239, 68, 68, 0.6); box-shadow: 0 0 18px rgba(239, 68, 68, 0.2); }
.dungeon-icon { font-size: 1.8rem; }
.titan-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.titan-text { flex: 1 1 14rem; min-width: 0; }
.titan-face { line-height: 0; }
.pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; }
.pet-card { display: flex; gap: 0.6rem; align-items: center; padding: 0.6rem 0.8rem; border-radius: 12px; opacity: 0.7; }
.pet-card.found { opacity: 1; border-color: rgba(252, 211, 77, 0.45); background: linear-gradient(90deg, rgba(252, 211, 77, 0.08), rgba(0, 0, 0, 0.2)); }
button.pet-card { position: relative; width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; box-shadow: none; }
button.pet-card:hover { transform: translateY(-1px); border-color: rgba(252, 211, 77, 0.75); }
.pet-card.companion { border-color: #f0c674; box-shadow: 0 0 0 2px rgba(240, 198, 116, 0.3), 0 0 14px rgba(240, 198, 116, 0.3); }
.pet-at { position: absolute; top: 6px; right: 8px; line-height: 0; }
.pet-icon { font-size: 1.6rem; }
.ready-good { color: #4ade80; }
.ready-close { color: #fbbf24; }
.ready-bad { color: #f87171; }

/* ---------- fishing, firemaking, farming, agility ---------- */
.info-strip { margin: 0.6rem 0 0.9rem; padding: 0.6rem 0.85rem; border-radius: 12px; font-size: 0.85rem; line-height: 1.45; }
.info-strip.lit { border-color: rgba(249, 115, 22, 0.55); background: rgba(249, 115, 22, 0.08); }
.plot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; margin: 0.8rem 0; }
.plot-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.7rem 0.6rem; border-radius: 14px; }
.plot-card.locked { opacity: 0.55; }
.plot-card.ready { border-color: rgba(132, 204, 22, 0.6); box-shadow: 0 0 16px rgba(132, 204, 22, 0.18); }
/* the bag of seeds, and plots you tap: an empty plot plants the picked seed, a ready one harvests */
.seed-bag { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.8rem; padding: 0.7rem 0.8rem; border-radius: 12px; border: 1px solid var(--line); }
.seed .pick-sub { color: var(--gold-color); }
.seed.locked { opacity: 0.6; border-style: dashed; cursor: default; }
.seed.locked .pick-sub { color: var(--text-muted); }
button.plot-card { align-items: center; text-align: center; color: inherit; font: inherit; }
button.plot-card.empty { border-style: dashed; }
button.plot-card:hover { transform: translateY(-2px); border-color: rgba(240, 198, 116, 0.65); }
.plot-do { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 700; color: var(--heading); }
.plot-card.ready .plot-do { color: #bef264; }
.plot-do .camp-price.missing { color: #f87171; }
.plot-art { align-self: center; font-size: 1.8rem; line-height: 1; }
.course-run { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.9rem; padding: 0.8rem; border-radius: 14px; }
.course-run.active { border-color: rgba(225, 29, 72, 0.55); }
.course-run .action-progress-container { flex-basis: 100%; }
/* the course: a card per slot (built, open with three obstacles to pick from, or the next padlock) */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 0.7rem; }
.course-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.8rem 0.7rem; border-radius: 14px; text-align: center; }
.course-slot.built { border-color: rgba(225, 29, 72, 0.45); box-shadow: inset 0 0 22px rgba(225, 29, 72, 0.08); }
.course-slot.open { border-style: dashed; justify-content: flex-start; }
.course-slot.locked { opacity: 0.6; border-style: dashed; }
.obstacle-medal { width: 48px; height: 48px; }
.obstacle-medal .nav-emoji { font-size: 1.45rem; }
.obstacle-medal .spr { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.65)); }
.slot-name { font-family: var(--font-display); line-height: 1.2; color: var(--heading); }
.slot-bonus { font-size: 0.8rem; line-height: 1.3; text-wrap: balance; }
.slot-swap { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: 0.82rem; }
.slot-price { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.3rem 0.7rem; font-size: 0.78rem; }
.slot-price .camp-price.missing { color: #f87171; }
.obstacle-picks { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0.4rem; width: 100%; }
.obstacle-pick { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: 0; padding: 0.55rem 0.25rem; text-align: center; border-radius: 10px; }
.obstacle-pick .slot-bonus { font-size: 0.7rem; font-weight: 600; }
.obstacle-pick .obstacle-medal { width: 40px; height: 40px; }
.obstacle-pick .obstacle-medal .nav-emoji { font-size: 1.2rem; }
.obstacle-up { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.85rem; }

/* ---------- tables, clans, events, settings ---------- */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: 0.4rem 0.5rem; text-align: left; white-space: nowrap; border-bottom: 1px solid rgba(214, 170, 92, 0.12); }
.data-table th { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-color); }
.data-table .locked-row { opacity: 0.5; }
.data-table td.wrap { white-space: normal; min-width: 12rem; overflow-wrap: anywhere; }
.data-table .you-row { background: rgba(214, 170, 92, 0.12); }
/* a clan's own words, however long a word in them: they wrap instead of pushing the page wide */
.clan-head { min-width: 0; overflow-wrap: anywhere; }
.clan-boss { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 0.9rem; padding: 0.8rem; border-radius: 14px; border-color: rgba(239, 68, 68, 0.4); }
.clan-boss-face { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 50% 60%, rgba(239, 68, 68, 0.28), rgba(0, 0, 0, 0.35) 70%); border: 1px solid rgba(239, 68, 68, 0.45); }
.clan-boss-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.clan-boss.ready .clan-boss-face { box-shadow: 0 0 14px rgba(251, 191, 36, 0.55); }
.clan-attacks { display: inline-flex; gap: 4px; align-items: center; }
.clan-pip { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(251, 191, 36, 0.55); background: rgba(0, 0, 0, 0.35); }
.clan-pip.on { background: radial-gradient(circle at 40% 35%, #fde68a, #d97706); box-shadow: 0 0 6px rgba(251, 191, 36, 0.7); }
.status-pill.clan-next { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--heading); }   /* a felled boss: when the next comes */
.clan-refill { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--text-muted); }   /* when the next attacks come */
.clan-level { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.5rem; border-radius: 999px; border: 1px solid rgba(251, 191, 36, 0.5); color: var(--heading); font-size: 0.72rem; vertical-align: middle; }
/* the clan's banner (data/social.js CLAN_BANNER): on the boss's panel, and beside the food under the hero */
.clan-banner-line { margin: 0.15rem 0 0.25rem; color: var(--text-muted); }
.clan-banner-line b { color: var(--gold-color); }
.hero-banner { color: #fde68a; font-weight: 800; }
/* the clan boss fight (systems/clanfight.js): the boss glows while its guard is down, strikes then land */
.clan-guard-hint { color: #fde68a; font-size: 0.78rem; }
.battle.guard-down .foe .fighter-sprite { filter: drop-shadow(0 0 8px rgba(253, 224, 71, 0.95)) drop-shadow(0 0 22px rgba(250, 204, 21, 0.6)) brightness(1.2); }
.dmg.guard-cue { font-family: var(--font-display); font-size: 1.35rem; color: #fde047; text-shadow: 0 2px 0 #713f12, 0 0 14px rgba(250, 204, 21, 0.95); animation: dmgRise 1.3s ease-out forwards; }
.dmg.glance { font-size: 0.85rem; font-style: italic; color: #cbd5e1; opacity: 0.85; }
@media (max-width: 600px) { .clan-boss-face { width: 56px; height: 56px; } .clan-boss-face .spr { transform: scale(0.8); } }

.event-panel { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.chip.festival::before { display: none; }  /* the token sprite is its coin */
.chip.festival b { color: #fde68a; }
.chip.festival .spr { margin: -4px 0 -4px -2px; }
.token-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.8rem; }
.token-btn .spr { margin: -6px -2px; }

/* the event's milestones: three medals on a bar that fills with this event's tokens */
.ms-track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.7rem; padding-top: 0.2rem; }
.ms-track::before, .ms-track::after { /* the bar, from the first medal's middle to the last's */
    content: ""; position: absolute; top: calc(0.2rem + 27px); left: calc(100% / 6); height: 6px; margin-top: -3px; border-radius: 3px;
}
.ms-track::before { right: calc(100% / 6); background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(214, 170, 92, 0.25); }
.ms-track::after { width: calc(100% * 2 / 3 * var(--f, 0)); background: linear-gradient(90deg, #9c7127, #fcd34d); box-shadow: 0 0 10px rgba(252, 211, 77, 0.45); }
.ms-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; min-width: 0; }
.ms-medal {
    position: relative; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 0;
    background: radial-gradient(circle at 35% 30%, #3a2e22, #140f0a 72%); border: 2px solid rgba(214, 170, 92, 0.35);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(13, 10, 7, 0.85);
}
.ms-medal .spr { margin: 0 -5px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7)); }
.ms-node:not(.done):not(.next) .ms-medal .spr { filter: grayscale(0.7) brightness(0.7); }
.ms-node.next .ms-medal { border-color: #fcd34d; box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(13, 10, 7, 0.85), 0 0 16px rgba(252, 211, 77, 0.45); }
.ms-node.done .ms-medal { border-color: #e2b95f; background: radial-gradient(circle at 35% 30%, #6a4f22, #2a1c0a 72%); }
.ms-check { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; color: #14290f; background: #86efac; box-shadow: 0 0 0 2px #140f0a; }
.ms-check .ico { width: 13px; height: 13px; stroke-width: 2.6; }
.ms-at { display: inline-flex; align-items: center; gap: 0.2rem; font-family: var(--font-display); font-size: 0.95rem; color: var(--heading); }
.ms-at .spr { margin: -4px 0; }
.ms-desc { font-size: 0.74rem; line-height: 1.3; color: var(--text-muted); text-wrap: balance; }
.ms-node.done .ms-desc { color: #fde68a; }
.ms-left { width: 70%; height: 5px; border-radius: 3px; overflow: hidden; background: rgba(0, 0, 0, 0.55); }
.ms-left i { display: block; height: 100%; background: linear-gradient(90deg, #9c7127, #e2b95f); }
.backup-list { display: flex; flex-direction: column; gap: 0.4rem; }
.backup-row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 10px; }

/* ---------- modals ---------- */
.modal-overlay {
    position: fixed; inset: 0; z-index: 100; padding: 1rem; overflow-y: auto;
    display: flex; justify-content: center; align-items: center;
    background: rgba(5, 3, 2, 0.8); backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content {
    position: relative; width: 90%; max-width: 600px; max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 2rem;
    border-radius: 16px; border: 1px solid rgba(214, 170, 92, 0.55);
    background: radial-gradient(ellipse at 50% 0%, rgba(214, 170, 92, 0.12), transparent 60%), linear-gradient(180deg, #221a12, #110c08);
    box-shadow: 0 0 0 1px #000, 0 30px 70px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 230, 180, 0.08);
    transform: translateY(-16px) scale(0.98); transition: transform 0.3s cubic-bezier(.2, 1.3, .4, 1);
}
.modal-overlay.active .modal-content { transform: none; }
.modal-content.narrow { max-width: 420px; }
.modal-header {
    margin-bottom: 1.3rem; padding-bottom: 0.9rem; text-align: center;
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: 0.03em; color: var(--heading);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 22px rgba(214, 170, 92, 0.35);
    border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--line-strong), transparent) 1;
}
.modal-body { display: flex; flex-direction: column; gap: 1rem; }
.modal-footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.modal-btn { flex: 1; padding: 0.95rem; font-size: 1.05rem; font-weight: 800; border-radius: 10px; }
.btn-cancel { color: var(--text-main); }
.btn-confirm { color: #1f1406; border-color: #f7d88a; background: linear-gradient(180deg, #e2b95f, #9c7127); text-shadow: 0 1px 0 rgba(255, 240, 200, 0.35); }
.btn-confirm:hover { color: #140d03; border-color: #fff1c9; background: linear-gradient(180deg, #f0cb72, #b08233); box-shadow: 0 0 20px rgba(252, 211, 77, 0.4); }
.btn-register { color: #d1fae5; border-color: rgba(52, 211, 153, 0.7); background: linear-gradient(180deg, #14532d, #0a2e19); }

/* ---------- toasts ---------- */
#toast-area { position: fixed; right: 1rem; bottom: 1rem; z-index: 500; display: flex; flex-direction: column; gap: 0.4rem; pointer-events: none; }
.toast {
    --toast: var(--accent-color);
    padding: 0.6rem 0.9rem 0.6rem 1rem; border-radius: 10px; font-size: 0.85rem;
    background: linear-gradient(180deg, rgba(34, 26, 18, 0.97), rgba(18, 13, 9, 0.97));
    border: 1px solid rgba(214, 170, 92, 0.35);
    box-shadow: inset 3px 0 0 var(--toast), 0 10px 24px rgba(0, 0, 0, 0.5);
    transition: opacity 0.5s; animation: toastIn 0.35s cubic-bezier(.2, 1.3, .4, 1);
}
.toast.fade { opacity: 0; }
.toast:has(.toast-icon) { display: flex; align-items: center; gap: 0.5rem; }
.toast-icon { flex: 0 0 auto; display: inline-grid; place-items: center; line-height: 0; }
.toast-icon .spr { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.toast.level { --toast: var(--verdigris); }
.toast.achievement, .toast.boss, .toast.daily, .toast.unlock { --toast: var(--gold-color); }
.toast.error, .toast.death { --toast: var(--ember); border-color: rgba(239, 68, 68, 0.45); }
.toast.prestige, .toast.craft { --toast: var(--arcane); }
.toast.minigame { --toast: #38bdf8; }

/* ---------- motion ---------- */
@keyframes progressFlow { from { background-position: 0 0; } to { background-position: 40px 0; } }
@keyframes liveBadgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; } }

/* ---------- tablets and phones: the sidebar becomes a scrolling tab strip ---------- */
@media (max-width: 900px) {
    body { padding: 0.75rem 1rem; }
    #app.layout-sidebar { flex-direction: column; }
    #sidebar { width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; padding: 0.5rem 0.6rem; border-radius: 14px; }
    /* the top bar: the seal and the name on one line, no rule */
    .brand { flex: 1 0 auto; justify-content: flex-start; gap: 0.55rem; padding: 0; margin: 0; }
    .brand::before, .brand::after { display: none; }
    .brand-seal { width: 38px; height: 38px; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.55), 0 0 0 1px #2a1a08, 0 0 0 3px #c9a45c, 0 0 0 4px #5c4318, 0 3px 8px rgba(0, 0, 0, 0.6); }
    .brand-seal .hero-doll { top: 4px; }
    .brand-fantasy { font-size: 1.12rem; }
    .brand-idle { font-size: 0.56rem; margin-top: 0.22rem; }
    #nav { order: 3; flex: 1 1 100%; min-width: 0; }
    /* the next place sits beside the title: in view, where the end of the tab strip is not */
    #nav-next { order: 1; flex: 0 1 auto; min-width: 0; max-width: 62%; }
    #nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 0.35rem; padding-bottom: 0.2rem; scrollbar-width: thin; }
    #nav h3 { display: none; }
    #sidebar .nav-btn { flex: 0 0 auto; min-width: 0; gap: 0.4rem; padding: 0.3rem 0.6rem 0.45rem 0.3rem; font-size: 0.82rem; white-space: nowrap; }
    .nav-icon { flex-basis: 26px; height: 26px; }
    #sidebar .nav-icon .spr { --k: 0.75 !important; }   /* the strip's medallions are small */
    .nav-xp { left: 0.55rem; right: 0.55rem; bottom: 3px; height: 2px; }
    .nav-level { min-width: 24px; padding: 0.06rem 0.32rem 0.02rem; font-size: 0.72rem; border-radius: 6px; }
    .nav-name { flex: 0 0 auto; overflow: visible; }
    .nav-next { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0 0.4rem; min-height: 0; margin: 0; padding: 0.3rem 0.65rem 0.5rem; white-space: nowrap; border-radius: 10px; }
    .nav-next-kicker { font-size: 0.55rem; }
    .nav-next-name { overflow: hidden; text-overflow: ellipsis; font-size: 0.8rem; }
    .nav-next-task { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; font-size: 0.7rem; line-height: 1.25; }
    .nav-next .goal-bar { left: 0.65rem; right: 0.65rem; bottom: 3px; }
    #sidebar .nav-btn:hover { transform: none; }
    #sidebar .nav-btn.active { box-shadow: inset 0 -2px 0 var(--gold-color); }
    #sidebar .nav-btn.action-active { box-shadow: inset 0 -2px 0 var(--verdigris); }
    .two-col { grid-template-columns: 1fr; }
    .prestige-stats { grid-template-columns: 1fr; }
    .combat-controls { flex-direction: column; align-items: stretch; }
    .loadout { flex: 0 0 auto; } /* in a column a flex-basis is a height: without this each row stood 300px tall */
    .panel-header { flex-wrap: wrap; gap: 0.5rem; }
    .skill-info { flex-wrap: wrap; }
    .header-row .chips { gap: 0.3rem; }
    .chip { padding: 0.25rem 0.55rem 0.25rem 0.35rem; }
    .node-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
}
@media (max-width: 700px) {
    #toast-area { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; align-items: stretch; }
    #toast-area .toast:nth-last-child(n+4) { display: none; } /* only the three newest on small screens */
}
/* phones: a compact purse (coin and number), pills packed, stats on one scrolling line */
@media (max-width: 600px) {
    .glass-panel { padding: 1.1rem; }
    #header { padding: 0.75rem 0.85rem; }
    .header-row { gap: 0.4rem; }
    .pills > * { font-size: 0.74rem; padding: 0.25rem 0.55rem; }
    .pills .pill-long, .header-right .cloud-word { display: none; }  /* one row for the pills and the buttons */
    .pills .status-pill { display: none; }  /* the hotbar's Battle and work buttons already show what the hero is doing */
    .chip span, .chip i:not(.spr) { display: none; }
    .chip { gap: 0.35rem; padding: 0.22rem 0.55rem 0.22rem 0.3rem; }
    .chip b { font-size: 0.9rem; }
    .brand-fantasy { font-size: 1.02rem; }
    .minigame-header { flex-direction: column; gap: 0.5rem; }
    .daily-btn { font-size: 0.74rem; padding: 0.3rem 0.6rem; }
    .modal-content { width: 100%; padding: 1.2rem; }
    .modal-header { font-size: 1.2rem; padding-bottom: 0.6rem; margin-bottom: 0.9rem; }
    .modal-btn { padding: 0.75rem; font-size: 1rem; }
    .modal-footer { margin-top: 1rem; }
}

/* ===== Battle scene (src/ui/scene.js) =====
   A painted stage: sky, two silhouette layers and the ground per place, drifting particles, and the
   fighters on top. Each place only swaps the palette and silhouettes below. Motion on the fighters
   is split in two: idle loops here run on the inner element (the knight, the monster's icon), and
   one-shot moves (lunge, hurt, spawn) are Web Animations on .fighter-sprite, so they never clash. */
#scene { position: relative; min-width: 0; }
#scene::after { /* the same gilded corners as the panels, over the stage */
    content: ""; position: absolute; inset: 5px; z-index: 7; pointer-events: none;
    background:
        linear-gradient(var(--corner), var(--corner)) top left / 16px 1px no-repeat,
        linear-gradient(var(--corner), var(--corner)) top left / 1px 16px no-repeat,
        linear-gradient(var(--corner), var(--corner)) top right / 16px 1px no-repeat,
        linear-gradient(var(--corner), var(--corner)) top right / 1px 16px no-repeat,
        linear-gradient(var(--corner), var(--corner)) bottom left / 16px 1px no-repeat,
        linear-gradient(var(--corner), var(--corner)) bottom left / 1px 16px no-repeat,
        linear-gradient(var(--corner), var(--corner)) bottom right / 16px 1px no-repeat,
        linear-gradient(var(--corner), var(--corner)) bottom right / 1px 16px no-repeat;
}
.battle {
    --sky1: #33507f; --sky2: #eaa56f; --orb: #fff1c1; --orb-glow: rgba(255, 214, 140, 0.45); --orb-x: 78%; --orb-y: 24%;
    --far: #56779a; --far-rim: #86a3c0; --near: #2b5637; --near-rim: #3f7a4c; --ground1: #3a6b35; --ground2: #13241a; --mote: #ffe9a8;
    --far-shape: polygon(0% 58%, 7% 50%, 14% 46%, 21% 49%, 28% 43%, 35% 36%, 42% 38%, 49% 46%, 56% 44%, 63% 35%, 70% 31%, 77% 35%, 84% 43%, 91% 41%, 100% 46%, 100% 100%, 0% 100%);
    --near-shape: polygon(0% 40%, 3% 30%, 7% 36%, 10% 26%, 14% 34%, 17% 48%, 22% 62%, 30% 70%, 40% 74%, 50% 75%, 60% 74%, 70% 70%, 78% 62%, 83% 48%, 86% 34%, 90% 26%, 93% 36%, 97% 30%, 100% 38%, 100% 100%, 0% 100%);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: clamp(280px, 30vw, 340px);
    border-radius: var(--radius);
    border: 1px solid rgba(214, 170, 92, 0.38);
    background: var(--ground2);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.battle-sky, .battle-far, .battle-near, .battle-particles { position: absolute; pointer-events: none; }
.battle-sky {
    inset: 0; z-index: -3;
    background:
        radial-gradient(circle at var(--orb-x) var(--orb-y), var(--orb) 0 14px, var(--orb-glow) 18px, transparent 120px),
        linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 80%);
}
.battle-far {
    left: -3%; right: -3%; bottom: 66px; height: 62%; z-index: -2;
    background: linear-gradient(180deg, var(--far-rim), var(--far) 32%);
    clip-path: var(--far-shape);
    animation: driftFar 38s ease-in-out infinite alternate;
}
.battle-near {
    left: -3%; right: -3%; bottom: 58px; height: 36%; z-index: -2;
    background: linear-gradient(180deg, var(--near-rim), var(--near) 26%);
    clip-path: var(--near-shape);
    animation: driftNear 27s ease-in-out infinite alternate;
}
.battle::before { /* the ground the fighters stand on */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 76px; z-index: -1;
    background: linear-gradient(180deg, var(--ground1), var(--ground2));
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.07);
}
.battle::after { /* vignette; red when the hero is in danger */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at 50% 58%, transparent 52%, rgba(0, 0, 0, 0.6) 100%);
}
/* a boss fight: the place dims and a deep crimson closes in at the edges (danger's red pulse wins) */
.battle .battle-sky, .battle .battle-far, .battle .battle-near { transition: filter 0.8s ease; }
.battle.boss-fight .battle-sky, .battle.boss-fight .battle-far, .battle.boss-fight .battle-near { filter: brightness(0.78) saturate(1.15) contrast(1.06); }
.battle.boss-fight::after { background: radial-gradient(ellipse at 50% 58%, transparent 46%, rgba(70, 6, 22, 0.66) 100%); }
.battle.danger::after { background: radial-gradient(ellipse at 50% 58%, transparent 42%, rgba(185, 28, 28, 0.55) 100%); animation: dangerPulse 1s ease-in-out infinite; }
.battle.idle .battle-sky, .battle.idle .battle-far, .battle.idle .battle-near { filter: saturate(0.55) brightness(0.78); }

/* particles: 18 dots, placed by scene.js, animated by kind */
.battle-particles { inset: 0; z-index: 0; overflow: hidden; }
.battle-particles i {
    position: absolute; left: var(--x); top: var(--y);
    width: calc(4px * var(--s)); height: calc(4px * var(--s)); border-radius: 50%;
    background: var(--mote); box-shadow: 0 0 6px var(--mote); opacity: 0;
    animation: moteFloat calc(7s * var(--t)) ease-in-out calc(var(--d) * -1) infinite;
}
.battle[data-particles="fireflies"] .battle-particles i { animation-name: firefly; animation-duration: calc(5s * var(--t)); box-shadow: 0 0 8px 2px var(--mote); }
.battle[data-particles="sparkles"] .battle-particles i { border-radius: 1px; animation-name: twinkle; animation-duration: calc(3.2s * var(--t)); }
.battle[data-particles="bubbles"] .battle-particles i { top: auto; bottom: -12px; width: calc(7px * var(--s)); height: calc(7px * var(--s)); background: transparent; border: 1px solid var(--mote); box-shadow: none; animation-name: bubble; animation-duration: calc(7s * var(--t)); }
.battle[data-particles="rain"] .battle-particles i { top: -24px; width: 1px; height: calc(18px * var(--s)); border-radius: 0; background: linear-gradient(transparent, var(--mote)); box-shadow: none; animation-name: rain; animation-duration: calc(0.8s * var(--t)); animation-timing-function: linear; }
.battle[data-particles="embers"] .battle-particles i { top: auto; bottom: 0; width: calc(3px * var(--s)); height: calc(3px * var(--s)); animation-name: ember; animation-duration: calc(4.5s * var(--t)); }
.battle[data-particles="snow"] .battle-particles i { top: -12px; background: #fff; box-shadow: 0 0 4px rgba(255, 255, 255, 0.8); animation-name: snow; animation-duration: calc(9s * var(--t)); animation-timing-function: linear; }
.battle[data-particles="void"] .battle-particles i { width: calc(6px * var(--s)); height: calc(6px * var(--s)); animation-name: voidDrift; animation-duration: calc(6s * var(--t)); }

/* places */
.battle[data-scene="forest"] {
    --sky1: #0b1820; --sky2: #2b5262; --orb: #e8f4ff; --orb-glow: rgba(200, 230, 255, 0.22); --orb-x: 24%; --orb-y: 22%;
    --far: #163a32; --far-rim: #245548; --near: #06120d; --near-rim: #0d2018; --ground1: #1c3a29; --ground2: #07110b; --mote: #d9ff7a;
    --far-shape: polygon(0% 100%, 0% 55%, 2% 40%, 4% 55%, 6% 30%, 9% 55%, 11% 42%, 13% 55%, 16% 20%, 19% 55%, 22% 45%, 24% 55%, 27% 28%, 30% 55%, 33% 40%, 36% 55%, 39% 25%, 42% 55%, 45% 38%, 48% 55%, 51% 30%, 54% 55%, 57% 42%, 60% 55%, 63% 22%, 66% 55%, 69% 36%, 72% 55%, 75% 26%, 78% 55%, 81% 44%, 84% 55%, 87% 18%, 90% 55%, 93% 38%, 96% 55%, 98% 30%, 100% 50%, 100% 100%);
    --near-shape: polygon(0% 0%, 6% 0%, 5% 72%, 9% 80%, 14% 74%, 19% 84%, 26% 88%, 74% 88%, 81% 84%, 86% 74%, 91% 80%, 95% 72%, 94% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.battle[data-scene="forest"] .battle-near { top: 0; bottom: 40px; height: auto; }
.battle[data-scene="caves"] {
    --sky1: #06050c; --sky2: #1b1830; --orb: rgba(126, 232, 250, 0.14); --orb-glow: rgba(126, 232, 250, 0.14); --orb-x: 68%; --orb-y: 46%;
    --far: #252242; --far-rim: #3f3a78; --near: #0c0a18; --near-rim: #0c0a18; --ground1: #29253f; --ground2: #0d0b17; --mote: #7ee8fa;
    --far-shape: polygon(0% 100%, 0% 36%, 4% 66%, 8% 26%, 12% 70%, 18% 56%, 24% 74%, 31% 50%, 37% 78%, 63% 78%, 69% 48%, 75% 72%, 81% 30%, 87% 68%, 92% 42%, 96% 70%, 100% 34%, 100% 100%);
    --near-shape: polygon(0% 0%, 100% 0%, 100% 42%, 97% 72%, 94% 38%, 90% 92%, 86% 30%, 81% 58%, 76% 26%, 70% 76%, 64% 22%, 57% 46%, 50% 20%, 43% 58%, 37% 24%, 31% 82%, 25% 30%, 19% 56%, 13% 26%, 8% 88%, 4% 36%, 0% 52%);
}
.battle[data-scene="caves"] .battle-near { top: 0; bottom: auto; height: 30%; background: linear-gradient(180deg, #0a0814 35%, #2c2852); }
.battle[data-scene="marsh"] {
    --sky1: #0f1813; --sky2: #46553a; --orb: #dfe9bb; --orb-glow: rgba(200, 220, 150, 0.2); --orb-x: 30%; --orb-y: 30%;
    --far: #24321e; --far-rim: #34462b; --near: #10190e; --near-rim: #1b2818; --ground1: #2b3921; --ground2: #0e150a; --mote: #b5d99c;
    --far-shape: polygon(0% 100%, 0% 70%, 5% 66%, 8% 38%, 8.6% 60%, 10.5% 44%, 11% 62%, 13% 28%, 13.8% 64%, 18% 68%, 30% 72%, 42% 66%, 55% 70%, 66% 64%, 71% 40%, 71.8% 60%, 74% 30%, 74.8% 50%, 77% 36%, 77.6% 62%, 82% 66%, 92% 62%, 100% 68%, 100% 100%);
    --near-shape: polygon(0% 100%, 0% 30%, 1.2% 100%, 2.2% 24%, 3.4% 100%, 4.6% 40%, 5.6% 100%, 7% 28%, 8.2% 100%, 9.6% 50%, 10.6% 100%, 89.4% 100%, 90.4% 46%, 91.6% 100%, 92.8% 26%, 94% 100%, 95.2% 40%, 96.4% 100%, 97.6% 22%, 98.8% 100%, 99.4% 44%, 100% 100%);
}
.battle[data-scene="marsh"] .battle-sky {
    background:
        linear-gradient(180deg, transparent 48%, rgba(190, 210, 160, 0.2) 68%, transparent 84%),
        radial-gradient(circle at var(--orb-x) var(--orb-y), var(--orb) 0 14px, var(--orb-glow) 18px, transparent 120px),
        linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 80%);
}
.battle[data-scene="highland"] {
    --sky1: #121824; --sky2: #465466; --orb: transparent; --orb-glow: transparent;
    --far: #374254; --far-rim: #4d5b71; --near: #1c232e; --near-rim: #29323f; --ground1: #353e2e; --ground2: #13170f; --mote: #a9c1e0;
    --far-shape: polygon(0% 100%, 0% 62%, 7% 44%, 12% 52%, 20% 22%, 27% 42%, 33% 34%, 41% 56%, 49% 30%, 56% 12%, 63% 36%, 70% 28%, 78% 50%, 86% 24%, 93% 42%, 100% 34%, 100% 100%);
    --near-shape: polygon(0% 100%, 0% 52%, 5% 38%, 10% 44%, 14% 62%, 20% 78%, 30% 86%, 70% 86%, 80% 76%, 85% 58%, 89% 42%, 94% 48%, 97% 36%, 100% 44%, 100% 100%);
}
.battle[data-scene="highland"] .battle-sky, .battle[data-scene="titan"] .battle-sky { animation: lightning 9s linear infinite; }
.battle[data-scene="ruins"] {
    --sky1: #02121a; --sky2: #0e4857; --orb: rgba(180, 240, 255, 0.28); --orb-glow: rgba(120, 220, 240, 0.12); --orb-x: 50%; --orb-y: -4%;
    --far: #0a2e38; --far-rim: #134654; --near: #05202a; --near-rim: #0a323e; --ground1: #0f3942; --ground2: #03141a; --mote: #8ee7f0;
    --far-shape: polygon(0% 100%, 0% 28%, 1.5% 26%, 8.5% 26%, 10% 28%, 9% 32%, 9% 100%, 20% 100%, 20% 52%, 21% 48%, 27% 48%, 28% 52%, 27% 58%, 28% 100%, 62% 100%, 62% 64%, 63% 60%, 69% 60%, 70% 64%, 69% 70%, 70% 100%, 84% 100%, 84% 18%, 85.5% 15%, 93.5% 15%, 95% 18%, 94% 24%, 94% 100%, 100% 100%);
    --near-shape: polygon(0% 100%, 0% 60%, 4% 52%, 9% 58%, 13% 70%, 18% 84%, 82% 84%, 87% 70%, 91% 56%, 96% 62%, 100% 54%, 100% 100%);
}
.battle[data-scene="ruins"] .battle-sky {
    background:
        repeating-linear-gradient(100deg, transparent 0 70px, rgba(160, 230, 255, 0.05) 70px 100px),
        radial-gradient(circle at var(--orb-x) var(--orb-y), var(--orb) 0 14px, var(--orb-glow) 18px, transparent 160px),
        linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 80%);
}
.battle[data-scene="volcano"] {
    --sky1: #120303; --sky2: #5a1508; --orb: #ffb347; --orb-glow: rgba(255, 90, 30, 0.42); --orb-x: 46%; --orb-y: 44%;
    --far: #230906; --far-rim: #82300f; --near: #110302; --near-rim: #2a0a05; --ground1: #3a1208; --ground2: #110302; --mote: #ff9a3c;
    --far-shape: polygon(0% 100%, 0% 82%, 14% 72%, 28% 54%, 38% 26%, 42% 20%, 45% 24%, 48% 19%, 52% 23%, 56% 48%, 68% 64%, 84% 74%, 100% 70%, 100% 100%);
    --near-shape: polygon(0% 100%, 0% 44%, 3% 58%, 6% 34%, 10% 56%, 14% 72%, 20% 84%, 80% 84%, 86% 70%, 90% 50%, 94% 64%, 97% 38%, 100% 52%, 100% 100%);
}
.battle[data-scene="frost"] {
    --sky1: #0e182b; --sky2: #6a8db7; --orb: #f0f8ff; --orb-glow: rgba(220, 240, 255, 0.32); --orb-x: 76%; --orb-y: 22%;
    --far: #86a2c4; --far-rim: #eef5ff; --near: #45607f; --near-rim: #c3d4ea; --ground1: #647f9f; --ground2: #1f2d40; --mote: #ffffff;
    --far-shape: polygon(0% 100%, 0% 58%, 8% 40%, 14% 50%, 22% 18%, 30% 44%, 36% 34%, 44% 54%, 52% 26%, 58% 8%, 66% 36%, 74% 28%, 82% 48%, 90% 22%, 100% 44%, 100% 100%);
    --near-shape: polygon(0% 100%, 0% 50%, 6% 42%, 12% 52%, 18% 70%, 26% 80%, 74% 80%, 82% 70%, 88% 50%, 94% 44%, 100% 52%, 100% 100%);
}
.battle[data-scene="skyreach"] {
    --sky1: #0a1430; --sky2: #6887cc; --orb: #fffbe8; --orb-glow: rgba(255, 245, 200, 0.38); --orb-x: 80%; --orb-y: 26%;
    --near: #1b2646; --near-rim: #33427a; --ground1: #3a456e; --ground2: #131930; --mote: #e8f0ff;
    --near-shape: polygon(0% 100%, 0% 64%, 2% 64%, 4% 14%, 6% 64%, 8% 64%, 9% 100%, 91% 100%, 92% 58%, 94% 58%, 96% 8%, 98% 58%, 100% 58%, 100% 100%);
}
.battle[data-scene="skyreach"] .battle-far {
    clip-path: none; height: 52%; bottom: 44px;
    background:
        radial-gradient(22% 38% at 12% 70%, rgba(226, 232, 255, 0.55), transparent 70%),
        radial-gradient(26% 42% at 38% 80%, rgba(226, 232, 255, 0.42), transparent 70%),
        radial-gradient(24% 36% at 66% 72%, rgba(226, 232, 255, 0.5), transparent 70%),
        radial-gradient(22% 40% at 90% 78%, rgba(226, 232, 255, 0.5), transparent 70%);
}
.battle[data-scene="citadel"] { --sky1: #030008; --sky2: #1e0934; --mote: #c084fc; --ground1: #1b0a2a; --ground2: #06020c; }  /* the Void Citadel: its painting does the rest */
.battle[data-scene="maw"] { --sky1: #010405; --sky2: #0a2226; --mote: #99f6e4; --ground1: #0c1517; --ground2: #030707; }  /* the Abyssal Maw: cold teal, under its painting */
.battle[data-scene="abyss"] {
    --sky1: #030008; --sky2: #1e0934; --orb: #f0abfc; --orb-glow: rgba(192, 38, 211, 0.34); --orb-x: 50%; --orb-y: 30%;
    --far: #1b0730; --far-rim: #6d28d9; --near: #0d0317; --near-rim: #3b0f66; --ground1: #1b0a2a; --ground2: #06020c; --mote: #c084fc;
    --far-shape: polygon(0% 100%, 0% 50%, 6% 34%, 9% 60%, 15% 14%, 19% 58%, 27% 44%, 33% 70%, 45% 62%, 55% 68%, 66% 40%, 71% 62%, 79% 10%, 84% 56%, 91% 34%, 100% 54%, 100% 100%);
    --near-shape: polygon(0% 100%, 0% 30%, 3% 60%, 5% 20%, 8% 62%, 12% 74%, 18% 84%, 82% 84%, 88% 72%, 92% 56%, 95% 18%, 97% 58%, 100% 34%, 100% 100%);
}
.battle[data-scene="dungeon"] {
    --sky1: #0e0a08; --sky2: #231913; --orb: transparent; --orb-glow: transparent;
    --ground1: #2c231c; --ground2: #0e0a07; --mote: #ffb45a;
}
.battle[data-scene="dungeon"] .battle-far {
    clip-path: none; top: 0; bottom: 60px; left: 0; right: 0; height: auto; animation: none;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0 2px, transparent 2px 26px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0 2px, transparent 2px 54px),
        linear-gradient(180deg, #211813, #3a2c22);
}
.battle[data-scene="dungeon"] .battle-near {
    clip-path: none; inset: 0; height: auto; animation: torch 2.4s ease-in-out infinite alternate;
    background: radial-gradient(circle at 9% 36%, rgba(255, 170, 60, 0.5), transparent 110px), radial-gradient(circle at 91% 36%, rgba(255, 170, 60, 0.5), transparent 110px);
}
.battle[data-scene="dungeon"] .battle-near::before, .battle[data-scene="dungeon"] .battle-near::after {
    content: "🔥"; position: absolute; top: calc(36% - 1.2rem); font-size: 1.5rem; filter: drop-shadow(0 0 8px rgba(255, 150, 40, 0.9));
}
.battle[data-scene="dungeon"] .battle-near::before { left: calc(9% - 0.75rem); }
.battle[data-scene="dungeon"] .battle-near::after { right: calc(9% - 0.75rem); }
.battle[data-scene="titan"] {
    --sky1: #08090d; --sky2: #373d49; --orb: transparent; --orb-glow: transparent;
    --far: #1b1f27; --far-rim: #2b313c; --near: #111419; --near-rim: #1f242c; --ground1: #292d35; --ground2: #0b0d11; --mote: #9aa7bb;
    --far-shape: polygon(26% 100%, 29% 68%, 35% 54%, 42% 47%, 44% 30%, 47% 21%, 50% 18%, 53% 21%, 56% 30%, 58% 47%, 65% 54%, 71% 68%, 74% 100%);
    --near-shape: polygon(0% 100%, 0% 56%, 6% 48%, 11% 60%, 16% 76%, 24% 86%, 76% 86%, 84% 76%, 89% 60%, 94% 48%, 100% 56%, 100% 100%);
}
.battle[data-scene="titan"] .battle-far {
    height: 78%;
    background:
        radial-gradient(5px 4px at 48.4% 27%, #ef4444 0 50%, transparent 100%),
        radial-gradient(5px 4px at 51.6% 27%, #ef4444 0 50%, transparent 100%),
        linear-gradient(180deg, var(--far-rim), var(--far) 30%);
}

/* the banner across the top: where, which stage, the path through the zone */
.battle-top {
    position: relative; z-index: 2;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.45rem 1rem;
    padding: 0.7rem 1rem 1.5rem;
    background: linear-gradient(180deg, rgba(5, 6, 10, 0.72), transparent);
}
.battle-title { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85); }
.battle-zone { width: fit-content; padding: 0; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.04em; color: #fbe7b5; line-height: 1.2; text-shadow: inherit; background: none; border: 0; border-radius: 6px; box-shadow: none; }
.battle-zone[disabled] { opacity: 1; cursor: default; }
.battle-zone:not([disabled])::after {  /* the map's folded-paper mark (the Map button's icon): the name opens the map */
    content: ""; display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.4em; vertical-align: 0.06em;
    background: currentColor; opacity: 0.8; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 3.6 5.5 2l5 1.6 4-1.6v10.4l-4 1.6-5-1.6-4 1.6zM5.5 2v10.4M10.5 3.6V14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 3.6 5.5 2l5 1.6 4-1.6v10.4l-4 1.6-5-1.6-4 1.6zM5.5 2v10.4M10.5 3.6V14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.battle-zone:not([disabled]):hover { transform: none; color: #fff3d6; background: none; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; }
.battle-sub { display: flex; flex-wrap: wrap; gap: 0.15rem 0.7rem; font-size: 0.78rem; color: #e2e8f0; font-variant-numeric: tabular-nums; }
.battle-regroup { color: #fde68a; }
.stage-path {
    list-style: none; display: flex; align-items: center; gap: 5px; padding: 4px 8px; margin: 0;
    border-radius: 999px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(214, 170, 92, 0.28);
}
.stage-path li { position: relative; display: flex; }
.stage-path li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 5px; height: 2px; margin-top: -1px; background: rgba(214, 170, 92, 0.35); }
.stage-path b, .stage-path button {
    min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px;
    display: grid; place-items: center;
    font: 800 0.6rem/1 inherit; font-variant-numeric: tabular-nums;
    color: #7c8799; background: rgba(15, 18, 28, 0.92); border: 1px solid rgba(214, 170, 92, 0.3);
    backdrop-filter: none; box-shadow: none;
}
.stage-path .done b, .stage-path .done button { color: #fbe7b5; background: linear-gradient(180deg, #8a6a32, #4a3514); border-color: #c9a45c; }
.stage-path button { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.stage-path button::after { display: none; }
.stage-path button:hover { transform: scale(1.18); box-shadow: 0 0 10px rgba(251, 191, 36, 0.55); background: linear-gradient(180deg, #a8843f, #5c421a); border-color: #fde68a; }
.stage-path button:focus-visible { outline: 2px solid #fde68a; outline-offset: 2px; }
.stage-path .now b { min-width: 27px; height: 27px; border-radius: 14px; font-size: 0.66rem; color: #1a1205; background: radial-gradient(circle, #fcd34d, #b45309); border-color: #fde68a; animation: nodePulse 1.6s ease-in-out infinite; }
.stage-path .boss b, .stage-path .boss button { font-size: 0.72rem; border-color: rgba(239, 68, 68, 0.65); }
/* the bosses' due (src/ui/scene.js): eight marks round the boss's node, the earned ones gold */
.stage-path li.pity::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
    background: repeating-conic-gradient(rgba(10, 6, 2, 0.95) 0 4deg, transparent 4deg 45deg), conic-gradient(#fbbf24 calc(var(--pity) * 360deg), rgba(251, 191, 36, 0.2) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.5));
}
.stage-path .next.boss b { background: rgba(60, 10, 10, 0.9); }
.stage-path .now.boss b { background: radial-gradient(circle, #f87171, #7f1d1d); animation-name: bossNodePulse; }
.battle.regroup .stage-path .boss button { background: radial-gradient(circle, #f87171, #7f1d1d); animation: bossNodePulse 1.3s ease-in-out infinite; }   /* while regrouping, the boss waits a tap away */
/* a pack on new ground (src/ui/scene.js): a pip under the stage for each of its monsters, gold once beaten */
.stage-path .pack { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); display: flex; gap: 3px; pointer-events: none; }
.stage-path .pack i { width: 5px; height: 5px; border-radius: 50%; background: rgba(214, 170, 92, 0.3); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
.stage-path .pack i.on { background: #fbbf24; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 4px rgba(251, 191, 36, 0.8); }
.stage-path .pack i.up { background: #fde68a; }
/* a dungeon run: each room a round portrait of who waits there */
.stage-path .portrait b { width: 28px; min-width: 28px; height: 28px; padding: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #2a2016, #0c0906 75%); }
.stage-path .portrait.now b { width: 32px; min-width: 32px; height: 32px; background: radial-gradient(circle at 50% 40%, #6b4a17, #1a1205 75%); }
.stage-path .portrait.now.boss b { background: radial-gradient(circle at 50% 40%, #7f1d1d, #1a0505 75%); }
.stage-path .portrait.done b { background: radial-gradient(circle at 50% 40%, #2a2016, #0c0906 75%); }
.stage-path .portrait.done .spr { filter: grayscale(1) brightness(0.55); }
.stage-path .portrait.next .spr:not(.silhouette) { opacity: 0.55; }
.stage-path .portrait .spr.silhouette { opacity: 0.8; filter: brightness(0) drop-shadow(0 0 1px rgba(214, 170, 92, 0.7)); }

/* the fighters */
.battle-field {
    position: relative; z-index: 1; flex: 1;
    display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 1rem;
    width: min(100%, 880px); margin: 0 auto; padding: 0 1rem 0.65rem;
}
.fighter { display: flex; flex-direction: column; align-items: center; gap: 0.22rem; min-width: 0; text-align: center; }
.fighter-bars { width: min(100%, 200px); display: flex; flex-direction: column; gap: 2px; }
.fbar-text { font-size: 0.7rem; font-weight: 700; color: #f1f5f9; text-shadow: 0 1px 3px #000; font-variant-numeric: tabular-nums; line-height: 1.2; }
.fbar { position: relative; height: 10px; border-radius: 6px; overflow: hidden; background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(214, 170, 92, 0.5); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.fbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
.fbar .trail { background: #fde68a; }
.fbar .fill { background: linear-gradient(180deg, #4ade80, #15803d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: width 0.12s linear; }
.foe .fbar .fill { background: linear-gradient(180deg, #f87171, #b91c1c); }
.hero.low .fbar .fill { background: linear-gradient(180deg, #fb923c, #c2410c); animation: lowPulse 0.8s ease-in-out infinite; }
.fighter-stand { position: relative; width: 100%; height: clamp(100px, 11vw, 134px); display: flex; align-items: flex-end; justify-content: center; }
.fighter-stand::after { /* shadow on the ground */
    content: ""; position: absolute; left: 50%; bottom: -5px; width: 112px; height: 16px; transform: translateX(-50%); z-index: -1;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.62), transparent 70%);
}
.fighter-sprite { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; transform-origin: 50% 100%; }
.campfire {
    position: absolute; left: calc(50% - 5.4rem); bottom: 0; font-size: 1.6rem; line-height: 0; opacity: 0; transition: opacity 0.6s;
    filter: drop-shadow(0 0 10px rgba(255, 140, 40, 0.9)); animation: flicker 0.9s ease-in-out infinite alternate;
}
.battle.idle .campfire, .battle.regroup .campfire { opacity: 1; }
.foe { cursor: crosshair; outline: none; }
.foe:focus-visible .fighter-stand { outline: 2px dashed rgba(251, 191, 36, 0.85); outline-offset: 2px; border-radius: 12px; }
.foe-icon { display: block; line-height: 0; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.55)); animation: foeBob 2.2s ease-in-out infinite; transition: filter 0.3s; }
.foe:hover .foe-icon { filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.35)) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.55)); }
.foe:active .fighter-stand { transform: scale(0.97); }
.battle.idle .foe-icon { filter: grayscale(0.5) brightness(0.72) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.55)); animation-duration: 4s; }
.foe-aura { position: absolute; left: 50%; bottom: 4%; width: 140%; aspect-ratio: 1; max-width: 190px; transform: translateX(-50%); border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 62%); }
.foe.boss .foe-aura { background: radial-gradient(circle, rgba(239, 68, 68, 0.5), transparent 62%); animation: auraPulse 1.6s ease-in-out infinite; }
.foe.elite .foe-aura { background: radial-gradient(circle, rgba(168, 85, 247, 0.4), transparent 62%); }
.fighter-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; color: #f8fafc; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.7); }
.foe.boss .fighter-name { color: #fca5a5; }
.foe.elite .fighter-name { color: #d8b4fe; }
.fighter-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.6rem; min-height: 1.1em; font-size: 0.7rem; color: #e2e8f0; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.fighter-meta .warn { color: #fbbf24; }
.attack-bar { width: min(100%, 150px); height: 4px; margin: 4px 0; border-radius: 2px; overflow: hidden; background: rgba(0, 0, 0, 0.6); }
.attack-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #fcd34d, #f59e0b); }
.foe .attack-bar i { background: linear-gradient(90deg, #f87171, #dc2626); }
.boss-clock { position: relative; width: min(100%, 180px); height: 12px; border-radius: 6px; overflow: hidden; background: rgba(0, 0, 0, 0.65); border: 1px solid rgba(251, 191, 36, 0.55); }
.boss-clock i { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.boss-clock span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.6rem; font-weight: 800; line-height: 1; color: #fff7ed; text-shadow: 0 1px 2px #000; }
.boss-clock.urgent { border-color: #ef4444; animation: lowPulse 0.6s ease-in-out infinite; }
.boss-clock.urgent i { background: linear-gradient(90deg, #b91c1c, #ef4444); }

/* effects: placed by scene.js in % of the field, centred on the spot */
.fx-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.fx-layer > div { position: absolute; transform: translate(-50%, -50%); pointer-events: none; will-change: transform, opacity; }
.dmg { font-weight: 900; font-size: 1.15rem; line-height: 1; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #000, 0 0 6px rgba(0, 0, 0, 0.9); animation: dmgFloat 0.9s ease-out forwards; }
.dmg.crit { font-size: 1.8rem; color: #fcd34d; text-shadow: 0 2px 0 #7c2d12, 0 0 14px rgba(245, 158, 11, 0.9); animation: dmgCrit 1.1s ease-out forwards; }
.dmg.manual { font-size: 1.15rem; color: #e0f2fe; text-shadow: 0 2px 0 #0c4a6e, 0 0 10px rgba(125, 211, 252, 0.9); }
.dmg.taken { color: #fca5a5; }
.dmg.dodge { font-size: 1rem; font-style: italic; color: #e2e8f0; }
.dmg.heal { display: inline-flex; align-items: center; gap: 2px; font-size: 1.05rem; color: #86efac; text-shadow: 0 2px 0 #052e16, 0 0 10px rgba(74, 222, 128, 0.85); animation: dmgRise 1.1s ease-out forwards; }
.dmg.heal small { font-size: 0.7rem; color: #bbf7d0; }
.dmg.gear { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.15; text-align: center; color: #fcd34d; text-shadow: 0 2px 0 #451a03, 0 0 12px rgba(252, 211, 77, 0.85); animation: dmgRise 1.8s ease-out forwards; }
.dmg.gear.down { color: #fca5a5; text-shadow: 0 2px 0 #450a0a, 0 0 8px rgba(0, 0, 0, 0.9); }
.dmg.heart { font-size: 1.5rem; color: #fb7185; text-shadow: 0 2px 0 #4c0519, 0 0 12px rgba(251, 113, 133, 0.85); animation: dmgRise 1.1s ease-out forwards; }
.dmg.levelup { font-family: var(--font-display); font-size: 1.25rem; color: #86efac; text-shadow: 0 2px 0 #052e16, 0 0 14px rgba(74, 222, 128, 0.9); animation: dmgRise 1.5s ease-out forwards; }
.slash { width: 124px; height: 5px; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 45%, #fde68a 60%, transparent); box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); animation: slash 0.32s ease-out forwards; }
.slash.light { width: 82px; height: 4px; background: linear-gradient(90deg, transparent, rgba(224, 242, 254, 0.95) 45%, #7dd3fc 60%, transparent); box-shadow: 0 0 10px rgba(125, 211, 252, 0.8); animation-duration: 0.22s; }   /* the player's own strike */
.corpse { font-size: clamp(66px, 7.5vw, 94px); line-height: 1; animation: corpse 0.7s ease-in forwards; }
.corpse.boss { font-size: clamp(86px, 10vw, 126px); }
.puff { width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 232, 240, 0.7), rgba(148, 163, 184, 0.25) 50%, transparent 70%); animation: puff 0.65s ease-out forwards; }
.drop-pop { padding: 2px 8px; border-radius: 999px; white-space: nowrap; font-size: 0.78rem; font-weight: 800; color: #d1fae5; background: rgba(6, 78, 59, 0.85); border: 1px solid rgba(52, 211, 153, 0.6); animation: dropPop 1.2s ease-out forwards; }
/* Loot worth seeing (scene.js playLoot): out of the falling monster in an arc, a bounce, its rarity's glow on
   the ground (a ring; a pillar for epic; a tall gold pillar with rays for legendary), "▲ +38% attack" over an
   upgrade, then away to the dock. The node is a point on the ground; everything stands on it. */
.fx-layer > .loot { width: 0; height: 0; transform: none; z-index: 2; }
.fx-layer > .loot > * { position: absolute; left: 0; bottom: 0; pointer-events: none; }
.loot-item { z-index: 4; line-height: 0; transform: translate(-50%, 0); filter: drop-shadow(0 0 6px var(--r)) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.65)); }
.loot.landed .loot-item .spr { animation: lootBob 1.4s ease-in-out 0.1s infinite alternate; }
.loot-ground { width: 116px; height: 34px; margin-bottom: -17px; opacity: 0; transform: translateX(-50%) scale(0.2); border-radius: 50%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--r) 55%, white) 0%, color-mix(in srgb, var(--r) 85%, transparent) 34%, color-mix(in srgb, var(--r) 30%, transparent) 58%, transparent 74%); }
.loot.landed .loot-ground { animation: lootGround 0.45s ease-out forwards, lootBreathe 1.1s ease-in-out 0.45s infinite alternate; }
.loot-ground::after { content: ''; position: absolute; inset: -6px -14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--r) 80%, white); opacity: 0; }
.loot.landed .loot-ground::after { animation: lootRipple 0.7s ease-out forwards; }
.loot.top.landed .loot-ground::after { animation: lootRipple 1.1s ease-out forwards; border-width: 3px; }
.loot-pillar { z-index: 1; width: 76px; height: calc(var(--fh) * 0.62); opacity: 0; transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%;
    background: linear-gradient(0deg, color-mix(in srgb, var(--r) 70%, white) 0%, color-mix(in srgb, var(--r) 90%, transparent) 22%, color-mix(in srgb, var(--r) 55%, transparent) 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent); mask-image: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent); }
.loot-pillar::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 8px; height: 100%; margin-left: -4px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 55%, transparent); }
.loot.top .loot-pillar { width: 100px; height: calc(var(--fh) * 0.96);
    background: linear-gradient(0deg, color-mix(in srgb, var(--r) 80%, white) 0%, var(--r) 20%, color-mix(in srgb, var(--r) 70%, transparent) 55%, transparent 100%); }
/* a rare piece: no standing pillar, a short flare of light as it lands */
.loot.r-rare .loot-pillar { height: calc(var(--fh) * 0.34); }
.loot.r-rare.landed .loot-pillar { animation: lootFlare 0.9s ease-out forwards; }
.loot.landed .loot-pillar { animation: lootPillar 0.4s ease-out forwards, lootShimmer 0.9s ease-in-out 0.4s infinite alternate; }
.loot-rays { z-index: 2; width: 190px; height: 190px; margin: 0 0 calc(var(--ih) / 2 - 95px) -95px; opacity: 0; border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--r) 55%, transparent) 0deg 8deg, transparent 8deg 24deg);
    -webkit-mask-image: radial-gradient(circle, #000 16%, transparent 66%); mask-image: radial-gradient(circle, #000 16%, transparent 66%); }
.loot.landed .loot-rays { animation: lootRays 0.5s ease-out forwards, spin 7s linear infinite; }
/* above legendary: Mythic's crimson, Primal's light running through every colour (data/items.js) */
.loot.r-mythic .loot-pillar, .loot.r-primal .loot-pillar { width: 124px; }
.loot.r-primal.landed .loot-pillar, .loot.r-primal.landed .loot-rays, .loot.r-primal.landed .loot-halo { filter: hue-rotate(0deg); animation-name: lootPillar, lootShimmer, primalHue; animation-duration: 0.4s, 0.9s, 3s; animation-timing-function: ease-out, ease-in-out, linear; animation-iteration-count: 1, infinite, infinite; animation-fill-mode: forwards, none, none; }
.loot.r-primal.landed .loot-rays { animation-name: lootRays, spin, primalHue; animation-duration: 0.5s, 5s, 3s; animation-timing-function: ease-out, linear, linear; animation-iteration-count: 1, infinite, infinite; }
.loot.r-primal.landed .loot-halo { animation-name: lootRays, lootShimmer, primalHue; animation-duration: 0.5s, 1.2s, 3s; animation-iteration-count: 1, infinite, infinite; }
@keyframes primalHue { to { filter: hue-rotate(360deg); } }
.loot.r-mythic .loot-rarity, .loot.r-primal .loot-rarity { color: color-mix(in srgb, var(--r) 45%, white); text-shadow: 0 2px 0 #1c0a0f, 0 0 14px color-mix(in srgb, var(--r) 90%, transparent); }
.loot-spark { z-index: 3; width: 5px; height: 5px; margin: 0 0 calc(var(--ih) / 2) -2px; opacity: 0; background: color-mix(in srgb, var(--r) 45%, white); box-shadow: 0 0 6px var(--r); }
.loot.landed .loot-spark { animation: lootSpark var(--t) ease-out forwards; }
.loot-words { z-index: 5; margin-bottom: calc(var(--ih) + 6px); display: flex; flex-direction: column; align-items: center; gap: 1px; transform: translateX(-50%); opacity: 0; white-space: nowrap; font-family: var(--font-display); }
.loot-gain { font-size: 1rem; font-weight: 800; color: #4ade80; text-shadow: 0 2px 0 #052e16, 0 0 10px rgba(74, 222, 128, 0.75); }
.loot-rarity { font-style: normal; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #fde68a; text-shadow: 0 2px 0 #451a03, 0 0 12px rgba(245, 158, 11, 0.9); }
.loot.landed .loot-words { animation: lootGain 0.45s cubic-bezier(.3, 1.5, .5, 1) forwards; }
/* a legendary's light: a wide soft halo behind its pillar, so it reads on a bright land too */
.loot-halo { z-index: 0; width: 230px; height: calc(var(--fh) * 0.9); margin-bottom: -20px; opacity: 0; transform: translateX(-50%);
    background: radial-gradient(ellipse 50% 60% at 50% 88%, color-mix(in srgb, var(--r) 60%, transparent) 0%, color-mix(in srgb, var(--r) 28%, transparent) 40%, transparent 72%); }
.loot.landed .loot-halo { animation: lootRays 0.5s ease-out forwards, lootShimmer 1.2s ease-in-out 0.5s infinite alternate; }
.fx-layer > .loot.leaving > * { transition: opacity 0.4s ease-in; opacity: 0 !important; }
.flying-loot { position: fixed; z-index: 452; line-height: 0; pointer-events: none; filter: drop-shadow(0 0 8px var(--r)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.loot-arrive { position: fixed; z-index: 452; transform: translate(-50%, -50%); border-radius: 12px; pointer-events: none;
    box-shadow: 0 0 0 2px var(--r), 0 0 26px 6px color-mix(in srgb, var(--r) 65%, transparent); animation: lootArrive 0.7s ease-out forwards; }
/* a legendary upgrade: gold at the screen's edges, and the fight holds its breath (the scene's sprites pause, its land dims) */
.loot-flash { position: fixed; inset: 0; z-index: 451; pointer-events: none; box-shadow: inset 0 0 160px 56px color-mix(in srgb, var(--r, #fcd34d) 85%, transparent); animation: lootFlash 1.1s ease-out forwards; }
.battle.slowmo .battle-sky, .battle.slowmo .battle-far, .battle.slowmo .battle-near { filter: brightness(0.6) saturate(0.7); transition-duration: 0.2s; }
.battle.slowmo .fighter-sprite *, .battle.slowmo .battle-particles i { animation-play-state: paused; }
/* the monster that leaves a piece worth seeing flashes in its colour as it falls */
.corpse.loot { animation-name: corpseLoot; }
.click-spark { font-size: 1.6rem; line-height: 1; color: #fde68a; text-shadow: 0 0 10px rgba(251, 191, 36, 0.9); animation: spark 0.45s ease-out forwards; }
.flying-coin { position: fixed; z-index: 450; margin: -16px 0 0 -16px; font-size: 20px; line-height: 0; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }

/* banner, combo, call to action */
.battle-banner {
    position: absolute; left: 0; right: 0; top: 46%; z-index: 5;
    display: flex; flex-direction: column; align-items: center; gap: 0.12rem;
    padding: 0.7rem 1rem; text-align: center; pointer-events: none;
    opacity: 0; transform: translateY(-50%) scaleY(0.3); transition: opacity 0.35s, transform 0.35s;
    background: linear-gradient(90deg, transparent, rgba(8, 6, 4, 0.84) 18%, rgba(8, 6, 4, 0.84) 82%, transparent);
    border-block: 1px solid rgba(214, 170, 92, 0.5);
}
.battle-banner.show { opacity: 1; transform: translateY(-50%) scaleY(1); }
.battle-banner small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--banner, #fbbf24); }
.battle-banner strong { font-family: var(--font-display); font-size: clamp(1.2rem, 3vw, 1.85rem); font-weight: 800; line-height: 1.15; color: #fff7e6; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 24px var(--banner-glow, rgba(251, 191, 36, 0.4)); }
.battle-banner span { font-size: 0.8rem; color: #e2e8f0; }
.battle-banner.boss { --banner: #f87171; --banner-glow: rgba(239, 68, 68, 0.65); border-color: rgba(239, 68, 68, 0.6); }
.battle-banner.victory { --banner: #fcd34d; --banner-glow: rgba(251, 191, 36, 0.65); }
.battle-banner.defeat { --banner: #cbd5e1; --banner-glow: rgba(100, 116, 139, 0.5); border-color: rgba(148, 163, 184, 0.4); }
.battle-banner.gilded { --banner: #fde68a; --banner-glow: rgba(252, 211, 77, 0.8); border-color: rgba(252, 211, 77, 0.7); }
/* a dungeon chest's contents under its banner: each picture pops out in turn */
.battle-banner .chest-loot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.3rem 0.75rem; margin-top: 0.25rem; }
.chest-loot .cl { display: inline-flex; align-items: center; gap: 0.15rem; opacity: 0; }
.battle-banner.show .chest-loot .cl { animation: chestPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.3s + var(--i) * 0.12s) both; }
.chest-loot .cl b { font-size: 0.82rem; font-weight: 800; color: #fde68a; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.chest-loot .cl .spr { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8)); }
.chest-loot .cl .spr.silhouette { filter: brightness(0) drop-shadow(0 0 1px rgba(240, 198, 116, 0.95)) drop-shadow(0 0 4px rgba(240, 198, 116, 0.5)); }
.chest-loot .cl.gear .spr { filter: drop-shadow(0 0 6px var(--r)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8)); }
@keyframes chestPop { from { opacity: 0; transform: translateY(10px) scale(0.3); } to { opacity: 1; transform: none; } }
body.reduced-motion .battle-banner.show .chest-loot .cl { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .battle-banner.show .chest-loot .cl { animation: none; opacity: 1; } }

/* a gilded monster: its sprite turned to gold, a slow shine across it and a golden aura */
.foe.gilded .foe-icon .spr { filter: grayscale(1) sepia(1) saturate(5.5) hue-rotate(8deg) brightness(1.4) contrast(1.15); }  /* grey first, so every monster turns the same gold */
.foe.gilded .foe-icon { filter: drop-shadow(0 0 10px rgba(252, 211, 77, 0.75)) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.55)); }
.foe.gilded .foe-aura { background: radial-gradient(circle, rgba(252, 211, 77, 0.55), transparent 62%); animation: auraPulse 1.2s ease-in-out infinite; }
.foe.gilded .fighter-name { color: #fde68a; text-shadow: 0 0 10px rgba(252, 211, 77, 0.7), 0 1px 2px #000; }
.foe.gilded .fighter-sprite::after { /* the shine */
    content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 250, 220, 0.75) 50%, transparent 62%) -150% 0 / 250% 100% no-repeat;
    -webkit-mask: radial-gradient(ellipse 40% 50% at 50% 60%, #000 60%, transparent 70%); mask: radial-gradient(ellipse 40% 50% at 50% 60%, #000 60%, transparent 70%);
    animation: gildShine 2.4s ease-in-out infinite;
}
@keyframes gildShine { 0%, 30% { background-position: -150% 0; } 70%, 100% { background-position: 150% 0; } }
.corpse.gilded .spr { filter: grayscale(1) sepia(1) saturate(5.5) hue-rotate(8deg) brightness(1.4) contrast(1.15); }
.dmg.gilded-gold { font-family: var(--font-display); font-size: 1.5rem; color: #fde68a; text-shadow: 0 2px 0 #7a5410, 0 0 16px rgba(252, 211, 77, 0.9); animation: dmgRise 1.4s ease-out forwards; }
body.reduced-motion .foe.gilded .fighter-sprite::after, body.reduced-motion .foe.gilded .foe-aura { animation: none; }
@media (prefers-reduced-motion: reduce) { .foe.gilded .fighter-sprite::after, .foe.gilded .foe-aura { animation: none; } }
.battle-combo { position: absolute; left: 50%; top: 60%; z-index: 4; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9); }
.battle-combo b { font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1; color: #f8fafc; }
.battle-combo span { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #cbd5e1; }
.battle-combo em { min-height: 1em; font-size: 0.68rem; font-style: normal; color: #fcd34d; white-space: nowrap; }
.battle-combo[data-tier="1"] b { color: #fde68a; }
.battle-combo[data-tier="2"] b { color: #fb923c; text-shadow: 0 0 14px rgba(251, 146, 60, 0.8), 0 2px 6px #000; }
.battle-combo[data-tier="3"] b { color: #f472b6; text-shadow: 0 0 18px rgba(236, 72, 153, 0.9), 0 2px 6px #000; animation: comboThrob 0.6s ease-in-out infinite; }
.battle-cta {
    position: absolute; left: 0; right: 0; bottom: 20%; z-index: 6; margin: 0 auto; width: fit-content; height: fit-content;
    display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.6rem; border-radius: 12px;
    font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.06em; color: #fff7e6;
    border: 1px solid #d6aa5c; background: linear-gradient(180deg, #8b2c1a, #4a120a);
    animation: ctaGlow 1.8s ease-in-out infinite;
}
.battle-cta:hover { border-color: #fde68a; background: linear-gradient(180deg, #a3361f, #5a160c); }

@keyframes driftFar { from { transform: translateX(-1.2%); } to { transform: translateX(1.2%); } }
@keyframes driftNear { from { transform: translateX(1.6%); } to { transform: translateX(-1.6%); } }
@keyframes moteFloat { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 0.85; } 100% { opacity: 0; transform: translate(22px, -64px); } }
@keyframes firefly { 0%, 100% { opacity: 0; transform: translate(0, 0); } 25% { opacity: 1; transform: translate(14px, -10px); } 50% { opacity: 0.15; transform: translate(-6px, -22px); } 75% { opacity: 1; transform: translate(10px, -8px); } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: rotate(45deg) scale(0.2); } 50% { opacity: 1; transform: rotate(45deg) scale(1.4); } }
@keyframes bubble { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 0.7; } 50% { transform: translate(10px, -180px); } 100% { opacity: 0; transform: translate(-6px, -360px); } }
@keyframes rain { 0% { opacity: 0; transform: translate(0, 0) rotate(12deg); } 10% { opacity: 0.65; } 100% { opacity: 0.65; transform: translate(-80px, 400px) rotate(12deg); } }
@keyframes ember { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(34px, -320px); } }
@keyframes snow { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 0.9; } 50% { transform: translate(24px, 190px); } 100% { opacity: 0.5; transform: translate(-10px, 390px); } }
@keyframes voidDrift { 0%, 100% { opacity: 0; transform: translate(0, 0) scale(0.6); } 50% { opacity: 0.9; transform: translate(-18px, -26px) scale(1.2); } }
@keyframes lightning { 0%, 91%, 93.5%, 100% { filter: none; } 92% { filter: brightness(2.2); } 94.5% { filter: brightness(1.7); } 95.5% { filter: none; } }
@keyframes torch { from { opacity: 0.75; } to { opacity: 1; } }
@keyframes heroBreathe { 0%, 100% { transform: none; } 50% { transform: translateY(-1px) scaleY(1.015); } }
@keyframes foeBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes auraPulse { 0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(0.94); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } }
@keyframes flicker { from { transform: scale(1) rotate(-3deg); } to { transform: scale(1.1) rotate(3deg); } }
@keyframes nodePulse { 0%, 100% { box-shadow: 0 0 8px rgba(251, 191, 36, 0.55); } 50% { box-shadow: 0 0 16px rgba(251, 191, 36, 0.95); } }
@keyframes bossNodePulse { 0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.55); } 50% { box-shadow: 0 0 18px rgba(239, 68, 68, 0.95); } }
@keyframes lowPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes dangerPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes comboThrob { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes ctaGlow { 0%, 100% { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 16px rgba(214, 170, 92, 0.3); } 50% { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 34px rgba(214, 170, 92, 0.7); } }
@keyframes dmgFloat { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
@keyframes dmgCrit { 0% { opacity: 0; transform: translate(-50%, -40%) scale(2.2) rotate(-8deg); } 18% { opacity: 1; transform: translate(-50%, -60%) scale(1) rotate(-4deg); } 30% { transform: translate(-50%, -66%) scale(1.15) rotate(3deg); } 100% { opacity: 0; transform: translate(-50%, -210%) scale(1) rotate(0deg); } }
@keyframes dmgRise { 0% { opacity: 0; transform: translate(-50%, 0) scale(0.7); } 20% { opacity: 1; transform: translate(-50%, -40%) scale(1.1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -170%) scale(1); } }
@keyframes slash { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(-34deg) scaleX(0.1); } 60% { opacity: 1; transform: translate(-50%, -50%) rotate(-34deg) scaleX(1.1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-34deg) scaleX(1.2); } }
@keyframes corpse { /* knocked up and away from the spot the next monster appears in, fading as it goes */
    0% { opacity: 1; transform: translate(-50%, -50%); filter: brightness(2.2); }
    55% { opacity: 0.4; }
    100% { opacity: 0; transform: translate(12%, -100%) rotate(60deg) scale(0.68); filter: grayscale(0.8) brightness(0.7); } }
@keyframes puff { 0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } }
@keyframes dropPop { 0% { opacity: 0; transform: translate(-50%, 0) scale(0.5); } 15% { opacity: 1; transform: translate(-50%, -70%) scale(1.1); } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -110%); } 100% { opacity: 0; transform: translate(-50%, -160%); } }
@keyframes lootGround { from { opacity: 0; transform: translateX(-50%) scale(0.2); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes lootBreathe { from { opacity: 1; } to { opacity: 0.65; } }
@keyframes lootRipple { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.3); } }
@keyframes lootPillar { from { opacity: 0; transform: translateX(-50%) scaleY(0); } to { opacity: 0.9; transform: translateX(-50%) scaleY(1); } }
@keyframes lootShimmer { from { opacity: 0.9; } to { opacity: 0.68; } }
@keyframes lootFlare { 0% { opacity: 0; transform: translateX(-50%) scaleY(0); } 25% { opacity: 0.85; transform: translateX(-50%) scaleY(1); } 100% { opacity: 0; transform: translateX(-50%) scaleY(1.15); } }
@keyframes lootRays { from { opacity: 0; } to { opacity: 1; } }
@keyframes lootSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--far))); } }
@keyframes lootGain { from { opacity: 0; transform: translate(-50%, 10px) scale(0.8); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes lootBob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes lootArrive { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.85); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } }
@keyframes lootFlash { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }
@keyframes corpseLoot {
    0% { opacity: 1; transform: translate(-50%, -50%); filter: brightness(2.4) drop-shadow(0 0 16px var(--loot)); }
    35% { filter: brightness(1.7) drop-shadow(0 0 24px var(--loot)); }
    55% { opacity: 0.45; }
    100% { opacity: 0; transform: translate(12%, -100%) rotate(60deg) scale(0.68); filter: grayscale(0.8) brightness(0.7) drop-shadow(0 0 0 transparent); } }
@keyframes spark { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8) rotate(90deg); } }

@media (max-width: 600px) {
    .battle { min-height: 262px; }
    .battle-top { padding: 0.55rem 0.7rem 1rem; gap: 0.35rem; }
    .battle-zone { font-size: 1rem; }
    .battle-sub { font-size: 0.72rem; }
    .stage-path { gap: 3px; padding: 3px 6px; }
    .stage-path li + li::before { width: 3px; }
    .stage-path b, .stage-path button { min-width: 19px; height: 19px; padding: 0 3px; font-size: 0.55rem; }
    .stage-path .now b { min-width: 23px; height: 23px; }
    .stage-path .portrait b { width: 22px; min-width: 22px; height: 22px; }
    .stage-path .portrait.now b { width: 26px; min-width: 26px; height: 26px; }
    .stage-path .portrait .spr { --k: 0.625 !important; }
    .battle-field { gap: 0.4rem; padding: 0 0.5rem 0.55rem; }
    .fighter-stand { height: 88px; }
    .fighter-bars { width: 100%; }
    .fighter-name { font-size: 0.74rem; }
    .fighter-meta { font-size: 0.62rem; gap: 0.1rem 0.4rem; }
    .campfire { left: calc(50% - 4.3rem); font-size: 1.3rem; }
    .corpse { font-size: 62px; }
    .corpse.boss { font-size: 78px; }
    .battle::before { height: 66px; }
    .battle-far { bottom: 58px; }
    .battle-near { bottom: 50px; }
    .battle-combo b { font-size: 1.5rem; }
    .battle-cta { font-size: 0.95rem; padding: 0.7rem 1.2rem; }
}

/* ===== Reward moments (src/ui/rewards.js) ===== */
#celebrate { position: fixed; inset: 0; z-index: 480; pointer-events: none; overflow: hidden; }
.celebration {
    --cel: #fcd34d; --cel-glow: rgba(251, 191, 36, 0.45);
    position: absolute; left: 50%; top: max(11vh, calc(env(safe-area-inset-top, 0px) + 1rem));
    display: flex; flex-direction: column; align-items: center; gap: 0.12rem;
    width: max-content; min-width: min(300px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem);
    padding: 1.1rem 1.6rem 1rem; text-align: center;
    border-radius: 16px; border: 1px solid rgba(214, 170, 92, 0.75);
    background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--cel) 22%, transparent), transparent 70%), linear-gradient(180deg, rgba(30, 22, 13, 0.97), rgba(12, 9, 6, 0.97));
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 40px var(--cel-glow);
    transform: translateX(-50%);
    animation: celIn 0.55s cubic-bezier(.2, 1.5, .4, 1) both;
}
.celebration.leaving { animation: celOut 0.35s ease-in forwards; }
.celebration.level { --cel: #86efac; --cel-glow: rgba(74, 222, 128, 0.4); }
.celebration.pet { --cel: #5eead4; --cel-glow: rgba(45, 212, 191, 0.45); }
.celebration.legend { --cel: #fb923c; --cel-glow: rgba(249, 115, 22, 0.55); border-color: rgba(249, 115, 22, 0.85); }
.celebration.medal { --cel: #fcd34d; --cel-glow: rgba(252, 211, 77, 0.5); border-color: rgba(252, 211, 77, 0.75); }
.cel-look { display: inline-block; vertical-align: -0.55em; margin: -6px 0; line-height: 0; }
/* a skill at 99: the hero in the new cape, on a gold-rimmed ground like a medal's */
.cel-hero { display: inline-grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; line-height: 0; background: radial-gradient(circle at 50% 38%, #4a3818, #140e07 72%); border: 3px solid #e2b95f; box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(0, 0, 0, 0.4), 0 0 26px rgba(252, 211, 77, 0.45); }
.cel-medal { display: inline-grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a3818, #140e07 72%); border: 3px solid #e2b95f; box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(0, 0, 0, 0.4), 0 0 26px rgba(252, 211, 77, 0.45); }
.celebration.prestige { --cel: #e879f9; --cel-glow: rgba(217, 70, 239, 0.55); border-color: rgba(217, 70, 239, 0.75); }
/* a legendary upgrade dropped (main.js legendaryCard): the piece on a gold disc, what it does, and Equip */
.celebration.legend-drop { --cel: #f59e0b; --cel-glow: rgba(245, 158, 11, 0.6); border-color: rgba(245, 158, 11, 0.9); }
.celebration.legend-drop.r-mythic { --cel: #f43f5e; --cel-glow: rgba(244, 63, 94, 0.6); border-color: rgba(244, 63, 94, 0.9); }
.celebration.legend-drop.r-primal { --cel: #5eead4; --cel-glow: rgba(94, 234, 212, 0.6); border-color: rgba(94, 234, 212, 0.9); }
.cel-loot { display: inline-grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; line-height: 0;
    background: radial-gradient(circle at 50% 42%, #5a3a0e, #160d04 72%); border: 3px solid #f59e0b;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(0, 0, 0, 0.4), 0 0 30px rgba(245, 158, 11, 0.6); }
.cel-loot .spr { filter: drop-shadow(0 0 8px rgba(252, 211, 77, 0.8)); }
.cel-lines .up { color: #4ade80; font-weight: 700; }
.cel-lines .down { color: #f87171; font-weight: 700; }
.cel-act { margin-top: 0.55rem; padding: 0.4rem 1.6rem; border-radius: 999px; border: 1px solid #fcd34d; cursor: pointer;
    font-family: var(--font-display); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.04em; color: #1c1206;
    background: linear-gradient(180deg, #fde68a, #f59e0b); box-shadow: 0 2px 0 #7c4a03, 0 0 16px rgba(245, 158, 11, 0.55); }
.cel-act:hover { filter: brightness(1.08); }
.cel-act:active { transform: translateY(1px); box-shadow: 0 1px 0 #7c4a03, 0 0 12px rgba(245, 158, 11, 0.5); }
.cel-rays {
    position: absolute; left: 50%; top: 2.1rem; width: 240px; height: 240px; margin: -120px 0 0 -120px; z-index: -1; border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--cel) 30%, transparent) 0deg 9deg, transparent 9deg 30deg);
    -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 68%); mask-image: radial-gradient(circle, #000 18%, transparent 68%);
    animation: spin 9s linear infinite;
}
.cel-icon { font-size: 2.7rem; line-height: 1.1; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); animation: celIcon 0.8s cubic-bezier(.3, 1.6, .5, 1) 0.08s both; }
.cel-text { display: contents; }   /* the words: under the picture here, beside it on a phone (below) */
.cel-kicker { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cel); }
.cel-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; line-height: 1.15; color: #fff7e6; text-wrap: balance; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 24px var(--cel-glow); }
.cel-lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.45rem; margin-top: 0.4rem; font-size: 0.8rem; color: #e2e8f0; }
.cel-lines > span { padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(214, 170, 92, 0.3); }  /* the pills, not what is inside them */
.cel-note { max-width: 34ch; margin-top: 0.3rem; font-size: 0.8rem; line-height: 1.4; color: #cbd5e1; text-wrap: balance; }
.confetti { position: absolute; width: 7px; height: 11px; margin: -5px 0 0 -3px; border-radius: 2px; }

.crate-modal { text-align: center; }
.crate-stage { position: relative; height: 118px; display: grid; place-items: center; }
.crate-box { position: relative; font-size: 4.2rem; line-height: 0; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6)); animation: crateShake 0.7s ease-in-out both, cratePop 0.5s cubic-bezier(.3, 1.6, .5, 1) 0.7s both; }
.crate-rays {
    position: absolute; left: 50%; top: 50%; width: 210px; height: 210px; margin: -105px 0 0 -105px; border-radius: 50%; opacity: 0;
    background: repeating-conic-gradient(rgba(251, 191, 36, 0.28) 0deg 12deg, transparent 12deg 30deg);
    -webkit-mask-image: radial-gradient(circle, #000 22%, transparent 68%); mask-image: radial-gradient(circle, #000 22%, transparent 68%);
    animation: fadeIn 0.5s ease-out 0.7s forwards, spin 10s linear 0.7s infinite;
}
.crate-loot { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; text-align: left; }
.crate-loot li {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.8rem; border-radius: 10px; font-weight: 700;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(214, 170, 92, 0.25);
    opacity: 0; animation: lootIn 0.4s cubic-bezier(.3, 1.4, .5, 1) forwards; animation-delay: calc(0.85s + var(--i) * 0.12s);
}
.crate-loot li span { width: 1.6rem; font-size: 1.3rem; text-align: center; }
.crate-loot li.gold { color: #fcd34d; }
.crate-loot li.essence { color: #e879f9; }
.crate-loot li.gem { color: #93c5fd; }
/* the way to the next great crate: seven little crates, the opened ones lit, the seventh bigger */
.crate-way { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin-top: 0.9rem; opacity: 0; animation: fadeIn 0.4s ease-out 1.3s forwards; }
.crate-pips { display: inline-flex; align-items: flex-end; gap: 0.35rem; }
.crate-pips i { display: inline-grid; place-items: center; opacity: 0.35; filter: grayscale(1) brightness(0.6); }
.crate-pips i.on { opacity: 1; filter: sepia(0.5) saturate(1.6) brightness(1.25) drop-shadow(0 0 6px rgba(251, 191, 36, 0.75)); }
.crate-pips i.great.on { filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.95)) brightness(1.15); }
/* a great crate: brighter rays and a golden ring around the dialog */
.crate-modal.great { box-shadow: 0 0 0 2px rgba(252, 211, 77, 0.7), 0 0 50px rgba(252, 211, 77, 0.35), 0 20px 60px rgba(0, 0, 0, 0.6); }
.crate-modal.great .crate-rays { background: repeating-conic-gradient(rgba(253, 230, 138, 0.55) 0deg 12deg, transparent 12deg 30deg); width: 260px; height: 260px; margin: -130px 0 0 -130px; }
.crate-modal.great .modal-header { color: #fde68a; text-shadow: 0 0 16px rgba(252, 211, 77, 0.6); }
body.reduced-motion .crate-way { animation: none; opacity: 1; }

.nav-new {
    padding: 0.12rem 0.45rem; border-radius: 999px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: #1a1205; background: linear-gradient(180deg, #fde68a, #f59e0b); box-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
    animation: liveBadgePulse 1.3s ease-in-out infinite;
}
#sidebar .nav-btn.fresh { border-color: rgba(251, 191, 36, 0.45); }
/* something waiting in a place (render.js readyBadge): ripe crops, the Titan, better gear */
.nav-ready {
    min-width: 20px; height: 20px; padding: 0 0.35rem; border-radius: 999px; display: inline-grid; place-items: center;
    font-size: 0.72rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #052e16;
    background: linear-gradient(180deg, #bbf7d0, #22c55e); box-shadow: 0 0 10px rgba(74, 222, 128, 0.55);
    animation: liveBadgePulse 1.6s ease-in-out infinite;
}
.nav-ready.gold { color: #1a1205; background: linear-gradient(180deg, #fde68a, #f59e0b); box-shadow: 0 0 10px rgba(251, 191, 36, 0.6); }
body.reduced-motion .nav-ready { animation: none; }
@media (prefers-reduced-motion: reduce) { .nav-ready { animation: none; } }

@keyframes celIn { from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.6); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes celOut { to { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(0.96); } }
@keyframes celIcon { from { transform: scale(0.2) rotate(-25deg); } to { transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes crateShake { 0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(-9deg); } 30% { transform: rotate(9deg); } 45% { transform: rotate(-6deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
@keyframes cratePop { 0% { transform: scale(1); } 40% { transform: translateY(-8px) scale(1.3); } 100% { transform: scale(1.06); } }
@keyframes lootIn { from { opacity: 0; transform: translateY(10px) scale(0.92); } to { opacity: 1; transform: none; } }

/* ===== Work you can see (src/ui/actionfx.js) ===== */
#work-fx { position: fixed; inset: 0; z-index: 470; pointer-events: none; overflow: hidden; }
.work-pop {
    position: absolute; transform: translate(-50%, 0); white-space: nowrap;
    font-size: 0.95rem; font-weight: 800; color: #fff7e6; text-shadow: 0 2px 0 #000, 0 0 8px rgba(0, 0, 0, 0.9);
    animation: workPop 1.1s ease-out both;
}
.work-pop.double { font-size: 1.1rem; color: #fde68a; }
.work-pop.gem { font-size: 1.05rem; color: #93c5fd; }
.work-pop.item { font-family: var(--font-display); color: var(--c, #e2e8f0); }
.work-pop.xp { font-size: 0.76rem; color: #86efac; }
.work-pop.perfect { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: #fde68a; text-shadow: 0 0 12px rgba(253, 224, 71, 0.9), 0 2px 2px rgba(0, 0, 0, 0.8); }
@keyframes workPop { 0% { opacity: 0; transform: translate(-50%, 6px) scale(0.7); } 15% { opacity: 1; transform: translate(-50%, -10px) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -66px) scale(1); } }

/* ===== Phone hotbar ===== */
#hotbar { display: none; }
.hot-btn { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.12rem; padding: 0.35rem 0.2rem; border-radius: 10px; font-size: 0.66rem; font-weight: 700; }
.hot-btn:hover { transform: none; }
.hot-icon { font-size: 1.25rem; line-height: 1; }
.hot-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot-btn.active { color: #fff3d6; border-color: var(--gold-color); background: linear-gradient(180deg, #4a3818, #2a1f0e); }
.hot-btn.live .hot-icon { animation: hotLive 1.2s ease-in-out infinite; }
.hot-badge { position: absolute; top: 3px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; font-size: 0.6rem; line-height: 16px; color: #1f1406; background: #fcd34d; box-shadow: 0 0 8px rgba(252, 211, 77, 0.6); }
@keyframes hotLive { 0%, 100% { transform: none; } 50% { transform: translateY(-2px) rotate(-8deg); } }
@media (max-width: 700px) {
    #hotbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem;
        padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(180deg, rgba(28, 21, 14, 0.97), rgba(12, 9, 6, 0.99));
        border-top: 1px solid var(--line-strong); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6);
    }
    body { padding-bottom: calc(4.8rem + env(safe-area-inset-bottom, 0px)); }
    #header .daily-btn { display: none; } /* the hotbar holds the crate here */
    #toast-area { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
    .detail-panel.has-item { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); max-height: 56vh; }
}

/* ===== Sprites (assets/sprites.png, cut by src/ui/sprites.js) =====
   A cell is 32px; --k scales it up with hard pixels. The hero is a stack of cells. */
:root { --k: 2; --atlas-w: 512px; --atlas-h: 640px; }
.spr {
    display: inline-block; width: calc(32px * var(--k)); height: calc(32px * var(--k)); vertical-align: middle;
    background-image: var(--atlas, url(assets/sprites.png)); background-repeat: no-repeat;
    background-size: calc(var(--atlas-w) * var(--k)) calc(var(--atlas-h) * var(--k));
    background-position: calc(var(--sx) * -32px * var(--k)) calc(var(--sy) * -32px * var(--k));
    image-rendering: pixelated; image-rendering: crisp-edges;
}
.sp-fallback { display: inline-block; font-size: calc(22px * var(--k)); line-height: 1; vertical-align: middle; }
.spr.soft { image-rendering: auto; }  /* below 1x a crisp downscale drops pixels; smooth reads better */
.spr.res-spr { vertical-align: -0.32em; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.skill-action-art .spr, .stage-icon .spr, .plot-art .spr { vertical-align: middle; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.65)); }
.bank-tile .spr { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7)); }
.spr.silhouette { filter: brightness(0) drop-shadow(0 0 1px rgba(214, 170, 92, 0.45)); opacity: 0.7; }  /* not found yet */
.zone-emblem .spr { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.75)); }
.zone-emblem .spr.silhouette { opacity: 1; filter: brightness(0) drop-shadow(0 0 1px rgba(240, 198, 116, 0.95)) drop-shadow(0 0 3px rgba(240, 198, 116, 0.35)); }
.zone-lock { position: absolute; right: -4px; bottom: -4px; font-size: 0.7rem; font-style: normal; }
.dungeon-icon .spr, .pet-icon .spr { vertical-align: middle; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.65)); }
.pet-icon .spr.silhouette { opacity: 1; filter: brightness(0) drop-shadow(0 0 1px rgba(240, 198, 116, 0.8)); }
.cel-icon .spr { vertical-align: middle; image-rendering: pixelated; }
.hero-doll { position: relative; display: inline-block; width: calc(32px * var(--k)); height: calc(32px * var(--k)); line-height: 0; }
.hero-doll .spr { position: absolute; left: 0; top: 0; }
.hero .hero-figure { display: block; line-height: 0; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.6)); animation: heroBreathe 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
/* a pet found keeps the hero company (src/ui/scene.js, stage.js): at his feet, in front of him and
   drawn behind him, with a little bob of its own */
.pet-figure { position: absolute; bottom: 0; left: calc(50% + var(--hk, 4) * 9px); z-index: 0; line-height: 0; cursor: pointer; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6)); animation: petBob 1.9s ease-in-out infinite; transform-origin: 50% 100%; }
.hero .fighter-sprite { z-index: 1; }
.stage-pet { align-self: flex-end; margin: 0 -0.6rem 0 -2.2rem; line-height: 0; cursor: pointer; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6)); animation: petBob 1.9s ease-in-out infinite; transform-origin: 50% 100%; }
.stage-pet:empty { display: none; }
@keyframes petBob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) scaleY(1.03); } }
body.reduced-motion .pet-figure, body.reduced-motion .stage-pet { animation: none; }
@media (prefers-reduced-motion: reduce) { .pet-figure, .stage-pet { animation: none; } }
.doll-figure .hero-doll { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.65)); animation: heroBreathe 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
.tile .tile-icon.spr { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7)); }
.detail-art { width: 72px; height: 72px; }
.icon-btn { display: inline-grid; place-items: center; padding: 0.42rem 0.5rem; font-size: 0.95rem; line-height: 1; }
.icon-btn .ico { width: 16px; height: 16px; }

/* ===== Skill stage (src/ui/stage.js): the hero at work above each skill tab ===== */
#stage { position: relative; min-width: 0; }
.stage {
    --sky1: #1a1410; --sky2: #3a2a1c; --far: #2a1f17; --ground1: #3b2d20; --ground2: #15100b; --mote: #ffd27a; --far-shape: polygon(0% 100%, 0% 40%, 15% 55%, 30% 30%, 45% 50%, 60% 25%, 75% 45%, 90% 35%, 100% 50%, 100% 100%);
    position: relative; isolation: isolate; overflow: hidden; min-height: 150px;
    border-radius: var(--radius); border: 1px solid rgba(214, 170, 92, 0.38); background: var(--ground2);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
    user-select: none; -webkit-user-select: none;
}
.stage-sky, .stage-far, .stage-ground, .stage-particles { position: absolute; pointer-events: none; }
.stage-sky { inset: 0; z-index: -3; background: linear-gradient(180deg, var(--sky1), var(--sky2) 85%); }
.stage-far { left: -2%; right: -2%; bottom: 34px; height: 60%; z-index: -2; background: var(--far); clip-path: var(--far-shape); animation: driftFar 40s ease-in-out infinite alternate; }
.stage-ground { left: 0; right: 0; bottom: 0; height: 40px; z-index: -1; background: linear-gradient(180deg, var(--ground1), var(--ground2)); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.07); }
.stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 60%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }
.stage-particles { inset: 0; z-index: 0; overflow: hidden; }
.stage-particles i { position: absolute; left: var(--x); top: var(--y); width: calc(4px * var(--s)); height: calc(4px * var(--s)); border-radius: 50%; background: var(--mote); box-shadow: 0 0 6px var(--mote); opacity: 0; animation: moteFloat calc(7s * var(--t)) ease-in-out calc(var(--d) * -1) infinite; }
.stage[data-skill="mining"] { --sky1: #0f0d14; --sky2: #2a2433; --far: #1d1826; --ground1: #3a3142; --ground2: #130f17; --mote: #7ee8fa; --far-shape: polygon(0% 100%, 0% 30%, 8% 60%, 16% 22%, 26% 66%, 36% 48%, 48% 72%, 60% 40%, 72% 70%, 84% 26%, 92% 62%, 100% 36%, 100% 100%); }
.stage[data-skill="mining"] .stage-particles i { border-radius: 1px; animation-name: twinkle; animation-duration: calc(3.2s * var(--t)); }
.stage[data-skill="woodcutting"] { --sky1: #0b1a14; --sky2: #2b5a3e; --far: #0d2a1b; --ground1: #2c4a2a; --ground2: #0d170c; --mote: #d9ff7a; --far-shape: polygon(0% 100%, 0% 50%, 4% 20%, 8% 50%, 14% 14%, 20% 50%, 26% 28%, 32% 50%, 38% 10%, 44% 50%, 50% 30%, 56% 50%, 62% 16%, 68% 50%, 74% 32%, 80% 50%, 86% 12%, 92% 50%, 97% 26%, 100% 48%, 100% 100%); }
.stage[data-skill="woodcutting"] .stage-particles i { animation-name: firefly; animation-duration: calc(5s * var(--t)); }
.stage[data-skill="fishing"] { --sky1: #0c1a2c; --sky2: #2a5a84; --far: #16395a; --ground1: #1f4f73; --ground2: #0a1f33; --mote: #bfe9ff; --far-shape: polygon(0% 100%, 0% 62%, 20% 52%, 40% 58%, 60% 48%, 80% 56%, 100% 50%, 100% 100%); }
.stage[data-skill="fishing"] .stage-ground { background: linear-gradient(180deg, #3b7fb0, #0a1f33); }
.stage[data-skill="fishing"] .stage-particles i { top: auto; bottom: -8px; width: calc(6px * var(--s)); height: calc(6px * var(--s)); background: transparent; border: 1px solid var(--mote); box-shadow: none; animation-name: bubble; animation-duration: calc(6s * var(--t)); }
.stage[data-skill="hunting"] { --sky1: #2a1a2e; --sky2: #c66a3a; --far: #3b2a2a; --ground1: #6a5a2c; --ground2: #221c0e; --mote: #ffe9a8; --far-shape: polygon(0% 100%, 0% 56%, 12% 48%, 24% 54%, 36% 40%, 50% 50%, 64% 36%, 78% 48%, 90% 42%, 100% 52%, 100% 100%); }
.stage[data-skill="cooking"] { --sky1: #1a0f08; --sky2: #4a2a12; --far: #2a180c; --ground1: #5a3a1a; --ground2: #1c110a; --mote: #ffb45a; --far-shape: polygon(0% 100%, 0% 45%, 100% 45%, 100% 100%); }
.stage[data-skill="cooking"] .stage-particles i { top: auto; bottom: 0; width: calc(3px * var(--s)); height: calc(3px * var(--s)); animation-name: ember; animation-duration: calc(4.5s * var(--t)); }
.stage[data-skill="firemaking"] { --sky1: #06050a; --sky2: #2a1206; --far: #120a06; --ground1: #3a1a0a; --ground2: #0d0603; --mote: #ff9a3c; --far-shape: polygon(0% 100%, 0% 60%, 10% 30%, 14% 60%, 30% 50%, 44% 20%, 48% 56%, 62% 44%, 76% 14%, 80% 58%, 100% 46%, 100% 100%); }
.stage[data-skill="firemaking"] .stage-particles i { top: auto; bottom: 0; width: calc(3px * var(--s)); height: calc(3px * var(--s)); animation-name: ember; animation-duration: calc(4s * var(--t)); }
.stage[data-skill="alchemy"] { --sky1: #120a1e; --sky2: #2e1a4a; --far: #1e1232; --ground1: #3a2a52; --ground2: #130b1e; --mote: #c084fc; --far-shape: polygon(0% 100%, 0% 40%, 100% 40%, 100% 100%); }
.stage[data-skill="alchemy"] .stage-particles i { top: auto; bottom: -8px; width: calc(6px * var(--s)); height: calc(6px * var(--s)); background: transparent; border: 1px solid var(--mote); box-shadow: none; animation-name: bubble; animation-duration: calc(6s * var(--t)); }
.stage[data-skill="smithing"] { --sky1: #140a06; --sky2: #4a1c0a; --far: #2a120a; --ground1: #3a2a24; --ground2: #130c0a; --mote: #ffb347; --far-shape: polygon(0% 100%, 0% 38%, 100% 38%, 100% 100%); }
.stage[data-skill="smithing"] .stage-particles i { top: auto; bottom: 0; width: calc(3px * var(--s)); height: calc(3px * var(--s)); animation-name: ember; animation-duration: calc(3.5s * var(--t)); }
.stage[data-skill="crafting"] { --sky1: #1a1410; --sky2: #3f2f22; --far: #2a2017; --ground1: #4a3a2a; --ground2: #15100b; --mote: #f0abfc; --far-shape: polygon(0% 100%, 0% 42%, 100% 42%, 100% 100%); }
.stage[data-skill="crafting"] .stage-particles i { border-radius: 1px; animation-name: twinkle; animation-duration: calc(3s * var(--t)); }
.stage[data-skill="farming"] { --mote: #e9f7a6; }
.stage[data-skill="farming"] .stage-particles i { animation-name: firefly; animation-duration: calc(5.5s * var(--t)); }
.stage[data-skill="agility"] { --mote: #ffe2b0; }
.stage[data-skill="agility"] .stage-particles i { top: auto; bottom: 0; width: calc(3px * var(--s)); height: calc(3px * var(--s)); animation-name: ember; animation-duration: calc(4.2s * var(--t)); }
.stage-field { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 1.2rem; min-height: 150px; padding: 0.8rem 1.2rem 0.55rem; max-width: 880px; margin: 0 auto; }
.stage-hero { position: relative; line-height: 0; transform-origin: 50% 90%; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.6)); }
.stage-hero::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 110px; height: 14px; transform: translateX(-50%); z-index: -1; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), transparent 70%); }
.stage-figure { display: block; line-height: 0; }
.stage:not(.working) .stage-figure { animation: heroBreathe 2.8s ease-in-out infinite; }
.stage-target { --c: #fcd34d; position: relative; width: 76px; height: 76px; margin-bottom: 0.4rem; flex-shrink: 0; display: grid; place-items: center; }
.stage-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.stage-ring circle { fill: none; stroke-width: 4; }
.ring-track { stroke: rgba(0, 0, 0, 0.55); }
.ring-fill { stroke: var(--c); stroke-linecap: round; filter: drop-shadow(0 0 4px var(--c)); }
.stage-icon { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem; line-height: 1; background: radial-gradient(circle at 35% 30%, #3a2e22, #140f0a 72%); border: 1px solid rgba(214, 170, 92, 0.5); box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.65), 0 4px 10px rgba(0, 0, 0, 0.4); filter: drop-shadow(0 0 0 transparent); }
.stage.working .stage-icon { box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.65), 0 0 18px color-mix(in srgb, var(--c) 45%, transparent); }
.stage.stalled .stage-icon { filter: grayscale(0.8); }
.stage-icon .spr.resting { opacity: 0.55; filter: grayscale(0.5) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.65)); }  /* nothing on the go: the place's own picture, dimmed */
.stage.stalled .ring-fill { stroke: #ef4444; }
.stage-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; margin-bottom: 0.6rem; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85); }
.stage-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: #fbe7b5; line-height: 1.2; }
.stage-sub { font-size: 0.78rem; color: #e2e8f0; }
@media (max-width: 600px) {
    .stage { min-height: 124px; }
    .stage-field { min-height: 124px; gap: 0.7rem; padding: 0.6rem 0.8rem 0.45rem; }
    .stage-target { width: 60px; height: 60px; }
    .stage-icon { width: 46px; height: 46px; font-size: 1.5rem; }
    .stage-ring { inset: -1px; }
    .stage-title { font-size: 0.92rem; }
    .stage-sub { font-size: 0.7rem; }
    .stage-hero::after { width: 80px; }
}

/* ===== Painted backdrops (tools/backdrops.py -> assets/backdrops/*.webp) =====
   Three layers per place, aligned to the bottom: the sky, the far and the near silhouettes. The
   near and far layers keep their slow drift; interiors also get a strip of floor tiles as the ground. */
.battle .battle-far, .battle .battle-near { top: 0; bottom: 0; height: auto; clip-path: none; background-repeat: no-repeat; background-position: center bottom; background-size: cover; }
.battle .battle-sky { background-repeat: no-repeat; background-position: center bottom; background-size: cover; }
.battle[data-scene="meadow"] .battle-sky { background-image: url(assets/backdrops/meadow-sky.webp); }
.battle[data-scene="meadow"] .battle-far { background-image: url(assets/backdrops/meadow-far.webp); }
.battle[data-scene="meadow"] .battle-near { background-image: url(assets/backdrops/meadow-near.webp); }
.battle[data-scene="forest"] .battle-sky { background-image: url(assets/backdrops/forest-sky.webp); }
.battle[data-scene="forest"] .battle-far { background-image: url(assets/backdrops/forest-far.webp); }
.battle[data-scene="forest"] .battle-near { background-image: url(assets/backdrops/forest-near.webp); }
.battle[data-scene="caves"] .battle-sky { background-image: url(assets/backdrops/caves-sky.webp); }
.battle[data-scene="caves"] .battle-far { background-image: url(assets/backdrops/caves-far.webp); }
.battle[data-scene="caves"] .battle-near { background-image: url(assets/backdrops/caves-near.webp); }
.battle[data-scene="caves"]::before { background: url(assets/backdrops/caves-ground.webp) left bottom / auto 100% repeat-x; image-rendering: pixelated; }
.battle[data-scene="marsh"] .battle-sky { background-image: url(assets/backdrops/marsh-sky.webp); }
.battle[data-scene="marsh"] .battle-far { background-image: url(assets/backdrops/marsh-far.webp); }
.battle[data-scene="marsh"] .battle-near { background-image: url(assets/backdrops/marsh-near.webp); }
.battle[data-scene="highland"] .battle-sky { background-image: url(assets/backdrops/highland-sky.webp); }
.battle[data-scene="highland"] .battle-far { background-image: url(assets/backdrops/highland-far.webp); }
.battle[data-scene="highland"] .battle-near { background-image: url(assets/backdrops/highland-near.webp); }
.battle[data-scene="ruins"] .battle-sky { background-image: url(assets/backdrops/ruins-sky.webp); }
.battle[data-scene="ruins"] .battle-far { background-image: url(assets/backdrops/ruins-far.webp); }
.battle[data-scene="ruins"] .battle-near { background-image: url(assets/backdrops/ruins-near.webp); }
.battle[data-scene="volcano"] .battle-sky { background-image: url(assets/backdrops/volcano-sky.webp); }
.battle[data-scene="volcano"] .battle-far { background-image: url(assets/backdrops/volcano-far.webp); }
.battle[data-scene="volcano"] .battle-near { background-image: url(assets/backdrops/volcano-near.webp); }
.battle[data-scene="volcano"]::before { background: url(assets/backdrops/volcano-ground.webp) left bottom / auto 100% repeat-x; image-rendering: pixelated; }
.battle[data-scene="frost"] .battle-sky { background-image: url(assets/backdrops/frost-sky.webp); }
.battle[data-scene="frost"] .battle-far { background-image: url(assets/backdrops/frost-far.webp); }
.battle[data-scene="frost"] .battle-near { background-image: url(assets/backdrops/frost-near.webp); }
.battle[data-scene="frost"]::before { background: url(assets/backdrops/frost-ground.webp) left bottom / auto 100% repeat-x; image-rendering: pixelated; }
.battle[data-scene="skyreach"] .battle-sky { background-image: url(assets/backdrops/skyreach-sky.webp); }
.battle[data-scene="skyreach"] .battle-far { background-image: url(assets/backdrops/skyreach-far.webp); }
.battle[data-scene="skyreach"] .battle-near { background-image: url(assets/backdrops/skyreach-near.webp); }
.battle[data-scene="abyss"] .battle-sky { background-image: url(assets/backdrops/abyss-sky.webp); }
.battle[data-scene="abyss"] .battle-far { background-image: url(assets/backdrops/abyss-far.webp); }
.battle[data-scene="abyss"] .battle-near { background-image: url(assets/backdrops/abyss-near.webp); }
.battle[data-scene="abyss"]::before { background: url(assets/backdrops/abyss-ground.webp) left bottom / auto 100% repeat-x; image-rendering: pixelated; }
.battle[data-scene="dungeon"] .battle-sky { background-image: url(assets/backdrops/dungeon-sky.webp); }
.battle[data-scene="dungeon"] .battle-far { background-image: url(assets/backdrops/dungeon-far.webp); }
.battle[data-scene="dungeon"] .battle-near { background-image: url(assets/backdrops/dungeon-near.webp); }
.battle[data-scene="dungeon"]::before { background: url(assets/backdrops/dungeon-ground.webp) left bottom / auto 100% repeat-x; image-rendering: pixelated; }
.battle[data-scene="titan"] .battle-sky { background-image: url(assets/backdrops/titan-sky.webp); }
.battle[data-scene="titan"] .battle-far { background-image: url(assets/backdrops/titan-far.webp); }
.battle[data-scene="titan"] .battle-near { background-image: url(assets/backdrops/titan-near.webp); }
.battle[data-scene="dungeon"] .battle-near::before, .battle[data-scene="dungeon"] .battle-near::after { display: none; } /* the torches are painted in now */

/* The skill stages share the painted places: the mine is the crystal cave, the bench a wooden hall. */
.stage .stage-far { top: 0; bottom: 0; height: auto; clip-path: none; background-repeat: no-repeat; background-position: center bottom; background-size: cover; }
.stage .stage-sky { background-repeat: no-repeat; background-position: center bottom; background-size: cover; }
.stage[data-skill="mining"] .stage-sky { background-image: url(assets/backdrops/caves-sky.webp); }
.stage[data-skill="mining"] .stage-far { background-image: url(assets/backdrops/caves-far.webp), url(assets/backdrops/caves-near.webp); background-position: center bottom, center bottom; background-size: cover, cover; }
.stage[data-skill="mining"] .stage-ground { background: url(assets/backdrops/caves-ground.webp) left bottom / auto 100% repeat-x; image-rendering: pixelated; }
.stage[data-skill="woodcutting"] .stage-sky { background-image: url(assets/backdrops/forest-sky.webp); }
.stage[data-skill="woodcutting"] .stage-far { background-image: url(assets/backdrops/forest-far.webp), url(assets/backdrops/forest-near.webp); background-position: center bottom, center bottom; background-size: cover, cover; }
.stage[data-skill="fishing"] .stage-sky { background-image: url(assets/backdrops/river-sky.webp); }
.stage[data-skill="fishing"] .stage-far { background-image: url(assets/backdrops/river-far.webp), url(assets/backdrops/river-near.webp); background-position: center bottom, center bottom; background-size: cover, cover; }
.stage[data-skill="hunting"] .stage-sky { background-image: url(assets/backdrops/meadow-sky.webp); }
.stage[data-skill="hunting"] .stage-far { background-image: url(assets/backdrops/meadow-far.webp), url(assets/backdrops/meadow-near.webp); background-position: center bottom, center bottom; background-size: cover, cover; }
.stage[data-skill="cooking"] .stage-sky { background-image: url(assets/backdrops/camp-sky.webp); }
.stage[data-skill="cooking"] .stage-far { background-image: url(assets/backdrops/camp-far.webp), url(assets/backdrops/camp-near.webp); background-position: center bottom, center bottom; background-size: cover, cover; }
.stage[data-skill="firemaking"] .stage-sky { background-image: url(assets/backdrops/camp-sky.webp); }
.stage[data-skill="firemaking"] .stage-far { background-image: url(assets/backdrops/camp-far.webp), url(assets/backdrops/camp-near.webp); background-position: center bottom, center bottom; background-size: cover, cover; }
.stage[data-skill="alchemy"] .stage-sky { background-image: url(assets/backdrops/abyss-sky.webp); }
.stage[data-skill="alchemy"] .stage-far { background-image: url(assets/backdrops/abyss-far.webp), url(assets/backdrops/abyss-near.webp); background-position: center bottom, center bottom; background-size: cover, cover; }
.stage[data-skill="alchemy"] .stage-ground { background: url(assets/backdrops/abyss-ground.webp) left bottom / auto 100% repeat-x; image-rendering: pixelated; }
.stage[data-skill="smithing"] .stage-sky { background-image: url(assets/backdrops/volcano-sky.webp); }
.stage[data-skill="smithing"] .stage-far { background-image: url(assets/backdrops/volcano-far.webp), url(assets/backdrops/volcano-near.webp); background-position: center bottom, center bottom; background-size: cover, cover; }
.stage[data-skill="smithing"] .stage-ground { background: url(assets/backdrops/volcano-ground.webp) left bottom / auto 100% repeat-x; image-rendering: pixelated; }
.stage[data-skill="crafting"] .stage-sky { background-image: url(assets/backdrops/workshop-sky.webp); }
.stage[data-skill="crafting"] .stage-far { background-image: url(assets/backdrops/workshop-far.webp), url(assets/backdrops/workshop-near.webp); background-position: center bottom, center bottom; background-size: cover, cover; }
.stage[data-skill="crafting"] .stage-ground { background: url(assets/backdrops/workshop-ground.webp) left bottom / auto 100% repeat-x; image-rendering: pixelated; }

/* ===== Hand-painted backdrops (docs/art/gemini.md -> tools/paint.py -> assets/paint/*.webp) =====
   A place with a painting shows it whole, drifting slowly, in place of the layers above. */
/* paint:begin: written by tools/paint.py from assets/paint/; run it again instead of editing here. */
@keyframes paintDrift { from { transform: scale(1.06) translateX(-1.3%); } to { transform: scale(1.06) translateX(1.3%); } }
.battle:is([data-scene="meadow"], [data-scene="forest"], [data-scene="caves"], [data-scene="marsh"], [data-scene="highland"], [data-scene="ruins"], [data-scene="volcano"], [data-scene="frost"], [data-scene="skyreach"], [data-scene="abyss"], [data-scene="dungeon"], [data-scene="titan"], [data-scene="warren"], [data-scene="depths"], [data-scene="stronghold"], [data-scene="lair"], [data-scene="citadel"], [data-scene="maw"], [data-scene="necropolis"], [data-scene="hellforge"], [data-scene="weeping"], [data-scene="bone"], [data-scene="ember"], [data-scene="frozen"], [data-scene="writhing"], [data-scene="shadow"], [data-scene="storm"], [data-scene="starless"], [data-scene="iron"], [data-scene="hollow"], [data-scene="choir"], [data-scene="glass"], [data-scene="rot"], [data-scene="rift"], [data-scene="pandemonium"]) .battle-sky { background-position: center 80%; transform-origin: 50% 80%; animation: paintDrift 46s ease-in-out infinite alternate; }
.battle:is([data-scene="meadow"], [data-scene="forest"], [data-scene="caves"], [data-scene="marsh"], [data-scene="highland"], [data-scene="ruins"], [data-scene="volcano"], [data-scene="frost"], [data-scene="skyreach"], [data-scene="abyss"], [data-scene="dungeon"], [data-scene="titan"], [data-scene="warren"], [data-scene="depths"], [data-scene="stronghold"], [data-scene="lair"], [data-scene="citadel"], [data-scene="maw"], [data-scene="necropolis"], [data-scene="hellforge"], [data-scene="weeping"], [data-scene="bone"], [data-scene="ember"], [data-scene="frozen"], [data-scene="writhing"], [data-scene="shadow"], [data-scene="storm"], [data-scene="starless"], [data-scene="iron"], [data-scene="hollow"], [data-scene="choir"], [data-scene="glass"], [data-scene="rot"], [data-scene="rift"], [data-scene="pandemonium"]) .battle-far, .battle:is([data-scene="meadow"], [data-scene="forest"], [data-scene="caves"], [data-scene="marsh"], [data-scene="highland"], [data-scene="ruins"], [data-scene="volcano"], [data-scene="frost"], [data-scene="skyreach"], [data-scene="abyss"], [data-scene="dungeon"], [data-scene="titan"], [data-scene="warren"], [data-scene="depths"], [data-scene="stronghold"], [data-scene="lair"], [data-scene="citadel"], [data-scene="maw"], [data-scene="necropolis"], [data-scene="hellforge"], [data-scene="weeping"], [data-scene="bone"], [data-scene="ember"], [data-scene="frozen"], [data-scene="writhing"], [data-scene="shadow"], [data-scene="storm"], [data-scene="starless"], [data-scene="iron"], [data-scene="hollow"], [data-scene="choir"], [data-scene="glass"], [data-scene="rot"], [data-scene="rift"], [data-scene="pandemonium"]) .battle-near { display: none; }
.battle:is([data-scene="meadow"], [data-scene="forest"], [data-scene="caves"], [data-scene="marsh"], [data-scene="highland"], [data-scene="ruins"], [data-scene="volcano"], [data-scene="frost"], [data-scene="skyreach"], [data-scene="abyss"], [data-scene="dungeon"], [data-scene="titan"], [data-scene="warren"], [data-scene="depths"], [data-scene="stronghold"], [data-scene="lair"], [data-scene="citadel"], [data-scene="maw"], [data-scene="necropolis"], [data-scene="hellforge"], [data-scene="weeping"], [data-scene="bone"], [data-scene="ember"], [data-scene="frozen"], [data-scene="writhing"], [data-scene="shadow"], [data-scene="storm"], [data-scene="starless"], [data-scene="iron"], [data-scene="hollow"], [data-scene="choir"], [data-scene="glass"], [data-scene="rot"], [data-scene="rift"], [data-scene="pandemonium"])::before { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3)); box-shadow: none; }
.battle[data-scene="meadow"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/meadow.webp); }
.battle[data-scene="forest"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/forest.webp); }
.battle[data-scene="caves"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/caves.webp); }
.battle[data-scene="marsh"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/marsh.webp); }
.battle[data-scene="highland"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/highland.webp); animation: lightning 9s linear infinite, paintDrift 46s ease-in-out infinite alternate; }
.battle[data-scene="ruins"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/ruins.webp); }
.battle[data-scene="volcano"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/volcano.webp); }
.battle[data-scene="frost"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/frost.webp); background-position: center 76%; }
.battle[data-scene="skyreach"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/skyreach.webp); background-position: center 72%; }
.battle[data-scene="abyss"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/abyss.webp); }
.battle[data-scene="dungeon"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/dungeon.webp); }
.battle[data-scene="titan"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/titan.webp); animation: lightning 9s linear infinite, paintDrift 46s ease-in-out infinite alternate; }
.battle[data-scene="warren"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/warren.webp); }
.battle[data-scene="depths"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/depths.webp); }
.battle[data-scene="stronghold"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/stronghold.webp); }
.battle[data-scene="lair"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/lair.webp); }
.battle[data-scene="citadel"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/citadel.webp); }
.battle[data-scene="maw"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/maw.webp); }
.battle[data-scene="necropolis"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/necropolis.webp); }
.battle[data-scene="hellforge"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/hellforge.webp); }
.battle[data-scene="weeping"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/weeping.webp); }
.battle[data-scene="bone"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/bone.webp); }
.battle[data-scene="ember"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/ember.webp); }
.battle[data-scene="frozen"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/frozen.webp); }
.battle[data-scene="writhing"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/writhing.webp); }
.battle[data-scene="shadow"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/shadow.webp); }
.battle[data-scene="storm"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/storm.webp); animation: lightning 9s linear infinite, paintDrift 46s ease-in-out infinite alternate; }
.battle[data-scene="starless"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/starless.webp); }
.battle[data-scene="iron"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/iron.webp); }
.battle[data-scene="hollow"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/hollow.webp); }
.battle[data-scene="choir"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/choir.webp); }
.battle[data-scene="glass"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/glass.webp); }
.battle[data-scene="rot"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/rot.webp); }
.battle[data-scene="rift"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/rift.webp); }
.battle[data-scene="pandemonium"] .battle-sky { background-image: linear-gradient(180deg, rgba(12, 8, 5, 0.55), rgba(12, 8, 5, 0) 34%), url(assets/paint/pandemonium.webp); }
.stage:is([data-skill="mining"], [data-skill="woodcutting"], [data-skill="fishing"], [data-skill="hunting"], [data-skill="cooking"], [data-skill="firemaking"], [data-skill="alchemy"], [data-skill="smithing"], [data-skill="crafting"], [data-skill="farming"], [data-skill="agility"]) .stage-sky { background-position: center 80%; transform-origin: 50% 80%; animation: paintDrift 50s ease-in-out infinite alternate; }
.stage:is([data-skill="mining"], [data-skill="woodcutting"], [data-skill="fishing"], [data-skill="hunting"], [data-skill="cooking"], [data-skill="firemaking"], [data-skill="alchemy"], [data-skill="smithing"], [data-skill="crafting"], [data-skill="farming"], [data-skill="agility"]) .stage-far { display: none; }
.stage:is([data-skill="mining"], [data-skill="woodcutting"], [data-skill="fishing"], [data-skill="hunting"], [data-skill="cooking"], [data-skill="firemaking"], [data-skill="alchemy"], [data-skill="smithing"], [data-skill="crafting"], [data-skill="farming"], [data-skill="agility"]) .stage-ground { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3)); box-shadow: none; }
.stage:is([data-skill="mining"], [data-skill="woodcutting"], [data-skill="fishing"], [data-skill="hunting"], [data-skill="cooking"], [data-skill="firemaking"], [data-skill="alchemy"], [data-skill="smithing"], [data-skill="crafting"], [data-skill="farming"], [data-skill="agility"]) .stage-text { margin-left: -0.9rem; padding: 0.35rem 1.4rem 0.4rem 0.9rem; border-radius: 12px; background: radial-gradient(ellipse at 45% 50%, rgba(12, 8, 5, 0.6), rgba(12, 8, 5, 0) 72%); }
.stage[data-skill="mining"] .stage-sky { background-image: url(assets/paint/caves.webp); }
.stage[data-skill="woodcutting"] .stage-sky { background-image: url(assets/paint/forest.webp); }
.stage[data-skill="fishing"] .stage-sky { background-image: url(assets/paint/river.webp); }
.stage[data-skill="hunting"] .stage-sky { background-image: url(assets/paint/meadow.webp); }
.stage[data-skill="cooking"] .stage-sky { background-image: url(assets/paint/camp.webp); }
.stage[data-skill="firemaking"] .stage-sky { background-image: url(assets/paint/camp.webp); }
.stage[data-skill="alchemy"] .stage-sky { background-image: url(assets/paint/lab.webp); }
.stage[data-skill="smithing"] .stage-sky { background-image: url(assets/paint/forge.webp); }
.stage[data-skill="crafting"] .stage-sky { background-image: url(assets/paint/workshop.webp); }
.stage[data-skill="farming"] .stage-sky { background-image: url(assets/paint/farm.webp); }
.stage[data-skill="agility"] .stage-sky { background-image: url(assets/paint/course.webp); }
.intro .intro-layer.sky { background-image: url(assets/paint/meadow.webp); background-position: center 80%; transform-origin: 50% 80%; animation: paintDrift 40s ease-in-out infinite alternate; }
.intro .intro-layer.far, .intro .intro-layer.near { display: none; }
/* paint:end */

/* ===== The title card (a new player's first screen) ===== */
.intro {
    position: relative; width: min(92vw, 620px); max-height: calc(100dvh - 2rem); overflow: hidden auto;
    display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding: 0 0 1.6rem; text-align: center;
    border-radius: 18px; border: 1px solid rgba(214, 170, 92, 0.6);
    background: linear-gradient(180deg, #1c150e, #0d0906 70%);
    box-shadow: 0 0 0 1px #000, 0 40px 90px rgba(0, 0, 0, 0.8), 0 0 60px rgba(214, 170, 92, 0.12);
    animation: introIn 0.7s cubic-bezier(.2, 1.2, .4, 1) both;
}
.intro-scene { position: relative; width: 100%; height: clamp(180px, 34vw, 240px); overflow: hidden; isolation: isolate; border-bottom: 1px solid rgba(214, 170, 92, 0.4); }
.intro-layer { position: absolute; inset: 0 -3%; background-repeat: no-repeat; background-position: center bottom; background-size: cover; }
.intro-layer.sky { z-index: -3; background-image: url(assets/backdrops/meadow-sky.webp); }
.intro-layer.far { z-index: -2; background-image: url(assets/backdrops/meadow-far.webp); animation: driftFar 30s ease-in-out infinite alternate; }
.intro-layer.near { z-index: -1; background-image: url(assets/backdrops/meadow-near.webp); animation: driftNear 22s ease-in-out infinite alternate; }
.intro-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13, 9, 6, 0.85)); }
.intro-motes i { position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 8px #ffe08a; opacity: 0; animation: firefly 5s ease-in-out calc(var(--d) * -1) infinite; }
.intro-hero, .intro-foe { position: absolute; bottom: 10px; z-index: 1; line-height: 0; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.6)); }
.intro-hero { left: 16%; animation: heroBreathe 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
/* arrows either side of the hero on the title card: another look */
.look-turn { position: absolute; z-index: 2; bottom: 52px; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: 1.4rem; font-weight: 800; line-height: 1; color: #fde68a; background: rgba(12, 9, 6, 0.6); border: 1px solid rgba(214, 170, 92, 0.6); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.look-turn:hover { background: rgba(40, 28, 14, 0.85); border-color: #fde68a; }
.look-turn.prev { left: calc(16% - 44px); }
.look-turn.next { left: calc(16% + 168px); }
/* the looks in Settings: a portrait each, the worn one lit */
.look-picks { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
/* the volume: a gold slider beside the speaker */
.volume-row { display: flex; align-items: center; gap: 0.6rem; max-width: 300px; margin: 0.1rem 0 0.6rem 1.7rem; color: var(--text-muted); }
.volume-row .ico { width: 18px; height: 18px; flex: 0 0 auto; }
.volume-row input[type="range"] { flex: 1; accent-color: var(--gold-color); cursor: pointer; }
.look-pick { width: 64px; height: 64px; padding: 0; display: grid; place-items: start center; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3a2c1c, #120d08 75%); border: 1px solid var(--line); box-shadow: none; }
.look-pick .hero-doll { margin-top: 4px; }  /* head and shoulders: what differs between the looks */
.look-pick:hover { border-color: rgba(240, 198, 116, 0.75); transform: translateY(-2px); }
.look-pick.locked { cursor: help; border-style: dashed; }
.look-pick.locked .hero-doll { filter: brightness(0) drop-shadow(0 0 1px rgba(214, 170, 92, 0.75)); opacity: 0.75; }
.look-pick.on { border-color: #f0c674; box-shadow: 0 0 0 2px rgba(240, 198, 116, 0.35), 0 0 14px rgba(240, 198, 116, 0.35); }
/* the cloaks in Settings, once a skill cape is earned: the rank's cloak and each cape, the worn one lit */
.cape-picks { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: -0.3rem 0 0.8rem; }
.cape-pick { width: 64px; height: 64px; padding: 0; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #3a2c1c, #120d08 75%); border: 1px solid var(--line); box-shadow: none; }
.cape-pick:hover { border-color: rgba(240, 198, 116, 0.75); transform: translateY(-2px); }
.cape-pick.on { border-color: #f0c674; box-shadow: 0 0 0 2px rgba(240, 198, 116, 0.35), 0 0 14px rgba(240, 198, 116, 0.35); }
.cape-pick.locked { cursor: help; border-style: dashed; }
.cape-pick .spr.silhouette { opacity: 0.75; filter: brightness(0) drop-shadow(0 0 1px rgba(214, 170, 92, 0.75)); }
.intro-foe { right: 18%; bottom: 14px; animation: introSlime 1.4s ease-in-out infinite; transform-origin: 50% 100%; }
.intro-logo {
    margin: 0.4rem 1rem 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 7vw, 3.2rem); letter-spacing: 0.06em; line-height: 1.05;
    background: linear-gradient(180deg, #fff1c9 10%, #e2b95f 55%, #9c7127); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 3px 0 #2a1a08) drop-shadow(0 0 18px rgba(214, 170, 92, 0.35));
}
.intro-tag { margin: 0 1.4rem; max-width: 34ch; color: var(--text-main); font-size: 0.95rem; text-wrap: balance; }
.intro-name { width: min(80%, 340px); margin-top: 0.2rem; padding: 0.55rem 0.9rem; text-align: center; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.04em; }
.intro-name::placeholder { font-family: inherit; color: var(--text-muted); opacity: 0.8; }
.intro-go { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; width: min(80%, 340px); margin-top: 0.4rem; font-size: 1.15rem; animation: introGo 2s ease-in-out 1s infinite; }
.intro-go .spr, .battle-cta .spr { margin: -4px 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }
.intro-login { padding: 0.3rem 0.6rem; border: 0; background: none; box-shadow: none; color: var(--text-muted); font: inherit; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; }
.intro-login:hover { color: var(--heading); background: none; transform: none; box-shadow: none; }
@keyframes introIn { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes introSlime { 0%, 100% { transform: none; } 40% { transform: translateY(-10px) scaleY(1.06); } 55% { transform: scaleX(1.12) scaleY(0.88); } }
@keyframes introGo { 0%, 100% { box-shadow: 0 0 0 rgba(252, 211, 77, 0); } 50% { box-shadow: 0 0 26px rgba(252, 211, 77, 0.45); } }
@media (max-width: 480px) {
    .intro-hero { left: 4%; }
    .intro-foe { right: 6%; }
    .intro-hero .hero-doll { transform: scale(0.72); transform-origin: 50% 100%; }
    .intro-foe .spr { transform: scale(0.78); transform-origin: 50% 100%; }
    .look-turn { bottom: 40px; width: 30px; height: 30px; font-size: 1.2rem; }
    .look-turn.prev { left: 2px; }
    .look-turn.next { left: calc(4% + 136px); }
}

/* ===== Welcome back: the haul from the time away ===== */
.welcome-back { max-width: 560px; text-align: center; }
.welcome-back .modal-header { margin-bottom: 0.6rem; }
.wb-hero { display: flex; justify-content: center; align-items: flex-end; gap: 2px; margin: -0.3rem 0 0.1rem; line-height: 0; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.65)); }
.wb-hero .hero-doll { animation: heroBreathe 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
.wb-hero .wb-pet { margin-left: -6px; animation: petBob 1.9s ease-in-out infinite; transform-origin: 50% 100%; }
.wb-away { margin: 0; font-size: 1.02rem; }
.wb-story { margin: 0.2rem 0 0.9rem; color: var(--text-muted); font-size: 0.88rem; text-wrap: balance; }
.wb-gold, .wb-skill, .wb-tile, .wb-find { opacity: 0; animation: wbIn 0.45s cubic-bezier(.2, 1.4, .4, 1) calc(0.25s + var(--i) * 0.09s) both; }
.wb-gold { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 auto 0.8rem; padding: 0.35rem 1rem; border-radius: 999px; font-size: 1.1rem; color: #fcd34d; background: rgba(252, 211, 77, 0.08); border: 1px solid rgba(252, 211, 77, 0.4); }
.wb-gold b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.wb-skills { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.9rem; text-align: left; }
.wb-skill { position: relative; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.2rem 0.6rem; padding: 0.5rem 0.7rem 0.75rem; border-radius: 10px; background: var(--well); border: 1px solid rgba(214, 170, 92, 0.18); }
.wb-skill.up { border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 30%, transparent); }
.wb-skill-icon { font-size: 1.2rem; line-height: 0; }
.wb-skill-name { font-weight: 700; min-width: 0; }
.wb-skill-xp { color: #86efac; font-weight: 800; font-variant-numeric: tabular-nums; }
.wb-skill-lv { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }
.wb-skill.up .wb-skill-lv { color: #fde68a; }
.wb-skill.up .wb-skill-lv b { font-size: 1.05rem; }
.wb-bar { position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.32rem; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.55); overflow: hidden; }
.wb-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--c); box-shadow: 0 0 6px var(--c); animation: wbFill 0.9s ease-out calc(0.45s + var(--i) * 0.09s) both; }
.wb-tiles, .wb-used { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 0.9rem; }
.wb-tile { position: relative; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--r) 50%, #2a2016); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--r) 16%, #1d1610), #0e0a07 75%); }
.wb-tile .spr { margin-top: -10px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7)); }
.wb-tile span { position: absolute; left: 0; right: 0; bottom: 2px; font-size: 0.72rem; font-weight: 800; color: #bbf7d0; text-shadow: 0 1px 2px #000, 0 0 4px #000; font-variant-numeric: tabular-nums; }
.wb-used { align-items: center; margin-bottom: 0.4rem; }
.wb-used .wb-tile { width: 46px; height: 46px; opacity: 0.75; }
.wb-used .wb-tile .spr { --k: 1 !important; margin-top: -8px; }
.wb-used .wb-tile span { color: #fca5a5; font-size: 0.66rem; }
.wb-finds { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.9rem; text-align: left; }
/* where the run stopped: climbing (gold) then holding the wall (dim) over the time away */
.wb-wall { display: flex; flex-direction: column; gap: 0.3rem; margin: -0.4rem 0 0.8rem; font-size: 0.86rem; color: var(--text-main); }
.wb-wall-bar { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #d6a24a 0 var(--climb), rgba(255, 255, 255, 0.12) var(--climb) 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); }
/* what is ready now: each a tap away */
.wb-ready { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-bottom: 0.9rem; }
.wb-ready-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.65rem; border-radius: 999px; font-size: 0.82rem; border-color: rgba(252, 211, 77, 0.55); box-shadow: 0 0 10px rgba(252, 211, 77, 0.18); }
.wb-ready-btn .spr { margin: -6px 0; }
/* Settings: the playtest log's count and its export */
.playtest-row { display: flex; align-items: center; gap: 0.6rem; margin: -0.2rem 0 0.6rem 1.8rem; }
.wb-find { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.7rem; border-radius: 10px; background: var(--well); border: 1px solid rgba(214, 170, 92, 0.2); font-size: 0.9rem; }
.wb-find.pet, .wb-find.unique { border-color: rgba(252, 211, 77, 0.55); box-shadow: 0 0 14px rgba(252, 211, 77, 0.18); }
/* the best piece found while away: its picture in its rarity's frame (a legendary's glows) */
.wb-find.best { border-color: color-mix(in srgb, var(--r) 65%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--r) 25%, transparent); }
.wb-loot { flex: 0 0 auto; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; line-height: 0;
    border: 1px solid var(--r); background: radial-gradient(circle, color-mix(in srgb, var(--r) 35%, transparent), transparent 72%), var(--well); }
.wb-find.best.r-legendary .wb-loot, .wb-find.best.r-mythic .wb-loot, .wb-find.best.r-primal .wb-loot { animation: legendGlow 2.4s ease-in-out infinite; }
.wb-rarity { color: var(--r); font-size: 0.78rem; font-weight: 700; }
.wb-up { color: #4ade80; font-size: 0.78rem; font-weight: 700; }
.wb-find.best small { display: block; color: var(--text-muted); font-size: 0.75rem; }
body.reduced-motion .wb-find.best .wb-loot { animation: none; }
.wb-find-icon { width: 32px; text-align: center; font-size: 1.3rem; }
.wb-find .spr { flex: 0 0 auto; }
@keyframes wbIn { from { opacity: 0; transform: translateY(10px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes wbFill { from { width: 0; } }
@media (max-width: 480px) {
    .wb-skill { grid-template-columns: auto 1fr auto; }
    .wb-skill-lv { grid-column: 2 / -1; justify-self: start; }
    .wb-tile { width: 54px; height: 54px; }
}
/* A dialog has the floor: toasts slip behind its backdrop instead of covering its buttons. */
body:has(#modal-root .modal-overlay.active) :is(#toast-area, #celebrate, #work-fx, .flying-coin, .flying-loot, .loot-arrive, .loot-flash) { z-index: 99; }   /* coins and work pops too: they flew over the map and the cards */

/* ===== A calmer screen: the cards, the banners and the About cards =====
   What a new player sees is what they have met so far (systems/disclosure.js); these are the pieces
   that replaced the walls of locked things and "How it works" paragraphs. */

/* the "?" that opens an About card */
.about-btn {
    width: 20px; height: 20px; padding: 0; flex: 0 0 auto; display: inline-grid; place-items: center; vertical-align: middle; border-radius: 50%;
    font: 800 0.7rem/1 var(--font-body); color: var(--accent-color); background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line-strong); box-shadow: none; text-shadow: none;
}
.about-btn:hover { transform: none; color: #1f1406; background: var(--gold-color); border-color: transparent; box-shadow: 0 0 10px rgba(252, 211, 77, 0.5); }
.about-card { padding: 0 0 1.5rem; }
.about-card > :not(.about-art) { margin-left: 1.5rem; margin-right: 1.5rem; }
.about-art { height: 190px; margin-bottom: 1rem; background: linear-gradient(180deg, rgba(28, 21, 14, 0) 50%, #1f1810), var(--art, none) var(--art-at, center) / cover no-repeat; border-bottom: 1px solid rgba(214, 170, 92, 0.25); }
.about-card .modal-header { margin-bottom: 0.7rem; padding-bottom: 0.6rem; }
.about-card:not(:has(.about-art)) .modal-header { margin-top: 1.5rem; }
.about-blurb { margin-bottom: 0.8rem; text-align: center; text-wrap: balance; color: var(--text-main); }
.about-points { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; padding: 0; font-size: 0.9rem; color: var(--text-main); }
.about-points li { position: relative; padding-left: 1.1rem; }
.about-points li::before { content: "◆"; position: absolute; left: 0; top: 0.4em; font-size: 0.55rem; color: var(--accent-color); }

/* a new place, with its picture (src/ui/rewards.js) */
.celebration.clickable { pointer-events: auto; cursor: pointer; }
.celebration.pictured { overflow: hidden; width: min(360px, calc(100vw - 2rem)); padding-top: 0; }
.cel-art { align-self: stretch; height: 128px; margin: 0 -1.6rem 0.6rem; background: linear-gradient(180deg, rgba(18, 13, 8, 0) 45%, rgba(18, 13, 8, 0.97)), var(--art, none) var(--art-at, center) / cover no-repeat; }
.cel-go { margin-top: 0.55rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; color: var(--cel); }
.cel-close { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: 0.72rem; color: #e7dcc6; background: rgba(10, 7, 4, 0.6); border: 1px solid rgba(214, 170, 92, 0.35); box-shadow: none; }
.cel-close:hover { transform: none; color: #fff; background: rgba(10, 7, 4, 0.85); }
.cel-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 0.5rem; width: min(580px, calc(100vw - 4.4rem)); margin-top: 0.7rem; }
.cel-tile { height: 78px; padding: 0; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; border-radius: 10px; border: 1px solid rgba(214, 170, 92, 0.6); background: linear-gradient(180deg, rgba(10, 7, 4, 0) 30%, rgba(10, 7, 4, 0.92)), var(--art, none) var(--art-at, center) / cover no-repeat, #1a1510; }
.cel-tile:hover { border-color: #fde68a; box-shadow: 0 0 14px rgba(252, 211, 77, 0.45); }
.cel-tile span { padding: 0.25rem 0.3rem; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; color: #fff7e6; text-shadow: 0 1px 3px #000; }

/* a place's banner, on the tabs without a scene of their own */
.tab-banner {
    position: relative; overflow: hidden; min-height: 150px; padding: 1rem 1.25rem;
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 1rem;
    border-radius: var(--radius); border: 1px solid rgba(214, 170, 92, 0.38);
    background: linear-gradient(180deg, rgba(12, 8, 5, 0.05) 25%, rgba(12, 8, 5, 0.88)), var(--art, none) var(--art-at, center 70%) / cover no-repeat, var(--panel-2);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.tab-banner h2 { font-size: 1.3rem; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9); }
.tab-banner p { max-width: 54ch; font-size: 0.85rem; color: #e7dcc6; text-shadow: 0 1px 3px #000; }
.tab-banner-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; text-shadow: 0 1px 3px #000; }
.banner-count { font-family: var(--font-display); font-size: 1rem; color: var(--text-main); }
.banner-count b { font-size: 1.5rem; color: var(--gold-color); }
.event-rotation { margin-top: 0.5rem; }
@media (max-width: 600px) { .tab-banner { min-height: 118px; padding: 0.8rem 0.9rem; } .tab-banner h2 { font-size: 1.1rem; } }

/* action cards: quiet at rest, the one being worked opens up */
.h-icon { width: 32px; height: 32px; display: inline-grid; place-items: center; }
.node-card { gap: 0.45rem; padding: 1rem 0.8rem; }
.node-io { text-wrap: balance; }
/* what an action needs: the item, then how many you hold of how many it takes, red when short */
.need { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.05rem 0.4rem 0.05rem 0.15rem; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px rgba(214, 170, 92, 0.16); cursor: help; }
.need .spr { margin: -3px 0; }
.need b { font-weight: 800; }
.need.ok b { color: #86efac; }
.need.missing b { color: #fca5a5; }
.need.missing { box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.4); }
.need i { font-style: normal; color: var(--text-muted); }
.need:hover { background: rgba(214, 170, 92, 0.16); }
.node-stats [data-tip], .mastery-row[data-tip] { cursor: help; }
.node-stats [data-tip]:hover { color: var(--text-main); }
.node-time { font-variant-numeric: tabular-nums; }
.node-have { display: flex; align-items: center; gap: 0.3rem; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--heading); }
.node-card.locked { filter: none; opacity: 0.6; border-style: dashed; }
/* an action card's own picture (tools/cards.py) across its top, the medallion set on its lower edge */
.node-card.has-pic, .plot-card.has-pic { padding-top: 0; }
.card-pic {
    flex: 0 0 auto; align-self: stretch; height: 92px; margin: 0 calc(-1 * var(--pad-x, 0.8rem)) -36px;
    background: linear-gradient(180deg, rgba(18, 13, 9, 0) 40%, rgba(18, 13, 9, 0.88)), var(--pic) center / cover no-repeat;
}
.node-card.has-pic .skill-action-art, .plot-card.has-pic .plot-art { position: relative; z-index: 1; }
.plot-card { --pad-x: 0.6rem; }
.plot-card .card-pic { height: 76px; margin-bottom: -30px; }
.plot-card.growing .card-pic { filter: saturate(0.75) brightness(0.8); }  /* not ready yet */
.node-card.locked .card-pic { filter: grayscale(0.9) brightness(0.45); }
@media (max-width: 600px) { .card-pic { height: 78px; } }
.node-card.locked .skill-action-art .spr, .node-card.locked .skill-action-art .nav-emoji { filter: brightness(0) drop-shadow(0 0 1px rgba(240, 198, 116, 0.8)); }
button.mastery-total { font: inherit; font-size: 0.75rem; font-weight: 700; box-shadow: none; cursor: pointer; }
.minigame-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.9rem; font-size: 0.8rem; color: var(--text-main); }
.minigame-line.live { width: fit-content; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--minigame-accent) 55%, transparent); background: color-mix(in srgb, var(--minigame-accent) 18%, transparent); }

/* the steps of a workshop */
.seg { display: inline-flex; max-width: 100%; gap: 4px; padding: 4px; margin-bottom: 1rem; border-radius: 12px; background: var(--well); border: 1px solid var(--line); }
.seg-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1rem; border-radius: 9px; font-size: 0.9rem; border-color: transparent; background: transparent; box-shadow: none; }
.seg-btn b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: 0.7rem; color: var(--text-muted); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line); }
.seg-btn.on { color: #fff3d6; border-color: var(--accent-hover); background: linear-gradient(180deg, #4a3818, #2a1f0e); box-shadow: 0 0 10px rgba(214, 170, 92, 0.25); }
.seg-btn.on b { color: #1f1406; background: var(--gold-color); border-color: transparent; }
.forge-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.forge-bar .mastery-row { flex: 1 1 200px; width: auto; }
.forge-bar { align-items: flex-end; gap: 0.6rem 1.1rem; padding: 0.7rem 0.8rem; border-radius: 12px; border: 1px solid var(--line); }
/* the metal, the setting and the gem as picture tiles with what you hold (no dropdowns) */
.material-picks { display: flex; flex-direction: column; gap: 0.3rem; }
.pick.empty .spr { opacity: 0.5; filter: grayscale(0.6) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7)); }
.pick.empty .pick-sub { color: var(--text-muted); }
/* the anvil (Smithing): each worn weapon and piece of armour, its plus, and its two jobs with their costs */
.anvil-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.anvil-card {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 1rem 0.9rem 0.9rem;
    border-radius: 14px; text-align: center; border: 1px solid var(--line);
    background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--r) 14%, transparent), transparent 70%), linear-gradient(180deg, #211a13, #15100c);
}
.anvil-art { position: relative; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3a2e22, #140f0a 72%); border: 1px solid color-mix(in srgb, var(--r) 55%, rgba(214, 170, 92, 0.5));
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.65), 0 0 0 3px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.4); }
.anvil-plus { position: absolute; right: -6px; bottom: -4px; padding: 0.1rem 0.4rem; border-radius: 999px; font: 800 0.72rem/1.2 var(--font-display); color: #1f1406; background: linear-gradient(180deg, #fde68a, #d6a24a); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.anvil-name { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; color: var(--r); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.anvil-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.7rem; color: var(--text); font-variant-numeric: tabular-nums; }
.anvil-stats .spr { margin: -4px 0; }
.anvil-stats i { font-style: normal; color: #86efac; }
/* the forge's next rung for the slot (data/workshop.js): "Weapon slot +14 → +15: +5% attack" */
.anvil-next { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.anvil-jobs { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; width: 100%; margin-top: 0.15rem; }
.anvil-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.55rem; border-radius: 10px; font-size: 0.8rem; text-align: left; }
.anvil-btn[aria-disabled="true"] { opacity: 0.7; filter: saturate(0.7); }
.anvil-btn.ready { border-color: var(--accent-hover); box-shadow: 0 0 12px rgba(252, 211, 77, 0.3); }
.anvil-job { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-display); }
.anvil-job b { font-size: 0.92rem; }
.anvil-cost { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
.anvil-done { font-size: 0.8rem; color: var(--gold-color); font-family: var(--font-display); }
.anvil-card .req { font-size: 0.78rem; }
.anvil-empty { padding: 1rem 0; }
@media (max-width: 600px) {   /* a phone: the piece beside its name, the jobs beneath */
    .anvil-grid { gap: 0.6rem; }
    .anvil-card { display: grid; grid-template-columns: 68px 1fr; grid-template-areas: "art name" "art stats" "art next" "jobs jobs"; align-items: center; column-gap: 0.8rem; row-gap: 0.3rem; padding: 0.7rem 0.75rem; text-align: left; }
    .anvil-art { grid-area: art; width: 68px; height: 68px; }
    .anvil-name { grid-area: name; align-self: end; }
    .anvil-stats { grid-area: stats; justify-content: flex-start; align-self: start; }
    .anvil-next { grid-area: next; align-self: start; }
    .anvil-jobs { grid-area: jobs; }
}
@media (max-width: 600px) { .seg { display: flex; } .seg-btn { flex: 1; justify-content: center; padding: 0.5rem 0.4rem; } }
.seg-pic { display: inline-grid; place-items: center; width: 22px; height: 22px; line-height: 0; }
.seg-pic .spr { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7)); }
.hall-seg { display: flex; }
.hall-seg .seg { margin-bottom: 0; }
@media (max-width: 600px) { .hall-seg .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } }  /* four views: two by two on a phone */

/* the hall's records: a picture, a big number, a small label */
.record-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.record { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.7rem 0.5rem 0.75rem; text-align: center; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(33, 26, 19, 0.8), rgba(18, 13, 9, 0.86)); }
.record-art { width: 52px; height: 52px; display: grid; place-items: center; line-height: 0; }
.record-art .spr { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.7)); }
.record-value { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.15; color: var(--gold-color); font-variant-numeric: tabular-nums; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); }
.record-label { font-size: 0.74rem; color: var(--text-muted); }
@media (max-width: 600px) { .record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .record-value { font-size: 1.25rem; } }

/* the hero's rank (data/ranks.js): a badge with a dot in his cloak's colour */
.rank-badge {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem 0.15rem 0.4rem; border-radius: 999px;
    font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; color: var(--heading);
    border: 1px solid color-mix(in srgb, var(--cloak) 60%, transparent); background: color-mix(in srgb, var(--cloak) 16%, rgba(0, 0, 0, 0.45));
}
.rank-badge i { width: 10px; height: 10px; border-radius: 50%; background: var(--cloak); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 6px color-mix(in srgb, var(--cloak) 70%, transparent); }
.fighter-name .lv-short { display: none; }
@media (max-width: 600px) { .fighter-name .lv-long { display: none; } .fighter-name .lv-short { display: inline; } }
.hero-name-field { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin-bottom: 0.6rem; font-size: 0.9rem; font-weight: 600; }
.hero-name-field .text-input { flex: 1 1 180px; max-width: 260px; font-family: var(--font-display); font-weight: 700; }
.rank-next { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.doll-panel .panel-header { flex-wrap: wrap; }

/* the bestiary: a portrait per kind of monster, its stars and how many have fallen */
.bestiary-summary { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; align-items: center; padding: 1rem 1.25rem; }
.beast-total { display: flex; align-items: baseline; gap: 0.5rem; }
.beast-total b { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-color); }
.beast-total span { font-size: 0.82rem; color: var(--text-muted); }
.beast-total .star, .beast-sum .star { width: 18px; height: 18px; fill: var(--gold-color); filter: drop-shadow(0 0 4px rgba(252, 211, 77, 0.45)); }
.beast-sum { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #fde68a; text-shadow: 0 1px 3px #000; }
.beast-sum .star { width: 15px; height: 15px; }
.bestiary-group.unreached { opacity: 0.85; }
.beast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0.6rem; }
.beast {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.6rem 0.4rem 0.55rem; text-align: center;
    border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(33, 26, 19, 0.8), rgba(18, 13, 9, 0.86));
}
.beast.boss { border-color: rgba(239, 68, 68, 0.45); }
.beast.gold { border-color: #e2b95f; box-shadow: 0 0 14px rgba(252, 211, 77, 0.25), inset 0 0 0 1px rgba(252, 211, 77, 0.2); }
.beast-art { width: 64px; height: 64px; display: grid; place-items: center; line-height: 0; }
.beast-art .spr { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.7)); }
.beast-art .spr.silhouette { opacity: 1; filter: brightness(0) drop-shadow(0 0 1px rgba(240, 198, 116, 0.8)); }  /* not met yet: no spoilers */
.beast-name { font-family: var(--font-display); font-size: 0.8rem; line-height: 1.2; color: var(--heading); text-wrap: balance; }
.beast.unmet .beast-name { color: var(--text-muted); letter-spacing: 0.1em; }
.beast-stars { display: inline-flex; gap: 2px; }
.beast-stars i { line-height: 0; }
.beast-stars .star { width: 14px; height: 14px; fill: rgba(0, 0, 0, 0.55); stroke: rgba(214, 170, 92, 0.45); stroke-width: 1; }
.beast-stars i.on .star { fill: var(--gold-color); stroke: #8a6423; filter: drop-shadow(0 0 3px rgba(252, 211, 77, 0.5)); }
.beast-kills { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--text-muted); }
/* the way to the next star: a thin gold bar under the count */
.beast-next { display: block; width: 46px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #fcd34d var(--p), rgba(0, 0, 0, 0.5) var(--p)); }
@media (max-width: 600px) { .beast-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.45rem; } }

/* the armory's second line of numbers; shop goods with their picture; drawers */
.doll-stats.minor { margin-top: 0.45rem; padding-top: 0; border-top: 0; font-size: 0.74rem; }
.shop-item { justify-content: flex-start; }
.shop-item-info { flex: 1; min-width: 0; }
.shop-art { flex: 0 0 48px; height: 48px; border-radius: 12px; }
.shop-art .camp-lv { right: -6px; bottom: -6px; }
/* a perk's badge: a DCSS spell or god icon in a gold frame (tools/resource_art.py), at 2x; the cell's
   2px margin hangs outside the box so the frame sits on its edge */
.perk-art { position: relative; flex: 0 0 56px; height: 56px; display: grid; place-items: center; }
.perk-art .spr { margin: -4px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.perk-art .camp-lv { right: -7px; bottom: -7px; }
.drawer { margin-top: 1rem; }
.drawer summary { width: fit-content; cursor: pointer; list-style: none; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-color); }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::before { content: "▸ "; }
.drawer[open] summary::before { content: "▾ "; }
.drawer[open] summary { margin-bottom: 0.5rem; }

/* the world map: the zones as pins on the painted map (src/ui/worldmap.js) */
.map-modal { max-width: 860px; padding: 1.2rem 1.2rem 1.4rem; }
.map-modal .modal-header { margin-bottom: 0.8rem; padding-bottom: 0.6rem; }
.map-board { position: relative; aspect-ratio: 1920 / 1072; border-radius: 12px; overflow: hidden; border: 1px solid rgba(214, 170, 92, 0.5); background: url(assets/paint/map.webp) center / cover no-repeat, #2a2016; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 10px 26px rgba(0, 0, 0, 0.5); }
/* the road through the zones, inked on the parchment: dashes as far as this run has come, dots beyond */
.map-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.map-route path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.route-done { stroke: rgba(150, 38, 22, 0.85); stroke-width: 3.5; stroke-dasharray: 9 6; }   /* red ink, like a treasure map's */
.route-ahead { stroke: rgba(70, 45, 22, 0.8); stroke-width: 3.5; stroke-dasharray: 1 7; }
.map-pin { position: absolute; transform: translate(-50%, -50%); padding: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; color: inherit; background: none; border: 0; box-shadow: none; overflow: visible; }
.map-pin:hover { transform: translate(-50%, -50%); background: none; box-shadow: none; }
.map-pin:active { transform: translate(-50%, -50%) scale(0.95); box-shadow: none; }
.zone-emblem { position: relative; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; background: radial-gradient(circle at 35% 30%, #3a2e22, #140f0a 72%); border: 2px solid rgba(214, 170, 92, 0.75); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.6); transition: transform 0.15s, border-color 0.15s; }
.map-pin:hover .zone-emblem { transform: scale(1.12); border-color: #fde68a; }
.map-pin.locked .zone-emblem, .zone-emblem.locked { border-color: rgba(120, 100, 70, 0.8); background: radial-gradient(circle at 35% 30%, #2a241d, #0f0c09 72%); }
.map-pin.here .zone-emblem { border-color: #fde68a; animation: nodePulse 1.6s ease-in-out infinite; }
.map-pin.picked .zone-emblem { box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6), 0 0 0 3px #fde68a, 0 0 18px rgba(252, 211, 77, 0.7); }
.map-pin.done .zone-emblem::after { content: "✓"; position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 0.6rem; font-weight: 800; color: #052e16; background: #4ade80; box-shadow: 0 0 0 2px #140f0a; }
.map-pin-name { padding: 1px 7px; border-radius: 999px; white-space: nowrap; font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; color: #fbe7b5; background: rgba(13, 10, 7, 0.78); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.map-pin.locked .map-pin-name { color: #b5a68f; }
/* a dungeon on the map: an arched stone gate with firelight inside (zones are round) */
.dungeon-gate { position: relative; width: 40px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; font-size: 1.2rem; border-radius: 20px 20px 5px 5px; background: radial-gradient(ellipse 70% 45% at 50% 100%, rgba(234, 108, 40, 0.6), transparent), linear-gradient(#2a1f16, #0e0a07); border: 2px solid #b9a78c; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.55), inset 0 0 12px rgba(0, 0, 0, 0.7), 0 0 0 3px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.6); transition: transform 0.15s, border-color 0.15s; }
.dungeon-gate .spr { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.75)); }
.dungeon-gate .spr.silhouette { opacity: 1; filter: brightness(0) drop-shadow(0 0 1px rgba(240, 198, 116, 0.95)) drop-shadow(0 0 3px rgba(240, 198, 116, 0.35)); }
.map-pin:hover .dungeon-gate { transform: scale(1.12); border-color: #fde68a; }
.map-pin.locked .dungeon-gate, .dungeon-gate.locked { border-color: rgba(120, 100, 70, 0.8); background: linear-gradient(#221b15, #0c0907); }
.map-pin.gate.here .dungeon-gate { border-color: #fde68a; animation: nodePulse 1.6s ease-in-out infinite; }
.map-pin.gate.picked .dungeon-gate { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.55), inset 0 0 12px rgba(0, 0, 0, 0.7), 0 0 0 3px #fde68a, 0 0 18px rgba(252, 211, 77, 0.7); }
.map-pin.gate .map-pin-name { color: #fcd9b0; background: rgba(40, 14, 8, 0.82); }
.zone-card .dungeon-gate { width: 50px; height: 56px; border-width: 2px; border-radius: 25px 25px 6px 6px; }
/* the hero on the map, standing beside the pin of where he is */
.map-hero { position: absolute; z-index: 2; pointer-events: none; transform: translate(calc(-100% - 15px), -80%); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.75)); }
.map-hero::before { content: ""; position: absolute; left: 50%; bottom: -2px; width: 30px; height: 10px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(253, 230, 138, 0.75), rgba(253, 230, 138, 0)); }
.map-hero .hero-doll { animation: mapHeroBob 1.8s ease-in-out infinite; }
@keyframes mapHeroBob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
body.reduced-motion .map-hero .hero-doll { animation: none; }
@media (prefers-reduced-motion: reduce) { .map-hero .hero-doll { animation: none; } }
.map-info .frag-row { gap: 0.4rem; max-width: 16rem; }
.map-info { margin-top: 0.8rem; }
.zone-card { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 0.9rem; padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--well); border: 1px solid var(--line); }
.zone-card-text { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.zone-card-name { font-family: var(--font-display); font-size: 1.05rem; color: var(--heading); }
.map-stars { margin-left: 0.55rem; padding: 0.05rem 0.5rem; border-radius: 999px; vertical-align: 0.1em; font-family: var(--font-body, inherit); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; color: #fcd34d; background: rgba(252, 211, 77, 0.1); border: 1px solid rgba(252, 211, 77, 0.35); }
.zone-card .prestige-btn { padding: 0.6rem 1.4rem; }
.map-modal .modal-footer { margin-top: 0.9rem; }
.map-modal .modal-btn { padding: 0.6rem; font-size: 0.95rem; }
@media (max-width: 600px) {
    .map-modal { padding: 0.8rem 0.7rem 1rem; }
    .zone-emblem { width: 34px; height: 34px; border-width: 1px; }
    .dungeon-gate { width: 30px; height: 35px; border-width: 1px; border-radius: 15px 15px 4px 4px; }
    .map-pin .zone-emblem .spr, .map-pin .dungeon-gate .spr { --k: 0.75 !important; image-rendering: auto; }
    .map-hero { transform: translate(calc(-100% - 11px), -75%); }
    .map-hero .hero-doll { --k: 0.75 !important; }
    .map-hero .hero-doll .spr { image-rendering: auto; }
    .map-pin-name { display: none; }
    .zone-card .zone-emblem { width: 46px; height: 46px; }
}

/* the gear codex: a row per kind of gear, a cell per tier (a silhouette until found) */
.codex-grid { display: flex; flex-direction: column; gap: 0.35rem; overflow-x: auto; }
.codex-row { display: grid; grid-template-columns: 5.2rem repeat(7, 40px); align-items: center; gap: 0.35rem; }
.codex-type { font-size: 0.8rem; font-weight: 700; color: var(--text-main); }
.codex-cell { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(214, 170, 92, 0.18); }
.codex-cell.found { background: radial-gradient(circle at 50% 40%, #3a2c1c, #140e07 75%); border-color: rgba(214, 170, 92, 0.5); }
.codex-cell .spr { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7)); }
.codex-cell .spr.silhouette { opacity: 0.55; filter: brightness(0) drop-shadow(0 0 1px rgba(214, 170, 92, 0.6)); }
@media (max-width: 600px) { .codex-row { grid-template-columns: 3.6rem repeat(7, minmax(0, 1fr)); gap: 0.2rem; } .codex-type { font-size: 0.7rem; } .codex-cell { width: 100%; height: auto; aspect-ratio: 1; } .codex-cell .spr { --k: 0.75 !important; image-rendering: auto; } }

/* the chronicle: the hero's firsts, newest first, as a timeline */
.chronicle { list-style: none; margin: 0; padding: 0 0 0 0.2rem; max-height: 440px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(214, 170, 92, 0.35) transparent; }
.chronicle li { position: relative; display: grid; grid-template-columns: 4.6rem 40px 1fr; align-items: center; gap: 0.6rem; padding: 0.3rem 0; }
.chronicle li + li::before { content: ""; position: absolute; left: calc(4.6rem + 0.6rem + 19px); top: -12px; height: 18px; width: 2px; background: rgba(214, 170, 92, 0.3); }
.chronicle time { font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--text-muted); text-align: right; }
.ch-art { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a2c1c, #120d08 75%); border: 1px solid rgba(214, 170, 92, 0.45); }
.ch-art .spr { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7)); }
.ch-text { font-size: 0.92rem; color: var(--text-main); }
.chronicle li:first-child .ch-text { color: var(--heading); font-weight: 700; }
@media (max-width: 600px) {
    .chronicle li { grid-template-columns: 3.3rem 36px 1fr; gap: 0.5rem; }
    .chronicle li + li::before { left: calc(3.3rem + 0.5rem + 17px); }
    .ch-art { width: 36px; height: 36px; }
    .ch-text { font-size: 0.86rem; }
}

/* a tap's bubble on a touch screen: what a picture's title says */
.tap-tip { position: fixed; z-index: 400; max-width: min(260px, calc(100vw - 16px)); padding: 0.4rem 0.65rem; border-radius: 9px; font-size: 0.8rem; line-height: 1.3; color: var(--text-main); background: rgba(14, 10, 7, 0.96); border: 1px solid rgba(214, 170, 92, 0.55); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); pointer-events: none; animation: fadeIn 0.15s ease-out; }
.tap-tip .tip-title { display: block; margin-bottom: 0.1rem; font-family: var(--font-display); font-size: 0.86rem; font-weight: 700; color: var(--heading); }

/* the clan before signing in: what it is, in three pictures */
.clan-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
.clan-tile { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.9rem 0.5rem 0.8rem; text-align: center; border-radius: 12px; background: rgba(12, 9, 6, 0.72); border: 1px solid var(--line); }
.clan-tile b { font-family: var(--font-display); color: var(--heading); font-size: 0.95rem; line-height: 1.2; }
.clan-tile-art { display: flex; align-items: flex-end; justify-content: center; min-height: 100px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7)); }
@media (max-width: 600px) { .clan-tiles { gap: 0.4rem; } .clan-tile { padding: 0.7rem 0.3rem; } .clan-tile b { font-size: 0.8rem; } .clan-tile-art { min-height: 68px; } .clan-tile-art .spr, .clan-tile-art .hero-doll { --k: 2 !important; } .clan-tile-art .res-spr { --k: 1.25 !important; } }

/* shop goods as a grid of item cards; a dungeon's unique as a bar of fragments */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0.6rem; }
.frag-row { display: flex; align-items: center; gap: 0.5rem; }
.frag-bar { flex: 1; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(0, 0, 0, 0.55); }
.frag-count { white-space: nowrap; }
.node-heal { display: inline-flex; align-items: center; gap: 0.25rem; color: #fca5a5; font-weight: 600; }   /* a dish's card: what it heals */
.node-heal i { font-style: normal; font-weight: 400; color: var(--text-muted); }
.dungeon-clears { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; }   /* a dungeon card's clears, with the chest they open */
.dungeon-clears b { font-family: var(--font-display); font-size: 1.1rem; color: var(--heading); }
.frag-bar i { display: block; width: var(--p, 0%); height: 100%; background: linear-gradient(90deg, #c2410c, #f97316); }

/* ===== The guide's hand (src/ui/guide.js): a glove on the one thing to do in a new hero's first minutes ===== */
.guide-hand { position: fixed; left: 0; top: 0; z-index: 90; width: 96px; height: 96px; pointer-events: none; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.7)); will-change: transform; }
.guide-hand[hidden] { display: none; }
.guide-hand.over-dialog { z-index: 101; }   /* pointing inside the prestige or perks dialog (src/ui/guide.js) */
.guide-glove { position: absolute; inset: 0; }
.guide-hand.down .guide-glove { transform: scaleY(-1); }   /* above its target, finger down */
.guide-hand .spr { position: relative; animation: guidePress 1.2s ease-in-out infinite; }
.guide-ring { position: absolute; left: var(--tip-x, 42px); top: 18px; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 3px solid rgba(255, 228, 150, 0.95); box-shadow: 0 0 14px rgba(255, 206, 102, 0.85), inset 0 0 8px rgba(255, 206, 102, 0.5); opacity: 0; animation: guideRing 1.2s ease-out infinite; }
.guide-hand.down .guide-ring { top: 78px; }
@keyframes guidePress { 0%, 100% { transform: translate(10px, 14px); } 38% { transform: translate(0, 0) scale(0.93); } 52% { transform: translate(0, 0); } }
@keyframes guideRing { 0%, 36% { opacity: 0; transform: scale(0.25); } 40% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.35); } }
body.reduced-motion .guide-hand .spr, body.reduced-motion .guide-ring { animation: none; }
body.reduced-motion .guide-ring { opacity: 0.85; transform: scale(0.8); }
@media (prefers-reduced-motion: reduce) {
    .guide-hand .spr, .guide-ring { animation: none; }
    .guide-ring { opacity: 0.85; transform: scale(0.8); }
}

/* ===== The fight on the whole screen (body.battle-full, set by main.js while battleMode) =====
   Entering combat hides the sidebar and the phone hotbar. The header becomes a thin bar with the way
   back to the menu, the battle scene takes all the room that is left, and the tab below it is a dock
   with everything a run needs: orders, food and potion, the camp, prestige, perks, the best gear in
   the bag. The fighters are drawn bigger by src/ui/scene.js (fighterScale). */
body.battle-full { height: 100dvh; padding: 0; overflow: hidden; }
body.battle-full #app.layout-sidebar { max-width: none; height: 100dvh; gap: 0; }
body.battle-full #sidebar, body.battle-full #hotbar { display: none; }
body.battle-full #main-content { height: 100dvh; gap: 0; overflow: hidden; }
body.battle-full #header { flex: 0 0 auto; padding: 0.45rem 0.8rem; border-radius: 0; border-width: 0 0 1px; box-shadow: none; }
body.battle-full #header::before, body.battle-full #scene::after { display: none; }
body.battle-full #scene { flex: 1 1 0; min-height: clamp(250px, 46dvh, 440px); display: flex; } /* the scene keeps its share; the dock scrolls if it must */
body.battle-full .battle { flex: 1; min-height: 0; border: 0; border-radius: 0; box-shadow: none; container-type: size; }
body.battle-full .battle-top { padding: 0.9rem 1.2rem 2rem; }
body.battle-full .battle-zone { font-size: 1.5rem; }
body.battle-full .battle-field { width: min(100%, 1100px); padding-bottom: 1.1rem; }
body.battle-full .fighter-stand { height: clamp(56px, calc(100cqh - 266px), 250px); } /* what the scene has left under its banner and around the bars, the names and the boss's clock */
body.battle-full .fighter-stand::after { width: 170px; height: 22px; }
body.battle-full .fighter-bars { width: min(100%, 260px); }
body.battle-full .fbar { height: 13px; }
body.battle-full .fbar-text { font-size: 0.82rem; }
body.battle-full .fighter-name { font-size: 1rem; }
body.battle-full .fighter-meta { font-size: 0.8rem; }
body.battle-full .attack-bar { width: min(100%, 200px); height: 5px; }
body.battle-full .boss-clock { width: min(100%, 240px); height: 15px; }
body.battle-full .battle-combo b { font-size: 2.6rem; }
body.battle-full #tab { flex: 0 1 auto; min-height: 0; max-height: 44dvh; overflow-y: auto; gap: 0.5rem; padding: 0.55rem 0.8rem 0.7rem; background: var(--panel-2); border-top: 1px solid var(--line-strong); scrollbar-width: thin; }
body.battle-full .log-drawer { padding: 0.45rem 0.8rem; border-radius: 10px; box-shadow: none; }
body.battle-full .log-drawer::before { display: none; }
body.battle-full #toast-area { top: 3.6rem; bottom: auto; } /* under the top bar, clear of the dock's buttons */
/* a short scene (a laptop's window): a slimmer banner, on one line where it fits, so the fighters keep their room */
@container (max-height: 520px) {
    body.battle-full .battle-top { padding-top: 0.45rem; padding-bottom: 0.7rem; }
    body.battle-full .battle-field { padding-bottom: 0.6rem; }
    body.battle-full .fighter-stand { height: clamp(56px, calc(100cqh - 232px), 250px); }
}
@container (max-height: 520px) and (min-width: 800px) {
    body.battle-full .battle-top { flex-direction: row; justify-content: center; column-gap: 1.6rem; }
    body.battle-full .fighter-stand { height: clamp(56px, calc(100cqh - 190px), 250px); }
}

.menu-btn { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.75rem; font-size: 0.82rem; }
.menu-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-color); box-shadow: 0 0 8px rgba(252, 211, 77, 0.9); }
.ico { flex: 0 0 auto; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.screen-btn { display: inline-grid; place-items: center; padding: 0.42rem 0.5rem; }

/* the dock: one row of groups on a wide screen, a column on a phone */
.battle-dock { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; }
.dock-group {
    flex: 1 1 230px; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.5rem; padding: 0.6rem 0.75rem;
    border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 236, 200, 0.03), rgba(0, 0, 0, 0.22));
}
.dock-title { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-color); }
.dock-orders { flex: 0 0 auto; min-width: 160px; }
.dock-orders .combat-side { min-width: 0; padding-left: 0; border-left: 0; }
.dock-main { flex: 2 1 300px; gap: 0.6rem; }
.dock-main .combat-controls { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0.45rem; }
.dock-main .loadout { flex: 0 0 auto; gap: 0.25rem; }
.dock-main .pick-row { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 5px; scrollbar-width: thin; scrollbar-color: rgba(214, 170, 92, 0.35) transparent; } /* one row, however much food there is */
.dock-main .pick { flex: 0 0 auto; }
.dock-camp { flex: 2 1 340px; }
.camp-tokens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
.camp-token { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; min-width: 0; }
.camp-buy { display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0.4rem 0.5rem; text-align: left; border-radius: 10px; }
.camp-token.can .camp-buy { border-color: rgba(252, 211, 77, 0.65); box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.08), 0 0 14px rgba(252, 211, 77, 0.18); }
.camp-token-text { min-width: 0; display: flex; flex-direction: column; font-size: 0.78rem; line-height: 1.3; }
.camp-price { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold-color); }
.camp-max { align-self: center; padding: 0.2rem 0.7rem; }
.dock-loop { flex: 1 1 210px; }
/* a dungeon run: its clears, the unique's fragments and the repeat switch */
.dock-group.dock-run { flex: 1 1 230px; gap: 0.45rem; }   /* in the dock's row; in the tab's column a basis would be a height */
.run-orders .combat-side { flex-direction: row; flex-wrap: wrap; gap: 0.4rem; min-width: 0; padding: 0; border: 0; }
.run-orders .combat-side > * { flex: 1 1 auto; }
.run-loop { margin-left: auto; padding: 0 0.55rem; border-radius: 999px; font-size: 1.15rem; font-weight: 800; line-height: 1.5; color: #fde68a; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(252, 211, 77, 0.45); }
/* after a clear: keep going, or end the dungeon, and the time left before it keeps going on its own */
.dock-run.choosing { border-color: rgba(252, 211, 77, 0.7); box-shadow: 0 0 18px rgba(252, 211, 77, 0.25); }
.run-choice-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.run-choice-btns button { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.6rem 0.7rem; text-align: center; }
.run-choice-btns b { font-size: 0.95rem; }
.run-choice-btns span { font-size: 0.72rem; font-weight: 600; opacity: 0.85; }
.run-countdown { position: relative; display: flex; flex-direction: column; gap: 0.25rem; }
.run-countdown i { display: block; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #fcd34d var(--p), rgba(0, 0, 0, 0.45) var(--p)); }
.run-countdown span { font-size: 0.75rem; color: var(--text-muted); text-align: center; }
.run-choice .modal-header { margin-bottom: 0.2rem; }
.run-choice-head { text-align: center; }
.run-kicker { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #fcd34d; }
.run-choice-facts { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.4rem 0 0.9rem; }
.run-choice .run-choice-btns { margin-bottom: 0.7rem; }
/* the chest in the monster's place after a clear */
.foe.chest .fighter-bars, .foe.chest .attack-bar, .foe.chest .fighter-meta { visibility: hidden; }
.foe.chest .foe-icon { filter: drop-shadow(0 0 14px rgba(252, 211, 77, 0.65)) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.6)); }
.foe.chest .fighter-name { color: #fde68a; }
.glass-panel.dock-run { display: flex; flex-direction: column; gap: 0.5rem; }
.run-clears { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.run-clears b { font-family: var(--font-display); font-size: 1.35rem; color: var(--heading); }
.run-clears .spr { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7)); }
.run-assemble { padding: 0.5rem 0.8rem; font-size: 0.85rem; }
.run-repeat { font-size: 0.85rem; }
.dock-prestige, .dock-perks { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0.85rem; text-align: left; }
.dock-prestige span, .dock-perks span { font-size: 0.78rem; font-weight: 400; opacity: 0.92; text-align: right; }
.dock-perks.ready, .dock-prestige.ready { border-color: #d8b4fe; box-shadow: 0 0 14px rgba(167, 139, 250, 0.4); }
/* Prestige, and beside it once earned the Auto switch with when it will go */
.dock-prestige-row { display: flex; gap: 0.4rem; min-width: 0; }
.dock-prestige-row .dock-prestige { flex: 1 1 auto; min-width: 0; }
.dock-auto { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem; min-width: 60px; padding: 0.3rem 0.5rem; border-radius: 10px; font-size: 0.7rem; line-height: 1.15; }
.dock-auto b { font-family: var(--font-display); font-size: 0.8rem; }
.dock-auto span { opacity: 0.85; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dock-auto .spr { margin: -2px 0; }
.dock-auto.on { color: #ede9fe; border-color: #c4b5fd; background: linear-gradient(180deg, #3b2a5c, #22183a); box-shadow: 0 0 12px rgba(167, 139, 250, 0.4); }
.dock-equip { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.7rem; text-align: left; color: #bbf7d0; border-color: rgba(74, 222, 128, 0.7);
    box-shadow: 0 0 14px rgba(74, 222, 128, 0.32), inset 0 0 14px rgba(74, 222, 128, 0.12); }   /* it glows while it waits (a steady glow: the dock is redrawn every second) */
.dock-equip .dock-gain { display: block; font-style: normal; font-size: 0.7rem; font-weight: 800; color: #4ade80; }
.dock-equip .dock-stages { color: #fde68a; white-space: nowrap; }   /* about how far it takes him (systems/inventory.js gainStages) */
.dock-equip > span { min-width: 0; display: flex; flex-direction: column; font-size: 0.8rem; line-height: 1.25; }
.dock-equip > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-main); font-weight: 400; }
.perks-modal { max-width: 780px; }
.perks-modal .shop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0.5rem; }
.perks-modal .shop-item { padding: 0.6rem 0.7rem; }
.perks-modal .modal-footer { position: sticky; bottom: -2rem; margin: 1rem -2rem -2rem; padding: 0.8rem 2rem 1.2rem; background: linear-gradient(180deg, rgba(17, 12, 8, 0), #110c08 35%); }
.perks-modal .modal-header { margin-bottom: 0.7rem; padding-bottom: 0.6rem; }
.perks-modal .about-blurb { margin-bottom: 0.9rem; }

@media (max-width: 900px) {
    body.battle-full #header { top: auto; }
}
@media (max-width: 600px) {
    body.battle-full #header { padding: 0.35rem 0.6rem; }
    body.battle-full .battle-top { padding: 0.5rem 0.7rem 0.8rem; }
    body.battle-full .battle-zone { font-size: 1.05rem; }
    body.battle-full .battle-field { padding-bottom: 0.7rem; }
    body.battle-full .fighter-stand { height: clamp(56px, calc(100cqh - 208px), 170px); }
    body.battle-full .fighter-stand::after { width: 110px; height: 16px; }
    body.battle-full .fighter-name { font-size: 0.8rem; }
    body.battle-full .fighter-meta { font-size: 0.66rem; }
    body.battle-full .fbar-text { font-size: 0.72rem; }
    body.battle-full .battle-combo b { font-size: 1.7rem; }
    body.battle-full #tab { max-height: 46dvh; padding: 0.5rem 0.6rem 0.6rem; }
    body.battle-full .zone-facts { display: none; } /* the map's zone card has the drops */
    body.battle-full .dock-main:not(:has(.combat-controls)) { display: none; } /* a new player's first fights: no food or potions yet, so nothing to show */
    .menu-word { display: none; }
    .perks-modal .modal-footer { bottom: -1.2rem; margin: 0.8rem -1.2rem -1.2rem; padding: 0.7rem 1.2rem 1rem; }
    .dock-group { flex-basis: 100%; padding: 0.5rem 0.6rem; }
    /* on a phone the dock is a column: what a run uses most comes first */
    .dock-loop { order: 1; display: grid; grid-template-columns: 1fr 1fr; }
    .dock-loop > :only-child, .dock-loop > .dock-equip, .dock-loop > .dock-prestige-row:not(:has(+ .dock-perks)), .dock-loop > .dock-prestige-row:has(.dock-auto) { grid-column: 1 / -1; }
    .dock-prestige, .dock-perks { flex-direction: column; align-items: flex-start; gap: 0; padding: 0.45rem 0.7rem; }
    .dock-prestige span, .dock-perks span { text-align: left; }
    .dock-camp { order: 2; }
    .dock-run { order: 0; }   /* in a dungeon, the run comes first */
    .dock-main { order: 3; }
    .dock-orders { order: 4; }
    /* and the top bar keeps to one line: icons only */
    body.battle-full .cloud-word, body.battle-full .event-pill, body.battle-full .focus-pill, body.battle-full .bonfire-pill { display: none; }
    body.battle-full .pills:empty { display: none; }
    body.battle-full #header .daily-btn { display: inline-flex; } /* the hotbar is out of sight here, so the crate keeps its button */
    body.battle-full .daily-word { display: none; }
    body.battle-full #toast-area { top: 3.2rem; }
    body.battle-full:has(#celebrate .celebration:not(.leaving)) #toast-area { z-index: 470; }   /* a card at the top goes over the toasts (they covered a new land's card) */
    .camp-buy { flex-direction: column; gap: 0.25rem; padding: 0.45rem 0.25rem; text-align: center; }
    .camp-token-text { align-items: center; }
}
/* a short window (a phone on its side, or held upright under its browser's bars): a compact title and
   smaller fighters that still stand in the scene, the boss's clock with them (after the phone rules, so
   a small upright phone gets these too) */
@media (max-height: 560px) {
    body.battle-full .battle-top { padding: 0.3rem 0.8rem 0.35rem; gap: 0.2rem 0.8rem; }
    body.battle-full .battle-zone { font-size: 1.05rem; }
    body.battle-full .battle-field { padding-bottom: 0.35rem; gap: 0.5rem; }
    body.battle-full .fighter { gap: 0.1rem; }
    body.battle-full .fighter-stand { height: clamp(48px, calc(100cqh - 188px), 140px); }
    body.battle-full .fighter-stand::after { width: 100px; height: 14px; }
    body.battle-full .fbar { height: 10px; }
    body.battle-full .fighter-name { font-size: 0.78rem; }
}

/* phones: the orders go under the food, potion and drops, in one row */
@media (max-width: 600px) {
    .combat-panel { grid-template-columns: minmax(0, 1fr); }
    .combat-side { flex-direction: row; flex-wrap: wrap; align-items: center; min-width: 0; padding: 0.8rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
    .dock-orders .combat-side { padding-top: 0; border-top: 0; }
}

/* The Trials (src/systems/trials.js): in the prestige dialog, each a card on its place's painting that is
   ticked to prestige into it; in the fight, a badge beside the stage. */
.trial-grid { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 0.5rem; }
/* the dialog's buttons stay in view while the Trials scroll under them */
.prestige-modal:has(.pg-trials) .modal-footer { position: sticky; bottom: -1.5rem; z-index: 3; margin-bottom: -1.5rem; padding: 1.1rem 0 1.5rem; background: linear-gradient(180deg, rgba(17, 12, 8, 0), #110c08 1.1rem); }
.trial-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon name" "rule rule" "foot foot"; align-items: center; gap: 0.25rem 0.45rem;
    min-height: 104px; padding: 0.55rem 0.6rem; border-radius: 10px; cursor: pointer;
    background: linear-gradient(180deg, rgba(14, 10, 7, 0.3), rgba(14, 10, 7, 0.86) 62%), var(--art) var(--art-at, center 60%) / cover no-repeat, var(--panel-2);
    border: 1px solid rgba(214, 170, 92, 0.25); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.trial-card input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }
.trial-card:hover { border-color: rgba(252, 211, 77, 0.6); }
.trial-card:has(input:focus-visible) { outline: 2px solid #fcd34d; outline-offset: 2px; }
.trial-card:has(input:checked) { border-color: #fcd34d; box-shadow: 0 0 0 1px #fcd34d, 0 0 18px rgba(252, 211, 77, 0.4); transform: translateY(-2px); }
.trial-card.done { cursor: default; filter: saturate(0.55); }
.trial-icon { grid-area: icon; display: grid; place-items: center; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8)); }
.trial-name { grid-area: name; font-family: var(--font-display); font-size: 0.9rem; line-height: 1.15; color: var(--heading); text-shadow: 0 1px 4px #000; }
.trial-rule { grid-area: rule; align-self: start; font-size: 0.72rem; line-height: 1.25; color: var(--text-main); text-shadow: 0 1px 3px #000; }
.trial-foot { grid-area: foot; align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.trial-foot small { font-size: 0.7rem; font-weight: 700; color: #fde68a; text-shadow: 0 1px 3px #000; }
.trial-card.done .trial-foot small { color: var(--text-muted); }
.trial-pips { display: inline-flex; gap: 3px; }
.trial-pips i { width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(214, 170, 92, 0.5); }
.trial-pips i.on { background: radial-gradient(circle at 35% 30%, #fde68a, #c08a2a); border-color: #fde68a; }
.trial-pick-line { flex: 1 1 100%; margin: 0; min-height: 1em; font-size: 0.78rem; color: #fde68a; }
.trial-pick-line:empty { display: none; }
.battle-trial { display: inline-flex; align-items: center; gap: 0.3rem; color: #fca5a5; font-weight: 700; }
.battle-trial .spr { filter: drop-shadow(0 1px 2px #000); }
@media (prefers-reduced-motion: reduce) { .trial-card { transition: none; } .trial-card:has(input:checked) { transform: none; } }
body.reduced-motion .trial-card { transition: none; }
body.reduced-motion .trial-card:has(input:checked) { transform: none; }
.camp-packed { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.4rem 0.2rem; font-size: 0.82rem; color: var(--text-muted); text-shadow: 0 1px 3px #000; }
.camp-packed .spr { filter: grayscale(0.7) brightness(0.7); }
/* a skill's whole mastery (data/mastery.js): the pill fills with its share, a mark at the next checkpoint */
.mastery-total[style*="--share"] { position: relative; overflow: hidden; isolation: isolate; }
.mastery-total[style*="--share"]::before { content: ""; position: absolute; inset: 0; z-index: -1; width: var(--share); background: linear-gradient(90deg, rgba(124, 92, 196, 0.25), rgba(183, 148, 246, 0.45)); }
.mastery-total[style*="--next"]::after { content: ""; position: absolute; bottom: 0; height: 6px; left: var(--next); width: 2px; border-radius: 1px 1px 0 0; background: #fcd34d; box-shadow: 0 0 4px rgba(252, 211, 77, 0.8); }

/* Ascension (src/systems/ascension.js): Stars as a pale gold coin, the Ascend row in the prestige dialog */
.coin-dot.stars { --coin: #fff3c4; --coin-dark: #b7791f; box-shadow: 0 0 14px rgba(253, 230, 138, 0.75), inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.coin-dot.big { width: 64px; height: 64px; }
.chip.stars { --coin: #fff3c4; --coin-dark: #b7791f; }
.chip.stars b { color: #fde68a; }
.pg-ascend { border-style: solid; border-color: rgba(253, 230, 138, 0.35); background: radial-gradient(120% 140% at 50% 0%, rgba(214, 170, 92, 0.16), rgba(0, 0, 0, 0.3)); }
.pg-get.stars b { color: #fff3c4; text-shadow: 0 0 12px rgba(253, 230, 138, 0.6); }
.btn-ascend { flex: 0 0 auto; padding: 0.7rem 1.2rem; font-size: 0.95rem; color: #1f1406; border-color: #fff1c9; background: linear-gradient(180deg, #fde68a, #b7791f); }
.btn-ascend:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 700px) { .pg-ascend .btn-ascend { flex: 1 1 100%; } }

/* Completion (src/systems/completion.js): a figure on the Hall's banner, the parts as bars under Records */
.completion-pill { font: inherit; cursor: pointer; color: inherit; background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; }
.completion-pill:hover b { text-decoration: underline; text-underline-offset: 3px; }
.completion-pill b { color: #fde68a; }
.completion-panel .panel-header { align-items: baseline; }
.done-whole { font-family: var(--font-display); font-size: 1.6rem; color: #fde68a; text-shadow: 0 0 14px rgba(253, 230, 138, 0.45); }
.done-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.35rem 1.2rem; }
.done-row { display: grid; grid-template-columns: 34px minmax(0, 7.5rem) 1fr auto; align-items: center; gap: 0.5rem; padding: 0.2rem 0; }
.done-art { display: grid; place-items: center; }
.done-name { font-size: 0.82rem; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.done-bar { height: 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(214, 170, 92, 0.25); overflow: hidden; }
.done-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b7791f, #fde68a); }
.done-count { font-size: 0.74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* The Abyss's strata (src/data/strata.js): each its own light over the Abyss's painting, until each has one. Past
   Pandemonium the strata come round again, each round's painting cast in new hues (--land-hue, scene.js landHue). */
.battle[data-scene] .battle-sky, .battle[data-scene] .battle-far, .battle[data-scene] .battle-near { filter: hue-rotate(var(--land-hue, 0deg)) brightness(1); transition: filter 1.2s ease; }
.battle.boss-fight[data-scene] .battle-sky, .battle.boss-fight[data-scene] .battle-far, .battle.boss-fight[data-scene] .battle-near { filter: hue-rotate(var(--land-hue, 0deg)) brightness(0.78) saturate(1.15) contrast(1.06); }
.battle.idle[data-scene] .battle-sky, .battle.idle[data-scene] .battle-far, .battle.idle[data-scene] .battle-near { filter: hue-rotate(var(--land-hue, 0deg)) saturate(0.55) brightness(0.78); }
.battle.slowmo[data-scene] .battle-sky, .battle.slowmo[data-scene] .battle-far, .battle.slowmo[data-scene] .battle-near { filter: hue-rotate(var(--land-hue, 0deg)) brightness(0.6) saturate(0.7); }
/* a Lord's stage on the path (data/zones.js LORDS): its crown, gold until its due is paid */
.stage-path li.lord b, .stage-path li.lord button { box-shadow: 0 0 0 2px rgba(252, 211, 77, 0.75), 0 0 12px rgba(252, 211, 77, 0.45); }

/* The week's Trial (src/data/trials.js weeklyTrialAt): a ribbon on its card, its laurel goal in the foot */
.trial-card.weekly { border-color: rgba(134, 239, 172, 0.55); box-shadow: 0 0 0 1px rgba(134, 239, 172, 0.25), 0 0 14px rgba(74, 222, 128, 0.18); }
.trial-week { position: absolute; top: -8px; right: 8px; z-index: 1; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #052e16; background: linear-gradient(180deg, #bbf7d0, #4ade80); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.trial-foot small .laurel, .laurel { width: 15px; height: 15px; vertical-align: -3px; color: #86efac; filter: drop-shadow(0 0 3px rgba(74, 222, 128, 0.6)); }

/* ===== Dialogs on a phone: compact cards with the game in sight around them =====
   (the owner: on a phone browser the popups took the whole screen; its bars leave a 390 px phone about
   660 px). Less padding and smaller type, the painting a strip with the title on it, perks three
   across, the crate's haul two across; a dialog never taller than most of the screen, its buttons
   kept in view when it scrolls. */
@media (max-width: 600px) {
    .modal-overlay { padding: 0.75rem; }
    .modal-content { width: 100%; max-width: 380px; max-height: min(84dvh, calc(100dvh - 1.5rem)); padding: 1rem 0.95rem; border-radius: 14px; }
    .modal-header { margin-bottom: 0.6rem; padding-bottom: 0.45rem; font-size: 1.2rem; }
    .modal-body { gap: 0.6rem; }
    .modal-footer { margin-top: 0.85rem; gap: 0.6rem; }
    .modal-btn { padding: 0.65rem 0.8rem; font-size: 0.95rem; }
    /* the painting a strip, the title on its foot */
    .about-card { padding: 0 0 0.95rem; }
    .about-card > :not(.about-art) { margin-left: 0.95rem; margin-right: 0.95rem; }
    .about-art { height: 88px; margin-bottom: 0; }
    .about-card .about-art + .modal-header { position: relative; margin-top: -1.9rem; }
    .about-card:not(:has(.about-art)) .modal-header { margin-top: 1rem; }
    .about-blurb { margin-bottom: 0.5rem; font-size: 0.9rem; }
    .about-points { gap: 0.4rem; font-size: 0.82rem; line-height: 1.4; }
    /* Prestige */
    .prestige-modal .modal-body { gap: 0.5rem; }
    .pg-gain { gap: 0.5rem 0.8rem; padding: 0.6rem 0.75rem; }
    .pg-get { column-gap: 0.55rem; }
    .pg-get .coin-dot { width: 28px; height: 28px; }
    .pg-get b { font-size: 1.3rem; }
    .pg-get b span { font-size: 0.85rem; }
    .pg-get small { font-size: 0.7rem; line-height: 1.3; }
    .pg-rank { gap: 0.7rem; padding-top: 0.45rem; }
    .pg-rank b { font-size: 1.1rem; }
    .pg-row { gap: 0.3rem 0.6rem; padding: 0.5rem 0.6rem; }
    /* what starts over beside what stays (the Trials and Ascension rows keep the whole width) */
    .prestige-modal .modal-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .prestige-modal .modal-body > :is(.pg-gain, .pg-ascend, .pg-trials) { grid-column: 1 / -1; }
    .prestige-modal .modal-body > .pg-row { align-content: flex-start; }
    .pg-get.sp small { display: none; }   /* what skill points are for: the Perks it leads to */
    .pg-row h4 { font-size: 0.66rem; }
    .pg-item { font-size: 0.82rem; }
    .pg-keep { gap: 0.25rem; }
    .pg-keep-item { width: 32px; height: 32px; }
    .prestige-modal:has(.pg-trials) .modal-footer { bottom: -0.95rem; margin-bottom: -0.95rem; padding: 0.7rem 0 0.95rem; }
    /* Perks: three across, each its picture, name, what it does and its button */
    .perks-modal .about-blurb { margin-bottom: 0.55rem; font-size: 0.85rem; }
    .purse-rule { display: none; }   /* the rule is in the Shop's "?" card */
    .perks-modal .shop-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
    .perks-modal .shop-item { flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.15rem; padding: 0.35rem 0.3rem; text-align: center; }
    .perks-modal .shop-item:hover { transform: none; }
    .perks-modal .perk-art { flex: 0 0 auto; width: 36px; height: 36px; }
    .perks-modal .perk-art .spr { --k: 1 !important; margin: 0; }
    .perks-modal .shop-item-info { align-items: center; gap: 0.1rem; min-width: 0; }
    .perks-modal .shop-item-name { font-size: 0.8rem; line-height: 1.2; }
    .perks-modal .shop-item-name .muted { font-size: 0.64rem; }
    .perks-modal .shop-item-desc { font-size: 0.66rem; line-height: 1.25; }
    .perks-modal .shop-btn, .perks-modal .perk-max { width: 100%; min-width: 0; margin-top: auto; padding: 0.3rem 0.2rem; font-size: 0.78rem; }
    .perks-modal .modal-footer { bottom: -1rem; margin: 0.7rem -0.95rem -1rem; padding: 0.6rem 0.95rem 0.95rem; }
    /* the daily crate: a smaller chest, the haul two across */
    .crate-stage { height: 84px; }
    .crate-box .spr { --k: 2 !important; }
    .crate-loot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
    .crate-loot li { min-width: 0; gap: 0.4rem; padding: 0.35rem 0.5rem; font-size: 0.8rem; }
    .crate-loot li span { width: auto; }
    .crate-way { margin-top: 0.6rem; }
    /* welcome back */
    .wb-story { margin-bottom: 0.6rem; font-size: 0.82rem; }
    .wb-ready, .wb-skills, .wb-tiles, .wb-used, .wb-finds { margin-bottom: 0.6rem; }
    .wb-skills, .wb-finds { gap: 0.3rem; }
    .wb-skill { padding: 0.35rem 0.6rem 0.6rem; }
    .wb-find { padding: 0.35rem 0.6rem; font-size: 0.82rem; }
    .wb-away { font-size: 0.95rem; }
    .wb-gold { margin-bottom: 0.6rem; padding: 0.25rem 0.85rem; font-size: 0.95rem; }
    .wb-gold b { font-size: 1.05rem; }
    .wb-gold .spr { --k: 1 !important; }
    .wb-ready { gap: 0.3rem; }
    .wb-ready-btn { padding: 0.28rem 0.55rem; font-size: 0.76rem; }
    .wb-tile { width: 44px; height: 44px; }
    .wb-tile .spr { --k: 1 !important; margin-top: -8px; }
    .wb-tile span { font-size: 0.66rem; }
    .welcome-back .modal-footer { position: sticky; bottom: -1rem; z-index: 3; margin: 0.7rem -0.95rem -1rem; padding: 0.6rem 0.95rem 0.95rem; background: linear-gradient(180deg, rgba(17, 12, 8, 0), #110c08 0.6rem); }
    /* the title card */
    .intro { gap: 0.6rem; padding-bottom: 1.1rem; }
    .intro-scene { height: 160px; }
}

/* ===== Cards on a phone: a banner at the top, like a phone's own notices =====
   (the owner: a new medal, a level-up and a new land still covered too much of a phone's screen; at
   390 x 664 a new land took 45% of it, over the fighters' bars.) The picture at the left, the words
   beside it, a land's or a place's painting behind the whole banner, darker under the words. */
@media (max-width: 600px) {
    .celebration {
        top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
        flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 0.75rem;
        width: calc(100vw - 1.5rem); min-width: 0; max-width: 440px;
        padding: 0.55rem 0.85rem; text-align: left; border-radius: 14px;
    }
    .celebration.pictured { width: calc(100vw - 1.5rem); padding: 0.55rem 2.1rem 0.55rem 0.85rem; isolation: isolate; }
    .cel-art { position: absolute; inset: 0; z-index: -1; height: auto; margin: 0;
        background: linear-gradient(90deg, rgba(18, 13, 8, 0.95) 25%, rgba(18, 13, 8, 0.7) 65%, rgba(18, 13, 8, 0.4)), var(--art, none) var(--art-at, center) / cover no-repeat; }
    .cel-rays { left: 2.6rem; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; }   /* behind the picture */
    .cel-icon { flex: 0 0 auto; font-size: 2rem; line-height: 1; }
    .cel-medal, .cel-hero, .cel-loot { width: 60px; height: 60px; border-width: 2px; }
    .loot-flash { box-shadow: inset 0 0 70px 22px rgba(252, 211, 77, 0.8); }   /* a phone's edges are close together: a thinner gold */
    .cel-loot .spr { --k: 1.5 !important; }
    .cel-act { margin-top: 0.3rem; padding: 0.25rem 1.1rem; font-size: 0.8rem; }
    .cel-medal .spr { --k: 1.5 !important; }
    .cel-hero .hero-doll, .celebration.legend .cel-icon > .hero-doll { --k: 2 !important; }
    .cel-text { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-start; }
    .cel-kicker { font-size: 0.6rem; letter-spacing: 0.2em; }
    .cel-title { font-size: 1.1rem; line-height: 1.2; text-wrap: pretty; }
    .cel-lines { justify-content: flex-start; gap: 0.2rem 0.3rem; margin-top: 0.2rem; font-size: 0.7rem; }
    .cel-lines > span { padding: 0.05rem 0.45rem; }
    .cel-note { max-width: none; margin-top: 0.15rem; font-size: 0.7rem; line-height: 1.3; text-wrap: pretty; }
    .cel-go { margin-top: 0.15rem; font-size: 0.66rem; }
    .cel-close { top: 50%; right: 6px; width: 24px; height: 24px; margin-top: -12px; }
    .celebration:has(.cel-tiles) .cel-close { top: 6px; margin-top: 0; }   /* clear of the row of tiles (a tap there closed the card) */
    .cel-tiles { flex: 1 1 100%; width: auto; margin-top: 0.45rem; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 0.35rem; }
    .cel-tile { height: 52px; }
    .cel-tile span { font-size: 0.7rem; }
}