/* Generated emblems and textures (inline SVG, so the CSP needs no image sources beyond data:). */
:root{
  --emb-anvil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 8h13c0 3 2 4.5 5 4.5h-4.5l-1 3.5H18v3.5H7V16h2.5l-1-3.5C5 12 3.5 10.5 3 8z' fill='%23c9a24e' fill-opacity='.25'/%3E%3Cpath d='M7 20h11'/%3E%3C/svg%3E");
  --emb-cauldron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4 10h16l-1.2 6.5A4.5 4.5 0 0 1 14.4 20H9.6a4.5 4.5 0 0 1-4.4-3.5z' fill='%23c9a24e' fill-opacity='.25'/%3E%3Cpath d='M3 10h18M7 20l-1.5 2M17 20l1.5 2'/%3E%3Ccircle cx='9' cy='5.5' r='1.3'/%3E%3Ccircle cx='14' cy='4' r='1'/%3E%3Ccircle cx='15.5' cy='7' r='1.4'/%3E%3C/svg%3E");
  --emb-pot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 9h14v7a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4z' fill='%23c9a24e' fill-opacity='.25'/%3E%3Cpath d='M3 9h18M2 12h3M19 12h3M9 3c0 2 2 2 2 4M14 3c0 2 2 2 2 4'/%3E%3C/svg%3E");
  --emb-chest:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 10a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v10H3z' fill='%23c9a24e' fill-opacity='.25'/%3E%3Cpath d='M3 12.5h18M10.5 11.5h3v4h-3z'/%3E%3Cpath d='M6 7V5.5M18 7V5.5'/%3E%3C/svg%3E");
  --emb-rune:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 2.5 18 8v13.5H6V8z' fill='%23c9a24e' fill-opacity='.2'/%3E%3Cpath d='M12 8v9M9 11l3 2.5 3-2.5M9.5 17h5'/%3E%3C/svg%3E");
  --emb-scroll:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M7 4h11a1.5 1.5 0 0 1 1.5 1.5V17a3 3 0 0 1-3 3H8.5A3.5 3.5 0 0 1 5 16.5V6A2 2 0 0 1 7 4z' fill='%23c9a24e' fill-opacity='.2'/%3E%3Cpath d='M8.5 20A3.5 3.5 0 0 1 5 16.5V15h8v1.5A3.5 3.5 0 0 0 16.5 20M9 8h7M9 11h7'/%3E%3C/svg%3E");
  --emb-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 2.5l2.3 7.2L21.5 12l-7.2 2.3L12 21.5l-2.3-7.2L2.5 12l7.2-2.3z' fill='%23c9a24e' fill-opacity='.25'/%3E%3C/svg%3E");
  --emb-swords:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4 4l9 9M20 4l-9 9M5.5 15.5l3 3M18.5 15.5l-3 3M3.5 20.5l3-3M20.5 20.5l-3-3'/%3E%3Cpath d='M14 3l7 .5-.5 7' opacity='.0'/%3E%3C/svg%3E");
  --emb-bed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 19V6M3 15h18v4M21 15v-3a3 3 0 0 0-3-3h-7v6' /%3E%3Ccircle cx='7' cy='11.5' r='2' fill='%23c9a24e' fill-opacity='.3'/%3E%3C/svg%3E");
  --emb-scales:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 3.5V20M5 7.5h14M8.5 20h7'/%3E%3Cpath d='M5 7.5 2.5 14a3 3 0 0 0 5 0zM19 7.5 16.5 14a3 3 0 0 0 5 0z' fill='%23c9a24e' fill-opacity='.2'/%3E%3C/svg%3E");
  --emb-letter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 6h18v12H3z' fill='%23c9a24e' fill-opacity='.2'/%3E%3Cpath d='M3 6.5 12 13l9-6.5'/%3E%3C/svg%3E");
  --emb-folk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='9' cy='8' r='3.2' fill='%23c9a24e' fill-opacity='.25'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M3 20c0-3.5 2.7-6 6-6s6 2.5 6 6M16 14.5c3 .2 5 2 5 5'/%3E%3C/svg%3E");
  --emb-door:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4.5 21V10.5a7.5 7.5 0 0 1 15 0V21z' fill='%23c9a24e' fill-opacity='.2'/%3E%3Cpath d='M12 11v10M9 16h-.01M15 16h-.01'/%3E%3C/svg%3E");
  --emb-pouch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M8 7h8l3 4.5c1.5 4-1 8.5-7 8.5s-8.500-4.500-7-8.500z' fill='%23c9a24e' fill-opacity='.25'/%3E%3Cpath d='M8 7 6.500 3.500h11L16 7M9 11.500c2 1 4 1 6 0'/%3E%3C/svg%3E");
  --emb-map:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 6.500 9 4l6 2.500 6-2.500v13.500l-6 2.500-6-2.500-6 2.500z' fill='%23c9a24e' fill-opacity='.2'/%3E%3Cpath d='M9 4v13.500M15 6.500V20'/%3E%3C/svg%3E");
  --emb-helm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 15V11a7 7 0 0 1 14 0v4l-2 4H7z' fill='%23c9a24e' fill-opacity='.22'/%3E%3Cpath d='M12 4v9M8.500 13h7'/%3E%3C/svg%3E");
  --emb-coin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='8.500' fill='%23c9a24e' fill-opacity='.25'/%3E%3Ccircle cx='12' cy='12' r='5.500'/%3E%3Cpath d='M12 9v6'/%3E%3C/svg%3E");
  --emb-move:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 3v18M3 12h18M12 3l-3 3M12 3l3 3M12 21l-3-3M12 21l3-3M3 12l3-3M3 12l3 3M21 12l-3-3M21 12l-3 3'/%3E%3C/svg%3E");
  --emb-swap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4 8h14M14 4l4 4-4 4M20 16H6M10 12l-4 4 4 4'/%3E%3C/svg%3E");
  --emb-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 3 20 6v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z' fill='%23c9a24e' fill-opacity='.25'/%3E%3Cpath d='M12 3v18'/%3E%3C/svg%3E");
  --emb-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M10 4h4v6h6v4h-6v6h-4v-6H4v-4h6z' fill='%23c9a24e' fill-opacity='.25'/%3E%3C/svg%3E");
  --emb-note:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M9 17V5l10-2v12'/%3E%3Ccircle cx='6.5' cy='17' r='2.5' fill='%23c9a24e' fill-opacity='.3'/%3E%3Ccircle cx='16.5' cy='15' r='2.5' fill='%23c9a24e' fill-opacity='.3'/%3E%3C/svg%3E");
  --emb-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M6 6l12 12M18 6 6 18' stroke-width='2.4'/%3E%3C/svg%3E");
  --emb-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12.500l4.500 4.500L19 7' stroke-width='2.600'/%3E%3C/svg%3E");
  --emb-hourglass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M6 3h12M6 21h12M7 3c0 5 5 6 5 9s-5 4-5 9M17 3c0 5-5 6-5 9s5 4 5 9'/%3E%3C/svg%3E");
  --emb-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4 5c3-1.500 6-1.500 8 .5 2-2 5-2 8-.5v13c-3-1.500-6-1.500-8 .5-2-2-5-2-8-.5z' fill='%23c9a24e' fill-opacity='.2'/%3E%3Cpath d='M12 5.500v13'/%3E%3C/svg%3E");
  --emb-dragon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4 18c2-6 6-8 9-8 1-3 3-4 6-4l-2 3 3 1-4 2c-.500 4-3 7-8 8z' fill='%23c9a24e' fill-opacity='.2'/%3E%3C/svg%3E");
  --emb-key:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='7' cy='12' r='4.200' fill='%23c9a24e' fill-opacity='.25'/%3E%3Ccircle cx='7' cy='12' r='1.400'/%3E%3Cpath d='M11.200 12H21.500M17.500 12v3.500M20.500 12v2.500M14.500 12v2'/%3E%3C/svg%3E");
  --emb-gear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3M5.600 5.600l2.100 2.100M16.300 16.300l2.100 2.100M18.400 5.600l-2.100 2.100M7.700 16.300l-2.100 2.100'/%3E%3C/svg%3E");
  --ink-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1d0e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12.500l4.500 4.500L19 7' stroke-width='2.600'/%3E%3C/svg%3E");
  --ink-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1d0e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M6 6l12 12M18 6 6 18' stroke-width='2.4'/%3E%3C/svg%3E");
  --ink-coin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1d0e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='8.500' fill='%232a1d0e' fill-opacity='.25'/%3E%3Ccircle cx='12' cy='12' r='5.500'/%3E%3Cpath d='M12 9v6'/%3E%3C/svg%3E");
  --ink-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1d0e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 2.5l2.3 7.2L21.5 12l-7.2 2.3L12 21.5l-2.3-7.2L2.5 12l7.2-2.3z' fill='%232a1d0e' fill-opacity='.25'/%3E%3C/svg%3E");
  --tex-leather:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='l' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62  0 0 0 0 .40  0 0 0 0 .20  .7 0 0 0 -.28'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23l)'/%3E%3C/svg%3E");
  --tex-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .2' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .40  0 0 0 0 .24  .48 0 0 0 -.19'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");
  --tex-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40  0 0 0 0 .28  0 0 0 0 .12  0 0 0 .95 -.34'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
  --tex-slate:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='s' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .75  0 0 0 0 .80  .42 0 0 0 -.17'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23s)'/%3E%3C/svg%3E");
  --tex-iron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='i' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8  0 0 0 0 .7  0 0 0 0 .6  .4 0 0 0 -.15'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23i)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   FredeMMO · theme.css — "Oak & Iron"
   The shared visual language of every window: planks bound with iron and bronze,
   parchment for things to be read, carved wells for things to be carried.
   Windows (windows.css) and the HUD (hud.css) build on the tokens and parts here.
   No images are loaded: textures and emblems are inline SVG above, so the CSP stays strict.
   ========================================================================== */

:root {
  /* Materials */
  --iron-0: #0b0907; --iron-1: #14110d; --iron-2: #1d1913; --iron-3: #2a241b;
  --oak-0: #17110b; --oak-1: #211910; --oak-2: #2f2417; --oak-3: #46341d;
  --bronze-0: #5a4520; --bronze-1: #8a6a30; --bronze-2: #b8923f; --bronze-3: #dcbb6a; --bronze-4: #f0dc9c;
  --parch-0: #e6d8b0; --parch-1: #d2be8c; --parch-2: #b39d6b;
  --ink-dark: #2a1d0e; --ink-dark-2: #4a3418; --ink-dark-3: #5f4826;
  --text: #eadfc3; --text-2: #c2b190; --text-3: #9d8f72;

  /* Meaning */
  --ok: #86c46e; --warn: #e3a64c; --bad: #e0705a; --ember: #e7812f;
  --rune: #7fd6e0; --mana: #4f84d6; --rage: #d4573a; --focus: #e0b84a; --xp: #a77ad8;
  --hp: #c2402f; --hp-hi: #e86b52; --hp-lo: #7d1f17;

  /* Rarity */
  --r-common: #a79f8c; --r-uncommon: #78c466; --r-rare: #5aa2ea; --r-epic: #b475e6;
  --r-legendary: #f2a444; --r-mythic: #ec72ff;

  /* Type: Palatino has lining figures (Georgia's old-style 1 read as a small "l"). */
  --font: 'Palatino Linotype', 'Book Antiqua', Palatino, 'URW Palladio L', 'Palatino LT STD', Georgia, serif;
  --fs-0: 11px; --fs-1: 12.5px; --fs-2: 14px; --fs-3: 16px; --fs-4: 20px; --fs-5: 26px;

  /* Space and shape: corners stay nearly square, like cut metal and wood. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --corner: 2px;

  /* Slot size; windows set it for their own grids. */
  --slot: 48px;
}

/* ---- rarity: one custom property drives slot rings, names and bars ---- */
.rarity-common { --rar: var(--r-common); }
.rarity-uncommon { --rar: var(--r-uncommon); }
.rarity-rare { --rar: var(--r-rare); }
.rarity-epic { --rar: var(--r-epic); }
.rarity-legendary { --rar: var(--r-legendary); }
.rarity-mythic { --rar: var(--r-mythic); }
strong.rarity-common, .rarity-common > strong, .rarity-common strong.name { color: #d9d2c0; }
strong.rarity-uncommon, .rarity-uncommon > strong, .rarity-uncommon strong.name { color: var(--r-uncommon); }
strong.rarity-rare, .rarity-rare > strong, .rarity-rare strong.name { color: var(--r-rare); }
strong.rarity-epic, .rarity-epic > strong, .rarity-epic strong.name { color: var(--r-epic); }
strong.rarity-legendary, .rarity-legendary > strong, .rarity-legendary strong.name { color: var(--r-legendary); }
strong.rarity-mythic, .rarity-mythic > strong, .rarity-mythic strong.name { color: var(--r-mythic); text-shadow: 0 0 8px #b44cff66; }

/* ==========================================================================
   Window frame
   Iron banding and a thin bronze keyline sit outside the plank face as stacked
   shadows; the four rivets are background layers, so they stay put while a window scrolls.
   ========================================================================== */
.win {
  --rivet: radial-gradient(circle, #f3dda0 0 1.2px, #b08a3c 2px, #4b3a17 3.6px, #0000 4.4px);
  box-sizing: border-box;
  padding: 0;
  margin: auto;
  border: 0;
  border-radius: var(--corner);
  color: var(--text);
  font: var(--fs-2)/1.45 var(--font);
  text-align: left;
  background:
    var(--rivet) left 4px top 4px / 10px 10px no-repeat,
    var(--rivet) right 4px top 4px / 10px 10px no-repeat,
    var(--rivet) left 4px bottom 4px / 10px 10px no-repeat,
    var(--rivet) right 4px bottom 4px / 10px 10px no-repeat,
    var(--grain, var(--tex-grain)),
    var(--glow, radial-gradient(130% 70% at 50% -12%, #4a3821 0, #0000 62%)),
    var(--face, linear-gradient(#251c12, #17110b));
  box-shadow:
    0 0 0 1px #000,
    0 0 0 4px var(--iron-2),
    0 0 0 5px var(--bronze-0),
    0 0 0 6px #000,
    0 26px 70px #000d;
}
.win::backdrop { background: radial-gradient(circle at 50% 40%, #0a0805aa, #050403e6); }
/* A window that must not dim the world (the bags and the character sheet sit beside it). */
.win.aside::backdrop { background: transparent; }
.win[open].tall { display: flex; flex-direction: column; overflow: hidden; }

.win-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
  padding: 11px 16px 11px 18px;
  background:
    linear-gradient(#00000052, #0000001f 70%, #00000040);
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 var(--bronze-0), 0 2px 0 #000;
}
.win-head > div:first-of-type { flex: 1 1 auto; min-width: 0; }
.win-head::before {
  content: '';
  flex: 0 0 34px;
  height: 34px;
  background: var(--emblem, var(--emb-star)) center / 22px no-repeat,
    radial-gradient(circle at 50% 38%, #3a2d1b, #120d08);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px var(--bronze-0), 0 1px 0 #ffffff12;
  border-radius: 50%;
}
/* The one fixed ornament: a bronze diamond where the title band meets the window. */
.win-head::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -6px;
  width: 9px; height: 9px;
  margin-left: -4px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--bronze-3), var(--bronze-1));
  border: 1px solid #000;
  box-shadow: 0 0 0 1px var(--bronze-0);
  z-index: 2;
}
.win-head h2 {
  margin: 0;
  font: 600 var(--fs-4)/1.15 var(--font);
  font-variant: small-caps;
  letter-spacing: .05em;
  color: var(--bronze-4);
  text-shadow: 0 2px 0 #000, 0 0 14px #b8923f33;
}
.win-head p {
  margin: 2px 0 0;
  font: italic var(--fs-1)/1.35 var(--font);
  color: var(--text-2);
}
.win-head .win-gold { font-size: var(--fs-2); color: var(--bronze-4); white-space: nowrap; }

/* The close plate: an iron square with a cut cross. The ✕ in the markup is hidden. */
.win .win-close {
  flex: 0 0 auto;
  position: relative;
  width: 32px; height: 32px;
  padding: 0;
  font-size: 0;
  color: transparent;
  background: var(--emb-close) center / 16px no-repeat, linear-gradient(#3d3122, #1b140c);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px var(--bronze-0), inset 0 1px 0 #ffffff1e;
  border-radius: var(--corner);
  cursor: pointer;
}
.win .win-close:hover { background-color: #5a2a1d; filter: brightness(1.2); }
.win .win-close:active { transform: translateY(1px); }

.win-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--sp-3) 18px var(--sp-4); }

/* The strip along the bottom where a window says what just happened. */
.win-status, .win [role=status].win-status {
  flex: 0 0 auto;
  margin: 0;
  min-height: 2.3em;
  padding: 8px 18px;
  background: linear-gradient(#0000003a, #00000066);
  border-top: 1px solid #000;
  box-shadow: 0 -1px 0 var(--bronze-0);
  color: var(--bronze-3);
  font: italic var(--fs-1)/1.4 var(--font);
}
.win-status:empty::before { content: '\00a0'; }

/* ---- headings and rules inside windows ---- */
.win h3 {
  margin: 0;
  font: 600 var(--fs-1)/1.2 var(--font);
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: .12em;
  color: var(--bronze-3);
}
.win h3.rule, .rule-title {
  display: flex; align-items: center; gap: 10px;
}
.win h3.rule::after, .rule-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--bronze-1), #0000);
}

/* ==========================================================================
   Buttons: forged plates, not pills. Brass for the act, iron for the alternative.
   Low specificity (:where) so a window's own parts can override cleanly.
   ========================================================================== */
.win :where(button), :where(.btn) {
  font: 600 var(--fs-1)/1.1 var(--font);
  letter-spacing: .04em;
  min-height: 32px;
  padding: 7px 14px;
  color: #1d1306;
  background: linear-gradient(#e6cc84 0%, #bd9441 52%, #9b7529 100%);
  border: 1px solid #000;
  border-radius: var(--corner);
  box-shadow: inset 0 1px 0 #fff9, inset 0 -2px 0 #0004, inset 0 0 0 1px #6b4f18, 0 2px 3px #0007;
  text-shadow: 0 1px 0 #ffffff55;
  cursor: pointer;
  transition: filter .12s, transform .06s;
}
.win :where(button):hover:not(:disabled) { filter: brightness(1.12); }
.win :where(button):active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 5px #0007, inset 0 0 0 1px #6b4f18; }
.win :where(button.secondary), :where(.btn.secondary) {
  color: var(--text);
  background: linear-gradient(#41352a, #281f16 60%, #1d160e);
  box-shadow: inset 0 1px 0 #ffffff20, inset 0 0 0 1px var(--bronze-0), 0 2px 3px #0007;
  text-shadow: 0 1px 0 #000;
}
.win :where(button:disabled) {
  cursor: not-allowed;
  filter: saturate(.25) brightness(.7);
  opacity: .62;
}
.win :where(button):focus-visible, .win :where(input, select, textarea):focus-visible, .win [tabindex]:focus-visible {
  outline: 2px solid var(--bronze-4);
  outline-offset: 2px;
}
.win button.danger { color: #fbe9d6; background: linear-gradient(#a34633, #6e2418); text-shadow: 0 1px 0 #000; }

kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 1px 5px 2px;
  font: 600 .86em/1.2 var(--font);
  text-align: center;
  color: var(--bronze-4);
  background: linear-gradient(#2e2519, #181109);
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--bronze-0), 0 1px 0 #ffffff14;
}

/* ==========================================================================
   Tabs and filters: ledger tabs with cut corners that hang from the rail.
   ========================================================================== */
.tabs, .auction-tabs, .craft-tabs, .bank-filters, .craft-toolbar, .account-tabs {
  display: flex; flex-wrap: wrap; gap: 3px;
  padding: 8px 14px 0;
  border-bottom: 1px solid var(--bronze-1);
  background: #0000002a;
}
.tab, .win .tabs button, .win .auction-tabs button, .win .craft-tabs button, .win .account-tabs button, .win .bank-filter, .win .craft-filter {
  position: relative;
  min-height: 28px;
  padding: 6px 14px 5px;
  margin-bottom: -1px;
  font: 600 var(--fs-1)/1.1 var(--font);
  letter-spacing: .05em;
  color: var(--text-2);
  background: linear-gradient(#2a2117, #17110a);
  border: 1px solid #000;
  border-bottom: 0;
  border-radius: 0;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 #ffffff1a;
  text-shadow: 0 1px 0 #000;
  white-space: nowrap;
}
.win .tabs button:hover, .win .auction-tabs button:hover, .win .craft-tabs button:hover, .win .account-tabs button:hover,
.win .bank-filter:hover, .win .craft-filter:hover { color: var(--text); filter: brightness(1.2); }
.win .tabs button[aria-selected=true], .win .tabs button.active, .win .auction-tabs button[aria-selected=true],
.win .craft-tabs button.active, .win .account-tabs button[aria-selected=true], .win .bank-filter.active, .win .craft-filter.active, .win .craft-filter[aria-pressed=true] {
  color: #1d1306;
  background: linear-gradient(#e6cc84, #b48a38);
  box-shadow: inset 0 1px 0 #fff9;
  text-shadow: 0 1px 0 #ffffff55;
}

/* ==========================================================================
   Form fields: a recessed groove in the plank.
   ========================================================================== */
.win :where(input:not([type=checkbox]):not([type=range]), select, textarea) {
  font: var(--fs-2)/1.3 var(--font);
  color: var(--text);
  background: linear-gradient(#0b0805, #15100a);
  border: 1px solid #000;
  border-radius: var(--corner);
  box-shadow: inset 0 2px 4px #000c, 0 1px 0 #ffffff14, inset 0 0 0 1px #2c2216;
  padding: 7px 9px;
  min-width: 0;
}
.win :where(input, textarea)::placeholder { color: var(--text-3); font-style: italic; }
.win :where(input[type=checkbox]) { accent-color: var(--bronze-2); width: 15px; height: 15px; }
.win :where(select) { cursor: pointer; }
.win :where(label) { color: var(--text-2); }

/* ==========================================================================
   Parchment: for things that are read (quests, recipes, letters).
   ========================================================================== */
.paper {
  --ink: var(--ink-dark);
  color: var(--ink-dark);
  background:
    var(--tex-paper),
    radial-gradient(120% 100% at 30% 10%, #ecdfba, #cdb788 75%, #b59f6c);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px #fff4, inset 0 0 38px #6b4f1e66, 0 2px 6px #000a;
}
.paper h3, .paper h4 { color: #6b4210; text-transform: none; font-variant: normal; letter-spacing: .01em; font-size: var(--fs-3); }
.paper .hint, .paper small { color: var(--ink-dark-2); }
.paper :where(button) { color: #1d1306; }
.paper :where(button.secondary) { color: var(--text); }

/* ==========================================================================
   Item icons and slots: carved wells; the rarity is the ring set into the rim.
   ========================================================================== */
.item-icon {
  display: grid; place-items: center;
  flex: 0 0 auto;
  color: #cdbd98;
}
.item-icon { width: 40px; height: 40px; } /* a default; every window sizes its own */
.item-icon svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 1px #000c); }
.loot-card-head .item-icon { width: 44px; height: 44px; padding: 5px; background: radial-gradient(circle at 50% 30%, #2a2013, #0f0b07 80%); border: 1px solid #000; box-shadow: inset 0 0 0 2px var(--rar, #34291a); }

.bag-slot, .char-slot, .bank-slot, .bank-bag-icon, .craft-item-icon, .bag-tool, .bag-place, .slot, .party-portrait-slot {
  position: relative;
  display: grid; place-items: center;
  padding: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 30%, #2a2013 0, #0f0b07 80%);
  border: 1px solid #000;
  border-radius: var(--corner);
  box-shadow:
    inset 0 0 0 2px var(--rar-ring, #34291a),
    inset 0 3px 7px #000d,
    0 1px 0 #ffffff12;
  transition: box-shadow .12s, transform .08s;
}
.bag-slot[class*=rarity-], .char-slot[class*=rarity-], .bank-slot[class*=rarity-], .craft-item-icon[class*=rarity-], .bag-tool[class*=rarity-], .slot[class*=rarity-] {
  --rar-ring: color-mix(in srgb, var(--rar) 82%, #000);
  box-shadow: inset 0 0 0 2px var(--rar-ring), inset 0 0 12px color-mix(in srgb, var(--rar) 28%, transparent), inset 0 3px 7px #000d, 0 1px 0 #ffffff12;
}
.bag-slot.rarity-common, .char-slot.rarity-common, .bank-slot.rarity-common, .craft-item-icon.rarity-common, .bag-tool.rarity-common {
  --rar-ring: #5c5240;
  box-shadow: inset 0 0 0 2px #5c5240, inset 0 3px 7px #000d, 0 1px 0 #ffffff12;
}
.bag-slot.empty, .char-slot.empty, .bank-slot.empty { --rar-ring: #261d12; opacity: .8; }
.bag-slot:not(.empty):hover, .char-slot:hover, .bank-slot:not(.empty):hover, .bag-tool:hover {
  box-shadow: inset 0 0 0 2px var(--bronze-4), inset 0 0 14px #dcbb6a55, inset 0 3px 7px #000d;
}
.bag-slot.chosen, .char-slot.chosen, .bank-slot.selected {
  box-shadow: inset 0 0 0 2px var(--bronze-4), 0 0 0 2px #000, 0 0 0 3px var(--bronze-3), inset 0 0 14px #dcbb6a66;
  z-index: 1;
}
.drop-over { outline: 2px dashed var(--bronze-4) !important; outline-offset: -3px; background-color: #3a2c14 !important; }
.bag-count, .bank-count {
  position: absolute; right: 3px; bottom: 1px;
  font: 700 12px/1.1 var(--font);
  color: #fff6dc;
  text-shadow: 0 0 2px #000, 0 1px 1px #000, 1px 0 1px #000, -1px 0 1px #000;
  background: none; padding: 0;
  pointer-events: none;
}

/* ==========================================================================
   Bars: a trough with notches and a lit edge; used for health, resource, XP and goals.
   ========================================================================== */
.trough {
  position: relative;
  height: 12px;
  background: linear-gradient(#050302, #17100a);
  border: 1px solid #000;
  box-shadow: inset 0 1px 3px #000, 0 1px 0 #ffffff14, 0 0 0 1px var(--bronze-0);
  border-radius: 1px;
  overflow: hidden;
}
.trough > .fill { height: 100%; width: 0; background: linear-gradient(var(--hi, #e0b86a), var(--lo, #8a6628)); box-shadow: inset 0 1px 0 #ffffff55; transition: width .25s; }
.trough::after { /* notches every tenth */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, #0000 0 calc(10% - 1px), #00000070 calc(10% - 1px) 10%);
}

/* ==========================================================================
   Scrollbars
   ========================================================================== */
.win * { scrollbar-width: thin; scrollbar-color: var(--bronze-1) #0c0906; }
.win ::-webkit-scrollbar { width: 11px; height: 11px; }
.win ::-webkit-scrollbar-track { background: #0c0906; box-shadow: inset 0 0 3px #000; }
.win ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #b8923f, #7a5c26); border: 1px solid #000; border-radius: 1px; box-shadow: inset 0 1px 0 #fff6; }

/* ==========================================================================
   Tooltips and item cards: one plate with a rarity band across the top.
   ========================================================================== */
.loot-card.item-tip { position: fixed; z-index: 90; width: 250px; pointer-events: none; }
.loot-card {
  --rar: var(--r-common);
  position: relative;
  padding: 10px 12px 9px;
  color: var(--text);
  font: var(--fs-1)/1.4 var(--font);
  background: var(--tex-grain), linear-gradient(#2a2015, #130e08);
  border: 1px solid #000;
  border-radius: var(--corner);
  box-shadow: 0 0 0 1px var(--bronze-0), 0 0 0 2px #000, 0 10px 28px #000c;
  animation: tip-in .14s ease-out;
}
.loot-card::before { /* rarity band */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--rar), color-mix(in srgb, var(--rar) 30%, transparent));
}
.loot-card.rarity-uncommon { --rar: var(--r-uncommon); } .loot-card.rarity-rare { --rar: var(--r-rare); }
.loot-card.rarity-epic { --rar: var(--r-epic); } .loot-card.rarity-legendary { --rar: var(--r-legendary); }
.loot-card.rarity-mythic { --rar: var(--r-mythic); box-shadow: 0 0 0 1px var(--bronze-0), 0 0 0 2px #000, 0 0 22px #a94cff55, 0 10px 28px #000c; }
.loot-card-head { display: flex; gap: 10px; align-items: center; }
.loot-card-name { display: flex; flex-direction: column; min-width: 0; }
.loot-card-name strong { font: 600 var(--fs-3)/1.2 var(--font); color: var(--rar); overflow-wrap: anywhere; }
.loot-card.rarity-common .loot-card-name strong { color: #e4dcc9; }
.loot-card-stat { font-size: var(--fs-1); color: var(--text-2); }
.loot-card-vs { margin: 8px 0 2px; font: 600 var(--fs-0)/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-2); }
.loot-card-diff { list-style: none; margin: 0; padding: 0; }
.loot-card-diff .up { color: var(--ok); } .loot-card-diff .down { color: var(--bad); } .loot-card-diff .same { color: var(--text-3); }
.loot-card-why { margin: 6px 0 0; color: var(--bad); }
.loot-card-desc { margin: 6px 0 0; color: var(--text-2); font-style: italic; }
.loot-card-effect { margin: 4px 0 0; color: var(--ok); }
.loot-card-bind { margin: 3px 0; color: var(--bronze-3); font-size: var(--fs-0); letter-spacing: .06em; text-transform: uppercase; }
.loot-card-buttons { display: flex; gap: 6px; margin-top: 8px; }
.loot-card-buttons button { flex: 1; }
.item-set { color: var(--r-epic); margin: 4px 0 0; }
@keyframes tip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Small recurring parts
   ========================================================================== */
.hint { color: var(--text-3); font-style: italic; }
.coin { /* a gold amount: figure first, the coin after */
  display: inline-flex; align-items: center; gap: 5px; color: var(--bronze-4); white-space: nowrap;
}
.coin::after { content: ''; width: 14px; height: 14px; background: var(--emb-coin) center / contain no-repeat; }
.pip { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); background: #3a2f20; border: 1px solid #000; box-shadow: 0 0 0 1px var(--bronze-0); }
.pip.on { background: var(--ok); box-shadow: 0 0 0 1px #2d4a22, 0 0 7px #86c46e88; }

@media (prefers-reduced-motion: reduce) {
  .loot-card { animation: none; }
  .win *, .win { transition: none !important; }
}

/* ---- Plain pages (privacy): a parchment sheet on the oak ----------------------------- */
body.page { background: var(--tex-grain), linear-gradient(#251c12, #120d08); }
body.page .page-text { max-width: 720px; margin: 24px auto 40px; padding: 26px 32px 36px; color: var(--ink-dark); font: 16px/1.65 var(--font); background: var(--tex-paper), radial-gradient(120% 100% at 30% 0, #ecdfba, #cdb788 78%, #b59f6c); border: 1px solid #000; box-shadow: inset 0 0 0 1px #fff4, inset 0 0 50px #6b4f1e66, 0 6px 18px #000b; }
body.page .page-text h1 { font: 600 30px/1.15 var(--font); color: #5a2f0d; margin: 12px 0 8px; }
body.page .page-text h2 { font: 600 20px/1.2 var(--font); color: #6b4210; margin: 26px 0 6px; }
body.page .page-text a { color: #7a2f10; }
@media (max-width: 600px) { body.page .page-text { margin: 0; padding: 18px 16px 30px; border-left: 0; border-right: 0; } }