/* ryuumaru.com - generated by build.js from site.json. Do not hand-edit.
   Palette lives in site.json -> site.theme. Verified with TOOLS\contrastcheck. */
:root{
  --ink:#0a0f1e;
  --panel:#121a30;
  --panel2:#18213c;
  --line:#26315a;
  --text:#eef1f8;
  --dim:#aab5d2;
  --gold:#f4c76a;
  --star:#93d5ff;
  --shell:min(1120px,100% - 2.5rem);
  --nx:0px; --ny:0px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);
  font:400 1.0625rem/1.7 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.shell{width:var(--shell);margin-inline:auto}
a{color:var(--star);text-underline-offset:.2em}
a:hover{color:var(--gold)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
h1,h2,h3{line-height:1.2;margin:0 0 .5rem}
h1{font-size:clamp(2.1rem,6vw,3.4rem);letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,3.4vw,1.9rem);letter-spacing:-.01em}
h3{font-size:1.15rem}
p{margin:0 0 1rem}
.lede{font-size:1.15rem;color:var(--dim);max-width:60ch}
.prose{color:var(--dim);max-width:68ch}
.prose p{margin-bottom:1.1rem}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--gold);color:#1a1204;
  padding:.6rem 1rem;border-radius:6px;font-weight:700}

header{border-bottom:1px solid var(--line);background:var(--ink);position:sticky;top:0;z-index:10}
.bar{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;padding:.9rem 0}
.brand{font-weight:800;letter-spacing:.02em;color:var(--text);text-decoration:none;
  font-size:1.05rem;display:flex;align-items:center;gap:.6rem}
.brand img{display:block;width:40px;height:40px}
.brand .bt span{color:var(--gold)}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;margin:0;padding:0}
nav a{color:var(--dim);text-decoration:none;font-size:.95rem;padding:.25rem 0}
nav a:hover{color:var(--text)}

.hero{padding:clamp(3rem,9vw,6rem) 0 clamp(2rem,5vw,3.5rem)}
.circle{color:var(--gold);font-style:italic;font-size:1.05rem;margin-bottom:1.75rem}

.doors{list-style:none;padding:0;margin:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.door{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.35rem 1.4rem}
.door h3{margin-bottom:.35rem}
.door h3 a{color:var(--text);text-decoration:none}
.door h3 a:hover{color:var(--gold)}
.door p{color:var(--dim);font-size:.97rem;margin:0}
.door .kicker{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.5rem}

section{padding:clamp(2.5rem,6vw,4rem) 0;border-top:1px solid var(--line)}
.section-lede{color:var(--dim);max-width:62ch;margin-bottom:2rem}

.now{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:1.5rem}
.now dl{margin:0;display:grid;gap:1rem}
.now dt{font-weight:700;color:var(--gold);font-size:.95rem}
.now dd{margin:.15rem 0 0;color:var(--dim)}

.cast{list-style:none;padding:0;margin:0;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.cast li{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem}
.cast b{display:block;color:var(--text)}
.cast span{color:var(--dim);font-size:.92rem}

.links{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.55rem}
.links a{display:inline-block;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:.42rem 1rem;font-size:.92rem;text-decoration:none;color:var(--text)}
.links a:hover{border-color:var(--gold);color:var(--gold)}

.imgblock{padding:clamp(2rem,5vw,3rem) 0}
.imgblock img{max-width:100%;height:auto;display:block;border-radius:14px}

footer{border-top:1px solid var(--line);padding:2.5rem 0 3.5rem;color:var(--dim);font-size:.95rem}
footer .line{color:var(--gold);font-style:italic;margin-bottom:1rem}
footer .flinks{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem}
footer .flinks a{color:var(--dim);text-decoration:none;font-size:.9rem}
footer .flinks a:hover{color:var(--gold)}
footer .motto{color:var(--text);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  font-size:.92rem;margin:1.75rem 0 .75rem}
.small{font-size:.88rem;color:var(--dim)}


/* --- characters --- */
.charcards{list-style:none;padding:0;margin:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.charcards a{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:1.1rem;text-decoration:none;color:var(--text);height:100%}
.charcards a:hover{border-color:var(--gold)}
.charcards img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;margin-bottom:.7rem;display:block}
.charcards b{display:block;margin-bottom:.2rem}
.charcards span{color:var(--dim);font-size:.92rem;display:block}

/* The shop shelf. Same skeleton as .charcards on purpose: a product and a
   character are the same object on this site, a picture with a name under it. */
.shelf{list-style:none;padding:0;margin:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.shelf a{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:.9rem;text-decoration:none;color:var(--text);height:100%}
.shelf a:hover{border-color:var(--gold)}
.shelf img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;
  margin-bottom:.7rem;display:block;background:var(--panel2)}
.shelf b{display:block;margin-bottom:.15rem}
.shelf .price{display:block;color:var(--gold);font-weight:700;margin-bottom:.35rem}
.shelf span{color:var(--dim);font-size:.92rem;display:block}
.shelf .sizes{font-size:.8rem;letter-spacing:.04em;margin-top:.45rem;color:var(--dim)}
.shelfnote{color:var(--dim);font-size:.95rem;max-width:60ch;margin-top:1.4rem}

/* Size tables. Scrolls sideways on a phone rather than crushing five columns. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px}
table.sizes{border-collapse:collapse;width:100%;min-width:460px;font-size:.95rem}
table.sizes th,table.sizes td{padding:.6rem .9rem;text-align:left;border-bottom:1px solid var(--line)}
table.sizes thead th{color:var(--gold);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--panel2);white-space:nowrap}
table.sizes tbody th{color:var(--text);font-weight:700}
table.sizes td{color:var(--dim)}
table.sizes tbody tr:last-child th,table.sizes tbody tr:last-child td{border-bottom:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Orion's Super Random Facts. Native <details>, no script. */
.daygrid{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-top:1.2rem}
.day{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.day[open]{grid-column:1/-1;border-color:var(--gold)}
.day summary{cursor:pointer;padding:.75rem .9rem;display:flex;align-items:baseline;gap:.6rem;
  list-style:none;color:var(--dim)}
.day summary::-webkit-details-marker{display:none}
.day summary:hover{color:var(--text)}
.day .dnum{font-weight:800;font-size:1.25rem;color:var(--gold);min-width:1.6em}
.day .dlab{font-size:.85rem;letter-spacing:.04em;text-transform:uppercase}
.day[open] summary{border-bottom:1px solid var(--line);background:var(--panel2)}
.day .dbody{padding:1rem 1.1rem;color:var(--dim);max-width:68ch}
.day .dbody p{margin:0 0 .8rem}
.day .dbody p:last-child{margin-bottom:0}
.day .hol b{color:var(--star)}
.day .fact b{color:var(--text)}
.day .where{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;opacity:.75}
.day .src{font-size:.82rem;opacity:.7}
.noart{display:grid;place-items:center;aspect-ratio:1;background:var(--panel2);
  border:1px dashed var(--line);border-radius:10px;margin-bottom:.7rem;
  font-size:2rem;font-weight:800;color:var(--line)}
.noart.big{font-size:5rem;margin:0}

.crumb{margin:0 0 1.5rem}
.crumb a{color:var(--dim);text-decoration:none;font-size:.92rem}
.crumb a:hover{color:var(--gold)}
.charhead{padding:clamp(2rem,6vw,3.5rem) 0}
.charwrap{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){ .charwrap{grid-template-columns:300px minmax(0,1fr);gap:2.5rem} }
.charart img{width:100%;border-radius:16px;display:block}
.charbody h1{margin-bottom:1rem}
.charbody .kicker{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .4rem}
.stats{display:flex;flex-wrap:wrap;gap:.4rem .6rem;margin:0 0 1.5rem;padding:0}
.stats div{background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:.3rem .85rem;display:flex;gap:.4rem;align-items:baseline}
.stats dt{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:0}
.stats dd{margin:0;font-size:.92rem}
.charquote{margin:1.5rem 0 0;padding:1.1rem 1.3rem;background:var(--panel2);
  border-left:3px solid var(--gold);border-radius:0 12px 12px 0}
.charquote p{margin:0 0 .5rem;font-size:1.05rem;font-style:italic}
.charquote cite{color:var(--dim);font-size:.9rem;font-style:normal}

/* --- embedded player --- */
.player{position:relative;width:100%;min-width:400px;aspect-ratio:16/9;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#000}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;min-width:400px;min-height:300px}
@media (max-width:460px){ .player{min-width:0} .player iframe{min-width:0} }

/* --- feature --- */
.feature .kicker{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 .5rem}
.points{list-style:none;padding:0;margin:1.75rem 0 0;display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.points li{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.9rem 1.05rem}
.points b{display:block;color:var(--text);margin-bottom:.15rem}
.points span{color:var(--dim);font-size:.93rem}
.cta{margin:1.75rem 0 0}
.cta a{display:inline-block;background:var(--gold);color:#1a1204;font-weight:700;
  text-decoration:none;border-radius:10px;padding:.7rem 1.4rem}
.cta a:hover{filter:brightness(1.08);color:#1a1204}

/* --- NUDGE ---------------------------------------------------------------
   Ryuu's "move it a few inches" control. Deliberately a translate, so it
   shifts the painted result and never the document flow: nothing else on the
   page moves because of it, and it cannot cause overlap-driven reflow.
   Below 720px it is switched off entirely - a nudge that looked right on a
   desktop must never wreck a phone. Clamped to 120px each way in build.js. */
.nudged{transform:translate(var(--nx),var(--ny))}
@media (max-width:720px){ .nudged{transform:none} }

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}