[hidden] { display: none !important; }
/* 言語: <html lang> と違うほうの文言を伏せる（src/lang.js が描く前に決める） */
html[lang="ja"] [lang="en"], html[lang="en"] [lang="ja"] { display: none !important; }
:root {
  --bg: #102624;
  --panel: rgba(14, 34, 33, 0.86);
  --line: rgba(255, 255, 255, 0.14);
  --text: #eef5f3;
  --sub: #9fb9b4;
  --mint: #5fd0b4;
  --red: #ff5a5f;
  --gold: #f2c14e;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; }
.neg { color: var(--red); }

#site-header { display: flex; align-items: center; gap: 12px; max-width: 1200px; margin: 0 auto; padding: 12px 16px; }
#site-header .apps-link { color: var(--sub); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; min-height: 40px; white-space: nowrap; }
#site-header .name { font-weight: 800; font-size: 18px; margin: 0; }
/* 名前を押すと読み直して、はじめの画面に戻る（ほかのアプリと同じ） */
#site-header .name a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; }
.header-sub { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--sub); }
.langsw { margin-left: auto; display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; }
.langsw button { font-size: 12px; padding: 0 12px; min-height: 44px; min-width: 44px; border: 0; background: none; color: var(--sub); }
.langsw button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.12); color: var(--text); font-weight: 800; }

#app { padding: 0 16px; }
#stage { position: relative; max-width: 1200px; margin: 0 auto; aspect-ratio: 16 / 10; max-height: 76svh; width: 100%; border-radius: 12px; overflow: hidden; background: #17312e; user-select: none; -webkit-user-select: none; }
#view { display: block; width: 100%; height: calc(100% - 64px); touch-action: none; }
#view.playing { cursor: none; }

/* ── 遊んでいる間の板 ── */
#hud > * { position: absolute; }
#hud button, #mute { background: rgba(255, 255, 255, 0.1); border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; min-height: 40px; font-size: 14px; white-space: nowrap; }
#hud button:hover { background: rgba(255, 255, 255, 0.18); }
#hud button.ghost { background: transparent; border-color: transparent; color: var(--sub); }
#hud button.ghost:hover { color: var(--text); background: rgba(255, 255, 255, 0.1); }
.key { font-size: 11px; color: var(--sub); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; margin-left: 8px; }

#topbar { left: 10px; right: 10px; top: 10px; display: flex; align-items: center; gap: 16px; padding: 5px 8px 5px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(6px); }
.stat { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.stat .lb { font-size: 12px; color: var(--sub); }
.stat b { font-size: 22px; font-weight: 800; min-width: 2.6em; }
.clock { padding-left: 16px; border-left: 1px solid var(--line); }
.clock.low b { color: #ffb36b; }
.who { flex: 1; display: flex; align-items: baseline; gap: 10px; min-width: 0; padding-left: 16px; border-left: 1px solid var(--line); }
#who { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nth, #age { font-size: 12px; color: var(--sub); white-space: nowrap; }
#age { margin-left: -6px; font-size: 14px; color: var(--text); }

/* 似顔絵と台詞（右上）。予兆はこの顔で見せる */
#face-card { right: 10px; top: 66px; width: clamp(96px, 13vw, 150px); }
#face { display: block; width: 100%; aspect-ratio: 1; border-radius: 14px; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
#say { position: absolute; right: calc(100% + 10px); top: 14px; width: max-content; max-width: 230px; background: #fff; color: #24302f; font-weight: 700; font-size: 15px; padding: 8px 14px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
#say::after { content: ""; position: absolute; right: -8px; top: 14px; border: 8px solid transparent; border-left-color: #fff; border-right: 0; }
/* 道具と「治療おわり」は絵の下の帯に置く（口に重ねない） */
#tools { left: 10px; right: 196px; max-width: 720px; bottom: 8px; display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 5px; backdrop-filter: blur(6px); }
#hud .tool { flex: 1 1 0; min-width: 0; justify-content: center; display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid transparent; min-height: 44px; padding: 0 8px; }
#hud .tool.on { background: rgba(95, 208, 180, 0.22); border-color: var(--mint); }
.ico { width: 20px; height: 20px; display: inline-block; flex: none; }
.ico-drill { background: linear-gradient(135deg, transparent 0 40%, #cfd6dc 40% 60%, transparent 60%), radial-gradient(circle at 25% 25%, #e0b84f 3px, transparent 4px); }
.ico-fill { background: linear-gradient(135deg, transparent 0 36%, #ffffff 36% 64%, transparent 64%), radial-gradient(circle at 22% 22%, #f4f7f6 4px, transparent 5px); }
.ico-scale { background: linear-gradient(135deg, transparent 0 44%, #cfd6dc 44% 56%, transparent 56%), radial-gradient(circle at 20% 30%, #f0d870 3px, transparent 4px); }
.ico-pull { background: linear-gradient(120deg, transparent 0 42%, #cfd6dc 42% 52%, transparent 52%), linear-gradient(150deg, transparent 0 42%, #cfd6dc 42% 52%, transparent 52%); }
.ico-numb { background: linear-gradient(135deg, transparent 0 46%, #d6dce0 46% 54%, transparent 54%), linear-gradient(135deg, transparent 0 30%, #b9a2ff 30% 62%, transparent 62%); }
#hud .tool .count { font-size: 12px; background: #7a5cc0; color: #fff; border-radius: 99px; padding: 0 6px; min-width: 1.4em; text-align: center; }
/* いたみのゲージ（似顔絵の下）。麻酔が効いている間は青く、残り秒を出す */
#pain { position: relative; margin-top: 4px; height: 18px; background: rgba(255, 255, 255, 0.9); border-radius: 99px; overflow: hidden; border: 2px solid #fff; }
#pain i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #ffd166, #ff7a59); transition: width 0.15s; }
#pain.high i { background: #e5484d; }
#pain.numb i { background: #9b86ff; }
#pain span { position: relative; display: block; text-align: center; font-size: 11px; font-weight: 800; line-height: 14px; color: #3a2a2a; }
#finish { right: 10px; bottom: 8px; min-height: 48px !important; padding: 0 18px !important; background: var(--mint) !important; color: #06302a; border-color: var(--mint) !important; font-weight: 800; font-size: 15px !important; }
#finish .key { color: #0b4a40; border-color: rgba(6, 48, 42, 0.3); }
#finish:disabled { opacity: 0.45; cursor: default; }

/* スマホのペダル（指で狙い、もう片方の指で回す） */
#pedal { display: none; right: 12px; bottom: 76px; width: 96px; height: 96px; border-radius: 50% !important; background: radial-gradient(circle at 40% 35%, #5a6670, #2d353b) !important; border: 3px solid #8b979f !important; font-weight: 800; color: #e8eef0; touch-action: none; }
#pedal.on { background: radial-gradient(circle at 40% 35%, #ff8a5c, #c2402a) !important; border-color: #ffd0b8 !important; }
body.touch #pedal { display: block; }
@media (pointer: coarse) { #pedal { display: block; } }
/* 広い画面でも指で触るときは、ペダルを下の帯に置く */
@media (min-width: 701px) {
  #pedal { bottom: 8px; right: 10px; width: 120px; height: 48px; border-radius: 12px !important; }
  body.touch #finish { right: 140px; }
  body.touch #tools { right: 326px; }
}
@media (min-width: 701px) and (pointer: coarse) { #finish { right: 140px; } #tools { right: 326px; } }
@media (max-width: 960px) {
  #hud .tool .key, #finish .key { display: none; }
  #hud .tool { padding: 0 4px; gap: 6px; }
}

/* 患者ごとの結果 */
#card { position: absolute; left: 10px; top: 66px; width: min(320px, calc(100% - 130px)); background: rgba(255, 255, 255, 0.96); color: #1d2d2b; border-radius: 12px; padding: 12px 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); pointer-events: none; }
#card .c-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #dde6e4; padding-bottom: 6px; margin-bottom: 6px; }
#card .c-pts { font-size: 22px; font-weight: 800; color: #1f8a5c; }
#card .c-pts.neg, #card .neg { color: #d93a40; }
#card ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
#card li { display: flex; justify-content: space-between; padding: 2px 0; font-variant-numeric: tabular-nums; }

/* 覆う板（はじめ・操作・おわり） */
#title, #help, #end { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8, 24, 22, 0.55); padding: 16px; overflow-y: auto; }
.sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px 26px; width: min(520px, 100%); backdrop-filter: blur(8px); margin: auto; }
.sheet h1, .sheet h2 { margin: 0 0 8px; }
.sheet .t-name { font-size: 28px; }
.lead { margin: 0 0 14px; color: var(--sub); }
.rules { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }
.rules li { color: var(--sub); text-wrap: pretty; } /* 行末に 1 文字だけ残さない */
.rules b { color: var(--mint); }
.rules li.neg b, .rules li.neg { color: #ff8a8d; }
.sheet dl { display: grid; grid-template-columns: 7.5em 1fr; gap: 6px 10px; margin: 0 0 12px; font-size: 14px; }
.sheet dt { color: var(--sub); }
.sheet dd { margin: 0; }
.sheet p { font-size: 14px; line-height: 1.6; }
button.primary { display: block; width: 100%; min-height: 48px; border: 0; border-radius: 10px; background: var(--mint); color: #06302a; font-weight: 800; font-size: 16px; }
button.primary:hover { filter: brightness(1.08); }
button.secondary { display: block; width: 100%; min-height: 44px; margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.08); font-weight: 700; font-size: 15px; }
button.secondary:hover { background: rgba(255, 255, 255, 0.16); }
.t-note { margin: 6px 0 0; font-size: 13px; color: var(--sub); text-align: center; }
#t-info { margin: 10px 0 0; text-align: center; color: var(--gold); font-weight: 700; font-size: 14px; }
#t-info:empty { display: none; }
/* 今日の診療の共有 */
#e-share { margin: 0 0 10px; padding: 10px 12px; background: rgba(0, 0, 0, 0.25); border-radius: 10px; font: inherit; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.share-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.share-actions button { flex: 1 1 auto; min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.1); font-size: 14px; font-weight: 700; white-space: nowrap; }
.share-actions button:hover { background: rgba(255, 255, 255, 0.18); }
#sh-x { background: #111; border-color: #333; }
#sh-line { background: #06c755; border-color: #06c755; color: #fff; }
#sh-msg { margin: 6px 0 0; min-height: 1.2em; font-size: 13px; color: var(--mint); }
#e-next { margin: 4px 0 12px; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
#e-reason { margin: 0 0 10px; color: var(--sub); }
#e-reason.neg { color: #ff8a8d; }
.big { display: flex; align-items: baseline; gap: 12px; }
.big span { color: var(--sub); }
.big b { font-size: 44px; font-variant-numeric: tabular-nums; }
#e-best { margin: 0 0 10px; color: var(--gold); }
#e-list { list-style: none; margin: 0 0 16px; padding: 0; font-size: 14px; max-height: 180px; overflow-y: auto; }
#e-list li { display: grid; grid-template-columns: 1fr auto 4em; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
#e-list li span:last-child { text-align: right; font-weight: 700; }

#guide-section { max-width: 1200px; margin: 24px auto; padding: 0 4px; line-height: 1.8; color: #d6e2df; }
#guide-section h2 { font-size: 18px; color: var(--text); }
/* 関連アプリ（画像つきのカード）と広告 */
.related-apps, #ad-section { max-width: 1200px; margin: 28px auto 0; padding: 0 4px; }
.related-apps-title { font-size: 18px; margin: 0 0 10px; }
.related-apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, calc(50% - 5px)), 1fr)); gap: 10px; }
.related-app-link.ra-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: #17312e; color: var(--text); text-decoration: none; transition: transform 0.15s, border-color 0.15s; }
.related-app-link.ra-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.24); }
.ra-card .ra-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ra-card .ra-name { display: block; padding: 8px 12px 10px; font-size: 13px; font-weight: 700; line-height: 1.4; }
#site-footer { max-width: 1200px; margin: 0 auto; padding: 24px 16px 40px; color: var(--sub); font-size: 13px; text-align: center; }
.footer-links { display: flex; justify-content: center; gap: 10px; align-items: center; }
.footer-link { color: var(--sub); text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; }
.footer-copy { margin: 6px 0 0; }
.footer-refs { margin: 6px 0 0; }
.footer-refs a { color: var(--sub); }

/* スマホ: 口に指やボタンが重ならないよう、操作は絵の下の帯に並べる */
@media (max-width: 700px) {
  .header-sub { display: none; }
  /* 名前を 1 行に収める（«ー» だけが次の行に落ちていた） */
  #site-header { gap: 10px; }
  #site-header .name { font-size: 14px; white-space: nowrap; }
  .langsw button { padding: 0 8px; }
  .sheet .t-name { font-size: 22px; white-space: nowrap; }
  /* 絵は横長にして、口のアップに大きな顔の目が映らないようにする */
  /* 上の段（100px）に、上の帯・似顔絵・台詞を絵の外に置く（似顔絵が上の奥歯に重なっていた） */
  #stage { aspect-ratio: 3 / 4.8; background: #17312e; }
  #view { height: calc(100% - 156px - 122px); margin-top: 122px; }
  #face-card { top: 4px; right: 6px; width: 92px; }
  #say { font-size: 13px; max-width: 200px; padding: 6px 10px; top: 52px; }
  .who { display: none !important; }
  #tools { left: 8px; right: 8px; max-width: none; bottom: 98px; padding: 3px; gap: 2px; }
  #hud .tool { flex: 1; justify-content: center; padding: 0 1px; font-size: 11px; min-height: 44px; gap: 2px; }
  #hud .tool .count { font-size: 11px; padding: 0 4px; }
  #hud .tool .ico, #hud .tool .key { display: none; }
  #topbar { left: 6px; right: 106px; top: 5px; gap: 6px; padding: 2px 2px 2px 8px; }
  /* 台詞と重ならないよう、結果は絵の下側に出す（出ている間は治療が始まっていない） */
  #card { top: auto; bottom: 156px; left: 6px; width: calc(100% - 12px); }
  .stat .lb { display: none; }
  .stat b { font-size: 18px; min-width: 0; }
  .clock, .who { padding-left: 6px; }
  #nth, #age { display: none; }
  #who { font-size: 14px; }
  #hud button.ghost { padding: 0 8px; font-size: 13px; }
  #finish { left: 8px; right: 100px; bottom: 14px; min-height: 64px !important; padding: 0 12px !important; font-size: 15px !important; }
  #finish .key { display: none; }
  #pedal { right: 8px; bottom: 4px; width: 84px; height: 84px; }
  .sheet { padding: 18px; }
}
/* とても狭いスマホ: スコアが 4 桁になっても «音あり» が似顔絵の下に入らないよう詰める */
@media (max-width: 380px) {
  #hud button.ghost { padding: 0 4px; font-size: 12px; min-width: 40px; }
  .stat b { font-size: 16px; }
}