/* Rose Survivor UI -- warm parchment-and-gold, ROSE-pink accents. */

:root {
  --rs-gold: #ffd36e;
  --rs-pink: #ff7fb4;
  --rs-panel: rgba(18, 12, 22, 0.86);
  --rs-panel2: rgba(34, 22, 38, 0.92);
  --rs-line: rgba(255, 211, 110, 0.28);
  --rs-text: #f4e8f0;
  --rs-dim: #b9a7b6;
}

.rs-boot, .rs-menu, .rs-hud, .rs-results, #rsZoneLoading, .rs-achtoast {
  font-family: 'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif;
  color: var(--rs-text);
  user-select: none;
}

/* ---- boot ---- */
.rs-boot {
  position: fixed; inset: 0; z-index: 1000;
  background: radial-gradient(ellipse at center, #3a1c33 0%, #120a14 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.rs-boot-title { font-family: Georgia, serif; font-size: 64px; letter-spacing: 4px; text-shadow: 0 0 24px #ff5d9e; }
.rs-boot-title span, .logo span { color: var(--rs-pink); }
.rs-boot-label { margin-top: 18px; font-size: 15px; opacity: 0.8; }
.rs-boot-bar { margin-top: 14px; width: 340px; height: 6px; background: #2a1726; border-radius: 3px; overflow: hidden; }
.rs-boot-bar > div { width: 0; height: 100%; background: linear-gradient(90deg, #ff5d9e, #ffd36e); transition: width .2s; }

#rsZoneLoading {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 900;
  padding: 8px 18px; border-radius: 16px; background: var(--rs-panel); border: 1px solid var(--rs-line);
  font-size: 14px; display: none;
}

.rs-icon { display: inline-block; vertical-align: middle; border-radius: 5px; flex: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6); background-repeat: no-repeat; image-rendering: auto; }

button, .button {
  font: inherit; color: var(--rs-text); cursor: pointer;
  background: linear-gradient(#4a2d47, #2c1a2c); border: 1px solid var(--rs-line);
  border-radius: 6px; padding: 7px 14px; font-size: 14px;
}
button:hover:not([disabled]), .button:hover { border-color: var(--rs-gold); color: #fff; }
button[disabled], button.disabled { opacity: .45; cursor: default; }
button.primary { background: linear-gradient(#b8456f, #6e1f45); border-color: #ffb0cf; }
button.danger { background: linear-gradient(#7a2020, #4a1010); }

.panel { background: var(--rs-panel2); border: 1px solid var(--rs-line); border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6); padding: 18px 22px; }
.panel h1 { margin: 0 0 8px; font-family: Georgia, serif; color: var(--rs-gold); font-weight: normal; }
.panel h2 { margin: 14px 0 8px; font-family: Georgia, serif; color: var(--rs-gold); font-weight: normal; font-size: 20px; }
.buttons { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.hint { color: var(--rs-dim); font-size: 13px; margin: 6px 0 10px; }

/* ---- menu ---- */
.rs-menu { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; pointer-events: none; }
.rs-menu > * { pointer-events: auto; }
.rs-menu .head { display: flex; align-items: center; gap: 18px; padding: 10px 18px;
  background: linear-gradient(rgba(10,6,12,.92), rgba(10,6,12,.6)); border-bottom: 1px solid var(--rs-line); }
.rs-menu .logo { font-family: Georgia, serif; font-size: 28px; letter-spacing: 2px; text-shadow: 0 0 12px #ff5d9e; white-space: nowrap; }
.rs-menu .tabs { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.rs-menu .tab { background: transparent; border: 1px solid transparent; position: relative; }
.rs-menu .tab.on { border-color: var(--rs-gold); background: rgba(255,211,110,.12); color: var(--rs-gold); }
.rs-menu .tab .badge { position: absolute; top: -6px; right: -6px; background: var(--rs-pink); color: #000;
  border-radius: 9px; font-size: 11px; padding: 1px 6px; font-weight: bold; }
.rs-menu .gold { font-size: 20px; color: var(--rs-gold); white-space: nowrap; }
.rs-menu .gold span { font-size: 13px; color: var(--rs-dim); }
.rs-menu .body { flex: 1; overflow: auto; padding: 14px 18px; }
.rs-menu:not(.tab-hero) .body { background: rgba(10, 6, 12, .78); }
.rs-menu .ttl { font-family: Georgia, serif; color: var(--rs-gold); font-size: 17px; margin: 10px 0 6px; }
.rs-menu .ttl span { color: var(--rs-dim); font-size: 13px; font-family: inherit; }

/* hero tab */
.rs-menu.tab-hero .body { display: flex; gap: 16px; align-items: stretch; pointer-events: none; }
.rs-menu.tab-hero .body > .col { pointer-events: auto; }
.rs-menu .col.left { width: 240px; background: var(--rs-panel); border: 1px solid var(--rs-line); border-radius: 10px; padding: 6px 10px; overflow: auto; }
.rs-menu .col.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; padding-bottom: 10px; pointer-events: none !important; }
.rs-menu .col.center > * { pointer-events: auto; }
.rs-menu .col.right { width: 400px; background: var(--rs-panel); border: 1px solid var(--rs-line); border-radius: 10px; padding: 6px 14px; overflow: auto; }
.rs-menu .classes .cls { display: flex; gap: 10px; align-items: center; padding: 7px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.rs-menu .classes .cls:hover { background: rgba(255,255,255,.05); }
.rs-menu .classes .cls.on { border-color: var(--rs-gold); background: rgba(255,211,110,.1); }
.rs-menu .classes .nm { font-size: 16px; }
.rs-menu .classes .sub { font-size: 12px; color: var(--rs-dim); }
.rs-menu .namebox input { font: inherit; font-size: 22px; text-align: center; width: 260px; color: #fff;
  background: rgba(10,6,12,.75); border: 1px solid var(--rs-line); border-radius: 8px; padding: 6px; }
.rs-menu .looks { display: flex; gap: 6px; align-items: center; background: rgba(10,6,12,.7); padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.rs-menu .looks button { padding: 3px 9px; }
.rs-menu .start { font-size: 22px; padding: 12px 40px; background: linear-gradient(#d0557f, #7a2149); border-color: #ffc2d8;
  box-shadow: 0 0 22px rgba(255,93,158,.45); }
.rs-menu .start small { font-size: 12px; opacity: .7; margin-left: 6px; }
.rs-menu .mult { color: var(--rs-gold); background: rgba(10,6,12,.7); padding: 3px 10px; border-radius: 6px; font-size: 13px; }
.rs-menu .clsinfo p { font-size: 13px; color: var(--rs-dim); margin: 4px 0; }
.rs-menu .nums { display: flex; gap: 12px; font-size: 13px; color: var(--rs-dim); flex-wrap: wrap; }
.rs-menu .nums b { color: #fff; }
.rs-menu .spells { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0; }
.rs-menu .spells .rs-sp.start .rs-icon { box-shadow: 0 0 0 2px var(--rs-gold); }
.rs-menu .stones { display: flex; gap: 6px; flex-wrap: wrap; }
.rs-menu .stone { cursor: pointer; border-radius: 6px; padding: 2px; border: 1px solid transparent; }
.rs-menu .stone.on { border-color: var(--rs-gold); background: rgba(255,211,110,.15); }
.rs-menu .stonedesc { font-size: 13px; color: var(--rs-dim); margin: 6px 0; }
.rs-menu .zones .zn { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.rs-menu .zones .zn:hover { background: rgba(255,255,255,.05); }
.rs-menu .zones .zn.on { background: rgba(255,211,110,.14); outline: 1px solid var(--rs-gold); }
.rs-menu .zones .zn.locked { opacity: .45; cursor: default; }
.rs-menu .zones .num { width: 18px; color: var(--rs-dim); text-align: right; }
.rs-menu .zones .nm { flex: 1; }
.rs-menu .zones .rar { font-size: 12px; }
.rs-menu .zones .ok { color: #7dff7d; }
.rs-menu .zdesc p { font-size: 13px; color: var(--rs-dim); margin: 6px 0; }
.rs-menu .timeline .bt { font-size: 13px; padding: 1px 0; }
.rs-menu .timeline .bt span { color: var(--rs-gold); display: inline-block; width: 44px; }
.rs-menu .timeline .bt.final { color: #ff9c6e; }

/* talents */
.talenthead, .armoryhead, .codexhead { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.talenthead .txp { font-size: 13px; color: var(--rs-dim); }
.talenthead .txp .bar { width: 220px; height: 6px; background: #2a1726; border-radius: 3px; overflow: hidden; }
.talenthead .txp .fill { height: 100%; background: var(--rs-pink); }
.trees { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.tree { flex: 1; min-width: 300px; background: var(--rs-panel); border: 1px solid var(--rs-line); border-radius: 10px; padding: 8px 12px; }
.tree .tname { font-family: Georgia, serif; font-size: 17px; color: var(--rs-gold); display: flex; align-items: center; gap: 8px; }
.tree .tname span { margin-left: auto; color: #fff; }
.tree .trow { display: flex; gap: 10px; justify-content: center; margin: 8px 0; }
.tree .trow.locked .node { filter: grayscale(1) brightness(.5); }
.tree .node { position: relative; cursor: pointer; border-radius: 6px; }
.tree .node .rk { position: absolute; right: -6px; bottom: -6px; font-size: 11px; background: #000c; padding: 0 4px; border-radius: 4px; color: #9f9; }
.tree .node:not(.has) .rs-icon { filter: grayscale(.8) brightness(.75); }
.tree .node.max .rk { color: var(--rs-gold); }
.tree .node.cap .rs-icon { box-shadow: 0 0 0 2px #ff9c6e, 0 0 12px #ff9c6e; }
.tree .mile { font-size: 12px; color: var(--rs-dim); border-left: 2px solid #555; padding: 3px 8px; margin: 4px 0; }
.tree .mile.on { color: #fff; border-color: var(--rs-gold); background: rgba(255,211,110,.08); }
.tree .mile b { color: var(--rs-gold); }

/* armory */
.armoryhead .modes { display: flex; gap: 6px; }
.armoryhead .mode.on { border-color: var(--rs-gold); color: var(--rs-gold); }
.armory { display: inline-block; background: var(--rs-panel); border: 1px solid var(--rs-line); border-radius: 10px; padding: 10px 14px; }
.armory .slotsrow { display: grid; grid-template-columns: 90px repeat(6, 64px); gap: 8px; align-items: center; margin: 6px 0; }
.armory .rhead { font-size: 12px; text-align: center; }
.armory .sname { color: var(--rs-dim); font-size: 14px; }
.armory .piece { position: relative; width: 48px; height: 48px; border: 2px solid #333; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; margin: auto; }
.armory .piece.locked .rs-icon { filter: grayscale(1) brightness(.3); }
.armory .piece.owned { cursor: pointer; }
.armory .piece.worn { box-shadow: 0 0 12px var(--rs-gold); }
.armory .piece .tagw, .armory .piece .tagl { position: absolute; top: -8px; font-size: 10px; padding: 0 4px; border-radius: 4px; }
.armory .piece .tagw { right: -8px; background: var(--rs-gold); color: #000; }
.armory .piece .tagl { left: -8px; background: var(--rs-pink); color: #000; }

/* codex */
.codexhead .equipped { display: flex; gap: 10px; }
.codexhead .eq { width: 200px; min-height: 92px; background: var(--rs-panel); border: 1px solid var(--rs-line); border-radius: 8px; padding: 8px; font-size: 13px; }
.codexhead .eq .k { color: var(--rs-gold); margin-bottom: 4px; }
.codexhead .eq .d { color: var(--rs-dim); font-size: 12px; }
.codexhead .eq .empty { color: #777; }
.codexhead .cache { background: var(--rs-panel); border: 1px solid var(--rs-line); border-radius: 8px; padding: 6px 14px; }
.codexhead .cache p { font-size: 12px; color: var(--rs-dim); margin: 2px 0 8px; }
.codex { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.codex .jewel { display: flex; gap: 10px; align-items: center; border: 1px solid #333; border-radius: 8px; padding: 6px; background: var(--rs-panel); font-size: 13px; }
.codex .jewel.owned { cursor: pointer; }
.codex .jewel.locked .rs-icon { filter: grayscale(1) brightness(.3); }
.codex .jewel.worn { box-shadow: 0 0 10px var(--rs-gold); }
.codex .jewel .d { color: var(--rs-dim); font-size: 12px; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 200; }
.modal .offer { display: flex; gap: 14px; }

/* perks */
.perks { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; margin-bottom: 12px; }
.perk { display: flex; align-items: center; gap: 12px; background: var(--rs-panel); border: 1px solid #333; border-radius: 8px; padding: 8px; }
.perk.has { border-color: var(--rs-line); }
.perk .i { flex: 1; }
.perk .d { font-size: 12px; color: var(--rs-dim); }
.perk .pips { margin-top: 4px; }
.perk .pip { display: inline-block; width: 12px; height: 6px; margin-right: 3px; border-radius: 2px; background: #333; }
.perk .pip.on { background: var(--rs-gold); }
.perk .maxed { color: var(--rs-gold); padding: 0 10px; }

/* achievements */
.achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; }
.ach { display: flex; align-items: center; gap: 10px; background: var(--rs-panel); border: 1px solid #333; border-radius: 8px; padding: 8px 10px; }
.ach.got { border-color: var(--rs-gold); }
.ach .i { flex: 1; }
.ach .d { font-size: 12px; color: var(--rs-dim); }
.ach .bar { height: 4px; background: #333; border-radius: 2px; margin-top: 4px; overflow: hidden; }
.ach .bar .fill { height: 100%; background: var(--rs-pink); }
.ach .rw { color: var(--rs-gold); }

/* run options & options */
.runopts, .options { max-width: 640px; margin: 0 auto; }
.panel .opt { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.panel .opt label { width: 160px; }
.panel .opt select { flex: 1; font: inherit; color: #fff; background: #0008; border: 1px solid var(--rs-line); border-radius: 4px; padding: 3px 6px; }
.panel .opt input[type=range] { flex: 1; }
.panel .opt span { width: 50px; text-align: right; }
.panel .mult { color: var(--rs-gold); font-size: 18px; margin: 12px 0; }
.options p { font-size: 13px; color: var(--rs-dim); }
.options .credits { margin-top: 18px; font-size: 12px; }

/* ---- cards (shared by level-ups and caches) ---- */
.card { width: 230px; min-height: 230px; background: linear-gradient(#2d1d30, #1a111c); border: 2px solid #888;
  border-radius: 12px; padding: 14px; cursor: pointer; position: relative; text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.6); transition: transform .12s; }
.card:hover { transform: translateY(-6px) scale(1.03); }
.card .key { position: absolute; top: 8px; left: 10px; color: var(--rs-dim); font-size: 13px; }
.card .ico { margin: 6px auto 10px; }
.card .title { font-family: Georgia, serif; font-size: 20px; margin-bottom: 4px; }
.card .tag { font-size: 12px; color: var(--rs-dim); margin-bottom: 10px; }
.card .text { font-size: 14px; line-height: 1.35; }
.card.rarity-3 { box-shadow: 0 0 24px rgba(182, 92, 255, .5); }
.card.rarity-4 { box-shadow: 0 0 30px rgba(255, 128, 0, .7); }

/* ---- HUD ---- */
.rs-hud { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.rs-hud .hidden { display: none !important; }
.rs-xpbar { position: absolute; top: 0; left: 0; right: 0; height: 14px; background: rgba(10,6,12,.8); border-bottom: 1px solid var(--rs-line); }
.rs-xpbar .fill { height: 100%; background: linear-gradient(90deg, #3a8cff, #6fd2ff); transition: width .15s; }
.rs-xpbar .lvl { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 11px; line-height: 14px; text-shadow: 0 0 3px #000; }
.rs-frame { position: absolute; top: 24px; left: 16px; display: flex; gap: 10px; align-items: flex-start;
  background: var(--rs-panel); border: 1px solid var(--rs-line); border-radius: 10px; padding: 8px 10px; }
.rs-frame .name { font-size: 15px; }
.rs-frame .name span { color: var(--rs-dim); font-size: 12px; }
.rs-frame .hpbar { position: relative; width: 240px; height: 18px; background: #2a0e14; border-radius: 4px; overflow: hidden; margin-top: 4px; }
.rs-frame .hpbar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ef4a4a, #9c1a1a); transition: width .1s; }
.rs-frame .hpbar .shield { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(200, 230, 255, .55); z-index: 2; mix-blend-mode: screen; }
.rs-frame .hpbar .txt { position: absolute; inset: 0; text-align: center; font-size: 12px; line-height: 18px; z-index: 3; text-shadow: 0 0 3px #000; }
.rs-frame .buffs { display: flex; gap: 4px; margin-top: 5px; min-height: 24px; }
.rs-frame .buff { position: relative; font-size: 11px; }
.rs-frame .buff span:last-child { position: absolute; right: -2px; bottom: -4px; text-shadow: 0 0 3px #000; }
.rs-frame .buff .gem { display: inline-block; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(#fff, var(--rs-pink)); }
.rs-frame .buff.fury { color: #ff9c6e; font-size: 13px; padding: 3px; }
.rs-topcenter { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); text-align: center; min-width: 360px; }
.rs-topcenter .timer { font-size: 34px; font-family: Georgia, serif; text-shadow: 0 2px 6px #000; }
.rs-topcenter .timer.endless { color: #ff9c6e; }
.rs-topcenter .nextboss { font-size: 13px; color: var(--rs-gold); text-shadow: 0 0 4px #000; }
.rs-topcenter .bossbar { margin-top: 8px; }
.rs-topcenter .bossbar .nm { font-size: 15px; text-shadow: 0 0 4px #000; color: #ffd0b0; }
.rs-topcenter .bossbar .bar { width: 420px; height: 14px; background: #2a0e14; border: 1px solid #a33; border-radius: 4px; overflow: hidden; margin: 2px auto 0; }
.rs-topcenter .bossbar .fill { height: 100%; background: linear-gradient(#ff6a3a, #a8250e); transition: width .15s; }
.rs-topcenter .bossbar.final .bar { border-color: #ff9c6e; height: 18px; }
.rs-topcenter .bossbar.enraged .fill { background: linear-gradient(#ff2a2a, #6a0000); animation: rs-pulse .5s infinite alternate; }
@keyframes rs-pulse { from { opacity: 1; } to { opacity: .6; } }
.rs-topright { position: absolute; top: 24px; right: 16px; text-align: right; background: var(--rs-panel);
  border: 1px solid var(--rs-line); border-radius: 10px; padding: 8px 12px; font-size: 13px; color: var(--rs-dim); }
.rs-topright b { color: #fff; font-size: 17px; }
.rs-topright .gold b { color: var(--rs-gold); }
.rs-topright .zone { margin-top: 4px; color: var(--rs-gold); }
.rs-spellbar { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px;
  background: var(--rs-panel); border: 1px solid var(--rs-line); border-radius: 12px; padding: 8px; }
.rs-spellbar .slot { position: relative; width: 48px; height: 48px; border-radius: 8px; background: #0008; overflow: hidden; border: 1px solid #555; }
.rs-spellbar .slot.empty { opacity: .35; }
.rs-spellbar .slot .ico { position: absolute; left: 2px; top: 2px; }
.rs-spellbar .slot .cd { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); }
.rs-spellbar .slot .rank { position: absolute; right: 2px; bottom: 0; font-size: 12px; color: var(--rs-gold); text-shadow: 0 0 3px #000; }
.rs-spellbar .slot .key { display: none; }
.rs-banner { position: absolute; top: 28%; left: 50%; transform: translateX(-50%); text-align: center; width: 80%; }
.rs-banner .line { font-family: Georgia, serif; font-size: 28px; text-shadow: 0 2px 8px #000, 0 0 2px #000; margin: 4px 0;
  animation: rs-in .25s ease-out; transition: opacity .6s; }
.rs-banner .line.small { font-size: 18px; }
.rs-banner .line.boss { color: #ff8a5a; }
.rs-banner .line.pack { color: #ffd36e; }
.rs-banner .line.good { color: #9dff9d; }
.rs-banner .line.stone { color: var(--rs-pink); }
.rs-banner .line.out { opacity: 0; }
@keyframes rs-in { from { transform: scale(1.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.rs-toasts { position: absolute; right: 16px; top: 140px; display: flex; flex-direction: column; gap: 8px; }
.rs-toasts .toast { display: flex; gap: 10px; align-items: center; background: var(--rs-panel); border: 1px solid var(--rs-line);
  border-radius: 8px; padding: 8px 12px; animation: rs-in .3s; transition: opacity .6s; }
.rs-toasts .toast .what { font-size: 11px; color: var(--rs-dim); }
.rs-toasts .toast.out { opacity: 0; }
.rs-arrows .arrow { position: absolute; left: 0; top: 0; display: none; }
.rs-arrows .arrow .tri { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent;
  border-left: 18px solid #ff5050; margin-left: -9px; margin-top: -10px; filter: drop-shadow(0 0 4px #000); }
.rs-arrows .arrow.boss .tri { border-left-color: #ff9c3a; }
.rs-arrows .arrow.ally .tri { border-left-color: #6fd2ff; }
.rs-arrows .arrow .lbl { position: absolute; left: -60px; width: 120px; top: 12px; text-align: center; font-size: 11px; text-shadow: 0 0 3px #000; white-space: nowrap; }
.rs-flash { position: absolute; inset: 0; box-shadow: inset 0 0 120px rgba(255, 0, 0, .0); }
.rs-flash.on { animation: rs-flash .35s; }
@keyframes rs-flash { from { box-shadow: inset 0 0 140px rgba(255, 30, 30, .55); } to { box-shadow: inset 0 0 120px rgba(255, 0, 0, 0); } }
.rs-meter { position: absolute; right: 16px; bottom: 90px; width: 300px; background: var(--rs-panel); border: 1px solid var(--rs-line);
  border-radius: 8px; padding: 8px; font-size: 12px; }
.ttl { color: var(--rs-gold); }
.rs-meter .row, .meter .row { position: relative; display: flex; align-items: center; gap: 6px; padding: 2px 4px; margin: 2px 0; }
.rs-meter .row .bar, .meter .row .bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 127, 180, .25); border-radius: 3px; }
.rs-meter .row .n, .meter .row .n { flex: 1; position: relative; }
.rs-meter .row .v, .meter .row .v { position: relative; color: var(--rs-dim); }
.rs-meter .row .rs-icon, .meter .row .rs-icon { position: relative; }
.rs-intro { position: absolute; top: 27%; left: 50%; transform: translate(-50%, -50%); text-align: center; transition: opacity .6s; }
.rs-intro .zone { font-family: Georgia, serif; font-size: 44px; color: var(--rs-gold); text-shadow: 0 3px 10px #000; }
.rs-intro .msg { font-size: 24px; margin-top: 8px; text-shadow: 0 2px 6px #000; animation: rs-pulse .8s infinite alternate; }
.rs-intro .hint { margin-top: 16px; font-size: 13px; color: #ddd; text-shadow: 0 0 4px #000; }
.rs-intro.gone { opacity: 0; }
.rs-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: auto; }
.rs-overlay.dim, .rs-overlay.cards-overlay { background: rgba(5, 2, 8, .55); }
.rs-overlay .cards-title { font-family: Georgia, serif; font-size: 40px; color: var(--rs-gold); text-shadow: 0 3px 12px #000; margin-bottom: 18px; }
.rs-overlay .cards { display: flex; gap: 18px; }
.rs-overlay .cards-foot { margin-top: 18px; }
.rs-overlay .pause { width: 720px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; max-height: calc(100vh - 32px); box-sizing: border-box; }
.rs-overlay .pause .cols { display: flex; gap: 24px; }
.rs-overlay .pause .cols > div { flex: 1; }
.rs-overlay .pause .ptabs { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid var(--rs-line); padding-bottom: 8px; }
.rs-overlay .pause .ptab { background: transparent; border: 1px solid transparent; }
.rs-overlay .pause .ptab.on { border-color: var(--rs-gold); background: rgba(255,211,110,.12); color: var(--rs-gold); }
.rs-overlay .pause .pbody { flex: 1; min-height: 0; max-height: 62vh; overflow: auto; padding-right: 6px; }
.rs-overlay .pause .ttl { font-family: Georgia, serif; color: var(--rs-gold); font-size: 17px; margin: 12px 0 6px; }
.rs-overlay .pause .ttl:first-child { margin-top: 0; }
.rs-overlay .pause .ttl span { color: var(--rs-dim); font-size: 13px; font-family: inherit; }
.rs-overlay .pause .up { display: flex; gap: 10px; align-items: flex-start; padding: 6px; border-radius: 6px; background: rgba(0,0,0,.25); margin: 4px 0; }
.rs-overlay .pause .up .rs-icon { flex: none; }
.rs-overlay .pause .up .txt { flex: 1; }
.rs-overlay .pause .up .nm { font-size: 15px; }
.rs-overlay .pause .up .tag { font-size: 12px; color: var(--rs-dim); margin-left: 6px; }
.rs-overlay .pause .up .d { font-size: 13px; color: #ddd; }
.rs-overlay .pause .up .ups { font-size: 12px; color: #1eff00; margin-top: 2px; }
.rs-overlay .pause .none { font-size: 13px; color: var(--rs-dim); }
.rs-overlay .pause .options h2:first-child { margin-top: 0; }
table.stats { width: 100%; font-size: 14px; border-collapse: collapse; }
table.stats td { padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,.06); }
table.stats td:last-child { text-align: right; color: #fff; }
.victory { max-width: 560px; text-align: center; }
.victory .sub { color: var(--rs-dim); }
.victory p { font-size: 14px; color: var(--rs-dim); }
.loots { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0; }
.loot { display: flex; align-items: center; gap: 6px; background: #0006; border-radius: 6px; padding: 4px 8px; font-size: 13px; }

/* ---- results ---- */
.rs-results { position: fixed; inset: 0; z-index: 300; background: rgba(5, 2, 8, .7); display: flex; align-items: center; justify-content: center; }
.rs-results .panel { width: 560px; text-align: center; }
.rs-results h1 { font-size: 38px; color: #ff8a8a; }
.rs-results.win h1 { color: var(--rs-gold); }
.rs-results .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.rs-results .grid div { background: #0006; border-radius: 6px; padding: 8px; }
.rs-results .grid span { display: block; font-size: 12px; color: var(--rs-dim); }
.rs-results .grid b { font-size: 22px; }
.rs-results .newpts { color: var(--rs-pink); font-size: 18px; margin: 8px 0; }
.rs-results .meter { text-align: left; font-size: 12px; max-height: 240px; overflow: auto; }

.rs-achtoast { position: fixed; z-index: 400; left: 50%; top: 80px; transform: translateX(-50%); background: var(--rs-panel2);
  border: 1px solid var(--rs-gold); border-radius: 10px; padding: 10px 24px; text-align: center; animation: rs-in .3s; transition: opacity .6s; }
.rs-achtoast .k { font-size: 12px; color: var(--rs-gold); text-transform: uppercase; letter-spacing: 2px; }
.rs-achtoast .nm { font-size: 20px; font-family: Georgia, serif; }
.rs-achtoast .d { font-size: 12px; color: var(--rs-dim); }
.rs-achtoast.out { opacity: 0; }

.rs-icon.tint-pink { filter: hue-rotate(290deg) saturate(2.5) brightness(1.1); }

/* ---- co-op ---- */
.rs-allylabels .lbl { position: absolute; left: 0; top: 0; margin-left: -60px; width: 120px; text-align: center;
  font-size: 13px; color: #9fe0ff; text-shadow: 0 0 3px #000, 0 0 2px #000; white-space: nowrap; }
.rs-allylabels .lbl.down { color: #ff8a8a; }
.rs-allylist { position: absolute; top: 120px; left: 16px; display: flex; flex-direction: column; gap: 4px; }
.rs-allylist .ally { display: flex; align-items: center; gap: 6px; background: var(--rs-panel); border: 1px solid var(--rs-line);
  border-radius: 6px; padding: 3px 8px; font-size: 13px; }
.rs-allylist .ally.down { border-color: #a33; }
.rs-allylist .ally b { color: #ff8a8a; font-size: 11px; }
.rs-down { position: absolute; top: 58%; left: 50%; transform: translateX(-50%); text-align: center;
  background: var(--rs-panel); border: 1px solid #a33; border-radius: 10px; padding: 10px 20px; }
.rs-down .t { font-family: Georgia, serif; font-size: 24px; color: #ff8a8a; }
.rs-down .s { font-size: 13px; color: var(--rs-dim); }
.rs-down .bar { height: 6px; background: #2a1726; border-radius: 3px; margin-top: 8px; overflow: hidden; }
.rs-down .bar .fill { height: 100%; width: 0; background: #7dff7d; }
.victory .wait { color: var(--rs-dim); font-size: 14px; }
.coop { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.coop .panel { min-width: 320px; }
.coop .panel h2 { margin-top: 0; }
.coop input[type=text], .coop input[type=password] { font: inherit; color: #fff; background: rgba(10,6,12,.75);
  border: 1px solid var(--rs-line); border-radius: 6px; padding: 6px 8px; width: 100%; box-sizing: border-box; margin: 4px 0 8px; }
.coop .row { display: flex; gap: 8px; align-items: center; }
.coop .row > * { flex: 1; }
.coop .err { color: #ff8a8a; font-size: 13px; min-height: 18px; }
.coop .lob { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; background: #0005; margin: 4px 0; font-size: 14px; }
.coop .lob .z { flex: 1; color: var(--rs-dim); }
.coop .member { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: #0005; border-radius: 6px; margin: 4px 0; }
.coop .member .host { color: var(--rs-gold); font-size: 12px; }
.coop .code { font-size: 30px; letter-spacing: 6px; color: var(--rs-gold); font-family: Georgia, serif; }
.coop .chatlog { height: 160px; overflow: auto; background: #0005; border-radius: 6px; padding: 6px; font-size: 13px; }
.coop .chatlog b { color: #9fe0ff; }
.coop .empty { color: var(--rs-dim); font-size: 13px; }