/* 霧と箱庭 — 画面の見た目（index.html から読む） */
[hidden]{display:none!important}
:root{
  --ink:#2a2733; --ink2:#5d5868; --paper:#f4ead4; --paper2:#e5d6b6; --lamp:#f2b24a; --lamp2:#ffd98a; --mist:#d3d8f0;
  --sky1:#1a2141; --sky2:#3a4677; --sky3:#6d6b98; --star:.8; --bad:#d4573f; --moss:#3f6a43; --moss2:#2c4c30; --night:#232a4a;
  --ui:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Hiragino Sans','Noto Sans JP',system-ui,sans-serif;
  --title:'Kaisei Decol','Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif;
  --en:'Fraunces',Georgia,'Times New Roman',serif;
  --logoEn:'Jost','Futura','Avenir Next','Helvetica Neue',sans-serif;
  --amix-orient-bg:rgba(20,24,48,.95); --amix-orient-fg:#f3ecdb;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px); --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;color:var(--ink);font-family:var(--ui);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:none}
body{background:linear-gradient(to bottom,var(--sky1) 0%,var(--sky2) 55%,var(--sky3) 100%);transition:background 1s}
#sky{position:fixed;inset:0;pointer-events:none}
#stars{position:absolute;inset:0;opacity:var(--star);transition:opacity 1.2s;background-image:radial-gradient(1.2px 1.2px at 12% 14%,#fff 60%,transparent),radial-gradient(1px 1px at 31% 7%,#fff 60%,transparent),radial-gradient(1.4px 1.4px at 54% 18%,#fff 60%,transparent),radial-gradient(1px 1px at 71% 9%,#fff 60%,transparent),radial-gradient(1.1px 1.1px at 86% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 30%,#fff 60%,transparent),radial-gradient(1px 1px at 44% 3%,#fff 60%,transparent),radial-gradient(1.3px 1.3px at 63% 34%,#fff 60%,transparent),radial-gradient(1px 1px at 6% 40%,#fff 60%,transparent),radial-gradient(1px 1px at 96% 5%,#fff 60%,transparent),radial-gradient(.9px .9px at 38% 22%,#fff 60%,transparent),radial-gradient(.9px .9px at 79% 38%,#fff 60%,transparent)}
#moon{position:absolute;right:12%;top:calc(9% + var(--st));width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 38% 36%,#fffaf0 0%,#f2ead2 55%,#d9cfb4 100%);box-shadow:0 0 30px 10px rgba(255,244,214,.18),0 0 90px 40px rgba(200,210,255,.08);transition:opacity 1.2s,transform 1.2s}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
button{font-family:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hidden{display:none!important}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;color:#f3ecdb}
#hudTop{position:absolute;left:calc(14px + var(--sl));right:calc(8px + var(--sr));top:calc(10px + var(--st));display:flex;align-items:flex-start;gap:10px;text-shadow:0 1px 6px rgba(10,12,30,.6)}
#lightsBox{flex:1;min-width:0}
.lab{font-size:11px;letter-spacing:.16em;font-weight:700;color:#c9c6dc}
#lightRow{display:flex;gap:3px;margin-top:3px;align-items:flex-end}
#lightRow svg{width:24px;height:30px;transition:transform .3s,opacity .3s}
#lightRow svg.out{opacity:.55}
#lightRow svg.hit{animation:lhit .8s ease}
#lightRow svg.away{opacity:.35}
@keyframes lhit{25%{transform:translateY(-6px) scale(1.25)}}
#nightBox{text-align:right;margin-right:4px}
#nightNum{font-size:22px;font-weight:900;line-height:1.1;letter-spacing:.04em}
#nightNum small{font-size:13px;font-weight:700;color:#c9c6dc;margin-left:2px}
#nightDots{display:flex;gap:5px;justify-content:flex-end;margin-top:4px}
#nightDots i{display:block;width:9px;height:9px;border-radius:50%;border:1.5px solid #c9c6dc}
#nightDots i.done{background:#c9c6dc}
#nightDots i.now{background:var(--lamp);border-color:var(--lamp);box-shadow:0 0 8px var(--lamp)}
.iconBtn{width:40px;height:40px;display:grid;place-items:center;pointer-events:auto;color:#f3ecdb}
.iconBtn svg{width:24px;height:24px}

/* ---------- 盤の上の札 ---------- */
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.wl{position:absolute;left:0;top:0;will-change:transform;white-space:nowrap;transform-origin:50% 100%}
.fc{display:flex;flex-direction:column;align-items:center;gap:2px;color:#f6f0e2;font-weight:900;text-shadow:0 1px 4px rgba(10,12,30,.9),0 0 10px rgba(10,12,30,.6)}
.fc .k{font-size:10px;letter-spacing:.16em;color:#d9d6ee;font-weight:700}
.fc .row{display:flex;gap:6px;align-items:center;font-size:14px}
.fc .row span{display:flex;align-items:center;gap:1px}
.fc svg{width:22px;height:18px}
/* 倒しきる見込みの輪 ( 獣の印のまわり ) */
.fc .bi{position:relative;display:inline-grid;place-items:center;width:28px;height:26px}
.fc .bi .od{position:absolute;inset:-2px;width:32px;height:30px;overflow:visible}
.fc .ord{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;font-size:10px;font-weight:900;color:#1d1a2a;margin-right:4px;letter-spacing:0;text-shadow:none}
.wl.hid{visibility:hidden}
.wl{transition:opacity .25s}
.wl.dim{opacity:.08;transition:none}
.stopT{display:flex;align-items:center;gap:3px;padding:2px 6px 2px 3px;border-radius:9px;background:rgba(26,24,40,.72);color:#ffe2a8;font-size:11px;font-weight:900;text-shadow:none}
.stopT svg{width:14px;height:17px}
.gl{font-size:11px;font-weight:900;color:#ffe2a8;letter-spacing:.12em;text-shadow:0 1px 4px rgba(10,12,30,.9)}
.cl{font-size:11px;font-weight:900;color:#fff4d8;text-shadow:0 1px 3px rgba(10,12,30,.95),0 0 8px rgba(10,12,30,.7)}
.fl{position:absolute;left:0;top:0;font-weight:900;white-space:nowrap;pointer-events:none;color:#fff3d6;text-shadow:0 1px 5px rgba(10,12,30,.9),0 0 12px rgba(10,12,30,.5);animation:flup 1.4s cubic-bezier(.2,.9,.3,1) forwards}
.fl.big{font-size:24px;color:var(--lamp2)}
.fl.mid{font-size:16px}
.fl.bad{color:#ff9b86}
@keyframes flup{0%{transform:translate(-50%,-50%) translateY(10px) scale(.5);opacity:0}15%{transform:translate(-50%,-50%) translateY(-6px) scale(1.12);opacity:1}35%{transform:translate(-50%,-50%) translateY(-12px) scale(1)}80%{opacity:1}100%{transform:translate(-50%,-50%) translateY(-34px);opacity:0}}

/* ---------- トレイ ---------- */
#tray{position:absolute;left:0;right:0;bottom:0;pointer-events:none;padding:0 calc(8px + var(--sr)) calc(8px + var(--sb)) calc(8px + var(--sl))}
#trayInner{position:relative;margin:0 auto;max-width:560px;pointer-events:auto;background:var(--paper);border-radius:20px 20px 16px 16px;padding:9px 10px 10px;box-shadow:0 8px 30px rgba(5,8,25,.45),0 1px 0 rgba(255,255,255,.7) inset}
#trayInner:before{content:"";position:absolute;inset:4px;border:1.5px dashed rgba(93,88,104,.22);border-radius:16px 16px 12px 12px;pointer-events:none}
#guide{position:relative;min-height:22px;padding:0 4px 4px;font-size:13.5px;line-height:1.35;font-weight:700;color:var(--moss2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#guide b{color:#a9601c}
#guide b.bad{color:var(--bad)}
#guide b.warn{color:#e08a2c}
#handRow{display:flex;align-items:center;gap:4px;justify-content:space-between}
.rotBtn{width:40px;height:52px;flex:none;display:grid;place-items:center;border-radius:12px;color:var(--ink)}
.rotBtn svg{width:26px;height:26px}   /* 線は描いた大きさで 2px ( もどす・灯籠と同じ ) */
.rotBtn:active{transform:scale(.9)}
.rotBtn.off{opacity:.3}
#hand{flex:1;display:flex;justify-content:center;gap:2px;min-width:0;height:62px;align-items:center}
.ht{position:relative;width:48px;height:56px;flex:0 1 auto;min-width:0;transition:transform .18s cubic-bezier(.3,1.5,.5,1)}
.ht svg{width:100%;height:100%;overflow:visible}
.ht .tt{transform-box:fill-box;transform-origin:50% 50%;transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.ht.sel{transform:translateY(-3px) scale(1.16);z-index:2}
/* 選んでいる札: 持ち上げて大きくし、明るい縁取りで示す ( 前の下線は、すぐ下のボタンの段にくっついて、はみ出た線に見えた。2026-10-26 本人 ) */
.ht.sel svg{filter:drop-shadow(0 0 1.3px #fff6dc) drop-shadow(0 0 1.3px #fff6dc) drop-shadow(0 3px 4px rgba(20,16,30,.35))}
.ht.sel.eff svg{filter:drop-shadow(0 0 1.3px #fff6dc) drop-shadow(0 0 1.3px #fff6dc) drop-shadow(0 0 6px rgba(255,205,110,1))}
.ht.new{animation:newTile .55s cubic-bezier(.3,1.5,.5,1) both}
/* 効く札 ( 今夜の獣の道に塔を作れる ): 金の光 */
/* 効く札 ( 今夜の獣の道のそばに塔を作れる札 ) は金色に光らせるだけ。上の丸は、持ち上がった札で案内文の行にかぶるので外した ( 2026-10-26 本人 ) */
.ht.eff svg{filter:drop-shadow(0 0 6px rgba(255,205,110,1)) drop-shadow(0 0 2px rgba(255,236,190,.95))}
@keyframes newTile{0%{transform:translateY(-60px) scale(.4);opacity:0}100%{transform:none;opacity:1}}
.ht.empty{opacity:.18}
.ht.slot{opacity:.55;pointer-events:none}
#btnRow{display:flex;gap:6px;align-items:center;margin-top:6px}
.sb{height:46px;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 10px;border-radius:12px;font-size:14px;font-weight:900;color:var(--ink);background:var(--paper2);white-space:nowrap}
.sb svg{width:20px;height:20px;flex:none}
.sb:active{transform:translateY(2px)}
.sb.off{opacity:.3}
.sb.on{background:#3a3550;color:var(--lamp2)}
#placeBtn{flex:1;background:var(--moss);color:var(--paper);box-shadow:0 3px 0 var(--moss2)}
#placeBtn.off{box-shadow:none}
#goBtn{flex:1.25;min-width:0;background:#2b2f52;color:var(--lamp2);box-shadow:0 3px 0 #171a33;letter-spacing:.06em;font-size:15px;margin-left:10px}
#goBtn.armed .gl{white-space:normal;line-height:1.2}
#goBtn.armed{font-size:12px;letter-spacing:0;background:#4a3a2a;color:#ffe2a8;animation:goPulse .8s ease-in-out infinite}
#goBtn.pulse{animation:goPulse 1.6s ease-in-out infinite}
@keyframes goPulse{50%{box-shadow:0 3px 0 #171a33,0 0 0 4px rgba(242,178,74,.35)}}
#waveRow{display:flex;gap:8px;align-items:center;margin-top:2px}
#speedBtn{flex:1;height:50px}
#fireInd{display:flex;align-items:center;gap:4px;height:50px;padding:0 12px 0 8px;border-radius:14px;background:rgba(255,154,74,.14);border:1.5px solid rgba(255,154,74,.55);font-size:13px;font-weight:900;color:#a8532a;white-space:nowrap}
#fireInd svg{width:24px;height:24px}
#fireInd i{display:block;width:8px;height:8px;border-radius:50%;background:#ff9a4a;box-shadow:0 0 8px #ff9a4a;margin-left:3px}
#fireInd.used{opacity:.45;filter:grayscale(.8)}
#fireInd.used i{background:transparent;box-shadow:none;border:1.5px solid #b9a69a}
#dawnBar{margin-top:6px;width:84px;height:8px;border-radius:5px;background:linear-gradient(90deg,#1f2850,#3e4a7c 45%,#b78aa0 80%,#f2c79c);position:relative;box-shadow:0 0 0 1.5px rgba(201,198,220,.5);margin-left:auto}
#dawnBar i{position:absolute;top:-3px;left:calc(var(--p,0) * 100% - 7px);width:14px;height:14px;border-radius:50%;background:#ffe3b0;box-shadow:0 0 10px #ffd27a}
#flash{position:fixed;inset:0;background:#e6edff;opacity:0;pointer-events:none;z-index:4}
#flash.on{animation:flash 1s ease-out}
@keyframes flash{0%{opacity:0}6%{opacity:.55}14%{opacity:.08}22%{opacity:.38}100%{opacity:0}}
#keys{display:none;text-align:center;font-size:11px;color:var(--ink2);margin-top:6px;letter-spacing:.03em}
/* ---------- つぎの夜の予告 ( HUD の帯。盤の上には浮かせない ) ---------- */
#fcBand{position:absolute;left:calc(10px + var(--sl));width:max-content;max-width:calc(100% - 20px - var(--sl) - var(--sr));top:var(--fbT,80px);display:flex;flex-direction:column;gap:2px;padding:3px 8px 4px;border-radius:12px;background:rgba(20,18,40,.55);color:#f6f0e2;font-weight:900;text-shadow:0 1px 3px rgba(10,12,30,.8);pointer-events:none}
body.side #fcBand{max-width:calc(100% - 370px - var(--sl) - var(--sr))}
/* PC の HUD は、画面の解像度が低いぶん文字を大きく */
body.pc .lab{font-size:15px}
body.pc #lightRow svg{width:30px;height:37px}
body.pc #goal3w{min-height:23px}
body.pc #goal3{font-size:15px}
body.pc #goal3 svg{width:14px;height:18px}
body.pc #nightNum{font-size:26px}
body.pc #nightNum small{font-size:15px}
body.pc #stageLab{font-size:15px}
body.pc .fbRow{font-size:15px;gap:2px 14px}
body.pc .fbRow .fbK{font-size:14px}
body.pc .fbM .mn,body.pc .fbM .ow,body.pc .fbM .nr{font-size:15px}
body.pc .fbM .ls{font-size:13px}
body.pc .fbM .bi{width:28px;height:25px}
body.pc .fbM .bi svg{width:23px;height:19px}
body.pc .fbM .bi .od{width:32px;height:30px}
body.pc .fbNotes{font-size:14px}
body.pc .fbRow .wx{font-size:14px}
body.pc .fbRow .wx svg{width:18px;height:18px}
/* 畳んだ帯 ( スマホ ): かがり火は印だけにして、案内の文に場所をゆずる */
body.compact #tray.wave #fireInd span{display:none}
body.compact #tray.wave #fireInd{padding:0 7px 0 5px}
body.compact #tray.wave #speedBtn,body.compact #tray.wave #pauseBtn{padding:0 7px;font-size:12.5px;gap:3px}
body.compact #tray.wave #speedBtn svg,body.compact #tray.wave #pauseBtn svg{width:17px;height:17px}
body.compact #tray.wave #waveRow{gap:4px}
.fbRow{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font-size:12px;line-height:1.2}
body.compact .fbRow{gap:2px 8px}
.fbRow .fbK{font-size:10px;letter-spacing:.14em;color:#d9d6ee;font-weight:700}
.fbM{display:flex;align-items:center;gap:4px;white-space:nowrap;pointer-events:auto;cursor:pointer}
.fbM .mn{display:flex;align-items:center;gap:3px;font-size:11px;color:#e6e2f6}
.fbM .mn i{display:block;width:9px;height:9px;border-radius:50%}
.fbM .row{display:flex;gap:3px;align-items:center}
.fbM .row>span{display:flex;align-items:center;gap:0}
.fbM .bi{position:relative;display:inline-grid;place-items:center;width:22px;height:20px}
.fbM .bi svg{width:18px;height:15px}
.fbM .bi .od{position:absolute;inset:-2px;width:26px;height:24px;overflow:visible}
.fbM .ow{font-size:11px;color:#ffe2a8}
.fbM .ow.bad,.fbM .nr{color:#ff9b86;font-size:11px}
.fbM .ls{margin-left:3px;padding:0 3px;border-radius:6px;background:rgba(255,120,96,.22);color:#ffb3a3;font-size:10.5px;font-weight:900;letter-spacing:0}
.fbRow .wx{display:flex;gap:5px;font-size:10.5px;color:#e6ecff}
.fbRow .wx span{display:flex;align-items:center;gap:2px}
.fbRow .lanR{display:flex;align-items:center;gap:1px;font-size:11px;font-weight:900;pointer-events:none}
.fbRow .lanR svg{width:11px;height:14px}
.fbRow .lanR.bad{color:#ff9b86}
.fbRow .lanR.mid{color:#f2b24a}
.fbRow .nxL{font-size:10.5px;font-weight:700;color:#d9d6ee;white-space:nowrap}
.fbRow .nxL b{color:#ffb3a3;font-weight:900}
body.pc .fbRow .lanR,body.pc .fbRow .nxL{font-size:14px}
body.pc .fbRow .lanR svg{width:14px;height:18px}
.fbRow .wx svg{width:15px;height:15px}
.fbNotes{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:10.5px;font-weight:700;color:#ffe2a8}
.fbNotes:empty{display:none}
.fbNotes b{color:#fff3d6;margin-right:3px}
#fbTl:empty{display:none}
#timeline{transition:opacity .25s}
body.bannerOn #timeline{opacity:.1;transition:none}
#fbTl #timeline{padding:0}
#fbTl .tlLab{color:#c9c6dc;width:30px;font-size:9px}
#fbTl #tlSvg{height:24px}
#fbSub{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px}
#fbSub #fbTl{flex:1 1 210px;min-width:210px}
body.compact #fbSub.hasNotes #fbTl{flex-basis:100%}   /* v19: スマホで獣の説明が出ている夜は、着く順を次の段へ ( 説明の字と詰まらない ) */   /* 着く順の帯は、つぶれるくらいなら次の段へ ( 獣の説明が出ている間だけ ) */
body.compact .fbM{gap:3px}
body.compact .fbNotes{gap:2px 8px}
/* 霧の口の名前 ( 口がふたつのとき、盤の上に小さく ) */
.mk{display:flex;align-items:center;gap:3px;font-size:10.5px;font-weight:900;color:#f6f0e2;text-shadow:0 1px 3px rgba(10,12,30,.95)}
.mk i{display:block;width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(10,12,30,.6)}
/* スマホの縦向き: パネルを薄く ( 前の7割以下 ) */
body.compact #tray{padding-bottom:calc(6px + var(--sb))}
body.compact #trayInner{padding:6px 8px 6px;border-radius:16px 16px 14px 14px}
body.compact #trayInner:before{inset:3px;border-radius:13px 13px 11px 11px}
body.compact #guide{min-height:17px;font-size:12.5px;line-height:1.3;padding:0 4px 1px}
body.compact .rotBtn{width:34px;height:44px}
body.compact .rotBtn svg{width:23px;height:23px}
body.compact #hand{height:48px}
body.compact .ht{width:40px;height:46px}
body.compact #btnRow{margin-top:3px;gap:5px}
body.compact .sb{height:40px;font-size:13.5px;padding:0 8px}
body.compact #goBtn{margin-left:6px;font-size:14.5px}
body.compact #upgRow{margin-bottom:2px}
/* 迎え撃つ間は細い帯に畳む: 案内・かがり火・はやく・止める を1段に */
#tray.wave #trayInner{display:flex;align-items:center;gap:6px}
#tray.wave #guide{flex:1;min-width:0;min-height:0;padding:0 2px}
#tray.wave #waveUI{flex:none}
#tray.wave #waveRow{margin-top:0;gap:5px}
#tray.wave #speedBtn,#tray.wave #pauseBtn{flex:none;height:38px;padding:0 9px;font-size:13px}
#tray.wave #fireInd{height:38px;padding:0 8px 0 5px;font-size:12px}
#tray.wave #fireInd svg{width:20px;height:20px}
#pauseBtn.on{background:#3a3550;color:var(--lamp2)}
body.side #tray.wave #trayInner{display:block}
body.side #tray.wave #speedBtn,body.side #tray.wave #pauseBtn{flex:1;height:46px}
/* キーの案内 ( PC だけ )。ボタンの中に小さく。最初の面だけ少し目立たせる */
kbd.k{display:none;font:700 9.5px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:0;padding:2px 4px;border-radius:4px;background:rgba(43,39,51,.08);color:var(--ink2);box-shadow:inset 0 -1px 0 rgba(43,39,51,.18);opacity:.75}
body.pc kbd.k{display:inline-block}
body.pc.keysHi kbd.k{opacity:1;background:rgba(242,178,74,.28);color:var(--ink)}
body.pc .sb kbd.k{margin-left:3px}
body.pc #placeBtn kbd.k,body.pc #goBtn kbd.k{background:rgba(255,255,255,.16);color:inherit;box-shadow:none}
body.pc .rotBtn{position:relative}
body.pc .rotBtn kbd.k{position:absolute;left:50%;bottom:0;transform:translateX(-50%)}
body.pc .ht kbd.k{position:absolute;right:1px;top:1px;padding:1px 3px;font-size:9px}
body.pc .ht.sel kbd.k{background:var(--lamp);color:#2a2733}
/* 横長の PC: 操作を右の縦のパネルにまとめ、盤はその左の中央に大きく */
body.side #tray{left:auto;right:calc(16px + var(--sr));top:max(var(--hudB,74px),calc(92px + var(--st)));bottom:auto;width:312px;padding:0}
body.side #trayInner{max-width:none;width:100%;border-radius:20px;padding:14px 14px 12px}
body.side #trayInner:before{border-radius:16px}
body.side #guide{white-space:normal;min-height:40px;padding:0 4px 8px;font-size:13px}
body.side #upgRow{flex-wrap:wrap}
body.side #upgRow .ul{flex:1 1 100%;margin-bottom:2px}
body.side #upgRow .uo{flex:1}
body.side #hand{height:66px}
body.side #btnRow{flex-wrap:wrap;gap:8px;margin-top:10px}
body.side #undoBtn,body.side #lanBtn{flex:1}
body.side #placeBtn{flex:1 1 100%;height:50px}
body.side #goBtn{flex:1 1 100%;height:50px;margin-left:0}
body.side #waveRow{flex-wrap:wrap}
body.side #fireInd{flex:1 1 100%;justify-content:center}
body.side #keys{margin-top:10px}
body.pc #keys{display:block}
#tray.wave .kb,#tray:not(.wave) .kw{display:none}
#tray.end #keys{display:none}

#banner{position:fixed;left:0;right:0;top:calc(13% + var(--st));text-align:center;pointer-events:none;z-index:4;color:#fff3d6}
#banner .t{display:inline-block;font-family:var(--title);font-weight:700;font-size:40px;line-height:1.1;letter-spacing:.06em;text-shadow:0 2px 14px rgba(10,12,30,.8)}
#banner .s{font-size:14px;font-weight:900;margin-top:6px;line-height:1.5;white-space:pre-line;text-shadow:0 1px 6px rgba(10,12,30,.9)}
#banner .t,#banner .s{opacity:0}
#banner.show .t{animation:bannerIn 2s cubic-bezier(.2,1.2,.4,1) forwards}
#banner.show .s{animation:fadeup 2s ease forwards}
#banner.bad .t{color:#ffb4a4}
#banner.show.hold .t,#banner.show.hold .s{animation:none;opacity:1}
@keyframes bannerIn{0%{transform:scale(.6);opacity:0;filter:blur(6px)}18%{transform:scale(1.04);opacity:1;filter:blur(0)}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0}}
@keyframes fadeup{0%,10%{opacity:0;transform:translateY(8px)}25%,80%{opacity:1;transform:none}100%{opacity:0}}
#toast{white-space:pre-line;position:fixed;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);font-weight:900;font-size:14px;line-height:1.45;pointer-events:none;opacity:0;transition:opacity .25s;z-index:12;text-align:center;color:#fff3d6;background:rgba(26,24,40,.82);padding:7px 14px;border-radius:10px}
#toast.show{opacity:1}

/* ---------- タイトル ---------- */
.screen{position:fixed;inset:0;z-index:10}
#title{pointer-events:none;color:#f4eedf}
#title .head{--u:1px;position:absolute;left:calc(26px + var(--sl));top:calc(40px + var(--st));right:20px;text-shadow:0 2px 18px rgba(10,12,30,.55)}
/* 題字: 本人のロゴ ( image/logo.svg ) を型にして色を流す。上の「霧ト」は霧の白、下の「箱庭」は灯の色。
   霧のなかから字が浮かび、六角の箱が描かれ、角に灯がともる。霧の帯は字の前をゆっくり流れる */
#logo{position:relative;margin:calc(22 * var(--u)) 0 calc(28 * var(--u)) calc(40 * var(--u));width:calc(150 * var(--u));aspect-ratio:237.47/230.78;filter:drop-shadow(0 2px 14px rgba(10,12,30,.55))}
#logo .case{position:absolute;left:-30%;top:-16%;width:160%;height:132%;overflow:visible;pointer-events:none}
#logo .rim{stroke-dasharray:100;animation:rimDraw 2.2s cubic-bezier(.4,0,.2,1) .7s both}
@keyframes rimDraw{from{stroke-dashoffset:100;fill-opacity:0}to{stroke-dashoffset:0;fill-opacity:1}}
#logo .mark{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#f3f4fb 0%,#d8ddf1 42%,#f3e3c2 58%,#ffd38c 100%);-webkit-mask:url(../image/logo.svg) center/100% 100% no-repeat;mask:url(../image/logo.svg) center/100% 100% no-repeat;animation:logoIn 2.8s cubic-bezier(.2,.7,.2,1) .1s both}
/* 字の中に落ちる灯の照り返し ( 右下の灯籠のゆらぎと同じ周期 ) */
#logo .mark::after{content:'';position:absolute;right:-28%;bottom:-30%;width:90%;height:90%;background:radial-gradient(closest-side,rgba(255,184,84,.95),rgba(255,184,84,0));animation:lampGlow 2.6s ease-in-out 3s infinite}
@keyframes logoIn{0%{opacity:0;filter:blur(calc(14 * var(--u)));transform:translateY(calc(10 * var(--u))) scale(1.03)}55%{opacity:.85;filter:blur(calc(2.5 * var(--u)))}100%{opacity:1;filter:blur(0);transform:none}}
@keyframes lampGlow{0%,100%{opacity:.85}40%{opacity:.55}55%{opacity:1}}
#logo .veil{--vo:.6;position:absolute;left:-30%;right:-30%;height:20%;border-radius:50%;background:radial-gradient(closest-side,rgba(226,231,248,.85),rgba(226,231,248,0));filter:blur(calc(5 * var(--u)));pointer-events:none;opacity:0;animation:veilIn 3.4s ease-in-out .3s both,veilDrift 11s ease-in-out infinite alternate}
#logo .veil.a{top:16%;--vo:.42}
#logo .veil.b{top:38%;height:24%;--vo:.7;animation-duration:4s,15s;animation-delay:.6s,-6s}
#logo .veil.c{top:66%;height:18%;--vo:.3;animation-duration:3.6s,13s;animation-delay:.9s,-3s}
/* 霧は濃さだけで現れる ( 位置と大きさは流れの動きだけが受け持つので、飛ばない ) */
@keyframes veilIn{0%{opacity:0}100%{opacity:var(--vo)}}
@keyframes veilDrift{0%{transform:translateX(-16%)}100%{transform:translateX(16%)}}
#logo .lamp{transform-box:fill-box;transform-origin:50% 50%;animation:lampIn .9s cubic-bezier(.2,.8,.3,1.4) 2.4s both,lampFlicker 2.6s ease-in-out 3.3s infinite}
@keyframes lampIn{0%{opacity:0;transform:scale(.2)}100%{opacity:1;transform:scale(1)}}
@keyframes lampFlicker{0%,100%{opacity:1;transform:scale(1)}40%{opacity:.8;transform:scale(.9)}55%{opacity:1;transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){#logo .rim,#logo .mark,#logo .mark::after,#logo .veil,#logo .lamp{animation:none}#logo .veil{opacity:var(--vo)}}
/* タイトルの音の札 ( 遊ぶ前に ON/OFF が分かる。プレイ中は右上の音のボタン ) */
#title .tSnd,#gate .tSnd{position:absolute;top:calc(12px + var(--st));right:calc(12px + var(--sr));pointer-events:auto;display:flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 10px;border-radius:18px;background:rgba(20,24,48,.5);border:1px solid rgba(233,223,196,.35);color:#f3ecdb;font-size:13px;font-weight:700;letter-spacing:.06em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tSnd svg{width:20px;height:20px}
.tSnd .off,.tSnd[aria-pressed="false"] .on{display:none}
.tSnd[aria-pressed="false"] .off{display:inline}
.tSnd[aria-pressed="false"]{color:#c9c6dc}
.tSnd:focus-visible{outline:2px solid var(--lamp2);outline-offset:2px}
#title .tSnd:focus-visible,#title .t-foot a:focus-visible{outline:2px solid var(--lamp2);outline-offset:2px}
/* 制作とリンク ( ゲーム紹介 / ライセンス / ゲーム一覧 ) */
#title .t-foot{position:absolute;left:0;right:0;bottom:calc(8px + var(--sb));display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:2px;padding:0 16px;font-size:11px;font-weight:700;letter-spacing:.04em;color:#e3def0;text-shadow:0 1px 6px rgba(10,12,30,.95);pointer-events:auto}
#title .t-foot a{color:inherit;text-decoration:none;opacity:.88}
#title .t-foot a:hover,#title .t-foot a:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:3px}
#title .t-foot nav{display:flex;align-items:center}
#title .t-foot .bar{margin:0 .4em;opacity:.5}
#title .t-foot .sep{margin:0 .7em;opacity:.5}
/* 英字はロゴの中心にそろえる ( ロゴと同じ幅・左の余白の箱の中で中央。はみ出しても両側へ等しく出る )。字間の分だけ左にも足して、文字そのものの中心を合わせる */
#title .en{font-family:var(--logoEn);font-weight:400;font-size:12px;letter-spacing:.62em;margin-top:26px;color:#cfd3ea;opacity:.85;display:flex;justify-content:center;white-space:nowrap;width:calc(150 * var(--u));margin-left:calc(40 * var(--u));padding-left:.62em}
#title .tagline{margin-top:14px;font-size:14px;font-weight:700;line-height:1.75;color:#e3def0}
#title .start{position:absolute;left:0;right:0;bottom:calc(40px + var(--sb));display:flex;justify-content:center;gap:12px;pointer-events:auto;padding:0 12px}
.hexBtn{position:relative;width:176px;height:80px;filter:drop-shadow(0 4px 0 rgba(10,10,25,.7))}
.hexBtn.sub .i{background:#f4ead4;color:var(--ink)}
.hexBtn.sub .d{color:var(--ink2)}
.hexBtn .o{position:absolute;inset:0;background:#f4ead4;clip-path:polygon(16% 0,84% 0,100% 50%,84% 100%,16% 100%,0 50%)}
.hexBtn .i{position:absolute;inset:3px;background:#2b2f52;clip-path:polygon(16% 0,84% 0,100% 50%,84% 100%,16% 100%,0 50%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--lamp2)}
.hexBtn .n{font-size:20px;font-weight:900;letter-spacing:.14em}
.hexBtn .d{font-size:11px;font-weight:700;margin-top:3px;color:#d9d6ee}
.hexBtn:active{transform:translateY(3px);filter:drop-shadow(0 1px 0 rgba(10,10,25,.7))}

/* ---------- メニュー・結果 ---------- */
#menu{background:rgba(10,12,28,.5);display:grid;place-items:center}
#menu .sheet{background:var(--paper);border-radius:20px;padding:22px 22px 14px;width:min(300px,86vw);box-shadow:0 10px 40px rgba(0,0,0,.35)}
#menu h3{margin:0 0 10px;font-family:var(--title);font-size:22px}
.mItem{display:flex;width:100%;padding:12px 4px;font-size:16px;font-weight:700;border-bottom:1px solid rgba(93,88,104,.2);text-align:left}
.mItem:last-child{border-bottom:0}
#result{pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end}
#result .sheet{pointer-events:auto;margin:0 auto;width:min(520px,100%);background:var(--paper);border-radius:26px 26px 0 0;padding:20px 22px calc(18px + var(--sb));box-shadow:0 -8px 30px rgba(5,8,25,.4);animation:sheetUp .6s cubic-bezier(.2,1.2,.4,1)}
@keyframes sheetUp{from{transform:translateY(100%)}}
#rReason{font-size:13px;font-weight:700;color:var(--ink2);letter-spacing:.06em}
#rReason.bad{color:var(--bad)}
#rTitle{font-family:var(--title);font-size:30px;margin:2px 0 10px}
#rStars{display:flex;flex-direction:column;gap:6px;margin:4px 0 14px}
#rLights{display:flex;align-items:baseline;gap:10px;margin:-4px 0 8px;color:var(--ink)}
#rLights b{font-family:var(--title);font-size:40px;line-height:1;font-weight:700}
#rLights span{font-size:13px;font-weight:800;color:var(--ink2)}
#rLights .nw{color:#b0651c}
#mapSheet .best{margin-top:3px;font-size:13px;font-weight:900;color:var(--ink)}
#mapSheet .best small{font-size:11px;font-weight:700;color:var(--ink2);margin-left:4px}
.star{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:#9a94a4}
.star svg{width:30px;height:38px;flex:none}
.star.on{color:var(--ink)}
.star small.cnt{margin-left:auto;font-size:12px;font-weight:800;color:#b07a3a}
.star.pop svg{animation:starPop .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes starPop{0%{transform:scale(.2);opacity:0}100%{transform:none;opacity:1}}
#rStats{font-size:12px;font-weight:700;color:var(--ink2);margin:-4px 0 12px;white-space:pre-line;line-height:1.5}
#rBtns{display:flex;gap:8px}
.rb{flex:1;height:50px;font-size:15px;font-weight:900;border-radius:12px;background:var(--paper2);white-space:nowrap;padding:0 8px}
#shareTxt{width:100%;margin-top:10px;font-family:var(--ui);font-size:12px;border:1px solid rgba(93,88,104,.3);border-radius:8px;padding:8px;background:#fffaf0;color:var(--ink);resize:none;-webkit-user-select:text;user-select:text}
.rb.main{background:#2b2f52;color:var(--lamp2);box-shadow:0 3px 0 #171a33}
.rb:active{transform:translateY(2px)}
/* ---------- はじまり ( 読み込み → タップしてはじめる )。音はこのタップから鳴らす ( 自動再生できないため ) ---------- */
#gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:radial-gradient(ellipse 80% 60% at 50% 58%,#323b6b 0%,#1f2749 55%,#161c38 100%);color:#e3def0;cursor:default;transition:opacity 1s ease,filter 1s ease,visibility 0s 1s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#gate.ready{cursor:pointer}
#gate.out{opacity:0;filter:blur(10px);visibility:hidden;pointer-events:none}
#gate .gIn{display:flex;flex-direction:column;align-items:center;gap:22px;padding:0 16px}
#gate .gLogo{position:relative;width:104px;aspect-ratio:237.47/230.78;filter:drop-shadow(0 2px 12px rgba(10,12,30,.5))}
#gate .gLogo .mark{position:absolute;inset:0;background:linear-gradient(180deg,#f3f4fb 0%,#d8ddf1 42%,#f3e3c2 58%,#ffd38c 100%);-webkit-mask:url(../image/logo.svg) center/100% 100% no-repeat;mask:url(../image/logo.svg) center/100% 100% no-repeat;animation:gateLogo 1.8s cubic-bezier(.2,.7,.2,1) .1s both}
#gate .gLogo .veil{--vo:.7;position:absolute;left:-70%;right:-70%;border-radius:50%;background:radial-gradient(closest-side,rgba(226,231,248,.8),rgba(226,231,248,0));filter:blur(6px);pointer-events:none;opacity:0;animation:gateFade 2.6s ease-in-out .2s both,gateDrift 7s ease-in-out infinite alternate}
#gate .gLogo .veil.a{top:6%;height:38%;--vo:.6}
#gate .gLogo .veil.b{top:54%;height:36%;--vo:.5;animation-duration:3s,9s;animation-delay:.6s,-4s;animation-direction:normal,alternate-reverse}
@keyframes gateLogo{0%{opacity:0;filter:blur(10px);transform:translateY(6px)}100%{opacity:1;filter:blur(0);transform:none}}
@keyframes gateFade{0%{opacity:0}100%{opacity:var(--vo)}}
@keyframes gateDrift{0%{transform:translateX(-24%)}100%{transform:translateX(24%)}}
#gate .gMsg{margin:0;min-height:1.6em;font-size:14px;font-weight:700;letter-spacing:.14em;text-align:center}
#gate .gMsg .go,#gate.ready .gMsg .ld{display:none}
#gate.ready .gMsg .go{display:inline;color:var(--lamp2);animation:gatePulse 2.2s ease-in-out infinite}
#gate .gMsg .ld::after{content:'';display:inline-block;width:1.2em;text-align:left;animation:gateDots 1.2s steps(4) infinite}
@keyframes gateDots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
@keyframes gatePulse{0%,100%{opacity:1}50%{opacity:.45}}
#gate .gSnd{position:static;visibility:hidden}
#gate.ready .gSnd{visibility:visible}
@media (prefers-reduced-motion:reduce){#gate .gLogo .mark,#gate .gLogo .veil,#gate.ready .gMsg .go{animation:none}#gate .gLogo .veil{opacity:var(--vo)}}
/* はじまりが開いている間は、タイトルのロゴの登場を待たせる ( タップした後に霧の中から出す ) */
body.gated #logo .rim,body.gated #logo .mark,body.gated #logo .mark::after,body.gated #logo .veil,body.gated #logo .lamp{animation-play-state:paused}


/* ---------- HUD の面の番号 ---------- */
#stageLab{font-size:11px;font-weight:700;letter-spacing:.14em;color:#c9c6dc;text-align:right}
/* ---------- 入口に着く順 ---------- */
#timeline{display:flex;align-items:center;gap:6px;padding:0 4px 4px}
#timeline .tlLab{font-size:10px;line-height:1.15;font-weight:700;color:var(--ink2);flex:none;text-align:right;width:34px}
#tlSvg{flex:1;height:30px;display:block;min-width:0}
#timeline .tlE{flex:none;font-size:9.5px;font-weight:800;color:var(--ink2);letter-spacing:.02em}
#fbTl #timeline .tlE{color:#c9c6dc;font-size:9px}
/* ---------- 強化を選ぶ札 ---------- */
.upg{position:relative;display:flex;gap:4px;pointer-events:auto;padding:3px;margin-top:10px;border-radius:12px;background:rgba(26,24,40,.78);box-shadow:0 4px 14px rgba(5,8,25,.4)}
.upg button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;height:46px;padding:0 6px;border-radius:9px;background:rgba(255,255,255,.08);color:#f3ecdb;font-size:12px;font-weight:900;gap:1px}
.upg button svg{width:20px;height:18px}
.upg button.on{background:var(--lamp);color:#2a2733}
.upg button.lock{opacity:.5;pointer-events:none}
.upg .lv{position:absolute;top:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;font-weight:900;line-height:1;padding:3px 7px;border-radius:7px;background:#2a2740;color:var(--lamp2);box-shadow:0 2px 6px rgba(5,8,25,.4)}
.upg.pend{animation:upgPulse 1.4s ease-in-out infinite}
@keyframes upgPulse{50%{box-shadow:0 4px 14px rgba(5,8,25,.4),0 0 0 3px rgba(242,178,74,.5)}}
/* 盤の上は小さな札だけ ( 押すと下のパネルで選ぶ )。選んだあとは強化の記号だけの印 ( 押せない・盤のタップを邪魔しない ) */
.upgB{pointer-events:auto;display:flex;align-items:center;gap:3px;height:26px;padding:0 9px 0 6px;margin-top:4px;border-radius:13px;background:#2a2740;color:var(--lamp2);font-size:11px;font-weight:900;white-space:nowrap;box-shadow:0 3px 10px rgba(5,8,25,.45);animation:upgPulse 1.4s ease-in-out infinite;cursor:pointer}
.upgB svg{width:15px;height:14px}
/* 札を持って置き先を選んでいる間は、強化の札はタップを取らない ( 下の盤に通す ) */
body.selecting .upgB{pointer-events:none;opacity:.55}
.upgM{pointer-events:none;display:flex;gap:2px;padding:2px 5px;border-radius:9px;background:rgba(26,24,40,.62);color:var(--lamp2)}
.upgM svg{width:14px;height:13px}
#upgRow{display:flex;align-items:center;gap:6px;padding:0 2px 8px}
#upgRow .ul{flex:1;min-width:0;font-size:12.5px;font-weight:900;line-height:1.25;color:var(--ink)}
#upgRow .ul small{display:block;font-size:10.5px;font-weight:700;color:var(--ink2)}
#upgRow .uo{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:60px;height:46px;padding:0 6px;border-radius:12px;background:var(--paper2);color:var(--ink);font-size:12px;font-weight:900;gap:1px}
#upgRow .uo svg{width:20px;height:18px}
#upgRow .uo.on{background:var(--lamp);color:#2a2733}
#upgRow .ux{width:34px;height:46px;display:grid;place-items:center;border-radius:12px;color:var(--ink2)}
#upgRow .ux svg{width:18px;height:18px}
.fc .note{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:#ffe2a8;letter-spacing:.04em;background:rgba(20,18,40,.55);border:1px solid rgba(255,226,168,.35);border-radius:9px;padding:2px 8px 2px 3px;margin-top:2px;text-shadow:none}
.fc .note .nb svg{width:34px;height:28px}
.fc .note b{display:block;font-size:11.5px;color:#fff3d6;font-weight:900}
.fc .wx{display:flex;gap:7px;margin-top:2px;font-size:10.5px;font-weight:800;color:#e6ecff}
.fc .wx span{display:flex;align-items:center;gap:2px;background:rgba(20,18,40,.5);border-radius:8px;padding:1px 6px 1px 3px;text-shadow:none}
.fc .wx svg{width:17px;height:17px}
.boss .row{font-size:16px}
/* ---------- 村の育ち ( 段と、次の段までの道 ) / 塔の前の時間 ---------- */
.vt{display:flex;align-items:center;gap:4px;color:#ffe2a8;font-size:11.5px;font-weight:900;letter-spacing:.06em;text-shadow:0 1px 4px rgba(10,12,30,.95),0 0 8px rgba(10,12,30,.7)}
.vt svg{width:20px;height:18px;filter:drop-shadow(0 1px 2px rgba(10,12,30,.8))}
.vt .pp{display:flex;gap:3px;margin-left:3px}
.vt .pp i{display:block;width:7px;height:7px;transform:rotate(45deg);border:1.5px solid rgba(255,226,168,.8);background:rgba(20,18,36,.5)}
.vt .pp i.on{background:#ffe2a8;border-color:#ffe2a8}
.vt .pp i.nw{background:#ffd27a;border-color:#fff3d6;box-shadow:0 0 7px #ffc04a}
.vt.grow{color:#fff3d6;font-size:12.5px}
.vt.grow b{color:#ffd27a}
.vt.grow svg{animation:vtPop 1.1s ease-in-out infinite}
@keyframes vtPop{50%{transform:scale(1.18)}}
.gn{font-size:12px;font-weight:900;color:#e8e4f6;letter-spacing:.03em;text-shadow:0 1px 4px rgba(10,12,30,.95),0 0 9px rgba(10,12,30,.8)}
.gn b{font-size:14px;font-variant-numeric:tabular-nums}
.gn.up b:last-child{color:#ffd98a;text-shadow:0 0 10px rgba(255,190,80,.8),0 1px 4px rgba(10,12,30,.95)}
.gn.down b:last-child{color:#ff9b86}
/* 行き止まり・塔の前を通らない・灯籠の損 ( 赤は危ない知らせだけ ) */
.dz{font-size:11.5px;font-weight:900;color:#ff9b86;letter-spacing:.04em;text-shadow:0 1px 4px rgba(10,12,30,.95),0 0 9px rgba(10,12,30,.8)}
.dz.mild{color:#e8e4f6}
.dz.dw{color:#ffc27a}   /* 道が止まる ( 取り引き: 失うものを添える ) */
.cl.go{color:#ffd98a;font-size:12px}
.cl.lit{color:#ffd98a;text-shadow:0 0 9px rgba(255,190,80,.75),0 1px 3px rgba(10,12,30,.95)}
.mk.mg{gap:2px;font-size:10px;color:#ffd0c4}
.mk.mg i{width:7px;height:7px}
.fc .ow{font-size:10.5px;font-weight:900;letter-spacing:.06em;color:#ffe2a8}
.fc .ow.bad,.fc .nr{color:#ff9b86}
.fc .nr{font-size:10.5px;font-weight:900}
.fc .row{pointer-events:auto;cursor:pointer}
.stopT .rk{color:#cfc9e4;font-weight:800}
.stopT .rk.bad{color:#ff9b86;font-weight:900}
.stopT .rk.mid{color:#ffc27a;font-weight:900}
#goal3w{min-height:17px}   /* 3つ目の条件の行は、はじめから高さをとっておく ( 盤の札が重ならないように ) */
#goal3{display:flex;align-items:center;gap:3px;margin-top:3px;font-size:10.5px;font-weight:800;color:#d9d6ee;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#goal3 svg{width:11px;height:14px;flex:none}
#goal3 span+span::before{content:'・';margin:0 3px;color:#8b8796}
#goal3 .ok{color:#ffd98a}
#goal3 .ng{color:#ff9b86}
#goal3 .gone{color:#8d89a3;text-decoration:line-through;text-decoration-thickness:1.5px}
#mGoals{margin:-2px 0 10px;font-size:13px;font-weight:700;color:var(--ink2);line-height:1.6}
#mGoals div{display:flex;align-items:center;gap:6px}
#mGoals svg{width:12px;height:15px;flex:none}
/* ---------- 谷の地図 ( 面えらび ) ---------- */
#map{display:flex;flex-direction:column;color:#f3ecdb;background:radial-gradient(1.2px 1.2px at 12% 18%,rgba(255,255,255,.7),transparent 2px),radial-gradient(1px 1px at 72% 9%,rgba(255,255,255,.6),transparent 2px),radial-gradient(1.4px 1.4px at 88% 31%,rgba(255,240,210,.7),transparent 2px),radial-gradient(1px 1px at 33% 41%,rgba(255,255,255,.5),transparent 2px),radial-gradient(1px 1px at 56% 63%,rgba(255,255,255,.45),transparent 2px),radial-gradient(1.2px 1.2px at 8% 77%,rgba(255,255,255,.5),transparent 2px),radial-gradient(120% 50% at 50% 0%,rgba(110,120,190,.35),transparent 70%),linear-gradient(#11163a,#1c2350 45%,#2a3062)}
#map:after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;background:linear-gradient(transparent,rgba(200,206,236,.10) 60%,rgba(200,206,236,.16))}
#mapHead{display:flex;align-items:center;gap:6px;padding:calc(8px + var(--st)) calc(12px + var(--sr)) 6px calc(6px + var(--sl))}
#mapHead .t{flex:1;font-family:var(--title);font-size:22px;letter-spacing:.1em}
#mapTotal{font-weight:900;font-size:15px;color:var(--lamp2);display:flex;align-items:center;gap:4px}
#mapTotal svg{width:16px;height:20px}
#mapScroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}
#mapInner{position:relative;max-width:520px;margin:0 auto;padding:0 18px calc(220px + var(--sb))}
/* 谷の地図: 夜の山道を下っていく。面は道ばたの石灯籠、取った灯の数だけ火がともる */
.vl{position:relative;height:640px}
.vl svg.land{position:absolute;left:-18px;right:-18px;top:0;width:calc(100% + 36px);height:100%;overflow:visible;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.vl .vh{position:absolute;left:0;right:0;top:14px;display:flex;align-items:center;gap:10px;z-index:2}
.vl .no{display:block;font-family:var(--title);font-size:11px;letter-spacing:.32em;color:#bdb8d6;white-space:nowrap;margin-bottom:2px}
.vl .nm{font-family:var(--title);font-size:25px;letter-spacing:.1em;line-height:1.1;text-shadow:0 2px 10px rgba(5,8,25,.8)}
.vl .cap{font-size:11.5px;font-weight:700;color:#cfcbe2;margin-top:3px;letter-spacing:.04em}
.vl .lit{margin-left:auto;display:flex;align-items:center;gap:3px;font-size:12px;font-weight:900;color:#e9dfc4;white-space:nowrap;background:rgba(10,12,32,.45);border:1px solid rgba(233,223,196,.25);border-radius:20px;padding:3px 9px 3px 6px}
.vl .lit svg{width:12px;height:15px}
.vl .veil{position:absolute;left:-18px;right:-18px;top:76px;bottom:0;z-index:3;display:grid;place-items:center;pointer-events:none;background:linear-gradient(rgba(190,196,226,0),rgba(190,196,226,.2) 14%,rgba(176,182,214,.34) 50%,rgba(190,196,226,.22) 86%,rgba(190,196,226,0));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.vl .veil span{font-size:13px;font-weight:800;letter-spacing:.12em;color:#e6e4f2;text-shadow:0 1px 8px rgba(10,12,32,.9)}
.vl.locked .nm,.vl.locked .cap{opacity:.45}
.lt{position:absolute;width:64px;height:76px;transform:translate(-50%,-62%);display:flex;flex-direction:column;align-items:center;z-index:2}
.lt .toro{width:40px;height:52px;overflow:visible;filter:drop-shadow(0 3px 2px rgba(5,6,20,.7));transition:transform .2s}
.lt.show .toro{width:52px;height:66px}
.lt .n{position:absolute;left:calc(50% + 22px);top:18px;font-family:var(--title);font-size:15px;color:#e9dfc4;text-shadow:0 1px 6px rgba(5,8,25,.95);letter-spacing:.02em}
.lt.show .n{left:calc(50% + 28px);top:24px;font-size:17px}
.lt .fl{display:flex;gap:4px;margin-top:2px;position:static;transform:none;animation:none;left:auto;top:auto;pointer-events:none}   /* 盤に浮かぶ文字の .fl と名前が同じなので、その位置・動きを打ち消す ( 星の印が灯の左上へずれていた ) */
.lt .fl i{display:block;width:7px;height:9px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:#3b3d5a;box-shadow:inset 0 0 0 1px rgba(233,223,196,.25)}
.lt .fl i.on{background:radial-gradient(circle at 50% 70%,#fff3c8,#ffc04a 55%,#ff8a3a);box-shadow:0 0 8px #ffc04a}
.lt .lord{position:absolute;right:calc(50% + 22px);top:14px;width:30px;height:26px;opacity:.95}
.lt .lord svg{width:30px;height:26px}
.lt.locked{opacity:.35}
.lt.next .toro{animation:ltGlow 1.8s ease-in-out infinite}
@keyframes ltGlow{0%,100%{filter:drop-shadow(0 3px 2px rgba(5,6,20,.7)) drop-shadow(0 0 0 rgba(255,192,74,0))}50%{filter:drop-shadow(0 3px 2px rgba(5,6,20,.7)) drop-shadow(0 0 12px rgba(255,192,74,.9))}}
.lt.sel .toro{transform:scale(1.14)}
.lt.sel:after{content:"";position:absolute;left:50%;top:44px;width:56px;height:16px;transform:translateX(-50%);border-radius:50%;border:2px solid rgba(255,214,140,.9);box-shadow:0 0 10px rgba(255,192,74,.6)}
.lt.show.sel:after{top:56px;width:66px}
.vl .drift{animation:drift 14s ease-in-out infinite alternate}
.vl .wisp{animation:wispFlicker 2.8s ease-in-out infinite alternate}   /* 狐火の谷の火がゆらめく */
@keyframes wispFlicker{0%{opacity:.55}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.vl .wisp{animation:none}}
@keyframes drift{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
#mapSheet{position:fixed;z-index:10;left:0;right:0;bottom:0;display:flex;justify-content:center;pointer-events:none;padding:0 calc(8px + var(--sr)) calc(8px + var(--sb)) calc(8px + var(--sl))}
#mapSheet .sheet{pointer-events:auto;width:min(520px,100%);background:var(--paper);color:var(--ink);border-radius:22px;padding:14px 16px 14px;box-shadow:0 -6px 30px rgba(5,8,25,.45);display:grid;grid-template-columns:auto 1fr;gap:4px 14px;animation:sheetUp .45s cubic-bezier(.2,1.2,.4,1)}
#mapSheet .thumb{grid-row:1 / span 3;width:104px;height:124px}
#mapSheet .no{font-family:var(--title);font-size:30px;line-height:1}
#mapSheet .no small{font-size:13px;margin-left:4px;font-family:var(--ui);font-weight:700;color:var(--ink2)}
#mapSheet .sub{font-size:12px;font-weight:700;color:var(--ink2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#mapSheet .sub svg{width:16px;height:16px;vertical-align:-3px}
#mapSheet .sub.new{color:#7a5410;margin-top:2px}
#mapSheet .sub.new:before{content:"はじめて";font-size:10px;font-weight:900;color:#fff7e6;background:#c98a2a;border-radius:6px;padding:2px 6px;margin-right:2px}
#mapSheet .goals{display:flex;flex-direction:column;gap:2px;font-size:12px;font-weight:700;color:#9a94a4}
#mapSheet .goals div{display:flex;align-items:center;gap:6px}
#mapSheet .goals .on{color:var(--ink)}
#mapSheet .goals svg{width:14px;height:18px}
#mapSheet .go{grid-column:1 / span 2;height:50px;margin-top:6px;border-radius:12px;background:#2b2f52;color:var(--lamp2);font-size:16px;font-weight:900;letter-spacing:.1em;box-shadow:0 3px 0 #171a33}
#mapSheet .go:active{transform:translateY(2px)}
#mapSheet .alt{grid-column:1 / span 2;display:flex;align-items:center;justify-content:center;gap:6px;height:40px;margin-top:2px;border-radius:12px;background:transparent;border:1.5px solid rgba(93,88,104,.35);color:var(--ink);font-size:13.5px;font-weight:900}
#mapSheet .alt small{font-size:11px;font-weight:700;color:var(--ink2)}
#mapSheet .alt.hard{border-color:rgba(190,80,50,.55);color:#8a3a22}
#hardBtn{display:flex;align-items:center;gap:4px;height:34px;padding:0 10px 0 7px;border-radius:17px;border:1.5px solid rgba(255,154,74,.5);color:#ffcf9a;font-size:12.5px;font-weight:900;pointer-events:auto}
#hardBtn svg{width:16px;height:16px}
#hardBtn.on{background:rgba(200,80,40,.35);border-color:#ff9a4a;color:#fff1de}
.lt .hd{position:absolute;left:50%;top:-6px;width:10px;height:13px;margin-left:-5px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#ffe2c0,#ff7a3a 60%,#c8401a);box-shadow:0 0 8px #ff7a3a}
.rnote{font-size:11.5px;font-weight:700;color:var(--ink2);margin:-6px 0 10px}
/* ---------- 夜明け ---------- */
#sun{position:fixed;left:50%;top:-6%;width:min(720px,150vw);aspect-ratio:1;transform:translate(-50%,90px) scale(.8);border-radius:50%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle,rgba(255,226,170,.85) 0%,rgba(255,190,130,.42) 18%,rgba(255,160,120,.16) 42%,transparent 66%);opacity:0;transition:opacity 1.6s ease,transform 3s cubic-bezier(.2,.8,.3,1);z-index:0}
#sun.up{opacity:1;transform:translate(-50%,0)}

@media (min-width:760px){
  #title .head{--u:1.5px}
  #title .t-foot{justify-content:flex-start;left:64px;right:auto;bottom:24px;padding:0}
  .hexBtn{width:196px;height:86px}
  #title .head{left:calc(64px + var(--sl));top:70px}
  #title .start{left:64px;right:auto;bottom:64px;justify-content:flex-start}
  #banner .t{font-size:54px}
  .ht{width:54px;height:62px}
  #hand{height:68px}
}
@media (max-height:640px){ #title .head{--u:.72px} #title .tagline{display:none} #title .en{letter-spacing:.4em;padding-left:.4em} }   /* 小さいロゴの下では英字の字間を詰めて、画面の端に付かないように */
@media (min-width:900px){
  #mapInner{max-width:560px;margin:0 0 0 max(24px,calc(50% - 470px));padding-bottom:80px}
  #mapSheet{left:auto;right:max(24px,calc(50% - 470px));top:calc(78px + var(--st));bottom:auto;width:360px;padding:0}
  #mapSheet .sheet{width:100%;grid-template-columns:1fr;gap:6px;border-radius:22px;padding:18px 18px 16px}
  #mapSheet .thumb{grid-row:auto;width:100%;height:230px}
  #mapSheet .go{grid-column:auto}
}

/* ?dev=1 テストプレイの印 */
.devBadge{position:fixed;left:50%;bottom:calc(4px + var(--sb));transform:translateX(-50%);z-index:35;padding:2px 10px;border-radius:999px;background:rgba(212,87,63,.85);color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;pointer-events:none}
/* スマホの幅では下のリンクが2行 ( 高さ 34px ) に折り返すので、ボタンを上げて 12px あける ( 2026-10-26 本人「フッターリンクとボタンが重なって余白がない」 ) */
@media (max-width:599px){ #title .start{bottom:calc(58px + var(--sb))} }