/* Playful "sticker" look: warm dark base, cream outlines, hard offset shadows. */
:root {
  --bg: #f6ecd9; --surface: #fffaf0; --surface-2: #f0e2c6; --text: #2a1d12; --muted: #7a6650;
  --line: #2a1d12; --shadow: #2a1d12; --dot: rgba(42, 29, 18, .12);
  --mustard: #e3a92f; --pink: #e58bb0; --sky: #6cb6dd; --orange: #f2622e; --mint: #7cc9a0;
  --on-color: #2a1d12; --accent: #f2622e; --accent-text: #fffaf0;
  --warn-bg: #ffe7a3; --warn-text: #6b4a00; --danger: #c8341a;
  --radius: 18px; --radius-sm: 12px; --tap: 44px; --bw: 3px;
  --chart-1: #f2622e; --chart-2: #6cb6dd; --chart-3: #e3a92f; --chart-4: #4f9e74; --chart-5: #d26b98; --chart-6: #8a6fcf; --chart-7: #a0522d; --chart-8: #7a6650;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "D2Coding", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c140e; --surface: #261b13; --surface-2: #3a2a14; --text: #f5ead6; --muted: #b9a78c;
    --line: #f2e6cf; --shadow: #000000; --dot: rgba(242, 230, 207, .10);
    --warn-bg: #4a3510; --warn-text: #ffd36a; --danger: #ff7a5c; --accent-text: #1c140e;
    --chart-1: #ff7a45; --chart-2: #7cc6ee; --chart-3: #f0bd4a; --chart-4: #7cc9a0; --chart-5: #ee9cc0; --chart-6: #b39cf0; --chart-7: #d9906a; --chart-8: #b9a78c;
  }
}
:root[data-theme="dark"] {
  --bg: #1c140e; --surface: #261b13; --surface-2: #3a2a14; --text: #f5ead6; --muted: #b9a78c;
  --line: #f2e6cf; --shadow: #000000; --dot: rgba(242, 230, 207, .10);
  --warn-bg: #4a3510; --warn-text: #ffd36a; --danger: #ff7a5c; --accent-text: #1c140e;
  --chart-1: #ff7a45; --chart-2: #7cc6ee; --chart-3: #f0bd4a; --chart-4: #7cc9a0; --chart-5: #ee9cc0; --chart-6: #b39cf0; --chart-7: #d9906a; --chart-8: #b9a78c;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.6 "Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  word-break: keep-all; overflow-wrap: anywhere;
}
a { color: var(--accent); text-underline-offset: 3px; }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }

/* sticker primitive */
.hero, .stat, .release-row, .auth-card, .login-prompt, .comment, .release-table, .btn, .chip, textarea, input {
  border: var(--bw) solid var(--line);
}

/* header */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: var(--bw) solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 1.15rem; letter-spacing: -.02em; color: var(--text); text-decoration: none; }
.brand-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--mustard); border: var(--bw) solid var(--line); box-shadow: 2px 2px 0 var(--shadow); transform: rotate(-6deg); font-size: 1.1rem; }
.brand { min-width: 0; }
.brand-text { display: grid; line-height: 1.1; min-width: 0; }
.brand-name { white-space: nowrap; }
.brand-tagline { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; }
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: var(--bw) solid var(--line); background: var(--sky); color: var(--on-color); box-shadow: 2px 2px 0 var(--shadow);
  font-family: var(--mono); font-size: .82rem; font-weight: 800; text-decoration: none; white-space: nowrap; transform: rotate(2deg);
}
.lang-switch:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--shadow); }
.lang-switch:focus-visible { outline: 3px dashed var(--orange); outline-offset: 3px; }
.theme-toggle { padding: 0; font-size: 1.2rem; }
.header-actions .btn-ghost { padding: 0 10px; }
.user-name { font-weight: 800; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-form { display: inline; margin: 0; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap);
  padding: 0 16px; border-radius: 999px; background: var(--surface); color: var(--text);
  font: inherit; font-weight: 800; text-decoration: none; cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow); transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--shadow); }
.btn-primary { background: var(--orange); color: #fffaf0; }
.btn-ghost { box-shadow: none; border-color: transparent; background: transparent; }
.btn-ghost:active { transform: none; }
.btn-danger { color: var(--danger); }
.btn-small { min-height: 36px; padding: 0 12px; font-size: .88rem; box-shadow: 2px 2px 0 var(--shadow); }
.btn:focus-visible, .chip:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible, .hero:focus-visible { outline: 3px dashed var(--orange); outline-offset: 3px; }

/* hero countdown */
.hero {
  position: relative; display: grid; gap: 10px; margin: 20px 0 16px; padding: 22px 20px 20px;
  border-radius: var(--radius); color: var(--text); text-decoration: none;
  background-color: var(--surface);
  background-image: radial-gradient(var(--dot) 1.6px, transparent 1.6px); background-size: 18px 18px;
  box-shadow: 5px 5px 0 var(--shadow);
}
.hero:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--shadow); }
.hero-kicker { font-family: var(--mono); font-size: .85rem; letter-spacing: .2em; color: var(--muted); }
.hero-stamp {
  justify-self: start; padding: 4px 22px; border-radius: 16px; background: var(--mustard); color: var(--on-color);
  font-size: clamp(2.6rem, 13vw, 4rem); font-weight: 900; line-height: 1.15; letter-spacing: -.03em;
  transform: rotate(-2deg); box-shadow: 4px 4px 0 var(--shadow);
}
.hero-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-right: 76px; }
.hero-title { font-weight: 900; font-size: 1.15rem; text-decoration: underline dotted var(--orange) 3px; text-underline-offset: 5px; }
.hero-date { font-family: var(--mono); font-size: .9rem; color: var(--muted); }
.hero-pill {
  position: absolute; right: 16px; bottom: 16px; padding: 4px 12px; border-radius: 12px; border: var(--bw) solid var(--line);
  background: var(--orange); color: #fffaf0; font-family: var(--mono); font-weight: 800; box-shadow: 3px 3px 0 var(--shadow);
}

/* featured big releases (hype-ranked) */
.featured { margin: 4px 0 18px; }
.featured-title { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 900; margin: 0 0 10px; }
.featured-title::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--mustard); border: var(--bw) solid var(--line); }
.featured-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.featured-head .featured-title { margin: 0; }
.swipe-nav { display: flex; gap: 8px; }
.swipe-nav .cal-nav { width: 38px; height: 38px; font-size: 1.3rem; cursor: pointer; padding: 0; font-family: inherit; }
.swipe-nav .cal-nav:disabled { opacity: .35; cursor: default; transform: none; }
/* swipe carousel: native scroll with snap, no visible scrollbar; arrows/drag/dots from app.js */
.featured-list {
  list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 28px) / 3); gap: 14px; margin: 0; padding: 4px 6px 10px 2px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.featured-list::-webkit-scrollbar { display: none; }
.featured-list > li { scroll-snap-align: start; }
.featured-list.dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.swipe-dots { display: flex; justify-content: center; gap: 7px; margin-top: 2px; }
.swipe-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line); opacity: .25; transition: width .2s, opacity .2s; }
.swipe-dot.on { width: 22px; opacity: 1; background: var(--orange); }
.swipe-dot[hidden] { display: none; }
@media (max-width: 640px) { .featured-list { grid-auto-columns: 78%; } .swipe-nav { display: none; } }
.featured-card {
  position: relative; isolation: isolate; display: grid; align-content: end; gap: 2px; min-height: 150px; padding: 12px 14px; overflow: hidden;
  border-radius: var(--radius); border: var(--bw) solid var(--line); box-shadow: 4px 4px 0 var(--shadow);
  background: #1c140e; color: var(--on-art); text-decoration: none;
}
.featured-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20, 12, 6, .92) 0%, rgba(20, 12, 6, .35) 60%, rgba(20, 12, 6, .1) 100%); }
.featured-card.no-cover { background: var(--surface-2); color: var(--text); }
.featured-card.no-cover::before { display: none; }
.featured-card:hover { transform: rotate(-1deg); }
.featured-card:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }
.featured-dday {
  position: absolute; top: 10px; left: 10px; padding: 2px 10px; border-radius: 10px; border: 2px solid var(--line);
  background: var(--mustard); color: var(--on-color); font-weight: 900; font-size: 1.05rem; transform: rotate(-3deg); box-shadow: 2px 2px 0 var(--shadow);
}
.featured-list li:nth-child(3n+2) .featured-dday { background: var(--pink); }
.featured-list li:nth-child(3n) .featured-dday { background: var(--sky); }
.featured-name { font-weight: 900; font-size: 1.02rem; line-height: 1.25; text-shadow: var(--art-shadow); }
.featured-meta { font-family: var(--mono); font-size: .78rem; color: var(--on-art-muted); display: flex; align-items: center; gap: 6px; }
/* platform stickers in the top-right corner of the hero and the featured cards */
.card-pfs { position: absolute; top: 12px; right: 12px; z-index: 1; max-width: 48%; }
.card-pfs .platforms { justify-content: flex-end; }
.hero .card-pfs { top: 20px; right: 20px; }
.featured-card .card-pfs { top: 10px; right: 10px; max-width: 56%; }
.featured-card.no-cover .featured-name, .featured-card.no-cover .featured-meta { color: var(--text); text-shadow: none; }

/* stat tiles */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; }
.stat { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius); color: var(--on-color); box-shadow: 4px 4px 0 var(--shadow); }
.stat-a { background: var(--mustard); }
.stat-b { background: var(--pink); transform: rotate(1deg); }
.stat-c { background: var(--sky); }
.stat-label { font-family: var(--mono); font-size: .78rem; }
.stat-value { font-size: 1.9rem; font-weight: 900; line-height: 1.1; }

/* platform chips */
.filters { padding: 14px 0 4px; }
.chips { display: flex; gap: 10px; overflow-x: auto; padding: 4px 6px 10px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--surface); color: var(--text); text-decoration: none; font-weight: 800; white-space: nowrap;
  box-shadow: 2px 2px 0 var(--shadow);
}
.chip.active { background: var(--orange); color: #fffaf0; transform: rotate(-2deg); }
.filter-note { color: var(--muted); font-size: .88rem; margin: 2px 0 0; font-family: var(--mono); }

/* search */
.search { display: flex; gap: 10px; margin: 8px 0 4px; }
.search input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 16px; border-radius: 999px; font-size: 1rem; }
.search-btn { flex: 0 0 auto; min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--mustard); color: var(--on-color); font-weight: 900; }
@media (max-width: 380px) { .search-btn span { display: none; } }

/* month bar + calendar — built from the stat-tile look: thick ink borders, offset shadows, tile colours */
.view-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin: 14px 0 6px; }
.month-nav { display: flex; align-items: center; gap: 10px; }
.view-title { margin: 0; font-size: 1.45rem; font-weight: 900; letter-spacing: -.02em; }
.cal-nav {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: var(--bw) solid var(--line);
  background: var(--surface); color: var(--text); text-decoration: none; font-size: 1.5rem; font-weight: 900; line-height: 1; box-shadow: 3px 3px 0 var(--shadow);
}
.cal-nav:hover { background: var(--mustard); color: var(--on-color); transform: rotate(-3deg); }
.cal-nav:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }
.cal { position: relative; }
.cal > summary { list-style: none; cursor: pointer; border: var(--bw) solid var(--line); gap: 6px; }
.cal > summary::-webkit-details-marker { display: none; }
.cal[open] > summary { background: var(--sky); color: var(--on-color); transform: rotate(-2deg); }
.cal-card {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 20; width: min(380px, calc(100vw - 32px)); overflow: hidden;
  border-radius: var(--radius); border: var(--bw) solid var(--line); background: var(--surface); box-shadow: 6px 6px 0 var(--shadow);
}
.cal-head {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
  background: var(--mustard); color: var(--on-color); border-bottom: var(--bw) solid var(--line);
}
.cal-head .cal-nav { width: 38px; height: 38px; box-shadow: 2px 2px 0 var(--shadow); }
.cal-head .cal-nav:hover { background: var(--surface); }
.cal-title { font-size: 1.2rem; font-weight: 900; letter-spacing: -.02em; }
.cal-grid { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; padding: 6px 8px 0; }
.cal-grid th { font-family: var(--mono); font-size: .76rem; color: var(--muted); font-weight: 800; padding: 4px 0 2px; }
.cal-grid th.sun, .cal-day.sun:not(.has-games) .cal-num { color: var(--danger); }
.cal-grid th.sat, .cal-day.sat:not(.has-games) .cal-num { color: #2b7cb3; }
.cal-grid td { padding: 0; }
.cal-day {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 11px; border: var(--bw) solid transparent;
  font-weight: 900; text-decoration: none; color: var(--text);
}
.cal-day.is-past { opacity: .4; }
/* days with releases are mini stat tiles, cycling the three tile colours by weekday */
.cal-day.has-games { border-color: var(--line); color: var(--on-color); box-shadow: 3px 3px 0 var(--shadow); opacity: 1; background: var(--mustard); }
.cal-grid td:nth-child(3n+2) .cal-day.has-games { background: var(--pink); }
.cal-grid td:nth-child(3n) .cal-day.has-games { background: var(--sky); }
.cal-day.has-games:hover { transform: rotate(-4deg) scale(1.06); }
.cal-day.has-games:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }
.cal-day.has-games.is-past { filter: saturate(.35); opacity: .7; }
.cal-day.is-today:not(.has-games) { border: var(--bw) dashed var(--orange); }
.cal-day.is-today.has-games { outline: 3px dashed var(--orange); outline-offset: 3px; }
.cal-grid td .cal-day.is-selected { background: var(--orange); color: #fffaf0; transform: rotate(-4deg); }
.cal-count {
  position: absolute; top: -9px; right: -8px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; background: var(--surface); color: var(--text); border: 2px solid var(--line); font: 900 .68rem/1 var(--mono);
}
.cal-foot { margin: 6px 14px 14px; font-size: .82rem; color: var(--muted); font-family: var(--mono); }
.release-list-flat { margin-top: 18px; }
@media (max-width: 480px) {
  .view-bar { position: relative; }
  .cal { position: static; }
  .cal-card { left: 0; right: 0; width: auto; }
}

/* timeline */
.group-title { display: flex; align-items: center; gap: 10px; font-size: 1.45rem; font-weight: 900; letter-spacing: -.02em; margin: 30px 0 12px; }
.group-title::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--orange); border: var(--bw) solid var(--line); }
.release-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.release-row {
  position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: var(--radius);
  background: var(--surface); box-shadow: 4px 4px 0 var(--shadow);
}
.release-row:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }
.release-date {
  flex: 0 0 auto; min-width: 64px; padding: 6px 8px; text-align: center; border-radius: var(--radius-sm);
  border: var(--bw) solid var(--line); background: var(--mustard); color: var(--on-color);
  font-weight: 900; font-size: 1.05rem; transform: rotate(-3deg);
}
.release-list li:nth-child(3n+2) .release-date { background: var(--pink); transform: rotate(2deg); }
.release-list li:nth-child(3n) .release-date { background: var(--sky); }
.release-main { flex: 1; min-width: 0; }
.release-title { font-weight: 900; color: var(--text); text-decoration: none; font-size: 1.08rem; line-height: 1.35; }
.release-title::after { content: ""; position: absolute; inset: 0; }
.title-ko, .title-alt { color: var(--muted); font-weight: 600; font-size: .9em; }
.release-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.platforms { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-block; padding: 1px 9px; border-radius: 8px; border: 2px solid var(--line);
  font-family: var(--mono); font-size: .74rem; font-weight: 700; background: var(--surface-2); color: var(--text); white-space: nowrap;
}
.pf-ps5 { background: var(--sky); color: var(--on-color); }
.pf-xbox-series { background: var(--mint); color: var(--on-color); }
.pf-switch-2, .pf-switch { background: var(--pink); color: var(--on-color); }
.pf-pc { background: var(--mustard); color: var(--on-color); }
.pf-mobile { background: var(--surface-2); color: var(--text); }
.pf-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); flex: 0 0 auto; }
.pf-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-icon text { fill: currentColor; stroke: none; font: 800 8.2px var(--mono); letter-spacing: -.04em; }
.pf-icon .pf-2 { font-size: 10px; font-weight: 900; }
.pf-icon .pf-dot { fill: currentColor; stroke: none; }
.account-delete-link { margin: 24px 0 0; text-align: right; font-size: .85rem; }
.account-delete-link a { color: var(--muted); }
.delete-facts { display: grid; gap: 8px; padding-left: 20px; margin: 12px 0 20px; }
.btn-delete { background: #d7263d; color: #fff; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.legal-nav a { padding: 4px 12px; border-radius: 999px; border: 2px solid var(--line); color: var(--text); text-decoration: none; font-weight: 700; font-size: .88rem; }
.legal-nav a[aria-current="page"] { background: var(--mustard); color: var(--on-color); }
.legal-index { display: grid; gap: 8px; padding-left: 20px; }
.biz-info-page { margin: 12px 0; }
.summary-src { margin: -8px 0 16px; font-size: .78rem; font-family: var(--mono); }
.pf-named { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.countdown-platforms .pf-named { margin: 0 12px 8px 0; }
.countdown-platforms .pf-icon { width: 32px; height: 32px; vertical-align: middle; }
.badge-warn { background: var(--warn-bg); color: var(--warn-text); border-style: dashed; }
.badge-adult { background: #d7263d; color: #fff; border-color: #8f0f20; font-weight: 800; letter-spacing: .02em; }
.badge-ts { background: var(--mint); color: var(--on-color); }
.comment-count { font-family: var(--mono); font-size: .85rem; font-weight: 700; color: var(--muted); margin-left: auto; }

.empty { text-align: center; padding: 48px 0; color: var(--muted); }

/* game detail */
.game { padding-top: 12px; }
.back { font-weight: 800; text-decoration: none; }
.game-header { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.game-header h1 { margin: 0; font-size: 1.9rem; font-weight: 900; line-height: 1.2; letter-spacing: -.02em; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 10px 0; }
.facts dt { color: var(--muted); font-family: var(--mono); font-size: .88rem; }
.facts dd { margin: 0; font-weight: 700; }
.summary { margin: 16px 0; }
.game h2, .comments h2 { font-size: 1.3rem; font-weight: 900; margin: 28px 0 12px; }
.release-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: 4px 4px 0 var(--shadow); }
.release-table th, .release-table td { text-align: left; padding: 12px 14px; border-bottom: 2px solid var(--line); }
.release-table tr:last-child td { border-bottom: 0; }
.release-table th { background: var(--mustard); color: var(--on-color); font-family: var(--mono); font-size: .85rem; }
.release-table td:first-child { font-weight: 800; }
.source { color: var(--muted); font-size: .88rem; font-family: var(--mono); margin-top: 14px; }

/* comments */
.comments { margin: 32px 0 48px; }
.comment-form, .comment-edit-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
textarea, input {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border-radius: var(--radius-sm); padding: 12px 14px; min-height: var(--tap); box-shadow: 3px 3px 0 var(--shadow);
}
textarea { resize: vertical; min-height: 96px; }
.form-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.counter { color: var(--muted); font-size: .85rem; font-family: var(--mono); }
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.comment { padding: 12px 14px; border-radius: var(--radius); background: var(--surface); box-shadow: 3px 3px 0 var(--shadow); }
.comment:nth-child(odd) { background: var(--surface-2); }
.comment-meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: .9rem; }
.comment-author { font-weight: 900; }
.comment-meta time { color: var(--muted); font-family: var(--mono); font-size: .8rem; }
.comment-body { margin: 6px 0; white-space: normal; }
.comment-actions { display: flex; gap: 8px; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.login-prompt { padding: 18px; background: var(--surface-2); border-style: dashed; border-radius: var(--radius); text-align: center; font-weight: 800; }
.alert { padding: 10px 12px; border-radius: var(--radius-sm); border: 2px dashed var(--line); background: var(--warn-bg); color: var(--warn-text); margin-bottom: 12px; font-weight: 700; }

/* auth */
.auth-card { max-width: 420px; margin: 32px auto; padding: 24px; background: var(--surface); border-radius: var(--radius); box-shadow: 5px 5px 0 var(--shadow); }
.auth-card h1 { margin-top: 0; font-weight: 900; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack label { display: flex; flex-direction: column; gap: 6px; font-weight: 800; }

.site-footer { color: var(--muted); font-size: .82rem; padding-top: 16px; padding-bottom: 36px; border-top: var(--bw) dashed var(--line); margin-top: 24px; }

/* ---- game artwork ------------------------------------------------------------------
   Covers are <img class="card-bg"> layers (CSP blocks inline style attributes). The card is an
   isolated stacking context: image at z -2, dark gradient overlay at z -1, content on top. The overlay
   is dark in both themes, so text on covers is always cream with a soft shadow. */
:root { --on-art: #fffaf0; --on-art-muted: rgba(255, 250, 240, .82); --art-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 12px rgba(0, 0, 0, .55); }
.has-cover { isolation: isolate; overflow: hidden; }
.card-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.has-cover::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20, 12, 6, .82) 0%, rgba(20, 12, 6, .55) 40%, rgba(20, 12, 6, .18) 100%),
    linear-gradient(0deg, rgba(20, 12, 6, .5) 0%, rgba(20, 12, 6, 0) 55%);
}
/* list rows: the text sits on the left two thirds, so that part is a little darker; the art stays clear (the text
   has its own shadow) */
.release-row.has-cover::before {
  background:
    linear-gradient(90deg, rgba(20, 12, 6, .62) 0%, rgba(20, 12, 6, .38) 45%, rgba(20, 12, 6, .04) 100%),
    linear-gradient(0deg, rgba(20, 12, 6, .38) 0%, rgba(20, 12, 6, 0) 55%);
}

.release-row.has-cover { background: #1c140e; min-height: 112px; }
.release-row.has-cover .release-title { color: var(--on-art); text-shadow: var(--art-shadow); }
.release-row.has-cover .title-alt, .release-row.has-cover .comment-count { color: var(--on-art-muted); text-shadow: var(--art-shadow); }

/* fallback: diagonal stripes + a big tilted initial */
.no-cover { isolation: isolate; overflow: hidden; }
.release-row.no-cover {
  background-color: var(--surface);
  background-image: repeating-linear-gradient(135deg, var(--dot) 0 10px, transparent 10px 22px);
}
.card-fallback {
  position: absolute; z-index: -1; right: 14px; top: -18px; font-size: 5.25rem; font-weight: 900; line-height: 1;
  color: var(--mustard); opacity: .3; transform: rotate(-10deg); pointer-events: none; user-select: none;
}
.release-list li.no-cover:nth-child(3n+2) .card-fallback { color: var(--pink); }
.release-list li.no-cover:nth-child(3n) .card-fallback { color: var(--sky); }

.hero.has-cover { background-color: #1c140e; background-image: none; min-height: 220px; align-content: end; }
.hero.has-cover::before {
  background:
    linear-gradient(0deg, rgba(20, 12, 6, .9) 0%, rgba(20, 12, 6, .45) 55%, rgba(20, 12, 6, .25) 100%),
    linear-gradient(90deg, rgba(20, 12, 6, .6) 0%, rgba(20, 12, 6, 0) 70%);
}
.hero.has-cover .hero-kicker, .hero.has-cover .hero-date { color: var(--on-art-muted); text-shadow: var(--art-shadow); }
.hero.has-cover .hero-title { color: var(--on-art); text-shadow: var(--art-shadow); }

.game-banner {
  position: relative; aspect-ratio: 460 / 215; border-radius: var(--radius); border: var(--bw) solid var(--line);
  box-shadow: 5px 5px 0 var(--shadow); background-color: var(--surface-2);
}
.game-banner.has-cover::before { background: linear-gradient(0deg, rgba(20, 12, 6, .35) 0%, rgba(20, 12, 6, 0) 40%); }
.game-banner.no-cover {
  background-image: repeating-linear-gradient(135deg, var(--dot) 0 12px, transparent 12px 26px);
}
.game-banner .card-fallback { right: 16px; top: auto; bottom: -26px; font-size: 9rem; opacity: .55; }

@media (max-width: 380px) {
  .brand-tagline { display: none; }
  .brand-mark { width: 32px; height: 32px; }
}
@media (max-width: 480px) {
  .stats { gap: 10px; }
  .stat { padding: 10px 12px; }
  .stat-value { font-size: 1.6rem; }
  .group-title { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .hero, .release-row { transition: none; }
}

/* ---- /apps: native app downloads ---- */
.apps { padding: 12px 0 8px; }
.apps-title { margin: 12px 0 6px; font-size: 1.9rem; font-weight: 900; letter-spacing: -.02em; }
.apps-lead { margin: 0 0 18px; color: var(--muted); }
.app-cards { display: grid; gap: 22px; margin: 8px 0 20px; }
.app-card {
  display: grid; gap: 12px; padding: 18px; border: var(--bw) solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: 4px 4px 0 var(--shadow);
}
.app-card.is-mine { background-color: var(--surface); background-image: radial-gradient(var(--dot) 1.6px, transparent 1.6px); background-size: 18px 18px; box-shadow: 6px 6px 0 var(--mustard), 6px 6px 0 3px var(--line); }
.app-card-head { display: flex; align-items: center; gap: 12px; }
.app-card-head h2 { margin: 0; font-size: 1.35rem; font-weight: 900; }
.app-card-mark {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px;
  border: var(--bw) solid var(--line); background: var(--mustard); box-shadow: 2px 2px 0 var(--shadow); font-size: 1.35rem; transform: rotate(-6deg);
}
.app-card-ios .app-card-mark { background: var(--sky); transform: rotate(4deg); }
.badge-mine { background: var(--orange); color: #fffaf0; margin-left: auto; transform: rotate(2deg); }
.app-meta { margin: 0; font-family: var(--mono); font-size: .86rem; color: var(--muted); }
.app-cta { width: 100%; min-height: 52px; font-size: 1.05rem; }
.app-cta.is-disabled { background: var(--surface-2); color: var(--muted); border-style: dashed; box-shadow: none; cursor: not-allowed; }
.app-hash { margin: 0; }
.app-hash-label { font-family: var(--mono); font-size: .78rem; font-weight: 800; color: var(--muted); }
.app-hash code { display: block; margin-top: 4px; padding: 8px 10px; border: 2px dashed var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-family: var(--mono); font-size: .76rem; word-break: break-all; }
.app-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; font-size: .94rem; }
.apps-note { font-size: .88rem; color: var(--muted); border-top: 2px dashed var(--line); padding-top: 12px; }
.footer-apps { font-weight: 800; }
@media (min-width: 640px) { .app-cards { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---- billing: /pro, checkout, account, sponsor cards, badges ---- */
.pro, .checkout, .account, .legal { padding: 12px 0 24px; }
.pro-title { margin: 12px 0 6px; font-size: 1.9rem; font-weight: 900; letter-spacing: -.02em; }
.pro-lead { margin: 0 0 18px; color: var(--muted); }
.pro-note { font-size: .88rem; color: var(--muted); }
.plan-cards { display: grid; gap: 22px; margin: 8px 0 20px; }
.plan-card, .checkout-card, .notice-box {
  display: grid; gap: 12px; padding: 18px; border: var(--bw) solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: 4px 4px 0 var(--shadow); margin-bottom: 18px;
}
.plan-card { margin-bottom: 0; }
.plan-pass { background-color: var(--surface); background-image: radial-gradient(var(--dot) 1.6px, transparent 1.6px); background-size: 18px 18px; box-shadow: 6px 6px 0 var(--mustard), 6px 6px 0 3px var(--line); }
.plan-dayone { background: var(--surface-2); }
.plan-name { margin: 0; font-size: 1.35rem; font-weight: 900; }
.plan-price { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.plan-price strong { font-size: 1.8rem; font-weight: 900; line-height: 1.1; }
.plan-price span { font-family: var(--mono); font-size: .85rem; color: var(--muted); }
.plan-perks { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.plan-options { display: grid; gap: 14px; }
.plan-option { display: grid; gap: 8px; padding: 12px; border: 2px dashed var(--line); border-radius: var(--radius-sm); }
.plan-option-best { border-style: solid; background: var(--surface-2); }
.plan-option-name { font-weight: 800; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.plan-cta { width: 100%; min-height: 52px; font-size: 1.05rem; }
.plan-cta.is-disabled, .plan-cta:disabled { background: var(--surface-2); color: var(--muted); border-style: dashed; box-shadow: none; cursor: not-allowed; }
.plan-note, .plan-stock { margin: 0; font-size: .9rem; color: var(--muted); }
.plan-stock { font-family: var(--mono); font-weight: 700; color: var(--text); }
.badge-save { background: var(--mint); color: var(--on-color); }
.badge-pro { background: var(--mustard); color: var(--on-color); margin-left: 6px; font-size: .72rem; transform: rotate(-3deg); }
.alert-ok { background: var(--surface-2); color: var(--text); border-style: solid; }
.notice-title { margin: 0; font-size: 1.1rem; font-weight: 900; }
.notice-box p { margin: 0; font-size: .94rem; }
.checkout-facts { margin: 0; }
.checkout-form { display: grid; gap: 14px; }
.consent { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-weight: 700; cursor: pointer; }
.consent input { width: 24px; height: 24px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--orange); }
.result { text-align: center; padding: 36px 0; }
.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pay-table td { font-size: .9rem; padding: 8px 10px; }
.legal section { margin: 18px 0; }
.legal h2 { font-size: 1.2rem; font-weight: 900; }
.sponsor-card { background: var(--surface-2); border-style: dashed; }
.release-list li.sponsor-card .sponsor-tag { background: var(--mint); transform: rotate(-2deg); font-size: .72rem; }
.sponsor-body { margin: 6px 0 0; font-size: .9rem; color: var(--muted); }
.footer-billing a { font-weight: 800; }
.biz-info { display: grid; gap: 2px; margin: 10px 0 0; font-size: .78rem; }
.biz-info div { display: flex; gap: 8px; flex-wrap: wrap; }
.biz-info dt { font-weight: 800; }
.biz-info dd { margin: 0; }
@media (min-width: 640px) { .plan-cards { grid-template-columns: 1fr 1fr; align-items: start; } .plan-pass { grid-row: span 2; } }

/* help center + admin */
select { width: 100%; font: inherit; color: var(--text); background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; min-height: 44px; }
.check { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 700 !important; }
.check input { width: auto; min-height: 0; }
.hero-support { display: block; transform: rotate(-.6deg); }
.hero-support .pro-title { margin-top: 4px; }
.faq { display: grid; gap: 10px; }
.faq-item, .msg-alt { border-radius: var(--radius-sm); }
.faq-item { padding: 12px 14px; background: var(--surface); border: var(--bw) solid var(--line); box-shadow: 3px 3px 0 var(--shadow); }
.faq-item summary, .msg-alt summary { cursor: pointer; font-weight: 900; }
.faq-item p { margin: 8px 0 0; }
.ticket-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticket { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: var(--bw) solid var(--line); box-shadow: 4px 4px 0 var(--shadow); color: var(--text); text-decoration: none; }
.ticket:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--shadow); }
.ticket-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ticket-time { margin-left: auto; font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.ticket-subject { font-weight: 900; font-size: 1.05rem; overflow-wrap: anywhere; }
.ticket-sub { font-size: .85rem; font-family: var(--mono); }
.ticket-title { margin: 8px 0 6px; font-size: 1.5rem; font-weight: 900; overflow-wrap: anywhere; }
.status-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; border: var(--bw) solid var(--line); font-size: .78rem; font-weight: 900; color: var(--on-color); }
.status-open { background: var(--orange); color: #fffaf0; transform: rotate(-2deg); }
.status-answered { background: var(--mint); }
.status-closed { background: var(--surface-2); color: var(--muted); }
.badge-mt { background: var(--sky); color: var(--on-color); font-size: .7rem; }
.badge-lang { background: var(--pink); color: var(--on-color); }
.msg-list { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 12px; }
.msg { padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: var(--bw) solid var(--line); box-shadow: 3px 3px 0 var(--shadow); margin-right: 32px; }
.msg-staff { background: var(--surface-2); margin: 0 0 0 32px; border-style: dashed; }
.msg-alt { margin-top: 6px; padding: 6px 10px; background: var(--bg); font-size: .92rem; }
.msg-alt summary { font-size: .82rem; color: var(--muted); }
.comment-translation { margin: 4px 0 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 2px dashed var(--line); }
.comment-translation .comment-body { margin: 4px 0 0; }
.comment-deleted { opacity: .55; }
.admin-nav { margin: 6px 0 12px; }
.stats-4 { grid-template-columns: repeat(4, 1fr); }
.stats-4 .stat { color: var(--on-color); text-decoration: none; }
.stat-d { background: var(--mint); transform: rotate(-1deg); }
.reply-form { margin-top: 20px; }
.translate-box { display: grid; gap: 6px; padding: 10px; border-radius: var(--radius-sm); border: 2px dashed var(--line); background: var(--bg); }
.admin-status { margin: 14px 0 32px; justify-content: flex-start; }
.admin-status label { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.admin-status select { width: auto; }
.admin-search { margin-bottom: 14px; }
.table-scroll { overflow-x: auto; }
.admin-table td, .admin-table th { padding: 8px 10px; text-align: left; font-size: .9rem; }
@media (max-width: 560px) {
  .stats-4 { grid-template-columns: repeat(2, 1fr); }
  .msg { margin-right: 0; }
  .msg-staff { margin-left: 0; }
}
.report-box { margin-top: 4px; }
.report-box summary { cursor: pointer; font-size: .82rem; color: var(--muted); font-weight: 800; list-style: none; display: inline-block; }
.report-box summary::-webkit-details-marker { display: none; }
.report-form { margin-top: 8px; padding: 10px; border: 2px dashed var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.report-item { border-color: var(--danger); }
.report-count { font-weight: 900; color: var(--danger); }
.report-reasons { list-style: none; margin: 6px 0 10px; padding: 8px 10px; display: grid; gap: 6px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: .88rem; }
.report-note { font-style: italic; }
.reason-abuse, .reason-hate { background: var(--danger); color: #fffaf0; }
.reason-spam { background: var(--mustard); color: var(--on-color); }
.reason-spoiler { background: var(--sky); color: var(--on-color); }

/* 19+ lock: extra screenshots withheld */
.adult-lock {
  display: flex; gap: 14px; align-items: center; margin: 18px 0; padding: 14px 16px; border-radius: var(--radius);
  border: var(--bw) solid var(--line); background: var(--surface); box-shadow: 4px 4px 0 var(--shadow);
}
.adult-lock-mark {
  flex: 0 0 auto; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: #d7263d; color: #fff; border: var(--bw) solid var(--line); font: 900 1.5rem/1 var(--mono); transform: rotate(-6deg);
}
.adult-lock p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }

/* screenshot gallery */
.gallery { margin: 22px 0 8px; }
.gallery-stage {
  position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius);
  border: var(--bw) solid var(--line); box-shadow: 5px 5px 0 var(--shadow); background: #1c140e;
}
.gallery-main { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-nav {
  position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: 12px; border: var(--bw) solid var(--line); background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 1.6rem; font-weight: 900; line-height: 1; cursor: pointer; box-shadow: 3px 3px 0 var(--shadow); opacity: .92;
}
.gallery-nav:hover { background: var(--mustard); opacity: 1; }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
.gallery-thumbs { list-style: none; display: flex; gap: 10px; margin: 14px 0 0; padding: 2px 6px 10px 2px; overflow-x: auto; scrollbar-width: thin; }
.gallery-thumb {
  display: block; width: 132px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; border: var(--bw) solid var(--line);
  box-shadow: 2px 2px 0 var(--shadow); opacity: .7; background: #1c140e;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover, .gallery-thumb.active { opacity: 1; }
.gallery-thumb.active { border-color: var(--orange); transform: rotate(-2deg); }
@media (max-width: 480px) { .gallery-thumb { width: 104px; } .gallery-nav { width: 38px; height: 38px; } }

/* replies + notifications */
.replies { list-style: none; margin: 12px 0 0; padding: 0 0 0 18px; border-left: var(--bw) dashed var(--line); display: grid; gap: 10px; }
.comment-reply { box-shadow: 2px 2px 0 var(--shadow); background: var(--surface-2); }
.comment-deleted { background: transparent; box-shadow: none; border-style: dashed; }
.reply-box { margin-top: 8px; }
.reply-box > summary { display: inline-block; cursor: pointer; font-weight: 800; font-size: .88rem; color: var(--orange); list-style: none; }
.reply-box > summary::-webkit-details-marker { display: none; }
.reply-box > summary::before { content: "↩ "; }
.reply-form { margin-top: 8px; }
.bell { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; text-decoration: none; font-size: 1.2rem; }
.bell:hover { background: var(--surface-2); }
/* light/dark switch in the header: a round sticker the size of the bell, beside the profile */
.hdr-theme { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); box-shadow: 2px 2px 0 var(--shadow); color: var(--text); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.hdr-theme .ui-ico { width: 26px; height: 26px; }
@media (hover: hover) { .hdr-theme:hover { transform: translateY(-1px); box-shadow: 2px 3px 0 var(--shadow); } }
.hdr-theme:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--shadow); }
.hdr-theme:focus-visible { outline: 3px solid #ff7a2f; outline-offset: 2px; }
@media (max-width: 480px) { .hdr-theme { width: 34px; height: 34px; min-width: 34px; } .hdr-theme .ui-ico { width: 22px; height: 22px; } }
.bell-count {
  position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  background: var(--orange); color: #fffaf0; border: 2px solid var(--line); font: 900 .68rem/1 var(--mono);
}
.notif-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.notif a {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius-sm);
  border: var(--bw) solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: 3px 3px 0 var(--shadow);
}
.notif.unread a { background: #fff3c4; }
.notif-icon { font-size: 1.3rem; }
.notif-text { font-weight: 800; }
.notif-body { display: block; font-weight: 400; color: var(--muted); font-size: .9rem; margin-top: 2px; }
.notif-time { font-family: var(--mono); font-size: .78rem; color: var(--muted); white-space: nowrap; }

/* avatars + profile */
.avatar { display: block; flex: 0 0 auto; border-radius: 22%; }
.avatar-xs { width: 30px; height: 30px; }
.avatar-sm { width: 36px; height: 36px; }
.avatar-lg { width: 96px; height: 96px; }
.avatar-xl { width: 128px; height: 128px; }
.comment-meta { align-items: center; }
.comment-author-link { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.comment-author-link:hover .comment-author { text-decoration: underline dotted var(--orange) 3px; text-underline-offset: 4px; }
.comment-meta > .avatar-sm { margin-right: 0; }
.user-chip { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.profile-card { display: flex; gap: 16px; align-items: center; margin: 16px 0 20px; padding: 16px; border-radius: var(--radius); border: var(--bw) solid var(--line); background: var(--surface); box-shadow: 4px 4px 0 var(--shadow); }
.profile-name { font-size: 1.4rem; font-weight: 900; margin: 0; }
.profile-card-big .profile-name { font-size: 1.8rem; }
.profile-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.stat-chip { padding: 2px 10px; border-radius: 999px; border: 2px solid var(--line); background: var(--mustard); color: var(--on-color); font: 800 .82rem var(--mono); }
.stat-chip + .stat-chip { background: var(--sky); }
.hint { margin: -6px 0 4px; font-size: .85rem; color: var(--muted); }
.avatar-picker { border: 0; padding: 0; margin: 10px 0 0; }
.avatar-picker legend { font-weight: 900; font-size: 1.1rem; padding: 0; }
.avatar-cat { font-size: .95rem; margin: 16px 0 8px; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; }
.avatar-opt { position: relative; display: grid; place-items: center; padding: 6px; border-radius: 16px; border: var(--bw) solid transparent; cursor: pointer; }
.avatar-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.avatar-opt img { width: 64px; height: 64px; }
.avatar-opt:hover { background: var(--surface-2); }
.avatar-opt:has(input:checked) { border-color: var(--line); background: var(--mustard); transform: rotate(-3deg); box-shadow: 3px 3px 0 var(--shadow); }
.avatar-opt:has(input:focus-visible) { outline: 3px dashed var(--orange); outline-offset: 2px; }
.avatar-opt.locked { cursor: not-allowed; }
.avatar-opt.locked img { filter: grayscale(.85); opacity: .55; }
.avatar-price { position: absolute; bottom: 2px; left: 50%; translate: -50% 0; white-space: nowrap; padding: 0 6px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); font: 800 .66rem var(--mono); }
.user-meta { display: inline-flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.user-lv { font: 800 .72rem var(--mono); color: var(--muted); }
.menu-lang { display: none; }
@media (max-width: 480px) {
  /* phone: the flags go into the menu so the nickname and level fit beside the icon */
  .header-actions > .lang-flags { display: none; }
  .menu-lang { display: flex; justify-content: center; margin-top: 10px; }
  /* room for a glowing (unique) icon: its rim and blur reach ~10 px past the picture */
  .user-chip { gap: 12px; margin: 0 6px 0 8px; min-width: 0; }
  .user-name { max-width: 6.5em; font-size: .85rem; }
}
.preview-banner { margin: 0; padding: 8px 16px; text-align: center; font-weight: 800; font-size: .88rem; background: var(--mustard); color: var(--on-color); border-bottom: var(--bw) solid var(--line); }

/* paid avatar tiers: 250 DP gold rim, 400 DP animated glow */
.avatar-rare { box-shadow: 0 0 0 3px #f5c542, 0 0 0 5px var(--line); }
.avatar-special { box-shadow: 0 0 0 3px #fff3b0, 0 0 0 5px var(--line), 0 0 14px 4px rgba(255, 196, 64, .85); animation: avatar-glow 2.4s ease-in-out infinite; }
@keyframes avatar-glow {
  0%, 100% { box-shadow: 0 0 0 3px #fff3b0, 0 0 0 5px var(--line), 0 0 10px 2px rgba(255, 196, 64, .7); }
  33% { box-shadow: 0 0 0 3px #ffd1e8, 0 0 0 5px var(--line), 0 0 16px 6px rgba(229, 139, 176, .85); }
  66% { box-shadow: 0 0 0 3px #c9ecff, 0 0 0 5px var(--line), 0 0 16px 6px rgba(108, 182, 221, .85); }
}
.avatar-opt.tier-rare img { border-radius: 22%; box-shadow: 0 0 0 2px #f5c542; }
.avatar-opt.tier-special img { border-radius: 22%; box-shadow: 0 0 10px 3px rgba(255, 196, 64, .8); }
.avatar-opt.tier-special .avatar-price { background: linear-gradient(90deg, #fff3b0, #ffd1e8, #c9ecff); color: #2a1d12; border-color: #2a1d12; } /* pale tag: dark text in both themes */
.avatar-opt.locked.tier-special img { filter: grayscale(.4); opacity: .8; }
@media (prefers-reduced-motion: reduce) { .avatar-special { animation: none; } }

/* Metascore (Metacritic colours) */
.metascore {
  flex: 0 0 auto; align-self: center; display: grid; place-items: center; min-width: 64px; padding: 6px 8px 8px; border-radius: 14px;
  border: var(--bw) solid var(--line); box-shadow: 3px 3px 0 var(--shadow); color: #1b1b1b; line-height: 1; z-index: 1;
}
.metascore strong { font-size: 2rem; font-weight: 900; letter-spacing: -.03em; }
.metascore-label { font: 800 .58rem/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; opacity: .8; margin-bottom: 2px; }
.metascore-good { background: #66cc33; }
.metascore-mixed { background: #ffcc33; }
.metascore-bad { background: #ff4d4d; color: #fff; }
.metascore-big { min-width: 92px; padding: 10px 12px 12px; transform: rotate(2deg); }
.metascore-big strong { font-size: 3rem; }
.metascore-link { float: right; margin: 4px 0 8px 14px; text-decoration: none; }
.metascore-link:hover .metascore { transform: rotate(-2deg) scale(1.04); }
@media (max-width: 480px) { .metascore { min-width: 52px; } .metascore strong { font-size: 1.5rem; } }
/* Metascore inside the card's meta row, just left of the comment count */
.release-meta .metascore { margin-left: auto; min-width: 0; padding: 3px 9px 4px; border-radius: 10px; border-width: 2px; box-shadow: 2px 2px 0 var(--shadow); display: inline-flex; align-items: baseline; gap: 5px; }
.release-meta .metascore strong { font-size: 1.25rem; }
.release-meta .metascore-label { font-size: .5rem; margin: 0; }
.release-meta .metascore + .comment-count { margin-left: 10px; }

/* DP ranking + history */
.nav-rank { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; text-decoration: none; font-size: 1.2rem; }
.nav-rank:hover { background: var(--surface-2); }
.rank-me { margin: 10px 0; padding: 10px 14px; border-radius: var(--radius-sm); border: var(--bw) solid var(--line); background: var(--mustard); color: var(--on-color); font-weight: 900; box-shadow: 3px 3px 0 var(--shadow); }
.rank-list { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.rank-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: var(--radius-sm); border: var(--bw) solid var(--line); background: var(--surface); box-shadow: 3px 3px 0 var(--shadow); }
.rank-no { font: 900 1.3rem var(--mono); text-align: center; }
.rank-top .rank-no { font-size: 1.8rem; }
.rank-1 { background: #fff3c4; transform: rotate(-.6deg); }
.rank-2 { background: #eef2f6; }
.rank-3 { background: #fbe3d2; }
.rank-mine { outline: 3px dashed var(--orange); outline-offset: 2px; }
.rank-user { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.rank-user strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-dp { font: 900 1.1rem var(--mono); white-space: nowrap; }
.rank-dp small { font-size: .7rem; color: var(--muted); }
.rank-howto { margin-top: 22px; padding: 14px 16px; border-radius: var(--radius); border: var(--bw) dashed var(--line); }
.rank-howto h2 { margin: 0 0 6px; font-size: 1.05rem; }
.dp-chip a { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 2px solid var(--line); background: var(--sky); color: var(--on-color); font: 800 .85rem var(--mono); text-decoration: none; }
.dp-balance { font-size: 2rem; font-weight: 900; }
.dp-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--radius-sm); border: var(--bw) solid var(--line); background: var(--surface); }
.dp-amount { font: 900 1rem var(--mono); }
.dp-amount.plus { color: #2f8a3a; }
.dp-amount.minus { color: var(--danger); }
/* light tinted rows keep dark ink text in both themes */
.rank-top, .rank-top .rank-user, .notif.unread a { color: #2a1d12; }
.rank-top .rank-dp small, .notif.unread .notif-body, .notif.unread .notif-time { color: #6b5640; }

/* countdown page */
.countdown-hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 12px; margin: 18px 0; padding: 38px 20px 30px;
  text-align: center; border-radius: var(--radius); border: var(--bw) solid var(--line); box-shadow: 6px 6px 0 var(--shadow); background: #1c140e; color: #fffaf0;
}
.countdown-hero .card-bg { opacity: .55; }
.countdown-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 40%, rgba(20,12,6,.35), rgba(20,12,6,.88)); }
.countdown-hero.no-cover { background: var(--surface-2); color: var(--text); }
.countdown-kicker { margin: 0; font: 800 .9rem var(--mono); letter-spacing: .2em; opacity: .85; }
.countdown-title { margin: 0; font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 900; letter-spacing: -.02em; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.countdown-timer { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 8px 0; }
.countdown-timer.done { font-size: 2.4rem; font-weight: 900; }
.cd-unit { display: grid; place-items: center; min-width: 92px; padding: 10px 12px 8px; border-radius: 18px; border: var(--bw) solid #2a1d12; background: var(--mustard); color: #2a1d12; box-shadow: 4px 4px 0 #000; }
.cd-unit:nth-child(2) { background: var(--pink); transform: rotate(1.5deg); }
.cd-unit:nth-child(3) { background: var(--sky); }
.cd-unit:nth-child(4) { background: var(--mint); transform: rotate(-1.5deg); }
.cd-unit strong { font: 900 clamp(2.2rem, 9vw, 3.6rem)/1 var(--mono); font-variant-numeric: tabular-nums; }
.cd-unit span { font-weight: 800; font-size: .85rem; }
.countdown-date { margin: 0; font-family: var(--mono); opacity: .9; }
.countdown-platforms { margin: 0; }
.countdown-hero .metascore-link { float: none; margin: 6px 0 0; }
.share-row, .game-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.game-actions { justify-content: flex-start; margin: 10px 0 0; }
@media (max-width: 480px) { .cd-unit { min-width: 68px; } }

/* avatars with tier effects (.av wraps the image) */
.av { position: relative; display: inline-block; flex: 0 0 auto; border-radius: 24%; line-height: 0; isolation: isolate; }
.av > img { position: relative; z-index: 1; display: block; border-radius: 24%; }
.av-xs, .av-xs > img { width: 30px; height: 30px; }
.av-sm, .av-sm > img { width: 36px; height: 36px; }
.av-md, .av-md > img { width: 64px; height: 64px; }
.av-lg, .av-lg > img { width: 96px; height: 96px; }
.av-xl, .av-xl > img { width: 128px; height: 128px; }
.av-shine { position: absolute; inset: 0; z-index: 2; border-radius: 24%; overflow: hidden; pointer-events: none; }
.av-shine::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-18deg);
  animation: av-sweep 3.2s ease-in-out infinite;
}
@keyframes av-sweep { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
/* 250 DP: gold rim + shine */
.av-rare > img { box-shadow: 0 0 0 3px #f5c542, 0 0 0 5px #2a1d12; }
/* 400 DP: spinning rainbow halo, glow, sparkles, float */
.av-special::before {
  content: ""; position: absolute; inset: -5px; z-index: 0; border-radius: 28%;
  background: conic-gradient(from var(--av-angle, 0deg), #ff5e7e, #ffcc33, #7cf29c, #5fc8ff, #b48cff, #ff5e7e);
  animation: av-spin 2.6s linear infinite; filter: saturate(1.3);
}
.av-special::after {
  content: ""; position: absolute; inset: -9px; z-index: -1; border-radius: 32%;
  background: conic-gradient(from var(--av-angle, 0deg), #ff5e7e, #ffcc33, #7cf29c, #5fc8ff, #b48cff, #ff5e7e);
  filter: blur(9px); opacity: .75; animation: av-spin 2.6s linear infinite;
}
.av-special > img { box-shadow: 0 0 0 2px #fffaf0; animation: av-float 2.8s ease-in-out infinite; }
@property --av-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes av-spin { to { --av-angle: 360deg; } }
@keyframes av-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px) scale(1.03); } }
.av-spark { position: absolute; z-index: 3; color: #fffbe0; font-size: 14px; line-height: 1; pointer-events: none;
  text-shadow: 0 0 4px #ffcc33, 0 0 8px #ff8fa3; animation: av-twinkle 1.8s ease-in-out infinite; }
.av-spark.s1 { top: -8px; right: -6px; }
.av-spark.s2 { bottom: -6px; left: -7px; font-size: 11px; animation-delay: .6s; }
.av-spark.s3 { top: 30%; left: -9px; font-size: 10px; animation-delay: 1.2s; }
.av-xs .av-spark, .av-sm .av-spark { font-size: 9px; }
.av-lg .av-spark, .av-xl .av-spark { font-size: 22px; }
@keyframes av-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(25deg); } }
@media (prefers-reduced-motion: reduce) { .av-shine::after, .av-special::before, .av-special::after, .av-special > img, .av-spark { animation: none; } }
/* picker + try-on */
.avatar-opt.locked .av > img { filter: grayscale(.35); opacity: .9; }
.avatar-opt.locked { cursor: pointer; }
.avatar-opt.trying { border-color: var(--orange); border-style: dashed; background: var(--surface-2); }
.tryon { margin: 18px 0 6px; padding: 14px; border-radius: var(--radius); border: var(--bw) dashed var(--line); }
.tryon-title { margin: 0 0 8px; font-weight: 900; }
.tryon-comment { margin: 0; }
.tryon-note { margin: 10px 0 0; font-size: .88rem; color: var(--muted); font-weight: 700; }
.tryon-note.locked { color: var(--orange); }

/* operator (ASKI) */
.footer-company { display: flex; align-items: center; gap: 14px; margin: 18px 0 10px; padding: 14px 16px; border-radius: var(--radius-sm); border: var(--bw) solid var(--line); background: var(--surface); }
.aski-mark { width: 40px; height: 40px; flex: 0 0 auto; color: var(--text); }
.footer-company p { margin: 0; }
.footer-company-name { font-size: 1rem; }
.footer-company-name strong { font-weight: 900; letter-spacing: .06em; }
.footer-overline { font: 800 .68rem var(--mono); letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.footer-company-meta { font-size: .8rem; color: var(--muted); font-family: var(--mono); }

/* DP wallet on the profile card, owned icons, buy button */
.profile-card { position: relative; }
.dp-wallet {
  margin-left: auto; align-self: center; display: grid; justify-items: center; gap: 2px; min-width: 120px; padding: 10px 16px 12px; border-radius: 18px;
  border: var(--bw) solid var(--line); background: var(--sky); color: #2a1d12; text-decoration: none; box-shadow: 4px 4px 0 var(--shadow); transform: rotate(2deg);
}
.dp-wallet:hover { transform: rotate(-1deg) scale(1.03); }
.dp-wallet-label { font: 800 .75rem var(--mono); }
.dp-wallet strong { font: 900 2rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.dp-wallet-unit { font: 800 .75rem var(--mono); }
@media (max-width: 480px) {
  .profile-card { flex-wrap: wrap; }
  /* Phone: the wallet takes its own full-width row, label · number · unit on one line, no tilt (it clipped at the edge). */
  .dp-wallet { flex: 1 1 100%; margin: 4px 4px 0 0; grid-auto-flow: column; justify-content: center; align-items: baseline; gap: 8px; transform: none; padding: 10px 14px; }
  .dp-wallet:hover { transform: none; }
  .dp-wallet strong { font-size: 1.7rem; }
  /* Keep the glowing header avatar inside the screen. */
  .header-actions { padding-right: 6px; }
}
.avatar-cat-owned { color: var(--orange); }
.avatar-grid-owned { padding: 8px; border-radius: var(--radius-sm); background: var(--surface-2); border: 2px dashed var(--line); }
.tryon-buy { margin-top: 10px; }
.tryon-buy[hidden] { display: none; }

/* ===== unique icons (1000-3000 DP): per-icon animated borders ===== */
.av-unique > img { box-shadow: 0 0 0 2px #fffaf0; }
.av-unique::before, .av-unique::after { content: ""; position: absolute; border-radius: 30%; pointer-events: none; }
.av-unique::before { inset: -5px; z-index: 0; }
.av-unique::after { inset: -11px; z-index: -1; filter: blur(10px); }
.av-aura { position: absolute; inset: -3px; z-index: 0; border-radius: 28%; pointer-events: none; }
.av-p { position: absolute; z-index: 3; pointer-events: none; opacity: 0; }
.av-p.p1 { left: 8%; } .av-p.p2 { left: 24%; } .av-p.p3 { left: 40%; } .av-p.p4 { left: 56%; }
.av-p.p5 { left: 72%; } .av-p.p6 { left: 88%; } .av-p.p7 { left: 16%; } .av-p.p8 { left: 64%; }
.av-p.p2 { animation-delay: .35s !important; } .av-p.p3 { animation-delay: .8s !important; } .av-p.p4 { animation-delay: .15s !important; }
.av-p.p5 { animation-delay: .6s !important; } .av-p.p6 { animation-delay: 1s !important; } .av-p.p7 { animation-delay: 1.3s !important; } .av-p.p8 { animation-delay: 1.6s !important; }
.av-xs .av-p, .av-sm .av-p { transform: scale(.6); }

/* rising particles (fire / phoenix / spectral) */
@keyframes av-rise { 0% { opacity: 0; bottom: 10%; transform: translateX(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; bottom: 115%; transform: translateX(6px) scale(.2); } }
/* falling particles (ice) */
@keyframes av-fall { 0% { opacity: 0; top: -15%; transform: translateX(0) rotate(0deg); } 15% { opacity: 1; } 100% { opacity: 0; top: 105%; transform: translateX(-6px) rotate(180deg); } }
@keyframes av-flicker { 0%, 100% { transform: scale(1); opacity: .95; } 25% { transform: scale(1.04, 1.08); opacity: 1; } 50% { transform: scale(.98, 1.02); opacity: .85; } 75% { transform: scale(1.03, 1.1); opacity: 1; } }

/* 🔥 fire (케르베롱) */
.av-fx-fire::before { background: conic-gradient(from var(--av-angle, 0deg), #ff2e00, #ff8a00, #ffd000, #ff4d00, #ff2e00); animation: av-spin 1.6s linear infinite, av-flicker .45s ease-in-out infinite; }
.av-fx-fire::after { background: radial-gradient(circle at 50% 80%, #ffb000, #ff3d00 55%, transparent 72%); opacity: .95; animation: av-flicker .6s ease-in-out infinite; }
.av-fx-fire .av-aura { box-shadow: inset 0 -10px 18px rgba(255, 90, 0, .55), 0 -6px 18px rgba(255, 120, 0, .7); animation: av-flicker .5s ease-in-out infinite; }
.av-fx-fire .av-p { width: 7px; height: 9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff3a0, #ffae00 45%, #ff3d00 80%); box-shadow: 0 0 6px #ff7a00; animation: av-rise 1.4s ease-in infinite; }

/* ❄️ ice (눈설이) */
.av-fx-ice::before { background: conic-gradient(from var(--av-angle, 0deg), #e0f7ff, #7dd3fc, #ffffff, #38bdf8, #e0f7ff); animation: av-spin 6s linear infinite; }
.av-fx-ice::after { background: radial-gradient(circle, rgba(186, 230, 253, .95), rgba(56, 189, 248, .5) 60%, transparent 72%); }
.av-fx-ice .av-aura { box-shadow: inset 0 0 14px rgba(224, 247, 255, .85), 0 0 14px rgba(125, 211, 252, .8); }
.av-fx-ice .av-p { width: 7px; height: 7px; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 3px #7dd3fc); animation: av-fall 2.4s linear infinite; }

/* ⚡ thunder (번개룡) */
@keyframes av-zap { 0%, 100% { opacity: .55; filter: brightness(1); } 8% { opacity: 1; filter: brightness(2.2); } 12% { opacity: .5; } 16% { opacity: 1; filter: brightness(1.8); } 40% { opacity: .65; } 62% { opacity: 1; filter: brightness(2); } 66% { opacity: .55; } }
.av-fx-thunder::before { background: conic-gradient(from var(--av-angle, 0deg), #fde047, #a78bfa, #ffffff, #6366f1, #fde047); animation: av-spin 1.1s linear infinite, av-zap 1.7s steps(1) infinite; }
.av-fx-thunder::after { background: radial-gradient(circle, rgba(253, 224, 71, .9), rgba(124, 92, 255, .6) 60%, transparent 72%); animation: av-zap 1.7s steps(1) infinite; }
.av-fx-thunder .av-p { width: 8px; height: 13px; top: 30%; background: #fef08a; clip-path: polygon(55% 0, 15% 55%, 45% 55%, 30% 100%, 85% 40%, 55% 40%, 75% 0); filter: drop-shadow(0 0 3px #fde047); animation: av-bolt 1.7s steps(1) infinite; }
.av-fx-thunder .av-p.p1, .av-fx-thunder .av-p.p7 { left: -14%; } .av-fx-thunder .av-p.p6, .av-fx-thunder .av-p.p8 { left: 100%; }
.av-fx-thunder .av-p.p2, .av-fx-thunder .av-p.p4 { top: -18%; } .av-fx-thunder .av-p.p3, .av-fx-thunder .av-p.p5 { top: 96%; }
@keyframes av-bolt { 0%, 100% { opacity: 0; } 8%, 16% { opacity: 1; } 62% { opacity: 1; } 66% { opacity: 0; } }

/* 👻 spectral (유령왕) */
.av-fx-spectral::before { background: conic-gradient(from var(--av-angle, 0deg), #c084fc, #312e81, #e9d5ff, #7c3aed, #c084fc); animation: av-spin 4s linear infinite; }
.av-fx-spectral::after { background: radial-gradient(circle, rgba(192, 132, 252, .9), rgba(76, 29, 149, .6) 60%, transparent 72%); animation: av-flicker 2.2s ease-in-out infinite; }
.av-fx-spectral .av-p { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(237, 233, 254, .95), rgba(167, 139, 250, .2) 70%); filter: blur(1px); animation: av-rise 2.6s ease-out infinite; }

/* 🔥✨ phoenix (불사조) */
.av-fx-phoenix::before { background: conic-gradient(from var(--av-angle, 0deg), #ffd34d, #ff5a36, #fff7cc, #ff8a00, #ffd34d); animation: av-spin 2s linear infinite, av-flicker .5s ease-in-out infinite; }
.av-fx-phoenix::after { inset: -16px; background: radial-gradient(circle at 50% 60%, #fff1a8, #ffb627 40%, #ff5a36 60%, transparent 74%); animation: av-flicker .7s ease-in-out infinite; }
.av-fx-phoenix .av-aura { box-shadow: 0 0 22px 6px rgba(255, 196, 64, .85), inset 0 0 12px rgba(255, 240, 180, .8); }
.av-fx-phoenix .av-p { width: 6px; height: 10px; border-radius: 50%; background: linear-gradient(#fff7cc, #ffb627 50%, #ff5a36); box-shadow: 0 0 8px #ffd34d; animation: av-rise 1.2s ease-in infinite; }
.av-fx-phoenix .av-p.p7, .av-fx-phoenix .av-p.p8 { width: 9px; height: 9px; border-radius: 50%; background: #fffbe0; box-shadow: 0 0 10px #fff; }

/* 🌌 galaxy (은하고래) */
.av-fx-galaxy::before { background: conic-gradient(from var(--av-angle, 0deg), #1e1b4b, #7c3aed, #ec4899, #06b6d4, #1e1b4b); animation: av-spin 5s linear infinite; }
.av-fx-galaxy::after { inset: -16px; background: conic-gradient(from var(--av-angle, 0deg), rgba(124, 58, 237, .9), rgba(236, 72, 153, .8), rgba(6, 182, 212, .8), rgba(124, 58, 237, .9)); animation: av-spin 8s linear infinite reverse; }
.av-fx-galaxy .av-aura { background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent), radial-gradient(2px 2px at 80% 70%, #ffe08a, transparent), radial-gradient(1.5px 1.5px at 30% 80%, #fff, transparent); }
.av-fx-galaxy .av-p { width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #a5f3fc, 0 0 12px #ec4899; animation: av-orbit 3s linear infinite; top: 50%; left: 50%; }
@keyframes av-orbit { 0% { opacity: 1; transform: rotate(0deg) translateX(var(--av-r, 40px)) rotate(0deg); } 100% { opacity: 1; transform: rotate(360deg) translateX(var(--av-r, 40px)) rotate(-360deg); } }
.av-xs.av-fx-galaxy .av-p, .av-sm.av-fx-galaxy .av-p { --av-r: 22px; } .av-md.av-fx-galaxy .av-p { --av-r: 38px; } .av-lg.av-fx-galaxy .av-p { --av-r: 56px; } .av-xl.av-fx-galaxy .av-p { --av-r: 74px; }
.av-fx-galaxy .av-p.p2 { animation-duration: 4.2s !important; } .av-fx-galaxy .av-p.p3 { animation-duration: 5.5s !important; animation-direction: reverse; }
.av-fx-galaxy .av-p.p4, .av-fx-galaxy .av-p.p5, .av-fx-galaxy .av-p.p6, .av-fx-galaxy .av-p.p7, .av-fx-galaxy .av-p.p8 { animation-name: av-twinkle; top: auto; }
.av-fx-galaxy .av-p.p4 { top: -6px; } .av-fx-galaxy .av-p.p5 { top: 90%; } .av-fx-galaxy .av-p.p6 { top: 40%; left: 100%; } .av-fx-galaxy .av-p.p7 { top: 20%; left: -8%; } .av-fx-galaxy .av-p.p8 { top: 75%; left: 96%; }

/* picker: unique row */
.avatar-opt.tier-unique { background: linear-gradient(135deg, rgba(255, 138, 0, .12), rgba(124, 58, 237, .14)); }
.avatar-opt.tier-unique .avatar-price { background: linear-gradient(90deg, #ffd34d, #ff5a36, #a78bfa); color: #1b1b1b; }
.avatar-opt.locked.tier-unique .av > img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .av-unique::before, .av-unique::after, .av-aura, .av-p { animation: none !important; } .av-p { opacity: 0; } }

/* greeting */
.rank-names { display: grid; min-width: 0; }
.rank-greeting { display: inline-block; justify-self: start; margin-top: 2px; padding: 1px 9px; border-radius: 10px 10px 10px 2px; background: var(--surface-2); border: 2px solid var(--line); font-size: .78rem; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-top .rank-greeting { background: #fffaf0; color: #2a1d12; }
.rank-me-edit { margin-left: 8px; font-size: .82rem; color: #2a1d12; }
.greeting-bubble { display: inline-block; margin: 6px 0 0; padding: 4px 12px; border-radius: 14px 14px 14px 3px; background: var(--mustard); color: #2a1d12; border: 2px solid var(--line); font-weight: 800; }

/* admin visits chart */
.visit-chart { list-style: none; display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; align-items: end; height: 150px; margin: 16px 0 4px; padding: 0; }
.visit-chart li { display: grid; justify-items: center; gap: 3px; align-self: end; }
.visit-bar { display: block; width: 100%; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--orange); border: 2px solid var(--line); }
.visit-bar.h0 { height: 3px; }
.visit-bar.h1 { height: 10px; }
.visit-bar.h2 { height: 20px; }
.visit-bar.h3 { height: 30px; }
.visit-bar.h4 { height: 40px; }
.visit-bar.h5 { height: 50px; }
.visit-bar.h6 { height: 60px; }
.visit-bar.h7 { height: 70px; }
.visit-bar.h8 { height: 80px; }
.visit-bar.h9 { height: 90px; }
.visit-bar.h10 { height: 100px; }
.visit-n { font: 800 .72rem var(--mono); }
.visit-day { font: .64rem var(--mono); color: var(--muted); }
.visit-note { font-size: .8rem; }

/* comment heat: 💬 → 🔥 → pulsing 🔥 → 🌋 */
.comment-count.heat-1 { color: var(--text); }
.release-row.has-cover .comment-count.heat-1 { color: var(--on-art); }
.comment-count.heat-2, .comment-count.heat-3, .comment-count.heat-4 {
  margin-left: auto; padding: 2px 9px; border-radius: 999px; border: 2px solid var(--line); color: #2a1d12; text-shadow: none; font-weight: 900;
}
.release-meta .metascore + .comment-count.heat-2, .release-meta .metascore + .comment-count.heat-3, .release-meta .metascore + .comment-count.heat-4 { margin-left: 10px; }
.comment-count.heat-2 { background: #ffd34d; box-shadow: 0 0 10px rgba(255, 170, 0, .6); }
.comment-count.heat-3 { background: linear-gradient(90deg, #ffb627, #ff5a36); color: #fffaf0; animation: heat-pulse 1.4s ease-in-out infinite; }
.comment-count.heat-4 { background: linear-gradient(90deg, #ff2e00, #ff8a00, #ffd000, #ff2e00); background-size: 300% 100%; color: #fffaf0; animation: heat-lava 2s linear infinite, heat-pulse 1s ease-in-out infinite; }
.hero-pill.heat-2 { background: #ffb627; color: #2a1d12; box-shadow: 0 0 14px rgba(255, 170, 0, .7), 3px 3px 0 var(--shadow); }
.hero-pill.heat-3 { background: linear-gradient(90deg, #ffb627, #ff5a36); animation: heat-pulse 1.4s ease-in-out infinite; }
.hero-pill.heat-4 { background: linear-gradient(90deg, #ff2e00, #ff8a00, #ffd000, #ff2e00); background-size: 300% 100%; animation: heat-lava 2s linear infinite, heat-pulse 1s ease-in-out infinite; }
@keyframes heat-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 90, 0, .5); } 50% { transform: scale(1.08); box-shadow: 0 0 18px rgba(255, 90, 0, .9); } }
@keyframes heat-lava { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { .comment-count.heat-3, .comment-count.heat-4, .hero-pill.heat-3, .hero-pill.heat-4 { animation: none; } }

/* notification cards */
.notif-cards { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.notif-card a {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 16px 18px; border-radius: var(--radius);
  border: var(--bw) solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: 4px 4px 0 var(--shadow);
}
.notif-card a:hover { transform: rotate(-.4deg) translateY(-1px); }
.notif-card a:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }
.notif-card.unread a { background: #fff3c4; color: #2a1d12; }
.notif-main { min-width: 0; display: grid; gap: 4px; }
.notif-main p { margin: 0; }
.notif-head { font-size: 1.02rem; }
.notif-actor { font-weight: 900; font-size: 1.1rem; }
.notif-new { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--orange); color: #fffaf0; border: 2px solid var(--line); font: 900 .66rem/1.6 var(--mono); transform: rotate(-4deg); }
.notif-game { font-size: .86rem; font-weight: 800; color: var(--muted); }
.notif-card.unread .notif-game, .notif-card.unread .notif-foot { color: #6b5640; }
.notif-quote { padding: 8px 12px; border-radius: 12px 12px 12px 3px; background: var(--surface-2); border: 2px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-card.unread .notif-quote { background: #fffaf0; }
.notif-foot { display: flex; justify-content: space-between; gap: 10px; font: .78rem var(--mono); color: var(--muted); }
.notif-go { font-weight: 800; color: var(--orange); }
@media (max-width: 480px) { .notif-card a { grid-template-columns: 1fr; } .notif-card .av-lg, .notif-card .av-lg > img { width: 64px; height: 64px; } }

.notif-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notif-card a { grid-template-columns: auto 1fr auto; }
.notif-check {
  align-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #3fbf5f; color: #fff; border: var(--bw) solid var(--line); font: 900 1.5rem/1 sans-serif; box-shadow: 3px 3px 0 var(--shadow); transform: rotate(-6deg);
}
.notif-card:not(.unread) a { opacity: .88; }
@media (max-width: 480px) { .notif-card a { grid-template-columns: auto 1fr; } .notif-check { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; font-size: 1.1rem; } .notif-card a { position: relative; } }
.btn-steam { background: #1b2838; color: #fff; }
.btn-steam:hover { background: #2a475e; }

/* ---- avatar world: characters, creator, rooms ---- */
.doll { position: relative; display: inline-block; aspect-ratio: 440 / 700; }
.doll-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
/* aura effects are drawn on an 880x1000 frame with the 440x700 canvas in its middle, so the ring reaches past the doll */
.doll-layer[src*="-aura.svg"], .doll-layer[src*="/worn/weapon-"], .doll-layer[src*="-wide.webp"] { inset: auto; left: -50%; top: -21.43%; width: 200%; height: 142.86%; }
.doll-xl { width: min(270px, 70vw); }
.doll-md { width: 120px; }
.doll-stage { width: 100%; filter: drop-shadow(0 4px 0 rgba(42, 29, 18, .25)); }

.world-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cc-grid { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(260px, 1.2fr); gap: 20px; align-items: start; margin-top: 12px; }
.cc-stage { display: grid; justify-items: center; gap: 6px; padding: 18px 12px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 4px 4px 0 var(--shadow); }
/* the floor: an oval under the feet that scales with the doll (a circle on the card was cut off by its edge) */
.cc-stage .doll { isolation: isolate; }
.cc-stage .doll::before { content: ""; position: absolute; left: 16%; right: 16%; bottom: 0; height: 9%; border-radius: 50%; background: var(--mint); z-index: -1; }
.cc-name { font-weight: 900; }
.cc-form { gap: 10px; }
.cc-row { display: grid; grid-template-columns: 5.5em 44px 1fr 44px; gap: 6px; align-items: center; }
.cc-label { font-weight: 800; }
.cc-select { min-height: var(--tap); }
.cc-step { min-width: 44px; padding: 0; font-size: 1.3rem; }
.cc-sex { display: flex; gap: 10px; align-items: center; border: 0; padding: 0; margin: 0; }
.cc-sex legend { font-weight: 800; float: left; margin-right: 10px; }
.cc-sex .chip { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border: var(--bw) solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; }
.cc-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .cc-grid { grid-template-columns: 1fr; } }

.room-list { list-style: none; padding: 0; margin: 12px 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.room-card { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; padding: 10px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; text-decoration: none; box-shadow: 4px 4px 0 var(--shadow); }
.room-card:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--shadow); }
.room-thumb { width: 112px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); border: 2px solid var(--line); }
.room-info { display: grid; gap: 4px; min-width: 0; }
.room-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-picker { border: 0; padding: 0; margin: 0; }
.scene-picker legend { font-weight: 800; margin-bottom: 8px; }
.scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.scene-opt { position: relative; display: grid; gap: 4px; cursor: pointer; font-size: .85rem; font-weight: 700; text-align: center; }
.scene-opt input { position: absolute; opacity: 0; }
.scene-opt img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); border: var(--bw) solid var(--line); }
.scene-opt input:checked + img { outline: 4px solid var(--orange); outline-offset: 2px; }
.scene-opt input:focus-visible + img { outline: 3px dashed var(--orange); outline-offset: 3px; }

.stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: var(--bw) solid var(--line); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--shadow); background: var(--surface-2); margin: 12px 0; }
.stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-people { position: absolute; inset: 0; }
.actor { position: absolute; width: 14%; display: grid; justify-items: center; transform: translateX(-50%); transition: left .4s ease; }
.actor-name { margin-top: -4px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 250, 240, .92); color: #2a1d12; border: 2px solid #2a1d12; font-size: .72rem; font-weight: 800; white-space: nowrap; max-width: 160%; overflow: hidden; text-overflow: ellipsis; }
.bubble { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; width: max-content; max-width: 220%; padding: 4px 10px; border-radius: 14px; background: #fffaf0; color: #2a1d12; border: 2px solid #2a1d12; box-shadow: 2px 2px 0 #2a1d12; font-size: .8rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; z-index: 3; }
.bubble.hidden { display: none; }
/* 12 places: a back row (higher, behind) and a front row */
.slot-0 { left: 50%; bottom: 4%; z-index: 2; } .slot-1 { left: 36%; bottom: 4%; z-index: 2; } .slot-2 { left: 64%; bottom: 4%; z-index: 2; }
.slot-3 { left: 22%; bottom: 4%; z-index: 2; } .slot-4 { left: 78%; bottom: 4%; z-index: 2; } .slot-5 { left: 8%; bottom: 4%; z-index: 2; }
.slot-6 { left: 92%; bottom: 4%; z-index: 2; } .slot-7 { left: 43%; bottom: 17%; z-index: 1; } .slot-8 { left: 57%; bottom: 17%; z-index: 1; }
.slot-9 { left: 29%; bottom: 17%; z-index: 1; } .slot-10 { left: 71%; bottom: 17%; z-index: 1; } .slot-11 { left: 15%; bottom: 17%; z-index: 1; }
.slot-7 .doll, .slot-8 .doll, .slot-9 .doll, .slot-10 .doll, .slot-11 .doll { transform: scale(.88); transform-origin: bottom center; }
@media (max-width: 640px) {
  .stage { aspect-ratio: 4 / 3; }
  .actor { width: 21%; }
  .actor-name { font-size: .62rem; }
  .bubble { font-size: .7rem; max-width: 260%; }
}

.chat { display: grid; gap: 10px; }
.chat-log { list-style: none; margin: 0; padding: 10px 12px; max-height: 240px; overflow-y: auto; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); display: grid; gap: 4px; }
.chat-log li { overflow-wrap: anywhere; }
.chat-form { display: flex; gap: 8px; }
.chat-form input { flex: 1; min-width: 0; }

/* room page: stage + chat on the left, open rooms on the right; ?popup=1 is the chat window */
.room-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
.room-side { display: grid; gap: 10px; position: sticky; top: 76px; }
.room-side h2 { margin: 0; font-size: 1rem; }
.side-rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 60vh; overflow-y: auto; }
.side-room { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; padding: 6px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: inherit; text-decoration: none; }
.side-room img { width: 64px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; }
.side-room span { display: grid; min-width: 0; font-size: .85rem; }
.side-room strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-room.current { background: var(--mustard); color: #2a1d12; box-shadow: 3px 3px 0 var(--shadow); }
.side-new { justify-self: start; }
@media (max-width: 860px) { .room-layout { grid-template-columns: 1fr; } .room-side { position: static; } }
body.bare #main { max-width: none; padding: 10px 12px; }
.room-popup .world-head h1 { font-size: 1.2rem; margin: 0; }
.room-popup .stage { margin: 8px 0; }
.room-popup .chat-log { max-height: 28vh; }
.room-popup .room-side { top: 10px; }
.room-popup .side-rooms { max-height: 70vh; }
@media (max-width: 760px) { .room-popup .room-layout { grid-template-columns: 1fr; } }

/* Phone header: one tidy row of icons (the plaza icon made it wrap); the Tailscale badge is DEV-only noise. */
@media (max-width: 480px) {
  .header-inner { gap: 4px; }
  .header-actions { gap: 10px; flex-wrap: nowrap; }
  .header-actions .badge-ts { display: none; }
  .nav-rank, .bell { width: 34px; height: 34px; font-size: 1.05rem; }
  .theme-toggle { min-width: 34px; }
  .lang-switch { min-height: 32px; padding: 0 8px; }
  .brand-tagline { display: none; }
  /* room cards: smaller thumbnail, meta on its own lines instead of breaking mid-phrase */
  .room-card { grid-template-columns: 88px 1fr; gap: 10px; }
  .room-thumb { width: 88px; }
}
.room-info .muted { display: flex; flex-wrap: wrap; column-gap: 6px; }
.nowrap { white-space: nowrap; }

/* world: levels, chat lines with the profile icon, walking */
.lv { display: inline-block; padding: 0 5px; border-radius: 6px; background: var(--mustard); color: #2a1d12; font: 800 .68rem/1.5 var(--mono); }
.actor-name .lv { font-size: .6rem; margin-right: 2px; }
.chat-log li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; padding: 5px 2px; } /* room for a framed picture's glow between lines */
.chat-who { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.chat-av { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--line); background: var(--surface-2); object-fit: cover; }
.chat-text { padding-top: 3px; }
.actor { transition: left 1.1s linear; }
.actor.me .actor-name { background: var(--mustard); }
.actor.face-left .doll { transform: scaleX(-1); }
.actor.walking .doll { animation: doll-walk .28s ease-in-out infinite alternate; }
.actor.face-left.walking .doll { animation-name: doll-walk-left; }
@keyframes doll-walk { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-5%) rotate(2deg); } }
@keyframes doll-walk-left { from { transform: scaleX(-1) translateY(0) rotate(-2deg); } to { transform: scaleX(-1) translateY(-5%) rotate(2deg); } }
.stage { cursor: pointer; }
.move-hint { margin: -4px 0 8px; }
@media (prefers-reduced-motion: reduce) { .actor { transition: none; } .actor.walking .doll { animation: none; } }
@media (max-width: 480px) {
  .brand-text { display: none; }
  .header-actions form .btn { padding: 0 8px; white-space: nowrap; }
  .chat-log li { grid-template-columns: 1fr; gap: 2px; }
}
.side-room.current .muted { color: #5a4630; }

/* creator: 남/여 chips without the native radio; phone keeps the preview pinned while choosing parts */
.cc-sex .chip input { position: absolute; opacity: 0; pointer-events: none; }
.cc-sex .chip:has(input:checked) { background: var(--orange); color: var(--accent-text); box-shadow: 2px 2px 0 var(--shadow); }
.cc-sex .chip:has(input:focus-visible) { outline: 3px dashed var(--orange); outline-offset: 2px; }
.cc-sex .chip { position: relative; font-weight: 800; }
@media (max-width: 640px) {
  .cc-stage { position: sticky; top: 64px; z-index: 5; padding: 8px; grid-template-columns: auto; }
  .cc-stage .doll-xl { width: 120px; }
  .cc-name { font-size: .85rem; }
  .cc-row { grid-template-columns: 4.2em 40px 1fr 40px; }
}

/* plaza: my character card (entry to the creator) */
.my-char-card { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; margin: 14px 0 18px; padding: 10px 14px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--mustard); color: #2a1d12; text-decoration: none; box-shadow: 4px 4px 0 var(--shadow); }
.my-char-card:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--shadow); }
.doll-card { width: 72px; }
.my-char-text { display: grid; gap: 2px; min-width: 0; }
.my-char-text .muted { color: #5a4630; font-size: .85rem; }
@media (max-width: 480px) { .my-char-card { grid-template-columns: 60px 1fr; } .doll-card { width: 60px; } .my-char-card .btn { grid-column: 1 / -1; justify-self: stretch; text-align: center; } }

/* brand mark: the drop mascot app icon */
.brand-mark { overflow: hidden; padding: 0; background: #f2622e; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* character card on the profile + gear page */
.char-card { margin: 0 0 22px; padding: 14px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 4px 4px 0 var(--shadow); }
.char-card h2 { margin: 0 0 8px; font-size: 1.1rem; }
.char-card-body { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; }
.doll-card-lg { width: 120px; }
.char-card-side { display: grid; gap: 12px; min-width: 0; }
.slot-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.slot-mini li { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border: 2px dashed var(--line); border-radius: 10px; font-size: 1.1rem; opacity: .75; }
.slot-mini li.on { border-style: solid; background: var(--mustard); opacity: 1; }
.slot-mini img { width: 26px; height: 26px; object-fit: contain; }
/* the whole slot is the control: take a worn item off, or go to the empty slot's shop */
.slot-mini form { display: contents; }
.slot-act { display: grid; justify-items: center; gap: 2px; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.slot-mini li:has(.slot-act:hover), .slot-mini li:has(.slot-act:focus-visible) { opacity: 1; transform: translateY(-1px); }
.slot-act:focus-visible { outline: 3px dashed var(--orange); outline-offset: 4px; border-radius: 8px; }
.slot-mini small { font-size: .62rem; font-weight: 800; white-space: nowrap; }
.char-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gear-grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.3fr); gap: 20px; align-items: start; margin: 12px 0 20px; }
.slot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.slot-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; border: 2px dashed var(--line); border-radius: var(--radius-sm); }
.slot-row.on { border-style: solid; background: var(--surface); }
.slot-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--surface-2); font-size: 1.3rem; }
.slot-icon img { width: 40px; height: 40px; object-fit: contain; }
.slot-text { display: grid; min-width: 0; }
.slot-text small { color: var(--muted); font-weight: 800; }
.slot-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.inv-item { display: grid; justify-items: center; gap: 4px; padding: 10px 8px; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-align: center; }
.inv-item img { width: 64px; height: 64px; object-fit: contain; }
.inv-item.worn { outline: 3px solid var(--orange); outline-offset: 2px; }
.inv-name { font-weight: 800; font-size: .85rem; }
@media (max-width: 640px) {
  .gear-grid { grid-template-columns: 1fr; }
  .char-card-body { grid-template-columns: 84px 1fr; }
  .doll-card-lg { width: 84px; }
}
@media (max-width: 640px) { .gear-grid .cc-stage { position: static; } .slot-list { grid-template-columns: 1fr 1fr; } .slot-row { grid-template-columns: 36px 1fr; padding: 6px; } .slot-row form { grid-column: 1 / -1; } .slot-icon { width: 36px; height: 36px; } }

/* paper doll: slots around the character (RPG character sheet) */
.paperdoll { overflow: clip; display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px; grid-template-rows: repeat(4, auto) auto; gap: 10px 12px; align-items: center; margin: 14px 0 22px; padding: 14px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: radial-gradient(ellipse at 50% 78%, rgba(124, 201, 160, .55) 0 26%, transparent 27%), var(--surface); box-shadow: 4px 4px 0 var(--shadow); }
.pd-doll { grid-column: 2; grid-row: 1 / span 4; display: grid; justify-items: center; gap: 4px; }
.doll-pd { width: min(240px, 100%); }
/* a held weapon reaches out past the doll on its left (the weapon hand): on a phone the doll stands a little to the right, clear of the slots */
@media (max-width: 480px) { .doll-pd { left: 10px; width: min(240px, 94%); } }
.pd-l1 { grid-column: 1; grid-row: 1; } .pd-l2 { grid-column: 1; grid-row: 2; } .pd-l3 { grid-column: 1; grid-row: 3; }
.pd-r1 { grid-column: 3; grid-row: 1; } .pd-r2 { grid-column: 3; grid-row: 2; } .pd-r3 { grid-column: 3; grid-row: 3; } .pd-r4 { grid-column: 3; grid-row: 4; }
.pd-l4 { grid-column: 1; grid-row: 4; }
/* the two effect slots side by side under the character: aura, swing */
.pd-b1, .pd-b2 { grid-column: 2; grid-row: 5; justify-self: center; }
.pd-b1 { transform: translateX(-56%); } .pd-b2 { transform: translateX(56%); }
.pd-slot { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; }
.pd-box { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; border: var(--bw) dashed var(--line); background: var(--surface-2); }
.pd-slot.on .pd-box { border-style: solid; background: var(--mustard); box-shadow: 3px 3px 0 var(--shadow); }
.pd-box img { width: 54px; height: 54px; object-fit: contain; }
.pd-ph { font-size: 1.5rem; opacity: .45; filter: grayscale(.6); }
.pd-slot small { font-size: .7rem; font-weight: 800; color: var(--muted); }
.pd-off { position: absolute; top: -6px; right: -2px; }
.pd-off button { width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); color: var(--text); font-size: .7rem; font-weight: 900; cursor: pointer; }
@media (max-width: 480px) {
  .paperdoll { grid-template-columns: 62px minmax(0, 1fr) 62px; gap: 8px 6px; padding: 10px 8px; }
  .pd-box { width: 54px; height: 54px; border-radius: 12px; }
  .pd-box img { width: 46px; height: 46px; }
}
.cc-price { margin: 6px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--sky); color: #2a1d12; font-weight: 800; font-size: .9rem; }
.cc-price.free { background: var(--mint); }
/* no background equipped: a quiet stage — a floor shadow under the feet, soft mustard rays fading out behind */
.paperdoll { background:
  radial-gradient(ellipse 78px 10px at 50% var(--pd-floor, 66.5%), rgba(20, 12, 6, .3) 0 60%, transparent 100%),
  radial-gradient(ellipse 112px 19px at 50% var(--pd-floor, 66.5%), color-mix(in srgb, var(--mustard) 36%, var(--surface)) 0 96%, transparent 100%),
  radial-gradient(circle at 50% 46%, transparent 0 80px, var(--surface) 215px),
  repeating-conic-gradient(from 7.5deg at 50% 46%, color-mix(in srgb, var(--mustard) 24%, transparent) 0 15deg, transparent 15deg 30deg),
  var(--surface); }

/* ---- room v2: the whole map at its own shape, small characters; people on the left, rooms on the right ---- */
.wrap-wide { max-width: 1440px; }
.room-head { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; margin: 6px 0 10px; }
.room-head h1 { margin: 0; font-size: 1.5rem; }
.room-head .js-popup { margin-left: auto; }
.room-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr) 250px; gap: 16px; align-items: start; }
.stage { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; aspect-ratio: auto; line-height: 0; overflow: hidden; }
.stage-bg { position: static; display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; }
.actor { width: 6.5%; }
.actor-name { font-size: .64rem; padding: 0 6px; border-width: 1.5px; }
.actor-name .lv { font-size: .54rem; }
.bubble { font-size: .74rem; line-height: 1.3; }
.room-people { position: sticky; top: 76px; display: grid; gap: 8px; padding: 10px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); }
.room-people h2, .room-side h2 { margin: 0; font-size: .95rem; }
.people-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: calc(100vh - 220px); overflow-y: auto; }
.people-list li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .85rem; }
.people-list li strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-list li.me strong { color: var(--orange); }
.chat-log.empty-log { display: none; }
.side-back { font-size: .85rem; }
.rooms-tab, .rooms-scrim { display: none; }

@media (max-width: 1000px) {
  .room-layout { grid-template-columns: 1fr; }
  /* who is here: one scrolling row of chips above the map */
  .room-people { position: static; grid-template-columns: auto 1fr; align-items: center; padding: 6px 10px; }
  .people-list { display: flex; gap: 10px; overflow-x: auto; max-height: none; }
  .people-list li { flex: 0 0 auto; }
  /* rooms: a drawer that slides in from the right edge */
  .room-side { position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 84vw); z-index: 40; padding: 16px; overflow-y: auto; background: var(--bg); border-left: var(--bw) solid var(--line); box-shadow: -6px 0 0 rgba(0, 0, 0, .15); transform: translateX(105%); transition: transform .25s ease; }
  .room.rooms-open .room-side { transform: none; }
  .side-rooms { max-height: none; }
  .rooms-tab { display: block; position: fixed; right: 0; top: 45%; z-index: 30; writing-mode: vertical-rl; padding: 12px 6px; border: var(--bw) solid var(--line); border-right: 0; border-radius: 12px 0 0 12px; background: var(--mustard); color: #2a1d12; font-weight: 900; font-size: .85rem; box-shadow: -3px 3px 0 var(--shadow); cursor: pointer; }
  .room.rooms-open .rooms-tab { display: none; }
  .rooms-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .35); }
  .actor { width: 9%; }
}
@media (max-width: 1000px) and (orientation: landscape) {
  /* phone held sideways: the map fills the height, chat sits beside it */
  .stage-bg { max-height: calc(100vh - 24px); }
}
@media (max-width: 480px) {
  .room-head h1 { font-size: 1.2rem; }
  .actor { width: 11%; }
  .actor-name { font-size: .55rem; }
  .bubble { font-size: .66rem; max-width: 300%; }
}
@media (prefers-reduced-motion: reduce) { .room-side { transition: none; } }
.move-hint { margin: 8px 0; }
@media (max-width: 1000px) {
  .room-side { align-content: start; }
  .rooms-tab { top: auto; bottom: 18%; padding: 10px 5px; font-size: .78rem; }
}
@media (max-width: 480px) { .actor-name .lv { display: none; } }
@media (max-width: 1000px) { .rooms-tab { top: 50%; bottom: auto; transform: translateY(-50%); } }
@media (max-width: 1000px) and (orientation: landscape) { .stage-bg { max-height: calc(100vh - 84px); } }
.notif-sub { margin: 18px 0 8px; font-size: 1rem; }
.chat-text .at { color: var(--orange); font-weight: 800; }
.chat-log li.mention { background: rgba(227, 169, 47, .25); border-radius: 8px; }
.notify-btn { justify-self: start; }
/* header icons (painted set in public/icons/ui) */
.ui-ico { display: block; width: 26px; height: 26px; object-fit: contain; pointer-events: none; }
.theme-toggle .ui-ico, .nav-rank .ui-ico, .bell .ui-ico { margin: auto; }
.bell { position: relative; }
@media (max-width: 480px) { .ui-ico { width: 23px; height: 23px; } }
.nav-rank[href="/world"] .ui-ico { width: 30px; height: 30px; }
.btn-boom { background: var(--danger); color: #fff; }
.room-head form { margin: 0; }
.host-note { margin: -4px 0 8px; font-size: .8rem; }
/* jump: the whole character (bubble and name follow) hops up and lands with a squash */
.actor.jumping .doll { animation: doll-jump .55s cubic-bezier(.3, .7, .4, 1); }
.actor.face-left.jumping .doll { animation-name: doll-jump-left; }
@keyframes doll-jump { 0% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.06, .92); } 50% { transform: translateY(-38%) scale(.96, 1.05); } 85% { transform: translateY(0) scale(1.05, .94); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes doll-jump-left { 0% { transform: scaleX(-1) translateY(0); } 15% { transform: scaleX(-1.06) scaleY(.92); } 50% { transform: scaleX(-1) translateY(-38%); } 85% { transform: scaleX(-1.05) scaleY(.94); } 100% { transform: scaleX(-1) translateY(0); } }
.actor.me .doll { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .actor.jumping .doll { animation: none; } }

/* gear shop + crafting */
.dp-chip { padding: 4px 12px; border-radius: 999px; border: 2px solid var(--line); background: var(--sky); color: #2a1d12; font-weight: 900; font-family: var(--mono); }
.shop-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.shop-nav a { padding: 6px 12px; border-radius: 999px; border: 2px solid var(--line); color: inherit; text-decoration: none; font-weight: 800; font-size: .9rem; }
.shop-nav a[aria-current] { background: var(--orange); color: var(--accent-text); }
.slot-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; }
.slot-tab { flex: 0 0 auto; padding: 6px 10px; border-radius: 12px; border: 2px dashed var(--line); color: inherit; text-decoration: none; font-weight: 800; font-size: .85rem; white-space: nowrap; }
.slot-tab.on { border-style: solid; background: var(--mustard); color: #2a1d12; }
.shop-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.shop-item { display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-align: center; box-shadow: 3px 3px 0 var(--shadow); }
.shop-item img, .recipe-out img { width: 88px; height: 88px; object-fit: contain; }
.rarity-badge { font: 800 .62rem/1.6 var(--mono); padding: 0 6px; border-radius: 6px; background: var(--surface-2); }
.rarity-uncommon .rarity-badge { background: var(--mint); color: #2a1d12; }
.rarity-rare .rarity-badge { background: var(--sky); color: #2a1d12; }
.rarity-epic .rarity-badge { background: #b48ce0; color: #2a1d12; }
.rarity-legendary .rarity-badge { background: var(--orange); color: #fff; }
/* a weapon's element: a small tag in its own colour (the same palette as its swing effect) */
.greatsword-badge { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.element-badge { display: inline-flex; align-items: center; gap: 4px; font: 800 .62rem/1.6 var(--mono); padding: 0 6px; border-radius: 6px; background: var(--surface-2); color: var(--ink); }
.element-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c2); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.shop-item.rarity-epic { box-shadow: 3px 3px 0 var(--shadow), 0 0 0 3px rgba(180, 140, 224, .35); }
.shop-item.rarity-legendary, .recipe.rarity-legendary .recipe-out { box-shadow: 0 0 14px rgba(242, 98, 46, .45); }
.recipe-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.recipe { display: grid; grid-template-columns: 1fr auto minmax(150px, auto); gap: 10px; align-items: center; padding: 12px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); }
.recipe-inputs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.recipe-in { position: relative; display: grid; justify-items: center; width: 84px; text-align: center; opacity: .55; }
.recipe-in.have { opacity: 1; }
.recipe-in img { width: 64px; height: 64px; object-fit: contain; }
.recipe-in small { font-size: .68rem; font-weight: 700; }
.recipe-in em { position: absolute; top: 0; right: 0; font-style: normal; font-size: .6rem; font-weight: 900; background: var(--danger); color: #fff; padding: 0 4px; border-radius: 6px; }
.plus, .arrow { font-weight: 900; font-size: 1.2rem; }
.recipe-dp { font-weight: 900; font-family: var(--mono); }
.recipe-out { display: grid; justify-items: center; gap: 4px; padding: 8px; border-radius: var(--radius-sm); text-align: center; }
@media (max-width: 640px) { .recipe { grid-template-columns: 1fr; } .arrow { transform: rotate(90deg); justify-self: center; } }

/* header: bell + profile + menu button; the rest in a dropdown panel */
.site-header { position: sticky; }
.header-inner { position: relative; }
.menu-btn { display: inline-grid; place-content: center; gap: 4px; width: 42px; height: 42px; padding: 0; border-radius: 12px; border: var(--bw) solid var(--line); background: var(--surface); box-shadow: 2px 2px 0 var(--shadow); cursor: pointer; }
.menu-btn span { display: block; width: 18px; height: 3px; border-radius: 2px; background: var(--text); transition: transform .2s ease, opacity .2s ease; }
.menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity: 0; }
.menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Positioned against the full-width header (%, not 100vw, so a desktop scrollbar does not shift it): flush with the
   720px column's right gutter on wide screens, and on phones stretched to equal 16px gutters on both sides. */
.site-menu { position: absolute; right: max(16px, calc((100% - 720px) / 2 + 16px)); top: calc(100% + 6px); z-index: 50; width: min(340px, calc(100% - 32px)); padding: 12px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 5px 5px 0 var(--shadow);
  /* folded: clipped to its top edge; .is-open unfolds it downward (the negative insets keep the offset shadow) */
  /* closing folds back up after the tiles have crumbled (menu-fx.js reads the same timing for its seam) */
  clip-path: inset(0 0 100% 0); transition: clip-path .2s cubic-bezier(.5, 0, .9, .4) .06s;
  --menu-ring: #ff7a2f; --menu-press: #ffd9a0; --menu-edge: #2a1d14; }
/* open timing is mirrored as OPEN_MS / OPEN_CURVE at the top of public/menu-fx.js; change both together */
.site-menu.is-open { clip-path: inset(-4px -10px -10px -4px); transition: clip-path .72s cubic-bezier(.16, .84, .3, 1); }
:root[data-theme="dark"] .site-menu { --menu-ring: #ffa040; --menu-press: #4a3020; --menu-edge: #0f0b08; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-menu { --menu-ring: #ffa040; --menu-press: #4a3020; --menu-edge: #0f0b08; } }
.site-menu[hidden] { display: none; }
/* a worn screen background skins the menu panel: the art under a theme veil, labels on small plates so they stay readable */
.site-menu.has-art { background: var(--surface); }
.menu-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.menu-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.menu-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 248, 235, .28), rgba(255, 248, 235, .5)); }
:root[data-theme="dark"] .menu-art::after { background: linear-gradient(rgba(14, 10, 8, .38), rgba(14, 10, 8, .62)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .menu-art::after { background: linear-gradient(rgba(14, 10, 8, .38), rgba(14, 10, 8, .62)); } }
.site-menu.has-art .menu-grid, .site-menu.has-art .menu-lang, .site-menu.has-art .menu-foot { position: relative; z-index: 1; }
.site-menu.has-art .menu-grid a > span:last-child { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 84%, transparent); }
.menu-fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
/* Opening: tiles hidden at once (no transition), then each pops in when its ash has gathered, with an ember ring;
   its label is faintly readable from the first frame and inks in 60 ms after the icon. */
.site-menu.menu-fx .menu-tile { opacity: 0; filter: blur(3px) grayscale(.7); transform: scale(.84); transition: none; }
.site-menu.menu-fx .menu-tile.is-formed { opacity: 1; filter: none; transform: none; transition: opacity .55s ease-out, filter .65s ease-out, transform .65s cubic-bezier(.2, .9, .3, 1.25); }
.site-menu.menu-fx .menu-tile.is-formed::after { animation: menu-ring .6s cubic-bezier(.2, .7, .3, 1) .24s both; } /* starts once the tile is mostly opaque, or its fade-in swallows the flash */
@keyframes menu-ring { from { opacity: .9; transform: scale(.9); } to { opacity: 0; transform: scale(1.14); } }
.site-menu.menu-fx .menu-tile + span { opacity: .3; transform: translateY(4px); transition: none; }
.site-menu.menu-fx .menu-tile.is-formed + span { opacity: 1; transform: none; transition: opacity .42s ease-out .14s, transform .42s cubic-bezier(.16, .84, .3, 1) .14s; }
.site-menu.menu-fx .menu-lang, .site-menu.menu-fx .menu-foot { opacity: 0; transform: translateY(6px); transition: none; }
.site-menu.menu-fx .menu-lang.is-formed, .site-menu.menu-fx .menu-foot.is-formed { opacity: 1; transform: none; transition: opacity .45s ease-out, transform .45s cubic-bezier(.16, .84, .3, 1); }
/* Closing: tiles crumble to grey ash bottom row first, then the sheet folds up */
.site-menu.is-closing .menu-tile, .site-menu.is-closing .menu-tile + span { opacity: 0; filter: grayscale(1) brightness(.8); transform: scale(.92); transition: opacity .14s ease-in, filter .14s ease-in, transform .14s ease-in; transition-delay: 60ms; }
.site-menu.is-closing .menu-grid li:nth-child(n+4) > *, .site-menu.is-closing .menu-grid li:nth-child(n+4) a > * { transition-delay: 40ms; }
.site-menu.is-closing .menu-grid li:nth-child(n+7) > *, .site-menu.is-closing .menu-grid li:nth-child(n+7) a > * { transition-delay: 20ms; }
.site-menu.is-closing .menu-grid li:nth-child(n+10) > *, .site-menu.is-closing .menu-grid li:nth-child(n+10) a > * { transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) {
  .site-menu, .site-menu.is-open { clip-path: none; opacity: 0; transition: opacity .15s linear; }
  .site-menu.is-open { opacity: 1; }
  .site-menu .menu-tile::after, .site-menu.is-open .menu-grid li.is-raid .menu-tile::before { animation: none; }
  .site-menu .menu-tile + span, .site-menu .menu-cap, .site-menu .menu-lang, .site-menu .menu-foot { opacity: 1; transform: none; }
}
.menu-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* Six half-columns, each tile spanning two: a short last row (11 tiles today) sits centred instead of hanging left. */
.menu-grid { grid-template-columns: repeat(6, 1fr); }
.menu-grid > li { grid-column: span 2; }
.menu-grid > li:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
.menu-grid > li:last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
/* The header is a sticky stacking context (z-index 10), so the panel's own z-index cannot lift it over the roaming
   pet (fixed, z-index 30) or the chat launchers; while the menu is open the whole header goes above them. */
body.site-menu-open .site-header { z-index: 65; }
.menu-grid li { display: grid; justify-items: center; gap: 4px; text-align: center; }
.menu-grid a { display: grid; justify-items: center; gap: 4px; width: 100%; padding: 10px 4px; border-radius: 14px; border: 2px solid transparent; background: none; color: var(--text); text-decoration: none; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.menu-grid a:hover { background: var(--surface-2); border-color: var(--line); }
.menu-grid .ui-ico { width: 34px; height: 34px; }
.menu-emoji { display: grid; place-items: center; width: 34px; height: 34px; font-size: 1.6rem; line-height: 1; }
.menu-cap { font-size: .78rem; font-weight: 800; margin-top: -8px; }
.lang-pill { display: grid; place-items: center; height: 34px; padding: 0 10px; border-radius: 999px; border: 2px solid var(--line); background: var(--sky); color: var(--on-color); font: 800 .8rem var(--mono); }
.menu-foot { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 10px; border-top: 2px dashed var(--line); }
@media (max-width: 480px) { .site-menu { left: 16px; right: 16px; width: auto; } }
.app-hash summary { cursor: pointer; } .app-hash code { display: block; margin-top: 6px; overflow-wrap: anywhere; }

/* achievements */
.ach-total, .ach-bar { height: 10px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface-2); overflow: hidden; margin: 6px 0 12px; }
.ach-bar { height: 8px; margin: 4px 0 2px; }
.ach-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--mustard), var(--orange)); }
.w-0 { width: 0%; } .w-5 { width: 5%; } .w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; } .w-25 { width: 25%; } .w-30 { width: 30%; } .w-35 { width: 35%; } .w-40 { width: 40%; } .w-45 { width: 45%; } .w-50 { width: 50%; } .w-55 { width: 55%; } .w-60 { width: 60%; } .w-65 { width: 65%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-85 { width: 85%; } .w-90 { width: 90%; } .w-95 { width: 95%; } .w-100 { width: 100%; } 
.ach-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ach { position: relative; display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 10px; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); opacity: .72; }
.ach.got { opacity: 1; box-shadow: 3px 3px 0 var(--shadow); }
.ach.fresh { outline: 3px solid var(--orange); outline-offset: 2px; }
.ach-badge { width: 56px; height: 56px; object-fit: contain; }
.ach-medal { display: grid; place-items: center; font-size: 2rem; border-radius: 50%; background: var(--surface-2); filter: grayscale(.8); }
.ach.got .ach-medal { filter: none; }
.ach:not(.got) img.ach-badge { filter: grayscale(1) opacity(.55); }
.ach-main { min-width: 0; }
.ach-main strong { font-size: .92rem; }
.ach-main p { margin: 2px 0 0; font-size: .8rem; }
.ach-done { color: var(--mint); font-weight: 800; }
.ach-reward { align-self: start; font: 800 .7rem var(--mono); padding: 2px 6px; border-radius: 8px; background: var(--sky); color: #2a1d12; white-space: nowrap; }
.tier-gold.got { box-shadow: 3px 3px 0 var(--shadow), 0 0 10px rgba(227, 169, 47, .5); }
.tier-platinum.got, .tier-legend.got { box-shadow: 3px 3px 0 var(--shadow), 0 0 14px rgba(108, 182, 221, .6); }
@keyframes ach-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- chat window inside the site (dock) ---- */
.dock-launcher { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; border: var(--bw) solid var(--line); background: var(--orange); color: #fff; font-size: 1.6rem; box-shadow: 4px 4px 0 var(--shadow); cursor: pointer; }
.dock-launcher.blink, .dock-tab.blink { animation: dock-blink 1s steps(2, start) infinite; }
@keyframes dock-blink { 50% { background: var(--mustard); color: #2a1d12; } }
.chat-dock { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(860px, calc(100vw - 32px)); height: min(620px, calc(100vh - 90px)); display: grid; grid-template-rows: auto auto 1fr; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--bg); box-shadow: 6px 6px 0 var(--shadow); overflow: hidden; }
.chat-dock[hidden] { display: none; }
.dock-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: var(--bw) solid var(--line); background: var(--surface-2); }
.dock-tabs { display: flex; gap: 4px; overflow-x: auto; flex: 1; min-width: 0; }
.dock-tab { display: inline-flex; align-items: center; gap: 6px; max-width: 180px; padding: 6px 8px 6px 12px; border-radius: 12px 12px 0 0; border: 2px solid var(--line); border-bottom: 0; background: var(--surface); color: var(--text); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.dock-tab.on { background: var(--mustard); color: #2a1d12; }
.dock-tab.closed { opacity: .5; text-decoration: line-through; }
.dock-tab-name { overflow: hidden; text-overflow: ellipsis; }
.dock-tab-x { padding: 0 4px; border-radius: 6px; font-weight: 900; }
.dock-tab-x:hover { background: rgba(0, 0, 0, .12); }
.dock-plus, .dock-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); color: var(--text); font-size: 1rem; font-weight: 900; cursor: pointer; }
.dock-plus { background: var(--orange); color: #fff; font-size: 1.2rem; }
.dock-icon.on { background: var(--mustard); }
.dock-picker { padding: 10px; border-bottom: 2px dashed var(--line); background: var(--surface); max-height: 40%; overflow-y: auto; }
.dock-picker-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.dock-picker .side-room { width: 100%; text-align: left; cursor: pointer; font: inherit; }
.dock-body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; min-height: 0; }
.chat-dock.no-friends .dock-body { grid-template-columns: minmax(0, 1fr); }
.chat-dock.no-friends .dock-friends { display: none; }
.dock-main { position: relative; min-height: 0; overflow: hidden; }
.dock-room { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; height: 100%; padding: 8px; min-height: 0; }
.dock-room[hidden] { display: none; }
.dock-people { display: flex; gap: 8px; overflow-x: auto; font-size: .78rem; }
.dock-person { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; cursor: pointer; }
.dock-person.me { cursor: default; }
.dock-person.me strong { color: var(--orange); }
.dock-stage { width: 100%; margin: 0; border-width: 2px; box-shadow: none; }
.dock-stage .stage-bg { width: 100%; max-height: none; }
.dock-room .chat-log { max-height: none; min-height: 60px; overflow-y: auto; margin: 0; }
.dock-room .chat-log li { grid-template-columns: auto 1fr; font-size: .85rem; }
.chat-system { color: var(--muted); font-style: italic; }
.dock-empty { display: grid; place-content: center; justify-items: center; gap: 10px; height: 100%; color: var(--muted); }
.dock-empty[hidden] { display: none; }
.dock-friends { display: grid; grid-template-rows: auto auto 1fr; gap: 8px; padding: 8px; border-left: var(--bw) solid var(--line); background: var(--surface); min-height: 0; }
.dock-friend-add { display: flex; gap: 4px; }
.dock-friend-add input { flex: 1; min-width: 0; min-height: 34px; padding: 4px 8px; font-size: .8rem; }
.dock-friend-list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 6px; overflow-y: auto; font-size: .8rem; }
.dock-friend-list li { display: grid; grid-template-columns: 8px 26px auto 1fr auto auto; gap: 5px; align-items: center; }
.dock-friend-list li.muted { display: block; }
.dock-friend-list .dot { width: 8px; height: 8px; border-radius: 50%; background: #b9a78c; }
.dock-friend-list li.on .dot { background: #3fbf6f; box-shadow: 0 0 6px #3fbf6f; }
.f-txt { display: grid; min-width: 0; }
.f-txt strong, .f-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-del { border: 0; background: none; color: var(--muted); cursor: pointer; font-weight: 900; }
.dock-stage .actor { width: 9%; }
@media (max-width: 760px) {
  /* phones: the chat window covers the screen; friends slide over it from the right */
  .chat-dock { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; box-shadow: none; }
  .dock-body { grid-template-columns: 1fr; }
  .dock-friends { position: absolute; inset: 0; z-index: 3; border-left: 0; } /* covers the room; 👥 closes it again */
  .dock-main { position: static; }
  .dock-body { position: relative; }
  .chat-dock:not(.no-friends) .dock-friends { display: grid; }
  .dock-stage .actor { width: 13%; }
  .dock-launcher { right: 12px; bottom: 12px; }
  body:has(.chat-dock:not([hidden])) .msg-launcher { display: none; } /* one 👥 at a time on a phone */
}
@media (prefers-reduced-motion: reduce) { .dock-launcher.blink, .dock-tab.blink { animation: none; outline: 3px solid var(--orange); } }
.dock-bar { grid-row: 1; } .dock-picker { grid-row: 2; } .dock-body { grid-row: 3; min-height: 0; }

/* Header language flags: both shown, the current one lit */
.lang-flags { display: inline-flex; gap: 2px; padding: 2px; border: var(--bw) solid var(--line); border-radius: 999px; background: var(--surface); }
.lang-flag { display: grid; place-items: center; width: 32px; height: 26px; border-radius: 999px; opacity: .45; filter: grayscale(.6); }
.lang-flag img { width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.lang-flag.on { opacity: 1; filter: none; background: var(--mustard); }
a.lang-flag:hover, a.lang-flag:focus-visible { opacity: 1; filter: none; }
@media (max-width: 480px) { .lang-flag { width: 26px; height: 24px; } .lang-flag img { width: 18px; height: 12px; } }

/* Release alerts */
.alert-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; }
.alert-box form { margin: 0; }
.alert-btn.on { background: var(--mustard); color: var(--on-color); }
.alert-full { flex-basis: 100%; margin: 4px 0 0; padding: 8px 10px; border: 2px dashed var(--orange); border-radius: var(--radius-sm); font-size: .88rem; }
.notif-release-mark { display: grid; place-items: center; width: 48px; height: 48px; font-size: 1.8rem; flex: none; }
.notif-card.notif-warn.unread a { background: #ffe0d6; }

/* "Achievement unlocked" pop-up: dimmed page, one card at a time */
.ach-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(20, 12, 6, .62); backdrop-filter: blur(2px); }
.ach-pop { width: min(340px, 100%); display: grid; justify-items: center; gap: 6px; padding: 22px 18px 18px; text-align: center; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: 5px 5px 0 var(--shadow); animation: ach-pop .45s ease; }
.ach-pop[hidden] { display: none; }
.ach-pop-kicker { margin: 0; font-weight: 900; color: var(--orange); letter-spacing: .02em; }
.ach-pop-badge .ach-badge { width: 132px; height: 132px; font-size: 5rem; line-height: 132px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); animation: ach-spin .7s ease; }
.ach-pop-name { margin: 4px 0 0; font-size: 1.35rem; }
.ach-pop-desc { margin: 0; color: var(--muted); font-size: .92rem; }
.ach-pop-reward { margin: 2px 0 0; padding: 2px 10px; border-radius: 999px; background: var(--sky); color: var(--on-color); font: 800 .82rem var(--mono); }
.ach-pop-actions { display: flex; gap: 8px; margin: 10px 0 0; }
.shop-pop { gap: 8px; }
.shop-pop-icon { display: grid; place-items: center; min-height: 140px; }
.shop-pop .ach-pop-name { font-size: 1.2rem; text-wrap: balance; }
.shop-pop-note { font-size: .82rem; }
.shop-pop-error { margin: 0; color: var(--orange); font-weight: 800; font-size: .9rem; }
.shop-pop .ach-pop-actions { width: 100%; }
.shop-pop .ach-pop-actions .btn { flex: 1; }
.shop-pop .btn-ghost { border-color: var(--line); }
.avatar-opt { touch-action: manipulation; } /* double tap buys, so the browser must not zoom on it */
body.modal-open { overflow: hidden; }
@keyframes ach-spin { from { transform: scale(.4) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.08) rotate(4deg); opacity: 1; } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ach-pop, .ach-pop-badge .ach-badge { animation: none; } }

/* Messenger: docked in the empty space on the right of wide screens, a bottom sheet on phones */
.messenger { position: fixed; z-index: 55; right: 16px; top: 84px; bottom: 92px; width: 280px; display: grid; grid-template-rows: auto 1fr; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 4px 4px 0 var(--shadow); overflow: hidden; }
.messenger[hidden] { display: none; }
.messenger.sheet { z-index: 90; inset: auto 0 0 0; width: auto; height: min(78vh, 640px); border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; }
.msg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: var(--bw) solid var(--line); background: var(--mustard); color: #2a1d12; }
.msg-x, .msg-back { border: 2px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-weight: 900; padding: 2px 8px; cursor: pointer; }
.msg-list-view, .msg-chat { display: grid; min-height: 0; }
.msg-list-view { grid-template-rows: auto auto 1fr; gap: 8px; padding: 8px; }
.msg-list-view[hidden], .msg-chat[hidden] { display: none; }
.msg-add { display: flex; gap: 4px; }
.msg-add input, .msg-send input { flex: 1; min-width: 0; min-height: 36px; padding: 4px 10px; font-size: .85rem; }
.msg-err { margin: 0; color: var(--danger, #c0392b); font-size: .8rem; }
.msg-err[hidden] { display: none; }
.msg-list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 4px; overflow-y: auto; }
.msg-none { color: var(--muted); font-size: .85rem; padding: 6px; }
.msg-item { display: flex; align-items: center; gap: 4px; }
.msg-open { flex: 1; min-width: 0; display: grid; grid-template-columns: 8px 32px 1fr auto; align-items: center; gap: 6px; padding: 6px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.msg-open:hover, .msg-open:focus-visible { background: var(--surface-2); }
.msg-item .dot { width: 8px; height: 8px; border-radius: 50%; background: #b9a78c; }
.msg-item.on .dot { background: #3fbf6f; box-shadow: 0 0 6px #3fbf6f; }
.msg-ava { width: 32px; height: 32px; border-radius: 9px; border: 2px solid var(--line); object-fit: cover; }
.msg-txt { display: grid; min-width: 0; }
.msg-name { font-weight: 800; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-name .lv, .msg-chat-name .lv { font: 800 .62rem var(--mono); padding: 0 4px; border-radius: 5px; background: var(--mustard); color: #2a1d12; }
.msg-last { color: var(--muted); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-unread, .msg-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--orange); color: #fff; font: 800 .7rem/20px var(--mono); text-align: center; }
.msg-addback { flex: none; }
.msg-chat { grid-template-rows: auto 1fr auto auto; }
.msg-chat-head { display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 2px dashed var(--line); }
.msg-chat-name::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #b9a78c; vertical-align: middle; }
.msg-chat-name.on::before { background: #3fbf6f; }
.msg-log { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }
.msg-log li { display: flex; }
.msg-log li.mine { justify-content: flex-end; }
.msg-bubble { max-width: 82%; padding: 6px 10px; border: 2px solid var(--line); border-radius: 14px 14px 14px 4px; background: var(--surface-2); font-size: .86rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-log li.mine .msg-bubble { border-radius: 14px 14px 4px 14px; background: var(--mustard); color: #2a1d12; }
.msg-send { display: flex; gap: 4px; padding: 8px; border-top: 2px dashed var(--line); }
.msg-launcher { position: fixed; right: 18px; bottom: 88px; z-index: 60; width: 52px; height: 52px; border-radius: 50%; border: var(--bw) solid var(--line); background: var(--mustard); font-size: 1.4rem; box-shadow: 3px 3px 0 var(--shadow); cursor: pointer; }
.msg-launcher[hidden] { display: none; }
.msg-launcher .msg-count { position: absolute; top: -6px; right: -6px; }
.msg-launcher .msg-count[hidden] { display: none; }
.msg-launcher.blink { animation: dock-blink 1s steps(2, start) infinite; }
/* the room chat window makes room for the docked messenger */
@media (min-width: 761px) { body.has-messenger .chat-dock { right: 312px; width: min(860px, calc(100vw - 340px)); } }
@media (prefers-reduced-motion: reduce) { .msg-launcher.blink { animation: none; } }

/* Equipped and owned items take their rarity's colour: 일반 grey, 고급 green, 레어 blue, 에픽 purple, 레전드 gold */
.rarity-common { --r-bg: #e7dfd1; --r-glow: transparent; }
.rarity-uncommon { --r-bg: #9fdcae; --r-glow: transparent; }
.rarity-rare { --r-bg: #8cc8f2; --r-glow: rgba(70, 150, 230, .35); }
.rarity-epic { --r-bg: #c9a8f0; --r-glow: rgba(150, 100, 220, .45); }
.rarity-legendary { --r-bg: linear-gradient(135deg, #ffe07a, #ff9a3c); --r-glow: rgba(255, 140, 40, .6); }
.slot-mini li.on, .pd-slot.on .pd-box { background: var(--r-bg, var(--mustard)); color: #2a1d12; }
.slot-mini li.on { box-shadow: 0 0 10px var(--r-glow, transparent); }
.pd-slot.on .pd-box { box-shadow: 3px 3px 0 var(--shadow), 0 0 12px var(--r-glow, transparent); }
.inv-item[class*="rarity-"] img, .shop-item[class*="rarity-"] img { border-radius: 12px; background: var(--r-bg); padding: 4px; }
.inv-item.rarity-legendary, .shop-item.rarity-legendary { animation: rarity-shine 2.4s ease-in-out infinite; }
@keyframes rarity-shine { 50% { box-shadow: 3px 3px 0 var(--shadow), 0 0 16px rgba(255, 140, 40, .55); } }
@media (prefers-reduced-motion: reduce) { .inv-item.rarity-legendary, .shop-item.rarity-legendary { animation: none; } }

.rarity-unique { --r-bg: linear-gradient(135deg, #ff9ac8, #ffe07a 35%, #8ff0b8 65%, #8fd2ff); --r-glow: rgba(255, 120, 200, .65); }
.rarity-unique .rarity-badge { background: linear-gradient(90deg, #ff7aa8, #ffd35e, #7fe0a0, #6cc8ff, #b07cff); color: #2a1d12; }
.inv-item.rarity-unique, .shop-item.rarity-unique { animation: rarity-shine 1.8s ease-in-out infinite; }

/* "누구 님이 메시지 작성 중…" with bouncing dots */
.typing { margin: 2px 0 4px; min-height: 1.2em; color: var(--muted); font-size: .8rem; font-weight: 700; }
.typing[hidden] { display: none; }
.typing::after { content: ''; display: inline-block; width: 1.4em; text-align: left; animation: typing-dots 1.2s steps(4) infinite; }
@keyframes typing-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
@media (prefers-reduced-motion: reduce) { .typing::after { animation: none; content: '…'; } }
/* wide pages (rooms) leave room for the docked messenger */
body.has-messenger main.wrap-wide { max-width: min(1440px, calc(100vw - 340px)); margin-left: max(16px, calc((100vw - 340px - 1440px) / 2)); margin-right: auto; }
.msg-typing { margin: 0; padding: 2px 10px; }

/* Crafting: locked button and the "how to get it" pop-up */
.craft-locked { background: var(--surface-2); color: var(--muted); }
button.recipe-in { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }
button.recipe-in:hover img, button.recipe-in:focus-visible img { filter: none; opacity: 1; }
.recipe-dp.short { color: var(--danger, #c0392b); }
.help-pop { width: min(420px, 100%); text-align: left; justify-items: stretch; }
.help-pop .help-kicker { margin: 0; font-weight: 900; color: var(--orange); }
.help-pop h2 { margin: 0; font-size: 1.2rem; }
.help-list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 10px; }
.help-list li { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; padding: 8px; border: 2px dashed var(--line); border-radius: 12px; }
.help-list img { width: 48px; height: 48px; object-fit: contain; }
.help-list p { margin: 2px 0 0; font-size: .86rem; }
.help-dp { font-size: 2rem; text-align: center; }
.help-note { margin: 0; font-size: .78rem; }
.help-pop > .btn { justify-self: center; }
/* the chat window moves by its title bar */
@media (min-width: 761px) { .dock-bar { cursor: grab; user-select: none; touch-action: none; } .chat-dock.dragging { opacity: .92; } .chat-dock.dragging .dock-bar { cursor: grabbing; } }

/* tier avatars in name tags, chat logs and lists (same effects as on the profile, smaller) */
.av-xxs, .av-xxs > img { width: 20px; height: 20px; }
.av-xxs .av-p { transform: scale(.42); }
.av-xxs .av-spark { font-size: 7px; }
.av-xxs.av-fx-galaxy .av-p { --av-r: 15px; }
.actor-name .av { margin-right: 3px; vertical-align: middle; }
.actor-name { display: inline-flex; align-items: center; gap: 2px; }
.chat-who .av, #people-list .av, .dock-person .av, .dock-friend-list .av { margin-right: 4px; vertical-align: middle; }
.actor-name { overflow: visible; }
.av-xxs.av-special::before { inset: -3px; }
.av-xxs.av-special::after { inset: -5px; filter: blur(5px); }
.av-xxs.av-rare > img { box-shadow: 0 0 0 2px #f5c542, 0 0 0 3px #2a1d12; }

/* chat window "+": room search and a new-room form */
.dock-search { width: 100%; min-height: 36px; margin-bottom: 8px; padding: 4px 10px; font-size: .85rem; }
.dock-new-title { margin: 10px 0 4px; font-weight: 800; font-size: .85rem; }
.dock-new { display: flex; flex-wrap: wrap; gap: 6px; }
.dock-new input { flex: 1 1 160px; min-width: 0; min-height: 34px; padding: 4px 10px; font-size: .85rem; }
.dock-new select { flex: 0 1 140px; min-height: 34px; font: inherit; font-size: .85rem; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); }
.dock-picker .side-room.current { outline: 2px dashed var(--orange); }

/* "친구로 추가할까요?" pop-up */
.friend-pop { gap: 8px; }
.friend-face { padding: 14px; }
.friend-name { margin: 0; font-size: 1.25rem; }
.friend-name .lv { font: 800 .7rem var(--mono); padding: 1px 6px; border-radius: 6px; background: var(--mustard); color: #2a1d12; vertical-align: middle; }
.friend-q { margin: 0; color: var(--muted); }
.actor:not(.me) { cursor: pointer; }
.chat-dock .dock-picker { max-height: min(380px, 55vh); overflow-y: auto; }
.dock-picker > p.muted { margin: 2px 0 8px; font-size: .85rem; }
.dock-picker > p.muted[hidden] { display: none; }
/* "+" covers the chat window body: room search, open rooms as cards, new room */
.chat-dock .dock-picker { position: absolute; z-index: 6; left: 0; right: 0; top: var(--dock-bar-h, 50px); bottom: 0; max-height: none; overflow-y: auto; padding: 12px; border-bottom: 0; }
.chat-dock .dock-picker[hidden] { display: none; }
.dock-picker .dock-picker-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.dock-picker .side-room { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center; padding: 6px; }
.dock-picker .side-room img { width: 96px; height: 54px; object-fit: cover; border-radius: 8px; }

/* F: weapon swing: the character lunges and a glowing slash arc sweeps in front (mirrored when facing left) */
.actor.swinging .doll { animation: doll-swing .6s cubic-bezier(.2, .8, .3, 1); }
.actor.face-left.swinging .doll { animation-name: doll-swing-left; }
.actor.swinging::after {
  content: ""; position: absolute; z-index: 4; left: 48%; top: 34%; width: 105%; aspect-ratio: 1; border-radius: 50%;
  border: 0 solid transparent; border-top: 9px solid #fff6c2; border-right: 6px solid #ffb02e; border-left: 2px solid rgba(255, 120, 60, .6);
  box-shadow: 0 -6px 12px -4px rgba(255, 200, 80, .9);
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #ff9a3c) drop-shadow(0 0 14px #ff5e3a); pointer-events: none;
  animation: slash-arc .42s ease-out forwards;
}
.actor.face-left.swinging::after { left: auto; right: 48%; transform: scaleX(-1); animation-name: slash-arc-left; }
@keyframes doll-swing { 0% { transform: rotate(0); } 25% { transform: rotate(-3deg) translateX(-2%); } 50% { transform: rotate(3deg) translateX(4%); } 100% { transform: rotate(0); } }
@keyframes doll-swing-left { 0% { transform: scaleX(-1) rotate(0); } 25% { transform: scaleX(-1) rotate(-3deg) translateX(-2%); } 50% { transform: scaleX(-1) rotate(3deg) translateX(4%); } 100% { transform: scaleX(-1) rotate(0); } }
@keyframes slash-arc { 0% { opacity: 0; transform: rotate(-110deg) scale(.6); } 20% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: rotate(40deg) scale(1.05); } }
@keyframes slash-arc-left { 0% { opacity: 0; transform: scaleX(-1) rotate(-110deg) scale(.6); } 20% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: scaleX(-1) rotate(40deg) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .actor.swinging .doll, .actor.swinging::after { animation: none; } }
/* the held weapon itself moves when swung, about the fist (build_worn.py GRIP_FIST_AT in its 880x1000 frame), by its
   rig (r-*); wind-up 0-150ms, strike to the hit at 300ms, recover by 600ms */
.doll-layer[src*="/worn/weapon-"] { transform-origin: 37.7% 62.8%; }
/* a weapon carried tip down (build_worn.py carry, hold=down) hangs from the fist: the stretch of handle and the
   pommel above the fist pass behind the hand and the forearm, so that band (from inside the fist up the forearm,
   in the weapon's 880x1000 frame) is cut out; a pose motion's drawn hands show the whole weapon */
.doll-layer[src*="hold=down"] { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 40.30% 64.81%, 52.63% 48.73%, 46.97% 45.37%, 34.65% 61.45%, 40.30% 64.81%, 0 0); }
/* while a weapon is held the body's own knuckles-down fist gives way (below the wrist, on the 440x700 canvas) to a
   hand drawn gripping the handle (parts/grip-<tone>, worn/gloves-NN-grip: build_worn.py grip-parts) */
[src*="/parts/body-"][src*="grip=1"] { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 15.00% 61.91%, 33.18% 65.88%, 33.18% 66.86%, 31.82% 70.57%, 30.91% 73.43%, 15.00% 73.43%, 15.00% 61.91%, 0 0); }
.doll.posed .doll-layer[src*="hold="] { clip-path: none; }
.actor.swinging[data-swing~="r-sword"] .doll:not(.posed) .doll-layer[src*="/worn/weapon-"] { animation: rig-sword .6s cubic-bezier(.3, .7, .3, 1); }
@keyframes rig-sword { 0% { transform: rotate(0); } 25% { transform: rotate(-70deg); } 50% { transform: rotate(95deg); } 100% { transform: rotate(0); } }
/* a bow tilts back as it is drawn and loosed; a wand is drawn back and flicked forward */
/* pose motions (swing-fx.js POSES, build_poses.py): drawn arms frame by frame; the hanging arms, their sleeves, the
   gloves and the resting fist give way meanwhile */
.pose-layer { opacity: 0; }
.doll.posed .doll-layer:is([src*="/parts/body-"], [src*="/worn/armor-"]) { -webkit-mask: url(/public/world/pose/noarms.webp?v=a38ea6797c) 0 0 / 100% 100%; mask: url(/public/world/pose/noarms.webp?v=a38ea6797c) 0 0 / 100% 100%; } /* the same band beside the torso for every pose */
.pose-string { opacity: 1; overflow: visible; }
.doll[class*="pose-"] .doll-layer:is([src*="/worn/gloves-"], [src*="/parts/grip-"]) { opacity: 0; }
.actor.swinging[data-swing~="r-wand"] .doll:not(.posed) .doll-layer[src*="/worn/weapon-"] { animation: rig-wand .6s cubic-bezier(.3, .7, .3, 1); }
@keyframes rig-wand { 0% { transform: rotate(0); } 25% { transform: rotate(-25deg); } 45% { transform: rotate(20deg); } 100% { transform: rotate(0); } }
.fx-ring { left: var(--x); top: var(--y); width: 70%; height: 12%; margin: -6% 0 0 -35%; border: 3px solid var(--c3, #fff6c2); border-radius: 50%; box-shadow: 0 0 10px 2px var(--c1, #ffd36a), inset 0 0 10px var(--c2, #ffb02e); opacity: 0; animation: fx-ground-ring .55s ease-out var(--hd, 0ms) forwards; }
@keyframes fx-ground-ring { 0% { opacity: 1; transform: scale(.08); } 60% { opacity: .9; } 100% { opacity: 0; transform: scale(1.5); } }
/* the motion's props (swing-fx.js PROPS): the arrow flies from the bow to the hit; bolts fall onto it, one after another */
.fx-prop { opacity: 0; pointer-events: none; }
.p-arrow { left: -14%; top: 44%; width: 22%; animation: prop-arrow .18s linear .15s forwards; }
@keyframes prop-arrow { 0% { opacity: 1; transform: translateX(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(470%); } }
.p-bolt { left: calc(42% + var(--i) * 8%); top: -40%; width: 12%; animation: prop-bolt .17s ease-in calc(150ms + var(--i) * 70ms) forwards; }
@keyframes prop-bolt { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(470%); } }
@media (prefers-reduced-motion: reduce) { .actor.swinging .doll-layer[src*="/worn/weapon-"] { animation: none; } }

/* Weapon swings (swing-fx.js): .swing-fx in front of the actor, by motion (m-*) and element (e-*). The plain slash
   above stays for bare hands. */
.actor.swinging[data-swing]::after { display: none; }
.swing-fx { position: absolute; z-index: 4; left: 30%; top: 0; width: 170%; height: 120%; pointer-events: none; filter: drop-shadow(0 0 3px var(--c2)) drop-shadow(0 0 8px var(--c2)); }
.swing-fx > * { position: absolute; display: block; max-width: none; }
.e-fire { --c1: #ffb02e; --c2: #ff5e3a; --c3: #fff6c2; }
.e-ice { --c1: #bfe9ff; --c2: #5fb8ff; --c3: #ffffff; }
.e-thunder { --c1: #fff27a; --c2: #ffc21f; --c3: #ffffff; }
.e-water { --c1: #7cd3ff; --c2: #2e8fe0; --c3: #e6f7ff; }
.e-shadow { --c1: #b06cff; --c2: #5a22b0; --c3: #f0dcff; }
.e-love { --c1: #ff8fbf; --c2: #ff4f8b; --c3: #ffe6f0; }
.e-nature { --c1: #8ee06a; --c2: #3fa33a; --c3: #f3ffd8; }
.e-star { --c1: #ffe36e; --c2: #9d7bff; --c3: #ffffff; }
.e-holy { --c1: #fff1a8; --c2: #ffc23b; --c3: #ffffff; }
.e-pixel { --c1: #4dfcff; --c2: #ff4fd8; --c3: #ffffff; }
.e-none { --c1: #ffffff; --c2: #9fb4d6; --c3: #ffffff; } /* a plain weapon: a clean white swing */

/* the motion's main shape */
.m-slash .fx-shape { left: -8%; top: 4%; width: 100%; aspect-ratio: 1; border-radius: 50%; border-top: 16px solid var(--c3); border-right: 11px solid var(--c1); border-left: 5px solid var(--c2); animation: slash-arc .55s ease-out forwards; }
.m-smash .fx-shape { left: -10%; top: 78%; width: 120%; height: 18%; border-radius: 50%; border: 5px solid var(--c1); box-shadow: 0 0 12px var(--c2), inset 0 0 10px var(--c3); animation: fx-ring .7s ease-out forwards; }
.m-thrust .fx-shape { left: 0; top: 36%; height: 9px; width: 150%; border-radius: 9px; background: linear-gradient(90deg, transparent, var(--c2) 30%, var(--c1) 70%, var(--c3)); transform-origin: left; animation: fx-streak .5s ease-out forwards; }
.m-shot .fx-shape { left: 0; top: 34%; height: 6px; width: 45%; border-radius: 6px; background: linear-gradient(90deg, transparent, var(--c1) 55%, var(--c3)); animation: fx-arrow .65s cubic-bezier(.2, .7, .4, 1) forwards; }
.m-throw .fx-shape { left: 0; top: 28%; width: 22%; aspect-ratio: 1; background: linear-gradient(var(--c3), var(--c1)); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: fx-throw .8s ease-out forwards; }
.m-cast .fx-shape { left: 0; top: 14%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 3px dashed var(--c1); box-shadow: 0 0 10px var(--c2), inset 0 0 14px var(--c2); animation: fx-circle .85s ease-out forwards; }
.m-cast .fx-orb { left: 20%; top: 36%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--c3) 0 25%, var(--c1) 45%, transparent 70%); animation: fx-orb .7s .15s ease-in forwards; opacity: 0; }
.m-strum .fx-shape { left: 0; top: 20%; width: 60%; aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--c1); animation: fx-ring .8s ease-out forwards; }
.fx-hit { left: var(--x); top: var(--y); width: calc(72% * var(--hs, 1)); aspect-ratio: 1; opacity: 0; transform: translate(-50%, -50%) scale(.3); animation: fx-hit .55s ease-out var(--hd) forwards; }
.fx-p.sprite { left: var(--x); top: var(--y); width: 13%; margin: -6.5% 0 0 -6.5%; }
.fx-bolt { left: 18%; top: -20%; width: 30%; height: 90%; background: linear-gradient(var(--c3), var(--c1)); clip-path: polygon(55% 0, 20% 48%, 48% 48%, 30% 100%, 82% 40%, 54% 40%, 72% 0); animation: fx-flash .6s steps(3) forwards; }

/* particles: fly out to (--dx, --dy), turning */
.fx-p { left: 25%; top: 38%; width: 9%; aspect-ratio: 1; opacity: 0; animation: fx-fly .9s ease-out var(--d) forwards; }
.fx-p.ember { border-radius: 50%; background: radial-gradient(circle, var(--c3) 0 22%, var(--c1) 45%, transparent 70%); }
.fx-p.shard { background: linear-gradient(var(--c3), var(--c1)); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 7%; }
.fx-p.spark { width: 3%; aspect-ratio: 1 / 4; border-radius: 3px; background: linear-gradient(var(--c3), var(--c1)); }
.fx-p.drop { border-radius: 50% 50% 50% 0; background: radial-gradient(circle at 35% 35%, var(--c3) 0 18%, var(--c1) 40%, var(--c2)); }
.fx-p.wisp { width: 12%; border-radius: 50%; background: radial-gradient(circle, var(--c1), transparent 70%); }
.fx-p.heart { background: var(--c1); clip-path: polygon(50% 92%, 6% 50%, 6% 24%, 28% 8%, 50% 26%, 72% 8%, 94% 24%, 94% 50%); }
.fx-p.leaf { border-radius: 0 100% 0 100%; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.fx-p.star { background: linear-gradient(var(--c3), var(--c1)); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.fx-p.pixel { width: 6%; background: var(--c1); }
.fx-p.pixel:nth-child(even) { background: var(--c2); }
.fx-p.note { width: auto; aspect-ratio: auto; font-size: 1.1rem; font-weight: 900; line-height: 1; color: var(--c1); text-shadow: 0 0 4px var(--c2), 0 1px 0 #2a1d12; }

@keyframes fx-fly { 0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(var(--s)); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(calc(var(--s) * .4)); } }
@keyframes fx-ring { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes fx-streak { 0% { opacity: 0; transform: scaleX(.1); } 30% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes fx-arrow { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(320%); } }
@keyframes fx-throw { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(420%, -40%) rotate(900deg); } }
@keyframes fx-circle { 0% { opacity: 0; transform: scale(.3) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1) rotate(160deg); } }
@keyframes fx-orb { 0% { opacity: 1; transform: translateX(0) scale(.6); } 100% { opacity: 0; transform: translateX(380%) scale(1.2); } }
@keyframes fx-hit { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-10deg); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25) rotate(8deg); } }
@keyframes fx-flash { 0% { opacity: 1; } 50% { opacity: .2; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .swing-fx { display: none; } }

/* 1:1 chat: their icon, level and nickname (header and above their first message in a row) */
.msg-chat-name { display: inline-flex; align-items: center; gap: 5px; }
.msg-chat-name .av { margin-right: 2px; }
.msg-log li.theirs { flex-direction: column; align-items: flex-start; gap: 3px; padding-left: 36px; }
.msg-log li.theirs.first { padding-left: 0; }
.msg-who { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; }
.msg-who .lv { font: 800 .62rem var(--mono); padding: 0 4px; border-radius: 5px; background: var(--mustard); color: #2a1d12; }
.msg-log li.theirs.first .msg-bubble { margin-left: 36px; margin-top: -6px; }

/* messenger tabs, group maker, send icon */
.msg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: var(--bw) solid var(--line); } /* 친구 · 대화 · 차단 */
.msg-tabs[hidden] { display: none; }
.messenger { grid-template-rows: auto auto 1fr; }
.msg-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 0; background: var(--surface); color: var(--muted); font: inherit; font-weight: 800; cursor: pointer; }
.msg-tab + .msg-tab { border-left: 2px solid var(--line); }
.msg-tab.on { background: var(--surface-2); color: var(--text); box-shadow: inset 0 -3px 0 var(--orange); }
.msg-tab .msg-unread[hidden] { display: none; }
.msg-list-view { grid-template-rows: auto auto auto 1fr; }
.msg-list-view > [hidden] { display: none; }
.msg-newgroup { justify-self: start; }
.msg-gicon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 2px solid var(--line); background: var(--sky); font-size: 1rem; }
.msg-chat-name .msg-gicon { display: inline-grid; width: 22px; height: 22px; font-size: .8rem; }
.msg-group-new { display: grid; grid-template-rows: auto auto auto auto 1fr auto auto; gap: 8px; padding: 8px; min-height: 0; }
.msg-group-new[hidden] { display: none; }
.msg-group-new > input { min-height: 36px; padding: 4px 10px; }
.msg-group-new .msg-back { justify-self: start; }
.msg-pick { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; align-content: start; gap: 4px; }
.msg-pick label { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 10px; cursor: pointer; font-size: .86rem; }
.msg-pick label:hover { background: var(--surface-2); }
.msg-pick .lv { font: 800 .62rem var(--mono); padding: 0 4px; border-radius: 5px; background: var(--mustard); color: #2a1d12; }
.msg-leave { margin-left: auto; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font: inherit; font-size: .78rem; padding: 2px 8px; cursor: pointer; }
.msg-leave[hidden] { display: none; }
.send-btn { display: inline-grid; place-items: center; padding: 0 12px; }
.send-btn img { width: 20px; height: 20px; display: block; }
/* chat window friends: name gets the room, "join" is a small round icon */
.dock-friend-list li { grid-template-columns: 8px auto auto minmax(0, 1fr) auto auto; }
.dock-friend-list .f-txt { min-width: 0; display: grid; }
.dock-friend-list .f-txt strong, .dock-friend-list .f-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-join { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid var(--line); background: var(--orange); color: #fff; font-weight: 900; cursor: pointer; }
.msg-back, .msg-leave { white-space: nowrap; flex: none; }
.msg-chat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-chat-name:has(.msg-gicon)::before { display: none; }
/* admin billing: wide tables scroll sideways instead of breaking ids and amounts mid-word */
.admin-billing-detail th, .admin-billing-detail td { white-space: nowrap; }
.admin-billing-detail .inline-form { display: inline-block; margin: 2px 0 2px 4px; }
.admin-billing-users { list-style: none; padding: 0; display: grid; gap: 8px; }
/* game page: Korean support first in the languages row */
.langs .lang-ko { display: inline-block; padding: 0 8px; border: 2px solid var(--line); border-radius: 999px; font-weight: 700; font-size: .85em; line-height: 1.6; }
.langs .lang-ko.is-yes { background: #c9efd4; color: #14432a; }
.langs .lang-ko.is-no { background: var(--surface-2); color: var(--muted); }
.langs .lang-rest { color: var(--muted); font-weight: 500; }
/* Phones: iOS zooms into any text field under 16px when it gets focus and stays zoomed, so form controls are 16px on
   touch screens; double-tap zoom is off (pinch zoom stays for the web; the apps fix the scale in the viewport). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
@media (pointer: coarse) {
  input, textarea, select { font-size: 16px !important; }
  .comment-tools > details > summary, .comment-tools .tool-pill { min-height: 44px; }
}
/* profile character card: a character sheet, slots level with the body part (head → feet), effect underneath */
.char-sheet { display: grid; grid-template-columns: minmax(0, 72px) minmax(0, 1fr) minmax(0, 72px); gap: 10px; align-items: stretch; max-width: 420px; margin-inline: auto; }
.char-sheet .slot-left { order: 0; } .char-sheet-doll { order: 1; } .char-sheet .slot-right { order: 2; }
.slot-col { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(0, 1fr)); align-content: space-between; gap: 8px; }
.char-sheet-doll { display: grid; justify-items: center; align-content: center; gap: 8px; }
.char-sheet .slot-col { position: relative; z-index: 1; } /* slots stay above an aura spreading past the doll */
.char-sheet-doll .doll-card-lg { width: min(100%, 150px); }
.slot-under { grid-template-columns: repeat(2, 72px); justify-content: center; }
.char-card > .char-card-actions { margin-top: 14px; justify-content: center; }

/* generated by build_headwear.py hair-masks: the part of the hair each headwear hides */
.doll-layer[src*="h=helmet-01&"], .doll-layer[src$="h=helmet-01"] { -webkit-mask: url(/public/world/worn/helmet-01-hair.webp?v=770ef1adcc) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-01-hair.webp?v=770ef1adcc) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-01s&"], .doll-layer[src$="h=helmet-01s"] { -webkit-mask: url(/public/world/worn/helmet-01-hairs.webp?v=770ef1adcc) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-01-hairs.webp?v=770ef1adcc) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-02&"], .doll-layer[src$="h=helmet-02"] { -webkit-mask: url(/public/world/worn/helmet-02-hair.webp?v=a70dfba52f) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-02-hair.webp?v=a70dfba52f) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-02s&"], .doll-layer[src$="h=helmet-02s"] { -webkit-mask: url(/public/world/worn/helmet-02-hairs.webp?v=0449c50d71) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-02-hairs.webp?v=0449c50d71) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-03&"], .doll-layer[src$="h=helmet-03"] { -webkit-mask: url(/public/world/worn/helmet-03-hair.webp?v=72c82c7e45) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-03-hair.webp?v=72c82c7e45) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-03s&"], .doll-layer[src$="h=helmet-03s"] { -webkit-mask: url(/public/world/worn/helmet-03-hairs.webp?v=72c82c7e45) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-03-hairs.webp?v=72c82c7e45) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-04&"], .doll-layer[src$="h=helmet-04"] { -webkit-mask: url(/public/world/worn/helmet-04-hair.webp?v=cef019aa78) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-04-hair.webp?v=cef019aa78) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-04s&"], .doll-layer[src$="h=helmet-04s"] { -webkit-mask: url(/public/world/worn/helmet-04-hairs.webp?v=aaaacd5157) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-04-hairs.webp?v=aaaacd5157) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-05&"], .doll-layer[src$="h=helmet-05"] { -webkit-mask: url(/public/world/worn/helmet-05-hair.webp?v=2b8d3d1771) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-05-hair.webp?v=2b8d3d1771) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-05s&"], .doll-layer[src$="h=helmet-05s"] { -webkit-mask: url(/public/world/worn/helmet-05-hairs.webp?v=c8a57c3a10) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-05-hairs.webp?v=c8a57c3a10) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-06&"], .doll-layer[src$="h=helmet-06"] { -webkit-mask: url(/public/world/worn/helmet-06-hair.webp?v=bbdfccb767) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-06-hair.webp?v=bbdfccb767) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-06s&"], .doll-layer[src$="h=helmet-06s"] { -webkit-mask: url(/public/world/worn/helmet-06-hairs.webp?v=bbdfccb767) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-06-hairs.webp?v=bbdfccb767) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-07&"], .doll-layer[src$="h=helmet-07"] { -webkit-mask: url(/public/world/worn/helmet-07-hair.webp?v=107f7baa46) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-07-hair.webp?v=107f7baa46) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-07s&"], .doll-layer[src$="h=helmet-07s"] { -webkit-mask: url(/public/world/worn/helmet-07-hairs.webp?v=b86630a593) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-07-hairs.webp?v=b86630a593) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-08&"], .doll-layer[src$="h=helmet-08"] { -webkit-mask: url(/public/world/worn/helmet-08-hair.webp?v=e2a4e055a9) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-08-hair.webp?v=e2a4e055a9) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-08s&"], .doll-layer[src$="h=helmet-08s"] { -webkit-mask: url(/public/world/worn/helmet-08-hairs.webp?v=e2a4e055a9) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-08-hairs.webp?v=e2a4e055a9) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-09&"], .doll-layer[src$="h=helmet-09"] { -webkit-mask: url(/public/world/worn/helmet-09-hair.webp?v=3165cf8e9a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-09-hair.webp?v=3165cf8e9a) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-09s&"], .doll-layer[src$="h=helmet-09s"] { -webkit-mask: url(/public/world/worn/helmet-09-hairs.webp?v=3165cf8e9a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-09-hairs.webp?v=3165cf8e9a) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-10&"], .doll-layer[src$="h=helmet-10"] { -webkit-mask: url(/public/world/worn/helmet-10-hair.webp?v=0914b65003) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-10-hair.webp?v=0914b65003) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-10s&"], .doll-layer[src$="h=helmet-10s"] { -webkit-mask: url(/public/world/worn/helmet-10-hairs.webp?v=0914b65003) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-10-hairs.webp?v=0914b65003) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-11&"], .doll-layer[src$="h=helmet-11"] { -webkit-mask: url(/public/world/worn/helmet-11-hair.webp?v=09a8a5e4ae) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-11-hair.webp?v=09a8a5e4ae) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-11s&"], .doll-layer[src$="h=helmet-11s"] { -webkit-mask: url(/public/world/worn/helmet-11-hairs.webp?v=09a8a5e4ae) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-11-hairs.webp?v=09a8a5e4ae) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-12&"], .doll-layer[src$="h=helmet-12"] { -webkit-mask: url(/public/world/worn/helmet-12-hair.webp?v=2ae6253d2a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-12-hair.webp?v=2ae6253d2a) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-12s&"], .doll-layer[src$="h=helmet-12s"] { -webkit-mask: url(/public/world/worn/helmet-12-hairs.webp?v=2ae6253d2a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-12-hairs.webp?v=2ae6253d2a) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-13&"], .doll-layer[src$="h=helmet-13"] { -webkit-mask: url(/public/world/worn/helmet-13-hair.webp?v=dfad27ff25) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-13-hair.webp?v=dfad27ff25) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-13s&"], .doll-layer[src$="h=helmet-13s"] { -webkit-mask: url(/public/world/worn/helmet-13-hairs.webp?v=dfad27ff25) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-13-hairs.webp?v=dfad27ff25) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-14&"], .doll-layer[src$="h=helmet-14"] { -webkit-mask: url(/public/world/worn/helmet-14-hair.webp?v=1b3f4c85c9) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-14-hair.webp?v=1b3f4c85c9) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-14s&"], .doll-layer[src$="h=helmet-14s"] { -webkit-mask: url(/public/world/worn/helmet-14-hairs.webp?v=1b3f4c85c9) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-14-hairs.webp?v=1b3f4c85c9) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-16&"], .doll-layer[src$="h=helmet-16"] { -webkit-mask: url(/public/world/worn/helmet-16-hair.webp?v=07c8ead1da) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-16-hair.webp?v=07c8ead1da) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-16s&"], .doll-layer[src$="h=helmet-16s"] { -webkit-mask: url(/public/world/worn/helmet-16-hairs.webp?v=07c8ead1da) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-16-hairs.webp?v=07c8ead1da) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-17&"], .doll-layer[src$="h=helmet-17"] { -webkit-mask: url(/public/world/worn/helmet-17-hair.webp?v=7a0485a0bc) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-17-hair.webp?v=7a0485a0bc) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-17s&"], .doll-layer[src$="h=helmet-17s"] { -webkit-mask: url(/public/world/worn/helmet-17-hairs.webp?v=6b7d95b9a4) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-17-hairs.webp?v=6b7d95b9a4) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-18&"], .doll-layer[src$="h=helmet-18"] { -webkit-mask: url(/public/world/worn/helmet-18-hair.webp?v=37ce5c727b) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-18-hair.webp?v=37ce5c727b) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-18s&"], .doll-layer[src$="h=helmet-18s"] { -webkit-mask: url(/public/world/worn/helmet-18-hairs.webp?v=05f05f94f3) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-18-hairs.webp?v=05f05f94f3) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-19&"], .doll-layer[src$="h=helmet-19"] { -webkit-mask: url(/public/world/worn/helmet-19-hair.webp?v=4e5fe2b26a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-19-hair.webp?v=4e5fe2b26a) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-19s&"], .doll-layer[src$="h=helmet-19s"] { -webkit-mask: url(/public/world/worn/helmet-19-hairs.webp?v=4e5fe2b26a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-19-hairs.webp?v=4e5fe2b26a) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-20&"], .doll-layer[src$="h=helmet-20"] { -webkit-mask: url(/public/world/worn/helmet-20-hair.webp?v=794db83316) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-20-hair.webp?v=794db83316) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-20s&"], .doll-layer[src$="h=helmet-20s"] { -webkit-mask: url(/public/world/worn/helmet-20-hairs.webp?v=60423d5352) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-20-hairs.webp?v=60423d5352) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-22&"], .doll-layer[src$="h=helmet-22"] { -webkit-mask: url(/public/world/worn/helmet-22-hair.webp?v=ce706629b8) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-22-hair.webp?v=ce706629b8) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-22s&"], .doll-layer[src$="h=helmet-22s"] { -webkit-mask: url(/public/world/worn/helmet-22-hairs.webp?v=ce706629b8) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-22-hairs.webp?v=ce706629b8) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-23&"], .doll-layer[src$="h=helmet-23"] { -webkit-mask: url(/public/world/worn/helmet-23-hair.webp?v=19b7f707bb) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-23-hair.webp?v=19b7f707bb) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-23s&"], .doll-layer[src$="h=helmet-23s"] { -webkit-mask: url(/public/world/worn/helmet-23-hairs.webp?v=19b7f707bb) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-23-hairs.webp?v=19b7f707bb) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-25&"], .doll-layer[src$="h=helmet-25"] { -webkit-mask: url(/public/world/worn/helmet-25-hair.webp?v=4976c1c45c) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-25-hair.webp?v=4976c1c45c) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-25s&"], .doll-layer[src$="h=helmet-25s"] { -webkit-mask: url(/public/world/worn/helmet-25-hairs.webp?v=4976c1c45c) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-25-hairs.webp?v=4976c1c45c) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-26&"], .doll-layer[src$="h=helmet-26"] { -webkit-mask: url(/public/world/worn/helmet-26-hair.webp?v=712d288c7e) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-26-hair.webp?v=712d288c7e) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-26s&"], .doll-layer[src$="h=helmet-26s"] { -webkit-mask: url(/public/world/worn/helmet-26-hairs.webp?v=f97f1a7001) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-26-hairs.webp?v=f97f1a7001) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-27&"], .doll-layer[src$="h=helmet-27"] { -webkit-mask: url(/public/world/worn/helmet-27-hair.webp?v=b11969b67e) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-27-hair.webp?v=b11969b67e) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-27s&"], .doll-layer[src$="h=helmet-27s"] { -webkit-mask: url(/public/world/worn/helmet-27-hairs.webp?v=edc268dfd0) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-27-hairs.webp?v=edc268dfd0) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-28&"], .doll-layer[src$="h=helmet-28"] { -webkit-mask: url(/public/world/worn/helmet-28-hair.webp?v=6ac2b7ae6e) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-28-hair.webp?v=6ac2b7ae6e) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-28s&"], .doll-layer[src$="h=helmet-28s"] { -webkit-mask: url(/public/world/worn/helmet-28-hairs.webp?v=21eb064fb4) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-28-hairs.webp?v=21eb064fb4) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-29&"], .doll-layer[src$="h=helmet-29"] { -webkit-mask: url(/public/world/worn/helmet-29-hair.webp?v=04d01299ed) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-29-hair.webp?v=04d01299ed) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-29s&"], .doll-layer[src$="h=helmet-29s"] { -webkit-mask: url(/public/world/worn/helmet-29-hairs.webp?v=48bafb351e) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-29-hairs.webp?v=48bafb351e) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-30&"], .doll-layer[src$="h=helmet-30"] { -webkit-mask: url(/public/world/worn/helmet-30-hair.webp?v=fe447de2c1) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-30-hair.webp?v=fe447de2c1) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-30s&"], .doll-layer[src$="h=helmet-30s"] { -webkit-mask: url(/public/world/worn/helmet-30-hairs.webp?v=fe447de2c1) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-30-hairs.webp?v=fe447de2c1) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-31&"], .doll-layer[src$="h=helmet-31"] { -webkit-mask: url(/public/world/worn/helmet-31-hair.webp?v=29f96d2170) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-31-hair.webp?v=29f96d2170) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-31s&"], .doll-layer[src$="h=helmet-31s"] { -webkit-mask: url(/public/world/worn/helmet-31-hairs.webp?v=350a26698a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-31-hairs.webp?v=350a26698a) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-32&"], .doll-layer[src$="h=helmet-32"] { -webkit-mask: url(/public/world/worn/helmet-32-hair.webp?v=c6c92cf49d) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-32-hair.webp?v=c6c92cf49d) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-32s&"], .doll-layer[src$="h=helmet-32s"] { -webkit-mask: url(/public/world/worn/helmet-32-hairs.webp?v=32053762ba) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-32-hairs.webp?v=32053762ba) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-35&"], .doll-layer[src$="h=helmet-35"] { -webkit-mask: url(/public/world/worn/helmet-35-hair.webp?v=0f13ba0bc9) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-35-hair.webp?v=0f13ba0bc9) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-35s&"], .doll-layer[src$="h=helmet-35s"] { -webkit-mask: url(/public/world/worn/helmet-35-hairs.webp?v=7270ba9475) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-35-hairs.webp?v=7270ba9475) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-36&"], .doll-layer[src$="h=helmet-36"] { -webkit-mask: url(/public/world/worn/helmet-36-hair.webp?v=954075f2fe) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-36-hair.webp?v=954075f2fe) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-36s&"], .doll-layer[src$="h=helmet-36s"] { -webkit-mask: url(/public/world/worn/helmet-36-hairs.webp?v=954075f2fe) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-36-hairs.webp?v=954075f2fe) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-37&"], .doll-layer[src$="h=helmet-37"] { -webkit-mask: url(/public/world/worn/helmet-37-hair.webp?v=f04f0b6a44) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-37-hair.webp?v=f04f0b6a44) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-37s&"], .doll-layer[src$="h=helmet-37s"] { -webkit-mask: url(/public/world/worn/helmet-37-hairs.webp?v=f04f0b6a44) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-37-hairs.webp?v=f04f0b6a44) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-38&"], .doll-layer[src$="h=helmet-38"] { -webkit-mask: url(/public/world/worn/helmet-38-hair.webp?v=ebd7d259c6) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-38-hair.webp?v=ebd7d259c6) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-38s&"], .doll-layer[src$="h=helmet-38s"] { -webkit-mask: url(/public/world/worn/helmet-38-hairs.webp?v=ebd7d259c6) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-38-hairs.webp?v=ebd7d259c6) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-39&"], .doll-layer[src$="h=helmet-39"] { -webkit-mask: url(/public/world/worn/helmet-39-hair.webp?v=ec74e93076) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-39-hair.webp?v=ec74e93076) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-39s&"], .doll-layer[src$="h=helmet-39s"] { -webkit-mask: url(/public/world/worn/helmet-39-hairs.webp?v=ec74e93076) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-39-hairs.webp?v=ec74e93076) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-40&"], .doll-layer[src$="h=helmet-40"] { -webkit-mask: url(/public/world/worn/helmet-40-hair.webp?v=7134f364c8) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-40-hair.webp?v=7134f364c8) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-40s&"], .doll-layer[src$="h=helmet-40s"] { -webkit-mask: url(/public/world/worn/helmet-40-hairs.webp?v=c96c700f80) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-40-hairs.webp?v=c96c700f80) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-48&"], .doll-layer[src$="h=helmet-48"] { -webkit-mask: url(/public/world/worn/helmet-48-hair.webp?v=4dd3dbab4f) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-48-hair.webp?v=4dd3dbab4f) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-48s&"], .doll-layer[src$="h=helmet-48s"] { -webkit-mask: url(/public/world/worn/helmet-48-hairs.webp?v=4dd3dbab4f) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-48-hairs.webp?v=4dd3dbab4f) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-51&"], .doll-layer[src$="h=helmet-51"] { -webkit-mask: url(/public/world/worn/helmet-51-hair.webp?v=fda4371453) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-51-hair.webp?v=fda4371453) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-51s&"], .doll-layer[src$="h=helmet-51s"] { -webkit-mask: url(/public/world/worn/helmet-51-hairs.webp?v=fda4371453) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-51-hairs.webp?v=fda4371453) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-53&"], .doll-layer[src$="h=helmet-53"] { -webkit-mask: url(/public/world/worn/helmet-53-hair.webp?v=87eb36da95) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-53-hair.webp?v=87eb36da95) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-53s&"], .doll-layer[src$="h=helmet-53s"] { -webkit-mask: url(/public/world/worn/helmet-53-hairs.webp?v=8bb2eb02bc) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-53-hairs.webp?v=8bb2eb02bc) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-54&"], .doll-layer[src$="h=helmet-54"] { -webkit-mask: url(/public/world/worn/helmet-54-hair.webp?v=50d91f9740) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-54-hair.webp?v=50d91f9740) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-54s&"], .doll-layer[src$="h=helmet-54s"] { -webkit-mask: url(/public/world/worn/helmet-54-hairs.webp?v=5af0564cd0) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-54-hairs.webp?v=5af0564cd0) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-55&"], .doll-layer[src$="h=helmet-55"] { -webkit-mask: url(/public/world/worn/helmet-55-hair.webp?v=c6a5de2890) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-55-hair.webp?v=c6a5de2890) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-55s&"], .doll-layer[src$="h=helmet-55s"] { -webkit-mask: url(/public/world/worn/helmet-55-hairs.webp?v=c6a5de2890) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-55-hairs.webp?v=c6a5de2890) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-56&"], .doll-layer[src$="h=helmet-56"] { -webkit-mask: url(/public/world/worn/helmet-56-hair.webp?v=762d0cbd12) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-56-hair.webp?v=762d0cbd12) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-56s&"], .doll-layer[src$="h=helmet-56s"] { -webkit-mask: url(/public/world/worn/helmet-56-hairs.webp?v=b374f36938) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-56-hairs.webp?v=b374f36938) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-57&"], .doll-layer[src$="h=helmet-57"] { -webkit-mask: url(/public/world/worn/helmet-57-hair.webp?v=517814dcbb) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-57-hair.webp?v=517814dcbb) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-57s&"], .doll-layer[src$="h=helmet-57s"] { -webkit-mask: url(/public/world/worn/helmet-57-hairs.webp?v=e2d356258d) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-57-hairs.webp?v=e2d356258d) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-59&"], .doll-layer[src$="h=helmet-59"] { -webkit-mask: url(/public/world/worn/helmet-59-hair.webp?v=eabe8bc9b6) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-59-hair.webp?v=eabe8bc9b6) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-59s&"], .doll-layer[src$="h=helmet-59s"] { -webkit-mask: url(/public/world/worn/helmet-59-hairs.webp?v=eabe8bc9b6) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-59-hairs.webp?v=eabe8bc9b6) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-67&"], .doll-layer[src$="h=helmet-67"] { -webkit-mask: url(/public/world/worn/helmet-67-hair.webp?v=eba1006429) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-67-hair.webp?v=eba1006429) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-67s&"], .doll-layer[src$="h=helmet-67s"] { -webkit-mask: url(/public/world/worn/helmet-67-hairs.webp?v=eba1006429) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-67-hairs.webp?v=eba1006429) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-68&"], .doll-layer[src$="h=helmet-68"] { -webkit-mask: url(/public/world/worn/helmet-68-hair.webp?v=2c60234e57) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-68-hair.webp?v=2c60234e57) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-68s&"], .doll-layer[src$="h=helmet-68s"] { -webkit-mask: url(/public/world/worn/helmet-68-hairs.webp?v=2c60234e57) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-68-hairs.webp?v=2c60234e57) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-70&"], .doll-layer[src$="h=helmet-70"] { -webkit-mask: url(/public/world/worn/helmet-70-hair.webp?v=1d7b3a89a6) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-70-hair.webp?v=1d7b3a89a6) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-70s&"], .doll-layer[src$="h=helmet-70s"] { -webkit-mask: url(/public/world/worn/helmet-70-hairs.webp?v=1d7b3a89a6) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-70-hairs.webp?v=1d7b3a89a6) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-71&"], .doll-layer[src$="h=helmet-71"] { -webkit-mask: url(/public/world/worn/helmet-71-hair.webp?v=759165dc37) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-71-hair.webp?v=759165dc37) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-71s&"], .doll-layer[src$="h=helmet-71s"] { -webkit-mask: url(/public/world/worn/helmet-71-hairs.webp?v=759165dc37) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-71-hairs.webp?v=759165dc37) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-72&"], .doll-layer[src$="h=helmet-72"] { -webkit-mask: url(/public/world/worn/helmet-72-hair.webp?v=530403099a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-72-hair.webp?v=530403099a) 0 0 / 100% 100%; }
.doll-layer[src*="h=helmet-72s&"], .doll-layer[src$="h=helmet-72s"] { -webkit-mask: url(/public/world/worn/helmet-72-hairs.webp?v=530403099a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-72-hairs.webp?v=530403099a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-01&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-01-hair6.webp?v=770ef1adcc) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-01-hair6.webp?v=770ef1adcc) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-01&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-01-hair7.webp?v=770ef1adcc) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-01-hair7.webp?v=770ef1adcc) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-01&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-01-hair8.webp?v=770ef1adcc) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-01-hair8.webp?v=770ef1adcc) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-01&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-01-hair9.webp?v=770ef1adcc) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-01-hair9.webp?v=770ef1adcc) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-01&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-01-hair10.webp?v=770ef1adcc) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-01-hair10.webp?v=770ef1adcc) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-01"] { -webkit-mask: url(/public/world/worn/helmet-01-ears.webp?v=12f16fcf7e) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-01-ears.webp?v=12f16fcf7e) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-08&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-08-hair6.webp?v=e2a4e055a9) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-08-hair6.webp?v=e2a4e055a9) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-08&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-08-hair7.webp?v=e2a4e055a9) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-08-hair7.webp?v=e2a4e055a9) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-08&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-08-hair8.webp?v=e2a4e055a9) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-08-hair8.webp?v=e2a4e055a9) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-08&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-08-hair9.webp?v=e2a4e055a9) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-08-hair9.webp?v=e2a4e055a9) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-08&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-08-hair10.webp?v=e2a4e055a9) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-08-hair10.webp?v=e2a4e055a9) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-08"] { -webkit-mask: url(/public/world/worn/helmet-08-ears.webp?v=4f664f5c8c) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-08-ears.webp?v=4f664f5c8c) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-09&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-09-hair6.webp?v=3165cf8e9a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-09-hair6.webp?v=3165cf8e9a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-09&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-09-hair7.webp?v=3165cf8e9a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-09-hair7.webp?v=3165cf8e9a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-09&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-09-hair8.webp?v=3165cf8e9a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-09-hair8.webp?v=3165cf8e9a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-09&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-09-hair9.webp?v=3165cf8e9a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-09-hair9.webp?v=3165cf8e9a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-09&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-09-hair10.webp?v=3165cf8e9a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-09-hair10.webp?v=3165cf8e9a) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-09"] { -webkit-mask: url(/public/world/worn/helmet-09-ears.webp?v=20c6e1b0e0) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-09-ears.webp?v=20c6e1b0e0) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-10&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-10-hair6.webp?v=0914b65003) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-10-hair6.webp?v=0914b65003) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-10&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-10-hair7.webp?v=0914b65003) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-10-hair7.webp?v=0914b65003) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-10&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-10-hair8.webp?v=0914b65003) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-10-hair8.webp?v=0914b65003) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-10&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-10-hair9.webp?v=0914b65003) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-10-hair9.webp?v=0914b65003) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-10&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-10-hair10.webp?v=0914b65003) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-10-hair10.webp?v=0914b65003) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-10"] { -webkit-mask: url(/public/world/worn/helmet-10-ears.webp?v=a61e87a663) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-10-ears.webp?v=a61e87a663) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-11&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-11-hair6.webp?v=09a8a5e4ae) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-11-hair6.webp?v=09a8a5e4ae) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-11&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-11-hair7.webp?v=09a8a5e4ae) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-11-hair7.webp?v=09a8a5e4ae) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-11&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-11-hair8.webp?v=09a8a5e4ae) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-11-hair8.webp?v=09a8a5e4ae) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-11&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-11-hair9.webp?v=09a8a5e4ae) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-11-hair9.webp?v=09a8a5e4ae) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-11&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-11-hair10.webp?v=09a8a5e4ae) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-11-hair10.webp?v=09a8a5e4ae) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-11"] { -webkit-mask: url(/public/world/worn/helmet-11-ears.webp?v=05bb38f54a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-11-ears.webp?v=05bb38f54a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-12&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-12-hair6.webp?v=2ae6253d2a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-12-hair6.webp?v=2ae6253d2a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-12&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-12-hair7.webp?v=2ae6253d2a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-12-hair7.webp?v=2ae6253d2a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-12&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-12-hair8.webp?v=2ae6253d2a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-12-hair8.webp?v=2ae6253d2a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-12&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-12-hair9.webp?v=2ae6253d2a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-12-hair9.webp?v=2ae6253d2a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-12&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-12-hair10.webp?v=2ae6253d2a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-12-hair10.webp?v=2ae6253d2a) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-12"] { -webkit-mask: url(/public/world/worn/helmet-12-ears.webp?v=afae6fce95) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-12-ears.webp?v=afae6fce95) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-13&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-13-hair6.webp?v=dfad27ff25) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-13-hair6.webp?v=dfad27ff25) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-13&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-13-hair7.webp?v=dfad27ff25) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-13-hair7.webp?v=dfad27ff25) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-13&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-13-hair8.webp?v=dfad27ff25) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-13-hair8.webp?v=dfad27ff25) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-13&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-13-hair9.webp?v=dfad27ff25) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-13-hair9.webp?v=dfad27ff25) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-13&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-13-hair10.webp?v=dfad27ff25) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-13-hair10.webp?v=dfad27ff25) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-13"] { -webkit-mask: url(/public/world/worn/helmet-13-ears.webp?v=b69ced57a7) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-13-ears.webp?v=b69ced57a7) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-14&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-14-hair6.webp?v=1b3f4c85c9) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-14-hair6.webp?v=1b3f4c85c9) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-14&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-14-hair7.webp?v=1b3f4c85c9) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-14-hair7.webp?v=1b3f4c85c9) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-14&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-14-hair8.webp?v=1b3f4c85c9) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-14-hair8.webp?v=1b3f4c85c9) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-14&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-14-hair9.webp?v=1b3f4c85c9) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-14-hair9.webp?v=1b3f4c85c9) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-14&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-14-hair10.webp?v=1b3f4c85c9) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-14-hair10.webp?v=1b3f4c85c9) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-14"] { -webkit-mask: url(/public/world/worn/helmet-14-ears.webp?v=a5b35f6610) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-14-ears.webp?v=a5b35f6610) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-16&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-16-hair6.webp?v=07c8ead1da) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-16-hair6.webp?v=07c8ead1da) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-16&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-16-hair7.webp?v=07c8ead1da) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-16-hair7.webp?v=07c8ead1da) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-16&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-16-hair8.webp?v=07c8ead1da) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-16-hair8.webp?v=07c8ead1da) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-16&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-16-hair9.webp?v=07c8ead1da) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-16-hair9.webp?v=07c8ead1da) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-16&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-16-hair10.webp?v=07c8ead1da) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-16-hair10.webp?v=07c8ead1da) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-16"] { -webkit-mask: url(/public/world/worn/helmet-16-ears.webp?v=51e3455dbe) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-16-ears.webp?v=51e3455dbe) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-19&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-19-hair6.webp?v=4e5fe2b26a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-19-hair6.webp?v=4e5fe2b26a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-19&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-19-hair7.webp?v=4e5fe2b26a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-19-hair7.webp?v=4e5fe2b26a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-19&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-19-hair8.webp?v=4e5fe2b26a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-19-hair8.webp?v=4e5fe2b26a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-19&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-19-hair9.webp?v=4e5fe2b26a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-19-hair9.webp?v=4e5fe2b26a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-19&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-19-hair10.webp?v=4e5fe2b26a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-19-hair10.webp?v=4e5fe2b26a) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-19"] { -webkit-mask: url(/public/world/worn/helmet-19-ears.webp?v=8687158c04) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-19-ears.webp?v=8687158c04) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-22&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-22-hair6.webp?v=ce706629b8) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-22-hair6.webp?v=ce706629b8) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-22&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-22-hair7.webp?v=ce706629b8) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-22-hair7.webp?v=ce706629b8) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-22&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-22-hair8.webp?v=ce706629b8) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-22-hair8.webp?v=ce706629b8) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-22&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-22-hair9.webp?v=ce706629b8) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-22-hair9.webp?v=ce706629b8) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-22&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-22-hair10.webp?v=ce706629b8) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-22-hair10.webp?v=ce706629b8) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-22"] { -webkit-mask: url(/public/world/worn/helmet-22-ears.webp?v=c53d65c612) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-22-ears.webp?v=c53d65c612) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-23&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-23-hair6.webp?v=19b7f707bb) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-23-hair6.webp?v=19b7f707bb) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-23&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-23-hair7.webp?v=19b7f707bb) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-23-hair7.webp?v=19b7f707bb) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-23&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-23-hair8.webp?v=19b7f707bb) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-23-hair8.webp?v=19b7f707bb) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-23&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-23-hair9.webp?v=19b7f707bb) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-23-hair9.webp?v=19b7f707bb) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-23&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-23-hair10.webp?v=19b7f707bb) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-23-hair10.webp?v=19b7f707bb) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-23"] { -webkit-mask: url(/public/world/worn/helmet-23-ears.webp?v=5f1e4a2063) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-23-ears.webp?v=5f1e4a2063) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-25&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-25-hair6.webp?v=4976c1c45c) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-25-hair6.webp?v=4976c1c45c) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-25&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-25-hair7.webp?v=4976c1c45c) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-25-hair7.webp?v=4976c1c45c) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-25&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-25-hair8.webp?v=4976c1c45c) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-25-hair8.webp?v=4976c1c45c) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-25&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-25-hair9.webp?v=4976c1c45c) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-25-hair9.webp?v=4976c1c45c) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-25&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-25-hair10.webp?v=4976c1c45c) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-25-hair10.webp?v=4976c1c45c) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-25"] { -webkit-mask: url(/public/world/worn/helmet-25-ears.webp?v=f9b17e8f9c) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-25-ears.webp?v=f9b17e8f9c) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-30&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-30-hair6.webp?v=fe447de2c1) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-30-hair6.webp?v=fe447de2c1) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-30&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-30-hair7.webp?v=fe447de2c1) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-30-hair7.webp?v=fe447de2c1) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-30&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-30-hair8.webp?v=fe447de2c1) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-30-hair8.webp?v=fe447de2c1) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-30&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-30-hair9.webp?v=fe447de2c1) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-30-hair9.webp?v=fe447de2c1) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-30&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-30-hair10.webp?v=fe447de2c1) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-30-hair10.webp?v=fe447de2c1) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-30"] { -webkit-mask: url(/public/world/worn/helmet-30-ears.webp?v=c6e5c9727d) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-30-ears.webp?v=c6e5c9727d) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-36&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-36-hair6.webp?v=954075f2fe) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-36-hair6.webp?v=954075f2fe) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-36&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-36-hair7.webp?v=954075f2fe) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-36-hair7.webp?v=954075f2fe) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-36&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-36-hair8.webp?v=954075f2fe) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-36-hair8.webp?v=954075f2fe) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-36&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-36-hair9.webp?v=954075f2fe) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-36-hair9.webp?v=954075f2fe) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-36&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-36-hair10.webp?v=954075f2fe) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-36-hair10.webp?v=954075f2fe) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-36"] { -webkit-mask: url(/public/world/worn/helmet-36-ears.webp?v=96c365864a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-36-ears.webp?v=96c365864a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-37&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-37-hair6.webp?v=f04f0b6a44) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-37-hair6.webp?v=f04f0b6a44) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-37&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-37-hair7.webp?v=f04f0b6a44) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-37-hair7.webp?v=f04f0b6a44) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-37&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-37-hair8.webp?v=f04f0b6a44) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-37-hair8.webp?v=f04f0b6a44) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-37&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-37-hair9.webp?v=f04f0b6a44) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-37-hair9.webp?v=f04f0b6a44) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-37&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-37-hair10.webp?v=f04f0b6a44) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-37-hair10.webp?v=f04f0b6a44) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-37"] { -webkit-mask: url(/public/world/worn/helmet-37-ears.webp?v=633beb2f3a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-37-ears.webp?v=633beb2f3a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-38&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-38-hair6.webp?v=ebd7d259c6) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-38-hair6.webp?v=ebd7d259c6) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-38&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-38-hair7.webp?v=ebd7d259c6) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-38-hair7.webp?v=ebd7d259c6) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-38&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-38-hair8.webp?v=ebd7d259c6) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-38-hair8.webp?v=ebd7d259c6) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-38&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-38-hair9.webp?v=ebd7d259c6) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-38-hair9.webp?v=ebd7d259c6) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-38&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-38-hair10.webp?v=ebd7d259c6) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-38-hair10.webp?v=ebd7d259c6) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-38"] { -webkit-mask: url(/public/world/worn/helmet-38-ears.webp?v=76127a2a33) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-38-ears.webp?v=76127a2a33) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-39&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-39-hair6.webp?v=ec74e93076) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-39-hair6.webp?v=ec74e93076) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-39&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-39-hair7.webp?v=ec74e93076) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-39-hair7.webp?v=ec74e93076) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-39&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-39-hair8.webp?v=ec74e93076) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-39-hair8.webp?v=ec74e93076) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-39&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-39-hair9.webp?v=ec74e93076) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-39-hair9.webp?v=ec74e93076) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-39&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-39-hair10.webp?v=ec74e93076) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-39-hair10.webp?v=ec74e93076) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-39"] { -webkit-mask: url(/public/world/worn/helmet-39-ears.webp?v=42428a424d) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-39-ears.webp?v=42428a424d) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-51&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-51-hair6.webp?v=fda4371453) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-51-hair6.webp?v=fda4371453) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-51&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-51-hair7.webp?v=fda4371453) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-51-hair7.webp?v=fda4371453) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-51&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-51-hair8.webp?v=fda4371453) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-51-hair8.webp?v=fda4371453) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-51&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-51-hair9.webp?v=fda4371453) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-51-hair9.webp?v=fda4371453) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-51&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-51-hair10.webp?v=fda4371453) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-51-hair10.webp?v=fda4371453) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-51"] { -webkit-mask: url(/public/world/worn/helmet-51-ears.webp?v=d7c10f8f23) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-51-ears.webp?v=d7c10f8f23) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-55&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-55-hair6.webp?v=c6a5de2890) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-55-hair6.webp?v=c6a5de2890) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-55&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-55-hair7.webp?v=c6a5de2890) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-55-hair7.webp?v=c6a5de2890) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-55&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-55-hair8.webp?v=c6a5de2890) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-55-hair8.webp?v=c6a5de2890) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-55&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-55-hair9.webp?v=c6a5de2890) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-55-hair9.webp?v=c6a5de2890) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-55&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-55-hair10.webp?v=c6a5de2890) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-55-hair10.webp?v=c6a5de2890) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-55"] { -webkit-mask: url(/public/world/worn/helmet-55-ears.webp?v=fa311da74b) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-55-ears.webp?v=fa311da74b) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-67&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-67-hair6.webp?v=eba1006429) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-67-hair6.webp?v=eba1006429) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-67&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-67-hair7.webp?v=eba1006429) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-67-hair7.webp?v=eba1006429) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-67&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-67-hair8.webp?v=eba1006429) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-67-hair8.webp?v=eba1006429) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-67&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-67-hair9.webp?v=eba1006429) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-67-hair9.webp?v=eba1006429) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-67&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-67-hair10.webp?v=eba1006429) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-67-hair10.webp?v=eba1006429) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-67"] { -webkit-mask: url(/public/world/worn/helmet-67-ears.webp?v=945c6f2dcc) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-67-ears.webp?v=945c6f2dcc) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-68&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-68-hair6.webp?v=2c60234e57) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-68-hair6.webp?v=2c60234e57) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-68&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-68-hair7.webp?v=2c60234e57) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-68-hair7.webp?v=2c60234e57) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-68&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-68-hair8.webp?v=2c60234e57) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-68-hair8.webp?v=2c60234e57) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-68&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-68-hair9.webp?v=2c60234e57) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-68-hair9.webp?v=2c60234e57) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-68&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-68-hair10.webp?v=2c60234e57) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-68-hair10.webp?v=2c60234e57) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-68"] { -webkit-mask: url(/public/world/worn/helmet-68-ears.webp?v=d565d2cc33) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-68-ears.webp?v=d565d2cc33) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-70&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-70-hair6.webp?v=1d7b3a89a6) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-70-hair6.webp?v=1d7b3a89a6) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-70&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-70-hair7.webp?v=1d7b3a89a6) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-70-hair7.webp?v=1d7b3a89a6) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-70&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-70-hair8.webp?v=1d7b3a89a6) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-70-hair8.webp?v=1d7b3a89a6) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-70&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-70-hair9.webp?v=1d7b3a89a6) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-70-hair9.webp?v=1d7b3a89a6) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-70&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-70-hair10.webp?v=1d7b3a89a6) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-70-hair10.webp?v=1d7b3a89a6) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-70"] { -webkit-mask: url(/public/world/worn/helmet-70-ears.webp?v=6be7bb1bac) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-70-ears.webp?v=6be7bb1bac) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-71&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-71-hair6.webp?v=759165dc37) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-71-hair6.webp?v=759165dc37) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-71&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-71-hair7.webp?v=759165dc37) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-71-hair7.webp?v=759165dc37) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-71&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-71-hair8.webp?v=759165dc37) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-71-hair8.webp?v=759165dc37) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-71&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-71-hair9.webp?v=759165dc37) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-71-hair9.webp?v=759165dc37) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-71&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-71-hair10.webp?v=759165dc37) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-71-hair10.webp?v=759165dc37) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-71"] { -webkit-mask: url(/public/world/worn/helmet-71-ears.webp?v=690f64cf76) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-71-ears.webp?v=690f64cf76) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-72&hs=6"] { -webkit-mask: url(/public/world/worn/helmet-72-hair6.webp?v=530403099a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-72-hair6.webp?v=530403099a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-72&hs=7"] { -webkit-mask: url(/public/world/worn/helmet-72-hair7.webp?v=530403099a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-72-hair7.webp?v=530403099a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-72&hs=8"] { -webkit-mask: url(/public/world/worn/helmet-72-hair8.webp?v=530403099a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-72-hair8.webp?v=530403099a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-72&hs=9"] { -webkit-mask: url(/public/world/worn/helmet-72-hair9.webp?v=530403099a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-72-hair9.webp?v=530403099a) 0 0 / 100% 100%; }
.doll-layer[src$="h=helmet-72&hs=10"] { -webkit-mask: url(/public/world/worn/helmet-72-hair10.webp?v=530403099a) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-72-hair10.webp?v=530403099a) 0 0 / 100% 100%; }
.doll-layer[src$="ears=helmet-72"] { -webkit-mask: url(/public/world/worn/helmet-72-ears.webp?v=8c482566b7) 0 0 / 100% 100%; mask: url(/public/world/worn/helmet-72-ears.webp?v=8c482566b7) 0 0 / 100% 100%; }
/* end helmet hair */

/* character backgrounds (bg slot, build_backgrounds.py): the picture fills the sheet behind the slots and the
   character; a legendary one moves. Each .bgp is a full-height strip whose particle sits at its top, so moving the
   strip by its own height carries the particle across the whole sheet (CSS only, CSP-safe). */
.paperdoll.has-bg, .char-sheet.has-bg { position: relative; isolation: isolate; }
.paperdoll.has-bg { background: var(--surface); }
.char-sheet.has-bg { padding: 8px; border-radius: var(--radius-sm); overflow: clip; }
.backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.backdrop > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.backdrop.placed > img { position: absolute; left: 0; top: 0; width: var(--bg-s); height: var(--bg-s); max-width: none; object-fit: fill; transform: translate(var(--bg-x), var(--bg-y)); }
.backdrop .bgfx { z-index: 1; }
.has-bg .pd-slot:not(.on) .pd-box, .has-bg .slot-mini li:not(.on) { background: var(--surface-2); opacity: 1; }
.has-bg .pd-slot small, .has-bg .slot-mini li:not(.on) small, .has-bg .cc-name { padding: 0 6px; border-radius: 6px; background: var(--surface); }
.pd-b1 { transform: translateX(-112%); } .pd-b2 { transform: none; }
.pd-b3 { grid-column: 2; grid-row: 5; justify-self: center; transform: translateX(112%); }
.char-card .slot-under { grid-template-columns: repeat(3, 72px); margin-top: 10px; }
.shop-reward { white-space: normal; text-align: center; }
.ach-rewards { display: grid; justify-items: end; gap: 4px; align-self: start; }
.ach-gear { display: inline-flex; align-items: center; gap: 4px; }
.ach-gear img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; }
.ach-pop-gear img { width: 40px; height: 40px; }

.bgfx { position: absolute; inset: 0; }
.bgp { position: absolute; top: 0; height: 100%; width: 18px; background: no-repeat 50% 0 / 12px 12px; will-change: transform; animation: bg-rise var(--t, 4s) linear var(--d, 0s) infinite both; }
.bgp-1 { left: 6%; --d: -.4s; --t: 4.2s; } .bgp-2 { left: 15%; --d: -2.1s; --t: 3.6s; } .bgp-3 { left: 24%; --d: -1.2s; --t: 5s; }
.bgp-4 { left: 33%; --d: -3.3s; --t: 4.4s; } .bgp-5 { left: 42%; --d: -.9s; --t: 3.8s; } .bgp-6 { left: 51%; --d: -2.7s; --t: 5.2s; }
.bgp-7 { left: 60%; --d: -1.6s; --t: 4s; } .bgp-8 { left: 69%; --d: -3.8s; --t: 4.6s; } .bgp-9 { left: 78%; --d: -.2s; --t: 3.9s; }
.bgp-10 { left: 86%; --d: -2.4s; --t: 4.8s; } .bgp-11 { left: 92%; --d: -1s; --t: 4.3s; } .bgp-12 { left: 2%; --d: -3s; --t: 5.4s; }
@keyframes bg-rise { from { transform: translateY(100%); opacity: 0; } 15% { opacity: 1; } 80% { opacity: .9; } to { transform: translateY(-6%); opacity: 0; } }
@keyframes bg-fall { from { transform: translateY(-6%) translateX(0) rotate(0); opacity: 0; } 12% { opacity: 1; } to { transform: translateY(100%) translateX(26px) rotate(200deg); opacity: .2; } }
@keyframes bg-twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes bg-flicker { 0%, 100% { opacity: .55; } 30% { opacity: .85; } 55% { opacity: .45; } 75% { opacity: .9; } }
@keyframes bg-flash { 0%, 89%, 93%, 100% { opacity: 0; } 90%, 92% { opacity: .85; } 91% { opacity: .2; } }
@keyframes bg-shoot { 0%, 70% { transform: translate(0, 0); opacity: 0; } 72% { opacity: 1; } 85%, 100% { transform: translate(-260%, 160%); opacity: 0; } }
@keyframes bg-sway { 0%, 100% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(-6%) scaleX(.85); } }
@keyframes bg-rays { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

/* inferno: embers rising over a flickering glow */
.bgfx-inferno .bgp { background-image: radial-gradient(circle, #fff3b0 0 25%, #ff9a2a 45%, rgba(255, 80, 0, 0) 70%); background-size: 10px 10px; }
.bgfx-inferno::after { content: ""; position: absolute; inset: 55% 0 0; background: radial-gradient(ellipse at 50% 100%, rgba(255, 110, 20, .7), rgba(255, 60, 0, 0) 70%); animation: bg-flicker 1.6s ease-in-out infinite; }
/* storm: slanted rain and lightning flashes */
.bgfx-storm .bgp { width: 3px; background-image: linear-gradient(rgba(200, 210, 255, 0), rgba(200, 210, 255, .8)); background-size: 2px 26px; transform-origin: top; animation-name: bg-fall; animation-duration: calc(var(--t) / 4); }
.bgfx-storm::before { content: ""; position: absolute; inset: 0; background: #e8e4ff; mix-blend-mode: screen; animation: bg-flash 5s linear infinite; }
.bgfx-storm::after { content: ""; position: absolute; left: 58%; top: 0; width: 18%; height: 62%; background: linear-gradient(#fff, #c9b8ff); clip-path: polygon(40% 0, 70% 0, 52% 38%, 78% 38%, 30% 100%, 44% 52%, 20% 52%); filter: drop-shadow(0 0 6px #b8a0ff); animation: bg-flash 5s linear infinite; }
/* heaven: swaying light rays and rising golden motes */
.bgfx-heaven::before { content: ""; position: absolute; inset: -20% 10% 30%; background: repeating-conic-gradient(from 160deg at 50% 0, rgba(255, 240, 180, .45) 0 4deg, rgba(255, 240, 180, 0) 4deg 12deg); transform-origin: 50% 0; animation: bg-rays 6s ease-in-out infinite alternate; }
.bgfx-heaven .bgp { background-image: radial-gradient(circle, #fff 0 20%, #ffd86a 40%, rgba(255, 216, 106, 0) 70%); background-size: 11px 11px; animation-duration: calc(var(--t) * 1.6); }
/* galaxy: twinkling stars and a shooting star */
.bgfx-galaxy .bgp { height: 100%; background-image: radial-gradient(circle, #fff 0 22%, rgba(180, 200, 255, 0) 65%); background-size: 9px 9px; animation: bg-twinkle calc(var(--t) / 2) ease-in-out var(--d) infinite; }
.bgfx-galaxy .bgp:nth-child(even) { background-position: 50% 30%; } .bgfx-galaxy .bgp:nth-child(3n) { background-position: 50% 12%; }
.bgfx-galaxy::after { content: ""; position: absolute; right: 4%; top: 6%; width: 70px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); transform-origin: left; rotate: -32deg; animation: bg-shoot 4.5s ease-in infinite; }
/* spirit shrine: falling petals and blue fox fires */
.bgfx-spirit .bgp { background-image: radial-gradient(ellipse 50% 32% at 50% 50%, #ffb7d2 0 70%, rgba(255, 183, 210, 0) 72%); animation-name: bg-fall; animation-duration: calc(var(--t) * 1.4); }
.bgfx-spirit .bgp:nth-child(4n) { background-image: radial-gradient(circle, #e0fbff 0 18%, #5ad8ff 40%, rgba(90, 216, 255, 0) 70%); background-size: 16px 16px; background-position: 50% 62%; animation: bg-sway 2.4s ease-in-out var(--d) infinite; }
/* abyss: rising bubbles */
.bgfx-abyss .bgp { background-image: radial-gradient(circle, rgba(255, 255, 255, 0) 0 48%, rgba(200, 245, 255, .9) 52% 62%, rgba(200, 245, 255, 0) 66%); animation-duration: calc(var(--t) * 1.3); }
.bgfx-abyss .bgp:nth-child(3n) { background-size: 18px 18px; }
@media (prefers-reduced-motion: reduce) { .bgfx, .bgfx * { animation: none !important; } .bgfx::before, .bgfx::after { animation: none !important; opacity: 0; } }

/* a weapon's own drawn swing (fx/swing-NN.webp, build_elements.py swing-art) in place of the motion's CSS shape */
.swing-fx.has-art { filter: none; }
.has-art .fx-shape { display: none; }
.fx-art { left: 0; top: 10%; width: 80%; height: auto; opacity: 0; transform-origin: 20% 60%; }
.m-slash .fx-art { left: 14%; top: 6%; width: 76%; opacity: 0; animation: art-sweep .45s ease-out .15s forwards; } /* with the strike (rig-sword) */
.posed-greatsword .fx-art { left: 12%; top: 20%; width: 96%; } /* a greatsword's cleave: bigger, down to the ground */
.m-smash .fx-art { left: -8%; top: 30%; width: 100%; animation: art-land .65s ease-out forwards; }
.m-thrust .fx-art, .m-shot .fx-art, .m-cast .fx-art, .m-throw .fx-art, .m-strum .fx-art { left: -4%; top: 18%; width: 72%; animation: art-fly .7s cubic-bezier(.2, .7, .4, 1) forwards; }
/* How much a swing shows goes by tier (swing-fx.js TIER): t-N the trail's and the element's (the higher of the weapon's
   rarity and the worn swing effect's), w-N the weapon's own. A common weapon leaves a faint thin plain trail, no glow;
   an uncommon one a slimmer coloured trail with a soft glow; the drawn swing glows from epic on; a legendary's has an
   afterimage and lands with a flare. */
.swing-fx.t-1 { filter: none; opacity: .5; }
.swing-fx.t-2:not(.has-art) { filter: drop-shadow(0 0 3px var(--c2)); opacity: .9; }
.t-1.m-slash .fx-shape { border-top-width: 5px; border-right-width: 3px; border-left-width: 0; }
.t-2.m-slash .fx-shape { border-top-width: 10px; border-right-width: 7px; border-left-width: 3px; }
.t-1.m-smash .fx-shape, .t-1.m-strum .fx-shape { border-width: 2px; box-shadow: none; }
.t-1.m-cast .fx-shape { border-width: 2px; box-shadow: none; width: 50%; left: 8%; top: 22%; }
.t-1.m-thrust .fx-shape { height: 4px; top: 37%; }
.t-1.m-shot .fx-shape { height: 3px; }
.t-1.m-throw .fx-shape { width: 14%; }
.w-4 .fx-art { filter: drop-shadow(0 0 5px var(--c1)); }
.w-5 .fx-art { filter: drop-shadow(0 0 4px var(--c3)) drop-shadow(0 0 12px var(--c1)); }
.w-5 .fx-art.fx-echo { filter: brightness(1.5) opacity(.4); scale: 1.14; }
.fx-flare { left: var(--x); top: var(--y); width: 96%; aspect-ratio: 1; margin: -48% 0 0 -48%; border-radius: 50%; opacity: 0; background: radial-gradient(circle, var(--c3) 0 8%, color-mix(in srgb, var(--c1) 70%, transparent) 22%, transparent 42%, color-mix(in srgb, var(--c1) 55%, transparent) 55%, transparent 62%); animation: fx-flare .5s ease-out var(--hd, 0ms) forwards; }
@keyframes fx-flare { 0% { opacity: 0; transform: scale(.15); } 20% { opacity: .95; } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes art-sweep { 0% { opacity: 0; transform: rotate(-35deg) scale(.7); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(10deg) scale(1.08); } }
@keyframes art-land { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes art-fly { 0% { opacity: 0; transform: translateX(-10%) scale(.8); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(70%) scale(1); } }

/* the drawn sprites over the moving backgrounds (fx/bg-<theme>-<n>.webp, build_elements.py bg-fx), over the dots above */
.bgfx-inferno .bgp:nth-child(odd) { background-image: url(/public/world/fx/bg-inferno-2.webp?v=8928c47c43); background-size: 24px auto; }
.bgfx-inferno .bgp:nth-child(even) { background-image: url(/public/world/fx/bg-inferno-1.webp?v=b7af333871); background-size: 20px auto; animation-duration: calc(var(--t) * .8); }
.bgfx-storm .bgp { width: 30px; background-image: url(/public/world/fx/bg-storm-3.webp?v=031ef629ea); background-size: 30px auto; }
.bgfx-storm::after { left: 52%; width: 34%; height: 70%; background: url(/public/world/fx/bg-storm-1.webp?v=f56a657664) no-repeat 50% 0 / contain; clip-path: none; filter: none; }
.bgfx-heaven .bgp:nth-child(4n+1) { width: 46px; background-image: url(/public/world/fx/bg-heaven-1.webp?v=85df0b283d); background-size: 46px auto; animation-duration: calc(var(--t) * 3); }
.bgfx-heaven .bgp:nth-child(4n+3) { width: 46px; background-image: url(/public/world/fx/bg-heaven-2.webp?v=6e6efa377b); background-size: 46px auto; animation-duration: calc(var(--t) * 3.4); }
.bgfx-galaxy .bgp:nth-child(3n+1) { background-image: url(/public/world/fx/bg-galaxy-2.webp?v=315c3d1bfb); background-size: 30px auto; }
.bgfx-galaxy .bgp:nth-child(5n) { width: 34px; background-image: url(/public/world/fx/bg-galaxy-3.webp?v=5e7708b8b8); background-size: 34px auto; }
.bgfx-galaxy::after { width: 90px; height: 50px; border-radius: 0; background: url(/public/world/fx/bg-galaxy-1.webp?v=0cb6d57375) no-repeat 50% 50% / contain; rotate: 0deg; }
.bgfx-spirit .bgp { background-image: url(/public/world/fx/bg-spirit-1.webp?v=0e6038eff3); background-size: 22px auto; }
.bgfx-spirit .bgp:nth-child(4n) { background-image: url(/public/world/fx/bg-spirit-2.webp?v=401bb40cbc); background-size: 24px auto; }
.bgfx-spirit .bgp:nth-child(5n+2) { width: 30px; background-image: url(/public/world/fx/bg-spirit-3.webp?v=dbd95950d9); background-size: 30px auto; background-position: 50% 0; animation: bg-rise calc(var(--t) * 3) linear var(--d) infinite both; }
.bgfx-abyss .bgp { background-image: url(/public/world/fx/bg-abyss-1.webp?v=eef345b00e); background-size: 22px auto; }
.bgfx-abyss .bgp:nth-child(4n+2) { width: 40px; background-image: url(/public/world/fx/bg-abyss-2.webp?v=00ff1edb2d); background-size: 40px auto; animation-duration: calc(var(--t) * 3); }

/* Separate screen artwork from the character backdrop and two effect slots. */
.paperdoll { grid-template-columns: 76px minmax(0, 1fr) 76px; }
/* One bottom toolbar: effects in the centre, backgrounds on the right. */
.pd-bg1, .pd-bg2 { grid-column: 1 / -1; grid-row: 5; justify-self: end; width: 76px; }
.pd-b1, .pd-b2, .pd-bg1, .pd-bg2 { align-self: start; }
.pd-doll { align-self: end; padding-bottom: 12px; }
.pd-bg1 { transform: translateX(calc(-100% - 12px)); }
.pd-doll .doll-pd { left: 0; }
.pd-doll .doll-pd { width: min(100%, 180px); }
.pd-b1 { transform: translateX(-56%); }
.pd-b2 { transform: translateX(56%); }
/* Reserve equal space on both sides so the body stays on the card centre,
   independently of the extra background controls on the right. */
.char-sheet { grid-template-columns: 64px 64px minmax(0, 1fr) 64px 64px; max-width: 500px; }
.char-sheet .slot-left { grid-column: 1 / 3; grid-row: 1; width: 64px; justify-self: start; }
.char-sheet .char-sheet-doll { grid-column: 3; grid-row: 1; }
.char-sheet .slot-right { grid-column: 4; grid-row: 1; }
.char-sheet .slot-backgrounds { grid-column: 5; grid-row: 1; }
.char-sheet .slot-backgrounds { order: 3; grid-template-columns: 1fr; align-content: center; gap: 12px; margin: 0; }
.char-card .slot-under { grid-template-columns: repeat(2, 72px); }
.slot-backgrounds { position: relative; z-index: 1; }
.has-bg .slot-backgrounds small { padding: 0 4px; border-radius: 6px; background: var(--surface); }
@media (max-width: 480px) {
  .paperdoll { grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 8px 5px; padding: 10px 6px; }
  .paperdoll .pd-doll .doll-pd { width: min(100%, 150px); }
  .paperdoll .pd-box { width: 44px; height: 44px; border-radius: 10px; }
  .paperdoll .pd-box img { width: 38px; height: 38px; }
  .paperdoll .pd-slot small { font-size: .65rem; }
  .paperdoll .pd-off { right: -2px; }
  .paperdoll .pd-off button { width: 24px; height: 24px; }
  .char-sheet { grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 5px; }
  .char-sheet .slot-left { grid-column: 1; width: auto; justify-self: stretch; }
  .char-sheet .char-sheet-doll { grid-column: 2; }
  .char-sheet .slot-right { grid-column: 3; }
  .char-sheet .slot-backgrounds { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, 64px); justify-content: center; margin-top: 8px; }
  .char-sheet .slot-mini li { min-width: 0; padding: 4px 2px; }
  .char-sheet .slot-mini img { width: 34px; height: 34px; }
  .char-sheet .slot-mini small { font-size: .62rem; }
}
body.has-page-bg { isolation: isolate; }
.page-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--bg); }
.page-backdrop picture, .page-backdrop img, .page-backdrop-scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-backdrop img { object-fit: cover; object-position: 50% 50%; }
.page-backdrop-scrim { background: rgba(255, 248, 235, .12); }
:root[data-theme="dark"] .page-backdrop-scrim { background: rgba(25, 17, 12, .28); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-backdrop-scrim { background: rgba(25, 17, 12, .28); }
}
/* epic and legendary screen art moves: the character backdrops' particles, drawn bigger for the whole screen */
.page-backdrop .bgfx { zoom: 2.4; }
@media (max-width: 600px) { .page-backdrop .bgfx { zoom: 1.5; } }
@media (prefers-reduced-motion: reduce) { .page-backdrop .bgfx { display: none; } }
body.has-page-bg #main { background: var(--surface); border-radius: var(--radius); margin-top: 16px; margin-bottom: 16px; }
body.has-page-bg.bare #main { margin: 0; }
/* With a screen background worn, the header card carries it too, on every screen: the card is taller, the art (and an
   epic background's effect) fills it, and the brand sits on a chip so it reads on any picture. It stays at the top
   while scrolling, with the same space above and below its chips. */
.header-art { display: none; }
body.has-page-bg .site-header { top: 0; background: var(--bg); border-bottom-width: var(--bw); }
body.has-page-bg .site-header .header-inner { position: relative; min-height: 76px; align-items: center; }
body.has-page-bg .header-art { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
body.has-page-bg .header-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
body.has-page-bg .header-art::after { content: ""; position: absolute; inset: 0; }
body.has-page-bg .header-art .bgfx { zoom: 1.3; }
/* the header's own look stays as it is (logo, bell, name): a soft frosted veil over the art keeps it readable */
body.has-page-bg .header-art::after { background: linear-gradient(rgba(255, 248, 235, .1), rgba(255, 248, 235, .18)); } /* the art as sharp as it can be: no blur, a thin veil */
:root[data-theme="dark"] body.has-page-bg .header-art::after { background: linear-gradient(rgba(25, 17, 12, .08), rgba(25, 17, 12, .18)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.has-page-bg .header-art::after { background: linear-gradient(rgba(25, 17, 12, .08), rgba(25, 17, 12, .18)); } }
body.has-page-bg .site-header .header-actions, body.has-page-bg .site-header .brand { position: relative; }
body.has-page-bg .site-header .user-name, body.has-page-bg .site-header .brand-name { text-shadow: 0 0 6px var(--bg), 0 0 2px var(--bg); }
@media (max-width: 600px) {
  body.has-page-bg .site-header .header-inner { min-height: 84px; }
  body.has-page-bg .header-art .bgfx { zoom: .8; }
}
@media (prefers-reduced-motion: reduce) { body.has-page-bg .header-art .bgfx { display: none; } }
/* the footer's small print sits on its own panel too, not on the picture */
body.has-page-bg .site-footer { background: var(--surface); border-top: 0; border-radius: var(--radius); padding-top: 14px; padding-bottom: 14px; margin-top: 0; margin-bottom: 20px; }
@media (max-width: 600px) {
  .page-backdrop-scrim { background: rgba(255, 248, 235, .18); }
  :root[data-theme="dark"] .page-backdrop-scrim { background: rgba(25, 17, 12, .34); }
}
@media (max-width: 600px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-backdrop-scrim { background: rgba(25, 17, 12, .34); }
}

/* Front-facing character art keeps its anatomical right hand when walking left.
   Movement direction is not a mirrored loadout. Preserve the original motion paths. */
.actor.face-left .doll { transform: none; }
.actor.face-left.walking .doll { animation-name: doll-walk; }
.actor.face-left.jumping .doll { animation-name: doll-jump; }
.actor.face-left.swinging .doll { animation-name: doll-swing; }
.slot-backgrounds li small { color: var(--text); background: var(--surface); opacity: 1; padding: 1px 4px; border-radius: 5px; white-space: normal; }
/* The bowstring can cross the cheek, but the gripping fingers stay in front. */
.doll.posed { isolation: isolate; }
.doll.posed .pose-string { z-index: 1; }
.doll.posed .pose-layer[src*="-fist-"],
.doll.posed .pose-clothes-layer[src*="-over.webp"] { z-index: 2; }

/* The equipped character background fills the entire framed character window:
   title, equipment, aura/swing, two background slots and actions all sit inside. */
.char-card.has-bg { position: relative; isolation: isolate; overflow: hidden; }
.char-card.has-bg > .backdrop { inset: 0; z-index: -1; border-radius: inherit; }
.char-card.has-bg .char-sheet { max-width: none; width: 100%; padding: 8px 4px; }
.char-card.has-bg > h2 { width: fit-content; padding: 3px 8px; border-radius: 8px; background: var(--surface); }
.char-card.has-bg .slot-mini li:not(.on) { background: var(--surface-2); opacity: 1; }
.char-card.has-bg .slot-mini small { background: var(--surface); color: var(--text); padding: 1px 5px; border-radius: 5px; }
.char-card.has-bg > .char-card-actions { position: relative; }

/* Four controls stay on a single bottom baseline even on narrow screens. */
@media (max-width: 640px) {
  .paperdoll .pd-b1, .paperdoll .pd-b2 { grid-column: 1 / -1; justify-self: start; width: 56px; }
  .paperdoll .pd-b1 { transform: none; }
  .paperdoll .pd-b2 { transform: translateX(calc(100% + 8px)); }
  .paperdoll .pd-bg1, .paperdoll .pd-bg2 { width: 64px; }
  .paperdoll .pd-bg1 { transform: translateX(calc(-100% - 8px)); }
  .paperdoll .pd-b1 .pd-box, .paperdoll .pd-b2 .pd-box,
  .paperdoll .pd-bg1 .pd-box, .paperdoll .pd-bg2 .pd-box { width: 44px; height: 44px; border-radius: 10px; }
  .paperdoll .pd-b1 .pd-box img, .paperdoll .pd-b2 .pd-box img,
  .paperdoll .pd-bg1 .pd-box img, .paperdoll .pd-bg2 .pd-box img { width: 38px; height: 38px; }
}

.paperdoll .pd-b1 small, .paperdoll .pd-b2 small, .paperdoll .pd-bg1 small, .paperdoll .pd-bg2 small { white-space: nowrap; }

/* Profile and equipment screens use the same bottom-toolbar placement.
   Contents participates in the outer grid so backgrounds cannot become a side column. */
.char-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 12px 10px; }
.char-card > h2 { grid-column: 1 / -1; grid-row: 1; margin: 0; }
.char-card .char-sheet { display: contents; }
.char-card .char-sheet .slot-left { grid-column: 1; grid-row: 2; width: auto; justify-self: stretch; }
.char-card .char-sheet .slot-right { grid-column: 3; grid-row: 2; }
.char-card .char-sheet .char-sheet-doll { grid-column: 2; grid-row: 2; align-self: end; padding-bottom: 12px; }
.char-card .char-sheet .slot-backgrounds { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(2, 64px); justify-self: end; align-self: start; gap: 8px; margin: 0; }
.char-card > .slot-under { grid-column: 1 / -1; grid-row: 3; justify-self: center; align-self: start; margin: 0; }
.char-card > .char-card-actions { grid-column: 1 / -1; grid-row: 4; margin-top: 0; }
.char-card .slot-backgrounds small { white-space: nowrap; padding-inline: 2px; font-size: .65rem; }
@media (max-width: 640px) {
  .char-card { grid-template-columns: 46px minmax(0, 1fr) 46px; }
  .char-card > .slot-under { justify-self: start; grid-template-columns: repeat(2, 50px); gap: 8px; }
  .char-card .char-sheet .slot-backgrounds { grid-template-columns: repeat(2, 60px); }
  .char-card .slot-under li, .char-card .slot-backgrounds li { padding: 4px 2px; }
  .char-card .slot-under img, .char-card .slot-backgrounds img { width: 34px; height: 34px; }
  .char-card .slot-under small, .char-card .slot-backgrounds small { font-size: .6rem; padding-inline: 2px; white-space: nowrap; }
}

/* Three companion/effect slots, followed by the two background slots. */
.paperdoll .pd-b1 { transform: translateX(-112%); }
.paperdoll .pd-b2 { transform: none; }
.paperdoll .pd-b3 { grid-column: 2; grid-row: 5; justify-self: center; align-self: start; transform: translateX(112%); }
.paperdoll .pd-b3 small { white-space: nowrap; }
.char-card > .slot-under { grid-template-columns: repeat(3, 64px); }
@media (max-width: 640px) {
  .paperdoll .pd-b1, .paperdoll .pd-b2, .paperdoll .pd-b3,
  .paperdoll .pd-bg1, .paperdoll .pd-bg2 { grid-column: 1 / -1; width: calc((100% - 32px) / 5); }
  .paperdoll .pd-b1, .paperdoll .pd-b2, .paperdoll .pd-b3 { justify-self: start; }
  .paperdoll .pd-b1 { transform: none; }
  .paperdoll .pd-b2 { transform: translateX(calc(100% + 8px)); }
  .paperdoll .pd-b3 { transform: translateX(calc(200% + 16px)); }
  .paperdoll .pd-b1 .pd-box, .paperdoll .pd-b2 .pd-box, .paperdoll .pd-b3 .pd-box,
  .paperdoll .pd-bg1 .pd-box, .paperdoll .pd-bg2 .pd-box { width: min(44px, 100%); height: 44px; border-radius: 10px; }
  .paperdoll .pd-b3 .pd-box img { width: 38px; height: 38px; }
  .paperdoll .pd-b1 small, .paperdoll .pd-b2 small, .paperdoll .pd-b3 small,
  .paperdoll .pd-bg1 small, .paperdoll .pd-bg2 small { font-size: .57rem; padding-inline: 1px; }
  .char-card > .slot-under { width: calc(60% - 3.2px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .char-card .char-sheet .slot-backgrounds { width: calc(40% - 4.8px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .char-card .slot-under small, .char-card .slot-backgrounds small { font-size: .57rem; padding-inline: 1px; }
}

/* Sword swings animate authored arms and the weapon, not the torso/cape. */
.actor.swinging[data-swing~="r-sword"] .doll { animation: none; }

/* Room scale: the scene and readable characters lead, side panels stay compact. */
@media (min-width: 1001px) {
  .room .room-layout { grid-template-columns: 160px minmax(0, 1fr) 196px; gap: 14px; }
  .room .room-main { min-width: 0; }
  .room .stage .actor { width: 8.5%; }
}
.room .actor-name { font-size: .75rem; line-height: 1.25; }
.room .actor-name .lv { font-size: .63rem; }
.room .bubble { font-size: .85rem; }
.room .move-hint { font-size: .85rem; line-height: 1.5; }
.room .people-list { scrollbar-width: thin; }
@media (max-width: 1000px) {
  .room .stage .actor { width: 10%; }
}
@media (max-width: 480px) {
  .room .stage .actor { width: 12%; }
  .room .actor-name { font-size: .65rem; }
  .room .bubble { font-size: .75rem; }
}

.room .people-list .lv, .room .people-list .av { flex-shrink: 0; white-space: nowrap; }

/* The worn pet (pet.js): it roams over the page without taking clicks; in the gear panel on a phone. Bigger and
   grander by tier; walkers waddle, hoppers hop, fliers bob. Its special shows its effect: a breath streams out ahead
   of it, a burst blooms round it. */
.pet { position: fixed; left: 0; top: 0; z-index: 30; width: 60px; pointer-events: none; will-change: transform; }
.pet.in-panel { position: absolute; z-index: 3; }
.pet.in-panel .pet-fx { scale: .7; } /* a smaller special in the small panel */
.paperdoll, .char-card { position: relative; } /* the pet's box on a phone */
.pet.t-uncommon { width: 66px; } .pet.t-rare { width: 76px; } .pet.t-epic { width: 92px; } .pet.t-legendary { width: 112px; }
@media (max-width: 600px) { .pet { width: 46px; } .pet.t-uncommon { width: 50px; } .pet.t-rare { width: 56px; } .pet.t-epic { width: 66px; } .pet.t-legendary { width: 78px; } }
.pet-body { position: relative; display: block; filter: drop-shadow(0 3px 0 rgba(42, 29, 18, .22)); }
.pet.left .pet-body { transform: scaleX(-1); }
.pet-sprite { position: relative; z-index: 1; display: block; width: 100%; height: auto; transform-origin: 50% 100%; } /* over a burst, so the pet stays in sight */
.pet.m-walk.moving .pet-sprite { animation: pet-waddle .46s ease-in-out infinite; }
.pet.m-hop.moving .pet-sprite { animation: pet-hop .52s cubic-bezier(.3, 0, .4, 1) infinite; }
.pet.m-fly .pet-sprite, .pet.m-float .pet-sprite { animation: pet-bob 1.7s ease-in-out infinite; }
.pet.m-fly.moving .pet-sprite { animation-duration: .8s; }
.pet.casting .pet-sprite { animation: pet-cast 1.2s ease-out; }
@keyframes pet-waddle { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg) translateY(-4%); } }
@keyframes pet-hop { 0%, 100% { transform: translateY(0) scaleY(.92); } 45% { transform: translateY(-34%) scaleY(1.06); } }
@keyframes pet-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9%); } }
@keyframes pet-cast { 0% { transform: scale(1); } 18% { transform: scale(.94) translateX(-4%); } 32% { transform: scale(1.1) translateX(3%); } 80% { transform: scale(1.06); } 100% { transform: scale(1); } }
.pet-fx { position: absolute; opacity: 0; max-width: none; pointer-events: none; }
.pet-fx.breath { z-index: 2; left: 80%; top: 42%; translate: 0 -50%; width: 170%; transform-origin: 0 50%; } /* centred on the mouth */
.pet-fx.burst { left: -45%; top: -55%; width: 190%; transform-origin: 50% 60%; }
.pet.t-epic .pet-fx.breath { width: 210%; } .pet.t-legendary .pet-fx.breath { width: 230%; }
.pet.t-epic .pet-fx.burst { left: -60%; top: -75%; width: 220%; } .pet.t-legendary .pet-fx.burst { left: -85%; top: -105%; width: 270%; }
.pet.t-legendary .pet-fx { filter: drop-shadow(0 0 6px rgba(255, 230, 150, .9)); }
.pet.casting .pet-fx.breath { animation: pet-breath 1.05s ease-out .18s both; }
.pet.casting .pet-fx.burst { animation: pet-burst 1.05s ease-out .18s both; }
@keyframes pet-breath { 0% { opacity: 0; transform: scaleX(.15) scaleY(.5); } 22% { opacity: 1; transform: scaleX(1) scaleY(1); } 70% { opacity: 1; transform: scaleX(1.08) scaleY(1.05); } 100% { opacity: 0; transform: scaleX(1.18) scaleY(.9); } }
@keyframes pet-burst { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1); } 70% { opacity: 1; transform: scale(1.08) rotate(4deg); } 100% { opacity: 0; transform: scale(1.2) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .pet-sprite, .pet-fx { animation: none !important; } }

/* Crafting (views/world.mjs fusion): the two ingredients spin together glowing, a flash, and the new item bursts out
   with rays in its rarity's colour. Plays once over the page (3s), never takes clicks. */
.fusion { --glow: #ffe9a8; position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; background: rgba(24, 15, 10, .78); animation: fusion-veil 3.1s ease-out forwards; }
.fusion.rarity-uncommon { --glow: #9ff0b4; } .fusion.rarity-rare { --glow: #9fd4ff; } .fusion.rarity-epic { --glow: #d9a8ff; } .fusion.rarity-legendary { --glow: #ffb36b; }
.fusion-stage { position: relative; width: min(60vw, 260px); aspect-ratio: 1; }
.fusion-stage > * { position: absolute; }
.fusion-in { left: 32%; top: 32%; width: 36%; height: 36%; object-fit: contain; filter: drop-shadow(0 0 6px var(--glow)); }
.fusion-a { animation: fusion-a 1.35s cubic-bezier(.5, 0, .8, .4) forwards; }
.fusion-b { animation: fusion-b 1.35s cubic-bezier(.5, 0, .8, .4) forwards; }
.fusion-flash { inset: 30%; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, var(--glow) 55%, transparent 72%); opacity: 0; animation: fusion-flash 1s ease-out 1.15s forwards; }
.fusion-rays { inset: -20%; border-radius: 50%; opacity: 0; background: repeating-conic-gradient(from 0deg, var(--glow) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 68%); mask: radial-gradient(circle, #000 0 30%, transparent 68%); animation: fusion-rays 1.7s linear 1.35s forwards; }
.fusion-out { left: 18%; top: 18%; width: 64%; height: 64%; object-fit: contain; opacity: 0; filter: drop-shadow(0 0 10px var(--glow)) drop-shadow(0 0 22px var(--glow)); animation: fusion-out 1.6s cubic-bezier(.2, 1.4, .4, 1) 1.4s forwards; }
@keyframes fusion-veil { 0% { opacity: 0; } 8% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes fusion-a { 0% { transform: translateX(-130%) rotate(0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateX(-38%) rotate(-200deg) scale(1.05); filter: drop-shadow(0 0 12px var(--glow)) brightness(1.4); } 100% { transform: translateX(0) rotate(-540deg) scale(.5); filter: drop-shadow(0 0 20px #fff) brightness(3); opacity: 0; } }
@keyframes fusion-b { 0% { transform: translateX(130%) rotate(0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateX(38%) rotate(200deg) scale(1.05); filter: drop-shadow(0 0 12px var(--glow)) brightness(1.4); } 100% { transform: translateX(0) rotate(540deg) scale(.5); filter: drop-shadow(0 0 20px #fff) brightness(3); opacity: 0; } }
@keyframes fusion-flash { 0% { opacity: 0; transform: scale(.2); } 25% { opacity: 1; transform: scale(2.6); } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes fusion-rays { 0% { opacity: 0; transform: rotate(0) scale(.6); } 20% { opacity: .9; } 100% { opacity: 0; transform: rotate(120deg) scale(1.15); } }
@keyframes fusion-out { 0% { opacity: 0; transform: scale(.2) rotate(-12deg); } 45% { opacity: 1; transform: scale(1.18) rotate(4deg); } 70% { transform: scale(1) rotate(0); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fusion { display: none; } }

/* Gear stats (services/gear-stats.mjs): the worn set's totals on the gear page, and a line on every item. */
.be-fire { --be: #e2532d; } .be-water { --be: #2f8fd6; } .be-nature { --be: #3d9a57; } .be-thunder { --be: #8a6a00; } .be-light { --be: #a0612a; } .be-dark { --be: #7a55c7; }
.stat-panel { display: grid; grid-template-columns: auto auto auto 1fr; gap: 6px 14px; align-items: center; margin: 0 0 14px; padding: 12px 14px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface-2); box-shadow: 3px 3px 0 var(--shadow); }
.stat-panel small { display: block; font-size: .7rem; font-weight: 800; color: var(--muted); }
.sp-power strong { font-family: var(--mono); font-size: 1.7rem; font-weight: 900; line-height: 1; }
.sp-el { padding-left: 14px; border-left: 2px dashed var(--line); }
.sp-el strong { display: flex; align-items: center; gap: 6px; font-size: 1.05rem; font-weight: 900; white-space: nowrap; }
.sp-el em { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: .72rem; font-style: normal; font-weight: 700; color: var(--muted); }
.sp-nums { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; font-size: .85rem; font-weight: 700; color: var(--muted); }
.sp-nums b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.sp-set { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 10px; border: 2px dashed var(--line); border-radius: 10px; font-size: .82rem; font-weight: 700; }
.sp-set.on { border-style: solid; background: var(--surface); }
.sp-set em { font-style: normal; font-weight: 900; color: var(--muted); }
.sp-set.on em { color: var(--orange); }
.sp-tier { padding: 0 7px; border-radius: 999px; border: 2px solid var(--line); background: var(--r-bg, var(--surface-2)); color: #2a1d12; font-size: .72rem; font-weight: 900; }
.sp-next { flex-basis: 100%; font-size: .74rem; color: var(--muted); }
.sp-set.on > b::after { content: " ·"; margin-left: 4px; color: var(--muted); font-weight: 700; } /* 불의 공명 · 영웅 공격 +16% */
.sp-sets p { margin: 6px 0 0; }
.sp-sets { grid-column: 1 / -1; font-size: .8rem; }
.sp-sets summary { cursor: pointer; font-weight: 800; color: var(--muted); }
.sp-sets ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 4px 12px; }
.sp-sets li { display: flex; align-items: center; gap: 6px; }
.sp-sets li b { white-space: nowrap; }
.sp-sets li span:last-child { color: var(--muted); font-weight: 700; }
.sp-note { grid-column: 1 / -1; font-weight: 600 !important; }
@media (max-width: 600px) { .stat-panel { grid-template-columns: auto auto 1fr; gap: 6px 10px; } .sp-el { padding-left: 10px; } .sp-nums { grid-column: 1 / -1; justify-content: flex-start; } }
/* a battle element: a round icon in the element's colour */
.el-dot { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--be); border: 2px solid var(--line); box-shadow: 1px 1px 0 var(--shadow); font-size: 14px; line-height: 1; font-style: normal; }
.el-dot.el-small { width: 20px; height: 20px; font-size: 11px; }
.el-dot.el-corner { position: absolute; top: 6px; right: 6px; }
.stat-line { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 3px 4px; min-height: 20px; }
.stat-line .st { padding: 1px 6px; border-radius: 6px; background: var(--surface-2); font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* item cards line up: the name keeps two lines, the numbers one row, the button sits at the bottom, and "worn" is a
   tag on the corner */
.inv-item, .shop-item { position: relative; }
.inv-item { grid-template-rows: auto auto auto auto 1fr; align-items: start; }
.inv-item .inv-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; line-height: 1.25; align-content: center; }
.inv-item form { align-self: end; }
.inv-item .inv-worn { position: absolute; top: 6px; left: 6px; margin: 0; font-size: .62rem; padding: 1px 6px; }
.char-card + .stat-panel { margin: -8px 0 22px; } /* under the profile's character card: inside it, the card grew and its background slid off the character */

/* The room's swing button: on touch screens and narrow windows, where there is no F key. */
.stage-swing { display: none; position: absolute; right: 44px; bottom: 10px; z-index: 6; width: 52px; height: 52px; padding: 0; border: var(--bw) solid var(--line); border-radius: 50%; background: var(--orange); box-shadow: 3px 3px 0 var(--shadow); font-size: 1.5rem; line-height: 1; cursor: pointer; touch-action: manipulation; }
.stage-swing:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }
@media (hover: none), (max-width: 700px) { .stage-swing { display: grid; place-items: center; } }

/* Raids (views/raid.mjs) */
.raid-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.raid-card > a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 3px 3px 0 var(--shadow); color: inherit; text-decoration: none; }
.raid-card-boss { width: 76px; height: 76px; object-fit: contain; flex: none; }
.raid-card-body { display: grid; gap: 4px; min-width: 0; }
.raid-card-body strong { font-size: .92rem; line-height: 1.25; }
.raid-card-body small { color: var(--muted); font-weight: 700; font-size: .74rem; }
.raid-card-boss.no-hurt, .raid-boss.no-hurt { filter: grayscale(1); opacity: .6; }
.raid-claims { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
progress.raid-hp { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface-2); overflow: hidden; }
progress.raid-hp::-webkit-progress-bar { background: var(--surface-2); }
progress.raid-hp::-webkit-progress-value { background: linear-gradient(90deg, #e2532d, #f2a33a); transition: width .4s; }
progress.raid-hp::-moz-progress-bar { background: linear-gradient(90deg, #e2532d, #f2a33a); }
progress.raid-hp.big { height: 20px; }
.raid-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0; font-size: .86rem; color: var(--muted); font-weight: 700; }
.raid-facts b { color: var(--text); }
.raid-attack { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 16px; }
.raid-attack { display: grid; gap: 12px; }
.raid-attack-meta { font-size: .82rem; }
/* attack stamp (Astra's design): chunky, orange and raised when it can be pressed, flat and muted when it cannot */
.raid-btn { --atk-line: #17110b; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 460px; height: 72px; margin-bottom: 5px; padding: 0 16px; border: 3px solid var(--atk-line); border-radius: 18px; background: #f56528; color: #241a12; font: inherit; box-shadow: 0 5px 0 var(--atk-line); cursor: pointer; transition: transform .08s ease-out, box-shadow .08s ease-out; -webkit-tap-highlight-color: transparent; }
.raid-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--atk-line); }
.raid-btn:focus-visible { outline: 3px solid #f2c14e; outline-offset: 4px; }
.raid-btn-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.raid-btn-ico { font-size: 24px; line-height: 1; }
.raid-btn-ico i { font-style: normal; }
.raid-btn-label { font-size: 20px; font-weight: 800; white-space: nowrap; }
.raid-btn-count { display: grid; justify-items: end; gap: 5px; flex: none; }
.raid-btn-count small { font-size: 13px; font-weight: 700; }
.raid-pips { display: flex; gap: 4px; }
.raid-pips i { width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%; }
.raid-btn[data-left="1"] .raid-pips i:nth-child(-n+1), .raid-btn[data-left="2"] .raid-pips i:nth-child(-n+2), .raid-btn[data-left="3"] .raid-pips i:nth-child(-n+3) { background: #f2c14e; }
.raid-btn:not(:disabled) .raid-pips i { background: rgba(36, 26, 18, .22); }
.raid-btn:not(:disabled)[data-left="1"] .raid-pips i:nth-child(-n+1), .raid-btn:not(:disabled)[data-left="2"] .raid-pips i:nth-child(-n+2), .raid-btn:not(:disabled)[data-left="3"] .raid-pips i:nth-child(-n+3) { background: #fff3d6; }
.raid-btn [class^="s-"] { display: none; }
.raid-btn[data-state="ready"] .s-ready, .raid-btn[data-state="done"] .s-done, .raid-btn[data-state="done"] i.s-ready, .raid-btn[data-state="turn"] .s-turn, .raid-btn[data-state="down"] .s-down { display: inline; }
.raid-btn:disabled { cursor: default; }
.raid-btn:disabled:not([data-state="ready"]) { --atk-flat: #e9dfcd; --atk-mute: #74634f; background: var(--atk-flat); border-color: var(--atk-mute); color: var(--atk-mute); box-shadow: none; }
.raid-btn:disabled:not([data-state="ready"]) .raid-btn-ico { filter: grayscale(1); opacity: .7; }
:root[data-theme="dark"] .raid-btn:disabled:not([data-state="ready"]) { --atk-flat: #382c20; --atk-mute: #b8aa92; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .raid-btn:disabled:not([data-state="ready"]) { --atk-flat: #382c20; --atk-mute: #b8aa92; } }
@media (prefers-reduced-motion: reduce) { .raid-btn { transition: none; } }
.raid-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .raid-cols { grid-template-columns: 1fr; } }
.raid-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.raid-log li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.raid-dmg { font: 900 1rem var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.raid-dmg.crit { color: #e2532d; }
.rank-names .lv { width: fit-content; margin-top: 2px; }
.raid-reward { margin: 8px 0 16px; padding: 12px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.mats-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 14px; padding: 8px 12px; border: 2px dashed var(--line); border-radius: 12px; font-size: .86rem; }
.mats-title { font-weight: 900; }
.mat-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: 999px; background: var(--surface-2); font-weight: 700; font-size: .8rem; }
.mat-chip img { width: 26px; height: 26px; object-fit: contain; }
.recipe-in.mat em { font-style: normal; font: 800 .7rem var(--mono); }
.recipe-in.mat.short em { color: #e2532d; }
/* The boss arena (designed by Fable, 2026-11-11): a JRPG battle screen. The boss stands big in the middle, the
   member's character small at the bottom left facing it with its weapon. Every motion is transform/opacity.
   Who moves what (so animations never fight): .raid-scene quakes; .raid-foe enters, roars and dies; .raid-foe-sway is
   hit and trembles; .raid-body breathes; .raid-me-move steps and flinches; the doll is swing-fx.js's. */
.raid-one.be-fire { --e1: #ff6a2b; --e2: #4a1408; --e3: #ffd27a; --boss: url(/public/world/raid/boss-fire.webp?v=c0c2f0941e); }
.raid-one.be-water { --e1: #3aa0ff; --e2: #0b2c5c; --e3: #b8e6ff; --boss: url(/public/world/raid/boss-water.webp?v=c9cf2689f9); }
.raid-one.be-nature { --e1: #58c23f; --e2: #153d1c; --e3: #d6f59a; --boss: url(/public/world/raid/boss-nature.webp?v=d7beb2e8e1); }
.raid-one.be-thunder { --e1: #ffd21f; --e2: #2c2152; --e3: #fff7b0; --boss: url(/public/world/raid/boss-thunder.webp?v=042e1cf33c); }
.raid-one.be-light { --e1: #ffe9a6; --e2: #5c4d24; --e3: #ffffff; --boss: url(/public/world/raid/boss-light.webp?v=d8f7f1dff9); }
.raid-one.be-dark { --e1: #8e4dff; --e2: #160c2c; --e3: #d0b3ff; --boss: url(/public/world/raid/boss-dark.webp?v=9474d51917); }
.raid-one.bk-fire-1 { --boss: url(/public/world/raid/boss-fire-1.webp?v=f5b53e9cee); }
.raid-one.bk-fire-2 { --boss: url(/public/world/raid/boss-fire-2.webp?v=a6811df9d7); }
.raid-one.bk-fire-3 { --boss: url(/public/world/raid/boss-fire-3.webp?v=d10f2dd998); }
.raid-one.bk-water-1 { --boss: url(/public/world/raid/boss-water-1.webp?v=45f8d8ac15); }
.raid-one.bk-water-2 { --boss: url(/public/world/raid/boss-water-2.webp?v=6d25d0c053); }
.raid-one.bk-water-3 { --boss: url(/public/world/raid/boss-water-3.webp?v=0ec3017ff3); }
.raid-one.bk-nature-1 { --boss: url(/public/world/raid/boss-nature-1.webp?v=a3dadb6f3e); }
.raid-one.bk-nature-2 { --boss: url(/public/world/raid/boss-nature-2.webp?v=c5951023cd); }
.raid-one.bk-nature-3 { --boss: url(/public/world/raid/boss-nature-3.webp?v=d099f6a192); }
.raid-one.bk-thunder-1 { --boss: url(/public/world/raid/boss-thunder-1.webp?v=57e121c46f); }
.raid-one.bk-thunder-2 { --boss: url(/public/world/raid/boss-thunder-2.webp?v=ca9d7836bc); }
.raid-one.bk-thunder-3 { --boss: url(/public/world/raid/boss-thunder-3.webp?v=0cc7bfea55); }
.raid-one.bk-light-1 { --boss: url(/public/world/raid/boss-light-1.webp?v=101feed699); }
.raid-one.bk-light-2 { --boss: url(/public/world/raid/boss-light-2.webp?v=dfdd805982); }
.raid-one.bk-light-3 { --boss: url(/public/world/raid/boss-light-3.webp?v=b182b02525); }
.raid-one.bk-dark-1 { --boss: url(/public/world/raid/boss-dark-1.webp?v=3fdebbea5f); }
.raid-one.bk-dark-2 { --boss: url(/public/world/raid/boss-dark-2.webp?v=df09b006db); }
.raid-one.bk-dark-3 { --boss: url(/public/world/raid/boss-dark-3.webp?v=49e0838ee9); }
.raid-arena { position: relative; height: clamp(440px, 118vw, 560px); margin: 8px 0 12px; border: var(--bw) solid var(--line); border-radius: var(--radius); overflow: hidden; background: linear-gradient(180deg, #14101c 0%, var(--e2) 100%); box-shadow: 4px 4px 0 var(--shadow); container-type: inline-size; }
@media (min-width: 601px) { .raid-arena { height: 560px; } }
.raid-scene { position: absolute; inset: 0; }
.raid-scene > * { position: absolute; }
.raid-cover { z-index: 0; inset: -6%; width: 112%; height: 82%; object-fit: cover; opacity: .45; filter: blur(6px) saturate(1.25); -webkit-mask-image: linear-gradient(#000 55%, transparent 100%); mask-image: linear-gradient(#000 55%, transparent 100%); }
.raid-ground { z-index: 1; left: 0; right: 0; bottom: 0; height: 32%; background: radial-gradient(ellipse 60% 90% at 55% 8%, color-mix(in srgb, var(--e1) 55%, transparent), transparent 70%), linear-gradient(transparent, var(--e2) 45%); }
.raid-foe { z-index: 3; left: 55%; bottom: 23%; height: 63%; translate: -50% 0; aspect-ratio: 1; display: flex; justify-content: center; }
@media (min-width: 601px) { .raid-foe { left: 54%; bottom: 22%; height: 68%; } }
.raid-foe > * { position: absolute; }
.raid-aura { inset: -8%; border-radius: 50%; background: radial-gradient(circle, var(--e1), transparent 65%); opacity: .22; animation: raid-aura 3.2s ease-in-out infinite; }
.raid-foe-shadow { left: 10%; right: 10%; bottom: -3%; height: 9%; border-radius: 50%; background: rgba(0, 0, 0, .45); animation: raid-shadow 3.2s ease-in-out infinite; }
.raid-foe-sway { inset: 0; display: flex; justify-content: center; align-items: flex-end; }
.raid-body { position: relative; height: 100%; transform-origin: 50% 100%; animation: raid-heavy 5.2s ease-in-out infinite; }
.idle-sway .raid-body { animation: raid-sway 7s ease-in-out infinite; }
.idle-float .raid-body { animation: raid-float 6s ease-in-out infinite; }
.idle-float .raid-foe-shadow { animation: raid-float-shadow 6s ease-in-out infinite; }
.idle-twitch .raid-body { animation-duration: 4.4s; }
.raid-foe-sway.twitch { animation: raid-twitch .12s steps(2); }
.raid-foe-sway { --amp: 5px; }
.idle-heavy .raid-foe-sway { --amp: 3px; }
.raid-one { --bossbg: none; }
.raid-boss { display: block; height: 100%; width: auto; max-width: 94cqw; object-fit: contain; object-position: bottom; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .35)); }
.raid-tint { position: absolute; inset: 0; opacity: 0; background: #fff; pointer-events: none; -webkit-mask: var(--boss) center bottom / contain no-repeat; mask: var(--boss) center bottom / contain no-repeat; }
.raid-ring { left: 50%; top: 35%; width: 40%; aspect-ratio: 1; translate: -50% -50%; border: 3px solid var(--e3); border-radius: 50%; opacity: 0; }
.raid-arena .raid-me.actor { z-index: 5; position: absolute; left: 22%; bottom: 4%; width: 72px; transition: none; cursor: default; }
@media (min-width: 601px) { .raid-arena .raid-me.actor { left: 28%; bottom: 5%; width: 96px; } }
.raid-me .doll { width: 100%; cursor: default; }
.raid-me-move { width: 100%; transform-origin: 50% 100%; animation: raid-me-idle 2.4s ease-in-out infinite; transition: transform .26s cubic-bezier(.2, .8, .3, 1); }
.raid-me-move.step { transform: translate(38%, -22%) scale(.94); transition-duration: .22s; }
.raid-me-move.flinch { animation: raid-flinch .45s; }
.raid-float { z-index: 6; left: 55%; top: 40%; width: 0; height: 0; pointer-events: none; }
@media (min-width: 601px) { .raid-float { left: 54%; top: 42%; } }
.raid-pop { position: absolute; left: var(--px, 0); top: var(--py, 0); translate: -50% -50%; white-space: nowrap; font-family: inherit; font-weight: 900; font-size: 1.7rem; line-height: 1; color: #fff; -webkit-text-stroke: 1.5px #2a1d12; paint-order: stroke fill; text-shadow: 0 3px 0 #2a1d12, 0 0 10px rgba(0, 0, 0, .5); animation: raid-pop 1.2s ease-out forwards; }
.raid-pop.crit { font-size: 2.4rem; color: #ffd34d; }
.raid-pop.other { font-size: 1.15rem; color: #cfe3ff; }
.raid-pop .who { font-size: .7em; margin-right: 4px; }
.raid-pop.finish { font-size: 2.2rem; color: #ffd34d; animation-duration: 1.6s; }
.raid-impact { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, #ffd34d 23% 40%, transparent 41%); box-shadow: 0 0 0 4px #fff; animation: raid-impact .32s ease-out forwards; }
.raid-flash { z-index: 7; inset: 0; opacity: 0; background: #fff; pointer-events: none; }
/* the ambient effect of the boss's element */
.raid-amb { z-index: 2; inset: 0; pointer-events: none; }
.raid-amb.front { z-index: 4; }
.raid-amb i { position: absolute; left: var(--x); animation-duration: var(--t); animation-delay: var(--d); animation-iteration-count: infinite; animation-timing-function: linear; }
.raid-amb i:nth-child(1) { --x: 12%; --t: 5.2s; --d: 0s; --s: 1; } .raid-amb i:nth-child(2) { --x: 28%; --t: 6.4s; --d: -2.1s; --s: .7; }
.raid-amb i:nth-child(3) { --x: 44%; --t: 4.8s; --d: -3.3s; --s: 1.2; } .raid-amb i:nth-child(4) { --x: 61%; --t: 7s; --d: -1.2s; --s: .8; }
.raid-amb i:nth-child(5) { --x: 76%; --t: 5.6s; --d: -4s; --s: 1.1; } .raid-amb i:nth-child(6) { --x: 90%; --t: 6s; --d: -.6s; --s: .6; }
.raid-amb.front i:nth-child(1) { --x: 20%; --t: 5.8s; --d: -1s; --s: 1.3; } .raid-amb.front i:nth-child(2) { --x: 52%; --t: 6.6s; --d: -3s; --s: 1; } .raid-amb.front i:nth-child(3) { --x: 82%; --t: 5s; --d: -2s; --s: 1.4; }
.be-fire .raid-amb i { bottom: 18%; width: 6px; height: 6px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 8px 2px #ff6a2b; animation-name: raid-rise; }
.be-water .raid-amb i { bottom: 10%; width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(184, 230, 255, .85); background: radial-gradient(circle at 30% 30%, #fff 0 15%, transparent 16%); animation-name: raid-rise; animation-duration: calc(var(--t) * 1.4); }
.be-nature .raid-amb i { top: -4%; width: 11px; height: 6px; border-radius: 0 100% 0 100%; background: #7ed957; animation-name: raid-fall; }
.be-thunder .raid-amb i { top: 0; width: 10px; height: 46%; background: #fff; clip-path: polygon(40% 0, 100% 0, 55% 38%, 90% 38%, 20% 100%, 45% 52%, 10% 52%); filter: drop-shadow(0 0 6px #ffd21f); animation-name: raid-bolt; }
.be-thunder .raid-amb i:nth-child(n+4) { display: none; }
.be-thunder .raid-amb i:nth-child(1) { --t: 3.7s; } .be-thunder .raid-amb i:nth-child(2) { --t: 5.3s; } .be-thunder .raid-amb i:nth-child(3) { --t: 4.5s; }
.be-thunder .raid-flash { background: #fff7b0; animation: raid-bolt-flash 5.3s infinite; }
.be-light .raid-amb i { top: -10%; width: 14%; height: 120%; background: linear-gradient(rgba(255, 244, 200, .4), transparent 80%); mix-blend-mode: screen; transform-origin: 50% 0; animation-name: raid-ray; animation-direction: alternate; animation-timing-function: ease-in-out; }
.be-light .raid-amb i:nth-child(even) { animation-name: raid-ray2; }
.be-dark .raid-amb i { bottom: 6%; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(90, 40, 160, .6), transparent 70%); animation-name: raid-smoke; animation-duration: calc(var(--t) * 1.5); }
/* the boss enters when the page opens */
/* only until raid.js marks the page entered: otherwise a later animation ending would replay the entrance */
.st-active:not(.entered) .raid-foe { animation: raid-enter 1.4s cubic-bezier(.2, .8, .3, 1) both; }
.st-active:not(.entered) .raid-tint { animation: raid-sil 1.4s both; }
.st-active:not(.entered) .raid-scene { animation: raid-quake .35s .63s; }
.st-active:not(.entered) .raid-plate { animation: raid-plate-in .4s .9s both; }
.st-active:not(.entered) .raid-me { animation: raid-me-in .35s 1s both; }
/* hits: mine, mine critical, someone else's */
.raid-foe-sway.hit { animation: raid-hit .18s; }
.raid-foe-sway.hit .raid-tint { animation: raid-white .06s; }
.raid-foe-sway.hit-crit { animation: raid-crit .62s; }
.raid-foe-sway.hit-crit .raid-tint { background: #fff3b0; animation: raid-white .3s; }
.raid-foe-sway.hit-far { animation: raid-far .26s; }
.raid-foe-sway.hit-far .raid-tint { animation: raid-white-far .26s; }
.raid-scene.quake { animation: raid-quake .35s; }
.raid-scene.quake-s { animation: raid-quake-s .18s; }
.raid-flash.crit { background: #fff; animation: raid-flash-crit .22s; }
/* low HP: faster breath, a red pulse, a tremble */
.raid-one.low .raid-body { animation-duration: 3.2s; }
.raid-one.low.idle-sway .raid-body { animation-duration: 4.3s; }
.raid-one.low.idle-float .raid-body { animation-duration: 3.7s; }
.raid-one.low .raid-boss { animation: raid-rim 1.6s ease-in-out infinite; }
.raid-one.low .raid-aura { animation-duration: 1.6s; }
.raid-one.low .raid-foe-sway:not([class*="hit"]) { animation: raid-tremble 4s infinite; }
/* the roar: a lunge, a flash of its element, rings, the character flinches */
.raid-foe.roar { animation: raid-roar .91s; }
.raid-flash.roar { background: var(--e1); animation: raid-flash-roar .42s; }
.raid-ring.go { animation: raid-ring .7s ease-out; }
.raid-ring.go + .raid-ring.go { animation-delay: .14s; }
/* defeat and escape */
.raid-one.dying .raid-foe { animation: raid-die 2.2s forwards; }
.raid-one.dying .raid-body { filter: brightness(.6); -webkit-mask-image: linear-gradient(#000 0 50%, transparent 75%); mask-image: linear-gradient(#000 0 50%, transparent 75%); -webkit-mask-size: 100% 400%; mask-size: 100% 400%; animation: raid-dissolve 1.9s .3s forwards; }
.raid-one.dying .raid-amb, .raid-one.dying .raid-aura, .raid-one.fleeing .raid-amb, .raid-one.fleeing .raid-aura { opacity: 0; transition: opacity .4s; }
.raid-one.fleeing .raid-tint { background: #000; opacity: 1; transition: opacity .4s; animation: none; }
.raid-one.fleeing .raid-foe { animation: raid-flee 1.2s .2s forwards; }
.raid-one.st-defeated .raid-foe { transform: translateY(12px); }
.raid-one.st-defeated *, .raid-one.st-escaped * { animation: none !important; }
.raid-one.st-defeated .raid-amb, .raid-one.st-escaped .raid-amb { display: none; }
@keyframes raid-aura { 0%, 100% { opacity: .3; transform: scale(1); } 50% { opacity: .6; transform: scale(1.08); } }
@keyframes raid-shadow { 0%, 100% { transform: scale(1); } 50% { transform: scale(.94); } }
@keyframes raid-heavy { 0%, 100% { transform: none; } 60% { transform: scaleY(1.018) translateY(-3px); } }
@keyframes raid-sway { 0%, 100% { transform: skewX(-1.2deg) translateX(-2px); } 50% { transform: skewX(1.2deg) translateX(2px); } }
@keyframes raid-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes raid-float-shadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.92); } }
@keyframes raid-twitch { 0% { transform: translateX(-3px) rotate(-1.2deg); } 100% { transform: none; } }
@keyframes raid-rim { 0%, 100% { filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .35)); } 50% { filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 14px rgba(190, 30, 40, .55)); } }
@keyframes raid-quake-s { 0%, 100% { transform: none; } 25% { transform: translate(-4px, 2px); } 50% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, 1px); } }
@keyframes raid-breathe-low { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025, 1.05) translateY(-1.2%); } }
@keyframes raid-me-idle { 0%, 100% { scale: 1 1; } 50% { scale: 1.012 1.025; } }
@keyframes raid-flinch { 20% { transform: translate(-6%, 3%) rotate(-5deg); } 55% { transform: translate(-2%, 0) rotate(2deg); } 100% { transform: none; } }
@keyframes raid-rise { 0% { transform: translate(0, 0) scale(var(--s)); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(18px, -300px) scale(calc(var(--s) * .5)); opacity: 0; } }
@keyframes raid-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(34px, 170px) rotate(260deg); } 100% { transform: translate(-10px, 340px) rotate(540deg); opacity: 0; } }
@keyframes raid-bolt { 0%, 92% { opacity: 0; } 93% { opacity: 1; } 94% { opacity: .2; } 95% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes raid-bolt-flash { 0%, 92% { opacity: 0; } 93% { opacity: .16; } 97%, 100% { opacity: 0; } }
@keyframes raid-ray { 0% { opacity: .15; transform: rotate(8deg); } 100% { opacity: .5; transform: rotate(11deg); } }
@keyframes raid-ray2 { 0% { opacity: .15; transform: rotate(-8deg); } 100% { opacity: .5; transform: rotate(-11deg); } }
@keyframes raid-smoke { 0% { transform: scale(.6); opacity: 0; } 30% { opacity: .6; } 100% { transform: translate(-20px, -160px) scale(2); opacity: 0; } }
@keyframes raid-enter { 0% { transform: translateY(-12%) scale(1.25); opacity: 0; } 45% { transform: none; opacity: 1; } 55% { transform: scale(1.06, .94); } 70%, 100% { transform: none; } }
@keyframes raid-sil { 0% { background: #000; opacity: 1; } 55% { background: #000; opacity: 1; } 70% { background: #fff; opacity: .9; } 100% { background: #fff; opacity: 0; } }
@keyframes raid-quake { 0% { transform: none; } 20% { transform: translate(-1.2%, .8%); } 40% { transform: translate(1%, -.6%); } 60% { transform: translate(-.7%, .4%); } 80% { transform: translate(.4%, 0); } 100% { transform: none; } }
@keyframes raid-plate-in { 0% { transform: translateY(-130%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes raid-me-in { 0% { translate: 0 40%; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
@keyframes raid-hit { 0% { transform: none; } 17% { transform: translateX(var(--amp)); } 50% { transform: translateX(calc(var(--amp) * -1)); } 83% { transform: translateX(calc(var(--amp) * .6)); } 100% { transform: none; } }
@keyframes raid-crit { 12% { transform: translate(5%, -4%) rotate(4deg) scale(.96); } 30% { transform: translate(-3%, 0) rotate(-2.5deg); } 50% { transform: translateX(2%); } 70% { transform: translateX(-1%); } 100% { transform: none; } }
@keyframes raid-far { 0% { transform: none; } 35% { transform: translateX(1.2%); } 70% { transform: translateX(-.8%); } 100% { transform: none; } }
@keyframes raid-white { 0% { opacity: .85; } 100% { opacity: 0; } }
@keyframes raid-white-far { 0% { opacity: .4; } 100% { opacity: 0; } }
@keyframes raid-flash-crit { 0% { opacity: .55; } 100% { opacity: 0; } }
@keyframes raid-flash-roar { 0% { opacity: 0; } 30% { opacity: .5; } 100% { opacity: 0; } }
@keyframes raid-impact { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes raid-pop { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 20% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-50px) scale(1); } }
@keyframes raid-pop-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes raid-rage { 0%, 100% { opacity: 0; } 50% { opacity: .32; } }
@keyframes raid-tremble { 0%, 88% { transform: none; } 90% { transform: translateX(-1%); } 92% { transform: translateX(1%); } 94% { transform: translateX(-.8%); } 96% { transform: translateX(.6%); } 100% { transform: none; } }
@keyframes raid-roar { 0% { transform: none; } 28.6% { transform: translateX(10px) scale(.98); } 44% { transform: translateX(-34px) scale(1.06); } 53.8% { transform: translateX(-34px) scale(1.06); } 100% { transform: none; } }
@keyframes raid-ring { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes raid-die { 0%, 13.6% { transform: none; } 100% { transform: translateY(24px); } }
@keyframes raid-dissolve { 0% { -webkit-mask-position: 0 0; mask-position: 0 0; } 100% { -webkit-mask-position: 0 100%; mask-position: 0 100%; } }
@keyframes raid-flee { 0% { transform: none; opacity: 1; } 100% { transform: translateY(-10%) scale(.88); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .raid-foe, .raid-body, .raid-foe-sway, .raid-aura, .raid-scene, .raid-me, .raid-me-move, .raid-plate, .raid-ring, .raid-flash, .raid-foe-shadow { animation: none !important; transition: none !important; }
  .raid-amb { display: none; }
  .raid-tint { animation: none !important; transition: opacity .2s; }
  .raid-pop { animation: raid-pop-fade 1.2s forwards !important; }
  .raid-one.low .raid-tint { background: #ff2a1a; opacity: .2; }
  .raid-one.dying .raid-foe, .raid-one.fleeing .raid-foe { opacity: 0; transition: opacity .4s !important; }
}
.raid-banner { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 6px 0 10px; padding: 4px 12px 4px 4px; border: var(--bw) solid var(--line); border-radius: 999px; background: var(--orange); color: #fff; font-weight: 900; font-size: .86rem; text-decoration: none; box-shadow: 2px 2px 0 var(--shadow); }
.raid-banner img { width: 34px; height: 34px; object-fit: contain; }
.raid-banner.st-defeated, .raid-banner.st-escaped { background: var(--surface-2); color: var(--text); }
/* 덧입기: the look worn over a slot (tap to take it off) */
.pd-look { position: absolute; left: -6px; bottom: 14px; }
.pd-look button { display: inline-flex; align-items: center; gap: 1px; padding: 1px 4px 1px 1px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .7rem; cursor: pointer; }
.pd-look img { width: 20px; height: 20px; object-fit: contain; }
.pd-slot { position: relative; }
.inv-look { margin-top: 2px; }
/* Boss schedule and codex (designed by Fable): booked bosses and unseen designs show only their silhouette */
.boss-sil { filter: brightness(0) invert(.2) drop-shadow(0 0 5px rgba(0, 0, 0, .35)); opacity: .9; pointer-events: none; user-select: none; -webkit-user-drag: none; }
:root[data-theme="dark"] .boss-sil { filter: brightness(0) invert(.42) drop-shadow(0 0 6px rgba(255, 255, 255, .12)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .boss-sil { filter: brightness(0) invert(.42) drop-shadow(0 0 6px rgba(255, 255, 255, .12)); } }
.raid-badge { width: fit-content; padding: 0 8px; border: 2px solid var(--line); border-radius: 999px; font-size: .72rem; font-weight: 900; background: var(--surface-2); }
.raid-badge.st-defeated { background: var(--mustard); color: #2a1d12; }
.raid-badge.st-scheduled { background: #2b2233; color: #fff; }
.raid-note { margin: -8px 0 18px; font-size: .8rem; }
/* Menu icons (designed by Fable, 2026-11-11): one hand-drawn set, each on a chunky tile; the boss tile is dark */
.menu-grid { row-gap: 14px; }
.menu-tile { display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 2.5px solid #2a1d14; border-radius: 18px; background: #f3e4c8; box-shadow: 0 3px 0 #2a1d14; transition: transform .12s, box-shadow .12s; }
.menu-grid a:active .menu-tile { transform: translateY(3px); box-shadow: 0 0 0 #2a1d14; }
.menu-grid .menu-tile .ui-ico { width: 44px; height: 44px; }
.menu-grid a { gap: 8px; font-size: 13px; font-weight: 700; }
.menu-grid a:hover { background: none; border-color: transparent; }
.menu-grid a:hover .menu-tile { transform: translateY(-2px); }
.menu-grid li.is-raid .menu-tile { background: #3a2230; }
.menu-cap { margin-top: 0; font-size: 13px; font-weight: 700; }
:root[data-theme="dark"] .menu-tile { background: #33281e; border-color: #0f0b08; box-shadow: 0 3px 0 #0f0b08; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .menu-tile { background: #33281e; border-color: #0f0b08; box-shadow: 0 3px 0 #0f0b08; } }
/* Menu tile states (Fable, 2026-11-13). After the dark rules above so the pressed/hover values win in both themes.
   ::after is the ember ring (flashes once when an icon forms, static while pressed); the boss tile has an ember bed. */
.menu-tile { position: relative; transition: transform .12s, box-shadow .12s, background-color .08s; }
.menu-tile::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--menu-ring, #ff7a2f); border-radius: 22px; opacity: 0; pointer-events: none; }
.menu-grid a:hover .menu-tile { transform: none; }
@media (hover: hover) {
  .site-menu .menu-grid a:hover .menu-tile { transform: translateY(-2px); box-shadow: 0 5px 0 var(--menu-edge); }
}
.site-menu .menu-grid a:active .menu-tile { transform: translateY(3px); box-shadow: 0 0 0 var(--menu-edge); background-color: var(--menu-press); }
.site-menu .menu-grid a:active .menu-tile::after { opacity: .9; }
.site-menu .menu-grid li.is-raid a:active .menu-tile { background-color: #3a2230; } /* the boss keeps its dark tile; the ring marks the press */
.menu-grid a:focus-visible { outline: none; }
.menu-grid a:focus-visible .menu-tile { outline: 3px solid #ff7a2f; outline-offset: 3px; }
.menu-grid li.is-raid .menu-tile::after { border-color: #ffcf6a; }
.menu-grid li.is-raid .menu-tile::before { content: ""; position: absolute; inset: 0; border-radius: 15px; pointer-events: none; background: radial-gradient(60% 45% at 50% 100%, rgba(255, 122, 47, .55), transparent); opacity: .35; }
.menu-grid li.is-raid .menu-tile .ui-ico { position: relative; }
.site-menu.is-open .menu-grid li.is-raid .menu-tile::before { animation: raid-breathe 1.6s ease-in-out .7s 4 alternate; }
@keyframes raid-breathe { from { opacity: .35; } to { opacity: .8; } }
.raid-game { font-size: .74rem; font-weight: 700; color: var(--muted); }
p.raid-game { margin: -6px 0 8px; font-size: .86rem; }

/* Game reactions (views/game.mjs) and the game chart (views/charts.mjs), designed by Fable */
.reactions { margin: 4px 0 18px; }
.react-title { margin: 0 0 8px; font-size: 1rem; }
.react-form { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); justify-items: center; gap: 4px 2px; max-width: 420px; } /* ten reactions, 5×2 */
.react-btn { position: relative; display: grid; justify-items: center; gap: 0; padding: 2px; border: 0; border-radius: 50%; background: none; color: var(--text); font: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.react-btn.is-static { cursor: default; }
.react-emoji { display: block; width: 44px; height: 44px; transition: transform .12s; }
.react-btn:hover .react-emoji { transform: translateY(-2px) rotate(-4deg); }
.react-btn:active .react-emoji { transform: scale(.9); }
.react-btn:not(.on) .react-emoji { filter: saturate(.75); }
.react-form:has(.react-btn.on) .react-btn:not(.on) .react-emoji { opacity: .55; }
.react-btn.on .react-emoji { transform: scale(1.12); filter: drop-shadow(0 0 0 transparent); }
.react-btn:focus-visible { outline: 3px dashed var(--orange); outline-offset: 2px; }
.react-emoji.pop { animation: react-pop .18s ease-out; }
.react-count { min-height: 1.1em; font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
.react-btn.on .react-count { color: var(--orange); margin-top: 3px; }
.react-sum { margin: 8px 0 0; font-size: .82rem; }
@keyframes react-pop { 0%, 100% { transform: scale(1.12); } 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .react-emoji.pop { animation: none; } }
.chart-period { margin: 0 0 10px; font-weight: 700; }
.chart-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.chart-row a { display: grid; grid-template-columns: 40px 44px 96px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: inherit; text-decoration: none; box-shadow: 2px 2px 0 var(--shadow); }
.chart-list.prev .chart-row a { grid-template-columns: 40px 96px minmax(0, 1fr) auto; opacity: .85; }
.chart-top a { border-width: 3px; }
.chart-1 a { background: color-mix(in srgb, var(--mustard) 22%, var(--surface)); }
.chart-no { text-align: center; font: 900 1.1rem var(--mono); font-variant-numeric: tabular-nums; }
.chart-top .chart-no { font-size: 1.5rem; }
.chart-move { font-size: 12px; font-weight: 900; text-align: center; }
.mv-up { color: #d1452c; } .mv-down { color: #2f7fd6; } .mv-same { color: var(--muted); } .mv-new { color: #3d9a57; }
.chart-cover { width: 96px; height: 54px; object-fit: cover; border-radius: 6px; border: 2px solid var(--line); }
span.chart-cover { position: static; inset: auto; z-index: auto; display: grid; place-items: center; font-size: 1.4rem; font-weight: 900; color: var(--muted); background: var(--surface-2); opacity: 1; transform: none; } /* the list fallback lays itself over a whole row; here it is a thumbnail */
.chart-main { display: grid; gap: 3px; min-width: 0; }
.chart-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.chart-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .76rem; color: var(--muted); font-weight: 700; }
.chart-status { padding: 0 6px; border-radius: 6px; background: var(--surface-2); color: var(--text); }
.chart-reacts { display: inline-flex; gap: 6px; color: var(--text); }
.chart-score { font: 900 1.2rem var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.chart-score small { margin-left: 2px; font-size: .62em; color: var(--muted); }
@media (max-width: 600px) {
  .chart-row a { grid-template-columns: 32px 36px 72px minmax(0, 1fr); gap: 8px; padding: 8px; }
  .chart-list.prev .chart-row a { grid-template-columns: 32px 72px minmax(0, 1fr); }
  .chart-cover { width: 72px; height: 40px; }
  .chart-score { display: none; }
}
.rank-howto ul { margin: 6px 0 0; padding-left: 1.2em; font-size: .84rem; color: var(--muted); }
.rank-top .rank-names strong, .rank-top .rank-dp { color: #2a1d12; } /* the top three rows stay light in dark mode too */
.chart-react { width: 18px; height: 18px; vertical-align: -4px; }
.chart-reacts > span { display: inline-flex; align-items: center; gap: 2px; }

/* Raid turns (designed by Fable, 2026-11-11): the boss telegraphs a pattern, the member picks a dodge in time */
.raid-myhp { position: absolute; left: 50%; bottom: -6px; translate: -50% 100%; display: grid; justify-items: center; width: 120%; gap: 1px; }
.raid-myhp progress { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border: 2px solid #2a1d14; border-radius: 999px; background: #2a1d14; overflow: hidden; }
.raid-myhp progress::-webkit-progress-bar { background: #2a1d14; }
.raid-myhp progress::-webkit-progress-value { background: #58c23f; transition: width .3s; }
.raid-myhp progress::-moz-progress-bar { background: #58c23f; }
.raid-myhp small { font: 800 .62rem var(--mono); color: #fff; text-shadow: 0 1px 2px #000; }
.raid-arena .raid-me.actor { bottom: 9%; }
.raid-me.down .doll { transform: rotate(90deg) translateX(30%); filter: grayscale(1); opacity: .7; }
.raid-down-note { margin: -4px 0 12px; font-weight: 800; color: #e2532d; }
.raid-result { margin: -4px 0 12px; font-weight: 800; }
.raid-result.dodged { color: #3d9a57; } .raid-result.hit, .raid-result.timeout { color: #e2532d; }
/* the turn panel (designed by Astra): omen, timer, action cards, between the arena and the attack button */
.raid-turn { display: grid; width: 100%; max-width: 640px; margin: 0 auto 16px; padding: 12px; border: 3px solid #8a5a3c; border-radius: 20px; background: #211611; box-shadow: 0 3px 0 #120d09; color: #fbefd9; }
@media (min-width: 601px) { .raid-turn { padding: 16px; } }
.raid-turn[hidden] { display: none; }
.raid-turn.enraged { background: #321b17; border-color: #c8553a; }
.raid-omen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; min-height: 48px; margin: 0; font: 700 15px/24px "Noto Serif KR", serif; text-align: center; word-break: keep-all; }
.raid-omen-text { animation: raid-omen-in .18s ease-out both; }
.raid-rage-badge { display: none; padding: 2px 6px; border-radius: 6px; background: #c8553a; color: #fbefd9; font: 900 10px/1.2 sans-serif; }
.raid-turn.enraged .raid-rage-badge { display: inline-block; }
@keyframes raid-omen-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.raid-timer-row { display: flex; align-items: center; gap: 8px; height: 12px; margin: 8px 0 12px; }
.raid-timer { position: relative; flex: 1; height: 8px; border: 1px solid #fbefd9; border-radius: 4px; background: #120d09; overflow: hidden; }
.raid-timer i { display: block; height: 100%; width: 100%; background: #f2b84b; transform-origin: left; }
.raid-turn.enraged .raid-timer i, .raid-turn.urgent .raid-timer i { background: #c8553a; }
.raid-timer.go i { animation: raid-timer var(--tg-ms, 6s) linear forwards; }
.raid-timer-n { width: 34px; text-align: right; font: 800 11px var(--mono); font-variant-numeric: tabular-nums; }
.raid-turn.urgent .raid-timer-n { color: #f2b84b; }
@keyframes raid-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.raid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.raid-turn.enraged .raid-cards { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 601px) { .raid-cards { gap: 12px; } .raid-turn.enraged .raid-cards { grid-template-columns: repeat(4, 1fr); } }
.raid-card-act { position: relative; display: grid; justify-items: center; align-content: start; gap: 5px; min-height: 96px; padding: 8px 4px 6px; border: 3px solid #2a1d14; border-radius: 15px; background: #fbefd9; color: #2a1d14; box-shadow: 0 3px 0 #2a1d14; font: 800 12px/16px "Pretendard Variable", "Noto Sans KR", sans-serif; letter-spacing: -.3px; cursor: pointer; transition: transform 80ms ease-out, box-shadow 80ms ease-out; }
.raid-card-act img { width: 36px; height: 36px; }
@media (min-width: 601px) { .raid-card-act { min-height: 104px; font-size: 13px; } .raid-card-act img { width: 40px; height: 40px; } }
.raid-turn.enraged .raid-card-act { background: #f3d6c7; }
.raid-cards .raid-card-act:nth-child(4n+1) img { transform: rotate(-3deg); } .raid-cards .raid-card-act:nth-child(4n+2) img { transform: rotate(2deg); }
.raid-cards .raid-card-act:nth-child(4n+3) img { transform: rotate(-2deg); } .raid-cards .raid-card-act:nth-child(4n) img { transform: rotate(3deg); }
.act-name { display: grid; place-items: center; height: 32px; text-align: center; }
.raid-card-act:active { transform: translateY(3px); box-shadow: 0 0 0 #2a1d14; }
.raid-card-act:focus-visible { outline: 3px solid #6fa8c9; outline-offset: 3px; }
.raid-card-act:disabled { cursor: default; }
.raid-cards.locked .raid-card-act:not(.picked):not(.right):not(.wrong) { filter: saturate(.35); opacity: .65; }
.raid-card-act.picked { background: #f2b84b; transform: translateY(1px); }
.raid-card-act.right { background: #7fae7a; animation: raid-card-ok .24s; }
.raid-card-act.wrong { background: #c8553a; color: #fbefd9; animation: raid-card-no .24s; }
.raid-card-act.right .act-name, .raid-card-act.wrong .act-name { font-size: 13px; font-weight: 900; }
.raid-turn.closing { animation: raid-turn-out .12s linear forwards; }
@keyframes raid-card-ok { 50% { transform: translateY(-3px); } }
@keyframes raid-card-no { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
@keyframes raid-turn-out { to { opacity: 0; } }
body.raid-turning .msg-launcher, body.raid-turning .dock-launcher { visibility: hidden; } /* the floating buttons would cover a card */
/* the telegraph on the arena: one omen for every pattern (the pattern itself stays a secret) */
.raid-tg { z-index: 2; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; box-shadow: inset 0 0 70px 6px var(--e1); }
.has-turn .raid-tg { animation: raid-tg-pulse 1.1s ease-in-out infinite; }
.has-turn .raid-aura { opacity: .6; }
@keyframes raid-tg-pulse { 0%, 100% { opacity: .3; } 50% { opacity: .7; } }
/* the member's dodges */
.raid-me-move.dodge-back { animation: raid-dodge-back .4s; }
.raid-me-move.dodge-side { animation: raid-dodge-side .4s; }
.raid-me-move.block { animation: raid-block .4s; }
@keyframes raid-dodge-back { 40% { transform: translate(-30%, 6%) rotate(-25deg); } 100% { transform: none; } }
@keyframes raid-dodge-side { 40% { transform: translate(45%, 0) rotate(20deg); } 100% { transform: none; } }
@keyframes raid-block { 30% { transform: scale(.9) translateY(4%); filter: drop-shadow(0 0 8px #9fd4ff); } 100% { transform: none; } }
.raid-pop.dodge { color: #9fe39a; font-size: 1.4rem; }
.raid-pop.bonus { color: #ffd34d; }
.raid-pop.hurt { color: #ff6b5e; font-size: 1.5rem; }
.raid-me .raid-pop.hurt { left: 50%; top: -10%; }
@media (prefers-reduced-motion: reduce) {
  .raid-tg, .raid-omen-text, .raid-card-act { animation: none !important; }
  .raid-me-move.dodge-back, .raid-me-move.dodge-side, .raid-me-move.block { animation: none !important; }
}
/* The enraged form (designed by Fable, 2026-11-11): below 30% HP the boss shows its second form; crossing it plays
   once (raid.js .raging, 2.6 s): a stop, a shake, a flash in its colour, the swap, a landing and the banner. */
.raid-one.low.bk-fire-1 { --boss: url(/public/world/raid/boss-fire-1-rage.webp?v=daec707b9a); }
.raid-one.low.bk-fire-2 { --boss: url(/public/world/raid/boss-fire-2-rage.webp?v=d4921e969c); }
.raid-one.low.bk-fire-3 { --boss: url(/public/world/raid/boss-fire-3-rage.webp?v=24d88eb480); }
.raid-one.low.bk-water-1 { --boss: url(/public/world/raid/boss-water-1-rage.webp?v=fa6593efbc); }
.raid-one.low.bk-water-2 { --boss: url(/public/world/raid/boss-water-2-rage.webp?v=bafb399c96); }
.raid-one.low.bk-water-3 { --boss: url(/public/world/raid/boss-water-3-rage.webp?v=8b9d650949); }
.raid-one.low.bk-nature-1 { --boss: url(/public/world/raid/boss-nature-1-rage.webp?v=2552b50f02); }
.raid-one.low.bk-nature-2 { --boss: url(/public/world/raid/boss-nature-2-rage.webp?v=0d7c4be199); }
.raid-one.low.bk-nature-3 { --boss: url(/public/world/raid/boss-nature-3-rage.webp?v=07338192a1); }
.raid-one.low.bk-thunder-1 { --boss: url(/public/world/raid/boss-thunder-1-rage.webp?v=05fd052f5b); }
.raid-one.low.bk-thunder-2 { --boss: url(/public/world/raid/boss-thunder-2-rage.webp?v=50eb39a7e7); }
.raid-one.low.bk-thunder-3 { --boss: url(/public/world/raid/boss-thunder-3-rage.webp?v=a086a8b865); }
.raid-one.low.bk-light-1 { --boss: url(/public/world/raid/boss-light-1-rage.webp?v=fd2f8e58e5); }
.raid-one.low.bk-light-2 { --boss: url(/public/world/raid/boss-light-2-rage.webp?v=7c7c684e25); }
.raid-one.low.bk-light-3 { --boss: url(/public/world/raid/boss-light-3-rage.webp?v=efa48c33c8); }
.raid-one.low.bk-dark-1 { --boss: url(/public/world/raid/boss-dark-1-rage.webp?v=d34ba30459); }
.raid-one.low.bk-dark-2 { --boss: url(/public/world/raid/boss-dark-2-rage.webp?v=7790b79f53); }
.raid-one.low.bk-dark-3 { --boss: url(/public/world/raid/boss-dark-3-rage.webp?v=a7eba5067e); }
.raid-boss-rage { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; opacity: 0; pointer-events: none; }
.raid-one.low .raid-boss-rage { opacity: 1; filter: drop-shadow(0 0 6px var(--e1)) drop-shadow(0 8px 0 rgba(0, 0, 0, .35)); }
.raid-one.low .raid-body:has(.raid-boss-rage) .raid-boss { opacity: 0; }
.raid-one.low.dying .raid-boss-rage, .raid-one.st-defeated .raid-boss-rage { opacity: 0; }
.raid-one.low.dying .raid-body .raid-boss { opacity: 1; }
.raid-one.low.raging .raid-body:has(.raid-boss-rage) .raid-boss { opacity: 1; animation: rage-shake .6s .15s steps(10) both, rage-white .2s .75s forwards; } /* the old form, until the flash */
.raid-one.raging .raid-boss-rage { opacity: 0; animation: rage-in .55s .95s cubic-bezier(.2, .9, .3, 1) both; }
.raid-one.raging .raid-flash { background: var(--e1); animation: rage-flash .75s .75s both; }
.raid-one.raging .raid-scene { animation: raid-quake-s .18s 1s; }
@keyframes rage-shake { 0% { transform: none; filter: drop-shadow(0 0 0 var(--e1)); } 25% { transform: translateX(-3px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-6px); } 100% { transform: translateX(6px); filter: drop-shadow(0 0 18px var(--e1)); } }
@keyframes rage-white { 0% { opacity: 1; } 99% { filter: brightness(3) saturate(0); opacity: 1; } 100% { opacity: 0; } }
@keyframes rage-in { 0% { opacity: 0; } 1% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes rage-flash { 0% { opacity: 0; } 27% { opacity: .9; } 100% { opacity: 0; } }
.raid-rage-banner { z-index: 9; left: 0; right: 0; top: 40%; display: grid; justify-items: center; gap: 2px; padding: 10px; background: linear-gradient(90deg, transparent, rgba(16, 8, 8, .85) 15% 85%, transparent); color: #fff; text-align: center; opacity: 0; pointer-events: none; }
.raid-rage-banner strong { font-size: 1.3rem; font-weight: 900; color: var(--e3); text-shadow: 0 2px 0 #000; }
.raid-rage-banner small { font-size: .82rem; font-weight: 800; color: #fbefd9; }
.raid-one.raging .raid-rage-banner { animation: rage-banner 2.6s both; }
@keyframes rage-banner { 0%, 57% { opacity: 0; transform: translateY(6px); } 62%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.raid-one.rage-pulse .raid-boss-rage { animation: rage-pulse .4s; }
@keyframes rage-pulse { 50% { filter: drop-shadow(0 0 18px var(--e1)); } }
@media (prefers-reduced-motion: reduce) {
  .raid-one.raging .raid-boss, .raid-one.raging .raid-flash, .raid-one.raging .raid-scene, .raid-one.raging .raid-hp-wrap { animation: none !important; }
  .raid-one.raging .raid-boss-rage { animation: none !important; opacity: 1; transition: opacity .3s; }
}
.raid-pop.weak { color: #ffc83d; font-size: 2.2rem; }
.raid-pop.weak.crit { font-size: 2.7rem; }
.raid-pop.resisted { color: #8a93a6; font-size: 1.45rem; }
/* The floating friends and chat buttons: the menu's tile and icon style (hand-drawn icons on a chunky cream tile) */
.dock-launcher, .msg-launcher { display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 2.5px solid #2a1d14; border-radius: 18px; background: #f3e4c8; box-shadow: 0 3px 0 #2a1d14; font-size: 0; transition: transform .12s, box-shadow .12s; }
.dock-launcher[hidden], .msg-launcher[hidden] { display: none; }
.dock-launcher:hover, .msg-launcher:hover { transform: translateY(-2px); }
.dock-launcher:active, .msg-launcher:active { transform: translateY(3px); box-shadow: 0 0 0 #2a1d14; }
.dock-launcher:focus-visible, .msg-launcher:focus-visible { outline: 3px solid #6fa8c9; outline-offset: 3px; }
.fab-ico { width: 40px; height: 40px; pointer-events: none; }
.msg-launcher { bottom: 86px; }
:root[data-theme="dark"] .dock-launcher, :root[data-theme="dark"] .msg-launcher { background: #33281e; border-color: #0f0b08; box-shadow: 0 3px 0 #0f0b08; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dock-launcher, :root:not([data-theme="light"]) .msg-launcher { background: #33281e; border-color: #0f0b08; box-shadow: 0 3px 0 #0f0b08; } }
@media (max-width: 760px) { .msg-launcher { bottom: 78px; right: 12px; } }

/* help center translation (support-tr) */
.tr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 12px; }
.tr-row .inline-form { margin: 0; }
.tr-review .tr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tr-review .tr-actions .btn { width: auto; flex: 0 0 auto; white-space: nowrap; }
.tr-review .tr-actions .tr-original { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; padding-top: 8px; border-top: 1px dashed currentColor; }
.tr-review .tr-actions .check { margin: 0; }
.tr-review .tr-sent { margin: 0; font-weight: 600; }
.support-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.support-lang label { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1 1 200px; }
.support-lang select { flex: 1; min-width: 0; }
.support-lang .muted { flex-basis: 100%; font-size: .85em; }
.msg-held { margin: 0 0 12px; }

.raid-error { margin: 8px 0 0; color: #c0392b; font-weight: 600; }
:root[data-theme="dark"] .raid-error { color: #ff8a7a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .raid-error { color: #ff8a7a; } }

/* week-long raid (Fable, 2026-11-11): milestone ticks, the week panel */
.raid-week { margin: 18px 0; padding: 14px 16px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 4px 4px 0 var(--shadow); }
.raid-week h2 { margin: 0 0 10px; font-size: 1.1rem; }
.raid-week-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.raid-week-stats div { padding: 8px; border-radius: 10px; background: var(--surface-2); }
.raid-week-stats dt { font-size: .75rem; color: var(--muted); }
.raid-week-stats dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.raid-days { display: flex; align-items: flex-end; gap: 6px; height: 72px; margin: 0 0 10px; padding: 0; list-style: none; }
.raid-days li { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; }
.raid-days i { display: block; width: 100%; max-width: 28px; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--muted); opacity: .5; }
.raid-days li.is-today i { background: var(--accent); opacity: 1; }
.raid-days small { font-size: .7rem; color: var(--muted); }
.raid-days li.is-today small { color: var(--text); font-weight: 700; }
.raid-pace { margin: 0 0 8px; font-weight: 600; color: #c0392b; }
.raid-pace.ok { color: #2e8b57; }
:root[data-theme="dark"] .raid-pace { color: #ff8a7a; } :root[data-theme="dark"] .raid-pace.ok { color: #7ad7a0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .raid-pace { color: #ff8a7a; } :root:not([data-theme="light"]) .raid-pace.ok { color: #7ad7a0; } }
.raid-miles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .8rem; }
.raid-miles li { padding: 3px 8px; border: 1px dashed var(--line); border-radius: 999px; color: var(--muted); }
.raid-miles li.on { border-style: solid; color: var(--text); background: var(--surface-2); }
.raid-days i.h-0 { height: 0%; }
.raid-days i.h-4 { height: 4%; }
.raid-days i.h-8 { height: 8%; }
.raid-days i.h-12 { height: 12%; }
.raid-days i.h-16 { height: 16%; }
.raid-days i.h-20 { height: 20%; }
.raid-days i.h-24 { height: 24%; }
.raid-days i.h-28 { height: 28%; }
.raid-days i.h-32 { height: 32%; }
.raid-days i.h-36 { height: 36%; }
.raid-days i.h-40 { height: 40%; }
.raid-days i.h-44 { height: 44%; }
.raid-days i.h-48 { height: 48%; }
.raid-days i.h-52 { height: 52%; }
.raid-days i.h-56 { height: 56%; }
.raid-days i.h-60 { height: 60%; }
.raid-days i.h-64 { height: 64%; }
.raid-days i.h-68 { height: 68%; }
.raid-days i.h-72 { height: 72%; }
.raid-days i.h-76 { height: 76%; }
.raid-days i.h-80 { height: 80%; }
.raid-days i.h-84 { height: 84%; }
.raid-days i.h-88 { height: 88%; }
.raid-days i.h-92 { height: 92%; }
.raid-days i.h-96 { height: 96%; }
.raid-days i.h-100 { height: 100%; }

/* raid sign-up (Fable, 2026-11-11) */
.raid-card .raid-signup { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 10px; border-top: 1px dashed var(--line); }
.raid-signup-line { margin: 0; font-size: .85rem; font-weight: 600; }
.raid-signup-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.raid-signed { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #2e8b57; color: #fff; font-size: .8rem; font-weight: 700; }
.raid-attack .raid-signed { margin-right: 6px; }
.raid-card.signed { outline: 3px solid #2e8b57; outline-offset: -3px; }
.raid-reward-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.raid-next { margin: 0; padding-left: 18px; font-size: .9rem; }
.raid-next li { margin: 2px 0; }
.raid-card:has(> .raid-signup) > a { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; }
.raid-card > .raid-signup { border: var(--bw) solid var(--line); border-top: 1px dashed var(--line); border-radius: 0 0 var(--radius) var(--radius); background: var(--surface); box-shadow: 3px 3px 0 var(--shadow); }
.raid-card.signed { outline: none; }
.raid-card.signed > a, .raid-card.signed > .raid-signup { border-color: #2e8b57; }

/* admin operations (Fable, 2026-11-11) */
.adm-boss h3 { margin: 0 0 8px; }
.adm-actions { display: grid; gap: 10px; margin-top: 10px; }
.adm-actions .form-row, .adm-row .form-row { flex-wrap: wrap; gap: 8px; align-items: center; }
.adm-list { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.adm-list .form-row { flex-wrap: wrap; gap: 8px; }
.table-wrap { overflow-x: auto; margin: 0 0 16px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.adm-table th, .adm-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.adm-table td small { word-break: break-all; }

/* admin charts (Highcharts, admin pages only) */
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; margin: 0 0 18px; }
.chart-card { padding: 12px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 3px 3px 0 var(--shadow); min-width: 0; }
.chart-card h3 { margin: 0 0 6px; font-size: .95rem; }
.chart { height: 260px; min-width: 0; }
.chart.chart-empty { height: auto; padding: 18px 0; color: var(--muted); text-align: center; }
.chart-wide { grid-column: 1 / -1; }
.chart-wide .chart { height: 300px; }
.period-switch { margin: 0 0 12px; }

/* material exchange (Fable, 2026-11-11) */
.exchange { margin: 14px 0 18px; padding: 12px 14px; border: var(--bw) dashed var(--line); border-radius: var(--radius); }
.exchange h2 { margin: 0 0 4px; font-size: 1.05rem; }
.exchange-list { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.exchange-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.exchange-n input { width: 64px; }
.exchange-row select { flex: 1 1 140px; width: auto; min-width: 0; max-width: 100%; }
.exchange-row .btn { flex: 0 0 auto; }

/* each boss's own background (painted, 1536×1024, key shapes in the middle; cover-cropped on phones) */
.raid-scene > .raid-bg { z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.raid-scene > .raid-bg-shade { z-index: 0; inset: 0; background: radial-gradient(ellipse 55% 60% at 55% 62%, rgba(10, 8, 14, .35), transparent 70%), linear-gradient(rgba(10, 8, 14, .35), transparent 30%, transparent 70%, rgba(10, 8, 14, .45)); pointer-events: none; }
.raid-scene:has(> .raid-bg) > .raid-ground { opacity: .55; }

/* boss effects (designed by Fable 5.2, coded by Opus 5.5; public/raid-fx.js): canvases behind and in front of the
   boss, and three screen layers per element; .low = enraged */
.raid-scene > .raid-fx { inset: 0; width: 100%; height: 100%; pointer-events: none; }
.raid-scene > .raid-fx.back { z-index: 2; }
.raid-scene > .raid-fx.front { z-index: 4; }
.fx-on .raid-amb { display: none; }
.raid-scene > .raid-fog, .raid-scene > .raid-haze, .raid-scene > .raid-vig { pointer-events: none; opacity: 0; transition: opacity 1.2s; }
.raid-scene > .raid-fog { z-index: 1; left: -50%; width: 200%; top: 35%; height: 50%; }
.raid-scene > .raid-haze { z-index: 2; left: 0; right: 0; bottom: 18%; height: 26%; }
.raid-scene > .raid-vig { z-index: 4; inset: 0; }
.be-water .raid-fog { opacity: .18; background: linear-gradient(90deg, transparent, rgba(184, 230, 255, .5) 25%, transparent 50%, rgba(184, 230, 255, .4) 75%, transparent); animation: fx-fog 40s linear infinite; }
.be-water.low .raid-fog { opacity: .28; animation-duration: 22s; }
.be-light .raid-fog { opacity: .2; top: -10%; height: 110%; background: linear-gradient(105deg, transparent 40%, rgba(255, 244, 200, .55) 47%, transparent 54%), linear-gradient(80deg, transparent 58%, rgba(255, 244, 200, .4) 63%, transparent 68%); animation: fx-rays 9s ease-in-out infinite alternate; }
@keyframes fx-fog { from { transform: translateX(0); } to { transform: translateX(25%); } }
@keyframes fx-rays { from { opacity: .12; transform: translateX(-3%); } to { opacity: .26; transform: translateX(3%); } }
.be-fire.low .raid-haze { opacity: .14; background: linear-gradient(transparent, rgba(255, 120, 40, .7) 50%, transparent); animation: fx-haze 1.1s ease-in-out infinite alternate; }
@keyframes fx-haze { from { transform: scaleY(1) translateY(3px); } to { transform: scaleY(1.06) translateY(-3px); } }
.be-light.low .raid-haze { opacity: .28; left: 15%; right: 5%; top: 0; bottom: auto; height: 90%; mix-blend-mode: screen; background: repeating-conic-gradient(from 0deg at 55% 45%, rgba(255, 233, 166, .55) 0 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(circle at 55% 45%, #000 0 20%, transparent 60%); mask-image: radial-gradient(circle at 55% 45%, #000 0 20%, transparent 60%); animation: fx-spin 24s linear infinite; }
@keyframes fx-spin { to { transform: rotate(1turn); } }
.low .raid-vig { animation: fx-vig var(--vig-t, 2s) ease-in-out infinite alternate; }
.be-fire .raid-vig { --vig-t: 1.6s; background: radial-gradient(ellipse at 50% 50%, transparent 55%, #ff3b1a 120%); }
.be-water .raid-vig { --vig-t: 3.2s; background: radial-gradient(ellipse at 50% 50%, transparent 50%, #0b2c5c 115%); }
.be-nature .raid-vig { --vig-t: 2.8s; background: radial-gradient(ellipse at 50% 50%, transparent 50%, #0c1f10 115%); }
.be-thunder .raid-vig { --vig-t: 2s; background: radial-gradient(ellipse at 50% 50%, transparent 50%, #2c2152 115%); }
.be-light .raid-vig { --vig-t: 3.6s; background: radial-gradient(ellipse at 50% 50%, rgba(255, 233, 166, .35) 0, transparent 45%, #5c4d24 120%); }
.be-dark .raid-vig { --vig-t: 2.2s; background: radial-gradient(ellipse at 50% 50%, transparent 45%, #000 110%); }
@keyframes fx-vig { from { opacity: .5; } to { opacity: 1; } }
.be-dark.low .raid-bg { filter: brightness(.8); }
.raid-flash.bolt { animation: fx-bolt .3s; }
@keyframes fx-bolt { 0% { opacity: .28; background: #fff; } 40% { opacity: 0; } 55% { opacity: .15; background: #fff; } 100% { opacity: 0; } }
.fx-on.be-thunder .raid-flash:not(.bolt):not(.roar):not(.crit) { animation: none; }
.dying .raid-fog, .dying .raid-haze, .dying .raid-vig, .fleeing .raid-fog, .fleeing .raid-haze, .fleeing .raid-vig { opacity: 0 !important; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .raid-scene > .raid-fx, .raid-scene > .raid-fog, .raid-scene > .raid-haze { display: none; }
  .low .raid-vig { animation: none; opacity: .3; }
}

/* boss HP strip (designed by Fable 5.2, 2026-11-11) */
/* boss HP: a forged strip over the scene, no box */
.raid-plate { z-index: 8; top: 10px; left: 14px; right: 14px; display: grid; gap: 5px; color: #f4ead6; pointer-events: none; }
.raid-plate::before { content: ""; position: absolute; z-index: -1; inset: -10px -14px -22px; background: linear-gradient(180deg, rgba(8, 6, 10, .8), rgba(8, 6, 10, .45) 55%, transparent); }
.raid-plate-name { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 15px; font-weight: 900; line-height: 1.2; text-shadow: 0 1px 0 #000, 0 0 8px rgba(0, 0, 0, .9); }
.raid-plate-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raid-gem { flex: none; width: 10px; height: 10px; margin-left: 3px; rotate: 45deg; background: var(--e1); border: 1.5px solid var(--e3); box-shadow: 0 0 0 2px #0b090d, 0 0 8px var(--e1); }

.raid-hp-wrap { position: relative; display: block; height: 10px; border: 1px solid rgba(214, 200, 164, .75); border-radius: 1px; background: #120e16; box-shadow: 0 0 0 2px #0b090d, 0 4px 0 rgba(0, 0, 0, .45); transition: border-color .3s; }
.raid-hp-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0 2px, transparent 2px 65%, rgba(0, 0, 0, .35)); pointer-events: none; }
.raid-hp-wrap progress { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; -webkit-appearance: none; appearance: none; background: transparent; }
.raid-hp-wrap progress::-webkit-progress-bar { background: transparent; }
.boss-hp-trail::-webkit-progress-value { background: #e9dcb8; }
.boss-hp-trail::-moz-progress-bar { background: #e9dcb8; }
.boss-hp-fill::-webkit-progress-value { background: linear-gradient(90deg, #6e0f1c, #c2262b calc(100% - 3px), #ffb7a0 calc(100% - 3px)); }
.boss-hp-fill::-moz-progress-bar { background: linear-gradient(90deg, #6e0f1c, #c2262b calc(100% - 3px), #ffb7a0 calc(100% - 3px)); }
.raid-plate.hit .boss-hp-fill { filter: brightness(2.2) saturate(.5); }
.raid-plate.hit .raid-hp-wrap { translate: 0 1px; }

/* milestones: a slit through the bar, a rivet on its lower edge */
.raid-tick { position: absolute; z-index: 1; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(0, 0, 0, .6); pointer-events: none; }
.raid-tick::after { content: ""; position: absolute; left: 50%; top: 100%; width: 7px; height: 7px; translate: -50% -50%; rotate: 45deg; box-sizing: border-box; background: #17121c; border: 1.5px solid #d6c8a4; box-shadow: 0 0 0 1px #0b090d; }
.raid-tick.tick-75 { left: 75%; } .raid-tick.tick-50 { left: 50%; } .raid-tick.tick-30 { left: 30%; }
.raid-tick.tick-30::after { width: 9px; height: 9px; border-color: #ff5a48; }
.raid-tick.on { background: rgba(255, 255, 255, .1); }
.raid-tick.on::after { background: #ffd34d; border-color: #5a3d00; box-shadow: 0 0 0 1px #0b090d, 0 0 6px rgba(255, 211, 77, .7); }
.raid-tick.crack::after { animation: boss-hp-crack .52s ease-out; }
@keyframes boss-hp-crack { 0% { scale: 1; } 30% { scale: 2.3; background: #fff; } 100% { scale: 1; } }

.raid-plate-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 3px; font-size: 11px; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, .9); }
.raid-plate-rage { font-size: 11px; font-weight: 800; color: #ff8a6a; opacity: 0; transition: opacity .4s .9s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raid-plate-num { flex: none; margin-left: auto; font-family: var(--mono); font-weight: 800; font-variant-numeric: tabular-nums; color: rgba(244, 234, 214, .7); }
.raid-plate-num b { font-size: 13px; color: #fff; }

/* enraged: the strip runs hot */
.raid-one.low .raid-hp-wrap { border-color: #ff5a3c; animation: boss-hp-heat 1.6s ease-in-out infinite alternate; }
.raid-one.low .boss-hp-fill::-webkit-progress-value { background: linear-gradient(90deg, #a3160c, #ff4a1c calc(100% - 3px), #fff1c2 calc(100% - 3px)); }
.raid-one.low .boss-hp-fill::-moz-progress-bar { background: linear-gradient(90deg, #a3160c, #ff4a1c calc(100% - 3px), #fff1c2 calc(100% - 3px)); }
.raid-one.low .boss-hp-trail::-webkit-progress-value { background: #ffd08a; }
.raid-one.low .boss-hp-trail::-moz-progress-bar { background: #ffd08a; }
.raid-one.low .raid-plate-rage { opacity: 1; }
.raid-one.raging .raid-hp-wrap { animation: boss-hp-ignite .6s .75s both; }
@keyframes boss-hp-heat { 0% { box-shadow: 0 0 0 2px #0b090d, 0 4px 0 rgba(0, 0, 0, .45), 0 0 4px rgba(255, 70, 30, .3); } 100% { box-shadow: 0 0 0 2px #0b090d, 0 4px 0 rgba(0, 0, 0, .45), 0 0 12px rgba(255, 70, 30, .75); } }
@keyframes boss-hp-ignite { 0% { filter: none; } 25% { filter: brightness(2.6); } 100% { filter: none; } }

@media (min-width: 601px) {
  .raid-plate { top: 16px; left: 50%; right: auto; width: 520px; translate: -50% 0; gap: 6px; }
  .raid-plate::before { inset: -16px -70px -24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14% 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14% 86%, transparent); }
  .raid-plate-name { font-size: 17px; }
  .raid-gem { width: 12px; height: 12px; }
  .raid-hp-wrap { height: 12px; }
  .raid-plate-sub, .raid-plate-rage { font-size: 12px; }
  .raid-plate-num b { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .raid-hp-wrap, .raid-tick::after { animation: none !important; transition: none !important; }
  .raid-plate.hit .boss-hp-fill { filter: none; }
  .raid-plate.hit .raid-hp-wrap { translate: none; }
  .raid-plate-rage { transition: none; }
}

/* reward / purchase pop-up (the achievement card) */
.ach-modal[hidden] { display: none; }
.reward-pop-pics { display: flex; justify-content: center; gap: 8px; margin: 4px 0; }
.reward-pop-pics img { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); animation: ach-spin .7s ease; }
.reward-pop-pics.many img { width: 72px; height: 72px; }
.reward-pop-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0; }

/* release alert in the action row (bell icons drawn by GPT) */
.game-actions .alert-form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.alert-btn { display: inline-flex; align-items: center; gap: 6px; }
.alert-ico { width: 22px; height: 22px; object-fit: contain; flex: none; }
.alert-btn.is-out { opacity: .55; cursor: default; }
.alert-btn.is-full { border-style: dashed; }
.alert-count { padding: 3px 9px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface-2); font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.alert-count.pro { background: var(--mint); color: var(--on-color); }
.alert-count.full { background: var(--warn-bg); color: var(--warn-text); }

/* boss music button (bottom-right of the arena, above the effects) */
.raid-scene > .raid-sound { z-index: 9; right: 10px; bottom: 10px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 2px solid rgba(244, 234, 214, .7); border-radius: 50%; background: rgba(10, 8, 14, .6); color: #f4ead6; font-size: 1.1rem; cursor: pointer; }
.raid-scene > .raid-sound:focus-visible { outline: 3px dashed var(--orange); outline-offset: 2px; }
/* over sharp header art: the name and level keep a soft outline instead of a blurred veil */
body.has-page-bg .site-header .user-meta, body.has-page-bg .site-header .brand-text { text-shadow: 0 0 2px var(--bg), 0 0 6px var(--bg), 0 1px 0 var(--bg); }

/* profile: the pet roaming switch */
.pet-roam { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 18px; padding: 12px 14px; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: 3px 3px 0 var(--shadow); }
.pet-roam-text { display: grid; gap: 2px; min-width: 0; }
.pet-roam-text small { font-size: .8rem; }
.switch { flex: none; position: relative; width: 52px; height: 30px; padding: 0; border: var(--bw) solid var(--line); border-radius: 999px; background: var(--surface-2); cursor: pointer; transition: background .2s; }
.switch .switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); transition: transform .2s; }
.switch.on { background: var(--mint); }
.switch.on .switch-knob { transform: translateX(22px); }
.switch:focus-visible { outline: 3px dashed var(--orange); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .switch, .switch .switch-knob { transition: none; } }
.pet-roam { scroll-margin-top: 120px; }

/* ===== the record room (designed by Fable 5.2, 2026-11-11) ===== */
.music-page { --be: #f2622e; }
.music-lead { margin: 0 0 12px; }
.music-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.music-grid > * { min-width: 0; }
@media (min-width: 900px) { .music-grid { grid-template-columns: minmax(360px, 440px) 1fr; gap: 24px; align-items: start; } .music-left { position: sticky; top: 16px; } }
.el-fire { --be: #e2552f; } .el-water { --be: #3f8fc4; } .el-nature { --be: #5d9a4c; } .el-thunder { --be: #8d6be0; } .el-light { --be: #d9b23f; } .el-dark { --be: #6b3fa0; }
/* the turntable */
.lp-deck { position: relative; aspect-ratio: 1; border: var(--bw) solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .25), transparent 60%), var(--surface-2); box-shadow: 6px 6px 0 var(--shadow); overflow: hidden; }
.lp-platter { position: absolute; left: 6%; top: 11%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: #2a2018; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .35), 0 6px 0 rgba(0, 0, 0, .25); }
.lp-platter::after { content: ""; position: absolute; inset: 3%; border-radius: 50%; pointer-events: none; background: conic-gradient(from -30deg, rgba(255, 255, 255, .18), transparent 12%, transparent 50%, rgba(255, 255, 255, .12) 56%, transparent 66%, transparent); }
.lp-disc { position: absolute; inset: 3%; display: grid; place-items: center; border-radius: 50%; border: 3px solid #0d0906; background: repeating-radial-gradient(circle, #17110c 0 2px, #211812 2px 3px), #17110c; }
.lp-label { width: 38%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 3px solid #0d0906; background: var(--be); }
.lp-disc::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3.5%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #e8dcc4; box-shadow: 0 0 0 2px #0d0906; }
.lp-arm { position: absolute; z-index: 2; left: 79%; top: 1.3%; width: 18%; height: auto; transform-origin: 50% 21.1%; rotate: 0deg; transition: rotate .5s ease-out; filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .3)); pointer-events: none; } /* pivot at (88%, 19%) of the deck */
.is-playing .lp-arm { rotate: calc(22deg + 12deg * var(--p, 0)); }
.lp-arm-css { width: 12px; height: 62%; top: 6%; right: 12%; border: 3px solid var(--line); border-radius: 6px; background: #d9a441; }
.lp-arm-css i { position: absolute; left: -9px; top: -10px; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line); background: #a8761f; }
.lp-state { position: absolute; left: 10px; bottom: 8px; font-size: .75rem; font-weight: 800; color: var(--muted); }
.lp-now h2 { margin: 12px 0 2px; font-size: 1.25rem; }
.lp-now p { margin: 0 0 8px; font-size: .85rem; }
.music-page audio { width: 100%; }
.js-player audio { display: none; }
/* seek, controls, volume */
.lp-seek { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font: 700 .78rem var(--mono); font-variant-numeric: tabular-nums; }
.lp-seek input, .lp-vol input { -webkit-appearance: none; appearance: none; height: 8px; border-radius: 99px; border: 2px solid var(--line); background: linear-gradient(90deg, var(--orange) var(--fill, 0%), var(--surface-2) var(--fill, 0%)); }
.lp-seek input::-webkit-slider-thumb, .lp-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line); }
.lp-seek input::-moz-range-thumb, .lp-vol input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line); }
.lp-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0 8px; }
.lp-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: var(--bw) solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text); box-shadow: 2px 2px 0 var(--shadow); cursor: pointer; }
.lp-btn.small { width: 38px; height: 38px; }
.lp-btn.on { background: var(--mint); color: var(--on-color); }
.lp-play { width: 64px; height: 64px; background: var(--orange); color: #fffaf0; box-shadow: 3px 3px 0 var(--shadow); }
.lp-play .i-pause, .is-playing .lp-play .i-play { display: none; }
.is-playing .lp-play .i-pause { display: contents; }
.lp-one { position: absolute; right: 4px; bottom: 2px; font-size: .62rem; display: none; }
.lp-btn[data-mode="one"] .lp-one { display: block; }
.lp-btn:focus-visible { outline: 3px dashed var(--orange); outline-offset: 3px; }
.lp-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.lp-vol { display: flex; align-items: center; gap: 8px; flex: 1 1 160px; margin: 0; }
.lp-vol input { flex: 1; --fill: 80%; }
.lp-vol.no-vol input { display: none; }
.is-muted .lp-vol .lp-btn { opacity: .5; }
.lp-pip-btn { display: inline-flex; align-items: center; gap: 6px; }
.lp-pip-btn.locked { opacity: .75; }
.lp-queue { margin-top: 12px; }
.lp-queue ol { max-height: 220px; overflow: auto; margin: 6px 0 0; padding-left: 22px; }
.lp-queue button { padding: 4px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
/* playlists */
.lp-tabs { margin: 0 0 8px; }
.lp-tabs small { opacity: .7; }
.lp-new { margin: 0 0 10px; }
.lp-new form, .lp-list-head form { margin: 6px 0; flex-wrap: wrap; gap: 8px; }
.lp-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.lp-rows { position: relative; display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.lp-row { position: relative; display: grid; grid-template-columns: 28px 36px 1fr auto; align-items: center; gap: 10px; min-height: 52px; padding: 6px 8px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.lp-row img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); }
.lp-row a { color: inherit; font-weight: 800; text-decoration: none; }
.lp-row.current { border-color: var(--orange); }
.lp-row.dragging { z-index: 3; translate: 0 var(--dy, 0) !important; transition: none !important; will-change: translate; box-shadow: 4px 6px 0 var(--shadow); background: var(--surface-2); }
.lp-grip { display: grid; place-items: center; width: 28px; height: 40px; border-radius: 8px; font-size: 1.3rem; font-weight: 900; color: var(--muted); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.lp-row.dragging .lp-grip { cursor: grabbing; color: var(--text); }
.lp-row-btns { display: flex; gap: 4px; }
.lp-row-btns form { margin: 0; }
.lp-mini-btn { width: 30px; height: 30px; padding: 0; border: 2px solid var(--line); border-radius: 8px; background: var(--surface-2); color: inherit; cursor: pointer; }
/* filters and the shelf */
.lp-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.lp-filter .chips { margin: 0; }
.lp-filter input[type="search"] { flex: 1 1 140px; min-width: 0; }
.lp-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .lp-shelf { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } }
.lp-sleeve { position: relative; display: grid; gap: 4px; align-content: start; }
.lp-sleeve strong { font-size: .8rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-sleeve small { font-size: .7rem; }
.lp-cover-box { position: relative; display: block; width: 84%; aspect-ratio: 1; }
.lp-cover { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border: 3px solid var(--line); border-radius: 12px; box-shadow: 4px 4px 0 var(--shadow); background: var(--be); }
.lp-cover-box::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 0 0 10px 10px; background: var(--be); border: 3px solid var(--line); border-top-width: 2px; }
.lp-peek { position: absolute; z-index: 0; top: 6%; left: 22%; width: 88%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #17110c 0 2px, #241a12 2px 3px); border: 2px solid #0d0906; transition: left .3s ease; }
.lp-peek::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: var(--be); }
.lp-sleeve:hover .lp-peek, .lp-cover-box:focus-visible .lp-peek, .lp-sleeve.current .lp-peek { left: 30%; }
.is-playing .lp-sleeve.current .lp-peek { animation: lp-spin 1.8s linear infinite; }
@keyframes lp-spin { to { rotate: 1turn; } }
.lp-sleeve.no-track .lp-cover { filter: grayscale(.7); opacity: .7; }
.lp-sleeve.locked .lp-cover-box { background: repeating-linear-gradient(45deg, var(--surface-2) 0 8px, transparent 8px 16px); border-radius: 12px; }
.lp-sleeve.locked .lp-cover { opacity: .55; }
.lp-lock { position: absolute; z-index: 3; right: 6px; top: 6px; font-size: .9rem; }
.lp-plus { position: absolute; z-index: 4; top: -6px; right: 4%; width: 28px; height: 28px; padding: 0; border: 2px solid var(--line); border-radius: 50%; background: var(--mustard); color: var(--on-color); font-weight: 900; cursor: pointer; }
.lp-menu { position: absolute; z-index: 5; top: 26px; right: 0; display: grid; gap: 4px; min-width: 150px; padding: 8px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 3px 3px 0 var(--shadow); }
.lp-menu[hidden] { display: none; }
.lp-menu button { padding: 6px 8px; border: 0; border-radius: 8px; background: var(--surface-2); color: inherit; text-align: left; font-weight: 700; cursor: pointer; }
.lp-menu-h { margin: 4px 0 0; font-size: .72rem; color: var(--muted); }
/* phone mini bar */
.lp-minibar[hidden] { display: none; }
/* picture-in-picture: the canvas video stays off-screen; the Chrome window gets the deck */
.lp-pip-video { position: fixed; left: -9999px; width: 1px; height: 1px; }
.lp-pip-body { margin: 0; padding: 10px; background: var(--bg); }
.lp-pip-win .lp-deck { box-shadow: none; }
.lp-pip-win .lp-now h2 { font-size: 1rem; margin-top: 8px; }
.lp-pip-win .lp-now p { display: none; }
.lp-pip-win .lp-controls { gap: 6px; margin: 6px 0 0; }
@media (prefers-reduced-motion: reduce) { .lp-arm { transition: none; } .lp-peek { transition: none; } .is-playing .lp-sleeve.current .lp-peek { animation: none; } }
.lp-seek input[type="range"], .lp-vol input[type="range"] { height: 10px; min-height: 0; padding: 0; margin: 0; box-shadow: none; }
@media (max-width: 899px) { .music-left .lp-controls, .music-left .lp-sub { padding-right: 58px; } .music-left .lp-controls { gap: 8px; } }
.lp-switch { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-weight: 700; text-decoration: none; }
.lp-switch .switch { pointer-events: none; }
.lp-count { margin: 0 0 8px; font-size: .8rem; }
.lp-boss { font-size: .7rem; }
.lp-boss-line { margin: 0 0 2px; font-weight: 700; font-size: .85rem; color: var(--be, var(--orange)); }
.lp-sleeve.locked .lp-cover { filter: grayscale(1) brightness(.75); opacity: .6; }
.lp-sleeve.locked strong { opacity: .6; }
.lp-rights { margin: 28px 0 8px; padding: 14px 16px; border: 2px dashed var(--line); border-radius: var(--radius-sm); font-size: .82rem; line-height: 1.55; }
.lp-rights p { margin: 0 0 6px; }
/* the ＋ sheet: centred card on desktop, a bottom sheet on phones */
.lp-sheet { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(20, 12, 6, .55); }
.lp-sheet[hidden] { display: none; }
.lp-sheet-card { width: min(380px, 100%); max-height: 80vh; overflow: auto; display: grid; gap: 8px; padding: 16px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: 5px 5px 0 var(--shadow); animation: ach-pop .3s ease; }
@media (max-width: 599px) { .lp-sheet { place-items: end stretch; padding: 0; } .lp-sheet-card { width: 100%; border-radius: var(--radius) var(--radius) 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); animation: lp-sheet-up .25s ease; } }
@keyframes lp-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.lp-sheet-head { display: flex; align-items: center; gap: 12px; }
.lp-sheet-head img { width: 56px; height: 56px; border-radius: 10px; border: 2px solid var(--line); object-fit: cover; }
.lp-sheet-head div { display: grid; }
.lp-sheet-h { margin: 6px 0 0; font-size: .8rem; font-weight: 800; color: var(--muted); }
.lp-sheet-lists { display: grid; gap: 6px; }
.lp-sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface-2); color: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.lp-sheet-row.done { background: var(--mint); color: var(--on-color); cursor: default; }
.lp-sheet-new { display: flex; gap: 8px; margin: 4px 0 0; }
.lp-sheet-new input { flex: 1; min-width: 0; }
.lp-sheet-close { justify-self: end; }
@media (prefers-reduced-motion: reduce) { .lp-sheet-card { animation: none; } }
.lp-sheet-row.done small { color: var(--on-color); opacity: .75; }
/* record room tabs and the LP shop (Fable, 2026-11-11) */
.lp-room-tabs { margin: 0 0 10px; }
.lp-buy-link { font-size: .72rem; font-weight: 800; }
.lp-edition { justify-self: start; padding: 1px 7px; border: 2px solid var(--line); border-radius: 999px; background: var(--mustard); color: var(--on-color); font-size: .66rem; font-weight: 900; }
.lp-shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; margin: 12px 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .lp-shop-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
.lp-shop-card { display: grid; gap: 6px; align-content: start; padding: 10px; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: 3px 3px 0 var(--shadow); }
.lp-shop-card .lp-cover-box { width: 82%; }
.lp-shop-card strong { font-size: .88rem; line-height: 1.25; }
.lp-shop-card small { font-size: .72rem; }
.lp-shop-card form { margin: 0; }
.lp-shop-card .btn { width: 100%; justify-content: center; }
.lp-shop-state { justify-self: start; padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 900; background: var(--surface-2); }
.lp-shop-state.st-fought { background: var(--mint); color: var(--on-color); }
.lp-shop-state.st-unreleased { background: var(--pink); color: var(--on-color); }
.lp-shop-state.st-raid, .lp-shop-state.st-claim { background: var(--warn-bg); color: var(--warn-text); }
.js-lp-preview.on { background: var(--orange); color: #fffaf0; }
.btn.is-short { opacity: .6; cursor: not-allowed; }
.lp-shop-note { font-size: .78rem; }

/* record room: play all / pick tracks (2026-11-11) */
.lp-shelf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.lp-shelf-head .lp-count { margin: 0; }
.lp-shelf-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-shelf-tools[hidden] { display: none; }
.lp-cover-play { position: absolute; z-index: 3; right: 6px; bottom: 14px; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink, inherit); font-size: .75rem; box-shadow: 2px 2px 0 var(--shadow); pointer-events: none; }
.lp-check { display: none; position: absolute; z-index: 3; left: 6px; top: 6px; width: 24px; height: 24px; border: 2px solid var(--line); border-radius: 7px; background: var(--surface); }
.picking .lp-check { display: block; }
.picking .lp-cover-play { display: none; }
.picking .lp-sleeve.no-track .lp-cover-box { pointer-events: none; }
.lp-sleeve.picked .lp-check, .lp-row.picked .lp-row-play { background: var(--accent, #f26b3a); border-color: var(--line); }
.lp-sleeve.picked .lp-check::after { content: "✓"; display: grid; place-items: center; height: 100%; color: #fff; font-weight: 900; font-size: .85rem; }
.lp-sleeve.picked .lp-cover { outline: 3px solid var(--accent, #f26b3a); outline-offset: 2px; }
.lp-row-play { display: inline-grid; place-items: center; text-decoration: none; color: inherit; }
.lp-row .lp-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picking .lp-row-play::before { content: ""; }
.lp-row.picked { border-color: var(--accent, #f26b3a); }
.lp-pickbar { position: fixed; z-index: 80; left: 16px; right: 96px; bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 3px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: 4px 4px 0 var(--shadow); }
.lp-pickbar[hidden] { display: none; }
.lp-pickbar strong { flex: 1 1 calc(100% - 48px); font-size: .85rem; }
@media (min-width: 900px) { .lp-pickbar { left: 50%; right: auto; translate: -50% 0; } .lp-pickbar strong { flex: 0 1 auto; margin-right: 8px; } }
.picking .lp-shelf, .picking .lp-rows { padding-bottom: 120px; }

/* ultra-limited gear (the LP-collection reward set): a black-and-ember tag and a slow ember edge */
.limited-tag { background: linear-gradient(135deg, #1c1410, #3a2418) !important; color: #ffb36b !important; border: 1px solid #ff8a3c; font-style: normal; }
em.limited-tag { display: inline-block; margin-right: 4px; padding: 0 5px; border-radius: 6px; font: 800 .65rem var(--mono); }
.shop-item.is-limited { box-shadow: 0 0 0 2px #ff8a3c, 0 0 16px rgba(255, 120, 40, .55); }
.ach-gear.is-limited { background: #2a1a12; color: #ffd9b0; }
/* a reward of several items: on phones the list goes under the text, so the text keeps its width */
@media (max-width: 599px) { .ach:has(.ach-gear + .ach-gear) { grid-template-columns: 56px 1fr; } .ach:has(.ach-gear + .ach-gear) .ach-rewards { grid-column: 1 / -1; justify-items: start; display: flex; flex-wrap: wrap; } }
.shop-item.is-limited img { background: radial-gradient(circle at 50% 60%, #6a2a14, #1c1410 70%); border-radius: 12px; }

/* the Last Record Greatsword's "skip" swing (swing-fx.js oathFx; Fable 5.2 design): ember on black iron */
.e-oath { --c1: #ff8a3c; --c2: #c2410c; --c3: #ffd9a0; }
.posed-oath .fx-art { left: 12%; top: 20%; width: 100%; }
.y-oath .fx-art { filter: drop-shadow(0 0 4px #ffd9a0) drop-shadow(0 0 12px #ff8a3c); }
.y-oath .oath-scratch { position: absolute; left: 50%; top: 40%; width: calc(180% + var(--i) * 30%); aspect-ratio: 1; border-radius: 50%; border: 2px dashed #ff8a3c; border-color: #ff8a3c transparent transparent transparent; opacity: 0; transform: translate(-50%, -50%) rotate(-30deg); animation: oath-scratch 90ms linear calc(680ms + var(--i) * 12ms) forwards; }
@keyframes oath-scratch { 0% { opacity: .9; transform: translate(-50%, -50%) rotate(-30deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-55deg); } }
.y-oath .oath-disc { position: absolute; left: var(--x); top: var(--y); width: 150%; max-width: none; opacity: 0; transform: translate(-50%, -50%) scaleY(.27) rotate(0); animation: oath-disc .6s cubic-bezier(.15, .6, .3, 1) 850ms forwards; pointer-events: none; }
@keyframes oath-disc { 0% { opacity: 0; transform: translate(-50%, -50%) scaleY(.27) scale(.6) rotate(0); } 15% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -50%) scaleY(.27) scale(1) rotate(140deg); } }
.y-oath .oath-disc.still { animation-name: oath-disc-still; }
@keyframes oath-disc-still { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.y-oath .oath-ring { position: absolute; left: var(--x); top: var(--y); width: 20%; aspect-ratio: 1; border-radius: 50%; border: 2px solid #ff8a3c; box-shadow: 0 0 0 3px #17120f; opacity: 0; transform: translate(-50%, -50%) scaleY(.3) scale(.3); animation: oath-ring .52s ease-out calc(850ms + var(--i) * 80ms) forwards; }
@keyframes oath-ring { 0% { opacity: 1; transform: translate(-50%, -50%) scaleY(.3) scale(.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scaleY(.3) scale(13); } }
.y-oath .oath-shard { position: absolute; left: var(--x); top: var(--y); width: 9%; margin: -4.5% 0 0 -4.5%; opacity: 0; animation: oath-shard .7s cubic-bezier(.3, .2, .6, 1) var(--d) forwards; }
@keyframes oath-shard { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 55% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(calc(var(--rot) * .6)); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.2), calc(var(--dy) * -.2)) rotate(var(--rot)); } }
/* a worn item's element: a small round mark on the slot's lower right */
.pd-box { position: relative; }
.slot-el.el-dot { position: absolute; right: -5px; bottom: -5px; z-index: 2; width: 20px; height: 20px; font-size: 11px; pointer-events: none; }
.slot-act { position: relative; }
.slot-act .slot-el.el-dot { right: -3px; bottom: 14px; width: 18px; height: 18px; font-size: 10px; }

/* record room mini player (phones, when the deck scrolls away): a little record player (2026-11-11 redesign) */
.lp-minibar { position: fixed; z-index: 40; left: 10px; right: 10px; top: calc(8px + env(safe-area-inset-top)); max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 8px; height: 58px; padding: 0 8px 0 70px; border: var(--bw) solid var(--line); border-radius: 30px 18px 18px 30px; background: var(--surface); box-shadow: 3px 4px 0 var(--shadow); animation: lp-mini-in .28s cubic-bezier(.2, .9, .3, 1.2); }
.lp-minibar[hidden] { display: none; }
@keyframes lp-mini-in { from { translate: 0 -130%; } to { translate: 0 0; } }
.lp-minideck { position: absolute; left: -4px; top: 50%; width: 68px; height: 68px; translate: 0 -50%; border-radius: 50%; filter: drop-shadow(2px 3px 0 var(--shadow)); }
.lp-minidisc { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; border: 2px solid #0d0906; background: repeating-radial-gradient(circle, #17110c 0 1.5px, #2b2018 1.5px 2.5px), #17110c; }
.lp-minidisc img { width: 46%; height: 46%; border-radius: 50%; object-fit: cover; border: 2px solid var(--be, #e8dcc4); background: var(--be, #e8dcc4); }
.lp-minidisc::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; translate: -50% -50%; border-radius: 50%; background: #e8dcc4; box-shadow: 0 0 0 1.5px #0d0906; }
.lp-minisheen { position: absolute; inset: 2px; border-radius: 50%; pointer-events: none; background: conic-gradient(from -30deg, rgba(255, 255, 255, .28), transparent 12%, transparent 50%, rgba(255, 255, 255, .16) 56%, transparent 66%, transparent); }
.lp-miniarm { position: absolute; right: -3px; top: -5px; width: 5px; height: 36px; border-radius: 3px; background: linear-gradient(#e2b75a, #b8862d); border: 1.5px solid #3a2414; transform-origin: 50% 4px; rotate: -8deg; transition: rotate .45s cubic-bezier(.3, 1.4, .5, 1); }
.lp-miniarm::before { content: ""; position: absolute; left: -4.5px; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: #e2b75a; border: 1.5px solid #3a2414; }
.lp-miniarm::after { content: ""; position: absolute; left: -2.5px; bottom: -5px; width: 7px; height: 9px; border-radius: 2px; background: #f2622e; border: 1.5px solid #3a2414; }
.lp-minibar.is-playing .lp-miniarm { rotate: calc(20deg + 12deg * var(--mp, 0)); }
.lp-minitext { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.lp-minititle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; font-weight: 800; line-height: 1.2; }
.lp-minisub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; color: var(--muted); }
.lp-minieq { display: none; align-items: end; gap: 2px; height: 16px; flex: none; }
.lp-minibar.is-playing .lp-minieq { display: flex; }
.lp-minieq i { width: 3px; height: 100%; border-radius: 2px; background: var(--accent); transform-origin: bottom; animation: lp-eq .9s ease-in-out infinite; }
.lp-minieq i:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; } .lp-minieq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.6s; }
@keyframes lp-eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.lp-minibtn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 2px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--text); cursor: pointer; transition: transform .12s ease, background .15s; }
.lp-minibtn:active { transform: scale(.88); }
.lp-minirep { position: relative; background: transparent; }
.lp-minirep b { position: absolute; right: 5px; bottom: 3px; font-size: .58rem; line-height: 1; display: none; }
.lp-minirep[data-mode="one"] { background: var(--surface-2); }
.lp-minirep[data-mode="one"] b { display: block; }
.lp-miniplay { width: 44px; height: 44px; background: var(--accent); color: var(--accent-text); box-shadow: 2px 2px 0 var(--shadow); }
.lp-miniplay .i-pause, .lp-minibar.is-playing .lp-miniplay .i-play { display: none; }
.lp-minibar.is-playing .lp-miniplay .i-pause { display: contents; }
.lp-miniprog { position: absolute; left: 66px; right: 16px; bottom: 3px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--line) 18%, transparent); overflow: hidden; pointer-events: none; }
.lp-miniprog i { display: block; height: 100%; width: 100%; border-radius: 2px; background: var(--accent); transform-origin: left; transform: scaleX(var(--mp, 0)); transition: transform .25s linear; }
@media (max-width: 359px) { .lp-minieq { display: none !important; } .lp-minibar { padding-left: 64px; } }
@media (prefers-reduced-motion: reduce) { .lp-minibar { animation: none; } .lp-minieq i { animation: none; transform: scaleY(.6); } .lp-miniarm { transition: none; } }

/* LPs already in the playlist: a ring round the cover and a ✓ where the ＋ was; locked LPs: a 20 s preview */
.lp-sleeve.in-list .lp-cover { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 4px 4px 0 var(--shadow); }
.lp-sleeve.in-list .lp-plus { background: var(--accent); color: var(--accent-text); }
.lp-sleeve .lp-preview-btn { justify-self: start; min-height: 0; height: 26px; padding: 0 10px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface-2); color: inherit; font-size: .72rem; font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: none; cursor: pointer; }
.lp-sleeve .lp-preview-btn.on { background: var(--accent); color: var(--accent-text); }

/* picture discs: each boss's own record (build_lp_discs.py bakes the kind of record; Fable 5.2 design, 2026-11-11) */
.lp-art { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lp-art[hidden], .lp-art2 { display: none; }
.lp-disc.has-art { background: #17110c; }
.lp-disc.has-art::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; pointer-events: none; background: repeating-radial-gradient(circle, rgba(0, 0, 0, .2) 0 1px, transparent 1px 4px); -webkit-mask: radial-gradient(circle, transparent 0 24%, #000 25%); mask: radial-gradient(circle, transparent 0 24%, #000 25%); }
.lp-disc.has-art .lp-label { position: relative; z-index: 2; width: 23%; border-width: 2px; }
.lp-disc.has-art::after { z-index: 3; }
.lp-disc.tr-shaped { border-color: transparent; background: none; }
.lp-disc.tr-shaped .lp-art { border-radius: 0; }
.lp-disc.tr-shaped::before { -webkit-mask: radial-gradient(circle, transparent 0 24%, #000 25% 90%, transparent 91%); mask: radial-gradient(circle, transparent 0 24%, #000 25% 90%, transparent 91%); }
/* double ring: the inner band turns the other way */
.lp-disc.tr-double-ring .lp-art2:not([hidden]) { display: block; -webkit-mask: radial-gradient(circle, #000 0 56%, transparent 57%); mask: radial-gradient(circle, #000 0 56%, transparent 57%); }
.is-playing .lp-disc.tr-double-ring .lp-art2 { animation: lp-spin 1.44s linear infinite reverse; }
.is-playing .lp-disc.tr-double-ring .lp-label { animation: lp-spin 1.44s linear infinite reverse; }
/* live effects on the deck, over the record and not turning with it */
.lp-fx { position: absolute; inset: 3%; z-index: 2; border-radius: 50%; pointer-events: none; --p0: #f2622e; --p1: #ffd27a; --p2: #fff; }
.lp-fx i { position: absolute; display: none; }
.is-playing .lp-fx.fx-flash { background: conic-gradient(from 0deg, transparent 0 78%, color-mix(in srgb, var(--p1) 70%, #fff) 88%, transparent 97%); mix-blend-mode: screen; opacity: .0; animation: lpfx-flash 1.8s ease-in-out infinite; }
@keyframes lpfx-flash { 0%, 100% { opacity: .12; } 50% { opacity: .6; } }
.lp-fx.fx-pulse { box-shadow: 0 0 0 0 var(--p1); }
.is-playing .lp-fx.fx-pulse { animation: lpfx-pulse 3s ease-in-out infinite; }
@keyframes lpfx-pulse { 0%, 100% { box-shadow: 0 0 6px 0 color-mix(in srgb, var(--p1) 40%, transparent), inset 0 0 10px 0 color-mix(in srgb, var(--p1) 20%, transparent); } 50% { box-shadow: 0 0 26px 6px color-mix(in srgb, var(--p1) 85%, transparent), inset 0 0 34px 4px color-mix(in srgb, var(--p1) 45%, transparent); } }
.is-playing .lp-fx.fx-rays { background: repeating-conic-gradient(color-mix(in srgb, var(--p1) 55%, #fff) 0 6deg, transparent 6deg 30deg); opacity: .14; animation: lp-spin 24s linear infinite reverse; }
.is-playing .lp-fx.fx-shimmer { background: conic-gradient(#ff5f6d, #ffc371, #7bffb0, #6fc3ff, #c58bff, #ff5f6d); mix-blend-mode: overlay; opacity: .5; animation: lp-spin 5.4s linear infinite reverse; -webkit-mask: radial-gradient(circle, transparent 0 25%, #000 26%); mask: radial-gradient(circle, transparent 0 25%, #000 26%); }
.is-playing .lp-fx.fx-smoke-drift { background: radial-gradient(ellipse 60% 30% at 30% 35%, color-mix(in srgb, var(--p1) 60%, transparent), transparent 70%), radial-gradient(ellipse 45% 25% at 70% 68%, color-mix(in srgb, var(--p0) 50%, transparent), transparent 70%); filter: blur(6px); opacity: .7; animation: lp-spin 9s linear infinite; }
.is-playing .lp-fx.fx-strobe { background: repeating-conic-gradient(rgba(255, 255, 255, .22) 0 15deg, transparent 15deg 30deg); mix-blend-mode: overlay; animation: lpfx-strobe 1.8s steps(12) infinite; -webkit-mask: radial-gradient(circle, transparent 0 55%, #000 56%); mask: radial-gradient(circle, transparent 0 55%, #000 56%); }
@keyframes lpfx-strobe { to { rotate: 1turn; } }
.is-playing .lp-fx.fx-ripple i:nth-child(-n+2) { display: block; inset: 38%; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--p1) 80%, #fff); opacity: 0; animation: lpfx-ripple 3.2s ease-out infinite; }
.is-playing .lp-fx.fx-ripple i:nth-child(2) { animation-delay: 1.6s; }
@keyframes lpfx-ripple { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(4.2); opacity: 0; } }
.is-playing .lp-fx.fx-spark i:nth-child(1) { display: block; inset: 0; border-radius: 50%; background: radial-gradient(circle at 70% 25%, #fff, color-mix(in srgb, var(--p1) 80%, transparent) 18%, transparent 45%); opacity: 0; animation: lpfx-spark 4.2s linear infinite; }
@keyframes lpfx-spark { 0%, 91%, 95%, 100% { opacity: 0; } 92%, 96% { opacity: .85; } 94% { opacity: .15; } }
/* motes: embers rise, drift floats across, frost twinkles */
.is-playing .lp-fx.fx-embers i, .is-playing .lp-fx.fx-drift i:nth-child(-n+6), .is-playing .lp-fx.fx-frost-sparkle i:nth-child(-n+6) { display: block; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--p1) 70%, #fff); box-shadow: 0 0 6px var(--p1); opacity: 0; left: var(--x); top: var(--y); animation: lpfx-ember calc(2.4s + var(--n) * .23s) ease-in calc(var(--n) * -.61s) infinite; }
.lp-fx i:nth-child(1) { --n: 0; --x: 22%; --y: 30%; } .lp-fx i:nth-child(2) { --n: 1; --x: 70%; --y: 22%; } .lp-fx i:nth-child(3) { --n: 2; --x: 48%; --y: 64%; } .lp-fx i:nth-child(4) { --n: 3; --x: 80%; --y: 58%; } .lp-fx i:nth-child(5) { --n: 4; --x: 30%; --y: 74%; } .lp-fx i:nth-child(6) { --n: 5; --x: 60%; --y: 84%; } .lp-fx i:nth-child(7) { --n: 6; --x: 14%; --y: 52%; } .lp-fx i:nth-child(8) { --n: 7; --x: 52%; --y: 14%; }
@keyframes lpfx-ember { 0% { transform: translate(0, 20px) scale(.6); opacity: 0; } 20% { opacity: .95; } 100% { transform: translate(12px, -70px) scale(.2); opacity: 0; } }
.is-playing .lp-fx.fx-drift i:nth-child(-n+6) { width: 7px; height: 4px; border-radius: 60% 40%; box-shadow: none; opacity: 0; animation-name: lpfx-drift; animation-duration: calc(5s + var(--n) * .6s); animation-timing-function: linear; }
@keyframes lpfx-drift { 0% { transform: translate(-30px, -10px) rotate(0); opacity: 0; } 15%, 80% { opacity: .8; } 100% { transform: translate(70px, 46px) rotate(300deg); opacity: 0; } }
.is-playing .lp-fx.fx-frost-sparkle i:nth-child(-n+6) { width: 6px; height: 6px; border-radius: 0; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); box-shadow: none; animation-name: lpfx-twinkle; animation-duration: calc(1.6s + var(--n) * .3s); animation-timing-function: ease-in-out; }
@keyframes lpfx-twinkle { 0%, 100% { transform: scale(.2); opacity: 0; } 50% { transform: scale(1.5); opacity: 1; } }
/* the shelf's peeking record and the mini bar's record show the picture too */
.lp-peek.has-art { background: #17110c; overflow: hidden; }
.lp-peek.has-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-peek.has-art::after { inset: 38%; z-index: 1; }
.lp-miniart { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0 !important; background: none !important; }
.lp-miniart[hidden] { display: none; }
.lp-minidisc.has-art img:not(.lp-miniart) { position: relative; width: 30%; height: 30%; }
@media (prefers-reduced-motion: reduce) { .lp-fx, .lp-fx i, .lp-disc .lp-art2, .lp-disc .lp-label { animation: none !important; } .lp-fx.fx-flash { opacity: .3; } }

/* the shelf as discs (music.js #lp-disc-view): the picture disc whole, the sleeve put away */
.lp-shelf.disc-view .lp-cover-box { width: 92%; }
.lp-shelf.disc-view .lp-cover { opacity: 0; box-shadow: none; }
.lp-shelf.disc-view .lp-cover-box::after { display: none; }
.lp-shelf.disc-view .lp-peek, .lp-shelf.disc-view .lp-sleeve:hover .lp-peek, .lp-shelf.disc-view .lp-sleeve.current .lp-peek, .lp-shelf.disc-view .lp-cover-box:focus-visible .lp-peek { top: 0; left: 0; width: 100%; z-index: 1; border-width: 3px; border-color: var(--line); box-shadow: 4px 4px 0 var(--shadow); transition: none; }
.lp-shelf.disc-view .lp-peek::after { border: 2px solid #0d0906; }
.lp-shelf.disc-view .lp-sleeve.in-list .lp-peek { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 4px 4px 0 var(--shadow); }
.lp-shelf.disc-view .lp-sleeve.picked .lp-peek { outline: 3px solid var(--accent, #f26b3a); outline-offset: 2px; }
.lp-shelf.disc-view .lp-sleeve.picked .lp-cover { outline: none; }
.lp-shelf.disc-view .lp-sleeve.locked .lp-peek { filter: grayscale(1) brightness(.7); opacity: .65; }
.lp-shelf.disc-view .lp-sleeve.locked .lp-cover-box { background: none; }
.lp-shelf.disc-view .lp-sleeve.no-track .lp-peek { filter: grayscale(.7); opacity: .7; }
.lp-shelf.disc-view .lp-cover-play { right: 2px; bottom: 2px; }

/* a month's list day by day (home.mjs byDay, app.js #day-view-btn): flat by default, each day a heading when .by-day */
.view-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#day-view-btn { cursor: pointer; border: var(--bw) solid var(--line); font: inherit; font-weight: 800; }
#day-view-btn[hidden] { display: none; }
.day-groups { display: grid; gap: 14px; margin-top: 18px; }
.day-head { display: none; }
.day-groups.by-day { gap: 10px; }
.by-day .day-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 4px 4px 0 var(--shadow); cursor: pointer; list-style: none; }
.by-day .day-head::-webkit-details-marker { display: none; }
.by-day .day-name { min-width: 64px; padding: 6px 10px; text-align: center; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--mustard); color: var(--on-color); font-weight: 900; font-size: 1.05rem; }
.by-day .day-group:nth-child(3n+2) .day-name { background: var(--pink); }
.by-day .day-group:nth-child(3n) .day-name { background: var(--sky); }
.by-day .day-group[data-today] .day-name { background: var(--orange); }
.by-day .day-n { font-weight: 800; color: var(--muted); }
.by-day .day-head::after { content: "▾"; margin-left: auto; font-size: 1.1rem; transition: transform .15s ease; }
.by-day .day-group:not([open]) .day-head::after { transform: rotate(-90deg); }
.by-day .day-group[open] { padding-bottom: 8px; }
.by-day .day-group > .release-list { margin: 12px 0 0 12px; padding-left: 12px; border-left: 3px dashed var(--line); }
.by-day .release-date { display: none; }
@media (prefers-reduced-motion: reduce) { .by-day .day-head::after { transition: none; } }

/* the track on the deck goes into a playlist from here (music.js #lp-now-add) */
.lp-now-head { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-now-head h2 { margin: 0; min-width: 0; }
.lp-now-add { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border: var(--bw) solid var(--line); border-radius: 999px; background: var(--mustard); color: var(--on-color); font: inherit; font-weight: 900; font-size: .9rem; white-space: nowrap; box-shadow: 3px 3px 0 var(--shadow); cursor: pointer; }
.lp-now-add:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }
.lp-now-add.done { background: var(--surface-2); color: var(--text); }
.lp-now-add[hidden] { display: none; }

/* browsing while the record plays (music.js openShell): the next page in a frame under the mini player */
html.lp-shelled { overflow: hidden; }
.lp-shellwrap { position: fixed; z-index: 901; inset: 0; background: var(--bg); }
.lp-shell { position: absolute; left: 0; right: 0; bottom: 0; top: calc(74px + env(safe-area-inset-top)); width: 100%; height: calc(100% - 74px - env(safe-area-inset-top)); border: 0; background: var(--bg); }
html.lp-shelled .lp-minibar { z-index: 902; }

/* the mini player folded to just its record (music.js fold): the bar draws in to the left, the title and buttons
   fade; a tap on the record opens it again */
.lp-minibar { max-width: min(560px, calc(100vw - 20px)); margin-left: max(0px, calc(50vw - 290px)); margin-right: auto; transition: max-width .7s cubic-bezier(.3, 1.12, .45, 1), transform .85s cubic-bezier(.45, 0, .2, 1), background-color .3s, border-color .3s, box-shadow .3s; }
.lp-minibar > :not(.lp-minideck) { transition: opacity .4s ease .3s; }
.lp-minideck { cursor: pointer; transition: scale .3s cubic-bezier(.3, 1.5, .5, 1); }
.lp-minideck:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.lp-minibar.is-min { max-width: 60px; border-color: transparent; background-color: transparent; box-shadow: none; transition: max-width .85s cubic-bezier(.45, 0, .2, 1), transform .85s cubic-bezier(.45, 0, .2, 1), background-color .35s ease .6s, border-color .35s ease .6s, box-shadow .35s ease .6s; }
.lp-minibar.is-min > :not(.lp-minideck) { opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.lp-minibar.is-min .lp-minideck { scale: 1.06; }
.lp-minibar.is-min .lp-minideck:active { scale: .96; }
.lp-shell { transition: top .3s ease, height .3s ease; }
html.lp-shelled.lp-mini-min .lp-shell { top: 0; height: 100%; }
/* music.js states 1 and 2: the folded record is dragged with `translate` (set from the script); docked, the bar is
   hidden and a slim tab sits on the right edge with half a record peeking out (Fable, 2026-11-12) */
.lp-minibar.is-min { touch-action: none; }
.lp-minibar.is-dragging { transition: none; }
.lp-minibar.is-dragging .lp-minideck { scale: 1.12; cursor: grabbing; }
.lp-minibar.is-held .lp-minideck { scale: 1.12; }
.lp-minibar.is-docked { visibility: hidden; }
.lp-safe-probe { position: fixed; left: 0; top: 0; width: 0; height: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); visibility: hidden; pointer-events: none; }
.lp-minitab { position: fixed; z-index: 41; right: 0; top: var(--tab-y, 120px); width: 34px; height: 62px; padding: 0; border: var(--bw) solid var(--line); border-right: 0; border-radius: 14px 0 0 14px; background: var(--surface); box-shadow: -3px 4px 0 var(--shadow); overflow: visible; cursor: pointer; touch-action: none; transform: translateX(110%); transition: transform .16s ease-out; -webkit-tap-highlight-color: transparent; }
.lp-minitab[hidden] { display: none; }
.lp-minitab.in { transform: none; }
.lp-minitab::before { content: ""; position: absolute; left: -12px; right: 0; top: -6px; bottom: -6px; }
/* the record's centre sits on the screen edge, so its left half shows, turning, and the right half is off screen */
.lp-minitab-disc { position: absolute; left: 9px; top: 4px; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: #1d1611; box-shadow: 0 0 0 2px var(--line); }
.lp-minitab-disc img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.lp-minitab-disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 2px, rgba(0, 0, 0, .18) 2px 3px); }
.lp-minitab-grip { position: absolute; left: 3px; top: 22px; width: 2px; height: 14px; border-radius: 1px; background: var(--line); }
.lp-minitab.is-playing .lp-minitab-disc { animation: lp-tabspin 4s linear infinite; }
.lp-minitab.is-playing .lp-minitab-grip::after { content: ""; position: absolute; left: -1px; top: -8px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: lp-tabdot 1.2s ease-in-out infinite; }
@keyframes lp-tabspin { to { rotate: 1turn; } }
@keyframes lp-tabdot { 50% { opacity: .3; } }
html.lp-shelled .lp-minitab { z-index: 903; }
/* smooth motion on phones: the record moves and turns on the compositor, its shadow is a box-shadow (a drop-shadow
   filter is repainted every frame) */
.lp-minibar.is-min, .lp-minibar.is-rolling, .lp-minidisc, .lp-minitab, .lp-minitab-disc { will-change: transform; }
.lp-minibar.is-min .lp-minideck, .lp-minibar.is-rolling .lp-minideck { filter: none; }
.lp-minibar.is-min .lp-minidisc, .lp-minibar.is-rolling .lp-minidisc { box-shadow: 2px 3px 0 var(--shadow); }
.lp-minibar.is-rolling .lp-miniarm { opacity: 0; transition: opacity .12s; }
.lp-minitab { transition: transform .26s cubic-bezier(.2, .8, .3, 1.15); }
/* the tab's frame and grip take the playing LP's element colour (.el-* sets --be) */
.lp-minitab[class*="el-"] { border-color: var(--be); }
.lp-minitab[class*="el-"] .lp-minitab-grip { background: var(--be); }
.lp-minitab[class*="el-"] .lp-minitab-disc { box-shadow: 0 0 0 2px var(--be); }
@media (prefers-reduced-motion: reduce) { .lp-minitab { transition: opacity .15s; } .lp-minitab.is-playing .lp-minitab-disc, .lp-minitab.is-playing .lp-minitab-grip::after { animation: none; } }
@media (prefers-reduced-motion: reduce) { .lp-minibar, .lp-minibar > *, .lp-minideck, .lp-shell { transition: none; } }

/* raid-material crafting (Fable, amended by Astra, 2026-11-12): element groups of three cards; a short cost line is
   marked by its text ("2 short") and a dashed edge, not by colour alone */
.raid-craft { margin: 0 0 18px; }
.raid-craft h2, .craft-sub { margin: 0 0 6px; font-size: 1.1rem; }
.craft-sub { margin-top: 6px; }
.raid-sum { margin: 0 0 12px; padding: 8px 12px; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-weight: 800; box-shadow: 3px 3px 0 var(--shadow); overflow-wrap: anywhere; }
.raid-group { margin: 0 0 14px; }
.raid-group h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 8px; font-size: 1rem; }
.raid-group h3 small { color: var(--muted); font: 700 .8rem var(--mono); }
.raid-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.raid-card { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 10px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 3px 3px 0 var(--shadow); }
.raid-card.owned { box-shadow: none; opacity: .8; }
.raid-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.raid-card-head img { flex: 0 0 auto; width: 56px; height: 56px; object-fit: contain; }
.raid-card-head > span { display: grid; gap: 2px; min-width: 0; }
.raid-card-head strong { font-size: .92rem; line-height: 1.25; overflow-wrap: anywhere; }
.raid-card-head .rarity-badge { justify-self: start; }
.cost-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cost-line { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 6px; padding: 2px 6px; border: 2px solid transparent; border-radius: 8px; font-size: .82rem; }
.cost-line img, .cost-dp { width: 22px; height: 22px; object-fit: contain; text-align: center; line-height: 22px; }
.cost-line b { font-family: var(--mono); }
.cost-line em { font-style: normal; font-weight: 900; font-size: .74rem; white-space: nowrap; }
.cost-line.short { border-style: dashed; border-color: var(--danger); }
.cost-line.short em { color: var(--danger); }
.raid-card .btn, .raid-card form { justify-self: stretch; margin: 0; }
.raid-card form .btn { width: 100%; }
.raid-card .btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.raid-card > .badge { justify-self: start; }
.raid-set { margin: 8px 0 0; font-size: .82rem; overflow-wrap: anywhere; }

/* Element ward (services/gear-stats.mjs WARD_*): the item chip, the character-stats row, the raid line and the
   trophy hint on the craft page. */
.stat-line .st-ward { box-shadow: inset 3px 0 0 var(--be); }
.sp-ward { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sp-ward strong { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .9rem; font-weight: 900; }
.sp-ward-el { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.raid-taken { color: var(--text); }
.raid-taken small { color: var(--muted); font-size: .78rem; }
.raid-ward { margin: 8px 0 0; font-size: .82rem; font-weight: 700; overflow-wrap: anywhere; }

/* DropPass nudge and boss alarms (designed by Fable, 2026-11-12): the strip in the "alert set" pop-up, the full sheet,
   the PASS chip on locked buttons, the swap list; the craft page's material sheet (public/mat-source.js) and
   /world/material/:id. Classes only (strict CSP). */
.pass-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border: 2px solid var(--line); border-radius: 6px; background: var(--mustard); color: var(--on-color); font: 900 .62rem/1.5 var(--mono); letter-spacing: .06em; vertical-align: middle; }
.pass-strip { width: 100%; margin: 8px 0 0; padding: 8px 10px; border: 2px dashed var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: .84rem; font-weight: 700; text-align: left; }
.pass-strip[hidden] { display: none; }
.pass-strip a { font-weight: 900; white-space: nowrap; }
.pass-sheet .ach-pop { text-align: center; }
.pass-perks { width: 100%; margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; text-align: left; font-size: .88rem; }
.pass-perks li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; align-items: baseline; }
.pass-perks li::before { content: "✓"; color: var(--mint); font-weight: 900; }
.pass-perks li.is-first { color: var(--text); }
.pass-perks-line { margin: 8px 0 0; color: var(--muted); font-size: .8rem; }
.pass-perks-line b { color: var(--text); }
.pass-unsupported { display: none; width: 100%; margin: 8px 0 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--warn-text); font-size: .82rem; font-weight: 700; text-align: left; }
.pass-sheet.is-unsupported .pass-unsupported { display: block; }
.pass-card { margin: 0 0 14px; padding: 14px 16px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 4px 4px 0 var(--shadow); }
.pass-card h2 { margin: 2px 0 4px; font-size: 1.15rem; }
.pass-card p { margin: 0; }
.pass-card .pass-card-actions { margin-top: 12px; }
.alert-count.is-link { text-decoration: none; color: var(--text); }
.alert-count.is-link:hover { border-color: var(--accent); }
.alert-swap { width: 100%; margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; text-align: left; }
.alert-swap li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 10px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: .86rem; font-weight: 700; }
.alert-swap li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-swap form { margin: 0; flex: none; }
.lp-pip-btn.locked { color: var(--text); }

/* boss materials: every chip and short cost opens where it comes from */
a.mat-chip { color: inherit; text-decoration: none; }
a.mat-chip:hover { box-shadow: 0 0 0 2px var(--accent); }
.mat-chip.zero { opacity: .5; filter: grayscale(1); }
.cost-line.is-link { display: block; padding: 0; }
.cost-line.is-link > a { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 6px; padding: 2px 6px; color: inherit; text-decoration: none; min-height: 32px; }
.cost-line.is-link > a img { width: 22px; height: 22px; object-fit: contain; }
.cost-line.is-link:hover { border-style: solid; }
a.recipe-in.mat { color: inherit; text-decoration: none; }
a.recipe-in.mat.short { opacity: 1; }
a.recipe-in.mat.short img { opacity: .55; }

dialog.mat-sheet { box-sizing: border-box; width: 100%; max-width: 100%; max-height: 80vh; margin: auto 0 0; padding: 16px 16px 20px; overflow: auto; border: var(--bw) solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--surface); color: var(--text); }
dialog.mat-sheet::backdrop { background: rgba(20, 12, 6, .62); }
@media (min-width: 640px) { dialog.mat-sheet { max-width: 560px; margin: auto; border-bottom: var(--bw) solid var(--line); border-radius: var(--radius); box-shadow: 5px 5px 0 var(--shadow); } }
.mat-page { max-width: 640px; }
.mat-src-head { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; margin-bottom: 12px; }
.mat-src-head img { width: 56px; height: 56px; object-fit: contain; }
.mat-src-head h2 { margin: 0; font-size: 1.2rem; }
.mat-src-kicker { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 800; }
.mat-src-lead { margin: 2px 0 0; font-weight: 700; font-size: .9rem; }
.mat-src-close { align-self: start; width: var(--tap); height: var(--tap); border: 0; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 1rem; cursor: pointer; }
.mat-src-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mat-src-row { display: grid; grid-template-columns: 64px 1fr; gap: 4px 12px; align-items: center; padding: 10px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: inset 4px 0 0 var(--be, var(--line)); }
.mat-src-row.be-fire { --be: #f2622e; } .mat-src-row.be-water { --be: #6cb6dd; } .mat-src-row.be-nature { --be: #7cc9a0; }
.mat-src-row.be-thunder { --be: #e3a92f; } .mat-src-row.be-light { --be: #f0d77a; } .mat-src-row.be-dark { --be: #8a6fcf; }
.mat-src-boss { width: 64px; height: 64px; object-fit: contain; grid-row: span 2; }
.mat-src-main { display: grid; gap: 1px; min-width: 0; }
.mat-src-main strong { font-size: .95rem; }
.mat-src-game { color: var(--muted); font-size: .76rem; }
.mat-src-state { font-size: .8rem; font-weight: 800; }
.mat-src-row.st-active .mat-src-state { color: var(--accent); }
.mat-src-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mat-src-acts form, .mat-src-empty-acts form { margin: 0; }
.mat-src-empty { padding: 12px; border: 2px dashed var(--line); border-radius: var(--radius-sm); font-size: .9rem; }
.mat-src-empty p { margin: 0; }
.mat-src-empty .mat-src-empty-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mat-src-foot { margin: 12px 0 0; font-weight: 800; font-size: .88rem; }
.alarm-bell.is-on { background: var(--mint); color: var(--on-color); }
.alarm-bell.is-locked { border-color: var(--line); border-style: dashed; }

/* ---- social sign-in (routes/oauth.mjs, views/oauth.mjs). Provider buttons keep each brand's own colours. ---- */
.social-auth { display: grid; gap: 10px; margin: 4px 0 18px; }
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 18px;
  border-radius: 12px; font: inherit; font-size: 1rem; font-weight: 600; text-decoration: none; letter-spacing: 0;
}
.social-btn:focus-visible { outline: 3px dashed var(--orange); outline-offset: 3px; }
.social-btn:active { transform: translateY(1px); }
.social-mark { flex: none; display: block; }
.social-google { background: #ffffff; color: #1f1f1f; border: 1px solid #747775; }
.social-kakao { background: #fee500; color: rgba(0, 0, 0, .85); border: 1px solid #fee500; }
.social-apple { background: #000000; color: #ffffff; border: 1px solid #000000; }
:root[data-theme="dark"] .social-apple { border-color: #8e8e93; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .social-apple { border-color: #8e8e93; } }
.id-login { margin: 0 0 16px; }
.id-login > summary { cursor: pointer; font-weight: 800; color: var(--muted); list-style: none; padding: 6px 0; }
.id-login > summary::-webkit-details-marker { display: none; }
.id-login > summary::before { content: "▸ "; }
.id-login[open] > summary::before { content: "▾ "; }
.id-login[open] > summary { margin-bottom: 12px; }
.signup-with { display: flex; align-items: center; gap: 8px; margin: -4px 0 16px; font-weight: 800; }
.signup-with .social-mark { width: 20px; height: 20px; padding: 3px; box-sizing: content-box; border-radius: 6px; background: #ffffff; border: 1px solid var(--line); }
.input-readonly { background: var(--surface-2); color: var(--muted); box-shadow: none; }
.signup-consents { border: var(--bw) solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px 12px; margin: 0; display: grid; gap: 8px; }
.signup-consents legend { font-weight: 900; padding: 0 6px; }
.signup-check { align-items: flex-start !important; font-weight: 700 !important; }
.signup-check input { margin-top: 5px; width: 20px; height: 20px; flex: none; box-shadow: none; }
.signup-req { color: var(--accent); font-weight: 900; }
.methods-card { scroll-margin-top: 84px; margin: 28px 0 8px; padding: 18px 18px 14px; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--shadow); }
.methods-card h2 { margin: 0 0 12px; font-size: 1.15rem; font-weight: 900; }
.method-list { list-style: none; margin: 0; padding: 0; display: grid; }
.method-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 2px dashed var(--dot); }
.method-row:first-child { border-top: 0; }
.method-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: #ffffff; color: #000000; }
.method-mark-kakao { background: #fee500; border-color: #fee500; }
.method-mark-apple { background: #000000; border-color: #000000; color: #ffffff; }
.method-mark-plain { background: var(--surface-2); color: var(--text); font-family: var(--mono); font-size: .75rem; font-weight: 900; }
.method-text { display: grid; min-width: 0; line-height: 1.35; }
.method-text small { overflow-wrap: anywhere; }
.method-act { margin: 0; justify-self: end; }
.method-only { font-size: .8rem; font-weight: 800; }
.method-hint { margin: 8px 0 0; }
.fake-badge { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-text); border: 2px dashed var(--line); font-family: var(--mono); font-size: .78rem; font-weight: 800; }
@media (max-width: 420px) {
  .method-row { grid-template-columns: 36px 1fr; }
  .method-act { grid-column: 2; justify-self: start; }
}

/* ---- /admin/social: weekly image previews, post drafts and the post log (designed by Fable, 2026-11-12) ---- */
.social-modes { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0; padding: 0; list-style: none; }
.social-weeks { align-items: center; gap: 10px; margin: 18px 0 10px; }
.social-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 12px 0 8px; }
.social-fig { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.social-prev { display: block; width: 100%; max-width: 360px; height: auto; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.social-fig figcaption { font-size: .9rem; color: var(--muted); }
.social-list { display: grid; gap: 12px; }
.social-form { display: grid; gap: 10px; }
.social-caption { display: grid; gap: 6px; font-weight: 700; }
.social-caption textarea { width: 100%; min-height: 6em; font: inherit; font-weight: 400; padding: 10px 12px; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); resize: vertical; }
.social-pre { margin: 6px 0 0; padding: 10px 12px; max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: .82rem; background: var(--surface-2); border-radius: var(--radius-sm); }
.social-error { font-family: var(--mono); font-size: .82rem; word-break: break-word; }
.social-st-posted, .social-st-dry_run { background: var(--mint); color: var(--on-color); }
.social-st-failed { background: var(--danger); color: #fffaf0; }
.social-st-posting, .social-st-approved { background: var(--warn-bg); color: var(--warn-text); }
.social-st-skipped { opacity: .7; }

/* room page, open-rooms panel (Fable, 2026-11-12): scene "ticket" cards and "지금 이 방에" roster.
   Scoped to .room-side so the chat window's .dock-picker cards (also .side-room) stay as they are. */
.room-side { --mat: #fff8ea; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .room-side { --mat: var(--line); } }
:root[data-theme="dark"] .room-side { --mat: var(--line); }
.room-side .side-rooms { grid-template-columns: minmax(0, 1fr); gap: 14px; max-height: 46vh; padding: 4px 8px 8px 4px; }
.room-side .side-rooms > li { min-width: 0; }
.room-side .side-room { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; min-width: 0; padding: 0; overflow: hidden; border: var(--bw) solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; box-shadow: 4px 4px 0 var(--shadow); transform: rotate(-.6deg); }
.room-side .side-rooms li:nth-child(even) .side-room { transform: rotate(.5deg); }
.room-side .side-room.current { background: var(--mustard); color: #2a1d12; box-shadow: 4px 4px 0 var(--shadow); }
@media (prefers-reduced-motion: no-preference) {
  .room-side .side-room { transition: transform .12s ease, box-shadow .12s ease; }
  .room-side .side-rooms li .side-room:active { transform: translate(2px, 2px) rotate(-.6deg); box-shadow: 2px 2px 0 var(--shadow); }
  .room-side .side-rooms li:nth-child(even) .side-room:active { transform: translate(2px, 2px) rotate(.5deg); }
}
.room-side .side-room .side-room-banner { position: relative; display: block; aspect-ratio: 5 / 2; overflow: hidden; border-bottom: var(--bw) solid var(--line); background: var(--surface-2); font-size: inherit; }
.room-side .side-room .side-room-banner img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 62%; border-radius: 0; }
.room-side .side-room-banner::after { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 0 3px var(--mat); border-radius: 11px 11px 0 0; pointer-events: none; }
.room-side .side-room.full .side-room-banner img { filter: saturate(.7); }
.room-side .side-room .side-room-here { position: absolute; z-index: 2; top: 8px; left: 8px; display: block; padding: 1px 9px; border: var(--bw) solid var(--line); border-radius: 999px; background: var(--orange); color: #2a1d12; font-weight: 900; font-size: .78rem; line-height: 1.5; box-shadow: 2px 2px 0 var(--shadow); transform: rotate(-4deg); }
.room-side .side-room .side-room-stamp { position: absolute; z-index: 2; top: 8px; right: 8px; display: block; padding: 0 8px; border: var(--bw) solid var(--orange); border-radius: 8px; background: var(--surface); color: var(--orange); font-weight: 900; font-size: .8rem; line-height: 1.6; letter-spacing: .08em; transform: rotate(8deg); }
.room-side .side-room .side-room-stamp[hidden] { display: none; }
.room-side .side-room .side-room-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 7px 10px; font-size: .9rem; }
.room-side .side-room .side-room-cap strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-side .side-room .side-room-faces { display: flex; flex: 0 0 auto; align-items: center; min-width: 0; font-size: inherit; }
.room-side .side-room .side-room-faces .av { margin-left: -8px; border: 2px solid var(--line); border-radius: 9px; background: var(--surface); }
.room-side .side-room .side-room-faces .av:first-child { margin-left: 0; }
.room-side .side-room .side-room-faces .av > img { width: 20px; height: 20px; aspect-ratio: auto; border-radius: 7px; }
.room-side .side-room .side-room-count { display: inline-block; margin-left: 6px; padding: 0 7px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font: 800 .74rem/1.55 var(--mono); }
.room-side .side-room.current .side-room-count { background: #fff8ea; color: #2a1d12; border-color: #2a1d12; }
.room-side .side-new { justify-self: start; align-self: flex-start; }

.side-here { display: grid; gap: 6px; padding: 10px 10px 8px; border: var(--bw) solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 4px 4px 0 var(--shadow); }
.side-here h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .95rem; }
.side-here-n { display: inline-block; min-width: 24px; padding: 0 6px; border: 2px solid var(--line); border-radius: 999px; background: var(--mustard); color: #2a1d12; font: 800 .74rem/1.5 var(--mono); text-align: center; }
.side-here-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-here-list li { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 44px; padding: 0 6px; border-radius: 10px; font-size: .88rem; }
.side-here-list li.me { background: var(--surface-2); }
.side-here-list li strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-here-list li.me strong { color: var(--orange); }
.side-here-you { flex: none; padding: 0 7px; border: 2px solid var(--line); border-radius: 999px; background: var(--orange); color: #2a1d12; font-weight: 900; font-size: .7rem; line-height: 1.5; }
.side-here-crown { flex: none; font-size: .95rem; line-height: 1; }
.side-here-more, .side-here-empty { margin: 0; padding: 0 6px; color: var(--muted); font-size: .84rem; }
.side-here-more { font-weight: 800; }
.side-here-more[hidden], .side-here-empty[hidden] { display: none; }
@media (max-width: 1000px) {
  /* bottom room for the two floating dock buttons, so they never sit on the roster */
  .room-side { display: flex; flex-direction: column; gap: 12px; overflow: hidden; padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  .room-side > h2, .room-side .side-new, .room-side .side-back { flex: none; }
  .room-side .side-rooms { flex: 0 1 auto; min-height: 170px; max-height: none; overflow-y: auto; }
  .room-side .side-here { flex: 0 0 auto; max-height: 40vh; }
}
/* the roster scrolls under its own heading */
.room-side .side-here { overflow-y: auto; padding-top: 0; }
.room-side .side-here h2 { position: sticky; top: 0; z-index: 3; padding: 10px 0 6px; background: var(--surface); }
.side-here-list .lv { flex: none; white-space: nowrap; }
/* desktop: the column is narrow, so the faces drop under the room name */
@media (min-width: 1001px) {
  .room-side .side-rooms { max-height: 36vh; }
  .room-side .side-here { max-height: 30vh; }
  .room-side .side-room .side-room-cap { flex-wrap: wrap; row-gap: 4px; }
  .room-side .side-room .side-room-cap strong { flex-basis: 100%; }
  .room-side .side-room .side-room-count { margin-left: auto; }
}

/* Achievements wave 2 (2026-11-13): done/to-do filter, two-line names, a profile-card reward once its art exists */
.ach-show { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ach-show .chip { min-height: 34px; padding: 0 14px; font-size: .85rem; }
.ach-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ach-card { display: inline-flex; align-items: center; gap: 4px; }

/* ---------------- 이야기책 (the storybook, routes/book.mjs, public/book.js) ----------------
   An old tome on a dark desk (Fable's dark-tome spec, 2026-11-13): one object in both site themes. The desk is always
   dark; the theme only swaps day vellum for candle vellum. Leather, iron and gilt around the pages, vellum leaves
   with dark ink (8.8:1 or more), rubricated initials, wax seals and ribbons for locks. Every texture lies over a flat
   colour, so a missing file leaves the same page in plain colour. A page turns as a fold that follows the finger
   (public/book-fold.js); with reduced motion it cross-fades. */
@font-face { font-family: "Noto Serif KR"; font-style: normal; font-weight: 500; font-display: swap; src: url(/public/fonts/book/noto-serif-kr-500.woff2?v=91f50ad0ce) format("woff2"); }
@font-face { font-family: "Noto Serif KR"; font-style: normal; font-weight: 700; font-display: swap; src: url(/public/fonts/book/noto-serif-kr-700.woff2?v=ed25a047de) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(/public/fonts/book/eb-garamond-500.woff2?v=754c7c4a56) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url(/public/fonts/book/eb-garamond-600.woff2?v=a1d67bdf2b) format("woff2"); }
.book-home, .book-read {
  --tome-desk: #130d09; --leather: #2a1a12; --leather-hi: #3b2619; --leather-lo: #1c110b; --iron: #4a4541; --iron-hi: #7b756e;
  --gilt: #c9a24a; --gilt-dim: #8f7434; --on-leather: #e8dcc0; --on-leather-soft: #b3a283;
  --vellum: #dfcea6; --vellum-2: #d2bf93; --vellum-edge: #a8905f; --ink: #24180e; --ink-soft: #5a4128; --rubric: #8c1f14;
  --candle: rgba(255, 190, 110, .10);
  --book-serif: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
  --book-latin: "EB Garamond", "Noto Serif KR", Georgia, serif;
  --be-ink: var(--rubric);
}
:root[data-theme="dark"] .book-home, :root[data-theme="dark"] .book-read {
  --tome-desk: #0d0906; --vellum: #c9b78d; --vellum-2: #bba878; --vellum-edge: #8c764a; --ink: #1f140b; --ink-soft: #4c3620; --rubric: #7d1a10; --candle: rgba(255, 190, 110, .14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .book-home, :root:not([data-theme="light"]) .book-read {
    --tome-desk: #0d0906; --vellum: #c9b78d; --vellum-2: #bba878; --vellum-edge: #8c764a; --ink: #1f140b; --ink-soft: #4c3620; --rubric: #7d1a10; --candle: rgba(255, 190, 110, .14);
  }
}
/* element inks: initials of 24px or more, rules and ribbons only, never small text */
.book-read.be-fire, .book-leaf.be-fire { --be-ink: #8c2a12; } .book-read.be-water, .book-leaf.be-water { --be-ink: #1f4f7a; }
.book-read.be-nature, .book-leaf.be-nature { --be-ink: #2c5a34; } .book-read.be-thunder, .book-leaf.be-thunder { --be-ink: #6b5200; }
.book-read.be-light, .book-leaf.be-light { --be-ink: #7a4a1c; } .book-read.be-dark, .book-leaf.be-dark { --be-ink: #4a2f85; }
.book-home, .book-read { margin-inline: -16px; padding: 16px 16px 28px; background: var(--tome-desk); color: var(--on-leather); font-family: var(--book-serif); }
.book-read { margin-top: 6px; background: radial-gradient(70% 55% at 50% 36%, var(--candle), transparent 62%), var(--tome-desk); } /* the candle: static */
.book-home :focus-visible, .book-read :focus-visible { outline: 2px solid var(--gilt); outline-offset: 3px; }

/* contents: the cover */
.book-cover { position: relative; margin: 0 0 22px; padding: 28px 24px 24px; border: 1px solid var(--gilt-dim); border-radius: 4px 8px 8px 4px; outline: 1px solid var(--leather-hi); outline-offset: -8px; background: url(/public/world/book/tx-leather.webp?v=3131614727) 0 0 / 256px repeat, var(--leather); color: var(--on-leather); box-shadow: 0 14px 30px rgba(0, 0, 0, .5), inset 10px 0 18px -10px rgba(0, 0, 0, .6); }
.tome-corner { position: absolute; width: 44px; height: 44px; background: url(/public/world/book/corner-iron.webp?v=2a79fa3d8f) center / contain no-repeat; pointer-events: none; }
.tome-corner.c-tl { top: -1px; left: -1px; } .tome-corner.c-tr { top: -1px; right: -1px; transform: scaleX(-1); }
.tome-corner.c-bl { bottom: -1px; left: -1px; transform: scaleY(-1); } .tome-corner.c-br { bottom: -1px; right: -1px; transform: scale(-1, -1); }
.book-kicker { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--gilt-dim); }
.book-cover h1 { margin: 2px 0 10px; font-size: 2rem; font-weight: 700; line-height: 1.2; color: var(--gilt); }
.book-lead { margin: 0; line-height: 1.7; color: var(--on-leather); word-break: keep-all; }
/* shelves */
.book-shelf-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--gilt-dim); font-size: 1.1875rem; font-weight: 700; color: var(--on-leather); }
.book-shelf-h small { font-size: .8125rem; font-weight: 500; color: var(--on-leather-soft); }
.book-shelf-lead { margin: 0 0 12px; font-size: .875rem; line-height: 1.6; color: var(--on-leather-soft); word-break: keep-all; }
.book-shelf-lead a { color: var(--gilt); }
.book-home .muted { color: var(--on-leather-soft); }
/* the world chapters: a column of vellum slips */
.book-chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .book-chapters { grid-template-columns: repeat(2, 1fr); } }
.book-chapters a { position: relative; display: grid; grid-template-columns: 104px 1fr auto; align-items: center; gap: 12px; height: 80px; padding-right: 12px; overflow: hidden; border: 1px solid var(--vellum-edge); border-radius: 2px 4px 4px 2px; background: linear-gradient(90deg, rgba(40, 22, 8, .22), transparent 14px), var(--vellum); color: var(--ink); text-decoration: none; box-shadow: 2px 2px 0 var(--vellum-edge), 0 8px 16px rgba(0, 0, 0, .4); transition: transform .12s; }
.book-chapters a:hover { transform: translateY(-2px); }
.book-ch-art { display: block; width: 104px; height: 80px; background: #2a2018; }
.book-ch-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: sepia(.25); }
.book-ch-text { display: grid; gap: 2px; min-width: 0; }
.book-ch-text small { font-size: .8125rem; font-weight: 700; color: var(--rubric); }
.book-ch-text strong { font-size: 1rem; font-weight: 700; line-height: 1.35; word-break: keep-all; }
.book-chapters .ico-play { width: 18px; height: 18px; color: var(--rubric); }
/* element tabs */
.book-els { margin: 4px 0 6px; gap: 4px; }
.book-els .chip { min-height: 44px; padding: 0 10px; border-radius: 0; background: none; box-shadow: none; transform: none; color: var(--on-leather-soft); font-weight: 700; border: 0; border-bottom: 2px solid transparent; }
.book-els .chip.active { color: var(--on-leather); border-bottom-color: var(--rubric); }
.book-els .chip small { margin-left: 6px; font-size: .8125rem; font-weight: 500; }
.book-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--be); }
/* boss tiles: vellum slips with a seal or a ribbon */
.book-leaves { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 640px) { .book-leaves { grid-template-columns: repeat(5, 1fr); } }
.book-leaf > a, .book-leaf.unseen { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; height: 100%; padding: 10px 6px 10px; border: 1px solid var(--vellum-edge); border-radius: 2px 4px 4px 2px; background: linear-gradient(90deg, rgba(40, 22, 8, .22), transparent 8px), var(--vellum); color: var(--ink); text-align: center; text-decoration: none; box-shadow: 0 6px 12px rgba(0, 0, 0, .35); transition: transform .12s; }
.book-leaf > a:hover { transform: translateY(-2px); }
.book-leaf.unseen { opacity: .55; background: var(--leather-lo); border-color: var(--leather-hi); color: var(--on-leather-soft); }
.book-leaf-art { display: block; width: 100%; aspect-ratio: 1; }
.book-leaf-art img { width: 100%; height: 100%; object-fit: contain; }
.book-leaf strong { font-size: .8125rem; font-weight: 700; line-height: 1.3; word-break: keep-all; }
.book-seal { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; background: url(/public/world/book/seal-wax.webp?v=cde60d7a2e) center / contain no-repeat, radial-gradient(circle, #7a1d14 62%, transparent 64%); }
.book-ribbon { position: absolute; top: -1px; right: 10px; width: 12px; height: 28px; background: var(--be-ink); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.book-ribbon.full { height: 40px; background: var(--gilt); }

/* the reader */
.book-top { display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 0 auto 10px; }
.book-back { flex: 0 0 auto; font-weight: 700; font-size: .875rem; color: var(--on-leather); text-decoration: none; }
.book-where { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 500; color: var(--on-leather-soft); }
.book-sound { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; margin: -4px 0; padding: 0; border: 1.5px solid var(--gilt-dim); border-radius: 50%; background: var(--leather); color: var(--gilt); cursor: pointer; }
.book-sound[hidden] { display: none; }
.book-sound .ico { width: 22px; height: 22px; }
.book-sound .snd-x { display: none; }
.book-sound[data-state="off"] { color: var(--on-leather-soft); }
.book-sound[data-state="off"] .snd-wave { display: none; }
.book-sound[data-state="off"] .snd-x { display: inline; }
.book-stage { position: relative; max-width: 560px; height: clamp(470px, calc(100svh - 236px), 820px); margin: 0 auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; clip-path: inset(-48px -48px -48px 0); }
.book-page { position: absolute; inset: 0; display: none; }
.book-page.is-cur { display: block; z-index: 2; }
.book-page.is-under { display: block; z-index: 1; }
.book-page.is-turning { display: block; z-index: 3; }
.pg-clip, .pg-hold { position: absolute; inset: 0; }
.pg-face { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--vellum-edge); border-radius: 2px 6px 6px 2px; background: url(/public/world/book/tx-vellum-a.webp?v=9c97879451) center / 100% 100%, var(--vellum); background-blend-mode: multiply; color: var(--ink); box-shadow: 1px 1px 0 var(--vellum-2), 3px 3px 0 var(--vellum-edge), 4px 5px 0 var(--vellum-2), 0 16px 28px rgba(0, 0, 0, .55); }
.pg-even .pg-face { background-image: url(/public/world/book/tx-vellum-b.webp?v=07cfd52736); }
.pg-face::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(90deg, rgba(40, 22, 8, .30), transparent 20px), radial-gradient(120% 85% at 50% 42%, transparent 55%, rgba(60, 35, 10, .22)); }
.pg-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 24px 24px 8px 28px; scrollbar-width: thin; }
.pg-folio { position: relative; padding: 2px 0 12px; text-align: center; font-family: var(--book-latin); font-size: .875rem; font-weight: 500; font-variant-numeric: oldstyle-nums; color: var(--ink-soft); }
.pg-text { max-width: 32em; margin: 0 0 1.1em; font-size: 1.0625rem; font-weight: 500; line-height: 1.8; word-break: keep-all; text-wrap: pretty; }
@media (min-width: 600px) { .pg-text { font-size: 1.125rem; } }
.book-page[lang="en"] .pg-text, .book-read:lang(en) .book-page:not([lang="ko"]) .pg-text { font-family: var(--book-latin); font-size: 1.125rem; line-height: 1.5; }
.pg-first::first-letter { float: left; margin: 4px 8px 0 0; font-size: 3.25rem; font-weight: 700; line-height: .9; color: var(--rubric); }
.is-boss .pg-first::first-letter { color: var(--be-ink); }
.pg-kicker { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--rubric); }
.pg-title { margin: 2px 0 12px; font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--ink); word-break: keep-all; }
.book-read:lang(en) .pg-title, .book-read:lang(en) .leaf-name { font-family: var(--book-latin); font-weight: 600; }
/* a tipped-in plate: a world chapter's picture, a boss half's scene */
.pg-plate { margin: 0 0 14px; padding: 5px; border: 1px solid var(--vellum-edge); background: #e9dcbc; box-shadow: 0 1px 0 rgba(255, 248, 228, .5) inset, 0 3px 6px rgba(40, 22, 8, .35); transform: rotate(-.4deg); }
.pg-plate img, .pg-plate video { display: block; width: 100%; aspect-ratio: 3 / 2; max-height: 200px; object-fit: cover; object-position: 50% 40%; background: #2a2018; filter: sepia(.18) contrast(1.02); }
/* on a page with a plate, the plate gives way first: it shrinks (to 110px) before the text would have to scroll */
.pg-open .pg-body, .pg-scene .pg-body { display: flex; flex-direction: column; }
.pg-open .pg-body > *, .pg-scene .pg-body > * { flex: none; }
.pg-open .pg-body > .pg-plate, .pg-scene .pg-body > .pg-plate { display: flex; flex: 0 1 auto; min-height: 110px; }
.pg-open .pg-plate img, .pg-open .pg-plate video, .pg-scene .pg-plate img, .pg-scene .pg-plate video { flex: 1 1 auto; min-height: 0; height: auto; }
.pg-plate.pg-fig img, .pg-plate.pg-fig video { max-height: 250px; aspect-ratio: 4 / 3; object-position: 50% 35%; }
/* a clip on its own page, whole: portrait 9:16 filling the page height, centred */
.pg-film .pg-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; }
.pg-film .pg-plate.pg-film-fig { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; margin: 0; transform: rotate(-.4deg); }
.pg-film .pg-plate.pg-film-fig video { width: auto; height: 100%; max-height: none; aspect-ratio: 9 / 16; object-fit: cover; object-position: 50% 50%; }
.pg-end { display: grid; justify-items: center; gap: 8px; margin: 18px 0 10px; text-align: center; font-size: .875rem; font-weight: 700; color: var(--ink-soft); }
.pg-orn { position: relative; display: block; width: 40px; height: 1px; margin: 4px 0; background: var(--rubric); }
.pg-orn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; background: var(--rubric); transform: translate(-50%, -50%) rotate(45deg); }
.pg-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0; }
.pg-links.col { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
.book-read .pg-links .btn { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); box-shadow: none; font-weight: 700; }
.book-read .pg-links .btn:active { transform: translateY(1px); }
.book-read .pg-links .btn-primary { border-color: var(--rubric); background: var(--rubric); color: #f3e6c8; }
.book-read .pg-links .btn:focus-visible { outline: 2px solid var(--rubric); }
.pg-label { margin: 0 0 12px; font-size: .8125rem; font-weight: 700; color: var(--rubric); }
.pg-note { margin: 0 0 14px; padding: 4px 10px; border-left: 2px solid var(--ink-soft); font-size: .875rem; line-height: 1.5; color: var(--ink-soft); }
.pg-note small { display: block; font-weight: 700; }
.pg-lock { display: grid; justify-items: center; gap: 12px; margin: 6px 0 16px; text-align: center; }
.pg-lock p { margin: 0; max-width: 22em; font-size: 1rem; line-height: 1.7; word-break: keep-all; }
.pg-seal { position: relative; display: block; width: 120px; height: 80px; }
.pg-cord { position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: var(--ink-soft); transform: rotate(18deg); }
.pg-cord + .pg-cord { transform: rotate(-18deg); }
.pg-wax { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: url(/public/world/book/seal-wax.webp?v=cde60d7a2e) center / contain no-repeat, radial-gradient(circle, #7a1d14 60%, transparent 62%); }
.pg-lock.broken .pg-wax { background: url(/public/world/book/seal-broken.webp?v=aa90f5769b) center / contain no-repeat, radial-gradient(circle, #7a1d14 60%, transparent 62%); }
.pg-locked .pg-body, .pg-last .pg-body { display: flex; flex-direction: column; justify-content: center; }
.pg-locked .pg-label { align-self: center; }
/* a boss's cover page: its place and picture, name and words */
.leaf-art { position: relative; aspect-ratio: 4 / 3; max-height: 46%; margin: -6px auto 14px; overflow: hidden; border: 1px solid var(--vellum-edge); border-radius: 2px; background: #1d1510; box-shadow: 0 0 0 5px #e9dcbc, 0 0 0 6px var(--vellum-edge), 0 6px 12px 4px rgba(40, 22, 8, .35); }
.leaf-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.leaf-boss { position: absolute; left: 50%; bottom: 2%; height: 94%; max-width: 92%; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.leaf-el { display: flex; align-items: center; margin: 4px 0 2px; font-size: .8125rem; font-weight: 700; color: var(--ink-soft); }
.leaf-name { margin: 2px 0 12px; font-size: 1.625rem; font-weight: 700; line-height: 1.25; word-break: keep-all; }
.leaf-line { margin: 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--be-ink); }
.leaf-line p { margin: 0; font-size: 1.1875rem; line-height: 1.55; font-weight: 700; word-break: keep-all; }
.leaf-lore { margin: 0; line-height: 1.7; }
/* the bar under the book */
.book-bar { display: flex; align-items: center; gap: 12px; max-width: 560px; margin: 16px auto 0; }
.book-nav { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--gilt-dim); border-radius: 50%; background: var(--leather); color: var(--gilt); text-decoration: none; }
.book-nav .ico { width: 24px; height: 24px; }
.book-nav:active { transform: scale(.96); }
.book-nav.off { opacity: .35; pointer-events: none; }
.book-progress { flex: 1; display: grid; gap: 6px; justify-items: center; }
.book-pn { font-family: var(--book-latin); font-size: .875rem; font-weight: 500; color: var(--on-leather-soft); font-variant-numeric: tabular-nums; }
.book-progress progress { width: 100%; height: 2px; border: 0; background: var(--leather-hi); overflow: hidden; -webkit-appearance: none; appearance: none; }
.book-progress progress::-webkit-progress-bar { background: var(--leather-hi); }
.book-progress progress::-webkit-progress-value { background: var(--gilt); transition: width .3s; }
.book-progress progress::-moz-progress-bar { background: var(--gilt); }
.book-theme { max-width: 560px; margin: 10px auto 0; text-align: center; font-size: .8125rem; color: var(--on-leather-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-hint { margin: 8px 0 0; text-align: center; font-size: .8125rem; color: var(--on-leather-soft); }
.book-hint .hint-desk { display: none; }
@media (hover: hover) and (pointer: fine) { .book-hint .hint-touch { display: none; } .book-hint .hint-desk { display: inline; } }
/* the turn: the moving page is clipped along the fold, and its back (the flap) is mirrored across it */
.pg-flap, .pg-edge, .book-castclip { display: none; }
.book-page.is-turning .pg-clip { inset: auto; left: 0; top: 0; width: var(--S); height: var(--S); overflow: hidden; transform-origin: 100% 50%; }
.book-page.is-turning .pg-hold { inset: auto; left: 0; top: 0; width: var(--W); height: var(--H); transform-origin: var(--S) calc(var(--S) / 2); }
.book-page.is-turning .pg-face, .book-page.is-turning .pg-flap { will-change: transform; }
.book-page.is-turning .pg-face { box-shadow: none; }
.book-page.is-turning .pg-flap { display: block; position: absolute; left: 0; top: 0; width: var(--W); height: var(--H); transform-origin: 0 0; overflow: hidden; border: 1px solid var(--vellum-edge); border-radius: 2px 6px 6px 2px; background: url(/public/world/book/tx-vellum-b.webp?v=07cfd52736) center / 100% 100%, var(--vellum-2); background-blend-mode: multiply; }
.pg-flap-light { position: absolute; left: 0; top: 0; width: 100px; height: var(--S); transform-origin: 0 50%; background: linear-gradient(90deg, rgba(20, 12, 6, .35) 0, rgba(255, 244, 214, .38) 6%, rgba(255, 244, 214, .10) 22%, rgba(20, 12, 6, 0) 45%, rgba(20, 12, 6, .14) 100%); }
.book-page.is-turning .pg-edge { display: block; position: absolute; left: 0; top: 0; width: 100px; height: var(--S); transform-origin: 100% 50%; pointer-events: none; background: linear-gradient(270deg, rgba(20, 12, 6, .42), rgba(20, 12, 6, 0)); }
.book-read.is-folding .book-castclip { display: block; position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; border-radius: 2px 6px 6px 2px; }
.book-cast { position: absolute; left: 0; top: 0; width: 100px; height: var(--S); transform-origin: 0 50%; background: linear-gradient(90deg, rgba(15, 9, 4, .50) 0, rgba(15, 9, 4, .18) 35%, rgba(15, 9, 4, 0) 100%); }
.book-page.pg-fade-in { animation: pg-fade-in .2s ease both; z-index: 3; }
@keyframes pg-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .book-chapters a, .book-leaf > a { transition: none; }
  .book-chapters a:hover, .book-leaf > a:hover { transform: none; }
}
@media (min-width: 900px) { .book-stage { height: clamp(520px, calc(100svh - 230px), 760px); } }
/* short phones: a slightly smaller body and plate so a full page still fits without scrolling inside it */
@media (max-height: 780px) and (max-width: 599px) {
  .pg-text { font-size: 1rem; line-height: 1.7; }
  .book-page[lang="en"] .pg-text, .book-read:lang(en) .book-page:not([lang="ko"]) .pg-text { font-size: 1.0625rem; line-height: 1.45; }
  .pg-body { padding-top: 18px; }
  .pg-plate img, .pg-plate video { max-height: 150px; }
  .book-hint { display: none; }
  .book-stage { height: max(470px, calc(100svh - 200px)); }
}
@media (max-width: 600px) { .book-bar, .book-hint, .book-theme { padding-right: 70px; } } /* clear of the floating chat buttons */

/* the raid page and the record room point into the book */
.raid-leaf { margin: -4px 0 10px; font-size: .9rem; font-weight: 800; }
.raid-leaf a { color: var(--be, var(--orange)); text-decoration: none; }
.raid-leaf a:hover { text-decoration: underline; }
.raid-book-link { margin: 22px 0 6px; }
.raid-one.has-line.raging .raid-rage-banner { animation-duration: 3.4s; }
.raid-one.has-line .raid-rage-banner small { max-width: 28em; font-size: .92rem; line-height: 1.45; }
.lp-quote { margin: 4px 0 2px; font-weight: 700; }
.lp-leaf { display: inline-block; margin: 2px 0 6px; font-size: .86rem; font-weight: 800; color: var(--be, var(--orange)); text-decoration: none; }
.lp-leaf:hover { text-decoration: underline; }

/* ---- Profile cards (designed by Fable, 2026-11-13): 2:1 banner, rarity frame (9-slice SVG), live overlay ---- */
.pcard { --fw: 12px; position: relative; display: block; aspect-ratio: 2 / 1; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); isolation: isolate; }
.pcard-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard-frame { position: absolute; inset: 0; z-index: 3; pointer-events: none; border: var(--fw) solid transparent; border-image: url(/public/world/cards/frames/frame-common.svg?v=a7f4195404) 24 round; }
.pcard.rarity-uncommon .pcard-frame { border-image-source: url(/public/world/cards/frames/frame-uncommon.svg?v=a5fafbf669); }
.pcard.rarity-rare .pcard-frame { border-image-source: url(/public/world/cards/frames/frame-rare.svg?v=9163965dc7); }
.pcard.rarity-epic .pcard-frame { border-image-source: url(/public/world/cards/frames/frame-epic.svg?v=8d5cd7118b); }
.pcard.rarity-legendary .pcard-frame { border-image-source: url(/public/world/cards/frames/frame-legendary.svg?v=64add7c3b9); }
.pcard.rarity-unique .pcard-frame { border-image-source: url(/public/world/cards/frames/frame-unique.svg?v=2c7f28b816); }
/* common: the dog-eared top-right corner is cut out of the card */
.pcard.rarity-common { clip-path: polygon(0 0, calc(100% - var(--fw) * .73) 0, 100% calc(var(--fw) * .73), 100% 100%, 0 100%); }
/* epic: a slow diagonal sheen; legendary: the shared rarity shine; unique: six drifting 풀빛 sparkles */
.pcard.rarity-epic::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .28) 50%, transparent 62%) no-repeat; background-size: 260% 100%; animation: pcard-sheen 6s linear infinite; }
@keyframes pcard-sheen { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.pcard.rarity-legendary { animation: rarity-shine 2.4s ease-in-out infinite; }
.pcard-sparks i { position: absolute; z-index: 4; width: 9px; height: 9px; background: #c9f27a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: pcard-drift 5s ease-in-out infinite; pointer-events: none; }
.pcard-sparks .pcs-1 { left: 58%; top: 18%; } .pcard-sparks .pcs-2 { left: 72%; top: 64%; animation-delay: -.8s; } .pcard-sparks .pcs-3 { left: 86%; top: 30%; animation-delay: -1.6s; }
.pcard-sparks .pcs-4 { left: 64%; top: 82%; animation-delay: -2.4s; } .pcard-sparks .pcs-5 { left: 92%; top: 74%; animation-delay: -3.2s; } .pcard-sparks .pcs-6 { left: 78%; top: 10%; animation-delay: -4s; }
@keyframes pcard-drift { 0%, 100% { transform: translateY(0) scale(.6); opacity: .2; } 50% { transform: translateY(-10px) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pcard.rarity-epic::after, .pcard.rarity-legendary, .pcard-sparks i { animation: none; } }
/* the overlay sits on at least 72% surface: theme text stays readable in light and dark */
.pcard-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 92%, transparent) 0%, color-mix(in srgb, var(--surface) 72%, transparent) 45%, transparent 70%); }
.pcard-over { position: absolute; z-index: 2; left: calc(var(--fw) + 6px); top: calc(var(--fw) + 4px); bottom: calc(var(--fw) + 4px); width: calc(52% - var(--fw) - 6px); display: flex; align-items: center; gap: 10px; color: var(--text); }
.pcard-over .av, .pcard-over .av > img { width: 56px; height: 56px; flex: none; }
.pcard-text { display: grid; gap: 2px; min-width: 0; }
.pcard-name { font-size: 1.05rem; font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-meta { font: 800 .76rem/1.3 var(--mono); overflow-wrap: anywhere; }
.pcard-greeting { justify-self: start; max-width: 100%; margin-top: 2px; padding: 1px 8px; border-radius: 10px 10px 10px 2px; background: var(--surface); border: 2px solid var(--line); font-size: .74rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-chip { position: absolute; z-index: 4; right: calc(var(--fw) + 4px); bottom: calc(var(--fw) + 4px); display: inline-flex; align-items: center; gap: 5px; max-width: 46%; min-height: 28px; padding: 2px 9px 2px 4px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--text); font-size: .74rem; font-weight: 800; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-chip .rarity-badge, .pcard-tag .rarity-badge { flex: none; }
.pcard .rarity-badge, .pcard-tag.rarity-common .rarity-badge { color: var(--text); }
.pcard.rarity-uncommon .rarity-badge, .pcard-tag.rarity-uncommon .rarity-badge { background: var(--mint); color: #2a1d12; }
.pcard.rarity-rare .rarity-badge, .pcard-tag.rarity-rare .rarity-badge { background: var(--sky); color: #2a1d12; }
.pcard.rarity-epic .rarity-badge, .pcard-tag.rarity-epic .rarity-badge { background: #b48ce0; color: #2a1d12; }
.pcard.rarity-legendary .rarity-badge, .pcard-tag.rarity-legendary .rarity-badge { background: var(--orange); color: #fff; }
.pcard-tag .rarity-badge { font-size: .74rem; padding: 2px 9px; border: 2px solid var(--line); }

/* the profile's second panel in card mode: the banner bleeds to the panel edges, the slot sheet below it */
.char-card.has-pcard > .pcard-banner { grid-column: 1 / -1; grid-row: 1; margin: -14px -14px 0; border-radius: calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0; }
.char-card.has-pcard > h2 { grid-row: 2; }
.char-card.has-pcard .char-sheet .slot-left, .char-card.has-pcard .char-sheet .slot-right, .char-card.has-pcard .char-sheet .char-sheet-doll { grid-row: 3; }
.char-card.has-pcard .char-sheet .slot-backgrounds, .char-card.has-pcard > .slot-under { grid-row: 4; }
.char-card.has-pcard > .char-card-actions { grid-row: 5; }
@media (min-width: 720px) { .char-card.has-pcard > .pcard-banner { width: min(100%, 560px); justify-self: center; margin: 0; border-radius: var(--radius); } }
.panel-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -8px 0 22px; }
.panel-mode-label { font-weight: 800; }
.panel-mode .hint { flex-basis: 100%; margin: 0; }
.seg { display: inline-flex; padding: 3px; gap: 3px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); }
.seg-opt { min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-weight: 800; cursor: pointer; }
.seg-opt.on { background: var(--orange); color: #fffaf0; }
.seg-opt:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* the public profile: banner on top, stats and the join date under it */
.profile-card-big.has-pcard { display: block; padding: 0; overflow: hidden; }
.profile-card-big.has-pcard > .pcard-banner { border-radius: 0; }
.profile-card-big.has-pcard .profile-card-rest { padding: 12px 16px 14px; }
.profile-card-big.has-pcard .profile-card-rest p { margin: 0 0 8px; }

/* ranking rows: a 5:1 strip on the right, masked so the name sits on the plain row; a 4 px rarity tab on the edge */
.rank-row.rank-card { position: relative; overflow: hidden; isolation: isolate; }
.rank-card-art { position: absolute; top: 0; right: 0; z-index: 0; width: 62%; height: 100%; object-fit: cover; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%); mask-image: linear-gradient(90deg, transparent 0, #000 45%); }
.rank-row.rank-card > :not(.rank-card-art) { position: relative; z-index: 1; }
.rank-row.rank-card::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; width: 4px; background: var(--r-bg, var(--surface-2)); }
.rank-card .rank-dp { padding: 2px 10px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); }
.rank-card .rank-names strong { justify-self: start; max-width: 100%; padding: 0 6px; border-radius: 6px; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.rank-top.rank-card .rank-dp { background: #fffaf0; border-color: #2a1d12; }
.rank-top.rank-card .rank-names strong { background: rgba(255, 250, 240, .85); }

/* the collection */
.cards-page .pc-count { margin: 8px 0 4px; font-weight: 800; }
.pc-filters { display: grid; gap: 2px; margin: 12px 0 4px; }
.pc-filters .chips { padding-bottom: 6px; }
.pc-filters .chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.pc-filters .chip .el-dot { width: 20px; height: 20px; font-size: 11px; }
.pc-rchip:not(.active) { background: var(--r-bg, var(--surface)); color: #2a1d12; }
.pc-series-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.pc-select { display: grid; gap: 2px; font-size: .78rem; font-weight: 800; }
.pc-select select { min-height: 40px; max-width: 46vw; }
.pc-series h2 { margin: 20px 0 0; font-size: 1.05rem; }
.pc-series h2 small { font: 800 .8rem var(--mono); color: var(--muted); }
.pc-grid { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
@media (min-width: 720px) { .pc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .pc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pc-tile { position: relative; display: grid; gap: 2px; align-content: start; }
.pc-tile-link { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.pc-tile .pcard { --fw: 7px; border-radius: var(--radius-sm); box-shadow: 3px 3px 0 var(--shadow); }
.pc-tile.locked .pcard { opacity: .7; }
.pc-tile.equipped .pcard { outline: 3px solid var(--orange); outline-offset: 2px; }
.pc-tile-name { font-size: .86rem; font-weight: 800; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-tile-status { font: 800 .74rem var(--mono); color: var(--muted); }
.pc-tile-status .poor, .pc-poor { color: #b4361f; }
:root[data-theme="dark"] .pc-tile-status .poor, :root[data-theme="dark"] .pc-poor { color: #ff8a7a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pc-tile-status .poor, :root:not([data-theme="light"]) .pc-poor { color: #ff8a7a; } }
.pc-ribbon { position: absolute; left: 6px; top: 6px; z-index: 5; padding: 1px 8px; border-radius: 999px; border: 2px solid #2a1d12; background: var(--orange); color: #fffaf0; font-size: .7rem; font-weight: 900; }
.pc-tile-equip { position: absolute; left: 6px; top: 6px; z-index: 6; margin: 0; }
.pc-tile-equip .btn { min-height: 30px; padding: 0 10px; font-size: .74rem; }
.pc-reset { margin: 12px 0 0; }

/* a card's page */
.pc-back { margin: 0 0 10px; font-size: .9rem; }
.pcard-big { --fw: 14px; max-width: 1040px; margin: 0 auto; box-shadow: 4px 4px 0 var(--shadow); }
@media (max-width: 480px) { .pcard-big { --fw: 12px; } }
.pc-facts h1 { margin: 14px 0 6px; font-size: 1.4rem; }
.pc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.pc-tags .el-dot { width: 20px; height: 20px; font-size: 11px; }
.pc-actions { display: grid; gap: 8px; justify-items: start; margin: 16px 0 6px; }
.pc-actions form { margin: 0; }
.pc-actions .hint { margin: 0; }
.pc-poor { margin: 0; font-weight: 800; }
.pc-ach { display: grid; gap: 4px; width: 100%; padding: 12px 14px; border: var(--bw) dashed var(--line); border-radius: var(--radius-sm); }
.pc-ach p { margin: 0; }
.pc-row-h { margin: 22px 0 0; font-size: 1rem; }
.pc-pop-card .pcard { width: min(280px, 100%); margin: 0 auto; --fw: 8px; }
.reward-pop .ach-pop-actions form { margin: 0; }
.ach-pop-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.ach-pop-card form { margin: 0; }
a.ach-card { color: inherit; }
.ach-card img { width: 36px; aspect-ratio: 2 / 1; height: auto; border-radius: 4px; object-fit: cover; }
.ach-pop-reward.ach-card img { width: 120px; border-radius: 8px; border: 2px solid var(--line); }
.shop-pop .pc-sheet-card { width: min(260px, 100%); margin: 0 auto; }
.shop-pop .pc-sheet-card img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); border: 2px solid var(--line); }
@media (max-width: 600px) { .shop-modal.pc-sheet { align-items: end; padding: 0; } .shop-modal.pc-sheet .ach-pop { width: 100%; max-width: none; border-radius: var(--radius) var(--radius) 0 0; } }
/* ---------- 풀이길 (Unbinding Road; designed by Fable, 2026-11-13; views/road.mjs, public/road.js) ---------- */
:root { --rd-ink: #2a1d12; --rd-paper: #fffaf0; --rd-ember: #e2582a; --rd-ash: #8f7b66; --rd-good: #3f8f5f; --rd-bad: #b5452c; --rd-stage: #f3dcc0; --rd-stage-2: #e6bf98; --rd-hp: #d9452b; --rd-ehp: #c13d27; --rd-block: #3d7fb1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rd-stage: #3b2619; --rd-stage-2: #24170f; --rd-good: #7cc9a0; --rd-bad: #ff8c6b; --rd-block: #7cc6ee; } }
:root[data-theme="dark"] { --rd-stage: #3b2619; --rd-stage-2: #24170f; --rd-good: #7cc9a0; --rd-bad: #ff8c6b; --rd-block: #7cc6ee; }

/* entry card (/world, /raid) */
.road-entry { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 12px 14px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: 4px 4px 0 var(--shadow); min-height: 64px; }
.road-entry:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--shadow); }
.road-entry-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--surface-2); display: grid; place-items: center; color: var(--text); }
.road-glyph { width: 38px; height: 38px; display: inline-block; vertical-align: middle; }
.road-entry-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.road-entry-text .muted { font-size: .85rem; }
.road-entry-go { font-weight: 900; font-size: 1.2rem; }

/* hub (portrait) */
.road-hub h1 { display: flex; align-items: center; gap: 8px; margin: .4em 0 .2em; }
.road-head { align-items: center; }
.road-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 800; font-size: .88rem; }
.road-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 12px 0; padding: 12px 14px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--mustard); color: var(--on-color); text-decoration: none; box-shadow: 3px 3px 0 var(--shadow); min-height: 44px; }
.road-resume span:last-child { margin-left: auto; font-weight: 900; }
.road-tickets { font-size: .88rem; }
.road-guest { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.road-regions { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 12px; }
.road-region { border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 3px 3px 0 var(--shadow); overflow: hidden; }
.road-region.closed { opacity: .72; box-shadow: none; }
.road-region-link { display: flex; align-items: stretch; min-height: 112px; color: var(--text); text-decoration: none; cursor: pointer; list-style: none; }
.road-region-link::-webkit-details-marker { display: none; }
.road-region-art { flex: none; width: 112px; position: relative; overflow: hidden; background: radial-gradient(90% 70% at 15% 85%, rgba(224, 112, 44, .35), transparent 60%), linear-gradient(170deg, #1a1412, #2a1a14 60%, #120d0b); }
.road-region-art.r-ebb { background: radial-gradient(90% 70% at 15% 85%, rgba(95, 176, 160, .32), transparent 60%), linear-gradient(170deg, #18242b, #23323a 60%, #10181c); }
.road-region-art.r-hush { background: radial-gradient(90% 70% at 15% 85%, rgba(184, 201, 106, .28), transparent 60%), linear-gradient(170deg, #161d15, #232b1e 60%, #0f140e); }
.road-region-art.r-pass { background: radial-gradient(90% 70% at 15% 85%, rgba(185, 167, 240, .3), transparent 60%), linear-gradient(170deg, #1b1c30, #2a2c40 60%, #101120); }
.road-region-art.r-noon { background: radial-gradient(90% 70% at 15% 85%, rgba(246, 236, 201, .45), transparent 60%), linear-gradient(170deg, #b8a57a, #cbbf9f 55%, #8a7650); }
.road-region-art.r-vigil { background: radial-gradient(90% 70% at 15% 85%, rgba(230, 181, 106, .28), transparent 60%), linear-gradient(170deg, #12111c, #241c30 60%, #0b0a12); }
.road-region-art::after { content: ""; position: absolute; inset: 0; box-shadow: inset -1px 0 0 var(--line); pointer-events: none; }
.road-region-lead { font-size: .8rem; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.road-region-body strong { font-family: var(--rd-serif); font-weight: 700; }
.road-region-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.road-region-body { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 14px; min-width: 0; }
.road-region-body strong { font-size: 1.1rem; }
.road-region-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .82rem; }
.road-el, .road-tag, .road-soon { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; background: var(--surface-2); font-weight: 800; }
.road-tag.good { background: var(--rd-good); color: #fffaf0; }
.road-tag.bad { background: var(--rd-bad); color: #fffaf0; }
.road-dots { display: inline-flex; gap: 4px; }
.road-dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line); }
.road-dots i.on { background: var(--orange); }
.road-sheet[open] .road-region-link { border-bottom: 2px dashed var(--line); }
.road-sheet-body { padding: 12px 14px 16px; }
.road-sheet-body h3 { margin: 12px 0 6px; font-size: 1rem; }
.road-depths { display: flex; flex-wrap: wrap; gap: 8px; }
.road-depth-in { position: absolute; opacity: 0; pointer-events: none; }
.road-depth-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--line); border-radius: 999px; font-weight: 800; cursor: pointer; background: var(--surface); }
.road-depth-in:checked + .road-depth-tab { background: var(--text); color: var(--bg); }
.road-depth-in:focus-visible + .road-depth-tab { outline: 3px dashed var(--orange); outline-offset: 3px; }
.road-depth-panel { display: none; flex-basis: 100%; }
.road-depth-in.d1:checked ~ .dp-1, .road-depth-in.d2:checked ~ .dp-2 { display: block; }
.road-loot { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .9rem; }
.road-loot li { display: flex; align-items: center; gap: 8px; }
.road-loot img { width: 24px; height: 24px; object-fit: contain; }
.road-cap { font-size: .82rem; }
.road-go { width: 100%; margin-top: 6px; }
.road-locked { font-weight: 800; }
.road-bosses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.road-bosses img { width: 100%; max-width: 96px; aspect-ratio: 1; object-fit: contain; }
.road-bosses small { display: block; font-weight: 700; }
.road-sil { filter: grayscale(1) brightness(.55); opacity: .8; }
.road-dex { font-size: .85rem; }

/* result (portrait) */
.road-result { padding-bottom: 24px; }
.road-result-head { display: flex; gap: 14px; align-items: center; margin: 14px 0; padding: 14px; border-radius: var(--radius); background: #16110e; color: #e6dac4; }
.road-result-head .road-kicker { color: #8f8377; }
.road-result-line { margin: 4px 0 0; color: #b5a993; font-size: .9rem; }
.road-result-boss { flex: none; width: 120px; height: 120px; object-fit: contain; border: 1px solid #3a332e; border-radius: var(--radius); background: #0d0a09; }
.road-result h1 { margin: 0; font-family: var(--rd-serif); font-weight: 900; font-size: 1.6rem; letter-spacing: .04em; color: #e6dac4; }
.road-kicker { margin: 0; font-weight: 800; color: var(--muted); font-size: .85rem; }
.road-result.st-won h1 { color: #e9d48a; }
.road-result-box { padding: 12px 14px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 3px 3px 0 var(--shadow); }
.road-result-box h2 { margin: 0 0 8px; font-size: 1rem; }
.road-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.road-trimmed { margin: 10px 0 0; }
.road-stats { font-size: .88rem; }
.road-result-go { display: flex; flex-wrap: wrap; gap: 10px; }
.road-orient-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--warn-text); font-weight: 700; font-size: .88rem; }
.road-orient-hint[hidden] { display: none; }

/* ---------- run page (landscape; design size 844 x 390, at least 640 x 320). Dark-fantasy pass (Fable, 2026-11-13):
   the run page is always dark whatever the site theme; the site tokens are overridden inside .road-root so the
   shared rules flip with it. One warm light from the left: the member's. Only transform and opacity animate. ---------- */
@font-face { font-family: "Road Serif"; font-weight: 700; font-style: normal; font-display: swap; src: url("/public/fonts/road-serif-700.woff2?v=e2aa172627") format("woff2"); }
@font-face { font-family: "Road Serif"; font-weight: 900; font-style: normal; font-display: swap; src: url("/public/fonts/road-serif-900.woff2?v=c2b4d0c7c0") format("woff2"); }
:root { --rd-serif: "Road Serif", "Noto Serif KR", "Noto Serif CJK KR", "Nanum Myeongjo", serif; }
body.bare:has(#road-root) { overflow: hidden; overscroll-behavior: none; background: #0d0a09; }
.road-root {
  color-scheme: dark;
  --bg: #0d0a09; --surface: #16110e; --surface-2: #221915; --text: #e6dac4; --muted: #8f8377;
  --line: #3a332e; --shadow: #000; --accent: #e0702c; --accent-text: #0d0a09;
  --rd-ink: #e6dac4; --rd-paper: #1c1512; --rd-ember: #e0702c; --rd-glow: #f3b25a; --rd-ash: #8f8377;
  --rd-iron: #4a423c; --rd-steel: #56616a; --rd-brass: #a8833f; --rd-gold: #d1a84f;
  --rd-hp: #a8392b; --rd-ehp: #8f2f24; --rd-hp-trail: #d9c08a; --rd-block: #9fb8c8;
  --rd-good: #8fae6b; --rd-bad: #c9553d; --rd-glint: #e9d48a;
  --rd-stage: #16110e; --rd-stage-2: #0d0a09;
  --rd-plate: 0 2px 0 #000, inset 0 1px 0 rgba(255, 255, 255, .06);
  --rd-fog: #241d19; --rd-backlight: rgba(224, 112, 44, .25); --rd-backlight-near: rgba(224, 112, 44, .6);
  --rd-warm-glow: rgba(243, 178, 90, .28); --rd-cold-shadow: rgba(0, 0, 0, .55); --rd-vignette: rgba(0, 0, 0, .6);
  --radius: 6px; --radius-sm: 4px; --bw: 1.5px;
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--bg); color: var(--text);
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); touch-action: manipulation; -webkit-user-select: none; user-select: none;
  font-variant-numeric: tabular-nums;
}
/* per-region light (road-regions.json palettes); walked trails stay ember, because that light is the member's */
.road-root[data-region="ebb"] { --rd-fog: #1c262b; --rd-backlight: rgba(95, 176, 160, .25); --rd-backlight-near: rgba(95, 176, 160, .6); }
.road-root[data-region="hush"] { --rd-fog: #1a2118; --rd-backlight: rgba(184, 201, 106, .25); --rd-backlight-near: rgba(184, 201, 106, .6); }
.road-root[data-region="pass"] { --rd-stage: #1b1c30; --rd-stage-2: #101120; --rd-fog: #1d1e30; --rd-backlight: rgba(185, 167, 240, .25); --rd-backlight-near: rgba(185, 167, 240, .6); }
.road-root[data-region="noon"] { --rd-fog: #e4d9b8; --rd-backlight: rgba(246, 236, 201, .35); --rd-backlight-near: rgba(246, 236, 201, .6); --rd-vignette: rgba(43, 33, 22, .5); --rd-cold-shadow: rgba(43, 33, 22, .6); --rd-warm-glow: rgba(243, 178, 90, .15); }
.road-root[data-region="vigil"] { --rd-fog: #1c1a28; --rd-backlight: rgba(230, 181, 106, .25); --rd-backlight-near: rgba(230, 181, 106, .6); }
.road-root.force-land { inset: auto; top: 0; left: 100vw; width: 100vh; height: 100vw; transform: rotate(90deg); transform-origin: top left; }
.road-app { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.road-root.busy .rd-card, .road-root.busy .rd-end-turn { pointer-events: none; }
.road-root .btn { border-radius: var(--radius-sm); box-shadow: var(--rd-plate); }
.rd-svg, .rd-hud-ico, .rd-cico, .rd-node-ico, .rd-st-ico, .rd-price-ico, .rd-big-ico, .rd-event-art, .rd-int-ico, .rd-cart-ico { display: inline-flex; }
.rd-svg svg, .rd-hud-ico svg, .rd-cico svg, .rd-node-ico svg, .rd-st-ico svg, .rd-price-ico svg, .rd-big-ico svg, .rd-event-art svg, .rd-int-ico svg, .rd-cart-ico svg { width: 100%; height: 100%; }
.rd-title { margin: 6px 12px 4px; font-family: var(--rd-serif); font-weight: 700; font-size: 16px; letter-spacing: .02em; }
.rd-line { margin: 0 12px 4px; color: var(--muted); font-size: .82rem; line-height: 1.45; }

/* HUD: a 34 px bar */
.rd-hud { flex: none; height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-bottom: 1px solid var(--line); background: #0d0a09; font-size: .84rem; overflow: hidden; }
.rd-hud b { font-weight: 900; font-variant-numeric: tabular-nums; }
.rd-hud-ico { width: 16px; height: 16px; color: var(--text); }
.rd-hud-ico.hp { color: var(--rd-hp); }
.rd-hud-ico.gl, .rd-glint b { color: var(--rd-glint); }
.rd-hp, .rd-glint, .rd-pack { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.rd-hp .rd-bar { width: 84px; }
.rd-hud-btn { display: inline-flex; align-items: center; gap: 4px; min-width: 34px; height: 26px; padding: 0 7px; border: var(--bw) solid var(--rd-iron); border-radius: var(--radius-sm); background: #1a1210; color: var(--text); font: inherit; cursor: pointer; flex: none; box-shadow: var(--rd-plate); }
.rd-menu-btn { margin-left: auto; }
.rd-leaves { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; }
.rd-leaves::-webkit-scrollbar { display: none; }
.rd-leaf { flex: none; height: 24px; padding: 0 8px; border: 1px solid var(--rd-brass); border-radius: var(--radius-sm); background: #1a1210; color: #d9c08a; font: inherit; font-size: .74rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.rd-leaf.set { border-color: var(--rd-gold); color: var(--rd-glint); }
.rd-bar { position: relative; display: inline-block; height: 6px; border-radius: 0; background: #000; overflow: hidden; vertical-align: middle; box-shadow: 0 0 0 1px #2a211c; }
.rd-bar i { position: absolute; left: 0; top: 0; bottom: 0; display: block; }
.rd-bar i.fill { background: var(--rd-hp); transition: width .18s ease-out; }
.rd-bar i.trail { background: var(--rd-hp-trail); transition: width .3s ease-out; }
.rd-bar.ehp i.fill { background: var(--rd-ehp); }

.rd-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* combat stage */
.rd-combat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rd-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 4px 14px 6px; overflow: hidden; background: radial-gradient(120% 90% at 30% 100%, var(--rd-stage), var(--rd-stage-2) 75%); }
.rd-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.rd-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 30% 60%, transparent 40%, var(--rd-vignette)), linear-gradient(transparent calc(100% - 40px), #0d0a09); }
.rd-stage.shake { animation: rd-shake .28s; }
.rd-stage.shake-big { animation: rd-shake-big .36s; }
@keyframes rd-shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes rd-shake-big { 20% { transform: translate(-7px, 2px); } 40% { transform: translate(6px, -2px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(2px, 0); } }
.rd-stage-rope { position: absolute; left: 0; right: 0; top: 44%; height: 40px; opacity: .25; pointer-events: none; }
.rd-rope-svg { width: 100%; height: 100%; display: block; }
.rd-rope-svg path { fill: none; stroke: #8f8377; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rd-ground { position: absolute; left: 50%; bottom: 30px; width: 120px; height: 28px; transform: translateX(-50%); border-radius: 50%; pointer-events: none; }
.rd-ground.warm { background: radial-gradient(closest-side, var(--rd-warm-glow), transparent); }
.rd-ground.cold { background: radial-gradient(closest-side, var(--rd-cold-shadow), transparent); width: 96px; height: 18px; bottom: 44px; }
.rd-me { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 112px; flex: none; }
.rd-me .doll { width: 74px; filter: saturate(.85) brightness(.94); }
.road-root .actor.rd-actor { position: relative; left: auto; width: auto; transform: none; transition: none; display: block; }
.rd-me-bar, .rd-foe-bar { display: flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 800; }
.rd-me-bar .rd-bar { width: 70px; }
.rd-foes { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; flex: 1; min-width: 0; }
.rd-foe { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 100px; max-width: 150px; padding: 0 4px; border: 1.5px solid transparent; border-radius: var(--radius); background: none; color: var(--text); font: inherit; cursor: default; }
.rd-foe.targetable { cursor: pointer; }
.rd-foe.gone { opacity: 0; transition: opacity .3s; }
.rd-foe-art { width: 96px; height: 96px; object-fit: contain; display: block; }
.rd-foe.boss { max-width: 200px; }
.rd-foe.boss .rd-foe-art { width: 150px; height: 150px; }
.rd-foe.minion .rd-foe-art { width: 64px; height: 64px; }
.road-root .road-sil { filter: brightness(.9); opacity: .85; }
.rd-foe-name { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #000; }
/* names and HP numbers stand on any background, even 한낮뜰's bleached white field: a dark halo around the letters */
.rd-foe-name, .rd-me-bar, .rd-foe-bar, .rd-bossbar strong, .rd-bossbar small { color: #f1e6d2; text-shadow: 0 0 2px #000, 0 0 5px rgba(0, 0, 0, .95), 0 1px 0 #000; }
.rd-foe-name em { font-style: normal; padding: 0 5px; border: 1px solid var(--rd-brass); border-radius: var(--radius-sm); background: #1a1210; font-size: .64rem; }
.rd-foe-name em.good { border-color: var(--rd-good); color: var(--rd-good); }
.rd-foe-name em.bad { border-color: var(--rd-brass); color: #d9c08a; }
.rd-foe-bar .rd-bar { width: 72px; }
/* intent plate: icon and number; the border says attack (red), block (steel) or anything else (brass) */
.rd-intent { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 7px; border: var(--bw) solid var(--rd-brass); border-radius: var(--radius-sm); background: #16110e; font-size: .78rem; font-weight: 900; white-space: nowrap; box-shadow: var(--rd-plate); animation: rd-pulse 2.4s ease-in-out infinite; }
.rd-intent.atk { border-color: var(--rd-bad); color: #f0c7b4; }
.rd-intent.blk { border-color: var(--rd-block); color: var(--rd-block); }
.rd-intent.big { border-width: 2px; box-shadow: 0 0 10px rgba(201, 85, 61, .5); }
.rd-intent.firing { animation: rd-firing .4s ease-out; }
.rd-int-ico { width: 13px; height: 13px; }
@keyframes rd-pulse { 50% { transform: scale(1.06); opacity: .85; } }
@keyframes rd-firing { 40% { transform: scale(1.3); } }
.rd-sts { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 18px; }
.rd-st { display: inline-flex; align-items: center; gap: 2px; height: 17px; padding: 0 5px; border-radius: var(--radius-sm); background: #16110e; border: 1px solid var(--line); font-size: .64rem; font-weight: 800; white-space: nowrap; }
.rd-st-ico { width: 10px; height: 10px; }
.rd-st.st-block { color: var(--rd-block); border-color: var(--rd-block); }
.rd-st.st-burn { color: var(--rd-glow); border-color: var(--rd-ember); }
/* the boss bar: top centre, under the HUD, with a notch at 50% for the phase change */
.rd-bossbar { position: absolute; z-index: 3; left: 24%; width: 52%; top: 6px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: end; }
.rd-bossbar strong { font-family: var(--rd-serif); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-shadow: 0 1px 2px #000; }
.rd-bossbar .rd-bar { grid-column: 1 / -1; width: 100%; height: 8px; }
.rd-bossbar .rd-bar::after { content: ""; position: absolute; left: 50%; top: -3px; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg); background: #0d0a09; border: 1px solid var(--rd-brass); }
.rd-bossbar small { grid-row: 1; grid-column: 2; font-size: .7rem; font-weight: 800; color: var(--muted); }
.rd-phase { position: absolute; z-index: 6; left: 50%; top: 34%; transform: translateX(-50%); padding: 6px 18px; border: var(--bw) solid var(--rd-brass); border-radius: var(--radius-sm); background: #16110e; font-family: var(--rd-serif); font-weight: 700; font-size: 15px; box-shadow: var(--rd-plate); animation: rd-fadeio .9s ease both; }
@keyframes rd-fadeio { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } }
.rd-inspect { position: absolute; z-index: 5; left: 128px; top: 6px; display: flex; gap: 10px; align-items: flex-start; padding: 8px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: rgba(13, 10, 9, .94); box-shadow: var(--rd-plate); }
.rd-inspect-side { display: flex; flex-direction: column; gap: 8px; width: 140px; }
.rd-inspect p { margin: 0; }
.rd-kw { font-size: .78rem; color: var(--muted); font-weight: 700; }
.rd-how { font-weight: 800; color: var(--rd-glow); font-size: .86rem; }
.rd-drag-hint { font-size: .74rem; color: var(--muted); }
.rd-use, .rd-plate-btn { min-height: 44px; padding: 0 14px; border: var(--bw) solid var(--rd-brass); border-radius: var(--radius-sm); background: #1a1210; color: var(--text); font: inherit; font-weight: 800; cursor: pointer; box-shadow: var(--rd-plate); }
.rd-use, .rd-plate-btn.ember { background: var(--rd-ember); border-color: var(--rd-ember); color: #0d0a09; }
.rd-plate-btn.danger { border-color: var(--rd-bad); color: #f0c7b4; }
.rd-plate-btn:disabled { opacity: .45; cursor: not-allowed; }
.rd-float { position: absolute; z-index: 7; transform: translate(-50%, 0); font-weight: 900; font-size: 1.35rem; color: var(--rd-glow); -webkit-text-stroke: 1.5px #000; paint-order: stroke; pointer-events: none; animation: rd-float 1s ease-out forwards; }
.rd-float.crit { font-size: 1.8rem; color: #ffd27a; }
.rd-float.weak { color: #f6c96a; }
.rd-float.resist { color: #b6aca0; }
.rd-float.hurt { color: #e3876c; }
.rd-float.block, .rd-float.blocked { color: var(--rd-block); }
.rd-float.heal { color: var(--rd-good); }
.rd-float.dot { color: var(--rd-glow); font-size: 1.05rem; }
@keyframes rd-float { 0% { transform: translate(-50%, 6px) scale(.8); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -44px) scale(1); opacity: 0; } }
.rd-banner { position: absolute; z-index: 6; left: 50%; top: 40%; transform: translate(-50%, -50%); padding: 6px 20px; border: var(--bw) solid var(--rd-iron); border-radius: var(--radius-sm); background: rgba(13, 10, 9, .92); color: var(--text); font-family: var(--rd-serif); font-weight: 700; font-size: 16px; box-shadow: var(--rd-plate); }

/* the animation set: an action layer (.rd-body) holds an idle layer (.rd-idle) so breathing never fights a blow */
.rd-body, .rd-idle { display: block; position: relative; }
.rd-me .rd-idle { animation: rd-breathe 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.rd-foe .rd-idle { animation: rd-bob 2.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); transform-origin: 50% 100%; }
.rd-foe.boss .rd-idle { animation-duration: 4s; }
@keyframes rd-breathe { 50% { transform: scaleY(1.025) translateY(-1px); } }
@keyframes rd-bob { 50% { transform: translateY(-4px) scaleY(1.02); } }
/* the member: melee steps in toward the target, ranged draws back, cast lifts */
.rd-me .rd-body.atk-melee { animation: rd-me-melee .52s cubic-bezier(.3, .7, .3, 1); }
.rd-me .rd-body.atk-shoot { animation: rd-me-shoot .42s ease-out; }
.rd-me .rd-body.atk-cast { animation: rd-me-cast .52s ease-out; }
@keyframes rd-me-melee { 35% { transform: translateX(var(--reach, 60px)) rotate(4deg); } 55% { transform: translateX(calc(var(--reach, 60px) * 1.05)) rotate(-3deg); } 100% { transform: none; } }
@keyframes rd-me-shoot { 30% { transform: translateX(-8px); } 60% { transform: translateX(4px); } }
@keyframes rd-me-cast { 40% { transform: translateY(-8px) scale(1.04); } }
/* foes, by motion tag */
.rd-foe .rd-body.atk-lunge { animation: rd-f-lunge .52s cubic-bezier(.3, .7, .3, 1); }
.rd-foe .rd-body.atk-slam { animation: rd-f-slam .52s cubic-bezier(.3, .7, .3, 1); }
.rd-foe .rd-body.atk-bash { animation: rd-f-bash .52s ease-out; }
.rd-foe .rd-body.atk-rush { animation: rd-f-rush .62s ease-out; }
.rd-foe .rd-body.atk-hop { animation: rd-f-hop .52s ease-out; }
.rd-foe .rd-body.atk-heavy { animation: rd-f-heavy .76s cubic-bezier(.4, 0, .3, 1); }
.rd-foe .rd-body.atk-cast { animation: rd-f-cast .52s ease-out; }
.rd-foe .rd-body.atk-throw { animation: rd-f-throw .42s ease-out; }
.rd-foe .rd-body.atk-buff { animation: rd-f-buff .42s ease-out; }
@keyframes rd-f-lunge { 40% { transform: translateX(calc(var(--reach, 60px) * -1)); } }
@keyframes rd-f-slam { 30% { transform: translate(calc(var(--reach, 60px) * -.6), -18px) rotate(-6deg); } 50% { transform: translate(calc(var(--reach, 60px) * -1), 4px) scaleY(.9); } }
@keyframes rd-f-bash { 25% { transform: translateX(10px); } 50% { transform: translateX(calc(var(--reach, 60px) * -.8)) scaleX(1.08); } }
@keyframes rd-f-rush { 20% { transform: translateX(calc(var(--reach, 60px) * -.4)) translateY(-6px); } 40% { transform: translateX(calc(var(--reach, 60px) * -.8)); } 60% { transform: translateX(calc(var(--reach, 60px) * -1)) translateY(-6px); } }
@keyframes rd-f-hop { 40% { transform: translate(calc(var(--reach, 60px) * -.6), -22px); } 70% { transform: translate(calc(var(--reach, 60px) * -.8), 0); } }
@keyframes rd-f-heavy { 35% { transform: translateX(16px) scale(1.04); } 60% { transform: translateX(calc(var(--reach, 60px) * -1)) scale(1.08); } 75% { transform: translateX(calc(var(--reach, 60px) * -.9)); } }
@keyframes rd-f-cast { 40% { transform: translateY(-10px) scale(1.05); } }
@keyframes rd-f-throw { 30% { transform: translateX(10px) rotate(6deg); } 60% { transform: translateX(-10px) rotate(-6deg); } }
@keyframes rd-f-buff { 50% { transform: scale(1.08); } }
/* hit reactions: flinch and knockback away from the blow; a flash; heavier for big hits */
.rd-me .rd-body.hit { animation: rd-me-hit .42s ease-out; }
.rd-me .rd-body.hit-big { animation: rd-me-hit-big .5s ease-out; }
.rd-foe .rd-body.hit { animation: rd-f-hit .42s ease-out; }
.rd-foe .rd-body.hit-big { animation: rd-f-hit-big .5s ease-out; }
@keyframes rd-me-hit { 20% { transform: translateX(-10px) rotate(-4deg); } 60% { transform: translateX(-4px); } }
@keyframes rd-me-hit-big { 15% { transform: translateX(-22px) rotate(-8deg); } 40% { transform: translateX(-14px) rotate(-4deg); } }
@keyframes rd-f-hit { 20% { transform: translateX(10px) rotate(4deg); } 60% { transform: translateX(4px); } }
@keyframes rd-f-hit-big { 15% { transform: translateX(24px) rotate(8deg) scale(.96); } 40% { transform: translateX(14px) rotate(3deg); } }
.rd-me.flash .rd-idle, .rd-foe.flash .rd-idle { animation: rd-flash .26s ease-out; }
@keyframes rd-flash { 0% { filter: brightness(2.2) saturate(.3); } 100% { filter: none; } }
.rd-me::after, .rd-foe::after { content: ""; position: absolute; left: 50%; top: 40%; width: 92px; height: 92px; transform: translate(-50%, -50%) scale(.8); border-radius: 50%; border: 2px solid var(--rd-block);
  box-shadow: 0 0 14px rgba(159, 184, 200, .45), inset 0 0 12px rgba(159, 184, 200, .35); opacity: 0; pointer-events: none; }
.rd-me.shimmer::after, .rd-foe.shimmer::after, .rd-me.absorb::after, .rd-foe.absorb::after { animation: rd-shield .64s ease-out; }
@keyframes rd-shield { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }
/* deaths by material: the body sinks and fades; bits fly (ash and motes rise, shards and water fall) */
.rd-foe.dying .rd-idle { animation: none; }
.rd-foe.dying .rd-body { animation: rd-die .9s ease-in forwards; }
.rd-foe.dying .rd-foe-name, .rd-foe.dying .rd-foe-bar, .rd-foe.dying .rd-intent, .rd-foe.dying .rd-sts { transition: opacity .3s; opacity: 0; }
.rd-foe.die-shard .rd-body { animation-name: rd-die-shatter; }
.rd-foe.die-water .rd-body { animation-name: rd-die-melt; }
.rd-foe.die-tatter .rd-body { animation-name: rd-die-drift; }
.rd-foe.die-knot .rd-body { animation: rd-die-knot 1.4s ease-in forwards; }
@keyframes rd-die { 0% { filter: brightness(1.6); } 100% { transform: translateY(16px) scale(.9); opacity: 0; filter: brightness(.2) saturate(0); } }
@keyframes rd-die-shatter { 20% { transform: scale(1.06); } 100% { transform: scale(.7) rotate(-6deg); opacity: 0; } }
@keyframes rd-die-melt { 100% { transform: scaleY(.2) scaleX(1.3) translateY(60px); opacity: 0; } }
@keyframes rd-die-drift { 100% { transform: translate(30px, -30px) rotate(12deg); opacity: 0; } }
@keyframes rd-die-knot { 0% { filter: brightness(1.4); } 40% { transform: scale(1.03); } 100% { transform: translateY(20px) scale(.92); opacity: 0; filter: brightness(.3) saturate(0); } }
.rd-bit { position: absolute; z-index: 6; width: 6px; height: 6px; margin: -3px; pointer-events: none; opacity: 0; animation: rd-bit 1.1s ease-out forwards; animation-delay: var(--delay, 0ms); }
@keyframes rd-bit { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }
.rd-bit.m-ash { background: #8c8279; border-radius: 50%; box-shadow: 0 0 4px #e0702c; }
.rd-bit.m-mote { background: #b9ad94; border-radius: 50%; width: 4px; height: 4px; }
.rd-bit.m-shard { background: #cbbf9f; clip-path: polygon(0 0, 100% 30%, 40% 100%); width: 8px; height: 8px; }
.rd-bit.m-water { background: #8fa3a6; border-radius: 50% 50% 50% 0; }
.rd-bit.m-splinter { background: #6b5040; width: 3px; height: 10px; }
.rd-bit.m-tatter { background: #8a7f72; width: 9px; height: 5px; }
.rd-bit.m-rust { background: #7a3324; width: 5px; height: 5px; }
.rd-bit.m-glare { background: #fff7dc; border-radius: 50%; box-shadow: 0 0 6px #f6ecc9; }
.rd-bit.m-knot { background: #d9c08a; border-radius: 50%; width: 4px; height: 4px; box-shadow: 0 0 6px var(--rd-glow); }
.rd-untie { position: absolute; z-index: 5; left: 0; right: 0; top: 44%; height: 40px; pointer-events: none; }
.rd-untie .rd-rope-l { animation: rd-rope-off-l 1.4s ease-in forwards; }
.rd-untie .rd-rope-r { animation: rd-rope-off-r 1.4s ease-in forwards; }
.rd-untie .rd-rope-knot { animation: rd-fade-out .5s ease-out forwards; }
@keyframes rd-rope-off-l { to { transform: translateX(-60%); opacity: 0; } }
@keyframes rd-rope-off-r { to { transform: translateX(60%); opacity: 0; } }
@keyframes rd-fade-out { to { opacity: 0; } }
/* projectiles and glyphs */
.rd-proj { position: absolute; z-index: 6; width: 18px; height: 4px; margin: -2px -9px; border-radius: 2px; pointer-events: none; background: #d9c08a; transform: rotate(var(--ang)); animation: rd-proj var(--ms, 260ms) linear forwards; }
@keyframes rd-proj { from { transform: translate(0, 0) rotate(var(--ang)); } to { transform: translate(var(--dx), var(--dy)) rotate(var(--ang)); } }
.rd-proj.arrow { width: 26px; height: 3px; background: linear-gradient(90deg, #6b5d4c 70%, #e6dac4); }
.rd-proj.star { width: 12px; height: 12px; margin: -6px; background: #cbd3da; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.rd-proj.bolt { width: 22px; height: 6px; background: linear-gradient(90deg, transparent, var(--rd-glow)); box-shadow: 0 0 8px var(--rd-glow); }
.rd-proj.hex { width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: radial-gradient(#d9c08a, #5e4a22); box-shadow: 0 0 10px rgba(168, 131, 63, .8); }
.rd-proj[class*="shard-"] { width: 10px; height: 10px; margin: -5px; clip-path: polygon(0 0, 100% 40%, 30% 100%); background: #cbbf9f; }
.rd-glyph { position: absolute; z-index: 5; width: 70px; height: 70px; margin: -35px; border-radius: 50%; border: 2px solid var(--rd-brass); pointer-events: none; animation: rd-glyph .7s ease-out forwards; }
.rd-glyph::before { content: ""; position: absolute; inset: 12px; border: 1.5px solid var(--rd-brass); transform: rotate(45deg); }
.rd-glyph.mine { border-color: var(--rd-glow); }
.rd-glyph.debuff { border-color: #6a5f8a; width: 50px; height: 50px; margin: -25px; }
@keyframes rd-glyph { 0% { opacity: 0; transform: scale(.4) rotate(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2) rotate(90deg); } }
/* the member falls when the light goes out */
.rd-me.fallen .rd-idle { animation: none; }
.rd-me.fallen .rd-body { animation: rd-fall 1s ease-in forwards; transform-origin: 30% 100%; }
@keyframes rd-fall { 30% { transform: rotate(-8deg); } 100% { transform: rotate(-80deg) translateY(10px); opacity: .7; } }

/* the hand tray */
.rd-tray { flex: none; height: 110px; display: flex; align-items: center; gap: 8px; padding: 2px 8px; border-top: 1px solid var(--line); background: #0d0a09; }
.rd-piles { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; width: 52px; font-size: .7rem; font-weight: 800; color: var(--muted); }
.rd-energy { display: flex; align-items: baseline; justify-content: center; padding-top: 10px; width: 46px; height: 46px; border: 2px solid var(--rd-ember); border-radius: 50%; background: radial-gradient(circle at 50% 70%, #2a1810, #1a1210 70%); color: var(--rd-glow); box-shadow: 0 0 10px rgba(224, 112, 44, .35), var(--rd-plate); }
.rd-energy b { font-size: 1.2rem; line-height: 1; }
.rd-energy small { font-size: .7rem; color: var(--muted); }
.rd-energy.out { border-color: #5a524b; color: #8f8377; box-shadow: var(--rd-plate); }
.rd-hand-wrap { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; }
.rd-hand { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; height: 100%; align-items: flex-end; padding: 8px 2px 4px; }
.rd-hand::-webkit-scrollbar { display: none; }
.road-root.aiming .rd-hand { overflow: visible; }
.rd-more { position: absolute; right: 0; top: 2px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--rd-iron); color: var(--text); font-size: .7rem; font-weight: 900; }
.rd-end-turn { flex: none; width: 96px; min-height: 48px; padding: 0 8px; border: var(--bw) solid var(--rd-brass); border-radius: var(--radius-sm); background: #1a1210; color: var(--text); font: inherit; font-size: .86rem; font-weight: 900; line-height: 1.15; cursor: pointer; box-shadow: var(--rd-plate); }
.rd-end-turn.ready { background: var(--rd-ember); border-color: var(--rd-ember); color: #0d0a09; }

/* a card: a relic plaque, 72 x 100 in hand. Frame material and top shape by type, rivets by rarity */
.rd-card { --frame: #4a423c; --inner: #8a3a26; position: relative; flex: none; width: calc(72 * var(--k, 1px)); height: calc(100 * var(--k, 1px)); display: flex; flex-direction: column; align-items: stretch; padding: calc(2 * var(--k, 1px)); border: calc(2 * var(--k, 1px)) solid var(--frame); border-radius: calc(5 * var(--k, 1px)); background: #1c1512; color: var(--rd-ink); font: inherit; text-align: center; cursor: pointer;
  box-shadow: inset 0 0 0 1px #000, 0 calc(2 * var(--k, 1px)) 0 #000; touch-action: none; transition: transform .12s, opacity .2s; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--fr, 0deg)) scale(var(--s, 1)); }
.rd-card.t-attack { --frame: #4a423c; --inner: #8a3a26; clip-path: polygon(calc(8 * var(--k, 1px)) 0, calc(100% - calc(8 * var(--k, 1px))) 0, 100% calc(8 * var(--k, 1px)), 100% 100%, 0 100%, 0 calc(8 * var(--k, 1px))); }
.rd-card.t-skill { --frame: #56616a; --inner: #3d4a53; border-radius: calc(14 * var(--k, 1px)) calc(14 * var(--k, 1px)) calc(5 * var(--k, 1px)) calc(5 * var(--k, 1px)); }
.rd-card.t-power { --frame: #a8833f; --inner: #5e4a22; }
.rd-card.t-power::before { content: ""; position: absolute; z-index: 2; left: 50%; top: calc(-6 * var(--k, 1px)); width: calc(10 * var(--k, 1px)); height: calc(10 * var(--k, 1px)); transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e8c77a, #7a5d22); box-shadow: 0 1px 0 #000; }
.rd-card.t-status { --frame: #2a2420; border: 1.5px dashed #5a524b; background: repeating-linear-gradient(135deg, #2a2420 0 6px, #241e1a 6px 12px); }
.rd-card.r-uncommon .rd-cname { color: #d9c08a; }
.rd-card.r-uncommon::after { content: ""; position: absolute; inset: 1px; pointer-events: none; z-index: 3;
  background: radial-gradient(circle at 4px 4px, #c9a45a 1.5px, transparent 2px), radial-gradient(circle at calc(100% - 4px) 4px, #c9a45a 1.5px, transparent 2px),
    radial-gradient(circle at 4px calc(100% - 4px), #c9a45a 1.5px, transparent 2px), radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #c9a45a 1.5px, transparent 2px); }
.rd-card.r-rare .rd-cname { box-shadow: inset 0 -1px 0 var(--rd-gold); }
.rd-card.r-rare { box-shadow: inset 0 0 8px rgba(209, 168, 79, .35), 0 2px 0 #000; }
.rd-card.up { border-bottom-color: #e0702c; border-bottom-width: 2px; }
.rd-cart { position: relative; flex: none; height: calc(46 * var(--k, 1px)); overflow: hidden; border-radius: calc(3 * var(--k, 1px)) calc(3 * var(--k, 1px)) 0 0; background: #221915; box-shadow: inset 0 0 0 1px var(--inner); display: grid; place-items: center; }
.rd-cart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-cart::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(12 * var(--k, 1px)); background: linear-gradient(transparent, #1c1512); }
.rd-cart.none { color: var(--rd-ash); }
.rd-cart-ico { width: calc(24 * var(--k, 1px)); height: calc(24 * var(--k, 1px)); opacity: .7; }
.rd-card.t-attack .rd-cart.none { color: #a0533a; }
.rd-card.t-skill .rd-cart.none { color: #7d8b95; }
.rd-card.t-power .rd-cart.none { color: #b8954d; }
.rd-gem { position: absolute; z-index: 4; left: calc(-2 * var(--k, 1px)); top: calc(-2 * var(--k, 1px)); width: calc(20 * var(--k, 1px)); height: calc(20 * var(--k, 1px)); display: grid; place-items: center; transform: rotate(45deg); background: #1a1210; border: calc(1.5 * var(--k, 1px)) solid #e0702c; box-shadow: 0 calc(1 * var(--k, 1px)) 0 #000; }
.rd-gem b { transform: rotate(-45deg); font-weight: 900; font-size: calc(13 * var(--k, 1px)); color: #f3b25a; line-height: 1; }
.rd-card.t-attack .rd-gem { left: calc(1 * var(--k, 1px)); top: calc(1 * var(--k, 1px)); }
.rd-card.poor .rd-gem { border-color: #5a524b; }
.rd-card.poor .rd-gem b { color: #8f8377; }
.rd-card.poor .rd-cart img { filter: brightness(.6); }
.rd-cplate { flex: none; height: calc(16 * var(--k, 1px)); display: flex; align-items: center; gap: calc(2 * var(--k, 1px)); padding: 0 calc(3 * var(--k, 1px)); background: rgba(13, 10, 9, .92); }
.rd-cico { flex: none; width: calc(9 * var(--k, 1px)); height: calc(9 * var(--k, 1px)); color: var(--rd-ash); }
.rd-card.t-attack .rd-cico { color: var(--rd-ember); }
.rd-cname { flex: 1; min-width: 0; font-weight: 800; font-size: calc(10.5 * var(--k, 1px)); line-height: 1; color: #e6dac4; white-space: nowrap; letter-spacing: -.02em; }
.rd-cname.long { font-size: calc(9.5 * var(--k, 1px)); letter-spacing: -.04em; }
.rd-ctext { flex: 1; min-height: 0; padding: calc(2 * var(--k, 1px)) calc(2 * var(--k, 1px)) 0; font-size: calc(9.5 * var(--k, 1px)); line-height: 1.25; font-weight: 600; color: #cfc3ad; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; background: #1c1512; }
.rd-ctext .n-dmg { color: #f3b25a; }
.rd-ctext .n-blk { color: #9fb8c8; }
.rd-card.on { transform: translateY(-10px); box-shadow: 0 0 0 2px var(--rd-ember), 0 0 10px rgba(224, 112, 44, .5); }
.rd-card.dim { opacity: .55; }
.rd-card.spent { opacity: 0; }
/* dragging a card (road.js dragable): it follows the pointer on a lerp and tilts with its speed; up in the stage it
   shrinks so the foes stay visible. Over a foe it locks (ember ring); released, a ghost is thrown (road.js cardFly) */
.rd-card.dragging, .rd-card.back { transform-origin: 50% 50%; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--fr, 0deg)) scale(var(--s, 1)); }
/* the scale (1.06, aloft .72 / phone .9) is eased by road.js, so the translate is never scaled */
.rd-card.dragging { z-index: 20; --s: 1.06; transition: none; box-shadow: 0 calc(1.6 * var(--u, 8px)) calc(3 * var(--u, 8px)) rgba(0, 0, 0, .7), 0 0 0 2px var(--rd-ember); }
.rd-card.dragging.locked { box-shadow: 0 0 0 2px var(--rd-glow), 0 0 calc(2.4 * var(--u, 8px)) rgba(243, 178, 90, .7); }
.rd-card.dragging.ready.t-skill { box-shadow: 0 0 0 2px #9fb8c8, 0 0 calc(2.4 * var(--u, 8px)) rgba(159, 184, 200, .6); }
.rd-card.dragging.ready.t-power { box-shadow: 0 0 0 2px var(--rd-gold), 0 0 calc(2.4 * var(--u, 8px)) rgba(209, 168, 79, .6); }
.rd-card.dragging.ready:not(.t-skill):not(.t-power) { box-shadow: 0 0 0 2px var(--rd-glow), 0 0 calc(2.4 * var(--u, 8px)) rgba(243, 178, 90, .7); }
.rd-card.back { z-index: 20; transition: transform .28s cubic-bezier(.3, 1.5, .5, 1), transform-origin .28s ease-out; }
.road-root.aiming.aim-line .rd-stage::before { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 1px; z-index: 4; background: repeating-linear-gradient(90deg, rgba(224, 112, 44, .5) 0 8px, transparent 8px 14px); }
/* the target: a brand ring seeks on the art, the ground under it warms; the other foes dim */
.rd-foe:is(.aim, .targetable:hover, .targetable:focus-visible) .rd-ground, .rd-me.aim .rd-ground { background: radial-gradient(closest-side, rgba(224, 112, 44, .7), transparent); transform: translateX(-50%) scale(1.25); }
.rd-foe:is(.aim, .targetable:hover, .targetable:focus-visible) .rd-body::before, .rd-foe:is(.aim, .targetable:hover, .targetable:focus-visible) .rd-body::after { content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; width: 60%; aspect-ratio: 1; pointer-events: none; animation: rd-brand-seek .9s linear infinite; }
.rd-foe:is(.aim, .targetable:hover, .targetable:focus-visible) .rd-body::before { border: 2px solid var(--rd-glow); border-radius: 50%; box-shadow: 0 0 10px rgba(224, 112, 44, .55), inset 0 0 10px rgba(224, 112, 44, .35); }
.rd-foe:is(.aim, .targetable:hover, .targetable:focus-visible) .rd-body::after { width: 30%; border: 1.5px solid var(--rd-glow); animation-name: rd-brand-seek-sq; }
@keyframes rd-brand-seek { from { transform: translate(-50%, -50%) rotate(0) scale(1.08); } to { transform: translate(-50%, -50%) rotate(90deg) scale(1); } }
@keyframes rd-brand-seek-sq { from { transform: translate(-50%, -50%) rotate(45deg) scale(1.08); } to { transform: translate(-50%, -50%) rotate(135deg) scale(1); } }
.road-root.aiming .rd-foe.targetable:not(.aim) .rd-idle { filter: brightness(.7); }
.rd-foe:focus-visible { outline: 1px dashed var(--rd-brass); outline-offset: 2px; }
.rd-foe:focus:not(:focus-visible) { outline: none; }
/* the throw: the ghost plaque (WAAPI), its streak, the brand it burns in, ash */
.rd-ghost { position: absolute; z-index: 25; margin: 0; pointer-events: none; transform-origin: 50% 50%; transition: none; }
.rd-streak { position: absolute; z-index: 24; height: calc(.5 * var(--u, 6px)); margin-top: calc(-.25 * var(--u, 6px)); transform-origin: 0 50%; pointer-events: none; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--rd-glow)); box-shadow: 0 0 8px rgba(224, 112, 44, .6); }
.rd-brand { position: absolute; z-index: 5; border: 2px solid var(--rd-ember); border-radius: 50%; pointer-events: none; box-shadow: 0 0 calc(1.6 * var(--u, 8px)) rgba(224, 112, 44, .6), inset 0 0 calc(1.2 * var(--u, 8px)) rgba(224, 112, 44, .45); }
.rd-brand::before { content: ""; position: absolute; inset: 26%; border: 1.5px solid var(--rd-glow); transform: rotate(45deg); box-shadow: 0 0 6px rgba(243, 178, 90, .6); }
.rd-brand.steel { border-color: var(--rd-block); box-shadow: 0 0 calc(1.6 * var(--u, 8px)) rgba(159, 184, 200, .55); }
.rd-brand.steel::before, .rd-brand.brass::before { border-color: currentColor; }
.rd-brand.steel { color: var(--rd-block); }
.rd-brand.brass { border-color: var(--rd-gold); color: var(--rd-gold); box-shadow: 0 0 calc(1.6 * var(--u, 8px)) rgba(209, 168, 79, .55); }
.rd-bit.m-flake { background: #3a332e; width: 5px; height: 3px; }
.rd-stage.thud { animation: rd-thud .14s ease-out; }
@keyframes rd-thud { 40% { transform: translateY(3px); } }
.rd-hand.dealt .rd-card { animation: rd-deal .34s ease-out both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rd-deal { from { transform: translate(-160px, 30px) rotate(-12deg) scale(.6); opacity: 0; } }
/* large cards (inspect, reward, shop): 150 x 210 */
.rd-card.big { width: 150px; height: 210px; padding: 2px; }
.rd-card.big .rd-cart { height: 110px; }
.rd-card.big .rd-cplate { height: 26px; padding: 0 6px; gap: 5px; }
.rd-card.big .rd-cico { width: 12px; height: 12px; }
.rd-card.big .rd-cname { font-family: var(--rd-serif); font-weight: 700; font-size: 16px; letter-spacing: 0; }
.rd-card.big .rd-ctext { font-size: 13px; line-height: 1.45; -webkit-line-clamp: 4; padding: 4px 6px 0; }
.rd-card.big .rd-gem { width: 26px; height: 26px; }
.rd-card.big .rd-gem b { font-size: 15px; }
.rd-price { position: absolute; z-index: 5; bottom: -10px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border: 1px solid var(--rd-gold); border-radius: var(--radius-sm); background: #1a1210; color: var(--rd-glint); font-size: .74rem; font-weight: 900; white-space: nowrap; }
.rd-price.short { color: #8f8377; border-color: #5a524b; }
.rd-price-ico { width: 10px; height: 10px; }

/* the boss intro: "매듭이 묶여요" */
.rd-intro { position: absolute; inset: 0; z-index: 28; background: rgba(13, 10, 9, .9); overflow: hidden; cursor: pointer; animation: rd-intro-in .3s ease-out both, rd-intro-out .4s ease-in 2s forwards; }
.rd-intro-rope { position: absolute; left: 0; right: 0; top: 46%; height: 40px; }
.rd-intro-rope .rd-rope-l, .rd-intro-rope .rd-rope-r { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: rd-draw .6s ease-out .3s forwards; }
.rd-intro-rope .rd-rope-knot { opacity: 0; animation: rd-in .2s ease-out .85s forwards; }
.rd-intro-boss { position: absolute; right: 6%; bottom: 6%; height: 86%; width: auto; max-width: 46%; object-fit: contain; filter: brightness(0); opacity: 0; transform: scale(1.2); transform-origin: 70% 100%;
  animation: rd-in .5s ease-out .9s forwards, rd-reveal .8s ease-in-out 1.6s forwards; }
.rd-intro-text { position: absolute; left: 8%; top: 22%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; opacity: 0; animation: rd-in .4s ease-out 1s forwards, rd-fade-out .4s ease-in 1.8s forwards; }
.rd-intro-text small { font-weight: 800; font-size: 11px; letter-spacing: .3em; color: var(--muted); }
.rd-intro-text strong { font-family: var(--rd-serif); font-weight: 900; font-size: 30px; letter-spacing: .08em; color: var(--text); }
.rd-intro-rule { display: block; width: 64px; height: 1px; background: var(--rd-ember); }
.rd-intro-text em { font-style: normal; font-family: var(--rd-serif); font-weight: 700; font-size: 14px; color: var(--rd-ash); }
.rd-intro.still, .rd-intro.still * { animation: none !important; }
.rd-intro.still .rd-intro-boss, .rd-intro.still .rd-intro-text, .rd-intro.still .rd-rope-knot { opacity: 1; filter: none; transform: none; }
.rd-intro.still .rd-rope-l, .rd-intro.still .rd-rope-r { stroke-dashoffset: 0; }
@keyframes rd-intro-in { from { opacity: 0; } }
@keyframes rd-intro-out { to { opacity: 0; } }
@keyframes rd-draw { to { stroke-dashoffset: 0; } }
@keyframes rd-in { to { opacity: 1; } }
@keyframes rd-reveal { from { filter: brightness(0); transform: scale(1.2); } to { filter: brightness(1); transform: scale(1.2); } }

/* the map: a painted board 3600 x 780 in three tiles; trails, fog, the boss and the tokens on top, placed in % */
.rd-map { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: #0d0a09; }
.rd-map-title { position: absolute; z-index: 6; left: 12px; top: 4px; margin: 0; padding: 2px 10px; border-radius: var(--radius-sm); background: rgba(13, 10, 9, .72); }
.rd-map-scroll { flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; background: #0d0a09; scrollbar-width: none; display: flex; }
.rd-map-scroll::-webkit-scrollbar { display: none; }
.rd-map-board { position: relative; height: min(100%, 420px); aspect-ratio: 3600 / 780; flex: none; margin: auto 0; overflow: hidden; background: linear-gradient(180deg, #120e0c 0 18%, #1b1512 18% 93%, #0f0b09 93%); }
.rd-map-board.bare::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 3% 70%, rgba(224, 112, 44, .14), transparent 70%), radial-gradient(40% 70% at 93% 60%, var(--rd-backlight), transparent 70%); }
.rd-map-tile { position: absolute; top: 0; height: 100%; width: 33.334%; object-fit: cover; }
.rd-map-tile.t1 { left: 0; } .rd-map-tile.t2 { left: 33.333%; } .rd-map-tile.t3 { left: 66.666%; }
.rd-map-seam { position: absolute; top: 0; bottom: 0; width: 8.3%; transform: translateX(-50%); background-position: 50% 100%; background-size: auto 100%; opacity: .5; pointer-events: none; }
.rd-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rd-trails { width: 100%; height: 100%; display: block; }
.rd-trails path { fill: none; stroke-linecap: round; }
.rd-trails .ruts path { stroke: rgba(0, 0, 0, .45); stroke-width: 12; }
.rd-trails .future path { stroke: #5a4e42; stroke-width: 6; stroke-dasharray: 26 10 14 8; opacity: .55; }
.rd-trails .open path { stroke: #8f8377; stroke-width: 6; opacity: .9; }
.rd-trails .walked { filter: drop-shadow(0 0 3px rgba(224, 112, 44, .6)); }
.rd-trails .walked path { stroke: var(--rd-glow); stroke-width: 5; opacity: .8; }
.rd-trails .rope path { stroke: #6b5d4c; stroke-width: 8; }
.rd-trails .rope-twist path { stroke: #3a332e; stroke-width: 2; stroke-dasharray: 3 9; }
.rd-trails .knots circle { fill: #3a332e; }
.rd-trails .debug line, .rd-trails .debug circle { stroke: #5fb0a0; stroke-width: 2; fill: none; }
.rd-map.pale .rd-trails .ruts path { stroke: rgba(43, 33, 22, .3); }
.rd-map.pale .rd-trails .future path { stroke: #8a7650; opacity: .6; }
.rd-map.pale .rd-trails .open path { stroke: #4a3b22; }
.rd-map.pale .rd-trails .walked path { stroke: #2b2116; }
.rd-map.pale .rd-trails .rope path { stroke: #5a4a30; }
.rd-map.pale .rd-trails .rope-twist path { stroke: #2b2116; }
.rd-map.pale .rd-node.reach { box-shadow: 0 0 0 2px #2b2116, 0 0 10px rgba(43, 33, 22, .5); }
.rd-map-fog { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; transform: translateX(var(--fx, 100%)); transition: transform .9s ease-out; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8.3%); mask-image: linear-gradient(90deg, transparent, #000 8.3%); }
.rd-map-fog-in { position: absolute; top: 0; bottom: 0; left: 0; width: 200%; background: linear-gradient(0deg, var(--rd-fog) 0%, rgba(36, 29, 25, .65) 45%, rgba(36, 29, 25, .35) 100%); opacity: .82; animation: rd-drift 60s linear infinite; }
.rd-map-fog.art .rd-map-fog-in { background-color: var(--rd-fog); background-position: 0 100%; background-size: auto 100%; background-repeat: repeat-x; } /* the picture: road.js (only when it exists) */
@keyframes rd-drift { to { transform: translateX(-50%); } }
.rd-map-backlight { position: absolute; left: 92.8%; bottom: 8%; width: 18%; height: 80%; transform: translateX(-50%); background: radial-gradient(closest-side, var(--rd-backlight), transparent); pointer-events: none; }
.rd-map-backlight.near { background: radial-gradient(closest-side, var(--rd-backlight-near), transparent); }
.rd-map-boss { position: absolute; left: 92.8%; bottom: 4.5%; height: 84.6%; width: auto; max-width: 14%; object-fit: contain; transform: translateX(-50%); filter: brightness(0); opacity: .85; pointer-events: none; }
.rd-map-boss.known { filter: brightness(.35) saturate(.6); opacity: 1; }
.rd-map-boss.road-sil { filter: brightness(.5); }
.rd-node { position: absolute; z-index: 3; width: 60px; height: 60px; padding: 4px; border: 0; background: none; border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; color: var(--text); }
.rd-node.n-boss { width: 68px; height: 68px; }
.rd-node-img { width: 52px; height: 52px; object-fit: contain; display: block; margin: auto; }
.rd-node-disc { display: grid; place-items: center; width: 48px; height: 48px; margin: auto; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2e231d, #1a1210 70%); border: var(--bw) solid var(--rd-iron); box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255, 255, 255, .06); }
.rd-node.n-boss .rd-node-disc { width: 58px; height: 58px; border-radius: 12px; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.rd-node.n-elite .rd-node-disc { border-color: var(--rd-bad); }
.rd-node.n-elite .rd-node-disc::after { content: ""; position: absolute; top: 0; left: 50%; width: 10px; height: 12px; transform: translateX(-50%); background: #8f2f24; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); }
.rd-node-ico { width: 24px; height: 24px; }
.rd-node.locked { filter: brightness(.6) saturate(.5); cursor: default; }
.rd-node.reach .rd-node-img, .rd-node.reach .rd-node-disc { border-radius: 50%; box-shadow: 0 0 0 2px var(--rd-ember), 0 0 12px rgba(224, 112, 44, .45); }
.rd-node.reach.n-elite .rd-node-disc { box-shadow: 0 0 0 2px var(--rd-bad), 0 0 12px rgba(201, 85, 61, .45); }
.rd-node.done { filter: brightness(.5) saturate(.2); }
.rd-node.fogged { filter: brightness(.5) saturate(0); opacity: .7; z-index: 4; }
.rd-node-untied { position: absolute; inset: 4px; width: 52px; height: 52px; }
.rd-node.chosen { z-index: 5; }
.rd-map-board.choosing .rd-node.reach:not(.chosen) { opacity: .5; }
.rd-node.flash .rd-node-img, .rd-node.flash .rd-node-disc { box-shadow: 0 0 0 3px var(--rd-glow), 0 0 18px rgba(243, 178, 90, .8); }
.rd-node-plate { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(13, 10, 9, .92); font-size: .72rem; font-weight: 800; white-space: nowrap; pointer-events: none; }
.rd-map-boss-name { position: absolute; z-index: 3; top: 64%; transform: translateX(-50%); font-family: var(--rd-serif); font-weight: 700; font-size: 13px; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.rd-map-camp { position: absolute; z-index: 3; transform: translateX(-30%); font-size: .7rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.rd-marker { position: absolute; z-index: 5; width: 0; height: 0; pointer-events: none; }
.rd-marker .rd-ground { left: -8px; bottom: -14px; width: 70px; height: 18px; }
.rd-marker-doll { position: absolute; left: -38px; bottom: 8px; width: 34px; filter: saturate(.85) brightness(.94); }
.rd-marker-doll .doll { width: 34px; }
.rd-marker-doll .actor { width: 34px; }
.rd-marker-lantern { position: absolute; left: -10px; bottom: 16px; width: 20px; height: 20px; filter: drop-shadow(0 0 6px rgba(243, 178, 90, .8)); }
.rd-travel-wrap { z-index: 6; }
.rd-travel { width: 100%; height: 100%; }
.rd-travel-path { fill: none; stroke: var(--rd-glow); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(224, 112, 44, .8)); }
.rd-spark { fill: #fff3d6; filter: drop-shadow(0 0 6px #f3b25a); }
.rd-travel .rd-spark:not([cx]) { display: none; }
.rd-edge { position: absolute; z-index: 5; top: 0; bottom: 0; width: 24px; pointer-events: none; }
.rd-edge.l { left: 0; background: linear-gradient(90deg, #0d0a09, transparent); }
.rd-edge.r { right: 0; background: linear-gradient(-90deg, #0d0a09, transparent); }

/* vow, reward, event, shop, rest: the same plates and tokens */
.rd-vows, .rd-rest, .rd-shop { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rd-vow-row, .rd-rest-row { flex: 1; display: flex; gap: 12px; align-items: stretch; padding: 8px 12px 12px; }
.rd-vow, .rd-big, .rd-leafcard, .rd-choice { border: var(--bw) solid var(--rd-iron); border-radius: var(--radius-sm); background: #16110e; color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--rd-plate); }
.rd-vow { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.rd-vow strong { font-family: var(--rd-serif); font-weight: 700; font-size: 16px; }
.rd-vow span { color: #cfc3ad; line-height: 1.45; }
.rd-vow:active, .rd-big:active, .rd-leafcard:active, .rd-choice:active { transform: translateY(1px); }
.rd-vow:hover, .rd-big:hover, .rd-choice:hover:not(:disabled), .rd-leafcard:hover { border-color: var(--rd-brass); }
.rd-panel { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(180px, 30%) 1fr; gap: 12px; padding: 0 12px 10px; }
.rd-panel-l, .rd-panel-r { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.rd-panel-r { padding-top: 30px; }
.rd-panel-l .rd-title { margin: 6px 0 2px; font-size: 18px; }
.rd-reward { background: rgba(13, 10, 9, .88); }
.rd-reward.enter .rd-card { animation: rd-deal .34s ease-out both; animation-delay: calc(var(--i, 0) * 70ms); }
.rd-gain { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin: 0; padding: 4px 10px; border: 1px solid var(--rd-gold); border-radius: var(--radius-sm); background: #1a1210; color: var(--rd-glint); font-weight: 900; }
.rd-mats { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0; }
.rd-mats small { flex-basis: 100%; color: var(--muted); font-weight: 800; }
.rd-mat { padding: 2px 8px; border-radius: var(--radius-sm); background: #221915; font-weight: 800; font-size: .8rem; }
.rd-mat img { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin-right: 2px; }
.rd-continue { margin-top: auto; }
.rd-sub { margin: 0; font-weight: 800; font-size: .86rem; color: var(--muted); }
.rd-offer-row { display: flex; gap: 16px; flex-wrap: wrap; padding: 6px 2px 4px; }
.rd-offer-row.picked .rd-card:not(.chosen) { opacity: .4; }
.rd-offer-row .rd-card.chosen { transform: translateY(-10px); box-shadow: 0 0 0 2px var(--rd-ember), 0 0 10px rgba(224, 112, 44, .5); }
.rd-shop-row .rd-card, .rd-grid .rd-card { width: 96px; height: 134px; }
.rd-shop-row .rd-card.big { width: 150px; height: 210px; }
.rd-grid .rd-cart { height: 58px; }
.rd-link { align-self: flex-start; min-height: 36px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rd-leafcard { display: flex; flex-direction: column; gap: 4px; width: 150px; min-height: 96px; padding: 10px; position: relative; border-color: var(--rd-brass); }
.rd-leafcard strong { font-family: var(--rd-serif); font-weight: 700; font-size: 15px; color: #d9c08a; }
.rd-leafcard span { font-size: .8rem; line-height: 1.35; color: #cfc3ad; }
.rd-leafcard.dim { opacity: .45; }
.rd-event-art { width: 88px; height: 88px; padding: 18px; border: var(--bw) solid var(--rd-iron); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2e231d, #1a1210 70%); color: var(--rd-glow); }
.rd-event-text { margin: 0; line-height: 1.55; color: #cfc3ad; }
.rd-choice { width: 100%; min-height: 48px; padding: 10px 14px; font-weight: 700; }
.rd-choice:disabled { opacity: .45; cursor: not-allowed; }
.rd-shop-body { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 0 12px 10px; }
.rd-shop-scroll { flex: 1; min-width: 0; overflow-x: auto; display: flex; align-items: center; }
.rd-shop-row { display: flex; gap: 12px; padding: 8px 4px 16px; align-items: center; }
.rd-shop-side { flex: none; width: 180px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.rd-shop-side .rd-line { margin: 0; }
.rd-big { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 120px; padding: 14px; font-weight: 900; font-size: 1.05rem; text-align: center; }
.rd-big-ico { width: 40px; height: 40px; color: var(--rd-glow); }

/* overlays */
.rd-over, .rd-pop, .rd-rotate { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 12px; background: rgba(0, 0, 0, .6); }
.rd-over-card { width: min(720px, 100%); max-height: 100%; display: flex; flex-direction: column; border: var(--bw) solid var(--line); border-radius: var(--radius); background: #16110e; box-shadow: var(--rd-plate); overflow: hidden; }
.rd-over-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--line); }
.rd-over-head strong { font-family: var(--rd-serif); font-weight: 700; font-size: 16px; }
.rd-x { width: 44px; height: 44px; border: 0; background: none; color: var(--text); font-size: 1.6rem; cursor: pointer; }
.rd-over-foot { display: flex; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--line); }
.rd-over-card > p { margin: 14px; }
.rd-grid { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px; overflow-y: auto; }
.rd-pick { display: flex; flex-direction: column; gap: 4px; width: 96px; }
.rd-up { font-size: .7rem; line-height: 1.25; color: var(--rd-glow); font-weight: 800; }
.rd-menu { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.rd-pop-card, .rd-rotate-card { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 20px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: #16110e; box-shadow: var(--rd-plate); text-align: center; }
.rd-pop { background: radial-gradient(120% 100% at 20% 100%, rgba(224, 112, 44, .14), #0d0a09 65%); }
.rd-pop-title { margin: 0; font-family: var(--rd-serif); font-weight: 900; font-size: 22px; letter-spacing: .04em; }
.rd-pop-body, .rd-pop-price, .rd-pop-lead { margin: 0; }
.rd-pop-lead { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.rd-pop-price { font-weight: 800; color: var(--muted); font-size: .9rem; }
.rd-pop-err { margin: 0; color: var(--rd-bad); font-weight: 800; }
.rd-pop-actions { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.rd-rotate-ill { width: 96px; height: 96px; }
.rd-rotate-phone { transform-origin: 60px 50px; animation: rd-turn 2.4s ease-in-out infinite; }
@keyframes rd-turn { 0%, 30% { transform: rotate(0); } 55%, 85% { transform: rotate(90deg); } 100% { transform: rotate(0); } }
.rd-rotate { z-index: 30; background: rgba(0, 0, 0, .55); align-items: start; }
.rd-rotate-text { margin: 0; font-weight: 900; }
.rd-toast { position: absolute; z-index: 40; left: 50%; bottom: 120px; transform: translate(-50%, 20px); padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(13, 10, 9, .95); color: var(--text); font-weight: 800; font-size: .86rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 90%; }
.rd-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* the end of a run: the light goes out, or the knot comes undone. No band, no capitals */
.rd-end { position: absolute; inset: 0; z-index: 26; pointer-events: none; }
.rd-end-text { position: absolute; left: 0; right: 0; top: 42%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; opacity: 0; animation: rd-in .6s ease-out .5s forwards; }
.rd-end-text strong { font-family: var(--rd-serif); font-weight: 900; font-size: 26px; letter-spacing: .06em; color: var(--text); text-shadow: 0 2px 8px #000; }
.rd-end-text small { font-size: 13px; color: var(--muted); }
.rd-end.dead { background: radial-gradient(circle at var(--mx, 15%) var(--my, 60%), transparent 0, transparent 90px, rgba(0, 0, 0, .96) 91px); animation: rd-lantern-out 1.6s ease-in forwards; }
@keyframes rd-lantern-out { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 1; background: radial-gradient(circle at var(--mx, 15%) var(--my, 60%), rgba(0, 0, 0, .9) 0, #000 40px); } }
.rd-stage.dimming { animation: rd-desat .6s ease-out forwards; }
@keyframes rd-desat { to { filter: saturate(.2) brightness(.7); } }
.rd-smoke { position: absolute; left: var(--mx, 15%); top: calc(var(--my, 60%) - 120px); width: 20px; height: 120px; margin-left: -10px; opacity: 0; animation: rd-smoke 2s ease-out .6s forwards; }
@keyframes rd-smoke { 0% { opacity: 0; transform: translateY(20px); } 40% { opacity: .8; } 100% { opacity: 0; transform: translateY(-20px); } }
.rd-end.won { background: rgba(13, 10, 9, .55); animation: rd-intro-in .4s ease-out both; }
.rd-end-rope { position: absolute; left: 0; right: 0; top: 44%; height: 40px; }
.rd-end-rope .rd-rope-l { animation: rd-rope-off-l 1.4s ease-in .3s forwards; }
.rd-end-rope .rd-rope-r { animation: rd-rope-off-r 1.4s ease-in .3s forwards; }
.rd-end-rope .rd-rope-knot { animation: rd-fade-out .4s ease-out .2s forwards; }
.rd-end-boss { position: absolute; right: 6%; bottom: 8%; height: 70%; width: auto; max-width: 40%; object-fit: contain; opacity: .6; }
.rd-end-glow { position: absolute; left: var(--bx, 80%); top: var(--by, 60%); width: 220px; height: 220px; margin: -110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 212, 138, .55), transparent); animation: rd-rise 2s ease-out forwards; }
@keyframes rd-rise { from { opacity: 0; transform: translateY(20px) scale(.6); } 50% { opacity: 1; } to { opacity: .7; transform: translateY(-60px) scale(1.1); } }
.rd-end.won .rd-end-text strong { color: var(--rd-glint); }
.road-noscript { padding: 20px; }

/* short screens (320-350 px tall) */
@media (max-height: 350px) {
  .rd-hud { height: 32px; }
  .rd-tray { height: 106px; }
  .rd-foe-art { width: 72px; height: 72px; }
  .rd-foe.boss .rd-foe-art { width: 120px; height: 120px; }
  .rd-me .doll { width: 60px; }
}
/* DESK: a desktop window (Fable, 2026-11-13). The run page is a centred frame of fixed composition, letterboxed in
   near-black beyond 1.6 to 2.0; everything in combat is sized in --u, 1% of the frame height, so 1280 x 720,
   1920 x 1080 and 2560 x 1440 are the same picture at three sizes. Phones (above) are untouched. */
@media (min-width: 1000px) and (min-height: 560px) and (orientation: landscape) {
  .road-root { --u: min(1vh, calc(100vw / 160)); --fx: 1.7; background: #050403; align-items: center; justify-content: center; }
  .road-app { flex: none; width: min(100vw, calc(200 * var(--u))); height: calc(100 * var(--u)); background: var(--bg); box-shadow: 0 0 0 1px #1a1512; }
  .rd-proj, .rd-glyph, .rd-bit { scale: var(--fx); }
  /* HUD */
  .rd-hud { height: calc(5.2 * var(--u)); font-size: calc(2 * var(--u)); gap: calc(2 * var(--u)); padding: 0 calc(2 * var(--u)); }
  .rd-hud-ico { width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); }
  .rd-hp .rd-bar { width: calc(22 * var(--u)); height: calc(1.2 * var(--u)); }
  .rd-hud-btn { height: calc(3.8 * var(--u)); min-width: calc(5 * var(--u)); padding: 0 var(--u); }
  .rd-leaf { height: calc(3.4 * var(--u)); font-size: calc(1.6 * var(--u)); }
  /* stage: the foot line sits 8.5u up, in the painted ground band */
  .in-combat .rd-stage { display: block; padding: 0; }
  .in-combat .rd-bg { object-position: 50% 100%; }
  .in-combat .rd-vignette { background: radial-gradient(ellipse at 30% 60%, transparent 40%, var(--rd-vignette)), linear-gradient(transparent calc(100% - 6 * var(--u)), #0d0a09); }
  .in-combat .rd-me { position: absolute; left: calc(24% - 14 * var(--u)); width: calc(28 * var(--u)); bottom: calc(.5 * var(--u)); gap: calc(.4 * var(--u)); }
  .in-combat .rd-me .doll { width: calc(17 * var(--u)); }
  .in-combat .rd-me-bar { margin-top: calc(3 * var(--u)); }
  .in-combat .rd-foes { position: absolute; left: 46%; right: 4%; bottom: calc(.5 * var(--u)); justify-content: center; gap: calc(3 * var(--u)); }
  .in-combat .rd-foe { min-width: 0; max-width: none; padding: 0 calc(.5 * var(--u)); gap: calc(.4 * var(--u)); border: 0; }
  .in-combat .rd-foe-art { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
  .in-combat .rd-foes.n3 { gap: calc(2 * var(--u)); }
  .in-combat .rd-foes.n3 .rd-foe-art { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .in-combat :is(.rd-foes.n4, .rd-foes.n5) { gap: var(--u); }
  .in-combat :is(.rd-foes.n4, .rd-foes.n5) .rd-foe-art { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
  .in-combat .rd-foes .rd-foe.minion .rd-foe-art { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
  .in-combat .rd-foes:has(.boss) .rd-foe.minion .rd-foe-art { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .in-combat .rd-foes .rd-foe.boss { max-width: none; }
  .in-combat .rd-foes .rd-foe.boss .rd-foe-art { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
  .in-combat .rd-foe.boss .rd-sts { margin-top: calc(2.2 * var(--u)); } /* no bar row under a boss: keep its feet on the line */
  .in-combat .rd-foe-name { height: calc(2.6 * var(--u)); font-size: calc(1.9 * var(--u)); gap: calc(.5 * var(--u)); }
  .in-combat .rd-foe-name em { padding: 0 calc(.6 * var(--u)); font-size: calc(1.4 * var(--u)); }
  .in-combat :is(.rd-me-bar, .rd-foe-bar) { height: calc(1.8 * var(--u)); font-size: calc(1.6 * var(--u)); gap: calc(.6 * var(--u)); }
  .in-combat .rd-stage .rd-bar { height: calc(1.1 * var(--u)); }
  .in-combat .rd-foe-bar .rd-bar { width: calc(16 * var(--u)); }
  .in-combat .rd-foes:has(.boss) .rd-foe.minion .rd-foe-bar .rd-bar { width: calc(10 * var(--u)); }
  .in-combat :is(.rd-me-bar, .rd-foe-bar) small { white-space: nowrap; }
  .in-combat .rd-me-bar .rd-bar { width: calc(18 * var(--u)); }
  .in-combat .rd-intent { min-height: calc(3.6 * var(--u)); font-size: calc(2.2 * var(--u)); padding: 0 calc(1.2 * var(--u)); margin-bottom: calc(.6 * var(--u)); gap: calc(.5 * var(--u)); }
  .in-combat .rd-int-ico { width: calc(2 * var(--u)); height: calc(2 * var(--u)); }
  .in-combat .rd-sts { height: calc(2.8 * var(--u)); min-height: 0; overflow: visible; gap: calc(.4 * var(--u)); }
  .in-combat .rd-st { height: calc(2.4 * var(--u)); font-size: calc(1.6 * var(--u)); padding: 0 calc(.8 * var(--u)); gap: calc(.3 * var(--u)); }
  .in-combat .rd-st-ico { width: calc(1.5 * var(--u)); height: calc(1.5 * var(--u)); }
  .in-combat .rd-ground, .in-combat .rd-ground.cold { bottom: calc(7.4 * var(--u)); width: 110%; height: calc(3.4 * var(--u)); }
  .in-combat :is(.rd-me, .rd-foe)::after { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .in-combat .rd-foe.boss::after { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
  .in-combat .rd-bossbar { top: calc(2 * var(--u)); left: 28%; width: 44%; gap: calc(.4 * var(--u)) calc(1.2 * var(--u)); }
  .in-combat .rd-bossbar strong { font-size: calc(2.4 * var(--u)); }
  .in-combat .rd-bossbar .rd-bar { height: calc(1.4 * var(--u)); }
  .in-combat .rd-bossbar .rd-bar::after { top: calc(-.45 * var(--u)); width: calc(1.4 * var(--u)); height: calc(1.4 * var(--u)); }
  .in-combat .rd-bossbar small { font-size: calc(1.6 * var(--u)); }
  .in-combat .rd-float { font-size: calc(4 * var(--u)); }
  .in-combat .rd-float.crit { font-size: calc(5.4 * var(--u)); }
  .in-combat .rd-float.dot { font-size: calc(3 * var(--u)); }
  .in-combat :is(.rd-banner, .rd-phase) { font-size: calc(2.6 * var(--u)); padding: var(--u) calc(3 * var(--u)); }
  .in-combat .rd-stage-rope, .in-combat .rd-untie { height: calc(6 * var(--u)); }
  /* the inspector: a plate along the stage bottom; the hovered or selected hand card is the readable card */
  .in-combat .rd-inspect { left: 50%; top: auto; bottom: calc(1.5 * var(--u)); transform: translateX(-50%); padding: var(--u) calc(1.6 * var(--u)); font-size: calc(1.7 * var(--u)); z-index: 8; }
  .in-combat .rd-inspect .rd-card.big { display: none; }
  .in-combat .rd-inspect-side { width: auto; flex-direction: row; align-items: center; gap: calc(2 * var(--u)); white-space: nowrap; }
  .in-combat .rd-inspect :is(.rd-kw, .rd-how, .rd-drag-hint) { font-size: inherit; }
  .in-combat .rd-use { min-height: calc(4.4 * var(--u)); padding: 0 calc(2 * var(--u)); font-size: inherit; }
  /* the tray: orb and piles | the fanned hand | end turn */
  .in-combat .rd-tray { height: calc(25 * var(--u)); display: grid; grid-template-columns: calc(24 * var(--u)) minmax(0, 1fr) calc(24 * var(--u)); align-items: center; gap: 0; padding: 0 calc(2 * var(--u)); position: relative; z-index: 3; overflow: visible; background: linear-gradient(#0d0a09, #050403); }
  .in-combat .rd-piles { width: auto; gap: calc(1.2 * var(--u)); font-size: calc(1.8 * var(--u)); justify-self: start; }
  .in-combat .rd-energy { width: calc(9 * var(--u)); height: calc(9 * var(--u)); padding-top: calc(2 * var(--u)); }
  .in-combat .rd-energy b { font-size: calc(4 * var(--u)); }
  .in-combat .rd-energy small { font-size: calc(2 * var(--u)); }
  .in-combat .rd-pile { font-size: calc(1.8 * var(--u)); }
  .in-combat .rd-end-turn { width: calc(18 * var(--u)); min-height: calc(6.4 * var(--u)); font-size: calc(2.2 * var(--u)); justify-self: end; }
  .in-combat .rd-hand-wrap { justify-content: center; align-items: flex-end; }
  .in-combat .rd-more { display: none; }
  .in-combat .rd-hand { flex: 1; height: 100%; overflow: visible; justify-content: center; gap: 0; padding: 0 0 calc(2.4 * var(--u)); align-items: flex-end;
    --cw: calc(72 * .21 * var(--u));
    --step: min(13.6 * var(--u), (112 * var(--u) - var(--cw)) / max(1, var(--n) - 1));
    --rs: min(4deg, 28deg / max(1, var(--n) - 1));
    --arc: min(.6 * var(--u), 2.4 * var(--u) / max(1, (var(--n) - 1) * (var(--n) - 1) / 4)); } /* the outer cards drop at most 2.4u */
  .in-combat .rd-hand .rd-card { --k: calc(.21 * var(--u)); --t: calc(var(--i) - (var(--n) - 1) / 2); --fr: calc(var(--t) * var(--rs)); --fy: calc(var(--t) * var(--t) * var(--arc)); --s: 1;
    transform-origin: 50% 100%; transform: translate(var(--dx, 0px), calc(var(--dy, 0px) + var(--fy))) rotate(var(--fr)) scale(var(--s)); transition: transform .14s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
  .in-combat .rd-hand .rd-card + .rd-card { margin-left: calc(var(--step) - var(--cw)); }
  .in-combat .rd-hand .rd-cart { height: calc(36 * var(--k)); } /* a shorter window, so three lines of text show */
  .in-combat .rd-hand .rd-ctext { -webkit-line-clamp: 3; }
  .in-combat .rd-hand .rd-card.on { --fr: 0deg; --fy: calc(-4 * var(--u)); --s: 1.12; z-index: 9; }
  .in-combat .rd-hand .rd-card:focus-visible { --fr: 0deg; --fy: calc(-6 * var(--u)); --s: 1.28; z-index: 10; }
  .in-combat .rd-hand .rd-card.dragging { --s: 1.06; --fy: 0px; transform-origin: 50% 50%; transition: none; z-index: 20; }
  .in-combat .rd-hand .rd-card.back { transform-origin: 50% 50%; z-index: 20; transition: transform .28s cubic-bezier(.3, 1.5, .5, 1), transform-origin .28s ease-out; }
  .in-combat .rd-toast { bottom: calc(27 * var(--u)); font-size: calc(1.8 * var(--u)); }
}
@media (min-width: 1000px) and (min-height: 560px) and (orientation: landscape) and (hover: hover) {
  .road-root.in-combat:not(.busy):not(.aiming) .rd-hand .rd-card:not(.spent):hover { --fr: 0deg; --fy: calc(-6 * var(--u)); --s: 1.28; z-index: 10; }
}
@media (min-width: 1000px) and (min-height: 900px) and (orientation: landscape) { .road-root { --fx: 2.5; } }
@media (min-width: 1000px) and (min-height: 1300px) and (orientation: landscape) { .road-root { --fx: 3.3; } }
/* a portrait screen (the rotate prompt is over it): the board still reads, stacked */
@media (orientation: portrait) {
  .road-root:not(.force-land) .rd-stage { flex-direction: column; align-items: stretch; }
  .road-root:not(.force-land) .rd-me { flex-direction: row; width: auto; }
  .road-root:not(.force-land) .rd-foes { flex-wrap: wrap; justify-content: center; }
  .road-root:not(.force-land) .rd-tray { height: auto; flex-wrap: wrap; }
  .road-root:not(.force-land) .rd-hand-wrap { flex-basis: 100%; order: 3; height: 112px; }
  .road-root:not(.force-land) .rd-panel { grid-template-columns: 1fr; }
  .road-root:not(.force-land) .rd-panel-r { padding-top: 0; }
  .road-root:not(.force-land) .rd-vow-row, .road-root:not(.force-land) .rd-rest-row, .road-root:not(.force-land) .rd-shop-body { flex-direction: column; overflow-y: auto; }
  .road-root:not(.force-land) .rd-shop-side { width: auto; }
  .road-root:not(.force-land) .rd-inspect { left: 8px; }
}
/* reduced motion: no pan, drift, ember travel, bobbing or blows; short fades only */
@media (prefers-reduced-motion: reduce) {
  .rd-rotate-phone, .rd-stage.shake, .rd-stage.shake-big, .rd-float, .rd-idle, .rd-body, .rd-intent, .rd-hand.dealt .rd-card, .rd-map-fog-in, .rd-brand, .rd-streak, .rd-foe .rd-body::before, .rd-foe .rd-body::after, .rd-stage.thud,
  .rd-me .rd-idle, .rd-foe .rd-idle, .rd-foe .rd-body, .rd-me .rd-body, .rd-bit, .rd-reward.enter .rd-card { animation: none !important; }
  .rd-map-fog, .rd-card, .rd-bar i { transition: none; }
  .rd-float { opacity: 1; }
  .rd-end.dead { animation: rd-intro-in .4s ease-out both; background: rgba(0, 0, 0, .9); }
  .rd-end-rope, .rd-smoke, .rd-end-glow { display: none; }
  .rd-end-text { animation: none; opacity: 1; }
  .rd-foe.dying { opacity: 0; transition: opacity .3s; }
  .rd-foe .rd-body::before { transform: translate(-50%, -50%); }
  .rd-foe .rd-body::after { transform: translate(-50%, -50%) rotate(45deg); }
}

/* Header, members: the profile leads on the left (avatar sticker overlapping a name plate), and the right cluster is
   four equal stickers: home (the brand mark), bell, theme, menu. Signed out, the brand keeps the left as before. */
.header-inner.has-user { gap: 10px; min-height: 70px; }
.site-header .header-actions { flex: none; flex-wrap: nowrap; gap: 8px; padding-right: 0; }
.site-header :is(.hdr-home, .bell, .hdr-theme, .menu-btn) {
  flex: none; width: 42px; height: 42px; min-width: 0; padding: 0; border-radius: 13px;
  border: 2.5px solid var(--line); background: var(--surface); box-shadow: 2px 2px 0 var(--shadow); color: var(--text);
  transition: transform .12s, box-shadow .12s;
}
.site-header :is(.hdr-home, .bell, .hdr-theme) { display: inline-grid; place-items: center; text-decoration: none; }
.site-header :is(.hdr-home, .bell, .hdr-theme) .ui-ico { width: 26px; height: 26px; }
.site-header .hdr-home { overflow: hidden; background: #6fd3c6; }
.site-header .hdr-home img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .site-header :is(.hdr-home, .bell, .hdr-theme, .menu-btn):hover { background-color: var(--surface-2); transform: translateY(-1px); box-shadow: 2px 3px 0 var(--shadow); } .site-header .hdr-home:hover { background-color: #6fd3c6; } }
.site-header :is(.hdr-home, .bell, .hdr-theme, .menu-btn):active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--shadow); }
.site-header :is(.hdr-home, .bell, .menu-btn):focus-visible { outline: 3px solid #ff7a2f; outline-offset: 2px; }
.site-header .bell-count { top: -7px; right: -8px; }

.site-header .user-chip { flex: 0 1 auto; min-width: 0; gap: 0; margin: 0 0 0 2px; color: var(--text); }
.site-header .user-chip .av { z-index: 1; }
.site-header .user-chip .av, .site-header .user-chip .av > img { width: 46px; height: 46px; }
/* the avatar frame reads as a sticker edge on any header art: a solid outline, tier rims kept but deeper */
.site-header .user-chip .av > img { background: var(--surface); box-shadow: 0 0 0 2.5px var(--line), 2px 3px 0 2px var(--shadow); }
.site-header .user-chip .av-rare > img { box-shadow: 0 0 0 3px #ffb300, 0 0 0 5.5px var(--line), 2px 3px 0 4px var(--shadow); }
.site-header .user-chip .av-special::before { inset: -5px; filter: saturate(1.7) brightness(.96); box-shadow: 0 0 0 2.5px var(--line), 2px 3px 0 2px var(--shadow); }
.site-header .user-chip .av-special::after { opacity: .4; }
.site-header .user-chip .av-special > img { box-shadow: 0 0 0 2px var(--line); }
.site-header .user-meta {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0;
  margin-left: -14px; padding: 4px 12px 5px 26px; border: 2.5px solid var(--line); border-radius: 0 14px 14px 0;
  background: var(--surface); box-shadow: 2px 2px 0 var(--shadow); line-height: 1.1;
}
.site-header .user-name { display: block; max-width: 14em; font-size: 1.06rem; font-weight: 900; letter-spacing: -.01em; color: var(--text); }
.site-header .user-lv {
  align-self: flex-start; padding: 0 6px; border: 1.5px solid #2a1d12; border-radius: 6px;
  background: var(--mustard); color: #2a1d12; font: 900 .7rem/1.45 var(--mono); letter-spacing: .02em;
}
body.has-page-bg .site-header .user-chip .user-meta, body.has-page-bg .site-header .user-chip .user-name { text-shadow: none; } /* the plate carries them now */
@media (max-width: 480px) {
  .header-inner.has-user { gap: 8px; min-height: 66px; }
  .site-header .header-actions { gap: 6px; }
  .site-header :is(.hdr-home, .bell, .hdr-theme, .menu-btn) { width: 38px; height: 38px; border-radius: 12px; }
  .site-header :is(.hdr-home, .bell, .hdr-theme) .ui-ico { width: 23px; height: 23px; }
  .site-header .menu-btn span { width: 16px; }
  .site-header .user-chip .av, .site-header .user-chip .av > img { width: 40px; height: 40px; }
  .site-header .user-meta { margin-left: -12px; padding: 3px 10px 4px 22px; }
  .site-header .user-name { max-width: 100%; font-size: .98rem; }
}

/* ===== player plates (2026-11-14): the equipped profile card behind the header name, on phone and PC ===== */
/* The plate is the card's 4:1 band (pc-NNN-plate.webp) anchored right, under a fixed dark scrim on the left where the
   name sits, so it reads the same in light and dark; only the outer border and shadow follow the theme. */
.plate { position: relative; isolation: isolate; overflow: hidden; }
.plate-art { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 100% 50%; pointer-events: none; }
.plate-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(24, 14, 8, .82) 0, rgba(24, 14, 8, .68) 55%, rgba(24, 14, 8, .2) 82%, transparent 100%); }
.site-header .user-chip.has-plate .user-meta {
  box-sizing: border-box; height: 50px; width: 200px; justify-content: center; margin-left: -14px; padding: 4px 14px 4px 26px;
  border: 2.5px solid var(--line); border-radius: 0 14px 14px 0; background: #2a1d12; box-shadow: 2px 2px 0 var(--shadow);
}
.site-header .user-chip.has-plate .user-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff6e0; text-shadow: 0 1px 0 #1a0f08, 0 0 4px rgba(0, 0, 0, .55); }
.site-header .user-chip.has-plate .user-lv { border-color: #1a0f08; }
/* rarity ring (the badge colours) drawn over the art's edge; common has none */
.has-plate .plate::before, .plate-row::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.has-plate.rarity-uncommon .plate::before { box-shadow: inset 0 0 0 2px var(--mint); }
.has-plate.rarity-rare .plate::before { box-shadow: inset 0 0 0 2px var(--sky); }
.has-plate.rarity-epic .plate::before { box-shadow: inset 0 0 0 2px #b48ce0; }
.has-plate.rarity-legendary .plate::before { box-shadow: inset 0 0 0 2px var(--mustard), inset 0 0 8px var(--mustard); }
.has-plate.rarity-unique .plate::before, .plate-row.rarity-unique::before {
  padding: 2px; background: linear-gradient(90deg, #6cc8ff, #7fe0a0, #ffd35e, #ff7aa8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* the sheen (epic and up): a light bar sweeping across, transform only; under the name, over the art */
.has-plate:is(.rarity-epic, .rarity-legendary, .rarity-unique) .plate::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; z-index: -1; width: 36%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5) 50%, transparent);
  transform: translateX(-120%) skewX(-18deg); animation: plate-sheen 6s cubic-bezier(.4, 0, .2, 1) infinite;
}
.has-plate.rarity-legendary .plate::after { animation-duration: 4.5s; }
.has-plate.rarity-unique .plate::after { animation-duration: 3.5s; }
@keyframes plate-sheen { 0% { transform: translateX(-120%) skewX(-18deg); } 16%, 100% { transform: translateX(400%) skewX(-18deg); } }
@media (min-width: 900px) {
  .site-header .user-chip.has-plate .av, .site-header .user-chip.has-plate .av > img { width: 48px; height: 48px; }
  .site-header .user-chip.has-plate .user-meta { height: 52px; width: 232px; margin-left: -14px; padding: 4px 16px 4px 28px; }
}
@media (max-width: 480px) {
  .site-header .user-chip.has-plate .user-meta { flex: 0 1 152px; height: 44px; width: 152px; min-width: 124px; max-width: 152px; margin-left: -12px; padding: 4px 12px 4px 24px; }
  .site-header .user-chip.has-plate .user-name { font-size: .95rem; }
}

/* ranking rows (plate-row): every member's card strip, the rarity ring on the row, the sheen on the top three and on hover */
.plate-row::before { z-index: 2; }
.plate-row.rarity-common::before { content: none; }
.plate-row.rarity-uncommon::before { box-shadow: inset 0 0 0 2px var(--mint); }
.plate-row.rarity-rare::before { box-shadow: inset 0 0 0 2px var(--sky); }
.plate-row.rarity-epic::before { box-shadow: inset 0 0 0 2px #b48ce0; }
.plate-row.rarity-legendary::before { box-shadow: inset 0 0 0 2px var(--mustard), inset 0 0 8px var(--mustard); }
.rank-row.rank-card > .plate-sheen {
  position: absolute; top: -20%; bottom: -20%; left: 0; z-index: 0; width: 24%; pointer-events: none; display: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45) 50%, transparent);
  transform: translateX(-120%) skewX(-18deg);
}
.rank-row.rank-card.rank-top > .plate-sheen { display: block; animation: plate-sheen 6s cubic-bezier(.4, 0, .2, 1) infinite; }
@media (hover: hover) { .rank-row.rank-card:hover > .plate-sheen { display: block; animation: plate-sheen 2.4s cubic-bezier(.4, 0, .2, 1) infinite; } }
@media (prefers-reduced-motion: reduce) {
  .has-plate .plate::after { animation: none; display: none; }
  .rank-row.rank-card > .plate-sheen, .rank-row.rank-card:hover > .plate-sheen { animation: none; display: none; }
}

/* ===== fixes (2026-11-13): no sideways drift, drawn home sticker, gear category chips ===== */
/* Nothing may make the page wider than the screen: a legendary pet's breath (laid out even while invisible), the
   profile panel's pet effects and long slot labels pushed the document past 390 px on iPhones, so the page could be
   dragged sideways. clip (not hidden) makes no scroll container, so the sticky header keeps working. */
html, body { overflow-x: clip; }
.pet:not(.casting) .pet-fx { display: none; } /* an idle effect takes no room at all */
.char-card .slot-mini li, .char-card .slot-act { min-width: 0; max-width: 100%; }
.char-card .slot-act small { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; text-align: center; }

/* Header, members: the home sticker is a drawn house (icons/ui/home.png) on the same plain face as bell and theme. */
.site-header .hdr-home { overflow: visible; background: var(--surface); }
@media (hover: hover) { .site-header .hdr-home:hover { background-color: var(--surface-2); } }

/* Gear page: the inventory's category chips (and the paper doll's slots, which open their category). */
.inv-chips { margin: 0 0 12px; }
.inv-chip { white-space: nowrap; }
.inv-chip-n { display: inline-block; min-width: 1.4em; margin-left: 2px; padding: 0 5px; border-radius: 999px; background: var(--surface-2); color: var(--text); font: 800 .72rem/1.5 var(--mono); text-align: center; }
.inv-chip.active .inv-chip-n { background: #fffaf0; color: #2a1d12; }
.inv-chip.is-empty:not(.active) { opacity: .55; }
.inv-item[hidden], .inv-empty[hidden] { display: none; }
#inv-h { scroll-margin-top: 110px; }
a.pd-box { color: inherit; text-decoration: none; cursor: pointer; transition: transform .12s; }
a.pd-box:active { transform: translate(1px, 1px); }
a.pd-box:focus-visible { outline: 3px dashed var(--orange); outline-offset: 3px; }

/* ---- emoticon stickers (services/stickers.mjs, public/stickers.js) */
.stk { display: inline-block; line-height: 0; vertical-align: bottom; text-decoration: none; color: var(--muted); }
.stk img { display: block; width: var(--stk, 96px); height: var(--stk, 96px); object-fit: contain; }
.stk-64 { --stk: 64px; } .stk-72 { --stk: 72px; } .stk-96 { --stk: 96px; } .stk-112 { --stk: 112px; }
.stk-alt, .stk-off { display: none; font-size: .85rem; font-weight: 700; line-height: 1.4; color: var(--muted); }
.stk-off { display: inline; }
.stk-hide .stk img { display: none; }
.stk-hide .stk .stk-alt { display: inline; }
.stk:focus-visible { outline: 3px dashed var(--orange); outline-offset: 2px; border-radius: 8px; }
.stk-btn { flex: none; display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: var(--bw) solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; }
.stk-btn[hidden] { display: none; }
.stk-btn[aria-expanded="true"] { background: var(--mustard); }
.stk-btn:focus-visible { outline: 3px dashed var(--orange); outline-offset: 2px; }
.stk-btn img { width: 24px; height: 24px; }
.comment-form .form-row, .reply-form .form-row { gap: 8px; }
.comment-form .form-row .stk-btn { margin-left: auto; }
.comment-form .form-row .stk-btn + .btn { margin-left: 0; }
.reply-form .form-row { display: flex; align-items: center; justify-content: flex-end; }
.comment-stk { margin: 2px 0 6px; }
.comment-body:empty { display: none; }
.stk-edit { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: .9rem; }
/* the picked sticker, waiting above a composer */
.stk-pick { position: relative; display: flex; align-items: flex-start; gap: 4px; width: max-content; margin: 4px 0 6px; padding: 6px; border: 2px dashed var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.stk-pick[hidden] { display: none; }
.stk-pick-face { display: block; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; }
span.stk-pick-face { cursor: default; }
.stk-pick-face img { width: 96px; height: 96px; object-fit: contain; }
.stk-pick-x { width: 32px; height: 32px; border: 2px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--text); font-weight: 900; cursor: pointer; }
.stk-pick-x:focus-visible, .stk-pick-face:focus-visible { outline: 3px dashed var(--orange); outline-offset: 2px; }
.msg-chat .stk-pick { margin: 4px 8px; }
/* the drawer: a bottom sheet in place of the keyboard on phones, a pop-over by the button on wider screens */
.stk-drawer { position: fixed; z-index: 120; left: var(--stk-x, 8px); top: var(--stk-y, auto); width: 372px; height: 288px; display: grid; grid-template-rows: 48px 1fr; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: 4px 4px 0 var(--shadow); overflow: hidden; }
.stk-drawer[hidden] { display: none; }
.stk-drawer.is-sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; border-radius: var(--radius) var(--radius) 0 0; border-width: var(--bw) 0 0; box-shadow: 0 -4px 0 var(--shadow); padding-bottom: env(safe-area-inset-bottom); height: calc(288px + env(safe-area-inset-bottom)); }
.stk-tabs { display: flex; gap: 2px; padding: 2px 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 2px dashed var(--line); background: var(--surface-2); }
.stk-tabs::-webkit-scrollbar { display: none; }
.stk-tab { position: relative; flex: none; display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: .8rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.stk-tab img { width: 28px; height: 28px; object-fit: contain; }
.stk-tab[aria-selected="true"] { background: var(--surface); box-shadow: inset 0 -3px 0 var(--orange); }
.stk-tab.is-locked img { filter: grayscale(1); opacity: .5; }
.stk-lock { position: absolute; right: 0; bottom: 2px; font-size: .62rem; line-height: 1; }
.stk-tab-shop { margin-left: auto; white-space: nowrap; color: var(--accent); }
.stk-tab:focus-visible { outline: 3px dashed var(--orange); outline-offset: -3px; }
.stk-panel { overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.stk-cells { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.stk-cell { display: grid; place-items: center; width: 100%; aspect-ratio: 1; max-height: 86px; padding: 4px; border: 0; border-radius: 12px; background: none; cursor: pointer; }
.stk-cell img { width: 72px; height: 72px; object-fit: contain; }
button.stk-cell:hover, button.stk-cell:focus-visible { background: var(--surface-2); outline: none; }
button.stk-cell:active img { transform: scale(.92); }
.stk-cells.is-locked .stk-cell { cursor: default; }
.stk-cells.is-locked img { filter: grayscale(1); opacity: .45; }
.stk-locked { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0 2px 8px; padding: 8px 10px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--warn-text); }
.stk-locked-line { margin: 0; font-size: .86rem; font-weight: 800; }
.stk-empty { margin: 24px 12px; text-align: center; color: var(--muted); font-size: .9rem; }
/* rooms: the log line, ×N for a repeat, and the sticker popping over the character */
.chat-stk .chat-text { display: inline-flex; align-items: flex-end; gap: 4px; }
.stk-times { font-family: var(--mono); font-weight: 900; font-size: .85rem; color: var(--muted); }
.bubble.bubble-stk { bottom: 62%; left: 78%; transform: none; padding: 0; background: transparent; border-color: transparent; box-shadow: none; line-height: 0; animation: stk-pop .25s ease-out; } /* beside the head, inside the stage */
.bubble.bubble-stk .stk-alt { line-height: 1.3; }
@keyframes stk-pop { from { transform: scale(.6); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bubble.bubble-stk { animation: none; } }
.chat-form .stk-btn { align-self: center; }
.msg-send .stk-btn { width: 40px; height: 40px; }
/* messenger: a sticker sits without a bubble */
.msg-log li.stk-msg .stk { margin: 2px 0; }
.msg-log li.theirs.first.stk-msg .stk { margin-left: 36px; }
/* the shop and a pack's sheet */
.stk-shop h1, .stk-sheet h1 { margin: 8px 0 4px; }
.stk-dp { font-weight: 800; }
.stk-hide-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px 0 14px; font-weight: 800; }
.stk-hide-switch[hidden] { display: none; }
.stk-hide-switch input { width: 22px; height: 22px; margin: 0; padding: 0; border: 0; box-shadow: none; accent-color: var(--orange); }
.stk-hide-switch small { flex-basis: 100%; font-weight: 500; }
.stk-packs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stk-pack a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 10px 12px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: 3px 3px 0 var(--shadow); }
.stk-pack a:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }
.stk-pack a:focus-visible { outline: 3px dashed var(--orange); outline-offset: 3px; }
.stk-pack-thumbs { display: grid; grid-template-columns: repeat(2, 40px); gap: 2px; }
.stk-pack-thumbs img { width: 40px; height: 40px; object-fit: contain; }
.stk-pack:not(.is-owned) .stk-pack-thumbs img { filter: grayscale(.7); }
.stk-pack-meta { display: grid; gap: 2px; min-width: 0; }
.stk-pack-meta .muted { font-size: .86rem; }
.stk-back { margin: 8px 0; }
.stk-sheet-head { display: flex; align-items: center; gap: 12px; }
.stk-sheet-cover { width: 64px; height: 64px; object-fit: contain; flex: none; }
.stk-how { margin: 0; color: var(--muted); font-weight: 700; font-size: .9rem; }
.stk-grid { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stk-grid li { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: var(--surface-2); }
.stk-grid img { width: 72px; height: 72px; object-fit: contain; }
.stk-sheet.is-locked .stk-grid img { filter: grayscale(.6); opacity: .7; }
.stk-sheet-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stk-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.stk-owned { margin: 0; font-weight: 800; color: var(--accent); }
.stk-pop { position: relative; width: min(420px, 100%); max-height: 86vh; overflow-y: auto; text-align: left; justify-items: stretch; }
.stk-pop-x { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 2px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--text); font-weight: 900; cursor: pointer; }
.stk-pop .stk-sheet-head { padding-right: 36px; }
@media (max-width: 600px) { .stk-modal { align-items: end; padding: 0; } .stk-modal .stk-pop { width: 100%; border-radius: var(--radius) var(--radius) 0 0; } }
/* reactions: an emoji stands in until a reaction's drawn icon lands */
.react-glyph { display: grid; place-items: center; font-size: 32px; line-height: 1; }
span.chart-react { font-size: 15px; }

/* ---- member safety (designed by Fable, 2026-11-14): comment tools row, blocking, reports, moderation ---- */
/* reply and report side by side as pills, big enough to hit with a thumb; an open form takes the whole row */
.comment-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 8px; }
.comment-tools > details { margin: 0; }
.comment-tools details[open] { flex-basis: 100%; }
.comment-tools > details > summary, .comment-tools .tool-pill {
  display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 6px 12px; border: 2px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: .88rem; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer; list-style: none;
}
.comment-tools > details > summary::-webkit-details-marker { display: none; }
.comment-tools > .reply-box > summary { color: var(--text); }
.comment-tools > .report-box[open] > summary { color: var(--danger); border-color: var(--danger); }
@media (hover: hover) { .comment-tools > details > summary:hover, .comment-tools .tool-pill:hover { background: var(--surface-2); } }
.report-also { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.report-also input { appearance: auto; -webkit-appearance: checkbox; width: 20px; height: 20px; min-height: 0; flex: none; margin: 0; padding: 0; border: 0; box-shadow: none; accent-color: var(--orange); }
.comment-blocked .comment-body { font-style: italic; }

/* profile: block / report */
.profile-safety { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.profile-safety > details { flex: 0 1 auto; }
.profile-safety > details[open] { flex-basis: 100%; }
.profile-safety > details > summary, .profile-safety .tool-pill {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 2px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text); font-weight: 800; font-size: .9rem; cursor: pointer; list-style: none;
}
.profile-safety > details > summary::-webkit-details-marker { display: none; }
.profile-safety form { margin-top: 8px; padding: 12px; border: 2px dashed var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.profile-safety p { margin: 0 0 8px; color: var(--muted); font-size: .9rem; }
.blocked-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-weight: 800; }
.blocked-notice form { margin: 0; }
@media (pointer: coarse) { .profile-safety > details > summary { min-height: 44px; } }

/* messenger: blocked tab, block button, ⋯ on messages, the report dialog */
.msg-block-form { display: flex; gap: 6px; margin: 0 0 8px; }
.msg-block-form input { flex: 1; min-width: 0; }
.msg-item.blocked .msg-open { cursor: default; }
.msg-item.blocked .dot { visibility: hidden; }
.msg-item.blocked .msg-name { color: var(--text); }
.msg-unblock { flex: none; align-self: center; }
.msg-blockinfo { margin: 0 0 8px; color: var(--muted); font-size: .82rem; }
.msg-chat-head .msg-block { margin-left: auto; flex: none; padding: 4px 10px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
.msg-chat-head .msg-block + .msg-leave { margin-left: 6px; }
.msg-more {
  flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font: 900 1.1rem/1 inherit; cursor: pointer; opacity: 0; transition: opacity .12s;
}
.msg-more:focus-visible { opacity: 1; }
@media (hover: hover) { li:hover > .msg-more, li:hover .msg-more { opacity: 1; } .msg-more:hover { background: var(--surface-2); color: var(--text); } }
@media (pointer: coarse) { .msg-more { opacity: 1; } }
.msg-log li.theirs { position: relative; }
.msg-log li.theirs .msg-more { vertical-align: middle; }
.chat-log li .msg-more, .dock-log li .msg-more { width: 32px; height: 32px; margin-left: 4px; vertical-align: middle; }
.report-modal .report-pop { display: grid; justify-items: stretch; gap: 10px; text-align: left; width: min(92vw, 380px); }
.msg-log li .msg-line { display: flex; align-items: center; gap: 2px; max-width: 100%; }
.msg-log li .msg-line .msg-bubble { min-width: 0; }
.msg-log li.theirs.first .msg-line { margin-left: 36px; margin-top: -6px; }
.msg-log li.theirs.first .msg-line .msg-bubble, .msg-log li.theirs.first.stk-msg .msg-line .stk { margin-left: 0; margin-top: 0; }
.report-pop h2 { margin: 0; font-size: 1.1rem; }
.report-pop label { display: grid; gap: 4px; font-weight: 800; font-size: .9rem; }
.report-pop select, .report-pop input[type="text"] { width: 100%; }
.report-pop .report-also { display: flex; }
.report-pop .ach-pop-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 4px 0 0; }
.friend-pop .friend-safety { display: flex; justify-content: center; gap: 8px; margin: 2px 0 0; }

/* admin: report type chips, queue actions, word lists */
.report-types { flex-wrap: wrap; }
.report-types .chip .n { margin-left: 4px; font-weight: 900; }
.report-type { font-size: .78rem; }
.report-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.report-actions .inline-form { margin: 0; }
.report-mod { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 2px dashed var(--line); }
.report-mod input[name="reason"] { min-width: 0; flex: 1 1 100%; }
.word-lists { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.word-lists textarea { width: 100%; min-height: 220px; font-family: var(--mono); }
.mod-notices { margin-bottom: 18px; }
.mod-notice-in { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; }
.chat-masked { letter-spacing: .02em; }
.msg-ok { margin: 0 0 6px; color: var(--text); font-size: .82rem; font-weight: 700; }