/* ══════════════════════════════════════════════
   RP練習部屋／テーマのはがし
   ── SWELLは .post_content h2 のような書き方で記事本文の
      見出し・リスト・引用などに独自の飾りを付ける。
      その詳細度がこのアプリの .nr-h2 などより高いため、
      赤い帯や下線がアプリの見出しに乗ってしまう。
      この中（#nr-root）だけ、テーマの飾りを外して素に戻す。
      以降のアプリ本体のCSSも #nr-root 付きにしてあるので、
      ここで消したものはアプリ側の指定でちゃんと復活する。
   ══════════════════════════════════════════════ */

#nr-root h1, #nr-root h2, #nr-root h3,
#nr-root h4, #nr-root h5, #nr-root h6{
  /* テーマ側が !important で飾っている場合にも負けないようにする。
     アプリ側は見出しに背景・枠・余白を一切使っていないので、
     ここを強く消しても失うものはない */
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0;
  color:inherit;
  font-size:inherit;
  text-align:inherit;
  /* font-weight と line-height は指定しない。
     ここで固定すると、アプリ側が太さを指定していない見出し
     （立場の見出しなど）が細くなり、行間も変わってしまう */
  counter-increment:none;
  box-shadow:none;
}
/* テーマが疑似要素で足している帯・番号・アイコンを消す。
   アプリは見出しに疑似要素を使っていないので、全部消して問題ない */
#nr-root h1::before, #nr-root h1::after,
#nr-root h2::before, #nr-root h2::after,
#nr-root h3::before, #nr-root h3::after,
#nr-root h4::before, #nr-root h4::after,
#nr-root h5::before, #nr-root h5::after,
#nr-root h6::before, #nr-root h6::after{
  content:none !important;
  display:none !important;
}

/* 本文まわりの飾りも同様に外す */
#nr-root p, #nr-root ul, #nr-root ol, #nr-root li,
#nr-root dl, #nr-root dt, #nr-root dd,
#nr-root blockquote, #nr-root figure, #nr-root hr{
  background:none;
  border:0;
  padding:0;
  margin:0;
  color:inherit;
  font-size:inherit;
  list-style:none;
  quotes:none;
}
#nr-root blockquote::before, #nr-root blockquote::after,
#nr-root li::marker{
  content:none;
}
#nr-root a{
  background:none;
  border:0;
  text-decoration:none;
  color:inherit;
}

/* フォーム部品。SWELLは入力欄やボタンにも独自の見た目を付ける */
#nr-root button, #nr-root input, #nr-root textarea, #nr-root select{
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
  border-radius:0;
  box-shadow:none;
  text-shadow:none;
}
#nr-root button::before, #nr-root button::after{
  content:none;
  display:none;
}

/* 記事本文の左右余白や最大幅が二重にかからないように */
#nr-root > *{
  max-width:none;
}

#nr-root{
  --ink:#12101A;
  --ink-2:#191624;
  --paper:#EFE9DE;
  --paper-dim:#A79FB3;
  --line:rgba(239,233,222,.15);
  --line-2:rgba(239,233,222,.07);
  --surface:rgba(239,233,222,.05);
  --field:#221E2E;
  --veil:rgba(18,16,26,.94);
  --fade:rgba(18,16,26,0);
  --shadow:rgba(0,0,0,.85);
  --accent:#D9A85E;
  --accent-dim:rgba(217,168,94,.18);
  --on-accent:#17131F;
  --r:10px;
  --r-lg:16px;
  --serif:"Noto Serif JP","Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;
  --sans:"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  background:var(--ink);
  background-image:radial-gradient(135% 52% at 50% -6%, var(--accent-dim), var(--fade) 62%);
  color:var(--paper);
  /* iOSが「読みやすくするため」に文字を勝手に太らせるのを止める。
     指定した大きさのまま出したい */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-family:var(--sans);
  line-height:1.7;
  min-height:100vh;
  transition:background-color .35s,color .35s;
}
/* シリアス側。舞台ごとに地の色が変わる */
#nr-root[data-world="tantei"] {--accent:#D9A85E;--accent-dim:rgba(217,168,94,.18);}
#nr-root[data-world="keiji"]  {--accent:#8FA2B8;--accent-dim:rgba(143,162,184,.18);}
#nr-root[data-world="ura"]    {--accent:#B07E86;--accent-dim:rgba(176,126,134,.18);}
#nr-root[data-world="kaii"]   {--accent:#93AEB8;--accent-dim:rgba(147,174,184,.18);}
#nr-root[data-world="jingai"] {--accent:#A695C4;--accent-dim:rgba(166,149,196,.18);}
#nr-root[data-world="majutsu"]{--accent:#7FB2A8;--accent-dim:rgba(127,178,168,.18);}
#nr-root[data-world="oukyu"]  {--accent:#C25E52;--accent-dim:rgba(194,94,82,.18);}
#nr-root[data-world="cake"]   {--accent:#C4677E;--accent-dim:rgba(196,103,126,.18);}
#nr-root[data-world="domsub"] {--accent:#8E7BC8;--accent-dim:rgba(142,123,200,.20);}
#nr-root[data-world="concafe"]{--accent:#D97BA4;--accent-dim:rgba(217,123,164,.18);}

/* コミカル側。紙のように明るい */
#nr-root[data-tone="light"]{
  --ink:#F7F3EB;
  --ink-2:#FFFDF8;
  --paper:#2C2632;
  --paper-dim:#7C7386;
  --line:rgba(44,38,50,.18);
  --line-2:rgba(44,38,50,.09);
  --surface:rgba(44,38,50,.035);
  --field:#FFFFFF;
  --veil:rgba(247,243,235,.94);
  --fade:rgba(247,243,235,0);
  --shadow:rgba(90,70,45,.28);
  --on-accent:#FFFBF4;
}
#nr-root[data-tone="light"][data-world="cafe"]    {--accent:#A9702E;--accent-dim:rgba(169,112,46,.14);}
#nr-root[data-tone="light"][data-world="concafe"] {--accent:#C25C86;--accent-dim:rgba(194,92,134,.14);}
#nr-root[data-tone="light"][data-world="bar"]     {--accent:#9C5C3E;--accent-dim:rgba(156,92,62,.14);}
#nr-root[data-tone="light"][data-world="chat"]    {--accent:#4A6DA6;--accent-dim:rgba(74,109,166,.14);}
#nr-root[data-tone="light"][data-world="gakuen"]  {--accent:#B0546B;--accent-dim:rgba(176,84,107,.14);}
#nr-root[data-tone="light"][data-world="nichijou"]{--accent:#6B7733;--accent-dim:rgba(107,119,51,.14);}
#nr-root[data-tone="light"][data-world="gotsugo"] {--accent:#4E7A5E;--accent-dim:rgba(78,122,94,.14);}
#nr-root[data-tone="light"][data-world="tensei"]  {--accent:#7159A6;--accent-dim:rgba(113,89,166,.14);}

#nr-root *{box-sizing:border-box;}
#nr-root button{font-family:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color .15s,background .15s,color .15s;}
#nr-root button:active{transform:translateY(1px);}
#nr-root :focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

#nr-root .nr-wrap{max-width:41rem;margin:0 auto;padding:2.25rem 1.1rem 5rem;}
/* 入口は下に余りを作らない。そのぶん下に貼りつくボタンが何も隠さない */
#nr-root #nr-setup{padding-bottom:.75rem;}

/* ── 見出し ───────────────────────── */
#nr-root .nr-head{margin-bottom:1.25rem;}
#nr-root .nr-title{font-family:var(--serif);font-size:1.45rem;font-weight:400;letter-spacing:.2em;margin:0 0 .3rem;}
#nr-root .nr-sub{font-family:var(--sans);font-size:.64rem;letter-spacing:.24em;color:var(--accent);margin:0 0 .5rem;}
#nr-root .nr-lead{color:var(--paper-dim);font-size:.8rem;line-height:1.85;margin:0;}
#nr-root .nr-lead + .nr-lead{margin-top:.5rem;}
#nr-root .nr-lead b{color:var(--paper);font-weight:400;}

/* ── この部屋について（たたんである） ── */
#nr-root .nr-about{margin-top:.85rem;border:1px dashed var(--line);border-radius:var(--r);
  background:var(--surface);}
#nr-root .nr-about > summary{list-style:none;cursor:pointer;padding:.55rem .85rem;
  font-family:var(--sans);font-size:.7rem;letter-spacing:.08em;color:var(--paper-dim);
  display:flex;align-items:center;gap:.5rem;}
#nr-root .nr-about > summary::-webkit-details-marker{display:none;}
#nr-root .nr-about > summary::after{content:"＋";margin-left:auto;color:var(--accent);font-size:.85rem;}
#nr-root .nr-about[open] > summary::after{content:"−";}
#nr-root .nr-about[open] > summary{color:var(--paper);border-bottom:1px dashed var(--line);}
#nr-root .nr-aboutin{padding:.7rem .85rem .2rem;}
#nr-root .nr-aboutin dl{margin:0;}
#nr-root .nr-aboutin dt{font-family:var(--sans);font-size:.64rem;letter-spacing:.16em;
  color:var(--accent);margin:0 0 .2rem;}
#nr-root .nr-aboutin dd{margin:0 0 .8rem;font-size:.74rem;line-height:1.8;color:var(--paper-dim);}
#nr-root .nr-aboutin dd:last-child{margin-bottom:.7rem;}

#nr-root .nr-lean .nr-sub,#nr-root .nr-lean .nr-lead,#nr-root .nr-lean .nr-about{display:none;}
#nr-root .nr-lean .nr-head{margin-bottom:.9rem;}
#nr-root .nr-lean .nr-title{font-size:1.12rem;letter-spacing:.16em;margin:0;}

/* ── 順番 ───────────────────────── */
#nr-root .nr-stepnow{font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;
  color:var(--accent);margin:0 0 .5rem;}
#nr-root .nr-steps{display:flex;list-style:none;margin:0 0 1.4rem;padding:0;}
#nr-root .nr-steps li{flex:1;position:relative;}
#nr-root .nr-steps li + li::before{content:"";position:absolute;left:-50%;right:50%;top:.68rem;
  height:2px;background:var(--line);}
#nr-root .nr-steps li.on::before,#nr-root .nr-steps li.done::before{background:var(--accent);}
#nr-root .nr-steps button{position:relative;z-index:1;width:100%;background:none;border:none;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;}
#nr-root .nr-dot{width:1.45rem;height:1.45rem;border-radius:999px;border:1.5px solid var(--line);
  background:var(--ink);color:var(--paper-dim);font-family:var(--sans);font-size:.7rem;
  display:flex;align-items:center;justify-content:center;line-height:1;}
#nr-root .nr-slab{font-family:var(--sans);font-size:.64rem;letter-spacing:.12em;color:var(--paper-dim);}
#nr-root .nr-steps li.done .nr-dot{border-color:var(--accent);color:var(--accent);}
#nr-root .nr-steps li.done .nr-slab{color:var(--paper);}
#nr-root .nr-steps li.on .nr-dot{border-color:var(--accent);background:var(--accent);color:var(--on-accent);}
#nr-root .nr-steps li.on .nr-slab{color:var(--paper);}
#nr-root .nr-steps li.off .nr-dot,#nr-root .nr-steps li.off .nr-slab{opacity:.55;}
#nr-root .nr-steps li.off button{cursor:default;}

#nr-root .nr-pane{animation:nr-in .2s ease-out;}
@keyframes nr-in{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
#nr-root .nr-h2{font-family:var(--serif);font-size:1.02rem;font-weight:400;letter-spacing:.1em;margin:0 0 .2rem;}
#nr-root .nr-h2note{font-size:.72rem;color:var(--paper-dim);margin:0 0 1rem;}

/* ── トーン ───────────────────────── */
#nr-root .nr-tone{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:1rem;}
#nr-root .nr-tier{display:inline-flex;gap:.15rem;padding:.2rem;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);}
#nr-root .nr-tier button{background:none;border:none;border-radius:999px;padding:.34rem 1rem;
  font-size:.78rem;letter-spacing:.1em;color:var(--paper-dim);}
#nr-root .nr-tier button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);}
#nr-root .nr-tiernote{flex:1;min-width:9rem;font-family:var(--sans);font-size:.68rem;color:var(--paper-dim);
  margin:0;letter-spacing:.03em;line-height:1.6;}

/* ── 舞台えらび ───────────────────── */
#nr-root .nr-worlds{display:grid;gap:.45rem;grid-template-columns:repeat(2,1fr);}
@media(min-width:34rem){#nr-root .nr-worlds{grid-template-columns:repeat(3,1fr);}}
#nr-root .nr-world{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:.75rem .7rem;text-align:left;}
#nr-root .nr-ico{display:block;color:var(--accent);}
#nr-root .nr-ico svg{display:block;width:26px;height:26px;}
#nr-root .nr-world b{display:block;font-family:var(--serif);font-size:.95rem;font-weight:400;letter-spacing:.04em;}
#nr-root .nr-wnote{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.64rem;color:var(--paper-dim);line-height:1.5;}
#nr-root .nr-wwarn{display:block;font-family:var(--sans);font-size:.6rem;line-height:1.5;
  color:var(--paper-dim);border-top:1px dotted var(--line);margin-top:.15rem;padding-top:.25rem;}
#nr-root .nr-world:hover{border-color:var(--accent);}
#nr-root .nr-world[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-dim);}

/* おまかせは小さく、下に */
#nr-root .nr-omakase{display:block;width:100%;margin-top:1.1rem;background:none;
  border:1px dashed var(--line);border-radius:999px;padding:.55rem;
  font-size:.76rem;letter-spacing:.08em;color:var(--paper-dim);}
#nr-root .nr-omakase:hover{border-color:var(--accent);color:var(--paper);}

/* ── パンくず ─────────────────────── */
#nr-root .nr-crumb{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  font-size:.72rem;color:var(--paper-dim);margin:0 0 .9rem;}
#nr-root .nr-crumb b{font-family:var(--serif);font-size:.86rem;font-weight:400;color:var(--paper);}
#nr-root .nr-crumb button{background:none;border:none;border-bottom:1px solid var(--line);
  border-radius:0;padding:0;font-size:.68rem;color:var(--paper-dim);}
#nr-root .nr-crumb button:hover{border-color:var(--accent);color:var(--paper);}

/* ── 選ばれているもの ─────────────── */
#nr-root .nr-picked{border:1px solid var(--accent-dim);background:var(--accent-dim);
  border-radius:var(--r);padding:.7rem .85rem;}
#nr-root .nr-picked b{display:block;font-family:var(--serif);font-size:1.1rem;font-weight:400;letter-spacing:.05em;}
#nr-root .nr-picked span{display:block;font-size:.72rem;color:var(--paper-dim);line-height:1.6;margin-top:.1rem;}

#nr-root .nr-recos{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.7rem;}
#nr-root .nr-toi{margin-top:1.4rem;padding-top:1.1rem;border-top:1px dashed var(--line);}
#nr-root .nr-toinote{font-size:.72rem;color:var(--paper-dim);margin:0;line-height:1.7;}
#nr-root .nr-saikai{margin-top:1rem;padding:.9rem .95rem .3rem;border:1px solid var(--accent-dim);
  border-radius:var(--r);background:var(--surface);animation:nr-in .2s ease-out;}
#nr-root .nr-saikai .nr-step{margin-bottom:.9rem;}
#nr-root .nr-saikai .nr-clubnote{margin:.4rem 0 0;}
#nr-root .nr-time[disabled]{opacity:.35;cursor:not-allowed;}
#nr-root .nr-reco{background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:.35rem .85rem;font-family:var(--serif);font-size:.82rem;}
#nr-root .nr-reco:hover{border-color:var(--accent);}
#nr-root .nr-reco[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-dim);}

#nr-root .nr-pickrow{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.6rem;}
#nr-root .nr-pickrow button{background:none;border:1px solid var(--line);border-radius:999px;
  padding:.28rem .8rem;font-size:.7rem;color:var(--paper-dim);}
#nr-root .nr-pickrow button:hover{border-color:var(--accent);color:var(--paper);}
#nr-root .nr-pickrow button[aria-expanded="true"],
#nr-root .nr-pickrow button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-dim);color:var(--paper);}

#nr-root .nr-bonds,#nr-root .nr-spices,#nr-root .nr-sside,#nr-root .nr-morebox,#nr-root .nr-spicebox{animation:nr-in .18s ease-out;}
#nr-root .nr-bonds{display:grid;gap:.35rem;grid-template-columns:repeat(2,1fr);margin-top:.6rem;}
@media(min-width:34rem){#nr-root .nr-bonds{grid-template-columns:repeat(3,1fr);}}
#nr-root .nr-bond{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:.5rem .6rem;text-align:left;font-family:var(--serif);font-size:.88rem;}
#nr-root .nr-bond small{display:block;font-family:var(--sans);font-size:.64rem;color:var(--paper-dim);margin-top:.1rem;}
#nr-root .nr-bond:hover{border-color:var(--accent);}
#nr-root .nr-bond[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-dim);}

/* ── 束ねた設定 ───────────────────── */
#nr-root .nr-sheet{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-2);overflow:hidden;}
#nr-root .nr-row{padding:.8rem .95rem;border-top:1px solid var(--line-2);}
#nr-root .nr-row:first-child{border-top:none;}
#nr-root .nr-rowhead{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem;}
#nr-root .nr-tag{font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;color:var(--paper-dim);white-space:nowrap;}
#nr-root .nr-rowhead .nr-pickrow{margin-left:auto;margin-top:0;}

/* 隠し味は、足したい人だけ */
#nr-root .nr-spicetog{background:none;border:1px dashed var(--line);border-radius:999px;
  padding:.3rem .85rem;font-size:.72rem;color:var(--paper-dim);}
#nr-root .nr-spicetog:hover{border-color:var(--accent);color:var(--paper);}
#nr-root .nr-spicetog[aria-pressed="true"]{border-style:solid;border-color:var(--accent);color:var(--paper);}
#nr-root .nr-spicebox{margin-top:.6rem;}

/* ── こまかく決める ───────────────── */
#nr-root .nr-more{margin-top:.9rem;}
#nr-root .nr-moretog{width:100%;display:flex;align-items:baseline;gap:.6rem;background:none;
  border:1px dashed var(--line);border-radius:var(--r);padding:.6rem .9rem;
  font-family:var(--serif);font-size:.86rem;letter-spacing:.1em;color:var(--paper-dim);}
#nr-root .nr-moretog small{font-family:var(--sans);font-size:.64rem;letter-spacing:.02em;opacity:.85;}
#nr-root .nr-moretog::after{content:"＋";margin-left:auto;color:var(--accent);font-size:.9rem;}
#nr-root .nr-moretog[aria-expanded="true"]{border-style:solid;border-color:var(--accent-dim);color:var(--paper);
  border-bottom-left-radius:0;border-bottom-right-radius:0;}
#nr-root .nr-moretog[aria-expanded="true"]::after{content:"−";}
#nr-root .nr-morebox{border:1px solid var(--accent-dim);border-top:none;border-radius:0 0 var(--r) var(--r);
  padding:.9rem .95rem .3rem;background:var(--surface);}
#nr-root .nr-step{margin-bottom:1.1rem;}
#nr-root .nr-step > h2{font-family:var(--sans);font-size:.62rem;font-weight:400;letter-spacing:.2em;
  color:var(--paper-dim);margin:0 0 .45rem;padding:0;border:none;}
/* 立場の欄は、舞台を押したときに、するっと下から開く */
#nr-root #nr-clubstep,#nr-root #nr-club2step,#nr-root #nr-dynstep{display:grid;grid-template-rows:0fr;opacity:0;
  margin:0;padding-top:0;border-top:1px solid transparent;
  transition:grid-template-rows .4s cubic-bezier(.22,.7,.3,1),opacity .3s ease,
             margin .4s cubic-bezier(.22,.7,.3,1),padding .4s cubic-bezier(.22,.7,.3,1);}
#nr-root #nr-clubstep.nr-open,#nr-root #nr-club2step.nr-open,#nr-root #nr-dynstep.nr-open{grid-template-rows:1fr;opacity:1;
  margin:1.6rem 0 1.1rem;padding-top:1.3rem;border-top-color:var(--line-2);}
#nr-root .nr-clubin{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s .4s;}
#nr-root #nr-clubstep.nr-open .nr-clubin,#nr-root #nr-club2step.nr-open .nr-clubin,#nr-root #nr-dynstep.nr-open .nr-clubin{visibility:visible;transition:visibility 0s;}
#nr-root #nr-clubstep h2,#nr-root #nr-club2step h2,#nr-root #nr-dynstep h2{font-family:var(--serif);font-size:1rem;letter-spacing:.1em;color:var(--paper);margin:0 0 .15rem;}
#nr-root .nr-clubnote{font-size:.72rem;color:var(--paper-dim);margin:0 0 .7rem;}
#nr-root #nr-nav1{animation:nr-in .35s ease-out .1s backwards;}

#nr-root .nr-roles{display:flex;gap:.3rem;flex-wrap:wrap;}
#nr-root .nr-roles button{background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:.32rem .8rem;font-size:.78rem;font-family:var(--serif);}
#nr-root .nr-roles button:hover{border-color:var(--accent);}
#nr-root .nr-roles button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-dim);}

/* ── 長さ ───────────────────────── */
#nr-root .nr-meternote{font-size:.68rem;color:var(--paper-dim);margin:.15rem 0 0;line-height:1.6;}
#nr-root .nr-times{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.45rem;}
#nr-root .nr-time{background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:.38rem .85rem;font-size:.82rem;text-align:center;line-height:1.35;}
#nr-root .nr-time small{display:block;font-family:var(--sans);font-size:.6rem;color:var(--paper-dim);letter-spacing:.03em;}
#nr-root .nr-time:hover{border-color:var(--accent);}
#nr-root .nr-time[aria-pressed="true"] small{color:var(--paper);}
#nr-root .nr-time[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-dim);}

/* ── 確かめる ─────────────────────── */
#nr-root .nr-final{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-2);
  padding:.35rem .95rem;margin:0 0 1rem;}
#nr-root .nr-frow{display:flex;gap:.9rem;align-items:baseline;padding:.6rem 0;border-top:1px solid var(--line-2);}
#nr-root .nr-frow:first-child{border-top:none;}
#nr-root .nr-frow em{font-style:normal;font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;
  color:var(--paper-dim);width:4.5rem;flex:none;}
#nr-root .nr-frow div{flex:1;font-family:var(--serif);font-size:.95rem;line-height:1.6;}
#nr-root .nr-frow div small{display:block;font-family:var(--sans);font-size:.68rem;color:var(--paper-dim);margin-top:.1rem;}

/* ── 行き来 ───────────────────────── */
#nr-root .nr-nav{display:flex;gap:.5rem;align-items:center;margin-top:1.4rem;}
#nr-root .nr-back{background:none;border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1.1rem;font-size:.8rem;color:var(--paper-dim);}
#nr-root .nr-back:hover{border-color:var(--accent);color:var(--paper);}
#nr-root .nr-next{flex:1;background:var(--accent);border:none;border-radius:999px;color:var(--on-accent);
  font-family:var(--serif);font-size:.95rem;letter-spacing:.14em;padding:.7rem;}
#nr-root .nr-next:hover{filter:brightness(1.06);}

#nr-root .nr-cta{position:sticky;bottom:0;z-index:4;margin-top:1.5rem;padding:1.4rem 0 .9rem;
  background:linear-gradient(to top,var(--ink) 58%,var(--fade));}
#nr-root .nr-go{width:100%;background:var(--accent);border:none;border-radius:999px;color:var(--on-accent);
  font-family:var(--serif);font-size:1.05rem;letter-spacing:.2em;padding:.9rem;
  box-shadow:0 12px 30px -14px var(--shadow);}
#nr-root .nr-go:hover{filter:brightness(1.06);}
#nr-root .nr-go[disabled]{opacity:.3;cursor:not-allowed;}

/* ── 進行バー ────────────────────── */
#nr-root .nr-bar{position:sticky;top:0;z-index:5;background:var(--veil);border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);}
#nr-root .nr-bar-in{max-width:40rem;margin:0 auto;padding:.6rem 1.25rem;display:flex;align-items:center;gap:.6rem;}
#nr-root .nr-acts{display:flex;gap:.3rem;flex:1;min-width:3rem;}
#nr-root .nr-act{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden;}
#nr-root .nr-act i{position:absolute;inset:0 100% 0 0;background:var(--accent);}
#nr-root .nr-act.done i{right:0;}
#nr-root .nr-clock{font-size:.78rem;color:var(--paper-dim);font-variant-numeric:tabular-nums;min-width:2.8rem;text-align:right;}
#nr-root .nr-bar button{background:none;border:1px solid var(--line);border-radius:999px;font-size:.72rem;
  padding:.3rem .5rem;color:var(--paper-dim);white-space:nowrap;}

/* ── ログ ───────────────────────── */
#nr-root .nr-log{font-family:var(--serif);}
#nr-root .nr-scene > div{white-space:pre-line;}
#nr-root .nr-scene{margin:2.5rem 0 1.75rem;padding-left:1rem;border-left:2px solid var(--accent);
  font-size:1rem;line-height:2;}
#nr-root .nr-scene em{display:block;font-style:normal;font-size:.72rem;letter-spacing:.14em;color:var(--accent);
  font-family:var(--sans);margin-bottom:.5rem;}
#nr-root .nr-narr{margin:1.1rem 0;color:var(--paper-dim);font-size:.95rem;line-height:2;}
#nr-root .nr-narr.reveal{color:var(--paper);border-left:1px solid var(--accent-dim);padding-left:.9rem;}
#nr-root .nr-omen{margin:1.5rem 0 0;padding:.9rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  color:var(--accent);font-size:.92rem;letter-spacing:.06em;line-height:1.9;text-align:center;}
#nr-root .nr-clock.last{color:var(--accent);}
#nr-root .nr-veil{margin:1.1rem 0;color:var(--paper-dim);font-size:.85rem;opacity:.6;letter-spacing:.04em;}
#nr-root .nr-line{margin:.9rem 0;}
#nr-root .nr-line b{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;color:var(--accent);
  font-weight:400;margin-bottom:.2rem;}
#nr-root .nr-line p{margin:0;font-size:1rem;line-height:1.95;white-space:pre-wrap;}
#nr-root .nr-line.them b{color:var(--paper-dim);}

/* 書き手の地の文。仕掛けが出す地の文（.nr-narr）より明るくする */
#nr-root .nr-own{margin:1.4rem 0;font-size:1rem;line-height:1.95;white-space:pre-wrap;color:var(--paper);}

/* 自分が書いた行。触れると直せる */
#nr-root .nr-mine{cursor:pointer;border-radius:8px;transition:background .15s;}
#nr-root .nr-mine:hover{background:var(--surface);}
#nr-root .nr-mine.open{background:var(--accent-dim);}
#nr-root .nr-fix{display:flex;gap:.4rem;flex-wrap:wrap;margin:.15rem 0 1rem;}
#nr-root .nr-fix button{background:none;border:1px solid var(--line);border-radius:999px;
  padding:.32rem .85rem;font-size:.72rem;color:var(--paper-dim);}
#nr-root .nr-fix button:hover{border-color:var(--accent);color:var(--paper);}
#nr-root .nr-fix button.warn{border-color:#D98A6A;color:#D98A6A;}
#nr-root .nr-edit{margin:.6rem 0 1.2rem;border:1px solid var(--accent-dim);border-radius:8px;padding:.7rem;
  background:var(--surface);}
#nr-root .nr-edit textarea{width:100%;min-height:4rem;resize:vertical;background:var(--field);
  border:1px solid var(--line);border-radius:8px;color:var(--paper);font-family:var(--serif);
  font-size:1rem;line-height:1.8;padding:.6rem;}
#nr-root .nr-edit .nr-erow{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;margin-top:.5rem;}
#nr-root .nr-edit .nr-erow .nr-gap2{flex:1;min-width:.2rem;}
#nr-root .nr-edit button{background:none;border:1px solid var(--line);border-radius:999px;
  padding:.35rem .85rem;font-size:.75rem;color:var(--paper-dim);}
#nr-root .nr-edit button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-dim);color:var(--paper);}
#nr-root .nr-edit button.go{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}

/* ── カード ─────────────────────── */
#nr-root .nr-card{margin:1.75rem 0;border:1px solid var(--accent-dim);border-radius:8px;padding:1rem;background:var(--surface);}
#nr-root .nr-card h3{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;color:var(--accent);font-weight:400;margin:0 0 .2rem;}
#nr-root .nr-card .nr-owner{font-family:var(--sans);font-size:.72rem;color:var(--paper-dim);margin:0 0 .75rem;}
#nr-root .nr-choice{display:block;width:100%;text-align:left;background:none;border:1px solid var(--line);border-radius:8px;
  padding:.65rem .75rem;margin-bottom:.4rem;font-family:var(--serif);font-size:.92rem;line-height:1.6;
  transition:border-color .15s,background .15s;}
#nr-root .nr-choice:hover{border-color:var(--accent);background:var(--accent-dim);}
#nr-root .nr-choice b{display:block;font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;
  color:var(--paper);font-weight:400;}
#nr-root .nr-choice small{display:block;font-family:var(--sans);font-size:.68rem;color:var(--paper-dim);
  line-height:1.7;margin-top:.25rem;}
#nr-root .nr-omakase{font-family:var(--sans);font-size:.78rem;color:var(--paper-dim);border-style:dashed;}
#nr-root .nr-free{display:flex;gap:.4rem;margin-bottom:.4rem;}
#nr-root .nr-free input{flex:1;min-width:0;background:var(--field);border:1px solid var(--line);border-radius:8px;
  color:var(--paper);font-family:var(--serif);font-size:.92rem;padding:.6rem .7rem;}
#nr-root .nr-free button{background:none;border:1px solid var(--line);border-radius:8px;font-size:.78rem;padding:.5rem .8rem;
  color:var(--paper-dim);white-space:nowrap;}
#nr-root .nr-note{font-family:var(--sans);font-size:.7rem;color:var(--paper-dim);margin:.6rem 0 0;}
#nr-root .nr-who2{display:flex;gap:.4rem;flex-wrap:wrap;}
#nr-root .nr-who2 button{flex:1;min-width:6rem;}

/* ── 気持ち ───────────────────────── */
#nr-root .nr-hearts{display:grid;gap:.5rem;}
#nr-root .nr-heart{border:1px solid var(--line-2);border-radius:var(--r);padding:.55rem .65rem;background:var(--surface);}
#nr-root .nr-heart > em{display:inline;font-style:normal;font-family:var(--sans);font-size:.64rem;
  letter-spacing:.08em;color:var(--paper-dim);margin-right:.5rem;}
#nr-root .nr-heart > b{display:inline;font-family:var(--serif);font-size:.95rem;font-weight:400;
  color:var(--accent);}
#nr-root .nr-rung{display:flex;gap:.25rem;flex-wrap:wrap;margin-top:.4rem;}
#nr-root .nr-rung button{background:none;border:1px solid var(--line);border-radius:999px;
  padding:.26rem .6rem;font-size:.72rem;color:var(--paper-dim);}
#nr-root .nr-rung button:hover{border-color:var(--accent);color:var(--paper);}
#nr-root .nr-rung button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-dim);color:var(--paper);}
#nr-root .nr-rung button.keep{border-style:dashed;}
#nr-root .nr-dynline{display:block;margin-bottom:.7rem;padding-bottom:.7rem;border-bottom:1px solid var(--line-2);}
#nr-root .nr-dynline:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0;}
#nr-root .nr-dynline>b{display:block;font-size:.8rem;font-weight:600;color:var(--paper);margin-bottom:.1rem;}
#nr-root .nr-dynline .nr-rung{display:flex;gap:.25rem;flex-wrap:wrap;align-items:center;}
#nr-root .nr-dynline .nr-rung>span{font-size:.66rem;color:var(--paper-dim);opacity:.8;margin-right:.15rem;}
#nr-root .nr-dyngapnote{font-size:.7rem;color:var(--paper-dim);margin:.7rem 0 0;line-height:1.7;}
#nr-root .nr-hintbox{margin-bottom:.6rem;}
#nr-root .nr-hinttog{width:100%;text-align:left;background:none;border:1px solid var(--line);border-radius:var(--r);
  padding:.45rem .7rem;font-size:.76rem;color:var(--paper-dim);}
#nr-root .nr-hinttog:hover{border-color:var(--accent);color:var(--paper);}
#nr-root .nr-hintin{border:1px solid var(--line);border-top:none;border-radius:0 0 var(--r) var(--r);
  padding:.6rem .8rem .8rem;max-height:22rem;overflow-y:auto;}
#nr-root .nr-hintin h4{font-size:.72rem;color:var(--accent);margin:.7rem 0 .3rem;font-weight:600;}
#nr-root .nr-hintin h4:first-child{margin-top:0;}
#nr-root .nr-hintin dl{margin:0;}
#nr-root .nr-hintin dt{font-size:.74rem;color:var(--paper);margin-top:.35rem;}
#nr-root .nr-hintin dt span{color:var(--paper-dim);font-size:.68rem;margin-left:.3rem;}
#nr-root .nr-hintin dd{margin:.1rem 0 0;font-size:.7rem;color:var(--paper-dim);line-height:1.6;}
#nr-root .nr-hintin .nr-hintnote{font-size:.68rem;color:var(--paper-dim);margin:.8rem 0 0;line-height:1.6;}
#nr-root .nr-hintin .nr-hintsrc{font-size:.66rem;color:var(--paper-dim);margin:.5rem 0 0;line-height:1.7;opacity:.85;}
#nr-root .nr-hintin .nr-hintsrc a{color:var(--paper-dim);}
#nr-root .nr-costfree{flex:1 1 9rem;min-width:8rem;background:var(--field);border:1px solid var(--line);
  border-radius:999px;padding:.22rem .6rem;font-size:.72rem;color:var(--paper);font-family:inherit;}
#nr-root .nr-costfree::placeholder{color:var(--paper-dim);opacity:.7;}
#nr-root .nr-dyn{border:1px solid var(--line);border-radius:var(--r);padding:.65rem .75rem;margin-bottom:.6rem;}
#nr-root .nr-dynhead{display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:var(--paper-dim);}
#nr-root .nr-dynhead strong{color:var(--paper);font-weight:600;}
#nr-root .nr-dynhead button{margin-left:auto;background:none;border:1px solid var(--line);border-radius:999px;
  padding:.2rem .55rem;font-size:.7rem;color:var(--paper-dim);}
#nr-root .nr-dynhead button:hover{border-color:var(--accent);color:var(--paper);}
#nr-root .nr-dyntrack{position:relative;height:.42rem;border-radius:999px;background:var(--line-2);margin:.5rem 0 .25rem;overflow:hidden;}
#nr-root .nr-dynmid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);}
#nr-root .nr-dynfill{position:absolute;top:0;bottom:0;left:50%;width:0;background:var(--accent);transition:left .3s,width .3s,background .3s;}
#nr-root .nr-dynends{display:flex;justify-content:space-between;font-size:.62rem;color:var(--paper-dim);opacity:.7;}
#nr-root .nr-dynstate{font-size:.76rem;color:var(--paper-dim);margin:.45rem 0 .25rem;}
#nr-root .nr-dynhint{font-size:.68rem;color:var(--paper-dim);opacity:.75;margin:0 0 .5rem;}
#nr-root .nr-dynacts button[disabled]{opacity:.4;}
#nr-root .nr-dynacts{display:flex;gap:.3rem;flex-wrap:wrap;}
#nr-root .nr-dynacts button{background:none;border:1px solid var(--line);border-radius:999px;
  padding:.24rem .55rem;font-size:.7rem;color:var(--paper-dim);}
#nr-root .nr-dynacts button:hover{border-color:var(--accent);color:var(--paper);}
/* サブ側の了承ボタン。ここを押すまで目盛りは出ない */
#nr-root .nr-dynacts button.nr-dyngo{border-color:var(--accent);background:var(--accent-dim);
  color:var(--paper);padding:.34rem .9rem;font-size:.74rem;}
#nr-root .nr-dynacts button.nr-dyngo[disabled]{border-color:var(--line);background:none;}
#nr-root .nr-dynacts button.warn{border-color:#8A6BA8;color:var(--paper);}
/* コマンドの欄。何と言うかを選んでから出す */
#nr-root .nr-dyncmd{flex:1 1 100%;display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;
  padding:.4rem .5rem;margin-bottom:.15rem;border:1px solid var(--line);border-radius:var(--r);}
#nr-root .nr-dyncmd select{flex:1 1 10rem;min-width:8rem;background:var(--field);border:1px solid var(--line);
  border-radius:999px;padding:.28rem .6rem;font-size:.74rem;color:var(--paper);font-family:inherit;}
#nr-root .nr-dyncmd select:disabled{opacity:.45;}
#nr-root .nr-dyncmd small{flex:1 1 100%;font-size:.66rem;color:var(--paper-dim);opacity:.8;line-height:1.6;}
/* 了承した瞬間、目盛りが出たことに気づけるように一度だけ光らせる */
@keyframes nr-dynflash{
  0%{border-color:var(--accent);box-shadow:0 0 0 0 var(--accent-dim);}
  40%{border-color:var(--accent);box-shadow:0 0 0 .5rem transparent;}
  100%{border-color:var(--line);box-shadow:0 0 0 0 transparent;}
}
#nr-root .nr-dyn.nr-dynflash{animation:nr-dynflash 1.1s ease-out;}
#nr-root .nr-dyntrack.nr-dynon{animation:nr-in .45s ease-out backwards;}
#nr-root .nr-heart-off{margin-top:.5rem;display:flex;gap:.35rem;flex-wrap:wrap;}
#nr-root .nr-heart-off button{background:none;border:1px solid var(--line);border-radius:999px;
  padding:.32rem .8rem;font-size:.72rem;color:var(--paper-dim);}
#nr-root .nr-heart-off button[aria-pressed="true"]{border-color:var(--accent);color:var(--paper);}

/* ── 二人（持ち込み） ─────────────── */
#nr-root .nr-chars{display:grid;gap:.5rem;grid-template-columns:1fr 1fr;}
#nr-root .nr-char{border:1px solid var(--line-2);border-radius:var(--r);padding:.55rem .6rem;background:var(--surface);}
#nr-root .nr-char > em{display:block;font-style:normal;font-family:var(--sans);font-size:.6rem;
  letter-spacing:.18em;color:var(--paper-dim);margin-bottom:.3rem;}
#nr-root .nr-char input{width:100%;background:var(--field);border:1px solid var(--line);border-radius:8px;
  color:var(--paper);font-family:var(--serif);font-size:.95rem;padding:.4rem .55rem;}
#nr-root .nr-char input:focus{border-color:var(--accent);}
#nr-root .nr-char .nr-cname{font-size:1.02rem;}
#nr-root .nr-csum{font-size:.68rem;color:var(--paper-dim);line-height:1.55;margin:.3rem 0 0;}
#nr-root .nr-crow{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.4rem;}
#nr-root .nr-crow button{background:none;border:none;border-radius:0;padding:0;font-size:.64rem;
  color:var(--paper-dim);border-bottom:1px solid var(--line);line-height:1.6;}
#nr-root .nr-crow button:hover{border-color:var(--accent);color:var(--paper);}
#nr-root .nr-crow button.on{border-color:var(--accent);color:var(--accent);}
#nr-root .nr-cbody{margin-top:.55rem;display:grid;gap:.4rem;}
#nr-root .nr-cbody label{display:block;font-size:.64rem;color:var(--paper-dim);margin-bottom:.15rem;}
#nr-root .nr-cbody input{font-size:.85rem;}
#nr-root .nr-book{margin-top:.5rem;border-top:1px dashed var(--line);padding-top:.5rem;display:grid;gap:.3rem;}
#nr-root .nr-bookrow{display:flex;gap:.3rem;align-items:center;}
#nr-root .nr-bookrow button{background:none;border:1px solid var(--line);border-radius:8px;
  padding:.3rem .45rem;font-size:.76rem;text-align:left;}
#nr-root .nr-bookrow .nr-bpick2{flex:1;min-width:0;}
#nr-root .nr-bookrow .nr-bdel{color:var(--paper-dim);padding:.3rem .45rem;}
#nr-root .nr-bookempty{font-size:.7rem;color:var(--paper-dim);}
@media(max-width:24rem){#nr-root .nr-chars{grid-template-columns:1fr;}}

/* 書いているあいだの、その子の覚え書き */
#nr-root .nr-me{font-family:var(--sans);font-size:.7rem;color:var(--paper-dim);margin-bottom:.4rem;
  line-height:1.6;letter-spacing:.02em;}
#nr-root .nr-me b{font-family:var(--serif);font-size:.78rem;color:var(--accent);font-weight:400;margin-right:.5rem;}

#nr-root .nr-spices{margin-top:.7rem;}
#nr-root .nr-sgroup{margin-bottom:.75rem;}
#nr-root .nr-sgroup > h3{font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;color:var(--accent);
  font-weight:400;margin:0 0 .3rem;}
#nr-root .nr-sgroup > h3 small{font-family:var(--serif);letter-spacing:0;color:var(--paper-dim);margin-left:.4rem;}
#nr-root .nr-slist{display:grid;gap:.35rem;grid-template-columns:repeat(2,1fr);}
@media(min-width:34rem){#nr-root .nr-slist{grid-template-columns:repeat(3,1fr);}}
#nr-root .nr-spice{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:.45rem .55rem;text-align:left;font-size:.78rem;line-height:1.45;transition:border-color .15s,background .15s;}
#nr-root .nr-spice:hover{border-color:var(--accent);}
#nr-root .nr-spice[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-dim);}
#nr-root .nr-sside{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.55rem;align-items:center;}
#nr-root .nr-sside em{font-style:normal;font-family:var(--sans);font-size:.66rem;color:var(--paper-dim);margin-right:.15rem;}
#nr-root .nr-sside button{background:none;border:1px solid var(--line);border-radius:999px;padding:.28rem .75rem;font-size:.76rem;color:var(--paper-dim);}
#nr-root .nr-sside button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-dim);color:var(--paper);}

/* ── 書くところ ──────────────────── */
#nr-root .nr-composer{position:sticky;bottom:0;background:linear-gradient(var(--fade),var(--ink) 22%);padding-top:1.5rem;padding-bottom:.6rem;}
#nr-root .nr-who{display:flex;gap:.4rem;margin-bottom:.45rem;flex-wrap:wrap;align-items:center;}
#nr-root .nr-who .nr-gap{flex:1;min-width:.2rem;}
#nr-root .nr-mode{display:flex;gap:.3rem;}
#nr-root .nr-mode button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-dim);color:var(--paper);}
#nr-root .nr-who button.dim{opacity:.45;}
#nr-root .nr-who button{background:none;border:1px solid var(--line);border-radius:999px;padding:.3rem .85rem;font-size:.78rem;}
#nr-root .nr-who button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-dim);}
#nr-root .nr-who button[disabled]{opacity:.45;cursor:default;border-style:dashed;}
#nr-root .nr-composer textarea{width:100%;min-height:4.5rem;resize:vertical;background:var(--field);
  border:1px solid var(--line);border-radius:8px;color:var(--paper);font-family:var(--serif);font-size:1rem;
  line-height:1.8;padding:.7rem;}
#nr-root .nr-composer textarea[disabled]{opacity:.5;}
#nr-root .nr-send{display:flex;justify-content:space-between;align-items:center;margin-top:.45rem;gap:.5rem;}
#nr-root .nr-send small{font-size:.7rem;color:var(--paper-dim);flex:1;min-width:0;}
#nr-root .nr-send .nr-afterend{background:none;border:1px solid var(--line);border-radius:999px;color:var(--paper-dim);
  font-size:.72rem;padding:.42rem .9rem;white-space:nowrap;}
#nr-root .nr-send .nr-afterend:hover{border-color:var(--accent);color:var(--paper);}
#nr-root .nr-send .nr-gapgo{background:none;border:1px solid var(--accent);border-radius:999px;color:var(--accent);
  font-size:.72rem;padding:.42rem .9rem;white-space:nowrap;}
#nr-root .nr-send .nr-gapgo:hover{background:var(--accent-dim);color:var(--paper);}
#nr-root .nr-send .nr-wrapup{background:none;border:1px solid var(--line);border-radius:999px;color:var(--paper-dim);
  font-size:.72rem;padding:.42rem .9rem;white-space:nowrap;}
#nr-root .nr-send .nr-wrapup:hover{border-color:var(--accent);color:var(--paper);}
#nr-root .nr-send .nr-wrapup.ask{border-color:var(--accent);color:var(--accent);}
#nr-root .nr-send button{background:var(--accent);border:none;border-radius:999px;color:var(--on-accent);font-size:.85rem;padding:.5rem 1.3rem;}
#nr-root .nr-send button[disabled]{opacity:.35;cursor:default;}

/* ── 終わり ─────────────────────── */
#nr-root .nr-end{border-top:1px solid var(--line);margin-top:3rem;padding-top:2rem;}
#nr-root .nr-end h3{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;color:var(--accent);font-weight:400;margin:0 0 .75rem;}
/* ── 終わったあと ─────────────────── */
#nr-root .nr-title-in{margin-top:1.5rem;}
#nr-root .nr-title-in label{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;
  color:var(--accent);margin-bottom:.35rem;}
#nr-root .nr-title-in input{width:100%;background:var(--field);border:1px solid var(--line);
  border-radius:8px;color:var(--paper);font-family:var(--serif);font-size:1.05rem;padding:.6rem .7rem;}
#nr-root .nr-title-in p{font-family:var(--sans);font-size:.68rem;color:var(--paper-dim);margin:.35rem 0 0;}
#nr-root .nr-card-box{margin-top:1.5rem;border-top:1px solid var(--line);padding-top:1.25rem;}
#nr-root .nr-card-box canvas{width:100%;max-width:20rem;height:auto;display:block;margin:0 auto;
  border:1px solid var(--line);border-radius:8px;}
#nr-root .nr-card-row{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.75rem;}
#nr-root .nr-card-row button{background:none;border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1.1rem;font-size:.8rem;}
#nr-root .nr-card-row button.go{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
#nr-root .nr-card-note{font-family:var(--sans);font-size:.68rem;color:var(--paper-dim);
  text-align:center;margin:.6rem 0 0;line-height:1.7;}

#nr-root .nr-tools{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.25rem;}
#nr-root .nr-tools button{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.55rem 1.1rem;font-size:.85rem;}
#nr-root .nr-tools button.go{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
#nr-root .nr-tools button:hover{border-color:var(--accent);}
/* ── 続きから ───────────────────── */
#nr-root .nr-resume{border:1px solid var(--accent-dim);border-radius:var(--r-lg);padding:.95rem 1rem;margin:0 0 1.25rem;
  background:linear-gradient(180deg,var(--accent-dim),var(--surface));}
#nr-root .nr-resume h2{font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;color:var(--accent);font-weight:400;margin:0 0 .35rem;border:none;padding:0;}
#nr-root .nr-resume p{font-size:.86rem;color:var(--paper);margin:0 0 .8rem;line-height:1.7;}
#nr-root .nr-resume p small{display:block;font-family:var(--sans);font-size:.68rem;color:var(--paper-dim);margin-top:.2rem;}
#nr-root .nr-rrow{display:flex;gap:.4rem;flex-wrap:wrap;}
#nr-root .nr-rrow button{background:none;border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;font-size:.82rem;}
#nr-root .nr-rrow button.go{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
#nr-root .nr-saved{position:fixed;top:3.1rem;left:50%;transform:translateX(-50%);z-index:20;
  font-family:var(--sans);font-size:.7rem;letter-spacing:.06em;color:var(--paper-dim);
  background:var(--veil);border:1px solid var(--line);border-radius:8px;
  padding:.3rem .8rem;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .5s;}
#nr-root .nr-saved.on{opacity:1;}
#nr-root .nr-mark{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;color:var(--paper-dim);
  text-align:center;margin:2rem 0;border-top:1px dashed var(--line);padding-top:.8rem;}
#nr-root .nr-hidden{display:none;}
@media(prefers-reduced-motion:reduce){#nr-root *{transition:none!important;}}

/* ── たたんである欄（衣装・求めているもの） ── */
#nr-root .nr-fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;
  min-height:2.2rem;-webkit-tap-highlight-color:transparent;}
#nr-root .nr-fold > summary::-webkit-details-marker{display:none;}
#nr-root .nr-fold > summary::after{content:"＋";margin-left:auto;color:var(--accent);font-size:.9rem;line-height:1;}
#nr-root .nr-fold[open] > summary::after{content:"−";}
#nr-root .nr-foldsum{font-family:var(--serif);font-size:.82rem;color:var(--paper-dim);line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
#nr-root .nr-fold[open] > summary .nr-foldsum{color:var(--paper);}
#nr-root .nr-foldin{padding-top:.6rem;animation:nr-in .18s ease-out;}
#nr-root .nr-foldin .nr-clubnote{margin-bottom:0;}

/* 隠し味は「こまかく決める」の中へ */
#nr-root .nr-morebox #nr-spicerow{margin-bottom:.9rem;}
#nr-root .nr-morebox #nr-spicerow .nr-pickrow{margin-top:0;}

/* ── バース系の舞台 ── */
#nr-root .nr-verse{margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--line);}
#nr-root .nr-versetog{width:100%;display:flex;align-items:baseline;gap:.6rem;background:none;
  border:1px dashed var(--line);border-radius:var(--r);padding:.65rem .9rem;
  font-family:var(--serif);font-size:.92rem;letter-spacing:.08em;color:var(--paper-dim);}
#nr-root .nr-versetog small{font-family:var(--sans);font-size:.62rem;letter-spacing:.02em;opacity:.85;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
#nr-root .nr-versetog::after{content:"＋";margin-left:auto;color:var(--accent);font-size:.9rem;}
#nr-root .nr-versetog:hover{border-color:var(--accent);color:var(--paper);}
#nr-root .nr-versetog[aria-expanded="true"]{border-style:solid;border-color:var(--accent-dim);color:var(--paper);
  border-bottom-left-radius:0;border-bottom-right-radius:0;}
#nr-root .nr-versetog[aria-expanded="true"]::after{content:"−";}
#nr-root .nr-versebox{border:1px solid var(--accent-dim);border-top:none;border-radius:0 0 var(--r) var(--r);
  padding:.85rem .8rem;background:var(--surface);animation:nr-in .18s ease-out;}
#nr-root .nr-versenote{font-family:var(--sans);font-size:.68rem;line-height:1.75;color:var(--paper-dim);
  margin:0 0 .75rem;}

@media(max-width:33.99rem){
  #nr-root .nr-versetog{flex-wrap:wrap;gap:.15rem .6rem;padding:.7rem .8rem;}
  #nr-root .nr-versetog small{flex:1 1 100%;font-size:.64rem;}
  #nr-root .nr-versetog::after{position:absolute;}
  #nr-root .nr-verse{position:relative;}
  #nr-root .nr-versetog{position:relative;padding-right:2.2rem;}
  #nr-root .nr-versetog::after{position:absolute;right:.9rem;top:.7rem;margin:0;}
  #nr-root .nr-foldsum{font-size:.8rem;}
}

/* ══════════════════════════════════════════════
   ここから下は、スマホでの見やすさ・押しやすさの調整
   ══════════════════════════════════════════════ */

/* 入口の要点。長い説明のかわりに、三行で分かるように */
#nr-root .nr-pts{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;margin:.75rem 0 0;padding:0;}
#nr-root .nr-pts li{font-family:var(--sans);font-size:.7rem;letter-spacing:.04em;line-height:1.5;
  color:var(--paper-dim);border:1px solid var(--line);border-radius:999px;
  padding:.28rem .75rem;background:var(--surface);}
#nr-root .nr-pts li::before{content:"";display:inline-block;width:.28rem;height:.28rem;border-radius:999px;
  background:var(--accent);margin-right:.42rem;vertical-align:.14em;}
#nr-root .nr-lean .nr-pts{display:none;}

/* たたみの見出しは、指で押せる高さに */
#nr-root .nr-about > summary{min-height:2.6rem;}

/* iOSで入力欄を触ったときに、画面が勝手に拡大されないように */
@media(max-width:47.99rem){
  #nr-root input,
  #nr-root textarea{font-size:16px;}
  #nr-root .nr-char .nr-cname{font-size:17px;}
}

@media(max-width:33.99rem){
  /* 冒頭の詰まりを解く */
  #nr-root .nr-wrap{padding:1.3rem .95rem 4rem;}
  #nr-root .nr-head{margin-bottom:1rem;}
  #nr-root .nr-title{font-size:1.32rem;letter-spacing:.16em;}
  #nr-root .nr-lead{font-size:.84rem;line-height:1.8;}
  #nr-root .nr-about{margin-top:.75rem;}

  /* 手順は細く、でも今どこかは分かるように */
  #nr-root .nr-steps{margin-bottom:1.15rem;}
  #nr-root .nr-slab{font-size:.6rem;letter-spacing:.04em;}
  #nr-root .nr-h2{font-size:1.05rem;}
  #nr-root .nr-h2note{font-size:.75rem;margin-bottom:.85rem;}

  /* コミカルとシリアスは、大きな分かれ道なので大きく */
  #nr-root .nr-tone{gap:.55rem;margin-bottom:.9rem;}
  #nr-root .nr-tier{width:100%;}
  #nr-root .nr-tier button{flex:1;padding:.55rem .5rem;font-size:.84rem;}
  #nr-root .nr-tiernote{font-size:.7rem;min-width:0;}

  /* 舞台のカードは、文字を少し大きく */
  #nr-root .nr-worlds{gap:.5rem;}
  #nr-root .nr-world{padding:.8rem .72rem;}
  #nr-root .nr-world b{font-size:1rem;}
  #nr-root .nr-wnote{font-size:.68rem;line-height:1.55;}
  #nr-root .nr-ico svg{width:24px;height:24px;}

  /* 押すものは、指の幅に合わせる */
  #nr-root .nr-pickrow button,
  #nr-root .nr-rung button,
  #nr-root .nr-roles button,
  #nr-root .nr-reco,
  #nr-root .nr-time,
  #nr-root .nr-heart-off button,
  #nr-root .nr-sside button,
  #nr-root .nr-rrow button,
  #nr-root .nr-crow button,
  #nr-root .nr-fix button,
  #nr-root .nr-spicetog{min-height:2.2rem;}
  #nr-root .nr-pickrow button,#nr-root .nr-rung button{font-size:.76rem;padding:.4rem .85rem;}
  #nr-root .nr-reco{font-size:.86rem;padding:.42rem .95rem;}
  #nr-root .nr-bond{padding:.6rem .65rem;}
  #nr-root .nr-spice{padding:.55rem .6rem;font-size:.8rem;}

  /* 「次へ」は、下に置いたままにする。長い画面でも探さずに済む */
  #nr-root #nr-setup .nr-nav{position:sticky;bottom:0;z-index:3;margin-top:1.2rem;
    padding:.75rem 0 calc(.75rem + env(safe-area-inset-bottom));
    background:linear-gradient(to top,var(--ink) 62%,var(--fade));}
  #nr-root .nr-next{padding:.78rem;font-size:1rem;}
  #nr-root .nr-back{padding:.55rem 1.1rem;}
  #nr-root .nr-omakase{margin-top:1rem;padding:.65rem;font-size:.78rem;}

  /* 確かめる画面と、書くところ。ホームバーに隠れないように */
  #nr-root .nr-cta{padding-bottom:calc(.9rem + env(safe-area-inset-bottom));}
  #nr-root .nr-go{font-size:1.05rem;padding:.95rem;}
  #nr-root .nr-composer{padding-bottom:calc(.6rem + env(safe-area-inset-bottom));}
  #nr-root .nr-send{flex-wrap:wrap;}
  #nr-root .nr-send small{flex:1 1 100%;order:3;margin-top:.1rem;}
  #nr-root .nr-send button{min-height:2.4rem;}
  #nr-root .nr-bar-in{padding:.55rem .95rem;gap:.45rem;}

  /* 束ねた設定と、読むところ */
  #nr-root .nr-row{padding:.85rem .8rem;}
  #nr-root .nr-rowhead{flex-wrap:wrap;}
  #nr-root .nr-final{padding:.3rem .8rem;}
  #nr-root .nr-frow{gap:.7rem;}
  #nr-root .nr-frow em{width:3.9rem;}
  #nr-root .nr-scene{margin:2rem 0 1.4rem;}
}
/* ── 吹き出し（台詞だけ。地の文は地の文のまま） ── */
#nr-root{--bub-a:#1E1A2C;--bub-b:#191624;}
#nr-root[data-tone="light"]{--bub-a:#FFF9EF;--bub-b:#FFFFFF;}

#nr-root .nr-line{display:flex;gap:.5rem;align-items:flex-start;margin:1.05rem 0;}
#nr-root .nr-line.them{flex-direction:row-reverse;}
#nr-root .nr-ava{flex:none;width:2.1rem;height:2.1rem;margin-top:1.15rem;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:.9rem;line-height:1;
  border:1px solid var(--accent);color:var(--accent);background:var(--ink-2);}
#nr-root .nr-line.them .nr-ava{border-color:var(--line);color:var(--paper-dim);}
#nr-root .nr-bub{flex:1;min-width:0;}
#nr-root .nr-line b{display:block;font-family:var(--sans);font-size:.65rem;letter-spacing:.1em;
  color:var(--accent);font-weight:400;margin:0 0 .2rem .2rem;}
#nr-root .nr-line.them b{color:var(--paper-dim);text-align:right;margin:0 .2rem .2rem 0;}
#nr-root .nr-line p{position:relative;margin:0;font-size:1rem;line-height:1.9;white-space:pre-wrap;
  background:var(--bub-a);border:1px solid var(--accent-dim);border-radius:16px;
  padding:.62rem .9rem;}
#nr-root .nr-line p::before{content:"";position:absolute;top:.95rem;left:-5px;width:9px;height:9px;
  background:inherit;border-left:1px solid var(--accent-dim);
  border-bottom:1px solid var(--accent-dim);transform:rotate(45deg);}
#nr-root .nr-line.them p{background:var(--bub-b);border-color:var(--line);}
#nr-root .nr-line.them p::before{left:auto;right:-5px;border-left:none;border-bottom:none;
  border-right:1px solid var(--line);border-top:1px solid var(--line);}

#nr-root .nr-line.nr-mine:hover,#nr-root .nr-line.nr-mine.open{background:none;}
#nr-root .nr-line.nr-mine:hover p{border-color:var(--accent);}
#nr-root .nr-line.nr-mine.open p{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}

@media (max-width:480px){
  #nr-root .nr-ava{width:1.85rem;height:1.85rem;font-size:.8rem;margin-top:1.05rem;}
  #nr-root .nr-line{gap:.4rem;margin:.9rem 0;}
  #nr-root .nr-line p{padding:.55rem .8rem;font-size:.97rem;}
}
/* ── 戻る・終了・部分修正 ───────────── */
#nr-root .nr-frow.edit{cursor:pointer;border-radius:10px;}
#nr-root .nr-frow.edit:hover{background:var(--surface);}
#nr-root .nr-fedit{flex:none;align-self:center;font-family:var(--sans);font-size:.6rem;letter-spacing:.1em;
  color:var(--accent);border:1px solid var(--accent-dim);border-radius:999px;
  padding:.2rem .6rem;white-space:nowrap;}
#nr-root .nr-frow.edit:hover .nr-fedit{background:var(--accent-dim);}
#nr-root .nr-navnote{font-family:var(--sans);font-size:.66rem;color:var(--paper-dim);
  margin:.7rem 0 0;line-height:1.7;}

#nr-root .nr-menubtn{flex:none;width:2.1rem;height:1.9rem;display:flex;align-items:center;
  justify-content:center;font-size:1rem;line-height:1;padding:0!important;}
#nr-root .nr-menubtn:hover{border-color:var(--accent);color:var(--paper);}

#nr-root .nr-tray{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;}
#nr-root .nr-tray.nr-hidden{display:none;}
#nr-root .nr-tray::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);}
#nr-root .nr-trayin{position:relative;width:100%;max-width:29rem;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:1.05rem 1.05rem 1.1rem;box-shadow:0 -24px 60px -24px var(--shadow);
  animation:nr-up .2s ease;max-height:88vh;overflow-y:auto;}
@keyframes nr-up{from{transform:translateY(16px);opacity:0;}to{transform:none;opacity:1;}}
#nr-root .nr-trayin h3{font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;color:var(--accent);
  font-weight:400;margin:0 0 .25rem;}
#nr-root .nr-traysub{font-family:var(--serif);font-size:.86rem;color:var(--paper-dim);
  margin:0 0 .9rem;line-height:1.7;}
#nr-root .nr-trow{display:block;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:.66rem .8rem;margin-bottom:.4rem;
  font-family:var(--serif);font-size:.92rem;}
#nr-root .nr-trow small{display:block;font-family:var(--sans);font-size:.66rem;color:var(--paper-dim);
  margin-top:.18rem;line-height:1.65;}
#nr-root .nr-trow:hover{border-color:var(--accent);}
#nr-root .nr-trow.warn{border-style:dashed;color:#D98A6A;}
#nr-root .nr-trow.warn:hover{border-color:#D98A6A;}
#nr-root .nr-tclose{width:100%;background:none;border:none;color:var(--paper-dim);font-size:.8rem;
  padding:.7rem;margin-top:.2rem;}

#nr-root .nr-me{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;}
#nr-root .nr-meedit{flex:none;background:none;border:1px solid var(--accent-dim);border-radius:999px;
  padding:.16rem .55rem;font-family:var(--sans);font-size:.6rem;letter-spacing:.08em;color:var(--accent);}
#nr-root .nr-meedit:hover{background:var(--accent-dim);}
#nr-root .nr-mebox{border:1px solid var(--accent-dim);border-radius:var(--r);background:var(--surface);
  padding:.7rem .8rem;margin-bottom:.5rem;}
#nr-root .nr-mebox h4{font-family:var(--sans);font-size:.64rem;letter-spacing:.14em;color:var(--accent);
  font-weight:400;margin:0 0 .5rem;}
#nr-root .nr-mebox label{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem;}
#nr-root .nr-mebox label span{flex:none;width:5.4rem;font-family:var(--sans);font-size:.68rem;color:var(--paper-dim);}
#nr-root .nr-mebox input{flex:1;min-width:0;background:var(--field);border:1px solid var(--line);
  border-radius:8px;color:var(--paper);font-family:var(--serif);font-size:.92rem;padding:.4rem .55rem;}
#nr-root .nr-merow{display:flex;gap:.35rem;justify-content:flex-end;margin-top:.5rem;}
#nr-root .nr-merow button{background:none;border:1px solid var(--line);border-radius:999px;
  padding:.35rem .9rem;font-size:.76rem;color:var(--paper-dim);}
#nr-root .nr-merow button.go{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}

@media (max-width:480px){
  #nr-root .nr-mebox label span{width:4.6rem;font-size:.64rem;}
  #nr-root .nr-trayin{padding:.9rem .85rem 1rem;}
}
/* ── 貼れるカードの選び口 ── */
#nr-root .nr-cardsel{display:flex;gap:.32rem;flex-wrap:wrap;align-items:center;justify-content:center;
  margin:0 0 .55rem;}
#nr-root .nr-cardsel em{font-style:normal;font-family:var(--sans);font-size:.6rem;letter-spacing:.14em;
  color:var(--paper-dim);margin-right:.15rem;}
#nr-root .nr-cardsel button{background:none;border:1px solid var(--line);border-radius:999px;
  padding:.3rem .72rem;font-size:.73rem;color:var(--paper-dim);}
#nr-root .nr-cardsel button:hover{border-color:var(--accent);color:var(--paper);}
#nr-root .nr-cardsel button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-dim);
  color:var(--paper);}
#nr-root .nr-card-box canvas{transition:max-width .2s;}
#nr-root .nr-card-box canvas[data-r="11"]{max-width:19rem;}
#nr-root .nr-card-box canvas[data-r="916"]{max-width:13rem;}
@media (max-width:480px){
  #nr-root .nr-card-box canvas[data-r="916"]{max-width:11rem;}
}


/* ══════════════════════════════════════════════
   スマホ向けの手直し
   ── 会話が主役。操作は脇に寄せる ──
   ══════════════════════════════════════════════ */

/* SWELLの「ページトップへ戻る」が書く欄に重なるので、このページだけ引っ込める */
body.nr-app-page #pagetop{ display:none !important; }

/* 右上のメニュー。「≡」だと伝わらないので文字にする */
#nr-root .nr-bar button.nr-menubtn.nr-lbl{
  width:auto;
  padding:.3rem .7rem !important;
  font-size:.72rem;
}

/* Dom/Sub の見出しをタップでたためるようにする（スマホでのみ有効。下で切替） */
#nr-root .nr-dyn.nr-canfold .nr-dynhead{ cursor:pointer; user-select:none; }
#nr-root .nr-dyn.nr-canfold .nr-dynhead::after{
  content:"−";
  flex:none;
  width:1.2rem;
  text-align:center;
  color:var(--paper-dim);
  font-size:.9rem;
}
#nr-root .nr-dyn.nr-canfold.nr-fold .nr-dynhead::after{ content:"＋"; }
#nr-root .nr-dyn.nr-canfold.nr-fold .nr-dyntrack,
#nr-root .nr-dyn.nr-canfold.nr-fold .nr-dynends,
#nr-root .nr-dyn.nr-canfold.nr-fold .nr-dynhint,
#nr-root .nr-dyn.nr-canfold.nr-fold .nr-dynacts{ display:none; }
#nr-root .nr-dyn.nr-canfold.nr-fold .nr-dynstate{ margin-bottom:0; }

@media (max-width:30rem){

  /* ── 1. タップすると画面が拡大する問題 ──
        iOSは、文字が16px未満の入力欄に触れると自動で拡大する。
        アプリ内の入力欄は .nr-char input など個別に rem で指定してあり、
        そちらのほうが優先度が高くて前回の指定が負けていた。
        ここは !important で押し切る。見た目に影響する値はこれだけ */
  #nr-root textarea,
  #nr-root input,
  #nr-root select{ font-size:16px !important; }

  /* ── 2. SWELLのヘッダーが画面上部に居座って、会話の場所を食っていた。
        遊んでいるあいだ（bodyに nr-playing が付く）だけ、追従をやめる ── */
  body.nr-playing .l-fixHeader{ display:none !important; }
  body.nr-playing #header,
  body.nr-playing .l-header{ position:static !important; }

  /* ── 3. 上の帯。進める・延長は「その他」の中にもあるので、ここでは出さない ── */
  #nr-root .nr-bar #nr-skip,
  #nr-root .nr-bar #nr-more{ display:none; }
  #nr-root .nr-bar-in{ padding:.45rem .8rem; }

  /* ── 4. 書く欄。会話アプリの形にする ──
        ┌──────────────────────────────┐
        │ 雨宮 結城        台詞 地の文 まぜて │  ← 誰が・どう
        │ 雨宮 ［決める］                   │  ← 小さく
        │ ┌────────────────────┐ ┌────┐ │
        │ │ 書く欄（1行から伸びる） │ │書く│ │
        │ └────────────────────┘ └────┘ │
        └──────────────────────────────┘        */
  #nr-root .nr-composer{
    display:grid;
    grid-template-columns:1fr auto;
    column-gap:.45rem;
    align-items:end;
    padding-top:.6rem;
    padding-bottom:calc(.5rem + env(safe-area-inset-bottom));
  }
  #nr-root .nr-who{ grid-column:1 / -1; margin-bottom:.35rem; flex-wrap:wrap; row-gap:.3rem; }
  #nr-root .nr-who button{ padding:.28rem .7rem; font-size:.74rem; }

  /* 一人称の行。文章は消して、名前と「決める」だけの小さな行にする */
  #nr-root .nr-me{ grid-column:1 / -1; font-size:0; line-height:0; margin-bottom:.35rem; gap:.35rem; }
  #nr-root .nr-me b{ font-size:.72rem; line-height:1.4; margin-right:0; }
  #nr-root .nr-me .nr-meedit{ font-size:.6rem; line-height:1.4; padding:.14rem .5rem; }
  #nr-root .nr-me.nr-hidden{ display:none; }

  #nr-root .nr-composer textarea{
    grid-column:1;
    min-height:2.6rem;
    line-height:1.7;
    padding:.5rem .6rem;
    resize:none;
  }
  #nr-root .nr-send{
    grid-column:2;
    margin:0;
    flex-direction:column;
    align-items:flex-end;
    gap:.3rem;
    flex-wrap:nowrap;
  }
  #nr-root .nr-send small{ display:none; }        /* Ctrl+Enter の案内は要らない */
  #nr-root .nr-send .nr-wrapup{ display:none; }   /* 「ここで締める」は その他 の中にある */
  #nr-root .nr-send button{
    min-height:2.6rem;
    font-size:.82rem;
    padding:.5rem 1rem;
    white-space:nowrap;
  }
  #nr-root .nr-send .nr-afterend,
  #nr-root .nr-send .nr-gapgo{
    min-height:0;
    font-size:.66rem;
    padding:.32rem .6rem;
  }

  /* ── 5. Dom/Sub の箱。ふだんは見出しと状態の一行だけ ── */
  #nr-root .nr-dyn{ padding:.5rem .6rem; }
  #nr-root .nr-dynhead{ font-size:.72rem; }
  #nr-root .nr-dynhead button{ padding:.16rem .5rem; font-size:.64rem; }
  #nr-root .nr-dynstate{ font-size:.7rem; margin:.3rem 0 .2rem; }
  #nr-root .nr-dynhint{ font-size:.64rem; }
  #nr-root .nr-dynends{ font-size:.58rem; }
}

/* 画面が広いときは、たたむ機能を無効にする（右の余白に縦長の札を置ける幅から） */
@media (min-width:72rem){
  #nr-root .nr-dyn.nr-canfold .nr-dynhead{ cursor:default; }
  #nr-root .nr-dyn.nr-canfold .nr-dynhead::after{ content:none; }
  #nr-root .nr-dyn.nr-canfold.nr-fold .nr-dyntrack,
  #nr-root .nr-dyn.nr-canfold.nr-fold .nr-dynends,
  #nr-root .nr-dyn.nr-canfold.nr-fold .nr-dynhint,
  #nr-root .nr-dyn.nr-canfold.nr-fold .nr-dynacts{ display:flex; }
  #nr-root .nr-dyn.nr-canfold.nr-fold .nr-dynhint,
  #nr-root .nr-dyn.nr-canfold.nr-fold .nr-dyntrack{ display:block; }
}


/* ══════════════════════════════════════════════
   スクロールバー
   ── 細く、舞台の差し色に合わせる。PC・Android向け。
      iOSのSafariはスクロールバーの見た目を変えられないので、
      そこは標準のまま ──
   ══════════════════════════════════════════════ */

/* ページ全体（このページだけ）。色はJSが舞台の --accent を写して渡す */
html.nr-app-page{
  scrollbar-width:thin;
  scrollbar-color:var(--nr-sb, rgba(255,255,255,.28)) transparent;
}
html.nr-app-page::-webkit-scrollbar{ width:6px; height:6px; }
html.nr-app-page::-webkit-scrollbar-track{ background:transparent; }
html.nr-app-page::-webkit-scrollbar-thumb{
  background:var(--nr-sb, rgba(255,255,255,.28));
  border-radius:999px;
  opacity:.7;
}
html.nr-app-page::-webkit-scrollbar-thumb:hover{ opacity:1; }

/* アプリの中でスクロールするもの（長くなった書く欄など） */
#nr-root *{
  scrollbar-width:thin;
  scrollbar-color:var(--accent-dim) transparent;
}
#nr-root *::-webkit-scrollbar{ width:5px; height:5px; }
#nr-root *::-webkit-scrollbar-track{ background:transparent; }
#nr-root *::-webkit-scrollbar-thumb{ background:var(--accent-dim); border-radius:999px; }
#nr-root *::-webkit-scrollbar-thumb:hover{ background:var(--accent); }


/* ══════════════════════════════════════════════
   見た目（アイコン・キャラの色）
   ══════════════════════════════════════════════ */

#nr-root .nr-lookbox{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:.8rem .85rem;
  margin:.9rem 0 .2rem;
}
#nr-root .nr-lookh{
  font-family:var(--sans);
  font-size:.64rem;
  letter-spacing:.14em;
  color:var(--accent);
  margin:0 0 .3rem;
}
#nr-root .nr-looknote{
  font-size:.68rem;
  color:var(--paper-dim);
  line-height:1.7;
  margin:0 0 .7rem;
}
#nr-root .nr-lkrow{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.5rem 0;
  border-top:1px solid var(--line-2);
}
#nr-root .nr-lkrow:first-of-type{ border-top:none; }

#nr-root .nr-lkavawrap{ position:relative; flex:none; }
#nr-root .nr-lkava{
  width:3rem; height:3rem;
  border-radius:50%;
  border:2px solid var(--line);
  background:var(--field) center/cover no-repeat;
  font-family:var(--serif);
  font-size:1.1rem;
  line-height:1;
  padding:0;
  display:flex; align-items:center; justify-content:center;
}
#nr-root .nr-lkava[disabled]{ opacity:.5; }
#nr-root .nr-lkfile{
  position:absolute; width:1px; height:1px;
  opacity:0; pointer-events:none;
}
/* 丸の右下に小さな「＋」。押せる丸だと分かるように。画像が入ったら消える */
#nr-root .nr-lkava{ position:relative; cursor:pointer; }
#nr-root .nr-lkava[data-empty="1"]::after{
  content:"＋";
  position:absolute; right:-.2rem; bottom:-.2rem;
  width:1.05rem; height:1.05rem;
  border-radius:50%;
  background:var(--accent);
  color:var(--ink);
  font-family:var(--sans);
  font-size:.62rem; font-weight:700; line-height:1.05rem;
  text-align:center;
  box-shadow:0 0 0 2px var(--ink);
}
#nr-root .nr-lkava:hover{ border-color:var(--accent); }
#nr-root .nr-lkavawrap{ display:inline-flex; align-items:center; gap:.55rem; }
#nr-root .nr-lkact{ display:flex; flex-direction:column; gap:.15rem; align-items:flex-start; }
#nr-root .nr-lklink{
  background:none; border:none; padding:0;
  font-size:.68rem; color:var(--paper-dim);
  border-bottom:1px solid var(--line); line-height:1.5; cursor:pointer;
}
#nr-root .nr-lklink:hover{ color:var(--paper); border-color:var(--accent); }
#nr-root .nr-lkclear{ opacity:.8; }
#nr-root .nr-lkmid{ flex:1; min-width:0; }
#nr-root .nr-lkmid b{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:.9rem;
  margin-bottom:.35rem;
}
#nr-root .nr-lkhues{ display:flex; gap:.3rem; flex-wrap:wrap; align-items:center; }
#nr-root .nr-lkhue{
  width:1.35rem; height:1.35rem;
  border-radius:50%;
  border:2px solid transparent;
  padding:0;
}
#nr-root .nr-lkhue.on{ border-color:var(--paper); }
#nr-root .nr-lkfree{
  width:1.6rem; height:1.6rem;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:none;
}
#nr-root .nr-ava.has-icon{
  background-size:cover;
  background-position:center;
  border-width:2px;
  border-style:solid;
}

@media (max-width:30rem){
  #nr-root .nr-lookbox{ padding:.7rem .65rem; }
  #nr-root .nr-lkava{ width:2.6rem; height:2.6rem; }
  #nr-root .nr-lkhue{ width:1.5rem; height:1.5rem; }
  #nr-root .nr-lkfree{ width:1.7rem; height:1.7rem; }
}


/* ══════════════════════════════════════════════
   表紙・PDFの道具へ渡すときの画面
   ══════════════════════════════════════════════ */

#nr-root .nr-hand,
body > .nr-hand{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(10,9,14,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.2rem;
}
body > .nr-hand .nr-handin{
  background:#191624;
  color:#E8E2D4;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:1.4rem 1.2rem 1.1rem;
  max-width:24rem;
  width:100%;
  text-align:center;
  font-family:"Noto Serif JP",serif;
}
body > .nr-hand h3{
  font-size:1rem;
  font-weight:400;
  letter-spacing:.06em;
  margin:0 0 .6rem;
}
body > .nr-hand .nr-handnote{
  font-size:.8rem;
  line-height:1.9;
  color:rgba(232,226,212,.72);
  margin:0 0 1rem;
  text-align:left;
}
body > .nr-hand .nr-handbar{
  height:3px;
  border-radius:2px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
  margin:.4rem 0 .2rem;
}
body > .nr-hand .nr-handbar i{
  display:block;
  height:100%;
  width:35%;
  background:#C99A4E;
  border-radius:2px;
  animation:nr-handrun 1s linear infinite;
}
@keyframes nr-handrun{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(340%); }
}
body > .nr-hand button{
  display:block;
  width:100%;
  margin:.4rem 0 0;
  padding:.7rem 1rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:none;
  color:inherit;
  font-family:inherit;
  font-size:.86rem;
  cursor:pointer;
}
body > .nr-hand button.go{
  background:#C99A4E;
  border-color:#C99A4E;
  color:#191624;
}
body > .nr-hand button.nr-handclose{
  border-color:transparent;
  color:rgba(232,226,212,.6);
  font-size:.78rem;
}


/* ══════════════════════════════════════════════
   入口（スマホの冒頭）
   ══════════════════════════════════════════════ */

#nr-root #nr-setup.nr-gated > *{ display:none; }
#nr-root #nr-setup.nr-gated > .nr-head,
#nr-root #nr-setup.nr-gated > .nr-resume:not(.nr-hidden),
#nr-root #nr-setup.nr-gated > .nr-gate{ display:block; }

/* 入口のときは、頭を軽くする */
#nr-root #nr-setup.nr-gated .nr-pts{ display:none; }

#nr-root .nr-gate{ margin:1.2rem 0 .4rem; }
#nr-root .nr-gatelead{
  font-size:.78rem;
  line-height:1.9;
  color:var(--paper-dim);
  margin:0 0 .9rem;
}
#nr-root .nr-gatego{
  display:block;
  width:100%;
  background:var(--accent);
  color:var(--ink);
  border:none;
  border-radius:999px;
  padding:1rem 1.2rem;
  font-family:var(--serif);
  font-size:1.02rem;
  letter-spacing:.08em;
  margin-bottom:.55rem;
}
#nr-root .nr-gateown{
  display:block;
  width:100%;
  background:none;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.7rem 1.2rem;
  font-family:var(--serif);
  font-size:.86rem;
  color:var(--paper-dim);
}

/* ══════════════════════════════════════════════
   口ぶり
   ══════════════════════════════════════════════ */

#nr-root .nr-vbox{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:.8rem .85rem;
  margin:.9rem 0 .2rem;
}
#nr-root .nr-vh{
  font-family:var(--sans);
  font-size:.64rem;
  letter-spacing:.14em;
  color:var(--accent);
  margin:0 0 .3rem;
}
#nr-root .nr-vnote{
  font-size:.68rem;
  line-height:1.7;
  color:var(--paper-dim);
  margin:0 0 .7rem;
}
#nr-root .nr-vrow{
  padding:.55rem 0;
  border-top:1px solid var(--line-2);
}
#nr-root .nr-vrow:first-of-type{ border-top:none; }
#nr-root .nr-vrow > b{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:.9rem;
  margin-bottom:.4rem;
}
#nr-root .nr-vchips{ display:flex; flex-wrap:wrap; gap:.35rem; }
#nr-root .nr-vchip{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:.35rem .6rem;
  font-family:var(--serif);
  font-size:.78rem;
  text-align:left;
  line-height:1.4;
}
#nr-root .nr-vchip small{
  display:block;
  font-family:var(--sans);
  font-size:.56rem;
  letter-spacing:.04em;
  color:var(--paper-dim);
  margin-top:.1rem;
}
#nr-root .nr-vchip.on{
  border-color:var(--accent);
  background:var(--accent-dim);
}
#nr-root .nr-vnow{
  font-size:.66rem;
  line-height:1.7;
  color:var(--paper-dim);
  margin:.45rem 0 0;
}

/* ── 口振：引っぱる／素直じゃない を選んだときの覚え書き ── */
#nr-root .nr-vcare{
  margin:.5rem 0 .1rem;
  padding:.05rem 0 .05rem .7rem;
  border-left:2px solid var(--seal);
  font-size:.66rem;
  line-height:1.85;
  color:var(--paper-dim);
}
#nr-root .nr-vcare b{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:.72rem;
  color:var(--seal);
  margin-bottom:.15rem;
}

/* ══════════════════════════════════════════════
   書くときの言い回し
   ══════════════════════════════════════════════ */

#nr-root .nr-tips{ margin:.15rem 0 .4rem; }
#nr-root .nr-tiptog{
  background:none;
  border:1px dashed var(--line);
  border-radius:999px;
  padding:.2rem .65rem;
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.06em;
  color:var(--paper-dim);
}
#nr-root .nr-tiptog:hover{ border-color:var(--accent); color:var(--paper); }
#nr-root .nr-tiplist{
  display:flex;
  flex-wrap:wrap;
  gap:.3rem;
  margin-top:.35rem;
}
#nr-root .nr-tiplist.nr-hidden{ display:none; }
#nr-root .nr-tip{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:.3rem .6rem;
  font-family:var(--serif);
  font-size:.76rem;
}
#nr-root .nr-tip:hover{ border-color:var(--accent); }

@media (max-width:30rem){
  #nr-root .nr-vbox{ padding:.7rem .65rem; }
  #nr-root .nr-vchip{ font-size:.74rem; padding:.32rem .55rem; }
  /* 書くときの手がかりは、狭いときこそ要る。名前の行も出しておく */
  #nr-root .nr-me{ font-size:.7rem; line-height:1.5; }
  #nr-root .nr-me b{ font-size:.72rem; }
}

/* 口振：ほかの型を開くボタンと、その並び */
#nr-root .nr-vmore{
  background:none;
  border:none;
  padding:.35rem 0 0;
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.08em;
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:.2em;
}
#nr-root .nr-vrest{ margin-top:.35rem; }
#nr-root .nr-vrest.nr-hidden{ display:none; }


/* ══════════════════════════════════════════════
   ふりかえり
   ══════════════════════════════════════════════ */

/* 確認画面での選択 */
#nr-root .nr-fbbox{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:.8rem .85rem;
  margin:.9rem 0 .2rem;
}
#nr-root .nr-fbh{
  font-family:var(--sans);
  font-size:.64rem;
  letter-spacing:.14em;
  color:var(--accent);
  margin:0 0 .3rem;
}
#nr-root .nr-fbnote{
  font-size:.68rem;
  line-height:1.7;
  color:var(--paper-dim);
  margin:0 0 .7rem;
}
#nr-root .nr-fbchips{ display:flex; flex-wrap:wrap; gap:.35rem; }
#nr-root .nr-fbchip{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:.35rem .6rem;
  font-family:var(--serif);
  font-size:.78rem;
  text-align:left;
  line-height:1.4;
}
#nr-root .nr-fbchip small{
  display:block;
  font-family:var(--sans);
  font-size:.56rem;
  letter-spacing:.04em;
  color:var(--paper-dim);
  margin-top:.1rem;
}
#nr-root .nr-fbchip.on{ border-color:var(--accent); background:var(--accent-dim); }

/* 遊んでいる最中に出る札 */
#nr-root .nr-fb{
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--r);
  background:var(--surface);
  padding:.9rem .85rem;
  margin:1rem 0;
}
#nr-root .nr-fb.down{ border-left-color:var(--paper-dim); }
#nr-root .nr-fb h3{
  font-family:var(--serif);
  font-size:.96rem;
  margin:0 0 .2rem;
}
#nr-root .nr-fbsub{
  font-size:.68rem;
  color:var(--paper-dim);
  margin:0 0 .9rem;
  line-height:1.7;
}
#nr-root .nr-fbq{
  font-family:var(--serif);
  font-size:.84rem;
  margin:0 0 .45rem;
}
#nr-root .nr-fbq2{ margin-top:1.1rem; }
#nr-root .nr-fbhint{
  font-size:.66rem;
  color:var(--paper-dim);
  margin:-.3rem 0 .5rem;
  line-height:1.6;
}

#nr-root .nr-fblines{ display:flex; flex-direction:column; gap:.3rem; }
#nr-root .nr-fbline{
  background:var(--field);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:.45rem .6rem;
  font-family:var(--serif);
  font-size:.8rem;
  text-align:left;
  line-height:1.6;
}
#nr-root .nr-fbline.on{ border-color:var(--accent); background:var(--accent-dim); }
#nr-root .nr-fbnone{ font-size:.72rem; color:var(--paper-dim); }

#nr-root .nr-fbscale{ display:flex; flex-direction:column; gap:.25rem; }
#nr-root .nr-fbstep{
  display:flex;
  align-items:center;
  gap:.5rem;
  background:none;
  border:1px solid transparent;
  border-radius:var(--r);
  padding:.4rem .5rem;
  font-family:var(--serif);
  font-size:.78rem;
  text-align:left;
  line-height:1.5;
  color:var(--paper-dim);
}
#nr-root .nr-fbstep i{
  flex:none;
  width:.7rem; height:.7rem;
  border-radius:50%;
  border:1px solid var(--line);
}
#nr-root .nr-fbstep.on{ color:var(--paper); border-color:var(--line); }
#nr-root .nr-fbstep.on i{ background:var(--accent); border-color:var(--accent); }

#nr-root .nr-fbta{
  width:100%;
  background:var(--field);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:.5rem .6rem;
  font-family:var(--serif);
  line-height:1.7;
  resize:none;
}
#nr-root .nr-fbgo{
  display:block;
  width:100%;
  margin-top:.9rem;
  padding:.65rem 1rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:none;
  font-family:var(--serif);
  font-size:.88rem;
  color:var(--paper-dim);
}
#nr-root .nr-fbgo.ready{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink);
}
#nr-root .nr-fbskip{
  display:block;
  width:100%;
  margin-top:.35rem;
  padding:.35rem;
  background:none;
  border:none;
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.06em;
  color:var(--paper-dim);
  text-decoration:underline;
  text-underline-offset:.2em;
}
#nr-root .nr-fbback{
  margin:.8rem 0 0;
  padding-top:.7rem;
  border-top:1px solid var(--line-2);
  font-family:var(--serif);
  font-size:.82rem;
  line-height:1.9;
  color:var(--accent);
}

/* 終わったあとのまとめ */
#nr-root .nr-fbsum{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:.9rem .85rem;
  margin:1rem 0;
}
#nr-root .nr-fbsum h3{
  font-family:var(--serif);
  font-size:.94rem;
  margin:0 0 .3rem;
}
#nr-root .nr-fbsumline{
  font-size:.72rem;
  line-height:1.8;
  color:var(--paper-dim);
  margin:0 0 .8rem;
}
#nr-root .nr-fbrow{
  border-top:1px solid var(--line-2);
  padding:.6rem 0 .1rem;
  border-left:2px solid var(--accent);
  padding-left:.6rem;
  margin-bottom:.2rem;
}
#nr-root .nr-fbrow.down{ border-left-color:var(--paper-dim); }
#nr-root .nr-fbrow > b{
  display:block;
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.08em;
  font-weight:400;
  color:var(--paper-dim);
  margin-bottom:.25rem;
}
#nr-root .nr-fbrowline{
  font-family:var(--serif);
  font-size:.82rem;
  line-height:1.8;
  margin:0 0 .2rem;
}
#nr-root .nr-fbrowscale{
  font-size:.68rem;
  color:var(--accent);
  margin:0 0 .2rem;
}
#nr-root .nr-fbrowchr{
  font-size:.74rem;
  color:var(--paper-dim);
  line-height:1.7;
  margin:0;
}

@media (max-width:30rem){
  #nr-root .nr-fbbox{ padding:.7rem .65rem; }
  #nr-root .nr-fb{ padding:.8rem .7rem; }
  #nr-root .nr-fbta{ font-size:16px; }
}

/* ── ふりかえり：いつ出すか ── */
#nr-root .nr-fbwhen{ margin-top:.7rem; padding-top:.6rem; border-top:1px solid var(--line-2); }
#nr-root .nr-fbwhenl{
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.1em;
  color:var(--paper-dim);
  margin:0 0 .35rem;
}

/* ── ふりかえり：往復で見せる ── */
#nr-root .nr-fbpair{
  display:block;
  width:100%;
  background:var(--field);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:.5rem .6rem;
  text-align:left;
}
#nr-root .nr-fbpair.on{ border-color:var(--accent); background:var(--accent-dim); }
#nr-root .nr-fbmine,
#nr-root .nr-fbtheirs{
  display:block;
  font-family:var(--serif);
  line-height:1.7;
}
#nr-root .nr-fbmine{
  font-size:.74rem;
  color:var(--paper-dim);
  padding-bottom:.3rem;
  margin-bottom:.3rem;
  border-bottom:1px dashed var(--line-2);
}
#nr-root .nr-fbtheirs{ font-size:.82rem; }
#nr-root .nr-fbmine i,
#nr-root .nr-fbtheirs i{
  display:inline-block;
  font-family:var(--sans);
  font-style:normal;
  font-size:.56rem;
  letter-spacing:.08em;
  color:var(--paper-dim);
  margin-right:.45rem;
}

/* ── ふりかえり：もやもや（残らない欄） ── */
#nr-root .nr-fbmoyatog{
  display:block;
  width:100%;
  margin-top:.7rem;
  padding:.4rem;
  background:none;
  border:1px dashed var(--line);
  border-radius:999px;
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.08em;
  color:var(--paper-dim);
}
#nr-root .nr-fbmoyatog:hover{ border-color:var(--accent); color:var(--paper); }
#nr-root .nr-fbmoya{ margin-top:.5rem; }
#nr-root .nr-fbmoya.nr-hidden{ display:none; }
#nr-root .nr-fbmoyanote{
  font-size:.64rem;
  line-height:1.7;
  color:var(--paper-dim);
  margin:0 0 .35rem;
}
#nr-root .nr-fbmoyata{ border-style:dashed; }

/* ── ふりかえり：あとでまとめる前置き ── */
#nr-root .nr-fblead{
  border-top:1px solid var(--line);
  padding-top:1rem;
  margin:1.4rem 0 .2rem;
}
#nr-root .nr-fblead h3{
  font-family:var(--serif);
  font-size:.98rem;
  margin:0 0 .3rem;
}
#nr-root .nr-fblead p{
  font-size:.74rem;
  line-height:1.9;
  color:var(--paper-dim);
  margin:0;
}

/* ── ふりかえり：離れたところが続いたときの抜け道 ── */
#nr-root .nr-fbways{
  margin-top:.9rem;
  padding-top:.8rem;
  border-top:1px solid var(--line-2);
}
#nr-root .nr-fbwayst{
  font-family:var(--serif);
  font-size:.82rem;
  line-height:1.9;
  margin:0 0 .6rem;
}
#nr-root .nr-fbway{
  display:block;
  width:100%;
  margin-bottom:.35rem;
  padding:.6rem .8rem;
  background:var(--field);
  border:1px solid var(--line);
  border-radius:var(--r);
  font-family:var(--serif);
  font-size:.84rem;
  text-align:left;
  line-height:1.5;
}
#nr-root .nr-fbway small{
  display:block;
  font-family:var(--sans);
  font-size:.58rem;
  letter-spacing:.04em;
  color:var(--paper-dim);
  margin-top:.2rem;
  line-height:1.6;
}
#nr-root .nr-fbway:hover{ border-color:var(--accent); }

/* ── 見た目・口振を「二人のこと」の中に置くときは、枠を外して行になじませる ── */
#nr-root .nr-lookbox.nr-flat,
#nr-root .nr-vbox.nr-flat{
  border:none;
  border-top:1px solid var(--line-2);
  border-radius:0;
  padding:.9rem 0 .3rem;
  margin:0;
}

/* ── 見た目：名前を見出しに、アイコンと色を一行に ── */
#nr-root .nr-lkrow{ display:block; }
#nr-root .nr-lkrow > b{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:.9rem;
  margin-bottom:.45rem;
}
#nr-root .nr-lkmid{
  display:flex;
  align-items:center;
  gap:.7rem;
  flex-wrap:wrap;
}
#nr-root .nr-lkmid b{ display:none; }

/* 自由に選ぶ色。既定だと四角い枠が出るので、丸にそろえる */
#nr-root .nr-lkfree{
  width:1.35rem;
  height:1.35rem;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:none;
  overflow:hidden;
  cursor:pointer;
}
#nr-root .nr-lkfree::-webkit-color-swatch-wrapper{ padding:0; }
#nr-root .nr-lkfree::-webkit-color-swatch{ border:none; border-radius:50%; }
#nr-root .nr-lkfree::-moz-color-swatch{ border:none; border-radius:50%; }

@media (max-width:30rem){
  #nr-root .nr-lkfree{ width:1.5rem; height:1.5rem; }
}

/* ── 口振：分類の見出し ── */
#nr-root .nr-vglab{
  display:flex;
  align-items:baseline;
  gap:.5rem;
  margin:.7rem 0 .3rem;
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.12em;
  color:var(--accent);
}
#nr-root .nr-vglab:first-of-type{ margin-top:.2rem; }
#nr-root .nr-vglab small{
  font-size:.56rem;
  letter-spacing:.04em;
  color:var(--paper-dim);
}

/* ── 口振：まず分類だけ、五つ ── */
#nr-root .nr-vgroups{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(8.5rem, 1fr));
  gap:.4rem;
}
#nr-root .nr-vgroup{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:.6rem .7rem;
  font-family:var(--serif);
  font-size:.86rem;
  text-align:left;
  line-height:1.4;
}
#nr-root .nr-vgroup small{
  display:block;
  font-family:var(--sans);
  font-size:.56rem;
  letter-spacing:.04em;
  color:var(--paper-dim);
  margin-top:.2rem;
}
#nr-root .nr-vgroup:hover{ border-color:var(--accent); }

#nr-root .nr-vomakase{
  display:block;
  width:100%;
  margin-top:.4rem;
  padding:.45rem;
  background:none;
  border:1px dashed var(--line);
  border-radius:var(--r);
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.08em;
  color:var(--paper-dim);
}
#nr-root .nr-vomakase:hover{ border-color:var(--accent); color:var(--paper); }

/* ── 口振：分類を開いたとき ── */
#nr-root .nr-vback{
  background:none;
  border:none;
  padding:0 0 .1rem;
  font-family:var(--sans);
  font-size:.64rem;
  letter-spacing:.1em;
  color:var(--accent);
}
#nr-root .nr-vgnote{
  font-size:.6rem;
  color:var(--paper-dim);
  margin:0 0 .45rem;
}

/* ── 口振：決まったあと ── */
#nr-root .nr-vdone{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.5rem;
  background:var(--accent-dim);
  border:1px solid var(--accent);
  border-radius:var(--r);
  padding:.5rem .7rem;
}
#nr-root .nr-vdone b{
  font-family:var(--serif);
  font-weight:400;
  font-size:.94rem;
}
#nr-root .nr-vdone span{
  flex:1;
  font-family:var(--sans);
  font-size:.6rem;
  color:var(--paper-dim);
}
#nr-root .nr-vre{
  background:none;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.16rem .6rem;
  font-family:var(--sans);
  font-size:.58rem;
  letter-spacing:.06em;
  color:var(--paper-dim);
}

/* ── 口振：札は名前だけ。小さく、たくさん並んでも重くならないように ── */
#nr-root .nr-vchips{ gap:.3rem; }
#nr-root .nr-vchip{
  padding:.28rem .6rem;
  font-size:.82rem;
  line-height:1.35;
  display:inline-flex;
  align-items:baseline;
  gap:.3rem;
}
#nr-root .nr-vchip small{
  display:inline;
  margin-top:0;
  font-size:.52rem;
  letter-spacing:.02em;
}
#nr-root .nr-vnow{
  min-height:1.1rem;
  font-size:.66rem;
}
#nr-root .nr-vnow.on{ color:var(--paper); }

/* ── 気持ちを決めるとき、相手の言葉を添える ── */
#nr-root .nr-hsaid{
  border-left:2px solid var(--accent);
  padding:.1rem 0 .1rem .7rem;
  margin:.2rem 0 .8rem;
}
#nr-root .nr-hsaidlab{
  font-family:var(--sans);
  font-size:.58rem;
  letter-spacing:.1em;
  color:var(--paper-dim);
  margin:0 0 .2rem;
}
#nr-root .nr-hsaidq{
  font-family:var(--serif);
  font-size:.86rem;
  line-height:1.9;
  margin:0;
}

/* ── 入口の二行目 ── */
#nr-root .nr-gatelead2{
  font-size:.7rem;
  margin-top:-.5rem;
}
#nr-root .nr-vnew{ margin-top:.3rem; }


/* ══════════════════════════════════════════════
   扉（とびら）
   ── 同人誌の扉ページとして組み直す。
      紙と、朱の罫。飾りはそれだけ。
      大きく見せるのは題字ひとつに絞る ──
   ══════════════════════════════════════════════ */

#nr-root{
  /* 朱。飾りではなく、しるしとして使う */
  --seal:#B23A48;
}
#nr-root[data-tone="light"]{
  /* 生成りの黄みを抜いて、白練寄りの紙にする。
     いま出回っているクリーム＋金茶の組み合わせから離すため */
  --ink:#EDECE6;
  --ink-2:#F7F6F2;
  --paper:#221F28;
  --paper-dim:#6E6879;
  --line:rgba(34,31,40,.16);
  --line-2:rgba(34,31,40,.08);
  --seal:#A8323F;
}

/* ── 扉のときだけ、余白を大きく取る ── */
#nr-root #nr-setup.nr-gated{
  padding-top:3.6rem;
  padding-bottom:4rem;
}

/* 全部大文字の小見出しは、いかにも作りもの。しるしの罫に置き換える */
#nr-root #nr-setup.nr-gated .nr-sub{ display:none; }

#nr-root #nr-setup.nr-gated .nr-head{
  position:relative;
  padding-left:1.1rem;
  margin-bottom:1.9rem;
}
#nr-root #nr-setup.nr-gated .nr-head::before{
  content:"";
  position:absolute;
  left:0;
  top:.34em;
  width:2px;
  height:2.1em;
  background:var(--seal);
}

#nr-root #nr-setup.nr-gated .nr-title{
  font-size:2.1rem;
  letter-spacing:.26em;
  line-height:1.35;
  margin:0 0 .55rem;
}
#nr-root #nr-setup.nr-gated .nr-lead{
  font-family:var(--serif);
  font-size:.92rem;
  line-height:2;
  color:var(--paper);
  max-width:26em;
}

/* ── 売り文句。明朝で、行を短く。読ませる文章として組む ── */
#nr-root .nr-gate{ margin:0; }
#nr-root .nr-gatelead{
  font-family:var(--serif);
  font-size:.88rem;
  line-height:2.1;
  color:var(--paper);
  max-width:24em;
  margin:0 0 1.6rem;
}
#nr-root .nr-gatelead2{
  font-family:var(--sans);
  font-size:.72rem;
  line-height:1.9;
  color:var(--paper-dim);
  margin:-1.1rem 0 1.6rem;
  max-width:26em;
}

/* ── 主と従。並びの太さを変えて、迷わせない ── */
#nr-root .nr-gatego{
  width:auto;
  min-width:16rem;
  display:inline-block;
  background:var(--paper);
  color:var(--ink);
  border:none;
  border-radius:2px;
  padding:1.05rem 2.4rem;
  font-family:var(--serif);
  font-size:1rem;
  letter-spacing:.22em;
  margin:0 0 1rem;
  transition:background .18s;
}
#nr-root .nr-gatego:hover{ background:var(--seal); color:#fff; }

#nr-root .nr-gateown{
  display:inline-block;
  width:auto;
  background:none;
  border:none;
  border-radius:0;
  padding:.2rem 0;
  font-family:var(--serif);
  font-size:.88rem;
  letter-spacing:.14em;
  color:var(--paper-dim);
  border-bottom:1px solid var(--line);
}
#nr-root .nr-gateown:hover{ color:var(--paper); border-bottom-color:var(--seal); }

/* ── 遊び方のたたみは、いちばん下へ ── */
#nr-root #nr-setup.nr-gated .nr-about{
  order:9;
  margin-top:2.6rem;
  border:none;
  border-top:1px solid var(--line);
  border-radius:0;
  background:none;
}
#nr-root #nr-setup.nr-gated .nr-about > summary{
  padding:.9rem 0;
  font-family:var(--serif);
  font-size:.82rem;
  letter-spacing:.1em;
}
#nr-root #nr-setup.nr-gated .nr-about[open] > summary{ border-bottom:none; }
#nr-root #nr-setup.nr-gated .nr-aboutin{ padding:0 0 .8rem; }

/* 扉は縦に積む。遊び方を最後に回すため */
#nr-root #nr-setup.nr-gated{ display:flex; flex-direction:column; }
#nr-root #nr-setup.nr-gated > .nr-head{ order:1; }
#nr-root #nr-setup.nr-gated > .nr-gate{ order:2; }
#nr-root #nr-setup.nr-gated > .nr-resume{ order:3; }

/* ── 段の表示。STEP という全部大文字をやめる ── */
#nr-root .nr-stepnow{
  font-family:var(--serif);
  font-size:.74rem;
  letter-spacing:.18em;
}

@media (max-width:30rem){
  #nr-root #nr-setup.nr-gated{ padding-top:2.4rem; }
  #nr-root #nr-setup.nr-gated .nr-title{ font-size:1.6rem; letter-spacing:.2em; }
  #nr-root #nr-setup.nr-gated .nr-lead{ font-size:.86rem; }
  #nr-root .nr-gatelead{ font-size:.84rem; line-height:2; }
  #nr-root .nr-gatego{ width:100%; min-width:0; padding:1rem 1.2rem; }
  #nr-root .nr-gateown{ display:block; margin-top:.3rem; }
}

/* 続きから は、扉のボタンより先に見せる（戻ってきた人の用がそれなので） */
#nr-root #nr-setup.nr-gated > .nr-resume{ order:2; margin-bottom:1.6rem; }
#nr-root #nr-setup.nr-gated > .nr-gate{ order:3; }

/* ── 節の見出し。字間を広げた小さなゴシックは、どのページでも見かける作り。
      明朝＋朱の短い罫にして、この部屋のものにする ── */
#nr-root .nr-lookh,
#nr-root .nr-vh,
#nr-root .nr-fbh{
  position:relative;
  padding-left:.8rem;
  font-family:var(--serif);
  font-size:.86rem;
  letter-spacing:.12em;
  color:var(--paper);
  margin:0 0 .4rem;
}
#nr-root .nr-lookh::before,
#nr-root .nr-vh::before,
#nr-root .nr-fbh::before{
  content:"";
  position:absolute;
  left:0;
  top:.3em;
  width:2px;
  height:1em;
  background:var(--seal);
}

/* ══════════════════════════════════════════════
   扉のボタン（作り直し）
   ── 主は、押せるものとして見える形に。
      従は、主の下に離して置く ──
   ══════════════════════════════════════════════ */

#nr-root .nr-gate{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

#nr-root .nr-gatego{
  position:relative;
  display:block;
  width:100%;
  max-width:24em;
  min-width:0;
  background:var(--paper);
  color:var(--ink);
  border:none;
  border-radius:6px;
  padding:1.1rem 1.4rem 1.1rem 2.1rem;
  font-family:var(--serif);
  font-size:1rem;
  letter-spacing:.2em;
  text-align:left;
  margin:0;
  cursor:pointer;
  transition:transform .12s, box-shadow .18s, background .18s;
  box-shadow:0 1px 0 rgba(34,31,40,.18);
}
/* 押せるもののしるし。左端の朱の帯 */
#nr-root .nr-gatego::before{
  content:"";
  position:absolute;
  left:.9rem;
  top:1.35rem;
  bottom:1.35rem;
  width:3px;
  border-radius:2px;
  background:var(--seal);
}
#nr-root .nr-gatego:hover{
  transform:translateY(-1px);
  box-shadow:0 3px 0 rgba(34,31,40,.18);
}
#nr-root .nr-gatego:active{
  transform:translateY(1px);
  box-shadow:0 0 0 rgba(34,31,40,.18);
}

/* ── ライト／ダーク。塗らない。上の札の行き先を変えるだけ ── */
#nr-root .nr-gatetier{
  display:flex;
  align-items:baseline;
  gap:.75rem;
  margin:.95rem 0 .4rem;
}
#nr-root .nr-gatetbtn{
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  border-radius:0;
  padding:.12rem .1rem;
  font-family:var(--serif);
  font-size:.95rem;
  letter-spacing:.14em;
  line-height:1.5;
  color:var(--paper-dim);
  cursor:pointer;
  transition:color .16s;
}
#nr-root .nr-gatetbtn:hover{ color:var(--paper); }
#nr-root .nr-gatetbtn[aria-pressed="true"]{
  color:var(--paper);
  border-bottom-color:var(--seal);
}
#nr-root .nr-gatetsep{
  width:1px;
  height:.95em;
  background:var(--line);
  display:inline-block;
}
#nr-root .nr-gatetnote{
  font-family:var(--sans);
  font-size:.72rem;
  line-height:1.85;
  color:var(--paper-dim);
  max-width:26em;
  margin:0;
  min-height:2.6em;
}

/* ── 従。下線だけの文字のまま、目に入る大きさへ ── */
#nr-root .nr-gateown{
  display:inline-block;
  width:auto;
  max-width:none;
  margin:1.5rem 0 0;
  padding:.3rem .1rem;
  background:none;
  border:none;
  border-bottom:2px solid var(--seal);
  border-radius:0;
  font-family:var(--serif);
  font-size:1.02rem;
  letter-spacing:.18em;
  color:var(--paper);
  cursor:pointer;
  transition:color .16s;
}
#nr-root .nr-gateown:hover{
  color:var(--seal);
  border-bottom-color:var(--seal);
}

/* 「はじめての方へ」は、扉ではいちばん下 */
#nr-root #nr-setup.nr-gated > .nr-about{ order:9; }

@media (max-width:30rem){
  #nr-root .nr-gate{ align-items:stretch; }
  #nr-root .nr-gatego{
    max-width:none;
    padding:1.05rem 1.1rem 1.05rem 1.9rem;
    font-size:.96rem;
    text-align:center;
  }
  #nr-root .nr-gatetier{ justify-content:center; margin-top:.85rem; }
  #nr-root .nr-gatetnote{ text-align:center; margin-inline:auto; }
  #nr-root .nr-gateown{ align-self:center; margin-top:1.3rem; }
}

@media (prefers-reduced-motion:reduce){
  #nr-root .nr-gatego{ transition:none; }
  #nr-root .nr-gatego:hover,
  #nr-root .nr-gatego:active{ transform:none; }
}


/* ══════════════════════════════════════════════
   終わりの道具立て（並べ直したもの）
   ── 平たい札の列をやめ、節に分ける。
      主は一つだけ。左に朱の帯、角は6px ──
   ══════════════════════════════════════════════ */

#nr-root .nr-tools.nr-fin{
  display:block;
  margin-top:1.6rem;
}

/* ── 伏せていたものを開く。まずこれを踏む ── */
#nr-root .nr-fin .nr-fopen{
  display:block;
  width:100%;
  text-align:left;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:6px;
  padding:.8rem 1rem;
  font-family:var(--serif);
  font-size:.95rem;
  letter-spacing:.04em;
}
#nr-root .nr-fin .nr-fopen:disabled{
  opacity:.45;
  cursor:default;
}

/* ── 節の見出し。明朝＋朱の短い罫 ── */
#nr-root .nr-fin .nr-fgrp{
  margin-top:1.7rem;
}
#nr-root .nr-fin .nr-fh{
  position:relative;
  margin:0 0 .75rem;
  padding-left:.75rem;
  font-family:var(--serif);
  font-size:.9rem;
  letter-spacing:.1em;
  color:var(--paper);
}
#nr-root .nr-fin .nr-fh::before{
  content:"";
  position:absolute;
  left:0;
  top:.42em;
  width:3px;
  height:.95em;
  background:var(--seal);
}

/* ── 主。この画面で塗るのはここだけ ── */
#nr-root .nr-fin .nr-fmain{
  position:relative;
  display:block;
  width:100%;
  text-align:left;
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:6px;
  padding:.95rem 1.1rem .95rem 1.25rem;
  font-family:var(--serif);
  font-size:1.02rem;
  letter-spacing:.05em;
  color:var(--on-accent);
  overflow:hidden;
}
#nr-root .nr-fin .nr-fmain::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--seal);
}
#nr-root .nr-fin .nr-fmain small{
  display:block;
  margin-top:.3rem;
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:0;
  opacity:.72;
}
#nr-root .nr-fin .nr-fmain:disabled{ opacity:.6; }

/* ── 従。主と同じ形で、塗らない ── */
#nr-root .nr-fin .nr-fsub{
  position:relative;
  display:block;
  width:100%;
  margin-top:.6rem;
  text-align:left;
  background:none;
  border:1px solid var(--line);
  border-radius:6px;
  padding:.9rem 1.1rem .9rem 1.25rem;
  font-family:var(--serif);
  font-size:.98rem;
  letter-spacing:.05em;
  color:var(--paper);
  overflow:hidden;
}
#nr-root .nr-fin .nr-fsub::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:var(--line);
}
#nr-root .nr-fin .nr-fsub:hover{ border-color:var(--accent); }
#nr-root .nr-fin .nr-fsub:hover::before{ background:var(--accent); }
#nr-root .nr-fin .nr-fsub small{
  display:block;
  margin-top:.3rem;
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:0;
  color:var(--paper-dim);
}
#nr-root .nr-fin .nr-fsub:disabled{ opacity:.6; }

/* ── 従。何のためのものかを左に、押すものを右に ── */
#nr-root .nr-fin .nr-frow{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem 0;
  border-bottom:1px solid var(--line-2);
}
#nr-root .nr-fin .nr-fgrp .nr-frow:first-of-type{
  margin-top:.9rem;
  border-top:1px solid var(--line-2);
}
#nr-root .nr-fin .nr-flab{
  flex:1 1 auto;
  font-size:.82rem;
  color:var(--paper-dim);
}
#nr-root .nr-fin .nr-fbtns{
  flex:0 0 auto;
  display:flex;
  gap:.4rem;
}
#nr-root .nr-fin .nr-frow button{
  background:none;
  border:1px solid var(--line);
  border-radius:6px;
  padding:.4rem .85rem;
  font-size:.8rem;
}

/* ── まだ続ける ── */
#nr-root .nr-fin .nr-fwrap{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
#nr-root .nr-fin .nr-fwrap button{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:6px;
  padding:.55rem 1.05rem;
  font-size:.85rem;
}
#nr-root .nr-fin .nr-frest{
  margin-top:1.2rem;
}

/* ── はじめから。戻れない札なので、いちばん下に細く ── */
#nr-root .nr-fin .nr-ffoot{
  margin-top:1.6rem;
  padding-top:.9rem;
  border-top:1px solid var(--line-2);
}
#nr-root .nr-fin .nr-ffoot button{
  background:none;
  border:0;
  border-radius:0;
  padding:.2rem 0;
  font-size:.78rem;
  color:var(--paper-dim);
  text-decoration:underline;
  text-underline-offset:.3em;
}
#nr-root .nr-fin .nr-ffoot button[data-ask="1"]{
  color:var(--seal);
}

@media (max-width:480px){
  #nr-root .nr-fin .nr-frow{
    display:block;
    padding:.7rem 0;
  }
  #nr-root .nr-fin .nr-flab{
    display:block;
    margin-bottom:.4rem;
  }
  #nr-root .nr-fin .nr-fbtns{ display:flex; }
  #nr-root .nr-fin .nr-frow button{ flex:1 1 0; }
}


/* ══════════════════════════════════════════════
   表紙・PDFの道具へ渡すときの画面（手順を出す）
   ══════════════════════════════════════════════ */

body > .nr-hand .nr-hfile{
  margin:0 0 .5rem;
  font-size:.86rem;
  color:#E7C98A;
  word-break:break-all;
}
body > .nr-hand .nr-hsteps{
  margin:.2rem 0 .9rem;
  text-align:left;
}
body > .nr-hand .nr-hstep{
  display:flex;
  gap:.55rem;
  align-items:flex-start;
  margin:0 0 .55rem;
}
body > .nr-hand .nr-hnum{
  flex:0 0 auto;
  width:1.5rem;
  height:1.5rem;
  margin-top:.15rem;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.72rem;
  color:rgba(232,226,212,.8);
}
body > .nr-hand .nr-hsteptx{
  margin:0;
  font-size:.82rem;
  line-height:1.85;
  color:rgba(232,226,212,.86);
}
body > .nr-hand .nr-hkey{
  color:#191624;
  background:#C99A4E;
  border-radius:4px;
  padding:.05rem .35rem;
  font-weight:400;
  white-space:nowrap;
}
/* 向こうの受け口の見本。同じ形を先に見せておく */
body > .nr-hand .nr-hshot{
  border:1px dashed rgba(255,255,255,.26);
  border-radius:10px;
  padding:.85rem .7rem .95rem;
  text-align:center;
}
body > .nr-hand .nr-hshotlab{
  margin:0 0 .55rem;
  font-size:.74rem;
  color:rgba(232,226,212,.5);
}
body > .nr-hand .nr-hshotbtn{
  display:inline-block;
  border:1px solid #C99A4E;
  color:#C99A4E;
  border-radius:999px;
  padding:.32rem .95rem;
  font-size:.76rem;
}
body > .nr-hand .nr-hshotcap{
  margin:.5rem 0 1rem;
  font-size:.7rem;
  text-align:center;
  color:rgba(232,226,212,.42);
}


/* 言い回しの見本を引き直す札 */
#nr-root .nr-tipmore{
  background:none;
  border:1px dashed var(--line);
  border-radius:999px;
  padding:.3rem .7rem;
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.06em;
  color:var(--paper-dim);
}
#nr-root .nr-tipmore:hover{ border-color:var(--accent); color:var(--paper); }


/* 舞台データが読めなかったときの知らせ。ふだんは出ない */
#nr-root .nr-loadfail{
  margin:.7rem 0 0;
  padding:.7rem .85rem;
  border:1px solid var(--seal);
  border-radius:6px;
  font-size:.78rem;
  line-height:1.8;
  color:var(--paper);
  background:var(--surface);
  text-align:left;
}
#nr-root .nr-loadfail small{
  display:block;
  margin-top:.4rem;
  font-size:.68rem;
  color:var(--paper-dim);
  word-break:break-all;
}


/* 帯の左の、家のしるし。中断の出口をいちばん目につくところに置く */
#nr-root .nr-homebtn{
  width:2.1rem;
  height:1.9rem;
  color:var(--paper-dim);
}
#nr-root .nr-homebtn svg{ display:block; }
#nr-root .nr-bar button.nr-homebtn{ padding:0 !important; }


/* 最後の場面のときだけ、札の行の真ん中に出る出口 */
#nr-root .nr-who .nr-gap{ display:flex; align-items:center; justify-content:center; }
#nr-root .nr-who .nr-endmid{
  flex:none;
  background:none;
  border:1px solid var(--accent);
  border-radius:999px;
  padding:.3rem 1.1rem;
  font-family:var(--serif);
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--accent);
}
#nr-root .nr-who .nr-endmid:hover{ background:var(--accent-dim); color:var(--paper); }
#nr-root .nr-who .nr-endmid.ask{
  border-color:var(--seal);
  color:var(--seal);
}
#nr-root .nr-who .nr-endmid[disabled]{ opacity:.4; border-style:dashed; }

@media (max-width:30rem){
  #nr-root .nr-who .nr-endmid{ padding:.28rem .8rem; font-size:.74rem; }
}


/* ══════════════════════════════════════════════
   設定画面の左上：戻るとホーム
   ── 題字の真上、左端に揃える。
      主役は下の「次へ」なので、こちらは輪郭だけ ──
   ══════════════════════════════════════════════ */

#nr-root .nr-topnav{
  display:flex;
  justify-content:flex-start;
  gap:.4rem;
  margin:0 0 .5rem;
}
#nr-root .nr-topnav.nr-hidden{ display:none; }

#nr-root .nr-topbtn{
  display:inline-flex;
  align-items:center;
  gap:.28rem;
  background:none;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.24rem .7rem;
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.06em;
  line-height:1;
  color:var(--paper-dim);
  cursor:pointer;
}
#nr-root .nr-topbtn.nr-hidden{ display:none; }
#nr-root .nr-topbtn svg{ flex:none; }
#nr-root .nr-topbtn:hover{
  color:var(--paper);
  border-color:var(--paper-dim);
}
#nr-root .nr-tophome:hover{
  color:var(--seal);
  border-color:var(--seal);
}

/* 扉のときは大きく余白を取っているので、そこだけ上へ寄せる */
#nr-root #nr-setup.nr-gated .nr-topnav{ display:none; }

@media (max-width:30rem){
  #nr-root .nr-topnav{ margin-bottom:.35rem; }
  #nr-root .nr-topbtn{ padding:.22rem .6rem; font-size:.6rem; }
}


/* ══════════════════════════════════════════════
   ライトの地の色（作り直し）
   ── 上から金茶をかぶせるのをやめる。
      ダークでは光になるが、生成りの紙では染みに見えていた。
      かわりに和紙の簀の目を三分の一パーセント単位で敷き、
      面が呼吸しているようにだけ見せる ──
   ══════════════════════════════════════════════ */

#nr-root[data-tone="light"]{
  /* 紙。黄みを抜いた白練。文字はわずかに青みを残した墨 */
  --ink:#F0EEE9;
  --ink-2:#FAF9F5;
  --paper:#1F1B24;
  --paper-dim:#6B6572;
  --line:rgba(31,27,36,.16);
  --line-2:rgba(31,27,36,.08);
  --surface:rgba(31,27,36,.035);
  --veil:rgba(240,238,233,.94);
  --fade:rgba(240,238,233,0);
  --field:#FFFFFF;

  /* 簀の目（縦4px）と糸目（44pxごと）。
     どちらも3%以下なので、模様としては見えない。
     いちばん下は、上から差す光。長い画面でも崩れないよう
     560pxで消えるところまでに閉じてある */
  background-image:
    repeating-linear-gradient(90deg, rgba(31,27,36,.030) 0 1px, rgba(31,27,36,0) 1px 4px),
    repeating-linear-gradient(0deg,  rgba(31,27,36,.022) 0 1px, rgba(31,27,36,0) 1px 44px),
    linear-gradient(180deg, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 560px);
  background-repeat:repeat, repeat, no-repeat;
  background-attachment:scroll, scroll, scroll;
}

/* 紙の上に置く面は、地より白くして浮かせる */
#nr-root[data-tone="light"] .nr-sheet,
#nr-root[data-tone="light"] .nr-final{
  box-shadow:0 1px 0 rgba(31,27,36,.05);
}

/* ── 扉の主の札。白い紙に、朱の面をひとつだけ ── */
#nr-root[data-tone="light"] .nr-gatego{
  background:var(--seal);
  color:#F6F2EC;
  box-shadow:0 1px 0 rgba(31,27,36,.22);
}
#nr-root[data-tone="light"] .nr-gatego::before{
  background:rgba(255,255,255,.55);
}
#nr-root[data-tone="light"] .nr-gatego:hover{
  background:#932935;
  color:#FFFFFF;
}


/* ══════════════════════════════════════════════
   スマホの書く欄（作り直し）
   ── 画面の半分をキーボードが取る。そのうえ欄が四段あると、
      話がほとんど見えない。
      よくできている会話アプリと同じく、
      ・入力は一行から
      ・送りは欄の右、同じ高さに
      ・補助は一行に畳む
      という形にして、話の見える高さを稼ぐ ──
   ══════════════════════════════════════════════ */

@media (max-width:30rem){

  #nr-root .nr-composer{
    position:relative;                 /* 言い回しの一覧を、この上に浮かせる */
    padding-top:.45rem;
    align-items:end;
  }

  /* ── 口振の行。名前・文章・なおす・言い回し を一行に ── */
  #nr-root .nr-me{
    flex-wrap:nowrap;
    gap:.4rem;
    font-size:.7rem;
    line-height:1.5;
    min-width:0;
  }
  #nr-root .nr-metx{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  /* 触れると全部出る。ふだんは一行 */
  #nr-root .nr-me.nr-open .nr-metx{ white-space:normal; overflow:visible; }
  #nr-root .nr-me .nr-tips{ flex:none; margin:0; }
  #nr-root .nr-me .nr-meedit{ flex:none; }

  /* 言い回しの一覧は、欄の上に浮かせて全幅で出す */
  #nr-root .nr-tiplist:not(.nr-hidden){
    position:absolute;
    left:0;
    right:0;
    bottom:100%;
    margin-bottom:.4rem;
    background:var(--ink-2);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    padding:.5rem;
    box-shadow:0 -6px 24px var(--shadow);
    max-height:40vh;
    overflow:auto;
    z-index:4;
  }

  #nr-root .nr-metx{ cursor:pointer; }

  /* ── 入力そのもの。一行から始まって、書いたぶんだけ伸びる ── */
  #nr-root .nr-composer textarea{
    min-height:2.5rem;
    border-radius:1.25rem;
    padding:.55rem .95rem;
    line-height:1.6;
  }

  /* ── 送り。欄と同じ高さ、右に ── */
  #nr-root .nr-send{ align-self:end; }
  #nr-root .nr-send button{
    min-height:2.5rem;
    border-radius:999px;
    padding:.5rem 1.05rem;
    font-size:.84rem;
  }
}


/* ══════════════════════════════════════════════
   スマホ：入力まわりの大きさを揃える
   ── 入力欄の文字は 16px から下げられない。
      下げると、iOSが触れた瞬間に画面ごと拡大する。
      そこで文字は動かさず、行間と余白を詰めて、
      箱の中で文字が大きく見えないようにする。
      あわせて、小さすぎた札を少しだけ上げ、
      入力欄との差を縮める ──
   ══════════════════════════════════════════════ */

@media (max-width:30rem){

  /* 書く欄。行間と余白を詰める。文字の大きさは触らない */
  #nr-root .nr-composer textarea{
    line-height:1.45;
    padding:.45rem .85rem;
    min-height:2.35rem;
    border-radius:1.2rem;
  }

  /* 「なおす」の箱。中の入力も 16px なので、まわりを詰めて釣り合わせる */
  #nr-root .nr-mebox{ padding:.55rem .6rem; }
  #nr-root .nr-mebox h4{ font-size:.7rem; margin-bottom:.4rem; }
  #nr-root .nr-mebox label{ gap:.4rem; margin-bottom:.3rem; }
  #nr-root .nr-mebox label span{ width:4.4rem; font-size:.7rem; }
  #nr-root .nr-mebox input{ padding:.3rem .5rem; line-height:1.4; border-radius:10px; }
  #nr-root .nr-merow button{ padding:.32rem .85rem; font-size:.78rem; }

  /* 小さすぎた札を、すこしだけ上げる。
     10px と 16px が隣り合うと、入力欄だけが大きく見える */
  #nr-root .nr-tiptog{ font-size:.68rem; padding:.22rem .7rem; }
  #nr-root .nr-meedit{ font-size:.66rem; padding:.18rem .6rem; }
  #nr-root .nr-me,
  #nr-root .nr-metx{ font-size:.74rem; }
  #nr-root .nr-who button{ font-size:.8rem; }
}


/* ══════════════════════════════════════════════
   場面の口（スマホだけ）
   ── 書く欄の左。押すと欄の上に三つ出る ──
   ══════════════════════════════════════════════ */

#nr-root .nr-scenebtn{ display:none; }
#nr-root .nr-scenesheet{ display:none; }

@media (max-width:30rem){

  /* 名前が縦に折れていたのを止める */
  #nr-root .nr-me b{ flex:none; white-space:nowrap; }

  #nr-root .nr-composer{ grid-template-columns:1fr auto auto; column-gap:.35rem; }
  #nr-root .nr-who{ grid-column:1 / -1; }
  #nr-root .nr-me{ grid-column:1 / -1; }

  /* 「言う」のさらに右。ただし塗らない。
     いちばんよく押す札のとなりなので、
     見た目でも隙間でも、はっきり別のものにしておく */
  #nr-root .nr-scenebtn{
    display:flex;
    align-items:center;
    justify-content:center;
    grid-column:3;
    align-self:end;
    margin-left:.2rem;
    flex:none;
    width:2.35rem;
    height:2.35rem;
    padding:0;
    background:none;
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--paper-dim);
  }
  #nr-root .nr-scenebtn[aria-expanded="true"]{
    border-color:var(--accent);
    background:var(--accent-dim);
    color:var(--paper);
  }

  #nr-root .nr-composer textarea{ grid-column:1; }
  #nr-root .nr-send{ grid-column:2; }

  #nr-root .nr-scenesheet{
    display:block;
    position:absolute;
    left:0;
    right:0;
    bottom:100%;
    margin-bottom:.4rem;
    background:var(--ink-2);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    padding:.35rem;
    box-shadow:0 -6px 24px var(--shadow);
    z-index:5;
  }
  #nr-root .nr-scenesheet.nr-hidden{ display:none; }

  #nr-root .nr-scenerow{
    display:block;
    width:100%;
    text-align:left;
    background:none;
    border:none;
    border-radius:var(--r);
    padding:.5rem .65rem;
    font-family:var(--serif);
    font-size:.92rem;
    line-height:1.4;
    color:var(--paper);
  }
  #nr-root .nr-scenerow + .nr-scenerow{ border-top:1px solid var(--line-2); }
  #nr-root .nr-scenerow small{
    display:block;
    font-family:var(--sans);
    font-size:.68rem;
    line-height:1.5;
    color:var(--paper-dim);
    margin-top:.1rem;
  }
  #nr-root .nr-scenerow.warn{ color:var(--seal); }
}


/* ══════════ Dom/Sub の箱を、会話の邪魔をしない形に ══════════
   ・ふだんは 見出し／目盛り／状態一行 だけ。手は見出しをタップして開く
   ・広い画面では本文の右の余白に縦長で固定。ログを押し下げない */
#nr-root .nr-dyn{ padding:.45rem .65rem; }
#nr-root .nr-dynhead{ font-size:.72rem; }
#nr-root .nr-dynstate{ margin:.3rem 0 .15rem; font-size:.72rem; }
#nr-root .nr-dyn.nr-canfold.nr-fold .nr-dynstate{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#nr-root .nr-dyn.nr-canfold.nr-fold .nr-dyntrack{ display:block; height:.3rem; margin:.4rem 0 .1rem; }
#nr-root .nr-dynmore{ flex:none; background:none; border:none; padding:.1rem .3rem;
  font-size:.64rem; color:var(--paper-dim); text-decoration:underline; text-underline-offset:.2em; cursor:pointer; }
#nr-root .nr-dynmore:hover{ color:var(--paper); }
#nr-root .nr-dyn[data-band="-1"] .nr-dynstate,#nr-root .nr-dyn[data-band="-2"] .nr-dynstate{ color:#B9A3CC; }

@media (min-width:72rem){
  #nr-root .nr-dyn{
    position:fixed; left:calc(50% + 21.5rem); top:5.2rem; width:13.5rem;
    max-height:calc(100vh - 6.5rem); overflow-y:auto; overflow-x:hidden; margin:0; z-index:6;
    background:var(--ink); }
  #nr-root .nr-dyn *{ min-width:0; }
  #nr-root .nr-dynhint{ white-space:normal; }
  #nr-root .nr-dynhead{ flex-wrap:wrap; }
  #nr-root .nr-dynhead strong{ flex:1 1 100%; line-height:1.5; }
  #nr-root .nr-dynhead button{ margin-left:0; }
  /* 目盛りを縦に。上がサブスペース、下がドロップ */
  #nr-root .nr-dyntrack{ height:8rem; width:.42rem; margin:.6rem auto .3rem; }
  #nr-root .nr-dynmid{ left:0; right:0; top:50%; bottom:auto; width:auto; height:1px; }
  #nr-root .nr-dynfill{ left:0 !important; right:0; width:auto !important; top:auto;
    bottom:var(--o,50%); height:var(--w,0); transition:bottom .3s,height .3s,background .3s; }
  #nr-root .nr-dynends{ flex-direction:column-reverse; align-items:center; gap:.15rem; }
  #nr-root .nr-dynacts{ flex-direction:column; align-items:stretch; }
  #nr-root .nr-dynacts button{ text-align:left; }
  /* 縦並びでは flex-basis が「高さ」になる。
     横並び用の flex:1 1 10rem / 1 1 100% をそのままにすると、
     選ぶ欄が 10rem の高さに伸びて、丸い角の指定と合わさって円になる。
     縦のときは、伸ばさない・幅いっぱい、に上書きする */
  #nr-root .nr-dyncmd{ flex:none; flex-direction:column; align-items:stretch; }
  #nr-root .nr-dyncmd select{
    flex:none; width:100%; min-width:0; height:auto;
    border-radius:var(--r); padding:.3rem .5rem; }
  #nr-root .nr-dyncmd button{ flex:none; width:100%; }
  #nr-root .nr-dyncmd small{ flex:none; white-space:normal; }
}


/* ══════════════════════════════════════════════
   一人用の操作帯と引き直し
   ── 書く欄の上に「進める」「ここで締める」。
      できごとの札の右上に「引き直す」 ──
   ══════════════════════════════════════════════ */

#nr-root .nr-actrow{ display:flex; align-items:center; gap:.4rem; margin:.15rem 0 .5rem; }
#nr-root .nr-actrow.nr-hidden{ display:none; }
#nr-root .nr-actrow button{
  background:none; border:1px solid var(--line); border-radius:999px;
  color:var(--paper-dim); font-family:var(--sans); font-size:.78rem;
  padding:.32rem .9rem; line-height:1.4; cursor:pointer; white-space:nowrap;
}
#nr-root .nr-actrow button:hover{ border-color:var(--accent); color:var(--paper); }
#nr-root .nr-actrow .nr-go-next{ border-color:var(--accent); color:var(--accent); }
#nr-root .nr-actrow .nr-go-next:hover{ background:var(--accent-dim); color:var(--paper); }
#nr-root .nr-actrow .nr-go-next.nr-hidden{ display:none; }

/* 使わなくなったもの */
#nr-root .nr-send .nr-wrapup{ display:none !important; }
#nr-root .nr-who .nr-endmid{ display:none !important; }
#nr-root .nr-bar #nr-skip,
#nr-root .nr-bar #nr-more,
#nr-root .nr-bar .nr-clock{ display:none !important; }
#nr-root .nr-scenebtn,
#nr-root .nr-scenesheet{ display:none !important; }

/* 引き直す */
#nr-root .nr-scene, #nr-root .nr-card, #nr-root .nr-narr{ position:relative; }
#nr-root .nr-has-redo{ padding-right:5.4rem; }
#nr-root .nr-redo{
  position:absolute; right:.3rem; top:.25rem;
  background:none; border:1px solid var(--line); border-radius:999px;
  color:var(--paper-dim); font-family:var(--sans); font-size:.68rem;
  padding:.2rem .65rem; line-height:1.4; cursor:pointer; white-space:nowrap;
}
#nr-root .nr-redo::before{ content:"\21BB\00a0"; }
#nr-root .nr-redo:hover{ border-color:var(--accent); color:var(--accent); }
#nr-root .nr-card .nr-redo{ right:.6rem; top:.6rem; }

@media (max-width:30rem){
  #nr-root .nr-composer{ grid-template-columns:1fr auto; }
  #nr-root .nr-actrow{ grid-column:1 / -1; margin:0 0 .4rem; }
  #nr-root .nr-actrow button{ min-height:2rem; font-size:.78rem; padding:.3rem .85rem; }
  #nr-root .nr-redo{ font-size:.66rem; padding:.18rem .55rem; }
  #nr-root .nr-has-redo{ padding-right:4.8rem; }
}


/* ══════════════════════════════════════════════
   ふたり ── 名前の札の役割と、二人ぶんの一枚
   ══════════════════════════════════════════════ */

/* 名前の札。名前の下に役割を小さく */
#nr-root .nr-who button .nr-role{
  display:block; font-family:var(--sans); font-size:.6rem; letter-spacing:.06em;
  line-height:1.2; color:var(--paper-dim); margin-top:.1rem; font-weight:400;
}
#nr-root .nr-who button[aria-pressed="true"] .nr-role{ color:var(--accent); }

/* 操作帯の右端 */
#nr-root .nr-actrow .nr-go-pair{ margin-left:auto; }
#nr-root .nr-actrow .nr-go-pair.nr-hidden,
#nr-root .nr-actrow .nr-go-close.nr-hidden{ display:none; }

/* 一枚 */
#nr-root .nr-pair .nr-trayin{ max-width:32rem; }
#nr-root .nr-pairone{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  padding:.75rem .85rem .7rem; margin-bottom:.6rem; position:relative;
}
#nr-root .nr-pairone.now{ border-color:var(--accent); }
#nr-root .nr-pairhead{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.45rem; }
#nr-root .nr-pairhead b{ font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--paper); }
#nr-root .nr-pairdot{ width:.7rem; height:.7rem; border-radius:50%; background:var(--accent); flex:none; }
#nr-root .nr-pairicon{ width:1.9rem; height:1.9rem; border-radius:50%; object-fit:cover; flex:none; }
#nr-root .nr-pairrole{
  font-family:var(--sans); font-size:.68rem; color:var(--accent);
  border:1px solid var(--accent-dim); border-radius:999px; padding:.1rem .55rem;
}
#nr-root .nr-pairnow{ font-family:var(--sans); font-size:.62rem; color:var(--paper-dim); margin-left:auto; }
#nr-root .nr-pairline{ display:flex; gap:.6rem; font-family:var(--sans); font-size:.78rem; line-height:1.7; color:var(--paper); }
#nr-root .nr-pairline span:first-child{ flex:none; width:3.2rem; color:var(--paper-dim); font-size:.68rem; letter-spacing:.1em; padding-top:.1em; }
#nr-root .nr-pairline.dim{ color:var(--paper-dim); }
#nr-root .nr-pairedit{
  position:absolute; right:.7rem; bottom:.6rem;
  background:none; border:1px solid var(--line); border-radius:999px;
  color:var(--paper-dim); font-family:var(--sans); font-size:.68rem; padding:.2rem .65rem; cursor:pointer;
}
#nr-root .nr-pairedit:hover{ border-color:var(--accent); color:var(--accent); }

@media (min-width:48rem){
  #nr-root .nr-pair{ align-items:center; }
  #nr-root .nr-pair .nr-trayin{ border-radius:var(--r-lg); }
}
@media (max-width:30rem){
  #nr-root .nr-who button .nr-role{ font-size:.56rem; }
  #nr-root .nr-pairone{ padding-bottom:2.1rem; }
}


/* ══════════════════════════════════════════════
   口振画面 ── 誰の口振かを分かりやすく。運びと長さを札に
   ══════════════════════════════════════════════ */

/* 名前の見出し。キャラ色の帯つき。スクロールしても上に残る */
#nr-root .nr-vrow > b.nr-vname{
  position:sticky; top:0; z-index:2;
  display:block; background:var(--ink);
  border-left:3px solid var(--accent);
  padding:.35rem 0 .35rem .65rem; margin:0 0 .5rem;
  font-family:var(--serif); font-size:1.15rem; font-weight:600; letter-spacing:.04em;
}
#nr-root .nr-vrow > b.nr-vname small{
  display:block; font-family:var(--sans); font-size:.6rem; letter-spacing:.18em;
  color:var(--paper-dim); font-weight:400; margin-bottom:.1rem;
}
#nr-root .nr-vrow{ padding:.7rem 0 .9rem; }
#nr-root .nr-vrow + .nr-vrow{ border-top:1px solid var(--line); margin-top:.3rem; }

/* スマホ用の切り替えと送り。広い画面では出さない */
#nr-root .nr-vtabs{ display:none; }
#nr-root .nr-vgo{ display:none; }

@media (max-width:30rem){
  #nr-root .nr-vtabs{
    display:flex; gap:.35rem; margin:0 0 .6rem;
    position:sticky; top:0; z-index:3; background:var(--ink); padding:.3rem 0;
  }
  #nr-root .nr-vtab{
    flex:1; background:none; border:1px solid var(--line); border-radius:999px;
    padding:.45rem .6rem; font-family:var(--serif); font-size:.9rem; color:var(--paper-dim);
  }
  #nr-root .nr-vtab[aria-pressed="true"]{ border-color:var(--accent); background:var(--accent-dim); color:var(--paper); }
  #nr-root .nr-vrow > b.nr-vname{ top:2.6rem; }
  /* 一人ずつ */
  #nr-root .nr-vbox[data-active="1"] .nr-vrow[data-n="2"]{ display:none; }
  #nr-root .nr-vbox[data-active="2"] .nr-vrow[data-n="1"]{ display:none; }
  #nr-root .nr-vrow + .nr-vrow{ border-top:none; margin-top:0; }
  #nr-root .nr-vgo{
    display:block; width:100%; margin-top:.7rem;
    background:none; border:1px solid var(--accent); border-radius:999px;
    padding:.55rem .8rem; font-family:var(--serif); font-size:.9rem; color:var(--accent);
  }
}

/* 話の運び：説明つきの札。長さ：同じ形に揃える */
#nr-root #nr-flowrow .nr-rowhead{ flex-wrap:wrap; }
#nr-root .nr-flowcards{ flex:1 1 100%; display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin-top:.35rem; }
#nr-root .nr-flowcards button{
  border-radius:var(--r); text-align:left; padding:.7rem .85rem;
  font-family:var(--serif); font-size:1rem; line-height:1.4; min-height:0;
  background:var(--surface);
}
#nr-root .nr-flowcards button small{
  display:block; font-family:var(--sans); font-size:.68rem; line-height:1.6;
  color:var(--paper-dim); margin-top:.25rem; letter-spacing:.02em; white-space:normal;
}
#nr-root .nr-flowcards button[aria-pressed="true"] small{ color:var(--paper); }

#nr-root .nr-times{ display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin-top:.45rem; }
#nr-root .nr-time{
  border-radius:var(--r); text-align:left; padding:.7rem .85rem;
  font-family:var(--serif); font-size:1rem; line-height:1.4;
}
#nr-root .nr-time small{ font-size:.68rem; line-height:1.6; margin-top:.25rem; white-space:normal; letter-spacing:.02em; }

@media (max-width:30rem){
  #nr-root .nr-flowcards{ grid-template-columns:1fr; }
  #nr-root .nr-times{ grid-template-columns:1fr; }
  #nr-root .nr-flowcards button, #nr-root .nr-time{ font-size:.95rem; padding:.65rem .8rem; }
}


/* ══════════════════════════════════════════════
   手直し：高さ・一行化・タップで読む・札を書く欄の上へ
   ══════════════════════════════════════════════ */

/* 書く欄まわりの高さ。下の空きは要らない */
#nr-root .nr-wrap{ padding-bottom:1rem; }
#nr-root .nr-composer{ padding-top:.9rem; }
#nr-root .nr-composer textarea{ min-height:3.2rem; }
#nr-root .nr-who{ margin-bottom:.35rem; }
#nr-root .nr-send{ margin-top:.35rem; }

/* 言い回し・ふたり ……… 進める・締める を一行に */
#nr-root .nr-actrow{ flex-wrap:wrap; margin:.1rem 0 .4rem; }
#nr-root .nr-actrow .nr-tips{ display:contents; }
#nr-root .nr-actrow .nr-tiptog{ margin:0; }
#nr-root .nr-actrow .nr-tiplist{ flex:1 1 100%; order:9; margin-top:.3rem; }
#nr-root .nr-actrow .nr-go-pair{ margin-left:0; }
#nr-root .nr-actrow .nr-go-next{ margin-left:auto; }
#nr-root .nr-actrow .nr-go-next.nr-hidden + .nr-go-close{ margin-left:auto; }

/* つづきを読む */
#nr-root .nr-unread{ display:none !important; }
#nr-root .nr-readmore{
  display:block; width:100%; margin:1rem 0 .4rem;
  background:none; border:1px dashed var(--line); border-radius:var(--r);
  padding:.7rem .8rem; font-family:var(--sans); font-size:.8rem; letter-spacing:.12em;
  color:var(--paper-dim); cursor:pointer;
}
#nr-root .nr-readmore::after{ content:"　▼"; font-size:.7em; }
#nr-root .nr-readmore:hover{ border-color:var(--accent); color:var(--accent); }
#nr-root .nr-readmore.nr-hidden{ display:none; }

/* 書く欄の上の札 */
#nr-root .nr-cardslot:empty{ display:none; }
#nr-root .nr-cardslot .nr-card{
  margin:0 0 .6rem; padding:.7rem .85rem .6rem;
  border-left:3px solid var(--accent);
  max-height:55vh; overflow:auto;
}
#nr-root .nr-cardslot .nr-card h3{ font-size:.92rem; margin:.15rem 0 .35rem; }
#nr-root .nr-cardslot .nr-card .nr-owner{ display:none; }
#nr-root .nr-cardslot .nr-card .nr-choice{ padding:.55rem .8rem; margin:.3rem 0; font-size:.95rem; }
#nr-root .nr-cardslot .nr-card .nr-note{ font-size:.66rem; margin-top:.35rem; }
#nr-root .nr-cardwho{
  display:flex; align-items:baseline; gap:.45rem; margin:0 0 .2rem;
  font-family:var(--sans); font-size:.78rem; color:var(--paper-dim);
}
#nr-root .nr-cardwho b{ font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--accent); letter-spacing:.04em; }
#nr-root .nr-cardwho small{ font-size:.66rem; letter-spacing:.1em; }
#nr-root .nr-cardslot .nr-card .nr-redo{ right:.6rem; top:.55rem; }
#nr-root .nr-cardslot .nr-card.nr-has-redo .nr-cardwho{ padding-right:5rem; }

@media (max-width:30rem){
  #nr-root .nr-wrap{ padding-bottom:.6rem; }
  #nr-root .nr-cardslot{ grid-column:1 / -1; }
  #nr-root .nr-cardslot .nr-card{ max-height:48vh; padding:.6rem .7rem .5rem; }
  #nr-root .nr-cardwho b{ font-size:1.2rem; }
  #nr-root .nr-cardslot .nr-card .nr-choice{ padding:.5rem .7rem; font-size:.9rem; }
  #nr-root .nr-actrow .nr-go-pair{ margin-left:0; }
  #nr-root .nr-readmore{ padding:.6rem .7rem; font-size:.78rem; }
}


/* ── 次があるしるし。文言なし、点滅する ▼。本文のどこを押しても進む ── */
#nr-root .nr-readmore{
  display:block; width:100%; margin:.2rem 0 .3rem;
  background:none; border:none; padding:.35rem 0 .5rem;
  text-align:center; color:var(--accent); cursor:pointer;
}
#nr-root .nr-readmore::after{ content:none; }
#nr-root .nr-readmore:hover{ border:none; color:var(--accent); }
#nr-root .nr-readtri{
  display:inline-block; font-size:.9rem; line-height:1;
  animation:nr-bob 1.1s ease-in-out infinite;
}
@keyframes nr-bob{ 0%,100%{ transform:translateY(0); opacity:.55; } 50%{ transform:translateY(4px); opacity:1; } }
@media (prefers-reduced-motion:reduce){ #nr-root .nr-readtri{ animation:none; opacity:.9; } }
#nr-root .nr-log.nr-hasmore{ cursor:pointer; }
#nr-root .nr-log.nr-hasmore .nr-line,
#nr-root .nr-log.nr-hasmore .nr-own{ cursor:auto; }


/* ── 話す人の交代 ── */
#nr-root .nr-altrow{ margin-top:.35rem; }
#nr-root .nr-altpick{ display:flex; gap:.4rem; }
#nr-root .nr-altpick button{ border-radius:999px; padding:.45rem 1rem; font-family:var(--serif); font-size:.95rem; }
#nr-root .nr-altnote{ margin-top:.4rem; }
#nr-root .nr-altrow.compact .nr-altpick button{ padding:.35rem .8rem; font-size:.85rem; }
#nr-root .nr-altrow.compact .nr-altnote{ font-size:.66rem; margin-top:.3rem; }
#nr-root .nr-pairalt{ margin:.2rem 0 .8rem; }
#nr-root .nr-pairalt > small{ display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.18em; color:var(--paper-dim); margin-bottom:.3rem; }
/* 出方を決めずに書く */
#nr-root .nr-choice.nr-skipway{ border-style:dashed; color:var(--paper-dim); font-family:var(--sans); font-size:.82rem; }

/* ── 関係性と席のぶつかり ── */
#nr-root .nr-clash{margin:.6rem 0 .2rem;padding:.55rem .8rem;border-left:2px solid var(--accent);
  background:var(--accent-dim);font-size:.74rem;line-height:1.7;color:var(--paper);}
#nr-root .nr-clash.soft{border-left-color:var(--line);background:transparent;color:var(--paper-dim);}
#nr-root .nr-clash p{margin:0;}
#nr-root .nr-clashrow{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.45rem;}
#nr-root .nr-clashrow button{font-size:.72rem;padding:.3rem .75rem;border-radius:999px;
  border:1px solid var(--accent);background:var(--surface);color:var(--paper);cursor:pointer;}
#nr-root .nr-clashrow button:hover{background:var(--accent-dim);}
#nr-root .nr-clashrow .nr-clashoff{border-color:var(--line);color:var(--paper-dim);}

/* ── 誰が何か（役と席） ── */
#nr-root .nr-char > em .nr-cwho{letter-spacing:.06em;color:var(--paper-dim);opacity:.85;}
#nr-root .nr-vrow > b.nr-vname small.nr-vwho{
  margin:.2rem 0 0; letter-spacing:.06em; font-size:.66rem; opacity:.85;}
#nr-root .nr-seatswap{display:inline-block;margin:.25rem 0 0;font-size:.68rem;padding:.2rem .7rem;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--paper-dim);cursor:pointer;}
#nr-root .nr-seatswap:hover{border-color:var(--accent);color:var(--paper);}

/* ══════ 口振カルテ・カラーカルテへの行き来 ══════ */
#nr-root .nr-xlink{
  margin:.6rem 0 .1rem;
  padding:.45rem .7rem .5rem;
  border-left:2px solid var(--line);
  font-size:.68rem;
  line-height:1.7;
  color:var(--paper-dim);
}
#nr-root .nr-xlink .nr-xlead{
  display:inline-block;
  font-family:var(--sans);
  font-size:.64rem;
  letter-spacing:.06em;
  margin-right:.55rem;
}
#nr-root .nr-xlink .nr-xgo{
  display:inline-block;
  font-family:var(--serif);
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--paper);
  text-decoration:none;
  border-bottom:1px solid var(--accent);
  padding-bottom:.05rem;
  cursor:pointer;
}
#nr-root .nr-xlink .nr-xgo::after{
  content:"↗";
  font-family:var(--sans);
  font-size:.62rem;
  margin-left:.3rem;
  color:var(--accent);
}
#nr-root .nr-xlink .nr-xgo:hover{ color:var(--accent); }
#nr-root .nr-xlink .nr-xnote,
#nr-root .nr-xlink .nr-xwait{
  display:block;
  font-family:var(--sans);
  font-size:.62rem;
  line-height:1.7;
  color:var(--paper-dim);
  margin-top:.15rem;
}
#nr-root .nr-xlink .nr-xwait{ color:var(--accent); }
#nr-root .nr-lkmid .nr-xlink{ margin-top:.45rem; }
#nr-root .nr-mebox .nr-xlink{ margin:.2rem 0 .55rem; }

/* 受け取ったときの、ひと言 */
#nr-root .nr-xtoast{
  position:fixed; top:3.1rem; left:50%; transform:translateX(-50%);
  z-index:21;
  max-width:min(92vw, 30rem);
  font-family:var(--serif);
  font-size:.78rem;
  letter-spacing:.04em;
  line-height:1.6;
  color:var(--paper);
  background:var(--veil);
  border:1px solid var(--accent);
  border-radius:8px;
  padding:.5rem 1rem;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s;
}
#nr-root .nr-xtoast.on{ opacity:1; }


/* ══════════════════════════════════════════════
   締めるを育てる
   並びは 言い回し・ふたり ……… ここで締める（進める）
   ══════════════════════════════════════════════ */

#nr-root .nr-actrow .nr-go-close{ order:1; margin-left:auto; margin-right:.45rem; }
#nr-root .nr-actrow .nr-go-next{  order:2; margin-left:0; }

/* 〜七行 ── 枠を外して、小さな文字に */
#nr-root .nr-actrow .nr-go-close{
  border:none; border-bottom:1px solid var(--line); border-radius:0;
  background:none; color:var(--paper-dim);
  font-size:.72rem; letter-spacing:.02em;
  padding:.18rem .35rem; min-height:0;
}
#nr-root .nr-actrow .nr-go-close:hover{
  color:var(--paper); border-bottom-color:var(--seal);
}
#nr-root .nr-actrow .nr-go-close.ask{
  color:var(--seal); border-bottom-color:var(--seal);
}

/* 八行〜 ── 枠つきの丸ボタンに */
#nr-root .nr-actrow .nr-go-close[data-grow="1"]{
  border:1px solid var(--line); border-radius:999px;
  color:var(--paper-dim); font-size:.76rem;
  padding:.3rem .85rem; margin-right:.45rem;
}
#nr-root .nr-actrow .nr-go-close[data-grow="1"]:hover{
  border-color:var(--accent); color:var(--paper);
}

/* 最後の場面 ── 進めるが消えた場所に、塗った丸ボタンとして出る */
#nr-root .nr-actrow .nr-go-next.nr-hidden + .nr-go-close,
#nr-root .nr-actrow .nr-go-next.nr-hidden + .nr-go-close[data-grow="1"]{
  border:1px solid var(--accent); border-radius:999px;
  background:var(--accent); color:var(--on-accent);
  font-size:.8rem; padding:.34rem 1.05rem;
  margin-left:auto; margin-right:0;
}
#nr-root .nr-actrow .nr-go-next.nr-hidden + .nr-go-close:hover{
  background:var(--accent); color:var(--on-accent); opacity:.88;
}
@media (max-width:30rem){
  #nr-root .nr-actrow .nr-go-next.nr-hidden + .nr-go-close{ min-height:2rem; }
}

/* 続きの会話の「終えて、持ち帰る」も、同じ重さに */
#nr-root .nr-send .nr-afterend{
  border-color:var(--accent); color:var(--accent);
}
#nr-root .nr-send .nr-afterend:hover{
  background:var(--accent-dim); color:var(--paper);
}


/* ══════════════════════════════════════════════
   印（♡）
   ── 行の外の端に、いつも置いておく。
      ふだんは薄い朱の細い線、押すと塗りつぶす
   ══════════════════════════════════════════════ */

#nr-root .nr-heart{
  position:absolute;
  width:1.5rem; height:1.5rem; padding:0; margin:0;
  background:none; border:none; border-radius:999px;
  color:var(--seal); opacity:.26;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; line-height:0;
  transition:opacity .15s, transform .12s;
}
#nr-root .nr-heart svg{ width:.95rem; height:.95rem; display:block; }
#nr-root .nr-heart:hover{ opacity:.75; transform:scale(1.12); }
#nr-root .nr-heart:focus-visible{ opacity:1; outline:1px solid var(--seal); outline-offset:2px; }
#nr-root .nr-heart.on{ opacity:1; }
#nr-root .nr-heart.on:hover{ opacity:.8; }

/* 台詞 ── 名前の行はほとんど空いているので、その外の端に重ねる。
   流れから外して置くので、吹き出しの幅も行の高さも減らない */
#nr-root .nr-line{ position:relative; }
#nr-root .nr-line .nr-heart{ top:-.25rem; right:0; }
#nr-root .nr-line.them .nr-heart{ right:auto; left:0; }

/* 地の文 ── 名前の行がないので、右上に置いて、そのぶん字を止める */
#nr-root .nr-own{ position:relative; padding-right:2rem; }
#nr-root .nr-own .nr-heart{ right:0; top:.1rem; }

/* 印のついた行 */
#nr-root .nr-line.nr-marked p{ border-color:var(--seal); }
#nr-root .nr-line.nr-marked p::before{
  border-left-color:var(--seal); border-bottom-color:var(--seal);
}
#nr-root .nr-line.them.nr-marked p::before{
  border-left-color:transparent; border-bottom-color:transparent;
  border-right-color:var(--seal); border-top-color:var(--seal);
}
#nr-root .nr-own.nr-marked{
  border-left:2px solid var(--seal);
  padding-left:.75rem;
}

/* 読むだけの状態では押せない。見た目も引っ込める */
#nr-root .nr-log.nr-hasmore .nr-heart{ display:none; }

/* はじめの一度だけ出す添え書き */
#nr-root .nr-markhint{
  display:flex; align-items:center; flex-wrap:wrap; gap:.1rem;
  margin:.35rem 0 1.1rem;
  padding:.5rem .7rem;
  border-left:2px solid var(--seal);
  background:var(--surface);
  border-radius:0 6px 6px 0;
  font-family:var(--sans); font-size:.72rem; line-height:1.75;
  color:var(--paper-dim);
}
#nr-root .nr-hintheart{
  width:.85rem; height:.85rem; margin:0 .25rem;
  color:var(--seal); flex:none;
}
@media (max-width:30rem){
  #nr-root .nr-markhint{ font-size:.7rem; padding:.45rem .6rem; }
  #nr-root .nr-heart{ width:1.7rem; height:1.7rem; opacity:.34; }
  #nr-root .nr-line .nr-heart{ top:-.32rem; }
}


/* ══════════════════════════════════════════════
   終わりの画面 ── 印をつけたところ
   ══════════════════════════════════════════════ */

#nr-root .nr-fin .nr-markbox{
  margin:.2rem 0 1rem;
  padding:.7rem .85rem .75rem;
  border-left:2px solid var(--seal);
  background:var(--surface);
  border-radius:0 6px 6px 0;
}
#nr-root .nr-fin .nr-markh{
  margin:0 0 .4rem;
  font-family:var(--sans); font-size:.68rem; letter-spacing:.16em;
  color:var(--seal);
}
#nr-root .nr-fin .nr-marklist{ margin:0; padding:0; list-style:none; }
#nr-root .nr-fin .nr-marklist li{
  font-family:var(--serif); font-size:.86rem; line-height:1.75; color:var(--paper);
}
#nr-root .nr-fin .nr-marklist li b{
  font-family:var(--sans); font-size:.62rem; letter-spacing:.1em;
  font-weight:400; color:var(--paper-dim); margin-right:.5em;
}
#nr-root .nr-fin .nr-marklist li.nr-markmore{
  font-family:var(--sans); font-size:.7rem; color:var(--paper-dim);
}
#nr-root .nr-fin .nr-marknote{
  margin:.5rem 0 0;
  font-family:var(--sans); font-size:.7rem; line-height:1.7; color:var(--paper-dim);
}

/* 「持ち帰る」の中で、動画の箱と下の行のあいだを開ける */
#nr-root .nr-fin .nr-fgrp .nr-frow:first-of-type{ margin-top:1.6rem; }