/* IT起業クロニクル。9スライスの画像は skin.js が --img-* に入れる。 */
:root {
  --px: 2px;
  --bg: #1b1f2e;
  --on-bg: #f4f4f4;
  --text: #f4f4f4;
  --btn-text: #f4f4f4;
  --btn-text-pressed: #f4f4f4;
  --accent: #f1c40f;
  --accent-text: var(--accent);
  --good: #4cd964;
  --bad: #ff5c5c;
  --side-w: 400px;
  font-family: 'DotGothic16', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
  font-size: 15px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--on-bg); overflow: hidden; }
body { -webkit-tap-highlight-color: transparent; }
body[data-era="2010s"] { --accent-text: #23866b; }
/* 明るい画面（1990年代の灰色・2010年代の白）では、緑や赤の文字を暗くして読みやすくする（色覚の設定の色もそのまま暗くなる） */
:root { --good-text: var(--good); --bad-text: var(--bad); }
body[data-era="1990s"], body[data-era="2010s"] { --good-text: color-mix(in srgb, var(--good) 45%, #000); --bad-text: color-mix(in srgb, var(--bad) 75%, #000); }
body[data-era="1980s"] .tabs button.on, body[data-era="1980s"] .seg .btn.on { color: #000; }
img, canvas, .sprite-32, .px { image-rendering: pixelated; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---- 9スライスの部品 ---- */
.window { border: calc(8 * var(--px)) solid transparent; border-image: var(--img-window) 8 fill / calc(8 * var(--px)) stretch; color: var(--text); }
.panel { border: calc(4 * var(--px)) solid transparent; border-image: var(--img-panel) 4 fill / calc(4 * var(--px)) stretch; color: var(--text); }
.sub { border: calc(8 * var(--px)) solid transparent; border-image: var(--img-sub) 8 fill / calc(8 * var(--px)) stretch; }
.card { border: calc(8 * var(--px)) solid transparent; border-image: var(--img-card) 8 fill / calc(8 * var(--px)) stretch; color: var(--text); }
.emprow { border: calc(4 * var(--px)) solid transparent; border-image: var(--img-emprow) 4 fill / calc(4 * var(--px)) stretch; color: var(--text); }

.btn {
  min-height: 36px; padding: 2px 14px; color: var(--btn-text);
  border: calc(4 * var(--px)) solid transparent; border-image: var(--img-btn) 4 fill / calc(4 * var(--px)) stretch;
  background: none; line-height: 1.2; white-space: nowrap;
}
.btn:hover { border-image-source: var(--img-btn-hover); }
.btn:active { border-image-source: var(--img-btn-pressed); color: var(--btn-text-pressed); }
.btn-sub { border-image-source: var(--img-btn-sub); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; border-image-source: var(--img-btn); }
.btn.small { min-height: 30px; padding: 0 10px; font-size: 0.867rem; }

.gauge { position: relative; height: calc(8 * var(--px)); border: calc(3 * var(--px)) solid transparent; border-image: var(--img-gauge) 3 fill / calc(3 * var(--px)) stretch; }
.gauge > i { position: absolute; left: calc(-1 * var(--px)); top: calc(-1 * var(--px)); bottom: calc(-1 * var(--px)); background: var(--img-fill-hp) left / 100% 100%; max-width: calc(100% + 2 * var(--px)); }
.gauge.stress > i { background-image: var(--img-fill-stress); }
.gauge.deadline > i { background-image: var(--img-fill-deadline); }
.gauge.progress > i { background-image: var(--img-progress); }

/* ---- 画面 ---- */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* タイトル：背景は title_scene.js が描く街。縦長は上にロゴ・下にメニュー、横長は右側にまとめる */
#screen-title { background: #120c2a; }
.title-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.title-layout {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(10px, env(safe-area-inset-bottom)); pointer-events: none;
}
.title-layout > * { pointer-events: auto; }
.title-head { grid-row: 1; text-align: center; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
.title-box { grid-row: 3; position: relative; text-align: center; width: min(94vw, 460px); }
.title-layout .copyright { grid-row: 4; margin: 8px 0 0; text-shadow: 0 1px 0 #000; }
@media (min-aspect-ratio: 5/4) {
  .title-layout { grid-template-columns: 1fr minmax(380px, 40%); grid-template-rows: 1fr auto auto 1fr auto; }
  .title-head { grid-column: 2; grid-row: 2; }
  .title-box { grid-column: 2; grid-row: 3; margin-top: 18px; }
  .title-layout .copyright { grid-column: 2; grid-row: 5; }
}
.title-year { margin: 0 0 2px; display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.title-yr { font-size: clamp(22px, 3.4vw, 34px); color: #ffe9a8; letter-spacing: 3px; }
.title-cap { font-size: clamp(12px, 1.5vw, 15px); padding: 2px 10px; background: rgba(10, 8, 30, .6); border: 2px solid rgba(255, 233, 168, .5); }
.logo {
  --o: max(3px, .045em);
  position: relative; margin: 0; font-size: clamp(56px, 8.5vw, 124px); line-height: 1.15; letter-spacing: .04em; color: #ffc93c; white-space: nowrap;
  text-shadow:
    var(--o) 0 0 #3a1a00, calc(-1 * var(--o)) 0 0 #3a1a00, 0 var(--o) 0 #3a1a00, 0 calc(-1 * var(--o)) 0 #3a1a00,
    var(--o) var(--o) 0 #3a1a00, calc(-1 * var(--o)) var(--o) 0 #3a1a00, var(--o) calc(-1 * var(--o)) 0 #3a1a00, calc(-1 * var(--o)) calc(-1 * var(--o)) 0 #3a1a00,
    0 calc(2.6 * var(--o)) 0 #3a1a00, 0 calc(3.6 * var(--o)) 0 rgba(0, 0, 0, .45);
  animation: logo-float 3s ease-in-out infinite;
}
/* 文字の上半分を明るくして、ドット絵の看板のような光沢を出す */
.logo::after { content: attr(data-text); position: absolute; inset: 0; color: #fff1a8; text-shadow: none; clip-path: inset(0 0 56% 0); pointer-events: none; }
@keyframes logo-float { 50% { transform: translateY(-4px); } }
.title-head .logo-sub { display: inline-block; margin: 10px 0 4px; padding: 3px 14px; font-size: clamp(12px, 1.6vw, 16px); color: #3a1a00; background: #ffe08a; box-shadow: 0 3px 0 #b8741a; text-shadow: none; }
.title-head .tagline { margin: 6px 0 0; font-size: clamp(13px, 1.7vw, 17px); }
.menu { display: grid; gap: 10px; padding: 12px; background: rgba(10, 8, 30, .78); border: 3px solid #ffe08a; box-shadow: 0 0 0 3px #3a1a00, 0 6px 0 3px rgba(0, 0, 0, .4); }
.menu-main { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu-main .btn { min-height: 48px; font-size: 1.07rem; }
.menu-sub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.menu-sub .btn { min-height: 34px; font-size: .87rem; }
.menu-sub .btn:last-child { grid-column: 1 / -1; }

#screen-setup { align-items: center; justify-content: center; padding: 10px; overflow-y: auto; overflow-x: hidden; }
.setup { width: min(96vw, 640px); max-height: 100%; overflow: auto; padding: 4px 10px; }
.setup h2 { margin: 4px 0 10px; color: var(--accent-text); }
.field { display: block; margin-bottom: 14px; }
.text-input { display: block; width: 100%; margin-top: 4px; padding: 6px 8px; font: inherit; font-size: max(16px, 1.067rem); color: #111; background: #fff; border: 2px solid #1b1b24; }
.era-cards { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; padding: 2px; }
.era-cards button { flex: 0 0 auto; padding: 0; border: 0; background: none; position: relative; }
.era-cards img { width: 84px; display: block; }
.era-cards button span { position: absolute; left: 6px; right: 6px; bottom: 6px; font-size: 0.8rem; color: #fff; text-shadow: 1px 1px 0 #000; text-align: center; }
.era-cards button.on { outline: 3px solid var(--accent); outline-offset: 1px; }
.hint { font-size: 0.867rem; opacity: .85; margin: 6px 0 0; min-height: 2.6em; }
.ceo-pick { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.ceo-card { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 96px; }
.arrow { width: 40px; height: 56px; background: none; color: var(--on-bg); border: 0; font-size: 1.467rem; }
.portrait { width: 64px; height: 64px; } /* 顔グラ 32×32 の2倍 */
/* キャラの待機2コマ（1コマ16×24）を3倍で表示 */
.sprite-32 { width: 48px; height: 72px; background-repeat: no-repeat; background-size: 96px 72px; animation: idle2 1s steps(2) infinite; }
@keyframes idle2 { to { background-position: -96px 0; } }
.strong { font-weight: bold; color: var(--accent-text); }
.mini-stats { font-size: 0.867rem; line-height: 1.5; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.seg .btn.on { color: var(--accent); border-image-source: var(--img-btn-pressed); }
.row-end { display: flex; justify-content: flex-end; gap: 8px; margin: 6px 0; }

/* ---- ゲーム画面 ---- */
#screen-game { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.hud { display: flex; align-items: center; gap: 6px; padding: 6px 8px; flex-wrap: wrap; color: var(--on-bg); }
.hud-company { font-weight: bold; color: var(--on-bg); margin-right: auto; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-chip { padding: 2px 8px; border: calc(4 * var(--px)) solid transparent; border-image: var(--img-panel) 4 fill / calc(4 * var(--px)) stretch; color: var(--text); font-size: 0.933rem; white-space: nowrap; }
.hud-chip.money.neg { color: var(--bad); }
.speed { display: flex; gap: 2px; }
.speed button { min-width: 36px; height: 32px; padding: 0 4px; font-size: 0.733rem; letter-spacing: -2px; color: var(--btn-text); background: none; border: calc(4 * var(--px)) solid transparent; border-image: var(--img-btn) 4 fill / calc(4 * var(--px)) stretch; }
.speed button.on { border-image-source: var(--img-btn-pressed); color: var(--btn-text-pressed); }

.main { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(200px, 44%) 1fr; }
.stage { position: relative; min-height: 0; min-width: 0; }
#office { width: 100%; height: 100%; display: block; touch-action: none; }
.stage-label { position: absolute; left: 8px; top: 4px; font-size: 0.867rem; padding: 2px 8px; background: rgba(0,0,0,.45); color: #fff; pointer-events: none; }
.stage-tip { position: absolute; right: 8px; bottom: 4px; font-size: 0.733rem; color: #fff; background: rgba(0,0,0,.35); padding: 1px 6px; pointer-events: none; }
.side { min-height: 0; min-width: 0; display: flex; flex-direction: column; margin: 0 4px 4px; }
.tabs { display: flex; gap: 2px; flex: 0 0 auto; }
.tabs button { flex: 1; min-height: 36px; padding: 0 2px; color: var(--btn-text); background: none; border: calc(4 * var(--px)) solid transparent; border-image: var(--img-tab-off) 4 fill / calc(4 * var(--px)) stretch; font-size: 0.933rem; position: relative; }
.tabs button.on { border-image-source: var(--img-tab-on); color: var(--accent-text); }
/* 英語はタブの名前が長いので、縮めても横にはみ出さないようにする */
.tabs button { min-width: 0; white-space: nowrap; }
html[lang="en"] .tabs button { flex: 1 1 auto; font-size: 0.8rem; letter-spacing: -0.03em; padding: 0 1px; }
.tabs .badge { position: absolute; top: -4px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px; font-size: 0.733rem; line-height: 16px; background: var(--bad); color: #fff; border-radius: 8px; letter-spacing: 0; }
.side-body { flex: 1; overflow-y: auto; padding: 8px 2px 4px; -webkit-overflow-scrolling: touch; }

/* 横に広い画面：右にパネル */
@media (min-width: 860px), (orientation: landscape) and (max-height: 560px) {
  .main { grid-template-rows: 1fr; grid-template-columns: 1fr min(var(--side-w), 46vw); }
  .side { margin: 0 4px 4px 0; }
}
@media (max-width: 520px) {
  :root { --px: 1.5px; font-size: 14px; }
  .hud { gap: 4px; padding: 4px 6px; }
  .hud::after { content: ''; flex-basis: 100%; order: 2; }
  .hud-company { order: 0; flex: 1 1 0; min-width: 0; max-width: none; font-size: 0.867rem; }
  .speed { order: 1; }
  .speed { gap: 1px; }
  .speed button { min-width: 30px; height: 28px; padding: 0 2px; }
  /* 日付・お金／評判・人件費 を2つずつ2行に（1行に4つは入らない） */
  .hud-chip { order: 3; flex: 1 1 calc(50% - 4px); text-align: center; font-size: 0.8rem; padding: 0 2px; }
  .stage-tip { display: none; }
}

/* ---- パネルの中身 ---- */
.sec-title { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin: 4px 2px 6px; color: var(--accent-text); font-size: 0.933rem; }
.sec-title small { color: var(--text); opacity: .8; }
.list { display: grid; gap: 6px; margin-bottom: 12px; }
.item { padding: 2px 4px; }
.item-head { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.item-name { font-weight: bold; }
.muted { opacity: .75; font-size: 0.867rem; }
.need { display: grid; grid-template-columns: 4.5em 1fr 5.5em; align-items: center; gap: 6px; font-size: 0.8rem; margin-top: 3px; }
.need .num { text-align: right; }
.item-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.867rem; }
.good { color: var(--good-text); }
.bad { color: var(--bad-text); }
.acc { color: var(--accent-text); }
.empty { opacity: .7; font-size: 0.867rem; padding: 8px 4px; }

.emp { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center; cursor: pointer; }
.emp > img { width: 52px; height: 52px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; font-size: 0.8rem; }
.stat-bar { height: 5px; background: rgba(127,127,127,.3); margin-top: 2px; }
.stat-bar i { display: block; height: 100%; background: var(--img-stat-0) 0 0 / 4px 4px; }
.stat-bar.k1 i { background-image: var(--img-stat-1); }
.stat-bar.k2 i { background-image: var(--img-stat-2); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.cand { text-align: center; }
.cand > img { width: 64px; height: 64px; }
.cand .stats { text-align: left; margin: 6px 0; grid-template-columns: 1fr; }

.ext { display: flex; gap: 10px; align-items: flex-end; }
.ext img { height: 120px; max-width: 45%; object-fit: contain; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 0.867rem; }
.kv dt { opacity: .8; }
.kv dd { margin: 0; text-align: right; }
/* 描くたびに canvas.width を表示幅×密度にするので、枠より広がらないよう max-width で押さえる */
.chart { width: 100%; max-width: 100%; height: 110px; display: block; }
.log li { font-size: 0.867rem; padding: 3px 0; border-bottom: 1px dashed rgba(127,127,127,.35); list-style: none; }
.log { padding: 0; margin: 0; }

/* ---- モーダル・通知 ---- */
#modal-root .backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 12px; z-index: 50; animation: fade .15s; }
/* スマホのブラウザは 100vh がツールバーの裏まで含むので、見えている範囲（背景の内側）に収める */
.modal { width: min(94vw, 460px); max-height: 92vh; max-height: min(92dvh, 100%); overflow: auto; padding: 2px 8px; border: calc(8 * var(--px)) solid transparent; border-image: var(--img-modal) 8 fill / calc(8 * var(--px)) stretch; color: var(--text); }
.modal.warn { border-image-source: var(--img-warn); }
.modal h3 { margin: 4px 0 8px; color: var(--accent-text); }
.modal p { line-height: 1.6; margin: 6px 0; }
.modal .btns { display: grid; gap: 6px; margin: 10px 0 4px; }
.modal .btns.row { grid-auto-flow: column; justify-content: end; }
/* 選ぶものが多いとき（勉強会のスキルなど）は、小さなボタンを何列かに並べる */
.modal .btns.grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.modal .btns.grid .btn { padding: 6px 4px; font-size: 0.867rem; }
/* 時代の変わり目のメールに添える時代のカード */
.mail-pic { text-align: center; margin: 6px 0; }
.mail-pic img { width: 112px; }
.news-art { width: 100%; aspect-ratio: 192 / 108; background-repeat: no-repeat; background-size: 400% 100%; image-rendering: pixelated; animation: news4 1s steps(3) infinite alternate; border: 2px solid #1b1b24; }
@keyframes news4 { from { background-position: 0 0; } to { background-position: 100% 0; } }
.year-tag { display: inline-block; padding: 0 6px; margin-right: 6px; background: var(--accent); color: #fff; font-size: 0.867rem; }
body[data-era="standard"] .year-tag, body[data-era="1980s"] .year-tag, body[data-era="2010s"] .year-tag { color: #111; }
.era-big { text-align: center; font-size: 2.267rem; color: var(--accent); margin: 10px 0; }
.choice small { display: block; font-size: 0.8rem; opacity: .85; }
.choice { white-space: normal; text-align: left; min-height: 44px; }

#toasts { position: fixed; left: 50%; top: 56px; transform: translateX(-50%); display: grid; gap: 6px; z-index: 60; width: min(92vw, 380px); pointer-events: none; }
.toast { padding: 4px 8px; font-size: 0.933rem; border: calc(5 * var(--px)) solid transparent; border-image: var(--img-toast) 5 fill / calc(5 * var(--px)) stretch; color: var(--text); animation: toast 3.2s forwards; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-8px); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

/* ---- 経営タブ ---- */
.dots { color: var(--accent-text); letter-spacing: 1px; font-size: 0.8rem; }
.ranking { display: grid; gap: 4px; }
.rank-row { display: grid; grid-template-columns: 1.6em 1fr auto auto; gap: 6px; align-items: center; font-size: 0.867rem; min-height: 30px; }
.rank-row.me { color: var(--accent-text); font-weight: bold; }
.rank-no { text-align: center; }
.rank-val { text-align: right; font-variant-numeric: tabular-nums; }
.seg .btn small { font-size: 0.733rem; opacity: .85; }
.seg .btn { line-height: 1.25; padding-top: 2px; padding-bottom: 2px; }

/* ---- 音・設定 ---- */
.sound-btn { min-width: 32px; height: 32px; padding: 0 4px; color: var(--btn-text); background: none; border: calc(4 * var(--px)) solid transparent; border-image: var(--img-btn) 4 fill / calc(4 * var(--px)) stretch; }
.sound-btn.off { opacity: .45; }
.sound-btn.se { opacity: .75; }
.field.check { display: flex; align-items: center; gap: 8px; }
.field.check input { width: 18px; height: 18px; accent-color: var(--accent); }
@media (max-width: 520px) {
  .sound-btn { order: 1; height: 28px; min-width: 30px; }
  .tabs button { font-size: 0.867rem; }
}

/* ---- チュートリアル ---- */
.tut { position: fixed; inset: 0; z-index: 80; }
.tut-hole { position: absolute; border-radius: 4px; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .62); outline: 2px dashed var(--accent); transition: all .25s; pointer-events: none; }
.tut-hand { position: absolute; width: 48px; height: auto; transform: translate(-4px, 0); animation: tut-hand .8s ease-in-out infinite alternate; pointer-events: none; }
@keyframes tut-hand { to { transform: translate(4px, 8px); } }
.tut-tip { position: absolute; left: 50%; transform: translateX(-50%); width: min(92vw, 420px); transition: top .25s; }
.tut-text { margin: 4px 0 8px; line-height: 1.6; }
.tut-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 0.867rem; }

/* ---- 共通の小物 ---- */
.subtabs { margin-bottom: 8px; }
.trait { display: inline-block; padding: 0 5px; margin-right: 4px; font-size: 0.733rem; line-height: 16px; border: 1px solid var(--accent-text); color: var(--accent-text); border-radius: 3px; }
.lv { font-size: 0.733rem; color: var(--accent-text); }
.tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 2px 0; font-size: 0.8rem; }
.face { width: 30px; height: 30px; cursor: pointer; image-rendering: pixelated; border: 1px solid rgba(127,127,127,.5); background: rgba(0,0,0,.08); }
.face.resting { opacity: .45; }
.faces { display: flex; flex-wrap: wrap; gap: 2px; }
.faces-more { align-self: center; padding: 0 6px; font-size: 0.8rem; opacity: .8; white-space: nowrap; }
/* ✉・⚙ はドット文字のフォントにない記号で、ほかのフォントの基準線のせいで下に寄るので、ボタンの中で上下中央にそろえる */
.icon-btn { font-size: 1.067rem; position: relative; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.icon-btn .badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; font-size: 0.733rem; line-height: 16px; background: var(--bad); color: #fff; border-radius: 8px; }
.chart.tall { height: 160px; }
.legend { font-size: 0.8rem; display: flex; gap: 6px; align-items: center; margin: 4px 0 8px; }
.lg-line { width: 16px; height: 3px; background: var(--accent); display: inline-block; }
.lg-bar { width: 10px; height: 10px; background: var(--text); opacity: .35; display: inline-block; }

/* ---- 組織図・担当 ---- */
.org-top { display: flex; gap: 8px; align-items: center; justify-content: center; }
.org-top .face { width: 44px; height: 44px; }
.org-line { width: 2px; height: 12px; margin: 2px auto; background: var(--text); opacity: .5; }
.org-tree { display: grid; gap: 8px; }
.org-group { padding: 4px 6px; border: calc(7 * var(--px)) solid transparent; border-image: var(--img-org) 7 fill / calc(7 * var(--px)) stretch; color: var(--text); }
.org-title { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-weight: bold; font-size: 0.867rem; margin-bottom: 4px; }
.org-members { display: flex; flex-wrap: wrap; gap: 3px; min-height: 30px; align-items: center; }
/* 上におすすめ・絞り込みのボタンがあるので、決定ボタンまで画面に収まる高さにする */
.assign-list { display: grid; gap: 4px; max-height: 40vh; overflow-y: auto; }
/* 担当選び：題・絞り込み・決定ボタンは常に見せ、人の一覧だけを残りの高さでスクロールする */
.modal:has(.assign-list) { display: flex; flex-direction: column; }
.modal:has(.assign-list) > * { flex: none; }
.modal:has(.assign-list) .assign-list { flex: 1 1 auto; min-height: 96px; max-height: none; }
.assign-row { display: grid; grid-template-columns: 22px 40px 1fr; gap: 6px; align-items: center; padding: 3px; border-bottom: 1px dashed rgba(127,127,127,.35); cursor: pointer; }
.assign-row img { width: 40px; height: 40px; image-rendering: pixelated; }
.assign-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.assign-row.off { opacity: .5; }
/* スキル（言語・デザインの分野）のバッジ。案件に合うものは強調、社内にできる人がいないものは警告色 */
.skills { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; font-size: 0.8rem; margin: 2px 0; }
.skill { display: inline-block; padding: 0 5px; border: 1px solid rgba(127,127,127,.6); border-radius: 3px; font-size: 0.733rem; line-height: 1.5; white-space: nowrap; }
.skill.match { border-color: var(--good-text); color: var(--good-text); font-weight: bold; }
.skill.missing { border-color: var(--bad-text); color: var(--bad-text); }
.assign-row .star { color: var(--accent-text); margin-right: 2px; }
.assign-tools { display: grid; gap: 4px; margin-bottom: 6px; }
.assign-tools .seg { margin-top: 0; gap: 4px; }
.assign-count { font-size: 0.8rem; }
/* 節目の行事（ceremony.js）：素材の画素の座標で重ね、--s 倍に拡大する */
.cer-stage { position: relative; width: calc(var(--sw) * var(--s) * 1px); height: calc(var(--sh) * var(--s) * 1px); margin: 0 auto 8px; image-rendering: pixelated; }
.cer-l { position: absolute; left: calc(var(--x) * var(--s) * 1px); top: calc(var(--y) * var(--s) * 1px); width: calc(var(--w) * var(--s) * 1px); height: calc(var(--h) * var(--s) * 1px); margin: 0; }
.cer-t { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: calc(var(--fs) * var(--s) * 1px); line-height: 1.25; overflow: hidden; }
.cer-t.left { align-items: flex-start; text-align: left; }
.cer-t.light { color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, .5); }
.cer-t.dark { color: #1b1b24; }
.cer-t .muted { color: inherit; opacity: .75; }
.cer-anim { background-repeat: no-repeat; background-size: calc(var(--frames) * 100%) 100%; image-rendering: pixelated; animation: storyAnim var(--dur) steps(var(--frames)) infinite; }
.cer-anim.once { animation: storyAnimOnce var(--dur) steps(var(--frames), jump-none) 1 forwards; }
.cer-btn { background: none; border: 0; padding: 0; color: #1b1b24; font-family: inherit; font-weight: bold; cursor: pointer; }
.cer-btn.light { color: #fff; text-shadow: 1px 1px 0 #1b1b24; }
.cer-btn:focus-visible { outline: 2px solid var(--accent); }
/* 優秀な応募者のお知らせ */
.cand .star { color: var(--accent-text); margin-right: 2px; }
/* 年齢の札（区分の色の板に数字）と、伸び方・採用の区分のアイコン（age/ui/） */
.age-row { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.age-badge { display: inline-block; width: 44px; height: 20px; background-size: 100% 100%; image-rendering: pixelated; text-align: center; font-size: 0.8rem; line-height: 20px; color: #1b1b24; font-weight: bold; }
.age-row .age-icon { width: auto; height: 18px; image-rendering: pixelated; }
.star-hire { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.star-hire > img { width: 64px; height: 64px; flex: none; border: 2px solid #1b1b24; background: rgba(0, 0, 0, 0.2); }

/* ---- 受信箱 ---- */
.mail-tabs { margin-bottom: 6px; }
.mail-list { display: grid; gap: 2px; max-height: 55vh; overflow-y: auto; }
.mail-row { display: grid; grid-template-columns: 18px minmax(4em, 7em) 1fr auto; gap: 6px; align-items: center; text-align: left; padding: 6px 4px; background: none; border: 0; border-bottom: 1px dashed rgba(127,127,127,.35); color: inherit; font-size: 0.867rem; }
.mail-row img { width: 16px; image-rendering: pixelated; }
.mail-row.unread { font-weight: bold; }
.mail-from, .mail-subj { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mail-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.portrait-frame { width: 56px; height: 56px; image-rendering: pixelated; border: 2px solid rgba(127,127,127,.6); }
.mail-body { line-height: 1.7; font-size: 0.933rem; }

/* ---- 設定・セーブ枠・実績・地図 ---- */
.settings { display: grid; gap: 12px; }
.settings label { display: grid; gap: 4px; }
.settings input[type=range] { width: 100%; accent-color: var(--accent); }
.color-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
.color-modes .btn { display: flex; align-items: center; gap: 6px; white-space: normal; text-align: left; }
.color-modes img { width: 24px; image-rendering: pixelated; }
.slot-list { display: grid; gap: 6px; margin-bottom: 4px; }
.slot-row { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; padding: 6px; border: 1px solid rgba(127,127,127,.5); }
.slot-row.empty { opacity: .6; }
.slot-no { font-size: 1.333rem; text-align: center; color: var(--accent-text); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.ach { display: grid; grid-template-columns: 32px 1fr; gap: 6px; align-items: center; padding: 4px; font-size: 0.867rem; opacity: .55; border: 1px dashed rgba(127,127,127,.4); }
.ach.on { opacity: 1; border-style: solid; }
.ach img { width: 32px; image-rendering: pixelated; }
.map-wrap { text-align: center; }
.map-canvas { max-width: 100%; height: auto; image-rendering: pixelated; border: 2px solid #1b1b24; }
.section-wrap .map-canvas { max-height: 60vh; width: auto; }
@media (max-width: 520px) {
  .icon-btn { order: 1; height: 28px; min-width: 28px; font-size: 0.867rem; padding: 0 2px; }
  .sound-btn { min-width: 28px; padding: 0 2px; }
  .mail-row { grid-template-columns: 18px 1fr auto; }
  .mail-from { display: none; }
}

/* ---- フロア切り替え ---- */
/* フロアが多い（執務フロアが何階もある）ときは折り返さず、横にスクロールする */
.floor-tabs { position: absolute; left: 8px; top: 30px; display: flex; flex-wrap: nowrap; gap: 2px; max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.floor-tabs::-webkit-scrollbar { display: none; }
.floor-tabs button { flex: 0 0 auto; font: inherit; font-size: 0.8rem; padding: 1px 7px; color: #fff; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.35); }
/* 執務フロアが多いときの ◀ 執務 n/N ▶ */
.floor-stepper { display: flex; flex: 0 0 auto; }
.floor-stepper .step { padding: 1px 5px; }
.floor-tabs button.on { background: var(--accent); color: #111; border-color: var(--accent); }
body[data-era="1990s"] .floor-tabs button.on { color: #fff; }

/* ---- フォーカス（キーボード・ゲームパッド） ---- */
button:focus-visible, [data-action]:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.controls { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-top: 6px; }
.controls td { padding: 3px 4px; border-bottom: 1px dashed rgba(127,127,127,.35); vertical-align: middle; }
.controls img { height: 16px; margin-right: 2px; image-rendering: pixelated; vertical-align: middle; }
.controls kbd { display: inline-block; min-width: 16px; padding: 0 3px; margin-right: 2px; border: 1px solid currentColor; font: inherit; text-align: center; }
.settings details summary { cursor: pointer; }
#hud-date { font: inherit; font-size: 0.933rem; cursor: pointer; -webkit-appearance: none; appearance: none; background: none; }

/* ---- 名前入力 ---- */
.name-row { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.name-row .text-input { margin-top: 0; flex: 1; }
.skb-field { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 8px; margin-bottom: 6px; background: #fff; color: #111; border: 2px solid #1b1b24; min-height: 36px; font-size: 1.2rem; }
.skb-keys { display: grid; gap: 3px; margin: 6px 0; }
.skb-row { display: flex; gap: 3px; flex-wrap: wrap; }
.skb-key { min-width: 32px; height: 32px; padding: 0 4px; font: inherit; color: var(--btn-text); background: none; border: calc(3 * var(--px)) solid transparent; border-image: var(--img-key) 3 fill / calc(3 * var(--px)) stretch; }
.skb-key:active { border-image-source: var(--img-key-pressed); }
.skb-key:hover, .skb-key:focus-visible { border-image-source: var(--img-key-hover); }
.skb-key.wide { min-width: 52px; }
.skb-gap { width: 32px; }
.skb-special { display: flex; gap: 3px; flex-wrap: wrap; }

/* ---- カレンダー ---- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-head { text-align: center; font-size: 0.8rem; }
.cal-head.holiday { color: var(--bad); }
.cal-cell { position: relative; aspect-ratio: 20 / 16; background-size: 100% 100%; image-rendering: pixelated; font-size: 0.8rem; color: var(--text); padding: 1px 3px; }
.cal-cell.other { background: none; }
.cal-cell .dots { position: absolute; left: 3px; bottom: 3px; display: flex; gap: 2px; }
.cal-cell .dot { width: 6px; height: 6px; }
.cal-list { padding: 0; margin: 8px 0; list-style: none; font-size: 0.867rem; display: grid; gap: 3px; }
.cal-list img, .modal p img.px { width: 8px; height: 8px; image-rendering: pixelated; }

/* ---- できごと・エンディング・スタッフロール ---- */
.happening-faces { display: flex; gap: 6px; justify-content: center; margin: 4px 0 8px; }
.happening-faces img { width: 64px; height: 64px; image-rendering: pixelated; border: 2px solid rgba(127,127,127,.6); }
.ending-art { display: flex; justify-content: center; align-items: flex-end; height: 200px; background-size: cover; background-position: center; image-rendering: pixelated; border: 2px solid #1b1b24; background-color: #11111a; }
.ending-art img { max-height: 190px; max-width: 90%; image-rendering: pixelated; }
.credits { position: relative; height: 50vh; overflow: hidden; background: #000; color: #fff; text-align: center; }
.credits-fade { position: absolute; left: 0; right: 0; top: 0; height: 24px; background-size: 100% 100%; z-index: 1; image-rendering: pixelated; }
.credits-roll { position: absolute; left: 0; right: 0; top: 100%; animation: credits linear forwards; }
@keyframes credits { to { transform: translateY(-100%); top: 0; } }
.credit { margin: 0 0 22px; line-height: 1.7; }
.credit-role { color: #f1c40f; font-size: 0.8rem; }

/* ---- 起動ロゴ・押してはじめる ---- */
/* 起動時のロゴ（北海道のWEB屋）。背景はロゴ画像の地の色に合わせる */
.splash { position: fixed; inset: 0; z-index: 200; background: #f4f7fa; display: flex; align-items: center; justify-content: center; transition: opacity .4s; }
.splash.out { opacity: 0; }
.splash-mark { width: min(72vw, 480px); height: auto; image-rendering: auto; animation: splash-in .8s ease-out both; }
@keyframes splash-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.press-start { display: none; margin: 10px auto; padding: 10px 0; width: 100%; background-size: 200% 100%; image-rendering: pixelated; animation: blink2 1s steps(1) infinite; color: #fff; font-size: 1.07rem; text-shadow: 0 2px 0 #000; }
@keyframes blink2 { 0% { background-position: 0 0; } 50% { background-position: 100% 0; } }
.title-box.waiting .press-start { display: block; }
.title-box.waiting .menu { display: none; }

/* ---- 年代切り替えの演出 ---- */
.era-fx { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; pointer-events: none; transition: opacity .5s; }
.era-fx.out { opacity: 0; }
.era-fx .dither { position: absolute; inset: 0; background: #000; animation: darken .5s forwards; }
@keyframes darken { from { opacity: 0; } to { opacity: .9; } }
.era-fx .flip { position: relative; width: 128px; height: 128px; background-size: 512px 128px; image-rendering: pixelated; animation: flip4 .7s steps(3) .4s forwards; }
@keyframes flip4 { to { background-position: -384px 0; } }
.era-fx .band { position: relative; display: flex; height: 60px; opacity: 0; }
.band span { display: block; height: 60px; background-size: 100% 100%; image-rendering: pixelated; }
.band-l, .band-r { width: 36px; }
.band-c { background-repeat: repeat-x; padding: 0 24px; font-size: 1.8rem; line-height: 60px; color: #fff; text-shadow: 2px 2px 0 #000; white-space: nowrap; }
.era-fx .band { animation: band-in .4s 1.1s forwards; }
@keyframes band-in { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: none; } }

/* ---- 報酬の光 ---- */
.reward-fx { position: fixed; left: 50%; top: 38%; z-index: 120; width: 280px; height: 200px; transform: translate(-50%, -50%); pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .5s; animation: fade .3s; }
.reward-fx.out { opacity: 0; }
.reward-fx .rays { position: absolute; inset: 0; background-size: 400% 100%; background-repeat: no-repeat; image-rendering: pixelated; animation: rays 0.6s steps(3) infinite alternate; opacity: .9; }
@keyframes rays { to { background-position: 100% 0; } }
.reward-fx .trophy { position: relative; width: 64px; height: 64px; image-rendering: pixelated; animation: pop .4s; }
@keyframes pop { from { transform: scale(.2); } 70% { transform: scale(1.2); } }
.reward-label { position: relative; margin-top: 8px; padding: 2px 10px; background: rgba(0,0,0,.7); color: #f1c40f; font-size: 1rem; border-radius: 3px; }

/* ---- 持ち物の欄・売店 ---- */
.quickslots { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 3px; padding: 3px; background: rgba(0,0,0,.45); border-radius: 4px; max-width: calc(100% - 16px); overflow-x: auto; }
.quickslots .slot { position: relative; width: 40px; height: 40px; padding: 0; border: 0; background: var(--img-slot) center / 100% 100% no-repeat; image-rendering: pixelated; color: #fff; font: inherit; font-size: 0.7rem; flex: 0 0 auto; }
.quickslots .slot img { width: 28px; height: 28px; margin-top: 4px; }
.quickslots .slot-n { position: absolute; right: 2px; bottom: 0; font-size: 0.7rem; text-shadow: 1px 1px 0 #000; }
.quickslots .shop-open { width: 48px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.4); }
.item-icon { width: 32px; height: 32px; image-rendering: pixelated; }
.shop-list { display: grid; gap: 6px; max-height: 60vh; overflow-y: auto; }
.shop-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; padding: 4px; border-bottom: 1px dashed rgba(127,127,127,.35); font-size: 0.867rem; }
.shop-buy { display: grid; gap: 3px; justify-items: end; }
.stock-chart { display: flex; align-items: flex-end; gap: 1px; height: 60px; margin: 6px 0; }
.stock-chart i { flex: 1; background: var(--accent); opacity: .8; }

/* ---- 遊び方・お知らせ・設定 ---- */
.help-art { display: flex; justify-content: center; align-items: center; height: 140px; background: rgba(0,0,0,.2); border: 2px solid rgba(127,127,127,.5); }
.help-art img { max-height: 128px; max-width: 80%; image-rendering: pixelated; min-width: 64px; }
.help-title { margin: 8px 0 4px; color: var(--accent-text); }
.help-dots { display: flex; gap: 4px; justify-content: center; }
.help-dots img { width: 8px; height: 8px; }
.notice-list { display: grid; gap: 3px; }
.notice-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; align-items: center; padding: 4px 6px; font-size: 0.8rem; border: calc(4 * var(--px)) solid transparent; border-image: var(--img-notify) 4 fill / calc(4 * var(--px)) stretch; }
.notice-row .emo { width: 16px; height: 16px; background-size: 200% 100%; image-rendering: pixelated; }
.check-row { display: flex !important; grid-template-columns: none; align-items: center; gap: 8px; }
.check-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.copyright { margin: 10px 0 0; font-size: 0.733rem; opacity: .7; }
.logo-sub { margin: 0 0 6px; font-size: 0.867rem; color: var(--accent-text); opacity: .9; }

/* 引き継ぎ（データ移行）の画面 */
.transfer h3 { font-size: 0.933rem; margin: 10px 0 4px; }
.transfer textarea { width: 100%; box-sizing: border-box; font: 12px/1.3 monospace; word-break: break-all; resize: vertical; }
.transfer .transfer-code { color: var(--text); background: rgba(0,0,0,.08); }

/* ---- 札幌の物語 ---- */
.setup.story .free-only { display: none; }
.setup:not(.story) .story-only { display: none; }
.story-anim { width: 100%; background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated; border: 2px solid #1b1b24; animation: storyAnim var(--dur, 1s) steps(var(--steps, 4)) infinite; margin-bottom: 8px; }
@keyframes storyAnim { from { background-position: 0 0; } to { background-position: var(--to, 0%) 0; } }
/* 1回だけ流して最後のコマで止める（steps の jump-none で最初と最後のコマも1コマ分ずつ見せる） */
.story-anim.once { animation: storyAnimOnce var(--dur, 2s) steps(var(--steps, 3), jump-none) 1 forwards; }
@keyframes storyAnimOnce { from { background-position: 0 0; } to { background-position: 100% 0; } }
.story-talk { display: flex; gap: 10px; align-items: flex-start; }
.story-face { width: 64px; height: 64px; flex: none; image-rendering: pixelated; border: 2px solid #1b1b24; background: rgba(0, 0, 0, 0.25); }
.story-name-input { width: 100%; box-sizing: border-box; padding: 6px 8px; font: inherit; font-size: 16px; }
.story-line { flex: 1; min-width: 0; }
.story-line p { margin: 4px 0 0; line-height: 1.6; }
.story-name { color: var(--accent); }
.story-caption { text-align: center; margin: 4px 0 0; }
.story-card { position: relative; width: 100%; background-size: 100% 100%; image-rendering: pixelated; }
.story-card-scene { position: absolute; background-size: 400% 100%; image-rendering: pixelated; animation: storyAnim 1s steps(4) infinite; --to: 133.333%; }
.story-card-title, .story-card-sub { position: absolute; display: flex; align-items: center; justify-content: center; color: #fff; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; white-space: nowrap; }
.story-card-title { font-size: clamp(0.95rem, 4.2vw, 1.3rem); font-weight: bold; }
.story-card-sub { font-size: clamp(0.7rem, 3vw, 0.9rem); }
.modal:has(.story-map) { width: min(96vw, 860px); }
.story-map { width: 100%; max-height: 58vh; overflow: auto; border: 2px solid #1b1b24; background: #1b1b24; -webkit-overflow-scrolling: touch; }
.story-map-inner { position: relative; width: max(100%, 900px); }
.story-map-inner img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.story-map-inner svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-map polygon.lot { fill: transparent; stroke-width: 3; }
.story-map polygon.vacant { stroke: #6ee26e; fill: rgba(110, 226, 110, 0.18); cursor: pointer; }
.story-map polygon.vacant:hover, .story-map polygon.on { fill: rgba(255, 215, 0, 0.45); stroke: #ffd700; }
.story-map polygon.taken { stroke: rgba(255, 255, 255, 0.25); pointer-events: none; }
.story-map text { font-size: 22px; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: 4px; pointer-events: none; font-weight: bold; }
.story-map text.taken { font-size: 16px; fill: #ddd; }
.story-district { position: absolute; transform: translate(-50%, -50%); padding: 4px 8px; border: 2px solid #000; background: var(--c); color: #fff; font-weight: bold; text-shadow: 1px 1px 0 #000; cursor: pointer; white-space: nowrap; font: inherit; }
.story-district.on { outline: 3px solid #ffd700; }
.story-pick-info { min-height: 3.2em; margin: 6px 0 0; }
.story-req { margin: 4px 0; padding-left: 0; list-style: none; }
.story-req li { margin: 2px 0; }
.story-icon { width: 24px; height: 24px; image-rendering: pixelated; margin-right: 6px; vertical-align: middle; }
.story-costs summary { cursor: pointer; margin-top: 6px; }

/* 札幌の物語：支社の一覧（世界地図のピンと、現地社員の顔ぶれ） */
.btn.wide { width: 100%; margin: 4px 0 8px; }
.branch-map { position: relative; margin: 0 0 10px; }
.branch-world { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.branch-pin { position: absolute; width: 8.4%; height: auto; max-width: none; transform: translate(-50%, -100%); image-rendering: pixelated; }
.branch-row .item-head .acc { margin-left: auto; }
.branch-faces { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px; margin-top: 4px; }
.branch-face { display: inline-block; background-repeat: no-repeat; image-rendering: pixelated; }
.branch-more { margin-left: 4px; font-size: 12px; opacity: 0.8; }

/* 札幌の物語：序章のミニゲーム（320×180 のキャンバスを整数倍で拡大） */
.mg { z-index: 60; }
.mg-box { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100vw; }
.mg-title { color: #fff; font-size: 16px; }
.mg-canvas { image-rendering: pixelated; cursor: none; touch-action: none; border: 2px solid #2a1a10; }
.mg-bar { width: min(100%, 960px); background: rgba(16, 20, 40, 0.92); color: #fff; padding: 6px 10px; border-radius: 4px; }
.mg-step { font-size: 15px; }
.mg-msg { min-height: 1.4em; font-size: 13px; opacity: 0.9; }
.mg-msg.bad { color: #ff9a8a; }
.mg-msg.good { color: #9dffb0; }
.mg-btns { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* 社内勉強会の問題 */
.quiz-q { font-weight: bold; line-height: 1.6; }
.quiz-answer { margin-top: 8px; }
.quiz-explain { line-height: 1.6; opacity: 0.9; }
.quiz-code { margin: 6px 0; padding: 8px 10px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.867rem; line-height: 1.5; white-space: pre; overflow-x: auto; text-align: left; }
.quiz-hint { min-height: 0; margin: -6px 0 10px 26px; }
.study-fields { display: grid; gap: 4px; margin: 8px 0 12px; }
.study-row { display: grid; grid-template-columns: 9em 1fr 3.5em; align-items: center; gap: 8px; font-size: 0.867rem; }
.study-q { margin: 4px 0; padding: 4px 6px; border: 1px solid rgba(255, 255, 255, 0.12); }
.study-q summary { cursor: pointer; font-size: 0.867rem; }

/* 体験版の印（タイトル画面） */
.demo-badge { display: inline-block; margin: 6px auto 0; padding: 2px 12px; border: 2px solid var(--accent); color: var(--accent); font-weight: bold; letter-spacing: 0.2em; }
#story-intro { margin-bottom: 10px; }

/* ドットの演出（pixfx.js） */
.pfx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
.pfx-screen { position: fixed; z-index: 130; }
.pfx-ach { position: fixed; left: 0; top: 0; z-index: 131; pointer-events: none; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--px) * 1px); white-space: nowrap; overflow: hidden; }
.pfx-ach b { color: #ffde5e; font-size: calc(var(--px) * 5px); line-height: 1.1; text-shadow: 0 1px 0 #2a1405; }
.pfx-ach span { color: #fff; font-size: calc(var(--px) * 7px); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #0d0a14; }
.floor-tabs button.auto { margin-right: 4px; }
.floor-tabs button.auto::before { content: '⟳ '; }
.train-list { display: grid; gap: 4px; margin: 6px 0; max-height: 46vh; overflow-y: auto; }
.train-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border: 1px solid rgba(0,0,0,.15); background: rgba(255,255,255,.35); cursor: pointer; line-height: 1.3; }
.train-row img { width: 32px; height: 32px; flex: none; }
.train-row input { width: 18px; height: 18px; flex: none; }

/* 社員一覧の探す欄（staff_finder.js） */
.staff-finder { display: grid; gap: 4px; margin: 6px 0; }
.staff-q { width: 100%; font: inherit; padding: 4px 8px; border: 2px solid #1b1b24; background: #fff; color: #1b1b24; box-sizing: border-box; }
.staff-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.staff-tools { display: flex; gap: 4px; align-items: center; }
.staff-tools select { flex: 1; font: inherit; padding: 2px 4px; min-width: 0; }
.staff-count { margin: 2px 0 4px; }
.staff-more { width: 100%; margin-bottom: 10px; }
.emp-compact { grid-template-columns: 32px 1fr; gap: 6px; padding: 1px 0; }
.emp-compact > img { width: 32px; height: 32px; }
.emp-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; line-height: 1.3; min-width: 0; }
.emp-line .emp-where { font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14em; }
.emp-line .skills { flex-basis: 100%; }