/* ============================================================
   negishoyu.dev 展示用のひさし(shell)
   night-aperture の motif には手を入れず、この 1 枚と shell.js だけで
   ①和紙の短冊(戻り道+一行説明) ②WebGPU 非対応時のフォールバック を足す。
   css/style.css より後ろで読み込むので、必要な打ち消しはここに書く。
   ※ この 2 ファイルは同期スクリプトの対象外(motif 更新でも消えない)

   意匠の出どころ= トップ public/index.html(案04 v3)。紙・和紙の粒子・
   マスキングテープ・手描きの罫・書体をそのまま持ってきている。
   デモ本体(canvas / #hud / #hint / #panel)の「暗い計器」の見た目は触らない。
   実験装置が和紙の店に置いてある、という同居感が狙い(BRIEF-LAB2 §1-2)。

   ⚠ 二つの落とし穴(実測で踏んだので明記する)
   1. motif の css/style.css も :root に --ink / --dim / --accent / --panel /
      --line を持っている。同じ名前を :root で定義すると計器の色が変わる。
      よって和紙側の変数は **外装の中(短冊とフォールバック)だけ** に閉じ込める。
   2. motif は html に `font: 12px/1.5` を掛けている = このページの 1rem は 12px。
      トップの rem 指定をそのまま持ってくると縮む。この 1 枚では px で書く。
   ============================================================ */

/* ───────── 和紙の意匠(トップから移植・外装スコープに限定) ───────── */
#lab-tanzaku,
#nogpu {
  /* 紙と卓 */
  --desk:        #d7c3a0;
  --desk-deep:   #c0a87f;
  --paper:       #fbf5e8;
  --paper-warm:  #fdf7e7;
  --paper-cool:  #f1e7d2;
  --paper-edge:  #e6d8bb;
  /* 墨 */
  --ink:         #2a211a;
  --ink-2:       #6b5a49;
  --ink-3:       #a28f77;   /* 装飾線専用(本文には使わない) */
  /* 差し色 */
  --shoyu:       #b0631d;
  --shoyu-deep:  #8a4a14;
  --tape:        #e0c78d;

  --f-display: 'Kiwi Maru', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --f-body:    'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif;
  --f-latin:   'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --soft:   cubic-bezier(.22,.61,.36,1);

  /* 紙の粒子(トップの .grain と同じ版) */
  --washi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 手描きの罫の版下置き場(トップと同じ #i-rule / #i-rule2) */
.ns-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ───────── 和紙の短冊(戻り道 + 素朴な一行) ─────────
   デモは全画面のまま。その上に紙を一枚、テープで貼ってある体。 */
#lab-tanzaku {
  position: fixed;
  top: 15px;
  left: 18px;
  z-index: 95;          /* #nogpu(90)より上 = フォールバック時も戻り道が残る */
  width: max-content;
  max-width: calc(100vw - 22px);
  padding: 9px 15px 11px;
  color: var(--ink);
  background:
    radial-gradient(120% 60% at 14% 0%, var(--paper-warm), rgba(255,255,255,0) 62%),
    linear-gradient(172deg, var(--paper) 0%, var(--paper-cool) 100%);
  /* 手で切った紙の角(四隅すべて違う) */
  border-radius: 8px 13px 6px 11px / 12px 7px 14px 9px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 -16px 24px -22px rgba(120,90,45,.5),
    0 2px 5px rgba(4,6,11,.55),
    0 18px 30px -18px rgba(4,6,11,.8);
  transform: rotate(-.5deg);
  animation: tz-in .8s .12s var(--soft) backwards;
}
@keyframes tz-in {
  from { opacity: 0; transform: translateY(-10px) rotate(-.5deg); }
  to   { opacity: 1; transform: rotate(-.5deg); }
}
/* 紙の粒子。全画面に敷くと canvas まで濁るので、短冊の中だけに敷く
   (z-index を持たせてあるので multiply は短冊の中で閉じる) */
#lab-tanzaku::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .13; mix-blend-mode: multiply;
  background-image: var(--washi);
}
/* マスキングテープ(トップの .tape と同じ版) */
#lab-tanzaku .tape {
  position: absolute; top: -10px; left: 24px;
  width: 66px; height: 20px;
  background:
    repeating-linear-gradient(102deg, rgba(255,255,255,.28) 0 3px, rgba(255,255,255,0) 3px 8px),
    linear-gradient(178deg, rgba(224,199,141,.92), rgba(203,175,113,.88));
  clip-path: polygon(3% 10%, 97% 0%, 100% 90%, 1% 100%);
  transform: rotate(-6deg);
  box-shadow: 0 1px 2px rgba(4,6,11,.45);
  pointer-events: none;
}
#lab-tanzaku :focus-visible {
  outline: 3px dashed var(--shoyu);
  outline-offset: 4px;
  border-radius: 3px;
}

/* パンくず(ねぎしょーゆ / 実験室 / いまここ) */
#lab-nav {
  font: 11.5px/1.7 var(--f-mono);
  letter-spacing: .05em;
  color: var(--ink-2);
  white-space: nowrap;
}
#lab-nav a {
  color: var(--shoyu-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(138,74,20,.35);
  padding-bottom: 1px;
}
#lab-nav a:hover,
#lab-nav a:focus-visible { color: var(--shoyu); border-bottom-color: var(--shoyu); }
#lab-nav .sep { padding: 0 .5em; color: var(--ink-3); }
/* いまいる作品名だけ書体を替える(棚の札の見出しと同じ Kiwi Maru) */
#lab-nav .here {
  font-family: var(--f-display);
  font-size: 13.5px; letter-spacing: .04em;
  color: var(--ink);
}
#tz-note {
  margin: 2px 0 0;
  font: 12px/1.7 var(--f-body);
  color: var(--ink-2);
  white-space: nowrap;
}
/* X への導線(KPI=フォロワー増・発注者裁定 2026-09-02)。短冊の下段に小さく。
   ブランドアイコン添え=印象づけ試行(雰囲気次第でリバート可・同日裁定) */
#tz-x {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font: 11.5px/1.6 var(--f-latin, monospace);
  letter-spacing: .05em;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
/* アイコン寸法。**既定 34px(発注者裁定 2026-09-02「Twitter は 34 にします」)**。
   検分用に ?icon=NN(12〜48)で差し替えられる(shell.js)。初版 18px は小さいとの裁定 */
html { --tz-icon: 34px; }
#tz-x img { width: var(--tz-icon); height: var(--tz-icon); display: block; }
#tz-x:hover, #tz-x:focus-visible { color: var(--ink); }

/* 展示は鑑賞専用: motif の計器(#hud)・操作説明(#hint)・調整卓(#panel)は出さない
   (発注者裁定 2026-09-02「余計なUIを全部消す・調整は固定値」。固定値は motif 既定に焼き込み済み) */
#hud, #hint, #panel { display: none !important; }

/* 計器(#hud)は短冊の下から始める。高さは shell.js が実測して --tz-bottom に
   入れる(書体の読み込みや折返しで変わるため、決め打ちにしない)。
   JS が動かない環境では既定値で足りる = motif 既定の top:16px は使わない。 */
#hud { top: calc(var(--tz-bottom, 92px) + 10px); }

/* ───────── WebGPU 非対応時 ─────────
   既定は「見えている」。JS が動く環境では head の 1 行で即座に隠し、
   shell.js が判定してから必要なときだけ出し直す(= JS 無効でも黒画面にしない)。
   ここは全面を和紙にする(棚・トップと地続きに見せる)。 */
#nogpu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  overflow: auto;
  padding: calc(var(--tz-bottom, 92px) + 16px) clamp(14px, 3.4vw, 40px) clamp(18px, 3.4vw, 44px);
  background-color: var(--desk);
  /* 木のカウンター + 屋台の灯り(トップの body::before と同じ版) */
  background-image:
    radial-gradient(115% 70% at 50% -12%, rgba(255,238,197,.9), rgba(255,238,197,0) 62%),
    radial-gradient(90% 60% at 50% 108%, rgba(90,60,26,.28), rgba(90,60,26,0) 60%),
    linear-gradient(178deg, var(--desk) 0%, var(--desk-deep) 100%);
  color: var(--ink);
  font-family: var(--f-body);
}
html.js #nogpu { display: none; }
html.js[data-gpu="no"] #nogpu { display: flex; }
/* 判定が付いたら本体側の UI は畳む(黒い canvas を残さない) */
html[data-gpu="no"] #stage,
html[data-gpu="no"] #hud,
html[data-gpu="no"] #hint,
html[data-gpu="no"] #panel,
html[data-gpu="no"] #reticle { display: none; }
/* 紙の粒子(この画面は全面が和紙なので全面に敷く) */
#nogpu::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .13; mix-blend-mode: multiply;
  background-image: var(--washi);
}

/* 一枚の紙(トップの .sheet と同じ版) */
.ng-box {
  position: relative;
  margin: auto;                 /* あふれても頭が切れない中央寄せ */
  width: min(720px, 100%);
  padding: clamp(16px, 3vw, 30px) clamp(16px, 4.4vw, 48px) clamp(18px, 3vw, 32px);
  background:
    radial-gradient(120% 55% at 12% 0%, var(--paper-warm), rgba(255,255,255,0) 60%),
    linear-gradient(172deg, var(--paper) 0%, var(--paper-cool) 100%);
  border-radius: 10px 16px 8px 14px / 14px 9px 16px 10px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 0 42px rgba(180,150,102,.16),
    0 2px 5px rgba(72,48,20,.16),
    0 26px 48px -22px rgba(72,48,20,.55);
  font: 14px/1.95 var(--f-body);
  color: var(--ink-2);
}
/* 紙の左端に一本、薄い罫(ノートの余白線) */
.ng-box::before {
  content: "";
  position: absolute; top: 5%; bottom: 5%; left: clamp(9px, 2.2vw, 28px);
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(176,99,29,.16) 12%, rgba(176,99,29,.16) 88%, transparent);
  pointer-events: none;
}
.ng-box img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px 8px 4px 7px / 7px 4px 8px 5px;
  box-shadow:
    0 0 0 1px rgba(120,90,45,.28),
    0 12px 20px -14px rgba(72,48,20,.42);
}
.ng-box h1 {
  margin: clamp(14px, 2.4vw, 20px) 0 8px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(17px, 4.4vw, 21px);
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--ink);
}
.ng-box p { margin: 0 0 9px; }
.ng-box .ng-note { font-size: 12.5px; color: var(--ink-2); opacity: .88; }
.ng-box .rule {
  display: block; width: 100%; height: 8px;
  margin: clamp(12px, 2vw, 18px) 0 clamp(10px, 1.6vw, 14px);
  color: var(--ink-3);
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
  opacity: .7;
}
/* 手描きの下線つきリンク(トップの .ink-link と同じ版) */
.ng-box .ink-link {
  position: relative; display: inline-block;
  font-family: var(--f-display);
  font-size: 13.5px; letter-spacing: .04em;
  color: var(--shoyu-deep); text-decoration: none;
  padding-bottom: 6px;
  transition: color .3s var(--soft);
}
.ng-box .ink-link:hover, .ng-box .ink-link:focus-visible { color: var(--shoyu); }
.ng-box .ink-link .ul {
  position: absolute; left: -2px; right: -2px; bottom: 0;
  width: calc(100% + 4px); height: 8px;
  color: var(--shoyu);
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 132; stroke-dashoffset: 132;
  transition: stroke-dashoffset .55s var(--soft);
}
.ng-box .ink-link:hover .ul,
.ng-box .ink-link:focus-visible .ul { stroke-dashoffset: 0; }
.ng-box :focus-visible {
  outline: 3px dashed var(--shoyu);
  outline-offset: 5px;
  border-radius: 3px;
}

/* ───────── 狭い画面 ───────── */
@media (max-width: 560px) {
  #lab-tanzaku { top: 11px; left: 11px; padding: 8px 12px 10px; }
  #lab-nav { font-size: 11px; }
  #lab-nav .here { font-size: 12.5px; }
  #tz-note { font-size: 11.5px; }
  .ng-box { font-size: 13px; }
}
/* さらに狭いとき(375px 級)は、短冊がはみ出す前に折り返させる */
@media (max-width: 340px) {
  #lab-nav, #tz-note { white-space: normal; }
}


/* ───────── モーション配慮 ───────── */
@media (prefers-reduced-motion: reduce) {
  #lab-tanzaku { animation: none; }
  #lab-tanzaku *, #nogpu * { transition: none !important; animation: none !important; }
  .ng-box .ink-link .ul { stroke-dashoffset: 0 !important; opacity: .5; }
}