/* ==========================================================
   風俗店シミュレーター UIモック
   明るく・ポップ・角丸・カード中心のゲームUI
   ========================================================== */

:root {
    --bg: #fff6ec;
    --bg-grid: rgba(255, 170, 120, 0.12);
    --panel: #ffffff;
    --panel-soft: #fff9f3;
    --line: #f3dccb;
    --text: #4a3b35;
    --muted: #9a857a;
    --accent: #ff7a59;
    --accent-dark: #e8603f;
    --pink: #ff8fb1;
    --blue: #7fb3ff;
    --yellow: #ffd166;
    --green: #6fd3a0;
    --purple: #b39cff;

    --rank-s: #ff5c8a;
    --rank-a: #ff8c42;
    --rank-b: #f4b942;
    --rank-c: #6fd3a0;
    --rank-d: #7fb3ff;
    --rank-e: #b8b8c8;

    --radius: 18px;
    --radius-sm: 10px;
    --shadow: 0 6px 18px rgba(120, 70, 40, 0.10);
    --shadow-strong: 0 10px 28px rgba(120, 70, 40, 0.18);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: "Segoe UI", "Hiragino Sans", "Meiryo", system-ui, sans-serif;
    color: var(--text);
    background-color: var(--bg);
    background-image:
        radial-gradient(circle at 10% 10%, rgba(255, 143, 177, 0.18), transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(127, 179, 255, 0.18), transparent 40%),
        linear-gradient(var(--bg-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
    background-size: auto, auto, 28px 28px, 28px 28px;
    min-width: 320px;
    -webkit-text-size-adjust: 100%;
    line-height: 1.5;
}

button {
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}

h1, h2, h3 { margin: 0; }

.num { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- 全体レイアウト ---------- */

.game {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100vh;
}

.layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    flex: 1;
}

/* ---------- ヘッダー ---------- */

.topbar {
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 2px solid #ffe3d2;
}

.topbar__title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar__logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pink), var(--accent));
    display: grid;
    place-items: center;
    font-size: 26px;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.12);
}

.topbar__title h1 {
    font-size: 20px;
    letter-spacing: 0.04em;
}

.topbar__sub {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.2em;
}

.topbar__stats {
    display: flex;
    gap: 10px;
}

.stat {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    min-width: 110px;
    display: flex;
    flex-direction: column;
}

.stat__label {
    font-size: 11px;
    color: var(--muted);
}

.stat__value {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stat--money .stat__value { color: var(--accent-dark); font-size: 18px; }
.stat--date { background: #fff1e6; }

.badge {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}
.badge--rank { background: var(--yellow); color: #6b4a00; }
.badge--soft { background: #f1eee9; color: var(--muted); font-size: 11px; }
.badge--on   { background: var(--green); color: #0d4a2c; }
.badge--off  { background: #e9e6e1; color: var(--muted); }
.badge--ad   { background: var(--purple); color: #fff; }

/* ---------- 左メニュー ---------- */

.menu {
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 2px solid #ffe3d2;
    position: sticky;
    top: 16px;
    align-self: start;
    min-height: calc(100vh - 140px);
}

.menu__btn {
    border: 2px solid transparent;
    background: transparent;
    border-radius: 12px;
    padding: 10px 12px;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background .15s, transform .1s;
}

.menu__btn:hover { background: var(--panel-soft); transform: translateX(2px); }

.menu__btn.is-active {
    background: linear-gradient(90deg, #ffe0d3, #fff0e8);
    border-color: #ffc9b3;
    color: var(--accent-dark);
}

.menu__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    display: grid;
    place-items: center;
    font-size: 15px;
}

.menu__spacer { flex: 1; }
.menu__list { display: flex; flex-direction: column; gap: 6px; }

/* 営業開始ボタン */
.btn-open {
    border: none;
    border-radius: 16px;
    padding: 14px 12px;
    background: linear-gradient(180deg, #ff9a6c, var(--accent));
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    box-shadow: 0 6px 0 var(--accent-dark), 0 10px 20px rgba(255, 122, 89, 0.35);
    transition: transform .08s, box-shadow .08s;
    animation: pulse 2.4s infinite;
}
.btn-open:hover { filter: brightness(1.05); }
.btn-open:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--accent-dark), 0 4px 10px rgba(255, 122, 89, 0.35);
}
.btn-open__icon { font-size: 26px; }
.btn-open__text { font-size: 18px; font-weight: 900; letter-spacing: 0.1em; }
.btn-open__sub  { font-size: 11px; opacity: .9; }

@keyframes pulse {
    0%, 100% { box-shadow: 0 6px 0 var(--accent-dark), 0 10px 20px rgba(255,122,89,.35); }
    50%      { box-shadow: 0 6px 0 var(--accent-dark), 0 10px 28px rgba(255,122,89,.6); }
}

/* ---------- 中央エリア ---------- */

.main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.view-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.view-title h2 { font-size: 22px; }
.view-title p  { margin: 0; color: var(--muted); font-size: 13px; }

.panel {
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px;
    border: 2px solid #ffe9dd;
}

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.panel__head h3 {
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.panel__tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.panel__head--tools { justify-content: flex-end; }
/* 並び替え：項目セレクト＋向きボタンを1つの枠にまとめる（セグメント風） */
.sort-group {
    display: inline-flex;
    align-items: stretch;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 0 #e8ddd2;
    overflow: hidden;
}
.sort-select {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-right: 2px solid var(--line);
    padding: 4px 22px 4px 10px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    color: var(--text);
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%239a857a' stroke-width='1.8' stroke-linecap='round'/></svg>") no-repeat right 8px center;
    cursor: pointer;
}
/* 向き（↑ = 新しい順・高い順、押すと回転して ↓ = 古い順・低い順） */
.sort-dir {
    display: grid;
    place-items: center;
    width: 30px;
    border: 0;
    background: #fff4ee;
    color: var(--accent-dark);
}
.sort-dir svg { transition: transform .18s; }
.sort-dir.is-asc svg { transform: rotate(180deg); }
.sort-dir:active { background: #ffe4d6; }
.panel__head h3::before {
    content: "";
    width: 6px;
    height: 18px;
    border-radius: 3px;
    background: var(--accent);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-top { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }

/* ---------- 店舗マップ（斜視図） ---------- */

.map-viewport {
    position: relative;
    height: 300px;
    overflow: hidden;
    border-radius: 14px;
    border: 3px solid #ffd3c2;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.7), transparent 50%),
        linear-gradient(180deg, #fff1f6, #ffe3ec);
    touch-action: none;
    user-select: none;
    cursor: grab;
}
.map-viewport.is-dragging { cursor: grabbing; }

.map {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    will-change: transform;
}


/* 3D の土台。床を寝かせ、板はビルボードで立てる */
.iso {
    position: absolute;
    left: 50%;
    top: 54%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
}
.iso * { transform-style: preserve-3d; }

.iso__floor {
    position: absolute;
    transform: rotateX(60deg) rotateZ(-45deg);
    background-color: #f5d9c3;
    background-image:
        linear-gradient(rgba(255,255,255,.45) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255,255,255,.45) 2px, transparent 2px);
    background-size: 40px 40px;
    border: 3px solid #e2b59a;
    box-shadow: 0 0 0 10px rgba(226, 181, 154, .35);
}

/* 壁（床の奥側2辺に立てる） */
.iso__wall {
    position: absolute;
    background: linear-gradient(180deg, #ffe4ee, #ffd0e0);
    border: 2px solid #f4b8cc;
}
.iso__wall--a {
    left: 0; top: 0;
    height: 110px;
    transform-origin: 0 0;
    transform: rotateX(90deg);
}
.iso__wall--b {
    left: 100%; top: 0;
    width: 110px;
    transform-origin: 0 0;
    transform: rotateY(-90deg);
}

/* 床の上の区画 */
.iso__zone {
    position: absolute;
    border-radius: 8px;
    border: 3px solid rgba(255,255,255,.7);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 8px;
}
.iso__zone--room  { background: rgba(255, 143, 177, .35); }
.iso__zone--wait  { background: rgba(127, 179, 255, .30); }
.iso__zone--front { background: rgba(255, 209, 102, .35); }

/* 板（正面向き） */
.iso__label {
    display: inline-block;
    transform-origin: 50% 100%;
    transform: rotateZ(45deg) rotateX(-60deg);
    background: rgba(255,255,255,.9);
    border-radius: 999px;
    padding: 2px 12px;
    font-size: 13px;
    font-weight: 900;
    color: var(--text);
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
.iso__sign { position: absolute; left: -40px; top: -190px; }
.iso__label--sign {
    transform: none;
    font-size: 18px;
    color: var(--pink);
    border: 2px solid var(--pink);
    box-shadow: 0 3px 0 var(--pink);
}

.iso__sprite {
    position: absolute;
    width: 0;
    height: 0;
}
.iso__sprite-inner {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    transform: rotateZ(45deg) rotateX(-60deg) translate(-50%, -100%);
    display: inline-block;
    white-space: nowrap;
}
.iso__item {
    font-size: 44px;
    filter: drop-shadow(0 6px 4px rgba(0,0,0,.18));
}

/* 内装レベルで床と壁の色が変わる（内装工事 I〜III・伝説の内装） */
.iso--lv1 .iso__floor { background-color: #f7e1cf; border-color: #e0b89c; }
.iso--lv2 .iso__floor { background-color: #efe0d6; border-color: #c9a58b; }
.iso--lv2 .iso__wall  { background: linear-gradient(180deg, #f6e6f0, #ead3e0); border-color: #d9b8c9; }
.iso--lv3 .iso__floor { background-color: #e8d6cc; background-image: linear-gradient(rgba(255,255,255,.55) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.55) 2px, transparent 2px); border-color: #b48a6e; box-shadow: 0 0 0 10px rgba(180, 138, 110, .35); }
.iso--lv3 .iso__wall  { background: linear-gradient(180deg, #f3e4ee, #dcc3d6); border-color: #c4a2b8; }
.iso--lv4 .iso__floor { background-color: #e4d2e6; background-image: linear-gradient(rgba(255,255,255,.6) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.6) 2px, transparent 2px); border-color: #b39cff; box-shadow: 0 0 0 10px rgba(179, 156, 255, .35), 0 0 40px rgba(255, 215, 120, .5); }
.iso--lv4 .iso__wall  { background: linear-gradient(180deg, #fff3d6, #f3dcc0); border-color: #e3c58a; }

/* 家具の画像（無ければ絵文字にフォールバック） */
.iso__item img { display: block; width: 64px; height: auto; filter: drop-shadow(0 6px 4px rgba(0,0,0,.18)); }
.iso__item--car img { width: 72px; }
.iso__item--desk img { width: 56px; }
.iso__item--sign img { width: 56px; }

/* うろうろする人（立ち姿） */
.walker { display: inline-block; animation: bob 1.6s ease-in-out infinite; }
.iso__walker.is-walking .walker { animation: waddle .5s ease-in-out infinite; }
.iso__walker.is-left .figure { transform: scaleX(-1); }
.figure--img { display: block; width: 48px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 6px 4px rgba(0,0,0,.2)); }   /* 48×72 のドット絵を等倍で置き、マップの倍率（整数）で拡大 */
/* 画像が無いときの仮キャラ（頭＋体） */
.figure--css { display: inline-flex; flex-direction: column; align-items: center; filter: drop-shadow(0 6px 4px rgba(0,0,0,.2)); }
.figure--css i { display: block; width: 26px; height: 26px; border-radius: 50%; background: #ffe0c8; border: 3px solid #fff; box-shadow: inset 0 -8px 0 var(--c, #ffb3c8); }
.figure--css b { display: block; width: 24px; height: 30px; margin-top: -3px; border-radius: 8px 8px 6px 6px; background: var(--c, #ffb3c8); border: 2px solid rgba(255,255,255,.7); }
.figure--staff i { box-shadow: inset 0 -8px 0 #6b7a99; }
.figure--staff b { background: #3b4a6b; }
@keyframes waddle {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-3px) rotate(3deg); }
}

/* ミニキャラ（旧。求人・退社ダイアログ等で未使用なら消してよい） */
.chibi {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    animation: bob 1.6s ease-in-out infinite;
}
.chibi__face {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 22px;
    border: 3px solid #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
.chibi__body {
    width: 28px;
    height: 22px;
    border-radius: 6px 6px 10px 10px;
    margin-top: -4px;
}
.chibi__name {
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
    background: rgba(255,255,255,.9);
    padding: 0 6px;
    border-radius: 999px;
}
@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* ---------- 本日の営業情報 ---------- */

.info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.info-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--panel-soft);
    border-radius: var(--radius-sm);
    font-size: 14px;
}
.info-list li span:first-child { color: var(--muted); }
.info-list li strong { font-size: 15px; }

.forecast {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: #fff4d6;
    border: 1px dashed #f4c96a;
    font-size: 13px;
}

/* ---------- キャストカード ---------- */

.cast-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.cast-card {
    background: var(--panel-soft);
    border: 2px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .12s, box-shadow .12s;
    cursor: pointer;
}
.cast-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-strong); }
.cast-card.is-off { opacity: .6; }

.cast-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 28px;
    border: 3px solid #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,.12);
    flex-shrink: 0;
}
.avatar--lg { width: 84px; height: 84px; font-size: 40px; }

.cast-card__name {
    font-size: 17px;
    font-weight: 900;
}
.cast-card__meta {
    font-size: 12px;
    color: var(--muted);
}

.cast-card__status { margin-left: auto; }

.stat-rows { display: flex; flex-direction: column; gap: 5px; }
.stat-row {
    display: grid;
    grid-template-columns: 40px 30px 1fr;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.stat-row__label { color: var(--muted); }

.rank {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-weight: 900;
    color: #fff;
    font-size: 14px;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.15);
}
.rank--S { background: var(--rank-s); }
.rank--A { background: var(--rank-a); }
.rank--B { background: var(--rank-b); }
.rank--C { background: var(--rank-c); }
.rank--D { background: var(--rank-d); }
.rank--E { background: var(--rank-e); }

.bar {
    height: 10px;
    border-radius: 999px;
    background: #f0e6df;
    overflow: hidden;
}
.bar__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--yellow), var(--accent));
}
.bar__fill--S { background: linear-gradient(90deg, #ff8fb1, var(--rank-s)); }
.bar__fill--A { background: linear-gradient(90deg, #ffb56b, var(--rank-a)); }
.bar__fill--B { background: linear-gradient(90deg, #ffe08a, var(--rank-b)); }
.bar__fill--C { background: linear-gradient(90deg, #a9e8c6, var(--rank-c)); }
.bar__fill--D { background: linear-gradient(90deg, #b8d4ff, var(--rank-d)); }
.bar__fill--E { background: var(--rank-e); }

.cast-card__foot {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--muted);
    border-top: 1px dashed var(--line);
    padding-top: 8px;
}

/* ---------- 汎用ボタン ---------- */

.btn {
    border: none;
    border-radius: 12px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 14px;
    background: #f1eee9;
    color: var(--text);
    box-shadow: 0 3px 0 #d9d2ca;
    transition: transform .08s, box-shadow .08s, filter .1s;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #d9d2ca; }
.btn--primary { background: linear-gradient(180deg, #ff9a6c, var(--accent)); color: #fff; box-shadow: 0 3px 0 var(--accent-dark); }
.btn--primary:active { box-shadow: 0 1px 0 var(--accent-dark); }
.btn--blue { background: linear-gradient(180deg, #9cc5ff, var(--blue)); color: #fff; box-shadow: 0 3px 0 #4f8de0; }
.btn--lg { padding: 12px 32px; font-size: 17px; border-radius: 14px; }
.btn--sm { padding: 5px 12px; font-size: 12px; border-radius: 9px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
.btn[disabled]:active { transform: none; }

/* ---------- テーブル ---------- */

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    font-size: 14px;
}
.table th {
    text-align: left;
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
    padding: 0 12px;
}
.table td {
    background: var(--panel-soft);
    padding: 10px 12px;
}
.table td:first-child { border-radius: 10px 0 0 10px; }
.table td:last-child  { border-radius: 0 10px 10px 0; }
.table--center td, .table--center th { text-align: center; }
.table--center td:first-child, .table--center th:first-child { text-align: left; }

/* シフト切替セル */
.shift-cell {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 32px;
    border-radius: 8px;
    font-weight: 900;
    border: 2px solid transparent;
    background: #fff;
    transition: transform .08s;
}
.shift-cell:hover { transform: scale(1.08); }
.shift-cell--on  { color: #1a7a4a; border-color: var(--green); background: #e8f9f0; }
.shift-cell--off { color: var(--muted); border-color: #e2ddd6; }

/* ---------- 汎用アイテムカード ---------- */

.item-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.item {
    background: var(--panel-soft);
    border: 2px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.item.is-selected { border-color: var(--purple); background: #f5f1ff; }
.item__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #fff;
    display: grid;
    place-items: center;
    font-size: 24px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    flex-shrink: 0;
}
.item__body { flex: 1; min-width: 0; }
.item__title { font-weight: 900; font-size: 15px; }
.item__desc { font-size: 12px; color: var(--muted); }
.item__meta { display: flex; gap: 12px; font-size: 13px; margin-top: 4px; }
.item__meta b { color: var(--accent-dark); }

/* ---------- 分析：簡易グラフ ---------- */

.chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 180px;
    padding: 12px 8px 0;
    border-bottom: 2px solid var(--line);
}
.chart__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 4px;
    font-size: 11px;
    color: var(--muted);
}
.chart__bar {
    width: 70%;
    border-radius: 8px 8px 2px 2px;
    background: linear-gradient(180deg, var(--pink), var(--accent));
    min-height: 4px;
    transition: height .4s;
}
.chart__bar--empty { background: #eee6de; }
.chart__val { font-weight: 700; color: var(--text); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi {
    background: var(--panel-soft);
    border-radius: 12px;
    padding: 12px 14px;
}
.kpi__label { font-size: 12px; color: var(--muted); }
.kpi__value { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.kpi__value--up { color: #1a7a4a; }

/* 顧客層バー */
.seg { display: flex; flex-direction: column; gap: 8px; }
.seg__row { display: grid; grid-template-columns: 90px 1fr 44px; gap: 10px; align-items: center; font-size: 13px; }
.seg__bar { height: 14px; border-radius: 999px; background: #f0e6df; overflow: hidden; }
.seg__fill { height: 100%; border-radius: 999px; }

/* ---------- オーバーレイ / モーダル ---------- */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(60, 30, 20, .55);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    z-index: 100;
    animation: fadein .2s;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.modal {
    width: 560px;
    max-height: 90vh;
    background: var(--panel);
    border-radius: 22px;
    box-shadow: var(--shadow-strong);
    border: 3px solid #ffd3c2;
    display: flex;
    flex-direction: column;
    animation: popin .25s cubic-bezier(.2, 1.4, .5, 1);
}
@keyframes popin { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.modal__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    border-bottom: 2px dashed var(--line);
}
.modal__head h2 { font-size: 20px; }
.modal__icon { font-size: 24px; }
.modal__date { margin-left: auto; color: var(--muted); font-size: 13px; }

.modal__body { padding: 16px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.modal__foot { padding: 14px 22px 20px; display: flex; justify-content: center; }

.result-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 12px;
    font-size: 15px;
}
.result-row span:first-child { color: var(--muted); }
.result-row--big { font-size: 20px; background: var(--panel-soft); border-radius: 10px; padding: 10px 14px; }
.result-row--profit strong { color: #1a7a4a; }
.result-row--loss strong { color: #d64545; }

.result-block {
    background: var(--panel-soft);
    border-radius: 12px;
    padding: 10px 12px;
}
.result-block__title { font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 700; }

.result-cast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    font-size: 14px;
}
.result-cast .avatar { width: 34px; height: 34px; font-size: 16px; }
.result-cast__name { font-weight: 700; width: 70px; }
.result-cast__stats { margin-left: auto; font-variant-numeric: tabular-nums; }

.result-money {
    background: linear-gradient(90deg, #fff1e6, #ffe9d6);
    border-radius: 12px;
    padding: 12px 14px;
    text-align: center;
    font-size: 18px;
    font-weight: 900;
}
.result-money .arrow { color: var(--accent); margin: 0 10px; }

/* 営業中演出 */
.business {
    width: 520px;
    background: #2b2230;
    color: #fff;
    border-radius: 22px;
    padding: 24px 28px;
    border: 3px solid #5a4560;
    box-shadow: var(--shadow-strong);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.business__clock { font-size: 40px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.business__title { font-size: 14px; color: #d3c4dc; letter-spacing: .3em; }
.business__scene {
    width: 100%;
    height: 90px;
    border-radius: 12px;
    background: linear-gradient(180deg, #3d2f45, #4b3b52);
    position: relative;
    overflow: hidden;
}
.business__scene .walker {
    position: absolute;
    bottom: 10px;
    font-size: 28px;
    animation: walk 2.6s linear forwards;
}
@keyframes walk {
    from { left: -40px; }
    to   { left: 100%; }
}
.business__log {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 96px;
    overflow: hidden;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 3px;
}
.business__log li { animation: slidein .25s; color: #f2e8f5; }
@keyframes slidein { from { transform: translateX(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.business__bar { width: 100%; height: 10px; border-radius: 999px; background: #1b151f; overflow: hidden; }
.business__bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--yellow)); transition: width .3s linear; }

/* ---------- トースト ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    background: #2b2230;
    color: #fff;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 14px;
    z-index: 200;
    box-shadow: var(--shadow-strong);
    animation: popin .2s;
}

/* ---------- 準備中ラベル ---------- */
.wip {
    font-size: 11px;
    color: #b08968;
    background: #fff3e0;
    border: 1px dashed #e5b98a;
    border-radius: 999px;
    padding: 1px 8px;
    margin-left: 6px;
}

.note {
    font-size: 12px;
    color: var(--muted);
    margin: 8px 0 0;
}

/* ---------- ヘッダー右上ツール ---------- */

.topbar__tools { display: flex; gap: 6px; margin-left: 12px; }
.tool-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    font-size: 16px;
    box-shadow: 0 2px 0 #e6d5c7;
}
.tool-btn:active { transform: translateY(2px); box-shadow: none; }

/* ---------- 結果モーダル：広告オファー ---------- */

.modal__foot--col { flex-direction: column; align-items: stretch; gap: 8px; }

.ad-offer { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.btn-ad {
    width: 100%;
    border: none;
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: #fff;
    background: linear-gradient(135deg, #7c5cff, #b39cff);
    box-shadow: 0 5px 0 #5a3fd6, 0 10px 22px rgba(124, 92, 255, .4);
    animation: ad-glow 1.8s ease-in-out infinite;
    transition: transform .08s, box-shadow .08s;
}
.btn-ad:active { transform: translateY(3px); box-shadow: 0 2px 0 #5a3fd6; }
.btn-ad__icon { font-size: 34px; }
.btn-ad__text { display: flex; flex-direction: column; }
.btn-ad__title { font-size: 17px; font-weight: 900; }
.btn-ad__title b { color: var(--yellow); font-size: 22px; }
.btn-ad__sub { font-size: 13px; opacity: .95; font-variant-numeric: tabular-nums; }
@keyframes ad-glow {
    0%, 100% { box-shadow: 0 5px 0 #5a3fd6, 0 10px 22px rgba(124,92,255,.4); }
    50%      { box-shadow: 0 5px 0 #5a3fd6, 0 10px 30px rgba(124,92,255,.75); }
}

.link-btn {
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    text-decoration: underline;
    padding: 4px 8px;
}

.badge--bonus { background: #7c5cff; color: #fff; font-size: 11px; }
.result-block--bonus { border: 2px solid #b39cff; background: #f5f1ff; }
.result-old { color: var(--muted); font-weight: 400; font-size: 13px; }

/* ---------- 広告再生モック ---------- */

.overlay--ad { z-index: 150; background: rgba(0, 0, 0, .8); }

.ad {
    width: min(420px, calc(100vw - 24px));
    background: #111;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.6);
    color: #fff;
}
.ad__top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 12px;
    background: #222;
}
.ad__label { color: #aaa; }
.ad__count { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.ad__close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #555;
    background: #333;
    color: #888;
    font-size: 13px;
}
.ad__close--ready { background: #fff; color: #111; border-color: #fff; }

.ad__screen { position: relative; height: min(480px, 56vh); background: #000; }

.ad__video {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(160deg, #ff9a3c, #ff5c8a 60%, #7c5cff);
    text-align: center;
    overflow: hidden;
}
.ad__product { font-size: 96px; animation: ad-bounce 1.2s ease-in-out infinite; filter: drop-shadow(0 8px 12px rgba(0,0,0,.3)); }
@keyframes ad-bounce {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-14px) rotate(6deg); }
}
.ad__brand { font-size: 12px; letter-spacing: .3em; opacity: .9; }
.ad__headline { font-size: 24px; font-weight: 900; line-height: 1.3; text-shadow: 0 3px 0 rgba(0,0,0,.2); }
.ad__cta {
    display: inline-block;
    margin-top: 10px;
    background: #fff;
    color: #ff5c8a;
    font-weight: 900;
    padding: 8px 20px;
    border-radius: 999px;
}
.ad__sparkle { position: absolute; font-size: 28px; animation: blink 1s infinite; }
.ad__sparkle--1 { left: 14%; top: 18%; }
.ad__sparkle--2 { right: 12%; bottom: 22%; animation-delay: .5s; }

.ad__reward {
    position: absolute;
    inset: 0;
    background: #1c1826;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    animation: fadein .3s;
}
.ad__reward-icon { font-size: 72px; animation: bob 1s infinite; }
.ad__reward-title { font-size: 26px; font-weight: 900; color: var(--yellow); }
.ad__reward-text { font-size: 15px; margin-bottom: 10px; }
.ad__reward-text b { color: var(--yellow); }

.ad__bar { height: 6px; background: #333; }
.ad__bar-fill { height: 100%; width: 0; background: var(--yellow); transition: width 1s linear; }
.ad__warn { padding: 8px 12px; font-size: 12px; color: #ffcf6b; text-align: center; background: #222; }

/* ---------- スマホ専用パーツ（PCでは非表示） ---------- */

.btn-menu { display: none; }
.menu__sub { display: none; }
.btn-row { display: flex; gap: 6px; }

.menu__link {
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    text-align: left;
    padding: 6px 10px;
    border-radius: 8px;
}
.menu__link:hover { background: var(--panel-soft); color: var(--text); }

/* ---------- 画面シート（PC：中央モーダル。スマホ用は下の @media で上書き） ---------- */
.sheet {
    position: relative;
    width: 640px;
    max-width: calc(100vw - 32px);
    max-height: 88vh;
    background: var(--bg);
    border-radius: 22px;
    border: 3px solid #ffd3c2;
    box-shadow: var(--shadow-strong);
    overflow: hidden;
    animation: popin .25s cubic-bezier(.2, 1.4, .5, 1);
}
.sheet__close {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: #fff;
    font-size: 15px;
    font-weight: 900;
    color: var(--muted);
    box-shadow: var(--shadow);
}
.sheet__body {
    max-height: 88vh;
    overflow-y: auto;
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sheet__body .view-title { padding-right: 44px; }

/* ==========================================================
   スマホレイアウト（基本はこちら。PCは上の定義をそのまま広げる）
   - ヘッダー：左に日付、右に所持金。直下に知名度 / SP
   - 中央：店舗風景を大きく
   - フッター：右下に「メニュー」（プルダウン）、左に大きな「営業開始」
   ========================================================== */

/* --- (旧 @media max-width:768px → 常時適用) --- */
.game { padding: 0 0 96px; gap: 0; }
.layout { display: block; }
.main { gap: 6px; }

/* ---- ヘッダー：背景の上に浮かせる。左右の端から生えるタブ ---- */
.topbar {
    position: fixed;
    left: 0; right: 0; top: 0;
    z-index: 40;
    padding: 6px 0 0;
    gap: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    pointer-events: none;
}
.topbar__title { display: none; }
.topbar__stats {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 0;
}
.stat {
    pointer-events: auto;
    width: max-content;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 3px 14px;
    background: rgba(255,255,255,.94);
    border: 2px solid #ffd3c2;
    box-shadow: var(--shadow);
}
.stat__label { display: none; }
.stat__value { font-size: 15px; }
.stat--shop, .stat--rank { display: none; }

/* 左端から生える */
.stat--date, .stat--fame {
    justify-self: start;
    border-left: 0;
    border-radius: 0 999px 999px 0;
    padding-left: 12px;
}
/* 右端から生える */
.stat--money, .stat--sp {
    justify-self: end;
    border-right: 0;
    border-radius: 999px 0 0 999px;
    padding-right: 12px;
}
.stat--date  { grid-column: 1; grid-row: 1; }
.stat--money { grid-column: 2; grid-row: 1; }
.stat--fame  { grid-column: 1; grid-row: 2; }
.stat--sp    { grid-column: 2; grid-row: 2; }
.stat--money .stat__value { font-size: 16px; }
.stat--fame, .stat--sp { padding-top: 2px; padding-bottom: 2px; }
.stat--fame .stat__label, .stat--sp .stat__label {
    display: inline;
    font-size: 10px;
    margin-right: 2px;
}
.stat--fame .stat__value, .stat--sp .stat__value { font-size: 14px; }

/* ---- フッター：営業開始（大）＋ メニュー（小） ---- */
.btn-open {
    position: fixed;
    left: 10px;
    right: 118px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 60;
    height: 64px;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
    border-radius: 18px;
}
.btn-open__icon { font-size: 24px; }
.btn-open__text { font-size: 19px; }
.btn-open__sub { display: none; }

.btn-menu {
    position: fixed;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 60;
    width: 100px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: 2px solid #ffc9b3;
    border-radius: 16px;
    background: #fff;
    color: var(--accent-dark);
    font-weight: 900;
    box-shadow: 0 4px 0 #e6c9b8, var(--shadow);
}
.btn-menu:active { transform: translateY(3px); box-shadow: 0 1px 0 #e6c9b8; }
.btn-menu__icon { font-size: 20px; line-height: 1; }
.btn-menu__text { font-size: 11px; }

/* プルダウン（メニューボタンの上に開く）。nav 自体は箱を持たない */
.menu {
    display: contents;
}
.menu__list {
    display: none;
    position: fixed;
    top: auto;
    left: auto;
    right: 10px;
    bottom: calc(74px + env(safe-area-inset-bottom));
    z-index: 60;
    width: 190px;
    min-height: 0;
    padding: 8px;
    gap: 2px;
    border-radius: 16px;
    border: 2px solid #ffe3d2;
    background: var(--panel);
    box-shadow: var(--shadow-strong);
    transform-origin: bottom right;
}
.menu__list.is-open { display: flex; animation: fadein .15s; }
.menu__btn { padding: 9px 10px; font-size: 15px; border-radius: 10px; }
.menu__btn:hover { transform: none; }
.menu__btn[data-view="dashboard"],
.menu__btn[data-view="shift"],
.menu__spacer { display: none; }
.menu__sub {
    display: flex;
    flex-direction: column;
    border-top: 1px dashed var(--line);
    margin-top: 4px;
    padding-top: 4px;
}

/* ---- 中央：店舗マップを全面に ---- */
.view-title { flex-direction: column; align-items: flex-start; gap: 0; padding: 0 12px; }
.view-title h2 { font-size: 18px; }
.panel {
    padding: 10px 12px;
    border-radius: 0;
    border-width: 2px 0;
    box-shadow: none;
}
.panel + .panel { border-top: 0; }

.game { padding-bottom: 0; }
.main[data-view="dashboard"] .view-title { display: none; }
.main[data-view="dashboard"] > .panel { display: none; }      /* 本日のキャスト */
.dash-top { display: block; }
.dash-top .panel + .panel { display: none; }                  /* 本日の営業情報 */
.dash-top .panel:first-child {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
}
.dash-top .panel:first-child .panel__head { display: none; }
.map-viewport {
    height: 100vh;
    border: 0;
    border-radius: 0;
}

/* ---- メニューで選んだ画面はシートで開く ---- */
.overlay--view {
    z-index: 55;
    background: rgba(60, 30, 20, .35);
    display: block;
    animation: none;
}
.sheet {
    position: absolute;
    left: 0; right: 0;
    top: 68px;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: none;
    border: 0;
    background: var(--bg);
    border-radius: 22px 22px 0 0;
    border-top: 3px solid #ffd3c2;
    box-shadow: 0 -8px 24px rgba(120, 70, 40, .2);
    overflow: hidden;
    animation: sheet-up .25s cubic-bezier(.2, 1, .4, 1);
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet__close {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: #fff;
    font-size: 15px;
    font-weight: 900;
    color: var(--muted);
    box-shadow: var(--shadow);
}
.sheet__body {
    position: absolute;
    inset: 0;
    max-height: none;
    overflow-y: auto;
    padding: 14px 0 calc(96px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sheet__body .view-title { padding-right: 52px; }

.grid-2, .grid-3, .item-list { grid-template-columns: 1fr; gap: 10px; }
.grid-2--keep { grid-template-columns: 1fr 1fr; }
.kpi-grid { grid-template-columns: 1fr 1fr; }
.kpi__value { font-size: 18px; }

/* キャストカードは横スクロール */
.cast-grid {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
}
.cast-card { min-width: 270px; scroll-snap-align: start; padding: 12px; }
.cast-card__status { white-space: nowrap; }
.cast-card:hover { transform: none; }
.avatar { width: 48px; height: 48px; font-size: 24px; }

/* テーブルは横スクロール */
.table { min-width: 460px; }
.table td { padding: 8px 8px; }

/* モーダル */
.modal { width: calc(100vw - 20px); max-height: 92vh; border-radius: 18px; }
.modal__head { padding: 12px 16px; }
.modal__head h2 { font-size: 17px; }
.modal__body { padding: 12px 16px; gap: 10px; }
.modal__foot { padding: 10px 16px 16px; }
.result-row { font-size: 14px; }
.result-row--big { font-size: 17px; }
.result-money { font-size: 15px; }
.btn-ad__title { font-size: 15px; }
.btn-ad__title b { font-size: 19px; }

.business { width: calc(100vw - 20px); padding: 18px; }
.business__clock { font-size: 32px; }

.toast { width: max-content; max-width: calc(100vw - 24px); top: 12px; bottom: auto; font-size: 13px; }


/* ---------- スキルポイント / スキルツリー（グラフ） ---------- */

.stat--sp .stat__value { color: #b8860b; }
.sp-icon { margin-right: 2px; }
.badge--sp { background: #fff1c2; color: #8a6400; }

.legend-row { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.legend { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

.tree-viewport {
    position: relative;
    height: 560px;
    overflow: hidden;
    background: var(--panel-soft);
    border-radius: 14px;
    touch-action: none;
    user-select: none;
    cursor: grab;
}
.tree-viewport.is-dragging { cursor: grabbing; }
.tree-viewport .tree { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }

.tree {
    --node-w: 118px;
    position: relative;
    display: grid;
    column-gap: 14px;
    row-gap: 34px;
    width: max-content;
    padding: 6px;
}
.tree__lines {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}

/* ノード：ブランチ色は --br */
.node {
    position: relative;
    z-index: 1;
    width: var(--node-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 6px 6px;
    background: #fff;
    border: 2px solid var(--line);
    border-top: 5px solid var(--br, var(--line));
    border-radius: 12px;
    text-align: center;
    transition: transform .1s, box-shadow .1s;
}
.node--ready {
    border-color: var(--yellow);
    border-top-color: var(--br);
    box-shadow: 0 3px 0 #e6c15a, 0 6px 14px rgba(244, 185, 66, .25);
    cursor: pointer;
}
.node--ready:hover { transform: translateY(-2px); }
.node--ready:active { transform: translateY(2px); box-shadow: 0 1px 0 #e6c15a; }
.node--done { border-color: var(--green); border-top-color: var(--br); background: #eefaf3; cursor: default; }
.node--locked { opacity: .55; cursor: pointer; }
.node--blocked { opacity: .45; cursor: pointer; border-style: dashed; }

.node__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--panel-soft);
    display: grid;
    place-items: center;
    font-size: 20px;
}
.node__name { font-weight: 900; font-size: 12px; line-height: 1.2; }
.node__mock {
    font-size: 9px;
    color: #b08968;
    border: 1px dashed #e5b98a;
    border-radius: 999px;
    padding: 0 4px;
    margin-left: 3px;
    vertical-align: 1px;
}
.node__cost { font-size: 11px; font-weight: 900; color: #8a6400; }
.node--done .node__cost { color: #1a7a4a; }
.node--blocked .node__cost { color: #d64545; }

/* スキル習得の確認ダイアログ */
.skill-dlg__effect { font-weight: 700; }
.skill-dlg__conds {
    list-style: none;
    margin: 0 0 10px;
    padding: 10px 12px;
    text-align: left;
    border-radius: 12px;
    background: #fff4d6;
    border: 1px dashed #f4c96a;
    font-size: 13px;
    line-height: 1.8;
}
.skill-dlg__conds .is-ng { color: #b0641e; }
.skill-dlg__ask { font-weight: 700; }
.skill-dlg__state { color: #1a7a4a; font-weight: 700; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }

/* ---------- 知名度ピラミッド ---------- */

.fame-now {
    background: var(--panel-soft);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fame-now__value { font-size: 14px; color: var(--muted); }
.fame-now__value b { font-size: 26px; color: var(--accent-dark); }
.fame-now__tier { font-weight: 900; font-size: 16px; }
.fame-now__next { font-size: 13px; color: var(--muted); }
.fame-now__next b { color: var(--accent-dark); }
.bar--lg { height: 14px; }

.pyr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pyr__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff;
    border: 2px solid var(--line);
    width: 100%;
    max-width: 520px;
    transition: transform .15s;
}
/* 一つ先：少し細く・薄く */
.pyr__row--next { max-width: 440px; opacity: .6; background: #f6f3f0; }
/* いまここ：いちばん大きく強調 */
.pyr__row--cur {
    border-color: var(--accent);
    background: #fff1e6;
    box-shadow: 0 0 0 4px rgba(255, 122, 89, .18), var(--shadow-strong);
    transform: scale(1.04);
    z-index: 1;
    padding: 14px 16px;
}
.pyr__row--cur .pyr__icon { font-size: 34px; }
.pyr__row--cur .pyr__name { font-size: 16px; }
/* 一つ前：達成済み */
.pyr__row--prev { max-width: 480px; border-color: var(--green); background: #eefaf3; opacity: .85; }
.pyr__row--edge { justify-content: center; font-size: 13px; color: var(--muted); border-style: dashed; }
.pyr__more { font-size: 11px; color: var(--muted); min-height: 16px; }
.pyr__me {
    position: absolute;
    left: -8px;
    top: -14px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    padding: 2px 10px;
    border-radius: 999px;
    box-shadow: var(--shadow);
    animation: bob 1.2s ease-in-out infinite;
}
.pyr__icon { font-size: 26px; flex-shrink: 0; }
.pyr__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pyr__name { font-weight: 900; font-size: 14px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pyr__min { font-size: 11px; color: var(--muted); }
.pyr__perks { font-size: 11px; color: #8a6f60; }
.pyr__state { font-size: 16px; color: #1a7a4a; flex-shrink: 0; }

/* ヘッダーの知名度 / SP は押せる */
.stat--fame, .stat--sp { cursor: pointer; }
.stat--fame:hover, .stat--sp:hover { filter: brightness(.97); }

/* 未解放の広告 */
.item.is-locked { opacity: .6; background: #f6f3f0; }
.item.is-locked .item__icon { background: #ebe7e2; }

/* --- (旧 @media max-width:768px → 常時適用) --- */
.tree { --node-w: 100px; column-gap: 10px; row-gap: 28px; }
.tree-viewport { height: 62vh; border-radius: 0; }
.pyr__row { padding: 8px 10px; gap: 8px; }
.pyr__row--next, .pyr__row--prev { max-width: 88%; }
.pyr__row--cur { transform: scale(1.02); }
.pyr__name { font-size: 13px; }
.pyr__icon { font-size: 22px; }
.node__icon { width: 32px; height: 32px; font-size: 17px; }
.node__name { font-size: 11px; }


/* ---------- キャスト/スタッフ：2列カード・写真・気分 ---------- */

.cast-grid--2 { grid-template-columns: repeat(2, 1fr); }

.avatar { position: relative; overflow: hidden; }
.avatar__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mood--low { color: #d64545; font-weight: 700; }
.result-change { font-size: 13px; padding: 3px 4px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.result-change .rank { width: 20px; height: 20px; font-size: 12px; }
.result-change .warn { color: #d64545; }

/* ---------- 求人：応募者2人 ---------- */

.overlay--top { z-index: 120; }
.recruit-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
    text-align: left;
}
.recruit {
    background: var(--panel-soft);
    border: 2px solid var(--line);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.recruit .btn { width: 100%; font-size: 13px; }
.recruit__meta { font-size: 12px; color: var(--muted); }
.recruit__fee { font-size: 12px; font-weight: 700; color: var(--accent-dark); }
.recruit__comment { font-size: 12px; color: var(--muted); }
.result-sub { display: block; font-size: 10px; font-weight: 400; color: var(--muted); }
.info-list__sub { display: block; font-size: 10px; font-weight: 400; color: var(--muted); }
.recruit-list[data-count="3"], .recruit-list[data-count="4"] { grid-template-columns: 1fr 1fr; }
.rank--unknown { background: #e9e2da; color: #9a857a; }

/* ---------- 退社・閉店・クリア ---------- */

.retain-fee {
    margin-top: 10px;
    background: #fff4d6;
    border: 1px dashed #f4c96a;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 15px;
}
.retain-fee b { color: var(--accent-dark); font-size: 18px; }
.dialog.dialog--dark { background: #2b2230; color: #fff; border-color: #5a4560; }
.dialog.dialog--dark h2 { color: #fff; }
.dialog.dialog--dark .dialog__sub { color: #cbbcd4; }
.dialog.dialog--clear { border-color: var(--yellow); background: linear-gradient(180deg, #fffbe6, #fff); }
.clear-tier { font-size: 20px; font-weight: 900; margin-bottom: 6px; }
.clear-msg {
    background: #fff;
    border: 2px solid var(--accent);
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 14px;
    text-align: left;
    margin: 0 0 12px !important;
}
.dialog .info-list { text-align: left; margin-bottom: 10px; }

/* ---------- チュートリアルの入力欄 ---------- */
.tut__input { margin: 6px 0 4px; }
.tut__input input {
    width: 100%;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 12px;
    border: 2px solid var(--accent);
    outline: none;
}

/* --- (旧 @media max-width:768px → 常時適用) --- */
.cast-grid--2 { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; gap: 8px; }
.cast-grid--2 .cast-card { min-width: 0; padding: 10px; }
.cast-grid--2 .cast-card__name { font-size: 14px; }
.cast-grid--2 .cast-card__status { display: none; }
.cast-grid--2 .avatar { width: 44px; height: 44px; font-size: 22px; }
.cast-grid--2 .cast-card__foot { flex-direction: column; gap: 2px; font-size: 11px; }


/* ---------- タブ（スキルの系統など） ---------- */
.tabs { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; padding-bottom: 2px; }
.tab {
    flex: 1;
    min-width: max-content;
    position: relative;
    border: 2px solid var(--line);
    background: #fff;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 900;
    color: var(--muted);
    white-space: nowrap;
}
.tab.is-active { border-color: var(--accent); background: #fff1e6; color: var(--accent-dark); box-shadow: 0 3px 0 #ffc9b3; }
.tab__badge {
    margin-left: 6px;
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--yellow);
    color: #6b4a00;
    font-size: 11px;
}

/* ---------- キャストカード内の累計成績 ---------- */
.cast-card__record {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.cast-card__record .bar { height: 6px; }

.info-list__sep { padding: 0 !important; height: 2px; background: var(--line) !important; border-radius: 0 !important; }
.table-wrap { overflow-x: auto; }

/* --- (旧 @media max-width:768px → 常時適用) --- */
.tabs { gap: 4px; overflow: visible; }
.tab { min-width: 0; padding: 7px 4px; font-size: 12px; }
.tab__badge { margin-left: 3px; min-width: 16px; height: 16px; font-size: 10px; }

/* クリア画面などの文中オーナーアイコン */
.owner-inline {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 4px;
    border: 2px solid var(--accent);
    background: #fff;
    text-align: center;
    line-height: 24px;
}

/* ---------- 解雇ボタン ---------- */
.btn-fire {
    align-self: flex-end;
    border: 1px solid #e2c8c8;
    background: #fff5f5;
    color: #b04a4a;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
}
.btn-fire:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- キャスト/スタッフカード：コンパクト版（バーなし） ---------- */
.stat-line { display: flex; flex-wrap: wrap; gap: 3px 6px; }
.stat-chip { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); }
.stat-chip .rank { width: 20px; height: 20px; font-size: 11px; border-radius: 6px; }
.cast-card { gap: 6px; padding: 10px; }
.cast-card__top { gap: 8px; }
.cast-card .avatar { width: 40px; height: 40px; font-size: 20px; }
.cast-card__name { font-size: 14px; }
.cast-card__meta { font-size: 11px; }
.cast-card__foot { padding-top: 6px; font-size: 11px; flex-direction: row; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.cast-card__record { font-size: 11px; color: var(--muted); }
.cast-grid--2 .cast-card__foot { flex-direction: row; }
.recruit .stat-line { margin: 2px 0; }

/* ---------- ランクアップ ---------- */
.rankup__icon { font-size: 64px; animation: bob 1s ease-in-out infinite; }
.rankup__title { font-size: 24px; font-weight: 900; color: var(--accent-dark); text-shadow: 2px 2px 0 #ffe0d3; margin-bottom: 8px; }

/* 知名度の称号（ヘッダー） */
.stat__title { font-size: 10px; font-weight: 700; color: var(--muted); margin-left: 2px; }
.fame-scale {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff4d6;
    border: 1px dashed #f4c96a;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ---------- お知らせの赤丸（まだ雇える など） ---------- */
.menu__btn { position: relative; }   /* .btn-menu は fixed のまま */
.btn-menu.has-dot::after, .menu__btn.has-dot::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff3b30;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.btn-menu.has-dot::after { top: 6px; right: 6px; }
.menu__btn.has-dot::after { position: static; display: inline-block; margin-left: 6px; vertical-align: top; transform: translateY(-4px); }   /* 文字の右上 */