/* Realm of Mana — UI stylesheet (A7) */

:root {
  --font: 'Pixelify Sans', 'Segoe UI', system-ui, sans-serif;
  --ink: #4a3626;          /* dark ink on parchment */
  --ink-soft: #6b543d;
  --pale: #efe6d0;         /* light text on dark */
  --pale-dim: #b9ac90;
  --gold: #fde047;
  --bg: #0d0b14;
  --panel-w: 20px;
  --side-w: 260px;
  --rc-common: #b0b0b0; --rc-uncommon: #5eead4; --rc-rare: #60a5fa;
  --rc-epic: #c084fc; --rc-legendary: #fb923c; --rc-relic: #fde047;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  font-family: var(--font);
  color: var(--pale);
  user-select: none;
  -webkit-user-select: none;
  cursor: url('../assets/ui/t1_cursors_cursor_01.png') 0 0, auto;
}
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
button, input { font-family: inherit; cursor: inherit; }
.btn:not(:disabled), .slot, .slotcard, .classcard, .sc-del, .sc-confirm button,
#sidetab, .opt input, label.opt {
  cursor: url('../assets/ui/t1_cursors_cursor_02.png') 18 6, pointer;
}
#charname { cursor: url('../assets/ui/t1_cursors_cursor_01.png') 0 0, text; }
.hidden { display: none !important; }

/* ---------- canvas & vignette ---------- */
#game {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; background: #101720;
  transition: filter .35s ease;
}
body[data-screen] #game { filter: brightness(.45) saturate(.6) blur(1px); }
body[data-screen="loading"] #game { filter: brightness(.2); }

#vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(140,10,10,.42) 100%);
  transition: opacity .4s;
}
#vignette.lowhp { opacity: 1; animation: vpulse 1.05s ease-in-out infinite; }
@keyframes vpulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- HUD frame ---------- */
#ui { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#ui > * { pointer-events: none; }
body[data-screen] #ui { visibility: hidden; }
body[data-screen="pause"] #ui { visibility: visible; }

#topleft { position: absolute; top: 10px; left: 12px; text-shadow: 0 2px 0 #000; }
#zone { font-size: 18px; letter-spacing: .5px; }
#zonelabel { color: var(--pale); }
#dangerpips { color: #f87171; margin-left: 8px; font-size: 14px; letter-spacing: 2px; }
#zoneband { color: #e6d3a0; margin-left: 8px; font-size: 12px; letter-spacing: .5px; vertical-align: 1px;
  text-shadow: 0 1px 2px #000, 0 0 5px #000, 0 0 5px #000; }
#fps { font-size: 12px; color: var(--pale-dim); display: none; margin-top: 2px; }
body.show-fps #fps { display: block; }

/* boss bar */
#bossbar {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(520px, 60vw); text-align: center;
}
#bossname {
  font-size: 20px; color: #fecaca; letter-spacing: 1px;
  text-shadow: 0 2px 0 #000, 0 0 14px rgba(220,38,38,.65); margin-bottom: 2px;
}
#bossbar .rombar { --bs: .75; width: 100%; }

/* toasts */
#toasts {
  position: absolute; top: 84px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content; max-width: 70vw;
}
.toast {
  background: rgba(16,12,24,.92); border: 2px solid #7c6a4c; border-radius: 4px;
  padding: 6px 16px; font-size: 16px; color: var(--gold);
  text-shadow: 0 1px 0 #000; box-shadow: 0 4px 10px rgba(0,0,0,.5);
  animation: toast-in .28s cubic-bezier(.2,1.4,.4,1) both;
}
.toast.bye { animation: toast-out .3s ease both; }
@keyframes toast-in { from { transform: translateY(-18px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateY(-12px); opacity: 0; } }

/* event log + buffs */
#bottomleft { position: absolute; left: 12px; bottom: 34px; max-width: 40vw; }
#buffs { display: flex; gap: 5px; margin-bottom: 6px; }
.buff {
  width: 26px; height: 26px; border-radius: 5px; display: grid; place-items: center;
  font-size: 15px; background: rgba(10,8,18,.85); border: 2px solid currentColor;
  text-shadow: 0 0 6px currentColor; animation: buff-pop .25s ease both;
}
@keyframes buff-pop { from { transform: scale(.4); opacity: 0; } }
#eventlog { display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.logline {
  text-shadow: 0 1px 0 #000; animation: log-fade 10s linear forwards;
  background: linear-gradient(90deg, rgba(0,0,0,.45), transparent);
  padding: 1px 8px 1px 6px; border-radius: 3px;
}
@keyframes log-fade { 0% { opacity: 1; } 60% { opacity: .9; } 100% { opacity: .25; } }

/* hints footer */
#hints {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  font-size: 13px; color: var(--pale-dim); text-shadow: 0 1px 0 #000; white-space: nowrap;
}
#hints b { color: var(--pale); }

/* ---------- bars (pack art: t1 bigbar) ---------- */
.rombar {
  --bs: .5; /* scale of 64px source art */
  position: relative;
  height: calc(64px * var(--bs));
  width: 100%;
}
.rombar .cap, .rombar .mid { position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none; }
.rombar .cap {
  width: calc(24px * var(--bs));
  background-image: url('../assets/ui/t1_bars_bigbar_base.png');
  background-size: calc(320px * var(--bs)) calc(64px * var(--bs));
  background-repeat: no-repeat;
}
.rombar .cap.l { left: 0; background-position: calc(-40px * var(--bs)) 0; }
.rombar .cap.r { right: 0; background-position: calc(-256px * var(--bs)) 0; }
.rombar .mid {
  left: calc(24px * var(--bs)); right: calc(24px * var(--bs));
  background-image: url('../assets/ui/t1_bars_bigbar_base.png');
  background-size: 500% 100%; background-position: 50% 0;
}
.rombar .track {
  position: absolute; z-index: 3; overflow: hidden;
  left: calc(22px * var(--bs)); right: calc(22px * var(--bs));
  top: calc(20px * var(--bs)); height: calc(24px * var(--bs));
  border-radius: 3px; background: rgba(14,10,8,.6);
}
.rombar .fill, .rombar .ghost {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background-image: url('../assets/ui/t1_bars_bigbar_fill.png');
  background-size: calc(64px * var(--bs)) calc(64px * var(--bs));
  background-position: 0 calc(-20px * var(--bs));
  background-repeat: repeat-x;
}
.rombar .fill { z-index: 2; transition: width .12s linear; }
.rombar .ghost { z-index: 1; transition: width .55s cubic-bezier(.2,.7,.3,1) .18s; filter: brightness(2.4) saturate(.3); }
.rombar.mp .fill, .rombar.mp .ghost { filter: hue-rotate(215deg) saturate(1.15); }
.rombar.mp .ghost { filter: hue-rotate(215deg) brightness(2.2) saturate(.4); }
.rombar.xp .fill, .rombar.xp .ghost { filter: hue-rotate(48deg) brightness(1.25); }
.rombar.xp .ghost { filter: hue-rotate(48deg) brightness(2.2) saturate(.4); }
/* AB11 — mount/sprint stamina gauge (amber; greyed while recovering) */
.rombar.stam .fill, .rombar.stam .ghost { filter: hue-rotate(35deg) saturate(1.3) brightness(1.12); }
.rombar.stam .ghost { filter: hue-rotate(35deg) brightness(2.2) saturate(.45); }
.rombar.stam.cooling .fill { filter: hue-rotate(35deg) grayscale(.55) brightness(.9); }
.rombar .bartext {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  font-size: calc(26px * var(--bs) + 4px); color: #fff; text-shadow: 0 1px 0 #000, 0 0 4px #000;
  pointer-events: none;
}

/* ---------- sidebar ---------- */
#sidebar {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--side-w);
  background: linear-gradient(180deg, rgba(19,14,26,.94), rgba(12,9,18,.94));
  border-left: 3px solid #3d2f22;
  box-shadow: -8px 0 24px rgba(0,0,0,.55);
  pointer-events: auto;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
/* -3px keeps the border sliver on-screen so #sidetab is not clipped at the right edge */
#sidebar.collapsed { transform: translateX(calc(var(--side-w) - 3px)); }
#sidescroll {
  height: 100%; overflow-y: auto; overflow-x: hidden;
  padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin; scrollbar-color: #4d3b28 transparent;
}
#sidescroll > * {
  flex-shrink: 0; /* overflowing content must scroll, never squash the bars/stats */
}
#sidetab {
  position: absolute; left: -26px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 72px; border: 2px solid #3d2f22; border-right: none;
  border-radius: 8px 0 0 8px; background: rgba(19,14,26,.94); color: var(--pale-dim);
  display: grid; place-items: center;
}
#sidetab:hover { color: var(--gold); }
#sidetab .arrow { border: solid currentColor; border-width: 0 3px 3px 0; padding: 4px; transform: rotate(-45deg); transition: transform .3s; }
#sidebar.collapsed #sidetab .arrow { transform: rotate(135deg); }

#minimapbox { text-align: center; }
#minimap {
  width: 220px; height: 220px; border: 3px solid #4d3b28; border-radius: 6px;
  background: #0a1420; box-shadow: inset 0 0 18px rgba(0,0,0,.7);
}
#zonename { font-size: 15px; color: var(--pale-dim); margin-top: 3px; text-shadow: 0 1px 0 #000; }

#playercard {
  display: flex; gap: 10px; align-items: center;
  background: rgba(255,255,255,.04); border: 2px solid #3d2f22; border-radius: 8px; padding: 7px 9px;
}
#pc-portrait { width: 48px; height: 48px; border-radius: 6px; border: 2px solid #5b4732; background: #1a1425; }
#pc-info { min-width: 0; flex: 1; }
#pc-name { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pc-class { font-size: 13px; color: var(--pale-dim); }
#pc-meta { display: flex; justify-content: space-between; font-size: 13px; margin-top: 2px; }
#pc-level { color: #86efac; }
#pc-fame { color: var(--gold); }

/* stats grid */
#stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; padding: 2px 4px; }
.stat { display: flex; justify-content: space-between; font-size: 14px; line-height: 1.35; }
.stat .sn { color: var(--pale-dim); }
.stat .sv { color: var(--pale); }
.stat.maxed .sv { color: #4ade80; text-shadow: 0 0 6px rgba(74,222,128,.5); }
.stat .sb { color: #93c5fd; font-size: 12px; margin-left: 3px; }

.sec-label { font-size: 13px; color: var(--pale-dim); letter-spacing: 1px; text-transform: uppercase; margin: 2px 2px -3px; }

/* slots */
#equip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#inv { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } /* 10 quick-access slots (2×5) */
#quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0 46px; }
.slot {
  position: relative; aspect-ratio: 1; border-radius: 6px;
  background: linear-gradient(180deg, #241b30, #171122);
  border: 2px solid #453422; box-shadow: inset 0 2px 6px rgba(0,0,0,.6);
  touch-action: none;
}
.slot::before {
  content: attr(data-ph); position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12px; color: #5d5040; pointer-events: none;
}
.slot.filled::before { content: ''; }
.slot.filled { box-shadow: inset 0 0 0 2px var(--rc, #666), inset 0 2px 6px rgba(0,0,0,.6); }
.slot .iico { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; pointer-events: none; }
.slot .tbadge {
  position: absolute; right: 2px; bottom: 0; font-size: 11px; color: var(--pale-dim);
  text-shadow: 0 1px 0 #000; pointer-events: none;
}
.slot[data-key]::after {
  content: attr(data-key); position: absolute; left: 3px; top: 0; font-size: 11px;
  color: #6f6046; pointer-events: none;
}
.slot:hover { border-color: #8a6f47; }
.slot.dragover { border-color: var(--gold); box-shadow: 0 0 10px rgba(253,224,71,.4), inset 0 2px 6px rgba(0,0,0,.6); }
.slot.dragsrc .iico { opacity: .3; }

/* drag ghost */
#dragghost {
  position: fixed; z-index: 30; width: 44px; height: 44px; pointer-events: none;
  transform: translate(-50%, -50%) scale(1.12); filter: drop-shadow(0 4px 6px rgba(0,0,0,.6));
}
#dragghost img { width: 100%; height: 100%; object-fit: contain; }

/* bag panel */
#bagpanel {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%);
  pointer-events: auto; padding: 10px 14px 12px; min-width: 300px;
  animation: bag-in .22s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes bag-in { from { transform: translateX(-50%) translateY(24px); opacity: 0; } }
#bagtitle { text-align: center; color: var(--ink); font-weight: 700; font-size: 15px; margin-bottom: 6px; }
#baggrid { display: grid; grid-template-columns: repeat(4, 52px); gap: 6px; justify-content: center; }
#baggrid .slot { background: linear-gradient(180deg, #3a2c1c, #2b2013); border-color: #5d4930; }

/* ---------- pack-art building blocks ---------- */
.panel {
  border: var(--panel-w) solid transparent;
  border-image: url('../assets/ui/t2_banners_carved_9slides.png') 64 fill / var(--panel-w) stretch;
  color: var(--ink);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.55));
}
#bagpanel.panel { filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }

.btn {
  display: inline-block; position: relative;
  border: 14px solid transparent;
  border-image: url('../assets/ui/t2_buttons_button_blue_9slides.png') 64 fill / 14px stretch;
  color: #14333b; font-weight: 700; font-size: 17px; letter-spacing: .5px;
  padding: 0 10px; min-width: 120px; text-shadow: 0 1px 0 rgba(255,255,255,.25);
  transition: transform .06s ease;
}
.btn:hover:not(:disabled) { border-image-source: url('../assets/ui/t2_buttons_button_hover_9slides.png'); }
.btn:active:not(:disabled) {
  border-image-source: url('../assets/ui/t2_buttons_button_blue_9slides_pressed.png');
  transform: translateY(3px);
}
.btn.red { border-image-source: url('../assets/ui/t2_buttons_button_red_9slides.png'); color: #4a1414; }
.btn.red:hover:not(:disabled) { border-image-source: url('../assets/ui/t2_buttons_button_red_9slides.png'); filter: brightness(1.12); }
.btn.red:active:not(:disabled) { border-image-source: url('../assets/ui/t2_buttons_button_red_9slides_pressed.png'); filter: none; }
.btn:disabled {
  border-image-source: url('../assets/ui/t2_buttons_button_disable_9slides.png');
  color: #7d715c; text-shadow: none;
}
.btn.big { font-size: 21px; min-width: 200px; border-width: 17px; border-image-width: 17px; }
.btn.tiny { font-size: 14px; min-width: 44px; border-width: 10px; border-image-width: 10px; }

.ribbon {
  height: 52px; line-height: 40px; margin: -4px auto 10px; width: max-content; min-width: 260px;
  padding: 0 12px; text-align: center;
  border-style: solid; border-width: 0 44px;
  border-image: url('../assets/ui/t2_ribbons_ribbon_blue_3slides.png') 0 64 fill / 0 44px stretch;
  color: #eafcff; font-size: 21px; font-weight: 700; letter-spacing: 1px;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
}
.ribbon.red { border-image-source: url('../assets/ui/t2_ribbons_ribbon_red_3slides.png'); color: #ffe4e4; }
.ribbon.big-ribbon { height: 66px; line-height: 52px; font-size: 30px; letter-spacing: 6px; border-width: 0 56px; border-image-width: 0 56px; }

/* ---------- screens ---------- */
#screens { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.screen {
  position: absolute; inset: 0; display: flex;
  opacity: 0; pointer-events: none; transition: opacity .3s ease; overflow-y: auto; padding: 20px;
}
/* margin:auto centers when content fits AND keeps the top reachable when it
   overflows (align-items:center would push it above the scrollable area) */
.screen > * { margin: auto; }
.screen.active { opacity: 1; pointer-events: auto; }

.panel.wide { width: min(880px, 94vw); padding: 4px 14px 10px; }
.row-end { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.sub-head { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 6px; letter-spacing: .5px; }

/* loading */
#screen-loading { background: radial-gradient(circle at 50% 42%, #1b1430 0%, #0d0b14 70%); }
.loading-box { text-align: center; }
.load-title { font-size: 26px; letter-spacing: 6px; color: var(--pale-dim); margin: 14px 0 18px; }
#loadbar {
  width: min(420px, 76vw); height: 22px; margin: 0 auto; border-radius: 11px;
  border: 3px solid #4d3b28; background: #14101e; overflow: hidden; box-shadow: inset 0 2px 8px #000;
}
#loadfill {
  height: 100%; width: 0%; border-radius: 8px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa, #7c3aed); background-size: 200% 100%;
  animation: loadshimmer 1.4s linear infinite; transition: width .25s ease;
  box-shadow: 0 0 12px rgba(167,139,250,.7);
}
@keyframes loadshimmer { to { background-position: -200% 0; } }
#loadlabel { margin-top: 10px; font-size: 15px; color: var(--pale-dim); }
#loadtip { margin-top: 26px; font-size: 14px; color: #7a6f8f; max-width: 420px; margin-inline: auto; min-height: 2.6em; }

/* title */
#screen-title {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(124,58,237,.28), transparent 60%),
    radial-gradient(ellipse at 50% -20%, rgba(45,212,191,.12), transparent 55%),
    linear-gradient(180deg, #141022 0%, #0d0b14 100%);
}
.title-wrap { text-align: center; position: relative; z-index: 1; padding-bottom: 8vh; }
.crystal {
  width: 64px; height: 92px; margin: 0 auto 6px; position: relative;
  background: linear-gradient(150deg, #d4f7ff 0%, #7dd3fc 28%, #818cf8 62%, #6d28d9 100%);
  clip-path: polygon(50% 0%, 92% 30%, 74% 100%, 26% 100%, 8% 30%);
  filter: drop-shadow(0 0 22px rgba(139,92,246,.85));
  animation: crystal-bob 3.2s ease-in-out infinite;
}
.crystal::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 38%, transparent 46%);
  clip-path: inherit; animation: crystal-glint 3.2s ease-in-out infinite;
}
.crystal.small { width: 36px; height: 52px; margin-bottom: 0; }
@keyframes crystal-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes crystal-glint { 0%, 55%, 100% { opacity: 0; } 70% { opacity: 1; } }

.logo { line-height: .92; margin: 0 0 2px; }
.logo-img {
  display: block; margin: 0 auto;
  width: min(560px, 84vw); height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .55));
  animation: logo-bob 4s ease-in-out infinite;
}
@keyframes logo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.load-logo { width: min(360px, 72vw); margin-bottom: 16px; animation: none; }
.logo span { display: block; }
.lg-realm, .lg-mana {
  font-size: clamp(52px, 10vw, 96px); font-weight: 700; letter-spacing: 8px;
  background: linear-gradient(180deg, #fef3c7 18%, #fbbf24 46%, #b45309 78%, #78350f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #2a1505) drop-shadow(0 6px 14px rgba(0,0,0,.7));
}
.lg-of {
  font-size: clamp(18px, 3vw, 26px); color: #a5b4fc; letter-spacing: 14px; margin: 4px 0;
  text-transform: uppercase; text-shadow: 0 0 12px rgba(129,140,248,.8);
}
.tagline { color: var(--pale-dim); font-size: 16px; letter-spacing: 3px; margin: 10px 0 26px; }
.title-menu { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#version { position: absolute; bottom: 10px; right: 14px; font-size: 12px; color: #665d78; }

.motes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.motes i {
  position: absolute; bottom: -12px; width: 6px; height: 6px; border-radius: 50%;
  background: #a78bfa; box-shadow: 0 0 10px 2px rgba(167,139,250,.8);
  animation: mote-rise linear infinite; opacity: 0;
}
.motes i:nth-child(1) { left: 8%;  animation-duration: 9s;  animation-delay: 0s; }
.motes i:nth-child(2) { left: 22%; animation-duration: 12s; animation-delay: 2s; width: 4px; height: 4px; }
.motes i:nth-child(3) { left: 34%; animation-duration: 8s;  animation-delay: 4s; background: #5eead4; box-shadow: 0 0 10px 2px rgba(94,234,212,.7); }
.motes i:nth-child(4) { left: 48%; animation-duration: 13s; animation-delay: 1s; }
.motes i:nth-child(5) { left: 61%; animation-duration: 10s; animation-delay: 5s; width: 4px; height: 4px; background: #5eead4; box-shadow: 0 0 8px 2px rgba(94,234,212,.7); }
.motes i:nth-child(6) { left: 72%; animation-duration: 9s;  animation-delay: 3s; }
.motes i:nth-child(7) { left: 84%; animation-duration: 14s; animation-delay: 6s; }
.motes i:nth-child(8) { left: 93%; animation-duration: 11s; animation-delay: 2.5s; width: 4px; height: 4px; }
@keyframes mote-rise {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  90% { opacity: .8; }
  100% { transform: translateY(-105vh); opacity: 0; }
}

/* charselect */
.cs-top { text-align: center; margin-bottom: 8px; }
.fame-chip {
  display: inline-block; background: rgba(74,54,38,.16); border: 2px solid #8a6f47;
  border-radius: 20px; padding: 3px 16px; font-size: 15px; color: var(--ink);
}
.fame-chip b { color: #92400e; font-size: 17px; }
.cs-cols { display: grid; grid-template-columns: 1fr 240px; gap: 14px; }
#slotcards { display: flex; flex-direction: column; gap: 8px; }
.slotcard {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px;
  background: rgba(74,54,38,.12); border: 2px solid #8a6f47; min-height: 68px;
  transition: transform .08s ease, box-shadow .08s ease; position: relative;
}
.slotcard:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0,0,0,.25); border-color: #b45309; }
.slotcard img { width: 52px; height: 52px; border-radius: 6px; border: 2px solid #8a6f47; }
.slotcard .sc-name { font-size: 18px; font-weight: 700; color: var(--ink); }
.slotcard .sc-sub { font-size: 13px; color: var(--ink-soft); }
.slotcard.empty { justify-content: center; color: var(--ink-soft); font-size: 16px; border-style: dashed; }
.slotcard .sc-del {
  position: absolute; top: 6px; right: 8px; border: none; background: none;
  color: #9a3412; font-size: 15px; font-weight: 700; opacity: .5;
}
.slotcard .sc-del:hover { opacity: 1; }
.sc-confirm { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #9a3412; }
.sc-confirm button { border: 2px solid #9a3412; background: none; border-radius: 4px; padding: 1px 10px; color: #9a3412; font-size: 13px; }
.sc-confirm button:hover { background: #9a3412; color: #f6e7c8; }
#gravelist { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; font-size: 13px; color: var(--ink-soft); }
.grave { border-bottom: 1px dashed #a08454; padding: 2px 0 3px; }
.grave b { color: var(--ink); }
.grave .g-by { font-size: 12px; }

/* newchar */
.nc-cols { display: grid; grid-template-columns: 1fr 250px; gap: 14px; }
#classgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; align-content: start; }
.classcard {
  text-align: center; padding: 8px 4px 6px; border-radius: 8px;
  background: rgba(74,54,38,.12); border: 2px solid #8a6f47;
  transition: transform .08s ease, box-shadow .08s ease;
}
.classcard img { width: 56px; height: 56px; border-radius: 6px; border: 2px solid #8a6f47; }
.classcard .cc-name { font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 3px; }
.classcard .cc-kit { font-size: 11px; color: var(--ink-soft); }
.classcard:not(.locked):hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,.25); border-color: #b45309; }
.classcard.selected { border-color: #b45309; box-shadow: 0 0 0 2px #b45309, 0 6px 12px rgba(0,0,0,.25); background: rgba(180,83,9,.14); }
.classcard.locked { filter: grayscale(1) contrast(.82); opacity: .62; }
.classcard.locked .cc-kit { color: #7f1d1d; }

#classpreview { display: flex; flex-direction: column; gap: 8px; }
.pv-head { display: flex; gap: 10px; align-items: center; }
#pv-portrait { width: 56px; height: 56px; border-radius: 6px; border: 2px solid #8a6f47; background: rgba(0,0,0,.15); }
#pv-name { font-size: 20px; font-weight: 700; color: var(--ink); }
#pv-kit { font-size: 12px; color: var(--ink-soft); }
#pv-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.35; min-height: 3.6em; }
#previewstats { display: flex; flex-direction: column; gap: 3px; }
.pvstat { display: grid; grid-template-columns: 38px 1fr 58px; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-soft); }
.pvstat .bar { height: 8px; border-radius: 4px; background: rgba(0,0,0,.22); overflow: hidden; }
.pvstat .bar i { display: block; height: 100%; background: linear-gradient(90deg, #16a34a, #86efac); border-radius: 4px; transition: width .3s ease; }
.pvstat .num { text-align: right; color: var(--ink); }
#pv-ability {
  font-size: 13px; color: var(--ink); background: rgba(124,58,237,.1);
  border: 2px solid #7c5aa6; border-radius: 6px; padding: 6px 8px; line-height: 1.35; min-height: 3.4em;
}
#pv-ability b { color: #5b21b6; }
.name-row { display: flex; gap: 6px; }
#charname {
  flex: 1; min-width: 0; font-size: 17px; padding: 5px 10px; border-radius: 6px;
  border: 2px solid #8a6f47; background: #f6ecd6; color: var(--ink); outline: none;
}
#charname:focus { border-color: #b45309; }

/* death */
#screen-death { background: radial-gradient(ellipse at center, rgba(60,4,4,.55), rgba(5,2,4,.94) 75%); }
.death-box { text-align: center; animation: death-in .8s ease both; }
@keyframes death-in { from { opacity: 0; transform: scale(1.06); } }
#death-ribbon { margin-bottom: 22px; animation: death-drop .6s cubic-bezier(.2,1.2,.4,1) .15s both; }
@keyframes death-drop { from { transform: translateY(-46px); opacity: 0; } }
#death-name { font-size: 40px; font-weight: 700; color: #fecaca; text-shadow: 0 3px 0 #000, 0 0 22px rgba(220,38,38,.5); }
#death-class { font-size: 18px; color: var(--pale-dim); margin: 2px 0 10px; }
#death-by { font-size: 16px; color: #f87171; margin-bottom: 16px; }
#death-recap {
  display: flex; justify-content: center; gap: 26px; margin-bottom: 14px;
  font-size: 15px; color: var(--pale-dim);
}
#death-recap b { display: block; font-size: 22px; color: var(--pale); }
#death-fame-row { font-size: 19px; color: var(--pale-dim); margin-bottom: 8px; }
#death-fame { color: var(--gold); font-size: 30px; font-weight: 700; text-shadow: 0 0 14px rgba(253,224,71,.6); }
.quote { font-size: 13px; color: #6b7280; font-style: italic; margin: 6px 0 22px; }

/* pause / options */
#screen-pause .panel { width: min(460px, 92vw); padding: 4px 18px 14px; }
.opt-rows { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 15px; color: var(--ink); }
.opt input[type=range] { width: 190px; }
.opt input[type=checkbox] { width: 22px; height: 22px; accent-color: #b45309; cursor: pointer; }
/* H3: fatter, easier-to-grab sliders + comfortable checkboxes everywhere */
input[type=range] { height: 22px; cursor: pointer; accent-color: #b45309; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: rgba(0,0,0,.28); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px;
  margin-top: -6px; border-radius: 50%; background: #b45309; border: 2px solid #f0d9a8; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.5); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(0,0,0,.28); }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #b45309;
  border: 2px solid #f0d9a8; cursor: pointer; }
.pause-btns { display: flex; flex-direction: column; gap: 7px; align-items: center; }
#abandon-confirm {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 10px; font-size: 14px; color: #7f1d1d;
}

/* help */
.help-cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 22px; font-size: 14px; color: var(--ink); }
.keys { border-collapse: collapse; }
.keys td { padding: 3px 10px 3px 0; color: var(--ink-soft); }
.keys td:last-child { color: var(--ink); }
kbd {
  font-family: inherit; background: rgba(0,0,0,.14); border: 1px solid #8a6f47;
  border-bottom-width: 3px; border-radius: 4px; padding: 0 6px; font-size: 13px; color: var(--ink);
}
.mech { list-style: none; }
.mech li { margin-bottom: 7px; line-height: 1.35; color: var(--ink-soft); }
.mech b { color: var(--ink); }

/* ---------- tooltip ---------- */
/* z-index above every window/panel (.gwin is 46+, modals 60) so hover tooltips are never
   hidden behind the Bags panel. #tooltip-cmp is the Diablo-style "Equipped" compare panel. */
#tooltip, #tooltip-cmp {
  position: fixed; z-index: 9999; pointer-events: none; max-width: 300px;
  background: rgba(13,10,20,.97); border: 2px solid var(--rc, #7c6a4c); border-radius: 7px;
  padding: 11px 14px; font-size: 13.5px; line-height: 1.5; color: var(--pale-dim);
  box-shadow: 0 6px 18px rgba(0,0,0,.7), 0 0 12px -4px var(--rc, transparent);
  animation: tip-in .12s ease both;
}
#tooltip-cmp { opacity: .96; }
@keyframes tip-in { from { opacity: 0; transform: translateY(4px); } }
#tooltip .tt-name, #tooltip-cmp .tt-name { font-size: 17px; font-weight: 700; color: var(--rc, #fff); line-height: 1.25; }
#tooltip .tt-sub, #tooltip-cmp .tt-sub { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--pale-dim); margin-bottom: 6px; }
#tooltip .tt-row, #tooltip-cmp .tt-row { color: var(--pale); }
#tooltip .tt-row .lbl, #tooltip-cmp .tt-row .lbl { color: var(--pale-dim); }
#tooltip .tt-desc, #tooltip-cmp .tt-desc { margin-top: 7px; color: #cbbf9f; font-style: italic; font-size: 13.5px; line-height: 1.5; }
#tooltip .tt-cmp { margin-top: 3px; }
#tooltip .tt-cmp .up { color: #4ade80; }
#tooltip .tt-cmp .down { color: #f87171; }
#tooltip .tt-fame, #tooltip-cmp .tt-fame { margin-top: 6px; color: var(--gold); font-size: 13px; }
#tooltip .tt-hint { margin-top: 6px; color: #9aa0ac; font-size: 12.5px; }
#tooltip .tt-cmphead { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #a7b6d6; }
#tooltip-cmp .tt-eqhead { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #cbb583; margin-bottom: 5px; }

/* ---------- noscript ---------- */
.noscript-msg {
  position: fixed; inset: 0; z-index: 99; display: grid; place-content: center; text-align: center;
  background: #0d0b14; color: #efe6d0; font-family: system-ui, sans-serif;
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .cs-cols, .nc-cols, .help-cols { grid-template-columns: 1fr; }
  .cs-right { display: none; }
}
@media (max-width: 900px) {
  #hints { display: none; }
  #bottomleft { max-width: 56vw; }
}
/* compact the sidebar on short viewports so equipment/backpack/quick slots stay visible */
@media (max-height: 800px) {
  #sidescroll { gap: 6px; padding: 8px 12px 10px; }
  #minimap { width: 136px; height: 136px; }
  #playercard { padding: 5px 9px; }
  #quick { padding: 0 64px; }
}
@media (max-height: 640px) {
  #minimap { width: 110px; height: 110px; }
  .rombar { --bs: .42; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; }
}

/* ========== online / multiplayer (N4 — additive) ========== */

/* title population line */
#title-pop {
  margin-top: 16px; font-size: 14px; color: #86efac; letter-spacing: 1px;
  text-shadow: 0 1px 0 #000, 0 0 10px rgba(74,222,128,.35);
}

/* connection pill (top-left, under zone label) */
#conn-pill {
  display: inline-flex; align-items: center; gap: 7px; width: max-content;
  margin-top: 4px; padding: 2px 12px 2px 9px; font-size: 13px; border-radius: 12px;
  border: 2px solid #3d2f22; background: rgba(10,8,18,.78);
  color: var(--pale-dim); text-shadow: 0 1px 0 #000;
}
#conn-pill::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #6b7280; box-shadow: 0 0 7px 1px rgba(107,114,128,.6);
}
#conn-pill[data-state="on"] { color: #bbf7d0; }
#conn-pill[data-state="on"]::before { background: #4ade80; box-shadow: 0 0 7px 1px rgba(74,222,128,.75); }
#conn-pill[data-state="warn"] { color: #fde68a; }
#conn-pill[data-state="warn"]::before {
  background: #fbbf24; box-shadow: 0 0 7px 1px rgba(251,191,36,.75);
  animation: pill-pulse 1s ease-in-out infinite;
}
#conn-pill[data-state="off"] { color: #fecaca; }
#conn-pill[data-state="off"]::before { background: #ef4444; box-shadow: 0 0 7px 1px rgba(239,68,68,.75); }
@keyframes pill-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* chat panel (bottom-left, above event log; only shown once online engages) */
#chatbox { display: none; margin-bottom: 6px; max-width: 340px; }
body[data-online="1"] #chatbox { display: block; }
#chatlist { display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.chatmsg {
  text-shadow: 0 1px 0 #000; padding: 1px 8px 1px 6px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(0,0,0,.5), transparent);
  overflow-wrap: anywhere; animation: chat-fade 14s linear forwards;
}
body[data-chat="1"] .chatmsg { animation: none; opacity: 1; }
.chatmsg .cname { color: #93c5fd; font-weight: 700; }
.chatmsg.me .cname { color: var(--gold); }
.chatmsg.sys { color: #9ca3af; font-style: italic; }
@keyframes chat-fade { 0% { opacity: 1; } 65% { opacity: .85; } 100% { opacity: .18; } }
#chatline { display: flex; align-items: center; gap: 6px; margin-top: 3px; pointer-events: auto; }
#chatline .chev { color: var(--gold); font-weight: 700; text-shadow: 0 1px 0 #000; }
#chatinput {
  flex: 1; min-width: 0; font-family: inherit; font-size: 14px; color: var(--pale);
  background: rgba(10,8,18,.88); border: 2px solid #7c6a4c; border-radius: 4px;
  padding: 3px 8px; outline: none;
  cursor: url('../assets/ui/t1_cursors_cursor_01.png') 0 0, text;
}
#chatinput:focus { border-color: var(--gold); box-shadow: 0 0 8px rgba(253,224,71,.25); }

/* login / register screen */
#screen-login {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(124,58,237,.22), transparent 60%),
    linear-gradient(180deg, #141022 0%, #0d0b14 100%);
}
#login-panel { width: min(440px, 92vw); padding: 4px 18px 14px; }
#login-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.ltab {
  background: rgba(74,54,38,.12); border: 2px solid #8a6f47; border-radius: 6px;
  padding: 4px 24px; font-family: inherit; font-size: 16px; font-weight: 700;
  color: var(--ink-soft); letter-spacing: .5px;
}
.ltab:not(.active):hover { border-color: #b45309; }
.ltab.active {
  background: rgba(180,83,9,.16); border-color: #b45309; color: var(--ink);
  box-shadow: 0 0 0 1px #b45309;
}
.ltab, #bt-logout, .lrow input[type=checkbox] {
  cursor: url('../assets/ui/t1_cursors_cursor_02.png') 18 6, pointer;
}
.login-rows { display: flex; flex-direction: column; gap: 9px; margin-bottom: 8px; }
.lrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--ink); }
.lrow input:not([type=checkbox]) {
  width: 210px; font-family: inherit; font-size: 16px; padding: 5px 10px; border-radius: 6px;
  border: 2px solid #8a6f47; background: #f6ecd6; color: var(--ink); outline: none;
  cursor: url('../assets/ui/t1_cursors_cursor_01.png') 0 0, text;
}
.lrow input:not([type=checkbox]):focus { border-color: #b45309; }
.lrow input[type=checkbox] { width: 22px; height: 22px; accent-color: #b45309; cursor: pointer; }
#login-err { text-align: center; color: #9a3412; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.login-btns { display: flex; flex-direction: column; gap: 7px; align-items: center; }
#login-status { text-align: center; font-size: 13px; color: var(--ink-soft); margin-top: 8px; min-height: 1.1em; }
#login-panel.busy .login-rows, #login-panel.busy #login-tabs { opacity: .55; pointer-events: none; }

/* online char select extras */
#cs-online-badge {
  display: inline-block; margin-left: 10px; padding: 3px 14px; vertical-align: middle;
  border: 2px solid #16a34a; border-radius: 20px; background: rgba(22,163,74,.14);
  color: #166534; font-size: 13px; font-weight: 700; letter-spacing: 2px;
}

/* compact breakpoints — keep clear of sidebar & hints */
@media (max-height: 800px) {
  #chatbox { max-width: 300px; }
  #chatlist, #chatinput { font-size: 13px; }
  #login-panel { padding-bottom: 10px; }
  .login-rows { gap: 6px; }
}
@media (max-height: 640px) {
  #chatbox { max-width: 260px; }
  #chatlist, #chatinput { font-size: 12px; }
  #conn-pill { font-size: 12px; padding: 1px 10px 1px 8px; }
  #title-pop { margin-top: 10px; }
}
@media (max-width: 900px) {
  #chatbox { max-width: 52vw; }
}

/* ---- dynamic ability hotbar ----------------------------------------------------------- */
#hotbar {
  position: fixed; left: 50%; bottom: 92px;
  /* AB4 — player-tunable offset/scale/opacity via Options → Hotbar */
  transform: translateX(calc(-50% + var(--hb-ox, 0px))) scale(var(--hb-scale, 1));
  transform-origin: bottom center; opacity: var(--hb-op, 1);
  z-index: 46; display: flex; gap: 6px; padding: 5px 7px;
  background: rgba(6, 12, 20, .62); border: 1px solid #2b2416; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5); backdrop-filter: blur(2px); pointer-events: auto;
}
#hotbar.hb-nokeys .hb-key { display: none; }
/* AB5 — polish: staggered slot pop-in + a golden cast flash on fire */
@keyframes hbPop { from { opacity: 0; transform: translateY(8px) scale(.85); } to { opacity: 1; transform: none; } }
.hb-slot.hb-pop { animation: hbPop .22s cubic-bezier(.2, .8, .3, 1.25) backwards; }
@keyframes hbCast { 0% { box-shadow: 0 0 2px 1px rgba(250, 220, 120, .95); transform: scale(1.14); }
  100% { box-shadow: 0 0 14px 7px rgba(250, 220, 120, 0); transform: scale(1); } }
.hb-slot.hb-cast { animation: hbCast .32s ease-out; }
.hb-slot {
  position: relative; width: 46px; height: 46px; border-radius: 9px; cursor: pointer;
  background: rgba(18, 30, 46, .9); border: 2px solid #6b5a34; overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.6); transition: transform .07s ease, border-color .1s ease;
  display: flex; align-items: center; justify-content: center;
}
.hb-slot:hover { border-color: var(--gold); transform: translateY(-2px); }
.hb-slot:active { transform: translateY(1px); }
.hb-icon { font-size: 24px; line-height: 1; filter: drop-shadow(0 1px 1px #000); }
.hb-key {
  position: absolute; top: 1px; left: 3px; font: 700 11px monospace; color: var(--gold);
  text-shadow: 0 1px 0 #000, 0 0 3px #000; pointer-events: none;
}
/* cooldown: dark sweep rising from the bottom + remaining-seconds text */
.hb-cd {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 0;
  background: rgba(4, 8, 14, .68); pointer-events: none; transition: height .08s linear;
}
.hb-cdtext {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 16px monospace; color: #e5e7eb; text-shadow: 0 1px 2px #000; pointer-events: none;
}
.hb-slot.nomana .hb-icon { opacity: .4; }
.hb-slot.nomana { border-color: #3a2a3a; }
.hb-slot.cooling .hb-icon { opacity: .55; }
/* AB1 — the signature [SPACE] class-ability slot leads the bar with a gold accent */
.hb-slot.hb-sig { border-color: #b8963e; background: rgba(40, 32, 14, .92); }
.hb-slot.hb-sig .hb-key { font-size: 9px; }
.hb-slot.hb-sig::after { content: ''; position: absolute; inset: 0; border-radius: 7px;
  box-shadow: inset 0 0 10px rgba(250, 200, 80, .18); pointer-events: none; }
/* AB2/AB3 — drag-arranged hotbar: empty sockets, drop highlight, floating drag ghost */
.hb-slot.hb-empty { border-style: dashed; border-color: #4a3e26; background: rgba(12, 18, 28, .55); }
.hb-slot.hb-over { border-color: var(--gold); box-shadow: 0 0 10px rgba(250, 200, 80, .45); transform: translateY(-2px); }
.hb-ghost { position: fixed; z-index: 120; width: 46px; height: 46px; display: grid; place-items: center;
  font-size: 26px; pointer-events: none; filter: drop-shadow(0 2px 4px #000);
  background: rgba(18, 30, 46, .85); border: 2px solid var(--gold); border-radius: 9px; opacity: .92; }
body.rom-drag { cursor: grabbing; user-select: none; }
body.rom-drag #spellbook-overlay { pointer-events: none; opacity: .14; transition: opacity .12s; }
.sb-card[data-ab] { cursor: grab; }
@media (max-height: 640px) { #hotbar { bottom: 84px; } .hb-slot { width: 40px; height: 40px; } }

/* ---- reconnect overlay (server restart / game update) --------------------------------- */
#reconnect {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 8, 14, .72); backdrop-filter: blur(3px);
  animation: rc-fade .25s ease;
}
@keyframes rc-fade { from { opacity: 0; } to { opacity: 1; } }
#reconnect .rc-card {
  min-width: 300px; max-width: 90vw; padding: 26px 30px 24px; text-align: center;
  background: #0a1420; border: 2px solid #453422; border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6), inset 0 0 18px rgba(0,0,0,.7);
  font-family: inherit; color: #d7cbb2;
}
#reconnect .rc-spinner {
  width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 50%;
  border: 4px solid rgba(253, 224, 71, .18); border-top-color: var(--gold);
  animation: rc-spin 0.9s linear infinite;
}
@keyframes rc-spin { to { transform: rotate(360deg); } }
#reconnect .rc-title { font-size: 19px; color: var(--gold); text-shadow: 0 1px 0 #000; margin-bottom: 8px; }
#reconnect .rc-sub { font-size: 14px; color: #9fb0c0; line-height: 1.45; }
#reconnect .rc-btn {
  margin-top: 18px; padding: 9px 22px; font: inherit; font-size: 15px; cursor: pointer;
  color: #0a1420; background: var(--gold); border: none; border-radius: 8px; font-weight: 700;
  box-shadow: 0 3px 0 #a88a12; transition: transform .08s ease;
}
#reconnect .rc-btn:hover { transform: translateY(-1px); }
#reconnect .rc-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #a88a12; }
/* terminal (gave-up) mode: hide the spinner, show the retry button */
#reconnect.lost .rc-spinner { display: none; }
#reconnect.lost .rc-title { color: #fca5a5; }