/* =====================================================================
   SCROLL OF MANA — theme_mana.css
   Storybook / watercolour fairy-tale theme in the mood of Legend of Mana
   (PS1): cream parchment, honey-gold filigree with leafy vines and little
   gems, rounded elegant windows, luminous soft palette. Loaded LAST
   (after title_chars.css and title_mana.css): overrides the legacy tokens,
   then the components. No legacy CSS file is edited. Asset paths:
   ../assets/ui/mana/ (+ ../assets/ui/logo/ for the menu wordmark).
   The logo itself (.som-logo) lives in title_mana.css; §13 also styles
   the plain-text loader that main.js rebuilds when the markup is missing.
   Fonts (one index.html <link>, before this sheet; Pixelify Sans / Silkscreen stay for the pixel captions and the canvas):
   https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..700&family=Alegreya+Sans+SC:wght@500;700;800&family=Cinzel+Decorative:wght@700;900&family=Pixelify+Sans:wght@400..700&family=Silkscreen:wght@400;700&display=swap
   ===================================================================== */

/* ---------- 1. tokens ---------- */
:root {
  /* paper */
  --mn-paper-hi: #fffaf0;
  --mn-paper: #f8efd9;
  --mn-paper-2: #f1e2bf;
  --mn-paper-3: #e6d0a1;
  --mn-well: #efe1c0;
  /* ink (text on paper) */
  --mn-ink: #3b2a1f;
  --mn-ink-2: #6b5442;
  --mn-ink-3: #7a6650;           /* 4.6:1 on --mn-paper (dim lines, labels) */
  /* gold leaf */
  --mn-gold-hi: #fff4c2;
  --mn-gold: #e2b65a;
  --mn-gold-mid: #c9953a;
  --mn-gold-deep: #8a5f1e;
  --mn-line: #d8bd86;            /* soft gold rule on paper */
  /* nature accents */
  --mn-leaf-hi: #c8e89a;
  --mn-leaf: #6aa84f;
  --mn-leaf-deep: #2f7a3a;
  --mn-sky: #8fd0d8;
  --mn-sky-deep: #2f8592;
  --mn-rose: #e8909a;
  --mn-rose-deep: #b23a52;
  --mn-lav: #b9a6dc;
  --mn-lav-deep: #6a4fb0;
  --mn-sun: #ffd98a;
  /* rarity: ink on parchment (the world keeps D.RARITY's bright colours) */
  --r-comum: #5a4636;
  --r-magico: #2c5fc9;
  --r-raro: #a26600;
  --r-excelente: #23803a;
  --r-lendario: #c2410c;
  /* shadows: warm, never black */
  --mn-shadow: 0 10px 26px rgba(74, 46, 20, .32), 0 2px 6px rgba(74, 46, 20, .18);
  --mn-shadow-sm: 0 2px 0 rgba(138, 95, 30, .35), 0 4px 10px rgba(74, 46, 20, .18);
  --mn-focus: 0 0 0 2px var(--mn-paper-hi), 0 0 0 4px var(--mn-sky-deep);
  --mn-paper-tex: url(../assets/ui/mana/paper.webp);
  /* fonts */
  --f-title: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --f-ui: "Alegreya", Georgia, "Times New Roman", serif;
  --f-num: "Alegreya Sans SC", "Alegreya", Georgia, serif;
  --f-pix: "Silkscreen", "Pixelify Sans", monospace;   /* only over pixel icons: key caps, stack counts */

  /* legacy tokens → storybook values (every rule that uses them follows) */
  --void: #f3e6c8;
  --panel: #f8efd9;
  --panel2: #fffaf0;
  --edge: #d8bd86;
  --bronze: #c9953a;
  --gold: #b8862e;
  --gold2: #8a5a12;
  --parch: #3b2a1f;
  --dim: #7a6650;
  --ink: rgba(255, 250, 236, .9);
  --well: #efe1c0;
  --hp: #d8434f;
  --hp2: #ff8a8a;
  --mp: #3d7fd8;
  --mp2: #8cc0ff;
  --xp: #e2b65a;
  --exc: #23803a;
  --mag: #2c5fc9;
  --rare: #a26600;
  --uni: #c2410c;
  --danger: #b8364a;
  --notch: none;
  color-scheme: light;
}

/* ---------- 2. base ---------- */
html, body { background: var(--void); -webkit-font-smoothing: antialiased; }
#ui { font: calc(15px * var(--txt))/1.35 var(--f-ui); color: var(--mn-ink); font-variant-numeric: lining-nums; }
:where(#ui) button { font-family: var(--f-ui); }
.noscript { background: var(--void); color: var(--mn-ink); font-family: var(--f-ui); }
.dim { color: var(--mn-ink-3); }
kbd, .key {
  font: 400 calc(8px * var(--txt))/1 var(--f-pix);
  color: var(--mn-ink);
  background: linear-gradient(180deg, var(--mn-paper-hi), var(--mn-paper-2));
  border: 1px solid var(--mn-gold-mid);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(138, 95, 30, .35);
  text-shadow: none;
}
.backdrop { background: rgba(90, 64, 40, .28); backdrop-filter: blur(1.5px) saturate(.9); }

/* ---------- 3. surfaces: parchment panel with gilded frame + vine-corner filigree ---------- */
.pnl {
  background:
    var(--mn-paper-tex) 0 0 / 256px 256px,
    radial-gradient(ellipse 120% 90% at 50% 30%, var(--mn-paper-hi), var(--mn-paper) 60%, var(--mn-paper-2));
  border: 2px solid var(--mn-gold-mid);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px var(--mn-gold-hi),
    inset 0 0 0 4px rgba(255, 250, 236, .55),
    inset 0 0 0 5px rgba(201, 149, 58, .45),
    inset 0 0 26px rgba(176, 124, 52, .22),
    var(--mn-shadow);
  color: var(--mn-ink);
}
/* corner filigree: a 9-slice SVG drawn OUTSIDE the box (never changes layout) */
.pnl::after {
  inset: -7px;
  border: 30px solid transparent;
  border-image: url(../assets/ui/mana/frame-corners.svg) 32 / 30px stretch;
  background: none;
  border-radius: 0;
}
/* windows and title panes: 42px corners (gem ≈ 11px), so they read as gilded storybook frames rather than web cards */
.win.pnl::after, .tg-pane.pnl::after, .tg-auth.pnl::after { inset: -10px; border-width: 42px; border-image-width: 42px; }

/* window header: title centred between leafy flourishes, vine divider beneath */
.win-h {
  height: 42px;
  padding: 0 6px 0 12px;
  background: linear-gradient(180deg, rgba(143, 208, 216, .22), rgba(200, 232, 154, .12) 70%, transparent);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  box-shadow: none;
}
.win-h::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -6px;
  height: 14px;
  background: url(../assets/ui/mana/divider.svg) center / 100% 14px no-repeat;
  pointer-events: none;
}
.win-t {
  font: 700 calc(17px * var(--txt-h))/1.1 var(--f-title);
  color: var(--mn-gold-deep);
  text-align: center;
  letter-spacing: .5px;
  text-shadow: 0 1px 0 var(--mn-paper-hi), 0 0 12px rgba(255, 217, 138, .7);
}
.win-t::before { display: none; }
/* Cinzel Decorative draws its lower case as decorative small caps (a looped "h", joined "oo"): every heading in it is set in CAPITALS for readability; only the logo keeps mixed case */
.win-t, .tg-pane-h, .t-h, .cs-pname, .t-d-name, .mm-name, .qt-head span, .menu-crest span, .banner-n, .death-h, .online-dialog h2, .w-inv .win-t, .w-inv .inv-bag-title, .toast.big, html body #ae-net .nu-lh { text-transform: uppercase; letter-spacing: .04em; word-spacing: .22em; }   /* word gap: the capital R's tail ran into the next word ("ESCOLHERSERVIDOR") */
.win-k { font-size: calc(8px * var(--txt)); color: var(--mn-ink-2); }
.win-x {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff4f4, #f2b0ba 45%, #c25a6e);
  border: 2px solid var(--mn-gold-mid);
  box-shadow: inset 0 0 0 1px var(--mn-gold-hi), 0 1px 0 rgba(138, 95, 30, .4);
}
.win-x img { width: 14px; height: 14px; filter: brightness(0) invert(1) drop-shadow(0 1px 0 #8e3248); }
.win-x:hover { background: radial-gradient(circle at 38% 32%, #fff, #f6c2ca 45%, #d06a7e); border-color: var(--mn-gold); }
.win-x:focus-visible { box-shadow: var(--mn-focus); }
.win-b { padding: 14px 16px 16px; scrollbar-color: var(--mn-gold) rgba(201, 149, 58, .12); }
.win-b::-webkit-scrollbar, .shop-list::-webkit-scrollbar, .t-list::-webkit-scrollbar, .chat-l::-webkit-scrollbar, .sheet-b::-webkit-scrollbar, .t-scroll::-webkit-scrollbar { width: 10px; }
.win-b::-webkit-scrollbar-track, .shop-list::-webkit-scrollbar-track, .t-list::-webkit-scrollbar-track, .chat-l::-webkit-scrollbar-track, .sheet-b::-webkit-scrollbar-track, .t-scroll::-webkit-scrollbar-track { background: rgba(201, 149, 58, .12); border-radius: 8px; }
.win-b::-webkit-scrollbar-thumb, .shop-list::-webkit-scrollbar-thumb, .t-list::-webkit-scrollbar-thumb, .chat-l::-webkit-scrollbar-thumb, .sheet-b::-webkit-scrollbar-thumb, .t-scroll::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--mn-gold), var(--mn-gold-mid)); border: 2px solid var(--mn-paper); border-radius: 8px; }
.win.pop { animation: mnPop .22s cubic-bezier(.2, 1.4, .5, 1); }

/* section headings inside windows */
.sec { border-bottom: 0; padding-bottom: 4px; background: linear-gradient(90deg, var(--mn-gold-mid), rgba(201, 149, 58, 0)) 0 100% / 100% 1px no-repeat; }
.sec, .sec > *:first-child { font-family: var(--f-num); color: var(--mn-leaf-deep); letter-spacing: .5px; text-shadow: none; }

/* inner "cards" (rows, entries, stat boxes) that were black glass → light paper slips */
.sr, .sc, .qcard, .wr, .skr, .cw-st, .t-save, .t-detail, .zen, .itip-d, .skb, .tag, .dlq-row, .qw-row, .qw-chain, .qv {
  background: rgba(255, 250, 236, .72);
  border-color: var(--mn-line);
  border-radius: 8px;
  color: var(--mn-ink);
  text-shadow: none;
}
.sr:hover, .wr:hover, .skr:hover, .dlq-row:hover:not(:disabled), .qw-row:hover { background: #fffdf6; border-color: var(--mn-gold); }
.qw-row.sel { background: linear-gradient(90deg, rgba(255, 217, 138, .45), rgba(255, 250, 236, .8)); border-color: var(--mn-gold-mid); }
.qcard { border-left: 4px solid var(--mn-gold); }

/* ---------- 4. buttons: cream plaques, gold ribbon for primary actions ---------- */
.btn {
  min-height: 34px;
  padding: 0 16px;
  font: 700 calc(15px * var(--txt))/1 var(--f-ui);
  letter-spacing: .2px;
  color: var(--mn-ink);
  text-shadow: 0 1px 0 rgba(255, 252, 240, .8);
  background: linear-gradient(180deg, #fffdf6 0, #fbf0d6 45%, #f0dcae 100%);
  border: 1.5px solid var(--mn-gold-mid);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(201, 149, 58, .25), var(--mn-shadow-sm);
  clip-path: none;
  transition: transform .12s, box-shadow .12s, background-color .12s;
}
.btn:hover { color: var(--mn-gold-deep); border-color: var(--mn-gold); background: linear-gradient(180deg, #fffef8 0, #fff3cf 45%, #f7d98f 100%); box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(255, 217, 138, .45), var(--mn-shadow-sm); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(138, 95, 30, .3), 0 1px 0 rgba(138, 95, 30, .3); }
.btn:focus-visible { outline: none; border-color: var(--mn-gold); box-shadow: var(--mn-focus); }
.btn:disabled { opacity: 1; filter: none; color: #b3a48c; background: #efe6d2; border-color: #d9cbb0; box-shadow: none; text-shadow: none; }
.btn:disabled:hover { color: #b3a48c; border-color: #d9cbb0; }
.btn img { filter: drop-shadow(0 1px 0 rgba(255, 250, 236, .8)); }
.btn.sm { min-height: 28px; padding: 0 12px; font-size: calc(13px * var(--txt)); }
.btn.big { min-height: 50px; font: 700 calc(21px * var(--txt-h))/1 var(--f-ui); letter-spacing: .3px; }

/* gold: honey-gold plaque (dark ink text) */
.btn.gold {
  color: #4a2a0e;
  text-shadow: 0 1px 0 rgba(255, 246, 204, .7);
  background: linear-gradient(180deg, #fff6cc 0, #f6d77e 28%, #e0ad4c 70%, #c08a36 100%);
  border-color: #8a5f1e;
  box-shadow: inset 0 1px 0 #fffbe6, inset 0 -3px 0 rgba(122, 82, 24, .35), 0 0 14px rgba(255, 217, 138, .55), var(--mn-shadow-sm);
}
.btn.gold:hover { color: #3a1e06; background: linear-gradient(180deg, #fffbe6 0, #ffe39a 28%, #ecbd5c 70%, #c99540 100%); box-shadow: inset 0 1px 0 #fffbe6, 0 0 0 3px rgba(255, 217, 138, .55), 0 0 22px rgba(255, 217, 138, .8), var(--mn-shadow-sm); }
.btn.gold:focus-visible { box-shadow: var(--mn-focus), 0 0 18px rgba(255, 217, 138, .7); }
/* big gold = the ribbon (forked tails drawn outside the box by a 9-slice SVG) */
.btn.gold.big, .btn.tg-prim {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-image: url(../assets/ui/mana/ribbon-gold.svg) 0 30 fill / 0 30px / 0 14px stretch;
  filter: drop-shadow(0 3px 2px rgba(122, 82, 24, .3)) drop-shadow(0 0 10px rgba(255, 224, 150, .45));
}
.btn.gold.big:hover, .btn.tg-prim:hover { background: none; box-shadow: none; filter: drop-shadow(0 3px 2px rgba(122, 82, 24, .3)) drop-shadow(0 0 16px rgba(255, 230, 160, .95)) brightness(1.05); }
.btn.gold.big:focus-visible, .btn.tg-prim:focus-visible { box-shadow: none; outline: none; filter: drop-shadow(0 0 0 var(--mn-sky-deep)) drop-shadow(0 3px 2px rgba(122, 82, 24, .3)) drop-shadow(0 0 3px #fffaf0) drop-shadow(0 0 4px var(--mn-sky-deep)); }
.btn.gold.big:disabled { filter: grayscale(.7) opacity(.6); }
.btn.gold:disabled, .btn.gold:disabled:hover { color: #a8977a; text-shadow: none; background: linear-gradient(180deg, #f6eedb, #ebdfc2); border-color: #d9c79f; box-shadow: none; }

.btn.red { color: #6a1f2c; background: linear-gradient(180deg, #fff3f3 0, #f8d0d6 50%, #e8a0ac 100%); border-color: var(--mn-rose-deep); }
.btn.red:hover { color: #4a0f1c; background: linear-gradient(180deg, #fff 0, #fbdade 50%, #f0b0bc 100%); border-color: #c25a6e; }
.btn.ghost { color: var(--mn-ink-2); background: rgba(255, 250, 236, .55); border-color: var(--mn-line); box-shadow: none; }
.btn.ghost:hover { color: var(--mn-ink); background: rgba(255, 250, 236, .9); border-color: var(--mn-gold-mid); }
.btn.toggle b { font: 700 calc(11px * var(--txt))/1 var(--f-num); color: var(--mn-leaf-deep); letter-spacing: .5px; }
.btn.toggle.off b { color: var(--mn-ink-3); }
.btn.on { border-color: var(--mn-gold); color: var(--mn-gold-deep); background: linear-gradient(180deg, #fffbe6, #ffe7a8); }
.btn.armed { color: #fff; border-color: var(--mn-rose-deep); background: linear-gradient(180deg, #e88a9a, #b23a52); text-shadow: 0 1px 0 #7a1f34; animation: armed .5s steps(2) infinite; }

/* ---------- 5. inputs, checkboxes, tabs ---------- */
.tg-in, .t-name {
  color: var(--mn-ink);
  font-family: var(--f-ui);
  background: #fffdf6;
  border: 1.5px solid #d2b98a;
  border-radius: 10px;
  box-shadow: inset 0 1px 3px rgba(120, 80, 30, .15);
  -webkit-font-smoothing: antialiased;
}
.tg-in::placeholder, .t-name::placeholder { color: #b3a48c; font-style: italic; }
.tg-in:focus, .t-name:focus { outline: none; border-color: var(--mn-sky-deep); box-shadow: inset 0 1px 3px rgba(120, 80, 30, .12), 0 0 0 3px rgba(143, 208, 216, .5); }
.tg-in:-webkit-autofill { -webkit-text-fill-color: var(--mn-ink); caret-color: var(--mn-ink); box-shadow: inset 0 0 0 60px #fffdf6; }
.tg-fld.bad .tg-in { border-color: var(--mn-rose-deep); box-shadow: 0 0 0 3px rgba(232, 144, 154, .35); }
.tg-lbl, .t-lbl { font: 700 calc(11px * var(--txt))/1 var(--f-num); letter-spacing: 1px; color: var(--mn-ink-2); }
.t-check { width: 18px; height: 18px; background: #fffdf6; border: 1.5px solid var(--mn-gold-mid); border-radius: 5px; box-shadow: inset 0 1px 2px rgba(120, 80, 30, .2); }
.t-legend-in:checked + .t-check, .tg-rem-in:checked + .t-check {
  background: var(--mn-leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4 5 8.8 9.6 3.4' fill='none' stroke='%23fffaf0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  border-color: var(--mn-leaf-deep);
  box-shadow: none;
}
.tg-rem { color: var(--mn-ink-2); }
.btn.tg-link { color: var(--mn-sky-deep); text-decoration-color: rgba(47, 133, 146, .5); }
.btn.tg-link:hover, .btn.tg-link:focus-visible { color: var(--mn-gold-deep); text-decoration-color: var(--mn-gold-deep); }

/* bookmark tabs */
.tg-tabs { background: linear-gradient(180deg, rgba(230, 208, 161, .55), rgba(230, 208, 161, .25)); border-bottom: 1.5px solid var(--mn-line); border-radius: 10px 10px 0 0; }
.tg-tabs::after { background: linear-gradient(90deg, transparent, var(--mn-gold), transparent); height: 2px; }
.tg-tab { font: 700 calc(15px * var(--txt))/1 var(--f-ui); color: var(--mn-ink-3); text-shadow: none; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, rgba(255, 250, 236, .2), rgba(201, 149, 58, .1)); }
.tg-tab + .tg-tab { box-shadow: inset 1px 0 0 var(--mn-line); }
.tg-tab:hover { color: var(--mn-ink); background: rgba(255, 250, 236, .5); }
.tg-tab.on { color: var(--mn-gold-deep); background: linear-gradient(180deg, var(--mn-paper-hi), rgba(255, 250, 236, .6)); text-shadow: 0 0 10px rgba(255, 217, 138, .8); }
/* compact (also over .btn.sm): the Ferreiro's 10 tabs keep 2 rows, as before the theme */
.shop-tabs .btn, .qw-tabs .btn, .shop-tabs .btn.sm, .qw-tabs .btn.sm { border-radius: 10px 10px 4px 4px; min-height: 28px; padding: 0 8px; font-size: calc(13px * var(--txt)); }
.shop-tabs .btn.on, .qw-tabs .btn.on { color: var(--mn-gold-deep); border-color: var(--mn-gold-mid); background: linear-gradient(180deg, #fffbe6, #ffe7a8); box-shadow: inset 0 2px 0 var(--mn-gold), var(--mn-shadow-sm); }
.tg-or { font: 700 calc(11px * var(--txt))/1 var(--f-num); color: var(--mn-ink-3); }
.tg-or::before, .tg-or::after { height: 1px; background: linear-gradient(90deg, transparent, var(--mn-gold-mid)); }

/* ---------- 6. bars ---------- */
.bar { height: 9px; background: rgba(230, 208, 161, .6); border: 1px solid rgba(138, 95, 30, .45); border-radius: 999px; box-shadow: inset 0 1px 2px rgba(120, 80, 30, .25), 0 1px 0 rgba(255, 252, 240, .8); }
.bar::after { display: none; }
.bar-f, .bar-t { border-radius: 999px; }
.bar.hp .bar-f { background: linear-gradient(180deg, #ffb4b8, #e05a66 50%, #b8364a); }
.bar.mp .bar-f { background: linear-gradient(180deg, #bfe0ff, #5a9ae8 50%, #2f62b8); }
.bar.quest .bar-f, .bar-f { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
.bar-txt { font: 700 calc(9px * var(--txt))/1 var(--f-num); color: var(--mn-ink); text-shadow: 0 0 2px #fffaf0, 0 0 2px #fffaf0; }
.qt.done .bar-f, .qcard.done .bar-f, .qw-chain.done .bar-f { background: linear-gradient(180deg, #d8f5a8, var(--mn-leaf) 55%, var(--mn-leaf-deep)); }

/* ---------- 7. tooltips: cream parchment, gold rules, rarity wash ---------- */
.tip-box, .itip {
  padding: 10px 12px 10px;
  font: calc(14px * var(--txt))/1.38 var(--f-ui);
  color: var(--mn-ink);
  background:
    var(--mn-paper-tex) 0 0 / 256px 256px,
    linear-gradient(180deg, var(--mn-paper-hi), #f6e8c8);
  border: 1.5px solid var(--mn-gold-mid);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--mn-gold-hi), inset 0 0 0 3px rgba(255, 250, 236, .6), inset 0 0 0 4px rgba(201, 149, 58, .35), 0 8px 22px rgba(70, 45, 20, .35);
}
.tip-t { font: 700 calc(16px * var(--txt))/1.2 var(--f-ui); color: var(--mn-gold-deep); text-shadow: none; }
.tip-s, .itip-lbl, .itip-dh { font: 700 calc(10px * var(--txt))/1.3 var(--f-num); color: var(--mn-ink-3); letter-spacing: .8px; }
.tip-l.dim, .tip-l.hint, .itip-s, .itip-h { color: var(--mn-ink-3); }
.tip-l.bad, .itip-r .bad, .itip-v .bad { color: var(--mn-rose-deep); }
.tip-row { font: 700 calc(11px * var(--txt))/1 var(--f-num); color: var(--mn-ink-2); }
.mana { color: var(--r-magico); }
/* the rarity wash: a soft watercolour band behind the name, tinted with the item's own colour (--rc, set inline by ui.js) */
.itip {
  --ink-rc: color-mix(in oklab, var(--rc) 52%, #2a1608);
  border-top: 1.5px solid var(--mn-gold-mid);
  background:
    radial-gradient(ellipse 90% 34px at 30% 0, color-mix(in srgb, var(--rc) 30%, transparent), transparent 100%),
    var(--mn-paper-tex) 0 0 / 256px 256px,
    linear-gradient(180deg, var(--mn-paper-hi), #f6e8c8);
  box-shadow: inset 0 0 0 1px var(--mn-gold-hi), inset 0 3px 0 color-mix(in srgb, var(--rc) 70%, #fff), 0 0 18px -4px color-mix(in srgb, var(--rc) 60%, transparent), 0 8px 22px rgba(70, 45, 20, .35);
}
.itip-n { font: 800 calc(16px * var(--txt))/1.2 var(--f-ui); color: var(--ink-rc) !important; text-shadow: 0 1px 0 rgba(255, 252, 240, .9); }
.itip-n::before {                 /* rarity gem pip (shape + colour, not colour alone) */
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 6px 1px 0;
  vertical-align: middle;
  background: radial-gradient(circle at 35% 30%, #fff, var(--rc) 55%, var(--ink-rc));
  border: 1px solid var(--ink-rc);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.itip-l, .itip-r { border-top: 0; background: linear-gradient(90deg, transparent, var(--mn-line) 20%, var(--mn-line) 80%, transparent) 0 0 / 100% 1px no-repeat; }
.itip-lore { font-style: italic; color: #7a5a3a; }
.itip-d { background: rgba(255, 250, 236, .7); border: 1px dashed var(--mn-line); }
.itip-d .up b { color: var(--r-excelente); }
.itip-d .down b { color: var(--mn-rose-deep); }
.itip-d b, .itip-v { font-family: var(--f-num); font-weight: 700; }
.itip-v { color: var(--mn-gold-deep); }
/* exact ink mapping for the known colours (D.RARITY + data.js line colours, serialised as rgb() by the browser) */
.itip[style*="#e6dfcc"], .itip[style*="#eadfc6"] { --ink-rc: var(--r-comum); --rc: #c9b48a; }
.itip[style*="#7d9bff"] { --ink-rc: var(--r-magico); }
.itip[style*="#ffd34d"] { --ink-rc: var(--r-raro); }
.itip[style*="#4fe06a"] { --ink-rc: var(--r-excelente); }
.itip[style*="#ff9a3c"] { --ink-rc: var(--r-lendario); }
.itip[style*="#ff9a3c"] { border-color: #d98a3a; box-shadow: inset 0 0 0 1px var(--mn-gold-hi), inset 0 3px 0 #ffb366, 0 0 22px -2px rgba(255, 154, 60, .65), 0 8px 22px rgba(70, 45, 20, .35); }
:is(.itip, .tip-box, .win, .sheet, .chat) [style*="color: rgb(230, 223, 204)"], :is(.itip, .tip-box, .win, .sheet, .chat) [style*="color: rgb(234, 223, 198)"] { color: var(--mn-ink) !important; }
:is(.itip, .tip-box, .win, .sheet, .chat) [style*="color: rgb(143, 168, 255)"], :is(.itip, .tip-box, .win, .sheet, .chat) [style*="color: rgb(125, 155, 255)"] { color: #3158b8 !important; }
:is(.itip, .tip-box, .win, .sheet, .chat) [style*="color: rgb(79, 224, 106)"] { color: var(--r-excelente) !important; }
:is(.itip, .tip-box, .win, .sheet, .chat) [style*="color: rgb(255, 179, 102)"], :is(.itip, .tip-box, .win, .sheet, .chat) [style*="color: rgb(255, 154, 60)"] { color: #b5520f !important; }
:is(.itip, .tip-box, .win, .sheet, .chat) [style*="color: rgb(255, 211, 77)"] { color: var(--r-raro) !important; }
:is(.itip, .tip-box, .win, .sheet, .chat) [style*="color: rgb(154, 143, 124)"] { color: var(--mn-ink-3) !important; }
:is(.itip, .tip-box, .win, .sheet, .chat) [style*="color: rgb(200, 185, 143)"] { color: #7a6440 !important; }
:is(.itip, .tip-box, .win, .sheet, .chat) [style*="color: rgb(201, 184, 255)"], :is(.itip, .tip-box, .win, .sheet, .chat) [style*="color: rgb(195, 155, 255)"] { color: var(--mn-lav-deep) !important; }
:is(.itip, .tip-box, .win, .sheet, .chat) [style*="color: rgb(255, 106, 90)"] { color: var(--mn-rose-deep) !important; }
/* orb / potion tooltips (ui.js simpleTip: '#ff8a7a' life, '#8fc0ff' mana) */
.tip-box [style*="color: rgb(255, 138, 122)"] { color: var(--mn-rose-deep) !important; }
.tip-box [style*="color: rgb(143, 192, 255)"] { color: #2c5fc9 !important; }
:is(.itip, .tip-box, .win, .sheet, .chat, .toast) [style*="color: rgb(244, 212, 124)"], .ln[style*="color: rgb(244, 212, 124)"] { color: var(--mn-gold-deep) !important; }
/* the rest of game.js COL (log lines: red, blue, purple, cyan, jewel) */
:is(.itip, .tip-box, .win, .sheet, .chat, .toast) [style*="color: rgb(255, 77, 77)"], .ln[style*="color: rgb(255, 77, 77)"] { color: var(--mn-rose-deep) !important; }
:is(.itip, .tip-box, .win, .sheet, .chat, .toast) [style*="color: rgb(106, 168, 255)"], .ln[style*="color: rgb(106, 168, 255)"] { color: #2c5fc9 !important; }
:is(.itip, .tip-box, .win, .sheet, .chat, .toast) [style*="color: rgb(201, 160, 255)"], .ln[style*="color: rgb(201, 160, 255)"],
:is(.itip, .tip-box, .win, .sheet, .chat, .toast) [style*="color: rgb(216, 168, 255)"], .ln[style*="color: rgb(216, 168, 255)"] { color: var(--mn-lav-deep) !important; }
:is(.itip, .tip-box, .win, .sheet, .chat, .toast) [style*="color: rgb(127, 216, 255)"], .ln[style*="color: rgb(127, 216, 255)"] { color: #1d6f7c !important; }
.xpc { color: var(--mn-lav-deep); }
.ln[style*="color: rgb(154, 143, 124)"] { color: var(--mn-ink-2) !important; }
.ln[style*="color: rgb(255, 106, 90)"], .ln[style*="color: rgb(255, 140, 117)"] { color: var(--mn-rose-deep) !important; }
.ln[style*="color: rgb(79, 224, 106)"] { color: var(--r-excelente) !important; }
.ln[style*="color: rgb(255, 211, 77)"] { color: var(--r-raro) !important; }
.sheet { border-radius: 16px 16px 0 0; }
.sheet-b .itip-wrap > .itip:last-child { border-top: 1px dashed var(--mn-line); }

/* ---------- 8. toasts, banner, death ---------- */
.toast {
  --ink-tc: color-mix(in oklab, var(--tc) 50%, #2a1608);
  padding: 7px 26px 8px;
  font: 700 calc(16px * var(--txt))/1.2 var(--f-ui);
  color: var(--ink-tc);
  text-shadow: 0 1px 0 rgba(255, 252, 240, .9);
  background:
    linear-gradient(90deg, transparent 0 14px, var(--mn-paper-hi) 14px calc(100% - 14px), transparent calc(100% - 14px)),
    var(--mn-paper);
  border: 0;
  border-top: 1.5px solid var(--mn-gold-mid);
  border-bottom: 1.5px solid var(--mn-gold-mid);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--tc) 55%, transparent), 0 6px 16px rgba(74, 46, 20, .28);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
}
.toast-n { font: 700 calc(11px * var(--txt))/1 var(--f-num); color: var(--mn-ink-3); }
.toast.big {
  font: 900 clamp(44px, 8vw, 86px)/1 var(--f-title);
  color: #f6d77e;
  background: none;
  clip-path: none;
  border: 0;
  box-shadow: none;
  text-shadow: none;
}
.toast.big .toast-t {
  color: transparent;
  background: linear-gradient(180deg, #fffbe6 10%, #f6d77e 45%, #c9953a 75%, #8a5f1e);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 1.5px 0 #5a3610) drop-shadow(0 -1px 0 #5a3610) drop-shadow(1.5px 0 0 #5a3610) drop-shadow(-1.5px 0 0 #5a3610) drop-shadow(0 4px 3px rgba(90, 54, 16, .4)) drop-shadow(0 0 18px rgba(255, 246, 210, .95));
}
.toast-rays { background: repeating-conic-gradient(rgba(255, 236, 170, .55) 0 6deg, transparent 6deg 14deg, rgba(255, 190, 210, .4) 14deg 18deg, transparent 18deg 30deg); }
/* 4-way ink outline + warm dark halo (as the level-up): the banner stays legible over light cobbles while it fades */
.banner-n { font: 900 clamp(38px, 6.6vw, 72px)/1 var(--f-title); word-spacing: .22em; color: #fffaf0; text-shadow: 0 2px 0 #5a3610, 0 -1.5px 0 #5a3610, 1.5px 0 0 #5a3610, -1.5px 0 0 #5a3610, 0 3px 6px rgba(74, 46, 20, .55), 0 0 22px rgba(255, 217, 138, .9); }
.banner-s { font: 700 calc(14px * var(--txt))/1 var(--f-num); color: #fffaf0; letter-spacing: 3px; text-shadow: 0 1px 0 #5a3610, 0 -1px 0 #5a3610, 1px 0 0 #5a3610, -1px 0 0 #5a3610, 0 0 8px rgba(74, 46, 20, .85); }
.banner-orn { width: 300px; height: 14px; background: url(../assets/ui/mana/divider.svg) center / 100% 14px no-repeat; }
.banner-orn.b { width: 200px; }
.vignette { background: radial-gradient(ellipse at center, transparent 50%, rgba(220, 80, 100, .3) 80%, rgba(180, 50, 80, .6) 100%); }
.death { background: radial-gradient(ellipse at center, rgba(250, 236, 214, .55), rgba(96, 72, 96, .78) 78%); backdrop-filter: grayscale(.85) sepia(.25); }
.death-h { font: 900 clamp(48px, 10vw, 112px)/1 var(--f-title); color: #fbe4e8; letter-spacing: 3px; text-shadow: 0 3px 0 #8e3248, 0 0 4px #6a1f34, 0 0 30px rgba(232, 144, 154, .9); }
.death-s { font: italic 500 calc(19px * var(--txt))/1.4 var(--f-ui); color: #fffaf0; text-shadow: 0 1px 0 #4a2a3a, 0 0 4px rgba(74, 42, 58, .95), 0 0 12px rgba(74, 42, 58, .7); }
.death-t { font: 700 calc(14px * var(--txt))/1 var(--f-num); color: #fff4d6; letter-spacing: 1px; text-shadow: 0 1px 0 #4a2a3a, 0 0 4px rgba(74, 42, 58, .95), 0 0 10px rgba(74, 42, 58, .7); }

/* ---------- 9. HUD ---------- */
/* console: an unrolled parchment scroll between two gilded vine orbs */
.console .con-plate {
  background:
    var(--mn-paper-tex) 0 0 / 256px 256px,
    linear-gradient(180deg, var(--mn-paper-hi) 0, var(--mn-paper) 50%, var(--mn-paper-2) 100%);
  border: 2px solid var(--mn-gold-mid);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow:
    inset 0 0 0 1px var(--mn-gold-hi),
    inset 0 0 0 4px rgba(255, 250, 236, .5),
    inset 0 0 0 5px rgba(201, 149, 58, .35),
    inset 0 -14px 20px -10px rgba(176, 124, 52, .25),
    0 -6px 18px rgba(74, 46, 20, .25);
}
.console .con-plate::before {     /* centre crest: little mana crystal over the plate */
  width: 26px;
  height: 32px;
  top: -20px;
  margin-left: -13px;
  clip-path: none;
  background: url(../assets/ui/mana/crystal.svg) center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(159, 240, 220, .9));
}
.console .con-plate::after {      /* vine along the plate's foot */
  left: 22px; right: 22px; bottom: 7px; height: 14px;
  background: url(../assets/ui/mana/divider.svg) center / 100% 14px no-repeat;
  border: 0;
  opacity: .75;
}
.console .con-div { width: 2px; border: 0; background: linear-gradient(180deg, transparent, var(--mn-gold-mid), transparent); }
.console .orb-frame { display: none; }
.console .orb::after {
  content: "";
  position: absolute;
  inset: -2%;
  z-index: 2;
  pointer-events: none;
  background: url(../assets/ui/mana/orb-hp.svg) center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 3px rgba(74, 46, 20, .35));
}
.console .orb.mp::after { background-image: url(../assets/ui/mana/orb-mp.svg); }
.console .orb-cv { image-rendering: auto; filter: saturate(1.05) brightness(1.04); }
.console .orb-v { font: 800 calc(15px * var(--txt))/1 var(--f-num); color: #fffaf0; text-shadow: 0 1px 2px rgba(60, 20, 30, .9), 0 0 4px rgba(60, 20, 30, .6); }
.console .orb-m { font: 700 calc(10px * var(--txt))/1 var(--f-num); color: #fff4e0; text-shadow: 0 1px 2px rgba(60, 20, 30, .9); }
.console .orb:focus-visible { outline: 2px solid var(--mn-sky-deep); outline-offset: -10px; border-radius: 50%; }
.console .orb-pot { font: 700 calc(9px * var(--txt))/1 var(--f-num); color: var(--mn-ink); background: var(--mn-paper-hi); border: 1px solid var(--mn-gold-mid); border-radius: 999px; }
/* hotbar slots: cream wells in gold rings */
.console .slot-btn {
  background: radial-gradient(circle at 50% 40%, #fffdf6, var(--mn-well) 70%, #e2cc9c);
  border: 2px solid var(--mn-gold-mid);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--mn-gold-hi), inset 0 2px 6px rgba(138, 95, 30, .35), 0 1px 0 rgba(255, 252, 240, .9);
}
.console .slot-btn:hover, .console .slot-btn:focus-visible { border-color: var(--mn-gold); box-shadow: inset 0 0 0 1px var(--mn-gold-hi), 0 0 0 3px rgba(255, 217, 138, .55), 0 0 12px rgba(255, 217, 138, .8); }
.console .slot-btn .key {
  left: -3px; top: -9px;
  min-width: 15px; height: 15px; padding: 3px 2px 0;
  color: #4a2a0e;
  background: radial-gradient(circle at 35% 30%, #fffbe6, #f0c75e 55%, #b07a2a);
  border: 1px solid #8a5f1e;
  border-radius: 50%;
  font: 400 calc(7px * var(--txt))/1 var(--f-pix);
}
.console .sk.rmb { border-color: var(--mn-leaf); box-shadow: inset 0 0 0 1px var(--mn-gold-hi), 0 0 0 2px rgba(106, 168, 79, .45), 0 0 10px rgba(106, 168, 79, .55); }
.console .sk-rmb { background: var(--mn-leaf); border-radius: 2px; }
.console .sk-lock { background: rgba(248, 239, 217, .82); }
.console .sk-lv { color: var(--mn-ink-2); font: 700 calc(8px * var(--txt))/1 var(--f-num); }
.console .sk-cdt { font: 800 calc(15px * var(--txt))/1 var(--f-num); color: #fffaf0; text-shadow: 0 1px 2px #3b2a1f, 0 0 3px #3b2a1f; }
.console .pot-n { font: 400 calc(9px * var(--txt))/1 var(--f-pix); color: #fffaf0; text-shadow: 1px 1px 0 #3b2a1f, -1px 0 0 #3b2a1f, 0 -1px 0 #3b2a1f; }
/* menu medallions */
.console .mb {
  background: radial-gradient(circle at 50% 38%, #fffdf6, var(--mn-paper-2));
  border: 1.5px solid var(--mn-gold-mid);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--mn-gold-hi), 0 1px 0 rgba(138, 95, 30, .35);
}
.console .mb img { filter: none; }
/* key letters on gold coin badges (as the hotbar numbers), Silkscreen at its native 8px */
.console .mb .key { min-width: 13px; min-height: 12px; padding: 2px 3px 0; color: #4a2a0e; background: radial-gradient(circle at 35% 30%, #fffbe6, #f0c75e 55%, #b07a2a); border: 1px solid #8a5f1e; border-radius: 999px; left: 50%; right: auto; transform: translateX(-50%); bottom: -5px; top: auto; font: 400 calc(8px * var(--txt))/1 var(--f-pix); text-align: center; }
.console .mb:hover, .console .mb.on, .console .mb:focus-visible { background: radial-gradient(circle at 50% 38%, #fffbe6, #ffe39a); border-color: var(--mn-gold); box-shadow: 0 0 0 2px rgba(255, 217, 138, .6), 0 0 10px rgba(255, 217, 138, .8); }
.console .badge { background: var(--mn-rose-deep); border: 1px solid #fffaf0; border-radius: 999px; color: #fff; font: 800 calc(9px * var(--txt))/calc(12px * var(--txt)) var(--f-num); }
/* xp: a slim gold-leaf vine */
.console .xp {
  height: 9px;
  background: rgba(248, 239, 217, .9);
  border: 1px solid var(--mn-gold-mid);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(120, 80, 30, .3), 0 0 0 1px rgba(255, 250, 236, .7), 0 2px 6px rgba(74, 46, 20, .25);
  overflow: hidden;
}
.console .xp-f { background: linear-gradient(180deg, #fff6cc, #f0c75e 45%, #c9953a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.console .xp-seg { background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(201, 149, 58, .45) calc(10% - 1px) 10%); }
.console .xp-txt { font: 700 calc(10px * var(--txt))/1 var(--f-num); color: #fffaf0; letter-spacing: .5px; text-shadow: 0 1px 2px #5a3c14, 0 0 4px rgba(90, 60, 20, .8); }

/* player frame: a cameo on a parchment card */
.pf { border-radius: 14px; }
.pf-embw { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fffdf6, var(--mn-paper-2)); border: 2px solid var(--mn-gold-mid); box-shadow: inset 0 0 0 1px var(--mn-gold-hi), 0 0 0 2px rgba(255, 250, 236, .7); overflow: hidden; }
.pf-name { font: 800 calc(16px * var(--txt))/1.1 var(--f-ui); color: var(--mn-ink); text-shadow: none; }
.pf-cls { font: italic 500 calc(12px * var(--txt))/1.2 var(--f-ui); color: var(--mn-ink-2); }
.pf-badge { font: 700 calc(10px * var(--txt))/1 var(--f-num); color: #4a2a0e; background: radial-gradient(circle at 35% 30%, #fffbe6, #f0c75e 55%, #b07a2a); border: 1px solid #8a5f1e; border-radius: 999px; text-shadow: none; }
.buff { border-radius: 8px; }
.buff-sw { background: rgba(248, 239, 217, .7); }
.tf-name, .boss-n { color: var(--mn-ink); text-shadow: none; }
/* target name colours set inline by ui.js (levelColor / GOLD), re-inked for the paper frame */
.tf-name[style*="rgb(234, 223, 198)"] { color: var(--mn-ink) !important; }
.tf-name[style*="rgb(255, 77, 77)"] { color: var(--mn-rose-deep) !important; }
.tf-name[style*="rgb(255, 179, 71)"] { color: #b5520f !important; }
.tf-name[style*="rgb(143, 134, 120)"] { color: var(--mn-ink-3) !important; }
.tf-name[style*="rgb(255, 211, 77)"] { color: var(--r-raro) !important; }
.tf-lvl, .boss-l { font-family: var(--f-num); font-weight: 700; color: var(--mn-ink-3); }
.boss-n { font: 900 calc(22px * var(--txt-h))/1 var(--f-title); text-transform: uppercase; letter-spacing: .04em; word-spacing: .22em; color: var(--mn-rose-deep); text-shadow: 0 1.5px 0 #fffaf0, 0 -1px 0 #fffaf0, 1px 0 0 #fffaf0, -1px 0 0 #fffaf0, 0 0 12px rgba(255, 236, 240, .9); }   /* cream outline: readable over any terrain */
.buff-t { font: 700 calc(9px * var(--txt))/1 var(--f-num); color: #fffaf0; text-shadow: 1px 1px 0 #3b2a1f, -1px 0 0 #3b2a1f, 0 -1px 0 #3b2a1f; }
.bar.boss { background: rgba(248, 239, 217, .92); height: 12px; border: 1.5px solid var(--mn-gold-mid); border-radius: 999px; box-shadow: inset 0 1px 2px rgba(120, 80, 30, .3), 0 0 0 2px rgba(255, 250, 236, .75), 0 2px 8px rgba(74, 46, 20, .35), 0 0 14px rgba(232, 144, 154, .5); }
.boss-l { font: 700 calc(11px * var(--txt))/1 var(--f-num); color: var(--mn-ink); text-shadow: 0 1px 0 #fffaf0, 0 -1px 0 #fffaf0, 1px 0 0 #fffaf0, -1px 0 0 #fffaf0, 0 0 6px rgba(255, 250, 236, .95); }   /* cream outline, as the boss name */
.bar.boss::after { display: block; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255, 250, 236, .6) calc(10% - 1px) 10%); }

/* minimap: diamond map on parchment, gilded */
.mm-name { font: 700 calc(13px * var(--txt-h))/1.1 var(--f-title); color: var(--mn-gold-deep); text-shadow: 0 1px 0 #fffaf0, 0 0 10px rgba(255, 217, 138, .8); }   /* half step like its column (.hud-tr): "Campos de Aurora" fits */
.mm-clip { background: radial-gradient(ellipse at 50% 50%, #e9f2d0, #c8dca8); }
.mm-info { font: 700 calc(11px * var(--txt))/1 var(--f-num); color: var(--mn-ink-3); }
.mm-clock { color: var(--mn-ink); }
.mm-gem { background: url(../assets/ui/mana/crystal.svg) center / contain no-repeat; clip-path: none; width: 12px; height: 15px; margin-left: -6px; top: -8px; }
.mm-gem.b { bottom: -8px; transform: rotate(180deg); }
.mm-frame polygon { stroke: var(--mn-gold-mid); }
/* quest tracker: a pinned note */
.qt-head span { font: 700 calc(14px * var(--txt))/1 var(--f-title); color: var(--mn-gold-deep); text-shadow: 0 0 8px rgba(255, 217, 138, .8); }
.qt-n { font: 700 calc(11px * var(--txt))/1 var(--f-num) !important; color: var(--mn-ink-2) !important; }
.qt-text, .qt-q-n { color: var(--mn-ink); }
.qt-q-n { color: var(--mn-gold-deep); }
.qt-q:hover .qt-q-n { color: var(--mn-ink); }
.qt-state { color: var(--mn-ink-3); }
.qt.done { border-color: var(--mn-leaf); }
.qt.done .qt-state, .qt-q.done .qt-state, .qt-q.done .qt-q-n { color: var(--mn-leaf-deep); }
:is(.win, .qt) .qg.q-av, :is(.win, .qt) .qg.q-rd { color: #a26600; text-shadow: 0 1px 0 #fffaf0; }
:is(.win, .qt) .qg.q-dy { color: var(--mn-sky-deep); text-shadow: 0 1px 0 #fffaf0; }
:is(.win, .qt) .qg.q-ac { color: var(--mn-ink-3); text-shadow: none; }
:is(.win, .qt) .qg.q-fl { color: #c58a00; text-shadow: none; }
.qv-c.daily { color: #1d6f7c; }
.qv-carry { color: var(--mn-ink-2); }
.qv-giver { color: var(--mn-gold-deep); }
/* chat: lines on soft paper pills (readable over any part of the world) */
.chat-btn { background: rgba(255, 250, 236, .85); border: 1.5px solid var(--mn-gold-mid); border-radius: 50%; }
.ln { color: var(--mn-ink); text-shadow: none; background: linear-gradient(90deg, rgba(255, 250, 236, .86), rgba(255, 250, 236, .5) 80%, rgba(255, 250, 236, 0)); border-radius: 8px 0 0 8px; }
.chat:hover .chat-l, .chat.open .chat-l { background: rgba(255, 250, 236, .93); border: 1.5px solid var(--mn-gold-mid); border-radius: 12px; box-shadow: var(--mn-shadow); }

/* ---------- 10. windows ---------- */
/* inventory: paper instead of the stone plates (inventory.css) */
.win.w-inv {
  --inv-bone: var(--mn-ink);
  color: var(--mn-ink);
  background:
    var(--mn-paper-tex) 0 0 / 256px 256px,
    radial-gradient(ellipse 120% 90% at 50% 30%, var(--mn-paper-hi), var(--mn-paper) 60%, var(--mn-paper-2));
  border: 2px solid var(--mn-gold-mid);
  box-shadow: inset 0 0 0 1px var(--mn-gold-hi), inset 0 0 0 4px rgba(255, 250, 236, .55), inset 0 0 0 5px rgba(201, 149, 58, .45), inset 0 0 26px rgba(176, 124, 52, .22), var(--mn-shadow);
}
.win.w-inv::after { inset: -10px; border: 42px solid transparent; border-image: url(../assets/ui/mana/frame-corners.svg) 32 / 42px stretch; background: none; border-top: 42px solid transparent; border-bottom: 42px solid transparent; }
.w-inv .win-h { margin: 0; padding: 0 6px 0 12px; height: 42px; background: linear-gradient(180deg, rgba(143, 208, 216, .22), rgba(200, 232, 154, .12) 70%, transparent); border-bottom: 0; box-shadow: none; }
.w-inv .win-h::before { display: none; }
.w-inv .win-t { font: 700 calc(17px * var(--txt-h))/1.1 var(--f-title); text-transform: none; letter-spacing: .5px; color: var(--mn-gold-deep); text-shadow: 0 1px 0 var(--mn-paper-hi), 0 0 12px rgba(255, 217, 138, .7); }
.w-inv .win-k { color: var(--mn-ink-2); }
.w-inv .win-x { background: radial-gradient(circle at 38% 32%, #fff4f4, #f2b0ba 45%, #c25a6e); border-color: var(--mn-gold-mid); box-shadow: inset 0 0 0 1px var(--mn-gold-hi); }
.w-inv .win-b { scrollbar-color: var(--mn-gold) rgba(201, 149, 58, .12); }
.w-inv .inv-identity, .w-inv .inv-bag-head, .w-inv .slot-state, .w-inv .inv-hint { color: var(--mn-ink-2); }
.w-inv .inv-set { color: var(--mn-leaf-deep); text-shadow: none; }
.w-inv .inv-bag-title { font: 700 calc(12px * var(--txt))/1 var(--f-title); color: var(--mn-gold-deep); letter-spacing: .5px; }
.w-inv .inv-bag-head { border-bottom: 0; box-shadow: none; background: linear-gradient(90deg, transparent, var(--mn-line), transparent) 0 100% / 100% 1px no-repeat; }
.w-inv .doll-bg {
  background:
    radial-gradient(ellipse 34% 46% at 50% 50%, rgba(255, 252, 240, .95), rgba(255, 252, 240, 0)),
    radial-gradient(ellipse 60% 70% at 50% 55%, rgba(200, 232, 154, .35), rgba(200, 232, 154, 0)),
    var(--mn-paper-tex) 0 0 / 256px 256px,
    linear-gradient(180deg, #fbf2dc, #efdfb8);
  border: 1.5px solid var(--mn-line);
  border-radius: 12px;
  box-shadow: inset 0 0 18px rgba(176, 124, 52, .2);
}
.w-inv .slot, .slot {
  background: radial-gradient(circle at 50% 42%, #fffdf6, var(--mn-well) 72%, #e2cc9c);
  border: 2px solid var(--mn-gold-mid);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--mn-gold-hi), inset 0 2px 6px rgba(138, 95, 30, .3);
}
/* an equipped item sits in the slot's own neutral well: no rarity colour behind it (owner 2026-10-10: "sem fundo") */
.w-inv .slot.full, .slot.full { background: radial-gradient(circle at 50% 42%, #fffdf6, var(--mn-well) 72%, #e2cc9c); border-color: var(--mn-gold-mid); }
.w-inv .slot:hover, .w-inv .slot:focus-visible, .slot:hover { background: radial-gradient(circle at 50% 42%, #fffef8, #fff0c8 72%); border-color: var(--mn-gold); }
.w-inv .slot-ic, .w-inv .it img { filter: drop-shadow(0 1px 1px rgba(74, 46, 20, .45)); }
.skr-ic img, .console .sk-img { border-radius: 6px; }   /* skill icons only: item icons are the bare item, never clipped */
.w-inv .slot-ph { opacity: .35; filter: sepia(1) saturate(.6); }
.w-inv .slot.fit, .slot.fit { border-color: var(--mn-leaf); box-shadow: inset 0 0 12px rgba(106, 168, 79, .4), 0 0 8px rgba(106, 168, 79, .6); }
.w-inv .slot.nofit, .slot.nofit { border-color: var(--mn-rose-deep); box-shadow: inset 0 0 12px rgba(232, 144, 154, .45); }
.w-inv .grid, .grid {
  background-color: #f6ead0;
  background-image: linear-gradient(rgba(201, 149, 58, .28) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 149, 58, .28) 1px, transparent 1px), radial-gradient(ellipse at 50% 40%, #fffaf0, #efdfb8 85%);
  border-color: var(--mn-gold-mid);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--mn-gold-hi), inset 0 0 16px rgba(176, 124, 52, .2);
}
/* bag / baú items: only the item, no card behind it (owner 2026-10-10); the grid's cells show through, hover marks its cells */
.w-inv .it, .it { background: none; }
.w-inv .it::after, .it::after { border-color: transparent; border-radius: 4px; box-shadow: none; }
.w-inv .it:hover, .it:hover { background: rgba(255, 231, 168, .45); }
.w-inv .it:hover::after { border-color: var(--mn-gold); }
.w-inv .it-plus, .w-inv .it-qty, .it-plus, .it-qty { font: 400 calc(8px * var(--txt))/1 var(--f-pix); color: #fffaf0; background: rgba(59, 42, 31, .82); border-radius: 3px; text-shadow: none; }
.w-inv .it-plus, .it-plus { color: #ffe39a; }
.w-inv .inv-foot { border-top: 0; box-shadow: none; background: linear-gradient(90deg, transparent, var(--mn-line), transparent) 0 0 / 100% 1px no-repeat; }
.w-inv .zen, .zen { color: var(--mn-gold-deep); background: linear-gradient(180deg, #fffbe6, #f6e3b0); border: 1.5px solid var(--mn-gold-mid); border-radius: 999px; box-shadow: inset 0 1px 0 #fff; }
.w-inv .zen-v, .zen-v { font: 800 calc(16px * var(--txt))/1 var(--f-num); }
.w-inv .zen-unit, .zen-unit { font: 700 calc(11px * var(--txt))/1 var(--f-num); color: var(--mn-ink-3); }
/* the +N glow pulse hugs the item (style.css .ig::before): no dark card under it any more, so plain alpha instead of screen
   (screen on the parchment is invisible) */
.ig::before { mix-blend-mode: normal; }
/* character sheet / skills / shop / quests / vault / menu / help / warp */
.cw-embw, .npc-ptw, .t-d-stage, .sr-ic, .sc-ic, .skr-ic {
  background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(200, 232, 154, .45), transparent 70%), radial-gradient(circle at 50% 40%, #fffdf6, var(--mn-well));
  border-color: var(--mn-gold-mid);
}
.sr-ic, .sc-ic { background: none; }   /* shop: the item alone in its well (no glow blob behind it) */
.cw-embw, .npc-ptw { border-radius: 50% / 46%; box-shadow: inset 0 0 0 1px var(--mn-gold-hi), 0 0 0 3px rgba(255, 250, 236, .8), 0 0 0 4px var(--mn-line); }
.plus { color: #fffaf0; background: radial-gradient(circle at 35% 30%, #e6f7c4, var(--mn-leaf) 55%, var(--mn-leaf-deep)); border-radius: 50%; border-color: var(--mn-leaf-deep); text-shadow: 0 1px 0 #2a5a26; }
.sk-bar { background: var(--mn-paper); border-bottom: 1px solid var(--mn-line); }
.skb { font: 700 calc(9px * var(--txt))/1 var(--f-num); border-radius: 999px; padding: 3px 6px 2px; }
.skb.bad { color: #fffaf0; background: linear-gradient(180deg, #e88a9a, var(--mn-rose-deep)); border-color: #8e3248; }
.skb.ok, .skb.on { color: #fffaf0; background: linear-gradient(180deg, #8cc96a, var(--mn-leaf-deep)); border-color: var(--mn-leaf-deep); }
.npc-role { font: 700 calc(11px * var(--txt))/1.2 var(--f-num); letter-spacing: 1px; color: var(--mn-leaf-deep); }
.npc-line { font: calc(16px * var(--txt))/1.5 var(--f-ui); color: var(--mn-ink); }
.npc-say::before { content: ""; position: absolute; left: -9px; top: 22px; width: 16px; height: 16px; background: inherit; border-left: 1.5px solid var(--mn-line); border-bottom: 1.5px solid var(--mn-line); transform: rotate(45deg); border-radius: 0 0 0 4px; }
.npc-say { position: relative; padding: 10px 12px; background: rgba(255, 252, 240, .9); border: 1.5px solid var(--mn-line); border-radius: 14px; box-shadow: 0 2px 6px rgba(74, 46, 20, .12); }
/* the in-game menu shows the "Scroll of Mana" wordmark (the crest text stays in the DOM for screen readers) */
.menu-crest span { display: block; height: 46px; margin: 0 auto; font-size: 0; color: transparent; text-shadow: none; background: url(../assets/ui/logo/scroll-of-mana-wordmark.svg) center / contain no-repeat; }
.menu-crest::after { width: 200px; height: 14px; margin-top: 4px; background: url(../assets/ui/mana/divider.svg) center / 100% 14px no-repeat; }
.help-sec h3, .help-sec b { color: var(--mn-gold-deep); }
/* legacy headings sized for the narrow pixel title font: Cinzel Decorative capitals need less size */
.help-sec h4, .sk-sec-t, .qw-ch-h, .sell-drop-t, .sk-bar-t { font-family: var(--f-title); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; word-spacing: .22em; color: var(--mn-gold-deep); text-shadow: 0 1px 0 var(--mn-paper-hi), 0 0 10px rgba(255, 217, 138, .7); }
.help-sec h4 { font-size: calc(17px * var(--txt)); line-height: 1.1; }
.sk-sec-t { font-size: calc(18px * var(--txt)); line-height: 1.1; }
.qw-ch-h { font-size: calc(14px * var(--txt)); line-height: 1.15; }
.sell-drop-t { font-size: calc(20px * var(--txt-h)); line-height: 1.1; color: var(--r-raro); }
.sk-bar-t { font-size: calc(13px * var(--txt)); line-height: 1; }
.sk-bar { box-shadow: 0 6px 10px -6px rgba(74, 46, 20, .35); }
/* the 28px hero-name heading stays fixed with "Tamanho do texto" (already large; bigger, a 10-letter name no longer fits a phone) */
.cw-name { font: 900 28px/1.05 var(--f-title); text-transform: uppercase; letter-spacing: .04em; word-spacing: .22em; color: var(--mn-gold-deep); text-shadow: 0 1px 0 #fff, 0 0 14px rgba(255, 217, 138, .8); }
/* +N glow bands of the item name (glow tooltips): same colours, a cream drop instead of the black one on the paper */
.itip-n[data-g="1"] { text-shadow: 0 1px 0 #fffaf0, 0 0 6px rgba(110, 140, 230, .55); }
.itip-n[data-g="2"] { text-shadow: 0 1px 0 #fffaf0, 0 0 5px rgba(255, 194, 58, .8), 0 0 10px rgba(255, 194, 58, .5); }
.itip-n[data-g="3"] { text-shadow: 0 1px 0 #fffaf0, 0 0 5px #ffd860, 0 0 11px rgba(255, 216, 96, .85); }
.itip-n[data-g="4"], .itip-n[data-g="5"] { animation-name: mnTipPrism; }
@keyframes mnTipPrism {
  0%, 100% { text-shadow: 0 1px 0 #fffaf0, 0 0 2px var(--th, transparent), 0 0 5px #ff4a6a, 0 0 11px #ff4a6a; }
  16.7% { text-shadow: 0 1px 0 #fffaf0, 0 0 2px var(--th, transparent), 0 0 5px #ffa53a, 0 0 11px #ffa53a; }
  33.3% { text-shadow: 0 1px 0 #fffaf0, 0 0 2px var(--th, transparent), 0 0 5px #ffe84a, 0 0 11px #ffe84a; }
  50% { text-shadow: 0 1px 0 #fffaf0, 0 0 2px var(--th, transparent), 0 0 5px #5cff7a, 0 0 11px #5cff7a; }
  66.7% { text-shadow: 0 1px 0 #fffaf0, 0 0 2px var(--th, transparent), 0 0 5px #4ad8ff, 0 0 11px #4ad8ff; }
  83.3% { text-shadow: 0 1px 0 #fffaf0, 0 0 2px var(--th, transparent), 0 0 5px #a070ff, 0 0 11px #a070ff; }
}
.sell-drop { background: rgba(255, 250, 236, .92); border-color: var(--mn-gold-mid); color: var(--mn-ink); border-radius: 12px; }
.vault-grid { background-color: #f6ead0; }
.vault-in { background: #fffdf6; border-color: #d2b98a; border-radius: 8px; color: var(--mn-ink); }

/* ---------- 11. title (gate) ---------- */
.title, .title.st-gate, #ui .title.st-chars {
  background:
    radial-gradient(ellipse 60% 46% at 50% 34%, rgba(255, 252, 238, .5), rgba(255, 252, 238, 0) 70%),
    linear-gradient(180deg, rgba(255, 248, 226, .2), transparent 30%, transparent 80%, rgba(120, 90, 50, .16));
}
.tg-fog { background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)) 0 100% / 25% 85% repeat-x, radial-gradient(closest-side, rgba(255, 246, 236, .7), rgba(255, 246, 236, 0)) 50% 20% / 25% 55% repeat-x; opacity: .35; }
.tg-fog.f2 { opacity: .22; }
.t-gate { scrollbar-color: var(--mn-gold) transparent; font-variant-ligatures: normal; }
/* main menu */
.tg-menu { width: min(320px, 100%); gap: 12px; }
.btn.tg-prim { min-height: 62px; padding: 8px 36px; color: #4a2a0e; }
.tg-prim .tg-pl { font: 700 calc(23px * var(--txt-h))/1 var(--f-ui); letter-spacing: .3px; }
.tg-prim .tg-ps { font: 700 calc(11px * var(--txt))/calc(12px * var(--txt)) var(--f-num); color: #6b4512; letter-spacing: .5px; }
.btn.tg-plq {
  min-height: 46px;
  font: 700 calc(18px * var(--txt))/1 var(--f-ui);
  color: var(--mn-ink);
  background: var(--mn-paper-tex) 0 0 / 256px 256px, linear-gradient(180deg, #fffdf6 0, #fbf0d6 50%, #efd9a6 100%);
  border: 1.5px solid var(--mn-gold-mid);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 3px rgba(255, 250, 236, .6), inset 0 0 0 4px rgba(201, 149, 58, .3), var(--mn-shadow-sm);
  text-shadow: 0 1px 0 #fff;
}
.btn.tg-plq:hover, .btn.tg-plq:focus-visible { color: var(--mn-gold-deep); border-color: var(--mn-gold); background: var(--mn-paper-tex) 0 0 / 256px 256px, linear-gradient(180deg, #fffef8 0, #fff3cf 50%, #f7d98f 100%); box-shadow: inset 0 0 0 1px #fff, 0 0 0 3px rgba(255, 217, 138, .5), 0 0 16px rgba(255, 224, 150, .7), var(--mn-shadow-sm); }
.btn.tg-plq:focus-visible { outline: 2px solid var(--mn-sky-deep); outline-offset: 3px; }
.btn.tg-plq:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(138, 95, 30, .3); }
.btn.tg-plq:disabled, .btn.tg-plq:disabled:hover { color: #b3a48c; background: #efe6d2; border-color: #d9cbb0; box-shadow: none; }
/* the side diamonds of the plaques become tiny leaves */
.tg-plq > span::before, .tg-plq > span::after, .tg-prim .tg-pl::before, .tg-prim .tg-pl::after {
  width: 14px; height: 9px; margin-top: -4px;
  background: radial-gradient(ellipse at 40% 40%, var(--mn-leaf-hi), var(--mn-leaf) 60%, var(--mn-leaf-deep));
  clip-path: none;
  border-radius: 100% 0;
}
.tg-prim .tg-pl::before, .tg-prim .tg-pl::after { background: radial-gradient(ellipse at 40% 40%, #fff, #f2a3b2 60%, #c2566e); }
/* the leaves stay as a soft ornament at rest (title.css only shows them on hover), full on hover / focus; never on disabled */
.tg-plq > span::before, .tg-plq > span::after, .tg-prim .tg-pl::before, .tg-prim .tg-pl::after { opacity: .6; transition: opacity .15s; }
.tg-plq:hover > span::before, .tg-plq:hover > span::after, .tg-plq:focus-visible > span::before, .tg-plq:focus-visible > span::after,
.tg-prim:hover .tg-pl::before, .tg-prim:hover .tg-pl::after, .tg-prim:focus-visible .tg-pl::before, .tg-prim:focus-visible .tg-pl::after { opacity: 1; }
.btn.tg-plq.tg-out:hover, .btn.tg-plq.tg-out:focus-visible, .btn.tg-plq.cs-del:hover, .btn.tg-plq.cs-del:focus-visible { color: var(--mn-rose-deep); border-color: var(--mn-rose-deep); box-shadow: inset 0 0 0 1px #fff, 0 0 0 3px rgba(232, 144, 154, .35); }
/* panes (Opções / login / servers / account) */
.tg-pane-h { font: 700 calc(22px * var(--txt-h))/1.1 var(--f-title); color: var(--mn-gold-deep); text-shadow: 0 1px 0 #fff, 0 0 14px rgba(255, 217, 138, .8); }
.tg-pane-h::after { width: 220px; height: 14px; margin-top: 6px; background: url(../assets/ui/mana/divider.svg) center / 100% 14px no-repeat; }
.tg-zoom, .tg-ao-row { color: var(--mn-ink); background: rgba(255, 250, 236, .72); border: 1.5px solid var(--mn-line); border-radius: 10px; }
.tg-zoom-v { font: 700 calc(13px * var(--txt))/1 var(--f-num); color: var(--mn-gold-deep); }
.tg-auth-err, .tg-fmsg, .tg-g-err { color: var(--mn-rose-deep); }
.tg-auth-err.ok { color: var(--mn-leaf-deep); }
.tg-auth-note, .tg-fld-note, .tg-acct-d, .tg-acct-l, .tg-srv-note, .tg-g-err.soft { color: var(--mn-ink-3); }
.tg-auth-legacy { color: var(--mn-gold-deep); background: rgba(255, 217, 138, .25); border-color: var(--mn-line); border-radius: 8px; }
.tg-ao { border-top: 1px solid var(--mn-line); }
.tg-ao-h { font: 700 calc(11px * var(--txt))/1 var(--f-num); color: var(--mn-leaf-deep); }
.tg-ao-v { color: var(--mn-gold-deep); }
.tg-ao-form { background: rgba(255, 250, 236, .7); border: 1.5px solid var(--mn-line); border-radius: 10px; }
.tg-ao-t, .tg-fg-sent b { color: var(--mn-gold-deep); }
.tg-fg-sent { color: var(--mn-ink); }
.tg-eye { color: var(--mn-ink-3); }
.tg-eye:hover, .tg-eye.on { color: var(--mn-gold-deep); }
/* account card */
.tg-acct { border-radius: 14px; }
.tg-acct-l { font: 700 calc(10px * var(--txt))/1.1 var(--f-num); letter-spacing: 1px; }
.tg-acct-n { font: 800 calc(15px * var(--txt))/1.15 var(--f-ui); color: var(--mn-ink); }
.tg-gem { background: #c9b8a0; border-radius: 50%; clip-path: none; box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .2); }
.tg-gem.on { background: radial-gradient(circle at 35% 30%, #e6f7c4, var(--mn-leaf) 55%, var(--mn-leaf-deep)); }
.tg-gem.wait { background: radial-gradient(circle at 35% 30%, #fffbe6, var(--mn-gold) 55%, var(--mn-gold-deep)); }
/* server list */
.tg-srv-hd { font: 700 calc(11px * var(--txt))/1 var(--f-num); color: var(--mn-ink-3); border-bottom: 1px solid var(--mn-line); }
.btn.tg-srv-row {
  min-height: 64px;
  color: var(--mn-ink);
  background: var(--mn-paper-tex) 0 0 / 256px 256px, linear-gradient(180deg, #fffdf6, #f6e8c8);
  border: 1.5px solid var(--mn-line);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 #fff, var(--mn-shadow-sm);
}
.btn.tg-srv-row:hover, .btn.tg-srv-row:focus-visible { border-color: var(--mn-gold); background: var(--mn-paper-tex) 0 0 / 256px 256px, linear-gradient(180deg, #fffef8, #fff0c8); box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(255, 217, 138, .5), 0 0 14px rgba(255, 224, 150, .6); }
.tg-srv-flag { border-radius: 6px; border: 1.5px solid var(--mn-gold-mid); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 1px 2px rgba(74, 46, 20, .3); font-family: var(--f-num); font-weight: 800; }
.tg-srv-name b { font: 800 calc(18px * var(--txt))/1.1 var(--f-ui); color: var(--mn-ink); }
.tg-srv-name small, .tg-srv-pop small { font: 700 calc(10px * var(--txt))/1.2 var(--f-num); color: var(--mn-ink-3); }
.tg-srv-tag { font: 700 calc(9px * var(--txt))/1 var(--f-num); border-radius: 999px; padding: 3px 7px 2px; }
.tg-srv-tag.rec { color: #fffaf0; background: linear-gradient(180deg, #8cc96a, var(--mn-leaf-deep)); box-shadow: none; text-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.tg-srv-tag.last { color: var(--mn-gold-deep); border: 1px solid var(--mn-gold-mid); background: #fffbe6; }
.tg-srv-st { font-weight: 700; color: var(--mn-leaf-deep); }
.tg-srv-st.pre { color: #b5620f; }
.tg-srv-gem { border-radius: 50%; clip-path: none; background: radial-gradient(circle at 35% 30%, #e6f7c4, var(--mn-leaf) 55%, var(--mn-leaf-deep)); }
.tg-srv-st.pre .tg-srv-gem { background: radial-gradient(circle at 35% 30%, #fff0d0, #f0a040 55%, #b5620f); }
.tg-srv-bar { background: rgba(230, 208, 161, .5); border: 1px solid var(--mn-line); border-radius: 999px; }
.tg-srv-bar i { background: rgba(201, 149, 58, .2); border-radius: 999px; }
.tg-srv-bar i.on { background: linear-gradient(180deg, #d8f5a8, var(--mn-leaf) 55%, var(--mn-leaf-deep)); }
.tg-srv-ping { font: 700 calc(13px * var(--txt))/1 var(--f-num); color: var(--mn-ink-3); }
.tg-gbtn { border-radius: 999px; color: #1f1f1f; background: #fff; border: 1px solid #747775; box-shadow: 0 1px 2px rgba(60, 64, 67, .2); text-shadow: none; }
.tg-gbtn:hover { background: #f8faff; box-shadow: 0 1px 3px rgba(60, 64, 67, .3); }
.tg-gbtn:active { background: #eef3fd; }
.tg-gbtn .tg-g-l { color: #1f1f1f; }

/* ---------- 12. character select: heroes on flower daises in a sunny clearing ---------- */
.cs-realm { background: rgba(255, 250, 236, .85); border: 1.5px solid var(--mn-gold-mid); border-radius: 999px; box-shadow: var(--mn-shadow-sm); }
.cs-realm-l, .cs-realm small { font-family: var(--f-num); font-weight: 700; color: var(--mn-ink-3); }
.cs-realm b { font: 800 calc(16px * var(--txt))/1.1 var(--f-ui); color: var(--mn-gold-deep); }
.cs-roster::after { background: radial-gradient(ellipse 50% 60% at 50% 60%, rgba(255, 250, 220, .55), rgba(255, 250, 220, 0)); box-shadow: none; border: 0; }
.cs-beam { background: linear-gradient(180deg, rgba(255, 252, 230, 0), rgba(255, 246, 200, .55) 40%, rgba(255, 240, 190, .15)); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.cs-aura { background: radial-gradient(ellipse at center, rgba(255, 244, 200, .7), rgba(255, 244, 200, 0) 70%); }
.cs-ped { background: url(../assets/ui/mana/dais.svg) center bottom / 100% 100% no-repeat; border: 0; box-shadow: none; }
.cs-ped::before { display: none; }
.cs-ped::after { background: radial-gradient(ellipse at center, rgba(255, 246, 200, .9), rgba(255, 246, 200, 0) 70%); border: 0; box-shadow: none; }
.cs-slot.sel .cs-ped::after { box-shadow: none; }
.cs-fig { filter: saturate(.72) brightness(.97); }
.cs-slot:hover .cs-fig { filter: saturate(.9) brightness(1); }
.cs-slot.sel .cs-fig { filter: brightness(1.04) drop-shadow(0 0 8px rgba(255, 240, 190, .95)); }
.cs-nm b { font: 800 calc(17px * var(--txt))/1.1 var(--f-ui); color: var(--mn-ink-2); text-shadow: 0 1px 0 rgba(255, 252, 240, .9), 0 0 6px rgba(255, 252, 240, .9); }
.cs-nm small { font: 700 calc(10px * var(--txt))/1 var(--f-num); color: var(--mn-ink-3); text-shadow: 0 0 4px #fffaf0; }
.cs-slot.sel .cs-nm b { color: var(--mn-gold-deep); text-shadow: 0 1px 0 #fff, 0 0 10px rgba(255, 217, 138, .95); }
.cs-slot.sel .cs-nm small { color: var(--mn-ink-2); }
.cs-plus { color: var(--mn-gold-mid); }
.cs-plaque { border-radius: 16px; }
.cs-plaque::before { background: url(../assets/ui/mana/divider.svg) center / 100% 14px no-repeat; height: 14px; top: -7px; }
.cs-ptw { border-radius: 50% / 46%; background: radial-gradient(circle at 50% 40%, #fffdf6, var(--mn-well)); border: 2px solid var(--mn-gold-mid); box-shadow: inset 0 0 0 1px var(--mn-gold-hi), 0 0 0 3px rgba(255, 250, 236, .8), 0 0 0 4px var(--mn-line); overflow: hidden; }
/* the hero-name heading (like .cw-name) stays fixed with "Tamanho do texto": already large; bigger, names no longer fit a phone */
.cs-pname { font: 900 28px/1.05 var(--f-title); color: var(--mn-gold-deep); text-shadow: 0 1px 0 #fff, 0 0 14px rgba(255, 217, 138, .8); }
.cs-pcls { font: 700 calc(16px * var(--txt))/1.2 var(--f-ui); color: color-mix(in oklab, var(--cc) 55%, #3b2a1f); }
.cs-pmap { font: italic calc(14px * var(--txt))/1.3 var(--f-ui); color: var(--mn-ink-3); }
.cs-plaque.new .cs-pname { color: var(--mn-ink-2); }
.cs-ask-q b { color: var(--mn-rose-deep); }
.cs-ask-q span { color: var(--mn-ink-3); }
.cs-plaque.ask { border-color: var(--mn-rose-deep); }
.btn.cs-nav { border-radius: 50%; width: 40px; min-height: 40px; }
/* class cards (Criar personagem) */
.t-h, .cs-create .t-h { font: 700 calc(22px * var(--txt-h))/1.1 var(--f-title); color: var(--mn-gold-deep); text-shadow: 0 1px 0 #fff, 0 0 14px rgba(255, 217, 138, .8); }
.cs-create .t-h::before, .cs-create .t-h::after { height: 14px; background: url(../assets/ui/mana/divider.svg) right center / 220px 14px no-repeat; }
.t-card, .cs-create .t-card {
  background: radial-gradient(ellipse 70% 40% at 50% 78%, color-mix(in srgb, var(--cc) 18%, transparent), transparent 70%), linear-gradient(180deg, #fffdf6, #f3e3bd);
  border: 1.5px solid var(--mn-line);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 #fff, var(--mn-shadow-sm);
}
.cs-create .t-card { filter: saturate(.85); }
.t-card:hover, .cs-create .t-card:hover { border-color: var(--mn-gold); transform: translateY(-2px); filter: none; }
.t-card.sel, .cs-create .t-card.sel {
  background: radial-gradient(ellipse 70% 50% at 50% 70%, color-mix(in srgb, var(--cc) 26%, #fff8e0), transparent 72%), linear-gradient(180deg, #fffef8, #fff0c8);
  border: 2px solid var(--mn-gold-mid);
  box-shadow: inset 0 0 0 1px var(--mn-gold-hi), 0 0 0 3px rgba(255, 217, 138, .45), 0 0 18px rgba(255, 224, 150, .7);
  outline: none;
}
.cs-create .t-card.sel::before { background: url(../assets/ui/mana/crystal.svg) center / contain no-repeat; clip-path: none; width: 14px; height: 18px; top: -10px; margin-left: -7px; }
.t-card-n, .cs-create .t-card-n { font: 800 calc(15px * var(--txt))/1.1 var(--f-ui); color: var(--mn-ink); text-shadow: none; }
.t-card.sel .t-card-n { color: var(--mn-gold-deep); text-shadow: 0 0 8px rgba(255, 217, 138, .9); }
.t-card-r { font: 700 calc(10px * var(--txt))/1.1 var(--f-num); color: var(--mn-ink-3); }
.cs-create .t-ped, .t-ped { background: url(../assets/ui/mana/dais.svg) center / 100% 100% no-repeat; height: 14px; }
.cs-create .t-detail { background: rgba(255, 250, 236, .6); border: 1.5px solid var(--mn-line); border-radius: 12px; box-shadow: none; }
.t-d-stage { border: 1.5px solid var(--mn-line); border-radius: 12px; }
.t-rays { background: repeating-conic-gradient(from 0deg at 50% 70%, rgba(255, 236, 170, .45) 0 8deg, transparent 8deg 20deg); }
.t-d-name { font: 900 calc(28px * var(--txt-h))/1.05 var(--f-title); color: var(--mn-gold-deep); text-shadow: 0 1px 0 #fff, 0 0 14px rgba(255, 217, 138, .8); }
.t-d-title { font: italic 600 calc(16px * var(--txt))/1.2 var(--f-ui); color: var(--mn-leaf-deep); }
.t-d-role, .t-d-diff { color: var(--mn-ink-2); }
.t-d-desc { font: calc(15px * var(--txt))/1.45 var(--f-ui); color: var(--mn-ink); }
.t-stat-b { background: rgba(230, 208, 161, .5); border: 1px solid var(--mn-line); border-radius: 999px; overflow: hidden; }
.t-stat-b i { background: linear-gradient(180deg, #ffd0d4, color-mix(in oklab, var(--cc) 80%, #fff) 50%, var(--cc)); border-radius: 999px; }
.pip { border-color: var(--mn-gold-mid); border-radius: 50%; background: #fffdf6; }
.pip.on { background: var(--mn-gold); }
.t-foot, .t-foot span { color: var(--mn-ink-2); text-shadow: none; }
.t-foot { width: fit-content; max-width: calc(100% - 32px); margin-inline: auto; padding: 4px 14px; background: rgba(255, 250, 236, .8); border: 1px solid var(--mn-line); border-radius: 999px; box-shadow: var(--mn-shadow-sm); }
.t-err { color: var(--mn-rose-deep); }

/* ---------- 13. loading screen ---------- */
html body #loading { color: var(--mn-ink); font-family: var(--f-ui); image-rendering: auto; }
html body #loading .ld-title { opacity: 1; animation: none; }
html body #loading .ld-bar {
  height: 16px;
  padding: 3px;
  background: linear-gradient(180deg, #fffaf0, #f1e2bf);
  border: 1.5px solid var(--mn-gold-mid);
  border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(120, 80, 30, .3), 0 0 0 3px rgba(255, 250, 236, .6), 0 4px 12px rgba(74, 46, 20, .25);
}
html body #loading .ld-bar::before, html body #loading .ld-bar::after {     /* leaf buds at the ends */
  top: 50%; width: 14px; height: 9px; margin-top: -4.5px;
  background: radial-gradient(ellipse at 40% 40%, var(--mn-leaf-hi), var(--mn-leaf) 60%, var(--mn-leaf-deep));
  border-radius: 100% 0;
  box-shadow: none;
}
html body #loading .ld-bar::before { left: -14px; transform: scaleX(-1); }
html body #loading .ld-bar::after { right: -14px; }
html body #loading .ld-fill {
  position: relative;
  border-radius: 999px;
  background: linear-gradient(180deg, #e6f7c4, #8cc96a 45%, #4f9a45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 8px rgba(159, 240, 160, .6);
}
html body #loading .ld-fill::after {        /* the glowing seed at the tip */
  content: "";
  position: absolute;
  right: -5px; top: 50%;
  width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #b8fff0 45%, rgba(159, 240, 220, 0) 72%);
}
/* on a cream pill: on phones / tablets the text sits over the tree canopy */
html body #loading .ld-text { margin-top: 14px; padding: 6px 14px 5px; font: italic 600 calc(16px * var(--txt))/1 var(--f-ui); color: var(--mn-ink); letter-spacing: .5px; text-shadow: none; background: rgba(255, 250, 236, .85); border-radius: 999px; box-shadow: 0 2px 8px rgba(74, 46, 20, .18); animation: mnBreathText 1.6s ease-in-out infinite alternate; }
/* the plain loader main.js rebuilds when the markup is missing: the name in the title face */
html body #loading .ld-title:not(.tg-logo) { font: 900 clamp(34px, 9vw, 64px)/1.1 var(--f-title); color: #f6d77e; letter-spacing: .5px; text-shadow: 0 2px 0 #5a3610, 0 -1px 0 #5a3610, 1.5px 0 0 #5a3610, -1.5px 0 0 #5a3610, 0 0 18px rgba(255, 246, 210, .9); }
html body #loading.warn .ld-text { color: var(--mn-rose-deep); animation: none; }

/* ---------- 14. title background (js/title_mana_bg.js) ---------- */
#title-bg.mana { background: #f6e9cc; }
#title-bg.mana canvas { image-rendering: auto; }
.mb-g { position: absolute; inset: 0; }
.mb-sky, .mb-mtn { left: 0; top: 0; }
.mb-clouds { left: 0; top: 0; animation: mnDrift 200s linear infinite; will-change: transform; opacity: .95; }
.mb-tree, .mb-meadow { left: 0; }
.mb-isle { position: absolute; animation: mnBob 9s ease-in-out infinite alternate; will-change: transform; }
.mb-isle canvas { position: static !important; }
.mb-isle.i1 { animation-duration: 7s; animation-delay: -3s; }
.mb-isle.i2 { animation-duration: 11s; animation-delay: -6s; }
.mb-rays {
  position: absolute; width: 0; height: 0;
  opacity: .5;
  animation: mnRays 9s ease-in-out infinite alternate;
}
.mb-rays::before {
  content: ""; position: absolute; left: -90vmax; top: -90vmax; width: 180vmax; height: 180vmax;
  background: repeating-conic-gradient(from 8deg, rgba(255, 250, 225, .32) 0 4deg, rgba(255, 250, 225, 0) 4deg 13deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 22%, transparent 55%);
  mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 22%, transparent 55%);
}
.mb-halo { position: absolute; width: 0; height: 0; }
.mb-halo::before {
  content: ""; position: absolute; left: calc(var(--r) * -1); top: calc(var(--r) * -1); width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 252, 235, .7), rgba(255, 244, 210, .25) 45%, rgba(255, 240, 200, 0) 70%);
  animation: mnBreath 6s ease-in-out infinite alternate;
}
.mb-sparks, .mb-petals { position: absolute; inset: 0; pointer-events: none; }
.mb-spark {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  background:
    linear-gradient(90deg, transparent 40%, #fff 50%, transparent 60%) center / 100% 2px no-repeat,
    linear-gradient(0deg, transparent 40%, #fff 50%, transparent 60%) center / 2px 100% no-repeat,
    radial-gradient(circle, #fff 0 1.5px, rgba(255, 246, 200, .8) 2.5px, transparent 5px);
  filter: drop-shadow(0 0 3px rgba(255, 246, 200, .95));
  animation: mnTwinkleStar var(--d, 3s) ease-in-out var(--t, 0s) infinite;
}
.mb-spark.big { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.mb-petal {
  position: absolute; left: var(--x); top: -4vh;
  width: calc(12px * var(--s)); height: calc(8px * var(--s));
  border-radius: 100% 0 100% 0;
  background: radial-gradient(ellipse at 30% 30%, #fff4f6, #f6b0c0 60%, #e08aa0);
  opacity: .9;
  animation: mnPetal var(--d) linear var(--t) infinite;
  will-change: transform;
}
.mb-petal:nth-child(2n) { animation-name: mnPetalB; }   /* two sway paths; no var() inside keyframes (cheaper per-frame style) */
.mb-petal.w { background: radial-gradient(ellipse at 30% 30%, #fff, #fff4e6 60%, #f0d8c0); }
.mb-paper {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 95% 90% at 50% 45%, transparent 62%, rgba(140, 96, 44, .26) 100%),
    var(--mn-paper-tex) 0 0 / 256px 256px,
    var(--mn-paper-tex) 97px 61px / 384px 384px;   /* a second, larger grain breaks the tiling: a stronger watercolour-paper feel */
  opacity: .85;                      /* normal blending (no full-screen multiply layer over the animated sprites) */
}

/* ---------- 15. online list / ranking (net.js injects its own <style>: out-rank it) ---------- */
html #ae-net .pnl, html #ae-net .win { color: var(--mn-ink); }
html #ae-net .nu-rsub, html #ae-net .dim { color: var(--mn-ink-3); }

/* ---------- 16. motion ---------- */
@keyframes mnPop { 0% { opacity: 0; transform: translateY(6px) scale(.97); } 100% { opacity: 1; transform: none; } }
@keyframes mnBreath { from { opacity: .55; } to { opacity: 1; } }
@keyframes mnBreathText { from { opacity: .6; } to { opacity: 1; } }
@keyframes mnTwinkleStar { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes mnDrift { to { transform: translateX(-50%); } }
@keyframes mnBob { from { transform: translateY(-5px); } to { transform: translateY(6px); } }
@keyframes mnRays { from { opacity: .3; } to { opacity: .6; } }
@keyframes mnPetal {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  6% { opacity: .9; }
  25% { transform: translate(-3vw, 26vh) rotate(160deg); }
  50% { transform: translate(-16vw, 52vh) rotate(330deg); }
  75% { transform: translate(-19vw, 78vh) rotate(520deg); }
  94% { opacity: .85; }
  100% { transform: translate(-30vw, 108vh) rotate(700deg); opacity: 0; }
}
@keyframes mnPetalB {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  6% { opacity: .9; }
  25% { transform: translate(-9vw, 26vh) rotate(-150deg); }
  50% { transform: translate(-12vw, 52vh) rotate(-320deg); }
  75% { transform: translate(-25vw, 78vh) rotate(-500deg); }
  94% { opacity: .85; }
  100% { transform: translate(-30vw, 108vh) rotate(-680deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-clouds, .mb-isle, .mb-rays, .mb-halo::before, .mb-spark, #loading .ld-text { animation: none !important; }
  .mb-petals { display: none; }
  .mb-spark { opacity: .6; }
  .win.pop { animation: none; }
}

/* ---------- 17. responsive ---------- */
@media (max-width: 760px) {
  .win { border-radius: 0; }
  .win-h { border-radius: 0; height: 48px; }
  .win-t { font-size: calc(18px * var(--txt-h)); }
  .pnl.win::after { display: none; }        /* full-screen sheets: no corner overhang */
  .console .con-plate { border-radius: 16px 16px 0 0; }
}
@media (max-width: 760px) {
  .cs-create .t-form { background: var(--mn-paper-tex) 0 0 / 256px 256px, linear-gradient(180deg, var(--mn-paper-hi), var(--mn-paper-2)); border-top: 1.5px solid var(--mn-gold-mid); box-shadow: 0 -8px 16px rgba(74, 46, 20, .18); }
}
@media (max-width: 560px) {
  .cs-create .t-h { font-size: calc(22px * var(--txt-h)); }
  .cs-create .t-h::before, .cs-create .t-h::after { display: none; }
  .console .orb-v { font-size: calc(10px * var(--txt)); }
  .console .slot-btn .key { min-width: 13px; height: 13px; top: -7px; }
}

/* ---------- 18. connection dialog (css/online.css) ---------- */
.online-overlay { background: rgba(90, 64, 40, .38); backdrop-filter: blur(2px); }
.online-dialog { color: var(--mn-ink); }
.online-dialog h2 { font: 700 calc(26px * var(--txt-h))/1.15 var(--f-title); color: var(--mn-gold-deep); text-shadow: 0 1px 0 #fff, 0 0 12px rgba(255, 217, 138, .8); }
.online-dialog p { color: var(--mn-ink-2); }

/* ---------- 19. online badge / list / chat / ranking (net.js injects its <style> at run time: out-rank it) ---------- */
html body #ae-net { font-family: var(--f-ui); color: var(--mn-ink); }
html body #ae-net .nu-on { font: 700 calc(11px * var(--txt))/1 var(--f-num); color: var(--mn-ink-2); text-shadow: none; background: rgba(255, 250, 236, .92); border: 1.5px solid var(--mn-gold-mid); border-radius: 999px; box-shadow: var(--mn-shadow-sm); }
html body #ae-net .nu-on:hover, html body #ae-net .nu-on.open { color: var(--mn-gold-deep); border-color: var(--mn-gold); }
html body #ae-net .nu-dot { border-radius: 50%; clip-path: none; }
html body #ae-net .nu-on.st-online .nu-dot { background: radial-gradient(circle at 35% 30%, #e6f7c4, var(--mn-leaf) 55%, var(--mn-leaf-deep)); }
html body #ae-net .nu-lh { font: 700 calc(15px * var(--txt))/1.1 var(--f-title); color: var(--mn-gold-deep); text-shadow: 0 1px 0 #fff; border-bottom: 1px solid var(--mn-line); }
html body #ae-net .nu-lh span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #ae-net .nu-pn, html body #ae-net .nu-who { color: var(--r-magico); }
html body #ae-net .nu-pn { font: 700 calc(14px * var(--txt))/1.2 var(--f-ui); }   /* a <button>: it does not inherit the panel font */
html body #ae-net .nu-pr.me .nu-pn { color: var(--mn-gold-deep); }
html body #ae-net .nu-pr { border-bottom-color: rgba(201, 149, 58, .25); }
html body #ae-net .nu-ps, html body #ae-net .nu-note, html body #ae-net .nu-rsub { color: var(--mn-ink-3); }
html body #ae-net .nu-pl { font: 700 calc(10px * var(--txt))/1 var(--f-num); color: var(--mn-ink-2); }
html body #ae-net .nu-tab { height: 22px; padding: 0 9px; font: 700 calc(11px * var(--txt))/1 var(--f-num); color: var(--mn-ink); background: rgba(255, 250, 236, .9); border: 1px solid var(--mn-line); border-radius: 999px; }
html body #ae-net .nu-chat:not(.open):not(:hover) .nu-head { opacity: .88; }   /* net.js dims the closed chat's tabs to .42: unreadable on paper pills */
html body #ae-net .nu-tab:hover { color: var(--mn-ink); border-color: var(--mn-gold-mid); }
html body #ae-net .nu-tab.on { color: var(--mn-gold-deep); border-color: var(--mn-gold-mid); background: linear-gradient(180deg, #fffbe6, #ffe7a8); }
html body #ae-net .nu-chat:hover .nu-log, html body #ae-net .nu-chat.open .nu-log { background: rgba(255, 250, 236, .94); border: 1.5px solid var(--mn-gold-mid); border-radius: 12px; box-shadow: var(--mn-shadow); }
html body #ae-net .nu-ln { font: calc(14px * var(--txt))/calc(17px * var(--txt)) var(--f-ui); color: var(--mn-ink); text-shadow: none; background: linear-gradient(270deg, rgba(255, 250, 236, .88), rgba(255, 250, 236, .45)); border-radius: 0 8px 8px 0; }
html body #ae-net .nu-chat:hover .nu-ln, html body #ae-net .nu-chat.open .nu-ln { background: none; }
html body #ae-net .nu-ln.s .nu-msg { color: var(--mn-ink-3); }
html body #ae-net .nu-tag { font: 700 calc(9px * var(--txt))/1 var(--f-num); border-radius: 999px; padding: 2px 5px 1px; }
html body #ae-net .nu-tag.g { color: var(--mn-gold-deep); border-color: var(--mn-gold-mid); background: #fff3cf; }
html body #ae-net .nu-tag.m { color: var(--r-magico); border-color: #9cb6e8; background: #eaf2ff; }
html body #ae-net .nu-tag.s, html body #ae-net .nu-tag.o { color: var(--mn-ink-3); background: #f4ead2; border-color: var(--mn-line); }
html body #ae-net .nu-inp { color: var(--mn-ink); background: #fffdf6; border: 1.5px solid #d2b98a; border-radius: 10px; }
html body #ae-net .nu-inp::placeholder { color: #b3a48c; font-style: italic; }
html body #ae-net .nu-inp:focus { border-color: var(--mn-sky-deep); box-shadow: 0 0 0 3px rgba(143, 208, 216, .5); }
html body #ae-net .nu-lb { scrollbar-color: var(--mn-gold) rgba(201, 149, 58, .12); }
html body #ae-net .nu-note.warn { color: #b5520f; }
html body #ae-net .nu-em { box-shadow: inset 0 0 0 2px rgba(255, 250, 236, .45); }
/* chat: channel button (Mapa / Global) and the open panel on phones (net.js paints them dark) */
html body #ae-net .nu-ch { font: 700 calc(11px * var(--txt))/1 var(--f-num); color: var(--r-magico); background: linear-gradient(180deg, #f4f8ff, #dce8fb); border: 1.5px solid #9cb6e8; border-radius: 999px; }
html body #ae-net .nu-ch.g { color: var(--mn-gold-deep); background: linear-gradient(180deg, #fffbe6, #ffe7a8); border-color: var(--mn-gold-mid); }
html body #ae-net .nu-cbtn { font: 700 calc(11px * var(--txt))/1 var(--f-num); color: var(--mn-ink-2); text-shadow: none; background: rgba(255, 250, 236, .92); border: 1.5px solid var(--mn-gold-mid); border-radius: 999px; box-shadow: var(--mn-shadow-sm); }
html body #ae-net .nu-cbtn:hover, html body #ae-net .nu-cbtn.on { color: var(--mn-gold-deep); border-color: var(--mn-gold); }
html body #ae-net .nu-badge { color: #fff; background: var(--mn-rose-deep); border-radius: 999px; font: 800 calc(9px * var(--txt))/calc(14px * var(--txt)) var(--f-num); }
@media (hover: none), (max-width: 760px) {
  html body #ae-net .nu-chat.open { background: var(--mn-paper-tex) 0 0 / 256px 256px, linear-gradient(180deg, var(--mn-paper-hi), var(--mn-paper-2)); border: 2px solid var(--mn-gold-mid); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--mn-gold-hi), var(--mn-shadow); }
  html body #ae-net .nu-chat.open .nu-log { background: rgba(255, 250, 236, .7); border: 1px solid var(--mn-line); border-radius: 8px; }
}
/* ranking window */
html body #ae-net .nu-x { font: 700 14px/1 var(--f-ui); color: #fffaf0; text-shadow: 0 1px 0 #8e3248, 0 0 3px #8e3248; background: radial-gradient(circle at 38% 32%, #fff4f4, #f2b0ba 45%, #c25a6e); border: 2px solid var(--mn-gold-mid); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--mn-gold-hi), 0 1px 0 rgba(138, 95, 30, .4); }
html body #ae-net .nu-x:hover { border-color: var(--mn-gold); background: radial-gradient(circle at 38% 32%, #fff, #f6c2ca 45%, #d06a7e); }
html body #ae-net kbd { font: 400 calc(8px * var(--txt))/1 var(--f-pix); color: var(--mn-ink); background: linear-gradient(180deg, var(--mn-paper-hi), var(--mn-paper-2)); border: 1px solid var(--mn-gold-mid); border-radius: 4px; }
html body #ae-net .nu-rr { color: var(--mn-ink); background: rgba(255, 250, 236, .72); border: 1px solid var(--mn-line); border-radius: 8px; }
html body #ae-net .nu-rr.hd { font: 700 calc(10px * var(--txt))/1 var(--f-num); color: var(--mn-ink-3); background: none; border: 0; }
html body #ae-net .nu-rr.me { border-color: var(--mn-gold-mid); background: linear-gradient(90deg, rgba(255, 217, 138, .45), rgba(255, 250, 236, .8)); }
html body #ae-net .nu-rp { font: 800 calc(13px * var(--txt))/1 var(--f-num); color: var(--mn-ink-3); }
html body #ae-net .nu-rr.p1 .nu-rp { color: #a26600; }
html body #ae-net .nu-rr.p2 .nu-rp { color: #6b7280; }
html body #ae-net .nu-rr.p3 .nu-rp { color: #9a5a24; }
html body #ae-net .nu-rn { font-weight: 700; color: var(--mn-ink); }
html body #ae-net .nu-rn small, html body #ae-net .nu-rc, html body #ae-net .nu-rf { color: var(--mn-ink-3); }
html body #ae-net .nu-rl { font: 800 calc(13px * var(--txt))/1 var(--f-num); color: var(--mn-gold-deep); }
/* the open ranking is a window: lift #ae-net over the HUD (#ui, same z-index, earlier in the DOM wins otherwise), as
   net.js already does for the open chat (#ae-net.nu-open) — else the tracker / minimap / chat log cover it */
html body #ae-net:has(> .nu-rank:not(.nu-hide)) { z-index: 3; }
/* phones: style.css pins every .win full-screen (inset 0 !important), but net.js still centres the ranking with
   translate(-50%, -50%), which pushed it half off-screen (title and close button unreachable) */
@media (max-width: 760px) {
  html body #ae-net .nu-rank { transform: none; max-height: none; }
}

/* ---------- 20. party / trade / duel (css/social.css) ---------- */
html body #ae-social { --as-ink: #fffdf6; --as-panel: var(--mn-paper); --as-edge: var(--mn-gold-mid); --as-gold: var(--mn-gold-deep); --as-text: var(--mn-ink); --as-dim: var(--mn-ink-3); font-family: var(--f-ui); }
html body #ae-social .as-button { color: var(--mn-ink); text-shadow: 0 1px 0 #fff; background: linear-gradient(180deg, #fffdf6 0, #fbf0d6 45%, #f0dcae 100%); border: 1.5px solid var(--mn-gold-mid); border-radius: 999px; box-shadow: inset 0 1px 0 #fff, var(--mn-shadow-sm); }
html body #ae-social .as-button:hover:not(:disabled) { color: var(--mn-gold-deep); border-color: var(--mn-gold); background: linear-gradient(180deg, #fffef8 0, #fff3cf 45%, #f7d98f 100%); }
html body #ae-social .as-primary { color: #4a2a0e; background: linear-gradient(180deg, #fff6cc 0, #f6d77e 28%, #e0ad4c 70%, #c08a36 100%); border-color: #8a5f1e; }
html body #ae-social .as-cover { background: rgba(90, 64, 40, .38); }
html body #ae-social .as-window, html body #ae-social .as-invite, html body #ae-social .as-notice {
  color: var(--mn-ink);
  background: var(--mn-paper-tex) 0 0 / 256px 256px, radial-gradient(ellipse 120% 90% at 50% 30%, var(--mn-paper-hi), var(--mn-paper) 60%, var(--mn-paper-2));
  border: 2px solid var(--mn-gold-mid);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--mn-gold-hi), inset 0 0 0 4px rgba(255, 250, 236, .55), inset 0 0 0 5px rgba(201, 149, 58, .45), var(--mn-shadow);
}
html body #ae-social .as-window-head, html body #ae-social .as-trade-footer { background: linear-gradient(180deg, rgba(143, 208, 216, .22), rgba(200, 232, 154, .12)); border-color: var(--mn-line); }
html body #ae-social input, html body #ae-social select { color: var(--mn-ink); background: #fffdf6; border: 1.5px solid #d2b98a; border-radius: 10px; }
html body #ae-social .as-member { color: var(--mn-ink); background: rgba(255, 250, 236, .92); border: 1.5px solid var(--mn-line); border-radius: 12px; box-shadow: var(--mn-shadow-sm); }
html body #ae-social .as-meter { background: rgba(230, 208, 161, .6); border: 1px solid rgba(138, 95, 30, .45); border-radius: 999px; }
html body #ae-social .as-meter > span { background: linear-gradient(90deg, #e05a66, #f28a94); border-radius: 999px; }
html body #ae-social .as-meter.as-mana > span { background: linear-gradient(90deg, #3d7fd8, #8cc0ff); }
html body #ae-social .as-trade-grid { background: #f6ead0; border: 1.5px solid var(--mn-gold-mid); border-radius: 8px; }
html body #ae-social .as-grid-cell { background: linear-gradient(135deg, #fffaf0, #efe0bd); border-color: rgba(201, 149, 58, .3); }
html body #ae-social .as-grid-cell:hover { background: #fff3cf; }
html body #ae-social .as-offered-item { background: none; border-color: transparent; border-radius: 6px; box-shadow: none; }   /* only the item */
html body #ae-social .as-offered-item:hover:not(:disabled) { background: rgba(255, 231, 168, .45); border-color: var(--mn-gold-mid); }
html body #ae-social .as-item-qty { background: rgba(59, 42, 31, .82); border-radius: 3px; }
html body #ae-social .as-selected { background: #fff0c0; }
html body #ae-social .as-pk, html body #ae-social .as-duel-banner { color: var(--mn-gold-deep); background: rgba(255, 250, 236, .94); border: 1.5px solid var(--mn-gold-mid); border-radius: 999px; box-shadow: var(--mn-shadow-sm); }
html body #ae-social .as-import-warning { color: var(--mn-ink); background: #fff3cf; border-color: var(--mn-gold-mid); border-radius: 8px; }
html body #ae-social .as-danger, html body #ae-social .as-murderer { color: var(--mn-rose-deep); }
html body #ae-social .as-warning, html body #ae-social .as-import-status, html body #ae-social .as-outlaw { color: #b5520f; }
html body #ae-social .as-ready { color: var(--mn-leaf-deep); }
html body #ae-social .as-aggressor { color: var(--mn-lav-deep); }
html body #ae-social h2 { font: 700 calc(21px * var(--txt-h))/1.15 var(--f-title); text-transform: uppercase; letter-spacing: .04em; word-spacing: .22em; color: var(--mn-gold-deep); text-shadow: 0 1px 0 var(--mn-paper-hi), 0 0 12px rgba(255, 217, 138, .7); }
html body #ae-social h3 { font: 800 calc(17px * var(--txt))/1.25 var(--f-ui); color: var(--mn-gold-deep); }
html body #ae-social .as-close { width: 30px; min-height: 30px; height: 30px; color: #fffaf0; text-shadow: 0 1px 0 #8e3248, 0 0 3px #8e3248; background: radial-gradient(circle at 38% 32%, #fff4f4, #f2b0ba 45%, #c25a6e); border: 2px solid var(--mn-gold-mid); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--mn-gold-hi), 0 1px 0 rgba(138, 95, 30, .4); }
html body #ae-social .as-close:hover:not(:disabled) { color: #fff; border-color: var(--mn-gold); background: radial-gradient(circle at 38% 32%, #fff, #f6c2ca 45%, #d06a7e); }
html body #ae-social button:focus-visible, html body #ae-social input:focus-visible, html body #ae-social select:focus-visible { outline: 2px solid var(--mn-sky-deep); outline-offset: 2px; }
html body #ae-social .as-party-card, html body #ae-social .as-bound-note, html body #ae-social .as-import-hero { border-color: var(--mn-line); }
html body #ae-social .as-import-pick input { accent-color: var(--mn-leaf); }
html body #ae-social .as-party-toggle { font: 700 calc(12px * var(--txt))/1 var(--f-ui); min-height: 26px; padding: 3px 10px; }   /* social.css footprint; placement and hiding: §21 */
/* short landscape (phones on their side): the gate puts the logo left and the menu right (title.css) */
@media (max-height: 500px) {
  .tg-pane-h { font-size: calc(18px * var(--txt-h)); }           /* the narrow right column: "ESCOLHER SERVIDOR" on one line */
  .tg-pane-h::after { margin-top: 3px; }
}

/* ---------- 21. review fixes (2026-10-07) ---------- */
/* empty "+N" badges (the paper-doll slots keep an empty span) drew as stray dark dashes on the paper */
.it-plus:empty { display: none; }
/* amulet and ring slots: round gem sockets instead of tiny rounded squares */
.w-inv .slot:is([data-slot="amuleto"], [data-slot="anel1"], [data-slot="anel2"]) {
  border-radius: 50%;
  border-width: 1.5px;
  background: radial-gradient(circle at 38% 32%, #fffdf6, #f3e3bd 55%, #d9bc84);
  box-shadow: inset 0 0 0 1px var(--mn-gold-hi), inset 0 -2px 4px rgba(138, 95, 30, .35), 0 0 0 2px rgba(255, 250, 236, .75), 0 1px 3px rgba(74, 46, 20, .3);
}
.w-inv .slot.full:is([data-slot="amuleto"], [data-slot="anel1"], [data-slot="anel2"]) { background: radial-gradient(circle at 38% 32%, #fffdf6, #f3e3bd 55%, #d9bc84); }   /* no rarity tint */
/* an item this hero cannot use: a rose rim hugging the item and a paler item (the old hatched box read as a background) */
.sc.bad .sc-ic::before, .slot.bad::before, .it.bad::before { background: none; }
.it.bad img, .slot.bad .slot-ic, .sc.bad .sc-ic img { filter: grayscale(.55) drop-shadow(0 0 1px rgba(178, 58, 82, .95)) drop-shadow(0 0 1px rgba(178, 58, 82, .7)); }
.sc.bad .sc-ic { border-color: rgba(178, 58, 82, .5); border-style: dashed; }
/* dialog buttons: the sticky footer (quests.css) painted a flat cream band that read as an empty field; it now fades in */
.w-dialog .win-b > .dl-btns { background: linear-gradient(180deg, rgba(246, 234, 206, 0), rgba(246, 234, 206, .94) 14px); }

/* Máquina do Caos (inventory.css): the dark plum slab becomes a lavender mana well */
.chaos-box {
  color: var(--mn-ink);
  background: radial-gradient(ellipse at 26% 50%, #fffaf0 0, #ece2f8 45%, #c9b9e6 100%);
  border: 1.5px solid var(--mn-gold-mid);
  box-shadow: inset 0 0 0 1px var(--mn-gold-hi), inset 0 0 18px rgba(106, 79, 176, .28), var(--mn-shadow-sm);
}
.chaos-swirl { background: conic-gradient(rgba(143, 208, 216, 0), rgba(143, 208, 216, .6), rgba(185, 166, 220, .65), rgba(255, 217, 138, .55), rgba(143, 208, 216, 0)); opacity: .6; }
.chaos-slot { border-color: var(--mn-gold-mid); background: radial-gradient(circle at 50% 42%, rgba(255, 253, 246, .92), rgba(233, 222, 247, .6) 75%); }
.chaos-slot.full { border-color: var(--mn-gold); background: radial-gradient(circle at 50% 45%, #fffbe6, rgba(233, 222, 247, .75) 75%); }
.chaos-ic > img { filter: drop-shadow(0 2px 3px rgba(74, 46, 20, .45)); }
.chaos-name { color: var(--mn-ink); }
.chaos-name.bad { color: var(--mn-rose-deep); }
.chaos-from { color: var(--mn-ink-2); }
.chaos-to { color: var(--mn-gold-deep); text-shadow: 0 0 8px rgba(255, 217, 138, .9); }
.chaos-arrow { color: var(--mn-rose-deep); }
.chaos-ch span { color: var(--mn-lav-deep); }
.chaos-pct { color: var(--mn-ink); }
.chaos-pct[data-k="hi"] { color: var(--mn-leaf-deep); }
.chaos-pct[data-k="mid"] { color: #a26600; }
.chaos-pct[data-k="lo"] { color: var(--mn-rose-deep); }

/* party / trade windows: centred title over the vine divider, like every other window; disabled buttons as elsewhere */
html body #ae-social .as-window-head { position: relative; border-bottom: 0; }
html body #ae-social .as-window-head::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -7px; height: 14px; background: url(../assets/ui/mana/divider.svg) center / 100% 14px no-repeat; pointer-events: none; }
html body #ae-social .as-window-head h2 { text-align: center; }
html body #ae-social .as-window-head:has(> .as-close) h2 { padding-left: 42px; }
html body #ae-social .as-window-body { padding-top: 20px; }
html body #ae-social .as-button:disabled, html body #ae-social .as-button:disabled:hover { opacity: 1; color: #b3a48c; text-shadow: none; background: #efe6d2; border-color: #d9cbb0; box-shadow: none; }
html body #ae-social .as-offered-item:disabled, html body #ae-social .as-offered-item:disabled:hover { background: none; border-color: transparent; }   /* their offer: only the item */

/* zone badge (online_pvp.js paints it dark inline) → a cream pill; the state colour re-inked for paper */
html body #ae-social .as-zone { padding: 4px 10px 3px !important; font: 700 calc(11px * var(--txt))/1 var(--f-num) !important; letter-spacing: .5px; color: var(--mn-leaf-deep) !important; background: rgba(255, 250, 236, .94) !important; border: 1.5px solid var(--mn-gold-mid) !important; border-radius: 999px; box-shadow: var(--mn-shadow-sm); }
html body #ae-social .as-zone[style*="color: rgb(255, 158, 145)"] { color: var(--mn-rose-deep) !important; border-color: var(--mn-rose-deep) !important; }
html body #ae-social .as-pvp-toggle[style*="color: rgb(255, 158, 145)"] { color: var(--mn-rose-deep) !important; }
/* desktop: the Party button (social.css: inside the minimap's corner) and the zone pills (online_pvp.js: under the minimap's
   left edge, over the quest tracker) stand left of the minimap; below 1150px the boss bar reaches there, so they sit lower */
@media (min-width: 761px) {
  html body #ae-social .as-party-toggle { top: calc(12px + env(safe-area-inset-top)); right: calc(204px * var(--txt-h) + 20px + env(safe-area-inset-right)); }   /* 204px = style.css .hud-tr */
  html body #ae-social .as-zone { top: calc(12px + 32px * var(--txt) + env(safe-area-inset-top)) !important; right: calc(204px * var(--txt-h) + 20px + env(safe-area-inset-right)) !important; left: auto !important; }
  html body #ae-social .as-pvp-toggle { top: calc(12px + 60px * var(--txt) + env(safe-area-inset-top)) !important; right: calc(204px * var(--txt-h) + 20px + env(safe-area-inset-right)) !important; left: auto !important; }
}
@media (min-width: 761px) and (max-width: 1149px) {
  html body #ae-social .as-party-toggle { top: calc(132px + env(safe-area-inset-top)); }
  html body #ae-social .as-zone { top: calc(132px + 32px * var(--txt) + env(safe-area-inset-top)) !important; }
  html body #ae-social .as-pvp-toggle { top: calc(132px + 60px * var(--txt) + env(safe-area-inset-top)) !important; }
}
/* phones: the zone pill moves up onto the minimap's foot (it covered the quest tracker's title) */
@media (max-width: 760px) {
  html body #ae-social .as-zone { transform: translate(6px, calc(-100% - 9px)); }
}
/* while a window, the item sheet, the death screen, the open chat or the ranking is up, these HUD pills step aside: they
   sat on the inventory's close button and on every full-screen phone window header (#ae-net comes before #ui, #ae-social after) */
#ui:has(> .wins > .win:not(.hide), > .sheet:not(.hide), > .death.show:not(.hide)) ~ #ae-social :is(.as-party-toggle, .as-zone, .as-pvp-toggle),
#ae-net:has(> .nu-chat.open, > .nu-rank:not(.nu-hide)) ~ #ae-social :is(.as-party-toggle, .as-zone, .as-pvp-toggle) { visibility: hidden; }   /* fixed-depth :has (cheap to invalidate) */

/* short landscape (phones sideways): compact window heads and NPC speech, and the shop drops its portrait for the stock */
@media (max-height: 500px) {
  .win-h { height: 34px; }
  .win-h::after { display: none; }
  .win-t { font-size: calc(15px * var(--txt-h)); }
  .npc-line { font-size: calc(14px * var(--txt)); line-height: 1.38; }
  .npc-say { padding: 6px 10px; }
  .npc-say::before { top: 14px; }
  .w-shop .shop-top { display: none; }
  .win-b { padding-top: 10px; }
  .shop-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }   /* one swipeable row of tabs */
  .w-shop .shop-tabs .btn, .w-shop .shop-tabs .btn.sm { flex: 0 0 auto; }
}

/* ---------- "Tamanho do texto" on phones (owner 2026-10-10; core.js AE.setTxtScale → --txt) ----------
   on a 375px screen the HUD boxes keep their footprint (player frame | minimap + quest tracker, party frames), so their
   text follows half the step (--txt-h); the windows (full-screen sheets there) follow the whole step */
@media (max-width: 760px) {
  .pf, .hud-tr, #ae-social .as-party-frames { --txt: var(--txt-h); }
  .hud-tr .mm-name { --txt: 1; --txt-h: 1; }   /* the map name over the 140px minimap keeps its 1x size: bigger, it no longer fits */
  /* character select / creation: the names under the pedestals (3 per row), the class cards and the 3 narrow action buttons
     ("Criar personagem" / Apagar / Voltar) keep their 1x size; the selected hero and class are shown big below */
  .cs-slot, .t-card-n, .cs-acts .btn { --txt: 1; }
  /* creation: "Criar personagem" (ribbon art of a fixed height: two lines spilled out of it) + "Cancelar" share one row,
     so they keep their 1x size (already 21px / 16px) and stay on one line */
  .cs-cbtns .btn { --txt: 1; --txt-h: 1; }
  /* a full-screen window covers the party frames (they sat on top of its text) */
  #ui:has(> .wins > .win:not(.hide), > .sheet:not(.hide)) ~ #ae-social .as-party-frames { visibility: hidden; }
}
/* bigger text: a long quest name in the tracker wraps instead of ending in "…" */
.qt-q-n { white-space: normal; text-overflow: clip; }
/* character select buttons ("Criar personagem"): two lines rather than spilling out of the button */
.cs-cbtns .btn, .cs-acts .btn { white-space: normal; line-height: 1.1; }