/* Last Treasure Online wiki — an encyclopedia look: serif headings over a hairline
   rule, dense readable tables, a fact card on the right. Soft blues and warm
   yellows, minimal, gradients kept to a whisper. */
:root{
  --paper:#fcfdff; --panel:#f4f8fd; --ink:#1b2733; --dim:#5b6b7c;
  --line:#d6e2ef; --line-strong:#b9cde0;
  --blue:#2f6294; --blue-soft:#e8f1fa; --blue-mid:#cfe2f4;
  --gold:#9a6f08; --gold-soft:#fdf6dd; --gold-mid:#f6e7ac;
  --warn:#a4501f;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#141a21; --panel:#1a222c; --ink:#e6edf4; --dim:#9fb0c1;
    --line:#2a3644; --line-strong:#3a4a5c;
    --blue:#8fc0ea; --blue-soft:#1b2836; --blue-mid:#24384c;
    --gold:#e2bd68; --gold-soft:#2b2618; --gold-mid:#3d3520;
    --warn:#e0a06a;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.65 var(--sans)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
code{font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:.5px 4px}
pre{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:4px;padding:12px 14px;overflow-x:auto}
pre code{background:none;border:0;padding:0}

/* masthead ------------------------------------------------------------- */
.masthead{display:flex;align-items:center;gap:20px;padding:10px 22px;
  background:linear-gradient(180deg,var(--blue-soft),var(--paper));
  border-bottom:1px solid var(--line-strong);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:11px;color:inherit}
.brand:hover{text-decoration:none}
.mark{display:grid;place-items:center;width:36px;height:36px;border-radius:7px;
  background:linear-gradient(155deg,var(--gold-mid),var(--blue-mid));
  border:1px solid var(--line-strong);font:700 12px/1 var(--serif);
  letter-spacing:.5px;color:var(--ink)}
.brandtext{display:flex;flex-direction:column;line-height:1.25}
.brandtext b{font:600 16px/1.2 var(--serif)}
.brandtext small{color:var(--dim);font-size:11.5px}
.search{margin-left:auto;position:relative;width:min(300px,34vw)}
.demo{display:inline-block;padding:7px 15px;border-radius:6px;white-space:nowrap;
  font:600 13.5px var(--sans);color:#2a2410;border:1px solid var(--gold);
  background:linear-gradient(180deg,var(--gold-mid),var(--gold-soft))}
.demo:hover{text-decoration:none;filter:brightness(1.04);
  box-shadow:0 2px 10px rgba(140,110,20,.22)}
@media (prefers-color-scheme:dark){.demo{color:var(--gold)}}
.search input{width:100%;padding:7px 11px;border:1px solid var(--line-strong);
  border-radius:5px;background:var(--paper);color:var(--ink);font:14px var(--sans)}
.search input:focus{outline:2px solid var(--blue-mid);outline-offset:0}
#results{position:absolute;top:38px;left:0;right:0;background:var(--paper);
  border:1px solid var(--line-strong);border-radius:6px;max-height:60vh;overflow:auto;
  box-shadow:0 12px 30px rgba(20,40,70,.14);display:none}
#results a{display:block;padding:8px 12px;border-bottom:1px solid var(--line)}
#results a:last-child{border-bottom:0}
#results a:hover,#results a.sel{background:var(--blue-soft);text-decoration:none}
#results .k{float:right;color:var(--dim);font-size:11px;text-transform:uppercase;
  letter-spacing:.6px}
#results .b{display:block;color:var(--dim);font-size:12px}

/* layout --------------------------------------------------------------- */
.shell{display:flex;gap:28px;max-width:1240px;margin:0 auto;padding:22px}
.sidebar{flex:0 0 172px;position:sticky;top:78px;align-self:flex-start}
.sidebar ul{list-style:none;margin:0;padding:0;font-size:13.5px}
.sidebar li.sep{height:1px;background:var(--line);margin:9px 0}
.sidebar a{display:block;padding:4px 9px;border-radius:4px;color:var(--dim)}
.sidebar a:hover{background:var(--blue-soft);color:var(--blue);text-decoration:none}
.sidebar a.here{background:var(--blue-soft);color:var(--blue);font-weight:600;
  box-shadow:inset 2px 0 0 var(--blue)}
.article{flex:1 1 auto;min-width:0}

/* article -------------------------------------------------------------- */
.pagetitle{font:400 30px/1.25 var(--serif);margin:0 0 2px;padding-bottom:7px;
  border-bottom:1px solid var(--line-strong)}
.subtitle{margin:0 0 18px;color:var(--dim);font-size:13px;font-style:italic}
.article h2{font:400 21px/1.3 var(--serif);margin:26px 0 10px;padding-bottom:5px;
  border-bottom:1px solid var(--line)}
.article h3{font:600 15.5px/1.3 var(--sans);margin:18px 0 8px}
.lead{font-size:16px;line-height:1.7}
blockquote{margin:0 0 10px;padding:9px 14px;background:var(--gold-soft);
  border-left:3px solid var(--gold-mid);border-radius:0 4px 4px 0;font-style:italic}
blockquote.line{font-size:14px;margin:0 0 6px}
.note{background:var(--blue-soft);border:1px solid var(--blue-mid);border-radius:5px;
  padding:9px 13px;margin:10px 0;font-size:13.5px}
.warn{color:var(--warn);font-weight:600}
.ms{color:var(--dim);font-size:11.5px}

/* infobox -------------------------------------------------------------- */
.infobox{float:right;width:300px;margin:0 0 18px 24px;border:1px solid var(--line-strong);
  border-radius:7px;overflow:hidden;background:var(--paper);font-size:13px;
  box-shadow:0 1px 3px rgba(30,60,90,.06)}
.infobox .ibhead{padding:9px 13px;font:600 15px/1.3 var(--serif);text-align:center;
  background:linear-gradient(180deg,var(--blue-mid),var(--blue-soft));
  border-bottom:1px solid var(--line-strong)}
.infobox.yellow .ibhead{background:linear-gradient(180deg,var(--gold-mid),var(--gold-soft))}
.infobox .ibshot img{display:block;width:100%;border-bottom:1px solid var(--line)}
.infobox .ibkicker{padding:7px 13px 0;text-align:center}
.infobox table{width:100%;border-collapse:collapse;margin:7px 0 0}
.infobox th{width:47%;text-align:left;padding:4px 13px;color:var(--dim);font-weight:500;
  vertical-align:top}
.infobox th[title]{cursor:help;border-bottom:1px dotted var(--line-strong)}
.infobox td{padding:4px 13px;text-align:right;font-variant-numeric:tabular-nums}
.infobox tr.ibsplit td{padding:0;border-top:1px solid var(--line);height:7px}
.pill{display:inline-block;padding:1px 8px;border-radius:9px;font-size:11px;
  background:var(--blue-soft);border:1px solid var(--blue-mid);color:var(--dim)}
.pill.boss{background:var(--gold-soft);border-color:var(--gold-mid);color:var(--gold);
  font-weight:600}
.pill.alt{background:var(--gold-soft);border-color:var(--gold-mid)}

/* tables --------------------------------------------------------------- */
.tablewrap{overflow-x:auto;margin:10px 0 16px}
.tablewrap.wide{clear:right}
.wikitable{border-collapse:collapse;width:100%;font-size:13.5px;
  border:1px solid var(--line-strong)}
.wikitable thead th{background:linear-gradient(180deg,var(--blue-soft),var(--panel));
  border:1px solid var(--line-strong);padding:7px 10px;text-align:left;font-weight:600;
  white-space:nowrap}
.wikitable thead th[title]{cursor:help}
.wikitable td{border:1px solid var(--line);padding:6px 10px;vertical-align:top;
  font-variant-numeric:tabular-nums}
.wikitable tbody tr:nth-child(even){background:var(--panel)}
.wikitable tbody tr:hover{background:var(--blue-soft)}
.tag{display:inline-block;margin:2px 3px 0 0;padding:0 6px;border-radius:8px;
  font-size:10.5px;background:var(--panel);border:1px solid var(--line-strong);
  color:var(--dim)}
.tag.warn{background:var(--gold-soft);border-color:var(--gold-mid);color:var(--gold)}
.tag.el{background:var(--blue-soft);border-color:var(--blue-mid);color:var(--blue)}

/* images --------------------------------------------------------------- */
figure{margin:0}
.hero-shot{margin:0 0 16px}
.hero-shot img{border:1px solid var(--line-strong);border-radius:6px;display:block}
.gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  margin:12px 0 18px;clear:both}
.gallery figure{border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:var(--panel)}
.gallery img{display:block;width:100%}
.gallery figcaption{padding:7px 10px;font-size:12.5px;color:var(--dim)}
.gallery .src{font-size:11.5px}

/* cards ---------------------------------------------------------------- */
.cards{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  margin:14px 0 20px;clear:both}
.card{display:block;padding:11px 13px;border:1px solid var(--line);border-radius:6px;
  background:linear-gradient(170deg,var(--panel),var(--paper));color:inherit;
  transition:box-shadow .13s,transform .13s,border-color .13s}
.card:hover{border-color:var(--blue);text-decoration:none;
  box-shadow:0 3px 12px rgba(30,80,140,.10);transform:translateY(-1px)}
.card .thumb{display:block;margin:-11px -13px 9px;border-bottom:1px solid var(--line);
  aspect-ratio:16/9;overflow:hidden;background:var(--blue-soft)}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cardtitle{display:block;font:600 14.5px/1.3 var(--sans);color:var(--blue);
  margin-bottom:3px}
.cardblurb{display:block;font-size:12.5px;color:var(--dim)}
.badge{display:inline-block;margin-left:6px;padding:0 6px;border-radius:8px;
  font:600 10px/1.6 var(--sans);background:var(--gold-mid);color:#2a2410;
  vertical-align:1px}

/* hero ----------------------------------------------------------------- */
.hero{padding:18px 22px;border:1px solid var(--line-strong);border-radius:8px;
  background:linear-gradient(150deg,var(--blue-soft),var(--gold-soft) 130%)}
.hero h2{margin:0 0 8px;border:0;font:400 22px/1.3 var(--serif)}
.hero p{margin:0 0 8px}
.heronote{color:var(--dim);font-style:italic;font-size:13.5px}

/* footer --------------------------------------------------------------- */
.catbar{clear:both;margin-top:30px;padding:9px 13px;border:1px solid var(--line);
  border-radius:5px;background:var(--panel);font-size:12.5px;color:var(--dim)}
.foot{clear:both;max-width:1240px;margin:0 auto;padding:20px 22px 34px;
  border-top:1px solid var(--line);color:var(--dim);font-size:12px}

@media (max-width:880px){
  .shell{flex-direction:column;padding:14px}
  .sidebar{position:static;flex:none}
  .sidebar ul{display:flex;flex-wrap:wrap;gap:3px}
  .sidebar li.sep{display:none}
  .infobox{float:none;width:auto;margin:0 0 16px}
  .search{width:auto;flex:1}
  .demo{order:3;width:100%;text-align:center}
}