/* ============ town.css: 町・宿屋・道具屋・増築・ステータス詳細・最初の1人選び・奉行所演出など町まわりの画面 ============ */
  .time-skip-btn {
    background: none; border: none; font-size: 1.1rem; margin-left: 0.4rem; padding: 0.1rem 0.3rem;
    cursor: pointer; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
  }
  .time-skip-btn:active { transform: scale(0.9); }
  /* 時間を進めるピッカー/演出オーバーレイ */
  #timeSkipOverlay { position: fixed; inset: 0; z-index: 55; background: rgba(10,12,14,0.92); display: none; }
  .time-skip-picker { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 85%; max-width: 380px; text-align: center; }
  .time-skip-picker h3 { color: var(--accent); margin: 0 0 1rem; font-size: 1.1rem; }
  .time-skip-duration { font-size: 2rem; font-weight: 800; color: #fff; margin: 0.5rem 0 1.2rem; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
  .time-skip-stepper { display: flex; gap: 0.6rem; margin-bottom: 1.2rem; }
  .time-skip-stepper button { flex: 1; }
  #timeSkipAnimView { position: absolute; inset: 0; display: none; }
  .time-skip-clock {
    position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
    font-size: 1.6rem; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.9); white-space: nowrap;
  }
  /* 町画面はボタン4つだけで縦にスクロールする必要が無いため、パネルを外して
     背景がそのまま透けて見える固定配置にする(ボタン自体は不透明のまま) */
  #screen-town .body-pad {
    position: fixed; bottom: calc(243px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%) translateZ(0);
    width: 100%; max-width: 480px; z-index: 1;
    background: transparent; border-radius: 0; margin-top: 0; top: auto;
    padding: 0 1rem; flex: none;
  }
  /* 宿屋画面は名簿+仲間作成で縦に長く、下部のボタンが画面最下部に来て押しにくいため、下側に大きめの余白を追加 */
  #screen-tavern .body-pad { padding-bottom: calc(1rem + 220px); }
  /* 町画面のボタンは2x2で、それぞれ文字数に合わせた大きさの箱にする(全幅ボタンにしない) */
  #screen-town .btn-col {
    display: grid; grid-template-columns: repeat(2, auto); gap: 0.7rem;
    justify-content: start; margin-top: 0;
  }
  /* 施設ボタンは全体の90%サイズ(実機で大きすぎるとの指摘)。widthだけでなく高さ・余白・文字・
     アイコンも同じ比率で縮小し、単純なtransform:scaleではなく実寸で縮めている(scaleだと
     グリッドのセル自体は縮まずボタン周りに不自然な余白が残るため) */
  #screen-town .btn-col button.big {
    width: 135px; white-space: nowrap; padding: 0.81rem 0.45rem; min-height: 48px;
    font-weight: 700; font-size: 13.5px; border-radius: 13px;
  }
  #screen-town .btn-icon { margin-right: 11px; }
  #screen-town .btn-icon img { height: 29px; }
  /* ============ ステータス詳細画面(「情報を見る画面」ではなく「眺めたくなる画面」) ============
     立ち絵を主役にするため96px→132px(約38%増)に拡大し、専用カードで名前直下の余白を整理。
     ステータス表は罫線を全廃して余白のグルーピングのみで区切る方針にしてある */
  .status-portrait-wrap { position: relative; display: inline-block; width: 132px; height: 132px; }
  .status-portrait-card { text-align: center; animation: statusPortraitIn 0.2s ease-out; }
  @keyframes statusPortraitIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
  .status-portrait-meta { margin-top: 0.6rem; }
  .status-portrait-class { font-size: 15px; font-weight: 700; color: var(--dw-heading-color); }
  .status-portrait-personality { font-size: 13px; color: var(--dw-caption-color); margin-top: 0.15rem; }
  /* カードの登場演出(下から8pxスライド+フェード)。screen.activeのフェードと重ねても違和感が
     ないよう控えめな移動量にしてある */
  .status-card-in { animation: statusCardIn var(--dw-t-card) ease-out; }
  @keyframes statusCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .status-basic-row { display: flex; justify-content: space-between; padding: 0.2rem 0; font-size: 13px; color: var(--dw-caption-color); }
  .status-basic-row + .status-basic-row { margin-top: 0.1rem; }
  .status-stat-list { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--dw-card-border); }
  .status-stat-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0; }
  .status-stat-icon { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: var(--dw-caption-color); }
  .status-stat-label { flex: 1; font-size: 15px; color: var(--dw-body-color); }
  .status-stat-value { font-size: 15px; font-weight: 700; color: var(--dw-body-color); font-variant-numeric: tabular-nums; }
  .status-stat-row.is-hp .status-stat-icon, .status-stat-row.is-hp .status-stat-value { color: var(--dw-success); }
  .status-stat-row.is-mp .status-stat-icon, .status-stat-row.is-mp .status-stat-value { color: var(--dw-info); }
  .status-stat-row.is-stress .status-stat-icon, .status-stat-row.is-stress .status-stat-value { color: var(--dw-danger); }
  .status-xp-value { color: var(--dw-gold); font-weight: 700; }
  /* 習得スキル: 未習得(まだ到達していないレベル)は「？？？ Lv◯で習得」のプレースホルダーにして
     レベルアップの楽しみを持たせる。開けない箱のような見た目にするため文字を薄くしてある */
  .skill-entry.locked { cursor: default; opacity: 0.55; }
  .skill-entry.locked:active { transform: none; }
  .skill-entry-mystery { letter-spacing: 0.15em; }
  /* ボタンの優先度: スキル系譜(primary)を最も目立たせ、戻るは控えめなゴースト調、解雇は危険色だが
     小さめ+上に余白を大きく取って誤タップを防ぐ */
  .status-back-btn-bottom { background: transparent; box-shadow: none; color: var(--dw-caption-color); font-weight: 600; }
  .status-dismiss-btn {
    display: block; margin: 1.6rem auto 0; padding: 0.4rem 0.9rem; min-height: auto;
    background: transparent; border: 1px solid var(--dw-danger); color: var(--dw-danger);
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer;
    transition: transform var(--dw-t-btn) ease-out, filter var(--dw-t-btn) ease-out;
  }
  .status-dismiss-btn:active { transform: scale(.97); filter: brightness(1.3); }
  .roster-name { font-weight: 700; font-size: 0.88rem; }
  .roster-sub { font-size: 0.7rem; color: var(--text-muted); }
  .status-tag { font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: var(--radius-pill); font-weight: 700; }
  .status-tag.active { background: #234a2e; color: #7fe0a0; }
  .status-tag.critical { background: #4a2323; color: #e08787; }
  .status-tag.lost { background: #333; color: #888; }
  .status-tag.bathing { background: #1f3a4a; color: #7fd4f0; border: 1px solid #3a7a95; }
  /* 入浴中が終わった後、次の遠征まで持ち越すバフ名表示。湯上がりのぽかぽかした雰囲気を出すため暖色系の配色にしてある */
  .status-tag.onsen-buffed { background: linear-gradient(135deg, #4a2a1f, #6b3a1f); color: #ffbe7a; border: 1px solid #d98a3d; }
  .shop-item { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
  .shop-item > div:first-child { flex: 1; min-width: 0; }
  .shop-item button { flex-shrink: 0; }
  .shop-item .desc { font-size: 0.72rem; color: var(--text-muted); }
  .equip-class-card {
    background: var(--dw-card-bg); border: 2px solid var(--dw-card-border); border-radius: 14px;
    box-shadow: var(--dw-card-shadow); padding: 14px 16px; margin-bottom: var(--dw-space-card-gap);
  }
  .equip-class-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--dw-heading-color); }
  .equip-class-title img { width: 32px; height: 32px; object-fit: contain; background: #353a44; border-radius: var(--radius-xs); }
  /* 最初の職業選び画面: つかみの第一印象を作る画面のため、リスト羅列ではなく1体ずつ大きい絵を
     見せて左右ボタンでめくるカルーセル形式にしてある(以前は48x48の小さいサムネが縦に並ぶだけの
     地味な一覧だった) */
  .first-char-carousel { display: flex; flex-direction: column; align-items: center; }
  .first-char-photo-wrap { position: relative; width: 100%; max-width: 300px; margin: 0 auto 0.7rem; }
  .first-char-photo {
    display: block; width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; object-position: top;
    border-radius: var(--radius-lg); border: 2px solid var(--accent); box-shadow: 0 10px 26px rgba(0,0,0,0.55);
    background: var(--surface-2); animation: firstCharPhotoIn 220ms ease-out;
  }
  @keyframes firstCharPhotoIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
  .first-char-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: none;
    border-radius: 50%; background: rgba(20,24,27,0.68); color: var(--text); font-size: 1.5rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .first-char-arrow:active { transform: translateY(-50%) scale(0.9); }
  .first-char-arrow.left { left: -6px; }
  .first-char-arrow.right { right: -6px; }
  .first-char-dots { display: flex; gap: 0.35rem; justify-content: center; margin-bottom: 0.6rem; }
  .first-char-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
  .first-char-dot.active { background: var(--accent); }
  .first-char-name { font-size: 1.35rem; font-weight: 800; color: var(--accent); text-align: center; letter-spacing: 0.06em; margin-bottom: 0.3rem; }
  .first-char-desc { font-size: 0.8rem; color: var(--text-muted); text-align: center; margin-bottom: 0.7rem; }
  .first-char-skills { width: 100%; margin-bottom: 0.9rem; }
  .first-char-skills .skill-row { font-size: 0.76rem; margin-bottom: 0.25rem; }
  .first-char-skills .skill-row .skill-name { color: var(--accent); font-weight: 700; }
  .first-char-choose-btn { width: 100%; }
  /* 町画面: 名簿が1人しかいない間だけ、宿屋ボタンの上に表示する案内。.body-padの通常の
     流し込みで.btn-colの直前に置くことで、既存の固定位置調整をそのまま利用する */
  #townHireHint {
    text-align: center; color: #fff; font-size: 0.95rem; font-weight: 700;
    background: rgba(0,0,0,0.75); border: 1px solid var(--accent); border-radius: var(--radius-md);
    padding: 0.5rem 0.8rem; margin-bottom: 0.6rem;
  }
  .hire-hint-arrow { display: inline-block; color: #ff5a3c; font-size: 1.2rem; margin-right: 0.3rem; animation: hireHintBounce 1.1s ease-in-out infinite; }
  @keyframes hireHintBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
  }
  /* 武器/防具/価格ボタンを一直線に揃える。infoブロックにflex:1+min-width:0を与えて
     長い説明文があっても価格ボタン側が押し出されない(浮かない)ようにしてある */
  .equip-row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.3rem 0; }
  .equip-row-info { flex: 1; min-width: 0; }
  .equip-row button { flex-shrink: 0; }
  .equip-row .desc { font-size: 13px; color: var(--dw-caption-color); }
  /* 出発準備画面: 支援物資/パーティ/出発の3ブロックを視覚的に完全分離するための区切り線 */
  .dw-divider { border: none; border-top: 1px solid var(--dw-card-border); margin: 16px 0; }
  .equip-row button.owned { background: var(--surface-2); color: var(--text-muted); }
  /* 購入した瞬間、その職業のキャラカードにキラッと一瞬光る演出を足す(新機能ではなく既存の
     購入フローへの微演出追加、ダメージ180ms/会心250msの系統に合わせ500ms程度で「間」を作る) */
  @keyframes equipPurchaseGlint {
    0% { filter: brightness(1) drop-shadow(0 0 0 rgba(215,182,111,0)); }
    35% { filter: brightness(1.7) drop-shadow(0 0 12px rgba(215,182,111,0.95)); }
    100% { filter: brightness(1) drop-shadow(0 0 0 rgba(215,182,111,0)); }
  }
  .equip-class-title img.purchase-glint { animation: equipPurchaseGlint 500ms ease-out; }
  /* 増築(施設一覧): 説明文を折りたたみ化して一覧を25%ほどコンパクトにし、スクロールしやすくする。
     見出しをタップすると開閉する(スキル系譜のskill-entryと同じ「タップで開く」操作感に揃えた) */
  .facility-toggle { cursor: pointer; display: flex; align-items: center; }
  .facility-caret { margin-left: auto; color: var(--dw-caption-color); font-size: 0.8rem; transition: transform var(--dw-t-card) ease-out; flex-shrink: 0; }
  .facility-toggle.open .facility-caret { transform: rotate(180deg); }
  .facility-desc { display: none; }
  .facility-toggle.open + .facility-desc { display: block; }
  /* 施設一覧の3グループ化(建築可能/建築済み/未解放)。建築可能だけ最初から展開しておき、
     残り2グループは見出しタップで開く(グループ単位の折りたたみは個々のfacility-toggleとは別枠) */
  .facility-group-heading { cursor: pointer; display: flex; align-items: center; color: var(--dw-caption-color); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
  .facility-group-count { font-size: 12px; color: var(--dw-caption-color); margin-left: 0.35rem; font-weight: 400; }
  .facility-group-body { display: none; }
  .facility-group-body.open { display: block; }
  .facility-group-heading.open .facility-caret { transform: rotate(180deg); }
  /* ===== 奉行所の依頼受注演出(モンハン風の朱印スタンプ) =====
     「紙」「印鑑(木製、CSSのみで表現)」「朱印(受領)」を別レイヤーで持たせ、印鑑だけ独立して
     画面上から回転しながら落下→着地の瞬間に紙が揺れる→朱印がインクの染み込みのように現れる、
     という一連の流れをrequestAnimationFrame無しの純粋なCSSアニメーション(クラス付け外しのみ)で作る */
  .quest-stamp-overlay {
    position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
    background: rgba(10,8,6,0.6); pointer-events: none;
  }
  /* 紙(questStampPaper)と印鑑(questStampSeal)は元は兄弟要素で、印鑑の位置は本来「紙の上のどこか」を
     指したいのにfixed配置のoverlay(画面全体)基準のパーセントになっていたため、紙の実際の位置とズレ
     (紙にちゃんと乗らない)不具合の原因になっていた。この.stageで両方を包み、印鑑の絶対位置指定が
     紙と同じ矩形を基準にするようにする(stage自身はseal側がposition:absoluteで幅を持たないため、
     中身のpaperとぴったり同じサイズになる) */
  .quest-stamp-stage { position: relative; }
  .quest-stamp-paper {
    position: relative; width: 250px; background: linear-gradient(180deg, #f2e8d0, #e6d8b8);
    border: 2px solid #4b3728; border-radius: var(--radius-sm); padding: 1.6rem 1rem 1.8rem; text-align: center;
    box-shadow: 0 10px 26px rgba(0,0,0,0.55); transform: scale(1); overflow: hidden;
  }
  .quest-stamp-paper.scale-up { animation: questStampPaperScale 120ms ease-out forwards; }
  @keyframes questStampPaperScale { from { transform: scale(1); } to { transform: scale(1.03); } }
  .quest-stamp-paper.impact-shake { animation: questStampPaperShake 150ms ease-in-out; }
  @keyframes questStampPaperShake {
    0%, 100% { transform: scale(1.03) translate(0, 0); }
    25% { transform: scale(1.03) translate(-3px, 2px); }
    50% { transform: scale(1.03) translate(3px, -2px); }
    75% { transform: scale(1.03) translate(-2px, 1px); }
  }
  .quest-stamp-paper-title {
    font-weight: 800; font-size: 1rem; color: #2b2118; letter-spacing: 0.04em;
  }
  /* 印鑑(木製)。画像素材が無いため、木目調のradial-gradientと縁取りだけでそれらしく見せる。
     朱印(questStampMark)と全く同じ基準点(left:50%/top:58%)に着地するようにし、サイズも朱印の
     文字の箱(2文字・font-size1.7rem+padding)を余裕をもって覆えるよう横長の矩形にしてある
     (以前は60x60の正方形で朱印の箱より小さく、着地位置も紙ではなくoverlay基準でズレていた) */
  .quest-stamp-seal {
    position: absolute; left: 50%; top: 58%; width: 108px; height: 58px;
    transform: translate(-50%, -50%) translateY(-220px) rotate(-24deg);
    border-radius: var(--radius-md); background: radial-gradient(circle at 35% 30%, #a9784f, #6b4226 65%, #4a2c16 100%);
    border: 3px solid #3a2414; box-shadow: 0 6px 14px rgba(0,0,0,0.5);
    opacity: 0; z-index: 4; pointer-events: none;
  }
  .quest-stamp-seal.falling { animation: questStampSealFall 320ms cubic-bezier(0.55,0,0.85,0.4) forwards; }
  @keyframes questStampSealFall {
    0% { opacity: 1; transform: translate(-50%, -50%) translateY(-220px) rotate(-24deg); }
    82% { opacity: 1; transform: translate(-50%, -50%) translateY(0) rotate(374deg); }
    91% { transform: translate(-50%, -50%) translateY(-8px) rotate(366deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) translateY(0) rotate(368deg); }
  }
  .quest-stamp-seal.retreat { animation: questStampSealRetreat 250ms ease-in forwards; }
  @keyframes questStampSealRetreat {
    from { opacity: 1; transform: translate(-50%, -50%) translateY(0) rotate(368deg); }
    to { opacity: 0; transform: translate(-50%, -50%) translateY(-240px) rotate(368deg); }
  }
  /* 朱印(受領)。インクが染み込むように、透明度と大げさな拡大→縮小のオーバーシュートで押印の勢いを出す */
  .quest-stamp-mark {
    position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%) rotate(8deg) scale(0);
    font-size: 1.7rem; font-weight: 900; color: #b3222b; border: 4px solid #b3222b; border-radius: var(--radius-md);
    padding: 0.15rem 0.7rem; opacity: 0; z-index: 3; letter-spacing: 0.1em;
  }
  .quest-stamp-mark.show { animation: questStampMarkPop 200ms ease-out forwards; }
  @keyframes questStampMarkPop {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(8deg) scale(1.6); }
    55% { opacity: 1; transform: translate(-50%, -50%) rotate(8deg) scale(0.95); }
    80% { transform: translate(-50%, -50%) rotate(8deg) scale(1.05); }
    100% { opacity: 1; transform: translate(-50%, -50%) rotate(8deg) scale(1.0); }
  }
  /* 埃エフェクト。画像を使わず、2つの小さな円が着地点から左右にふわっと散る */
  .quest-stamp-dust { position: absolute; left: 50%; top: 58%; width: 4px; height: 4px; pointer-events: none; }
  .quest-stamp-dust.burst::before, .quest-stamp-dust.burst::after {
    content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%;
    background: rgba(214,196,158,0.9); animation: questStampDustFly 300ms ease-out forwards;
  }
  .quest-stamp-dust.burst::after { animation-name: questStampDustFlyLeft; animation-delay: 30ms; }
  @keyframes questStampDustFly {
    0% { opacity: 0.9; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(22px, -16px) scale(0.4); }
  }
  @keyframes questStampDustFlyLeft {
    0% { opacity: 0.9; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(-22px, -14px) scale(0.4); }
  }
  .lodging-transition { position: fixed; inset: 0; z-index: 60; overflow: hidden; }
  .lodging-transition-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
  .lodging-transition-black { position: absolute; inset: 0; background: #000; opacity: 0; }
  .lodging-transition-caption {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    color: #fff; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.15em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.9); white-space: nowrap;
    opacity: 0;
  }
  @keyframes lodgingCaptionFade {
    0% { opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
  }