:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --safe-top: max(18px, env(safe-area-inset-top));
  --safe-bottom: max(24px, env(safe-area-inset-bottom));
  --text: #f6f5ff;
  --muted: #aaa9c1;
  --line: rgba(255, 255, 255, .10);
  --glass: rgba(18, 20, 37, .62);
  --accent: #bc9cff;
  --accent-2: #75d8ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #0b0d17; color: var(--text); overscroll-behavior: none; }
body { min-height: 100vh; overflow-x: hidden; }
button { font: inherit; }
button:disabled { cursor: default; }
#webgl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; touch-action: none; }
.noise { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .09; background-image: radial-gradient(rgba(255,255,255,.5) .5px, transparent .5px); background-size: 6px 6px; mix-blend-mode: soft-light; }
.app-shell { position: relative; z-index: 2; width: min(100%, 760px); margin: 0 auto; padding: var(--safe-top) 18px var(--safe-bottom); }
.topbar, .hero-row, .section-head, .xp-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar { margin-bottom: 18px; }
.eyebrow { font-size: 11px; letter-spacing: .16em; font-weight: 800; color: #cbc7e8; opacity: .82; }
h1, h2, p { margin: 0; }
h1 { margin-top: 4px; font-size: clamp(24px, 7vw, 40px); line-height: 1.05; letter-spacing: -.035em; }
h2 { margin-top: 4px; font-size: 24px; letter-spacing: -.025em; }
.icon-button { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: rgba(17,19,35,.55); backdrop-filter: blur(18px); }
.glass { background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)), var(--glass); border: 1px solid var(--line); box-shadow: 0 18px 60px rgba(0,0,0,.22); backdrop-filter: blur(22px) saturate(1.15); }
.hero-card { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 24px; }
.level-orb { width: 76px; aspect-ratio: 1; flex: 0 0 auto; border-radius: 24px; display: grid; place-items: center; align-content: center; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 35%), linear-gradient(135deg, #8162cb, #3e8cc1); border: 1px solid rgba(255,255,255,.25); box-shadow: inset 0 0 30px rgba(255,255,255,.12), 0 12px 30px rgba(76,84,190,.35); }
.level-orb span { font-size: 27px; font-weight: 900; line-height: 1; }
.level-orb small { font-size: 11px; margin-top: 4px; letter-spacing: .18em; }
.hero-copy { min-width: 0; flex: 1; }
.hero-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.hero-row span { font-size: 11px; padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.08); color: #dedcf5; }
.xp-track { height: 8px; margin: 12px 0 7px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.xp-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 18px rgba(155,188,255,.5); transition: width .5s ease; }
.xp-copy { font-size: 11px; color: var(--muted); }
.resources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 28px; }
.resource { min-width: 0; padding: 12px; border-radius: 18px; display: flex; align-items: center; gap: 9px; }
.resource > span { font-size: 19px; }
.resource div { min-width: 0; display: grid; }
.resource small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource strong { margin-top: 1px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
.section-head { margin: 0 2px 12px; }
.live-pill { padding: 7px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .1em; background: rgba(130,255,205,.1); border: 1px solid rgba(130,255,205,.18); color: #9ff4cb; }
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.game-card { position: relative; overflow: hidden; min-height: 138px; padding: 15px; border-radius: 22px; border: 1px solid var(--line); color: var(--text); text-align: left; background: linear-gradient(155deg, rgba(255,255,255,.11), rgba(255,255,255,.025)), rgba(18,20,37,.62); box-shadow: 0 18px 50px rgba(0,0,0,.17); backdrop-filter: blur(18px); transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.game-card:active { transform: scale(.975); }
.game-card::after { content:""; position:absolute; width:120px; height:120px; border-radius:50%; right:-55px; top:-55px; background: radial-gradient(circle, rgba(177,152,255,.32), transparent 68%); }
.game-card.migrated { border-color: rgba(126, 232, 208, .34); box-shadow: 0 18px 50px rgba(0,0,0,.17), inset 0 0 30px rgba(103,227,202,.035); }
.game-icon { width: 42px; height: 42px; border-radius: 14px; display:grid; place-items:center; font-size: 21px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); }
.game-card h3 { margin: 17px 0 3px; font-size: 17px; }
.game-card p { font-size: 11px; color: var(--muted); }
.game-card .arrow { position:absolute; right:13px; bottom:13px; color:#c6b8f9; }
.mode-badge { position: absolute; top: 15px; right: 14px; padding: 5px 7px; border-radius: 999px; font-size: 8px; font-weight: 900; letter-spacing: .12em; color: #a8f4d8; border: 1px solid rgba(125, 239, 204, .20); background: rgba(76, 173, 142, .09); }
.mode-badge.legacy { color: #b8b6cc; border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
.migration-note { margin-top: 12px; padding: 15px; border-radius: 20px; }
.migration-note strong { font-size: 13px; }
.migration-note p { margin-top: 5px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.status { margin: 16px 0 2px; text-align: center; font-size: 11px; color: var(--muted); min-height: 16px; }

.game-overlay { position: fixed; inset: 0; z-index: 20; display: grid; align-items: end; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.game-overlay.visible { opacity: 1; pointer-events: auto; }
.game-overlay.closing { opacity: 0; pointer-events: none; }
.overlay-backdrop { position: absolute; inset: 0; background: rgba(4,5,12,.68); backdrop-filter: blur(8px); }
.overlay-panel { position: relative; z-index: 1; width: min(100%, 680px); max-height: min(88vh, 760px); margin: 0 auto; padding: 20px 18px calc(var(--safe-bottom) + 4px); border-radius: 28px 28px 0 0; overflow-y: auto; transform: translateY(18px) scale(.99); transition: transform .22s ease; }
.game-overlay.visible .overlay-panel { transform: translateY(0) scale(1); }
.overlay-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.overlay-close { flex: 0 0 auto; font-size: 25px; line-height: 1; }
.overlay-copy { margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.chest-counter { margin: 14px 0 12px; font-size: 12px; font-weight: 750; color: #d9d3ef; }
.chest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; perspective: 900px; }
.chest-tile { position: relative; isolation: isolate; aspect-ratio: 1; min-height: 92px; overflow: hidden; border: 1px solid rgba(255,255,255,.10); border-radius: 20px; color: var(--text); background: radial-gradient(circle at 50% 24%, rgba(188,156,255,.22), transparent 37%), linear-gradient(155deg, rgba(255,255,255,.09), rgba(255,255,255,.025)); box-shadow: inset 0 0 30px rgba(154,121,237,.035), 0 14px 24px rgba(0,0,0,.16); transform-style: preserve-3d; transition: transform .18s ease, border-color .18s ease, filter .18s ease; }
.chest-tile:not(:disabled):active { transform: scale(.96) rotateX(4deg); }
.chest-tile:disabled:not(.opened) { opacity: .55; }
.chest-glow { position:absolute; inset: 16%; z-index:-1; border-radius:50%; background: radial-gradient(circle, rgba(168,132,255,.25), transparent 68%); filter: blur(7px); }
.chest-lid { position:absolute; left:50%; top:27%; transform:translate(-50%,-50%); width:54%; height:19%; border-radius: 9px 9px 5px 5px; display:grid; place-items:center; font-size:11px; color:#efe7ff; background: linear-gradient(180deg,#9a78cc,#674991); border:1px solid rgba(255,255,255,.20); box-shadow: 0 4px 12px rgba(0,0,0,.25); transform-origin: 50% 100%; transition: transform .42s cubic-bezier(.18,.8,.25,1.35); }
.chest-body { position:absolute; left:50%; top:57%; transform:translate(-50%,-50%); width:58%; height:38%; border-radius: 6px 6px 12px 12px; display:grid; place-items:center; font-size:23px; line-height:1; color:#d2b4f4; background: linear-gradient(180deg,#76569d,#4a3569); border:1px solid rgba(255,255,255,.16); box-shadow: inset 0 0 15px rgba(255,255,255,.07), 0 12px 20px rgba(0,0,0,.28); }
.chest-tile > small { position:absolute; left:8px; bottom:6px; font-size: 11px; color:rgba(255,255,255,.42); }
.chest-tile.opening { animation: chest-shake .34s ease both; border-color: rgba(199,169,255,.42); }
.chest-tile.opening .chest-lid { transform: translate(-50%,-50%) rotateX(-52deg) translateY(-5px); }
.chest-tile.opened { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-color: rgba(150,225,218,.27); background: radial-gradient(circle at 50% 36%, rgba(123,236,211,.17), transparent 42%), linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); animation: reward-pop .34s ease both; }
.chest-tile.opened .reward-icon { font-size: 25px; filter: drop-shadow(0 0 12px rgba(190,173,255,.45)); }
.chest-tile.opened strong { margin-top:4px; font-size:14px; }
.chest-tile.opened small { position:static; padding:0 5px; font-size: 11px; color:var(--muted); text-align:center; }
.chest-tile.historical { opacity:.52; animation:none; }
.chest-result { min-height: 40px; margin-top: 12px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: rgba(255,255,255,.035); color: #d5d1e8; font-size: 11px; line-height:1.4; }
.game-overlay.completed .chest-result { border-color: rgba(126,232,208,.20); color: #b9f0dc; }
@keyframes chest-shake { 0%,100% { transform:translateX(0) scale(1); } 25% { transform:translateX(-3px) scale(1.015); } 60% { transform:translateX(3px) scale(1.02); } }
@keyframes reward-pop { 0% { transform:scale(.88); filter:brightness(1.7); } 70% { transform:scale(1.035); } 100% { transform:scale(1); filter:brightness(1); } }

@media (min-width: 680px) { .app-shell { padding-left: 24px; padding-right: 24px; }.game-grid { grid-template-columns: repeat(3, 1fr); }.game-card { min-height: 155px; }.game-overlay { align-items:center; padding:24px; }.overlay-panel { border-radius:28px; } }
@media (max-width: 390px) { .resources { gap: 7px; }.resource { padding: 10px 8px; }.resource > span { display:none; }.hero-card { gap: 12px; }.level-orb { width: 66px; border-radius: 21px; }.chest-grid { gap:7px; }.chest-tile { border-radius:16px; } }

/* 3D chests (chest-3d.js): the canvas replaces the CSS glyphs; rewards overlay the open chest. */
.chest-tile.chest-3d-ready { background: radial-gradient(circle at 50% 70%, rgba(255, 190, 110, .10), rgba(10, 10, 20, .55) 70%); }
.chest-tile.chest-3d-ready .chest-glow, .chest-tile.chest-3d-ready .chest-lid, .chest-tile.chest-3d-ready .chest-body { display: none; }
.chest-tile.chest-3d-ready.opening { animation: none; }
.chest-3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.chest-tile.chest-3d-ready.opened { display: block; }
.chest-reward {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
  animation: chest-reward-rise .6s cubic-bezier(.2, 1.3, .4, 1) both;
}
.chest-reward .reward-icon { font-size: 22px; filter: drop-shadow(0 0 10px rgba(255, 200, 100, .7)); }
.chest-reward strong { font-size: 14px; color: #ffe6a8; }
.chest-reward small { font-size: 11px; color: rgba(255, 255, 255, .7); }
.chest-reward.empty strong { color: rgba(255, 255, 255, .6); }
@keyframes chest-reward-rise { from { opacity: 0; transform: translateY(18px) scale(.7); } to { opacity: 1; transform: none; } }

.mmo-hud {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  padding: 13px;
  border-color: rgba(211, 180, 117, .28);
  background:
    linear-gradient(90deg, rgba(8,10,18,.94), rgba(19,22,35,.84)),
    radial-gradient(circle at 14% 10%, rgba(188,156,255,.12), transparent 33%);
  box-shadow:
    0 22px 58px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 -18px 36px rgba(0,0,0,.18);
}

.mmo-hud::before,
.mmo-hud::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.mmo-hud::before {
  inset: 4px;
  border: 1px solid rgba(209,177,112,.13);
  border-radius: 20px;
  clip-path: polygon(0 0, 34% 0, 37% 3px, 63% 3px, 66% 0, 100% 0, 100% 100%, 66% 100%, 63% calc(100% - 3px), 37% calc(100% - 3px), 34% 100%, 0 100%);
}

.mmo-hud::after {
  width: 270px;
  height: 270px;
  right: -110px;
  top: -170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94,129,211,.16), transparent 68%);
  filter: blur(5px);
}

.hero-crest {
  min-width: 0;
  display: grid;
  place-items: center;
}

.hero-portrait-shell {
  position: relative;
  width: 92px;
  height: 104px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(215,182,115,.40);
  border-radius: 18px 18px 22px 22px;
  background:
    radial-gradient(circle at 50% 24%, rgba(143,123,199,.28), transparent 38%),
    linear-gradient(155deg, #252633, #0d0f18 62%);
  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,.32),
    inset 0 0 28px rgba(180,143,86,.08),
    0 10px 26px rgba(0,0,0,.28);
}

.hero-portrait-shell::before,
.hero-portrait-shell::after {
  content: "◆";
  position: absolute;
  color: #c9a86b;
  font-size: 11px;
  text-shadow: 0 0 10px rgba(219,184,112,.28);
}

.hero-portrait-shell::before { left: -5px; top: 8px; }
.hero-portrait-shell::after { right: -5px; bottom: 8px; }

.hero-sigil {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 48px;
  line-height: 1;
  color: #d9d4e7;
  text-shadow:
    0 0 16px rgba(151,128,218,.42),
    0 2px 0 rgba(0,0,0,.7);
  transform: translateY(-5px);
}

.mmo-hud .level-orb {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 43px;
  height: 43px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(224,189,116,.58);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.26), transparent 30%),
    linear-gradient(145deg, #58472f, #17151a 68%);
  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,.42),
    0 5px 13px rgba(0,0,0,.35),
    0 0 14px rgba(204,169,101,.12);
}

.mmo-hud .level-orb span { font-size: 17px; }
.mmo-hud .level-orb small { margin-top: 1px; font-size: 6px; letter-spacing: .12em; color: #d7bb86; }

.mmo-hud .hero-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
}

.mmo-hud .hero-row {
  min-width: 0;
  align-items: flex-start;
}

.hero-identity {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.hero-identity small {
  color: #998f9e;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .13em;
}

.hero-identity strong {
  font-family: Georgia, "Times New Roman", serif;
  color: #f1ecf4;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .01em;
  text-shadow: 0 1px 0 #000;
}

.mmo-hud .hero-row > span {
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #aaa4b6;
  font-size: 8px;
}

.hud-stack {
  display: grid;
  gap: 4px;
}

.hud-meter {
  min-width: 0;
  display: grid;
  grid-template-columns: 27px minmax(0,1fr) minmax(72px, auto);
  align-items: center;
  gap: 7px;
}

.hud-label {
  color: #d6d0dc;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 1px 1px #000;
}

.hud-meter > strong {
  min-width: 0;
  color: #e9e5ed;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  text-align: right;
  white-space: nowrap;
  text-shadow: 0 1px 1px #000;
}

.hud-track {
  position: relative;
  height: 11px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 3px;
  background: linear-gradient(180deg, #090b11, #171a22);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.8),
    0 1px 0 rgba(255,255,255,.035);
}

.hud-track::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,.12);
  border-radius: 2px;
  pointer-events: none;
}

.hud-track i {
  position: absolute;
  inset: 1px auto 1px 1px;
  width: 0;
  border-radius: 2px;
  transition: width .45s cubic-bezier(.2,.8,.2,1);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.24);
}

.hud-track b {
  position: absolute;
  z-index: 3;
  inset: 1px;
  overflow: hidden;
  pointer-events: none;
}

.hud-track b::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 0;
  width: 28px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform: translateX(-34px) skewX(-18deg);
  will-change: transform, opacity;
  animation: hud-sheen 4.8s ease-in-out infinite;
}

.hud-meter.hp .hud-track i { background: linear-gradient(180deg, #d94c50, #8b1f29 62%, #60141b); box-shadow: inset 0 1px 1px rgba(255,206,206,.38), 0 0 7px rgba(214,59,67,.22); }
.hud-meter.mp .hud-track i { background: linear-gradient(180deg, #438bdc, #2453a2 62%, #18366f); box-shadow: inset 0 1px 1px rgba(204,229,255,.36), 0 0 7px rgba(67,139,220,.22); }
.hud-meter.cp .hud-track i { background: linear-gradient(180deg, #e0b752, #a87922 62%, #735015); box-shadow: inset 0 1px 1px rgba(255,241,184,.36), 0 0 7px rgba(224,183,82,.20); }
.hud-meter.exp .hud-track i { background: linear-gradient(180deg, #ab75df, #6f3fa5 62%, #4d297a); box-shadow: inset 0 1px 1px rgba(238,219,255,.36), 0 0 7px rgba(171,117,223,.20); }

.hud-meter.sp .hud-label,
.hud-meter.sp > strong { color: #a9d7c8; }

.sp-track i {
  width: 100%;
  opacity: .68;
  background:
    repeating-linear-gradient(90deg, rgba(99,190,162,.48) 0 10px, rgba(60,110,98,.28) 10px 12px),
    linear-gradient(180deg, #65c5aa, #377b68);
}

.hud-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #8f8999;
  font-size: 8px;
}

.hud-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #91cdb7;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .1em;
}

.hud-status-dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #80dfbd;
  box-shadow: 0 0 8px rgba(128,223,189,.6);
}

/* The track is at most ~300px wide; translating 340px clears it on every layout
   without reading the container width, keeping the sweep on the compositor. */
@keyframes hud-sheen {
  0%, 65% { transform: translateX(-34px) skewX(-18deg); opacity: 0; }
  72% { opacity: 1; }
  88% { transform: translateX(340px) skewX(-18deg); opacity: .35; }
  100% { transform: translateX(340px) skewX(-18deg); opacity: 0; }
}

@media (min-width: 680px) {
  .mmo-hud { grid-template-columns: 116px minmax(0,1fr); padding: 15px 16px; }
  .hero-portrait-shell { width: 102px; height: 114px; }
  .hero-sigil { font-size: 54px; }
  .hud-meter { grid-template-columns: 30px minmax(0,1fr) 98px; }
  .hud-track { height: 12px; }
}

@media (max-width: 430px) {
  .mmo-hud { grid-template-columns: 78px minmax(0,1fr); gap: 10px; padding: 10px; }
  .hero-portrait-shell { width: 72px; height: 94px; border-radius: 15px 15px 18px 18px; }
  .hero-sigil { font-size: 38px; }
  .mmo-hud .level-orb { width: 37px; height: 37px; bottom: -7px; }
  .mmo-hud .level-orb span { font-size: 14px; }
  .hero-identity strong { font-size: 15px; }
  .hud-meter { grid-template-columns: 23px minmax(0,1fr) 65px; gap: 5px; }
  .hud-meter > strong { font-size: 8px; }
  .hud-label { font-size: 11px; }
  .hud-track { height: 9px; }
}

@media (max-width: 340px) {
  .mmo-hud { grid-template-columns: 1fr; }
  .hero-crest { display: none; }
}

/* Painted class portrait inside the crest (hud.js sets --portrait). */
.hero-portrait-shell.has-portrait {
  background: var(--portrait) center 18% / cover no-repeat, #0d0f18;
  overflow: visible;
}
.hero-portrait-shell.has-portrait .hero-sigil { opacity: 0; }
.hero-portrait-shell.has-portrait .level-orb { z-index: 1; }

/* ------------------------------------------------------------------ */
/* Compact top HUD (prototype): portrait + bars | resources | banner.  */
/* ------------------------------------------------------------------ */
.top-hud {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  position: sticky; top: 0; z-index: 15;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
  margin: calc(-1 * var(--safe-top, 0px)) -18px 0; padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 10px;
  border-bottom: 1px solid var(--gold-dim);
  background: linear-gradient(180deg, rgba(20, 16, 24, .97), rgba(10, 9, 14, .96));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 236, 190, .08);
  color: #eee4cf;
}
.top-hud-hero { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 7px; min-width: 0; }

.top-portrait.hero-portrait-shell {
  width: 70px; height: 90px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  box-shadow: 0 0 0 2px #120e16, 0 0 0 3px var(--gold-dim), 0 6px 16px rgba(0, 0, 0, .6);
  cursor: pointer;
}
.top-portrait.hero-portrait-shell::before, .top-portrait.hero-portrait-shell::after { display: none; }
.top-portrait .hero-sigil { font-size: 34px; }
.top-level {
  position: absolute; left: -6px; bottom: -6px;
  min-width: 28px; height: 28px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: radial-gradient(circle at 40% 35%, #3a2d18, #120d08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .7);
  font: 700 12px/1 var(--serif); color: #f3dca6;
}

.top-hud-stats { display: grid; gap: 3px; align-content: start; min-width: 0; }
.top-hud-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; margin-bottom: 1px; }
.top-hud-name strong { font: 700 15px/1.1 var(--serif); color: #f3dca6; text-shadow: 0 1px 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-hud-name small { flex: 0 0 auto; font: 400 11px/1 var(--serif); color: rgba(238, 228, 207, .75); }

.top-bar { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px; align-items: center; }
.top-bar > span { font: 700 9px/1 var(--serif); color: rgba(243, 220, 166, .85); letter-spacing: .03em; }
.top-bar-track {
  position: relative; overflow: hidden; height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .85);
  background: linear-gradient(180deg, #07070b, #16151d);
  box-shadow: 0 0 0 1px rgba(216, 179, 106, .25), inset 0 2px 3px rgba(0, 0, 0, .8);
}
.top-bar-track i { position: absolute; inset: 0 auto 0 0; transition: width .6s cubic-bezier(.2, .8, .3, 1); }
.top-bar-track i::after { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .04)); }
.top-bar-track b { position: absolute; inset: 0 5px; display: flex; align-items: center; justify-content: flex-end; font: 700 9px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
.top-bar.hp i { background: linear-gradient(180deg, #e0484c, #8b1d25); }
.top-bar.mp i { background: linear-gradient(180deg, #4a90e2, #1f4f9c); }
.top-bar.cp i { background: linear-gradient(180deg, #e8c15a, #a87a22); }
.top-bar.sp i { background: linear-gradient(180deg, #3fc2a8, #1b6e60); }
.top-bar.exp i { background: linear-gradient(180deg, #a07ae0, #5b3a9c); }

/* Phones: the class sits under the name so the name is never cut to "Wh…". */
@media (max-width: 429px) {
  .top-hud-stats { gap: 2px; }
  .top-hud-name { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 0; }
  .top-hud-name strong { max-width: 100%; font-size: 14px; }
  .top-hud-name small { font-size: 10px; line-height: 1.1; }
  .top-bar-track { height: 11px; }
}
/* Smallest phones: the clan banner duplicates the Клан tab, so the bars get its space. */
@media (max-width: 359px) {
  .top-banner { display: none; }
  .top-hud-hero { grid-template-columns: 62px minmax(0, 1fr); }
  .top-portrait.hero-portrait-shell { width: 62px; height: 84px; }
}
.top-hud-side { display: grid; grid-template-columns: auto auto; gap: 5px; align-items: stretch; }
.top-resources {
  display: grid; align-content: space-between; gap: 4px;
  padding: 5px 6px;
  border-radius: 6px;
  border: 1px solid var(--gold-dim);
  background: rgba(6, 5, 9, .6);
}
.top-res { display: grid; grid-template-columns: 16px minmax(40px, auto) 20px; gap: 4px; align-items: center; }
.top-res > span { font-size: 13px; text-align: center; }
.top-res strong { font: 700 12px/1 system-ui, sans-serif; color: #fff; white-space: nowrap; text-align: right; }
.top-res .resource-plus { position: static; width: 20px; height: 20px; font-size: 14px; border-radius: 4px; }
.top-res > i { width: 20px; }

.top-hud-rail { display: grid; grid-template-columns: auto; grid-template-rows: 1fr auto; gap: 4px; }
.top-banner {
  position: relative;
  width: 34px; min-height: 64px; padding: 6px 1px 12px;
  display: grid; justify-items: center; align-content: start; gap: 3px;
  border: 1px solid var(--gold);
  border-bottom: 0;
  background: linear-gradient(180deg, #3b2b5e, #1e1533);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  color: #f3dca6; cursor: pointer;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .5);
  animation: top-banner-sway 5s ease-in-out infinite;
  transform-origin: 50% 0;
}
.top-banner .ui-icon { font-size: 18px; color: #f3dca6; }
.top-banner small { font: 400 6.5px/1.1 var(--serif); text-align: center; color: rgba(243, 220, 166, .85); }
.top-hud-rail { grid-template-columns: auto auto; grid-template-rows: none; }
.top-icons { display: grid; gap: 4px; align-content: start; }
.top-icons #fullscreen { display: none; }
@media (min-width: 430px) { .top-icons #fullscreen { display: grid; } }
.top-icon {
  width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center;
  border-radius: 6px;
  border: 1px solid var(--gold-dim);
  background: rgba(20, 16, 26, .9);
  color: #d8c9a4; font-size: 16px;
}
.top-icon:active, .top-banner:active, .top-portrait:active { transform: scale(.94); }

@keyframes top-banner-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(1.6deg); } }
@media (prefers-reduced-motion: reduce) { .top-banner { animation: none; } }
@media (min-width: 680px) { .top-hud { margin-left: -24px; margin-right: -24px; padding-left: 16px; padding-right: 16px; } }

.game-card.unavailable {
  opacity: .48;
  filter: saturate(.45);
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

.game-card.unavailable:active { transform: none; }
.game-card.unavailable::after { opacity: .22; }
.game-card.unavailable .game-icon { filter: grayscale(.2); }
.game-card.unavailable .arrow { color: var(--muted); font-size: 11px; }

.mode-badge.group-only {
  color: #d2cfdf;
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
}

.profile-gender button:disabled {
  opacity: .48;
  filter: saturate(.5);
}

/* Gacha (gacha.js): painted spiral banners, a summon sequence coloured by the
   grade that dropped, and the item reveal. */
.overlay-panel.gacha-panel {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  position: relative; overflow-x: hidden;
  display: grid; gap: 10px;
  max-height: min(94vh, 920px);
  padding-top: 12px;
  color: #eee4cf;
}
.gacha-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.gacha-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.gacha-round { position: static; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif); }

.gacha-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.gacha-tab { position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; border-radius: 8px; border: 1px solid #3a3440; background: var(--art) center 25% / cover no-repeat, #111; filter: grayscale(.6) brightness(.65); transition: filter .2s ease, transform .2s ease; }
.gacha-tab.ready::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #7fe07e; box-shadow: 0 0 6px #7fe07e; }
.gacha-tab.active { filter: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(216, 179, 106, .45); transform: translateY(-2px); }

.gacha-banner {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 4 / 4.6;
  display: grid; align-content: end;
  border-radius: 10px; border: 1px solid var(--gold-dim);
  box-shadow: inset 0 0 0 1px rgba(255, 222, 160, .08), 0 10px 26px rgba(0, 0, 0, .5);
  animation: gacha-banner-in .45s cubic-bezier(.2, .8, .3, 1) both;
}
.gacha-banner-art { position: absolute; inset: -4%; z-index: -2; background: var(--art) center 20% / cover no-repeat; animation: gacha-drift 16s ease-in-out infinite alternate; }
.gacha-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(10, 8, 14, .95)), radial-gradient(circle at 50% 30%, transparent 50%, rgba(0, 0, 0, .35)); }
.gacha-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 240, 200, .16) 50%, transparent 60%) no-repeat; background-size: 250% 100%; animation: gacha-gleam 6s ease-in-out infinite; pointer-events: none; }
.gacha-banner.locked .gacha-banner-art { filter: grayscale(.7) brightness(.6); }
.gacha-banner-copy { display: grid; gap: 6px; padding: 14px; }
.gacha-banner-copy small { font: 700 11px/1 var(--serif); letter-spacing: .12em; color: rgba(243, 220, 166, .8); }
.gacha-banner-copy h3 { margin: 0; font: 700 24px/1.1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000, 0 0 16px rgba(216, 179, 106, .35); }
.gacha-rates { display: flex; flex-wrap: wrap; gap: 5px; }
.gacha-rates span { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 7px; border-radius: 4px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .12); font-size: 11px; color: #eee4cf; }
.gacha-rates b { font: 700 12px/1 var(--serif); }
.gacha-lock { position: absolute; top: 12px; left: 12px; right: 12px; padding: 8px; border-radius: 6px; background: rgba(0, 0, 0, .7); text-align: center; font-size: 12px; color: #ffb0a8; }

/* Grade colours shared by rate chips, the summon and the reveal. */
.tone-plain { --tone: #c8c4cc; --tone-rgb: 200 196 204; }
.tone-green { --tone: #7fe07e; --tone-rgb: 127 224 126; }
.tone-blue { --tone: #6fa2ff; --tone-rgb: 111 162 255; }
.tone-purple { --tone: #b886ff; --tone-rgb: 184 134 255; }
.tone-gold { --tone: #ffd36a; --tone-rgb: 255 211 106; }
.tone-crimson { --tone: #ff6a5a; --tone-rgb: 255 106 90; }
.tone-prism { --tone: #fff; --tone-rgb: 255 255 255; }
.gacha-rates span b { color: var(--tone); }
.gacha-rates .tone-prism b { background: linear-gradient(90deg, #ff6a5a, #ffd36a, #7fe07e, #6fa2ff, #b886ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

.gacha-shards { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin: 12px 4px; font: 700 12px/1 var(--serif); color: var(--gold-bright, #f3dca6); }
.gacha-shards > div { position: relative; height: 16px; overflow: hidden; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .8); background: linear-gradient(180deg, #07070b, #16151d); box-shadow: 0 0 0 1px rgba(216, 179, 106, .25); }
.gacha-shards i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3a6ab8, #7ab0ff); }
.gacha-shards b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 10px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }

.gacha-summon {
  display: grid; justify-items: center; gap: 4px;
  width: 100%; min-height: 56px; padding: 8px 14px;
  border-radius: 6px; border: 1px solid var(--gold);
  background: linear-gradient(180deg, #7a5a22, #3a2a10);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .35), 0 6px 16px rgba(0, 0, 0, .5), 0 0 20px rgba(216, 179, 106, .3);
  color: #fbeccb;
  animation: gacha-summon-glow 2.4s ease-in-out infinite;
}
.gacha-summon strong { font: 700 18px/1 var(--serif); }
.gacha-summon small { font: 600 12px/1 system-ui, sans-serif; color: rgba(251, 236, 203, .85); }
.gacha-summon:disabled { animation: none; opacity: .5; }
.gacha-status { min-height: 16px; text-align: center; font-size: 12px; color: rgba(238, 228, 207, .75); }

/* Summon sequence, over the whole panel. */
.gacha-summon-scene {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgb(var(--tone-rgb, 200 196 204) / .22), transparent 60%), #07060b;
  opacity: 0; transition: opacity .25s ease;
}
.gacha-summon-scene[hidden] { display: none; }
.gacha-summon-scene.charging, .gacha-summon-scene.revealed { opacity: 1; }
.gacha-summon-scene.instant { transition: none; }
.gacha-summon-scene.leaving { opacity: 0; }
.gs-circle { position: absolute; left: 50%; top: 58%; width: 240px; height: 240px; margin: -120px 0 0 -120px; transform: rotateX(62deg); }
.gs-circle i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(var(--tone-rgb) / .8); box-shadow: 0 0 18px rgb(var(--tone-rgb) / .6), inset 0 0 18px rgb(var(--tone-rgb) / .4); opacity: 0; }
.gs-circle i:nth-child(2) { inset: 26px; border-style: dashed; }
.gs-circle i:nth-child(3) { inset: 60px; background: repeating-conic-gradient(rgb(var(--tone-rgb) / .5) 0 4deg, transparent 4deg 30deg); -webkit-mask-image: radial-gradient(circle, transparent 60%, #000 62%); mask-image: radial-gradient(circle, transparent 60%, #000 62%); }
.charging .gs-circle i { animation: gs-ring-in .5s ease-out forwards, gs-spin 3s linear infinite; }
.charging .gs-circle i:nth-child(2) { animation-delay: .12s, 0s; animation-direction: normal, reverse; }
.charging .gs-circle i:nth-child(3) { animation-delay: .24s, 0s; }
.gs-pillar { position: absolute; left: 50%; top: -10%; bottom: 40%; width: 70px; margin-left: -35px; background: linear-gradient(90deg, transparent, rgb(var(--tone-rgb) / .9), #fff 50%, rgb(var(--tone-rgb) / .9), transparent); filter: blur(4px); transform-origin: 50% 0; transform: scaleY(0); opacity: 0; }
.pillar .gs-pillar { animation: gs-pillar .6s cubic-bezier(.3, .8, .3, 1) forwards; }
.gs-burst { position: absolute; left: 50%; top: 58%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: radial-gradient(circle, #fff, rgb(var(--tone-rgb) / .9) 35%, transparent 70%); opacity: 0; }
.burst .gs-burst { animation: gs-burst .5s ease-out forwards; }
.gs-sparks { position: absolute; left: 50%; top: 58%; }
.gs-sparks i { position: absolute; width: 4px; height: 14px; margin: -7px 0 0 -2px; border-radius: 2px; background: rgb(var(--tone-rgb)); box-shadow: 0 0 8px rgb(var(--tone-rgb)); opacity: 0; transform: rotate(var(--a)) translateY(0); }
.burst .gs-sparks i { animation: gs-spark .6s ease-out var(--d) forwards; }
.tone-prism .gs-pillar { background: linear-gradient(90deg, transparent, #ff6a5a, #ffd36a, #fff 50%, #6fa2ff, #b886ff, transparent); }

/* Item reveal. */
.gacha-reveal { position: relative; display: grid; justify-items: center; gap: 8px; width: min(100%, 420px); padding: 20px 16px; text-align: center; animation: gs-reveal .5s cubic-bezier(.2, 1.2, .4, 1) both; }
.gacha-reveal-grade { font: 900 44px/1 var(--serif); color: var(--tone); text-shadow: 0 0 22px rgb(var(--tone-rgb) / .8), 0 3px 0 #000; }
.tone-prism .gacha-reveal-grade { background: linear-gradient(90deg, #ff6a5a, #ffd36a, #7fe07e, #6fa2ff, #b886ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(255, 255, 255, .5)); }
.gacha-reveal .gacha-loot-stage { position: relative; width: min(64vw, 240px); aspect-ratio: 1; display: grid; place-items: center; }
.gacha-reveal .gacha-loot-stage::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgb(var(--tone-rgb) / .35), transparent 65%); animation: gacha-halo 2.4s ease-in-out infinite alternate; }
.gacha-reveal-rarity { font: 700 11px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--tone); }
.gacha-reveal h3 { margin: 0; font: 700 20px/1.2 var(--serif); color: #f3dca6; }
.gacha-reveal p { margin: 0; font-size: 12px; line-height: 1.45; color: rgba(238, 228, 207, .75); }
.gacha-item-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.gacha-item-stats span { padding: 5px 8px; border-radius: 4px; border: 1px solid rgba(216, 179, 106, .2); background: rgba(0, 0, 0, .4); font-size: 11px; color: rgba(238, 228, 207, .8); }
.gacha-item-stats b { color: #fff; }
.gacha-resolve-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 6px; }
.gacha-reveal .gacha-action { min-height: 44px; border-radius: 6px; border: 1px solid var(--gold-dim); background: rgba(14, 11, 18, .85); color: rgba(243, 220, 166, .9); font: 700 14px/1 var(--serif); }
.gacha-reveal .gacha-action.primary { border-color: var(--gold); background: linear-gradient(180deg, #6a4f1f, #3a2a10); color: #fbeccb; }
.gacha-action.working { filter: brightness(.75); }
.shatter .gacha-reveal .gacha-loot-stage { animation: gs-shatter .5s ease-in forwards; }
.stored .gacha-reveal .gacha-loot-stage { animation: gs-store .5s ease-in forwards; }

@keyframes gacha-banner-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes gacha-drift { from { transform: scale(1); } to { transform: scale(1.06) translate(-1%, -1.5%); } }
@keyframes gacha-gleam { 0%, 70% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@keyframes gacha-summon-glow { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 236, 190, .35), 0 6px 16px rgba(0, 0, 0, .5), 0 0 14px rgba(216, 179, 106, .2); } 50% { box-shadow: inset 0 1px 0 rgba(255, 236, 190, .35), 0 6px 16px rgba(0, 0, 0, .5), 0 0 28px rgba(216, 179, 106, .5); } }
@keyframes gs-ring-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes gs-spin { to { rotate: 360deg; } }
@keyframes gs-pillar { 0% { opacity: 0; transform: scaleY(0); } 40% { opacity: 1; } 100% { opacity: 1; transform: scaleY(1); } }
@keyframes gs-burst { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(9); } }
@keyframes gs-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-130px); } }
@keyframes gs-reveal { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes gacha-halo { from { transform: scale(.9); opacity: .7; } to { transform: scale(1.08); opacity: 1; } }
@keyframes gs-shatter { to { opacity: 0; transform: scale(1.4); filter: blur(6px) brightness(2); } }
@keyframes gs-store { to { opacity: 0; transform: translateY(60px) scale(.3); } }
@media (prefers-reduced-motion: reduce) { .gacha-banner-art, .gacha-banner::after, .gacha-summon, .gs-circle i, .gacha-reveal .gacha-loot-stage::before { animation: none !important; } }

.equipment-panel { max-height: min(92vh, 900px); }
.equipment-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0 12px; }
.equipment-summary > div { min-width:0; padding:11px 12px; border:1px solid rgba(255,255,255,.08); border-radius:15px; background:rgba(255,255,255,.035); display:grid; gap:3px; }
.equipment-summary small { color:var(--muted); font-size: 11px; text-transform:uppercase; letter-spacing:.08em; }
.equipment-summary strong { font-size:15px; overflow:hidden; text-overflow:ellipsis; }
.equipment-tabs { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:0 0 14px; padding:4px; border:1px solid rgba(255,255,255,.07); border-radius:14px; background:rgba(255,255,255,.025); }
.equipment-tabs button { min-height:38px; border:0; border-radius:10px; color:var(--muted); background:transparent; font-size: 11px; font-weight:800; letter-spacing:.02em; }
.equipment-tabs button.active { color:#f3efff; background:linear-gradient(135deg,rgba(165,126,240,.17),rgba(85,160,205,.1)); box-shadow:inset 0 0 20px rgba(165,126,240,.045); }
[data-equipment-panel][hidden] { display:none !important; }
.loadout-section { margin:0 0 14px; }
.equipment-section-title { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:0 2px 8px; }
.equipment-section-title strong { font-size:13px; }
.equipment-section-title small { color:var(--muted); font-size: 11px; text-align:right; line-height:1.35; }
.loadout-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.loadout-slot { min-width:0; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); display:grid; grid-template-columns:auto 1fr; gap:2px 8px; align-items:center; }
.loadout-slot small { grid-column:1 / -1; color:var(--muted); font-size: 11px; }
.loadout-slot strong { font-size: 11px; }
.loadout-slot span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.equipment-filters { display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none; }
.equipment-filters::-webkit-scrollbar { display:none; }
.equipment-filter { flex:0 0 auto; border:1px solid rgba(255,255,255,.09); border-radius:999px; padding:7px 11px; background:rgba(255,255,255,.035); color:var(--muted); font-size: 11px; }
.equipment-filter.active { color:#f1ecff; border-color:rgba(188,156,255,.35); background:rgba(165,126,240,.12); box-shadow:inset 0 0 18px rgba(165,126,240,.05); }
.equipment-list { display:grid; gap:9px; }
.equipment-item { position:relative; padding:13px; border:1px solid rgba(255,255,255,.08); border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018)); overflow:hidden; }
.equipment-item::after { content:""; position:absolute; width:110px; height:110px; right:-50px; top:-55px; border-radius:50%; background:radial-gradient(circle,rgba(160,128,235,.12),transparent 68%); pointer-events:none; }
.equipment-item.equipped { border-color:rgba(126,232,208,.28); box-shadow:inset 0 0 28px rgba(91,210,180,.035); }
.equipment-item-top { position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.equipment-item-title { min-width:0; display:flex; gap:10px; align-items:center; }
.equipment-grade { width:40px; height:40px; flex:0 0 auto; border:1px solid rgba(255,255,255,.12); border-radius:12px; display:grid; place-items:center; font-size:11px; font-weight:900; background:rgba(255,255,255,.045); }
.equipment-item-title div { min-width:0; display:grid; gap:2px; }
.equipment-item-title strong { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.equipment-item-title small { color:var(--muted); font-size: 11px; }
.equipment-badges { display:flex; flex:0 0 auto; align-items:center; gap:5px; }
.equipped-pill, .forge-level-pill { flex:0 0 auto; padding:5px 7px; border-radius:999px; font-size:8px; font-weight:900; letter-spacing:.07em; }
.equipped-pill { color:#a8f4d8; background:rgba(76,173,142,.09); border:1px solid rgba(125,239,204,.2); }
.forge-level-pill { color:#e9d7ff; background:rgba(165,126,240,.11); border:1px solid rgba(188,156,255,.22); }
.equipment-full-name { position:relative; z-index:1; margin-top:10px; color:#ddd8ee; font-size: 11px; line-height:1.4; }
.equipment-description { position:relative; z-index:1; margin-top:4px; color:var(--muted); font-size: 11px; line-height:1.4; }
.equipment-meta { position:relative; z-index:1; display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.equipment-meta span { padding:4px 6px; border-radius:7px; background:rgba(255,255,255,.035); color:#bdb9ce; font-size:8px; }
.equipment-stats { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.equipment-stats span { padding:5px 7px; border:1px solid rgba(255,255,255,.065); border-radius:8px; color:#d5d1e8; background:rgba(255,255,255,.025); font-size: 11px; }
.equipment-item-actions { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:11px; }
.equipment-action { min-height:38px; border-radius:11px; border:1px solid rgba(255,255,255,.09); color:#e9e6f4; background:rgba(255,255,255,.04); font-size: 11px; font-weight:750; }
.equipment-action.primary { border-color:rgba(155,188,255,.22); background:linear-gradient(135deg,rgba(165,126,240,.16),rgba(85,160,205,.11)); }
.equipment-action.sell { color:#d8c9bc; }
.equipment-action.sell.confirming { color:#ffd2bf; border-color:rgba(255,151,111,.3); background:rgba(180,81,50,.12); }
.equipment-action:disabled { cursor:not-allowed; opacity:.44; }
.forge-view { display:grid; gap:17px; }
.forge-section { display:grid; gap:8px; }
.forge-grid { display:grid; gap:9px; }
.forge-card { position:relative; display:grid; gap:10px; padding:13px; border:1px solid rgba(255,255,255,.08); border-radius:17px; background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); overflow:hidden; }
.forge-card::after { content:""; position:absolute; width:120px; height:120px; right:-60px; bottom:-70px; border-radius:50%; background:radial-gradient(circle,rgba(224,174,101,.1),transparent 68%); pointer-events:none; }
.forge-card.unaffordable { border-color:rgba(255,255,255,.055); }
.forge-card-head { position:relative; z-index:1; display:flex; align-items:center; gap:10px; min-width:0; }
.forge-card-head > div { min-width:0; display:grid; gap:3px; }
.forge-card-head strong { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.forge-card-head small { color:var(--muted); font-size: 11px; }
.forge-costs { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:6px; }
.forge-cost { padding:5px 7px; border:1px solid rgba(255,255,255,.065); border-radius:8px; color:#d7d2e5; background:rgba(255,255,255,.025); font-size: 11px; }
.forge-cost.missing { color:#e4aaa1; border-color:rgba(222,111,97,.18); background:rgba(160,63,50,.07); }
.forge-cost.maxed { color:#c8b8de; }
.forge-stat-preview { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:5px; }
.forge-stat-preview span { padding:5px 7px; border-radius:8px; background:rgba(165,126,240,.065); color:#d7cfea; font-size: 11px; }
.forge-action { position:relative; z-index:1; width:100%; border-color:rgba(225,181,112,.22); background:linear-gradient(135deg,rgba(200,141,73,.12),rgba(165,126,240,.1)); }
.forge-action.confirming { color:#fff0ce; border-color:rgba(245,197,116,.34); background:linear-gradient(135deg,rgba(205,145,64,.18),rgba(165,126,240,.12)); }
.equipment-overlay.busy .equipment-action, .equipment-overlay.busy .equipment-filter, .equipment-overlay.busy .equipment-tabs button { pointer-events:none; opacity:.55; }
.equipment-feedback { min-height:18px; margin:11px 2px 1px; color:var(--muted); font-size: 11px; text-align:center; }
.equipment-empty { padding:22px 14px; border:1px dashed rgba(255,255,255,.09); border-radius:16px; color:var(--muted); text-align:center; font-size: 11px; }
.equipment-empty.compact { grid-column:1 / -1; padding:13px; }
.grade-nograde { color:#b9b8c4; }
.grade-d { color:#b7dab9; }
.grade-c { color:#9fd6e8; }
.grade-b { color:#b6b3ff; }
.grade-a { color:#d7aef2; }
.grade-s { color:#f1c9a2; }
.grade-ss { color:#ffd8a8; text-shadow:0 0 12px rgba(255,190,102,.22); }
.grade-sss { color:#ffe7ad; text-shadow:0 0 15px rgba(255,213,112,.32); }
@media (min-width:680px) { .equipment-summary { grid-template-columns:repeat(5,minmax(0,1fr)); }.loadout-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.equipment-list,.forge-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.equipment-item-actions { margin-top:auto; } }
@media (max-width:390px) { .equipment-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.equipment-summary > div { padding:9px 8px; }.equipment-section-title small { display:none; }.equipment-item-actions { grid-template-columns:1fr; }.equipment-badges { flex-direction:column; align-items:flex-end; } }

/* Arena (arena.js), prototype style. */
.overlay-panel.arena-panel {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  position: relative;
  display: grid; gap: 12px;
  padding-top: 12px;
  color: #eee4cf;
}
.arena-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.arena-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.arena-round {
  position: static; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--gold-dim);
  background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif);
}
.arena-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; border-radius: 6px; border: 1px solid var(--gold-dim); background: rgba(6, 5, 9, .7); overflow: hidden; }
.arena-mode-tabs button { min-height: 36px; border: 0; background: transparent; color: rgba(238, 228, 207, .7); font: 600 13px/1 var(--serif); }
.arena-mode-tabs button.active { color: #fbeccb; background: linear-gradient(180deg, #6a4f1f, #3a2a10); box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), inset 0 0 0 1px var(--gold); }

.arena-hero-art {
  position: relative; overflow: hidden;
  min-height: 250px;
  display: grid; align-content: end;
  padding: 14px;
  border-radius: 8px; border: 1px solid var(--gold-dim);
  background: linear-gradient(180deg, rgba(10, 8, 14, .1) 30%, rgba(10, 8, 14, .92)), url("/art/menu/arena.webp") center 25% / cover no-repeat;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .6);
}
.arena-hero-art.expansion { background: linear-gradient(180deg, rgba(10, 8, 14, .1) 30%, rgba(10, 8, 14, .92)), linear-gradient(0deg, rgba(90, 60, 160, .25), transparent 60%), url("/art/menu/arena.webp") center 25% / cover no-repeat; }
.arena-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 230, 170, .16) 50%, transparent 70%) no-repeat; background-size: 250% 100%; background-position: 150% 0; pointer-events: none; }
.arena-hero-art.searching::after { animation: arena-sweep .9s ease-in-out; }
.arena-rank { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.arena-rank strong { display: block; font: 700 20px/1.1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.arena-rank span { display: block; font-size: 13px; color: #fff; }
.arena-rank small { font-size: 11px; color: rgba(238, 228, 207, .7); }
.arena-chances { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--gold-dim); background: rgba(6, 5, 9, .75); font: 700 12px/1 system-ui, sans-serif; color: #fff; }

/* Rank emblem: a metal shield with a gem and division pips. */
.arena-emblem {
  --m1: #7a7a80; --m2: #3a3a40; --gem: #8a8a95;
  position: relative; flex: 0 0 auto;
  width: 40px; height: 46px;
  display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 16%, 94% 64%, 50% 100%, 6% 64%, 0 16%);
  background: linear-gradient(145deg, var(--m1), var(--m2) 60%, var(--m1));
}
.arena-emblem::before { content: ""; position: absolute; inset: 3px; clip-path: inherit; background: linear-gradient(160deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)); }
.arena-emblem i { position: relative; width: 36%; height: 36%; rotate: 45deg; background: radial-gradient(circle at 35% 30%, #fff, var(--gem) 45%, rgba(0, 0, 0, .6)); box-shadow: 0 0 10px var(--gem); }
.arena-emblem b { position: absolute; bottom: 13%; font-size: 7px; line-height: 1; letter-spacing: 1px; color: #fff; text-shadow: 0 0 4px var(--gem), 0 1px 1px #000; }
.arena-emblem.large { width: 72px; height: 82px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .7)); animation: arena-emblem-glow 3s ease-in-out infinite; }
.arena-emblem.large b { font-size: 11px; letter-spacing: 2px; }
.arena-emblem.bronze { --m1: #d48a4a; --m2: #6a3a18; --gem: #e8a060; }
.arena-emblem.silver { --m1: #e2e6ee; --m2: #6a7080; --gem: #b8d0ff; }
.arena-emblem.gold { --m1: #f3d58a; --m2: #8a6420; --gem: #ffd86a; }
.arena-emblem.diamond { --m1: #b8f0ff; --m2: #2a6a8a; --gem: #7ae0ff; }
.arena-emblem.ruby { --m1: #ff9aa8; --m2: #7a1022; --gem: #ff3a5a; }

.arena-btn {
  width: 100%; min-height: 46px; padding: 8px 14px;
  border-radius: 6px; border: 1px solid var(--gold);
  background: linear-gradient(180deg, #6a4f1f, #3a2a10);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), 0 6px 14px rgba(0, 0, 0, .5);
  color: #fbeccb; font: 700 16px/1 var(--serif);
}
.arena-btn.red { border-color: #e06a6a; background: linear-gradient(180deg, #a02a2d, #5a1316); color: #ffecec; }
.arena-btn.ghost { min-height: 38px; background: transparent; border-color: var(--gold-dim); color: rgba(243, 220, 166, .85); box-shadow: none; font-size: 14px; }
.arena-btn.searching { animation: arena-pulse .9s ease-in-out infinite; }
.arena-btn:disabled { opacity: .5; }
.arena-actions { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }

.arena-match {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center;
  padding: 10px;
  border-radius: 8px; border: 1px solid rgba(224, 106, 106, .5);
  background: linear-gradient(90deg, rgba(90, 20, 24, .35), rgba(12, 10, 16, .9));
  animation: arena-slide .4s cubic-bezier(.2, .9, .3, 1.1) both;
}
.arena-match.leaving { animation: arena-slide-out .25s ease-in forwards; }
.arena-match-portrait { width: 64px; height: 64px; border-radius: 50%; background: var(--art) center 20% / cover no-repeat, #111; box-shadow: 0 0 0 2px #1a1420, 0 0 0 3px #e06a6a, 0 0 14px rgba(224, 106, 106, .5); }
.arena-match-info { display: grid; gap: 2px; min-width: 0; }
.arena-match-info small { font-size: 11px; color: rgba(238, 228, 207, .6); text-transform: uppercase; letter-spacing: .06em; }
.arena-match-info strong { font: 700 16px/1.15 var(--serif); color: #f3dca6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-match-info span { font-size: 12px; color: rgba(238, 228, 207, .8); }

.arena-season { display: grid; gap: 8px; padding: 10px; border-radius: 8px; border: 1px solid rgba(216, 179, 106, .2); background: rgba(8, 7, 12, .7); }
.arena-season-head { display: flex; justify-content: space-between; align-items: baseline; }
.arena-season-head strong { font: 700 14px/1 var(--serif); color: #f3dca6; }
.arena-season-head small { font-size: 11px; color: rgba(238, 228, 207, .7); }
.arena-ladder { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; scroll-behavior: smooth; scrollbar-width: none; }
.arena-ladder::-webkit-scrollbar { display: none; }
.arena-step { flex: 0 0 76px; display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 6px; border: 1px solid #3a3440; background: radial-gradient(circle at 50% 30%, #241e2c, #0e0c12); opacity: .75; }
.arena-step small { font: 400 10px/1.1 var(--serif); text-align: center; color: rgba(238, 228, 207, .8); }
.arena-step b { font: 700 11px/1 system-ui, sans-serif; color: #fff; }
.arena-step.current { opacity: 1; border-color: var(--gold); box-shadow: 0 0 12px rgba(216, 179, 106, .4); }
.arena-next { margin: 0; font-size: 11px; color: rgba(238, 228, 207, .7); }
.arena-next b { color: #f3dca6; }

.arena-board { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; animation: arena-slide .3s ease both; }
.arena-board li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 6px; border: 1px solid rgba(216, 179, 106, .14); background: #0f0c15; }
.arena-board li span { font: 700 13px/1 var(--serif); color: var(--gold); text-align: center; }
.arena-board li strong { font-size: 13px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-board li em { font-style: normal; font-size: 12px; color: #eee4cf; }
.arena-board li.me { border-color: var(--gold); background: rgba(106, 79, 31, .25); }
.arena-feedback { min-height: 16px; text-align: center; font-size: 12px; color: rgba(238, 228, 207, .75); }
.arena-overlay.busy [data-arena-find], .arena-overlay.busy [data-arena-fight] { pointer-events: none; }

/* VS intro and result, over the whole panel. */
.arena-vs {
  position: absolute; inset: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px;
  padding: 20px 12px;
  background: radial-gradient(circle at 50% 45%, rgba(160, 30, 40, .45), transparent 65%), rgba(8, 6, 11, .97);
  opacity: 0; transition: opacity .25s ease;
}
.arena-vs.on { opacity: 1; }
.arena-vs.leaving { opacity: 0; }
.arena-vs-side { display: grid; justify-items: center; gap: 8px; }
.arena-vs-side::before { content: ""; width: min(34vw, 130px); aspect-ratio: 3 / 4; border-radius: 8px; background: var(--art) center 15% / cover no-repeat, #111; box-shadow: 0 0 0 2px var(--gold-dim), 0 10px 26px rgba(0, 0, 0, .7); }
.arena-vs-side.me::before { box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(216, 179, 106, .45); }
.arena-vs-side.foe::before { box-shadow: 0 0 0 2px #e06a6a, 0 0 22px rgba(224, 106, 106, .45); transform: scaleX(-1); }
.arena-vs-side strong { font: 700 14px/1.1 var(--serif); color: #f3dca6; text-align: center; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-vs.on .arena-vs-side.me { animation: arena-in-left .5s cubic-bezier(.2, .9, .3, 1.1) both, arena-lunge-right .5s ease-in-out .7s 2 alternate; }
.arena-vs.on .arena-vs-side.foe { animation: arena-in-right .5s cubic-bezier(.2, .9, .3, 1.1) both, arena-lunge-left .5s ease-in-out .7s 2 alternate; }
.arena-vs-mark { font: 900 34px/1 var(--serif); color: #fff; text-shadow: 0 0 18px #e06a6a, 0 3px 0 #000; animation: arena-vs-pop .5s cubic-bezier(.2, 1.5, .4, 1) .35s both; }
.arena-vs-clash { position: absolute; left: 50%; top: 45%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 200, .95), rgba(255, 160, 60, .5) 35%, transparent 65%); opacity: 0; pointer-events: none; }
.arena-vs.on .arena-vs-clash { animation: arena-clash .5s ease-out .95s 2; }
.arena-vs-result { position: absolute; left: 12px; right: 12px; bottom: 18px; display: grid; justify-items: center; gap: 6px; animation: arena-result-in .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.arena-vs-result strong { font: 700 34px/1 var(--serif); color: #f3dca6; text-shadow: 0 0 22px rgba(232, 193, 90, .7), 0 3px 0 #000; }
.arena-vs.result-lose .arena-vs-result strong { color: #ff9a90; text-shadow: 0 0 22px rgba(224, 106, 106, .6), 0 3px 0 #000; }
.arena-vs-result span { font: 700 16px/1 system-ui, sans-serif; }
.arena-vs-result span.up { color: #9fe39a; }
.arena-vs-result span.down { color: #ff8a80; }
.arena-vs-result small { font-size: 12px; color: rgba(238, 228, 207, .75); }
.arena-vs-result .arena-btn { max-width: 260px; margin-top: 6px; }
.arena-vs.result-win .arena-vs-side.foe, .arena-vs.result-lose .arena-vs-side.me { filter: grayscale(.9) brightness(.5); transition: filter .5s ease; }

@keyframes arena-sweep { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes arena-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(216, 179, 106, 0); } 50% { box-shadow: 0 0 20px rgba(216, 179, 106, .6); } }
@keyframes arena-emblem-glow { 0%, 100% { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .7)); } 50% { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .7)) drop-shadow(0 0 12px rgba(255, 230, 170, .35)); } }
@keyframes arena-slide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes arena-slide-out { to { opacity: 0; transform: translateX(-20px); } }
@keyframes arena-in-left { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes arena-in-right { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes arena-lunge-right { to { transform: translateX(14px); } }
@keyframes arena-lunge-left { to { transform: translateX(-14px); } }
@keyframes arena-vs-pop { from { opacity: 0; transform: scale(2.4); } to { opacity: 1; transform: none; } }
@keyframes arena-clash { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes arena-result-in { from { opacity: 0; transform: translateY(20px) scale(.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .arena-emblem.large, .arena-match, .arena-vs *, .arena-btn.searching { animation: none !important; } }

.boss-panel { max-height:min(92vh,920px); }
.boss-empty-state { margin:18px 0 2px; padding:30px 18px; border:1px solid rgba(255,255,255,.08); border-radius:20px; background:linear-gradient(145deg,rgba(128,83,182,.09),rgba(255,255,255,.018)); display:grid; justify-items:center; text-align:center; gap:8px; }
.boss-empty-icon { width:68px; height:68px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.09); border-radius:21px; background:rgba(255,255,255,.035); font-size:34px; }
.boss-empty-state strong { margin-top:3px; font-size:15px; }
.boss-empty-state p { max-width:360px; color:var(--muted); font-size: 11px; line-height:1.5; }
.boss-summon { width:min(260px,100%); min-height:40px; margin-top:5px; border:1px solid rgba(192,139,255,.24); border-radius:12px; color:#f2eaff; background:linear-gradient(135deg,rgba(156,93,226,.2),rgba(176,76,109,.11)); font-size: 11px; font-weight:900; }
.boss-hero { position:relative; overflow:hidden; margin:16px 0 10px; padding:14px; border:1px solid rgba(225,118,154,.16); border-radius:19px; background:linear-gradient(145deg,rgba(148,62,98,.11),rgba(86,64,151,.075)); }
.boss-hero::after { content:""; position:absolute; width:170px; height:170px; top:-95px; right:-65px; border-radius:50%; background:radial-gradient(circle,rgba(226,92,137,.16),transparent 68%); pointer-events:none; }
.boss-name-row { position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.boss-name-row > div { min-width:0; display:grid; gap:2px; }
.boss-name-row small { color:#c9a7b9; font-size:8px; letter-spacing:.08em; }
.boss-name-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; }
.boss-name-row button { width:30px; height:30px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(255,255,255,.035); color:var(--muted); }
.boss-hero p { position:relative; z-index:1; margin:8px 0 10px; color:#bdb5c9; font-size: 11px; line-height:1.45; }
.boss-hp-copy { position:relative; z-index:1; display:flex; justify-content:space-between; gap:12px; font-size: 11px; }
.boss-hp-copy span { color:#d6a5b7; font-weight:900; }
.boss-hp-copy strong { font-size: 11px; }
.boss-hp-track { position:relative; z-index:1; height:8px; margin-top:5px; overflow:hidden; border:1px solid rgba(255,255,255,.07); border-radius:999px; background:rgba(0,0,0,.16); }
.boss-hp-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,rgba(202,75,116,.86),rgba(235,123,105,.88)); box-shadow:0 0 16px rgba(216,82,118,.23); transition:width .3s ease; }
.boss-timer { position:relative; z-index:1; display:flex; justify-content:space-between; margin-top:8px; font-size: 11px; }
.boss-timer span { color:var(--muted); }
.boss-timer strong { color:#ddc6d0; }
.boss-timer strong.expired { color:#ffaaa0; }
.boss-player-bars { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.boss-player-bars > div { min-width:0; padding:10px; border:1px solid rgba(255,255,255,.07); border-radius:13px; background:rgba(255,255,255,.025); display:grid; gap:4px; }
.boss-player-bars small { color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.06em; }
.boss-player-bars strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 11px; }
.boss-player-bars > div > span { height:4px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.055); }
.boss-player-bars i { display:block; height:100%; border-radius:inherit; background:rgba(129,207,181,.72); }
.boss-player-bars > div:last-child i { background:rgba(128,158,235,.75); }
.boss-dead { margin:-2px 0 12px; padding:8px 10px; border:1px solid rgba(235,108,93,.16); border-radius:11px; color:#eab2aa; background:rgba(156,57,48,.07); text-align:center; font-size: 11px; }
.boss-section-title { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:12px 2px 7px; }
.boss-section-title strong { font-size:12px; }
.boss-section-title small { color:var(--muted); font-size:8px; text-align:right; }
.boss-skills { display:grid; gap:7px; }
.boss-skill { min-width:0; padding:11px; border:1px solid rgba(255,255,255,.075); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.018)); color:#e8e4f2; text-align:left; }
.boss-skill.damage { border-color:rgba(230,112,130,.14); }
.boss-skill.heal { border-color:rgba(104,218,170,.14); }
.boss-skill.shield { border-color:rgba(114,164,239,.15); }
.boss-skill:disabled { opacity:.46; }
.boss-skill-top { display:flex; justify-content:space-between; gap:10px; }
.boss-skill-top strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.boss-skill-top span { flex:0 0 auto; color:#c4bfd0; font-size: 11px; }
.boss-skill p { margin:5px 0 7px; color:var(--muted); font-size:8px; line-height:1.4; }
.boss-skill-foot { display:flex; justify-content:space-between; gap:8px; color:#aaa5b8; font-size:8px; }
.boss-loot { display:flex; flex-wrap:wrap; gap:6px; min-height:28px; padding:9px; border:1px solid rgba(255,208,117,.09); border-radius:12px; background:rgba(159,115,41,.035); }
.boss-loot span { padding:5px 7px; border-radius:8px; background:rgba(255,255,255,.03); color:#d4c9b5; font-size:8px; }
.boss-damage-list { display:grid; gap:5px; }
.boss-damage-row { display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:7px; padding:7px 9px; border:1px solid rgba(255,255,255,.06); border-radius:10px; background:rgba(255,255,255,.02); }
.boss-damage-row span { color:var(--muted); font-size:8px; }
.boss-damage-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 11px; }
.boss-damage-row em { color:#dfc2cb; font-size: 11px; font-style:normal; font-weight:800; }
.boss-feedback { min-height:18px; margin:11px 2px 1px; color:var(--muted); font-size: 11px; text-align:center; }
.boss-empty { padding:16px 12px; border:1px dashed rgba(255,255,255,.08); border-radius:12px; color:var(--muted); text-align:center; font-size: 11px; }
.boss-empty.compact { padding:10px; }
.boss-overlay.busy .boss-skill, .boss-overlay.busy .boss-summon, .boss-overlay.busy [data-boss-refresh] { pointer-events:none; opacity:.5; }
.boss-overlay.fighting .boss-hp-track span { filter:brightness(1.18); }
.boss-result { position:sticky; top:0; z-index:22; margin:-2px 0 9px; padding:10px 12px; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(16,18,34,.95); backdrop-filter:blur(18px); display:flex; align-items:center; gap:9px; opacity:0; transform:translateY(-10px); transition:.18s ease; }
.boss-result.visible { opacity:1; transform:translateY(0); }
.boss-result.leaving { opacity:0; transform:translateY(-7px); }
.boss-result.victory { border-color:rgba(246,205,105,.23); box-shadow:0 0 28px rgba(228,181,75,.06); }
.boss-result span { font-size:20px; }
.boss-result strong { font-size: 11px; line-height:1.4; }
@media (min-width:720px) { .boss-skills { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:390px) { .boss-player-bars { grid-template-columns:1fr; }.boss-section-title small { display:none; } }

/* 2.5D boss stage (boss-stage.js) */
.boss-stage {
  position: relative;
  aspect-ratio: 16 / 11;
  margin: 0 0 14px;
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #1b1730, #07070f 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px rgba(0, 0, 0, .35);
  touch-action: pan-y;
}
.boss-stage[hidden] { display: none; }
.boss-stage-canvas, .boss-stage-still { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.boss-stage-still { object-fit: cover; }
.boss-stage-canvas { opacity: 0; transition: opacity .5s ease; }
.boss-stage.ready .boss-stage-canvas { opacity: 1; }
.boss-stage-number {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 2;
  font: 900 30px/1 Georgia, serif;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 18px rgba(255, 90, 80, .8);
  pointer-events: none;
  transform: translate(-50%, 0) scale(.6);
  animation: boss-number-pop 1.2s cubic-bezier(.2, .9, .3, 1) forwards;
}
.boss-stage-number.crit { font-size: 40px; color: #ffe27a; text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 24px rgba(255, 200, 60, .95); }
.boss-stage-number.heal { color: #8dffb4; text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 18px rgba(80, 255, 150, .8); }
@keyframes boss-number-pop {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.6); }
  15% { opacity: 1; transform: translate(calc(-50% + var(--drift) * .3), -18px) scale(1.15); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--drift)), -90px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .boss-stage-number { animation-duration: .01s; }
}

/* Player portrait on the boss stage. */
.boss-stage-player {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  width: 26%;
  max-width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 200deg, #e6c47a, #6b4f24, #f5deb0, #6b4f24, #e6c47a);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
  animation: hero-bob 3.2s ease-in-out infinite;
  pointer-events: none;
}
.boss-stage-player img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 22%; display: block; }
.boss-stage-aura { position: absolute; inset: -8px; border-radius: 50%; opacity: 0; }
.boss-stage-player.attacking { animation: hero-lunge .45s cubic-bezier(.3, 1.4, .5, 1); }
.boss-stage-player.recoil { animation: hero-recoil .5s ease-out; }
.boss-stage-player.recoil img { filter: brightness(1.6) saturate(.4) sepia(1) hue-rotate(-40deg); transition: filter .1s; }
.boss-stage-player.healing .boss-stage-aura { animation: hero-aura .9s ease-out; background: radial-gradient(circle, rgba(110, 255, 160, .0) 45%, rgba(110, 255, 160, .7) 62%, transparent 74%); }
.boss-stage-player.shielding .boss-stage-aura { animation: hero-aura .9s ease-out; background: radial-gradient(circle, rgba(120, 190, 255, .15) 50%, rgba(140, 210, 255, .85) 63%, transparent 72%); }
@keyframes hero-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes hero-lunge { 0% { transform: translate(0, 0) scale(1); } 45% { transform: translate(34%, -30%) scale(1.12); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes hero-recoil { 0% { transform: translate(0, 0); } 25% { transform: translate(-10%, 8%) rotate(-6deg); } 50% { transform: translate(4%, -2%) rotate(3deg); } 100% { transform: translate(0, 0); } }
@keyframes hero-aura { 0% { opacity: 0; transform: scale(.8); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .boss-stage-player, .boss-stage-player.attacking, .boss-stage-player.recoil { animation: none; } }

/* ------------------------------------------------------------------ */
/* MMO raid HUD (boss-hud.js) - ornate gold-framed panels.            */
/* ------------------------------------------------------------------ */
.boss-panel { --gold: #d8b36a; --gold-dim: #6b5326; --panel: linear-gradient(180deg, rgba(28, 22, 34, .96), rgba(12, 10, 18, .96)); --serif: Georgia, "Times New Roman", serif; }
.mmo-frame {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--gold-dim);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px rgba(255, 222, 160, .08), inset 0 1px 0 rgba(255, 236, 190, .14), 0 10px 26px rgba(0, 0, 0, .45);
  color: #eee4cf;
  text-align: left;
  font: inherit;
}
.mmo-frame::before, .mmo-frame::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid var(--gold);
  background: #1a1420;
  transform: rotate(45deg);
}
.mmo-frame::before { top: -5px; left: calc(50% - 4px); }
.mmo-frame::after { bottom: -5px; left: calc(50% - 4px); }
button.mmo-frame { cursor: pointer; }
button.mmo-frame:active { transform: scale(.99); }
.mmo-frame-body { display: grid; gap: 5px; min-width: 0; }
.mmo-frame-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mmo-frame-title strong { font: 700 17px/1.1 var(--serif); color: #f3dca6; text-shadow: 0 1px 0 #000, 0 0 12px rgba(216, 179, 106, .25); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmo-frame-title small { font-size: 11px; color: rgba(243, 220, 166, .6); white-space: nowrap; }

.mmo-portrait {
  position: relative;
  display: block;
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--portrait) center 22% / cover no-repeat, #111;
  box-shadow: 0 0 0 2px #1a1420, 0 0 0 4px var(--gold), 0 0 0 5px var(--gold-dim), 0 6px 16px rgba(0, 0, 0, .6);
}
.mmo-portrait.boss { width: 72px; height: 72px; background-position: center 35%; }
.mmo-portrait em {
  position: absolute; left: -4px; bottom: -4px;
  min-width: 24px; height: 24px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3a2d18, #120d08);
  border: 1px solid var(--gold);
  font: 700 11px/1 var(--serif); font-style: normal; color: #f3dca6;
}
.mmo-portrait.mini { width: 40px; height: 40px; box-shadow: none; }

.mmo-bar { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; align-items: center; }
.mmo-bar-label { font: 700 10px/1 var(--serif); color: rgba(243, 220, 166, .8); letter-spacing: .04em; }
.mmo-bar-track {
  position: relative; height: 15px; overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .8);
  background: linear-gradient(180deg, #07070b, #16151d);
  box-shadow: 0 0 0 1px rgba(216, 179, 106, .28), inset 0 2px 4px rgba(0, 0, 0, .8);
}
.mmo-bar-track i { position: absolute; inset: 0 auto 0 0; transition: width .5s cubic-bezier(.2, .8, .3, 1); }
.mmo-bar-track i::after { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .04)); }
.mmo-bar-track b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 10px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.mmo-bar.hp i { background: linear-gradient(180deg, #e0484c, #8b1d25 70%, #5a0f16); }
.mmo-bar.mp i { background: linear-gradient(180deg, #4a90e2, #1f4f9c 70%, #13306a); }
.mmo-bar.cp i { background: linear-gradient(180deg, #e8c15a, #a87a22 70%, #6e4d14); }
.mmo-bar.time i { background: linear-gradient(180deg, #a07ae0, #5b3a9c 70%, #3a2466); }
.mmo-bar.time.expired b { color: #ff8a8a; }

.mmo-statuses { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
.mmo-statuses.empty { min-height: 0; }
.mmo-status {
  position: relative;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid var(--gold-dim);
  background: linear-gradient(180deg, #2a2230, #120f18);
  box-shadow: inset 0 0 0 1px rgba(255, 222, 160, .1);
}
.mmo-status em { position: absolute; right: -3px; bottom: -4px; font: 700 8px/1 system-ui; font-style: normal; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.mmo-status.dead, .mmo-status.rage { border-color: #8b1d25; }
.mmo-status.shield, .mmo-status.resistance { border-color: #2f5d9c; }

.mmo-rewards { display: block; margin-top: -4px; }
.mmo-rewards[hidden] { display: none; }
.mmo-reward { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 6px 2px; border-top: 1px solid rgba(216, 179, 106, .12); }
.mmo-reward span { font-size: 16px; text-align: center; }
.mmo-reward strong { font: 600 13px/1.2 var(--serif); color: #f3dca6; }
.mmo-reward em { font-style: normal; font-size: 12px; color: #e9e2d2; }

.mmo-section-title { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 2px 8px; }
.mmo-section-title strong { font: 700 14px/1 var(--serif); color: #f3dca6; letter-spacing: .03em; }
.mmo-section-title small { font-size: 11px; color: rgba(243, 220, 166, .55); }
.mmo-link { border: 0; background: none; color: #d8b36a; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

.mmo-hotbar { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.mmo-skill {
  position: relative; overflow: hidden;
  display: grid; justify-items: center; gap: 2px;
  padding: 8px 4px 6px;
  border-radius: 10px;
  border: 1px solid var(--gold-dim);
  background: linear-gradient(180deg, #2a2233, #120f18);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .12), 0 6px 14px rgba(0, 0, 0, .4);
  color: #eee4cf;
  --cd: 0;
}
.mmo-skill::after {
  /* Cooldown sweep: darkens the remaining fraction of the slot. */
  content: "";
  position: absolute; inset: 0;
  background: conic-gradient(rgba(0, 0, 0, .7) calc(var(--cd) * 360deg), transparent 0);
  pointer-events: none;
}
.mmo-skill:not(:disabled):active { transform: translateY(1px) scale(.97); }
.mmo-skill:disabled { opacity: .55; }
.mmo-skill-icon {
  width: 36px; height: 36px; display: grid; place-items: center; font-size: 19px;
  border-radius: 8px; border: 1px solid var(--gold); background: radial-gradient(circle at 40% 30%, #3a2e45, #151019);
}
.mmo-skill.damage .mmo-skill-icon { box-shadow: 0 0 10px rgba(255, 110, 80, .35); }
.mmo-skill.heal .mmo-skill-icon { box-shadow: 0 0 10px rgba(110, 255, 160, .35); }
.mmo-skill.shield .mmo-skill-icon { box-shadow: 0 0 10px rgba(120, 180, 255, .35); }
.mmo-skill strong { font: 600 10px/1.15 var(--serif); text-align: center; color: #f3dca6; }
.mmo-skill small { font-size: 11px; color: rgba(238, 228, 207, .7); }
.mmo-skill-cooldown { position: absolute; z-index: 1; top: 18px; font: 800 13px/1 system-ui; color: #fff; text-shadow: 0 0 4px #000, 0 0 4px #000; }

.mmo-party-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.mmo-party-member { flex: 0 0 auto; width: 62px; display: grid; justify-items: center; gap: 2px; }
.mmo-party-member small { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #eee4cf; }
.mmo-party-member em { font-style: normal; font-size: 11px; color: var(--gold); }
.mmo-party-member.you small { color: #f3dca6; font-weight: 700; }
.mmo-ring {
  display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 50%;
  /* HP ring around the portrait, outlined in the member's class colour. */
  background: conic-gradient(#d9404a calc(var(--hp) * 3.6deg), rgba(255, 255, 255, .08) 0), #0d0b12;
  box-shadow: 0 0 0 1px var(--class), 0 0 10px var(--class);
}

.mmo-meter { display: grid; gap: 4px; }
.mmo-meter-row {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(216, 179, 106, .16);
  background: #0f0c15;
}
.mmo-meter-row::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fill);
  background: var(--class);
  opacity: .38;
}
.mmo-meter-row > * { position: relative; }
.mmo-meter-row .rank { font: 700 11px/1 var(--serif); color: var(--gold); }
.mmo-meter-row strong { font-size: 12px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmo-meter-row em { font-style: normal; font-size: 11px; color: #eee4cf; }
.mmo-meter-row.you { border-color: var(--gold); }

/* The boss's own attacks and the live cast feed. */
.mmo-frame.boss-attacks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; }
.boss-attack-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.boss-attack { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 7px; align-items: center; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(224, 72, 76, .35); background: rgba(60, 14, 18, .35); }
.boss-attack.all { border-color: rgba(224, 140, 60, .4); background: rgba(70, 36, 10, .35); }
.boss-attack i { grid-row: 1 / 3; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, .45); font-style: normal; font-size: 16px; line-height: 1; }
.boss-attack b { font: 700 12px/1.2 var(--serif, Georgia, serif); color: #ffd9c9; overflow-wrap: anywhere; }
.boss-attack small { font-size: 11px; color: rgba(255, 220, 200, .6); }
.boss-attack-feed { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.boss-attack-feed li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .03); opacity: .7; }
.boss-attack-feed li.latest { opacity: 1; background: rgba(224, 72, 76, .12); animation: boss-cast-in .35s ease both; }
.boss-attack-feed li.hit-you { box-shadow: inset 3px 0 0 #e0484c; }
.boss-attack-feed i { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 15px; line-height: 1; }
.boss-attack-feed strong { display: block; font: 700 12px/1.2 var(--serif, Georgia, serif); color: #f3dca6; }
.boss-attack-feed small { display: block; font-size: 11px; color: rgba(238, 228, 207, .7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boss-stage-number.incoming { left: 26%; top: 60%; color: #ff6b6b; text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 18px rgba(255, 60, 60, .8); }
@keyframes boss-cast-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Boss level progress inside the target frame. */
.boss-summons { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; margin-top: 4px; }
.boss-summons small { font: 700 10px/1 var(--serif, Georgia, serif); color: rgba(243, 220, 166, .75); white-space: nowrap; }
.boss-summons i { position: relative; height: 10px; border-radius: 3px; background: rgba(0, 0, 0, .55); box-shadow: 0 0 0 1px rgba(216, 179, 106, .25); overflow: hidden; }
.boss-summons i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: linear-gradient(90deg, #a87a22, #e8c15a); }
.boss-summons b { grid-column: 2; font: 600 9.5px/1 system-ui, sans-serif; color: rgba(238, 228, 207, .7); text-align: right; }

/* Quick-use potions in the fight: every kind shown, empty ones dimmed. */
.boss-potions { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 2px 0 4px; }
.boss-potion { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 60px; padding: 8px 2px 5px; border-radius: 8px; border: 1px solid rgba(216, 179, 106, .3); background: linear-gradient(180deg, rgba(30, 24, 34, .95), rgba(12, 10, 16, .95)); color: #eee4cf; }
.boss-potion .inv-flask { width: 22px; height: 30px; }
.boss-potion em { position: absolute; top: 3px; right: 3px; min-width: 16px; padding: 1px 4px; border-radius: 999px; background: rgba(0, 0, 0, .7); font: 700 10px/1.3 system-ui, sans-serif; font-style: normal; color: #fff; text-align: center; }
.boss-potion small { font: 600 9px/1 system-ui, sans-serif; color: rgba(243, 220, 166, .8); white-space: nowrap; }
.boss-potion.empty { border-color: rgba(255, 255, 255, .08); background: rgba(10, 8, 14, .8); }
.boss-potion.empty .inv-flask { filter: grayscale(.85) brightness(.45); }
.boss-potion.empty em { color: rgba(255, 255, 255, .5); }
.boss-potion.empty small { color: rgba(238, 228, 207, .35); }
.boss-potion:disabled { cursor: default; }
.boss-potion:not(.empty):disabled { opacity: .5; }
.boss-potion:not(:disabled):active { transform: translateY(1px); }

/* Shop (shop.js), prototype style: gold segmented tabs and item rows with an
   emblem tile, name/description and a price button (tap twice to buy). */
.overlay-panel.shop-panel {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  max-height: min(92vh, 900px);
  padding-top: 12px;
  border: 1px solid var(--gold-dim);
  background: radial-gradient(ellipse 90% 40% at 50% 0%, rgba(80, 60, 110, .25), transparent 70%), linear-gradient(180deg, rgba(20, 16, 26, .98), rgba(9, 8, 13, .99));
  color: #eee4cf;
}
.shop-head { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; margin-bottom: 12px; }
.shop-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.shop-back {
  position: static; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--gold-dim);
  background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif);
}
.shop-wallet {
  padding: 6px 10px;
  border-radius: 6px; border: 1px solid var(--gold-dim);
  background: rgba(6, 5, 9, .7);
  font: 700 13px/1 system-ui, sans-serif; color: #fff;
  transition: transform .2s ease;
}

.shop-categories {
  display: flex; gap: 0; overflow-x: auto; padding: 0; margin-bottom: 12px;
  border-radius: 6px; border: 1px solid var(--gold-dim);
  background: rgba(6, 5, 9, .7);
  scrollbar-width: none;
}
.shop-categories::-webkit-scrollbar { display: none; }
.shop-categories button {
  flex: 1 0 auto; padding: 9px 12px;
  border: 0; border-right: 1px solid rgba(107, 83, 38, .45);
  background: transparent;
  color: rgba(238, 228, 207, .7); font: 600 12px/1 var(--serif); white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.shop-categories button:last-child { border-right: 0; }
.shop-categories button.active {
  color: #fbeccb;
  background: linear-gradient(180deg, #6a4f1f, #3a2a10);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), inset 0 0 0 1px var(--gold);
}

.shop-list { display: grid; gap: 8px; }
.shop-item {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 10px 8px 8px;
  border-radius: 8px;
  border: 1px solid rgba(216, 179, 106, .18);
  background: linear-gradient(180deg, rgba(28, 22, 34, .92), rgba(13, 11, 18, .94));
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .06), 0 6px 14px rgba(0, 0, 0, .35);
  animation: shop-row-in .4s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.shop-item.cooldown { opacity: .6; }
.shop-item.armed { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(216, 179, 106, .3); }
.shop-item.bought { animation: shop-bought .8s cubic-bezier(.2, .8, .3, 1); }

.shop-icon {
  position: relative; overflow: hidden;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 6px;
  border: 1px solid var(--gold-dim);
  background: radial-gradient(circle at 50% 40%, #2c2436, #0e0c12);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .7);
  font-size: 26px;
}
.shop-icon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 240, 200, .2) 50%, transparent 60%) no-repeat; background-size: 250% 100%; animation: shop-gleam 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .3s); }
.shop-icon.art { background: var(--art) center / cover no-repeat; }
.shop-icon.hp { text-shadow: 0 0 12px rgba(255, 80, 80, .8); filter: hue-rotate(290deg) saturate(1.6); }
.shop-icon.mp { text-shadow: 0 0 12px rgba(90, 150, 255, .8); filter: hue-rotate(20deg) saturate(1.4); }
.shop-icon.boss { text-shadow: 0 0 12px rgba(255, 120, 80, .7); }
.shop-icon.sword { text-shadow: 0 0 12px rgba(200, 200, 255, .6); }
.shop-icon.misc, .shop-icon.builds { text-shadow: 0 0 12px rgba(255, 200, 100, .6); }

.shop-item-copy { min-width: 0; }
.shop-item h3 { margin: 0 0 3px; font: 600 13px/1.2 var(--serif); color: #f3dca6; }
.shop-item p { margin: 0; font-size: 11px; line-height: 1.35; color: rgba(238, 228, 207, .65); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.shop-item.armed p { color: #f0c96a; }

.shop-price {
  min-width: 78px; min-height: 36px; padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #5a86c8;
  background: linear-gradient(180deg, #274a7e, #132743);
  box-shadow: inset 0 1px 0 rgba(200, 225, 255, .25), 0 4px 10px rgba(0, 0, 0, .4);
  color: #eef4ff; font: 700 12px/1 system-ui, sans-serif; white-space: nowrap;
}
.shop-price.confirming { border-color: var(--gold); background: linear-gradient(180deg, #6a4f1f, #3a2a10); color: #fbeccb; animation: shop-armed 1s ease-in-out infinite; }
.shop-price:disabled { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: #8f8a96; box-shadow: none; }
.shop-price:not(:disabled):active { transform: translateY(1px); }
.shop-item.poor .shop-price { color: #ff9a90; }

.shop-feedback { min-height: 18px; margin: 12px 2px 0; color: rgba(238, 228, 207, .75); font-size: 12px; text-align: center; }
.shop-empty { padding: 22px 12px; border: 1px dashed rgba(216, 179, 106, .2); border-radius: 8px; color: rgba(238, 228, 207, .6); text-align: center; font-size: 12px; }
.shop-overlay.busy .shop-price, .shop-overlay.busy .shop-categories button { pointer-events: none; opacity: .55; }
@media (min-width: 700px) { .shop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@keyframes shop-row-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes shop-gleam { 0%, 70% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@keyframes shop-armed { 0%, 100% { box-shadow: 0 0 0 rgba(216, 179, 106, 0); } 50% { box-shadow: 0 0 14px rgba(216, 179, 106, .55); } }
@keyframes shop-bought { 0% { transform: scale(1); } 30% { transform: scale(1.03); border-color: #7fc97a; box-shadow: 0 0 22px rgba(127, 201, 122, .5); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .shop-item, .shop-icon::after, .shop-price.confirming { animation: none !important; } }

/* Daily sword (sword.js), forge style: blade over an anvil beside a ruler;
   a roll swings the hammer, throws sparks and resizes the blade. */
.overlay-panel.sword-panel {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  display: grid; gap: 10px;
  max-height: min(94vh, 900px);
  padding-top: 12px;
  color: #eee4cf;
}
.sword-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.sword-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.sword-round { position: static; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif); }

.sword-forge {
  position: relative; overflow: hidden;
  height: 300px;
  border-radius: 8px; border: 1px solid var(--gold-dim);
  background:
    radial-gradient(ellipse 60% 35% at 50% 88%, rgba(255, 120, 40, .45), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(90, 60, 40, .25), transparent 70%),
    linear-gradient(180deg, transparent 78%, #140e0a 78%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 36px),
    linear-gradient(180deg, #2a2226, #171215);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .8);
}
.sword-forge::before {
  /* Forge glow breathing from below. */
  content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 30%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 140, 50, .55), transparent 70%);
  animation: sword-embers 2.4s ease-in-out infinite alternate;
}
.sword-ruler { position: absolute; left: 10px; top: 14px; bottom: 26%; width: 34px; display: flex; flex-direction: column; justify-content: space-between; border-right: 2px solid rgba(216, 179, 106, .6); }
.sword-ruler span { position: relative; height: 0; font: 700 9px/1 system-ui, sans-serif; color: rgba(243, 220, 166, .75); }
.sword-ruler span::after { content: ""; position: absolute; right: -2px; top: 0; width: 8px; height: 1px; background: rgba(216, 179, 106, .7); }
.sword-ruler span.major::after { width: 14px; }
.sword-ruler span.major { transform: translateY(-5px); }

.sword-blade { position: absolute; left: 50%; bottom: 24%; width: 130px; height: 210px; margin-left: -65px; display: grid; place-items: end center; transform-origin: 50% 100%; }
.sword-blade .loot-art { width: 100%; height: 100%; }
.sword-forge.grow .sword-blade { animation: sword-grow .7s cubic-bezier(.2, 1.4, .4, 1); }
.sword-forge.shrink .sword-blade { animation: sword-shrink .7s cubic-bezier(.2, 1.4, .4, 1); }
.sword-forge.forging .sword-blade { animation: sword-heat 1.1s ease-in-out; }

.sword-anvil {
  position: absolute; left: 50%; bottom: 10%; width: 150px; height: 44px; margin-left: -75px;
  background: linear-gradient(180deg, #5a5560, #2a262e 60%, #1a171d);
  clip-path: polygon(0 0, 100% 0, 88% 40%, 70% 45%, 66% 100%, 34% 100%, 30% 45%, 12% 40%);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .7));
}
.sword-hammer {
  position: absolute; right: 12%; top: 16%; width: 54px; height: 90px;
  transform-origin: 90% 95%; rotate: 35deg; opacity: 0;
  background: linear-gradient(180deg, #6a6470 0 30%, transparent 30%) 0 0 / 100% 100% no-repeat, linear-gradient(90deg, transparent 42%, #7a5a34 42% 58%, transparent 58%);
  border-radius: 4px;
}
.sword-forge.forging .sword-hammer { animation: sword-hammer 1.1s ease-in-out; }
.sword-sparks { position: absolute; left: 50%; bottom: 26%; }
.sword-sparks i { position: absolute; width: 3px; height: 10px; border-radius: 2px; background: #ffd06a; box-shadow: 0 0 6px #ff9a3a; opacity: 0; transform: rotate(var(--a)) translateY(0); }
.sword-forge.forging .sword-sparks i { animation: sword-spark .5s ease-out forwards; animation-delay: calc(.3s + var(--d)); }
.sword-forge.forging .sword-sparks i:nth-child(odd) { animation-name: sword-spark, sword-spark; animation-delay: calc(.3s + var(--d)), calc(.75s + var(--d)); }

.sword-length { position: absolute; right: 12px; bottom: 12px; display: grid; justify-items: end; gap: 2px; text-align: right; }
.sword-length small { font: 700 10px/1 var(--serif); letter-spacing: .12em; color: rgba(243, 220, 166, .7); text-transform: uppercase; }
.sword-length strong { font: 700 30px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000, 0 0 14px rgba(255, 170, 70, .35); }
.sword-length em { font-size: 13px; font-style: normal; color: rgba(243, 220, 166, .7); }
.sword-delta { position: absolute; left: 50%; top: 30%; z-index: 3; translate: -50% 0; font: 800 28px/1 var(--serif); text-shadow: 0 2px 0 #000; animation: sword-float 1.8s ease-out forwards; pointer-events: none; }
.sword-delta.up { color: #9fe39a; text-shadow: 0 0 16px rgba(127, 224, 126, .7), 0 2px 0 #000; }
.sword-delta.down { color: #ff8a80; text-shadow: 0 0 16px rgba(224, 80, 80, .7), 0 2px 0 #000; }
.sword-delta.flat { color: #eee4cf; }

.sword-modifier { margin: 0; text-align: center; font: 400 12px/1.4 var(--serif); color: rgba(238, 228, 207, .75); }
.sword-roll {
  display: grid; justify-items: center; gap: 4px;
  width: 100%; min-height: 54px; padding: 8px 14px;
  border-radius: 6px; border: 1px solid var(--gold);
  background: linear-gradient(180deg, #7a4a1a, #3a200a);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .35), 0 6px 16px rgba(0, 0, 0, .5), 0 0 18px rgba(255, 140, 50, .25);
  color: #fbeccb;
}
.sword-roll strong { font: 700 18px/1 var(--serif); }
.sword-roll small { font: 600 12px/1 system-ui, sans-serif; color: rgba(251, 236, 203, .8); }
.sword-roll:disabled { opacity: .6; filter: grayscale(.4); }
.sword-feedback { min-height: 16px; text-align: center; font-size: 12px; color: rgba(238, 228, 207, .75); }
.sword-overlay.busy .sword-roll { pointer-events: none; }

.sword-ranking { display: grid; gap: 6px; padding: 10px; border-radius: 8px; border: 1px solid rgba(216, 179, 106, .2); background: rgba(8, 7, 12, .7); }
.sword-ranking-head { display: flex; justify-content: space-between; align-items: baseline; }
.sword-ranking-head strong { font: 700 14px/1 var(--serif); color: #f3dca6; }
.sword-ranking-head span { font-size: 12px; color: rgba(238, 228, 207, .6); }
.sword-ranking-list { display: grid; gap: 4px; }
.sword-ranking-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 6px; border: 1px solid rgba(216, 179, 106, .14); background: #0f0c15; }
.sword-ranking-row.current { border-color: var(--gold); background: rgba(106, 79, 31, .25); }
.sword-ranking-rank { font: 700 13px/1 var(--serif); color: var(--gold); text-align: center; }
.sword-ranking-name { font-size: 13px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sword-ranking-row strong { font-size: 13px; color: #eee4cf; }
.sword-ranking-row small { font-size: 11px; color: rgba(238, 228, 207, .6); }
.sword-ranking-empty { padding: 10px; text-align: center; font-size: 12px; color: rgba(238, 228, 207, .6); }

@keyframes sword-embers { from { opacity: .6; } to { opacity: 1; } }
@keyframes sword-hammer {
  0% { opacity: 0; rotate: 35deg; }
  15% { opacity: 1; rotate: 50deg; }
  30% { rotate: -25deg; }
  45% { rotate: 45deg; }
  70% { rotate: -25deg; }
  100% { opacity: 0; rotate: 35deg; }
}
@keyframes sword-heat { 0%, 100% { filter: none; } 30%, 70% { filter: drop-shadow(0 0 16px rgba(255, 120, 40, .9)) sepia(.6) saturate(2) hue-rotate(-20deg); } 32%, 72% { transform: translateY(2px); } }
@keyframes sword-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-80px); } }
@keyframes sword-grow { 0% { transform: scaleY(.85); } 60% { transform: scaleY(1.08); } 100% { transform: none; } }
@keyframes sword-shrink { 0% { transform: scaleY(1.15); } 60% { transform: scaleY(.94); } 100% { transform: none; } }
@keyframes sword-float { 0% { opacity: 0; transform: translateY(10px) scale(.7); } 20% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-50px); } }
@media (prefers-reduced-motion: reduce) { .sword-forge::before, .sword-forge *, .sword-delta { animation: none !important; } }

/* Arcade (arcade.js + arcade-stage.js), prototype "Баскетбол" style: a painted
   hall stage beside stat panels, a bet stepper and one big gold button. */
.overlay-panel.arcade-panel {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  display: grid; gap: 10px;
  padding-top: 12px;
  border: 1px solid var(--gold-dim);
  background: radial-gradient(ellipse 90% 40% at 50% 0%, rgba(70, 60, 100, .25), transparent 70%), linear-gradient(180deg, rgba(20, 16, 26, .98), rgba(9, 8, 13, .99));
  color: #eee4cf;
}
.arcade-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.arcade-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.arcade-round {
  position: static; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--gold-dim);
  background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif);
}

.arcade-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-radius: 6px; border: 1px solid var(--gold-dim); background: rgba(6, 5, 9, .7); overflow: hidden; }
.arcade-tab { position: relative; min-height: 40px; padding: 0; border: 0; border-right: 1px solid rgba(107, 83, 38, .45); background: transparent; font-size: 20px; filter: grayscale(.7); opacity: .75; transition: filter .2s ease, opacity .2s ease; }
.arcade-tab:last-child { border-right: 0; }
.arcade-tab.active { filter: none; opacity: 1; background: linear-gradient(180deg, #6a4f1f, #3a2a10); box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), inset 0 0 0 1px var(--gold); }
.arcade-tab.active span { display: inline-block; animation: arcade-tab-pop .4s cubic-bezier(.2, 1.4, .4, 1); }
.arcade-tab i { position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #7fe07e; box-shadow: 0 0 6px #7fe07e; }
.arcade-rules { margin: 0; text-align: center; font: 400 12px/1.4 var(--serif); color: rgba(238, 228, 207, .75); }

.arcade-arena { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; }
.arcade-stats { display: grid; gap: 8px; align-content: stretch; }
.arcade-stat {
  display: grid; place-content: center; justify-items: center; gap: 6px;
  padding: 8px 4px;
  border-radius: 6px; border: 1px solid var(--gold-dim);
  background: rgba(6, 5, 9, .75);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .06);
}
.arcade-stat small { font: 400 11px/1 var(--serif); color: rgba(238, 228, 207, .7); }
.arcade-stat strong { font: 700 20px/1 system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.arcade-stat.good strong { color: #9fe39a; }
.arcade-stat.bad strong { color: #ff8a80; }

.arcade-verdict { display: grid; justify-items: center; gap: 2px; animation: arcade-verdict .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.arcade-verdict strong { font: 700 24px/1 var(--serif); }
.arcade-verdict.win strong { color: #f3dca6; text-shadow: 0 0 18px rgba(232, 193, 90, .7); }
.arcade-verdict.lose strong { color: #ff9a90; }
.arcade-verdict small { font-size: 13px; color: #fff; }

.arcade-bet { display: grid; gap: 8px; }
.arcade-stepper { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; }
.arcade-stepper button, .arcade-chips button {
  min-height: 38px; padding: 0;
  border-radius: 6px; border: 1px solid var(--gold-dim);
  background: linear-gradient(180deg, #2a2233, #120f18);
  color: #f3dca6; font: 700 18px/1 var(--serif);
}
.arcade-stepper input { min-width: 0; min-height: 38px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--gold-dim); background: rgba(6, 5, 9, .8); color: #fff; font: 700 18px/1 system-ui, sans-serif; text-align: center; }
.arcade-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.arcade-chips button { font: 600 13px/1 system-ui, sans-serif; color: #eee4cf; }
.arcade-chips button:disabled { opacity: .4; }
.arcade-note { text-align: center; font-size: 11px; color: rgba(238, 228, 207, .6); }

.arcade-btn {
  width: 100%; min-height: 48px; padding: 8px 14px;
  border-radius: 6px; border: 1px solid var(--gold);
  background: linear-gradient(180deg, #6a4f1f, #3a2a10);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), 0 6px 14px rgba(0, 0, 0, .5), 0 0 16px rgba(216, 179, 106, .18);
  color: #fbeccb; font: 700 17px/1 var(--serif);
}
.arcade-btn.ghost { background: transparent; border-color: var(--gold-dim); color: rgba(243, 220, 166, .85); box-shadow: none; }
.arcade-btn.small { min-height: 36px; font-size: 13px; }
.arcade-btn:not(:disabled):active { transform: translateY(1px); }
.arcade-overlay.busy .arcade-btn, .arcade-overlay.busy .arcade-tab { pointer-events: none; }
.arcade-overlay.rolling .arcade-btn { opacity: .6; }
.arcade-feedback { min-height: 16px; text-align: center; font-size: 12px; color: rgba(238, 228, 207, .75); }

/* ------------------------------------------------------------------ */
/* Stage                                                              */
/* ------------------------------------------------------------------ */
.arcade-stage {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 1 / 1.05;
  border-radius: 8px; border: 1px solid var(--gold-dim);
  /* A torch-lit stone hall drawn in CSS: brick courses, stone floor. */
  background:
    radial-gradient(ellipse 60% 40% at 50% 36%, rgba(255, 190, 110, .12), transparent 70%),
    linear-gradient(180deg, transparent 74%, rgba(0, 0, 0, .55) 74%, #17130f 76%, #0d0a08),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 36px),
    linear-gradient(180deg, #2a2530, #1c1820 60%, #141117);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .85);
}
.arcade-stage::before {
  /* Two moonlit arched windows. */
  content: ""; position: absolute; z-index: -1; top: 6%; left: 8%; right: 8%; height: 42%;
  background:
    radial-gradient(ellipse 50% 22% at 50% 22%, rgba(140, 170, 230, .5) 0 98%, transparent 100%) 0 0 / 22% 100% no-repeat,
    linear-gradient(rgba(140, 170, 230, .5), rgba(60, 80, 130, .35)) 0 22% / 22% 78% no-repeat,
    radial-gradient(ellipse 50% 22% at 50% 22%, rgba(140, 170, 230, .5) 0 98%, transparent 100%) 100% 0 / 22% 100% no-repeat,
    linear-gradient(rgba(140, 170, 230, .5), rgba(60, 80, 130, .35)) 100% 22% / 22% 78% no-repeat;
  filter: blur(.4px);
  opacity: .55;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 42%, transparent 42% 46%);
  mask-image: repeating-linear-gradient(90deg, #000 0 42%, transparent 42% 46%);
}
.arcade-stage::after {
  /* Wall torches: flickering warm pools of light at both sides. */
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    radial-gradient(circle at 4% 52%, rgba(255, 170, 70, .55), rgba(255, 120, 40, .15) 12%, transparent 26%),
    radial-gradient(circle at 96% 52%, rgba(255, 170, 70, .55), rgba(255, 120, 40, .15) 12%, transparent 26%);
  animation: as-torch 2.6s ease-in-out infinite alternate;
}
.as-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.as-flash.win.on { background: radial-gradient(circle at 50% 40%, rgba(255, 220, 140, .55), transparent 60%); animation: as-flash .9s ease-out; }

/* Projectile: x on the wrapper, y/scale/spin on the ball (individual transform props). */
.as-shot { position: absolute; left: 50%; bottom: 7%; width: 40px; height: 40px; margin-left: -20px; z-index: 3; }
.as-shot > * { position: relative; top: 0; left: 0; display: block; }
.as-shot.fly { animation: as-x var(--dur) linear forwards; }
.as-shot.fly > * { animation: as-y var(--dur) forwards, as-scale var(--dur) ease-in forwards; }
.as-shot.fly > .spin { animation: as-y var(--dur) forwards, as-scale var(--dur) ease-in forwards, as-spin .45s linear infinite; }
.as-shot.after-hit > * { animation: as-y var(--dur) forwards, as-scale var(--dur) ease-in forwards, as-spin .45s linear infinite, as-drop .5s ease-in forwards; }
.as-shot.after-rim > *, .as-shot.after-post > * { animation: as-y var(--dur) forwards, as-scale var(--dur) ease-in forwards, as-spin .45s linear infinite, as-bounce .55s ease-out forwards; }
.as-shot.after-miss > * { animation: as-y var(--dur) forwards, as-scale var(--dur) ease-in forwards, as-spin .45s linear infinite, as-fall .55s ease-in forwards; }

.as-ball { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset -6px -8px 12px rgba(0, 0, 0, .45), 0 6px 10px rgba(0, 0, 0, .5); }
.as-ball.basket {
  background:
    linear-gradient(90deg, transparent 47%, #3a1a08 47% 53%, transparent 53%),
    linear-gradient(0deg, transparent 47%, #3a1a08 47% 53%, transparent 53%),
    radial-gradient(circle at 35% 30%, #ffb070, #e0661c 55%, #8a3a0c);
}
.as-ball.soccer { background: radial-gradient(circle at 50% 50%, #111 0 16%, transparent 17%), radial-gradient(circle at 18% 30%, #111 0 10%, transparent 11%), radial-gradient(circle at 82% 30%, #111 0 10%, transparent 11%), radial-gradient(circle at 30% 85%, #111 0 10%, transparent 11%), radial-gradient(circle at 70% 85%, #111 0 10%, transparent 11%), radial-gradient(circle at 35% 30%, #fff, #d6d6d6 70%); }
.as-ball.bowling { width: 36px; height: 36px; background: radial-gradient(circle at 60% 30%, #1a1a1a 0 5%, transparent 6%), radial-gradient(circle at 45% 28%, #1a1a1a 0 5%, transparent 6%), radial-gradient(circle at 52% 42%, #1a1a1a 0 5%, transparent 6%), radial-gradient(circle at 35% 30%, #9a6ae0, #4a2a8a 60%, #1e103e); }

/* Basketball */
.as-board { position: absolute; left: 50%; top: 8%; width: 46%; height: 30%; translate: -50% 0; border: 3px solid rgba(240, 240, 240, .85); border-radius: 4px; background: rgba(220, 230, 255, .12); box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
.as-board-square { position: absolute; left: 34%; right: 34%; bottom: 10%; height: 34%; border: 2px solid rgba(240, 240, 240, .85); }
.as-hoop { position: absolute; left: 50%; top: 36%; width: 24%; translate: -50% 0; z-index: 4; }
.as-rim { display: block; height: 8px; border-radius: 50%; border: 3px solid #e8561c; box-shadow: 0 0 8px rgba(232, 86, 28, .5); }
.as-net { display: block; height: 30px; margin: -3px 8% 0; clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%); background: repeating-linear-gradient(60deg, rgba(255, 255, 255, .8) 0 1.5px, transparent 1.5px 7px), repeating-linear-gradient(-60deg, rgba(255, 255, 255, .8) 0 1.5px, transparent 1.5px 7px); transform-origin: 50% 0; }
.as-hoop.swish .as-net { animation: as-swish .6s ease-out .1s; }
.as-hoop.clank { animation: as-clank .35s ease-out; }

/* Football */
.as-goal { position: absolute; left: 50%; top: 10%; width: 74%; height: 40%; translate: -50% 0; border: 5px solid #eee; border-bottom: 0; border-radius: 3px 3px 0 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.as-goal-net { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .28) 0 1px, transparent 1px 9px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 1px, transparent 1px 9px); }
.as-goal.goal .as-goal-net { animation: as-net .6s ease-out; }
.as-keeper { position: absolute; left: 50%; bottom: 0; width: 18px; height: 42px; margin-left: -9px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #f0c090 0 26%, #d8b36a 26% 70%, #222 70%); transition: translate .45s cubic-bezier(.2, .8, .3, 1), rotate .45s ease; }
.as-goal.dive .as-keeper { translate: calc(var(--dive, 1) * 150%) -10%; rotate: calc(var(--dive, 1) * 70deg); }
.as-pitch { position: absolute; left: -10%; right: -10%; bottom: -30%; height: 60%; border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, #2f7a3a, #133a1a 70%); opacity: .85; }

/* Darts */
.as-dartboard {
  position: absolute; left: 50%; top: 8%; width: 62%; aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 7%, #1a7a3a 7% 13%, transparent 13%),
    repeating-conic-gradient(#111 0 9deg, #efe2c0 9deg 18deg),
    #111;
  box-shadow: 0 0 0 5px #2a1a10, 0 0 0 7px #6b5326, 0 10px 24px rgba(0, 0, 0, .6);
  -webkit-mask-image: radial-gradient(circle, #000 70%, transparent 71%);
  mask-image: radial-gradient(circle, #000 70%, transparent 71%);
}
.as-dartboard::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 0 40%, rgba(200, 30, 40, .85) 40% 45%, transparent 45% 64%, rgba(200, 30, 40, .85) 64% 69%, transparent 69%); }
.as-bull { position: absolute; left: 50%; top: 50%; width: 9%; height: 9%; translate: -50% -50%; border-radius: 50%; background: #c81e28; box-shadow: 0 0 0 3px #1a7a3a; }
.as-dartboard.thud { animation: as-thud .25s ease-out; }
.as-shot.dart { left: 80%; bottom: 4%; width: 10px; height: 44px; margin-left: -5px; }
.as-dart { width: 6px; height: 44px; margin: 0 auto; rotate: -24deg; background: linear-gradient(180deg, #ccc 0 30%, #d8b36a 30% 62%, transparent 62%), linear-gradient(90deg, transparent, transparent); border-radius: 2px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .6)); }
.as-dart::after { content: ""; position: absolute; left: -5px; right: -5px; bottom: 0; height: 16px; background: linear-gradient(180deg, #c81e28, #7a0f16); clip-path: polygon(50% 0, 100% 100%, 50% 75%, 0 100%); }
.as-shot.dart.stuck > * { animation: as-y var(--dur) forwards, as-scale var(--dur) ease-in forwards, as-wobble .4s ease-out; }

/* Bowling */
.as-lane { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%); background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 16px), linear-gradient(180deg, #5a3a1c, #b07a40); opacity: .9; }
.as-pins { position: absolute; left: 50%; top: 10%; width: 30%; height: 26%; translate: -50% 0; }
.as-pin { position: absolute; width: 11px; height: 30px; margin-left: -5.5px; border-radius: 45% 45% 30% 30% / 30% 30% 20% 20%; background: linear-gradient(180deg, #fff 0 30%, #c81e28 30% 38%, #fff 38%); box-shadow: 0 4px 5px rgba(0, 0, 0, .5); transform-origin: 50% 100%; }
.as-pin.p1 { left: 15%; top: 0; } .as-pin.p2 { left: 50%; top: 0; } .as-pin.p3 { left: 85%; top: 0; }
.as-pin.p4 { left: 32%; top: 30%; } .as-pin.p5 { left: 68%; top: 30%; } .as-pin.p6 { left: 50%; top: 60%; }
.as-pin.down { animation: as-pin-fall .55s cubic-bezier(.3, .6, .4, 1) forwards; }
.as-shot.bowl { bottom: 5%; }

/* Dice */
.as-die-wrap { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -46px 0 0 -34px; perspective: 500px; }
.as-die { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.as-die.tumble { animation: as-tumble 1s cubic-bezier(.2, .7, .3, 1) forwards; }
.die-face { position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 9px; border-radius: 12px; background: radial-gradient(circle at 35% 30%, #fffaf0, #e6dcc6); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12), inset 0 -4px 8px rgba(0, 0, 0, .15); backface-visibility: hidden; }
.die-face i { width: 11px; height: 11px; margin: auto; border-radius: 50%; }
.die-face i.on { background: radial-gradient(circle at 40% 35%, #555, #111); }
.die-face.f1 i.on { background: radial-gradient(circle at 40% 35%, #e04a4a, #8a1010); width: 15px; height: 15px; }
.die-face.f1 { transform: translateZ(34px); }
.die-face.f6 { transform: rotateY(180deg) translateZ(34px); }
.die-face.f2 { transform: rotateY(90deg) translateZ(34px); }
.die-face.f5 { transform: rotateY(-90deg) translateZ(34px); }
.die-face.f3 { transform: rotateX(90deg) translateZ(34px); }
.die-face.f4 { transform: rotateX(-90deg) translateZ(34px); }
.as-die-shadow { position: absolute; left: 50%; top: 66%; width: 70px; height: 14px; margin-left: -35px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .6), transparent 70%); }

/* Slots */
.as-machine { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; gap: 8px; padding: 10px; border-radius: 10px; border: 2px solid var(--gold); background: linear-gradient(180deg, #2a1f10, #120c05); box-shadow: 0 0 0 4px #1a1209, 0 0 24px rgba(216, 179, 106, .3), 0 12px 24px rgba(0, 0, 0, .6); }
.as-reel { width: clamp(40px, 15vw, 58px); height: 72px; overflow: hidden; border-radius: 6px; background: linear-gradient(180deg, #d8d0c0, #fffaf0 30% 70%, #d8d0c0); box-shadow: inset 0 6px 8px rgba(0, 0, 0, .35), inset 0 -6px 8px rgba(0, 0, 0, .35); }
.as-strip { display: grid; }
.as-strip span { height: 72px; display: grid; place-items: center; font-size: 36px; }
.as-strip.spin { animation: as-reel var(--dur) cubic-bezier(.15, .6, .3, 1.08) forwards; }
.as-slots-line { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: rgba(200, 30, 40, .7); box-shadow: 0 0 6px rgba(200, 30, 40, .8); }

@keyframes as-x { to { translate: var(--tx) 0; } }
@keyframes as-y {
  0% { translate: 0 0; animation-timing-function: cubic-bezier(.3, .7, .6, 1); }
  50% { translate: 0 var(--peak); animation-timing-function: cubic-bezier(.4, 0, .7, .3); }
  100% { translate: 0 var(--ty); }
}
@keyframes as-scale { to { scale: var(--scale, 1); } }
@keyframes as-spin { to { rotate: 360deg; } }
@keyframes as-drop { to { top: 42px; opacity: 0; } }
@keyframes as-bounce { 40% { top: -16px; left: 22px; } to { top: 60px; left: 60px; opacity: 0; } }
@keyframes as-fall { to { top: 140px; opacity: 0; } }
@keyframes as-swish { 0% { scale: 1 1; } 30% { scale: .85 1.25; } 60% { scale: 1.05 .95; } 100% { scale: 1 1; } }
@keyframes as-clank { 0%, 100% { rotate: 0deg; } 30% { rotate: 4deg; } 60% { rotate: -3deg; } }
@keyframes as-net { 0% { scale: 1; } 30% { scale: 1.06 .94; } 100% { scale: 1; } }
@keyframes as-thud { 0% { scale: 1; } 40% { scale: .97; } 100% { scale: 1; } }
@keyframes as-wobble { 0%, 100% { rotate: 0deg; } 25% { rotate: 6deg; } 60% { rotate: -4deg; } }
@keyframes as-pin-fall { to { rotate: var(--fall); translate: 0 -6px; opacity: .15; } }
@keyframes as-tumble {
  0% { transform: translateY(-110px) rotateX(0) rotateY(0); }
  55% { transform: translateY(0) rotateX(calc(var(--rx) * .8)) rotateY(calc(var(--ry) * .8)); }
  72% { transform: translateY(-18px) rotateX(calc(var(--rx) * .95)) rotateY(calc(var(--ry) * .95)); }
  100% { transform: translateY(0) rotateX(var(--rx)) rotateY(var(--ry)); }
}
@keyframes as-reel { to { transform: translateY(calc(var(--stop) * -72px)); } }
@keyframes as-torch { 0% { opacity: .75; } 35% { opacity: 1; } 60% { opacity: .82; } 100% { opacity: .95; } }
@keyframes as-flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arcade-tab-pop { from { transform: scale(.6); } to { transform: none; } }
@keyframes arcade-verdict { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

@media (max-width: 360px) { .arcade-arena { grid-template-columns: minmax(0, 1fr) 72px; } .arcade-stat strong { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .arcade-tab.active span, .arcade-verdict, .arcade-stage::after { animation: none !important; } }

/* Gold transfer (gold-transfer.js): a courier strip (you -> pouch -> them),
   recipients with class portraits, and a gold amount form. */
.overlay-panel.gold-transfer-panel {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  display: grid; gap: 10px;
  padding-top: 12px;
  color: #eee4cf;
}
.gt-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.gt-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.gt-round { position: static; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif); }
.gold-transfer-panel [data-transfer-content] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.gold-courier { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 10px; border: 1px solid var(--gold-dim); background: radial-gradient(ellipse 50% 70% at 50% 50%, rgba(216, 179, 106, .12), transparent 70%), linear-gradient(180deg, #1a1520, #0c0a10); }
.gt-end { display: grid; justify-items: center; gap: 3px; min-width: 0; text-align: center; }
.gt-end small { font: 700 10px/1 var(--serif); letter-spacing: .08em; text-transform: uppercase; color: rgba(243, 220, 166, .6); }
.gt-end strong { max-width: 100%; font: 700 14px/1.2 system-ui, sans-serif; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-coins { font-size: 38px; filter: drop-shadow(0 0 10px rgba(255, 200, 80, .5)); }
.gt-road { position: relative; height: 40px; }
.gt-road i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, rgba(216, 179, 106, .6) 0 6px, transparent 6px 12px); animation: gt-road 1s linear infinite; }
.gt-pouch { position: absolute; left: 0; top: 50%; font-size: 26px; transform: translateY(-50%); opacity: 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); }
.sending .gt-pouch { animation: gt-fly .9s cubic-bezier(.4, 0, .3, 1) forwards; }
.sending .gt-end.to .gold-avatar { animation: gt-receive .5s ease-out .8s; }

.gold-avatar { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: end center; overflow: hidden; border-radius: 50%; background: var(--art) center 18% / cover no-repeat, #1a1420; box-shadow: 0 0 0 2px #120e16, 0 0 0 3px var(--gold-dim); color: transparent; font-size: 0; }
.gold-avatar.big { width: 56px; height: 56px; box-shadow: 0 0 0 2px #120e16, 0 0 0 3px var(--gold); }

.gold-success { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px; border-radius: 8px; border: 1px solid var(--gold); background: radial-gradient(ellipse, rgba(216, 179, 106, .22), rgba(12, 10, 16, .9)); animation: gt-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.gold-success > span { font-size: 20px; color: #f3dca6; }
.gold-success strong { display: block; font: 700 15px/1.2 var(--serif); color: #f3dca6; }
.gold-success small { font-size: 11px; color: rgba(238, 228, 207, .7); }

.gold-transfer-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.gold-transfer-columns > section { display: grid; gap: 6px; min-width: 0; }
.gold-section-title { display: flex; justify-content: space-between; align-items: baseline; }
.gold-section-title span { font: 700 15px/1 var(--serif); color: #f3dca6; }
.gold-section-title small { font-size: 12px; color: rgba(238, 228, 207, .6); }
.gold-recipient-list { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.gold-recipient { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(216, 179, 106, .16); background: linear-gradient(180deg, rgba(26, 21, 30, .92), rgba(12, 10, 16, .92)); color: inherit; text-align: left; }
.gold-recipient.active { border-color: var(--gold); box-shadow: 0 0 12px rgba(216, 179, 106, .3); }
.gold-recipient-copy { display: grid; gap: 2px; min-width: 0; }
.gold-recipient-copy strong { font: 600 14px/1.2 var(--serif); color: #f3dca6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gold-recipient-copy small { font-size: 11px; color: rgba(238, 228, 207, .6); }
.gold-recipient > i { font-style: normal; color: var(--gold); }
.gold-empty { display: grid; justify-items: center; gap: 6px; padding: 18px; border-radius: 8px; border: 1px dashed rgba(216, 179, 106, .25); text-align: center; }
.gold-empty span { font-size: 28px; }
.gold-empty strong { font: 700 15px/1 var(--serif); color: #f3dca6; }
.gold-empty p { margin: 0; font-size: 12px; color: rgba(238, 228, 207, .65); }

.gold-transfer-form { display: grid; gap: 8px; padding: 10px; border-radius: 8px; border: 1px solid rgba(216, 179, 106, .25); background: rgba(8, 7, 12, .8); }
.gold-balance-row, .gold-to-row { display: none; }
.gold-amount-field { display: grid; gap: 4px; font-size: 12px; color: rgba(238, 228, 207, .7); }
.gold-amount-field > div { display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--gold-dim); background: rgba(6, 5, 9, .8); }
.gold-amount-field input { min-width: 0; width: 100%; min-height: 40px; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #fff; font: 700 18px/1 system-ui, sans-serif; text-align: center; }
.gold-quick-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.gold-quick-row button { min-height: 34px; border-radius: 6px; border: 1px solid var(--gold-dim); background: linear-gradient(180deg, #2a2233, #120f18); color: #eee4cf; font: 600 12px/1 system-ui, sans-serif; }
.gold-send-button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 6px; border: 1px solid var(--gold); background: linear-gradient(180deg, #6a4f1f, #3a2a10); box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), 0 6px 14px rgba(0, 0, 0, .5); color: #fbeccb; }
.gold-send-button > span { font-size: 20px; }
.gold-send-button strong { display: block; font: 700 16px/1.1 var(--serif); text-align: left; }
.gold-send-button small { display: block; font-size: 11px; color: rgba(251, 236, 203, .75); text-align: left; }
.gold-send-button:disabled { opacity: .5; }
.gold-transfer-feedback { min-height: 16px; text-align: center; font-size: 12px; color: rgba(238, 228, 207, .75); }
.gold-transfer-overlay.busy button { pointer-events: none; }

@keyframes gt-road { to { background-position: 12px 0; } }
@keyframes gt-fly { 0% { opacity: 0; left: 0; transform: translateY(-50%) scale(.6); } 15% { opacity: 1; } 50% { transform: translateY(-110%) scale(1.1); } 85% { opacity: 1; } 100% { opacity: 0; left: calc(100% - 26px); transform: translateY(-50%) scale(.6); } }
@keyframes gt-receive { 0% { transform: scale(1); } 40% { transform: scale(1.15); box-shadow: 0 0 0 2px #120e16, 0 0 0 3px var(--gold), 0 0 20px rgba(255, 200, 80, .8); } 100% { transform: none; } }
@keyframes gt-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@media (min-width: 680px) { .gold-transfer-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .gt-road i, .gt-pouch, .gold-success, .gold-avatar { animation: none !important; } }

/* 21 (point21.js), prototype style: a green felt table with real playing
   cards dealt from the deck, a bet stepper and blue/red action buttons. */
.overlay-panel.point21-panel {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  display: grid; gap: 12px;
  padding-top: 12px;
  border: 1px solid var(--gold-dim);
  background: radial-gradient(ellipse 90% 40% at 50% 0%, rgba(70, 60, 100, .25), transparent 70%), linear-gradient(180deg, rgba(20, 16, 26, .98), rgba(9, 8, 13, .99));
  color: #eee4cf;
}
.point-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.point-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.point-round {
  position: static; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--gold-dim);
  background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif);
}
.point-rules { margin: -4px 0 0; text-align: center; font: 400 12px/1.4 var(--serif); color: rgba(238, 228, 207, .75); }
.point-rules.open { color: #f3dca6; }

.point-timer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  border-radius: 6px; border: 1px solid var(--gold-dim);
  background: rgba(6, 5, 9, .7);
}
.point-timer small { font: 400 12px/1 var(--serif); color: rgba(238, 228, 207, .75); }
.point-timer strong { font: 700 18px/1 system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }

.point-felt {
  position: relative; overflow: hidden;
  display: grid; gap: 12px;
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px solid var(--gold-dim);
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(60, 130, 90, .5), transparent 75%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #16382a, #0b2118);
  box-shadow: inset 0 0 0 4px rgba(8, 20, 14, .8), inset 0 0 0 5px rgba(216, 179, 106, .35), inset 0 0 40px rgba(0, 0, 0, .7), 0 10px 26px rgba(0, 0, 0, .5);
}
.point-felt.idle { justify-items: center; text-align: center; padding: 26px 16px; }
.point-felt.idle strong { font: 700 18px/1 var(--serif); color: #f3dca6; }
.point-felt.idle p { margin: 0; font-size: 12px; color: rgba(238, 228, 207, .75); }

.point-seat { display: grid; gap: 8px; padding: 8px; border-radius: 8px; background: rgba(0, 0, 0, .18); }
.point-seat.mine { background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(216, 179, 106, .25); }
.point-seat.passed { opacity: .8; }
.point-seat header, .point-result header { display: flex; justify-content: space-between; align-items: center; }
.point-seat header strong, .point-result header strong { font: 700 15px/1 var(--serif); color: #f3dca6; text-shadow: 0 1px 2px #000; }
.point-score { min-width: 30px; padding: 3px 7px; border-radius: 999px; background: rgba(0, 0, 0, .45); text-align: center; font: 700 15px/1 system-ui, sans-serif; color: #fff; }
.point-score.exact { background: linear-gradient(180deg, #e8c15a, #a87a22); color: #1a1206; box-shadow: 0 0 12px rgba(232, 193, 90, .7); }
.point-score.bust { background: #7a1b22; }

.point-hand { display: flex; justify-content: center; gap: 0; min-height: 86px; perspective: 600px; }
.point-hand-empty { align-self: center; font-size: 12px; color: rgba(238, 228, 207, .6); }
.point-card {
  position: relative;
  width: 58px; height: 84px; margin: 0 -6px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: linear-gradient(160deg, #ffffff, #ece6dc);
  box-shadow: 0 1px 0 #fff inset, 0 6px 12px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .25);
  color: #1a1a22;
  transform: rotate(calc((var(--n, 0) - 1) * 3deg));
}
.point-hand .point-card:nth-child(1) { --n: 0; }
.point-hand .point-card:nth-child(2) { --n: 1; }
.point-hand .point-card:nth-child(3) { --n: 2; }
.point-hand .point-card:nth-child(4) { --n: 3; }
.point-hand .point-card:nth-child(5) { --n: 4; }
.point-card.red { color: #c0202c; }
.point-card > b { position: absolute; display: grid; justify-items: center; font: 700 14px/1 Georgia, serif; }
.point-card > b i { font-style: normal; font-size: 11px; }
.point-card > b:first-child { top: 4px; left: 5px; }
.point-card > b:last-child { bottom: 4px; right: 5px; transform: rotate(180deg); }
.point-card > em { font-style: normal; font-size: 28px; }
.point-card.back {
  background: repeating-linear-gradient(45deg, #2a2352 0 4px, #231d45 4px 8px);
  box-shadow: inset 0 0 0 3px #d8b36a, inset 0 0 0 5px #1a1535, 0 6px 12px rgba(0, 0, 0, .45);
}
.point-card.back em { font-size: 22px; filter: sepia(1) saturate(2); }
.point-card.fresh { animation: point-deal .5s cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: var(--d, 0ms); }
.point-seat.mine .point-card { width: 64px; height: 92px; }
.point-seat.mine .point-card > em { font-size: 32px; }
.point-hand.mini { min-height: 0; justify-content: flex-start; }
.point-hand.mini .point-card { width: 34px; height: 48px; margin: 0 -3px; }
.point-hand.mini .point-card > em { font-size: 16px; }
.point-hand.mini .point-card > b { font-size: 11px; }
.point-hand.mini .point-card > b i { font-size: 7px; }

.point-others, .point-lobby-seats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.point-other { display: grid; padding: 5px 9px; border-radius: 6px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(216, 179, 106, .2); text-align: center; }
.point-other strong { font: 600 12px/1.2 var(--serif); color: #f3dca6; }
.point-other small { font-size: 11px; color: rgba(238, 228, 207, .7); }
.point-other.passed { opacity: .6; }
.point-other.me { border-color: var(--gold); }
.point-watch { text-align: center; font-size: 12px; color: rgba(238, 228, 207, .75); }

.point-deck-stack { position: relative; width: 58px; height: 84px; margin-bottom: 6px; }
.point-deck-stack span {
  position: absolute; inset: 0; border-radius: 6px;
  background: repeating-linear-gradient(45deg, #2a2352 0 4px, #231d45 4px 8px);
  box-shadow: inset 0 0 0 3px #d8b36a, inset 0 0 0 5px #1a1535, 0 4px 10px rgba(0, 0, 0, .5);
}
.point-deck-stack span:nth-child(2) { transform: translate(3px, -3px); }
.point-deck-stack span:nth-child(3) { transform: translate(6px, -6px); animation: point-deck-bob 2.4s ease-in-out infinite; }

.point-bet { display: grid; gap: 8px; }
.point-stepper { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; }
.point-stepper button, .point-chips button {
  min-height: 38px; padding: 0;
  border-radius: 6px; border: 1px solid var(--gold-dim);
  background: linear-gradient(180deg, #2a2233, #120f18);
  color: #f3dca6; font: 700 18px/1 var(--serif);
}
.point-stepper input {
  min-width: 0; min-height: 38px; padding: 0 8px;
  border-radius: 6px; border: 1px solid var(--gold-dim);
  background: rgba(6, 5, 9, .8);
  color: #fff; font: 700 18px/1 system-ui, sans-serif; text-align: center;
}
.point-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.point-chips button { font: 600 13px/1 system-ui, sans-serif; color: #eee4cf; }
.point-chips button:disabled { opacity: .4; }
.point-stepper button:active, .point-chips button:not(:disabled):active { transform: translateY(1px); }
.point-wallet { text-align: center; font-size: 12px; color: rgba(238, 228, 207, .7); }
.point-wallet strong { color: #fff; }

.point-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.point-btn {
  min-height: 46px; padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, #6a4f1f, #3a2a10);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), 0 6px 14px rgba(0, 0, 0, .5);
  color: #fbeccb; font: 700 15px/1 var(--serif);
}
.point-btn.blue { border-color: #6fa2e8; background: linear-gradient(180deg, #2d5aa0, #16305a); color: #eef4ff; }
.point-btn.red { border-color: #e06a6a; background: linear-gradient(180deg, #a02a2d, #5a1316); color: #ffecec; }
.point-btn.ghost { background: transparent; border-color: var(--gold-dim); color: rgba(243, 220, 166, .85); }
.point-btn:disabled { opacity: .45; filter: grayscale(.4); }
.point-btn:not(:disabled):active { transform: translateY(1px); }

.point-verdict { display: grid; justify-items: center; gap: 2px; padding: 8px; animation: point-verdict .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.point-verdict strong { font: 700 26px/1 var(--serif); }
.point-verdict.win strong { color: #f3dca6; text-shadow: 0 0 18px rgba(232, 193, 90, .7); }
.point-verdict.lose strong { color: #ff9a90; }
.point-verdict small { font-size: 14px; color: #fff; }
.point-felt.results { gap: 8px; }
.point-result { display: grid; gap: 6px; padding: 8px; border-radius: 8px; background: rgba(0, 0, 0, .25); }
.point-result.win { box-shadow: inset 0 0 0 1px rgba(232, 193, 90, .6), 0 0 14px rgba(232, 193, 90, .25); }
.point-result.lose { opacity: .8; }
.point-result.me header strong::after { content: " · ты"; font-weight: 400; font-size: 11px; color: rgba(238, 228, 207, .7); }
.point-result > small { font-size: 12px; color: #fff; }
.point-feedback { min-height: 16px; text-align: center; font-size: 12px; color: rgba(238, 228, 207, .75); }
.point21-overlay.busy .point-btn { pointer-events: none; opacity: .6; }

@keyframes point-deal {
  from { opacity: 0; transform: translate(80px, -120px) rotate(40deg) rotateY(180deg) scale(.7); }
  60% { opacity: 1; }
  to { opacity: 1; transform: rotate(calc((var(--n, 0) - 1) * 3deg)); }
}
@keyframes point-deck-bob { 0%, 100% { transform: translate(6px, -6px); } 50% { transform: translate(6px, -9px); } }
@keyframes point-verdict { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .point-card.fresh, .point-deck-stack span, .point-verdict { animation: none !important; } }

/* Elements (elements.js): coloured element runes, an altar draw sequence and
   the shared table in the prototype style. */
.overlay-panel.elements-panel {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  position: relative; overflow-x: hidden;
  display: grid; gap: 10px;
  padding-top: 12px;
  color: #eee4cf;
}
.elements-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.elements-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.elements-round { position: static; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif); }
.elements-rules { margin: -2px 0 0; text-align: center; font: 400 12px/1.4 var(--serif); color: rgba(238, 228, 207, .75); }
.elements-panel [data-elements-content] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

/* Element colours. */
.tone-pyro { --el: #ff6a3a; --el-rgb: 255 106 58; }
.tone-cryo { --el: #9fe0ff; --el-rgb: 159 224 255; }
.tone-anemo { --el: #6fe0c0; --el-rgb: 111 224 192; }
.tone-electro { --el: #b886ff; --el-rgb: 184 134 255; }
.tone-hydro { --el: #4a9aff; --el-rgb: 74 154 255; }
.tone-geo { --el: #f0c040; --el-rgb: 240 192 64; }
.tone-dendro { --el: #8fd04a; --el-rgb: 143 208 74; }
.tone-neutral { --el: #d8b36a; --el-rgb: 216 179 106; }
.el-chip {
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgb(var(--el-rgb) / .8);
  background: radial-gradient(circle at 40% 35%, rgb(var(--el-rgb) / .45), rgba(10, 8, 14, .95) 70%);
  box-shadow: 0 0 10px rgb(var(--el-rgb) / .45);
  font-size: 17px;
}
.el-chip.large { width: 46px; height: 46px; font-size: 22px; }
.el-chip.huge { width: 96px; height: 96px; font-size: 46px; box-shadow: 0 0 30px rgb(var(--el-rgb) / .8), inset 0 0 20px rgb(var(--el-rgb) / .5); }

/* Idle hero: runes orbiting a core. */
.elements-hero { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: 8px; border: 1px solid rgba(216, 179, 106, .2); background: linear-gradient(180deg, rgba(26, 21, 30, .92), rgba(12, 10, 16, .92)); }
.elements-hero > div:last-child { display: grid; gap: 4px; min-width: 0; }
.elements-hero small { font: 700 10px/1 var(--serif); letter-spacing: .12em; color: rgba(243, 220, 166, .7); }
.elements-hero strong { font: 700 17px/1.2 var(--serif); color: #f3dca6; }
.elements-hero p { margin: 0; font-size: 12px; line-height: 1.4; color: rgba(238, 228, 207, .7); }
.elements-orbit { position: relative; width: 110px; height: 110px; border-radius: 50%; border: 1px solid rgba(216, 179, 106, .3); animation: el-spin 16s linear infinite; }
.elements-orbit strong { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; color: #f3dca6; animation: el-spin 16s linear infinite reverse; }
.elements-orbit span { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; display: grid; place-items: center; border-radius: 50%; font-size: 14px; background: radial-gradient(circle, rgb(var(--el-rgb) / .35), rgba(10, 8, 14, .9)); box-shadow: 0 0 8px rgb(var(--el-rgb) / .6); transform: rotate(calc(var(--i) * 360deg / 7)) translateY(-50px) rotate(calc(var(--i) * -360deg / 7)); }

.elements-balance { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 6px; border: 1px solid rgba(216, 179, 106, .18); background: #0f0c15; font-size: 12px; color: rgba(238, 228, 207, .7); }
.elements-balance strong { color: #fff; }
.elements-phase { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--gold-dim); background: rgba(6, 5, 9, .7); }
.elements-phase small { display: block; font: 400 11px/1 var(--serif); color: rgba(238, 228, 207, .7); }
.elements-phase strong { font: 700 18px/1.2 system-ui, sans-serif; color: #fff; }
.elements-phase > span { padding: 3px 8px; border-radius: 999px; border: 1px solid var(--gold-dim); font: 700 11px/1 var(--serif); color: #f3dca6; }
.elements-phase.live > span { border-color: #e06a6a; color: #ff9a90; animation: el-live 1.2s ease-in-out infinite; }

.elements-players, .elements-results { display: grid; gap: 6px; }
.elements-player, .elements-result { padding: 10px; border-radius: 6px; border: 1px solid rgba(216, 179, 106, .16); background: linear-gradient(180deg, rgba(26, 21, 30, .92), rgba(12, 10, 16, .92)); }
.elements-player.done { opacity: .75; }
.elements-player header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.elements-player header strong, .elements-result strong { display: block; font: 600 14px/1.2 var(--serif); color: #f3dca6; }
.elements-player header small { font-size: 11px; color: rgba(238, 228, 207, .6); }
.elements-player header b, .elements-result b { font: 700 16px/1 system-ui, sans-serif; color: #fff; }
.elements-hand { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 34px; align-items: center; }
.elements-hand em { color: rgba(238, 228, 207, .5); }
.elements-result { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.elements-result > div:last-child { text-align: right; }
.elements-result small { display: block; font-size: 11px; color: rgba(238, 228, 207, .7); }
.elements-result.win { border-color: var(--gold); box-shadow: 0 0 14px rgba(216, 179, 106, .3); }

.elements-me { display: grid; gap: 8px; padding: 12px; border-radius: 8px; border: 1px solid rgba(216, 179, 106, .3); background: rgba(8, 7, 12, .8); }
.elements-me > div:first-child { display: flex; justify-content: space-between; align-items: baseline; font: 400 12px/1 var(--serif); color: rgba(238, 228, 207, .7); }
.elements-me > div:first-child strong { font: 700 24px/1 system-ui, sans-serif; color: #fff; }
.elements-me-hand { display: flex; flex-wrap: wrap; gap: 10px; }
.elements-me-hand > span { display: grid; justify-items: center; gap: 4px; }
.elements-me-hand small { font: 600 11px/1 var(--serif); color: var(--el); }

.elements-bet-box { display: grid; gap: 8px; }
.elements-bet-box label { display: grid; gap: 4px; font-size: 11px; color: rgba(238, 228, 207, .7); }
.elements-bet-box input { min-height: 38px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--gold-dim); background: rgba(6, 5, 9, .8); color: #fff; font: 700 17px/1 system-ui, sans-serif; text-align: center; }
.elements-bet-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 6px; }
.elements-bet-chips button { min-height: 34px; border-radius: 6px; border: 1px solid var(--gold-dim); background: linear-gradient(180deg, #2a2233, #120f18); color: #eee4cf; font: 600 12px/1 system-ui, sans-serif; }

.elements-primary, .elements-secondary {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 8px 14px;
  border-radius: 6px; border: 1px solid var(--gold);
  background: linear-gradient(180deg, #6a4f1f, #3a2a10);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), 0 6px 14px rgba(0, 0, 0, .5);
  color: #fbeccb; text-align: left;
}
.elements-primary > span { font-size: 20px; }
.elements-primary strong { display: block; font: 700 16px/1.1 var(--serif); }
.elements-primary small { display: block; font-size: 11px; color: rgba(251, 236, 203, .75); }
.elements-primary.draw:not(:disabled) { border-color: #b886ff; background: linear-gradient(180deg, #5b3fa6, #2e1f5c); animation: el-ready 2s ease-in-out infinite; }
.elements-primary:disabled { opacity: .5; }
.elements-secondary { min-height: 40px; background: transparent; border-color: var(--gold-dim); color: rgba(243, 220, 166, .85); font: 600 13px/1 var(--serif); justify-content: center; }
.elements-secondary.accent { border-color: var(--gold); background: linear-gradient(180deg, #6a4f1f, #3a2a10); color: #fbeccb; }
.elements-watch { padding: 12px; border-radius: 6px; border: 1px dashed rgba(216, 179, 106, .25); text-align: center; font-size: 12px; color: rgba(238, 228, 207, .65); }
.elements-feedback { min-height: 16px; text-align: center; font-size: 12px; color: rgba(238, 228, 207, .75); }
.elements-overlay.busy button { pointer-events: none; }

/* Draw sequence. */
.elements-altar {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgb(var(--el-rgb) / .18), transparent 60%), #07060b;
  opacity: 0; transition: opacity .2s ease;
}
.elements-altar[hidden] { display: none; }
.elements-altar.spinning { opacity: 1; }
.elements-altar.leaving { opacity: 0; }
.el-ring { position: absolute; left: 50%; top: 45%; width: 0; height: 0; animation: el-race 1.1s cubic-bezier(.3, .1, .3, 1) forwards; }
.el-ring span { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border-radius: 50%; font-size: 22px; background: radial-gradient(circle, rgb(var(--el-rgb) / .4), rgba(10, 8, 14, .9)); box-shadow: 0 0 14px rgb(var(--el-rgb) / .7); transform: rotate(calc(var(--i) * 360deg / 7)) translateY(-110px) rotate(calc(var(--i) * -360deg / 7)); }
.landed .el-ring { opacity: 0; transition: opacity .3s ease; }
.el-core { position: absolute; left: 50%; top: 45%; translate: -50% -50%; opacity: 0; scale: .3; }
.landed .el-core { animation: el-land .5s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.el-burst { position: absolute; left: 50%; top: 45%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; background: radial-gradient(circle, #fff, rgb(var(--el-rgb) / .9) 35%, transparent 70%); opacity: 0; }
.landed .el-burst { animation: el-burst .6s ease-out forwards; }
.el-name { position: absolute; left: 0; right: 0; top: calc(45% + 70px); text-align: center; font: 700 26px/1 var(--serif); color: var(--el); text-shadow: 0 0 18px rgb(var(--el-rgb) / .8), 0 2px 0 #000; opacity: 0; }
.landed .el-name { animation: el-name .4s ease-out .2s forwards; }

@keyframes el-spin { to { rotate: 360deg; } }
@keyframes el-live { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes el-ready { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), 0 0 8px rgba(184, 134, 255, .3); } 50% { box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), 0 0 22px rgba(184, 134, 255, .7); } }
@keyframes el-race { from { rotate: 0deg; scale: .6; } to { rotate: 1080deg; scale: 1; } }
@keyframes el-land { to { opacity: 1; scale: 1; } }
@keyframes el-burst { 0% { opacity: 1; transform: scale(.5); } 100% { opacity: 0; transform: scale(6); } }
@keyframes el-name { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 680px) { .elements-players { grid-template-columns: repeat(2, minmax(0, 1fr)); } .elements-player.bot { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .elements-orbit, .elements-orbit strong, .elements-phase.live > span, .elements-primary.draw { animation: none !important; } }

.utility-panel { overflow-x: hidden; }
.utility-grid { display: grid; gap: 12px; margin-top: 14px; }
.utility-card { padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(255,255,255,.035); }
.utility-card h3 { margin: 0 0 5px; font-size: 13px; }
.utility-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.utility-action { width: 100%; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(185,156,255,.25); border-radius: 16px; color: #f5efff; background: linear-gradient(135deg, rgba(110,75,177,.6), rgba(67,52,114,.62)); font-weight: 800; }
.utility-action:disabled { opacity: .45; }
.utility-feedback { min-height: 18px; margin-top: 10px; color: var(--muted); font-size: 11px; text-align: center; }
.bonus-balance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.bonus-balance article { padding: 11px 8px; border-radius: 15px; text-align: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.bonus-balance span { display: block; font-size: 18px; }
.bonus-balance strong { display: block; margin-top: 4px; font-size: 12px; }
.bonus-prizes { display: grid; gap: 8px; margin-top: 12px; }
.bonus-prize { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 15px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.bonus-prize > span { font-size: 22px; }
.bonus-prize strong { font-size: 11px; }
.bonus-prize small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.bonus-prize b { font-size: 11px; color: #d8c8ff; }
.bonus-win { margin-top: 12px; padding: 15px; border-radius: 18px; text-align: center; background: radial-gradient(circle at top, rgba(255,221,118,.17), rgba(255,255,255,.03)); border: 1px solid rgba(255,220,117,.2); }
.bonus-win span { display: block; font-size: 36px; }
.bonus-win strong { display: block; margin-top: 7px; font-size: 14px; }
.title-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; }
.title-form input { min-width: 0; padding: 11px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.09); background: rgba(8,10,20,.45); color: var(--text); outline: none; }
.title-form button { padding: 0 14px; border-radius: 14px; border: 1px solid rgba(185,156,255,.22); background: rgba(117,83,180,.45); color: var(--text); font-weight: 800; }
.title-list { display: grid; gap: 8px; margin-top: 12px; }
.title-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 11px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.title-row strong { font-size: 11px; }
.title-row small { color: var(--muted); font-size: 11px; }
.title-row b { align-self: center; color: #e1d1ff; font-size: 11px; }
.horo-signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.horo-sign, .horo-style { padding: 9px 7px; border-radius: 13px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.035); color: var(--text); font-size: 11px; }
.horo-sign.active, .horo-style.active { border-color: rgba(190,157,255,.35); background: rgba(128,91,199,.18); }
.horo-styles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 10px; }
.horo-result { min-height: 84px; margin-top: 12px; padding: 14px; border-radius: 17px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); white-space: pre-wrap; font-size: 12px; line-height: 1.55; }
@media (min-width: 680px) { .utility-grid.two { grid-template-columns: 1fr 1fr; } .horo-signs { grid-template-columns: repeat(4, 1fr); } }

/* Titles (titles.js): prototype header, a name roulette and an unfurling ribbon. */
.overlay-panel.titles-panel { --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif; display: grid; gap: 10px; padding-top: 12px; color: #eee4cf; }
.tt-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.tt-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.tt-round { position: static; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif); }
.tt-rules { margin: -2px 0 0; text-align: center; font: 400 12px/1.4 var(--serif); color: rgba(238, 228, 207, .75); }
.tt-stage { display: grid; justify-items: center; gap: 10px; padding: 16px 10px; border-radius: 10px; border: 1px solid var(--gold-dim); background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(216, 179, 106, .16), transparent 70%), linear-gradient(180deg, #1a1520, #0c0a10); }
.tt-stage[hidden] { display: none; }
.tt-wheel { width: min(100%, 260px); padding: 10px; border-radius: 8px; border: 1px solid var(--gold); background: rgba(6, 5, 9, .85); box-shadow: inset 0 0 14px rgba(0, 0, 0, .8), 0 0 16px rgba(216, 179, 106, .25); text-align: center; overflow: hidden; }
.tt-wheel span { display: block; font: 700 22px/1.2 var(--serif); color: #f3dca6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-wheel span.tick { animation: tt-tick .12s ease-out; }
.tt-stage.landed .tt-wheel { border-color: #ffd36a; box-shadow: inset 0 0 14px rgba(0, 0, 0, .8), 0 0 26px rgba(255, 211, 106, .6); }
.tt-stage.landed .tt-wheel span { color: #ffd36a; animation: tt-land .5s cubic-bezier(.2, 1.4, .4, 1); }
.tt-ribbon { position: relative; padding: 8px 28px; background: linear-gradient(180deg, #8a1d25, #5a0f16); clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%); transform: scaleX(0); transform-origin: 50% 50%; }
.tt-ribbon strong { font: 700 18px/1.2 var(--serif); color: #fbeccb; text-shadow: 0 1px 0 #000; }
.tt-stage.landed .tt-ribbon { animation: tt-unfurl .55s cubic-bezier(.2, 1.2, .4, 1) .2s forwards; }
.titles-panel .utility-card { border-radius: 8px; border-color: rgba(216, 179, 106, .2); background: linear-gradient(180deg, rgba(26, 21, 30, .92), rgba(12, 10, 16, .92)); }
.titles-panel .utility-card h3 { font: 700 15px/1.1 var(--serif); color: #f3dca6; }
.titles-panel .title-form input { border-radius: 6px; border-color: var(--gold-dim); background: rgba(6, 5, 9, .8); }
.titles-panel .title-form button { border-radius: 6px; border: 1px solid var(--gold); background: linear-gradient(180deg, #6a4f1f, #3a2a10); color: #fbeccb; font: 700 14px/1 var(--serif); }
.titles-panel .title-row { border-radius: 6px; }
.titles-panel .title-row strong { display: block; font: 600 13px/1.2 var(--serif); color: #f3dca6; }
.titles-panel .title-row small { display: block; margin-top: 2px; }
.titles-panel .title-row b { padding: 3px 10px; border-radius: 3px; background: linear-gradient(180deg, #8a1d25, #5a0f16); color: #fbeccb; font: 700 12px/1.2 var(--serif); }
@keyframes tt-tick { from { transform: translateY(-60%); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes tt-land { 0% { transform: scale(1); } 40% { transform: scale(1.2); } 100% { transform: none; } }
@keyframes tt-unfurl { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .tt-wheel span, .tt-ribbon { animation: none !important; transform: none; } }

/* Horoscope (horoscope.js): zodiac ring around a crystal ball, parchment text. */
.overlay-panel.horo-panel { --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif; display: grid; gap: 10px; padding-top: 12px; color: #eee4cf; }
.horo-panel [data-horo-content] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.horo-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.horo-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.horo-round { position: static; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif); }
.horo-wheel { position: relative; width: min(84vw, 300px); aspect-ratio: 1; margin: 6px auto 0; border-radius: 50%; background: radial-gradient(circle, transparent 38%, rgba(216, 179, 106, .08) 39% 60%, transparent 61%), radial-gradient(circle at 50% 50%, rgba(80, 60, 140, .3), transparent 70%); box-shadow: inset 0 0 0 1px rgba(216, 179, 106, .25); }
.horo-wheel::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed rgba(216, 179, 106, .35); animation: horo-spin 60s linear infinite; }
.horo-panel .horo-sign { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(14, 11, 18, .9); transform: rotate(var(--a)) translateY(calc(min(84vw, 300px) * -.42)) rotate(calc(-1 * var(--a))); transition: box-shadow .2s ease, border-color .2s ease; }
.horo-panel .horo-sign span { font-size: 18px; }
.horo-panel .horo-sign.active { border-color: var(--gold); background: radial-gradient(circle, rgba(216, 179, 106, .35), rgba(14, 11, 18, .95)); box-shadow: 0 0 14px rgba(216, 179, 106, .6); }
.horo-ball { position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), rgba(140, 110, 230, .55) 30%, rgba(40, 20, 90, .95) 75%); box-shadow: 0 0 30px rgba(140, 110, 230, .5), inset 0 -10px 20px rgba(0, 0, 0, .5); overflow: hidden; }
.horo-ball i { position: absolute; inset: -30%; background: conic-gradient(from 0deg, transparent, rgba(255, 220, 255, .35), transparent 30%, rgba(160, 200, 255, .3), transparent 60%); opacity: .5; animation: horo-spin 8s linear infinite; }
.horo-ball span { position: relative; font-size: 36px; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .6)); }
.horo-wheel.divining .horo-ball { animation: horo-pulse 1.1s ease-in-out infinite; }
.horo-wheel.divining .horo-ball i { opacity: 1; animation-duration: 1.2s; }
.horo-current { position: absolute; left: 0; right: 0; bottom: 27%; text-align: center; font: 700 13px/1 var(--serif); color: #f3dca6; text-shadow: 0 1px 2px #000; pointer-events: none; }
.horo-styles-wrap small { display: block; margin-bottom: 6px; font: 700 10px/1 var(--serif); letter-spacing: .1em; text-transform: uppercase; color: rgba(243, 220, 166, .6); }
.horo-panel .horo-styles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 0; }
.horo-panel .horo-style { min-height: 36px; padding: 6px; border-radius: 6px; border: 1px solid var(--gold-dim); background: linear-gradient(180deg, #2a2233, #120f18); color: #eee4cf; font: 600 12px/1.2 var(--serif); }
.horo-panel .horo-style.active { border-color: var(--gold); background: linear-gradient(180deg, #6a4f1f, #3a2a10); color: #fbeccb; }
.horo-panel .horo-result { min-height: 90px; margin: 0; padding: 16px 18px; border-radius: 4px; border: 0; background: linear-gradient(180deg, #e8d9b4, #d4c08e); box-shadow: inset 0 0 20px rgba(120, 80, 30, .45), 0 8px 20px rgba(0, 0, 0, .5); color: #3a2410; font: 400 14px/1.55 var(--serif); }
.horo-panel .horo-result:not(.filled) { color: rgba(58, 36, 16, .6); text-align: center; font-style: italic; }
.horo-panel .horo-go { min-height: 46px; border-radius: 6px; border: 1px solid #9a7ae8; background: linear-gradient(180deg, #5b3fa6, #2e1f5c); color: #f0e6ff; font: 700 16px/1 var(--serif); box-shadow: 0 0 16px rgba(154, 122, 232, .35); }
@keyframes horo-spin { to { rotate: 360deg; } }
@keyframes horo-pulse { 0%, 100% { box-shadow: 0 0 30px rgba(140, 110, 230, .5), inset 0 -10px 20px rgba(0, 0, 0, .5); } 50% { box-shadow: 0 0 50px rgba(200, 160, 255, .9), inset 0 -10px 20px rgba(0, 0, 0, .5); } }
@media (prefers-reduced-motion: reduce) { .horo-wheel::before, .horo-ball, .horo-ball i { animation: none !important; } }

/* Clan (clan.js), prototype style: banner header with XP, gold segmented tabs,
   treasury / daily task cards and gold-framed activity rows. */
.overlay-panel.clan-panel {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  overflow-x: hidden;
  display: grid; gap: 12px;
  padding-top: 12px;
  color: #eee4cf;
}
.clan-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.clan-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.clan-round { position: static; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif); }
.clan-round[hidden] { visibility: hidden; display: grid; }
.clan-panel [data-clan-content] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.clan-hero { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.clan-banner {
  width: 64px; height: 88px;
  display: grid; place-items: start center; padding-top: 14px;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, #3b2b5e, #1e1533);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .6);
  transform-origin: 50% 0;
  animation: clan-banner-sway 5s ease-in-out infinite;
}
.clan-banner span { font-size: 30px; filter: sepia(1) saturate(2) hue-rotate(5deg) drop-shadow(0 0 6px rgba(216, 179, 106, .5)); }
.clan-hero-info { display: grid; gap: 4px; min-width: 0; }
.clan-hero-info h3 { margin: 0; font: 700 20px/1.1 var(--serif); color: #f3dca6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan-hero-info h3 small { font-size: 12px; color: rgba(243, 220, 166, .6); }
.clan-hero-row { display: flex; gap: 12px; font-size: 12px; color: #eee4cf; }
.clan-xp { position: relative; height: 10px; overflow: hidden; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .8); background: linear-gradient(180deg, #07070b, #16151d); box-shadow: 0 0 0 1px rgba(216, 179, 106, .25); }
.clan-xp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2d4f86, #6fa2e8); transition: width .6s ease; }
.clan-hero-info > small { font-size: 11px; color: rgba(238, 228, 207, .7); }

.clan-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 6px; border: 1px solid var(--gold-dim); background: rgba(6, 5, 9, .7); overflow: hidden; }
.clan-tabs button { min-height: 36px; padding: 0 4px; border: 0; border-right: 1px solid rgba(107, 83, 38, .45); background: transparent; color: rgba(238, 228, 207, .7); font: 600 12px/1 var(--serif); }
.clan-tabs button:last-child { border-right: 0; }
.clan-tabs button.active { color: #fbeccb; background: linear-gradient(180deg, #6a4f1f, #3a2a10); box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), inset 0 0 0 1px var(--gold); }
.clan-backlink { justify-self: start; padding: 0; border: 0; background: none; color: var(--gold); font: 600 13px/1 var(--serif); }
.clan-tab-body { display: grid; gap: 10px; animation: clan-in .3s ease both; }

.clan-card, .clan-section, .clan-activity-group {
  display: grid; gap: 8px;
  padding: 12px;
  border-radius: 8px; border: 1px solid rgba(216, 179, 106, .2);
  background: linear-gradient(180deg, rgba(26, 21, 30, .92), rgba(12, 10, 16, .92));
  text-align: left; color: inherit;
}
.clan-card h4, .clan-section h4, .clan-activity-group h4 { margin: 0; font: 700 14px/1.1 var(--serif); color: #f3dca6; }
.clan-treasury > div { display: flex; align-items: center; gap: 14px; font: 600 13px/1 system-ui, sans-serif; color: #fff; }
.clan-treasury b { margin-left: auto; font-size: 20px; color: var(--gold); }
.clan-daily-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; }
.clan-daily-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--gold-dim); background: radial-gradient(circle at 50% 40%, #2c2436, #0e0c12); font-size: 22px; }
.clan-daily-row strong { display: block; font: 600 14px/1.2 var(--serif); color: #e9b86a; }
.clan-daily-row small { font-size: 11px; color: rgba(238, 228, 207, .65); }
.clan-play { min-height: 36px; padding: 6px 16px; border-radius: 6px; border: 1px solid var(--gold); background: linear-gradient(180deg, #6a4f1f, #3a2a10); color: #fbeccb; font: 700 13px/1 var(--serif); }
.clan-play.ghost { background: transparent; border-color: var(--gold-dim); color: rgba(243, 220, 166, .85); }
.clan-contrib { display: flex; align-items: baseline; gap: 10px; }
.clan-contrib strong { font: 700 22px/1 system-ui, sans-serif; color: #fff; }
.clan-contrib small { font-size: 12px; color: rgba(238, 228, 207, .7); }
.clan-motto { margin: 0; text-align: center; font: italic 400 13px/1.4 var(--serif); color: rgba(243, 220, 166, .75); }

.clan-members, .clan-list, .clan-activities, .clan-activity-list { display: grid; gap: 6px; }
.clan-member, .clan-list-row, .clan-activity-row, .clan-building-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px;
  border-radius: 6px; border: 1px solid rgba(216, 179, 106, .14);
  background: #0f0c15;
}
.clan-member > div, .clan-building-row > div, .clan-activity-row > div { min-width: 0; flex: 1; }
.clan-avatar { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold); background: radial-gradient(circle at 40% 35%, #3a2d45, #120d18); font: 700 15px/1 var(--serif); color: #f3dca6; }
.clan-member strong, .clan-list-row strong, .clan-activity-row strong, .clan-building-row strong, .clan-activity-card strong { display: block; font: 600 13px/1.2 var(--serif); color: #f3dca6; }
.clan-member small, .clan-list-row small, .clan-activity-row small, .clan-building-row small, .clan-activity-card small, .clan-muted { display: block; margin-top: 2px; font-size: 11px; color: rgba(238, 228, 207, .65); }
.clan-role { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--gold-dim); font-size: 11px; color: #f3dca6; }

.clan-activity-card { display: grid; gap: 8px; padding: 10px; border-radius: 6px; border: 1px solid rgba(224, 106, 106, .35); background: linear-gradient(90deg, rgba(90, 20, 24, .3), #0f0c15); }
.clan-activity-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.clan-activity-title > span { flex: 0 0 auto; font-size: 11px; color: #fff; }
.clan-boss-hp { height: 10px; overflow: hidden; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .8); background: #0a0a0e; }
.clan-boss-hp span { display: block; height: 100%; background: linear-gradient(180deg, #e0484c, #8b1d25); transition: width .5s ease; }
.clan-damage-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.clan-damage-list span { display: flex; justify-content: space-between; gap: 8px; padding: 5px 7px; border-radius: 4px; background: rgba(0, 0, 0, .3); font-size: 11px; color: rgba(238, 228, 207, .75); }
.clan-damage-list b { color: #fff; }

/* Buttons inside rows and cards: gold plates; danger in red. */
.clan-contribute button, .clan-create button, .clan-join-button, .clan-activity-card button, .clan-activity-row button, .clan-building-row button, .clan-war-card > button, .clan-activity-group > button {
  flex: 0 0 auto;
  min-height: 34px; padding: 6px 12px;
  border-radius: 6px; border: 1px solid var(--gold);
  background: linear-gradient(180deg, #6a4f1f, #3a2a10);
  color: #fbeccb; font: 700 12px/1 var(--serif);
}
.clan-activity-row button:disabled, .clan-building-row button:disabled, .clan-activity-card button:disabled { opacity: .45; cursor: not-allowed; }
.clan-danger { width: 100%; min-height: 38px; border-radius: 6px; border: 1px solid rgba(224, 106, 106, .45); background: rgba(90, 20, 24, .35); color: #ffb0a8; font: 600 13px/1 var(--serif); }

.clan-warehouse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.clan-warehouse article { padding: 10px 6px; border-radius: 6px; border: 1px solid rgba(216, 179, 106, .14); background: #0f0c15; text-align: center; }
.clan-warehouse span { display: block; font-size: 20px; }
.clan-warehouse strong { display: block; margin-top: 4px; font: 700 13px/1 system-ui, sans-serif; color: #fff; }
.clan-contribute, .clan-create { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
.clan-create { grid-template-columns: 1fr auto; }
.clan-contribute select, .clan-contribute input, .clan-create input, .clan-activity-list label input, .clan-activity-list label select { min-width: 0; padding: 9px; border-radius: 6px; border: 1px solid var(--gold-dim); background: rgba(6, 5, 9, .8); color: #fff; font-size: 13px; }
.clan-activity-list label { display: grid; gap: 4px; font-size: 11px; color: rgba(238, 228, 207, .75); }
.clan-activity-row .clan-activity-list { display: flex; gap: 6px; }
.clan-quiz-options { display: grid; gap: 6px; }
.clan-quiz-options button { padding: 11px; border-radius: 6px; border: 1px solid var(--gold-dim); background: linear-gradient(180deg, #2a2233, #120f18); color: #eee4cf; text-align: left; font: 400 13px/1.3 var(--serif); }
.clan-quiz-options button:active { border-color: var(--gold); }

.clan-war-score { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px; border-radius: 6px; background: rgba(0, 0, 0, .3); }
.clan-war-score strong { font: 700 26px/1 var(--serif); color: #f3dca6; }
.clan-war-score span { color: rgba(238, 228, 207, .6); }
.clan-war-result { margin: 0; padding: 8px 10px; border-radius: 6px; background: rgba(0, 0, 0, .3); font-size: 12px; }
.clan-war-result strong { color: #f3dca6; }
.clan-war-card > button { width: 100%; }

@media (max-width: 520px) {
  .clan-contribute { grid-template-columns: 1fr 1fr; }
  .clan-contribute button { grid-column: 1 / -1; }
  .clan-activity-row, .clan-building-row { align-items: stretch; flex-direction: column; }
  .clan-activity-row button, .clan-building-row button { width: 100%; }
  .clan-damage-list { grid-template-columns: 1fr; }
}
@keyframes clan-banner-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(1.5deg); } }
@keyframes clan-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .clan-banner, .clan-tab-body { animation: none !important; } }

/* Steal (steal.js): painted header, target rows with class portraits and a
   heist scene (sneak -> vault bursts with loot, or a shield repels). */
.overlay-panel.steal-panel {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  position: relative; overflow-x: hidden;
  display: grid; gap: 10px;
  max-width: 760px;
  padding-top: 12px;
  color: #eee4cf;
}
.steal-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.steal-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.steal-round { position: static; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif); }
.steal-panel [data-steal-content] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.steal-hero { position: relative; overflow: hidden; min-height: 150px; display: grid; align-content: end; padding: 12px; border-radius: 8px; border: 1px solid var(--gold-dim); background: linear-gradient(180deg, rgba(10, 8, 14, .1) 30%, rgba(10, 8, 14, .9)), url("/art/menu/steal.webp") center 35% / cover no-repeat; box-shadow: inset 0 0 30px rgba(0, 0, 0, .6); }
.steal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.steal-chips span { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--gold-dim); background: rgba(6, 5, 9, .8); font-size: 12px; color: rgba(238, 228, 207, .85); }
.steal-chips span b { color: #fff; }
.steal-chips span.on { border-color: #6fa2e8; color: #cfe2ff; }
.steal-warning { margin: 0; padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(224, 160, 90, .35); background: rgba(90, 50, 20, .25); font-size: 12px; color: #ffcf9a; }

.steal-result { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 8px; animation: steal-in .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.steal-result > span { font-size: 30px; text-align: center; }
.steal-result strong { display: block; font: 700 16px/1.2 var(--serif); }
.steal-result small { font-size: 12px; color: rgba(238, 228, 207, .75); }
.steal-result p { margin: 4px 0 0; font: 700 13px/1.2 system-ui, sans-serif; color: #fff; }
.steal-result.success { border: 1px solid var(--gold); background: radial-gradient(ellipse at 20% 50%, rgba(216, 179, 106, .25), rgba(12, 10, 16, .92)); }
.steal-result.success strong { color: #f3dca6; }
.steal-result.defended { border: 1px solid rgba(111, 162, 232, .5); background: radial-gradient(ellipse at 20% 50%, rgba(60, 100, 170, .3), rgba(12, 10, 16, .92)); }
.steal-result.defended strong { color: #cfe2ff; }

.steal-section { display: grid; gap: 8px; }
.steal-section-title { display: flex; justify-content: space-between; align-items: baseline; }
.steal-section-title strong { font: 700 15px/1 var(--serif); color: #f3dca6; }
.steal-section-title span { font-size: 12px; color: rgba(238, 228, 207, .6); }
.steal-targets { display: grid; gap: 6px; }
.steal-target { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(216, 179, 106, .16); background: linear-gradient(180deg, rgba(26, 21, 30, .92), rgba(12, 10, 16, .92)); }
.steal-target.shielded { opacity: .7; }
.steal-avatar { width: 48px; height: 48px; display: grid; place-items: end center; overflow: hidden; border-radius: 50%; border: 1px solid var(--gold); background: var(--art) center 18% / cover no-repeat, #1a1420; color: transparent; font-size: 0; box-shadow: 0 0 0 2px #120e16; }
.steal-target.shielded .steal-avatar { border-color: #6fa2e8; box-shadow: 0 0 0 2px #120e16, 0 0 12px rgba(111, 162, 232, .6); }
.steal-target-copy { display: grid; gap: 2px; min-width: 0; }
.steal-target-copy strong { font: 600 14px/1.2 var(--serif); color: #f3dca6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steal-target-copy small { font-size: 11px; color: rgba(238, 228, 207, .65); }
.steal-target-copy em { font-style: normal; font-size: 11px; color: rgba(207, 226, 255, .85); }
.steal-target button { min-height: 36px; padding: 6px 12px; border-radius: 6px; border: 1px solid #e06a6a; background: linear-gradient(180deg, #a02a2d, #5a1316); color: #ffecec; font: 700 13px/1 var(--serif); }
.steal-target button:disabled { opacity: .45; filter: grayscale(.5); }
.steal-empty { padding: 14px; border-radius: 6px; border: 1px dashed rgba(216, 179, 106, .25); text-align: center; font-size: 12px; color: rgba(238, 228, 207, .6); }
.steal-overlay.busy .steal-target button { pointer-events: none; }

/* Heist scene. */
.steal-heist { position: absolute; inset: 0; z-index: 20; overflow: hidden; background: radial-gradient(ellipse at 50% 60%, rgba(60, 50, 80, .4), transparent 70%), #07060b; opacity: 0; transition: opacity .2s ease; }
.steal-heist[hidden] { display: none; }
.steal-heist.sneak { opacity: 1; }
.steal-heist.leaving { opacity: 0; }
.heist-vault { position: absolute; right: 12%; top: 50%; width: 150px; height: 150px; margin-top: -90px; border-radius: 50%; background: radial-gradient(circle, #3a3440 0 55%, #1a171d 56% 64%, #5a5560 65% 70%, #1a171d 71%); box-shadow: 0 10px 30px rgba(0, 0, 0, .8); }
.heist-door { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, #6a6470 0 12%, #3a3440 13% 60%, #2a262e 61%); transition: transform .8s cubic-bezier(.3, .8, .3, 1); }
.heist-door i { position: absolute; left: 50%; top: 50%; width: 80%; height: 6px; margin: -3px 0 0 -40%; border-radius: 3px; background: #8a8490; box-shadow: 0 0 0 1px #1a171d; }
.heist-door i::after { content: ""; position: absolute; inset: 0; rotate: 90deg; border-radius: 3px; background: #8a8490; }
.heist-thief { position: absolute; left: -70px; top: 50%; margin-top: -40px; font-size: 64px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .8)) brightness(.8); }
.sneak .heist-thief { animation: heist-sneak 1.2s cubic-bezier(.4, 0, .4, 1) forwards; }
.heist-shield { position: absolute; right: 18%; top: 50%; margin-top: -60px; font-size: 90px; opacity: 0; filter: drop-shadow(0 0 20px rgba(111, 162, 232, .9)); }
.heist-loot { position: absolute; right: calc(12% + 75px); top: calc(50% - 15px); }
.heist-loot i { position: absolute; font-size: 26px; font-style: normal; opacity: 0; transform: rotate(var(--a)) translateY(0); }
.heist-title { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; font: 700 26px/1.1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.success .heist-door { transform: rotate(540deg) scale(.2); opacity: .2; }
.success .heist-vault { box-shadow: 0 0 40px rgba(255, 210, 100, .7), 0 10px 30px rgba(0, 0, 0, .8); }
.success .heist-loot i { animation: heist-loot .9s cubic-bezier(.2, .7, .3, 1) forwards; animation-delay: calc(.3s + var(--d)); }
.success .heist-title { color: #ffd36a; text-shadow: 0 0 18px rgba(255, 210, 100, .7), 0 2px 0 #000; }
.defended .heist-shield { animation: heist-shield .8s ease-out forwards; }
.defended .heist-thief { left: calc(88% - var(--vault, 150px) - 56px); animation: heist-repel .6s ease-in .1s forwards; }
.defended .heist-title { color: #cfe2ff; }

@keyframes steal-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes heist-sneak { 0% { left: -70px; transform: none; } 30% { transform: translateY(-6px); } 45% { transform: none; } 75% { transform: translateY(-6px); } 100% { left: calc(88% - var(--vault, 150px) - 56px); transform: none; } }
@keyframes heist-repel { to { left: calc(88% - var(--vault, 150px) - 120px); transform: rotate(-30deg); opacity: .4; } }
@keyframes heist-shield { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes heist-loot { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.5); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-150px) scale(1.2); } }
@media (max-width: 420px) { .steal-heist { --vault: 120px; } .heist-vault { width: 120px; height: 120px; margin-top: -75px; } .heist-loot { right: calc(12% + 60px); } }
@media (prefers-reduced-motion: reduce) { .steal-heist *, .steal-result { animation: none !important; transition: none !important; } }
.steal-target .steal-seated { color: #ffcf9a; }

/* Character profile (profile.js): a portrait hero with gender thumbnails, stat
   tiles and a carousel of class portrait cards with a transformation flash. */
.overlay-panel.profile-panel {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  display: grid; gap: 10px;
  padding-top: 12px;
  color: #eee4cf;
}
.profile-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.profile-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.profile-round { position: static; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif); }
.profile-panel [data-profile-content] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.profile-hero {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 4 / 4.4;
  display: grid; align-content: end;
  border-radius: 10px; border: 1px solid var(--gold-dim);
  box-shadow: inset 0 0 0 1px rgba(255, 222, 160, .08), 0 10px 26px rgba(0, 0, 0, .5);
}
.profile-hero-art { position: absolute; inset: -3%; z-index: -2; background: var(--art) center 15% / cover no-repeat, #111; animation: profile-breathe 7s ease-in-out infinite alternate; }
.profile-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(10, 8, 14, .95)); }
.profile-hero-copy { display: grid; gap: 3px; padding: 14px; padding-right: 110px; }
.profile-hero-copy small { font: 700 12px/1 var(--serif); letter-spacing: .1em; color: rgba(243, 220, 166, .8); }
.profile-hero-copy h3 { margin: 0; font: 700 26px/1.1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000, 0 0 16px rgba(216, 179, 106, .35); }
.profile-hero-copy span { font-size: 12px; color: rgba(238, 228, 207, .75); }
.profile-hero-flash { position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle at 50% 40%, #fff, rgba(255, 230, 170, .6) 40%, transparent 75%); opacity: 0; pointer-events: none; }
.profile-hero.transforming .profile-hero-flash { animation: profile-flash-in .45s ease-in forwards; }
.profile-hero.transforming .profile-hero-art { filter: brightness(2) blur(3px); transition: filter .45s ease; }
.profile-hero.arrived .profile-hero-flash { animation: profile-flash-out .6s ease-out; }
.profile-hero.arrived .profile-hero-art { animation: profile-arrive .7s cubic-bezier(.2, .9, .3, 1.1), profile-breathe 7s ease-in-out .7s infinite alternate; }

.profile-genders { position: absolute; right: 12px; bottom: 12px; z-index: 1; display: flex; gap: 6px; }
.profile-genders button { position: relative; width: 44px; height: 56px; padding: 0; border-radius: 6px; border: 1px solid var(--gold-dim); background: var(--art) center 15% / cover no-repeat, #111; filter: grayscale(.7) brightness(.6); transition: filter .2s ease, transform .2s ease; }
.profile-genders button i { position: absolute; left: 0; right: 0; bottom: 2px; font: 700 13px/1 system-ui, sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px #000; }
.profile-genders button.active { filter: none; border-color: var(--gold); box-shadow: 0 0 12px rgba(216, 179, 106, .5); transform: translateY(-2px); }
.profile-genders button:disabled:not(.active) { opacity: .6; }
.profile-hint { margin: 0; text-align: center; font-size: 11px; color: rgba(238, 228, 207, .6); }

.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.profile-stats article { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: center; padding: 8px; border-radius: 6px; border: 1px solid rgba(216, 179, 106, .16); background: #0f0c15; }
.profile-stats span { font-size: 16px; text-align: center; }
.profile-stats small { display: block; font-size: 11px; color: rgba(238, 228, 207, .6); }
.profile-stats strong { font: 700 14px/1.1 system-ui, sans-serif; color: #fff; }

.profile-classes { display: grid; gap: 8px; }
.profile-section-title strong { font: 700 15px/1 var(--serif); color: #f3dca6; }
.profile-class-list { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.profile-class-list::-webkit-scrollbar { display: none; }
.profile-class-card {
  position: relative; overflow: hidden; isolation: isolate;
  flex: 0 0 116px; aspect-ratio: 3 / 4.2;
  display: grid; align-content: end; justify-items: center; gap: 2px;
  padding: 8px 6px;
  border-radius: 8px; border: 1px solid #3a3440;
  background: #111;
  color: #eee4cf; text-align: center;
  scroll-snap-align: start;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.profile-class-art { position: absolute; inset: 0; z-index: -2; background: var(--art) center 15% / cover no-repeat; filter: grayscale(.5) brightness(.7); transition: filter .25s ease, transform .4s ease; }
.profile-class-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(10, 8, 14, .95)); }
.profile-class-badge { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(10, 8, 14, .8); font-size: 13px; }
.profile-class-card strong { font: 700 14px/1.1 var(--serif); color: #f3dca6; text-shadow: 0 1px 2px #000; }
.profile-class-card small { font-size: 11px; color: rgba(238, 228, 207, .8); }
.profile-class-card.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(216, 179, 106, .45); transform: translateY(-3px); }
.profile-class-card.selected .profile-class-art, .profile-class-card.active .profile-class-art { filter: none; transform: scale(1.05); }
.profile-class-card.active { border-color: #7fc97a; }
.profile-class-card.active small { color: #9fe39a; }

.profile-chosen { display: grid; gap: 8px; padding: 10px; border-radius: 8px; border: 1px solid rgba(216, 179, 106, .3); background: rgba(8, 7, 12, .8); animation: profile-in .3s ease both; }
.profile-chosen p { margin: 0; font-size: 12px; line-height: 1.45; color: rgba(238, 228, 207, .8); }
.profile-class-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-class-stats span { padding: 4px 8px; border-radius: 4px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(216, 179, 106, .16); font-size: 12px; color: #fff; }
.profile-confirm { min-height: 44px; border-radius: 6px; border: 1px solid var(--gold); background: linear-gradient(180deg, #6a4f1f, #3a2a10); box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), 0 6px 14px rgba(0, 0, 0, .5); color: #fbeccb; font: 700 15px/1 var(--serif); }
.profile-confirm:disabled { opacity: .5; }
.profile-overlay.busy button { pointer-events: none; }

@keyframes profile-breathe { from { transform: scale(1); } to { transform: scale(1.04) translateY(-1%); } }
@keyframes profile-flash-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes profile-flash-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes profile-arrive { from { transform: scale(1.15); filter: brightness(1.8); } to { transform: none; filter: none; } }
@keyframes profile-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .profile-hero-art, .profile-hero-flash, .profile-chosen { animation: none !important; } }

/* Skills (skills.js): a class tome — typed rune icons, enchant pips and an
   enchant burst when a skill levels up. */
.overlay-panel.skills-panel {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  width: min(760px, calc(100vw - 20px)); max-height: min(92vh, 900px);
  display: grid; gap: 10px;
  padding-top: 12px;
  overflow-y: auto;
  color: #eee4cf;
}
.skills-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.skills-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.skills-round { position: static; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif); }
.skills-panel [data-skills-content] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.skills-summary { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 8px; border: 1px solid rgba(216, 179, 106, .2); background: linear-gradient(180deg, rgba(26, 21, 30, .92), rgba(12, 10, 16, .92)); }
.skills-portrait { width: 64px; height: 64px; border-radius: 50%; background: var(--art) center 18% / cover no-repeat, #111; box-shadow: 0 0 0 2px #120e16, 0 0 0 3px var(--gold); }
.skills-summary > div { display: grid; gap: 3px; }
.skills-summary small { font: 700 10px/1 var(--serif); letter-spacing: .12em; text-transform: uppercase; color: rgba(243, 220, 166, .6); }
.skills-summary strong { font: 700 18px/1.1 var(--serif); color: #f3dca6; }
.skills-summary em { font-style: normal; font-size: 11px; line-height: 1.35; color: rgba(238, 228, 207, .65); }
.skills-resources { display: flex; flex-wrap: wrap; gap: 6px; }
.skills-resources span { padding: 5px 9px; border-radius: 999px; border: 1px solid var(--gold-dim); background: rgba(6, 5, 9, .7); font: 600 12px/1 system-ui, sans-serif; color: #fff; }
.skills-resources .sp { border-color: #9a7ae8; color: #e6d8ff; }

.skills-list { display: grid; gap: 8px; }
.skill-card {
  --rune: #d8b36a; --rune-rgb: 216 179 106;
  position: relative; overflow: hidden;
  display: grid; gap: 8px;
  padding: 12px;
  border-radius: 8px; border: 1px solid rgba(216, 179, 106, .2);
  background: linear-gradient(180deg, rgba(26, 21, 30, .94), rgba(12, 10, 16, .94));
}
.skill-card.kind-damage { --rune: #ff7a5a; --rune-rgb: 255 122 90; }
.skill-card.kind-heal { --rune: #7fe07e; --rune-rgb: 127 224 126; }
.skill-card.kind-shield { --rune: #6fa2ff; --rune-rgb: 111 162 255; }
.skill-card.kind-utility { --rune: #b886ff; --rune-rgb: 184 134 255; }
.skill-head { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; }
.skill-rune { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgb(var(--rune-rgb) / .7); background: radial-gradient(circle at 50% 40%, rgb(var(--rune-rgb) / .35), rgba(10, 8, 14, .95)); box-shadow: 0 0 10px rgb(var(--rune-rgb) / .35); font-size: 20px; color: var(--rune); }
.skill-head > div { display: grid; gap: 2px; min-width: 0; }
.skill-head strong { font: 700 15px/1.2 var(--serif); color: #f3dca6; }
.skill-head small { font-size: 11px; color: rgba(238, 228, 207, .6); }
.skill-level { font: 800 18px/1 var(--serif); color: var(--rune); text-shadow: 0 0 10px rgb(var(--rune-rgb) / .5); }
.skill-pips { display: flex; gap: 4px; }
.skill-pips i { flex: 1; height: 5px; border-radius: 2px; background: rgba(255, 255, 255, .08); }
.skill-pips i.on { background: linear-gradient(90deg, rgb(var(--rune-rgb) / .7), var(--rune)); box-shadow: 0 0 6px rgb(var(--rune-rgb) / .5); }
.skill-card p { margin: 0; font-size: 12px; line-height: 1.45; color: rgba(238, 228, 207, .8); }
.skill-transition { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.skill-transition span { padding: 5px 8px; border-radius: 4px; border: 1px solid rgba(216, 179, 106, .16); background: rgba(0, 0, 0, .35); font-size: 12px; color: #fff; }
.skill-transition b { color: var(--rune); }
.skill-card > small { font-size: 11px; color: rgba(238, 228, 207, .6); }
.skill-upgrade-cost { display: grid; gap: 3px; }
.skill-upgrade-cost small { font: 700 10px/1 var(--serif); letter-spacing: .1em; text-transform: uppercase; color: rgba(243, 220, 166, .6); }
.skill-upgrade-cost strong { font: 600 12px/1.5 system-ui, sans-serif; color: #eee4cf; }
.skill-card button { min-height: 40px; border-radius: 6px; border: 1px solid var(--gold); background: linear-gradient(180deg, #6a4f1f, #3a2a10); box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), 0 4px 10px rgba(0, 0, 0, .4); color: #fbeccb; font: 700 14px/1 var(--serif); }
.skill-card button:disabled { opacity: .45; filter: grayscale(.4); }
.skills-feedback { min-height: 16px; text-align: center; font-size: 12px; color: rgba(238, 228, 207, .75); }
.skills-empty { padding: 20px; border-radius: 6px; border: 1px dashed rgba(216, 179, 106, .25); text-align: center; font-size: 12px; color: rgba(238, 228, 207, .6); }

/* Enchant burst on the card that just levelled up. */
.skill-card.enchanted { animation: skill-enchant .9s cubic-bezier(.2, .8, .3, 1); }
.skill-card.enchanted::after { content: ""; position: absolute; left: 33px; top: 33px; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid var(--rune); box-shadow: 0 0 18px var(--rune); animation: skill-ring .9s ease-out forwards; pointer-events: none; }
.skill-card.enchanted .skill-pips i.last { animation: skill-pip .6s ease-out .2s both; }
.skill-card.enchanted .skill-level { animation: skill-pip .6s ease-out both; }

@keyframes skill-enchant { 0% { box-shadow: 0 0 0 rgb(var(--rune-rgb) / 0); } 30% { box-shadow: 0 0 26px rgb(var(--rune-rgb) / .6), inset 0 0 24px rgb(var(--rune-rgb) / .25); border-color: var(--rune); } 100% { box-shadow: none; } }
@keyframes skill-ring { from { opacity: 1; transform: scale(.5); } to { opacity: 0; transform: scale(9); } }
@keyframes skill-pip { 0% { transform: scale(1); } 40% { transform: scale(1.6); filter: brightness(1.8); } 100% { transform: none; } }
@media (min-width: 700px) { .skills-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skill-card button { margin-top: auto; } }
@media (prefers-reduced-motion: reduce) { .skill-card.enchanted, .skill-card.enchanted::after, .skill-card.enchanted * { animation: none !important; } }

.forms-panel { max-height:min(92vh,900px); }
.forms-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:13px 0 10px; }
.forms-tabs button { min-height:38px; border:1px solid rgba(255,255,255,.065); border-radius:11px; background:rgba(255,255,255,.02); color:#aaa6b7; font-size: 11px; }
.forms-tabs button.active { border-color:rgba(133,154,235,.2); background:linear-gradient(135deg,rgba(85,105,187,.13),rgba(125,78,159,.08)); color:#efedf7; }
.forms-intro { display:flex; align-items:center; gap:10px; margin-bottom:9px; padding:11px; border:1px solid rgba(255,255,255,.06); border-radius:14px; background:rgba(255,255,255,.018); }
.forms-intro > span { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.035); font-size:20px; }
.forms-intro > div { display:grid; gap:2px; min-width:0; }
.forms-intro strong { font-size: 11px; }
.forms-intro small { color:var(--muted); font-size:7px; line-height:1.45; }
.forms-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; max-height:410px; overflow:auto; padding-right:2px; scrollbar-width:thin; }
.forms-field { min-width:0; display:grid; gap:4px; padding:8px; border:1px solid rgba(255,255,255,.055); border-radius:11px; background:rgba(255,255,255,.016); }
.forms-field > span { overflow:hidden; color:#9d99aa; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.forms-field input { width:100%; min-width:0; height:34px; padding:0 9px; border:1px solid rgba(255,255,255,.075); border-radius:9px; outline:none; background:rgba(4,6,14,.25); color:#eceaf3; font:inherit; font-size: 11px; }
.forms-field input:focus { border-color:rgba(129,151,235,.26); background:rgba(12,17,34,.34); }
.forms-save { width:100%; min-height:52px; margin-top:9px; padding:9px 12px; border:1px solid rgba(105,184,144,.14); border-radius:14px; background:linear-gradient(135deg,rgba(57,135,96,.12),rgba(84,101,178,.07)); color:#e7f3ec; display:flex; align-items:center; gap:10px; text-align:left; }
.forms-save > span { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.035); font-size:16px; }
.forms-save > div { display:grid; gap:2px; }
.forms-save strong { font-size: 11px; }
.forms-save small { color:#9baea2; font-size:7px; }
.forms-feedback { min-height:18px; margin:8px 2px 0; color:var(--muted); font-size:8px; text-align:center; }
.forms-members { display:flex; gap:5px; overflow:auto; padding:1px 0 7px; scrollbar-width:thin; }
.forms-member { flex:0 0 auto; min-width:110px; min-height:43px; padding:7px 9px; border:1px solid rgba(255,255,255,.06); border-radius:11px; background:rgba(255,255,255,.017); color:#b5b1c1; display:grid; grid-template-columns:13px 1fr; grid-template-rows:auto auto; column-gap:5px; text-align:left; }
.forms-member > span { grid-row:1 / 3; align-self:center; color:#a49bc9; font-size:8px; }
.forms-member strong { max-width:95px; overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.forms-member small { color:var(--muted); font-size:6px; }
.forms-member.active { border-color:rgba(136,155,231,.18); background:rgba(89,106,178,.09); color:#efedf6; }
.forms-profile-card { padding:12px; border:1px solid rgba(255,255,255,.065); border-radius:15px; background:linear-gradient(145deg,rgba(255,255,255,.03),rgba(255,255,255,.012)); }
.forms-profile-card > header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.forms-profile-card > header > div { min-width:0; display:grid; gap:2px; }
.forms-profile-card header small { color:var(--muted); font-size:7px; letter-spacing:.08em; }
.forms-profile-card header strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.forms-profile-card header > span { flex:0 0 auto; padding:4px 7px; border-radius:8px; background:rgba(98,133,201,.1); color:#b9caec; font-size:6px; }
.forms-profile-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; max-height:430px; overflow:auto; scrollbar-width:thin; }
.forms-profile-field { min-width:0; padding:9px; border-radius:10px; background:rgba(255,255,255,.018); display:grid; gap:3px; }
.forms-profile-field small { color:#8e8a9b; font-size:6px; }
.forms-profile-field strong { overflow-wrap:anywhere; color:#d6d3dd; font-size:8px; font-weight:600; line-height:1.35; }
.forms-empty { padding:18px 10px; color:var(--muted); font-size:8px; text-align:center; }
.forms-overlay.busy button, .forms-overlay.busy input { pointer-events:none; opacity:.58; }
@media (max-width:390px) { .forms-grid, .forms-profile-fields { grid-template-columns:1fr; }.forms-grid { max-height:470px; } }

.help-panel { max-height:min(92vh,900px); }
.help-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:14px 0 10px; }
.help-tabs button { min-height:35px; border:1px solid rgba(255,255,255,.07); border-radius:11px; background:rgba(255,255,255,.02); color:#aaa6b7; font-size:8px; font-weight:800; }
.help-tabs button.active { border-color:rgba(126,148,231,.2); background:linear-gradient(135deg,rgba(72,94,174,.15),rgba(115,73,155,.08)); color:#eeebf8; }
.help-guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.help-guide-card { min-width:0; padding:11px; border:1px solid rgba(255,255,255,.06); border-radius:14px; background:rgba(255,255,255,.018); display:grid; grid-template-columns:auto 1fr; gap:9px; align-items:start; }
.help-guide-card > span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.035); font-size:18px; }
.help-guide-card > div { min-width:0; display:grid; gap:3px; }
.help-guide-card strong { font-size: 11px; color:#e8e4f2; }
.help-guide-card p { margin:0; color:#9894a6; font-size:7px; line-height:1.5; }
.help-command-tools { position:sticky; top:0; z-index:2; padding:2px 0 8px; background:linear-gradient(180deg,rgba(17,20,38,.98) 72%,rgba(17,20,38,0)); }
.help-search { height:38px; padding:0 10px; border:1px solid rgba(255,255,255,.075); border-radius:11px; background:rgba(5,7,16,.3); display:flex; align-items:center; gap:7px; }
.help-search span { color:#878395; font-size:16px; }
.help-search input { width:100%; border:0; outline:0; background:transparent; color:#eeeaf7; font:inherit; font-size: 11px; }
.help-search input::placeholder { color:#6f6b7e; }
.help-filters { display:flex; gap:5px; overflow-x:auto; padding:7px 0 1px; scrollbar-width:none; }
.help-filters::-webkit-scrollbar { display:none; }
.help-filters button { flex:0 0 auto; min-height:27px; padding:0 8px; border:1px solid rgba(255,255,255,.06); border-radius:8px; background:rgba(255,255,255,.018); color:#9e9aaa; font-size:7px; }
.help-filters button.active { border-color:rgba(125,148,229,.18); background:rgba(87,105,178,.1); color:#ddd8ea; }
.help-command-list { display:grid; gap:5px; }
.help-command-row { min-width:0; padding:9px 10px; border:1px solid rgba(255,255,255,.055); border-radius:11px; background:rgba(255,255,255,.015); display:grid; grid-template-columns:minmax(110px,.7fr) 1.3fr; gap:9px; align-items:center; }
.help-command-row > div { min-width:0; display:grid; gap:2px; }
.help-command-row code { overflow:hidden; text-overflow:ellipsis; color:#dcd6f2; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:8px; }
.help-command-row small { color:#777385; font-size:6px; }
.help-command-row p { margin:0; color:#aaa6b5; font-size:7px; line-height:1.4; }
.help-empty { padding:26px 12px; border:1px dashed rgba(255,255,255,.07); border-radius:12px; color:#807c8e; text-align:center; font-size:8px; }
.help-legacy-note { margin:10px 2px 0; color:#777385; font-size:7px; line-height:1.45; text-align:center; }
@media (max-width:430px) { .help-guide-grid { grid-template-columns:1fr; }.help-command-row { grid-template-columns:minmax(95px,.8fr) 1.2fr; } }

.updates-panel {
  width: min(620px, calc(100vw - 24px));
}

.updates-content {
  display: grid;
  gap: 14px;
}

.updates-loading {
  padding: 28px;
  text-align: center;
  opacity: .72;
}

.updates-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background: rgba(255,255,255,.045);
}

.updates-card.enabled {
  box-shadow: inset 0 0 0 1px rgba(156, 128, 255, .2);
}

.updates-card-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  font-size: 26px;
}

.updates-card-copy h3 {
  margin: 4px 0 6px;
}

.updates-card-copy p,
.updates-note p {
  margin: 0;
  line-height: 1.5;
  opacity: .72;
}

.updates-toggle {
  min-width: 92px;
  display: grid;
  grid-template-columns: 28px auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor: pointer;
}

.updates-toggle span {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  transition: .18s ease;
}

.updates-toggle.active span {
  transform: translateX(4px);
  background: rgba(190, 175, 255, .92);
}

.updates-toggle:disabled {
  opacity: .55;
  cursor: wait;
}

.updates-note {
  padding: 16px 18px;
}

.updates-note strong {
  display: block;
  margin-bottom: 5px;
}

@media (max-width: 560px) {
  .updates-card {
    grid-template-columns: auto 1fr;
  }

  .updates-toggle {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }
}

.feedback-panel {
  width: min(680px, calc(100vw - 24px));
}

.feedback-card {
  display: grid;
  gap: 16px;
}

.feedback-intro {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  background: rgba(255,255,255,.045);
}

.feedback-intro > span {
  font-size: 28px;
}

.feedback-intro p {
  margin: 5px 0 0;
  line-height: 1.45;
  opacity: .72;
}

.feedback-field {
  display: grid;
  gap: 8px;
}

.feedback-field > span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .72;
}

.feedback-field textarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  box-sizing: border-box;
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  outline: none;
  background: rgba(6,8,18,.64);
  color: inherit;
  font: inherit;
  line-height: 1.5;
}

.feedback-field textarea:focus {
  border-color: rgba(176,157,255,.55);
  box-shadow: 0 0 0 3px rgba(135,105,255,.1);
}

.feedback-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  opacity: .62;
}

.feedback-submit {
  width: 100%;
  padding: 13px 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(133,98,255,.9), rgba(91,139,255,.82));
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.feedback-submit:disabled {
  opacity: .55;
  cursor: wait;
}

.feedback-result {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
}

.feedback-result.success {
  background: rgba(92,211,144,.12);
  border: 1px solid rgba(92,211,144,.28);
}

.feedback-result.error {
  background: rgba(255,102,132,.11);
  border: 1px solid rgba(255,102,132,.28);
}

@media (max-width: 560px) {
  .feedback-meta {
    flex-direction: column;
  }
}

/* Inventory (inventory.js): an RPG bag of potion flasks, vitals that glide
   when a potion is drunk, and resource chips. */
.overlay-panel.inventory-panel {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  display: grid; gap: 10px;
  padding-top: 12px;
  color: #eee4cf;
}
.inv-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.inv-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.inv-round { position: static; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif); }
.inventory-panel [data-inventory-content] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.inventory-vitals { display: grid; gap: 6px; }
.inv-vital { display: grid; gap: 4px; }
.inv-vital > div { display: flex; justify-content: space-between; font-size: 12px; }
.inv-vital span { font: 700 12px/1 var(--serif); color: rgba(243, 220, 166, .85); }
.inv-vital strong { font: 700 12px/1 system-ui, sans-serif; color: #fff; }
.inv-vital > i { position: relative; display: block; height: 14px; overflow: hidden; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .85); background: linear-gradient(180deg, #07070b, #16151d); box-shadow: 0 0 0 1px rgba(216, 179, 106, .25), inset 0 2px 4px rgba(0, 0, 0, .8); }
.inv-vital b { position: absolute; inset: 0 auto 0 0; transition: width .9s cubic-bezier(.2, .8, .3, 1); }
.inv-vital b::after { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .04)); }
.inv-vital.hp b { background: linear-gradient(180deg, #e0484c, #8b1d25); }
.inv-vital.mp b { background: linear-gradient(180deg, #4a90e2, #1f4f9c); }

.inventory-result { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px; border-radius: 8px; animation: inv-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.inventory-result.hp { border: 1px solid rgba(224, 72, 76, .5); background: radial-gradient(ellipse, rgba(224, 72, 76, .25), rgba(12, 10, 16, .9)); }
.inventory-result.mp { border: 1px solid rgba(74, 144, 226, .5); background: radial-gradient(ellipse, rgba(74, 144, 226, .25), rgba(12, 10, 16, .9)); }
.inventory-result > span { font: 800 24px/1 var(--serif); color: #fff; }
.inventory-result strong { display: block; font: 700 18px/1 var(--serif); color: #fff; }
.inventory-result small { font-size: 11px; color: rgba(238, 228, 207, .7); }

.inventory-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.inventory-title { display: flex; justify-content: space-between; align-items: baseline; }
.inventory-title strong { font: 700 15px/1 var(--serif); color: #f3dca6; }
.inventory-title small { font-size: 12px; color: rgba(238, 228, 207, .6); }
.inv-bag { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; border-radius: 8px; border: 1px solid var(--gold-dim); background: linear-gradient(180deg, #1c1611, #0e0b08); box-shadow: inset 0 0 20px rgba(0, 0, 0, .7); }
.inv-slot { position: relative; aspect-ratio: 1; padding: 0; display: grid; place-items: center; border-radius: 6px; border: 1px solid #3a3440; background: radial-gradient(circle at 50% 40%, #2a2233, #0e0c12); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); }
.inv-slot.blank { opacity: .45; }
.inv-slot.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 12px rgba(216, 179, 106, .45); }
.inv-slot.empty { filter: grayscale(1); opacity: .5; }
.inv-slot em { position: absolute; right: 4px; bottom: 3px; font: 800 11px/1 system-ui, sans-serif; font-style: normal; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }

/* CSS flask: rounded body, neck, cork; liquid colour by potion tone. */
.inv-flask { --liquid: #e0484c; --liquid-rgb: 224 72 76; position: relative; width: 30px; height: 38px; display: block; }
.inv-flask.tone-mp { --liquid: #4a90e2; --liquid-rgb: 74 144 226; }
.inv-flask.tone-elixir { --liquid: #ff6ab8; --liquid-rgb: 255 106 184; }
.inv-flask::before { content: ""; position: absolute; left: 50%; top: 0; width: 10px; height: 6px; margin-left: -5px; border-radius: 2px; background: #8a5a2c; }
.inv-flask::after { content: ""; position: absolute; left: 50%; top: 5px; width: 8px; height: 8px; margin-left: -4px; background: rgba(220, 230, 255, .35); }
.inv-liquid { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; border-radius: 50% 50% 45% 45% / 40% 40% 60% 60%; border: 1.5px solid rgba(220, 230, 255, .55); background: linear-gradient(180deg, transparent 22%, var(--liquid) 22%), rgba(220, 230, 255, .12); box-shadow: 0 0 10px rgb(var(--liquid-rgb) / .5), inset -3px -4px 6px rgba(0, 0, 0, .35); overflow: hidden; }
.inv-liquid::after { content: ""; position: absolute; left: 20%; top: 25%; width: 20%; height: 35%; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.inv-bubbles { position: absolute; left: 30%; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .7); opacity: 0; }
.inv-slot:not(.empty) .inv-bubbles { animation: inv-bubble 2.4s ease-in infinite; }
.inv-flask.drinking { animation: inv-drink .65s ease-in-out forwards; }
.inv-flask.drinking .inv-liquid { background: linear-gradient(180deg, transparent 70%, var(--liquid) 70%), rgba(220, 230, 255, .12); transition: background .6s ease; }

.inv-detail { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 8px; border: 1px solid rgba(216, 179, 106, .25); background: linear-gradient(180deg, rgba(26, 21, 30, .94), rgba(12, 10, 16, .94)); animation: inv-in .25s ease both; }
.inv-detail .inv-flask { width: 36px; height: 46px; margin: 0 auto; }
.inv-detail .inv-liquid { height: 32px; }
.inv-detail strong { display: block; font: 700 14px/1.2 var(--serif); color: #f3dca6; }
.inv-detail small { display: block; font-size: 11px; line-height: 1.35; color: rgba(238, 228, 207, .7); }
.inv-detail em { display: block; margin-top: 3px; font-style: normal; font-size: 11px; color: rgba(243, 220, 166, .8); }
.inv-detail button { min-height: 40px; padding: 6px 14px; border-radius: 6px; border: 1px solid var(--gold); background: linear-gradient(180deg, #6a4f1f, #3a2a10); color: #fbeccb; font: 700 14px/1 var(--serif); }
.inv-detail button:disabled { opacity: .45; }
.inv-hint { margin: 0; text-align: center; font-size: 12px; color: rgba(238, 228, 207, .6); }

.inventory-resources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.inventory-resources article { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 8px; border-radius: 6px; border: 1px solid rgba(216, 179, 106, .16); background: #0f0c15; }
.inventory-resources strong { font: 700 13px/1 system-ui, sans-serif; color: #fff; }
.inventory-meta { display: grid; gap: 6px; }
.inventory-meta article { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(216, 179, 106, .12); background: #0f0c15; }
.inventory-meta small { display: block; font-size: 11px; color: rgba(238, 228, 207, .6); }
.inventory-meta strong { font-size: 13px; color: #fff; }
.inventory-overlay.busy button { pointer-events: none; }

@keyframes inv-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes inv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes inv-bubble { 0%, 60% { opacity: 0; transform: translateY(0); } 70% { opacity: .9; } 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes inv-drink { 0% { transform: rotate(0); } 40% { transform: rotate(-35deg) translateY(-4px); } 80% { transform: rotate(-35deg) translateY(-4px); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .inv-bubbles, .inv-flask.drinking, .inventory-result, .inv-detail { animation: none !important; } .inv-vital b { transition: none; } }

/* Exchange (exchange.js): a transmutation altar — gold flows into an alchemy
   circle and comes out as crystals. */
.overlay-panel.exchange-panel {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  max-width: 620px;
  display: grid; gap: 10px;
  padding-top: 12px;
  color: #eee4cf;
}
.ex-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.ex-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.ex-round { position: static; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif); }
.exchange-panel [data-exchange-content] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.ex-altar {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px;
  padding: 18px 10px;
  border-radius: 10px; border: 1px solid var(--gold-dim);
  background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(90, 140, 230, .15), transparent 70%), linear-gradient(180deg, #1a1520, #0c0a10);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
}
.ex-side { display: grid; justify-items: center; gap: 3px; text-align: center; }
.ex-pile { font-size: 40px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .7)); animation: ex-float 3s ease-in-out infinite; }
.ex-side.gold .ex-pile { filter: drop-shadow(0 0 12px rgba(255, 200, 80, .5)); }
.ex-side.crystal .ex-pile { filter: drop-shadow(0 0 12px rgba(90, 160, 255, .6)); animation-delay: -1.5s; }
.ex-side small { font: 700 10px/1 var(--serif); letter-spacing: .1em; text-transform: uppercase; color: rgba(243, 220, 166, .6); }
.ex-side strong { font: 700 16px/1.1 system-ui, sans-serif; color: #fff; }
.ex-circle { position: relative; width: 80px; height: 80px; display: grid; place-items: center; }
.ex-circle i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(216, 179, 106, .6); box-shadow: 0 0 12px rgba(216, 179, 106, .3); animation: ex-spin 10s linear infinite; }
.ex-circle i:nth-child(2) { inset: 12px; border-style: dashed; border-color: rgba(110, 170, 255, .6); animation-direction: reverse; animation-duration: 7s; }
.ex-circle b { font-size: 22px; color: #f3dca6; }
.ex-rate { margin: 0; text-align: center; font: 400 12px/1 var(--serif); color: rgba(238, 228, 207, .7); }
.ex-rate b { color: #f3dca6; }

/* Transmutation. */
.ex-fly { position: absolute; inset: 0; pointer-events: none; }
.ex-fly i { position: absolute; top: 50%; font-size: 22px; font-style: normal; opacity: 0; }
.ex-fly i.coin { left: 16%; }
.ex-fly i.gem { left: 50%; }
.ex-fly strong { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 800 20px/1 var(--serif); color: #9fd0ff; text-shadow: 0 0 14px rgba(90, 160, 255, .8), 0 2px 0 #000; opacity: 0; }
.transmuting .ex-fly i.coin { animation: ex-coin .6s ease-in forwards; animation-delay: var(--d); }
.transmuting .ex-fly i.gem { animation: ex-gem .7s cubic-bezier(.2, .8, .3, 1) forwards; animation-delay: var(--d); }
.transmuting .ex-fly strong { animation: ex-gain .7s ease-out .8s forwards; }
.transmuting .ex-circle i { border-color: #9fd0ff; box-shadow: 0 0 22px rgba(90, 160, 255, .9), inset 0 0 18px rgba(90, 160, 255, .5); transition: border-color .3s ease, box-shadow .3s ease; }
.transmuting .ex-circle { animation: ex-flare .9s ease-in-out .3s; }

.exchange-success { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px; border-radius: 8px; border: 1px solid rgba(90, 160, 255, .5); background: radial-gradient(ellipse, rgba(60, 110, 200, .25), rgba(12, 10, 16, .9)); animation: ex-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.exchange-success > span { font-size: 22px; color: #9fd0ff; }
.exchange-success strong { display: block; font: 700 15px/1.2 var(--serif); color: #fff; }
.exchange-success small { font-size: 11px; color: rgba(238, 228, 207, .7); }

.exchange-form { display: grid; gap: 8px; }
.ex-stepper { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; }
.ex-stepper button, .exchange-quick button { min-height: 40px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--gold-dim); background: linear-gradient(180deg, #2a2233, #120f18); color: #f3dca6; font: 700 18px/1 var(--serif); }
.ex-stepper label { display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--gold-dim); background: rgba(6, 5, 9, .8); }
.ex-stepper input { min-width: 0; width: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #fff; font: 700 18px/1 system-ui, sans-serif; text-align: center; }
.exchange-quick { display: grid; grid-template-columns: repeat(3, 1fr) 1.4fr; gap: 6px; }
.exchange-quick button { font: 600 12px/1 system-ui, sans-serif; color: #eee4cf; }
.exchange-quick button:disabled { opacity: .4; }
.exchange-cost { text-align: center; font: 600 13px/1 system-ui, sans-serif; color: rgba(243, 220, 166, .9); }
.exchange-buy { min-height: 48px; border-radius: 6px; border: 1px solid #6fa2e8; background: linear-gradient(180deg, #2d5aa0, #16305a); box-shadow: inset 0 1px 0 rgba(200, 225, 255, .3), 0 6px 14px rgba(0, 0, 0, .5), 0 0 16px rgba(90, 160, 255, .25); color: #eef4ff; font: 700 17px/1 var(--serif); }
.exchange-buy:disabled { opacity: .5; }
.exchange-overlay.busy button { pointer-events: none; }

@keyframes ex-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ex-spin { to { rotate: 360deg; } }
@keyframes ex-coin { 0% { opacity: 1; left: 14%; transform: translateY(-50%) scale(1); } 100% { opacity: 0; left: 46%; transform: translateY(-50%) scale(.3); } }
@keyframes ex-gem { 0% { opacity: 0; left: 47%; transform: translateY(-50%) scale(.2); } 30% { opacity: 1; } 100% { opacity: 0; left: 80%; transform: translateY(calc(-50% + var(--y))) scale(1.1); } }
@keyframes ex-gain { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ex-flare { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes ex-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ex-pile, .ex-circle i, .ex-fly *, .exchange-success { animation: none !important; } }

.chat-settings-panel { overflow-x: hidden; }
.chat-settings-content { display: grid; gap: 12px; }
.chat-settings-loading { padding: 24px 0; color: var(--muted); text-align: center; font-size: 11px; }
.chat-settings-message { margin-top: 2px; }
.chat-settings-intro { margin-top: 2px; }
.chat-settings-grid { display: grid; gap: 9px; }
.chat-setting-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: rgba(255,255,255,.03); }
.chat-setting-row.enabled { border-color: rgba(171,143,255,.18); background: rgba(124,87,196,.08); }
.chat-setting-row strong { display: block; font-size: 11px; }
.chat-setting-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.chat-setting-toggle { display: inline-grid; grid-template-columns: 22px auto; align-items: center; gap: 7px; min-width: 72px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--muted); }
.chat-setting-toggle span { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.chat-setting-toggle b { font-size: 11px; }
.chat-setting-toggle.active { border-color: rgba(190,157,255,.32); color: #efe8ff; background: rgba(126,88,201,.2); }
.chat-setting-toggle.active span { background: radial-gradient(circle at 35% 30%, #f6efff, #a884ff 58%, #7652bd); box-shadow: 0 0 14px rgba(170,132,255,.35); }
.chat-setting-toggle:disabled { opacity: .48; }
@media (min-width: 680px) { .chat-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.self-mute-panel { max-width: 560px; }
.self-mute-content { padding: 4px 0 8px; }
.self-mute-loading { padding: 20px; color: var(--muted); text-align: center; font-size: 11px; }
.self-mute-card, .self-mute-message { display: grid; gap: 12px; text-align: center; }
.self-mute-icon { display: block; font-size: 42px; line-height: 1; }
.self-mute-card h3, .self-mute-message h3 { margin: 0; font-size: 15px; }
.self-mute-card p, .self-mute-message p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.self-mute-message.active { border-color: rgba(185,156,255,.24); background: radial-gradient(circle at top, rgba(139,99,213,.16), rgba(255,255,255,.03)); }
.self-mute-action { width: 100%; padding: 13px 16px; border: 1px solid rgba(185,156,255,.28); border-radius: 16px; color: #f8f3ff; background: linear-gradient(135deg, rgba(116,76,190,.74), rgba(72,54,128,.76)); font-weight: 800; }
.self-mute-action:disabled { opacity: .45; }
@media (min-width: 680px) { .self-mute-card { grid-template-columns: 52px 1fr; text-align: left; align-items: center; } .self-mute-card .self-mute-action { grid-column: 1 / -1; } }

/* Original vector loot renderer shared by Daily Sword and equipment gacha. */
.loot-art{--loot-rgb:185 156 255;--loot-spin:4.4s;position:relative;isolation:isolate;width:min(100%,220px);aspect-ratio:180/220;margin-inline:auto;display:grid;place-items:center;perspective:720px;transform-style:preserve-3d;pointer-events:none;contain:layout paint}.loot-art svg{position:relative;z-index:3;width:100%;height:100%;overflow:visible;transform-origin:50% 52%;filter:drop-shadow(0 14px 12px rgba(0,0,0,.42)) drop-shadow(0 0 12px rgb(var(--loot-rgb)/.12))}.loot-art .loot-shadow{fill:rgba(0,0,0,.42)}.loot-art path.loot-metal,.loot-art rect.loot-metal,.loot-art circle.loot-metal{fill:rgba(174,183,204,.88);stroke:rgb(var(--loot-rgb)/.44);stroke-width:2}.loot-art path.loot-metal[fill="none"],.loot-art circle.loot-metal[fill="none"]{fill:none;stroke:rgba(198,208,228,.90);stroke-width:7}.loot-art .loot-highlight{fill:rgba(244,249,255,.72);stroke:rgba(255,255,255,.16);stroke-width:1}.loot-art .loot-guard{fill:rgba(91,77,111,.94);stroke:rgb(var(--loot-rgb)/.52);stroke-width:2}.loot-art .loot-hilt{fill:rgba(83,66,51,.96);stroke:rgba(220,187,137,.42);stroke-width:1.5}.loot-art .loot-gem{fill:rgb(var(--loot-rgb)/.94);stroke:rgba(255,255,255,.64);stroke-width:1.4;filter:drop-shadow(0 0 7px rgb(var(--loot-rgb)/.78))}.loot-art .loot-rune-line,.loot-art .loot-rune-ring-svg{fill:none;stroke:rgb(var(--loot-rgb)/.68);stroke-width:2;stroke-linecap:round;stroke-dasharray:5 6;filter:drop-shadow(0 0 4px rgb(var(--loot-rgb)/.44))}.loot-art .loot-fabric{fill:rgba(86,75,119,.92);stroke:rgb(var(--loot-rgb)/.38);stroke-width:2}.loot-art .loot-ornament{fill:none;stroke:rgb(var(--loot-rgb)/.65);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.66;filter:drop-shadow(0 0 4px rgb(var(--loot-rgb)/.28))}.loot-aura{position:absolute;z-index:0;inset:17% 13%;border-radius:50%;background:radial-gradient(circle,rgb(var(--loot-rgb)/.30),transparent 54%),radial-gradient(circle,rgb(var(--loot-rgb)/.12),transparent 72%);filter:blur(8px);opacity:.72;animation:loot-aura-pulse 2.8s ease-in-out infinite alternate}.loot-rune-ring{position:absolute;z-index:1;width:72%;aspect-ratio:1;border:1px solid rgb(var(--loot-rgb)/.22);border-radius:50%;box-shadow:inset 0 0 22px rgb(var(--loot-rgb)/.08),0 0 24px rgb(var(--loot-rgb)/.08);opacity:.58;animation:loot-ring-spin 13s linear infinite}.loot-rune-ring:before,.loot-rune-ring:after{content:"";position:absolute;inset:9%;border:1px dashed rgb(var(--loot-rgb)/.22);border-radius:inherit}.loot-rune-ring:after{inset:25%;border-style:solid;opacity:.7}.loot-spark{position:absolute;z-index:4;width:5px;height:5px;border-radius:50%;background:rgb(var(--loot-rgb));box-shadow:0 0 10px rgb(var(--loot-rgb)/.9);opacity:0}.loot-spark-a{left:25%;top:31%;animation:loot-spark 2.4s -1.1s ease-in-out infinite}.loot-spark-b{right:24%;top:46%;animation:loot-spark 2.8s -.4s ease-in-out infinite}.loot-spark-c{left:46%;bottom:18%;animation:loot-spark 3.1s -1.8s ease-in-out infinite}.tone-mist{--loot-rgb:164 174 190}.tone-aqua{--loot-rgb:102 205 235}.tone-arcane{--loot-rgb:185 156 255}.tone-gold{--loot-rgb:241 193 91}.tone-rose{--loot-rgb:255 126 187}.tone-prismatic{--loot-rgb:224 196 255}
.material-iron .loot-metal{fill:rgba(154,164,184,.92)}.material-iron .loot-highlight{fill:rgba(230,236,246,.70)}.material-iron .loot-guard{fill:rgba(75,79,94,.96)}.material-bronze .loot-metal{fill:rgba(169,124,76,.94);stroke:rgba(231,185,111,.55)}.material-bronze .loot-highlight{fill:rgba(241,196,127,.72)}.material-bronze .loot-guard{fill:rgba(103,66,48,.96);stroke:rgba(224,169,94,.48)}.material-bronze .loot-hilt{fill:rgba(70,46,37,.98)}.material-moonsteel .loot-metal{fill:rgba(187,205,226,.95);stroke:rgb(var(--loot-rgb)/.58)}.material-moonsteel .loot-highlight{fill:rgba(255,255,255,.88)}.material-moonsteel .loot-guard{fill:rgba(91,96,129,.94);stroke:rgba(202,218,255,.46)}.material-moonsteel svg{filter:drop-shadow(0 14px 12px rgba(0,0,0,.40)) drop-shadow(0 0 15px rgb(var(--loot-rgb)/.19))}.material-obsidian .loot-metal{fill:rgba(51,54,66,.98);stroke:rgb(var(--loot-rgb)/.72)}.material-obsidian .loot-highlight{fill:rgba(135,143,166,.52);stroke:rgb(var(--loot-rgb)/.22)}.material-obsidian .loot-guard{fill:rgba(38,32,50,.98);stroke:rgb(var(--loot-rgb)/.65)}.material-obsidian .loot-hilt{fill:rgba(39,34,35,.98)}.material-obsidian svg{filter:drop-shadow(0 14px 12px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgb(var(--loot-rgb)/.22))}.ornament-runic .loot-ornament{stroke-dasharray:4 3;opacity:.88}.ornament-royal .loot-ornament{fill:rgba(231,193,112,.16);stroke:rgba(244,207,126,.78);stroke-width:2.4;opacity:.92}.ornament-crystal .loot-ornament{fill:rgb(var(--loot-rgb)/.16);stroke:rgb(var(--loot-rgb)/.9);stroke-width:2.5;opacity:1;filter:drop-shadow(0 0 7px rgb(var(--loot-rgb)/.55))}.grade-s .loot-rune-ring,.grade-ss .loot-rune-ring,.grade-sss .loot-rune-ring{opacity:.78}.grade-s .loot-ornament,.grade-ss .loot-ornament,.grade-sss .loot-ornament{opacity:1;filter:drop-shadow(0 0 7px rgb(var(--loot-rgb)/.48))}.grade-ss .loot-aura,.grade-sss .loot-aura{filter:blur(6px) saturate(1.25)}.grade-ss svg,.grade-sss svg{filter:drop-shadow(0 14px 12px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgb(var(--loot-rgb)/.25))}.grade-sss:after{content:"";position:absolute;z-index:2;inset:7%;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(111,219,239,.08),rgba(255,132,197,.12),rgba(242,198,104,.10),transparent 68%);mix-blend-mode:screen;animation:loot-ring-spin 7s linear infinite reverse}.motion-spin.is-animated svg,.motion-spin.is-reveal svg{animation:loot-spin var(--loot-spin) cubic-bezier(.45,.04,.55,.96) infinite}.motion-heavy-turn.is-reveal svg{animation:loot-heavy-turn 3.8s cubic-bezier(.45,.08,.55,.92) infinite}.motion-wobble.is-reveal svg{animation:loot-wobble 3.3s ease-in-out infinite}.motion-float.is-reveal svg{animation:loot-float 3s ease-in-out infinite}.motion-orbit.is-reveal svg{animation:loot-orbit 4.2s ease-in-out infinite}.daily-sword-art{width:min(100%,174px);margin-top:-7px;margin-bottom:-2px}.daily-sword-art.size-small{width:min(100%,145px)}.daily-sword-art.size-medium{width:min(100%,174px)}.daily-sword-art.size-large{width:min(100%,205px)}.daily-sword-art .loot-rune-ring{opacity:.38}.sword-overlay.rolling .daily-sword-art svg{animation:loot-roll-impact .66s cubic-bezier(.2,.8,.2,1)}.sword-overlay.rolling .daily-sword-art .loot-aura{opacity:1;filter:blur(6px) saturate(1.35)}.gacha-loot-stage{position:relative;z-index:2;min-height:236px;margin:9px -4px 2px;display:grid;place-items:center;overflow:hidden;border:1px solid rgb(var(--loot-stage-rgb,188 156 255)/.10);border-radius:19px;background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.045),transparent 27%),linear-gradient(180deg,rgba(7,9,17,.22),rgba(7,9,17,.52))}.gacha-loot-stage .loot-art{width:min(68%,228px);margin:-7px auto -2px}.loot-stage-ground{position:absolute;z-index:1;left:18%;right:18%;bottom:24px;height:17px;border-radius:50%;background:radial-gradient(ellipse,rgb(var(--screen-accent-rgb,188 156 255)/.25),transparent 68%);filter:blur(5px);opacity:.58}.gacha-pending .loot-art.is-reveal{animation:loot-stage-enter .72s cubic-bezier(.16,.84,.34,1) both}@keyframes loot-aura-pulse{from{opacity:.46;transform:scale(.92)}to{opacity:.9;transform:scale(1.08)}}@keyframes loot-ring-spin{to{transform:rotate(360deg)}}@keyframes loot-spark{0%,63%,100%{opacity:0;transform:translateY(7px) scale(.55)}72%{opacity:1}86%{opacity:.8;transform:translateY(-11px) scale(1.05)}}@keyframes loot-spin{0%{transform:rotateY(-24deg) rotateZ(-2deg)}25%{transform:rotateY(64deg) rotateZ(1deg)}50%{transform:rotateY(158deg) rotateZ(2deg)}75%{transform:rotateY(254deg) rotateZ(-1deg)}100%{transform:rotateY(336deg) rotateZ(-2deg)}}@keyframes loot-heavy-turn{0%,100%{transform:rotateY(-24deg) translateY(1px)}50%{transform:rotateY(28deg) translateY(-5px)}}@keyframes loot-wobble{0%,100%{transform:rotateY(-17deg) rotateZ(-2deg) translateY(1px)}50%{transform:rotateY(17deg) rotateZ(2deg) translateY(-5px)}}@keyframes loot-float{0%,100%{transform:translateY(4px) rotateY(-7deg)}50%{transform:translateY(-8px) rotateY(8deg)}}@keyframes loot-orbit{0%,100%{transform:translateY(2px) rotateZ(-5deg) rotateY(-18deg)}50%{transform:translateY(-9px) rotateZ(5deg) rotateY(18deg)}}@keyframes loot-roll-impact{0%{transform:rotateY(0) rotateZ(0) scale(.94);filter:brightness(1)}45%{transform:rotateY(200deg) rotateZ(5deg) scale(1.09);filter:brightness(1.55)}100%{transform:rotateY(360deg) rotateZ(0) scale(1);filter:brightness(1)}}@keyframes loot-stage-enter{0%{opacity:0;transform:translateY(18px) scale(.68);filter:brightness(2.2) blur(3px)}48%{opacity:1;transform:translateY(-4px) scale(1.06);filter:brightness(1.35) blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}}@media(max-width:390px){.daily-sword-art.size-small{width:126px}.daily-sword-art.size-medium{width:148px}.daily-sword-art.size-large{width:174px}.gacha-loot-stage{min-height:204px;margin-inline:-7px}.gacha-loot-stage .loot-art{width:min(72%,196px)}.loot-stage-ground{bottom:19px}}@media(prefers-reduced-motion:reduce){.loot-art,.loot-art *,.gacha-pending .loot-art.is-reveal,.sword-overlay.rolling .daily-sword-art svg{animation:none;transition:none}.loot-spark{display:none}}

/* Real item condition: quality controls polish, persistence controls visible wear. */
.loot-wear-marks{position:absolute;z-index:5;inset:19% 21% 16%;opacity:0;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(118deg,transparent 0 31%,rgba(232,239,247,.58) 31.4% 32%,transparent 32.5% 100%),linear-gradient(64deg,transparent 0 49%,rgba(205,215,226,.42) 49.4% 49.9%,transparent 50.5% 100%),linear-gradient(142deg,transparent 0 67%,rgba(251,238,219,.36) 67.3% 67.8%,transparent 68.3% 100%);filter:drop-shadow(0 0 1px rgba(0,0,0,.7));transform:rotate(-3deg)}.loot-wear-marks:before,.loot-wear-marks:after{content:"";position:absolute;width:46%;height:1px;background:linear-gradient(90deg,transparent,rgba(238,243,248,.78),transparent);transform-origin:left center}.loot-wear-marks:before{left:24%;top:38%;transform:rotate(-24deg)}.loot-wear-marks:after{left:43%;top:59%;transform:rotate(31deg)}
.quality-rough .loot-highlight{opacity:.34;filter:none}.quality-rough .loot-metal{stroke-opacity:.72}.quality-standard .loot-highlight{opacity:.64}.quality-fine .loot-highlight{opacity:.9;filter:drop-shadow(0 0 3px rgba(255,255,255,.18))}.quality-fine .loot-metal{stroke-width:2.2}.quality-masterwork .loot-highlight{opacity:1;filter:drop-shadow(0 0 5px rgba(255,255,255,.36))}.quality-masterwork .loot-metal{stroke-width:2.45}.quality-masterwork .loot-gem{filter:drop-shadow(0 0 10px rgb(var(--loot-rgb)/.88))}.quality-masterwork:before{content:"";position:absolute;z-index:4;inset:15% 19%;background:linear-gradient(105deg,transparent 27%,rgba(255,255,255,.02) 36%,rgba(255,255,255,.22) 43%,rgba(255,255,255,.03) 50%,transparent 60%);mix-blend-mode:screen;opacity:.62;transform:translateX(-55%) skewX(-9deg);animation:loot-quality-sheen 4.8s ease-in-out infinite}
.wear-worn .loot-wear-marks{opacity:.2}.wear-worn .loot-rune-ring{opacity:.48}.wear-damaged .loot-wear-marks{opacity:.4}.wear-damaged svg{filter:brightness(.84) saturate(.82) drop-shadow(0 13px 12px rgba(0,0,0,.46))}.wear-damaged .loot-aura{animation:none;opacity:.43;filter:blur(10px) saturate(.72)}.wear-damaged .loot-rune-ring{opacity:.3}.wear-damaged .loot-ornament{opacity:.58}.wear-critical .loot-wear-marks{opacity:.64;mix-blend-mode:normal}.wear-critical svg{filter:brightness(.68) saturate(.58) contrast(1.08) drop-shadow(0 12px 11px rgba(0,0,0,.58))}.wear-critical .loot-aura{animation:none;opacity:.22;filter:blur(11px) saturate(.45)}.wear-critical .loot-rune-ring{opacity:.16;animation:none}.wear-critical .loot-ornament{opacity:.36}.wear-critical .loot-gem{filter:drop-shadow(0 0 3px rgb(var(--loot-rgb)/.44))}.wear-broken .loot-wear-marks{opacity:.78;mix-blend-mode:normal}.wear-broken svg{filter:brightness(.52) saturate(.35) contrast(1.12) drop-shadow(0 10px 10px rgba(0,0,0,.66))}.wear-broken .loot-aura{animation:none;opacity:.1;filter:blur(12px) saturate(.25)}.wear-broken .loot-rune-ring{opacity:.06;animation:none}.wear-broken .loot-ornament{opacity:.2}.wear-broken .loot-gem{opacity:.58;filter:none}.wear-broken .loot-spark,.wear-critical .loot-spark{display:none}
@keyframes loot-quality-sheen{0%,58%,100%{opacity:0;transform:translateX(-62%) skewX(-9deg)}68%{opacity:.72}82%{opacity:.28;transform:translateX(66%) skewX(-9deg)}}
@media(prefers-reduced-motion:reduce){.quality-masterwork:before{animation:none;opacity:.28;transform:none}.loot-wear-marks{transition:none}}

/* Forge evolution layer: +level changes visible runes/glow without changing base loot identity. */
.loot-forge-state{--forge-progress:0;--forge-level:0;position:relative;display:grid;place-items:center;width:100%;isolation:isolate;pointer-events:none}.loot-forge-state>.loot-art{grid-area:1/1;z-index:3;width:100%}.forge-aura-boost,.forge-rune-wheel,.forge-edge-light{position:absolute;grid-area:1/1;pointer-events:none}.forge-aura-boost{z-index:0;inset:17%;border-radius:50%;background:radial-gradient(circle,rgb(var(--loot-rgb,185 156 255)/.20),transparent 56%);filter:blur(12px);opacity:0;transform:scale(.88)}.forge-rune-wheel{z-index:1;width:84%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from -18deg,rgb(var(--loot-rgb,185 156 255)/.92) 0 calc(var(--forge-progress)*360deg),transparent calc(var(--forge-progress)*360deg) 360deg);-webkit-mask:repeating-conic-gradient(from -9deg,#000 0 22deg,transparent 22deg 36deg),radial-gradient(circle,transparent 0 63%,#000 64% 72%,transparent 73%);mask:repeating-conic-gradient(from -9deg,#000 0 22deg,transparent 22deg 36deg),radial-gradient(circle,transparent 0 63%,#000 64% 72%,transparent 73%);-webkit-mask-composite:source-in;mask-composite:intersect;filter:drop-shadow(0 0 7px rgb(var(--loot-rgb,185 156 255)/.54));opacity:0;transform:rotate(-7deg)}.forge-rune-wheel:after{content:"";position:absolute;inset:15%;border-radius:50%;border:1px dashed rgb(var(--loot-rgb,185 156 255)/.26);opacity:0}.forge-edge-light{z-index:4;inset:18% 22%;border-radius:46%;background:linear-gradient(105deg,transparent 23%,rgb(var(--loot-rgb,185 156 255)/.05) 33%,rgba(255,255,255,.32) 42%,rgb(var(--loot-rgb,185 156 255)/.07) 49%,transparent 59%);mix-blend-mode:screen;opacity:0;transform:translateX(-54%) skewX(-9deg)}.forge-level-mark{position:absolute;z-index:6;right:11%;top:13%;min-width:31px;height:27px;padding:0 7px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:900;letter-spacing:.02em;color:#fff5cc;background:linear-gradient(180deg,rgba(58,48,78,.95),rgba(23,23,38,.96));border:1px solid rgb(var(--loot-rgb,185 156 255)/.62);box-shadow:0 0 12px rgb(var(--loot-rgb,185 156 255)/.18),inset 0 1px rgba(255,255,255,.13)}
.forge-tempered .forge-rune-wheel{opacity:.28}.forge-tempered .forge-edge-light{opacity:.2}.forge-tempered>.loot-art svg{filter:drop-shadow(0 14px 12px rgba(0,0,0,.42)) drop-shadow(0 0 8px rgb(var(--loot-rgb,185 156 255)/.18))}.forge-etched .forge-rune-wheel{opacity:.5}.forge-etched .forge-rune-wheel:after{opacity:.38}.forge-etched .forge-aura-boost{opacity:.34;transform:scale(.96)}.forge-etched .forge-edge-light{opacity:.42;animation:forge-edge-sweep 4.8s ease-in-out infinite}.forge-etched>.loot-art .loot-rune-line,.forge-etched>.loot-art .loot-ornament{filter:drop-shadow(0 0 6px rgb(var(--loot-rgb)/.48))}.forge-radiant .forge-rune-wheel{opacity:.74;animation:forge-wheel-turn 15s linear infinite}.forge-radiant .forge-rune-wheel:after{opacity:.62;animation:forge-wheel-turn 10s linear infinite reverse}.forge-radiant .forge-aura-boost{opacity:.58;transform:scale(1.04);filter:blur(10px) saturate(1.2);will-change:transform;animation:forge-aura-breathe 2.8s ease-in-out infinite alternate}.forge-radiant .forge-edge-light{opacity:.7;animation:forge-edge-sweep 3.4s ease-in-out infinite}.forge-radiant>.loot-art .loot-rune-line,.forge-radiant>.loot-art .loot-ornament,.forge-radiant>.loot-art .loot-gem{filter:drop-shadow(0 0 8px rgb(var(--loot-rgb)/.62))}.forge-ascendant .forge-rune-wheel{width:89%;opacity:.94;filter:drop-shadow(0 0 10px rgb(var(--loot-rgb)/.72));animation:forge-wheel-turn 11s linear infinite}.forge-ascendant .forge-rune-wheel:after{inset:10%;opacity:.9;border-style:solid;box-shadow:0 0 18px rgb(var(--loot-rgb)/.22),inset 0 0 16px rgb(var(--loot-rgb)/.12);animation:forge-wheel-turn 7s linear infinite reverse}.forge-ascendant .forge-aura-boost{inset:10%;opacity:.88;transform:scale(1.08);background:radial-gradient(circle,rgb(var(--loot-rgb)/.34),rgb(var(--loot-rgb)/.11) 42%,transparent 68%);filter:blur(10px) saturate(1.3);will-change:transform;animation:forge-aura-breathe 2s ease-in-out infinite alternate}.forge-ascendant .forge-edge-light{inset:14% 18%;opacity:.92;animation:forge-edge-sweep 2.5s ease-in-out infinite}.forge-ascendant>.loot-art svg{filter:drop-shadow(0 14px 12px rgba(0,0,0,.4)) drop-shadow(0 0 22px rgb(var(--loot-rgb)/.38))}.forge-ascendant>.loot-art .loot-rune-line,.forge-ascendant>.loot-art .loot-ornament,.forge-ascendant>.loot-art .loot-gem{filter:drop-shadow(0 0 11px rgb(var(--loot-rgb)/.78))}.forge-ascendant .forge-level-mark{color:#fff7d8;border-color:rgba(255,225,146,.8);box-shadow:0 0 17px rgb(var(--loot-rgb)/.33),inset 0 1px rgba(255,255,255,.2)}
.condition-wear-worn .forge-aura-boost{opacity:.26}.condition-wear-worn .forge-rune-wheel{filter:drop-shadow(0 0 4px rgb(var(--loot-rgb)/.3))}.condition-wear-damaged .forge-aura-boost{opacity:.16;animation:none}.condition-wear-damaged .forge-rune-wheel{opacity:.22;animation:none}.condition-wear-damaged .forge-rune-wheel:after{opacity:.14;animation:none}.condition-wear-damaged .forge-edge-light{opacity:.18;animation:none}.condition-wear-critical .forge-aura-boost,.condition-wear-broken .forge-aura-boost{opacity:.05;animation:none}.condition-wear-critical .forge-rune-wheel,.condition-wear-broken .forge-rune-wheel{opacity:.1;animation:none;filter:none}.condition-wear-critical .forge-rune-wheel:after,.condition-wear-broken .forge-rune-wheel:after{opacity:.05;animation:none}.condition-wear-critical .forge-edge-light,.condition-wear-broken .forge-edge-light{display:none}.condition-wear-broken .forge-level-mark{opacity:.62;filter:saturate(.45)}
.equipment-loot-preview .loot-forge-state,.forge-mini-loot .loot-forge-state{max-width:190px;margin-inline:auto}.forge-loot-card .loot-forge-state{width:min(100%,240px);margin-inline:auto}.forge-mini-loot .forge-level-mark{right:8%;top:10%;transform:scale(.88)}

/* One-shot forge upgrade sequence: strike -> rune surge -> +N burst -> settled item. */
.forge-hammer-strike,.forge-impact-flash,.forge-rune-surge,.forge-level-burst{position:absolute;grid-area:1/1;pointer-events:none;opacity:0}.forge-hammer-strike{z-index:8;left:50%;top:3%;width:16%;height:58%;transform-origin:50% 100%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,238,184,.94) 58%,rgb(var(--loot-rgb,185 156 255)/.82));clip-path:polygon(44% 0,58% 0,66% 76%,100% 90%,56% 100%,8% 90%,36% 76%);filter:drop-shadow(0 0 10px rgba(255,231,168,.8));mix-blend-mode:screen}.forge-impact-flash{z-index:7;inset:10%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.98) 0 8%,rgba(255,228,161,.78) 16%,rgb(var(--loot-rgb,185 156 255)/.38) 31%,transparent 68%);filter:blur(3px);mix-blend-mode:screen}.forge-rune-surge{z-index:5;width:92%;aspect-ratio:1;border-radius:50%;border:2px solid rgb(var(--loot-rgb,185 156 255)/.78);box-shadow:0 0 18px rgb(var(--loot-rgb,185 156 255)/.48),inset 0 0 18px rgb(var(--loot-rgb,185 156 255)/.22)}.forge-rune-surge i{position:absolute;left:50%;top:50%;width:6px;height:42%;margin-left:-3px;margin-top:-42%;transform-origin:50% 100%;border-radius:999px;background:linear-gradient(180deg,transparent,rgb(var(--loot-rgb,185 156 255)/.92));box-shadow:0 0 8px rgb(var(--loot-rgb,185 156 255)/.66)}.forge-rune-surge i:nth-child(2){transform:rotate(120deg)}.forge-rune-surge i:nth-child(3){transform:rotate(240deg)}.forge-level-burst{z-index:10;left:50%;top:45%;min-width:68px;padding:5px 14px;border-radius:999px;transform:translate(-50%,-50%) scale(.62);text-align:center;font-weight:950;font-size:24px;line-height:1;color:#fff8d9;text-shadow:0 1px 2px #000,0 0 14px rgb(var(--loot-rgb,185 156 255)/.88);background:linear-gradient(180deg,rgba(255,245,199,.2),rgba(44,35,68,.55));border:1px solid rgba(255,230,155,.7);box-shadow:0 0 24px rgb(var(--loot-rgb,185 156 255)/.35),inset 0 1px rgba(255,255,255,.22)}
.is-forge-impact>.loot-art{animation:forge-item-settle 1.2s cubic-bezier(.18,.82,.27,1) both}.is-forge-impact .forge-hammer-strike{animation:forge-hammer-impact .56s cubic-bezier(.18,.88,.22,1) both}.is-forge-impact .forge-impact-flash{animation:forge-impact-flare .8s .32s ease-out both}.is-forge-impact .forge-rune-surge{animation:forge-rune-surge 1.05s .4s cubic-bezier(.14,.8,.25,1) both}.is-forge-impact .forge-level-burst{animation:forge-level-burst 1.18s .62s cubic-bezier(.15,.82,.27,1) both}.is-forge-impact .forge-level-mark{animation:forge-mark-arrive .7s 1.08s cubic-bezier(.16,.84,.3,1) both}

@keyframes forge-wheel-turn{to{transform:rotate(353deg)}}@keyframes forge-aura-breathe{from{transform:scale(.96)}to{transform:scale(1.1)}}@keyframes forge-edge-sweep{0%,52%,100%{opacity:0;transform:translateX(-58%) skewX(-9deg)}64%{opacity:.9}82%{opacity:.28;transform:translateX(68%) skewX(-9deg)}}
@keyframes forge-hammer-impact{0%{opacity:0;transform:translate(-50%,-24%) rotate(-28deg) scale(.7)}24%{opacity:.85}62%{opacity:1;transform:translate(-50%,22%) rotate(7deg) scale(1.08)}100%{opacity:0;transform:translate(-50%,30%) rotate(9deg) scale(.92)}}@keyframes forge-impact-flare{0%{opacity:0;transform:scale(.25)}24%{opacity:1;transform:scale(1.02)}100%{opacity:0;transform:scale(1.42)}}@keyframes forge-rune-surge{0%{opacity:0;transform:scale(.42) rotate(-38deg)}38%{opacity:.9}100%{opacity:0;transform:scale(1.16) rotate(42deg)}}@keyframes forge-level-burst{0%{opacity:0;transform:translate(-50%,-44%) scale(.52)}28%{opacity:1;transform:translate(-50%,-52%) scale(1.16)}62%{opacity:1;transform:translate(-50%,-58%) scale(1)}100%{opacity:0;transform:translate(-50%,-75%) scale(.9)}}@keyframes forge-item-settle{0%,34%{transform:scale(.9);filter:brightness(.78)}50%{transform:scale(1.08);filter:brightness(1.7)}72%{transform:scale(.98);filter:brightness(1.16)}100%{transform:scale(1);filter:brightness(1)}}@keyframes forge-mark-arrive{0%{opacity:0;transform:translateY(-7px) scale(.7)}55%{opacity:1;transform:translateY(2px) scale(1.12)}100%{opacity:1;transform:none}}
@media(max-width:390px){.forge-level-mark{right:7%;top:10%;min-width:28px;height:24px;font-size:11px}.equipment-loot-preview .loot-forge-state,.forge-mini-loot .loot-forge-state{max-width:168px}.forge-loot-card .loot-forge-state{width:min(100%,206px)}.forge-level-burst{font-size:20px;min-width:58px;padding:4px 11px}.forge-hammer-strike{width:14%;height:52%}}
@media(prefers-reduced-motion:reduce){.forge-rune-wheel,.forge-rune-wheel:after,.forge-aura-boost,.forge-edge-light,.is-forge-impact>.loot-art,.is-forge-impact .forge-hammer-strike,.is-forge-impact .forge-impact-flash,.is-forge-impact .forge-rune-surge,.is-forge-impact .forge-level-burst,.is-forge-impact .forge-level-mark{animation:none!important}.forge-edge-light{opacity:.22;transform:none}.forge-radiant .forge-rune-wheel,.forge-ascendant .forge-rune-wheel{transform:rotate(-7deg)}.forge-hammer-strike,.forge-impact-flash,.forge-rune-surge,.forge-level-burst{display:none}.is-forge-impact .forge-level-mark{opacity:1;transform:none}}

/* One-shot, type-specific forge impact layer. Kept separate from persistent +level visuals. */
.forge-type-effect{position:absolute;grid-area:1/1;z-index:6;inset:10%;pointer-events:none;opacity:0;mix-blend-mode:screen}

/* Swords / daggers: light runs along the blade axis before the new +level settles. */
.forge-blade-charge{inset:11% 27% 12%}.forge-blade-charge i{position:absolute;left:50%;top:4%;width:5px;height:82%;margin-left:-2.5px;border-radius:999px;background:linear-gradient(180deg,transparent 0 4%,rgba(255,255,255,.98) 28%,rgb(var(--loot-rgb,185 156 255)/.92) 56%,transparent 100%);box-shadow:0 0 8px rgba(255,255,255,.72),0 0 17px rgb(var(--loot-rgb,185 156 255)/.72);transform:translateY(-42%) scaleY(.18);opacity:0}.forge-blade-charge i:nth-child(2){width:2px;margin-left:7px;filter:blur(.4px);opacity:0}
.is-forge-impact.forge-impact-blade .forge-blade-charge{opacity:1}.is-forge-impact.forge-impact-blade .forge-blade-charge i:first-child{animation:forge-blade-run .86s .42s cubic-bezier(.18,.82,.28,1) both}.is-forge-impact.forge-impact-blade .forge-blade-charge i:nth-child(2){animation:forge-blade-run .7s .58s cubic-bezier(.18,.82,.28,1) both}.is-forge-impact.forge-impact-blade>.loot-art .loot-highlight{animation:forge-blade-highlight .92s .45s ease-out both}

/* Shields: two concentric impact waves travel across the face. */
.forge-shield-wave{inset:18%;display:grid;place-items:center}.forge-shield-wave i{grid-area:1/1;width:48%;aspect-ratio:1;border:2px solid rgba(255,255,255,.8);border-radius:50%;box-shadow:0 0 12px rgb(var(--loot-rgb,185 156 255)/.72),inset 0 0 10px rgb(var(--loot-rgb,185 156 255)/.32);transform:scale(.18);opacity:0}.forge-shield-wave i:nth-child(2){border-style:dashed;border-color:rgb(var(--loot-rgb,185 156 255)/.78)}
.is-forge-impact.forge-impact-shield .forge-shield-wave{opacity:1}.is-forge-impact.forge-impact-shield .forge-shield-wave i:first-child{animation:forge-shield-wave .82s .4s ease-out both}.is-forge-impact.forge-impact-shield .forge-shield-wave i:nth-child(2){animation:forge-shield-wave .88s .55s ease-out both}.is-forge-impact.forge-impact-shield>.loot-art svg{animation:forge-shield-brace .78s .34s cubic-bezier(.16,.82,.3,1) both}

/* Armor family: four luminous plates lock into the silhouette from the edges. */
.forge-plate-assembly{inset:16% 18%}.forge-plate-assembly i{position:absolute;width:34%;height:27%;border:1px solid rgb(var(--loot-rgb,185 156 255)/.78);background:linear-gradient(135deg,rgba(255,255,255,.3),rgb(var(--loot-rgb,185 156 255)/.18),transparent 72%);clip-path:polygon(12% 0,100% 14%,84% 100%,0 84%);box-shadow:0 0 13px rgb(var(--loot-rgb,185 156 255)/.38);opacity:0}.forge-plate-assembly i:nth-child(1){left:0;top:5%;--plate-x:-54%;--plate-y:-24%;--plate-r:-12deg}.forge-plate-assembly i:nth-child(2){right:0;top:5%;--plate-x:54%;--plate-y:-24%;--plate-r:12deg;transform:scaleX(-1)}.forge-plate-assembly i:nth-child(3){left:7%;bottom:4%;--plate-x:-48%;--plate-y:32%;--plate-r:9deg}.forge-plate-assembly i:nth-child(4){right:7%;bottom:4%;--plate-x:48%;--plate-y:32%;--plate-r:-9deg;transform:scaleX(-1)}
.is-forge-impact.forge-impact-plates .forge-plate-assembly{opacity:1}.is-forge-impact.forge-impact-plates .forge-plate-assembly i{animation:forge-plate-lock .72s var(--plate-delay,.42s) cubic-bezier(.15,.86,.25,1) both}.is-forge-impact.forge-impact-plates .forge-plate-assembly i:nth-child(2){--plate-delay:.49s}.is-forge-impact.forge-impact-plates .forge-plate-assembly i:nth-child(3){--plate-delay:.56s}.is-forge-impact.forge-impact-plates .forge-plate-assembly i:nth-child(4){--plate-delay:.63s}

/* Rings / amulets / staves: orbiting sparks collapse into the core. */
.forge-arcane-orbit{inset:14%;display:grid;place-items:center}.forge-arcane-orbit i{grid-area:1/1;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 9px rgba(255,255,255,.9),0 0 18px rgb(var(--loot-rgb,185 156 255)/.9);opacity:0;--orbit-r:62px}.forge-arcane-orbit i:nth-child(2){--orbit-start:120deg;--orbit-r:53px}.forge-arcane-orbit i:nth-child(3){--orbit-start:240deg;--orbit-r:70px}
.is-forge-impact.forge-impact-arcane .forge-arcane-orbit{opacity:1}.is-forge-impact.forge-impact-arcane .forge-arcane-orbit i{animation:forge-arcane-collapse 1.08s .35s cubic-bezier(.14,.78,.25,1) both}.is-forge-impact.forge-impact-arcane .forge-arcane-orbit i:nth-child(2){animation-delay:.43s}.is-forge-impact.forge-impact-arcane .forge-arcane-orbit i:nth-child(3){animation-delay:.51s}.is-forge-impact.forge-impact-arcane>.loot-art .loot-gem,.is-forge-impact.forge-impact-arcane>.loot-art .loot-rune-ring-svg{animation:forge-arcane-core .9s .58s ease-out both}

/* Hammer / bow / crossbow: broad horizontal shock bars sell a heavier impact. */
.forge-heavy-shock{inset:22% 8%;display:grid;place-items:center}.forge-heavy-shock i{grid-area:1/1;width:80%;height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,rgb(var(--loot-rgb,185 156 255)/.86),rgba(255,255,255,.96),rgb(var(--loot-rgb,185 156 255)/.86),transparent);box-shadow:0 0 12px rgb(var(--loot-rgb,185 156 255)/.66);transform:scaleX(.12);opacity:0}.forge-heavy-shock i:nth-child(2){width:64%;transform:translateY(-22px) scaleX(.12)}.forge-heavy-shock i:nth-child(3){width:64%;transform:translateY(22px) scaleX(.12)}
.is-forge-impact.forge-impact-heavy .forge-heavy-shock{opacity:1}.is-forge-impact.forge-impact-heavy .forge-heavy-shock i:first-child{animation:forge-heavy-bar .68s .42s ease-out both}.is-forge-impact.forge-impact-heavy .forge-heavy-shock i:nth-child(2){animation:forge-heavy-bar-up .76s .5s ease-out both}.is-forge-impact.forge-impact-heavy .forge-heavy-shock i:nth-child(3){animation:forge-heavy-bar-down .76s .5s ease-out both}.is-forge-impact.forge-impact-heavy>.loot-art{animation:forge-heavy-settle 1.05s .22s cubic-bezier(.16,.82,.3,1) both}

@keyframes forge-blade-run{0%{opacity:0;transform:translateY(-42%) scaleY(.18)}22%{opacity:1}72%{opacity:.94;transform:translateY(19%) scaleY(1.02)}100%{opacity:0;transform:translateY(44%) scaleY(.35)}}
@keyframes forge-blade-highlight{0%,100%{filter:none}42%{filter:drop-shadow(0 0 7px rgba(255,255,255,.94)) drop-shadow(0 0 13px rgb(var(--loot-rgb)/.82))}}
@keyframes forge-shield-wave{0%{opacity:0;transform:scale(.18)}24%{opacity:1}100%{opacity:0;transform:scale(1.78)}}
@keyframes forge-shield-brace{0%,100%{transform:scale(1)}38%{transform:scale(.94)}62%{transform:scale(1.055)}}
@keyframes forge-plate-lock{0%{opacity:0;transform:translate(var(--plate-x),var(--plate-y)) rotate(var(--plate-r)) scale(.72)}54%{opacity:.9}82%{opacity:.72;transform:translate(0,0) rotate(0) scale(1.03)}100%{opacity:0;transform:translate(0,0) rotate(0) scale(.98)}}
@keyframes forge-arcane-collapse{0%{opacity:0;transform:rotate(var(--orbit-start,0deg)) translateX(var(--orbit-r)) scale(.55)}24%{opacity:1}70%{opacity:1;transform:rotate(calc(var(--orbit-start,0deg) + 245deg)) translateX(calc(var(--orbit-r)*.48)) scale(1.08)}100%{opacity:0;transform:rotate(calc(var(--orbit-start,0deg) + 430deg)) translateX(2px) scale(.25)}}
@keyframes forge-arcane-core{0%,100%{filter:drop-shadow(0 0 7px rgb(var(--loot-rgb)/.55))}55%{filter:drop-shadow(0 0 17px rgba(255,255,255,.95)) drop-shadow(0 0 24px rgb(var(--loot-rgb)/.92))}}
@keyframes forge-heavy-bar{0%{opacity:0;transform:scaleX(.12)}32%{opacity:1}100%{opacity:0;transform:scaleX(1.18)}}
@keyframes forge-heavy-bar-up{0%{opacity:0;transform:translateY(-8px) scaleX(.12)}32%{opacity:.9}100%{opacity:0;transform:translateY(-30px) scaleX(1)}}
@keyframes forge-heavy-bar-down{0%{opacity:0;transform:translateY(8px) scaleX(.12)}32%{opacity:.9}100%{opacity:0;transform:translateY(30px) scaleX(1)}}
@keyframes forge-heavy-settle{0%,100%{transform:translateY(0) scale(1)}32%{transform:translateY(7px) scale(.96)}58%{transform:translateY(-4px) scale(1.045)}78%{transform:translateY(1px) scale(.99)}}

@media(max-width:390px){.forge-arcane-orbit i{--orbit-r:48px}.forge-arcane-orbit i:nth-child(2){--orbit-r:42px}.forge-arcane-orbit i:nth-child(3){--orbit-r:54px}.forge-plate-assembly{inset:18% 17%}.forge-heavy-shock{inset:24% 7%}}
@media(prefers-reduced-motion:reduce){.forge-type-effect,.forge-type-effect *,.is-forge-impact.forge-impact-blade>.loot-art .loot-highlight,.is-forge-impact.forge-impact-shield>.loot-art svg,.is-forge-impact.forge-impact-arcane>.loot-art .loot-gem,.is-forge-impact.forge-impact-arcane>.loot-art .loot-rune-ring-svg,.is-forge-impact.forge-impact-heavy>.loot-art{animation:none!important}.forge-type-effect{display:none}}

/* Rare forge milestones: +5 breakthrough and max-level ascendant presentation. */
.forge-milestone{position:absolute;grid-area:1/1;z-index:11;inset:3%;pointer-events:none;opacity:0;display:grid;place-items:center;mix-blend-mode:screen}.forge-milestone b{position:absolute;left:50%;bottom:8%;transform:translateX(-50%) scale(.82);white-space:nowrap;font-size:13px;font-weight:950;letter-spacing:.14em;color:#fff8dc;text-shadow:0 1px 2px #000,0 0 14px rgb(var(--loot-rgb,185 156 255)/.8);opacity:0}.forge-milestone-ring,.forge-milestone-cross,.forge-milestone-crown,.forge-milestone-halo,.forge-milestone-beam{position:absolute;pointer-events:none}

/* +5: a restrained breakthrough burst, clearly stronger than a normal upgrade. */
.forge-milestone-breakthrough .forge-milestone-ring{width:74%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,234,174,.92);box-shadow:0 0 19px rgba(255,223,145,.5),inset 0 0 15px rgb(var(--loot-rgb,185 156 255)/.25);transform:scale(.28);opacity:0}.forge-milestone-breakthrough .forge-milestone-ring:before,.forge-milestone-breakthrough .forge-milestone-ring:after{content:"";position:absolute;inset:11%;border-radius:50%;border:1px dashed rgb(var(--loot-rgb,185 156 255)/.62)}.forge-milestone-breakthrough .forge-milestone-ring:after{inset:25%;border-style:solid;border-color:rgba(255,255,255,.52)}.forge-milestone-breakthrough .forge-milestone-cross{width:74%;height:74%;background:linear-gradient(90deg,transparent 0 47%,rgba(255,255,255,.86) 49%,rgba(255,255,255,.86) 51%,transparent 53%),linear-gradient(0deg,transparent 0 47%,rgb(var(--loot-rgb,185 156 255)/.82) 49%,rgb(var(--loot-rgb,185 156 255)/.82) 51%,transparent 53%);filter:drop-shadow(0 0 10px rgba(255,236,177,.75));transform:scale(.35) rotate(18deg);opacity:0}.is-forge-milestone.forge-milestone-breakthrough-state .forge-milestone-breakthrough{opacity:1}.is-forge-milestone.forge-milestone-breakthrough-state .forge-milestone-ring{animation:forge-breakthrough-ring 1.42s .66s cubic-bezier(.15,.82,.24,1) both}.is-forge-milestone.forge-milestone-breakthrough-state .forge-milestone-cross{animation:forge-breakthrough-cross 1.08s .78s ease-out both}.is-forge-milestone.forge-milestone-breakthrough-state .forge-milestone-breakthrough b{animation:forge-milestone-label 1.3s 1.05s cubic-bezier(.16,.82,.27,1) both}.is-forge-milestone.forge-milestone-breakthrough-state>.loot-art{animation:forge-breakthrough-settle 1.5s .48s cubic-bezier(.16,.84,.27,1) both}

/* Max level: ascendant scene. Larger halo, vertical beam and crown-like sigil. */
.forge-milestone-ascendant{inset:-3%;background:radial-gradient(circle at 50% 48%,rgba(255,245,196,.12),rgb(var(--loot-rgb,185 156 255)/.05) 38%,transparent 68%)}.forge-milestone-ascendant .forge-milestone-halo{left:50%;top:50%;width:84%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,235,171,.88);box-shadow:0 0 28px rgba(255,223,142,.45),inset 0 0 22px rgb(var(--loot-rgb,185 156 255)/.28);transform:translate(-50%,-50%) scale(.32);opacity:0}.forge-milestone-ascendant .forge-milestone-halo.halo-b{width:64%;border-style:dashed;border-color:rgb(var(--loot-rgb,185 156 255)/.82);box-shadow:0 0 22px rgb(var(--loot-rgb,185 156 255)/.38)}.forge-milestone-ascendant .forge-milestone-beam{left:50%;top:-7%;width:24%;height:108%;transform:translateX(-50%) scaleX(.28);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),rgba(255,245,196,.64),rgba(255,255,255,.08),transparent);filter:blur(2px) drop-shadow(0 0 14px rgba(255,235,177,.8));opacity:0}.forge-milestone-ascendant .forge-milestone-crown{left:50%;top:11%;width:70px;height:46px;transform:translateX(-50%) translateY(-18px) scale(.62);clip-path:polygon(0 82%,10% 25%,35% 60%,50% 0,65% 60%,90% 25%,100% 82%,78% 100%,22% 100%);background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,226,146,.88) 48%,rgb(var(--loot-rgb,185 156 255)/.75));box-shadow:0 0 19px rgba(255,228,154,.78);opacity:0}.is-forge-milestone.forge-milestone-ascendant-state .forge-milestone-ascendant{opacity:1;animation:forge-ascendant-scene 2.35s .52s ease-out both}.is-forge-milestone.forge-milestone-ascendant-state .forge-milestone-halo.halo-a{animation:forge-ascendant-halo 2.15s .58s cubic-bezier(.15,.82,.24,1) both}.is-forge-milestone.forge-milestone-ascendant-state .forge-milestone-halo.halo-b{animation:forge-ascendant-halo-inner 2.1s .7s cubic-bezier(.15,.82,.24,1) both}.is-forge-milestone.forge-milestone-ascendant-state .forge-milestone-beam{animation:forge-ascendant-beam 2.3s .5s ease-out both}.is-forge-milestone.forge-milestone-ascendant-state .forge-milestone-crown{animation:forge-ascendant-crown 1.45s 1.08s cubic-bezier(.16,.84,.28,1) both}.is-forge-milestone.forge-milestone-ascendant-state .forge-milestone-ascendant b{animation:forge-milestone-label 1.55s 1.26s cubic-bezier(.16,.82,.27,1) both}.is-forge-milestone.forge-milestone-ascendant-state>.loot-art{animation:forge-ascendant-settle 2.15s .54s cubic-bezier(.16,.84,.27,1) both}.is-forge-milestone.forge-milestone-ascendant-state .forge-rune-wheel{filter:drop-shadow(0 0 14px rgb(var(--loot-rgb)/.86)) drop-shadow(0 0 22px rgba(255,226,144,.35))}

@keyframes forge-breakthrough-ring{0%{opacity:0;transform:scale(.28) rotate(-20deg)}25%{opacity:1}68%{opacity:.9;transform:scale(1.03) rotate(18deg)}100%{opacity:0;transform:scale(1.28) rotate(28deg)}}
@keyframes forge-breakthrough-cross{0%{opacity:0;transform:scale(.35) rotate(18deg)}30%{opacity:1}72%{opacity:.9;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(1.16) rotate(-8deg)}}
@keyframes forge-breakthrough-settle{0%,28%{transform:scale(.92);filter:brightness(.9)}52%{transform:scale(1.09);filter:brightness(1.72)}76%{transform:scale(.985);filter:brightness(1.16)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes forge-ascendant-scene{0%{opacity:0}15%{opacity:1}82%{opacity:.95}100%{opacity:0}}
@keyframes forge-ascendant-halo{0%{opacity:0;transform:translate(-50%,-50%) scale(.32) rotate(-30deg)}28%{opacity:1}72%{opacity:.92;transform:translate(-50%,-50%) scale(1.02) rotate(120deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.24) rotate(170deg)}}
@keyframes forge-ascendant-halo-inner{0%{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(45deg)}30%{opacity:.95}78%{opacity:.9;transform:translate(-50%,-50%) scale(1) rotate(-150deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.13) rotate(-210deg)}}
@keyframes forge-ascendant-beam{0%{opacity:0;transform:translateX(-50%) scaleX(.18)}16%{opacity:.94;transform:translateX(-50%) scaleX(1.05)}70%{opacity:.72}100%{opacity:0;transform:translateX(-50%) scaleX(.62)}}
@keyframes forge-ascendant-crown{0%{opacity:0;transform:translateX(-50%) translateY(-18px) scale(.62)}42%{opacity:1;transform:translateX(-50%) translateY(4px) scale(1.12)}72%{opacity:1;transform:translateX(-50%) translateY(0) scale(.98)}100%{opacity:0;transform:translateX(-50%) translateY(-5px) scale(1.02)}}
@keyframes forge-ascendant-settle{0%,18%{transform:scale(.86);filter:brightness(.78) saturate(.82)}44%{transform:scale(1.12);filter:brightness(2) saturate(1.35)}68%{transform:scale(.97);filter:brightness(1.28) saturate(1.15)}100%{transform:scale(1);filter:brightness(1) saturate(1)}}
@keyframes forge-milestone-label{0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.72);letter-spacing:.08em}36%{opacity:1;transform:translateX(-50%) translateY(-2px) scale(1.08);letter-spacing:.16em}72%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);letter-spacing:.14em}100%{opacity:0;transform:translateX(-50%) translateY(-7px) scale(.96)}}

@media(max-width:390px){.forge-milestone b{bottom:6%;font-size:11px;letter-spacing:.1em}.forge-milestone-ascendant .forge-milestone-crown{top:9%;width:58px;height:39px}.forge-milestone-ascendant .forge-milestone-halo{width:78%}.forge-milestone-ascendant .forge-milestone-halo.halo-b{width:58%}}
@media(prefers-reduced-motion:reduce){.forge-milestone,.forge-milestone *,.is-forge-milestone.forge-milestone-breakthrough-state>.loot-art,.is-forge-milestone.forge-milestone-ascendant-state>.loot-art{animation:none!important}.forge-milestone{display:none}}

/* Lightweight loot previews in persistent equipment lists. */
.equipment-loot-preview{position:relative;overflow:hidden;height:112px;margin:9px 0 3px;border:1px solid rgba(255,255,255,.055);border-radius:14px;background:radial-gradient(circle at 50% 45%,rgb(var(--screen-accent-rgb,188 156 255)/.08),transparent 55%),rgba(0,0,0,.10)}.equipment-loot-preview .loot-art{width:96px;height:112px;aspect-ratio:auto}.equipment-loot-preview .loot-rune-ring,.equipment-loot-preview .loot-spark,.forge-mini-loot .loot-rune-ring,.forge-mini-loot .loot-spark{display:none}.equipment-loot-preview .loot-aura,.forge-mini-loot .loot-aura{animation:none;opacity:.34;filter:blur(6px)}.equipment-loot-preview .loot-art svg,.forge-mini-loot .loot-art svg{animation:none;filter:drop-shadow(0 7px 8px rgba(0,0,0,.34)) drop-shadow(0 0 7px rgb(var(--loot-rgb)/.10))}.forge-mini-loot{height:82px;display:grid;place-items:center;margin:6px 0 -2px;overflow:hidden}.forge-mini-loot .loot-art{width:72px;height:88px;aspect-ratio:auto}.forge-loot-reveal{position:absolute;inset:0;z-index:90;display:grid;place-items:center;padding:18px;opacity:0;pointer-events:none;transition:opacity .22s ease}.forge-loot-reveal.visible{opacity:1}.forge-loot-reveal.leaving{opacity:0}.forge-loot-backdrop{position:absolute;inset:0;background:rgba(4,5,12,.76);backdrop-filter:blur(10px)}.forge-loot-card{position:relative;z-index:1;width:min(92%,340px);min-height:360px;padding:16px;border:1px solid rgb(var(--screen-accent-rgb,224 174 101)/.24);border-radius:22px;background:linear-gradient(155deg,rgb(var(--screen-accent-rgb,224 174 101)/.10),rgba(17,19,31,.96));box-shadow:0 28px 70px rgba(0,0,0,.48);display:grid;justify-items:center;align-content:center;text-align:center}.forge-loot-card>small{font-size: 11px;letter-spacing:.14em;color:#cdbb9a;font-weight:850}.forge-loot-card>.loot-art{width:min(72%,220px);margin:4px 0}.forge-loot-card>strong{font-size:15px;color:#f2ede4}.forge-loot-card>span{margin-top:3px;font-size: 11px;color:var(--muted)}@media(max-width:390px){.equipment-loot-preview{height:96px}.equipment-loot-preview .loot-art{width:82px;height:98px}.forge-loot-card{min-height:318px}.forge-loot-card>.loot-art{width:min(68%,190px)}}@media(prefers-reduced-motion:reduce){.forge-loot-reveal{transition:none}.forge-loot-card .loot-art,.forge-loot-card .loot-art *{animation:none!important;transition:none!important}}

/* Visual paper-doll loadout. Existing .loadout-slot/data-slot contract is preserved for equip transfer targeting. */
.paper-doll-loadout{display:block!important}
.paper-doll-stage{position:relative;min-height:430px;border:1px solid rgba(255,255,255,.08);border-radius:22px;overflow:hidden;background:radial-gradient(circle at 50% 43%,rgba(151,126,221,.11),transparent 31%),linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.014));isolation:isolate}
.paper-doll-stage::before{content:"";position:absolute;inset:9% 24%;border:1px solid rgba(190,174,242,.08);border-radius:48%;box-shadow:0 0 45px rgba(134,111,206,.06),inset 0 0 34px rgba(134,111,206,.035);pointer-events:none}
.paper-doll-circuit{position:absolute;inset:0;pointer-events:none;opacity:.32;background:linear-gradient(90deg,transparent 49.85%,rgba(201,192,239,.14) 50%,transparent 50.15%),linear-gradient(0deg,transparent 49.85%,rgba(201,192,239,.07) 50%,transparent 50.15%)}
.paper-doll-circuit::before,.paper-doll-circuit::after{content:"";position:absolute;left:50%;top:43%;border:1px dashed rgba(194,179,239,.12);border-radius:50%;transform:translate(-50%,-50%)}
.paper-doll-circuit::before{width:250px;height:250px}.paper-doll-circuit::after{width:170px;height:170px}
.paper-doll-figure{position:absolute;z-index:1;left:50%;top:47%;width:150px;height:300px;transform:translate(-50%,-50%);filter:drop-shadow(0 0 20px rgba(165,140,235,.1));pointer-events:none}
.paper-doll-figure svg{display:block;width:100%;height:100%}
.paper-doll-core{position:absolute;left:50%;top:48%;width:24px;height:24px;border:1px solid rgba(231,221,255,.2);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 18px rgba(179,153,245,.16);animation:paper-doll-core 3.4s ease-in-out infinite}
.paper-doll-slot{position:absolute!important;z-index:3;left:var(--slot-x);top:var(--slot-y);width:78px;min-width:0;height:78px;padding:5px!important;transform:translate(-50%,-50%);display:block!important;border-radius:15px!important;background:linear-gradient(145deg,rgba(17,19,34,.94),rgba(31,28,49,.86))!important;box-shadow:0 8px 22px rgba(0,0,0,.18);overflow:visible!important;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.paper-doll-slot::after{content:"";position:absolute;inset:6px;border:1px solid rgba(255,255,255,.045);border-radius:11px;pointer-events:none}
.paper-doll-slot.empty{border-style:dashed!important;border-color:rgba(255,255,255,.08)!important;background:rgba(18,20,34,.62)!important;box-shadow:none}
.paper-doll-slot.occupied{border-color:rgba(185,159,245,.24)!important;box-shadow:0 8px 22px rgba(0,0,0,.2),0 0 18px rgba(157,129,230,.08),inset 0 0 18px rgba(157,129,230,.025)}
.paper-doll-slot-art{position:absolute;inset:4px;display:grid;place-items:center;overflow:hidden;border-radius:11px}
.paper-doll-slot-art>.loot-forge-state{width:100%;height:100%;transform:scale(.79)}
.paper-doll-slot-art .loot-art{width:100%;height:100%}
.paper-doll-slot-art .forge-level-mark{font-size:8px;right:1px;bottom:1px}
.paper-doll-slot-art .forge-rune-wheel,.paper-doll-slot-art .forge-aura-boost{opacity:.48}
.paper-doll-empty-rune{font-size:25px;color:rgba(208,199,232,.18);text-shadow:0 0 15px rgba(176,156,226,.08)}
.paper-doll-slot-copy{position:absolute;z-index:5;left:50%;top:calc(100% + 5px);width:92px;display:grid;gap:1px;transform:translateX(-50%);text-align:center;pointer-events:none}
.paper-doll-slot-copy small{color:#8f8a9e!important;font-size:7px!important;line-height:1.1;text-transform:uppercase;letter-spacing:.045em}
.paper-doll-slot-copy strong{font-size:8px!important;line-height:1.1;color:#d5caef}
.paper-doll-slot-copy>span{display:block!important;font-size:7px!important;line-height:1.15;color:#a8a3b5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paper-doll-slot.empty .paper-doll-slot-copy strong,.paper-doll-slot.empty .paper-doll-slot-copy>span{display:none!important}
.paper-doll-caption{position:absolute;z-index:2;left:50%;top:72%;display:grid;place-items:center;gap:1px;transform:translateX(-50%);pointer-events:none;text-align:center}
.paper-doll-caption strong{font-size:22px;color:#ded5f6;text-shadow:0 0 18px rgba(179,153,245,.2)}
.paper-doll-caption span{font-size:7px;text-transform:uppercase;letter-spacing:.09em;color:#858093}
.paper-doll-slot.equipment-transfer-target{transform:translate(-50%,-50%) scale(1.08);border-color:rgba(166,244,218,.52)!important;box-shadow:0 0 24px rgba(102,223,187,.22),inset 0 0 22px rgba(102,223,187,.08)}
@keyframes paper-doll-core{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
@media(min-width:680px){.paper-doll-stage{min-height:470px}.paper-doll-figure{width:168px;height:330px}.paper-doll-slot{width:84px;height:84px}.paper-doll-slot-copy{width:104px}.paper-doll-circuit::before{width:286px;height:286px}.paper-doll-circuit::after{width:196px;height:196px}}
@media(max-width:390px){.paper-doll-stage{min-height:392px;border-radius:18px}.paper-doll-stage::before{inset:10% 21%}.paper-doll-figure{width:120px;height:254px;top:48%}.paper-doll-slot{width:62px;height:62px;padding:3px!important;border-radius:12px!important}.paper-doll-slot-art{inset:2px}.paper-doll-slot-copy{top:calc(100% + 3px);width:72px}.paper-doll-slot-copy small{font-size:6px!important}.paper-doll-slot-copy strong,.paper-doll-slot-copy>span{font-size:6px!important}.paper-doll-caption{top:71%}.paper-doll-caption strong{font-size:18px}.paper-doll-circuit::before{width:205px;height:205px}.paper-doll-circuit::after{width:138px;height:138px}}
@media(max-width:340px){.paper-doll-stage{min-height:370px}.paper-doll-slot{width:56px;height:56px}.paper-doll-slot-copy{width:64px}.paper-doll-figure{width:108px;height:238px}.paper-doll-caption{top:70%}}
@media(prefers-reduced-motion:reduce){.paper-doll-core{animation:none}.paper-doll-slot{transition:none}}
/* Portrait mode (prototype "Мой персонаж"): painted class portrait in the middle, gold-framed slot columns at the sides. */
.paper-doll-stage.has-portrait{min-height:480px;border-color:#6b5326;border-radius:8px;background:radial-gradient(ellipse 60% 50% at 50% 55%,rgba(216,179,106,.12),transparent 70%),linear-gradient(180deg,#1a1520,#0c0a10)}
.paper-doll-stage.has-portrait::before,.paper-doll-stage.has-portrait .paper-doll-circuit,.paper-doll-stage.has-portrait .paper-doll-figure,.paper-doll-stage.has-portrait .paper-doll-caption{display:none}
.paper-doll-portrait{position:absolute;z-index:1;left:20%;right:20%;top:2%;bottom:0;background:var(--portrait) center 12%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,#000 80%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,#000 80%,transparent);mask-composite:intersect;animation:paper-doll-breathe 6s ease-in-out infinite alternate;pointer-events:none}
.paper-doll-stage.has-portrait .paper-doll-slot{left:var(--portrait-x);top:var(--portrait-y);width:54px;height:54px;padding:3px!important;border-radius:6px!important;border:1px solid #6b5326!important;background:radial-gradient(circle at 50% 40%,#2a2233,#0e0c12)!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.5)!important}
.paper-doll-stage.has-portrait .paper-doll-slot::after{inset:3px;border-color:rgba(216,179,106,.12);border-radius:4px}
.paper-doll-stage.has-portrait .paper-doll-slot.occupied{border-color:#d8b36a!important;box-shadow:inset 0 0 12px rgba(216,179,106,.18),0 0 10px rgba(216,179,106,.25)!important}
.paper-doll-stage.has-portrait .paper-doll-slot.empty{border-style:solid!important;opacity:.8}
.paper-doll-stage.has-portrait .paper-doll-slot-art{inset:2px;border-radius:4px}
.paper-doll-stage.has-portrait .paper-doll-slot-copy{display:none!important}
.paper-doll-stage.has-portrait .paper-doll-empty-rune{color:rgba(216,179,106,.35)}
.paper-doll-stage.has-portrait .paper-doll-slot.equipment-transfer-target{transform:translate(-50%,-50%) scale(1.1)}
@keyframes paper-doll-breathe{from{transform:scale(1)}to{transform:scale(1.025) translateY(-4px)}}
@media(max-width:390px){.paper-doll-stage.has-portrait{min-height:440px}.paper-doll-stage.has-portrait .paper-doll-slot{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.paper-doll-portrait{animation:none}}

.paper-doll-avatar-gear{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 7px rgba(155,133,222,.12))}
.paper-avatar-piece{--avatar-fill:rgba(198,191,222,.28);--avatar-edge:rgba(232,227,247,.58);--avatar-glow:rgba(170,151,230,.18);opacity:.88;filter:drop-shadow(0 0 5px var(--avatar-glow));transition:opacity .2s ease,filter .2s ease}
.paper-avatar-piece .avatar-gear-fill{fill:var(--avatar-fill);stroke:var(--avatar-edge);stroke-width:1.8;stroke-linejoin:round}
.paper-avatar-piece .avatar-gear-edge{fill:none;stroke:var(--avatar-edge);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.paper-avatar-piece .avatar-gear-ornament{fill:none;stroke:var(--avatar-edge);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.72}
.paper-avatar-piece.avatar-tone-mist{--avatar-fill:rgba(185,192,202,.27);--avatar-edge:rgba(224,228,234,.58);--avatar-glow:rgba(184,195,207,.13)}
.paper-avatar-piece.avatar-tone-aqua{--avatar-fill:rgba(100,198,218,.28);--avatar-edge:rgba(166,235,244,.68);--avatar-glow:rgba(89,216,230,.22)}
.paper-avatar-piece.avatar-tone-arcane{--avatar-fill:rgba(156,119,225,.3);--avatar-edge:rgba(205,177,255,.72);--avatar-glow:rgba(171,123,247,.25)}
.paper-avatar-piece.avatar-tone-gold{--avatar-fill:rgba(220,164,81,.3);--avatar-edge:rgba(255,220,159,.74);--avatar-glow:rgba(240,178,82,.25)}
.paper-avatar-piece.avatar-tone-rose{--avatar-fill:rgba(216,102,155,.3);--avatar-edge:rgba(255,182,216,.72);--avatar-glow:rgba(238,116,174,.24)}
.paper-avatar-piece.avatar-tone-prismatic{--avatar-fill:rgba(195,151,236,.31);--avatar-edge:rgba(240,221,255,.78);--avatar-glow:rgba(193,148,249,.29)}
.paper-avatar-piece.avatar-material-bronze{--avatar-fill:rgba(181,123,72,.34)}
.paper-avatar-piece.avatar-material-moonsteel{--avatar-fill:rgba(174,199,222,.34)}
.paper-avatar-piece.avatar-material-obsidian{--avatar-fill:rgba(74,68,92,.48);--avatar-edge:rgba(205,193,233,.62)}
.paper-avatar-piece.avatar-ornament-runic .avatar-gear-ornament{stroke-dasharray:4 3;opacity:.9}
.paper-avatar-piece.avatar-ornament-royal .avatar-gear-ornament{stroke-width:2.4;opacity:.95}
.paper-avatar-piece.avatar-ornament-crystal .avatar-gear-ornament{filter:drop-shadow(0 0 4px var(--avatar-glow));opacity:1}
.paper-avatar-piece.avatar-quality-rough{opacity:.67;filter:saturate(.65) drop-shadow(0 0 2px var(--avatar-glow))}
.paper-avatar-piece.avatar-quality-fine{opacity:.94}
.paper-avatar-piece.avatar-quality-masterwork{opacity:1;filter:drop-shadow(0 0 7px var(--avatar-glow)) brightness(1.08)}
.paper-avatar-piece.avatar-wear-worn{opacity:.75}
.paper-avatar-piece.avatar-wear-damaged{opacity:.58;filter:saturate(.7) drop-shadow(0 0 2px var(--avatar-glow))}
.paper-avatar-piece.avatar-wear-critical,.paper-avatar-piece.avatar-wear-broken{opacity:.4;filter:grayscale(.22) saturate(.5)}
.paper-avatar-piece.avatar-wear-damaged .avatar-gear-edge,.paper-avatar-piece.avatar-wear-critical .avatar-gear-edge,.paper-avatar-piece.avatar-wear-broken .avatar-gear-edge{stroke-dasharray:5 4}
.paper-avatar-piece.avatar-forge-tempered{filter:drop-shadow(0 0 5px var(--avatar-glow))}
.paper-avatar-piece.avatar-forge-etched{filter:drop-shadow(0 0 7px var(--avatar-glow))}
.paper-avatar-piece.avatar-forge-radiant{filter:drop-shadow(0 0 10px var(--avatar-glow)) brightness(1.08)}
.paper-avatar-piece.avatar-forge-ascendant{filter:drop-shadow(0 0 13px var(--avatar-glow)) brightness(1.13)}
.paper-avatar-piece.avatar-forge-radiant .avatar-gear-ornament,.paper-avatar-piece.avatar-forge-ascendant .avatar-gear-ornament{animation:paper-avatar-rune 2.7s ease-in-out infinite}
.paper-avatar-piece.avatar-role-cloak{opacity:.62}
.paper-avatar-piece.avatar-role-cloak .avatar-cloak-fill{fill-opacity:.46}
.paper-avatar-piece.avatar-role-weapon{opacity:.92}
.paper-avatar-piece .avatar-staff-shaft{stroke-width:6}
.paper-avatar-piece .avatar-bow{stroke-width:5}
.paper-avatar-piece.avatar-two-hand{filter:drop-shadow(0 0 8px var(--avatar-glow))}
@keyframes paper-avatar-rune{0%,100%{opacity:.54}50%{opacity:1}}
@media(max-width:390px){.paper-doll-avatar-gear{filter:drop-shadow(0 0 5px rgba(155,133,222,.1))}.paper-avatar-piece .avatar-gear-edge{stroke-width:2.4}.paper-avatar-piece.avatar-forge-radiant,.paper-avatar-piece.avatar-forge-ascendant{filter:drop-shadow(0 0 7px var(--avatar-glow))}}
@media(prefers-reduced-motion:reduce){.paper-avatar-piece,.paper-avatar-piece .avatar-gear-ornament{transition:none!important;animation:none!important}}

/* One-shot equip/unequip transfer presentation. Uses viewport coordinates, so it stays aligned while the equipment sheet is scrolled. */
.equipment-transfer-layer{position:fixed;inset:0;z-index:9998;pointer-events:none;overflow:hidden}.equipment-transfer-ghost{position:absolute;display:grid;place-items:center;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));transform-origin:center}.equipment-transfer-ghost>.loot-forge-state{width:100%;height:100%}.equipment-transfer-spark{position:absolute;inset:27%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0 8%,rgb(var(--loot-rgb,185 156 255)/.52) 23%,transparent 68%);filter:blur(2px);mix-blend-mode:screen;animation:equipment-transfer-spark .72s ease-out both}.transfer-equip .equipment-transfer-ghost{filter:drop-shadow(0 10px 20px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgb(var(--loot-rgb,185 156 255)/.32))}.transfer-unequip .equipment-transfer-ghost{filter:drop-shadow(0 12px 22px rgba(0,0,0,.52)) saturate(.92)}
.loadout-slot,.equipment-loot-preview{position:relative}.equipment-transfer-target:after{content:"";position:absolute;inset:-4px;z-index:9;border-radius:inherit;pointer-events:none;border:1px solid rgb(var(--loot-rgb,185 156 255)/.72);box-shadow:0 0 0 0 rgb(var(--loot-rgb,185 156 255)/.4),0 0 20px rgb(var(--loot-rgb,185 156 255)/.24);animation:equipment-target-lock .72s ease-out both}.loadout-slot.equipment-transfer-target{animation:equipment-slot-arrive .7s cubic-bezier(.16,.82,.28,1) both}
@keyframes equipment-transfer-spark{0%{opacity:0;transform:scale(.35)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}@keyframes equipment-target-lock{0%{opacity:0;box-shadow:0 0 0 0 rgb(var(--loot-rgb,185 156 255)/.45)}34%{opacity:1;box-shadow:0 0 0 7px rgb(var(--loot-rgb,185 156 255)/.08),0 0 22px rgb(var(--loot-rgb,185 156 255)/.38)}100%{opacity:0;box-shadow:0 0 0 14px transparent,0 0 4px transparent}}@keyframes equipment-slot-arrive{0%,100%{transform:scale(1)}42%{transform:scale(1.045)}68%{transform:scale(.992)}}
@media(max-width:390px){.equipment-transfer-ghost{filter:drop-shadow(0 8px 14px rgba(0,0,0,.48))}.equipment-transfer-target:after{inset:-3px}}
@media(prefers-reduced-motion:reduce){.equipment-transfer-layer{display:none}.equipment-transfer-target,.equipment-transfer-target:after{animation:none!important}.equipment-transfer-target:after{opacity:.45;box-shadow:none}}

/* Static thumbnails; only visible reveals animate. No animated filters or 3D transforms. */
.loot-art.loot-art-2d{perspective:none;transform-style:flat}
.loot-art-2d .loot-item-image{position:relative;z-index:3;display:block;width:100%;height:100%;min-height:0;object-fit:contain;transform-origin:center;animation:none;user-select:none}
.loot-art-2d .loot-aura{filter:none;background:radial-gradient(ellipse,rgb(var(--loot-rgb)/.24),transparent 68%);animation:none}
.loot-art-2d .loot-rune-ring,.loot-art-2d .loot-spark{display:none;animation:none}
.loot-art-2d::after{display:none;animation:none}
.loot-art-2d .loot-art-fallback{display:none;position:absolute;font-size:32px;color:rgb(var(--loot-rgb)/.7)}
.loot-art-2d.art-unavailable .loot-art-fallback{display:block}
.loot-art-2d.art-unavailable .loot-item-image{visibility:hidden}
.loot-art-2d.wear-broken .loot-item-image{filter:grayscale(.9);opacity:.65}
.loot-art-2d.wear-critical .loot-item-image{filter:saturate(.5);opacity:.8}
.loot-art-2d.wear-damaged .loot-item-image{filter:saturate(.75)}
.loot-art-2d:is(.is-reveal,.is-animated) .loot-item-image{animation:item-art-float 4s ease-in-out infinite;animation-play-state:paused}
.loot-art-2d:is(.is-reveal,.is-animated) .loot-aura{animation:item-art-glow 3s ease-in-out infinite alternate;animation-play-state:paused}
.loot-art-2d.is-reveal .loot-spark{display:block;animation:item-art-spark 3s ease-in-out infinite;animation-play-state:paused}
.loot-art-2d.is-reveal .loot-spark-b{animation-delay:-1s}
.loot-art-2d.is-reveal .loot-spark-c{animation-delay:-2s}
.loot-art-2d.is-art-visible :is(.loot-item-image,.loot-aura,.loot-spark){animation-play-state:running}
.item-art-paused .loot-art-2d :is(.loot-item-image,.loot-aura,.loot-spark){animation-play-state:paused}
/* Forged inventory cards also remain static; the reveal owns the motion. */
.loot-forge-state:has(>.loot-art-2d) :is(.forge-rune-wheel,.forge-aura-boost,.forge-edge-light),
.loot-forge-state:has(>.loot-art-2d) .forge-rune-wheel::after{animation:none;filter:none;will-change:auto}
@keyframes item-art-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes item-art-glow{from{opacity:.45}to{opacity:.95}}
@keyframes item-art-spark{0%,100%{opacity:0;transform:translateY(6px) scale(.6)}50%{opacity:.7;transform:translateY(-7px) scale(1)}}
@media(prefers-reduced-motion:reduce){.loot-art-2d,.loot-art-2d *,.loot-art-2d::after{animation:none!important;transition:none!important;transform:none!important}.loot-art-2d .loot-spark{display:none}}

/* Lightweight game-feel layer. Effects never participate in document flow. */
.vfx-host { position: relative; }
.vfx-control { position: relative; overflow: hidden; isolation: isolate; }

.vfx-screen-wash,
.vfx-flash,
.vfx-burst,
.vfx-float-label,
.vfx-rarity-beam,
.vfx-press-ring {
  pointer-events: none;
  user-select: none;
}

.vfx-screen-wash {
  position: absolute;
  inset: 0;
  z-index: 80;
  background:
    radial-gradient(circle at 50% 46%, rgba(203,183,255,.22), transparent 25%),
    linear-gradient(135deg, rgba(115,87,201,.16), rgba(62,161,195,.10), transparent 62%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: vfx-screen-enter 620ms cubic-bezier(.16,.84,.34,1) both;
}

.vfx-flash {
  position: absolute;
  inset: 0;
  z-index: 78;
  opacity: 0;
  background: radial-gradient(circle at 50% 44%, rgb(var(--vfx-rgb) / .30), transparent 42%);
  mix-blend-mode: screen;
  animation: vfx-flash 420ms ease-out both;
}

.vfx-burst {
  --vfx-rgb: 185 156 255;
  position: absolute;
  left: var(--vfx-x);
  top: var(--vfx-y);
  z-index: 82;
  width: 1px;
  height: 1px;
}

.vfx-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgb(var(--vfx-rgb));
  box-shadow: 0 0 9px rgb(var(--vfx-rgb) / .85), 0 0 18px rgb(var(--vfx-rgb) / .35);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
  animation: vfx-particle-flight 720ms cubic-bezier(.12,.75,.25,1) var(--delay) both;
}

.vfx-float-label {
  --vfx-rgb: 185 156 255;
  position: absolute;
  left: var(--vfx-x);
  top: var(--vfx-y);
  z-index: 84;
  max-width: min(240px, 72%);
  padding: 4px 8px;
  border: 1px solid rgb(var(--vfx-rgb) / .26);
  border-radius: 999px;
  color: rgb(var(--vfx-rgb));
  background: rgba(7,9,16,.78);
  box-shadow: 0 5px 18px rgba(0,0,0,.28), 0 0 16px rgb(var(--vfx-rgb) / .12);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translate(-50%, -40%);
  animation: vfx-float-label 860ms cubic-bezier(.18,.8,.28,1) both;
}

.vfx-rarity-beam {
  --vfx-rgb: 185 156 255;
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -12%;
  width: 72%;
  height: 130%;
  transform: translateX(-50%) perspective(200px) rotateX(8deg) scaleX(.30);
  transform-origin: 50% 100%;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent, rgb(var(--vfx-rgb) / .12) 25%, rgb(var(--vfx-rgb) / .38) 50%, rgb(var(--vfx-rgb) / .12) 75%, transparent),
    radial-gradient(ellipse at 50% 90%, rgb(var(--vfx-rgb) / .40), transparent 62%);
  filter: blur(1px);
  mix-blend-mode: screen;
  animation: vfx-rarity-beam 1100ms cubic-bezier(.15,.82,.26,1) both;
}

.vfx-press-ring {
  position: absolute;
  z-index: 20;
  left: var(--press-x);
  top: var(--press-y);
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 12px rgba(187,160,255,.22);
  transform: translate(-50%, -50%) scale(.2);
  opacity: .8;
  animation: vfx-press 420ms ease-out both;
}

.tone-gold { --vfx-rgb: 242 198 104; }
.tone-aqua { --vfx-rgb: 111 219 239; }
.tone-arcane { --vfx-rgb: 185 156 255; }
.tone-rose { --vfx-rgb: 255 132 197; }
.tone-prismatic { --vfx-rgb: 232 201 255; }
.tone-danger { --vfx-rgb: 255 103 105; }
.tone-mist { --vfx-rgb: 160 169 186; }

@keyframes vfx-screen-enter {
  0% { opacity: 0; transform: scale(.94); }
  22% { opacity: .8; }
  100% { opacity: 0; transform: scale(1.06); }
}

@keyframes vfx-flash {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes vfx-particle-flight {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.08); }
}

@keyframes vfx-float-label {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(.92); }
  18% { opacity: 1; transform: translate(-50%, -55%) scale(1); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -125%) scale(.98); }
}

@keyframes vfx-rarity-beam {
  0% { opacity: 0; transform: translateX(-50%) perspective(200px) rotateX(8deg) scaleX(.12) scaleY(.4); }
  22% { opacity: .95; }
  65% { opacity: .55; transform: translateX(-50%) perspective(200px) rotateX(8deg) scaleX(.62) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) perspective(200px) rotateX(8deg) scaleX(.84) scaleY(1.06); }
}

@keyframes vfx-press {
  0% { opacity: .7; transform: translate(-50%, -50%) scale(.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(7); }
}

@media (max-width: 390px) {
  .vfx-particle { box-shadow: 0 0 7px rgb(var(--vfx-rgb) / .7); }
  .vfx-float-label { max-width: 66%; font-size: 11px; }
  .vfx-rarity-beam { width: 62%; }
}

@media (prefers-reduced-motion: reduce) {
  .vfx-screen-wash,
  .vfx-flash,
  .vfx-burst,
  .vfx-float-label,
  .vfx-rarity-beam,
  .vfx-press-ring { display: none; }
}

/* Chest game (chest.js), prototype style: gothic treasury, iron-framed
   chest slots, close-up reveal and a rewards summary. */
.overlay-panel.chest-panel {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  position: relative; overflow-x: hidden;
  display: grid; gap: 12px;
  width: min(100%, 520px);
  padding: 14px 14px calc(var(--safe-bottom) + 10px);
  border: 1px solid var(--gold-dim);
  background:
    linear-gradient(180deg, rgba(10, 9, 16, .55), rgba(8, 7, 12, .92) 60%),
    url("/art/chests/backdrop.webp") center top / cover no-repeat,
    #0a0910;
  box-shadow: inset 0 0 0 1px rgba(255, 222, 160, .08), 0 20px 60px rgba(0, 0, 0, .6);
  color: #eee4cf;
}
.chest-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.chest-head h2 { margin: 0; text-align: center; font: 700 19px/1.1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000, 0 0 14px rgba(216, 179, 106, .3); }
.chest-back, .chest-help {
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  background: rgba(14, 11, 18, .85);
  color: #e9dcbc; font: 700 16px/1 var(--serif);
}
.chest-rules { margin: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(216, 179, 106, .2); background: rgba(8, 7, 12, .8); font-size: 12px; line-height: 1.45; color: rgba(238, 228, 207, .85); }

.chest-panel .chest-grid { gap: 8px; }
.chest-panel .chest-tile {
  border-radius: 8px;
  border: 1px solid #3a3440;
  background: radial-gradient(circle at 50% 70%, rgba(255, 190, 110, .10), rgba(8, 8, 14, .75) 70%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 0 18px rgba(0, 0, 0, .8), 0 6px 14px rgba(0, 0, 0, .5);
  animation: chest-slot-in .5s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 40ms);
  cursor: pointer;
}
.chest-panel .chest-tile::after {
  /* Iron corner studs. */
  content: ""; position: absolute; inset: 3px; z-index: 2; pointer-events: none;
  border-radius: 6px;
  background:
    radial-gradient(circle, #8a8190 1.5px, transparent 2px) top left / 10px 10px no-repeat,
    radial-gradient(circle, #8a8190 1.5px, transparent 2px) top right / 10px 10px no-repeat,
    radial-gradient(circle, #8a8190 1.5px, transparent 2px) bottom left / 10px 10px no-repeat,
    radial-gradient(circle, #8a8190 1.5px, transparent 2px) bottom right / 10px 10px no-repeat;
}
.chest-panel .chest-tile:not(:disabled):hover,
.chest-panel .chest-tile:not(:disabled):focus-visible,
.chest-panel .chest-tile.opening {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(255, 190, 90, .55), inset 0 0 24px rgba(255, 190, 90, .25);
  outline: none;
}
.chest-panel .chest-tile.just-opened { border-color: rgba(255, 210, 120, .7); box-shadow: 0 0 20px rgba(255, 200, 100, .45), inset 0 0 26px rgba(255, 200, 100, .3); }
.chest-panel .chest-tile:disabled:not(.opened) { opacity: 1; cursor: default; }
.chest-panel .chest-tile.historical { opacity: .7; }

.chest-counter { text-align: center; font: 400 13px/1.3 var(--serif); color: rgba(243, 220, 166, .9); text-shadow: 0 1px 2px #000; }
.chest-counter:empty, .chest-result:empty { display: none; }
.chest-panel .chest-result { margin: 0; text-align: center; }

.chest-possible { padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(216, 179, 106, .2); background: rgba(8, 7, 12, .78); }
.chest-possible small { display: block; margin-bottom: 8px; font: 400 12px/1 var(--serif); color: rgba(238, 228, 207, .8); }
.chest-possible > div { display: flex; justify-content: space-between; gap: 6px; }
.chest-possible-item {
  flex: 1; max-width: 44px; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 6px;
  border: 1px solid #3a3440;
  background: radial-gradient(circle at 50% 40%, #241e2c, #0e0c12);
  font-size: 20px;
  animation: chest-shimmer 3.2s ease-in-out infinite;
}
.chest-possible-item:nth-child(2) { animation-delay: .4s; }
.chest-possible-item:nth-child(3) { animation-delay: .8s; }
.chest-possible-item:nth-child(4) { animation-delay: 1.2s; }
.chest-possible-item:nth-child(5) { animation-delay: 1.6s; }
.chest-possible-item:nth-child(6) { animation-delay: 2s; }

.chest-btn {
  justify-self: center;
  min-width: 180px; min-height: 42px; padding: 8px 22px;
  border-radius: 6px;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, #6a4f1f, #3a2a10);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), 0 6px 14px rgba(0, 0, 0, .5), 0 0 16px rgba(216, 179, 106, .2);
  color: #fbeccb; font: 700 15px/1 var(--serif); letter-spacing: .02em;
  cursor: pointer;
}
.chest-btn:active { transform: translateY(1px); }

/* "Сундук открыт" close-up, layered over the grid. */
.chest-reveal {
  position: absolute; inset: 58px 0 0; z-index: 5;
  display: grid; align-content: start; justify-items: center; gap: 14px;
  padding: 10px 14px calc(var(--safe-bottom) + 12px);
  background: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(255, 190, 90, .16), transparent 70%), rgba(8, 7, 12, .94);
  opacity: 0; transform: scale(.96);
  transition: opacity .22s ease, transform .22s ease;
}
.chest-reveal.visible { opacity: 1; transform: none; }
.chest-reveal[hidden] { display: none; }
.chest-reveal h3 { margin: 0; font: 700 18px/1 var(--serif); color: #f3dca6; }
.chest-reveal-stage {
  position: relative;
  width: min(78vw, 300px); aspect-ratio: 1;
}
.chest-reveal-stage .chest-3d-canvas { z-index: 1; }
.chest-reveal-rays {
  position: absolute; inset: -10%; z-index: 0;
  background: conic-gradient(from 0deg, transparent 0 10deg, rgba(255, 210, 120, .22) 14deg, transparent 20deg 40deg, rgba(255, 210, 120, .18) 46deg, transparent 52deg 80deg, rgba(255, 210, 120, .2) 86deg, transparent 92deg 120deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent);
  mask-image: radial-gradient(closest-side, #000 30%, transparent);
  animation: chest-rays 12s linear infinite, chest-rays-in 1s ease-out both;
  animation-delay: 0s, .5s;
}
.chest-reveal-stage.empty .chest-reveal-rays { display: none; }
.chest-reveal-stage.fallback::after { content: "🧰"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 110px; animation: reward-pop .4s ease both; }

.chest-prize-row { display: flex; justify-content: center; gap: 10px; }
.chest-prize-tile {
  min-width: 96px; padding: 12px 10px 10px;
  display: grid; justify-items: center; gap: 4px;
  border-radius: 8px;
  border: 1px solid var(--gold-dim);
  background: linear-gradient(180deg, #1e1826, #0d0b12);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .1), 0 8px 18px rgba(0, 0, 0, .5);
  animation: chest-prize-in .55s cubic-bezier(.2, 1.3, .4, 1) both;
  animation-delay: .75s;
}
.chest-prize-tile span { font-size: 34px; filter: drop-shadow(0 0 12px rgba(255, 200, 100, .6)); }
.chest-prize-tile.crystals span { filter: drop-shadow(0 0 12px rgba(90, 160, 255, .8)); }
.chest-prize-tile strong { font: 700 17px/1 var(--serif); color: #fff; }
.chest-prize-tile small { font-size: 11px; color: rgba(238, 228, 207, .7); }
.chest-prize-tile.empty span { filter: grayscale(1); }
.chest-reveal .chest-btn { animation: chest-prize-in .45s ease both; animation-delay: 1s; }

/* All opened: the grid goes dark, the summary takes the lower half. */
.chest-overlay.completed .chest-tile { filter: grayscale(.85) brightness(.55); cursor: default; }
.chest-overlay.completed .chest-tile .chest-reward { filter: grayscale(0); }
.chest-overlay.completed .chest-possible, .chest-overlay.completed .chest-counter { display: none; }
.chest-summary-host[hidden] { display: none; }
.chest-summary-host { opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease; }
.chest-summary-host.visible { opacity: 1; transform: none; }
.chest-summary { display: grid; gap: 10px; }
.chest-summary h3 { margin: 4px 0 0; font: 700 16px/1 var(--serif); color: #f3dca6; }
.chest-done {
  display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(216, 179, 106, .25);
  background: rgba(8, 7, 12, .85);
}
.chest-done > span {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; border: 2px solid rgba(238, 228, 207, .6);
  font-size: 20px; color: #eee4cf;
  animation: reward-pop .4s ease both;
}
.chest-done strong { display: block; font: 700 15px/1.2 var(--serif); color: #f3dca6; }
.chest-done small { font-size: 11px; color: rgba(238, 228, 207, .65); }
.chest-summary-list { display: grid; gap: 8px; }
.chest-summary-row {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(216, 179, 106, .18);
  background: linear-gradient(180deg, rgba(26, 21, 30, .92), rgba(12, 10, 16, .92));
  animation: chest-prize-in .45s cubic-bezier(.2, 1.2, .4, 1) both;
}
.chest-summary-row:nth-child(2) { animation-delay: .08s; }
.chest-summary-row:nth-child(3) { animation-delay: .16s; }
.chest-summary-row > span { font-size: 30px; text-align: center; filter: drop-shadow(0 0 10px rgba(255, 200, 100, .5)); }
.chest-summary-row small { display: block; font: 400 12px/1.2 var(--serif); color: rgba(238, 228, 207, .75); }
.chest-summary-row strong { font: 700 17px/1.2 var(--serif); color: #fff; }
.chest-summary-row em { font-style: normal; font-size: 12px; color: var(--gold); }
.chest-summary-empty { margin: 0; font-size: 12px; color: rgba(238, 228, 207, .6); }

@keyframes chest-slot-in { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes chest-shimmer { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 10px rgba(216, 179, 106, .35); border-color: #6b5326; } }
@keyframes chest-rays { to { transform: rotate(360deg); } }
@keyframes chest-rays-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes chest-prize-in { from { opacity: 0; transform: translateY(14px) scale(.8); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .chest-panel .chest-tile, .chest-possible-item, .chest-reveal-rays, .chest-prize-tile, .chest-summary-row, .chest-reveal .chest-btn { animation: none !important; }
}

/* Daily bonus wheel (bonus.js). */
.overlay-panel.bonus-panel {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  display: grid; gap: 12px;
  padding-top: 12px;
  color: #eee4cf;
}
.bonus-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.bonus-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.bonus-round { position: static; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif); }
.bonus-panel [data-bonus-content] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.bonus-wheel-wrap { position: relative; width: min(78vw, 300px); aspect-ratio: 1; margin: 6px auto 0; }
.bonus-wheel-wrap::before {
  /* Gold rim with studs. */
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  background: repeating-conic-gradient(#f3dca6 0 2deg, #8a6a2c 2deg 18deg), #8a6a2c;
  -webkit-mask-image: radial-gradient(circle, transparent 68%, #000 69%);
  mask-image: radial-gradient(circle, transparent 68%, #000 69%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}
.bonus-wheel-wrap::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; box-shadow: 0 0 0 2px #3a2a10, 0 0 30px rgba(216, 179, 106, .25); pointer-events: none; }
.bonus-wheel {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--stops));
  box-shadow: inset 0 0 0 3px #1a1209, inset 0 0 30px rgba(0, 0, 0, .6);
}
.bonus-wheel::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .12), transparent 55%); }
.bonus-wheel.spinning { transition: transform 3.5s cubic-bezier(.12, .7, .18, 1); }
.bonus-slice { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; display: grid; place-items: center; font-size: 22px; transform: rotate(var(--r)) translateY(calc(min(78vw, 300px) * -.36)); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.bonus-hub { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--gold); background: radial-gradient(circle at 40% 35%, #6a4f1f, #1a1209); color: #f3dca6; font-size: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, .7); }
.bonus-pointer { position: absolute; left: 50%; top: -22px; z-index: 2; width: 26px; height: 34px; margin-left: -13px; background: linear-gradient(180deg, #f3dca6, #a87a22); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .7)); }

.bonus-win { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; border: 1px solid var(--gold); background: radial-gradient(ellipse at 50% 50%, rgba(216, 179, 106, .25), rgba(12, 10, 16, .9)); animation: bonus-win .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.bonus-win span { font-size: 28px; }
.bonus-win strong { font: 700 20px/1 var(--serif); color: #f3dca6; text-shadow: 0 0 14px rgba(216, 179, 106, .6); }

.bonus-spin { display: grid; justify-items: center; gap: 4px; width: 100%; min-height: 54px; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--gold); background: linear-gradient(180deg, #7a5a22, #3a2a10); box-shadow: inset 0 1px 0 rgba(255, 236, 190, .35), 0 6px 16px rgba(0, 0, 0, .5), 0 0 18px rgba(216, 179, 106, .25); color: #fbeccb; }
.bonus-spin strong { font: 700 18px/1 var(--serif); }
.bonus-spin small { font: 600 12px/1 system-ui, sans-serif; color: rgba(251, 236, 203, .8); }
.bonus-spin:disabled { opacity: .55; }

.bonus-prizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bonus-panel .bonus-prize { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 6px; border: 1px solid rgba(216, 179, 106, .18); background: #0f0c15; text-align: center; }
.bonus-prize > span { font-size: 22px; }
.bonus-prize strong { display: block; font: 600 12px/1.2 var(--serif); color: #f3dca6; }
.bonus-prize small { font-size: 11px; color: rgba(238, 228, 207, .65); }
.bonus-prize b { font: 700 13px/1 system-ui, sans-serif; color: #fff; }
.bonus-feedback { min-height: 16px; text-align: center; font-size: 12px; color: rgba(238, 228, 207, .75); }

@keyframes bonus-win { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bonus-wheel.spinning { transition-duration: .01s; } .bonus-win { animation: none; } }

/* Friends / clanmates and the player card (friends.js), prototype style. */
.overlay-panel.fr-panel {
  --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif;
  display: grid; gap: 10px;
  padding-top: 12px;
  color: #eee4cf;
}
.player-card-overlay { z-index: 45; }
.fr-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.fr-head h2 { margin: 0; text-align: center; font: 700 19px/1 var(--serif); color: #f3dca6; text-shadow: 0 2px 0 #000; }
.fr-round { position: static; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(14, 11, 18, .85); color: #e9dcbc; font: 700 16px/1 var(--serif); }
.fr-panel [data-fr-body], .fr-panel [data-pc-body] { display: grid; gap: 10px; }

.fr-tabs { display: grid; grid-template-columns: 1fr 1fr; border-radius: 6px; border: 1px solid var(--gold-dim); background: rgba(6, 5, 9, .7); overflow: hidden; }
.fr-tabs button { min-height: 38px; border: 0; background: transparent; color: rgba(238, 228, 207, .7); font: 600 13px/1 var(--serif); }
.fr-tabs button small { font: 600 11px/1 system-ui, sans-serif; color: #7fe07e; }
.fr-tabs button.active { color: #fbeccb; background: linear-gradient(180deg, #6a4f1f, #3a2a10); box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), inset 0 0 0 1px var(--gold); }

.fr-list { display: grid; gap: 6px; }
.fr-row {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 10px;
  border-radius: 6px; border: 1px solid rgba(216, 179, 106, .16);
  background: linear-gradient(180deg, rgba(26, 21, 30, .92), rgba(12, 10, 16, .92));
  cursor: pointer;
  animation: fr-in .35s ease both;
}
.fr-row:active { transform: scale(.99); }
.fr-avatar { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--art) center 18% / cover no-repeat, #1a1420; box-shadow: 0 0 0 2px #120e16, 0 0 0 3px var(--gold-dim); }
.fr-avatar i { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #120e16; background: #6a6470; }
.fr-avatar.online i { background: #7fe07e; box-shadow: 0 0 8px #7fe07e; }
.fr-avatar.big { width: 76px; height: 76px; box-shadow: 0 0 0 2px #120e16, 0 0 0 4px var(--gold), 0 6px 16px rgba(0, 0, 0, .6); }
.fr-avatar.big i { width: 16px; height: 16px; }
.fr-copy { display: grid; gap: 2px; min-width: 0; }
.fr-copy strong { font: 600 14px/1.2 var(--serif); color: #f3dca6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-copy small { font-size: 11px; color: rgba(238, 228, 207, .7); }
.fr-copy em, .pc-hero em { font-style: normal; font-size: 11px; color: rgba(238, 228, 207, .55); }
.fr-copy em.online, .pc-hero em.online { color: #7fe07e; }
.fr-icon { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--gold-dim); background: rgba(14, 11, 18, .85); font-size: 17px; color: #f3dca6; }
.fr-icon.add { border-color: var(--gold); background: linear-gradient(180deg, #6a4f1f, #3a2a10); font-weight: 700; }
.fr-icon:disabled { opacity: .35; }
.fr-icon.working { animation: fr-pulse .8s ease-in-out infinite; }
.fr-hint { margin: 0; font: 400 12px/1.3 var(--serif); color: rgba(238, 228, 207, .7); }
.fr-empty { margin: 0; padding: 16px; border-radius: 6px; border: 1px dashed rgba(216, 179, 106, .25); text-align: center; font-size: 12px; color: rgba(238, 228, 207, .6); }

.fr-btn { width: 100%; min-height: 44px; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--gold); background: linear-gradient(180deg, #6a4f1f, #3a2a10); box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), 0 6px 14px rgba(0, 0, 0, .5); color: #fbeccb; font: 700 15px/1 var(--serif); }
.fr-btn.blue { border-color: #6fa2e8; background: linear-gradient(180deg, #2d5aa0, #16305a); color: #eef4ff; }
.fr-btn.ghost { background: transparent; border-color: var(--gold-dim); color: rgba(243, 220, 166, .85); box-shadow: none; }
.fr-btn:disabled { opacity: .45; }
.fr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fr-feedback { min-height: 16px; text-align: center; font-size: 12px; color: rgba(238, 228, 207, .75); }

.pc-hero { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; }
.pc-hero > div { display: grid; gap: 3px; min-width: 0; }
.pc-hero strong { font: 700 20px/1.1 var(--serif); color: #f3dca6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-hero small { font-size: 12px; color: rgba(238, 228, 207, .75); }
.pc-hero .pc-clan { font: 600 12px/1 var(--serif); color: var(--gold); }
.pc-tab { animation: fr-in .3s ease both; }
.fr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fr-stats > div { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 10px; border-radius: 6px; border: 1px solid rgba(216, 179, 106, .16); background: #0f0c15; }
.fr-stats span { grid-row: span 2; font-size: 20px; text-align: center; }
.fr-stats small { font-size: 11px; color: rgba(238, 228, 207, .65); }
.fr-stats strong { font: 700 16px/1.1 system-ui, sans-serif; color: #fff; }

@keyframes fr-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .fr-row, .pc-tab { animation: none; } }

/* Names elsewhere that open a player card. */
[data-player-card] { cursor: pointer; }
[data-player-card]:active { filter: brightness(1.2); }

/* Loading veil (loading.js): rune spinner while a screen opens, error card on failure. */
.load-veil {
  position: fixed; inset: 0; z-index: 35;
  display: grid; place-items: center;
  background: rgba(6, 5, 9, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.load-veil.on { opacity: 1; pointer-events: auto; }
.load-card {
  display: grid; justify-items: center; gap: 10px;
  min-width: 180px; max-width: min(86vw, 340px);
  padding: 16px 18px;
  border-radius: 10px; border: 1px solid #6b5326;
  background: linear-gradient(180deg, rgba(26, 21, 30, .96), rgba(12, 10, 16, .97));
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .1), 0 12px 30px rgba(0, 0, 0, .6);
  text-align: center;
  transform: translateY(6px) scale(.97);
  transition: transform .2s cubic-bezier(.2, .9, .3, 1.2);
}
.load-veil.on .load-card { transform: none; }
.load-card small { font: 600 13px/1.35 Georgia, "Times New Roman", serif; color: #f3dca6; }
.load-rune { position: relative; width: 38px; height: 38px; }
.load-rune i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: #d8b36a; border-right-color: rgba(216, 179, 106, .35); animation: load-spin .9s linear infinite; }
.load-rune i:nth-child(2) { inset: 7px; border-top-color: #9fd0ff; border-right-color: rgba(159, 208, 255, .3); animation-duration: 1.4s; animation-direction: reverse; }
.load-veil.error { background: rgba(6, 5, 9, .35); cursor: pointer; }
.load-veil.error .load-card { border-color: rgba(224, 106, 106, .6); }
.load-veil.error .load-rune { display: none; }
.load-veil.error .load-card small { color: #ffb0a8; }
@keyframes load-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .load-rune i { animation-duration: 3s; } .load-card { transition: none; } }

/* Shared multiplayer table UI (table-seats.js): seat tiles, registration,
   countdown ring, bet stepper, pinned own seat, stuck-table banner. */
.point21-panel, .elements-panel { --gold: #d8b36a; --gold-dim: #6b5326; --serif: Georgia, "Times New Roman", serif; }
.point21-panel [data-point-content], .elements-panel [data-elements-content] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

/* Seats */
.seat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 560px) { .seat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.seat {
  position: relative; min-width: 0;
  display: grid; gap: 6px; align-content: start;
  padding: 8px;
  border-radius: 8px; border: 1px solid rgba(216, 179, 106, .18);
  background: linear-gradient(180deg, rgba(26, 21, 30, .94), rgba(12, 10, 16, .94));
  animation: seat-in .35s ease both;
}
.seat[data-player-card] { cursor: pointer; }
.seat header { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.seat-portrait { width: 34px; height: 34px; border-radius: 50%; background: var(--art) center 18% / cover no-repeat, #1a1420; box-shadow: 0 0 0 2px #120e16, 0 0 0 3px var(--gold-dim); }
.seat-portrait.bot { display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #3a2d18, #120d08); color: var(--gold); font-size: 16px; }
.seat-portrait.empty { display: grid; place-items: center; background: transparent; box-shadow: inset 0 0 0 1px rgba(216, 179, 106, .35); color: rgba(216, 179, 106, .6); font: 400 20px/1 var(--serif); }
.seat-id { display: grid; gap: 1px; min-width: 0; }
.seat-id strong { font: 600 12px/1.2 var(--serif); color: #f3dca6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-id small { font-size: 11px; color: rgba(238, 228, 207, .6); white-space: nowrap; }
.seat-score { min-width: 26px; padding: 3px 6px; border-radius: 999px; background: rgba(0, 0, 0, .45); text-align: center; font: 700 13px/1 system-ui, sans-serif; color: #fff; }
.seat-hand { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 26px; }
.seat-hand .el-chip { width: 26px; height: 26px; font-size: 13px; }
.seat-hand .point-hand.mini { min-height: 0; justify-content: flex-start; }
.seat-hand .point-hand.mini .point-card { width: 26px; height: 37px; margin: 0 -2px; }
.seat-hand .point-hand.mini .point-card > em { font-size: 12px; }
.seat-hand .point-hand.mini .point-card > b { font-size: 7px; }
.seat-hand .point-hand.mini .point-card > b i { font-size: 6px; }
.seat-none, .seat-hand .point-hand-empty { font-size: 11px; color: rgba(238, 228, 207, .45); font-style: normal; }
.seat footer { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.seat-status { padding: 2px 7px; border-radius: 999px; font: 700 10px/1.3 system-ui, sans-serif; background: rgba(255, 255, 255, .06); color: rgba(238, 228, 207, .8); }
.seat footer em { font-style: normal; font: 700 11px/1 system-ui, sans-serif; }
.seat footer em.up { color: #9fe39a; }
.seat footer em.down { color: #ff8a80; }
.seat.tone-ok .seat-status { background: rgba(111, 162, 232, .18); color: #cfe2ff; }
.seat.tone-wait .seat-status { background: rgba(255, 255, 255, .06); }
.seat.tone-out { opacity: .72; }
.seat.tone-out .seat-status { background: rgba(224, 72, 76, .25); color: #ffb0a8; }
.seat.tone-win { border-color: var(--gold); box-shadow: 0 0 14px rgba(216, 179, 106, .3); }
.seat.tone-win .seat-status { background: linear-gradient(180deg, #e8c15a, #a87a22); color: #1a1206; }
.seat.tone-lose { opacity: .75; }
.seat.tone-lose .seat-status { background: rgba(224, 72, 76, .2); color: #ffb0a8; }
.seat.is-you { border-color: var(--gold); background: linear-gradient(180deg, rgba(60, 46, 22, .6), rgba(12, 10, 16, .94)); }
.seat.is-bot { border-color: rgba(154, 122, 232, .35); }
.seat.is-empty { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 66px; border-style: dashed; background: transparent; }
.seat.is-empty small { font: 400 11px/1 var(--serif); color: rgba(238, 228, 207, .45); }

/* Countdown ring */
.table-timer { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--gold-dim); background: rgba(6, 5, 9, .7); }
.table-ring { --f: 1; position: relative; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--f) * 360deg), rgba(255, 255, 255, .08) 0); transition: background .25s linear; }
.table-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #0e0c12; }
.table-ring b { position: relative; font: 700 13px/1 system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.table-timer small { font: 400 13px/1.3 var(--serif); color: rgba(238, 228, 207, .8); }
.table-timer.urgent .table-ring { background: conic-gradient(#e0484c calc(var(--f) * 360deg), rgba(255, 255, 255, .08) 0); animation: ring-pulse .8s ease-in-out infinite; }

/* Bet stepper */
.table-bet { display: grid; gap: 8px; padding: 10px; border-radius: 8px; border: 1px solid rgba(216, 179, 106, .25); background: rgba(8, 7, 12, .8); }
.table-bet-label { font: 700 14px/1.2 var(--serif); color: #f3dca6; }
.table-bet input { min-width: 0; min-height: 46px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--gold-dim); background: rgba(6, 5, 9, .8); color: #fff; font: 700 20px/1 system-ui, sans-serif; text-align: center; }
.table-bet input::placeholder { font: 400 13px/1 system-ui, sans-serif; color: rgba(238, 228, 207, .4); }
.table-bet input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(216, 179, 106, .25); }
.table-bet-quick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.table-bet-quick .table-btn { min-height: 40px; font-size: 13px; }
.table-wallet, .table-note { margin: 0; text-align: center; font-size: 12px; color: rgba(238, 228, 207, .65); }

/* Buttons */
.table-btn { width: 100%; min-height: 46px; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--gold); background: linear-gradient(180deg, #6a4f1f, #3a2a10); box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), 0 6px 14px rgba(0, 0, 0, .45); color: #fbeccb; font: 700 15px/1 var(--serif); }
.table-btn.blue { border-color: #6fa2e8; background: linear-gradient(180deg, #2d5aa0, #16305a); color: #eef4ff; }
.table-btn.red { border-color: #e06a6a; background: linear-gradient(180deg, #a02a2d, #5a1316); color: #ffecec; }
.table-btn.violet { border-color: #b886ff; background: linear-gradient(180deg, #5b3fa6, #2e1f5c); color: #f0e6ff; }
.table-btn.ghost { min-height: 40px; background: transparent; border-color: var(--gold-dim); color: rgba(243, 220, 166, .85); box-shadow: none; font-size: 13px; }
.table-btn:disabled { opacity: .45; filter: grayscale(.4); }
.table-btn:not(:disabled):active { transform: translateY(1px); }

/* Your seat, pinned to the bottom of the panel while the table scrolls. */
.table-me {
  position: sticky; bottom: 0; z-index: 2;
  display: grid; gap: 8px;
  padding: 10px;
  border-radius: 8px; border: 1px solid var(--gold);
  background: linear-gradient(180deg, rgba(30, 24, 20, .98), rgba(12, 10, 16, .99));
  box-shadow: 0 -10px 24px rgba(0, 0, 0, .55);
}
.table-me > header { display: flex; justify-content: space-between; align-items: center; }
.table-me > header strong { font: 700 15px/1 var(--serif); color: #f3dca6; }
.table-me .point-hand { min-height: 70px; }
.table-me .point-card { width: 50px; height: 72px; }
.table-me .point-card > em { font-size: 24px; }

/* Stuck table */
.table-reset { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(216, 179, 106, .3); background: rgba(8, 7, 12, .8); }
.table-reset span { font-size: 12px; line-height: 1.35; color: rgba(238, 228, 207, .8); }
.table-reset .table-btn { width: auto; min-height: 34px; padding: 6px 12px; font-size: 12px; }
.table-reset.stuck { border-color: rgba(224, 160, 90, .55); background: rgba(90, 50, 20, .3); }
.table-reset.stuck span { color: #ffcf9a; }

/* The dealer keeps full-size cards on top of the felt. */
.point-dealer { display: grid; gap: 6px; }
.point-dealer header { display: flex; justify-content: space-between; align-items: center; }
.point-dealer header strong { font: 700 14px/1 var(--serif); color: #f3dca6; }

@keyframes seat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ring-pulse { 0%, 100% { filter: none; } 50% { filter: brightness(1.4); } }
@media (prefers-reduced-motion: reduce) { .seat, .table-timer.urgent .table-ring { animation: none !important; } }

/* City screen (city.js), building windows and the bottom navigation (nav.js). */
:root { --city-gold: #d8b36a; --city-gold-dim: #6b5326; --city-ink: #eee4cf; --city-serif: Georgia, "Times New Roman", serif; --nav-height: 64px; }

.app-shell { padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 12px); }
[data-tab-panel][hidden] { display: none !important; }

/* Resource "+" shortcuts (shop / exchange) in the top HUD. */
.resource-plus {
  display: grid; place-items: center; padding: 0;
  border: 1px solid var(--city-gold);
  background: radial-gradient(circle at 40% 35%, #4a3a1c, #1a1309);
  color: #f3dca6; font: 700 15px/1 var(--city-serif);
  box-shadow: 0 0 8px rgba(216, 179, 106, .35);
}
.resource-plus:active { transform: scale(.9); }

/* ------------------------------------------------------------------ */
/* City panorama: one night backdrop, buildings as soft-edged islands */
/* with ornate plates, staggered like a painted map.                  */
/* ------------------------------------------------------------------ */
.city {
  position: relative; isolation: isolate;
  margin: 0 -18px; padding: 0 12px 24px;
  background: radial-gradient(ellipse 120% 60% at 50% 30%, rgba(40, 46, 80, .55), transparent 70%), linear-gradient(180deg, #0b0d18, #07080e);
  overflow: hidden;
}
.city-sky {
  position: absolute; z-index: -1; inset: 0 0 auto;
  height: 420px;
  background: url("/art/menu/builds.webp") center 30% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent);
  mask-image: linear-gradient(180deg, #000 45%, transparent);
  opacity: .8;
  animation: city-drift 20s ease-in-out infinite alternate;
}
.city::after {
  /* Drifting fireflies over the whole city. */
  content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(255, 214, 140, .9), transparent),
    radial-gradient(2px 2px at 78% 26%, rgba(160, 200, 255, .9), transparent),
    radial-gradient(1.5px 1.5px at 42% 44%, rgba(255, 214, 140, .8), transparent),
    radial-gradient(2px 2px at 88% 62%, rgba(255, 214, 140, .8), transparent),
    radial-gradient(1.5px 1.5px at 22% 74%, rgba(160, 200, 255, .8), transparent),
    radial-gradient(2px 2px at 60% 88%, rgba(255, 214, 140, .8), transparent);
  background-size: 100% 50%;
  animation: city-fireflies 16s linear infinite;
  opacity: .8;
}
.city-title { position: relative; z-index: 2; display: grid; justify-items: center; gap: 4px; padding: 26px 0 0; text-align: center; }
.city-title strong { font: 700 38px/1 var(--city-serif); letter-spacing: .01em; background: linear-gradient(180deg, #fff3cf, #d8b36a 60%, #8a6a2c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 14px rgba(216, 179, 106, .35)); }
.city-crown { width: 26px; height: 26px; color: #e9c777; stroke-width: 1.6; filter: drop-shadow(0 2px 4px #000); margin-bottom: -6px; }
.city-game { display: flex; align-items: center; gap: 10px; font: 700 11px/1 var(--city-serif); letter-spacing: .5em; color: #d8b36a; text-shadow: 0 1px 2px #000; }
.city-game i { width: 38px; height: 1px; background: linear-gradient(90deg, transparent, #d8b36a); }
.city-game i:last-child { transform: scaleX(-1); }
.city-title small { font: 400 12px/1.2 var(--city-serif); color: rgba(238, 228, 207, .8); text-shadow: 0 1px 2px #000; }

.city-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; padding-bottom: 56px; }
/* Stagger the lots so the city reads as a map, not a table. */
.city-grid .city-card:nth-child(even) { margin-top: 56px; margin-bottom: -56px; }
@media (min-width: 680px) {
  .city-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .city-grid .city-card:nth-child(even) { margin: 0; }
  .city-grid .city-card:nth-child(3n + 2) { margin-top: 56px; margin-bottom: -56px; }
}

.city-card {
  position: relative;
  display: grid; justify-items: center;
  color: var(--city-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: city-rise .6s cubic-bezier(.2, .8, .3, 1) both;
}
.city-grid .city-card:nth-child(2) { animation-delay: .06s; }
.city-grid .city-card:nth-child(3) { animation-delay: .12s; }
.city-grid .city-card:nth-child(4) { animation-delay: .18s; }
.city-grid .city-card:nth-child(5) { animation-delay: .24s; }
.city-grid .city-card:nth-child(6) { animation-delay: .3s; }
.city-card:focus-visible { outline: none; }
.city-card:focus-visible .city-plate { box-shadow: 0 0 0 2px var(--city-gold); }

.city-art {
  position: relative;
  width: 118%; aspect-ratio: 1 / 1;
  margin: 0 -9% -34%;
  /* Soft island: the painting melts into the night backdrop. */
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, rgba(0, 0, 0, .6) 78%, transparent);
  mask-image: radial-gradient(closest-side, #000 58%, rgba(0, 0, 0, .6) 78%, transparent);
}
.city-art::before {
  content: ""; position: absolute; inset: 0;
  background: var(--art) center / cover no-repeat;
  animation: city-breathe 9s ease-in-out infinite alternate;
  transition: transform .3s ease, filter .3s ease;
}
.city-grid .city-card:nth-child(2n) .city-art::before { animation-delay: -3s; }
.city-grid .city-card:nth-child(3n) .city-art::before { animation-delay: -6s; }
.city-card:active .city-art::before { filter: brightness(1.2); }

.city-card.banner { margin: -10px auto 10px; max-width: 420px; }
.city-card.banner .city-art { width: 108%; margin: 0 -4% -26%; }

.city-plate {
  position: relative; z-index: 1;
  width: 100%;
  display: grid; justify-items: center; gap: 5px;
  padding: 8px 8px 9px;
  border-radius: 6px;
  border: 1px solid var(--city-gold-dim);
  background: linear-gradient(180deg, rgba(22, 18, 26, .94), rgba(10, 9, 14, .96));
  box-shadow: inset 0 0 0 1px rgba(255, 222, 160, .08), inset 0 1px 0 rgba(255, 236, 190, .14), 0 10px 22px rgba(0, 0, 0, .6);
  text-align: center;
}
.city-plate::before, .city-plate::after {
  content: ""; position: absolute; top: -5px; left: calc(50% - 4px);
  width: 8px; height: 8px;
  border: 1px solid var(--city-gold); background: #1a1420;
  transform: rotate(45deg);
}
.city-plate::after { top: auto; bottom: -5px; }
.city-card.banner .city-plate { width: min(100%, 250px); }

.city-ribbon { position: relative; display: flex; justify-content: center; align-items: baseline; gap: 6px; width: 100%; min-width: 0; }
.city-ribbon strong { font: 700 14px/1.15 var(--city-serif); color: #f3dca6; text-shadow: 0 1px 0 #000, 0 0 10px rgba(216, 179, 106, .3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.city-level { margin-top: -3px; font: 700 12px/1 var(--city-serif); color: rgba(243, 220, 166, .8); }
.city-up { flex: 0 0 auto; color: #f0c040; font-size: 12px; text-shadow: 0 0 6px rgba(240, 192, 64, .7); animation: city-bob 1.4s ease-in-out infinite; }
.city-card.banner .city-ribbon strong { font-size: 17px; }

.city-costs { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 8px; min-height: 15px; }
.city-cost { font-size: 11px; color: var(--city-ink); white-space: nowrap; }
.city-cost.missing { color: #ff8a80; }
.city-cost.muted { color: rgba(238, 228, 207, .55); }

.city-btn {
  width: 100%;
  min-height: 30px; padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--city-gold);
  background: linear-gradient(180deg, #6a4f1f, #3a2a10);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), 0 4px 10px rgba(0, 0, 0, .4);
  color: #fbeccb; font: 700 13px/1 var(--city-serif); letter-spacing: .02em;
  cursor: pointer;
}
.city-btn:not(:disabled):active { transform: translateY(1px); }
.city-btn:disabled { opacity: .45; cursor: default; filter: grayscale(.4); }
.city-btn.speedup { border-color: #9a7ae8; background: linear-gradient(180deg, #5b3fa6, #2e1f5c); }
.city-btn.collect { border-color: #7fc97a; background: linear-gradient(180deg, #2f6b35, #173a1b); }
.city-btn.ghost { background: transparent; border-color: var(--city-gold-dim); color: rgba(243, 220, 166, .85); }

.city-collect {
  position: absolute; z-index: 2; top: 18%; right: 4%;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid #7fc97a;
  background: rgba(20, 46, 22, .9);
  color: #d9f7d4; font: 700 12px/1 system-ui, sans-serif;
  box-shadow: 0 0 12px rgba(127, 201, 122, .5);
  animation: city-bob 1.6s ease-in-out infinite;
  cursor: pointer;
}

.city-progress {
  position: relative; overflow: hidden;
  width: 100%; height: 17px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .8);
  background: linear-gradient(180deg, #07070b, #16151d);
  box-shadow: 0 0 0 1px rgba(111, 162, 232, .35), inset 0 2px 4px rgba(0, 0, 0, .8);
}
.city-progress i { position: absolute; inset: 0 auto 0 0; overflow: hidden; background: linear-gradient(90deg, #2d4f86, #6fa2e8); transition: width 1s linear; }
.city-progress i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent) no-repeat;
  background-size: 40px 100%;
  animation: city-shine 1.6s linear infinite;
}
.city-progress b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui; color: #fff; text-shadow: 0 1px 2px #000; }
/* Construction glow while upgrading. */
.city-card.upgrading .city-art::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 60%, rgba(111, 162, 232, .35), transparent 60%);
  animation: city-pulse 2s ease-in-out infinite;
}

/* Played after a successful action on the lot. */
.city-card.celebrate .city-plate { animation: city-celebrate .7s cubic-bezier(.2, .8, .3, 1); }
.city-card.celebrate .city-art::before { animation: city-flash .7s ease-out; }

.city-error { padding: 16px; text-align: center; color: #ff8a80; }

/* ------------------------------------------------------------------ */
/* Building window                                                    */
/* ------------------------------------------------------------------ */
.overlay-panel.city-window-panel {
  padding: 0 0 calc(var(--safe-bottom) + 4px);
  border: 1px solid var(--city-gold-dim);
  background: linear-gradient(180deg, rgba(24, 19, 30, .98), rgba(10, 9, 15, .99));
  color: var(--city-ink);
}
.city-window-panel .overlay-close { position: absolute; z-index: 3; top: 12px; right: 12px; }
.city-window-art { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.city-window-art::before { content: ""; position: absolute; inset: -5%; background: var(--art) center / cover no-repeat; animation: city-drift 12s ease-in-out infinite alternate; }
.city-window-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .15), transparent 40%, rgba(12, 10, 18, 1)); }
.city-window-title { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 12px; display: grid; gap: 4px; }
.city-window-title strong { font: 700 24px/1.1 var(--city-serif); color: #f3dca6; text-shadow: 0 2px 0 #000, 0 0 14px rgba(216, 179, 106, .35); }
.city-window-title small { font: 700 12px/1 var(--city-serif); color: rgba(243, 220, 166, .75); }
.city-window-body { display: grid; gap: 12px; padding: 4px 16px 8px; }
.city-window-body .city-costs { justify-content: flex-start; }
.city-window-body .city-cost { font-size: 13px; }
.city-desc { font-size: 13px; line-height: 1.45; color: rgba(238, 228, 207, .8); }
.city-block {
  display: grid; gap: 8px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(216, 179, 106, .18);
  background: rgba(8, 7, 12, .6);
  animation: city-rise .4s cubic-bezier(.2, .8, .3, 1) both;
}
.city-block:nth-of-type(2) { animation-delay: .06s; }
.city-block:nth-of-type(3) { animation-delay: .12s; }
.city-block h4 { margin: 0; font: 700 14px/1 var(--city-serif); color: #f3dca6; letter-spacing: .03em; }
.city-stat { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.city-stat strong { color: #fff; }
.city-reqs { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12px; }
.city-reqs .met { color: #9fe39a; }
.city-reqs .missing { color: #ff8a80; }
.city-note, .city-feedback { margin: 0; font-size: 12px; color: #ffb38a; }
.city-feedback:empty { display: none; }
.city-types { display: flex; flex-wrap: wrap; gap: 6px; }
.city-type {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--city-gold-dim);
  background: #15111c;
  color: var(--city-ink); font: 600 12px/1 var(--city-serif);
  cursor: pointer;
}
.city-type.active { border-color: var(--city-gold); background: linear-gradient(180deg, #4a3818, #241a0a); color: #fbeccb; box-shadow: 0 0 10px rgba(216, 179, 106, .35); }
.city-type:disabled:not(.active) { opacity: .5; cursor: default; }
.city-type.active:disabled { opacity: 1; cursor: default; }

/* ------------------------------------------------------------------ */
/* Bottom navigation                                                  */
/* ------------------------------------------------------------------ */
.bottom-nav {
  position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  max-width: 760px; margin: 0 auto;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--city-gold-dim);
  background: linear-gradient(180deg, rgba(26, 20, 30, .97), rgba(10, 8, 14, .99));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 236, 190, .1);
}
.nav-tab {
  position: relative;
  display: grid; justify-items: center; gap: 3px;
  padding: 6px 2px;
  border: 0; border-radius: 10px;
  background: transparent;
  color: rgba(238, 228, 207, .6);
  cursor: pointer;
  transition: color .2s ease;
}
.nav-tab .ui-icon { width: 24px; height: 24px; stroke-width: 1.7; transition: transform .25s cubic-bezier(.2, .8, .3, 1.4), color .2s ease; }
.nav-tab small { font: 700 11px/1 var(--city-serif); letter-spacing: .02em; }
.nav-tab.active { color: #f3dca6; background: radial-gradient(ellipse at 50% 100%, rgba(216, 179, 106, .22), transparent 70%); }
.nav-tab.active .ui-icon { transform: translateY(-2px) scale(1.1); stroke-width: 2; }
.nav-tab.active::before { content: ""; position: absolute; top: -7px; left: 30%; right: 30%; height: 2px; border-radius: 2px; background: var(--city-gold); box-shadow: 0 0 8px var(--city-gold); }
/* Overlays sit above the nav. */
.game-overlay { z-index: 40; }

@keyframes city-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes city-drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1.5%, -1%); } }
@keyframes city-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes city-shine { from { background-position: -40px 0; } to { background-position: calc(100% + 40px) 0; } }
@keyframes city-celebrate { 0% { transform: scale(1); } 30% { transform: scale(1.04); box-shadow: 0 0 0 2px var(--city-gold), 0 0 30px rgba(216, 179, 106, .6); } 100% { transform: scale(1); } }
@keyframes city-flash { 0% { filter: brightness(1.8); } 100% { filter: none; } }
@keyframes city-breathe { from { transform: scale(1); } to { transform: scale(1.05) translateY(-1%); } }
@keyframes city-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes city-fireflies { from { background-position: 0 0; } to { background-position: 30px -100%; } }

@media (prefers-reduced-motion: reduce) {
  .city-card, .city-block, .city-art::before, .city-sky, .city::after, .city-window-art::before, .city-collect, .city-up, .city-progress i::after { animation: none !important; }
}

/* Feature tabs start below the sticky top HUD. */
.section-head[data-tab-panel="features"] { margin-top: 18px; }

/* Quest card (prototype "Новые горизонты"): the city's next goal. */
.city-quest {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center;
  width: min(100%, 340px); margin: 12px auto 4px; padding: 8px 12px;
  border-radius: 6px; border: 1px solid var(--city-gold-dim);
  background: linear-gradient(180deg, rgba(22, 18, 26, .92), rgba(10, 9, 14, .94));
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .1), 0 8px 20px rgba(0, 0, 0, .5);
  color: var(--city-ink); text-align: left;
  animation: city-rise .6s cubic-bezier(.2, .8, .3, 1) .15s both;
}
.city-quest > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--city-gold-dim); background: radial-gradient(circle at 50% 40%, #3a2d18, #120d08); font-size: 20px; }
.city-quest strong { display: block; font: 700 14px/1.2 var(--city-serif); color: #e9b86a; }
.city-quest small { font-size: 12px; color: rgba(238, 228, 207, .8); }
.city-quest b { font-size: 22px; color: var(--city-gold); animation: city-bob 1.6s ease-in-out infinite; }

/* Building window: requirements as "needed / have" rows and the before -> after production. */
.city-needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.city-needs li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.city-needs li > span { width: 22px; display: grid; place-items: center; font-size: 17px; }
.city-needs li strong { font: 700 14px/1 system-ui, sans-serif; color: #fff; }
.city-needs li.missing strong { color: #ff8d8d; }
.city-subhead { margin: 2px 0 6px; font: 700 13px/1 var(--city-serif); color: rgba(238, 228, 207, .75); }
.city-arrow { font-style: normal; opacity: .6; }
.city-gain { font-style: normal; color: #6fe0a3; }

/* SVG icons (icons.js). They scale with the surrounding font size and take its colour. */
.ui-icon { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.14em; overflow: visible; }
/* Resource and status accents so currencies stay recognisable at a glance. */
.ui-icon-coin, .ui-icon-coins, .ui-icon-hand-coins, .ui-icon-star, .ui-icon-crown, .ui-icon-trophy { color: #f2c14e; }
.ui-icon-gem, .ui-icon-diamond { color: #5cc8ff; }
.ui-icon-pickaxe, .ui-icon-hammer { color: #c7b79a; }
.ui-icon-heart { color: #ff6b7d; }
.ui-icon-flame, .ui-icon-bomb { color: #ff8a4c; }
.ui-icon-zap { color: #ffd45c; }
.ui-icon-snowflake, .ui-icon-droplet { color: #7fd6ff; }
.ui-icon-leaf, .ui-icon-trees { color: #7fd08a; }
.ui-icon-sparkles, .ui-icon-sparkle, .ui-icon-wand-sparkles, .ui-icon-orbit { color: #c9b6ff; }
.ui-icon-circle-check { color: #6fe0a3; }
.ui-icon-x { color: #ff7a85; }
.game-card.unavailable .ui-icon, .game-card.unavailable .game-icon { color: inherit; }
/* Inside coloured chips and buttons the icon follows the text colour instead. */
.nav-tab .ui-icon, .top-icon .ui-icon, .city-quest .ui-icon, .mode-badge .ui-icon { color: currentColor; }

/*
 * WhitesLove Mini App design system.
 *
 * Feature stylesheets own layout and mode-specific artwork. This file is loaded
 * last and owns the shared visual grammar: surfaces, controls, semantic states,
 * focus, motion and per-mode accent variables.
 */
:root {
  --surface-page: #0b0a10;
  --surface-panel: rgba(18, 14, 22, .97);
  --surface-glass: rgba(20, 16, 24, .72);
  --surface-card: rgba(255, 255, 255, .035);
  --surface-card-strong: rgba(255, 255, 255, .055);
  --surface-control: rgba(255, 255, 255, .045);
  --surface-input: rgba(6, 5, 9, .72);
  --surface-card-gradient: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.018)), var(--surface-card);

  --text: #f4ecdb;
  --text-soft: #e6dcc4;
  --muted: #b3a88f;
  --text-faint: #858397;

  --accent: #d8b36a;
  --accent-2: #9a7ae8;
  --accent-rgb: 216 179 106;
  --accent-2-rgb: 154 122 232;

  /* Prototype ornament: gold filigree on dark ink, serif headings. */
  --gold: #d8b36a;
  --gold-bright: #f3dca6;
  --gold-dim: #6b5326;
  --serif: Georgia, "Times New Roman", serif;
  --button-gold: linear-gradient(180deg, #6a4f1f, #3a2a10);
  --success: #a8f4d8;
  --success-rgb: 126 232 208;
  --warning: #f2d395;
  --warning-rgb: 242 198 111;
  --danger: #ffb5ac;
  --danger-rgb: 238 117 104;

  --border-subtle: rgba(216, 179, 106, .13);
  --border-soft: rgba(216, 179, 106, .22);
  --border-strong: rgba(216, 179, 106, .42);

  --radius-xs: 8px;
  --radius-sm: 11px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-sheet: 14px;

  --shadow-card: 0 14px 34px rgba(0, 0, 0, .17);
  --shadow-panel: 0 28px 80px rgba(0, 0, 0, .38);
  --shadow-accent: 0 14px 34px rgb(var(--accent-rgb) / .10);

  --blur-card: 18px;
  --blur-panel: 24px;
  --control-height: 42px;

  --motion-fast: 140ms;
  --motion-medium: 220ms;
  --ease-game: cubic-bezier(.2, .8, .2, 1);
}

html,
body {
  background: var(--surface-page);
  color: var(--text);
}

.glass {
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    var(--surface-glass);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--blur-card)) saturate(1.15);
}

.game-overlay {
  --screen-accent-rgb: var(--accent-rgb);
  --screen-accent-2-rgb: var(--accent-2-rgb);
}

.boss-overlay {
  --screen-accent-rgb: 225 118 154;
  --screen-accent-2-rgb: 235 123 105;
}

.arena-overlay {
  --screen-accent-rgb: 165 126 240;
  --screen-accent-2-rgb: 85 160 205;
}

.equipment-overlay {
  --screen-accent-rgb: 224 174 101;
  --screen-accent-2-rgb: 188 156 255;
}

.gacha-overlay {
  --screen-accent-rgb: 188 156 255;
  --screen-accent-2-rgb: 117 216 255;
}

.point21-overlay {
  --screen-accent-rgb: 156 119 225;
  --screen-accent-2-rgb: 91 147 211;
}

.overlay-backdrop {
  background: rgba(4, 5, 12, .72);
  backdrop-filter: blur(10px) saturate(.9);
}

.overlay-panel {
  border: 1px solid var(--gold-dim);
  border-bottom: 0;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background:
    radial-gradient(ellipse 90% 30% at 50% 0%, rgb(var(--screen-accent-rgb) / .10), transparent 70%),
    linear-gradient(180deg, rgba(24, 19, 30, .98), rgba(10, 9, 14, .99));
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .12), inset 0 0 0 1px rgba(255, 222, 160, .05), var(--shadow-panel);
  backdrop-filter: blur(var(--blur-panel)) saturate(1.12);
  color: var(--text);
}

.overlay-head {
  min-height: 48px;
}

.overlay-head h2 {
  font: 700 22px/1.1 var(--serif);
  letter-spacing: .01em;
  color: var(--gold-bright);
  text-shadow: 0 2px 0 #000, 0 0 14px rgb(var(--accent-rgb) / .3);
}

.overlay-panel .eyebrow {
  font: 700 10px/1.2 var(--serif);
  letter-spacing: .14em;
  color: rgb(var(--accent-rgb) / .75);
}

.overlay-panel h3 {
  font-family: var(--serif);
  color: var(--gold-bright);
}

.overlay-close.icon-button {
  border-radius: 50%;
  border-color: var(--gold-dim);
  background: rgba(14, 11, 18, .85);
  color: var(--text-soft);
}

.overlay-copy {
  color: var(--muted);
  line-height: 1.55;
}

button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button {
  transition:
    transform var(--motion-fast) var(--ease-game),
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}

button:not(:disabled):active {
  transform: scale(.98);
}

button:disabled {
  opacity: .46;
  cursor: default;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgb(var(--screen-accent-rgb, 188 156 255) / .72);
  outline-offset: 2px;
}

.overlay-panel input:not([type="checkbox"]):not([type="radio"]),
.overlay-panel select,
.overlay-panel textarea {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--text);
  background: var(--surface-input);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.overlay-panel input:not([type="checkbox"]):not([type="radio"]):focus,
.overlay-panel select:focus,
.overlay-panel textarea:focus {
  border-color: rgb(var(--screen-accent-rgb) / .36);
  box-shadow: 0 0 0 3px rgb(var(--screen-accent-rgb) / .07);
}

.game-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface-card-gradient);
  box-shadow: var(--shadow-card);
}

.game-card::after {
  background: radial-gradient(circle, rgb(var(--accent-rgb) / .30), transparent 68%);
}

.game-icon {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-control);
}

.hero-card {
  border-radius: var(--radius-xl);
}

.resource {
  border-radius: var(--radius-lg);
}

/* Shared secondary surfaces. Feature-specific state selectors keep their own accents. */
.utility-card,
.chat-setting-row,
.self-mute-card,
.self-mute-message,
.profile-current,
.profile-gender,
.profile-class-card,
.equipment-summary > div,
.loadout-slot,
.equipment-item,
.forge-card,
.point-balance,
.point-phase-card,
.point-player,
.point-bet-box,
.point-my-status,
.point-result-row {
  border-color: var(--border-subtle);
  background: var(--surface-card-gradient);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.utility-card,
.self-mute-card,
.self-mute-message {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.utility-card::after,
.self-mute-card::after,
.self-mute-message::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -78px;
  top: -86px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--screen-accent-rgb, 188 156 255) / .12), transparent 70%);
  pointer-events: none;
}

.utility-card > *,
.self-mute-card > *,
.self-mute-message > * {
  position: relative;
  z-index: 1;
}

.utility-card h3 {
  font-size: 13px;
  letter-spacing: -.01em;
}

.utility-card p {
  color: var(--muted);
}

/* Tabs and segmented controls share one container treatment. */
.equipment-tabs,
.arena-tabs {
  border-color: var(--border-subtle);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.022);
}

.equipment-tabs button,
.arena-tabs button {
  border-radius: var(--radius-sm);
}

.equipment-tabs button.active,
.arena-tabs button.active {
  color: var(--text);
  background: var(--button-gold);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), inset 0 0 0 1px var(--gold);
  color: #fbeccb;
}

/* Pills/chips. */
.live-pill,
.equipped-pill,
.gacha-payment.free {
  color: var(--success);
  border-color: rgb(var(--success-rgb) / .22);
  background: rgb(var(--success-rgb) / .08);
}

.mode-badge,
.equipment-filter,
.chat-setting-toggle,
.point-bet-chips button,
.point-player-head > span,
.point-phase-card > span,
.gacha-payment,
.gacha-probabilities span,
.equipment-meta span,
.equipment-stats span,
.forge-cost,
.boss-loot span,
.arena-opponent-meta span {
  border-radius: 999px;
}

.equipment-filter,
.chat-setting-toggle,
.point-bet-chips button {
  border-color: var(--border-soft);
  background: var(--surface-control);
  color: var(--muted);
}

.equipment-filter.active,
.chat-setting-toggle.active {
  color: var(--text);
  border-color: rgb(var(--screen-accent-rgb) / .32);
  background: rgb(var(--screen-accent-rgb) / .15);
}

/* Primary calls to action. Mode accents come from the overlay theme variables. */
.utility-action,
.self-mute-action,
.point-primary,
.gacha-roll,
.gacha-action,
.arena-attack,
.equipment-action.primary,
.forge-action,
.boss-summon {
  min-height: var(--control-height);
  border: 1px solid var(--gold);
  border-radius: 6px;
  color: #fbeccb;
  background: var(--button-gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, .3),
    0 6px 14px rgba(0, 0, 0, .45),
    0 0 14px rgb(var(--accent-rgb) / .16);
  font-family: var(--serif);
  font-weight: 700;
}

.utility-action:not(:disabled):active,
.self-mute-action:not(:disabled):active,
.point-primary:not(:disabled):active,
.gacha-roll:not(:disabled):active,
.gacha-action:not(:disabled):active,
.arena-attack:not(:disabled):active,
.equipment-action.primary:not(:disabled):active,
.forge-action:not(:disabled):active,
.boss-summon:not(:disabled):active {
  transform: translateY(1px) scale(.985);
}

.equipment-action:not(.primary),
.arena-refresh,
.boss-name-row button {
  border-color: var(--border-soft);
  color: var(--text-soft);
  background: var(--surface-control);
}

.arena-refresh {
  border-radius: 999px;
}

.equipment-action,
.arena-attack,
.boss-summon {
  min-height: 38px;
}

/* Feedback and empty states use the same hierarchy across modes. */
.equipment-feedback,
.arena-feedback,
.boss-feedback,
.point-feedback,
.gacha-status,
.utility-feedback {
  color: var(--muted);
  line-height: 1.45;
}

.equipment-empty,
.arena-empty,
.boss-empty,
.point-watch {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--muted);
  background: rgba(255,255,255,.015);
}

/* Semantic states. */
.point-result-row.win,
.arena-result.win,
.equipment-item.equipped {
  border-color: rgb(var(--success-rgb) / .24);
}

.point-result-row.lose,
.arena-result.lose,
.forge-cost.missing,
.equipment-action.sell.confirming {
  border-color: rgb(var(--danger-rgb) / .24);
}

.forge-cost.missing,
.equipment-action.sell.confirming {
  color: var(--danger);
}

.bonus-win,
.arena-result.victory,
.boss-result.victory {
  box-shadow: 0 16px 40px rgb(var(--warning-rgb) / .06);
}

/* Utility screens get the same visual density as the large game modes. */
.utility-grid {
  gap: 10px;
}

.utility-card {
  padding: 15px;
}

.utility-action {
  margin-top: 13px;
}

.bonus-balance article,
.bonus-prize,
.title-row,
.horo-result {
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
}

.bonus-balance article,
.bonus-prize,
.title-row {
  border-radius: var(--radius-md);
}

.horo-result {
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.horo-sign,
.horo-style {
  border-color: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-control);
}

.horo-sign.active,
.horo-style.active {
  border-color: rgb(var(--accent-rgb) / .34);
  background: rgb(var(--accent-rgb) / .16);
}

.chat-setting-row {
  border-radius: var(--radius-md);
}

.chat-setting-row.enabled {
  border-color: rgb(var(--accent-rgb) / .20);
  background:
    linear-gradient(145deg, rgb(var(--accent-rgb) / .075), transparent),
    var(--surface-card);
}

.chat-setting-toggle {
  min-height: 34px;
}

.self-mute-action {
  min-height: 46px;
}

/* Respect users who disable motion without making the UI feel broken. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    animation-duration: .001ms;
    animation-iteration-count: 1;
    transition-duration: .001ms;
  }
}

@media (min-width: 680px) {
  .overlay-panel {
    border-radius: var(--radius-sheet);
  }
}

/* Painted art on main-menu cards (menu-art.js). */
.game-card.has-art { min-height: 168px; isolation: isolate; }
.game-card .game-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--card-art) center 28% / cover no-repeat;
  transform: scale(1.06);
  animation: card-art-drift 16s ease-in-out infinite alternate;
  will-change: transform;
}
.game-card.has-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(8, 8, 18, .94) 22%, rgba(8, 8, 18, .55) 55%, rgba(8, 8, 18, .1) 100%);
}
.game-card.has-art .game-icon { background: rgba(8, 8, 18, .55); backdrop-filter: blur(6px); }
.game-card.has-art h3 { text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.game-card.has-art:active .game-art { transform: scale(1.12); transition: transform .25s ease; }
.game-card.has-art.unavailable .game-art { filter: grayscale(.8) brightness(.6); }
@keyframes card-art-drift {
  from { transform: scale(1.06) translate(-1.5%, 0); }
  to { transform: scale(1.1) translate(1.5%, -2%); }
}
@media (prefers-reduced-motion: reduce) { .game-card .game-art { animation: none; } }

/* Shared sheet header: back button, centred serif title, round badge.
   Used by the screens that had the old eyebrow + × header. */
.overlay-panel .ds-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 10px;
}
.overlay-panel .ds-head h2 {
  margin: 0;
  text-align: center;
  font: 700 19px/1.15 var(--serif);
  color: #f3dca6;
  text-shadow: 0 2px 0 #000, 0 0 14px rgb(var(--accent-rgb) / .25);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overlay-panel .ds-round {
  position: static;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  background: rgba(14, 11, 18, .85);
  color: #e9dcbc;
  font: 700 16px/1 var(--serif);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .12);
}
.overlay-panel button.ds-round { cursor: pointer; }

/* On/off switches (news, chat settings): a gold track with a sliding knob. */
.overlay-panel .updates-toggle,
.overlay-panel .chat-setting-toggle {
  position: relative;
  flex: none;
  display: block;
  width: 52px;
  min-width: 52px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--gold-dim);
  background: rgba(6, 5, 9, .85);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6);
}
.overlay-panel .updates-toggle span,
.overlay-panel .chat-setting-toggle span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #5a5060, #2c2530);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
  transform: none;
  transition: transform .2s var(--ease-game, ease), background .2s ease;
}
.overlay-panel .updates-toggle strong,
.overlay-panel .chat-setting-toggle b {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.overlay-panel .updates-toggle.active,
.overlay-panel .chat-setting-toggle.active {
  border-color: var(--gold);
  background: linear-gradient(180deg, #6a4f1f, #3a2a10);
}
.overlay-panel .updates-toggle.active span,
.overlay-panel .chat-setting-toggle.active span {
  transform: translateX(22px);
  background: radial-gradient(circle at 35% 30%, #fff4d6, #e8c15a 60%, #a87a22);
  box-shadow: 0 0 10px rgba(232, 193, 90, .5), 0 2px 4px rgba(0, 0, 0, .5);
}
.overlay-panel .chat-setting-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.overlay-panel .chat-setting-row small { color: var(--muted); }
.overlay-panel .chat-setting-row:not(.enabled) strong { color: var(--muted); }

/* Forms, feedback, notes: readable sizes and the gold primary button. */
.overlay-panel .forms-intro strong,
.overlay-panel .feedback-intro strong { font: 700 14px/1.25 var(--serif); color: var(--gold-bright); }
.overlay-panel .forms-intro small,
.overlay-panel .utility-card p,
.overlay-panel .updates-note p,
.overlay-panel .feedback-intro p { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.overlay-panel .utility-card h3 { font-size: 15px; }
.overlay-panel .forms-field > span,
.overlay-panel .feedback-field > span { font: 700 11px/1.2 var(--serif); letter-spacing: .04em; color: rgb(var(--accent-rgb) / .85); }
.overlay-panel .forms-field input,
.overlay-panel .feedback-field textarea { font-size: 15px; border-color: var(--gold-dim); background: rgba(6, 5, 9, .8); }
.overlay-panel .forms-field input:focus,
.overlay-panel .feedback-field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(216, 179, 106, .2); }
.overlay-panel .forms-member strong { font-size: 12px; max-width: 120px; }
.overlay-panel .forms-member small { font-size: 11px; }
.overlay-panel .forms-member > span { font-size: 11px; color: var(--gold); }
.overlay-panel .forms-member.active { border-color: var(--gold); background: rgba(60, 46, 22, .5); }
.overlay-panel .forms-profile-card header small { font-size: 11px; }
.overlay-panel .forms-profile-card header strong { font: 700 15px/1.2 var(--serif); color: var(--gold-bright); }
.overlay-panel .forms-profile-field small { font-size: 11px; }
.overlay-panel .forms-profile-field strong { font-size: 13px; }
.overlay-panel .forms-feedback,
.overlay-panel .feedback-meta { font-size: 11px; }

.overlay-panel .forms-save,
.overlay-panel .feedback-submit {
  width: 100%;
  min-height: 48px;
  border-radius: 6px;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, #6a4f1f, #3a2a10);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), 0 6px 14px rgba(0, 0, 0, .45);
  color: #fbeccb;
  font: 700 15px/1 var(--serif);
}
.overlay-panel .forms-save { justify-content: center; text-align: center; }
.overlay-panel .forms-save > span { display: none; }
.overlay-panel .forms-save > div { justify-items: center; }
.overlay-panel .forms-save strong { font: 700 15px/1 var(--serif); color: #fbeccb; }
.overlay-panel .forms-save small { font-size: 11px; color: rgba(251, 236, 203, .7); }
.overlay-panel .forms-save:not(:disabled):active,
.overlay-panel .feedback-submit:not(:disabled):active { transform: translateY(1px); }
.overlay-panel .forms-tabs button,
.overlay-panel .help-tabs button { min-height: 38px; font: 700 13px/1 var(--serif); color: var(--muted); border-color: var(--gold-dim); }
.overlay-panel .forms-tabs button.active,
.overlay-panel .help-tabs button.active { color: #1a1206; border-color: var(--gold); background: linear-gradient(180deg, #e8c15a, #a87a22); }
.overlay-panel .help-guide-card strong { font: 700 14px/1.25 var(--serif); color: var(--gold-bright); }
.overlay-panel .help-guide-card p { font-size: 12px; line-height: 1.45; color: var(--muted); }
.overlay-panel .help-guide-card > span { font-size: 18px; }
.overlay-panel .help-command-row code { font-size: 13px; color: var(--gold-bright); }
.overlay-panel .help-command-row small { font-size: 11px; }
.overlay-panel .help-command-row p { font-size: 12px; }
.overlay-panel .help-filters button { min-height: 32px; font-size: 12px; }
.overlay-panel .help-filters button.active { border-color: var(--gold); color: var(--gold-bright); background: rgba(60, 46, 22, .5); }
.overlay-panel .help-search input { font-size: 14px; }
.overlay-panel .help-legacy-note { font-size: 11px; }
.overlay-panel .chat-setting-row strong { font: 700 14px/1.2 var(--serif); color: var(--gold-bright); }
.overlay-panel .chat-setting-row small { font-size: 11px; }
.overlay-panel .self-mute-card p, .overlay-panel .self-mute-message p { font-size: 12.5px; }

/* Back / close buttons: the ← and × glyphs sit off-centre in most fonts, so
   they're drawn as vector masks instead (the text stays for screen readers).
   The mask is absolutely centred so the hidden text can't shift it. */
.overlay-panel .overlay-close:is([class*="-round"], .shop-back),
.overlay-close.icon-button[data-city-close] {
  position: relative;
  padding: 0;
  font-size: 0;
  line-height: 0;
}
.overlay-panel .overlay-close:is([class*="-round"], .shop-back)::before,
.overlay-close.icon-button[data-city-close]::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--close-icon) center / contain no-repeat;
  mask: var(--close-icon) center / contain no-repeat;
}
.overlay-panel .overlay-close:is([class*="-round"], .shop-back) {
  --close-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12h-15M11 5l-6.5 7 6.5 7'/%3E%3C/svg%3E");
}
.overlay-close.icon-button[data-city-close] {
  --close-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

[role="button"]:focus-visible,
a:focus-visible {
  outline: 2px solid #ffd978;
  outline-offset: 2px;
}

.game-overlay {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}