/* ================================================================ Ash Glass: the game's MMORPG skin (27 October 2026)
   The owner picked option B of the UI canvas ("Kül Camı") and asked for it to look more like an MMORPG:
   "2. yi begendim. 2. yi iyilestirerek yapar misin" · "daha mmorpg ui i gibi durmasi lazim".
   Dark glass panes with a gold hairline and corner accents, Inter for words and Marcellus SC for names
   and titles, metal-ringed portraits, MMO slots for gear and abilities. On a computer the town's HUD
   takes an MMO's places: the hero's unit frame at the top left with the party under it, the wallet
   and the bounties at the top right, the chat at the bottom left, the emotes as a hotbar in the
   middle, the purse and the windows' micro-menu at the bottom right, experience along the bottom
   edge. In a fight: the hero's frame at the top left, the turn order at the top right, the action
   bar in the middle of the bottom with the turn's time over it, End Turn beside it.
   Loaded after style.css and events.css: only the look and the places change here, never what the
   game does. A phone or a tablet keeps its own places (style.css html.touch) and takes the look. */

:root {
  --ink: #f1ece4;
  --ink-dim: #b8b0a3;
  --ink-faint: #8a8377;
  --gold: #e8c47a;
  --gold-dim: #a8894e;
  --panel: #0b0b0f;
  --panel-2: #1b1b22;
  --edge: rgba(201, 162, 90, 0.34);
  --edge-hi: rgba(232, 196, 122, 0.66);
  --serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --caps: 'Marcellus SC', 'Cinzel', Georgia, serif;
  /* the pane, its hairline and its lift */
  --glass: linear-gradient(180deg, rgba(27, 27, 34, 0.92), rgba(10, 10, 14, 0.94));
  --hair: inset 0 0 0 1px rgba(201, 162, 90, 0.32), inset 0 1px 0 rgba(255, 236, 200, 0.08);
  --lift: 0 0 0 1px rgba(0, 0, 0, 0.72), 0 14px 34px rgba(0, 0, 0, 0.55);
  --ember: #ff8a4c;
  --metal: conic-gradient(from 210deg, #f6dca0, #8a6a2c, #f3d690, #5e4620, #f6dca0);
  --metal-ally: conic-gradient(from 210deg, #bfe0ff, #2a4f8a, #a8d0ff, #1c355e, #bfe0ff);
  --metal-foe: conic-gradient(from 210deg, #ff9a84, #7a1c14, #ff8a6a, #5a120c, #ff9a84);
  --slot: radial-gradient(circle at 50% 35%, #2a2a33, #0c0c11 75%);
  font-synthesis-weight: none;
}
/* Inter is wider than the serif the sizes were set for: its x-height scaled to theirs keeps every line
   where it was (the Chinese page keeps its serif faces, i18n.js, and its sizes) */
html:not([lang="zh-CN"]) body { font-size-adjust: 0.5; }
html, body { background: #060608; }
* { scrollbar-color: rgba(201, 162, 90, 0.4) transparent; }
b { color: #f3d68e; }

/* ---------------------------------------------------------------- panes */
.frame, .panel, .modal-box, .login-box, #chat, .tip, .ctx {
  background: var(--glass); border: 0; border-radius: 10px; box-shadow: var(--hair), var(--lift);
}
.tip { border-radius: 8px; background: linear-gradient(180deg, rgba(30, 30, 38, 0.97), rgba(12, 12, 16, 0.98)); }
/* the corner accents of a game's pane: the windows, the boxes, the HUD's frames (the hero's frame in a
   fight is one only on a computer, where it has a corner of its own) */
.panel::before, .panel::after, .modal-box::before, .modal-box::after, .login-box::before, .login-box::after, #me-frame::before, #me-frame::after,
#b-bar::before, #b-bar::after, html:not(.touch) #b-top::before, html:not(.touch) #b-top::after, html:not(.touch) #b-status::before, html:not(.touch) #b-status::after {
  content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 3;
}
.panel::before, .modal-box::before, .login-box::before, #me-frame::before, #b-bar::before, html:not(.touch) #b-top::before, html:not(.touch) #b-status::before {
  left: 0; top: 0; border-left: 2px solid #e2b968; border-top: 2px solid #e2b968; border-radius: 10px 0 0 0;
}
.panel::after, .modal-box::after, .login-box::after, #me-frame::after, #b-bar::after, html:not(.touch) #b-top::after, html:not(.touch) #b-status::after {
  right: 0; bottom: 0; border-right: 2px solid #e2b968; border-bottom: 2px solid #e2b968; border-radius: 0 0 10px 0;
}
.modal-box { position: relative; }
/* (each pane its own layer: its accents stay under a window opened over it) */
.panel, .modal-box, .login-box, #me-frame, #b-bar, #b-top, #b-status { isolation: isolate; }

/* ---------------------------------------------------------------- words */
h1, h2, h3 { font-family: var(--caps); font-weight: 400; color: #f4dfae; letter-spacing: 0.03em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); }
.sect { font-family: var(--caps); color: var(--gold-dim); letter-spacing: 0.14em; }
.hint, .panel .note { color: var(--ink-faint); }
.err { color: #ff8a7a; }
kbd { font-family: var(--serif); font-weight: 700; font-size: 9.5px; color: #c9bfae; border: 0; border-radius: 3px; background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.3); padding: 0 4px; }

/* ---------------------------------------------------------------- buttons and fields */
/* (a button keeps a clear border: a chosen one shows by its border's colour, .pickbar .btn.on, .mkf .btn.on) */
.btn {
  font-family: var(--caps); font-weight: 400; font-size: 13px; letter-spacing: 0.05em; color: #f3e3c0; border: 1px solid transparent; border-radius: 7px; padding: 6px 13px;
  background: linear-gradient(180deg, #2e2e37, #17171d);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 2px 6px rgba(0, 0, 0, 0.55); text-shadow: 0 1px 1px #000;
}
.btn:hover:not(:disabled) { color: #fff4d8; background: linear-gradient(180deg, #3a3a45, #1d1d24);
  box-shadow: inset 0 0 0 1px rgba(232, 196, 122, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 14px rgba(232, 196, 122, 0.22), 0 2px 6px rgba(0, 0, 0, 0.55); }
.btn.big { font-size: 15px; padding: 9px 20px; }
.btn.small { font-size: 11.5px; padding: 3px 9px; border-radius: 6px; }
.btn.red { color: #ffc0b4; background: linear-gradient(180deg, #3e1814, #1f0c0a); box-shadow: inset 0 0 0 1px rgba(224, 98, 79, 0.55), 0 2px 6px rgba(0, 0, 0, 0.55); }
.btn.red:hover:not(:disabled) { background: linear-gradient(180deg, #4e1e19, #28100d); box-shadow: inset 0 0 0 1px rgba(255, 130, 110, 0.85), 0 0 12px rgba(224, 98, 79, 0.3); }
.btn.green { color: #cdf3b6; background: linear-gradient(180deg, #1f3218, #0f190b); box-shadow: inset 0 0 0 1px rgba(127, 207, 106, 0.5), 0 2px 6px rgba(0, 0, 0, 0.55); }
.btn.green:hover:not(:disabled) { background: linear-gradient(180deg, #284020, #142010); box-shadow: inset 0 0 0 1px rgba(160, 230, 140, 0.85), 0 0 12px rgba(127, 207, 106, 0.3); }
input:not([type=range]):not([type=checkbox]):not([type=radio]), select, textarea {
  font-family: var(--serif); color: var(--ink); background: rgba(0, 0, 0, 0.45); border: 0; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.3);
}
input:not([type=range]):not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus {
  border: 0; box-shadow: inset 0 0 0 1px rgba(232, 196, 122, 0.8), 0 0 10px rgba(232, 196, 122, 0.2);
}
input::placeholder { color: #7c766c; }

/* ---------------------------------------------------------------- bars: glossy, rounded */
.bar { border: 0; border-radius: 4px; background: rgba(0, 0, 0, 0.62); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9), inset 0 1px 2px rgba(0, 0, 0, 0.7); }
.bar > div { border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.bar.hp > div { background: linear-gradient(180deg, #ff5f55, #b2201b); }
.bar.hp.ally > div { background: linear-gradient(180deg, #74d36a, #2c7a26); }
.bar.xp > div { background: linear-gradient(180deg, #ffd27a, #c97f16); }

/* ---------------------------------------------------------------- portraits: a metal ring */
.portrait { border: 0; padding: 3px; background: var(--metal); box-shadow: 0 0 0 1px #000, 0 4px 12px rgba(0, 0, 0, 0.6); }

/* ---------------------------------------------------------------- windows */
.panel { padding: 16px 18px 16px; }
.panel .hd { border-bottom: 1px solid rgba(201, 162, 90, 0.24); }
.panel .hd h2 { font-size: 21px; }
.panel .hd .t { color: var(--ink-faint); font-style: normal; }
.panel .greet { color: #d8cfbf; }
.panel .close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 7px; font-size: 18px; color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.3); }
.panel .close:hover { color: #fff; background: rgba(224, 98, 79, 0.25); box-shadow: inset 0 0 0 1px rgba(255, 130, 110, 0.7); }
html:not(.touch) .panel .hd { margin: -16px -18px 14px; padding: 14px 18px 12px; border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, rgba(201, 162, 90, 0.12), rgba(201, 162, 90, 0)); }
.tabs { border-bottom: 1px solid rgba(201, 162, 90, 0.24); gap: 3px; }
.tab { font-family: var(--caps); color: var(--ink-dim); border-radius: 7px 7px 0 0; }
.tab:hover { color: #f4dfae; }
.tab.on { color: #ffe2a8; border-color: transparent; background: linear-gradient(180deg, rgba(232, 196, 122, 0.2), rgba(232, 196, 122, 0.04));
  box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.4); }
.li { border-radius: 6px; background: rgba(255, 255, 255, 0.03); }
.li:hover { border-color: rgba(201, 162, 90, 0.4); background: rgba(232, 196, 122, 0.07); }
.li .ico { border: 0; border-radius: 6px; background: var(--slot); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.3); }
.dg { border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.22); }
details.news { border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.22); }
/* gear and bag slots: an MMO's slot, its rarity on its edge */
.slot { border-radius: 8px; background: var(--slot); border-color: rgba(201, 162, 90, 0.35); box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.05), 0 2px 5px rgba(0, 0, 0, 0.5); }
.slot:hover { border-color: rgba(232, 196, 122, 0.85); box-shadow: 0 0 12px rgba(232, 196, 122, 0.25), 0 2px 5px rgba(0, 0, 0, 0.5); }
.slot.empty { background: radial-gradient(circle at 50% 40%, #17171c, #09090c); border-color: rgba(201, 162, 90, 0.2); }
.cell { border-radius: 7px; background: var(--slot); border-color: rgba(201, 162, 90, 0.22); }
.cell.it { border-color: rgba(201, 162, 90, 0.5); }
.cell.it:hover { box-shadow: 0 0 12px rgba(232, 196, 122, 0.35); }
.cell.common { border-color: #6f6a62; } .cell.magic { border-color: #4d6be0; } .cell.rare { border-color: #d2b13a; } .cell.epic { border-color: #9a52e6; }
.plus { border-radius: 5px; }

/* ---------------------------------------------------------------- tooltips, menus, news, boxes */
/* the comparison's cards: solid, the equipped one as clear as the other (style.css let the window show through it) */
.tcard { border: 0; border-radius: 8px; background: linear-gradient(180deg, #1e1e26, #0c0c10); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.32), 0 10px 26px rgba(0, 0, 0, 0.75); }
.tcard.eq { opacity: 1; background: linear-gradient(180deg, #17171d, #09090c); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.18), 0 10px 26px rgba(0, 0, 0, 0.75); }
.tcard .eqh, .tdiff { border-color: rgba(201, 162, 90, 0.24); }
.tip .tn { font-family: var(--caps); font-weight: 400; font-size: 15.5px; color: #f6e2b2; }
.tip .tk, .tip .td { color: var(--ink-faint); }
.ctx { padding: 5px; }
.ctx .ch { font-family: var(--caps); border-bottom: 1px solid rgba(201, 162, 90, 0.24); }
.ctx button { font-family: var(--serif); border-radius: 6px; }
.ctx button:hover { background: rgba(232, 196, 122, 0.12); }
.toast { border: 0; border-radius: 9px; background: linear-gradient(180deg, rgba(27, 27, 34, 0.94), rgba(10, 10, 14, 0.95)); box-shadow: var(--hair), 0 8px 22px rgba(0, 0, 0, 0.6); }
.toast.good { box-shadow: inset 0 0 0 1px rgba(127, 207, 106, 0.55), 0 8px 22px rgba(0, 0, 0, 0.6); }
.toast.bad { box-shadow: inset 0 0 0 1px rgba(224, 98, 79, 0.6), 0 8px 22px rgba(0, 0, 0, 0.6); }
#modal { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.72)); }
.modal-box h2 { font-weight: 400; }
.modal-box h2.win { color: #ffd98a; text-shadow: 0 0 22px rgba(255, 150, 60, 0.55), 0 3px 8px #000; }
.modal-box .flav { color: var(--ink-faint); }
#conn { background: linear-gradient(180deg, #6a1e17, #3e100c); font-family: var(--caps); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6); }
#turn-banner { font-family: var(--caps); font-weight: 400; color: #ffe2a8; text-shadow: 0 0 26px rgba(255, 120, 40, 0.7), 0 4px 10px #000; }

/* ---------------------------------------------------------------- the door */
/* the owner's title picture's logo over a pane of glass the town shows through, framed (the owner, 4 November 2026:
   "burda sadece hall of ash yazisini bu sekilde birak, arka planini falan seffaf yap", then, of the box with no pane
   at all: "tam seffaf yapmissin. bi ara oldugu gibi yap. seffaf ama bi cerceve gibi", and of the old pane's colour:
   "arka plan suan iyi fakat o lacivertimsi koyulugu goruyor musun ondan istiyorum"). The old panes' navy-leaning
   dark (--glass: blue a few points over red, lighter at the top) at two thirds of their thickness: a little more blue
   in the glass than theirs, so the town's warm lanterns through it still come out as that navy dark (measured against
   the owner's screenshot of the old pane: the same tone and darkness, the town still showing). Its gold corners and
   a gold hairline a little brighter than the other panes' keep it a frame; the logo's own shadow lifts it off the roofs */
.login-box { background: linear-gradient(180deg, rgba(24, 24, 36, 0.66), rgba(7, 9, 17, 0.7));
  box-shadow: inset 0 0 0 1px rgba(226, 185, 104, 0.55), inset 0 1px 0 rgba(255, 236, 200, 0.1), var(--lift); }
.login-box h1.logo img { filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.85)); }
.ccard { border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.25); }
.ccard:hover { border: 0; background: rgba(232, 196, 122, 0.07); box-shadow: inset 0 0 0 1px rgba(232, 196, 122, 0.6); }
.ccard.on { border: 0; background: rgba(255, 138, 76, 0.12); box-shadow: inset 0 0 0 1.5px var(--ember), 0 0 18px rgba(255, 122, 61, 0.35); }

/* ================================================================ the town's HUD on a computer */
html:not(.touch) #me-frame { left: 16px; top: 14px; min-width: 300px; padding: 12px 16px 12px 12px; gap: 14px; }
#me-frame .nm { font-family: var(--caps); font-size: 19px; color: #f6e7c4; }
#me-frame .cl { color: var(--ink-dim); font-size: 13.5px; }
#me-frame .swap { border-radius: 6px; }
#me-frame .buff { display: inline-flex; align-items: center; gap: 5px; margin: 5px 6px 0 0; padding: 2px 8px 2px 4px; border-radius: 10px; font-size: 12px; color: #ffe3a0;
  background: rgba(255, 210, 122, 0.08); box-shadow: inset 0 0 0 1px rgba(232, 196, 122, 0.3); }
#me-frame .buff[hidden] { display: none; }
#me-frame .pts { color: #9fe28c; font-style: normal; font-size: 12.5px; }
/* experience along the bottom edge of the screen, in twenty steps, its words on its tip */
html:not(.touch) #me-frame .bar.xp { position: fixed; left: 0; right: 0; bottom: 0; height: 9px; margin: 0; z-index: 4; border-radius: 0;
  background: rgba(0, 0, 0, 0.78); box-shadow: inset 0 1px 0 rgba(201, 162, 90, 0.55); }
html:not(.touch) #me-frame .bar.xp > div { border-radius: 0; margin-top: 1px; height: calc(100% - 1px); }
html:not(.touch) #me-frame .bar.xp::after { content: ''; position: absolute; inset: 1px 0 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 1px), rgba(0, 0, 0, 0.75) calc(5% - 1px) 5%); }
/* the purse: soulshards, embers, keys and fragments by the micro-menu, as an MMO keeps its gold by the bags */
html:not(.touch) #me-frame .res:not(.pots) { position: fixed; right: 16px; bottom: 72px; margin: 0; z-index: 4; padding: 6px 14px; gap: 4px 14px;
  border-radius: 9px; background: var(--glass); box-shadow: var(--hair), var(--lift); font-size: 13.5px; }
#me-frame .res .shards, #me-frame .res > span { font-weight: 600; }
#me-frame .res.pots { gap: 2px 10px; font-size: 13px; }

/* the party under the hero, where an MMO keeps it (CSS anchors; elsewhere it stays in the right column) */
@supports (anchor-name: --a) {
  html:not(.touch) #me-frame { anchor-name: --me-frame; }
  html:not(.touch) #party-frame { position: fixed; position-anchor: --me-frame; top: calc(anchor(bottom) + 10px); left: anchor(left); width: 250px; z-index: 2; }
}
.pm { border-radius: 9px; }
.pm .nm { font-family: var(--caps); font-size: 14px; color: #f1e3c2; }
.pm .portrait, .pm img { border-radius: 50%; }

/* the wallet and the bounties at the top right */
html:not(.touch) #right-col { right: 16px; top: 14px; width: 270px; }
#wallet-chip { border: 0; border-radius: 10px; padding: 9px 12px; color: #f4dfae; background: var(--glass); box-shadow: var(--hair), var(--lift); }
#wallet-chip:hover { border: 0; background: linear-gradient(180deg, rgba(40, 38, 46, 0.94), rgba(14, 14, 18, 0.95)); box-shadow: inset 0 0 0 1px rgba(232, 196, 122, 0.7), var(--lift); }
#wallet-chip b { font-family: var(--caps); font-weight: 400; letter-spacing: 0.06em; }
#quest-tracker { border: 0; border-radius: 10px; padding: 10px 12px; background: linear-gradient(180deg, rgba(16, 16, 20, 0.86), rgba(12, 12, 16, 0.78)); box-shadow: var(--hair), var(--lift); }
#quest-tracker:hover { border: 0; box-shadow: inset 0 0 0 1px rgba(232, 196, 122, 0.65), var(--lift); }
.qt-h { font-family: var(--caps); color: var(--gold); }
.qt-n { color: var(--ink); }
.qt-n em { font-family: var(--serif); font-weight: 600; color: #f3d68e; }
.qt-b { height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.6); }
.qt-b > div { border-radius: 2px; background: linear-gradient(90deg, #d08a1c, #ffd27a); }
.qt-b.weekly > div { background: linear-gradient(90deg, #8a52e6, #d0a8ff); }
#queue-banner, #recover { border: 0; border-radius: 10px; background: var(--glass); box-shadow: var(--hair), var(--lift); font-family: var(--caps); }

/* the chat at the bottom left */
html:not(.touch) #chat { left: 16px; bottom: 18px; padding: 8px; }
#chat { background: linear-gradient(180deg, rgba(14, 14, 18, 0.82), rgba(9, 9, 12, 0.9)); }
#chat-log { font-size: 13.5px; }
#chat-log .who { color: #f3d68e; }
#chat-log .sys { color: #e8c47a; font-style: normal; }
#chat-in { border-radius: 7px; }
/* its channels as small tabs along the top of the pane (js/chatbox.js), in the windows' capitals; the one chosen
   gold-lit as a window's tab is (.tab.on), open to the log under it; a count as the micro-menu's badge, a dot in gold */
#chat-tabs { margin: -2px -2px 6px; padding: 0 2px; border-bottom-color: rgba(201, 162, 90, 0.26); }
.ctab { color: var(--ink-faint); letter-spacing: 0.05em; border-radius: 6px 6px 0 0; text-shadow: 0 1px 1px #000; }
.ctab:hover { color: #f4dfae; }
.ctab.on { color: #ffe2a8; background: linear-gradient(180deg, rgba(232, 196, 122, 0.2), rgba(232, 196, 122, 0.05));
  box-shadow: inset 0 1px 0 rgba(232, 196, 122, 0.55), inset 1px 0 0 rgba(201, 162, 90, 0.4), inset -1px 0 0 rgba(201, 162, 90, 0.4); }
.ct-n { font-family: var(--serif); background: linear-gradient(180deg, #ff7a4a, #d8401c); box-shadow: 0 0 0 1px #0c0c10; text-shadow: none; }
.ct-n.dot { background: #e8c47a; box-shadow: 0 0 6px rgba(232, 196, 122, 0.75); }
/* (Chinese: two characters a tab, unspaced, and a touch larger, small capitals being smaller than their size; the id
   lifts these over the fight's smaller tabs, style.css) */
html[lang="zh-CN"] #chat .ctab { letter-spacing: 0; }
html[lang="zh-CN"]:not(.touch) #chat .ctab { font-size: 12px; }
html[lang="zh-CN"]:not(.touch) body.in-battle #chat .ctab { font-size: 11px; }

/* the emotes: a hotbar in the middle of the bottom */
html:not(.touch) #emotes { left: 50%; bottom: 18px; transform: translateX(-50%); gap: 5px; padding: 6px; border-radius: 10px; background: var(--glass); box-shadow: var(--hair), var(--lift); }
#emotes .btn { opacity: 1; }
html:not(.touch) #emotes .btn { width: 42px; height: 42px; padding: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--slot); position: relative; }
html:not(.touch) #emotes .btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#emotes .btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html.touch #emotes .btn svg { display: none; }
/* (a narrow window has no room between the chat and the micro-menu: the hotbar over the chat, where the emotes were) */
@media (max-width: 1199px) {
  html:not(.touch) #emotes { left: 16px; bottom: 228px; transform: none; }
}

/* the windows' micro-menu at the bottom right: icons, their keys in a corner, their names on their tips */
html:not(.touch) #menu-btns { right: 16px; bottom: 18px; gap: 4px; padding: 5px; border-radius: 10px; background: var(--glass); box-shadow: var(--hair), var(--lift); }
html:not(.touch) #menu-btns .btn { position: relative; width: 38px; height: 38px; padding: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--slot); }
html:not(.touch) #menu-btns .btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html:not(.touch) #menu-btns .btn kbd { position: absolute; right: 2px; bottom: 1px; margin: 0; padding: 0 2px; font-size: 8.5px; line-height: 11px; background: rgba(0, 0, 0, 0.55); box-shadow: none; color: #c9bfae; }
html:not(.touch) #menu-btns .btn.on, html:not(.touch) #menu-btns .btn:hover { color: #ffcf9a; }
#menu-btns .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html.touch #menu-btns .btn svg { display: none; }
.mbadge { background: #4a4a55; color: #fff; box-shadow: 0 0 0 1.5px #0c0c10; }
.mbadge.new { background: linear-gradient(180deg, #ff7a4a, #d8401c); }

/* ================================================================ a fight on a computer */
/* the chamber and the turn order at the top right */
html:not(.touch) #b-top { left: auto; right: 16px; top: 14px; transform: none; text-align: left; padding: 10px 14px 12px; border-radius: 10px;
  background: var(--glass); box-shadow: var(--hair), var(--lift); max-width: min(520px, 40vw); }
#b-title { font-family: var(--caps); font-size: 15.5px; letter-spacing: 0.04em; color: #f6e2b2; margin-bottom: 9px; }
html:not(.touch) #b-order { justify-content: flex-start; gap: 6px; flex-wrap: wrap; }
.oc { background: none; border: 0; padding: 0 0 2px; width: 56px; border-radius: 8px; }
.oc img { display: block; margin: 0 auto; border-radius: 50%; padding: 2px; background: var(--metal-foe); box-shadow: 0 0 0 1px #000, 0 3px 8px rgba(0, 0, 0, 0.6); }
.oc.t0 img { background: var(--metal-ally); }
.oc.t0, .oc.t1 { border-bottom: 0; }
.oc.cur { transform: none; box-shadow: none; }
.oc.cur img { background: var(--metal); box-shadow: 0 0 0 1px #000, 0 0 16px rgba(255, 138, 76, 0.85); }
.oc.boss img { background: var(--metal); }
.oc .n { margin-top: 3px; font-size: 10.5px; color: var(--ink-dim); }
.oc .bar { height: 4px; margin: 3px 6px 0; }
.heroic-tag { border-radius: 4px; }
/* Flee and Settings in the bottom right corner, by End Turn */
html:not(.touch) #b-flee { top: auto; right: 16px; bottom: 18px; width: 104px; }
html:not(.touch) #b-set { top: auto; right: 16px; bottom: 56px; width: 104px; }
/* the chat in the corner below the chamber's floor; a window narrower than the bar and the chat side by side
   lifts it over the bar */
@media (max-width: 1599px) {
  html:not(.touch) body.in-battle #chat { bottom: 126px; }
}
/* the bar in the middle of the bottom, no longer centred by a transform: the hero's frame inside it may leave it for the corner */
html:not(.touch) #b-bar { left: 0; right: 0; bottom: 18px; margin: 0 auto; width: fit-content; transform: none; padding: 9px 12px; gap: 12px; align-items: center;
  border: 0; border-radius: 12px; background: var(--glass); box-shadow: var(--hair), var(--lift); }
/* the hero's frame at the top left: portrait, health, actions and steps, the troubles and blessings under them */
html:not(.touch) #b-status { position: fixed; left: 16px; top: 14px; width: 300px; padding: 12px 14px 12px 88px; min-height: 70px; border-radius: 10px;
  background: var(--glass); box-shadow: var(--hair), var(--lift); color: var(--ink-dim); }
html:not(.touch) #b-status .bst-p { position: absolute; left: 12px; top: 12px; }
#b-status .bst-p { border-radius: 50%; }
/* (.who is also the party window's row, style.css: not its box here) */
#b-status .who { display: block; padding: 0; border: 0; background: none; font-family: var(--caps); font-size: 16px; color: #f6e7c4; }
#b-status .bar.hp { height: 15px; margin: 6px 0 5px; }
#b-status .bar.hp span { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 15px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px #000; }
#b-status .pips { margin-top: 4px; }
html:not(.touch) #b-status .bst-p { width: 62px; height: 62px; }
html.touch #b-status .bst-p { display: none; }
/* the party under the hero's frame (CSS anchors; elsewhere a little lower than the frame can reach) */
html:not(.touch) #b-party { left: 16px; top: 156px; width: 230px; }
@supports (anchor-name: --a) {
  html:not(.touch) #b-status { anchor-name: --b-status; }
  html:not(.touch) #b-party { position: fixed; position-anchor: --b-status; top: calc(anchor(bottom) + 10px); left: anchor(left); }
}
.bpm { border: 0; border-radius: 9px; background: var(--glass); box-shadow: var(--hair), 0 6px 16px rgba(0, 0, 0, 0.5); }
.bpm:hover { border: 0; box-shadow: inset 0 0 0 1px rgba(232, 196, 122, 0.7), 0 6px 16px rgba(0, 0, 0, 0.5); }
.bpm.cur { border: 0; box-shadow: inset 0 0 0 1px rgba(255, 138, 76, 0.85), 0 0 14px rgba(255, 122, 61, 0.4); }
.bpm img { border: 0; padding: 2px; background: var(--metal-ally); }
.bpm .bpn { font-family: var(--caps); color: #cfe6ff; }
.pip { border: 0; box-shadow: inset 0 0 0 1px #000; }
.pip.mv { background: radial-gradient(circle at 40% 35%, #bfe0ff, #3a7ec0); }
.pip.act { background: radial-gradient(circle at 40% 35%, #ffe2a0, #c98a24); }
/* the action bar's slots */
.ab { border: 0; border-radius: 9px; background: var(--slot); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), inset 0 0 0 2px rgba(201, 162, 90, 0.38), 0 2px 6px rgba(0, 0, 0, 0.55); }
.ab > .abimg, .ab > .abglyph { border-radius: 9px; }
.ab:hover { border: 0; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgba(232, 196, 122, 0.85), 0 0 12px rgba(232, 196, 122, 0.3); }
.ab.sel { border: 0; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--ember), inset 0 0 16px rgba(255, 138, 76, 0.35), 0 0 18px rgba(255, 122, 61, 0.6); }
.ab.ult { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #e8b84a, 0 0 12px rgba(255, 190, 60, 0.35); }
.ab .k { font-family: var(--serif); font-weight: 700; font-size: 10.5px; color: #fff; left: 5px; top: 3px; }
.ab .cd { border-radius: 9px; font-family: var(--serif); font-weight: 700; font-size: 20px; background: rgba(6, 6, 9, 0.68); }
.ab .cnt { font-family: var(--serif); font-weight: 700; }
.ab.pot { background: radial-gradient(circle at 40% 35%, #3a1a18, #0c0c11 75%); }
.ab.eye { color: #c9bfae; }
.ab.eye.on { color: #ffb08a; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #ff8a6a, 0 0 14px rgba(255, 110, 80, 0.5); }
.ab-sep { background: linear-gradient(180deg, transparent, rgba(201, 162, 90, 0.5), transparent); }
/* the turn's time as a bar over the action bar, End Turn as an MMO's big button */
html:not(.touch) #b-side { flex-direction: row; align-items: center; gap: 10px; }
html:not(.touch) #b-timer { position: absolute; left: 14px; right: 14px; top: -20px; height: 8px; border: 0; border-radius: 4px; background: rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 0 0 1px #000, 0 0 0 1px rgba(201, 162, 90, 0.35); overflow: hidden; }
#b-timer > div { border-radius: 4px; background: linear-gradient(90deg, #e8622a, #ffb27a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
#b-timer > div.bank { background: linear-gradient(90deg, #8a2a14, #ff7a52); }
html:not(.touch) #b-end { min-width: 150px; min-height: 56px; }
#b-end.mine { color: #1f0d04; text-shadow: none; background: linear-gradient(180deg, #ff9a5c, #d4561f);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 168, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 22px rgba(255, 110, 50, 0.45), 0 4px 10px rgba(0, 0, 0, 0.6); }
#b-end.mine:hover:not(:disabled) { color: #1f0d04; background: linear-gradient(180deg, #ffab72, #e2632a); }
#b-end.mine kbd { color: rgba(31, 13, 4, 0.75); background: rgba(31, 13, 4, 0.12); box-shadow: none; }

/* ================================================================ the zoom on a computer (js/zoom.js, 28 October 2026)
   The owner: "zoom in zoom out eklenecek". A small pane at the right edge, as wide as Flee and Settings: − · the reading ·
   +, the reading a button that puts it back to 100%. In town it stands above the purse (CSS anchors; elsewhere where the
   purse's top is), in a fight above Settings. It belongs to the HUD it is in (#hud, #bhud: zoom.js moves it), so a window
   opened over it covers it. A touch screen never shows it: a pinch zooms there (js/touch.js). */
#zoom { position: fixed; right: 16px; display: flex; align-items: center; gap: 2px; width: 104px; padding: 3px; border-radius: 9px;
  background: var(--glass); box-shadow: var(--hair), var(--lift); }
#hud > #zoom { bottom: 109px; }
#bhud > #zoom { bottom: 90px; }
@supports (anchor-name: --a) {
  html:not(.touch) #me-frame .res:not(.pots) { anchor-name: --purse; }
  #hud > #zoom { position-anchor: --purse; bottom: calc(anchor(top, 101px) + 8px); }
}
#zoom .btn { height: 28px; padding: 0; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
#zoom .zm-b { flex: none; width: 28px; background: var(--slot); }
#zoom .zm-b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#zoom .zm-v { flex: 1; min-width: 0; font-family: var(--serif); font-weight: 600; font-size: 12.5px; letter-spacing: 0; font-variant-numeric: tabular-nums;
  color: #f3d68e; background: none; box-shadow: none; }
#zoom .zm-v.at { color: var(--ink-dim); }
#zoom .zm-v:hover:not(:disabled) { color: #ffe2a8; background: rgba(232, 196, 122, 0.08); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.4); }
#zoom .btn:disabled { opacity: 0.32; }
html.touch #zoom { display: none; }