:root{
  --ink:#0b0a14; --cream:#f6ecd6; --gold:#e9c46a; --red:#e2453c; --jade:#5fe0b7;
  --serif:"Shippori Mincho B1","Yu Mincho","Hiragino Mincho ProN",serif;
  --sans:"Zen Kaku Gothic New","Yu Gothic","Hiragino Sans",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:radial-gradient(ellipse at 50% 30%,#1b1730 0%,#07060d 70%);display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);color:var(--cream);-webkit-user-select:none;user-select:none;touch-action:auto}
#stage{position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(233,196,106,.25),0 2em 5em rgba(0,0,0,.7)}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#ui{position:absolute;inset:0;pointer-events:none}
.hide{display:none!important}

/* HUD */
#hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:.6em;padding:.55em .8em;
  font-size:.72em;letter-spacing:.12em;background:linear-gradient(rgba(5,4,12,.7),transparent)}
#hud .era{font-family:var(--serif);font-weight:800;color:var(--gold);font-size:1.15em}
#hud .yrs{opacity:.7}
#hud .sp{flex:1}
#hud .score{font-variant-numeric:tabular-nums;font-weight:700}
#lives{display:flex;gap:.3em}
#lives i{width:.75em;height:1em;border-radius:45% 45% 35% 35%;background:linear-gradient(#ffe7a8,#ff7a3c);box-shadow:0 0 .5em #ff9a4c}
#lives i.off{background:#3a3550;box-shadow:none}
#prog{position:absolute;top:2.35em;left:.8em;right:.8em;display:flex;gap:.25em}
#prog i{flex:1;height:.16em;background:rgba(246,236,214,.18);border-radius:1em}
#prog i.on{background:var(--gold);box-shadow:0 0 .5em var(--gold)}

/* 史実カード／クイズ */
#card{position:absolute;top:3.1em;left:.8em;right:.8em;padding:.7em .9em .8em;border-radius:.3em;
  background:rgba(10,8,22,.74);border:1px solid rgba(233,196,106,.55);backdrop-filter:blur(4px);
  animation:drop .28s ease-out}
#card::before{content:"";position:absolute;inset:.22em;border:1px solid rgba(233,196,106,.18);border-radius:.2em;pointer-events:none}
#card .k{font-size:.62em;letter-spacing:.22em;color:var(--gold);margin-bottom:.3em}
#card .h{font-family:var(--serif);font-weight:800;font-size:1.02em;line-height:1.45}
#card .b{font-size:.76em;line-height:1.6;margin-top:.3em;opacity:.9}
#card .b:empty{display:none}
#card.fact .h{color:var(--gold);font-size:1.5em;line-height:1.1}
#card.fact .b{font-size:.86em;opacity:1}
#card.ok{border-color:var(--jade)} #card.ok .k{color:var(--jade)}
#card.ng{border-color:var(--red)} #card.ng .k{color:#ff8a80}
@keyframes drop{from{transform:translateY(-.8em);opacity:0}to{transform:none;opacity:1}}

/* 全画面パネル */
#screen{position:absolute;inset:0;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2em 1.6em;text-align:center;background:linear-gradient(rgba(8,6,18,.5),rgba(8,6,18,.82))}
#screen.scroll{justify-content:flex-start;overflow-y:auto;touch-action:pan-y;background:rgba(8,6,18,.9)}
.kicker{font-size:.62em;letter-spacing:.42em;color:var(--gold);margin-bottom:1.2em}
h1{font-family:var(--serif);font-weight:800;font-size:3.4em;line-height:1.05;letter-spacing:.06em;
  text-shadow:0 0 .5em rgba(255,150,70,.55)}
h1 span{display:block;font-size:.5em;letter-spacing:.3em;margin-top:.35em;color:var(--gold);text-shadow:none}
h2{font-family:var(--serif);font-weight:800;font-size:2em;letter-spacing:.08em;line-height:1.25}
.sub{font-size:.8em;letter-spacing:.2em;margin-top:1.4em;opacity:.85}
.seal{position:absolute;top:1.6em;right:1.4em;width:2.3em;padding:.45em 0;background:var(--red);color:var(--cream);
  font-family:var(--serif);font-weight:800;font-size:.95em;line-height:1.15;border-radius:.15em;transform:rotate(4deg);
  box-shadow:0 0 0 1px rgba(246,236,214,.5) inset}
.years{font-family:var(--serif);color:var(--gold);font-size:1.05em;letter-spacing:.2em;margin:.6em 0 1.2em}
.lead{font-size:.86em;line-height:1.9;max-width:22em;opacity:.92}
.rule{width:3em;height:1px;background:var(--gold);margin:1.4em auto}
.btns{display:flex;flex-direction:column;gap:.7em;margin-top:2em;width:14em}
button{font:inherit;font-family:var(--serif);font-weight:800;font-size:.95em;letter-spacing:.25em;color:var(--ink);cursor:pointer;
  background:linear-gradient(#f7dc92,#e0a94a);border:0;border-radius:.2em;padding:.8em 1em;transition:transform .12s,filter .12s}
button:hover{filter:brightness(1.12);transform:translateY(-1px)}
button.ghost{background:transparent;color:var(--cream);box-shadow:0 0 0 1px rgba(246,236,214,.45) inset}
button.mini{font-size:.62em;padding:.45em .8em;letter-spacing:.15em}
.help{font-size:.62em;line-height:2;letter-spacing:.08em;opacity:.65;margin-top:2em}
.stat{display:flex;gap:2em;margin-top:1.2em;font-size:.72em;letter-spacing:.15em}
.stat b{display:block;font-family:var(--serif);font-size:1.9em;color:var(--gold);letter-spacing:.05em}

/* 年表 */
.tl{width:100%;text-align:left;margin-top:1.2em}
.tl h3{display:flex;align-items:baseline;gap:.6em;font-family:var(--serif);font-weight:800;font-size:1.05em;color:var(--gold);
  border-bottom:1px solid rgba(233,196,106,.35);padding:1.1em 0 .4em}
.tl h3 small{font-family:var(--sans);font-weight:400;font-size:.62em;letter-spacing:.12em;color:var(--cream);opacity:.7;flex:1}
.tl li{list-style:none;display:flex;gap:.8em;padding:.55em 0;font-size:.76em;line-height:1.6;border-bottom:1px dashed rgba(246,236,214,.12)}
.tl li b{flex:0 0 6.6em;font-family:var(--serif);color:var(--gold)}
.tl li.lock{opacity:.35}

#toolbar{position:absolute;bottom:.45em;right:.5em;display:flex;gap:.5em;z-index:3}
#toolbar button{font-family:var(--sans);font-size:.68em;letter-spacing:0;padding:.55em .7em;background:#171225;color:var(--cream);border:1px solid #e9c46a80}
#toolbar button:disabled{opacity:.4;cursor:default}
#screen{padding-bottom:4em}
#screen.scroll{overscroll-behavior:contain;padding-top:1.5em}
.ranking{width:100%;font-size:.72em;text-align:left;margin-bottom:2em}
.ranking h3{color:var(--gold);margin:.5em 0}
.ranking .itc-ranking__status{line-height:1.7;margin:.6em 0}
button:focus-visible{outline:3px solid var(--jade);outline-offset:3px}
.help a{color:var(--gold)}