/* ============================================================
   全ページ共通のカラーパレット・フォント

   2026-08: 同じ :root が20ページに重複していたのでここに1本化した。
   **色やフォントを変えるときはこのファイルだけを触ること。**

   2026-08-09: ピクセル筐体デザインに刷新(颯太の依頼)。
   参考は spideytracker.net。ただし移植したのは「ドット絵にすること」ではなく:
     ・暗い画面を明るい筐体が囲む(普通のダークテーマと逆)
     ・装飾は全部ベゼルに寄せ、中身は素っ気なくする
     ・ぼかしを一切使わない(影もテキストシャドウも blur=0)
     ・角は丸めずに欠けさせる
   7/29のサイバーパンク版から、色相(青+水色)は引き継ぎ、質感だけ入れ替えている。
   変数名は1つも変えていないので、20ページの既存 var() 参照は全部そのまま動く。
   ============================================================ */

/* ===== 書体(全部自前ホスト。Google Fontsへの外部接続は不要)=====
   DotGothic16 はサイトに実際に出る1886字だけに詰めてある(104KB)。
   Google Fonts 経由だと同じ用途で201KB落ちてくる(2026-08-09 実測)。
   **データを追加したら `python3 tools/fontsubset/build.py` を必ず再実行すること。**
   足りない字は豆腐(□)になる。 */
@font-face{
  font-family:"DotGothic16";
  src:url("fonts/dotgothic16-subset.woff2") format("woff2");
  font-weight:400 900;      /* 単一ウェイトなので太字も同じ字形を使う */
  font-display:swap;
}
@font-face{
  font-family:"Silkscreen";
  src:url("fonts/silkscreen-regular.woff2") format("woff2");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"Silkscreen";
  src:url("fonts/silkscreen-bold.woff2") format("woff2");
  font-weight:700; font-display:swap;
}

:root{
  /* ピクセル単位。すべての寸法をこの倍数にすると格子が揃う */
  --px: 4px;

  /* --- 画面(中身)。ここは暗い --- */
  --bg: #0a1628;
  --panel: #0e1c3b;
  --panel2: #132749;
  --parchment: #d7f5ff;
  --parchment-dim: #7e9fbd;

  /* --- 筐体(枠)。ここが明るいのが今回の肝 --- */
  --case: #7fb2d9;
  --case-lit: #a8e1fe;
  --case-dim: #3f6f9e;
  --case-deep: #2b4f7a;
  --ink: #000000;
  --outdoor-1: #3a63b8;   /* 筐体の外側(ページ背景)の上 */
  --outdoor-2: #24417f;
  --outdoor-3: #0f1d3f;

  /* --- 既存の名前。中身だけ差し替え --- */
  --brass: #96e0f7;
  --brass-dim: #3f6f9e;
  --teal: #a8e1fe;
  --teal-dim: #3f6f9e;
  --line: #08111f;              /* 暗い面の上では黒い線が"溝"に見える */
  --danger: #e2543f;
  --lime: #f89d51;              /* 主アクセント。琥珀に変更(選択中のタブ等) */
  --lime-dim: #8a4f1f;
  --magenta: #96e0f7;
  --magenta-dim: #3f6f9e;

  --font-body: "DotGothic16", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-display: "DotGothic16", "Hiragino Sans", sans-serif;
  --font-mono: "Silkscreen", "JetBrains Mono", monospace;

  --hp: #7bdb52;
  --sp: #f0a233;
  --t-無: #a7aeb8;
  --t-炎: #ef7148;
  --t-水: #3f93d6;
  --t-雷: #ecc23f;
  --t-地: #b98a4e;
  --t-草: #6dbf4f;
  --t-氷: #63d9e3;
  --t-竜: #9a6ff0;
  --t-闇: #8064b8;
  --atk: #ff6f6f;
  --def: #6fb8ff;
  --tier-ss: #eaf6ff;
  --tier-s: #a8e1fe;
  --tier-a: #f89d51;
  --tier-b: #3f6f9e;
  --tier-c: #45505f;
  --tier-d: #262e38;
}

/* ===== 共通の演出レイヤー(全ページに自動で波及する) ===== */
  ::selection{background:var(--lime);color:#0a0d12;}
  .icon{display:inline-flex;width:1em;height:1em;vertical-align:-0.15em;}
  .icon svg{width:100%;height:100%;}
  /* ドット表示は「小さい絵を拡大して見せる」ときだけ正しい。地図タイルとヒーロー
     画像は縮小表示なので、かけるとジャギーになるだけ(2026-08-09 実測で確認)。 */
  img{image-rendering:pixelated;}
  .leaflet-container img, .hero-media, img.photo{image-rendering:auto;}

  /* キーボード操作時のフォーカスリング。:focus-visible限定なのは変えず、
     光る輪郭 → 琥珀のピクセル枠に置き換え(2026-08-09)。 */
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
  textarea:focus-visible, [tabindex]:focus-visible{
    outline:var(--px) solid var(--lime);
    outline-offset:var(--px);
    box-shadow:none;
    border-radius:0;
  }

  /* glitch-hover: 7/29に入れたRGBずらし。ピクセル筐体でも"信号の乱れ"として
     成立するので残す。ただし色をアクセント2色に寄せ、ずれ量を--pxの倍数にした。 */
  .glitch-hover{position:relative;display:inline-block;cursor:default;}
  .glitch-hover::before, .glitch-hover::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;opacity:0;}
  @media (hover:hover) and (pointer:fine){
    .glitch-hover:hover::before{opacity:.75;color:var(--lime);clip-path:inset(0 0 55% 0);transform:translate(calc(var(--px)*-1),0);animation:glitchShift .32s steps(2) infinite;}
    .glitch-hover:hover::after{opacity:.75;color:var(--case-lit);clip-path:inset(55% 0 0 0);transform:translate(var(--px),0);animation:glitchShift .32s steps(2) infinite reverse;}
  }
  @keyframes glitchShift{0%{transform:translate(calc(var(--px)*-1),0);}50%{transform:translate(var(--px),0);}100%{transform:translate(0,var(--px));}}

/* ===== ページ全体を「机の上に置かれた機械」にする(2026-08-09) =====
   20ページ全部が body > .wrap という同じ骨格を持っている(実測: 20/20)。
   なので .wrap を"画面"に、その外周に box-shadow で"筐体"を描けば、
   各ページのHTMLに一切触れずに全ページが筐体入りになる。

   セレクタを body>.wrap にしているのは、各ページのインライン<style>が
   このファイルより後に読まれるため。詳細度を1つ上げて !important を避ける。 */
  html{background:var(--outdoor-3);}
  html>body{
    position:relative;
    padding:calc(var(--px)*8) calc(var(--px)*8) calc(var(--px)*24);
  }
  /* 筐体の外側(机の上)のグラデーション。
     **background-attachment:fixed を body に付けてはいけない**(2026-08-09)。
     背景を画面に固定すると、スクロールのたびにブラウザが背景を描き直す。
     図鑑は高さ10,661px あるので、これが体感のもたつきになる。
     position:fixed の擬似要素にすると独立したレイヤーになり、
     スクロールしても描き直しが起きない(見た目は同じ)。 */
  html>body::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg, var(--outdoor-1) 0%, var(--outdoor-2) 45%, var(--outdoor-3) 100%);
  }
  body>.wrap{
    position:relative; z-index:1;
    background:var(--bg);
    /* 手前から: 水色の筐体 → その外側に黒い輪郭。
       後ろに書いた影ほど奥に描かれるので、大きい黒を後ろに置くと縁取りになる。
       十字に伸ばしているので四隅が欠け、昔の筐体の角になる。 */
    box-shadow:
      calc(var(--px)*-5) 0 0 0 var(--case), calc(var(--px)*5) 0 0 0 var(--case),
      0 calc(var(--px)*-5) 0 0 var(--case), 0 calc(var(--px)*5) 0 0 var(--case),
      calc(var(--px)*-6) 0 0 0 var(--ink),  calc(var(--px)*6) 0 0 0 var(--ink),
      0 calc(var(--px)*-6) 0 0 var(--ink),  0 calc(var(--px)*6) 0 0 var(--ink);
    outline:var(--px) solid var(--ink);   /* 画面と筐体の境目 */
  }
  /* 画面の格子。7/29の走査線+グローの代わり。動かない・光らない */
  body>.wrap::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-image:
      linear-gradient(rgba(120,165,220,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(120,165,220,.07) 1px, transparent 1px);
    background-size:calc(var(--px)*16) calc(var(--px)*16);
  }

  /* 7/29のアトモスフィア層(固定グリッド+青いグロー+走査線スイープ)は
     筐体の外側と噛み合わないので止める。変数は他ページが参照しているため残す。
     ::before は上で外の背景として作り直しているので、消すのは ::after だけ。 */
  body::after{content:none;}
  :root{
    --pulse: #ffd988; --pulse-dim: #8a4f1f;
    --grid-line: rgba(120,165,220,.07);
    --scan-glow: transparent;
    /* ぼかし禁止。グローは"硬い段差"に置き換える */
    --glow-blue-sm: var(--px) var(--px) 0 0 var(--ink);
    --glow-blue-lg: var(--px) var(--px) 0 0 var(--ink);
    --ease-out: steps(2, end);
    --ease-in-out: steps(2, end);
  }

  /* 見出しの左アクセント。グロー → 琥珀のベタ棒に */
  h1.title, h1.brand-title{position:relative;padding-left:calc(var(--px)*4);text-shadow:var(--px) var(--px) 0 var(--ink);}
  h1.title::before, h1.brand-title::before{
    content:"";position:absolute;left:0;top:2px;bottom:2px;width:var(--px);
    background:var(--lime);box-shadow:none;
  }
  .title small, .brand-title small{text-shadow:none;color:var(--case-lit);font-family:var(--font-mono);}

  /* 左上の「P」。角丸+内側グローの名残だったので、筐体のボタンに揃える。
     各ページの .brand-badge より詳細度を1つ上げて上書きする(2026-08-09)。 */
  body .brand-badge{
    border-radius:0;border:0;background:var(--case-lit);color:var(--ink);
    font-family:var(--font-mono);font-weight:400;
    box-shadow:
      calc(var(--px)*-1) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink),
      0 calc(var(--px)*-1) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink),
      inset 0 var(--px) 0 0 rgba(255,255,255,.55),
      inset 0 calc(var(--px)*-1) 0 0 rgba(0,0,0,.28);
  }

  /* ナビ。平行四辺形 → 筐体から生えたプラスチックのタブ */
  nav.tabs{display:flex;background:transparent;border:none;padding:0;gap:var(--px);
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:100%;}
  nav.tabs::-webkit-scrollbar{display:none;}
  nav.tabs a{position:relative;font-size:12.5px;color:var(--ink);text-decoration:none;
    padding:calc(var(--px)*2) calc(var(--px)*3);font-weight:700;font-family:var(--font-display);letter-spacing:.02em;
    background:var(--case);border:0;clip-path:none;flex-shrink:0;
    box-shadow:
      inset 0 var(--px) 0 0 rgba(255,255,255,.45),
      inset 0 calc(var(--px)*-1) 0 0 rgba(0,0,0,.28);
    transition:transform .06s steps(1), background .06s steps(1);}
  nav.tabs a span{position:relative;z-index:1;}
  nav.tabs a::before{content:none;}
  nav.tabs a:hover{color:var(--ink);background:var(--case-lit);transform:translateY(calc(var(--px)*-1));}
  nav.tabs a.current{color:var(--ink);background:var(--lime);font-weight:700;box-shadow:
      inset 0 var(--px) 0 0 rgba(255,255,255,.45),
      inset 0 calc(var(--px)*-1) 0 0 rgba(0,0,0,.28);}

  .section h2{position:relative;display:flex;align-items:center;gap:calc(var(--px)*2);}
  .section h2::before{content:"";width:var(--px);height:calc(var(--px)*4);background:var(--lime);
    clip-path:none;flex-shrink:0;box-shadow:none;}

  /* 押下フィードバック。イージング曲線 → steps。ぬるっと動かさない */
  .chip, .back-btn, nav.tabs a, button{transition:transform .06s steps(1), background .06s steps(1);}
  .chip:active, .back-btn:active, nav.tabs a:active{transform:translateY(var(--px));}

  .back-btn, .btn, button.primary{position:relative;overflow:hidden;border-radius:0;}
  .back-btn:hover, .btn:hover{background:var(--panel2);}
  .back-btn:hover{border-color:var(--lime);box-shadow:none;}

  /* カードは角なし。ナビのタブ・ベゼルと同じ直線で揃える(筐体デザイン)。
     **各ページのインライン<style>で border-radius を書き直さないこと。**
     インラインは外部CSSより後に読まれるので、書くとこちらが負ける。
     実際に6ページが border-radius:8px を持っていて、2026-08-12まで
     カードだけ角丸のまま残っていた。 */
  .card{overflow:hidden;border-radius:0;}
  .card:hover{border-color:var(--lime);box-shadow:calc(var(--px)*-1) calc(var(--px)*-1) 0 0 var(--case-deep);}

  .brand-link{display:flex;align-items:center;gap:calc(var(--px)*3);text-decoration:none;color:inherit;}
  .brand-link:hover{opacity:.82;}

  /* ===== サイト全体共通検索バー(shared/global_search.jsと対) =====
     右側だけ縦積み(検索→ナビ)にするのは2026-07-21の依頼のまま。
     角丸とグローだけピクセル化した(2026-08-09)。 */
  .header-right{display:flex;flex-direction:column;align-items:flex-end;gap:calc(var(--px)*2);flex:1 1 auto;min-width:240px;}
  .gsearch-wrap{position:relative;width:100%;max-width:440px;}
  .gsearch-input{width:100%;background:var(--panel2);border:var(--px) solid var(--ink);color:var(--parchment);
    border-radius:0;padding:calc(var(--px)*2) calc(var(--px)*3);font-size:13px;font-family:var(--font-body, inherit);}
  .gsearch-input::placeholder{color:var(--parchment-dim);}
  .gsearch-input:focus{outline:none;border-color:var(--lime);box-shadow:none;}
  .gsearch-results{display:none;position:absolute;top:calc(100% + var(--px));left:0;right:0;
    background:var(--panel);border:var(--px) solid var(--ink);border-radius:0;
    box-shadow:var(--px) var(--px) 0 0 rgba(0,0,0,.5);max-height:60vh;overflow-y:auto;z-index:80;padding:var(--px);}
  .gsearch-results.open{display:block;}
  .gsearch-row{display:flex;align-items:center;gap:calc(var(--px)*2);font-size:12.5px;padding:calc(var(--px)*2);border-radius:0;color:var(--parchment);}
  .gsearch-row.gsearch-subrow{background:var(--panel2);margin:var(--px) 0;}
  .gsearch-link{cursor:pointer;text-decoration:none;color:var(--parchment);}
  .gsearch-link:hover{background:var(--panel2);}
  .gsearch-icon{width:22px;height:22px;object-fit:contain;flex-shrink:0;}
  .gsearch-name{flex:1;font-weight:700;}
  .gsearch-name .gsearch-en{display:block;font-weight:400;font-size:10.5px;color:var(--parchment-dim);font-family:var(--font-mono, monospace);}
  .gsearch-tag{font-size:10px;padding:2px calc(var(--px)*2);border-radius:0;background:var(--lime);color:var(--ink);font-weight:700;white-space:nowrap;flex-shrink:0;}
  .gsearch-meta{font-size:11px;color:var(--case-lit);font-family:var(--font-mono, monospace);white-space:nowrap;flex-shrink:0;}
  .gsearch-subhead{font-size:10.5px;font-weight:700;color:var(--case-lit);text-transform:uppercase;letter-spacing:.05em;padding:calc(var(--px)*2) calc(var(--px)*2) var(--px);}
  .gsearch-empty{font-size:12px;color:var(--parchment-dim);padding:calc(var(--px)*2);}

  /* Tier表の入手時期バッジ(2026-08-09)。Tier表はS/A/Bのランキングであり拠点プランナーの
     ような「おすすめ」ではないため配合限定パルが上位に出ること自体は正しいが、見る側は
     「S位の採掘パル」を捕まえに行こうとするので入手時期が分からないと使えない。ランキング
     から除外はせずバッジで補足する。サイズ・余白は既存の同種ラベル.ranch-tierを踏襲。
     specialだけ既存の--dangerで目立たせ、他と見分けられるようにする。 */
  .tier-obtain{display:inline-block;margin-left:6px;font-size:10px;background:var(--panel2);
    padding:1px calc(var(--px)*1.5);border-radius:0;color:var(--case-lit);vertical-align:middle;}
  .tier-obtain.special{background:var(--danger);color:var(--parchment);}

  @media (max-width: 720px){
    .header-right{align-items:stretch;}
    .gsearch-wrap{max-width:none;}
  }

  /* 初期表示用スケルトン(2026-07-28)。実カードと同じ形の枠を先に出す施策は
     そのまま。ただし光沢が流れるアニメは"ぼかし禁止"に反するので、
     2コマで明滅する点滅に変えた(2026-08-09)。 */
  .card.skeleton{cursor:default;pointer-events:none;}
  .card.skeleton .icon-wrap{background:var(--panel2);}
  .skel-bar{border-radius:0;background:var(--panel2);margin:0 auto;}
  .card.skeleton .icon-wrap, .skel-bar{position:relative;overflow:hidden;}
  .card.skeleton .icon-wrap::after, .skel-bar::after{
    content:"";position:absolute;inset:0;background:rgba(168,225,254,.10);
    animation:skel-blink 1s steps(1) infinite;
  }
  @keyframes skel-blink{0%,49%{opacity:0;}50%,100%{opacity:1;}}

  /* HUD風の角ブラケット → ピクセルの角金具。drop-shadowを外した */
  .hud-frame{position:relative;}
  .hud-frame::before, .hud-frame::after{
    content:"";position:absolute;width:calc(var(--px)*4);height:calc(var(--px)*4);
    border:var(--px) solid var(--lime);opacity:1;pointer-events:none;z-index:2;filter:none;
  }
  .hud-frame::before{top:0;left:0;border-right:none;border-bottom:none;}
  .hud-frame::after{bottom:0;right:0;border-left:none;border-top:none;}

  /* ヒーロー画像に重ねる走査線。1pxの横縞なのでピクセル方針と噛み合う。残す */
  .hero-scanlines{
    position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(180deg, rgba(180,210,255,.05) 0px, rgba(180,210,255,.05) 1px, transparent 1px, transparent 3px);
    mix-blend-mode:overlay;
  }

  /* "ここぞ"の1箇所アクセント。グロー → 黒の段差 */
  .text-pulse{color:var(--pulse);text-shadow:var(--px) var(--px) 0 var(--ink);}

  .tool-card:active, .card:active{transition:transform .06s steps(1);}
  @media (hover:hover) and (pointer:fine){
    .tool-card:hover, .card:hover{box-shadow:calc(var(--px)*-1) calc(var(--px)*-1) 0 0 var(--case-deep);}
  }

/* ===== arcade.js が挿し込む「生きている感じ」の層(2026-08-09) =====
   上の看板 / 下のティッカー / 枠の外の相棒 / 起動ログ。
   HTMLには触れず、shared/arcade.js を読むだけで全ページに乗る。 */

  /* 上ベゼルにまたがる看板 */
  .arc-plaque{
    max-width:1400px;margin:0 auto;text-align:center;
    position:relative;z-index:3;pointer-events:none;
    height:0;                       /* 場所を取らずに筐体の上へ載せる */
  }
  .arc-plaque-in{
    display:inline-flex;align-items:center;gap:calc(var(--px)*2);
    transform:translateY(calc(var(--px)*-4));
    background:var(--case-deep);color:var(--parchment);
    padding:calc(var(--px)*1.5) calc(var(--px)*5);
    box-shadow:
      calc(var(--px)*-1) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink),
      0 calc(var(--px)*-1) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink),
      inset 0 var(--px) 0 0 rgba(255,255,255,.30);
    white-space:nowrap;
  }
  .arc-plaque-in b{font-family:var(--font-mono);font-size:13px;letter-spacing:.10em;font-weight:400;}
  .arc-plaque-in em{font-style:normal;font-family:var(--font-display);font-size:13px;font-weight:700;}
  .arc-dot{width:calc(var(--px)*2);height:calc(var(--px)*2);background:var(--danger);flex-shrink:0;}

  /* 下のティッカー。機械の台座に見せる */
  .arc-ticker{
    max-width:1400px;margin:calc(var(--px)*7) auto 0;
    background:#1a2b3d;overflow:hidden;height:calc(var(--px)*9);
    display:flex;align-items:center;position:relative;z-index:2;
    box-shadow:
      calc(var(--px)*-1) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink),
      0 calc(var(--px)*-1) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink),
      inset 0 var(--px) 0 0 var(--case);
  }
  .arc-track{
    display:inline-flex;gap:calc(var(--px)*10);white-space:nowrap;padding-left:100%;
    font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--case-lit);
    animation:arcTick 46s linear infinite;
    /* will-change は arcade.js が「見えている間だけ」付ける。
       常時付けると使っていない合成レイヤーを確保し続けることになる。 */
  }
  .arc-track b{font-family:var(--font-display);color:var(--parchment);font-weight:700;}
  /* 効果音のトグル(shared/sfx.js が挿す)。ティッカーの右端に固定 */
  .arc-sfx-btn{
    position:absolute;right:0;top:0;bottom:0;flex-shrink:0;
    background:var(--case-deep);color:var(--parchment);border:0;cursor:pointer;
    font-family:var(--font-display);font-size:11px;font-weight:700;
    padding:0 calc(var(--px)*3);white-space:nowrap;
    box-shadow:inset var(--px) 0 0 0 var(--ink), inset 0 var(--px) 0 0 rgba(255,255,255,.25);
  }
  .arc-sfx-btn:hover{background:var(--case-dim);}
  .arc-sfx-btn[aria-pressed="true"]{background:var(--lime);color:var(--ink);}
  .arc-track i{font-style:normal;color:var(--pulse);}
  @keyframes arcTick{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  .arc-ticker:hover .arc-track{animation-play-state:paused;}

  /* 枠の外に立つ相棒と、その吹き出し */
  /* **画面に貼り付ける。** ページ末尾に置くと、図鑑のような高さ1万pxの
     ページでは最後までスクロールしないと会えない(2026-08-09、颯太の指摘)。
     参考にした spideytracker も画面左下に固定されている。 */
  .arc-mascot{
    position:fixed;left:calc(var(--px)*2);bottom:calc(var(--px)*2);z-index:60;
    /* **独立したレイヤーに載せる。** 画面に固定した要素をレイヤー化しないと、
       スクロールのたびに下の内容と一緒に描き直される(2026-08-09)。 */
    transform:translateZ(0);
    display:flex;align-items:flex-end;gap:calc(var(--px)*2);
    pointer-events:none;
  }
  .arc-mascot .arc-mascot-sprite,
  .arc-mascot img{cursor:pointer;pointer-events:auto;}
  /* 吹き出しは畳める。出しっぱなしだと画面を食う */
  .arc-mascot.is-quiet .arc-bubble{display:none;}
  .arc-mascot img{
    width:calc(var(--px)*20);height:calc(var(--px)*20);
    image-rendering:pixelated;flex-shrink:0;
  }
  /* 待機モーション用。寸法と背景は arcade.js が絵ごとに入れる
     (コマ幅がパルごとに違うため、CSS側で決め打ちできない) */
  .arc-mascot-sprite, .arc-badge-sprite, .arc-boot-sprite, .arc-load-sprite{
    image-rendering:pixelated;flex-shrink:0;
  }
  /* コマ送りは中の帯を transform でずらす(描き直しを起こさないため) */
  .arc-mascot-sprite-strip, .arc-badge-sprite-strip, .arc-boot-sprite-strip, .arc-load-sprite-strip{
    image-rendering:pixelated;background-repeat:no-repeat;
  }
  /* バッジの中身。文字だった頃の中央寄せをそのまま使う */
  body .brand-badge{padding:0;overflow:hidden;}
  .arc-bubble{
    pointer-events:auto;background:#12100c;max-width:420px;margin-bottom:calc(var(--px)*3);
    box-shadow:
      calc(var(--px)*-1) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink),
      0 calc(var(--px)*-1) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink);
  }
  .arc-bar{
    background:var(--pulse);color:var(--ink);font-size:12px;font-weight:700;
    padding:calc(var(--px)*1.5) calc(var(--px)*3);
    display:flex;justify-content:space-between;gap:calc(var(--px)*4);align-items:center;
  }
  /* 指で押す前提の余白。padding:0 だと実測18pxしかなく、スマホで狙って外す。
     見た目の位置を変えないよう、負のマージンで押し出した分を戻している。 */
  .arc-bar button{background:none;border:0;font:inherit;cursor:pointer;color:var(--ink);
    padding:9px 8px;margin:-9px -8px;min-height:36px;}
  .arc-bubble p{margin:0;padding:calc(var(--px)*3);font-size:12.5px;line-height:1.8;color:var(--parchment);}

  /* 起動演出。セッション中の最初の1ページだけ。
     モノクローナ(内部名 MonochromeQueen、パートナースキル「染まらぬ孤高の姫」)が
     カーテシーで迎える。**尺は固定しない**。お辞儀しきったところで
     ページの準備を待ち、整い次第フェードで明ける(shared/arcade.js)。
     図鑑の読み込みが本番で2.3秒かかるため、1.8秒固定だと明けた直後に
     まだ読み込み中の画面が見えていた(2026-08-10 実測)。 */
  .arc-boot{
    position:fixed;inset:0;z-index:9999;background:var(--bg);cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:calc(var(--px)*6);
    transition:opacity .45s ease, visibility .45s;
  }
  .arc-boot.is-leaving{opacity:0;visibility:hidden;}
  /* 最初は saturate(0) でモノクロにしていたが、色が戻るのがフェードの
     0.45秒だけで誰にも見えず、しかも赤い瞳という一番の特徴を3秒間
     隠すだけになっていた(2026-08-11、颯太さんの指摘で発覚)。
     色は最初から出し、去り際にわずかに明るくするだけにする。 */
  .arc-boot-stage{transition:filter .45s ease;}
  .arc-boot.is-leaving .arc-boot-stage{filter:brightness(1.25);}
  .arc-boot-title{
    font-family:var(--font-display);font-size:15px;letter-spacing:.24em;
    color:var(--case-lit);text-transform:uppercase;
  }
  .arc-boot-sub{
    font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--case-dim);
  }
  .arc-skip{
    position:fixed;right:calc(var(--px)*6);bottom:calc(var(--px)*5);
    font-family:var(--font-mono);font-size:10.5px;color:var(--case-dim);letter-spacing:.1em;
  }

  /* 読み込み中の表示。**起動演出とは別物**(2026-08-11)。
     起動演出は全画面・1回・お辞儀(終わる動き)。こちらは隅・ループ・待ちの動き。
     いつ終わるか分からない待ちにお辞儀を使うと、しきったあと固まって見える。
     0.25秒以内に終わる読み込みでは出さない(shared/arcade.js の LOAD_DELAY)。 */
  .arc-load{
    position:fixed;z-index:9990;
    right:calc(var(--px)*5);bottom:calc(var(--px)*5);
    display:flex;align-items:flex-end;gap:calc(var(--px)*2);
    padding:calc(var(--px)*2) calc(var(--px)*3);
    background:var(--case);border:var(--px) solid var(--ink);
    box-shadow:calc(var(--px)*2) calc(var(--px)*2) 0 0 rgba(0,0,0,.45);
    opacity:0;transform:translateY(calc(var(--px)*2));
    transition:opacity .22s ease, transform .22s ease;
    pointer-events:none;
  }
  .arc-load.is-in{opacity:1;transform:none;}
  .arc-load-fig{display:flex;align-items:flex-end;}
  .arc-load-body{display:flex;flex-direction:column;gap:var(--px);min-width:104px;}
  .arc-load-text{
    font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--case-lit);
  }
  /* 進捗は分からないので、量ではなく「動いている」ことだけを示す帯にする */
  .arc-load-bar{
    height:calc(var(--px)*2);background:var(--ink);overflow:hidden;position:relative;
  }
  .arc-load-bar::after{
    content:"";position:absolute;inset:0 auto 0 0;width:40%;
    background:var(--case-lit);
    animation:arc-load-sweep 1.05s linear infinite;
  }
  @keyframes arc-load-sweep{
    from{transform:translateX(-100%);}
    to  {transform:translateX(250%);}
  }
  @media (max-width:820px){
    /* スマホでは右下に「上へ戻る」等が居ることがあるので、少し内側に寄せる */
    .arc-load{right:calc(var(--px)*3);bottom:calc(var(--px)*3);}
    .arc-load-body{min-width:84px;}
  }

  @media (max-width:820px){
    /* 狭い画面では吹き出しが場所を食うので、相棒だけ置く(押せば出る) */
    .arc-mascot{gap:var(--px);}
    .arc-bubble{max-width:min(70vw,320px);margin-bottom:0;}
    .arc-plaque-in{font-size:11px;padding:var(--px) calc(var(--px)*3);}
    html>body{padding:calc(var(--px)*4) calc(var(--px)*4) calc(var(--px)*16);}
    body>.wrap{
      box-shadow:
        calc(var(--px)*-3) 0 0 0 var(--case), calc(var(--px)*3) 0 0 0 var(--case),
        0 calc(var(--px)*-3) 0 0 var(--case), 0 calc(var(--px)*3) 0 0 var(--case),
        calc(var(--px)*-4) 0 0 0 var(--ink),  calc(var(--px)*4) 0 0 0 var(--ink),
        0 calc(var(--px)*-4) 0 0 var(--ink),  0 calc(var(--px)*4) 0 0 var(--ink);
    }
  }

  @media (prefers-reduced-motion: reduce){
    .arc-load-bar::after{animation:none;width:100%;}
    .glitch-hover:hover::before, .glitch-hover:hover::after{animation:none;}
    .card.skeleton .icon-wrap::after, .skel-bar::after{animation:none;}
    /* ティッカーは止めて、先頭だけ静止表示にする(流れる文字が読めない人向け) */
    .arc-track{animation:none;padding-left:calc(var(--px)*4);}
    .arc-boot{display:none;}
  }

/* ページ末尾の免責表記。ポケットペアの二次創作ガイドライン⑥(公式製品と誤認される
   表現の禁止)への対応として、全ページに「非公式」と権利表記を出すために共通化した。
   一部のページは同名クラスを自前の<style>でも定義しているが、後勝ちで問題ない。 */
.footer-note{font-size:11px;color:var(--parchment-dim);text-align:center;margin-top:24px;line-height:1.7;}
.footer-note a{color:var(--brass);}

/* 注意書き(.caveat)の折りたたみ。狭い画面でのみ効く。詳細は shared/caveat-collapse.js。
   デスクトップでは data-collapsed が "0" に戻されるので、見た目は従来のまま。 */
.caveat-toggle{
  display:block;width:100%;margin:-10px 0 16px;padding:8px 12px;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  color:var(--brass);font-family:var(--font-body);font-size:12px;font-weight:700;
  cursor:pointer;text-align:center;min-height:36px;
}
.caveat-toggle:hover{border-color:var(--brass);}
.caveat[data-collapsed="1"]{
  max-height:3.6em;overflow:hidden;margin-bottom:10px;
  -webkit-mask-image:linear-gradient(#000 40%, transparent 100%);
          mask-image:linear-gradient(#000 40%, transparent 100%);
}

/* フッターの「収録データ: …」の行(scripts/inject_data_version.py が入れる)。
   権利表記より一段落として、注記であることを見た目でも分かるようにする。
   .footer-note は各ページのインラインCSSで定義されているので、こちらは
   色と字送りだけを足す(サイズは親を継ぐ)。 */
.data-version{display:inline-block;margin-top:4px;font-family:var(--font-mono);
  font-size:.92em;letter-spacing:.02em;opacity:.75;}

/* 注記の中でゲーム内部の変数名などをそのまま出すとき用。
   本文と地続きに見えると「サイトが決めた値」と誤読されるので、明確に別物として見せる。 */
code{font-family:var(--font-mono);font-size:.92em;background:rgba(0,0,0,.28);
  border:1px solid var(--line);border-radius:3px;padding:1px 5px;}