/* ==========================================================================
   cknw.jp - shared stylesheet
   配色は 2 つ。OS / ブラウザの設定で自動で切り替わります (ボタンはありません)。
     ミッドナイト (既定)  黒に近い茶 + オレンジ・黄・金
     スターライト         生成りの白 + 焦げ茶の文字 + オレンジ
   面はすべてガラスです。後ろのぼかしは大きな面とボタンだけ、光の写り込みと
   縁の反射は塗りだけで描いています (動かないので軽いままです)。
   Standalone CSS, no build step. Layer order: utilities override components.
   ========================================================================== */
@layer base, components, utilities;

@layer base {
  :root {
    --font-sans: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ ProN', 'Yu Gothic', 'Meiryo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* ==================================================================
       配色: チキンサーバーの色 (オレンジ・黄・茶・黒・白・灰)
       ------------------------------------------------------------------
       既定は「ミッドナイト」(暗い方) です。OS やブラウザの設定が
       「ライト」なら、下の @media で「スターライト」(明るい方) に
       自動で切り替わります。切り替えボタンはありません。
       ================================================================== */
    color-scheme: dark;
    --ink: 247 240 229;
    --ink-strong-a: 1;
    --ink-soft-a: 0.76;
    --ink-faint-a: 0.55;

    --bg: #0c0906;
    --bg-2: #191108;
    --surface: #1a130c;
    --surface-2: #241a10;
    --surface-3: #302216;
    --line: rgba(255, 208, 150, 0.15);
    --line-strong: rgba(255, 208, 150, 0.30);
    --hover: rgba(255, 159, 46, 0.45);
    --active: rgba(255, 159, 46, 0.62);

    /* オレンジ → 黄 の差し色。押せるものはこの色です。 */
    --accent: #ff9f2e;
    --accent-2: #ffd166;
    --accent-ink: #241202;
    --accent-soft: rgba(255, 159, 46, 0.16);
    --accent-glow: rgba(255, 159, 46, 0.40);
    --accent-grad: linear-gradient(135deg, #ff8c1a 0%, #ffb340 45%, #ffd166 100%);
    /* 茶色。落ち着かせたいところに使います。 */
    --brown: #8b5a2b;
    --brown-soft: rgba(139, 90, 43, 0.20);
    --star: #ffd166;
    --star-soft: rgba(255, 209, 102, 0.16);
    --play: #8fd14f;
    --play-2: #6ba832;
    --play-ink: #16210a;
    --play-glow: rgba(143, 209, 79, 0.35);

    --ok: #8fd14f;   --ok-soft: rgba(143, 209, 79, 0.16);
    --warn: #ffc542; --warn-soft: rgba(255, 197, 66, 0.16);
    --info: #ffb86b; --info-soft: rgba(255, 184, 107, 0.16);
    --danger: #ff7a5c; --danger-soft: rgba(255, 122, 92, 0.18);
    --tone-purple: #d9b38c; --tone-purple-soft: rgba(217, 179, 140, 0.18);
    --tone-teal: #ffd9a0;   --tone-teal-soft: rgba(255, 217, 160, 0.16);
    --tone-pink: #ffb0a0;   --tone-pink-soft: rgba(255, 176, 160, 0.16);

    /* ==================================================================
       ガラス
       ------------------------------------------------------------------
       本物のガラスの見え方は 3 つでできています。
         1. 屈折  … 後ろがぼやけて色が濃く見える  → backdrop-filter
         2. 反射  … 光の当たる面が白く光る        → --glass-sheen (斜めの帯)
         3. 縁    … 端ほど強く反射する (フレネル) → --glass-rim (枠だけの帯)
       縁は上が白、下がオレンジ寄りです。ガラスの厚みで色が分かれる
       (分散) のを真似ています。
       ================================================================== */
    --glass: rgba(38, 26, 16, 0.52);
    --glass-strong: rgba(24, 16, 9, 0.86);
    --glass-tile: rgba(255, 214, 160, 0.08);
    --glass-line: rgba(255, 214, 160, 0.22);
    --glass-shine: rgba(255, 236, 205, 0.30);
    --glass-underline: rgba(0, 0, 0, 0.30);
    --glass-blur: 10px;
    --glass-blur-sm: 6px;
    --glass-sheen: none;
    --glass-rim: none;
    --glass-spec: none;

    --scrim: rgba(10, 6, 3, 0.66);
    --shadow-panel: 0 14px 36px -22px rgba(0, 0, 0, 0.80);
    --shadow-pop: 0 20px 44px -18px rgba(0, 0, 0, 0.85);
    /* 背景の粒: 火の粉のような点を固定で敷いています (動きません)。 */
    --stage:
      radial-gradient(1px 1px at 12% 18%, rgba(255, 209, 102, 0.85) 50%, transparent 100%),
      radial-gradient(1.5px 1.5px at 62% 8%, rgba(255, 159, 46, 0.85) 50%, transparent 100%),
      radial-gradient(1px 1px at 84% 34%, rgba(255, 240, 214, 0.65) 50%, transparent 100%),
      radial-gradient(1px 1px at 32% 56%, rgba(255, 209, 102, 0.55) 50%, transparent 100%),
      radial-gradient(1.5px 1.5px at 74% 70%, rgba(255, 176, 80, 0.80) 50%, transparent 100%),
      radial-gradient(1px 1px at 8% 86%, rgba(255, 240, 214, 0.60) 50%, transparent 100%),
      radial-gradient(1px 1px at 48% 92%, rgba(255, 209, 102, 0.65) 50%, transparent 100%),
      radial-gradient(1px 1px at 92% 78%, rgba(255, 176, 80, 0.50) 50%, transparent 100%),
      radial-gradient(1px 1px at 40% 28%, rgba(255, 240, 214, 0.45) 50%, transparent 100%);
    --stage-size: 520px 520px;
    --stage-base:
      radial-gradient(110% 70% at 50% -12%, rgba(255, 140, 26, 0.28), transparent 62%),
      radial-gradient(70% 55% at 100% 100%, rgba(255, 209, 102, 0.16), transparent 62%),
      radial-gradient(55% 50% at 0% 82%, rgba(139, 90, 43, 0.30), transparent 62%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    --hero-gradient: linear-gradient(120deg, #fffaf0 10%, #ffd166 40%, #ff9f2e 70%, #b9702c 95%);

    /* 光源の位置です (画面の中の座標)。liquid.js が指の動きに合わせて動かします。
       ガラスの写り込みと、縁の光り方がこれで決まります。 */
    --lx: 50vw;
    --ly: -10vh;
    /* 光の強さ。押している間は少し強くします。 */
    --lp: 1;

    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;

    /* 旧名 (各ページの <style> がまだ使っています) */
    --glass-fill: var(--glass);
    --glass-fill-strong: var(--glass-strong);
    --glass-fill-soft: var(--glass-tile);
    --glass-stroke: var(--glass-line);
    --glass-stroke-soft: var(--line);
    --glass-specular: var(--glass-shine);
    --accent-3: var(--danger);
  }

  /* ---- スターライト: OS / ブラウザが「ライト」のときだけ ---- */
  @media (prefers-color-scheme: light) {
    :root {
      color-scheme: light;
      --ink: 46 30 16;
      --ink-soft-a: 0.78;
      --ink-faint-a: 0.60;

      --bg: #fdf7ec;
      --bg-2: #f2e4cf;
      --surface: #fffdf8;
      --surface-2: #f7efe1;
      --surface-3: #efe2cd;
      --line: rgba(96, 62, 26, 0.16);
      --line-strong: rgba(96, 62, 26, 0.28);
      --hover: rgba(194, 94, 8, 0.34);
      --active: rgba(194, 94, 8, 0.50);

      --accent: #c25e08;
      --accent-2: #9a4a06;
      --accent-ink: #fffaf2;
      --accent-soft: rgba(194, 94, 8, 0.13);
      --accent-glow: rgba(194, 94, 8, 0.30);
      --accent-grad: linear-gradient(135deg, #d9741a 0%, #c25e08 55%, #9a4a06 100%);
      --brown: #6b4423;
      --brown-soft: rgba(107, 68, 35, 0.16);
      --star: #8a5f05;
      --star-soft: rgba(194, 138, 18, 0.14);
      --play: #4d7c0f;
      --play-2: #3f6212;
      --play-ink: #fffaf2;
      --play-glow: rgba(77, 124, 15, 0.28);

      --ok: #4d7c0f;   --ok-soft: rgba(77, 124, 15, 0.13);
      --warn: #b45309; --warn-soft: rgba(180, 83, 9, 0.14);
      --info: #a1560a; --info-soft: rgba(161, 86, 10, 0.13);
      --danger: #c2410c; --danger-soft: rgba(194, 65, 12, 0.13);
      --tone-purple: #7c4a21; --tone-purple-soft: rgba(124, 74, 33, 0.14);
      --tone-teal: #8a5f05;   --tone-teal-soft: rgba(138, 95, 5, 0.13);
      --tone-pink: #b3541e;   --tone-pink-soft: rgba(179, 84, 30, 0.13);

      --glass: rgba(255, 253, 248, 0.58);
      --glass-strong: rgba(255, 253, 248, 0.90);
      --glass-tile: rgba(255, 255, 255, 0.55);
      --glass-line: rgba(96, 62, 26, 0.18);
      --glass-shine: rgba(255, 255, 255, 0.85);
      --glass-underline: rgba(96, 62, 26, 0.10);
      --glass-sheen: none;
      --glass-rim: none;
      --glass-spec: none;

      --scrim: rgba(46, 30, 16, 0.42);
      --shadow-panel: 0 14px 32px -22px rgba(80, 50, 20, 0.40), 0 1px 2px rgba(80, 50, 20, 0.07);
      --shadow-pop: 0 20px 44px -18px rgba(80, 50, 20, 0.38);
      --stage:
        radial-gradient(1.5px 1.5px at 12% 18%, rgba(194, 94, 8, 0.30) 50%, transparent 100%),
        radial-gradient(2px 2px at 62% 8%, rgba(180, 83, 9, 0.32) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 84% 34%, rgba(107, 68, 35, 0.26) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 32% 56%, rgba(194, 94, 8, 0.22) 50%, transparent 100%),
        radial-gradient(2px 2px at 74% 70%, rgba(180, 83, 9, 0.30) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 8% 86%, rgba(107, 68, 35, 0.24) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 48% 92%, rgba(194, 94, 8, 0.20) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 92% 78%, rgba(180, 83, 9, 0.22) 50%, transparent 100%);
      --stage-base:
        radial-gradient(110% 70% at 50% -12%, rgba(255, 176, 80, 0.30), transparent 62%),
        radial-gradient(70% 55% at 100% 100%, rgba(255, 209, 102, 0.28), transparent 62%),
        radial-gradient(55% 50% at 0% 82%, rgba(139, 90, 43, 0.18), transparent 62%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
      --hero-gradient: linear-gradient(120deg, #3a2413 10%, #c25e08 45%, #d9741a 70%, #8a5f05 95%);
    }
  }

  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; background: var(--bg); }

  body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: rgb(var(--ink) / var(--ink-strong-a));
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4, p { margin: 0; }
  img { max-width: 100%; }
  button, input, textarea, select { font-family: inherit; font-size: inherit; }
  /* ブラウザ標準の部品は出しません: 数字欄の上下ボタン、検索欄の×、日付のアイコン */
  input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
  input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
  /* 独自の入力チェック (ブラウザの「このフィールドを入力してください」は使いません) */
  .field.is-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(224, 60, 82, 0.16) !important; animation: field-shake 0.3s linear; }
  .field-hint { display: block; color: var(--danger); font-size: 0.72rem; font-weight: 700; margin-top: 0.3rem; animation: hint-in 0.28s var(--ease-snap) both; }
  @keyframes hint-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  @keyframes field-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 55% { transform: translateX(3px); } 80% { transform: translateX(-1.5px); } }
  a { color: inherit; text-decoration: none; }
  table { border-spacing: 0; }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}

@layer components {
  /* ---- Text roles ---- */
  .ink { color: rgb(var(--ink) / var(--ink-strong-a)); }
  .ink-soft { color: rgb(var(--ink) / var(--ink-soft-a)); }
  .ink-faint { color: rgb(var(--ink) / var(--ink-faint-a)); }

  /* ---- ガラス --------------------------------------------------------
     板・タイル・ボタン・入力欄・メニューまで、同じ 3 つの層でできています。
       背景 = 反射の帯 (--glass-sheen) + 半透明の面 (--glass)
       ::before = 光源の写り込み (左上のにじみ)
       ::after  = 縁の反射 (--glass-rim)。枠だけを塗るので中身は隠れません。
     後ろのぼかしは大きな面にだけかけます (数が多いと重くなるため)。 */
  .glass, .glass-strong {
    position: relative;
    background: var(--glass);
    border: 1px solid var(--glass-line);
    background-clip: padding-box;
    border-radius: var(--radius-lg);
    box-shadow:
      inset 0 1px 0 var(--glass-shine),
      inset 0 -1px 0 var(--glass-underline),
      var(--shadow-panel);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    isolation: isolate;
    contain: paint;
  }
  .glass-strong { background: var(--glass-strong); }

  /* 動く光。画面全体に 1 枚だけかぶせ、位置は transform で動かします
     (GPU の合成だけで済み、板を描き直しません)。光の下にある板ほど明るく写ります。 */
  .glass-light { display: none; }

  /* 光源の写り込みです (左上からの光が白くにじむ)。板ごとに 1 度だけ描かれる
     動かない絵なので、スクロールしても描き直しは起きません。
     動く光は、画面全体にかぶせた 1 枚の層 (.glass-light) だけが受け持ちます。 */
  .glass::before, .glass-strong::before, .popup-glass::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: var(--glass-spec);
    pointer-events: none; z-index: -1;
  }
  /* タイルは数が多いので、動かない写り込みだけにします (そのぶん軽いままです)。 */
  .glass-tile::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: var(--glass-spec);
    pointer-events: none; z-index: -1;
  }
  /* 縁の反射 (フレネル) です。ガラスは端ほど強く反射し、厚みで色が分かれます。
     上は白、下はオレンジ寄りにして、その分かれ方を真似ています。 */
  .glass::after, .glass-strong::after, .glass-tile::after,
  .popup-glass::after, .gselect-menu::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    padding: 1px;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none; z-index: 1;
  }
  .is-jelly { transition: none !important; cursor: grabbing; z-index: 5; }
  .glass-tile {
    position: relative;
    isolation: isolate;
    background: var(--glass-tile);
    border: 1px solid var(--glass-line);
    background-clip: padding-box;
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 var(--glass-shine);
    overflow: hidden;
  }
  .glass > .sheen, .glass-strong > .sheen { display: none; }

  /* ---- Inputs ---- */
  .field {
    display: block;
    width: 100%;
    appearance: none;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-line);
    background: var(--glass-sheen), var(--glass-tile);
    box-shadow: inset 0 1px 0 var(--glass-shine);
    color: rgb(var(--ink) / 0.96);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .field::placeholder { color: rgb(var(--ink) / 0.4); }
  .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
  textarea.field { resize: vertical; line-height: 1.6; }

  /* ---- Buttons ---- */
  /* hidden 属性は、.btn などの display 指定より強くします。 */
  [hidden] { display: none !important; }

  .btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    border-radius: 999px; border: 1px solid var(--line-strong);
    background: var(--glass-tile);
    background-clip: padding-box;
    color: rgb(var(--ink) / 0.94);
    box-shadow: 0 2px 10px -6px rgba(0, 0, 0, 0.5);
    font-weight: 600; padding: 0.7rem 1.4rem; cursor: pointer;
    line-height: 1.2; text-align: center; white-space: nowrap;
    min-height: 2.6rem; font-size: 0.9rem;
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease,
      transform 0.18s var(--ease-snap);
  }
  /* 触れているボタンには、指の位置に光が乗ります (ハイライト)。 */
  .btn::before { display: none; }
  .btn:active { transform: scale(0.975); }

  /* ボタンの縁も、板と同じように光ります。 */
  .btn::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    padding: 1px; background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
  .btn:hover { background: var(--active); border-color: var(--accent); color: rgb(var(--ink) / 1); }
  .btn:active { transform: scale(0.97); }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
  .btn.text-xs { min-height: 2rem; padding: 0.4rem 0.9rem; font-size: 0.75rem; }
  .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .btn-accent {
    border-color: transparent; color: var(--accent-ink);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%), var(--accent-grad);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 22px -10px var(--accent-glow);
  }
  .btn-accent:hover { filter: brightness(1.06); }
  .btn-accent::after { background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.1) 40%, rgba(120,60,10,0.25)); }

  .btn-play {
    border-color: transparent; color: var(--play-ink);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 45%),
      linear-gradient(135deg, var(--play), var(--play-2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 22px -10px var(--play-glow);
  }
  .btn-play:hover { filter: brightness(1.06); }

  .btn-ghost {
    background: transparent; border-color: transparent; box-shadow: none;
    color: rgb(var(--ink) / var(--ink-soft-a)); font-weight: 500;
    padding: 0.55rem 0.9rem;
  }
  .btn-ghost::after { display: none; }
  .btn-ghost:hover { background: var(--hover); color: rgb(var(--ink) / 1); }
  .btn-ghost.is-active::after { display: block; }

  /* ---- Images ---- */
  .mc-head, .pixelated-img {
    image-rendering: pixelated;
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--line);
  }
  .rank-img { image-rendering: pixelated; border-radius: 4px; height: 32px; width: auto; object-fit: contain; }

  /* ---- Stage (background: 星空のタイル + 上下のグラデーション) ---- */
  .stage {
    position: fixed; inset: 0; z-index: -1; overflow: hidden;
    background: var(--stage), var(--stage-base);
    background-size: var(--stage-size), auto, auto, auto;
    background-attachment: scroll;
  }
  .stage-photo, .stage-scrim, .stage-vignette, .stage-wash, .stage-liquid { display: none; }
  .on-photo { text-shadow: none; }

  /* ---- Nav ---- */
  .nav-bar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem;
    padding: 0.8rem 1.5rem; position: relative; z-index: 10;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-top: 0;
  }
  .nav-bar > * { flex-wrap: wrap; min-width: 0; }
  .theme-btn { font-size: 1rem; padding: 0.45rem 0.7rem; }

  .overflow-x-auto > table { min-width: 34rem; }
  .overflow-x-auto > table th,
  .overflow-x-auto > table td { white-space: nowrap; }

  /* ---- Animations (入るときだけ。ずっと動くものはありません) ---- */
  .rise { animation: rise 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .fade { animation: fade 0.4s ease both; }
  /* 動きの調子 (緩急): 速く動き出し、大きく行き過ぎて、ゆっくり収まります。 */
  :root {
    --ease-snap: cubic-bezier(0.2, 1.35, 0.3, 1);     /* 一気に出て、少しだけ行き過ぎる */
    --ease-spring: cubic-bezier(0.2, 1.15, 0.3, 1);   /* 行き過ぎはごくわずか */
    --ease-fall: cubic-bezier(0.55, 0, 1, 0.45);      /* 落ちる (だんだん速く) */
    --ease-land: cubic-bezier(0.1, 0.9, 0.2, 1);      /* 着地して、すっと収まる */
  }
  /* ページを開いたとき: 上のバーはするっと降り、中の物と本文は上から「どすん」と落ちて着地します。 */
  /* 上のバーは、少しだけ上から降りてきます (自分の高さの 4 割ほど)。 */
  @keyframes bar-drop { from { opacity: 0; transform: translateY(-8%); } to { opacity: 1; transform: none; } }
  .nav-bar.fade { animation: bar-drop 0.22s var(--ease-land) both; }
  /* 小さな部品 (ナビの文字・カード): 少し上 (24px) から落ちて、小さくはねて止まります。 */
  @keyframes drop-in {
    0% { opacity: 0; transform: translateY(-12px); animation-timing-function: var(--ease-fall); }
    55% { opacity: 1; transform: translateY(2px) scaleY(0.985); animation-timing-function: var(--ease-land); }
    100% { opacity: 1; transform: none; }
  }
  .drop-in { animation: drop-in 0.28s linear both; animation-delay: var(--d, 0ms); transform-origin: 50% 100%; }
  /* ベル・アイコン: さらに小さく。 */
  @keyframes drop-in-sm {
    0% { opacity: 0; transform: translateY(-7px); animation-timing-function: var(--ease-fall); }
    55% { opacity: 1; transform: translateY(1px) scaleY(0.985); animation-timing-function: var(--ease-land); }
    100% { opacity: 1; transform: none; }
  }
  .drop-in.drop-in-sm { animation-name: drop-in-sm; animation-duration: 0.22s; }
  /* 上のバーの中身とカテゴリのタブ: ほんの少し (5px) 降りるだけ */
  @keyframes drop-in-xs { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
  .drop-in.drop-in-xs { animation-name: drop-in-xs; animation-duration: 0.2s; animation-timing-function: var(--ease-land); }
  /* 画面いっぱいの大きな箱は、はねさせません。少し上からすっと収まるだけです。 */
  @keyframes drop-in-soft { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .drop-in.drop-in-soft { animation-name: drop-in-soft; animation-duration: 0.24s; animation-timing-function: var(--ease-land); }
  /* 押したものは、さっと沈んでからむにっと戻ります (タブ・ベル・アイコンなど)。 */
  @keyframes tap-bounce {
    0% { transform: scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.3); }
    28% { transform: scale(0.93); animation-timing-function: var(--ease-snap); }
    100% { transform: scale(1); }
  }
  .tap-bounce { animation: tap-bounce 0.24s linear; }
  /* 小さな吹き出し (data-tip="既読" など)。ブラウザ標準の title は使いません。 */
  [data-tip] { position: relative; }
  [data-tip]::after {
    content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px);
    transform: translate(-50%, 4px) scale(0.94); opacity: 0; pointer-events: none; white-space: nowrap;
    background: rgb(var(--ink) / 0.92); color: var(--bg); font-size: 0.68rem; font-weight: 700; line-height: 1.3;
    padding: 0.24rem 0.6rem; border-radius: 999px; z-index: 30;
    transition: opacity 0.08s ease, transform 0.18s var(--ease-snap);
  }
  [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0) scale(1); }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }

  .pulse-dot {
    width: 12px; height: 12px; border-radius: 999px;
    background: var(--accent);
    animation: pulse-dot 1.2s ease-in-out infinite;
  }
  @keyframes pulse-dot { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.05); } }

  /* ---- Popups ---- */
  .popup-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--scrim);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  }
  .popup-overlay.show { opacity: 1; pointer-events: auto; }
  .popup-glass {
    width: 100%; max-width: 440px;
    padding: 2rem;
    text-align: center;
    position: relative;
    isolation: isolate;
    background: var(--glass-sheen), var(--glass-strong);
    box-shadow: inset 0 1px 0 var(--glass-shine), var(--shadow-pop);
    transform: scale(0.95) translateY(6px); transition: transform 0.22s var(--ease-snap);
  }
  .popup-overlay.show .popup-glass { transform: none; }
  .popup-message { white-space: pre-line; overflow-wrap: anywhere; max-height: 50vh; overflow-y: auto; }
  .popup-message.text-left { text-align: left; }

  /* ---- Slide wizard ---- */
  .slide-shell { width: 100%; max-width: 30rem; padding: 2rem 2rem 1.5rem; overflow: hidden; }
  .slide-shell.is-busy { cursor: progress; }
  .slide-progress { display: flex; gap: 0.4rem; justify-content: center; margin-bottom: 1.75rem; }
  .slide-dot { width: 2rem; height: 3px; border-radius: 999px; background: var(--line-strong); transition: background 0.3s ease; }
  .slide-dot.is-done { background: rgb(var(--ink) / 0.4); }
  .slide-dot.is-active { background: var(--accent); }
  .slide-viewport { overflow: hidden; overflow: clip; transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
  .slide-track { display: flex; align-items: flex-start; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
  .slide-panel { flex: 0 0 100%; min-width: 100%; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
  .slide-panel.is-active { opacity: 1; pointer-events: auto; }
  .slide-title { font-size: 1.15rem; font-weight: 700; line-height: 1.5; color: rgb(var(--ink) / 1); margin-bottom: 0.5rem; }
  .slide-hint { font-size: 0.8rem; line-height: 1.6; color: rgb(var(--ink) / var(--ink-faint-a)); margin-bottom: 1.25rem; }
  .slide-body { margin-bottom: 0.25rem; }
  .slide-body > * + * { margin-top: 0.85rem; }
  .slide-error {
    margin-top: 0.85rem; font-size: 0.8rem; line-height: 1.6;
    color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-soft);
    border-radius: var(--radius-sm); padding: 0.6rem 0.8rem;
  }
  .slide-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
  .slide-nav .slide-back { margin-right: auto; }
  .slide-nav .slide-next { margin-left: auto; min-width: 7.5rem; }
  .slide-code {
    font-family: var(--font-mono); font-size: 2rem; letter-spacing: 0.32em; text-indent: 0.32em;
    text-align: center; padding: 1rem 0.5rem; color: rgb(var(--ink) / 1);
    user-select: all; -webkit-user-select: all;
  }
  .slide-cmd {
    font-family: var(--font-mono); font-size: 0.85rem; color: rgb(var(--ink) / 0.9);
    background: var(--glass-tile); border: 1px solid var(--glass-line);
    border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; text-align: center; overflow-wrap: anywhere;
  }
  .slide-facts { display: grid; gap: 0.5rem; }
  .slide-fact {
    display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem;
    padding: 0.55rem 0.8rem; background: var(--glass-tile); border: 1px solid var(--glass-line); border-radius: var(--radius-sm);
  }
  .slide-fact dt { color: rgb(var(--ink) / var(--ink-faint-a)); white-space: nowrap; }
  .slide-fact dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

  /* ---- Player identity card ---- */
  .player-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .player-head {
    width: 96px; height: 96px; image-rendering: pixelated; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--line-strong);
  }
  .player-head.is-lg { width: 128px; height: 128px; }
  .rank-badge { display: block; image-rendering: pixelated; height: 32px; width: auto; max-width: 100%; object-fit: contain; }
  .rank-badge-text {
    display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 0.3rem 0.75rem; border-radius: 999px; color: rgb(var(--ink) / 0.92);
    background: var(--surface-2); border: 1px solid var(--line-strong);
  }
  .player-name { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
  .player-uuid {
    font-family: var(--font-mono); font-size: 0.7rem; color: rgb(var(--ink) / var(--ink-faint-a));
    overflow-wrap: anywhere; user-select: all; -webkit-user-select: all;
  }

  /* ---- Presence ---- */
  .presence { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
  .presence-dot { width: 9px; height: 9px; border-radius: 999px; background: rgb(var(--ink) / 0.35); flex: 0 0 auto; }
  .presence.is-online { color: var(--ok); }
  .presence.is-online .presence-dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
  .presence.is-offline { color: rgb(var(--ink) / var(--ink-soft-a)); }

  /* ---- Hero / sections ---- */
  .hero-title {
    font-size: clamp(2.6rem, 7vw, 4.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05;
    background: var(--hero-gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .section-title { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 800; letter-spacing: -0.01em; text-align: center; color: rgb(var(--ink) / 1); }
  .section-sub { font-size: 0.875rem; color: rgb(var(--ink) / var(--ink-faint-a)); text-align: center; }

  .stat-tile { text-align: center; padding: 1.15rem 0.75rem; }
  .stat-value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: rgb(var(--ink) / 1); }
  .stat-label { margin-top: 0.35rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--ink) / var(--ink-faint-a)); }

  .step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 999px; font-weight: 800; font-size: 0.9rem;
    color: var(--accent-ink); background: var(--accent); flex: 0 0 auto;
  }
  .feature-icon { font-size: 1.5rem; line-height: 1; }

  /* フッターの見た目は、このファイルの下のほう (共通フッター) にまとめてあります。 */

  /* scroll reveal (liquid.js adds .is-revealed once) */
  [data-reveal] { opacity: 0; transform: translateY(-8px); transition: opacity 0.18s ease, transform 0.28s var(--ease-spring); }
  [data-reveal].is-revealed { opacity: 1; transform: none; }

  .live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; background: rgb(var(--ink) / 0.3); vertical-align: middle; margin-right: 0.45rem; }
  .live-dot.is-up { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }

  /* toggle switch */
  .switch { position: relative; display: inline-flex; width: 46px; height: 26px; cursor: pointer; flex: 0 0 auto; }
  .switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .switch-track { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background 0.2s ease; }
  .switch-thumb {
    position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px;
    background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .switch input:checked ~ .switch-track { background: var(--accent); }
  .switch input:checked ~ .switch-thumb { transform: translateX(20px); }

  .tag {
    display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    background: var(--glass-tile); border: 1px solid var(--glass-line); color: rgb(var(--ink) / 0.85);
  }
  .tag.is-on { color: var(--ok); border-color: var(--ok-soft); background: var(--ok-soft); }
  .tag.is-off { color: rgb(var(--ink) / 0.4); }

  /* ---- nav avatar ---- */
  .nav-avatar {
    width: 40px; height: 40px; padding: 3px; border-radius: 12px;
    border: 1px solid var(--line-strong); background: var(--surface-2); cursor: pointer;
    transition: border-color 0.15s ease;
  }
  .nav-avatar img { width: 100%; height: 100%; border-radius: 9px; image-rendering: pixelated; display: block; }
  .nav-avatar:hover { border-color: var(--accent); }

  /* ---- rank-coloured head frames (色はランクの印なのでそのまま) ---- */
  .player-head { border: 3px solid var(--line-strong); }
  /* ランクごとのアイコン枠。色はランクのバッジ (pictures/rank/*.png) と同じです。
     光る (--glow) のは運営チームと FAMOUS / MEDIA / ULTIMATE / PREMIUM だけで、
     DELUXE 以下は色の枠だけです (ストアの売りにしています)。 */
  .head-frame-player        { border-color: #b8b8b8; }
  .head-frame-serverbooster { border-color: #f47fff; }
  .head-frame-plus          { border-color: #93d5ff; }
  .head-frame-super         { border-color: #ff7345; }
  .head-frame-deluxe        { border-color: #ffc90e; }
  .head-frame-premium       { border-color: #ede460; --glow: rgba(237, 228, 96, 0.85); }
  .head-frame-ultimate      { border-color: #996ceb; --glow: rgba(153, 108, 235, 0.9); }
  .head-frame-media         { border-color: #e0a3cb; --glow: rgba(224, 163, 203, 0.85); }
  .head-frame-famous        { border-color: #caaaff; --glow: rgba(202, 170, 255, 0.9); }
  .head-frame-helper        { border-color: #757dd8; --glow: rgba(117, 125, 216, 0.85); }
  .head-frame-moderator     { border-color: #6bb566; --glow: rgba(107, 181, 102, 0.85); }
  .head-frame-builder       { border-color: #cccf00; --glow: rgba(204, 207, 0, 0.8); }
  .head-frame-developer     { border-color: #6ad5ac; --glow: rgba(106, 213, 172, 0.85); }
  .head-frame-admin         { border-color: #ff8e8e; --glow: rgba(255, 142, 142, 0.9); }
  .head-frame-owner         { border-color: #ff91cb; --glow: rgba(255, 145, 203, 0.95); }
  .head-frame-premium, .head-frame-ultimate, .head-frame-media, .head-frame-famous, .head-frame-helper,
  .head-frame-moderator, .head-frame-builder, .head-frame-developer, .head-frame-admin, .head-frame-owner {
    box-shadow: 0 0 14px -2px var(--glow) !important;
    animation: head-glow 2.4s ease-in-out infinite alternate;
  }
  .head-frame-owner { box-shadow: 0 0 18px 0 var(--glow), 0 0 40px -8px rgba(252, 211, 77, 0.6) !important; }
  @keyframes head-glow {
    from { box-shadow: 0 0 8px -3px var(--glow); }
    to   { box-shadow: 0 0 20px 2px var(--glow); }
  }
  @media (prefers-reduced-motion: reduce) { [class*="head-frame-"] { animation: none !important; } }

  /* ---- gallery ---- */
  .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.9rem; }
  .gallery-item {
    position: relative; border-radius: var(--radius-md); overflow: hidden;
    border: 1px solid var(--glass-line); background: var(--glass-tile); aspect-ratio: 16 / 10;
  }
  .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .gallery-item .gallery-del { position: absolute; top: 0.4rem; right: 0.4rem; opacity: 0; transition: opacity 0.2s ease; }
  .gallery-item:hover .gallery-del { opacity: 1; }

  /* ---- kebab (3-dot) menu button ---- */
  .kebab {
    border: 0; background: transparent; cursor: pointer;
    color: rgb(var(--ink) / 0.55); font-size: 1.05rem; line-height: 1;
    padding: 0.3rem 0.5rem; border-radius: 8px;
  }
  .kebab:hover { background: var(--hover); color: rgb(var(--ink) / 1); }

  /* ---- nav active link / dashboard tabs ---- */
  .btn-ghost.is-active { background: var(--accent-soft); color: rgb(var(--ink) / 1); font-weight: 700; }

  .tab-bar {
    display: flex; gap: 0.3rem; flex-wrap: wrap;
    max-width: 72rem; margin: 1.25rem auto 0; padding: 0.35rem;
    border-radius: 999px;
  }
  .tab-btn {
    border: 0; cursor: pointer; padding: 0.55rem 1.1rem; border-radius: 999px;
    background: transparent; color: rgb(var(--ink) / 0.72); font-size: 0.875rem; font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .tab-btn:hover { background: var(--hover); color: rgb(var(--ink) / 1); }
  .tab-btn.is-active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 45%), var(--accent-grad);
    color: var(--accent-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 16px -10px var(--accent-glow);
  }
  [data-tabpanel][hidden] { display: none; }
  /* タブを切り替えたとき、中身がぽんと入ってきます。 */
  [data-tabpanel].tab-enter { animation: panel-in 0.18s var(--ease-spring) both; }
  @keyframes panel-in { from { opacity: 0; transform: translateY(6px); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }

  /* 滑るピル: 今いる場所の印が、押した先まで弾んで移動します (attachSlidingPill)。 */
  .has-pill { position: relative; }
  .has-pill > * { position: relative; z-index: 1; }
  .has-pill > .slide-pill {
    position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 45%), var(--accent-grad);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 16px -10px var(--accent-glow);
    transition: transform 0.26s var(--ease-snap), width 0.26s var(--ease-snap), height 0.15s ease, opacity 0.12s ease;
    will-change: transform, width;
  }
  .has-pill > .slide-pill.slide-pill-soft { background: var(--accent-soft); box-shadow: none; border-radius: var(--radius-md); }
  .has-pill .tab-btn.is-active { background: transparent; box-shadow: none; }
  .has-pill .btn-ghost.is-active { background: transparent; }
  .has-pill .btn-ghost.is-active::after { display: none; }
  .nav-links { display: inline-flex; align-items: center; gap: 0.35rem; }

  /* 通知パネルの項目は、上から順にすっと入ってきます。 */
  .notif-pop-item { animation: item-in 0.2s var(--ease-snap) both; animation-delay: calc(var(--i, 0) * 20ms); }
  @keyframes item-in { from { opacity: 0; transform: translateX(8px) scale(0.98); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
  /* ボタンは押すとむにっと沈みます。 */
  .btn:active { transform: scale(0.97); }
  @media (prefers-reduced-motion: reduce) {
    [data-tabpanel].tab-enter, .notif-pop-item { animation: none; }
    .has-pill > .slide-pill { transition: none; }
  }

  /* ---- notice banner ---- */
  .notice-banner {
    max-width: 72rem; margin: 1rem auto 0; padding: 0.8rem 1.2rem; border-radius: var(--radius-md);
    background: var(--star-soft); border: 1px solid var(--star-soft);
    font-size: 0.875rem; color: rgb(var(--ink) / 0.95); display: flex; align-items: center; gap: 0.6rem;
  }

  /* ---- chat ---- */
  .chat-layout { display: grid; grid-template-columns: 15rem 1fr; gap: 1rem; max-width: 72rem; margin: 0 auto; height: calc(100vh - 7.5rem); min-height: 24rem; }
  .chat-sidebar { display: flex; flex-direction: column; overflow-y: auto; padding: 1rem; }
  .chat-channel {
    display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
    padding: 0.55rem 0.8rem; margin-bottom: 0.25rem; border: 0; border-radius: 10px;
    background: transparent; color: rgb(var(--ink) / 0.8); font-size: 0.875rem; cursor: pointer;
  }
  .chat-channel:hover { background: var(--hover); }
  .chat-channel.is-active { background: var(--accent-soft); color: rgb(var(--ink) / 1); font-weight: 700; }
  .chat-channel .hash { color: rgb(var(--ink) / 0.4); font-weight: 400; }
  .chat-main { display: flex; flex-direction: column; overflow: hidden; }
  .chat-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
  .chat-scroll { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; }
  .chat-msg { display: flex; gap: 0.7rem; align-items: flex-start; }
  .chat-msg .mc-head-sm { margin-top: 2px; cursor: pointer; }
  .chat-msg-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .chat-msg-name { font-weight: 700; font-size: 0.85rem; color: rgb(var(--ink) / 1); cursor: pointer; }
  .chat-msg-time { font-size: 0.65rem; color: rgb(var(--ink) / 0.4); }
  .chat-msg-body { font-size: 0.9rem; line-height: 1.65; color: rgb(var(--ink) / 0.92); white-space: pre-wrap; overflow-wrap: anywhere; }
  .chat-msg-body .mention { color: var(--accent-2); font-weight: 700; }
  .chat-msg .rank-badge { height: 12px; }
  .chat-del { opacity: 0; border: 0; background: none; color: rgb(var(--ink) / 0.4); cursor: pointer; font-size: 0.7rem; }
  .chat-msg:hover .chat-del { opacity: 1; }
  .chat-compose { display: flex; gap: 0.6rem; padding: 0.9rem 1.25rem; border-top: 1px solid var(--line); }
  .chat-compose .field { flex: 1; }
  .chat-back { display: none; }
  @media (max-width: 760px) {
    .chat-layout { grid-template-columns: 1fr; height: calc(100dvh - 5.5rem); min-height: 0; }
    .chat-layout .chat-main { display: none; }
    .chat-layout.is-conv .chat-sidebar { display: none; }
    .chat-layout.is-conv .chat-main { display: flex; }
    .chat-back { display: inline-flex; }
    .chat-head { padding: 0.75rem 0.9rem; }
    .chat-scroll { padding: 0.75rem 0.9rem; }
    .chat-compose { padding: 0.6rem 0.75rem; }
  }

  /* ---- head with rank ring + small badge under it ---- */
  .head-wrap {
    --hs: 32px; --ring: var(--line-strong);
    position: relative; display: inline-flex; flex-direction: column; align-items: center;
    width: var(--hs); flex: 0 0 auto; vertical-align: middle; cursor: pointer;
  }
  .head-wrap .head-img { width: var(--hs); height: var(--hs); border-radius: 22%; image-rendering: pixelated; display: block; border-width: 2px; border-style: solid; box-sizing: border-box; }
  :where(.head-wrap .head-img) { border-color: var(--line-strong); }
  .head-wrap .head-rank { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); height: 10px; max-width: calc(var(--hs) + 8px); object-fit: contain; image-rendering: pixelated; }
  .head-wrap[style*="--hs:64px"] .head-rank, .head-wrap[style*="--hs:72px"] .head-rank { height: 14px; bottom: -8px; }
  .head-wrap[style*="--hs:96px"] .head-rank { height: 18px; bottom: -10px; }
  .head-wrap[style*="--hs:128px"] .head-rank { height: 22px; bottom: -12px; }
  .head-wrap[style*="--hs:128px"] .head-img, .head-wrap[style*="--hs:96px"] .head-img { border-width: 3px; }
  .rank-badge, .head-rank, .gselect-option .rank-badge, .gselect-btn .rank-badge { image-rendering: pixelated; }
  .head-wrap.is-online::after { content: ""; position: absolute; right: -2px; top: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--surface); }

  /* ---- hover profile card (desktop) ---- */
  .hover-card {
    position: fixed; z-index: 60; width: max-content; min-width: 15rem; max-width: min(22rem, calc(100vw - 16px)); padding: 1rem;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem;
    overflow: visible;   /* .glass の overflow: hidden で右側 (ボタン) が切れていたので解除 */
    transform-origin: 50% 0%;
    animation: card-in 0.22s var(--ease-snap) both;
  }
  @keyframes card-in { from { opacity: 0; transform: translateY(-6px) scale(0.94); } to { opacity: 1; transform: none; } }
  .hover-actions .btn { min-height: 0; padding: 0.45rem 0.8rem; font-size: 0.75rem; white-space: nowrap; }
  /* ヘッド (アイコン) は触れると少しふくらみ、押すとむにっと沈みます */
  .head-wrap, .mc-head-sm, .nav-avatar, .team-grid a { transition: transform 0.22s var(--ease-snap); }
  .head-wrap:hover, .mc-head-sm:hover, .nav-avatar:hover, .team-grid a:hover { transform: scale(1.08); }
  .head-wrap:active, .mc-head-sm:active, .nav-avatar:active { transform: scale(0.94); }
  /* 一覧の項目・カードは、順にすっと出てきます */
  .friend-row, .notif-item, .gallery-item, .tier, .slide-fact, .dm-thread, .cp-item { animation: item-in 0.22s var(--ease-snap) both; animation-delay: calc(var(--i, 0) * 25ms); }
  .tier { transition: transform 0.25s var(--ease-snap), box-shadow 0.25s ease; }
  .tier:hover { transform: translateY(-3px); }
  .gallery-item { transition: transform 0.22s var(--ease-snap); }
  .gallery-item:hover { transform: scale(1.03); }
  .lightbox img, .lightbox video, .lightbox .vp { animation: card-in 0.24s var(--ease-snap) both; }
  @media (prefers-reduced-motion: reduce) { .hover-card, .friend-row, .notif-item, .gallery-item, .tier, .slide-fact, .dm-thread, .cp-item, .lightbox img, .lightbox video { animation: none; } }
  .hover-card .head-wrap { margin-bottom: 0.5rem; }
  .hover-name { font-weight: 800; color: rgb(var(--ink) / 1); }
  .hover-rank { font-size: 0.7rem; letter-spacing: 0.12em; color: rgb(var(--ink) / 0.6); }
  .hover-presence { font-size: 0.72rem; color: rgb(var(--ink) / 0.5); }
  .hover-presence.is-online { color: var(--ok); }
  .hover-actions { display: flex; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; justify-content: center; }

  /* ---- chat messages ---- */
  .chat-msg { position: relative; }
  .chat-msg .msg-menu { width: 1.6rem; height: 1.6rem; font-size: 0.9rem; }
  .msg-reply { font-size: 0.72rem; color: rgb(var(--ink) / 0.6); border-left: 3px solid var(--line-strong); padding: 0.15rem 0.5rem; margin-bottom: 0.25rem; overflow-wrap: anywhere; }
  .msg-reply b { color: rgb(var(--ink) / 0.85); }
  .msg-reactions { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; }
  .msg-reaction { display: inline-flex; align-items: center; gap: 0.25rem; border: 1px solid var(--line); background: var(--hover); border-radius: 999px; padding: 0.12rem 0.6rem 0.12rem 0.45rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; color: inherit; }
  .msg-reaction.is-mine { border-color: var(--accent); background: var(--accent-soft); }
  .msg-edited { font-size: 0.62rem; color: rgb(var(--ink) / 0.4); }
  .msg-attach .msg-media { width: 14rem; height: 10rem; max-width: 100%; border-radius: 0.6rem; display: block; margin-top: 0.3rem; object-fit: cover; background: var(--surface-2); cursor: zoom-in; }
  .msg-attach video.msg-media { cursor: pointer; }
  .chat-msg.is-mine > .head-wrap { display: none; }
  .compose-preview { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0 3.6rem; padding: 0.4rem 0.5rem; border-radius: 0.7rem; background: var(--hover); max-width: calc(100% - 4.5rem); }
  .compose-preview .cp-thumb { width: 4.5rem; height: 3.4rem; object-fit: cover; border-radius: 0.4rem; background: var(--surface-2); cursor: zoom-in; display: block; }
  .compose-preview .cp-name { font-size: 0.72rem; color: rgb(var(--ink) / 0.8); max-width: 12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .compose-preview .cp-close { position: absolute; top: -0.45rem; right: -0.45rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 0; background: var(--danger); color: #fff; font-size: 0.75rem; font-weight: 800; cursor: pointer; opacity: 0.9; line-height: 1; }
  .compose-preview:hover .cp-close { opacity: 1; }
  .cp-progress { position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.25rem; height: 3px; background: var(--line-strong); border-radius: 2px; overflow: hidden; }
  .cp-progress > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s ease; }
  .compose-edit { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 1.25rem 0; padding: 0.4rem 0.7rem; border-radius: 0.6rem; background: var(--accent-soft); border-left: 3px solid var(--accent); font-size: 0.75rem; color: rgb(var(--ink) / 0.85); }
  .compose-edit .ce-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(4, 7, 18, 0.88); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
  .lightbox img, .lightbox video { max-width: 100%; max-height: 100%; border-radius: 0.6rem; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
  .lightbox .lb-close { position: absolute; top: 1rem; right: 1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; background: rgba(255,255,255,0.15); color: #fff; font-size: 1.2rem; cursor: pointer; }
  .lightbox .lb-close:hover { background: rgba(255,255,255,0.3); }
  .msg-menu-panel { padding: 0.35rem; min-width: 12rem; }
  .msg-menu-panel .emoji-row { display: flex; gap: 0.15rem; padding: 0.2rem 0.3rem 0.45rem; border-bottom: 1px solid var(--line); margin-bottom: 0.3rem; }
  .msg-menu-panel .emoji-row button { border: 0; background: none; font-size: 1.15rem; cursor: pointer; padding: 0.15rem 0.3rem; border-radius: 0.4rem; }
  .msg-menu-panel .emoji-row button:hover { background: var(--hover); }
  .msg-menu-panel .gselect-option { display: flex; align-items: center; gap: 0.5rem; }
  .msg-menu-panel .gselect-option.is-danger { color: var(--danger); }
  .msg-attach .msg-file { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; padding: 0.4rem 0.7rem; border-radius: 0.6rem; background: var(--hover); font-size: 0.8rem; color: rgb(var(--ink) / 1); text-decoration: none; }
  .chat-compose { position: relative; align-items: flex-end; }
  .chat-plus { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.3rem; line-height: 1; background: var(--accent); color: var(--accent-ink); flex: 0 0 auto; }
  .compose-preview { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1.25rem 0; font-size: 0.75rem; color: rgb(var(--ink) / 0.7); }
  .compose-preview img { width: 3rem; height: 3rem; object-fit: cover; border-radius: 0.4rem; }
  .compose-reply { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1.25rem 0; font-size: 0.75rem; color: rgb(var(--ink) / 0.7); }
  .mention-box { position: absolute; bottom: 100%; left: 3.6rem; margin-bottom: 0.4rem; width: min(16rem, 80vw); z-index: 20; }
  .mention-box .gselect-option { display: flex; align-items: center; gap: 0.5rem; }
  .emoji-bar { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.4rem; width: 13rem; }
  .emoji-bar button { border: 0; background: none; font-size: 1.25rem; cursor: pointer; padding: 0.15rem 0.25rem; border-radius: 0.4rem; }
  .emoji-bar button:hover { background: var(--hover); }
  .chat-msg-body.is-editing .field { font-size: 0.85rem; }
  .group-members { display: flex; flex-wrap: wrap; gap: 0.35rem; }

  /* ---- 異議申し立て: どれを選んだか、はっきり分かるようにします ---- */
  .appeal-pick {
    position: relative;
    cursor: pointer;
    border: 1px solid var(--glass-line);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  }
  .appeal-pick:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
  .appeal-pick.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
    background: var(--accent-soft);
  }
  /* 選んだものには、右上に印を付けます (中の要素で描きます。::after は縁の枠と取り合うため)。 */
  .appeal-pick .pick-mark { display: none; }
  .appeal-pick.is-selected .pick-mark {
    display: inline-block;
    padding: 0.1rem 0.6rem; border-radius: 999px;
    background: var(--accent-grad); color: var(--accent-ink);
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.06em;
    box-shadow: 0 4px 12px -6px var(--accent-glow);
  }
  .appeal-pick:disabled, .appeal-pick.is-disabled { opacity: 0.55; cursor: not-allowed; }
  /* 下に出す「いま選んでいるもの」です。 */
  .appeal-chosen {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    margin-top: 0.9rem; padding: 0.6rem 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-line);
    background: var(--glass-sheen), var(--glass-tile);
    font-size: 0.8rem;
  }
  .appeal-chosen.is-empty { color: rgb(var(--ink) / var(--ink-faint-a)); }
  .appeal-chosen b { color: var(--accent-2); }

  /* ---- rules ---- */
  .rule-item { padding: 1rem 1.2rem; }
  .rule-title { font-weight: 700; font-size: 0.95rem; color: rgb(var(--ink) / 1); }
  .rule-body { font-size: 0.85rem; line-height: 1.7; color: rgb(var(--ink) / var(--ink-soft-a)); margin-top: 0.3rem; white-space: pre-wrap; }

  /* ---- GlassSelect: dropdown (rank options as images) ---- */
  .gselect { position: relative; display: inline-block; min-width: 11rem; }
  .gselect-btn {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 0.7rem;
    width: 100%; min-height: 2.6rem; padding: 0.5rem 0.9rem; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-line); background: var(--glass-tile); color: rgb(var(--ink) / 0.92);
    cursor: pointer; font-size: 0.9rem; transition: background 0.15s ease, border-color 0.15s ease;
    box-shadow: inset 0 1px 0 var(--glass-shine);
  }
  .gselect-btn:hover { background: var(--active); }
  .gselect-btn::after {
    content: ''; width: 0.5rem; height: 0.5rem; flex: 0 0 auto;
    border-right: 2px solid rgb(var(--ink) / 0.55); border-bottom: 2px solid rgb(var(--ink) / 0.55);
    transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease;
  }
  .gselect.is-open .gselect-btn::after { transform: rotate(-135deg) translateY(-2px); }
  .gselect-menu {
    position: fixed; z-index: 9999; padding: 0.4rem; max-height: min(60vh, 22rem); overflow-y: auto; overscroll-behavior: contain;
    border-radius: var(--radius-md);
    background: var(--glass-sheen), var(--glass-strong);
    border: 1px solid var(--glass-line); background-clip: padding-box;
    box-shadow: inset 0 1px 0 var(--glass-shine), var(--shadow-pop);
    backdrop-filter: blur(var(--glass-blur)) saturate(165%) brightness(1.03);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%) brightness(1.03);
    opacity: 0; transform: translateY(-4px) scale(0.97); transform-origin: top left; pointer-events: none;
    transition: opacity 0.08s ease, transform 0.2s var(--ease-snap);
  }
  .gselect-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .ctx-menu { transform-origin: top right; }
  .gselect-option {
    display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.55rem 0.7rem;
    border: 0; border-radius: 9px; background: transparent; color: rgb(var(--ink) / 0.9);
    cursor: pointer; font-size: 0.85rem; text-align: left;
  }
  .gselect-option:hover, .gselect-option:focus-visible { background: var(--hover); outline: none; }
  .gselect-option[aria-selected="true"] { background: var(--accent-soft); }
  .gselect-option .rank-badge { height: 14px; }

  /* ---- スマホ用の全画面ポップアップ (openSheet) と、たたんだタブ (collapseToSheet) ---- */
  .sheet-summary { display: none; }
  .sheet-overlay {
    position: fixed; inset: 0; z-index: 10000; background: rgba(8, 10, 18, calc(0.55 * var(--sheet-dim, 1)));
    opacity: 0; pointer-events: none; transition: opacity 0.18s ease;
  }
  /* 引いている最中は、指にぴったり付いてくるようにします (戻るときはまた弾みます)。 */
  .sheet-overlay.is-dragging .sheet { transition: none; }
  .sheet-handle { flex: 0 0 auto; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
  .sheet-overlay.is-dragging .sheet-handle { cursor: grabbing; }
  .sheet-overlay.show { opacity: 1; pointer-events: auto; }
  .sheet {
    position: absolute; left: 0; right: 0; bottom: 0; top: max(0.9rem, env(safe-area-inset-top));
    display: flex; flex-direction: column; border-radius: 1.4rem 1.4rem 0 0;
    padding: 0.45rem 0.75rem calc(0.8rem + env(safe-area-inset-bottom));
    background: var(--glass-sheen), var(--glass-strong);
    border: 1px solid var(--glass-line); border-bottom: 0; background-clip: padding-box;
    box-shadow: inset 0 1px 0 var(--glass-shine), var(--shadow-pop);
    backdrop-filter: blur(var(--glass-blur)) saturate(165%) brightness(1.03);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%) brightness(1.03);
    transform: translateY(100%); transition: transform 0.3s var(--ease-snap);
  }
  .sheet-overlay.show .sheet { transform: none; }
  .sheet-grip { width: 2.6rem; height: 0.3rem; flex: 0 0 auto; border-radius: 999px; background: rgb(var(--ink) / 0.22); margin: 0.2rem auto 0.5rem; }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex: 0 0 auto; padding: 0.1rem 0.35rem 0.6rem; }
  .sheet-title { font-weight: 700; font-size: 1.05rem; color: rgb(var(--ink) / 1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sheet-close {
    flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--glass-tile); color: rgb(var(--ink) / 0.85); display: inline-flex; align-items: center; justify-content: center;
  }
  .sheet-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.1rem 0.1rem 0.5rem; }
  /* 縦に並べた列の中身は縮めません (縮むと、通知の時刻が次の通知に重なります)。 */
  .sheet-list > * { flex: 0 0 auto; }
  .sheet-option, .sheet .gselect-option, .sheet .notif-pop-item {
    display: flex; align-items: center; gap: 0.7rem; width: 100%; min-height: 3.2rem; padding: 0.75rem 1rem;
    border: 0; border-radius: 1rem; background: var(--glass-tile); color: rgb(var(--ink) / 0.92);
    font-size: 1rem; text-align: left; cursor: pointer; box-shadow: inset 0 1px 0 var(--glass-shine);
    animation: sheet-row 0.22s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 18ms);
  }
  .sheet-option:active, .sheet .gselect-option:active, .sheet .notif-pop-item:active { background: var(--active); }
  .sheet-option.is-selected { background: var(--accent-soft); font-weight: 700; }
  .sheet-option.is-selected::after {
    content: ''; margin-left: auto; flex: 0 0 auto; width: 0.5rem; height: 0.9rem;
    border-right: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(45deg) translateY(-2px);
  }
  .sheet-option.is-danger, .sheet .gselect-option.is-danger { color: var(--danger); }
  .sheet-option .tab-count { margin-left: auto; }
  .sheet .notif-pop { width: auto; max-width: none; padding: 0; }
  .sheet .notif-pop-item { display: block; padding: 0.8rem 1rem 0.8rem 1.6rem; }
  .sheet .notif-pop-item.is-unread::before { left: 0.7rem; top: 1.25rem; width: 7px; height: 7px; }
  .sheet .notif-pop-title { font-size: 0.95rem; }
  .sheet .notif-pop-body { font-size: 0.82rem; white-space: normal; }
  .sheet .notif-pop-time { font-size: 0.72rem; }
  .sheet .notif-pop-footer { margin-top: 0.5rem; padding: 0.6rem 0 0; }
  .sheet .notif-pop-footer .btn { flex: 1; min-height: 2.6rem; }
  .sheet .notif-pop-empty { padding: 2rem 1rem; font-size: 0.95rem; }
  @keyframes sheet-row { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .sheet, .sheet-option, .sheet .gselect-option, .sheet .notif-pop-item { transition: none; animation: none; }
  }

  /* ---- ステータスの区切り ---- */
  .stat-group + .stat-group { margin-top: 1rem; }
  .stat-group-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; color: var(--accent-2); margin: 0 0 0.4rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--line); }

  /* ---- スクロールバー: どの OS でも出しません ---- */
  * { scrollbar-width: none; -ms-overflow-style: none; }
  *::-webkit-scrollbar { width: 0; height: 0; display: none; }
  *::-webkit-scrollbar-track, *::-webkit-scrollbar-thumb, *::-webkit-scrollbar-corner { background: transparent; }
  html::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

  /* ---- bell dropdown ---- */
  .notif-pop { width: min(92vw, 23rem); padding: 0.5rem; }
  .notif-pop-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; padding: 0.6rem 0.7rem 0.6rem 1.4rem; border-radius: 10px; position: relative; color: inherit; }
  .notif-pop-item:hover { background: var(--hover); }
  .notif-pop-item.is-unread::before { content: ''; position: absolute; left: 0.5rem; top: 1rem; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
  .notif-pop-title { font-size: 0.8rem; font-weight: 700; color: rgb(var(--ink) / 0.95); line-height: 1.4; }
  .notif-pop-body { font-size: 0.72rem; color: rgb(var(--ink) / var(--ink-faint-a)); margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .notif-pop-time { font-size: 0.65rem; color: rgb(var(--ink) / 0.4); margin-top: 0.15rem; }
  .notif-pop-footer { display: flex; gap: 0.4rem; padding: 0.4rem 0.3rem 0.2rem; border-top: 1px solid var(--line); margin-top: 0.3rem; }
  .notif-pop-empty { padding: 1.2rem; text-align: center; font-size: 0.8rem; color: rgb(var(--ink) / 0.45); }
  .gselect-btn .rank-badge { height: 14px; }

  .mc-head-sm { width: 28px; height: 28px; border-radius: 7px; image-rendering: pixelated; vertical-align: middle; box-shadow: 0 0 0 1px var(--line); flex: 0 0 auto; }
  .rank-cell .rank-badge { height: 16px; display: inline-block; vertical-align: middle; }
  .rank-cell .rank-badge-text { font-size: 0.6rem; padding: 0.2rem 0.55rem; }
  .row-id { display: inline-flex; align-items: center; gap: 0.6rem; }

  /* ---- notifications ---- */
  /* 独自アイコン (shared/icons.js) */
  .ico { width: 1.15em; height: 1.15em; vertical-align: -0.22em; display: inline-block; flex: 0 0 auto; }
  .feature-icon .ico { width: 2.2rem; height: 2.2rem; color: var(--accent); }
  .tab-btn .ico, .gselect-option .ico, .btn .ico { margin-right: 0.1em; }
  .bell-btn .ico { width: 1.35em; height: 1.35em; vertical-align: -0.3em; }
  .dm-group-icon .ico { width: 62%; height: 62%; vertical-align: 0; }
  .vid-play .ico, .vp-btn .ico, .vp-big .ico, .ac-play .ico { width: 1.2em; height: 1.2em; vertical-align: -0.25em; }
  /* オレンジの地の上 (押されたタブ・主ボタン) では、色付きだと見づらいので文字色で描きます。 */
  .tab-btn.is-active .ico, .btn-accent .ico, .is-active > .ico { --ico-a: currentColor; --ico-b: currentColor; --ico-op: .25; }
  /* 通知が増えたとき: 数字がぽんと弾み、ベルが揺れます */
  .notif-badge.is-bump { animation: badge-pop 0.42s linear; }
  /* ベルに触れると、鐘の全体がゆらゆら揺れ、中の舌はもっと大きく振れます。押したときはさらに強く鳴ります。 */
  .bell-btn .ico-bell { transform-origin: 50% 12%; }
  .bell-btn .ico-bell .clapper { transform-box: view-box; transform-origin: 12px 6px; }
  /* ホバーでは鳴らしません (押したときと、通知が増えたときだけ鳴ります)。 */
  @keyframes clapper-swing {
    0% { transform: rotate(0); animation-timing-function: ease-out; }
    12% { transform: rotate(-24deg); animation-timing-function: ease-in-out; }
    30% { transform: rotate(20deg); animation-timing-function: ease-in-out; }
    50% { transform: rotate(-12deg); animation-timing-function: ease-in-out; }
    70% { transform: rotate(5deg); animation-timing-function: ease-in-out; }
    100% { transform: rotate(0); }
  }
  .bell-btn.is-ring .ico-bell { animation: bell-ring 0.7s linear 1; }
  .bell-btn.is-ring .ico-bell .clapper { animation: clapper-swing 0.7s linear 1; }
  @keyframes badge-pop {
    0% { transform: scale(0.2); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 0.2); }
    45% { transform: scale(1.25); animation-timing-function: var(--ease-land); }
    100% { transform: scale(1); }
  }
  /* 鐘 (押したとき): 最初に大きく振れて、だんだん小さく収まります。 */
  @keyframes bell-ring {
    0% { transform: rotate(0); animation-timing-function: ease-out; }
    14% { transform: rotate(12deg); animation-timing-function: ease-in-out; }
    34% { transform: rotate(-9deg); animation-timing-function: ease-in-out; }
    54% { transform: rotate(5deg); animation-timing-function: ease-in-out; }
    74% { transform: rotate(-2deg); animation-timing-function: ease-in-out; }
    100% { transform: rotate(0); }
  }
  @media (prefers-reduced-motion: reduce) { .notif-badge.is-bump, .bell-btn.is-ring .ico-bell, .bell-btn.is-ring .ico-bell .clapper { animation: none; } }
  .bell-btn { position: relative; overflow: visible !important; }
  .notif-badge {
    position: absolute; top: -5px; right: -5px; z-index: 5;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--danger); color: #fff; font-size: 0.65rem; font-weight: 800; line-height: 18px; text-align: center;
  }
  .notif-row { position: relative; display: block; }
  .notif-row.is-unread { padding-left: 1.6rem !important; }
  .notif-row.is-unread::before { content: ''; position: absolute; left: 0.6rem; top: 50%; width: 7px; height: 7px; border-radius: 999px; transform: translateY(-50%); background: var(--accent); }
  .notif-title { font-weight: 700; font-size: 0.875rem; color: rgb(var(--ink) / 0.95); }
  .notif-body { font-size: 0.78rem; line-height: 1.6; color: rgb(var(--ink) / var(--ink-soft-a)); white-space: pre-line; margin-top: 0.2rem; }
  .notif-time { font-size: 0.68rem; color: rgb(var(--ink) / var(--ink-faint-a)); margin-top: 0.3rem; }

  /* ---- 運営チーム grid ---- */
  .team-section { width: 100%; max-width: 72rem; margin: 0 auto; }
  .team-rank-group + .team-rank-group { margin-top: 2rem; }
  .team-rank-heading { display: flex; align-items: center; gap: 0.85rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--ink) / var(--ink-faint-a)); margin-bottom: 1rem; }
  .team-rank-heading::after { content: ''; flex: 1; height: 1px; background: var(--line-strong); }
  .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem; }
  .team-card {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem;
    padding: 1.25rem 0.75rem; border-radius: var(--radius-md);
    background: var(--glass-tile); border: 1px solid var(--glass-line); color: inherit; cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .team-card:hover { background: var(--active); border-color: var(--line-strong); }
  .team-card .player-head { width: 72px; height: 72px; }
  .team-card-rank { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--ink) / var(--ink-soft-a)); }
  .team-card-name { font-size: 0.95rem; font-weight: 700; overflow-wrap: anywhere; }
  .team-card .rank-badge { height: 16px; }
  .slide-panel .rank-badge { height: 24px; }
  .team-head-wrap { position: relative; display: inline-block; }
  .team-head-wrap .presence-dot { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border: 2px solid var(--surface); }
  .team-head-wrap.is-online .presence-dot { background: var(--ok); }
  .team-empty { padding: 2rem 1rem; text-align: center; color: rgb(var(--ink) / var(--ink-faint-a)); font-size: 0.875rem; }

  @media (max-width: 640px) {
    .team-grid { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.75rem; }
    .team-card { padding: 1rem 0.5rem; }
    .team-card .player-head { width: 56px; height: 56px; }
    .slide-shell { padding: 1.5rem 1.25rem 1.25rem; }
    .slide-code { font-size: 1.5rem; letter-spacing: 0.22em; text-indent: 0.22em; }
    .slide-nav .slide-next { min-width: 6rem; }
    .slide-fact { flex-direction: column; gap: 0.15rem; }
    .slide-fact dd { text-align: left; }
  }

  @media (prefers-reduced-motion: reduce) {
    .rise, .fade, .pulse-dot, .hover-card, .drop-in, .tap-bounce, .nav-bar.fade { animation: none; }
    [data-tip]::after { transition: none; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .slide-track, .slide-viewport, .slide-panel, .popup-overlay, .popup-glass, .btn { transition: none; }
  }
}

@layer utilities {
  .block { display: block; }
  .inline-block { display: inline-block; }
  .flex { display: flex; }
  .grid { display: grid; }
  .hidden { display: none; }
  .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .flex-1 { flex: 1 1 0%; }
  .items-center { align-items: center; }
  .items-start { align-items: flex-start; }
  .justify-center { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gap-2 { gap: 0.5rem; }
  .gap-3 { gap: 0.75rem; }
  .gap-4 { gap: 1rem; }
  .mx-auto { margin-left: auto; margin-right: auto; }
  .w-full { width: 100%; }
  .h-full { height: 100%; }
  .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .relative { position: relative; }
  .max-w-sm  { max-width: 24rem; }
  .max-w-md  { max-width: 28rem; }
  .max-w-lg  { max-width: 32rem; }
  .max-w-2xl { max-width: 42rem; }
  .max-w-6xl { max-width: 72rem; }
  .min-h-\[80vh\]  { min-height: 80vh; }
  .min-h-\[100vh\] { min-height: 100vh; }
  .min-h-\[120px\] { min-height: 120px; }
  .p-3  { padding: 0.75rem; }
  .p-4  { padding: 1rem; }
  .p-6  { padding: 1.5rem; }
  .p-8  { padding: 2rem; }
  .p-10 { padding: 2.5rem; }
  .p-12 { padding: 3rem; }
  .px-2 { padding-left: 0.5rem;  padding-right: 0.5rem; }
  .px-4 { padding-left: 1rem;    padding-right: 1rem; }
  .py-1 { padding-top: 0.25rem;  padding-bottom: 0.25rem; }
  .py-2 { padding-top: 0.5rem;   padding-bottom: 0.5rem; }
  .py-3 { padding-top: 0.75rem;  padding-bottom: 0.75rem; }
  .py-4 { padding-top: 1rem;     padding-bottom: 1rem; }
  .mb-1 { margin-bottom: 0.25rem; }
  .mb-2 { margin-bottom: 0.5rem; }
  .mb-4 { margin-bottom: 1rem; }
  .mb-6 { margin-bottom: 1.5rem; }
  .mb-8 { margin-bottom: 2rem; }
  .mt-2 { margin-top: 0.5rem; }
  .mt-4 { margin-top: 1rem; }
  .mt-6 { margin-top: 1.5rem; }
  .mt-8 { margin-top: 2rem; }
  .text-xs  { font-size: 0.75rem;  line-height: 1.5; }
  .text-sm  { font-size: 0.875rem; line-height: 1.6; }
  .text-lg  { font-size: 1.125rem; line-height: 1.5; }
  .text-xl  { font-size: 1.25rem;  line-height: 1.45; }
  .text-2xl { font-size: 1.5rem;   line-height: 1.35; }
  .text-3xl { font-size: 1.875rem; line-height: 1.25; }
  .text-5xl { font-size: 3rem;     line-height: 1.1; }
  .text-left   { text-align: left; }
  .text-center { text-align: center; }
  .text-right  { text-align: right; }
  .font-medium { font-weight: 500; }
  .font-bold   { font-weight: 700; }
  .font-mono   { font-family: var(--font-mono); }
  .uppercase       { text-transform: uppercase; }
  .tracking-wider  { letter-spacing: 0.05em; }
  .tracking-widest { letter-spacing: 0.1em; }
  .leading-tight   { line-height: 1.25; }
  .select-all      { user-select: all; -webkit-user-select: all; }
  .truncate        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* colours follow the theme (旧 Tailwind 名のまま) */
  .text-white      { color: rgb(var(--ink) / 1); }
  .text-white\/50  { color: rgb(var(--ink) / 0.5); }
  .text-white\/70  { color: rgb(var(--ink) / 0.7); }
  .text-red-400    { color: var(--danger); }
  .text-green-400  { color: var(--ok); }
  .text-blue-400   { color: var(--info); }
  .text-yellow-400 { color: var(--warn); }

  .border-collapse   { border-collapse: collapse; }
  .border-b          { border-bottom-width: 1px; border-bottom-style: solid; }
  .border-white\/10  { border-color: var(--line-strong); }
  .border-white\/5   { border-color: var(--line); }
  .transition-colors { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
  .hover\:bg-white\/5:hover { background-color: var(--hover); }

  @media (max-width: 900px) {
    .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .grid-cols-2, .grid-cols-4 { grid-template-columns: minmax(0, 1fr); }
    .p-12 { padding: 1.5rem 1.1rem; }
    .p-10 { padding: 1.4rem 1rem; }
    .p-8  { padding: 1rem 0.75rem; }
    .p-6  { padding: 1rem 0.85rem; }
    .text-5xl { font-size: 2rem; }
    .text-4xl { font-size: 1.7rem; }
    .text-3xl { font-size: 1.4rem; }
    .text-xl { font-size: 1.05rem; }
    .nav-bar { padding: 0.6rem 0.75rem; gap: 0.5rem; border-radius: 0 0 1rem 1rem; }
    .nav-bar .btn { padding: 0.45rem 0.7rem; font-size: 0.8rem; }
    .nav-bar .tracking-wider { letter-spacing: 0.04em; }
    .tab-bar { margin: 0.75rem 0.5rem 0; padding: 0.3rem; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .tab-bar::-webkit-scrollbar { display: none; }
    .tab-btn { padding: 0.5rem 0.8rem; font-size: 0.8rem; white-space: nowrap; flex: 0 0 auto; }
    .popup-glass { width: calc(100vw - 1.5rem); max-width: 26rem; padding: 1.25rem; }
    .field { font-size: 16px; }
    .max-w-6xl, .max-w-2xl { max-width: 100%; }
    .min-h-\[80vh\] { min-height: 70vh; }
    .glass-tile { padding: 0.85rem; }
    .flex.gap-4 { gap: 0.75rem; }
    .slide-facts { gap: 0.4rem; }
    .kebab { width: 2.2rem; height: 2.2rem; }
    .hover-card { display: none; }
    table.w-full td, table.w-full th { padding: 0.55rem; }
    .notice-banner { margin: 0.75rem 0.5rem 0; font-size: 0.8rem; }
    .stat-tile { padding: 0.75rem; }
  }

  /* ---- スマートフォン (iPhone 17 Pro = 402px を基準) ---- */
  @media (max-width: 640px) {
    .nav-bar { flex-wrap: nowrap; padding: 0.55rem 0.6rem; }
    .nav-bar > a:first-child { flex: 0 0 auto; gap: 0.5rem; }
    .nav-right { flex: 1; min-width: 0; flex-wrap: nowrap; justify-content: flex-end; }
    .nav-links { display: flex; align-items: center; gap: 0.25rem; flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-links .btn { flex: 0 0 auto; padding: 0.4rem 0.55rem; font-size: 0.78rem; }
    .nav-bar .bell-btn, .nav-bar .theme-btn { flex: 0 0 auto; padding: 0.35rem 0.45rem; }
    .nav-avatar { flex: 0 0 auto; }
    .btn { min-height: 2.4rem; }
    .btn.text-xs { min-height: 2.1rem; }
    body { overflow-x: hidden; }
    img, video, canvas { max-width: 100%; }
    .overflow-x-auto { -webkit-overflow-scrolling: touch; }
  }
  @media (max-width: 400px) {
    .nav-bar .text-xl { display: none; }
  }
  /* たたんだタブ (collapseToSheet) のスマホ用の見た目です。utilities 層に置くのは、上の .tab-btn より後に効かせるためです。 */
  @media (max-width: 640px) {
    .is-collapsed > :not(.sheet-summary) { display: none !important; }
    .sheet-summary { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.5rem; max-width: 100%; }
    .sheet-summary-label { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sheet-caret { width: 0.42rem; height: 0.42rem; flex: 0 0 auto; margin-left: 0.1rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0.7; }
    .nav-links.is-collapsed { overflow: visible; flex: 1; min-width: 0; }
    .nav-links .sheet-summary { background: var(--accent-soft); color: rgb(var(--ink) / 1); font-weight: 700; padding: 0.45rem 0.75rem; }
    .tab-bar.is-collapsed { flex-wrap: nowrap; overflow: visible; }
    .tab-bar.is-collapsed .sheet-summary { flex: 1; justify-content: space-between; padding: 0.65rem 1rem; font-size: 0.95rem; font-weight: 700; background: var(--accent-soft); color: rgb(var(--ink) / 1); border-radius: 999px; }
  }
  /* 大きな画面ではぼかす面積が増えるので、半径を少し下げます。 */
  @media (min-width: 1100px) { :root { --glass-blur: 10px; } }
  /* 透明効果を減らす設定の人には、ぼかし無し + 不透明な板にします (一番軽い)。 */
  @media (prefers-reduced-transparency: reduce) {
    :root {
      --glass: var(--surface); --glass-strong: var(--surface); --glass-tile: var(--surface-2);
      --glass-sheen: none; --glass-spec: none;
    }
    .glass, .glass-strong, .gselect-menu {
      backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    .glass-light { display: none; }
  }
}

@layer components {
  /* ------------------------------------------------------------------
   * 全ページ共通のフッター (shared/common.js の mountFooter が作ります)
   * ---------------------------------------------------------------- */
  .site-footer {
    margin-top: 4rem;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    color: rgb(var(--ink) / var(--ink-soft-a));
    font-size: 0.82rem;
  }
  .site-footer h4 {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgb(var(--ink) / var(--ink-strong-a));
    margin: 0 0 0.6rem;
  }
  .site-footer a { color: rgb(var(--ink) / var(--ink-soft-a)); text-decoration: none; }
  .site-footer a:hover { color: var(--accent); }

  .foot-top {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 2rem;
    padding: 2.2rem clamp(1rem, 4vw, 3rem) 1.6rem;
    max-width: 78rem;
    margin: 0 auto;
  }
  .foot-legal p { margin: 0 0 0.5rem; line-height: 1.7; color: rgb(var(--ink) / var(--ink-faint-a)); }
  .foot-mc { font-style: italic; }
  .foot-ip { color: rgb(var(--ink) / var(--ink-soft-a)) !important; }
  .foot-ip b { color: var(--accent); letter-spacing: 0.03em; }

  .foot-pay-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
  .foot-pay-list span {
    border: 1px solid var(--line);
    border-radius: 0.45rem;
    padding: 0.28rem 0.55rem;
    font-size: 0.72rem;
    background: var(--surface-3);
    white-space: nowrap;
  }
  .foot-pay-note { margin: 0; font-size: 0.72rem; line-height: 1.6; color: rgb(var(--ink) / var(--ink-faint-a)); }

  .foot-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1.6rem;
    padding: 0 clamp(1rem, 4vw, 3rem) 1.8rem;
    max-width: 78rem;
    margin: 0 auto;
    border-top: 1px solid var(--line);
    padding-top: 1.6rem;
  }
  .foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }

  .foot-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 1rem clamp(1rem, 4vw, 3rem);
    max-width: 78rem;
    margin: 0 auto;
    border-top: 1px solid var(--line);
    font-size: 0.75rem;
    color: rgb(var(--ink) / var(--ink-faint-a));
  }
  .foot-brand { font-weight: 800; letter-spacing: 0.06em; color: var(--accent); }
}

@layer utilities {
  /* スマホでは 1 列に積みます。 */
  @media (max-width: 640px) {
    .foot-top { grid-template-columns: 1fr; gap: 1.4rem; padding-top: 1.8rem; }
    .foot-links { gap: 1.2rem; }
    .foot-bottom { justify-content: center; }
  }
}

@layer components {
  /* ------------------------------------------------------------------
   * カテゴリ選択のボタンの、3 本線 → × のしるし
   *   押すと上下の線が真ん中へ寄って傾き、真ん中の線が消えて × になります。
   * ---------------------------------------------------------------- */
  .sheet-burger {
    position: relative;
    display: inline-block;
    width: 0.95rem;
    height: 0.75rem;
    flex: 0 0 auto;
    margin-left: 0.45rem;
  }
  .sheet-burger i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.16s ease;
  }
  .sheet-burger i:nth-child(1) { top: 0; }
  .sheet-burger i:nth-child(2) { top: calc(50% - 1px); }
  .sheet-burger i:nth-child(3) { bottom: 0; }

  /* 動きを減らす設定の人には、形だけ変えます。 */
  @media (prefers-reduced-motion: reduce) {
    .sheet-burger i { transition: none; }
  }
}

@layer utilities {
  /* 開いているときの × の形です。
     ここは utilities 層に置きます。components に書くと、
     ほかの utilities の指定に負けて効きません。 */
  .sheet-summary.is-open .sheet-burger i:nth-child(1),
  .shop-menu.is-open .sheet-burger i:nth-child(1) {
    transform: translateY(calc(0.375rem - 1px)) rotate(45deg);
  }
  .sheet-summary.is-open .sheet-burger i:nth-child(2),
  .shop-menu.is-open .sheet-burger i:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
  .sheet-summary.is-open .sheet-burger i:nth-child(3),
  .shop-menu.is-open .sheet-burger i:nth-child(3) {
    transform: translateY(calc(-0.375rem + 1px)) rotate(-45deg);
  }
}

@layer components {
  /* ------------------------------------------------------------------
   * ストアのカテゴリの帯と、飾りの商品カード
   * ---------------------------------------------------------------- */
  .store-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--line);
  }
  .store-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: rgb(var(--ink) / var(--ink-soft-a));
    border-radius: 999px;
    padding: 0.38rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  }
  .store-cat:hover { border-color: var(--line-strong); color: rgb(var(--ink) / var(--ink-strong-a)); }
  .store-cat.is-active { border-color: var(--accent); color: var(--accent); background: var(--surface-3); }
  .store-cat-n {
    font-size: 0.68rem;
    font-weight: 600;
    opacity: 0.7;
    border-left: 1px solid var(--line);
    padding-left: 0.35rem;
  }

  .cos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.7rem;
  }
  .cos-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    background: var(--surface-2);
    padding: 0.75rem;
  }
  .cos-card.is-mine { border-color: var(--line-strong); opacity: 0.75; }
  .cos-name { font-weight: 700; font-size: 0.85rem; color: rgb(var(--ink) / var(--ink-strong-a)); }
  .cos-sec { font-size: 0.68rem; color: rgb(var(--ink) / var(--ink-faint-a)); }
  .cos-price { font-size: 0.95rem; font-weight: 800; color: var(--accent-2); margin: 0.15rem 0 0.35rem; }

  /* ランクの「ほか N つの特典」 */
  .tier-more {
    font-size: 0.72rem;
    color: rgb(var(--ink) / var(--ink-faint-a));
    margin: 0.2rem 0 0.5rem;
  }
}

@layer utilities {
  /* ------------------------------------------------------------------
   * カテゴリのまとめボタンは <b>スマホだけ</b>
   *   ボタンに付けた見た目用のクラス (.store-cat など) が
   *   components 層の「PC では隠す」に勝ってしまい、
   *   PC でも全画面ポップアップが開いていました。
   * ---------------------------------------------------------------- */
  .sheet-summary { display: none; }
  @media (max-width: 640px) {
    .sheet-summary { display: inline-flex; }
  }
}

@layer components {
  /* ------------------------------------------------------------------
   * 売り場の見出しと、右上の 3 本線ボタン
   * ---------------------------------------------------------------- */
  .shop-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
  }
  .shop-here-label { display: block; font-size: 0.68rem; color: rgb(var(--ink) / var(--ink-faint-a)); }
  .shop-here strong { font-size: 1.05rem; color: rgb(var(--ink) / var(--ink-strong-a)); }
  .shop-menu {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: rgb(var(--ink) / var(--ink-soft-a));
    border-radius: 0.6rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
  }
  .shop-menu:hover { border-color: var(--line-strong); color: rgb(var(--ink) / var(--ink-strong-a)); }

  .shop-drop {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 30;
    min-width: 11rem;
    display: grid;
    gap: 0.15rem;
    padding: 0.35rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.7rem;
    background: var(--surface-2);
    box-shadow: 0 12px 30px rgb(0 0 0 / 0.28);
  }
  .shop-drop-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    border: 0;
    background: transparent;
    color: rgb(var(--ink) / var(--ink-soft-a));
    border-radius: 0.5rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
  }
  .shop-drop-item:hover { background: var(--surface-3); color: rgb(var(--ink) / var(--ink-strong-a)); }
  .shop-drop-item.is-active { color: var(--accent); }
  .shop-drop-item span { font-size: 0.7rem; opacity: 0.65; }

  /* ------------------------------------------------------------------
   * 買い物入れ (右から出てきます。スマホでは全画面)
   * ---------------------------------------------------------------- */
  .cart-fab {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--accent);
    color: #1a130c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.3);
  }
  /* しるしは、ボタンの色の上でもはっきり見えるよう、文字色で描きます。 */
  .cart-fab .ico { width: 1.5rem; height: 1.5rem; stroke: currentColor; }
  .cart-fab .ico path[fill] { fill: currentColor; opacity: 0.25; }
  .cart-fab .ico circle[fill] { fill: currentColor; }
  .cart-badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 1.3rem;
    height: 1.3rem;
    border-radius: 999px;
    background: var(--surface);
    color: rgb(var(--ink) / 1);
    border: 1px solid var(--line-strong);
    font-size: 0.7rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
  }
  .cart-back {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgb(0 0 0 / 0.45);
  }
  .cart-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 70;
    width: min(24rem, 100vw);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border-left: 1px solid var(--line-strong);
    transform: translateX(105%);
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.05);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .cart-panel.is-open { transform: translateX(0); }
  .cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--line);
  }
  .cart-head h3 { margin: 0; font-size: 1rem; font-weight: 800; color: rgb(var(--ink) / var(--ink-strong-a)); }
  .cart-close {
    border: 0; background: transparent; cursor: pointer;
    font-size: 1.4rem; line-height: 1; color: rgb(var(--ink) / var(--ink-soft-a));
  }
  .cart-list { flex: 1; overflow-y: auto; padding: 0.8rem 1.1rem; display: grid; gap: 0.5rem; align-content: start; }
  .cart-row {
    display: flex; align-items: center; gap: 0.6rem;
    border: 1px solid var(--line); border-radius: 0.6rem;
    background: var(--surface-3); padding: 0.6rem 0.7rem;
  }
  .cart-row-main { flex: 1; min-width: 0; }
  .cart-row-name { font-size: 0.85rem; font-weight: 700; color: rgb(var(--ink) / var(--ink-strong-a)); }
  .cart-row-price { font-size: 0.78rem; color: var(--accent-2); font-weight: 700; }
  .cart-del {
    border: 0; background: transparent; cursor: pointer;
    font-size: 1.1rem; line-height: 1; color: rgb(var(--ink) / var(--ink-faint-a));
  }
  .cart-del:hover { color: var(--accent-2); }
  .cart-foot { border-top: 1px solid var(--line); padding: 0.9rem 1.1rem; display: grid; gap: 0.6rem; }
  /* クーポンは、買い物入れの中で入れてもらいます。
     入れた瞬間に合計が変わるので、どこに効いたのかが分かります。 */
  .cart-coupon { display: grid; gap: 0.35rem; }
  .cart-coupon-row { display: flex; gap: 0.4rem; }
  .cart-coupon-row .field {
    flex: 1; min-width: 0;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    line-height: normal;
    border-radius: var(--radius-sm);
  }
  .cart-coupon-row .btn { min-height: 0; padding: 0.4rem 0.8rem; white-space: nowrap; }
  .cart-coupon #couponState { display: block; line-height: 1.5; }
  .cart-sum { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.85rem; }
  .cart-sum strong { font-size: 1.15rem; color: var(--accent-2); }
  .cart-note { margin: 0; font-size: 0.7rem; line-height: 1.6; color: rgb(var(--ink) / var(--ink-faint-a)); }
}

@layer utilities {
  @media (max-width: 640px) {
    /* スマホでは、買い物入れを全画面にします。 */
    .cart-panel { width: 100vw; border-left: 0; }
  }
}

@layer components {
  /* 支払い方法のしるし (名前の左に、そのブランドの形を置きます)
     形は pictures/pay/*.svg (Simple Icons・CC0)。白黒なので色はここで付けます。 */
  .pay-chip { display: inline-flex; align-items: center; gap: 0.45rem; }
  .pay-mark {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
  }
  .pay-visa            { color: #1434cb; -webkit-mask-image: url('/pictures/pay/visa.svg');            mask-image: url('/pictures/pay/visa.svg'); }
  .pay-mastercard      { color: #eb001b; -webkit-mask-image: url('/pictures/pay/mastercard.svg');      mask-image: url('/pictures/pay/mastercard.svg'); }
  .pay-jcb             { color: #0b4ea2; -webkit-mask-image: url('/pictures/pay/jcb.svg');             mask-image: url('/pictures/pay/jcb.svg'); }
  .pay-americanexpress { color: #2e77bb; -webkit-mask-image: url('/pictures/pay/americanexpress.svg'); mask-image: url('/pictures/pay/americanexpress.svg'); }
  .pay-applepay        { color: rgb(var(--ink) / 0.9); -webkit-mask-image: url('/pictures/pay/applepay.svg'); mask-image: url('/pictures/pay/applepay.svg'); }
  .pay-googlepay       { color: #4285f4; -webkit-mask-image: url('/pictures/pay/googlepay.svg');       mask-image: url('/pictures/pay/googlepay.svg'); }
}