:root{
  --bg:#0b0d14; --panel:#141826; --red:#ff3b3b; --gold:#ffcf4d;
  --ink:#f2f3f7; --dim:#9aa0b4; --line:#262c40;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  background-image:
    radial-gradient(1200px 500px at 50% -10%, rgba(255,59,59,.10), transparent 60%),
    radial-gradient(900px 420px at 85% 110%, rgba(80,60,180,.10), transparent 60%);
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
}
a{color:var(--gold); text-decoration:none;}
button{font-family:inherit; cursor:pointer;}

#topbar{
  width:100%; max-width:1180px; display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
}
.logo{font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:3px; color:var(--ink);}
.logo-kanji{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  background:var(--red); color:#fff; border-radius:8px; font-size:22px; margin-right:8px;
  box-shadow:0 0 14px rgba(255,59,59,.6);}
.logo-sub{font-size:12px; letter-spacing:4px; color:var(--dim); margin-left:10px;}
#topbar nav a{margin-left:18px; color:var(--dim); font-weight:600; font-size:14px; letter-spacing:1px;}
#topbar nav a.active, #topbar nav a:hover{color:var(--gold);}

.ad-slot{width:100%; max-width:1000px; margin:6px auto; min-height:90px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.02); border:1px dashed var(--line); border-radius:10px; overflow:hidden;}
/* While no ad is serving (review pending, adblock, or still loading), collapse the
   slot instead of showing an empty box. When AdSense fills, it injects an
   iframe and the slot appears on its own. */
.ad-slot:not(:has(iframe)){display:none;}
/* short viewports (landscape phones): compact the title so nothing collides with the footer line */
@media (max-height:560px){
  #screen-title .title-kanji{margin-top:4vh; font-size:48px;}
  #screen-title h1{font-size:54px;}
  #screen-title .tagline{display:none;}
  #screen-title .title-foot{display:none;}
}

#stage-wrap{width:100%; max-width:1000px; padding:0 10px;}
#stage{position:relative; width:100%; aspect-ratio:16/9; background:#05060a; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,59,59,.12), 0 0 42px rgba(255,59,59,.08);}
#game{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none;}

.hidden{display:none !important;}

/* ============ φ (golden ratio) design system ============
   Little Ninja composes every screen on the golden ratio.
   --phi = 1.618 · spacing follows the Fibonacci scale (5/8/13/21/34).
   HUD splits 38.2 / 38.2 / 23.6 · title sits on the 38.2% optical line ·
   parallax depths run at φ^-4 / φ^-3 / φ^-2 (0.146 / 0.236 / 0.382). */
:root{
  --phi:1.6180339887;
  --sp1:5px; --sp2:8px; --sp3:13px; --sp4:21px; --sp5:34px;
}

/* ---------- HUD ---------- */
#hud{position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:flex-start;
  padding:10px 12px; pointer-events:none; z-index:5;
  background:linear-gradient(180deg, rgba(0,0,0,.55), transparent);}
#hud button{pointer-events:auto;}
.hud-left{flex:0 0 38.2%; display:flex; align-items:center; gap:10px;}
.hud-mid{flex:1 1 38.2%; text-align:center;}
.hud-right{flex:0 0 23.6%; display:flex; align-items:center; justify-content:flex-end; gap:10px;}
#hpbar{position:relative; width:100%; max-width:236px; height:22px; background:rgba(0,0,0,.6); border:1px solid var(--line); border-radius:11px; overflow:hidden;}
#hpfill{height:100%; width:100%; background:linear-gradient(90deg,#ff3b3b,#ff7a3b); transition:width .2s;}
#hptext{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; text-shadow:0 1px 2px #000;}
#inv{font-size:14px; font-weight:700; display:flex; gap:8px;}
#levelname{font-family:'Bebas Neue'; letter-spacing:3px; font-size:18px; color:var(--gold); text-shadow:0 2px 4px #000;}
#collect{font-size:13px; color:var(--dim); font-weight:600;}
#score{font-family:'Bebas Neue'; font-size:26px; letter-spacing:2px; color:#fff; text-shadow:0 0 10px rgba(255,207,77,.5);}
#hud button{background:rgba(0,0,0,.55); border:1px solid var(--line); color:#fff; border-radius:8px; font-size:16px; padding:5px 9px;}
#hud button:hover{border-color:var(--gold);}

/* ---------- Screens ---------- */
.screen{position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(5,6,10,.82); backdrop-filter:blur(3px); text-align:center; padding:20px;}
.screen h1{font-family:'Bebas Neue'; font-size:84px; letter-spacing:10px; color:#fff;
  text-shadow:0 0 24px rgba(255,59,59,.75), 0 4px 0 #7a1010;}
/* title composition: the masthead rests on the 38.2% optical line.
   Type is sized so the stack (kanji→diff row) always clears .title-foot. */
#screen-title{justify-content:flex-start;}
#screen-title .title-kanji{margin-top:11vh; font-size:64px;}
#screen-title h1{font-size:72px;}
#dialog-body.type{min-height:120px;}
#dialog-body.type::after{content:'▌'; color:var(--gold); animation:blink 0.8s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.dlg-speaker{font-family:'Bebas Neue'; font-size:22px; letter-spacing:4px; color:var(--red); margin-bottom:var(--sp2);}
.screen h2{font-family:'Bebas Neue'; font-size:52px; letter-spacing:8px; color:var(--gold); text-shadow:0 0 18px rgba(255,207,77,.4);}
.title-kanji{font-size:74px; color:var(--red); text-shadow:0 0 30px rgba(255,59,59,.9); animation:float 3s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.subtitle{letter-spacing:6px; color:var(--dim); margin:6px 0 10px; font-size:15px;}
.tagline{color:var(--dim); margin-bottom:14px; line-height:1.6;}
.menu-col{display:flex; flex-direction:column; gap:var(--sp3); align-items:center;}
.menu-row{display:flex; gap:var(--sp3); margin-top:18px;}
.btn{background:#1b2133; color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:10px 22px;
  font-weight:700; letter-spacing:2px; font-size:14px; transition:.15s;}
.btn:hover{border-color:var(--red); box-shadow:0 0 12px rgba(255,59,59,.35); transform:translateY(-1px);}
.btn-big{background:linear-gradient(180deg,#ff5252,#c81e1e); color:#fff; border:none; border-radius:12px; padding:14px 44px;
  font-weight:800; letter-spacing:3px; font-size:18px; box-shadow:0 6px 24px rgba(255,59,59,.45); transition:.15s;}
.btn-big:hover{transform:translateY(-2px) scale(1.03); box-shadow:0 8px 30px rgba(255,59,59,.6);}
.diff-row{display:flex; gap:8px; align-items:center; margin-top:6px; color:var(--dim); font-size:13px; letter-spacing:2px;}
.diff-row button{background:#1b2133; border:1px solid var(--line); color:var(--dim); border-radius:8px; padding:6px 14px; font-weight:700; font-size:12px; letter-spacing:1px;}
.diff-row button.sel{background:var(--red); color:#fff; border-color:var(--red);}
.title-foot{position:absolute; bottom:14px; color:#555b70; font-size:12px; letter-spacing:1px;}
.controls-hint{margin-top:18px; color:var(--dim); font-size:12.5px; max-width:640px; line-height:1.7;}

/* map */
#map-nodes{display:flex; gap:var(--sp3); align-items:center; margin:20px 0; flex-wrap:wrap; justify-content:center; max-width:760px;}
.map-node{width:104px; padding:10px 6px; background:#161b2c; border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:.15s;}
.map-node .n-kanji{font-size:26px;}
.map-node .n-name{font-size:11px; font-weight:800; letter-spacing:1px; margin-top:4px;}
.map-node .n-sub{font-size:10px; color:var(--dim);}
.map-node.sel{border-color:var(--gold); box-shadow:0 0 14px rgba(255,207,77,.4); transform:scale(1.06);}
.map-node.locked{opacity:.35; cursor:not-allowed; filter:grayscale(1);}
.map-node.done .n-kanji{color:var(--gold);}
.map-arrow{color:#3a4158; font-size:20px;}
#map-info{min-height:64px; max-width:640px; color:var(--dim); font-size:14px; line-height:1.6;}
#map-info b{color:var(--gold);}

/* dialog */
#dialog-box{width:min(618px, 92%); background:#10141f; border:1px solid var(--line); border-radius:16px; padding:var(--sp4) var(--sp5);
  box-shadow:0 20px 60px rgba(0,0,0,.6);}
#dialog-body{color:var(--dim); line-height:1.8; margin:12px 0; font-size:15px; white-space:pre-line;}
#dialog-stats{display:flex; gap:22px; justify-content:center; margin:10px 0 18px; font-weight:800; color:var(--gold); font-size:15px;}

/* splash + toast */
#splash{position:absolute; inset:0; z-index:9; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(5,6,10,.55); pointer-events:none;}
#splash-ch{font-size:15px; letter-spacing:6px; color:var(--red); font-weight:800;}
#splash-name{font-family:'Bebas Neue'; font-size:64px; letter-spacing:8px; color:#fff; text-shadow:0 0 20px rgba(255,59,59,.6);}
#toast{position:absolute; bottom:88px; left:50%; transform:translateX(-50%); z-index:8; background:rgba(10,12,20,.9);
  border:1px solid var(--gold); color:var(--gold); border-radius:10px; padding:8px 18px; font-weight:700; font-size:14px; letter-spacing:1px;}

/* touch */
#touch{position:absolute; inset:auto 0 0 0; z-index:6; display:flex; justify-content:space-between; padding:0 14px 16px; pointer-events:none;}
#touch button{pointer-events:auto; width:64px; height:64px; border-radius:50%; border:2px solid rgba(255,255,255,.25);
  background:rgba(10,12,20,.5); color:#fff; font-size:22px; backdrop-filter:blur(2px);}
#touch button:active{background:rgba(255,59,59,.5);}
#touch .t-left{display:flex; gap:12px;}
#touch .t-right{display:flex; gap:10px; align-items:flex-end;}
#touch .t-big{width:78px; height:78px;}
#touch .t-small{width:54px; height:54px; font-size:18px;}

footer{width:100%; max-width:1180px; text-align:center; padding:22px 18px 34px; color:var(--dim); font-size:13px;}
footer .foot-sep{margin:0 8px; color:#3a4158;}
.foot-note{margin-top:8px; font-size:12px; color:#555b70;}

/* content pages */
.page{width:100%; max-width:860px; padding:26px 20px 40px;}
.page h1{font-family:'Bebas Neue'; font-size:52px; letter-spacing:6px; color:var(--gold); margin-bottom:14px;}
.page h2{font-family:'Bebas Neue'; letter-spacing:4px; color:#fff; margin:26px 0 10px; font-size:28px;}
.page p, .page li{color:#c6cbdd; line-height:1.8; font-size:15.5px;}
.page ul{margin:8px 0 8px 22px;}
.page table{width:100%; border-collapse:collapse; margin:12px 0;}
.page th,.page td{border:1px solid var(--line); padding:9px 12px; text-align:left; font-size:14px;}
.page th{background:#161b2c; color:var(--gold); letter-spacing:1px;}
.page .kbd{display:inline-block; background:#1b2133; border:1px solid var(--line); border-bottom-width:3px; border-radius:6px;
  padding:2px 9px; font-family:monospace; font-weight:700; color:#fff; font-size:13px;}

@media (max-width:700px){
  .screen h1{font-size:52px; letter-spacing:6px;}
  #splash-name{font-size:40px;}
  .screen h2{font-size:36px;}
  #hpbar{width:130px;}
  .logo-sub{display:none;}
  #topbar nav a{margin-left:10px; font-size:12px;}
  #dialog-box{padding:20px;}
}