:root{
  --panel:rgba(250,249,244,.96);--ink:#373B42;--mut:#5d666c;--accent:#A47D64;--line:#D9DDD5;
  --tag:#657679;--choice:rgba(249,248,241,.93);--night:0;
  --pcx:66;--pct:6;--pch:176;--scx:50;--sct:7;--sch:118;
  --gut:max(16px,6.8vw);--bh:240px;
  --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  --serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --latin:"Avenir Next","Avenir","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#F1F0E9;overflow:hidden;overscroll-behavior:none}
/* 画面そのものは動かさない（スマホで指を動かすと画面全体が引っぱられて揺れるため）。スクロールは下の領域・メニュー・LOGの中だけ */
body{position:fixed;inset:0;width:100%}
#stage{touch-action:pinch-zoom}   /* 1本指で画面全体は動かさない。2本指の拡大縮小は残す（万一ずれても戻せるように） */
#bottom,#menup .in,#logl{touch-action:pan-y}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
a{color:inherit}

#stage{position:fixed;inset:0;overflow:hidden;overflow:clip;background:#F1F0E9;opacity:0;transition:opacity .55s ease}
#stage.ready{opacity:1}

/* 背景：ゆっくり光が動く＋マウスで少し奥行き */
#bg{position:absolute;inset:-28px;background:center/cover no-repeat;
  transform:translate3d(calc(var(--mx,0)*-12px),calc(var(--my,0)*-6px),0);transition:transform .8s cubic-bezier(.2,.7,.3,1)}
#bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 45% 55% at 66% 24%,rgba(255,242,213,.32),rgba(255,242,213,0) 70%);
  animation:light 9s ease-in-out infinite alternate}
@keyframes light{from{opacity:.35;transform:translateX(-2%)}to{opacity:1;transform:translateX(2%)}}
#night{position:absolute;inset:0;background:#1b2542;mix-blend-mode:multiply;opacity:var(--night);pointer-events:none}

/* 立ち絵：位置 → 登場 → リアクション → 呼吸 の入れ子 */
#chara{position:absolute;left:calc(var(--pcx)*1%);top:calc(var(--pct)*1dvh);height:calc(var(--pch)*1dvh);aspect-ratio:2/3;
  transform:translate3d(calc(-50% + var(--mx,0)*16px),calc(var(--my,0)*5px),0);transition:transform .8s cubic-bezier(.2,.7,.3,1);pointer-events:none}
#enter,#react,#breath{position:absolute;inset:0}
#enter{opacity:0;transform:translateX(3%)}
#stage.ready #enter{animation:enter .9s .25s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes enter{to{opacity:1;transform:none}}
#breath{transform-origin:50% 100%;animation:breath 4.8s ease-in-out infinite}
@keyframes breath{0%,100%{transform:none}50%{transform:translateY(-.35%) scale(1.004)}}
#react.hop{animation:hop .36s ease-out}
@keyframes hop{0%{transform:none}35%{transform:translateY(-1.1%)}100%{transform:none}}
#react.shake{animation:shake .6s linear}
@keyframes shake{0%,100%{transform:none}12%{transform:translateX(-.9%)}28%{transform:translateX(.8%)}44%{transform:translateX(-.55%)}60%{transform:translateX(.35%)}78%{transform:translateX(-.15%)}}
#react.sink{animation:sink .9s ease-in-out}
@keyframes sink{0%,100%{transform:none}40%{transform:translateY(.9%)}}
.f{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0;opacity:0;transition:opacity .16s linear}
.f.on{opacity:1}
#jig{position:absolute;inset:0;width:100%;height:100%;display:none}
#breath.jig #jig{display:block}
#breath.jig .f{visibility:hidden}
#touch{position:absolute;pointer-events:auto;cursor:pointer;border-radius:40%;-webkit-tap-highlight-color:transparent}
#react.flinch{animation:flinch .5s ease-out}
@keyframes flinch{0%{transform:none}18%{transform:translate(.6%,-.5%) rotate(.4deg)}55%{transform:translate(-.2%,.1%)}100%{transform:none}}
#bubble{position:absolute;z-index:3;max-width:min(300px,70vw);background:var(--panel);border:2px solid rgba(255,255,255,.95);border-radius:16px;
  padding:9px 16px;font-size:15px;line-height:1.6;box-shadow:6px 8px 0 rgba(26,34,39,.1),0 8px 24px rgba(26,34,39,.12);pointer-events:none;
  opacity:0;transform:scale(.8);transform-origin:var(--bo,100% 100%);transition:opacity .15s,transform .15s}
#bubble.show{opacity:1;transform:none;animation:pop .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.7)}100%{transform:none}}

/* 冒頭のひとこと */
#intro{position:absolute;left:var(--gut);top:26dvh;margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(26px,4.6vh,50px);
  line-height:1.6;color:rgba(54,67,69,.92);letter-spacing:.04em;opacity:0;pointer-events:none}
#intro.play{animation:intro 3.6s ease forwards}
@keyframes intro{0%{opacity:0;transform:translateY(8px)}18%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0}}

/* 上の表示 */
#hudL{position:absolute;left:var(--gut);top:max(20px,4.8dvh);background:rgba(249,248,241,.88);border-radius:15px;padding:9px 18px 11px;
  box-shadow:0 6px 20px rgba(26,34,39,.08)}
#hudL .en{font-family:var(--latin);font-size:11px;letter-spacing:.14em;color:#A47D64;font-weight:600}
#hudL .jp{font-size:14px;margin-top:2px;color:#373B42}
#ticks{display:flex;gap:7px;margin-top:9px}
#ticks i{display:block;width:30px;height:3px;border-radius:2px;background:#E4E1D4;transition:background .3s}
#ticks i.on{background:#AD8468}
#hudR{position:absolute;right:var(--gut);top:max(20px,4.8dvh);display:flex;gap:8px;align-items:center;z-index:2}
.pill{background:rgba(50,59,64,.84);color:#F4F3EC;border-radius:99px;padding:8px 18px;font-size:13px;letter-spacing:.02em;border:0;line-height:1.4}
button.pill{cursor:pointer;font-family:var(--sans)}
button.pill:hover{background:rgba(50,59,64,.95)}

/* 下：選択肢・資料・会話ウィンドウ・注記 */
/* 下の領域（選択肢・作品・セリフ）は、上の表示（条件・メニュー）の下までに収める。はみ出したら指でスクロールできる
   （画面の下にくっつけたまま上へ伸ばすと、はみ出した上の部分に手が届かず詰まるため） */
#bottom{position:absolute;left:0;right:0;bottom:var(--kb,0px);top:calc(max(20px,4.8dvh) + 66px);display:flex;flex-direction:column;pointer-events:none;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#bottom::-webkit-scrollbar{display:none}
#bottom::before{content:"";flex:1 0 0}
#bottom>*{pointer-events:auto}

#choices{display:none;flex-direction:column;gap:9px;width:min(460px,36vw);margin:0 0 18px var(--gut)}
#choices.show{display:flex}
#stage.has-doc #choices{margin-left:auto;margin-right:var(--gut)}
#choices.grid{grid-template-columns:repeat(3,1fr);width:min(560px,44vw)}
#choices.grid.show{display:grid}
.ch{display:block;width:100%;text-align:left;border:1px solid rgba(255,255,255,.9);background:var(--choice);border-radius:12px;
  padding:13px 18px;font-size:16px;cursor:pointer;box-shadow:0 8px 22px rgba(26,34,39,.1);position:relative;
  opacity:0;transform:translateY(8px);animation:up .35s ease forwards;transition:background .15s}
.ch:hover{background:var(--panel)}
.ch:hover::before,.ch.main::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--accent)}
.ch.main{font-weight:600}
.ch.sub{color:var(--ink);opacity:.82;font-size:14px;padding:10px 16px}
.grid .ch{text-align:center;padding:11px 8px;font-size:15px}
@keyframes up{to{opacity:1;transform:none}}
form.ch{display:flex;gap:8px;padding:7px 7px 7px 16px;cursor:default}
form.ch:hover::before{display:none}
form.ch input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:16px;color:var(--ink)}
#ask{display:flex;gap:8px;margin:0 var(--gut) 12px;padding:6px 6px 6px 16px;background:var(--panel);border:2px solid rgba(255,255,255,.95);border-radius:14px;box-shadow:0 6px 18px rgba(26,34,39,.12)}
#ask[hidden]{display:none}
#ask input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:inherit;font-size:16px;color:var(--ink)}
#ask input::placeholder{color:var(--mut)}
#ask button{flex:none;border:0;border-radius:10px;background:var(--tag);color:#fff;padding:9px 18px;font-size:15px;font-weight:600;cursor:pointer}
html.kbd footer{display:none}
a.pill{text-decoration:none;display:inline-block}
form.ch input::placeholder{color:var(--mut)}
form.ch button{border:0;border-radius:9px;background:var(--tag);color:#fff;padding:9px 18px;font-size:14px;cursor:pointer}

/* 渡す資料（作品） */
#doc{position:fixed;left:var(--gut);top:calc(max(20px,4.8dvh) + 86px);width:min(480px,36vw);
  max-height:calc(100dvh - var(--bh) - max(20px,4.8dvh) - 104px);display:none;flex-direction:column;
  background:var(--panel);border-radius:16px;box-shadow:12px 14px 34px rgba(26,34,39,.18);overflow:hidden;border:2px solid rgba(255,255,255,.95)}
#doc.show{display:flex}
#doc.in{animation:docin .45s cubic-bezier(.2,.7,.3,1)}
@keyframes docin{from{opacity:0;transform:translateX(-26px) rotate(-1.6deg)}to{opacity:1;transform:none}}
#doc .cover{flex:0 1 auto;min-height:90px;background:#E9E6DD;display:flex;justify-content:center;overflow:hidden;position:relative}
#doc .cover img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:contain}
#doc .no{position:absolute;left:10px;top:10px;background:rgba(50,59,64,.84);color:#fff;font-family:var(--latin);font-size:12px;border-radius:99px;padding:3px 10px;letter-spacing:.06em}
#doc .info{padding:12px 16px 14px;flex:none;position:relative}
#doc .ttl{font-weight:600;font-size:16px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#doc .meta{font-size:12.5px;color:var(--mut);margin-top:4px}
#doc .off{color:#c0533f;font-weight:600}
#doc .btns{display:flex;gap:8px;margin-top:10px;align-items:center}
#doc .btns a{text-decoration:none;font-size:13.5px;border-radius:99px;padding:8px 14px;white-space:nowrap}
#doc .b2{border:1px solid var(--line);background:var(--choice)}
#doc .b1{background:var(--tag);color:#fff}
#doc .pr{font-size:10px;border:1px solid rgba(255,255,255,.75);border-radius:3px;padding:0 3px;margin-left:5px;vertical-align:1px}
#doc .nav{margin-left:auto;display:flex;gap:4px}
#doc .nav button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--choice);cursor:pointer;font-size:15px;line-height:1}
#doc .nav button:disabled{opacity:.3;cursor:default}

#box{position:relative;margin:0 var(--gut) 16px;background:var(--panel);border:2px solid rgba(255,255,255,.95);border-radius:22px;
  box-shadow:12px 13px 0 rgba(26,34,39,.1),0 10px 30px rgba(26,34,39,.1);padding:clamp(22px,3.4vh,34px) clamp(20px,3.4vw,64px) 44px;
  min-height:clamp(132px,21dvh,236px);cursor:pointer;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s}
#box.show{opacity:1;transform:none}
#name{position:absolute;left:clamp(16px,1.9vw,32px);top:-21px;background:var(--tag);color:#fff;border-radius:13px;padding:7px 26px;font-size:clamp(14px,2vh,18px);letter-spacing:.06em;transition:opacity .2s}
#box.narr #name{opacity:0}
#txt{margin:0;font-size:clamp(15px,min(2.5vh,4.3vw),25px);line-height:1.75;white-space:pre-wrap;min-height:3.5em}
#box.narr #txt{color:var(--mut);font-size:clamp(13px,min(2vh,3.7vw),18px)}
#rule{position:absolute;left:clamp(20px,3.4vw,64px);right:clamp(210px,14vw,240px);bottom:22px;height:2px;background:var(--line);overflow:hidden;border-radius:1px}
#bar{height:100%;width:0;background:#B89B80}
#ctl{position:absolute;right:clamp(14px,2vw,28px);bottom:11px;display:flex;align-items:center;gap:14px;font-family:var(--latin);font-size:12px;letter-spacing:.08em;color:var(--mut)}
#ctl button{border:0;background:none;padding:4px;cursor:pointer;color:var(--mut);font-family:var(--latin);font-size:12px;letter-spacing:.08em}
#next{display:flex;align-items:center;gap:6px;opacity:0;transition:opacity .2s}
#next b{width:0;height:0;border-left:10px solid #A98970;border-top:6px solid transparent;border-bottom:6px solid transparent;animation:blink 1s steps(2) infinite}
#box.wait #next{opacity:1}
@keyframes blink{50%{opacity:.25}}

footer{position:sticky;bottom:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:16px;background:rgba(44,55,60,.87);color:#ECEEE8;padding:8px var(--gut);font-size:11px;line-height:1.5}
footer b{font-weight:600;letter-spacing:.06em;white-space:nowrap}

/* 会話を隠す */
#hudL,#hudR,#bottom,#intro{transition:opacity .25s}
#stage.hideui #hudL,#stage.hideui #hudR,#stage.hideui #bottom{opacity:0;pointer-events:none}
#stage.hideui #bottom>*{pointer-events:none}
#showb{position:absolute;right:var(--gut);bottom:max(16px,2.4dvh);z-index:4;border:1px solid rgba(255,255,255,.9);background:rgba(50,59,64,.78);color:#F4F3EC;
  border-radius:99px;padding:9px 18px;font-size:13px;cursor:pointer;display:none;box-shadow:0 6px 18px rgba(26,34,39,.18)}
#stage.hideui #showb{display:block;animation:up .3s ease forwards}

/* サイト内メニュー */
#menup{position:absolute;inset:0;background:rgba(30,36,40,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;z-index:6}
#menup.show{display:block}
#menup .in{position:absolute;top:max(20px,4dvh);right:var(--gut);width:min(420px,calc(100% - 2*var(--gut)));max-height:calc(100% - 2*max(20px,4dvh));overflow:auto;background:var(--panel);border-radius:18px;padding:16px 18px 18px}
#menup .hd{display:flex;justify-content:space-between;align-items:center;font-family:var(--latin);letter-spacing:.12em;font-size:13px;color:var(--accent);margin-bottom:12px}
#menup .hd button{border:1px solid var(--line);background:var(--choice);border-radius:99px;padding:6px 16px;cursor:pointer;font-family:var(--sans);letter-spacing:0}
#menup nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#menup nav a{display:block;text-decoration:none;background:var(--choice);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px}
#menup nav a:hover{background:#fff}
#menup form{display:flex;gap:8px;margin:12px 0}
#menup form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:#fff;font-size:15px}
#menup form button{border:0;border-radius:10px;background:var(--tag);color:#fff;padding:9px 16px;cursor:pointer}
#menup .sub{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:14px;font-size:12px;color:var(--mut)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 年齢確認（サイト共通。承認は localStorage の age_ok） */
#gate{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(236,236,230,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html.age-ok #gate{display:none}
#gate .box{max-width:440px;background:#fbfaf6;border-radius:20px;padding:26px 24px;box-shadow:12px 13px 0 rgba(26,34,39,.1),0 10px 30px rgba(26,34,39,.12);text-align:center;color:#373B42}
#gate h2{margin:0 0 10px;font-size:20px}
#gate p{font-size:14px;line-height:1.7;margin:8px 0}
#gate .btns{display:flex;gap:10px;justify-content:center;margin:16px 0 6px}
#gate .btns button,#gate .btns a{border:0;border-radius:12px;padding:12px 18px;font-size:15px;cursor:pointer;text-decoration:none}
#gate .yes{background:#657679;color:#fff}
#gate .no{background:#e6e4dc;color:#373B42}
#gate .note{font-size:11.5px;color:#778087}

/* 履歴 */
#logp{position:absolute;inset:0;background:rgba(30,36,40,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;z-index:5}
#logp.show{display:block}
#logp .in{position:absolute;inset:max(20px,4dvh) var(--gut);background:var(--panel);border-radius:18px;display:flex;flex-direction:column;overflow:hidden}
#logp .hd{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line);font-family:var(--latin);letter-spacing:.12em;font-size:13px;color:var(--accent)}
#logp .hd button{border:1px solid var(--line);background:var(--choice);border-radius:99px;padding:6px 16px;cursor:pointer;font-family:var(--sans);letter-spacing:0}
#logl{overflow:auto;padding:10px 22px 22px;font-size:15px;line-height:1.7}
#logl .l{padding:7px 0;border-bottom:1px dashed var(--line)}
#logl .w{color:var(--mut);font-size:12px;display:block}
#logl .me{color:var(--accent)}
#logl .wk{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line)}
#logl .wk img{width:96px;flex:none;aspect-ratio:4/3;object-fit:contain;background:#E9E6DD;border-radius:6px}
#logl .wk a{font-size:12.5px;margin-right:10px}

/* 縦長の画面（スマホ） */
@media (max-aspect-ratio:1/1){
  :root{--gut:10px}
  #chara{left:calc(var(--scx)*1%);top:calc(var(--sct)*1dvh);height:calc(var(--sch)*1dvh)}
  #hudL{top:10px;padding:7px 12px 8px;border-radius:12px}
  #hudL .jp{font-size:12px}
  #ticks i{width:22px}
  #hudR{top:10px}
  #bottom{top:62px}
  .pill{padding:6px 12px;font-size:11.5px}
  #dated{display:none}
  #intro{top:14dvh;font-size:clamp(24px,7vw,34px)}
  #choices,#stage.has-doc #choices,#choices.grid{width:auto;margin:0 var(--gut) 30px}
  #choices.show{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  #choices .ch.main,#choices form.ch,#choices .ch.wide{grid-column:1/-1}
  .ch{padding:10px 8px;font-size:13px;text-align:center;line-height:1.35;display:flex;align-items:center;justify-content:center}
  .ch.main{font-size:14.5px}
  form.ch{justify-content:stretch}
  form.ch input{font-size:16px}
  #ask{margin-bottom:8px}
  .grid .ch{font-size:13.5px;padding:10px 4px}
  #doc{position:relative;left:auto;top:auto;width:auto;max-height:none;margin:0 var(--gut) 30px;flex-direction:row;border-radius:14px;overflow:visible}
  #doc .cover{width:44%;flex:none;min-height:0;align-items:center;border-radius:12px 0 0 12px}
  #doc .cover img{height:auto}
  #doc .info{flex:1;min-width:0;padding:9px 11px 10px;position:static}
  #doc .ttl{font-size:13.5px}
  #doc .meta{font-size:11px}
  #doc .btns{flex-wrap:wrap;gap:6px;margin-top:7px}
  #doc .btns a{font-size:12px;padding:6px 10px}
  #doc .nav{position:absolute;right:6px;top:-40px}
  #doc .nav button{width:32px;height:32px;box-shadow:0 4px 12px rgba(26,34,39,.15)}
  #doc .no{font-size:10.5px;left:6px;top:6px;padding:2px 8px}
  #box{margin-bottom:10px;padding:22px 18px 40px;border-radius:18px;min-height:128px}
  #rule{left:18px;right:180px;bottom:20px}
  footer{font-size:9.5px;padding:6px 10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.nojs{padding:24px;line-height:1.8}
.nojs a{margin-right:12px}

/* 相談パネル（値段のバー・ページ数・ジャンル・評価） */
.ch.pane{cursor:default;padding:14px 18px 14px;text-align:left;display:block}
.ch.pane:hover{background:var(--choice)}
.ch.pane:hover::before{display:none}
.pane .ph{font-size:12.5px;letter-spacing:.12em;color:var(--accent);font-weight:700}
.pane .big{font-size:22px;font-weight:600;margin:4px 0 2px;letter-spacing:.02em}
.dual{position:relative;height:34px;margin:6px 6px 4px}
.dual .track{position:absolute;left:0;right:0;top:15px;height:4px;border-radius:2px;background:var(--line)}
.dual .track i{position:absolute;top:0;bottom:0;left:0;right:0;background:var(--accent);border-radius:2px}
.dual input{position:absolute;left:-6px;right:-6px;top:5px;width:calc(100% + 12px);height:24px;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
.dual input::-webkit-slider-runnable-track{height:24px;background:transparent}
.dual input::-moz-range-track{background:transparent}
.dual input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 8px rgba(26,34,39,.22);cursor:grab}
.dual input::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 8px rgba(26,34,39,.22);cursor:grab}
.dual input:focus-visible::-webkit-slider-thumb{outline:3px solid rgba(164,125,100,.35)}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.presets button,.gsel button{border:1px solid var(--line);background:var(--choice);color:var(--ink);border-radius:99px;padding:7px 12px;font-size:13.5px;font-weight:600;cursor:pointer}
.presets button.on,.gsel button.on{background:var(--tag);border-color:var(--tag);color:#fff}
.pane .tg{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink);margin:6px 0 2px;cursor:pointer}
.pane .tg input{width:17px;height:17px;accent-color:var(--tag)}
.gsel{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0 4px}
.gsel button{border-radius:10px;padding:8px 4px}
.opts{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.opts button{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);background:var(--choice);color:var(--ink);font-weight:600;border-radius:10px;padding:11px 14px;font-size:14.5px;cursor:pointer;text-align:left}
.opts button:hover{background:var(--panel);border-color:var(--accent)}
.opts span{font-size:12.5px;color:var(--mut);font-weight:600;white-space:nowrap}
.pane .cnt{font-size:13.5px;color:var(--ink);margin:8px 0 8px}
.pane .cnt b{font-size:18px;color:var(--ink);margin:0 2px}
.pane .cnt.zero b{color:#c0533f}
.pane .row{display:flex;gap:8px}
.pane .row button{border:0;border-radius:10px;padding:10px 16px;font-size:14px;cursor:pointer}
.pane .row .ok{background:var(--tag);color:#fff;flex:1}
.pane .row .ok:disabled{opacity:.4;cursor:default}
.pane .row .skip{background:rgba(127,127,127,.16);color:var(--ink);font-weight:600}
#choices .ch.pane{grid-column:1/-1}
#choices:has(.pane){width:min(520px,40vw)}
@media (max-aspect-ratio:1/1){
  #choices:has(.pane){width:auto}
  .ch.pane{padding:12px 14px;text-align:left;display:block}
  .pane .big{font-size:19px}
  .gsel{grid-template-columns:repeat(3,1fr)}
  .gsel button{font-size:12.5px;padding:8px 2px}
}
#hudL .jp{max-width:min(46vw,440px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#doc [hidden]{display:none!important}
#doc.offer .cover{display:none}
#doc .note{font-size:11px;color:var(--mut);margin-top:6px;line-height:1.55}
#doc.offer .ttl{-webkit-line-clamp:3}
#doc.offer .meta{font-size:13px;color:var(--ink);line-height:1.6}
#doc.offer .nav{display:none}