:root{
  --sumi:#3B2E36; --kinari:#F3E7D3; --night:#0B0A14; --warm:#FFD36E; --pink:#FF7FA8;
  --font:"Zen Maru Gothic",system-ui,sans-serif; --font-sign:"DotGothic16",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:var(--night);overflow:hidden}
body{font-family:var(--font);color:var(--kinari);-webkit-user-select:none;user-select:none;cursor:default}
body.idle{cursor:none}
#app{position:fixed;inset:0}
#stage,#overlay{position:absolute;inset:0;width:100%;height:100%;display:block}
#overlay{pointer-events:none;image-rendering:pixelated}

/* the frame sits exactly on the picture, so text lands on the sky, not on the letterbox */
.frame{position:absolute;pointer-events:none;container-type:size}
/* ── title card ─────────────────────────────────────────── */
.title{position:absolute;left:50%;top:15%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;
  opacity:0;transition:opacity 2.2s ease;width:90%}
.title.on{opacity:1}
.t-jp{font-family:var(--font-sign);font-size:clamp(30px,7.2cqw,110px);letter-spacing:.18em;color:#FFF3DA;
  text-shadow:0 0 18px rgba(255,190,110,.55),0 0 2px rgba(0,0,0,.6),0 3px 0 rgba(40,20,40,.55)}
.t-en{font-family:var(--font-sign);font-size:clamp(12px,1.9cqw,28px);letter-spacing:.62em;margin-top:.35em;color:#FFE3B0;
  text-shadow:0 0 10px rgba(255,170,90,.5),0 2px 0 rgba(30,15,35,.6)}
.t-sub{font-family:var(--font-sign);font-size:clamp(10px,1.15cqw,17px);letter-spacing:.3em;margin-top:1.4em;color:#EAD7C0;opacity:.8;
  text-shadow:0 1px 0 rgba(20,10,25,.8)}

/* ── showcase captions: small, lower left, rare ─────────── */
.caption{position:absolute;left:3%;bottom:4.5%;pointer-events:none;opacity:0;transform:translateY(6px);
  transition:opacity 1.4s ease,transform 1.4s ease;display:flex;flex-direction:column;gap:.3em}
.caption.on{opacity:1;transform:none}
.c-jp{font-family:var(--font-sign);font-size:clamp(13px,1.6cqw,24px);letter-spacing:.14em;color:#FFF1D8;
  text-shadow:0 0 12px rgba(255,180,100,.45),0 2px 0 rgba(20,10,25,.75)}
.c-en{font-family:var(--font-sign);font-size:clamp(9px,1cqw,15px);letter-spacing:.22em;color:#F0DCC4;opacity:.85;
  text-shadow:0 1px 0 rgba(20,10,25,.85)}

/* ── the dock: tiny, bottom right, hides itself ─────────── */
.dock{position:absolute;right:14px;bottom:12px;display:flex;gap:6px;opacity:0;transition:opacity .6s ease;pointer-events:none}
.dock.on{opacity:1;pointer-events:auto}
.btn{font-family:var(--font);font-size:15px;width:34px;height:34px;border-radius:10px;border:1.5px solid rgba(255,236,210,.28);
  background:rgba(20,14,28,.55);color:#FBEBD2;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .15s ease,border-color .2s ease}
.btn:hover{background:rgba(60,40,60,.7);border-color:rgba(255,220,170,.55);transform:translateY(-1px)}
.btn.off{opacity:.45}
@media (prefers-reduced-motion:reduce){.btn,.dock,.caption,.title{transition:none}}

/* ── boot ───────────────────────────────────────────────── */
.boot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--night);transition:opacity 1.2s ease;pointer-events:none}
.boot.gone{opacity:0}
.b-dot{width:10px;height:10px;background:#FFB35C;box-shadow:0 0 14px #FF9A3C;animation:b 1.1s steps(2) infinite}
.b-txt{font-family:var(--font-sign);font-size:14px;letter-spacing:.4em;color:#E8D4BC;opacity:.7}
@keyframes b{50%{opacity:.25}}
.err{position:absolute;left:12px;right:12px;bottom:12px;padding:10px 12px;border-radius:8px;background:rgba(80,10,20,.85);
  font:12px/1.4 monospace;color:#fff;white-space:pre-wrap;max-height:40vh;overflow:auto}