/* "Esprit" theme of the in-game interface (owner, 2026-10-20): the portal's violet / violine instead of the brown, bronze and gold of the first Grand Fantasia skin (retired: no brown or gold literal is left in the in-game sheets, tests/client/uiPalette.test.js),
   with the window title bar cut from the original UI atlas main.dds (assets/portal/ui/wintitle.png, tinted). Loaded LAST by index.html; `html` in front of a selector only lifts it above the
   rule it replaces. The layouts, sizes and the functional colours (HP red, MP blue, XP / values green, rarities) are untouched. */
/* Windows: lavender parchment in a plum frame, the DDS title bar, lilac tabs. */
html .gfw { background: radial-gradient(#ffffff55 1px, transparent 1.4px) 0 0 / 9px 9px, linear-gradient(#f5f4fa, #e4e3ed); color: var(--gf-ink);
  box-shadow: 0 0 0 2px #14131a, 0 0 0 4px #585374, 0 0 0 5px #cac7e0, 0 0 0 7px #14131a, inset 0 0 0 1px #fff, inset 0 0 0 3px rgba(142, 136, 179, 0.35), 0 10px 28px rgba(0, 0, 0, 0.6); }
html .gfw-head { background: none; box-shadow: none; border-style: solid; border-color: transparent; border-width: 0 12px; padding: 4px 0 4px 2px; margin: 3px 3px 0;
  border-image: url('/client/assets/portal/ui/wintitle-steel.png') 0 12 fill stretch; }
html .gfw-title { color: #fff; text-shadow: -1px -1px 0 #2c2a37, 1px -1px 0 #2c2a37, -1px 1px 0 #2c2a37, 1px 1px 0 #2c2a37, 0 0 8px #b5b0db; }
html .gfw-btn { border-color: #2c2a37; background: linear-gradient(#faf9fd, #cbc8dd); color: #383645; }
html .gfw-help { background: linear-gradient(#bfbadc, #7f79a5); color: #fff; border-color: #312e48; }
html .gfw-close:hover { background: linear-gradient(#e1dff0, #a9a4ca); }
html .gfw-tab { background: #d6d4e4; border-color: #8e88b3; color: #383645; }
html .gfw-tab.on { background: #f5f4fa; box-shadow: inset 0 3px 0 #a9a4ca; }
html .gfw-tab:hover:not(.on) { background: #e5e4ee; }
html .gfw-box { background: #e2e1eb; border-color: #afacc6; }
html .gf-plate { background: linear-gradient(#c0bdd6, #9c97b7); color: #23222b; border-color: #6b6689; }
html .gf-val { background: #23222b; border-color: #121117; color: var(--gf-green); }
html .gf-tile { border-color: #b7b4c8; background: repeating-linear-gradient(45deg, #ebeaf2 0 4px, #e1e0ea 4px 8px); }
html .gf-tile .lbl { color: #666379; }
html .gf-btn { background: linear-gradient(#faf9fd, #d1cee2); border-color: #6b6689; color: #383645; }
html .gf-btn:hover { background: linear-gradient(#fff, #dddbec); }
html .mute { color: #625f77; } /* >= 4.5:1 on the paper (was 3.9:1) */
html :is(#tooltip, .ctxmenu, .toast, .chat, .loadscreen, .reconnect, .frame, .env-badge, .info, .abup) .mute { color: var(--muted); } /* the dark plates keep the light secondary text */
/* Character window (win-char.css). */
html .cw-name { border-color: #383645; background: linear-gradient(#6a6682, #423f52); color: #f5f4fa; }
html .cw-name b { color: #e7e5f3; }
html .cw-block { background: #e2e1eb; border-color: #afacc6; }
html .cw-doll:not(.paper) { background: radial-gradient(circle at 50% 45%, #f5f4fa, #dad9e5 70%); border-color: #afacc6; }
html .cw-doll.paper { border-radius: 8px; background-color: #e9e8f1; box-shadow: inset 0 0 0 1px #afacc6; }
html .cw-right { background: #e9e8f1; border-color: #afacc6; }

html .cw-doll .gf-tile.off { background: repeating-linear-gradient(45deg, #c8c7d1 0 4px, #b8b6c3 4px 8px); }
/* Buttons of the HUD and the flow screens. */
html .btn { color: #2c2a37; background: linear-gradient(#faf9fd, #d1cee2 55%, #afacc6); border-color: #383645; }
html .btn.primary { background: linear-gradient(#e4e1f2, #9c96c2 50%, #716b94); color: #fff; border-color: #2c2a37; text-shadow: 0 1px 2px #2c2a37; }
/* Action bar (ui-actionbar.css): pale lilac plate, plum cells, the same compact layout. */
html .actionbar { background: radial-gradient(#ffffff40 1px, transparent 1.4px) 0 0 / 8px 8px, linear-gradient(#edecf5, #d6d4e4 60%, #c2bfd6);
  box-shadow: 0 0 0 1px #14131a, 0 0 0 2px #585374, 0 0 0 3px #cac7e0, 0 0 0 4px #14131a, inset 0 0 0 1px #fff, inset 0 0 0 2px rgba(142, 136, 179, 0.45), 0 5px 12px rgba(0, 0, 0, 0.55); }
html .abrow { background: var(--cell-gap, #69667e); }
html .slot { background: var(--cell, #a7a4ba); }
html .slot:hover { background: var(--cell-hi, #c2bfd3); }
html .xpbar { background: linear-gradient(#494759, #2c2a37); }
html .xpsecs i { box-shadow: 0 0 0 1px rgba(57, 54, 76, 0.55); }
/* Squarer corners (owner: windows and buttons less rounded, a more mature look). */
html .gfw { border-radius: 3px; } html .gfw-head { border-radius: 2px 2px 0 0; } html .gfw-btn, html .gf-tile, html .gf-tile img { border-radius: 2px; }
html .gfw-tab, html .flow-tab { border-radius: 3px 3px 0 0; } html .gfw-box, html .flow-card, html .flow-head, html .toast, html #tooltip, html .ctxmenu { border-radius: 3px; }
html .gf-plate { border-radius: 2px 0 0 2px; } html .gf-val { border-radius: 0 2px 2px 0; }
html .btn, html .btn.big, html .gf-btn, html .chip, html .conn, html input, html select { border-radius: 3px; }
html .frame, html .trow, html .frame.player > .famframe, html .cs-root .char-card.cs-card, html .cs-face, html .info, html .env-badge, html .actionbar, html .abup { border-radius: 3px; }
html .minimap { border-radius: 4px; } html .mm-ring .hudbtns .btn, html .pt-lv, html .cs-lv { border-radius: 3px; }
/* Every icon is a square (owner): the drawn ones are squares already (art/iconArt.js), no CSS rounds them into discs or pills. */
html img[data-iid], html .trow img, html .pm-ic img, html .pm-portrait img { border-radius: 2px; }