:root{
    --sumi:#100f0d; --sumi2:#171613;
    --kinari:#e6dfd0; --kinari-dim:#9a9282;
    --shu:#b5442e; --shu-lite:#d4664b;
    --tsuki:#f2e7c4; --line:#2e2b25;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0;height:100%;overflow:hidden}
  body{
    background:linear-gradient(180deg,#0c0b0a 0%,#131210 55%,#191713 100%); color:var(--kinari);
    font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP","Noto Serif TC","Noto Serif SC","Noto Serif KR",serif;
    overscroll-behavior:none;-webkit-font-smoothing:antialiased;
    -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  }
  textarea,input{-webkit-user-select:text;user-select:text}
  button{touch-action:manipulation}
  #app{
    max-width:520px;margin:0 auto;height:100dvh;max-height:100dvh;overflow:hidden;
    padding-bottom:env(safe-area-inset-bottom,0px);
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
    display:flex;flex-direction:column;
    background:linear-gradient(180deg,#0c0b0a 0%,#131210 55%,#191713 100%);
  }
  /* 画面のほうが広いとき、遊ぶ場所の際が分かるように一本だけ引く */
  @media (min-width:600px){
    #app{box-shadow:inset 1px 0 0 #211f1a, inset -1px 0 0 #211f1a}
  }
  header,.stats,.act,nav{flex:0 0 auto}

  header{
    padding:calc(12px + env(safe-area-inset-top,0px)) 14px 9px;border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;gap:8px;
  }
  .title{font-size:16px;letter-spacing:.3em;margin:0;font-weight:400;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .hd-r{display:flex;align-items:center;gap:4px;flex:0 0 auto}
  .kudoku{font-size:10.5px;color:var(--kinari-dim);letter-spacing:.08em;white-space:nowrap;margin-right:4px}
  .kudoku b{color:var(--tsuki);font-weight:400}
  .icobtn{
    border:1px solid var(--line);background:transparent;color:var(--kinari-dim);
    font-family:inherit;font-size:11px;letter-spacing:.06em;padding:5px 8px;cursor:pointer;border-radius:2px;
    min-width:30px;min-height:30px;display:inline-flex;align-items:center;justify-content:center;
  }
  .icobtn:active,.icobtn.on{color:var(--kinari);border-color:#4a453b}

  .stats{display:flex;border-bottom:1px solid var(--line)}
  .stat{flex:1;padding:10px 4px 11px;text-align:center;border-right:1px solid var(--line);min-width:0}
  .stat:last-child{border-right:0}
  .stat .lbl{font-size:9.5px;color:var(--kinari-dim);letter-spacing:.18em;display:block;margin-bottom:5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stat .val{font-size:19px;letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:1;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .stat .val small{font-size:10.5px;color:var(--kinari-dim);margin-left:2px}
  #mujouVal{color:var(--shu-lite)}

  .kawara{position:relative;flex:1 1 auto;min-height:106px;overflow:hidden}
  #cv{display:block;width:100%;height:100%;cursor:pointer;touch-action:manipulation}
  .flash{position:absolute;inset:0;background:var(--shu);opacity:0;pointer-events:none;mix-blend-mode:screen}
  .bigword{
    position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.6);
    font-size:56px;opacity:0;pointer-events:none;letter-spacing:.18em;white-space:nowrap;
  }
  .lore{
    position:absolute;left:0;right:0;bottom:38px;padding:12px 20px;text-align:center;
    font-size:12.5px;line-height:1.85;color:var(--tsuki);opacity:0;pointer-events:none;
    text-shadow:0 2px 10px #000;
    background:linear-gradient(180deg,rgba(10,9,8,0) 0%,rgba(10,9,8,.86) 22%,rgba(10,9,8,.86) 78%,rgba(10,9,8,0) 100%);
  }
  .onibar{
    position:absolute;left:0;right:0;bottom:0;padding:6px 12px 7px;
    display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--kinari-dim);
    letter-spacing:.1em;background:linear-gradient(180deg,rgba(16,15,13,0),rgba(14,13,11,.97) 52%);
  }
  .gauge{flex:1;height:2px;background:#2a2721;position:relative;overflow:hidden}
  .gauge i{position:absolute;inset:0;transform-origin:left;background:var(--shu);display:block}
  .gauge i.win{background:var(--tsuki)}
  .pop{position:absolute;pointer-events:none;font-size:13px;color:var(--tsuki);opacity:0}

  .act{display:flex;gap:1px;background:var(--line);border-top:1px solid var(--line)}
  .act button{
    flex:1;border:0;background:var(--sumi2);color:var(--kinari);
    font-family:inherit;font-size:14.5px;letter-spacing:.2em;padding:15px 4px 16px;
    cursor:pointer;transition:background .12s,color .12s;
  }
  .act button:active{background:#262320}
  .act button .sub{display:block;font-size:9.5px;letter-spacing:.06em;color:var(--kinari-dim);margin-top:5px}
  #tsumu{flex:1.9;background:#211e19}
  #tsumu:active{background:#2e2a23}
  #kuyou:disabled{color:#4d4840;cursor:default}
  #kuyou:disabled .sub{color:#3b372f}
  #kuyou.mikiri{background:#2b1a15;color:var(--tsuki);box-shadow:inset 0 0 0 1px #5c3227}
  #kuyou.mikiri .sub{color:var(--shu-lite)}

  nav{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  nav button{
    flex:1;border:0;background:transparent;color:var(--kinari-dim);font-family:inherit;
    font-size:11.5px;letter-spacing:.2em;padding:11px 0 10px;cursor:pointer;border-bottom:2px solid transparent;
  }
  nav button[aria-selected="true"]{color:var(--kinari);border-bottom-color:var(--shu)}
  nav button.alert{color:var(--shu-lite)}

  .sheet{flex:0 0 var(--sheet,32vh);min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

  /* ショップ欄の高さを変えるつまみ。線が一本増えるだけにしてある。 */
  .grip{
    flex:0 0 15px;height:15px;display:flex;align-items:center;justify-content:center;
    border-top:1px solid var(--line);background:transparent;cursor:row-resize;touch-action:none;
  }
  .grip i{display:block;width:34px;height:2px;background:#3d382f;border-radius:2px;transition:background .2s}
  .grip:hover i,.grip.on i{background:#6a6254}
  .panel{padding:4px 0 24px;display:none}
  .panel.on{display:flex;flex-direction:column;min-height:100%}
  .panel.on > *{flex:0 0 auto}
  .panel.on > .note{margin-top:auto}

  .row{
    width:100%;display:flex;align-items:center;gap:11px;text-align:left;
    background:transparent;border:0;border-bottom:1px solid var(--line);
    color:var(--kinari);font-family:inherit;padding:12px 16px;cursor:pointer;
  }
  .row:active{background:#1b1915}
  .row[disabled]{cursor:default;opacity:.58}
  /* 行の中身は指の当たりから外す。値段や残りが描き直されても、押している最中のタップが落ちない */
  .row > *{pointer-events:none}
  .row .fig{
    width:29px;height:29px;flex:0 0 29px;display:grid;place-items:center;
    font-size:15px;color:var(--tsuki);border:1px solid var(--line);border-radius:2px;
  }
  .row .body{flex:1;min-width:0}
  .row .nm{font-size:13.5px;letter-spacing:.06em;display:block}
  .row .nm em{font-style:normal;color:var(--kinari-dim);font-size:10.5px;margin-left:6px}
  .row .ds{font-size:10.5px;color:var(--kinari-dim);margin-top:4px;line-height:1.6;display:block}
  .row .rt{text-align:right;flex:0 0 auto}
  .row .cost{font-size:12.5px;color:var(--shu-lite);font-variant-numeric:tabular-nums;display:block}
  .row[disabled] .cost{color:#8b8275}
  .row .until{display:block;font-size:9.5px;color:#6f6a5f;margin-top:3px;white-space:nowrap;letter-spacing:.04em}
  .row .own{font-size:10.5px;color:var(--kinari-dim);margin-top:4px;display:block}

  #oniLbl.call{color:var(--shu-lite); border-bottom:1px dotted #5c3227; cursor:pointer}
  .onibar:has(#oniLbl.call){cursor:pointer}
  .row .fu{
    display:flex; align-items:center; gap:8px; margin-top:6px;
    font-size:10px; letter-spacing:.06em; color:var(--kinari-dim);
    white-space:nowrap; min-width:0; overflow:hidden;
  }
  .row .fu i{flex:0 1 52px; min-width:0; height:2px; background:#2b2822; position:relative; display:block}
  .row .fu i::after{content:""; position:absolute; top:0; bottom:0; left:0; width:var(--w,0); background:var(--shu)}
  .row .fu.full i::after{background:var(--tsuki); width:100%}
  .row .fu b{font-weight:400}
  .row .fu.full b{color:var(--tsuki)}
  .row .fu s{text-decoration:none; color:var(--tsuki); margin-left:auto; white-space:nowrap}

  .note{padding:13px 16px;font-size:11px;line-height:1.95;color:var(--kinari-dim)}
  .note p{margin:0 0 9px} .note p:last-child{margin:0}
  .note b{color:var(--tsuki);font-weight:400}

  table.rec{width:100%;border-collapse:collapse;font-size:12px}
  table.rec th,table.rec td{padding:9px 16px;border-bottom:1px solid var(--line);text-align:left}
  table.rec th{font-weight:400;color:var(--kinari-dim);letter-spacing:.1em;width:52%}
  table.rec td{text-align:right;font-variant-numeric:tabular-nums}

  .signs{display:flex;flex-wrap:wrap;gap:7px;padding:14px 16px 4px}
  .sign{
    border:1px solid var(--line);padding:6px 10px;font-size:11px;letter-spacing:.08em;
    color:#8a8070;border-radius:2px;
  }
  .sign.got{color:var(--tsuki);border-color:#4a3f28;background:#1d1a13}
  .sign i{font-style:normal;color:#948a78;margin-left:7px;font-size:10.5px}
  .note.goal{border-bottom:1px solid var(--line)}
  .sign.now{color:var(--kinari);border-color:#5c3227}
  .gansList .sign{display:flex;flex-direction:column;gap:3px;align-items:flex-start;max-width:100%}
  .gansList .sign i{margin-left:0;white-space:normal;line-height:1.5}
  .gansList .sign.got i{color:#948a78}
  /* 輪廻の確認の中の「願」。立てるのは任意で、既定は「立てない」 */
  .gan{margin:4px 0 14px;border-top:1px solid var(--line);padding-top:10px}
  .gan .ganLead{font-size:11px;color:var(--kinari-dim);line-height:1.9;margin:0 0 8px}
  .ganOpt{
    display:block;width:100%;text-align:left;background:transparent;border:1px solid var(--line);border-radius:2px;
    color:var(--kinari-dim);font-family:inherit;font-size:11.5px;letter-spacing:.06em;padding:8px 10px;margin:0 0 6px;cursor:pointer;
  }
  .ganOpt b{font-weight:400;color:var(--kinari);display:inline-block;margin-right:6px}
  .ganOpt i{font-style:normal;color:var(--tsuki);font-size:10px;margin-right:6px}
  .ganOpt span{display:block;font-size:10px;color:#7c7568;margin-top:3px;line-height:1.6}
  .ganOpt[aria-pressed="true"]{color:var(--tsuki);border-color:#4a3f2a;background:#1c1a15}
  .ganOpt.done{opacity:.6}

  .btnline{padding:14px 16px;display:flex;gap:9px;flex-wrap:wrap}
  .btnline button{
    flex:1;min-width:128px;border:1px solid var(--line);background:var(--sumi2);color:var(--kinari);
    font-family:inherit;font-size:12px;letter-spacing:.14em;padding:12px 8px;cursor:pointer;
  }
  .btnline button:active{background:#26231e}
  .btnline button.warn{color:var(--shu-lite);border-color:#3a2a25}
  #rinne{border-color:#4a3a22;color:var(--tsuki);background:#1d1a13}
  #rinne:disabled{color:#5a544a;border-color:var(--line);background:var(--sumi2);cursor:default}

  /* 共有（D-66）: 文面を先に見せてから渡す。X は intent へのリンク（a）だが見た目はボタンと揃える */
  .shareBox{border-top:1px solid var(--line);padding-top:4px}
  .shareTxt{margin:10px 16px 0;padding:12px 14px;border:1px solid var(--line);background:#14120f;color:var(--kinari);
    font-size:12px;line-height:1.9;letter-spacing:.04em;white-space:pre-wrap;word-break:break-word;min-height:3.8em}
  .shareLine{padding-top:9px}
  .shareLine button,.shareLine a.btn{flex:1 1 auto;min-width:0}
  .shareLine a.btn{
    display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--sumi2);color:var(--kinari);
    font-family:inherit;font-size:12px;letter-spacing:.14em;padding:12px 8px;text-decoration:none;cursor:pointer;box-sizing:border-box;
  }
  .shareLine a.btn:active{background:#26231e}
  .shareLine button.sub{flex:0 0 auto;color:var(--kinari-dim);font-size:11px;letter-spacing:.1em;padding:12px 10px}

  .toast{
    position:fixed;left:50%;bottom:24px;transform:translate(-50%,14px);
    background:#241f19;border:1px solid #3b342b;color:var(--kinari);
    padding:10px 18px;font-size:12px;letter-spacing:.08em;opacity:0;pointer-events:none;
    transition:opacity .25s,transform .25s;z-index:65;max-width:88vw;text-align:center;line-height:1.7;
  }
  .toast.on{opacity:1;transform:translate(-50%,0)}
  .toast b{font-weight:400;color:var(--tsuki)}
  /* 文中の色は class で付ける（配信先の CSP は style 属性を無効化する） */
  .toast .mj{color:var(--shu-lite)}
  .toast .en{color:#9fbfa8}
  .about{text-align:left}
  .about h2{text-align:center}
  .about h3{margin:14px 0 6px;font-size:12px;letter-spacing:.2em;font-weight:400;color:var(--tsuki)}
  .about p,.about li{font-size:12px;line-height:2;color:var(--kinari-dim);margin:0 0 6px}
  .about ol,.about ul{margin:0 0 8px;padding-left:18px}
  .about a{color:var(--tsuki)}
  .rc-koke{color:#7d8c63} .rc-shiro{color:#e8e4d8} .rc-aka{color:#b5533a} .rc-moji{color:#c9b98a}

  .open{
    position:fixed;inset:0;z-index:70;background:var(--sumi);
    display:flex;align-items:center;justify-content:center;
    padding:9vh 26px;text-align:center;transition:opacity .9s ease;
  }
  .open[hidden]{display:none}
  /* 拍のあいだ: 幕は薄く、指は下の河原へ通す。文は上に寄せて塔と重ねない */
  .open.lite{
    background:linear-gradient(180deg,rgba(12,11,10,.78) 0%,rgba(12,11,10,.55) 38%,rgba(12,11,10,0) 62%);
    pointer-events:none;align-items:flex-start;
    padding:calc(11vh + env(safe-area-inset-top,0px)) 26px 0;transition:background .6s ease;
  }
  .open.lite .openIn{pointer-events:none;text-shadow:0 2px 12px #000,0 0 24px rgba(0,0,0,.8);font-size:clamp(13.5px,3.9vw,17px);line-height:1.95}
  .open.lite .openIn p{animation:opIn .9s ease forwards}
  .openIn p small{display:block;font-size:.78em;color:var(--kinari-dim);letter-spacing:.06em;margin-top:.35em}
  .openIn p.dim{opacity:.5}
  @media (orientation:landscape) and (max-height:520px){ .open.lite{padding-top:calc(4vh + env(safe-area-inset-top,0px))} }
  /* 横向きの二段組みでは、文を河原の列（左）の上に置く。右の棚に被せない */
  @media (orientation:landscape) and (min-width:560px){
    .open.lite{padding-right:calc(var(--sheetw,300px) + 26px)}
  }
  @media (orientation:landscape) and (min-width:1240px){ .open.lite{padding-left:calc((100vw - 1150px)/2 + 26px)} }
  /* 導入の拍 3: 見切りのボタンが脈打つ。教えは演出ではないので、演出「なし」でも動く */
  #kuyou.pulse{animation:kuPulse 1.1s ease-in-out infinite;color:var(--tsuki)}
  @keyframes kuPulse{
    0%,100%{box-shadow:inset 0 0 0 1px #5c3227;background:#2b1a15}
    50%{box-shadow:inset 0 0 0 2px var(--tsuki),0 0 18px rgba(242,231,196,.28);background:#3a2419}
  }
  .open.out{opacity:0;pointer-events:none}
  .openIn{max-width:29em;width:100%;font-size:clamp(14.5px,4.1vw,18px);line-height:2.25;color:var(--kinari);letter-spacing:.09em}
  .openIn p{margin:0;opacity:0;animation:opIn 1.6s ease forwards;text-wrap:pretty;text-wrap:balance}
  /* 日本語・中国語は句読点の切れ目でだけ折り返す（語の途中で切れると読みづらい）。
     韓国語は分かち書きがあるので語単位で折り返させる。 */
  .openIn .cl{display:inline-block}
  /* 本文まわりの折り返し。日本語は語句のまとまりで（対応ブラウザのみ・非対応でも実害なし）、
     韓国語は分かち書き単位で。収まらない語だけは従来どおり途中で折る。 */
  :root[lang="ja"] .ds,:root[lang="ja"] .note p,:root[lang="ja"] .lore,
  :root[lang="ja"] .toast,:root[lang="ja"] .card p,:root[lang="ja"] .openIn p{word-break:auto-phrase}
  :root[lang="ko"] .ds,:root[lang="ko"] .note p,:root[lang="ko"] .lore,
  :root[lang="ko"] .toast,:root[lang="ko"] .card p,:root[lang="ko"] .openIn p{
    word-break:keep-all;overflow-wrap:anywhere;
  }
  @keyframes opIn{to{opacity:.90}}
  /* 触らなくても進む行。淡く出て、読み終わるころに淡く消える */
  .openIn p.auto{animation:opThru var(--dwell,5200ms) ease forwards}
  @keyframes opThru{
    0%{opacity:0} 22%{opacity:.90} 84%{opacity:.90} 100%{opacity:0}
  }
  .openIn .langpick{display:flex;flex-direction:column;gap:.7em}
  .openIn .langpick button{
    background:none;border:0;color:var(--kinari);font-family:inherit;font-size:inherit;
    letter-spacing:.09em;line-height:2;padding:.35em 0;cursor:pointer;
    opacity:0;animation:opPick 1.3s ease forwards;
    transition:opacity .3s ease,text-shadow .3s ease;
  }
  @keyframes opPick{to{opacity:.62}}
  .openIn .langpick button:nth-child(1){animation-delay:.15s}
  .openIn .langpick button:nth-child(2){animation-delay:.50s}
  .openIn .langpick button:nth-child(3){animation-delay:.85s}
  .openIn .langpick button:nth-child(4){animation-delay:1.20s}
  .openIn .langpick button:nth-child(5){animation-delay:1.55s}
  .openIn .langpick button:hover,.openIn .langpick button:focus-visible,
  .openIn .langpick button:active{opacity:1;outline:0;text-shadow:0 0 14px rgba(242,231,196,.35)}
  .openGo{
    display:block;margin:2.6em auto 0;min-width:9.5em;
    border:1px solid var(--line);background:#211e19;color:var(--kinari);
    font-family:inherit;font-size:14.5px;letter-spacing:.2em;padding:15px 18px 16px;
    cursor:pointer;opacity:0;animation:opIn 1.6s ease .5s forwards;
  }
  .openGo:active{background:#2e2a23}
  @media (max-width:345px){
    .open{padding:9vh 18px}
    .openIn{font-size:13.5px;line-height:2.1}
  }
  .openSkip,.openBack{
    position:fixed;bottom:14px;z-index:71;background:none;border:0;
    color:var(--kinari);opacity:.45;font-family:inherit;font-size:11.5px;
    letter-spacing:.14em;padding:9px 12px;cursor:pointer;
  }
  .openSkip{right:16px}
  .openBack{left:16px;letter-spacing:.2em}
  .openSkip[hidden],.openBack[hidden]{display:none}
  .openSkip:hover,.openBack:hover{opacity:.85}

  .veil{position:fixed;inset:0;background:rgba(8,7,6,.94);z-index:60;display:none;align-items:center;justify-content:center;padding:20px}
  .veil.on{display:flex}
  .card{max-width:400px;width:100%;max-height:86vh;overflow-y:auto;border:1px solid var(--line);background:var(--sumi2);padding:24px 20px 18px}
  .card h2{margin:0 0 14px;font-size:14.5px;letter-spacing:.28em;font-weight:400;text-align:center}
  .card p{font-size:12px;line-height:2;color:var(--kinari-dim);margin:0 0 14px}
  .card p b{color:var(--tsuki);font-weight:400}
  .card .btnline{padding:0}
  .cfg{padding:2px 0 0}
  .cfg section{border-top:1px solid var(--line);padding:13px 0 12px}
  .cfg section:first-child{border-top:0}
  .cfg h3{margin:0 0 9px;font-size:11.5px;font-weight:400;letter-spacing:.16em;color:var(--kinari-dim)}
  .cfg .note{font-size:10.5px;color:#6f6a5f;line-height:1.7;margin:7px 0 0}
  .cfg .line{display:flex;align-items:center;gap:12px;margin-top:9px}
  .cfg .line:first-of-type{margin-top:0}
  .cfg .line label{flex:0 0 5.2em;font-size:12px;letter-spacing:.06em;color:var(--kinari)}
  .cfg .pick{display:flex;gap:7px;flex-wrap:wrap;flex:1}
  .cfg .pick button{
    border:1px solid var(--line);background:transparent;color:var(--kinari-dim);
    font-family:inherit;font-size:11.5px;letter-spacing:.08em;padding:8px 11px;cursor:pointer;border-radius:2px;
    min-height:32px;
  }
  .cfg .pick button[aria-pressed="true"]{color:var(--tsuki);border-color:#4a3f2a;background:#1c1a15}
  .cfg .pick button.warn{color:var(--shu-lite);border-color:#3a2a25}
  .cfg input[type=range]{
    flex:1;-webkit-appearance:none;appearance:none;background:transparent;height:30px;margin:0;cursor:pointer;
  }
  .cfg input[type=range]::-webkit-slider-runnable-track{height:2px;background:#39342c}
  .cfg input[type=range]::-moz-range-track{height:2px;background:#39342c}
  .cfg input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:15px;height:15px;margin-top:-6.5px;border-radius:1px;
    background:var(--kinari);border:0;
  }
  .cfg input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:1px;background:var(--kinari);border:0}
  .cfg .num{flex:0 0 2.6em;text-align:right;font-size:11px;color:var(--kinari-dim);font-variant-numeric:tabular-nums}
  .cfg textarea{
    width:100%;box-sizing:border-box;height:92px;resize:none;margin-top:9px;
    border:1px solid var(--line);background:#141210;color:var(--kinari);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;line-height:1.5;padding:8px;
    border-radius:2px;word-break:break-all;
  }
  .langlist{display:flex;flex-direction:column;gap:1px;background:var(--line);margin:0 0 14px}
  .langlist button{
    border:0;background:var(--sumi2);color:var(--kinari);font-family:inherit;
    font-size:13px;letter-spacing:.1em;padding:13px 16px;cursor:pointer;text-align:left;
  }
  .langlist button[aria-current="true"]{color:var(--tsuki);background:#221e17}
  .langlist button:active{background:#262320}

  :root[data-ls="narrow"] .title{letter-spacing:.10em}
  :root[data-ls="narrow"] .act button{letter-spacing:.08em}
  :root[data-ls="narrow"] nav button{letter-spacing:.08em}
  :root[data-ls="narrow"] .stat .lbl{letter-spacing:.09em}
  :root[data-ls="narrow"] .card h2{letter-spacing:.12em}
  :root[data-ls="narrow"] .btnline button{letter-spacing:.05em}

  /* 縦向きでは、これまでどおり縦に積む */
  .wrap,.col-l,.col-r{display:contents}

  /* 横向きは二段組み。左に河原、右に地蔵と念。 */
  @media (orientation:landscape) and (min-width:560px){
    #app{max-width:1000px}
    .wrap{display:flex;flex:1 1 auto;min-height:0}
    .col-l{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
    .col-r{display:flex;flex-direction:column;flex:0 0 var(--sheetw,300px);min-height:0;border-left:1px solid var(--line);position:relative}
    .grip{
      position:absolute;left:-8px;top:0;bottom:0;width:16px;height:auto;flex:none;
      border-top:0;cursor:col-resize;z-index:6;
    }
    .grip i{width:2px;height:34px}
    .kawara{min-height:110px}
    .sheet{flex:1 1 auto;height:auto;min-height:0}
    nav button{padding:10px 0 9px}
    /* 右の欄は幅が狭いので、節目の帯は引っ込めて文字を残す */
    .row .fu i{display:none}
    .row .fu{font-size:9.5px;gap:10px}
  }
  @media (orientation:landscape) and (min-width:820px){
    .col-r{flex:0 0 var(--sheetw,340px)}
  }
  /* 画面が大きいほど、河原のほうを広く取る */
  @media (orientation:landscape) and (min-width:1240px){ #app{max-width:1150px} }
  @media (orientation:landscape) and (min-width:1560px){ #app{max-width:1280px} }
  @media (orientation:portrait) and (min-width:760px) and (min-height:900px){ #app{max-width:600px} }
  /* 横持ちで高さが足りないとき、上下の余白から削る */
  @media (orientation:landscape) and (max-height:430px){
    header{padding:calc(7px + env(safe-area-inset-top,0px)) 12px 6px}
    .title{font-size:14px}
    .stat{padding:6px 4px 7px}
    .stat .val{font-size:17px}
    .act button{padding:11px 4px 12px;font-size:13.5px}
  }

  @media (max-height:660px){
    .sheet{flex-basis:var(--sheet,29vh)}
    .act button{padding:12px 4px 13px}
    .stat{padding:7px 4px 8px}
    header{padding:calc(9px + env(safe-area-inset-top,0px)) 14px 7px}
  }
  @media (max-width:365px){
    .kudoku{font-size:9.5px;letter-spacing:0;margin-right:2px}
    .icobtn{padding:4px 5px;font-size:10px;min-width:30px;min-height:30px}
  }
  @media (max-width:380px){
    .stat .val{font-size:16px}
    .act button{font-size:13px;letter-spacing:.12em}
    .title{font-size:14.5px;letter-spacing:.22em}
  }