/* The site's look: the OpenMU Babylon logo's dark chrome, blades and seams of light over the landing page's
   map tour (website/fx). Every piece of art and the accent colour come from the theme's CSS variables
   (img/ui/themes.css, written by website/art/build.py); 9-slice cuts match the art script. */

@font-face { font-family: 'Inter'; src: url('/fonts/inter_regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter_medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter_semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/geist_semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --ink: #050506;
  --line: rgba(150, 168, 192, 0.12);
  --text-0: #e9edf2;
  --text-1: #9aa2ad;
  --text-2: #646b75;
  --steel: #b9c6d6;
  --glow: 0 0 12px rgba(var(--accent-rgb), 0.65);
  --ok-text: #9ed4b6;
  --danger-text: #f0b4aa;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --font-ui: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Geist', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --plate: clamp(44px, 13vw, 96px);
  /* a framed block's box: its slice and drawn width (every drawn skin cuts its frame at 40), the border it sits in,
     and the size of its corner ornaments */
  --frame-cut: 40;
  --frame-w: calc(var(--frame-cut) * 1px);
  --frame-border: 20px;
  --orn: 150px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
/* The backdrop's tilted map reports overflow past its clip; the page never scrolls sideways. On the root the clip goes
   to the viewport, which a phone still widens to fit what sticks out (the skins' cloth canvases, the title plates'
   ends), so body clips as well. */
html, body { overflow-x: clip; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--ink);
  color: var(--text-0);
  font: 14px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--steel); text-decoration: none; transition: color 150ms var(--ease); }
a:hover { color: #fff; }
p { margin: 0 0 10px; }
::selection { background: rgba(var(--accent-rgb), 0.45); color: #fff; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--text-2); }
.small { font-size: 13px; }
.center { text-align: center; }

/* ---------- Background ---------- */

.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; contain: strict; background: var(--bg-color); pointer-events: none; }
.bg-gradient { background: linear-gradient(var(--bg-angle), var(--bg-from), var(--bg-to)); }
.bg-map, .bg-image, .bg-video { background: var(--ink); }
/* The map tour only draws for the map type (the admin's live preview switches types in place). */
.bg:not(.bg-map) :is(.bg-map-layer, .fx-backdrop) { display: none; }
.bg-map-layer {
  position: absolute;
  inset: -6%;
  background: var(--ink);
  -webkit-mask-image: radial-gradient(ellipse 80% 85% at 50% 40%, #000 45%, transparent 92%);
  mask-image: radial-gradient(ellipse 80% 85% at 50% 40%, #000 45%, transparent 92%);
  filter: blur(var(--bg-blur));
}
.bg-map-art {
  position: absolute;
  inset: 0;
  background: url('/ui/world_select/world_map.webp') center / cover;
  opacity: var(--bg-art);
  filter: grayscale(1) contrast(calc(1.3 * var(--bg-contrast, 1))) brightness(0.8);
  transform: perspective(1400px) rotateX(18deg) scale(1.15);
}
.bg-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; opacity: var(--bg-art); filter: blur(var(--bg-blur)) contrast(var(--bg-contrast, 1)); }
/* a linked provider's player, covering the screen as a 16:9 video would (object-fit cannot reach into an iframe) */
.bg-embed { overflow: hidden; }
.bg-embed iframe { position: absolute; left: 50%; top: 50%; width: max(100%, 177.78vh); height: max(100%, 56.25vw); translate: -50% -50%; border: 0; }
.bg-tint { position: absolute; inset: 0; background: var(--bg-tint); mix-blend-mode: color; opacity: var(--bg-tint-strength); }
.bg-dim { position: absolute; inset: 0; background: #000; opacity: var(--bg-dim); }
.bg-vignette { position: absolute; inset: 0; display: none; }
.bg-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0, transparent 46%, rgba(5, 5, 6, 0.85) 74%, var(--ink) 90%); }
.has-vignette:not(.bg-map) .bg-vignette { display: block; background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.7) 100%); }
.has-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.has-motion .bg-map-art, .has-motion .bg-media { animation: bg-breathe 28s ease-in-out infinite alternate; }
@keyframes bg-breathe { from { scale: 1; } to { scale: 1.06; } }

/* The landing's map tour (website/fx), brighter than on the landing: here it is the page's art. */
.fx-backdrop { position: absolute; inset: 0; filter: blur(var(--bg-blur)); }
.fx-backdrop .ws-page { pointer-events: none; }
.fx-backdrop .ws-page::after { display: none; }
.fx-backdrop .ws-map { opacity: var(--bg-art); filter: grayscale(1) contrast(calc(1.3 * var(--bg-contrast, 1))) brightness(0.85); }
.fx-backdrop .ws-map-layer { isolation: isolate; }
.fx-backdrop .ws-tint { background: var(--bg-tint); opacity: var(--bg-tint-strength); }
.bg:not(.has-vignette) .ws-vignette { display: none; }

/* ---------- Header: one bar (bar.png tiles), links either side of the hanging emblem ---------- */

.head { position: sticky; top: 0; z-index: 30; height: 96px; margin-bottom: -96px; }
/* solid black down to the vine rail (78 px, the middle of bar.png's rail), warming to the theme's colour */
.bar {
  position: relative;
  height: 96px;
  background:
    linear-gradient(to bottom, transparent 24px, rgba(var(--accent-rgb), 0.16) 78px, transparent 78px),
    linear-gradient(to bottom, #040405 0, #070709 78px, transparent 78px);
}
.bar::before {
  /* the rail and its art (bar.png, 1920 wide, shown at that width and centred: phones crop it, never squash it;
     wider screens stretch it), and its light pulsing on top */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ui-bar-glow) center bottom / max(1920px, 100%) 96px no-repeat, var(--ui-bar) center bottom / max(1920px, 100%) 96px no-repeat;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.75));
  pointer-events: none;
}
.main { padding-top: 96px; }
.page-home .main { padding-top: 0; }
.bar::after {
  /* a pulse of light running along the bar's seam */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.95) 50%, transparent) no-repeat;
  background-size: 22% 100%;
  filter: blur(1px);
  animation: seam-run 7s linear infinite;
  pointer-events: none;
}
@keyframes seam-run { from { background-position: -30% 0; } to { background-position: 130% 0; } }

.bar-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 96px; padding-bottom: 14px; }
.drawer { display: contents; }
.nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nav-left { grid-column: 1; grid-row: 1; justify-content: flex-end; padding-right: 24px; }
.nav-right { grid-column: 3; grid-row: 1; justify-content: flex-start; padding-left: 24px; }
.emblem { grid-column: 2; grid-row: 1; }
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border: 0;
  background: none;
  color: #aeb7c3;
  font: 600 14px var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: color 180ms var(--ease), text-shadow 180ms var(--ease);
}
.nav-link::-webkit-details-marker { display: none; }
.nav-link:hover, .nav-link.is-here, .nav-link.is-open { color: #fff; text-shadow: var(--glow); }
.nav-accent { color: var(--accent-hot); }

/* The bar's categories (view.php nav_menu): the item with its caret; its panel of pages drops from behind the bar.
   site.js hangs every such panel (and the bell's) in `.drops`, a layer under the head's, so the bar's cloth, hem and
   emblem lie over their tops. Without scripts a category shows its panel under it on hover or focus. */
.nav-caret { width: 9px; height: 6px; margin-left: 7px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; transition: rotate 250ms var(--ease), opacity 200ms; }
.nav-group-open:hover .nav-caret, .nav-group-open.is-open .nav-caret { opacity: 1; }
.nav-group-open.is-open .nav-caret { rotate: 180deg; }
.nav-group { position: relative; display: flex; }
.nav-drop { display: none; }
.nav-group:is(:hover, :focus-within) > .nav-drop { position: absolute; top: 100%; left: 0; z-index: 2; display: block; width: 300px; padding: 10px 8px 8px; }
.drops { position: fixed; top: 0; right: 0; left: 0; z-index: 29; height: 0; }
/* the head lets the pointer through where it shows only its art, so a panel behind the bar is reached right under its
   item; what is in it to use still takes the pointer (on a phone the whole open drawer does) */
.head { pointer-events: none; }
.head :is(a, button, input, select, label, form, summary, .fold, .notify, .nav-group, .emblem) { pointer-events: auto; }
.head.is-open .drawer { pointer-events: auto; }
.drops > .card { position: absolute; top: 22px; right: auto; }
.drops > .nav-drop { width: 310px; padding: 34px 8px 8px; }
.drops > .nav-drop.is-open { display: block; animation: notify-in 420ms var(--ease); }
/* a panel going: its words go first while its cloth burns away (site.js burnAway); a skin without cloth flares and
   fades instead */
.drops > .card.is-burning { pointer-events: none; }
.drops > .card.is-burning > :not(.orn, canvas) { opacity: 0; transition: opacity 260ms var(--ease) 80ms; }
/* a woven panel's links go with its cloth as it burns from the hem up (site.js fxBurnAway) */
.drops > .card.is-burning.is-woven > :not(.orn, canvas) { transition-duration: 520ms; transition-delay: 160ms; }
.drops > .card.is-burning:not(.is-woven) { animation: burn-out 520ms var(--ease) forwards; }
@keyframes burn-out { 35% { filter: brightness(1.7) sepia(1) saturate(4) hue-rotate(-18deg); } to { opacity: 0; translate: 0 -8px; filter: brightness(2.2) sepia(1) saturate(5) hue-rotate(-24deg) blur(3px); } }
.nav-drop-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-drop-item { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--text-1); transition: background 200ms var(--ease), translate 250ms var(--ease); }
.nav-drop-item:is(:hover, :focus-visible) { background: rgba(255, 255, 255, 0.05); outline: none; translate: 3px 0; }
.nav-drop-item.is-here { background: rgba(var(--accent-rgb), 0.1); }
.nav-drop-rune { display: none; }
[data-skin='arcane'] .nav-drop-item { grid-template-columns: 22px minmax(0, 1fr); padding-left: 8px; }
[data-skin='arcane'] .nav-drop-rune { display: grid; place-items: center; }
[data-skin='arcane'] .nav-drop-rune .nav-rune { width: 10px; height: 15px; margin: 0; stroke-width: 1.4; filter: drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 7px rgba(var(--accent-rgb), 0.7)); transition: filter 250ms var(--ease); }
[data-skin='arcane'] .nav-drop-item:is(:hover, :focus-visible, .is-here) .nav-rune { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 14px var(--accent)); }
.nav-drop-text { display: grid; gap: 1px; min-width: 0; }
.nav-drop-text b { color: var(--text-0); font: 600 13px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.nav-drop-item:hover .nav-drop-text b { color: #fff; text-shadow: var(--glow); }
.nav-drop-text small { overflow: hidden; color: var(--text-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.drops > .notify-panel { right: auto; }
[data-skin='parchment'] .nav-drop-item:hover .nav-drop-text b { color: #2b1c0e; text-shadow: none; }

/* The vine (nav_vine() in view.php): its stem draws itself round the item, then the leaves and the bud open */
.vine { position: absolute; left: 4px; bottom: -6px; width: calc(100% - 8px); height: 14px; overflow: visible; pointer-events: none; }
.vine-stem { fill: none; stroke: #9aa6b8; stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 1px 1px #000); transition: stroke-dashoffset 700ms var(--ease); }
.vine-leaf { fill: #6f7b8c; stroke: #c8d2df; stroke-width: 0.6; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; scale: 0; transition: scale 400ms var(--spring) 0ms; }
.vine-bud { fill: var(--accent-hot); filter: drop-shadow(0 0 4px var(--accent)); scale: 0; transform-box: fill-box; transform-origin: center; transition: scale 300ms var(--spring); }
:is(.nav-link:hover, .nav-link.is-here, .nav-link.is-open) .vine-stem { stroke-dashoffset: 0; }
:is(.nav-link:hover, .nav-link.is-here, .nav-link.is-open) .vine-leaf { scale: 1; transition-delay: 380ms; }
:is(.nav-link:hover, .nav-link.is-here, .nav-link.is-open) .vine-bud { scale: 1; transition-delay: 560ms; animation: bud 2.4s ease-in-out 900ms infinite; }
@keyframes bud { 50% { opacity: 0.55; } }

.subtabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin: -4px 0 18px; }
.subtabs .nav-link { padding: 8px 12px; font-size: 13px; }

/* The emblem: mount.png hangs below the bar with the logo on it */
.emblem { position: relative; display: block; width: 240px; height: 96px; }
.emblem-mount, .emblem-glow { position: absolute; left: 50%; top: 0; width: 300px; height: 132px; translate: -50% 0; background: var(--ui-mount) center top / contain no-repeat; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.8)); }
.emblem-glow { background-image: var(--ui-mount-glow); filter: none; mix-blend-mode: screen; animation: flicker 5s ease-in-out infinite; }
.emblem img { position: absolute; left: 50%; top: 4px; width: 150px; max-height: 116px; object-fit: contain; translate: -50% 0; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.9)); transition: scale 400ms var(--spring), filter 300ms var(--ease); }
.emblem:hover img { scale: 1.06; filter: drop-shadow(0 0 16px rgba(var(--accent-rgb), 0.6)); }

/* Nav folds (site.js): log in and the account menu unfold inline beside their item (in the phone's drawer, under it);
   site.js sizes the width it opens to. */
.fold { position: relative; flex: none; width: 0; overflow: hidden; opacity: 0; transition: width 450ms var(--ease), opacity 300ms var(--ease); }
/* with no room beside an open fold, the other items fold away too */
.nav-right .nav-link { max-width: 220px; transition: color 180ms var(--ease), text-shadow 180ms var(--ease), max-width 450ms var(--ease), padding 450ms var(--ease), opacity 300ms; }
.nav-right.is-tight > .nav-link:not(.is-open) { max-width: 0; padding-left: 0; padding-right: 0; overflow: hidden; opacity: 0; }
.fold.is-open { opacity: 1; }
.fold > * { width: max-content; }
.fold-form { display: grid; grid-template-columns: 140px auto; gap: 4px 6px; align-items: center; padding: 0 6px 0 2px; }
.fold-form .input { height: 25px; padding: 3px 9px; font-size: 12px; }
.fold-go { grid-column: -2; grid-row: 1 / 3; width: 36px; height: 36px; padding: 0; border: 0; background: var(--ui-arrow) center / contain no-repeat; cursor: pointer; transition: scale 250ms var(--spring); }
.fold-go:hover { background-image: var(--ui-arrow-hover); scale: 1.1; }
.fold-go:active { scale: 0.92; }
.fold-menu { display: flex; align-items: center; padding: 0 8px 0 2px; }
.fold-menu form { margin: 0; }
.fold-link { padding: 8px 10px; border: 0; background: none; color: var(--text-1); font: 600 12px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color 150ms var(--ease); }
.fold-link:hover { color: #fff; text-shadow: var(--glow); }

.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; position: relative; width: 24px; height: 2px; margin: auto; background: var(--steel); content: ''; transition: transform 250ms var(--ease), background 200ms; }
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after { transform: translateY(-7px) rotate(-45deg); }

.main { flex: 1; padding-bottom: 56px; }
.main > .panel, .main > .wrap { margin-top: 48px; }

/* ---------- Cards: frame.png (9-slice 96, the middle 64 repeats) over a near-black face ---------- */

.card, .panel {
  position: relative;
  min-width: 0;
  padding: 26px 30px 32px;
  border: var(--frame-border) solid transparent;
  border-image: var(--ui-frame) var(--frame-cut) / var(--frame-w) var(--frame-repeat, stretch);
  background:
    radial-gradient(ellipse at 50% 0, rgba(var(--accent-rgb), 0.1), transparent 60%),
    linear-gradient(to bottom, rgba(10, 11, 14, 0.94), rgba(4, 4, 6, 0.96));
  background-clip: padding-box;
  /* a shadow that follows the frame's art (a backdrop blur showed as a soft box past its corners) */
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.8));
  animation: card-breathe 6s ease-in-out infinite;
}
@keyframes card-breathe {
  0%, 100% { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 0 rgba(var(--accent-rgb), 0)); }
  50% { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.18)); }
}
.card::after, .panel::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--frame-border));
  border: var(--frame-border) solid transparent;
  border-image: var(--ui-frame-glow) var(--frame-cut) / var(--frame-w) var(--frame-repeat, stretch);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: flicker 4.6s ease-in-out infinite;
}
.card:nth-child(2n)::after { animation-delay: -2.1s; }
.reveal { animation: reveal 700ms var(--ease) backwards, grow 1100ms var(--ease) backwards; }
@keyframes grow { from { clip-path: inset(45% 45% 45% 45%); } 60% { clip-path: inset(0 0 0 0); } }
@keyframes flicker { 0%, 100% { opacity: 0.55; } 30% { opacity: 1; } 34% { opacity: 0.7; } 38% { opacity: 1; } 70% { opacity: 0.8; } }
.panel-narrow { max-width: 500px; margin-left: auto; margin-right: auto; }
.panel-wide { max-width: 1000px; margin-left: auto; margin-right: auto; }
.reveal { animation: reveal 700ms var(--ease) backwards; }
@keyframes reveal { from { opacity: 0; translate: 0 24px; } }

/* Title plate (title.png, 9-slice 96, ends scale with the screen) across the top of a card */
.card-head, .h-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  height: 52px;
  margin: -6px -14px 20px;
  padding: 0 4px;
  border: solid transparent;
  border-width: 0 var(--plate);
  border-image: var(--ui-title) 0 110 fill / 0 var(--plate) stretch;
  position: relative;
  color: #fff;
  font: 600 15px var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6), 0 1px 2px #000;
}
.card-head h2, .h-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-head::after, .h-title::after { content: ''; position: absolute; inset: 0 calc(-1 * var(--plate)); border: solid transparent; border-width: 0 var(--plate); border-image: var(--ui-title-glow) 0 110 fill / 0 var(--plate) stretch; mix-blend-mode: screen; pointer-events: none; animation: flicker 3.8s ease-in-out infinite; }
.card-head h2 { min-width: 0; margin: 0; font: inherit; }
.card-head { justify-content: space-between; }
.card-more { flex: none; color: var(--text-2); font-size: 11px; letter-spacing: 0.12em; }
.card-more:hover { color: var(--accent-hot); }

.divider { position: relative; height: 44px; margin: 8px 0; background: var(--ui-divider) center / auto 44px no-repeat; }
.divider::after { content: ''; position: absolute; inset: 0; background: var(--ui-divider-glow) center / auto 44px no-repeat; mix-blend-mode: screen; animation: flicker 4s ease-in-out infinite; }

.h-display { margin: 0; font: 600 clamp(32px, 5.5vw, 60px)/1.05 var(--font-display); letter-spacing: 0.01em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9); }
.lead { max-width: 560px; color: var(--text-1); font-size: 17px; text-shadow: 0 1px 8px #000; }

/* ---------- Controls: button*.png (9-slice 18 / 34, 46 px tall) ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 44px;
  padding: 0 4px;
  overflow: hidden;
  border: solid transparent;
  border-width: 16px 30px;
  border-image: var(--ui-button) 16 30 fill / 16px 30px stretch;
  background: none;
  color: #d5dce5;
  font: 600 13px var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms var(--ease), translate 180ms var(--spring), scale 120ms var(--ease), filter 200ms var(--ease);
}
.btn::before {
  /* a sheen that crosses the face on hover */
  content: '';
  position: absolute;
  inset: -20px -40px;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
  translate: -120% 0;
  pointer-events: none;
}
.btn:hover::before { translate: 120% 0; transition: translate 700ms var(--ease); }
.btn:hover { border-image-source: var(--ui-button-hover); color: #fff; text-shadow: var(--glow); translate: 0 -1px; filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb), 0.35)); }
.btn:active { border-image-source: var(--ui-button-down); translate: 0 1px; scale: 0.98; filter: none; }
.btn:focus-visible { outline: 1px solid var(--accent-hot); outline-offset: 3px; }
.btn-primary, .btn-play, .btn-accent { border-image-source: var(--ui-button-accent); color: #fff; }
.btn-primary:hover, .btn-play:hover, .btn-accent:hover { border-image-source: var(--ui-button-accent-hover); }
.btn-play { animation: beckon 2.6s ease-in-out infinite; }
@keyframes beckon { 50% { filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.55)); } }
.btn-ghost { opacity: 0.75; }
.btn-lg { min-width: 220px; font-size: 14px; }
.btn-sm { min-width: 100px; }
.play-runes, .play-fx { display: none; }
/* arcane's call-to-action buttons: the VIP buy button's metal in the accent colour (no engraving: that is the VIP
   buttons' own, kept on the VIP page's claim), a light running round its edge, a sheen across it now and then. Play now
   also burns: runes running above and below it, sparks rising off it, its glow flickering like the emblem's */
[data-skin='arcane'] :is(.btn-primary, .btn-play, .btn-accent) { --metal: var(--accent); isolation: isolate; height: auto; min-height: 44px; padding: 11px 28px; border: 0; border-image: none; border-radius: 10px;
  /* white words on the metal, dark only on a light one (yellow), each with the shadow that lifts it */
  color: oklch(from var(--metal) clamp(0.14, (0.72 - l) * 100, 1) 0 0); text-shadow: 0 1px 2px oklch(from var(--metal) clamp(0, (l - 0.72) * 100, 1) 0 0 / 0.6);
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 255, 255, 0.3), transparent 70%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, color-mix(in srgb, var(--metal) 60%, #fff) 0%, var(--metal) 34%, color-mix(in srgb, var(--metal) 48%, #000) 54%, color-mix(in srgb, var(--metal) 85%, #000) 76%, color-mix(in srgb, var(--metal) 80%, #fff) 100%);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--metal) 35%, #fff), inset 0 -2px 0 rgba(0, 0, 0, 0.3), 0 8px 22px -10px var(--metal); }
[data-skin='arcane'] :is(.btn-primary, .btn-play, .btn-accent)::before { inset: 0; z-index: 2; padding: 2px; border-radius: inherit; translate: none;
  background: conic-gradient(from var(--vip-a), transparent 0 30%, color-mix(in srgb, var(--metal) 60%, #fff) 42%, #fff 46%, color-mix(in srgb, var(--metal) 60%, #fff) 50%, transparent 62% 80%, #fff 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: vip-run 3.6s linear infinite; }
[data-skin='arcane'] :is(.btn-primary, .btn-play, .btn-accent)::after { content: ''; position: absolute; inset: 3px; z-index: -1; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%) -150% 0 / 250% 100% no-repeat; animation: vip-shine 4.6s ease-in-out infinite; pointer-events: none; }
[data-skin='arcane'] .vip-claim { color: color-mix(in srgb, var(--metal) 14%, #000); text-shadow: 0 1px 0 color-mix(in srgb, var(--metal) 40%, #fff), 0 -1px 0 rgba(0, 0, 0, 0.25); }
[data-skin='arcane'] .vip-claim::after { border: 7px solid transparent; border-image: url('../img/vip/engrave.svg') 12 round; background-clip: padding-box; box-shadow: none; }
[data-skin='arcane'] :is(.btn-primary, .btn-play, .btn-accent):hover::before { translate: none; }
[data-skin='arcane'] .btn-sm:is(.btn-primary, .btn-play, .btn-accent) { min-height: 34px; padding: 7px 18px; }
[data-skin='arcane'] :is(.btn-primary, .btn-play, .btn-accent):hover { filter: brightness(1.12) drop-shadow(0 0 14px var(--accent)); }
[data-skin='arcane'] .btn-play { overflow: visible; min-height: 50px; padding: 15px 30px; font-weight: 800; animation: play-flicker 3.4s ease-in-out infinite; }
@keyframes play-flicker { 0%, 100% { filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.55)); } 30% { filter: drop-shadow(0 0 18px var(--accent)) brightness(1.08); } 34% { filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.7)); } 38% { filter: drop-shadow(0 0 20px var(--accent)) brightness(1.1); } 70% { filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.75)); } }
[data-skin='arcane'] .play-word { position: relative; z-index: 3; }
/* the runes run round inside the rim, the top row one way and the bottom the other, lit on the metal */
[data-skin='arcane'] .play-runes { position: absolute; inset: 5px 14px; z-index: -2; display: block; pointer-events: none;
  background: linear-gradient(color-mix(in srgb, var(--accent-hot) 35%, #fff) 0 0) top / 100% 7px no-repeat, linear-gradient(color-mix(in srgb, var(--accent-hot) 35%, #fff) 0 0) bottom / 100% 7px no-repeat;
  -webkit-mask: var(--ui-runes) 0 0 / auto 7px repeat-x, var(--ui-runes) 0 100% / auto 7px repeat-x; mask: var(--ui-runes) 0 0 / auto 7px repeat-x, var(--ui-runes) 0 100% / auto 7px repeat-x;
  opacity: 0.8; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px var(--accent)); animation: play-runes 9s linear infinite; }
/* and down the sides between them (the strip turned upright), so the ring goes round: up the right, down the left */
[data-skin='arcane'] .play-runes::before, [data-skin='arcane'] .play-runes::after { content: ''; position: absolute; top: 9px; bottom: 9px; left: -9px; width: 7px;
  background: color-mix(in srgb, var(--accent-hot) 35%, #fff); -webkit-mask: url('../img/ui/arcane/runes_v.webp') 0 0 / 7px auto repeat-y; mask: url('../img/ui/arcane/runes_v.webp') 0 0 / 7px auto repeat-y;
  animation: play-runes-down 9s linear infinite; }
[data-skin='arcane'] .play-runes::after { right: -9px; left: auto; animation-name: play-runes-up; }
[data-skin='arcane'] .btn-sm .play-runes { inset: 4px 10px; }
[data-skin='arcane'] .btn-sm .play-runes::before, [data-skin='arcane'] .btn-sm .play-runes::after { top: 8px; bottom: 8px; left: -6px; }
[data-skin='arcane'] .btn-sm .play-runes::after { right: -6px; left: auto; }
/* a tile of the 7 px strip is 56 px long: each row moves one tile a loop, so the loop never jumps */
@keyframes play-runes { to { -webkit-mask-position: -56px 0, 56px 100%; mask-position: -56px 0, 56px 100%; } }
@keyframes play-runes-down { to { -webkit-mask-position: 0 56px; mask-position: 0 56px; } }
@keyframes play-runes-up { to { -webkit-mask-position: 0 -56px; mask-position: 0 -56px; } }
[data-skin='arcane'] .play-fx { display: block; inset: -34px -16px -6px; width: calc(100% + 32px); height: calc(100% + 40px); z-index: 4; }
/* arcane's other buttons: forged dark iron with an ember rim in the accent, which lights on hover with a glow rising
   from below; a ghost one is the bare outline, a tab the lit rim when it is the one shown */
[data-skin='arcane'] .btn:not(.btn-primary, .btn-play, .btn-accent) { height: auto; min-height: 42px; padding: 10px 24px; border: 0; border-image: none; border-radius: 10px; color: #d9dee6; text-shadow: 0 1px 1px #000;
  background: radial-gradient(ellipse 90% 80% at 50% 135%, rgba(var(--accent-rgb), 0.28), transparent 70%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2b2d34 0%, #17181d 48%, #0e0f13 52%, #15161a 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -3px 8px rgba(0, 0, 0, 0.55), 0 6px 16px -8px #000;
  transition: color 150ms var(--ease), translate 180ms var(--spring), scale 120ms var(--ease), box-shadow 220ms var(--ease); }
[data-skin='arcane'] .btn-sm:not(.btn-primary, .btn-play, .btn-accent) { min-height: 34px; padding: 7px 16px; }
[data-skin='arcane'] .btn:not(.btn-primary, .btn-play, .btn-accent):hover { color: #fff; text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.9), 0 1px 1px #000; filter: none;
  background: radial-gradient(ellipse 90% 90% at 50% 125%, rgba(var(--accent-rgb), 0.55), transparent 72%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #33353d 0%, #1b1c22 48%, #121317 52%, #19191e 100%);
  box-shadow: inset 0 0 0 1px var(--accent-hot), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -3px 8px rgba(0, 0, 0, 0.5), 0 0 16px -2px rgba(var(--accent-rgb), 0.55); }
[data-skin='arcane'] .btn:not(.btn-primary, .btn-play, .btn-accent):active { translate: 0 1px; scale: 0.98; box-shadow: inset 0 0 0 1px var(--accent-hot), inset 0 3px 8px rgba(0, 0, 0, 0.7); }
[data-skin='arcane'] .btn-ghost:not(.btn-primary, .btn-play, .btn-accent) { opacity: 1; color: var(--text-1); background: rgba(8, 8, 10, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13); }
[data-skin='arcane'] .btn-ghost:not(.btn-primary, .btn-play, .btn-accent):hover { color: #fff; background: rgba(var(--accent-rgb), 0.12); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.75), 0 0 14px -4px rgba(var(--accent-rgb), 0.6); }
[data-skin='arcane'] .btn.tab.is-active { color: #fff; box-shadow: inset 0 0 0 1px var(--accent-hot), inset 0 -10px 18px -8px rgba(var(--accent-rgb), 0.8), 0 0 14px -4px rgba(var(--accent-rgb), 0.6); }
.btn-block { width: 100%; }

.form { display: flex; flex-direction: column; gap: 14px; }
.form .btn { align-self: center; margin-top: 6px; }
.form .btn-block { align-self: stretch; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { color: var(--text-1); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; transition: color 150ms; }
.field:focus-within .field-label { color: var(--accent-hot); }
.input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #262b33;
  border-radius: 2px;
  background: linear-gradient(to bottom, #030304, #0a0b0d);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.85);
  color: #fff;
  font: 14px var(--font-ui);
  transition: border-color 150ms var(--ease), box-shadow 200ms var(--ease);
}
.input:hover { border-color: #3a414c; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 12px rgba(var(--accent-rgb), 0.35); }
textarea.input { min-height: 180px; resize: vertical; }
select.input option { background: #0a0b0d; }

.flash { margin: 0 0 16px; padding: 10px 14px; border-left: 2px solid #4a9d6e; background: rgba(4, 5, 6, 0.9); color: var(--ok-text); animation: reveal 400ms var(--ease); }
.flash-error { border-left-color: var(--accent); color: var(--danger-text); }
.main > .wrap > .flash { margin-top: 20px; }

.tag { --tag: #7a8494; display: inline-block; padding: 1px 8px; border: 1px solid var(--tag); background: color-mix(in srgb, var(--tag) 12%, transparent); color: color-mix(in srgb, var(--tag) 55%, #fff); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }

.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 20px; }
.tab.is-active { border-image-source: var(--ui-button-accent); color: #fff; }

.row-actions { margin: 0 0 12px; text-align: center; }

/* ---------- Skeletons: a sweep of light until the image has loaded ---------- */

.skel { position: relative; }
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.02) 30%, rgba(var(--accent-rgb), 0.12) 50%, rgba(255, 255, 255, 0.02) 70%) 0 0 / 300% 100%, rgba(18, 20, 25, 0.9);
  animation: shimmer 1.4s linear infinite;
  transition: opacity 400ms var(--ease);
  pointer-events: none;
}
.skel.is-loaded::after { opacity: 0; animation: none; }
@keyframes shimmer { from { background-position: 100% 0, 0 0; } to { background-position: -100% 0, 0 0; } }
img.fade { opacity: 0; transition: opacity 500ms var(--ease); }
img.fade.is-loaded { opacity: 1; }

/* ---------- Home: hero carousel, thumbnails, content grid ---------- */

/* clip, not hidden: the turning ring and the zooming art must never widen the page on a phone */
.hero { position: relative; height: clamp(500px, 72vh, 720px); overflow: clip; contain: paint; }
/* Admin > Hero (kernel/hero.php): its height, where each slide's words sit, how dark the art goes, the crest */
.hero.is-short { height: clamp(360px, 48vh, 500px); }
.hero.is-medium { height: clamp(440px, 60vh, 620px); }
.hero.is-full { height: max(560px, 100svh); }
.slide:has(.slide-art)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, calc(var(--hero-dim, 0.3) + 0.15)), rgba(0, 0, 0, var(--hero-dim, 0.3))); pointer-events: none; }
.slide.is-right:has(.slide-art)::after { background: linear-gradient(to left, rgba(0, 0, 0, calc(var(--hero-dim, 0.3) + 0.15)), rgba(0, 0, 0, var(--hero-dim, 0.3))); }
.slide.is-center:has(.slide-art)::after { background: rgba(0, 0, 0, var(--hero-dim, 0.3)); }
.slide.is-right .slide-text { margin-left: auto; text-align: right; }
.slide.is-right .slide-actions { justify-content: flex-end; }
.slide.is-right .slide-art { background-position: center left; -webkit-mask-image: linear-gradient(to left, transparent 10%, #000 55%); mask-image: linear-gradient(to left, transparent 10%, #000 55%); }
.slide.is-center:not(.slide-welcome) .slide-text { margin: 0 auto; text-align: center; }
.slide.is-center:not(.slide-welcome) .slide-actions { justify-content: center; }
.slide.is-center .slide-art { background-position: center; -webkit-mask-image: none; mask-image: none; }
.slide-welcome.is-left .slide-body, .slide-welcome.is-left .slide-text { align-items: flex-start; text-align: left; }
.slide-welcome.is-right .slide-body, .slide-welcome.is-right .slide-text { align-items: flex-end; text-align: right; }
.slide-welcome:is(.is-left, .is-right) .slide-actions { justify-content: inherit; }
.slide-welcome.is-left .slide-actions { justify-content: flex-start; }
.slide-welcome.is-right .slide-actions { justify-content: flex-end; }
.slide-video { width: 100%; height: 100%; object-fit: cover; }
.slide-embed { overflow: hidden; pointer-events: none; }
.slide-embed iframe { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78vh); height: max(100%, 56.25vw); border: 0; translate: -50% -50%; }
.slide-tagline { display: inline-block; padding: 4px 12px; border: 1px solid rgba(var(--accent-rgb), 0.6); border-radius: 99px; background: rgba(0, 0, 0, 0.45); color: var(--accent-hot); font: 600 12px var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; }
.crest.is-bare::before { display: none; }
/* a lower hero gets a smaller crest, so the words and buttons under it stay inside */
.hero.is-medium { --crest: clamp(200px, 28vh, 300px); }
.hero.is-short { --crest: clamp(150px, 20vh, 210px); }
.hero:is(.is-medium, .is-short) .crest { width: var(--crest); }
.hero:is(.is-medium, .is-short) .hero-logo { --logo-h: calc(var(--crest) * 0.62); }
.hero.is-short .slide-body { padding-top: 70px; }
.hero.is-short .slide-title { font-size: clamp(26px, 3.4vw, 42px); }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.slide {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 800ms var(--ease), visibility 0s 800ms;
}
.slide.is-on { opacity: 1; visibility: visible; transition: opacity 800ms var(--ease); }
.slide-body { padding-top: 96px; }
.slide-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  -webkit-mask-image: linear-gradient(to right, transparent 10%, #000 55%);
  mask-image: linear-gradient(to right, transparent 10%, #000 55%);
  scale: 1.06;
  transition: scale 8s linear;
}
.slide.is-on .slide-art { scale: 1; }
.slide-body { position: relative; z-index: 1; }
.slide-text { max-width: 640px; }
.slide-kicker { margin-bottom: 14px; }
.slide-title { margin: 0 0 14px; font: 600 clamp(30px, 4.6vw, 58px)/1.05 var(--font-display); letter-spacing: 0.01em; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.95); }
.slide-sub { margin: 0 0 26px; color: #c9d0d9; font-size: clamp(16px, 1.6vw, 21px); text-shadow: 0 1px 10px #000; }
.slide-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.slide.is-on .slide-text > * { animation: rise 800ms var(--ease) backwards; }
.slide.is-on .slide-text > :nth-child(2) { animation-delay: 90ms; }
.slide.is-on .slide-text > :nth-child(3) { animation-delay: 180ms; }
.slide.is-on .slide-text > :nth-child(4) { animation-delay: 270ms; }
@keyframes rise { from { opacity: 0; translate: 0 22px; } }

/* The server's own slide: the lit logo inside the turning rune ring, everything centred */
.slide-welcome .slide-body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.slide-welcome .slide-text { display: flex; flex-direction: column; align-items: center; max-width: 760px; }
.slide-welcome .slide-actions { justify-content: center; }
.slide-welcome .slide-title { margin-top: -18px; }
.crest { position: relative; contain: paint; display: grid; place-items: center; width: clamp(260px, 42vh, 420px); aspect-ratio: 1; margin-top: -10px; }
.crest-ring { position: absolute; inset: 0; background: var(--ui-ring-glow) center / contain no-repeat, var(--ui-ring) center / contain no-repeat; animation: turn 90s linear infinite; }
.crest-ring.is-back { inset: 12%; opacity: 0.45; scale: -1 1; animation-duration: 140s; animation-direction: reverse; filter: blur(0.5px); }
.crest::before { content: ''; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.28), transparent 70%); animation: pulse 4s ease-in-out infinite; }
@keyframes turn { to { rotate: 360deg; } }
@keyframes pulse { 50% { opacity: 0.45; scale: 0.92; } }
.hero-logo { --logo-h: calc(clamp(260px, 42vh, 420px) * 0.62); position: relative; z-index: 1; height: var(--logo-h); aspect-ratio: 680 / 522; }
.hero-logo > img { width: 100%; height: 100%; object-fit: contain; }
.hero-logo .ws-page { position: relative; inset: auto; height: 100%; overflow: visible; background: none; isolation: auto; }
.hero-logo .ws-page::after { display: none; }
.hero-logo .ws-logo { margin: 0; }

.hero-count {
  position: absolute;
  right: max(20px, calc((100vw - 1200px) / 2 + 20px));
  bottom: 22px;
  z-index: 3;
  padding: 4px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--text-1);
  font: 600 13px var(--font-display);
}
.hero-count b { display: inline-block; color: #fff; font-size: 20px; animation: tick 400ms var(--spring); }
@keyframes tick { from { translate: 0 -8px; opacity: 0; } }

.thumbs { position: relative; z-index: 2; background: rgba(3, 3, 4, 0.9); border-top: 1px solid var(--line); border-bottom: 1px solid rgba(var(--accent-rgb), 0.4); box-shadow: 0 1px 16px rgba(var(--accent-rgb), 0.18); }
.thumbs-row { display: flex; align-items: center; gap: 12px; height: 104px; }
.thumbs-list { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 6px; height: 100%; overflow: hidden; }
.thumb {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 0;
  overflow: hidden;
  background: linear-gradient(to right, rgba(16, 18, 22, 0.95), rgba(8, 9, 11, 0.6));
  color: var(--text-1);
  font: 500 14px/1.3 var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: background 300ms var(--ease), color 250ms var(--ease);
}
.thumb img { position: absolute; right: 0; top: 0; height: 100%; width: 45%; object-fit: cover; opacity: 0.5; -webkit-mask-image: linear-gradient(to right, transparent, #000); mask-image: linear-gradient(to right, transparent, #000); transition: opacity 300ms, scale 600ms var(--ease); }
.thumb:hover img { opacity: 0.8; scale: 1.06; }
.thumb span { position: relative; max-width: 70%; transition: translate 300ms var(--ease); }
.thumb:hover { color: #fff; }
.thumb:hover span { translate: 4px 0; }
.thumb.is-on { background: linear-gradient(to right, rgba(var(--accent-rgb), 0.55), rgba(var(--accent-rgb), 0.08)); color: #fff; }
.thumb.is-on::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent-hot); box-shadow: var(--glow); transform-origin: left; animation: autoplay var(--autoplay, 7s) linear; }
.thumbs.is-still .thumb.is-on::after { animation: none; }
.is-paused .thumb.is-on::after { animation-play-state: paused; }
@keyframes autoplay { from { transform: scaleX(0); } }
.thumb-arrow { flex: none; width: 56px; height: 56px; border: 0; background: var(--ui-arrow) center / contain no-repeat; cursor: pointer; transition: scale 250ms var(--spring); }
.thumb-arrow:hover { background-image: var(--ui-arrow-hover); scale: 1.1; }
.thumb-arrow:active { scale: 0.92; }
.thumb-arrow.is-prev { transform: scaleX(-1); }

/* The hero's designs (kernel/hero.php HERO_STYLES: Admin > Hero > Design, or the skin's own). Strip is the full width
   carousel over its strip of thumbnails above; the others: a rail of titles down the right, a pager of numerals, story
   bars, a showcase beside a column of the others, a rounded panel with dots. Each moves through the slides with the
   same buttons ([data-go], [data-prev], [data-next]); the slide shown runs a line along its button while autoplay runs. */
.hero-wrap { position: relative; }
@keyframes hero-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* a skin's drawn autoplay line (kernel/blocks.php hero(), css/hero_art.css); none unless a skin shows it */
.hero-grow { display: none; }
.hero-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer;
  transition: background 200ms var(--ease), scale 200ms var(--spring); }
.hero-arrow::before { content: ''; width: 10px; height: 10px; border: solid currentColor; border-width: 0 0 2px 2px; rotate: 45deg; translate: 2px 0; }
.hero-arrow.is-next::before { rotate: -135deg; translate: -2px 0; }
.hero-arrow:hover { background: var(--accent); scale: 1.08; }
.hero-arrow.is-side { position: absolute; top: 50%; z-index: 4; translate: 0 -50%; opacity: 0; transition: opacity 250ms var(--ease), background 200ms, scale 200ms var(--spring); }
.hero:hover .hero-arrow.is-side, .hero-arrow.is-side:focus-visible { opacity: 1; }
.hero-arrow.is-side.is-prev { left: 18px; }
.hero-arrow.is-side.is-next { right: 18px; }

/* rail: the slides listed down the right, numbered, the one shown lit with its line running */
.hero-rail { position: absolute; top: 50%; right: max(20px, calc((100% - 1200px) / 2 + 20px)); z-index: 4; display: grid; gap: 6px; width: min(300px, 30vw); padding-top: 60px; translate: 0 -50%; }
.hero-style-rail .slide-body { padding-right: min(340px, 33vw); }
.hero-rail-item { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; padding: 11px 14px; overflow: hidden; border: 0; border-radius: 8px;
  background: rgba(0, 0, 0, 0.42); color: var(--text-1); font: 500 14px/1.25 var(--font-ui); text-align: left; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 250ms var(--ease), color 200ms, translate 250ms var(--ease); }
.hero-rail-item i { color: var(--accent-hot); font: 700 12px var(--font-mono, monospace); font-style: normal; letter-spacing: 0.06em; }
.hero-rail-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-rail-item:hover { color: #fff; translate: -4px 0; }
.hero-rail-item.is-on { background: rgba(var(--accent-rgb), 0.28); color: #fff; }
.hero-rail-item.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent-hot); transform-origin: left; animation: hero-fill var(--autoplay) linear; }

/* pager: numerals between two arrows, at the foot of the slide */
.hero-pager { position: absolute; bottom: 24px; left: 50%; z-index: 4; display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 99px; translate: -50% 0;
  background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-pager .hero-arrow { width: 34px; height: 34px; background: none; }
.hero-pager .hero-arrow:hover { background: rgba(255, 255, 255, 0.12); }
.hero-page { position: relative; min-width: 36px; height: 34px; padding: 0 8px; overflow: hidden; border: 0; border-radius: 99px; background: none; color: rgba(255, 255, 255, 0.65);
  font: 600 15px/1 var(--font-display); letter-spacing: 0.04em; cursor: pointer; transition: color 200ms, background 250ms var(--ease); }
.hero-page:hover { color: #fff; }
.hero-page.is-on { background: rgba(var(--accent-rgb), 0.35); color: #fff; }
.hero-page.is-on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 5px; height: 2px; background: var(--accent-hot); transform-origin: left; animation: hero-fill var(--autoplay) linear; }
[data-skin='parchment'] .hero-pager { background: rgba(246, 236, 212, 0.94); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(58, 36, 18, 0.35); }
[data-skin='parchment'] .hero-pager :is(.hero-page, .hero-arrow) { color: #4a3018; }
[data-skin='parchment'] .hero-page { font-family: Georgia, 'Times New Roman', serif; }
[data-skin='parchment'] .hero-page.is-on { background: rgba(58, 36, 18, 0.12); color: #2b1a0b; }
[data-skin='parchment'] .hero-pager .hero-arrow:hover { background: rgba(58, 36, 18, 0.1); }

/* stories: a bar for each slide along the foot; those shown are full, the one showing fills */
.hero-stories { position: absolute; bottom: 22px; left: 50%; z-index: 4; display: flex; gap: 6px; width: min(1160px, calc(100% - 40px)); translate: -50% 0; }
.hero-story { flex: 1; padding: 8px 0; border: 0; background: none; cursor: pointer; }
.hero-story i { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, 0.25); }
.hero-story i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero-story:has(~ .hero-story.is-on) i::after { transform: scaleX(1); }
.hero-story.is-on i::after { animation: hero-fill var(--autoplay) linear forwards; }
.hero-story:hover i { background: rgba(255, 255, 255, 0.4); }

/* boxed designs (showcase, panel) sit inside the page under the bar, in a lower frame with a smaller crest */
.hero-wrap.wrap { padding-top: 112px; }
.hero-wrap.wrap .hero { --crest: clamp(150px, 22vh, 220px); background: rgba(0, 0, 0, 0.3); }
.hero-wrap.wrap .crest { width: var(--crest); }
.hero-wrap.wrap .hero-logo { --logo-h: calc(var(--crest) * 0.62); }
.hero-wrap.wrap .slide-body { padding-top: 0; padding-inline: 36px; }
.hero-wrap.wrap .slide-title { font-size: clamp(26px, 3.4vw, 44px); }

/* panel: a rounded frame inside the page, its arrows on its sides, dots under it */
.hero-style-panel .hero { height: clamp(380px, 56vh, 520px); border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.hero-style-panel .hero.is-short { height: clamp(320px, 44vh, 420px); }
.hero-style-panel .hero.is-full { height: min(720px, calc(100svh - 160px)); }
.hero-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.hero-dot { position: relative; width: 10px; height: 10px; padding: 0; overflow: hidden; border: 0; border-radius: 99px; background: rgba(255, 255, 255, 0.25); cursor: pointer;
  transition: width 350ms var(--ease), background 250ms; }
.hero-dot:hover { background: rgba(255, 255, 255, 0.5); }
.hero-dot.is-on { width: 38px; background: rgba(var(--accent-rgb), 0.35); }
.hero-dot.is-on::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: left; animation: hero-fill var(--autoplay) linear forwards; }

/* showcase: the slide large beside a column of the others; big chevrons outside it */
.hero-showcase { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 290px; box-shadow: 0 0 26px rgba(0, 0, 0, 0.6); }
.hero-style-showcase .hero { height: clamp(360px, 50vh, 460px); border-radius: 6px 0 0 6px; }
.hero-aside { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 6px; max-height: clamp(360px, 50vh, 460px); padding: 10px; overflow: hidden; border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, rgba(36, 52, 70, 0.95), rgba(14, 20, 28, 0.97)); }
.hero-pick { position: relative; display: flex; align-items: flex-end; min-height: 56px; padding: 8px 10px; overflow: hidden; border: 0; border-radius: 3px; background: #0e141b; color: var(--text-1);
  font: 600 13px/1.25 var(--font-ui); text-align: left; cursor: pointer; opacity: 0.72; transition: opacity 200ms, box-shadow 200ms; }
.hero-pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.hero-pick span { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 4px #000; }
.hero-pick:hover { opacity: 1; }
.hero-pick.is-on { opacity: 1; box-shadow: inset 0 0 0 2px var(--accent-hot); color: #fff; }
.hero-pick.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent-hot); transform-origin: left; animation: hero-fill var(--autoplay) linear; }
.hero-arrow.is-out { position: absolute; top: 50%; z-index: 4; width: 46px; height: 90px; border-radius: 4px; background: none; translate: 0 -50%; }
.hero-arrow.is-out::before { width: 22px; height: 22px; border-width: 0 0 3px 3px; }
.hero-arrow.is-out:hover { background: rgba(255, 255, 255, 0.08); }
.hero-arrow.is-out.is-prev { left: -60px; }
.hero-arrow.is-out.is-next { right: -60px; }

/* autoplay off: the lines stand still; hovered: they wait */
.hero-wrap.is-still :is(.hero-rail-item, .hero-page, .hero-pick, .hero-dot).is-on::after, .hero-wrap.is-still .hero-story.is-on i::after { animation: none; transform: none; }
.is-paused :is(.hero-rail-item, .hero-page, .hero-pick, .hero-dot).is-on::after, .is-paused .hero-story.is-on i::after { animation-play-state: paused; }
@media (max-width: 1340px) { .hero-arrow.is-out { display: none; } }
@media (max-width: 760px) {
  .hero-rail { top: auto; right: 12px; bottom: 12px; left: 12px; display: flex; width: auto; padding: 0; translate: none; }
  .hero-rail-item { flex: 1; grid-template-columns: 1fr; justify-items: center; padding: 8px 4px; }
  .hero-rail-item span { display: none; }
  .hero-style-rail .slide-body { padding-right: 20px; }
  .hero-wrap.wrap { padding-top: 84px; }
  .hero-showcase { grid-template-columns: 1fr; }
  .hero-style-showcase .hero { border-radius: 6px 6px 0 0; }
  .hero-aside { grid-auto-flow: column; grid-auto-columns: 42%; grid-auto-rows: auto; overflow-x: auto; border-radius: 0 0 6px 6px; }
  .hero-wrap.wrap .slide-body { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) { :is(.hero-rail-item, .hero-page, .hero-pick, .hero-dot).is-on::after, .hero-story.is-on i::after { animation: none; transform: none; } }

/* The admin's layout (kernel/blocks.php): rows on a grid of twelfths, columns of blocks; one page scrolls to them. */
.home-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 26px; margin-top: 48px; }
/* a row of blocks placed as the hero (kernel/blocks.php home_rows): edge to edge, under the hero or in its place */
.home-bleed { display: grid; gap: 26px; margin-top: 48px; }
/* first on the page it takes the hero's place under the bar; right after the hero it follows it with no gap */
.home-bleed:first-child, .floor-edge + .home-bleed { margin-top: 0; }
.home-col { display: grid; grid-column: span var(--span); gap: 26px; align-content: start; min-width: 0; }
.home-col:nth-child(2) .reveal { animation-delay: 120ms; }
.home-col:nth-child(3) .reveal { animation-delay: 240ms; }
.home-block { min-width: 0; scroll-margin-top: 110px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.news-list { margin: 0; padding: 0; list-style: none; }
.news-row { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--line); transition: background 200ms var(--ease); }
.news-row:hover { background: linear-gradient(to right, rgba(var(--accent-rgb), 0.08), transparent); }
.news-row:last-child { border-bottom: 0; }
.news-row .tag { justify-self: start; }
.news-title { overflow: hidden; color: var(--text-0); text-overflow: ellipsis; white-space: nowrap; transition: translate 250ms var(--ease), color 150ms; }
.news-row:hover .news-title { color: #fff; translate: 4px 0; text-shadow: var(--glow); }
.news-date { grid-column: -2; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
/* a post's comment count, a small speech bubble */
.news-said { position: relative; padding: 1px 7px; border: 1px solid var(--line); border-radius: 8px 8px 8px 2px; color: var(--text-1); font-size: 11px; font-variant-numeric: tabular-nums; }
.news-said:hover { border-color: var(--accent); color: #fff; }
/* the landing's other news looks (news widget.php): a compact list, rows with the picture beside, cards, picture tiles,
   the newest big beside the rest; a post without a picture shows its category's colour */
.w-news .news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.w-news .news-meta .news-date { grid-column: auto; }
.w-news :is(.news-item, .news-card, .news-tile, .news-lead) { color: inherit; }
.w-news :is(.news-item, .news-card, .news-tile, .news-lead) .news-title { display: block; overflow: visible; color: var(--text-0); font: 600 15px/1.35 var(--font-display); white-space: normal; text-wrap: balance; }
.w-news :is(.news-item, .news-card, .news-tile, .news-lead):hover .news-title { color: #fff; text-shadow: var(--glow); translate: none; }
.news-summary { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text-2); font-size: 13px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.news-body { display: grid; align-content: start; gap: 6px; min-width: 0; }
:is(.news-cover, .news-thumb) { display: block; width: 100%; object-fit: cover; background: #0b0d12; transition: scale 600ms var(--ease), filter 300ms; }
:is(.news-cover, .news-thumb).is-blank { position: relative; background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--tag) 45%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--tag) 22%, #0b0d12), #07080b); }
/* the server's logo, faint, on a post without a picture */
:is(.news-cover, .news-thumb).is-blank::before { content: ''; position: absolute; inset: 18%; background: var(--logo) center / contain no-repeat; opacity: 0.3; filter: grayscale(0.4) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)); }
.news-tile .news-cover.is-blank { position: absolute; }
.news-compact { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.news-compact li { display: flex; align-items: center; gap: 12px; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.news-compact li:last-child { border-bottom: 0; }
.news-compact a { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; color: var(--text-0); }
.news-compact a:hover { color: #fff; text-shadow: var(--glow); }
.news-compact .news-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tag); box-shadow: 0 0 8px var(--tag); }
.news-rows { display: grid; gap: 4px; }
.news-item { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: center; gap: 16px; padding: 8px; border-bottom: 1px solid var(--line); transition: background 200ms var(--ease); }
.news-item:last-child { border-bottom: 0; }
.news-item:hover { background: linear-gradient(to right, rgba(var(--accent-rgb), 0.08), transparent); }
.news-thumb { aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); }
.news-item:hover .news-thumb { filter: brightness(1.12); }
.news-rows.is-small .news-item { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 6px; }
.news-rows.is-small .news-title { font-size: 13.5px; }
.news-cards { display: grid; grid-template-columns: repeat(var(--news-cols, auto-fill), minmax(min(100%, 220px), 1fr)); gap: 16px; }
.news-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.22); transition: border-color 250ms, translate 350ms var(--spring), box-shadow 350ms; }
.news-card:hover { border-color: rgba(var(--accent-rgb), 0.55); box-shadow: 0 14px 30px -18px rgba(var(--accent-rgb), 0.6); translate: 0 -3px; }
.news-card .news-cover { aspect-ratio: 16 / 9; }
.news-card .news-body { padding: 12px 14px 14px; }
.news-card:hover .news-cover, .news-tile:hover .news-cover, .news-lead:hover .news-cover { scale: 1.04; }
.news-tiles { display: grid; grid-template-columns: repeat(var(--news-cols, auto-fill), minmax(min(100%, 200px), 1fr)); grid-auto-rows: 170px; gap: 10px; }
.news-tile { position: relative; display: grid; align-content: end; overflow: hidden; border: 1px solid var(--line); isolation: isolate; }
.news-tile .news-cover { position: absolute; inset: 0; z-index: -2; height: 100%; }
.news-tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4, 5, 8, 0.94) 10%, rgba(4, 5, 8, 0.35) 55%, transparent); }
.news-tile .news-body { padding: 12px 14px; }
.news-tile .news-summary { color: rgba(255, 255, 255, 0.75); }
.news-tile .news-date { color: rgba(255, 255, 255, 0.7); }
.news-tile.is-first { grid-column: span 2; grid-row: span 2; }
.news-tile.is-first .news-title { font-size: 20px; }
.news-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.news-lead { position: relative; display: grid; overflow: hidden; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.22); }
.news-lead .news-cover { aspect-ratio: 16 / 9; }
.news-lead .news-body { padding: 14px 16px 16px; }
.news-lead .news-title { font-size: 20px; }
.news-lead .news-summary { -webkit-line-clamp: 3; }
@media (max-width: 700px) {
  .news-feature { grid-template-columns: minmax(0, 1fr); }
  .news-item { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .news-tile.is-first { grid-column: auto; grid-row: span 1; }
  .news-cards, .news-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* comments under a post: each names its character; the form writes as one of yours */
.comments { margin-top: 28px; }
.comments-title { margin: 0 0 10px; color: var(--text-0); font: 600 13px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.comment { padding: 12px 2px; border-bottom: 1px solid var(--line); }
.comment-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.comment-author { color: var(--accent-hot); font-weight: 600; }
.comment-time { color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.comment-delete { margin: 0 0 0 auto; }
.comment-delete .link { padding: 0; border: 0; background: none; color: var(--text-2); font-size: 12px; cursor: pointer; }
.comment-delete .link:hover { color: var(--danger-text); }
.comment-body { color: var(--text-1); line-height: 1.6; }
.comment-body p { margin: 0 0 6px; }
.comment-form { display: grid; gap: 10px; margin-top: 16px; }
.comment-as { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 13px; }
.comment-as .input { width: auto; }
.comment-send { display: flex; justify-content: flex-end; }
.said-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.said-post { color: var(--text-0); font-weight: 600; }
.said-post:hover { color: #fff; text-shadow: var(--glow); }
.said-body { margin: 2px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.said-body b { color: var(--accent-hot); font-weight: 600; }

.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--text-2); font-size: 13px; }
.post-media { width: 100%; aspect-ratio: 16 / 7; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); }
.post-media img { width: 100%; height: 100%; object-fit: cover; }
.post-body { color: #cfd5dd; font-size: 15px; line-height: 1.75; }

.rank-pane[hidden] { display: none; }
.rank-pane { animation: reveal 400ms var(--ease); }
/* avatars (kernel/profile.php): a picture or an initial on a disc in the class's colour, the guild's mark on its
   corner with a shadow under it so it reads on any picture */
.avatar { --size: 40px; --hue: 220; position: relative; flex: none; display: inline-grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%; background: radial-gradient(circle at 32% 28%, hsl(var(--hue) 62% 50%), hsl(var(--hue) 55% 16%) 74%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.45); vertical-align: middle; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar img[hidden] { display: none; }
.avatar img:not([hidden]) ~ b { display: none; }
.avatar b { color: #fff; font: 700 calc(var(--size) * 0.44) / 1 var(--font-display); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.avatar-guild { position: absolute; top: -8%; right: -12%; width: 46%; aspect-ratio: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7)); }
.avatar-guild .guild-mark { display: block; width: 100%; height: 100%; }
.avatar-xs { --size: 18px; }
.avatar-xs .avatar-guild { display: none; }
.avatar-sm { --size: 26px; }
.avatar-md { --size: 42px; }
.avatar-lg { --size: 64px; }
.avatar-xl { --size: 96px; }
.avatar.is-dw { --hue: 216; }
.avatar.is-dk { --hue: 2; }
.avatar.is-elf { --hue: 135; }
.avatar.is-mg { --hue: 272; }
.avatar.is-dl { --hue: 42; }
.avatar.is-sum { --hue: 318; }
.avatar.is-rf { --hue: 22; }

/* painted names (kernel/profile.php): one colour, or a gradient still, flowing, shining or pulsing */
.paint.is-solid { color: var(--n1) !important; }
.paint:not(.is-solid) { background: linear-gradient(90deg, var(--n1), var(--n2), var(--n3), var(--n1)) 0 50% / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; text-shadow: none !important; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)); }
.paint:is(.is-still, .is-pulse) { background-image: linear-gradient(90deg, var(--n1), var(--n2), var(--n3)); background-size: 100% 100%; }
.paint.is-flow { animation: paint-flow 3.2s linear infinite; }
.paint.is-shine { background-image: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.95) 50%, transparent 62%), linear-gradient(90deg, var(--n1), var(--n2), var(--n3)); background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; animation: paint-shine 2.8s ease-in-out infinite; }
.paint.is-pulse { animation: paint-pulse 2.4s ease-in-out infinite; }
.char-link.paint:hover { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)) brightness(1.3); }
@keyframes paint-flow { to { background-position: 200% 50%; } }
@keyframes paint-shine { 0% { background-position: 130% 0, 0 0; } 60%, 100% { background-position: -30% 0, 0 0; } }
@keyframes paint-pulse { 50% { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 7px var(--n1)); } }
@media (prefers-reduced-motion: reduce) { .paint { animation: none !important; } }

/* VIP (modules/vip): a card per tier in its own colour, its perks, what it grants, its plans each with a price and
   the ways to pay; what the visitor holds above them */
.vip .lead { max-width: 640px; margin: 0 auto 18px; }
.vip-mine { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 18px; }
.vip-mine .role-badge { margin: 0; padding: 4px 12px; font-size: 12px; }
.vip-sub { display: flex; align-items: center; gap: 8px; color: var(--text-1); font-size: 13px; }
.vip-perks { color: var(--text-1); }
.vip-pay-what { text-align: center; }
.vip-status { margin: 12px 0; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); text-align: center; }
.vip-status.is-paid { background: rgba(80, 200, 120, 0.14); color: var(--ok-text); }
.vip-ref code { padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); font-size: 15px; letter-spacing: 0.1em; }
[data-skin='parchment'] :is(.vip-tier, .vip-plan, .vip-status) { background-color: rgba(74, 48, 22, 0.06); }

/* a character's page: its header slab holds who it is (avatar, painted name, description); comments below */
.h-title.char-head { height: auto; min-height: 76px; padding: 22px 0; justify-content: flex-start; gap: 22px; overflow: visible; white-space: normal;
  color: var(--text-1); font: inherit; letter-spacing: normal; text-transform: none; text-shadow: 0 1px 2px #000; }
:is([data-skin='arcane'], [data-skin='vine_live']) .h-title.char-head { --slab-h: 76px; height: auto; padding: 26px 0; }
/* its slab is never stretched for the height: the rims keep their size along the top and bottom, the plain middle
   tiles between them, and the end runes keep theirs, centred (the usual slab layers are not drawn here) */
.h-title.char-head { --slab-h: 52px; border-image-slice: 10 170 8 fill; border-image-width: 10px 0 8px; border-image-repeat: round; }
.h-title.char-head::before, .h-title.char-head::after { content: none; }
.slab-end { position: absolute; top: 50%; width: var(--plate); height: var(--slab-h); translate: 0 -50%; background: var(--ui-title-art-glow), var(--ui-title-art);
  background-size: auto 100%; background-repeat: no-repeat; pointer-events: none; }
.slab-end.is-l { left: calc(-1 * var(--plate)); background-position: 0 0; }
.slab-end.is-r { right: calc(-1 * var(--plate)); background-position: 100% 0; }
[data-skin='arcane'] .slab-end { animation: surge 3.2s ease-in-out infinite; }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .slab-end { display: none; }
.char-head .avatar { flex: none; }
.char-name-big .head-rune { width: 12px; height: 18px; margin-right: 12px; vertical-align: 1px; }
/* each stat its rune, by meaning (characters/lib.php, STAT_RUNES) */
.char-facts .has-rune { position: relative; padding-left: 24px; }
.stat-rune { position: absolute; left: 0; top: 3px; width: 13px; height: 20px; overflow: visible; fill: none; stroke: rgb(var(--accent-rgb)); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), 0.9)); }
[data-skin='arcane'] .stat-rune { stroke: var(--accent-hot); filter: drop-shadow(0 0 3px var(--accent)); }
.char-hello { display: flex; align-items: center; gap: 22px; margin: 0 0 18px; }
.char-hello-text { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.char-name-big { margin: 0; font: 700 26px var(--font-display); letter-spacing: 0.02em; }
.char-name-big .char-link:not(.paint) { color: var(--text-0); }
.char-bio { max-width: 640px; color: var(--text-1); }
.char-friend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.char-friend-as { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12px; }
.char-friend-as .input { width: auto; min-width: 120px; padding-block: 4px; }
.char-friend-state { color: var(--text-2); }
.char-friend-state.is-sent { color: #8fe0a8; }
.char-friend-state.is-failed { color: #f08a8a; }
.char-comments { margin-top: 10px; }
.char-comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.char-comments .comment-form { margin: 8px 0 18px; }
.profile-bio textarea { width: 100%; resize: vertical; }
@media (max-width: 560px) { .char-hello, .h-title.char-head { flex-direction: column; text-align: center; } .char-hello-text { justify-items: center; } }

/* Account > Your characters: each one's avatar and name, previewed as they change */
.profiles { margin-top: 28px; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 16px; }
.profile-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.03); }
.profile-show { display: flex; align-items: center; gap: 18px; }
.profile-who { display: grid; gap: 4px; min-width: 0; }
.profile-who .char-name { font: 700 22px var(--font-display); letter-spacing: 0.02em; }
.profile-who small { color: var(--text-2); }
.profile-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.profile-label { flex-basis: 100%; color: var(--text-2); font: 600 11px var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; }
.profile-row small { flex-basis: 100%; }
.profile-pick { position: relative; overflow: hidden; }
.profile-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.profile-colors { display: inline-flex; gap: 6px; }
.profile-colors input { width: 32px; height: 32px; padding: 0; border: 2px solid var(--line); border-radius: 50%; background: none; cursor: pointer; }
.profile-colors input::-webkit-color-swatch-wrapper { padding: 0; }
.profile-colors input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.profile-colors input::-moz-color-swatch { border: 0; border-radius: 50%; }
.profile-motion { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; }
.profile-motion .input { width: auto; padding: 6px 10px; }
.profile-card:has([name='paint'][value='plain']:checked) :is(.profile-colors, .profile-motion),
.profile-card:has([name='paint'][value='color']:checked) :is(.profile-motion, .profile-colors input:not(:first-child)) { display: none; }
.profile-card .row-end { display: flex; justify-content: flex-end; }
.seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border: 1px solid var(--line); border-radius: 99px; background: rgba(0, 0, 0, 0.2); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 5px 12px; border-radius: 99px; color: var(--text-1); font: 600 12px var(--font-ui); cursor: pointer; transition: background 200ms, color 200ms; }
.seg input:checked + span { background: rgba(var(--accent-rgb), 0.9); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
[data-skin='parchment'] :is(.profile-card, .seg) { background: rgba(74, 48, 22, 0.07); }

/* forum (modules/forum): one panel per page, laid out by the owner's style (reddit, discord or twitter; the same
   pieces in each). --surface lifts a box off the panel on every skin; on parchment it is ink on the paper. */
.forum-wrap { max-width: 1280px; }
.forum { --surface: rgba(255, 255, 255, 0.035); --surface-2: rgba(255, 255, 255, 0.07); --pop: #15161b; }
[data-skin='parchment'] .forum { --surface: rgba(74, 48, 22, 0.07); --surface-2: rgba(74, 48, 22, 0.13); --pop: #efe2c2; }
.forum-head { margin-bottom: 14px; }
.forum-head .row-actions { justify-content: center; }
.forum-crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0 0 6px; color: var(--text-2); font-size: 13px; }
.forum-crumbs a { color: var(--text-1); }
.forum-crumbs a:hover { color: var(--text-0); }
.forum-flag { padding: 1px 7px; border: 1px solid var(--line); color: var(--accent-hot); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.forum-login { margin: 12px 0; text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fi { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dot { flex: none; width: 3px; height: 3px; border-radius: 50%; background: var(--text-2); }
.flag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 99px; color: var(--text-1); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.flag .fi { width: 12px; height: 12px; }
.flag.is-pin { border-color: rgba(var(--accent-rgb), 0.45); color: var(--accent-hot); }
.post-author { color: var(--text-0); font-weight: 600; }
.post-author + .role-badge { margin-left: 0; }

/* a post's actions: small round buttons; an open reply or edit takes the row's whole width */
.post-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 8px; }
.act-form { display: contents; }
.act { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 0; border-radius: 99px; background: none; color: var(--text-2); font: 500 12px var(--font-ui); cursor: pointer; list-style: none; transition: color 150ms, background 150ms; }
.act:hover { background: var(--surface-2); color: var(--text-0); }
.act .fi { width: 16px; height: 16px; }
summary.act::-webkit-details-marker, .cm-head::-webkit-details-marker, .react-pick summary::-webkit-details-marker, .composer-links summary::-webkit-details-marker { display: none; }
.post-acts > details[open] { flex-basis: 100%; order: 10; }

/* markdown */
.md { color: var(--text-0); line-height: 1.6; overflow-wrap: anywhere; }
.md p { margin: 0 0 8px; }
.md > :last-child { margin-bottom: 0; }
.md a { color: var(--accent-hot); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), 0.4); text-underline-offset: 2px; }
.md :is(h3, h4, h5) { margin: 12px 0 6px; color: var(--text-0); font-family: var(--font-display); }
.md h3 { font-size: 20px; }
.md h4 { font-size: 17px; }
.md h5 { font-size: 15px; }
.md blockquote { margin: 6px 0 10px; padding: 4px 0 4px 12px; border-left: 3px solid rgba(var(--accent-rgb), 0.6); color: var(--text-1); }
.md code { padding: 1px 5px; border-radius: 5px; background: var(--surface-2); font: 0.9em ui-monospace, Consolas, monospace; }
.md pre { margin: 6px 0 10px; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.35); overflow-x: auto; }
.md pre code { padding: 0; background: none; }
.md :is(ul, ol) { margin: 4px 0 10px; padding-left: 22px; }
.md hr { margin: 12px 0; border: 0; border-top: 1px solid var(--line); }
.md-img { max-width: 100%; max-height: 420px; border-radius: 8px; vertical-align: middle; }
.md-media { margin: 6px 0 10px; }
.spoiler { padding: 0 3px; border-radius: 4px; background: var(--text-1); color: transparent; cursor: pointer; transition: background 200ms, color 200ms; }
.spoiler.is-shown, .spoiler:focus { background: var(--surface-2); color: inherit; }
.mention, .mention a:not(.paint) { color: var(--accent-hot); font-weight: 600; }
.post-body.is-deleted { color: var(--text-2); font-style: italic; }

/* media: one picture big, a gallery (discord's mosaic here; reddit's carousel and twitter's grid below), videos,
   embeds that load their player on a click, attachments */
.post-media { display: grid; gap: 8px; margin-top: 10px; }
.media-pic { display: block; overflow: hidden; border-radius: 10px; background: var(--surface); cursor: zoom-in; }
.media-pic img { display: block; transition: transform 300ms var(--ease); }
.media-one { max-width: 640px; }
.media-one .media-pic { display: inline-block; }
.media-one img, .media-video { display: block; max-width: 100%; max-height: 520px; border-radius: 10px; }
.media-video { width: 100%; background: #000; }
.gallery { position: relative; max-width: 640px; }
.gallery-track { display: grid; gap: 4px; overflow: hidden; border-radius: 10px; }
.gallery-item { border-radius: 0; aspect-ratio: 1; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery.is-grid .gallery-track { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.gallery.is-mosaic .gallery-track { grid-template-columns: repeat(2, 1fr); }
.gallery.is-mosaic .gallery-track:has(> :nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
.gallery.is-mosaic .gallery-track:has(> :nth-child(3):last-child) > :first-child { grid-row: span 2; aspect-ratio: auto; }
.gallery.is-wall .gallery-track { display: block; columns: 3 160px; column-gap: 6px; overflow: visible; border-radius: 0; }
.gallery.is-wall .gallery-item { display: block; margin-bottom: 6px; aspect-ratio: auto; border-radius: 8px; break-inside: avoid; }
.gallery.is-wall .gallery-item img { height: auto; }
.gallery-item:hover img, .w-pics .media-pic:hover img, .side-pics .media-pic:hover img { transform: scale(1.05); }
.gallery-go, .gallery-count { display: none; }
.gallery-go::before, .lightbox :is(.lb-prev, .lb-next)::before { content: ''; width: 10px; height: 10px; border: solid currentColor; border-width: 0 0 2px 2px; rotate: 45deg; translate: 2px 0; }
:is(.gallery-go.is-next, .lightbox .lb-next)::before { rotate: -135deg; translate: -2px 0; }
.embed { position: relative; display: grid; max-width: 640px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #1d2030, #050507); }
.embed img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.embed iframe { width: 100%; height: 100%; border: 0; }
.embed-play { position: absolute; inset: 0; display: grid; place-items: center; }
.embed-play::before { content: ''; width: 68px; height: 48px; border-radius: 14px; background: rgba(var(--accent-rgb), 0.92); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); transition: transform 200ms var(--spring); }
.embed-play::after { content: ''; position: absolute; border: solid transparent; border-width: 10px 0 10px 16px; border-left-color: #fff; translate: 3px 0; }
.embed:hover .embed-play::before { transform: scale(1.1); }
.embed-name { position: absolute; left: 12px; bottom: 10px; color: #fff; font: 600 13px var(--font-ui); }
.files { display: grid; gap: 6px; max-width: 480px; margin: 0; padding: 0; list-style: none; }
.file { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text-0); transition: border-color 150ms; }
.file:hover { border-color: rgba(var(--accent-rgb), 0.55); }
.file > span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.file small { color: var(--text-2); font-size: 12px; }
.file .fi { width: 22px; height: 22px; color: var(--accent-hot); }
.file.is-locked { opacity: 0.75; }

/* the skin's video player (kernel/media.php, site.js): the screen, a big play button until it plays, a bar of controls
   that rests out of sight while a video plays untouched. Each skin dresses it in its own art (below). */
.player { --bar: rgba(8, 8, 10, 0.8); --ink: #fff; --fill: var(--accent); --track: rgba(255, 255, 255, 0.25); position: relative; max-width: 640px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #000; isolation: isolate; outline: none; }
.player:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.player:fullscreen { max-width: none; border-radius: 0; }
.player-screen, .player-screen > :is(video, iframe, img) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-screen img { object-fit: cover; opacity: 0.85; }
/* YouTube draws its title, logo and progress line at its frame's edges and wakes them on hover: the frame is three
   times as tall (the video stays centred at full width) so they fall outside the box, and the mouse never reaches it */
.player.is-youtube .player-screen > iframe { top: -100%; bottom: auto; height: 300%; pointer-events: none; }
.player-out { position: absolute; left: 12px; bottom: 10px; color: #fff; font: 600 12px var(--font-ui); }
.player:has(.player-bar:not([hidden])) .player-out { display: none; }
.player-big { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 78px; height: 78px; border: 0; border-radius: 50%; background: rgba(var(--accent-rgb), 0.92); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55); cursor: pointer; translate: -50% -50%; transition: scale 200ms var(--spring), opacity 200ms; }
.player-big::before { content: ''; width: 26px; height: 30px; margin-left: 6px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.player-big:hover { scale: 1.08; }
.player.is-playing .player-big { opacity: 0; pointer-events: none; scale: 0.85; }
.player-bar { position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 28px 12px 10px; background: linear-gradient(transparent, var(--bar)); color: var(--ink); transition: opacity 300ms, translate 300ms var(--ease); }
.player-bar[hidden] { display: none; }
.player.is-playing.is-idle .player-bar { opacity: 0; translate: 0 8px; }
.player.is-playing.is-idle { cursor: none; }
.player-btn { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E"); flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; transition: background 150ms, color 150ms; }
.player-btn::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.player-btn:hover { background: rgba(255, 255, 255, 0.12); }
.player.is-playing .player-btn.is-play { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zM14 4h4v16h-4z'/%3E%3C/svg%3E"); }
.player-btn.is-mute { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.player.is-muted .player-btn.is-mute { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 9l5 6M21 9l-5 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.player-btn.is-full { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.player:fullscreen .player-btn.is-full { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.player-time { flex: none; min-width: 36px; font: 600 12px var(--font-ui); font-variant-numeric: tabular-nums; text-align: center; }
.player :is(.player-seek, .player-vol) { height: 18px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.player-seek { flex: 1; min-width: 60px; }
.player-vol { width: 74px; }
.player :is(.player-seek, .player-vol)::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--fill) var(--p, 0%), var(--track) var(--p, 0%)); }
.player :is(.player-seek, .player-vol)::-moz-range-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--fill) var(--p, 0%), var(--track) var(--p, 0%)); }
.player :is(.player-seek, .player-vol)::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.35); -webkit-appearance: none; appearance: none; }
.player :is(.player-seek, .player-vol)::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.35); }
.media-one .player { max-width: 640px; }
.forum.is-twitter .player { max-width: 100%; border-radius: 16px; }
.block-media { display: grid; gap: 10px; margin-top: 14px; }
.block-media :is(.gallery, .media-one, .player, .embed), .w-gallery :is(.gallery, .media-one, .player) { max-width: none; }
.w-gallery .gallery.is-carousel .gallery-item { aspect-ratio: 16 / 9; }
@media (max-width: 560px) { .player-vol, .player-time[data-p='dur'] { display: none; } }

/* arcane: a dark slab bar under a seam of light, the big button a glowing play in the rune ring, turning */
[data-skin='arcane'] .player { --bar: rgba(6, 4, 8, 0.92); --fill: var(--accent-hot); border-radius: 4px; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 0 26px rgba(var(--accent-rgb), 0.16); }
[data-skin='arcane'] .player-bar::before { content: ''; position: absolute; right: 12px; bottom: 50px; left: 12px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.8), transparent); box-shadow: 0 0 8px var(--accent); }
[data-skin='arcane'] .player-big { width: 96px; height: 96px; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.3), rgba(0, 0, 0, 0.75) 62%); box-shadow: 0 0 34px rgba(var(--accent-rgb), 0.45); }
[data-skin='arcane'] .player-big::before { background: var(--accent-hot); filter: drop-shadow(0 0 6px var(--accent)); }
[data-skin='arcane'] .player-big::after { content: ''; position: absolute; inset: -22px; background: var(--ui-ring) center / contain no-repeat; animation: turn 30s linear infinite; pointer-events: none; }
[data-skin='arcane'] .player-btn:hover { background: none; color: var(--accent-hot); filter: drop-shadow(0 0 4px var(--accent)); }
[data-skin='arcane'] .player :is(.player-seek, .player-vol)::-webkit-slider-thumb { border-radius: 1px; background: var(--accent-hot); box-shadow: 0 0 8px var(--accent); rotate: 45deg; }
[data-skin='arcane'] .player :is(.player-seek, .player-vol)::-moz-range-thumb { border-radius: 1px; background: var(--accent-hot); box-shadow: 0 0 8px var(--accent); rotate: 45deg; }

/* parchment: the controls on a strip of the paper in ink, a wax seal to start in the skin's studded ring */
[data-skin='parchment'] .player { --ink: #3a2614; --fill: color-mix(in srgb, var(--accent) 75%, #2b1c0e); --track: rgba(74, 48, 22, 0.25); border-radius: 3px; box-shadow: 0 0 0 1px rgba(74, 48, 22, 0.5), 0 6px 18px rgba(60, 35, 10, 0.4); }
[data-skin='parchment'] .player-bar { padding: 7px 12px; background: var(--ui-paper) 0 0 / 440px; border-top: 1px solid rgba(74, 48, 22, 0.45); box-shadow: 0 -3px 8px rgba(40, 22, 6, 0.35); }
[data-skin='parchment'] .player-btn:hover { background: rgba(74, 48, 22, 0.14); }
[data-skin='parchment'] .player-big { width: 86px; height: 86px; background: radial-gradient(circle at 36% 30%, #d65445, #8e1f15 60%, #5a110b); box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.18), inset 0 0 0 7px rgba(255, 190, 170, 0.22), 0 6px 16px rgba(0, 0, 0, 0.55); }
[data-skin='parchment'] .player-big::before { background: rgba(255, 228, 210, 0.92); }
[data-skin='parchment'] .player-big::after { content: ''; position: absolute; inset: -24px; background: var(--ui-ring) center / contain no-repeat; pointer-events: none; }
[data-skin='parchment'] .player :is(.player-seek, .player-vol)::-webkit-slider-thumb { background: radial-gradient(circle at 35% 30%, #d65445, #7a1a12); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
[data-skin='parchment'] .player :is(.player-seek, .player-vol)::-moz-range-thumb { background: radial-gradient(circle at 35% 30%, #d65445, #7a1a12); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }

/* living vines: a bar of dark chrome, the big button a metal disc in the skin's thorned ring, turning slowly back */
[data-skin='vine_live'] .player { --bar: transparent; border-radius: 6px; box-shadow: 0 0 0 1px #3a3f46, 0 0 0 2px #0b0c0e, 0 8px 24px rgba(0, 0, 0, 0.6); }
[data-skin='vine_live'] .player-bar { padding: 7px 12px; background: linear-gradient(#2c3036, #121418); border-top: 1px solid #6b7480; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
[data-skin='vine_live'] .player-big { width: 86px; height: 86px; background: radial-gradient(circle at 40% 30%, #5d646e, #1c1f24 70%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 0 2px #0b0c0e, 0 8px 20px rgba(0, 0, 0, 0.6); }
[data-skin='vine_live'] .player-big::after { content: ''; position: absolute; inset: -26px; background: var(--ui-ring) center / contain no-repeat; animation: turn 50s linear infinite reverse; pointer-events: none; }
[data-skin='vine_live'] .player :is(.player-seek, .player-vol)::-webkit-slider-thumb { background: radial-gradient(circle at 40% 30%, #e1e6ec, #6b7480); box-shadow: 0 1px 2px #000; }
[data-skin='vine_live'] .player :is(.player-seek, .player-vol)::-moz-range-thumb { background: radial-gradient(circle at 40% 30%, #e1e6ec, #6b7480); box-shadow: 0 1px 2px #000; }

/* modern: a floating bar of frosted glass, a glass button */
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .player-bar { right: 10px; bottom: 10px; left: 10px; padding: 6px 10px; border-radius: 14px; background: rgba(20, 20, 24, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .player-big { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 8px 30px rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* the full-screen viewer (site.js): a picture, its gallery's others a swipe or an arrow away */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(4, 4, 6, 0.94); animation: lb-in 180ms ease; touch-action: pan-y; }
.lightbox img { max-width: min(94vw, 1600px); max-height: 84vh; object-fit: contain; border-radius: 6px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7); user-select: none; -webkit-user-drag: none; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 26px; cursor: pointer; }
.lightbox button:hover { background: rgba(255, 255, 255, 0.18); }
.lightbox button[hidden] { display: none; }
.lb-close { top: 18px; right: 18px; }
.lb-prev { top: 50%; left: 18px; translate: 0 -50%; }
.lb-next { top: 50%; right: 18px; translate: 0 -50%; }
.lb-bar { position: absolute; left: 50%; bottom: 16px; display: flex; align-items: center; gap: 16px; translate: -50% 0; color: #ccc; font-size: 13px; }
.lb-bar a { color: #fff; text-decoration: underline; }
.has-lightbox { overflow: hidden; }
@keyframes lb-in { from { opacity: 0; } }

/* the composer: who writes, the words in a box with a markdown bar (or its preview), the files chosen, then send */
.composer { display: grid; gap: 8px; margin: 10px 0 14px; }
.composer-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }
.composer-faces { display: inline-flex; }
.composer-faces [hidden] { display: none; }
.composer-who select { padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface-2); color: var(--text-0); font: 600 13px var(--font-ui); cursor: pointer; }
.composer-who select option { background: var(--pop); color: var(--text-0); }
.composer-title { font: 600 16px var(--font-display); }
.composer-box { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color 150ms, box-shadow 150ms; }
.composer-box:focus-within, .composer.is-drop .composer-box { border-color: rgba(var(--accent-rgb), 0.6); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14); }
.md-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.md-bar button { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--text-2); font: 700 13px var(--font-ui); cursor: pointer; }
.md-bar button:hover:not(:disabled) { background: var(--surface-2); color: var(--text-0); }
.md-bar button:disabled { opacity: 0.35; cursor: default; }
.md-bar .fi { width: 15px; height: 15px; }
.md-italic { font-style: italic !important; }
.md-strike { text-decoration: line-through; }
.md-bar .md-preview-go { margin-left: auto; font-weight: 600; }
.md-preview-go[aria-pressed='true'] { color: var(--accent-hot); }
.composer-text { display: block; width: 100%; min-height: 96px; padding: 10px 12px; border: 0; background: none; color: var(--text-0); font: 14px/1.55 var(--font-ui); resize: vertical; outline: none; }
.composer-text::placeholder { color: var(--text-2); }
.composer.is-compact .composer-text { min-height: 58px; }
.md-preview { min-height: 96px; padding: 10px 12px; }
.composer-foot { display: flex; align-items: center; gap: 10px; }
.composer-attach { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--accent-hot); cursor: pointer; }
.composer-attach:hover { background: var(--surface-2); }
.composer-attach input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.composer-hint { flex: 1; color: var(--text-2); font-size: 12px; }
.composer-send { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.composer-send .fi { width: 16px; height: 16px; }
.composer-files { display: flex; flex-wrap: wrap; gap: 8px; }
.composer-files[hidden] { display: none; }
.cfile { position: relative; display: flex; align-items: center; gap: 4px; max-width: 220px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text-1); font-size: 12px; }
.cfile :is(img, video) { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; }
.cfile span { overflow: hidden; padding: 0 6px; text-overflow: ellipsis; white-space: nowrap; }
.cfile button { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: #c0392b; color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.composer-links summary { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12px; cursor: pointer; list-style: none; }
.composer-links summary:hover { color: var(--text-0); }
.composer-links .fi { width: 14px; height: 14px; }
.composer-links textarea { width: 100%; margin: 6px 0 2px; }
.composer-had { display: flex; flex-wrap: wrap; gap: 8px; }
.had { position: relative; display: grid; cursor: pointer; }
.had img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.had > span { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.had input { position: absolute; top: 4px; left: 4px; z-index: 1; }
.had:has(input:checked) :is(img, span) { opacity: 0.35; outline: 2px solid var(--danger-text); }
.composer-replying { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; border-radius: 10px 10px 0 0; background: var(--surface-2); color: var(--text-1); font-size: 13px; }
.composer-replying[hidden] { display: none; }
.composer-replying button { border: 0; background: none; color: var(--text-1); font-size: 18px; cursor: pointer; }
.composer-error { margin: 0; color: var(--danger-text); font-size: 13px; }
.composer-none { margin: 10px 0; }
[data-skin='parchment'] .md pre { background: rgba(74, 48, 22, 0.12); }

/* boards as links (sidebars, channels, topics) and the boxes beside a feed */
.board-links { display: grid; gap: 2px; }
.board-link { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; color: var(--text-1); font-size: 14px; transition: background 150ms, color 150ms; }
.board-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-link:hover { background: var(--surface-2); color: var(--text-0); }
.board-link.is-here { background: rgba(var(--accent-rgb), 0.15); color: var(--text-0); }
.board-link .fi { width: 16px; height: 16px; color: var(--text-2); }
.board-link.is-here .fi { color: var(--accent-hot); }
.side-box { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.side-box h3 { margin: 0 0 8px; color: var(--text-0); font: 600 12px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.side-box h3 a { color: inherit; }
.side-box p { margin: 0 0 8px; color: var(--text-1); font-size: 13px; line-height: 1.5; }
.side-n { color: var(--text-2) !important; }
.side-go { width: 100%; min-width: 0; }
.side-pics, .w-pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.w-pics { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
:is(.side-pics, .w-pics) .media-pic { aspect-ratio: 1; border-radius: 8px; }
:is(.side-pics, .w-pics) img { width: 100%; height: 100%; object-fit: cover; }

/* reddit: a feed of cards with a vote rail beside a sticky sidebar; a thread's comments a tree, each branch folding */
.rd { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 24px; }
.rd-side { position: sticky; top: 90px; display: grid; gap: 14px; }
.rd-create { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text-2); transition: border-color 150ms; }
.rd-create span { flex: 1; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); font-size: 14px; }
.rd-create:hover { border-color: rgba(var(--accent-rgb), 0.5); color: var(--text-1); }
.rd-sorts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 12px; }
.rd-sort { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; color: var(--text-1); font: 600 13px var(--font-ui); }
.rd-sort:hover { background: var(--surface-2); color: var(--text-0); }
.rd-sort.is-here { background: rgba(var(--accent-rgb), 0.16); color: var(--text-0); }
.rd-sort .fi { width: 16px; height: 16px; }
.rd-periods { display: flex; gap: 4px; margin-left: 6px; }
.rd-periods a { padding: 4px 9px; border-radius: 99px; color: var(--text-2); font-size: 12px; }
.rd-periods a.is-here { background: var(--surface-2); color: var(--text-0); }
.rd-sorts.is-small { gap: 6px; margin: 10px 0 0; color: var(--text-2); font-size: 13px; }
.rd-sorts.is-small > span { margin-right: 8px; color: var(--text-0); font-weight: 600; }
.rd-feed { display: grid; gap: 10px; }
.rd-empty { padding: 30px 0; }
.rd-card { display: grid; grid-template-columns: 46px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color 200ms; }
.rd-card:hover, .rd-card.is-pinned { border-color: rgba(var(--accent-rgb), 0.4); }
.rd-card.is-full:hover { border-color: var(--line); }
.rd-rail { padding: 10px 0; background: var(--surface); }
.rd-content { min-width: 0; padding: 10px 14px 6px; }
.rd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-2); font-size: 12px; }
.rd-board { display: inline-flex; align-items: center; gap: 2px; color: var(--text-0); font-weight: 700; }
.rd-board .fi { width: 14px; height: 14px; }
.rd-title { margin: 6px 0 4px; color: var(--text-0); font: 600 18px/1.3 var(--font-display); }
.rd-title a { color: inherit; }
.rd-title a:hover { color: var(--accent-hot); }
h1.rd-title { font-size: 23px; }
.rd-taste .post-body { max-height: 190px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 130px, transparent); mask-image: linear-gradient(#000 130px, transparent); }
.rd-taste .post-media { max-width: 100%; }
.vote { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vote button { display: grid; place-items: center; width: 30px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; transition: color 150ms, background 150ms, transform 150ms var(--spring); }
.vote button:hover { background: var(--surface-2); }
.vote button:active { transform: scale(0.85); }
.vote-up:hover, .vote-up.is-on, .vote:has(.vote-up.is-on) .vote-n { color: #ff6a3d; }
.vote-down:hover, .vote-down.is-on, .vote:has(.vote-down.is-on) .vote-n { color: #8a9bff; }
.vote :is(.is-on) .fi { fill: currentColor; }
.vote-n { min-width: 2ch; color: var(--text-0); font: 700 13px var(--font-ui); font-variant-numeric: tabular-nums; text-align: center; }
.vote.is-inline { flex-direction: row; gap: 0; }
.vote.is-inline button { width: 28px; }
.rd-comments { margin-top: 18px; }
.cm-tree { display: grid; gap: 4px; margin-top: 12px; }
.cm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; color: var(--text-2); font-size: 13px; cursor: pointer; list-style: none; }
.cm:not([open]) > .cm-head { opacity: 0.65; }
.cm-fold { margin-left: 4px; color: var(--text-2); font: 700 14px var(--font-ui); }
.cm-fold::before { content: '\2212'; }
.cm:not([open]) .cm-fold::before { content: '+'; }
.cm-edited, .msg-edited { color: var(--text-2); font-size: 11px; font-style: italic; }
.cm-body { margin-left: 12px; padding-left: 16px; border-left: 2px solid var(--line); transition: border-color 150ms; }
.cm-body:hover { border-left-color: rgba(var(--accent-rgb), 0.45); }
.cm-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 2px 0 4px; }
.cm-acts .post-acts { display: contents; }
.cm-kids { display: grid; gap: 4px; }
.cm-more { display: inline-block; margin: 2px 0 6px; color: var(--accent-hot); font-size: 13px; }
.rd-branch { margin: 8px 0 0; color: var(--text-2); font-size: 13px; }
.rd-compose { margin-top: 0; }

/* twitter: nav, a timeline between hairlines, trends; a thread joined by a line from avatar to avatar */
.tw { display: grid; grid-template-columns: 210px minmax(0, 620px) 280px; justify-content: center; align-items: start; gap: 22px; }
.tw-nav { position: sticky; top: 90px; display: grid; gap: 2px; }
.tw-nav-link { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 99px; color: var(--text-0); font: 600 17px var(--font-display); transition: background 150ms; }
.tw-nav-link .fi { width: 24px; height: 24px; }
.tw-nav-link:hover { background: var(--surface-2); }
.tw-nav-link.is-here { color: var(--accent-hot); }
.tw-nav-head { margin: 14px 14px 4px; color: var(--text-2); font: 600 11px var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.tw-main { min-width: 0; border-right: 1px solid var(--line); border-left: 1px solid var(--line); }
.tw-top { padding: 12px 16px 0; border-bottom: 1px solid var(--line); }
.tw-h { margin: 0 0 2px; color: var(--text-0); font: 700 20px var(--font-display); }
.tw-about { margin: 0 0 8px; color: var(--text-2); font-size: 13px; }
.tw-back { display: inline-flex; padding-bottom: 12px; color: var(--text-0); font: 700 17px var(--font-display); }
.tw-tabs { display: flex; margin: 4px -16px 0; }
.tw-tabs a { position: relative; flex: 1; padding: 14px 0; color: var(--text-2); font-weight: 600; text-align: center; transition: background 150ms; }
.tw-tabs a:hover { background: var(--surface); }
.tw-tabs a.is-here { color: var(--text-0); }
.tw-tabs a.is-here::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 56px; height: 4px; border-radius: 99px; background: var(--accent); translate: -50% 0; }
.tw-main > .subtabs { margin: 10px 0; }
.tw-compose { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tw-compose .composer-text { font-size: 17px; }
.tw-post { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); transition: background 150ms; }
.tw-post:hover { background: var(--surface); }
.tw-col { min-width: 0; }
.tw-head { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--text-2); font-size: 14px; }
.tw-when { color: var(--text-2); }
.tw-when:hover { text-decoration: underline; }
.tw-topic { margin-left: auto; padding: 1px 9px; border-radius: 99px; background: var(--surface-2); color: var(--text-1); font-size: 12px; }
.tw-topic:hover { color: var(--text-0); }
.tw-to { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.tw-title { margin: 4px 0 2px; color: var(--text-0); font: 700 16px var(--font-display); }
.tw-post .post-body { margin-top: 2px; font-size: 15px; line-height: 1.5; }
.tw-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin: 6px -9px 0; }
.tw-acts .post-acts { display: contents; }
.act-like.is-on, .act-like:hover { color: #f91880; }
.act-like.is-on .fi { fill: currentColor; }
.tw-thread .is-above { position: relative; border-bottom: 0; }
.tw-thread .is-above::before { content: ''; position: absolute; left: 36px; top: 60px; bottom: -12px; width: 2px; background: var(--line); }
.tw-post.is-main { grid-template-columns: 42px minmax(0, 1fr); }
.tw-post.is-main .post-body { font-size: 18px; }
.tw-post.is-main:hover { background: none; }
.tw-side { position: sticky; top: 90px; display: grid; gap: 14px; }
.tw-trend { display: grid; gap: 1px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--text-0); }
.tw-trend:last-child { border-bottom: 0; }
.tw-trend small { color: var(--text-2); font-size: 12px; }
.tw-trend b { font-weight: 600; }
.tw-trend:hover b { color: var(--accent-hot); }
.forum.is-twitter .gallery { max-width: 100%; }
.gallery.is-quad .gallery-track { aspect-ratio: 16 / 9; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: 16px; }
.gallery.is-quad .gallery-item { aspect-ratio: auto; }
.gallery.is-quad .gallery-item:nth-child(n + 5) { display: none; }
.gallery.is-quad .gallery-item[data-more] { position: relative; }
.gallery.is-quad .gallery-item[data-more]::after { content: attr(data-more); position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); color: #fff; font: 700 28px var(--font-display); }
.forum.is-twitter :is(.media-one, .embed) { max-width: 100%; }
.forum.is-twitter .media-one img { border: 1px solid var(--line); border-radius: 16px; }

/* the carousel (reddit's gallery): one picture at a time on black, arrows and a count, swiped on a phone */
.gallery.is-carousel .gallery-track { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; background: #000; scrollbar-width: none; }
.gallery.is-carousel .gallery-item { flex: 0 0 100%; aspect-ratio: 4 / 3; scroll-snap-align: center; }
.gallery.is-carousel .gallery-item img { object-fit: contain; }
.gallery.is-carousel .gallery-item:hover img { transform: none; }
.gallery.is-carousel .gallery-go { position: absolute; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; cursor: pointer; translate: 0 -50%; }
.gallery.is-carousel .gallery-go.is-prev { left: 8px; }
.gallery.is-carousel .gallery-go.is-next { right: 8px; }
.gallery.is-carousel .gallery-count { position: absolute; top: 8px; right: 8px; display: block; padding: 2px 9px; border-radius: 99px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 12px; }

/* discord: channels beside a live stream in one frame; messages run on under their writer, tools float on hover */
.dc { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: min(78vh, 880px); min-height: 520px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, 0.18); }
[data-skin='parchment'] .dc { background: rgba(255, 246, 222, 0.25); }
.dc-side { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; border-right: 1px solid var(--line); background: var(--surface); }
.dc-server { padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--text-0); font: 700 15px var(--font-display); }
.dc-channels { overflow-y: auto; padding: 10px 8px; }
.dc-cat { margin: 14px 8px 4px; color: var(--text-2); font: 700 11px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.dc-me { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, 0.15); }
.dc-me > span { display: grid; min-width: 0; }
.dc-me small { color: var(--text-2); font-size: 11px; }
.dc-chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.dc-top { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dc-top .fi { color: var(--text-2); }
.dc-h { margin: 0; color: var(--text-0); font: 700 15px var(--font-display); white-space: nowrap; }
.dc-about { overflow: hidden; margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--line); color: var(--text-2); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dc-stream { overflow-y: auto; padding: 10px 0 16px; overscroll-behavior: contain; }
.dc-start { padding: 20px 16px 8px; }
.dc-start-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); }
.dc-start-icon .fi { width: 34px; height: 34px; }
.dc-start h2 { margin: 10px 0 4px; color: var(--text-0); font: 700 26px var(--font-display); }
.dc-start p { margin: 0; color: var(--text-2); }
.dc-more { display: block; margin: 6px 16px; color: var(--accent-hot); font-size: 13px; text-align: center; }
.msg-day { display: flex; align-items: center; gap: 8px; margin: 16px 16px 4px; color: var(--text-2); font: 600 11px var(--font-ui); }
.msg-day::before, .msg-day::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* a post whose writer's role grants forum.flair: a light running round a frame in the role's colour, a glow under it */
.is-flair { position: relative; isolation: isolate; border-radius: 12px; box-shadow: 0 0 22px -6px color-mix(in srgb, var(--flair) 60%, transparent), inset 0 0 26px -12px var(--flair); }
.is-flair::before { content: ''; position: absolute; inset: 0; z-index: 2; padding: 2px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--vip-a), var(--flair), color-mix(in srgb, var(--flair) 30%, #fff) 25%, color-mix(in srgb, var(--flair) 55%, #000) 50%, #fff 62%, var(--flair) 75%, color-mix(in srgb, var(--flair) 40%, transparent) 88%, var(--flair));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: vip-run 4s linear infinite; }
.msg.is-flair, .tw-post.is-flair { margin-block: 6px; padding-block: 8px; }
@media (prefers-reduced-motion: reduce) { .is-flair::before { animation: none; } }
.msg { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; margin-top: 12px; padding: 3px 56px 3px 16px; }
.msg.is-cont { margin-top: 0; }
.msg:hover, .msg:focus-within { background: var(--surface); }
.msg:target { background: rgba(var(--accent-rgb), 0.1); box-shadow: inset 2px 0 0 var(--accent); }
.msg-ref { position: relative; grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0 0 4px 56px; color: var(--text-2); font-size: 12px; }
.msg-ref::before { content: ''; position: absolute; left: -36px; top: 50%; width: 30px; height: 9px; border: solid var(--line); border-width: 2px 0 0 2px; border-radius: 6px 0 0 0; }
.msg-ref b { color: var(--text-0); }
.msg-ref span { overflow: hidden; color: var(--text-1); text-overflow: ellipsis; white-space: nowrap; }
.msg-ref:hover span { color: var(--text-0); }
.msg-time { justify-self: end; padding-top: 3px; color: var(--text-2); font-size: 10px; white-space: nowrap; opacity: 0; }
.msg:hover .msg-time { opacity: 1; }
.msg-col { min-width: 0; }
.msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.msg-when { color: var(--text-2); font-size: 12px; }
.msg-title { display: block; color: var(--text-0); font-weight: 700; }
.msg .post-body { line-height: 1.45; }
.msg .md p { margin: 0 0 2px; }
.msg-thread { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--accent-hot); font-size: 12px; font-weight: 600; }
.msg-thread .fi { width: 14px; height: 14px; }
.reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.react { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-1); font: 600 12px var(--font-ui); cursor: pointer; transition: border-color 150ms, background 150ms, transform 150ms var(--spring); }
.react:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.react:active { transform: scale(0.9); }
.react.is-on { border-color: rgba(var(--accent-rgb), 0.75); background: rgba(var(--accent-rgb), 0.16); color: var(--text-0); }
.react.is-none { display: none; }
.emoji { font-size: 15px; line-height: 1; }
.msg-tools { position: absolute; top: -16px; right: 16px; z-index: 2; display: none; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--pop); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.msg:hover .msg-tools, .msg:focus-within .msg-tools { display: flex; }
.msg-tools .post-acts { display: contents; }
.msg-tools .act { padding: 6px; }
.msg-tools .act > span { display: none; }
.msg-tools:has(details[open]) { position: static; display: flex; flex-wrap: wrap; grid-column: 2; margin-top: 6px; box-shadow: none; }
.msg-tools details[open] { flex-basis: 100%; }
.msg-tools details[open] .act > span { display: inline; }
.react-pick { position: relative; }
.react-pick summary { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: var(--text-2); cursor: pointer; list-style: none; }
.react-pick summary:hover { background: var(--surface-2); color: var(--text-0); }
.react-menu { position: absolute; top: 100%; right: 0; z-index: 3; display: flex; gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--pop); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
.react-menu button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; font-size: 20px; cursor: pointer; transition: transform 150ms var(--spring); }
.react-menu button:hover { background: var(--surface-2); transform: scale(1.18); }
.react-pick-form { display: contents; }
.dc-compose { padding: 0 16px 14px; }
.dc-compose .composer { margin: 0; }
.composer.is-chat { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'who who who' 'reply reply reply' 'attach box send' 'files files files' 'links links links'; align-items: end; gap: 0 8px; }
.composer.is-chat > * { margin-top: 6px; }
.is-chat .composer-who { grid-area: who; }
.is-chat .composer-replying { grid-area: reply; }
.is-chat .composer-box { grid-area: box; border-radius: 10px; background: var(--surface-2); }
.is-chat .composer-replying:not([hidden]) + .composer-who + .composer-box, .is-chat:has(.composer-replying:not([hidden])) .composer-box { border-top-left-radius: 0; border-top-right-radius: 0; }
.is-chat .md-bar, .is-chat .composer-hint { display: none; }
.is-chat .composer-text { min-height: 44px; max-height: 40vh; padding: 11px 12px; resize: none; field-sizing: content; }
.is-chat .composer-foot { display: contents; }
.is-chat .composer-attach { grid-area: attach; margin-bottom: 4px; }
.is-chat .composer-send { grid-area: send; margin-bottom: 4px; }
.is-chat .composer-files { grid-area: files; }
.is-chat .composer-links { grid-area: links; }
.is-chat .composer-error { grid-column: 1 / -1; }
.forum.is-discord .gallery { max-width: 520px; }

/* the gallery page: a masonry wall of every public picture, each with who posted it */
.gallery-wall { columns: 4 220px; column-gap: 10px; }
.wall-item { overflow: hidden; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); break-inside: avoid; }
.wall-item .media-pic { border-radius: 0; }
.wall-item img { width: 100%; }
.wall-item:hover img { transform: scale(1.03); }
.wall-item figcaption { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; }
.wall-item figcaption a { overflow: hidden; color: var(--text-1); text-overflow: ellipsis; white-space: nowrap; }
.wall-item figcaption a:hover { color: var(--text-0); }
.said-face { display: flex; align-items: flex-start; gap: 10px; }
.said-face > span:last-child { display: grid; min-width: 0; }

@media (max-width: 1180px) {
  .tw { grid-template-columns: 64px minmax(0, 1fr); }
  .tw-side, .tw-nav-head { display: none; }
  .tw-nav-link, .tw-topics .board-link { justify-content: center; padding: 10px; }
  :is(.tw-nav-link, .tw-topics .board-link) span { display: none; }
}
@media (max-width: 960px) {
  .rd { grid-template-columns: minmax(0, 1fr); }
  .rd-side { position: static; }
}
@media (max-width: 760px) {
  .dc { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 82vh; }
  .dc-side { grid-template-rows: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .dc-server, .dc-me, .dc-cat { display: none; }
  .dc-channels { display: flex; overflow-x: auto; padding: 6px; }
  .dc-channels .board-links { display: flex; }
  .msg { padding-right: 12px; }
  .tw { grid-template-columns: minmax(0, 1fr); }
  .tw-nav { position: static; display: flex; overflow-x: auto; }
  .tw-topics { display: flex; }
  .tw-main { border: 0; }
  .rd-card { grid-template-columns: 38px minmax(0, 1fr); }
  .composer-hint, .is-chat .composer-send > span { display: none; }
  .composer.is-chat .composer-send { min-width: 0; padding-right: 12px; padding-left: 12px; }
  :is(.tw-nav-link, .tw-topics .board-link) span { display: inline; }
  .tw-nav-link, .tw-topics .board-link { flex: none; padding: 8px 12px; font-size: 14px; }
  .tw-nav-link .fi { width: 18px; height: 18px; }
}

/* the login's way to an account: set apart from the button */
.login-alt { margin-top: 22px; }

/* roles: an account's highest role beside its name, a VIP tier's lit */
.role-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 1px 7px; border: 1px solid color-mix(in srgb, var(--role) 55%, transparent); border-radius: 99px; background: color-mix(in srgb, var(--role) 14%, transparent); color: var(--role); font: 600 10px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; }
.role-badge.is-vip { box-shadow: 0 0 10px color-mix(in srgb, var(--role) 45%, transparent); }
.role-badge small { color: var(--text-2); font-weight: 400; letter-spacing: 0; text-transform: none; }
.account-roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.account-roles .role-badge { margin-left: 0; }

/* characters and guilds: a character's facts beside its equipped items laid out like the game's inventory, guild
   marks drawn pixel by pixel, names as quiet links */
.char-link { color: inherit; }
.char-link:hover { color: #fff; text-shadow: var(--glow); }
.char-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: start; }
.char-class { margin: 0 0 14px; color: var(--accent-hot); font: 600 14px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.char-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px 18px; margin: 0; }
.char-facts div { display: grid; gap: 2px; }
.char-facts dt { color: var(--text-2); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.char-facts dd { margin: 0; color: var(--text-0); font: 700 20px var(--font-display); }
.char-guild { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); color: var(--text-0); }
.char-guild:hover { border-color: var(--accent); }
.char-guild span { display: grid; font-weight: 600; }
.char-guild small { color: var(--text-2); font-size: 11px; font-weight: 400; }
.char-guild .guild-mark { width: 30px; height: 30px; }
/* the game's character select with the character in it, between the facts and the items */
.char-top.has-view { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) auto; }
.char-view { display: grid; gap: 6px; margin: 0; }
/* the viewer in the skin's portrait frame (the art generator's portrait piece, 480 x 640, solid from 24 px in to its
   opening): the frame and its light lie over the viewer and let the pointer through to it */
.char-frame { position: relative; aspect-ratio: 3 / 4; }
.char-frame iframe { position: absolute; inset: 3.75% 5%; display: block; width: 90%; height: 92.5%; border: 0; background: #050506; }
.char-frame::before, .char-frame::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--ui-portrait) center / 100% 100% no-repeat; pointer-events: none; }
.char-frame::after { background-image: var(--ui-portrait-glow); mix-blend-mode: screen; animation: flicker 4.4s ease-in-out infinite; }
.char-cloth { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
/* the preview's loader: arcane's (loader_circle) over the opening, its pentagram drawn as the scene loads (site.js
   portraitLoad), gone once the scene shows */
.char-wait { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; transition: opacity 700ms var(--ease), scale 700ms var(--ease); }
.char-wait.is-done { opacity: 0; scale: 1.2; }
.char-wait .loader-circle { position: relative; display: grid; width: min(260px, 64vw); aspect-ratio: 1; }
.char-frame.is-cloth::before, .char-frame.is-cloth::after { display: none; }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .char-frame iframe { inset: 0; width: 100%; height: 100%; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); }
.char-view figcaption { text-align: center; }
.char-gear { display: grid; grid-template-columns: repeat(3, 76px); grid-template-areas: 'pet helm wings' 'weapon armor shield' 'pendant pants ring1' 'gloves boots ring2'; gap: 8px; }
.gear-slot { position: relative; display: grid; place-items: center; height: 76px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), 0.08), rgba(0, 0, 0, 0.35)); }
.gear-slot small { position: absolute; bottom: 3px; left: 0; right: 0; color: var(--text-2); font-size: 9px; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; opacity: 0.7; }
/* the pack's icons sit small in the middle of an inventory-sized picture: shown large, the margin cropped */
.gear-slot .item-icon { position: absolute; top: 50%; left: 50%; width: auto; max-width: none; height: 118px; translate: -50% -56%; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7)); }
.gear-level { position: absolute; top: 3px; right: 5px; color: var(--accent-hot); font-size: 11px; }
.gear-slot.is-0 { grid-area: weapon; } .gear-slot.is-1 { grid-area: shield; } .gear-slot.is-2 { grid-area: helm; } .gear-slot.is-3 { grid-area: armor; }
.gear-slot.is-4 { grid-area: pants; } .gear-slot.is-5 { grid-area: gloves; } .gear-slot.is-6 { grid-area: boots; } .gear-slot.is-7 { grid-area: wings; }
.gear-slot.is-8 { grid-area: pet; } .gear-slot.is-9 { grid-area: pendant; } .gear-slot.is-10 { grid-area: ring1; } .gear-slot.is-11 { grid-area: ring2; }
.char-search { display: flex; gap: 10px; margin: 6px 0 14px; }
.char-search .input { flex: 1; }
.guild-mark { width: 22px; height: 22px; flex: none; image-rendering: pixelated; }
.rank-name.guild-name { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; }
.guild-name > span { display: grid; }
.guild-top { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
/* A guild's live map: the board (the admin's live map dots, named) beside the roster, lit for who is online */
.guild-map-open { margin-left: auto; }
.guild-map-body { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(240px, 1fr); gap: 22px; align-items: start; }
.guild-map-stage { display: grid; gap: 10px; }
.guild-map-maps { display: flex; flex-wrap: wrap; gap: 6px; }
.guild-map-maps .tab, .guild-map-trails .tab { min-width: 0; }
.guild-map-trails { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.guild-map-trails-label { margin-right: 4px; color: var(--text-2); font: 600 11px var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.guild-map-maps .tab b { margin-left: 8px; color: rgb(var(--accent-rgb)); }
.guild-map-board { --lb-accent: rgb(var(--accent-rgb)); aspect-ratio: 16 / 10; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.45); }
.guild-map-roster .rank-row { cursor: pointer; }
.guild-map-roster .rank-row.is-off { opacity: 0.45; cursor: default; }
.guild-map-roster .rank-row.is-picked { background: rgba(var(--accent-rgb), 0.12); }
.guild-map-roster .rank-stat { font-size: 12px; text-align: right; }
@media (max-width: 860px) { .guild-map-body { grid-template-columns: 1fr; } }
.guild-top > .guild-mark { width: 72px; height: 72px; padding: 6px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); }
.guild-rank::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--text-2); transform: rotate(45deg); }
.guild-rank.is-master::before { background: var(--accent-hot); box-shadow: 0 0 8px var(--accent); }
.guild-rank.is-assistant::before, .guild-rank.is-battle::before { background: var(--text-0); }
.guild-recruit { display: grid; gap: 10px; justify-items: start; margin: 0 0 18px; padding: 14px 16px; border: 1px solid rgba(var(--accent-rgb), 0.35); background: rgba(var(--accent-rgb), 0.05); }
.guild-recruit .comment-form { width: 100%; margin-top: 4px; }
.guild-pitch { color: var(--text-1); line-height: 1.6; }
.guild-pitch p { margin: 0 0 6px; }
.guild-run { margin-bottom: 18px; }
.guild-run code { color: var(--text-1); }
.guild-name .forum-flag { margin-left: auto; }
@media (max-width: 1000px) { .char-top.has-view { grid-template-columns: minmax(0, 1fr) auto; } .char-view { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(100%, 360px); } }
@media (max-width: 760px) { .char-top, .char-top.has-view { grid-template-columns: 1fr; } .char-gear { justify-content: center; } }

/* events: the next runs, each counting down, the running one lit; /events also lists each day's times */
.event-list { margin: 0; padding: 0; list-style: none; }
.event-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(118px, auto); align-items: center; gap: 14px; padding: 9px 6px; border-bottom: 1px solid var(--line); transition: opacity 400ms var(--ease); }
.event-row:last-child { border-bottom: 0; }
.event-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-0); font-weight: 600; }
.event-at { color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.event-when { color: var(--text-1); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.event-row.is-on .event-name { color: #fff; text-shadow: var(--glow); }
.event-row.is-on .event-name::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-hot); box-shadow: 0 0 8px var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.event-row.is-on .event-when { color: var(--accent-hot); }
.event-row.is-done { opacity: 0.35; }
[data-skin='parchment'] .event-row.is-on .event-name { color: #2b1c0e; text-shadow: none; }
/* event looks (Admin > Layout, Admin > Events): a banner or a card each on the event's art, the next one big over
   rows, or a strip of cards; the words sit on the art's dark side */
.event-list:not(.is-list) .event-row[style] { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(to right, rgba(0, 0, 0, 0.82) 25%, rgba(0, 0, 0, 0.1) 70%), var(--art) center / cover; isolation: isolate; }
.event-list:not(.is-list) .event-row[style] :is(.event-name, .event-at, .event-when) { color: #fff; text-shadow: 0 1px 6px #000; }
.event-row.is-big { grid-template-columns: minmax(0, 1fr); align-content: end; gap: 4px; min-height: 190px; margin-bottom: 10px; padding: 22px 26px; }
.event-row.is-big .event-name { font: 700 clamp(22px, 2.6vw, 32px) var(--font-display); letter-spacing: 0.02em; }
.event-row.is-big .event-when { order: -1; justify-self: start; padding: 3px 10px; border-radius: 99px; background: rgba(var(--accent-rgb), 0.85); font-weight: 600; text-shadow: none; }
.event-row.is-big .event-at { font-size: 14px; }
.event-row.is-big:hover { border-color: rgba(var(--accent-rgb), 0.6); }
.event-list.is-banners { display: grid; gap: 10px; }
.event-list.is-banners .event-row.is-big { min-height: 150px; margin: 0; }
.event-list:is(.is-cards, .is-strip) { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.event-list.is-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.event-list:is(.is-cards, .is-strip) .event-row { grid-template-columns: minmax(0, 1fr); align-content: end; gap: 2px; aspect-ratio: 1; padding: 12px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 18%, rgba(0, 0, 0, 0) 62%), var(--art) center / cover; scroll-snap-align: start; }
.event-list:is(.is-cards, .is-strip) .event-when { text-align: left; }
.event-list:not(.is-list) .event-row.is-on { border-color: rgba(var(--accent-rgb), 0.8); box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.35); }
.event-list.is-spotlight .event-row:not(.is-big) { padding-right: 6px; padding-left: 6px; }
.event-card[style] { position: relative; overflow: hidden; padding-top: 110px; background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 40%, rgba(0, 0, 0, 0.15)), var(--art) center 20% / cover; }
.event-card[style] :is(.event-card-name, .event-card-line) { color: #fff; text-shadow: 0 1px 6px #000; }
.event-card[style] .event-times span { background: rgba(0, 0, 0, 0.45); color: #fff; }
.events-sub { margin: 26px 0 10px; color: var(--text-0); font: 600 13px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.event-card { padding: 14px 16px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.18); }
.event-card-name { margin: 0 0 4px; color: var(--text-0); font-size: 15px; }
.event-card-line { margin: 0 0 10px; color: var(--text-2); font-size: 12px; }
.event-times { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.event-times span { padding: 2px 7px; border: 1px solid var(--line); color: var(--text-1); font-size: 12px; font-variant-numeric: tabular-nums; }

/* stats: a counter each, its number in the display face and lit, the online one with a live dot */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 18px 12px; padding: 6px 0 2px; }
.stat { display: grid; justify-items: center; gap: 6px; text-align: center; }
.stat-n { color: #fff; font: 700 clamp(24px, 2.4vw, 34px) / 1 var(--font-display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; text-shadow: var(--glow); }
.stat-label { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font: 600 11px var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; }
[data-skin='parchment'] .stat-n { color: #3a2614; text-shadow: 0 1px 0 rgba(255, 246, 222, 0.6); }
[data-skin='parchment'] .stat-label { color: #6b4e2e; }
.stat.is-live .stat-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok-text); box-shadow: 0 0 8px var(--ok-text); animation: pulse 2s ease-in-out infinite; }
.rank-list { margin: 0; padding: 0; list-style: none; }
.rank-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); transition: background 200ms; }
.rank-row:hover { background: rgba(var(--accent-rgb), 0.06); }
.rank-row:last-child { border-bottom: 0; }
.rank-pos { color: var(--text-2); font: 600 16px var(--font-display); text-align: center; }
.rank-row:nth-child(1) .rank-pos { color: var(--accent-hot); text-shadow: var(--glow); animation: pulse 3s ease-in-out infinite; }
.rank-row:nth-child(2) .rank-pos { color: var(--steel); }
.rank-row:nth-child(3) .rank-pos { color: #a8806a; }
.rank-name { display: flex; flex-direction: column; min-width: 0; font-weight: 500; }
.rank-name small { color: var(--text-2); font-weight: 400; }
.rank-stat { color: var(--text-1); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
/* the boards: each player's face (its guild's mark on the corner) and its guild after its class */
.rank-list.has-faces .rank-row { grid-template-columns: 24px auto minmax(0, 1fr) auto; gap: 12px; }
.rank-face { --size: 38px; }
.rank-guild::before { content: '·'; margin: 0 6px; opacity: 0.6; }
.rank-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Footer ---------- */

.foot { position: relative; background: rgba(2, 2, 3, 0.95); border-top: 1px solid rgba(var(--accent-rgb), 0.35); box-shadow: 0 -1px 18px rgba(var(--accent-rgb), 0.14); }
.foot-row { display: flex; align-items: center; gap: 22px; padding-top: 22px; padding-bottom: 22px; }
.foot-logo { flex: none; height: 56px; max-width: 160px; object-fit: contain; opacity: 0.8; transition: opacity 200ms; }
.foot-logo:hover { opacity: 1; }
.foot-row p { margin: 2px 0 0; }
/* the name and its line take the room the row has; the language and the credits keep to the far end */
.foot-brand { flex: 1 1 280px; min-width: 0; }
.foot-brand p { max-width: 62ch; }
.foot-tools { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-inline-start: auto; }
.foot-lang { display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px; color: var(--text-2); font-size: 13px; transition: color 200ms; }
.foot-lang:hover, .foot-lang:focus-visible { color: #fff; }
.foot-credits { min-width: 0; }

/* the credits (view.php credits_dialog): the skin's own card over a dim, its cloth free to hang past the box */
.credits-dialog { width: min(620px, calc(100vw - 32px)); max-height: none; padding: 0; overflow: visible; border: 0; background: none; color: var(--text-0); }
.credits-dialog::backdrop { background: rgba(2, 3, 6, 0.66); backdrop-filter: blur(4px); }
.credits-dialog[open] { animation: modal-in 320ms var(--spring); }
.credits-card { margin: 0; }
.credits-close { position: absolute; top: 14px; inset-inline-end: 16px; z-index: 3; margin: 0; }
.credits-close .btn { min-width: 0; padding: 2px 10px; line-height: 1.4; }
.credits-card .card-head { padding-inline-end: 48px; }
.credits-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.credits-list h3 { margin: 0 0 4px; color: var(--text-1); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.credits-list p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.credits-list a { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.credits-list a:hover { color: rgb(var(--accent-rgb)); }
/* a phone or a short window: the dialog scrolls inside the screen (its cloth then stays within the box) */
@media (max-width: 560px), (max-height: 760px) {
  .credits-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 560px) { :root .credits-dialog .credits-card { padding-inline: 24px; } }
.foot-words a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* the server's links (Admin > General), each its mark in the accent when hovered */
.foot-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.foot-link { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: rgba(255, 255, 255, 0.6); transition: color 200ms, background 200ms, scale 300ms var(--spring); }
.foot-link:hover { color: rgb(var(--accent-rgb)); background: rgba(var(--accent-rgb), 0.12); scale: 1.12; }
.foot-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.foot-icon .fill { fill: currentColor; stroke: none; }
.site-closed .md { margin: 12px 0 8px; }

/* ---------- Layered skins: a still box, and ornaments CSS moves (view.php ornaments(), the bar and mount art,
   the title plate's sprigs). Under modern their images are none. ---------- */

.orn { position: absolute; z-index: -1; pointer-events: none; }
.orn-fx { inset: calc(-1 * var(--frame-border)); }
/* the corners under the effects layer */
:is(.orn-tl, .orn-tr, .orn-br, .orn-bl) { z-index: -2; width: var(--orn); height: var(--orn); background: center / 100% 100% no-repeat; }
:is(.orn-tl, .orn-tr, .orn-br, .orn-bl)::after { content: ''; position: absolute; inset: 0; background: center / 100% 100% no-repeat; mix-blend-mode: screen; animation: flicker 4.6s ease-in-out infinite; }
/* each corner pivots on its knot, where the box's rim turns (21 px into the 150 px ornament) */
.orn-tl { left: calc(-1 * var(--frame-border)); top: calc(-1 * var(--frame-border)); background-image: var(--ui-corner-tl); transform-origin: 14% 14%; }
.orn-tr { right: calc(-1 * var(--frame-border)); top: calc(-1 * var(--frame-border)); background-image: var(--ui-corner-tr); transform-origin: 86% 14%; }
.orn-br { right: calc(-1 * var(--frame-border)); bottom: calc(-1 * var(--frame-border)); background-image: var(--ui-corner-br); transform-origin: 86% 86%; }
.orn-bl { left: calc(-1 * var(--frame-border)); bottom: calc(-1 * var(--frame-border)); background-image: var(--ui-corner-bl); transform-origin: 14% 86%; }
.orn-tl::after { background-image: var(--ui-corner-tl-glow); }
.orn-tr::after { background-image: var(--ui-corner-tr-glow); animation-delay: -1.2s; }
.orn-br::after { background-image: var(--ui-corner-br-glow); animation-delay: -2.7s; }
.orn-bl::after { background-image: var(--ui-corner-bl-glow); animation-delay: -3.5s; }
.bar-art {
  position: absolute;
  inset: 0;
  background: var(--ui-bar-art-glow) center bottom / max(1920px, 100%) 96px no-repeat, var(--ui-bar-art) center bottom / max(1920px, 100%) 96px no-repeat;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.75));
  pointer-events: none;
}
.emblem-art { position: absolute; left: 50%; top: 0; width: 300px; height: 132px; translate: -50% 0; background: var(--ui-mount-art-glow) center top / contain no-repeat, var(--ui-mount-art) center top / contain no-repeat; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.8)); transform-origin: 50% 90%; pointer-events: none; }
:is(.card-head, .h-title)::before { content: ''; position: absolute; inset: 0 calc(-1 * var(--plate)); border: solid transparent; border-width: 0 var(--plate); border-image: var(--ui-title-art) 0 110 fill / 0 var(--plate) stretch; pointer-events: none; }

/* Living vines: corners sway on their knots, each at its own tempo; the bar's vine drifts, the mount's sways. */
@keyframes sway { 0%, 100% { rotate: -1.4deg; } 50% { rotate: 1.4deg; } }
@keyframes drift { 0%, 100% { translate: -6px 0; } 50% { translate: 6px -1.5px; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1px; } }
[data-skin='vine_live'] .orn-tl { animation: sway 7s ease-in-out infinite; }
[data-skin='vine_live'] .orn-tr { animation: sway 8.2s ease-in-out -2.1s infinite; }
[data-skin='vine_live'] .orn-br { animation: sway 7.6s ease-in-out -4.4s infinite; }
[data-skin='vine_live'] .orn-bl { animation: sway 8.8s ease-in-out -1.2s infinite; }
[data-skin='vine_live'] .bar-art { animation: drift 11s ease-in-out infinite; }
[data-skin='vine_live'] .emblem-art { animation: sway 9s ease-in-out infinite; }
[data-skin='vine_live'] :is(.card-head, .h-title)::before { animation: bob 6s ease-in-out infinite; }


/* The skins' effect canvases (site.js), and the surge some skins' light pulses with. */
.fx-skin { position: absolute; pointer-events: none; }
@keyframes surge { 0%, 100% { opacity: 0.55; } 40% { opacity: 1; } 46% { opacity: 0.65; } 52% { opacity: 1; } }

/* parchment sets its titles, nav and figures in Cinzel (an inscriptional serif; from Google Fonts, fetched only when a
   parchment page uses it; other scripts fall back to Georgia); the reading text stays Inter */
@font-face { font-family: 'Parchment Cinzel'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(https://fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt79mT7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Parchment Cinzel'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(https://fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt7-GT7LEc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root[data-skin='parchment'] { --font-display: 'Parchment Cinzel', Georgia, 'Times New Roman', serif; }
/* Parchment: its box's edges repeat (torn paper never stretches) round the paper itself, which lies under every framed
   block with dark ink on it. Corners lift in a draught, their illumination glints, candlelight drifts
   over the page, the border of ink runs along the roll, the seal's ribbon tails sway. */
@keyframes lift { 0%, 100% { rotate: 0deg; scale: 1; } 40% { rotate: -1.3deg; scale: 1.02; } 70% { rotate: 0.7deg; scale: 1.005; } }
@keyframes glint { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes candle { 0% { translate: 0 0; } 35% { translate: 70% 25%; } 70% { translate: 30% 70%; } 100% { translate: 110% 55%; } }
/* parchment's frame is sliced at its double rule (its torn edge and the rule, no paper of its own), so the paper
   inside is one tone right up to the rule */
:root[data-skin='parchment'] { --frame-repeat: round; --frame-cut: 22; --frame-w: var(--frame-border); }
[data-skin='parchment'] .orn-tl { animation: lift 8s ease-in-out infinite; }
[data-skin='parchment'] .orn-tr { animation: lift 9s ease-in-out -2.5s infinite; }
[data-skin='parchment'] .orn-br { animation: lift 8.5s ease-in-out -5s infinite; }
[data-skin='parchment'] .orn-bl { animation: lift 9.5s ease-in-out -1.2s infinite; }
[data-skin='parchment'] :is(.orn-tl, .orn-tr, .orn-br, .orn-bl)::after { animation: glint 4.2s ease-in-out infinite; }
[data-skin='parchment'] .orn-fx { inset: 0; overflow: hidden; }
[data-skin='parchment'] .orn-fx::before { content: ''; position: absolute; left: -30%; top: -40%; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(255, 206, 140, 0.38), transparent); mix-blend-mode: soft-light; animation: candle 22s ease-in-out infinite alternate; }
/* its header is a band of the paper itself, the nav in ink on it, routes being drawn on it (site.js) */
[data-skin='parchment'] .bar { background: none; }
[data-skin='parchment'] .bar::after { display: none; }
[data-skin='parchment'] .bar .nav-link, [data-skin='parchment'] .drawer .nav-link { color: #5b4229; text-shadow: none; }
[data-skin='parchment'] :is(.bar, .drawer) :is(.nav-link:hover, .nav-link.is-here, .nav-link.is-open) { color: #2b1c0e; text-shadow: none; }
[data-skin='parchment'] .fold-link { color: #5b4229; }
[data-skin='parchment'] .fold-link:hover { color: #2b1c0e; text-shadow: none; }
[data-skin='parchment'] .bar .nav-accent { color: color-mix(in srgb, var(--accent) 70%, #2b1c0e); }
[data-skin='parchment'] .nav-toggle span, [data-skin='parchment'] .nav-toggle span::before, [data-skin='parchment'] .nav-toggle span::after { background-color: #3a2614; }
[data-skin='parchment'] .drawer { background: var(--ui-paper) 0 0 / 440px; border-bottom-color: rgba(74, 48, 22, 0.4); }
[data-skin='parchment'] .emblem-art { transform-origin: 50% 53%; animation: sway 6s ease-in-out infinite; }
[data-skin='parchment'] :is(.card-head, .h-title)::before { animation: bob 6s ease-in-out infinite; }
[data-skin='parchment'] :is(.card, .panel) {
  --text-0: #2b1c0e;
  --text-1: #5b4229;
  --text-2: #86684a;
  --line: rgba(74, 48, 22, 0.2);
  --steel: #4a3219;
  --glow: none;
  color: var(--text-0);
  background: radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(120, 76, 32, 0.26)) padding-box, var(--ui-paper) 0 0 / 440px padding-box;
}
/* Hanging parchment (Admin > Appearance): the title's ribbon runs edge to edge and the paper hangs from its middle,
   inside its folded ends, torn along its sides and foot (the frame's own edges, none above), no corners curling */
[data-paper='hanging'][data-skin='parchment'] :is(.card, .panel) { --frame-w: 0; --hang-in: 30px; padding-bottom: 40px; background: none; }
[data-paper='hanging'][data-skin='parchment'] :is(.card, .panel)::after, [data-paper='hanging'][data-skin='parchment'] :is(.orn-tl, .orn-tr, .orn-br, .orn-bl) { display: none; }
[data-paper='hanging'][data-skin='parchment'] :is(.card-head, .h-title) { margin: -46px -50px 22px; }
[data-paper='hanging'][data-skin='parchment'] :is(.card, .panel)::before {
  content: '';
  position: absolute;
  inset: calc(26px - var(--frame-border)) calc(var(--hang-in) - var(--frame-border)) calc(-1 * var(--frame-border));
  z-index: -1;
  border: solid transparent;
  border-width: 0 var(--frame-border) var(--frame-border);
  border-image: var(--ui-frame) var(--frame-cut) / 0 var(--frame-border) var(--frame-border) round;
  background: radial-gradient(ellipse at 50% 30%, transparent 50%, rgba(120, 76, 32, 0.26)) padding-box, var(--ui-paper) 0 0 / 440px padding-box;
  pointer-events: none;
}
[data-skin='parchment'] :is(.card, .panel) :is(a:hover, .news-row:hover .news-title, .nav-link:hover, .nav-link.is-here) { color: color-mix(in srgb, var(--accent) 65%, #2b1c0e); }
[data-skin='parchment'] :is(.card, .panel) .nav-link { color: var(--text-1); }
[data-skin='parchment'] .post-body { color: var(--text-0); }
[data-skin='parchment'] .rank-row:nth-child(1) .rank-pos { color: var(--accent); text-shadow: none; }
[data-skin='parchment'] :is(.card, .panel) .tag { color: color-mix(in srgb, var(--tag) 70%, #000); }
[data-skin='parchment'] :is(.card, .panel, .fold) .input { border-color: rgba(74, 48, 22, 0.3); background: rgba(255, 250, 236, 0.55); box-shadow: inset 0 1px 3px rgba(74, 48, 22, 0.25); color: #2b1c0e; }
[data-skin='parchment'] :is(.card, .panel, .fold) .input:focus { border-color: var(--accent); box-shadow: inset 0 1px 3px rgba(74, 48, 22, 0.25), 0 0 0 3px rgba(var(--accent-rgb), 0.2); }
[data-skin='parchment'] .vine-stem { stroke: #3a2614; filter: none; }
[data-skin='parchment'] .vine-leaf { fill: #7a5a38; stroke: #3a2614; }
/* On the paper the theme's colour is a rubric: the accent mixed into the ink (bright accents and glows do not read on
   cream), and painted names read as coloured inks */
[data-skin='parchment'] :is(.card, .panel) { --accent-hot: color-mix(in srgb, var(--accent) 60%, #2b1c0e); --tag: color-mix(in srgb, var(--accent) 55%, #3a2614); }
[data-skin='parchment'] :is(.card, .panel) .paint { filter: brightness(0.62) saturate(1.3); }
[data-skin='parchment'] :is(.card, .panel) .char-link.paint:hover { filter: brightness(0.5) saturate(1.3); }
[data-skin='parchment'] :is(.card, .panel) .news-dot { box-shadow: none; }
[data-skin='parchment'] .rank-row:nth-child(1) .rank-pos { animation: none; }
[data-skin='parchment'] .rank-pos { font-weight: 700; }
[data-skin='parchment'] .stat-rune { stroke: var(--accent-hot); filter: none; }
[data-skin='parchment'] .char-class { letter-spacing: 0.1em; }
/* what players write keeps the reading face; Cinzel is for the site's own titles */
[data-skin='parchment'] :is(.tw-title, .rd-title, .composer-title, .dc-h, .dc-server, .w-news .news-title) { font-family: var(--font-ui); }
/* the title band: ivory letters set into the dyed silk */
[data-skin='parchment'] :is(.card-head, .h-title) { color: #f6ecd6; font-weight: 700; font-size: 16px; letter-spacing: 0.14em; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 0, 0, 0.3); }
[data-skin='parchment'] .card-head .card-more { color: rgba(246, 236, 214, 0.72); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.14em; }
[data-skin='parchment'] .card-head .card-more:hover { color: #fff8e8; }
/* the character's heading is printed on the paper like a guild's (guild.css): an inked double rule round it */
[data-skin='parchment'] .h-title.char-head { margin: 0 0 22px; padding: 26px 30px; border: 1px solid rgba(74, 48, 22, 0.45); border-image: none; border-radius: 3px;
  outline: 1px solid rgba(74, 48, 22, 0.28); outline-offset: 4px; background: rgba(74, 48, 22, 0.05); color: var(--text-1); font-size: inherit; font-weight: inherit; letter-spacing: normal; text-shadow: none; }
[data-skin='parchment'] .char-head .slab-end { display: none; }
[data-skin='parchment'] .char-name-big { color: var(--text-0); }
/* hanging paper still hangs from its band of silk on a character's page, above the printed heading */
[data-paper='hanging'][data-skin='parchment'] .h-title.char-head::before { content: ''; inset: -47px calc(-51px - var(--plate)) auto; height: 52px; border-width: 0 var(--plate); border-image: var(--ui-title) 0 110 fill / 0 var(--plate) stretch; animation: none; }
[data-paper='hanging'][data-skin='parchment'] .h-title.char-head { margin-top: 10px; }
/* hanging paper: the candlelight stays on the sheet (past it, its clipped light cast a square shadow on the page) */
[data-paper='hanging'][data-skin='parchment'] .orn-fx { clip-path: inset(calc(26px - var(--frame-border)) calc(var(--hang-in) - var(--frame-border)) 0); }

/* Arcane: the bar is a banner of dark woven cloth (`--ui-cloth`, holes in its alpha) torn along its foot, runes
   glowing there; the emblem's ring of runes turns. The cloth skins (arcane, living vines) draw their blocks
   only at the head (one slab edge to edge, in the skin's look); below it hangs the skin's cloth. site.js weaves the
   cloth, moving in the wind; until then, or without it, still cloth ends in a torn mask (`--hem`). */
:is([data-skin='arcane'], [data-skin='vine_live']) { --hem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='44'%3E%3Cpath d='M0 0H240L240 24.6L238 23.9L236 23.1L234 22.4L232 22.1L230 22L228 22L226 21.5L224 21.8L222 23L220 23.4L218 23L216 21.8L214 22.3L212 22.6L210 22.6L208 23.5L206 24.5L204 25.4L202 24.2L200 23.2L198 22.3L196 22.2L194 21.9L192 21.6L190 21.7L188 22.4L186 23.9L184 23.4L182 23.5L180 24.2L178 23.5L176 21.4L174 17.7L172 13.2L170 14.6L168 21.6L166 24.4L164 23.3L162 21.8L160 22.6L158 23L156 23.1L154 22.6L152 22.8L150 23.7L148 23.1L146 23.2L144 24.1L142 23.5L140 22.9L138 22.4L136 22.1L134 22.1L132 22.3L130 22.8L128 23.5L126 24.6L124 24.7L122 25.5L120 26.8L118 25.2L116 24.7L114 25.4L112 25.5L110 24.6L108 22.7L106 24.5L104 25L102 24.1L100 25L98 25.8L96 26.6L94 25.6L92 25.4L90 26L88 26.3L86 26.5L84 26.5L82 25.9L80 25.6L78 25.7L76 26L74 26.6L72 27.3L70 26.3L68 21.2L66 17L64 12.4L62 7.1L60 14.1L58 23.3L56 27.4L54 26.4L52 28.2L50 29.1L48 29.2L46 28L44 27.9L42 29L40 27.5L38 27.1L36 28L34 27.1L32 26.4L30 26L28 25.4L26 25.1L24 25L22 24.8L20 24.6L18 24.5L16 25.1L14 25.2L12 24.8L10 25L8 25L6 24.7L4 25.9L2 25.8L0 24.6Z'/%3E%3C/svg%3E"); }
[data-skin='arcane'] .bar { background: none; }
[data-skin='arcane'] .bar > .fx-skin { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.8)); }
[data-skin='arcane'] .bar::before { bottom: 24px; background: var(--ui-cloth) 0 0 / 512px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.8)); -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 43px) no-repeat, var(--hem) left bottom / 240px 44px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 43px) no-repeat, var(--hem) left bottom / 240px 44px repeat-x; }
[data-skin='arcane'] .bar.is-woven::before, [data-skin='arcane'] .bar::after, [data-skin='arcane'] .bar-art { display: none; }
@media (min-width: 861px) { [data-skin='arcane'] .nav { translate: 0 -20px; } }
/* every menu item opens with its first letter as a rune (kernel/view.php), lit in the theme's colour */
.nav-rune { display: none; }
/* its log-in fold lays the fields side by side and sends on a rune (ehwaz, E for enter) */
@media (min-width: 861px) {
  [data-skin='arcane'] .fold-form { display: flex; gap: 8px; }
  [data-skin='arcane'] .fold-form .input { width: 128px; }
}
[data-skin='arcane'] .fold-go { display: grid; place-items: center; width: 28px; height: 28px; background: none; }
[data-skin='arcane'] .fold-go .nav-rune { width: 10px; height: 15px; margin: 0; stroke-width: 1.5; transition: filter 200ms var(--ease); }
[data-skin='arcane'] .fold-go:hover .nav-rune { filter: drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 8px var(--accent)); }
[data-skin='arcane'] .nav-rune { display: block; flex: none; width: 7px; height: 11px; margin-right: 9px; overflow: visible; fill: none; stroke: var(--accent-hot); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px var(--accent)); }
[data-skin='arcane'] .emblem-art { transform-origin: 50% 42.67%; animation: turn 60s linear infinite; }
/* a block's or a page's title opens with its first letter's rune; the forum's home and gallery links are runes too */
[data-skin='arcane'] .nav-rune.head-rune { display: inline-block; width: 9px; height: 14px; margin: 0 11px 0 0; vertical-align: -1px; stroke-width: 1.4; }
[data-skin='arcane'] :is(.tw-nav-link, .dc-gallery) .fi { display: none; }
[data-skin='arcane'] .tw-nav-link .nav-rune { width: 14px; height: 21px; margin: 0 5px; stroke-width: 1.3; }
[data-skin='arcane'] .dc-gallery .nav-rune { width: 9px; height: 14px; margin: 0 4px 0 3px; }
[data-skin='arcane'] :is(.card-head, .h-title)::before { animation: surge 3.2s ease-in-out infinite; }
:is([data-skin='arcane'], [data-skin='vine_live']) :is(.card, .panel) { --frame-w: 0; padding-bottom: 46px; background: none; }
:is([data-skin='arcane'], [data-skin='vine_live']) :is(.card-head, .h-title) { --plate: 110px; height: 76px; margin: -46px -50px 22px; }
:is([data-skin='arcane'], [data-skin='vine_live']) :is(.orn-tl, .orn-tr, .orn-br, .orn-bl) { display: none; }
/* a block's cloth; once the wind runs its last --band px are the canvas's */
:is([data-skin='arcane'], [data-skin='vine_live']) :is(.card, .panel)::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--frame-border));
  z-index: -3;
  padding: 0;
  background: var(--ui-cloth) 0 0 / 512px;
  animation: none;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 43px) no-repeat, var(--hem) left bottom / 240px 44px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 43px) no-repeat, var(--hem) left bottom / 240px 44px repeat-x;
  pointer-events: none;
}
/* the whole-cloth variant (Admin > Appearance): the same cloth without holes, its hem straight, nothing burns */
[data-cloth='whole']:is([data-skin='arcane'], [data-skin='vine_live']) :is(.card, .panel)::before { background-image: var(--ui-weave); }
[data-cloth='whole']:is([data-skin='arcane'], [data-skin='vine_live']) :is(.card, .panel):not(.is-woven)::before, [data-cloth='whole'][data-skin='arcane'] .bar::before { -webkit-mask: none; mask: none; }
[data-cloth='whole'][data-skin='arcane'] .bar::before { background-image: var(--ui-weave); }
:is([data-skin='arcane'], [data-skin='vine_live']) .is-woven::before { -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--band)) no-repeat; mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--band)) no-repeat; }

/* Detail sets (Admin > Appearance, <html data-details>): themes.css swaps the ring, the corners, the mount and its art
   and the divider for the set's; the mount's art moves the set's way whatever the skin (arcane's ring of runes turns,
   the others sway on the medallion). Corners show where the skin shows its own (framed parchment); the CSS-only skins
   hide all of them (every rule here is for the drawn skins only). */
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='arcane'] .emblem-art { transform-origin: 50% 42.67%; animation: turn 60s linear infinite; }
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='parchment'] .emblem-art { transform-origin: 50% 53%; animation: sway 6s ease-in-out infinite; }
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='vine_live'] .emblem-art { transform-origin: 50% 90%; animation: sway 9s ease-in-out infinite; }
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live']):is([data-details='celestial'], [data-details='draconic'], [data-details='knotwork'], [data-details='astrolabe'], [data-details='chains'], [data-details='seraph']) .emblem-art {
  transform-origin: 50% 42.67%;
  animation: sway 8s ease-in-out infinite;
}
/* Embers burns in place: nothing of it turns or sways. Its flames are their own layers over the iron (two frames for
   the ring and the emblem, one for the divider and the corners, themes.css --ui-*-fire-a/-b): each frame flickers and
   lifts, the two out of step, so the tongues lick upward and the sparks in them drift up. */
@keyframes fire-a { 0%, 100% { opacity: 1; translate: 0 0; scale: 1 1; } 30% { opacity: 0.8; translate: 0 -1px; scale: 1 1.03; } 55% { opacity: 0.3; translate: 0 -3px; scale: 1 1.06; } 80% { opacity: 0.75; translate: 0 -1px; scale: 1 1.02; } }
@keyframes fire-b { 0%, 100% { opacity: 0.25; translate: 0 -3px; scale: 1 1.06; } 25% { opacity: 0.7; translate: 0 -2px; scale: 1 1.04; } 50% { opacity: 1; translate: 0 0; scale: 1 1; } 75% { opacity: 0.85; translate: 0 -1px; scale: 1 1.02; } }
@keyframes lick-a { 0%, 100% { opacity: 1; translate: 0 0; } 30% { opacity: 0.8; translate: 0 -1px; } 55% { opacity: 0.3; translate: 0 -3px; } 80% { opacity: 0.75; translate: 0 -1px; } }
@keyframes lick-b { 0%, 100% { opacity: 0.25; translate: 0 -3px; } 25% { opacity: 0.7; translate: 0 -2px; } 50% { opacity: 1; translate: 0 0; } 75% { opacity: 0.85; translate: 0 -1px; } }
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='embers'] :is(.crest-ring, .loader-ring) { animation: none; }
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='embers'] .player-big::after { animation: none; }
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='embers'] .emblem-art { animation: none; filter: none; }
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='embers'] :is(.crest-ring, .loader-ring, .emblem-art, .divider, .orn-tl, .orn-tr, .orn-br, .orn-bl)::before,
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='embers'] :is(.crest-ring, .loader-ring, .emblem-art)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ui-ring-fire-a) center / contain no-repeat;
  animation: lick-a 1.3s ease-in-out infinite;
  pointer-events: none;
}
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='embers'] :is(.crest-ring, .loader-ring)::after { background-image: var(--ui-ring-fire-b); animation-name: lick-b; animation-duration: 1.9s; }
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='embers'] .crest-ring.is-back::before, :root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='embers'] .crest-ring.is-back::after { display: none; }
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='embers'] .emblem-art::before { background: var(--ui-mount-fire-a) center top / contain no-repeat; transform-origin: 50% 80%; animation-name: fire-a; }
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='embers'] .emblem-art::after { background: var(--ui-mount-fire-b) center top / contain no-repeat; transform-origin: 50% 80%; animation: fire-b 1.9s ease-in-out infinite; }
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='embers'] .divider::before { background: var(--ui-divider-fire-a) center / auto 44px no-repeat; transform-origin: 50% 70%; animation: fire-a 1.5s ease-in-out infinite; }
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='embers'] .orn-tl::before { background: var(--ui-corner-tl-fire-a) center / 100% 100% no-repeat; }
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='embers'] .orn-tr::before { background: var(--ui-corner-tr-fire-a) center / 100% 100% no-repeat; animation-delay: -0.4s; }
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='embers'] .orn-br::before { background: var(--ui-corner-br-fire-a) center / 100% 100% no-repeat; animation-delay: -0.9s; }
:root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='embers'] .orn-bl::before { background: var(--ui-corner-bl-fire-a) center / 100% 100% no-repeat; animation-delay: -0.2s; }
@media (prefers-reduced-motion: reduce) { :root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='embers'] :is(.crest-ring, .loader-ring, .emblem-art, .divider, .orn-tl, .orn-tr, .orn-br, .orn-bl)::before, :root:is([data-skin='arcane'], [data-skin='parchment'], [data-skin='vine_live'])[data-details='embers'] :is(.crest-ring, .loader-ring, .emblem-art)::after { animation: none; } }

/* Modern: a faint pattern of dots and hairlines drifting one tile at a time (so it loops seamlessly), a soft gradient
   mask sweeping over it. */
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) :is(.orn-fx, .bar-art) {
  border-radius: inherit;
  background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.6px), linear-gradient(135deg, transparent 49%, rgba(var(--accent-rgb), 0.08) 50%, transparent 51%);
  background-size: 18px 18px;
  filter: none;
  -webkit-mask: radial-gradient(closest-side, #000, transparent) -40% 0 / 70% 160% no-repeat;
  mask: radial-gradient(closest-side, #000, transparent) -40% 0 / 70% 160% no-repeat;
  animation: sweep 16s ease-in-out infinite alternate, pattern 6s linear infinite;
}
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .orn-fx { inset: 0; }
@keyframes sweep { to { -webkit-mask-position: 140% 100%; mask-position: 140% 100%; } }
@keyframes pattern { to { background-position: 18px 18px; } }

/* ---------- Skins: <html data-skin> picks the art (img/ui/themes.css); what CSS draws per skin ---------- */

/* The nav underline: vine grows its SVG vine (above), parchment the same as a stroke of ink; the others draw a line. */
:root:not([data-skin='parchment']) .nav-link .vine { display: none; }
:root:not([data-skin='parchment']) .nav-link::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: var(--accent-hot);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8);
  transform: scaleX(0);
  transition: transform 350ms var(--ease);
  pointer-events: none;
}
:root:not([data-skin='parchment']) :is(.nav-link:hover, .nav-link.is-here, .nav-link.is-open)::after { transform: scaleX(1); }
[data-skin='arcane'] .nav-link::after { height: 1px; background: linear-gradient(90deg, transparent, var(--accent-hot) 30% 70%, transparent); box-shadow: 0 0 8px var(--accent); }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .nav-link::after { border-radius: 2px; background: var(--accent); box-shadow: none; }

/* Modern: no art; glass, hairlines and the accent. */
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .bar { background: rgba(8, 9, 12, 0.72); backdrop-filter: blur(14px); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06); }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .bar::before, :is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) :is(.emblem-mount, .emblem-glow, .emblem-art, .card::after, .panel::after, .card-head::after, .h-title::after, .card-head::before, .h-title::before, .divider::after, .orn-tl, .orn-tr, .orn-br, .orn-bl) { display: none; }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .bar::after { bottom: 0; height: 1px; filter: none; }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) :is(.card, .panel) { border: 1px solid rgba(255, 255, 255, 0.08); border-image: none; border-radius: 18px; background: rgba(12, 13, 17, 0.72); backdrop-filter: blur(16px); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9); filter: none; animation: none; }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) :is(.card-head, .h-title) { height: auto; margin: 0 0 16px; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--line); border-image: none; font-size: 13px; letter-spacing: 0.1em; text-shadow: none; }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .h-title { justify-content: flex-start; }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .btn { min-width: 0; padding: 0 22px; border: 0; border-image: none; border-radius: 10px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); letter-spacing: 0.08em; }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .btn:hover { background: rgba(255, 255, 255, 0.1); filter: none; text-shadow: none; }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) :is(.btn-primary, .btn-play, .btn-accent) { background: var(--accent); box-shadow: 0 10px 26px -12px rgba(var(--accent-rgb), 0.9); }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) :is(.btn-primary, .btn-play, .btn-accent):hover { background: color-mix(in srgb, var(--accent) 85%, #fff); }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .divider { background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.7), transparent) center / 100% 1px no-repeat; }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .crest-ring { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; background: none; }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .crest-ring.is-back { border: 1px dashed rgba(var(--accent-rgb), 0.5); }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) :is(.thumb-arrow, .fold-go) { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9edf2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) :is(.thumb-arrow, .fold-go):hover { background-color: var(--accent); }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .input { border-color: rgba(255, 255, 255, 0.08); border-radius: 10px; background: rgba(255, 255, 255, 0.04); box-shadow: none; }

/* ---------- Narrow screens ---------- */

@media (max-width: 960px) {
  .home-col { grid-column: 1 / -1; }
  .home-col:empty { display: none; }
  .slide-art { -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), #000); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), #000); opacity: 0.6; }
  .nav-link { padding: 10px 9px; letter-spacing: 0.1em; }
}

@media (max-width: 860px) {
  .bar-row { grid-template-columns: 44px 1fr 44px; height: 80px; }
  .emblem { justify-self: center; width: 200px; height: 80px; }
  .emblem-mount { width: 240px; height: 106px; }
  .emblem img { width: 120px; max-height: 93px; }
  .nav-toggle { display: block; grid-column: 3; grid-row: 1; }
  .drawer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    max-height: calc(100dvh - 80px);
    padding: 44px 20px 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(3, 3, 4, 0.97);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.4);
  }
  .head.is-open .drawer { display: flex; animation: reveal 300ms var(--ease); }
  .nav { flex-direction: column; align-items: stretch; padding: 0; }
  .nav-link { justify-content: center; padding: 14px 4px; border-bottom: 1px solid var(--line); }
  .nav-link::after { display: none; }
  .nav .btn { margin: 10px auto; }
  .fold { width: auto !important; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 400ms var(--ease), opacity 300ms var(--ease); }
  .fold.is-open { grid-template-rows: 1fr; }
  .fold > * { min-height: 0; width: auto; }
  .fold-form { grid-template-columns: 1fr; padding: 10px 0 14px; }
  .fold-go { grid-row: auto; grid-column: 1 / -1; justify-self: center; }
  .fold-menu { flex-direction: column; align-items: stretch; padding: 0 0 8px; }
  .fold-link { width: 100%; padding: 12px 4px; }
  .thumbs-list { grid-auto-columns: minmax(170px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; }
  .thumb { scroll-snap-align: start; }
  .thumb-arrow { display: none; }
  .foot-row { flex-wrap: wrap; }
  .foot-brand { flex-basis: 180px; }
  .foot-tools { flex-basis: 100%; justify-content: space-between; margin-inline-start: 0; }
}

@media (max-width: 560px) {
  :root { --frame-border: 16px; --frame-w: calc(var(--frame-cut) * 0.65px); --orn: 98px; }
  .card, .panel { padding: 18px 10px 24px; }
  :is([data-skin='arcane'], [data-skin='vine_live']) :is(.card-head, .h-title) { --plate: 80px; margin: -34px -26px 18px; }
  [data-paper='hanging'][data-skin='parchment'] :is(.card-head, .h-title) { margin: -34px -26px 18px; }
  [data-paper='hanging'][data-skin='parchment'] :is(.card, .panel) { --hang-in: 18px; }
  .emblem-art { width: 240px; height: 106px; }
  .news-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .news-row .tag { grid-column: 1 / -1; }
  .hero { height: 560px; }
  .btn-lg { min-width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .has-motion .bg-map-art, .has-motion .bg-media, .crest-ring, .bar::after, .orn, .orn::before, .orn::after, .bar-art, .emblem-art, .card-head::before, .h-title::before, .card::before, .panel::before { animation: none !important; }
  .loader-ring, .play-runes, [data-skin='arcane'] .btn-play, [data-skin='arcane'] :is(.btn-primary, .btn-play, .btn-accent)::before, [data-skin='arcane'] :is(.btn-primary, .btn-play, .btn-accent)::after { animation: none !important; }
}

/* ---------- Loader: the logo and a vine that grows as the page's art arrives (site.js) ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: radial-gradient(ellipse at 50% 45%, #0d0d10, var(--ink) 70%);
  transition: opacity 700ms var(--ease), visibility 0s 700ms;
  /* without the script it still leaves */
  animation: loader-out 0s 8s forwards;
}
.loader.is-done { opacity: 0; visibility: hidden; }
@keyframes loader-out { to { opacity: 0; visibility: hidden; } }
.loader-logo { width: min(300px, 64vw); max-height: 40vh; object-fit: contain; filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), 0.35)); animation: loader-breathe 2.4s ease-in-out infinite; }
@keyframes loader-breathe { 50% { filter: drop-shadow(0 0 34px rgba(var(--accent-rgb), 0.6)); scale: 1.02; } }
.loader-vine { width: min(420px, 80vw); height: 40px; overflow: visible; }
.loader-track { fill: none; stroke: rgba(150, 168, 192, 0.12); stroke-width: 2; }
.loader-stem { fill: none; stroke: #a8b4c6; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.8)); transition: stroke-dashoffset 300ms var(--ease); }
/* each skin's line: parchment cream on a ruled track, arcane its light, modern thin */
[data-skin='parchment'] .loader-track { stroke: rgba(233, 218, 184, 0.25); }
[data-skin='parchment'] .loader-stem { stroke: #e9dab8; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.9)); }
[data-skin='arcane'] .loader-stem { stroke: var(--accent-hot); stroke-width: 2; filter: drop-shadow(0 0 6px var(--accent)); }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .loader-track { stroke: rgba(255, 255, 255, 0.08); stroke-width: 2; }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .loader-stem { stroke: var(--accent); stroke-width: 2; filter: none; }
/* arcane's loader: the band of runes of the theme's magic circle turning, and inside it a pentagram drawn stroke by
   stroke as the page's art arrives */
.loader-circle { display: none; }
/* the samurai skin's brushed kanji before menu items and its loader kana (kernel/view.php); hidden under the others */
.nav-kanji, .loader-kana { display: none; }
[data-skin='arcane'] .loader-vine { display: none; }
[data-skin='arcane'] .loader-logo { width: min(220px, 50vw); }
[data-skin='arcane'] .loader-circle { position: relative; display: grid; place-items: center; width: min(260px, 64vw); aspect-ratio: 1; }
.loader-ring { position: absolute; inset: -4%; background: var(--ui-ring-glow) center / contain no-repeat, var(--ui-ring) center / contain no-repeat; opacity: 0.85; animation: turn 24s linear infinite;
  mask: radial-gradient(closest-side, transparent 70.5%, #000 72%); }
.loader-star { position: absolute; inset: 0; overflow: visible; fill: none; stroke: var(--accent-hot); stroke-width: 1; stroke-linejoin: round; filter: drop-shadow(0 0 2px var(--accent)) drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.7)); }
.loader-star path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.loader-label { color: var(--text-2); font: 600 12px var(--font-display); letter-spacing: 0.3em; text-transform: uppercase; }

/* ---------- Coins (modules/economy): the coin, the wallet, packs as piles of it, the modal that sells one ---------- */
.coin-icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
.coin-icon.coin-big { width: 88px; height: 88px; filter: drop-shadow(0 0 18px rgba(255, 200, 80, 0.35)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7)); animation: coin-spin 6s ease-in-out infinite; }
@keyframes coin-spin { 0%, 70%, 100% { transform: rotateY(0); } 80% { transform: rotateY(180deg); } 90% { transform: rotateY(360deg); } }
.nav-coins { gap: 6px; color: #ffd76a; }
.nav-coins b { font-variant-numeric: tabular-nums; }
.coin-wallet { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 4px 0 26px; perspective: 400px; }
.coin-balance { margin: 0; font: 700 40px var(--font-display); letter-spacing: -0.01em; }
.coin-balance span { color: var(--text-2); font-size: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.coin-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-bottom: 26px; }
.coin-pack { position: relative; display: grid; justify-items: center; gap: 6px; padding: 22px 12px 16px; overflow: hidden; border: 1px solid rgba(255, 210, 110, 0.18); border-radius: 14px; cursor: pointer;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 200, 80, 0.16), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.35)); color: var(--text-0); font: inherit;
  transition: transform 260ms var(--spring), border-color 200ms, box-shadow 200ms; }
.coin-pack:hover { transform: translateY(-4px); border-color: rgba(255, 210, 110, 0.55); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 26px rgba(255, 190, 60, 0.18); }
.coin-pile { position: relative; display: flex; justify-content: center; height: 64px; }
.coin-pile .coin-icon { width: 44px; height: 44px; margin: 0 -14px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.coin-pile .coin-icon:nth-child(even) { translate: 0 14px; }
.coin-pack-amount { font: 700 22px var(--font-display); color: #ffd76a; text-shadow: 0 0 12px rgba(255, 190, 60, 0.35); }
.coin-pack-price { color: var(--text-1); font-weight: 600; }
.coin-pack-ribbon { position: absolute; top: 12px; right: -34px; padding: 3px 36px; rotate: 35deg; background: linear-gradient(90deg, #c8251a, #e8562a); color: #fff; font: 700 10px var(--font-display); letter-spacing: 0.06em; }
.coin-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.coin-redeem { display: flex; gap: 8px; }
.coin-redeem .input { flex: 1; text-transform: uppercase; letter-spacing: 0.12em; }
.coin-list { display: grid; gap: 2px; margin: 0 0 8px; padding: 0; list-style: none; }
.coin-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.coin-list small { grid-column: 1 / -1; color: var(--text-2); font-size: 12px; }
.coin-list .is-in { color: #8dd88a; }
.coin-list .is-out { color: #ff8a7a; }
.coin-list .is-pending span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-inline-end: 8px; border-radius: 50%; background: #ffd76a; box-shadow: 0 0 8px #ffd76a; animation: flicker 1.6s infinite; }
@media (max-width: 760px) { .coin-split { grid-template-columns: 1fr; } .coin-wallet { flex-direction: column; text-align: center; } }

/* the site's boxes over the page (a <dialog>): what a click opens to buy */
.modal { width: min(460px, calc(100vw - 32px)); padding: 26px; border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 18px; color: var(--text-0);
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), 0.14), transparent 60%), #0c0d11; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(var(--accent-rgb), 0.12); }
.modal[open] { animation: modal-in 260ms var(--spring); }
.modal::backdrop { background: rgba(3, 3, 5, 0.72); backdrop-filter: blur(4px); }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
.modal-close-form { position: absolute; top: 10px; right: 10px; margin: 0; }
.modal-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: var(--text-1); font-size: 20px; cursor: pointer; }
.modal-close:hover { background: rgba(255, 255, 255, 0.14); }
.modal-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 18px; }
.modal-head h3 { margin: 0; font: 700 20px var(--font-display); }
.modal-head p { margin: 2px 0 0; }
.modal-head .coin-big { width: 56px; height: 56px; animation: none; }
.modal-price { font: 700 20px var(--font-display); color: rgb(var(--accent-rgb)); }
.modal-label { margin: 0 0 8px; color: var(--text-2); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.pay-ways { display: grid; gap: 8px; }
.pay-way { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: rgba(255, 255, 255, 0.03); color: var(--text-0); font: inherit; text-align: left; cursor: pointer; transition: border-color 200ms, background 200ms, transform 200ms var(--spring); }
.pay-way:hover { border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.08); transform: translateX(3px); }
.pay-way-icon { grid-row: span 2; width: 40px; height: 28px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.pay-way-icon img { display: block; width: 40px; height: 28px; border-radius: 6px; }
.vip-bizum { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 12px 0; padding: 12px 14px; border: 1px solid rgba(5, 192, 199, 0.45); border-radius: 12px; background: rgba(5, 192, 199, 0.08); }
.vip-bizum p { margin: 0; }
.pay-way small { color: var(--text-2); font-size: 12px; }
/* instant (a provider) or confirmed by an admin (paid by hand), and what paying by hand saves */
.pay-way b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pay-tag { padding: 1px 8px; border-radius: 99px; font: 700 10px var(--font-display); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.pay-tag.is-instant { background: rgba(80, 200, 120, 0.16); color: #8fe0a8; }
.pay-tag.is-wait { background: rgba(240, 190, 80, 0.14); color: #f0c870; }
.pay-tag.is-off { background: #e8364f; color: #fff; box-shadow: 0 0 10px rgba(232, 54, 79, 0.5); }

/* ---------- VIP (modules/vip): each tier a card that sells itself: its art floating in a halo of its colour, a ring
   turning, its effect's particles (site.js, vipFx) over it, a border of light running round, what it gives as marked
   lines, a price from, and its plans and ways to pay in a box ---------- */
@property --vip-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.vip-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; align-items: stretch; margin-top: 8px; }
.vip-card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 0 18px 20px; overflow: hidden; border-radius: 20px;
  background: radial-gradient(ellipse at 50% 16%, color-mix(in srgb, var(--role) 30%, transparent), transparent 58%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.55));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role) 35%, transparent), 0 22px 50px rgba(0, 0, 0, 0.6); transition: transform 320ms var(--spring), box-shadow 320ms; }
.vip-card::before { content: ''; position: absolute; inset: 0; z-index: -1; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--vip-a), transparent 0 58%, color-mix(in srgb, var(--role) 80%, transparent) 72%, #fff 78%, color-mix(in srgb, var(--role) 80%, transparent) 84%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: vip-run 6s linear infinite; }
.vip-card::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.08) 48%, transparent 60%) -150% 0 / 250% 100% no-repeat; transition: background-position 900ms ease; }
.vip-card:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role) 60%, transparent), 0 26px 60px rgba(0, 0, 0, 0.65), 0 0 50px color-mix(in srgb, var(--role) 28%, transparent); }
.vip-card:hover::after { background-position: 150% 0; }
.vip-card.is-best { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role) 60%, transparent), 0 22px 50px rgba(0, 0, 0, 0.6), 0 0 60px color-mix(in srgb, var(--role) 30%, transparent); }
.vip-card.is-best::before { animation-duration: 3.5s; padding: 2px; }
@keyframes vip-run { to { --vip-a: 360deg; } }
.vip-best { position: absolute; top: 18px; right: -40px; z-index: 3; padding: 4px 46px; rotate: 38deg; background: linear-gradient(90deg, var(--role), color-mix(in srgb, var(--role) 60%, #fff));
  color: #0b0b0e; font: 800 10px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }
.vip-stage { position: relative; display: grid; place-items: center; height: 250px; margin: 0 -18px; }
.vip-halo { position: absolute; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--role) 60%, transparent), transparent 68%); filter: blur(16px); animation: vip-breathe 4.5s ease-in-out infinite; }
.vip-ring { position: absolute; width: 250px; height: 250px; border: 1px dashed color-mix(in srgb, var(--role) 55%, transparent); border-radius: 50%; animation: vip-turn 50s linear infinite;
  box-shadow: 0 0 0 14px color-mix(in srgb, var(--role) 6%, transparent), inset 0 0 30px color-mix(in srgb, var(--role) 18%, transparent); }
@keyframes vip-turn { to { rotate: 360deg; } }
.vip-fx { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.name-sparks { position: fixed; inset: 0; z-index: 50; width: 100vw; height: 100vh; pointer-events: none; }
/* the trophy: the art as drawn (silver) with its finish laid over it in its own shape (a colour blend keeps every
   highlight and shadow, a softer overlay deepens the metal), floating over its halo */
.vip-trophy { position: relative; z-index: 1; width: 236px; aspect-ratio: 1; isolation: isolate; animation: vip-float 6s ease-in-out infinite;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--role) 50%, transparent)) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0 24px 24px rgba(0, 0, 0, 0.85)); }
/* the cup's shadow on the floor under it, smaller and fainter while it floats up */
.vip-floor { position: absolute; bottom: 8px; left: 50%; width: 180px; height: 26px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.85), transparent); filter: blur(3px); animation: vip-floor 6s ease-in-out infinite; }
@keyframes vip-floor { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 0.8; opacity: 0.6; } }
.vip-trophy.is-small { width: 76px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--role) 55%, transparent)); animation: none; }
.vip-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.vip-tint { position: absolute; inset: 0; background: var(--tint); opacity: var(--tint-a); mix-blend-mode: color; pointer-events: none;
  -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; }
.vip-tint.is-rich { mix-blend-mode: overlay; opacity: calc(var(--tint-a) * 0.45); }
/* a shine sweeping across the cup in its own shape, oftener and brighter the higher the tier's VIP level (--lvl) */
.vip-shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: calc(0.3 + 0.2 * var(--lvl));
  -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.9) 50%, transparent 58%) -150% 0 / 250% 100% no-repeat;
  animation: vip-shine max(2.2s, calc(7.6s - 1.4s * var(--lvl))) ease-in-out infinite 0.6s; }
.vip-crest { position: relative; z-index: 1; width: 120px; height: 150px; clip-path: polygon(50% 0, 100% 30%, 82% 100%, 18% 100%, 0 30%);
  background: linear-gradient(160deg, #fff 0%, var(--role) 30%, color-mix(in srgb, var(--role) 50%, #000) 100%); filter: drop-shadow(0 0 24px var(--role)); animation: vip-float 6s ease-in-out infinite; }
.vip-crest.is-small { width: 48px; height: 60px; animation: none; }
@keyframes vip-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes vip-breathe { 0%, 100% { opacity: 0.75; scale: 1; } 50% { opacity: 1; scale: 1.08; } }
.vip-card-head { text-align: center; }
/* the plate under the trophy: a banner with cut ends, rimmed in the tier's colour, its words spaced out */
.vip-plate { position: relative; z-index: 3; width: fit-content; max-width: 100%; margin: -26px auto 0; padding: 2px;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--role) 35%, #1a1a1a), color-mix(in srgb, var(--role) 70%, #fff), color-mix(in srgb, var(--role) 35%, #1a1a1a)); }
.vip-plate span { display: block; min-width: 190px; padding: 9px 30px 10px; clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%);
  background: linear-gradient(180deg, #23262f, #0c0d11 60%, #16181e); color: color-mix(in srgb, var(--role) 60%, #fff); font: 800 17px/1.2 var(--font-display); letter-spacing: 0.18em;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 12px color-mix(in srgb, var(--role) 70%, transparent), 0 1px 1px #000; }
.vip-card-head p { margin: 10px 0 0; color: var(--text-1); font-style: italic; }
/* rates and rewards as tiles (a value over a short label), a row a kind; the other perks as short lines, the rest folded */
.vip-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); gap: 6px; }
.vip-tile { display: grid; justify-items: center; gap: 1px; padding: 7px 4px 6px; border: 1px solid color-mix(in srgb, var(--role) 28%, transparent); border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--role) 14%, transparent), rgba(0, 0, 0, 0.25)); text-align: center; }
.vip-tile b { display: inline-flex; align-items: center; gap: 4px; color: var(--role); font: 800 17px/1.15 var(--font-display); white-space: nowrap; }
.vip-tile small { color: var(--text-2); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; }
.vip-tile.is-coins b { color: #ffd76a; }
.vip-tile.is-coins .coin-icon { width: 15px; height: 15px; }
.vip-tile.is-pulls b { color: #c9a2ff; }
.vip-pull-mark { width: 11px; height: 11px; border-radius: 3px; background: linear-gradient(135deg, #c86bff, #4fc6ff); box-shadow: 0 0 8px #9b6bff; }
.vip-more summary { color: var(--role); font-size: 12.5px; font-weight: 600; cursor: pointer; list-style: none; }
.vip-more summary::-webkit-details-marker { display: none; }
.vip-more summary::before { content: '+'; display: inline-block; width: 18px; font-weight: 800; transition: rotate 200ms; }
.vip-more[open] summary::before { rotate: 45deg; }
.vip-more[open] summary { margin-bottom: 8px; }
.vip-perk-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vip-perk { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 8px; color: var(--text-1); font-size: 13px; line-height: 1.3; }
.vip-perk b { color: var(--role); font-weight: 800; }
.vip-perk-mark { width: 10px; height: 10px; justify-self: center; rotate: 45deg; background: var(--role); box-shadow: 0 0 8px var(--role); }
.vip-perk.is-coins .vip-perk-mark { border-radius: 50%; rotate: 0deg; background: #ffd76a; box-shadow: 0 0 8px #ffb21a; }
.vip-perk.is-pulls .vip-perk-mark { border-radius: 3px; background: linear-gradient(135deg, #c86bff, #4fc6ff); box-shadow: 0 0 8px #9b6bff; }
.vip-perk.is-site .vip-perk-mark { background: transparent; box-shadow: inset 0 0 0 2px var(--role); }
.vip-bundles { display: grid; gap: 6px; }
.vip-bundle-title { margin: 4px 0 0; color: var(--text-2); font: 600 11px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.vip-items-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.vip-item { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 6px 4px; border: 1px solid color-mix(in srgb, var(--role) 35%, transparent); border-radius: 10px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--role) 22%, transparent), rgba(0, 0, 0, 0.4)); text-align: center; }
.vip-item-art { position: relative; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; }
.vip-item .item-icon { position: absolute; height: 66px; width: auto; max-width: none; translate: 0 -4%; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--role) 50%, transparent)); }
.vip-item small { display: -webkit-box; overflow: hidden; color: var(--text-0); font-size: 10.5px; font-weight: 600; line-height: 1.2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vip-item-tag { position: absolute; top: -7px; right: -4px; padding: 1px 6px; border-radius: 99px; background: var(--role); color: #0b0b0e; font: 800 8.5px var(--font-display); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.vip-perks { color: var(--text-1); font-size: 13.5px; }
.vip-card-foot { display: grid; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--role) 25%, transparent); text-align: center; }
.vip-from { display: grid; justify-items: center; }
.vip-from small { color: var(--text-2); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.vip-from b { color: var(--text-0); font: 800 38px/1.1 var(--font-display); letter-spacing: -0.01em; text-shadow: 0 0 22px color-mix(in srgb, var(--role) 45%, transparent); }
/* The gacha (modules/economy/gacha.php): the banner (its art, or its colour glowing, a light running round it, the
   featured prizes floating at its side), the wallet, pull buttons in the banner's colour, the reveal (cards dealt face
   down that turn over one by one, an epic or a legendary charging first and bursting in its rarity's colour), the
   history and the rates. Rarities: common grey, rare blue, excellent green (the key epic), legendary gold (GACHA_TIERS). */
.gacha { --banner: #b264ff; }
.gacha .is-common { --tier: #9aa3ad; }
.gacha .is-rare { --tier: #4f9dff; }
.gacha .is-epic { --tier: #3ddc84; }
.gacha .is-legendary { --tier: #ffb21a; }
.gacha-banner { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px; min-height: 290px; padding: 30px; overflow: hidden; border-radius: 18px;
  background: linear-gradient(90deg, rgba(5, 5, 8, 0.94) 0%, rgba(5, 5, 8, 0.6) 46%, rgba(5, 5, 8, 0.1) 78%), var(--art, radial-gradient(ellipse at 72% 42%, color-mix(in srgb, var(--banner) 60%, transparent), transparent 62%)) center / cover no-repeat, #0b0b10;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--banner) 40%, transparent), 0 22px 50px rgba(0, 0, 0, 0.6), 0 0 60px -20px var(--banner); }
.gacha-banner::before { content: ''; position: absolute; inset: 0; z-index: 2; padding: 2px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--vip-a), transparent 0 55%, color-mix(in srgb, var(--banner) 80%, transparent) 70%, #fff 76%, color-mix(in srgb, var(--banner) 80%, transparent) 82%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: vip-run 5s linear infinite; }
.gacha-banner-text h2 { margin: 0; color: #fff; font: 800 clamp(26px, 4vw, 40px) / 1.05 var(--font-display); letter-spacing: 0.02em; text-shadow: 0 0 24px color-mix(in srgb, var(--banner) 80%, transparent), 0 2px 2px #000; }
.gacha-banner-text p { max-width: 460px; margin: 8px 0 0; color: var(--text-1); }
.gacha-banner-text .gacha-ends { color: color-mix(in srgb, var(--banner) 60%, #fff); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.gacha-fx { z-index: 1; }
.gacha-banner-text { position: relative; z-index: 3; }
/* the summoning portal the featured prizes float over: three rings turning their own ways round a glow */
.gacha-stage { position: relative; z-index: 3; display: grid; place-items: center; padding: 26px 10px 6px; }
.gacha-portal { position: absolute; left: 50%; top: 52%; width: 340px; aspect-ratio: 1; translate: -50% -50%; rotate: x 64deg; pointer-events: none; }
.gacha-portal i { position: absolute; inset: 0; border-radius: 50%; }
.gacha-portal i:nth-child(1) { background: radial-gradient(circle, color-mix(in srgb, var(--banner) 55%, transparent), transparent 62%); animation: vip-breathe 3.6s ease-in-out infinite; }
.gacha-portal i:nth-child(2) { inset: 8%; border: 2px solid color-mix(in srgb, var(--banner) 70%, #fff); box-shadow: 0 0 22px var(--banner), inset 0 0 22px var(--banner);
  -webkit-mask: conic-gradient(#000 0 12%, transparent 12% 18%, #000 18% 45%, transparent 45% 52%, #000 52% 80%, transparent 80% 86%, #000 86%); mask: conic-gradient(#000 0 12%, transparent 12% 18%, #000 18% 45%, transparent 45% 52%, #000 52% 80%, transparent 80% 86%, #000 86%); animation: vip-turn 14s linear infinite; }
.gacha-portal i:nth-child(3) { inset: 22%; border: 1px dashed color-mix(in srgb, var(--banner) 80%, #fff); box-shadow: 0 0 14px var(--banner); animation: vip-turn 9s linear infinite reverse; }
.gacha-featured { position: relative; display: flex; gap: 12px; }
.gacha-prize { display: grid; justify-items: center; align-content: start; gap: 6px; width: 104px; padding: 10px 8px 12px; border-radius: 14px; animation: vip-float 6s ease-in-out infinite;
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--tier) 38%, transparent), rgba(4, 4, 8, 0.75) 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier) 60%, transparent), 0 0 26px -6px var(--tier); }
.gacha-prize:nth-child(2) { animation-delay: -1.5s; }
.gacha-prize:nth-child(3) { animation-delay: -3s; }
.gacha-prize:nth-child(4) { animation-delay: -4.5s; }
.gacha-prize { position: relative; }
.gacha-prize-halo { position: absolute; top: 4px; left: 50%; z-index: -1; width: 92px; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tier) 65%, transparent), transparent 66%); filter: blur(6px); animation: vip-breathe 3.2s ease-in-out infinite; }
.gacha-prize.is-legendary { width: 118px; box-shadow: inset 0 0 0 1px var(--tier), 0 0 36px -4px var(--tier); }
.gacha-prize.is-legendary::before { content: ''; position: absolute; inset: -2px; z-index: -1; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--vip-a), transparent 0 60%, var(--tier) 74%, #fff 78%, var(--tier) 82%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: vip-run 3s linear infinite; }
.gacha-prize small { color: var(--text-0); font-size: 11px; font-weight: 600; line-height: 1.2; text-align: center; }
.gacha-prize-art, .gacha-card-art, .gacha-prize-pic { position: relative; display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; }
.gacha-prize-art .item-icon, .gacha-card-art .item-icon, .gacha-prize-pic .item-icon { position: absolute; height: 96px; width: auto; max-width: none; translate: 0 -4%; filter: drop-shadow(0 0 8px var(--tier)); }
.gacha-prize-art .coin-icon, .gacha-card-art .coin-icon, .gacha-prize-pic .coin-icon { width: 46px; height: 46px; filter: drop-shadow(0 0 10px #ffb21a); }
.prize-mark { width: 40px; height: 40px; border-radius: 10px; rotate: 45deg; background: linear-gradient(135deg, #c86bff, #4fc6ff); box-shadow: 0 0 16px #9b6bff; }
.prize-mark.is-skin { border-radius: 50%; rotate: 0deg; background: conic-gradient(#ff5a7a, #ffd36b, #6bffb0, #5ab4ff, #c86bff, #ff5a7a); }
.gacha-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 0 14px; }
.gacha-wallet { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--text-1); }
.gacha-wallet > .coin-icon { width: 22px; height: 22px; }
.gacha-wallet b { color: var(--text-0); font: 800 18px var(--font-display); }
.gacha-pity b { color: #ffd36b; }
.gacha-msg { margin: 0 0 10px; color: #f08a8a; text-align: center; }
.gacha-reveal { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 26px; padding: 24px;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--banner) 28%, rgba(4, 4, 8, 0.92)), rgba(2, 2, 4, 0.97) 72%); }
.gacha-reveal[hidden] { display: none; }
/* the reel: a dark glass window, its ends fading, a strip of prize tiles (each with its rarity's glow and a bar of its
   colour at the foot) racing under a marker of the banner's light, blurred while fast; the prize won lifts and glows */
.gacha-reel-head { position: relative; z-index: 2; display: flex; justify-content: space-between; width: min(92vw, 1040px); margin: 0; color: var(--text-1);
  font: 700 13px var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; }
.gacha-reel-head b { color: color-mix(in srgb, var(--banner) 60%, #fff); }
.gacha-reel { position: relative; z-index: 2; width: min(92vw, 1040px); height: 196px; overflow: hidden; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.35)), #0a0b10;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--banner) 35%, transparent), inset 0 0 40px rgba(0, 0, 0, 0.8), 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 80px -30px var(--banner); }
.gacha-reel::before, .gacha-reel::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 2; width: 18%; pointer-events: none; }
.gacha-reel::before { left: 0; background: linear-gradient(90deg, #0a0b10, transparent); }
.gacha-reel::after { right: 0; background: linear-gradient(-90deg, #0a0b10, transparent); }
.gacha-reel-strip { display: flex; gap: 10px; height: 100%; padding: 14px 10px; will-change: transform; }
.gacha-reel.is-running .gacha-reel-strip { animation: gacha-race var(--run) cubic-bezier(0.06, 0.62, 0.1, 1); }
@keyframes gacha-race { 0% { filter: blur(0); } 8% { filter: blur(3px); } 55% { filter: blur(1.5px); } 80%, 100% { filter: blur(0); } }
.gacha-tile { position: relative; flex: none; display: grid; grid-template-rows: 1fr auto; justify-items: center; width: 150px; padding: 12px 10px 14px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tier) 30%, transparent), transparent 62%), linear-gradient(180deg, #171922, #0d0e14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 -4px 0 var(--tier); transition: transform 400ms var(--spring), box-shadow 400ms; }
.gacha-tile small { align-self: end; overflow: hidden; max-width: 100%; color: var(--text-1); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.gacha-tile-art { position: relative; display: grid; place-items: center; width: 84px; height: 84px; overflow: hidden; }
.gacha-tile-art .item-icon { position: absolute; height: 126px; width: auto; max-width: none; translate: 0 -4%; filter: drop-shadow(0 0 8px var(--tier)); }
.gacha-tile-art .coin-icon { width: 58px; height: 58px; filter: drop-shadow(0 0 10px #ffb21a); }
.gacha-tile-art .prize-mark { width: 44px; height: 44px; }
.gacha .gacha-tile.is-common { --tier: #8d96a2; }
.gacha-tile.is-won { transform: scale(1.06); box-shadow: inset 0 0 0 2px var(--tier), inset 0 -4px 0 var(--tier), 0 0 34px -2px var(--tier); }
.gacha-reel-mark { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3; width: 3px; translate: -50% 0; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--banner) 50%, #fff) 12% 88%, transparent);
  box-shadow: 0 0 12px var(--banner), 0 0 30px var(--banner); }
.gacha-reel-mark::before, .gacha-reel-mark::after { content: ''; position: absolute; left: 50%; width: 18px; height: 11px; translate: -50% 0; background: color-mix(in srgb, var(--banner) 50%, #fff); filter: drop-shadow(0 0 6px var(--banner)); }
.gacha-reel-mark::before { top: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.gacha-reel-mark::after { bottom: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gacha-reveal-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: min(92vw, 760px); min-height: 136px; perspective: 1200px; }
.gacha-reveal-cards .gacha-card { width: 96px; }
.gacha-reveal-cards.is-one .gacha-card { width: 132px; }
.gacha-reveal-acts { position: relative; z-index: 2; display: flex; gap: 12px; }
.gacha-reveal-acts [hidden] { display: none; }
.gacha-card { position: relative; aspect-ratio: 3 / 4.2; }
.gacha-card-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 650ms cubic-bezier(0.2, 0.9, 0.25, 1.15); }
.gacha-card.is-open .gacha-card-inner { transform: rotateY(180deg); }
.gacha-card-back, .gacha-card-front { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; backface-visibility: hidden; }
.gacha-card-back { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--banner) 45%, #12121a), #07070b 75%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--banner) 55%, transparent), 0 12px 30px rgba(0, 0, 0, 0.6); }
.gacha-card-back::after { content: ''; width: 46%; aspect-ratio: 1; border: 2px solid color-mix(in srgb, var(--banner) 70%, #fff); border-radius: 50%; box-shadow: 0 0 18px var(--banner), inset 0 0 18px var(--banner); animation: vip-turn 9s linear infinite; }
.gacha-card-front { align-content: center; gap: 8px; padding: 12px; text-align: center; transform: rotateY(180deg);
  background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--tier) 45%, transparent), #0a0a10 74%); box-shadow: inset 0 0 0 2px var(--tier), 0 0 34px -4px var(--tier); }
.gacha-card-front b { color: var(--text-0); font-size: 13px; line-height: 1.2; }
.gacha-card-front small { color: var(--tier); font: 700 10px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.gacha-card.is-charging:not(.is-open) .gacha-card-inner { animation: gacha-charge 700ms ease-in infinite; }
.gacha-card.is-charging:not(.is-open) .gacha-card-back { box-shadow: inset 0 0 0 2px var(--tier), 0 0 50px var(--tier); }
@keyframes gacha-charge { 0%, 100% { translate: 0 0; } 25% { translate: -2px 1px; } 75% { translate: 2px -1px; } }
.gacha-card.is-open::after { content: ''; position: absolute; inset: -40%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tier) 70%, transparent), transparent 60%); animation: gacha-burst 900ms ease-out forwards; pointer-events: none; }
.gacha-card.is-common.is-open::after { display: none; }
.gacha-card.is-legendary.is-open::before { content: ''; position: absolute; inset: -55%; z-index: -2; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tier) 55%, transparent) 0 5deg, transparent 5deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: vip-turn 12s linear infinite; }
.gacha-sky { position: fixed; inset: 0; z-index: 3; width: 100vw; height: 100vh; pointer-events: none; }
.gacha-reveal-cards { position: relative; z-index: 2; }
@keyframes gacha-burst { from { opacity: 1; scale: 0.4; } to { opacity: 0; scale: 1.6; } }
.gacha-chance { color: var(--text-2); font-size: 12px; }
@media (max-width: 760px) {
  .gacha-banner { grid-template-columns: 1fr; min-height: 0; }
  .gacha-reveal-cards .gacha-card { width: 78px; }
}
@media (prefers-reduced-motion: reduce) { .gacha-banner::before, .gacha-prize, .gacha-card-back::after, .gacha-portal i, .gacha-prize-halo, .gacha-card::before { animation: none; } .gacha-card-inner { transition: none; } }
/* The gacha's page (gacha.php): the chooser in the layout the admin picks, the altar (the stage drawn live in the
   skin, js/gacha_stage.js, the featured prizes two on each side), pull buttons in the skin's own metal, and under it
   the rates and the latest pulls as framed blocks on the skin's cloth. Rarities show as a dot and their colour, never
   as an edge strip. */
.gacha-altar { display: grid; grid-template-columns: 1fr minmax(260px, 420px) 1fr; align-items: center; gap: 12px; margin: 10px 0 0; }
.gacha-altar.is-reel { display: flex; justify-content: center; padding: 18px 0 4px; }
.gacha-stage-art { width: 100%; aspect-ratio: 1; }
.gacha-altar .gacha-featured { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gacha-altar .gacha-featured.is-left { align-items: flex-end; }
.gacha-altar .gacha-featured.is-right { align-items: flex-start; }
.gacha-altar.is-reel .gacha-featured { flex-direction: row; flex-wrap: wrap; justify-content: center; }
[data-skin='parchment'] .gacha-prize { background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--tier) 30%, transparent), rgba(255, 248, 228, 0.7) 72%);
  box-shadow: inset 0 0 0 1px rgba(58, 36, 18, 0.55), 0 6px 14px -8px rgba(58, 36, 18, 0.6); }
[data-skin='parchment'] .gacha-prize small { color: #3a2412; }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .gacha-prize { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier) 45%, rgba(255, 255, 255, 0.12)); }
.gacha-pulls { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding-top: 6px; }
.gacha-pull.btn { display: inline-grid; justify-items: center; align-content: center; gap: 2px; min-width: 210px; height: auto; min-height: 64px; padding-block: 2px; }
/* the skins without a sliced button image keep their own padding */
[data-skin='arcane'] .gacha-pull.btn, :is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .gacha-pull.btn { padding-block: 10px; }
/* the banner's art is always dark: its words stay light whatever the skin's ink */
.gacha-banner-text p { color: rgba(255, 255, 255, 0.8); }
[data-skin='parchment'] .gacha-pity b { color: #8a5a10; }
.gacha-pull b { font: 800 17px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.gacha-pull span { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; opacity: 0.92; }
.gacha-pull span .coin-icon { width: 16px; height: 16px; }
.gacha-pull[hidden] { display: none; }
.gacha-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 3px; font-style: normal; }
.gacha-perks i { padding: 1px 8px; border-radius: 99px; background: rgba(0, 0, 0, 0.45); color: #ffe7a8; font: 700 10.5px var(--font-display); font-style: normal; letter-spacing: 0.04em; }
.gacha-pulls.is-busy .gacha-pull { pointer-events: none; opacity: 0.6; }
.tier-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--tier); box-shadow: 0 0 8px var(--tier); }
.gacha-under { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; max-width: 1000px; margin: 22px auto 0; align-items: start; }
.gacha-rates-pity { margin: 0 0 6px; }
.gacha-rate { margin-top: 14px; }
.gacha-rate-tier { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.gacha-rate-tier b { color: var(--tier); font: 700 13px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.gacha-rate-tier span { margin-left: auto; font: 700 13px var(--font-mono, monospace); }
.gacha-rate-bar { display: block; height: 4px; margin: 0 0 8px; border-radius: 4px; background: color-mix(in srgb, var(--tier) 14%, transparent); overflow: hidden; }
.gacha-rate-bar i { display: block; height: 100%; border-radius: inherit; background: var(--tier); box-shadow: 0 0 10px var(--tier); }
.gacha-rate-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gacha-rate-list li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.gacha-rate-list li > span:last-child { font-family: var(--font-mono, monospace); opacity: 0.85; }
.gacha-rate-pic { position: relative; display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; }
.gacha-rate-pic .item-icon { position: absolute; height: 50px; width: auto; max-width: none; }
.gacha-rate-pic .coin-icon { width: 24px; height: 24px; }
.gacha-rate-pic .prize-mark { width: 18px; height: 18px; border-radius: 5px; }
.gacha-history { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gacha-history li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; padding: 6px 4px; border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.gacha-history li:last-child { border-bottom: 0; }
.gacha-history b { font-weight: 700; }
.gacha-history li:is(.is-epic, .is-legendary) b { color: var(--tier); }
.gacha-history small { grid-column: 2; opacity: 0.7; font-size: 11.5px; }
[data-skin='parchment'] .gacha-history li:is(.is-epic, .is-legendary) b { color: color-mix(in srgb, var(--tier) 65%, #3a2412); }
/* the chooser: tabs, a carousel of slides, a grid, the first one large, or a list; the one open is lit */
.gacha-tabs { margin-bottom: 14px; }
.gacha-chooser { margin: 0 0 18px; }
.gacha-chooser.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.gacha-chooser.is-list, .gacha-chooser-rest { display: grid; gap: 8px; }
.gacha-chooser.is-featured { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.gacha-chooser.is-carousel { position: relative; padding: 0 30px; }
.gacha-car-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 32%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px; }
.gacha-car-track::-webkit-scrollbar { display: none; }
.gacha-car-track > * { scroll-snap-align: start; }
.gacha-car-arrow { position: absolute; top: 50%; z-index: 2; width: 38px; height: 38px; translate: 0 -50%; border: 0; border-radius: 50%; cursor: pointer; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 22px; line-height: 1; }
.gacha-car-arrow.is-prev { left: -8px; }
.gacha-car-arrow.is-next { right: -8px; }
.gacha-car-arrow.is-prev::before { content: '\2039'; }
.gacha-car-arrow.is-next::before { content: '\203A'; }
.gacha-pick { position: relative; isolation: isolate; display: grid; align-content: end; min-height: 128px; padding: 14px; overflow: hidden; border-radius: 14px; color: #fff; text-decoration: none;
  background: linear-gradient(0deg, rgba(4, 4, 8, 0.92), rgba(4, 4, 8, 0.25) 75%), var(--art, radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--banner) 55%, transparent), transparent 65%)) center / cover, #0b0b10;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--banner) 30%, transparent); transition: box-shadow 200ms, translate 200ms var(--spring); }
.gacha-pick:hover { translate: 0 -2px; }
.gacha-pick.is-here { box-shadow: inset 0 0 0 2px var(--banner), 0 0 26px -8px var(--banner); }
.gacha-pick-body { display: grid; gap: 2px; }
.gacha-pick b { font: 800 17px var(--font-display); letter-spacing: 0.02em; }
.gacha-pick small { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: rgba(255, 255, 255, 0.75); font-size: 12px; }
.gacha-pick em { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-style: normal; font-weight: 700; font-size: 13px; }
.gacha-pick em .coin-icon { width: 15px; height: 15px; }
.gacha-pick.is-big { min-height: 240px; }
.gacha-pick.is-big b { font-size: 24px; }
.gacha-pick.is-row { grid-template-columns: 64px 1fr; align-items: center; align-content: center; gap: 12px; min-height: 0; padding: 8px 12px 8px 8px; background: rgba(8, 8, 12, 0.72); }
.gacha-pick.is-row .gacha-pick-art { width: 64px; height: 44px; border-radius: 8px; background: var(--art, radial-gradient(circle, var(--banner), transparent 70%)) center / cover; }
.gacha-pick.is-row small { -webkit-line-clamp: 1; }
.gacha-reveal-stage { width: min(78vw, 58vh, 520px); aspect-ratio: 1; position: relative; z-index: 2; margin: -20px 0 -40px; pointer-events: none; }
/* the stage's canvas covers the whole reveal, under the cards, so its light, pillar and sparks run past its box */
.gacha-reveal-sky-stage { position: fixed; inset: 0; z-index: 1; width: 100vw; height: 100vh; pointer-events: none; }
@media (max-width: 760px) {
  .gacha-altar { grid-template-columns: 1fr 1fr; }
  .gacha-stage-art { grid-column: 1 / -1; grid-row: 1; max-width: 360px; justify-self: center; }
  .gacha-altar .gacha-featured.is-left, .gacha-altar .gacha-featured.is-right { align-items: center; }
  .gacha-chooser.is-featured { grid-template-columns: 1fr; }
  .gacha-car-track { grid-auto-columns: 82%; }
  .gacha-pull.btn { min-width: 0; flex: 1 1 100%; }
}
/* the buy button is the card's whole bottom, in the tier's metal (its trophy's finish): a polished, brushed face, a vine
   engraved round its border (img/vip/engrave.svg, cut in black and white so it takes any metal) inside a frame line, a
   light running round its edge, sparks rising off it (the canvas over the footer) */
.vip-card-foot { position: relative; }
.vip-foot-fx { inset: -30px -18px 0; width: calc(100% + 36px); height: calc(100% + 30px); z-index: 3; }
/* a discount: the price before it struck through in black, the price now smaller in the top right, pulsing in sparks */
.vip-from.is-off { position: relative; }
.vip-from.is-off > b { color: var(--text-2); }
.vip-from s { position: relative; text-decoration: none; }
.vip-from s::after { content: ''; position: absolute; left: -3%; right: -3%; top: 57%; height: 4px; translate: 0 -50%; border-radius: 2px; background: #000; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18); }
.vip-sale { position: absolute; top: -18px; right: -4px; z-index: 4; display: grid; justify-items: center; padding: 6px 12px 7px; border-radius: 12px; rotate: 6deg;
  background: linear-gradient(160deg, #ff6b81, #d81b46); box-shadow: 0 6px 18px rgba(216, 27, 70, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45); animation: vip-sale-pulse 1.4s ease-in-out infinite; }
.vip-sale em { color: #fff3c4; font: 800 10px var(--font-display); font-style: normal; letter-spacing: 0.12em; }
.vip-sale strong { color: #fff; font: 800 20px/1.05 var(--font-display); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); white-space: nowrap; }
.vip-sale-fx { inset: -36px -40px; width: calc(100% + 80px); height: calc(100% + 72px); z-index: -1; --role: #ffd36b; }
@keyframes vip-sale-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.09; box-shadow: 0 6px 26px rgba(255, 77, 109, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.45); } }
.vip-plan-pick em s { margin-right: 4px; color: var(--text-2); font-size: 13px; text-decoration-color: #000; text-decoration-thickness: 2px; }
.vip-choose { position: relative; isolation: isolate; container-type: inline-size; display: grid; place-items: center; width: calc(100% + 36px); height: 96px; margin: 6px -18px -20px; padding: 0 30px;
  border: 0; border-radius: 0 0 20px 20px; cursor: pointer;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 255, 255, 0.32), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, color-mix(in srgb, var(--metal) 60%, #fff) 0%, var(--metal) 34%, color-mix(in srgb, var(--metal) 48%, #000) 54%, color-mix(in srgb, var(--metal) 85%, #000) 76%, color-mix(in srgb, var(--metal) 80%, #fff) 100%);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--metal) 35%, #fff), inset 0 4px 0 rgba(0, 0, 0, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 -10px calc(14px + 8px * var(--lvl)) -8px color-mix(in srgb, var(--metal) calc(25% + 12% * var(--lvl)), transparent);
  transition: filter 200ms var(--ease); }
.vip-choose::before { content: ''; position: absolute; inset: 0; z-index: 2; padding: 2px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--vip-a), transparent 0 30%, color-mix(in srgb, var(--metal) 60%, #fff) 42%, #fff 46%, color-mix(in srgb, var(--metal) 60%, #fff) 50%, transparent 62% 80%, #fff 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: vip-run max(1.4s, calc(4.4s - 0.8s * var(--lvl))) linear infinite; }
.vip-choose::after { content: ''; position: absolute; inset: 19px 19px 17px; z-index: -1; border: 1px solid rgba(0, 0, 0, 0.38); border-radius: 4px 4px 14px 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22); background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%) -150% 0 / 250% 100% no-repeat;
  transition: background-position 900ms var(--ease); }
.vip-choose:hover { filter: brightness(1.12) drop-shadow(0 0 18px color-mix(in srgb, var(--metal) 55%, transparent)); }
.vip-choose::after { animation: vip-shine max(1.8s, calc(5.4s - 1s * var(--lvl))) ease-in-out infinite; }
.vip-card:nth-child(3n + 2) .vip-choose::after { animation-delay: 1.4s; }
.vip-card:nth-child(3n) .vip-choose::after { animation-delay: 2.8s; }
@keyframes vip-shine { 0%, 62% { background-position: -150% 0; } 88%, 100% { background-position: 150% 0; } }
.vip-choose:hover::after { animation-duration: 1.6s; }
/* VIP level 3 and up: the button breathes a glow of its metal */
.vip-card.is-radiant .vip-choose { animation: vip-radiate 2.6s ease-in-out infinite; }
@keyframes vip-radiate { 50% { filter: brightness(1.1) drop-shadow(0 0 14px color-mix(in srgb, var(--metal) 70%, transparent)); } }
.vip-choose:active { filter: brightness(0.95); }
.vip-choose:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.vip-btn-engrave { position: absolute; inset: 5px 5px 4px; border: 12px solid transparent; border-image: url('../img/vip/engrave.svg') 12 round; opacity: 0.9; pointer-events: none; }
.vip-btn-text { position: relative; color: color-mix(in srgb, var(--metal) 16%, #000); font: 800 min(20px, 8.4cqi) / 1.15 var(--font-display); letter-spacing: 0.1em; white-space: nowrap; text-transform: uppercase; text-align: center;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--metal) 40%, #fff), 0 -1px 0 rgba(0, 0, 0, 0.25); }
.vip-claim { filter: drop-shadow(0 0 10px rgba(255, 200, 80, 0.5)); }
.vip-modal { border-color: color-mix(in srgb, var(--role) 55%, transparent); background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--role) 22%, transparent), transparent 60%), #0c0d11; }
.vip-modal .modal-head { grid-template-columns: auto minmax(0, 1fr); }
.vip-modal h3 { color: var(--role); }
/* the buy box keeps its dark ground on every skin, so parchment's ink colours would vanish on it: the light ones hold inside */
[data-skin='parchment'] .vip-modal { --text-0: #e9edf2; --text-1: #b4bac3; --text-2: #8d939c; color: var(--text-0); }
.vip-plan-picks { display: grid; gap: 8px; margin-bottom: 16px; }
.vip-plan-pick input { position: absolute; opacity: 0; pointer-events: none; }
.vip-plan-pick span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); cursor: pointer; transition: border-color 200ms, background 200ms; }
.vip-plan-pick small { grid-column: 1; color: var(--text-2); font-size: 12px; }
.vip-plan-pick em { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--role); font: 800 18px var(--font-display); font-style: normal; }
.vip-plan-pick :checked + span { border-color: var(--role); background: color-mix(in srgb, var(--role) 12%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--role) 25%, transparent); }
/* a card's plans, each its price and term (vip_plan_short): subscription, once, for good */
.vip-terms { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 10px; padding: 0; list-style: none; }
.vip-term { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--metal, var(--role)) 35%, transparent); border-radius: 999px; background: rgba(0, 0, 0, 0.22); font-size: 12px; }
.vip-term b { color: var(--text); font-weight: 700; }
.vip-term small { color: var(--text-2); }
.vip-term.is-life { border-color: color-mix(in srgb, var(--metal, var(--role)) 70%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--metal, var(--role)) 25%, transparent); }
.vip-term.is-life small { color: var(--metal, var(--role)); }
.vip-plan-pick.is-blocked span { opacity: 0.45; cursor: not-allowed; }
.vip-stack-note { max-width: 760px; margin: 14px auto 0; }
.pay-way[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .vip-card::before, .vip-trophy, .vip-crest, .vip-halo, .vip-ring, .vip-floor, .vip-choose, .vip-choose::before, .vip-choose::after, .vip-shine, .vip-sale { animation: none; } }
/* a weapon's effect over its picture (economy item_fx_canvas, itemfx.js): over the picture's box, letting clicks through */
.item-fx { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
:where(:has(> .item-fx)) { position: relative; }
/* the filter of a tinted item's picture (economy item_tinted): takes no room */
.tint-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Notifications (notices module): the bell and its panel, the list, a notice's page ---------- */
/* after Play now; its panel is hung from the bar (site.js places it under the bell) */
.notify { display: flex; align-items: center; order: 1; }
.notify-bell { padding: 10px; }
.notify-bell svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 12%; }
.notify-bell:hover svg, .notify.is-open .notify-bell svg { animation: bell-ring 800ms var(--ease); }
@keyframes bell-ring { 12% { rotate: 16deg; } 28% { rotate: -13deg; } 44% { rotate: 9deg; } 60% { rotate: -5deg; } 76% { rotate: 2deg; } }
.notify-count { position: absolute; top: 2px; right: -1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent-hot); color: #fff; font: 700 10.5px/18px var(--font-ui); letter-spacing: 0;
  text-align: center; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); box-shadow: 0 0 0 2px rgba(5, 5, 6, 0.92), 0 0 10px rgba(var(--accent-rgb), 0.75); animation: notify-pulse 2.4s ease-in-out infinite; }
@keyframes notify-pulse { 50% { box-shadow: 0 0 0 2px rgba(5, 5, 6, 0.92), 0 0 18px rgba(var(--accent-rgb), 1); } }
.nav-right.is-tight > .notify { display: none; }
/* under the bar: its top tucked behind the bar's art and the emblem, sliding down out of it */
.notify-panel.card { position: absolute; top: 22px; right: var(--notify-right, 24px); z-index: -1; width: min(390px, calc(100vw - 24px)); padding: 32px 12px 8px; animation: notify-in 420ms var(--ease); }
@keyframes notify-in { from { opacity: 0.4; translate: 0 -40px; } }
.notify-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 10px; border-bottom: 1px solid var(--line); }
.notify-head b { color: var(--text-0); font: 700 13px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.notify-head form, .notify-item form, .row-actions form { margin: 0; }
.notify-all { padding: 5px 9px; border: 0; border-radius: 8px; background: none; color: var(--text-1); font: 600 12px var(--font-ui); cursor: pointer; transition: color 150ms, background 150ms; }
.notify-all:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-0); }
.notify-list { display: grid; gap: 2px; max-height: min(60vh, 430px); margin: 6px 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.notify-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: 10px; transition: background 200ms, opacity 280ms var(--ease), translate 280ms var(--ease); }
.notify-item:hover { background: rgba(255, 255, 255, 0.05); }
.notify-item a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; min-width: 0; padding: 8px 6px 8px 22px; color: var(--text-1); text-decoration: none; }
.notify-text { display: grid; gap: 2px; min-width: 0; }
.notify-face { --size: 34px; }
.notify-mark { display: inline-grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 32% 28%, rgba(var(--accent-rgb), 0.75), rgba(var(--accent-rgb), 0.15) 74%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.45); }
.notify-mark.is-system { background: radial-gradient(circle at 32% 28%, #626a7a, #23262d 74%); }
.notify-mark svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.notice-from { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 6px; font: 700 16px var(--font-display); }
.notice-from .avatar { --size: 42px; }
.notify-item b { overflow: hidden; color: var(--text-1); font: 500 13.5px/1.35 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.notify-item.is-unread b { color: var(--text-0); font-weight: 650; }
.notify-item small { color: var(--text-2); font-size: 11.5px; }
.notify-item.is-unread::before { content: ''; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--accent-hot); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.9); }
.notify-x { width: 30px; height: 30px; margin-right: 4px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font-size: 19px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 150ms, background 150ms, color 150ms; }
.notify-item:hover .notify-x, .notify-x:focus-visible { opacity: 1; }
.notify-x:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-0); }
@media (hover: none) { .notify-x { opacity: 0.7; } }
.notify-item.is-gone { opacity: 0; translate: 18px 0; pointer-events: none; }
.notify-none { margin: 18px 0; color: var(--text-2); font-size: 13px; text-align: center; }
.notify-more { display: block; padding: 9px 8px 5px; border-top: 1px solid var(--line); color: var(--text-1); font: 600 11.5px var(--font-display); letter-spacing: 0.14em; text-align: center; text-transform: uppercase; text-decoration: none; transition: color 150ms; }
.notify-more:hover { color: var(--accent-hot); }
.notify-list.is-page { max-height: none; margin: 0 0 18px; }
.is-page .notify-item a { padding: 12px 8px 12px 28px; }
.is-page .notify-face { --size: 40px; }
.is-page .notify-item b { font-size: 15px; white-space: normal; }
.is-page .notify-item::before { left: 11px; }
.is-page .notify-item + .notify-item { border-top: 1px solid var(--line); border-radius: 0; }
.notice-list .row-actions, .notice-page .row-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.notice-title { margin: 0 0 6px; color: var(--text-0); font: 700 22px/1.3 var(--font-display); text-align: center; text-wrap: balance; }
.notice-meta { margin: 0 0 18px; text-align: center; }
.notice-body { line-height: 1.65; }
.notice-body img { max-width: 100%; height: auto; border-radius: 10px; }
.notice-body table { width: 100%; border-collapse: collapse; }
.notice-body :is(td, th) { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.notice-video { position: relative; margin: 14px 0; overflow: hidden; border-radius: 12px; background: #000; aspect-ratio: 16 / 9; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
.notice-video :is(iframe, video) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.notice-vips { display: grid; gap: 10px; margin: 16px 0; }
.notice-vip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 14px 8px 8px; border: 1px solid color-mix(in srgb, var(--role) 40%, transparent); border-radius: 14px;
  background: radial-gradient(ellipse at 0 50%, color-mix(in srgb, var(--role) 22%, transparent), transparent 70%), rgba(255, 255, 255, 0.03); color: inherit; text-decoration: none;
  transition: border-color 200ms, translate 250ms var(--spring), box-shadow 200ms; }
.notice-vip:hover { translate: 0 -2px; border-color: var(--role); box-shadow: 0 8px 24px color-mix(in srgb, var(--role) 25%, transparent); }
.notice-vip .vip-trophy.is-small { width: 64px; }
.notice-vip-text { display: grid; gap: 3px; min-width: 0; }
.notice-vip-text b { color: var(--role); font: 800 16px var(--font-display); letter-spacing: 0.06em; }
.notice-vip-text small { color: var(--text-1); font-size: 13px; }
.notice-vip-text s { color: var(--text-2); }
.notice-vip-text em { color: #ffcf5a; font-style: normal; font-weight: 700; }
.notice-vip-go { padding: 9px 14px; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--metal) 80%, #fff), var(--metal) 55%, color-mix(in srgb, var(--metal) 70%, #000));
  color: color-mix(in srgb, var(--metal) 16%, #000); font: 800 12px var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4); }
.notice-poll { margin: 20px 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.025); }
.notice-poll h2 { margin: 0 0 12px; color: var(--text-0); font: 700 16px var(--font-display); }
.notice-poll-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.notice-poll-results { display: grid; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.notice-poll-results li { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, 0.04); isolation: isolate; }
.notice-poll-results li::before { content: ''; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--share); background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.5), rgba(var(--accent-rgb), 0.2)); animation: poll-grow 900ms var(--ease) backwards; }
@keyframes poll-grow { from { width: 0; } }
.notice-poll-results li.is-mine { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.85); }
.notice-poll-results b { font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .notify-panel.card { position: static; z-index: auto; width: auto; animation-name: notify-in-drawer; }
  @keyframes notify-in-drawer { from { opacity: 0; translate: 0 -8px; } }
}
@media (max-width: 560px) { .notice-vip { grid-template-columns: auto minmax(0, 1fr); } .notice-vip-go { grid-column: 1 / -1; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .notify-bell svg, .notify-count, .notify-panel.card, .notice-poll-results li::before { animation: none !important; } }
/* The phone's menu: the player's row first (the account, coins, the bell; what they unfold under it; Play now centred
   below), then the pages as tiles two to a row */
@media (max-width: 860px) {
  .drawer { gap: 16px; padding: 40px 16px 18px; }
  .nav-right { order: -1; flex-flow: row wrap; align-items: center; gap: 0 4px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .nav-right::after { content: ''; order: 2; flex-basis: 100%; }
  .nav-right > .nav-link, .nav-right .notify-bell { order: 1; max-width: none; padding: 10px; border: 0; }
  .nav-right > .nav-link[data-fold-open] { flex: 1; justify-content: flex-start; }
  .nav-right > .fold { order: 3; flex-basis: 100%; }
  .nav-right > .fold:not(.is-open) > * { padding-top: 0; padding-bottom: 0; }
  .notify { display: contents; }
  .nav-right .notify-panel.card { order: 4; flex-basis: 100%; margin: 10px 0 0; }
  .nav-right > .btn { order: 5; margin: 12px auto 0; }
  .nav-left { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .nav-left .nav-link { justify-content: flex-start; gap: 2px; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.03);
    font-size: 12px; letter-spacing: 0.1em; line-height: 1.25; white-space: normal; text-align: left; transition: background 200ms, border-color 200ms, color 180ms; }
  .nav-left .nav-link:active { background: rgba(255, 255, 255, 0.08); }
  .nav-left .nav-link.is-here { border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.12); }
  .drawer .vine { display: none; }
  [data-skin='parchment'] .nav-left .nav-link { border-color: rgba(74, 48, 22, 0.28); background: rgba(255, 250, 235, 0.35); }
  [data-skin='parchment'] .nav-right { border-bottom-color: rgba(74, 48, 22, 0.3); }
}

/* the phone's drawer: a category is a small heading over its pages, laid out as the drawer's tiles */
@media (max-width: 860px) {
  .nav-group { display: contents; }
  .nav-left .nav-group-open { grid-column: 1 / -1; justify-content: flex-start; min-height: 0; margin-top: 6px; padding: 4px 2px 0; border: 0; background: none; color: var(--text-2); font-size: 11px; pointer-events: none; }
  .nav-group-open :is(.nav-caret, .vine) { display: none; }
  .nav-left .nav-drop { position: static; grid-column: 1 / -1; display: block; width: auto; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; animation: none; }
  .nav-left .nav-drop::before, .nav-left .nav-drop::after, .nav-left .nav-drop > :not(.nav-drop-list) { display: none; }
  .nav-drop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .nav-drop-item { gap: 8px; min-height: 46px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
  .nav-drop-item.is-here { border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.12); }
  .nav-drop-text small { display: none; }
  [data-skin='parchment'] .nav-drop-item { border-color: rgba(74, 48, 22, 0.28); background: rgba(255, 250, 235, 0.35); }
}

/* a form sent in place (site.js): its buttons wait while it goes, and what the server said shows at its top */
form.is-busy :is(button, [type='submit']) { opacity: 0.6; pointer-events: none; }
.form-note { margin: 0 0 12px; }

/* A home page block's appearance (Admin > Layout, block_ui_fields): framed is the skin's card; glass is a dark frosted
   panel and bare is the content straight on the page, neither a card, so no skin art, cloth or paper ink reaches them.
   Then its spacing, alignment, where it shows and how it comes in; its own accent is set on its wrapper. */
.block-glass, .block-bare { position: relative; color: var(--text-0); }
.block-glass { padding: 22px 24px 26px; border-radius: 18px; background: rgba(10, 11, 16, 0.62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.block-bare { padding: 6px 2px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.block-head h2 { margin: 0; color: var(--text-0); font: 700 15px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.block-bare .block-head { border-bottom: 0; padding-bottom: 0; }
.block-bare .block-head h2 { font-size: 18px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85); }
.block-bare :is(p, li, small, .muted) { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
.reveal.is-fade { animation: reveal-fade 900ms var(--ease) backwards; }
@keyframes reveal-fade { from { opacity: 0; } }
.home-block.ui-space-tight { --ui-gap: 0.5; }
.home-block.ui-space-roomy { --ui-gap: 1.8; }
.home-block.ui-space-tight > :is(.card, .block-glass) { padding-top: 16px; padding-bottom: 18px; }
.home-block.ui-space-roomy > :is(.card, .block-glass, .block-bare) { padding-top: 40px; padding-bottom: 44px; }
.home-block.ui-space-roomy { margin-block: 18px; }
.home-block.ui-space-tight { margin-block: -6px; }
.home-block.ui-align-center :is(.card-head, .block-head) { justify-content: center; text-align: center; }
.home-block.ui-align-center :is(.card, .block-glass, .block-bare) { text-align: center; }
@media (max-width: 760px) { .home-block.ui-show-desktop { display: none; } }
@media (min-width: 761px) { .home-block.ui-show-phone { display: none; } }
@media (prefers-reduced-motion: reduce) { .reveal.is-fade { animation: none; } }

/* the best prize rising out of the gacha stage's opening (site.js `emerge`): its picture large in a halo of its rarity */
.gacha-emerge { position: fixed; z-index: 4; display: grid; place-items: center; width: 180px; height: 180px; pointer-events: none; will-change: transform, opacity; }
.gacha-emerge-glow { position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tier) 70%, #fff) 0%, color-mix(in srgb, var(--tier) 45%, transparent) 28%, transparent 62%);
  animation: gacha-emerge-pulse 1.6s ease-in-out infinite; }
.gacha-emerge-art { position: relative; display: grid; place-items: center; width: 150px; height: 150px; overflow: hidden; filter: drop-shadow(0 0 18px var(--tier)) drop-shadow(0 0 4px #fff); }
.gacha-emerge-art .item-icon { position: absolute; height: 220px; width: auto; max-width: none; translate: 0 -4%; }
.gacha-emerge-art .coin-icon { width: 110px; height: 110px; }
.gacha-emerge-art .prize-mark { width: 84px; height: 84px; }
@keyframes gacha-emerge-pulse { 50% { scale: 1.12; opacity: 0.8; } }
@media (prefers-reduced-motion: reduce) { .gacha-emerge-glow { animation: none; } }

/* The language picker beside the bell: the language's flag (img/flags.webp, one 30x20 cell per language, drawn at 2x)
   and a panel of every language the game has, each with its flag and native name. The panel hangs from the bar like
   the bell's (in the skin's cloth on arcane and living vines); its list scrolls inside it. */
.lang-pick { position: relative; display: flex; align-items: center; }
.lang-pick-open { display: inline-flex; align-items: center; gap: 6px; }
.lang-flag { display: inline-block; flex: none; width: 21px; height: 14px; border-radius: 3px; background: url("../img/flags.webp") calc(var(--f) * -21px) 0 / auto 14px no-repeat;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
.lang-pick-code { font-size: 11px; letter-spacing: 0.08em; opacity: 0.8; }
.lang-panel.card { position: absolute; top: 22px; right: 0; z-index: -1; width: min(300px, calc(100vw - 24px)); padding: 32px 10px 10px; animation: notify-in 420ms var(--ease); }
.drops > .lang-panel { right: auto; }
.lang-panel[hidden] { display: none; }
.lang-list { position: relative; z-index: 1; max-height: min(60vh, 460px); margin: 0; padding: 0 4px 0 0; overflow-y: auto; list-style: none; scrollbar-width: thin; }
.lang-item { display: grid; grid-template-columns: 21px 1fr; align-items: center; column-gap: 10px; padding: 7px 10px; border-radius: 6px; color: var(--text-1); text-decoration: none; }
.lang-item:hover { background: rgba(var(--accent-rgb), 0.14); color: #fff; }
.lang-item.is-here { background: rgba(var(--accent-rgb), 0.24); color: #fff; }
.lang-item small { grid-column: 2; color: var(--text-2); font-size: 11px; }
[data-skin='parchment'] .lang-item:is(:hover, .is-here) { color: #2b1c0e; }
@media (max-width: 860px) { .lang-panel.card { position: static; z-index: auto; width: auto; margin-top: 8px; animation: none; } }
@media (prefers-reduced-motion: reduce) { .lang-panel.card { animation: none; } }

/* What the pulse brings in (site.js `arrive`: a forum post, a notice, a pull) arrives in the skin's way: the vine's
   unfurls from its start with a breath of light, the arcane's kindles out of a rune glow, the parchment's is inked in,
   the samurai's bleeds out of the black, the modern's slides down; a count ticks, the bell rings. */
.is-arriving { animation: arrive-vine 950ms var(--ease) both; }
@keyframes arrive-vine {
  from { opacity: 0; clip-path: inset(0 100% 0 0); filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.7)); }
  50% { opacity: 1; }
  to { clip-path: inset(0 0 0 0); filter: drop-shadow(0 0 0 rgba(var(--accent-rgb), 0)); }
}
[data-skin='arcane'] .is-arriving { animation: arrive-arcane 1100ms var(--ease) both; }
@keyframes arrive-arcane {
  from { opacity: 0; scale: 0.97; filter: blur(6px) brightness(2.2) drop-shadow(0 0 16px rgba(var(--accent-rgb), 0.95)); }
  55% { opacity: 1; scale: 1; filter: blur(0) brightness(1.35) drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.6)); }
  to { filter: blur(0) brightness(1) drop-shadow(0 0 0 rgba(var(--accent-rgb), 0)); }
}
[data-skin='parchment'] .is-arriving { animation: arrive-ink 1200ms var(--ease) both; }
@keyframes arrive-ink {
  from { opacity: 0; translate: 0 -3px; filter: sepia(1) contrast(0.5) blur(2.5px); }
  60% { opacity: 1; filter: sepia(0.5) contrast(0.85) blur(0.4px); }
  to { translate: 0 0; filter: sepia(0) contrast(1) blur(0); }
}
[data-skin='samurai'] .is-arriving { animation: arrive-black 1000ms var(--ease) both; }
@keyframes arrive-black { from { opacity: 0; filter: brightness(0.2) blur(3px); } to { filter: brightness(1) blur(0); } }
[data-skin='modern'] .is-arriving { animation: arrive-slide 420ms var(--ease) both; }
@keyframes arrive-slide { from { opacity: 0; translate: 0 -10px; } }
.is-ticked { animation: tick 500ms var(--ease); }
.notify-bell.is-rung svg { animation: bell-ring 900ms var(--ease); transform-origin: 50% 12%; }
@keyframes bell-ring { 15% { rotate: 16deg; } 30% { rotate: -13deg; } 45% { rotate: 9deg; } 60% { rotate: -5deg; } 75% { rotate: 2deg; } }
@media (prefers-reduced-motion: reduce) { .is-arriving, .is-ticked, .notify-bell.is-rung svg { animation: none; } }

/* news (modules/news): a card's Read more, its arrow sliding on hover; a video cover plays like a picture; /news as cards */
.news-more { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 4px; color: var(--accent-hot); font: 600 12px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.news-more i { width: 14px; height: 1px; background: currentColor; position: relative; transition: width 300ms var(--ease); }
.news-more i::after { content: ''; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border: solid currentColor; border-width: 1px 1px 0 0; rotate: 45deg; }
:is(.news-card, .news-tile, .news-lead, .news-item):hover .news-more i { width: 22px; }
video:is(.news-cover, .news-thumb) { pointer-events: none; }
.news-page .news-cards { margin-top: 14px; }
.news-page .news-said { margin-left: auto; color: var(--text-2); font-size: 12px; }
.post-media video { display: block; width: 100%; max-height: 70vh; background: #000; }
@media (prefers-reduced-motion: reduce) { .news-more i { transition: none; } }

/* the sign-up and log-in pages divided (modules/registration): the game's art on one side fading into the page, the form
   on the other; on a phone the art is a short band over the form */
.auth-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); align-items: center; gap: clamp(16px, 3vw, 44px); width: min(1180px, 100%); margin: 0 auto; }
.auth-split.is-right { grid-template-columns: minmax(320px, 1fr) minmax(0, 1.2fr); }
.auth-split.is-right .auth-art { order: 2; }
.auth-art { position: relative; align-self: stretch; min-height: clamp(420px, 70vh, 680px); background: var(--art) 78% 30% / cover no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 70%, transparent), linear-gradient(0deg, transparent, #000 14%, #000 86%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 10%, #000 70%, transparent) intersect, linear-gradient(0deg, transparent, #000 14%, #000 86%, transparent);
  animation: auth-art-in 1.1s var(--ease) both; }
.auth-split.is-right .auth-art { background-position: 22% 30%; -webkit-mask: linear-gradient(270deg, transparent, #000 10%, #000 70%, transparent), linear-gradient(0deg, transparent, #000 14%, #000 86%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(270deg, transparent, #000 10%, #000 70%, transparent) intersect, linear-gradient(0deg, transparent, #000 14%, #000 86%, transparent); }
.auth-art-name { position: absolute; left: 7%; bottom: 10%; color: #fff; font: 700 clamp(22px, 3vw, 38px)/1.05 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85), 0 0 26px rgba(var(--accent-rgb), 0.55); }
.auth-split.is-right .auth-art-name { left: auto; right: 7%; text-align: right; }
.auth-form .panel-narrow { width: 100%; max-width: 480px; }
@keyframes auth-art-in { from { opacity: 0; scale: 1.04; } }
@media (max-width: 820px) {
  .auth-split, .auth-split.is-right { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .auth-split.is-right .auth-art { order: 0; }
  .auth-art, .auth-split.is-right .auth-art { min-height: 0; height: 190px; margin: 0 -16px -28px; background-position: 70% 30%;
    -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent); }
  .auth-art-name { bottom: 34%; }
}
@media (prefers-reduced-motion: reduce) { .auth-art { animation: none; } }

/* downloads (modules/downloads): a card a platform, the visitor's own lit and tagged */
.dl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 14px 0; }
.dl-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 22px 14px 16px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.24); text-align: center;
  transition: border-color 250ms, translate 350ms var(--spring), box-shadow 350ms; }
.dl-card:hover { border-color: rgba(var(--accent-rgb), 0.5); translate: 0 -2px; }
.dl-card.is-yours { border-color: rgba(var(--accent-rgb), 0.7); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.25), 0 16px 34px -20px rgba(var(--accent-rgb), 0.8); }
.dl-icon { width: 42px; height: 42px; color: var(--text-1); filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.35)); }
.dl-card.is-yours .dl-icon { color: var(--accent-hot); }
.dl-name { color: var(--text-0); font: 600 16px/1.2 var(--font-display); letter-spacing: 0.04em; }
.dl-meta { color: var(--text-2); font-size: 12.5px; }
.dl-notes { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.dl-sum { color: var(--text-3); font-size: 11px; cursor: help; }
.dl-yours { display: none; position: absolute; top: 8px; right: 8px; padding: 2px 7px; border: 1px solid rgba(var(--accent-rgb), 0.6); color: var(--accent-hot); font: 600 10px/1.4 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.dl-card.is-yours .dl-yours { display: block; }
.dl-hint { margin-top: 4px; }

/* A field the server refused (site.js fieldErrors): its border in the danger colour and its why under it, until changed. */
.input[aria-invalid='true'] { border-color: var(--danger-text); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(226, 109, 90, 0.22); }
.field-error { display: block; margin-top: 4px; color: var(--danger-text); font-size: 12px; line-height: 1.35; animation: tick 300ms var(--ease); }
.fold-form .field-error { grid-column: 1 / -1; margin: 0; font-size: 11px; }

/* the game's announcements (modules/game): a row each, its kind a chip, the golden ones lit in gold */
.gn-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gn-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.2); }
.gn-kind { grid-row: span 2; align-self: center; padding: 2px 7px; border: 1px solid rgba(var(--accent-rgb), 0.5); color: var(--accent-hot); font: 600 10px/1.4 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.gn-text { color: var(--text-0); font-size: 14px; line-height: 1.4; }
.gn-meta { color: var(--text-3); font-size: 12px; }
.gn-row.is-golden { border-color: rgba(242, 193, 78, 0.45); background: linear-gradient(100deg, rgba(242, 193, 78, 0.14), rgba(0, 0, 0, 0.2) 55%); }
.gn-row.is-golden .gn-kind { border-color: rgba(242, 193, 78, 0.7); color: #f7d77e; text-shadow: 0 0 10px rgba(242, 193, 78, 0.6); animation: gn-gleam 3.2s ease-in-out infinite; }
.gn-row.is-golden .gn-text { color: #fbe7b0; }
@keyframes gn-gleam { 50% { box-shadow: 0 0 14px -2px rgba(242, 193, 78, 0.55); } }
@media (prefers-reduced-motion: reduce) { .gn-row.is-golden .gn-kind { animation: none; } }

/* Discord (modules/discord): its button in Discord's own blurple, the log-in page's way in, the account page's link */
.btn-discord { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: #5865f2; color: #fff; box-shadow: 0 6px 18px -8px rgba(88, 101, 242, 0.9); }
.btn-discord:hover { background: #4752c4; color: #fff; }
.dc-icon { width: 18px; height: 18px; flex: none; }
.dc-signin { display: grid; justify-items: center; gap: 8px; margin-top: 14px; }
.dc-or { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.dc-or::before, .dc-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.dc-linked { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.dc-linked > span:not(.dc-avatar) { display: grid; flex: 1; min-width: 0; }
.dc-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #5865f2; color: #fff; flex: none; }