/* ===========================================================
   アスカ文明 — tegaki.css を 既存の 部品へ つなぐ 橋渡し
   -----------------------------------------------------------
   tegaki.css は class="sk-frame" などを 付けた 要素に だけ 効く。
   全ページの HTML に クラスを 付けて 回ると 戻しにくい ので、
   **既存の 部品の セレクタに tegaki と 同じ 描き方を 当てる。**

   描き方 (tegaki.css と 同じ):
     枠線・地色・影は ::before に 描き、filter:url(#roughN) で 歪ませる。
     **中身には filter が かからない** ので 文字は ぼけない。

   tegaki.css と ちがう ところ 一つ:
     tegaki.css は 「.sk-frame > * { position:relative }」で 中身を 前に 出す。
     既存の 部品には position:absolute の 子 (本日のキャラの ラベル等) が
     いて、それを relative に 変えると 位置が 崩れる。
     かわりに 親を isolation:isolate に して ::before を z-index:-1 に 置く。

   戻し方: layouts/asuka.blade.php の この CSS の <link> と
           @include('partials.tegaki-filters') を 消す だけ。
   読み込み順: asuka2026.css → asuka-sketch.css → tegaki.css → これ
   =========================================================== */

:root{
  --tg-ink: var(--sk-ink, #2b2724);
}

/* ---- 1. 枠を 持つ 部品 (大きい 箱) -------------------------------- */
.asuka-panel,
.panel,
.todayChara,
.warpzone,
.infobar,
.cornerCard,
.asuka-charaCard,
.panel.hakase, .panel.art, .panel.kuji{     /* asuka-sketch.css が この 形で 白地を 指定して いる (詳細度で 負けない ため) */
  position: relative;
  isolation: isolate;                       /* ::before の z-index:-1 を この 箱の 中に 閉じこめる */
  background: transparent !important;
  border-color: transparent !important;     /* 幅は 残す (レイアウトを 変えない) */
  box-shadow: none !important;
  overflow: visible !important;             /* hidden だと はみ出した 線が 切れる */
}
.asuka-panel::before,
.panel::before,
.todayChara::before,
.warpzone::before,
.infobar::before,
.cornerCard::before,
.asuka-charaCard::before{
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: calc(-1 * var(--tg-bw, 4px));      /* もとの 枠線の 位置に 重ねる */
  z-index: -1;
  border: var(--tg-bw, 4px) solid var(--tg-ink);
  border-radius: inherit;                   /* asuka-sketch.css の いびつな 角を そのまま 使う */
  background: var(--tg-bg, #fff) !important;
  box-shadow: var(--tg-shadow, 6px 6px 0 var(--tg-ink));
  filter: url(#rough1);
  pointer-events: none;
}
/* 部品ごとの 線の 太さ・地色・影 (表。ここに 足す) */
.asuka-panel     { --tg-bw: 4px; }
.panel           { --tg-bw: 4px; }
.todayChara      { --tg-bw: 3px; }
.warpzone        { --tg-bw: 3px; }
.infobar         { --tg-bw: 3px; --tg-shadow: 4px 4px 0 var(--tg-ink); }
.cornerCard      { --tg-bw: 3px; --tg-shadow: 4px 4px 0 var(--tg-ink); }
.asuka-charaCard { --tg-bw: 3px; --tg-bg: #fffbe6; --tg-shadow: none; }
/* **.panel (トップの 三つ並び) だけは overflow:hidden を 残す。**
   角に 置いた 大きな 飾りの 絵文字 (.icon) を わざと 切り落として いる 部品で、
   visible に すると スマホ幅で ページが 4px 横に はみ出す。
   かわりに 線を 箱の 内がわに 描き、歪みと 影の ぶんの 余白を 取る */
.panel, .panel.hakase, .panel.art, .panel.kuji{ overflow: hidden !important; --tg-shadow: 4px 4px 0 var(--tg-ink); }
.panel::before{ inset: 3px 8px 8px 3px; }
.asuka-charaCard:hover{ box-shadow: none !important; }
.asuka-charaCard:hover::before{ box-shadow: 5px 5px 0 var(--tg-ink); }

/* 隣り合う 箱で 歪み方を 変える (同じ 歪みが 並ぶと 判こに 見える) */
.asuka-grid > *:nth-child(2n)::before,
.asuka-panel:nth-of-type(2n)::before,
.threecol > *:nth-child(2n)::before{ filter: url(#rough2); }

/* ---- 2. ボタン (全部) ---------------------------------------------- */
/*   **色を 一つずつ 書かない。**::before に background:inherit を 使うと、
     黄色でも グラデでも その ボタンの 地色が そのまま 歪んだ 形で 塗られる。
     親の 地は content-box に 縮めて、まっすぐな ふちを 隠す。

     除く もの:
       - ゲーム盤面の 中の 操作ボタン (十字キー・アクセル・タウンの UI)。
         キャンバスに 重ねた 半透明の 丸で、位置も absolute
       - <input type=submit>。::before が 付かない (いま 一つも 無い)        */
/* position は **詳細度 0** で 当てる。absolute や fixed の ボタンを 壊さない */
:where(body.asuka) :where(button, a.asuka-btn, .asuka-program-btn){ position: relative; }

body.asuka :is(button, a.asuka-btn, .asuka-program-btn):not(:is(.town-stage-wrap,.town-pad,.race-stage,.race-wrap,.quest-stage,.quest-wrap,.q2-wrap,.qe-stage) *){
  isolation: isolate;
  border-color: transparent !important;     /* 幅は 残す (レイアウトを 変えない) */
  background-clip: content-box !important;  /* まっすぐな ふちを 内がわへ 引っこめる */
  box-shadow: none !important;
}
body.asuka :is(button, a.asuka-btn, .asuka-program-btn):not(:is(.town-stage-wrap,.town-pad,.race-stage,.race-wrap,.quest-stage,.quest-wrap,.q2-wrap,.qe-stage) *)::before{
  content: "";
  position: absolute;
  inset: -3px;                              /* もとの 枠線 (2〜3px) の 位置 */
  z-index: -1;
  background: inherit;                      /* その ボタンの 地色・グラデを そのまま */
  background-clip: border-box;
  border: solid var(--tg-ink);
  border-width: inherit;                    /* 枠の 無い ボタンは 0 の まま */
  border-radius: inherit;
  box-shadow: var(--tg-shadow, none);
  filter: url(#rough2);
  pointer-events: none;
  transition: box-shadow .15s;
}
/* 影は 親から 引き継げない (親の 影は 消して いる) ので、影の ある ボタンだけ 表に 書く */
.asuka-btn                  { --tg-shadow: 4px 4px 0 var(--tg-ink); }
.asuka-btn.sm               { --tg-shadow: 2px 2px 0 var(--tg-ink); }
.asuka-btn:hover            { --tg-shadow: 6px 6px 0 var(--tg-ink); }
.asuka-program-btn,
.asuka-gheader .toggle      { --tg-shadow: 3px 3px 0 var(--tg-ink); }
/* 黒い ボタンに 黒い 影を 歪ませると、下に 切れ端が 出る。フォローボタンは 影なし */
.asuka-btn.sm.x-follow, .asuka-btn.sm.x-follow:hover { --tg-shadow: none; }   /* .asuka-btn.sm より 強く */
body.asuka :is(button, a.asuka-btn):focus-visible{ outline: 2px solid var(--sk-accent, #e0568c); outline-offset: 4px; }

/* ヘッダーの メニュー。**選んで いる 項目と、乗せた 項目だけ** 枠が 出る */
.asuka-menu a{ position: relative; isolation: isolate; }
.asuka-menu a.active,
.asuka-menu a:hover{ border-color: transparent !important; background-clip: content-box !important; }
.asuka-menu a.active::before,
.asuka-menu a:hover::before{
  content: ""; position: absolute; inset: -2px; z-index: -1;
  background: inherit; background-clip: border-box;
  border: 2px solid var(--tg-ink); border-radius: inherit;
  filter: url(#rough3); pointer-events: none;
}

/* ---- 2b. ヘッダーの 線 ---------------------------------------------- */
/*   **細い 線は そのまま 歪ませると 消える。**filter の 効く 範囲は 要素の
     大きさで 決まる ので、3px の 箱だと 上下に 動いた ぶんが 切り落とされる。
     高さ 16px の 透明な 箱の 下辺に 線を 引いて、箱ごと 歪ませる           */
.asuka-gheader{ border-bottom-color: transparent !important; }
.asuka-gheader::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: -3px; height: 16px;
  border-bottom: 3px solid var(--tg-ink);
  filter: url(#rough2);
  pointer-events: none;
}

/* ---- 2c. トップの メインビジュアル (全幅の 帯) ---------------------- */
/*   動く 背景を 切る ために overflow:hidden が 要る 部品。線を 外へ 出せない。
     **帯の 内がわに 「紙色の 細い 帯 ＋ その ふちの 線」を 重ねて 歪ませる。**
     絵の まっすぐな ふちは 紙色の 帯の 下に 隠れる                         */
.mv-frame{
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  background-clip: padding-box !important;      /* 透明に した 枠の 下に 空色が 出ない ように */
}
.mv-frame::before,
.mv-frame::after{
  content: "";
  position: absolute; left: 0; right: 0; height: 18px;
  background: var(--c-bg, #f6f3ea);
  filter: url(#rough2);
  z-index: 40;                                  /* たいち・観覧車より 手前 */
  pointer-events: none;
}
.mv-frame::before{ top: -10px;    border-bottom: 3px solid var(--tg-ink); }
.mv-frame::after { bottom: -10px; border-top:    3px solid var(--tg-ink); filter: url(#rough1); }

/* ---- 2d. 来場者カウンター ------------------------------------------ */
/*   黒い 箱と、数字 一桁ずつの 小箱。地色は inherit で そのまま 引き継ぐ */
.visit-box,
.visit-digit{
  position: relative;
  isolation: isolate;
  border-color: transparent !important;
  background-clip: content-box !important;
}
.visit-box::before,
.visit-digit::before{
  content: "";
  position: absolute; inset: -3px; z-index: -1;
  background: inherit; background-clip: border-box;
  border-radius: inherit;
  filter: url(#rough2);
  pointer-events: none;
}
.visit-digit::before{ inset: -1px; filter: url(#rough3); }
.visit-digit:nth-child(2n)::before{ filter: url(#rough2); }   /* 桁ごとに 歪みを 変える */

/* ---- 2e. イラスト (一覧の サムネイル / 詳細の 絵と 添え書き) ---------- */
.illust-cell,
.dk-item,
.id-caption{
  position: relative;
  isolation: isolate;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.illust-cell::before,
.dk-item::before,
.id-caption::before,
.id-frame::before{
  content: "";
  position: absolute; inset: calc(-1 * var(--tg-bw, 3px)); z-index: -1;
  border: var(--tg-bw, 3px) solid var(--tg-ink);
  border-radius: inherit;
  background: var(--tg-bg, #fff);
  box-shadow: var(--tg-shadow, none);
  filter: url(#rough1);
  pointer-events: none;
}
.illust-cell, .dk-item { --tg-shadow: 4px 4px 0 var(--tg-ink); }   /* dk-item: アスオタウンで できること の カード */
.illust-cell:hover  { --tg-shadow: 6px 6px 0 var(--tg-ink); }
.illust-grid > *:nth-child(2n)::before{ filter: url(#rough2); }
/* overflow:hidden を 外した ぶん、絵の 上の 角は 自分で 丸める */
.illust-cell .thumb, .dk-item img{ border-radius: 9px 9px 0 0; }
.id-caption         { --tg-bw: 2px; --tg-bg: #fffbe6; }
.id-caption::before { filter: url(#rough2); }
/* 詳細の 絵。枠は 包みの ほうに 描く */
.id-frame{
  position: relative; isolation: isolate;
  display: table; margin: 0 auto;            /* 絵の 幅に 縮む */
  border-radius: 12px;
  --tg-bw: 0px; --tg-bg: #fffbe6;
}
.id-frame::before{ inset: 0; border-width: 3px; }
.id-stream .id-frame img{ border-color: transparent !important; background: transparent !important; }

/* ---- 2d'. 記念モード (祝 ◯◯人 突破！) ------------------------------ */
/*   垂れ幕・「あと◯日」の 丸・記念証。地の グラデは inherit で そのまま 引き継ぐ */
.kiri-banner,
.kiri-days,
.kiri-cert,
.kiri-cert-in{
  position: relative; isolation: isolate;
  border-color: transparent !important;
  background-clip: content-box !important;
  box-shadow: none !important;
}
.kiri-banner::before,
.kiri-days::before,
.kiri-cert::before,
.kiri-cert-in::before{
  content: "";
  position: absolute; inset: calc(-1 * var(--tg-bw, 0px)); z-index: -1;
  background: inherit; background-clip: border-box;
  border: var(--tg-bw, 0px) solid var(--tg-line, var(--tg-ink));
  border-radius: inherit;
  box-shadow: var(--tg-shadow, none);
  filter: url(#rough2);
  pointer-events: none;
}
.kiri-banner { --tg-bw: 3px; --tg-shadow: 4px 4px 0 var(--tg-ink); z-index: 2; }
.kiri-days   { --tg-shadow: none; }
.kiri-days::before{ filter: url(#rough3); }
/* 記念証。外は 金の 縁 (枠線なし・影あり)、内は 茶色の 細線 */
.kiri-cert   { --tg-shadow: 5px 5px 0 var(--tg-ink); }
.kiri-cert::before{ filter: url(#rough1); }
.kiri-cert-in{ --tg-bw: 2px; --tg-line: #8a6a00; --tg-shadow: none; }
/* **content-box に 縮めた 地は padding の ぶん 内がわに 引っこむ。**
   垂れ幕と 記念証は padding が 広い ので、まっすぐな 地が 小さく 見えて しまう。
   親の 地は 消して、::before の 地だけで 塗る (inherit は 消す 前の 値を 継がない ので 色を 書く) */
.kiri-banner { background: none !important; }
.kiri-banner::before{ background: linear-gradient(180deg, #e8455e, #c2224a); }
.kiri-cert   { background: none !important; }
.kiri-cert::before{ background: linear-gradient(135deg, #ffd24a, #fff3c4, #ffd24a); }
.kiri-cert-in{ background: none !important; }
.kiri-cert-in::before{ background: #fffdf5; }
.kiri-days   { background: none !important; }
.kiri-days::before{ background: #fff; }

/* 記念モードの カウンター。**金の 輪 (box-shadow) は まっすぐな まま 残って しまう** ので
   親から 消して、歪ませる ::before の ほうへ 移す */
.is-kirihan .visit-box{ box-shadow: none !important; }
.is-kirihan .visit-box::before{ box-shadow: 0 0 0 3px #ffd24a, 4px 4px 0 var(--tg-ink); }

/* ---- 2e'. 画像の 枠 (共通の 包み) ---------------------------------- */
/*   <img> には ::before が 付かない。**包みの span に 枠を 描き、絵の 枠は 透明に する。**
     使う ところで 角の 丸み (--tg-r)・線の 太さ (--tg-bw)・地色 (--tg-bg) を 決める      */
.tg-imgframe{
  position: relative; isolation: isolate;
  display: block; line-height: 0;
  border-radius: var(--tg-r, 12px);
  --tg-shadow: none;                        /* 親の 箱の 影を 引き継がない */
}
.tg-imgframe::before{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border: var(--tg-bw, 3px) solid var(--tg-ink);
  border-radius: inherit;
  background: var(--tg-bg, #fff);
  filter: url(#rough2);
  pointer-events: none;
}
.tg-imgframe > img{
  display: block;
  border-color: transparent !important;
  background: transparent !important;
  filter: none !important;
}
/* 本日のキャラ (トップ)。もとの 絵は 140px ＋ 余白 6 ＋ 枠 4 */
.tc-frame{ --tg-r: 14px; --tg-bw: 4px; width: fit-content; position: relative; z-index: 2; }
@media (max-width: 700px){ .tc-frame{ margin: 0 auto; } }   /* home.css と 同じ 切りかえ幅 */
/* 本日の名画 (トップ) */
.art-frame{ --tg-r: 10px; --tg-bw: 2px; }
.art-frame::before{ filter: url(#rough3); }

/* ---- 2e''. 入力欄 (お問い合わせフォーム) ---------------------------- */
/*   <input> <textarea> にも ::before は 付かない。包みの span に 枠を 描く。
     **入力中は ピンクに なる** もとの 動きは :focus-within で 引き継ぐ。
     textarea を 引っぱって 広げても、包みが いっしょに 伸びる ので 枠も 付いて くる */
.tg-field{
  position: relative; isolation: isolate;
  display: block;
  border-radius: var(--r-md, 12px);
  --tg-line: var(--tg-ink);
}
.tg-field::before{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border: 3px solid var(--tg-line);
  border-radius: inherit;
  background: #fff;
  box-shadow: 3px 3px 0 var(--tg-line);
  filter: url(#rough2);
  pointer-events: none;
  transition: border-color .15s, box-shadow .15s;
}
.tg-field:focus-within{ --tg-line: var(--c-pink); }
.tg-field > :is(input, textarea, select){
  display: block;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.tg-field + .tg-field::before,
.asuka-label:nth-of-type(2n) + .tg-field::before{ filter: url(#rough1); }   /* 欄ごとに 歪みを 変える */

/* ---- 2e'''. インラインの style で 枠を 持つ 箱 (共通) ------------------ */
/*   class="tg-box" を 足し、style に --tg-bw / --tg-bg を 書き添える */
.tg-box{
  position: relative; isolation: isolate;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.tg-box::before{
  content: "";
  position: absolute; inset: calc(-1 * var(--tg-bw, 3px)); z-index: -1;
  border: var(--tg-bw, 3px) solid var(--tg-ink);
  border-radius: inherit;
  background: var(--tg-bg, #fff);
  filter: url(#rough2);
  pointer-events: none;
}

/* ---- 2f. キャラクター詳細 ------------------------------------------ */
/*   枠は インラインの style で 書かれて いる ので、クラス名を 足して 当てる */
.chara-hero,
.chara-bar{
  position: relative; isolation: isolate;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.chara-hero::before,
.chara-bar::before,
.chara-frame::before{
  content: "";
  position: absolute; inset: calc(-1 * var(--tg-bw, 3px)); z-index: -1;
  border: var(--tg-bw, 3px) solid var(--tg-ink);
  border-radius: inherit;
  background: var(--tg-bg, #fff);
  box-shadow: var(--tg-shadow, none);
  filter: url(#rough1);
  pointer-events: none;
}
.chara-hero{ --tg-shadow: 6px 6px 0 var(--tg-ink); }
/* ステータスの 棒。overflow:hidden を 外した ぶん、中の 色つきの 棒は 自分で 丸める */
.chara-bar{ --tg-bw: 2px; --tg-bg: #f0f0f0; }
.chara-bar::before{ filter: url(#rough3); }
.chara-bar > div{ border-radius: 20px; }
/* キャラの 絵。<img> には ::before が 付かない ので 包みに 描く */
.chara-frame{
  position: relative; isolation: isolate;
  display: inline-block; max-width: 280px; width: 80%;
  margin: 14px auto; border-radius: 18px;
}
/* **--tg-shadow は 子へ 伝わる。**親の 箱 (.chara-hero) の 影が 付いて しまう ので 消す */
.chara-frame{ --tg-shadow: none; }
.chara-frame::before{ inset: 0; filter: url(#rough2); }
.chara-frame img{
  display: block; width: 100% !important; max-width: none !important; margin: 0 !important;
  box-sizing: border-box;
  border-color: transparent !important; background: transparent !important;
}

/* ---- 2g. ページング (‹ 前へ / 1 2 3 / 次へ ›) ------------------------ */
.asuka-pager a,
.asuka-pager span{
  position: relative; isolation: isolate;
  border-color: transparent !important;
  background-clip: content-box !important;
}
.asuka-pager a::before,
.asuka-pager span::before{
  content: "";
  position: absolute; inset: -2px; z-index: -1;
  background: inherit; background-clip: border-box;   /* 白・黄 (乗せた とき)・ピンク (いまの 頁) を そのまま */
  border: 2px solid var(--tg-ink);
  border-radius: inherit;
  filter: url(#rough3);
  pointer-events: none;
}
.asuka-pager > *:nth-child(2n)::before{ filter: url(#rough2); }

/* ---- 2g'. トップの アスオタウンの バナー --------------------------- */
/*   絵を 角丸で 切る ための overflow:hidden が 付いて いる。
     外すと 絵の 角が 出る ので、絵の ほうを 自分で 丸め、その 上に 枠を 重ねる */
.town-banner-link{
  position: relative;
  overflow: visible !important;
  border-color: var(--c-bg, #f6f3ea) !important;   /* もとの まっすぐな 枠は 紙色に */
  box-shadow: none !important;
}
.town-banner-link img{ border-radius: 11px; }
.town-banner-link::after{
  content: "";
  position: absolute; inset: -4px;
  border: 5px solid var(--tg-ink);
  border-radius: 15px;
  box-shadow: 5px 5px 0 var(--tg-ink);
  filter: url(#rough1);
  pointer-events: none;
}

/* ---- 2h. アスオタウン ---------------------------------------------- */
/*   ゲーム画面の 太枠。**中に HUD や 幕を 重ねて いて overflow:hidden を 外せない。**
     外がわの 包み (.town-stage-wrap) の 上に 歪んだ 枠を 重ねる。
     もとの 枠は 紙色に して 見えなく する。歪みは 弱い もの (rough3) を 使う:
     強いと 線と 画面の あいだに 紙色の すきまが 見える                    */
/* **枠は .town-stage-box (ゲーム画面と ぴったり 同じ 大きさの 包み) に 掛ける。**
   外がわの .town-stage-wrap は スマホ幅で 「上段に 全画面・シェアの ボタン、下段に ゲーム画面」を
   並べる 入れ物に なる。そちらに 掛けると ボタンごと 囲んで しまう (いちど やった)。
   検査: ~/asuka-town-harness/townframechk.js                                          */
.town-stage{ border-color: var(--c-bg, #f6f3ea) !important; box-shadow: none !important; }
.town-stage-box::after{
  content: "";
  position: absolute; inset: -1px;
  border: 7px solid var(--tg-ink);
  border-radius: 15px;
  box-shadow: 6px 6px 0 var(--tg-ink);        /* 影は 箱の 外にしか 描かれない */
  filter: url(#rough3);
  pointer-events: none;
  z-index: 3;
}
/* 全画面 (没入) の あいだは 枠を 出さない。画面いっぱいに 広がる */
body.town-immersive .town-stage-box::after{ display: none; }
/* 住民登録の 箱 */
.town-join{
  position: relative; isolation: isolate;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.town-join::before{
  content: "";
  position: absolute; inset: -3px; z-index: -1;
  border: 3px solid var(--tg-ink); border-radius: inherit;
  background: #fff;
  box-shadow: 5px 5px 0 var(--tg-ink);
  filter: url(#rough1);
  pointer-events: none;
}

/* ---- 3. パネル見出しの 丸い 帯 ------------------------------------ */
.asuka-panel h2{
  position: relative;
  isolation: isolate;
  background: transparent !important;
}
.asuka-panel h2::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--tg-bg, var(--c-dark));
  filter: url(#rough3);
  pointer-events: none;
}
.asuka-panel h2.pink{ --tg-bg: var(--c-pink); }
/* ゲーム等の カードでは 見出しの 帯を 消して ある (asuka-sketch.css)。そのまま */
.asuka-grid a.asuka-panel[style] h2::before{ display: none; }

/* ---- 4. 動きを 減らす 設定 ---------------------------------------- */
@media (prefers-reduced-motion: reduce){
  a.asuka-btn::before, button.asuka-btn::before{ transition: none; }
}