/* ============================================================
   negishoyu.dev 展示用のひさし(shell)— PETTAN BEAT(project/mochitsuki・旧仮題「高速餅つき」)
   打ち上げ花火の展示(public/lab/hanabi/shell.css)をそのまま写した。打ち上げ花火は
   基準作品「住宅街のブラックホール」(public/lab/gravity-bokeh/shell.css)の写し。
   和紙・テープ・傾き・書体・余白は描き直さない。作品に固有の所だけを差し替えた:
   - 本体側で畳む物= 舞台の 1 枚(#stage)と記念写真の紙焼き(#print)と白い閃光(#flash)
   - それ以外は打ち上げ花火の shell.css と一字一句同じ(安全域・h1 の字面・外装の中の地の設定・
     css/game.css の user-select 等の打ち消し・h2 の見出し)
   ゲーム本体(index.html の #stage・css/game.css・js/)には展示の都合を持ち込まない。

   ⚠ 基準作品で踏んだ落とし穴(そのまま守る)
   1. 和紙側の変数は **外装の中(短冊とフォールバック)だけ** に閉じ込める(本体の :root と名前がぶつからないように)。
   2. rem を使わず px で書く(本体が html の文字の大きさを変えても縮まない)。
   ============================================================ */

/* ───────── 和紙の意匠(トップから移植・外装スコープに限定) ───────── */
#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: calc(15px + env(safe-area-inset-top, 0px));
  left: calc(18px + env(safe-area-inset-left, 0px));
  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);
}
/* h1 の意味を保ち、既存作品の短冊と同じ字面にする(Rustのダイヤモンドの style.css と同じ 1 行) */
#lab-nav .here { display: inline; margin: 0; font-weight: 400; }
/* 基準作品では本体の css/style.css が外装へ継がせていた地の設定(* の box-sizing・html の 12px/1.5 の字・
   antialiased)を、外装の中だけに写す。ゲームの css/game.css はどれも持っていないので、無いと
   ①フォールバックの紙(.ng-box)が 100% +余白になって狭い画面で右へはみ出す
   ②短冊の 2 段目(X の行)の行の高さが基準作品と 1 px ずれる ③字が基準作品より太って見える(サイトのトップ・棚も antialiased) */
#lab-tanzaku, #lab-tanzaku *, #nogpu, #nogpu * { box-sizing: border-box; }
#lab-tanzaku { font: 12px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
#lab-tanzaku, #nogpu { -webkit-font-smoothing: antialiased; }
/* ゲームの css/game.css(body の user-select:none・-webkit-touch-callout:none・-webkit-tap-highlight-color:transparent)の打ち消し:
   短冊とフォールバックはふつうの紙とリンクとして、長押し・選択・触った時の薄い影が基準作品と同じになるように
   (触った時の影は initial= 端末ごとの既定の色。PC は薄い黒・スマホは薄い青) */
#lab-tanzaku, #nogpu { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; -webkit-tap-highlight-color: initial; }
#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 にします」)**。初版 18px は小さいとの裁定。
   (基準作品の shell.js にある検分用の ?icon=NN の口は、打ち上げ花火・高速餅つきの shell.js には持たせていない) */
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); }

/* ───────── WebGL2 が使えない・読み込めない時 ─────────
   既定は「見えている」。JS が動く環境では head の 1 行で即座に隠し、
   shell.js が判定してから必要なときだけ出し直す(= JS 無効でも黒画面にしない)。
   ここは全面を和紙にする(棚・トップと地続きに見せる)。
   紙の上端は shell.js が短冊の下端を測って --tz-bottom に入れる(決め打ちにしない)。 */
#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; }
/* 判定が付いたら本体側は畳む(黒い canvas を残さない)= 舞台・紙焼き・閃光 */
html[data-gpu="no"] #stage,
html[data-gpu="no"] #print,
html[data-gpu="no"] #flash { 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);
}
/* 作品名が短冊の h1 なので、ここの見出しは h2(字面は h1 と同じ・Rustのダイヤモンドの style.css と同じ) */
.ng-box h2 {
  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: calc(11px + env(safe-area-inset-top, 0px)); left: calc(11px + env(safe-area-inset-left, 0px)); 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; }
}