/* ===========================================================================
   fwo-theme.css — the website wearing the game's RmlUi theme.

   Source of truth: ui_rml/theme.rcss (and navbar.rml, map.rml) in the client.
   Every page links this LAST in <head>, after its own <style>, so equal-
   specificity rules here win. Tokens are set on `html:root` so they also beat
   the :root block fwo-shell.js injects at runtime.

   What the game does, carried over:
     ground    #0b0d10 / panel #111216 -> #07080a (two-stop vertical gradient)
     frame     2px #a57c2c, lighter top edge #c69a45, 3px radius
     corners   cast brackets art/frame_{tl,tr,bl,br}.png (assets/ui/)
     header    #1f1a10 -> #0d0b07, 1px #7a5c24 under it, title #f0c25a
     text      #dcd6c8 body, #8e8878 dim, #e0bb74 label gold, #f2ecdc numbers
     accent    #ff7a2f active / pressed, primary button #c4571d -> #8e3a0f
     type      Noto Sans (FWO Text / FWO Display), Cinzel only as FWO Serif
               (nav tabs, big titles)

   The pages still name the old faces (Cinzel, IM Fell English SC, Cinzel
   Decorative) in hundreds of inline rules, so those names are re-pointed below
   at the game's fonts instead of being rewritten one by one.
   2026-10-15
   =========================================================================== */

/* ---------------------------------------------------------------- fonts --- */
@font-face{font-family:'FWO Text';src:url(/assets/fonts/NotoSans-Regular.woff2) format('woff2');font-weight:100 500;font-style:normal;font-display:swap}
@font-face{font-family:'FWO Text';src:url(/assets/fonts/NotoSans-SemiBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'FWO Text';src:url(/assets/fonts/NotoSans-Bold.woff2) format('woff2');font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:'FWO Text';src:url(/assets/fonts/NotoSans-Italic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'FWO Serif';src:url(/assets/fonts/Cinzel-Regular.woff2) format('woff2');font-weight:100 900;font-display:swap}

/* Old names -> game faces. 'Cinzel' was the label/button face = FWO Display
   (Noto Sans SemiBold, bold when asked). 'IM Fell English SC' was the reading
   face = FWO Text. 'Cinzel Decorative' was the big-title face = FWO Serif. */
@font-face{font-family:'Cinzel';src:url(/assets/fonts/NotoSans-SemiBold.woff2) format('woff2');font-weight:100 600;font-display:swap}
@font-face{font-family:'Cinzel';src:url(/assets/fonts/NotoSans-Bold.woff2) format('woff2');font-weight:700 900;font-display:swap}
@font-face{font-family:'IM Fell English SC';src:url(/assets/fonts/NotoSans-Regular.woff2) format('woff2');font-weight:100 500;font-style:normal;font-display:swap}
@font-face{font-family:'IM Fell English SC';src:url(/assets/fonts/NotoSans-SemiBold.woff2) format('woff2');font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:'IM Fell English SC';src:url(/assets/fonts/NotoSans-Italic.woff2) format('woff2');font-style:italic;font-display:swap}
@font-face{font-family:'Cinzel Decorative';src:url(/assets/fonts/Cinzel-Regular.woff2) format('woff2');font-weight:100 900;font-display:swap}

/* --------------------------------------------------------------- tokens --- */
html:root{
  /* game names */
  --fwo-ground:#0b0d10; --fwo-ink:#0c0d10; --fwo-panel-top:#111216; --fwo-panel-bot:#07080a;
  --fwo-well:#181a1e; --fwo-line:#4d4535; --fwo-line-soft:#2a2620;
  --fwo-frame:#a57c2c; --fwo-frame-top:#c69a45; --fwo-hair:#6d5a2e; --fwo-head-line:#7a5c24;
  --fwo-title:#f0c25a; --fwo-label:#e0bb74; --fwo-title2:#e8c583; --fwo-hi:#ffe7a8;
  --fwo-text:#dcd6c8; --fwo-strong:#f2ecdc; --fwo-dim:#8e8878; --fwo-faint:#6f6a5e;
  --fwo-accent:#ff7a2f; --fwo-accent-dk:#c4571d;
  --fwo-hp:#e0574a; --fwo-chi:#4fa3e0; --fwo-xp:#f0c85a; --fwo-ok:#7fb87a;
  --fwo-display:'FWO Text','Noto Sans',system-ui,sans-serif;
  --fwo-serif:'FWO Serif','Cinzel',Georgia,serif;

  /* the site's old names, re-pointed */
  --gold:#e0bb74; --gold-light:#f0c25a; --gold-dark:#a57c2c; --gold-faint:#1f1a10;
  --gold-dim:#8a7650; --border-gold:#6d5a2e; --border-bright:#a57c2c;
  --crimson:#8e3a0f; --crimson-mid:#c4571d; --crimson-bright:#ff7a2f;
  --red:#e0574a; --red-light:#ff8a7a; --warn:#ff7a2f;
  --ink:#0b0d10; --ink-mid:#111216; --ink-soft:#181a1e; --ink-panel:#111216; --ink-card:#15171b;
  --bg:#0b0d10; --surface:#111216; --surface2:#181a1e; --panel:#111216; --ground:#0b0d10;
  --border:#3a3428; --line:#4d4535; --rim:#4d4535; --rim-top:#6d5a2e; --rim-gold:#a98c4a;
  --muted:#8e8878; --dim:#6f6a5e; --text:#dcd6c8; --strong:#f2ecdc; --hi:#ffe7a8;
  --silver:#b5b9bf; --mist:#dcd6c8aa;
  --jade:#3d5a36; --jade-light:#7fb87a; --jade-gem:#7fd49a; --green:#3d5a36; --green-light:#7fb87a; --green-dim:#24331f; --ok:#7fb87a;
  --blue:#1f5c96; --blue-light:#4fa3e0; --blue-dark:#14385c; --blue-deep:#0d2338;
  --amber:#a37b1c; --amber-light:#f0c85a;
  --purple:#5a3a8a; --purple-light:#b48ae0; --purple-dim:#2a1d40;
  --teal:#2a6a68; --teal-light:#6cc8c0; --teal-dim:#163634;
  --mono:ui-monospace,Consolas,'Courier New',monospace;
  --display:var(--fwo-display); --serif:var(--fwo-serif);
}

/* ----------------------------------------------------------------- base --- */
html body{
  background-color:var(--fwo-ground);
  color:var(--fwo-text);
  font-family:var(--fwo-display);
  background-image:none;
  cursor:default;
  -webkit-font-smoothing:antialiased;
}
/* the film-grain overlays: the game's surfaces are clean */
html body::after{display:none !important;content:none !important}
a,button,[onclick],label,select,summary{cursor:pointer}
input,textarea{cursor:text}
::selection{background:#ff7a2f55;color:#fff}

/* scrollbars: 8px dark track, #7a5c24 thumb, gold on hover, accent on press */
*{scrollbar-color:#7a5c24 #08080a}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#08080acc}
::-webkit-scrollbar-thumb{background:#7a5c24;border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:#d8b870}
::-webkit-scrollbar-thumb:active{background:#ff7a2f}

/* ===========================================================================
   SHARED PRIMITIVES — use these in new markup.
   =========================================================================== */
.fwo-panel{
  position:relative;
  background:linear-gradient(#111216f0,#07080af5);
  border:2px solid var(--fwo-frame); border-top-color:var(--fwo-frame-top);
  border-radius:3px;
}
/* cast corners: one pseudo element carries all four brackets.
   The art puts the frame's centre line 6/36 into its box -> box at -7px. */
.fwo-cast{position:relative}
.fwo-cast::before{
  content:''; position:absolute; inset:-7px; pointer-events:none; z-index:3;
  background:
    url(/assets/ui/frame_tl.png) left top/36px 36px no-repeat,
    url(/assets/ui/frame_tr.png) right top/36px 36px no-repeat,
    url(/assets/ui/frame_bl.png) left bottom/36px 36px no-repeat,
    url(/assets/ui/frame_br.png) right bottom/36px 36px no-repeat;
}
.fwo-head{
  display:flex; align-items:center; gap:8px; min-height:40px; padding:0 14px;
  background:linear-gradient(#1f1a10f2,#0d0b07f2); border-bottom:1px solid var(--fwo-head-line);
  font-family:var(--fwo-display); font-weight:700; font-size:14px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--fwo-title);
}
.fwo-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:34px; padding:0 18px; border-radius:3px;
  background:linear-gradient(#27231b,#120f0a); border:1px solid #8a6a2c; border-top-color:#c49a45;
  color:#f0e2c0; font-family:var(--fwo-display); font-weight:700; font-size:13px; letter-spacing:.6px;
  text-decoration:none; text-transform:none; white-space:nowrap;
  transition:border-color .12s,color .12s,background .12s;
}
.fwo-btn:hover{border-color:#e8c070;color:#fff}
.fwo-btn:active{background:linear-gradient(#120f0a,#27231b)}
.fwo-btn.primary{background:linear-gradient(#c4571d,#8e3a0f);border-color:#e07a35;border-top-color:#f19a5c;color:#fff6ec}
.fwo-btn.primary:hover{border-color:#ffb37a}
/* the lit primary action (LOG IN / PLAY in the client): breathing rim + sheen */
.fwo-btn.hero{
  position:relative; overflow:hidden; height:46px; padding:0 30px; font-size:15px; letter-spacing:2px;
  text-transform:uppercase; border-radius:8px;
  background:linear-gradient(#d2591b,#8e3a0f); border:1px solid #ff9a4a; border-top-color:#ffc089; color:#fff3e6;
}
.fwo-btn.hero:hover{border-color:#ffd0a0;color:#fff}
.fwo-btn.hero::before{content:'';position:absolute;inset:-1px;border:1px solid #ffb37a;border-radius:8px;opacity:0;animation:fwo-breathe 3.6s ease-in-out infinite;pointer-events:none}
.fwo-btn.hero::after{content:'';position:absolute;top:0;left:-40%;width:34%;height:100%;background:linear-gradient(90deg,#ffffff00,#ffffff5c);transform:skewX(-18deg);animation:fwo-sheen 4.2s ease-in-out infinite;pointer-events:none}
@keyframes fwo-breathe{0%,100%{opacity:0}50%{opacity:.85}}
@keyframes fwo-sheen{0%,62%{left:-40%}100%{left:120%}}
.fwo-rule{display:flex;height:1px;width:100%}
.fwo-rule::before,.fwo-rule::after{content:'';flex:1;height:1px}
.fwo-rule::before{background:linear-gradient(90deg,#a98c4a00,#a98c4a)}
.fwo-rule::after{background:linear-gradient(90deg,#a98c4a,#a98c4a00)}
.fwo-kc{display:inline-block;min-width:18px;height:18px;padding:0 4px;line-height:16px;text-align:center;font-size:11px;font-weight:700;color:#e9e6df;background:#0b0c0e;border:1px solid #8c887e;border-radius:3px}

/* ===========================================================================
   GENERIC CHROME used by several pages (modals, forms, buttons).
   =========================================================================== */

/* -- modal boxes: panel chrome + cast corners ---------------------------- */
html body .modal-box, html body .legal-box, html body #dl-box, html body .auth-box,
html body .ga-modal-box, html body #passBox, html body #alphaBox, html body .dl-box,
html body .gi-slot-modal-box, html body .thread-overlay-inner{
  background:linear-gradient(#121316f7,#08090bfa) !important;
  border:2px solid var(--fwo-frame) !important; border-top-color:var(--fwo-frame-top) !important;
  border-radius:3px !important;
  box-shadow:0 18px 60px #000c !important;
}
html body .modal-box::before, html body .legal-box::before, html body #dl-box::before,
html body .auth-box::before, html body .dl-box::before, html body .gi-slot-modal-box::before{
  content:'' !important; position:absolute !important; inset:-7px !important; width:auto !important; height:auto !important;
  border:0 !important; pointer-events:none; z-index:3; opacity:1 !important; transform:none !important;
  background:
    url(/assets/ui/frame_tl.png) left top/36px 36px no-repeat,
    url(/assets/ui/frame_tr.png) right top/36px 36px no-repeat,
    url(/assets/ui/frame_bl.png) left bottom/36px 36px no-repeat,
    url(/assets/ui/frame_br.png) right bottom/36px 36px no-repeat !important;
}
html body .modal-box::after, html body .legal-box::after, html body #dl-box::after,
html body .auth-box::after, html body .dl-box::after, html body .gi-slot-modal-box::after{display:none !important}

html body .modal-backdrop, html body .legal-backdrop, html body #dl-backdrop, html body .dl-backdrop,
html body .ga-modal-bg, html body .auth-overlay{background:#050608d9 !important;backdrop-filter:blur(3px)}

html body .modal-header, html body .legal-header, html body #dl-header, html body .auth-head,
html body .ga-modal-head, html body .dl-head, html body .gi-slot-modal-head{
  background:linear-gradient(#1f1a10f2,#0d0b07f2) !important;
  border-bottom:1px solid var(--fwo-head-line) !important;
}
html body .modal-header h2, html body .legal-header h2, html body #dl-header h2, html body .auth-head h2,
html body .dl-title, html body .ga-modal-head h3{
  font-family:var(--fwo-display) !important; font-weight:700 !important; font-size:15px !important;
  letter-spacing:1.4px !important; text-transform:uppercase; color:var(--fwo-title) !important; text-shadow:none !important;
}
html body .modal-close, html body .legal-close, html body #dl-close, html body .overlay-close,
html body .ga-modal-close, html body .dl-x{
  width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent !important; border:0 !important; border-radius:3px !important;
  color:var(--fwo-title2) !important; font-size:15px; line-height:1;
  transition:background-color .12s,color .12s;
}
html body .modal-close:hover, html body .legal-close:hover, html body #dl-close:hover, html body .overlay-close:hover,
html body .ga-modal-close:hover, html body .dl-x:hover{background:#ff7a2f !important;color:#1b1710 !important}

html body .modal-cn-icon{font-family:'Noto Sans TC','Noto Serif TC',sans-serif !important;color:#3a3d44 !important;text-shadow:none !important;font-weight:700}

/* -- fields: the game's .field > input ----------------------------------- */
html body .form-label, html body .auth-label, html body .am-label, html body .lbl-field{
  font-family:var(--fwo-display) !important; font-weight:700 !important; font-size:11px !important;
  letter-spacing:.8px !important; text-transform:uppercase; color:var(--fwo-label) !important;
}
html body .form-input, html body .auth-input, html body .am-input, html body .map-search-input,
html body #passInput, html body #alphaForm input, html body #alphaForm textarea, html body .gi-search,
html body .ga-modal input, html body .form-field input, html body .form-field textarea, html body .form-field select{
  background:linear-gradient(#0a0a0c,#141417) !important;
  border:1px solid #5a4a2a !important; border-top-color:#3a3020 !important; border-radius:3px !important;
  color:var(--fwo-strong) !important; font-family:var(--fwo-display) !important; font-size:14px !important;
  letter-spacing:0 !important; box-shadow:none !important;
}
html body .form-input:focus, html body .auth-input:focus, html body .am-input:focus, html body .map-search-input:focus,
html body .gi-search:focus, html body .form-field input:focus, html body .form-field textarea:focus{
  border-color:#a98c4a !important; outline:none !important;
}
html body input::placeholder, html body textarea::placeholder{color:#6f6a5e !important;letter-spacing:0 !important;font-style:normal}
html body .form-input.error{border-color:#ff7a2f !important}
html body .form-input.ok{border-color:#5f8a57 !important}
html body .field-msg{font-family:var(--fwo-display) !important;font-size:11px !important;letter-spacing:0 !important}
html body .field-msg.err, html body .auth-error, html body .am-err{color:#ff7a2f !important}
html body .field-msg.ok{color:var(--fwo-ok) !important}

/* -- primary submit buttons: the game's .btn.primary ---------------------- */
html body .btn-login-submit, html body .auth-submit, html body .legal-accept-btn, html body #dl-modal-btn,
html body .dl-btn, html body .ga-modal-btn.confirm, html body .am-confirm, html body .gi-pay-btn{
  background:linear-gradient(#c4571d,#8e3a0f) !important; border:1px solid #e07a35 !important; border-top-color:#f19a5c !important;
  border-radius:3px !important; color:#fff6ec !important;
  font-family:var(--fwo-display) !important; font-weight:700 !important; font-size:13px !important; letter-spacing:1px !important;
  text-shadow:none !important; box-shadow:none !important;
}
html body .btn-login-submit:hover, html body .auth-submit:hover, html body .legal-accept-btn:hover, html body #dl-modal-btn:hover,
html body .dl-btn:hover, html body .ga-modal-btn.confirm:hover, html body .am-confirm:hover, html body .gi-pay-btn:hover{border-color:#ffb37a !important;color:#fff !important;filter:brightness(1.08)}
html body .btn-login-submit::before, html body .legal-accept-btn::before{display:none !important}

/* -- secondary buttons: the game's .btn ---------------------------------- */
html body .legal-close-btn, html body .ga-modal-btn.cancel, html body .am-cancel, html body .btn-muted,
html body .post-action-btn, html body .view-all, html body .btn-expand, html body .gi-action-btn, html body .ga-btn,
html body .gi-expand-btn, html body .league-btn, html body .back{
  background:linear-gradient(#27231b,#120f0a) !important; border:1px solid #8a6a2c !important; border-top-color:#c49a45 !important;
  border-radius:3px !important; color:#f0e2c0 !important;
  font-family:var(--fwo-display) !important; font-weight:700 !important; letter-spacing:.6px !important;
  text-shadow:none !important; box-shadow:none !important;
}
html body .legal-close-btn:hover, html body .ga-modal-btn.cancel:hover, html body .am-cancel:hover, html body .btn-muted:hover,
html body .post-action-btn:hover, html body .view-all:hover, html body .btn-expand:hover, html body .gi-action-btn:hover, html body .ga-btn:hover,
html body .gi-expand-btn:hover, html body .league-btn:hover, html body .back:hover{border-color:#e8c070 !important;color:#fff !important}

html body .modal-footer-links, html body .modal-footer-links a{font-family:var(--fwo-display) !important;letter-spacing:0 !important;font-size:12px !important}
html body .modal-footer-links{color:var(--fwo-dim) !important}
html body .modal-footer-links a{color:var(--fwo-label) !important}
html body .modal-footer-links a:hover{color:var(--fwo-hi) !important}

/* checkbox: 14px box, gold fill when set */
html body .tc-row input[type="checkbox"]{width:14px !important;height:14px !important;border:1px solid #5a5d64 !important;border-radius:3px !important;background:#101216 !important}
html body .tc-row input[type="checkbox"]:checked{background:#e0bb74 !important;border-color:#e0bb74 !important}
html body .tc-row input[type="checkbox"]:checked::after{color:#1b1710 !important}
html body .tc-label{font-family:var(--fwo-display) !important;font-size:12px !important;letter-spacing:0 !important;color:var(--fwo-dim) !important}
html body .tc-label a{color:var(--fwo-label) !important}

/* legal text: readable body copy */
html body .legal-body{font-family:var(--fwo-display)}
html body .legal-section-title{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:12px !important;letter-spacing:1px !important;color:var(--fwo-label) !important}
html body .legal-text{font-family:var(--fwo-display) !important;font-size:13px !important;line-height:1.65 !important;letter-spacing:0 !important;color:#c9c3b5 !important}
html body .legal-text strong{color:var(--fwo-strong) !important}
html body .legal-cn{font-family:'Noto Sans TC','Noto Serif TC',sans-serif !important;color:#3a3d44 !important;text-shadow:none !important}
html body .legal-en-title{font-family:var(--fwo-serif) !important;color:var(--fwo-title2) !important;letter-spacing:3px !important}
html body .legal-owner, html body .legal-date{font-family:var(--fwo-display) !important;color:var(--fwo-dim) !important;letter-spacing:.5px !important}
html body .legal-divider{background:linear-gradient(90deg,#a98c4a00,#a98c4a,#a98c4a00) !important;height:1px !important}
html body .reg-error-banner{background:#ff7a2f14 !important;border:1px solid #ff7a2f66 !important;color:#ffb08a !important;font-family:var(--fwo-display) !important;letter-spacing:0 !important}
html body .reg-success-banner{background:#7fb87a14 !important;border:1px solid #5f8a57 !important;color:#a8d8a0 !important;font-family:var(--fwo-display) !important;letter-spacing:0 !important}

/* ===========================================================================
   HOME  (fung-wan-online.php)
   =========================================================================== */
/* -- hero: the client's title screen, brand block centred ----------------- */
html body #hero{
  height:auto; min-height:540px; padding:72px 20px 64px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 46%, #2a1a0c66 0%, #0b0d1000 70%),
    radial-gradient(ellipse 120% 60% at 50% 115%, #ff7a2f14 0%, #0b0d1000 60%),
    linear-gradient(#08090b,#0b0d10 55%,#0b0d10);
  border-bottom:1px solid #2b2820;
}
html body #hero .hero-grid, html body #hero .hero-sweep{display:none}
html body #hero .hero-bg-text{font-family:'Noto Sans TC','Noto Serif TC',sans-serif;color:#ece3cc08;font-weight:900}
html body #hero .qi-particle{background:#ffb37a !important;box-shadow:0 0 6px #ff7a2f !important}
html body .hero-mark{width:360px;max-width:78vw;height:auto;display:block;animation:fwo-brand-in .9s cubic-bezier(.2,.7,.3,1) both}
@keyframes fwo-brand-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html body .hero-rule{width:380px;max-width:80vw;margin:18px 0 16px}
html body .hero-en{
  font-family:var(--fwo-serif) !important; font-size:clamp(15px,2vw,20px) !important; letter-spacing:7px !important;
  color:var(--fwo-strong) !important; margin:0 !important; text-shadow:0 1px 2px #07080a;
}
html body .hero-tagline{
  font-family:var(--fwo-display) !important; font-weight:700 !important; font-size:12px !important;
  letter-spacing:4px !important; text-transform:uppercase; color:var(--fwo-dim) !important; margin-top:10px !important;
}
html body .hero-actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;justify-content:center}
html body .hero-actions .fwo-btn.hero{min-width:260px}
html body .hero-actions .hero-alt{height:46px;padding:0 26px;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;border-radius:8px}
html body .hero-actions .hero-discord{background:#5865F2;border-color:#5865F2;color:#fff}
html body .hero-actions .hero-discord:hover,html body .hero-actions .hero-discord:focus-visible{background:#4752C4;border-color:#4752C4;color:#fff}

/* -- news ticker: a dark band, label as a gold keycap --------------------- */
html body .ticker-wrap{
  background:linear-gradient(#17181cf7,#07080af9) !important;
  border-top:1px solid #2b2820 !important; border-bottom:1px solid #4f4433 !important; height:38px;
}
html body .ticker-label{
  background:linear-gradient(#c4571d,#8e3a0f) !important; border-right:1px solid #e07a35 !important;
  color:#fff6ec !important; font-family:var(--fwo-display) !important; font-weight:700 !important;
  font-size:11px !important; letter-spacing:2px !important;
}
html body .ticker-label::after{display:none !important}
html body .ticker-inner span{font-family:var(--fwo-display) !important;font-size:13px !important;letter-spacing:.3px !important;color:#c9c3b5 !important}
html body .ticker-inner .sep{color:#a57c2c !important;font-size:10px !important}

/* -- three-column layout --------------------------------------------------- */
html body #main{max-width:1320px;padding:34px 24px 64px;grid-template-columns:240px minmax(0,1fr) 240px}

/* -- side panels: .panel.cast with a .head ------------------------------- */
html body .panel-box{
  position:relative; overflow:visible !important; margin-bottom:22px;
  background:linear-gradient(#111216f0,#07080af5) !important;
  border:2px solid var(--fwo-frame) !important; border-top-color:var(--fwo-frame-top) !important; border-radius:3px;
}
html body .panel-box::before{
  content:''; position:absolute; inset:-6px; pointer-events:none; z-index:3;
  background:
    url(/assets/ui/frame_tl.png) left top/30px 30px no-repeat,
    url(/assets/ui/frame_tr.png) right top/30px 30px no-repeat,
    url(/assets/ui/frame_bl.png) left bottom/30px 30px no-repeat,
    url(/assets/ui/frame_br.png) right bottom/30px 30px no-repeat;
}
html body .panel-header{
  min-height:38px; padding:0 12px !important; gap:8px !important;
  background:linear-gradient(#1f1a10f2,#0d0b07f2) !important; border-bottom:1px solid var(--fwo-head-line) !important;
}
html body .panel-header h3{
  font-family:var(--fwo-display) !important; font-weight:700 !important; font-size:13px !important;
  letter-spacing:1.4px !important; color:var(--fwo-title) !important; line-height:1.2;
}
html body .panel-header-icon{color:var(--fwo-title) !important;font-size:13px !important;width:16px;text-align:center}
html body .panel-body{padding:8px 14px 12px !important}

html body .server-info-list li, html body .rank-list li{
  font-family:var(--fwo-display) !important; font-size:13px !important; letter-spacing:0 !important;
  color:var(--fwo-dim) !important; border-bottom:1px solid #26231d !important; padding:7px 0 !important;
}
html body .server-info-list .val{color:var(--fwo-strong) !important;font-weight:700 !important}
html body .server-info-list .val.gold{color:var(--fwo-xp) !important}
html body .server-info-list .val.red{color:var(--fwo-accent) !important}
html body .online-dot{background:#5fbf5a !important;box-shadow:0 0 5px #5fbf5a !important}
html body .rank-name{color:var(--fwo-text) !important}
html body .rank-num{font-family:var(--fwo-display) !important;font-weight:700;color:var(--fwo-faint) !important}
html body .rank-num.top{color:var(--fwo-title) !important}
html body .rank-score{font-family:var(--fwo-display) !important;font-weight:700;color:var(--fwo-strong) !important}

html body .quick-links li a{
  font-family:var(--fwo-display) !important; font-size:13px !important; letter-spacing:0 !important;
  color:var(--fwo-text) !important; border-bottom:1px solid #26231d !important; border-left:2px solid transparent;
  padding:8px 8px !important; transition:background .12s,color .12s;
}
html body .quick-links li a::before{color:var(--fwo-hair) !important}
html body .quick-links li a:hover{background:linear-gradient(90deg,#e0bb7426,#e0bb7400) !important;border-left-color:var(--fwo-label);color:var(--fwo-hi) !important;padding-left:8px !important}
html body .quick-links li a:hover::before{color:var(--fwo-label) !important}

html body .holder-item, html body .holder-empty{font-family:var(--fwo-display) !important;letter-spacing:0 !important;font-size:13px !important;border-bottom-color:#26231d !important}
html body .holder-name, html body .holder-item-name{color:var(--fwo-text) !important;font-family:var(--fwo-display) !important;letter-spacing:0 !important}
html body .holder-empty{color:var(--fwo-faint) !important}
html body .holder-online-dot{background:#5fbf5a !important;box-shadow:0 0 5px #5fbf5a !important}

/* -- map frame: already the in-game map; give it the window frame --------- */
html body #map-section{
  border:2px solid var(--fwo-frame) !important; border-top-color:var(--fwo-frame-top) !important; border-radius:3px;
  background:#0b0d10 !important; overflow:visible;
}
html body #map-section::before{
  content:''; position:absolute; inset:-7px; pointer-events:none; z-index:6;
  background:
    url(/assets/ui/frame_tl.png) left top/36px 36px no-repeat,
    url(/assets/ui/frame_tr.png) right top/36px 36px no-repeat,
    url(/assets/ui/frame_bl.png) left bottom/36px 36px no-repeat,
    url(/assets/ui/frame_br.png) right bottom/36px 36px no-repeat;
}
html body #map-section.is-fullscreen::before{display:none}
html body #map-section .map-frame-wrap{border-radius:1px;overflow:hidden}

/* -- server status strip: a .chip row ------------------------------------ */
html body #server-status-bar{
  background:linear-gradient(#111216f0,#07080af5) !important; border:1px solid #4d4535 !important; border-top-color:#6d5a2e !important;
  border-radius:3px; padding:12px 18px !important;
}
html body #server-status-bar::before{background:#5fbf5a !important;box-shadow:none !important;width:2px !important}
html body .status-badge{background:#5fbf5a14 !important;border:1px solid #3d5a36 !important;border-radius:3px;padding:4px 10px !important}
html body .status-badge-text{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:11px !important;letter-spacing:1.5px !important;color:#a8d8a0 !important}
html body .status-label{font-family:var(--fwo-display) !important;font-size:13px !important;letter-spacing:0 !important;color:var(--fwo-dim) !important}
html body .status-stat-val{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:16px !important;letter-spacing:0 !important;color:var(--fwo-strong) !important}
html body .status-stat-label{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:.6px !important;color:var(--fwo-dim) !important}

/* -- section heads become the game's tab row ----------------------------- */
html body .section-title-bar{gap:0 !important;margin-bottom:0 !important;border-bottom:1px solid #5a4a26;height:34px;align-items:stretch !important}
html body .section-title-bar h2, html body .section-title-bar .tab-inactive{
  background:none !important; border:0 !important; border-bottom:2px solid transparent !important;
  padding:0 14px !important; display:flex; align-items:center; margin-bottom:-1px;
  font-family:var(--fwo-display) !important; font-weight:700 !important; font-size:13px !important;
  letter-spacing:1.4px !important; text-transform:uppercase;
}
html body .section-title-bar h2{color:var(--fwo-title) !important;border-bottom-color:#d8a84a !important}
html body .section-title-bar .tab-inactive{color:var(--fwo-dim) !important}
html body .section-title-bar .tab-inactive:hover{color:#ded8ca !important}
html body .section-body{
  background:linear-gradient(#111216e6,#07080af0) !important; border:1px solid #3a3428 !important; border-top:0 !important;
  border-radius:0 0 3px 3px;
}

/* -- news ----------------------------------------------------------------- */
html body .news-item{border-bottom:1px solid #26231d !important}
html body .news-date{border:1px solid #3e3524 !important;border-top-color:#241f15 !important;background:#08080a99 !important;border-radius:3px}
html body .news-date-day{font-family:var(--fwo-display) !important;font-weight:700 !important;color:var(--fwo-title) !important;letter-spacing:0 !important}
html body .news-date-month{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:.6px !important;color:var(--fwo-dim) !important}
html body .news-tag{
  font-family:var(--fwo-display) !important; font-weight:700 !important; font-size:10px !important; letter-spacing:1px !important;
  border-radius:10px !important; padding:1px 8px !important; background:#ffffff08 !important;
  border:1px solid #4d4535 !important; color:var(--fwo-text) !important;
}
html body .news-tag.patch{color:#a8d8a0 !important;border-color:#3d5a36 !important}
html body .news-tag.event{color:#f0c85a !important;border-color:#6d5a2e !important}
html body .news-tag.system{color:#8fc4ee !important;border-color:#1f5c96 !important}
html body .news-title{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:16px !important;letter-spacing:0 !important;color:var(--fwo-strong) !important}
html body .news-title:hover{color:var(--fwo-hi) !important}
html body .news-body{font-family:var(--fwo-display) !important;font-size:14px !important;line-height:1.65 !important;letter-spacing:0 !important;color:#c9c3b5 !important}
html body .news-body b, html body .news-body strong{color:var(--fwo-strong)}
html body .news-body img{border:1px solid #4d4535;border-radius:3px;max-width:100%;height:auto}
html body .news-skeleton-item{border-bottom-color:#26231d !important}

/* -- leaderboard table on the home page ---------------------------------- */
html body .lb-table th{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:1px !important;color:var(--fwo-dim) !important;border-bottom:1px solid #5a4a26 !important;background:none !important}
html body .lb-table td{font-family:var(--fwo-display) !important;font-size:13px !important;letter-spacing:0 !important;border-bottom:1px solid #26231d !important;color:var(--fwo-text)}
html body .lb-table tr:hover td{background:#ffffff08 !important}
html body .lb-rank.gold-rank{color:#f0c25a !important}
html body .lb-rank.silver-rank{color:#c9cdd3 !important}
html body .lb-rank.bronze-rank{color:#d39a6a !important}

/* clan tags as small chips */
html body .clan-tag{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:.5px !important;border-radius:2px !important}

/* -- footer --------------------------------------------------------------- */
html body footer{background:linear-gradient(#0b0d10,#07080a) !important;border-top:1px solid #2b2820 !important}
html body .footer-logo{font-family:var(--fwo-serif) !important;color:var(--fwo-title2) !important;letter-spacing:6px !important;text-shadow:none !important}
html body .footer-divider::before, html body .footer-divider::after{background:linear-gradient(90deg,#a98c4a00,#a98c4a) !important}
html body .footer-divider::after{background:linear-gradient(90deg,#a98c4a,#a98c4a00) !important}
html body .footer-divider span{color:var(--fwo-hair) !important}
html body .footer-copy{font-family:var(--fwo-display) !important;font-size:12px !important;letter-spacing:.3px !important;color:var(--fwo-faint) !important}
html body .footer-copy a{color:var(--fwo-label) !important}

/* -- download modal internals -------------------------------------------- */
html body .dl-modal-title{font-family:var(--fwo-serif) !important;color:var(--fwo-title2) !important;letter-spacing:3px !important;text-shadow:none !important}
html body .dl-modal-info-item{background:#08080a99 !important;border:1px solid #3e3524 !important;border-top-color:#241f15 !important;border-radius:3px}
html body .dl-modal-info-label{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:.6px !important;color:var(--fwo-dim) !important}
html body .dl-modal-info-val{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:14px !important;letter-spacing:0 !important;color:var(--fwo-strong) !important}

@media (max-width:1100px){ html body #main{grid-template-columns:210px minmax(0,1fr) 210px;padding:28px 16px 56px} }
@media (max-width:900px){
  html body #hero{min-height:0;padding:48px 16px 44px}
  html body .hero-actions .fwo-btn.hero{min-width:0}
}
@media (max-width:900px){ html body #main{grid-template-columns:1fr;padding:22px 14px 48px} }

/* ===========================================================================
   PANELS ACROSS THE SITE — every boxed section is a .panel with a .head.
   =========================================================================== */
html body .lb-panel, html body .toc-box, html body .sidebar-panel, html body .chat-panel,
html body .new-post-box, html body .reply-box, html body .panel, html body .self-card{
  background:linear-gradient(#111216f0,#07080af5) !important;
  border:1px solid var(--fwo-frame) !important; border-top-color:var(--fwo-frame-top) !important;
  border-radius:3px !important; box-shadow:none !important;
}
html body .lb-panel-bar, html body .toc-header, html body .sidebar-panel-head, html body .chat-head,
html body .new-post-header, html body .panel-head, html body .thread-overlay-header{
  background:linear-gradient(#1f1a10f2,#0d0b07f2) !important; border-bottom:1px solid var(--fwo-head-line) !important;
  color:var(--fwo-title) !important;
}
html body .lb-panel-title, html body .toc-header h3, html body .sidebar-panel-head, html body .chat-head,
html body .new-post-header h3, html body .panel-head h3{
  font-family:var(--fwo-display) !important; font-weight:700 !important; font-size:13px !important;
  letter-spacing:1.4px !important; text-transform:uppercase; color:var(--fwo-title) !important; text-shadow:none !important;
}
html body .new-post-box::before{display:none !important}


/* ===========================================================================
   DASHBOARD SHELL  (fwo-shell.js: sidebar + top bar)
   =========================================================================== */
html body #sidenav{background:linear-gradient(#111216,#07080a) !important;border-right:1px solid #4f4433 !important}
html body #sidenav::after{display:none !important}
html body .sidenav-logo{border-bottom:1px solid #2b2820 !important}
html body .sidenav-user{
  background:linear-gradient(#1a1a1dd9,#0a0a0ce6) !important; border:1px solid #6a5a38 !important; border-radius:3px;
}
html body .user-avatar{background:linear-gradient(#26221a,#100e0a) !important;border:1px solid #a57c2c !important;border-radius:3px;color:#f0c25a !important;font-family:var(--fwo-display) !important;font-weight:700}
html body .user-name{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:13px !important;letter-spacing:0 !important;color:var(--fwo-strong) !important}
html body .user-clan{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:1px !important;text-transform:uppercase;color:var(--fwo-dim) !important}
html body .user-status{background:#5fbf5a !important;box-shadow:0 0 5px #5fbf5a !important}
html body .sc-gem-bar{background:#08080a99 !important;border:1px solid #3e3524 !important;border-top-color:#241f15 !important;border-radius:3px}
html body .sc-gem-val{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:15px !important;letter-spacing:0 !important;text-shadow:none !important}
html body .sc-gem-label{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:.6px !important;color:var(--fwo-dim) !important;text-transform:uppercase}
html body .nav-section-label{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:2px !important;color:var(--fwo-faint) !important}
html body .nav-divider{background:#2b2820 !important}
/* nav rows: the map's place-list row (.prow) */
html body .nav-item a{border:0 !important;border-left:2px solid transparent !important;border-radius:0 !important;padding:9px 12px !important;margin-bottom:1px}
html body .nav-item a .nav-label{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:12.5px !important;letter-spacing:1.2px !important;color:var(--fwo-text) !important}
html body .nav-item a .nav-icon{color:var(--fwo-label);opacity:.9}
html body .nav-item a:hover{background:#ffffff0d !important}
html body .nav-item a:hover .nav-label{color:#ffffff !important}
html body .nav-item a.active{background:linear-gradient(90deg,#e0bb7433,#e0bb7400) !important;border-left-color:var(--fwo-label) !important;box-shadow:none !important}
html body .nav-item a.active .nav-label{color:var(--fwo-hi) !important}
html body .nav-item a.active .nav-icon{filter:none !important;opacity:1}
html body .nav-item a .nav-badge{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:0 !important;background:#ff7a2f !important;color:#1b1710 !important;border:0 !important;border-radius:8px !important}
html body .sidenav-bottom{border-top:1px solid #2b2820 !important}
html body .btn-logout{
  background:linear-gradient(#27231b,#120f0a) !important; border:1px solid #8a6a2c !important; border-top-color:#c49a45 !important; border-radius:3px !important;
  color:#f0e2c0 !important; font-family:var(--fwo-display) !important; font-weight:700 !important; font-size:12.5px !important; letter-spacing:.6px !important; justify-content:center;
}
html body .btn-logout:hover{border-color:#ff9a4a !important;color:#fff !important;background:linear-gradient(#c4571d,#8e3a0f) !important}
html body #fwo-content{background:radial-gradient(ellipse 70% 40% at 60% 0%,#2a1a0c33,#0b0d1000 70%),#0b0d10 !important}
html body .page-topbar{background:linear-gradient(#17181cf7,#07080af9) !important;border-bottom:1px solid #4f4433 !important;backdrop-filter:none}
html body .topbar-breadcrumb{font-family:var(--fwo-display) !important;font-size:12px !important;letter-spacing:.6px !important;color:var(--fwo-dim) !important}
html body .topbar-breadcrumb span{color:var(--fwo-title) !important;font-weight:700}
html body .topbar-right{font-family:var(--fwo-display) !important;letter-spacing:0 !important;color:var(--fwo-text) !important;font-weight:700}
html body .topbar-jade, html body .server-pill{background:#08080a99 !important;border:1px solid #3e3524 !important;border-top-color:#241f15 !important;border-radius:3px !important}
html body .topbar-jade-val{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:13px !important;letter-spacing:0 !important;text-shadow:none !important}
html body .server-pill{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:11px !important;letter-spacing:1px !important;color:#a8d8a0 !important}
html body .dot-green{background:#5fbf5a !important;box-shadow:0 0 5px #5fbf5a !important}

/* page titles inside the shell: FWO Serif, like the map's title */
html body .page-title, html body .fwo-page-inner h1, html body .dash-title{
  font-family:var(--fwo-serif) !important; color:var(--fwo-strong) !important; letter-spacing:3px !important; text-shadow:none !important;
}
html body .page-subtitle{font-family:var(--fwo-display) !important;font-size:13px !important;letter-spacing:.3px !important;color:var(--fwo-dim) !important}

/* dashboard stat cards: the theme's .chip */
html body .stat-card{
  background:#08080a99 !important; border:1px solid #3e3524 !important; border-top-color:#241f15 !important; border-radius:3px !important; box-shadow:none !important;
}
html body .stat-card::before, html body .stat-card::after{display:none !important}
html body .stat-label{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:.8px !important;color:var(--fwo-dim) !important;text-transform:uppercase}
html body .stat-val{font-family:var(--fwo-display) !important;font-weight:700 !important;letter-spacing:0 !important;color:var(--fwo-strong) !important;text-shadow:none !important}
html body .stat-card.red .stat-val{color:var(--fwo-hp) !important}
html body .stat-card.jade .stat-val{color:var(--fwo-ok) !important}
html body .stat-card.blue .stat-val{color:var(--fwo-chi) !important}
html body .stat-icon{filter:grayscale(.3)}
/* xp bar: the HUD's .bar.xp */
html body .xp-bar-track{height:10px !important;background:#0b0c0ee6 !important;border:1px solid #3a3c40 !important;border-top-color:#24262a !important;border-radius:6px !important;overflow:hidden}
html body .xp-bar-fill{background:linear-gradient(#f0c85a,#a37b1c) !important;border-radius:5px !important;box-shadow:none !important}
html body .xp-bar-label{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:11px !important;letter-spacing:.4px !important;color:var(--fwo-dim) !important}
html body .activity-item{border-bottom:1px solid #26231d !important}
html body .activity-text{font-family:var(--fwo-display) !important;font-size:13px !important;letter-spacing:0 !important;color:var(--fwo-text) !important}
html body .activity-time{font-family:var(--fwo-display) !important;font-size:11px !important;letter-spacing:0 !important;color:var(--fwo-faint) !important}
html body .tag{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:.8px !important;border-radius:10px !important}

/* ===========================================================================
   LEADERBOARD
   =========================================================================== */
html body .lb-page-header::before{opacity:.05}
html body .lb-page-title{font-family:var(--fwo-serif) !important;color:var(--fwo-strong) !important;letter-spacing:7px !important;text-shadow:0 1px 2px #07080a !important;background:none !important;-webkit-text-fill-color:currentColor !important}
html body .lb-page-sub{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:12px !important;letter-spacing:4px !important;color:var(--fwo-dim) !important}
html body .lb-divider{background:linear-gradient(90deg,#a98c4a00,#a98c4a,#a98c4a00) !important;height:1px !important}
html body .league-toggle-wrap{gap:8px;border:0 !important;background:none !important}
html body .league-btn{height:34px;padding:0 18px !important;font-size:12.5px !important;text-transform:uppercase}
html body .league-btn::after{display:none !important}
html body .league-btn.active-weekly, html body .league-btn.active-alltime{
  background:linear-gradient(#c4571d,#8e3a0f) !important; border-color:#e07a35 !important; border-top-color:#f19a5c !important; color:#fff6ec !important;
}
html body .reward-banner{background:#08080a99 !important;border:1px solid #3e3524 !important;border-top-color:#241f15 !important;border-radius:3px !important;box-shadow:none !important}
html body .reward-banner *{font-family:var(--fwo-display) !important;letter-spacing:.8px !important;text-shadow:none !important}
html body .category-tabs{border-bottom:1px solid #5a4a26 !important}
html body .cat-tab{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:13px !important;letter-spacing:1.4px !important;color:var(--fwo-dim) !important;border-bottom:2px solid transparent !important;background:none !important}
html body .cat-tab:hover{color:#ded8ca !important}
html body .cat-tab.active-weekly, html body .cat-tab.active-alltime{color:var(--fwo-title) !important;border-bottom-color:#d8a84a !important;background:none !important;box-shadow:none !important}
html body .group-tabs{border-bottom:1px solid #5a4a26 !important}
html body .group-tab{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:13px !important;letter-spacing:1.4px !important;text-transform:uppercase;color:var(--fwo-dim) !important;border-bottom:2px solid transparent !important}
html body .group-tab:hover{color:#ded8ca !important}
html body .group-tab.on{color:var(--fwo-title) !important;border-bottom-color:#d8a84a !important}
/* metric chips: the map's filter chips */
html body .board-chip{
  font-family:var(--fwo-display) !important; font-weight:700 !important; font-size:11.5px !important; letter-spacing:.8px !important;
  background:#08080a99 !important; border:1px solid #3e3524 !important; border-radius:12px !important; color:var(--fwo-dim) !important;
}
html body .board-chip:hover{color:#ded8ca !important;border-color:#6d5a2e !important}
html body .board-chip.on{background:#e0bb741f !important;border-color:#a98c4a !important;color:var(--fwo-title) !important}
html body .find-row input{
  background:linear-gradient(#0a0a0c,#141417) !important; border:1px solid #5a4a2a !important; border-top-color:#3a3020 !important; border-radius:3px !important;
  color:var(--fwo-strong) !important; font-family:var(--fwo-display) !important; font-size:14px !important; letter-spacing:0 !important;
}
html body .find-row input:focus{border-color:#a98c4a !important;outline:none}
html body .find-row button{
  background:linear-gradient(#27231b,#120f0a) !important; border:1px solid #8a6a2c !important; border-top-color:#c49a45 !important; border-radius:3px !important;
  color:#f0e2c0 !important; font-family:var(--fwo-display) !important; font-weight:700 !important; letter-spacing:.8px !important;
}
html body .find-row button:hover{border-color:#e8c070 !important;color:#fff !important}
html body .lb-panel-meta{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:.8px !important;color:var(--fwo-dim) !important}
html body .lb-table tbody tr:nth-child(-n+3) td{background:none !important}
html body .lb-table tbody tr.me td{background:linear-gradient(90deg,#e0bb7426,#e0bb7400) !important}
html body .td-rank{font-family:var(--fwo-display) !important;font-weight:700 !important;color:var(--fwo-faint) !important}
html body .lb-table tbody tr:nth-child(1) .td-rank{color:#f0c25a !important}
html body .lb-table tbody tr:nth-child(2) .td-rank{color:#c9cdd3 !important}
html body .lb-table tbody tr:nth-child(3) .td-rank{color:#d39a6a !important}
html body .td-name{color:var(--fwo-strong) !important;font-weight:600}
html body .td-score{font-family:var(--fwo-display) !important;font-weight:700 !important;color:var(--fwo-xp) !important;letter-spacing:0 !important;text-shadow:none !important}
html body .td-sub{color:var(--fwo-dim) !important}
html body .lb-countdown{border-top:1px solid #3a3428 !important;background:none !important}
html body .countdown-time{font-family:var(--fwo-display) !important;font-weight:700 !important;letter-spacing:1px !important;color:var(--fwo-strong) !important;text-shadow:none !important}
html body .lb-note, html body .lb-state{font-family:var(--fwo-display) !important;letter-spacing:.3px !important;font-size:13px !important}

/* ===========================================================================
   GAME GUIDE
   =========================================================================== */
html body #guide-hero{background:radial-gradient(ellipse 60% 80% at 50% 50%,#2a1a0c55,#0b0d1000 70%),linear-gradient(#08090b,#0b0d10) !important;border-bottom:1px solid #2b2820}
html body #guide-hero .hero-grid, html body #guide-hero .hero-bg{display:none}
html body .hero-cn{font-family:'Noto Sans TC','Noto Serif TC',sans-serif !important;color:var(--fwo-title2) !important;text-shadow:0 1px 2px #07080a !important;animation:none !important}
html body #guide-hero .hero-en{font-family:var(--fwo-serif) !important;color:var(--fwo-strong) !important;letter-spacing:7px !important}
html body .hero-sub{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:12px !important;letter-spacing:3px !important;color:var(--fwo-dim) !important;text-transform:uppercase}
html body .orn-bar.gold::before, html body .orn-bar.gold::after, html body .orn-bar.crimson::before, html body .orn-bar.crimson::after{background:linear-gradient(90deg,#a98c4a00,#a98c4a,#a98c4a00) !important}
html body .orn-bar span{color:var(--fwo-hair) !important}
html body .toc-list li a{
  font-family:var(--fwo-display) !important; font-weight:600 !important; font-size:12.5px !important; letter-spacing:.2px !important;
  color:var(--fwo-text) !important; border-bottom:1px solid #1d1b17 !important; border-left:2px solid transparent !important; text-transform:none !important;
}
html body .toc-list li a:hover, html body .toc-list li a.active{background:linear-gradient(90deg,#e0bb7433,#e0bb7400) !important;border-left-color:var(--fwo-label) !important;color:var(--fwo-hi) !important}
html body .toc-list li.toc-sub a{font-weight:400 !important;font-size:12px !important;color:var(--fwo-dim) !important}
html body .guide-section .section-title-bar, html body #guide-wrap .section-title-bar{border-bottom:1px solid #5a4a26 !important}
html body #guide-wrap .section-title-bar h2{font-size:15px !important}
html body .s-icon{color:var(--fwo-title) !important}
html body .s-cn{font-family:'Noto Sans TC',sans-serif !important;color:#3a3d44 !important}
html body .sub-heading{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:13px !important;letter-spacing:1.2px !important;color:var(--fwo-label) !important}
html body .sub-heading::after{background:linear-gradient(90deg,#6d5a2e,#6d5a2e00) !important}
html body .guide-text, html body .c-text, html body .step-body, html body .sk-desc{font-family:var(--fwo-display) !important;letter-spacing:0 !important;color:#c9c3b5 !important;line-height:1.65 !important}
html body .guide-text strong, html body .c-text strong, html body .step-body strong{color:var(--fwo-strong) !important}
html body .guide-table, html body .pk-table{border:1px solid #3a3428 !important;border-radius:3px;overflow:hidden}
html body .guide-table th, html body .pk-table th{
  background:linear-gradient(#1f1a10,#0d0b07) !important; border-bottom:1px solid var(--fwo-head-line) !important; border-right:0 !important;
  font-family:var(--fwo-display) !important; font-weight:700 !important; font-size:11px !important; letter-spacing:1px !important; color:var(--fwo-title) !important;
}
html body .guide-table td, html body .pk-table td{font-family:var(--fwo-display) !important;font-size:13px !important;letter-spacing:0 !important;border-bottom:1px solid #26231d !important;color:var(--fwo-text)}
html body .guide-table tr:hover td, html body .pk-table tr:hover td{background:#ffffff08 !important}
html body .guide-table td.label{font-weight:700;letter-spacing:.3px !important}
html body .guide-table td.gld{color:var(--fwo-xp) !important}
html body .info-card, html body .callout{background:#08080a99 !important;border:1px solid #3e3524 !important;border-top-color:#241f15 !important;border-radius:3px !important}
html body .info-card::before{background:var(--fwo-label) !important}
html body .info-card.crimson::before{background:var(--fwo-accent) !important}
html body .info-card.jade::before{background:#5fbf5a !important}
html body .sk-name{font-family:var(--fwo-display) !important;font-weight:700 !important;letter-spacing:.3px !important;color:var(--fwo-strong) !important}
html body .sk-tag{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:.6px !important;border-radius:10px !important}
html body .step-list li::before{background:linear-gradient(#26221a,#100e0a) !important;border:1px solid #a57c2c !important;color:var(--fwo-title) !important;font-family:var(--fwo-display) !important;font-weight:700 !important;border-radius:3px !important}

/* ===========================================================================
   FORUM
   =========================================================================== */
html body .sidebar-panel-head.jade, html body .sidebar-panel-head.crimson, html body .sidebar-panel-head[style]{background:linear-gradient(#1f1a10f2,#0d0b07f2) !important;color:var(--fwo-title) !important}
html body .category-item{border-left:2px solid transparent !important;font-family:var(--fwo-display) !important;letter-spacing:0 !important}
html body .category-item:hover{background:#ffffff0d !important}
html body .category-item.active{background:linear-gradient(90deg,#e0bb7433,#e0bb7400) !important;border-left-color:var(--fwo-label) !important;color:var(--fwo-hi) !important}
html body .cat-icon{opacity:.9}
html body .cat-count{font-family:var(--fwo-display) !important;font-weight:700 !important;color:var(--fwo-faint) !important;letter-spacing:0 !important}
html body .forum-header h1, html body .forum-header .forum-title{font-family:var(--fwo-serif) !important;color:var(--fwo-strong) !important;letter-spacing:3px !important}
html body .btn-new-post, html body .btn-crimson, html body .msg-staff-btn{
  background:linear-gradient(#c4571d,#8e3a0f) !important; border:1px solid #e07a35 !important; border-top-color:#f19a5c !important; border-radius:3px !important;
  color:#fff6ec !important; font-family:var(--fwo-display) !important; font-weight:700 !important; font-size:12.5px !important; letter-spacing:1px !important; box-shadow:none !important;
}
html body .btn-new-post:hover, html body .btn-crimson:hover, html body .msg-staff-btn:hover{border-color:#ffb37a !important;color:#fff !important}
html body .btn-gold, html body .add-friend-btn, html body .friend-action-btn, html body .chat-send-btn{
  background:linear-gradient(#27231b,#120f0a) !important; border:1px solid #8a6a2c !important; border-top-color:#c49a45 !important; border-radius:3px !important;
  color:#f0e2c0 !important; font-family:var(--fwo-display) !important; font-weight:700 !important; letter-spacing:.6px !important;
}
html body .btn-gold:hover, html body .add-friend-btn:hover, html body .friend-action-btn:hover, html body .chat-send-btn:hover{border-color:#e8c070 !important;color:#fff !important}
html body .section-divider{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:2px !important;color:var(--fwo-dim) !important}
html body .section-divider::after{background:#3a3428 !important}
html body .thread-card{
  background:linear-gradient(#141518e6,#0a0b0de6) !important; border:1px solid #3a3428 !important; border-left:2px solid #3a3428 !important; border-radius:3px !important;
  transition:border-color .12s,transform .12s;
}
html body .thread-card:hover{border-color:#d8b870 !important;transform:translateY(-1px)}
html body .thread-card.pinned{border-left-color:var(--fwo-label) !important}
html body .thread-card.staff-thread{border-left-color:var(--fwo-accent) !important}
html body .thread-avatar{background:linear-gradient(#26221a,#100e0a) !important;border:1px solid #a57c2c !important;border-radius:3px !important;color:var(--fwo-title) !important}
html body .thread-title{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:15px !important;letter-spacing:0 !important;color:var(--fwo-strong) !important}
html body .thread-card:hover .thread-title{color:var(--fwo-hi) !important}
html body .thread-meta{font-family:var(--fwo-display) !important;font-size:12px !important;letter-spacing:0 !important;color:var(--fwo-dim) !important}
html body .thread-meta strong{color:var(--fwo-label) !important}
html body .thread-tag{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:.8px !important;border-radius:10px !important;padding:1px 8px !important;background:#ffffff08 !important}
html body .thread-stat-val{font-family:var(--fwo-display) !important;font-weight:700 !important;color:var(--fwo-strong) !important;letter-spacing:0 !important}
html body .thread-stat-label{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:.6px !important;color:var(--fwo-faint) !important}
html body .post-card{background:linear-gradient(#141518e6,#0a0b0de6) !important;border:1px solid #3a3428 !important;border-radius:3px !important}
html body .post-card.staff-post{border-left:2px solid var(--fwo-accent) !important}
html body .post-body{font-family:var(--fwo-display) !important;font-size:14px !important;line-height:1.65 !important;letter-spacing:0 !important;color:#c9c3b5 !important}
html body .chat-input, html body .add-friend-input, html body .form-select{
  background:linear-gradient(#0a0a0c,#141417) !important; border:1px solid #5a4a2a !important; border-top-color:#3a3020 !important;
  color:var(--fwo-strong) !important; font-family:var(--fwo-display) !important; letter-spacing:0 !important;
}
html body .chat-dot{background:#5fbf5a !important;box-shadow:0 0 5px #5fbf5a !important}
html body .friends-empty, html body .staff-info, html body .forum-notice, html body .reply-guest-notice{font-family:var(--fwo-display) !important;letter-spacing:.2px !important;color:var(--fwo-dim) !important}
html body .auth-switch, html body .auth-switch a{font-family:var(--fwo-display) !important;letter-spacing:0 !important}
html body .auth-switch a{color:var(--fwo-label) !important}

/* ===========================================================================
   INVENTORY / GUDANG  (item cells are the game's .slot)
   =========================================================================== */
html body .inv-slot, html body .gi-slot{
  background:linear-gradient(#1a1a1dd9,#0a0a0ce6) !important; border:1px solid #4d4535 !important; border-radius:8px !important;
  box-shadow:none !important; transition:border-color .12s,transform .12s !important;
}
html body .inv-slot:hover, html body .gi-slot:hover{border-color:#d8b870 !important;transform:translateY(-2px)}
html body .inv-slot.empty{border-color:#3a3428 !important}
html body .item-qty, html body .gi-slot-qty{background:#0a0b0ddd !important;border-radius:4px !important;font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;color:#f7f2e2 !important;letter-spacing:0 !important}
html body .inv-tooltip{background:linear-gradient(#121316fa,#070809fa) !important;border:1px solid #a57c2c !important;border-top-color:#c69a45 !important;border-radius:3px !important}
html body .inv-tooltip-name{font-family:var(--fwo-display) !important;font-weight:700 !important;color:var(--fwo-title) !important;letter-spacing:0 !important}
html body .inv-tooltip-type{font-family:var(--fwo-display) !important;color:#9b9484 !important;letter-spacing:0 !important}
html body .gudang-tabs{border-bottom:1px solid #5a4a26 !important}
html body .gudang-tab{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:12.5px !important;letter-spacing:1px !important;color:var(--fwo-dim) !important;background:none !important;border:0 !important;border-bottom:2px solid transparent !important}
html body .gudang-tab.active{color:var(--fwo-title) !important;border-bottom-color:#d8a84a !important}
html body .currency-item{background:#08080a99 !important;border:1px solid #3e3524 !important;border-top-color:#241f15 !important;border-radius:3px !important}
html body .currency-label{font-family:var(--fwo-display) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:.6px !important;color:var(--fwo-dim) !important}
html body .currency-val{font-family:var(--fwo-display) !important;font-weight:700 !important;letter-spacing:0 !important;text-shadow:none !important}
html body .gudang-cap-track{background:#0b0c0ee6 !important;border:1px solid #3a3c40 !important;border-radius:6px !important}
html body .gudang-cap-fill{background:linear-gradient(#f0c85a,#a37b1c) !important;border-radius:5px !important;box-shadow:none !important}
html body .gi-filter, html body .gi-sort-btn{
  font-family:var(--fwo-display) !important; font-weight:700 !important; font-size:11.5px !important; letter-spacing:.8px !important;
  background:#08080a99 !important; border:1px solid #3e3524 !important; border-radius:12px !important; color:var(--fwo-dim) !important;
}
html body .gi-filter:hover, html body .gi-sort-btn:hover{color:#ded8ca !important;border-color:#6d5a2e !important}
html body .gi-filter.active, html body .gi-sort-btn.active{background:#e0bb741f !important;border-color:#a98c4a !important;color:var(--fwo-title) !important}

/* ===========================================================================
   STANDALONE MESSAGE PAGES  (verify.php, reset_password.php)
   One centred .panel.cast, like the client's login card.
   =========================================================================== */
html body > .box{
  position:relative; padding:34px 30px 30px !important;
  background:linear-gradient(#121316f7,#08090bfa) !important;
  border:2px solid var(--fwo-frame) !important; border-top-color:var(--fwo-frame-top) !important; border-radius:3px;
}
html body > .box::before{
  content:''; position:absolute; inset:-7px; pointer-events:none;
  background:
    url(/assets/ui/frame_tl.png) left top/36px 36px no-repeat,
    url(/assets/ui/frame_tr.png) right top/36px 36px no-repeat,
    url(/assets/ui/frame_bl.png) left bottom/36px 36px no-repeat,
    url(/assets/ui/frame_br.png) right bottom/36px 36px no-repeat;
}
html body > .box h1{font-family:var(--fwo-display);font-weight:700;font-size:17px;letter-spacing:1.4px}
html body > .box p{font-family:var(--fwo-display);font-size:14px;color:#c9c3b5;letter-spacing:0}
html body > .box label{font-family:var(--fwo-display);font-weight:700;font-size:11px;letter-spacing:.8px;color:var(--fwo-label)}
html body > .box input[type=password]{
  height:36px; background:linear-gradient(#0a0a0c,#141417); border:1px solid #5a4a2a; border-top-color:#3a3020; border-radius:3px;
  color:var(--fwo-strong); font-family:var(--fwo-display); font-size:14px;
}
html body > .box input[type=password]:focus{border-color:#a98c4a}
html body > .box button, html body > .box a{
  border-radius:3px; font-family:var(--fwo-display); font-weight:700; font-size:13px; letter-spacing:1px;
  background:linear-gradient(#c4571d,#8e3a0f); border:1px solid #e07a35; border-top-color:#f19a5c; color:#fff6ec;
}
html body > .box button:hover, html body > .box a:hover{border-color:#ffb37a;color:#fff;background:linear-gradient(#d2591b,#8e3a0f)}
html body > .box .err{color:#ff7a2f;font-family:var(--fwo-display);letter-spacing:0}
html body > .box .hint{color:var(--fwo-dim);font-family:var(--fwo-display);letter-spacing:0}
html body .league-btn{height:auto !important;min-height:34px}

/* ===========================================================================
   STAGE 1 ALPHA WARNING BANNER (2026-10-15)
   In navbar.html (public pages) and injected by fwo-shell.js (dashboard).
   The accent orange of .btn.primary, edged with hazard stripes.
   =========================================================================== */
.fwo-alpha-banner{
  position:relative; z-index:1001; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:18px;
  min-height:64px; padding:12px 72px;
  background:linear-gradient(#d2591b,#8e3a0f);
  border-top:1px solid #ffc089; border-bottom:2px solid #ff9a4a;
  color:#fff6ec; text-align:center;
  font-family:'FWO Text','Noto Sans',sans-serif; font-weight:700;
  font-size:clamp(15px,2.1vw,26px); letter-spacing:clamp(1px,.25vw,4px); text-transform:uppercase;
  text-shadow:0 1px 2px #4a1a04;
}
.fwo-alpha-banner::before,.fwo-alpha-banner::after{
  content:''; position:absolute; top:0; bottom:0; width:52px;
  background:repeating-linear-gradient(-45deg,#1b1710 0 10px,#ffb37a 10px 20px);
  opacity:.9;
}
.fwo-alpha-banner::before{left:0;border-right:2px solid #ffc089}
.fwo-alpha-banner::after{right:0;border-left:2px solid #ffc089}
.fwo-alpha-banner .ic{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#1b1710; color:#ffb37a; border:2px solid #ffc089; font-size:20px; text-shadow:none;
  animation:fwo-alpha-pulse 1.6s ease-in-out infinite;
}
.fwo-alpha-banner .sep{opacity:.65;font-weight:400}
@keyframes fwo-alpha-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media (max-width:640px){
  .fwo-alpha-banner{padding:10px 30px;gap:10px;min-height:54px;flex-wrap:wrap}
  .fwo-alpha-banner::before,.fwo-alpha-banner::after{width:16px}
  .fwo-alpha-banner .ic{width:26px;height:26px;font-size:15px}
  .fwo-alpha-banner .sep{display:none}
  .fwo-alpha-banner .t2{flex-basis:100%}
}

/* ===========================================================================
   BANNER STRIP (2026-10-15) — assets/js/fwo-banners.js fills #fwo-banners.
   1) .fwo-alpha-banner  wipe warning (above; optional date line .t3)
   2) .fwo-reg-banner    registration open (jade) / closed (iron)
   =========================================================================== */
#fwo-banners{position:relative;z-index:1001}
.fwo-alpha-banner .t3{flex:0 0 auto;font-size:.56em;letter-spacing:.1em;font-weight:600;opacity:.95;padding:3px 9px;border:1px solid #ffc08988;border-radius:2px;background:#1b171033}
.fwo-reg-banner{
  position:relative; display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:6px 14px; min-height:44px; padding:8px 20px;
  font-family:var(--fwo-display); font-size:15px; letter-spacing:.3px; color:#f2ecdc;
  border-bottom:1px solid #4d4535;
}
.fwo-reg-banner.is-open{background:linear-gradient(#2f4a2a,#1b2a17);border-top:1px solid #7fb87a;border-bottom-color:#7fb87a}
.fwo-reg-banner.is-closed{background:linear-gradient(#1a1b1f,#0c0d10);border-top:1px solid #3a3428}
.fwo-reg-banner .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.fwo-reg-banner.is-open .dot{background:#9fe09a;box-shadow:0 0 0 3px #9fe09a33,0 0 10px #9fe09a;animation:fwo-reg-pulse 1.8s ease-in-out infinite}
.fwo-reg-banner.is-closed .dot{background:#6f6a5e;box-shadow:0 0 0 3px #6f6a5e33}
.fwo-reg-banner .h{font-weight:700;text-transform:uppercase;letter-spacing:1.6px;font-size:14px}
.fwo-reg-banner.is-open .h{color:#d6f5cf}
.fwo-reg-banner.is-closed .h{color:#e0bb74}
.fwo-reg-banner .s{color:#dcd6c8;font-variant-numeric:tabular-nums}
.fwo-reg-banner.is-closed .s{color:#b9b2a2}
.fwo-reg-wins{display:inline-flex;gap:6px}
.fwo-reg-wins .w{font-size:12px;padding:2px 8px;border:1px solid #4d4535;border-radius:2px;color:#8e8878;font-variant-numeric:tabular-nums;background:#0b0d10aa}
.fwo-reg-cta{
  display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:3px;text-decoration:none;
  font:700 13px var(--fwo-display);letter-spacing:.5px;color:#fff6ec;
  background:linear-gradient(#c4571d,#8e3a0f);border:1px solid #e07a35;border-top-color:#f19a5c;
}
.fwo-reg-cta:hover{border-color:#ffb37a;color:#fff}
.fwo-reg-cta:focus-visible{outline:2px solid #ffe7a8;outline-offset:2px}
@keyframes fwo-reg-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){
  .fwo-reg-banner .dot,.fwo-alpha-banner .ic{animation:none}
}
@media (max-width:640px){
  .fwo-reg-banner{font-size:13px;padding:8px 12px}
  .fwo-reg-wins{display:none}
}
@media (min-width:641px){
  .fwo-alpha-banner{flex-wrap:wrap;row-gap:4px}
  .fwo-alpha-banner .t1,.fwo-alpha-banner .t2{white-space:nowrap}
}