/* "Esprit" theme, the screens around the game (owner: violet / violine, darker and more serious than the windows): boot, login and account cards, reconnect curtain, the loading screen of
   every map. Loaded LAST after theme-spirit.css; the markup and the behaviour of these screens are unchanged. */
html #boot { background: radial-gradient(circle at 50% 40%, #333043, #0c0b11 72%); }
html .logo { color: #f0eff8; text-shadow: var(--outline), 0 0 18px rgba(181, 176, 219, 0.45); }
html .logo b { color: #c6c2e3; }
html .boot-bar, html .ls-bar { background: #111017; border-color: #585374; }
html .boot-bar i, html .ls-bar i { background: linear-gradient(#f0eff8, #b5b0db 45%, #494564); }
/* Login / account cards: dark plum glass in a violet frame, lilac text. */
html #lobby { background: radial-gradient(ellipse at 50% 38%, rgba(12, 11, 17, 0), rgba(12, 11, 17, 0.62) 85%), linear-gradient(180deg, rgba(12, 11, 17, 0.15), rgba(12, 11, 17, 0.6)); }
html .flow-card, html .reconnect-card { color: #eae9f3; background: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px) 0 0 / 9px 9px, linear-gradient(rgba(42, 40, 56, 0.95), rgba(24, 22, 32, 0.96));
  box-shadow: 0 0 0 2px #0c0b11, 0 0 0 4px #49465f, 0 0 0 5px #9692b2, 0 0 0 7px #0c0b11, inset 0 0 0 1px rgba(202, 199, 224, 0.35), 0 14px 44px rgba(0, 0, 0, 0.65); }
html .flow-card .logo { color: #f0eff8; text-shadow: 0 0 14px rgba(181, 176, 219, 0.55), 0 2px 0 #14131a; }
html .flow-card .logo b { color: #c6c2e3; }
html .flow-card .mute, html .flow-wrap .mute, html .flow-form .row-check { color: #b8b5c9; }
html .flow-tab { color: #d7d4e6; background: linear-gradient(#393648, #282734); border-color: #585374; }
html .flow-tab.on { color: #fff; background: linear-gradient(#585473, #413e56); box-shadow: inset 0 3px 0 #7f79a5; }
html .flow-card input[type="text"], html .flow-card input[type="password"] { background: #1a1822; color: #f0eff8; border: 1px solid #6a6682; }
html .flow-msg { color: #ff9a9a; }
html .flow-head { background: linear-gradient(rgba(56, 53, 73, 0.92), rgba(24, 22, 32, 0.92)); }
html .flow-spin { border-color: rgba(150, 146, 178, 0.3); border-top-color: #b5b0db; }
html .reconnect { background: rgba(10, 9, 15, 0.8); }
html .reconnect-card b { color: #c6c2e3; }
html .cs-top .logo { color: #f0eff8; text-shadow: 0 2px 8px #000, 0 0 18px rgba(181, 176, 219, 0.4); }
/* The loading screen (ui/loading/): the map splash under a deep violine veil, lilac title, violine bar. */
html .loadscreen { background: #0c0b11; color: #f0eff8; }
html .ls-shade { background: linear-gradient(to top, #0c0b11f2 0%, #181722d0 30%, #18172255 58%, #0c0b1199 100%); }
html .ls-kicker { color: #c6c2e3; }
html .ls-title { color: #f0eff8; text-shadow: 0 3px 12px #000, 0 0 30px #49456488; }
html .ls-tip, html .ls-step { color: #d4d2e2; }
html .ls-pct { color: #cfcbe8; }
/* focus of the fields and the connection pill of the account screens */
html input:focus, html select:focus { border-color: #8e88b3; box-shadow: inset 0 2px 4px rgba(20, 19, 26, 0.35), 0 0 0 2px rgba(174, 168, 216, 0.55); }
html .conn { background: rgba(20, 19, 26, 0.6); }
html .conn.ok { color: #7fe08a; border-color: #3fa04a; }
html .conn.bad { color: #ff9a9a; border-color: #c2343a; }
/* the character screen (charselect.css): plum cards, lilac level badge and names */
html .cs-root, html .cs-name, html .cs-plate-name { color: #f5f4fa; }
html .cs-root .char-card.cs-card { background: linear-gradient(100deg, rgba(35, 33, 47, 0.9), rgba(16, 15, 21, 0.76)); border-color: rgba(164, 160, 191, 0.4); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(216, 213, 236, 0.12); }
html .cs-root .char-card.cs-card:hover { border-color: rgba(202, 199, 224, 0.85); background: linear-gradient(100deg, rgba(51, 49, 67, 0.94), rgba(22, 20, 30, 0.82)); }
html .cs-root .char-card.cs-card.on { border-color: #cac7e0; background: linear-gradient(100deg, rgba(76, 72, 102, 0.95), rgba(30, 28, 40, 0.86)); box-shadow: 0 0 0 1px rgba(240, 239, 248, 0.5), 0 0 18px rgba(158, 152, 198, 0.5), 0 4px 14px rgba(0, 0, 0, 0.5); }
html .cs-face { border-color: #8e88b3; }
html .cs-lv { color: #fff; background: linear-gradient(#c0bcdc, #716b94 55%, #484463); border-color: #23222b; }
html .cs-class, html .cs-plate-info { color: #d8d5ec; }
html .cs-plate-name { text-shadow: 0 2px 6px #000, 0 0 16px rgba(181, 176, 219, 0.5); }
/* the New Fantasia logo of the site on the login, resume and character screens (ui/flow/brand.js) */
html .logo.nf-logo { display: block; margin: -6px auto 4px; line-height: 0; text-shadow: none; }
html .logo.nf-logo img { display: block; width: min(300px, 70vw); height: auto; margin: 0 auto; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6)); }
@media (max-height: 520px) { html .flow-card .logo.nf-logo img { width: 190px; } }
/* the logo on the loading screens (ui/loading/LoadingScreen.js), and the "Entrer" button of the character screen cut from the original game button (btn-steel.png, the DDS button tinted steel), smaller */
html .ls-logo { display: block; width: min(240px, 50vw); height: auto; margin: 0 auto 4px; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.7)); }
html .btn.cs-enter { min-width: 128px; min-height: 0; padding: 1px 18px; font-size: calc(15px * var(--ui-text)); letter-spacing: 0.06em; color: #2c2a37; text-shadow: 0 1px #f5f4fa; background: none; border-style: solid; border-color: transparent; border-width: 8px 10px; border-radius: 0;
  border-image: url('/client/assets/portal/ui/btn-steel.png') 8 9 fill stretch; box-shadow: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55)); image-rendering: pixelated; }
html .btn.cs-enter:hover { border-image-source: url('/client/assets/portal/ui/btnhot-steel.png'); filter: drop-shadow(0 0 8px rgba(196, 194, 230, 0.6)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55)); }
@media (max-height: 520px) { html .btn.cs-enter { min-width: 104px; padding: 0 12px; font-size: var(--fs-strong); } html .ls-logo { width: 150px; } }