/* ===================== 基本 ===================== */
:root{
  --bg:#12131f; --bg2:#1b1d2e; --panel:rgba(24,26,42,.92);
  --line:rgba(255,255,255,.12); --tx:#eef1f8; --dim:#9aa3bd;
  --gold:#f7c948; --good:#7bd88f; --bad:#ff6b7e;
  --vh:100vh;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden}
body{
  background:radial-gradient(1400px 900px at 30% -10%,#33385c 0%,#1a1c2c 62%);
  color:var(--tx);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
/* スマホの長押しで「コピー」「調べる」「画像を保存」が出ないようにする */
img,svg,svg *,canvas{-webkit-touch-callout:none;-webkit-user-drag:none}
/* 名前の入力欄だけは、ふつうに選べるようにしておく */
input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.screen{display:none;position:fixed;inset:0;height:var(--vh)}
.screen.show{display:block}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none}

/* ===================== タイトル ===================== */
#title{overflow-y:auto;display:none}
#title.show{display:flex;align-items:center;justify-content:center}
.title-inner{width:min(440px,92vw);text-align:center;padding:28px 0}
.tlogo{font-size:64px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10px) rotate(8deg)}}
#title h1{
  margin:6px 0 2px;font-size:38px;letter-spacing:.06em;
  background:linear-gradient(180deg,#fff 20%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 4px 18px rgba(247,201,72,.25);
}
.tsub{margin:0 0 22px;color:var(--dim);font-size:13px;letter-spacing:.16em}
.yearsel{margin:0 0 18px}
.ylabel{display:block;font-size:12px;color:var(--dim);margin-bottom:8px}
.ybtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.yearbtn{
  padding:9px 20px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid var(--line);font-size:14px;font-weight:700;
}
.yearbtn.on{background:var(--gold);color:#20180a;border-color:var(--gold)}
.tbtn{
  display:block;width:100%;margin:9px 0;padding:15px;border-radius:14px;
  background:rgba(255,255,255,.08);border:1px solid var(--line);
  font-size:17px;font-weight:800;transition:transform .1s;
}
.tbtn small{display:block;font-size:11px;font-weight:500;color:var(--dim);margin-top:3px}
.tbtn:active{transform:scale(.97)}
.tbtn.main{background:linear-gradient(180deg,#ffd75e,#e9a81f);color:#221a05;border:none;box-shadow:0 6px 0 #a97a10}
.tbtn.main:active{box-shadow:0 2px 0 #a97a10;transform:translateY(4px)}
.tbtn.ghost{background:none;font-size:14px;font-weight:600;color:var(--dim)}
.tnote{margin-top:20px;font-size:11.5px;line-height:1.9;color:var(--dim)}
/* 販売に必要な3ページへの案内（2026-09-14）。本文より一段落とした小ささにする */
.tlinks{margin-top:14px;font-size:11px;line-height:2;color:var(--dim);
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.tlinks a{color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.tlinks a:hover{color:var(--gold)}

/* ===================== マップ ===================== */
/* 海は別レイヤーにして、盤面の再描画に巻き込まれないようにする */
#sea{position:absolute;inset:0;transform:translateZ(0);
  background:radial-gradient(120% 100% at 50% 40%,#1d4a63 0%,#12354b 55%,#08202f 100%)}
#sceneryLayer{
  position:absolute;left:0;top:0;pointer-events:none;
  transform-origin:0 0;will-change:transform;
}
#sceneryLayer > svg{display:block;overflow:visible}
/* 全体表示用に風景を焼いたビットマップ（UI._buildSceneryFar、2026-09-09） */
#sceneryFar{position:absolute;left:0;top:0;pointer-events:none;transform-origin:0 0;will-change:transform}
#map{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
#map:active{cursor:grabbing}

/* 全体表示（🗺️）のあいだだけ出す、拡大率に左右されないプレイヤー位置の目印 */
#overviewLayer{position:absolute;inset:0;pointer-events:none;display:none}
#overviewLayer.show{display:block}
.ov-pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;
  gap:2px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.ov-face{width:30px;height:30px;border-radius:50%;border:2.5px solid var(--c);
  background:#12131c center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:16px}
.ov-tail{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:8px solid var(--c);margin-top:-3px}
.ov-dist{font-size:10px;font-weight:800;color:#fff;background:rgba(10,12,20,.75);
  border:1px solid var(--c);border-radius:8px;padding:1px 6px;white-space:nowrap;margin-top:2px}
/* 全体表示でも、ヤミガミが誰に憑いているか分かるように（2026-09-06） */
.ov-pin.yami .ov-face{border-color:#b45cff;box-shadow:0 0 9px rgba(180,92,255,.8)}
.ov-yami{position:absolute;top:-5px;right:-5px;font-size:13px;line-height:1;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));animation:bob2 .9s ease-in-out infinite}
/* 全体表示で、目的地・ゴーレムの位置も常に分かるように（2026-09-05） */
.ov-goal-pin{position:absolute;transform:translate(-50%,-100%);font-size:30px;
  filter:drop-shadow(0 0 8px rgba(247,201,72,.9)) drop-shadow(0 2px 5px rgba(0,0,0,.6));
  animation:glow 1.4s ease-in-out infinite;pointer-events:none}
.ov-golem-pin{position:absolute;transform:translate(-50%,-100%);font-size:28px;
  filter:drop-shadow(0 0 7px rgba(255,90,60,.85)) drop-shadow(0 2px 5px rgba(0,0,0,.6));
  animation:bob2 .9s ease-in-out infinite;pointer-events:none}
/* 鬼（ゴーレムの強化版）。ゴーレムと同時に出ることもあるので、色で見分けられるようにする（2026-09-10） */
.ov-oni-pin{position:absolute;transform:translate(-50%,-100%);font-size:28px;
  filter:drop-shadow(0 0 8px rgba(230,10,10,.9)) drop-shadow(0 2px 5px rgba(0,0,0,.6));
  animation:bob2 .8s ease-in-out infinite;pointer-events:none}
/* 古龍討伐イベント中は、目的地ピン(金色)の代わりに紫で光らせて見分けられるようにする（2026-09-09） */
.ov-goal-pin.dragon{filter:drop-shadow(0 0 9px rgba(150,60,220,.95)) drop-shadow(0 2px 5px rgba(0,0,0,.6))}
/* 目的地が決まった直後だけ、矢印つきで強くアピールする（2026-09-06） */
.ov-goal-arrow{position:absolute;left:100%;top:50%;transform:translateY(-50%);
  margin-left:4px;font-size:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));
  animation:goalArrowPoke .7s ease-in-out infinite}
@keyframes goalArrowPoke{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(8px)}}
.tile-bg{stroke:rgba(0,0,0,.35);stroke-width:4.8}
.tile-ic{font-size:33.6px;text-anchor:middle;pointer-events:none}
.city-bg{fill:#2b2f4d;stroke:#6a7099;stroke-width:2.5}
.tile.goal .city-bg{fill:#4a3a12;stroke:var(--gold);stroke-width:4;filter:drop-shadow(0 0 14px rgba(247,201,72,.95));animation:glow 1.4s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:1}50%{opacity:.68}}
/* ゴーレムの跡地：拾われるまで、目的地マスと同じ金色の輝きで光らせる */
.golem-loot .city-bg,.golem-loot .tile-bg{
  stroke:var(--gold);stroke-width:4.5;filter:drop-shadow(0 0 14px rgba(247,201,72,.95));
  animation:glow 1.4s ease-in-out infinite;
}
/* 鬼の跡地：ゴーレムの跡地（金色）と見分けられるよう、不穏な赤で光らせる（2026-09-10） */
.oni-loot .city-bg,.oni-loot .tile-bg{
  stroke:#e60a0a;stroke-width:4.5;filter:drop-shadow(0 0 14px rgba(230,10,10,.9));
  animation:glow 1.4s ease-in-out infinite;
}
/* 妨害岩でふさがれたマス：跡地の光らせ方(golem/oni-loot)を踏襲しつつ、通れないマスと分かる茶色で（2026-09-07） */
.rock-block .city-bg,.rock-block .tile-bg{
  stroke:#8a6d45;stroke-width:4.5;filter:drop-shadow(0 0 12px rgba(120,90,50,.9));
  animation:glow 1.4s ease-in-out infinite;
}
.rock-ic{font-size:30px;text-anchor:middle;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.65))}
/* 古龍討伐イベント中の案内先：目的地マスと同じ発想だが、古龍の色(紫)で光らせて見分けられるようにする（2026-09-09） */
.dragon-target .city-bg,.dragon-target .tile-bg{
  stroke:#8a2fc9;stroke-width:4.5;filter:drop-shadow(0 0 14px rgba(150,60,220,.95));
  animation:glow 1.4s ease-in-out infinite;
}
/* いま動いている人が、今どのマスにいるかを一目で分かるように、動かした本人の色で光らせる（2026-09-08） */
.here-glow .city-bg,.here-glow .tile-bg{
  stroke:var(--here-color,#fff);stroke-width:5.5;filter:drop-shadow(0 0 14px var(--here-color,#fff));
  animation:glow 1s ease-in-out infinite;
}
/* 目的地から広がる輪（ズームアウトしていても目立つように、マスそのものより大きい） */
.goal-ring{fill:none;stroke:var(--gold);stroke-width:5;opacity:0;pointer-events:none}
.tile.goal .goal-ring{animation:goalPing 1.8s cubic-bezier(.15,.6,.35,1) infinite}
.tile.goal .goal-ring-b{animation-delay:.9s}
@keyframes goalPing{0%{r:34;stroke-width:7;opacity:.85}100%{r:110;stroke-width:0;opacity:0}}
.city-ic{font-size:17px;text-anchor:middle}
.city-nm{font-size:11.5px;font-weight:800;fill:#fff;text-anchor:middle}
.crown{font-size:15px;text-anchor:middle}
.flag{font-size:18px;text-anchor:middle}
.dot{stroke:rgba(0,0,0,.4);stroke-width:1}
.token{transition:transform .14s linear;pointer-events:none}
/* 縁取りは駒の背景円だけに付ける。:not(.tk-yami-aura) を外すと、変身後のオーラの円にも
   同じ線が乗ってしまい、アイコンの外側に黒い丸枠が出る（実際に出た、2026-09-11） */
.token.active circle:not(.tk-yami-aura){stroke:#fff;stroke-width:6.36}
/* ヤミガミが憑いているあいだは、白い縁取りが不気味な絵と喧嘩するので出さない（2026-09-08） */
.token.active.has-yami circle:not(.tk-yami-aura){stroke:#12131c}
.tk-ic{font-size:39.6px;text-anchor:middle;pointer-events:none}
/* 空路・海路で渡っているあいだの乗り物イラスト（2026-09-08） */
.tk-vehicle{pointer-events:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.tk-yami{font-size:17px;text-anchor:middle;animation:bob2 .9s ease-in-out infinite}
@keyframes bob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* 進む方向の矢印。目的地に近づく道だけ金色で脈打たせ、遠回りは控えめにする
   （2026-09-02 矢印アイコンを1.2倍に拡大） */
.dirbtn .dir-bg{fill:#4d5878;stroke:rgba(255,255,255,.75);stroke-width:3}
.dirbtn .dir-ar{fill:#e8edf7}
.dirbtn .dir-lbl{
  font-size:18px;font-weight:900;text-anchor:middle;fill:#c2cbe2;
  paint-order:stroke;stroke:#10131f;stroke-width:4;stroke-linejoin:round;
}
.dirbtn.best .dir-bg{fill:var(--gold);stroke:#fff;stroke-width:4.2;animation:pulse 1s ease-in-out infinite}
.dirbtn.best .dir-ar{fill:#241c05}
.dirbtn.best .dir-lbl{fill:var(--gold);font-size:20.4px}
@keyframes pulse{0%,100%{r:27.6}50%{r:32.4}}
/* 以前は3行の帯だったが、下のコマンド類と重なりやすかったので1行にまとめた */
.hint-rem{font-size:12.5px;font-weight:800}
.hint-rem::before{content:'・'}
.hint-rem b{font-size:15px;color:#5c3d00}
.hint-sub{font-weight:700;opacity:.78;font-size:11.5px}
.hint-sub::before{content:'・'}

/* ===================== 上部バー ===================== */
#topbar{
  position:absolute;top:0;left:0;right:0;display:flex;gap:8px;align-items:center;
  padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;
  background:linear-gradient(180deg,rgba(10,11,20,.9),transparent);pointer-events:none;
}
#topbar>*{pointer-events:auto}
.calbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 12px;text-align:center;min-width:96px}
#cal{font-size:15px;font-weight:800}
#calSub{font-size:10px;color:var(--dim)}
.goalbox{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--gold);border-radius:12px;padding:6px 12px;max-width:230px}
.gl-flag{font-size:19px}
/* 目的地の方角を常に指す矢印。➤ の既定向き(右)を0degとして回転させる */
.gl-arrow{display:inline-block;font-size:15px;color:#ffd166;transition:transform .35s ease,opacity .3s;text-shadow:0 0 4px rgba(255,209,102,.6)}
.gl-body{text-align:left;overflow:hidden}
.gl-body b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-body small{font-size:10.5px;color:var(--gold)}
.tools{margin-left:auto;display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.tool{background:var(--panel);border:1px solid var(--line);border-radius:10px;width:38px;height:36px;font-size:16px}
/* マップを動かして探しているあいだ、現在地に戻るボタンを光らせる */
.tool.attn{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 10px rgba(247,201,72,.6);animation:attnPulse 1.4s ease-in-out infinite}
@keyframes attnPulse{0%,100%{opacity:1}50%{opacity:.6}}
.tool.wide{width:auto;padding:0 10px;font-size:12px;font-weight:700}
.tool.roomtag{color:#9fe0ff;border-color:rgba(120,200,255,.45);letter-spacing:.06em}
.tool.roomtag.invite{color:#ffe08a;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 10px rgba(247,201,72,.6);animation:attnPulse 1.4s ease-in-out infinite}
/* 相手の操作をながめているだけの画面 */
.sheet.watching{border-color:rgba(140,175,255,.45);opacity:.97}
.sheet.watching .proplist{max-height:calc(var(--vh) * .42);overflow:auto}

/* ===================== プレイヤー ===================== */
#players{
  position:absolute;left:10px;top:96px;display:flex;flex-direction:column;gap:6px;
  width:212px;max-height:calc(var(--vh) - 220px);overflow:auto;
}
.pcard{
  display:flex;align-items:center;gap:7px;background:var(--panel);
  border:1px solid var(--line);border-left:4px solid var(--c);border-radius:11px;padding:6px 8px;cursor:pointer;
}
.pcard.on{background:rgba(60,66,110,.96);box-shadow:0 0 0 2px var(--c)}
.pc-rank{font-size:10px;font-weight:800;color:var(--gold);width:22px}
.pc-ic{font-size:19px}
.pc-body{min-width:0;flex:1}
.pc-name{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-money{font-size:13px;font-weight:800;color:var(--good)}
.pc-money.neg{color:var(--bad)}
.pc-sub{font-size:9.5px;color:var(--dim)}
.pc-a,.pc-b{display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dist{color:#a9b4cf}
.pc-dist.far,.rv-at.far{color:#c07bff;font-weight:800}
.yami-tag{background:#6b2d5c;color:#ffd8f4;font-size:8.5px;padding:1px 4px;border-radius:4px;margin-left:4px}

/* ===================== 演出 ===================== */
#turnTag{
  position:absolute;top:calc(env(safe-area-inset-top) + 54px);left:50%;transform:translateX(-50%);
  padding:4px 14px;border-radius:999px;font-size:12.5px;font-weight:800;color:#141420;
  box-shadow:0 3px 10px rgba(0,0,0,.4);
}
#speech{
  position:absolute;top:calc(env(safe-area-inset-top) + 86px);left:50%;transform:translateX(-50%) scale(.9);
  background:var(--panel);border:2px solid #fff;border-radius:12px;padding:7px 14px;font-size:13px;
  opacity:0;transition:.18s;pointer-events:none;white-space:nowrap;
}
#speech.show{opacity:1;transform:translateX(-50%) scale(1)}
#hint{
  position:absolute;bottom:var(--hintBottom,150px);left:50%;transform:translateX(-50%);
  background:rgba(247,201,72,.95);color:#231a04;padding:7px 18px;border-radius:999px;
  font-size:13px;font-weight:800;opacity:0;transition:opacity .2s;pointer-events:none;
  width:max-content;max-width:min(94vw,640px);box-sizing:border-box;text-align:center;
  display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:0 4px;white-space:nowrap;
}
#hint.show{opacity:1}
#dice{
  --ds:66px; --dz:33px;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);
  display:flex;gap:16px;align-items:center;opacity:0;transition:.16s;pointer-events:none;
}
#dice.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#dice::before{      /* 背景がごちゃついていても読めるように少し暗く落とす */
  content:'';position:absolute;left:50%;top:50%;width:340px;height:200px;
  transform:translate(-50%,-50%);border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(8,9,16,.72),rgba(8,9,16,0));
}

/* --- 立体サイコロ --- */
.die{width:var(--ds);height:var(--ds);flex:none;position:relative;perspective:560px}
.die::after{        /* 落ちた影 */
  content:'';position:absolute;left:6%;right:6%;bottom:-15px;height:11px;border-radius:50%;
  background:rgba(0,0,0,.5);filter:blur(7px);
}
.cube{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.face{
  position:absolute;inset:0;border-radius:calc(var(--ds)*.2);
  background:linear-gradient(145deg,#fffefa 0%,#f4eee2 55%,#ddd4c2 100%);
  border:1px solid rgba(90,75,50,.35);
  box-shadow:inset 0 0 14px rgba(120,105,80,.3);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:calc(var(--ds)*.12);
}
.pip{
  width:calc(var(--ds)*.185);height:calc(var(--ds)*.185);border-radius:50%;place-self:center;
  background:radial-gradient(circle at 34% 28%,#565a7a,#191b2b 72%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.22);
}
.pip.red{background:radial-gradient(circle at 34% 28%,#ff8272,#c4271f 72%)}
.f1{transform:translateZ(var(--dz))}
.f6{transform:rotateY(180deg) translateZ(var(--dz))}
.f2{transform:rotateY(90deg)  translateZ(var(--dz))}
.f5{transform:rotateY(-90deg) translateZ(var(--dz))}
.f3{transform:rotateX(90deg)  translateZ(var(--dz))}
.f4{transform:rotateX(-90deg) translateZ(var(--dz))}
.die.landed{animation:dieLand .28s cubic-bezier(.3,1.5,.5,1)}
@keyframes dieLand{0%{transform:translateY(-5px) scale(1.07)}100%{transform:none}}

/* 7以上（カードで進む数）は札で表示 */
.numchip{
  min-width:var(--ds);height:var(--ds);padding:0 12px;border-radius:calc(var(--ds)*.2);
  background:linear-gradient(145deg,#fffefa,#e6dcc6);color:#1a1c2c;
  font-size:calc(var(--ds)*.55);font-weight:900;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.5);
}
.dsum{font-size:26px;font-weight:900;color:var(--gold);text-shadow:0 3px 8px #000}
.banner{
  position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) scale(.85);
  background:rgba(16,18,32,.96);border:2px solid var(--gold);border-radius:16px;
  padding:14px 26px;text-align:center;opacity:0;transition:.18s;pointer-events:none;max-width:88vw;
}
.banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.banner.bad{border-color:var(--bad)} .banner.good{border-color:var(--good)}
.banner.card{border-color:#8ab4ff} .banner.buy{border-color:#ffb347}
.bn-main{font-size:17px;font-weight:800}
.bn-sub{font-size:12px;color:var(--dim);margin-top:4px}

/* ===================== 操作バー ===================== */
#actionBar{
  position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;justify-content:center;
  padding:12px 12px calc(env(safe-area-inset-bottom) + 14px);
  background:linear-gradient(0deg,rgba(10,11,20,.92),transparent);
  transform:translateY(120%);transition:.22s;
}
#actionBar.show{transform:translateY(0)}
.act{
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:14px 16px;font-size:14px;font-weight:800;position:relative;
}
.act.main{background:linear-gradient(180deg,#ffd75e,#e9a81f);color:#231a05;border:none;box-shadow:0 5px 0 #a97a10;font-size:16px;padding:14px 26px}
.act.main:active{box-shadow:0 1px 0 #a97a10;transform:translateY(4px)}
/* 資産の確認は大事な操作なので、行動バーの右端（右下）に常に出す */
.act.assets{margin-left:auto}

/* サイコロは自分の番だけ（操作バー自体はカード・資産の確認のため常時表示。2026-09-06） */
#actionBar #btnRoll.hide{opacity:.35;pointer-events:none}
.badge{background:var(--bad);color:#fff;font-size:10px;border-radius:999px;padding:1px 6px;margin-left:5px}

/* ===================== ログ ===================== */
#logPanel{
  position:absolute;right:10px;top:96px;width:250px;max-height:calc(var(--vh) - 230px);
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  display:none;flex-direction:column;overflow:hidden;
}
#logPanel.show{display:flex}
.lp-h{padding:7px 11px;font-size:12px;font-weight:800;border-bottom:1px solid var(--line)}
#logList{overflow:auto;padding:7px 11px;font-size:11px;line-height:1.75}
.logline{color:var(--dim)}
.logline.plus{color:var(--good)} .logline.minus{color:var(--bad)}
.logline.goal{color:var(--gold);font-weight:700} .logline.sys{color:#8ab4ff}

/* ===================== モーダル ===================== */
#overlay{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(6,7,14,.66);backdrop-filter:blur(3px);padding:16px;z-index:50;
}
#overlay.show{display:flex}
/* 自分の資産画面は専用のオーバーレイに出し、CPU/他プレイヤーの行動の演出(#overlay)より
   常に手前に来るようにする（2026-09-02：資産を見ている最中に演出で消されない） */
#assetOverlay{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(6,7,14,.66);backdrop-filter:blur(3px);padding:16px;z-index:60;
}
#assetOverlay.show{display:flex}
.sheet{
  width:min(400px,94vw);max-height:calc(var(--vh) * .86);overflow:auto;background:linear-gradient(180deg,#232741,#191c2e);
  border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:20px;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.6);animation:rise .2s ease-out;
}
@keyframes rise{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.sheet.wide{width:min(520px,96vw)}
/* 品ぞろえが多いと下までスクロールしないと「出る」が押せなかったので、
   スクロールしても常に見える位置に、小さい「出る」もあわせて置く */
.exit-top{
  position:sticky;top:-4px;display:block;width:fit-content;margin:-4px -4px 10px auto;
  background:rgba(255,255,255,.12);border:1px solid var(--line);border-radius:999px;
  padding:5px 13px;font-size:11.5px;font-weight:700;color:var(--tx);z-index:5;
}
.exit-top:active{background:rgba(255,255,255,.22)}
.sheet h2{margin:4px 0 10px;font-size:23px}
.sheet h3{margin:2px 0 10px;font-size:17px}
.sheet h3.good{color:var(--good)} .sheet h3.bad{color:var(--bad)}
.mtext{font-size:13.5px;line-height:1.8;color:#dfe4f2;margin:6px 0 12px}
.mtext.small{font-size:11.5px;color:var(--dim)}
.amount{font-size:26px;font-weight:900;margin:6px 0 14px}
.amount.good{color:var(--good)} .amount.bad{color:var(--bad)}
.btn{
  display:inline-block;padding:12px 26px;border-radius:12px;font-size:15px;font-weight:800;
  background:linear-gradient(180deg,#ffd75e,#e9a81f);color:#231a05;box-shadow:0 4px 0 #a97a10;margin-top:4px;
}
.btn:active{box-shadow:0 1px 0 #a97a10;transform:translateY(3px)}
.btn.ghost{background:rgba(255,255,255,.08);color:var(--tx);box-shadow:none;border:1px solid var(--line)}
.btn.full{display:block;width:100%;margin:8px 0}
.goalfx{font-size:60px;animation:bob 1.4s ease-in-out infinite}
.yamifx{font-size:56px;filter:drop-shadow(0 0 14px #b45cff);animation:bob2 .9s ease-in-out infinite}
.yamifx.small{font-size:42px}

/* カード一覧 */
.cardlist{display:flex;flex-direction:column;gap:7px;margin:6px 0 12px;text-align:left}
.cardbtn{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.cardbtn:active{background:rgba(255,255,255,.16)}
.cardbtn.dis{opacity:.5;pointer-events:none}
.cb-fare{flex:none;text-align:right;font-size:10px;color:var(--dim)}
.cb-fare b{display:block;font-size:13px;color:var(--tx);font-weight:800}
.cb-fare.bad b{color:var(--bad)}
.cb-ic{font-size:24px}
.cb-body b{display:block;font-size:13.5px}
.cb-body small{font-size:11px;color:var(--dim)}
.nums{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:10px 0 14px}
.numbtn{width:50px;height:48px;border-radius:11px;background:rgba(255,255,255,.08);border:1px solid var(--line);font-size:18px;font-weight:800;position:relative}
.numbtn.hint{background:var(--gold);color:#231a05}
.numbtn i{position:absolute;top:-6px;right:-4px;font-size:12px;font-style:normal}

/* 物件一覧 */
.cashline{font-size:13px;color:var(--dim);margin-bottom:10px}
.cashline b{color:var(--good);font-size:15px}
.cashline b.neg{color:var(--bad)}
.haggle{background:#2d5f3a;color:#c8ffd8;font-size:10px;padding:2px 7px;border-radius:5px;margin-left:8px}
.mono-tag{background:#6b5310;color:#ffe6a0;font-size:11px;padding:2px 8px;border-radius:6px;margin-left:6px}
.proplist{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;text-align:left}
.prow{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.prow.mini{padding:6px 9px}
.pr-ic{font-size:20px;width:24px;text-align:center}
.pr-body{flex:1;min-width:0}
.pr-body b{display:block;font-size:13px}
.pr-body small{font-size:10.5px;color:var(--dim);display:block;line-height:1.6}
.kind{color:#12131f;font-size:9px;font-weight:800;padding:1px 5px;border-radius:4px;margin-right:5px}
.pr-own{font-size:15px;width:30px;text-align:center}
.buybtn,.sellbtn{border-radius:9px;padding:7px 11px;font-size:12px;font-weight:800;line-height:1.2;min-width:70px}
.buybtn{background:linear-gradient(180deg,#7bd88f,#3ea55c);color:#0d2313}
.buybtn.alt{background:linear-gradient(180deg,#ffb37b,#e07b2f);color:#2a1405}
.buybtn.dis{background:rgba(255,255,255,.09);color:#7c86a3;pointer-events:none}
.buybtn.mute{background:rgba(255,255,255,.06);color:#7c86a3;border-style:dashed}   /* 買えなくはないが意味がない：タップすると案内が出る（クリックは可） */
.sellbtn{background:rgba(255,255,255,.1);border:1px solid var(--line)}
.buybtn small,.sellbtn small{display:block;font-size:9.5px;font-weight:600;opacity:.85}
.cityblock{background:rgba(255,255,255,.04);border-radius:10px;padding:7px}
.cb-h{font-size:12px;font-weight:800;margin:6px 0 5px;text-align:left;color:var(--gold)}

/* 資産パネルの分類タブ（農林・商業・工業・観光・特殊・お宝） */
.assettabs{display:flex;gap:5px;overflow-x:auto;margin:10px 0 12px;padding-bottom:2px}
.atab{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:11px;
  padding:7px 11px;min-width:52px}
.atab.on{background:rgba(255,214,120,.16);border-color:rgba(255,214,120,.55)}
.atab-ic{font-size:19px}
.atab-lb{font-size:10px;color:var(--dim)}
.atab.on .atab-lb{color:var(--gold)}
.atab-n{font-size:11px;font-weight:800}

/* 決算 */
table.settle{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0 12px}
table.settle th{color:var(--dim);font-size:10.5px;font-weight:600;padding:4px 3px;border-bottom:1px solid var(--line)}
table.settle td{padding:7px 3px;border-bottom:1px solid rgba(255,255,255,.07);text-align:right}
table.settle td.nm,table.settle td.rk{text-align:left;font-weight:800;white-space:nowrap}
table.settle td.plus{color:var(--good)}
table.settle td.neg{color:var(--bad)}
table.settle td.small{font-size:10px;color:var(--dim)}
table.settle.final td{padding:10px 3px;font-size:13.5px}
.ranknow{font-size:11.5px;color:var(--dim);margin-bottom:12px}
.help{text-align:left;font-size:12.5px;line-height:1.95;color:#dde2f0}
.help p{margin:0 0 9px}

/* ===================== スマホ ===================== */
@media (max-width:820px){
  #players{
    flex-direction:row;width:auto;left:8px;right:8px;top:auto;bottom:104px;
    max-height:none;gap:5px;padding-bottom:2px;
  }
  .pcard{flex:1;min-width:0;flex-direction:column;gap:0;padding:4px 3px;text-align:center;border-left:none;border-top:4px solid var(--c)}
  .pc-rank{width:auto}
  .pc-ic{font-size:16px}
  .pc-name{font-size:9.5px}
  .pc-money{font-size:10.5px}
  .pc-sub{font-size:10px;line-height:1.5}
  .pc-a,.pc-b{display:block;margin:0}
  #logPanel{right:8px;left:8px;width:auto;top:92px;max-height:calc(var(--vh) * .38)}
  #topbar{flex-wrap:wrap}
  .goalbox{max-width:150px}
  .tools{gap:4px}
  .tool{width:33px;height:32px;font-size:14px}
  .tool.wide{padding:0 7px;font-size:10.5px}
  #dice{--ds:54px;--dz:27px;gap:12px}
  .dsum{font-size:22px}
  .act{padding:12px 12px;font-size:12.5px}
  .act.main{padding:12px 18px;font-size:14px}
  /* --hintBottom は placeHint() が実測して入れる（ステータス欄の高さは中身で変わるため） */
  .sheet{padding:14px}
  table.settle{font-size:11px}
  table.settle td.nm{font-size:11px}
  #topbar{flex-wrap:wrap;row-gap:6px}
  .tools{flex-basis:100%;margin-left:0;justify-content:center}
  .goalbox{flex:1;max-width:none}
  /* 番のふきだしは、ステータスカードにも上のアイコン列にも重ならない場所へ。
     上は topbar の高さがイベント表示で変わるので不安定（実際に重なった）。
     下は players と actionBar の間が常に決まった隙間なので、そこに置く。
     カード/資産ボタンの真上・右寄せにして、🎲ボタンの真上は避ける。 */
  #turnTag{
    top:auto;left:auto;right:8px;transform:none;
    bottom:calc(env(safe-area-inset-bottom) + 74px);
    max-width:180px;box-sizing:border-box;
    padding:3px 9px;font-size:10.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  #turnTag b,#turnTag > *{vertical-align:middle}
  #turnTag .tag-face{font-size:13px;margin-right:3px}
  #turnTag .areaTag{display:inline;margin-left:4px;font-size:9.5px}
  #speech{
    top:auto;left:auto;right:8px;transform:none;bottom:calc(env(safe-area-inset-bottom) + 102px);
    max-width:180px;font-size:10.5px;padding:4px 9px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  #speech.show{transform:none}
}

.yamifx.leaving{filter:drop-shadow(0 0 14px #7bd88f);opacity:.55}

/* ===================== 世界イベント・増資・カード売り場 ===================== */
.evbox{
  display:flex;align-items:center;gap:6px;background:var(--panel);
  border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:6px 11px;max-width:170px;
}
#evIcon{font-size:17px}
#evName{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evtag{
  display:inline-block;background:rgba(255,255,255,.09);border:1px solid var(--line);
  border-radius:7px;padding:2px 8px;font-size:11px;margin-left:8px;color:#e6ebf7;
}
.evtag.big{display:block;margin:0 0 10px;padding:8px 12px;font-size:14px;font-weight:800}
.evtag.big small{display:block;font-size:11px;font-weight:500;color:var(--dim);margin-top:3px}
.evfx{font-size:58px;animation:bob 2.4s ease-in-out infinite}
.evfx.small{font-size:40px}
.evlist{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0 14px}
.evrow{
  display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-size:14px;
}
.evrow b.up{color:var(--good)} .evrow b.down{color:var(--bad)}
.pr-body small b.up{color:var(--good)} .pr-body small b.down{color:var(--bad)}
.evm{font-size:10px;padding:1px 5px;border-radius:4px;margin-left:3px}
.evm.up{background:#1f4a2c;color:#b8f5c8} .evm.down{background:#5a2230;color:#ffc4cf}
.grown{background:#5a4a12;color:#ffe9a3;font-size:9px;padding:1px 5px;border-radius:4px;margin-left:5px;font-weight:700}
.pr-btns{display:flex;flex-direction:column;gap:4px}
.investbtn{
  border-radius:9px;padding:6px 10px;font-size:11.5px;font-weight:800;line-height:1.2;min-width:74px;
  background:linear-gradient(180deg,#8ab4ff,#3f6fd8);color:#0b1730;
}
.investbtn small{display:block;font-size:9px;font-weight:600;opacity:.85}
.investbtn.dis{background:rgba(255,255,255,.09);color:#7c86a3;pointer-events:none}
.shopmark{font-size:14px;text-anchor:middle}

@media (max-width:820px){
  .evbox{max-width:120px;padding:5px 8px}
  #evName{font-size:10.5px}
  .pr-btns{flex-direction:row}
  .investbtn{min-width:60px;padding:6px 7px;font-size:10.5px}
}

/* ===================== オンライン対戦 ===================== */
#online{overflow-y:auto;display:none}
#online.show{display:flex;align-items:center;justify-content:center}
#title h1.small,#online h1.small{font-size:28px}
.fieldlbl{display:block;font-size:12px;color:var(--dim);margin:14px 0 6px;text-align:left}
.field{
  width:100%;padding:13px 14px;border-radius:12px;font-size:16px;
  background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--tx);
}
.field:focus{outline:none;border-color:var(--gold)}
.field.code{text-align:center;letter-spacing:.35em;font-weight:800;text-transform:uppercase}
.joinrow{display:flex;gap:8px;margin-top:10px;align-items:stretch}
.joinrow .field{flex:1}
.tbtn.join{width:auto;margin:0;padding:13px 20px;white-space:nowrap}
.roomcode{
  background:rgba(247,201,72,.12);border:1px solid var(--gold);border-radius:14px;
  padding:12px;margin:6px 0 12px;
}
.roomcode small{display:block;font-size:11px;color:var(--gold);margin-bottom:2px}
.roomcode b{font-size:38px;letter-spacing:.28em;font-weight:900}
.onlstatus{font-size:13px;color:var(--dim);margin-bottom:14px;line-height:1.7}
.onlstatus.ready{color:var(--good);font-weight:700}
.onlresume{
  font-size:13px;color:#ffd873;text-align:center;margin-bottom:14px;padding:9px 12px;
  border-radius:10px;background:rgba(247,201,72,.1);border:1px solid rgba(247,201,72,.3);
}
.seats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
.seat{
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:11px;
  padding:9px 6px;text-align:center;
}
.seat span{font-size:22px;display:block}
.seat b{display:block;font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat small{font-size:9.5px;color:var(--dim)}
.seat.empty{opacity:.4;border-style:dashed}
.seat.cpu{opacity:.7}
.yearbtn2{
  padding:9px 20px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid var(--line);font-size:14px;font-weight:700;
}
/* 人数えらび（2026-09-14）。年数えらびと同じ見た目 */
.maxbtn{
  padding:9px 20px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid var(--line);font-size:14px;font-weight:700;
}
.maxbtn.on{background:var(--gold);color:#20180a;border-color:var(--gold)}
.yearbtn2.on{background:var(--gold);color:#20180a;border-color:var(--gold)}
.diffbtn2{
  padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid var(--line);font-size:13px;font-weight:700;
}
.diffbtn2.on{background:var(--gold);color:#20180a;border-color:var(--gold)}

/* ロビーの相手えらび */
.onlpick{margin-bottom:14px}
.onlfoes{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.ofoe{
  position:relative;padding:0;background:none;border:0;border-radius:50%;
  aspect-ratio:1;display:grid;place-items:center;
  opacity:.6;filter:grayscale(.5);transition:opacity .15s,filter .15s,transform .15s;
}
.ofoe img,.ofoe .of-emoji{
  width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 42%;
  display:grid;place-items:center;font-size:18px;background:#1b1e30;
  box-shadow:0 0 0 2px rgba(255,255,255,.18);
}
.ofoe.on{opacity:1;filter:none;transform:translateY(-2px)}
.ofoe.on img,.ofoe.on .of-emoji{box-shadow:0 0 0 3px var(--c),0 4px 12px rgba(0,0,0,.45)}
.of-star{
  position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);
  font-size:9px;font-weight:700;line-height:1;padding:2px 5px;border-radius:999px;
  background:#12131c;border:1px solid var(--line);color:#c9cee0;white-space:nowrap;
}
.ofoe.on .of-star{background:var(--c);color:#1a1408;border-color:var(--c)}
.onlsum{font-size:12px;color:var(--dim);margin-top:12px;text-align:center;line-height:1.5}
.onlpick.readonly .ofoe{pointer-events:none}
.seat-face.emoji{display:grid;place-items:center;font-size:24px}

@media (max-width:560px){
  .onlfoes{grid-template-columns:repeat(4,1fr);gap:8px}
  .ofoe img,.ofoe .of-emoji{font-size:22px}
}
.tbtn:disabled{opacity:.45;pointer-events:none}
#waiting{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);
  background:rgba(16,18,32,.95);border:2px solid #8ab4ff;border-radius:14px;
  padding:14px 26px;font-size:14px;font-weight:700;opacity:0;transition:.2s;
  pointer-events:none;z-index:40;white-space:nowrap;
}
#waiting.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#waiting::after{content:'';display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* ---- 都市一覧 ---- */
.citylist{display:flex;flex-direction:column;gap:6px;margin:8px 0 14px;max-height:calc(var(--vh) * .52);overflow:auto}
.cityrow{
  display:flex;align-items:center;gap:9px;text-align:left;width:100%;
  background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:10px;padding:8px 10px;
}
.cityrow:active{background:rgba(255,255,255,.15)}
.cr-d{font-size:16px;font-weight:900;color:var(--gold);min-width:36px;text-align:center;line-height:1}
.cr-d small{display:block;font-size:8.5px;font-weight:500;color:var(--dim)}
.cr-body{flex:1;min-width:0}
.cr-body b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-body small{font-size:10px;color:var(--dim)}
.cr-bar{width:62px;height:7px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;flex:none}
.cr-bar i{display:block;height:100%;background:linear-gradient(90deg,#7bd88f,#f7c948)}

/* ---- 難易度・称号 ---- */
.diffbtn{
  padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid var(--line);font-size:12.5px;font-weight:700;
}
.diffbtn.on{background:var(--gold);color:#20180a;border-color:var(--gold)}
.spdbtn{
  padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid var(--line);font-size:13px;font-weight:700;
}
.spdbtn.on{background:var(--gold);color:#20180a;border-color:var(--gold)}
.diffdesc{font-size:11px;color:var(--dim);margin:9px 4px 0;line-height:1.7;min-height:2.6em}
.titlestats{
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;margin-top:16px;
}
.ts-title{display:flex;align-items:center;gap:10px;justify-content:center}
.ts-ic{font-size:26px}
.ts-title small{display:block;font-size:9.5px;color:var(--dim)}
.ts-title b{font-size:16px;color:var(--gold)}
.ts-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.1);margin:9px 0 5px;overflow:hidden}
.ts-bar i{display:block;height:100%;background:linear-gradient(90deg,#7bd88f,#f7c948)}
.ts-next{font-size:10.5px;color:var(--dim);margin-bottom:9px}
.ts-row{display:flex;justify-content:space-between;gap:4px}
.ts-row span{font-size:12.5px;font-weight:800;flex:1}
.ts-row small{display:block;font-size:9px;font-weight:500;color:var(--dim)}
.titleup,.titlenow{
  background:rgba(247,201,72,.14);border:1px solid var(--gold);border-radius:12px;
  padding:9px;margin:6px 0 10px;
}
.titleup small,.titlenow small{display:block;font-size:10px;color:var(--gold)}
.titleup b,.titlenow b{font-size:18px}
.titleup{animation:pop2 .5s ease-out}
@keyframes pop2{0%{transform:scale(.85);opacity:0}100%{transform:none;opacity:1}}

#turnTag.hide{opacity:0;transition:opacity .15s}
@media (max-width:820px){
  #hint{font-size:11.5px;padding:6px 13px;max-width:94vw;gap:2px 6px}
  .hint-sub{font-size:10.5px}
}

/* ===================== キャラクターの絵 ===================== */
.pface{
  width:1em;height:1em;border-radius:50%;object-fit:cover;object-position:50% 42%;
  vertical-align:middle;background:#1b1e30;
  box-shadow:0 0 0 2px var(--c,rgba(255,255,255,.35));
}
.pface-emoji{display:inline-block}

/* 使う場所ごとの大きさ */
.pc-ic .pface{font-size:30px;box-shadow:0 0 0 2px var(--c)}
.tag-face{font-size:19px;margin-right:6px;box-shadow:0 0 0 2px rgba(0,0,0,.25)!important}
.sp-face{font-size:26px;margin-right:6px}
.cb-face{font-size:30px}
.res-face{font-size:24px;margin-right:6px}
.big-face{font-size:38px;margin-right:8px}
.own-face{font-size:22px}
.seat-face{
  width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 42%;
  display:block;margin:0 auto 3px;background:#1b1e30;box-shadow:0 0 0 2px rgba(255,255,255,.25);
}

/* ヤミガミの絵（縁取りの光暈が白い枠のように見えるため無し、2026-09-06） */
.yamifx img{width:130px;height:130px;object-fit:contain;display:block;margin:0 auto}
.yamifx.small img{width:96px;height:96px}
.yamifx.leaving img{opacity:.55}
/* 初登場だけ、うんと大きく出す。フォームの色(--yami-glow)でオーラをにじませ、じわっと脈打たせる */
.yamifx.debut{position:relative;--yami-glow:#8c3cdc}
.yamifx.debut::before{
  content:'';position:absolute;inset:-32px;border-radius:50%;
  background:radial-gradient(circle,var(--yami-glow) 0%,transparent 65%);
  opacity:.75;filter:blur(10px);animation:yamiDebutAura 1.3s ease-in-out infinite;z-index:0;
  mix-blend-mode:screen;
}
.yamifx.debut img{width:220px;height:220px;position:relative;z-index:1;
  filter:drop-shadow(0 8px 26px color-mix(in srgb, var(--yami-glow) 70%, transparent))}
@keyframes yamiDebutAura{
  0%,100%{opacity:.45;transform:scale(.92)}
  50%{opacity:.8;transform:scale(1.1)}
}
@media (prefers-reduced-motion:reduce){ .yamifx.debut::before{animation:none;opacity:.55} }
.sheet.debutscene{border-color:rgba(160,90,220,.6);box-shadow:0 0 0 1px rgba(160,90,220,.35),0 20px 60px rgba(0,0,0,.6)}
/* ゴールデンヤミガミだけの特別な光の演出：回転する後光の光条＋いつもより強いオーラときらめき（2026-09-08） */
.yamifx.debut.golden::before{opacity:.9;filter:blur(14px)}
.yami-gold-rays{
  position:absolute;inset:-45%;z-index:0;pointer-events:none;border-radius:50%;overflow:hidden;
  background:repeating-conic-gradient(from 0deg,rgba(255,215,110,.4) 0deg 6deg,transparent 6deg 16deg);
  animation:gcSpin 9s linear infinite;
}
.yamifx.debut.golden img{position:relative;z-index:1;animation:yamiGoldShimmer 1.8s ease-in-out infinite}
@keyframes yamiGoldShimmer{
  0%,100%{filter:drop-shadow(0 0 22px rgba(255,200,80,.85)) drop-shadow(0 8px 26px rgba(255,170,40,.6)) brightness(1)}
  50%{filter:drop-shadow(0 0 38px rgba(255,220,130,1)) drop-shadow(0 8px 26px rgba(255,170,40,.7)) brightness(1.18)}
}
.sheet.debutscene.golden{border-color:rgba(255,190,60,.75);box-shadow:0 0 0 1px rgba(255,190,60,.5),0 0 46px rgba(255,190,60,.35),0 20px 60px rgba(0,0,0,.6)}
.yami-debut-line{font-size:15px;line-height:1.7}

/* 変身の前ぶれ（稲妻＋集合絵、3秒）（2026-09-03） */
.sheet.feardark{border-color:rgba(200,50,50,.6);box-shadow:0 0 0 1px rgba(200,50,50,.4),0 20px 60px rgba(0,0,0,.7);background:linear-gradient(180deg,#1a0505,#0d0202)}
.yami-fear{margin:-20px -20px 10px;border-radius:17px 17px 0 0;overflow:hidden;line-height:0}
.yami-fear img{width:100%;height:auto;display:block;animation:yamiFearShake .12s linear infinite}
@keyframes yamiFearShake{
  0%{transform:translate(0,0)}25%{transform:translate(-3px,2px)}
  50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,-3px)}100%{transform:translate(0,0)}
}
@media (max-width:560px){ .yami-fear{margin:-14px -14px 8px} }

/* どの姿に変身するかのルーレット。背景に集合絵を敷く（2026-09-03）
   .roul{background:...}が後ろで定義されていてbackground-sizeを打ち消してしまうため、
   .roul.yamiformroulの形にして詳細度で確実に勝たせる */
.roul.yamiformroul{background-size:cover;background-position:center}
.yamiformroul::before{content:'';position:absolute;inset:0;background:rgba(10,5,20,.55)}
.yamiformcell{position:relative}
.yamiformcell img{width:72px;height:72px;object-fit:contain;display:block;margin:0 auto}
@media (max-width:560px){ .yamifx.debut img{width:168px;height:168px} }
.tk-yami{animation:bob2 .9s ease-in-out infinite}

/* 天使・悪魔（数ターンつく一時的な取り巻き） */
.spiritfx{display:flex;justify-content:center;align-items:center;margin:6px auto 12px;
  width:220px;height:220px;border-radius:50%}
.spiritfx.angel{background:radial-gradient(circle,rgba(255,225,150,.55) 0%,rgba(255,225,150,.16) 55%,transparent 75%)}
.spiritfx.devil{background:radial-gradient(circle,rgba(170,50,210,.5) 0%,rgba(120,30,160,.16) 55%,transparent 75%)}
.spirit-emoji{font-size:96px;animation:bob2 1.1s ease-in-out infinite;
  filter:drop-shadow(0 0 16px rgba(255,225,140,.75))}
.spiritfx img{width:190px;height:190px;object-fit:contain;display:block;animation:bob2 1.1s ease-in-out infinite}
/* 毎月の告知(spiritTick)は取りついた瞬間より一回り小さく（2026-09-09） */
.spiritfx.small{width:140px;height:140px}
.spiritfx.small img{width:120px;height:120px}
.spiritfx.small .spirit-emoji{font-size:64px}
.spiritfx.angel img{filter:drop-shadow(0 6px 20px rgba(255,215,140,.7))}
.spiritfx.devil img{filter:drop-shadow(0 6px 20px rgba(160,40,200,.6))}
/* 強い悪魔（深紅の契約）：ふつうの悪魔の紫オーラを、体から赤いオーラが出ているように差し替える（2026-09-07） */
.spiritfx.devil.strong{background:radial-gradient(circle,rgba(230,20,20,.6) 0%,rgba(180,10,10,.2) 55%,transparent 75%)}
.spiritfx.devil.strong img{filter:drop-shadow(0 6px 22px rgba(230,20,20,.8))}
.sheet.spirit.angel{border-color:rgba(255,220,140,.55)}
.sheet.spirit.devil{border-color:rgba(160,40,200,.55)}
.banner.card.angel .bn-main,.banner.card.devil .bn-main{font-weight:700}
.banner.card.angel{border-color:rgba(255,220,140,.5)}
.banner.card.devil{border-color:rgba(160,40,200,.5)}
/* ステータスカードの天使/悪魔バッジ */
.pc-extra i.angel{color:#ffd166}
.pc-extra i.devil{color:#ff6b6b}

/* ================= 8月のお祭り ================= */
.sheet.festival{border-color:rgba(255,175,70,.55);box-shadow:0 0 0 1px rgba(255,175,70,.3),0 20px 60px rgba(0,0,0,.6)}
.fes-wrap{border-radius:14px;overflow:hidden;margin-bottom:12px;line-height:0}
.fes-img{width:100%;height:auto;display:block}
.fes-title{color:#ffce6b;text-shadow:0 0 14px rgba(255,180,60,.5)}
.fes-line{font-style:italic;color:#ffe2b0}
.fes-target{background:linear-gradient(180deg,#ff8f4d,#d94f1c)!important;opacity:.85!important}
.fes-rows{display:flex;flex-direction:column;gap:6px;margin:10px 0;text-align:left}
.fes-row{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;
  background:rgba(255,255,255,.05);
}
.fes-row.win{background:linear-gradient(90deg,rgba(255,200,80,.22),rgba(255,200,80,.06));
  box-shadow:inset 0 0 0 1px rgba(255,200,80,.4)}
.fes-rank{width:34px;font-weight:800;font-size:13px;text-align:center;flex-shrink:0}
.fes-face{width:32px;height:32px;border-radius:50%;flex-shrink:0}
.fes-score{margin-left:auto;font-weight:800;color:#ffce6b}
@media (max-width:560px){
  .fes-face{width:26px;height:26px}
  .fes-rank{width:28px;font-size:11.5px}
}

/* ================= 12月の雪まつり（お祭りの配色を、冬らしい水色に差し替えたもの） ================= */
.sheet.winter{border-color:rgba(140,200,255,.55);box-shadow:0 0 0 1px rgba(140,200,255,.3),0 20px 60px rgba(0,0,0,.6)}
.sheet.winter .fes-title{color:#bfe6ff;text-shadow:0 0 14px rgba(140,200,255,.55)}
.sheet.winter .fes-line{color:#e2f3ff}
.sheet.winter .fes-target{background:linear-gradient(180deg,#8fd3ff,#2f7fc9)!important;opacity:.85!important}
.sheet.winter .fes-row.win{background:linear-gradient(90deg,rgba(150,210,255,.22),rgba(150,210,255,.06));
  box-shadow:inset 0 0 0 1px rgba(150,210,255,.4)}
.fes-row.win2{background:linear-gradient(90deg,rgba(205,215,225,.18),rgba(205,215,225,.05));
  box-shadow:inset 0 0 0 1px rgba(205,215,225,.32)}
.sheet.winter .fes-score{color:#bfe6ff}


/* ===================== タイトルの背景 ===================== */
#titleBg{
  position:absolute;inset:0;z-index:0;
  background:url('../img/title.webp') center/cover no-repeat;
}
#titleBg::after{        /* 明るい絵の上でも文字が読めるように暗幕をかける */
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,10,20,.35) 0%,rgba(8,10,20,.55) 35%,rgba(8,10,20,.9) 100%),
    radial-gradient(70% 55% at 50% 40%,rgba(8,10,20,0) 0%,rgba(8,10,20,.5) 100%);
  /* はじめの3秒は絵をそのまま明るく見せて、文字が出るのに合わせて少しずつ暗くする */
  animation:titleDim 3.4s ease-in both;
}
@keyframes titleDim{0%{opacity:0}45%{opacity:.12}100%{opacity:1}}
/* 絵そのものも、最初はほんのり明るく飛ばしておく */
#titleBg{animation:titleGlow 3.4s ease-in both}
@keyframes titleGlow{
  0%{filter:brightness(1.28) saturate(1.12)}
  45%{filter:brightness(1.16) saturate(1.06)}
  100%{filter:none}
}
/* 最初の3秒は背景の絵だけを見せて、そのあと文字がふわっと出てくる */
#title .title-inner{position:relative;z-index:1;opacity:0;animation:titleTextIn .8s ease-out 3s both}
@keyframes titleTextIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
#title .tlogo{display:none}          /* 絵にサイコロがあるので絵文字は出さない */
#title h1{
  font-size:44px;
  text-shadow:0 3px 0 rgba(0,0,0,.55),0 8px 26px rgba(0,0,0,.85),0 0 30px rgba(247,201,72,.35);
}
.tsub{color:#dfe6f5;text-shadow:0 2px 8px rgba(0,0,0,.9)}
/* 操作部分は暗いパネルに載せて確実に読ませる */
#title .panel-box{
  background:rgba(12,15,26,.74);border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:16px 16px 14px;margin-top:14px;
  backdrop-filter:blur(6px);
}
.tnote{color:#c9d2e6;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.tlinks a{color:#c9d2e6;text-shadow:0 1px 6px rgba(0,0,0,.9)}

@media (max-width:820px){
  #title h1{font-size:34px}
  .seat-face{width:38px;height:38px}
  .yamifx img{width:104px;height:104px}
  .yamifx.small img{width:80px;height:80px}
  .pc-ic .pface{font-size:24px}
}

/* 成績がまだ無いときに空の箱を出さない */
.titlestats:empty{display:none}
/* タイトル文字の後ろだけ少し落として可読性を上げる */
#title h1::before{
  content:'';position:absolute;left:50%;top:-14px;transform:translateX(-50%);
  width:min(560px,96vw);height:150px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(8,10,20,.72),rgba(8,10,20,0));
}
#title h1{position:relative;z-index:0}

/* ===================== 成績グラフ ===================== */
.chart-modal .sheet{width:min(720px,96vw)}
.chartwrap{position:relative;margin:6px 0 4px}
.chart{width:100%;height:auto;display:block;overflow:visible}
.c-grid{stroke:rgba(255,255,255,.12);stroke-width:1}
.c-axis{fill:#8b95b0;font-size:12px}
.c-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.c-dot{stroke:#1e2138;stroke-width:2}          /* 重なっても見分けられるよう面の色で縁取る */
.c-name{font-size:12.5px;font-weight:800;paint-order:stroke;stroke:#1a1d30;stroke-width:3;stroke-linejoin:round}
.c-hit{fill:transparent;cursor:pointer}
.c-lead{stroke-width:1.5;opacity:.7}
.c-cross{stroke:rgba(255,255,255,.35);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.c-tip{
  position:absolute;top:4px;transform:translateX(-50%);max-width:min(260px,86%);
  background:rgba(12,15,26,.97);border:1px solid rgba(255,255,255,.2);border-radius:10px;
  padding:8px 11px;font-size:11.5px;min-width:180px;text-align:left;
  opacity:0;pointer-events:none;transition:opacity .12s;z-index:5;
}
.c-tip.show{opacity:1}
.c-tip>b{display:block;font-size:12px;margin-bottom:5px;color:var(--gold)}
.ct-row{display:flex;align-items:center;gap:6px;line-height:1.9;white-space:nowrap}
.ct-row i{width:9px;height:9px;border-radius:2px;flex:none}
.ct-row b{margin-left:auto;font-size:12px}
.ct-row small{color:var(--dim);font-size:10px;min-width:72px;text-align:right}

table.ranktbl{width:100%;border-collapse:collapse;font-size:12px;margin:10px 0 14px}
table.ranktbl th{color:var(--dim);font-size:10px;font-weight:600;padding:4px 3px;border-bottom:1px solid var(--line);text-align:right}
table.ranktbl th:nth-child(1),table.ranktbl th:nth-child(2){text-align:left}
table.ranktbl td{padding:7px 3px;border-bottom:1px solid rgba(255,255,255,.07);text-align:right;white-space:nowrap}
table.ranktbl td.rk,table.ranktbl td.nm{text-align:left;font-weight:800}
table.ranktbl td.rk{font-size:11px}
table.ranktbl td.plus{color:var(--good)}
table.ranktbl td.neg{color:var(--bad)}
.c-swatch{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}
.ranktbl .up{color:var(--good);font-size:10px;margin-left:4px}
.ranktbl .down{color:var(--bad);font-size:10px;margin-left:4px}
.ranktbl .flat{color:#6d7794;font-size:10px;margin-left:4px}

@media (max-width:820px){
  .c-axis{font-size:14px}
  .c-name{font-size:14px}
  table.ranktbl{font-size:11px}
  table.ranktbl td{padding:6px 2px}
  .c-tip{font-size:11px;min-width:160px}
}

/* ===================== 対戦相手えらび ===================== */
#setup{overflow-y:auto;display:none}
#setup.show{display:flex;align-items:flex-start;justify-content:center}
#setupBg{position:absolute;inset:0;z-index:0;
  background:url('../img/title.webp') center/cover no-repeat}
#setupBg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,10,20,.72),rgba(8,10,20,.92))}
#setup .title-inner{position:relative;z-index:1;padding:22px 0 34px}
.wide-inner{width:min(760px,94vw)}
.presets{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:6px 0 14px}
.prebtn{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.09);
  border:1px solid var(--line);font-size:12.5px;font-weight:700}
.prebtn:active{background:rgba(255,255,255,.2)}

.foegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:9px}
.foecard{
  position:relative;text-align:left;padding:10px 10px 11px;border-radius:14px;
  background:rgba(16,19,32,.86);border:2px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;gap:2px;transition:transform .1s;
}
.foecard:active{transform:scale(.97)}
.foecard.on{border-color:var(--c);background:rgba(30,34,54,.95);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.fc-no{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;
  background:var(--c);color:#12131f;font-size:13px;font-weight:900;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.fc-face{display:block;width:54px;height:54px;border-radius:50%;overflow:hidden;
  background:#1b1e30;box-shadow:0 0 0 2px var(--c);margin-bottom:4px}
.fc-face img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
.fc-emoji{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:28px}
.fc-name{font-size:13px;font-weight:800}
.fc-type{font-size:10.5px;color:var(--c);font-weight:700}
.fc-star{font-size:11px;color:var(--gold);letter-spacing:-.5px}
.fc-desc{font-size:10.5px;color:var(--dim);line-height:1.65;margin-top:3px}
.foesum{margin:12px 0 4px;font-size:13.5px}
.foesum b{color:var(--gold);font-size:15px}
.foesum .dim{color:var(--dim);font-size:12px}

/* ===================== セーブ枠 ===================== */
.slotlist{display:flex;flex-direction:column;gap:8px;margin:10px 0 14px}
.slotbtn{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;padding:11px 12px;
}
.slotbtn:active{background:rgba(255,255,255,.15)}
.slotbtn.empty{opacity:.55;border-style:dashed}
/* えらんだ枠を光らせる。大事なデータなので、ここから確認をはさむ */
.slotbtn.selected{
  border-color:var(--gold);background:rgba(247,201,72,.14);
  box-shadow:0 0 0 1px var(--gold),0 0 14px rgba(247,201,72,.5);
  animation:slotPick .3s cubic-bezier(.2,1.6,.4,1);
}
@keyframes slotPick{0%{transform:scale(.97)}60%{transform:scale(1.015)}100%{transform:none}}
.slotconfirm{
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;
  padding:11px 12px;margin:10px 0 4px;
}
.slotconfirm b{display:block;font-size:15px}
.slotconfirm small{display:block;font-size:11px;color:var(--dim)}
.sl-n{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.12);
  font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;flex:none}
/* 完走ずみ（エンディングだけ見られる）セーブの目印 */
.sl-star{color:var(--gold);text-shadow:0 0 6px rgba(247,201,72,.7)}
.sl-body{flex:1;min-width:0}
.sl-body b{display:block;font-size:14px}
.sl-body small{display:block;font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-body small.dim{opacity:.7;font-size:9.5px}
.sl-del{font-size:16px;padding:4px 6px;border-radius:8px;flex:none}
.sl-del:active{background:rgba(255,90,110,.25)}

/* ===================== チュートリアル ===================== */
.tut-step{font-size:11px;color:var(--gold);font-weight:800;letter-spacing:.1em}
.tut-body{text-align:left;line-height:2}

@media (max-width:820px){
  .foegrid{grid-template-columns:repeat(2,1fr);gap:7px}
  .foecard{padding:8px}
  .fc-face{width:44px;height:44px}
  .fc-name{font-size:12px}
  .fc-desc{font-size:9.5px}
  .prebtn{font-size:11.5px;padding:7px 11px}
}


/* ================= 目的地とうちゃくの演出 ================= */
.sheet.celebrate{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#2a2410 0%,#1b1d2c 62%);
  border-color:var(--gold);box-shadow:0 0 0 1px rgba(247,201,72,.35),0 18px 60px rgba(0,0,0,.6);
  animation:gcPop .42s cubic-bezier(.2,1.5,.4,1);
}
@keyframes gcPop{0%{transform:scale(.72);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}

.gc-rays{
  position:absolute;top:-60%;left:-60%;width:220%;height:220%;pointer-events:none;z-index:0;
  background:repeating-conic-gradient(from 0deg,rgba(247,201,72,.13) 0deg 7deg,transparent 7deg 16deg);
  animation:gcSpin 14s linear infinite;
}
@keyframes gcSpin{to{transform:rotate(360deg)}}

/* 光条の上に薄い暗幕を敷いて、文字を読みやすくする */
.sheet.celebrate::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 58%,rgba(20,22,36,.86) 0%,rgba(20,22,36,.55) 42%,transparent 72%);
}
.gc-conf{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.gc-p{
  position:absolute;top:-24px;border-radius:2px;opacity:.95;
  animation-name:gcFall;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes gcFall{
  0%{transform:translateY(-30px) rotate(0)}
  100%{transform:translateY(720px) rotate(var(--rot,360deg))}
}

.sheet.celebrate > *:not(.gc-rays):not(.gc-conf){position:relative;z-index:2}

.gc-art{margin:2px auto 4px;height:132px;display:grid;place-items:center}
.gc-art img{max-height:132px;max-width:210px;object-fit:contain;
  filter:drop-shadow(0 6px 20px rgba(247,201,72,.6));animation:bob 1.6s ease-in-out infinite}
.gc-emoji{font-size:64px;animation:bob 1.4s ease-in-out infinite}
.gc-title{
  font-size:26px;letter-spacing:.06em;
  background:linear-gradient(180deg,#fff6d4,#f7c948 60%,#e0a017);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 10px rgba(247,201,72,.35);
}
.gc-who{margin-top:2px}
.gc-face{width:26px;height:26px;border-radius:50%;object-fit:cover;vertical-align:-7px;margin-right:5px;
  box-shadow:0 0 0 2px rgba(255,255,255,.3)}
span.gc-face{display:inline-grid;place-items:center;font-size:16px;background:#1b1e30}
.gc-amount{font-size:32px;text-shadow:0 0 18px rgba(110,231,166,.4);font-variant-numeric:tabular-nums}
/* 8回に1回の「収益2倍」ボーナス目的地だったときの札（2026-09-08） */
.gc-double{
  display:inline-block;margin:2px 0 4px;padding:3px 12px;border-radius:999px;font-size:12.5px;font-weight:800;
  color:#3a2410;background:linear-gradient(180deg,#fff6d6,#ffd76b 60%,#f2ab1f);
  box-shadow:0 3px 10px rgba(255,190,60,.5);animation:gcDoublePop .6s cubic-bezier(.2,1.6,.4,1);
}
@keyframes gcDoublePop{0%{transform:scale(0) rotate(-8deg);opacity:0}70%{transform:scale(1.15) rotate(2deg)}100%{transform:none;opacity:1}}

.screenflash{
  position:fixed;inset:0;z-index:9999;pointer-events:none;background:#fff;
  animation:gcFlash .55s ease-out forwards;
}
@keyframes gcFlash{0%{opacity:.75}100%{opacity:0}}

@media (max-width:560px){
  .gc-art{height:104px}.gc-art img{max-height:104px;max-width:170px}
  .gc-emoji{font-size:52px}.gc-title{font-size:22px}.gc-amount{font-size:27px}
}


/* とうちゃくのバナー（絵に「とうちゃく！」の文字が入っている） */
.sheet.celebrate{width:min(560px,96vw);padding:0 20px 20px}
.gc-banner{
  margin:0 -20px 10px;overflow:hidden;
  border-radius:17px 17px 0 0;line-height:0;
  animation:gcBan .5s cubic-bezier(.2,1.4,.4,1);
}
.gc-banner img{width:100%;height:auto;display:block}
@keyframes gcBan{0%{transform:scale(1.12);opacity:0}100%{transform:scale(1);opacity:1}}
.sheet.celebrate .gc-who{margin-top:0}

/* 最終結果の1位に出すトロフィー */
.win-trophy{margin:0 auto 4px;height:130px;display:grid;place-items:center}
.win-trophy img{max-height:130px;max-width:200px;object-fit:contain;
  filter:drop-shadow(0 6px 22px rgba(247,201,72,.55));animation:bob 1.8s ease-in-out infinite}

@media (max-width:560px){
  .gc-banner{margin:0 -14px 8px}
  .sheet.celebrate{padding:0 14px 14px}
  .win-trophy{height:104px}.win-trophy img{max-height:104px;max-width:165px}
}

/* 紙吹雪は絵の前に降らせる（後ろだと絵に隠れて、はみ出た数片だけが見えてしまう） */
.sheet.celebrate .gc-conf{z-index:5}


/* ================= お店の中 ================= */
.sheet.shopish{
  position:relative;
  padding-top:34px;                       /* 日よけの帯のぶん空ける */
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,196,96,.16), transparent 60%),
    linear-gradient(180deg,#2b2418 0%,#232741 26%,#191c2e 100%);
  border-color:rgba(226,168,84,.5);
  box-shadow:0 0 0 1px rgba(226,168,84,.18), 0 24px 60px rgba(0,0,0,.6);
}
/* 入口の日よけ（ストライプのひさし） */
.shop-awning{
  position:absolute;top:0;left:0;right:0;height:22px;
  border-radius:17px 17px 0 0;
  background:repeating-linear-gradient(90deg,#c94f3d 0 18px,#f3ece0 18px 36px);
  box-shadow:0 2px 6px rgba(0,0,0,.4) inset, 0 3px 8px rgba(0,0,0,.35);
}
.shop-awning::after{                       /* ひさしの波打つ裾 */
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:8px;
  background:radial-gradient(circle at 9px -2px,transparent 8px,#1b1d2c 8px) repeat-x;
  background-size:18px 10px;
}

/* 店主のあいさつ */
.shop-greet{
  display:flex;align-items:center;gap:8px;justify-content:center;
  margin:-4px 0 10px;padding:7px 12px;border-radius:12px;
  background:rgba(255,214,150,.09);border:1px solid rgba(226,168,84,.28);
  animation:sgIn .34s ease-out;
}
@keyframes sgIn{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
.sg-face{
  font-size:22px;line-height:1;width:34px;height:34px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(255,214,150,.14);box-shadow:0 0 0 1px rgba(226,168,84,.3);
}
.sg-line{font-size:12.5px;color:#e8d9be;text-align:left;line-height:1.45}

/* 品物の棚っぽく */
.sheet.shopish .proplist{
  padding:8px;border-radius:12px;
  background:rgba(0,0,0,.22);box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
.sheet.shopish .cb-h{color:#f0c169}

/* 物件購入画面：所持金までは固定表示のまま、物件欄だけをスクロールさせる（2026-09-02） */
.sheet.citybuy{display:flex;flex-direction:column;overflow:hidden}
.sheet.citybuy>.exit-top,.sheet.citybuy>.shop-awning,.sheet.citybuy>h3,
.sheet.citybuy>.shop-greet,.sheet.citybuy>.cashline{flex:none}
.citybuy-scroll{flex:1;min-height:120px;overflow-y:auto;overscroll-behavior:contain}

@media (max-width:560px){
  .sheet.shopish{padding-top:30px}
  .sg-line{font-size:11.5px}
  .sg-face{width:30px;height:30px;font-size:19px}
}


/* ================= イベントの演出 ================= */
/* 盤面をゆらす */
#game.shaking{animation:shk .42s ease-in-out}
#game.shaking-hard{animation:shkH .6s ease-in-out}
@keyframes shk{
  0%,100%{transform:none}20%{transform:translate(-5px,3px)}
  40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,-2px)}80%{transform:translate(3px,2px)}
}
@keyframes shkH{
  0%,100%{transform:none}10%{transform:translate(-11px,6px) rotate(-.5deg)}
  25%{transform:translate(11px,-7px) rotate(.5deg)}40%{transform:translate(-8px,-5px)}
  55%{transform:translate(8px,5px) rotate(-.3deg)}70%{transform:translate(-5px,3px)}85%{transform:translate(4px,-2px)}
}

/* 中央から飛び散る */
.burstfx{position:fixed;inset:0;z-index:9998;pointer-events:none}
.burstfx i{
  position:absolute;left:50%;top:50%;font-style:normal;line-height:1;
  animation:bst 1.15s cubic-bezier(.15,.7,.35,1) forwards;
}
@keyframes bst{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0}
  15%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1) rotate(var(--rot));opacity:0}
}

/* マスのイベントを強く見せる */
.sheet.punchy{animation:pnch .4s cubic-bezier(.2,1.6,.35,1)}
@keyframes pnch{0%{transform:scale(.7) rotate(-2deg);opacity:0}60%{transform:scale(1.06)}100%{transform:none;opacity:1}}
.sheet.punchy.good{border-color:rgba(110,231,166,.55);box-shadow:0 0 0 1px rgba(110,231,166,.25),0 20px 60px rgba(0,0,0,.6)}
.sheet.punchy.bad{border-color:rgba(255,110,110,.55);box-shadow:0 0 0 1px rgba(255,110,110,.25),0 20px 60px rgba(0,0,0,.6)}
.amount.big{font-size:36px;animation:amtPop .5s cubic-bezier(.2,1.7,.4,1) .1s both}
@keyframes amtPop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15)}100%{transform:none;opacity:1}}

/* 年のはじめの時勢 */
.sheet.bigev{position:relative;overflow:hidden;animation:pnch .46s cubic-bezier(.2,1.5,.35,1)}
.sheet.bigev > *:not(.ev-rays){position:relative;z-index:2}
.ev-rays{
  position:absolute;top:-70%;left:-70%;width:240%;height:240%;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.07) 0deg 6deg,transparent 6deg 14deg);
  animation:gcSpin 20s linear infinite;
}
.sheet.omen-boon{background:linear-gradient(180deg,#2c2a14,#191c2e);border-color:rgba(247,201,72,.5)}
.sheet.omen-omen{background:linear-gradient(180deg,#2c1620,#191c2e);border-color:rgba(214,80,96,.5)}
.sheet.omen-omen .ev-rays{background:repeating-conic-gradient(from 0deg,rgba(255,90,110,.09) 0deg 6deg,transparent 6deg 14deg)}
.evfx.big{font-size:76px;animation:evIn .55s cubic-bezier(.2,1.7,.35,1), bob 2.4s ease-in-out 0.55s infinite}
@keyframes evIn{0%{transform:scale(0) rotate(-25deg);opacity:0}70%{transform:scale(1.2)}100%{transform:none;opacity:1}}
.ev-year{letter-spacing:.05em}

/* 内容に合わせて出てくるキャラ（商人・王様） */
.ev-char{
  width:min(190px,46%);height:auto;margin:0 auto 4px;display:block;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55));
  animation:evCharIn .5s cubic-bezier(.2,1.6,.35,1);
}
@keyframes evCharIn{0%{transform:translateY(26px) scale(.85);opacity:0}100%{transform:none;opacity:1}}
.sheet.bigev.has-char .evfx.big{display:none}
.ev-char.king{filter:drop-shadow(0 0 26px rgba(247,201,72,.65)) drop-shadow(0 10px 26px rgba(0,0,0,.55))}
.ev-char.bubble{filter:drop-shadow(0 0 26px rgba(255,209,102,.7)) drop-shadow(0 10px 26px rgba(0,0,0,.55))}
.ev-char.recession{filter:drop-shadow(0 0 26px rgba(180,20,20,.6)) drop-shadow(0 10px 26px rgba(0,0,0,.6))}
.ev-charline{font-size:13px;color:#ffe6a8;margin:-2px 0 8px;font-style:normal}
.ev-char.king ~ .ev-charline{color:#ffd873}

/* とくに絵になる年（大豊作・大不況・商業ブームなど）は、キャラより大きな一枚絵で見せる */
.sheet.bigev.has-img .evfx.big{display:none}
.ev-wrap{margin:-20px -20px 12px;border-radius:18px 18px 0 0;overflow:hidden;line-height:0}
.ev-img{width:100%;height:auto;display:block;animation:ssZoom 3.4s ease-out both}

@media (max-width:560px){ .evfx.big{font-size:60px} .amount.big{font-size:30px} .ev-char{width:min(150px,50%)} }


/* とうちゃくした本人を大きく見せる */
.gc-hero{display:flex;flex-direction:column;align-items:center;gap:4px;margin:2px 0 4px}
.gc-big{
  width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 40%;
  box-shadow:0 0 0 3px rgba(255,255,255,.5),0 8px 22px rgba(0,0,0,.5);
  animation:heroIn .45s cubic-bezier(.2,1.6,.35,1);
}
span.gc-big{display:grid;place-items:center;font-size:38px;background:#1b1e30}
@keyframes heroIn{0%{transform:scale(.4) rotate(-12deg);opacity:0}70%{transform:scale(1.12)}100%{transform:none;opacity:1}}
.gc-name{font-size:17px;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.field.name{width:min(280px,86%);text-align:center;margin:0 auto;display:block}

@media (max-width:560px){ .gc-big{width:60px;height:60px} span.gc-big{font-size:32px} }


/* 止まる先の目印。分かれ道でない着地先は直接タップして止まれるので、
   ラベルは常に薄く見せておき（ホバー/最短路でくっきり）、ピカピカ光らせて誘導する（2026-09-02） */
.dir-land{pointer-events:none}
.dir-land:not(.fork){cursor:pointer}
.dl-ring{
  fill:none;stroke:#8fd0ff;stroke-width:4;stroke-dasharray:7 6;
  opacity:.85;animation:dlSpin 5s linear infinite, dlSparkle .8s ease-in-out infinite;
  transform-box:fill-box;transform-origin:center;
  filter:drop-shadow(0 0 3px #8fd0ff);
}
.dir-land.best .dl-ring{stroke:#f7c948;stroke-width:5;filter:drop-shadow(0 0 4px #f7c948)}
.dir-land.fork .dl-ring{stroke:#c9a0ff;stroke-dasharray:3 7;filter:drop-shadow(0 0 3px #c9a0ff)}
.dir-land.hi .dl-ring{stroke-width:7;opacity:1}
/* 目的地そのものは、他より一段目立つ赤い光で強調する */
.dir-land.goaltile .dl-ring{stroke:#ff4d4d;stroke-width:6;filter:drop-shadow(0 0 8px #ff4d4d)}
.dir-land.goaltile .dl-lbl{fill:#ffb3b3}
@keyframes dlSpin{to{transform:rotate(360deg)}}
@keyframes dlSparkle{0%,100%{opacity:.5}50%{opacity:1}}
/* サイコロを振って分かれ道に来たとき、止まれるマスを一目で分かるよう、
   今いるマス(here-glow、動いた人の色)とはっきり違う淡い光の輪をリングの外側に足す（2026-09-09） */
.dl-land-glow{fill:#8fd0ff;opacity:.16;animation:dlGlowPulse 1.4s ease-in-out infinite}
.dir-land.best .dl-land-glow{fill:#f7c948;opacity:.2}
.dir-land.fork .dl-land-glow{fill:#c9a0ff;opacity:.16}
.dir-land.goaltile .dl-land-glow{fill:#ff4d4d;opacity:.22}
@keyframes dlGlowPulse{0%,100%{transform:scale(.9);opacity:.12}50%{transform:scale(1.18);opacity:.28}}
.dl-lbl{
  font-size:15px;font-weight:800;text-anchor:middle;fill:#dff0ff;
  paint-order:stroke;stroke:#0d1018;stroke-width:5;stroke-linejoin:round;opacity:.85;
}
/* 分かれ道の行き先も光らせるようになったので(2026-09-13)、何の輪なのか分かるよう薄く出しておく */
.dir-land.fork .dl-lbl{fill:#e2ccff;opacity:.6}
.dir-land.best .dl-lbl{fill:#ffe9a8;opacity:1}
.dir-land.hi .dl-lbl{opacity:1}
.dl-kind{
  font-size:12.5px;font-weight:700;text-anchor:middle;fill:#b9d6ff;
  paint-order:stroke;stroke:#0d1018;stroke-width:4;stroke-linejoin:round;opacity:.85;
}
.dir-land.best .dl-kind{fill:#ffdf9a;opacity:1}
.dir-land.hi .dl-kind{opacity:1}


/* 地図を広げて見ているときに出る「現在地へ戻る」。
   上の🎯アイコンだけだと気づかれないので、盤面の上に大きく出す */
.backhome{
  /* --backTop は placeHint() が #topbar の実際の高さを測って入れる
     （#topbar は表示中のイベント等で行数が変わり、決め打ちだと重なる） */
  position:absolute;left:50%;top:var(--backTop,calc(env(safe-area-inset-top) + 116px));
  transform:translateX(-50%) translateY(-8px);
  z-index:41;display:none;white-space:nowrap;
  padding:9px 20px;border-radius:999px;font-size:13.5px;font-weight:800;
  color:#231a04;background:linear-gradient(180deg,#ffe9a8,#f0b93a);
  border:2px solid #8a5f10;box-shadow:0 6px 18px rgba(0,0,0,.5);
  opacity:0;transition:opacity .2s,transform .2s;
}
.backhome.show{display:block;opacity:1;transform:translateX(-50%) translateY(0);
  animation:bhPulse 1.8s ease-in-out infinite}
@keyframes bhPulse{
  0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.5)}
  50%{box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 6px rgba(247,201,72,.22)}
}
@media (max-width:820px){
  .backhome{font-size:12.5px;padding:8px 16px}
}

/* 道を選びなおすボタン */
.undodir{
  position:absolute;left:50%;transform:translateX(-50%) translateY(8px);
  bottom:96px;z-index:40;display:none;
  padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:800;
  background:rgba(28,31,50,.94);color:#dfe6ff;border:1px solid rgba(255,255,255,.28);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.undodir.show{display:block;animation:udIn .22s ease-out forwards}
@keyframes udIn{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.undodir:active{transform:translateX(-50%) scale(.96)}
@media (max-width:560px){ .undodir{bottom:88px;font-size:12.5px;padding:8px 14px} }

/* 止まれるマスを全部見渡すボタン（2026-09-13）。
   地図の倍率は【現在地へ戻る】以外では変えない決まりなので、
   広く見たいときだけ自分で押してもらう */
.fitmarks{
  /* --backTop は placeHint() が #topbar の高さを測って入れる。
     その少し下、右寄せに置く（中央の【現在地へ戻る】と重ならない位置） */
  position:absolute;right:10px;top:calc(var(--backTop,116px) + 46px);z-index:40;display:none;
  padding:7px 13px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap;
  background:rgba(24,40,60,.94);color:#cfe6ff;border:1px solid rgba(143,208,255,.4);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.fitmarks.show{display:block;animation:udIn .22s ease-out forwards}
.fitmarks:active{transform:scale(.96)}
@media (max-width:560px){ .fitmarks{font-size:11px;padding:6px 11px;right:8px} }


/* ================= アイテムのルーレット ================= */
.roul{
  position:relative;overflow:hidden;margin:10px 0 8px;
  height:96px;border-radius:14px;background:rgba(0,0,0,.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.roul-tape{display:flex;position:absolute;left:calc(50% - 48px);top:0;will-change:transform}
.roul-cell{
  width:96px;height:96px;flex:none;display:grid;place-content:center;gap:2px;text-align:center;
  border-right:1px solid rgba(255,255,255,.07);
}
.roul-cell b{font-size:34px;line-height:1}
.roul-cell small{font-size:9.5px;color:var(--dim);max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roul-win{
  position:absolute;left:50%;top:0;bottom:0;width:98px;transform:translateX(-50%);z-index:2;
  border:3px solid var(--gold);border-radius:12px;pointer-events:none;
  box-shadow:0 0 18px rgba(247,201,72,.5), 0 0 0 999px rgba(10,11,18,.42);
}
.roul-res{min-height:44px;opacity:0;transition:opacity .25s}
.roul-res.show{opacity:1}
.roul-res b{display:block;font-size:15px}
.roul-res small{color:var(--dim);font-size:11.5px}

/* ================= お宝 ================= */
.tr-art{font-size:66px;animation:heroIn .5s cubic-bezier(.2,1.6,.35,1), bob 2s ease-in-out .5s infinite}
.trlist{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:10px}
.tr-chip{
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;
  background:rgba(247,201,72,.12);border:1px solid rgba(247,201,72,.35);font-size:11.5px;
}
.tr-chip b{font-size:16px}
.tr-chip small{color:var(--gold)}
.tr-sell{font-style:normal;color:var(--dim);margin-left:5px;font-size:9.5px}

/* ---------- ワープの行き先を示す小さな地図 ---------- */
.sheet.warpscene{width:min(430px,94vw)}
.warpmap{
  display:block;width:100%;height:auto;max-height:min(46vh,300px);
  margin:10px 0 8px;border-radius:14px;border:1px solid var(--line);
  background:#16324a;
}
.wm-lbl{font-weight:900;fill:#fff;text-anchor:middle;dominant-baseline:auto}
.wm-flag{text-anchor:middle}
.wm-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:4px 0 8px}
.wm-side{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:11px;padding:7px 6px}
.wm-side b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.wm-side small{font-size:10px;color:var(--dim)}
.wm-dot{width:11px;height:11px;border-radius:50%;display:block;margin-bottom:2px}
.wm-dot.from{background:#9b5bd4} .wm-dot.to{background:#43cf7c}
.wm-arrow{flex:none;font-size:17px;color:var(--gold)}
@media (max-width:560px){ .wm-side b{font-size:11px} .warpmap{max-height:38vh} }

/* ================= ミニゲーム ================= */
.sheet.mg h3{margin-bottom:6px}
.mg-icon{font-size:60px;animation:bob 1.8s ease-in-out infinite}
.mg-btns{display:flex;gap:10px;justify-content:center}
.mg-btns .btn{flex:1;max-width:170px}
.amida-svg{width:100%;max-width:260px;display:block;margin:10px auto}
.amida-picks .btn{max-width:56px;flex:0 0 auto;padding:0 14px}

.mg-cards{display:flex;gap:14px;justify-content:center;margin:12px 0}
.mg-card{
  width:74px;height:104px;border-radius:12px;display:grid;place-items:center;
  font-size:34px;font-weight:800;
  background:linear-gradient(180deg,#f6f2e6,#ded6c2);color:#22242f;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.mg-card.back{background:linear-gradient(135deg,#3b3f66,#262a45);color:#8d93bd}
.mg-card.win{box-shadow:0 0 0 3px #6ee7a6,0 6px 18px rgba(0,0,0,.45)}
.mg-card.lose{box-shadow:0 0 0 3px #ff6e6e,0 6px 18px rgba(0,0,0,.45)}

.mg-pots{display:flex;gap:12px;justify-content:center;margin:12px 0}
.mg-pot{
  width:82px;height:92px;border-radius:14px;display:grid;place-content:center;gap:2px;
  font-size:38px;background:rgba(255,255,255,.07);border:1px solid var(--line);
}
.mg-pot small{font-size:11px;color:var(--dim)}
.mg-pot.open.win{background:rgba(247,201,72,.18);border-color:var(--gold)}
.mg-pot.open.mid{background:rgba(110,231,166,.14);border-color:rgba(110,231,166,.5)}
.mg-pot.picked{outline:3px solid #8fd0ff;outline-offset:2px}
/* 絵合わせ・度胸だめし（2026-09-10）。土台は .mg-pot を使いまわし、動きだけ足す */
.mg-reel{min-width:76px}
.mg-reel.spin{animation:mgReelSpin .18s linear infinite;filter:blur(.4px)}
@keyframes mgReelSpin{0%{transform:translateY(-3px)}50%{transform:translateY(3px)}100%{transform:translateY(-3px)}}
.mg-pot.picked.fell{outline-color:#ff6e6e}
.mg-dare .mg-pot small{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-pot.open.lose{background:rgba(255,110,110,.14);border-color:rgba(255,110,110,.5)}
.mg-pot.open.draw{opacity:.7}
/* 🛒 珍品堂の行商人との出会い（2026-09-11）。荷車の鈴が近づいてくる前振り用 */
.peddler-approach{font-size:64px;text-align:center;animation:peddlerIn 1.6s ease-out both}
@keyframes peddlerIn{
  0%{transform:translateX(-56px) scale(.7);opacity:0}
  60%{opacity:1}
  100%{transform:translateX(0) scale(1);opacity:1}
}
.sheet.peddler{border-color:rgba(247,201,72,.45)}
.sheet.peddler .ev-charline{color:#f3d99b}
/* 🧚 妖精の立ち絵（2026-09-11）。天使・悪魔と同じ .spiritfx を使い、光の色だけ変える */
.spiritfx.fairy img{filter:drop-shadow(0 0 18px rgba(190,255,170,.55))}
.sheet.spirit.fairy{border-color:rgba(150,230,140,.45)}
.sheet.spirit.fairy .ev-charline{color:#cdf0bd}
/* 📜 護衛依頼の条件表（2026-09-11） */
.escort-box{margin:10px auto;max-width:340px;text-align:left;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 12px}
.eb-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:13px}
.eb-row span{color:var(--dim)}
.eb-row.good b{color:#6ee7a6}
.eb-row.bad b{color:#ff8a8a}
/* 👻 幽霊船。霧の中から浮かび上がる感じに、少し青くくすませる */
.gc-banner.ghost img{filter:grayscale(.35) brightness(.85) drop-shadow(0 0 16px rgba(160,200,220,.5))}
.sheet.ghostship{border-color:rgba(160,200,220,.4)}
.sheet.ghostship .ev-charline{color:#bcd4e0}

.mg-bar{
  position:relative;height:38px;margin:14px 0;border-radius:10px;overflow:hidden;
  background:rgba(0,0,0,.32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.mg-zone{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,#f7c948,#d99b1c);opacity:.9}
.mg-zone.mid{background:linear-gradient(180deg,#4f7f63,#3c6350);opacity:.55}
.mg-run{
  position:absolute;top:-3px;bottom:-3px;width:6px;margin-left:-3px;border-radius:3px;
  background:#fff;box-shadow:0 0 12px rgba(255,255,255,.9);
}
.mg-run.stopped{background:#8fd0ff;box-shadow:0 0 14px rgba(143,208,255,.9)}

@media (max-width:560px){
  .roul{height:84px}.roul-cell{width:84px;height:84px}.roul-cell b{font-size:29px}
  .roul-tape{left:calc(50% - 42px)}.roul-win{width:86px}
  .mg-card{width:62px;height:88px;font-size:28px}
  .mg-pot{width:70px;height:80px;font-size:32px}
  .tr-art{font-size:54px}
}


/* ヤミガミのルーレット */
.sheet.roulette.yami{border-color:rgba(160,90,220,.55)}
.yamiroul{background:rgba(30,10,40,.5)}
.yamiroul .roul-win{border-color:#c07bff;box-shadow:0 0 18px rgba(192,123,255,.55), 0 0 0 999px rgba(10,6,18,.5)}
.sheet.roulette.yami .yamifx img{width:76px;height:76px}
.sheet.roulette.yami .roul-res b{font-size:19px}


/* 季節と、金額のルーレット */
.seasontag{
  display:inline-block;margin:2px 0 8px;padding:5px 12px;border-radius:999px;font-size:12px;
  background:rgba(255,255,255,.08);border:1px solid var(--line);
}
.goldroul{background:rgba(48,38,10,.45)}
.goldroul .roul-win{border-color:#ffdc7a;box-shadow:0 0 18px rgba(255,220,122,.55), 0 0 0 999px rgba(10,8,2,.5)}
.roul-cell.amt b{font-size:17px;color:var(--good);letter-spacing:-.02em}
.roul-cell.mgr{font-size:40px}
.sheet.roulette.gold .roul-res b{font-size:26px}

.calseason{display:block;font-size:10.5px;color:var(--dim);margin-top:1px;letter-spacing:.02em}


/* ================= ヤミガミが生きて見えるように ================= */
/* 盤面に降りてくるヤミガミ */
.yami-vis{pointer-events:none}
/* 変身後の姿だけ纏う、フォームの色の大きなオーラ（近くで見せる分、盤面のコマより強く脈打つ） */
.yv-aura{opacity:.7;animation:yvAura 1.1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes yvAura{
  0%,100%{opacity:.5;transform:scale(.86)}
  50%{opacity:.95;transform:scale(1.3)}
}
@media (prefers-reduced-motion:reduce){
  .yv-aura{animation:none;opacity:.6}
}
.yv-img{
  opacity:0;transform-box:fill-box;transform-origin:50% 100%;
  animation:yvIn .34s ease-out forwards, yvFloat 1.6s ease-in-out .34s infinite;
  filter:drop-shadow(0 8px 22px rgba(120,40,180,.8));
}
@keyframes yvIn{
  0%{opacity:0;transform:translateY(-70px) scale(.6)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes yvFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-9px) scale(1.03)}}
.yami-vis.drop .yv-img{animation:yvDrop .42s cubic-bezier(.5,-.4,.7,1.6) forwards}
@keyframes yvDrop{
  0%{transform:translateY(0) scale(1)}
  55%{transform:translateY(-26px) scale(1.14) rotate(-4deg)}
  100%{transform:translateY(120px) scale(.72) rotate(6deg);opacity:.15}
}
/* ヤミガミが出ているあいだは、まわりを暗く */
body.yami-dark #game::after{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(closest-side at 50% 50%,transparent 18%,rgba(24,6,36,.62) 78%);
  animation:ydIn .5s ease-out;
}
@keyframes ydIn{from{opacity:0}to{opacity:1}}

/* 一言のときの絵を大きく、息づかせる */
.yamifx.alive img{
  width:150px;height:150px;
  animation:yaBreath 1.5s ease-in-out infinite;
}
@keyframes yaBreath{
  0%,100%{transform:scale(1) rotate(-1deg)}
  45%{transform:scale(1.07) rotate(1.5deg)}
}
@media (max-width:560px){ .yamifx.alive img{width:118px;height:118px} }

/* ゴーレム（12月にまれに現れる災厄） */
.golemfx{display:flex;justify-content:center;margin:6px 0 10px}
.golemfx img{width:150px;height:150px;object-fit:contain;display:block;
  filter:drop-shadow(0 8px 22px rgba(60,50,30,.7));animation:golemBreath 1.7s ease-in-out infinite}
.golemfx.big img{width:230px;height:230px;filter:drop-shadow(0 10px 30px rgba(60,50,30,.85))}
.golemfx.leaving img{filter:drop-shadow(0 0 18px rgba(255,214,120,.6));opacity:.6;animation:none}
@keyframes golemBreath{
  0%,100%{transform:scale(1) rotate(-1deg)}
  50%{transform:scale(1.04) rotate(1deg)}
}
@media (max-width:560px){
  .golemfx img{width:118px;height:118px}
  .golemfx.big img{width:172px;height:172px}
}
.golem-line{font-size:15px;line-height:1.7;font-style:italic}
.sheet.golem{border-color:rgba(120,100,70,.6);box-shadow:0 0 0 1px rgba(120,100,70,.35),0 20px 60px rgba(0,0,0,.6)}
/* 盤面を歩くゴーレム本体 */
.golem-token{pointer-events:none}
.golem-token image{animation:golemBreath 1.7s ease-in-out infinite}

/* 鬼（5月にまれに現れる、ゴーレムの強化版）（2026-09-10 追加）。
   ゴーレムより一回り速く脈打たせ、炎のような赤いグロウにして「少し悪い」凄みを出す */
.onifx{display:flex;justify-content:center;margin:6px 0 10px}
.onifx img{width:150px;height:150px;object-fit:contain;display:block;
  filter:drop-shadow(0 8px 22px rgba(180,20,10,.75));animation:oniBreath 1.3s ease-in-out infinite}
.onifx.big img{width:230px;height:230px;filter:drop-shadow(0 10px 32px rgba(200,20,10,.9))}
.onifx.leaving img{filter:drop-shadow(0 0 18px rgba(255,120,80,.6));opacity:.6;animation:none}
@keyframes oniBreath{
  0%,100%{transform:scale(1) rotate(-1.5deg)}
  50%{transform:scale(1.06) rotate(1.5deg)}
}
@media (max-width:560px){
  .onifx img{width:118px;height:118px}
  .onifx.big img{width:172px;height:172px}
}
.oni-line{font-size:15px;line-height:1.7;font-style:italic}
.sheet.oni{border-color:rgba(180,20,10,.65);box-shadow:0 0 0 1px rgba(180,20,10,.4),0 20px 60px rgba(0,0,0,.65)}
/* 盤面を歩く鬼本体 */
.oni-token{pointer-events:none}
.oni-token image{animation:oniBreath 1.3s ease-in-out infinite}

/* 隠しボスマス「古龍」（盤上のごく少数のマスに常駐、2026-09-09）。
   専用画像(boss-dragon.webp)が届いたので基本はそれを使い、読み込めない場合だけ絵文字に自動で戻す */
.boss-fear{margin:-20px -20px 10px;border-radius:17px 17px 0 0;overflow:hidden;line-height:0;
  display:flex;align-items:center;justify-content:center;height:170px;
  background:radial-gradient(circle,rgba(150,60,220,.35),rgba(10,0,20,.92))}
.boss-fear span{font-size:96px;display:block;animation:yamiFearShake .12s linear infinite;
  filter:drop-shadow(0 0 22px rgba(190,110,255,.85))}
.boss-fear img{width:100%;height:100%;object-fit:contain;display:block;
  animation:yamiFearShake .12s linear infinite;filter:drop-shadow(0 0 22px rgba(190,110,255,.85))}
.bossfx{display:flex;justify-content:center;margin:6px 0 10px}
.bossfx span{font-size:96px;display:block;filter:drop-shadow(0 0 26px rgba(150,60,220,.8)) drop-shadow(0 10px 26px rgba(0,0,0,.55));
  animation:bob 2.4s ease-in-out infinite}
.bossfx img{width:190px;height:190px;object-fit:contain;display:block;
  filter:drop-shadow(0 0 26px rgba(150,60,220,.8)) drop-shadow(0 10px 26px rgba(0,0,0,.55));
  animation:bob 2.4s ease-in-out infinite}
.bossfx.big span{font-size:130px}
.bossfx.big img{width:280px;height:280px}
@media (max-width:560px){
  .bossfx span{font-size:78px} .bossfx.big span{font-size:98px}
  .bossfx img{width:140px;height:140px} .bossfx.big img{width:190px;height:190px}
}
.boss-line{font-size:15px;line-height:1.7;font-style:italic}
.sheet.boss{border-color:rgba(150,60,220,.65);box-shadow:0 0 0 1px rgba(150,60,220,.45),0 20px 60px rgba(0,0,0,.65)}
.boss-face{box-shadow:0 0 0 2px rgba(190,110,255,.85) !important;filter:drop-shadow(0 0 10px rgba(150,60,220,.6))}
.boss-name{color:#c9a0ff}
/* 本体登場のセリフ(咆哮)は、ほかの説明文よりひときわ大きく・太く見せる（2026-09-09、演出を派手にする要望） */
.boss-roar{font-size:19px;font-weight:800;line-height:1.6;color:#e6d1ff;text-align:center;
  text-shadow:0 0 14px rgba(190,110,255,.75);margin:4px 0 10px}
.boss-line.small{font-size:13px;opacity:.85}
/* 打ち破ったマスが眠っているあいだ、アイコンだけ灰色に沈める（背景円は他のマスと共有描画のため対象外、2026-09-09） */
.boss-dormant .tile-ic{filter:grayscale(1) brightness(.7);opacity:.55}

/* 天狗（11月にまれに現れる、一度きりのいたずらイベント）。
   ゴーレム・鬼のような赤・岩系ではなく、風にたゆたう紫系のグロウで「正体不明の化け物」感を出す */
.tengufx{display:flex;justify-content:center;margin:6px 0 10px}
.tengufx img{width:150px;height:150px;object-fit:contain;display:block;
  filter:drop-shadow(0 8px 22px rgba(140,60,200,.65));animation:tenguSway 2.1s ease-in-out infinite}
.tengufx.big img{width:230px;height:230px;filter:drop-shadow(0 10px 32px rgba(160,70,220,.8))}
@keyframes tenguSway{
  0%,100%{transform:rotate(-2deg) translateY(0)}
  50%{transform:rotate(2deg) translateY(-6px)}
}
@media (max-width:560px){
  .tengufx img{width:118px;height:118px}
  .tengufx.big img{width:172px;height:172px}
}
.tengu-line{font-size:15px;line-height:1.7;font-style:italic}
.mystic{color:#c9a2ff}
.sheet.tengu{border-color:rgba(140,60,200,.6);box-shadow:0 0 0 1px rgba(140,60,200,.4),0 20px 60px rgba(0,0,0,.65)}

/* 決算後に年1回抽選される、バブル年（金）・不況年（暗い赤）（2026-09-11） */
.sheet.bubbleyear{border-color:rgba(255,190,60,.7);box-shadow:0 0 0 1px rgba(255,190,60,.45),0 20px 60px rgba(0,0,0,.65)}
.sheet.recessionyear{border-color:rgba(150,30,30,.7);box-shadow:0 0 0 1px rgba(150,30,30,.45),0 20px 60px rgba(0,0,0,.65)}

/* 🌪️竜巻の呼び声 */
.tornadofx{font-size:64px;text-align:center;margin:4px 0 8px;filter:drop-shadow(0 6px 16px rgba(30,40,20,.6));animation:tornadoSpin 1.1s linear infinite}
@keyframes tornadoSpin{
  0%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(180deg) scale(1.08)}
  100%{transform:rotate(360deg) scale(1)}
}
.tornado-list{display:flex;flex-direction:column;gap:6px;margin:10px 0;text-align:left;max-height:220px;overflow-y:auto}
.tornado-row{display:flex;justify-content:space-between;gap:10px;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:13px;animation:tornadoRowIn .35s ease-out}
.tornado-row span{color:var(--dim);white-space:nowrap}
@keyframes tornadoRowIn{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:translateY(0)}}
.sheet.tornado{border-color:rgba(120,140,90,.6);box-shadow:0 0 0 1px rgba(120,140,90,.35),0 20px 60px rgba(0,0,0,.6)}

/* 📯参集の角笛：竜巻の逆で、脈打つように吸い寄せる。行の積み上げは.tornado-listをそのまま流用（2026-09-07） */
.gatherfx{font-size:64px;text-align:center;margin:4px 0 8px;filter:drop-shadow(0 6px 16px rgba(180,140,40,.6));animation:gatherPulse 1s ease-in-out infinite}
@keyframes gatherPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.sheet.gather{border-color:rgba(230,180,90,.65);box-shadow:0 0 0 1px rgba(230,180,90,.4),0 20px 60px rgba(0,0,0,.6)}
/* 🪨妨害岩の落下：脈打ちではなく、地に落ちてどっしり構える見え方にする */
.gatherfx.rockfx{animation:none;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}

/* お助けレディ */
.helperfx{display:flex;justify-content:center;margin:6px 0 10px}
.helperfx img{width:170px;height:auto;object-fit:contain;display:block;
  filter:drop-shadow(0 8px 22px rgba(120,180,255,.6));animation:helperBob 1.4s ease-in-out infinite}
@keyframes helperBob{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-9px) rotate(2deg)}
}
@media (max-width:560px){ .helperfx img{width:130px} }
.helper-line{font-size:15px;line-height:1.7;font-style:italic}
.sheet.helper{border-color:rgba(120,190,255,.6);box-shadow:0 0 0 1px rgba(120,190,255,.35),0 20px 60px rgba(0,0,0,.6)}

/* 仙人 */
.sagefx{display:flex;justify-content:center;margin:6px 0 10px}
.sagefx img{width:200px;height:auto;object-fit:contain;display:block;
  filter:drop-shadow(0 10px 26px rgba(255,210,120,.55));animation:sageBob 2.2s ease-in-out infinite}
@keyframes sageBob{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-10px) rotate(1deg)}
}
@media (max-width:560px){ .sagefx img{width:150px} }
.sage-line{font-size:15px;line-height:1.7;font-style:italic}
.sheet.sage{border-color:rgba(255,210,120,.6);box-shadow:0 0 0 1px rgba(255,210,120,.35),0 20px 60px rgba(0,0,0,.6)}

.thief-line{font-size:15px;line-height:1.7;font-style:italic}
.sheet.thief{border-color:rgba(120,80,180,.6);box-shadow:0 0 0 1px rgba(120,80,180,.35),0 20px 60px rgba(0,0,0,.6)}


/* 名前を入れるところ（設定画面のいちばん上） */
.namebox{
  margin:0 auto 16px;padding:12px 16px;max-width:420px;border-radius:14px;
  background:rgba(247,201,72,.10);border:1px solid rgba(247,201,72,.4);
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.nb-label{display:block;font-size:12.5px;font-weight:800;color:var(--gold);margin-bottom:7px}
.namebox .field.name{
  width:100%;max-width:none;font-size:16px;text-align:center;padding:10px 12px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.22);border-radius:10px;
}
.namebox .field.name:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(247,201,72,.22)}
.nb-note{display:block;font-size:10.5px;color:var(--dim);margin-top:6px}


/* ================= 季節ごとの地図 ================= */
/* 季節の色は SVG の中の重ね塗り（#seasonFx）だけで表現する。
   ここで CSS の filter をかけると、風景のSVGが1万px超の巨大な面になっている都合で
   ブラウザがタイルに割って描画し、地形の上に四角い継ぎ目が出る（実際に出た）。 */
#seasonFx > g{transition:opacity .8s ease}
.seasonfx rect{transition:fill .8s ease,opacity .8s ease}

/* 舞うもの。季節ごとに色と形を変える */
.sf-bits{pointer-events:none}
.sf-bit{opacity:0;animation-name:sfFall;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes sfFall{
  0%{opacity:0;transform:translateY(-40px) translateX(0)}
  12%{opacity:.85}
  88%{opacity:.7}
  100%{opacity:0;transform:translateY(240px) translateX(90px)}
}
.sf-shape{fill:#ffffff}
.seasonfx.s-spring .sf-shape{fill:#ffc8dd}
.seasonfx.s-summer .sf-shape{fill:#eaffb0;opacity:.5}
.seasonfx.s-autumn .sf-shape{fill:#e58b2a}
.seasonfx.s-winter .sf-shape{fill:#ffffff}
/* 夏はあまり舞わせない（葉が落ちる季節ではない） */
.seasonfx.s-summer .sf-bit:nth-child(n+9){display:none}

/* 季節がかわったときの帯 */
.banner.season.s-spring{background:linear-gradient(90deg,rgba(255,168,205,.95),rgba(255,214,232,.9));color:#4a1f33}
.banner.season.s-summer{background:linear-gradient(90deg,rgba(255,206,90,.95),rgba(255,236,150,.92));color:#4a3708}
.banner.season.s-autumn{background:linear-gradient(90deg,rgba(226,131,42,.95),rgba(255,190,110,.92));color:#432209}
.banner.season.s-winter{background:linear-gradient(90deg,rgba(150,200,245,.95),rgba(220,240,255,.92));color:#17324a}

.roul-cell.city b{font-size:26px}
.roul-cell.city small{font-size:10.5px;color:#dfe6ff;max-width:88px}
.sheet.roulette.gold .roul-res small{display:block;color:var(--dim);font-size:11.5px;margin-top:2px}


/* ================= 出会いがしらのバトル ================= */
.sheet.battle{border-color:rgba(255,170,90,.55);background:linear-gradient(180deg,#2e2417,#191c2e)}
.bt-title{font-size:24px;letter-spacing:.04em;
  background:linear-gradient(180deg,#fff2cf,#ffab4a 60%,#d8781a);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bt-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 6px}
.bt-side{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 6px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.bt-face{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.3)}
span.bt-face{display:grid;place-items:center;font-size:26px;background:#1b1e30}
.bt-side b{font-size:13px}
/* バトルでも本物と同じ立体サイコロを転がす（--ds/--dz はサイコロの大きさ） */
.bt-dice{--ds:56px; --dz:28px; display:flex;justify-content:center;gap:8px;margin:6px 0 12px}
.bt-dice .die{margin:0 auto}
.bt-dice.landed .die{animation:btLand .34s cubic-bezier(.2,1.7,.4,1)}
@keyframes btLand{0%{transform:translateY(-7px) scale(1.1)}60%{transform:translateY(2px) scale(.94)}100%{transform:none}}
/* 勝った側・負けた側を、はっきり見せる */
.bt-side{transition:transform .3s,box-shadow .3s,opacity .3s}
.bt-side.winner{transform:translateY(-4px) scale(1.05);
  box-shadow:0 0 0 2px var(--gold),0 10px 26px rgba(247,201,72,.35);
  background:rgba(247,201,72,.12);border-color:rgba(247,201,72,.6)}
.bt-side.loser{opacity:.62;transform:scale(.96) translateY(3px);filter:grayscale(.35)}
.bt-side.draw{box-shadow:0 0 0 2px rgba(180,190,220,.5);background:rgba(180,190,220,.08)}
.bt-w{font-size:10.5px;color:#ffd48a}
.bt-w small{color:var(--dim);margin-left:3px}
.bt-w.dim{color:var(--dim)}
.bt-total{font-size:22px;font-weight:900;color:var(--gold);opacity:0;
  border-top:1px solid rgba(255,255,255,.15);margin-top:3px;padding-top:3px;min-width:56px}
.bt-total.show{opacity:1;animation:btSettle .35s cubic-bezier(.2,1.7,.4,1)}
@keyframes btSettle{0%{transform:scale(1.6)}60%{transform:scale(.88)}100%{transform:none}}
.bt-vs{font-size:17px;font-weight:900;color:#ff9d4a;flex:none}
.bt-win{margin:8px 0 4px;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:6px}
.bt-wface{width:32px;height:32px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--gold)}
span.bt-wface{display:grid;place-items:center;font-size:19px;background:#1b1e30}
.shop-awning.arms{background:repeating-linear-gradient(90deg,#5b6478 0 18px,#c9d0de 18px 36px)}
.sheet.shopish.arms{background:
  radial-gradient(120% 70% at 50% -10%, rgba(190,205,235,.16), transparent 60%),
  linear-gradient(180deg,#232838 0%,#232741 26%,#191c2e 100%);
  border-color:rgba(185,194,214,.5)}
@media (max-width:560px){ .bt-dice{--ds:46px;--dz:23px} .bt-total{font-size:19px} .bt-title{font-size:20px} }

/* 数えの勝負：もう出た札 */
.mg-usedrow{display:flex;gap:5px;justify-content:center;margin:6px 0 10px;flex-wrap:wrap}
.mg-used{display:grid;place-items:center;width:30px;height:40px;border-radius:6px;font-weight:800;font-size:15px;
  background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--dim)}
/* 追いかけ壺 */
.mg-pots.shellrow{position:relative}
.mg-pot.shell{cursor:default;will-change:transform}


/* マスの色の見かた */
.tilelegend{display:grid;grid-template-columns:repeat(2,1fr);gap:5px 10px;margin:6px 0 12px}
.tl-row{display:flex;align-items:center;gap:6px;font-size:11.5px}
.tl-dot{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:13px;box-shadow:0 0 0 2px rgba(0,0,0,.35) inset}
.tl-row b{font-size:11.5px}
.tl-row small{color:var(--dim);font-size:10.5px}
@media (max-width:560px){ .tilelegend{grid-template-columns:1fr} }


/* タップで止める */
.tapstop{position:fixed;inset:0;z-index:45;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* 目的地決定直後の全体マップ演出：キャプション＋タップ待ち（2026-09-06） */
.goal-reveal-tap{position:fixed;inset:0;z-index:65;cursor:pointer;-webkit-tap-highlight-color:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:calc(env(safe-area-inset-bottom) + 40px)}
.gr-caption{background:rgba(10,12,20,.82);color:#ffe9a8;font-weight:800;font-size:16px;
  padding:10px 22px;border-radius:999px;border:1px solid rgba(247,201,72,.6);
  box-shadow:0 6px 20px rgba(0,0,0,.5);animation:glow 1.4s ease-in-out infinite}
.gr-hint{margin-top:10px;color:#fff;font-size:12px;background:rgba(0,0,0,.55);
  padding:5px 14px;border-radius:999px;animation:bob2 .9s ease-in-out infinite}
.ts-hint{
  position:absolute;left:50%;bottom:8%;z-index:9998;transform:translateX(-50%);
  padding:9px 20px;border-radius:999px;font-size:14px;font-weight:800;white-space:nowrap;
  background:rgba(16,18,30,.88);color:#ffe9a8;border:1px solid rgba(247,201,72,.55);
  box-shadow:0 6px 20px rgba(0,0,0,.5);
  animation:tsPulse 1s ease-in-out infinite;
}
@keyframes tsPulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.92}50%{transform:translateX(-50%) scale(1.06);opacity:1}}


/* ================= 決算（1ページずつ大きく） ================= */
.sheet.settle.stage{width:min(560px,96vw)}
.stg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.stg-year{font-size:12px;color:var(--dim);font-weight:700}
.stg-dots{display:flex;gap:5px}
.stg-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);display:block}
.stg-dots i.on{background:var(--gold);box-shadow:0 0 8px rgba(247,201,72,.7)}
.stg-title{font-size:22px;margin:2px 0 10px;
  background:linear-gradient(180deg,#fff6d4,#f7c948 65%,#dd9d14);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.stg-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.stg-row{
  display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:8px;
  padding:11px 13px;border-radius:13px;text-align:left;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  animation:stgIn .32s ease-out both;
}
.stg-row:nth-child(2){animation-delay:.06s}
.stg-row:nth-child(3){animation-delay:.12s}
.stg-row:nth-child(4){animation-delay:.18s}
@keyframes stgIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.stg-row.bar{grid-template-columns:auto auto auto 1fr}
.stg-rk{font-size:12px;font-weight:800;color:var(--gold);min-width:30px}
.stg-face{width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
span.stg-face{display:grid;place-items:center;font-size:21px;background:#1b1e30}
.stg-nm{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stg-big{font-size:22px;font-weight:900;justify-self:end;font-variant-numeric:tabular-nums}
.stg-big.plus{color:var(--good)}
.stg-sub{grid-column:1/-1;font-size:11px;color:var(--dim)}
.stg-meter{grid-column:1/-1;height:7px;border-radius:4px;background:rgba(0,0,0,.3);overflow:hidden}
.stg-meter i{display:block;height:100%;border-radius:4px;animation:stgBar .6s cubic-bezier(.2,.9,.3,1) both}
@keyframes stgBar{from{width:0 !important}}
.chartwrap.big{min-height:220px}
@media (max-width:560px){
  .stg-title{font-size:19px}.stg-big{font-size:18px}
  .stg-face{width:32px;height:32px}span.stg-face{font-size:18px}
}


/* ================= 季節・決算の一枚絵 ================= */
.sheet.seasonsplash{width:min(620px,96vw);padding:0 0 18px;overflow:hidden}
.ss-wrap{
  position:relative;overflow:hidden;line-height:0;border-radius:17px 17px 0 0;margin-bottom:10px;
  animation:ssIn .6s cubic-bezier(.2,.9,.25,1);
}
.ss-img{width:100%;height:auto;display:block;animation:ssZoom 3.4s ease-out both}
.ss-wrap.noimg{display:none}
@keyframes ssIn{0%{opacity:0;transform:scale(1.14)}100%{opacity:1;transform:scale(1)}}
@keyframes ssZoom{0%{transform:scale(1.1)}100%{transform:scale(1)}}
/* 光が横に走る */
.ss-sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.55) 50%,transparent 66%);
  transform:translateX(-120%);animation:ssSheen 1.1s .25s ease-out;
}
@keyframes ssSheen{to{transform:translateX(120%)}}
.ss-title{
  font-size:26px;margin:2px 0 4px;letter-spacing:.05em;
  background:linear-gradient(180deg,#fff6d4,#f7c948 62%,#dd9d14);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sheet.seasonsplash .mtext{padding:0 16px}
.sheet.seasonsplash.s-spring{border-color:rgba(255,168,205,.6)}
.sheet.seasonsplash.s-summer{border-color:rgba(255,206,90,.6)}
.sheet.seasonsplash.s-autumn{border-color:rgba(226,131,42,.6)}
.sheet.seasonsplash.s-winter{border-color:rgba(150,200,245,.6)}
.sheet.seasonsplash.settle-splash{border-color:rgba(247,201,72,.7)}
@media (max-width:560px){ .ss-title{font-size:21px} }


/* ================= ヤミガミのふきだし ================= */
.yami-say{pointer-events:none;animation:ysIn .22s cubic-bezier(.2,1.6,.4,1)}
.yami-say.out{animation:ysOut .2s ease-in forwards}
@keyframes ysIn{0%{opacity:0;transform-box:fill-box;transform-origin:50% 100%}100%{opacity:1}}
@keyframes ysOut{to{opacity:0}}
.ys-bg{fill:#1a0f24;fill-opacity:.94;stroke:#b06bff;stroke-width:2.5}
.ys-tail{fill:#1a0f24;fill-opacity:.94;stroke:#b06bff;stroke-width:2.5}
.ys-txt{
  font-size:19px;font-weight:800;text-anchor:middle;fill:#f0dcff;
  paint-order:stroke;stroke:#12081a;stroke-width:4;stroke-linejoin:round;
}

/* うろうろ動きまわる */
.yami-vis.roam .yv-img{animation:yvRoam .5s ease-in-out infinite alternate}
@keyframes yvRoam{
  0%{transform:translate(-26px,-6px) rotate(-6deg) scale(1.02)}
  100%{transform:translate(26px,-14px) rotate(7deg) scale(1.06)}
}

/* コマの上のヤミガミも、ゆらゆら生きている */
.tk-yami{animation:tkYami 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes tkYami{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-4px) rotate(5deg)}
}

/* 変身後の姿だけ纏う、フォームの色のオーラ。じわっと脈打って怖さを出す */
.tk-yami-aura{opacity:.85;animation:tkYamiAura 1.3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes tkYamiAura{
  0%,100%{opacity:.65;transform:scale(.88)}
  50%{opacity:1;transform:scale(1.28)}
}
@media (prefers-reduced-motion:reduce){
  .tk-yami-aura{animation:none;opacity:.7}
}

/* いまいるエリア */
.areaTag{
  display:block;font-size:11px;font-weight:700;margin-top:1px;
  color:#ffe9a8;opacity:.95;letter-spacing:.02em;
}


/* ================= 目的地えらびの見せ場 ================= */
.sheet.goalpick{width:min(384px,84vw);padding:0;overflow:hidden;max-height:calc(var(--vh) * .94)}
/* 絵が縦長なので、パネルも縦長にして絵の構図に合わせる */
.gl-stage{position:relative;border-radius:17px;overflow:hidden}
.gl-stage.hasbg{aspect-ratio:760/1602;max-height:calc(var(--vh) * .94)}
/* 動かない・上の見出しが切れない絵にする（前はズームで背景が揺れ、上の文字が隠れていた） */
.gl-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 8%;z-index:0}

.gl-inner{position:relative;z-index:1;padding:20px 14px 18px}
/* 絵があるときは、ルーレットを絵の中ほど、結果を下の札の位置に重ねる */
.gl-stage.hasbg .gl-inner{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-start;padding:0;
}
.gl-stage.hasbg .roul{margin-top:37%;border-radius:0;height:96px}
.gl-stage.hasbg .roul-cell{height:96px}
/* 下の文字が絵に埋もれないよう、うすい暗幕を敷く */
.gl-stage.hasbg .gl-inner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:30%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(10,8,18,.86));z-index:-1;
}
.gl-stage.hasbg .roul-res{margin-top:auto;margin-bottom:4px;padding:0 12px}
.gl-stage.hasbg .btn{margin:0 auto 12px;padding:10px 26px;font-size:15px}
.gl-title{font-size:27px;letter-spacing:.05em}
.gl-sub{margin-bottom:10px}
.roul.goldroul.big{height:118px}
.roul.goldroul.big .roul-cell{width:96px;height:118px}
.roul.goldroul.big .roul-win{width:100px}
.gl-stage.decided{animation:glHit .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes glHit{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
/* 8回に1回の「収益2倍」ボーナス目的地：枠ごと金色に脈打たせ、決着後に札を重ねて出す（2026-09-08） */
.gl-stage.doubled{box-shadow:0 0 0 3px rgba(255,200,60,.7),0 0 40px rgba(255,190,60,.6);animation:glDoubleGlow 1.1s ease-in-out infinite}
@keyframes glDoubleGlow{0%,100%{box-shadow:0 0 0 3px rgba(255,200,60,.5),0 0 26px rgba(255,190,60,.4)}50%{box-shadow:0 0 0 5px rgba(255,215,110,.9),0 0 46px rgba(255,190,60,.75)}}
.gl-double{
  position:absolute;left:50%;top:14%;transform:translateX(-50%);z-index:4;white-space:nowrap;
  padding:6px 16px;border-radius:999px;font-size:14px;font-weight:800;color:#3a2410;
  background:linear-gradient(180deg,#fff6d6,#ffd76b 60%,#f2ab1f);box-shadow:0 4px 16px rgba(255,190,60,.6);
  animation:gcDoublePop .5s cubic-bezier(.2,1.6,.4,1);
}
@media (max-width:560px){ .gl-double{font-size:11.5px;padding:5px 12px} }
@media (max-width:560px){
  .gl-title{font-size:21px}
  .roul.goldroul.big{height:100px}
  .roul.goldroul.big .roul-cell{height:100px}
}

/* 伏せてある数字 */
.pc-money.masked, .masked{color:var(--dim) !important;letter-spacing:.06em}

/* いちばん最初だけ、絵の見出しに重ねる帯 */
/* 背景の絵には「次の目的地をえらぼう！」の文字が描きこまれている。
   1回目だけは「最初の」なので、その文字の上にぴったり重ねて隠す。
   （すきまが空くと絵の文字が透けて二重に見える。実際に見えた） */
.gl-firstband{
  position:absolute;left:0;right:0;top:0;z-index:3;
  height:19%;display:flex;align-items:center;justify-content:center;
  padding:0 10px;text-align:center;line-height:1.25;
  font-size:22px;font-weight:900;letter-spacing:.02em;
  color:#ffeaa7;text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 16px rgba(0,0,0,.9);
  background:
    linear-gradient(180deg,rgba(10,8,4,.97) 0%,rgba(10,8,4,.95) 62%,rgba(10,8,4,0) 100%),
    radial-gradient(120% 90% at 50% 30%,rgba(60,40,10,.95),rgba(10,8,4,.9));
}
@media (max-width:560px){ .gl-firstband{font-size:17px} }
@media (max-width:560px){ .gl-firstband{font-size:14px;padding:6px 12px} }


/* ================= 自分のカード（1人ぶんを大きく） ================= */
.pcard.solo{
  display:grid;gap:5px;padding:12px 13px;border-radius:15px;min-width:216px;
  background:linear-gradient(180deg,rgba(30,34,58,.94),rgba(20,23,40,.94));
  border:1px solid var(--line);box-shadow:0 8px 26px rgba(0,0,0,.45);
  border-left:4px solid var(--c);
}
.pcard.solo .pc-rank{font-size:11px;font-weight:800;color:var(--gold)}
.pcard.solo .pc-top{display:flex;align-items:center;gap:9px}
.pcard.solo .pc-face{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 2px var(--c)}
.pcard.solo span.pc-face{display:grid;place-items:center;font-size:26px;background:#1b1e30}
.pc-id{display:flex;flex-direction:column;gap:1px;min-width:0}
.pcard.solo .pc-name{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-area{font-size:10.5px;color:#ffe9a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard.solo .pc-money{font-size:23px;font-weight:900;color:var(--good);line-height:1.1;font-variant-numeric:tabular-nums}
.pcard.solo .pc-money.neg{color:var(--bad)}
.pcard.solo .pc-sub1{font-size:11.5px;color:var(--dim)}
.pc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:2px}
.pc-stats .ps{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;
  background:rgba(255,255,255,.06);border-radius:8px;padding:5px 2px;overflow:hidden}
.pc-stats .ps b{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-stats .ps b.long{font-size:10.5px}   /* 年収が100万を超えるなど桁が増えたとき「…」で切れないよう縮小（2026-09-05） */
.pc-stats .ps b.xlong{font-size:8.5px;letter-spacing:-.02em}   /* 1000億超の年収や1000件超の物件など、さらに長いとき（2026-09-12） */
.pc-stats .ps small{font-size:9px;color:var(--dim)}
.pc-extra{display:flex;flex-wrap:wrap;gap:4px}
.pc-extra i{font-style:normal;font-size:10.5px;padding:3px 7px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:#dfe6ff}
.pc-extra i.wpn{background:rgba(255,196,90,.14);border-color:rgba(255,196,90,.5);color:#ffe1a8;font-weight:700}
.pcard.solo .pc-yami{font-size:10.5px;color:#e4b0ff;font-weight:700}
@media (max-width:820px){
  /* 自分のカードと相手の列で、横幅を半分ずつ分けあう。
     どちらかを flex:1 1 auto にすると片方が場所を独りじめして、
     もう片方の中身が切れる（実際に相手の距離が画面外に出た） */
  .pcard.solo{flex:1 1 0;min-width:0}
  .rivalrow{flex:1 1 0;min-width:0}
}
@media (max-width:560px){
  .pcard.solo{padding:9px 10px}
  .pcard.solo .pc-money{font-size:19px}
  .pcard.solo .pc-face{width:38px;height:38px}
}
@media (max-width:400px){
  /* flex-basis を与えると、その幅ぶん先取りしてしまい相手の列が狭くなる。
     半分ずつ分けあうため basis は 0 のままにすること */
  .pcard.solo{padding:7px 8px}
  .pcard.solo .pc-face{width:32px;height:32px}
  .pcard.solo .pc-money{font-size:16px}
  .pcard.solo .pc-name{font-size:13px}
  .pc-stats{gap:2px}
  .pc-stats .ps{padding:3px 1px}
  .pc-stats .ps b{font-size:11px}
  .pc-stats .ps b.long{font-size:9px}
  .pc-stats .ps b.xlong{font-size:7.5px;letter-spacing:-.02em}
  /* 8pxはスマホ実機で読みにくい（2026-09-14の実機相当の検査で指摘）。10pxまで上げる */
  .pc-stats .ps small{font-size:10px}
  .rv-face{width:22px;height:22px}
  .rv-name{font-size:10.5px}
  .rv-money,.rv-at{font-size:9px}
}


/* ================= 案内人 ================= */
.sheet.guide{width:min(520px,94vw);border-color:rgba(120,160,255,.45)}
.guide-row{display:flex;gap:12px;align-items:flex-start;text-align:left;margin-bottom:12px}
.guide-face{
  width:78px;height:78px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 22%;
  box-shadow:0 0 0 3px rgba(140,175,255,.55),0 6px 18px rgba(0,0,0,.5);
  animation:gdIn .3s cubic-bezier(.2,1.6,.4,1);
}
@keyframes gdIn{0%{transform:scale(.6) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
.guide-bubble{
  position:relative;flex:1;min-width:0;padding:11px 14px;border-radius:14px;
  background:rgba(255,255,255,.08);border:1px solid rgba(140,175,255,.35);
}
.guide-bubble::before{
  content:"";position:absolute;left:-8px;top:22px;width:0;height:0;
  border:8px solid transparent;border-right-color:rgba(140,175,255,.35);
}
.guide-name{display:block;font-size:11.5px;color:#9fc0ff;margin-bottom:3px}
.guide-name.big{font-size:15px}
.guide-text{margin:0;font-size:14px;line-height:1.65;color:#eaf0ff}
.guide-text b{color:var(--gold)}

/* はじまりのあいさつ（全身） */
.sheet.guide.intro{width:min(600px,95vw);padding:16px}
.guide-hero{display:flex;gap:14px;align-items:flex-end;text-align:left}
.guide-full{
  width:min(210px,42%);height:auto;flex:none;border-radius:14px;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.55));
  animation:gdSlide .45s cubic-bezier(.2,1.2,.35,1);
}
@keyframes gdSlide{0%{transform:translateX(-24px);opacity:0}100%{transform:none;opacity:1}}
.guide-hello{flex:1;min-width:0;padding-bottom:6px}
.guide-btns{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.guide-btns .btn{width:100%}
@media (max-width:560px){
  .guide-hero{flex-direction:column;align-items:center;text-align:center}
  .guide-full{width:min(180px,58%)}
  .guide-face{width:62px;height:62px}
  .guide-text{font-size:13px}
}


/* 相手の居どころ・所持金（総資産は決算のときだけ） */
.rivalrow{display:flex;flex-direction:column;gap:5px;margin-top:7px}
.rv{
  /* 幅212pxの細いパネルに入るので、名前の下に「所持金・距離」を回した2段組み。
     以前は画面幅820px以下のときだけ2段にしていたが、パネルの幅は画面幅で
     変わらないため、PCでは名前が「…」で切れていた（2026-09-14） */
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"f n n" "f m d";
  align-items:center;column-gap:6px;row-gap:0;
  padding:4px 7px;border-radius:11px;
  background:rgba(20,23,40,.82);border:1px solid var(--line);border-left:3px solid var(--c);
  opacity:.75;transition:opacity .2s,transform .2s;
}
.rv.on{opacity:1;transform:translateX(3px);box-shadow:0 0 0 1px var(--c) inset}
.rv.yami{border-color:rgba(190,120,255,.6)}
/* 天使・悪魔も、ヤミガミと同じく枠の色で誰に憑いているか一目で分かるようにする（2026-09-11） */
.rv.angel{border-color:rgba(255,209,102,.7)}
.rv.devil{border-color:rgba(255,107,107,.7)}
.rv-face{width:26px;height:26px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--c)}
span.rv-face{display:grid;place-items:center;font-size:15px;background:#1b1e30}
.rv-name{font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* 名前の中に入れると長い名前で省略記号(…)に隠れるため、右下のエリア表示側に置く（2026-09-06） */
.rv-yami{display:none;font-style:normal;font-size:11px;margin-right:3px;animation:rvYamiPulse 1s ease-in-out infinite}
.rv-spirit{display:none;font-style:normal;font-size:11px;margin-right:3px;animation:rvYamiPulse 1.4s ease-in-out infinite}
.rv-spirit.angel{color:#ffd166}
.rv-spirit.devil{color:#ff6b6b}
@keyframes rvYamiPulse{0%,100%{opacity:1}50%{opacity:.5}}

/* 2段組みの置き場所（幅にかかわらず、いつもこの形） */
.rv-face{grid-area:f;align-self:center}
.rv-name{grid-area:n;align-self:end}
.rv-money{grid-area:m;align-self:start;justify-self:start;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rv-at{grid-area:d;align-self:start;justify-self:end}
.rv-money{font-size:10.5px;font-weight:800;color:var(--good);white-space:nowrap}
.rv-money.neg{color:var(--bad)}
.rv-at{font-size:10.5px;color:var(--dim);white-space:nowrap}
/* 店の主人の顔 */
.sg-face img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 30%}


/* ===== すがた選び（2026-09-11）=====
   1人用は好きな1体、2人対戦は取り合い。決まった相手のすがたは黒く沈めて押せなくする */
.lookgrid { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 6px 0 14px; }
.lookbtn {
  position: relative; width: 124px; padding: 8px 6px 10px; border-radius: 16px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.12);
  color: #e9ecf6; font: inherit; transition: transform .12s, border-color .12s, background .12s;
}
.lookgrid.small .lookbtn { width: 106px; padding: 6px 4px 8px; }
.lookbtn:hover:not(.taken) { transform: translateY(-3px); background: rgba(255,255,255,.10); }
.lookbtn img {
  width: 74px; height: 74px; border-radius: 50%; display: block; margin: 0 auto 6px;
  border: 3px solid var(--c, #4a9eff); background: #11131c; object-fit: cover;
}
.lookgrid.small .lookbtn img { width: 58px; height: 58px; }
.lookbtn b { display: block; font-size: 13px; line-height: 1.25; white-space: nowrap; }
.lookbtn small { display: block; font-size: 10.5px; opacity: .65; white-space: nowrap; }
.lookgrid.small .lookbtn b { font-size: 12px; }
.lookgrid.small .lookbtn small { font-size: 10px; }
.lookbtn.on { border-color: var(--c, #4a9eff); background: rgba(255,255,255,.13); box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.lookbtn.locked::after {
  content: '決定'; position: absolute; top: 6px; right: 6px; font-size: 10px;
  padding: 2px 6px; border-radius: 999px; background: var(--c, #4a9eff); color: #10121a; font-weight: 700;
}
/* 相手が先に決めたすがた：黒く沈めて押せなくする */
.lookbtn.taken { cursor: not-allowed; opacity: .5; border-color: rgba(255,255,255,.08); }
.lookbtn.taken img { filter: grayscale(1) brightness(.28); border-color: rgba(255,255,255,.14); }
.lookbtn.taken::after {
  content: '相手が決定'; position: absolute; top: 6px; right: 6px; font-size: 10px;
  padding: 2px 6px; border-radius: 999px; background: #2a2e3d; color: #aab; font-weight: 700;
}
.tbtn.looklock { margin-top: 4px; }
.tbtn.looklock.done { opacity: .6; }


/* ===== エンディングの盛り上げ（2026-09-12）===== */

/* 旅の振り返り：上から順にすべり込ませる */
.hi-list{display:flex;flex-direction:column;gap:8px;margin:10px 0 14px;text-align:left}
.hi-row{
  display:flex;gap:10px;align-items:flex-start;
  background:rgba(255,255,255,.055);border-radius:12px;padding:8px 12px;
  opacity:0;transform:translateY(10px);animation:hiIn .42s ease forwards;
}
.hi-ic{font-size:22px;line-height:1.2;flex:0 0 auto}
.hi-body{display:block;min-width:0}
.hi-body b{display:block;font-size:14px;margin-bottom:2px}
.hi-body small{display:block;font-size:12px;opacity:.78;line-height:1.45}
@keyframes hiIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hi-row{opacity:1;transform:none;animation:none}}

/* 1位発表のタメ：顔を伏せた影 */
.gc-shadow{
  width:104px;height:104px;border-radius:50%;margin:0 auto;
  display:grid;place-items:center;font-size:46px;font-weight:800;color:#0c0e16;
  background:linear-gradient(180deg,#2a2f42,#161a26);
  border:3px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 6px rgba(255,214,120,.10);
  animation:gcPulse 1s ease-in-out infinite;
}
@keyframes gcPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.gc-big.pop{animation:gcPop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes gcPop{0%{transform:scale(.55);opacity:0}100%{transform:scale(1);opacity:1}}
.gc-close{color:#ffd678;font-weight:700}
@media (prefers-reduced-motion:reduce){
  .gc-shadow,.gc-big.pop{animation:none}
}

/* 称号アップ */
.ttl-up{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:10px 0 6px}
.ttl-old{opacity:.55;font-size:14px}
.ttl-arrow{opacity:.5}
.ttl-new{font-size:19px;font-weight:800;color:#ffd678;text-shadow:0 2px 10px rgba(247,201,72,.45)}

/* エンドロール */
.endroll{
  position:relative;height:min(62vh,420px);overflow:hidden;
  border-radius:14px;margin:0 -6px 8px;background:#111524;
}
.endroll .er-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;filter:saturate(.9);
}
.endroll::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#111524 0%,rgba(17,21,36,0) 18%,rgba(17,21,36,0) 82%,#111524 100%);
}
.er-scroll{
  position:absolute;left:0;right:0;top:100%;
  display:flex;flex-direction:column;gap:7px;padding:0 18px;
  animation:erUp var(--er-sec,14s) linear forwards;
}
@keyframes erUp{to{transform:translateY(calc(-100% - 62vh))}}
.er-title{font-size:19px;font-weight:800;letter-spacing:.08em;margin-bottom:2px}
.er-sub{font-size:12px;opacity:.7;margin-bottom:10px}
.er-row{display:flex;align-items:baseline;gap:10px;font-size:14px}
.er-yr{flex:0 0 64px;text-align:right;opacity:.7;font-size:12px}
.er-nm{flex:1 1 auto;text-align:left;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.er-as{flex:0 0 auto;font-variant-numeric:tabular-nums;opacity:.85}
.er-end{margin-top:16px;font-size:13px;opacity:.75}
@media (prefers-reduced-motion:reduce){
  .er-scroll{position:static;animation:none;padding:14px 18px}
  .endroll{height:auto;max-height:62vh;overflow:auto}
}


/* 泥棒・ヤミガミの被害発表（2026-09-12） */
.dmg-list{display:flex;flex-direction:column;gap:7px;margin:10px 0 10px;text-align:left}
.dmg-row{
  display:flex;gap:9px;align-items:center;
  background:rgba(255,255,255,.055);border-radius:12px;padding:7px 11px;
  opacity:0;transform:translateY(9px);animation:hiIn .4s ease forwards;
}
.dmg-rk{
  flex:0 0 20px;text-align:center;font-weight:800;font-size:13px;opacity:.65;
  font-variant-numeric:tabular-nums;
}
.dmg-face{width:36px;height:36px;border-radius:50%;flex:0 0 auto;object-fit:cover;
  border:2px solid rgba(255,255,255,.18);background:#11131c}
.dmg-body{flex:1 1 auto;min-width:0}
.dmg-body b{display:block;font-size:13.5px;line-height:1.3}
.dmg-body small{display:block;font-size:11px;opacity:.72;line-height:1.4}
.dmg-body .dmg-worst{opacity:.6}
.dmg-amt{
  flex:0 0 auto;text-align:right;font-weight:800;font-size:14px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.dmg-amt.bad{color:#ff8b7e}
.dmg-amt i{display:block;font-style:normal;font-size:10.5px;font-weight:600;opacity:.72}
@media (prefers-reduced-motion:reduce){.dmg-row{opacity:1;transform:none;animation:none}}


/* 💹 好調の知らせ（2026-09-12）：誰の物件かを、案内係のふきだしの下に添える */
.sheet.boom .boom-who{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:10px 0 2px;font-size:13px;opacity:.9;
}
.boom-face{width:34px;height:34px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(255,255,255,.2);background:#11131c}
.boom-who span{font-weight:800}
.amount.big{font-size:30px}


/* 🧙 謎の老人（2026-09-12） */
.sheet.elder{border-color:rgba(150,120,200,.45)}
.elder-title{color:#c9b6ff;letter-spacing:.03em}
.elder-title.good{color:#8fe9a8}
.elder-title.bad{color:#ff8b7e}
.elder-sil{font-size:64px;text-align:center;filter:grayscale(.6) brightness(.7);
  animation:elderBreathe 2.4s ease-in-out infinite}
@keyframes elderBreathe{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.05);opacity:1}}
.elder-line{line-height:1.7}
.elder-item{display:flex;gap:10px;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border-radius:12px;padding:9px 13px;margin:10px 0}
.ei-ic{font-size:28px}
.ei-body{text-align:left;min-width:0}
.ei-body b{display:block;font-size:14px}
.ei-body small{display:block;font-size:11px;opacity:.7}
.elder-row{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.elder-chip{display:flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(255,255,255,.06);border:1px solid rgba(150,120,200,.35);
  border-radius:11px;padding:7px 10px;font-size:11.5px;min-width:74px}
.elder-chip b{font-size:20px}
.elder-chip small{opacity:.7;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.elder-sil{animation:none}}

/* 謎の老人の立ち絵（2026-09-12）。横長の帯として上に出す */
.elder-pic{margin:0 -20px 10px;overflow:hidden;border-radius:17px 17px 0 0;line-height:0;
  animation:gcBan .5s cubic-bezier(.2,1.4,.4,1)}
.elder-pic img{width:100%;height:auto;display:block}
.sheet.feardark .elder-pic{margin:0 -20px 12px;border-radius:17px}
.sheet.feardark .elder-pic.dim img{filter:brightness(.55) saturate(.8)}
@media (prefers-reduced-motion:reduce){.elder-pic{animation:none}}

/* 金額の行（2026-09-12）。1億を超えて桁が伸びても、「年収」が「年」「収」に割れたり
   数字の途中で折り返したりしないよう、項目ごとにひとかたまりとして扱う。
   入りきらないときは項目単位で改行し、数字そのものは決して切らない */
.cashline.wrapline{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px}
.cashline .cl-item{white-space:nowrap;font-variant-numeric:tabular-nums}
.nowrapnum{white-space:nowrap;font-variant-numeric:tabular-nums}


/* 🗺️ 地方に初めて入ったときの一言（2026-09-14）。
   旅の途中で土地の空気を伝える、短い差しこみ */
.areaenter{ text-align:center; padding:6px 2px 2px }
.ae-icon{ font-size:44px; line-height:1; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); animation:aeIn .5s ease-out }
.ae-name{ margin:8px 0 6px; font-size:18px; letter-spacing:.04em; color:#ffe9a8 }
.ae-line{ margin:0 auto 10px; max-width:30em; font-size:13.5px; line-height:1.9; color:#dfe6ff }
@keyframes aeIn{ from{ opacity:0; transform:translateY(10px) scale(.9) } to{ opacity:1; transform:none } }
.areaenter-modal .sheet{ background:linear-gradient(180deg, rgba(30,36,58,.97), rgba(18,22,38,.97)) }

/* 👑 独占した街の称号（2026-09-14）。看板の下に小さく出す */
.city-title{ font-size:9.5px; font-weight:800; text-anchor:middle;
  paint-order:stroke; stroke:#0d1018; stroke-width:4; stroke-linejoin:round; opacity:.95 }

/* 📜 年のはじめに出す「この一年の噂」（2026-09-14）。時勢の下にそっと添える */
.chronicle{ margin:10px auto 2px; max-width:34em; padding:8px 12px; border-radius:10px;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,233,168,.22) }
.chr-h{ font-size:11px; font-weight:800; color:#ffe9a8; letter-spacing:.06em; margin-bottom:4px }
.chr-line{ margin:2px 0; font-size:12px; line-height:1.8; color:#dfe6ff; text-align:left }

/* 引っ越しの引き継ぎのお知らせ（2026-09-15）。タイトルの上に小さく出して、8秒で消える */
.mignote{position:fixed;left:50%;transform:translateX(-50%);top:12px;z-index:99;
  max-width:calc(100vw - 32px);padding:10px 16px;border-radius:12px;
  background:rgba(24,26,42,.94);border:1px solid var(--line);
  color:var(--tx);font-size:12.5px;line-height:1.6;text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.45);cursor:pointer}