/* =====================================================================
   ＠パーティーII 超リメイク  画面デザイン
   苔むした石の床と、真鍮のランプ。コマンドは原作どおり「＠」で始まる
   ・地の色は暗い緑の石（プレイヤーが選ぶ名前の色が映えるように暗め）
   ・真鍮＝押せるもの／進むこと、翠＝HP・回復、瑠璃＝MP、朱＝ダメージ・危険、桃＝敵の名前
   ・見出し・数字・＠コマンドはドット文字（DotGothic16）。本文は読みやすい BIZ UDPゴシック
   ===================================================================== */
:root {
  --bg: #13211c;
  --bg-deep: #0d1713;
  --panel: #1a2b25;
  --panel-2: #213730;
  --raise: #2a463c;
  --line: rgba(226, 238, 228, .1);
  --line-2: rgba(226, 238, 228, .22);
  --text: #efe8d6;
  /* 第6弾：うすい灰色の文字を少し明るく（地の色とのコントラストを上げる。muted 約9:1・faint 約6:1） */
  --muted: #c6cfc1;
  --faint: #a3afa5;
  --brass: #e3b341;
  --brass-hi: #f1cc6c;
  --brass-ink: #2a1e04;
  --brass-deep: #9c731b;
  --hp: #5cc8a8;
  --mp: #6fa8f5;
  --ember: #f0744a;
  --rose: #ff86b3;
  --violet: #c7adff;
  --luck: #a9e27c;
  --r-panel: 14px;
  --r-btn: 10px;
  --font-body: 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', 'Noto Sans CJK JP', 'Meiryo', system-ui, sans-serif;
  --font-dot: 'DotGothic16', 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', 'Noto Sans CJK JP', 'Meiryo', sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tb-h: 60px;
  /* 第6弾：文字の大きさ。いちばん小さい文字は 14px、ほかは --fs-k 倍。
     設定の「文字の大きさ：大きい」（prefs.js が <html class="big-text"> を付ける）では 16px・1.14倍 */
  --fs-k: 1;
  --fs-min: 14px;
  /* HPの色（緑 → 黄 → 赤。色だけでなく数字も出す） */
  --hp-mid: #f2c94c;
  --hp-lo: #ff6b57;
  color-scheme: dark;
}
html.big-text { --fs-k: 1.14; --fs-min: 16px; }

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(120% 480px at 50% 0%, rgba(227, 179, 65, .07), transparent 70%) no-repeat, var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: calc(15px * var(--fs-k));
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brass-hi); }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.num { font-variant-numeric: tabular-nums; }
/* 第6弾：<small> も、いちばん小さい文字より小さくしない（ブラウザの決まりの「ひとまわり小さく」をやめる） */
small { font-size: max(var(--fs-min), .85em); }
.hide { display: none !important; }
h1, h2, h3 { line-height: 1.3; }

.boot { min-height: 100vh; display: grid; place-content: center; text-align: center; color: var(--muted); padding: 16px; }
.boot-mark { font-family: var(--font-dot); font-size: 64px; color: var(--brass); line-height: 1; }

/* ---------------------------------------------------------------------
   ボタン・小部品
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 44px; padding: 0 18px; border-radius: var(--r-btn);
  border: 1.5px solid var(--line-2); background: var(--panel-2); color: var(--text);
  font-weight: 700; white-space: nowrap; transition: background .15s, transform .08s;
}
.btn:hover { background: var(--raise); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--brass); color: var(--brass-ink); border-color: var(--brass); box-shadow: 0 3px 0 var(--brass-deep); }
.btn-primary:hover { background: var(--brass-hi); }
.btn-primary:active { box-shadow: 0 1px 0 var(--brass-deep); transform: translateY(2px); }
.btn-ghost { background: transparent; }
.btn-danger { border-color: rgba(240, 116, 74, .6); color: #ffc0a8; background: rgba(240, 116, 74, .08); }
.btn-small { min-height: 44px; padding: 0 12px; font-size: var(--fs-min); }
.btn-wide { width: 100%; }
.btn-big { width: 100%; min-height: 58px; font-family: var(--font-dot); font-size: calc(19px * var(--fs-k)); font-weight: 400; letter-spacing: .04em; }
.icon-btn { width: 44px; height: 44px; flex: none; border-radius: var(--r-btn); border: 1.5px solid var(--line-2); background: var(--panel-2); display: inline-grid; place-items: center; font-size: calc(18px * var(--fs-k)); color: var(--text); }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: rgba(226, 238, 228, .08); font-size: var(--fs-min); color: var(--muted); white-space: nowrap; font-weight: 700; }
.chip.gold { background: rgba(227, 179, 65, .16); color: var(--brass-hi); }
.chip.ok { background: rgba(92, 200, 168, .16); color: var(--hp); }
.chip.warn { background: rgba(240, 116, 74, .18); color: #ffb398; }
.chip.sleep { background: rgba(111, 168, 245, .18); color: #bcd6ff; }

.avatar {
  --c: #ffffff;
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center; font-size: calc(22px * var(--fs-k)); line-height: 1;
  background: linear-gradient(160deg, var(--raise), var(--panel));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent);
}
.avatar.sm { width: 30px; height: 30px; font-size: calc(16px * var(--fs-k)); border-radius: 8px; }
.avatar.lg { width: 64px; height: 64px; font-size: 34px; border-radius: 16px; }

.bar { display: block; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .4); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 3px; background: var(--hp); transition: width .25s ease-out, background-color .25s; }
.bar.hp > i { background: var(--hp); }
/* HP：緑（5割以上）→ 黄（3割以上）→ 赤（3割未満）。色だけでなく、となりに数字も出す */
.bar.hp[data-lv="mid"] > i { background: var(--hp-mid); }
.bar.hp.low > i, .bar.hp[data-lv="lo"] > i { background: var(--hp-lo); }
.bar.mp > i { background: var(--mp); }
.bar.exp > i { background: var(--brass); }

.meter { display: grid; gap: 2px; min-width: 0; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: var(--fs-min); line-height: 1.2; }
.meter-top b { font-family: var(--font-dot); font-weight: 400; color: var(--muted); }
.meter.hp .meter-top b { color: var(--hp); }
.meter.mp .meter-top b { color: var(--mp); }
.meter.mp .bar > i { background: var(--mp); }
.meter.hp.mid .bar > i { background: var(--hp-mid); }
.meter.hp.low .bar > i { background: var(--hp-lo); }
.meter.hp.mid .meter-top .num { color: #ffe08a; }
.meter.low .meter-top .num { color: #ffb398; }
.meter-top small { color: var(--faint); }

input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%; min-height: 44px; padding: 8px 12px; border-radius: var(--r-btn);
  border: 1.5px solid var(--line-2); background: rgba(5, 12, 9, .5); color: var(--text);
  font-size: calc(16px * var(--fs-k)); /* スマホで勝手に拡大しないように16px */
}
input:focus, select:focus, textarea:focus { border-color: var(--brass); outline: none; }
.field { display: grid; gap: 6px; font-size: var(--fs-min); color: var(--muted); min-width: 0; }
fieldset.field { border: 0; margin: 0; padding: 0; }
fieldset.field legend { padding: 0; margin-bottom: 6px; }
.form-grid { display: grid; gap: 14px; }
.err { color: #ffb398; font-size: var(--fs-min); min-height: 1.4em; }
.hint { margin: 4px 0 0; font-size: var(--fs-min); color: var(--faint); }
.empty { padding: 24px 12px; text-align: center; color: var(--muted); }
.empty .btn { margin-top: 10px; }

/* 切りかえボタン（性別・人数・制限時間） */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; flex: 1 1 0; min-width: 64px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: grid; place-items: center; min-height: 44px; padding: 4px 10px; border-radius: var(--r-btn); border: 1.5px solid var(--line-2); background: rgba(5, 12, 9, .35); color: var(--text); font-weight: 700; text-align: center; line-height: 1.25; cursor: pointer; }
.seg span small { display: block; font-size: var(--fs-min); font-weight: 400; color: var(--faint); }
.seg input:checked + span { border-color: var(--brass); background: rgba(227, 179, 65, .14); color: var(--brass-hi); }
.seg input:focus-visible + span { outline: 3px solid var(--brass); outline-offset: 2px; }

.color-pick { display: flex; flex-wrap: wrap; gap: 10px; }
.color-pick label { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--sw); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25); }
.color-pick input { position: absolute; opacity: 0; }
.color-pick label:has(input:checked) { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--brass); }
.color-pick label:has(input:focus-visible) { outline: 3px solid var(--brass); outline-offset: 4px; }

.tabs { display: flex; gap: 4px; padding: 4px; background: rgba(0, 0, 0, .28); border-radius: 12px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: 1 0 auto; min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 700; padding: 0 12px; white-space: nowrap; }
.tabs button[aria-selected=true] { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-2); }

.notice { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-panel); background: rgba(240, 116, 74, .12); border: 1.5px solid rgba(240, 116, 74, .45); font-size: var(--fs-min); }
.notice p { margin: 4px 0 10px; }
.announce { display: flex; gap: 10px; align-items: baseline; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--r-panel); background: rgba(227, 179, 65, .1); border: 1.5px solid rgba(227, 179, 65, .45); font-size: var(--fs-min); }
.announce b { color: var(--brass-hi); flex: none; }
.credit { text-align: center; font-size: var(--fs-min); color: var(--faint); padding: 18px 12px calc(18px + var(--safe-b)); }

/* ---------------------------------------------------------------------
   ドット絵（icons.js の絵）。整数倍で、ぼかさずに拡大する
   --------------------------------------------------------------------- */
img.px { display: block; flex: none; max-width: none; image-rendering: crisp-edges; image-rendering: pixelated; -webkit-user-drag: none; user-select: none; }
.em-fb { display: inline-grid; place-items: center; line-height: 1; }

/* ---------------------------------------------------------------------
   タイトル（ログイン・登録）
   夜明け前の空・ドットの「＠」・表の世界と、水にうつる裏の世界（くちやみが岸からしのびよる）
   外のフォントや画像は使わない（ネットにつながっていなくても同じ見た目）。枠は角の欠けたドットの枠
   --------------------------------------------------------------------- */
.title-screen {
  position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh;
  padding: 22px 16px calc(28px + var(--safe-b)); overflow: hidden;
  background:
    radial-gradient(100% 420px at 50% 0%, rgba(120, 146, 230, .2), transparent 70%) no-repeat,
    linear-gradient(180deg, #0a1220 0, #0f1a2e 300px, #12211d 720px, var(--bg) 900px) no-repeat,
    var(--bg);
}
/* 星（2px と 3px のドット。大きい星はゆっくりまたたく） */
.ts-stars { position: absolute; left: 0; top: 0; width: 100%; height: 480px; z-index: -1; pointer-events: none; }
.ts-stars i { position: absolute; left: 0; top: 0; width: 2px; height: 2px; box-shadow: 2.0vw 412px 0 0 rgba(207,224,255,.55), 15.4vw 426px 0 0 rgba(255,240,200,.45), 73.9vw 206px 0 0 rgba(207,224,255,.35), 84.8vw 226px 0 0 rgba(207,224,255,.35), 31.3vw 34px 0 0 rgba(207,224,255,.35), 75.8vw 442px 0 0 rgba(207,224,255,.55), 54.1vw 24px 0 0 rgba(255,240,200,.45), 44.2vw 450px 0 0 rgba(207,224,255,.35), 38.3vw 354px 0 0 rgba(207,224,255,.35), 61.3vw 294px 0 0 rgba(207,224,255,.35), 43.7vw 134px 0 0 rgba(207,224,255,.35), 46.8vw 156px 0 0 rgba(207,224,255,.55), 36.6vw 380px 0 0 rgba(207,224,255,.35), 97.4vw 126px 0 0 rgba(207,224,255,.55), 38.6vw 290px 0 0 rgba(207,224,255,.35), 17.6vw 412px 0 0 rgba(207,224,255,.35), 80.9vw 228px 0 0 rgba(255,240,200,.45), 18.7vw 314px 0 0 rgba(255,240,200,.45), 83.9vw 322px 0 0 rgba(255,240,200,.45), 21.1vw 282px 0 0 rgba(207,224,255,.35), 49.5vw 226px 0 0 rgba(255,240,200,.45), 96.4vw 222px 0 0 rgba(255,240,200,.45), 95.1vw 84px 0 0 rgba(207,224,255,.55), 4.0vw 418px 0 0 rgba(207,224,255,.35), 29.3vw 216px 0 0 rgba(207,224,255,.55), 22.7vw 364px 0 0 rgba(255,240,200,.45), 17.3vw 382px 0 0 rgba(255,240,200,.45), 44.9vw 310px 0 0 rgba(207,224,255,.55), 79.2vw 210px 0 0 rgba(207,224,255,.55), 44.8vw 12px 0 0 rgba(207,224,255,.55), 18.7vw 150px 0 0 rgba(207,224,255,.35), 57.6vw 42px 0 0 rgba(255,240,200,.45), 72.0vw 218px 0 0 rgba(207,224,255,.35), 5.8vw 298px 0 0 rgba(207,224,255,.35), 33.7vw 60px 0 0 rgba(207,224,255,.55), 2.8vw 326px 0 0 rgba(255,240,200,.45), 8.0vw 426px 0 0 rgba(255,240,200,.45), 27.8vw 74px 0 0 rgba(207,224,255,.55), 70.4vw 50px 0 0 rgba(207,224,255,.35), 78.7vw 402px 0 0 rgba(255,240,200,.45), 86.0vw 344px 0 0 rgba(207,224,255,.35), 50.6vw 242px 0 0 rgba(207,224,255,.35), 71.5vw 356px 0 0 rgba(207,224,255,.35), 79.1vw 190px 0 0 rgba(207,224,255,.55), 36.7vw 300px 0 0 rgba(207,224,255,.55), 98.3vw 310px 0 0 rgba(207,224,255,.35); }
.ts-stars i + i { width: 3px; height: 3px; box-shadow: 2.1vw 92px 0 0 #cfe0ff, 48.5vw 214px 0 0 #fff6d8, 18.1vw 72px 0 0 #cfe0ff, 27.7vw 236px 0 0 #fff6d8, 45.5vw 240px 0 0 #cfe0ff, 59.5vw 30px 0 0 #fff6d8, 34.5vw 320px 0 0 #ffe7a8, 49.9vw 142px 0 0 #cfe0ff, 47.1vw 330px 0 0 #cfe0ff, 13.8vw 190px 0 0 #fff6d8, 49.7vw 40px 0 0 #cfe0ff, 76.8vw 294px 0 0 #ffe7a8, 79.3vw 6px 0 0 #fff6d8, 10.5vw 122px 0 0 #fff6d8; animation: tsTwinkle 2.8s steps(2, jump-none) infinite; }
@keyframes tsTwinkle { 50% { opacity: .3; } }

.title-wrap { width: min(1080px, 100%); margin: 0 auto; display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "card" "news"; align-items: start; }
.title-hero { grid-area: hero; min-width: 0; }
.title-card { grid-area: card; min-width: 0; }
.title-newsbox { grid-area: news; min-width: 0; display: grid; gap: 12px; }

/* ロゴ：ドットの「＠」（box-shadow で描く）＋名前＋リボン */
.logo { margin: 0; display: flex; align-items: center; gap: 14px; line-height: 1; font-weight: 400; }
.logo-at {
  --u: 6px; --at-1: var(--brass-hi); position: relative; flex: none; width: calc(var(--u) * 12); height: calc(var(--u) * 11); margin-bottom: 6px;
  /* 文字と同じ：濃いふち線（3px）と、下に真鍮の厚み */
  filter: drop-shadow(3px 0 0 #1a1105) drop-shadow(-3px 0 0 #1a1105) drop-shadow(0 3px 0 #1a1105) drop-shadow(0 -3px 0 #1a1105) drop-shadow(0 5px 0 var(--brass-deep)) drop-shadow(0 3px 0 #1a1105);
}
.logo-at i { position: absolute; left: 0; top: 0; width: var(--u); height: var(--u); box-shadow: var(--dots); }
.logo-words { display: grid; justify-items: start; gap: 10px; min-width: 0; }
.logo-main {
  font-family: var(--font-dot); font-weight: 900; font-size: clamp(36px, 10.6vw, 66px); letter-spacing: .02em; line-height: 1.05; color: #fff6dc; white-space: nowrap;
  text-shadow: 3px 0 0 #1a1105, -3px 0 0 #1a1105, 0 3px 0 #1a1105, 0 -3px 0 #1a1105, 3px 3px 0 #1a1105, -3px 3px 0 #1a1105, 3px -3px 0 #1a1105, -3px -3px 0 #1a1105, 0 6px 0 var(--brass-deep), 3px 6px 0 #1a1105, -3px 6px 0 #1a1105, 0 9px 0 #1a1105;
}
.logo-sub {
  display: inline-block; height: 30px; padding: 0 24px; background: var(--brass); color: var(--brass-ink);
  font-size: calc(15px * var(--fs-k)); font-weight: 900; line-height: 30px; letter-spacing: .34em; text-indent: .34em; white-space: nowrap;
  box-shadow: inset 0 3px 0 var(--brass-hi), inset 0 -4px 0 var(--brass-deep);
  clip-path: polygon(0 0, 100% 0, 100% 5px, calc(100% - 4px) 5px, calc(100% - 4px) 10px, calc(100% - 8px) 10px, calc(100% - 8px) 20px, calc(100% - 4px) 20px, calc(100% - 4px) 25px, 100% 25px, 100% 30px, 0 30px, 0 25px, 4px 25px, 4px 20px, 8px 20px, 8px 10px, 4px 10px, 4px 5px, 0 5px);
}
.title-credit { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: var(--fs-min); color: #d6cfbb; letter-spacing: .03em; }
.title-credit::before { content: ''; flex: none; width: 6px; height: 6px; background: var(--brass); box-shadow: 0 2px 0 var(--brass-deep); }

/* 景色：空（表の世界）・丘・仲間・水にうつる裏の世界 */
.ts-scene {
  --hz: 112px; /* 地平線（空の高さ） */
  position: relative; height: 184px; margin: 18px 4px 0; overflow: hidden;
  background: linear-gradient(180deg, #14213f 0, #2a3b74 26%, #6d5c9c 46%, #e19a6c 64%, #f7cf86 calc(var(--hz) - 30px), #fbe3a8 var(--hz), transparent var(--hz));
  box-shadow: 0 -4px 0 #05080f, 0 4px 0 #05080f, -4px 0 0 #05080f, 4px 0 0 #05080f, 0 -4px 0 4px rgba(227, 179, 65, .22), 0 12px 0 0 rgba(0, 0, 0, .35);
}
.ts-sky { position: absolute; inset: 0 0 auto 0; height: var(--hz); }
.ts-sky::before { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 2px; box-shadow: 30px 14px 0 0 rgba(255, 255, 255, .7), 70px 34px 0 0 rgba(255, 255, 255, .5), 128px 10px 0 0 rgba(255, 255, 255, .8), 170px 44px 0 0 rgba(255, 255, 255, .45), 214px 18px 0 0 rgba(255, 255, 255, .6), 252px 52px 0 0 rgba(255, 255, 255, .4), 48px 62px 0 0 rgba(255, 255, 255, .35), 300px 26px 0 0 rgba(255, 255, 255, .55), 360px 40px 0 0 rgba(255, 255, 255, .5), 420px 16px 0 0 rgba(255, 255, 255, .6), 480px 50px 0 0 rgba(255, 255, 255, .4), 540px 22px 0 0 rgba(255, 255, 255, .55); }
.ts-twinkle { position: absolute; left: 96px; top: 26px; width: 4px; height: 4px; background: #fff; box-shadow: 4px 0 0 rgba(255, 255, 255, .5), -4px 0 0 rgba(255, 255, 255, .5), 0 4px 0 rgba(255, 255, 255, .5), 0 -4px 0 rgba(255, 255, 255, .5); animation: tsTwinkle 1.8s steps(2, jump-none) infinite; }
/* ルミナ姫：空にうかぶ、まるい光の窓（角を段々にけずった円・金のふち・やわらかな光） */
.ts-orb { position: absolute; right: 16px; top: 10px; width: 76px; height: 76px; filter: drop-shadow(2px 0 0 #f1cc6c) drop-shadow(-2px 0 0 #f1cc6c) drop-shadow(0 2px 0 #f1cc6c) drop-shadow(0 -2px 0 #f1cc6c) drop-shadow(0 0 12px rgba(255, 228, 150, .75)); }
.ts-orb-in { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, #fffbea 0 34%, #ffeebd 35% 62%, #f8d684 63%);
  clip-path: polygon(24px 0, 52px 0, 52px 4px, 60px 4px, 60px 8px, 64px 8px, 64px 12px, 68px 12px, 68px 16px, 72px 16px, 72px 24px, 76px 24px, 76px 52px, 72px 52px, 72px 60px, 68px 60px, 68px 64px, 64px 64px, 64px 68px, 60px 68px, 60px 72px, 52px 72px, 52px 76px, 24px 76px, 24px 72px, 16px 72px, 16px 68px, 12px 68px, 12px 64px, 8px 64px, 8px 60px, 4px 60px, 4px 52px, 0 52px, 0 24px, 4px 24px, 4px 16px, 8px 16px, 8px 12px, 12px 12px, 12px 8px, 16px 8px, 16px 4px, 24px 4px); }
.ts-orb-in img.px { margin-top: 8px; }
/* 光の窓が水にうつる（とぎれとぎれの光のすじ） */
.ts-glint { position: absolute; right: 30px; top: 4px; width: 48px; height: 64px; background: repeating-linear-gradient(180deg, rgba(255, 233, 168, .6) 0 2px, transparent 2px 7px); clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%); -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); animation: tsGlint 2.4s steps(3, jump-none) infinite; }
@keyframes tsGlint { 50% { transform: translateX(2px); opacity: .7; } }
/* 丘（ドットの段々） */
.ts-hills { position: absolute; left: 0; right: 0; top: calc(var(--hz) - 44px); height: 44px; }
.ts-hills::before, .ts-hills::after { content: ''; position: absolute; inset: 0; }
.ts-hills::before { background: #3c5f6e; clip-path: polygon(0 44px, 0% 30px, 4% 30px, 4% 26px, 8% 26px, 8% 20px, 12% 20px, 12% 16px, 16% 16px, 16% 12px, 20% 12px, 20% 10px, 26% 10px, 30% 10px, 30% 12px, 34% 12px, 34% 16px, 38% 16px, 38% 22px, 42% 22px, 42% 26px, 48% 26px, 48% 28px, 54% 28px, 54% 26px, 58% 26px, 58% 22px, 62% 22px, 62% 18px, 66% 18px, 66% 14px, 70% 14px, 70% 10px, 74% 10px, 74% 8px, 84% 8px, 84% 10px, 88% 10px, 88% 14px, 92% 14px, 92% 20px, 96% 20px, 96% 24px, 100% 24px, 100% 44px); }
.ts-hills::after { background: linear-gradient(180deg, #5fa86a 0 4px, #3f8058 4px); clip-path: polygon(0 44px, 0% 34px, 6% 34px, 6% 30px, 12% 30px, 12% 28px, 18% 28px, 18% 26px, 24% 26px, 24% 28px, 30% 28px, 30% 30px, 36% 30px, 36% 32px, 42% 32px, 42% 30px, 48% 30px, 48% 26px, 54% 26px, 54% 22px, 60% 22px, 60% 20px, 66% 20px, 66% 22px, 72% 22px, 72% 26px, 78% 26px, 78% 30px, 84% 30px, 84% 32px, 90% 32px, 90% 30px, 96% 30px, 96% 28px, 100% 28px, 100% 44px); }
/* 仲間（地平線の上に立つ） */
.ts-cast { position: absolute; left: 0; right: 0; top: calc(var(--hz) - 50px); height: 48px; display: flex; justify-content: center; align-items: flex-end; gap: 6px; padding-right: 92px; }
.ts-mate { display: block; animation: tsHop 1.6s steps(2, jump-none) infinite; animation-delay: calc(var(--i, 0) * -.4s); }
@keyframes tsHop { 50% { transform: translateY(-2px); } }
/* 水にうつる裏の世界（むらさき・逆さま・波のすじ） */
.ts-sea { position: absolute; left: 0; right: 0; top: var(--hz); bottom: 0; overflow: hidden;
  background: repeating-conic-gradient(rgba(255, 255, 255, .035) 0 25%, transparent 0 50%) 0 0 / 4px 4px, linear-gradient(180deg, #3b2458 0, #24163a 50%, #150d24 100%); }
.ts-sea::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(21, 13, 36, .55) 5px 7px); pointer-events: none; }
.ts-mirror { top: 0; transform: scaleY(-1); height: 48px; opacity: .55; filter: grayscale(.4) sepia(.5) hue-rotate(220deg) brightness(.75) saturate(1.6); -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 100%); mask-image: linear-gradient(0deg, #000 10%, transparent 100%); }
/* くちやみ：岸からしのびよる黒いしみ（段々の形と、赤い目） */
.ts-blight { position: absolute; inset: 0; pointer-events: none; }
.ts-blight::before, .ts-blight::after { content: ''; position: absolute; bottom: 0; height: 40px; background: #0c0614; }
.ts-blight::before { left: 0; width: 120px; background: linear-gradient(#ff3a5c, #ff3a5c) 28px 18px / 4px 4px no-repeat, linear-gradient(#ff3a5c, #ff3a5c) 40px 18px / 4px 4px no-repeat, #0c0614; clip-path: polygon(0 100%, 0 4px, 8px 4px, 8px 0, 24px 0, 24px 8px, 36px 8px, 36px 4px, 52px 4px, 52px 12px, 64px 12px, 64px 20px, 80px 20px, 80px 28px, 96px 28px, 96px 32px, 112px 32px, 112px 36px, 120px 36px, 120px 100%); }
.ts-blight::after { right: 0; width: 90px; clip-path: polygon(100% 100%, 100% 8px, calc(100% - 12px) 8px, calc(100% - 12px) 4px, calc(100% - 28px) 4px, calc(100% - 28px) 12px, calc(100% - 44px) 12px, calc(100% - 44px) 20px, calc(100% - 60px) 20px, calc(100% - 60px) 28px, calc(100% - 76px) 28px, calc(100% - 76px) 36px, 0 36px, 0 100%); }

/* 副題：ドットの枠の言葉の窓（▼ が点滅） */
.title-sub { position: relative; margin: 26px 4px 0; padding: 12px 36px 12px 14px; max-width: 36em; background: #0b1512; color: #f4eedb; font-size: calc(15px * var(--fs-k)); line-height: 1.7;
  box-shadow: 0 -3px 0 var(--brass), 0 3px 0 var(--brass), -3px 0 0 var(--brass), 3px 0 0 var(--brass), inset 0 0 0 2px #0b1512, inset 0 0 0 4px rgba(227, 179, 65, .2); }
.ts-caret { position: absolute; right: 14px; bottom: 12px; width: 10px; height: 6px; background: var(--brass-hi); clip-path: polygon(0 0, 100% 0, 100% 2px, 80% 2px, 80% 4px, 60% 4px, 60% 6px, 40% 6px, 40% 4px, 20% 4px, 20% 2px, 0 2px); animation: tsTwinkle 1s steps(2, jump-none) infinite; }
.title-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; }
.title-motd { margin: 0; padding: 10px 14px; border-left: 4px solid var(--brass); background: rgba(5, 12, 9, .45); color: var(--text); font-size: calc(14px * var(--fs-k)); max-width: 40em; }
.title-news { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-min); color: var(--muted); max-width: 40em; }
.title-news li { padding: 4px 2px; border-bottom: 1px dashed var(--line); }
.title-news time { color: var(--faint); font-size: var(--fs-min); margin-left: 8px; white-space: nowrap; }

/* ログイン・登録の窓（ドットの枠） */
.title-card {
  background: #13201b; border: 0; border-radius: 0; padding: 18px 16px; margin: 0 4px;
  box-shadow: 0 -4px 0 var(--brass), 0 4px 0 var(--brass), -4px 0 0 var(--brass), 4px 0 0 var(--brass), inset 0 0 0 2px #0a120f, inset 0 0 0 4px rgba(227, 179, 65, .16), 0 14px 0 0 rgba(0, 0, 0, .3);
}
.title-card .tabs { border-radius: 0; background: #0a120f; }
.title-card .tabs button { border-radius: 0; min-height: 44px; }
.title-card .tabs button[aria-selected=true] { background: var(--brass); color: var(--brass-ink); box-shadow: inset 0 -3px 0 var(--brass-deep); }

@media (min-width: 900px) {
  .title-screen { padding: 40px 32px 40px; }
  .title-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); grid-template-areas: "hero card" "news card"; grid-template-rows: auto 1fr; gap: 26px 48px; }
  .title-hero { padding-top: 6px; }
  .logo-at { --u: 8px; }
  .ts-scene { --hz: 140px; height: 236px; }
  .ts-orb { right: 40px; top: 18px; }
  .ts-glint { right: 54px; }
  .ts-cast { height: 72px; top: calc(var(--hz) - 74px); padding-right: 110px; gap: 10px; }
  .ts-mirror { height: 72px; top: 0; }
}
@media (max-width: 400px) {
  .logo-at { --u: 5px; }
  .logo { gap: 10px; }
  .logo-sub { font-size: calc(14px * var(--fs-k)); padding: 0 20px; letter-spacing: .26em; text-indent: .26em; }
}

/* 登録：最初の職業（基本職。選んだ性別のドット絵） */
.job-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.job-pick label { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 2px 6px; border-radius: var(--r-btn); border: 1.5px solid var(--line); background: rgba(5, 12, 9, .3); cursor: pointer; text-align: center; color: var(--text); min-height: 44px; }
.job-pick input { position: absolute; opacity: 0; }
.job-pick .jp-art { display: grid; place-items: end center; height: 50px; }
.job-pick .jp-art .em-fb { font-size: calc(26px * var(--fs-k)); height: 40px; }
.job-pick .jp-name { font-size: var(--fs-min); font-weight: 700; white-space: nowrap; }
.job-pick label:has(input:checked) { border-color: var(--brass); background: rgba(227, 179, 65, .13); box-shadow: inset 0 -3px 0 rgba(227, 179, 65, .45); }
.job-pick label:has(input:focus-visible) { outline: 3px solid var(--brass); outline-offset: 2px; }
.job-detail { padding: 12px; border-radius: var(--r-panel); background: rgba(5, 12, 9, .35); border: 1.5px solid var(--line); }
.jd-head { display: flex; align-items: center; gap: 12px; font-size: calc(17px * var(--fs-k)); }
.jd-art { flex: none; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle at 50% 70%, rgba(227, 179, 65, .18), rgba(5, 12, 9, .5) 70%); }
.jd-art .em-fb { font-size: 34px; }
.jd-title { display: grid; gap: 2px; min-width: 0; }
.jd-title b { font-size: calc(18px * var(--fs-k)); }
.jd-title .jd-about { margin: 0; font-size: var(--fs-min); color: var(--muted); line-height: 1.55; }
.jd-em { font-size: calc(26px * var(--fs-k)); }
.jd-cols { display: grid; gap: 12px; margin-top: 8px; }
.jd-label { margin: 0 0 6px; font-size: var(--fs-min); color: var(--faint); }
.growth { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: var(--fs-min); align-items: center; }
.growth dt { color: var(--muted); }
.growth dd { margin: 0; display: flex; align-items: center; gap: 8px; }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 10px; height: 10px; border-radius: 2px; background: rgba(226, 238, 228, .12); }
.pips i.on { background: var(--brass); }
.skill-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-min); }
.skill-mini li { display: grid; gap: 1px; }
.skill-mini .sk-top { display: flex; justify-content: space-between; gap: 8px; }
.skill-mini .sk-cost { color: var(--faint); font-size: var(--fs-min); white-space: nowrap; }
.skill-mini small { color: var(--muted); font-size: var(--fs-min); line-height: 1.45; }

/* ---------------------------------------------------------------------
   全体の配置
   --------------------------------------------------------------------- */
.layout { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  min-height: var(--tb-h); padding: 8px 16px; background: rgba(13, 23, 19, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.tb-brand { flex: none; min-height: 44px; background: none; border: 0; padding: 0; font-family: var(--font-dot); font-size: calc(18px * var(--fs-k)); color: var(--brass); white-space: nowrap; }
.tb-who { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; background: none; border: 0; padding: 0; color: inherit; text-align: left; }
.tb-id { display: grid; min-width: 0; line-height: 1.3; }
.tb-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-sub { font-size: var(--fs-min); color: var(--muted); white-space: nowrap; }
.tb-stats { flex: 1; display: flex; align-items: center; gap: 12px; justify-content: flex-end; min-width: 0; }
.tb-stats .meter { width: 150px; }
.tb-money { flex: none; }

/* 第8弾：右の会話のらん（.side）は無くなった（会話は部屋のログ）。画面は1列 */
.shell { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1320px; width: 100%; margin: 0 auto; }
.main-col { min-width: 0; display: flex; flex-direction: column; }
.app-main { flex: 1; padding: 16px 18px 24px; min-width: 0; }
.conn-banner { position: fixed; left: 50%; top: calc(var(--tb-h) + 10px); transform: translateX(-50%); z-index: 60; background: var(--ember); color: #2a0d03; font-weight: 700; padding: 6px 16px; border-radius: 999px; font-size: var(--fs-min); max-width: calc(100% - 24px); }

@media (max-width: 899px) {
  :root { --tb-h: 96px; } /* 名前の行（44px）＋HP・MPの行 */
  .units { padding: 10px 8px; }
  .units.enemies { min-height: 112px; }
  .ucard .u-em { font-size: calc(26px * var(--fs-k)); }
  .ucard.boss .u-em { font-size: 40px; }
  .cmd { min-height: 52px; }
  .cmd.small { min-height: 44px; }
  .app-main { padding: 12px 12px 20px; }
  .title-wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "card" "news"; grid-template-rows: auto; gap: 18px; }
  .title-hero { padding-top: 0; }
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "who money chat" "stats stats stats"; gap: 6px 10px; padding: 8px 12px; }
  .tb-brand { display: none; }
  .tb-who { grid-area: who; }
  .tb-money { grid-area: money; }
  .tb-stats { grid-area: stats; justify-content: stretch; gap: 10px; }
  .tb-stats .meter { flex: 1 1 0; width: auto; }
  .tb-who .avatar { width: 36px; height: 36px; font-size: calc(19px * var(--fs-k)); border-radius: 10px; }
}

/* ---------------------------------------------------------------------
   町
   --------------------------------------------------------------------- */
.town-head { padding: 4px 2px 12px; }
.town-head h1 { margin: 0; font-family: var(--font-dot); font-weight: 400; font-size: calc(26px * var(--fs-k)); }
.town-head p { margin: 4px 0 0; color: var(--muted); font-size: calc(14px * var(--fs-k)); max-width: 46em; }
.town-head .town-warn { color: #ffb398; }
.facilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .facilities { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facility {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left;
  min-height: 66px; padding: 10px 12px; border-radius: var(--r-panel); border: 1.5px solid var(--line); background: var(--panel); color: var(--text);
}
.facility:hover { border-color: var(--line-2); background: var(--panel-2); }
.facility .ic { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: calc(22px * var(--fs-k)); background: rgba(5, 12, 9, .45); }
.facility .ft { min-width: 0; }
.facility b { display: block; font-size: calc(15px * var(--fs-k)); }
.facility small { display: block; font-size: var(--fs-min); color: var(--muted); line-height: 1.35; }
.facility.main { grid-column: 1 / -1; min-height: 78px; border-color: rgba(227, 179, 65, .6); background: linear-gradient(90deg, rgba(227, 179, 65, .16), var(--panel) 70%); }
.facility.main b { font-family: var(--font-dot); font-weight: 400; font-size: calc(20px * var(--fs-k)); color: var(--brass-hi); }
.facility.quiet { background: transparent; }

.section-title { display: flex; align-items: baseline; gap: 8px; margin: 22px 2px 10px; font-size: calc(16px * var(--fs-k)); font-weight: 700; }
.section-title small { font-weight: 400; color: var(--muted); font-size: var(--fs-min); }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-min); }
.news-list li { padding: 7px 12px; border-radius: 10px; background: rgba(5, 12, 9, .3); }
.news-list time { color: var(--faint); font-size: var(--fs-min); margin-left: 8px; white-space: nowrap; }

.sleep-panel { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 34px 18px 26px; border-radius: 18px; background: radial-gradient(90% 80% at 50% 0%, rgba(111, 168, 245, .14), transparent 70%), var(--panel); border: 1.5px solid rgba(111, 168, 245, .3); }
.sleep-panel .moon { font-size: 54px; line-height: 1; animation: drift 6s ease-in-out infinite; }
.sleep-panel h2 { margin: 6px 0 0; font-family: var(--font-dot); font-weight: 400; font-size: calc(26px * var(--fs-k)); }
.sleep-left { margin: 0; color: var(--muted); }
.sleep-left b { font-family: var(--font-dot); font-weight: 400; font-size: 40px; color: #cfe0ff; letter-spacing: .04em; margin-left: 4px; }
.sleep-note { margin: 4px 0 10px; max-width: 30em; font-size: var(--fs-min); color: var(--muted); }
@keyframes drift { 50% { transform: translateY(-6px) rotate(-6deg); } }

/* 第8弾：会話のらん（PCの右・スマホの町の中と全画面のシート）は無くなった。会話は部屋のログ（room.css） */

/* ---------------------------------------------------------------------
   施設のページ
   --------------------------------------------------------------------- */
.page-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.page-head h1 { margin: 0; font-family: var(--font-dot); font-weight: 400; font-size: calc(22px * var(--fs-k)); display: flex; gap: 8px; align-items: center; }
.page-lead { margin: -2px 2px 14px; color: var(--muted); font-size: var(--fs-min); max-width: 48em; }
.page-lead b { color: var(--brass-hi); }
.card { background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-panel); padding: 14px; }
.card + .card { margin-top: 10px; }
.card-title { margin: 0; font-size: calc(15px * var(--fs-k)); }
.rows { display: grid; gap: 6px; }
.row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1.5px solid var(--line); }
.row .t { flex: 1 1 150px; min-width: 0; }
.row .t b { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: calc(14.5px * var(--fs-k)); }
.row .t small { display: block; color: var(--muted); font-size: var(--fs-min); line-height: 1.45; margin-top: 1px; }
.row .use { display: inline-block; margin-left: 6px; color: var(--faint); }
.row .act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.row .act:empty { display: none; }
.row .em { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: calc(19px * var(--fs-k)); background: rgba(5, 12, 9, .4); }
.row.equipped { border-color: rgba(227, 179, 65, .5); }
.price { font-family: var(--font-dot); color: var(--brass-hi); white-space: nowrap; font-size: calc(15px * var(--fs-k)); }

.now-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 12px; }
.now-card .em { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: calc(22px * var(--fs-k)); background: rgba(5, 12, 9, .45); }
.nc-body { display: grid; min-width: 0; }
.nc-body small { color: var(--faint); font-size: var(--fs-min); }
.nc-body b { font-size: calc(16px * var(--fs-k)); }
.nc-body .faint { font-size: var(--fs-min); }
@media (max-width: 520px) { .now-card { grid-template-columns: auto minmax(0, 1fr); } .now-card .btn { grid-column: 1 / -1; } }

/* 冒険の受付 */
.party-list { display: grid; gap: 8px; }
.party-card { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-panel); border: 1.5px solid var(--line); background: var(--panel); }
.pc-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.pc-top h3 { margin: 0; font-size: calc(16px * var(--fs-k)); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.pc-meta, .q-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 0; font-size: var(--fs-min); }
.pc-meta dt, .q-meta dt { color: var(--faint); }
.pc-meta dd, .q-meta dd { margin: 0; }
.pc-members { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: var(--fs-min); }
.pc-members li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pc-members li span { color: var(--muted); font-size: var(--fs-min); }
.going-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-min); }
.going-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 8px 12px; border-radius: 10px; background: rgba(5, 12, 9, .3); }
.stage-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.stage-pick label { position: relative; }
.stage-pick input { position: absolute; opacity: 0; }
.stage-pick label > span { display: flex; align-items: center; min-height: 46px; padding: 6px 12px; border-radius: var(--r-btn); border: 1.5px solid var(--line-2); background: rgba(5, 12, 9, .35); color: var(--text); cursor: pointer; }
.stage-pick input:checked + span { border-color: var(--brass); background: rgba(227, 179, 65, .14); color: var(--brass-hi); }
.stage-pick input:focus-visible + span { outline: 3px solid var(--brass); outline-offset: 2px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.form-warn { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(240, 116, 74, .12); color: #ffb398; font-size: var(--fs-min); }

/* 家 */
.home-card { display: grid; gap: 10px; }
.home-card p { margin: 0; color: var(--muted); font-size: var(--fs-min); }
.home-meters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }

/* ステータス */
.status-card { display: grid; gap: 12px; }
.st-id { display: flex; gap: 14px; align-items: center; }
.st-name { display: grid; gap: 2px; min-width: 0; flex: 1; }
.st-name b { font-size: calc(19px * var(--fs-k)); overflow-wrap: anywhere; }
.st-name > span { color: var(--muted); font-size: var(--fs-min); }
.st-name .bar { margin-top: 4px; height: 5px; }
.st-name small { font-size: var(--fs-min); }
.st-mes { margin: 0; padding-left: 10px; border-left: 3px solid var(--line-2); color: var(--muted); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.stat-grid .meter { padding: 8px 12px; border-radius: 10px; background: rgba(5, 12, 9, .35); }
.stat { display: grid; padding: 6px 12px; border-radius: 10px; background: rgba(5, 12, 9, .35); line-height: 1.3; }
.stat small { color: var(--muted); font-size: var(--fs-min); }
.stat b { font-family: var(--font-dot); font-weight: 400; font-size: calc(21px * var(--fs-k)); }
.stat span { font-size: var(--fs-min); color: var(--faint); }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: var(--fs-min); }
.kv dt { color: var(--faint); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv dd small { display: block; color: var(--muted); font-size: var(--fs-min); }
.skill-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.skill-list li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgba(5, 12, 9, .3); opacity: .55; }
.skill-list li.learned { opacity: 1; background: var(--panel); border: 1px solid var(--line); }
.skill-list .sl-sp { font-family: var(--font-dot); font-size: var(--fs-min); color: var(--muted); }
.skill-list li.learned .sl-sp { color: var(--brass-hi); }
.skill-list .sl-body b { display: block; font-size: calc(14px * var(--fs-k)); }
.skill-list .sl-body small { display: block; color: var(--muted); font-size: var(--fs-min); line-height: 1.45; }
.skill-list .sl-mp { font-size: var(--fs-min); color: var(--faint); white-space: nowrap; }
.skill-list li.learned .sl-mp { color: var(--mp); }

/* ランキング */
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rank-row { width: 100%; display: grid; grid-template-columns: 34px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--panel); color: var(--text); text-align: left; }
.rank-row.me { border-color: rgba(227, 179, 65, .5); }
.rank-row .rk { font-family: var(--font-dot); font-size: calc(18px * var(--fs-k)); color: var(--muted); text-align: center; }
.rank-list li:nth-child(-n+3) .rk { color: var(--brass-hi); }
.rank-row .t { min-width: 0; }
.rank-row .t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .t small { color: var(--muted); font-size: var(--fs-min); }
.rank-row .val { font-family: var(--font-dot); font-size: calc(15px * var(--fs-k)); white-space: nowrap; }

.logout-card { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.logout-card p { margin: 0; color: var(--muted); font-size: var(--fs-min); }
.profile-head { display: flex; gap: 14px; align-items: center; }
.profile-head h2 { margin: 0; overflow-wrap: anywhere; }
.profile-head p { margin: 2px 0 0; font-size: var(--fs-min); }

/* ---------------------------------------------------------------------
   冒険（集合・戦闘・宝の部屋）
   --------------------------------------------------------------------- */
.quest { display: grid; gap: 10px; }
.q-panel { border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--panel); overflow: hidden; }
.q-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(5, 12, 9, .45); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.q-title { flex: 1 1 150px; min-width: 0; display: grid; line-height: 1.3; }
.q-title b { font-family: var(--font-dot); font-weight: 400; font-size: calc(18px * var(--fs-k)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-title span { font-size: var(--fs-min); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 階の進み（1〜9・ボス・宝） */
.floor-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; flex-wrap: nowrap; }
.floor-track li { min-width: 22px; height: 24px; padding: 0 3px; display: grid; place-items: center; border-radius: 5px; border: 1px solid var(--line-2); font-family: var(--font-dot); font-size: var(--fs-min); color: var(--faint); }
.floor-track li.wide { min-width: 34px; }
.floor-track li.done { background: rgba(227, 179, 65, .22); border-color: transparent; color: var(--brass-hi); }
.floor-track li.now { background: var(--brass); border-color: var(--brass); color: var(--brass-ink); transform: translateY(-1px); box-shadow: 0 2px 0 var(--brass-deep); }

/* 制限時間 */
.turnbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: var(--fs-min); background: rgba(5, 12, 9, .25); min-height: 40px; }
.turnbar .tb-no { font-family: var(--font-dot); white-space: nowrap; color: var(--muted); }
.turnbar .tb-no b { font-weight: 400; font-size: calc(18px * var(--fs-k)); color: var(--text); margin-left: 3px; }
.turnbar .cd { flex: 1; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .45); overflow: hidden; }
.turnbar .cd i { display: block; height: 100%; width: 100%; background: var(--brass); border-radius: 4px; }
.turnbar .cd-text { white-space: nowrap; min-width: 7.5em; text-align: right; font-variant-numeric: tabular-nums; }
.turnbar.idle .cd i { background: rgba(227, 179, 65, .25); }
.turnbar.idle .cd-text { color: var(--brass-hi); font-weight: 700; }
.turnbar.hurry .cd i { background: var(--ember); }
.turnbar.hurry .cd-text { color: #ffb398; font-weight: 700; }
.turnbar .tb-msg { font-family: var(--font-dot); font-size: calc(17px * var(--fs-k)); color: var(--brass-hi); }
.turnbar .tb-msg.wiped { color: #ffb398; }

/* 敵と味方 */
.stage-panel { background: linear-gradient(180deg, rgba(240, 116, 74, .07), transparent 46%), var(--panel); }
.units { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 12px 10px; }
.units.enemies { min-height: 132px; align-content: center; }
.units.party { border-top: 1px dashed var(--line-2); background: rgba(5, 12, 9, .2); }

.ucard {
  position: relative; flex: 1 1 76px; min-width: 0; max-width: 124px;
  display: grid; justify-items: stretch; gap: 2px; padding: 8px 6px 6px; border-radius: 12px; text-align: center;
  background: rgba(5, 12, 9, .5); border: 2px solid var(--line); color: var(--text);
  transition: border-color .15s, transform .15s, opacity .5s, filter .5s;
}
.ucard.enemy { border-color: rgba(255, 134, 179, .28); }
.ucard.boss { flex: 1 1 150px; max-width: 176px; border-color: rgba(227, 179, 65, .7); background: radial-gradient(100% 70% at 50% 0%, rgba(227, 179, 65, .18), rgba(5, 12, 9, .55)); }
.ucard.me { border-color: rgba(227, 179, 65, .55); }
.ucard.dead { opacity: .45; filter: grayscale(.9); }
.ucard.gone { opacity: .2; filter: grayscale(1); pointer-events: none; }
.ucard.target { border-color: var(--brass); transform: translateY(-3px); box-shadow: 0 0 0 3px rgba(227, 179, 65, .25); }
.ucard.target::before { content: 'ねらう'; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 6px; background: var(--brass); color: var(--brass-ink); font-size: var(--fs-min); font-weight: 700; white-space: nowrap; }
.ucard.aimed:not(.target)::after { content: ''; position: absolute; inset: -2px; border-radius: 12px; border: 2px dashed rgba(227, 179, 65, .6); pointer-events: none; }
.ucard.pickable { border-color: var(--hp); box-shadow: 0 0 0 3px rgba(92, 200, 168, .3); }
.ucard .u-em { font-size: 30px; line-height: 1.15; }
.ucard.boss .u-em { font-size: 46px; }
.ucard .u-name { font-size: var(--fs-min); font-weight: 700; line-height: 1.25; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.ucard.enemy .u-name { color: var(--rose); }
.ucard .bar { height: 5px; margin-top: 1px; }
.ucard .bar.mp { height: 3px; }
.ucard .u-nums { display: flex; justify-content: space-between; gap: 2px; font-size: var(--fs-min); color: var(--muted); line-height: 1.3; }
.ucard.enemy .u-nums { justify-content: center; }
.ucard .u-tags { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; min-height: 0; }
.ucard .u-tags span { font-size: var(--fs-min); padding: 0 4px; border-radius: 5px; background: rgba(0, 0, 0, .4); line-height: 1.5; }
.ucard .u-tags .st { color: #ffb5c9; }
.ucard .u-tags .tm { color: #a9cbff; }
.ucard .u-tags .tn { color: var(--brass-hi); }
.ucard .u-badge { position: absolute; top: 3px; right: 3px; display: flex; gap: 2px; pointer-events: none; }
.ucard .u-badge i { font-style: normal; font-size: var(--fs-min); line-height: 1; padding: 3px 4px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: var(--muted); }
.ucard .u-badge i.ok { background: var(--hp); color: #04241a; font-weight: 700; font-size: var(--fs-min); padding: 3px 5px; }
.ucard .u-badge i.off { color: #ffb398; }
.ucard .u-badge i.boss { background: var(--brass); color: var(--brass-ink); font-weight: 700; }
.ucard .u-badge i.escort { color: var(--brass-hi); font-weight: 700; }
.ucard.chest { border-color: rgba(227, 179, 65, .55); background: radial-gradient(100% 80% at 50% 10%, rgba(227, 179, 65, .2), rgba(5, 12, 9, .55)); padding: 10px 6px; }
.ucard.chest .u-em { font-size: 40px; }
.ucard.chest .u-hint { font-size: var(--fs-min); color: var(--brass-hi); font-weight: 700; }
.ucard.chest[disabled] { opacity: .5; }
.ucard.chest.pickable { border-color: var(--hp); }

.pop { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); font-family: var(--font-dot); font-size: calc(26px * var(--fs-k)); line-height: 1; pointer-events: none; z-index: 3; white-space: nowrap; text-shadow: 0 2px 0 rgba(0, 0, 0, .75), 0 0 8px rgba(0, 0, 0, .6); animation: popUp 1.1s ease-out forwards; }
.pop.d { color: #fff; }
.pop.h { color: var(--hp); }
.pop.m { color: var(--mp); }
.pop.miss { color: var(--muted); font-size: calc(17px * var(--fs-k)); }
@keyframes popUp { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -4px) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -34px) scale(1); } }
.ucard.hit { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* コマンド */
.cmd-dock { position: sticky; bottom: 0; z-index: 15; padding: 10px 10px calc(10px + var(--safe-b)); border-radius: 16px; border: 1.5px solid var(--line-2); background: rgba(26, 43, 37, .97); backdrop-filter: blur(8px); box-shadow: 0 -10px 30px rgba(0, 0, 0, .35); display: grid; gap: 8px; }
.cmd-dock:empty { display: none; }
.dock-status { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: calc(14px * var(--fs-k)); }
.dock-status .ds-text { flex: 1; min-width: 0; display: grid; line-height: 1.45; }
.dock-status .ds-line { font-weight: 700; overflow-wrap: anywhere; }
.dock-status small { font-size: var(--fs-min); color: var(--muted); font-weight: 400; }
.dock-status small:empty { display: none; }
.dock-status.chosen b { font-family: var(--font-dot); font-weight: 400; font-size: calc(17px * var(--fs-k)); color: var(--brass-hi); }
.dock-status .arrow { margin: 0 6px; color: var(--faint); }
.dock-status.picking .ds-line { color: var(--hp); }
.dock-status.dead .ds-line { color: #ffb398; }
.cmds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cmd {
  position: relative; min-height: 56px; padding: 6px 4px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--panel-2); color: var(--text);
  display: grid; place-content: center; text-align: center; line-height: 1.2; font-family: var(--font-dot); font-size: calc(16.5px * var(--fs-k));
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.cmd { white-space: nowrap; }
.cmd small { display: block; font-family: var(--font-body); font-size: var(--fs-min); color: var(--muted); margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.cmd[disabled] { opacity: .38; cursor: not-allowed; transform: none; }
.cmd.main { grid-column: span 2; background: var(--brass); border-color: var(--brass); color: var(--brass-ink); box-shadow: 0 3px 0 var(--brass-deep); font-size: calc(19px * var(--fs-k)); }
.cmd.main small { color: rgba(42, 30, 4, .78); }
.cmd.small { min-height: 46px; font-size: calc(15px * var(--fs-k)); }
.cmd.flee { color: #ffc0a8; }
.cmd.chosen { border-color: var(--hp); box-shadow: 0 0 0 2px rgba(92, 200, 168, .45), 0 3px 0 rgba(0, 0, 0, .35); }
.cmd.chosen::after { content: '✓'; position: absolute; top: 3px; right: 6px; font-family: var(--font-body); font-size: var(--fs-min); font-weight: 700; color: var(--hp); }
.cmd.main.chosen::after { color: #0b3b2c; }
.cmds.inline { display: flex; flex-wrap: wrap; }
.cmds.inline .cmd { flex: 1 1 96px; }
.dock-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: var(--fs-min); }
.auto-toggle { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line-2); background: transparent; color: var(--muted); font-weight: 700; font-size: var(--fs-min); }
.auto-toggle.on { border-color: var(--hp); color: var(--hp); background: rgba(92, 200, 168, .12); }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.pick { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-height: 54px; padding: 6px 10px; border-radius: 12px; border: 1.5px solid var(--hp); background: rgba(92, 200, 168, .08); color: var(--text); text-align: left; }
.pick > span { grid-row: span 2; font-size: calc(22px * var(--fs-k)); }
.pick b { font-size: calc(14px * var(--fs-k)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick small { font-size: var(--fs-min); color: var(--muted); }
.btn-big.go { box-shadow: 0 4px 0 var(--brass-deep); }

/* 戦いの記録・パーティーの会話 */
.q-logbox { border-radius: 16px; border: 1.5px solid var(--line); background: rgba(13, 23, 19, .6); overflow: hidden; display: flex; flex-direction: column; }
.q-log { height: 220px; overflow-y: auto; padding: 10px 12px; font-size: var(--fs-min); line-height: 1.6; overscroll-behavior: contain; }
.q-log p { margin: 0 0 3px; overflow-wrap: anywhere; }
.q-log .nP { font-weight: 700; color: var(--text); }
.q-log .nE { font-weight: 700; color: var(--rose); }
.q-log .d { color: #ffd2c2; font-weight: 700; }
.q-log .h { color: var(--hp); font-weight: 700; }
.q-log .m { color: var(--mp); font-weight: 700; }
.q-log .s { color: var(--violet); }
.q-log .k { color: var(--ember); font-weight: 700; }
.q-log .g { color: var(--brass-hi); }
.q-log .c { color: var(--brass-hi); }
.q-log .y { color: var(--muted); }
.q-log .k-boss .y, .q-log .k-clear .y { color: var(--brass-hi); font-weight: 700; }
.q-log .k-wipe .y { color: var(--ember); font-weight: 700; }
.q-log .k-treasure .y { color: var(--brass-hi); }
.q-log .k-info .y { font-family: var(--font-dot); color: var(--text); }
.q-log .lchat { padding: 2px 8px; margin: 2px 0 4px; border-radius: 8px; background: rgba(226, 238, 228, .06); }
.q-log .lchat .q { color: var(--text); }
.q-log .ldiv { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: var(--fs-min); color: var(--faint); }
.q-log .ldiv::before, .q-log .ldiv::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.q-say { display: flex; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--line); }
.q-say input { min-height: 40px; }

/* 集合中 */
.lobby-body { padding: 14px; display: grid; gap: 14px; }
.lobby-members { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lobby-members li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(5, 12, 9, .35); min-width: 0; }
.lobby-members .lm-name { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.lobby-members .lm-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-members .lm-name small { color: var(--muted); font-size: var(--fs-min); }
.lobby-members .lm-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.lobby-members li.slot { justify-content: center; border: 1.5px dashed var(--line-2); background: transparent; color: var(--faint); font-size: var(--fs-min); text-align: center; }
.lobby-wait { margin: 0; text-align: center; color: var(--muted); }

/* PCの幅があるときは、記録を右に並べる */
@media (min-width: 1200px) {
  .quest.field { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto 1fr; grid-template-areas: "stage log" "dock log"; align-items: start; }
  .quest.field > .stage-panel { grid-area: stage; }
  .quest.field > .cmd-dock { grid-area: dock; position: static; box-shadow: none; }
  .quest.field > .q-logbox { grid-area: log; position: sticky; top: calc(var(--tb-h) + 12px); height: calc(100vh - var(--tb-h) - 40px); }
  .quest.field .q-log { flex: 1; height: auto; }
  .quest.lobby { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .quest.lobby .q-log { height: 300px; }
}

/* ---------------------------------------------------------------------
   モーダル（スマホは下から出るシート）・トースト
   --------------------------------------------------------------------- */
.modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(4, 9, 7, .66); display: grid; place-items: end center; animation: fadeIn .15s; }
@media (min-width: 700px) { .modal-back { place-items: center; padding: 16px; } }
.modal { width: min(560px, 100%); max-height: 88vh; max-height: 88dvh; overflow-y: auto; background: var(--panel); border: 1.5px solid var(--line-2); border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + var(--safe-b)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .45); animation: sheetUp .22s ease-out; }
.modal.wide { width: min(760px, 100%); }
@media (min-width: 700px) { .modal { border-radius: 18px; } }
.modal h2 { margin: 0 0 10px; font-size: calc(18px * var(--fs-k)); }
.modal .modal-body p { margin: 0 0 8px; color: var(--muted); }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.modal .section-title { margin-top: 16px; }
.modal .kv { margin-top: 14px; }
.modal .st-mes { margin-top: 12px; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes sheetUp { from { transform: translateY(30px); opacity: .5; } }

.sheet-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; max-height: 58vh; overflow-y: auto; padding: 2px; }
.sk { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--panel-2); color: var(--text); }
.sk .sk-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.sk b { font-family: var(--font-dot); font-weight: 400; font-size: calc(16px * var(--fs-k)); }
.sk .sk-mp { color: var(--mp); font-size: var(--fs-min); font-weight: 700; white-space: nowrap; }
.sk small { font-size: var(--fs-min); color: var(--muted); line-height: 1.45; }
.sk .sk-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.sk .sk-meta i { font-style: normal; font-size: var(--fs-min); padding: 0 6px; border-radius: 6px; background: rgba(0, 0, 0, .3); color: var(--faint); }
.sk.chosen { border-color: var(--hp); }

#toasts { position: fixed; left: 50%; top: calc(var(--tb-h) + 8px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 80; display: grid; gap: 6px; width: min(460px, calc(100% - 24px)); pointer-events: none; }
.toast { padding: 10px 14px; border-radius: 12px; background: rgba(33, 55, 48, .98); border: 1.5px solid var(--line-2); font-size: var(--fs-min); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); animation: sheetUp .2s; overflow-wrap: anywhere; }
.toast.ok { border-color: rgba(92, 200, 168, .65); }
.toast.warn, .toast.error { border-color: rgba(240, 116, 74, .75); }
.toast.big { border-color: var(--brass); font-weight: 700; }
/* 第7弾：手がかりを手帳に書いた（虫めがねの絵と、古い紙の色のふち） */
.toast.clue { display: flex; align-items: center; gap: 10px; border-color: #c8a050; background: linear-gradient(90deg, rgba(78, 56, 28, .98), rgba(33, 55, 48, .98) 70%); color: #fff3d6; font-weight: 700; }
.toast.clue .tc-ic { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(239, 228, 200, .14); line-height: 0; }
.toast.clue .tc-t { min-width: 0; }

/* ---------------------------------------------------------------------
   遊びやすさの改良：お店の人・つぎにやること・はじめの3ステップ・酒場・遊び方・称号・演出
   --------------------------------------------------------------------- */
.link-btn { position: relative; display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; vertical-align: middle; background: none; border: 0; padding: 0 2px; color: var(--brass-hi); text-decoration: underline; text-underline-offset: 3px; font-size: inherit; font-weight: 700; text-align: left; }
.link-btn::after { content: ''; position: absolute; inset: 0 -4px; } /* 押しやすく（高さ 44px。横も少し） */

/* お店の人の吹き出し */
.host-face { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: calc(20px * var(--fs-k)); line-height: 1; background: radial-gradient(circle at 35% 30%, var(--raise), var(--panel-2)); box-shadow: inset 0 0 0 2px rgba(227, 179, 65, .45); }
.host { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; max-width: 46em; }
.host-say { position: relative; flex: 1; min-width: 0; margin: 2px 0 0; padding: 8px 12px 9px; border-radius: 4px 14px 14px 14px; background: rgba(226, 238, 228, .07); border: 1px solid var(--line-2); font-size: var(--fs-min); line-height: 1.6; overflow-wrap: anywhere; }
.host-name { display: block; font-size: var(--fs-min); color: var(--brass-hi); line-height: 1.3; margin-bottom: 1px; }
/* 第7弾：夜だけの、小さなぶきみな一言（うすい紫。声をひそめた感じ） */
.host-say.night { color: #d6d0f0; background: rgba(90, 70, 150, .14); border-color: rgba(170, 150, 230, .35); letter-spacing: .02em; }

/* つぎにやること */
.next-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "face body go" "tip tip tip"; gap: 6px 12px; align-items: center; margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-panel); border: 1.5px solid rgba(227, 179, 65, .5); background: linear-gradient(100deg, rgba(227, 179, 65, .14), var(--panel) 62%); }
.next-card .host-face { grid-area: face; align-self: start; }
.nx-body { grid-area: body; min-width: 0; }
.nx-head { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: var(--fs-min); color: var(--muted); line-height: 1.4; }
.nx-head b { color: var(--brass-hi); font-size: var(--fs-min); }
.nx-text { margin: 2px 0 0; font-size: calc(15px * var(--fs-k)); font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
.nx-go { grid-area: go; }
.nx-tip { grid-area: tip; display: flex; gap: 6px; margin: 2px 0 0; padding-top: 8px; border-top: 1px dashed var(--line-2); font-size: var(--fs-min); color: var(--muted); line-height: 1.55; }
@media (max-width: 520px) {
  .next-card { grid-template-areas: "face body body" "face go go" "tip tip tip"; }
  .nx-go { justify-self: start; }
}

/* はじめの3ステップ */
.onb-card { margin: 0 0 12px; padding: 10px 14px 6px; border-radius: var(--r-panel); background: var(--panel); border: 1.5px solid var(--line-2); }
.onb-head { display: flex; align-items: center; gap: 10px; }
.onb-head h2 { margin: 0; flex: 1; font-family: var(--font-dot); font-weight: 400; font-size: calc(17px * var(--fs-k)); }
.onb-count { font-family: var(--font-dot); color: var(--brass-hi); font-size: calc(15px * var(--fs-k)); }
.onb-close { width: 44px; height: 44px; margin-right: -10px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-size: calc(16px * var(--fs-k)); }
.onb-close:hover { background: var(--panel-2); color: var(--text); }
.onb-steps { list-style: none; margin: 4px 0 0; padding: 0; }
.onb-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.onb-mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-dot); font-size: calc(14px * var(--fs-k)); border: 1.5px solid var(--line-2); color: var(--muted); }
.onb-steps li.now .onb-mark { border-color: var(--brass); color: var(--brass-hi); box-shadow: 0 0 0 3px rgba(227, 179, 65, .15); }
.onb-steps li.done .onb-mark { background: var(--hp); border-color: var(--hp); color: #04241a; font-family: var(--font-body); font-weight: 700; }
.onb-body { min-width: 0; }
.onb-body b { display: block; font-size: calc(14.5px * var(--fs-k)); line-height: 1.4; }
.onb-body small { display: block; font-size: var(--fs-min); color: var(--muted); line-height: 1.55; margin-top: 1px; }
.onb-steps li.done .onb-body b { color: var(--muted); }
.onb-body .onb-ok { color: var(--hp); font-weight: 700; }
@media (max-width: 520px) {
  .onb-steps li.now { grid-template-columns: 28px minmax(0, 1fr); }
  .onb-steps li.now > .btn { grid-column: 2; justify-self: start; }
}
.facility.dim .ic { filter: grayscale(.7); opacity: .7; }

/* であいの酒場 */
.bar-card { display: grid; gap: 10px; margin-bottom: 12px; }
.bar-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bar-wallet { display: flex; flex-wrap: wrap; gap: 6px; }
.bar-wallet .chip { font-size: var(--fs-min); padding: 2px 10px; }
.bar-full { display: flex; gap: 8px; align-items: baseline; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: rgba(111, 168, 245, .1); border: 1.5px solid rgba(111, 168, 245, .4); color: #cfe0ff; font-size: var(--fs-min); font-weight: 700; }
.row .t small.gains { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.gains .g { font-weight: 700; }
.gains .g.hp { color: var(--hp); }
.gains .g.mp { color: var(--mp); }
.gains .g.cp { color: var(--faint); font-weight: 400; }
.bar-row.off .t b { color: var(--muted); }

/* 集合中：出発前の準備・オート */
.prep { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: rgba(5, 12, 9, .3); border: 1px solid var(--line); min-width: 0; }
.prep-title { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: calc(14.5px * var(--fs-k)); }
.prep-title small { font-weight: 400; font-size: var(--fs-min); color: var(--muted); }
.prep-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prep-row { display: flex; flex-wrap: wrap; gap: 6px; }
.prep-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px 0 10px; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--panel-2); color: var(--text); font-weight: 700; font-size: var(--fs-min); white-space: nowrap; }
.prep-btn:hover { background: var(--raise); }
.prep-btn .ic { font-size: calc(17px * var(--fs-k)); }
.seg.auto-seg { gap: 5px; }
.auto-seg label { flex: 1 1 auto; min-width: 0; }
.auto-seg span { min-height: 40px; padding: 4px 6px; font-size: var(--fs-min); white-space: nowrap; }
@media (max-width: 400px) { .auto-seg span { font-size: var(--fs-min); } }
.auto-hint b { color: var(--hp); }
.auto-toggle { flex: none; white-space: nowrap; }

/* 集合中にお店を見ているときの帯 */
.lobby-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(92, 200, 168, .1); border: 1.5px solid rgba(92, 200, 168, .5); }
.ls-text { flex: 1 1 200px; min-width: 0; display: grid; line-height: 1.45; }
.ls-text b { color: var(--hp); font-size: calc(14px * var(--fs-k)); }
.ls-text small { color: var(--muted); font-size: var(--fs-min); overflow-wrap: anywhere; }
.ls-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; margin-left: 4px; border-radius: 11px; line-height: 1; background: var(--ember); color: #2a0d03; font-size: var(--fs-min); }
.lobby-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ln-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px 0 9px; border-radius: 999px; border: 1.5px solid var(--line-2); background: transparent; color: var(--muted); font-size: var(--fs-min); font-weight: 700; white-space: nowrap; }
.ln-btn:hover { color: var(--text); }
.ln-btn.on { border-color: var(--brass); color: var(--brass-hi); background: rgba(227, 179, 65, .12); }

/* 戦闘のオート：ON／OFF と作戦 */
.dock-foot { flex-wrap: wrap; gap: 6px; }
.auto-mode { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line-2); background: transparent; color: var(--muted); font-size: var(--fs-min); }
.auto-mode b { color: var(--text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auto-mode.on { border-color: rgba(92, 200, 168, .6); }
.auto-mode.on b { color: var(--hp); }
.am-label { font-size: var(--fs-min); color: var(--faint); }
.am-caret { font-size: var(--fs-min); color: var(--faint); }
.modal-lead { margin: 0 0 12px; color: var(--muted); font-size: var(--fs-min); }
.mode-list { display: grid; gap: 6px; }
.mode-opt { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--panel-2); color: var(--text); }
.mode-opt b { font-size: calc(15px * var(--fs-k)); }
.mode-opt small { font-size: var(--fs-min); color: var(--muted); line-height: 1.5; }
.mode-opt.on { border-color: var(--hp); background: rgba(92, 200, 168, .1); }
.mode-opt.on b::after { content: '　✓ いまの作戦'; font-size: var(--fs-min); color: var(--hp); }

/* 戦闘のカードの言葉（タップすると説明） */
.ucard .u-tags span { font-size: var(--fs-min); padding: 0 5px; }
.ucard .u-tags .au { color: var(--hp); }
.ucard .u-tags [data-act="tip"] { position: relative; cursor: help; box-shadow: inset 0 -1px 0 rgba(226, 238, 228, .28); }
.ucard .u-tags [data-act="tip"]::after { content: ''; position: absolute; inset: -6px -2px; } /* 押しやすいように、押せる範囲を少し広げる */
@media (hover: hover) { .ucard .u-tags [data-act="tip"]:hover { background: rgba(226, 238, 228, .16); } }
.tip-pop { position: fixed; z-index: 70; width: max-content; max-width: min(300px, calc(100vw - 16px)); padding: 10px 12px 11px; border-radius: 12px; background: #0f1d18; border: 1.5px solid rgba(227, 179, 65, .75); box-shadow: 0 12px 32px rgba(0, 0, 0, .55); font-size: var(--fs-min); line-height: 1.6; color: var(--text); animation: tipIn .14s ease-out; }
.tip-pop .tip-kind { display: block; font-size: var(--fs-min); color: var(--faint); line-height: 1.3; }
.tip-pop b { display: block; font-size: calc(15px * var(--fs-k)); color: var(--brass-hi); line-height: 1.4; }
.tip-pop.tip-state b { color: #ffb5c9; }
.tip-pop.tip-tmp b { color: #a9cbff; }
.tip-pop.tip-auto b { color: var(--hp); }
.tip-pop p { margin: 4px 0 0; }
.tip-pop .tip-note { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-min); }
.tip-pop::after { content: ''; position: absolute; left: var(--ax, 50%); width: 10px; height: 10px; background: #0f1d18; border: 1.5px solid rgba(227, 179, 65, .75); transform: translateX(-50%) rotate(45deg); }
.tip-pop.above::after { bottom: -6.5px; border-top: 0; border-left: 0; }
.tip-pop.below::after { top: -6.5px; border-bottom: 0; border-right: 0; }
@keyframes tipIn { from { opacity: 0; transform: translateY(4px); } }

/* 遊び方 */
.guide-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.guide-toc button { min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line-2); background: transparent; color: var(--muted); font-size: var(--fs-min); font-weight: 700; }
.guide-toc button:hover { color: var(--text); background: var(--panel-2); }
.guide-toc .toc-terms { border-color: rgba(227, 179, 65, .55); color: var(--brass-hi); }
.guide { display: grid; gap: 10px; }
.guide .card + .card { margin-top: 0; }
.guide-sec { scroll-margin-top: calc(var(--tb-h) + 12px); max-width: 52em; }
.guide-sec h2 { margin: 0 0 8px; font-family: var(--font-dot); font-weight: 400; font-size: calc(19px * var(--fs-k)); color: var(--brass-hi); }
.guide-sec h3 { margin: 16px 0 6px; font-size: calc(14.5px * var(--fs-k)); }
.guide-sec p { margin: 0 0 6px; font-size: calc(14px * var(--fs-k)); line-height: 1.75; }
.guide-sec p:last-child { margin-bottom: 0; }
.term-list { margin: 0; display: grid; }
.term-list > div { display: grid; grid-template-columns: 10.5em minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); }
.term-list dt, .term-list dd { margin: 0; }
.term-list dd { font-size: var(--fs-min); line-height: 1.6; }
.guide-sec .term-note { margin: 8px 0 0; font-size: var(--fs-min); color: var(--muted); line-height: 1.6; }
.term-note b { color: var(--text); }
@media (max-width: 520px) { .term-list > div { grid-template-columns: minmax(0, 1fr); } }
.tag { display: inline-block; padding: 1px 8px; border-radius: 6px; background: rgba(0, 0, 0, .38); font-size: var(--fs-min); font-weight: 700; line-height: 1.6; white-space: nowrap; }
.tag.st { color: #ffb5c9; }
.tag.tm { color: #a9cbff; }
.tag.tn { color: var(--brass-hi); }
.tag.au { color: var(--hp); }
.guide-modal .guide-sec { background: var(--panel-2); scroll-margin-top: 8px; }
.title-links { margin: 16px 0 0; }

/* 称号 */
.ttl { font-size: var(--fs-min); font-weight: 400; color: var(--faint); white-space: nowrap; margin-left: 1px; }
.person .ttl { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-min); }
.msg .who .ttl { font-size: var(--fs-min); }
.st-name b .ttl { font-size: var(--fs-min); margin-left: 4px; }
.ttl-line { margin: 2px 0 0 !important; font-size: var(--fs-min); color: var(--muted); }
.sub-title { margin: 16px 2px 8px; font-size: var(--fs-min); color: var(--muted); }
#titles { scroll-margin-top: calc(var(--tb-h) + 12px); }
.title-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.title-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.title-list li.got.rare { border-color: rgba(227, 179, 65, .5); }
.title-list li.yet { background: rgba(5, 12, 9, .3); border-color: transparent; }
.title-list li.yet .tl-body b { color: var(--muted); font-weight: 700; }
.tl-ic { flex: none; width: 26px; text-align: center; font-size: calc(18px * var(--fs-k)); }
.title-list li.yet .tl-ic { font-size: calc(14px * var(--fs-k)); opacity: .55; }
.tl-body { flex: 1 1 160px; min-width: 0; }
.tl-body b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: calc(14px * var(--fs-k)); }
.tl-body small { display: block; font-size: var(--fs-min); color: var(--muted); line-height: 1.5; }
.title-list li > .btn, .title-list li > .chip { margin-left: auto; }
.title-hint { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; margin-top: -6px; }

/* 称号のお祝い（上のお知らせ欄に出る） */
.title-banner { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(120deg, #3a2a07, #6e5012 48%, #3a2a07); border: 1.5px solid var(--brass-hi); color: #fff6dc; box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 26px rgba(227, 179, 65, .35); animation: tbnIn .45s cubic-bezier(.2, 1.4, .4, 1); transition: opacity .3s, transform .3s; }
.title-banner.rare { background: linear-gradient(120deg, #2b1745, #6a3f9e 48%, #2b1745); border-color: var(--violet); box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 26px rgba(199, 173, 255, .4); }
.title-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%); transform: translateX(-110%); animation: tbnSheen 1.3s .35s ease-out forwards; pointer-events: none; }
.tbn-medal { flex: none; font-size: 30px; line-height: 1; animation: tbnMedal .9s ease-out; }
.tbn-body { min-width: 0; }
.tbn-body b { display: block; font-size: calc(15px * var(--fs-k)); line-height: 1.4; overflow-wrap: anywhere; }
.tbn-body small { display: block; margin-top: 1px; font-size: var(--fs-min); color: #f3e5bd; }
.title-banner.out { opacity: 0; transform: translateY(-8px); }
@keyframes tbnIn { from { opacity: 0; transform: translateY(-14px) scale(.92); } }
@keyframes tbnSheen { to { transform: translateX(110%); } }
@keyframes tbnMedal { 0% { transform: scale(.4) rotate(-30deg); } 60% { transform: scale(1.25) rotate(8deg); } }

/* 戦闘の演出（帯の文字・フラッシュ・ゆれ・暗くなる）。操作はじゃましない */
.fx-layer { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.fx-layer > * { pointer-events: none; }
.fx-banner {
  position: absolute; left: 0; right: 0; top: 42%; transform: translateY(-50%);
  display: grid; justify-items: center; gap: 2px; padding: 14px 12px 12px;
  background: linear-gradient(90deg, transparent, rgba(5, 12, 9, .88) 16%, rgba(5, 12, 9, .88) 84%, transparent);
  border-top: 1.5px solid; border-bottom: 1.5px solid; border-image: linear-gradient(90deg, transparent, rgba(227, 179, 65, .8), transparent) 1;
  animation: fxBand var(--dur, 1s) ease-out forwards;
}
.fx-text { font-family: var(--font-dot); font-size: clamp(34px, 9vw, 58px); line-height: 1.1; letter-spacing: .06em; color: var(--brass-hi); text-shadow: 0 3px 0 rgba(0, 0, 0, .65), 0 0 18px rgba(227, 179, 65, .5); white-space: nowrap; }
.fx-sub { font-size: var(--fs-min); color: var(--muted); letter-spacing: .08em; }
.fx-boss { border-image: linear-gradient(90deg, transparent, var(--ember), transparent) 1; }
.fx-boss .fx-text { color: #ffb398; text-shadow: 0 3px 0 rgba(0, 0, 0, .65), 0 0 22px rgba(240, 116, 74, .75); }
.fx-bossclear .fx-text { font-size: clamp(40px, 11vw, 70px); }
.fx-treasure .fx-text { color: #ffe9a8; }
.fx-crit { top: 30%; background: none; border: 0; }
.fx-crit .fx-text { font-size: clamp(28px, 7.5vw, 44px); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .7), 0 0 16px rgba(240, 116, 74, .95), 0 0 2px #000; }
.fx-lvup { border-image: linear-gradient(90deg, transparent, var(--hp), transparent) 1; }
.fx-lvup .fx-text { color: var(--hp); text-shadow: 0 3px 0 rgba(0, 0, 0, .65), 0 0 18px rgba(92, 200, 168, .6); }
.fx-friend { border-image: linear-gradient(90deg, transparent, var(--rose), transparent) 1; }
.fx-friend .fx-text { color: var(--rose); text-shadow: 0 3px 0 rgba(0, 0, 0, .65), 0 0 18px rgba(255, 134, 179, .55); }
.fx-wipe { background: none; border: 0; }
.fx-wipe .fx-text { color: #d9b9ab; letter-spacing: .2em; text-shadow: 0 3px 0 rgba(0, 0, 0, .8), 0 0 24px rgba(240, 116, 74, .35); }
.fx-flash { position: absolute; inset: 0; background: #fff8e6; opacity: 0; animation: fxFlash var(--dur, .28s) ease-out forwards; }
.fx-dark { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), rgba(0, 0, 0, .88)); animation: fxDark var(--dur, 1.2s) ease-in-out forwards; }
.fx-shake { animation: fxShake .42s ease-in-out; }
@keyframes fxBand {
  0% { opacity: 0; transform: translateY(-50%) scaleY(.35); }
  12% { opacity: 1; transform: translateY(-50%) scaleY(1.08); }
  22% { transform: translateY(-50%) scaleY(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-50%) scaleY(.96); }
}
@keyframes fxFlash { 0% { opacity: .5; } 100% { opacity: 0; } }
@keyframes fxDark { 0% { opacity: 0; } 25% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fxShake { 15% { transform: translate(-7px, 2px); } 30% { transform: translate(6px, -2px); } 45% { transform: translate(-5px, 1px); } 60% { transform: translate(4px, -1px); } 78% { transform: translate(-2px, 0); } }

/* 集合中の行き先：ボスをたおした回数 */
.stage-pick label > span { gap: 6px; }
.stage-pick .st-clear { margin-left: auto; font-size: var(--fs-min); color: var(--hp); white-space: nowrap; }

/* ---------------------------------------------------------------------
   転職の神殿・運・地方の地図・試練の塔・地方をこえた演出
   --------------------------------------------------------------------- */
/* 上のバーの「運」（タップすると説明） */
/* 見た目は小さな札のまま、押せるところは高さ 44px（上下の透明なふち。上のバーの高さは変えない） */
.chip.luck { border: 0; border-block: 9px solid transparent; margin-block: -9px; font: inherit; font-size: var(--fs-min); font-weight: 700; min-height: 44px; padding: 1px 9px; background: rgba(169, 226, 124, .13) padding-box; color: #cdeeb0; cursor: help; flex: none; }
.chip.luck .num { color: var(--luck); }
.chip.luck:hover { background-color: rgba(169, 226, 124, .22); }
@media (max-width: 899px) {
  .chip.luck .lk-ic { display: none; }
  .tb-stats.has-sleep .chip.luck { display: none; }
  .tb-stats { gap: 8px; }
}
.tip-pop.tip-luck b { color: var(--luck); }
.tip-list { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 3px; font-size: var(--fs-min); }

/* 町：転職できるようになった神殿 */
.facility.hot { border-color: rgba(227, 179, 65, .6); background: linear-gradient(90deg, rgba(227, 179, 65, .1), var(--panel) 75%); }
.facility.hot small { color: var(--brass-hi); font-weight: 700; }

/* ステータス：運 */
.stat.luck b { color: var(--luck); }
.luck-note { margin-top: -4px; border-radius: 10px; background: rgba(169, 226, 124, .06); border: 1px solid rgba(169, 226, 124, .22); font-size: var(--fs-min); }
.luck-note summary { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; cursor: pointer; color: #cdeeb0; font-weight: 700; list-style: none; }
.luck-note summary::-webkit-details-marker { display: none; }
.luck-note summary::after { content: '▾'; margin-left: auto; color: var(--faint); font-size: var(--fs-min); transition: transform .15s; }
.luck-note[open] summary::after { transform: rotate(180deg); }
.luck-note ul { margin: 0; padding: 0 14px 12px 2.2em; display: grid; gap: 4px; color: var(--muted); line-height: 1.6; }

/* 転職の神殿 */
.jt-now { display: grid; gap: 10px; }
.jt-me { display: flex; align-items: center; gap: 14px; min-width: 0; }
.jt-me-body { display: grid; min-width: 0; line-height: 1.35; }
.jt-me-body small { color: var(--faint); font-size: var(--fs-min); }
.jt-me-body b { font-size: calc(19px * var(--fs-k)); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; overflow-wrap: anywhere; }
.jt-me-body b .num { font-family: var(--font-dot); font-weight: 400; font-size: calc(16px * var(--fs-k)); color: var(--brass-hi); }
.jt-sub { font-size: var(--fs-min); color: var(--muted); }
.jt-ready { display: flex; gap: 6px; align-items: baseline; margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(92, 200, 168, .1); border: 1px solid rgba(92, 200, 168, .45); color: var(--hp); font-weight: 700; font-size: var(--fs-min); }
.jt-lv { padding: 8px 12px 10px; border-radius: 10px; background: rgba(240, 116, 74, .1); border: 1px solid rgba(240, 116, 74, .4); }
.jt-lv p { margin: 0 0 6px; font-size: var(--fs-min); color: #ffcfbd; }
.jt-lv .bar { height: 6px; }
.jt-master { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; }
.jt-master small { width: 100%; font-size: var(--fs-min); color: var(--faint); }
.chip.master { background: rgba(199, 173, 255, .15); color: var(--violet); }
.jt-rule { display: grid; gap: 2px; margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; border-left: 3px solid var(--brass); background: rgba(227, 179, 65, .07); font-size: var(--fs-min); color: var(--muted); line-height: 1.65; max-width: 52em; }
.jt-rule b { color: var(--brass-hi); font-size: var(--fs-min); }
.jt-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.jt-jump button { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line-2); background: transparent; color: var(--muted); font-size: var(--fs-min); font-weight: 700; }
.jt-jump button:hover { color: var(--text); background: var(--panel-2); }
.jt-jump b { color: var(--brass-hi); margin-left: 2px; }
.jt-title { scroll-margin-top: calc(var(--tb-h) + 12px); flex-wrap: wrap; }
.job-list { display: grid; gap: 6px; }
@media (min-width: 760px) { .job-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.job-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 10px 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--panel); color: var(--text); text-align: left; transition: border-color .15s, background .15s; }
.job-row:hover { border-color: var(--line-2); background: var(--panel-2); }
.job-row.ok { border-color: rgba(92, 200, 168, .3); }
.job-row.upper { border-left: 4px solid rgba(227, 179, 65, .75); padding-left: 9px; }
.job-row.cur { border-color: rgba(92, 200, 168, .6); }
.job-row.ng { background: rgba(5, 12, 9, .3); }
.job-row.ng .jr-em { filter: grayscale(.6); opacity: .7; }
.job-row.ng .jr-name b { color: var(--muted); }
.jr-em { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: calc(22px * var(--fs-k)); line-height: 1; background: rgba(5, 12, 9, .45); }
.jr-body { display: grid; gap: 2px; min-width: 0; }
.jr-name { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; margin: 0; }
.jr-name b { font-size: calc(15px * var(--fs-k)); }
.jr-name .chip { font-size: var(--fs-min); padding: 0 7px; }
.gl { display: flex; flex-wrap: wrap; gap: 0 9px; font-size: var(--fs-min); font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.5; }
.gl i { font-style: normal; color: var(--faint); margin-right: 2px; font-size: var(--fs-min); }
.gl .g-luck { color: var(--luck); }
.jr-about, .jr-cond { display: block; font-size: var(--fs-min); color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.jr-cond { color: var(--faint); }
.jr-go { font-size: calc(22px * var(--fs-k)); color: var(--faint); line-height: 1; padding: 0 2px; }
.growth dt.g-luck { color: #cdeeb0; }

/* 職業のくわしい説明（シート） */
.js-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.js-em { width: 56px; height: 56px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 30px; line-height: 1; background: linear-gradient(160deg, var(--raise), var(--panel-2)); box-shadow: inset 0 0 0 2px rgba(227, 179, 65, .4); }
.js-title { min-width: 0; }
.js-title h2 { margin: 0 0 2px !important; font-family: var(--font-dot); font-weight: 400; font-size: calc(22px * var(--fs-k)) !important; }
.js-cond { display: grid; gap: 1px; margin: 0 0 10px; font-size: var(--fs-min); color: var(--muted); }
.js-cond small { font-size: var(--fs-min); color: var(--faint); }
.jd-about { margin: 0 0 8px; font-size: var(--fs-min); color: var(--text); }
.js-detail .jd-cols { margin-top: 0; }
@media (min-width: 640px) { .js-detail .jd-cols { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 18px; } }
.js-item, .jc-item { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(240, 116, 74, .1); border: 1px solid rgba(240, 116, 74, .4); color: #ffcfbd !important; font-size: var(--fs-min); }
.js-ng { display: grid; gap: 2px; margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(5, 12, 9, .4); color: var(--muted); font-size: var(--fs-min); }
.js-ng b { color: var(--text); }
.js-foot { display: grid; gap: 8px; margin-top: 14px; }
@media (min-width: 640px) { .js-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .js-foot .js-ng { grid-column: 1 / -1; } .js-foot .btn-ghost { width: auto; } }

/* 転職の確認：いま → 転職したあと */
.jc-swap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: stretch; margin: 2px 0 12px; }
.jc-side { display: grid; gap: 1px; align-content: start; padding: 8px 10px; border-radius: 10px; background: rgba(5, 12, 9, .4); border: 1px solid var(--line); line-height: 1.4; min-width: 0; }
.jc-side:last-child { border-color: rgba(227, 179, 65, .55); background: rgba(227, 179, 65, .08); }
.jc-side small { font-size: var(--fs-min); color: var(--faint); }
.jc-side b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: calc(14.5px * var(--fs-k)); overflow-wrap: anywhere; }
.jc-side b .num { font-family: var(--font-dot); font-weight: 400; color: var(--brass-hi); font-size: var(--fs-min); }
.jc-side > span { font-size: var(--fs-min); color: var(--muted); }
.jc-arrow { align-self: center; color: var(--brass-hi); font-size: calc(18px * var(--fs-k)); }

/* 冒険の受付：地方の地図 */
.legend-sub { display: block; margin-top: 2px; font-size: var(--fs-min); color: var(--faint); }

/* 設定：音（第5弾）。スイッチと音量 */
.snd-row { display: flex; flex-wrap: wrap; gap: 8px; }
.snd-sw { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 10px; border-radius: var(--r-btn); border: 1.5px solid var(--line-2); background: rgba(5, 12, 9, .35); color: var(--text); font-weight: 700; cursor: pointer; flex: 1 1 140px; }
.snd-sw input { position: absolute; opacity: 0; pointer-events: none; }
.snd-knob { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: rgba(226, 238, 228, .14); border: 1.5px solid var(--line-2); transition: background .15s; }
.snd-knob::after { content: ''; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.snd-sw input:checked + .snd-knob { background: rgba(227, 179, 65, .4); border-color: var(--brass); }
.snd-sw input:checked + .snd-knob::after { transform: translateX(18px); background: var(--brass-hi); }
.snd-sw input:focus-visible + .snd-knob { outline: 3px solid var(--brass); outline-offset: 2px; }
.snd-sw:has(input:checked) { border-color: rgba(227, 179, 65, .55); }
.snd-vol-row { display: flex; align-items: center; gap: 12px; }
.snd-vol input[type="range"] { flex: 1; min-width: 0; height: 32px; accent-color: var(--brass); }
.snd-vol output { min-width: 2.5em; text-align: right; font-family: var(--font-dot); font-size: calc(17px * var(--fs-k)); color: var(--text); }

/* 設定：見やすさと遊びやすさ（第6弾）。文字の大きさ・戦いの文の速さ・はじめての案内 */
.ease-card { border-color: rgba(227, 179, 65, .4); }
.ease-card .field legend { color: var(--text); font-weight: 700; font-size: calc(15px * var(--fs-k)); }
.ease-card .legend-sub { font-weight: 400; color: var(--muted); }
.pref-seg span { min-height: 48px; font-size: calc(15px * var(--fs-k)); }
.pref-seg span small { font-size: var(--fs-min); color: var(--muted); font-weight: 400; }
.pref-seg input:checked + span small { color: #f6dfa0; }
.pref-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.pref-tips { flex: 1 1 260px; padding-top: 8px; padding-bottom: 8px; }
.pref-tips > span:last-child { display: grid; gap: 2px; line-height: 1.35; }
.pref-tips small { font-weight: 400; color: var(--muted); font-size: var(--fs-min); }
.pref-again { flex: 0 1 auto; min-height: 48px; white-space: normal; }
/* 設定の「地図の大きさ」（ボタンの形は world.css。設定のページでは文字を大きく、押しやすく） */
.scr-card .w-zoom button { min-height: 48px; font-size: calc(15px * var(--fs-k)); }
.region-map { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.region { position: relative; padding: 10px 12px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: rgba(5, 12, 9, .28); min-width: 0; }
.region.done { border-color: rgba(92, 200, 168, .4); }
.region.locked { border-style: dashed; background: transparent; }
.rg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rg-no { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-dot); font-size: var(--fs-min); color: var(--brass-hi); border: 1.5px solid rgba(227, 179, 65, .6); }
.region.done .rg-no { background: var(--hp); border-color: var(--hp); color: #04241a; font-family: var(--font-body); font-weight: 700; }
.region.locked .rg-no { color: var(--faint); border-color: var(--line-2); }
.rg-no.tw { border: 0; font-size: calc(18px * var(--fs-k)); }
.rg-name { font-family: var(--font-dot); font-weight: 400; font-size: calc(16px * var(--fs-k)); color: var(--text); }
.region.locked .rg-name { color: var(--muted); }
.rg-tags { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.rg-count { font-size: var(--fs-min); color: var(--faint); }
.rg-intro { margin: 4px 0 8px; font-size: var(--fs-min); color: var(--muted); line-height: 1.6; }
.region.locked .rg-intro { color: var(--faint); }
.rg-hint { margin: 8px 0 0; font-size: var(--fs-min); color: var(--faint); line-height: 1.5; }
.region.tower { border-color: rgba(199, 173, 255, .45); background: linear-gradient(160deg, rgba(199, 173, 255, .1), rgba(5, 12, 9, .28) 60%); }
.region.tower.locked { border-color: rgba(199, 173, 255, .3); background: transparent; }
.region.tower .rg-name { color: #e2d6ff; }
.st-tile.locked > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 38px; height: 100%; padding: 4px 10px; border-radius: var(--r-btn); border: 1.5px dashed var(--line-2); color: var(--faint); background: transparent; font-size: var(--fs-min); }
.st-tile.locked b { font-weight: 400; }
/* まだ1つも行けない地方は、場所の名前を小さく並べるだけにする */
.region.locked .stage-pick { display: flex; flex-wrap: wrap; gap: 5px 6px; }
.region.locked .st-tile.locked > span { min-height: 30px; padding: 2px 10px; font-size: var(--fs-min); border-radius: 999px; }
.region.locked .rg-intro { margin-bottom: 6px; }
.st-lock { font-size: var(--fs-min); opacity: .8; }
.stage-pick .st-next { margin-left: auto; font-size: var(--fs-min); color: var(--brass-hi); white-space: nowrap; font-weight: 700; }
.stage-pick label > span { flex-wrap: wrap; }
.tower-pick { grid-template-columns: minmax(0, 1fr); }
.tower-pick input:checked + span { border-color: var(--violet); background: rgba(199, 173, 255, .14); color: #e9e0ff; }
.tower-pick .st-clear { color: var(--muted); font-weight: 400; }
.make-go { white-space: normal; text-align: center; line-height: 1.35; padding-top: 8px; padding-bottom: 8px; }

/* 試練の塔：戦いの場 */
.q-title .tw-ic { margin-right: 4px; font-size: calc(16px * var(--fs-k)); color: inherit; }
.q-title .tw-floor { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 6px; background: var(--violet); color: #1d1238; font-size: calc(15px * var(--fs-k)); line-height: 1.45; vertical-align: 1px; overflow: visible; }
.quest.is-tower .stage-panel { background: linear-gradient(180deg, rgba(199, 173, 255, .09), transparent 46%), var(--panel); }
.floor-track li.n3 { font-size: var(--fs-min); padding: 0 1px; }
.tower-up { flex-direction: column; gap: 1px; min-height: 64px; line-height: 1.2; background: var(--violet); border-color: var(--violet); color: #1d1238; box-shadow: 0 4px 0 #6c56a8 !important; }
.tower-up:hover { background: #d9c8ff; }
.tower-up .tu-main { display: inline-flex; align-items: center; gap: 6px; }
.tower-up small { font-family: var(--font-body); font-size: var(--fs-min); letter-spacing: 0; color: rgba(29, 18, 56, .8); white-space: normal; }
.tower-note { display: flex; gap: 6px; margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(199, 173, 255, .08); border: 1px solid rgba(199, 173, 255, .3); font-size: var(--fs-min); color: var(--muted); }

/* 記録：地方をこえた行 */
.q-log .k-chapter { margin: 6px 0; padding: 4px 8px; border-radius: 8px; background: rgba(227, 179, 65, .12); }
.q-log .k-chapter .y { color: var(--brass-hi); font-weight: 700; }

/* 演出：地方をこえた・運がいい・転職 */
.fx-kicker { font-size: var(--fs-min); letter-spacing: .3em; color: var(--brass-hi); font-weight: 700; text-indent: .3em; }
.fx-chapter { top: 40%; padding: 18px 14px 16px; gap: 4px; background: linear-gradient(90deg, transparent, rgba(40, 30, 6, .93) 12%, rgba(40, 30, 6, .93) 88%, transparent); }
.fx-chapter .fx-text { font-size: clamp(26px, 7.4vw, 52px); white-space: normal; text-align: center; color: #ffe9a8; text-shadow: 0 3px 0 rgba(0, 0, 0, .7), 0 0 26px rgba(227, 179, 65, .75); }
.fx-text .nw { display: inline-block; }
.fx-chapter .fx-sub { color: #f3e5bd; font-size: calc(14px * var(--fs-k)); }
.fx-chapter::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 246, 220, .28) 50%, transparent 65%); transform: translateX(-110%); animation: tbnSheen 1.4s .3s ease-out forwards; }
.fx-lucky { top: 28%; border: 0; background: radial-gradient(closest-side, rgba(5, 12, 9, .82), rgba(5, 12, 9, .5) 60%, transparent); }
.fx-lucky .fx-text { font-size: clamp(26px, 7vw, 40px); color: #e4ffcf; text-shadow: 0 3px 0 rgba(0, 0, 0, .7), 0 0 18px rgba(169, 226, 124, .9); }
.fx-clover { display: inline-block; margin-right: 6px; animation: tbnMedal .8s ease-out; }
.fx-job { top: 60%; padding: 18px 14px 18px; gap: 4px; background: linear-gradient(90deg, transparent, rgba(24, 16, 44, .94) 12%, rgba(24, 16, 44, .94) 88%, transparent); border-image: linear-gradient(90deg, transparent, var(--violet), transparent) 1; }
.fx-job.upper { background: linear-gradient(90deg, transparent, rgba(44, 32, 6, .94) 12%, rgba(44, 32, 6, .94) 88%, transparent); border-image: linear-gradient(90deg, transparent, var(--brass-hi), transparent) 1; }
.fx-job .fx-kicker { color: var(--violet); }
.fx-job.upper .fx-kicker { color: var(--brass-hi); }
.fx-job-em { font-size: 52px; line-height: 1.1; animation: tbnMedal .9s ease-out; }
.fx-job .fx-text { font-size: clamp(26px, 7.4vw, 50px); white-space: normal; text-align: center; color: #efe6ff; text-shadow: 0 3px 0 rgba(0, 0, 0, .7), 0 0 22px rgba(199, 173, 255, .7); }
.fx-job.upper .fx-text { color: #ffe9a8; text-shadow: 0 3px 0 rgba(0, 0, 0, .7), 0 0 22px rgba(227, 179, 65, .75); }
.fx-job .fx-sub { color: #ddd3f5; font-size: var(--fs-min); }

/* ランキング：せまい画面では、タブを2段に */
@media (max-width: 640px) {
  .tabs.rank-tabs { flex-wrap: wrap; overflow: visible; }
  .tabs.rank-tabs button { flex: 1 1 30%; min-width: 0; padding: 0 6px; }
}

/* 遊び方：上級職・運・地方 */
.guide-uppers { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
@media (min-width: 640px) { .guide-uppers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide-uppers li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: rgba(5, 12, 9, .3); border: 1px solid var(--line); }
.gu-em { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: calc(20px * var(--fs-k)); background: rgba(5, 12, 9, .45); }
.gu-body { display: grid; gap: 1px; min-width: 0; }
.gu-body b { font-size: calc(14.5px * var(--fs-k)); color: var(--brass-hi); }
.gu-combo { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--fs-min); }
.gu-combo i { font-style: normal; color: var(--faint); }
.gu-body small { font-size: var(--fs-min); color: var(--muted); line-height: 1.5; }
.guide-list { margin: 8px 0 0; padding-left: 1.3em; display: grid; gap: 4px; font-size: var(--fs-min); line-height: 1.65; }
.guide-regions { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.guide-regions li { display: grid; grid-template-columns: 1.8em minmax(0, 9em) minmax(0, 1fr); gap: 2px 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--fs-min); }
.guide-regions .gr-no { font-family: var(--font-dot); color: var(--brass-hi); text-align: center; }
.guide-regions li.w-ura .gr-no { color: #d7b8ff; }
.guide-regions li.w-core .gr-no { color: #ff8a8a; }
.guide-regions b { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.guide-regions li > span:last-child { color: var(--muted); }
@media (max-width: 520px) { .guide-regions li { grid-template-columns: 1.8em minmax(0, 1fr); } .guide-regions li > span:last-child { grid-column: 2; } }
.guide-tower { display: grid; gap: 2px; margin: 10px 0 0 !important; padding: 8px 12px; border-radius: 10px; background: rgba(199, 173, 255, .08); border: 1px solid rgba(199, 173, 255, .3); font-size: var(--fs-min); }
.guide-tower b { color: #e2d6ff; }
.guide-tower small { color: var(--faint); font-size: var(--fs-min); }

/* 称号の一覧：PCでは2列 */
@media (min-width: 760px) { .title-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 幅のせまいスマホ（iPhone SE など） */
@media (max-width: 400px) {
  .cmd { font-size: calc(15px * var(--fs-k)); padding: 6px 2px; }
  .cmd.main { font-size: calc(18px * var(--fs-k)); }
  .cmd.small { font-size: calc(14px * var(--fs-k)); }
  .facility { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .facility .ic { width: 36px; height: 36px; font-size: calc(19px * var(--fs-k)); }
}
/* 背の低い画面：戦いの場を少しつめる */
@media (max-height: 720px) and (max-width: 899px) {
  .q-head { padding: 6px 12px; }
  .q-title b { font-size: calc(16px * var(--fs-k)); }
  .turnbar { min-height: 34px; padding: 4px 12px; }
  .units { padding: 8px; }
  .units.enemies { min-height: 96px; }
  .ucard { padding: 6px 4px 4px; }
  .ucard .u-em { font-size: calc(22px * var(--fs-k)); }
  .cmd { min-height: 46px; }
  .cmd.small { min-height: 40px; }
  .cmd-dock { gap: 6px; padding-top: 8px; }
}

/* =====================================================================
   超リメイク：ドット絵のキャラクター・町の人の顔・世界ごとの地図・転職の神殿の3つのまとまり・物語の演出
   ===================================================================== */
/* アバター（ドット絵は丸の中に整数倍で。少しはみ出す分は見せない） */
.avatar.has-px { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--c) 16%, var(--raise)), var(--panel) 78%); }
.avatar.has-px img.px { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -48%); }
.avatar.asleep img.px { filter: brightness(.55) saturate(.6); }
.avatar.asleep::after { content: '💤'; position: absolute; right: 1px; top: 0; font-size: var(--fs-min); line-height: 1; }

/* 上のバーのタイトル：幅があれば「＠パーティーII 超リメイク」、なければ「＠パーティーII」 */
.tb-brand .tb-short { display: none; }
@media (max-width: 1179px) { .tb-brand .tb-full { display: none; } .tb-brand .tb-short { display: inline; } }
/* タブレットの幅（600〜899px）：上のバーに「＠パーティーII」を出す（スマホの幅では、名前とお金を優先して出さない） */
@media (min-width: 600px) and (max-width: 899px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "brand who money chat" "stats stats stats stats"; }
  .tb-brand { display: block; grid-area: brand; font-size: calc(16px * var(--fs-k)); min-height: 44px; }
}

/* 町の人の顔（ドット絵）・名前・役目 */
.host { gap: 12px; margin-bottom: 14px; }
.host .host-face { width: 64px; height: 64px; border-radius: 14px; font-size: 30px; }
.host-face.has-px { overflow: hidden; border-radius: 14px; background: radial-gradient(circle at 50% 85%, rgba(227, 179, 65, .2), transparent 70%), linear-gradient(180deg, #24392f, #16241f); box-shadow: inset 0 0 0 2px rgba(227, 179, 65, .5), 0 3px 0 rgba(0, 0, 0, .3); }
.host-talk { flex: 1; min-width: 0; display: grid; gap: 4px; align-content: start; }
.host-tag { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; line-height: 1.3; }
.host-tag .host-name { display: inline; margin: 0; font-size: calc(14px * var(--fs-k)); color: var(--brass-hi); }
.host-role, .nx-head .host-role { display: inline-block; padding: 0 8px; border-radius: 999px; background: rgba(226, 238, 228, .09); color: var(--muted); font-size: var(--fs-min); font-weight: 700; line-height: 1.6; }
.host .host-say { margin: 0; }
.host .host-say::before { content: ''; position: absolute; left: -7px; top: 10px; width: 7px; height: 10px; background: rgba(226, 238, 228, .07); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.next-card .host-face { width: 56px; height: 56px; border-radius: 12px; font-size: calc(26px * var(--fs-k)); }

/* 町の会話のオンラインの一覧：小さなドット絵 */
.person { padding: 1px 8px 1px 2px; min-height: 28px; }
.person .pa { display: inline-grid; place-items: center; flex: none; min-width: 24px; height: 24px; }
.person .pa .em-fb { font-size: calc(14px * var(--fs-k)); }
.pc-members li, .lobby-members li { min-height: 34px; }

/* 冒険の行き先の地方（表・裏・核の印） */
.q-region { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: var(--fs-min); color: var(--muted); white-space: nowrap; }
.wtag { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 4px; font-style: normal; font-size: var(--fs-min); font-weight: 700; line-height: 1; background: rgba(255, 211, 110, .2); color: #ffd36e; }
.w-ura .wtag, .wtag.w-ura { background: rgba(199, 150, 255, .22); color: #d7b8ff; }
.w-core .wtag, .wtag.w-core { background: rgba(255, 90, 90, .22); color: #ff8a8a; }

/* ---------------------------------------------------------------------
   冒険の受付：世界ごとの地図（表は明るく・裏はむらさきの夕やみ・核は黒と赤）
   --------------------------------------------------------------------- */
.world-map { display: grid; gap: 14px; }
.world { --w-ac: var(--brass-hi); --w-text: var(--text); --w-line: var(--line-2); position: relative; padding: 10px 10px 12px; border-radius: 14px; background: var(--w-bg, transparent); box-shadow: inset 0 0 0 1.5px var(--w-line); min-width: 0; }
.world-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: -10px -10px 10px; padding: 8px 12px; border-radius: 14px 14px 0 0; font-size: calc(15px * var(--fs-k)); line-height: 1.35; background: var(--w-head, transparent); box-shadow: inset 0 -2px 0 var(--w-line); }
.wh-ic { flex: none; width: 14px; height: 14px; }
.wh-kicker { font-size: var(--fs-min); font-weight: 700; letter-spacing: .18em; color: var(--w-ac); }
.wh-name { font-family: var(--font-dot); font-weight: 400; font-size: calc(18px * var(--fs-k)); color: var(--w-text); }
.wh-count { margin-left: auto; font-size: var(--fs-min); font-weight: 700; color: var(--w-ac); opacity: .85; }
/* 表：空色と若葉色・お日さまの印 */
.world.w-omote { --w-ac: #7a4a00; --w-text: #14301f; --w-line: rgba(255, 211, 110, .5); --w-head: linear-gradient(180deg, #b4e2ff 0, #d6f1ff 58%, #a8dc98 58%, #8fcf7e 100%); --w-bg: linear-gradient(180deg, rgba(126, 196, 255, .16), rgba(126, 214, 140, .07) 160px, rgba(255, 255, 255, .02)); }
.world.w-omote .wh-count { color: #1d4a2c; }
.world.w-omote .wh-ic { width: 16px; height: 16px; background: #ffb31a; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 0 10px rgba(255, 190, 40, .9); clip-path: polygon(30% 0, 70% 0, 70% 15%, 85% 15%, 85% 30%, 100% 30%, 100% 70%, 85% 70%, 85% 85%, 70% 85%, 70% 100%, 30% 100%, 30% 85%, 15% 85%, 15% 70%, 0 70%, 0 30%, 15% 30%, 15% 15%, 30% 15%); }
.region.w-omote { background: rgba(255, 255, 255, .035); border-color: rgba(255, 211, 110, .22); }
.region.w-omote .rg-no { color: #ffd36e; border-color: rgba(255, 211, 110, .6); }
.region.w-omote .rg-intro { color: #d9d3bf; }
/* 裏：むらさきの夕やみ・黒いしみ（くちやみ）・三日月の印 */
.world.w-ura { --w-ac: #d7b8ff; --w-text: #f1e6ff; --w-line: rgba(190, 140, 255, .42);
  --w-head: linear-gradient(180deg, #3d2558, #2a1840); --w-bg: radial-gradient(60px 40px at 0 100%, rgba(8, 3, 14, .85), transparent 70%), radial-gradient(80px 50px at 100% 100%, rgba(8, 3, 14, .8), transparent 70%), repeating-conic-gradient(rgba(255, 255, 255, .025) 0 25%, transparent 0 50%) 0 0 / 4px 4px, linear-gradient(180deg, #2c1a3e, #1b1128); }
.world.w-ura .wh-ic { border-radius: 50%; box-shadow: inset -4px -2px 0 0 #d7b8ff; transform: rotate(-20deg); }
.region.w-ura { background: rgba(14, 6, 22, .5); border-color: rgba(190, 140, 255, .26); }
.region.w-ura .rg-no { color: #d7b8ff; border-color: rgba(190, 140, 255, .6); }
.region.w-ura .rg-name { color: #f1e6ff; }
.region.w-ura .rg-intro { color: #c9b8de; }
.world.w-ura .stage-pick input:checked + span { border-color: #c79bff; background: rgba(199, 155, 255, .17); color: #f1e6ff; }
.world.w-ura .stage-pick label > span { border-color: rgba(190, 140, 255, .3); background: rgba(10, 4, 16, .45); }
/* 核：黒と赤・赤い核の印 */
.world.w-core { --w-ac: #ff7a7a; --w-text: #ffe0e0; --w-line: rgba(255, 90, 90, .5); --w-head: linear-gradient(180deg, #2a0d12, #12070a); --w-bg: radial-gradient(120% 90px at 50% 0, rgba(255, 50, 60, .2), transparent 70%), linear-gradient(180deg, #160b0e, #0b0607); }
.world.w-core .wh-ic { width: 12px; height: 12px; margin: 0 1px; background: #ff4d5e; transform: rotate(45deg); box-shadow: 0 0 10px 2px rgba(255, 60, 80, .7); animation: corePulse 1.6s steps(2, jump-none) infinite; }
@keyframes corePulse { 50% { box-shadow: 0 0 4px 1px rgba(255, 60, 80, .5); } }
.region.w-core { background: rgba(0, 0, 0, .5); border-color: rgba(255, 90, 90, .32); }
.region.w-core .rg-no { color: #ff8a8a; border-color: rgba(255, 90, 90, .7); }
.region.w-core .rg-name { color: #ffe0e0; }
.region.w-core .rg-intro { color: #d8b7b7; }
.world.w-core .stage-pick input:checked + span { border-color: #ff6b6b; background: rgba(255, 107, 107, .15); color: #ffe0e0; }
.world.w-core .stage-pick label > span { border-color: rgba(255, 90, 90, .3); background: rgba(0, 0, 0, .45); }
.world .region.done { border-color: rgba(92, 200, 168, .45); }
.world .stage-pick { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.world .region.locked { background: transparent; }
/* 試練の塔（まとまりの枠は付けない） */
.world.w-tower { padding: 0; background: none; box-shadow: none; }
/* 裏の世界がまだ：世界が裏返る…の予告（さかさまの世界の名前が、水面のようにゆれる） */
.ura-teaser { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 6px; padding: 12px 14px 16px; border-radius: 12px; text-align: center; background: linear-gradient(180deg, rgba(255, 211, 110, .08), rgba(120, 70, 170, .16) 46px, rgba(10, 4, 16, .55)); border: 1.5px dashed rgba(190, 140, 255, .4); }
/* 世界の名前と、地平線の下にうつる、さかさまの名前 */
.ut-world { display: grid; justify-items: center; margin: 0; font-family: var(--font-dot); font-weight: 900; font-size: calc(26px * var(--fs-k)); line-height: 1.1; letter-spacing: .28em; text-indent: .28em; }
.ut-up { padding: 0 18px 4px; color: rgba(255, 220, 140, .75); border-bottom: 2px solid rgba(255, 211, 110, .55); }
.ut-mirror { padding-bottom: 4px; color: rgba(222, 196, 255, .42); transform: scaleY(-1); -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent); mask-image: linear-gradient(0deg, #000 30%, transparent); }
.ut-mirror span { display: inline-block; animation: utRipple 3.2s ease-in-out infinite; }
@keyframes utRipple { 50% { transform: skewX(-8deg) translateX(3px); opacity: .7; } }
.ut-text { position: relative; margin: 6px 0 0; font-size: calc(15px * var(--fs-k)); font-weight: 700; color: #f1e6ff; line-height: 1.6; }
.ut-text .nw { display: inline-block; }
.ut-sub { margin: 0; font-size: var(--fs-min); color: #c4b0dc; line-height: 1.6; }

/* ---------------------------------------------------------------------
   転職の神殿：基本職・上級職（組み合わせ）・特別職（条件）
   --------------------------------------------------------------------- */
.chip.special { background: linear-gradient(90deg, rgba(255, 134, 179, .24), rgba(199, 173, 255, .24)); color: #ffd9f0; box-shadow: inset 0 0 0 1px rgba(255, 170, 220, .5); }
.chip.special i { font-style: normal; color: #ffb3dd; }
.jt-tap { margin: 10px 2px 0; }
.jt-jump button { min-height: 44px; padding: 0 14px; }
.jt-jump button.k-upper b { color: var(--brass-hi); }
.jt-jump button.k-special b { color: #ffb3dd; }
.jt-title { align-items: center; }
.jt-count { margin-left: auto; padding: 0 10px; border-radius: 999px; background: rgba(0, 0, 0, .3); font-size: var(--fs-min); font-weight: 700; color: var(--muted); white-space: nowrap; }
.jt-count b { color: var(--hp); }
.jt-title .jt-kind { display: inline-block; padding: 2px 12px; border-radius: 6px; background: rgba(226, 238, 228, .1); font-family: var(--font-dot); font-weight: 400; font-size: calc(17px * var(--fs-k)); }
.jt-title.k-upper .jt-kind { background: rgba(227, 179, 65, .2); color: var(--brass-hi); }
.jt-title.k-special .jt-kind { background: linear-gradient(90deg, rgba(255, 134, 179, .22), rgba(199, 173, 255, .22)); color: #ffd9f0; }
.job-row { grid-template-columns: 52px minmax(0, 1fr) auto; }
.job-row.k-upper { border-left: 4px solid rgba(227, 179, 65, .75); padding-left: 9px; }
.job-row.k-special { border-left: 4px solid #d79bff; padding-left: 9px; background: linear-gradient(90deg, rgba(199, 155, 255, .09), var(--panel) 45%); }
.job-row.k-special.ng { background: rgba(5, 12, 9, .3); }
.job-row.k-special:hover { background: linear-gradient(90deg, rgba(199, 155, 255, .14), var(--panel-2) 45%); }
.jr-em { width: 52px; height: 52px; overflow: hidden; }
.jr-em img.px { margin-top: 2px; }
.jr-about { color: var(--text); opacity: .86; }
.jr-combo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 2px 0; font-size: var(--fs-min); line-height: 1.3; }
.jr-combo .cb { display: inline-flex; align-items: center; gap: 3px; min-height: 24px; padding: 0 8px 0 2px; border-radius: 999px; background: rgba(0, 0, 0, .28); color: var(--text); }
.jr-combo .cb-art { display: inline-grid; place-items: center; width: 24px; height: 24px; overflow: hidden; }
.jr-combo .cb-art .em-fb { font-size: calc(14px * var(--fs-k)); }
.jr-combo .cb.have { box-shadow: inset 0 0 0 1.5px rgba(92, 200, 168, .7); }
.jr-combo .cb em { font-style: normal; font-size: var(--fs-min); font-weight: 700; color: var(--hp); }
.jr-combo .plus { font-style: normal; color: var(--brass-hi); font-weight: 700; }
.jr-combo.big { gap: 6px 8px; margin-top: 6px; font-size: calc(14px * var(--fs-k)); }
.jr-combo.big .cb { padding: 2px 12px 2px 4px; }
.jr-combo.big .cb-art { width: 48px; height: 48px; }
.jr-cond b { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 5px; background: rgba(0, 0, 0, .3); color: #ffd9f0; font-size: var(--fs-min); }
.jr-cond.met { color: #bdeedd; }
.jr-cond.met b { color: var(--hp); }
/* 職業のくわしい説明（シート） */
.js-em { width: 80px; height: 80px; overflow: hidden; }
.js-em .em-fb { font-size: 34px; }
.js-head.k-special .js-em { box-shadow: inset 0 0 0 2px rgba(215, 155, 255, .6); }
.js-cond.met { color: #bdeedd; }
.js-combo { margin-bottom: 12px; }
.jc-art { display: grid; place-items: center; height: 50px; margin: 2px 0; }
.jc-art .em-fb { font-size: calc(24px * var(--fs-k)); }
.chip.master .cm-art { display: inline-grid; place-items: center; width: 22px; height: 22px; overflow: hidden; margin-left: -6px; }
.chip.master .cm-art .em-fb { font-size: var(--fs-min); }
.sk-title { align-items: center; }
.sk-title .st-art { display: inline-grid; place-items: center; width: 24px; height: 24px; }

/* 遊び方：特別職・世界ごとの地方 */
.gu-em { width: 52px; height: 52px; overflow: hidden; }
.gu-em img.px { margin-top: 2px; }
.gu-cond { font-size: var(--fs-min); color: #ffd9f0; line-height: 1.5; }
.guide-specials li { border-color: rgba(255, 170, 220, .22); }
.guide-specials .gu-body b { color: #ffd9f0; }
.guide-world { display: flex; align-items: center; gap: 8px; margin: 16px 0 2px !important; font-size: calc(14px * var(--fs-k)); }
.guide-world.w-ura { color: #e6d4ff; }
.guide-world.w-core { color: #ffd0d0; }

/* ---------------------------------------------------------------------
   戦闘：ユニットのドット絵（ふつうは2倍、PCは3倍。ボスは大きく）
   --------------------------------------------------------------------- */
.ucard .u-em { display: grid; place-items: end center; min-height: 52px; }
.ucard.boss .u-em { min-height: 96px; }
.ucard.chest .u-em { min-height: 56px; }
.ucard .u-em .em-fb { align-self: center; }
@media (min-width: 900px) {
  .ucard { max-width: 136px; }
  .ucard .u-em { min-height: 72px; }
  .ucard.boss { max-width: 200px; }
  .ucard.boss .u-em { min-height: 128px; }
  .ucard.chest .u-em { min-height: 72px; }
}
.ucard.enemy.boss img.px { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 8px rgba(255, 120, 90, .35)); }
.ucard.dead img.px, .ucard.gone img.px { animation: none; }
.pick > .pk-art { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; font-size: calc(22px * var(--fs-k)); }

/* 記録：地方の物語の行（表・裏・核で色を変える） */
.q-log .k-region { margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: rgba(126, 196, 255, .08); border-left: 3px solid #8fd0ff; }
.q-log .k-region .y { color: var(--text); }
.q-log .k-region.w-ura, .q-log .k-chapter.w-ura { background: rgba(190, 140, 255, .12); border-left: 3px solid #c79bff; }
.q-log .k-chapter.w-ura .y { color: #e6d4ff; }
.q-log .k-region.w-core, .q-log .k-chapter.w-core { background: rgba(255, 90, 90, .1); border-left: 3px solid #ff6b6b; }
.q-log .k-chapter.w-core .y { color: #ffd0d0; }

/* ---------------------------------------------------------------------
   物語の帯（地方をこえた・新しい地方）：表は金色、裏はむらさき、核は黒と赤。タップで閉じる
   --------------------------------------------------------------------- */
.fx-layer > .fx-story { pointer-events: auto; cursor: pointer; }
.fx-story { top: 40%; gap: 6px; padding: 18px 16px 14px; }
.fx-story .fx-text { font-size: clamp(26px, 7.4vw, 50px); white-space: normal; text-align: center; }
.fx-story-text { max-width: 32em; padding: 0 6px; font-size: calc(14.5px * var(--fs-k)); line-height: 1.75; text-align: center; color: #f6ecd2; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
.fx-tap { margin-top: 2px; font-size: var(--fs-min); letter-spacing: .12em; color: rgba(255, 255, 255, .42); }
.fx-story.w-omote { background: linear-gradient(90deg, transparent, rgba(44, 32, 6, .94) 10%, rgba(44, 32, 6, .94) 90%, transparent); border-image: linear-gradient(90deg, transparent, #ffd36e, transparent) 1; }
.fx-story.w-omote .fx-kicker { color: #ffd36e; }
.fx-story.w-omote .fx-text { color: #ffeaa8; text-shadow: 0 3px 0 rgba(0, 0, 0, .7), 0 0 26px rgba(255, 200, 90, .75); }
.fx-story.w-ura { background: linear-gradient(90deg, transparent, rgba(34, 16, 50, .95) 10%, rgba(34, 16, 50, .95) 90%, transparent); border-image: linear-gradient(90deg, transparent, #c79bff, transparent) 1; }
.fx-story.w-ura .fx-kicker { color: #d7b8ff; }
.fx-story.w-ura .fx-text { color: #f1e6ff; text-shadow: 0 3px 0 rgba(0, 0, 0, .7), 0 0 24px rgba(180, 110, 255, .8); }
.fx-story.w-ura .fx-story-text { color: #e6daf5; }
.fx-story.w-core { background: linear-gradient(90deg, transparent, rgba(16, 5, 8, .96) 10%, rgba(16, 5, 8, .96) 90%, transparent); border-image: linear-gradient(90deg, transparent, #ff4d5e, transparent) 1; }
.fx-story.w-core .fx-kicker { color: #ff8a8a; }
.fx-story.w-core .fx-text { color: #ffe0e0; text-shadow: 0 3px 0 #000, 0 0 24px rgba(255, 60, 80, .85); }
.fx-story.w-core .fx-story-text { color: #f0d6d6; }
.fx-story.fx-region { top: 34%; }
.fx-story.w-ura::after, .fx-story.w-core::after { display: none; }

/* 世界が裏返った：表の空の札がくるりと回って、むらさきの裏の世界に */
.fx-flip { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(6, 3, 12, .6); perspective: 900px; animation: fxFlipFade var(--dur, 2.6s) ease-in-out forwards; }
.fx-flip-card { position: relative; width: min(560px, 100%); height: 176px; transform-style: preserve-3d; animation: fxFlipTurn var(--dur, 2.6s) cubic-bezier(.6, 0, .3, 1) forwards; }
.fx-flip-face { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 12px; text-align: center; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor, -4px 0 0 currentColor, 4px 0 0 currentColor; }
.fx-flip-face.front { color: #ffd36e; background: linear-gradient(180deg, #8fd0ff 0, #bfe6ff 55%, #9ad38a 55%, #6fb46a 100%); }
.fx-flip-face.front b { font-family: var(--font-dot); font-size: clamp(30px, 8vw, 46px); color: #fffbe8; letter-spacing: .2em; text-indent: .2em; text-shadow: 0 3px 0 #2a5a3a, 3px 0 0 #2a5a3a, -3px 0 0 #2a5a3a, 0 -3px 0 #2a5a3a; }
.fx-flip-face.back { color: #b88aff; transform: rotateX(180deg); background: radial-gradient(90px 60px at 0 100%, #07020c, transparent 70%), radial-gradient(90px 60px at 100% 0, #07020c, transparent 70%), repeating-conic-gradient(rgba(255, 255, 255, .03) 0 25%, transparent 0 50%) 0 0 / 4px 4px, linear-gradient(180deg, #2c1a3e, #150c22); }
.fx-flip-face.back .fx-kicker { color: #d7b8ff; }
.fx-flip-face.back .fx-text { font-size: clamp(28px, 7.6vw, 46px); white-space: normal; color: #f1e6ff; text-shadow: 0 3px 0 rgba(0, 0, 0, .7), 0 0 24px rgba(180, 110, 255, .85); }
.fx-flip-face.back .fx-sub { color: #d9c8f0; }
@keyframes fxFlipTurn { 0%, 24% { transform: rotateX(0); } 56%, 100% { transform: rotateX(180deg); } }
@keyframes fxFlipFade { 0% { opacity: 0; } 8% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } }
.fx-flip.calm .fx-flip-card { animation: none; transform: none; }
.fx-flip.calm .fx-flip-face.front { display: none; }
.fx-flip.calm .fx-flip-face.back { transform: none; }

/* 転職のお祝い：ドット絵を大きく。特別職はむらさきと桃色 */
.fx-job-em.has-px { line-height: 0; }
.fx-job.special { background: linear-gradient(90deg, transparent, rgba(40, 14, 44, .95) 12%, rgba(40, 14, 44, .95) 88%, transparent); border-image: linear-gradient(90deg, transparent, #ff9ed2, #c79bff, transparent) 1; }
.fx-job.special .fx-kicker { color: #ffb3dd; }
.fx-job.special .fx-text { color: #ffe6f6; text-shadow: 0 3px 0 rgba(0, 0, 0, .7), 0 0 22px rgba(255, 140, 210, .75); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}