:root {
  color-scheme: dark;
  --bg: #0b0907;
  --bg2: #15110c;
  --panel: rgba(18, 14, 10, 0.94);
  --panel2: #1d1711;
  --line: #4a3a22;
  --line2: #7a6036;
  --gold: #e3c27a;
  --gold2: #b8913f;
  --text: #e9e1d2;
  --muted: #9c8f7a;
  --hp: #c8261f;
  --mp: #2a63d6;
  --xp: #c9b13a;
  --good: #5fe07a;
  --bad: #ff6b5a;
  --exc: #4cff6e;
  --blue: #7fb2ff;
  /* local fonts only (no web font download): Palatino / Georgia style serif titles, the system sans-serif text */
  --title: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, 'Times New Roman', serif;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --top-h: 74px;
  --tabs-h: 42px;
  --panel-w: 400px;
  /* screen widths (media queries cannot use variables): <= 359 tiny phone, <= 429 small phone, <= 599 phone,
     600 - 899 tablet (the panel still slides over the battle), >= 900 desktop (panel at the right). The main frame follows
     the width of the battle view itself instead (ui.js layoutPad: one row from 640 px). */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.4 var(--font); overflow: hidden; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; }
.hidden { display: none !important; }
b { font-weight: 700; }

/* ------------------------------------------------------------ buttons */
/* the buttons of the newer interface: gfx_btn of the inventory (normal, over, down, off), the orange gfx_btn_hot of the
   quest window for the main action of a screen (.gold); red / blue ones keep the brown button with a coloured text */
.btn {
  border: 5px solid transparent; border-image: var(--gfx-btn) 8 fill / 5px stretch; background: none; color: #f0dcae;
  padding: 3px 10px; border-radius: 0; text-shadow: 0 1px 2px #000; white-space: nowrap;
}
.btn:hover:not(:disabled) { border-image-source: var(--gfx-btn-over); color: #fff3d0; }
.btn:active:not(:disabled) { border-image-source: var(--gfx-btn-down); }
.btn.gold { border-image-source: var(--gfx-btn-hot); color: #fff7e0; }
.btn.gold:hover:not(:disabled) { border-image-source: var(--gfx-btn-hot); filter: brightness(1.15); }
.btn.gold:active:not(:disabled) { border-image-source: var(--gfx-btn-hot-down); filter: none; }
.btn:disabled { border-image-source: var(--gfx-btn-off); color: #8f8574; opacity: 0.7; cursor: default; }
.btn.red { color: #ffb4a6; }
.btn.blue { color: #b9cfff; }
.btn.sm { padding: 1px 5px; font-size: 13px; }
.btn.xs { padding: 0 4px; font-size: 12px; border-width: 3px; border-image-width: 3px; }
.btn.big { padding: 7px 22px; font-size: 16px; font-family: var(--title); letter-spacing: 1px; }
.btn.block { width: 100%; }
/* the boxes of a list: the list box of the newer quest window (gfx_box: dark glass in a thin rounded rim); a box that
   is ready shows it with an outline over the rim */
.qb-row, .skill, .map-card, .shop-item, .chaos .pick, .qcard, .dg-card, .recipe { border: 5px solid transparent; border-image: var(--gfx-box) 10 fill / 5px stretch; border-radius: 0; background: none; }
/* chips on the battle screen: small windows of the newer interface (gfx_panel: stone in a dark metal frame) */
.chip {
  border: 6px solid transparent; border-image: var(--gfx-panel) 16 fill / 6px stretch; background: none; color: var(--muted);
  padding: 0 6px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.chip:hover { color: #fff3d0; }
.chip.on { color: var(--gold); }
/* gfx_panel has no top edge (see .mbox.mu-win::before): its bottom edge, turned over, closes the top of the small frames of
   the battle screen too - chips, quest / dungeon boards, minimap, town bar, the top bar (user report 2026-10-25) */
.chip, #minimap, #top { position: relative; }
.chip::before, .qhud::before, #minimap::before, #townBar::before, #top::before {
  content: ''; position: absolute; left: -6px; right: -6px; top: -6px; height: 0; border-style: solid; border-color: transparent; border-width: 0 6px 6px;
  border-image: var(--gfx-panel) 0 16 16 / 0 6px 6px stretch; transform: scaleY(-1); pointer-events: none;
}
/* a square icon of the simple menu (SimpleUI.ozg: 72 x 73 cells at --x, --y of gfx_simple), shown --k times */
.si { --k: 0.28; display: inline-block; flex: none; width: calc(72px * var(--k)); height: calc(73px * var(--k)); background: var(--gfx-simple) calc(var(--x) * -1px * var(--k)) calc(var(--y) * -1px * var(--k)) / calc(1024px * var(--k)) no-repeat; }
/* small MU button (newui_btn_empty_very_small, three stacked states) */
.icon-btn { position: relative; width: 42px; height: 36px; border: 0; border-radius: 0; background: var(--mu-btn2) 0 0 / 100% 300% no-repeat; font-size: 20px; }
.icon-btn:hover { background-position: 0 50%; }
.dot { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: #ff4433; box-shadow: 0 0 6px #ff4433; }

/* ------------------------------------------------------------ boot & create */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 50; }
.bg-art { position: absolute; inset: 0; background: #000 center / cover no-repeat; opacity: 0.55; filter: saturate(1.1); }
.bg-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 20%, rgba(0, 0, 0, 0.85) 80%); }
.logo { position: relative; text-align: center; font-family: var(--title); line-height: 1; }
.logo span { font-size: 92px; font-weight: 800; letter-spacing: 6px; background: linear-gradient(#fff2c4, #d9a441 55%, #7a4c12); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 12px rgba(255, 170, 60, 0.35)); }
.logo small { display: block; color: var(--gold); letter-spacing: 8px; font-size: 14px; margin-top: 4px; }
.logo.small span { font-size: 52px; }
.boot-box { position: relative; text-align: center; width: min(92vw, 560px); }
.progress { margin: 28px auto 10px; width: 80%; height: 8px; border: 1px solid var(--line2); background: #000; border-radius: 4px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8a5a15, #f0c75e); transition: width 0.2s; }
#bootText { color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------ layout */
#app { position: fixed; inset: 0; display: grid; grid-template-rows: var(--top-h) minmax(0, 1fr) var(--tabs-h); grid-template-columns: minmax(0, 1fr); padding-bottom: env(safe-area-inset-bottom); }
#top { grid-row: 1; display: flex; align-items: center; gap: 10px; padding: 0 4px; border: 6px solid transparent; border-image: var(--gfx-panel) 16 fill / 6px stretch; background: #0e0b08; z-index: 5; }
#battle { grid-row: 2; position: relative; overflow: hidden; background: #000; }
/* the five tabs are MU buttons (newui_btn_empty_small: normal / hover / pressed stacked) */
#tabs { grid-row: 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; min-width: 0; padding: 4px 6px; background: #0b0907; z-index: 6; }
#tabs button { position: relative; padding: 0 2px; border: 0; border-radius: 0; background: var(--mu-btn) 0 0 / 100% 300% no-repeat; color: #cdbb94; font-size: 12.5px; font-weight: 600; line-height: 1.1; text-shadow: 0 1px 1px #000; }
#tabs button:hover { background-position: 0 50%; color: #f0dcae; }
#tabs button.on { background-position: 0 100%; color: #ffd98a; }
#tabs .dot { top: 4px; right: 8%; }
/* phones and tablets: the panel slides up over the battle (two heights, see "Panel" below) */
#panel {
  position: fixed; left: 0; right: 0; bottom: var(--tabs-h); z-index: 7; display: flex; flex-direction: column; height: 62vh; visibility: hidden;
  transform: translateY(calc(100% + var(--tabs-h) + 20px)); transition: transform 0.22s ease;
  background: var(--mu-bg) 0 0 / 256px auto, #14110e; box-shadow: 0 0 24px rgba(0, 0, 0, 0.75);
}
body.panel-open #panel { transform: none; visibility: visible; }
#shade { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); border: 0; z-index: 6; display: none; }
body.panel-open #shade { display: block; }
.panel-head { padding: 8px 12px; font-family: var(--title); font-weight: 700; color: var(--gold); font-size: 19px; }
.tab { flex: 1; overflow-y: auto; padding: 10px 12px 16px; overscroll-behavior: contain; }

/* desktop: the panel stands at the right, its tab buttons inside the frame (ui.js moves #tabs into #panel) */
@media (min-width: 900px) {
  #app { grid-template-columns: minmax(0, 1fr) var(--panel-w); grid-template-rows: var(--top-h) minmax(0, 1fr); }
  #top { grid-column: 1 / 3; }
  #battle { grid-column: 1; grid-row: 2; }
  #panel { visibility: visible; position: static; grid-column: 2; grid-row: 2; height: auto; min-height: 0; transform: none; }
  #shade { display: none !important; }
  #panelClose { display: none; }
}

/* ------------------------------------------------------------ top bar */
.hero-mark { position: relative; flex: none; cursor: pointer; }
.hero-mark:hover .avatar, .hero-mark:focus-visible .avatar { border-color: var(--gold); box-shadow: 0 0 14px rgba(227, 194, 122, 0.55); }
.hero-mark:focus-visible { outline: none; }
/* the portrait opens the settings window (ui.js openMore) */
.hero-gear { position: absolute; top: -2px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: #1a130b; border: 1px solid var(--gold2); color: var(--gold); font-size: 12px; line-height: 16px; text-align: center; pointer-events: none; }
.avatar { width: 56px; height: 56px; border-radius: 50%; border: 2px solid #6e5b44; background: radial-gradient(circle at 50% 35%, #3a2b18, #0b0805) center / cover no-repeat; box-shadow: 0 0 0 1px #000, 0 0 8px rgba(0, 0, 0, 0.8); overflow: hidden; }
.hero-title { font-size: 11.5px; color: var(--gold); border: 1px solid #4a3c2c; border-radius: 3px; background: rgba(0, 0, 0, 0.35); padding: 0 6px; white-space: nowrap; }
.avatar canvas, .avatar img { width: 100%; height: 100%; }
/* the level on the money box of the inventory (gfx_money: its two ends and middle) */
.hero-level { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); height: 17px; line-height: 17px; border-style: solid; border-color: transparent; border-width: 0 5px; border-image: var(--gfx-money) 0 8 fill / 0 5px stretch; padding: 0 2px; font-size: 11px; color: var(--gold); white-space: nowrap; }
.hero-level span { color: var(--muted); margin-right: 2px; }
/* two lines on the server plate of the top menu (gfx_plate, pointed at the right): the name (and reset badge), then the
   class title and the power */
.topmid { flex: 1 1 auto; max-width: 440px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 4px 0; border-style: solid; border-color: transparent; border-width: 0 24px 0 12px; border-image: var(--gfx-plate) 0 34 0 16 fill / 0 24px 0 12px stretch; margin-right: auto; }
.topmid .row { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; }
.topmid .row > * { min-width: 0; }
.hero-name { color: #fff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.topmid .hero-title { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.topmid .top-power { flex: none; }
.badge { font-size: 11px; color: #ffcf6a; border: 1px solid #8a6a2a; border-radius: 8px; padding: 0 5px; }
.top-power { font-size: 12px; color: var(--muted); }
.top-power b { color: #ff9c4a; font-size: 14px; margin-left: 4px; }
/* zen: the money box and zen coin of the newer inventory (gfx_money, gfx_inven); jewels as their item pictures */
.money { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; font-size: 12px; text-align: right; }
.money span { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.zenbar { position: relative; width: 172px; height: 26px; border-style: solid; border-color: transparent; border-width: 0 6px; border-image: var(--gfx-money) 0 8 fill / 0 6px stretch; padding: 0 4px 0 28px; display: flex; align-items: center; justify-content: flex-end; }
.zenbar::before { content: ''; position: absolute; left: -2px; top: 1px; width: 24px; height: 23px; background: var(--gfx-inven) -627px -358px / 1024px 512px no-repeat; }
.zenbar b { color: #ffd34a; font-size: 13px; font-weight: 700; text-shadow: 0 1px 1px #000; font-variant-numeric: tabular-nums; letter-spacing: 0.3px; }
.jewels { display: flex; align-items: center; gap: 12px; }
.jewels span { gap: 3px; font-size: 13px; color: #e8dfc9; }
.jewels img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 0 3px rgba(150, 170, 255, 0.55)); }
/* daily gift: the chest of the simple menu (warm, bright when pointed at, dark while pressed) */
#giftBtn { --k: 0.56; --x: 593; --y: 329; position: relative; padding: 0; border: 0; cursor: pointer; }
#giftBtn:hover { --x: 173; --y: 415; }
#giftBtn:active { --x: 677; --y: 157; }
.coin { width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2a8, #d6a520 55%, #7a5208); display: inline-block; }

/* ------------------------------------------------------------ battle */
#arena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#stageInfo { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: min(70%, 360px); text-align: center; pointer-events: none; }
/* the stage name in the title of a window of the newer interface (gfx_title, 327 x 73: the crest, then the red bar from
   y 38 to 65, where the text goes) */
.stage-name { aspect-ratio: 327 / 73; padding: 11.6% 8% 2.4%; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; background: var(--gfx-title) 0 0 / 100% 100% no-repeat; font-family: var(--title); font-weight: 700; color: var(--gold); text-shadow: 0 2px 4px #000, 0 0 8px #000; font-size: 17px; }
.stage-name span { color: var(--muted); font-family: var(--font); font-size: 12px; margin-left: 6px; }
/* kill bar of the stage: the client's progress bar (Progress_Back, Progress) */
.stage-prog { position: relative; height: 10px; margin-top: 3px; background: var(--mu-prog-back) 0 0 / 100% 100% no-repeat, rgba(0, 0, 0, 0.7); overflow: hidden; }
.stage-prog i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--mu-prog) 0 0 / 100% 100% no-repeat; transition: width 0.3s; }
.stage-prog span { position: relative; font-size: 9px; line-height: 9px; color: #fff; text-shadow: 0 0 2px #000; display: block; }
#bossFrame { margin-top: 6px; }
#bossName { color: #ffb347; font-weight: 700; font-size: 13px; text-shadow: 0 0 4px #000; }
/* boss life: the life bar of the client's party window (newui_party_lifebar01 back, 02 fill inside it) */
.boss-bar { height: 10px; padding: 2px 2px; background: var(--mu-life-back) 0 0 / 100% 100% no-repeat, rgba(0, 0, 0, 0.8); overflow: hidden; margin-top: 2px; }
.boss-bar i { display: block; height: 100%; background: var(--mu-life) 0 0 / 100% 100% no-repeat; transition: width 0.15s; }
/* the buffs: a row over the skill bar (#pad, ui.js layoutPad sets --bar-x / --bar-w / --bar-y), more rows go upward */
#buffs { position: absolute; left: var(--bar-x, 0px); width: var(--bar-w, 100%); bottom: calc(100% - var(--bar-y, 0px)); display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: 6px 4px; pointer-events: none; }
/* one 20 x 28 icon cell drawn 1.25 times (ui.js BUFF_SCALE), the frame outside it */
.buff { box-sizing: content-box; width: 25px; height: 35px; flex: none; border: 1px solid var(--gold2); border-radius: 3px; position: relative; background-clip: padding-box; image-rendering: auto; pointer-events: auto; cursor: help; }
.buff small { position: absolute; bottom: -1px; right: 1px; font-size: 9px; color: #fff; text-shadow: 0 0 2px #000; }
.buff i { position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: #7dc3ff; transform-origin: left; }
.skill .en { color: #b9a77a; font-size: 11px; }
#autoControls { position: absolute; top: calc(var(--strip) + 8px); right: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
/* Auto: the MU Helper button of the top menu (gfx_topmenu, 29 x 29): play while it is off, pause while it runs */
.switch { width: 29px; height: 29px; border-radius: 50%; display: inline-block; background: var(--gfx-topmenu) -261px -43px / 1024px 256px no-repeat; }
.autotoggle:hover .switch { background-position: -230px -43px; }
.autotoggle.on .switch { background-position: -986px 0; }
.autotoggle.on:hover .switch { background-position: -354px -43px; }
.switch i { display: none; }
/* the gear of the MU Helper next to it (gfx_topmenu, 29 x 29): opens the Auto settings */
.auto-row { display: flex; gap: 6px; align-items: stretch; }
#autoSetBtn { padding: 0 2px; }
.gear { width: 29px; height: 29px; border-radius: 50%; display: inline-block; background: var(--gfx-topmenu) -478px -43px / 1024px 256px no-repeat; }
#autoSetBtn:hover .gear { background-position: -509px -43px; }
#autoSetBtn:active .gear, #autoSetBtn.on .gear { background-position: -540px -43px; }
/* The chat of the MU client (js/ui/chat.js; MuMain CNewUIChatLogWindow / CNewUIChatInputBox): 281 px wide, lines of 15 px
   with 2 / 4 px edges. Without the frame each line has its own dark strip (alpha 150); with it the window is dark (the
   transparency button) with a scroll bar on the right and the resize bar (newui_scrollbar_stretch) on top. */
#chat { position: absolute; left: 8px; bottom: calc(100% + 6px + var(--log-y, 0px)); width: 281px; max-width: calc(100% - 16px); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font: 12px/15px Arial, 'Segoe UI', sans-serif; pointer-events: none; z-index: 2; }
#chatLog { position: relative; width: 100%; box-sizing: border-box; padding: 2px 4px; }
#chat.framed #chatLog { height: calc(var(--cl-lines) * 15px + 4px); padding-right: 22px; background: rgba(0, 0, 0, var(--cl-alpha)); pointer-events: auto; }
#chat.framed #chatLog::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px; background: var(--mu-stretch) 0 0 / 100% 10px no-repeat; }
.cl-line { display: none; height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(205, 220, 239); }
.cl-line.vis { display: block; }
.cl-line > span { padding: 0 2px; background: rgba(0, 0, 0, 0.59); }
#chat.framed .cl-line > span { background: rgba(0, 0, 0, 0.39); }
.cl-line [data-who] { font-weight: 400; pointer-events: auto; cursor: pointer; }
#chat .cl-line.k-whisper > span { color: #000; background: rgba(255, 200, 50, 0.59); }
.cl-line.k-system { color: rgb(100, 150, 255); }
.cl-line.k-system.good { color: #a8f0b5; }
.cl-line.k-system.bad { color: #ffb0a5; }
.cl-line.k-system.rare { color: var(--exc); }
.cl-line.k-system.boss b.boss { color: #ffb347; }
.cl-line.k-error { color: rgb(255, 30, 0); }
.cl-line.k-gm { color: rgb(250, 200, 50); font-weight: 700; }
#chat .cl-line.k-gm > span { background: rgba(30, 30, 30, 0.78); }
/* guild chat (TYPE_GUILD_MESSAGE): black on 0 255 150 */
#chat .cl-line.k-guild > span { color: #000; background: rgba(0, 255, 150, 0.78); }
#chat .cl-line.k-party > span { color: #000; background: rgba(0, 200, 255, 0.59); } /* TYPE_PARTY_MESSAGE: 0 200 255 150 */
#chatBox .cb-guild.on { background-image: var(--mu-chat-guild-on); }
#chatBox .cb-party.on { background-image: var(--mu-chat-party-on); }
.cl-line .x { color: #ffd34a; font-weight: 700; margin-left: 4px; }
.cl-scroll { display: none; position: absolute; right: 4px; top: 2px; bottom: 2px; width: 7px; background: var(--mu-scroll-up) 0 0 / 7px 3px no-repeat, var(--mu-scroll-dn) 0 100% / 7px 3px no-repeat, var(--mu-scroll-m) 0 3px / 7px 15px repeat-y; }
#chat.framed .cl-scroll { display: block; }
.cl-scroll i { position: absolute; left: -4px; width: 15px; height: 30px; background: var(--mu-knob) 0 0 / 15px 30px no-repeat; }
/* the input box: its picture holds every button unlit; a button that is on gets its lit picture over it */
#chatBox { position: relative; width: 281px; height: 47px; flex: none; background: var(--mu-chat-back) 0 0 / 281px 47px no-repeat; pointer-events: auto; }
#chatBox button { position: absolute; top: 0; width: 27px; height: 26px; padding: 0; border: 0; background: none 0 0 / 27px 26px no-repeat; cursor: pointer; }
#chatBox .cb-normal.on { background-image: var(--mu-chat-normal-on); }
#chatBox .cb-whisper.on { background-image: var(--mu-chat-whisper-on); }
#chatBox .cb-system.on { background-image: var(--mu-chat-system-on); }
#chatBox .cb-chat.on { background-image: var(--mu-chat-chat-on); }
#chatBox .cb-frame.on { background-image: var(--mu-chat-frame-on); }
#chat.framed #chatBox .cb-size { background: var(--mu-chat-size) 0 0 / 27px 52px no-repeat; }
#chat.framed #chatBox .cb-alpha { background: var(--mu-chat-alpha) 0 0 / 27px 52px no-repeat; }
#chat.framed #chatBox .cb-size:active, #chat.framed #chatBox .cb-alpha:active { background-position: 0 -26px; }
#chatBox input { position: absolute; top: 31px; height: 14px; padding: 0; border: 0; outline: 0; background: transparent; font: 12px/14px Arial, 'Segoe UI', sans-serif; }
#chatWho { left: 5px; width: 56px; color: rgb(255, 200, 200); }
#chatText { left: 72px; width: 203px; color: rgb(255, 255, 230); }
#chatOpen { width: 27px; height: 26px; padding: 0; border: 0; background: var(--mu-chat-back) 0 0 / 281px 47px no-repeat; cursor: pointer; pointer-events: auto; }
#chatOpen:hover { background: var(--mu-chat-normal-on) 0 0 / 27px 26px no-repeat; }
/* what the hero says, over its name (the client's chat bubble) */
.hplate .say { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); width: max-content; max-width: 220px; padding: 2px 6px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; text-align: center; text-shadow: none; }
/* In town: one strip across the top - the town name, then the NPC buttons in a row that scrolls sideways,
   "Trở lại ải" kept at its right end. The boards below start under it (--strip). */
#townBar { position: absolute; left: 0; right: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 0 2px; border: 6px solid transparent; border-image: var(--gfx-panel) 16 fill / 6px stretch; background: none; }
/* the town name on the server plate; "Trở lại ải" is the orange button (.gold) */
#townName { flex: none; height: 32px; line-height: 32px; padding: 0 2px; border-style: solid; border-color: transparent; border-width: 0 22px 0 11px; border-image: var(--gfx-plate) 0 34 0 16 fill / 0 22px 0 11px stretch; font-family: var(--title); font-weight: 700; color: var(--gold); text-shadow: 0 2px 6px #000; font-size: 17px; }
.town-btns { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.town-btns::-webkit-scrollbar { display: none; }
.town-btns .btn { flex: none; min-height: 38px; }
.town-btns #backBtn { position: sticky; right: 0; margin-left: auto; }
#battle { --strip: 0px; }
#battle.in-town { --strip: 50px; }
.stat-add { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; }
.stat-add .btn { min-height: 34px; }
.stat-add input[type=number] { flex: 1 1 90px; min-width: 0; max-width: 150px; height: 34px; padding: 2px 8px; font-size: 13px; background: #0b0805; color: var(--text); border: 1px solid var(--line); border-radius: 4px; }
.ask { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 12px; }
.ask .mbox { width: min(420px, 100%); text-align: center; }
.ask p { margin: 4px 0 14px; }
/* enhancement glow (+7 .. +15), pulsing in the colour of its tier */
.glow-1 { --gc: #ffe08a; } .glow-2 { --gc: #ff9a3c; } .glow-3 { --gc: #4fb4ff; } .glow-4 { --gc: #b766ff; } .glow-5 { --gc: #ff4f9a; }
.glow { animation: gpulse 1.8s ease-in-out infinite; }
.glow-3, .glow-4 { animation-duration: 1.5s; } .glow-5 { animation-duration: 1.1s; }
.glow img { animation: gimg 1.8s ease-in-out infinite; }
.glow-5 img { animation-duration: 1.1s; }
.grid .gi.glow, .eslot.glow { border-color: var(--gc); }
@keyframes gpulse { 0%, 100% { box-shadow: inset 0 0 6px var(--gc), 0 0 3px var(--gc); } 50% { box-shadow: inset 0 0 14px var(--gc), 0 0 11px var(--gc); } }
@keyframes gimg { 0%, 100% { filter: drop-shadow(0 0 2px var(--gc)) brightness(1.05); } 50% { filter: drop-shadow(0 0 7px var(--gc)) brightness(1.35); } }
.glow.timg, .glow.img { box-shadow: none; animation: none; }
.glow.timg img, .glow.img img { animation: gimg 1.8s ease-in-out infinite; }
#tooltip.wide { max-width: 560px; min-width: 300px; }
#tooltip.wider { max-width: 820px; }
.cmp.three { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.cmp-diff .good { color: var(--good); } .cmp-diff .bad { color: var(--bad); }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: center; }
.cmp > div { border: 1px solid #2f2516; border-radius: 4px; padding: 6px; }
.cmp-h { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; }
.cmp-diff { margin-top: 6px; font-weight: 800; }
#tooltip .tl.anc { color: #38e8ff; }
#tooltip .tl.sock, .recipe .sock { color: #c58cff; } /* socket options (game/socket.js) */
#tooltip .tl.harm, .recipe .harm { color: #ffd75e; } /* Jewel of Harmony options (game/harmony.js) */
.sock-h { margin: 10px 0 6px; font-size: 13px; color: var(--gold); }
.gift-row { display: flex; gap: 6px; }
.gift-row input { flex: 1; background: #000; border: 1px solid var(--line2); color: var(--text); padding: 6px 10px; border-radius: 4px; text-transform: uppercase; }
/* quick potion buy: one row per potion, the owned count as a badge on the picture */
.qb { display: grid; gap: 6px; }
.qb-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 2px; }
.qb-row .img { position: relative; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--mu-item-box) center / 100% 100% no-repeat; }
.qb-row .img img { max-width: 40px; max-height: 44px; }
@media (min-width: 600px) and (max-width: 899px) { .cmp.three { font-size: 11.5px; } }
#deathOverlay, #mapLoading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(40, 0, 0, 0.45); text-align: center; }
#deathOverlay b { display: block; font-family: var(--title); font-size: 26px; color: #ff6a50; text-shadow: 0 0 10px #000; }
#deathOverlay small { color: #ddd; }
#mapLoading { background: rgba(0, 0, 0, 0.8); flex-direction: column; gap: 12px; color: var(--gold); font-family: var(--title); }
.spinner { width: 34px; height: 34px; border: 3px solid #3a2c18; border-top-color: var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* floating texts & labels */
.ftext { position: absolute; left: 0; top: 0; font-weight: 800; font-size: 20px; white-space: nowrap; text-shadow: 0 0 3px #000, 1px 1px 0 #000, -1px -1px 0 #000; will-change: transform; font-family: var(--font); }
.ftext.dmg { color: #ffb347; }
.ftext.crit { color: #33c6ff; font-size: 24px; }
.ftext.exc { color: #4cff6e; font-size: 26px; }
.ftext.double { color: #ff5ae1; font-size: 26px; }
.ftext.hurt { color: #ff3b30; font-size: 18px; }
.ftext.heal { color: #6dff8f; font-size: 17px; }
.ftext.sd { color: #ffd34a; font-size: 18px; } /* a hit taken by the SD (Giáp), an SD potion */
.ftext.burn { color: #ff7a2e; font-size: 15px; }
.ftext.miss { color: #ccc; font-size: 15px; }
.ftext.exp { color: #e6d36a; font-size: 13px; }
.ftext.zen { color: #ffd34a; font-size: 13px; }
.ftext.lvlup { color: #fff2a0; font-size: 28px; font-family: var(--title); text-shadow: 0 0 10px #c89400, 0 0 2px #000; }
.mbar { position: absolute; left: 0; top: 0; width: 92px; text-align: center; will-change: transform; }
.mbar .mname { display: block; font-size: 11px; color: #f3e6c9; text-shadow: 0 0 2px #000, 0 1px 2px #000; white-space: nowrap; }
.mbar .mname small { color: var(--muted); }
.mbar i { display: block; height: 5px; background: rgba(0, 0, 0, 0.75); border: 1px solid #3a0d08; }
.mbar b { display: block; height: 100%; background: linear-gradient(#ff5a46, #a3170f); }
.mbar.boss { width: 140px; }
.mbar.boss .mname { color: #ffb347; font-weight: 700; font-size: 12px; }
.mbar.boss i { height: 7px; }
.mbar.target .mname { color: #fff; }
.hplate { position: absolute; left: 0; top: 0; width: 110px; text-align: center; will-change: transform; pointer-events: none; }
/* a line wider than the bars stays centred over them (flex centring overflows both ways) */
.hplate .hname { display: flex; flex-direction: column; align-items: center; color: #fff; text-shadow: 0 0 2px #000, 0 1px 2px #000, 0 0 4px #000; white-space: nowrap; margin-bottom: 1px; line-height: 1.2; }
.hplate .hname b { display: block; font-size: 14px; font-weight: 700; }
.hplate .hname small { display: block; color: #9fe3a3; font-weight: 600; font-size: 10.5px; }
/* the guild line of the client's name box (own character: 200 255 0 on 60 100 0), the mark before it */
.hplate .hguild { display: inline-flex; align-items: center; gap: 3px; margin-bottom: 1px; padding: 0 3px; font-size: 11px; font-weight: 700; color: rgb(200, 255, 0); background: rgba(60, 100, 0, 0.59); }
.hplate .hmark { image-rendering: pixelated; }
.hplate .hname em { font-style: normal; color: #ffcf6a; }
.hplate i { display: block; height: 5px; background: rgba(0, 0, 0, 0.75); border: 1px solid #000; margin-top: 1px; }
.hplate i b { display: block; height: 100%; }
.hplate .hp b { background: linear-gradient(#ff6b55, #b01d12); }
.hplate .mp b { background: linear-gradient(#5aa6ff, #1a4fb3); }
.dlabel { position: absolute; left: 0; top: 0; font-size: 11.5px; white-space: nowrap; text-shadow: 0 0 2px #000, 0 1px 2px #000; background: rgba(0, 0, 0, 0.45); padding: 0 4px; border-radius: 2px; will-change: transform; }
.dlabel.rare { animation: glow 1s ease-in-out infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 10px rgba(76, 255, 110, 0.7); } }
.nlabel { position: absolute; left: 0; top: 0; font-size: 12.5px; color: #8fe3ff; text-shadow: 0 0 3px #000, 0 1px 2px #000; white-space: nowrap; font-weight: 700; }

/* ------------------------------------------------------------ panels */
.sec { margin-bottom: 14px; }
/* a heading stands on the divider of the newer windows (gfx_line: a line between two metal ends) */
.sec h4 { margin: 0 0 8px; font-family: var(--title); color: var(--gold); font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: 0.3px; border-bottom: 9px solid transparent; border-image: var(--gfx-line) 0 16 34 16 / 0 8px 9px 8px stretch; padding-bottom: 2px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sec h4 small { font-family: var(--font); color: var(--muted); font-size: 12px; font-weight: 400; }
.log-line { padding: 1px 0; border-bottom: 1px dashed #241b11; font-size: 12px; line-height: 1.3; color: #d9cfbd; }
.log-line .x { color: #ffd34a; font-weight: 700; margin-left: 4px; }
.log-line time { color: #6c604c; font-size: 10px; margin-right: 5px; }
.log-line.good { color: #a8f0b5; }
.log-line.bad { color: #ffb0a5; }
.log-line.sys { color: #c9b98f; }
.log-line.boss b.boss { color: #ffb347; }
.log-line.rare { color: var(--exc); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13px; align-items: baseline; line-height: 1.35; }
.kv span { color: var(--muted); }
.kv b { color: var(--text); font-weight: 600; text-align: right; }
.stat-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 5px 8px; padding: 7px 0 8px; border-bottom: 1px solid #221a10; }
.stat-row .stat-add { grid-column: 1 / -1; justify-content: flex-end; align-items: center; gap: 6px; }
.stat-row span { color: var(--muted); }
.stat-row b { text-align: right; }
.points { color: var(--good); }
/* a setting row: the whole row is tappable */
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #221a10; font-size: 13px; cursor: pointer; }
/* the check box of the client's option window (newui_option_check: ticked on top, empty below), 15 px drawn at 21 */
.toggle input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 21px; height: 21px; margin: 0; border: 0; cursor: pointer; background: var(--mu-check) 0 100% / 100% 200% no-repeat; }
.toggle input[type=checkbox]:checked { background-position: 0 0; }
.toggle input[type=checkbox]:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.toggle select { background: #000; color: var(--text); border: 1px solid var(--line2); padding: 3px; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* inventory grid */
.inv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.inv-head > span:first-child { position: relative; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 2px 0 24px; border-style: solid; border-color: transparent; border-width: 0 6px; border-image: var(--gfx-money) 0 8 fill / 0 6px stretch; }
.inv-head > span:first-child::before { content: ''; position: absolute; left: -2px; top: 1px; width: 24px; height: 23px; background: var(--gfx-inven) -627px -358px / 1024px 512px no-repeat; }
.inv-head > span:first-child .coin { display: none; }
/* item grids (bag, storage) framed with the table pieces of the client's inventory (newui_item_table01..03) */
.grid { position: relative; display: grid; background: #070504; border: 1px solid transparent; margin: 6px auto; }
.grid::after { content: ''; position: absolute; inset: -7px; z-index: 1; pointer-events: none;
  background: var(--mu-t-tl) 0 0 / 14px 14px no-repeat, var(--mu-t-tr) 100% 0 / 14px 14px no-repeat, var(--mu-t-bl) 0 100% / 14px 14px no-repeat, var(--mu-t-br) 100% 100% / 14px 14px no-repeat,
    var(--mu-t-up) 14px 0 / calc(100% - 28px) 14px no-repeat, var(--mu-t-dw) 14px 100% / calc(100% - 28px) 14px no-repeat,
    var(--mu-t-l) 0 14px / 14px calc(100% - 28px) no-repeat, var(--mu-t-r) 100% 14px / 14px calc(100% - 28px) no-repeat; }
.grid .cell { border: 1px solid #1d160d; }
.grid .gi { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 2px; cursor: pointer; }
.grid .gi.r1 { background: rgba(60, 100, 200, 0.12); }
.grid .gi.r2 { background: rgba(200, 160, 40, 0.14); }
.grid .gi.r3 { background: rgba(60, 220, 100, 0.14); border-color: rgba(76, 255, 110, 0.35); }
.grid .gi.r4 { background: rgba(160, 110, 255, 0.14); }
.grid .gi:hover, .grid .gi.sel { border-color: var(--gold); }
.grid .gi img { max-width: 100%; max-height: 100%; pointer-events: none; }
.grid .gi .q { position: absolute; bottom: 0; right: 2px; font-size: 11px; color: #fff; text-shadow: 0 0 2px #000; }
.grid .gi .lv { position: absolute; top: 0; left: 2px; font-size: 10px; color: #ffd34a; text-shadow: 0 0 2px #000; }
.grid .gi .no { position: absolute; inset: 0; background: rgba(160, 0, 0, 0.18); }
/* quick sell: the lock of an item, the marks of pick to sell, the bar and the preview (ui.js openQuickSell / sellPick) */
.grid .gi .lk { position: absolute; bottom: 0; left: 1px; font-size: 10px; line-height: 1; filter: drop-shadow(0 0 2px #000); }
.grid .gi.mark { border-color: #ff5a4a; box-shadow: inset 0 0 0 2px rgba(255, 90, 74, 0.7); }
.grid .gi.mark::after { content: '✔'; position: absolute; top: 0; right: 2px; font-size: 11px; color: #ff6a55; text-shadow: 0 0 2px #000; }
.pick-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; margin: 6px 0; padding: 6px 8px; border: 1px solid #6a2a22; background: rgba(90, 20, 14, 0.35); border-radius: 4px; font-size: 13px; }
.qs-sum { text-align: center; margin: 8px 0 6px; }
.qs-list { position: static; display: flex; flex-wrap: wrap; gap: 3px; max-height: 190px; overflow-y: auto; }
.qs-list .gi { position: relative; width: 40px; height: 40px; cursor: pointer; }
.qs-list .gi img { width: 100%; height: 100%; object-fit: contain; }

/* tooltip */
#tooltip { position: fixed; z-index: 60; min-width: 220px; max-width: 290px; background: rgba(8, 6, 4, 0.97); border: 1px solid var(--line2); border-radius: 6px; padding: 9px 11px; font-size: 12.5px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7); text-align: center; }
#tooltip .timg { height: 76px; display: flex; align-items: center; justify-content: center; margin: 0 auto 4px; width: 100%; background: radial-gradient(ellipse at center, rgba(255, 200, 110, 0.12), transparent 70%); }
#tooltip .timg img { max-height: 76px; max-width: 96px; object-fit: contain; filter: drop-shadow(0 2px 4px #000); }
#tooltip .timg.live { height: 96px; } /* armor, jewelry: the live 3D view, smaller than weapons and wings */
#tooltip .timg.live img { max-height: 86px; max-width: 96px; }
#tooltip .tname { font-weight: 800; font-size: 14px; margin-bottom: 4px; }
#tooltip .tl { color: #cfc6b5; }
#tooltip .tl.blue { color: var(--blue); }
#tooltip .tl.exc { color: var(--exc); }
#tooltip .tl.red { color: var(--bad); }
#tooltip .tl.gold { color: #ffd34a; }
#tooltip .tl.muted { color: var(--muted); }
#tooltip .tact { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 8px; }

/* skills list */
.skill { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; padding: 2px; margin-bottom: 6px; }
.skill.locked { opacity: 0.5; }
.skill .ico { width: 40px; height: 56px; transform: scale(0.75); transform-origin: left center; }
.skill b { color: var(--gold); }
.skill small { display: block; color: var(--muted); font-size: 12px; }
.skill .meta { font-size: 11.5px; color: #9fb7e6; }

/* maps: folding cards for the open maps (40 px stage buttons), one line per map not open yet */
.maps { display: grid; gap: 8px; }
.stage-dots { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 5px; padding: 0 10px 10px; }
.stage-dots button { height: 40px; border-radius: 4px; border: 1px solid var(--line); background: #1a130c; color: var(--muted); font-size: 13px; padding: 0; }
.stage-dots button.done { color: var(--good); border-color: #2f5a35; }
.stage-dots button.cur { color: #000; background: var(--gold); border-color: var(--gold); font-weight: 700; }
.stage-dots button.boss::after { content: '★'; font-size: 8px; vertical-align: super; color: #ffb347; }
.stage-dots button:disabled { opacity: 0.35; }

/* modal & toast */
#fatal { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; padding: 12px; }
#modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 12px; }
.mbox { position: relative; width: min(560px, 100%); max-height: 88vh; overflow: auto; background: linear-gradient(#1c150e, #0e0b07); border: 1px solid var(--gold2); border-radius: 10px; padding: 14px 14px 16px; box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 220, 150, 0.08); }
.mbox h3 { margin: 0 0 10px; font-family: var(--title); font-size: 20px; color: var(--gold); font-weight: 700; text-align: center; }
#toast { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); z-index: 70; pointer-events: none; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.toast { background: rgba(10, 8, 6, 0.95); border: 1px solid var(--gold2); color: var(--gold); padding: 7px 14px; border-radius: 18px; font-size: 13px; animation: toast 3s forwards; box-shadow: 0 4px 20px #000; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-8px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* an item row of the shop or the Chaos gear list (layout: .shop-row, "NPC windows" below) */
.shop-item { cursor: pointer; }
.shop-item:hover { outline: 1px solid var(--gold2); outline-offset: -3px; }
.shop-item.no { opacity: 0.5; }
.chaos { display: grid; gap: 10px; }
.chaos .pick { display: flex; gap: 10px; align-items: center; padding: 4px; min-height: 80px; }
.chaos .pick .img { width: 64px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 4px; flex: none; background: var(--mu-item-box) center / 100% 100% no-repeat; }
.chaos .pick img { max-width: 60px; max-height: 70px; }
.chaos .opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.result { text-align: center; font-weight: 700; padding: 6px; border-radius: 4px; }
.result.ok { color: var(--good); background: rgba(40, 120, 60, 0.15); }
.result.fail { color: var(--bad); background: rgba(150, 40, 30, 0.15); }
.reward-list { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 8px 0; }
.reward-list div { border: 1px solid var(--line); border-radius: 4px; padding: 4px 2px; text-align: center; font-size: 11px; background: #0c0906; }
.reward-list div.got { border-color: var(--good); color: var(--good); }
.reward-list div.today { border-color: var(--gold); box-shadow: 0 0 8px rgba(227, 194, 122, 0.4); }
.muted { color: var(--muted); }
.center { text-align: center; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.gold-t { color: #ffd34a; }


/* ============================================================ MU Online skin
   The window frame, zen bar, tab buttons and close buttons are the interface textures of the
   MU client (assets/tex/ui, loaded into the --mu-* variables by main.js applySkin). */
.mu-win { background: var(--mu-bg) 0 0 / 256px auto, #14110e; }
.mu-top {
  position: relative; flex: none; height: 64px; display: flex; align-items: center; justify-content: center; padding-bottom: 38px; /* the title sits in the black bar of the frame art (rows 7-25 of 64) */
  border-style: solid; border-width: 0 62px; border-image-source: var(--mu-top); border-image-slice: 0 62 0 62 fill;
  border-image-width: 0 62px 0 62px; border-image-repeat: stretch;
}
.mu-top h3, .panel-head.mu-top > span { margin: 0; font-family: var(--title); font-size: 16px; line-height: 1; font-weight: 700; color: var(--gold); text-shadow: 0 1px 2px #000, 0 0 6px #000; letter-spacing: 0.5px; white-space: nowrap; }
/* the ✕ is drawn in the frame art (item_back01); the button is a 40 px touch area centred on it */
.mu-x { position: absolute; right: -66px; top: -6px; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.mu-x:hover { background: radial-gradient(circle, rgba(255, 170, 40, 0.45) 0 11px, transparent 13px); }
.mu-bot {
  flex: none; height: 45px; margin-top: -3px; pointer-events: none;
  border-style: solid; border-width: 0 62px; border-image-source: var(--mu-bot); border-image-slice: 0 62 0 62 fill;
  border-image-width: 0 62px 0 62px; border-image-repeat: stretch;
}
.mu-body, #panel .tab {
  background: var(--mu-sideL) left top / 21px 320px repeat-y, var(--mu-sideR) right top / 21px 320px repeat-y;
  padding: 8px 25px 6px;
}
#panel .tab { padding-bottom: 12px; }
/* in-game windows (#panel, #modal, the confirm box) are windows of the newer interface: the frame of gfx_panel round the
   stone, its title at its own size (gfx_title, 327 x 73: the name in the red bar from y 38 to 65) and the red close button
   on the right end of that bar, where NpcDialogue.ozg has it. The login / create windows keep the 1.15.08 frame. */
#panel.mu-win, .mbox.mu-win { border: 8px solid transparent; border-top: 0; border-image: var(--gfx-panel) 0 16 16 / 0 8px 8px stretch; background-clip: padding-box; }
#panel .mu-top, .mbox .mu-top { height: 73px; padding: 38px 0 8px; border: 0; background: var(--gfx-title) center top / 327px 73px no-repeat; }
#panel .mu-bot, .mbox .mu-bot { display: none; }
#panel.mu-win .tab, .mbox.mu-win .mu-body { background: none; padding-left: 10px; padding-right: 10px; }
#panel .mu-x, .mbox .mu-x { left: calc(50% + 98px); right: auto; top: 31px; }
#panel .mu-x::before, .mbox .mu-x::before { content: ''; position: absolute; left: 10px; top: 10px; width: 19px; height: 19px; background: var(--gfx-close) 0 0 / 100% 100% no-repeat; }
#panel .mu-x:hover, .mbox .mu-x:hover { background: none; filter: brightness(1.35); }

/* windows (#modal, the confirm box): the frame above in a column, the body scrolls (the border is the gfx_panel frame above:
   a "border: 0" here took it away from every window, user report 2026-10-24) */
.mbox.mu-win { padding: 0; border-radius: 0; display: flex; flex-direction: column; overflow: visible; width: min(580px, 100%); max-height: 90vh; box-shadow: 0 0 40px rgba(0, 0, 0, 0.85); }
/* gfx_panel has no top edge (in the client the title, 327 px, is as wide as the panel): its bottom edge, turned over, closes
   the top of the wider windows, under the title */
.mbox.mu-win::before { content: ''; position: absolute; left: -8px; right: -8px; top: 0; height: 0; border-style: solid; border-color: transparent; border-width: 0 8px 8px; border-image: var(--gfx-panel) 0 16 16 / 0 8px 8px stretch; transform: scaleY(-1); pointer-events: none; }
.mbox .mu-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 26px 4px; }
.mbox .mu-top h3 { text-align: center; }
.ask .mbox.mu-win { width: min(440px, 100%); }
.ask .mu-body p { margin: 8px 0 14px; }

/* ---- equipment: the slots of the MU inventory window, drawn with its own slot textures ---- */
.mudoll { --s: 1.35; position: relative; width: calc(246px * var(--s)); height: calc(212px * var(--s)); margin: 30px auto 28px; }
.mudoll .eslot {
  position: absolute; border: 0; border-radius: 0; display: block; padding: 0;
  background: var(--sil) 0 0 / 100% 100% no-repeat; cursor: pointer;
}
.mudoll .es-pet { --sil: var(--mu-s-pet); } .mudoll .es-helm { --sil: var(--mu-s-helm); } .mudoll .es-wings { --sil: var(--mu-s-wings); }
.mudoll .es-weapon { --sil: var(--mu-s-weapon); } .mudoll .es-shield { --sil: var(--mu-s-shield); } .mudoll .es-armor { --sil: var(--mu-s-armor); }
.mudoll .es-gloves { --sil: var(--mu-s-gloves); } .mudoll .es-pants { --sil: var(--mu-s-pants); } .mudoll .es-boots { --sil: var(--mu-s-boots); }
.mudoll .es-ring1, .mudoll .es-ring2 { --sil: var(--mu-s-ring); } .mudoll .es-earringL, .mudoll .es-earringR { --sil: var(--mu-s-earring); } .mudoll .es-pendant { --sil: var(--mu-s-pendant); }
/* a worn item sits on the slot like in MU Online: the frame of the slot stays, the silhouette is dimmed behind a see-through dark plate */
.mudoll .eslot.has { background: linear-gradient(rgba(13, 11, 9, 0.62), rgba(13, 11, 9, 0.62)) 4px 4px / calc(100% - 8px) calc(100% - 8px) no-repeat, var(--sil) 0 0 / 100% 100% no-repeat; }
/* item pictures: weapons / armor / wings larger, the pet smaller, all with a little shadow so they read clearly */
.mudoll .eslot img { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; max-width: none; max-height: none; object-fit: contain; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)); }
.mudoll .eslot:hover { filter: brightness(1.35); }
/* the slot keeps its own background under a worn item: no rarity tint or glow box on top of it (the picture itself still shines); unmet requirements dim the picture */
.mudoll .eslot.glow { border: 0; box-shadow: none; animation: none; }
.mudoll .eslot.off img { filter: grayscale(0.8) brightness(0.7) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)); }
.mudoll .eslot .elvl { position: absolute; top: 3px; right: 5px; font-size: 11px; font-weight: 700; color: #ffd34a; text-shadow: 0 0 3px #000, 0 1px 1px #000; }
/* the weapons lead: big slots, and pictures far larger than the slot so they spill past its frame */
.mudoll .es-weapon img, .mudoll .es-shield.wpn img { width: 250%; height: auto; aspect-ratio: 1; left: -75%; top: 50%; transform: translateY(-50%); z-index: 3; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.95)); }
/* square weapons (the Lemuria Mage's orbs) would grow both ways at that size: they fit in the slot, as in MU's equipment window */
.mudoll .es-weapon.sq img, .mudoll .es-shield.wpn.sq img { width: 100%; left: 0; }
.mudoll .es-armor img { width: 135%; height: auto; aspect-ratio: 1; left: -17.5%; top: 50%; transform: translateY(-50%); }
/* wings: a wide slot (nine-slice frame, so the bevel is not stretched) with the whole picture inside it */
.mudoll .es-wings { box-sizing: border-box; border: 6px solid transparent; border-image: var(--sil) 6 fill / 6px stretch; }
.mudoll .es-wings.has { background: rgba(13, 11, 9, 0.62); background-clip: padding-box; border-image: var(--sil) 6 / 6px stretch; }
.mudoll .es-wings img { left: 2%; top: 4%; width: 96%; height: 92%; object-fit: contain; }
.mudoll .es-pet img { left: 17%; top: 17%; width: 66%; height: 66%; }
.mudoll .es-helm img, .mudoll .es-gloves img, .mudoll .es-pants img, .mudoll .es-boots img { left: 0; top: 0; width: 100%; height: 100%; }
.mudoll .es-ring1, .mudoll .es-ring2, .mudoll .es-pendant, .mudoll .es-earringL, .mudoll .es-earringR { z-index: 2; }
.mudoll .es-shield:not(.wpn) img { width: 130%; height: auto; aspect-ratio: 1; left: -15%; top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------------ phones: the rules above, smaller */
@media (max-width: 599px) {
  :root { --top-h: 66px; --tabs-h: 44px; }
  .avatar { width: 46px; height: 46px; }
  .money { font-size: 11px; }
  .zenbar { width: 132px; height: 22px; padding-left: 30px; }
  .zenbar b { font-size: 11.5px; }
  .jewels img { width: 19px; height: 19px; }
  .jewels span { font-size: 11.5px; }
  #tabs { padding: 3px 4px; gap: 2px; }
  #tabs button { font-size: 11px; }
  .logo span { font-size: 70px; }
  .mu-top h3, .panel-head.mu-top > span { font-size: 15px; }
  .mu-body, #panel .tab { padding-left: 22px; padding-right: 22px; }
  .cmp, .cmp.three { grid-template-columns: 1fr; }
}
@media (max-width: 429px) {
  #top { gap: 6px; padding: 0 2px; }
  .topmid { border-width: 0 14px 0 8px; border-image-width: 0 14px 0 8px; }
  .topmid .hero-title { display: none; }
  .icon-btn { width: 40px; height: 36px; font-size: 18px; }
  .top-power span { display: none; }
  #autoControls .chip { padding: 4px 8px; font-size: 12px; }
  .mudoll { --s: 1.2; }
}
@media (max-width: 359px) { .mudoll { --s: 1.05; } }

/* ============================================================ character select / create (MU login scene) */
.mu-stage { display: block; background: #000; overflow: hidden; }
.mu-stage .bg-art { opacity: 0.85; filter: brightness(0.7) saturate(1.05); }
.mu-stage .bg-art::after { background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(0, 0, 0, 0.7) 85%); }
.mu-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.mu-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.85)); }
.stage-title { position: absolute; top: 10px; left: 0; right: 0; z-index: 3; pointer-events: none; text-align: center; }
.stage-title .logo.small span { font-size: 44px; }
#selPlates { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.plate { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; min-width: 132px; padding: 4px 10px 5px; background: rgba(8, 6, 5, 0.74); border: 1px solid #5b4b30; text-align: center; line-height: 1.28; box-shadow: 0 0 8px #000; white-space: nowrap; will-change: transform; }
.plate b { display: block; color: #fff; font-size: 13.5px; }
.plate small { display: block; color: #e3c27a; font-size: 12px; }
.plate i { display: block; font-style: normal; color: #9fb4a0; font-size: 11px; }
.plate.on { border-color: #ffd27a; background: rgba(42, 29, 10, 0.85); box-shadow: 0 0 14px rgba(255, 200, 100, 0.55); }
.plate.empty { opacity: 0.8; }
.plate.empty b { color: #b9ad94; font-weight: 600; }
/* two rows on a narrow screen: small plates that fit one slot (name + class / level) */
#selPlates.compact .plate { min-width: 0; max-width: 31vw; padding: 2px 6px 3px; overflow: hidden; text-overflow: ellipsis; }
#selPlates.compact .plate b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
#selPlates.compact .plate small { font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
#selPlates.compact .plate i, #selPlates.compact .plate .cls { display: none; }
.stage-bar { position: absolute; bottom: 18px; display: flex; gap: 10px; z-index: 3; }
.stage-bar.left { left: 18px; } .stage-bar.right { right: 18px; }
.mu-btn { width: 118px; height: 36px; padding: 0 4px; border: 0; background: var(--mu-btn) 0 0 / 100% 300% no-repeat; color: #e3c27a; font-weight: 700; font-size: 13.5px; text-shadow: 0 1px 2px #000; }
.mu-btn:hover:not(:disabled) { background-position: 0 50%; color: #fff0c8; }
.mu-btn:active:not(:disabled), .mu-btn.on { background-position: 0 100%; color: #ffd98a; }
.mu-btn:disabled { opacity: 0.45; cursor: default; }
.mu-btn.go { width: 160px; color: #ffd98a; font-size: 14.5px; }

.cr-win { position: absolute; display: flex; flex-direction: column; z-index: 3; max-height: calc(100% - 24px); box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); }
.cr-left { left: 26px; top: 50%; transform: translateY(-50%); width: 236px; }
.cr-right { right: 26px; top: 50%; transform: translateY(-50%); width: 310px; }
.cr-win .mu-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 28px 4px; }
.cr-win .class-cards { display: grid; grid-template-columns: 1fr; gap: 6px; }
.cr-win .class-btn { width: 100%; height: 38px; font-size: 14px; }
.cr-en { text-align: center; color: var(--gold); font-size: 12px; letter-spacing: 1px; margin-bottom: 6px; }
.cr-en:empty { display: none; }
.cr-desc { margin: 0 0 8px; color: #cfc6b3; font-size: 13px; line-height: 1.45; }
.cr-stats { margin-bottom: 8px; }
.cr-label { display: block; color: var(--muted); font-size: 12px; margin: 6px 0 4px; }
.cr-win input { width: 100%; background: #000; border: 1px solid var(--line2); color: var(--text); padding: 8px 10px; border-radius: 3px; font-size: 14px; }
.cr-btns { display: flex; gap: 8px; justify-content: center; margin: 10px 0 2px; flex-wrap: wrap; }
.cr-btns .mu-btn { width: 130px; }

@media (max-width: 899px) {
  .stage-title .logo.small span { font-size: 34px; }
  .stage-title .logo small { display: none; }
  .stage-bar { bottom: 10px; }
  .stage-bar .mu-btn { width: 96px; font-size: 12.5px; }
  .mu-btn.go { width: 120px; }
  .plate { min-width: 96px; padding: 3px 6px 4px; }
  .plate b { font-size: 12px; } .plate small, .plate i { font-size: 10.5px; }
  .cr-left { left: 8px; right: 8px; top: 50px; transform: none; width: auto; }
  .cr-left .mu-top, .cr-right .mu-top { height: 44px; padding-bottom: 20px; border-width: 0 40px; border-image-slice: 0 62 0 62 fill; border-image-width: 0 40px 0 40px; }
  .cr-left .mu-bot, .cr-right .mu-bot { height: 26px; border-width: 0 40px; border-image-width: 0 40px 0 40px; }
  .cr-win .mu-body { padding: 4px 16px 0; }
  .cr-win .class-cards { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .cr-win .class-btn { height: 32px; font-size: 11.5px; padding: 0; }
  .cr-right { left: 8px; right: 8px; top: auto; bottom: 8px; transform: none; width: auto; max-height: 52%; }
  .cr-desc { font-size: 12px; margin-bottom: 4px; } .cr-stats { display: none; }
}

.mu-stage #preview { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }

/* the coins: Ruud and Lucky Coins, the client's pictures (ui.js sets --cur-ruud / --cur-lucky), a gold disc until they load */
.cur { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; background: var(--cur-gold) center / contain no-repeat; }
.cur.ruud { --cur-gold: var(--cur-ruud, radial-gradient(circle at 35% 30%, #fff3b0, #e0a83a 55%, #8a5a12)); border-radius: 50%; }
.cur.lucky { --cur-gold: var(--cur-lucky, radial-gradient(circle at 35% 30%, #fff, #e8e0a0 55%, #8a7a32)); border-radius: 50%; }
/* (older name) */
.gcoin { display: inline-block; width: 17px; height: 17px; border-radius: 50%; vertical-align: -3px; background: radial-gradient(circle at 35% 30%, #fff3b0, #e0a83a 55%, #8a5a12); border: 1px solid #5a3a08; box-shadow: 0 0 5px rgba(255, 200, 80, 0.6); position: relative; }
.gcoin::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgba(90, 58, 8, 0.75); }
.dg-btns { display: flex; flex-direction: column; gap: 4px; }

.donate { text-align: center; }
.donate img { display: block; margin: 8px auto 0; width: min(100%, 300px); height: auto; border-radius: 6px; background: #fff; }

/* ---- account sign in ---- */
.login-win { left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); width: 340px; max-width: calc(100% - 16px); }
.login-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 6px; }
.login-tabs .mu-btn { width: 120px; }
.login-remember { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; font-size: 12.5px; color: var(--muted); }
.login-remember input { width: auto; }
.acc-msg { min-height: 18px; margin: 6px 0 0; text-align: center; font-size: 12.5px; color: #ff8a7a; line-height: 1.4; }
.acc-msg.good { color: #9fd49a; }
.acc-note { margin: 8px 0 0; text-align: center; font-size: 11px; color: var(--muted); line-height: 1.4; }
.acc-links { margin: 6px 0 0; text-align: center; font-size: 12.5px; }
.acc-links a { color: var(--gold); }
.import-pick { justify-content: flex-start; align-items: flex-start; gap: 8px; margin: 6px 0; font-size: 12.5px; text-align: left; }
.import-pick input { width: auto; margin-top: 2px; }
/* the guild window (ui/guild.js) */
.g-mark { image-rendering: pixelated; flex: none; vertical-align: middle; }
#guildHud .qh-title { display: flex; align-items: center; gap: 5px; }
.g-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.g-head .g-mark { border: 1px solid var(--gold2); background: #000; }
.g-head b.g-name { display: block; font-family: var(--title); color: rgb(200, 255, 100); font-size: 19px; }
.g-head small { color: var(--muted); }
#mBody .kv + .sec { margin-top: 12px; }
.g-notice { margin: 0 0 6px; padding: 6px 8px; min-height: 34px; background: rgba(0, 0, 0, 0.45); border: 1px solid #3a2e1c; color: rgb(255, 185, 1); white-space: pre-wrap; }
.g-form { display: flex; gap: 6px; }
.g-form input { flex: 1; min-width: 0; }
.g-small { font-size: 12px; margin: 4px 0 8px; }
.g-list { display: flex; flex-direction: column; gap: 2px; }
.g-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; background: rgba(0, 0, 0, 0.35); border-bottom: 1px solid #241b11; }
.g-row.mine { background: rgba(60, 100, 0, 0.3); }
.g-on { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #555; }
.g-on.on { background: #6fe36b; box-shadow: 0 0 4px #6fe36b; }
.g-place { flex: none; width: 22px; text-align: center; color: var(--gold); }
.g-who { flex: 1; min-width: 0; }
.g-who b { display: block; color: var(--text); }
.g-who small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.g-act { flex: none; display: flex; gap: 4px; align-items: center; }
.g-act select { max-width: 120px; }
.g-act .rank { font-style: normal; color: var(--muted); font-size: 12px; }
.g-act .rank.r128 { color: #ffcf6a; }
.g-act .rank.r64 { color: #9fd0ff; }
.g-act .rank.r32 { color: #ffa36b; }
.g-sort button { font-size: 12px; }
/* the Buff bang tab: the fund, a row a buff kind with its ten levels as pips (bought, open, above the guild level) */
.g-fund { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 6px 8px; background: rgba(0, 0, 0, 0.45); border: 1px solid #3a2e1c; }
.g-fund span { color: var(--muted); }
.g-fund > b { color: rgb(200, 255, 100); font-size: 17px; }
.g-fund small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.g-buff .g-who > b em { font-style: normal; font-size: 12px; color: var(--gold); margin-left: 4px; }
.g-buff .g-who small b { display: inline; font-weight: normal; }
.g-pips { display: flex; gap: 2px; margin: 3px 0 2px; }
.g-pips i { width: 16px; height: 6px; background: #5a4a33; border: 1px solid #000; box-shadow: inset 0 1px 0 #7a6646; }
.g-pips i.on { background: linear-gradient(#ffe38a, #c8901e); box-shadow: 0 0 3px rgba(255, 200, 80, 0.6); }
.g-pips i.lock { background: #120e0a; border-color: #3a2e1c; box-shadow: none; }
/* the party list (ui/party.js, MuMain CNewUIPartyListWindow) under the minimap, at 1.4 times the client's size: a 77 x 23 box a
   member 24 px apart, the dark back inside the frame (0xE6000000), the name at 4,4 (the leader 255 148 22, the flag at 53,3), the HP
   bar at 4,16 (69 x 3, as long as the HP), the X at 63,3 (11 x 11, its lit half on hover); a member not playing: grey on red */
#partyList { display: flex; flex-direction: column; gap: 1px; pointer-events: auto; zoom: 1.4; }
#partyList .pl-row { position: relative; width: 77px; height: 23px; cursor: pointer;
  background: var(--mu-party-back) no-repeat 0 0 / 77px 23px, linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)) no-repeat 2px 2px / 74px 17px; }
#partyList .pl-row.off { background: var(--mu-party-back) no-repeat 0 0 / 77px 23px, linear-gradient(rgba(77, 0, 0, 0.5), rgba(77, 0, 0, 0.5)) no-repeat 2px 2px / 74px 17px, linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)) no-repeat 2px 2px / 74px 17px; }
#partyList .pl-name { position: absolute; left: 4px; top: 3px; max-width: 48px; overflow: hidden; white-space: nowrap; font: 600 10px/12px var(--font); color: #fff; }
#partyList .lead .pl-name { color: rgb(255, 148, 22); }
#partyList .off .pl-name { color: rgb(128, 128, 128); }
#partyList .pl-flag { position: absolute; left: 53px; top: 3px; width: 9px; height: 10px; background: var(--mu-party-flag) no-repeat 0 0 / 9px 10px; }
#partyList .pl-x { position: absolute; left: 63px; top: 3px; width: 11px; height: 11px; min-height: 0; padding: 0; border: 0; background: var(--mu-party-x) no-repeat 0 0 / 11px 22px; cursor: pointer; }
#partyList .pl-x:hover { background-position: 0 -11px; }
#partyList .pl-hp { position: absolute; left: 4px; top: 16px; width: 69px; height: 3px; }
#partyList .pl-hp b { display: block; height: 3px; background: var(--mu-party-hp) no-repeat 0 0 / 100% 100%; }
#partyHud .qh-title small { color: var(--muted); font-size: 11px; }
/* PvP (ui/pvp.js): the chip, the challenge form, the other fighter's plate with its HP and SD bars (game/pvpfoe.js) */
#pvpHud .qh-title small { color: var(--muted); font-size: 11px; }
.pv-form { flex-wrap: wrap; }
.pv-form select, .pv-form input[type="number"] { width: 110px; }
/* another player standing in the town (game/townfolk.js): its guild, name and level, no bars */
.hplate.folk .hname em { font-style: normal; color: rgb(200, 255, 0); margin-right: 3px; font-size: 11px; }
.hplate.folk .hname small { color: var(--muted); }
.hplate.foe .hname b { color: #ff7a6a; }
.hplate.foe .hname small { color: #ffb0a0; }
.hplate.foe .sd { display: block; height: 3px; margin-top: 1px; background: rgba(0, 0, 0, 0.6); }
.hplate.foe .sd b { display: block; height: 100%; background: #e6c34a; }
/* a player of the hero's party in a boss dungeon of the evening (game/raidrun.js): the party's colours, HP and SD bars */
.hplate.ally .hname small { color: #8fd8ff; }
.hplate.ally .sd { display: block; height: 3px; margin-top: 1px; background: rgba(0, 0, 0, 0.6); }
.hplate.ally .sd b { display: block; height: 100%; background: #e6c34a; }
/* the WCoin chip (ui/cashshop.js): the WCoin of the account, the VIP mark, the letters waiting */
#wcoinHud .qh-title { display: flex; align-items: center; gap: 5px; }
#wcoinHud .wc-n { color: #ffd76a; }
.vip-tag { font-style: normal; padding: 0 5px; border-radius: 3px; background: linear-gradient(#ffe08a, #c48a1c); color: #2a1a04; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-shadow: none; }
/* a teammate on the screen (game/partymates.js): its plate with one HP bar, its damage numbers small */
.hplate.mate .hname small { color: #8fd8ff; }
.ftext.mate { font-size: 13px !important; opacity: 0.75; }
/* the mark editor (MuMain CNewUIGuildMakeWindow): 8 x 8 cells, the 16 colours in two rows of eight */
.g-editor { display: flex; gap: 12px; margin: 8px 0 4px; flex-wrap: wrap; }
.g-grid { display: grid; grid-template-columns: repeat(8, 22px); grid-auto-rows: 22px; gap: 1px; padding: 1px; background: #3a2e1c; touch-action: none; user-select: none; }
.g-grid i { background: #111; cursor: crosshair; }
/* the cell under the mouse shows the colour it would take (--pen: the colour picked) */
@media (hover: hover) { .g-grid i:hover { box-shadow: inset 0 0 0 2px var(--pen, #888), inset 0 0 0 3px #000; } }
.g-side { display: flex; flex-direction: column; gap: 8px; }
.g-pal { display: grid; grid-template-columns: repeat(8, 20px); grid-auto-rows: 20px; gap: 3px; }
.g-pal i { border: 1px solid #000; cursor: pointer; }
.g-pal i.clear, .g-pen i.clear { background: #000 linear-gradient(45deg, transparent 45%, #888 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #888 45% 55%, transparent 55%); }
.g-pen { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.g-pen i { width: 18px; height: 18px; border: 1px solid #000; outline: 1px solid #ffd76a; }
.g-pen b { color: #e8dcc0; font-weight: normal; }
.g-pal i.on { outline: 2px solid #ffd76a; outline-offset: 1px; }
.g-prev { display: flex; align-items: flex-end; gap: 8px; }
.g-prev .g-mark { background: #000; border: 1px solid #3a2e1c; }
@media (max-width: 899px) { .login-win { left: 50%; right: auto; top: 50%; bottom: auto; width: calc(100% - 16px); transform: translate(-50%, -50%); } }

/* Master skill tree */
.subtabs { display: flex; gap: 6px; margin-bottom: 10px; }
/* sub tabs are the tab of the client's guild window (newui_guild_tab04: normal on top, picked below) */
.subtabs button { flex: 1; padding: 6px 8px; font: inherit; font-size: 13px; color: #b8a888; text-shadow: 0 1px 1px #000; background: var(--mu-tab) 0 0 / 100% 200% no-repeat, #100c08; border: 0; border-radius: 0; cursor: pointer; }
.subtabs button.on { color: #ffd98a; background-position: 0 100%; }
.subtabs .pts { font-style: normal; background: var(--bad); color: #fff; border-radius: 8px; padding: 0 5px; font-size: 11px; margin-left: 3px; }
/* the tabs of the Chaos Goblin window (ui.js openChaos): five, they wrap on a phone */
.chaos-tabs { flex-wrap: wrap; margin-bottom: 0; }
.chaos-tabs button { flex: 1 1 18%; min-width: 74px; padding: 6px 4px; white-space: nowrap; }
.root-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.root-tabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 4px; background-size: 64px 64px; text-shadow: 0 1px 2px #000; font: inherit; font-size: 13px; color: var(--muted); background: #100c08; border: 1px solid var(--line); border-bottom: 3px solid var(--rc); border-radius: 5px; cursor: pointer; }
.root-tabs button span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.root-tabs button b { font-weight: 600; font-size: 12.5px; }
.root-tabs button small { font-size: 10.5px; color: #cdbf9f; }
.root-tabs .rico { display: block; flex: none; transform-origin: left center; }
.root-tabs button.on { color: #fff3d0; border-color: var(--rc); background: #1d1710; }
.mskill { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 6px; border: 1px solid var(--line); border-left: 3px solid var(--rc); border-radius: 6px; margin-bottom: 5px; background: #100c08; }
.mskill.learned { background: #17120b; border-color: var(--line2); border-left-color: var(--rc); }
.mskill.maxed { box-shadow: inset 0 0 10px rgba(255, 211, 74, 0.18); }
.mskill.locked { opacity: 0.5; }
.mskill .mico { width: 30px; height: 42px; flex: none; }
.mskill b { color: var(--gold); font-size: 13.5px; }
.mskill .mlv { font-size: 11.5px; color: #9fb7e6; margin-left: 4px; }
.mskill small { display: block; color: var(--text); font-size: 12px; line-height: 1.35; }
.mskill small.next { color: var(--muted); }
.mbtns { display: flex; flex-direction: column; gap: 3px; }
.mskill:not(.learned) .mico[data-icon] { filter: grayscale(1) brightness(0.8); }
/* master tree grid: 9 ranks x 4 columns (the client's master window) */
.mgrid { display: grid; grid-template-columns: 18px repeat(4, 1fr); gap: 4px; margin-bottom: 8px; padding: 6px; border: 1px solid var(--line); border-top: 2px solid var(--rc); border-radius: 6px; background: #0c0906; }
.mrank { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--rc); }
.mcell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 0 2px; min-height: 52px; border: 1px solid var(--line); border-radius: 5px; background: #120e09; cursor: pointer; font: inherit; color: var(--text); }
.mcell.empty { border-color: transparent; background: transparent; cursor: default; }
.mcell .mico { width: 26px; height: 36px; }
.mcell .mclv { font-size: 10px; color: #9fb7e6; line-height: 1; }
.mcell.learned { background: #1a140c; border-color: var(--line2); }
.mcell.maxed { box-shadow: inset 0 0 8px rgba(255, 211, 74, 0.25); }
.mcell.maxed .mclv { color: var(--gold); }
.mcell.can { border-color: #6d8f4e; }
.mcell.locked { opacity: 0.45; }
.mcell.nofx { opacity: 0.35; }
.mcell.nofx.learned { opacity: 0.6; }
.mcell.sel { outline: 2px solid var(--rc); outline-offset: 0; }
.mcell .mreq { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); font-size: 8px; font-style: normal; color: var(--rc); }
.mcell:not(.learned) .mico[data-icon] { filter: grayscale(1) brightness(0.8); }
.mdetail { margin-bottom: 8px; }
.mdetail .mclient { color: #cdbf9f; font-style: italic; }

/* 16 classes: two columns in the class window of the create screen */
@media (min-width: 900px) {
  .cr-left { width: 330px; }
  .cr-win .class-cards { grid-template-columns: 1fr 1fr; gap: 6px; }
  .cr-win .class-btn { height: 36px; font-size: 12.5px; }
  .cr-left .mu-body { padding: 6px 24px 4px; }
}

/* ============================================================ Quests */
/* quest board on the battle screen */
/* a small window of the newer interface (gfx_panel), its icon from the simple menu (?! quests, the gate dungeons) */
.qhud { position: relative; width: min(232px, 100%); z-index: 3; pointer-events: auto; font-size: 12.5px; color: #e6d6b0; border: 6px solid transparent; border-image: var(--gfx-panel) 16 fill / 6px stretch; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.qh-ico { --x: 257; --y: 329; }
.dghud .qh-ico { --x: 425; --y: 243; }
.qhud.min { width: auto; max-width: 70%; }
.qh-head { display: flex; align-items: stretch; }
.qh-head button { background: none; border: 0; color: var(--gold); font: inherit; font-weight: 700; cursor: pointer; padding: 5px 8px; }
.qh-title { flex: 1; text-align: left; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.qh-title i, .qh-dtoggle i { font-style: normal; margin-left: auto; color: var(--muted); font-size: 11px; padding-left: 6px; }
.qh-more { border-left: 1px solid #3b2e1c !important; color: var(--muted) !important; }
.qh-more:hover, .qh-title:hover { color: #fff3d0; }
.qh-n { font-style: normal; background: var(--bad); color: #fff; border-radius: 8px; padding: 0 6px; font-size: 11px; }
.qh-body { padding: 0 8px 8px; border-top: 1px solid #3b2e1c; }
.qh-main { padding-top: 6px; }
.qh-t { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.qh-t b { color: #fff3d0; font-weight: 600; }
.qh-t em { font-style: normal; color: #ffd34a; white-space: nowrap; font-size: 12px; }
.qh-main .qbar { height: 7px; margin: 5px 0; }
.qh-main.ready .qbar i { background: linear-gradient(#8de49a, #2f7d3b); }
.qh-btns { display: flex; gap: 5px; justify-content: flex-end; }
.qh-btns .btn, .qh-d .btn, .qh-all { padding: 3px 8px; font-size: 12px; }
.qh-empty { padding-top: 6px; color: var(--muted); font-size: 12px; }
.qh-dtoggle { display: flex; width: 100%; margin-top: 7px; padding: 4px 0 2px; background: none; border: 0; border-top: 1px dashed #3b2e1c; color: #cdbb94; font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.qh-d { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 2px 0; font-size: 11.5px; color: #b9ab8a; }
.qh-d em { font-style: normal; color: #ffd34a; }
.qh-d.ready span { color: #a8f0b5; }
.qh-all { width: 100%; margin-top: 7px; }
.qhud.hint-pulse { animation: hintpulse 1.2s ease-in-out infinite; }
#hudStack { position: absolute; left: 8px; top: calc(var(--strip) + 8px); width: min(232px, 52%); z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
#hudStack > .qhud { pointer-events: auto; }
/* dungeon board */
.dg-row { padding: 5px 0; border-top: 1px dashed #3b2e1c; }
.dg-row:first-child { border-top: 0; }
.dg-name { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.dg-name b { color: #fff3d0; font-weight: 600; }
.dg-name em { font-style: normal; color: #ffd34a; font-size: 11.5px; white-space: nowrap; }
.dg-name em.none { color: var(--bad); }
.dg-act { display: flex; gap: 5px; justify-content: flex-end; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.dg-act select { background: none; color: var(--text); border: 4px solid transparent; border-image: var(--gfx-box) 10 fill / 4px stretch; border-radius: 0; padding: 0 2px; font-size: 12px; max-width: 90px; }
.dg-act .btn, .dg-act select { height: 24px; }
.dg-note { color: var(--muted); font-size: 11.5px; padding: 4px 0 0; }
@media (max-width: 599px) { .qhud { font-size: 12px; } }
/* the button the active quest points at */
.hint-pulse { animation: hintpulse 1.2s ease-in-out infinite; position: relative; z-index: 2; }
@keyframes hintpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 214, 120, 0); } 50% { box-shadow: 0 0 0 3px rgba(255, 214, 120, 0.9), 0 0 14px rgba(255, 214, 120, 0.8); } }
.qcard { padding: 4px 6px 5px; margin-bottom: 8px; }
.qcard.ready { outline: 1px solid var(--gold); outline-offset: -3px; box-shadow: 0 0 10px rgba(227, 194, 122, 0.25); }
.qcard.locked { opacity: 0.75; }
.qt { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.qt b { color: var(--gold); font-family: var(--title); font-size: 16px; }
.qt small { color: var(--muted); font-size: 12px; }
.qd { margin: 4px 0 6px; font-size: 12.5px; color: #cfc3a8; line-height: 1.4; }
.qbar { position: relative; height: 14px; margin: 6px 0; background: var(--mu-prog-back) 0 0 / 100% 100% no-repeat, #000; overflow: hidden; }
.qbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--mu-prog) 0 0 / 100% 100% no-repeat; transition: width 0.25s; }
.qbar span { position: absolute; inset: 0; text-align: center; font-size: 10.5px; line-height: 13px; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.qrw { font-size: 12px; color: #9fd8a6; margin-bottom: 6px; line-height: 1.35; }
.qbtns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.qrow { display: flex; align-items: center; gap: 6px; padding: 5px 2px; border-bottom: 1px solid #221a10; font-size: 13px; }
.qrow small { color: var(--muted); font-size: 11.5px; margin-left: auto; }
.qrow .btn { margin-left: 6px; }
.qrow.done { color: var(--good); } .qrow.wait { color: #7a6f5a; }
.qdone summary { cursor: pointer; padding: 5px 2px; color: var(--muted); font-size: 12.5px; }
.qguide ol { margin: 6px 0 4px; padding-left: 20px; font-size: 13.5px; line-height: 1.5; }
.qguide li { margin-bottom: 7px; }
.qguide b { color: var(--gold); }
.qg-goal { margin: 0 0 4px; padding: 5px 10px; border-left: 3px solid var(--gold2); background: rgba(227, 194, 122, 0.08); font-size: 13.5px; }

/* the right-hand panel (tabs + window) can be folded away on wide screens */
#sideBtn { display: none; }
@media (min-width: 900px) {
  #sideBtn { display: inline-block; }
  body.side-collapsed #app { grid-template-columns: minmax(0, 1fr) 0; }
  body.side-collapsed #tabs, body.side-collapsed #panel { display: none; }
}

/* ============================================================ Main HUD (bottom bar) of the newer interface
   Interface/GFx main.ozg (the Season 15+ HUD of the client): the pieces of the atlas gfx_main at the movie's own pixel
   positions (index.html data-at / data-img, placed by ui.js buildHud); ui.js layoutPad scales the four bands
   (left: HP orb + buttons, mid: bars + slots, right: MP orb + buttons, exp) to the battle view. */
#pad { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none; }
.hud-band { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.hud-band > *, .hud-bar > * { position: absolute; }
.hud-pic, .hud-fill, .hud-bt, .hud-orb, #questDot { background: var(--gfx-main) var(--up, 0 0) / 1024px 512px no-repeat; }
.hud-bar > .hud-pic:not([data-at]), .hud-bar > .hud-fill:not([data-at]) { inset: 0; }
.hud-fill { background-repeat: no-repeat; }
/* SD / AG value over its bar */
.hud-bar .hud-gauge { inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 0 2px #000, 0 1px 1px #000; pointer-events: none; }
.sd-t { color: #ffd34a; }
.ag-t { color: #e58bff; }
.hud-bt, .hud-item, .hud-orb, #skillPad button, .hud-list { pointer-events: auto; }
/* round buttons: up / over / down pictures of main.ozg (MuButton_mainFrame) */
.hud-bt { padding: 0; border: 0; cursor: pointer; }
.hud-bt:hover { background-position: var(--over); } .hud-bt:active { background-position: var(--down); }
#questDot { pointer-events: none; animation: hudpulse 1.2s ease-in-out infinite; }
@keyframes hudpulse { 50% { filter: brightness(1.5) drop-shadow(0 0 4px #ffd400); } }
/* orbs: the glass of the movie, the liquid (main_I3 HP / main_I1 MP) over it, filled from the bottom */
.hud-orb i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: var(--gfx-hp) 0 100% / 89px 89px no-repeat; border-radius: 50%; transition: height 0.25s; }
.hud-orb.mp i { background-image: var(--gfx-mp); }
/* HP / MP numbers over the frame, in the middle of the orb */
.hud-num { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 10px; line-height: 1.2; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000, 0 1px 1px #000; pointer-events: none; }
.hud-num .pct { display: none; }
/* Q W E R item slots (30 x 30, the letters are printed on the frame) */
.hud-item { padding: 0; border: 0; background: none; cursor: pointer; }
.hud-item i { position: absolute; left: 3px; top: 2px; width: 24px; height: 26px; background: center / contain no-repeat; }
.hud-item:hover i { filter: brightness(1.3); }
.hud-item.empty-pot i { filter: grayscale(1) brightness(0.5); }
.hud-item .count { position: absolute; right: 1px; bottom: -1px; font-size: 9px; font-weight: 700; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.hud-item.shop span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #f0c860; text-shadow: 0 1px 1px #000; }
/* EXP */
/* the fill: the 4 x 7 strip of the atlas stretched over the 734 px bar, shown up to the EXP share (#xpBar clips it) */
.hud-xp i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; overflow: hidden; transition: width 0.25s; }
.hud-xp i::before { content: ''; position: absolute; left: 0; top: 0; width: 734px; height: 7px; background: var(--gfx-main) -186436px -46px / 187904px 512px no-repeat; }
#xpTxt { position: absolute; left: 0; right: 0; top: -1px; text-align: center; font-size: 8px; line-height: 11px; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; white-space: nowrap; pointer-events: none; }
#pad.narrow #xpTxt { display: none; }
/* skills (mid band coordinates): slots 36 x 45 (one every 32 px, they overlap), the hole of the frame at + 7, + 8 (21 x 30)
   holds the icon at 21 px; the main one in the yellow select frame of the movie */
#skillPad { position: absolute; inset: 0; }
#skillPad .pbtn, .hud-cur, .hud-page { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; }
#skillPad .hud-sk { width: 36px; height: 45px; }
#skillPad .hud-sk.main { background: var(--gfx-main) -48px -174px / 1024px 512px no-repeat; }
#skillPad .ico { position: absolute; left: 7px; top: 8px; }
#skillPad .hud-cur .ico { top: 6px; } /* 22 px in the 24 x 32 opening of the orange box */
#skillPad .key { position: absolute; left: 0; right: 0; top: -6px; text-align: center; font-size: 8px; font-weight: 700; color: #e8c870; text-shadow: 0 0 2px #000; }
#skillPad .pbtn.locked .ico { filter: grayscale(1) brightness(0.45); }
#skillPad .pbtn.nomp .ico { filter: grayscale(1) brightness(0.6); }
#skillPad .pbtn:hover .ico { filter: brightness(1.25); }
#skillPad .cd { position: absolute; left: 7px; top: 8px; width: 21px; height: 30px; background: rgba(0, 0, 0, 0.65); transform-origin: bottom; transform: scaleY(0); pointer-events: none; }
#skillPad .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; pointer-events: none; }
#skillPad .lv { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 7px; color: #ffb0a5; text-shadow: 0 0 2px #000; }
/* the current skill: the orange box of the movie (36 x 44), "Tất cả" or the main skill */
.hud-cur { width: 36px; height: 44px; background: var(--gfx-main) -86px -174px / 1024px 512px no-repeat !important; color: #f0c860; }
.hud-cur span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 8px; line-height: 1.1; font-weight: 700; text-shadow: 0 1px 1px #000; }
.hud-cur .n { position: absolute; top: 3px; right: 4px; font-size: 8px; color: #7dc3ff; text-shadow: 0 0 2px #000; }
.hud-cur:hover, #pad.list-open .hud-cur { filter: brightness(1.3); }
/* the page arrow (15 x 28): opens the list */
.hud-page { width: 15px; height: 28px; background: var(--gfx-main) -256px -229px / 1024px 512px no-repeat !important; }
.hud-page i { position: absolute; left: 3px; top: 6px; width: 10px; height: 20px; background: var(--gfx-main) -592px -229px / 1024px 512px no-repeat; }
.hud-page:hover { filter: brightness(1.3); }
/* the skill list above the slots: each skill on a slot cut out of the frame */
.hud-list { display: none; position: absolute; right: 19px; bottom: 60px; width: max-content; max-width: 288px; flex-wrap: wrap-reverse; justify-content: flex-end; }
#pad.list-open .hud-list { display: flex; }
/* on a narrow view the side bands stand over the mid band: the open list comes over them */
#pad.list-open .hud-band:has(.hud-list) { z-index: 1; }
/* the mirrored side bands of a narrow view: buttons, orbs and numbers read the right way round */
.hud-band.flip .hud-bt, .hud-band.flip .hud-orb, .hud-band.flip .hud-num, .hud-band.flip #questDot { transform: scaleX(-1); }
#skillPad .hud-li { position: relative; width: 36px; height: 45px; background: var(--gfx-main) -528px -30px / 1024px 512px no-repeat; } /* the third slot of the frame */
#skillPad .hud-li.on, #skillPad .hud-li.active { background: var(--gfx-main) -48px -174px / 1024px 512px no-repeat; }
#skillPad .hud-li span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 8px; line-height: 1.1; font-weight: 700; color: #f0c860; text-shadow: 0 1px 1px #000; }

/* ============================================================ Battle screen on phones (< 900 px: the panel slides over it)
   The stage name and progress get their own strip across the top; the quest / dungeon boards (folded to chips) and
   the Auto controls start under it, so nothing covers the stage name any more. */
@media (max-width: 899px) {
  #battle { --strip: 34px; }
  #battle.in-town { --strip: 50px; }
  #stageInfo {
    top: 0; left: 0; right: 0; width: auto; transform: none; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; min-height: var(--strip); padding: 0 2px;
    text-align: left; border: 6px solid transparent; border-image: var(--gfx-panel) 16 fill / 6px stretch;
  }
  .stage-name { display: block; aspect-ratio: auto; padding: 0; background: none; flex: 0 1 auto; min-width: 0; max-width: 60%; font-size: 15px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stage-name span { font-size: 11px; margin-left: 4px; }
  .stage-prog { flex: 1; min-width: 80px; height: 14px; margin: 0; }
  .stage-prog span { font-size: 10px; line-height: 12px; text-align: center; }
  /* a boss takes the place of the kill bar in the same row */
  #stageInfo.boss .stage-prog { display: none; }
  #bossFrame { flex: 1 1 0; min-width: 0; margin: 0; display: flex; align-items: center; gap: 6px; }
  #bossName { flex: 0 1 auto; min-width: 0; max-width: 60%; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #bossFrame .boss-bar { flex: 1; margin: 0; }
  #hudStack { left: 8px; width: min(232px, calc(100% - 140px)); }
  .qh-head button { min-height: 40px; }
  .qh-btns .btn, .qh-d .btn, .qh-all, .dg-act .btn, .dg-act select { min-height: 34px; }
  #autoControls .chip { min-height: 40px; }
  #toast { top: calc(var(--top-h) + 44px); }
}

/* ============================================================ Pets: worn in their own slots of the equipment window */
.mudoll { height: calc(334px * var(--s)); }
.mudoll .es-petMount, .mudoll .es-petFight, .mudoll .es-petBuff { --sil: var(--mu-s-pet); }
.mudoll .es-petMount img, .mudoll .es-petFight img, .mudoll .es-petBuff img { left: 6%; top: 6%; width: 88%; height: 88%; }
.mudoll .eslot .plabel { position: absolute; left: -6px; right: -6px; bottom: -15px; text-align: center; font-size: 10px; color: var(--muted); white-space: nowrap; pointer-events: none; }
.mudoll .eslot.has .plabel { color: #cdbb94; }
.pet-lines { font-size: 12.5px; line-height: 1.5; color: #cfc3a8; margin: 4px 0 6px; }
.pet-stars { color: #ffd34a; letter-spacing: 2px; } .pet-stars span { color: #4a4030; }

/* side by side comparison: each picture a little smaller */
/* only weapons and wings get the big picture (.big); armor, rings and the rest keep the small one */
#tooltip .timg.big { height: 210px; }
#tooltip .timg.big img { max-height: 200px; max-width: 200px; }
.cmp .timg.big, .cmp.three .timg.big { height: 150px; }
.cmp .timg.live:not(.big) { height: 90px; }
/* the live 3D view blends over the tooltip like light: the black of the glow quads disappears instead of showing as boxes */
#tooltip .timg canvas { mix-blend-mode: screen; }

/* ============================================================ Windows (UI redesign step 3)
   Quests and the master tree are windows (#modal[data-kind], ui.js setWindow) instead of panel tabs. */
#modal[data-kind="master"] .mbox, #modal[data-kind="quest"] .mbox { width: min(640px, 100%); height: min(92vh, 900px); max-height: none; }
@media (max-width: 599px) { #modal { padding: 6px; } #modal[data-kind] .mbox { height: 96%; } }

/* master window: one line of numbers, branches, tree; the picked node's detail stays at the bottom of the window */
.master-line { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
.master-line b { color: var(--text); }
.master-lock { font-size: 12px; margin: 0 0 8px; }
.master-help { margin: 0 0 8px; font-size: 12px; }
.master-help summary { cursor: pointer; color: var(--muted); padding: 6px 0; }
.master-help p { margin: 0 0 6px; }
.mdetail-box { position: sticky; bottom: -4px; z-index: 2; margin: 0 -8px; padding: 8px 8px 10px; background: var(--mu-bg) 0 0 / 256px auto, #14110e; border-top: 1px solid var(--gold2); box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.6); }
.mdetail-box > .muted { margin: 4px 0; font-size: 12.5px; text-align: center; }
.mdname { font-family: var(--title); color: var(--gold); font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.mdetail-box .mskill { margin: 0; }
.mdetail-box .mbtns { display: flex; flex-direction: column; gap: 5px; }
.mdetail-box .mbtns .btn { min-width: 52px; min-height: 34px; }
#masterWin .mcell { min-height: 58px; }
#masterWin .root-tabs button { min-height: 44px; }
.master-open { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 14px; padding: 9px 12px; font-family: var(--title); font-size: 16px; }
.master-open small { font-family: var(--font); font-size: 12px; color: #fff3d0; }
.master-open .pts { font-style: normal; background: var(--bad); color: #fff; border-radius: 8px; padding: 0 6px; }

/* the volume bar of the client's option window (newui_option_volume01 dark, 02 lit): a range input lies over it */
.mu-vol { position: relative; flex: none; width: 155px; height: 20px; background: var(--mu-vol-off) 0 0 / 100% 100% no-repeat; }
.mu-vol i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: var(--mu-vol-on) 0 0 / 155px 20px no-repeat; pointer-events: none; }
.mu-vol input[type=range] { position: absolute; left: -4px; right: -4px; top: -10px; bottom: -10px; width: calc(100% + 8px); height: auto; margin: 0; opacity: 0; cursor: pointer; }

@media (max-width: 599px) { .toggle { min-height: 40px; } }

/* ============================================================ Panel (UI redesign step 4) */
/* phones: two heights, the top bar of the panel switches them (ui.js bindPanelSize) */
.panel-size { display: none; }
@media (max-width: 899px) {
  body.panel-tall #panel { height: calc(100vh - var(--top-h) - var(--tabs-h)); height: calc(100dvh - var(--top-h) - var(--tabs-h)); }
  .panel-head { cursor: pointer; touch-action: none; user-select: none; }
  .panel-size { display: block; position: absolute; left: calc(50% - 138px); top: 31px; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--gold); font-size: 13px; text-shadow: 0 1px 2px #000; pointer-events: none; }
  .panel-size::before { content: '▲'; }
  body.panel-tall .panel-size::before { content: '▼'; }
  .subtabs button { min-height: 40px; }
}
/* wide screens: the tab buttons are inside the window frame (moved there by ui.js), under its title */
@media (min-width: 900px) {
  #panel > #tabs { position: relative; z-index: 1; flex: none; height: auto; margin: 0; padding: 0 10px 6px; background: none; }
  #panel > #tabs button { height: 32px; }
}

/* character: three sub tabs; a short summary under the equipment */
.gear-sum { margin-top: 4px; }

/* bag: bigger buttons; an item whose picture is not rendered yet shows the silhouette of its kind */
.inv-btns { margin: 0; }
/* room for the scroll bar is kept from the start, so a grid sized to the content box never ends up wider than it */
#panel .tab, .mbox .mu-body { scrollbar-gutter: stable; }
.inv-btns .btn { min-height: 38px; }
.grid .gi.ph::before { content: ''; position: absolute; inset: 10%; background: var(--sil, none) center / contain no-repeat; opacity: 0.4; }
.grid .gi.ph:not([style*="--sil"])::before { inset: 30%; border: 1px dashed rgba(227, 194, 122, 0.35); border-radius: 50%; }

/* maps (cards and stage buttons: "maps" above) */
.map-card summary { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px; cursor: pointer; list-style: none; }
.map-card summary::-webkit-details-marker { display: none; }
.map-card summary b { color: var(--gold); font-family: var(--title); font-size: 16px; }
.map-card summary b::before { content: '▸ '; color: var(--muted); font-family: var(--font); font-size: 12px; }
.map-card[open] summary b::before { content: '▾ '; }
.map-card summary small { color: var(--muted); font-size: 12px; text-align: right; }
.maps-locked { margin-top: 12px; }
.maps-locked h5 { margin: 0 0 4px; color: var(--muted); font-size: 13px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.maps-locked h5 small { font-weight: 400; font-size: 11.5px; }
.map-line { display: flex; justify-content: space-between; gap: 8px; padding: 4px 2px; border-bottom: 1px solid #1d160d; font-size: 12.5px; color: #8d8170; }

/* dungeons: one card each */
.dg-card { padding: 4px 6px; margin-bottom: 8px; }
.dg-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dg-title { min-width: 0; }
.dg-title b { display: block; color: var(--gold); font-family: var(--title); font-size: 16px; }
.dg-title small { color: var(--muted); font-size: 12px; }
.dg-go { flex: none; display: flex; gap: 6px; align-items: center; }
.dg-go .btn { min-height: 40px; min-width: 64px; }
.dg-go select { height: 40px; background: none; color: var(--text); border: 5px solid transparent; border-image: var(--gfx-box) 10 fill / 5px stretch; border-radius: 0; padding: 0 2px; font-size: 13px; }
.dg-go select option, .dg-act select option { background: #14110e; }
.dg-desc { margin-top: 6px; font-size: 12px; color: var(--muted); }
.dg-desc summary { cursor: pointer; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-desc summary::-webkit-details-marker { display: none; }
.dg-desc summary::before { content: 'ⓘ '; color: var(--gold2); }
.dg-desc[open] summary { white-space: normal; line-height: 1.4; }
.dg-card .toggle { border-bottom: 0; padding-bottom: 0; }

/* ============================================================ NPC windows, item tip, toasts (UI redesign step 5) */
/* shop / Chaos gear list: one row per item */
.shop-rows { display: grid; gap: 5px; }
.shop-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 8px 5px 5px; }
.shop-row .img { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--mu-item-box) center / 100% 100% no-repeat; }
.shop-row .img img { max-width: 46px; max-height: 46px; }
.shop-row .img.ph::after { content: ''; width: 40%; height: 40%; border: 1px dashed rgba(227, 194, 122, 0.35); border-radius: 50%; }
/* the Zen of the WCoin shop: the coins of the money bar (.zenbar::before), larger */
.shop-row .img.zen::after { content: ''; width: 24px; height: 23px; zoom: 1.6; background: var(--gfx-inven) -627px -358px / 1024px 512px no-repeat; }
.sr-name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-name b { font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.sr-name small { color: #ffd34a; font-size: 12px; }
.shop-row .btn { min-height: 40px; min-width: 64px; }
.shop-row.on { border-color: var(--gold); box-shadow: inset 0 0 8px rgba(227, 194, 122, 0.25); }
.shop-group { margin-top: 6px; padding: 4px 2px 2px; color: #ffd98a; font-size: 13px; border-bottom: 1px solid rgba(227, 194, 122, 0.3); }
.shop-group:first-child { margin-top: 0; }
#modal[data-kind="shop"] .mbox, #modal[data-kind="chaos"] .mbox { height: min(92vh, 900px); max-height: none; }
@media (max-width: 599px) { #modal[data-kind="shop"] .mbox, #modal[data-kind="chaos"] .mbox { height: 96%; } }

/* storage: chest and bag side by side on wide screens, two tabs on phones */
#modal[data-kind="storage"] .mbox { width: min(1000px, 100%); height: min(92vh, 900px); max-height: none; }
.st-panes h4 { margin: 0 0 6px; font-family: var(--title); color: var(--gold); font-size: 16px; display: flex; justify-content: space-between; align-items: baseline; }
.st-panes h4 small { font-family: var(--font); color: var(--muted); font-size: 12px; font-weight: 400; }
@media (min-width: 900px) {
  .st-tabs { display: none; }
  .st-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .st-pane.off { display: block; }
}
@media (max-width: 899px) { .st-pane.off { display: none; } #modal[data-kind="storage"] .mbox { height: 96%; } }

/* Chaos: wing recipes with one chip per ingredient, green when there is enough, red when not */
.recipe { padding: 3px 5px; margin-bottom: 6px; }
.recipe.ready { outline: 1px solid #4b7a3c; outline-offset: -3px; }
.rc-top { display: flex; align-items: center; gap: 8px; }
.rc-top b { flex: 1; color: var(--gold); font-size: 13.5px; }
.rc-rate { color: var(--muted); font-size: 12px; }
.rc-top .btn { min-height: 36px; }
.needs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.need { font-size: 11.5px; padding: 2px 7px; border-radius: 10px; border: 1px solid; white-space: nowrap; }
.need.ok { color: #a8f0b5; border-color: #2f5a35; background: rgba(40, 120, 60, 0.12); }
.need.no { color: #ffb0a5; border-color: #6a2a22; background: rgba(150, 40, 30, 0.12); }
.chaos .opts .btn { min-height: 44px; }

/* quick potion buy (rows: "quick potion buy" above) */
.qb-n { position: absolute; right: 2px; bottom: 0; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.qb-name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qb-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb-btns { display: flex; gap: 4px; }
.qb-btns .btn { min-height: 40px; padding: 0 9px; }

/* item tip: set bonuses fold under their set line; on phones a sheet at the bottom with tabs for a comparison */
#tooltip .tset summary { cursor: pointer; list-style: none; }
#tooltip .tset summary::-webkit-details-marker { display: none; }
#tooltip .tset summary::after { content: ' ▸'; color: var(--muted); }
#tooltip .tset[open] summary::after { content: ' ▾'; }
.tclose { display: none; }
@media (max-width: 599px) {
  #tooltip.sheet { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; min-width: 0; max-width: none !important; max-height: 78vh; overflow-y: auto; border-radius: 10px 10px 0 0; border-bottom: 0; padding: 12px 12px 0; font-size: 13px; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.8); }
  #tooltip.sheet .tclose { display: block; position: sticky; top: 0; float: right; z-index: 3; width: 40px; height: 40px; margin: -8px -6px 0 0; padding: 0; border: 0; background: none; cursor: pointer; }
  /* newui_exit_00: the normal button on top, the pressed one below (36 x 29 each) */
  #tooltip.sheet .tclose::before { content: ''; display: block; width: 36px; height: 29px; margin: 5px auto; background: var(--mu-close) 0 0 / 36px 58px no-repeat; }
  #tooltip.sheet .tclose:active::before { background-position: 0 -29px; }
  #tooltip.sheet .tact { position: sticky; bottom: 0; margin: 8px -12px 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(8, 6, 4, 0.98); border-top: 1px solid var(--line); }
  #tooltip.sheet .tact .btn { min-height: 40px; flex: 1 1 auto; }
  #tooltip.sheet .cmp, #tooltip.sheet .cmp.three { grid-template-columns: 1fr; }
  #tooltip.sheet .cmp > .off { display: none; }
  #tooltip.sheet .cmp-h { display: none; }
  .cmp-tabs { display: flex; gap: 4px; margin: 0 44px 8px 0; }
  .cmp-tabs button { flex: 1; min-height: 36px; font: inherit; font-size: 12px; color: #b8a888; text-shadow: 0 1px 1px #000; background: var(--mu-tab) 0 0 / 100% 200% no-repeat, #100c08; border: 0; border-radius: 0; }
  .cmp-tabs button.on { color: #ffd98a; background-position: 0 100%; }
}

/* toasts: while a window is open they sit at the bottom edge instead of over its content */
body.modal-open #toast { top: auto; bottom: 8px; }

/* scroll bars of the panel, the windows and the item tip (mouse screens; phones keep their thin overlay bars): the rail of
   the client (newui_scrollbar_up / _m / _down) and its knob (newui_scroll_off, newui_scroll_on while held) */
@media (hover: hover) and (pointer: fine) {
  #panel .tab::-webkit-scrollbar, .mbox .mu-body::-webkit-scrollbar, #tooltip::-webkit-scrollbar { width: 15px; }
  #panel .tab::-webkit-scrollbar-track, .mbox .mu-body::-webkit-scrollbar-track, #tooltip::-webkit-scrollbar-track {
    background: var(--mu-scroll-up) center top / 7px 3px no-repeat, var(--mu-scroll-dn) center bottom / 7px 3px no-repeat, var(--mu-scroll-m) center 3px / 7px 15px repeat-y; }
  #panel .tab::-webkit-scrollbar-thumb, .mbox .mu-body::-webkit-scrollbar-thumb, #tooltip::-webkit-scrollbar-thumb { min-height: 30px; background: var(--mu-knob) center / 15px 30px no-repeat; }
  #panel .tab::-webkit-scrollbar-thumb:active, .mbox .mu-body::-webkit-scrollbar-thumb:active, #tooltip::-webkit-scrollbar-thumb:active { background-image: var(--mu-knob-on); }
}

/* ============================================================ Maps: minimap, map name, Move window */
/* minimap (ui/minimap.js), under the Auto button in a small window of the newer interface */
#minimap { width: 150px; height: 150px; border: 6px solid transparent; border-image: var(--gfx-panel) 16 fill / 6px stretch; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); cursor: pointer; pointer-events: auto; }
#minimap canvas { display: block; width: 100%; height: 100%; background: #000; }
@media (max-width: 599px) { #minimap { width: 104px; height: 104px; } }
/* the name of the map on the silver plate of MapName.ozg (gfx_mapname, 204 x 118, the name between y 41 and 73), the dark
   bar under it (gfx_mapname_bar) for what the place is */
#mapBanner { position: absolute; left: 50%; top: 18%; z-index: 4; width: 265px; height: 183px; transform: translateX(-50%); pointer-events: none; opacity: 0; text-align: center; }
/* the plate is a pale grey picture made to be lit: brightened, over a dark band so the name reads on any ground */
#mapBanner::before { content: ''; position: absolute; left: 0; top: 0; width: 265px; height: 153px; background: var(--gfx-mapname) center top / 265px 153px no-repeat; filter: brightness(1.8) drop-shadow(0 0 3px #000); }
#mapBanner b { position: absolute; left: 6px; right: 6px; top: 55px; height: 40px; line-height: 40px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.7) 18%, rgba(0, 0, 0, 0.7) 82%, transparent); font-family: var(--title); font-size: 24px; color: #f4e6c4; text-shadow: 0 2px 4px #000, 0 0 10px #000; white-space: nowrap; }
#mapBanner small { position: absolute; left: 50%; top: 156px; width: 239px; height: 23px; transform: translateX(-50%); line-height: 23px; background: var(--gfx-mapname-bar) center / 100% 100% no-repeat; font-size: 12px; color: var(--gold); }
#mapBanner small:empty { display: none; }
#mapBanner.show { animation: mapbanner 3.6s ease forwards; }
@keyframes mapbanner { 0% { opacity: 0; margin-top: 10px; } 12% { opacity: 1; margin-top: 0; } 75% { opacity: 1; } 100% { opacity: 0; } }
/* the Move window (M): the list of the client's MoveCommand.ozg (map, level, zen), the one picked described under it */
#modal[data-kind="move"] .mbox { width: min(480px, 100%); height: auto; }
.mv-head, .mv-row { display: grid; grid-template-columns: minmax(0, 1fr) 46px 96px; gap: 6px; align-items: center; }
.mv-head { padding: 0 11px 4px; font-size: 12px; color: var(--muted); }
.mv-head span:not(:first-child) { text-align: right; }
.mv-list { max-height: 44vh; overflow-y: auto; border: 5px solid transparent; border-image: var(--gfx-box) 10 fill / 5px stretch; }
.mv-group { padding: 6px 6px 2px; font-family: var(--title); font-weight: 700; color: var(--gold); font-size: 14px; }
.mv-row { width: 100%; min-height: 34px; padding: 0 6px; border: 0; background: none; color: var(--text); text-align: left; font-size: 13px; }
.mv-row b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-row:hover { background: rgba(255, 210, 120, 0.08); }
.mv-row.on { background: rgba(255, 190, 90, 0.18); outline: 1px solid var(--gold2); outline-offset: -1px; }
.mv-row .lv, .mv-row .zen { text-align: right; font-variant-numeric: tabular-nums; }
.mv-row .zen { color: #ffd34a; }
.mv-row.locked, .mv-row.locked .zen { color: #6f665a; }
.mv-row.low .lv { color: var(--bad); }
.mv-info { margin-top: 8px; padding: 4px 6px; min-height: 70px; font-size: 12.5px; line-height: 1.45; color: #d8cba8; border: 5px solid transparent; border-image: var(--gfx-box) 10 fill / 5px stretch; }
.mv-info b { color: var(--gold); }
.mv-info p { margin: 4px 0 0; }
.mv-btns { display: flex; justify-content: center; gap: 8px; margin: 10px 0 4px; }
.mv-btns .btn { min-height: 38px; }
@media (max-width: 599px) { #modal[data-kind="move"] .mbox { height: auto; } .mv-list { max-height: 48vh; } }

/* ============================================================ Pentagram and Spider Artifacts (game/pentagram.js, artifact.js)
   The pieces of the client's Pentagram.ozg / ArtifactFrame.ozg / InventoryFrame.ozg (tools/extract-gfx.mjs GFX_CUTS). */
.elic { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; background: no-repeat center / contain; }
.elic.el1 { background-image: var(--gfx-el1); } .elic.el2 { background-image: var(--gfx-el2); } .elic.el3 { background-image: var(--gfx-el3); }
.elic.el4 { background-image: var(--gfx-el4); } .elic.el5 { background-image: var(--gfx-el5); }
.elic.atk { background-image: var(--gfx-ic-atk); width: 12px; height: 12px; } .elic.def { background-image: var(--gfx-ic-def); width: 11px; height: 13px; }
.mbar .mel { display: inline-block; width: 12px; height: 12px; margin-right: 3px; vertical-align: -2px; background: no-repeat center / contain; }
.mbar .mel.el1 { background-image: var(--gfx-el1); } .mbar .mel.el2 { background-image: var(--gfx-el2); } .mbar .mel.el3 { background-image: var(--gfx-el3); }
.mbar .mel.el4 { background-image: var(--gfx-el4); } .mbar .mel.el5 { background-image: var(--gfx-el5); }
/* elemental damage numbers in the colour of the element */
.ftext.el1 { color: #ff6a4a; font-size: 16px; } .ftext.el2 { color: #5aa8ff; font-size: 16px; } .ftext.el3 { color: #e0b060; font-size: 16px; }
.ftext.el4 { color: #6fe08a; font-size: 16px; } .ftext.el5 { color: #c08bff; font-size: 16px; }
/* the equipment tab: the Pentagram slot, the Artifact button and the hero's element between them */
.mudoll .es-pentagram { --sil: var(--mu-s-pentagram); }
.mudoll .es-pentagram img { left: 8%; top: 8%; width: 84%; height: 84%; }
.mudoll .artbtn { position: absolute; border: 0; padding: 0; cursor: pointer; background: var(--gfx-art-btn) center / 100% 100% no-repeat; }
.mudoll .artbtn:hover { background-image: var(--gfx-art-btn-over); }
.mudoll .artbtn:active { background-image: var(--gfx-art-btn-down); }
.mudoll .artbtn .plabel { position: absolute; left: -10px; right: -10px; bottom: calc(-15px - 3px * var(--s)); text-align: center; font-size: 10px; color: #cdbb94; white-space: nowrap; pointer-events: none; }
.mudoll .elbadge { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.mudoll .elbadge .elic { width: calc(22px * var(--s)); height: calc(22px * var(--s)); }
.mudoll .elbadge small { font-size: 11px; white-space: nowrap; }
/* the Pentagram window */
#modal[data-kind="penta"] .mbox, #modal[data-kind="art"] .mbox { width: min(560px, 100%); height: min(92vh, 900px); max-height: none; }
@media (max-width: 599px) { #modal[data-kind="penta"] .mbox, #modal[data-kind="art"] .mbox { height: 96%; } }
.penta { --ps: 1.15; }
@media (max-width: 420px) { .penta { --ps: 1; } }
.pboard { position: relative; width: calc(307px * var(--ps)); height: calc(289px * var(--ps)); margin: 4px auto 6px; background: var(--gfx-penta-board) 0 0 / 100% 100% no-repeat; }
/* the Pentagram slot (isPentagramSlot, 75 x 75 at (94, 150) of the window): its picture on the red disc in the middle of the board */
.pboard .pcenter { position: absolute; left: calc(121.5px * var(--ps)); top: calc(113.5px * var(--ps)); width: calc(75px * var(--ps)); height: calc(75px * var(--ps)); transform: translate(-50%, -50%); border-radius: 50%; cursor: pointer; }
.pboard .pcenter img { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 2px 3px #000); }
.pboard .pcenter:hover, .pboard .psock.open:hover { filter: brightness(1.25); }
.pboard .psock.full:hover { filter: brightness(1.25) drop-shadow(0 0 4px rgba(197, 140, 255, 0.8)); }
.pboard .psock { position: absolute; width: calc(58px * var(--ps)); height: calc(53px * var(--ps)); transform: translate(-50%, -50%); background: no-repeat center / 100% 100%; cursor: pointer; }
.pboard .psock.s0 { background-image: var(--gfx-errtel0); } .pboard .psock.s1 { background-image: var(--gfx-errtel1); } .pboard .psock.s2 { background-image: var(--gfx-errtel2); }
.pboard .psock.s3 { background-image: var(--gfx-errtel3); } .pboard .psock.s4 { background-image: var(--gfx-errtel4); }
.pboard .psock.closed { filter: grayscale(1) brightness(0.45); }
.pboard .psock.full { filter: drop-shadow(0 0 4px rgba(197, 140, 255, 0.8)); }
.pboard .psock img { position: absolute; left: 20%; top: 16%; width: 60%; height: 64%; object-fit: contain; }
.pboard .psock .elvl { position: absolute; right: 2px; top: 0; font-size: 11px; font-weight: 700; color: #ffd34a; text-shadow: 0 0 3px #000; }
.pboard .psock .prank { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; font-size: 8px; color: #c58cff; text-shadow: 0 0 2px #000; letter-spacing: 1px; }
.pboard .psock .plock { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: 11px; color: #ddd; }
.penta .pname { text-align: center; margin-bottom: 6px; }
.pvs-list { display: grid; gap: 3px; margin-top: 6px; }
.pvs { display: grid; grid-template-columns: 18px 64px 1fr auto; align-items: center; gap: 6px; font-size: 12.5px; padding: 2px 4px; }
.pvs b { font-weight: 600; }
.pvs.strong b:first-of-type { color: #8bff8b; } .pvs.weak b:first-of-type { color: #ff8b7a; }
/* the Artifact window: the board (its ornate circle), the black hexagon holes of the seven places, the gems of the artifacts worn */
.artwin { --as: 1.15; }
@media (max-width: 420px) { .artwin { --as: 1; } }
.aboard { position: relative; width: calc(295px * var(--as)); height: calc(341px * var(--as)); margin: 4px auto 0; background: var(--gfx-art-board) 0 0 / 100% 100% no-repeat; }
.aboard.full { background-image: var(--gfx-art-board-on); }
.aboard .hx { position: absolute; width: calc(25px * var(--as)); height: calc(28px * var(--as)); background: no-repeat center / 100% 100%; cursor: pointer; }
.aboard .hx.empty { background-image: var(--gfx-hex-off); }
.aboard .hx.empty.hl { background-image: var(--gfx-hex-sel); }
.aboard .hx.on { background-size: 116% 116%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)); }
.aboard .hx.on.hl { filter: brightness(1.3) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)); }
.aboard.full .hx.on { filter: drop-shadow(0 0 3px rgba(110, 235, 255, 0.95)); }
.aboard .anum { position: absolute; transform: translate(-50%, -50%); font-weight: 700; font-size: 12px; color: rgba(190, 225, 235, 0.5); text-shadow: 0 0 3px #000; pointer-events: none; }
.arow .sr-name { cursor: pointer; }
.arow .img img.ghost { opacity: 0.2; filter: grayscale(1); }
.arow-btns { display: flex; gap: 4px; }
.afull { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.afull.on { color: var(--good); }