/* =========================================================
   MEGUROUTE RUSH（メグルート） / 営業用PRデモ
   Design canvas : 390 x 844 (スマホ縦・9:16収録前提)
   ========================================================= */
:root{
  --base:#FBF7EF; --base-2:#F2ECDF;
  --green:#2E9E6B; --green-d:#1F7A50; --green-l:#7FD3A8;
  --blue:#4FB3E8;  --blue-d:#2E80AE;
  --accent:#F5A524; --accent-d:#C9821A;
  --amber:#F2851E;
  --ink:#24312B; --ink-2:#5C6B63; --line:rgba(36,49,43,.12);
  --night:#101A19;
  --shadow:0 10px 30px rgba(36,49,43,.10), 0 2px 6px rgba(36,49,43,.06);
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased }
html,body{
  width:100%; height:100%; overflow:hidden; background:#0D1211;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",
              -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color:var(--ink);
}
body.record{ background:var(--base); cursor:none }
#viewport{ position:fixed; inset:0; display:grid; place-items:center }
#stage{
  position:relative; width:390px; height:844px; transform-origin:50% 50%;
  overflow:hidden; background:var(--base); border-radius:34px;
  box-shadow:0 30px 80px rgba(0,0,0,.45); will-change:transform;
}
body.record #stage{ border-radius:0; box-shadow:none }
.layer{ position:absolute; inset:0 }
#bgLayer{z-index:1} #backLayer{z-index:2} #objLayer{z-index:6} #charaLayer{z-index:7} #uiLayer{z-index:10}
/* 画面揺れ・パンチズーム（js/timeline.js の IMPACTS が --sx/--sy/--pz を書く） */
#backLayer,#objLayer,#charaLayer,#uiLayer{
  transform:translate(var(--sx,0px),var(--sy,0px)) scale(var(--pz,1)); transform-origin:50% 50% }
[data-a]{ will-change:transform,opacity; backface-visibility:hidden }

/* 画面停止（WAIT!）演出 */
#stage.is-freeze #backLayer, #stage.is-freeze #objLayer, #stage.is-freeze #charaLayer{
  filter:saturate(.3) brightness(.94)
}

/* ---------- 背景 ---------- */
.bg{ position:absolute; inset:0 }
.bg-night{ background:radial-gradient(120% 80% at 50% 40%,#1B2E2A 0%,#101A19 60%,#0A100F 100%) }
.bg-warm { background:linear-gradient(180deg,#FDFAF3 0%,#F5EFE2 62%,#EFE7D6 100%) }
.bg-deep { background:radial-gradient(120% 70% at 50% 34%,#FFFFFF 0%,#EFF7F0 42%,#DDEDE2 100%) }
.bg-sky  { background:linear-gradient(180deg,#CFEBF8 0%,#E6F4F0 52%,#F4F0E2 100%) }
.bg-amber{ background:radial-gradient(120% 80% at 50% 38%,rgba(255,214,150,.55) 0%,rgba(242,133,30,.30) 60%,rgba(190,90,10,.30) 100%) }
.vignette{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 44%,rgba(0,0,0,0) 55%,rgba(36,49,43,.10) 100%) }
.flash{ position:absolute; inset:0; background:#fff }

.speed{ position:absolute; inset:0 }
.speed i{ position:absolute; left:0; width:150px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,rgba(127,211,168,0),rgba(127,211,168,.75)) }
.speed i:nth-child(2){ left:120px } .speed i:nth-child(3){ left:60px }
.speed i:nth-child(4){ left:180px } .speed i:nth-child(5){ left:30px }

/* ---------- GAME HUD ---------- */
.hud{ position:absolute; left:18px; right:18px; top:18px }
.hud-row{ display:flex; justify-content:space-between; align-items:center }
.hud-mission,.hud-score{ display:flex; align-items:baseline; gap:6px;
  background:rgba(255,255,255,.82); border:1px solid var(--line); border-radius:11px;
  padding:5px 10px; box-shadow:0 2px 8px rgba(36,49,43,.07) }
.hud-k{ font-size:8.5px; font-weight:800; letter-spacing:.16em; color:var(--ink-2) }
.hud-mission b,.hud-score b{ font-size:15px; font-weight:900; letter-spacing:.06em;
  font-variant-numeric:tabular-nums; color:var(--ink) }
.hud-score b{ color:var(--green-d) }
.hud-q{ display:flex; align-items:baseline; gap:4px; background:rgba(255,255,255,.82); border:1px solid var(--line);
  border-radius:11px; padding:5px 9px; box-shadow:0 2px 8px rgba(36,49,43,.07) }
.hud-q b{ font-size:15px; font-weight:900; color:var(--accent-d); font-variant-numeric:tabular-nums }
.hud-q i{ font-style:normal; font-size:10px; font-weight:800; color:var(--ink-2) }
.meter-fill.is-full{ box-shadow:0 0 10px 2px rgba(46,158,107,.55) }
.meter{ display:flex; align-items:center; gap:8px; margin-top:9px;
  background:rgba(255,255,255,.82); border:1px solid var(--line); border-radius:11px;
  padding:6px 10px; box-shadow:0 2px 8px rgba(36,49,43,.07) }
.meter-k{ font-size:8.5px; font-weight:800; letter-spacing:.14em; color:var(--green-d); flex:0 0 auto }
.meter-rail{ position:relative; flex:1; height:9px; border-radius:5px; background:rgba(36,49,43,.10); overflow:hidden }
.meter-fill{ position:absolute; inset:0 auto 0 0; width:0;
  background:linear-gradient(90deg,var(--blue),var(--green)); border-radius:5px }
.meter-v{ font-size:10px; font-weight:900; color:var(--green-d); width:34px; text-align:right;
  font-variant-numeric:tabular-nums }
.combo{ position:absolute; right:18px; top:96px; background:var(--accent); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.12em; padding:5px 11px; border-radius:9px;
  box-shadow:0 6px 16px rgba(245,165,36,.4) }
.combo b{ font-size:14px }

/* 章立て（HUDより控えめ） */
.chapters{ position:absolute; left:26px; right:26px; top:790px }
.ch-rail{ position:relative; height:2px; border-radius:2px; background:rgba(36,49,43,.10) }
.ch-fill{ position:absolute; left:0; top:0; height:2px; width:0; border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--green)) }
.ch-steps{ display:flex; justify-content:space-between; margin-top:5px }
.ch-steps span{ font-size:7px; letter-spacing:.10em; font-weight:700; color:var(--ink-2); opacity:.34 }
.concept{ position:absolute; left:0; right:0; top:818px; text-align:center;
  font-size:8px; letter-spacing:.18em; font-weight:700; color:var(--ink-2) }

/* ---------- RUSH ---------- */
.rush-title{ position:absolute; left:0; right:0; top:198px; text-align:center; white-space:nowrap;
  font-size:30px; font-weight:900; letter-spacing:.05em; color:#F4FFF8;
  text-shadow:0 0 26px rgba(127,211,168,.55) }
.rush-mission{ position:absolute; left:0; right:0; top:252px; text-align:center;
  font-size:12px; font-weight:800; letter-spacing:.30em; color:var(--green-l) }
.rush-lead{ position:absolute; left:0; right:0; top:278px; text-align:center;
  font-size:16px; font-weight:700; color:#E7F2EA }
.count{ position:absolute; left:0; right:0; top:356px; text-align:center;
  font-size:88px; font-weight:900; color:#F4FFF8; text-shadow:0 0 40px rgba(127,211,168,.6) }
.count.go{ font-size:70px; color:var(--accent); text-shadow:0 0 40px rgba(245,165,36,.6) }

/* ---------- 出題 ---------- */
.card{ position:absolute; left:75px; top:200px; width:240px; height:230px; border-radius:26px;
  background:#fff; box-shadow:var(--shadow); border:1px solid var(--line) }
.item-name{ position:absolute; left:0; right:0; top:444px; text-align:center;
  font-size:19px; font-weight:800; letter-spacing:.04em }
.qtimer{ position:absolute; left:18px; right:18px; top:636px; height:6px; border-radius:3px;
  background:rgba(36,49,43,.10); overflow:hidden }
.qtimer i{ display:block; height:6px; width:100%; border-radius:3px; background:var(--green) }
.choices{ position:absolute; left:0; right:0; top:650px; height:62px }
.choice{ position:absolute; top:0; width:110px; height:62px; border-radius:16px;
  background:#fff; border:2px solid var(--line); box-shadow:0 4px 14px rgba(36,49,43,.08);
  display:flex; align-items:center; justify-content:center; overflow:hidden }
.choice span{ position:relative; z-index:2; font-size:15px; font-weight:800; color:var(--ink) }
#ch0{ left:18px } #ch1{ left:140px } #ch2{ left:262px }
.choice.picked{ background:var(--green); border-color:var(--green-d); box-shadow:0 8px 22px rgba(46,158,107,.34) }
.choice.picked span{ color:#fff }
.choice.dim{ opacity:.4 }
.ripple{ position:absolute; left:50%; top:50%; width:200px; height:200px; margin:-100px 0 0 -100px;
  border-radius:50%; background:rgba(46,158,107,.25); opacity:0; transform:scale(0) }
.cursor{ position:absolute; left:0; top:0; width:46px; height:46px }
.cursor svg{ width:100%; height:100%; filter:drop-shadow(0 5px 10px rgba(36,49,43,.28)) }

/* ---------- 正解演出 ---------- */
.fb{ position:absolute; left:0; right:0; top:104px; text-align:center;
  font-size:52px; font-weight:900; letter-spacing:.02em; color:var(--green);
  text-shadow:0 8px 26px rgba(46,158,107,.22) }
.fb-add{ position:absolute; left:0; right:0; top:166px; text-align:center;
  font-size:22px; font-weight:900; color:var(--accent); letter-spacing:.06em }
.burst{ position:absolute; left:95px; top:215px; width:200px; height:200px }

/* ---------- WAIT! ---------- */
.wait{ position:absolute; left:0; right:0; top:236px; text-align:center; line-height:1;
  font-size:58px; font-weight:900; letter-spacing:.04em; color:#fff;
  text-shadow:0 6px 0 var(--amber),0 12px 34px rgba(242,133,30,.5) }
.wait-sub{ position:absolute; left:0; right:0; top:338px; text-align:center;
  font-size:19px; font-weight:800; color:#fff; text-shadow:0 3px 14px rgba(140,60,0,.6) }
/* MISSION CLEAR スタンプ */
.clear{ position:absolute; left:45px; top:262px; width:300px; border-radius:22px; padding:16px 14px 14px;
  background:#fff; border:3px solid var(--accent); box-shadow:0 18px 44px rgba(245,165,36,.32);
  text-align:center; transform-origin:50% 50% }
.clear-k{ font-size:13px; font-weight:900; letter-spacing:.20em; color:var(--ink-2) }
.clear-k b{ display:block; font-size:38px; letter-spacing:.04em; color:var(--green); line-height:1.15; margin-top:2px }
.clear-rank{ display:inline-flex; align-items:baseline; gap:8px; margin-top:8px; padding:6px 16px; border-radius:12px;
  background:linear-gradient(180deg,#FFF6DF,#FFE7B5); border:1px solid rgba(201,130,26,.35) }
.clear-rank span{ font-size:10px; font-weight:900; letter-spacing:.24em; color:var(--accent-d) }
.clear-rank b{ font-size:34px; font-weight:900; color:var(--accent-d); line-height:1 }
.clear-sub{ margin-top:8px; font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--ink-2) }
.clear2{ position:absolute; left:0; right:0; top:104px; text-align:center; transform-origin:50% 50% }
.clear2 span{ font-size:11px; font-weight:900; letter-spacing:.30em; color:var(--accent-d); margin-right:8px }
.clear2 b{ font-size:26px; font-weight:900; color:var(--green); letter-spacing:.04em }
/* 紙吹雪 */
.confetti{ position:absolute; left:0; top:0; width:0; height:0 }
.confetti i{ position:absolute; left:-5px; top:-7px; width:10px; height:14px; border-radius:2px }

/* ---------- 循環ゲート ---------- */
.gate{ position:absolute; left:45px; top:230px; width:300px; height:300px }
.gate svg{ width:100%; height:100% }
#gateArrow{ transform-origin:150px 150px }
.unlock{ position:absolute; left:0; right:0; top:138px; text-align:center; white-space:nowrap; line-height:1.1;
  font-size:22px; font-weight:900; letter-spacing:.02em; color:var(--green-d) }
.unlock-sub{ position:absolute; left:0; right:0; top:172px; text-align:center;
  font-size:20px; font-weight:800 }

/* ---------- RECYCLE LAB ---------- */
.stage-label{ position:absolute; left:0; right:0; top:108px; text-align:center;
  font-size:11px; font-weight:900; letter-spacing:.34em; color:var(--accent-d) }
.stage-name{ position:absolute; left:0; right:0; top:128px; text-align:center;
  font-size:25px; font-weight:900; letter-spacing:.10em }
.steps{ position:absolute; left:15px; right:15px; top:176px; height:30px }
.step{ position:absolute; top:0; width:84px; height:30px; border-radius:10px;
  background:rgba(255,255,255,.7); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center }
.step span{ font-size:13px; font-weight:800; letter-spacing:.08em; color:var(--ink-2) }
.step.on{ background:var(--green); border-color:var(--green-d) }
.step.on span{ color:#fff }
.step.done{ background:rgba(46,158,107,.16); border-color:rgba(46,158,107,.3) }
#st0{left:0} #st1{left:92px} #st2{left:184px} #st3{left:276px}
.lab-art{ position:absolute; left:105px; top:236px; width:180px; height:180px }
.lab-art svg{ width:100%; height:100% }
.water{ position:absolute; left:75px; top:250px; width:240px; height:200px; border-radius:24px;
  background:radial-gradient(60% 60% at 50% 40%,rgba(143,211,244,.85),rgba(79,179,232,.25) 70%,rgba(79,179,232,0)) }
.act-label{ position:absolute; left:0; right:0; top:462px; text-align:center;
  font-size:17px; font-weight:800; color:var(--green-d); letter-spacing:.10em }
.hold{ position:absolute; left:95px; top:700px; width:200px }
.hold-rail{ position:relative; height:14px; border-radius:8px; background:rgba(36,49,43,.12); overflow:hidden }
.hold-fill{ position:absolute; inset:0 auto 0 0; width:0; border-radius:8px;
  background:linear-gradient(90deg,var(--accent),var(--green)) }
.hold-k{ margin-top:5px; text-align:center; font-size:9px; font-weight:900; letter-spacing:.24em; color:var(--ink-2) }
.swipe{ position:absolute; left:135px; top:690px; width:120px; height:40px }
.swipe svg{ width:100%; height:100% }

/* ---------- INVENTORY / CRAFT / BUILD ---------- */
.mat{ display:inline-block; width:14px; height:14px; border-radius:4px; vertical-align:middle }
.mat-pet{ background:#4FB3E8 } .mat-alu{ background:#9AA8B3 } .mat-paper{ background:#E0B77A }
.mat-plastic{ background:#7FC9A6 } .mat-textile{ background:#C87FA6 } .mat-organic{ background:#8FBF6B }
.slot span{ font-size:7px }
.inv{ position:absolute; left:20px; right:20px; top:112px; border-radius:16px; padding:8px 10px 9px;
  background:rgba(255,255,255,.94); border:1px solid var(--line); box-shadow:0 8px 22px rgba(36,49,43,.12) }
.inv-k{ font-size:9px; font-weight:900; letter-spacing:.22em; color:var(--ink-2); text-align:center }
.inv-slots{ display:flex; gap:6px; margin-top:6px }
.slot{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0 5px; border-radius:10px;
  background:rgba(36,49,43,.05); border:1px solid rgba(36,49,43,.08); transition:transform .12s }
.slot b{ font-size:16px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums }
.slot span{ font-size:7.5px; font-weight:800; letter-spacing:.10em; color:var(--ink-2) }
.slot.is-on{ background:rgba(79,179,232,.14); border-color:rgba(79,179,232,.5) }
.slot.is-pop{ transform:scale(1.18) }
.craft{ position:absolute; left:26px; right:26px; top:638px; border-radius:18px; padding:9px 12px 12px;
  background:#fff; border:2px solid rgba(46,158,107,.35); box-shadow:0 14px 34px rgba(36,49,43,.16) }
.craft-k{ font-size:10px; font-weight:900; letter-spacing:.24em; color:var(--green-d); text-align:center }
.recipe{ display:flex; align-items:center; gap:8px; margin-top:7px; flex-wrap:wrap }
.recipe .craft-btn{ flex:1 1 100%; text-align:center; margin-top:8px; padding:9px 10px }
.rc-in{ display:flex; align-items:center; gap:5px; padding:7px 8px; border-radius:12px; background:rgba(79,179,232,.12);
  border:1px solid rgba(79,179,232,.4); flex:0 0 auto }
.rc-in b{ font-size:12px; font-weight:900; white-space:nowrap }
.rc-arrow{ font-size:14px; font-weight:900; color:var(--ink-2); flex:0 0 auto }
.rc-out{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:6px }
.rc-out svg{ width:38px; height:24px; flex:0 0 38px }
.rc-out > div{ min-width:0 }
.rc-out b{ display:block; font-size:12px; font-weight:900; white-space:nowrap }
.rc-out .vtag{ margin-top:3px; font-size:7.5px; letter-spacing:.02em; white-space:nowrap; padding:2px 6px 2px 17px }
.craft-btn{ flex:0 0 auto; font-size:10px; font-weight:900; letter-spacing:.12em; color:#fff; background:var(--green);
  border-radius:10px; padding:10px 10px; box-shadow:0 6px 14px rgba(46,158,107,.35) }
.craft-btn.is-done{ background:var(--green-d) }
#tileGrid rect{ transform-box:fill-box; transform-origin:center }
.tile{ fill:rgba(255,255,255,.55); stroke:rgba(46,158,107,.55); stroke-width:2; stroke-dasharray:4 3 }
.tile.is-hot{ fill:rgba(46,158,107,.35); stroke:var(--green); stroke-dasharray:none; stroke-width:3 }

/* ---------- NEXT LIFE ---------- */
.nl-title{ position:absolute; left:0; right:0; top:640px; text-align:center;
  font-size:12px; font-weight:900; letter-spacing:.34em; color:var(--ink-2) }
.nl-sub{ position:absolute; left:0; right:0; top:666px; text-align:center; white-space:nowrap;
  font-size:19px; font-weight:900 }
.nl-note{ position:absolute; left:0; right:0; top:702px; text-align:center;
  font-size:10.5px; color:var(--ink-2) }

/* ---------- 報酬トースト ---------- */
.get,.lv{ position:absolute; left:65px; width:260px; border-radius:18px;
  background:linear-gradient(180deg,#FFFDF6,#F6F0E0); border:2px solid var(--accent);
  box-shadow:0 12px 30px rgba(245,165,36,.28); padding:10px 12px; text-align:center }
.get{ top:112px } .lv{ top:112px }
.get-k,.lv-k{ font-size:11px; font-weight:900; letter-spacing:.16em; color:var(--accent-d) }
.get-v{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:4px }
.get-v svg{ width:26px; height:26px }
.get-v span{ font-size:19px; font-weight:900 }
.lv-v{ font-size:17px; font-weight:900; margin-top:3px; letter-spacing:.02em; white-space:nowrap }
.town-note{ position:absolute; left:0; right:0; top:396px; text-align:center;
  font-size:15px; font-weight:700; color:var(--ink-2) }

/* ---------- TOWN ---------- */
.town{ position:absolute; left:0; right:0; top:452px; height:392px; background:#C2E0BC }
.town-svg{ width:390px; height:340px; display:block }
#tBench{transform-origin:186px 302px} #tTree{transform-origin:109px 308px}
#tFlower{transform-origin:200px 300px} #tLamp{transform-origin:313px 308px}
.matchip{ position:absolute; left:50%; top:0; width:40px; height:40px; margin-left:-20px }
.matchip svg{ width:100%; height:100%; filter:drop-shadow(0 4px 10px rgba(79,179,232,.6)) }

/* ---------- 素材の行き先（循環ストーリー）＋3層ラベル ---------- */
.spot{ position:absolute; left:138px; top:683px; width:96px; height:96px; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,236,170,.85) 0%,rgba(255,214,110,.35) 55%,rgba(255,214,110,0) 72%);
  box-shadow:0 0 0 4px rgba(245,165,36,.6) inset }
.story{ position:absolute; left:24px; right:24px; top:298px; border-radius:20px; padding:12px 14px;
  background:rgba(255,255,255,.96); border:1px solid var(--line); box-shadow:0 12px 30px rgba(36,49,43,.16);
  display:flex; align-items:center; gap:12px }
.story-icon{ width:52px; height:34px; flex:0 0 52px }
.story-body{ flex:1 }
.story-t{ font-size:14.5px; font-weight:800; line-height:1.5 }
.story-meta{ display:flex; align-items:center; gap:8px; margin-top:7px; flex-wrap:wrap }
.story-src{ font-size:9px; color:var(--ink-2) }
.vtag{ display:inline-block; font-size:9px; font-weight:900; letter-spacing:.10em;
  padding:3px 8px 3px 20px; border-radius:7px; position:relative }
.vtag::before{ content:''; position:absolute; left:7px; top:50%; width:8px; height:8px; margin-top:-4px }
/* 3層ラベル : 色 ＋ 形（アイコン）で常時区別する */
.vtag.is-verified{ background:rgba(46,158,107,.14); color:var(--green-d); border:1px solid rgba(46,158,107,.45) }
.vtag.is-verified::before{ background:var(--green); border-radius:50%;
  box-shadow:inset 0 0 0 1.5px #fff, 0 0 0 1.5px var(--green) }          /* ● 二重丸＝一次情報 */
.vtag.is-local   { background:rgba(79,179,232,.14); color:var(--blue-d);  border:1px solid rgba(79,179,232,.45) }
.vtag.is-local::before{ background:var(--blue); border-radius:2px }        /* ■ 四角＝地域事例 */
.vtag.is-general { background:rgba(36,49,43,.06);   color:var(--ink-2);   border:1px solid rgba(36,49,43,.18) }
.vtag.is-general::before{ background:none; border:1.5px dashed #9AA49E; border-radius:50%; width:9px; height:9px;
  margin-top:-4.5px }                                                     /* ○ 破線＝一般例 */

/* ---------- WORLD : ズームアウト ---------- */
.world{ position:absolute; left:0; right:0; top:170px; height:390px }
.world svg{ width:390px; height:390px; display:block }
#wCity,#wPref,#wJapan{ transform-origin:195px 195px }
.world text{ font-family:inherit; font-weight:800; text-anchor:middle; fill:var(--ink) }
.alabel rect{ fill:#fff; stroke:rgba(36,49,43,.14); stroke-width:2 }
.alabel text{ font-size:12px }
.tpin path,.tpin circle{ fill:var(--green) }
.tpin circle{ fill:var(--green) }
.lpin rect{ fill:#EFEBE1; stroke:rgba(36,49,43,.16); stroke-width:2 }
.lpin text{ font-size:12.5px; fill:#7E867F; text-anchor:start }
.lpin .lt{ font-size:8.5px; letter-spacing:.14em; fill:#A9B0AA }
.lpin .lk{ fill:none; stroke:#8C948E; stroke-width:2.6 }
.lpin .lkb{ fill:#8C948E }
.wchip{ position:absolute; left:0; right:0; top:112px; text-align:center }
.wchip b{ display:inline-block; font-size:17px; font-weight:900; letter-spacing:.20em; color:var(--green-d);
  background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:12px; padding:6px 14px;
  box-shadow:0 4px 12px rgba(36,49,43,.08) }
.wchip i{ display:inline-block; margin-left:7px; font-style:normal; font-size:11px; font-weight:900;
  letter-spacing:.08em; color:#fff; background:var(--accent); border-radius:8px; padding:5px 8px }
.lock-note{ position:absolute; left:0; right:0; top:588px; text-align:center;
  font-size:17px; font-weight:800; color:var(--ink-2) }
.wtrace{ position:absolute; left:20px; right:20px; top:596px; text-align:center; line-height:1.5;
  font-size:23px; font-weight:900 }
/* 探索カット */
.find-note{ position:absolute; left:0; right:0; top:236px; text-align:center;
  font-size:21px; font-weight:900 }

/* 都道府県対抗（対戦画面） */
.cup{ position:absolute; left:28px; top:590px; width:334px; border-radius:18px; padding:11px 14px 12px;
  background:rgba(255,255,255,.95); border:1px solid var(--line); text-align:center;
  box-shadow:0 12px 30px rgba(36,49,43,.16) }
.cup-k{ font-size:11px; font-weight:900; letter-spacing:.22em; color:var(--accent-d) }
.cup-theme{ font-size:12px; font-weight:800; margin-top:3px; color:var(--ink-2) }
.vs{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-top:9px }
.vs-side{ flex:1 }
.vs-name{ font-size:15px; font-weight:900 }
.vs-val{ font-size:24px; font-weight:900; color:var(--green-d); line-height:1.15;
  font-variant-numeric:tabular-nums }
.vs-bar{ height:7px; border-radius:4px; background:rgba(36,49,43,.10); overflow:hidden; margin-top:4px }
.vs-bar i{ display:block; height:7px; width:0; border-radius:4px;
  background:linear-gradient(90deg,var(--blue),var(--green)) }
.vs-mid{ flex:0 0 34px; font-size:15px; font-weight:900; color:var(--accent-d); letter-spacing:.06em;
  padding-top:14px }
.cup-lead{ margin-top:8px; font-size:14px; font-weight:900; color:var(--accent-d) }
.cup-note{ font-size:9px; color:var(--ink-2); margin-top:5px }
.tlegend{ position:absolute; left:0; right:0; top:556px; text-align:center; font-size:0 }
.tlegend i{ display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--green);
  vertical-align:middle; margin-right:6px }
.tlegend b{ font-size:10px; font-weight:900; letter-spacing:.16em; color:var(--green-d); vertical-align:middle }
.tlegend span{ font-size:11px; color:var(--ink-2); margin-left:8px; vertical-align:middle }

/* ---------- PARTNER ---------- */
.pstage{ position:absolute; left:95px; top:176px; width:200px; height:264px; border-radius:24px;
  background:linear-gradient(180deg,#FFFDF7,#F3EEE0); border:2px dashed rgba(46,158,107,.5);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px }
.pstage-tag{ font-size:9.5px; font-weight:900; letter-spacing:.24em; color:var(--green-d) }
.pstage-art{ width:110px; height:110px }
.pstage-name{ font-size:19px; font-weight:800 }
.pstage-note{ font-size:10.5px; color:var(--ink-2); font-weight:700 }
.pstage-go{ font-size:10px; font-weight:900; letter-spacing:.18em; color:#fff;
  background:var(--green); border-radius:9px; padding:6px 16px; margin-top:4px }
.grid{ position:absolute; left:26px; top:230px; width:338px; height:232px }
.gcard{ position:absolute; width:106px; height:110px; border-radius:16px; background:#fff;
  border:1px solid var(--line); box-shadow:0 6px 16px rgba(36,49,43,.08);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px }
.gcard svg{ width:58px; height:58px }
.gcard span{ font-size:9.5px; font-weight:700; color:var(--ink-2) }
#gc0{left:0;top:0} #gc1{left:116px;top:0} #gc2{left:232px;top:0}
#gc3{left:0;top:122px} #gc4{left:116px;top:122px} #gc5{left:232px;top:122px}
.gcard.is-you{ background:linear-gradient(180deg,#F2FBF6,#E4F5EC); border:2px dashed var(--green) }
.gcard.is-you .q{ font-size:36px; font-weight:900; color:var(--green); line-height:1 }
.gcard.is-you span{ color:var(--green-d); font-weight:900; letter-spacing:.02em; font-size:9px; line-height:1.2 }
.yp-jp{ position:absolute; left:20px; right:20px; top:492px; text-align:center; line-height:1.45;
  font-size:17px; font-weight:800 }
.biz{ position:absolute; left:20px; right:20px; top:566px; text-align:center;
  font-size:26px; font-weight:900; line-height:1.42 }

/* ---------- END ---------- */
.logo{ position:absolute; left:0; right:0; top:148px; display:flex; flex-direction:column;
  align-items:center; gap:8px }
.logo-mark{ width:68px; height:68px }
.logo-jp{ font-size:36px; font-weight:900; letter-spacing:.08em; text-indent:.08em; line-height:1.1; margin-top:4px }
.logo-word{ font-size:14px; font-weight:800; letter-spacing:.38em; text-indent:.38em; color:var(--ink-2) }
.end-main{ position:absolute; left:0; right:0; top:302px; text-align:center;
  font-size:23px; font-weight:800 }
.end-sub{ position:absolute; left:0; right:0; top:344px; text-align:center;
  font-size:19px; font-weight:800; color:var(--green-d) }
.end-scrim{ position:absolute; left:0; right:0; top:716px; height:128px; pointer-events:none;
  background:linear-gradient(180deg,rgba(251,247,239,0) 0%,rgba(251,247,239,.86) 46%,rgba(251,247,239,.97) 100%) }
.end-tag{ position:absolute; left:0; right:0; top:782px; text-align:center;
  font-size:11px; font-weight:700; letter-spacing:.26em; color:var(--green-d) }
.end-fp{ position:absolute; left:0; right:0; top:810px; text-align:center;
  font-size:8.5px; letter-spacing:.20em; color:var(--ink-2) }

/* ---------- モノ ---------- */
.obj{ position:absolute; left:195px; top:0; width:120px; height:300px; margin-left:-60px;
  transform-origin:50% 50% }
.objsvg{ width:100%; height:100%; overflow:visible; display:block;
  filter:drop-shadow(0 6px 14px rgba(36,49,43,.14)) }
#bBody,#bLabel,#bCap{ transform-origin:60px 150px }
.flake{ position:absolute; left:60px; top:150px; width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:3px; background:var(--blue) }
.blob-core{ position:absolute; left:60px; top:150px; width:110px; height:110px; margin:-55px 0 0 -55px;
  border-radius:50%; background:radial-gradient(50% 50% at 50% 42%,#EAF7FF 0%,#8FD3F4 46%,#4FB3E8 100%);
  box-shadow:0 0 44px rgba(79,179,232,.55) }
.spark{ position:absolute; left:60px; top:150px; width:10px; height:10px; margin:-5px 0 0 -5px;
  background:conic-gradient(from 0deg,transparent 0 42%,#FFD37A 46% 54%,transparent 58% 100%),
             conic-gradient(from 90deg,transparent 0 42%,#FFF3D0 46% 54%,transparent 58% 100%);
  border-radius:2px }
.shine{ position:absolute; left:6px; top:20px; width:34px; height:280px;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 100%);
  filter:blur(3px); border-radius:20px }

/* ---------- キャラクター ---------- */
.chara{ position:absolute; left:195px; top:0; width:120px; margin-left:-60px;
  transform-origin:50% 100% }
.chara svg{ width:100%; height:auto; display:block; overflow:visible;
  filter:drop-shadow(0 8px 14px rgba(36,49,43,.18)) }
.ch-yg svg{ height:200px } .ch-ol svg{ height:210px }
.pv-yg-hip { transform-origin:60px 130px }
.pv-yg-hipF{ transform-origin:67px 126px }
.pv-yg-hipB{ transform-origin:53px 126px }
.pv-yg-shF { transform-origin:82px 86px }
.pv-yg-shB { transform-origin:37px 86px }
.pv-yg-neck{ transform-origin:60px 68px }
.pv-ol-hip { transform-origin:60px 126px }
.pv-ol-hipF{ transform-origin:68px 124px }
.pv-ol-hipB{ transform-origin:53px 124px }
.pv-ol-shF { transform-origin:82px 78px }
.pv-ol-shB { transform-origin:37px 78px }
.pv-ol-neck{ transform-origin:60px 60px }
.fx{ display:none }

/* ---------- 開発者用コントロール ---------- */
#controls{ position:fixed; left:0; right:0; bottom:0; padding:10px 14px 14px;
  background:rgba(10,16,14,.86); backdrop-filter:blur(8px); color:#E9E3D6;
  font-size:11px; display:flex; flex-direction:column; gap:8px; z-index:100 }
body.record #controls{ display:none !important }
.ctl-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.ctl{ font:inherit; font-weight:700; letter-spacing:.06em; color:#E9E3D6;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  padding:7px 12px; border-radius:9px; cursor:pointer }
.ctl:hover{ background:rgba(255,255,255,.16) }
.ctl.is-on{ background:var(--green); border-color:var(--green); color:#fff }
#seek{ flex:1; min-width:180px; accent-color:var(--green) }
#clock{ width:52px; text-align:right; font-variant-numeric:tabular-nums }
#sceneName{ width:120px; color:#9FE3C0; letter-spacing:.08em }
.ctl-hint{ opacity:.5 } .ctl-hint a{ color:#9FE3C0 }
/* スマホ幅：操作パネルを低くして映像を隠さない */
@media (max-width:480px){
  #controls{ padding:8px 10px 10px; gap:6px; font-size:10px }
  .ctl{ padding:6px 9px; letter-spacing:.03em }
  .ctl-hint{ display:none }
  #seek{ min-width:120px } #clock{ width:44px } #sceneName{ width:auto; min-width:52px }
}
#sprites{ position:absolute; width:0; height:0; overflow:hidden }