/* v2 theme for the game's own pop-ups and windows (What's new, team picker, chests, Tamer picker, login, toasts, chat,
   old service windows): LINKFRAME's dark ink panels — square corners, orange edge, Barlow headings, Atkinson text.
   Loaded after the old sheets; colours only, layouts stay theirs. */
:root {
  --lf-ink: #132B36; --lf-ink2: #1C3A47; --lf-shell: #EEE8D6; --lf-paper: #FFF9EB; --lf-mist: #BED0CA; --lf-org: #F36B38; --lf-mint: #73DCC0;
  --lf-hd: 'Barlow Condensed', sans-serif; --lf-tx: 'Atkinson Hyperlegible', sans-serif; --lf-mono: 'IBM Plex Mono', monospace;
  /* the old sheets read these: retint them to the new palette */
  --ui-bg: #132B36; --ui-bg2: #1C3A47; --ui-line: #3d5c69; --ui-gold: #F36B38; --ui-gold-d: #92331D; --ui-text: #EEE8D6; --ui-muted: #a9bdb7; --ui-accent: #73DCC0;
}
/* the page font stays the game's own (the battle screen is laid out for it); v2 panels set their own */

/* pop-ups */
.modal { background: #0b1720b8; backdrop-filter: blur(2px); }
.modal-box { background: var(--lf-ink) !important; border: 0 !important; border-left: 4px solid var(--lf-org) !important; border-radius: 4px !important;
  box-shadow: 0 0 0 1px #ffffff1a, 0 18px 50px #000b !important; color: var(--lf-shell); font-family: var(--lf-tx); }
.modal-box h3, .modal-box .chn { font: 700 22px/1.15 var(--lf-hd) !important; letter-spacing: .04em; text-transform: uppercase; color: var(--lf-shell) !important; text-shadow: none !important; }
.modal-box h3::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--lf-org); box-shadow: 11px 0 0 var(--lf-org); margin-right: 18px; vertical-align: middle; }
.modal-box button, .win button:not(.slot):not(.evo):not(.tnode):not(.region):not(.win-x), .starter-screen button, .tpick-box button {
  font-family: var(--lf-hd) !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase;
  background: var(--lf-ink2) !important; border: 1px solid #ffffff33 !important; border-radius: 2px !important; color: var(--lf-shell) !important; }
.modal-box button:hover:not(:disabled), .win button:hover:not(:disabled):not(.win-x) { border-color: var(--lf-org) !important; }
.modal-box button.go, .modal-box button.big, .modal-box button.ok, .win button.ok, .win button.go { background: var(--lf-org) !important; border-color: var(--lf-org) !important; color: #fff !important; }
.modal-box .muted, .win .muted { color: #a9bdb7 !important; }
.modal-box details, .modal-box .li, .win .li { border-color: #ffffff1a !important; }
.updbox details { background: var(--lf-ink2) !important; border-radius: 2px !important; }
.updbox summary { font-family: var(--lf-hd); font-size: 17px; letter-spacing: .03em; }

/* old windows (services without a v2 panel yet) */
.win { background: var(--lf-ink) !important; border: 0 !important; border-left: 4px solid var(--lf-org) !important; border-radius: 4px !important; box-shadow: 0 0 0 1px #ffffff1a, 0 18px 50px #000b !important; }
.win-bar { background: var(--lf-ink2) !important; border-bottom: 1px solid #ffffff1a !important; border-radius: 0 !important; }
.win-title { font: 700 19px var(--lf-hd) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--lf-shell) !important; text-shadow: none !important; }
.win-x { background: transparent !important; border: 1px solid #ffffff40 !important; border-radius: 2px !important; color: var(--lf-shell) !important; }
.win-x:hover { border-color: var(--lf-org) !important; color: var(--lf-org) !important; }
.win h4 { font-family: var(--lf-hd) !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--lf-mint) !important; }
.win input, .win select, .modal-box input, .modal-box select { background: #0b1720 !important; border: 1px solid #ffffff33 !important; border-radius: 2px !important; color: var(--lf-shell) !important; }

/* toasts */
#toasts { top: 86px; }
.toast { background: var(--lf-ink) !important; border: 0 !important; border-left: 4px solid var(--lf-org) !important; border-radius: 2px !important; box-shadow: 0 6px 22px #000a !important;
  color: var(--lf-shell) !important; font-family: var(--lf-tx); font-size: 14.5px; }
.toast b { color: var(--lf-org) !important; font-weight: 700 !important; }

/* chat panel */
#chat .ch-panel { border-radius: 4px !important; border: 0 !important; border-left: 4px solid var(--lf-org) !important; font-family: var(--lf-tx); }
#chat .ch-tabs button.on, #chat .ch-tab.on { color: var(--lf-org) !important; }

/* Tamer / partner picker, login, first start */
.starter-screen { background: radial-gradient(ellipse at 50% 30%, #1C3A47, #0b1720 70%) !important; font-family: var(--lf-tx); }
.starter-screen h1, .login h1, .lcard h3 { font: 700 44px var(--lf-hd) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--lf-shell) !important; text-shadow: none !important; }
.starter-screen h1::after { content: ""; display: inline-block; width: 9px; height: 9px; background: var(--lf-org); box-shadow: 12px 0 0 var(--lf-org); margin-left: 6px; }
.starters button { background: var(--lf-ink) !important; border: 1px solid #ffffff22 !important; border-left: 4px solid var(--lf-org) !important; border-radius: 4px !important; }
.starters button:hover { border-color: var(--lf-org) !important; }
.lcard { background: var(--lf-ink) !important; border: 0 !important; border-left: 4px solid var(--lf-org) !important; border-radius: 4px !important; }
.lcard h3 { font-size: 20px !important; }

/* dungeon / raid team picker (js/prep.js) */
.pp { --pp-bg3: #1C3A47; border: 0 !important; border-left: 4px solid var(--lf-org) !important; border-radius: 4px !important; font-family: var(--lf-tx); }
.pp-head { background: var(--lf-ink2) !important; }
.pp-head h3, .pp-head b:first-child { font-family: var(--lf-hd); letter-spacing: .04em; text-transform: uppercase; }
.pp-btn { font-family: var(--lf-hd) !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 2px !important; background: var(--lf-ink2) !important; border-color: #ffffff33 !important; }
.pp-btn.go { background: var(--lf-org) !important; border-color: var(--lf-org) !important; color: #fff; }
.pp-seg button, .pp-filters button { border-radius: 2px !important; }
.pp-seg button.on { border-color: var(--lf-org) !important; background: #3a2418 !important; color: var(--lf-org) !important; }
.pp-sheet { border-radius: 4px 4px 0 0 !important; border-top: 4px solid var(--lf-org) !important; }