/* Disable double-tap zoom (iOS) without blocking scroll */
html,body{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{touch-action:manipulation}
/* >=16px prevents iOS auto-zoom on focus */
input,textarea,select{font-size:16px}


    /* =====================================================================
       Minimal Liquid Glass
       ガラスの面・屈折・ボタン・タブバー（Lift）・メニュー・入力・スイッチは
       Glisse v0.4.3 (https://github.com/0kzh/glisse) の CSS / ロジックをバニラ実装に移植したもの。

       Glisse — MIT License — Copyright (c) 2026 Kelvin Zhang
       Permission is hereby granted, free of charge, to any person obtaining a copy of this
       software and associated documentation files (the "Software"), to deal in the Software
       without restriction, including without limitation the rights to use, copy, modify, merge,
       publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons
       to whom the Software is furnished to do so, subject to the following conditions:
       The above copyright notice and this permission notice shall be included in all copies or
       substantial portions of the Software.
       THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
       INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
       PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
       FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
       OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
       DEALINGS IN THE SOFTWARE.
       ===================================================================== */
    :root {
      color-scheme: light;
      --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Hiragino Sans",
              "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;

      --surface: #f5f5f7;
      --group: #ffffff;
      --label: #1d1d1f;
      --label2: #4a4a50;
      --label3: #6b6b71;
      --sep: rgb(60 60 67 / .15);
      --field: rgb(118 118 128 / .12);

      --accent: #0088ff;
      --accent-text: #0060cc;
      --fill: #0066d6;
      --destructive: #ff383c;
      --destructive-text: #c00010;
      --destructive-fill: #d70015;
      --discord: #4752c4;
      --on: #34c759;
      --focus: rgb(0 0 0 / .45);

      /* Glisse のトークン */
      --lg-foreground: rgb(0 0 0 / .88);
      --lg-muted: #6b6b71;
      --lg-glass: rgb(255 255 255 / .6);
      --lg-glass-active: rgb(236 236 240 / .85);
      --lg-edge: rgb(0 0 0 / .08);
      --lg-drop: rgb(0 0 0 / .06);
      --lg-selection: rgb(0 0 0 / .08);
      --lg-lens: rgb(255 255 255 / .3);
      --lg-surface: rgb(250 250 252 / .86);
      --lg-surface-edge: rgb(0 0 0 / .08);
      --lg-shadow: rgb(25 25 35 / .12);
      --lg-highlight: rgb(60 60 67 / .09);
      --lg-track: rgb(120 120 128 / .32);

      --wp-tone: rgb(0 136 255 / .16);
      --wheel-a: #ffffff;
      --wheel-b: #f0f0f3;
      --wheel-c: #e7e7eb;
      --wheel-text: #1d1d1f;
      --wheel-sep: rgb(0 0 0 / .07);
      --wheel-win: #0066d6;

      --ease: cubic-bezier(.25, .1, .25, 1);
      --ease-ios: cubic-bezier(.32, .72, 0, 1);
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --nav-h: 52px;
      --tab-h: 62px;
    }

    html[data-theme="dark"] {
      color-scheme: dark;
      --surface: #000000;
      --group: #1c1c1e;
      --label: #ffffff;
      --label2: #c7c7cc;
      --label3: #98989f;
      --sep: rgb(235 235 245 / .16);
      --field: rgb(118 118 128 / .24);

      --accent: #0091ff;
      --accent-text: #5cb2ff;
      --fill: #0a6ee0;
      --destructive: #ff4245;
      --destructive-text: #ff6b6e;
      --destructive-fill: #d70015;
      --on: #30d158;
      --focus: rgb(255 255 255 / .55);

      --lg-foreground: #ffffff;
      --lg-muted: #98989f;
      --lg-glass: rgb(40 40 40 / .62);
      --lg-glass-active: rgb(70 70 70 / .62);
      --lg-edge: rgb(255 255 255 / .08);
      --lg-drop: transparent;
      --lg-selection: rgb(255 255 255 / .12);
      --lg-lens: rgb(255 255 255 / .055);
      --lg-surface: rgb(28 28 31 / .86);
      --lg-surface-edge: rgb(255 255 255 / .13);
      --lg-shadow: rgb(0 0 0 / .38);
      --lg-highlight: rgb(235 235 245 / .13);
      --lg-track: rgb(120 120 128 / .4);

      --wp-tone: rgb(0 120 255 / .2);
      --wheel-a: #2c2c2e;
      --wheel-b: #232325;
      --wheel-c: #1b1b1d;
      --wheel-text: #ffffff;
      --wheel-sep: rgb(255 255 255 / .06);
      --wheel-win: #0a6ee0;
    }

    * { box-sizing: border-box; }
    html { height: 100%; background: var(--surface); -webkit-text-size-adjust: 100%; }

    body {
      height: 100%;
      margin: 0;
      overflow: hidden;
      font-family: var(--font);
      color: var(--label);
      background: var(--surface);
      -webkit-font-smoothing: antialiased;
      overscroll-behavior: none;
    }

    button, select, input, textarea { font: inherit; color: inherit; }
    button { -webkit-tap-highlight-color: transparent; }
    :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

    .sr-only {
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }

    /* Material Symbols Rounded（使用アイコンのみのサブセット、自前ホスト） */
    @font-face {
      font-family: "Material Symbols Rounded";
      font-style: normal; font-weight: 200 500; font-display: block;
      src: url("/fonts/material-symbols-rounded-subset.woff2") format("woff2");
    }

    .material-symbols-rounded {
      font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal;
      letter-spacing: normal; text-transform: none; word-wrap: normal; direction: ltr;
      -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
      -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
      width: 1em; height: 1em; flex: none; display: inline-block; overflow: hidden;
      white-space: nowrap; font-size: 20px; line-height: 1; user-select: none;
      font-variation-settings: "FILL" 0, "wght" 300;
    }

    .is-filled { font-variation-settings: "FILL" 1, "wght" 400; }

    /* ---------- 壁紙：ニュートラル＋控えめな色のぼかし1つ（静止） ---------- */

    .lg-wallpaper { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--surface); pointer-events: none; }

    .lg-blob {
      position: absolute; left: 50%; bottom: -34vh; width: max(130vw, 900px); height: 80vh;
      transform: translateX(-50%); border-radius: 50%;
      background: radial-gradient(closest-side, var(--wp-tone), transparent);
    }

    /* ---------- Shell ---------- */

    .app-shell {
      position: fixed; z-index: 1; top: 0; bottom: 0; left: 50%;
      width: min(100%, 430px); overflow: hidden; transform: translateX(-50%);
      transition: transform .5s var(--ease-ios), border-radius .45s var(--ease-ios);
    }

    html.is-sheet-open .app-shell {
      transform: translateX(-50%) scale(.94) translateY(calc(var(--safe-top) + 6px));
      border-radius: 32px;
    }

    /* ---------- Glass（Glisse .lg-glass） ---------- */

    .lg-glass {
      position: relative;
      background-color: var(--lg-glass);
      background-image: var(--lg-rim, none);
      background-size: 100% 100%;
      -webkit-backdrop-filter: blur(var(--lg-blur, 3px)) var(--lg-filter, saturate(1.5));
      backdrop-filter: blur(var(--lg-blur, 3px)) var(--lg-filter, saturate(1.5));
      box-shadow: inset 0 0 0 .5px var(--lg-edge), 0 1px 3px var(--lg-drop);
    }

    /* ---------- Navigation bar ---------- */

    .navbar {
      --p: 0;
      position: absolute; z-index: 20; top: 0; left: 0; right: 0;
      height: calc(var(--nav-h) + var(--safe-top));
      padding: var(--safe-top) 16px 0 20px;
    }

    .navbar-bg {
      position: absolute; inset: 0; opacity: var(--p);
      background: rgb(from var(--surface) r g b / .78);
      -webkit-backdrop-filter: blur(20px) saturate(1.8);
      backdrop-filter: blur(20px) saturate(1.8);
      box-shadow: 0 .5px 0 var(--sep);
      pointer-events: none;
    }

    .navbar:not(.is-scrolled) .navbar-bg { visibility: hidden; }

    .navbar-row { position: relative; height: var(--nav-h); display: flex; align-items: center; justify-content: flex-end; }

    .navbar-title {
      position: absolute; left: 0; right: 0; margin: 0; text-align: center;
      font-size: 17px; font-weight: 600; opacity: var(--p); pointer-events: none;
    }

    .navbar-actions { position: relative; display: flex; gap: 10px; }

    /* ---------- Button（Glisse .lg-button） ---------- */

    .lg-btn, .lg-icon-btn {
      position: relative;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px;
      color: var(--lg-foreground);
      font-size: 15px; font-weight: 500; text-decoration: none;
      cursor: pointer; touch-action: manipulation;
      -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
      transition: background-color .2s ease, opacity .2s;
    }

    .lg-icon-btn { width: 44px; padding: 0; border-radius: 50%; }
    .lg-icon-btn .material-symbols-rounded { font-size: 22px; }

    .lg-btn:is(:active, [data-pressed]), .lg-icon-btn:is(:active, [data-pressed]) { background-color: var(--lg-glass-active); transition-duration: 0s; }

    @media (hover: hover) and (pointer: fine) {
      .lg-btn:hover:not(:disabled), .lg-icon-btn:hover:not(:disabled) { background-color: var(--lg-glass-active); }
    }

    .lg-btn:disabled, .lg-icon-btn:disabled { opacity: .35; cursor: default; }

    /* Tinted: ラベルだけアクセント色 */
    .lg-btn--tinted { color: var(--accent-text); }

    /* Filled / Tinted filled: アクセント色（または指定色）で塗る */
    .lg-btn--filled { --btn-fill: var(--fill); color: #fff; }
    .lg-btn--discord { --btn-fill: var(--discord); }
    .lg-btn--filled, .lg-btn--filled:disabled { background-color: var(--btn-fill); }
    .lg-btn--filled:is(:active, [data-pressed]) { background-color: color-mix(in srgb, var(--btn-fill) 85%, #000); }

    @media (hover: hover) and (pointer: fine) {
      .lg-btn--filled:hover:not(:disabled) { background-color: color-mix(in srgb, var(--btn-fill) 90%, #fff); }
    }

    /* Destructive / Destructive filled */
    .lg-btn--danger { color: var(--destructive-text); }
    .lg-btn--danger-filled { --btn-fill: var(--destructive-fill); }

    .lg-btn--block { width: 100%; }
    .lg-btn--large { min-height: 52px; border-radius: 26px; font-size: 17px; font-weight: 600; }

    .spinner {
      width: 20px; height: 20px; border: 2px solid rgb(255 255 255 / .35);
      border-top-color: #fff; border-radius: 50%; animation: spin 800ms linear infinite;
    }
    .spinner[hidden] { display: none; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ---------- Screens ---------- */

    .screen {
      position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto;
      overscroll-behavior: contain; scrollbar-width: none;
      padding: calc(var(--nav-h) + var(--safe-top)) 20px calc(var(--tab-h) + var(--safe-bottom) + 40px);
    }
    .screen::-webkit-scrollbar { display: none; }
    html.is-scroll-locked, html.is-scroll-locked .screen { overflow: hidden; }

    .panel { animation: fade-in .35s var(--ease); }
    .panel[hidden] { display: none; }

    .large-title { margin: 4px 0 20px; font-size: 34px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }

    .section-label { margin: 0 4px 8px; color: var(--label2); font-size: 13px; font-weight: 500; }

    /* 単色のグループ（ガラスにしない） */
    .group { background: var(--group); border-radius: 22px; }

    /* ---------- 条件（1行1項目のリスト。長いラベルでも切れにくい） ---------- */

    .filter-group { padding: 0 0 0 16px; }

    .filter-group .field {
      min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding-right: 6px; border-top: .5px solid var(--sep);
    }

    .filter-group .field:first-child { border-top: 0; }
    .filter-group .field-label { margin: 0; flex: none; font-size: 16px; color: var(--label); }
    .filter-group .select-wrap { min-width: 0; flex: 1; display: flex; justify-content: flex-end; }

    .filter-group select {
      max-width: 100%; min-height: 44px; padding: 0 30px 0 8px; border: 0;
      appearance: none; -webkit-appearance: none; background: transparent;
      color: var(--label2); font-size: 16px; text-align: right; text-align-last: right;
      text-overflow: ellipsis; cursor: pointer;
    }

    .select-wrap { position: relative; }
    .select-wrap::after {
      content: ""; position: absolute; top: 50%; right: 8px; width: 18px; height: 18px; margin-top: -9px;
      background-color: var(--label3); pointer-events: none;
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9.5l5-5 5 5M7 14.5l5 5 5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9.5l5-5 5 5M7 14.5l5 5 5-5'/%3E%3C/svg%3E");
      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
      -webkit-mask-position: center; mask-position: center;
      -webkit-mask-size: 18px 18px; mask-size: 18px 18px;
    }

    .select-wrap select:disabled { opacity: .4; cursor: default; }
    .select-wrap option { color: #1d1d1f; background: #fff; }

    .filter-actions { margin: 12px 0 0; display: flex; align-items: center; gap: 10px; }

    .candidate-count { flex: 1; margin-left: 4px; color: var(--label2); font-size: 15px; font-variant-numeric: tabular-nums; }
    .candidate-count .material-symbols-rounded { display: none; }

    /* ---------- Wheel（モノトーン＋当選だけアクセント） ---------- */

    .wheel-stage { position: relative; width: min(100%, 330px); aspect-ratio: 1; margin: 24px auto 20px; display: grid; place-items: center; }

    .wheel-shell {
      position: absolute; inset: 7.5%; border-radius: 50%;
      box-shadow: 0 0 0 .5px var(--lg-edge), 0 18px 40px var(--lg-shadow);
    }

    #wheelCanvas { position: relative; z-index: 2; width: 100%; height: 100%; display: block; }

    .wheel-hub {
      position: absolute; z-index: 5; width: 12%; aspect-ratio: 1; border-radius: 50%;
      background: var(--group); box-shadow: 0 0 0 .5px var(--lg-edge), 0 2px 8px var(--lg-shadow);
      pointer-events: none;
    }

    /* シンプルなガラスのポインター（下向きのしずく） */
    .wheel-pointer {
      position: absolute; z-index: 6; top: 3%; left: 50%; width: 26px; height: 26px; margin-left: -13px;
      border-radius: 50% 50% 0 50%; transform: rotate(45deg);
      background: rgb(255 255 255 / .72);
      -webkit-backdrop-filter: blur(6px) saturate(1.6); backdrop-filter: blur(6px) saturate(1.6);
      box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .12), inset 1px 1px 1px rgb(255 255 255 / .9), 0 3px 10px rgb(0 0 0 / .18);
      pointer-events: none;
    }

    html[data-theme="dark"] .wheel-pointer {
      background: rgb(255 255 255 / .85);
      box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .4), 0 3px 12px rgb(0 0 0 / .5);
    }

    .wheel-state {
      position: absolute; z-index: 12; inset: 9%; border-radius: 50%; display: grid; place-items: center;
      padding: 24px; text-align: center; color: var(--label2); background: var(--group);
    }

    .wheel-state[hidden] { display: none; }
    .state-content { display: grid; place-items: center; gap: 8px; }
    .state-content .material-symbols-rounded { font-size: 32px; }
    .state-content .state-error-icon { color: var(--destructive-text); }
    .state-content .spinner { width: 28px; height: 28px; border-color: var(--sep); border-top-color: var(--label2); }
    .state-title { margin: 0; color: var(--label); font-size: 16px; font-weight: 600; }
    .state-caption { margin: 0; max-width: 220px; font-size: 13px; line-height: 1.6; }

    #loadingState .state-title::after {
      content: ''; display: inline-block; width: 1.6em; text-align: left;
      animation: loadingDots 1.2s steps(4, end) infinite;
    }

    @keyframes loadingDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75%, 100% { content: '...'; } }

    #spinBtn { width: 100%; }
    #spinBtn .material-symbols-rounded { display: none; }
    #spinBtn.is-spinning { opacity: 1; }

    /* ---------- Result ---------- */

    .result-card {
      margin-top: 20px; padding: 22px 22px 18px; border-radius: 28px;
      --lg-glass: var(--lg-surface);
      animation: rise .45s var(--ease-ios);
    }

    .result-card[hidden] { display: none; }

    @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

    .result-kicker { margin: 0 0 4px; color: var(--label2); font-size: 13px; font-weight: 500; }
    .result-name { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -.005em; overflow-wrap: anywhere; }

    .result-meta { margin-top: 6px; display: flex; flex-wrap: wrap; color: var(--label2); font-size: 15px; }
    .meta-chip { display: inline-flex; align-items: center; }
    .meta-chip .material-symbols-rounded { display: none; }
    .meta-chip + .meta-chip::before { content: "・"; margin: 0 4px; color: var(--label3); }

    .result-location {
      margin-top: 18px; padding-top: 14px; border-top: .5px solid var(--sep);
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }

    .result-location[hidden] { display: none; }

    .result-address { min-width: 0; color: var(--label2); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
    .result-address .material-symbols-rounded { display: none; }
    .map-link { flex: none; }

    #sendDiscordBtn { width: 100%; margin-top: 12px; }
    #sendDiscordBtn[hidden] { display: none; }

    /* ---------- 除外設定 ---------- */

    .settings-card { padding: 18px 16px 16px; }
    .settings-section + .settings-section { margin-top: 22px; }
    .settings-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .settings-section-title { margin: 0 0 0 2px; font-size: 15px; font-weight: 600; }

    .clear-link {
      min-height: 44px; min-width: 52px; margin-right: -8px; padding: 0 10px; border: 0; border-radius: 22px;
      color: var(--accent-text); background: transparent; font-size: 15px; cursor: pointer;
    }

    .clear-link:active { background: var(--lg-highlight); }

    /* Input（Glisse .lg-input, type=search） */
    .lg-input {
      display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-bottom: 12px;
      padding: 0 14px; border-radius: 22px; color: var(--lg-foreground); background: var(--field);
      transition: background-color .2s ease;
    }

    .lg-input:focus-within { background-color: var(--lg-glass-active); box-shadow: inset 0 0 0 .5px var(--lg-edge); }
    .lg-input .material-symbols-rounded { font-size: 18px; color: var(--lg-muted); }

    .lg-input input {
      flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; outline: 0;
      background: none; font-size: 16px;
    }

    .lg-input input::placeholder { color: var(--lg-muted); }
    .lg-input input::-webkit-search-cancel-button { display: none; }
    .lg-input:has(input:disabled) { opacity: .35; }

    .chips { display: flex; flex-wrap: wrap; gap: 8px; max-height: 260px; overflow: auto; padding: 2px; scrollbar-width: thin; }
    .chips-empty { padding: 8px 2px; color: var(--label2); font-size: 14px; list-style: none; }

    .chip {
      position: relative; max-width: 100%; min-height: 40px; padding: 0 14px; border-radius: 20px;
      display: inline-flex; align-items: center; gap: 4px; color: var(--label); background: var(--field);
      font-size: 15px; cursor: pointer; user-select: none; transition: background-color .2s, color .2s;
    }

    .chip::after { content: ""; position: absolute; inset: -2px; }
    .chip:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
    .chip:not(:has(input:focus-visible)):focus-within { outline: none; }
    .chip input { position: absolute; opacity: 0; pointer-events: none; }
    .chip .chip-check { display: none; font-size: 16px; }
    .chip.is-checked { color: #fff; background: var(--fill); }
    .chip.is-checked .chip-check { display: inline-block; }

    .settings-footer { margin-top: 20px; }
    .settings-card[inert] { opacity: .5; pointer-events: none; }

    .appearance { margin-top: 16px; padding: 0 16px; }

    .check-row { min-height: 52px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
    .row-label { flex: 1; min-width: 0; font-size: 16px; }

    /* Switch（Glisse .lg-switch の寸法・色に合わせたチェックボックス） */
    .lg-switch {
      appearance: none; -webkit-appearance: none; position: relative; flex: none;
      width: 60px; height: 26px; margin: 0; border: 0; border-radius: 999px;
      background: var(--lg-track); cursor: pointer; transition: background-color .25s var(--ease);
    }

    .lg-switch::after {
      content: ""; position: absolute; top: 2px; left: 2px; width: 36px; height: 22px; border-radius: 999px;
      background: #fff;
      box-shadow: 0 2px 8px rgb(0 0 0 / .18), inset 0 0 0 .5px rgb(0 0 0 / .04);
      transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), background-color .15s, scale .3s cubic-bezier(.3, 1.4, .5, 1);
    }

    .lg-switch:checked { background: var(--on); }
    .lg-switch:checked::after { transform: translateX(20px); }

    /* 押している間は親指がガラスになって膨らむ（Glisse の thumb face） */
    .lg-switch:active::after {
      scale: 1.3;
      background: rgb(255 255 255 / .35);
      box-shadow: 0 6px 24px rgb(0 0 0 / .2), inset 0 0 0 1.5px rgb(255 255 255 / .5), inset 0 2px 1px rgb(255 255 255 / .45);
    }

    .lg-switch:disabled { opacity: .35; cursor: default; }

    /* ---------- お店 ---------- */

    .shops-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .shops-head .count { margin: 0 0 0 4px; color: var(--label2); font-size: 15px; }

    .shop-list { margin: 0; padding: 0 0 0 16px; list-style: none; }
    .shop-row { padding: 12px 16px 12px 0; display: flex; align-items: center; gap: 12px; border-top: .5px solid var(--sep); content-visibility: auto; contain-intrinsic-size: auto 62px; }
    .shop-row:first-child { border-top: 0; }
    .shop-dot { display: none; }
    .shop-row-text { min-width: 0; flex: 1; }
    .shop-row-name { margin: 0; font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
    .shop-row-sub { margin: 2px 0 0; color: var(--label2); font-size: 13px; overflow-wrap: anywhere; }
    .shop-row[hidden] { display: none; }

    /* ---------- Tab bar（Glisse .lg-tab-bar + Lift） ---------- */

    .tabbar {
      --lg-blur: 3px;
      position: absolute; z-index: 20; left: 16px; right: 16px; bottom: calc(12px + var(--safe-bottom));
      height: var(--tab-h); padding: 4px; border-radius: 31px;
      display: grid; grid-template-columns: repeat(3, 1fr);
      box-shadow: inset 0 0 0 .5px var(--lg-edge), 0 8px 30px var(--lg-shadow);
      touch-action: pan-y; user-select: none; -webkit-user-select: none;
    }

    .tab-lens {
      position: absolute; z-index: 2; top: 4px; left: 4px; height: calc(100% - 8px); width: calc((100% - 8px) / 3);
      border-radius: 27px; pointer-events: none; will-change: transform;
      background-color: transparent; background-image: none; box-shadow: none;
      -webkit-backdrop-filter: none; backdrop-filter: none;
      transition: background-color .14s ease;
    }

    .tab-lens::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--lg-selection);
      transition: opacity .14s ease;
    }

    .tabbar[data-lifted] .tab-lens { background-color: var(--lg-lens); transition-duration: .1s; }
    .tabbar[data-lifted] .tab-lens::before { opacity: 0; transition-duration: .1s; }

    .tabbar[data-refracting] .tab-lens {
      background-image: var(--lg-rim, none);
      -webkit-backdrop-filter: var(--lg-filter, none);
      backdrop-filter: var(--lg-filter, none);
      box-shadow: inset 0 0 0 .5px var(--lg-edge), 0 4px 16px var(--lg-shadow);
    }

    .tab {
      position: relative; z-index: 1; min-height: 44px; padding: 0; border: 0; border-radius: 27px;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
      color: var(--lg-muted); background: none; font-size: 11px; font-weight: 500;
      cursor: pointer; -webkit-touch-callout: none; transition: color .2s ease;
    }

    .tab .material-symbols-rounded { font-size: 24px; }
    .tab.is-selected { color: var(--accent-text); }
    .tab:focus-visible { outline-offset: -2px; }

    @media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--lg-foreground); } .tab.is-selected:hover { color: var(--accent-text); } }

    .tab-badge {
      position: absolute; top: 5px; left: calc(50% + 7px); min-width: 18px; height: 18px; padding: 0 5px;
      border-radius: 9px; display: none; place-items: center; color: #fff; background: var(--destructive-fill);
      font-size: 11px; font-weight: 600; line-height: 1;
    }

    .tab-badge.show { display: grid; }

    /* ---------- Menu（Glisse .lg-menu-card） ---------- */

    .lg-menu {
      position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: 240px; padding: 6px;
      border-radius: 20px; color: var(--lg-foreground); font-size: 15px;
      --lg-glass: var(--lg-surface); --lg-blur: 22px; --lg-filter-fallback: saturate(1.9);
      box-shadow: inset 0 0 0 .5px var(--lg-surface-edge), 0 12px 40px var(--lg-shadow);
      transform-origin: calc(100% - 22px) 0;
      animation: menu-in .32s cubic-bezier(.3, 1.3, .5, 1);
    }

    .lg-menu[hidden] { display: none; }
    @keyframes menu-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

    .lg-menu-item {
      position: relative; width: 100%; min-height: 44px; padding: 6px 12px; border: 0; border-radius: 14px;
      display: flex; align-items: center; gap: 10px; color: inherit; background: transparent;
      font-size: 15px; text-align: left; cursor: pointer;
    }

    .lg-menu-item .material-symbols-rounded { font-size: 18px; }
    .lg-menu-item:focus-visible { outline-offset: -2px; background: var(--lg-highlight); }
    @media (hover: hover) and (pointer: fine) { .lg-menu-item:hover:not(:disabled) { background: var(--lg-highlight); } }
    .lg-menu-item--danger { color: var(--destructive-text); }
    .lg-menu-item:disabled { opacity: .38; cursor: default; }
    .lg-menu-sep { margin: 7px 11px; border-top: .5px solid var(--sep); }

    /* ---------- Sheet ---------- */

    .modal { position: fixed; z-index: 90; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
    .modal[hidden] { display: none; }
    .modal-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .22); animation: fade-in .35s ease-out; }
    html[data-theme="dark"] .modal-backdrop { background: rgb(0 0 0 / .5); }

    .sheet {
      --lg-glass: var(--lg-surface); --lg-blur: 22px;
      position: relative; width: calc(100% - 16px); max-width: 520px;
      max-height: calc(100% - var(--safe-top) - 44px); margin-bottom: max(8px, var(--safe-bottom));
      display: flex; flex-direction: column; overflow: hidden; border-radius: 34px; color: var(--label);
      box-shadow: inset 0 0 0 .5px var(--lg-surface-edge), 0 12px 40px var(--lg-shadow);
      animation: sheet-in .5s var(--ease-ios);
    }

    .sheet:focus { outline: none; }
    .modal.is-closing { pointer-events: none; }
    .modal.is-closing .modal-backdrop { animation: fade-out .28s ease-in forwards; }
    .modal.is-closing .sheet { animation: sheet-out .28s cubic-bezier(.4, 0, 1, 1) forwards; }

    @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes fade-out { to { opacity: 0; } }
    @keyframes sheet-in { from { transform: translateY(105%); } to { transform: none; } }
    @keyframes sheet-out { to { transform: translateY(105%); } }

    .sheet-handle { width: 36px; height: 5px; margin: 8px auto 0; flex: none; border-radius: 3px; background: var(--lg-track); }

    .sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px 4px 24px; }
    .sheet-title { margin: 0; font-size: 22px; font-weight: 700; }
    .sheet-desc { margin: 2px 24px 4px; color: var(--label2); font-size: 13px; line-height: 1.5; }

    .sheet-form { min-height: 0; flex: 1; display: flex; flex-direction: column; }

    .sheet-body {
      min-height: 0; display: grid; gap: 16px; padding: 12px 24px 18px;
      overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    }

    .sheet-body::-webkit-scrollbar { display: none; }

    .sheet-footer { display: flex; gap: 10px; padding: 12px 20px 18px; border-top: .5px solid var(--sep); }
    .sheet-footer .lg-btn { min-height: 50px; border-radius: 25px; }
    .sheet-footer .lg-btn--filled { flex: 1; }

    .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

    .field { min-width: 0; }
    .sheet .field-label { display: block; margin: 0 0 6px 4px; color: var(--label2); font-size: 13px; font-weight: 500; }

    .required-badge { margin-left: 6px; color: var(--accent-text); font-size: 12px; font-weight: 600; }
    .optional-text { margin-left: 6px; color: var(--label3); font-size: 12px; font-weight: 400; }

    .text-input, .text-area, .sheet .select-wrap select {
      width: 100%; border: 0; border-radius: 14px; background: var(--field); font-size: 16px; color: var(--label);
    }

    .text-input, .sheet .select-wrap select { min-height: 48px; padding: 0 14px; }
    .sheet .select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 36px; }
    .text-input.is-sub { margin-top: 8px; }
    .text-input[hidden] { display: none; }
    .text-area { min-height: 96px; padding: 12px 14px; line-height: 1.6; resize: vertical; }

    .text-input::placeholder, .text-area::placeholder { color: var(--label3); }
    .text-input:focus, .text-area:focus, .sheet .select-wrap select:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
    .text-input:disabled, .text-area:disabled { opacity: .4; }

    .text-input[aria-invalid="true"], .text-area[aria-invalid="true"], .select-wrap select[aria-invalid="true"] {
      box-shadow: inset 0 0 0 1.5px var(--destructive);
    }

    .field-error { margin: 6px 4px 0; display: flex; gap: 4px; color: var(--destructive-text); font-size: 13px; line-height: 1.5; }
    .field-error[hidden] { display: none; }
    .field-error .material-symbols-rounded { display: none; }
    .field-meta { margin: 4px 4px 0; color: var(--label3); font-size: 12px; text-align: right; }

    .form-banner {
      margin: 0; padding: 12px 14px; border-radius: 14px; display: flex; gap: 8px;
      color: var(--destructive-text); background: rgb(255 56 60 / .1); font-size: 14px; line-height: 1.5;
    }

    .form-banner[hidden] { display: none; }
    .form-banner .material-symbols-rounded { display: none; }

    /* ---------- Toast ---------- */

    .snackbar {
      --lg-glass: var(--lg-surface); --lg-blur: 22px;
      position: fixed; z-index: 100; left: 50%; top: calc(var(--nav-h) + var(--safe-top) + 12px);
      width: max-content; max-width: min(calc(100% - 40px), 380px); min-height: 44px;
      padding: 11px 18px; border-radius: 22px; display: flex; align-items: center; gap: 8px;
      color: var(--label);
      box-shadow: inset 0 0 0 .5px var(--lg-surface-edge), 0 12px 40px var(--lg-shadow);
      opacity: 0; pointer-events: none; transform: translate(-50%, -12px) scale(.96);
      transition: opacity .25s ease, transform .45s cubic-bezier(.3, 1.3, .5, 1);
    }

    .snackbar.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
    .snackbar .material-symbols-rounded { font-size: 18px; color: var(--label2); }
    .snackbar.error { color: #fff; --lg-glass: var(--destructive-fill); }
    .snackbar.error .material-symbols-rounded { color: #fff; }
    html.is-scroll-locked .snackbar { top: calc(14px + var(--safe-top)); }
    .snackbar-text { min-width: 0; font-size: 14px; line-height: 1.45; }

    /* ---------- フォールバック ---------- */

    html.no-bdf {
      --lg-glass: rgb(255 255 255 / .96);
      --lg-surface: rgb(250 250 252 / .98);
      --lg-lens: rgb(0 0 0 / .06);
    }

    html.no-bdf[data-theme="dark"] {
      --lg-glass: rgb(44 44 46 / .97);
      --lg-surface: rgb(28 28 31 / .98);
      --lg-lens: rgb(255 255 255 / .1);
    }

    html.no-bdf .navbar-bg { background: var(--surface); }

    @media (prefers-reduced-transparency: reduce) {
      html { --lg-glass: rgb(255 255 255 / .96); --lg-surface: rgb(250 250 252 / .98); }
      html[data-theme="dark"] { --lg-glass: rgb(44 44 46 / .97); --lg-surface: rgb(28 28 31 / .98); }
    }

    /* ---------- Responsive ---------- */

    @media (max-width: 420px) { .form-row { grid-template-columns: 1fr; } }
    @media (max-width: 360px) { .screen { padding-left: 14px; padding-right: 14px; } .large-title { font-size: 30px; } }

    @media (min-width: 640px) {
      .modal { align-items: center; }
      .sheet { margin-bottom: 0; max-height: calc(100% - 48px); animation-name: sheet-pop; }
      .modal.is-closing .sheet { animation-name: sheet-pop-out; }
      .sheet-handle { display: none; }
    }

    @media (min-width: 900px) and (min-height: 620px) {
      .app-shell { width: min(calc(100% - 64px), 920px); }
      .screen { padding-left: 32px; padding-right: 32px; }

      #panel-roulette:not([hidden]) {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "title title" "summary wheel" "spin wheel" "result wheel" "discord wheel" ". wheel";
        grid-template-rows: auto auto auto auto auto 1fr; column-gap: 40px; align-items: start;
      }

      #panel-roulette > .large-title { grid-area: title; }
      #panel-roulette > #filterSummary { grid-area: summary; margin-top: 0; width: min(100%, 400px); justify-self: center; }
      #panel-roulette > .wheel-stage { grid-area: wheel; margin-top: 0; width: min(100%, 400px); }
      #panel-roulette > #spinBtn { grid-area: spin; margin-top: 20px; }
      #panel-roulette > #resultCard { grid-area: result; }
      #panel-roulette > #sendDiscordBtn { grid-area: discord; }
      #panel-filter, #panel-shops { max-width: 600px; margin: 0 auto; }
      .tabbar { left: 50%; right: auto; width: min(380px, calc(100% - 32px)); transform: translateX(-50%); }
    }

    @keyframes sheet-pop { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
    @keyframes sheet-pop-out { to { opacity: 0; transform: translateY(12px) scale(.97); } }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration: 60ms !important; scroll-behavior: auto !important; }
      .panel, .result-card, .lg-menu { animation-duration: 100ms !important; }
      .modal-backdrop, .sheet { animation-name: fade-in !important; animation-duration: 100ms !important; }
      html.is-sheet-open .app-shell { transform: translateX(-50%); border-radius: 0; }
      .spinner { animation-duration: 1.4s !important; }
    }
  

    /* ---- UX improvements ---- */
    .filter-summary {
      width: 100%; min-height: 44px; margin: 0; padding: 0 12px 0 14px; border: 0; border-radius: 22px;
      display: flex; align-items: center; gap: 8px; color: var(--label2); background: var(--field);
      font-size: 14px; text-align: left; cursor: pointer;
    }
    .filter-summary .material-symbols-rounded { font-size: 18px; color: var(--label3); }
    .filter-summary-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--label); }
    .filter-summary-count { font-variant-numeric: tabular-nums; }
    .filter-summary:active { background: var(--lg-highlight); }

    #emptyState .lg-btn { margin-top: 6px; }

    .wheel-state.is-skeleton { background: var(--field); }
    .wheel-state.is-skeleton::before {
      content: ""; position: absolute; inset: 0; border-radius: 50%;
      background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%) 0 0 / 250% 100%;
      animation: skel 1.4s linear infinite;
    }
    html[data-theme="dark"] .wheel-state.is-skeleton::before { background-image: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .06) 50%, transparent 70%); }
    @keyframes skel { from { background-position: 150% 0; } to { background-position: -100% 0; } }
    .wheel-state.is-skeleton .state-content { position: relative; }

    .wheel-stage.is-win .wheel-shell { animation: win 1.1s var(--ease) 1; }
    @keyframes win {
      0%, 100% { box-shadow: 0 0 0 .5px var(--lg-edge), 0 18px 40px var(--lg-shadow); }
      30% { box-shadow: 0 0 0 6px rgb(0 136 255 / .35), 0 18px 40px var(--lg-shadow); }
    }

    .result-actions { margin-top: 16px; display: grid; grid-template-columns: 1fr; gap: 10px; }
    .result-actions .lg-btn { width: 100%; }

    .history-head { margin: 24px 0 0; display: flex; align-items: center; justify-content: space-between; }
    .history-head .section-label { margin-bottom: 0; }
    .history-list { margin: 8px 0 0; padding: 0 0 0 16px; list-style: none; }
    .history-row { min-height: 44px; padding-right: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: .5px solid var(--sep); font-size: 15px; }
    .history-row:first-child { border-top: 0; }
    .history-row time { color: var(--label2); font-size: 13px; font-variant-numeric: tabular-nums; }
    .history-list .chips-empty { padding: 12px 0; }
    .appearance .check-row + .check-row { border-top: .5px solid var(--sep); }

    .snackbar.show { pointer-events: auto; }
    .snackbar-action {
      flex: none; min-height: 32px; margin: -6px -8px -6px 6px; padding: 0 12px; border: 0; border-radius: 16px;
      color: var(--accent-text); background: transparent; font-size: 14px; font-weight: 600; cursor: pointer;
    }
    .snackbar-action[hidden] { display: none; }

    @media (prefers-reduced-motion: reduce) { .wheel-state.is-skeleton::before, .wheel-stage.is-win .wheel-shell { animation: none; } }

#lgDefs { position: absolute; }

a.filter-summary { text-decoration: none; color: var(--label2); }
.filter-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#panel-filter .filter-block { margin-bottom: 22px; }
#installAppBtn[hidden] { display: none; }

.install-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.install-steps li {
  display: grid; grid-template-columns: 28px 32px minmax(0, 1fr); gap: 10px; align-items: center;
  min-height: 44px; color: var(--label); font-size: 15px; line-height: 1.45;
}
.install-badge {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--field); color: var(--label2); font-size: 13px; font-weight: 700;
}
.install-icon { font-size: 26px; color: var(--accent-text); }
.install-hint { margin: 0; color: var(--label2); font-size: 13px; line-height: 1.6; }
.install-hint[hidden] { display: none; }
.install-footer { flex-direction: column; }
.install-footer .lg-btn { width: 100%; }