/* 旅籠夜話 本体のスタイル(index.html から出した。CSP の style-src 'self' のため、インラインの style は置かない) */
  /* 色・形のトークンは kit/css/tokens.css(UI統一規格書 §3)。ここにはこのゲーム固有の物だけ置く */
  :root { --btn:#f5ecd6; }
  * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  /* 書体(D32): 本文=Shippori Mincho(同梱。使う字だけ)、見出しと怪異の兆し・現れ=Yuji Syuku(同梱)。外部フォント・外部通信なし。
     優先順は 同梱 → 端末の明朝 → serif。韓国語・繁体字は、その言語を選んだ時だけ、Noto Serif KR/TC(同梱)を読む(@font-face は、使われるまで読まれない)。tools/make_font_subset.py が作る */
  @font-face { font-family:"HatagoMincho"; src:url(fonts/body-regular.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
  @font-face { font-family:"HatagoMincho"; src:url(fonts/body-bold.woff2) format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
  @font-face { font-family:"HatagoGothic"; src:url(fonts/gothic-regular.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
  @font-face { font-family:"HatagoGothic"; src:url(fonts/gothic-bold.woff2) format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
  @font-face { font-family:"HatagoBrush"; src:url(fonts/brush.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
  @font-face { font-family:"HatagoKo"; src:url(fonts/ko-regular.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
  @font-face { font-family:"HatagoKo"; src:url(fonts/ko-bold.woff2) format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
  @font-face { font-family:"HatagoZh"; src:url(fonts/zh-regular.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
  @font-face { font-family:"HatagoZh"; src:url(fonts/zh-bold.woff2) format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
  /* 書体の三役(D35): ゴシック(--ff)=画面の文字と日常の日誌の行 / 明朝(--fm)=物語を読ませる文(怪異の語り・導入・章の導入・結末・世代交代・百物語) / 筆(--ffb)=題・章の題・札の題・判子の見出し */
  :root { --fm:"HatagoMincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; --ff:"HatagoGothic","BIZ UDPGothic","Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif; --ffb:"HatagoBrush",var(--fm); }
  html[lang="ko"] { --fm:"HatagoKo","HatagoMincho","Noto Serif KR","Nanum Myeongjo","Apple SD Gothic Neo","Malgun Gothic",serif; --ff:var(--fm); }   /* 韓国語・繁体字は、言語を選んだ時に読む Noto Serif で、画面も物語もそろえる(ゴシックは同梱しない) */
  html[lang="zh-Hant"] { --fm:"HatagoZh","HatagoMincho","Noto Serif TC","PMingLiU","Songti TC","Microsoft JhengHei",serif; --ff:var(--fm); }
  html,body { margin:0; height:100%; background:#d8c9a6; color:var(--ink); font:15px/1.6 var(--ff); font-synthesis:none; }   /* 太字・斜体を、字形から作らない(同梱の太字だけ使う) */
  .full h1, .modal h2, .modal h3, .sheet h2, .ln.brush, .stampname { font-family:var(--ffb); font-weight:400; }   /* 見出しと、怪異の兆し・現れ */
  #app { max-width:420px; height:100vh; height:100dvh; height:var(--vvh, 100dvh); margin:0 auto; background:var(--bg); display:flex; flex-direction:column; position:relative; overflow:hidden; }
  button { font:inherit; color:var(--ink); background:var(--btn); border:2px solid var(--line); border-radius:5px; padding:6px 10px; min-height:44px; min-width:44px; cursor:pointer; }
  button:disabled { opacity:.45; cursor:default; }
  button.on { background:var(--navy); color:#f5ecd6; border-color:var(--navy); }
  button.main { background:var(--navy); color:#fff; border-color:var(--navy); }
  button.warn { background:var(--red); color:#fff; border-color:var(--red); }
  /* 起動できなかった時の案内(ui.js が起動に成功すると外す。4秒たってもあれば出る) */
  #bootmsg { position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center; background:#1c1612; color:#e8dcc0; font-size:14px; line-height:1.7; visibility:hidden; animation:bootshow 0s 4s forwards; }
  #bootmsg a { color:#1c1612; background:#e8b04a; padding:12px 24px; border-radius:6px; text-decoration:none; min-height:44px; box-sizing:border-box; }
  @keyframes bootshow { to { visibility:visible; } }
  /* 言語ごとの書体の候補(外部フォントは同梱しない。端末の韓国語・繁体字の書体を使う。<html lang> は i18n.js が付ける) */
  html:not([lang="ja"]) .full h1 { letter-spacing:.05em; font-size:23px; line-height:1.3; }
  .full.title { justify-content:safe center; overflow-y:auto; }   /* 背の低い画面・長い題でも、上が切れない */
  .full.ending { justify-content:flex-start; overflow-y:auto; } .full.ending > :first-child { margin-top:auto; } .full.ending > :last-child { margin-bottom:auto; }   /* 長い語りは、上から読めて、はみ出さない */
  .help details { border-top:1px solid #b99f6e; } .help summary { padding:10px 2px; min-height:44px; box-sizing:border-box; cursor:pointer; font-weight:600; } .help details p { margin:0 2px 10px; font-size:14px; line-height:1.75; }
  .help ol { margin:4px 0 8px; padding-left:22px; line-height:1.75; font-size:14px; }
  .full p.warnote { color:#e8b04a; margin-bottom:12px; line-height:1.6; }
  button.good { background:var(--green); color:#fff; border-color:var(--green); }
  /* 舞台 */
  #scene { position:relative; flex:none; overflow:hidden; border-bottom:3px solid var(--line); background:#6b5a3a; }
  #scene[data-win="none"] { display:flex; flex-direction:column; gap:4px; padding:6px; background:var(--bg); }
  #stage { display:block; width:100%; image-rendering:pixelated; }
  .plate { position:absolute; z-index:2; background:rgba(239,227,200,.93); border:2px solid var(--line); border-radius:3px; padding:1px 6px; font-size:11px; line-height:1.35; }
  #pDate { left:5px; top:5px; } #pMoney { right:5px; top:5px; text-align:right; } #pMoney b { display:block; font-size:16px; font-weight:600; }
  #pEvent { left:5px; bottom:5px; max-width:64%; max-height:3.2em; overflow:hidden; } #pEvent em { font-style:normal; font-weight:600; }
  #scene[data-win="none"] .plate { position:static; max-width:none; max-height:none; }
  #scene[data-win="small"] .plate { font-size:10px; padding:0 4px; } #scene[data-win="small"] #pMoney b { font-size:13px; } #scene[data-win="small"] #pEvent small { display:none; }
  #pMoney .d { color:var(--green); font-size:10px; } #pMoney .d.neg { color:var(--red); }
  /* 状況 */
  #stat { flex:none; display:flex; gap:5px; padding:4px 6px; font-size:12px; flex-wrap:wrap; }
  .chip { background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:0 8px; white-space:nowrap; }
  .chip.navy { background:var(--navy); color:#f5ecd6; border-color:var(--navy); } .chip.green { background:#dfeed4; border-color:var(--green); } .chip.red { background:#f3d6d0; border-color:var(--red); }
  /* ログ(主役) */
  #logBox { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; margin:0 6px; background:var(--paper); border:2px solid var(--line); border-radius:5px; }
  #tabs { flex:none; display:flex; gap:4px; padding:2px 5px 2px; border-bottom:1px solid #d8c9a6; overflow-x:auto; }
  #tabs button { flex:none; min-height:44px; padding:0 10px; font-size:13px; border-radius:4px; border-width:1px; white-space:nowrap; }
  #log { flex:1 1 auto; min-height:0; overflow-y:auto; padding:2px 8px; overscroll-behavior:contain; }
  .ln { padding:5px 0; border-bottom:1px dotted #d8c9a6; font-size:14px; line-height:1.65; }
  .ln small { display:block; color:var(--sub); font-size:10px; line-height:1.2; }
  .ln.same small:not([data-mk]) { display:none; }   /* 同じ日の2行目からは、日付を省く */
  .ln.k-era,.ln.k-hist { background:linear-gradient(90deg,#efe6cf,transparent); }
  .ln.bad { color:var(--red); } .ln.good { color:var(--green); }
  .ln.kaii { color:#4a3a6a; font-style:italic; }
  .empty { color:var(--sub); padding:14px 4px; text-align:center; font-size:13px; }
  #ukArea { flex:none; border-top:2px solid var(--navy); background:#e4e9f2; padding:6px 8px; min-height:44px; }
  #ukArea.idle { background:transparent; border-top:1px dashed #b9a47f; color:var(--sub); font-size:12px; display:flex; align-items:center; }
  .uk h3 { margin:0 0 2px; font-size:14px; color:var(--navy); } .uk p { margin:0 0 6px; font-size:12px; color:var(--sub); }
  .uk .row { display:flex; gap:6px; } .uk .row button { flex:1; padding:4px 2px; font-size:13px; line-height:1.3; }
  .uk .row button small { display:block; font-size:10px; opacity:.8; }
  /* 選んだ時の判(CSSの絵) */
  .uk { position:relative; } .uk.done p { margin:0 0 4px; } .uk.done h3 { padding-right:64px; } .uk.done .resline { font-size:13px; line-height:1.5; padding-right:64px; animation:resIn .5s ease .35s both; }
  #ukArea.res { min-height:68px; }
  .stamp { position:absolute; right:6px; top:0; width:58px; height:58px; display:flex; align-items:center; justify-content:center; color:#b8281c; font:700 26px/1 "Hiragino Mincho ProN","Yu Mincho",serif; transform:rotate(-9deg); transform-origin:50% 55%; mix-blend-mode:multiply; opacity:.92; animation:stampIn .4s cubic-bezier(.3,1.4,.5,1) both; }
  .stamp.sy { border:4px solid #b8281c; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(184,40,28,.35); }
  .stamp.sh { border:4px solid #b8281c; border-radius:50%; clip-path:inset(0 42% 0 0); box-shadow:inset 0 0 0 2px rgba(184,40,28,.35); justify-content:flex-start; padding-left:10px; }
  .stamp.sn { border:4px solid #b8281c; border-radius:3px; width:52px; height:52px; box-shadow:inset 0 0 0 2px rgba(184,40,28,.35); }
  @keyframes stampIn { 0% { transform:rotate(-9deg) scale(1.9); opacity:0; } 55% { transform:rotate(-9deg) scale(.82); opacity:1; } 100% { transform:rotate(-9deg) scale(1); opacity:.92; } }
  @keyframes resIn { from { opacity:0; } to { opacity:1; } }
  /* 怪異帖(札) */
  .kz h2 { margin:0; font-size:17px; } .kz .rate { font-size:12px; color:var(--sub); margin:2px 0 6px; } .kz .bar { height:6px; background:#d8c9a6; border-radius:3px; overflow:hidden; margin:2px 0 6px; } .kz .bar i { display:block; height:100%; background:#7a5aa0; }
  .kz .tgl { margin:6px 0; } .kz .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
  .tile { aspect-ratio:3/4; border:2px solid var(--line); border-radius:4px; background:var(--paper); position:relative; padding:5px 5px 4px; font-size:12px; line-height:1.3; display:flex; flex-direction:column; justify-content:space-between; text-align:left; min-height:0; color:var(--ink); }
  .tile.back { background:repeating-linear-gradient(45deg,var(--navy) 0 6px,#2c456f 6px 12px); color:#cdd7ea; align-items:center; justify-content:center; font-size:30px; border-color:#14223a; }
  .tile.back small { font-size:10px; opacity:.7; }
  .tile.heard { background:#efe6d0; } .tile.kfull .nm { padding-right:22px; } .tile.kfull { border-color:#c8921c; box-shadow:inset 0 0 0 2px var(--gold); }
  .tile .nm { font-weight:600; font-size:13px; overflow-wrap:anywhere; hyphens:auto; } .tile .mk { display:flex; gap:2px; flex-wrap:wrap; } .tile .mk b { font-size:10px; border:1px solid currentColor; border-radius:2px; padding:0 3px; font-weight:normal; }
  .tile .mk .sh { color:#4a3a6a; } .tile .mk .se { color:#8a5a1a; } .tile .mk .tn { color:var(--green); } .tile .mk .tr { color:var(--red); }
  html:not([lang="ja"]) .tile .seal { width:auto; min-width:21px; height:auto; border-radius:11px; padding:0 4px; font-size:9px; line-height:15px; }   /* 「完」→ Full / 完整 などの長い語でも、判が枠からはみ出さない */
  .tile .conf { font-size:10px; color:var(--sub); } .tile .seal { position:absolute; right:3px; top:3px; width:21px; height:21px; border:2px solid #b8281c; color:#b8281c; border-radius:50%; font-size:11px; text-align:center; line-height:17px; transform:rotate(-10deg); background:rgba(255,250,240,.7); }
  .kdet h3 { margin:4px 0; font-size:16px; } .kdet .st { font-size:12px; color:var(--sub); margin-bottom:6px; }
  .kdet .seg { margin:8px 0; padding:6px 8px; border-left:3px solid #8a5a1a; background:#f6e7c4; } .kdet .seg b { display:block; font-size:11px; color:#8a5a1a; margin-bottom:2px; } .kdet .seg p { margin:2px 0; font-size:14px; line-height:1.7; }
  .kdet .truth { border-left-color:#4a3a6a; background:#e9e3f2; } .kdet .truth b { color:#4a3a6a; }
  .kdet .none { color:var(--sub); text-align:center; padding:14px 0; }
  /* 怪異のログ(行灯色+小さな印) */
  .ln.kaii { background:#f6e7c4; border-left:3px solid #c8921c; padding-left:6px; color:#4a3320; font-style:normal; }
  .ln.kaii small::before { content:attr(data-mk); display:inline-block; font-size:10px; line-height:1.3; border:1px solid #8a5a1a; color:#8a5a1a; border-radius:2px; padding:0 3px; margin-right:5px; vertical-align:1px; }
  .ln.kaii-hyaku { background:#3a2a4a; color:#f1e7cf; border-left-color:var(--gold); font-weight:600; margin-top:6px; letter-spacing:.04em; } .ln.kaii-hyaku small { color:#cdbfa0; } .ln.kaii-hyaku small::before { border-color:var(--gold); color:var(--gold); }
  .ln.narr { background:#faf0d4; font-style:italic; margin-left:10px; }
  /* タイトル(暖簾・行灯・雨) */
  .full.title { overflow-x:hidden; overflow-y:auto; background:radial-gradient(ellipse at 78% 24%,#3a2a16 0,#1c1710 55%,#120f0a 100%); }
  .full.title > * { position:relative; z-index:2; }
  .rain { position:absolute !important; inset:-20% 0 0 0; z-index:1 !important; pointer-events:none; opacity:.22; background:repeating-linear-gradient(103deg,transparent 0 11px,rgba(180,200,230,.5) 11px 12px,transparent 12px 27px),repeating-linear-gradient(103deg,transparent 0 31px,rgba(180,200,230,.35) 31px 32px,transparent 32px 53px); background-size:80px 120px,130px 170px; animation:rainFall 1.5s linear infinite; }
  @keyframes rainFall { from { background-position:0 0,0 0; } to { background-position:-30px 120px,-40px 170px; } }
  .noren { position:absolute !important; left:0; right:0; top:0; height:118px; z-index:2 !important; display:flex; justify-content:center; gap:3px; padding:0 20px; }
  .noren::before { content:''; position:absolute; left:8px; right:8px; top:0; height:8px; background:#5a4128; border-radius:2px; }
  .noren i { flex:1; max-width:92px; margin-top:8px; background:linear-gradient(var(--navy),#1b2c48); border-bottom:5px solid #14223a; border-radius:0 0 3px 3px; transform-origin:50% 0; animation:sway 5s ease-in-out infinite; } .noren i:nth-child(2) { animation-delay:-1.6s; } .noren i:nth-child(3) { animation-delay:-3.1s; }
  @keyframes sway { 0%,100% { transform:rotate(.6deg); } 50% { transform:rotate(-.6deg); } }
  .lamp { position:absolute !important; right:30px; top:150px; width:46px; height:64px; z-index:1 !important; border-radius:40% 40% 36% 36%; background:radial-gradient(circle at 50% 55%,#ffe9a0 0,#f2b04a 45%,#b8601c 100%); box-shadow:0 0 38px 16px rgba(240,170,70,.35),0 0 90px 40px rgba(240,170,70,.15); animation:flick 3.2s ease-in-out infinite; }
  @keyframes flick { 0%,100% { opacity:1; } 40% { opacity:.86; } 55% { opacity:.97; } 75% { opacity:.9; } }
  .full.title h1 { margin-top:0; font-size:34px; letter-spacing:.3em; padding-left:.3em; } .full.title .yomi { margin-top:150px; text-align:center; color:#bfae8a; font-size:12px; letter-spacing:.3em; margin-bottom:2px; }
  .full.title .sub { margin-bottom:22px; line-height:1.6; }
  /* 周回の選択・世代交代・札帳 */
  .opts { display:flex; flex-direction:column; gap:6px; margin:4px 0 8px; } .opt { text-align:left; padding:6px 10px; min-height:44px; line-height:1.4; } .opt b { display:block; } .opt small { display:block; font-size:12px; opacity:.8; font-weight:normal; }
  .modal h3 { margin:10px 0 2px; font-size:14px; } .sub2 { font-size:12px; color:var(--sub); margin:0 0 4px; } .narr2 { font-style:italic; line-height:1.9; margin:6px 0; }
  .tile.g1 { border-color:#4a6a8a; } .tile.g2 { border-color:#7a4a9a; background:#f1ebf7; } .tile.g3 { border-color:#c8921c; background:#fbf1d4; }
  .tile.gold .nm { padding-right:22px; } .tile.gold { background:linear-gradient(160deg,#fbe9a8,#e8c25a); border-color:#a8741a; box-shadow:inset 0 0 0 2px #fff3c0; } .tile .mk .gr { color:#5a4a2a; }
  .tile.back { cursor:default; }
  /* 文字の大きさ(設定)・動きの軽減 */
  html[data-fs="s"] #app { font-size:13.5px; } html[data-fs="l"] #app { font-size:17px; } html[data-fs="l"] .ln { font-size:16px; } html[data-fs="l"] .chip,html[data-fs="l"] #primaryHint,html[data-fs="l"] #goalLine { font-size:14px; } html[data-fs="s"] .ln { font-size:13px; }
  html.rm *,html.rm *::before,html.rm *::after { animation:none !important; transition:none !important; }
  @media (prefers-reduced-motion:reduce) { .lamp1 { transition:none; } .hbody p.one { animation:none; } }
  .sheet h3 { margin:12px 0 2px; font-size:14px; border-bottom:1px solid #c9b48a; }
  .item b { text-align:right; min-width:0; overflow-wrap:anywhere; } .stars { font-size:19px; letter-spacing:2px; word-break:break-all; }
  /* 見やすさ: フォーカス・色だけに頼らない印・小さな画面(320×568) */
  button:focus-visible,textarea:focus-visible,input:focus-visible { outline:3px solid var(--gold); outline-offset:2px; box-shadow:0 0 0 5px var(--navy); }
  .ln small[data-mk]::before { content:attr(data-mk); display:inline-block; font-size:10px; line-height:1.3; border:1px solid currentColor; border-radius:2px; padding:0 3px; margin-right:5px; vertical-align:1px; }
  .ln.bad small { color:var(--red); } .ln.good small { color:var(--green); }
  @media (max-width:359px) { #acts button { font-size:14px; padding:4px 1px; } #unitSel button:not(.on) { display:none; } #unitSel button.on { border-radius:5px; margin:0; min-width:52px; } #speedBtns { gap:3px; } #primary { min-width:40%; font-size:15px; } #stat { font-size:11px; gap:3px; } .plate { font-size:10px; } #pMoney b { font-size:13px; } #primaryHint { font-size:11px; } }
  /* 低い画面(拡大後の高さが700px以下): ui.js が html に h700 / h600 を付ける(PCの拡大では、media queryの高さが実際の高さと合わないため) */
  html.h700 .has-uk #goalLine, html.h700 .has-uk #primaryRow { display:none; }
  html.h700 #logBox { min-height:96px; }
  html.h700 #stat { gap:4px; }
  html.h700 .chip { padding:0 6px; font-size:11px; }
  html.h700 #ukArea .uk h3 { font-size:13px; }
  html.h700 #ukArea .uk p { margin:0 0 3px; }
  html.h700 #stat { flex-wrap:nowrap; overflow-x:auto; }
  html.h700 .chip { flex:none; }
  html.h700 #ukArea.idle { min-height:0; padding:2px 8px; font-size:11px; }
  html.h700 #pEvent small { display:none; }
  html.h700 #goalLine { font-size:11px; padding:0 6px; }
  html.h700 #ctl { gap:3px; padding-top:3px; }
  html.h700 #stat { padding:2px 6px; }
  html.h700 .full h1 { font-size:24px; }
  html.h700 .full.title .yomi { margin-top:110px; }
  html.h700 .noren { height:80px; }
  html.h700 .lamp { top:100px; }
  html.h600 .full.title .yomi { margin-top:80px; }
  html.h600 .noren { height:64px; }
  html.h600 .lamp { top:78px; }
  html.h600 .full.title .sub { margin-bottom:14px; }
  html.h600 .full.title .col { gap:8px; }   /* 320×568 など、特に低い画面のタイトル */
  /* つながり図・糸口・見立て・百物語の夜 */
  .kgraph { display:block; width:100%; border:2px solid var(--line); border-radius:4px; margin:4px 0; touch-action:manipulation; }
  .hintbox { margin:8px 0; padding:6px 8px; border:1px dashed #8a7458; border-radius:4px; background:#fbf3da; } .hintbox b { font-size:12px; color:#8a5a1a; } .hintbox p { margin:3px 0; font-size:14px; }
  .mitate { margin-top:2px; } .mt-toggle { width:100%; text-align:left; font-size:12px; padding:0 8px; border-width:1px; background:transparent; } .mitate small { font-size:11px; color:var(--sub); } .mitate .row { display:flex; gap:4px; } .mitate button { flex:1; padding:2px 2px; font-size:12px; border-width:1px; }
  .full.hyaku { background:#120e0a; justify-content:flex-start; padding-top:22px; overflow-y:auto; } .full.hyaku h2 { text-align:center; letter-spacing:.3em; font-size:18px; margin:0 0 8px; }
  .lamps { display:flex; justify-content:center; gap:10px; margin:6px 0 10px; flex-wrap:wrap; }
  .lamp1 { width:22px; height:30px; border-radius:40% 40% 36% 36%; background:radial-gradient(circle at 50% 55%,#ffe9a0 0,#f2b04a 50%,#b8601c 100%); box-shadow:0 0 14px 5px rgba(240,170,70,.45); transition:opacity 1.6s, box-shadow 1.6s, background 1.6s; }
  .lamp1.off { background:#2a221a; box-shadow:none; opacity:.8; }
  .hhead { text-align:center; color:#cdbfa0; font-size:13px; margin:2px 0 10px; letter-spacing:.06em; }
  .hbody { flex:1; line-height:2.4; font-size:16px; } .hbody .scene { margin:0 0 18px; } .hbody p { margin:2px 0; } .hbody p.one { animation:resIn 1.2s ease both; }
  .hnav { display:flex; gap:8px; margin-top:12px; } .hnav button { flex:1; }
  #updBar { position:absolute; left:8px; right:8px; bottom:8px; z-index:80; background:var(--navy); color:#fff; border:2px solid var(--gold); border-radius:8px; padding:6px 10px; display:flex; align-items:center; gap:8px; font-size:14px; } #updBar span { flex:1; } #updBar button { background:transparent; color:#fff; border-color:#8fa3c8; } #updBar button:first-of-type { background:var(--gold); color:#2b2118; border-color:var(--gold); }
  .legal { display:flex; flex-wrap:wrap; gap:2px 12px; justify-content:center; margin-top:10px; } .legal a { display:inline-flex; align-items:center; min-height:44px; padding:0 6px; color:#cdbfa0; font-size:13px; } .sheet .legal { justify-content:flex-start; } .sheet .legal a { color:var(--navy); }
  /* 怖さ・ホロリ・笑みの印(形で見分ける) */
  .feel { display:flex; gap:5px; align-items:center; margin:2px 0; min-height:11px; } .feel .g { display:inline-flex; gap:1px; align-items:flex-end; }
  .fm { display:inline-block; vertical-align:middle; }
  .fm.k { width:7px; height:10px; background:#c8741c; clip-path:polygon(50% 0,88% 42%,74% 100%,26% 100%,12% 42%); animation:fmFlick 1.8s ease-in-out infinite; transform-origin:50% 100%; }
  .fm.h { width:6px; height:6px; background:#3b78a8; border-radius:0 50% 50% 50%; transform:rotate(45deg); margin:1px 2px 1px 1px; }
  .fm.w { width:9px; height:5px; border-bottom:2px solid var(--green); border-radius:0 0 9px 9px; }
  @keyframes fmFlick { 0%,100% { transform:scaleY(1); } 40% { transform:scaleY(.86) skewX(4deg); } 70% { transform:scaleY(1.06) skewX(-3deg); } }
  .legend { display:flex; gap:12px; margin:2px 0 6px; font-size:11px; color:var(--sub); align-items:center; } .legend .lg { display:inline-flex; gap:4px; align-items:center; }
  .logcap { font-size:11px; color:var(--sub); text-align:center; padding:2px 0; } .ln.day small[data-mk]::before { border-color:#8a7458; color:#6b583d; } .ln .cnt { display:block; font-size:11px; color:var(--sub); line-height:1.4; margin-top:1px; }
  /* 下の操作 */
  #ctl { flex:none; padding:5px 6px calc(6px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:5px; }
  #goalLine { text-align:left; min-height:44px; padding:2px 8px; font-size:12px; background:var(--paper); line-height:1.4; border-width:1px; }
  #goalLine span.ok { color:var(--green); } #goalLine span.no { color:var(--sub); }
  #primaryRow { display:flex; align-items:center; gap:8px; }
  #primary { flex:none; min-width:42%; min-height:46px; font-size:16px; font-weight:600; background:var(--navy); color:#fff; border-color:var(--navy); }
  #primaryHint { margin:0; font-size:12px; line-height:1.4; color:var(--sub); }
  #acts,#speedBar { display:flex; gap:5px; } #acts button { flex:1; }
  html:not([lang="ja"]) #acts button { font-size:14px; padding-left:2px; padding-right:2px; }   /* 英語・韓国語・繁体字は、語が長めなので、5つ並びの字を少し小さく(枠からはみ出さない) */
  html:not([lang="ja"]) #tabs button { font-size:12px; padding:0 7px; }   /* 日記の札(すべて・客・奉公人…)は、英語でも375pxに収まるように */
  @media (max-width:359px) { html:not([lang="ja"]) #acts button { font-size:13px; } .tile { padding:4px 3px 3px; } html:root .chip { padding:0 5px; font-size:10.5px; } #stat { gap:3px; } }
  #speedBar { align-items:center; } #unitSel { display:flex; } #unitSel button { border-radius:0; margin-left:-2px; min-width:44px; padding:6px 7px; } #unitSel button:first-child { border-radius:5px 0 0 5px; margin:0; } #unitSel button:last-child { border-radius:0 5px 5px 0; }
  #speedBtns { display:flex; gap:4px; margin-left:auto; } #speedBtns button { min-width:44px; padding:6px 4px; }
  /* 暖簾を出す(隣のボタンと違う系統=朱+金) */
  #primary.nudge { background:linear-gradient(110deg,var(--red) 0%,#d6492e 35%,var(--red) 55%,#8a1f16 100%); background-size:250% 100%; border-color:var(--gold); color:#fff6dc; animation:nudgeShine 2.4s linear infinite,nudgeGlow 1.7s ease-in-out infinite; }
  @keyframes nudgeGlow { 0%,100% { box-shadow:0 0 0 0 rgba(240,192,64,.9) } 50% { box-shadow:0 0 0 9px rgba(240,192,64,0),0 0 18px 6px rgba(214,73,46,.55) } }
  @keyframes nudgeShine { 0% { background-position:250% 0 } 100% { background-position:-250% 0 } }
  /* 重ねる画面 */
  .item small.why { display:block; color:var(--red); font-size:12px; }
  #app { padding-bottom:env(safe-area-inset-bottom); }   /* ホームバー(iPhone)に、下の操作が隠れない */
  button.warn.small { font-size:12px; min-height:44px; padding:2px 10px; flex:0 0 auto; } button.main.big { font-size:17px; min-height:54px; flex:2; }   /* データを消す確認: やめるは大きく、消すは小さい赤 */
  .scrim.over { z-index:70; }
  .scrim { position:absolute; inset:0; z-index:50; background:rgba(30,20,10,.55); display:flex; align-items:flex-end; }
  .scrim.center { align-items:center; justify-content:center; padding:14px; }
  .sheet { width:100%; max-height:45%; overflow-y:auto; background:var(--bg); border-top:3px solid var(--line); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .sheet h2,.modal h2 { margin:0 0 6px; font-size:16px; } .sheet .x { float:right; min-height:44px; }
  .modal { width:100%; max-height:92%; overflow-y:auto; background:var(--bg); border:3px solid var(--line); border-radius:8px; padding:14px; }
  .modal p { margin:6px 0; } .modal .row { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .modal .row button { flex:1; }
  .item { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px dotted #c9b48a; } .item .t { flex:1; font-size:14px; line-height:1.4; } .item .t small { display:block; font-size:11px; color:var(--sub); }
  .full { position:absolute; inset:0; z-index:60; background:#1c1710; color:#f1e7cf; display:flex; flex-direction:column; justify-content:center; padding:24px 22px; }
  .full h1 { font-size:26px; margin:0 0 4px; letter-spacing:.2em; text-align:center; } .full .sub { text-align:center; color:#bfae8a; font-size:12px; margin-bottom:26px; }
  .full .col { display:flex; flex-direction:column; gap:10px; } .full button { background:#3a2e20; color:#f1e7cf; border-color:#8a7452; min-height:46px; }
  .full button.main { background:var(--red); border-color:var(--gold); }
  .full.story { justify-content:safe center; overflow-y:auto; }   /* 背の低い画面で、語りが長くても、上が切れない(出た行は、見える所まで寄せる) */
  .story { padding-top:44px; } .story p { opacity:0; transition:opacity 1.2s; margin:10px 0; font-size:16px; line-height:1.9; } .story p.show { opacity:1; }
  html.h700 .story p { margin:6px 0; font-size:14.5px; line-height:1.75; }
  html.h700 .story { padding-top:36px; }
  .full .skip { position:absolute; right:12px; top:12px; min-height:44px; font-size:13px; }
  .stars { font-size:22px; color:#c8921c; letter-spacing:4px; text-align:center; }
  textarea,input[type=text] { width:100%; font:12px/1.4 monospace; background:#fffaf0; color:var(--ink); border:1px solid var(--line); border-radius:4px; padding:6px; }
  .tgl { display:flex; gap:6px; flex-wrap:wrap; } .tgl button { min-height:44px; padding:2px 10px; font-size:13px; }
  /* 案内 */
  #tour { position:fixed; inset:0; z-index:9000; }
  #tour .thole { position:fixed; border-radius:8px; box-shadow:0 0 0 9999px rgba(20,14,8,.66); outline:3px solid var(--gold); pointer-events:none; }
  #tour .tbub { position:fixed; width:min(360px,calc(100vw - 16px)); background:var(--navy); color:#fff; border:2px solid var(--gold); border-radius:10px; padding:12px 14px; box-shadow:0 6px 18px rgba(0,0,0,.4); font-size:15px; line-height:1.6; }
  #tour .tnav { display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:6px; } #tour .tn { font-size:12px; color:#cdd7ea; }
  #tour button { background:transparent; color:#fff; border-color:#8fa3c8; min-height:44px; } #tour button.main { background:var(--gold); color:#2b2118; border-color:var(--gold); }
  #toast { position:absolute; left:50%; top:46%; transform:translateX(-50%); z-index:70; background:rgba(36,57,92,.95); color:#fff; padding:8px 14px; border-radius:6px; font-size:13px; max-width:86%; }
  @media (prefers-reduced-motion:reduce) { #primary.nudge { animation:none; } .fm.k { animation:none; } .rain,.noren i,.lamp { animation:none; } .stamp,.uk.done .resline { animation:none; } .story p { transition:none; } }
  /* 時の流れの帯(日・週・月+⏸▶▶▶▶▶▶⏭)が、375px前後ではみ出していた(⏭が切れる)。幅に応じて、ボタンの幅を詰める */
  @media (max-width:440px) { #unitSel button { min-width:40px; padding:6px 5px; } #speedBtns { gap:3px; } #speedBtns button { min-width:40px; padding:6px 2px; } }
  @media (max-width:389px) { #speedBar { gap:3px; } #unitSel button { min-width:34px; padding:6px 3px; } #speedBtns { gap:2px; } #speedBtns button { min-width:34px; padding:6px 1px; } }
  /* 読みやすさ(G.4): 窓の板は大きく・ほぼ不透明、「本日の出来事」は窓の下の帯、補助の行は12.5px以上・濃い色。〔くっきり表示〕はさらに濃く太く */
  .plate { background:rgba(244,234,208,.98); font-size:13px; } #pDate small { font-size:11px; } #pMoney b { font-size:18px; }
  #scene:not([data-win="none"]) #pEvent { position:static; max-width:none; max-height:none; border:0; border-top:2px solid var(--line); border-radius:0; padding:3px 8px; font-size:12.5px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--paper); }
  #scene:not([data-win="none"]) #pEvent br { display:none; } #scene:not([data-win="none"]) #pEvent small { display:inline; margin-left:8px; font-size:12.5px; color:var(--sub); }
  .uk p, #goalLine, #ukArea.idle, #primaryHint, .sub2, .tile .conf { font-size:12.5px; } .ln small { font-size:11px; } #ukArea.idle { color:var(--sub); }
  html.crisp { --sub:#3a2c1c; --ink:#1a1209; --line:#5a3f22; } html.crisp .ln, html.crisp .uk p, html.crisp .sub2, html.crisp #goalLine { font-weight:700; } html.crisp .plate { background:#fbf5e4; } html.crisp #stage { image-rendering:pixelated; filter:contrast(1.06) saturate(1.08); }
  .ln.kaii, .story, .story p, .narr2, .hhead, .hbody p, .full.hyaku p, .full.ending p, .full.ending .sub { font-family:var(--fm); }   /* 物語を読ませる文は明朝 */