/* base reset */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}
/* Layout: a single committed ukiyo-e world. A painted map board is the hub; each destination opens as a
   guide-led "scene" (portrait + speech + fact card), then a challenge that earns a red hanko stamp. */
:root{
  --paper:#FBF3EE; --paper2:#F3E4DC; --ink:#1F2B4D; --ink-soft:#4A5577;
  --beni:#D23F4E; --sakura:#F6B8C4; --matcha:#7E9F5E; --gold:#E0A43A; --sea:#CFE0EE; --sea-deep:#9DBCD8;
  --card:#FFFFFF; --line:#E4D2C8;
  --f-display:"Dela Gothic One","Zen Maru Gothic",system-ui,sans-serif;
  --f-body:"Zen Maru Gothic",system-ui,sans-serif;
  --f-mincho:"Shippori Mincho","Hiragino Mincho ProN",serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--paper);color:var(--ink)}
body{font-family:var(--f-body);font-size:16px;line-height:1.6;
  background-image:radial-gradient(circle at 12% 8%,rgba(246,184,196,.35),transparent 40%),radial-gradient(circle at 90% 95%,rgba(157,188,216,.3),transparent 45%);
  background-attachment:fixed;min-height:100%}
.wrap{max-width:1040px;margin:0 auto;padding-block:16px 48px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button{font-family:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:6px 14px}
.brand{display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;padding:0;text-align:left}
.brand .seal{width:46px;height:46px;border-radius:10px;background:var(--beni);color:#fff;display:grid;place-items:center;
  font-family:var(--f-mincho);font-weight:800;font-size:26px;transform:rotate(-4deg);box-shadow:0 3px 0 #9e2a37}
.brand h1{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,4vw,30px);margin:0;line-height:1;letter-spacing:.01em}
.brand small{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px}
.hud{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:2px solid var(--ink);border-radius:999px;
  padding:4px 12px;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.chip b{font-family:var(--f-mincho)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--ink);background:var(--card);
  border-radius:14px;padding:10px 18px;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--ink)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.btn.primary{background:var(--beni);color:#fff}
.btn.ghost{box-shadow:none;border-color:var(--line)}

/* map */
.board{position:relative;width:100%;aspect-ratio:1000/620;max-width:100%;border-radius:22px;overflow:hidden;border:3px solid var(--ink);
  box-shadow:0 6px 0 var(--ink);background:var(--sea)}
.board svg.bg{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:0;cursor:pointer;padding:0}
.pin .dot{width:clamp(34px,6vw,58px);height:clamp(34px,6vw,58px);border-radius:50%;background:var(--card);border:3px solid var(--ink);
  display:grid;place-items:center;font-family:var(--f-mincho);font-weight:800;font-size:clamp(16px,2.8vw,26px);box-shadow:0 3px 0 var(--ink);
  transition:transform .15s;position:relative}
.pin:hover .dot{transform:translateY(-3px) rotate(-4deg)}
.pin .lbl{background:var(--ink);color:#fff;border-radius:8px;padding:2px 8px;font-size:13px;font-weight:700;white-space:nowrap}
.pin.done .dot::after{content:"印";position:absolute;right:-10px;top:-10px;width:24px;height:24px;border-radius:6px;background:var(--beni);
  color:#fff;font-size:13px;display:grid;place-items:center;transform:rotate(10deg)}
@media (max-width:640px){.pin .lbl{display:none}}

.hub{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.welcome{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:end}
.welcome .portrait{width:120px}
.bubble{position:relative;background:var(--card);border:2px solid var(--ink);border-radius:18px;padding:14px 18px;min-width:0}
.bubble::before{content:"";position:absolute;left:-12px;bottom:22px;border:10px solid transparent;border-right-color:var(--ink);border-left:0}
.bubble::after{content:"";position:absolute;left:-9px;bottom:23px;border:9px solid transparent;border-right-color:var(--card);border-left:0}
.bubble .who{font-family:var(--f-display);font-size:14px;color:var(--beni);letter-spacing:.04em}
.bubble p{margin:.2em 0 0}
.dest{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.dcard{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;text-align:left;background:var(--card);
  border:2px solid var(--ink);border-radius:16px;padding:10px 12px;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.dcard:hover{transform:translateY(-1px)}
.dcard .mini{width:64px;height:64px;border-radius:12px;background:var(--paper2);overflow:hidden;display:grid;place-items:end center}
.dcard .mini svg{width:72px;height:auto;margin-bottom:-14px}
.dcard h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:17px;line-height:1.2}
.dcard .jp{font-family:var(--f-mincho);color:var(--ink-soft);font-size:13px}
.dcard .st{font-size:12px;font-weight:700;margin-top:2px}
.st.ok{color:var(--beni)} .st.no{color:var(--ink-soft)}
.section-h{font-family:var(--f-display);font-weight:400;font-size:20px;margin:6px 0 0;display:flex;align-items:baseline;gap:10px}
.section-h span{font-family:var(--f-mincho);font-size:15px;color:var(--ink-soft)}

/* scene */
.scene{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:start}
.stage{position:sticky;top:12px;background:linear-gradient(var(--sky,#FDE3E8),var(--paper2));border:3px solid var(--ink);border-radius:22px;
  padding:16px 10px 0;overflow:hidden;box-shadow:0 5px 0 var(--ink)}
.stage .place{font-family:var(--f-mincho);font-weight:800;font-size:44px;line-height:1;position:absolute;right:12px;top:10px;
  writing-mode:vertical-rl;opacity:.16}
.stage .portrait{display:block;margin:0 auto;width:100%;max-width:230px;animation:bob 3.2s ease-in-out infinite}
.stage .name{text-align:center;background:var(--ink);color:#fff;margin:0 -10px;padding:6px;font-family:var(--f-display);font-size:16px}
.stage .name small{display:block;font-family:var(--f-body);font-size:12px;opacity:.8}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.stage .portrait{animation:none}*{transition:none!important}}
.panel{display:grid;gap:16px;min-width:0}
.crumbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--ink-soft)}
.steps{display:flex;gap:6px}
.steps i{width:22px;height:6px;border-radius:3px;background:var(--line)}
.steps i.on{background:var(--beni)}
.speech{background:var(--card);border:2px solid var(--ink);border-radius:18px;padding:16px 20px;font-size:17px;position:relative}
.speech .who{font-family:var(--f-display);color:var(--beni);font-size:14px}
.fact{background:var(--card);border:2px solid var(--ink);border-radius:18px;overflow:hidden;display:grid;grid-template-columns:110px minmax(0,1fr)}
.fact .kanji{background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--f-mincho);font-weight:800;font-size:40px;
  writing-mode:vertical-rl;padding:14px 0;letter-spacing:.1em}
.fact .body{padding:14px 18px}
.fact h3{margin:0 0 4px;font-family:var(--f-display);font-weight:400;font-size:19px;text-wrap:balance}
.fact .tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--beni);font-weight:700}
.fact p{margin:.3em 0 0;max-width:62ch}
.nav{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}

/* quiz */
.q{background:var(--card);border:2px solid var(--ink);border-radius:18px;padding:18px 20px}
.q h3{margin:0 0 12px;font-size:19px;font-weight:700;text-wrap:balance}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.opt{text-align:left;border:2px solid var(--ink);background:var(--paper);border-radius:14px;padding:12px 14px;font-size:16px;font-weight:600;cursor:pointer}
.opt:hover:not([disabled]){background:#fff;transform:translateY(-1px)}
.opt.right{background:#E3F0D6;border-color:var(--matcha)}
.opt.wrong{background:#FBE0E3;border-color:var(--beni)}
.opt[disabled]{cursor:default}
.why{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--paper2);font-size:15px}
.why b{color:var(--beni)}
.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* order game */
.tl{display:grid;gap:8px;counter-reset:n}
.slot{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center;min-height:52px;border:2px dashed var(--line);border-radius:12px;padding:6px 10px}
.slot.filled{border-style:solid;border-color:var(--ink);background:var(--card)}
.slot .n{font-family:var(--f-mincho);font-weight:800;font-size:20px;color:var(--ink-soft);text-align:center}
.slot .t b{font-family:var(--f-display);font-weight:400}
.slot .t small{display:block;color:var(--ink-soft);font-size:13px}
.pool{display:flex;flex-wrap:wrap;gap:8px}
.pcard{border:2px solid var(--ink);background:var(--sakura);border-radius:12px;padding:8px 14px;font-weight:700;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.pcard .jp{font-family:var(--f-mincho);margin-left:6px;font-size:14px}

/* reward */
.reward{text-align:center;display:grid;justify-items:center;gap:10px;background:var(--card);border:2px solid var(--ink);border-radius:20px;padding:24px 18px}
.hanko{width:132px;height:132px;border-radius:18px;border:5px solid var(--beni);color:var(--beni);display:grid;place-items:center;
  font-family:var(--f-mincho);font-weight:800;font-size:58px;transform:rotate(-8deg);background:rgba(210,63,78,.06);animation:stamp .5s cubic-bezier(.2,1.6,.4,1)}
.hanko.miss{border-color:var(--line);color:var(--line);background:none}
@keyframes stamp{0%{transform:scale(2.2) rotate(-20deg);opacity:0}100%{transform:scale(1) rotate(-8deg);opacity:1}}
.reward h2{font-family:var(--f-display);font-weight:400;margin:0;font-size:26px}
.reward .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* book */
.book{display:grid;gap:22px}
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.scard{background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:14px;display:grid;justify-items:center;gap:6px;text-align:center}
.scard .hanko{width:76px;height:76px;font-size:34px;border-width:4px;animation:none}
.scard b{font-size:14px}
.ycards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.ycard{background:var(--card);border:2px solid var(--ink);border-radius:16px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.ycard .art{background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 14px}
.ycard .art .k{font-family:var(--f-mincho);font-weight:800;font-size:34px;line-height:1}
.ycard .art .r{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.ycard .tx{padding:10px 14px;font-size:14px}
.ycard .tx b{font-family:var(--f-display);font-weight:400;font-size:16px;display:block}
.ycard.locked .art{background:var(--line);color:var(--paper)}
.ycard.locked .tx{color:var(--ink-soft)}
.omikuji{display:grid;gap:10px;justify-items:start}
.fortune{font-family:var(--f-mincho);font-weight:800;font-size:40px;color:var(--beni);line-height:1}

.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:10px 18px;border-radius:999px;font-weight:700;z-index:20;max-width:calc(100% - 32px)}
.foot{margin-top:28px;font-size:13px;color:var(--ink-soft);text-align:center}

@media (max-width:760px){
  .scene{grid-template-columns:minmax(0,1fr)}
  .stage{position:relative;top:0;display:grid;grid-template-columns:120px minmax(0,1fr);align-items:end;padding:10px 10px 0}
  .stage .portrait{max-width:120px}
  .stage .name{margin:0 0 10px;border-radius:10px;align-self:center}
  .fact{grid-template-columns:70px minmax(0,1fr)}
  .fact .kanji{font-size:28px}
  .welcome{grid-template-columns:84px minmax(0,1fr)}
  .welcome .portrait{width:84px}
}