/* NATRUBRIS V1.2 / FORGED MANUSCRIPT
  Medieval material treatment: cold-cut stone, oxidized bronze, dark vellum,
  carved corner marks and restrained ink grain. Loads after Midnight Abyss.
  Everything is CSS/SVG original design. No third-party game art used as UI texture.
*/
:root {
  --stone-cut:#1a2439;
  --stone-edge:#7180a0;
  --metal-bronze:#a68a60;
  --metal-dark:#493c34;
  --vellum-ink:#c8cbd6;
  --vellum-blue:#1c263c;
  --decor-light:#dac498;
  --decor-shadow:#111322;
  --engrave:#c8b17b66;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:3;
  background:url("./assets/grain.svg") repeat;background-size:256px 256px;
  opacity:.048;mix-blend-mode:soft-light;
}
.top{
  padding:0 19px;
  border:1px solid #93846a54;
  border-bottom:2px ridge #a9926f97;
  background:
    linear-gradient(90deg,#baa16e17,transparent 11%,transparent 89%,#baa16e12),
    linear-gradient(180deg,#2d3443 0%,#151c31 12%,#0e162a 54%,#1a2740 100%);
  box-shadow:inset 0 1px #e9dbb423,inset 0 -2px #0009,0 8px 24px #0006;
  position:relative;
}
.top::before,.top::after{
  content:"✥";position:absolute;top:50%;transform:translateY(-50%);font:12px Georgia,serif;
  color:#b79a6e8e;pointer-events:none;
}
.top::before{left:6px}.top::after{right:6px}
.brandmark{
  flex:0 0 51px;width:51px;height:53px;display:flex;align-items:center;justify-content:center;
  font:30px/1 Georgia,serif;letter-spacing:-.17em;padding:0 6px 7px 0;
  color:#e6cf9b;text-shadow:0 1px #070a10,0 0 11px #e8bd6c33;
  background:radial-gradient(circle at 44% 24%,#3d465a,#161e31 78%);
  border:1px solid #bea475;
  clip-path:polygon(8% 0,92% 0,100% 13%,94% 74%,50% 100%,6% 74%,0 13%);
  box-shadow:inset 0 0 0 3px #5e543e;
}
.brand b{
  font-family:Georgia,serif;letter-spacing:.25em;color:#eadcbf;
  text-shadow:0 1px 0 #000a;
}
.brand small{color:#c1b19a}
.header-title{font-family:Georgia,serif;letter-spacing:.25em;color:#c0b8ad}
.top nav button{
  background:linear-gradient(180deg,#364058,#182138 45%,#0c152a);
  box-shadow:inset 0 1px #e9d2a536,inset 0 -2px #02040d,2px 2px 0 #0003;
  border:1px solid #98856a9c;
  border-radius:2px;color:#efe5d0;
  font-family:Georgia,"Noto Serif TC",serif;
  letter-spacing:.03em;transition:background-color .16s,border-color .16s;
}
.top nav button:hover{background:linear-gradient(180deg,#46577b,#253250);border-color:#d4b57d;color:#fff5df}
.top nav kbd{color:#b7bfd4;border-color:#7f7f8b}
#deck{
  background:
    radial-gradient(ellipse at 65% 33%,#34466719,transparent 72%),
    linear-gradient(130deg,#1b253c4d 0%,#080f2040 42%,#15203948 100%);
  border:1px solid #8c806b70;
  outline:1px solid #172033;
  outline-offset:5px;
  box-shadow:
    inset 0 0 0 2px #050b14b8,
    inset 0 0 0 5px #83715026,
    0 18px 38px #0005;
}
#deck::before{
  content:"";position:absolute;inset:9px;z-index:4;pointer-events:none;
  border:1px solid #a28e6d36;
  background:
    linear-gradient(135deg,#b8a17c 0 1px,transparent 1px 100%) left top / 42px 42px no-repeat,
    linear-gradient(225deg,#b8a17c 0 1px,transparent 1px 100%) right top / 42px 42px no-repeat,
    linear-gradient(45deg,#b8a17c 0 1px,transparent 1px 100%) left bottom / 42px 42px no-repeat,
    linear-gradient(-45deg,#b8a17c 0 1px,transparent 1px 100%) right bottom / 42px 42px no-repeat;
  box-shadow:inset 0 0 0 1px #111b2a65;
}
#deck::after{
  content:"✥";position:absolute;top:7px;right:15px;font:20px Georgia,serif;
  color:#c6a77583;text-shadow:0 1px 2px #02030a;z-index:5;pointer-events:none;
}
.slide.standard{
  background:
    radial-gradient(ellipse at 90% 12%,#8070510a,transparent 54%),
    radial-gradient(ellipse at 5% 80%,#6b7cbe0b,transparent 57%);
}
.standard>h1{
  font-family:Georgia,"Noto Serif TC",serif;
  color:#f0e7d8;
  text-shadow:0 2px 0 #070b15,0 0 26px #c5a6741c;
  position:relative;padding-bottom:12px;
}
.standard>h1::after{
  content:"";position:absolute;bottom:0;left:0;width:min(170px,35%);height:2px;
  background:linear-gradient(90deg,#e2c597,#a89165 40%,#8778a050 80%,transparent);
  box-shadow:0 2px 0 #030911;
}
.kicker{
  color:#ccb78d;font-family:Georgia,"Noto Serif TC",serif;
  text-shadow:0 1px 1px #03070e;
}
.kicker i{height:2px;background:linear-gradient(90deg,#e3c696,#816c57)}
.lead{color:#c1cbdb}
.cover .game-logo{
  font-family:Georgia,serif;
  color:#e6d2ae;
  text-shadow:0 2px #11131c,0 0 42px #a5a4d63c;
}
.cover .cn-logo{color:#e9e1cf}
.cover .ornament{color:#c2aa80;text-shadow:0 2px #101019}
.hero-art,.map-art,.dungeon-art,.pixel-art{
  outline:2px solid #4f4b48a8;outline-offset:2px;
  box-shadow:
    inset 0 0 0 6px #0c1523,
    inset 0 0 0 8px #a58c5d54,
    0 13px 23px #0006;
}
.hero-art:before{z-index:2}
.hero-art:after{z-index:5}
.hero-art>span{z-index:6}
.ornament,.rune-caption{letter-spacing:.21em}
/* Dark vellum and chamfered panels */
.motto,.facts>div,.triple article,.roadmap article,
.price-card,.dungeon-art,.map-art,.pixel-art,.loop>div{
  border-radius:2px;
  background-blend-mode:overlay,normal;
}
.motto,.facts>div,.triple article,.roadmap article,.loop>div{
  position:relative;overflow:hidden;
}
.motto::after,.facts>div::after,.triple article::after,
.roadmap article::after,.loop>div::after{
  content:"";position:absolute;inset:6px;pointer-events:none;z-index:2;
  border:1px solid #cfb27b35;
  background:
    radial-gradient(circle at 5px 5px,#ccb17f88 0 1px,transparent 2px),
    radial-gradient(circle at calc(100% - 5px) 5px,#ccb17f88 0 1px,transparent 2px),
    radial-gradient(circle at 5px calc(100% - 5px),#ccb17f88 0 1px,transparent 2px),
    radial-gradient(circle at calc(100% - 5px) calc(100% - 5px),#ccb17f88 0 1px,transparent 2px);
  opacity:.68;
}
.motto,.facts>div{
  border-color:#a3906b74;
  box-shadow:inset 0 1px #d4bd8b35,inset 0 -4px #070e20,3px 5px 0 #0004;
}
.motto{
  background:
    linear-gradient(150deg,#bda36a11,transparent 32%,#7a87b714 70%,#0006),
    linear-gradient(155deg,#2b354a,#161d30);
}
.facts>div{
  background:
    linear-gradient(150deg,#bea7790d,transparent 53%,#0004),
    linear-gradient(160deg,#222c43,#12192b);
}
.triple article{
  background:
    linear-gradient(155deg,#bfa66d0a,transparent 40%,#17121b25 80%),
    linear-gradient(150deg,#29354e,#131d32 84%);
  border-color:#97815f8b;
  box-shadow:inset 0 1px #cdbd9c3b,inset 0 -4px #081020,2px 4px 10px #0004;
}
.classes .featured{
  background:
    linear-gradient(154deg,#d1ba8513,transparent 60%),
    linear-gradient(155deg,#34415a,#15233b);
  border-color:#d0b88c9c;
}
.class-symbol,.persona{color:#d4c19b;text-shadow:0 1px #050814,0 0 20px #8da7d43b}
.ribbon{
  font-family:Georgia,"Noto Serif TC",serif;
  background:linear-gradient(120deg,#dec398,#a58b61);
  box-shadow:0 2px 7px #0006;
  z-index:5;
}
.ribbon.muted{background:linear-gradient(130deg,#676681,#353b5b);color:#eef0fc}
.roman{color:#c3aa82!important;text-shadow:0 2px #0a1125}
.loop>div{
  border-color:#98876e70;
  background:
    linear-gradient(150deg,#a9a1ae10,transparent 52%),
    linear-gradient(160deg,#293850,#121d31);
  box-shadow:inset 0 1px #cdb98a33,inset 0 -3px #090d19;
}
.loop>div b{color:#b9c9ed;text-shadow:0 0 28px #759adb55}
.roadmap article{
  border:1px solid #9880657d;
  border-top:3px double #cbb080;
  background:
    linear-gradient(90deg,#b69b620b,transparent 32%),
    linear-gradient(155deg,#27364e,#141d31);
  box-shadow:inset 0 1px #bea6782b,inset 0 -4px #090e1b;
}
.statement,.endline{
  border-color:#aa916b8d;
  background:linear-gradient(90deg,#7a654a22,transparent 82%);
}
.scope .callout,.pricing .price-card{border-color:#ae946f}
.price-card{
  background:
    radial-gradient(circle at 50% 35%,#9e86683d 0%,#3636525c 45%,#151b2c 84%),
    linear-gradient(160deg,#2d2e45,#101629);
  box-shadow:inset 0 0 0 7px #060b1538,inset 0 0 0 8px #cfb17a46,0 8px 20px #0004;
}
.price{font-family:Georgia,serif;text-shadow:0 2px #161727,0 0 38px #ceb98f44}
/* Stone-tablet map and dungeon */
.map-art{background-color:#172338}
.map-art .continent{filter:drop-shadow(0 0 15px #7392ad42)}
.dungeon-art,.pixel-art{border-color:#9a855e94}
.rooms>div{
  border-color:#18223a;
  outline-color:#c1a87899;
  background:linear-gradient(145deg,#364158,#202d4b 75%);
  box-shadow:inset 0 1px #d1b47d4e,0 1px 9px #0009;
}
.rooms .boss{background:linear-gradient(145deg,#554161,#282644)}
.arch{
  border-color:#3b3a4b;
  box-shadow:inset 0 0 25px #040716,0 0 0 2px #bd9e7057,0 0 20px #8fa5e02c;
}
.production>div{border-color:#94836a79}
.link-cta,.ending-links a,.paging button{
  border-color:#b59b75a1;
  background:linear-gradient(180deg,#2b3550 0%,#151e32 45%,#0b1325 100%);
  box-shadow:inset 0 1px #ddc39733,inset 0 -2px #080c17,2px 2px 5px #0004;
  border-radius:2px;
  color:#ece1c8;
}
.link-cta:hover,.ending-links a:hover,.paging button:hover:not(:disabled){
  background:linear-gradient(180deg,#405174,#20304e);
  border-color:#e2c28f;color:#f6eee0;
}
.footer{
  background:linear-gradient(180deg,#141c30cc,#0c1425);
  border:1px solid #98866b75;
  border-top:2px ridge #b69b70a3;
  padding:0 18px;
  box-shadow:inset 0 1px #e0c79824;
}
.footer .chapter{color:#dac8a4}
.track{background:#26304b;border:1px solid #7d786b5a;height:5px;box-shadow:inset 0 1px 2px #000a}
.track span{background:linear-gradient(90deg,#6a78a8,#9daeca 55%,#cbb180)}
.paging button{width:43px;height:43px;font-size:23px}
dialog{
  border:2px ridge #bba273;
  background:
    radial-gradient(ellipse at 8% 8%,#c3ab7f14,transparent 60%),
    linear-gradient(150deg,#2b3144,#111a2d);
  box-shadow:inset 0 0 0 6px #111728,inset 0 0 0 7px #a58c625e,0 30px 90px #000b;
}
dialog h2{font-family:Georgia,"Noto Serif TC",serif;color:#efe3cd}
.index-button{
  border-color:#91816a90;
  background:linear-gradient(150deg,#303a50,#172238);
  box-shadow:inset 0 1px #a9a2a440;
}
.index-button:hover,.index-button.selected{
  background:linear-gradient(145deg,#574a42,#303b57);
  border-color:#dbc497;
}
.sources-btn{color:#c0b094;font:11px Georgia,"Noto Serif TC",serif}
/* Reference materials are study examples. Labels are baked into the HTML, not optional hover titles. */
.ref-frame{
  position:relative;display:block;width:100%;margin:0;
  padding:0;border:1px solid #bc9e70;
  background:#0c1324;cursor:zoom-in;text-align:left;
  box-shadow:0 0 0 3px #0a1020,0 0 0 4px #a68b604d,inset 0 0 0 3px #1c2237;
  overflow:hidden;
}
.ref-frame img{display:block;width:100%;object-fit:cover;transition:filter .2s}
.ref-frame:hover img,.ref-frame:focus-visible img{filter:brightness(1.12)}
.ref-frame .ref-label{
  display:block;padding:4px 8px;
  font:600 10px/1.25 "Noto Sans TC",sans-serif;letter-spacing:.04em;
  background:#090f21ed;color:#f0ddb8;
  border-top:1px solid #9e825b8c;
}
.ref-frame .ref-label b{color:#bed6ff;font-weight:600}
.ref-frame .ref-attribution{
  display:block;padding:3px 8px 5px;color:#c2c7d7;font-size:9px;line-height:1.25;
  background:#131c30;
}
.ref-portrait{margin-top:auto;padding-top:5px}
.ref-portrait .ref-frame{max-width:100%}
.ref-portrait img{height:clamp(64px,11vh,130px);object-fit:contain;background:radial-gradient(circle at 50% 40%,#40507277,#091322 70%)}
.ref-portrait .ref-label{font-size:9px}
.ref-portrait .ref-attribution{font-size:9px}
.ref-shot{margin:8px 0 7px}
.ref-shot img{aspect-ratio:16/9;height:clamp(74px,12vh,142px);object-position:center}
.ref-shot .ref-label{font-size:9px}
.ref-shot .ref-attribution{display:none}
.owned-caption{font-size:9px;line-height:1.3;color:#d1c7b5;text-align:center;padding-top:4px}
.competitors article p{margin:8px 0;line-height:1.55}
.competitors article footer{font-size:clamp(10px,.78vw,13px);padding-top:8px}
.competitors article .roman{font-size:clamp(35px,3.7vw,64px);line-height:.86}
.competitors article h3{margin:4px 0 8px;font-size:clamp(20px,1.8vw,32px);line-height:1.2}
.competitors article>small{margin:4px 0 6px}
.classes article p{margin:8px 0;line-height:1.55}
.classes article h3{margin:0}
.classes article .class-symbol{font-size:clamp(35px,3.6vw,61px);line-height:1.05}
.classes article>small{margin:4px 0 7px}
.classes .sprites{min-height:60px;padding-top:3px}
.classes .sprites img{height:clamp(60px,8.5vh,110px)}
.reference-lightbox{width:min(1100px,92vw);max-height:92vh}
.reference-lightbox img{max-width:100%;max-height:66vh;display:block;margin:14px auto;object-fit:contain;border:1px solid #a68b60;box-shadow:0 0 0 5px #0a1224}
.reference-lightbox .source-link{color:#c9dcfc;display:inline-block;padding:8px 0}
.reference-lightbox .lightbox-warning{color:#edd6a9;font-size:13px;line-height:1.7}
.reference-lightbox h2{font-size:clamp(20px,2.5vw,34px);margin-bottom:6px}
@media(max-width:1100px){
 .top{padding:0 10px}
 .top::before,.top::after{display:none}
 .standard>h1{padding-bottom:8px}
 .ref-shot img{height:70px}
 .ref-shot .ref-label{font-size:8px}
 .competitors article p{font-size:12px}
}
@media(max-width:740px){
 body::before{opacity:.03}
 .top{padding:0 6px}
 .brandmark{width:38px;flex-basis:38px;height:39px;font-size:25px}
 #deck{outline:none;box-shadow:inset 0 0 0 2px #0a1325}
 #deck::before{inset:5px}
 .triple article::after,.facts>div::after{inset:4px}
 .ref-shot img{height:140px}
 .ref-portrait img{height:160px}
 .classes article,.competitors article{min-height:unset}
 .footer{padding:0 7px}
 .reference-lightbox img{max-height:52vh}
}
@media(prefers-reduced-motion:reduce){.ref-frame img{transition:none}}


/* V1.4 / Class-card reflow; retain original concept art and in-game sprite GIFs. */
.classes article{
  display:flex;flex-direction:column;min-height:0;
  padding:clamp(16px,1.6vw,29px);
}
.classes article .class-symbol{font-size:clamp(36px,3.35vw,62px);line-height:1}
.classes article h3{margin:4px 0 0;line-height:1.25}
.classes article>small{margin:3px 0 7px}
.classes article p{margin:4px 0 6px;line-height:1.55;flex:0 0 auto}
.classes .class-concept{
  position:relative;flex:1 1 auto;min-height:clamp(86px,12vh,165px);
  margin:6px 0 4px;overflow:hidden;
  border:1px solid #a28b68;
  background:radial-gradient(ellipse at 50% 35%,#30476c,#0a1120 82%);
  box-shadow:inset 0 0 0 3px #111a2c,0 4px 12px #0005;
}
.classes .class-concept img{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:contain;object-position:center;
}
.classes .class-concept figcaption{
  position:absolute;bottom:0;left:0;right:0;
  padding:5px 6px;background:#09101fe8;color:#e5d3ac;
  text-align:center;font-size:clamp(9px,.72vw,12px);line-height:1.3;
}
.classes .featured .sprites{
  display:flex;flex:0 0 auto;justify-content:center;align-items:center;
  gap:clamp(15px,2vw,32px);height:clamp(59px,7vh,88px);
  min-height:0;margin:7px 0 0;padding:4px 12px;
  background:linear-gradient(90deg,#0e183400,#162644b5 17%,#162644b5 83%,#0e183400);
  border-top:1px solid #7797c955;border-bottom:1px solid #7797c955;
}
.classes .featured .sprites img{
  display:block;flex:0 0 auto;width:clamp(48px,6vh,72px);
  height:clamp(48px,6vh,72px);max-width:none;object-fit:contain;
  image-rendering:pixelated;
}
.classes .featured .owned-caption{
  flex:0 0 auto;font-size:10px;line-height:1.35;
  padding-top:4px;color:#d1c7b5;text-align:center;
}
@media(max-width:740px){
  .classes article{padding:22px;min-height:0}
  .classes .class-concept{flex:none;height:clamp(230px,43vh,360px);min-height:0;margin-top:10px}
  .classes .featured .sprites{height:88px;margin-top:10px}
  .classes .featured .sprites img{height:70px;width:70px}
  .classes .featured .owned-caption{padding-top:7px}
}


/* Short presentation windows: recover vertical space instead of clipping the sprite strip. */
@media (min-width:741px) and (max-height:730px){
  .slide.standard:has(> .classes){padding-top:16px}
  .slide.standard:has(> .classes) .lead{margin-bottom:12px}
  .classes article{padding:14px 18px}
  .classes article .class-symbol{font-size:36px}
  .classes article h3{font-size:clamp(24px,1.95vw,32px)}
  .classes article>small{margin:2px 0 4px}
  .classes article p{margin:3px 0 4px}
  .classes .featured .sprites{height:54px;margin-top:5px;padding:2px 8px}
  .classes .featured .sprites img{height:45px;width:45px}
  .classes .featured .owned-caption{font-size:9px;padding-top:2px}
}
@media (min-width:741px) and (max-height:620px){
  .slide.standard:has(> .classes) .classes{min-height:320px}
}


/* V1.4 / Warrior artwork + animation rail share one visual row.
   Keeps all three portraits aligned and avoids squeezing the hero image. */
@media (min-width:741px){
  .classes article.featured{
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(60px,6.5vw,93px);
    grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
    column-gap:12px;
  }
  .classes article.featured>.class-symbol{grid-column:1/-1;grid-row:1}
  .classes article.featured>h3{grid-column:1/-1;grid-row:2}
  .classes article.featured>small{grid-column:1/-1;grid-row:3}
  .classes article.featured>p{grid-column:1/-1;grid-row:4}
  .classes article.featured>.class-concept{
    grid-column:1;grid-row:5;min-height:0;margin:6px 0 4px;
  }
  .classes article.featured>.sprites{
    grid-column:2;grid-row:5;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:clamp(7px,1.5vh,19px);height:auto;min-height:0;
    margin:6px 0 4px;padding:6px 4px;
    background:linear-gradient(180deg,#182743bb,#0a1327e8);
    border:1px solid #7797c955;
  }
  .classes article.featured>.sprites::before{
    content:"ANIM";font:8px Georgia,serif;letter-spacing:.1em;color:#cab895;
  }
  .classes article.featured>.sprites::after{
    content:"IDLE / WALK";font:7px Georgia,serif;color:#abbcd6;
    white-space:nowrap;
  }
  .classes article.featured>.sprites img{
    width:clamp(42px,6vh,72px);height:clamp(42px,6vh,72px);
  }
  .classes article.featured>.owned-caption{grid-column:1/-1;grid-row:6;padding-top:3px}
}