/* "Esprit" theme, second part: the HUD around the game (unit frames, portrait, minimap and its buttons, C / A bars, bag, tooltip, menus, chat) in deep plum and lilac
   instead of wood and bronze; the bag follows Screenchots/Ui/Inventory.png (pale cells touching, struck locked rows, the bag row and the purse footer). Loaded after theme-spirit.css. */
/* unit frames and the portrait */
html .frame, html .frame.player > .famframe { background: linear-gradient(rgba(51, 48, 66, 0.94), rgba(18, 17, 23, 0.96)); }
html .pt-img { background: radial-gradient(circle at 40% 30%, #6a6682, #1e1c28 75%); }
html .pt-ring circle:nth-child(3) { stroke: #2c2a37; } html .pt-ring circle:nth-child(4) { stroke: rgba(216, 213, 236, 0.75); }
html .pt-ring circle:first-child { stroke: #14131a; }
html .pt-lv { color: #fff; background: linear-gradient(#9c96c2, #484463); box-shadow: 0 0 0 2px #14131a, inset 0 1px 0 rgba(240, 239, 248, 0.8), inset 0 0 0 1px #cac7e0; }
html .tinfo { color: #d8d5ec; }
html .trow { background: linear-gradient(rgba(51, 48, 66, 0.9), rgba(18, 17, 23, 0.92)); box-shadow: 0 0 0 1px #14131a, inset 0 0 0 1px rgba(164, 160, 191, 0.75), 0 2px 6px rgba(0, 0, 0, 0.4); }
html .famrow + .famrow { border-top-color: rgba(164, 160, 191, 0.35); }
html .famstats { color: #dad9e5; }
/* the minimap: a plum ring with a lilac rim; its window buttons are violet tiles */
html .minimap { background: #0c0b11; box-shadow: 0 0 0 2px #14131a, 0 0 0 5px #585374, 0 0 0 6px #cac7e0, 0 0 0 8px #14131a, 0 6px 16px rgba(0, 0, 0, 0.55); }
html .hudbtns { background: #383645; box-shadow: 0 0 0 1px #14131a, 0 4px 10px rgba(0, 0, 0, 0.4); }
html .hudbtns .btn.rbtn, html .hudbtns .btn:not(.rbtn) { background: linear-gradient(#595670, #3a374b); color: var(--ic, #eeecf7); }
html .hudbtns .btn.rbtn .glyph { --glyph-cut: #3a374b; }
html .hudbtns .btn.rbtn:hover { background: linear-gradient(#767292, #4d4963); color: #fff; }
html .hudbtns .btn.rbtn:hover .glyph { --glyph-cut: #4d4963; }
html .hudbtns .btn.rbtn:active { background: #2c2a37; }
html .mm-ring .hudbtns .btn { box-shadow: 0 0 0 1px #14131a, inset 0 0 0 1px rgba(202, 199, 224, 0.55), 0 2px 5px rgba(0, 0, 0, 0.5); }
html .hudbtns .btn[title^="Personnage"] { --ic: #f0eff8; } html .hudbtns .btn[title^="Inventaire"] { --ic: #dcd9ee; } html .hudbtns .btn[title^="Journal"] { --ic: #eeecf7; } html .hudbtns .btn[title^="Menu"] { --ic: #dad9e5; }
html .info, html .env-badge { background: rgba(18, 17, 23, 0.72); box-shadow: 0 0 0 1px #14131a, inset 0 0 0 1px rgba(164, 160, 191, 0.35); }
html .kf { background: linear-gradient(90deg, rgba(18, 17, 23, 0), rgba(18, 17, 23, 0.88) 30%); box-shadow: inset -3px 0 0 #6a6682; }
html .kf.mine { box-shadow: inset -3px 0 0 #d8d5ec, 0 0 8px rgba(174, 168, 216, 0.35); }
/* the C / A bars: the same violet strip as the main bar */
html .abup { background: #49465a; box-shadow: 0 0 0 1px #14131a, inset 0 0 0 1px rgba(202, 199, 224, 0.45), 0 4px 10px rgba(0, 0, 0, 0.4); }
html .abg { background: #6a6682; color: #f0eff8; }
html .abg:hover:not(:disabled) { background: #8e88b3; }
html .abg.pin.on { background: #d8d5ec; color: #2c2a37; }
/* tooltip, right-click menu, chat */
html #tooltip { background: linear-gradient(rgba(42, 40, 56, 0.96), rgba(18, 17, 23, 0.97)); box-shadow: 0 0 0 2px #14131a, inset 0 0 0 1px #cac7e0, inset 0 0 0 2px #49465a, var(--drop); }
html #tooltip h4, html .link-card h4 { color: #d2cee9; }
html .ctxmenu { background: linear-gradient(rgba(42, 40, 56, 0.97), rgba(18, 17, 23, 0.97)); }
html .ctx-head { border-bottom-color: #6a6682; }
html .chat:hover .chat-log, html .chat:focus-within .chat-log, html .chat.open .chat-log { background: rgba(13, 13, 18, 0.62); scrollbar-color: #767292 rgba(0, 0, 0, 0.3); }
html .chat-log { background: rgba(13, 13, 18, 0.18); }
html .chat-input { border-color: #585374; background: rgba(13, 13, 18, 0.92); }
html .chat-input:focus { outline-color: #aea8d8; }
/* the bag (Screenchots/Ui/Inventory.png): pale lilac cells, struck locked rows, the bag row and the purse footer on lilac plates */
html .pk-frame, html .pk-bags, html .pk-foot { background: #b7b4c9; box-shadow: inset 0 0 0 2px #6a6682, inset 0 0 0 3px #edecf5, 0 1px 0 #fff; }
html .pk-scroll { scrollbar-color: #767292 #dad9e5; }
html .pk-scroll::-webkit-scrollbar-track { background: #dad9e5; border-left-color: #9692b2; }
html .pk-scroll::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #9c96c2, #716b94); border-color: #383645; }
html .pk-grid .gf-tile:not(.full) { border-color: #c2bfd3; background: linear-gradient(#f5f4fa, #e4e3ed); box-shadow: inset 0 0 0 1px #fff; }
html .pk-grid .gf-tile.lock { border-color: #afadbf; background: linear-gradient(to top right, transparent 46%, #9a97ae 47% 53%, transparent 54%), #d5d3e0; box-shadow: none; }
html .pk-grid .gf-tile.full { border-color: #8b86a9; }
html .pk-wallet { gap: 4px; padding: 0; background: none; box-shadow: none; }
/* the purse like Inventory.png: one dark box per coin, light number, the coin after it */
html .pk-foot .money .coin, html .pk-foot .gfpts, html .pk-foot .appts { min-width: 54px; justify-content: flex-end; padding: 1px 5px 1px 8px; border-radius: 2px; background: linear-gradient(#3a3846, #25232e); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 1px #14131a, 0 1px 0 rgba(255, 255, 255, 0.35); }
html .pk-foot .money .coin b, html .pk-foot .gfpts b, html .pk-foot .appts b { color: #f5f4fa; text-shadow: 0 1px 1px #000; }
html .pk-foot .gfpts i { background: linear-gradient(#a4a0bf, #585374); }
html .pk-cap { color: #2c2a37; }
html .pk-count { background: #2c2a37; color: #f0eff8; }
html .gf-tile.sel { outline-color: #a9a4ca; }
html .gfw input:focus { border-color: #666186; }
/* The weapon / armour tooltip in the original game's format (ui/windows/gearTip.js): left-aligned lines, white base, green bonuses, yellow effects and set, red refusals, the pearls at the foot.
   Colours = the client's palette, data/db/Color.ini (see shared/gfColors.js): base #fff1e4 = id 16, bonus #bbe477 = 14, effect/set #f7dc88 = 27,
   bad #f57a7c = 11, mute #acacac = 25, abilities #b0e172 = 34, accuracy #00b1ae = 55, hint #ab9adb = 15, empty hole #5f5f5f = 23. */
html #tooltip .gtip, html .link-card .gtip { min-width: 210px; font-size: calc(12.5px * var(--ui-text)); line-height: 1.45; }
html #tooltip .gtip h4.gt-name, html .link-card .gtip h4.gt-name { margin: 0 0 2px; font-size: var(--fs-lead); }
html #tooltip .gtip .row, html .link-card .gtip .row { display: block; color: #fff1e4; }
html #tooltip .gtip .row span, html .link-card .gtip .row span { color: inherit; text-align: left; font-weight: inherit; }
html #tooltip .gtip .row span.fort-bonus, html .link-card .gtip .row span.fort-bonus { color: inherit; font-weight: inherit; } /* the fortification gain stays white, like the number it follows */
html #tooltip .gtip .gt-bonus, html .link-card .gtip .gt-bonus { color: #bbe477; }
html #tooltip .gtip .gt-effect, html #tooltip .gtip .gt-set, html .link-card .gtip .gt-effect, html .link-card .gtip .gt-set { color: #f7dc88; }
html #tooltip .gtip .gt-bad, html .link-card .gtip .gt-bad { color: #f57a7c; font-weight: 600; }
html #tooltip .gtip .gt-mute, html .link-card .gtip .gt-mute { color: #acacac; }
html #tooltip .gtip .gt-cap, html .link-card .gtip .gt-cap { color: #b0e172; } /* abilities (procs): light green */
html #tooltip .gtip .gt-acc, html .link-card .gtip .gt-acc { color: #00b1ae; } /* accuracy (Toucher / PRÉC): cyan */
html #tooltip .gtip .gt-hint, html .link-card .gtip .gt-hint { color: #ab9adb; margin-top: 4px; }
html .gt-hole { display: flex; align-items: center; gap: 5px; color: #fff1e4; }
html .gt-hole img, html .gt-hole .gt-empty { width: 16px; height: 16px; flex: none; }
html .gt-hole .gt-empty { box-sizing: border-box; border: 1px dashed #5f5f5f; border-radius: 2px; background: rgba(0, 0, 0, 0.3); }
html .gt-hole small { margin-left: auto; padding-left: 8px; font-size: var(--fs-small); color: #bbe477; white-space: nowrap; }
html .gt-hole:not(.full) span { color: #acacac; }
/* Quieter banners and bars (owner: a much subtler interface): thin steel rim, dark translucent body, small text; the action bar keeps a single thin rim. */
html .toast, html .soc-invite { padding: 5px 14px; border-radius: 3px; font-size: calc(12.5px * var(--ui-text)); color: #f0eff8; background: linear-gradient(rgba(38, 37, 50, 0.92), rgba(20, 19, 27, 0.94)); box-shadow: 0 0 0 1px #0c0b11, inset 0 0 0 1px rgba(196, 194, 222, 0.3), 0 4px 12px rgba(0, 0, 0, 0.45); }
html .toast.warn { color: #ffe1a0; } html .toast.bad { color: #ffb4ae; } html .toast.good { color: #c9f7b8; }
html .soc-invite .soc-text b { color: #d8d5ec; }
html .soc-timer { height: 2px; background: linear-gradient(90deg, #8b86a9, #d8d5ec); }
html .mycast { height: 12px; border-radius: 2px; background: #121118; box-shadow: 0 0 0 1px #0c0b11, inset 0 0 0 1px rgba(196, 194, 222, 0.3), 0 0 10px rgba(160, 150, 220, 0.35); }
html .mycast i { border-radius: 0; } html .mycast::after { display: none; } html .mycast span { font-size: var(--fs-caption); font-weight: 700; }
html .actionbar { box-shadow: 0 0 0 1px #0c0b11, inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 3px 10px rgba(0, 0, 0, 0.45); }
html .actionbar .orn, html .frame .orn { display: none; }