/* ============ TragoScape — OSRS-flavored UI ============ */
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: Verdana, Arial, sans-serif; }

/* ---------- Login screen (2007 vibes) ---------- */
#login-screen {
  position: absolute; inset: 0; z-index: 100;
  background: radial-gradient(ellipse at 50% 30%, #1a1208 0%, #000 75%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#login-stars { position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff8, transparent),
    radial-gradient(1px 1px at 78% 12%, #fff6, transparent),
    radial-gradient(2px 2px at 35% 65%, #fff4, transparent),
    radial-gradient(1px 1px at 88% 48%, #fff7, transparent),
    radial-gradient(1px 1px at 55% 85%, #fff5, transparent),
    radial-gradient(1px 1px at 22% 78%, #fff6, transparent),
    radial-gradient(2px 2px at 65% 35%, #fff3, transparent);
}
#login-logo {
  font-family: 'Rampart One', Impact, 'Arial Black', sans-serif;
  font-size: 92px; font-weight: 400; letter-spacing: 5px; line-height: 0.95;
  color: #ffffff; margin-bottom: 30px; text-align: center;
  text-shadow: 0 0 18px rgba(255,255,255,0.55), 0 0 46px rgba(220,40,40,0.7), 4px 4px 0 #1a0606;
}
#login-logo .login-kanji {
  display: block; font-family: 'Yuji Syuku', serif; font-weight: 400;
  font-size: 38px; letter-spacing: 12px; color: #e23b3b; margin-bottom: -4px;
  text-shadow: 0 0 18px rgba(226,59,59,0.75);
}
#login-box {
  width: 360px; border: 2px solid #8a7340; border-radius: 6px;
  background: linear-gradient(#3e3529, #2b2418);
  box-shadow: 0 0 40px #000, inset 0 0 20px #0008;
}
#login-tabs { display: flex; border-bottom: 2px solid #8a7340; }
.login-tab {
  flex: 1; padding: 10px; background: #1f1a10; color: #b0a080; border: none;
  font-family: Verdana; font-size: 13px; font-weight: bold; cursor: pointer;
}
.login-tab.active { background: #4a3f28; color: #ffd54a; }
#login-body { padding: 18px 24px 22px; }
#login-welcome { text-align: center; color: #ffd54a; font-size: 15px; font-weight: bold; margin-bottom: 12px; text-shadow: 1px 1px 0 #000; }
#login-error { text-align: center; color: #ff6055; font-size: 11px; min-height: 28px; white-space: pre-line; margin-bottom: 4px; }
.login-row { display: flex; align-items: center; margin-bottom: 10px; }
.login-row label { width: 88px; color: #fff; font-size: 13px; text-shadow: 1px 1px 0 #000; }
.login-row input {
  flex: 1; background: #14100a; color: #ffd54a; border: 1px solid #6b5a32;
  padding: 6px 8px; font-family: Verdana; font-size: 13px; outline: none; border-radius: 2px;
}
#login-remember-row { margin-bottom: 6px; }
#login-remember-label { width: auto !important; display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
#login-remember { flex: none !important; width: 15px; height: 15px; padding: 0 !important; accent-color: #c79b3b; cursor: pointer; }
#login-buttons { display: flex; gap: 14px; justify-content: center; margin-top: 14px; }
.rs-btn {
  min-width: 120px; padding: 8px 14px; cursor: pointer;
  background: linear-gradient(#6b5a32, #463a1d); color: #fff;
  border: 2px outset #8a7340; border-radius: 3px;
  font-family: Verdana; font-size: 13px; font-weight: bold; text-shadow: 1px 1px 0 #000;
}
.rs-btn:hover { background: linear-gradient(#7d6a3e, #564726); }
.rs-btn:active { border-style: inset; }
/* Logout tab: the big single button fills the whole panel for a quick one-click logout */
#page-logout { flex-direction: column; height: 100%; box-sizing: border-box; }
#page-logout #btn-logout {
  flex: 1; width: 100%; margin: 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  font-size: 22px; letter-spacing: 1px; border-width: 3px;
}
#page-logout #btn-logout .logout-icon { font-size: 56px; line-height: 1; }
#login-hint { margin-top: 16px; text-align: center; color: #b0a080; font-size: 11px; line-height: 1.5; }
#login-footer { position: absolute; bottom: 16px; color: #6b5e45; font-size: 11px; }

/* ---------- Game ---------- */
#game-screen { position: absolute; inset: 0; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
body { -webkit-tap-highlight-color: transparent; }

#hover-text {
  position: absolute; top: 6px; left: 8px; z-index: 30; pointer-events: none;
  color: #fff; font-size: 13px; font-weight: bold; text-shadow: 1px 1px 0 #000;
  font-family: Verdana;
}
#overlay-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }

.hitsplat {
  position: absolute; transform: translate(-50%, -50%);
  width: 26px; height: 20px; line-height: 20px; text-align: center;
  background: radial-gradient(circle, #c01616 0%, #7a0d0d 100%);
  color: #fff; font-size: 12px; font-weight: bold; text-shadow: 1px 1px 0 #000;
  border-radius: 4px;
}
.hitsplat.zero { background: radial-gradient(circle, #2055c0 0%, #102a66 100%); }
.overhead-chat {
  position: absolute; transform: translate(-50%, -100%);
  color: #ffff00; font-size: 13px; font-weight: bold; text-shadow: 1px 1px 0 #000;
  white-space: nowrap; max-width: 380px; overflow: hidden; text-overflow: ellipsis;
}
.pray-overhead {
  position: absolute; transform: translate(-50%, -100%); pointer-events: none;
  font-size: 20px; line-height: 1; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 1px 1px #000);
}
/* Wilderness skull marker — 10-frame Sharingan strip, plays in once then holds frame 10 */
.skull-overhead {
  position: absolute; transform: translate(-50%, -100%); pointer-events: none;
  width: 54px; height: 54px;
  background: url(/osrs/textures/skull_strip.png) 0 0 / 540px 54px no-repeat;
  filter: drop-shadow(0 1px 2px #000) drop-shadow(0 0 3px #b30000);
  animation: skull-mark 1.6s steps(10, jump-none) forwards;
}
@keyframes skull-mark { from { background-position: 0 0; } to { background-position: -486px 0; } }
/* sprite variant of the overhead protection icon */
.pray-overhead.img {
  width: 38px; height: 38px; font-size: 0;
  /* sit lower, closer to the head, instead of floating high above it */
  transform: translate(-50%, -60%);
  background-size: contain; background-position: center; background-repeat: no-repeat;
  filter: drop-shadow(0 1px 2px #000) drop-shadow(0 0 2px #000);
}
/* draggable drop-rate panel */
#drop-panel {
  position: fixed; top: 90px; left: 60px; z-index: 70; width: 230px;
  background: linear-gradient(#3e3529, #241e13); border: 2px solid #6b5a32; border-radius: 5px;
  box-shadow: 0 4px 16px #000a; display: none; overflow: hidden;
}
.drop-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 8px; background: #4a3f28; cursor: move; user-select: none;
  color: #ffd54a; font-size: 12px; font-weight: bold; border-bottom: 1px solid #1a1408;
}
.drop-close { cursor: pointer; color: #d8b8a0; padding: 0 2px; }
.drop-close:hover { color: #ff6a6a; }
.drop-body { max-height: 320px; overflow-y: auto; padding: 4px; }
.drop-row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; font-size: 12px; }
.drop-row:nth-child(odd) { background: #2a2418; }
.drop-ico { font-size: 15px; width: 18px; text-align: center; }
.drop-name { flex: 1; color: #e8d8a0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-rate { color: #7ad6ff; font-weight: bold; }
.drop-empty { color: #8a7a5c; font-size: 12px; padding: 8px; text-align: center; }

#slayer-counter {
  position: absolute; bottom: 158px; right: 266px; z-index: 26; pointer-events: none;
  background: rgba(20, 16, 10, 0.85); border: 1px solid #6a5a3a; border-radius: 4px;
  padding: 4px 10px; color: #ffd54a; font-size: 13px; font-weight: bold; text-shadow: 1px 1px 0 #000;
}
/* RuneLite-style movable overlays: hold Alt to grab & drag, click-through otherwise */
body.alt-drag #slayer-counter { pointer-events: auto; cursor: move; outline: 1px dashed #ffd54a; outline-offset: 1px; }
#slayer-counter.dragging { outline: 1px solid #ffd54a; opacity: 0.92; }

/* ---------- Keybind settings ---------- */
.keybind-row { display: flex; align-items: center; gap: 8px; padding: 3px 10px; color: #e8e0c8; font-size: 12px; }
.keybind-row .kb-label { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.keybind-row .kb-label .kb-ico { width: 18px; text-align: center; }
.kb-key {
  min-width: 44px; text-align: center; padding: 3px 6px; cursor: pointer;
  background: #2a2114; border: 1px solid #6a5a3a; border-radius: 3px;
  color: #ffd54a; font-weight: bold; font-size: 11px;
}
.kb-key.listening { background: #4a3f28; color: #fff; outline: 1px solid #ffd54a; }
.kb-key.unbound { color: #7a6c50; font-weight: normal; }
.xp-drop {
  position: absolute; right: 238px; transform: translate(-50%, -50%);
  color: #fff; font-size: 12px; font-weight: bold; text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
}
.hp-bar {
  position: absolute; transform: translate(-50%, -100%);
  width: 34px; height: 6px; background: #c01616; border: 1px solid #000;
}
.hp-bar > div { height: 100%; background: #16c016; }

/* ---------- Context menu ---------- */
#context-menu {
  position: absolute; z-index: 80; min-width: 160px; /* above modals (60) so right-click menus work inside them */
  background: #5d5447; border: 1px solid #000; border-radius: 2px;
  font-family: Verdana; font-size: 12px;
  box-shadow: 2px 2px 8px #000a;
}
#context-title {
  padding: 4px 8px; color: #5d5447; background: #000;
  border-bottom: 1px solid #000; font-size: 12px;
  background: #5d5447; color: #1a1408; font-weight: bold;
  border-bottom: 2px solid #4a4239;
}
.context-opt { padding: 4px 10px; color: #fff; cursor: pointer; text-shadow: 1px 1px 0 #000; }
.context-opt:hover { background: #4a4239; }
.context-opt .tname { color: #ffff00; }
.context-opt .tlvl { color: #5dff5d; }

/* ---------- Minimap & orbs ---------- */
/* Custom painted frame (textures/minimap-frame.png): a large circle for the live
   minimap on the right, four orb slots down the left edge, and a globe bottom-right.
   The frame art is the background; the live <canvas> sits inside the circle and the
   interactive orbs are overlaid on the painted slots (discs are transparent so the
   painted icons show through; we only draw the numbers + dynamic state glows). */
#minimap-wrap {
  position: absolute; top: 6px; right: 8px; z-index: 25;
  width: 236px; height: 236px;
}
/* live map sits UNDERNEATH the painted frame, sized a touch larger than the hole
   so its edge tucks behind the ring (no gap); the frame's ring overlaps it cleanly */
#minimap {
  position: absolute; left: 61px; top: 34px; width: 158px; height: 158px;
  border-radius: 50%; border: none; box-shadow: none;
  cursor: pointer; background: #000; z-index: 1;
}
/* the painted frame, layered ON TOP of the map; transparent center reveals the map.
   pointer-events:none so minimap clicks pass straight through to the canvas below */
#minimap-frame {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: url(../textures/minimap-frame.png) center / 100% 100% no-repeat;
}
/* status orbs: a transparent click-disc over each painted slot + the live number,
   pinned to the left of the disc so it lands in the painted pill's flat area */
.orb { position: absolute; width: 24px; height: 24px; cursor: pointer; z-index: 3; }
.orb-num {
  position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  margin-right: 5px; text-align: right; white-space: nowrap;
  color: #5dff5d; font-size: 12px; font-weight: bold; text-shadow: 1px 1px 0 #000, 0 0 3px #000;
}
.orb-disc {
  width: 100%; height: 100%; border-radius: 50%; position: relative;
  background: transparent; border: none; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
}
.orb-icon { display: none; } /* painted frame supplies the icons */
#orb-hp   { left: 55px;  top: 46px;  }
#orb-pray { left: 46px;  top: 80px;  }
#orb-run  { left: 45px;  top: 112px; }
#orb-spec { left: 54px;  top: 145px; }
#orb-rest { left: 194px; top: 168px; } /* over the globe slot, bottom-right */
/* run toggle: dim the painted run icon when walking */
#orb-run.off .orb-disc::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  background: rgba(16, 12, 6, 0.6);
}
/* special-attack orb: gray veil when the weapon has no spec, pulsing gold when armed */
#orb-spec.no-spec .orb-disc::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  background: rgba(16, 12, 6, 0.55);
}
#orb-spec.armed .orb-disc { box-shadow: 0 0 6px 2px #ffd24a; animation: spec-pulse 0.9s ease-in-out infinite; }
@keyframes spec-pulse { 0%, 100% { box-shadow: 0 0 5px 1px #ffd24a; } 50% { box-shadow: 0 0 9px 3px #ffe98a; } }
/* rest orb is self-drawn (its own bed icon) since the painted globe isn't a bed */
#orb-rest .orb-disc {
  background: #241e13; border: 2px solid #4a3f28; box-shadow: 0 0 0 1px #1a1408, 0 1px 4px #000a;
}
#orb-rest .orb-icon { display: flex; font-size: 13px; line-height: 1; }
/* settling in on a furnished plot: the Zzz pulses until the buff lands */
.orb.resting .orb-disc { animation: orb-pulse 1.5s ease-in-out infinite; }
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px #1a1408, 0 1px 4px #000a; }
  50% { transform: scale(1.15); box-shadow: 0 0 9px 3px #7ad6ff55, 0 0 0 1px #1a1408; }
}

/* world clock (day/night cycle) tucked under the minimap circle; pointer-events:none
   so it never eats minimap/orb clicks */
#world-clock {
  position: absolute; left: 80px; top: 206px; width: 120px; text-align: center;
  color: #ffd873; font-size: 13px; font-weight: bold; text-shadow: 1px 1px 0 #000;
  pointer-events: none; z-index: 3; white-space: nowrap;
}
#world-clock #clock-icon { margin-right: 4px; font-size: 12px; }

#wildy-indicator {
  position: absolute; top: 250px; right: 70px; z-index: 25;
  color: #ffff00; font-size: 14px; font-weight: bold; text-shadow: 1px 1px 0 #000;
}

/* ---------- Side panel ---------- */
/* Assembled from sliced frame pieces (textures/panel/): a fixed top icon bar,
   a vertically-stretchable middle (pillars + parchment), and a bottom icon bar.
   Slicing lets the content area grow without distorting the painted icon tiles,
   and lets each tab be its own image so highlighting is a filter on that tile alone. */
#side-panel {
  position: absolute; right: 0; bottom: 0; width: 258px; z-index: 24;
  display: flex; flex-direction: column;
  -webkit-user-select: none; user-select: none;
}
.panel-tabs { display: flex; width: 100%; flex: 0 0 auto; }
#panel-tabs-top { aspect-ratio: 1083 / 204; }
#panel-tabs-bottom { aspect-ratio: 1083 / 195; }
/* each tab IS one painted tile; highlight = brighten just that tile's own background */
.ptab {
  flex: 1; position: relative; padding: 0; border: none; cursor: pointer;
  font-size: 0; color: transparent;
  background: center / 100% 100% no-repeat;
  transition: filter .08s ease;
}
.ptab:hover { filter: brightness(1.16) saturate(1.05); }
.ptab.active { filter: brightness(1.5) saturate(1.2) drop-shadow(0 0 2px rgba(255, 205, 95, .55)); }
#panel-tabs-top .ptab:nth-child(1) { background-image: url(../textures/panel/top0.png); }
#panel-tabs-top .ptab:nth-child(2) { background-image: url(../textures/panel/top1.png); }
#panel-tabs-top .ptab:nth-child(3) { background-image: url(../textures/panel/top2.png); }
#panel-tabs-top .ptab:nth-child(4) { background-image: url(../textures/panel/top3.png); }
#panel-tabs-top .ptab:nth-child(5) { background-image: url(../textures/panel/top4.png); }
#panel-tabs-top .ptab:nth-child(6) { background-image: url(../textures/panel/top5.png); }
#panel-tabs-top .ptab:nth-child(7) { background-image: url(../textures/panel/top6.png); }
#panel-tabs-bottom .ptab:nth-child(1) { background-image: url(../textures/panel/bot0.png); }
#panel-tabs-bottom .ptab:nth-child(2) { background-image: url(../textures/panel/bot1.png); }
#panel-tabs-bottom .ptab:nth-child(3) { background-image: url(../textures/panel/bot2.png); }
#panel-tabs-bottom .ptab:nth-child(4) { background-image: url(../textures/panel/bot3.png); }
#panel-tabs-bottom .ptab:nth-child(5) { background-image: url(../textures/panel/bot4.png); }
#panel-tabs-bottom .ptab:nth-child(6) { background-image: url(../textures/panel/bot5.png); }
/* parchment interior — middle slice stretches to fill, content kept off the pillars */
#panel-content {
  flex: 0 0 auto; height: 300px; position: relative;
  background: url(../textures/panel/mid.png) 0 0 / 100% 100% no-repeat;
  overflow-y: auto; overflow-x: hidden; padding: 6px 13%;
}

/* skills — icon + level only (levels are uncapped); rows stretch to fill, no scroll */
#page-skills { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 3px; align-content: stretch; height: 100%; }
#page-skills[style*="none"] { display: none !important; }
.skill-cell {
  display: flex; align-items: center; gap: 2px; padding: 2px 4px; min-height: 0;
  background: linear-gradient(#2a2316, #1f1a10); border: 1px solid #4a3f28; border-radius: 3px; cursor: default;
  min-width: 0;
}
.skill-cell:hover { border-color: #8a7340; background: linear-gradient(#34291a, #241e13); }
.skill-cell .sicon { font-size: 15px; line-height: 1; flex: 0 0 auto; }
.skill-cell .slvl {
  margin-left: auto; color: #ffd54a; font-size: 12px; font-weight: bold; text-shadow: 1px 1px 0 #000;
  font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 0;
}
#skills-total { grid-column: 1 / -1; text-align: center; color: #ffd54a; font-size: 11px; padding: 2px; font-weight: bold; align-self: center; }

/* inventory — 4×7 grid that always fits its panel (never scrolls). Rows use
   minmax(0,1fr) so they distribute the fixed panel height instead of growing to
   fit the item images (the `1fr` min-content floor was forcing a scrollbar). */
#page-inv { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 3px; height: 100%;
  border: none; padding: 2px; background: transparent; overflow: hidden; }
#page-inv[style*="none"] { display: none !important; }
.inv-slot {
  background: linear-gradient(#2a2316, #1f1a10); border: 1px solid #4a3f28; border-radius: 3px;
  display: flex; align-items: center; justify-content: center; position: relative;
  font-size: 21px; cursor: pointer; min-width: 0; min-height: 0; overflow: hidden;
  box-shadow: inset 0 1px 2px #0006;
}
.inv-slot:hover { border-color: #c79b3b; background: linear-gradient(#34291a, #241e13); box-shadow: inset 0 1px 2px #0006, 0 0 5px #c79b3b44; }
.inv-slot .qty {
  position: absolute; top: 1px; left: 3px; font-size: 10px; color: #ffff00;
  font-weight: bold; text-shadow: 1px 1px 0 #000;
}
/* OSRS: stacks of 10M+ show in green */
.inv-slot .qty.qty-green { color: #00ff80; }
.inv-slot.empty { cursor: default; }
/* 3D-rendered item thumbnails — sized in em so they scale with each context's
   existing icon font-size (inventory, bank, shop, trade, equip, collection log). */
.item-img { width: 1.85em; height: 1.85em; object-fit: contain; image-rendering: auto;
  pointer-events: none; vertical-align: middle; -webkit-user-drag: none; user-select: none; }
/* RuneScape-style icon treatment: 4 hard 1px drop-shadows build the black pixel
   outline (4-neighbour, same as RS's sprite outliner), then a final offset
   shadow falls under the outlined silhouette — same order RS composites in. */
.item-img, .item-emoji {
  filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000)
          drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000)
          drop-shadow(1px 1px 0 rgba(0,0,0,0.5));
}
.item-emoji { display: inline-block; line-height: 1; }
.drop-ico .item-img { width: 17px; height: 17px; }
/* inventory thumbnails fit the slot (which shrinks with the panel) so every one
   of the 28 items stays fully visible without a scrollbar at any panel size */
#page-inv .item-img { width: auto; height: auto; max-width: 92%; max-height: 92%; }
#page-inv .item-emoji { font-size: 1.85em; }
/* bank notes: stackable certificates render with a parchment tint + corner tag */
.inv-slot.noted { background: linear-gradient(#352d1a, #2a2415); }
.inv-slot .note-tag {
  position: absolute; bottom: 0; right: 1px; font-size: 9px;
  opacity: 0.9; text-shadow: 1px 1px 0 #000; pointer-events: none;
}
.bank-mode-btn.on { background: linear-gradient(#5a4a1e, #3a2f12); border-color: #c79b3b; color: #ffe08a; }

/* equipment */
/* RuneScape-style equipment layout: 3 columns, slots placed in a cross */
.equip-grid { display: grid; grid-template-columns: repeat(3, 48px); gap: 8px; justify-content: center; padding: 12px 0 6px; }
.equip-spacer { width: 48px; height: 48px; }
.equip-slot { width: 48px; height: 48px; margin: 0; font-size: 24px; }
.equip-slot.empty { border-style: dashed; border-color: #5a4d30; background: #1d1810; box-shadow: inset 0 2px 6px #0008; }
.equip-slot.empty:hover { border-color: #8a7340; box-shadow: inset 0 2px 6px #0008; }
.equip-ghost { font-size: 20px; opacity: 0.22; filter: grayscale(1); }
.equip-stats-btn { display: block; width: 90%; margin: 8px auto 4px; min-width: 0; font-size: 12px; }
#equip-bonuses { margin: 6px 8px; padding: 6px 8px; background: #241e13; border: 1px solid #4a3f28; border-radius: 4px; }
.bonus-row { display: flex; justify-content: space-between; color: #c8b88a; font-size: 12px; padding: 2px 2px; }
.bonus-row .bonus-val { color: #ffd54a; font-weight: bold; }

/* floating item tooltip */
#item-tooltip {
  position: fixed; z-index: 80; pointer-events: none; min-width: 130px; max-width: 220px;
  background: #1a1408ee; border: 2px solid #6b5a32; border-radius: 4px; padding: 6px 8px;
  color: #e8d8a0; font-size: 11px; box-shadow: 0 3px 12px #000a;
}
#item-tooltip .tip-name { color: #ffd54a; font-weight: bold; font-size: 12px; margin-bottom: 3px; }
#item-tooltip .tip-row { display: flex; justify-content: space-between; gap: 10px; line-height: 1.5; }
#item-tooltip .tip-d.up { color: #5dff5d; }
#item-tooltip .tip-d.down { color: #ff6a6a; }
#item-tooltip .tip-d.same { color: #9a8a5c; }
#item-tooltip .tip-ex { margin-top: 4px; color: #9a8a5c; font-style: italic; font-size: 10px; }

/* combat tab */
#combat-name { text-align: center; color: #ffd54a; font-size: 14px; font-weight: bold; padding: 8px 0 2px; text-shadow: 1px 1px 0 #000; }
#combat-lvl-big { text-align: center; color: #fff; font-size: 12px; padding-bottom: 12px; }
.style-btn {
  margin: 6px 4px; padding: 8px 10px; background: #241e13; border: 2px outset #4a3f28;
  border-radius: 4px; cursor: pointer; display: flex; flex-direction: column;
}
.style-btn b { color: #ff981f; font-size: 13px; }
.style-btn span { color: #c8b88a; font-size: 10px; }
.style-btn.active { border-style: inset; background: #4a3f28; }
.style-btn.active b { color: #ffd54a; }

/* ---------- Chatbox ---------- */
/* Background is the parchment "Chatheader" art (frame + baked-in tab strip).
   The 1933x813 art is stretched to fill; #chat-inner is positioned with % so
   text stays inside the parchment panel and clears the decorative tab row. */
#chatbox {
  position: absolute; left: 0; bottom: 0; height: 182px; z-index: 24;
  width: calc((100% - 258px) * 0.7); /* ~30% narrower; leaves a gap before the side panel */
  background: url(../textures/chatheader.png) center / 100% 100% no-repeat;
}
#chat-inner {
  position: absolute; top: 6.5%; left: 2.5%; right: 2.5%; bottom: 21.5%;
  display: flex; flex-direction: column;
}
#chat-messages {
  flex: 1; overflow-y: auto; padding: 2px 6px;
  font-family: Verdana; font-size: 12px; line-height: 1.4;
}
#chat-messages .cm { color: #000; text-shadow: none; }
#chat-messages .cm b { color: #000; }
#chat-input-row {
  display: flex; align-items: center; padding: 3px 6px 1px;
  border-top: 1px solid #6b5a3255; background: transparent;
}
#chat-name { color: #000; font-size: 12px; font-weight: bold; margin-right: 4px; }
#chat-input {
  flex: 1; border: none; background: transparent; outline: none;
  font-family: Verdana; font-size: 12px; color: #00007f;
}
#xp-counter {
  position: absolute; top: 8px; right: 240px; z-index: 25;
  color: #fff; font-size: 12px; font-weight: bold; text-shadow: 1px 1px 0 #000;
  background: #0006; padding: 3px 8px; border-radius: 10px;
}

/* scrollbars */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #241e13; }
::-webkit-scrollbar-thumb { background: #6b5a32; border-radius: 4px; }

/* ---------- Magic spellbook ---------- */
.magic-title { text-align: center; color: #ffd54a; font-size: 14px; font-weight: bold; padding: 4px 0; text-shadow: 1px 1px 0 #000; }
.spell-btn, .smith-row {
  display: flex; align-items: center; gap: 8px; margin: 6px 4px; padding: 8px 10px;
  background: #241e13; border: 2px outset #4a3f28; border-radius: 4px; cursor: pointer;
}
.spell-btn:hover:not(.locked):not(.active), .smith-row:hover:not(.locked) { border-color: #8a7340; background: #2e2718; }
.spell-info .rune-out { color: #ff6a6a; font-weight: bold; }
.spell-btn.active { border-style: inset; background: #2a3a4a; box-shadow: inset 0 0 8px #4a9aff66; }
.spell-btn.locked, .smith-row.locked { opacity: 0.45; }
.spell-icon { font-size: 22px; }
.spell-info { display: flex; flex-direction: column; }
.spell-info b { color: #ff981f; font-size: 12px; }
.spell-btn.active .spell-info b { color: #6ab8ff; }
.spell-info span { color: #c8b88a; font-size: 9px; }
.magic-hint { text-align: center; color: #c8b88a; font-size: 10px; padding: 8px; }
/* Ninjutsu scroll — icon-only grid, all detail in the hover tooltip */
.spell-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 2px 3px; }
.spell-cell {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
  background: #241e13; border: 1px outset #4a3f28; border-radius: 3px; cursor: pointer;
  transition: background .08s, border-color .08s;
}
.spell-cell .spell-icon { font-size: 13px; line-height: 1; }
.spell-cell:hover:not(.locked):not(.active) { border-color: #8a7340; background: #2e2718; }
.spell-cell.tele { background: #1d2620; border-color: #2f4a3a; }
.spell-cell.tele:hover { border-color: #4a8a6a; background: #243029; }
.spell-cell.active { border-style: inset; background: #2a3a4a; box-shadow: inset 0 0 8px #4a9aff66; }
.spell-cell.locked { opacity: 0.4; cursor: default; filter: grayscale(0.6); }
/* Jutsu spellbook: book selector tabs + tier section headers */
.book-bar { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; padding: 6px 4px 2px; }
.book-tab {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: 17px; background: #241e13; border: 2px outset #4a3f28; border-radius: 4px; cursor: pointer;
  transition: background .08s, border-color .08s;
}
.book-tab:hover:not(.locked):not(.active) { border-color: #8a7340; background: #2e2718; }
.book-tab.active { border-style: inset; background: #3a2f4a; box-shadow: inset 0 0 8px #b48affaa; }
.book-tab.locked { opacity: 0.35; cursor: default; filter: grayscale(0.7); }
.tier-head {
  color: #d9b85a; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
  padding: 6px 6px 2px; border-bottom: 1px solid #4a3f2855; margin: 2px 4px 0; text-shadow: 1px 1px 0 #000;
}
#item-tooltip .tip-flavor { color: #b7a7d8; font-style: italic; font-size: 10px; margin: 1px 0 4px; }

/* ---------- Chakra book (compact icon grid, RuneScape-style) ---------- */
.prayer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 2px 2px 4px; }
/* running total of worn Chakra bonus, pinned under the technique grid */
.chakra-bonus-total {
  display: flex; align-items: center; justify-content: space-between;
  margin: 6px 2px 2px; padding: 5px 9px;
  background: #241e13; border: 1px solid #4a3f28; border-radius: 4px;
  font-size: 12px; color: #cdbb8e; cursor: help;
}
.chakra-bonus-total .cb-val { font-weight: bold; color: #7dd6ff; }
/* the Chakra orb softly pulses while meditating */
#orb-pray.meditating { animation: chakra-pulse 1.8s ease-in-out infinite; }
@keyframes chakra-pulse {
  0%, 100% { filter: drop-shadow(0 0 1px #7dd6ff); }
  50%      { filter: drop-shadow(0 0 7px #7dd6ff); }
}
/* icons float free on the scroll (no caged box), RuneScape-style */
.prayer-icon {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 28px; cursor: pointer; user-select: none;
  transition: transform 0.08s ease;
}
.prayer-icon:hover { transform: scale(1.08); }
.prayer-icon.active { filter: drop-shadow(0 0 4px #ffe27a) drop-shadow(0 0 7px #ffb84a99); }
.prayer-icon.locked { opacity: 0.3; filter: grayscale(1); cursor: not-allowed; }
.prayer-icon.locked:hover { transform: none; }
/* custom on/off sprite art — fills the cell now that the box is gone */
.prayer-icon.has-sprite { background-size: contain; background-position: center; background-repeat: no-repeat; }

/* ---------- Modal (bank / shop / smith) ---------- */
#modal-overlay {
  position: absolute; inset: 0; z-index: 60;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
#modal-box {
  width: 460px; max-width: 92vw; max-height: 80vh;
  background: linear-gradient(#3e3529, #2b2418);
  border: 2px solid #8a7340; border-radius: 6px;
  box-shadow: 0 0 40px #000;
  display: flex; flex-direction: column;
}
#modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 2px solid #8a7340;
}
#modal-title { color: #ffd54a; font-size: 15px; font-weight: bold; text-shadow: 1px 1px 0 #000; }
#modal-close {
  background: #6b2a1a; color: #fff; border: 1px solid #000; border-radius: 3px;
  width: 26px; height: 26px; cursor: pointer; font-size: 13px; font-weight: bold;
}
#modal-body { padding: 10px 14px 14px; overflow-y: auto; }
/* bank/shop mode: the modal docks left and the overlay lets clicks through,
   so the real side-panel inventory stays usable (click it to deposit/sell) */
#modal-overlay.side-modal { background: transparent; pointer-events: none; justify-content: flex-start; padding-left: 4vw; }
#modal-overlay.side-modal #modal-box { pointer-events: auto; box-shadow: 0 0 28px rgba(0,0,0,.8); max-width: calc(100vw - 200px); }
/* bank: wider (use the empty space) but shorter — anchored near the top so its
   bottom stays above the 150px chatbox, and a gap is left before the 230px inventory */
#modal-overlay.bank-modal { align-items: flex-start; padding-left: 3vw; }
#modal-overlay.bank-modal #modal-box {
  margin-top: 60px;
  width: calc(97vw - 230px - 70px);   /* dock → gap before the inventory panel */
  max-width: 980px;
  max-height: calc(100vh - 60px - 168px); /* clear the chatbox at the bottom */
}
#modal-overlay.bank-modal #modal-body { display: flex; flex-direction: column; min-height: 0; }
/* bank: fixed-size square slots (just bigger than the thumbnail, so there's no
   wasted space) that pack across the wide modal instead of stretching to fill it */
#modal-overlay.bank-modal .bank-grid { grid-template-columns: repeat(auto-fill, 60px); justify-content: space-between; }
.bank-grid .inv-slot { aspect-ratio: 1 / 1; }
.bank-grid .item-img { width: 2.78em; height: 2.78em; } /* 1.5 × 1.85em */
.bank-grid .item-emoji { font-size: 1.5em; }
.modal-section-title { color: #c8b88a; font-size: 11px; padding: 8px 0 6px; }
.modal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  border: 2px solid #5a4a28; border-radius: 5px; padding: 6px; background: #1410083a; box-shadow: inset 0 1px 5px #0007; }
.modal-grid .inv-slot { font-size: 19px; }
/* Inventory, bank & shop: items float free — no per-slot box; the container is the square.
   (Equipment uses .inv-slot too but lives outside these containers, so it keeps its boxes.) */
#page-inv .inv-slot, .modal-grid .inv-slot {
  background: none; border-color: transparent; box-shadow: none; border-radius: 4px;
}
#page-inv .inv-slot:hover, .modal-grid .inv-slot:hover {
  background: #ffffff14; border-color: transparent; box-shadow: none;
}
#page-inv .inv-slot.empty, .modal-grid .inv-slot.empty,
#page-inv .inv-slot.empty:hover, .modal-grid .inv-slot.empty:hover { background: none; }
.modal-empty { grid-column: 1 / -1; color: #8a7a5c; font-size: 12px; padding: 10px; text-align: center; }
/* ---- Notable Drops feed (::drops) ---- */
.drops-feed { display: flex; flex-direction: column; gap: 3px; max-height: 360px; overflow-y: auto; padding-right: 2px; }
.drops-row { display: grid; grid-template-columns: 1fr 1.3fr auto; grid-template-areas: "who what when" "meta meta meta"; gap: 1px 10px; align-items: baseline; padding: 6px 8px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,213,74,.12); border-radius: 6px; }
.drops-who { grid-area: who; color: #e8dcc0; font-size: 13px; font-weight: bold; }
.drops-what { grid-area: what; font-size: 13px; font-weight: bold; }
.drops-meta { grid-area: meta; color: #8a7a5c; font-size: 11px; }
.drops-when { grid-area: when; color: #8a7a5c; font-size: 11px; text-align: right; white-space: nowrap; }
/* ---- In-game Hiscores modal (::hiscores) ---- */
.hsm-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; max-height: 84px; overflow-y: auto; }
.hsm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; cursor: pointer; font-size: 10.5px; color: #c8b88a; background: rgba(0,0,0,.3); border: 1px solid rgba(255,213,74,.2); border-radius: 13px; transition: background .12s, border-color .12s, color .12s; }
.hsm-chip:hover { border-color: #ffd54a; color: #fff; }
.hsm-chip.active { background: linear-gradient(180deg, #7a5a10, #4a3708); color: #fff; border-color: #ffd54a; }
.hsm-list { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
.hsm-row { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: baseline; padding: 5px 8px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,213,74,.1); border-radius: 6px; font-size: 13px; }
.hsm-me { border-color: rgba(255,213,74,.55); background: rgba(255,213,74,.08); }
.hsm-rank { color: #8a7a5c; font-weight: bold; text-align: center; font-variant-numeric: tabular-nums; }
.hsm-rank.medal { font-size: 15px; }
.hsm-name { color: #e8dcc0; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsm-lvl { color: #ff8a5a; font-weight: bold; font-variant-numeric: tabular-nums; }
.hsm-right { color: #9a8c70; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ---- Collection log ---- */
.collog-open { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 2px 0 8px; font-size: 13px; }
.collog-open-count { color: #ffe08a; font-weight: bold; }
.collog-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.collog-cell {
  aspect-ratio: 1 / 1; background: linear-gradient(#2a2316, #1f1a10); border: 1px solid #4a3f28; border-radius: 3px;
  display: flex; align-items: center; justify-content: center; font-size: 19px; position: relative;
  box-shadow: inset 0 1px 2px #0006; cursor: default;
}
.collog-cell:hover { border-color: #c79b3b; box-shadow: inset 0 1px 2px #0006, 0 0 5px #c79b3b44; }
.collog-cell.locked { background: #0d0b07; color: #2c2719; }
.collog-cell.locked .collog-q { color: #3a3322; font-size: 15px; font-weight: bold; }
/* found a better-than-base version → glowing blue outline */
.collog-cell.better { border-color: #5dafff; box-shadow: inset 0 0 4px #0006, 0 0 6px #5dafffaa; }
.collog-cell.better:hover { box-shadow: inset 0 0 4px #0006, 0 0 9px #5dafff; }
/* OSRS-style obtained count in the top-left corner */
.collog-n { position: absolute; top: 1px; left: 2px; font-size: 10px; line-height: 1; font-weight: bold;
  color: #ffd54a; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000; pointer-events: none; }
.collog-recent { color: #c8b88a; font-size: 11px; padding: 2px 6px 8px; line-height: 1.5; }
.collog-recent b { color: #ffd54a; }
.bank-all-btn { min-width: 0; font-size: 12px; padding: 6px 8px; white-space: nowrap; }
.armory-kits { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.armory-kit-btn {
  flex: 1 1 0; min-width: 84px; cursor: pointer; padding: 8px 6px; font-size: 12px; font-weight: bold;
  color: #f4e9c8; background: linear-gradient(#5a4a24, #3a2f16); border: 1px solid #8a6f34; border-radius: 4px;
  text-shadow: 1px 1px 0 #000; transition: filter .1s;
}
.armory-kit-btn:hover { filter: brightness(1.2); }
.armory-kit-btn:active { filter: brightness(0.9); }
.armory-return-btn { flex-basis: 100%; background: linear-gradient(#4a2a2a, #2f1a1a); border-color: #8a4a34; }
.bank-controls { display: flex; gap: 6px; align-items: stretch; margin: 4px 0 6px; }
.bank-search {
  flex: 1; min-width: 0; background: #1c160d; border: 1px solid #6b5a30; border-radius: 3px;
  color: #f0e6c8; font-size: 12px; padding: 5px 8px; font-family: inherit;
}
.bank-search::placeholder { color: #8a7a5c; }
.bank-search:focus { outline: none; border-color: #c79b3b; box-shadow: 0 0 4px #c79b3b55; }
.bank-mode-btn { min-width: 56px; font-size: 11px; padding: 6px 8px; }
.bank-tabs { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #4a3d22; }
.bank-tab {
  min-width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#33291a, #221a0f); border: 1px solid #5a4a28; border-radius: 4px;
  color: #c8b88a; font-size: 16px; cursor: pointer; user-select: none; padding: 0 4px;
}
.bank-tab:hover { border-color: #c79b3b; }
.bank-tab.sel { background: linear-gradient(#7d6a3e, #564726); border-color: #c79b3b; color: #fff; }
.bank-tab.drop-target { border-color: #5dff5d; box-shadow: 0 0 6px #5dff5d88; }
/* sticky bank header: search + tab bar stay pinned while the grid scrolls */
.bank-header {
  position: sticky; top: 0; z-index: 3;
  background: linear-gradient(#3e3529, #2f2719);
  padding: 10px 0 6px; margin-bottom: 2px;
  box-shadow: 0 6px 6px -4px rgba(0,0,0,.5);
}
.bank-header .bank-controls { margin-top: 0; }
.bank-header .bank-tabs { margin-bottom: 0; }
#modal-overlay.bank-modal #modal-body { padding-top: 0; }
#modal-overlay.bank-modal .bank-grid { overflow: visible; }
/* bank footer: OSRS-style left-click quantity selector + placeholder toggle */
.bank-footer {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; gap: 5px; align-items: center; flex-wrap: wrap;
  background: linear-gradient(#2f2719, #3e3529);
  border-top: 1px solid #4a3d22;
  padding: 7px 0; margin-top: 6px;
}
.bank-foot-label { color: #c8b88a; font-size: 11px; }
.bank-qty-btn { min-width: 34px; }
.bank-ph-btn { margin-left: auto; }
/* placeholder slots: the item stays visible but ghosted, with a grey 0 */
.inv-slot.ph .item-img, .inv-slot.ph .item-emoji { opacity: .35; }
.inv-slot.ph .qty { color: #9a9a9a; }
/* tab separator line in the "All" view */
.bank-sep {
  grid-column: 1 / -1;
  display: flex; align-items: center;
  color: #c8a24a; font-size: 11px; font-weight: bold; letter-spacing: .5px;
  margin: 9px 0 1px; padding-top: 5px; border-top: 1px solid #5a4a28;
}
.shop-slot .price {
  position: absolute; bottom: 1px; left: 0; right: 0; text-align: center;
  font-size: 8px; color: #5dff5d; font-weight: bold; text-shadow: 1px 1px 0 #000;
}
.smith-row .spell-info b { color: #ffd54a; }

/* ---------- Store & achievements ---------- */
#login-clientpromo { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 420px; }
.promo-btn {
  display: inline-block; padding: 9px 18px; font-size: 13px; font-weight: bold;
  color: #ffd54a; text-decoration: none; text-align: center; cursor: pointer;
  background: linear-gradient(#564726, #3a2f17); border: 2px outset #7d6a3e; border-radius: 4px;
}
.promo-btn:hover { background: linear-gradient(#7d6a3e, #564726); }
.promo-btn.active { box-shadow: 0 0 8px rgba(255, 213, 74, .35); }
#clientpromo-sub { flex-basis: 100%; text-align: center; color: #8a7a5c; font-size: 11px; }
#login-links { margin-top: 14px; display: flex; gap: 10px; align-items: center; color: #8a7a5c; font-size: 12px; }
#login-links a { color: #ffd54a; text-decoration: none; font-weight: bold; }
#login-links a:hover { text-decoration: underline; }
.store-status {
  text-align: center; padding: 8px; margin: 4px 2px 8px; color: #fff; font-size: 12px;
  background: #241e13; border: 1px solid #4a3f28; border-radius: 4px;
}
.store-card {
  margin: 6px 2px; padding: 9px 10px; background: #241e13;
  border: 1px solid #6b5a32; border-radius: 5px;
}
.store-card-head { display: flex; justify-content: space-between; align-items: center; }
.store-card-head b { color: #ffd54a; font-size: 13px; }
.store-price { color: #5dff5d; font-size: 12px; font-weight: bold; }
.store-desc { color: #c8b88a; font-size: 10px; padding: 5px 0 7px; line-height: 1.4; }
.store-buy { width: 100%; min-width: 0; padding: 6px; font-size: 12px; }
.wardrobe-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 2px 8px; }
.cos-btn {
  display: flex; align-items: center; gap: 4px; padding: 4px 7px; cursor: pointer;
  background: #241e13; color: #c8b88a; border: 1px solid #4a3f28; border-radius: 3px;
  font-family: Verdana; font-size: 10px;
}
.cos-btn.active { border-color: #ffd54a; color: #ffd54a; background: #3a3120; }
.cos-swatch { width: 10px; height: 10px; border-radius: 2px; border: 1px solid #000; display: inline-block; }
.wardrobe-hint { color: #8a7a5c; font-size: 9px; align-self: center; }
.ach-row {
  display: flex; align-items: center; gap: 8px; margin: 4px 2px; padding: 6px 8px;
  background: #241e13; border: 1px solid #4a3f28; border-radius: 4px;
}
.ach-row.done { border-color: #5dff5d44; background: #1d2415; }
.ach-row .spell-info b { color: #c8b88a; font-size: 11px; }
.ach-row.done .spell-info b { color: #5dff5d; }
.ach-row .spell-info span { font-size: 9px; }
.ach-check { font-size: 14px; }

/* ---------- Quest journal ---------- */
.quest-row { cursor: pointer; }
.quest-row:hover { border-color: #ffd54a88; }
.quest-desc { color: #c8b88a; font-size: 11px; font-style: italic; padding: 8px 2px 4px; }
.quest-journal { margin-top: 4px; }
.quest-stage {
  margin: 4px 0; padding: 6px 8px; font-size: 10px; border-radius: 4px;
  background: #241e13; border: 1px solid #4a3f28; color: #c8b88a;
}
.quest-stage.done { color: #7da06a; border-color: #3a4a2890; }
.quest-stage.done::before { content: '✔ '; color: #3fd45f; }
.quest-stage.current { color: #ffd54a; border-color: #ffd54a55; background: #2a2412; }
.quest-stage.current::before { content: '▸ '; }
.quest-stage.locked { color: #ff5d5d; border-color: #ff5d5d44; }
.quest-stage.finished { color: #3fd45f; border-color: #3fd45f55; text-align: center; font-weight: bold; }

/* ---------- Friends & Clan tab ---------- */
.social-subtabs { justify-content: center; margin-top: 2px; }
.social-subtabs .buildcat-btn { font-size: 11px; padding: 5px 10px; }
.social-add-row { display: flex; gap: 4px; margin: 2px 2px 8px; }
.social-input {
  flex: 1; min-width: 0; padding: 5px 7px; font-family: Verdana; font-size: 11px;
  background: #14100a; color: #ffd54a; border: 1px solid #6b5a32; border-radius: 3px; outline: none;
}
.social-input::placeholder { color: #8a7a5c; }
.social-row {
  display: flex; align-items: center; gap: 6px; margin: 3px 2px; padding: 6px 8px;
  background: #241e13; border: 1px solid #4a3f28; border-radius: 4px; cursor: pointer;
}
.social-row:hover { border-color: #8a7340; background: #2e2718; }
.social-dot { color: #6a6a6a; font-size: 10px; }
.social-row.online .social-dot { color: #5dff5d; text-shadow: 0 0 4px #5dff5d88; }
.social-name { flex: 1; color: #e8d8a0; font-size: 12px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-row.online .social-name { color: #fff; }
.social-role { font-size: 11px; }
.social-status { color: #8a7a5c; font-size: 9px; }
.social-row.online .social-status { color: #5dff5d; }
.social-clan-sub { text-align: center; color: #c8b88a; font-size: 10px; padding: 0 0 8px; }
.social-leave-btn { display: block; width: 90%; margin: 10px auto 4px; min-width: 0; font-size: 11px; padding: 6px; }

/* ---------- Mobile / small screens ---------- */
@media (max-width: 940px), (max-height: 620px) {
  #side-panel { width: 172px; }
  #panel-content { padding: 4px 13%; height: 232px; }
  #chatbox { width: calc((100% - 172px) * 0.7); height: 132px; }
  #chat-messages { font-size: 11px; }
  #minimap-wrap { right: 10px; transform: scale(0.78); transform-origin: top right; }
  #wildy-indicator { right: 60px; top: 196px; font-size: 12px; }
  #xp-counter { right: 170px; font-size: 11px; }
  .xp-drop { right: 150px; }
  #slayer-counter { right: 180px; bottom: 112px; font-size: 11px; }
  .inv-slot { font-size: 17px; }
  .ptab { font-size: 0; padding: 0; }
  .skill-cell { padding: 4px 4px; gap: 3px; }
  .skill-cell .slvl { font-size: 11px; }
  .style-btn { padding: 6px 8px; margin: 4px 2px; }
  #login-logo { font-size: 60px; letter-spacing: 3px; margin-bottom: 16px; }
  #login-logo .login-kanji { font-size: 30px; letter-spacing: 9px; }
  #login-box { width: 310px; max-width: 92vw; }
  #login-body { padding: 12px 16px 16px; }
  #hover-text { font-size: 11px; }
  #context-menu { font-size: 13px; }
  .context-opt { padding: 7px 12px; }
  #modal-box { max-height: 88vh; }
  .modal-grid { grid-template-columns: repeat(6, 1fr); }
  .ptab { font-size: 0; padding: 0; }
}

/* inventory drag-and-drop */
.inv-slot.dragging { opacity: 0.45; }
.inv-slot.drop-target { border-color: #ffd54a; background: #34291a; }
/* item selected for "Use on …" — RS-style white outline */
.inv-slot.using { outline: 2px solid #fff; outline-offset: -2px; box-shadow: inset 0 0 6px #fff8, 0 0 4px #fff6; }

/* build palette v2 */
.build-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.build-card {
  background: #241e13; border: 1px solid #4a3f28; border-radius: 3px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; padding: 7px 4px 5px;
}
.build-card:hover { border-color: #8a7340; background: #2e2718; }
.build-card .build-icon { font-size: 22px; line-height: 1; }
.build-card .build-name { font-size: 10px; color: #c8b88a; text-align: center; margin-top: 4px; }
.build-card .build-owned { font-size: 9px; color: #7fbf6a; margin-top: 2px; }
.build-card.locked { opacity: 0.45; }
.build-card.locked .build-owned { color: #cf6a5a; }

/* construction tab */
.buildcat-row { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0; }
.buildcat-btn {
  background: #241e13; border: 1px solid #4a3f28; color: #c8b88a; border-radius: 3px;
  font-size: 10px; padding: 4px 6px; cursor: pointer;
}
.buildcat-btn.active { background: #4a3f28; color: #ffd54a; }
.buildcat-btn:hover { border-color: #8a7340; }
.build-card.selected { border-color: #ffd54a; background: #3a3120; }

/* login flythrough background */
.login-bg > *:not(#game-canvas) { display: none !important; }
#login-screen { background: rgba(8, 10, 6, 0.45) !important; }

/* ---------- Player trading ---------- */
#trade-overlay {
  position: absolute; inset: 0; z-index: 62;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; /* the inventory side panel must stay clickable to offer items */
}
#trade-window {
  width: 560px; max-width: calc(100vw - 220px);
  background: linear-gradient(#3e3529, #2b2418);
  border: 2px solid #8a7340; border-radius: 6px;
  box-shadow: 0 0 32px rgba(0,0,0,.85);
  display: flex; flex-direction: column;
  pointer-events: auto;
}
.trade-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 2px solid #8a7340;
}
.trade-title { color: #ffd54a; font-size: 15px; font-weight: bold; text-shadow: 1px 1px 0 #000; }
#trade-close {
  background: #6b2a1a; color: #fff; border: 1px solid #000; border-radius: 3px;
  width: 26px; height: 26px; cursor: pointer; font-size: 13px; font-weight: bold;
}
#trade-body { display: flex; gap: 12px; padding: 10px 14px; }
.trade-col { flex: 1; min-width: 0; }
.trade-col-title { color: #c8b88a; font-size: 11px; padding: 0 0 6px; text-align: center; }
.trade-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  background: rgba(0,0,0,.25); border: 1px solid #5a4a30; border-radius: 4px; padding: 6px;
}
.trade-grid .inv-slot { font-size: 19px; min-height: 38px; display: flex; align-items: center; justify-content: center; }
#trade-status { min-height: 20px; text-align: center; color: #ffd54a; font-size: 12px; padding: 2px 14px; text-shadow: 1px 1px 0 #000; }
.trade-warn { color: #ff6a4a; font-weight: bold; }
#trade-buttons { display: flex; gap: 10px; justify-content: center; padding: 8px 14px 14px; }
#trade-buttons button {
  min-width: 130px; padding: 8px 18px; font-weight: bold; font-size: 13px;
  border: 1px solid #000; border-radius: 4px; cursor: pointer; color: #fff; text-shadow: 1px 1px 0 #000;
}
#trade-accept { background: linear-gradient(#3f7a2e, #2c5a1e); }
#trade-accept:hover { background: linear-gradient(#4a8c38, #336a24); }
#trade-accept:disabled { background: #4a4438; color: #9a927e; cursor: default; }
#trade-decline { background: linear-gradient(#8a3424, #6b2a1a); }
#trade-decline:hover { background: linear-gradient(#9c3e2a, #7a3220); }
.trade-link { cursor: pointer; }

/* ===== The Lavish: boss health bar + Enter/Leave dialog ===== */
#lavish-boss-bar {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(440px, 70vw); z-index: 60; pointer-events: none; text-align: center;
  font-family: 'Trebuchet MS', sans-serif;
}
#lavish-boss-name {
  color: #ffd24a; font-size: 15px; font-weight: bold; letter-spacing: 0.5px;
  text-shadow: 0 0 4px #000, 1px 1px 0 #000; margin-bottom: 3px;
}
#lavish-boss-track {
  height: 16px; background: #2a1d14; border: 2px solid #d4af37; border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6); overflow: hidden;
}
#lavish-boss-fill {
  height: 100%; width: 100%; transition: width 0.25s ease;
  background: linear-gradient(#d23a3a, #8a1f1f);
}
#lavish-boss-bar.gag { width: min(620px, 92vw); }
#lavish-boss-bar.gag #lavish-boss-name { font-size: 22px; color: #ff4a4a; animation: lavishGagPulse 0.4s infinite alternate; }
#lavish-boss-bar.gag #lavish-boss-track { height: 26px; border-color: #ff4a4a; }
@keyframes lavishGagPulse { from { text-shadow: 0 0 4px #000; } to { text-shadow: 0 0 14px #ff4a4a, 0 0 4px #000; } }

#lavish-dialog {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(420px, 86vw); z-index: 200; padding: 18px 20px;
  background: linear-gradient(#2b2418, #1c1710); border: 2px solid #d4af37; border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.7); text-align: center; font-family: 'Trebuchet MS', sans-serif;
}
#lavish-dialog-title { color: #ffd24a; font-size: 18px; font-weight: bold; margin-bottom: 10px; }
#lavish-dialog-text { color: #e8e0c8; font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
#lavish-dialog-btns { display: flex; gap: 12px; justify-content: center; }
#lavish-dialog-btns .rs-btn { min-width: 110px; }
#lavish-dlg-enter { background: linear-gradient(#8a6a1f, #6b4f12); }
#lavish-dlg-leave { background: linear-gradient(#5a5048, #3f382f); }
/* generic NPC choice dialog (Warden Garrick) */
#choice-dialog {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(380px, 86vw); z-index: 200; padding: 18px 20px;
  background: linear-gradient(#2b2418, #1c1710); border: 2px solid #d4af37; border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.7); text-align: center; font-family: 'Trebuchet MS', sans-serif;
}
#choice-dialog-title { color: #ffd24a; font-size: 18px; font-weight: bold; margin-bottom: 10px; }
#choice-dialog-text { color: #e8e0c8; font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
#choice-dialog-btns { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
#choice-dialog-btns .rs-btn { width: 100%; }
/* Boss Slayer rewards shop. Anchored near the top (not centred) so it never runs off the top of the
   screen on tall content, and the body has an EXPLICIT max-height so it scrolls without relying on the
   flexbox min-height:0 trick (which is unreliable on mobile Safari). */
#slayer-shop {
  position: fixed; top: 4vh; left: 50%; transform: translateX(-50%);
  width: min(460px, 92vw); max-height: 92vh; z-index: 200;
  background: linear-gradient(#2b2418, #1c1710); border: 2px solid #d4af37; border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.7); font-family: 'Trebuchet MS', sans-serif; overflow: hidden;
}
#slayer-shop-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #4a3f28; }
#slayer-shop-title { color: #ffd24a; font-size: 16px; font-weight: bold; }
#slayer-shop-close { padding: 2px 10px; }
#slayer-shop-pts { padding: 8px 14px; color: #e8e0c8; font-size: 13px; border-bottom: 1px solid #3a3322; }
/* explicit scroll bound: full modal (92vh) minus the header + points bar (~96px) */
#slayer-shop-body { max-height: calc(92vh - 96px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 10px 12px; }
.sshop-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-bottom: 1px solid #2e2819; }
.sshop-row.owned { opacity: 0.7; }
.sshop-info { flex: 1; color: #e8e0c8; font-size: 13px; }
.sshop-desc { color: #9a907a; font-size: 11px; margin-top: 2px; }
.sshop-act { flex-shrink: 0; }
.sshop-buy { background: linear-gradient(#8a6a1f, #6b4f12); min-width: 64px; }
.sshop-buy.dim { opacity: 0.45; }
.sshop-state { font-size: 11px; padding: 3px 8px; border-radius: 4px; }
.sshop-state.owned { color: #5dff5d; }
.sshop-state.locked { color: #ff8a3a; }
.sshop-section { margin-top: 10px; padding: 8px 6px; border-top: 1px solid #4a3f28; }
.sshop-sectitle { color: #e8c060; font-size: 13px; font-weight: bold; margin-bottom: 6px; }
.sshop-block { display: inline-flex; align-items: center; gap: 4px; color: #e8e0c8; font-size: 12px; margin: 2px 8px 2px 0; cursor: pointer; }
.sshop-block.on { color: #ff8a3a; }
.sshop-section .rs-btn { margin-right: 8px; }

/* ============================================================
   TRINOBI landing — login + live hiscores, unified crimson/white
   theme matching the TRINOBI title mark. Appended last so it
   overrides the legacy 2007 login styling above.
   ============================================================ */
#login-screen { justify-content: flex-start; overflow-y: auto; padding: 30px 14px 24px; }
#login-hero { position: relative; z-index: 2; width: 100%; max-width: 940px; margin: auto;
  display: flex; flex-direction: column; align-items: center; }
#login-logo { margin-bottom: 6px; }
#login-tagline { color: #cdbfa0; font-size: 12.5px; letter-spacing: .3px; text-align: center;
  margin: 0 0 22px; text-shadow: 0 1px 3px #000; }
#login-cols { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start;
  justify-content: center; width: 100%; }
#login-left { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* --- login box: dark glass + crimson accent --- */
#login-box { width: 360px; margin: 0; border: 1px solid rgba(226,59,59,.4); border-radius: 12px;
  background: linear-gradient(180deg, rgba(20,16,18,.9), rgba(10,9,11,.92));
  box-shadow: 0 14px 50px rgba(0,0,0,.6), 0 0 28px rgba(226,59,59,.12), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(8px); overflow: hidden; }
#login-tabs { border-bottom: 1px solid rgba(226,59,59,.3); }
.login-tab { background: transparent; color: #b9ad97; font-family: Verdana, sans-serif;
  letter-spacing: 1px; }
.login-tab.active { background: linear-gradient(180deg, rgba(226,59,59,.22), rgba(226,59,59,.05));
  color: #fff; box-shadow: inset 0 -2px 0 #e23b3b; }
#login-welcome { font-family: Verdana, sans-serif; color: #fff; letter-spacing: 1px;
  font-size: 17px; text-shadow: 0 0 14px rgba(226,59,59,.5); }
.login-row label { color: #d8cdb6; }
.login-row input { background: rgba(0,0,0,.45); color: #fff; border: 1px solid rgba(226,59,59,.35);
  border-radius: 6px; }
.login-row input:focus { border-color: #e23b3b; box-shadow: 0 0 0 2px rgba(226,59,59,.25); }
#login-remember { accent-color: #e23b3b; }
#login-hint { color: #a89c84; }

/* --- buttons: crimson with white impact label --- */
.rs-btn { background: linear-gradient(180deg, #c92b2b, #7e1414); border: 1px solid #e23b3b;
  border-radius: 7px; color: #fff; font-family: Verdana, sans-serif; letter-spacing: 1px;
  box-shadow: 0 3px 0 #5a0e0e, 0 6px 18px rgba(0,0,0,.45); text-shadow: 0 1px 2px #3a0606; }
.rs-btn:hover { background: linear-gradient(180deg, #e23b3b, #9a1a1a);
  box-shadow: 0 3px 0 #5a0e0e, 0 0 22px rgba(226,59,59,.5); }
.rs-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #5a0e0e; border-style: solid; }

#login-clientpromo { margin-top: 0; }
.promo-btn { background: linear-gradient(180deg, rgba(40,34,38,.92), rgba(22,18,22,.94));
  border: 1px solid rgba(226,59,59,.35); border-radius: 8px; color: #f0e7d6;
  font-family: Verdana, sans-serif; letter-spacing: .5px; box-shadow: none; text-shadow: 0 1px 2px #000; }
.promo-btn:hover { background: linear-gradient(180deg, rgba(226,59,59,.3), rgba(120,20,20,.3)); border-color: #e23b3b; }
.promo-btn.active { box-shadow: 0 0 12px rgba(226,59,59,.4); border-color: #e23b3b; }
#clientpromo-sub { color: #9a8e78; }

/* --- live hiscores card --- */
#login-right { display: flex; }
.hs-card { width: 420px; max-width: 100%; display: flex; flex-direction: column;
  border: 1px solid rgba(226,59,59,.4); border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20,16,18,.9), rgba(10,9,11,.92));
  box-shadow: 0 14px 50px rgba(0,0,0,.6), 0 0 28px rgba(226,59,59,.12), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(8px); }
.hs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid rgba(226,59,59,.3);
  background: linear-gradient(180deg, rgba(226,59,59,.16), rgba(226,59,59,0)); }
.hs-title { font-family: Verdana, sans-serif; color: #fff; font-size: 17px; letter-spacing: 1px;
  text-shadow: 0 0 14px rgba(226,59,59,.5); }
.hs-views { display: flex; gap: 6px; }
.hs-view { font-family: Verdana, sans-serif; font-size: 13px; letter-spacing: .5px; cursor: pointer;
  padding: 5px 12px; border-radius: 7px 7px 0 0; color: #c9bda6; background: rgba(0,0,0,.3);
  border: 1px solid rgba(226,59,59,.25); border-bottom: none; transition: background .12s, color .12s; }
.hs-view:hover { color: #fff; }
.hs-view.active { color: #fff; background: linear-gradient(180deg, #c92b2b, #7e1414); border-color: #e23b3b;
  text-shadow: 0 0 12px rgba(226,59,59,.5); }
.hs-sub { color: #c9bda6; font-size: 11px; }
.hs-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 12px; max-height: 96px; overflow-y: auto;
  border-bottom: 1px solid rgba(226,59,59,.15); }
.hs-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; cursor: pointer;
  font-size: 10.5px; color: #c9bda6; background: rgba(0,0,0,.35); border: 1px solid rgba(226,59,59,.25);
  border-radius: 14px; font-family: Verdana, sans-serif; transition: background .12s, border-color .12s, color .12s; }
.hs-chip:hover { border-color: #e23b3b; color: #fff; }
.hs-chip.active { background: linear-gradient(180deg, #c92b2b, #7e1414); color: #fff; border-color: #e23b3b;
  box-shadow: 0 0 10px rgba(226,59,59,.45); }
.hs-table-wrap { overflow-y: auto; max-height: 360px; }
.hs-table { width: 100%; border-collapse: collapse; }
.hs-table th, .hs-table td { padding: 7px 12px; text-align: left; font-size: 12px; }
.hs-table th { position: sticky; top: 0; background: rgba(18,14,16,.97); color: #fff;
  font-family: Verdana, sans-serif; font-weight: bold; letter-spacing: .3px;
  border-bottom: 1px solid rgba(226,59,59,.3); }
.hs-table th.r { text-align: right; }
.hs-table tbody tr { border-bottom: 1px solid rgba(255,255,255,.05); transition: background .1s; }
.hs-table tbody tr:last-child { border-bottom: none; }
.hs-table tbody tr:hover { background: rgba(226,59,59,.12); }
.hs-rank { width: 44px; color: #8a7e68; font-weight: bold; }
.hs-rank.medal { font-size: 15px; }
.hs-name { color: #f0e7d6; }
.hs-mem { color: #ffd54a; }
.hs-num { text-align: right; color: #ff6a6a; font-weight: bold; }
.hs-xp { text-align: right; color: #c9bda6; }
.hs-loading { text-align: center; padding: 30px; color: #8a7e68; }
.hs-plink { color: inherit; text-decoration: none; cursor: pointer; }
.hs-plink:hover { color: #ffd54a; text-decoration: underline; }
#hs-full-link { display: block; text-align: center; padding: 11px; color: #ffd54a; text-decoration: none;
  font-family: Verdana, sans-serif; letter-spacing: .5px; font-size: 13px;
  background: linear-gradient(180deg, rgba(226,59,59,.16), rgba(226,59,59,0));
  border-top: 1px solid rgba(226,59,59,.25); }
#hs-full-link:hover { background: rgba(226,59,59,.28); color: #fff; }
.hs-foot { display: block; text-align: center; padding: 11px; color: #fff; text-decoration: none;
  font-family: Verdana, sans-serif; letter-spacing: .5px; font-size: 13px;
  background: linear-gradient(180deg, rgba(226,59,59,.16), rgba(226,59,59,0));
  border-top: 1px solid rgba(226,59,59,.25); }
.hs-foot:hover { background: rgba(226,59,59,.28); }

/* --- patch notes card (full width under login + hiscores) --- */
#patchnotes { width: 100%; max-width: 802px; margin: 22px auto 0; }
.pn-card { border: 1px solid rgba(226,59,59,.4); border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20,16,18,.9), rgba(10,9,11,.92));
  box-shadow: 0 14px 50px rgba(0,0,0,.6), 0 0 28px rgba(226,59,59,.12), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(8px); }
.pn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid rgba(226,59,59,.3);
  background: linear-gradient(180deg, rgba(226,59,59,.16), rgba(226,59,59,0)); }
.pn-title { font-family: Verdana, sans-serif; color: #fff; font-size: 17px; letter-spacing: 1px;
  text-shadow: 0 0 14px rgba(226,59,59,.5); }
.pn-sub { color: #c9bda6; font-size: 11px; }
.pn-list { max-height: 320px; overflow-y: auto; padding: 4px 0; }
.pn-loading { text-align: center; padding: 26px; color: #8a7e68; font-size: 12.5px; }
.pn-entry { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.05); }
.pn-entry:last-child { border-bottom: none; }
.pn-entry-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pn-tag { font-family: Verdana, sans-serif; font-size: 9.5px; font-weight: bold; letter-spacing: .6px;
  text-transform: uppercase; padding: 3px 8px; border-radius: 11px; color: #fff; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.15); }
.pn-new { background: linear-gradient(180deg, #2e9e54, #176b36); }
.pn-fix { background: linear-gradient(180deg, #2f7fd1, #16508c); }
.pn-bal { background: linear-gradient(180deg, #d18a2f, #8c5616); }
.pn-qol { background: linear-gradient(180deg, #7b4fd1, #4a2b8c); }
.pn-upd { background: linear-gradient(180deg, #6a6a6a, #3a3a3a); }
.pn-entry-title { color: #f0e7d6; font-family: Verdana, sans-serif; font-size: 13.5px; font-weight: bold;
  letter-spacing: .3px; flex: 1; min-width: 120px; }
.pn-date { color: #8a7e68; font-size: 11px; white-space: nowrap; }
.pn-items { margin: 7px 0 0; padding: 0 0 0 18px; }
.pn-items li { color: #c9bda6; font-size: 12.5px; line-height: 1.5; margin-bottom: 3px; }
.pn-items li::marker { color: #e23b3b; }

/* --- links + footer --- */
#login-links { margin-top: 20px; color: #9a8e78; justify-content: center; flex-wrap: wrap; }
#login-links a { color: #ff7a7a; }
#login-footer { position: static; margin-top: 16px; color: #7d7058; text-align: center; }

/* --- responsive: stack login + hiscores on narrow screens --- */
@media (max-width: 880px) {
  #login-cols { flex-direction: column; align-items: center; }
  .hs-card { width: 360px; }
  .hs-table-wrap { max-height: 300px; }
}
@media (max-width: 400px) {
  #login-box, .hs-card, #login-clientpromo { width: 100%; max-width: 360px; }
}

/* ============================================================
   The Sealed Sage — telegraph banner + Awakened-state darkening
   ============================================================ */
#sage-warn {
  position: fixed; top: 14%; left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 240; pointer-events: none;
  padding: 12px 26px; border-radius: 10px;
  font-family: 'Arial Black', Impact, sans-serif; font-size: 26px; font-weight: 900;
  letter-spacing: 0.5px; text-align: center; white-space: nowrap;
  color: #fff; text-shadow: 0 2px 6px #000, 0 0 14px currentColor;
  background: rgba(10,8,14,0.72); border: 2px solid currentColor;
  box-shadow: 0 0 26px rgba(0,0,0,0.6), 0 0 22px currentColor inset;
  opacity: 0; visibility: hidden;
}
#sage-warn.show { opacity: 1; visibility: visible; animation: sageWarnPulse 0.5s ease-in-out infinite alternate; }
@keyframes sageWarnPulse {
  from { transform: translateX(-50%) translateY(-8px) scale(1.0); }
  to   { transform: translateX(-50%) translateY(-8px) scale(1.06); }
}
#sage-warn.sw-magic { color: #5ad0ff; }
#sage-warn.sw-melee { color: #ff8a3a; }
#sage-warn.sw-range { color: #6ad97a; }
#sage-warn.sw-sign  { color: #c98bff; }
#sage-warn.sw-beam  { color: #5affd0; }
@media (max-width: 560px) {
  #sage-warn { font-size: 16px; padding: 8px 14px; white-space: normal; max-width: 92vw; }
}
/* Awakened state: the arena dims with a slow crimson vignette */
body.sage-awakened::after {
  content: ''; position: fixed; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(40,0,0,0) 40%, rgba(20,0,4,0.55) 100%);
  animation: sageAwakenFade 1.2s ease-in forwards;
}
@keyframes sageAwakenFade { from { opacity: 0; } to { opacity: 1; } }

/* small color swatch next to tile-overlay settings */
.tile-color {
  margin-left: auto;
  width: 30px;
  height: 20px;
  padding: 0;
  border: 1px solid #5a4a2a;
  border-radius: 3px;
  background: none;
  cursor: pointer;
}
.tile-color::-webkit-color-swatch-wrapper { padding: 2px; }
.tile-color::-webkit-color-swatch { border: none; border-radius: 2px; }

/* ---- Sealmaking: stencil-trace minigame (freehand drawing over a guide glyph) ---- */
.seal-info { font-size: 13px; color: #d8cfae; margin-bottom: 10px; line-height: 1.5; }
.seal-info .seal-hint { color: #9a8c60; font-size: 12px; }
#seal-canvas {
  display: block; margin: 0 auto; cursor: crosshair; touch-action: none;
  border: 2px solid #5a4a2a; border-radius: 6px; background: #1c160c;
}
.seal-btns { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.seal-score { text-align: center; margin-top: 8px; min-height: 18px; font-size: 13px; color: #d8cfae; }
.seal-score.bad { color: #e07a6a; }
.seal-score.great { color: #ffd75e; }
.seal-kanji-inline { color: #ffd75e; font-size: 15px; }

/* ============ Duel Arena ============ */
#duel-overlay {
  position: absolute; inset: 0; z-index: 62;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
#duel-window {
  width: 620px; max-width: calc(100vw - 220px); max-height: calc(100vh - 60px); overflow-y: auto;
  background: linear-gradient(#3e3529, #2b2418);
  border: 2px solid #b8860b; border-radius: 6px;
  box-shadow: 0 0 32px rgba(0,0,0,.85);
  display: flex; flex-direction: column;
  pointer-events: auto;
}
#duel-close {
  background: #6b2a1a; color: #fff; border: 1px solid #000; border-radius: 3px;
  width: 26px; height: 26px; cursor: pointer; font-size: 13px; font-weight: bold;
}
#duel-body { padding: 8px 14px; }
.duel-sec-title { color: #ffd54a; font-size: 12px; font-weight: bold; padding: 8px 0 5px; text-shadow: 1px 1px 0 #000; }
.duel-rule-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.duel-rule {
  padding: 5px 9px; font-size: 12px; cursor: pointer; user-select: none;
  color: #d8cdb2; background: rgba(0,0,0,.3); border: 1px solid #5a4a30; border-radius: 4px;
}
.duel-rule:hover { border-color: #b8860b; }
.duel-rule.on { color: #fff; background: #6b2a1a; border-color: #ff6a4a; font-weight: bold; }
.duel-stake-row { display: flex; align-items: center; gap: 8px; color: #d8cdb2; font-size: 13px; padding: 4px 0; }
#duel-stake-input {
  width: 130px; padding: 5px 8px; font-size: 13px; color: #ffd54a; font-weight: bold;
  background: rgba(0,0,0,.4); border: 1px solid #8a7340; border-radius: 4px;
}
.duel-their-stake { color: #d8cdb2; }
.duel-their-stake b { color: #ffd54a; }
.duel-confirm { text-align: center; padding: 10px 6px; }
.duel-conf-line { color: #d8cdb2; font-size: 13px; padding: 4px 0; }
.duel-conf-line b { color: #ffd54a; }
#duel-status { min-height: 20px; text-align: center; color: #ffd54a; font-size: 12px; padding: 2px 14px; text-shadow: 1px 1px 0 #000; }
#duel-buttons { display: flex; gap: 10px; justify-content: center; padding: 8px 14px 14px; }
#duel-buttons button {
  min-width: 130px; padding: 8px 18px; font-weight: bold; font-size: 13px;
  border: 1px solid #000; border-radius: 4px; cursor: pointer; color: #fff; text-shadow: 1px 1px 0 #000;
}
#duel-accept { background: linear-gradient(#3f7a2e, #2c5a1e); }
#duel-accept:hover { background: linear-gradient(#4a8c38, #336a24); }
#duel-accept:disabled { background: #4a4438; color: #9a927e; cursor: default; }
#duel-decline { background: linear-gradient(#8a3424, #6b2a1a); }
#duel-hud {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 55;
  display: flex; align-items: center; gap: 12px;
  padding: 7px 16px; border-radius: 6px;
  background: rgba(30,24,14,.88); border: 2px solid #b8860b;
  color: #ffd54a; font-size: 13px; font-weight: bold; text-shadow: 1px 1px 0 #000;
  box-shadow: 0 0 18px rgba(0,0,0,.6);
}
#duel-hud b { color: #fff; }
#duel-forfeit {
  padding: 4px 12px; font-size: 12px; font-weight: bold; cursor: pointer;
  color: #fff; background: linear-gradient(#8a3424, #6b2a1a);
  border: 1px solid #000; border-radius: 4px; text-shadow: 1px 1px 0 #000;
}
#duel-forfeit:hover { background: linear-gradient(#a03e2a, #7c3220); }

/* ---------- character creator (design screen) ---------- */
#creator-overlay {
  position: absolute; inset: 0; z-index: 80;
  background: rgba(0,0,0,0.62);
  display: flex; align-items: center; justify-content: center;
}
#creator-box {
  width: 640px; max-width: 94vw; max-height: 92vh; overflow-y: auto;
  background: linear-gradient(#3e3529, #2b2418);
  border: 2px solid #8a7340; border-radius: 6px;
  box-shadow: 0 0 40px #000;
  padding: 12px 16px 14px;
}
#creator-title { color: #ffd54a; font-size: 17px; font-weight: bold; text-shadow: 1px 1px 0 #000; text-align: center; margin-bottom: 10px; }
#creator-main { display: flex; gap: 14px; }
#creator-left { flex: 0 0 280px; }
#creator-canvas { width: 280px; height: 400px; background: radial-gradient(ellipse at 50% 30%, #4a5a7a, #232838 75%); border: 1px solid #8a7340; border-radius: 4px; }
#creator-rotate { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
#creator-rows { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cc-row { display: flex; align-items: center; gap: 6px; }
.cc-label { flex: 0 0 86px; color: #e8ddc0; font-size: 12px; font-weight: bold; text-shadow: 1px 1px 0 #000; }
.cc-value { flex: 1; text-align: center; color: #ffd54a; font-size: 12px; text-shadow: 1px 1px 0 #000; overflow: hidden; white-space: nowrap; }
.cc-arrow {
  background: #4a3d2a; color: #ffd54a; border: 1px solid #8a7340; border-radius: 3px;
  width: 26px; height: 24px; cursor: pointer; font-size: 13px; line-height: 1;
}
.cc-arrow:hover { background: #5a4b34; }
.cc-btn {
  background: #4a3d2a; color: #ffd54a; border: 1px solid #8a7340; border-radius: 4px;
  padding: 6px 14px; cursor: pointer; font-size: 13px; font-weight: bold; text-shadow: 1px 1px 0 #000;
}
.cc-btn:hover { background: #5a4b34; }
#cc-confirm { background: #2a5a2a; }
#cc-confirm:hover { background: #367036; }
#creator-foot { display: flex; justify-content: space-between; margin-top: 12px; }
.cc-swatches { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.cc-swatch { width: 20px; height: 20px; border: 2px solid #443a28; border-radius: 3px; cursor: pointer; }
.cc-swatch.sel { border-color: #ffd54a; box-shadow: 0 0 6px #ffd54a; }