/* ============================================================================
   frame.css … 3 つの入口（support / rooms / account）ぜんぶの共通の見た目。
                担当: Shared。読み込むのは SiteHtmlFrame.cs（/static/shared/frame.css）。

   本サイト（starpocketgames.com … index.html 先頭の <style>）から写し取ってあります:
     - 色の名前（--ground / --ink / --accent …）と、明るい方・暗い方の値はそのまま同じ
     - 暗い方への切り替え方も同じ:
         prefers-color-scheme:dark で data-theme="light" が付いていない時、
         または data-theme="dark" が付いている時
     - 書体（OS の字だけ。よそから読み込まない）と、言語ごとの行の高さ・字間も同じ
     - 文字の大きさの段・余白（--gutter）・本文の幅（--maxw）・角の丸み・影も同じ
     - 上の帯は「浮いたガラスの丸い帯」、下の帯は細い線の上に © と言語

   ここが決めるのは:
     1. 色や字の名前（各ページの css はこの名前で使う）
     2. 外枠（背景のもや・上の帯・本文の幅と余白・下の帯）
     3. 見出し・リンク・入力欄の土台（ページをまたいで同じ形にする）

   各ページの並び（フォームの置き方・カードの並び）は、それぞれの css が持っています。

   色について:
     - 主役は本サイトと同じ 青緑（--accent）。赤は「失敗」の知らせだけに使う
     - よその会社（Riot / Innersloth）の色・書体・名前はまねしない
   ========================================================================== */

/* ---- 色・字・寸法（明るい方） ---------------------------------------------- */

:root {
  color-scheme: light;

  /* 土台と文字 */
  --ground: #EEF1F8;
  --ink: #0F1330;
  --ink-2: #434866;
  --ink-3: #4F5474;
  --line: rgba(15, 19, 48, .12);

  /* 主役の色（ボタン・選択中・リンク） */
  --accent: #0A776C;
  --accent-hover: #086A60;
  --accent-ink: #065A52;
  --accent-soft: rgba(46, 196, 182, .17);
  --on-accent: #FFFFFF;

  /* 知らせ（赤は失敗だけ、金は注意） */
  --red: #B8202F;
  --red-soft: rgba(230, 57, 70, .10);
  --gold: #7F5300;
  --gold-soft: rgba(255, 209, 102, .34);

  /* 面（ガラス・カード） */
  --code-bg: rgba(15, 19, 48, .06);
  --veil: rgba(255, 255, 255, .42);
  --veil-line: rgba(255, 255, 255, .8);
  --card: rgba(255, 255, 255, .62);
  --card-line: rgba(255, 255, 255, .85);
  --glass: rgba(255, 255, 255, .58);
  --glass-dense: rgba(250, 251, 255, .80);
  --glass-menu: rgba(250, 251, 255, .94);
  --scrim: rgba(15, 19, 48, .16);
  --solid: #FFFFFF;
  --key-sheen: rgba(255, 255, 255, .5);
  --rim: rgba(255, 255, 255, .95);
  --edge: rgba(15, 19, 48, .09);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .10) 42%, rgba(255, 255, 255, 0) 70%);
  --sh-direct: 0 1px 1px rgba(23, 28, 77, .06), 0 3px 8px -2px rgba(23, 28, 77, .10);
  --sh-ambient: 0 22px 44px -22px rgba(23, 28, 77, .28);
  --sh-float: 0 26px 52px -24px rgba(23, 28, 77, .36), 0 8px 18px -10px rgba(23, 28, 77, .18);
  --seg-bg: rgba(15, 19, 48, .065);
  --seg-thumb: rgba(255, 255, 255, .96);
  --nav-on: rgba(15, 19, 48, .07);

  /* 背景のもや（本サイトと同じ 4 つ） */
  --aur-a: rgba(81, 85, 166, .16);
  --aur-b: rgba(46, 196, 182, .26);
  --aur-c: rgba(230, 57, 70, .12);
  --aur-d: rgba(255, 209, 102, .24);

  /* 書体。OS の字だけ（よそのサイトから読み込まない）。言語ごとにその言語の字を先に並べる */
  --font-ja: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", YuGothic, Meiryo, system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-zh: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-en: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
  --font: var(--font-ja);
  --lh-body: 1.85;
  --track-body: .02em;
  --track-h: -.01em;

  /* 文字の大きさの段 */
  --fs-small: 15px;
  --fs-body: 17px;
  --fs-lead: clamp(18px, 2.1vw, 21px);
  --fs-h3: 21px;
  --fs-h2: clamp(30px, 4.6vw, 48px);
  --fs-h1: clamp(28px, 4vw, 40px);   /* 本サイトの .h3-big と同じ段。入口のページの題はこれ */

  /* 余白・幅・角の丸み・ぼかし */
  --gutter: clamp(16px, 5vw, 48px);
  --pad-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --maxw: 1000px;
  --hh: 72px;
  --r-card: 24px;
  --r-panel: 30px;
  --r-field: 14px;
  --blur: 20px;

  /* 動き（本サイトの content ばね相当。押した時の縮み） */
  --ease: cubic-bezier(.22, .8, .26, 1);
  --ease-c: cubic-bezier(.34, 1.36, .64, 1);
  --dur-c: 650ms;

  /* ---- 面と押し物の「作り方」。各ページの css はこれを background / box-shadow に入れる ---- */

  /* ガラスの板（本サイトの .glass / .code-panel）。ぼかし付き。フォームや案内の箱 */
  --glass-bg: var(--sheen), var(--glass-dense);
  --glass-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--card-line), 0 0 0 1px var(--edge), var(--sh-ambient), var(--sh-direct);
  --glass-filter: blur(var(--blur)) saturate(180%);

  /* 半透明のカード（本サイトの .card-l2 / .role）。ぼかし無し。並べる物 */
  --card-bg: var(--sheen), var(--card);
  --card-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--card-line), var(--sh-direct);

  /* 主役のボタン（本サイトの .btn--primary）と、透明なボタン（.btn--tint） */
  --btn-primary-bg: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 52%), var(--accent);
  --btn-primary-hover-bg: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 52%), var(--accent-hover);
  --btn-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .14), 0 10px 22px -10px var(--accent), var(--sh-direct);
  --btn-tint-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--card-line), 0 0 0 1px var(--edge), var(--sh-direct);

  /* 入力欄の枠（ふだん / 選んでいる時） */
  --field-shadow: inset 0 0 0 1px var(--line), inset 0 1px 2px rgba(15, 19, 48, .05);
  --field-shadow-focus: inset 0 0 0 1px var(--accent);
  --field-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23434866' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");

  /* 古い名前（互換）。各ページの css は上の名前を使う。ここは他の css が残っていた時の保険 */
  --sp-font: var(--font);
  --sp-mono: var(--mono);
  --sp-bg: var(--ground);
  --sp-surface: var(--solid);
  --sp-text: var(--ink);
  --sp-muted: var(--ink-3);
  --sp-border: var(--line);
  --sp-card-bg: var(--card);
  --sp-input-bg: var(--solid);
  --sp-code-bg: var(--code-bg);
  --sp-accent: var(--accent);
  --sp-accent-text: var(--on-accent);
  --sp-primary: var(--accent);
  --sp-primary-fg: var(--on-accent);
  --sp-link: var(--accent-ink);
  --sp-ok: var(--accent-ink);
  --sp-ok-bg: var(--accent-soft);
  --sp-ok-border: var(--accent-soft);
  --sp-ok-text: var(--ink);
  --sp-warn: var(--gold);
  --sp-warn-bg: var(--gold-soft);
  --sp-notice-bg: var(--gold-soft);
  --sp-notice-border: var(--gold-soft);
  --sp-danger: var(--red);
  --sp-danger-bg: var(--red-soft);
  --sp-error-bg: var(--red-soft);
  --sp-error-border: var(--red-soft);
  --sp-error-text: var(--red);
  --sp-badge: var(--ink-2);
  --sp-badge-bg: var(--seg-bg);
}

/* ---- 色（暗い方）。切り替え方は本サイトと同じ 2 通り ------------------------------ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #090B1F;
    --ink: #EEF0FF;
    --ink-2: #B4B9DB;
    --ink-3: #A1A6CA;
    --line: rgba(255, 255, 255, .11);
    --accent: #3FD6C6;
    --accent-hover: #62E0D3;
    --accent-ink: #5FE0D2;
    --accent-soft: rgba(63, 214, 198, .14);
    --on-accent: #04201D;
    --red: #FF8A94;
    --red-soft: rgba(255, 138, 148, .12);
    --gold: #FFD166;
    --gold-soft: rgba(255, 209, 102, .13);
    --code-bg: rgba(255, 255, 255, .08);
    --veil: rgba(255, 255, 255, .025);
    --veil-line: rgba(255, 255, 255, .06);
    --card: rgba(24, 28, 60, .60);
    --card-line: rgba(255, 255, 255, .09);
    --glass: rgba(24, 28, 68, .50);
    --glass-dense: rgba(16, 19, 50, .80);
    --glass-menu: rgba(16, 19, 50, .94);
    --scrim: rgba(0, 0, 0, .40);
    --solid: #151937;
    --key-sheen: rgba(255, 255, 255, .14);
    --rim: rgba(255, 255, 255, .20);
    --edge: rgba(0, 0, 0, .40);
    --sheen: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .02) 42%, rgba(255, 255, 255, 0) 70%);
    --sh-direct: 0 1px 1px rgba(0, 0, 0, .35), 0 3px 8px -2px rgba(0, 0, 0, .40);
    --sh-ambient: 0 22px 44px -22px rgba(0, 0, 0, .70);
    --sh-float: 0 26px 52px -24px rgba(0, 0, 0, .80), 0 8px 18px -10px rgba(0, 0, 0, .55);
    --seg-bg: rgba(255, 255, 255, .08);
    --seg-thumb: rgba(255, 255, 255, .17);
    --nav-on: rgba(255, 255, 255, .10);
    --aur-a: rgba(43, 48, 120, .60);
    --aur-b: rgba(46, 196, 182, .20);
    --aur-c: rgba(230, 57, 70, .16);
    --aur-d: rgba(255, 209, 102, .10);
    --field-shadow: inset 0 0 0 1px var(--line), inset 0 1px 2px rgba(0, 0, 0, .25);
    --field-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B4B9DB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #090B1F;
  --ink: #EEF0FF;
  --ink-2: #B4B9DB;
  --ink-3: #A1A6CA;
  --line: rgba(255, 255, 255, .11);
  --accent: #3FD6C6;
  --accent-hover: #62E0D3;
  --accent-ink: #5FE0D2;
  --accent-soft: rgba(63, 214, 198, .14);
  --on-accent: #04201D;
  --red: #FF8A94;
  --red-soft: rgba(255, 138, 148, .12);
  --gold: #FFD166;
  --gold-soft: rgba(255, 209, 102, .13);
  --code-bg: rgba(255, 255, 255, .08);
  --veil: rgba(255, 255, 255, .025);
  --veil-line: rgba(255, 255, 255, .06);
  --card: rgba(24, 28, 60, .60);
  --card-line: rgba(255, 255, 255, .09);
  --glass: rgba(24, 28, 68, .50);
  --glass-dense: rgba(16, 19, 50, .80);
  --glass-menu: rgba(16, 19, 50, .94);
  --scrim: rgba(0, 0, 0, .40);
  --solid: #151937;
  --key-sheen: rgba(255, 255, 255, .14);
  --rim: rgba(255, 255, 255, .20);
  --edge: rgba(0, 0, 0, .40);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .02) 42%, rgba(255, 255, 255, 0) 70%);
  --sh-direct: 0 1px 1px rgba(0, 0, 0, .35), 0 3px 8px -2px rgba(0, 0, 0, .40);
  --sh-ambient: 0 22px 44px -22px rgba(0, 0, 0, .70);
  --sh-float: 0 26px 52px -24px rgba(0, 0, 0, .80), 0 8px 18px -10px rgba(0, 0, 0, .55);
  --seg-bg: rgba(255, 255, 255, .08);
  --seg-thumb: rgba(255, 255, 255, .17);
  --nav-on: rgba(255, 255, 255, .10);
  --aur-a: rgba(43, 48, 120, .60);
  --aur-b: rgba(46, 196, 182, .20);
  --aur-c: rgba(230, 57, 70, .16);
  --aur-d: rgba(255, 209, 102, .10);
  --field-shadow: inset 0 0 0 1px var(--line), inset 0 1px 2px rgba(0, 0, 0, .25);
  --field-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B4B9DB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* 言語ごとの字（<html lang> で切り替わる。本サイトと同じ値） */
:root[lang="zh-CN"] { --font: var(--font-zh); --lh-body: 1.8; --track-body: .01em; --track-h: -.005em; }
:root[lang="en"] { --font: var(--font-en); --lh-body: 1.6; --track-body: -.003em; --track-h: -.028em; }

/* 連続した角（描けるブラウザだけ。同じ大きさに見せるには半径を大きくする） */
@supports (corner-shape: squircle) {
  :root { --r-card: 34px; --r-panel: 42px; }
}

/* ---- 土台 ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* body が積み重ねの基準。背景のもや（z-index:-1）は body の色の上・中身の下に描かれる */
body.sp-body {
  position: relative;
  z-index: 0;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: var(--track-h);
  font-feature-settings: "palt" 1;
  text-wrap: balance;
}

:root[lang="ja"] h1,
:root[lang="ja"] h2,
:root[lang="ja"] h3 {
  word-break: auto-phrase;
}

/* 見出しの段（各ページで同じ大きさになるようにここで決める。余白は各ページ） */
.sp-main h1 {
  font-size: var(--fs-h1);
  line-height: 1.22;
}

.sp-main h2 {
  font-size: var(--fs-h3);
  line-height: 1.4;
}

.sp-main h3 {
  font-size: 17px;
  line-height: 1.5;
}

code,
kbd,
samp {
  font-family: var(--mono);
  font-size: .88em;
  letter-spacing: 0;
  background: var(--code-bg);
  padding: .12em .42em;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.5rem 0;
}

/* ---- 入力欄と押し物の土台（どの入口でも同じ形） ------------------------------------ */

.sp-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.sp-main select,
.sp-main textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 11px 14px;
  font: inherit;
  line-height: 1.5;
  letter-spacing: var(--track-body);
  color: var(--ink);
  background: var(--solid);
  border: 0;
  border-radius: var(--r-field);
  box-shadow: var(--field-shadow);
  transition: box-shadow .2s var(--ease);
}

.sp-main select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: var(--field-chevron);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  cursor: pointer;
}

.sp-main textarea {
  resize: vertical;
  line-height: 1.7;
}

.sp-main input:focus-visible,
.sp-main select:focus-visible,
.sp-main textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--field-shadow-focus);
}

.sp-main input::placeholder,
.sp-main textarea::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

.sp-main input[readonly] {
  color: var(--ink-2);
}

.sp-main button {
  font: inherit;
  letter-spacing: var(--track-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sp-main button:disabled {
  cursor: default;
  opacity: .55;
}

/* ---- 背景のもや（本サイトと同じ 4 つの丸。ゆっくり漂う） ------------------------------ */

.sp-aurora {
  position: fixed;
  inset: 0 0 auto;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.sp-aurora i {
  position: absolute;
  display: block;
  width: 72vmax;
  height: 72vmax;
  border-radius: 50%;
}

.sp-aurora i:nth-child(1) { left: -22vmax; top: -26vmax; background: radial-gradient(closest-side, var(--aur-a), transparent); animation: sp-drift-a 56s ease-in-out infinite alternate; }
.sp-aurora i:nth-child(2) { right: -26vmax; top: -12vmax; background: radial-gradient(closest-side, var(--aur-b), transparent); animation: sp-drift-b 64s ease-in-out infinite alternate; }
.sp-aurora i:nth-child(3) { left: -8vmax; bottom: -40vmax; background: radial-gradient(closest-side, var(--aur-c), transparent); animation: sp-drift-c 72s ease-in-out infinite alternate; }
.sp-aurora i:nth-child(4) { right: -18vmax; bottom: -34vmax; width: 58vmax; height: 58vmax; background: radial-gradient(closest-side, var(--aur-d), transparent); animation: sp-drift-d 60s ease-in-out infinite alternate; }

@keyframes sp-drift-a { to { transform: translate(18vmax, 14vmax) scale(1.12); } }
@keyframes sp-drift-b { to { transform: translate(-20vmax, 16vmax) scale(.92); } }
@keyframes sp-drift-c { to { transform: translate(22vmax, -18vmax) scale(1.08); } }
@keyframes sp-drift-d { to { transform: translate(-16vmax, -20vmax) scale(1.14); } }

/* ---- 「本文へ」（読み上げ・キーボードの人用。Tab で最初に来る。ふだんは見えない） ------------- */

.sp-skip {
  position: fixed;
  z-index: 40;
  top: calc(env(safe-area-inset-top, 0px) + 76px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  background: var(--sheen), var(--glass-menu);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--card-line), 0 0 0 1px var(--edge), var(--sh-float);
}

.sp-skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  box-shadow: none;
}

/* ---- 上の帯（浮いたガラスの丸い帯。本サイトの .top / .top-bar） ------------------------ */

.sp-top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  padding: 10px var(--pad-r) 0 var(--pad-l);
  pointer-events: none;
}

/* 帯の後ろ: 上の細い所と丸い両端で、流れてくる文字をぼかして薄くする（半端な行が覗かないように） */
.sp-top::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(env(safe-area-inset-top, 0px) * -1);
  left: 0;
  right: 0;
  height: calc(env(safe-area-inset-top, 0px) + 46px);
  pointer-events: none;
  background: linear-gradient(180deg, var(--ground) 0, var(--ground) 18%, transparent 100%);
  opacity: .9;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-mask: linear-gradient(180deg, #000 30%, transparent);
  mask: linear-gradient(180deg, #000 30%, transparent);
}

.sp-top-bar {
  position: relative;
  pointer-events: auto;
  width: min(100%, calc(var(--maxw) + 40px));
  margin-inline: auto;
  min-height: 56px;
  padding: 8px 8px 8px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--card-line), 0 0 0 1px var(--edge), var(--sh-float);
}

/* 印と名前。画像は使わず、本サイトの下の帯と同じ SVG（StarPocket の印）を直接書いている */
.sp-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 2px 10px 2px 2px;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.015em;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-c) var(--ease-c);
}

.sp-brand:hover {
  text-decoration: none;
}

.sp-brand:active {
  transform: scale(.96);
}

.sp-mark {
  display: block;
  flex: none;
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 4px rgba(23, 28, 77, .25));
}

/* 入口の見出し（サポート / 部屋一覧 / アカウント）。本サイトの「今いる所」の印と同じ形 */
.sp-site-name {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--nav-on);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* 言語の切り替え（本サイトの .seg--lang と同じ形。こちらはリンク） */
.sp-seg {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border-radius: 999px;
  background: var(--seg-bg);
  box-shadow: inset 0 1px 2px rgba(15, 19, 48, .06);
  -webkit-user-select: none;
  user-select: none;
}

.sp-seg a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--track-body);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s var(--ease), transform var(--dur-c) var(--ease-c);
}

.sp-seg a:hover {
  color: var(--ink);
  text-decoration: none;
}

.sp-seg a:active {
  transform: scale(.93);
}

.sp-seg a:focus-visible {
  outline-offset: 1px;
}

.sp-seg a[aria-current] {
  color: var(--ink);
  background: var(--sheen), var(--seg-thumb);
  box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--card-line), var(--sh-direct);
}

.sp-top-bar .sp-seg {
  margin-left: auto;
}

/* ---- 本文 ----------------------------------------------------------------- */

/* 横の余白（--gutter）はここが持つ。各ページの css は横に余白を足さない */
.sp-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: calc(var(--maxw) + var(--pad-l) + var(--pad-r));
  margin-inline: auto;
  padding: clamp(28px, 5vw, 56px) var(--pad-r) clamp(64px, 9vw, 96px) var(--pad-l);
}

/* 管理ページの css（admin.css）は自分で 16px の横余白を持っているので、二重にしない */
.sp-main > .ad {
  padding-inline: 0;
}

/* Discord のログインの案内ページ（AuthDiscord.cs が head に直書きしている最低限の style を、
   ここで同じサイトの見た目に上書きする。あちらの css は無い） */
.sp-main .auth-discord {
  max-width: 30rem;
  margin: clamp(8px, 3vw, 32px) auto 0;
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--r-panel);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-shadow);
}

.sp-main .auth-discord h1 {
  font-size: var(--fs-h1);
  margin: 0 0 12px;
}

.sp-main .auth-discord p {
  margin: 0 0 12px;
  color: var(--ink-2);
  line-height: 1.7;
}

.sp-main .auth-discord p:last-child {
  margin: 20px 0 0;
}

.sp-main .auth-discord .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--on-accent);
  text-decoration: none;
  background: var(--btn-primary-bg);
  box-shadow: var(--btn-primary-shadow);
}

/* ---- 下の帯（本サイトの .foot-bottom: 細い線の上に、印と ©・リンク・言語） ------------------ */

.sp-foot {
  margin-top: auto;
  padding: 0 var(--pad-r) clamp(40px, 6vw, 64px) var(--pad-l);
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-2);
}

.sp-foot-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

.sp-foot-studio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
}

.sp-studio-mark {
  display: block;
  flex: none;
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 2px 4px rgba(23, 28, 77, .22));
}

.sp-foot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-foot-links a {
  color: var(--ink);
  text-decoration: none;
}

@media (hover: hover) {
  .sp-foot-links a:hover {
    text-decoration: underline;
  }
}

.sp-foot-lang {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-3);
}

.sp-globe {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* ---- 画面がせまい時 --------------------------------------------------------- */

/* 小さな電話（480px 未満）:
     - 「StarPocket」の文字が先に引っ込む（読み上げにはリンクの名前として残る）
     - 言語の切り替えと見出しの札を少し詰める（本サイトが小さな電話でしている詰め方と同じ）
     - 帯の丸みは 28px。1 段なら高さの半分なので今までと同じ丸い帯に見え、
       字が太い OS で 2 段になっても崩れずに角の丸い箱になる
   （実測: 幅 400px で帯は 360px。いちばん長い「房间列表」でも 322px で収まる） */
@media (max-width: 479px) {
  .sp-brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .sp-brand {
    padding-right: 2px;
  }

  .sp-top-bar {
    border-radius: 28px;
  }

  .sp-site-name {
    padding-inline: 10px;
    font-size: 13.5px;
  }

  .sp-seg a {
    padding-inline: 8px;
    font-size: 12.5px;
  }
}

/* さらにせまい時（360px 未満）は言語の切り替えが 2 段目に降りて横いっぱいに広がる */
@media (max-width: 359px) {
  .sp-top-bar .sp-seg {
    margin-left: 0;
    width: 100%;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .sp-foot-inner {
    display: grid;
    justify-content: stretch;
  }
}

/* ---- 透け・動きを減らす設定の人（本サイトと同じ扱い） -------------------------------- */

/* 透けを減らす（または、はっきりした表示）: 面は不透明、ぼかし無し、もや無し */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root,
  :root:not([data-theme="light"]),
  :root[data-theme="dark"] {
    --glass-dense: var(--solid);
    --glass-menu: var(--solid);
    --glass: var(--solid);
    --card: var(--solid);
    --veil: transparent;
    --glass-filter: none;
  }

  .sp-aurora {
    display: none;
  }

  .sp-top::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ぼかしが描けないブラウザ: 帯を土台の色で塗る */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sp-top-bar {
    background: var(--ground);
  }
}

/* 動きを減らす: 漂わない・縮まない */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .sp-brand:active,
  .sp-seg a:active {
    transform: none !important;
  }
}

@media print {
  .sp-aurora,
  .sp-top {
    display: none;
  }
}