: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; } }

.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; }


/* ------------------------------------------------------------------ */
/* Top HUD: steel frame with portrait, wide CP/HP/MP bars, resources.  */
/* ------------------------------------------------------------------ */
.top-hud {
  --steel: #7d725f; --txt: #eef2f7;
  position: sticky; top: 0; z-index: 15;
  margin: calc(-1 * var(--safe-top, 0px)) -18px 0;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 8px;
  background: linear-gradient(180deg, rgba(5, 8, 14, .96), rgba(5, 8, 14, .9));
  color: var(--txt);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.th-frame {
  position: relative; display: grid; gap: 5px; padding: 5px;
  border: 2px solid var(--steel); border-radius: 3px;
  background: linear-gradient(180deg, #0c1624, #070b13 60%);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(125, 190, 255, .18), 0 8px 20px rgba(0, 0, 0, .6);
}
.th-frame::before, .th-frame::after {
  content: ""; position: absolute; top: -3px; width: 9px; height: 9px;
  background: linear-gradient(135deg, #a89b82, #4a4233); border: 1px solid #000;
}
.th-frame::before { left: -3px; }
.th-frame::after { right: -3px; }

.th-id { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 6px; align-items: center; padding-bottom: 5px; border-bottom: 1px solid rgba(125, 160, 200, .18); }
.top-portrait.hero-portrait-shell {
  width: 42px; height: 44px; border-radius: 2px; cursor: pointer;
  border: 2px solid #5b6f86; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(0, 0, 0, .6);
}
.top-portrait.hero-portrait-shell::before, .top-portrait.hero-portrait-shell::after { display: none; }
.top-portrait .hero-sigil { font-size: 22px; }
.th-level {
  min-width: 34px; height: 38px; padding: 0 4px; display: grid; place-items: center;
  border: 1px solid #42586f; background: linear-gradient(180deg, #0f1a29, #08101b);
  box-shadow: 0 0 0 1px #000, inset 0 0 8px rgba(0, 0, 0, .7);
  font: 600 20px/1 system-ui, sans-serif; color: #d9f2ff; text-shadow: 0 0 8px rgba(120, 210, 255, .5);
}
.th-name { min-width: 0; }
.th-name strong { display: block; font: 700 17px/1.1 system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-top: 1px; }
.th-name small { font: 500 12px/1.1 system-ui, sans-serif; color: #a9a8c9; }
.th-btns { display: flex; gap: 5px; }
.top-icon {
  position: relative; width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  border: 2px solid #4e5a68; border-radius: 2px;
  background: linear-gradient(180deg, #121c2b, #0a111b);
  box-shadow: 0 0 0 1px #000, inset 0 0 6px rgba(0, 0, 0, .7);
}
.top-icon .ui-icon { width: 22px; height: 22px; }
.top-icon:active, .top-portrait:active { transform: scale(.94); }
.th-btns #fullscreen { display: none; }
@media (min-width: 430px) { .th-btns #fullscreen { display: grid; } }

.th-bars { display: grid; gap: 3px; }
.top-bar { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 4px; }
.top-bar > span { font: 700 14px/1 system-ui, sans-serif; color: #e9eef5; padding-left: 3px; }
.top-bar-track {
  position: relative; overflow: hidden; height: 20px; border-radius: 2px;
  border: 1px solid #000; background: #05070c;
  box-shadow: 0 0 0 1px #3c4350, inset 0 2px 3px rgba(0, 0, 0, .85);
}
.top-bar-track i { position: absolute; inset: 1px auto 1px 1px; max-width: calc(100% - 2px); transition: width .6s cubic-bezier(.2, .8, .3, 1); }
.top-bar-track i::after { content: ""; position: absolute; inset: 0 0 52% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .05)); }
.top-bar-track b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 15px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.top-bar.cp i { background: linear-gradient(180deg, #f1c43a, #b8860f); }
.top-bar.hp i { background: linear-gradient(180deg, #f0262e, #a60b14); }
.top-bar.mp i { background: linear-gradient(180deg, #2f8cff, #0a47c4); }

.top-resources { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding-top: 5px; border-top: 1px solid rgba(125, 160, 200, .18); }
.top-res {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 26px; align-items: center; gap: 4px;
  height: 36px; padding: 0 4px; border: 1px solid rgba(90, 130, 170, .35); background: rgba(5, 9, 16, .7);
}
.top-res > img { width: 30px; height: 30px; object-fit: contain; justify-self: center; filter: drop-shadow(0 1px 2px #000); }
.top-res strong { font: 500 19px/1 system-ui, sans-serif; color: #f2f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-res .resource-plus {
  position: static; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: 400 30px/24px system-ui, sans-serif; color: #f4cf9a; text-shadow: 0 0 6px rgba(244, 190, 120, .45);
}
.top-res > i { width: 26px; }

.th-foot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; padding-top: 4px; border-top: 1px solid rgba(125, 160, 200, .18); }
.th-charges { display: flex; gap: 2px; }
.th-charges i {
  position: relative; width: 26px; height: 26px;
  border: 1px solid #3f6178; outline: 1px solid #000;
  background: linear-gradient(180deg, #0b2233, #07131f);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 0 6px rgba(0, 0, 0, .8);
}
.th-charges i::after {
  content: ""; position: absolute; inset: 3px;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  background: #1b3446;
}
.th-charges i.on { border-color: #4fb4d4; background: linear-gradient(180deg, #0d3a52, #082638); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 8px rgba(60, 200, 240, .45), 0 0 6px rgba(60, 200, 240, .35); }
.th-charges i.on::after { background: radial-gradient(circle, #fff 0 18%, #8cf1ff 40%, #1cc6f0 100%); filter: drop-shadow(0 0 3px #3fe0ff); }
.th-thin { display: grid; gap: 3px; }
.th-thin .top-bar { grid-template-columns: 1fr; }
.th-thin .top-bar > span { display: none; }
.th-thin .top-bar-track { height: 11px; border-radius: 3px; }
.th-thin { align-content: center; }
.th-thin .top-bar-track b { display: none; }
.top-bar.exp i { background: linear-gradient(180deg, #c06bff, #7a1fd1); }
.top-bar.vit i { background: linear-gradient(180deg, #2fe0a0, #0b9a68); }

@media (max-width: 359px) {
  .th-name strong { font-size: 15px; }
  .top-res strong { font-size: 16px; }
  .top-bar-track b { font-size: 13px; }
}
@media (min-width: 680px) { .top-hud { margin-left: -24px; margin-right: -24px; padding-left: 16px; padding-right: 16px; } }

/* City overview: keep the same live meters and actions in a compact frame. */
.top-hud.is-city-compact .th-frame { gap: 4px; padding: 5px 6px; }
.is-city-compact .th-id { gap: 5px; padding-bottom: 4px; }
.is-city-compact .top-portrait.hero-portrait-shell { width: 34px; height: 38px; }
.is-city-compact .th-level { min-width: 26px; height: 30px; font-size: 16px; }
.is-city-compact .th-name strong { font-size: 14px; }
.is-city-compact .th-name small { font-size: 11px; }
.is-city-compact .top-bar { grid-template-columns: 23px minmax(0, 1fr); gap: 3px; }
.is-city-compact .top-bar > span { font-size: 11px; padding-left: 0; }
.is-city-compact .th-bars { gap: 3px; }
.is-city-compact .th-bars .top-bar-track { height: 14px; }
.is-city-compact .th-bars .top-bar-track b { font-size: 11px; }
.is-city-compact .top-resources { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding-top: 4px; }
.is-city-compact .top-res {
  position: relative; grid-template-columns: 17px minmax(0, 1fr); gap: 2px;
  height: 30px; padding: 0 3px;
}
.is-city-compact .top-res > img { width: 17px; height: 20px; }
.is-city-compact .top-res strong { font-size: 11px; }
/* The whole currency cell is the touch target; counters retain full values. */
.is-city-compact .top-res .resource-plus { position: absolute; inset: 0; width: 100%; height: 100%; font-size: 0; }
/* Only the small corner plus is shown: the painted cross inside the button would draw a second, big one. */
.is-city-compact .top-res .resource-plus > * { display: none; }
.is-city-compact .top-res .resource-plus { background: none; color: transparent; }
.is-city-compact .top-res:has(.resource-plus) { padding-right: 9px; }
.is-city-compact .top-res:has(.resource-plus)::after { content: '+'; position: absolute; right: 2px; top: 2px; color: #d9bc7d; font: 10px/1 system-ui; pointer-events: none; }
.is-city-compact .resource-plus:focus-visible { outline: 2px solid #f3dca6; outline-offset: 1px; }
.is-city-compact .top-res > i { display: none; }
.is-city-compact .th-foot { padding-top: 3px; gap: 5px; }
.is-city-compact .th-charges i { width: 17px; height: 17px; }
.is-city-compact .th-thin { gap: 3px; }
.is-city-compact .th-thin .top-bar { grid-template-columns: 1fr; }
.is-city-compact .th-thin .top-bar-track { height: 6px; }
@media (max-width: 359px) {
  .is-city-compact .th-name strong { font-size: 12px; }
  .is-city-compact .top-res strong { font-size: 10px; }
}

.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);
}

/* 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[src*="/items/l2-style/"]{image-rendering:pixelated;animation:none!important;transform:none!important}
.loot-art-2d:has(>.loot-item-image[src*="/items/l2-style/"]) :is(.loot-aura,.loot-spark){display:none!important}
.loot-art-2d[data-art-key^="icon-"] .loot-item-image{image-rendering:pixelated;animation:none;transform:none}
.loot-art-2d[data-art-key^="icon-"] :is(.loot-aura,.loot-spark){display:none}
.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; }
}

/* 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: clamp(240px, 66.667vw, 420px);
  background: url("/art/menu/builds-512.webp") center top / 100% auto no-repeat;
  background-image: image-set(url("/art/menu/builds-512.webp") 1x, url("/art/menu/builds-1024.webp") 2x);
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent);
  mask-image: linear-gradient(180deg, #000 45%, transparent);
  opacity: .8;
  /* Static panorama preserves the statue and floating island on narrow phones. */
}
.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; align-content: start; min-height: 180px; gap: 4px; padding: 26px 0 0; text-align: center; }
.city-title strong { font: 700 clamp(25px, 7.5vw, 38px)/1.12 var(--city-serif); max-width: 94%; text-wrap: balance; 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;
  background-image: var(--art-responsive, var(--art));
  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%; }

/* Transparent paintings keep their silhouettes and breathing room. */
.city-art.painted { -webkit-mask-image: none; mask-image: none; }
.city-art.painted::before { display: none; }
.city-building-image { width: 100%; height: 100%; object-fit: contain; }
.city-art.painted[data-building-style="elven"] .city-building-image { filter: hue-rotate(-18deg) saturate(.85); }
.city-art.painted[data-building-style="royal"] .city-building-image { filter: saturate(1.12) brightness(1.08); }
.city-window-art.painted::before { inset: 0; background-size: contain; animation: none; }

.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: 44px; 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; }

.city.has-map { background: linear-gradient(rgba(7,8,14,.18),rgba(7,8,14,.45)),var(--city-map) center top / cover no-repeat; }
.city.has-map .city-grid { position: relative; isolation: isolate; }
.city.has-map .city-grid::before { content: none; }
.city.has-map .city-sky { display: none; background-image: none; }
.city.has-map .city-title { min-height: 210px; }
.city.has-map .city-card.banner { max-width: 320px; }
@media (max-width: 679px) { .city::after { animation: none; } }

/* The atlas shortcut belongs to the city and must be styled before atlas assets load. */
.city-world-map{display:block;margin:8px auto;padding:12px 18px;border:1px solid var(--border-strong, #b89b61);border-radius:12px;background:var(--surface-control, #263032);color:var(--text, #e9e4d8)}

/* Painted icons keep their proportions and reserve space before decoding. */
.ui-icon { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.14em; object-fit: contain; }
.ui-icon-chevron-left { rotate: 180deg; }
.ui-icon-arrow-up { rotate: -90deg; }
.ui-icon-rotate-ccw { scale: -1 1; }
.ui-icon-bell-off,.ui-icon-volume-x { opacity: .65; }
.game-icon .ui-icon { width: 32px; height: 32px; }
.top-icon .ui-icon,.resource-plus .ui-icon { width: 20px; height: 20px; }
.game-card.unavailable .ui-icon { filter: saturate(.35); }
/* 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; }

/*
 * Reality of Lineage 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 {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --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; }

/* Painted back/close buttons are centred independently of font metrics. */
.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: var(--close-icon) center / contain no-repeat;
}
.overlay-panel .overlay-close:is([class*="-round"], .shop-back) {
  --close-icon: url('/art/ui/v1/chevron-right-128.webp');
}
.overlay-panel .overlay-close:is([class*="-round"], .shop-back)::before { rotate: 180deg; }
.overlay-close.icon-button[data-city-close] {
  --close-icon: url('/art/ui/v1/x-128.webp');
}

[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);
}

/* Red dot: pending events on a nav tab or feature card (friends, clan). */
.red-dot {
  position: absolute; top: 6px; right: 8px; z-index: 3;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  display: grid; place-items: center;
  border-radius: 9px; border: 1.5px solid #0b0d17;
  background: #e5384b; color: #fff;
  font: 800 10px/1 system-ui, sans-serif; font-style: normal;
  box-shadow: 0 0 8px rgba(229, 56, 75, .7);
  animation: red-dot-pulse 2.2s ease-in-out infinite;
  pointer-events: none;
}
.game-card .red-dot { top: 10px; left: 10px; right: auto; }
.nav-tab .red-dot { top: 2px; right: calc(50% - 22px); }
@keyframes red-dot-pulse { 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .red-dot { animation: none; } }

/* Compact game screens occupy the viewport instead of leaving a blank half-screen. */
:is(.arcade-overlay,.chest-overlay,.point21-overlay) { align-items: start; padding: 8px; }
:is(.arcade-overlay,.chest-overlay,.point21-overlay) > .overlay-panel {
 width: min(100%,680px); max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
 margin: 0 auto; padding: 14px 12px max(14px,env(safe-area-inset-bottom)); border-radius: 14px;
 align-content: start; overscroll-behavior: contain;
}
[data-arcade-content] { display: grid; gap: 12px; min-width: 0; }
.arcade-feedback:empty { display: none; }
.arcade-head { min-height: 44px; margin-bottom: 4px; }
.arcade-round,.arcade-tab,.arcade-stepper button,.arcade-chips button { min-height: 44px; }
.arcade-rules { line-height: 1.5; padding: 2px 4px; }
.arcade-arena { grid-template-columns: minmax(0,1fr); gap: 10px; }
.arcade-stage { aspect-ratio: 4 / 3; max-height: 340px; }
.arcade-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
.arcade-stat { min-height: 64px; gap: 5px; padding: 8px; }
.arcade-note { line-height: 1.5; padding: 2px 4px; }
.arcade-btn { min-height: 48px; line-height: 1.3; }

.chest-art-image { z-index: 1; }
.bottom-nav { grid-template-columns: repeat(6,minmax(0,1fr)); }
@media (max-width: 360px) {
 .nav-tab small { font-size: 10px; }
 .arcade-stat strong { font-size: 18px; }
}
@media (min-width: 680px) {
 :is(.arcade-overlay,.chest-overlay,.point21-overlay) { align-items: center; padding: 24px; }
 .arcade-arena { grid-template-columns: minmax(0,1fr) 96px; }
 .arcade-stats { grid-template-columns: 1fr; }
}

@media (max-width: 679px) { .arcade-stage { aspect-ratio: 16 / 10; max-height: min(32dvh,240px); } }

/* Every mobile window uses the same outer gutter and safe-area allowance. */
@media (max-width: 679px) {
 .game-overlay { align-items: start; padding: max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); }
 .game-overlay > .overlay-panel {
  width: min(100%,680px); min-width: 0;
  max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin: 0 auto; padding: 14px 12px 16px;
  border: 1px solid var(--gold-dim); border-radius: 14px; overscroll-behavior: contain;
 }
 .overlay-panel :is(h2,h3,p) { overflow-wrap: anywhere; }
 .overlay-panel header > div { min-width: 0; }
 .game-grid { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
 .game-overlay > .overlay-panel,.game-overlay.visible > .overlay-panel { transform: none; transition: none; }
}

/* Shared atlas and combat dialogs. Feature styles own positioning only. */
.game-dialog-panel {
  padding: var(--dialog-padding, 16px);
  color: var(--text);
  background: var(--surface-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
}
.game-dialog-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.game-dialog-heading h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--gold-bright);
  font: 700 21px/1.2 var(--serif);
}
.game-dialog-panel button {
  min-height: var(--control-height);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xs);
  background: var(--surface-control);
  color: var(--text-soft);
}
.game-dialog-heading [data-dismiss] {
  flex-shrink: 0;
  width: 34px;
  min-height: 34px;
  padding: 0;
}
.death-overlay {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(4, 5, 12, .85);
}
.death-panel { --dialog-padding: 20px; width: min(100%, 360px); }
.death-panel p { font-size: 14px; line-height: 1.45; }
.death-panel [data-death-options] { display: grid; gap: 8px; }
.death-panel button { min-height: 44px; padding: 10px; }
.death-panel [data-death-error]:empty { display: none; }

/* Shared mobile window contract. Artwork stays local to each screen. */
.game-overlay .overlay-panel { backdrop-filter: none; }
.game-overlay .overlay-close,
.game-overlay button.ds-round,
.game-overlay button.mmo-round,
.game-overlay [data-dismiss],
.game-overlay [data-close],
.game-overlay .character-title button { min-width:44px;min-height:44px; }
.game-overlay .character-tabs button,
.game-overlay .character-base button,
.game-overlay .inv-tabs button,
.game-overlay .warehouse-tabs button,
.game-overlay .stock-tabs button,
.game-overlay .help-tabs button,
.game-overlay .help-filters button,
.game-overlay .inventory-footer button { min-height:44px; }
.game-overlay.character-overlay > .character-panel {
  padding:var(--space-3);border-radius:var(--radius-md,14px);border:1px solid var(--border-soft);
  background:var(--surface-panel);box-shadow:0 16px 50px #0008;
}
.game-overlay.character-overlay > .character-panel::before { display:none; }
.character-panel .character-title { height:auto;min-height:44px;padding:0;border:0;background:none;gap:var(--space-2); }
.character-panel .character-title h2 { font:700 21px/1.2 var(--serif);color:var(--gold-bright); }
.character-panel .character-tabs { gap:var(--space-1);padding-bottom:var(--space-2); }
.character-panel .character-tabs button { border-color:var(--border-soft);background:var(--surface-control);box-shadow:none;color:var(--text-soft); }
.character-panel .character-tabs button[aria-selected=true] { border-color:var(--gold);background:var(--button-gold);color:var(--text); }
.character-panel .character-section { border:0;border-bottom:1px solid var(--border-soft);background:none;margin-bottom:var(--space-2); }
.character-panel .character-section h3 { background:none;border:0;padding:var(--space-2) 0;color:var(--gold-bright); }
.character-panel .character-section-body { padding:0; }
.character-panel .character-base button { background:var(--surface-control);border-color:var(--border-soft); }
.fishing-overlay .fishing-tab-body > .mmo-frame { padding:0;border:0;border-radius:0;background:none;box-shadow:none; }
.feedback-overlay .feedback-intro { padding:0;border:0;border-radius:0;background:none;gap:var(--space-2); }
.help-overlay .help-guide-card { border:0;border-bottom:1px solid var(--border-soft);border-radius:0;background:none;padding:var(--space-2) 0; }
.inventory-panel .inventory-wallet { grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2); }
.inventory-panel .inventory-adena strong,
.inventory-panel .inventory-col strong { min-width:0;padding:4px 0;border:0;background:none;white-space:nowrap;overflow-wrap:normal;font-size:12px; }
.inventory-panel .inventory-tools { grid-template-columns:repeat(2,minmax(0,1fr)); }
.inventory-panel .inventory-tools [data-inventory-craft] { grid-column:auto; }
.static-effects .overlay-backdrop { backdrop-filter:none; }
.static-effects #webgl { display:none; }
.static-effects { background:radial-gradient(ellipse at top,#27202f,#0b0a10 75%); }
@media (prefers-reduced-motion:reduce) {
  .overlay-backdrop { backdrop-filter:none; }
  body .game-overlay *, body .game-overlay *::before, body .game-overlay *::after { animation:none;transition:none; }
}
.game-overlay :is(.inv-round,.arcade-round,.shop-round,.chest-back,.chest-help),
.game-overlay.storage-overlay .storage-panel header .overlay-close { min-width:44px;min-height:44px; }
.game-overlay :is(.clan-play,.shop-price),
.game-overlay .character-tools button,
.game-overlay .fishing-tabs button,
.game-overlay .storage-tabs button,
.game-overlay .l2-store-footer button,
.game-overlay .shop-categories button { min-height:44px; }
.fishing-overlay .fishing-tab-body > .mmo-frame::before,
.fishing-overlay .fishing-tab-body > .mmo-frame::after { display:none; }