:root{
  --bg:#0e1116; --panel:#161b22; --line:#242c38; --ink:#e6edf3; --muted:#8b98a8;
  --accent:#c9a227; --accent-ink:#1a1300; --ok:#1f6f43; --err:#7a2430;
  /* translucent panel, used wherever a surface sits over the background art */
  --panel-t:rgba(18,23,31,.80);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); min-height:100vh;
  display:flex; flex-direction:column;
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Tahoma,"Noto Naskh Arabic",sans-serif;
}

/* Full-bleed key art.
   Drawn as a fixed pseudo-element rather than background-attachment:fixed,
   which iOS Safari ignores (the image would jump while scrolling).

   Two artworks, each drawn at the ratio it will actually be shown at, so
   "cover" has almost nothing to crop: a 16:9 file for landscape screens and a
   9:16 file for portrait ones. Swapped on orientation rather than width, since
   that is what decides which way the crop would bite.

   The overlay is heaviest across the top, where the panel sits, and lifts
   through the lower third so the artwork's own logo (y 62%-87% in both files)
   reads at close to full strength underneath it. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(8,11,16,.78) 0%,
      rgba(8,11,16,.72) 30%,
      rgba(8,11,16,.52) 52%,
      rgba(8,11,16,.18) 70%,
      rgba(8,11,16,.14) 88%,
      rgba(8,11,16,.34) 100%),
    url("/assets/bg-wide.jpg") center center / cover no-repeat;
  background-color:var(--bg);
}

/* Portrait screens get the 9:16 file, so "cover" has almost nothing to crop. */
@media (orientation:portrait){
  body::before{
    background:
      linear-gradient(180deg,
        rgba(8,11,16,.80) 0%,
        rgba(8,11,16,.74) 32%,
        rgba(8,11,16,.54) 54%,
        rgba(8,11,16,.20) 72%,
        rgba(8,11,16,.16) 90%,
        rgba(8,11,16,.36) 100%),
      url("/assets/bg-tall.jpg") center center / cover no-repeat;
    background-color:var(--bg);
  }
}

/* ---------------------------------------------------------------------------
   Falling sakura.
   Sits between the artwork (z-index -1) and the panel (z-index 1), so petals
   drift across the open right-hand side of the art but never over a form
   field. One transform-only keyframe per petal - position, drift and spin in
   a single compositor-driven animation, no layout work per frame.
   --------------------------------------------------------------------------- */
.sakura{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sakura i{
  position:absolute;top:0;left:var(--x);
  width:calc(13px * var(--s));height:calc(13px * var(--s));
  background:linear-gradient(135deg,#fbdfe9 0%,#f0b2c9 45%,#d98aa9 100%);
  border-radius:100% 0 100% 0;
  opacity:var(--o);
  will-change:transform;
  animation:sakura-fall var(--dur) linear var(--delay) infinite;
}
@keyframes sakura-fall{
  0%  {transform:translate3d(0,-12vh,0) rotate(0deg)}
  25% {transform:translate3d(26px,20vh,0) rotate(180deg)}
  50% {transform:translate3d(-18px,48vh,0) rotate(360deg)}
  75% {transform:translate3d(24px,78vh,0) rotate(540deg)}
  100%{transform:translate3d(-10px,112vh,0) rotate(720deg)}
}
/* Fewer petals on a phone - same effect, a fraction of the compositing cost. */
@media (max-width:700px){ .sakura i:nth-child(n+10){display:none} }
/* Motion sensitivity: keep the artwork, drop the movement entirely. */
@media (prefers-reduced-motion:reduce){ .sakura{display:none} }

.wrap{position:relative;z-index:1;
  width:100%;max-width:760px;margin:0 auto;padding:20px 18px 28px;
  flex:1;display:flex;flex-direction:column}

/* Content is centred and flows from the top, leaving the lower third of the
   viewport clear - that is where the artwork's own logo sits (y 62%-87% in
   both background files), so it stays readable underneath the panel. */
main{margin-block:0;padding-block:12px}

/* Table pages need more room than a form column. */
body.wide .wrap{max-width:880px}

/* ---------------------------------------------------------------------------
   Landscape desktop: the panel moves into a column down the left.
   Measured against the artwork itself - in bg-wide.jpg the logo starts at 39%
   of the image width and the swordsman at 75%, so a column that ends before
   the 39% mark never covers either. 420px + 28px of padding keeps it clear
   even at 1280 wide, where that mark lands at x=497.
   Physical left/right on purpose: the column stays on the left in the Arabic
   (RTL) layout too, because the art is composed around its right-hand side.
   --------------------------------------------------------------------------- */

/* The header floats over the artwork, so the nav gets its own translucent pill
   rather than the old underline - a 1px border would vanish against the bright
   blue. The wordmark is back because on wide screens the artwork's own logo is
   cropped out of frame (see body::before). */
header{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:0}
.brand{font-size:23px;font-weight:700;color:var(--accent);text-decoration:none;
  line-height:1.2;text-align:center;letter-spacing:.01em;
  text-shadow:0 2px 16px rgba(0,0,0,.9)}
.brand span{display:block;font-size:12px;font-weight:400;color:#9fb0c4;letter-spacing:.08em}
nav{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;
  padding:6px;border-radius:999px;border:1px solid rgba(255,255,255,.10);
  background:rgba(10,14,20,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
nav a{color:#c3cedd;text-decoration:none;font-size:14px;padding:6px 13px;border-radius:999px}
nav a:hover{color:#fff;background:rgba(255,255,255,.10)}
nav a.lang{color:var(--accent)}

/* Headings sit directly on the artwork with no panel behind them, so they
   carry their own shadow to stay legible over the lighter patches. */
h1{font-size:26px;margin:0 0 8px;text-align:center;text-shadow:0 2px 14px rgba(0,0,0,.85)}
.lead{color:#b9c5d4;margin:0 0 22px;text-align:center;text-shadow:0 1px 10px rgba(0,0,0,.8)}

/* Panels sit on the artwork, so they are translucent and blurred rather than
   flat - the backdrop still reads through without fighting the text. */
.card{background:var(--panel-t);border:1px solid var(--line);border-radius:10px;padding:22px;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
label{display:block;margin:16px 0 6px;font-size:14px;font-weight:600}
label:first-of-type{margin-top:0}
input[type=text],input[type=password],input[type=email]{
  width:100%;padding:11px 12px;border-radius:8px;border:1px solid var(--line);
  background:#0d1117;color:var(--ink);font-size:15px;font-family:inherit
}
input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.hint{color:var(--muted);font-size:12.5px;margin-top:5px}
button{
  margin-top:24px;width:100%;padding:12px;border:0;border-radius:8px;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);font-size:15px;font-weight:700;font-family:inherit
}
button:hover{filter:brightness(1.08)}

.alert{padding:12px 14px;border-radius:8px;margin-bottom:20px;font-size:14.5px;border:1px solid}
.alert.ok{background:rgba(31,111,67,.16);border-color:var(--ok)}
.alert.err{background:rgba(122,36,48,.16);border-color:var(--err)}
.alert.warn{background:rgba(201,162,39,.12);border-color:var(--accent)}

table.kv{width:100%;border-collapse:collapse;margin-top:10px}
table.kv td{padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
table.kv td:last-child{text-align:end;font-family:ui-monospace,Consolas,monospace;color:var(--accent)}
table.kv tr:last-child td{border-bottom:0}

/* One row of three on a desktop column - stacking them pushed the page down
   over the artwork's logo. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:18px}
.tile{display:block;background:var(--panel-t);border:1px solid var(--line);border-radius:10px;
  padding:16px;text-decoration:none;color:var(--ink);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.tile:hover{border-color:var(--accent)}
.tile b{display:block;margin-bottom:3px}
.tile span{color:var(--muted);font-size:13px}

footer{margin-top:auto;padding-top:28px;color:var(--muted);font-size:12.5px;text-align:center}

/* character table */
.table-scroll{overflow-x:auto;margin-top:12px}
table.chars{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
table.chars th{
  text-align:start;padding:8px 10px;border-bottom:2px solid var(--line);
  color:var(--muted);font-weight:600;font-size:12.5px;white-space:nowrap
}
table.chars td{padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.chars tr:last-child td{border-bottom:0}
table.chars tbody tr:hover{background:rgba(201,162,39,.05)}
table.chars td.cname{font-weight:700;color:var(--accent)}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid}
.badge.on{color:#3fb768;border-color:rgba(63,183,104,.5);background:rgba(31,111,67,.15)}
.badge.off{color:var(--muted);border-color:var(--line);background:transparent}

/* rankings */
.rank-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.rtab{width:auto;margin:0;padding:9px 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel-t);color:var(--muted);font-size:14px;font-weight:600;cursor:pointer}
.rtab:hover{color:var(--ink)}
.rtab.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.rank-panel{display:none}
.rank-panel.active{display:block}
table.rank td.metric{font-weight:700;color:var(--accent);font-family:ui-monospace,Consolas,monospace}
.rnum{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
  padding:0 6px;border-radius:6px;font-weight:700;font-size:13px;color:var(--muted);background:var(--panel)}
.rnum.g{background:linear-gradient(135deg,#f6d365,#c9a227);color:#1a1300}
.rnum.s{background:linear-gradient(135deg,#e8edf2,#aab6c4);color:#1a1a1a}
.rnum.b{background:linear-gradient(135deg,#e0a06a,#a56a34);color:#241300}

/* ---------------------------------------------------------------------------
   Download
   --------------------------------------------------------------------------- */
.dl-card{margin-bottom:14px}
/* The launcher card is the one that matters - patches only arrive through it -
   so it gets the accent border and sits visually above the rest. */
.dl-main{margin-bottom:14px;border-color:rgba(201,162,39,.45);
  box-shadow:0 0 0 1px rgba(201,162,39,.12), 0 8px 26px rgba(0,0,0,.35)}

.dl-head{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:8px}
.dl-head b{font-size:18px;color:var(--accent)}
.dl-p{margin:0 0 14px;color:#c6d2e0;font-size:14.5px;line-height:1.75}

/* Download buttons are links, not <button>, so they need the button look
   spelled out rather than inherited. */
.dl-btn{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:13px 18px;border-radius:9px;text-decoration:none;
  background:var(--accent);color:var(--accent-ink);
  font-size:15.5px;font-weight:700;text-align:center}
.dl-btn:hover{filter:brightness(1.08)}
.dl-btn .dl-file{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;
  font-weight:400;opacity:.72;direction:ltr;unicode-bidi:isolate;
  overflow-wrap:anywhere}
/* The direct download is the fallback, so it reads as secondary. */
.dl-btn.alt{background:transparent;color:var(--accent);border:1px solid rgba(201,162,39,.55)}
.dl-btn.alt:hover{background:rgba(201,162,39,.10);filter:none}

.dl-sub{margin:18px 0 2px;font-size:12.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}

.dl-ways{display:grid;gap:12px}
.dl-way{padding:14px;border-radius:9px;border:1px solid var(--line);
  background:rgba(10,14,20,.45)}
.dl-way-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-weight:700;font-size:15px}
.dl-num{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;flex:none;
  background:var(--accent);color:var(--accent-ink);font-size:12.5px;font-weight:700}
.dl-way-p{margin:8px 0 12px;color:#c6d2e0;font-size:14px;line-height:1.75}
.dl-way .dl-btn{margin-top:4px}

.dl-steps{margin:10px 0 0;padding-inline-start:22px;color:#c6d2e0;
  font-size:14.5px;line-height:1.95}
.dl-steps li{margin-bottom:4px}

.dl-foot{text-align:center;margin-top:10px}

/* ---------------------------------------------------------------------------
   Wiki
   --------------------------------------------------------------------------- */
.wiki-lead{text-align:center;margin:14px 0 16px}
.wiki-line,.wiki-update{margin-bottom:16px}

.wiki-line-head{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:10px}
.wiki-line-head b{font-size:18px;color:var(--accent)}
.wiki-arrow{color:var(--muted)}
.wiki-to{color:#7fb2ff !important}

/* "Custom" is the whole point of the page, so it gets the accent colour;
   "disabled" and the level pill stay quiet next to it. */
.badge-custom{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:var(--accent);color:var(--accent-ink);letter-spacing:.02em}
.badge-custom.sm{padding:1px 7px;font-size:10.5px;margin-inline-start:6px;vertical-align:middle}
.badge-off{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;
  border:1px solid var(--err);color:#e0929a;background:rgba(122,36,48,.18)}
.badge-lv{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;
  border:1px solid var(--line);color:var(--muted)}

.wiki-intro{margin:0 0 14px;color:#c6d2e0;font-size:14.5px;line-height:1.75}
.wiki-kv{margin-bottom:4px}
.wiki-kv td:last-child{font-family:inherit;color:var(--ink)}
.wiki-warn{margin:10px 0 0;padding:10px 12px;border-radius:8px;font-size:13.5px;
  background:rgba(122,36,48,.16);border:1px solid var(--err)}

.wiki-sub{margin:18px 0 2px;font-size:12.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}

.wiki-notes{margin:10px 0 0;padding-inline-start:20px;color:#c6d2e0;font-size:14px;line-height:1.8}
.wiki-notes li{margin-bottom:6px}
.wiki-pow{color:var(--accent);font-weight:700}

/* Skill cards inside an awakening block. */
.wiki-skill{margin-top:10px;padding:12px 14px;border-radius:9px;
  border:1px solid var(--line);background:rgba(10,14,20,.45)}
.wiki-skill b{color:var(--accent)}
.wiki-kind{margin-inline-start:8px;font-size:12.5px;color:var(--muted)}
.wiki-skill-desc{margin-top:6px;font-size:14px;color:#c6d2e0;line-height:1.75}

/* The per-skill explanation column needs to wrap; every other cell in
   table.chars is nowrap so the numbers stay aligned. */
.wiki-wrap{white-space:normal !important;min-width:260px;color:#c6d2e0}

.wiki-search{width:100%;max-width:340px;margin:0 auto 14px;display:block}

.wiki-date{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--accent);
  letter-spacing:.04em;margin-bottom:4px}
.wiki-utitle{font-size:16.5px;display:block}

/* server status widget */
.status{margin:22px 0 4px;padding:16px 18px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel-t);display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.status-main{display:flex;align-items:center;gap:10px;font-size:17px}
.status .dot{width:11px;height:11px;border-radius:50%;flex:none}
.status.up .dot{background:#3fb768;box-shadow:0 0 0 0 rgba(63,183,104,.7);animation:pulse 2s infinite}
.status.down .dot{background:#e0555f}
.status.up .status-main b{color:#3fb768}
.status.down .status-main b{color:#e0555f}
.status-count{font-size:16px;font-weight:700;color:var(--accent)}
.status-count span{font-size:13px;font-weight:400;color:var(--muted)}
.status-sub{margin-inline-start:auto;display:flex;gap:18px;font-size:13px;color:var(--muted)}
.status-sub .okc{color:#3fb768}
.status-sub .errc{color:#e0555f}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(63,183,104,.6)}
  70%{box-shadow:0 0 0 8px rgba(63,183,104,0)}
  100%{box-shadow:0 0 0 0 rgba(63,183,104,0)}
}