:root {
  /* =====================================================================
     STRUCTURAL TOKENS -- fixed across every UI theme.
     Screen geometry, spacing, type scale, and tap-target-related sizing.
     Theme layers (01-base/theme-neutral.css and future pop / fantasy /
     tactical siblings) must never declare any of these: swapping the
     `data-ui-theme` attribute is only allowed to change color / radius /
     display-font tokens (see the THEME TOKENS block below and
     styles/README.md), never layout or tap targets.
     ===================================================================== */
  --screen-min-font-size: 12px;
  /* Portrait card proportion, shared by every screen that draws a card at
     size: formation's party strip, the battle strip, and the result screen.
     The small square icon used in lists (attribute-card-icon's own 1/1) is a
     different thing and keeps its own shape. */
  --card-portrait-aspect: 1 / 1.72;
  --screen-caption-font-size: max(var(--screen-min-font-size), 1.3333cqw);
  --screen-label-font-size: max(var(--screen-min-font-size), 1.4815cqw);
  --screen-body-font-size: max(var(--screen-min-font-size), 1.6667cqw);

  /* Spacing scale (fixed px; for screen-outside-chrome surfaces). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Type scale (fixed px; for screen-outside-chrome surfaces). */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 26px;

  /* Typography rhythm (デジタル庁デザインシステムβ版準拠). */
  --lh-normal: 1.5;
  --para-gap: 2.25em;

  /* Shared screen-frame geometry (dispatch-ui-frame-nav-unify, 案B §4/§11).
     Every screen frame (home's .home-game-frame in 07-home/frame.css and
     the other four screens' .screen-shell__body in 01-base/screen-shell.css)
     reads its width/aspect/radius/border from this single formula so the
     frame's outer geometry (size, corner radius, border) is identical on
     every screen. Previously each side computed its own separate
     vw/dvh-based formula and the two frames did not match. Radius and border
     are derived from --screen-frame-inline (the frame's own width) rather
     than cqw: a cqw here resolves against the *ancestor* container, not the
     frame itself, so it silently fell back to the viewport and produced a
     33px radius on a 398px frame on desktop-width windows, and it forced
     each frame to declare `container-type: inline-size` -- which collapsed
     the home canvas (contain: inline-size makes the width content-
     independent, so a frame measured before its width resolved reported
     2px and the logical scale froze at 2/1080). calc() on the shared width
     is container-independent, stays proportional to the frame on every
     viewport, and needs no containment. This is screen geometry, not
     surface color, so it is a structural token: it stays identical no
     matter which UI theme is active.
     Note: --screen-shell-radius/--screen-shell-border-width are the shared
     screen frame's own outer geometry, distinct from the
     --radius-sm / --radius-md / --radius-lg / --radius-pill theme tokens
     below (those size individual chrome components -- buttons, pills,
     panels -- and are allowed to vary per theme). */
  --screen-viewport-gap: clamp(12px, min(2.2222vw, 1.25dvh), 24px);
  --screen-frame-inline: min(calc(100vw - var(--screen-viewport-gap)), calc((100dvh - var(--screen-viewport-gap)) * 9 / 16), 1080px);
  --screen-frame-block: calc(var(--screen-frame-inline) * 16 / 9);
  --screen-frame-color: #c5a15a;
  --screen-shell-border-width: max(1px, calc(var(--screen-frame-inline) * 0.003704));
  --screen-shell-radius: calc(var(--screen-frame-inline) * 0.025926);
  /* 隊列の並び。編成の枠と、キャラの札を**同じ幅・同じ間隔**で並べるための
     一組。同一にするのは見やすさのため -- 同じ絵が画面によって違う大きさで
     出ると、見比べるたびに目が測り直すことになる。

     枠の幅（--screen-frame-inline）から出す。cqw では駄目で、画面ごとに
     container の幅が違う（キャラは下敷きの内側、編成は内容の全幅）ので、
     同じ 1cqw が別の長さになる。

     数はキャラ側の入る幅から決めた: 下敷きの内側が枠の約70%、そこに5列と
     隙間4つ。狭いほうに合わせないと、キャラで列がはみ出す。 */
  /* 手で合わせる値は、比率だけを名前で出す（--*-ratio）。長さは下で組み立てる。
     調整ツール（features/calibrator）はこの比率だけを触る -- 触る先が長さだと、
     画面の幅ごとに別の数を覚えることになる。 */
  --party-grid-gap-ratio: 0.019;
  --party-grid-column-ratio: 0.1296;
  --party-grid-gap: calc(var(--screen-frame-inline) * var(--party-grid-gap-ratio));
  --party-grid-column: calc(var(--screen-frame-inline) * var(--party-grid-column-ratio));

  /* キャラ画面の外余白。下は下のナビを避けるぶんなので別の値。 */
  --collection-frame-padding-ratio: 0.055;
  --collection-frame-bottom-padding-ratio: 0.231;
  /* 一覧を下敷きの絵の内側へ入れる量。上下は高さ基準、左右は幅基準。
     左右は**編成の枠と同じ描画幅**になるところで決めてある（実測: 下敷き
     548.6px / 編成 508.8px）。同じ絵が画面によって違う場所に並ぶと、
     見比べるたびに目が測り直すことになる。 */
  --collection-list-inset-block-start: 19%;
  --collection-list-inset-inline: 3.63%;
  --collection-list-inset-block-end: 11%;

  /* 編成カードの絵の縦横比（幅 / 高さ）。小さいほど縦長。 */
  --formation-slot-art-aspect: 0.38;

  /* ボタンの中の絵柄。倍率は1が焼いてある大きさ。位置はボタンに対する割合。 */
  --part-icon-scale: 1;
  --nav-icon-scale: 1;
  --nav-icon-top: 8%;
  --entry-icon-scale: 1;
  --entry-icon-top: 20%;
  --entry-icon-left: 7%;

  /* 語を絵にしたとき（ラベル画像）の大きさ。基準は**その語が文字だったときの
     大きさ**（1em）なので、文字と絵を入れ替えても行の高さが動かない。

     下のナビと、戦闘・物語で別に持つ。同じ絵でも、5つ並ぶ小さい語と、
     単独で立つ大きい語では要る大きさが違う -- ここを一つの摘みにすると、
     どちらかが必ず合わない（文字のときと同じ話）。 */
  --nav-label-scale: 1;
  --entry-label-scale: 1;

  /* 重要な語の太さ。書体によって持っている太さの数が違う。 */
  --font-display-weight: 900;
  /* 字間。書体を替えるたびに一度だけ回す -- 書体ごとに全部の文字列を
     合わせるのではなく、役目に対して一組だけ持つ。 */
  --font-display-tracking: 0em;
  /* 大きさの倍率。1 が焼いてある大きさ。 */
  --font-display-scale: 1;

  /* =====================================================================
     LEGACY / NOT-YET-CLASSIFIED TOKENS.
     Out of scope for dispatch-ui-theme-system.md: the original shell
     palette, the --game-* gacha/editor presentation flavor colors, and the
     state colors below are left declared here, unchanged, exactly as
     before this pass. They are not part of the neutral/pop/fantasy/
     tactical UI theme system (--game-* stays reserved for gacha
     presentation + legacy chrome per styles/README.md) and are not moved
     into a theme layer.
     ===================================================================== */
  --bg: #eef8ff;
  --panel: rgba(255, 255, 255, 0.08);
  --text: #203d70;
  --muted: #6a7da5;
  --accent-2: #35cbd0;
  --game-blue: #2f66e8;
  --game-blue-dark: #153c96;
  --game-pink: #ff66a8;
  --game-cyan: #42d8d4;
  --game-yellow: #ffd65a;
  --game-line: #214b8f;

  /* Elevation / soft social-game shadows (fixed rgba; additive, opt-in). */
  --elevation-1: 0 2px 6px rgba(21, 60, 150, 0.12);
  --elevation-2: 0 6px 18px rgba(21, 60, 150, 0.18);
  --elevation-3: 0 12px 32px rgba(21, 60, 150, 0.24);

  /* State colors. */
  --accent-hover: #ff4f97;
  --color-disabled: #b8c4dd;
  --color-danger: #ff5a5a;
  --color-success: #38c172;
  --focus-ring: 0 0 0 3px rgba(47, 102, 232, 0.45);
}

/* Theme 1: neutral (汎用) -- dispatch-ui-theme-system.md.
   This is 案B「ミニマル和モダン」as it already looks; this file only makes
   that look swappable, it must not change it.

   Selector matches both `:root` (so a page with no `data-ui-theme`
   attribute anywhere still renders as neutral -- neutral is the default)
   and `[data-ui-theme="neutral"]` (so setting the attribute explicitly to
   "neutral" is equivalent to leaving it unset). Loaded immediately after
   01-base/tokens.css in scripts/build-styles.mjs's fragment order:
   structural tokens first, theme tokens second, components third.

   THEME TOKENS ONLY. Never declare a structural token here (the
   --screen-frame-* / --screen-shell-* geometry, --space-* / --text-* /
   --screen-min-font-size / --lh-normal / --para-gap rhythm, all defined in
   01-base/tokens.css) -- those stay identical across every theme so
   swapping `data-ui-theme` can never change layout or tap targets, only
   surface color, ink color, radius, and display font. */
:root,
[data-ui-theme="neutral"] {
  /* 案B「ミニマル和モダン」text/surface palette. */
  --ink: #20263a;
  --ink-soft: #5c6270;
  --ink-muted: #8b8f9c;
  --paper: #f3f1ea;
  --surface: #ffffff;
  --line: #dfdbcf;

  /* --accent is the single primary CTA / active-state color (案B「ミニマル
     和モダン」). Use sparingly: 1-2 spots per screen. */
  --accent: #c0442f;
  /* Text/border color placed on top of a solid --accent fill (e.g. the
     battle CTA, gacha count badges). Neutral keeps the existing hardcoded
     white those spots already used. */
  --on-accent: #ffffff;

  /* Single-step elevation (no multi-shadow stacking). */
  --elev-1: 0 1px 2px rgba(32, 38, 58, 0.08);
  --elev-2: 0 2px 8px rgba(32, 38, 58, 0.1);

  /* Radius scale (fixed px; for screen-outside-chrome surfaces, not the
     cqw-scaled 1080x1920 canvas). */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Display typeface for headings/CTA copy. Neutral keeps the same system
     JP stack the shell already used everywhere (no separate heading
     typeface existed to carve out); fantasy/tactical swap this alone. */
  --font-display: "Yu Gothic", "Hiragino Sans", sans-serif;
}

/* フォック。

   役目は2つ。**見出し・名前・ボタンの文字**（--font-display）と、
   **会話・説明の本文**（--font-body）。同じ書体で通すと、丸ゴシックで
   スキルの説明を何行も読むことになるし、明朝で「戦闘開始」を押すことになる。
   飾りとして読ませる字と、量を読ませる字は要求が違う。

   選ぶのは作り手で、2つは別々に選べる（systemConfig の fontPreset と
   bodyFontPreset）。data-ui-font / data-ui-body-font が app 全体に刻まれる。

   どれも端末に入っている書体だけで組む。A preset that needs a download is a
   preset that renders as something else on the way there. */

[data-ui-font="rounded"] {
  --font-display:
    "Hiragino Maru Gothic ProN",
    "Quicksand",
    "M PLUS Rounded 1c",
    "Yu Gothic",
    "Hiragino Sans",
    sans-serif;
}

[data-ui-font="sharp"] {
  --font-display:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "Noto Serif JP",
    "Georgia",
    serif;
}

[data-ui-font="system"] {
  --font-display:
    system-ui,
    -apple-system,
    "Segoe UI",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic UI",
    "Yu Gothic",
    "Meiryo",
    "Noto Sans JP",
    sans-serif;
}

[data-ui-body-font="rounded"] {
  --font-body:
    "Hiragino Maru Gothic ProN",
    "Quicksand",
    "M PLUS Rounded 1c",
    "Yu Gothic",
    "Hiragino Sans",
    sans-serif;
}

[data-ui-body-font="sharp"] {
  --font-body:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "Noto Serif JP",
    "Georgia",
    serif;
}

[data-ui-body-font="system"] {
  --font-body:
    system-ui,
    -apple-system,
    "Segoe UI",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic UI",
    "Yu Gothic",
    "Meiryo",
    "Noto Sans JP",
    sans-serif;
}

/* 落としてくる書体（重要な語だけ）。読み込みは index.html の link で、
   display=swap -- 届く前は下の代わりの書体で出るので、字が出ない時間は無い。

   代わりの書体は「似た太さ・似た形」で選ぶ。届いた瞬間に字面が大きく変わる
   と、そこだけ組み直ったように見える。 */
[data-ui-font="rocknroll"] {
  --font-display:
    "RocknRoll One",
    "Hiragino Maru Gothic ProN",
    "Yu Gothic",
    sans-serif;
}

[data-ui-font="dela"] {
  --font-display:
    "Dela Gothic One",
    "Hiragino Sans",
    "Yu Gothic",
    sans-serif;
}

[data-ui-font="kaisei"] {
  --font-display:
    "Kaisei Tokumin",
    "Hiragino Mincho ProN",
    "Yu Mincho",
    serif;
}

[data-ui-font="lubrifont"] {
  --font-display:
    "WDXL Lubrifont JP N",
    "Hiragino Sans",
    "Yu Gothic",
    sans-serif;
}

html {
  font-size: clamp(var(--screen-min-font-size), min(1.8519vw, 1.0417dvh), var(--text-lg));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  /* 既定は本文の書体。飾りの側（--font-display）は 01-base/font-roles.css
     が名指しで載せる -- 既定を飾りにすると、名指しを忘れた文章が全部
     飾りの字で出る。多いほうを既定にする。 */
  font-family: var(--font-body, var(--font-display));
  line-height: var(--lh-normal);
  background: var(--paper);
}

button {
  font: inherit;
}

/* 画面をアプリの面として扱う。
 *
 * ブラウザで開いていても、触った感じがブラウザであってはいけない。文字が
 * 青く選択され、長押しで「コピー」が出て、引っ張ると画面が跳ねる -- どれも
 * 単体では小さいが、合わさると「これはページだ」と言い続けることになる。
 *
 * 外すのは**遊ぶ面だけ**。作り手の道具（コンテンツ編集・調整ツール）と、
 * 読ませる文（ストーリー本文）では、選べること・引っ張れることが機能なので
 * そのまま残す。 */

html,
body {
  /* 引っ張ったときの跳ね返りと、引っ張って更新を止める。ゲームの画面が
     縦に跳ねると、そこがスクロールできる紙だと分かってしまう。 */
  overscroll-behavior: none;
}

body {
  /* 文字を掴めなくする。ソシャゲの画面で「戦闘開始」を選択できる必要はない。 */
  -webkit-user-select: none;
  user-select: none;
  /* 長押しの吹き出し（コピー/共有）と、タップの青い光を消す。 */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* 二本指の拡大を止める。meta viewport の user-scalable は無視される場合が
   あるので、面の側でも言う。文字を読ませる場所（下）だけは戻す。 */
.screen-shell,
.home-game-canvas {
  touch-action: manipulation;
}

/* 選べること・引っ張れることが機能である場所。
 *
 * 作り手の道具は道具なので、コピーも選択も要る。読ませる文も、読み返すために
 * 指でなぞれたほうがよい。ここを一括で戻さないと、編集画面でテキストを選べない
 * という「直しようのない不便」になる。 */
.content-editor-screen,
.calibrator-panel,
.story-reader-text,
.gacha-presentation-voice,
.battle-voice,
input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  touch-action: auto;
}

.home-screen {
  min-height: 100dvh;
  padding: calc(var(--screen-viewport-gap) / 2);
  display: grid;
  place-items: center;
  background: var(--paper);
}

.battle-screen {
  position: relative;
  min-height: 100dvh;
  padding: min(5.1852vw, 2.9167dvh);
}

.battle-placeholder {
  max-width: min(57.4074vw, 32.2917dvh);
  padding: min(2.963vw, 1.6667dvh);
  border: max(1px, min(0.0926vw, 0.0521dvh)) solid rgba(255, 255, 255, 0.14);
  border-radius: min(2.5926vw, 1.4583dvh);
  background: var(--panel);
  box-shadow: 0 min(2.2222vw, 1.25dvh) min(7.4074vw, 4.1667dvh) rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(min(1.6667vw, 0.9375dvh));
}

.screen-shell {
  min-height: 100dvh;
  padding: calc(var(--screen-viewport-gap) / 2);
  display: grid;
  place-items: center;
  background: var(--paper);
}

.screen-shell__body {
  /* Frame geometry (--screen-viewport-gap/--screen-frame-inline/
     --screen-frame-block/--screen-shell-border-width/--screen-shell-radius)
     comes from the shared tokens in 01-base/tokens.css so this frame's
     outer geometry matches .home-game-frame (07-home/frame.css) exactly;
     see the comment there for why. Only this element's own content-layout
     variables (font scale, button metrics, inner padding) stay local. */
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  --screen-font-size: clamp(var(--screen-min-font-size), 1.8519cqw, 20px);
  --game-button-border-width: max(1px, 0.2778cqw);
  --game-button-font-size: max(var(--screen-min-font-size), 1.6667cqw);
  /* dispatch-ui-touch-and-readability §1: 28px real floor measured 24.9px
     tall in practice (ui-style-spec-b.md §13 requires a real 44px tap
     target), so the floor moves to 44px; the 4.8148cqw growth term is
     unchanged so the button still grows past 44px on a wide frame. */
  --game-button-min-height: max(44px, 4.8148cqw);
  --game-button-padding-block: 1.1111cqw;
  --game-button-padding-inline: 2.0370cqw;
  --game-button-shadow: 0.3704cqw 0.4630cqw 0 rgba(33, 75, 143, 0.35);
  --screen-shell-padding: calc(var(--screen-frame-inline) * .038889);
  --screen-shell-bottom-padding: calc(var(--screen-frame-inline) * .137037);
  width: var(--screen-frame-inline);
  aspect-ratio: 9 / 16;
  max-height: min(var(--screen-frame-block), calc(100dvh - var(--screen-viewport-gap)));
  padding: var(--screen-shell-padding) var(--screen-shell-padding) var(--screen-shell-bottom-padding);
  font-size: var(--screen-font-size);
  overflow: hidden;
  border: var(--screen-shell-border-width) solid var(--screen-frame-color);
  border-radius: var(--screen-shell-radius);
  background: var(--surface);
  box-shadow: var(--elev-2);
}

.screen-shell__content {
  position: relative;
  z-index: 10;
  height: 100%;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 1.8519cqw;
  padding: max(2px, 0.1852cqw) max(4px, 0.5556cqw) 0.9259cqw max(2px, 0.1852cqw);
  scrollbar-width: thin;
}

.game-screen-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.game-bottom-nav {
  z-index: 40;
}

.screen-shell__header {
  display: grid;
  gap: 0.7407cqw;
}

.screen-shell__eyebrow {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--screen-label-font-size);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.screen-shell__title {
  margin: 0;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 3.5556cqw);
  line-height: 1.1;
}

.screen-shell__lead {
  max-width: 70.3704cqw;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--screen-body-font-size);
  font-weight: 700;
  line-height: var(--lh-normal);
}

.screen-actions {
  display: flex;
  flex-wrap: wrap;
  /* dispatch-ui-touch-and-readability §1: adjacent buttons need at least
     --space-2 (8px) real between them (ui-style-spec-b.md §11) so a miss on
     one tap target does not land on its neighbor; 1.1111cqw alone shrinks
     under 8px real on a narrow mobile frame. */
  gap: max(var(--space-2), 1.1111cqw);
  align-items: center;
}

.screen-actions button,
.screen-panel button {
  /* Normal control (案B §7): surface + hairline, ink text. --accent stays
     reserved for the single home battle CTA, not every button on every
     screen -- this used to be a solid --ink fill, which is exactly the
     "screen full of navy boards" this pass corrects. */
  /* dispatch-ui-touch-and-readability §1: this button is never built inside
     .home-game-canvas today (grep confirms .screen-actions/.screen-panel
     only appear on the four screen-shell__body screens and battle/content-
     editor, none of which enter the scaled canvas), but the fallback chain
     is written defensively the same way as the nav tap targets in
     07-home/frame.css so a future canvas usage is correct by construction
     instead of silently under-sized. --canvas-tap-target-min resolves only
     inside the canvas; everywhere else the var() is unset and this falls
     straight through to --game-button-min-height (already a real-44px
     floor, see 01-base/screen-shell.css). */
  min-height: var(--canvas-tap-target-min, var(--game-button-min-height));
  padding: var(--game-button-padding-block) var(--game-button-padding-inline);
  color: var(--ink);
  border: var(--game-button-border-width) solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--elev-1);
  cursor: pointer;
  font-size: var(--game-button-font-size);
  font-weight: 900;
}

.screen-actions .secondary-action,
.screen-panel .secondary-action {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

/* Card surface (案B): inside the cqw-scaled canvas, so shadows below stay
   cqw-sized rather than reusing the fixed-px --elev-* tokens; the ink tint
   matches --elev-1's color intent. */
.screen-panel {
  padding: 2.4074cqw;
  border: var(--game-button-border-width) solid var(--line);
  border-radius: 1.6667cqw;
  background: var(--surface);
  box-shadow: 0 1.2963cqw 3.8889cqw rgba(32, 38, 58, 0.1);
}

.screen-panel__header {
  display: flex;
  justify-content: space-between;
  gap: 1.4815cqw;
  align-items: baseline;
  margin-bottom: 1.2963cqw;
}

.screen-panel__title {
  margin: 0;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.1481cqw);
}

.screen-panel__meta {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--screen-body-font-size);
  font-weight: 800;
}

.screen-stat {
  display: grid;
  gap: 0.3704cqw;
}

.screen-stat__label {
  color: var(--ink-muted);
  font-size: var(--screen-label-font-size);
  font-weight: 900;
}

.screen-stat__value {
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.3148cqw);
}

/* Portrait screens other than home: lay the content out for a 375px frame and
   scale it to the real frame (--screen-zoom from ui/screen-zoom.mjs). The
   frame-derived tokens are restated inside so parts already sized from the
   frame width are not scaled twice. */
.screen-shell > .screen-shell__body[data-ui-orientation="portrait"] {
  zoom: var(--screen-zoom, 1);
  --screen-frame-inline: 375px;
  --screen-frame-block: calc(375px * 16 / 9);
  --screen-shell-border-width: max(1px, calc(375px * 0.003704));
  --screen-shell-radius: calc(375px * 0.025926);
  --party-grid-gap: calc(375px * var(--party-grid-gap-ratio));
  --party-grid-column: calc(375px * var(--party-grid-column-ratio));
}

/* The shared status bar (createSharedHomeHud) is the home canvas, which fits
   itself to the real frame; undo the screen zoom around it and give it back
   the real frame width. */
:root { --screen-frame-actual: var(--screen-frame-inline); }
.screen-shell > .screen-shell__body[data-ui-orientation="portrait"] .game-status-plane {
  zoom: calc(1 / var(--screen-zoom, 1));
  --screen-frame-inline: var(--screen-frame-actual);
}

/* Overlays drawn over a screen or over home follow the same rule: the gacha
   result, the profile / settings / character panels, the notice dialog and
   the editor sheet. Home's own canvas parts already fit themselves. */
[data-ui-orientation="portrait"] > .gacha-presentation-overlay > .gacha-presentation-shell,
.home-game-frame[data-ui-orientation="portrait"] > :is(.home-profile-panel, .home-editor-sheet),
.home-game-frame[data-ui-orientation="portrait"] .home-announcement-dialog {
  zoom: var(--screen-zoom, 1);
  --screen-frame-inline: 375px;
  --screen-frame-block: calc(375px * 16 / 9);
}

.formation-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.6667cqw, 1fr));
  gap: 1.4815cqw;
}

.formation-slot-list,
.formation-bench-list,
.gacha-banner-list,
.gacha-result-list,
.gacha-history-list,
.collection-card-list,
.story-list {
  display: grid;
  gap: 1.1111cqw;
}

.formation-slot-list,
.formation-bench-list,
.gacha-banner-list,
.gacha-result-list,
.collection-card-list {
  grid-template-columns: repeat(auto-fit, minmax(20cqw, 1fr));
}

.story-layout,
.collection-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6667cqw;
}

.home-bottom-nav.game-bottom-nav {
  /* The nav bar's geometry (size/padding/border/radius/shadow/position) and
     the nav item's layout (icon+label stack/gap/tap-target/active state)
     are fully owned by the single shared rules in 07-home/bottom-nav.css
     (.home-bottom-nav / .home-bottom-nav-item), which this combo class
     also matches, so all 5 screens read as one nav bar with zero
     duplicate geometry. This fragment only adds the one thing that
     legitimately differs here: nav sits above game-screen content instead
     of home's own layers, hence the higher z-index. */
  z-index: 40;
  pointer-events: auto;
}

.game-navigation-plane {
  position: absolute; inset: 0; container-type: inline-size;
  pointer-events: none; z-index: 40;
}

.home-bottom-nav.game-bottom-nav .game-bottom-nav__item {
  /* dispatch-ui-nav-consistency §1: the item's vertical re-centering
     (offset to the middle plus a compensating transform) and tap-target
     min-height now live once, on the shared .home-bottom-nav-item base
     rule in 07-home/bottom-nav.css --
     home's own nav items go through the exact same fix (see
     BOTTOM_NAV_VERTICAL_PIN_SLOT_REFS in home-screen.mjs), so there is no
     longer a home-vs-gameplay-screen split to encode here. This fragment
     only keeps min-width: 0, defending against the button element's
     intrinsic min-width fighting the item's saved-geometry width on these
     narrow (down to ~196px-wide) nav slots. */
  min-width: 0;
}

.game-screen-part--has-asset {
  background-repeat: no-repeat;
}

.formation-slot-card,
.formation-bench-card,
.gacha-banner-card,
.gacha-result-card,
.collection-card-tile,
.story-list-item,
.gacha-history-item {
  width: 100%;
  text-align: left;
}

.formation-slot-card__name,
.formation-bench-card__name,
.gacha-banner-card__title,
.story-list-item__title,
.gacha-result-card__name {
  display: block;
  color: #fff;
  font-weight: 900;
}

.formation-slot-card__label,
.formation-slot-card__meta,
.formation-bench-card__meta,
.gacha-history-item__detail,
.story-list-item__chapter,
.story-list-item__status {
  display: block;
  color: rgba(255, 255, 255, 0.88);
  font-size: max(var(--screen-min-font-size), 1.2741cqw);
  font-weight: 800;
}

.story-detail__synopsis,
.story-detail__reward,
.collection-detail__quote,
.collection-detail__note {
  color: var(--ink);
  font-weight: 800;
  line-height: 1.7;
}

.card-art-placeholder { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: var(--pf-primary, #416c53); background: linear-gradient(145deg,var(--pf-surface,#fff9ed),var(--pf-primary-soft,#e9efe5)); font-size: clamp(14px,4cqw,32px); font-weight: 700; }
.card-art-placeholder[hidden],.attribute-card-icon__image[hidden],.home-character__image[hidden] { display: none; }

/* dispatch-formation-and-attributes: reusable square card icon (src/client/
   ui/attribute-card-icon.mjs). The attribute color is content data from the
   attribute master (src/shared/schema/attribute.mjs), delivered per-instance
   via the --attribute-card-icon-color custom property -- never a theme
   token, so it must stay fixed across theme switches (ui-style-spec-b.md
   §7).

   dispatch-attribute-preset-and-frame-ui §3: the attribute-colored frame
   (border) is now the primary read -- thicker than before, with an inset
   surface-colored hairline that separates the color ring from the art
   underneath it (the "枠UI" convention the genre uses broadly; see
   docs/research/gameui-catalog/README.md's 参照の作法 -- only the pattern is
   taken, no title's specific artwork). The badge in the corner always shows
   the attribute's own glyph character on top of its color, never color
   alone (§13). */

.attribute-card-icon {
  --card-icon-frame-width: max(1px, 0.1852cqw);
  position: relative;
  display: block;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  align-self: start;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* The border is the frame, not a white sheet behind an inset picture.
     Its content box is exactly the image viewport. Badges may overhang. */
  overflow: visible;
  border: var(--card-icon-frame-width) solid var(--card-icon-frame-color, #b9822f);
  border-radius: 8%;
  background: transparent;
  box-shadow: var(--elev-1);
}

.attribute-card-icon__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  /* Plain placeholder fill (§2: "カード画像(未設定ならプレースホルダ面)").
     Screens that have real card art (formation's gradient placeholders
     today, real images later) override this via decorateArt + their own
     scoped CSS -- see 06-formation/bench.css and detail-pane.css. */
  background: var(--ink);
}

/* dispatch-card-art-pipeline §1: the registered card image (resolved by
   src/client/entities/card-art.mjs, passed in as createAttributeCardIcon's
   `imageUrl`), layered over whatever decorateArt drew (the ID-keyed
   gradient placeholder or the plain --ink fill). cover-fits the square art
   layer; the rarity chip and attribute badge are appended to the icon after
   this element, so normal DOM stacking keeps them readable on top of it. */
.attribute-card-icon__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attribute-card-icon__rarity {
  position: absolute;
  z-index: 6;
  top: -1%;
  left: 5%;
  width: 32%;
  aspect-ratio: 1 / 1;
  color: #fff;
  font-size: var(--screen-caption-font-size);
  font-weight: 900;
  line-height: 1;
}

.pop-fantasy-rarity-flag {
  container-type: inline-size;
}

.pop-fantasy-rarity-flag__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.pop-fantasy-rarity-flag__text {
  position: absolute;
  z-index: 1;
  /* The rectangle occupies the top 70%; the triangle stays text-free. */
  top: 0;
  height: 70%;
  display: grid;
  place-items: center;
  right: 8%;
  left: 8%;
  color: #fff;
  font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
  /* Scale with the flag, not the screen: even SSR fits the rectangle. */
  font-size: 32cqw;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 1px rgba(45, 31, 20, 0.7);
}

.pop-fantasy-rarity-flag[data-rarity="n"] .pop-fantasy-rarity-flag__text {
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* Attribute glyph badge (§13's non-color cue): a small colored disc in the
   opposite corner from the rarity badge, carrying the attribute's own
   glyph character (createAttributeGlyphBadge in attribute-card-icon.mjs).
   A --surface ring keeps it legible over both the placeholder fill and any
   future real card art. aria-hidden on the element itself -- the full
   attribute name lives in the icon's own aria-label. */
.attribute-card-icon__badge {
  position: absolute;
  z-index: 7;
  right: 3%;
  bottom: 1%;
  display: grid;
  place-items: center;
  width: 31%;
  min-width: max(24px, 3.2cqw);
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-size: var(--screen-caption-font-size);
  font-weight: 900;
  line-height: 1;
}

.attribute-card-icon__badge .attribute-icon {
  width: max(12px, 1.2963cqw);
  height: max(12px, 1.2963cqw);
}

.attribute-card-icon__jewel-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Canonical adjustment taken from the user's top-left collection card.
   Keep it relative to each icon, including smaller/larger future cards. */
.attribute-card-icon > .attribute-card-icon__badge {
  width: 30.99250954062935%;
  min-width: 0;
}
.attribute-card-icon .attribute-card-icon__jewel-image {
  translate: 2.3501455587883915% -8.69625655358286%;
}
.attribute-card-icon > .attribute-card-icon__rarity {
  width: 31.99410990426227%;
}
.attribute-card-icon .pop-fantasy-rarity-flag__image {
  translate: -2.9597970763124484% 0;
}
.attribute-card-icon .pop-fantasy-rarity-flag__word {
  display: inline-block;
  font-size: 31.99540639493757cqw;
  translate: -3.5209531924482595% 18.509435184585342%;
}

/* Round 13: in the themes from botanical on, the character rim is drawn inside the card, so the
   rarity flag and the attribute jewel sat well inside it; they move out toward their corners
   (rarity left, attribute right and down), as a share of their own size so every card size follows. */
:is([data-ui-theme-kit="botanical"],[data-ui-theme-kit="marine"],[data-ui-theme-kit="cafe"],[data-ui-theme-kit="textile"],[data-ui-theme-kit="newspaper"],[data-ui-theme-kit="collage"],[data-ui-theme-kit="research"],[data-ui-theme-kit="old-map"],[data-ui-theme-kit="theater"],[data-ui-theme-kit="arcade"],[data-ui-theme-kit="art-deco"],[data-ui-theme-kit="art-nouveau"],[data-ui-theme-kit="showa"]) .attribute-card-icon > .attribute-card-icon__badge { translate: 14% 14%; }
:is([data-ui-theme-kit="botanical"],[data-ui-theme-kit="marine"],[data-ui-theme-kit="cafe"],[data-ui-theme-kit="textile"],[data-ui-theme-kit="newspaper"],[data-ui-theme-kit="collage"],[data-ui-theme-kit="research"],[data-ui-theme-kit="old-map"],[data-ui-theme-kit="theater"],[data-ui-theme-kit="arcade"],[data-ui-theme-kit="art-deco"],[data-ui-theme-kit="art-nouveau"],[data-ui-theme-kit="showa"]) .attribute-card-icon > .attribute-card-icon__rarity { translate: -16% -4%; }
/* The formation / sortie slot cards carry the same jewel outside .attribute-card-icon; it moves too. */
:is([data-ui-theme-kit="botanical"],[data-ui-theme-kit="marine"],[data-ui-theme-kit="cafe"],[data-ui-theme-kit="textile"],[data-ui-theme-kit="newspaper"],[data-ui-theme-kit="collage"],[data-ui-theme-kit="research"],[data-ui-theme-kit="old-map"],[data-ui-theme-kit="theater"],[data-ui-theme-kit="arcade"],[data-ui-theme-kit="art-deco"],[data-ui-theme-kit="art-nouveau"],[data-ui-theme-kit="showa"]) :is(.formation-screen, .sortie-screen) .formation-slot-card__attribute.attribute-card-icon__badge { translate: 34% 30%; }

/* Theme-owned color/strength/speed; geometry does not depend on frame artwork. */
.card-ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: var(--card-motion-strength, .55);
}
.card-ambient__shine {
  position: absolute;
  inset: -25% -65%;
  opacity: 0;
  background: linear-gradient(115deg, transparent 43%, var(--card-motion-glint, #fffef8) 49%, transparent 55%);
  animation: cardAmbientShine var(--card-motion-shine-duration, 14s) ease-in-out infinite;
  animation-delay: var(--card-motion-delay, 0s);
}
.card-ambient[data-aura="true"]::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  box-shadow: inset 0 0 8px 2px var(--card-motion-color, var(--accent));
  opacity: .2;
  animation: cardAmbientAura var(--card-motion-aura-duration, 5s) ease-in-out infinite alternate;
  animation-delay: var(--card-motion-delay, 0s);
}
@keyframes cardAmbientShine {
  0%, 83% { opacity: 0; transform: translateX(-65%); }
  86% { opacity: .55; }
  94%, 100% { opacity: 0; transform: translateX(65%); }
}
@keyframes cardAmbientAura {
  from { opacity: .15; }
  to { opacity: .65; }
}
/* Layout editing needs steady targets; reduced-motion removes ambient effects. */
[data-calibration-direct="true"] .card-ambient { display: none; }
@media (prefers-reduced-motion: reduce) {
  .card-ambient { display: none; }
  .card-ambient__shine, .card-ambient::after { animation: none; }
}

/* Optional image skin, shared by utility actions. Labels remain real DOM. */
.screen-actions .screen-action--fantasy {
  min-width: 72px;
  min-height: 44px;
  padding: 0.65em 1.25em;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/formation-controls/utility-button.webp") center / 100% 100% no-repeat;
  box-shadow: none;
}

.screen-actions .screen-action--fantasy:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.screen-actions .screen-action--fantasy:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 絆ゲージ。
   The relationship is with the character, so it sits on the profile tab next
   to 誕生日 and 所属 rather than among the card's growth numbers -- and both
   card detail screens draw the same one, which is why it lives here rather
   than under either of them. */
.card-detail-bond {
  display: grid;
  gap: 1cqw;
  margin-top: 1.4cqw;
}

.card-detail-bond__track {
  height: 1.8cqw;
  min-height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-strong, var(--surface));
}

.card-detail-bond__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.card-detail-bond__note {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 2.6cqw);
  line-height: 1.5;
}

/* 贈り物。絆ゲージの真下、動かす手段が数字の隣にある形。 */
.card-detail-gift {
  display: grid;
  gap: 1.2cqw;
  margin-top: 2cqw;
}

.card-detail-gift__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.2cqw;
  align-items: center;
  padding: 1.4cqw 1.6cqw;
  border: max(1px, .2cqw) solid var(--line);
  border-radius: var(--radius-md, 2cqw);
  background: var(--surface);
}

.card-detail-gift__text {
  display: grid;
  gap: .4cqw;
  min-width: 0;
}

.card-detail-gift__name {
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.9cqw);
}

.card-detail-gift__description,
.card-detail-gift__effect {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 2.6cqw);
  line-height: 1.5;
}

/* 読まなくても遊べる文章。小さく、でも消さない。 */
.card-detail-gift__flavor {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 2.5cqw);
  font-style: italic;
  line-height: 1.5;
  opacity: .85;
}

.card-detail-gift__button[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.card-detail-gift__empty {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 2.6cqw);
  line-height: 1.5;
}

.card-detail-gift__message {
  margin: 0;
  padding: 1.2cqw 1.6cqw;
  color: var(--ink);
  border-radius: var(--radius-md, 2cqw);
  background: var(--surface-strong, var(--surface));
  font-size: max(var(--screen-min-font-size), 2.7cqw);
  font-weight: 700;
  line-height: 1.5;
}

/* アイテムのアイコン。A thing people collect is a picture first and a name
   second; the empty square keeps the list a list until one is set. */

.card-detail-gift__icon {
  width: 9cqw;
  height: 9cqw;
  min-width: 32px;
  min-height: 32px;
  object-fit: contain;
  border-radius: var(--radius-sm, 1.2cqw);
  background: var(--surface-strong, var(--surface));
}

.card-detail-gift__icon--empty {
  border: max(1px, .2cqw) dashed var(--line);
}

/* Ten level marks; the compact progress caption sits below at the left. */
.card-detail-bond__marks {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 10px; width: min(100%, 300px); padding: 6px; box-sizing: border-box;
}
.card-detail-bond__mark {
  position: relative; display: block; aspect-ratio: 1; transform: rotate(45deg);
  overflow: hidden; border: 1px solid var(--pf-frame); border-radius: 2px;
  background: #e4e2d9; box-shadow: inset 0 0 0 1px var(--pf-highlight);
}
.card-detail-bond__mark-fill { position: absolute; inset: auto 0 0; background: var(--pf-primary); }
.card-detail-bond__mark:nth-child(n+6) .card-detail-bond__mark-fill { background: var(--pf-frame); }
.card-detail-bond__caption { margin: 4px 0 0; font-size: 12px; text-align: left; color: var(--pf-outline); }
.card-detail-bond .card-detail-bond__note { font-size: 12px; }

.card-detail-gift__description { white-space: pre-wrap; }

/* 暗転してぐるぐる。
   Covers the whole app rather than the game frame: it is the app saying it is
   busy, and half of it being usable while the other half waits is worse than
   a moment of nothing. */
.app-loading {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  gap: 14px;
  place-content: center;
  place-items: center;
  background: rgb(36 35 27 / 78%);
  backdrop-filter: blur(2px);
}

.app-loading__label {
  margin: 0;
  color: rgba(255, 255, 255, .92);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
}

/* 触ったら何か出る。
   Never in the way: it cannot be clicked, it sits under nothing that matters,
   and it leaves on its own. */
.tap-effect {
  position: fixed;
  z-index: 880;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 70%, #fff) 0%, transparent 70%);
  pointer-events: none;
  animation: tap-effect-bloom .52s ease-out forwards;
}

@keyframes tap-effect-bloom {
  from { opacity: .85; transform: scale(.4); }
  to { opacity: 0; transform: scale(5.2); }
}

/* 「効果を減らす」を選んでいる人には、回さないし咲かせない。 */
@media (prefers-reduced-motion: reduce) {
  .app-loading__spinner {
    animation: none;
    border-top-color: rgba(255, 255, 255, .6);
  }

  .tap-effect {
    display: none;
  }
}

/* どの画面にも置ける自由レイヤー。
   1080x1920 の論理座標を持ち込んで、置かれたシェルに合わせて縮める。編集して
   いないときは指を通す -- 飾りが操作を食べてはいけない。 */
.game-free-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.game-free-layer--editing {
  pointer-events: auto;
}

.game-free-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1080px;
  height: 1920px;
  transform-origin: top left;
}

/* Quiet, flat fantasy ornament shared by boot and network waits. */
.loading-emblem { position: relative; width: 112px; height: 112px; pointer-events: none; }
.loading-emblem__ring {
  position: absolute; inset: 8px; border: 2px solid #d4ac59; border-radius: 50%;
  box-shadow: inset 0 0 0 1px #fff0ba, 0 0 0 1px #51402e;
  animation: loading-emblem-turn 8s linear infinite;
}
.loading-emblem__ring::before, .loading-emblem__ring::after {
  content: ""; position: absolute; width: 7px; height: 7px; left: calc(50% - 4px);
  background: #d4ac59; border: 1px solid #51402e; box-shadow: inset 1px 1px #fff0ba;
  transform: rotate(45deg);
}
.loading-emblem__ring::before { top: -5px; }
.loading-emblem__ring::after { bottom: -5px; }
.loading-emblem__gem {
  position: absolute; width: 40px; height: 50px; left: 36px; top: 31px;
  object-fit: contain; animation: loading-emblem-float 2.4s ease-in-out infinite;
}
.loading-emblem__spark {
  position: absolute; width: 5px; height: 5px; background: #fff0ba; border: 1px solid #d4ac59;
  transform: rotate(45deg); animation: loading-emblem-light 2.4s ease-in-out infinite;
}
.loading-emblem__spark:nth-child(3) { top: 24px; left: 23px; }
.loading-emblem__spark:nth-child(4) { top: 43px; right: 20px; animation-delay: -.8s; }
.loading-emblem__spark:nth-child(5) { bottom: 20px; left: 36px; animation-delay: -1.6s; }
@keyframes loading-emblem-turn { to { transform: rotate(360deg); } }
@keyframes loading-emblem-float { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-3px); } }
@keyframes loading-emblem-light { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .loading-emblem__ring, .loading-emblem__gem, .loading-emblem__spark { animation: none; }
  .loading-emblem__spark { opacity: .65; }
}

/* 配置を読めなかった知らせ（ui/layout-load-notice.mjs）。
   The screen underneath is the default layout, so this stays until the
   layout loads or the maker reloads; it sits above the game, under the
   busy overlay. */
.layout-load-notice {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  z-index: 890;
  display: flex;
  gap: 10px;
  align-items: center;
  box-sizing: border-box;
  width: min(560px, calc(100% - 24px));
  padding: 10px 12px;
  border: 2px solid #b4462f;
  border-radius: 10px;
  background: #fff8ee;
  color: #3a2418;
  box-shadow: 0 6px 18px rgb(0 0 0 / 28%);
  transform: translateX(-50%);
}
.layout-load-notice__text { flex: 1; margin: 0; font-size: 13px; line-height: 1.5; }
.layout-load-notice__reload {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #b4462f;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.layout-load-notice__reload:focus-visible { outline: 3px solid #3a2418; outline-offset: 2px; }

.ui-scrollbar {
  --ui-scrollbar-size: 1.1111cqw;
  --ui-scrollbar-thumb: rgba(47, 102, 232, 0.62);
  --ui-scrollbar-thumb-hover: rgba(27, 78, 196, 0.82);
  --ui-scrollbar-track: rgba(255, 255, 255, 0.44);
  --ui-scrollbar-track-border: rgba(47, 102, 232, 0.14);

  scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-scrollbar-track);
  scrollbar-width: thin;
}

.ui-scrollbar::-webkit-scrollbar {
  width: var(--ui-scrollbar-size);
  height: var(--ui-scrollbar-size);
}

.ui-scrollbar::-webkit-scrollbar-track {
  border: max(1px, 0.0926cqw) solid var(--ui-scrollbar-track-border);
  border-radius: 999px;
  background: var(--ui-scrollbar-track);
}

.ui-scrollbar::-webkit-scrollbar-thumb {
  border: max(2px, 0.1852cqw) solid transparent;
  border-radius: 999px;
  background: var(--ui-scrollbar-thumb);
  background-clip: padding-box;
}

.ui-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--ui-scrollbar-thumb-hover);
  background-clip: padding-box;
}

.story-screen-header {
  padding: 0.3704cqw 0.3704cqw 0;
}

.story-screen-header .screen-shell__lead {
  display: none;
}

.story-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.story-mode-tab {
  position: relative;
  z-index: 0;
  /* dispatch-tap-target-completion: this tab was never routed through the
     .screen-actions/.screen-panel base rule (01-base/screen-actions.css) --
     it is its own grid-item button with no shared-floor selector applying
     to it at all, so the raw 4.0741cqw rendered at ~20 real px on a 375px
     frame. max(44px, ...) matches the same direct floor already used for
     the formation action/slot buttons. */
  min-height: max(44px, 4.0741cqw);
  color: var(--ink-soft);
  border: 0;
  border-right: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/story/tab-cream.webp") center / 100% 100% no-repeat;
  cursor: pointer;
  font-weight: 700;
}

.story-mode-tab::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/story/tab-cream.webp") center / 100% 100% no-repeat;
  content: "";
}

.story-mode-tab:last-child {
  border-right: 0;
}

.story-mode-tab--active {
  /* Selected state (§7): a light accent tint, not a solid ink fill. */
  color: var(--accent);
  color: #fff;
  background-image: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/story/tab-red.webp");
}

.story-mode-tab--active::before {
  background-image: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/story/tab-red.webp");
}

.story-screen-layout {
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}

.story-list-panel {
  position: relative;
  z-index: 0;
  padding: 8% 7%;
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/story/shell.webp") center / 100% 100% no-repeat;
  box-shadow: none;
}

.story-list-panel::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/story/shell.webp") center / 100% 100% no-repeat;
  content: "";
}

.story-chapter-list {
  display: grid;
  gap: 1.2963cqw;
  overflow: auto;
  padding: 0.1852cqw 0.3704cqw 0.7407cqw;
}

.story-chapter-block {
  display: grid;
  gap: 1.2963cqw;
}

.story-chapter-block__header {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 4.2593cqw;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/story/chapter-teal.webp") center / 100% 100% no-repeat;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  font-size: var(--screen-body-font-size);
  font-weight: 900;
}

.story-chapter-block__header::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/story/chapter-teal.webp") center / 100% 100% no-repeat;
  content: "";
}

.story-chapter-block__header span {
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

.story-chapter-block__header strong {
  margin-left: auto;
  margin-right: 1.2963cqw;
}

.story-chapter-block__header i {
  display: grid;
  place-items: center;
  width: 2.9630cqw;
  aspect-ratio: 1;
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-style: normal;
}

.story-list {
  display: grid;
  gap: 0.9259cqw;
}

.story-list-item {
  position: relative;
  min-height: 9.2593cqw;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/story/list-item.webp") center / 100% 100% no-repeat;
  box-shadow: none;
}

.story-list-item::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/story/list-item.webp") center / 100% 100% no-repeat;
  content: "";
}

.story-list-item > * {
  position: relative;
  z-index: 1;
}

.story-list-item__chapter,
.story-list-item__title {
  color: var(--ink);
}

.story-list-item__chapter {
  font-size: var(--screen-caption-font-size);
}

.story-list-item__status {
  position: absolute;
  top: 0.9259cqw;
  right: 1.1111cqw;
  padding: 0.3704cqw 0.9259cqw;
  border-radius: 999px;
  color: #fff;
  background: var(--ink-soft);
  font-size: var(--screen-caption-font-size);
}

.story-list-item[data-story-status="clear"] .story-list-item__status {
  color: var(--ink);
  border: max(1px, 0.1852cqw) solid var(--line);
  background: var(--surface);
}

.story-list-item[data-story-selected="true"] {
  color: #fff;
  background-image: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/story/list-item-active.webp");
  box-shadow: none;
}

.story-list-item[data-story-selected="true"]::before {
  background-image: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/story/list-item-active.webp");
}

.story-list-item[data-story-selected="true"] :is(.story-list-item__chapter, .story-list-item__title) {
  color: #fff;
}

.story-list-item[data-story-status="locked"] {
  opacity: 0.62;
}

.story-detail-panel {
  position: relative;
}

.story-detail-status {
  position: absolute;
  top: 1.6667cqw;
  right: 1.6667cqw;
  z-index: 2;
  padding: 0.4630cqw 1.1111cqw;
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 1.1556cqw);
  font-weight: 900;
}

.story-reader-preview {
  position: relative;
  min-height: 23.1481cqw;
  overflow: hidden;
  margin-bottom: 1.1111cqw;
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 1.6667cqw;
  background: var(--paper);
}

.story-reader-preview__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(var(--line) 1px, transparent 1px);
  background-size: 2.963cqw 2.963cqw;
  opacity: 0.5;
}

.story-reader-preview__character {
  position: absolute;
  right: 9%;
  bottom: 5.3704cqw;
  width: 32%;
  aspect-ratio: 1 / 1.45;
  border-radius: 48% 48% 1.6667cqw 1.6667cqw;
  background: color-mix(in srgb, var(--ink) 12%, var(--paper));
  border: max(1px, 0.1852cqw) solid var(--line);
}

.story-reader-preview__textbox {
  position: absolute;
  right: 1.6667cqw;
  bottom: 1.6667cqw;
  left: 1.6667cqw;
  padding: 1.2963cqw 1.6667cqw;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/story/content-panel.webp") center / 100% 100% no-repeat;
  font-weight: 900;
}

.story-reader-preview__name {
  display: inline-block;
  margin-bottom: 0.5556cqw;
  color: var(--accent);
}

.story-reader-preview__textbox p {
  margin: 0;
  line-height: 1.6;
}

.story-detail__title {
  margin: 0.5556cqw 0 0.9259cqw;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 1.7778cqw);
}

.story-reader-screen {
  --screen-viewport-gap: clamp(12px, min(2.2222vw, 1.25dvh), 24px);
  --screen-frame-inline: min(calc(100vw - var(--screen-viewport-gap)), calc((100dvh - var(--screen-viewport-gap)) * 9 / 16), 1080px);
  --screen-frame-block: calc(var(--screen-frame-inline) * 16 / 9);
  --screen-font-size: clamp(var(--screen-min-font-size), 1.4815cqw, 16px);

  display: grid;
  width: var(--screen-frame-inline);
  height: var(--screen-frame-block);
  max-height: min(var(--screen-frame-block), calc(100dvh - var(--screen-viewport-gap)));
  margin: auto;
  overflow: hidden;
  color: #fff;
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 3.3333cqw;
  background: var(--ink);
  box-shadow: var(--elev-2);
  container-type: inline-size;
}

.story-reader-stage {
  position: relative;
  display: grid;
  min-height: 0;
  padding: 4.4444cqw;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--ink);
}

.story-reader-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--story-bg-grid, rgba(255, 255, 255, 0.04)) 1px, transparent 1px),
    linear-gradient(90deg, var(--story-bg-grid, rgba(255, 255, 255, 0.04)) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--story-bg-c, rgba(0, 0, 0, 0.28)) 100%);
  background-size: auto, 4.4444cqw 4.4444cqw, 4.4444cqw 4.4444cqw;
}

.story-reader-stage__bg {
  mask-image: linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.22));
}

.story-reader-back,
.story-reader-close {
  position: absolute;
  z-index: 4;
  top: 3.3333cqw;
  left: 3.3333cqw;
  min-height: 4.0741cqw;
  padding: 0.7407cqw 1.6667cqw;
  color: var(--ink);
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--elev-1);
  font-size: max(var(--screen-min-font-size), 1.3333cqw);
  font-weight: 900;
}

.story-reader-progress {
  position: absolute;
  z-index: 4;
  left: 13.1481cqw;
  right: 8.8889cqw;
  top: 4.4444cqw;
  height: 1.1111cqw;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.story-reader-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.story-reader-counter {
  position: absolute;
  z-index: 4;
  top: 3.8889cqw;
  right: 3.3333cqw;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: max(var(--screen-min-font-size), 1.1111cqw);
  font-weight: 900;
}

.story-reader-log-open {
  position: absolute;
  z-index: 5;
  top: 6.1111cqw;
  right: 3.3333cqw;
  min-height: 3.7037cqw;
  padding: 0.6481cqw 1.2963cqw;
  color: #fff;
  border: max(1px, 0.1852cqw) solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 900;
}

.story-reader-audio {
  position: absolute;
  z-index: 5;
  top: 11.1111cqw;
  right: 3.3333cqw;
  display: grid;
  width: min(28.7037cqw, 34%);
  gap: 0.6481cqw;
  pointer-events: auto;
}

.story-reader-audio__track {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7407cqw;
  min-height: 4.1667cqw;
  padding: 0.7407cqw;
  color: #fff;
  border: max(1px, 0.1852cqw) solid rgba(255, 255, 255, 0.3);
  border-radius: 1.4815cqw;
  background: rgba(6, 12, 32, 0.86);
}

.story-reader-audio__label {
  display: inline-grid;
  min-width: 4.0741cqw;
  min-height: 2.7778cqw;
  place-items: center;
  padding: 0.3704cqw 0.7407cqw;
  border-radius: 999px;
  background: var(--accent);
  font-size: max(var(--screen-min-font-size), 0.9259cqw);
  font-weight: 900;
}

.story-reader-audio__player {
  width: 100%;
  min-width: 0;
  height: max(24px, 2.9630cqw);
}

.story-reader-audio__missing {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  font-size: max(var(--screen-min-font-size), 0.9259cqw);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-reader-character {
  --story-character-accent: var(--accent);
  --story-expression-glow: rgba(255, 255, 255, 0.5);
  --story-variant-border: rgba(255, 255, 255, 0.4);

  position: relative;
  z-index: 1;
  display: grid;
  place-items: end center;
  align-self: end;
  justify-self: center;
  width: 58%;
  aspect-ratio: 1 / 1.28;
  margin-bottom: -2.9630cqw;
  border-radius: 42% 42% 24% 24%;
}

.story-reader-character[data-expression-tone="happy"] {
  --story-expression-glow: rgba(255, 236, 157, 0.7);
}

.story-reader-character[data-expression-tone="angry"] {
  --story-expression-glow: rgba(192, 68, 47, 0.7);
}

.story-reader-character[data-expression-tone="sad"] {
  --story-expression-glow: rgba(102, 198, 255, 0.7);
}

.story-reader-character[data-expression-tone="surprise"] {
  --story-expression-glow: rgba(255, 255, 255, 0.8);
}

.story-reader-character[data-variant-tone="school"] {
  --story-variant-border: rgba(89, 210, 255, 0.6);
}

.story-reader-character[data-variant-tone="battle"] {
  --story-variant-border: rgba(192, 68, 47, 0.6);
}

.story-reader-character[data-variant-tone="summer"] {
  --story-variant-border: rgba(255, 207, 112, 0.65);
}

.story-reader-character__aura,
.story-reader-character__silhouette {
  grid-area: 1 / 1;
}

.story-reader-character__aura {
  width: 92%;
  aspect-ratio: 1 / 1.24;
  border-radius: 48% 48% 28% 28%;
  background: radial-gradient(circle at 50% 30%, var(--story-expression-glow), transparent 46%);
  opacity: 0.7;
}

.story-reader-character__silhouette {
  width: 78%;
  aspect-ratio: 1 / 1.3;
  border: max(1px, 0.1852cqw) solid var(--story-variant-border);
  border-radius: 42% 42% 24% 24%;
  background: color-mix(in srgb, var(--story-character-accent) 34%, #10172c);
}

.story-reader-character img {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.story-reader-character__labels {
  position: absolute;
  left: 50%;
  bottom: 2.5926cqw;
  display: flex;
  max-width: 78%;
  flex-wrap: wrap;
  gap: 0.4630cqw;
  justify-content: center;
  transform: translateX(-50%);
}

.story-reader-character__label,
.story-reader-character__tag {
  padding: 0.6481cqw 1.2963cqw;
  overflow: hidden;
  color: #fff;
  border: max(1px, 0.1852cqw) solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: color-mix(in srgb, var(--story-character-accent) 62%, #10172c);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 900;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-reader-character__label {
  max-width: 100%;
}

.story-reader-character__tag {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  font-size: max(var(--screen-min-font-size), 0.9259cqw);
}

.story-reader-character__tag--source {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(3, 8, 24, 0.68);
}

.story-reader-log {
  position: absolute;
  z-index: 4;
  top: 7.7778cqw;
  right: 3.3333cqw;
  display: grid;
  width: 27.7778cqw;
  max-height: 32.4074cqw;
  gap: 0.6481cqw;
  pointer-events: none;
}

.story-reader-log__title {
  justify-self: end;
  padding: 0.3704cqw 1.0185cqw;
  color: var(--ink);
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  font-size: max(var(--screen-min-font-size), 0.9259cqw);
  font-weight: 900;
}

.story-reader-log__list {
  display: grid;
  gap: 0.5556cqw;
  overflow: hidden;
}

.story-reader-log__item {
  display: grid;
  gap: 0.2778cqw;
  padding: 0.7407cqw 0.9259cqw;
  color: rgba(255, 255, 255, 0.78);
  border: max(1px, 0.1852cqw) solid rgba(255, 255, 255, 0.18);
  border-radius: 1.0185cqw;
  background: rgba(3, 8, 24, 0.6);
}

.story-reader-log__item--current {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(32, 38, 58, 0.82);
}

.story-reader-log__speaker {
  color: var(--accent);
  font-size: max(var(--screen-min-font-size), 0.9259cqw);
  font-weight: 900;
}

.story-reader-log__text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: max(var(--screen-min-font-size), 1.0185cqw);
  font-weight: 800;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.story-reader-textbox {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: 22.2222cqw;
  gap: 0.9259cqw;
  padding: 2.2222cqw 2.2222cqw 6.1111cqw;
  color: var(--ink);
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 2.0370cqw;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--elev-2);
  cursor: pointer;
}

.story-reader-textbox {
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/story/content-panel.webp") center / 100% 100% no-repeat;
}

.story-reader-next {
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/story/next-button.webp") center / 100% 100% no-repeat;
}

.story-reader-choice {
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/story/choice-button.webp") center / 100% 100% no-repeat;
}

.story-reader-chapter,
.story-reader-title,
.story-reader-speaker,
.story-reader-name,
.story-reader-text {
  margin: 0;
}

.story-reader-chapter,
.story-reader-speaker,
.story-reader-name {
  color: var(--accent);
  font-weight: 900;
}

.story-reader-title {
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.2222cqw);
}

.story-reader-text {
  min-height: 5.5556cqw;
  font-size: max(var(--screen-min-font-size), 1.5556cqw);
  font-weight: 800;
  line-height: 1.65;
}

.story-reader-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7407cqw;
  padding-right: 8.8889cqw;
}

.story-reader-choice {
  min-height: 3.7037cqw;
  padding: 0.7407cqw 1.4815cqw;
  color: #fff;
  border: max(1px, 0.1852cqw) solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 900;
}

.story-reader-next {
  position: absolute;
  right: 2.2222cqw;
  bottom: 1.8519cqw;
  min-height: 4.0741cqw;
  padding: 0.7407cqw 1.6667cqw;
  color: var(--on-accent);
  border: max(1px, 0.1852cqw) solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  font-size: max(var(--screen-min-font-size), 1.3333cqw);
  font-weight: 900;
}

.story-reader-full-log {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  padding: 8.8889cqw 4.4444cqw 4.4444cqw;
  background: rgba(3, 8, 24, 0.9);
}

.story-reader-full-log--closed {
  display: none;
}

.story-reader-full-log__panel {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1.4815cqw;
  padding: 2.2222cqw;
  border: max(1px, 0.1852cqw) solid rgba(255, 255, 255, 0.3);
  border-radius: 2.2222cqw;
  background: var(--ink);
  box-shadow: var(--elev-2);
}

.story-reader-full-log__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1111cqw;
}

.story-reader-full-log__title {
  margin: 0;
  color: #fff;
  font-size: max(var(--screen-min-font-size), 2.0370cqw);
  font-weight: 900;
}

.story-reader-full-log__count {
  margin-right: auto;
  color: var(--accent);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 900;
}

.story-reader-full-log__close {
  min-height: 3.8889cqw;
  padding: 0.7407cqw 1.4815cqw;
  color: var(--ink);
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 900;
}

.story-reader-full-log__list {
  display: grid;
  align-content: start;
  min-height: 0;
  gap: 1.0185cqw;
  overflow: auto;
  padding-right: 0.5556cqw;
  scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.18);
  scrollbar-width: thin;
}

.story-reader-full-log__item {
  display: grid;
  gap: 0.5556cqw;
  padding: 1.1111cqw 1.2963cqw;
  border: max(1px, 0.1852cqw) solid rgba(255, 255, 255, 0.18);
  border-radius: 1.2963cqw;
  background: rgba(255, 255, 255, 0.08);
}

.story-reader-full-log__item--current {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.16);
}

.story-reader-full-log__speaker {
  color: var(--accent);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 900;
}

.story-reader-full-log__text {
  margin: 0;
  color: #fff;
  font-size: max(var(--screen-min-font-size), 1.2963cqw);
  font-weight: 800;
  line-height: 1.65;
}
.story-reader-reward-status {
  margin: 0;
  padding: max(6px, 0.7407cqw) max(8px, 1.1111cqw);
  color: var(--ink-soft);
  border: max(1px, 0.0926cqw) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--screen-min-font-size);
  font-weight: 700;
}

.story-reader-reward-status[data-tone="error"] {
  color: var(--color-danger);
}
.story-reader-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.story-reader-speaker[hidden] { display: none; }

.gacha-screen-header {
  padding: 0.3704cqw 0.3704cqw 0;
}

.gacha-screen-header .screen-shell__lead {
  display: none;
}

.gacha-screen .screen-shell__content {
  gap: 2.0370cqw;
  align-content: start;
}

.gacha-pull-panel .screen-panel__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2.2222cqw;
  align-items: start;
}

.gacha-pull-panel .screen-panel__title,
.gacha-banner-panel .screen-panel__title {
  white-space: nowrap;
}

.gacha-pull-panel .screen-panel__meta {
  min-width: 0;
  line-height: 1.65;
}

.gacha-pull-panel .screen-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1111cqw;
}

.gacha-pull-panel .screen-action {
  min-width: 0;
  padding-inline: 1.2963cqw;
  overflow: hidden;
  font-size: var(--screen-label-font-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gacha-banner-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19.4444cqw), 1fr));
}

/* ガチャは全面の絵が主役なので、内容は下端に寄せる。
   ヘッダーは上のまま -- 1fr の行を挟んで、その下に抽選とバナー帯を貼る。 */
.gacha-screen .screen-shell__content {
  /* 見出しを外したので、内容は下端の一組だけ。行を下へ寄せる。
     auto 1fr の作りは、上に見出しがあった頃のもの -- 無くなった今それを
     残すと、一組が1行目（上）に居座る。 */
  align-content: end;
}

.gacha-screen__dock {
  display: grid;
  align-content: end;
  gap: 2cqw;
  min-height: 0;
}

/* 履歴ボタンは浮かせる。
   grid の1行を占めていたので、下端の一組がそのぶん押し上げられていた
   （実測: dock の下端 647 に対し、履歴が 654-700 を取っていた）。
   絵の上に小さく置くもので、縦の並びの一員ではない。 */
.gacha-screen .gacha-history-dock {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}

/* 抽選は枠なし。全面の絵の上にボタンだけが浮く。 */
.gacha-pull-panel--bare {
  display: grid;
  gap: 1.2cqw;
  padding: 0 3.4cqw;
  border: 0;
  background: none;
  box-shadow: none;
}

.gacha-pull-panel__message {
  margin: 0;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.4cqw);
  font-weight: 700;
}

/* 影を落とさない。
   全面の絵の上に浮くものは、影を付けると絵から浮いて貼り紙のように見える。
   読みやすさは、影ではなく下に敷いた暗幕（04-gacha/hero.css）が受け持つ。 */
.gacha-screen .gacha-hero-stage__copy,
.gacha-screen .gacha-hero-stage__meta,
.gacha-screen .gacha-banner-panel__title,
.gacha-screen .gacha-banner-card--image > *:not(.gacha-banner-card__image) {
  text-shadow: none;
}

.gacha-screen .gacha-banner-step,
.gacha-screen .gacha-banner-card,
.gacha-screen .gacha-history-button {
  box-shadow: none;
}

/* 抽選ボタンは中央に、大きく。この画面で押すもののほとんどがこれ。
   あとでクリスタルの絵が入る場所でもあるので、絵が置ける大きさにしておく。 */
.gacha-pull-panel--bare .screen-actions {
  display: flex;
  gap: 2.4cqw;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.gacha-pull-panel--bare .screen-action {
  min-width: 32cqw;
  min-height: max(56px, 11cqw);
  padding: 2cqw 4cqw;
  border-radius: 2.4cqw;
  font-size: max(var(--screen-min-font-size), 3.4cqw);
  font-weight: 900;
}

/* 履歴は抽選ボタンの隣。右上から降ろしたので、浮かせる指定も外す。 */
.gacha-screen .gacha-history-dock {
  position: static;
  display: flex;
  justify-content: center;
}

/* 名前と確率の行は、一組の中では普通に積む。
   .gacha-hero-stage__meta は元のヒーロー枠の中で下端に貼り付く指定
   (position: absolute; bottom) を持っていて、一組へ移したあともそれが残ると
   バナー帯の上に重なる（実測: 653-698 が帯 588-700 と重なっていた）。 */
.gacha-screen__dock .gacha-hero-stage__copy,
.gacha-screen__dock .gacha-hero-stage__meta {
  position: static;
  inset: auto;
}

.gacha-screen > .screen-shell__body {
  background:
    linear-gradient(rgba(250, 247, 238, 0.08), rgba(250, 247, 238, 0.16)),
    url("/assets/ui-kits/pop-fantasy-v2/home/art/home-background.webp") center / cover no-repeat;
}

.gacha-screen .gacha-pull-panel--bare {
  padding: 5.5cqw 7cqw 4.2cqw;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/gacha/pull-panel.webp") center / 100% 100% no-repeat;
}

.gacha-screen .gacha-pull-panel--bare .screen-action {
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/common/secondary-button-pill.webp") center / 100% 100% no-repeat;
  box-shadow: none;
}

.gacha-screen .gacha-pull-panel--bare .screen-action--primary {
  color: #fff;
  background-image: url("/assets/ui-kits/pop-fantasy-v2/screens/common/primary-button-pill.webp");
}

.gacha-hero-stage {
  /* Normal banner (§7): --surface + hairline, not a solid --ink board. */
  position: relative;
  min-height: 27.7778cqw;
  overflow: hidden;
  padding: 2.2222cqw;
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 1.6667cqw;
  background: var(--surface);
  box-shadow: var(--elev-2);
}

.gacha-hero-stage__copy {
  position: relative;
  z-index: 2;
  max-width: 58%;
  color: var(--ink);
}

.gacha-hero-stage__tag {
  display: inline-block;
  margin-bottom: 0.7407cqw;
  padding: 0.4630cqw 1.1111cqw;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 900;
  white-space: nowrap;
}

.gacha-hero-stage__copy strong {
  display: block;
  font-size: max(var(--screen-min-font-size), 3.0370cqw);
  line-height: 1.14;
}

.gacha-hero-stage__copy p {
  margin: 0.9259cqw 0 0;
  font-size: max(var(--screen-min-font-size), 1.3889cqw);
  font-weight: 900;
  line-height: 1.55;
}

.gacha-hero-stage__cards {
  position: absolute;
  right: 2.2222cqw;
  bottom: 1.6667cqw;
  width: 42%;
  height: 72%;
}

.gacha-hero-stage__meta {
  position: absolute;
  right: 2.2222cqw;
  bottom: 1.4815cqw;
  left: 2.2222cqw;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5556cqw;
  pointer-events: none;
}

.gacha-screen .gacha-hero-stage--full::before {
  position: absolute;
  z-index: 3;
  inset: 1.5cqw 2cqw 48cqw;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/gacha/hero-frame.webp") center / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
}

/* The permanent standard stage has a portrait-authored frame. It keeps its
   source aspect ratio instead of stretching the former landscape hero frame. */
.gacha-screen .gacha-hero-stage--full[data-gacha-banner-id="standard"]::before {
  inset: 1.5cqw auto auto 50%;
  width: calc(100% - 4cqw);
  aspect-ratio: 9 / 14;
  transform: translateX(-50%);
  background-image: url("/assets/ui-kits/pop-fantasy-v2/screens/cohesive-fixes-v2/gacha-standard-stage-frame.webp");
}

.gacha-hero-stage__rate,
.gacha-hero-stage__featured {
  display: inline-flex;
  align-items: center;
  min-height: 2.3148cqw;
  padding: 0.2778cqw 0.8333cqw;
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 1.0185cqw);
  font-weight: 900;
}

.gacha-hero-stage__featured {
  color: var(--accent);
}

.gacha-hero-card {
  /* Card-silhouette placeholder (§7 exception: card-art placeholders may
     keep an --ink-based fill instead of --surface). */
  position: absolute;
  display: block;
  width: 44%;
  aspect-ratio: 2 / 3;
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 1.6667cqw;
  background: color-mix(in srgb, var(--ink) 60%, transparent);
  box-shadow: var(--elev-1);
}

.gacha-hero-card--main {
  right: 24%;
  bottom: 0;
  z-index: 3;
  transform: rotate(3deg);
}

.gacha-hero-card--sub {
  right: 50%;
  bottom: 1.8519cqw;
  opacity: 0.72;
  transform: rotate(-10deg) scale(0.86);
}

.gacha-hero-card--sub-alt {
  right: 0;
  bottom: 2.2222cqw;
  opacity: 0.72;
  transform: rotate(10deg) scale(0.86);
}

.gacha-banner-card {
  min-height: 9.0741cqw;
  border-radius: 1.4815cqw;
}

.gacha-banner-card[data-gacha-selected="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 max(1px, 0.1852cqw) var(--accent);
}

.gacha-banner-card__title {
  color: var(--ink);
}

/* 全面スチル。バナーの絵をそのまま画面にする。
   絵は背景ではなく <img> で置く -- 背景画像だと読み込み失敗が静かに済んでしまい、
   作り手が「素材idを間違えた」ことに気づけない。 */
/* 枠そのものの下敷き。gacha-screen.mjs が .screen-shell__body へ移すので、
   inset:0 は枠の padding box -- つまりシェルの余白より外側になる。
   絵の有無で形は変えない -- 変わったのは「絵を入れる場所が画面全部になった」
   ことで、絵が無い間はそこにピックアップの文字だけが立つ。 */
.gacha-hero-stage--full {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  /* 行を下へ寄せる。align-items だけだと「それぞれの行の中で下」になり、
     行そのものは高さを分け合ったままなので、名前が画面の真ん中に浮く。 */
  align-content: end;
  align-items: end;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: hidden;
}

.gacha-hero-stage__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* 絵の上に文字を置くとき、下half に薄い暗幕を敷く。読めない文字は
   置いていないのと同じ。表示モードが hero のときは文字を出さないので要らない。 */
.gacha-hero-stage--still[data-gacha-display-mode="standard"]::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 46%;
  background: linear-gradient(transparent, rgba(18, 22, 32, 0.62));
  content: "";
  pointer-events: none;
}

.gacha-hero-stage--full .gacha-hero-stage__copy,
.gacha-hero-stage--full .gacha-hero-stage__meta {
  position: relative;
  z-index: 1;
}

/* 白文字にするのは絵の上にいるときだけ。絵が無い枠の上で白にすると読めない。 */
.gacha-hero-stage--still .gacha-hero-stage__copy,
.gacha-hero-stage--still .gacha-hero-stage__meta {
  color: #fff;
  text-shadow: 0 0.2cqw 0.5cqw rgba(12, 16, 26, 0.8);
}

/* ガチャの名前。ロゴ画像があればそれ、無ければ表示タイトルの文字。
   PICK UP の札はやめた -- どのバナーでも同じ文字で、作り手が決めた名前ではない。 */
.gacha-hero-stage__logo {
  display: block;
  width: auto;
  max-width: 72%;
  max-height: 16cqw;
  object-fit: contain;
}

.gacha-hero-stage__name {
  display: block;
  font-size: max(var(--screen-min-font-size), 5.4cqw);
  font-weight: 900;
  line-height: 1.15;
}

.gacha-hero-stage__lead {
  margin: 0.8cqw 0 0;
  font-size: max(var(--screen-min-font-size), 2.8cqw);
  font-weight: 700;
}

/* 名前と確率の行は、下端の一組の中に積む（gacha-screen.mjs がそこへ入れる）。
   全面のステージの中で下に寄せると、最下段のバナー帯の裏に回ってしまう。 */
.gacha-hero-stage__copy,
.gacha-hero-stage__meta {
  padding: 0 3.4cqw;
}

.gacha-result-list {
  grid-template-columns: repeat(auto-fill, minmax(13.3333cqw, 1fr));
}

.gacha-result-card {
  display: grid;
  min-height: 16.6667cqw;
  align-content: end;
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 1.4815cqw;
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
  box-shadow: var(--elev-1);
}

.gacha-result-card[data-rarity="SSR"],
.gacha-result-card[data-rarity="UR"],
.gacha-result-card[data-rarity="5★"],
.gacha-result-card[data-rarity="★5"],
.gacha-result-card[data-rarity="5"] {
  border-color: var(--ink);
  box-shadow: var(--elev-2);
}

.gacha-result-card__name {
  color: var(--ink);
}

.gacha-result-card__rarity {
  width: fit-content;
  padding: 0.1852cqw 0.7407cqw;
  color: var(--ink);
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--screen-caption-font-size);
  font-weight: 900;
}

.gacha-history-dock {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding: 0 0.3704cqw 0.5556cqw;
}

.gacha-history-button {
  /* dispatch-tap-target-completion: this circular icon button rendered at
     ~22.7 real px on a 375px frame (6.8519cqw alone). max(44px, ...)
     matches the same direct floor already applied to the formation action/
     slot buttons and the story/collection tab strips -- width and height
     grow together so the circle stays a circle, only the inner icon glyph
     (.gacha-history-button__icon, unchanged below) stays visually the same
     size the icon-shape dispatch owns. */
  position: relative;
  display: inline-grid;
  width: max(44px, 6.8519cqw);
  height: max(44px, 6.8519cqw);
  place-items: center;
  color: var(--ink);
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--elev-1);
  cursor: pointer;
}

.gacha-history-button__icon {
  position: relative;
  display: block;
  width: 2.5926cqw;
  height: 2.5926cqw;
  border: max(1px, 0.1852cqw) solid currentColor;
  border-radius: 50%;
}

.gacha-history-button__icon::before,
.gacha-history-button__icon::after {
  position: absolute;
  left: 50%;
  bottom: 50%;
  display: block;
  width: 0.3704cqw;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transform-origin: 50% 100%;
}

.gacha-history-button__icon::before {
  height: 0.9259cqw;
  transform: translateX(-50%) rotate(0deg);
}

.gacha-history-button__icon::after {
  height: 0.7407cqw;
  transform: translateX(-50%) rotate(112deg);
}

.gacha-history-button__count {
  position: absolute;
  right: -0.3704cqw;
  bottom: -0.1852cqw;
  min-width: 2.2222cqw;
  padding: 0.1852cqw 0.5556cqw;
  color: var(--on-accent);
  border: max(1px, 0.1852cqw) solid #fff;
  border-radius: 999px;
  background: var(--accent);
  font-size: var(--screen-caption-font-size);
  font-weight: 900;
  text-align: center;
}

.gacha-history-panel {
  position: absolute;
  top: calc(100% + 1.1111cqw);
  right: 0.3704cqw;
  z-index: 60;
  display: grid;
  width: min(65cqw, 100%);
  max-height: 42cqw;
  gap: 1.1111cqw;
  overflow: hidden;
  padding: 1.4815cqw;
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 1.6667cqw;
  background: var(--surface);
  box-shadow: var(--elev-2);
}

.gacha-history-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1111cqw;
}

.gacha-history-panel__title {
  margin: 0;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.1481cqw);
}

.gacha-history-panel__close {
  /* dispatch-tap-target-completion: no floor existed at all here (width
     alone, no min-height, aspect-ratio:1 just mirrors whatever width
     resolves to) -- measured 13.52x20 real px with the history panel open.
     max(44px, ...) on width is enough on its own since height follows it
     1:1 through aspect-ratio. */
  display: grid;
  width: max(44px, 4.0741cqw);
  min-width: max(44px, 4.0741cqw);
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  color: var(--ink);
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: max(var(--screen-min-font-size), 2.0741cqw);
  font-weight: 900;
}

.gacha-history-panel__list {
  display: grid;
  gap: 0.9259cqw;
  min-height: 0;
  max-height: 31cqw;
  margin: 0;
  overflow: auto;
  padding: 0 0.7407cqw 0 0;
  list-style: none;
}

.gacha-history-panel__item {
  display: grid;
  gap: 0.3704cqw;
  padding: 1.1111cqw 1.2963cqw;
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 1.2963cqw;
  background: var(--paper);
}

.gacha-history-panel__banner,
.gacha-history-panel__meta,
.gacha-history-panel__summary,
.gacha-history-panel__empty {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 900;
}

.gacha-history-panel__banner {
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 1.7185cqw);
}

.gacha-history-panel__meta {
  color: var(--accent);
  font-size: var(--screen-label-font-size);
}

.gacha-history-panel__summary,
.gacha-history-panel__empty {
  color: var(--ink-soft);
  font-size: var(--screen-label-font-size);
  line-height: 1.45;
}

/* 開催中バナーの帯。横に流して切り替える。
   縦に積むと、バナーが3本増えるだけで画面が一枚ぶん伸びる。横なら増えても
   画面の高さは変わらないし、この genre の player はこの操作に慣れている。 */
.gacha-banner-panel--rail {
  display: grid;
  align-content: end;
  gap: 1.2cqw;
  padding: 1.6cqw 0 2cqw;
  border: 0;
  /* 暗幕は敷かない。文字を読ませるために入れたものだったが、見出しを外した
     いま読ませる文字が無く、灰色の帯がスクロールの上に影のように残るだけ。 */
  background: none;
  box-shadow: none;
}

.gacha-banner-panel__title {
  margin: 0;
  padding: 0 3.4cqw;
  color: #fff;
  font-size: max(var(--screen-min-font-size), 2.6cqw);
  font-weight: 900;
  text-shadow: 0 0.2cqw 0.5cqw rgba(12, 16, 26, 0.8);
}

.gacha-banner-panel--rail .gacha-banner-list {
  display: grid;
  /* 共有の grid 定義（02-shared/shared-grids.css）が
     grid-template-columns: repeat(auto-fit, minmax(20cqw, 1fr)) を敷いていて、
     行に折り返す形になっている。横に流すには、まずその指定を降ろす必要がある
     -- template-columns が残っていると grid-auto-columns は使われない。 */
  grid-template-columns: none;
  grid-auto-flow: column;
  /* 次の一枚が覗いている幅。端で切れていないと「まだ続く」ことが見えない。 */
  grid-auto-columns: 62%;
  gap: 2cqw;
  padding: 0 3.4cqw;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 3.4cqw;
}

.gacha-banner-panel--rail .gacha-banner-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 3.2 / 1;
  overflow: hidden;
  scroll-snap-align: start;
  border: 0;
  border-radius: 0;
  background: #fff4dc;
}

.gacha-screen .gacha-banner-card::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/cohesive-fixes-v2/gacha-banner-frame.webp") center / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
}

/* 絵のあるバナーは、絵を敷いて文字を下に重ねる。 */
.gacha-banner-card--image {
  position: relative;
  overflow: hidden;
  align-content: end;
  color: #fff;
}

.gacha-banner-card__image {
  position: absolute;
  inset: 8% 3%;
  width: 94%;
  height: 84%;
  border-radius: 5%;
  object-fit: cover;
}

.gacha-banner-card--image > *:not(.gacha-banner-card__image) {
  position: relative;
  z-index: 3;
  text-shadow: 0 0.2cqw 0.5cqw rgba(12, 16, 26, 0.85);
}

.gacha-banner-card--image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 38%, rgba(18, 22, 32, 0.72));
  content: "";
}

.gacha-banner-card[data-gacha-selected="true"] {
  outline: max(2px, 0.4cqw) solid var(--accent);
  outline-offset: max(-2px, -0.4cqw);
}

/* 送りボタンつきの帯。スクロールバーは出さない。
   細くて押しにくく、指で掴む前提の見た目でもない。◁▷ なら押す場所が
   はっきりしていて、横スクロール自体は残る。 */
.gacha-banner-rail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1cqw;
  padding: 0 1.4cqw;
}

.gacha-banner-panel--rail .gacha-banner-list {
  padding: 0;
  /* scroll-behavior: smooth は付けない。
     このブラウザでは smooth 指定があると scrollLeft の代入ごと効かなくなり、
     ◁▷ が何も動かないボタンになる（実測: smooth 0 / auto 63）。
     指でなぞる操作は下の scroll-snap がそのまま受けるので、送りは一気に飛ぶ。
     A button that does nothing is worse than one that jumps. */
  scrollbar-width: none;
}

.gacha-banner-panel--rail .gacha-banner-list::-webkit-scrollbar {
  display: none;
}

.gacha-banner-step {
  display: grid;
  place-items: center;
  width: max(44px, 7cqw);
  min-height: max(44px, 7cqw);
  padding: 0;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--elev-1);
  cursor: pointer;
  font-size: max(var(--screen-min-font-size), 3.2cqw);
  font-weight: 900;
  line-height: 1;
}

.gacha-screen .gacha-banner-card:not(.gacha-banner-card--image) {
  background: #fff4dc;
}

.gacha-screen .gacha-banner-step {
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/common/arrow-circle-right.webp") center / contain no-repeat;
  box-shadow: none;
  color: transparent;
}

.gacha-screen .gacha-banner-step--prev {
  transform: rotate(180deg);
}

.gacha-screen .gacha-history-button {
  border: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/common/notification-ring.webp") center / contain no-repeat;
}

/* Review 2026-10-03: every theme drew pop fantasy's gold banner frame on a
   cream card. Other themes frame their banners with their own panel art and
   surface instead. */
:root[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .gacha-screen .gacha-banner-card:not(.gacha-banner-card--image),
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .gacha-screen .gacha-banner-card:not(.gacha-banner-card--image) { background: var(--pf-surface); color: var(--pf-outline); }
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .gacha-screen .gacha-banner-card::before {
  background: none;
  border: max(4px, 1.2cqw) solid transparent;
  border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
}
/* Shared marks, theme colour (review 2026-10-03). */
.gacha-screen :is(.gacha-history-button, .gacha-details > .game-disclosure__summary) { color: var(--pf-primary); }

.gacha-presentation-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100dvh;
  padding: min(2.5vw, 1.4063dvh);
  overflow: hidden;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.42), transparent 20%),
    radial-gradient(circle at 50% 72%, rgba(255, 102, 168, 0.34), transparent 28%),
    rgba(4, 8, 28, 0.72);
  backdrop-filter: blur(min(0.7407vw, 0.4167dvh));
}

.gacha-presentation-overlay[data-phase="special"] {
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 214, 90, 0.52), transparent 21%),
    radial-gradient(circle at 50% 74%, rgba(255, 102, 168, 0.42), transparent 32%),
    rgba(4, 8, 28, 0.76);
}

.gacha-presentation-overlay:not([data-phase="summary"]) {
  padding: 0;
}

.gacha-presentation-shell {
  position: relative;
  container-type: inline-size;
  width: min(100%, calc((100dvh - min(5vw, 2.8125dvh)) * 9 / 16), 1080px);
  max-height: 100%;
  /* 光は画面の中で完結させる。aura は inset を負にして広がるので、外に
     はみ出したぶんが端末の枠の外に色の板として残っていた -- 実機では画面
     の外なので見えないが、この作りは枠を見せる場所でも動く。 */
  overflow: hidden;
  font-size: max(var(--screen-min-font-size), 2.0253cqw);
}

.gacha-presentation-aura {
  position: absolute;
  inset: -6.5823cqw;
  border-radius: 5.5696cqw;
  background:
    conic-gradient(from 40deg, rgba(47, 102, 232, 0), rgba(255, 102, 168, 0.34), rgba(255, 214, 90, 0.28), rgba(66, 216, 212, 0.3), rgba(47, 102, 232, 0));
  filter: blur(2.2785cqw);
  animation: gachaPresentationSpin 9s linear infinite;
}

.gacha-presentation-panel {
  position: relative;
  display: grid;
  gap: 2.0253cqw;
  overflow: hidden;
  padding: 3.5443cqw;
  color: #fff;
  border: max(1px, 0.5063cqw) solid rgba(255, 255, 255, 0.86);
  border-radius: 3.5443cqw;
  background:
    radial-gradient(circle at 75% 20%, rgba(255, 214, 90, 0.28), transparent 20%),
    linear-gradient(145deg, rgba(31, 65, 182, 0.96), rgba(128, 73, 245, 0.94) 48%, rgba(255, 102, 168, 0.94));
  box-shadow:
    1.0127cqw 1.519cqw 0 rgba(3, 8, 24, 0.38),
    0 2.7848cqw 7.8481cqw rgba(255, 102, 168, 0.28);
}

.gacha-presentation-animation {
  position: absolute;
  inset: 2.0253cqw;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.gacha-presentation-circle {
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  border: max(1px, 0.2532cqw) dashed rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  animation: gachaPresentationSpin 7s linear infinite;
}

.gacha-presentation-circle--second {
  width: 44%;
  border-style: solid;
  border-color: rgba(255, 214, 90, 0.56);
  animation-duration: 5s;
  animation-direction: reverse;
}

.gacha-presentation-circle--third {
  width: 30%;
  border-color: rgba(66, 216, 212, 0.5);
  animation-duration: 4s;
}

.gacha-presentation-result-grid,
.gacha-presentation-footer {
  position: relative;
  z-index: 1;
}

.gacha-presentation-result-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.519cqw;
}

.gacha-presentation-result-grid--single {
  grid-template-columns: minmax(0, 29.1139cqw);
  justify-content: center;
}

.gacha-presentation-overlay:not([data-phase="summary"]) .gacha-presentation-footer {
  position: static;
}

.gacha-presentation-card {
  position: relative;
  display: grid;
  min-height: 23.7975cqw;
  align-content: end;
  gap: 0.6329cqw;
  overflow: hidden;
  padding: 1.519cqw;
  border: max(1px, 0.3797cqw) solid rgba(255, 255, 255, 0.82);
  border-radius: 2.2785cqw;
  background:
    radial-gradient(circle at 50% 30%, #fff 0 8%, transparent 9%),
    radial-gradient(ellipse at 50% 36%, #9fe7ff 0 25%, transparent 26%),
    linear-gradient(160deg, #10255f 0%, #1b2e66 56%, #ff91c7 100%);
  box-shadow:
    0 1.519cqw 2.2785cqw rgba(3, 8, 24, 0.35),
    inset 0 -4.557cqw 4.3038cqw rgba(3, 8, 24, 0.5);
  opacity: 0;
  transform: translateY(2.2785cqw) rotateY(22deg);
  animation: gachaPresentationReveal 360ms ease-out forwards;
}

.gacha-presentation-card[data-rarity="SSR"],
.gacha-presentation-card[data-rarity="UR"],
.gacha-presentation-card[data-rarity="5★"],
.gacha-presentation-card[data-rarity="★5"],
.gacha-presentation-card[data-rarity="5"] {
  border-color: var(--game-yellow);
  box-shadow:
    0 0 0 max(1px, 0.3797cqw) rgba(255, 214, 90, 0.28),
    0 2.0253cqw 3.038cqw rgba(3, 8, 24, 0.38),
    0 0 3.5443cqw rgba(255, 214, 90, 0.36),
    inset 0 -4.557cqw 4.3038cqw rgba(3, 8, 24, 0.5);
}

.gacha-presentation-card__art {
  position: absolute;
  top: 2.2785cqw;
  left: 50%;
  width: 46%;
  aspect-ratio: 1 / 1.24;
  border-radius: 999px 999px 2.2785cqw 2.2785cqw;
  background:
    radial-gradient(circle at 52% 24%, #fff 0 11%, transparent 12%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
    linear-gradient(150deg, #8bf2ff, #ff8ac5);
  transform: translateX(-50%);
  filter: drop-shadow(0 1.2658cqw 1.519cqw rgba(3, 8, 24, 0.32));
}

.gacha-presentation-card__rarity {
  width: fit-content;
  padding: 0.2532cqw 1.0127cqw;
  color: var(--game-blue-dark);
  border-radius: 999px;
  background: #fff;
  font-size: max(var(--screen-min-font-size), 0.8608cqw);
  font-weight: 900;
}

.gacha-presentation-card__name {
  overflow: hidden;
  font-size: max(var(--screen-min-font-size), 0.9873cqw);
  font-weight: 900;
  text-overflow: ellipsis;
  text-shadow: 0 0.2532cqw 0 rgba(3, 8, 24, 0.72);
  white-space: nowrap;
}

.gacha-presentation-card__attribute {
  color: rgba(255, 255, 255, 0.8);
  font-size: max(var(--screen-min-font-size), 0.8354cqw);
  font-weight: 900;
}

.gacha-presentation-result-grid .gacha-presentation-card--summary {
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.gacha-presentation-card--summary > .attribute-card-icon {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
}


/* Reuse collection geometry: the same borderless icon and foreground rim. */
.gacha-presentation-result-grid .gacha-presentation-card--summary { overflow: visible; border-radius: 0; position: relative; }
.gacha-presentation-card--summary > .attribute-card-icon { border: 0; border-radius: 0; box-shadow: none; }
.gacha-presentation-card--summary .attribute-card-icon__art { inset: 0; border-radius: 0; background: var(--pf-surface-raised); }
.gacha-presentation-card--summary > .attribute-card-icon::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: url('/assets/ui-kits/pop-fantasy-v2/screens/collection-v1/character-frame.webp') center / 100% 100% no-repeat;
}
/* A bright moving reflection and crisp four-point stars read as sparkle. */
.gacha-presentation-card--summary[data-rarity-tier="SSR"] { filter: drop-shadow(0 0 5px #ffd45b); }
.gacha-presentation-card--summary[data-rarity-tier="SSR"]::before {
  content: ""; position: absolute; inset: 3%; z-index: 4; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, #fff8cc44 42%, #fffdebdd 50%, #fff8cc44 58%, transparent 70%);
  background-size: 300% 100%; animation: gachaResultShine 3.2s ease-in-out infinite;
}
.gacha-presentation-card--summary[data-rarity-tier="SSR"]::after {
  content: "✦"; position: absolute; right: 2%; top: 28%; z-index: 8; pointer-events: none;
  color: #fff4ad; font-size: clamp(26px, 4.5cqw, 46px); line-height: 1;
  text-shadow: -1px 0 #b47812, 1px 0 #b47812, 0 -1px #b47812, 0 1px #b47812, 0 0 7px #ffbc24, 0 0 12px #f9ad13;
  animation: gachaResultSparkle 1.8s ease-in-out infinite;
}
@keyframes gachaResultShine { 0%, 15% { background-position: 150% 0; opacity: 0; } 35%, 65% { opacity: .85; } 85%, 100% { background-position: -50% 0; opacity: 0; } }
@keyframes gachaResultSparkle { 0%, 100% { transform: scale(.85); opacity: .85; } 50% { transform: scale(1.15); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .gacha-presentation-card--summary[data-rarity-tier="SSR"]::before { animation: none; opacity: .2; }
  .gacha-presentation-card--summary[data-rarity-tier="SSR"]::after { animation: none; }
}

.gacha-presentation-card--summary { touch-action: pan-y; user-select: none; -webkit-touch-callout: none; }
.gacha-presentation-card--summary:focus-visible { outline: 2px solid var(--pf-primary); outline-offset: 2px; }

.gacha-presentation-overlay:not([data-phase="summary"]) .gacha-presentation-panel {
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 4.8148cqw;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 24%, rgba(47, 102, 232, 0.22), transparent 24%),
    linear-gradient(180deg, rgba(3, 5, 16, 0.98), rgba(8, 10, 26, 0.96));
  box-shadow: none;
}

.gacha-presentation-overlay:not([data-phase="summary"]) .gacha-presentation-shell {
  width: min(100vw, 56.25dvh);
  height: auto;
  aspect-ratio: 9 / 16;
  max-height: 100dvh;
  font-size: max(var(--screen-min-font-size), 1.4815cqw);
}

.gacha-presentation-overlay:not([data-phase="summary"]) .gacha-presentation-aura {
  inset: 0;
  border-radius: 0;
}

.gacha-presentation-overlay[data-phase="special"] .gacha-presentation-panel {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.44), transparent 19%),
    radial-gradient(circle at 50% 56%, rgba(255, 214, 90, 0.24), transparent 32%),
    linear-gradient(180deg, rgba(4, 5, 16, 0.98), rgba(16, 12, 35, 0.97));
}

.gacha-presentation-single {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 0;
  height: 100%;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 68% 10% minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  justify-content: center;
  gap: 2%;
}

.gacha-presentation-card--featured {
  /* 全画面でカードを大きく。旧版は開封の1枚を画面いっぱいに見せていて、
     小さいと「結果の一覧が1枚ずつ出ている」だけに見える。 */
  width: 92%;
  height: 100%;
  grid-row: 1;
  min-height: 0;
  justify-self: center;
  padding: 1.6667cqw;
  border-radius: 2.037cqw;
  transform: translateY(0) scale(0.98);
  /* 一覧の札は opacity: 0 から gachaPresentationReveal で出てくる。開封の
     1枚がそれを引き継ぐと、**同じ札が段階ごとに作り直されるたびに入場を
     やり直す** -- flip で1回、reveal でもう1回、押し出しが二度走っていた。
     入場は段階の側（下の [data-phase="flip"]）が1回だけ持つ。 */
  animation: none;
  opacity: 1;
}

/* 登録された絵。属性の色の上に敷く -- 絵が無ければ下の色がそのまま出る。 */
.gacha-presentation-card__art[data-has-art],
.gacha-presentation-camera__art[data-has-art] {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.gacha-presentation-card--featured .gacha-presentation-card__art {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1.6667cqw;
  transform: none;
}

.gacha-presentation-card--featured .gacha-presentation-card__rarity,
.gacha-presentation-card--featured .gacha-presentation-card__name,
.gacha-presentation-card--featured .gacha-presentation-card__attribute {
  display: none;
}

/* SSR だけの周り。
 *
 * カードそのものは通常と同じ大きさで出るので、**特別さを作っているのは周りの
 * ほう**。ここが無いと、SSR も「少し長いだけの通常」に見える。
 * 旧版の .gacha-feature-lightfx / -cameras に当たる。 */
.gacha-presentation-lightfx {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.gacha-presentation-lightfx__burst,
.gacha-presentation-lightfx__sweep,
.gacha-presentation-lightfx__spark {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* screen で重ねる。下の絵を消さずに、光だけを足す。 */
  mix-blend-mode: screen;
}

/* 中心から抜ける。開いた瞬間の一発。 */
.gacha-presentation-lightfx__burst {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, .72),
    rgba(255, 255, 255, .14) 28%,
    transparent 58%
  );
}

/* 斜めに走る。カードの面をなでる光。 */
.gacha-presentation-lightfx__sweep {
  background: linear-gradient(
    115deg,
    transparent 22%,
    rgba(255, 255, 255, .32) 42%,
    rgba(255, 230, 160, .56) 50%,
    rgba(255, 255, 255, .32) 58%,
    transparent 78%
  );
  transform: translateX(-120%);
}

/* 弾ける粒。四隅に散らす。 */
.gacha-presentation-lightfx__spark {
  background:
    radial-gradient(circle at 24% 36%, rgba(255, 255, 255, .82), transparent 3%),
    radial-gradient(circle at 72% 28%, rgba(255, 236, 174, .8), transparent 4%),
    radial-gradient(circle at 58% 68%, rgba(255, 255, 255, .68), transparent 3%),
    radial-gradient(circle at 84% 56%, rgba(255, 212, 71, .72), transparent 4%);
}

/* 寄りの2枚。

   旧版のカメラは**画面いっぱいの寄り**だった（.gacha-feature-camera は
   inset: 0、絵は object-fit: cover に scale(2.35)）。札の左右に小さく置いた
   板ではない。板にすると、動かない絵が2枚貼られただけの謎の帯になる。

   段階の割り当ても旧版のまま: 登場でカメラ1、寄りでカメラ2。そのあいだ
   札そのものは隠れていて、決めの段階で初めて出てくる。 */
.gacha-presentation-cameras {
  position: absolute;
  /* パネルの余白（4.8148cqw）を打ち消して端まで届かせる。 */
  inset: -4.8148cqw;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.gacha-presentation-camera {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  background-color: rgba(4, 8, 16, .22);
}

/* 光の膜。寄りが素の絵の拡大に見えないよう、上下と横に一枚かける。 */
.gacha-presentation-camera::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(6, 10, 18, .42)),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
  pointer-events: none;
}

/* 寄りの下地。

   属性ごとの色（presentation-attribute-art.css）は Spark/Wave/Mind/Neon で
   引いているが、属性の台帳はいま 火/水/… に変わっている -- あの規則は
   どれにも当たらない。当たらないものを当てにすると、寄りが真っ暗になる
   （実際そうなった）。一覧の札と同じ下地をここでも持つ。 */
.gacha-presentation-camera__art {
  background:
    radial-gradient(circle at 52% 24%, #fff 0 11%, transparent 12%),
    radial-gradient(ellipse at 50% 42%, #9fe7ff 0 26%, transparent 27%),
    linear-gradient(160deg, #10255f 0%, #1b2e66 56%, #ff91c7 100%);
  position: absolute;
  inset: 0;
  z-index: 0;
  /* 寄りの倍率。旧版と同じ 2.35。 */
  transform: scale(2.35);
  filter: saturate(1.08) contrast(1.05);
}

.gacha-presentation-card__art[data-attribute="Spark"],
.gacha-presentation-special-cutin__art[data-attribute="Spark"] {
  background:
    radial-gradient(circle at 52% 18%, #fff 0 9%, transparent 10%),
    radial-gradient(ellipse at 50% 38%, #88ecff 0 30%, transparent 31%),
    linear-gradient(150deg, #151b4a 0%, #2945b7 48%, #ff9fc9 100%);
}

.gacha-presentation-card__art[data-attribute="Wave"],
.gacha-presentation-special-cutin__art[data-attribute="Wave"] {
  background:
    radial-gradient(circle at 48% 18%, #fff 0 9%, transparent 10%),
    radial-gradient(ellipse at 50% 38%, #8de4ff 0 28%, transparent 29%),
    linear-gradient(150deg, #1e3374 0%, #6bbfff 48%, #fff0b6 100%);
}

.gacha-presentation-card__art[data-attribute="Mind"],
.gacha-presentation-special-cutin__art[data-attribute="Mind"] {
  background:
    radial-gradient(circle at 46% 20%, #fff 0 9%, transparent 10%),
    radial-gradient(ellipse at 50% 38%, #ff9fce 0 28%, transparent 29%),
    linear-gradient(150deg, #31265f 0%, #6d56d8 48%, #f8c0da 100%);
}

.gacha-presentation-card__art[data-attribute="Neon"],
.gacha-presentation-special-cutin__art[data-attribute="Neon"] {
  background:
    radial-gradient(circle at 52% 18%, #fff 0 9%, transparent 10%),
    radial-gradient(ellipse at 50% 38%, #b998ff 0 28%, transparent 29%),
    linear-gradient(150deg, #201344 0%, #613dd6 48%, #fff0a8 100%);
}

.gacha-presentation-nameplate {
  grid-row: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.2658cqw;
  align-items: center;
  width: min(100%, 70.8861cqw);
  justify-self: center;
  padding: 1.7722cqw 2.2785cqw;
  color: #fff;
  border: max(1px, 0.2532cqw) solid rgba(255, 255, 255, 0.12);
  border-radius: 2.0253cqw;
  background: rgba(15, 17, 31, 0.92);
  box-shadow: 0 1.2658cqw 3.038cqw rgba(3, 8, 24, 0.38);
}

.gacha-presentation-nameplate__rarity {
  color: rgba(255, 255, 255, 0.78);
  font-size: max(var(--screen-min-font-size), 0.9114cqw);
  font-weight: 900;
}

.gacha-presentation-nameplate__name {
  overflow: hidden;
  font-size: max(var(--screen-min-font-size), 1.1899cqw);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gacha-presentation-nameplate__arrow {
  color: #fff;
  font-size: max(var(--screen-min-font-size), 1.2658cqw);
  animation: gachaPresentationArrow 920ms ease-in-out infinite;
}

.gacha-presentation-overlay[data-phase="special"] .gacha-presentation-card--featured {
  border-color: var(--game-yellow);
  box-shadow:
    0 0 0 max(1px, 0.3797cqw) rgba(255, 214, 90, 0.32),
    0 2.2785cqw 4.0506cqw rgba(3, 8, 24, 0.42),
    0 0 4.8101cqw rgba(255, 214, 90, 0.34);
}

/* 獲得の台詞。Under the nameplate on the beat the presentation stops for, in
   the same dark plate so it reads as the card speaking rather than as UI. */
.gacha-presentation-voice {
  grid-row: 3;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  white-space: pre-line;
  overflow-wrap: anywhere;
  box-sizing: border-box;
  width: min(100%, 70.8861cqw);
  justify-self: center;
  margin: 0;
  padding: 1.5cqw 2.2785cqw;
  color: rgba(255, 255, 255, 0.92);
  border-radius: 2.0253cqw;
  background: rgba(15, 17, 31, 0.78);
  font-size: max(var(--screen-min-font-size), 3cqw);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.gacha-presentation-footer {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1.7722cqw;
  align-items: center;
  justify-content: center;
}

.gacha-presentation-close,
.gacha-presentation-next,
.gacha-presentation-skip {
  flex: 0 0 auto;
  min-width: 7.0886cqw;
  min-height: 7.0886cqw;
  padding: 0;
  color: var(--game-blue-dark);
  border-radius: 999px;
  background: #fff;
  font-size: max(var(--screen-min-font-size), 2.5316cqw);
  line-height: 1;
}

.gacha-presentation-next {
  position: absolute;
  right: min(5vw, 2.8125dvh);
  bottom: min(5vw, 2.8125dvh);
  color: #fff;
  border: max(1px, 0.3797cqw) solid rgba(255, 255, 255, 0.86);
  background: rgba(47, 102, 232, 0.92);
  box-shadow:
    0 1.2658cqw 3.038cqw rgba(3, 8, 24, 0.36),
    inset 0 0 2.2785cqw rgba(255, 255, 255, 0.18);
}

.gacha-presentation-skip {
  position: absolute;
  left: min(5vw, 2.8125dvh);
  bottom: min(5vw, 2.8125dvh);
  color: #fff;
  border: max(1px, 0.3797cqw) solid rgba(255, 255, 255, 0.72);
  background: rgba(10, 18, 48, 0.72);
  box-shadow:
    0 1.2658cqw 3.038cqw rgba(3, 8, 24, 0.28),
    inset 0 0 2.2785cqw rgba(255, 255, 255, 0.12);
}

@keyframes gachaPresentationSpin {
  to { transform: rotate(360deg); }
}

@keyframes gachaPresentationReveal {
  to {
    opacity: 1;
    transform: translateY(0) rotateY(0deg);
  }
}

@keyframes gachaPresentationArrow {
  50% { transform: translateY(0.6329cqw); }
}

/* Gacha presentation sequence, restored from the legacy overlay
   (public/styles/gacha-overlay.css). The beats themselves live in
   src/client/state/gacha-presentation-rules.mjs; this stages each one.

   The motion values are carried over unchanged -- they are this product's own
   earlier tuning, not a reference to somebody else's work. What the sequence
   is for: a pull that simply flips cards has no anticipation in it. Holding,
   announcing how many high-rarity hits are coming, and then spending four
   separate beats opening each of them is the whole reason the screen is worth
   watching. */

/* The lead-in beats: load, hold, and the announcement. No card is shown yet,
   so the stage is a single line of type that changes with the beat. */
.gacha-presentation-leadin {
  display: grid;
  gap: 1.4815cqw;
  justify-items: center;
  padding: 3.7037cqw 2.2222cqw;
  text-align: center;
}

.gacha-presentation-leadin__headline {
  color: var(--ink);
  font-size: max(18px, 2.963cqw);
  font-weight: 900;
  line-height: 1.35;
  animation: gachaLeadInRise 420ms ease-out both;
}

.gacha-presentation-leadin__detail {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 1.4815cqw);
  font-weight: 800;
}

/* The announcement is the beat that matters: it is the moment the player
   learns a hit is coming. It gets the accent and a pulse the other two
   lead-in beats do not. */
.gacha-presentation-overlay[data-phase="upgrade"] .gacha-presentation-leadin__headline {
  color: var(--accent);
  font-size: max(22px, 3.7037cqw);
  animation: gachaLeadInAnnounce 560ms cubic-bezier(0.2, 0.7, 0.14, 1) both;
}

/* The sweep behind the announcement, from the legacy gachaFeatureLightSweep. */
.gacha-presentation-overlay[data-phase="upgrade"] .gacha-presentation-aura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--accent) 42%, transparent) 50%, transparent 70%);
  pointer-events: none;
  animation: gachaLightSweep 760ms ease-out both;
}

/* 高レアの4拍は下（--featured の段）が持つ。

   ここには段階ごとに .gacha-presentation-card を動かす規則が並んでいて、
   その動きが **opacity を 1 まで送っていた**。隠すつもりで opacity: 0 と
   書いても、動きのほうが強い -- セリフの段階で札が出てしまい、1カメ2カメ
   より先に答えが見えていた。 */
.gacha-presentation-overlay[data-special-phase="special-focus"] .gacha-presentation-aura {
  animation: gachaSparklePulse 900ms ease-out infinite;
}

.gacha-presentation-overlay[data-special-phase="special-final"] .gacha-presentation-aura::before {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 68%, transparent) 0%, transparent 62%);
  pointer-events: none;
  animation: gachaSpecialFinalFlash 720ms ease-out both;
}

/* Reduced motion keeps every state change (the beats still advance and the
   card still arrives) and drops only the travel. */
@media (prefers-reduced-motion: reduce) {
  .gacha-presentation-leadin__headline,
  .gacha-presentation-overlay[data-phase="upgrade"] .gacha-presentation-leadin__headline,
  .gacha-presentation-overlay[data-phase="upgrade"] .gacha-presentation-aura::after,
  .gacha-presentation-overlay[data-special-phase] .gacha-presentation-card,
  .gacha-presentation-overlay[data-special-phase="special-focus"] .gacha-presentation-aura,
  .gacha-presentation-overlay[data-special-phase="special-final"] .gacha-presentation-aura::before {
    animation: none;
  }
}

@keyframes gachaLeadInRise {
  0% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes gachaLeadInAnnounce {
  0% { transform: scale(0.9); opacity: 0; }
  40% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes gachaLightSweep {
  0% { opacity: 0; transform: translateX(-120%); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%); }
}

@keyframes gachaSparklePulse {
  0% { opacity: 0.4; transform: scale(0.96); }
  28% { opacity: 0.92; }
  100% { opacity: 0.4; transform: scale(1.08); }
}

@keyframes gachaSpecialFinalFlash {
  0% { opacity: 0; transform: scale(0.92); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.28); }
}

/* 入場は1回だけ。

   札は段階が変わるたびに作り直される。基底に入場のアニメを置くと、flip で
   1回・reveal でもう1回、同じ押し出しが二度走る（実際そう見えていた）。
   出てくるのは flip の一度きり。 */
.gacha-presentation-overlay[data-phase="flip"]:not([data-special="true"]) .gacha-presentation-card--featured {
  animation: gachaPresentationReveal 360ms ease-out both;
}

.gacha-presentation-overlay[data-phase="departure"] .gacha-presentation-single {
  animation: gachaCardDeparture 480ms ease-in forwards;
}
@keyframes gachaCardDeparture {
  0%, 25% { opacity: 1; }
  75%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gacha-presentation-overlay[data-phase="departure"] .gacha-presentation-single {
    animation: none;
    visibility: hidden;
  }
}

/* 光と寄りを、段階に合わせて出す。
 *
 * 旧版が光を3層に分けていたのは、**段階ごとに別々のタイミングで出すため**。
 * 一枚の絵にすると「光った」以上のことが言えない。
 *
 *   登場（intro）… 中心から burst。開いた瞬間の一発
 *   寄り（focus）… sweep が斜めに走る
 *   決め（final）… spark が弾ける
 */
.gacha-presentation-overlay[data-special-phase="special-intro"] .gacha-presentation-lightfx__burst {
  animation: gachaLightBurst 900ms ease-out both;
}

.gacha-presentation-overlay[data-special-phase="special-focus"] .gacha-presentation-lightfx__sweep {
  animation: gachaLightSweep 1100ms cubic-bezier(.22, .7, .2, 1) both;
}

.gacha-presentation-overlay[data-special-phase="special-final"] .gacha-presentation-lightfx__spark {
  animation: gachaLightSpark 1400ms ease-out both;
}

/* 寄りの段階。旧版の割り当てそのまま -- 登場でカメラ1、寄りでカメラ2。
   絵は寄ったまま横に流れる（forward / reverse で向きを変える）。 */
.gacha-presentation-overlay[data-special-phase="special-intro"] .gacha-presentation-camera--1,
.gacha-presentation-overlay[data-special-phase="special-focus"] .gacha-presentation-camera--2 {
  opacity: 1;
  animation: gachaCameraFade 360ms ease-out both;
}

.gacha-presentation-overlay[data-special-phase="special-intro"] .gacha-presentation-camera--1 .gacha-presentation-camera__art {
  animation: gachaCameraTrackForward 1180ms ease-in-out both;
}

.gacha-presentation-overlay[data-special-phase="special-focus"] .gacha-presentation-camera--2 .gacha-presentation-camera__art {
  animation: gachaCameraTrackReverse 1480ms ease-in-out both;
}

/* 順番は セリフ → 1カメ → 2カメ → 引いて、もっかい拡大。

   だから最初の3拍では札を出さない。**flip も含めて**出さない -- 高レアの
   flip で札が出ていたので、カメラより先に何を引いたかが分かってしまい、
   そのあとの寄りが答え合わせにならなかった。

   名札もセリフの段階から伏せる。名前が出ていれば札と同じことになる。 */
.gacha-presentation-overlay[data-special="true"][data-phase="flip"] .gacha-presentation-card--featured,
.gacha-presentation-overlay[data-special-phase="special-voice"] .gacha-presentation-card--featured,
.gacha-presentation-overlay[data-special-phase="special-intro"] .gacha-presentation-card--featured,
.gacha-presentation-overlay[data-special-phase="special-focus"] .gacha-presentation-card--featured,
.gacha-presentation-overlay[data-special="true"][data-phase="flip"] .gacha-presentation-nameplate,
.gacha-presentation-overlay[data-special-phase="special-voice"] .gacha-presentation-nameplate,
.gacha-presentation-overlay[data-special-phase="special-intro"] .gacha-presentation-nameplate,
.gacha-presentation-overlay[data-special-phase="special-focus"] .gacha-presentation-nameplate,
.gacha-presentation-overlay[data-special-phase="special-intro"] .gacha-presentation-voice,
.gacha-presentation-overlay[data-special-phase="special-focus"] .gacha-presentation-voice {
  opacity: 0;
}

/* 決め。引いて、もっかい拡大。

   カメラは 2.35 倍まで寄っている。そこから札の全体まで一度引くから、
   最後の寄りが効く -- 引かずに寄ると、ただ大きいものがもっと大きくなる。 */
.gacha-presentation-overlay[data-special-phase="special-final"] .gacha-presentation-card--featured {
  animation: gachaHeroLandAndPush 2480ms cubic-bezier(.18, .74, .16, 1) both;
}

@keyframes gachaHeroLandAndPush {
  /* 引き。カメラの寄りから札の全体へ */
  0% { opacity: 0; transform: scale(.72); }
  14% { opacity: 1; transform: scale(1); }
  /* 見せたまま持つ */
  46% { transform: scale(1); }
  /* もっかい拡大。控えめなのは、下の名札を食わない幅までしか寄れないから
     -- 大きくすると名札が札の下に隠れる。 */
  72% { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1.05); }
}

@keyframes gachaLightBurst {
  0% { opacity: 0; transform: scale(.4); }
  30% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}

@keyframes gachaLightSpark {
  0% { opacity: 0; transform: scale(.7); }
  20% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}

@keyframes gachaCameraFade {
  0% { opacity: 0; transform: translateY(1.4815cqw); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 寄ったまま流す。倍率は据え置き（2.35）で、位置だけ動かす。 */
@keyframes gachaCameraTrackForward {
  0% { transform: scale(2.35) translate(-10%, 14%); }
  100% { transform: scale(2.35) translate(10%, 14%); }
}

@keyframes gachaCameraTrackReverse {
  0% { transform: scale(2.35) translate(10%, -14%); }
  100% { transform: scale(2.35) translate(-10%, -14%); }
}

@media (prefers-reduced-motion: reduce) {
  .gacha-presentation-lightfx__burst,
  .gacha-presentation-lightfx__sweep,
  .gacha-presentation-lightfx__spark,
  .gacha-presentation-camera,
  .gacha-presentation-camera__art {
    animation: none;
  }
}

/* dispatch-character-detail-and-filter §3: the top-of-screen ALL/SSR/SR/R
   strip is gone, along with the vertical row it used to claim in
   .collection-screen-layout below -- the list panel is now the layout's
   only row (matching 03-story/shell-and-tabs.css's .story-screen-layout,
   the sibling single-panel screen), and the strip's job moves to
   .collection-filter-dock (absolutely positioned, so it does not claim a
   layout row at all). */
/* dispatch-character-detail-and-filter §1: matches 06-formation/shell-and-
   header.css's own ".formation-screen .screen-shell__content" fix for the
   identical trap (documented there too) -- .screen-shell__content's *own*
   grid-template-rows is what actually decides whether freed vertical space
   reaches the card list or is silently swallowed as blank track space
   below it. The base rule (01-base/screen-shell.css) leaves rows implicit/
   auto-sized, so this screen's two direct children (header, the
   .collection-layout content wrapper below) would otherwise each size to
   their own content and leave the rest of the frame blank -- overriding
   .collection-screen-layout's own grid-template-rows alone (below) is not
   enough, since that wrapper is only ever as tall as *its own* container
   hands it. The trailing minmax(0, 1fr) lands on the content wrapper (the
   last child), which is what lets .collection-screen-layout's own 1fr row
   (and then .collection-list-panel/.collection-card-list below) actually
   stretch to fill the freed space instead of just hugging their own
   content height. min-height:0 hands scrolling to the card list itself.
   The content stays unclipped so calibrated filter controls can extend
   into the inner padding; the outer screen shell still clips the game. */
/* 行はひとつ。見出しを外した（collection-screen.mjs）ので、この段の子は
   一覧だけになった -- 絞り込みのつまみは絶対配置で行を取らない。`auto` を
   先頭に残したままだと一覧が 1 行目の auto に落ちて、**中身の高さぶんしか
   伸びなくなる**（3枚のとき枠が上に小さく縮んで出た）。 */
.collection-screen .screen-shell__content {
  grid-template-rows: minmax(0, 1fr);
  overflow: visible;
  min-height: 0;
}

/* 枠を広げる。

   .screen-shell__body の余白は 3.8889cqw / 13.7037cqw で書かれているが、
   **この要素自身が container なので、自分の宣言では自分の幅を使えない**。
   外に container が無いので cqw はビューポート幅に落ちる -- 1280px の窓では
   1cqw = 12.8px となり、余白が 49.8px / 175.4px になる。枠の幅は 398px なので、
   意図した 3.9% / 13.7% ではなく 12.5% / 44% を取っていた。中の cqw は枠基準
   （実測 1cqw = 2.97px）なので、**枠の縁だけが窓の大きさで太る**。

   ここは枠の幅（--screen-frame-inline）から直に出す。下は下のナビを避ける
   ぶん。ナビは保存された配置で置かれるので比率では追えず、実測（ナビの上端
   まで 92px）に合わせた 23.1% を使う。

   キャラ画面だけに閉じているのは、他の画面がいまの（太い）余白を前提に
   目で詰められているため。同じ直しは画面ごとに見ながら広げる。 */
.collection-screen > .screen-shell__body {
  /* 0.095 -> 0.055。5列が入りきらず横スクロールが出ていた（作り手の画面で
     確認）。下の余白は下のナビを避けるぶんなので、詰められるのは上と左右。 */
  --screen-shell-padding: calc(var(--screen-frame-inline) * var(--collection-frame-padding-ratio));
  --screen-shell-bottom-padding: calc(var(--screen-frame-inline) * var(--collection-frame-bottom-padding-ratio));
  background:
    linear-gradient(rgba(250, 247, 238, 0.16), rgba(250, 247, 238, 0.28)),
    url("/assets/ui-kits/pop-fantasy-v2/home/art/home-background.webp") center / cover no-repeat;
}

/* One continuous rim, matching home's outer frame. The neutral face keeps
   the collection legible without tall decorative side ornaments. */
.collection-screen .collection-list-panel {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: var(--pf-surface);
  box-shadow: inset 0 0 0 3px var(--pf-frame),
    inset 0 0 0 4px var(--pf-highlight), 0 0 0 1px var(--pf-shadow);
}

.collection-screen .collection-list-panel .collection-card-list {
  position: absolute;
  inset: clamp(8px, 1.4cqw, 14px);
  max-height: none;
  padding: 0;
}

/* dispatch-character-detail-and-filter §3: the top-of-screen ALL/SSR/SR/R
   strip is gone, along with the vertical row it used to claim in this
   grid -- the list panel is now the only row, and the strip's job moves to
   .collection-filter-dock (absolutely positioned, so it does not claim a
   layout row at all). */
.collection-screen-layout {
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}

/* dispatch-character-detail-and-filter §1: lets the freed vertical space
   (the .screen-shell__content override above) reach the actual card grid
   instead of stopping at collection-list-panel's own content-hugging
   height -- header stays its natural size, the card list flexes to fill
   the rest and scrolls internally if it still overflows. */
.collection-list-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.collection-list-panel .collection-card-list {
  flex: 1;
  min-height: 0;
}

/* Bottom-right "絞り込み" dock: a single icon+label button that opens a
   small choice panel above itself. Positioned against .screen-shell__
   content's own box (01-base/screen-shell.css -- position:relative, a
   definite height) rather than the viewport, so it stays pinned to the
   frame's corner instead of scrolling with the card list.
   Clearing the bottom nav takes an explicit real-px term, not just the
   shell's own --screen-shell-bottom-padding reservation: that reservation
   is a cqw (frame-width-relative) value, while the nav bar itself floors
   to a fixed real 66px (--canvas-nav-bar-min-height's fallback, 07-home/
   bottom-nav.css -- these four non-home screens never define that
   variable) plus its own ~1% real-height gap from the frame's bottom edge.
   On a narrow frame the cqw reservation resolves smaller than the nav's
   real footprint (measured live: 51px reserved vs. ~72px actually needed,
   a real overlap), so the max() below adds back the real-px shortfall
   whenever the cqw reservation alone would leave less than ~80px clear;
   on a wide frame the reservation already exceeds that and the plain
   1.4815cqw visual gap wins instead, unchanged from before. */
.collection-filter-dock {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  pointer-events: none;
  right: 1.4815cqw;
  bottom: max(1.4815cqw, calc(80px - var(--screen-shell-bottom-padding) + 1.4815cqw));
  z-index: 30;
}

.collection-filter-fab {
  pointer-events: auto;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 0.5556cqw;
  /* ui-style-spec-b.md §13: real 44px tap target, not just the cqw floor. */
  min-height: max(44px, 4.2593cqw);
  padding: 0.7407cqw 1.2963cqw;
  color: var(--ink);
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--elev-2);
  cursor: pointer;
  font-weight: 900;
}

.collection-filter-fab--active {
  /* Selected/open state (§7): a light accent tint, not a solid ink fill. */
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.collection-filter-fab__icon {
  width: max(16px, 1.8519cqw);
  height: max(16px, 1.8519cqw);
}

.collection-filter-fab__label {
  font-size: max(var(--screen-min-font-size), 1.2963cqw);
}

.collection-filter-panel {
  pointer-events: auto;
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.7407cqw);
  display: grid;
  gap: 0.463cqw;
  width: max(140px, 14.8148cqw);
  padding: 0.7407cqw;
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 1.4815cqw;
  background: var(--surface);
  box-shadow: var(--elev-2);
}

.collection-filter-panel__option {
  min-height: max(44px, 4.0741cqw);
  padding: 0.5556cqw 0.9259cqw;
  color: var(--ink);
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 1.1111cqw;
  background: var(--surface);
  cursor: pointer;
  font-weight: 800;
  text-align: left;
}

.collection-filter-panel__option--active {
  /* Selected state (§7): a light accent tint, not a solid ink fill --
     paired with the checked label/aria-checked (§13, not color-only). */
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.collection-filter-panel {
  width: min(290px, 78cqw);
  /* The dock spans the available content height, including the HUD inset. */
  bottom: calc(44 * var(--screen-frame-inline) / 375 + 8px);
  max-height: calc(100% - 44 * var(--screen-frame-inline) / 375 - 8px);
  box-sizing: border-box;
  overflow-y: auto;
  padding: 10px;
}
.collection-filter-rarities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.collection-filter-field { display: grid; gap: 4px; margin: 8px 0; font-size: 14px; }
.collection-filter-field select { width: 100%; min-height: 44px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; }
.collection-filter-fab__label { max-width: 65cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.collection-screen .collection-filter-fab__label {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

:is(.collection-screen, .formation-screen) .collection-filter-panel { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.collection-filter-panel__option { font-size: 14px; }

/* The owned-card box grid. Deliberately the same grid as formation's
   candidate grid (06-formation/bench.css's .formation-bench-list): a fixed
   5 columns against the 1080-logical-px screen width, so a card's icon is
   the same size whether the player is looking at it here or picking it for
   a party. auto-fill was letting the column count drift with whatever
   padding the surrounding panel happened to have, which is what left these
   icons rendering at roughly half the size of the identical icons one
   screen over. */
.collection-card-list {
  grid-template-columns: repeat(5, min(var(--party-grid-column), (100% - 4 * var(--party-grid-gap)) / 5));
  justify-content: center;
  gap: var(--party-grid-gap);
  /* dispatch-character-detail-and-filter §1: the 64cqw ceiling used to
     reserve room for the inline detail panel that always sat below this
     grid (collection-detail-panel, now removed) -- with that panel gone,
     .collection-list-panel's own row (.collection-screen-layout's
     minmax(0, 1fr), see shell-and-filter.css) is the only remaining
     height budget, so the cap is dropped in favor of it: same
     overflow:auto-fills-available-height idiom as the sibling single-panel
     screen's list (03-story/chapters-and-list.css's .story-chapter-list).
     Freed vertical space goes straight to more visible card rows. */
  max-height: 100%;
  /* 縦だけ。横に出す用は無く、縦の桟が出たぶん幅が減ると列がわずかに溢れて、
     使わない横スクロールバーが一本増えていた。 */
  overflow-y: auto;
  overflow-x: hidden;
  padding: max(1px, 0.1852cqw) 0.7407cqw 1.6667cqw max(1px, 0.1852cqw);
  /* dispatch-character-detail-and-filter §1: .collection-list-panel now
     hands this grid a definite, often-tall height (flex:1, shell-and-
     filter.css) so more rows fit before scrolling -- but a CSS grid's
     implicit row tracks default to align-content:normal, which behaves as
     stretch and evenly grows every row (even a single one) to fill that
     whole height. Live-measured: with only 3 owned cards (one row), tiles
     stretched to ~480px tall instead of their intended ~120px. start
     keeps each row at its own natural content height and lets any leftover
     space sit below the last row instead of distorting every card. */
  align-content: start;
  /* 行の高さは決め打ちにする。

     列が 1fr のままだと「行の高さ ← 札の高さ ← 札の幅 ← 列の幅 ← 行の高さ」
     と回ってしまい、ブラウザは行を決めるとき比率を数に入れない。実測
     （枠398px・68枚）で札 88.6px に対して行 46.4px、32px ぶん下の行に
     食い込んでいた。列幅が決まっているいまも、行は自分で持つ。 */
  grid-auto-rows: max(44px, var(--party-grid-column));
  scrollbar-width: thin;
}

/* Matches 06-formation/responsive.css's own narrow-screen gap bump for
   .formation-bench-list, kept here rather than added to that file so the
   collection grid does not depend on a formation-scoped container rule. */
/* The tile is now nothing but a hit target and a positioning context: the
   attribute-framed icon inside it (attribute-card-icon.mjs) supplies the
   whole visual -- square frame, radius, rarity chip and attribute badge.
   Same shape as .formation-bench-card, minus the drag affordances the
   candidate grid needs.

   Scoped to the list on purpose. This tile is a <button> sitting inside a
   .screen-panel, so 01-base/screen-actions.css's `.screen-panel button`
   dresses it as a pill control -- padding, hairline border, 999px radius,
   surface fill, shadow -- and that selector (0,1,1) outweighs a bare
   .collection-card-tile (0,1,0) no matter which file comes last in the
   build. Live-measured, its padding alone was eating ~15px of every 56px
   cell and leaving the icon at two thirds of its intended size. The extra
   class here wins the cascade and hands the icon the whole cell. Formation's
   candidates never hit this because they are <article> elements, not
   buttons. The one declaration deliberately left inherited is min-height
   (--game-button-min-height's real-44px floor): the square icon is already
   larger than that, so it costs nothing and stays a floor if a narrower
   frame ever shrinks the cell. */
/* 枠の高さは枠自身が決める。

   中の絵は width: 100% と aspect-ratio: 1/1 で正方形になる。ところが幅が
   百分率なので、行の高さを決めるときに**その正方形は数えられない** -- 行は
   ボタンが継いだ min-height（実寸44px）だけを頼りに 44px になり、48px の
   絵がそこからはみ出して、下の行の札に重なっていた。枚数が増えて縦スクロール
   が出た瞬間に列幅が縮み、幅と min-height の差が開いて表に出る。

   枠そのものに比率を持たせれば、行は枠の幅から高さを出せる。min-height は
   下限として残す（狭い画面でタップ領域が44pxを割らないため）。 */
.collection-card-list .collection-card-tile {
  position: relative;
  display: grid;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  box-shadow: none;
  cursor: pointer;
}

/* 絵は**行の高さから**正方形を作る。幅から作ると（width: 100% +
   aspect-ratio）行より高くなり得て、それが重なりの正体だった。 */
.collection-card-list .collection-card-tile .attribute-card-icon {
  width: auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  justify-self: center;
}

.collection-card-list .collection-card-tile:focus-visible {
  outline: max(1px, 0.2778cqw) solid var(--accent);
  outline-offset: 0.3704cqw;
}

/* Collection's own placeholder tone (formation-member-art.mjs's gradient is
   formation-specific; collection has no per-card art source yet), scoped
   here so the generic attribute-card-icon component (02-shared) stays
   decoration-agnostic. */
.collection-card-tile .attribute-card-icon__art {
  background: color-mix(in srgb, var(--ink) 14%, var(--paper));
}

/* A portrait rim, never an attribute badge. Keep the shared jewels/flags
   above this image and preserve the square hit target and grid geometry. */
.collection-card-list .attribute-card-icon {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.collection-card-list .attribute-card-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/collection-v1/character-frame.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}
.collection-card-list .attribute-card-icon__art {
  inset: 2.5%;
  border-radius: 0;
  clip-path: polygon(3% 0, 97% 0, 100% 3%, 100% 97%, 97% 100%, 3% 100%, 0 97%, 0 3%);
}

.formation-screen .screen-shell__content {
  /* Overview or picker: the second row owns the remaining height. */
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1.2963cqw;
  min-height: 0;
  overflow: hidden;
}

/* 背景の絵に薄い紙色を重ねて、上に載る文字を読める明るさにする。色は
   --paper から作る -- ここだけ紙の色を直に書いていると、テーマを足したときに
   この一枚だけ前のテーマの色で曇る。 */
.formation-screen .screen-shell__body {
  height: var(--screen-frame-block);
  --screen-shell-padding: calc(var(--screen-frame-inline) * var(--collection-frame-padding-ratio));
  --screen-shell-bottom-padding: calc(var(--screen-frame-inline) * var(--collection-frame-bottom-padding-ratio));
  background:
    linear-gradient(
      color-mix(in srgb, var(--paper) 22%, transparent),
      color-mix(in srgb, var(--paper) 38%, transparent)
    ),
    url("/assets/ui-kits/pop-fantasy-v2/home/art/home-background.webp") center / cover no-repeat;
}

.formation-screen .screen-shell__body[data-ui-orientation="portrait"] .formation-slots {
  align-self: start;
}

.formation-screen .screen-shell__content:has(> .creator-tutorial-coach) {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.formation-screen .screen-shell__content {
  padding-top: max(2px, .1852cqw);
}


/* おすすめ・全解除だけが並ぶ段。 */
.formation-actions {
  gap: 0.9259cqw;
  flex-wrap: nowrap;
}

.formation-actions .screen-action {
  /* dispatch-tap-target-completion: this selector (.formation-actions
     .screen-action, two classes) out-specifies the shared floor in
     01-base/screen-actions.css (.screen-actions button, one class + one
     type), so the plain 3.7037cqw here rendered at 24.9 real px on a
     375px-wide frame instead of the intended 44px floor. max(44px, ...)
     matches the same fix already applied to the per-slot actions
     (.formation-slot-card .screen-action, 06-formation/slots.css). */
  min-height: max(44px, 3.7037cqw);
  padding: 0.7407cqw 1.4815cqw;
  font-size: max(var(--screen-min-font-size), 1.2741cqw);
}

.formation-slots {
  position: sticky;
  top: 0;
  z-index: 2;
  min-width: 0;
  padding-bottom: 0.7407cqw;
}

.formation-bench {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* 5枚は、キャラの札と**同じ幅・同じ間隔**で並べる（--party-grid-* は
   01-base/tokens.css）。同じ絵が画面によって違う大きさで出ると、見比べる
   たびに目が測り直すことになる。

   以前はここを gap: 0 で詰めて「一枚の帯」に見せていた。作り手の指しで
   離す方向へ変える -- 詰まっていると、隣の枠との境目が絵の切れ目に見える。
   min(...) の第2項は入る幅の上限で、狭い画面でも列がはみ出さないため。 */
.formation-slot-list {
  display: grid;
  grid-template-columns: repeat(5, min(var(--party-grid-column), (100% - 4 * var(--party-grid-gap)) / 5));
  justify-content: center;
  gap: var(--party-grid-gap);
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}

.formation-slot-card {
  position: relative;
  display: grid;
  /* 絵 / 装備 / 成績 の3段。装備は絶対配置の帯で成績の上に重なっていて、
     実測（枠51.6px）で 33px ぶん食い込んでいた。段に入れれば重ならない。 */
  grid-template-rows: auto auto auto;
  gap: 0;
  align-content: stretch;
  min-width: 0;
  /* 横の余白は取らない。絵の幅を枠の幅に合わせる -- 3% 内側に置くと、
     絵が枠より一回り細く見えて締まらない。縦（下の成績欄ぶん）は残す。

     絵は aspect-ratio: 0.28 で高さを出すので、幅が 6% 広がれば枠も
     そのぶん背が伸びる。枠が大きくなるのはこの副作用。 */
  /* Art, equipment and stats remain independent content layers, while one
     authored overlay now supplies the uninterrupted outer silhouette. */
  isolation: isolate;
  padding: 0;
  background: #fff4dc;
}

.formation-slot-card::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/cohesive-fixes-v2/formation-card-frame.webp") center / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
}

.formation-slot-card--filled {
  cursor: pointer;
}

.formation-slot-card--filled:focus-visible {
  outline: max(1px, 0.2778cqw) solid var(--accent);
  outline-offset: 0.3704cqw;
}

/* Selected state (§7/§10): matches .formation-bench-card--selected below --
   a light accent ring around whichever slot card is currently shown in the
   detail pane, layered on top of (not replacing) the --ink filled-art
   border/drop-target accent above. */
.formation-slot-card--selected .formation-slot-card__art {
  box-shadow: inset 0 0 0 max(2px, 0.2778cqw) var(--accent);
}

.formation-slot-card__art {
  position: relative;
  /* Taller than the old 1/1.36. With the gap gone, the five cards share the
     full strip width, so a portrait ratio this deep is what actually makes
     each card bigger rather than just narrower. The value now lives in
     01-base/tokens.css so the battle strip and the result screen draw the
     same card at the same proportion. */
  /* 0.28 -> 0.38。装備を正方形（枠の幅ぶんの高さ）で置くので、そのぶん絵を
     削る。削らないと枠が 51.6px 幅に対して 282px 高になり、縦長すぎる。
     実測: 絵 184.3 -> 135.8、枠 230.5 -> ほぼ据え置き。 */
  aspect-ratio: var(--formation-slot-art-aspect);
  grid-row: 1;
  overflow: hidden;
  border-radius: 4% 4% 1% 1%;
  background: var(--surface);
}

.formation-slot-card:not(.formation-slot-card--filled) .formation-slot-card__art {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: inset 0 0 0 max(1px, 0.1852cqw) rgba(180, 139, 55, 0.35);
}

.formation-slots + .formation-bench {
  padding-top: 2.4cqw;
}

.formation-slot-card--filled .formation-slot-card__art {
  background:
    linear-gradient(180deg, transparent 0 58%, rgba(32, 38, 58, 0.72) 100%),
    linear-gradient(150deg, var(--formation-art-a, var(--ink)), var(--ink));
  box-shadow: var(--elev-1);
}

/* Drop target and selection both draw with inset shadow now that the art has
   no border of its own to recolor -- an outset ring would be clipped by the
   strip's overflow:hidden. */
.formation-slot-card--drop-target .formation-slot-card__art {
  box-shadow: inset 0 0 0 max(2px, 0.2778cqw) var(--accent);
}

.formation-slot-card__index {
  /* Overlay chip on card art (§7 exception territory): stays a dark
     translucent pill with light text so it reads over both the empty
     --surface art slot and the filled --ink-based art placeholder,
     matching the same overlay-index pattern used on the battle party
     strip and collection detail plate. */
  position: absolute;
  top: 0.7407cqw;
  left: 0.7407cqw;
  display: grid;
  width: 3.3333cqw;
  height: 2.5926cqw;
  place-items: center;
  color: #fff;
  border-radius: 999px;
  background: rgba(32, 38, 58, 0.78);
  font-size: var(--screen-caption-font-size);
  font-weight: 900;
}

.formation-slot-card__name {
  position: absolute;
  right: 3.1481cqw;
  bottom: 0.7407cqw;
  left: 0.7407cqw;
  overflow: hidden;
  color: #fff;
  font-size: var(--screen-caption-font-size);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formation-slot-card__rarity {
  position: absolute;
  z-index: 5;
  top: -1%;
  left: 3%;
  width: 34%;
  aspect-ratio: 1 / 1;
  color: #fff;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--screen-caption-font-size);
  font-weight: 900;
  line-height: 1.4;
}

.formation-slot-card__attribute.attribute-card-icon__badge {
  z-index: 5;
  right: 4%;
  bottom: -3%;
  width: 34%;
}

/* Per-card stats (formation-screen.mjs's renderSlotStats): a second band
   running under the art inside the same strip, so the party reads as one
   block of art over one block of numbers rather than five separate cards.
   Continues the seam treatment -- the divider between two cards' stats is
   the same hairline as the divider between their art, drawn by the card
   rule above, so the two bands line up. */
.formation-slot-card__stats {
  grid-row: 3;
  display: grid;
  /* HP と 攻 を横に並べる。二段組にしたぶん一つが縦に伸びるので、縦に積むと
     枠の絵を押し下げる。 */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.0926cqw;
  margin-top: 0;
  padding: 8% 6%;
  background: #fff4dc;
}

/* 見出しの上に数値、左揃えの二段組。
   横一列で中央に寄せていた頃は、HP と 攻 で桁数が違うぶん数字の頭がずれて、
   3枠並べると縦のラインがどこにも通っていなかった。左で揃えれば、桁が違っても
   読み始めの位置は同じになる。
   Stacking the label over the number also lets the number take the full width
   of the cell, which is what four-digit HP needs. */
.formation-slot-card__stat {
  display: flex;
  gap: max(1px, 0.25cqw);
  align-items: center;
  min-width: 0;
  text-align: left;
}

.formation-slot-card__stat-icon {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-width: 0;
  max-width: 16px;
  max-height: 16px;
  object-fit: contain;
}

/* Keep readable labels and numbers within narrow five-column party cards. */
@container (max-width: 620px) {
  .formation-screen .formation-slot-card__stats {
    padding: 8% 4%;
  }

  .formation-screen .formation-slot-card__stat {
    grid-template-columns: minmax(0, 1fr);
  }
}

.formation-slot-card__stat-label {
  color: var(--ink-soft);
  font-size: var(--screen-min-font-size);
  font-weight: 800;
}

.formation-slot-card__stat-value {
  /* Keep every digit visible, including when calibration enlarges text. */
  flex-shrink: 0;
  min-width: max-content;
  overflow: visible;
  color: var(--ink);
  font-size: var(--screen-min-font-size);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Corner "解除" mark (action-icons.mjs's dismiss). Small on purpose -- the
   glyph is ~24px real while padding carries the hit area to the §13 floor of
   44px, so the control stays a mark on the art instead of a button covering
   it. Dark translucent disc for the same reason the index chip is one: it
   has to stay legible over both the empty --surface slot and any card art an
   author registers. */
.formation-slot-card__unassign {
  position: absolute;
  top: 0.3704cqw;
  right: 0.3704cqw;
  z-index: 5;
  display: grid;
  min-width: 44px;
  min-height: 44px;
  padding: max(10px, 1.1111cqw);
  place-items: center;
  color: #fff;
  border: 0;
  background: none;
  cursor: pointer;
}

/* A bare cross in the theme's ink, no ring: small but readable over card art
   because a surface-coloured halo separates it from the picture. The 44px tap
   area stays on the button. */
.formation-slot-card__unassign svg {
  width: 100%;
  height: 100%;
  max-width: max(16px, 1.6cqw);
  max-height: max(16px, 1.6cqw);
  border-radius: 0;
  visibility: visible;
  color: var(--pf-outline); background: none;
  padding: 0; box-sizing: border-box;
  box-shadow: none;
  filter: drop-shadow(1px 0 0 var(--pf-surface)) drop-shadow(-1px 0 0 var(--pf-surface)) drop-shadow(0 1px 0 var(--pf-surface)) drop-shadow(0 -1px 0 var(--pf-surface));
}

.formation-slot-card__unassign::after { content: none; }

/* Pop fantasy keeps the cross it had before the theme art sets: frame gold
   with a dark underline instead of the halo. */
[data-ui-theme-kit="fantasy"] .formation-slot-card__unassign svg {
  color: var(--pf-frame);
  filter: drop-shadow(0 1px 0 var(--pf-outline));
}

.formation-slot-card__unassign:focus-visible {
  outline: max(1px, 0.2778cqw) solid var(--accent);
  outline-offset: -0.3704cqw;
}

/* Stat shelf under the party strip (formation-screen.mjs's
   createPartyStatsRow). One surface panel spanning the strip's full width,
   four evenly divided cells with hairline dividers -- the same "one block"
   treatment as the strip above it, so the two read as a single party
   header. */
.formation-party-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0.7407cqw;
  overflow: hidden;
  border: max(1px, 0.0926cqw) solid var(--line);
  border-radius: 1.1111cqw;
  background: var(--surface);
  box-shadow: var(--elev-1);
}

.formation-party-stat {
  display: grid;
  gap: 0.1852cqw;
  justify-items: center;
  padding: 0.7407cqw 0.3704cqw;
}

.formation-party-stat + .formation-party-stat {
  border-left: max(1px, 0.0926cqw) solid var(--line);
}

.formation-party-stat__label {
  color: var(--ink-soft);
  font-size: var(--screen-caption-font-size);
  font-weight: 800;
}

.formation-party-stat__value {
  color: var(--ink);
  font-size: max(15px, 2.2222cqw);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* 装備の印。編成の枠の角に、着けているものを小さく出す。
   枠そのものはタップ/長押しの的なので、印は独立したボタンとして重ねる
   （解除ボタンと同じ作り）。44pxのタップ下限は padding で確保する。 */
.formation-slot-card__equipment {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: max(44px, 8cqw);
  min-height: max(44px, 8cqw);
  padding: 0.6cqw;
  color: var(--ink);
  border: 0;
  background: none;
  cursor: pointer;
  font-size: max(var(--screen-min-font-size), 2.4cqw);
  font-weight: 900;
}



/* 絵のある装備は、枠の下辺いっぱいの帯。FGOの編成画面と同じ形で、礼装は
   カードの下に敷かれていて隅のアイコンではない。押す場所も帯そのものになる。 */
/* 装備は段の中の正方形。キャラの札と同じ形にそろえる -- 帯だと、そこが
   「一枚の絵の置き場」だと読めない。絶対配置をやめるので、成績とも重ならない。 */
.formation-slot-card__equipment--art {
  position: relative;
  grid-row: 2;
  aspect-ratio: 1 / 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff4dc;
  box-shadow: none;
}

.formation-slot-card__equipment-art {
  position: absolute;
  inset: 4%;
  display: block;
  width: 92%;
  box-sizing: border-box;
  /* 正方形の枠いっぱい。高さは枠が持つので、ここは追従するだけ。 */
  height: 92%;
  border: 0;
  clip-path: polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);
  object-fit: cover;
  object-position: center;
}

/* 何も着けていないときの帯。高さは同じままにして、枠の並びが動かないように
   する。空であることは、絵ではなく薄い面で示す。 */
.formation-slot-card__equipment-art--empty {
  background: color-mix(in srgb, var(--paper) 85%, transparent);
}

/* 印はもう使わない（帯を常に出すので）。残しておくと、次に触る人が
   「どちらの見た目もある」と読む。 */

/* Review 2026-10-03: the authored calibration moved the cross only in the
   front slot; every slot uses the same offset so the marks line up. */
:is(.formation-screen, .sortie-screen) .formation-slot-card__unassign > svg { translate: 37.070854521668366% -38.12012520149993%; }
:is(.formation-screen, .sortie-screen) .formation-slot-card:not([data-slot-key="front"]) > .formation-slot-card__unassign > svg { width: calc(14.46 * var(--formation-px, 1px)); height: calc(14.46 * var(--formation-px, 1px)); }

/* dispatch-formation-and-attributes §3: the "候補グリッド" -- every owned
   card as a compact attribute-framed icon, 5 columns per row against the
   1080-logical-px screen width (grammar reference: Monster Strike /
   Phantom Parade icon grids, not their exact look -- see
   docs/research/gameui-catalog/README.md's 参照の作法). dispatch-nav-
   restructure #4: the inline detail pane this grid used to report taps to
   is gone -- tapping an icon now assigns it to the next open slot
   directly, and the vertical space the pane used to take goes back to
   this grid (more rows fit). Dragging an icon onto a party slot still
   assigns directly, unchanged. */

/* 候補も隊列と同じ並び（--party-grid-*）。同じ絵が上下で違う大きさに
   なると、どれを入れるか見比べるときに測り直しが要る。 */
.formation-bench-list {
  display: grid;
  grid-template-columns: repeat(5, min(var(--party-grid-column), (100% - 4 * var(--party-grid-gap)) / 5));
  justify-content: center;
  grid-auto-rows: max(44px, var(--party-grid-column));
  gap: var(--party-grid-gap);
  max-height: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: max(1px, 0.1852cqw) 0.7407cqw 1.6667cqw max(1px, 0.1852cqw);
  scrollbar-width: thin;
}

.formation-bench-card {
  position: relative;
  display: grid;
  min-width: 0;
  border-radius: var(--radius-md);
  cursor: grab;
}

.formation-bench-card:active,
.formation-bench-card--dragging {
  cursor: grabbing;
}

.formation-bench-card:focus-visible {
  outline: max(1px, 0.2778cqw) solid var(--accent);
  outline-offset: 0.3704cqw;
}

/* Selected state (§7/§10): a light accent ring around the current
   selection focus (formation-screen.mjs's resolvedSelectedMemberId),
   without touching the attribute-colored icon frame itself. Rarely visible
   on a candidate now that tapping assigns it away from this grid
   immediately -- it mainly shows on whichever candidate the initial
   default selection lands on before any tap (dispatch-nav-restructure #4
   removed the inline pane this used to report to). */
.formation-bench-card--selected {
  outline: max(2px, 0.2778cqw) solid var(--accent);
  outline-offset: 0.1852cqw;
}

/* Formation's own gradient-placeholder art (formation-member-art.mjs),
   scoped here so the generic attribute-card-icon component (02-shared)
   stays decoration-agnostic. */
.formation-bench-card .attribute-card-icon__art {
  background: linear-gradient(150deg, var(--formation-art-a, var(--ink)), var(--ink));
}

.formation-detail-screen .screen-shell__body {
  height: var(--screen-frame-block);
  padding: var(--screen-shell-padding);
}

.formation-detail-content {
  display: grid;
  height: 100%;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 1.6667cqw;
  min-height: 0;
  overflow: hidden;
}

.formation-detail-back {
  justify-self: start;
  /* dispatch-close-known-holes #3: the plain 4.2593cqw floor measured 39px
     real on the narrow reference frame (ui-style-spec-b.md §13 requires a
     real 44px tap target) -- this screen's full-screen sweep never opened
     this detail screen, so it was left behind when every other screen's
     buttons picked up the max(44px, Ncqw) floor (see 01-base/screen-
     shell.css's --game-button-min-height). Same fix here: the cqw term is
     unchanged so the button still grows past 44px on a wide frame, padding
     stays as-is so the visible size does not change on a normal frame. */
  min-height: max(44px, 4.2593cqw);
  padding: 0.9259cqw 2.2222cqw;
  color: var(--ink);
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--elev-1);
  cursor: pointer;
  font-weight: 900;
}

.formation-detail-screen > .formation-detail-shell {
  background:
    linear-gradient(rgba(250, 247, 238, 0.12), rgba(250, 247, 238, 0.24)),
    url("/assets/ui-kits/pop-fantasy-v2/home/art/home-background.webp") center / cover no-repeat;
}

.formation-detail-screen .formation-detail-back {
  width: 25cqw;
  min-height: max(44px, 8cqw);
  padding: 1.4cqw 4cqw 1.4cqw 8cqw;
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/common/back-button.webp") center / 100% 100% no-repeat;
  box-shadow: none;
  font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: max(var(--screen-min-font-size), 2.6cqw);
}

.formation-detail-card {
  display: grid;
  justify-items: center;
  gap: 1.4815cqw;
  min-height: 0;
  color: var(--ink);
}

/* dispatch-battle-detail-frame-and-legacy-parity §1: this wrapper only
   positions/sizes the shared attribute-card-icon now living inside it --
   the frame/radius/border/badge all come from attribute-card-icon.css
   (02-shared), same split as 05-collection/detail-card.css's
   .collection-detail-card__art. */
.formation-detail-card__art {
  position: relative;
  width: 52%;
  min-height: 0;
}

/* Formation's own gradient-placeholder art (formation-member-art.mjs),
   scoped here so the generic attribute-card-icon component (02-shared)
   stays decoration-agnostic -- same convention as bench.css. */
.formation-detail-card__art .attribute-card-icon__art {
  background: linear-gradient(150deg, var(--formation-art-a, var(--ink)), var(--ink));
}

.formation-detail-card__identity {
  display: grid;
  gap: 0.7407cqw;
  width: 100%;
  padding: 2.0370cqw 2.2222cqw;
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 2.0370cqw;
  background: var(--surface);
}

.formation-detail-card__rarity,
.formation-detail-card__meta,
.formation-detail-card__quote {
  margin: 0;
}

.formation-detail-card__rarity {
  color: var(--accent);
  font-size: max(var(--screen-min-font-size), 1.3333cqw);
  font-weight: 900;
}

.formation-detail-card__name {
  margin: 0;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 3.8519cqw);
  line-height: 1.05;
}

.formation-detail-card__meta {
  color: var(--ink-soft);
  font-weight: 800;
}

.formation-detail-card__quote {
  color: var(--ink-soft);
  font-weight: 800;
  line-height: 1.55;
}

/* dispatch-formation-longpress-detail §1: assign/unassign status line +
   actions, added to the identity block so the full-screen detail (opened
   by long-press) can complete the operation without returning to the
   formation screen's inline pane. */
/* キャラのセリフ。
   Anchored to the bottom of the artwork so it reads as the character
   speaking, rather than as another status line under the buttons. Only
   present right after they were given something. */
.formation-detail-card__speech {
  position: absolute;
  right: -2cqw;
  bottom: -1.4cqw;
  left: -2cqw;
  z-index: 2;
  margin: 0;
  padding: 1.4cqw 1.8cqw;
  color: var(--ink);
  border: max(1px, 0.2222cqw) solid var(--line);
  border-radius: 2.2222cqw;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: var(--elev-1);
  font-size: max(var(--screen-min-font-size), 2.9cqw);
  font-weight: 700;
  line-height: 1.5;
}

.formation-detail-screen .formation-detail-card__identity {
  gap: 1.2cqw;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.formation-detail-screen .formation-detail-card__name {
  width: 100%;
  min-height: 0;
  aspect-ratio: 6.7 / 1;
  padding: 1.2cqw 5cqw;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/cohesive-fixes-v2/character-nameplate.webp") center / 100% 100% no-repeat;
}

.formation-detail-screen .formation-detail-card__name,
.formation-detail-screen .formation-detail-card__meta {
  font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.formation-detail-screen .formation-detail-card__speech {
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/common/panel-teal-simple.webp") center / 100% 100% no-repeat;
  box-shadow: none;
}

/* 絵の上の旗と属性の印は伏せる。同じものを名前の行へ移したので、二か所で
   同じことを言うことになる。要素は残す -- 枠の色と読み上げがその中から来る。 */
.formation-detail-card__art .attribute-card-icon__rarity,
.formation-detail-card__art .attribute-card-icon__badge {
  display: none;
}

/* 名前の行。旗・属性の印・名前を横一列に。 */
.formation-detail-card__name {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  min-width: 0;
}

/* 印は名前の行に並ぶが、中の画像は inset: 0 の絶対配置。static にすると
   画像が親を見失って、位置の付いた祖先いっぱいに広がる（画面いっぱいの旗が
   出た）。relative で自分を基準にする。 */
.formation-detail-card__name .pop-fantasy-rarity-flag,
.formation-detail-card__name .attribute-card-icon__badge {
  position: relative;
  flex: 0 0 auto;
  width: 5.6cqw;
  height: 5.6cqw;
  min-width: 0;
  min-height: 0;
  inset: auto;
  transform: none;
}

.formation-detail-card__name .pop-fantasy-rarity-flag__image,
.formation-detail-card__name .attribute-card-icon__jewel-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.formation-detail-card__name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formation-detail-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7407cqw;
  min-height: 5cqw;
}

.formation-detail-tab {
  min-width: 0;
  /* dispatch-close-known-holes #3: the plain 4.6296cqw floor measured 26px
     real on the narrow reference frame (ui-style-spec-b.md §13's real 44px
     floor) -- same missed-by-the-sweep gap as .formation-detail-back right
     above in detail-shell.css. max(44px, Ncqw) keeps the cqw growth term
     for wide frames and the existing padding, so the tab's visible size on
     a normal frame is unchanged. */
  min-height: max(44px, 4.6296cqw);
  padding: 0.7407cqw 0.9259cqw;
  color: var(--ink-soft);
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  font-size: max(var(--screen-min-font-size), 1.2148cqw);
  font-weight: 900;
}

.formation-detail-screen .formation-detail-tab[data-detail-tab="profile"] {
  white-space: nowrap;
  font-size: clamp(11px, 3.7cqw, 13px);
}

.formation-detail-tab--active {
  /* Selected state (§7): a light accent tint, not a solid ink fill. */
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: var(--accent);
}

.formation-detail-tab-panel {
  min-height: 0;
  padding: 1.8519cqw;
  overflow: auto;
  color: var(--ink);
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 2.0370cqw;
  background: var(--surface);
  scrollbar-width: thin;
}

.formation-detail-tab-panel__title {
  margin: 0 0 0.9259cqw;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2cqw);
}

.formation-detail-tab-panel__text {
  margin: 0 0 1.4815cqw;
  color: var(--ink-soft);
  font-weight: 800;
}

.formation-detail-screen .formation-detail-tab {
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/common/secondary-button-pill.webp") center / 100% 100% no-repeat;
  box-shadow: none;
}

.formation-detail-screen .formation-detail-tab--active {
  color: #fff;
  background-image: url("/assets/ui-kits/pop-fantasy-v2/screens/common/primary-button-pill.webp");
}

.formation-detail-screen .formation-detail-tab-panel {
  --detail-panel-image: url("/assets/ui-kits/pop-fantasy-v2/screens/character-detail/status-panel.webp");
  --ui-scrollbar-size: max(14px, 1.8cqw);
  --ui-scrollbar-thumb: #357d7d;
  --ui-scrollbar-track: #fff4dc;

  padding: 2.2cqw 2.8cqw;
  border: max(16px, 2.6cqw) solid transparent;
  border-image: var(--detail-panel-image) 72 fill / max(16px, 2.6cqw) / 0 stretch;
  border-radius: 0;
  background: #fff4dc;
  scrollbar-width: auto;
}

.formation-detail-screen .formation-detail-tab-panel[data-detail-panel="status"] {
  --detail-panel-image: url("/assets/ui-kits/pop-fantasy-v2/screens/character-detail/status-panel.webp");
}

/* Chromium uses the image skin; other engines keep the teal/cream native fallback. */
@supports selector(::-webkit-scrollbar) {
  .formation-detail-screen .formation-detail-tab-panel.ui-scrollbar {
    scrollbar-color: auto;
  }
}

.formation-detail-screen .formation-detail-tab-panel[data-detail-panel="growth"] {
  --detail-panel-image: url("/assets/ui-kits/pop-fantasy-v2/screens/character-detail/growth-panel.webp");
}

.formation-detail-screen .formation-detail-tab-panel[data-detail-panel="profile"] {
  --detail-panel-image: url("/assets/ui-kits/pop-fantasy-v2/screens/character-detail/profile-panel.webp");
}

.formation-detail-screen .formation-detail-tab-panel::-webkit-scrollbar-track {
  border: 0;
  border-radius: 0;
  background: transparent url("/assets/ui-kits/pop-fantasy-v2/screens/character-detail/scroll-track.webp") center / 100% 100% no-repeat;
}

.formation-detail-screen .formation-detail-tab-panel::-webkit-scrollbar-thumb,
.formation-detail-screen .formation-detail-tab-panel::-webkit-scrollbar-thumb:hover {
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent url("/assets/ui-kits/pop-fantasy-v2/screens/character-detail/scroll-thumb.webp") center / 100% 100% no-repeat;
}

.formation-detail-stat-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9259cqw 1.4815cqw;
  margin: 0;
}

.formation-detail-stat-grid dt,
.formation-detail-stat-grid dd {
  margin: 0;
  font-weight: 900;
}

.formation-detail-stat-grid dt {
  color: var(--ink-muted);
}

.formation-detail-stat-grid dd {
  color: var(--ink);
}

.formation-detail-voice-list,
.formation-detail-story-list {
  display: grid;
  gap: 0.7407cqw;
}

.formation-detail-voice-item {
  display: grid;
  gap: 0.3704cqw;
  padding: 0.9259cqw 1.1111cqw;
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 1.1111cqw;
  background: var(--paper);
}

.formation-detail-voice-label {
  color: var(--ink-muted);
  font-size: max(var(--screen-min-font-size), 1.1556cqw);
  font-weight: 900;
}

.formation-detail-voice-text {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.5;
}

.formation-detail-story-list {
  margin-top: 1.4815cqw;
  padding-top: 1.2963cqw;
  border-top: max(1px, 0.1852cqw) solid var(--line);
}

.formation-detail-story-list__title,
.formation-detail-story-empty,
.formation-detail-story-item {
  margin: 0;
}

.formation-detail-story-list__title {
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 1.4815cqw);
}

.formation-detail-story-empty {
  color: var(--ink-soft);
  font-weight: 800;
}

/* dispatch-battle-detail-frame-and-legacy-parity §2/§3: locked entries stay
   a plain non-interactive row (§10: a blocked state shows its reason, not a
   silent no-op button). */
.formation-detail-story-item--locked {
  color: var(--ink-soft);
  font-weight: 800;
}

/* Unlocked entries are now real navigation -- a tappable row (§13: min 44px
   tap target), not just descriptive text. */
.formation-detail-story-item--open {
  display: block;
  width: 100%;
  min-height: max(44px, 3.8889cqw);
  padding: 0.7407cqw 1.1111cqw;
  color: var(--ink);
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 1.1111cqw;
  background: var(--paper);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-align: left;
}

/* dispatch-battle-detail-frame-and-legacy-parity §2/§3: 旧版の
   card-detail-gallery, rebuilt on the new version's own variant-image data
   (cropImages/sdImages). Same card/row idiom as the story list above, not
   旧版's own CSS/colors. */
.formation-detail-gallery-list {
  margin-top: 1.4815cqw;
  padding-top: 1.2963cqw;
  border-top: max(1px, 0.1852cqw) solid var(--line);
}

.formation-detail-gallery-list__title,
.formation-detail-gallery-empty {
  margin: 0;
}

.formation-detail-gallery-list__title {
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 1.4815cqw);
}

.formation-detail-gallery-empty {
  margin-top: 0.7407cqw;
  color: var(--ink-soft);
  font-weight: 800;
}

.formation-detail-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.6667cqw, 1fr));
  gap: 0.9259cqw;
  margin: 0.9259cqw 0 0;
}

.formation-detail-gallery-item {
  display: grid;
  gap: 0.463cqw;
  margin: 0;
  padding: 0.463cqw;
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 1.1111cqw;
  background: var(--paper);
  text-align: center;
}

.formation-detail-gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0.7407cqw;
  object-fit: cover;
}

.formation-detail-gallery-item figcaption {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--screen-min-font-size);
  font-weight: 800;
}

.formation-detail-action-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9259cqw;
  margin-top: 1.4815cqw;
}

.formation-detail-action {
  /* ui-style-spec-b.md 13: the growth actions (強化 / 進化 / 突破) measured
     25.9px real, under the 44px tap floor. The bare cqw only reaches 44px
     on a much wider frame, so it needs the same max(44px, Ncqw) floor the
     rest of this screen's controls already carry. The cqw term is kept so
     the button still grows on a wide frame. */
  min-height: max(44px, 3.8889cqw);
  padding: 0.7407cqw 1.2963cqw;
  color: var(--ink);
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: max(var(--screen-min-font-size), 1.2148cqw);
  font-weight: 900;
}

.formation-detail-action:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

/* The dressing room (formation-card-detail-screen.mjs's createEquipmentPanel).
   What is worn now sits above everything the project has, because the first
   question is always "what does this card have on right now". */
.formation-detail-equipment {
  display: grid;
  gap: 1.4815cqw;
}

.formation-detail-equipment__current {
  display: grid;
  gap: 0.5556cqw;
  padding: 1.4815cqw;
  border: max(1px, 0.0926cqw) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.formation-detail-equipment__label {
  color: var(--ink-soft);
  font-size: var(--screen-min-font-size);
  font-weight: 900;
  letter-spacing: 0.14em;
}

.formation-detail-equipment__name {
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 1.6667cqw);
  font-weight: 900;
}

.formation-detail-equipment__bonus {
  margin: 0;
  color: var(--accent);
  font-size: max(var(--screen-min-font-size), 1.2963cqw);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.formation-detail-equipment__effect {
  margin: 0;
  color: var(--ink);
  font-size: var(--screen-min-font-size);
  font-weight: 800;
  line-height: 1.6;
}

/* The line the equipment is remembered by. Set apart from the mechanical
   text above it, because it is doing a different job. */
.formation-detail-equipment__flavor {
  margin: 0;
  padding-top: 0.7407cqw;
  border-top: max(1px, 0.0926cqw) solid var(--line);
  color: var(--ink-soft);
  font-size: var(--screen-min-font-size);
  font-style: italic;
  font-weight: 700;
  line-height: 1.7;
}

.formation-detail-equipment__empty {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 1.2963cqw);
  font-weight: 800;
}

.formation-detail-equipment__list {
  display: grid;
  gap: 0.7407cqw;
}

.formation-detail-equipment__item {
  display: grid;
  gap: 0.1852cqw;
  min-height: 44px;
  padding: 0.9259cqw 1.2963cqw;
  color: var(--ink);
  border: max(1px, 0.0926cqw) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  cursor: pointer;
  text-align: left;
}

/* The one already on is shown, not hidden, so the list stays the project's
   full set -- it simply cannot be picked again. */
.formation-detail-equipment__item--worn {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  cursor: default;
}

.formation-detail-equipment__item-name {
  font-size: max(var(--screen-min-font-size), 1.2963cqw);
  font-weight: 900;
}

.formation-detail-equipment__item-meta {
  color: var(--ink-soft);
  font-size: var(--screen-min-font-size);
  font-weight: 800;
}

/* スキルの一枠。見出し（通常/スキル/必殺技・名前・リキャスト）と、効果の行。 */
.formation-detail-skill {
  display: grid;
  gap: 0.6cqw;
  padding: 1.6cqw 0;
  border-top: 1px solid var(--line);
}

.formation-detail-skill__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2cqw;
  align-items: baseline;
}

.formation-detail-skill__kind {
  color: var(--accent);
  font-size: max(var(--screen-min-font-size), 2.2cqw);
  font-weight: 900;
}

.formation-detail-skill__name {
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.8cqw);
  font-weight: 900;
}

.formation-detail-skill__recast {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font-size: max(var(--screen-min-font-size), 2.1cqw);
  font-weight: 700;
}

.formation-detail-skill__text,
.formation-detail-skill__effect {
  margin: 0;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.2cqw);
  line-height: 1.5;
}

.formation-detail-skill__effect::before {
  content: "・";
}

/* リーダー時のみ効くパッシブ。効く条件が読めないと、常時効いていると読まれる。 */
.formation-detail-skill__leader {
  padding: 0.2cqw 0.8cqw;
  color: var(--on-accent);
  border-radius: 999px;
  background: var(--accent);
  font-size: max(var(--screen-min-font-size), 1.9cqw);
  font-weight: 900;
}

/* 未記入の枠。出すが、書かれた枠と同じ濃さでは並べない。 */
.formation-detail-skill[data-skill-empty="true"] {
  opacity: 0.62;
}

.formation-detail-skill__empty {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  font-size: max(var(--screen-min-font-size), 2.1cqw);
}

/* Landscape has one overview, then a dedicated candidate view on slot tap. */
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] { --screen-shell-padding: 12px; }
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .screen-shell__content {
  grid-template-rows: auto minmax(0, 1fr); gap: 8px; overflow: hidden;
}
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slots {
  position: relative; width: 100%; min-height: 0;
  height: calc(var(--screen-frame-block) - var(--screen-shell-bottom-padding) - 28px);
  max-height: 100%; aspect-ratio: auto; justify-self: center; align-self: center;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/formation-landscape-v1/panel.svg") center / 100% 100% no-repeat;
}
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-frame { display: block; background-image: url("/assets/ui-kits/pop-fantasy-v2/screens/formation-landscape-v1/rails.svg"); mask: none; }
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-list {
  position: absolute; inset: 4.613841524573721% 4% 3.4102306920762286% 4%; height: auto; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0;
}
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card {
  grid-template-rows: minmax(0,718fr) minmax(0,239fr) minmax(0,147fr); border: 0; border-radius: 0;
  background: transparent; cursor: pointer; overflow: visible;
}
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__art {
  aspect-ratio: auto; min-height: 0; background-position: center 25%;
}
.formation-slot-card__empty-prompt { position: absolute; inset: 0; display: grid; place-items: center; padding: 4px; color: var(--pf-primary, var(--ink)); font-size: clamp(10px,3cqw,16px); text-align: center; }
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__stats {
  height: 100%; grid-template-rows: repeat(2,minmax(0,1fr)); border: 0; font-size: 14px;
}
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__stat-value { font-size: clamp(10px,3.2cqw,24px); }
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__equipment--art { min-height: 0; height: 100%; border: 0; }
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__equipment-art { height: 100%; width: 100%; object-fit: contain; }
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__unassign { width: 44px; height: 44px; font-size: 20px; }
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-bench { overflow: hidden; padding: 0; }
.formation-picker-header { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; }

.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__unassign { top: 0; right: 0; left: auto; transform: none; display: grid; place-items: center; padding: 0; }
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__unassign svg { position: static; width: 20px; height: 20px; margin: 0; transform: none; translate: none; scale: none; }

/* Adopted wide frame; candidate view retains its own header and list rows. */
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .screen-shell__content:has(> .formation-slots) {
  grid-template-columns: 44px minmax(0,1fr); grid-template-rows: minmax(0,1fr); gap: 12px;
}
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-presets {
  width: 44px; justify-self: start; align-self: start; flex-direction: column; padding-top: 12px; gap: 8px;
}
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-presets .formation-preset {
  flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  max-width: 44px; max-height: 44px; aspect-ratio: 1; box-sizing: border-box;
  padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 18px; line-height: 1;
}

/* Keep different digit counts centered within their shared calibrated boxes. */
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__stat-value > [data-calibration-text] { text-align: center; }

/* 装備の詳細。編成の枠の装備アイコンから開く、装備そのものの画面。 */
.equipment-detail-screen .screen-shell__content {
  gap: 2cqw;
}

.equipment-detail__owner {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 64%, transparent);
  font-size: max(var(--screen-min-font-size), 2.4cqw);
  font-weight: 700;
}

.equipment-detail__empty,
.equipment-detail__message,
.equipment-detail-picker__empty {
  margin: 0;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.4cqw);
}

.equipment-detail-card {
  display: grid;
  gap: 1cqw;
  padding: 2.4cqw;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.equipment-detail-card__art {
  width: 100%;
  max-height: 46cqw;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.equipment-detail-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2cqw;
  align-items: baseline;
}

.equipment-detail-card__rarity {
  color: var(--accent);
  font-size: max(var(--screen-min-font-size), 2.2cqw);
  font-weight: 900;
}

.equipment-detail-card__name {
  font-size: max(var(--screen-min-font-size), 3.4cqw);
  font-weight: 900;
}

.equipment-detail-card__bonus,
.equipment-detail-card__effect {
  margin: 0;
  font-size: max(var(--screen-min-font-size), 2.4cqw);
  font-weight: 700;
}

/* フレーバーは最後。数値より下にあるが、集める理由はこちら。 */
.equipment-detail-card__flavor {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  font-size: max(var(--screen-min-font-size), 2.2cqw);
  line-height: 1.6;
}

.equipment-detail-picker__title {
  margin: 0;
  font-size: max(var(--screen-min-font-size), 2.6cqw);
  font-weight: 900;
}

.equipment-detail-picker__list {
  display: grid;
  gap: 1.2cqw;
  max-height: 60cqw;
  overflow-y: auto;
}

.equipment-detail-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4cqw 1.6cqw;
  align-items: center;
  padding: 1.6cqw;
  text-align: left;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

.equipment-detail-row--selected {
  border-color: var(--accent);
}

.equipment-detail-row__art {
  grid-row: span 2;
  width: max(44px, 10cqw);
  height: max(44px, 10cqw);
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.equipment-detail-row__name {
  font-size: max(var(--screen-min-font-size), 2.6cqw);
  font-weight: 900;
}

.equipment-detail-row__text {
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  font-size: max(var(--screen-min-font-size), 2.2cqw);
}

/* Equipment uses the same square-tile browsing rhythm as character cards. */
.equipment-art { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; min-width: 0; min-height: 0; background: var(--pf-surface, #fff9ed); color: var(--pf-primary, #40694e); }
.equipment-art__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.collection-kind-tabs { display: flex; gap: 8px; min-height: 44px; }
.collection-kind-tabs .screen-action { min-height: 44px; padding: 6px 20px; }
.collection-kind-tabs [aria-pressed='true'] { background: var(--pf-primary); color: var(--pf-highlight); }
.collection-screen .screen-shell__content:has(> .collection-kind-tabs),
.equipment-collection-screen .screen-shell__content { display: grid; grid-template-rows: auto minmax(0,1fr); gap: 8px; overflow: hidden; }
.equipment-collection-panel { position: relative; min-height: 0; overflow: hidden; padding: 12px; }
.equipment-collection-panel > .equipment-detail-picker__list { height: 100%; max-height: none; }
.equipment-detail-picker__list { grid-template-columns: repeat(5,minmax(0,1fr)); align-content: start; gap: 8px; }
.equipment-detail-row { position: relative; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); aspect-ratio: 1; min-width: 0; padding: 3px; border: 2px solid var(--pf-frame); border-radius: 5px; overflow: hidden; }
.equipment-detail-row .equipment-detail-row__art { grid-row: 1; width: 100%; height: 100%; min-height: 0; border-radius: 0; }
.equipment-detail-row__name { position: absolute; bottom: 2px; left: 3px; right: 3px; font-size: clamp(10px,2.5cqw,14px); background: var(--pf-surface); color: var(--pf-outline); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.equipment-detail-row__text { display: none; }
.equipment-detail-row--selected { outline: 3px solid var(--pf-primary); outline-offset: -3px; }
.equipment-detail-row > .pop-fantasy-rarity-flag { position: absolute; top: 2px; left: 2px; width: 28%; height: 30%; }
.equipment-detail-screen .screen-shell__body[data-ui-orientation='landscape'] .screen-shell__content { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); align-content: start; overflow-y: auto; gap: 10px; }
.equipment-detail-screen .screen-shell__body[data-ui-orientation='landscape'] .formation-detail-back { grid-column: 1 / -1; }
.equipment-detail-screen .screen-shell__body[data-ui-orientation='landscape'] .equipment-detail__owner { grid-column: 1 / -1; }
.equipment-detail-screen .screen-shell__body[data-ui-orientation='landscape'] .equipment-detail-picker { grid-column: 2; min-width: 0; }
.equipment-detail-screen .screen-shell__body[data-ui-orientation='landscape'] .equipment-detail-card { grid-column: 1; }
[data-ui-orientation='landscape'] .equipment-detail-picker__list { grid-template-columns: repeat(auto-fill,minmax(80px,1fr)); }
.equipment-collection-detail { position: absolute; inset: 0; z-index: 50; overflow-y: auto; padding: 12px; background: var(--pf-surface); }
.equipment-crop-editor { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 16px; }
.equipment-crop-editor > :is(h3,p) { grid-column: 1 / -1; margin: 0; }
.equipment-crop-editor__item { display: grid; align-content: start; gap: 8px; min-width: 0; }
.equipment-crop-editor__preview { width: 100%; max-width: 280px; overflow: hidden; border: 1px solid var(--pf-frame); }
.equipment-crop-editor__item label { display: grid; grid-template-columns: 4em minmax(0,1fr); align-items: center; min-height: 44px; }
:is(.equipment-collection-screen,.equipment-detail-screen) .equipment-detail-picker__list .equipment-detail-row {
  width: 100%; height: auto; min-width: 0; min-height: 0; aspect-ratio: 1;
  padding: 3px; border: 2px solid var(--pf-frame); border-radius: 5px;
  background: var(--pf-surface); box-shadow: none;
}
.equipment-collection-screen .equipment-collection-panel { border: 2px solid var(--pf-frame); background: var(--pf-surface); border-radius: 8px; box-shadow: none; }
[data-ui-orientation='landscape'] .equipment-detail-picker__list { grid-template-columns: repeat(auto-fill,minmax(clamp(64px,calc(var(--screen-frame-inline) * .085),144px),1fr)); }
.equipment-collection-screen > .screen-shell__body { background: var(--pf-surface); }
.equipment-detail-picker__list[hidden] { display: none; }

/* The list under the party strip (formation-lower-panel.mjs): it takes the
   rest of the screen and scrolls inside itself. Sized in formation px so it
   scales with the frame like the strip above it. */
.formation-screen .screen-shell__content:has(> .formation-lower):where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) {
  grid-template-rows: auto auto minmax(0, 1fr);
}
.formation-screen .formation-lower {
  position: relative;
}
.formation-screen .formation-lower:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(6 * var(--formation-px, 1px));
  min-height: 0;
}
.formation-screen .formation-lower-tabs:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { display: flex; gap: calc(6 * var(--formation-px, 1px)); padding-inline-start: calc(11 * var(--formation-px, 1px)); }
.formation-screen .formation-lower-tabs .screen-action:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) {
  min-width: calc(72 * var(--formation-px, 1px)); min-height: calc(34 * var(--formation-px, 1px));
  padding: calc(4 * var(--formation-px, 1px)) calc(14 * var(--formation-px, 1px));
  font-size: calc(14 * var(--formation-px, 1px));
}
.formation-screen .formation-lower-tabs .screen-action[aria-pressed="true"] { background: var(--pf-primary); color: var(--pf-highlight); }
.formation-screen .formation-lower > .formation-bench:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *),
.formation-screen .formation-lower-equipment:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { min-height: 0; overflow: auto; }
.formation-screen .formation-lower-equipment:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: calc(6 * var(--formation-px, 1px)); }
.formation-screen .formation-lower-hint { color: var(--pf-muted, var(--pf-outline)); }
.formation-screen .formation-lower-hint:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { margin: 0; font-size: calc(12 * var(--formation-px, 1px)); }
.formation-screen .formation-lower-equipment__list:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { min-height: 0; overflow: auto; }
.formation-screen .formation-lower-equipment__list .equipment-detail-row[aria-disabled="true"] { opacity: .55; cursor: default; }

/* Character/equipment tabs and saved-party 1/2/3 buttons wear the theme's
   button art (--theme-tab-art from ui-theme-kits.mjs) and the theme's
   lettering face; the selected one glows, or swaps to the theme's active art
   where one exists (pop fantasy). Review 2026-10-02. */
.formation-screen :is(.formation-preset, .formation-lower-tabs .screen-action) {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--theme-tab-ink, var(--raster-button-ink, var(--pf-outline)));
  font-family: var(--nav-v2-font, inherit);
  font-weight: var(--nav-v2-weight, 700);
}
.formation-screen :is(.formation-preset, .formation-lower-tabs .screen-action)::before {
  content: "";
  position: absolute;
  /* Like the rank flags, the frame art is drawn past the hit box so the
     lettering sits inside its body rather than on its rim. */
  inset: -16% -12%;
  z-index: -1;
  background: var(--theme-tab-art) center / 100% 100% no-repeat;
  pointer-events: none;
}
/* Unselected ones fade back; the selected one stays vivid with a glow in the
   theme accent, which reads on light and dark art alike. */
.formation-screen :is(.formation-preset, .formation-lower-tabs .screen-action):not([aria-pressed="true"]) { opacity: .8; }
.formation-screen :is(.formation-preset, .formation-lower-tabs .screen-action):not([aria-pressed="true"])::before { filter: saturate(.5) brightness(1.05); }
.formation-screen :is(.formation-preset, .formation-lower-tabs .screen-action)[aria-pressed="true"] {
  background: none;
  color: var(--theme-tab-ink, var(--raster-button-ink, var(--pf-outline)));
}
.formation-screen :is(.formation-preset, .formation-lower-tabs .screen-action)[aria-pressed="true"]::before {
  filter: drop-shadow(0 0 calc(3 * var(--formation-px, 1px)) var(--pf-accent)) brightness(1.06);
}
[data-ui-theme-kit="fantasy"] .formation-screen :is(.formation-preset, .formation-lower-tabs .screen-action)[aria-pressed="true"] { color: #fffef8; }
[data-ui-theme-kit="fantasy"] .formation-screen :is(.formation-preset, .formation-lower-tabs .screen-action)[aria-pressed="true"]::before {
  background-image: var(--theme-tab-art-active);
  filter: none;
}
/* The art is drawn wider than tall; give the number buttons room for it. */
.formation-screen .formation-preset:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { min-width: calc(46 * var(--formation-px)); }
/* Room for the oversized frames so neighbours do not overlap. */
.formation-screen .formation-presets:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { gap: calc(14 * var(--formation-px)); padding-inline-start: calc(16 * var(--formation-px)); padding-block: calc(5 * var(--formation-px)); }
.formation-screen .formation-lower-tabs:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { gap: calc(16 * var(--formation-px)); padding-inline-start: calc(16 * var(--formation-px)); padding-block: calc(4 * var(--formation-px)); }
.formation-screen .formation-lower:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { gap: calc(12 * var(--formation-px)); }

/* Review 2026-10-03: the list is what matters, not the switch. The
   character/equipment switch becomes a slim column of vertical tabs on the
   left edge of the list, each as thin as the 1/2/3 buttons; the button art
   is turned upright so it is not stretched. */
.formation-screen .formation-lower:has(> .formation-lower-tabs):where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: calc(4 * var(--formation-px));
}
.formation-screen .formation-lower:has(> .formation-lower-tabs) > :not(.formation-lower-tabs):not(.card-filter-dock):not(.collection-filter-dock):where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { grid-column: 2; grid-row: 1; }
.formation-screen .formation-lower-tabs:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) {
  grid-column: 1; grid-row: 1;
  flex-direction: column; justify-content: flex-start;
  gap: calc(22 * var(--formation-px));
  padding: calc(8 * var(--formation-px)) 0 0;
}
.formation-screen .formation-lower-tabs .screen-action:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) {
  writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .05em;
  min-width: 0; width: calc(30 * var(--formation-px));
  min-height: calc(72 * var(--formation-px));
  padding: calc(6 * var(--formation-px)) 0;
  font-size: calc(12 * var(--formation-px));
}
.formation-screen .formation-lower-tabs .screen-action:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *)::before {
  inset: auto;
  left: 50%; top: 50%;
  width: calc(72 * var(--formation-px) * 1.22);
  height: calc(30 * var(--formation-px) * 1.32);
  transform: translate(-50%, -50%) rotate(90deg);
}
/* Dark frames: keep the unselected word legible. */
.formation-screen .formation-lower-tabs .screen-action:not([aria-pressed="true"]) { opacity: .92; text-shadow: 0 0 2px var(--pf-surface), 0 0 2px var(--pf-surface); }

/* The same themed toggles on the sortie screen's saved parties and on the
   collection screen's character/equipment switch (review 2026-10-03). These
   screens are zoomed from a 375px frame, so plain px scale with the frame. */
:is(.sortie-preset, .collection-kind-tabs .screen-action) {
  position: relative; isolation: isolate;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--theme-tab-ink, var(--raster-button-ink, var(--pf-outline)));
  font-family: var(--nav-v2-font, inherit); font-weight: var(--nav-v2-weight, 700);
}
:is(.sortie-preset, .collection-kind-tabs .screen-action)::before {
  content: ""; position: absolute; inset: -16% -12%; z-index: -1; pointer-events: none;
  background: var(--theme-tab-art) center / 100% 100% no-repeat;
}
:is(.sortie-preset, .collection-kind-tabs .screen-action):not([aria-pressed="true"]) { opacity: .8; }
:is(.sortie-preset, .collection-kind-tabs .screen-action):not([aria-pressed="true"])::before { filter: saturate(.5) brightness(1.05); }
:is(.sortie-preset, .collection-kind-tabs .screen-action)[aria-pressed="true"] { background: none; color: var(--theme-tab-ink, var(--raster-button-ink, var(--pf-outline))); }
:is(.sortie-preset, .collection-kind-tabs .screen-action)[aria-pressed="true"]::before { filter: drop-shadow(0 0 3px var(--pf-accent)) brightness(1.06); }
[data-ui-theme-kit="fantasy"] :is(.sortie-preset, .collection-kind-tabs .screen-action)[aria-pressed="true"] { color: #fffef8; }
[data-ui-theme-kit="fantasy"] :is(.sortie-preset, .collection-kind-tabs .screen-action)[aria-pressed="true"]::before { background-image: var(--theme-tab-art-active); filter: none; }
.sortie-presets:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { gap: 14px; padding: 5px 0 5px 16px; }
.sortie-preset:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { min-width: 46px; min-height: 30px; padding: 4px 8px; font-size: 12px; }
.collection-kind-tabs:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { gap: 16px; padding: 4px 0 4px 16px; min-height: 0; }
.collection-kind-tabs .screen-action:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { min-width: 72px; min-height: 30px; padding: 4px 14px; font-size: 13px; }

.home-game-frame {
  /* Outer frame chrome around the 1080x1920 canvas (案B): flat surface +
     hairline + single elevation step, decorative dot-grid/blob layers
     removed. Geometry (width/radius/border) reads from the shared
     --screen-frame and --screen-shell tokens in 01-base/tokens.css so this
     frame's outer shape is identical to .screen-shell__body
     (01-base/screen-shell.css) used by the other four screens; see the
     comment on the tokens for why. The width/aspect-ratio are declared on
     this base rule (not only on the --portrait/--landscape modifiers) so the
     frame always has a resolvable width: installLogicalCanvasScale
     (home-part-geometry.mjs) derives the canvas scale from this element's
     measured width, and a moment of `width: auto` here froze the entire home
     canvas at scale 2/1080. Do not add `container-type` to this element --
     contain: inline-size makes the width content-independent and
     reintroduces that collapse. */
  position: relative;
  width: var(--screen-frame-inline);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: var(--screen-shell-border-width) solid var(--screen-frame-color);
  border-radius: var(--screen-shell-radius);
  background: var(--surface);
  box-shadow: var(--elev-2);
}

.home-game-frame--landscape {
  width: var(--screen-frame-block);
  aspect-ratio: 16 / 9;
}

.home-game-frame--portrait {
  width: var(--screen-frame-inline);
  aspect-ratio: 9 / 16;
}

/* A quiet inner rim supports the character art without ornamental focal points. */
.home-game-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  inset: 0.65%;
  border: calc(2 * var(--control-px)) solid #b18a3d;
  border-radius: 12px;
  box-shadow: inset 0 0 0 calc(1 * var(--control-px)) #fff0c5,
    0 0 0 calc(.5 * var(--control-px)) #806137;
}

.home-game-canvas {
  /* installLogicalCanvasScale (home-part-geometry.mjs) shrinks this element
     with `transform: scale(...)` to fit the 1080x1920 logical coordinate
     system into the real frame width. Every px/cqw value declared inside
     this subtree is a *logical* px that gets multiplied by that scale at
     paint time, so a literal 12px floor here renders far under 12 real
     device px (measured 4px at scale 0.3361). --canvas-min-font-size divides
     the real 12px floor by the published --logical-scale custom property
     (set alongside the transform, same file) so the *logical* floor grows
     to whatever renders back out at exactly --screen-min-font-size. Declared
     here (not in tokens.css) because it is meaningless outside this scaled
     subtree -- the other four screens size text against their real
     container width via `cqw` and never need this correction. Setting it as
     this element's own font-size (not just a custom property) also gives
     every descendant that does not declare its own font-size --
     .home-level-badge, .home-resource-pill -- the corrected floor through
     ordinary inheritance instead of needing an individual override.
     var(--logical-scale, 1) falls back to 1 (no shrinkage) before the first
     scale measurement lands, so this is never smaller than the plain
     --screen-min-font-size floor. */
  --canvas-min-font-size: calc(var(--screen-min-font-size) / var(--logical-scale, 1));
  /* dispatch-ui-nav-consistency §2: same divide-by-scale trick as
     --canvas-min-font-size above, applied to the bottom nav's icon size,
     icon-to-label gap, and the item/bar tap-target floors. A literal
     "30px" icon (or "58px" min-height) declared inside this scaled
     subtree renders far under 30 (or 58) real device px once the
     transform above shrinks it (measured 16.1px for a 48px icon at scale
     0.3361); dividing by --logical-scale grows the *logical* value back
     out to exactly the real px these were designed at. The shared
     selectors in 07-home/bottom-nav.css and 07-home/glyph-navigation.css
     read these through a var(..., <real px>) fallback, so the four other
     screens (never inside this scaled subtree) get the plain real-px
     value directly. */
  --canvas-nav-icon-size: calc(30px / var(--logical-scale, 1));
  --canvas-nav-icon-gap: calc(2px / var(--logical-scale, 1));
  --canvas-nav-item-min-height: calc(58px / var(--logical-scale, 1));
  --canvas-nav-bar-min-height: calc(66px / var(--logical-scale, 1));
  /* dispatch-ui-touch-and-readability §1/§2/§3: same divide-by-scale trick
     as --canvas-min-font-size above, generalized to two more cases the
     audit found inside this scaled subtree.
     --canvas-tap-target-min covers every clickable control's min-height/
     min-width: a literal "44px" tap target declared inside this scaled
     subtree (the profile panel and asset picker overlays both render as
     children of .home-game-canvas -- see the .append(renderAssetPicker(...))
     / .append(renderProfilePanel(...)) calls in home-screen.mjs) renders far
     under 44 real device px once the transform above shrinks it, exactly
     like the nav tap targets above. Consumers read it through a
     var(--canvas-tap-target-min, 44px) fallback so any control built
     outside this canvas keeps the plain real-px floor.
     --canvas-text-xs/sm/md/lg/xl mirror the fixed-px --text-* scale
     (01-base/tokens.css) with the same correction, for profile-panel.css /
     asset-picker.css: those files render inside this canvas but were built
     against the --text-* "screen-outside-chrome" scale (styles/README.md),
     so their labels rendered at 5-9 real px instead of the intended
     16-26px. Consumers read these through a var(--canvas-text-*, var(--text-*))
     fallback for the same reason. */
  --canvas-tap-target-min: calc(44px / var(--logical-scale, 1));
  --canvas-text-xs: calc(var(--text-xs) / var(--logical-scale, 1));
  --canvas-text-sm: calc(var(--text-sm) / var(--logical-scale, 1));
  --canvas-text-md: calc(var(--text-md) / var(--logical-scale, 1));
  --canvas-text-lg: calc(var(--text-lg) / var(--logical-scale, 1));
  --canvas-text-xl: calc(var(--text-xl) / var(--logical-scale, 1));
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  container-type: inline-size;
  /* 論理キャンバスの寸法。横向きでは 1920x1080 になる。The numbers live in
     ui-orientation.mjs; these two custom properties are how the same fact
     reaches the stylesheet, and the fallbacks keep the portrait canvas
     correct before the first render sets them. */
  width: var(--logical-canvas-width, 1080px);
  height: var(--logical-canvas-height, 1920px);
  transform-origin: top left;
  isolation: isolate;
  font-size: var(--canvas-min-font-size);
}

.home-background-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* The player's characters. Above the background, below everything they tap --
   a home screen you cannot use because someone is standing on the buttons is
   not a home screen. */
.home-character-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.home-character {
  pointer-events: auto;
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  left: 50%;
  bottom: 0;
  width: 62cqw;
  /* The transform carries the player's own offset and scale, so the anchor
     here only has to put them centred on the floor of the frame. */
  transform-origin: bottom center;
  margin-left: -31cqw;
}

/* Two characters overlap. Which one wins is the player's choice, so it is a
   stacking order rather than a position. */
.home-character[data-home-character-front="true"] {
  z-index: 2;
}

.home-character__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* A card with no artwork yet. Standing there as a name is not the finished
   look, but it is honest: the player's choice took effect. */
.home-character[data-home-character-placeholder="true"] {
  display: grid;
  bottom: 32cqw;
  width: 36cqw;
  min-height: 8cqw;
  margin-left: -18cqw;
  place-items: center;
  padding: 1.2cqw 2cqw;
  aspect-ratio: auto;
  border: max(1px, .16cqw) solid color-mix(in srgb, var(--line) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  box-shadow: var(--elevation-1);
}

.home-character__name {
  padding: 0;
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 3cqw);
  font-weight: 900;
  text-align: center;
}

/* Why a maker's control did not open. Sits on the frame, outside the scaled
   canvas, so it is readable at real px. */
.home-edit-lock-notice {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--elevation-2);
}

.home-edit-lock-notice__text {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.6;
}

.home-edit-lock-notice__dismiss {
  min-height: 44px;
  padding: 0 14px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

/* ホームの吹き出し。
   Inside the canvas with the characters, because it is part of the picture the
   game draws rather than a control surface -- it scales with them, and sits
   above the bottom nav's own band. */
.home-speech-layer {
  position: absolute;
  /* 帯はキャンバス幅そのもの。端の余白は吹き出し側が持つ。
     --home-speech-anchor は「キャンバスの左端から何%」なので、% が帯の幅に
     対して解決されるとキャラの立ち位置と最大2.5%ずれる。帯を内側に寄せない
     ことで、その % がそのままキャンバスの % になる。横向きでは cqw と % が
     一致しない（キャンバスは1920幅、1cqw は1080基準）ので、ここは % でなければ
     ならない。 */
  right: 0;
  bottom: 26cqw;
  left: 0;
  z-index: 3;
  display: grid;
  /* 帯は端から端まで、吹き出しはそうではない。The layer spans the canvas so a
     reply can sit at the far side of it, but each bubble is sized by its own
     line below -- stretching one短い line across the whole width is what made
     "おかえり。異常なし、進めるよ。" read as a banner instead of speech. */
  justify-items: start;
  gap: 1.2cqw;
  pointer-events: none;
}

.home-speech {
  position: relative;
  display: grid;
  /* 中身ぶんの幅。max-width はキャンバス基準(cqw)で、枠の幅ではない -- 横向き
     のキャンバスは1920あるので、割合で持たせると横だけ倍近く伸びる。62cqw は
     縦で 670 論理px、だいたい20文字で折り返す。 */
  width: fit-content;
  max-width: 62cqw;
  /* 端の余白。帯が全幅になったぶん、ここが受け持つ。 */
  margin-right: 4cqw;
  margin-left: 4cqw;
  gap: .6cqw;
  padding: 2cqw 2.6cqw;
  border: max(1px, .2cqw) solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow: var(--elevation-1);
}

/* The one who was tapped speaks first and sits nearest the floor; the reply
   floats above it, narrower, so a glance can tell which is the answer. */
.home-speech--secondary {
  justify-self: end;
  width: fit-content;
  max-width: 56cqw;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.home-speech--image {
  width: 62cqw;
  min-height: 18cqw;
  align-content: center;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  box-shadow: none;
}

.home-speech-layer--image {
  bottom: 48cqw;
}

.home-speech--image::after {
  display: none;
}

/* 話し手の上に置く。
   --home-speech-anchor は話し手の横位置（枠の左端からの%）で、home-screen.mjs
   の resolveHomeSpeechAnchor が入れる。付いていない吹き出し -- 話し手が特定
   できなかったとき -- は上の既定のまま、左端と右端に置かれる。

   The near edge is pinned to the speaker and the bubble grows away from them,
   so its own width never has to be known to keep it inside the frame: the
   space it can occupy is exactly the space between the anchor and the far
   edge. 中央に載せる形だと、幅を測らないと端で切れる。 */
.home-speech[data-home-speech-side="left"] {
  justify-self: start;
  margin-left: max(4cqw, var(--home-speech-anchor, 0%));
  /* 30cqw は下限。端に立たれても吹き出しが糸みたいに細くならないように。
     下限が効いたときにはみ出すぶんは、反対側の 4cqw の余白が吸う。 */
  max-width: min(62cqw, max(30cqw, calc(100% - var(--home-speech-anchor, 0%) - 4cqw)));
}

.home-speech[data-home-speech-side="right"] {
  justify-self: end;
  margin-right: max(4cqw, calc(100% - var(--home-speech-anchor, 100%)));
  max-width: min(62cqw, max(30cqw, calc(var(--home-speech-anchor, 100%) - 4cqw)));
}

/* しっぽ。回した正方形で、吹き出しと同じ塗りと線をそのまま continue させる
   -- 三角形（border trick）だと枠線が消えて、輪郭のある吹き出しから角だけ
   浮いて見える。 */
.home-speech::after {
  position: absolute;
  bottom: calc(var(--home-speech-tail, 1.8cqw) / -2);
  width: var(--home-speech-tail, 1.8cqw);
  height: var(--home-speech-tail, 1.8cqw);
  border-right: max(1px, .2cqw) solid var(--line);
  border-bottom: max(1px, .2cqw) solid var(--line);
  background: inherit;
  content: "";
  transform: rotate(45deg);
}

/* しっぽは話し手の側の端に出す。The tail is what says which of the two is
   speaking; put it on the far side and the bubble points at the wrong one. */
.home-speech[data-home-speech-side="left"]::after {
  left: 3.2cqw;
}

.home-speech[data-home-speech-side="right"]::after {
  right: 3.2cqw;
}

/* 話し手が分からないときは、その吹き出しが置かれている側に出す。 */
.home-speech:not([data-home-speech-side])::after {
  left: 3.2cqw;
}

.home-speech--secondary:not([data-home-speech-side])::after {
  right: 3.2cqw;
  left: auto;
}

.home-speech__name {
  color: var(--accent);
  /* Measured: 2.6cqw rendered at 10.4px against the nav's 12px, the smallest
     text on the screen for no reason. */
  font-size: max(var(--screen-min-font-size), 3cqw);
  font-weight: 900;
}

.home-speech__text {
  margin: 0;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.8cqw);
  font-weight: 500;
  line-height: 1.5;
}

/* 未保存の配置の知らせ。
 *
 * 保存ボタンは元々この下、レイヤーパネル（2600px級）のさらに後ろにあった。
 * キットを32枚取り込むと「画面には出ているのに保存は画面外」になり、押さない
 * ままリロードして消える。消えるかもしれないものを抱えているあいだは、それが
 * 最初に目に入るべき。 */
.home-ui-unsaved-notice {
  display: grid;
  gap: .8cqw;
  padding: 1.2cqw 1.4cqw;
  border: max(1px, .25cqw) solid var(--accent);
  border-radius: 1.4cqw;
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
}

.home-ui-unsaved-notice__text {
  margin: 0;
  font-size: max(var(--screen-min-font-size), 2.4cqw);
  font-weight: 700;
  line-height: 1.4;
}

.home-ui-unsaved-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8cqw;
}

/* Animate the artwork, never the placement transform on its parent. */
.home-character-layer[data-floating="true"] .home-character__image {
  animation: homeCharacterFloat var(--home-float-duration, 6s) ease-in-out infinite;
}
.home-character[data-home-character-slot="2"] .home-character__image { animation-delay: -3s; }
@keyframes homeCharacterFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 var(--home-float-distance, -12px); }
}
[data-calibration-direct="true"] .home-character-layer .home-character__image { animation: none; }
.home-character-panel__floating { min-height: 44px; padding: 10px 14px; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .home-character-layer[data-floating] .home-character__image { animation: none; } }

.home-top-hud {
  position: absolute;
  top: 24px;
  left: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 20;
}

.home-profile-strip,
.home-resource-group {
  display: flex;
  gap: 14px;
  align-items: center;
}

/* ランクの札。画面で一番大きい数字がここに来る。
   "Lv.1" was one line of ordinary text in a small pill -- the only number
   about the player, and the least visible thing in the strip. 見出しを小さく、
   数字を大きく、縦に積む。 */
.home-level-badge {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.2cqw;
  padding: 1.4cqw 1.2cqw;
  color: var(--ink);
  border: max(2px, 0.28cqw) solid var(--line);
  border-radius: 1.7cqw;
  background: var(--surface);
  box-shadow: var(--elev-1);
  text-align: center;
}

.home-level-badge__caption {
  color: var(--accent);
  font-size: max(var(--screen-min-font-size), 2.1cqw);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
}

.home-level-badge__value {
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 5.4cqw);
  font-weight: 900;
  line-height: 1;
}

/* 経験値バー。数字とバーは必ず一組で出す -- バーだけでは「あと少し」しか
   言えず、数字だけでは「どのくらい」が読めない。 */
/* EXP の帯は押せる（押すと数値が出る）。button になったので、素の見た目を
   落として、押せることは触り心地のほうで伝える。 */
.home-exp-bar {
  border: 0;
  background: none;
  cursor: pointer;
  text-align: inherit;
  font: inherit;
  color: inherit;
  /* 文字と帯を横に並べて、同じ高さに置く。縦に積むと、帯の細さに対して
     二段ぶんの高さを取ることになり、上帯の中でここだけ背が高くなる。 */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: 0 calc(4 * var(--control-px));
  padding: 0 1.6cqw;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--elev-1);
}

/* 「EXP」の見出しと数値。帯と同じ段に並ぶので、幅は中身ぶんだけ取る
   （space-between は幅いっぱいに広げる指定なので、横並びでは外す）。 */
.home-exp-bar__head {
  display: flex;
  align-items: baseline;
  gap: 0.8cqw;
}

.home-exp-bar__label {
  color: var(--accent);
  font-size: max(var(--screen-min-font-size), 2.1cqw);
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* The exact amount is a floating tooltip, never an empty grid column. */
.home-exp-bar[data-exp-value-shown="false"] .home-exp-bar__value {
  visibility: hidden;
}
.home-game-canvas .home-exp-bar .home-exp-bar__value {
  position: absolute;
  top: calc(100% + 4 * var(--control-px));
  left: 0;
  z-index: 60;
  padding: calc(5 * var(--control-px)) calc(8 * var(--control-px));
  border: calc(1 * var(--control-px)) solid var(--pf-frame);
  border-radius: calc(5 * var(--control-px));
  background: var(--pf-surface);
  color: var(--pf-outline);
  font-size: calc(13 * var(--control-px));
  font-weight: 900;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 calc(2 * var(--control-px)) calc(6 * var(--control-px)) #0003;
}

.home-exp-bar__track,
.home-resource-pill__track {
  overflow: hidden;
  height: 1.2cqw;
  min-height: 6px;
  border-radius: 999px;
  /* 下地は線の色を薄めたもの。--ink の大面積塗りは規約で止めてある
     (style-build.test.mjs の §7)。バーの溝は面なので、線側の色を使う。 */
  background: color-mix(in srgb, var(--line) 70%, transparent);
}

.home-exp-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.home-resource-pill__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent-2, var(--accent));
}

.home-avatar-button {
  /* Tidy HUD circle (案B): surface + hairline + single elevation step,
     matching .home-side-tool below (no gradient / no 4px white ring).
     dispatch-tap-target-completion: width/height are a fallback only --
     applyHomePartGeometry (home-part-geometry.mjs) always sets inline
     width/height/min-width from ui-layout-defaults.mjs's
     HOME_AVATAR_BUTTON geometry (132x132 logical, real 44.37px at the
     375px-wide measurement viewport; see the geometry comment for why a
     CSS-only fix could not reach this element's box), so these 132px
     values only apply if that geometry were ever missing. */
  position: relative;
  display: grid;
  width: 132px;
  height: 132px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--elev-1);
}

.home-resource-pill {
  /* Small tidy HUD pill (案B): flat surface, hairline, single elevation
     step (no inset ring / no double shadow). */
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  padding: 0.6cqw 1.6cqw 0.6cqw 1.2cqw;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--elev-1);
  font-weight: 900;
}

.home-resource-dot {
  /* Resource glyph (案B): a plain surface disc with an ink ring, shape
     alone (circle vs. diamond below) distinguishes currency types instead
     of a hardcoded gold/blue palette (§13: never color-only). */
  position: relative;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
}

.home-resource-dot::after {
  position: absolute;
  inset: 6px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  content: "";
}

.home-resource-icon {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.home-resource-pill--blue .home-resource-dot {
  border-radius: 7px;
  transform: rotate(45deg);
}

.home-resource-pill--blue .home-resource-dot::after {
  display: none;
}

.home-access-status {
  position: absolute;
  top: 96px;
  right: 28px;
  z-index: 35;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  max-width: 700px;
  /* dispatch-ui-touch-and-readability §1: this is a real <button> (opens
     the profile panel) rendered inside .home-game-canvas; padding alone
     left it at a measured 26.4 real px tall. Its box is CSS-only (no
     geometry-driven inline width/height like the resource pills), so the
     canvas-corrected tap-target token is enough on its own -- no geometry
     data change needed. */
  min-height: var(--canvas-tap-target-min, 44px);
  padding: 10px 14px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--elev-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-access-status__label,
.home-access-status__message,
.home-access-status__action {
  min-width: 0;
  line-height: 1.25;
}

.home-access-status__label {
  padding: 5px 10px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  /* This element only renders inside the scaled .home-game-canvas
     (renderHomeAccessStatus in home-screen.mjs). --screen-label-font-size
     would resolve here too, but it floors on --screen-min-font-size
     directly (the un-corrected 12px) rather than --canvas-min-font-size, so
     it is re-derived from the same 1.4815cqw fraction with the corrected
     floor instead of reused as-is. This status line is the "blocked state"
     notice (ui-style-spec-b.md §10) the dispatch requires stay legible, not
     decorative guide copy, so it gets the same floor fix as the other
     canvas text. */
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), 1.4815cqw);
  font-weight: 900;
  white-space: nowrap;
}

.home-access-status__message {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), 1.4815cqw);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-access-status__action {
  color: var(--accent);
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), 1.3333cqw);
  font-weight: 900;
  white-space: nowrap;
}

.home-access-status[data-tone="warning"] .home-access-status__label {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: var(--paper);
}

.home-access-status[data-tone="ready"] .home-access-status__label {
  color: var(--color-success);
  border-color: var(--color-success);
  background: var(--paper);
}

.home-side-tools {
  position: absolute;
  top: 180px;
  left: 20px;
  display: grid;
  gap: 16px;
  z-index: 20;
}

.home-side-tool {
  /* 案B: surface circle + hairline + single elevation step; the glyph
     inside inherits this ink color via currentColor.
     dispatch-tap-target-completion: width/height are a fallback only --
     applyHomePartGeometry always sets inline width/height/min-width from
     each button's own ui-layout-defaults.mjs geometry (HOME_SETTINGS_TOOL/
     HOME_LAYOUT_TOOL 132x88 logical, HOME_EDIT_TOOL 132x132; see the
     geometry comment for the per-button real-px result and why the middle
     button cannot reach 44px real height without moving the frozen y
     spacing). 88px here is the smaller, safe fallback shared by all three
     buttons if that geometry were ever missing. */
  position: relative;
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  padding: 8px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--elev-1);
  cursor: pointer;
}

.home-side-tool-icon {
  width: 44px;
  height: 44px;
}

/* 名前とランク。
   アイコンだけでは「どこかにアカウントがある」としか言っていない。The rank
   and the name are what make this corner say "this is you", which is the job
   it has in this genre. */
/* The name owns the free width before resources. Enlarged calibrated text
   may paint outside its original line box without being clipped. */
.home-player-name-tag {
  display: grid;
  align-items: center;
  padding: 0 1.6cqw;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--elev-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-player-name-tag__name {
  overflow: visible;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 3cqw);
  font-weight: 900;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  transform-origin: left center;
}

.home-player-name-tag__name > [data-calibration-text] {
  transform-origin: left center;
}


/* 数値ひとつぶんの中身。見出し（スタミナ/ジュエル）と数字を並べ、
   減っていくものにはその下にバーを敷く。 */
.home-resource-pill__body {
  display: grid;
  gap: 0.5cqw;
  flex: 1 1 auto;
  min-width: 0;
}

.home-resource-pill__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2cqw;
}

/* Keep recovery immediately after the complete amount, even for wide digits. */
.home-resource-pill__head:has(> .home-resource-pill__recover) { justify-content: flex-start; gap: .3em; }
.home-resource-pill__head:has(> .home-resource-pill__recover) > * { flex: 0 0 auto; }
.home-resource-pill__recover { line-height: 1; }

.home-resource-pill__label {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font-size: max(var(--screen-min-font-size), 2.1cqw);
  font-weight: 900;
  white-space: nowrap;
}

.home-resource-pill__value,
.home-strength-points__value {
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.6cqw);
  font-weight: 900;
  white-space: nowrap;
}

/* Pop fantasy v2 keeps the whole status area on one authored base image.
   These children are semantic/dynamic layers only: their text, values and
   progressbar roles stay live, while the five independent default pills are
   taken off so they do not redraw panels over the unified HUD. */
/* キットの書体は、作り手が選んだ書体から引く。

   ここは以前、キット自身の3つの積み（丸ゴシック / 明朝 / Georgia）を持って
   いた。セレクタが強いので作り手の選択より勝ち、**キットを入れたホームでは
   「戦闘開始」と「ストーリー」だけが明朝**という状態になっていた。

   キットが持ってくるのは絵であって、書体の方針ではない。役目の対応だけを
   ここで決めて、中身は 01-base/font-presets.css の選択に従わせる。数値も
   飾りの側 -- 見分けるためのもので、読み下すものではない。 */
.home-game-canvas--pop-fantasy-v2 {
  --pop-fantasy-font-body: var(--font-body, var(--font-display));
  --pop-fantasy-font-display: var(--font-display);
  --pop-fantasy-font-number: var(--font-display);
}

.home-game-canvas--pop-fantasy-v2 :is(
  .home-level-badge,
  .home-player-name-tag,
  .home-exp-bar,
  .home-resource-pill
) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-game-canvas--pop-fantasy-v2 :is(
  .home-player-name-tag,
  .home-exp-bar__label,
  .home-resource-pill__label
) {
  font-family: var(--pop-fantasy-font-body);
}

.home-game-canvas--pop-fantasy-v2 :is(
  .home-level-badge__caption,
  .home-level-badge__value,
  .home-exp-bar__value,
  .home-resource-pill__value,
  .home-strength-points__value
) {
  font-family: var(--pop-fantasy-font-number);
  font-variant-numeric: tabular-nums;
}

.home-game-canvas--pop-fantasy-v2 :is(
  .battle-slot-button-label,
  .story-slot-button-label
) {
  font-family: var(--pop-fantasy-font-display);
}

/* The unified HUD stays intact; only the rank's local pennant is layered on it.
   An authored replacement on this slot always wins over the built-in flag. */
.home-game-canvas--pop-fantasy-v2 .home-level-badge:not(.home-editable-part--image) {
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding: 0.8cqw 1cqw 2.4cqw;
}

/* The authored flag is roughly four parts rectangular body to one part tip.
   Let that tip extend below the HUD so the rectangular body itself owns the
   full HUD height instead of being compressed into it. */
.home-game-canvas--pop-fantasy-v2 .home-level-badge:not(.home-editable-part--image)::before {
  position: absolute;
  z-index: 0;
  inset: 0 0 -25%;
  background: url("/assets/ui-kits/pop-fantasy-v2/home/hud/rank-flag.webp") center / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
}

.home-game-canvas--pop-fantasy-v2 .home-level-badge:not(.home-editable-part--image) :is(
  .home-level-badge__caption,
  .home-level-badge__value
) {
  position: relative;
  z-index: 1;
  color: #fff4dc;
}

.home-game-canvas--pop-fantasy-v2 .home-resource-dot {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform: none;
}

.home-game-canvas--pop-fantasy-v2 .home-resource-dot::after {
  display: none;
}

.home-game-canvas--pop-fantasy-v2 .home-resource-pill--green .home-resource-icon,
.home-game-canvas--pop-fantasy-v2 .home-resource-pill--blue .home-resource-icon {
  display: block;
}

.home-game-canvas--pop-fantasy-v2 .home-editable-part--custom-icon .home-resource-dot {
  visibility: hidden;
}

.stamina-recovery__time, .stamina-recovery__next { font-size: 14px; line-height: 1.5; }

/* Keep the countdown beside its stamina amount, inside the same calibrated row. */
.home-resource-pill.home-resource-pill--green { gap: .6cqw; }
.home-resource-pill.home-resource-pill--green .home-resource-pill__body { flex: 0 0 auto; }
.home-resource-pill.home-resource-pill--green .home-resource-pill__recover { flex: none; margin-left: 0; }
.home-stamina-recovery-time {
  --control-px: calc(var(--home-part-width, 398px) / 398);
  display: block;
  min-width: 0;
  margin-left: auto;
  font-size: calc(10 * var(--control-px, 1px) + 2px / var(--logical-scale, 1));
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  word-break: keep-all;
  color: var(--pf-primary, #40694e);
}
.home-stamina-recovery-time[hidden] { display: none; }

/* Theme review 2026-10-02: the "+" followed the stamina amount's layout box,
   which calibration shrinks, so it floated far to the right. Draw it as part
   of the amount itself so it always sits right after the digits; calibration scales the inner text, so the mark rides on it. */
.home-resource-pill__head:has(> .home-resource-pill__recover) > .home-resource-pill__value > [data-calibration-text]::after,
.home-resource-pill__head:has(> .home-resource-pill__recover) > .home-resource-pill__value:not(:has(> [data-calibration-text]))::after {
  content: "+"; margin-left: .3em; color: var(--pf-primary); font-weight: 900;
}
.home-resource-pill__head > .home-resource-pill__recover { display: none; }

.home-bottom-nav {
  /* Tidy nav bar (案B): flat surface + hairline + one elevation step. This
     is the single shared nav-bar rule for all 5 screens: home applies it
     via the bare .home-bottom-nav class, the other four screens via
     game-screen-frame.mjs's `home-bottom-nav game-bottom-nav` combo class
     (02-shared/game-bottom-nav.css only adds the game-content z-index
     bump, it does not redefine any of this geometry).
     dispatch-nav-restructure #1: 5 -> 4 rendered items (grid-template-
     columns updated to match); every nav item is absolutely positioned by
     its own saved/default geometry (game-screen-frame.mjs / home-part-
     geometry.mjs both set inline position:absolute + left/width from that
     geometry, overriding this grid), so the column count is documentation
     of intent rather than something the browser actually measures against.
     min-height (dispatch-ui-nav-consistency §2) uses --canvas-nav-bar-
     min-height (07-home/frame.css), which divides the real 66px target by
     --logical-scale inside home's scaled canvas so it renders at a real
     66px there too, falling back to the plain 66px for the other four
     (never-scaled) screens. Both geometry helpers (game-screen-frame.mjs /
     home-part-geometry.mjs) that position this bar from its saved slot
     leave min-height unset on the element itself, so this floor applies
     with no cascade fight -- nothing here needs to be force-flagged to win
     the cascade, the used height is simply whichever of (saved height,
     this floor) is larger.
     `top: auto; bottom: ...` keeps the bar resting flush on the frame's
     bottom edge and growing upward as the floor above grows it taller
     than the saved slot height, instead of overflowing past the frame's
     bottom edge; that only works because both geometry helpers also clear
     their inline top/bottom on this element right after positioning it
     (see clearBottomNavVerticalPin in game-screen-frame.mjs and the
     matching home-screen.mjs comment), leaving these two declarations
     unopposed. */
  position: absolute;
  left: 2.5926%;
  right: 2.5926%;
  top: auto;
  bottom: 0.9375%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: var(--canvas-nav-bar-min-height, 66px);
  padding: 0.5556cqw;
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: 0 0.7407cqw 1.8519cqw rgba(32, 38, 58, 0.12);
  z-index: 20;
}

.home-bottom-nav-item {
  /* Icon (top) + short label (bottom): the single shared nav-item layout
     rule for all 5 screens (see .home-bottom-nav comment above for how the
     class is shared). Both geometry helpers apply inline position/width/
     height to each button from the item's editable slot geometry, but
     (dispatch-ui-nav-consistency §1) no longer set an inline min-height,
     so this rule's min-height floor (--canvas-nav-item-min-height,
     07-home/frame.css; same divide-by-scale shape as the bar's above)
     applies with no force-flagged override needed: every screen keeps a
     real tap target and the label always stays visible, regardless of the
     item's tiny saved-geometry height. `top: 50%` + the transform below
     vertically re-center the item inside the bar instead of leaving it
     pinned to its saved-geometry top, which -- now that the floor above
     can actually grow the box past that saved height -- would otherwise
     push the label past the bar's own bottom edge; this only works
     because both geometry helpers clear their inline `top` on each item
     right after positioning it (see the per-item comment next to
     `button.style.top = ""` in game-screen-frame.mjs and the matching
     home-screen.mjs comment), leaving this declaration unopposed. Inactive
     state reads in --ink-soft; active state switches to --accent plus the
     ::before top-edge bar below, instead of a filled M3-style pill. */
  position: relative;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--canvas-nav-icon-gap, 2px);
  min-height: var(--canvas-nav-item-min-height, 58px);
  padding: 4px;
  color: var(--ink-soft);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  transform: translateY(-50%);
  /* .home-bottom-nav-item is shared by all 5 screens (see the class comment
     above): home renders it inside the scaled .home-game-canvas, the other
     four render it inside their un-scaled .screen-shell. --canvas-min-font-
     size (07-home/frame.css) only exists on the home side, so the
     var(--screen-min-font-size) fallback keeps the other four screens on
     their original, already-correct floor. */
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), 2.1481cqw);
  line-height: 1;
}

.home-bottom-nav-item--active {
  color: var(--accent);
  background: transparent;
  box-shadow: none;
}

.home-bottom-nav-item--active::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.2222cqw;
  height: max(2px, 0.2778cqw);
  background: var(--accent);
  border-radius: var(--radius-pill);
  content: "";
  transform: translateX(-50%);
}

.home-bottom-nav-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-ui-glyph {
  /* 案B: a plain surface + hairline chip. Every consumer that needs a
     different chrome (bottom nav icons, side-tool icons, the battle CTA
     icon) already overrides border/background/box-shadow in its own file;
     this base rule is what actually paints when nothing overrides it (the
     profile avatar glyph). */
  position: relative;
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--elev-1);
  color: var(--ink);
  flex: 0 0 auto;
}

.home-ui-glyph::before,
.home-ui-glyph::after {
  /* currentColor so every glyph mark automatically follows whichever
     text color its container sets (案B: icon color tracks parent ink,
     not a hardcoded palette). */
  position: absolute;
  display: block;
  background: currentColor;
  content: "";
}

.home-ui-glyph--avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface);
}

.home-ui-glyph--avatar::before {
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.home-ui-glyph--avatar::after {
  bottom: 7px;
  width: 20px;
  height: 10px;
  border-radius: 12px 12px 5px 5px;
}

.home-ui-glyph--settings::before {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: repeating-conic-gradient(currentColor 0 12deg, transparent 12deg 24deg);
}

.home-ui-glyph--settings::after {
  width: 13px;
  height: 13px;
  border: 5px solid currentColor;
  border-radius: 50%;
  background: var(--surface);
}

.home-ui-glyph--layout::before {
  width: 30px;
  height: 30px;
  background:
    linear-gradient(currentColor, currentColor) center / 5px 30px no-repeat,
    linear-gradient(90deg, currentColor, currentColor) center / 30px 5px no-repeat;
}

.home-ui-glyph--layout::after {
  width: 13px;
  height: 13px;
  border: 4px solid currentColor;
  border-radius: 4px;
  background: var(--surface);
  box-shadow:
    0 -16px 0 -5px currentColor,
    0 16px 0 -5px currentColor,
    -16px 0 0 -5px currentColor,
    16px 0 0 -5px currentColor;
}

.home-ui-glyph--edit::before {
  width: 30px;
  height: 8px;
  border-radius: 999px;
  transform: rotate(-42deg);
}

.home-ui-glyph--edit::after {
  right: 8px;
  bottom: 9px;
  width: 0;
  height: 0;
  background: transparent;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid currentColor;
  transform: rotate(-42deg);
}

/* .home-workspace-icon (07-home/editor-workspace-card.css) is edit-mode
   chrome, out of scope for this pass (Phase 2 territory, untouched). It
   keeps its own colorful gradient badge and always expected a white glyph
   mark; pin the glyph's currentColor back to that white here so this
   pass's base-chrome refactor does not silently darken it. */
.home-workspace-icon .home-ui-glyph {
  color: #f9fbff;
}

.home-side-tool-icon.home-ui-glyph {
  /* 案B: the icon is a plain ink mark on the surface circle drawn by
     .home-side-tool -- no colored badge chrome, no drop shadow. */
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
}

.home-side-tool-icon.home-ui-glyph--settings::before,
.home-side-tool-icon.home-ui-glyph--edit::before {
  inset: 2px;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: currentColor;
  box-shadow: none;
  transform: none;
}

.home-side-tool-icon.home-ui-glyph--settings::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.569 215.166l-55.345-13.064c-4.032-13.946-9.495-27.27-16.376-39.732l29.85-48.303c4.57-7.397 3.452-16.946-2.688-23.086l-31.99-31.99c-6.129-6.129-15.678-7.248-23.076-2.678l-48.292 29.851c-12.462-6.882-25.785-12.344-39.732-16.377l-13.064-55.368C294.856 5.978 287.306 0 278.63 0h-45.237c-8.678 0-16.227 5.978-18.227 14.419l-13.064 55.368c-13.946 4.032-27.27 9.484-39.732 16.377l-48.303-29.872c-7.387-4.549-16.946-3.441-23.086 2.699L58.99 90.97c-6.13 6.14-7.248 15.709-2.689 23.087l29.862 48.313c-6.882 12.462-12.344 25.786-16.367 39.721l-55.378 13.065C5.978 217.165 0 224.704 0 233.392v45.226c0 8.678 5.978 16.237 14.419 18.226l55.378 13.065c4.032 13.946 9.485 27.259 16.367 39.71l-29.872 48.324c-4.549 7.398-3.441 16.957 2.699 23.098l31.979 31.979c6.14 6.14 15.709 7.257 23.087 2.688l48.323-29.872c12.463 6.882 25.786 12.344 39.722 16.366l13.064 55.366c2 8.463 9.549 14.431 18.227 14.431h45.237c8.677 0 16.226-5.968 18.226-14.431l13.064-55.366c13.937-4.021 27.259-9.484 39.712-16.366l48.312 29.861c7.398 4.57 16.947 3.452 23.087-2.688l31.989-31.99c6.13-6.129 7.248-15.688 2.678-23.087l-29.861-48.302c6.893-12.452 12.345-25.774 16.377-39.721l55.366-13.065c8.463-2.001 14.42-9.539 14.42-18.226v-45.238c0-8.666-5.968-16.215-14.431-18.214zM256.006 303.103c-26.002 0-47.098-21.097-47.098-47.108s21.097-47.108 47.098-47.108c26.011 0 47.108 21.097 47.108 47.108s-21.097 47.108-47.108 47.108z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.569 215.166l-55.345-13.064c-4.032-13.946-9.495-27.27-16.376-39.732l29.85-48.303c4.57-7.397 3.452-16.946-2.688-23.086l-31.99-31.99c-6.129-6.129-15.678-7.248-23.076-2.678l-48.292 29.851c-12.462-6.882-25.785-12.344-39.732-16.377l-13.064-55.368C294.856 5.978 287.306 0 278.63 0h-45.237c-8.678 0-16.227 5.978-18.227 14.419l-13.064 55.368c-13.946 4.032-27.27 9.484-39.732 16.377l-48.303-29.872c-7.387-4.549-16.946-3.441-23.086 2.699L58.99 90.97c-6.13 6.14-7.248 15.709-2.689 23.087l29.862 48.313c-6.882 12.462-12.344 25.786-16.367 39.721l-55.378 13.065C5.978 217.165 0 224.704 0 233.392v45.226c0 8.678 5.978 16.237 14.419 18.226l55.378 13.065c4.032 13.946 9.485 27.259 16.367 39.71l-29.872 48.324c-4.549 7.398-3.441 16.957 2.699 23.098l31.979 31.979c6.14 6.14 15.709 7.257 23.087 2.688l48.323-29.872c12.463 6.882 25.786 12.344 39.722 16.366l13.064 55.366c2 8.463 9.549 14.431 18.227 14.431h45.237c8.677 0 16.226-5.968 18.226-14.431l13.064-55.366c13.937-4.021 27.259-9.484 39.712-16.366l48.312 29.861c7.398 4.57 16.947 3.452 23.087-2.688l31.989-31.99c6.13-6.129 7.248-15.688 2.678-23.087l-29.861-48.302c6.893-12.452 12.345-25.774 16.377-39.721l55.366-13.065c8.463-2.001 14.42-9.539 14.42-18.226v-45.238c0-8.666-5.968-16.215-14.431-18.214zM256.006 303.103c-26.002 0-47.098-21.097-47.098-47.108s21.097-47.108 47.098-47.108c26.011 0 47.108 21.097 47.108 47.108s-21.097 47.108-47.108 47.108z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-side-tool-icon.home-ui-glyph--settings::after {
  display: none;
}

.home-side-tool-icon.home-ui-glyph--layout::before {
  inset: 1px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 68 22H58v20h20V32l22 18-22 18V58H58v20h10L50 100 32 78h10V58H22v10L0 50l22-18v10h20V22H32Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 68 22H58v20h20V32l22 18-22 18V58H58v20h10L50 100 32 78h10V58H22v10L0 50l22-18v10h20V22H32Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-side-tool-icon.home-ui-glyph--layout::after {
  display: none;
}

.home-side-tool-icon.home-ui-glyph--edit::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504.262 66.75L445.226 7.706c-10.291-10.284-26.938-10.267-37.222 0l-38.278 38.278 96.282 96.266 38.254-38.295c10.275-10.283 10.292-26.938 0-37.205zM32.815 382.921L0.025 512l129.055-32.83 319.398-319.431-96.249-96.265L32.815 382.921zM93.179 404.792l-21.871-21.871 278.289-278.289 21.887 21.887L93.179 404.792z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504.262 66.75L445.226 7.706c-10.291-10.284-26.938-10.267-37.222 0l-38.278 38.278 96.282 96.266 38.254-38.295c10.275-10.283 10.292-26.938 0-37.205zM32.815 382.921L0.025 512l129.055-32.83 319.398-319.431-96.249-96.265L32.815 382.921zM93.179 404.792l-21.871-21.871 278.289-278.289 21.887 21.887L93.179 404.792z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-side-tool-icon.home-ui-glyph--edit::after {
  display: none;
}

/* UI編集. Had to be legible next to both of its neighbours: the four-way arrow
   a player uses to arrange their home screen, and the pencil for content. So
   it is neither an arrow nor a pencil -- a frame with corner handles, the way
   a design tool shows a selected element. It says "the screen itself", which
   is what this edits. */
.home-side-tool-icon.home-ui-glyph--uiEdit::before {
  inset: 1px;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: currentColor;
  box-shadow: none;
  transform: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M22 14h56a8 8 0 0 1 8 8v56a8 8 0 0 1-8 8H22a8 8 0 0 1-8-8V22a8 8 0 0 1 8-8Zm0 9a1 1 0 0 0-1 1v52a1 1 0 0 0 1 1h56a1 1 0 0 0 1-1V24a1 1 0 0 0-1-1Z'/%3E%3Crect x='0' y='0' width='22' height='22' rx='4'/%3E%3Crect x='78' y='0' width='22' height='22' rx='4'/%3E%3Crect x='0' y='78' width='22' height='22' rx='4'/%3E%3Crect x='78' y='78' width='22' height='22' rx='4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M22 14h56a8 8 0 0 1 8 8v56a8 8 0 0 1-8 8H22a8 8 0 0 1-8-8V22a8 8 0 0 1 8-8Zm0 9a1 1 0 0 0-1 1v52a1 1 0 0 0 1 1h56a1 1 0 0 0 1-1V24a1 1 0 0 0-1-1Z'/%3E%3Crect x='0' y='0' width='22' height='22' rx='4'/%3E%3Crect x='78' y='0' width='22' height='22' rx='4'/%3E%3Crect x='0' y='78' width='22' height='22' rx='4'/%3E%3Crect x='78' y='78' width='22' height='22' rx='4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-side-tool-icon.home-ui-glyph--uiEdit::after {
  display: none;
}

/* Bottom nav icons (案C「線+うすい面」, dispatch-ui-nav-icons): the 5 nav
   destinations (home/formation/story/gacha/collection) are now
   self-contained inline SVG built by src/client/ui/nav-icons.mjs
   (createNavIcon), not the old CSS-shape pseudo-element glyph this file
   used to draw. Every mark inside the SVG already paints with
   currentColor, so all this file needs to do is size the icon and let the
   surrounding button's `color` (--ink-soft when inactive, --accent when
   active -- see 07-home/bottom-nav.css) flow down through currentColor. No
   shape geometry lives here anymore.
   width/height (dispatch-ui-nav-consistency §2) read --canvas-nav-icon-
   size (07-home/frame.css): inside home's scaled canvas a literal 30px
   here would render far under 30 real device px once the canvas transform
   shrinks it (measured 16.1px for a 48px icon at scale 0.3361, over 2x
   larger than the other four screens' un-scaled 48px), so the token
   divides the real 30px target by --logical-scale there; the plain 30px
   fallback covers the four other screens, which never enter that scaled
   subtree and size everything in real px already. */
.home-bottom-nav-icon {
  display: block;
  width: var(--canvas-nav-icon-size, 30px);
  height: var(--canvas-nav-icon-size, 30px);
  flex: 0 0 auto;
}

.home-editable-part {
  touch-action: none;
}

.home-editable-part--selected {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

/* 大きさを変えるつまみ。
   選んでいるパーツの右下だけに出る。Sized for a finger (44px) but drawn small,
   so it marks the corner instead of covering it. */
.home-part-resize-handle {
  position: absolute;
  right: -2.4cqw;
  bottom: -2.4cqw;
  z-index: 30;
  width: 4.8cqw;
  height: 4.8cqw;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  border: max(1px, .3cqw) solid var(--paper);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 .4cqw 1.2cqw rgba(3, 8, 24, .35);
  cursor: nwse-resize;
  touch-action: none;
}

/* 整列ガイド。吸着した瞬間だけ引く。 */
.home-snap-guides {
  position: absolute;
  inset: 0;
  z-index: 28;
  pointer-events: none;
}

.home-snap-guide {
  position: absolute;
  background: var(--accent);
  opacity: .85;
}

.home-snap-guide--vertical {
  top: 0;
  bottom: 0;
  width: max(1px, .3cqw);
  margin-left: max(-.5px, -.15cqw);
}

.home-snap-guide--horizontal {
  right: 0;
  left: 0;
  height: max(1px, .3cqw);
  margin-top: max(-.5px, -.15cqw);
}

/* 画面の真ん中に合ったときは、線を強くする -- いちばん狙う線なので。 */
.home-snap-guide[data-snap-kind="canvasCenter"] {
  opacity: 1;
  box-shadow: 0 0 max(2px, .6cqw) var(--accent);
}

/* 置いた画像。
   背景として描くので、比率は作り手が枠で決める -- cover にすると勝手に切れ、
   contain にすると勝手に余白ができる。ここは「置いた通り」が正しい。 */
.home-free-image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* 回すつまみ。上に伸ばした位置に置く -- 大きさのつまみと同じ角にあると、
   どちらを掴んだのか指では分からない。 */
.home-part-rotate-handle {
  position: absolute;
  top: -6cqw;
  left: 50%;
  z-index: 30;
  width: 4.8cqw;
  height: 4.8cqw;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  margin-left: -2.4cqw;
  border: max(1px, .3cqw) solid var(--paper);
  border-radius: 50%;
  background: var(--ink-soft);
  box-shadow: 0 .4cqw 1.2cqw rgba(3, 8, 24, .35);
  cursor: grab;
  touch-action: none;
}

.home-ui-aspect-toggle--on {
  color: var(--paper);
  border-color: var(--accent);
  background: var(--accent);
}

.eyebrow {
  /* Only used by the asset picker (asset-picker-ui.mjs), which renders
     exclusively inside the scaled .home-game-canvas -- see the frame.css
     comment on --canvas-min-font-size. The --screen-min-font-size fallback
     is defense-in-depth if that ever changes. */
  margin: 0 0 12px;
  color: var(--accent-2);
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), 0.78rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(2.4rem, 7vw, 5.6rem);
  line-height: 0.95;
}

p {
  color: var(--muted);
  line-height: 1.8;
}

.secondary-action {
  margin-top: 24px;
  padding: 14px 18px;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.home-ui-skin-actions {
  position: absolute;
  left: 28px;
  bottom: 156px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  width: min(760px, calc(100% - 56px));
  z-index: 30;
}

/* Player-mode default: the UI-parts layer list and "open UI editor" card
   are editor chrome, hidden via the native `hidden` attribute until edit
   mode is toggled on. A plain `display: flex` above would otherwise beat
   the user-agent `[hidden]` rule on specificity/source order, so this is
   spelled out explicitly. */
.home-ui-skin-actions[hidden] {
  display: none;
}

.home-ui-skin-actions .secondary-action {
  margin-top: 0;
}

.home-workspace-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  min-width: 0;
  min-height: 154px;
  padding: var(--space-5) 30px;
  color: var(--game-blue-dark);
  border: 4px solid #fff;
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(47, 102, 232, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(47, 102, 232, 0.08) 1px, transparent 1px),
    rgba(255, 255, 255, 0.94);
  background-size: 20px 20px;
  box-shadow:
    6px 7px 0 rgba(33, 75, 143, 0.5),
    inset 0 0 0 2px rgba(47, 102, 232, 0.28);
  cursor: pointer;
  text-align: left;
}

/* 今使っている画像を見せるボタン。
   It replaced a 154px card with a 4px border and a hard shadow that said
   「画像を差し替える」 and showed nothing -- the loudest thing in the sheet
   for one of its quieter jobs. The picture is the button now. */
.home-ui-image-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}

.home-ui-image-button__preview {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background-color: var(--surface-strong, var(--paper));
  background-position: center;
  background-size: cover;
}

/* 画像を設定していない状態。「未設定」ではなく「既定の見た目」なので、
   欠けているのではなく初期状態だと分かる形にする。 */
.home-ui-image-button__preview--empty {
  border: 1px dashed var(--line);
}

.home-ui-image-button__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.home-ui-image-button__name {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-ui-image-button__action {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
}

.home-ui-kit-import {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}

.home-ui-kit-import__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.home-ui-kit-import__title {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.home-ui-kit-import__description,
.home-ui-kit-import__status {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.home-ui-kit-import__button {
  width: 100%;
  white-space: nowrap;
}

.home-ui-kit-import__status {
  margin: 0;
}

.home-ui-kit-import__status--success {
  color: var(--color-success);
}

.home-ui-kit-import__status--error {
  color: var(--color-danger);
}

/* 寄る操作。指が二本ある人はつまめばよく、ここはマウスと、確実に等倍へ戻る
   道のため。 */
.home-ui-zoom-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.home-ui-zoom-value {
  min-width: 52px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.home-ui-layer-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1.0185cqw;
  width: min(760px, 100%);
  max-height: 42.5926cqw;
  min-height: 0;
  padding: 1.4815cqw;
  overflow: hidden;
  color: var(--game-blue-dark);
  border: max(2px, 0.3704cqw) solid #fff;
  border-radius: 2.2222cqw;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0.5556cqw 0.6481cqw 0 rgba(33, 75, 143, 0.36),
    inset 0 0 0 max(1px, 0.1852cqw) rgba(47, 102, 232, 0.2);
}

.home-ui-layer-panel-title {
  margin: 0;
  color: var(--game-pink);
  font-size: var(--screen-body-font-size);
  font-weight: 900;
  letter-spacing: 0;
}

.home-ui-layer-list {
  display: grid;
  gap: 0.7407cqw;
  min-height: 0;
  max-height: 32.2222cqw;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0.7407cqw;
}

.home-ui-layer-category-title {
  margin-top: 0.463cqw;
  color: var(--game-pink);
  font-size: var(--screen-caption-font-size);
  font-weight: 900;
}

.home-ui-layer-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3704cqw 0.9259cqw;
  align-items: center;
  min-height: 5.7407cqw;
  padding: 0.9259cqw 1.1111cqw;
  color: var(--game-blue-dark);
  border: max(1px, 0.1852cqw) solid rgba(33, 75, 143, 0.22);
  border-radius: 1.4815cqw;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  text-align: left;
}

.home-ui-layer-item--selected {
  border-color: var(--game-blue);
  background: linear-gradient(135deg, rgba(47, 102, 232, 0.16), rgba(66, 216, 212, 0.14));
  box-shadow: inset 0 0 0 max(1px, 0.1852cqw) rgba(47, 102, 232, 0.14);
}

.home-ui-layer-item--hidden {
  opacity: 0.62;
}

.home-ui-layer-item-label {
  overflow: hidden;
  font-size: var(--screen-body-font-size);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-ui-layer-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.463cqw;
  min-width: 0;
  overflow: hidden;
}

.home-ui-layer-item-badge {
  overflow: hidden;
  padding: 0.1852cqw 0.6481cqw;
  color: #5872a7;
  border: max(1px, 0.0926cqw) solid rgba(88, 114, 167, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(88, 114, 167, 0.1);
  font-size: var(--screen-caption-font-size);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Decorative visibility/lock indicator: a plain color toggle, not text
   ("ON"/"OFF"/"LOCK") concatenated onto the item label. The full state is
   still available to assistive tech via the item's own aria-label. */
.home-ui-layer-item-state {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: grid;
  width: 1.8519cqw;
  height: 1.8519cqw;
  min-width: 18px;
  min-height: 18px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #42d8d4, #2f66e8);
  box-shadow: inset 0 0 0 max(1px, 0.15cqw) rgba(255, 255, 255, 0.6);
}

.home-ui-layer-item-state[data-hidden="true"] {
  background: linear-gradient(135deg, #9aa9c9, #65779c);
}

.home-ui-layer-item-state[data-locked="true"]::after {
  width: 46%;
  height: 46%;
  border: max(1px, 0.1852cqw) solid #fff;
  border-radius: 2px;
  content: "";
}

.home-ui-policy-summary {
  grid-column: 1 / -1;
  padding: 0.7407cqw 1.1111cqw;
  color: #31518f;
  border: max(1px, 0.1852cqw) solid rgba(47, 102, 232, 0.16);
  border-radius: 1.2963cqw;
  background: rgba(255, 255, 255, 0.7);
  font-size: var(--screen-label-font-size);
  font-weight: 900;
}

.home-ui-position-controls button:disabled,
.home-ui-position-controls input:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.home-workspace-card::before {
  position: absolute;
  top: -19px;
  left: 50%;
  padding: 0.3704cqw 2.2222cqw;
  color: #fff;
  border: 3px solid #fff;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--game-pink), #ef3f94);
  box-shadow: 3px 4px 0 rgba(33, 75, 143, 0.42);
  content: "MISSION";
  font-size: var(--screen-caption-font-size);
  font-weight: 900;
  letter-spacing: 0;
  transform: translateX(-50%);
}

.home-workspace-icon {
  display: grid;
  width: 6.6667cqw;
  height: 6.6667cqw;
  place-items: center;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 46%),
    linear-gradient(135deg, #38d6c8, #7651ff);
}

.home-workspace-copy {
  display: grid;
  gap: 0.463cqw;
}

.home-workspace-copy strong {
  font-size: max(var(--screen-min-font-size), 2.4074cqw);
  line-height: 1.05;
}

.home-workspace-copy span {
  color: var(--muted);
  font-size: var(--screen-label-font-size);
  font-weight: 700;
  line-height: 1.25;
}

.home-ui-skin-draft-status {
  flex-basis: 100%;
  margin: 0;
  padding: 0.9259cqw 1.2963cqw;
  color: var(--text);
  border: max(1px, 0.0926cqw) solid rgba(47, 208, 200, 0.28);
  border-radius: 1.2963cqw;
  background: rgba(47, 208, 200, 0.1);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 800;
  line-height: 1.45;
}

.home-ui-position-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9259cqw;
  align-items: center;
  flex-basis: 100%;
  padding: 1.1111cqw;
  border: max(1px, 0.0926cqw) solid rgba(255, 255, 255, 0.14);
  border-radius: 1.2963cqw;
  background: rgba(255, 255, 255, 0.06);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
}

.home-ui-position-field {
  display: inline-flex;
  gap: 0.7407cqw;
  align-items: center;
  color: var(--text);
  font-weight: 800;
}

.home-ui-position-field input {
  width: 7.7778cqw;
  min-height: 3.7037cqw;
  padding: 0.7407cqw 0.9259cqw;
  color: var(--text);
  border: max(1px, 0.0926cqw) solid rgba(255, 255, 255, 0.18);
  border-radius: 0.9259cqw;
  background: rgba(7, 9, 16, 0.52);
  font: inherit;
}

.home-ui-position-stepper {
  display: inline-flex;
  gap: 0.5556cqw;
}

.home-ui-position-step {
  min-width: 3.7037cqw;
  min-height: 3.7037cqw;
  padding: 0.7407cqw 0.9259cqw;
}

.primary-action,
.ghost-action {
  min-height: 3.7037cqw;
  padding: 0.8333cqw 1.2963cqw;
  border-radius: 1.2963cqw;
  cursor: pointer;
  font-weight: 800;
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
}

.primary-action {
  color: #120b08;
  border: 0;
  background: linear-gradient(135deg, var(--accent-2), #f9d37a);
  box-shadow: 0 1.2963cqw 2.7778cqw rgba(47, 208, 200, 0.2);
}

.ghost-action {
  color: var(--text);
  border: max(1px, 0.0926cqw) solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

/* 数値は畳んでおく。
   置く作業は掴んで動かすことで、数値はその後で「きっちり合わせたい」ときの
   道具。All six boxes and a d-pad open at all times is the sheet shouting
   numbers at someone who is arranging pictures. */
.home-ui-number-fields {
  display: grid;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.home-ui-number-fields__summary {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.home-ui-number-fields__summary::-webkit-details-marker {
  display: none;
}

.home-ui-number-fields__summary::before {
  content: "▸ ";
}

.home-ui-number-fields[open] .home-ui-number-fields__summary::before {
  content: "▾ ";
}

/* 吸着が入っているかどうかは、押す前に読めるところに。 */
.home-ui-snap-toggle--on {
  color: var(--paper);
  border-color: var(--accent);
  background: var(--accent);
}

/* ボタンの規格。4つ作れば全部のボタンが作れる、という寸法表。 */
.home-ui-size-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.home-ui-size-presets__label {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.home-ui-size-preset--selected {
  color: var(--paper);
  border-color: var(--accent);
  background: var(--accent);
}

.home-ui-current-parts { margin-top: 12px; padding: 10px; border: 1px solid var(--pf-frame); border-radius: 8px; background: var(--pf-surface); color: var(--pf-outline); }
.home-ui-current-parts summary { cursor: pointer; font-weight: 700; }
.home-ui-current-parts p { font-size: 12px; line-height: 1.6; }
.home-ui-current-parts h4 { margin: 12px 0 4px; color: var(--pf-primary); }
.home-ui-current-parts ul { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.8; }

.ui-part-appearance-editor { padding: 8px 0; border-bottom: 1px solid var(--pf-frame); }
.ui-part-appearance-editor > :not(summary) { margin-top: 8px; }
.ui-part-appearance-editor select, .ui-part-appearance-editor input { max-width: 100%; box-sizing: border-box; }
.ui-part-appearance-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-part-appearance-actions button { min-height: 40px; padding: 6px 10px; border: 1px solid var(--pf-frame); background: var(--pf-surface); color: var(--pf-primary); border-radius: 6px; }
.home-ui-current-parts ul { list-style: none; padding-left: 0; }

.ui-part-appearance-editor input[type="file"] { width: 100%; font-size: 12px; }
.ui-part-appearance-editor select, .ui-part-appearance-editor input[type="text"], .ui-part-appearance-editor input[type="number"] { width: 100%; font-size: 13px; }

/* The UI editor sheet.

   This used to be a card mounted as a home UI slot, which meant it lived
   inside .home-game-canvas -- and that canvas is scaled to fit the frame
   (0.336 on a phone), so every px inside it painted at a third of its value.
   Live-measured before this change: the layer list's labels rendered at 6.1
   real px and its rows at 20.8, against the spec's 12px text floor and 44px
   target floor (ui-style-spec-b.md §13). Nothing in it could be read or
   reliably hit.

   The editor is a tool, not part of the game being edited, so it now renders
   outside the canvas and its px are real px. Everything below is therefore
   written in real units on purpose: cqw here would resolve against whatever
   container happens to be nearest, which is exactly the coupling that caused
   the problem.

   Its palette stays deliberately unlike the game screens' (§7 allows the
   editor chrome its own identity) -- being visibly "not the game" is what
   tells an author which mode they are in. */
.home-editor-sheet {
  /* Absolute against .home-game-frame, not fixed against the viewport: the
     product is meant to hold together inside one phone-sized box, and a
     viewport-fixed sheet broke out of it.

     下半分だけを使う。It used to be inset:0 -- the canvas was behind the
     panel that arranges it, which makes free placement impossible. The canvas
     shrinks to whatever is left above (installLogicalCanvasScale reads this
     element's height), so the whole screen stays visible while it is edited. */
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  /* 45%。The canvas keeps the other 55% and scales to fit it, so the whole
     home screen stays on screen while it is arranged -- measured 130px of
     canvas at 62%, which is too little to place anything into. */
  max-height: 45%;
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--paper);
  box-shadow: 0 -6px 18px rgba(3, 8, 24, .18);
}

/* たたんだ状態。The header alone, so the canvas gets nearly the whole frame
   for the drag that the maker came here to do. */
.home-editor-sheet[data-collapsed="true"] {
  max-height: none;
  grid-template-rows: auto;
}

.home-editor-sheet[data-collapsed="true"] .home-ui-skin-actions {
  display: none;
}

.home-editor-sheet__header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.home-editor-sheet__title {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}

.home-editor-sheet__close {
  min-width: 72px;
  min-height: 44px;
  padding: 0 16px;
  color: #fff;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
}

.home-editor-sheet__close:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* The actions column scrolls; the header above it does not. */
.home-editor-sheet .home-ui-skin-actions {
  /* It was absolutely positioned as a home UI part inside the canvas, which
     here took it out of the sheet entirely: measured at 2791px tall starting
     2135px above the viewport. Back in flow, it fills the sheet's second row
     and scrolls inside it.

     A plain vertical flex column, not a grid. The card version was a wrapping
     flex row whose children carried flex-basis:100% to force line breaks;
     re-declaring it as a grid left those basis values inert and the rows
     stacked on top of each other -- measured, the 2598px layer panel and the
     controls below it all started within 150px of one another. One column is
     what this list actually is. */
  position: static;
  display: flex;
  flex-direction: column;
  /* nowrap is the point. The card version was a wrapping row; turning it into
     a column while wrap was still inherited made it a multi-column layout, so
     once the content passed the sheet's height it started a second column and
     every remaining block was drawn back at the top -- measured, the panel,
     the status line and the controls all began at the same y as the first
     button. */
  flex-wrap: nowrap;
  gap: 12px;
  align-items: stretch;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
}

/* The panel is the tall one; nothing else may be squashed to make room for
   it, and it must not be stretched to fill leftovers either. */
.home-editor-sheet .home-ui-skin-actions > * {
  flex: 0 0 auto;
}

/* A theme must remain readable in a sheet narrower than the viewport. */
.home-editor-sheet .ui-theme-picker__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
@media (max-height: 500px) {
  .home-game-frame[data-ui-orientation='portrait'] > .home-editor-sheet:not([data-collapsed='true']) {
    max-height: 75%;
  }
  .home-editor-sheet .home-ui-skin-actions { padding: 8px; }
  .home-editor-sheet__header { gap: 4px; padding: 6px; flex-wrap: wrap; }
  .home-editor-sheet__title { flex-basis: 100%; font-size: 14px; }
  .home-editor-sheet__close { min-width: 60px; padding-inline: 8px; }
  .home-editor-sheet .ui-theme-card__preview { height: 40px; }
}

/* Every control inside the sheet is a real control: 44px targets, text at or
   above the 12px floor. These override the cqw-based sizes the same elements
   carry for their old life inside the canvas. */
.home-editor-sheet .home-workspace-card,
.home-editor-sheet .ghost-action,
.home-editor-sheet .primary-action,
.home-editor-sheet .home-ui-layer-item {
  min-height: 44px;
  font-size: 15px;
}

/* The card was styled as a game part: a 154px-tall board with a grid-paper
   fill, a 4px white border, a hard drop shadow and a "MISSION" ribbon. Inside
   a tool sheet that reads as noise -- and stacked with the panel's own
   translucent white fill it was what washed the screen out. It is a button
   that opens the image picker, so it looks like one. */
.home-editor-sheet .home-workspace-card {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: none;
  text-align: left;
}

.home-editor-sheet .home-workspace-card::before {
  content: none;
}

.home-editor-sheet .home-workspace-icon {
  width: 24px;
  min-width: 24px;
  height: 24px;
  border-radius: 8px;
}

/* Opaque surfaces throughout: the editor keeps its own palette (it should be
   obvious you are not looking at the game), but every panel here was a
   translucent white or tinted wash layered over another one, and the stack of
   them is what produced the blown-out look. */
.home-editor-sheet .home-ui-layer-panel,
.home-editor-sheet .home-ui-position-controls,
.home-editor-sheet .home-ui-skin-draft-status {
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
}

.home-editor-sheet .home-ui-position-controls,
.home-editor-sheet .home-ui-skin-draft-status {
  padding: 12px;
  border-radius: 14px;
}

.home-editor-sheet .home-ui-layer-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.home-editor-sheet .home-ui-layer-item--selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
}

.home-editor-sheet .home-ui-layer-panel {
  width: 100%;
  max-height: none;
  padding: 12px;
  border-width: 1px;
  border-radius: 14px;
  box-shadow: none;
}

.home-editor-sheet .home-ui-layer-panel-title,
.home-editor-sheet .home-ui-layer-category-title {
  font-size: 13px;
}

/* One scroller, not three. The panel and its list both carried their own
   overflow from the canvas era, where the panel had a fixed max-height; in
   the sheet the actions column is the only thing that should scroll, so these
   two let their content through to it. */
.home-editor-sheet .home-ui-layer-list {
  gap: 6px;
  max-height: none;
  overflow: visible;
}

.home-editor-sheet .home-ui-layer-panel {
  overflow: visible;
}

.home-editor-sheet .home-ui-layer-item {
  display: grid;
  gap: 2px;
  align-content: center;
  padding: 8px 12px;
  text-align: left;
}

.home-editor-sheet .home-ui-layer-item-label {
  font-size: 15px;
}

.home-editor-sheet .home-ui-layer-item-state,
.home-editor-sheet .home-ui-layer-item-badge {
  font-size: 12px;
}

.home-editor-sheet .home-ui-position-controls {
  font-size: 13px;
}

.home-editor-sheet .home-ui-position-controls button,
.home-editor-sheet .home-ui-position-stepper button {
  min-width: 44px;
  min-height: 44px;
  font-size: 15px;
}

.home-editor-sheet .home-ui-position-field input,
.home-editor-sheet .home-ui-position-field select {
  min-height: 44px;
  font-size: 15px;
}

.home-editor-sheet .home-ui-skin-draft-status,
.home-editor-sheet .home-ui-policy-summary {
  font-size: 13px;
}

.home-editor-sheet__collapse {
  min-height: 36px;
  padding: 0 12px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

/* Landscape editing reserves a left tool column instead of reducing canvas height. */
.home-game-frame[data-ui-orientation='landscape'] > .home-editor-sheet {
  top: 0; bottom: 0; left: 0; right: auto;
  width: clamp(240px, 25%, 360px); max-width: 45%; height: 100%; max-height: none;
  box-sizing: border-box; border-radius: 0; border-top: 0; border-right: 1px solid var(--line);
  box-shadow: 4px 0 12px rgba(3,8,24,.12); overflow: hidden;
}
.home-game-frame[data-ui-orientation='landscape'] .home-editor-sheet__header { padding: 8px; gap: 6px; flex-wrap: wrap; }
.home-game-frame[data-ui-orientation='landscape'] .home-editor-sheet__title { flex: 1 0 100%; font-size: 16px; }
.home-game-frame[data-ui-orientation='landscape'] .home-editor-sheet__collapse { min-height: 44px; flex: 1; }
.home-game-frame[data-ui-orientation='landscape'] .home-editor-sheet__close { min-width: 60px; padding: 0 10px; }
.home-game-frame[data-ui-orientation='landscape'] .home-editor-sheet .home-ui-skin-actions { width: 100%; box-sizing: border-box; padding: 12px; overflow-x: hidden; min-width: 0; }
.home-game-frame[data-ui-orientation='landscape'] .home-editor-sheet .home-ui-skin-actions > * { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; }
.home-game-frame[data-ui-orientation='landscape'] > .home-editor-sheet[data-collapsed='true'] { width: 56px; grid-template-rows: auto; align-content: start; }
.home-game-frame[data-ui-orientation='landscape'] .home-editor-sheet[data-collapsed='true'] .home-editor-sheet__header { flex-direction: column; padding: 4px; }
.home-game-frame[data-ui-orientation='landscape'] .home-editor-sheet[data-collapsed='true'] .home-editor-sheet__title { display: none; }
.home-game-frame[data-ui-orientation='landscape'] .home-editor-sheet[data-collapsed='true'] :is(.home-editor-sheet__collapse,.home-editor-sheet__close) { width: 44px; min-width: 44px; padding: 4px; font-size: 12px; overflow-wrap: anywhere; }
.home-game-frame[data-ui-orientation='landscape']:has(> .home-editor-sheet) > .home-notice-banner {
  left: calc(var(--canvas-fitted-left, 0px) + var(--canvas-fitted-width) * .10);
  bottom: calc(100% - var(--canvas-fitted-height) * .79);
  width: calc(var(--canvas-fitted-width) * .24);
}
.home-game-frame[data-ui-orientation='landscape']:has(> .home-editor-sheet) .home-notice-banner__slide { height: clamp(42px, calc(var(--canvas-fitted-height) * .115), 84px); }

/* Mounted on .home-game-frame rather than inside the scaled canvas: this is a
   control surface, and inside the canvas every px painted at a third (the
   volume slider added here measured 14.8 real px against its declared 44).
   Real px, filling the phone-sized box the same way the editor sheet does. */
.home-profile-panel {
  --ink: var(--pf-outline);
  --ink-soft: var(--pf-muted);
  --ink-muted: var(--pf-muted);
  --muted: var(--pf-muted);
  --surface: var(--pf-surface);
  --paper: var(--pf-surface);
  --line: var(--pf-frame);
  /* This drawer is outside the scaled game canvas: use real screen units. */
  --logical-scale: 1;
  --canvas-text-md: 16px;
  --canvas-text-lg: 20px;
  --canvas-text-xl: 24px;
  --canvas-tap-target-min: 44px;
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elev-2);
}

.home-profile-panel-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-5);
}

.home-profile-panel-eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--ink-muted);
  font-size: var(--canvas-text-md, var(--text-md));
  font-weight: 900;
  letter-spacing: 0;
}

.home-profile-panel h2,
.home-profile-panel h3,
.home-profile-panel dl,
.home-profile-panel p {
  margin: 0;
}

.home-profile-panel h2 {
  color: var(--ink);
  font-size: var(--canvas-text-xl, var(--text-xl));
  line-height: 1.1;
}

.home-profile-panel-close {
  flex: 0 0 auto;
  /* dispatch-ui-touch-and-readability §1: this button renders inside
     .home-game-canvas, so both dimensions need the canvas-corrected 44px
     real floor (see --canvas-tap-target-min, 07-home/frame.css) --
     max() keeps the wider 104px logical shape wherever that already
     clears 44px real (e.g. an un-scaled/desktop-width frame). */
  min-width: max(104px, var(--canvas-tap-target-min, 44px));
  min-height: var(--canvas-tap-target-min, 44px);
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--canvas-text-lg, var(--text-lg));
  font-weight: 900;
}

.home-profile-panel-section {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.home-profile-panel-section h3 {
  color: var(--ink);
  font-size: var(--canvas-text-lg, var(--text-lg));
  line-height: 1.2;
}

.home-profile-panel-list {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
}

.home-profile-panel-list dt {
  color: var(--ink-muted);
  font-size: var(--canvas-text-md, var(--text-md));
  font-weight: 900;
}

.home-profile-panel-list dd {
  color: var(--ink);
  font-size: var(--canvas-text-lg, var(--text-lg));
  font-weight: 900;
  line-height: 1.35;
}

.home-profile-panel-comment {
  padding: var(--space-3) var(--space-4);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--canvas-text-md, var(--text-md));
  font-weight: 800;
  line-height: var(--lh-normal);
}

.home-profile-access-guide {
  background: var(--paper);
}

.home-profile-access-guide h3 {
  color: var(--ink);
}

.home-profile-access-guide__body,
.home-profile-access-guide__next {
  font-size: var(--canvas-text-md, var(--text-md));
  font-weight: 900;
  line-height: var(--lh-normal);
}

.home-profile-access-guide__body {
  color: var(--ink-soft);
}

.home-profile-access-guide__next {
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.home-profile-access-guide--warning {
  border-color: var(--color-danger);
}

.home-profile-access-guide--warning .home-profile-access-guide__next {
  color: var(--color-danger);
  background: var(--paper);
  border: 1px solid var(--color-danger);
}

.home-profile-access-guide--ready {
  border-color: var(--color-success);
}

.home-profile-access-guide--ready .home-profile-access-guide__next {
  color: var(--color-success);
  background: var(--paper);
  border: 1px solid var(--color-success);
}

.home-profile-access-guide--notice .home-profile-access-guide__next {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
}

.home-profile-auth-section {
  gap: var(--space-4);
}

.home-profile-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.home-profile-auth-tab,
.home-profile-auth-submit {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-weight: 900;
}

.home-profile-auth-tab {
  /* dispatch-ui-touch-and-readability §1: no explicit min-height existed
     before; padding alone did not clear the real 44px floor once this
     canvas-internal button's logical px got scaled down. */
  min-height: var(--canvas-tap-target-min, 44px);
  padding: var(--space-3) var(--space-4);
  color: var(--ink-soft);
  background: var(--surface);
  font-size: var(--canvas-text-lg, var(--text-lg));
}

.home-profile-auth-tab[data-active="true"] {
  /* Selected state (§7): a light accent tint, not a solid ink fill. */
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: var(--accent);
}

.home-profile-auth-form {
  display: grid;
  gap: var(--space-3);
}

.home-profile-auth-field {
  display: grid;
  gap: var(--space-1);
  color: var(--ink-soft);
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), calc(17px / var(--logical-scale, 1)));
  font-weight: 900;
}

.home-profile-auth-input {
  width: 100%;
  /* dispatch-ui-touch-and-readability §1: same canvas correction as the
     buttons above, applied to the login/register text inputs. */
  min-height: max(52px, var(--canvas-tap-target-min, 44px));
  padding: 0 var(--space-4);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-sizing: border-box;
  font: inherit;
  font-size: var(--canvas-text-lg, var(--text-lg));
  font-weight: 800;
}

.home-profile-auth-input:focus {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.home-profile-auth-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.home-profile-auth-submit {
  /* Primary CTA (§7, 1 per screen): this panel's single submit action.
     dispatch-ui-touch-and-readability §1: same canvas correction as the
     other panel buttons -- also covers .home-profile-member-submit /
     .home-profile-member-accept / .asset-picker-upgrade-button, which all
     share this class. */
  justify-self: start;
  min-height: max(54px, var(--canvas-tap-target-min, 44px));
  padding: 0 var(--space-5);
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  font-size: var(--canvas-text-lg, var(--text-lg));
}

.home-profile-auth-submit:disabled {
  opacity: 0.62;
}

.home-profile-auth-submit--secondary {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

.home-profile-password-forgot {
  justify-self: start;
  min-height: var(--canvas-tap-target-min, 44px);
  padding: 0;
  color: var(--accent);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--canvas-text-md, var(--text-md));
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.home-profile-password-forgot:disabled {
  opacity: 0.62;
}

.home-profile-password-rule {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), calc(15px / var(--logical-scale, 1)));
  font-weight: 800;
}

.home-profile-auth-message {
  min-height: 24px;
  color: var(--ink-soft);
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), calc(17px / var(--logical-scale, 1)));
  font-weight: 900;
}

.home-profile-auth-message[data-status="success"] {
  color: var(--color-success);
}

.home-profile-auth-message[data-status="error"] {
  color: var(--color-danger);
}

.home-profile-members-section {
  gap: var(--space-4);
}

.home-profile-members-list {
  display: grid;
  gap: var(--space-2);
}

.home-profile-members-capacity {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), calc(17px / var(--logical-scale, 1)));
  font-weight: 900;
}

.home-profile-members-empty {
  color: var(--ink-muted);
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), calc(17px / var(--logical-scale, 1)));
  font-weight: 800;
}

.home-profile-member-row {
  display: grid;
  /* Four tracks, not three: a row awaiting approval carries both 参加を承認 and
     断る. An empty auto track collapses, so rows with fewer children are
     unaffected. */
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.home-profile-member-row__user {
  color: var(--ink);
  font-size: var(--canvas-text-md, var(--text-md));
  font-weight: 900;
}

/* The affirmative action in this list. It is the only reason an owner opens
   the member section after sharing a link, so it carries the accent while
   断る/削除 stay quiet. */
.home-profile-member-approve {
  min-height: max(44px, var(--canvas-tap-target-min, 44px));
  padding: 0 var(--space-3);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent);
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), calc(15px / var(--logical-scale, 1)));
  font-weight: 900;
}

.home-profile-member-approve:disabled {
  opacity: 0.62;
}

.home-profile-member-row__meta {
  color: var(--ink-soft);
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), calc(15px / var(--logical-scale, 1)));
  font-weight: 900;
}

.home-profile-member-invite-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto) auto;
  gap: var(--space-3);
  align-items: end;
}

.home-profile-member-invite-form .home-profile-auth-field {
  min-width: 0;
}

.home-profile-member-submit,
.home-profile-member-accept {
  justify-self: stretch;
}

.home-profile-member-role {
  /* dispatch-ui-touch-and-readability §1: was already a literal 44px,
     the exact real target, but declared inside .home-game-canvas where a
     literal px renders smaller after the canvas transform -- same fix as
     .home-profile-operation-item__action above. */
  min-height: var(--canvas-tap-target-min, 44px);
  padding: 0 var(--space-3);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--canvas-text-sm, var(--text-sm));
  font-weight: 900;
}

.home-profile-member-remove {
  /* Destructive action: state color, not the general --ink button fill.
     dispatch-ui-touch-and-readability §1: 38px logical was already under
     the real 44px floor even ignoring the canvas transform; both
     dimensions now read the canvas-corrected tap-target minimum. */
  min-height: var(--canvas-tap-target-min, 44px);
  min-width: var(--canvas-tap-target-min, 44px);
  padding: 0 var(--space-3);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: var(--canvas-text-xs, var(--text-xs));
  font-weight: 900;
}

.home-profile-member-remove:disabled {
  opacity: 0.58;
}

.home-profile-member-activity {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.home-profile-member-activity h4 {
  margin: 0;
  color: var(--ink-muted);
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), calc(15px / var(--logical-scale, 1)));
  font-weight: 1000;
}

.home-profile-member-activity-list {
  display: grid;
  gap: var(--space-1);
}

.home-profile-member-activity-row,
.home-profile-member-activity-empty {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--canvas-text-xs, var(--text-xs));
  font-weight: 850;
  line-height: var(--lh-normal);
}

/* Player sound settings (home-screen.mjs's renderAudioSettingsSection),
   restored from the legacy home config. Two volumes and, when the project has
   audio to offer, a per-effect override that wins over the author's binding.
   Each slider is paired with its number: a bare track gives no way to tell 20
   from 30 (ui-style-spec-b.md §13). */
.home-audio-settings__row {
  display: grid;
  gap: 0.7407cqw;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: center;
  padding: 0.5556cqw 0;
}

.home-audio-settings__row--override {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.home-audio-settings__label {
  display: flex;
  align-items: center;
  gap: max(6px, 0.7407cqw);
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 800;
}

.home-audio-settings__icon {
  flex: 0 0 max(32px, 4.4cqw);
  width: max(32px, 4.4cqw);
  aspect-ratio: 1;
  object-fit: contain;
}

.home-audio-settings__slider {
  appearance: none;
  width: 100%;
  min-height: 44px;
  background:
    url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/settings/slider-fill.webp") left center / calc(var(--audio-value, 0) * 1%) 16px no-repeat,
    url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/settings/slider-track.webp") center / 100% 16px no-repeat;
}

.home-audio-settings__slider::-webkit-slider-runnable-track {
  height: 16px;
  background: transparent;
}

.home-audio-settings__slider::-webkit-slider-thumb {
  width: 32px;
  height: 32px;
  margin-top: -8px;
  appearance: none;
  border: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/settings/slider-thumb.webp") center / contain no-repeat;
}

.home-audio-settings__value {
  min-width: 3ch;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.home-audio-settings__select {
  width: 100%;
  min-height: 44px;
  padding: 0 0.7407cqw;
  color: var(--ink);
  border: max(1px, 0.0926cqw) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 800;
}

.home-audio-settings__note {
  margin: 0.7407cqw 0 0;
  color: var(--ink-soft);
  font-size: var(--screen-min-font-size);
  font-weight: 800;
}

/* The owner's share links.
   This panel is mounted on the frame rather than inside the scaled canvas, so
   these lengths paint as written. The --canvas-* tokens still appear because
   every other rule in this file uses them and they resolve to their fallbacks
   here; keeping the same form means a rule that moves inside the canvas later
   does not silently start painting at a third of its size. */
.home-profile-shares-section {
  gap: var(--space-4);
  min-width: 0;
}

.home-profile-share-card {
  display: grid;
  /* Without this the card cannot shrink below the URL field's intrinsic width
     -- an <input> refuses to go under its own default size, and the whole
     panel widens to fit a URL nobody needs to read in full. */
  min-width: 0;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.home-profile-share-card__title {
  color: var(--ink);
  font-size: var(--canvas-text-md, var(--text-md));
  font-weight: 900;
}

.home-profile-share-card__body {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), calc(15px / var(--logical-scale, 1)));
  font-weight: 900;
}

/* A read-only input rather than text: this is the one thing on the panel the
   owner came to take away with them, and selecting it by hand has to work when
   the clipboard does not. */
.home-profile-share-card__url {
  width: 100%;
  min-width: 0;
  min-height: max(48px, var(--canvas-tap-target-min, 44px));
  padding: 0 var(--space-3);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), calc(15px / var(--logical-scale, 1)));
}

.home-profile-share-card__blocked {
  margin: 0;
  color: var(--color-danger, var(--accent));
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), calc(15px / var(--logical-scale, 1)));
  font-weight: 900;
}

.home-profile-share-card__actions {
  display: grid;
  gap: var(--space-2);
}

/* Copy is what the owner is here for; making and stopping a link are rarer and
   more destructive, so only one of the three carries the accent. */
.home-profile-share-card__actions .home-profile-share-create,
.home-profile-share-card__actions .home-profile-share-revoke {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

.home-profile-share-card__actions .home-profile-auth-submit {
  justify-self: stretch;
  text-align: center;
}

/* Someone is waiting at the join link. This mark lives on the avatar button on
   the home screen, INSIDE the scaled canvas, so its sizes go through the
   --canvas-* corrections -- a raw 12px badge would paint at about four. */
.home-avatar-button {
  position: relative;
}

.home-avatar-button__badge {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  min-width: max(28px, var(--canvas-tap-target-min, 44px) * 0.6);
  min-height: max(28px, var(--canvas-tap-target-min, 44px) * 0.6);
  padding: 0 var(--space-1);
  transform: translate(35%, -35%);
  color: var(--on-accent);
  border: 2px solid var(--paper);
  border-radius: var(--radius-pill);
  background: var(--accent);
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), calc(15px / var(--logical-scale, 1)));
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

/* Backup. Below the share links, because both are about the work leaving here
   -- and this is the one that matters if anything ever goes wrong. */
.home-profile-backup-section {
  gap: var(--space-3);
}

.home-profile-backup-lead {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), calc(15px / var(--logical-scale, 1)));
  font-weight: 900;
  line-height: 1.6;
}

/* What comes back and what does not, stated where the button is. Nobody should
   find out at restore time that the images were never in the file. */
.home-profile-backup-coverage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.home-profile-backup-coverage__term {
  color: var(--ink);
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), calc(14px / var(--logical-scale, 1)));
  font-weight: 900;
  white-space: nowrap;
}

.home-profile-backup-coverage__detail {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), calc(14px / var(--logical-scale, 1)));
  font-weight: 900;
  line-height: 1.5;
}

.home-profile-backup-download {
  justify-self: stretch;
  text-align: center;
}

/* パネルの中の状態行。ホームの上に浮いていた「編集可能」の札の移設先。
   ここは開いた人に向けた画面なので、事務連絡はここでよい。 */
.home-profile-access-status {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.home-profile-access-status[data-tone="warning"] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.home-profile-access-status__label {
  color: var(--accent);
  font-size: var(--canvas-text-sm, var(--text-sm));
  font-weight: 900;
}

.home-profile-access-status__message {
  color: var(--ink);
  font-size: var(--canvas-text-xs, var(--text-xs));
}

.home-character-panel__transform {
  display: grid;
  gap: 12px;
}

.home-character-panel__transform-control {
  display: grid;
  grid-template-columns: minmax(100px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: var(--ink);
  font-size: var(--canvas-text-sm, var(--text-sm));
  font-weight: 800;
}

.home-character-panel__transform-control input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

/* 設定の窓。

   プロフィールの窓と同じ作り（inset: 0）だと画面いっぱいに広がるが、中身は
   音量の摘みが3つだけ。空の面積のほうが中身より広くなる。

   高さは中身なり（auto）、上限だけ持たせる。幅も詰めて、後ろのホームが少し
   見えるようにする -- 見えていれば、これが画面ではなく窓だと分かる。 */
.home-game-settings-panel {
  inset: 8% 5% auto;
  max-height: 84%;
  height: auto;
  padding: 7% 7%;
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/settings/shell.webp") center / 100% 100% no-repeat;
  box-shadow: none;
}

.home-game-settings-panel .home-profile-panel-section {
  padding: 5% 6%;
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/settings/inner-panel.webp") center / 100% 100% no-repeat;
}

.home-game-settings-panel .home-profile-panel-close {
  border: 0;
  border-radius: 0;
  background: var(--theme-tool-frame, url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/settings/close-button.webp")) center / 100% 100% no-repeat;
  box-shadow: none;
}

/* 顔で選ぶ並び。

   編成・キャラと同じ5列（--party-grid-*）を流用する。同じ絵が画面によって
   違う大きさで出ると、見比べるたびに目が測り直すことになる -- ここも
   「誰を選ぶか」を顔で決める場所なので、同じ大きさでよい。 */
.home-character-panel__faces {
  display: grid;
  grid-template-columns: repeat(5, min(var(--party-grid-column), (100% - 4 * var(--party-grid-gap)) / 5));
  justify-content: center;
  grid-auto-rows: max(44px, var(--party-grid-column));
  gap: var(--party-grid-gap);
}

/* 畳んだら消える。display: grid を自分で書いているので、これが無いと
   [hidden] は効かない（作り手の display が UA の hidden に勝つ）-- 実際、
   畳んだのに顔が並んだままだった。 */
.home-character-panel__faces[hidden] {
  display: none;
}

.home-character-panel__face {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
}

/* レアリティの旗と属性の印は伏せる。選んでいるのは「誰を飾るか」で、強さの
   話ではない -- 顔の上に印が重なるほど顔が減る。要素は残す（枠の色と
   読み上げがその中から来る）。 */
.home-character-panel__face .attribute-card-icon__rarity,
.home-character-panel__face .attribute-card-icon__badge {
  display: none;
}

/* 畳む見出し。いま誰が選ばれているかは畳んでいても見える。 */
.home-character-panel__toggle {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  margin-bottom: 6px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

.home-character-panel__toggle-label {
  font-weight: 700;
}

.home-character-panel__toggle-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-muted, var(--ink));
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.home-character-panel__face[data-selected="true"] {
  border-color: var(--accent);
}

/* 「選ばない」「ランダム」。顔と同じ大きさの札で、同じ並びに入る。 */
.home-character-panel__face--text {
  display: grid;
  place-items: center;
  padding: 2px;
  border-color: var(--line);
  background: var(--surface);
  /* 語の途中で折らない。「選ばな/い」と割れると、読む前に形で分からなくなる。 */
  word-break: keep-all;
  overflow-wrap: normal;
  font-size: 10px;
  line-height: 1.25;
}

.home-character-panel__hint {
  margin: 0;
  color: var(--ink-muted, var(--ink));
  font-size: 12px;
}

/* 配置中のキャラ。掴めることは触り心地で言う。 */
.home-character[data-home-character-arranging="true"] {
  pointer-events: auto;
  user-select: none;
  cursor: grab;
  touch-action: none;
}

.home-character-panel__choice-symbol {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff8e8;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.home-character[data-home-character-arranging="true"]:active {
  cursor: grabbing;
}

/* 配置の窓は下に寄せて、低く。

   掴んで動かす相手はこの窓の後ろに立っている。画面いっぱいに広がると、
   動かす相手が窓の下に隠れて掴めない -- 選ぶ窓と、置く場所の両方が同時に
   見えていないと、この操作は成立しない。 */
.home-character-panel {
  /* 下は下のナビの上まで。4% だとナビに重なって、閉じるより先に画面が
     切り替わる。 */
  inset: auto 5% 20%;
  max-height: 46%;
  height: auto;
  padding: 7% 6%;
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/reference-v1/character/placement-panel.webp") center / 100% 100% no-repeat;
  box-shadow: none;
}

/* しまう的。左に置く -- 右には一覧の縦スクロールの桟が出るので、そこだと
   指がぶつかる。 */
.home-character-panel__stow {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

/* しまっているあいだ、右端に浮く的。出すためのものであり、同時に「いま配置の
   途中である」ことの印でもある。 */
.home-character-panel-handle {
  position: absolute;
  z-index: 80;
  top: 62%;
  right: 0;
  width: 28px;
  height: 56px;
  padding: 0;
  color: var(--ink);
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--surface);
  box-shadow: var(--elev-2);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
/* User information has the full drawer width, including long email addresses. */
.home-profile-account .home-profile-panel-list { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.home-profile-account .home-profile-panel-list dt { font-size: 14px; }
.home-profile-account .home-profile-panel-list dd { font-size: 16px; margin-bottom: 10px; overflow-wrap: anywhere; }
.home-project-management { display: grid; gap: 12px; min-width: 0; }

.home-profile-panel-heading { flex: 1 1 0; min-width: 0; margin: 0; }
.home-profile-panel-heading > .home-profile-panel-heading__name {
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.home-profile-panel-heading > .home-profile-panel-eyebrow {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .06em;
}
.home-profile-panel-header { min-width: 0; gap: 12px; }
.home-profile-panel-heading + .home-profile-panel-close { min-width: 88px; min-height: 44px; font-size: 16px; }

/* Edit selection is independent of the saved front/back order. */
.home-character[data-home-character-arranging="true"][data-home-character-selected="false"] { pointer-events: none; opacity: .55; }
.home-character[data-home-character-arranging="true"][data-home-character-selected="true"] { z-index: 3; outline: 2px dashed var(--pf-primary, #40694e); outline-offset: 3px; }
.home-character-edit-targets { position: absolute; z-index: 81; top: 16%; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 5px; border: 1px solid var(--pf-frame); border-radius: 10px; background: var(--pf-surface); }
.home-character-edit-targets button { min-width: 72px; min-height: 44px; padding: 6px 10px; font-size: 14px; line-height: 1.2; border: 1px solid var(--pf-frame); border-radius: 6px; background: var(--pf-surface); color: var(--pf-outline); white-space: nowrap; }
.home-character-edit-targets button[aria-pressed="true"] { background: var(--pf-primary); color: var(--pf-highlight); }

.home-profile-auth-field-error { display: block; color: var(--color-danger); font-size: .85em; line-height: 1.5; }
.home-profile-auth-input[aria-invalid="true"] { border-color: var(--color-danger); }

/* Account links open a plain, readable screen independent of game geometry. */
.account-recovery-screen { min-height: 100dvh; box-sizing: border-box; display: grid; place-items: center; padding: 24px 16px; background: var(--bg,#f3f0e7); }
.account-recovery-panel { --logical-scale: 1; --canvas-text-lg: 16px; --canvas-tap-target-min: 44px; width: min(100%,480px); box-sizing: border-box; display: grid; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); }
.account-recovery-panel h1 { margin: 0; font-size: 24px; line-height: 1.4; }
.account-recovery-panel > p { margin: 0; font-size: 15px; line-height: 1.7; }
.account-recovery-panel .home-profile-panel-section { border: 0; padding: 0; margin: 0; background: transparent; }
.account-recovery-panel .home-profile-auth-field, .account-recovery-panel .home-profile-auth-message { font-size: 15px; }
.account-recovery-panel .home-profile-auth-tabs:empty { display: none; }
.account-recovery-panel .home-profile-auth-submit, .account-recovery-panel .home-profile-auth-tab { min-height: 44px; font-size: 16px; padding: 12px; }
.account-recovery-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-recovery-actions button { flex: 1 1 auto; min-height: 44px; padding: 10px 14px; font-size: 15px; }
@media (max-height: 520px) { .account-recovery-screen { place-items: start center; padding: 12px; } }

.account-recovery-panel .home-profile-auth-section > h3, .account-recovery-panel .home-profile-auth-message:empty { display: none; }
.account-recovery-panel .home-profile-auth-submit { width: 100%; }
.account-recovery-secondary { color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }

.firebase-auth-panel { display:grid; gap:12px; font:15px/1.65 system-ui,sans-serif; padding:16px 0; }
.firebase-auth-panel h3,.firebase-auth-panel p { margin:0; }
.firebase-auth-panel button { min-height:48px; font:600 16px/1.5 system-ui,sans-serif; padding:10px 16px; }
.firebase-auth-note { color:#59665d; font-size:13px; }

.firebase-auth-guest { background:transparent; color:#245a48; border:1px solid #abbcaf; border-radius:12px; }

.firebase-auth-email { border:1px solid #b8c6bc; border-radius:12px; padding:10px 14px; }
.firebase-auth-email summary { cursor:pointer; min-height:44px; padding:10px 0; }
.firebase-auth-email form { display:grid; gap:12px; }
.firebase-auth-email label { display:grid; gap:6px; }
.firebase-auth-email input,.firebase-auth-email select { box-sizing:border-box; width:100%; min-height:44px; font:16px/1.5 system-ui,sans-serif; padding:8px; }
.firebase-auth-email [hidden] { display:none; }
/* Account deletion: folded shut, and only red once opened. */
.home-profile-account-deletion { margin-top:16px; padding-top:12px; border-top:1px solid currentColor; border-top-color:color-mix(in srgb, currentColor 20%, transparent); }
.home-profile-account-deletion summary { cursor:pointer; min-height:44px; padding:10px 0; }
.home-profile-account-deletion ul { margin:8px 0; padding-left:1.2em; display:grid; gap:4px; }
.home-profile-account-deletion__confirm { display:grid; gap:6px; margin:12px 0; }
.home-profile-account-deletion__input { box-sizing:border-box; width:100%; min-height:44px; font:16px/1.5 system-ui,sans-serif; padding:8px; }
.home-profile-account-deletion__submit:not(:disabled) { background:#a83232; border-color:#a83232; color:#fff; }

/* Account controls inherit the same palette as their themed drawer. */
.home-profile-panel :is(.legal-links a, .legal-consent, .firebase-auth-guest) {
  color: var(--ink);
}
.home-profile-panel .firebase-auth-note { color: var(--ink-soft); }
.home-profile-panel .firebase-auth-email :is(input, select) {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
}
.home-profile-panel .firebase-auth-email input::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

.battle-slot-button {
  /* Primary CTA (案B): the one spot per screen that uses --accent as a
     solid fill. Color-only token usage — no fixed-px elevation token here,
     this button sits inside the 1080x1920 cqw-scaled canvas (see
     styles/README.md canvas-vs-chrome note), so its shadow stays cqw-sized. */
  position: absolute;
  right: 28px;
  bottom: 156px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2963cqw;
  min-width: 32.2222cqw;
  min-height: 15.1852cqw;
  padding: 2.7778cqw 4.8148cqw;
  color: var(--on-accent);
  border: max(1px, 0.4630cqw) solid #fff;
  border-radius: 2.2222cqw;
  background: var(--accent);
  box-shadow: 0.6481cqw 0.7407cqw 0 rgba(32, 38, 58, 0.32);
  cursor: pointer;
  font-weight: 900;
  /* This button only ever renders inside the scaled .home-game-canvas (see
     the file-level comment above), so --canvas-min-font-size (07-home/
     frame.css) is always available here; the --screen-min-font-size
     fallback is defense-in-depth if that ever changes. */
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), 3.3778cqw);
  letter-spacing: 0;
  touch-action: none;
  user-select: none;
  z-index: 24;
}

.battle-slot-button::before {
  display: none;
}

.battle-slot-button::after {
  display: none;
}

.battle-slot-button-icon {
  width: 7.0370cqw;
  height: 7.0370cqw;
  z-index: 1;
}

.battle-slot-button-label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.battle-slot-button--selected {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

/* 画像を入れても文字は消さない。
   絵は背景、ラベルはその上 -- キットの出撃ボタンは文字の入っていない板として
   書き出されているし、他のパーツも同じ前提で作られている。ここだけ
   color: transparent だったので、キットを入れた瞬間に「戦闘開始」が消えていた。
   The label is what the button is; the artwork is what it looks like. */
.battle-slot-button--image {
  text-shadow: 0 0.1852cqw 0.3704cqw rgba(32, 38, 58, .45);
}

/* dispatch-nav-restructure #2: a second "play entry" button next to the
   battle CTA (ui-style-spec-b.md §2 revision -- story and battle are both
   entry points into play). This is the Secondary style from §9 (--line
   border, --surface fill, --ink text) rather than a second --accent-filled
   button, since §7 reserves --accent for the one primary CTA per screen
   (the battle button already holds that spot -- see 08-home-overlays/
   battle-slot.css). Sizing mirrors battle-slot.css's own shape (same cqw-
   per-1080-width convention, see styles/README.md) scaled down to this
   button's shorter default height (140 vs battle's 164 logical px). */

.story-slot-button {
  position: absolute;
  right: 28px;
  bottom: 372px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2963cqw;
  min-width: 32.2222cqw;
  min-height: 12.9630cqw;
  padding: 2.3704cqw 4.8148cqw;
  color: var(--ink);
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 2.2222cqw;
  background: var(--surface);
  box-shadow: var(--elev-1);
  cursor: pointer;
  font-weight: 900;
  /* Same canvas-scale correction as the battle button (this button only
     ever renders inside the scaled .home-game-canvas too). */
  font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), 3.3778cqw);
  letter-spacing: 0;
  touch-action: none;
  user-select: none;
  z-index: 23;
}

.story-slot-button-icon {
  width: 6cqw;
  height: 6cqw;
  color: var(--ink-soft);
}

.story-slot-button-label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.story-slot-button--image {
  color: transparent;
}

.asset-picker-panel {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 292px;
  max-width: 780px;
  padding: 22px;
  /* dispatch-close-known-holes #5: ui-style-spec-b.md §5 bans backdrop-
     filter blur outright (real-device hang, not just a style preference).
     This panel already had a near-opaque fill (0.88 alpha) plus a hairline
     border and a shadow, so the fix is the spec's own prescribed
     replacement -- "unopaque surface + hairline + one shadow" -- for real:
     the fill goes fully opaque (no more see-through content to fake with
     blur) and the border brightens slightly so the hairline still reads
     against it without the blur's softened edge. border-radius and shadow
     are unchanged. */
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 24px;
  background: rgb(7, 9, 16);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  z-index: 40;
}

.asset-picker-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.asset-picker-upload {
  margin: 0 0 16px;
}

.asset-picker-upload-label {
  /* dispatch-ui-touch-and-readability §2/§1: this panel renders inside
     .home-game-canvas (renderAssetPicker is appended to `canvas` in
     home-screen.mjs), so a literal px min-height/font-size here would
     shrink under the canvas transform just like profile-panel.css's
     controls -- same --canvas-tap-target-min / --canvas-text-* correction
     (07-home/frame.css) applies. This label is the visible click target
     for the file input it wraps. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--canvas-tap-target-min, 44px);
  padding: 12px 16px;
  color: var(--text);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
  font-size: var(--canvas-text-md, var(--text-md));
  font-weight: 700;
}

.asset-picker-upload input {
  max-width: 220px;
}

.asset-picker-header h2 {
  margin: 0 0 18px;
  /* dispatch-ui-touch-and-readability §2: clamp(rem, vw, rem) resolves
     against the real browser viewport, not this canvas's logical
     coordinate system -- doubly wrong here since the panel is also scaled
     down by the canvas transform, which measured this at 5-9 real px.
     Replaced with the same canvas-corrected --text-* scale as
     profile-panel.css (styles/README.md canvas-internal rule), targeting
     --text-xl (26px) to match the profile panel's own h2. */
  font-size: var(--canvas-text-xl, var(--text-xl));
}

.asset-picker-close {
  /* dispatch-ui-touch-and-readability §1/§2: no min-height/font-size
     existed before -- a <button> does not reliably inherit font-size from
     an ancestor in every browser's UA stylesheet, and this button renders
     inside .home-game-canvas, so both need the explicit canvas-corrected
     value rather than relying on inheritance.
     dispatch-tap-target-completion: min-width added too -- the short
     "閉じる" label with this padding alone measured 38.84 real px wide (no
     floor existed on the inline dimension, only min-height on the block
     one). */
  min-height: var(--canvas-tap-target-min, 44px);
  min-width: var(--canvas-tap-target-min, 44px);
  padding: 10px 14px;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  font-size: var(--canvas-text-md, var(--text-md));
}

.asset-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.asset-picker-card {
  position: relative;
  overflow: hidden;
  /* dispatch-ui-touch-and-readability §1/§2: max() keeps the original
     88px logical card height wherever that already clears the real 44px
     floor (e.g. an un-scaled/desktop-width frame), and grows to the
     canvas-corrected floor everywhere it does not. font-size is likewise
     made explicit -- a <button> does not reliably inherit font-size from
     an ancestor in every browser's UA stylesheet, and this card's name
     label (.asset-picker-card__name) would otherwise inherit whatever
     that button resolves to. */
  min-height: max(88px, var(--canvas-tap-target-min, 44px));
  padding: 14px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(47, 208, 200, 0.2), rgba(241, 90, 56, 0.16));
  cursor: pointer;
  font-size: var(--canvas-text-sm, var(--text-sm));
  font-weight: 800;
  text-align: left;
}

.asset-picker-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  pointer-events: none;
}

.asset-picker-card__name {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
}

.asset-picker-empty {
  margin: 0;
  padding: 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
}
/* Shared asset browser: real-pixel dialogs, outside the scaled game canvas. */
dialog.asset-browser-dialog { --logical-scale: 1; --control-px: 1px; --canvas-min-font-size: 14px; position: fixed; inset: 0; margin: auto; width: min(960px,calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 32px); box-sizing: border-box; padding: 20px; border: 1px solid var(--line,#d8d9dd); border-radius: 16px; color: var(--ink,#263440); background: var(--surface,#fff); box-shadow: 0 12px 48px #0003; font-size: 16px; }
dialog.asset-browser-dialog[open] { display: flex; flex-direction: column; gap: 12px; }
dialog.asset-browser-dialog:not([open]) { display: none; }
.asset-browser-dialog::backdrop { background: #15202e80; }
.asset-browser-dialog .asset-picker-header { align-items: center; flex: 0 0 auto; }
.asset-browser-dialog .asset-picker-header h2 { margin: 0; font-size: 20px; line-height: 1.4; }
.asset-browser-dialog .eyebrow { display: none; }
.asset-browser-dialog .asset-picker-close { min-width: 64px; min-height: 44px; padding: 8px 14px; font-size: 14px; color: inherit; background: var(--surface,#fff); border: 1px solid var(--line,#d8d9dd); border-radius: 10px; }
.asset-browser-dialog .asset-picker-upload { margin: 0; }
.asset-browser-dialog .asset-picker-upload-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: inherit; font-size: 14px; }
.asset-browser-dialog input[type="file"] { max-width: 100%; font-size: 14px; }
.asset-browser { display: grid; grid-template-rows: auto auto auto minmax(0,1fr); gap: 10px; min-height: 0; }
.asset-browser-categories { display: flex; flex-wrap: wrap; gap: 6px; }
.asset-browser-categories button { min-height: 44px; padding: 8px 12px; font-size: 14px; border: 1px solid var(--line,#d8d9dd); border-radius: 10px; color: inherit; background: var(--surface,#fff); box-shadow: none; }
.asset-browser-categories button[aria-pressed="true"] { color: var(--on-accent,#fff); background: var(--accent,#426d4f); border-color: var(--accent,#426d4f); }
.asset-browser > input { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line,#d8d9dd); border-radius: 10px; background: var(--surface,#fff); color: inherit; font-size: 16px; }
.asset-browser-count, .asset-browser-upload-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft,#5d6870); }
.asset-browser .asset-browser-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); align-content: start; gap: 12px; overflow: auto; max-height: min(48dvh,460px); min-height: 140px; padding: 2px; }
.asset-browser .asset-picker-card { width: 100%; padding: 8px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line,#d8d9dd); border-radius: 10px; background: var(--surface,#fff); color: inherit; text-align: left; box-shadow: none; cursor: pointer; }
.asset-browser .asset-picker-card[aria-pressed="true"] { outline: 2px solid var(--accent,#426d4f); outline-offset: -2px; }
.asset-browser-thumbnail { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; background-color: #f3f4f6; background-image: linear-gradient(45deg,#e5e7eb 25%,transparent 25%,transparent 75%,#e5e7eb 75%),linear-gradient(45deg,#e5e7eb 25%,transparent 25%,transparent 75%,#e5e7eb 75%); background-size: 16px 16px; background-position: 0 0,8px 8px; border-radius: 6px; }
.asset-browser-thumbnail > span { font-size: 12px; color: #596574; }
.asset-browser .asset-browser-thumbnail > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.asset-browser .asset-picker-card__name { font-size: 14px; line-height: 1.4; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.asset-browser-audio-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(100px,1fr) minmax(200px,1fr); align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line,#d8d9dd); border-radius: 10px; }
.asset-browser-audio-row audio { width: 100%; height: 40px; }
.asset-browser .asset-picker-empty { grid-column: 1 / -1; padding: 24px; font-size: 15px; line-height: 1.6; color: var(--ink-soft,#5d6870); }
.content-editor-asset-browse { min-height: 44px; padding: 10px 14px; font-size: 16px; }
.content-editor-asset-current { font-size: 14px; color: var(--ink-soft,#5d6870); overflow-wrap: anywhere; }
@media (max-width: 540px) {
  dialog.asset-browser-dialog { padding: 14px; }
  .asset-browser .asset-browser-grid { grid-template-columns: repeat(auto-fill,minmax(96px,1fr)); gap: 8px; }
  .asset-browser-audio-row { grid-template-columns: minmax(0,1fr); gap: 6px; }
}

.asset-browser .asset-picker-card__name { position: static; border: 0; border-radius: 0; padding: 0; background: transparent; color: inherit; }
.asset-browser-dialog .asset-picker-header { flex-wrap: wrap; gap: 10px; }
.asset-browser-dialog .asset-picker-header h2, .asset-browser-dialog .asset-picker-header > div { flex: 1 1 180px; }
.asset-browser-add, .content-editor-asset-field__upload { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--line,#d8d9dd); border-radius: 10px; background: var(--surface,#fff); color: var(--ink,#263440); font-size: 14px; cursor: pointer; }
.asset-browser-add .asset-browser-file-input, .content-editor-asset-field__upload .content-editor-asset-field__upload-input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0; opacity: 0; cursor: pointer; }
.asset-browser-add:focus-within, .content-editor-asset-field__upload:focus-within { outline: 2px solid var(--accent,#426d4f); outline-offset: 2px; }
.asset-browser-add:has(input:disabled) { opacity: .6; cursor: wait; }

@media (max-width: 540px) {
  .asset-browser-dialog .asset-picker-header { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; }
  .asset-browser-dialog .asset-picker-header > h2, .asset-browser-dialog .asset-picker-header > div { grid-column: 1; grid-row: 1; }
  .asset-browser-dialog .asset-picker-header > .asset-picker-close { grid-column: 2; grid-row: 1; }
  .asset-browser-dialog .asset-picker-header > .asset-browser-add { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}
.asset-browser-audio-row .asset-picker-card { min-height: 44px; padding: 8px 10px; justify-content: center; }

/* Let the whole dialog scroll on short screens instead of crushing the list. */
@media (max-height: 500px) {
  dialog.asset-browser-dialog { overflow-y: auto; padding: 12px; }
  .asset-browser-dialog .asset-browser { flex: 0 0 auto; }
  .asset-browser-dialog .asset-browser-grid { max-height: none; overflow: visible; }
}

@media (max-width: 720px) {
  .battle-screen {
    padding: min(3.3333vw, 1.875dvh);
  }
}

/* 下の余白は、下のナビ一段ぶんを空けていたもの。編集画面はナビを出さない
   （content-editor-screen.mjs の showBottomNav: false）ので、その 15cqw は
   ただの空白だった。編集欄に返す。 */
.content-editor-screen .screen-shell__content {
  gap: 3.6cqw;
  padding: 1cqw 1.4cqw 4cqw;
}

.content-editor-header {
  padding-top: 2cqw;
}

.content-editor-header .screen-shell__lead {
  max-width: none;
  font-size: max(var(--screen-min-font-size), 2.4cqw);
}

.content-editor-windows {
  display: grid;
  gap: 3.2cqw;
}

.content-editor-guide {
  display: grid;
  gap: 2.2cqw;
  padding: 3cqw;
  border-color: var(--line);
  background: var(--surface);
}

.content-editor-guide__status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.4cqw;
  align-items: center;
}

.content-editor-guide__status-label {
  /* Information chip (§7/§9), not a decorative fill. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 5cqw;
  border: max(1px, .18cqw) solid var(--line);
  border-radius: 999px;
  padding: .8cqw 1.8cqw;
  background: var(--surface);
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.2cqw);
  font-weight: 1000;
  white-space: nowrap;
}

.content-editor-guide[data-tone="warning"] .content-editor-guide__status-label {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: var(--paper);
}

.content-editor-guide[data-tone="ready"] .content-editor-guide__status-label {
  color: var(--color-success);
  border-color: var(--color-success);
  background: var(--paper);
}

.content-editor-guide__status-message,
.content-editor-guide__recovery {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 2.45cqw);
  font-weight: 900;
  line-height: 1.5;
}

.content-editor-guide__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-editor-guide__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .4cqw 1cqw;
  align-items: center;
  min-width: 0;
  border: max(1px, .22cqw) solid var(--line);
  border-radius: 1.8cqw;
  padding: 1.4cqw;
  background: var(--surface);
}

.content-editor-guide__step-label {
  display: inline-flex;
  grid-row: span 2;
  align-items: center;
  justify-content: center;
  width: 4.4cqw;
  height: 4.4cqw;
  border: max(1px, .18cqw) solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2cqw);
  font-weight: 1000;
}

.content-editor-guide__step-title {
  overflow: hidden;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.35cqw);
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-editor-guide__step-note {
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 1.95cqw);
  font-weight: 850;
  line-height: 1.4;
}

.content-editor-safety {
  display: grid;
  gap: 1.2cqw;
  padding: 2.6cqw 3cqw;
  border-color: var(--line);
  background: var(--surface);
}

.content-editor-safety__title {
  margin: 0;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.9cqw);
  font-weight: 1000;
}

.content-editor-safety__body {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 2.45cqw);
  font-weight: 850;
  line-height: 1.55;
}

.content-editor-window {
  display: grid;
  gap: 2.4cqw;
  padding: 3cqw;
  border-width: max(1px, .34cqw);
  border-radius: 2.6cqw;
}

.content-editor-window__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
}

.content-editor-window__titlebar .screen-panel__title {
  font-size: max(var(--screen-min-font-size), 3.2cqw);
}

.content-editor-window__badge {
  flex: 0 0 auto;
  border: max(1px, .18cqw) solid var(--line);
  border-radius: 999px;
  padding: .8cqw 1.8cqw;
  background: var(--surface);
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 1.95cqw);
  font-weight: 900;
}

.content-editor-window__recovery {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 2.2cqw);
  font-weight: 850;
  line-height: 1.55;
}

.content-editor-window__status {
  /* Quiet inline tag: paper ground, no border, soft text -- distinct from
     the bordered chips above (§7: informational, not a CTA). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.2cqw;
  margin-right: .8cqw;
  border-radius: 999px;
  padding: .45cqw 1.2cqw;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 1.8cqw);
  font-weight: 1000;
}

.content-editor-window__next-step {
  display: inline;
}

.content-editor-window__description {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 2.85cqw);
  font-weight: 800;
  line-height: 1.6;
}

/* One field per row.
   Two columns put キャラ名 and 紹介文 side by side at 127px each inside a
   259px form -- measured, not guessed -- which is half a label and no room to
   read what you typed. There was already a 1fr rule for narrow screens, but it
   keyed off the window width while the editor always lives inside the phone
   frame, so it never applied. The frame is the constraint, so the single
   column is the base. */
.content-editor-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6cqw;
}

/* 月と日をひと組で。 */
.content-editor-birthday {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: .8cqw;
  min-width: 0;
}

.content-editor-member-list,
.content-editor-card-list,
.content-editor-event-list,
.content-editor-login-bonus-list {
  display: grid;
  gap: 1cqw;
  max-height: 28cqw;
  overflow: auto;
  padding-right: .8cqw;
}

.content-editor-member-list__item,
.content-editor-card-list__item,
.content-editor-event-list__item,
.content-editor-login-bonus-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2cqw;
  align-items: center;
  width: 100%;
  border: max(1px, .22cqw) solid var(--line);
  border-radius: 999px;
  padding: 1.2cqw 1.8cqw;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.content-editor-member-list__item--selected,
.content-editor-card-list__item--selected,
.content-editor-event-list__item--selected,
.content-editor-login-bonus-list__item--selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.content-editor-member-list__name,
.content-editor-card-list__name,
.content-editor-event-list__name,
.content-editor-login-bonus-list__name {
  overflow: hidden;
  font-size: max(var(--screen-min-font-size), 2.35cqw);
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-editor-member-list__meta,
.content-editor-card-list__meta,
.content-editor-event-list__meta,
.content-editor-login-bonus-list__meta {
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 1.9cqw);
  font-weight: 850;
}

.content-editor-member-actions,
.content-editor-card-actions,
.content-editor-event-actions,
.content-editor-login-bonus-actions,
.content-editor-system-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4cqw;
}

.content-editor-story-list {
  display: grid;
  gap: 1cqw;
  max-height: 24cqw;
  overflow: auto;
  padding-right: .8cqw;
}

.content-editor-story-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2cqw;
  align-items: center;
  width: 100%;
  border: max(1px, .22cqw) solid var(--line);
  border-radius: 1.8cqw;
  padding: 1.2cqw 1.8cqw;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.content-editor-story-list__item--selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.content-editor-story-list__name {
  overflow: hidden;
  font-size: max(var(--screen-min-font-size), 2.35cqw);
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-editor-story-list__meta {
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 1.9cqw);
  font-weight: 850;
}

.content-editor-story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4cqw;
}

.content-editor-gacha-list {
  display: grid;
  gap: 1cqw;
  max-height: 24cqw;
  overflow: auto;
  padding-right: .8cqw;
}

.content-editor-gacha-list__item {
  display: grid;
  gap: .45cqw;
  width: 100%;
  border: max(1px, .22cqw) solid var(--line);
  border-radius: 1.8cqw;
  padding: 1.2cqw 1.8cqw;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.content-editor-gacha-list__item--selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--ink);
}

.content-editor-gacha-list__name {
  overflow: hidden;
  font-size: max(var(--screen-min-font-size), 2.35cqw);
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-editor-gacha-list__meta {
  font-size: max(var(--screen-min-font-size), 1.9cqw);
  font-weight: 850;
  opacity: .78;
}

.content-editor-gacha-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4cqw;
}

.content-editor-list-empty {
  margin: 0;
  padding: 1.2cqw 1.8cqw;
  border-radius: 1.8cqw;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 2.1cqw);
  font-weight: 900;
}

.content-editor-speech-list {
  display: grid;
  gap: 1.4cqw;
  max-height: 36cqw;
  overflow: auto;
  padding: 1.8cqw;
  border: max(1px, .22cqw) solid var(--line);
  border-radius: 2cqw;
  background: var(--surface);
}

.content-editor-speech-list__title {
  margin: 0;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.45cqw);
  font-weight: 1000;
}

.content-editor-speech-list__group {
  display: grid;
  gap: .8cqw;
}

.content-editor-speech-list__group-label {
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.1cqw);
  font-weight: 1000;
}

.content-editor-speech-list__items {
  display: grid;
  gap: .7cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-editor-speech-list__item {
  display: grid;
  grid-template-columns: minmax(9cqw, auto) minmax(0, 1fr);
  gap: 1cqw;
  align-items: start;
  border-radius: 1.3cqw;
  padding: .9cqw 1.2cqw;
  background: var(--paper);
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.15cqw);
  font-weight: 850;
  line-height: 1.45;
}

.content-editor-speech-list__key {
  color: var(--ink);
  font-weight: 1000;
  overflow-wrap: anywhere;
}

.content-editor-speech-list__text {
  overflow-wrap: anywhere;
}

.content-editor-speech-list__empty {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 2.1cqw);
  font-weight: 900;
}

.content-editor-field {
  display: grid;
  gap: .8cqw;
  min-width: 0;
}

.content-editor-field--wide {
  grid-column: 1 / -1;
}

.content-editor-skill-effect-add {
  grid-column: 1 / -1;
  justify-self: start;
  min-width: 18cqw;
  margin: .4cqw 0 1.2cqw;
}

.content-editor-skill-effect-summary {
  display: grid;
  grid-column: 1 / -1;
  gap: .55cqw;
  padding: 1.4cqw 1.6cqw;
  border: max(1px, .22cqw) solid var(--line);
  border-radius: 1.6cqw;
  background: var(--surface);
  box-shadow: var(--elev-1);
  color: var(--ink);
}

.content-editor-skill-effect-summary__label {
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 1.9cqw);
  font-weight: 1000;
}

.content-editor-skill-effect-summary__body {
  margin: 0;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.35cqw);
  font-weight: 950;
  line-height: 1.45;
}

.content-editor-skill-effect-summary__note {
  margin: 0;
  color: var(--ink-muted);
  font-size: max(var(--screen-min-font-size), 1.85cqw);
  font-weight: 850;
  line-height: 1.45;
}

.content-editor-field__label {
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 2.05cqw);
  font-weight: 900;
}

.content-editor-field__input {
  width: 100%;
  min-height: 5.6cqw;
  border: max(1px, .24cqw) solid var(--line);
  border-radius: 1.6cqw;
  padding: 1.2cqw 1.4cqw;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: max(var(--screen-min-font-size), 2.3cqw);
  font-weight: 800;
}

.content-editor-field__input--textarea {
  min-height: 14cqw;
  resize: vertical;
  line-height: 1.55;
}

/* 欄の下の一言。書いたものがどこに出るかを伝える。 */
.content-editor-field__note {
  font-size: max(var(--screen-min-font-size), 2cqw);
  font-weight: 500;
  line-height: 1.5;
  opacity: .8;
}

.content-editor-asset-field {
  display: grid;
  gap: .8cqw;
  min-width: 0;
}

.content-editor-asset-field__select {
  min-height: 5cqw;
  background: var(--surface);
}

/* 上げる口。欄のすぐ下に置く -- 別画面へ行って id を持ち帰る作りだったのを
   やめるための欄なので、離すと意味が薄れる。 */
.content-editor-asset-field__upload {
  display: grid;
  gap: .6cqw;
  padding: 1cqw 1.2cqw;
  border: max(1px, .22cqw) dashed var(--line);
  border-radius: 1.2cqw;
  background: var(--surface);
  cursor: pointer;
}

.content-editor-asset-field__upload-label {
  color: var(--ink-muted, var(--ink));
  font-size: max(var(--screen-min-font-size), 2.2cqw);
}

.content-editor-asset-field__upload-input {
  width: 100%;
  min-width: 0;
  font-size: max(var(--screen-min-font-size), 2.2cqw);
}

.content-editor-card-selector {
  gap: 1.2cqw;
  padding: 1.6cqw;
  border: max(1px, .22cqw) solid var(--line);
  border-radius: 1.8cqw;
  background: var(--surface);
}

.content-editor-card-selector__header,
.content-editor-card-selector__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
}

.content-editor-card-selector__count {
  border-radius: 999px;
  padding: .45cqw 1.2cqw;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 1.85cqw);
  font-weight: 1000;
}

.content-editor-card-selector__description,
.content-editor-card-selector__empty {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 1.9cqw);
  font-weight: 850;
  line-height: 1.45;
}

.content-editor-card-selector__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9cqw;
  max-height: 30cqw;
  overflow: auto;
  padding-right: .6cqw;
}

.content-editor-card-selector__option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .35cqw .8cqw;
  align-items: center;
  min-width: 0;
  border: max(1px, .18cqw) solid var(--line);
  border-radius: 1.3cqw;
  padding: .9cqw 1cqw;
  background: var(--surface);
}

.content-editor-card-selector__option input {
  grid-row: span 2;
  width: max(8px, 2.4cqw);
  height: max(8px, 2.4cqw);
  accent-color: var(--accent);
}

.content-editor-card-selector__card,
.content-editor-card-selector__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-editor-card-selector__card {
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2cqw);
  font-weight: 950;
}

.content-editor-card-selector__meta {
  color: var(--ink-muted);
  font-size: max(var(--screen-min-font-size), 1.75cqw);
  font-weight: 850;
}

.content-editor-card-selector__tool {
  min-height: 4.4cqw;
  border: max(1px, .18cqw) solid var(--line);
  border-radius: 999px;
  padding: .8cqw 1.4cqw;
  background: var(--surface);
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 1.85cqw);
  font-weight: 1000;
}

.content-editor-structured-list {
  gap: 1.2cqw;
  padding: 1.6cqw;
  border: max(1px, .22cqw) solid var(--line);
  border-radius: 1.8cqw;
  background: var(--surface);
}

.content-editor-structured-list__title,
.content-editor-structured-list__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
}

.content-editor-structured-list__rows {
  display: grid;
  gap: 1cqw;
  max-height: 38cqw;
  overflow: auto;
  padding-right: .6cqw;
}

.content-editor-structured-list__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: .9cqw;
  align-items: end;
  min-width: 0;
  border: max(1px, .18cqw) solid var(--line);
  border-radius: 1.35cqw;
  padding: 1cqw;
  background: var(--surface);
}

.content-editor-structured-list__cell {
  display: grid;
  gap: .45cqw;
  min-width: 0;
}

.content-editor-structured-list__cell-label {
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 1.75cqw);
  font-weight: 900;
}

.content-editor-structured-list__row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45cqw;
  justify-content: flex-end;
}

.content-editor-structured-list__add,
.content-editor-structured-list__move,
.content-editor-structured-list__remove {
  min-height: 4.4cqw;
  border: max(1px, .18cqw) solid var(--line);
  border-radius: 999px;
  padding: .8cqw 1.35cqw;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 1.85cqw);
  font-weight: 1000;
}

.content-editor-structured-list__add,
.content-editor-structured-list__move {
  background: var(--surface);
}

.content-editor-structured-list__remove {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: var(--paper);
}

.content-editor-action {
  align-self: flex-start;
  min-width: 20cqw;
}

@media (max-width: 760px) {
  .content-editor-guide__status,
  .content-editor-guide__steps {
    grid-template-columns: 1fr;
  }

  .content-editor-card-selector__grid {
    grid-template-columns: 1fr;
  }

  .content-editor-structured-list__row {
    grid-template-columns: 1fr;
  }
}

/* The index: which of these am I editing?
   Same cqw idiom as the rest of this screen, which lives inside the 1080-wide
   logical canvas -- the real px each of these paints at is about a third. */
.content-editor-index {
  display: grid;
  gap: 2cqw;
}

/* The whole row is the button. A chevron-sized tap target on a phone is the
   kind of thing that makes a screen feel broken. */
.content-editor-index__card {
  display: grid;
  gap: 1cqw;
  min-height: max(12cqw, var(--canvas-tap-target-min, 44px));
  padding: 3cqw;
  text-align: start;
  color: var(--ink);
  border: max(1px, .18cqw) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  cursor: pointer;
}

.content-editor-index__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4cqw;
  align-items: baseline;
}

.content-editor-index__title {
  font-size: 16px;
  font-weight: 900;
}

/* The count is what a maker scans for -- "have I made any cards yet?" -- so it
   is a number in its own chip rather than buried in the description. */
.content-editor-index__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 5cqw;
  padding: .8cqw 1.8cqw;
  color: var(--ink-soft);
  border: max(1px, .18cqw) solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.content-editor-index__description {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}

/* A section that is not ready yet stays visible: knowing it is coming is worth
   more than a shorter list, and hiding it would leave the maker wondering
   whether it exists at all. */
.content-editor-index__card[data-blocked="true"] {
  cursor: default;
  opacity: 0.62;
}

/* Back sits above the title, because leaving is what a maker who opened the
   wrong section needs before they read anything. */
.content-editor-back {
  justify-self: start;
  min-height: max(9cqw, var(--canvas-tap-target-min, 44px));
  padding: 0 3cqw;
  color: var(--ink);
  border: max(1px, .18cqw) solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

/* This screen's type scale, in real px.
   Measured on a phone: the content column is 332.7px wide, so 1cqw is 3.33px
   and every cqw font-size on this screen -- the page title included -- floored
   to --screen-min-font-size. Twelve px for all of it, which is why nothing
   here looked like a heading. The screen carries no transform (verified in the
   browser), so px here is px on the glass. */
.content-editor-screen .screen-shell__eyebrow {
  font-size: 11px;
}

.content-editor-screen .screen-shell__title {
  font-size: 20px;
  line-height: 1.35;
}

.content-editor-screen .content-editor-header .screen-shell__lead {
  font-size: 13px;
  line-height: 1.6;
}

.content-editor-screen .content-editor-guide__status-label {
  font-size: 12px;
}

.content-editor-screen .content-editor-guide__status-message {
  font-size: 13px;
  line-height: 1.6;
}

/* Section tabs inside a long form.
   The headings were already there; they marked the scroll rather than
   shortening it. As tabs they do the job the headings implied. */
/* One row that scrolls sideways, not a wrapped block. Nine tabs wrapped to
   five rows and took 198px -- 27% of the form -- which is a lot of screen to
   spend on the thing you use to save screen. */
.content-editor-form-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* Tabs must not be squeezed to fit; the row scrolls instead. */
.content-editor-form-tabs > .content-editor-form-tab {
  flex: 0 0 auto;
}

.content-editor-form-tab {
  min-height: 36px;
  padding: 0 12px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

/* Which group you are looking at is the one thing this row has to answer at a
   glance, so the selected tab is filled rather than merely outlined. */
.content-editor-form-tab[data-selected="true"] {
  color: var(--on-accent);
  border-color: var(--accent);
  background: var(--accent);
}

/* The tab switch sets [hidden] on the fields it is putting away, but these
   fields carry their own display, and an author's `display: grid` beats the
   user agent's `[hidden] { display: none }`. Stated here so hiding actually
   hides -- without it the tabs would render and change nothing. */
.content-editor-form > [hidden] {
  display: none;
}

/* "復旧中" and its next-step note are parity bookkeeping addressed to us, on a
   screen addressed to the maker -- and they sat at the top of every section
   page, above the thing the maker came for. The index already says when a
   section is not ready; here it is 59px of someone else's notes.

   Hidden rather than deleted: the same nodes carry each window's own
   description of what it edits, which the tests read, and the parity registry
   is still the thing that decides whether a section opens at all. */
.content-editor-window__status {
  display: none;
}

.content-editor-window__next-step {
  display: none;
}

/* Save stays on screen.
   The form is a screen and a half even after tabbing, and the save button sat
   under all of it -- so filling in a tab, switching to another, and then
   having to scroll to the bottom to commit is how edits get lost. Sticky to
   the bottom of the scrolling area instead: whatever you are typing, the way
   to keep it is in reach.

   Every window names its own action row, so they are listed rather than
   matched by pattern -- a new window has to opt in, which is the right way
   round for a control that must not appear where it does nothing. */
.content-editor-announcement-actions,
.content-editor-card-actions,
.content-editor-equipment-actions,
.content-editor-event-actions,
.content-editor-gacha-actions,
.content-editor-login-bonus-actions,
.content-editor-member-actions,
.content-editor-story-actions,
.content-editor-system-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  /* Its own ground: the fields scroll underneath it, and a transparent bar
     would leave them showing through the gap between buttons. */
  margin: 0 calc(var(--space-3) * -1) calc(var(--space-3) * -1);
  padding: var(--space-3);
  border-top: max(1px, .18cqw) solid var(--line);
  background: var(--paper);
}

.content-editor-asset-field { display: grid; gap: 8px; min-width: 0; }
.content-editor-asset-field__preview { width: 100%; max-height: 180px; object-fit: contain; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.content-editor-asset-field__preview[hidden] { display: none; }
.content-editor-asset-field__feedback { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.content-editor-asset-field__advanced summary { cursor: pointer; font-size: 12px; padding-block: 6px; }

.card-image-workflow { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.card-image-workflow > p { margin: 0; font-size: 14px; line-height: 1.6; }
.card-image-workflow__previews { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.card-image-workflow__crop { display: grid; gap: 8px; min-width: 0; }
.card-image-workflow__crop > img { width: 100%; height: 140px; object-fit: contain; background: var(--paper); }
.card-image-workflow__crop > img[hidden] { display: none; }
.card-image-workflow__crop label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.card-image-workflow__crop input { min-width: 0; flex: 1; }
.card-image-workflow > button { min-height: 44px; }
.content-editor-save-notice { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--accent); font-size: 14px; }
.crop-face-picker { display: grid; gap: 6px; }
.crop-face-picker__frame { position: relative; }
.crop-face-picker__frame img { display: block; max-height: 340px; }
.crop-face-picker__box { position: absolute; z-index: 1; box-sizing: border-box; border: 2px solid #e27d32; box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0008; background: #e27d3222; pointer-events: none; }
.crop-face-picker__box[hidden] { display: none; }
.crop-face-picker button { min-height: 36px; }
.content-editor-member-cards { display: grid; gap: 8px; }
.content-editor-member-cards__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 8px; border-bottom: 1px solid var(--line); }
.content-editor-member-cards__row > span { min-width: 0; overflow-wrap: anywhere; }

.content-editor-card-list .content-editor-card-list__item { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 10px; text-align: left; }
.content-editor-card-thumbnail { display: grid; place-items: center; width: 44px; height: 44px; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); }
.content-editor-card-list__copy { display: grid; gap: 3px; min-width: 0; }
.content-editor-card-current { display: flex; align-items: center; gap: 10px; flex-basis: 100%; color: var(--accent); }
.content-editor-card-current strong { overflow-wrap: anywhere; }
.content-editor-card-form > .card-image-workflow { grid-column: 1 / -1; }
.content-editor-card-form > .card-image-workflow[hidden] { display: none; }
.content-editor-card-window > .content-editor-window__titlebar { display: grid; grid-template-columns: minmax(0,1fr) auto; }
.content-editor-card-current { grid-column: 1; min-width: 0; }
.content-editor-card-window > .content-editor-card-list { max-height: 34cqw; }

.content-editor-speech-heading {
  grid-column: 1 / -1;
  margin: 16px 0 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--accent);
}

.content-editor-breakthroughs { grid-column: 1 / -1; }
.content-editor-breakthrough { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.content-editor-breakthrough > summary { cursor: pointer; font-weight: 700; overflow-wrap: anywhere; }
.content-editor-breakthrough > .content-editor-form { margin-top: 16px; }

.session-log-import { padding: 14px; min-width: 0; }
.session-log-import > summary { cursor: pointer; min-height: 44px; font-weight: 700; }
.session-log-import > :not(summary) { margin-top: 12px; }
.session-log-import :is(input,select,textarea,button) { font-size: 14px; max-width: 100%; box-sizing: border-box; }
.session-log-import :is(select,button,input:not([type='checkbox'])) { min-height: 40px; }
.session-log-import textarea { display: block; width: 100%; min-height: 90px; }
.session-log-import fieldset { border: 1px solid var(--line); padding: 10px; margin: 10px 0; }
.session-log-settings label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.session-log-settings select { flex: 1; min-width: min(230px,100%); }
.session-log-import input[type='checkbox'] { width: 18px; height: 18px; margin-right: 8px; }
.session-log-pages { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.session-log-message { border: 1px solid var(--line); padding: 12px; margin: 12px 0; border-radius: 8px; }
.session-log-original { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow-y: auto; }
.session-log-message > label { display: block; min-height: 32px; }
.session-log-message details { margin-top: 8px; }
.session-log-message details > :not(summary) { display: block; margin-top: 8px; }
.session-log-import [hidden] { display: none; }

.promotion-panel .promotion-layout { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
.promotion-panel .promotion-fields { display: grid; gap: 14px; }
.promotion-panel .promotion-fields label { display: grid; gap: 6px; font-size: 14px; }
.promotion-panel .promotion-fields input:not([type="checkbox"]), .promotion-panel select, .promotion-panel textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 8px; font: inherit; }
.promotion-panel textarea { min-height: 90px; resize: vertical; }
.promotion-panel .promotion-preview { min-width: 0; position: sticky; top: 12px; }
.promotion-panel canvas { display: block; width: 100%; max-width: 720px; height: auto; aspect-ratio: 1; border: 1px solid #bbb; margin: 0 auto 16px; }
.promotion-panel .screen-action { margin: 4px; }
@media (max-width: 720px) {
  .promotion-panel .promotion-layout { grid-template-columns: minmax(0, 1fr); }
  .promotion-panel .promotion-preview { position: static; grid-row: 1; }
}

/* Authoring uses physical screen sizes, not the game's illustration scale. */
.content-editor-screen {
  --screen-min-font-size: 16px;
  font-size: 16px;
  line-height: 1.5;
}
.content-editor-screen .screen-shell__body {
  --screen-font-size: 16px;
  --game-button-font-size: 16px;
}
.content-editor-screen :is(button, input, select, textarea) {
  font-size: 16px;
  line-height: 1.5;
}
.content-editor-screen :is(button, summary) {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 12px;
  box-sizing: border-box;
}
.content-editor-screen summary { font-size: 16px; cursor: pointer; }
.content-editor-screen :is(input, select, textarea) {
  min-height: 48px;
  padding: 10px 12px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.content-editor-screen textarea { min-height: 120px; }
.content-editor-screen input:is([type="checkbox"], [type="radio"]) {
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  flex: 0 0 auto;
}
.content-editor-screen .content-editor-card-selector__option { min-height: 48px; }
.content-editor-screen :is(.content-editor-index__description, .content-editor-index__count,
  .content-editor-guide__status-label, .content-editor-guide__status-message,
  .content-editor-header .screen-shell__lead, .content-editor-asset-field__feedback,
  .card-image-workflow > p, .card-image-workflow__crop label) { font-size: 14px; }
.content-editor-screen :is(.content-editor-window__titlebar .screen-panel__title,
  .content-editor-index__title) { font-size: 20px; }
.content-editor-screen :is(.content-editor-form, .content-editor-structured-list__rows) { gap: 16px; }
.content-editor-screen :is(.content-editor-field, .content-editor-structured-list__cell) { gap: 8px; }
.content-editor-screen .content-editor-form-tabs { gap: 8px; grid-column: 1 / -1; }
.content-editor-screen .content-editor-card-list__item { min-height: 64px; }
.content-editor-screen :is(.content-editor-card-list, .content-editor-member-list,
  .content-editor-story-list, .content-editor-gacha-list, .content-editor-event-list,
  .content-editor-login-bonus-list, .content-editor-card-selector__grid) {
  max-height: 260px;
  gap: 8px;
}
.content-editor-screen .content-editor-card-current { font-size: 16px; }
.content-editor-screen .content-editor-structured-list__row-actions { gap: 8px; }

@media (max-width: 760px), (max-height: 500px) {
  .content-editor-screen { padding: 4px; }
  .content-editor-screen .screen-shell__body {
    width: 100%;
    height: calc(100dvh - 8px);
    max-height: none;
    aspect-ratio: auto;
    padding: 8px;
  }
  .content-editor-screen .screen-shell__content {
    padding: 4px 2px 16px;
    gap: 16px;
    scroll-padding-bottom: 150px;
  }
  .content-editor-screen .content-editor-window { padding: 12px; gap: 16px; min-width: 0; }
  .content-editor-screen :is(.content-editor-structured-list__row,
    .content-editor-card-selector__grid, .card-image-workflow__previews) { grid-template-columns: minmax(0, 1fr); }
  .content-editor-screen .content-editor-structured-list__rows { max-height: none; overflow: visible; }
  .content-editor-screen .content-editor-card-list { max-height: min(260px, 32dvh); }
  .content-editor-screen :is(.content-editor-card-actions, .content-editor-member-actions,
    .content-editor-story-actions, .content-editor-gacha-actions, .content-editor-event-actions,
    .content-editor-login-bonus-actions, .content-editor-equipment-actions,
    .content-editor-announcement-actions, .content-editor-system-actions) {
    display: flex;
    flex-wrap: wrap;
    overflow-x: auto;
    gap: 8px;
    padding: 10px 8px max(10px, env(safe-area-inset-bottom));
    margin-inline: -8px;
  }
  .content-editor-screen :is(.content-editor-card-actions, .content-editor-member-actions,
    .content-editor-story-actions, .content-editor-gacha-actions, .content-editor-event-actions,
    .content-editor-login-bonus-actions, .content-editor-equipment-actions,
    .content-editor-announcement-actions, .content-editor-system-actions) > button {
    flex: 0 0 auto;
    max-width: 100%;
  }
  .content-editor-screen .card-image-workflow { padding: 12px; }
  .content-editor-screen .card-image-workflow__crop label { flex-wrap: wrap; }
  .content-editor-screen .card-image-workflow__crop input[type="range"] { width: 100%; }
}

/* Dialogue fields always stack, including inside a narrow desktop game frame. */
.content-editor-structured-list--dialogue .content-editor-structured-list__row {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

/* On short screens a sticky footer can cover the entire editing viewport. */
@media (max-height: 500px) {
  .content-editor-screen :is(.content-editor-card-actions, .content-editor-member-actions,
    .content-editor-story-actions, .content-editor-gacha-actions, .content-editor-event-actions,
    .content-editor-login-bonus-actions, .content-editor-equipment-actions,
    .content-editor-announcement-actions, .content-editor-system-actions) {
    position: static;
  }
}
.content-editor-structured-list--dialogue .content-editor-structured-list__rows {
  max-height: none;
  overflow: visible;
}
.content-editor-structured-list--dialogue .content-editor-structured-list__row-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
}
.content-editor-structured-list--dialogue .content-editor-structured-list__row-actions > button {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 8px;
  font-size: 22px;
}
.content-editor-structured-list--dialogue .content-editor-structured-list__row-actions svg { width: 22px; height: 22px; }
.content-editor-structured-list__tools[hidden] { display: none; }

.content-editor-index__group { display: grid; gap: 12px; min-width: 0; }
.content-editor-index__group-title { margin: 12px 0 0; font-size: 18px; color: var(--pf-outline); }
.content-editor-screen .content-editor-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.content-editor-header > :is(.content-editor-back, .screen-shell__eyebrow, .screen-shell__lead, .content-editor-save-notice) { grid-column: 1 / -1; }
.content-editor-fold { grid-column: 1 / -1; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.content-editor-fold > summary { padding: 12px; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.content-editor-fold__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 8px; }
.content-editor-fold[hidden] { display: none; }
.content-editor-structured-list__icon-actions { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; }
.content-editor-structured-list__icon-actions > button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 8px; font-size: 22px; }
.content-editor-structured-list__icon-actions svg { width: 22px; height: 22px; }
[data-content-editor-structured-field="scenes"] .content-editor-structured-list__row { grid-template-columns: minmax(0, 1fr); }
[data-content-editor-structured-field="scenes"] .content-editor-structured-list__rows { max-height: none; overflow: visible; }
.story-editor-start { display: grid; gap: 8px; grid-column: 1 / -1; }
.story-editor-start p { margin: 0; }
.story-editor-start button { justify-self: start; }
.story-editor-scene-title { margin: 0; color: var(--accent); font-size: 16px; grid-column: 1 / -1; }
.story-editor-preview__count { margin: 0; font-size: 14px; color: var(--ink-soft); }
.story-editor-preview__speaker { font-size: 16px; color: var(--accent); }
.story-editor-preview__text { color: var(--ink); font-size: 16px; line-height: 1.7; min-height: 90px; padding: 12px; margin: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); white-space: pre-wrap; overflow-wrap: anywhere; }
.story-editor-preview__controls { display: flex; gap: 8px; }
.story-editor-preview__controls button { flex: 1; min-width: 0; }
.story-editor-scenes input[hidden] { display: none; }
.content-editor-equipment-window > .content-editor-window__titlebar { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.content-editor-equipment-current { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--accent); }
.content-editor-equipment-current strong { overflow-wrap: anywhere; }
.content-editor-equipment-thumbnail { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); }
.content-editor-equipment-list__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; text-align: left; }
.content-editor-equipment-list__copy { display: grid; gap: 3px; min-width: 0; }
.content-editor-equipment-list { display: grid; gap: 8px; max-height: 260px; overflow: auto; }
.content-editor-equipment-list__item--selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.content-editor-record-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.content-editor-draft-notice { width: 100%; margin: 0; font-size: 14px; color: var(--accent); }
.content-editor-save-feedback { margin: 0; font-size: 14px; color: var(--ink); }
.content-editor-save-feedback:empty { display: none; }
.login-reward-editor { display: grid; grid-column: 1 / -1; gap: 16px; }
.login-reward-editor__days { display: grid; gap: 12px; }
.login-reward-editor__days > label { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.login-reward-editor__days > label > span { color: var(--accent); font-weight: 700; }
.login-reward-editor > label[hidden] { display: none; }

.content-editor-screen .home-project-management {
  --control-px: 1px; --canvas-text-xs: 12px; --canvas-text-sm: 14px; --canvas-text-md: 16px; --canvas-text-lg: 20px; --canvas-text-xl: 24px;
  display: grid; gap: 18px; min-width: 0; font-size: 16px; line-height: 1.6;
}
.content-editor-screen .home-project-management > section { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.content-editor-screen .home-project-management h3 { margin: 0 0 12px; font-size: 18px; line-height: 1.4; }
.content-editor-screen .home-project-management :is(p,dl) { margin: 8px 0; }
.content-editor-screen .home-project-management :is(input,select,button) { min-height: 44px; font-size: 16px; max-width: 100%; }
.content-editor-screen .home-project-management :is(.home-profile-member-row,.home-profile-member-row__user,.home-profile-share-url) { min-width: 0; overflow-wrap: anywhere; }
.content-editor-screen .home-profile-member-row__user { font-size: 14px; }
@media(max-width: 600px) {
  .content-editor-screen .home-project-management :is(.home-profile-member-row,.home-profile-member-invite-form,.home-profile-share-actions) { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
}

.content-editor-screen .home-project-management .home-profile-member-invite-form label { min-width: 0; width: 100%; }
.content-editor-screen .home-project-management .home-profile-member-invite-form input { width: 100%; }
.content-editor-screen .home-project-management > .home-profile-members-section { gap: 12px; }

.content-editor-screen .content-editor-first-card-entry { height: max-content; --ink: var(--pf-outline); --ink-soft: var(--pf-outline); --surface: var(--pf-surface); padding: 20px; border: 2px solid var(--pf-primary); background: var(--pf-primary-soft); }
.content-editor-first-card-entry .content-editor-index__title { color: var(--pf-primary); font-size: 22px; }
.first-card-guide { display: grid; justify-items: stretch; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); font-size: 16px; line-height: 1.6; }
.first-card-guide h2 { margin: 0; font-size: 23px; line-height: 1.4; }
.first-card-guide p { margin: 0; }
.first-card-guide__step { color: var(--pf-primary); font-size: 14px; font-weight: 700; }
.first-card-guide__help { color: var(--ink-soft); }
.first-card-guide__art { width: min(100%,230px); aspect-ratio: 3/4; object-fit: contain; justify-self: center; border: 6px solid var(--pf-frame); border-radius: 10px; background: var(--pf-surface); box-shadow: 0 4px 12px #0002; }
.first-card-guide__form,.first-card-guide__actions { display: grid; gap: 12px; }
.first-card-guide__form label { display: grid; gap: 8px; font-weight: 700; }
.first-card-guide input { width: 100%; min-width: 0; min-height: 48px; padding: 10px; font: inherit; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.first-card-guide button,.first-card-guide summary { min-height: 48px; padding: 12px; font-size: 16px; }
.first-card-guide__feedback { color: var(--pf-primary); font-size: 14px; }
.first-card-guide details { border-top: 1px solid var(--line); padding-top: 8px; }
.first-card-guide [hidden] { display: none; }

.first-card-guide .screen-action { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-weight: 700; }
.first-card-guide .screen-action--primary,.first-card-guide__actions > .screen-action:first-child { background: var(--pf-primary); border-color: var(--pf-primary); color: var(--pf-highlight); }
.first-card-guide .screen-action:disabled { opacity: .45; }

/* Temporary beginner guidance; ordinary play remains free of instructions. */
.creator-tutorial-overlay { position: absolute; inset: 0; z-index: 105; display: grid; place-items: center; padding: 18px; background: #172c2866; box-sizing: border-box; }
.creator-tutorial { display: grid; gap: 14px; width: min(100%,420px); box-sizing: border-box; max-height: 95%; overflow: auto; padding: 20px; background: var(--pf-surface); color: var(--pf-outline); border: 2px solid var(--pf-frame); border-radius: 16px; font-size: 16px; line-height: 1.65; }
.creator-tutorial h2 { margin: 0; font-size: 24px; line-height: 1.45; }
.creator-tutorial p { margin: 0; }
.creator-tutorial__step { font-size: 13px; color: var(--pf-primary); }
.creator-tutorial__action { min-height: 48px; padding: 10px 14px; border: 1px solid var(--pf-frame); border-radius: 10px; background: var(--pf-surface); color: var(--pf-primary); font-size: 16px; font-weight: 700; line-height: 1.5; cursor: pointer; }
.creator-tutorial__action--primary { background: var(--pf-primary); color: var(--pf-highlight); }
.creator-tutorial__action:disabled { opacity: .45; cursor: default; }
.creator-tutorial-coach { display: grid; gap: 8px; padding: 12px; margin: 8px; min-width: 0; border: 1px solid var(--pf-frame); border-radius: 10px; background: var(--pf-surface); color: var(--pf-outline); font-size: 14px; line-height: 1.5; }
.creator-tutorial-coach p { margin: 0; }
.creator-tutorial-coach__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.creator-tutorial-coach__actions > button { flex: 1; font-size: 14px; }
.creator-tutorial-completion { position: absolute; inset: auto 4% 12%; z-index: 90; max-height: 70%; overflow: auto; box-shadow: 0 8px 24px #172c2840; }
.creator-tutorial-warning { position: fixed; bottom: 8px; left: 8px; right: 8px; z-index: 120; padding: 8px; border: 1px solid var(--pf-frame); background: var(--pf-surface); color: var(--pf-outline); font-size: 13px; }
.formation-screen .creator-tutorial-coach { margin: 0; padding: 10px; gap: 6px; font-size: 13px; }
.formation-screen .creator-tutorial-coach__actions > button { padding: 8px; font-size: 13px; }

.creator-tutorial-coach [hidden] { display: none; }
.creator-tutorial-coach__actions { align-items: center; flex-wrap: nowrap; }
.creator-tutorial-coach__actions > strong { flex: 1; }
.creator-tutorial-coach__actions > button:last-child { flex: 0 0 44px; min-width: 44px; padding: 0; font-size: 22px; }
.formation-screen .screen-shell__body .screen-shell__content:has(> .creator-tutorial-coach) { grid-template-rows: auto auto auto minmax(80px, 1fr); overflow-y: auto; }
.content-editor-save-feedback { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.content-editor-save-feedback[data-save-state="saved"] { color: var(--pf-primary); }
.content-editor-save-feedback[data-save-state="dirty"] { color: var(--pf-accent); }
.content-editor-save-feedback[data-save-state="error"] { color: #a33124; font-weight: 700; }
.content-editor-save-feedback[data-save-state="saving"] { color: var(--pf-primary); font-weight: 700; }
.content-editor-modes { display: flex; gap: 8px; width: 100%; }
.content-editor-modes button { flex: 1; min-height: 44px; border: 1px solid var(--pf-frame); border-radius: 10px; background: var(--pf-surface); color: var(--pf-primary); font-size: 16px; }
.content-editor-modes button[aria-pressed="true"] { background: var(--pf-primary); color: var(--pf-highlight); }
.simple-editor { display: grid; gap: 14px; padding: 16px; background: var(--pf-surface); border: 1px solid var(--pf-frame); border-radius: 14px; min-width: 0; font-size: 16px; line-height: 1.6; }
.simple-editor h2,.simple-editor p { margin: 0; }
.simple-editor h2 { font-size: 22px; }
.simple-editor label { display: grid; gap: 6px; }
.simple-editor input { width: 100%; box-sizing: border-box; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font: inherit; }
.simple-editor button { min-height: 48px; padding: 10px; border: 1px solid var(--pf-frame); border-radius: 10px; background: var(--pf-surface); color: var(--pf-primary); font-size: 16px; font-weight: 700; }
.simple-editor > button:first-of-type { background: var(--pf-primary); color: var(--pf-highlight); }
.simple-editor button:disabled { opacity: .5; }
.simple-editor small { font-size: 12px; line-height: 1.5; }
.simple-editor__rows { display: grid; gap: 10px; }
.simple-editor__row { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: 8px; align-items: center; min-width: 0; }
.simple-editor__row img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--pf-frame); border-radius: 8px; }
.simple-editor__row-content { display: grid; gap: 4px; min-width: 0; }
.simple-editor__row-content input { font-size: 15px; }
.simple-editor__row > button { width: 44px; padding: 0; }
.simple-editor__row[data-import-state="error"] small { color: #a33124; }
.simple-editor__row[data-import-state="done"] small { color: var(--pf-primary); }
.simple-editor__status { color: var(--pf-primary); font-size: 14px; }
.simple-editor [hidden] { display: none; }
.content-editor-modes { grid-column: 1 / -1; }
.creator-json-import textarea { width: 100%; min-width: 0; box-sizing: border-box; min-height: 220px; padding: 10px; font: 14px/1.5 monospace; border: 1px solid var(--pf-frame); border-radius: 8px; background: white; color: var(--pf-outline); }
.creator-json-import__preview { display: grid; gap: 8px; min-width: 0; }
.creator-json-import details { padding: 10px; border: 1px solid var(--pf-frame); border-radius: 8px; min-width: 0; overflow-wrap: anywhere; }
.creator-json-import summary { min-height: 44px; display: list-item; cursor: pointer; }
.creator-json-import details p { white-space: pre-wrap; font-size: 14px; margin-top: 8px; }
.creator-json-entry { min-height: 48px; padding: 12px; border: 1px solid var(--pf-frame); border-radius: 10px; background: var(--pf-surface); color: var(--pf-primary); font-size: 16px; }
.card-image-workflow__crop > img { height: auto; max-height: 260px; object-fit: contain; }
.card-display-preview { border: 1px solid var(--pf-frame); border-radius: 10px; padding: 12px; }
.card-display-preview > summary { min-height: 44px; cursor: pointer; font-weight: 700; }
.card-display-preview > p { font-size: 13px; line-height: 1.5; }
.card-display-preview__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.card-display-preview__grid > section { display: grid; align-content: start; gap: 6px; min-width: 0; }
.card-display-preview__grid small { font-size: 12px; line-height: 1.5; }
.card-display-preview__art { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 3/4; background: var(--pf-primary-soft); border-radius: 8px; overflow: hidden; color: var(--pf-primary); }
.card-display-preview__art--icon { aspect-ratio: 1; }
.card-display-preview__art--formation { aspect-ratio: 245/718; max-height: 280px; justify-self: center; }
.card-display-preview__art--cutin { aspect-ratio: 3; }
.card-display-preview__art > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.card-display-preview__art--home > img { object-fit: contain; }
.card-display-preview__art .attribute-card-icon { width: 100%; height: 100%; }
.card-display-preview__status { margin: 0; font-size: 12px; line-height: 1.5; }
.card-display-preview button { min-height: 44px; font-size: 14px; }
.card-display-preview [hidden] { display: none; }
.card-display-preview__art--formation { width: min(100%,96px); max-height: none; }
.card-image-workflow__crop > img { width: min(100%, calc(260px * var(--crop-preview-aspect, 1))); justify-self: center; }

/* Landscape authoring is a workspace, independent of the game's canvas scale. */
[data-ui-orientation="landscape"] .content-editor-screen { padding: 4px; }
[data-ui-orientation="landscape"] .content-editor-screen .screen-shell__body {
  width: 100%; height: calc(100dvh - 8px); max-height: none;
  aspect-ratio: auto; padding: 12px; border-width: 2px; border-radius: 12px;
}
[data-ui-orientation="landscape"] .content-editor-screen .screen-shell__content { gap: 12px; padding: 0 2px 12px; }
[data-ui-orientation="landscape"] .content-editor-screen .content-editor-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0;
}
[data-ui-orientation="landscape"] .content-editor-header .screen-shell__eyebrow { display: none; }
[data-ui-orientation="landscape"] .content-editor-header .screen-shell__title { margin: 0; font-size: 20px; }
[data-ui-orientation="landscape"] .content-editor-screen .content-editor-back { min-height: 44px; padding: 8px 12px; }
[data-ui-orientation="landscape"] .content-editor-modes { margin-left: auto; width: auto; flex: 0 1 280px; }
[data-ui-orientation="landscape"] .content-editor-screen .content-editor-index {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; align-items: start;
}
[data-ui-orientation="landscape"] .content-editor-index__group { gap: 8px; }
[data-ui-orientation="landscape"] .content-editor-index__group-title { margin: 0; font-size: 16px; }
[data-ui-orientation="landscape"] .content-editor-screen .content-editor-index__card { min-height: 68px; padding: 10px; gap: 6px; }
[data-ui-orientation="landscape"] .content-editor-index__heading { gap: 8px; }
[data-ui-orientation="landscape"] .content-editor-screen .content-editor-index__title { font-size: 16px; }
[data-ui-orientation="landscape"] .content-editor-screen .content-editor-index__count { min-height: 24px; padding: 2px 6px; font-size: 12px; }
[data-ui-orientation="landscape"] .content-editor-index__description {
  font-size: 13px; line-height: 1.4; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
[data-ui-orientation="landscape"] .content-editor-screen .content-editor-guide { padding: 10px; gap: 8px; }
[data-ui-orientation="landscape"] .content-editor-screen .content-editor-guide__status-label { min-height: 28px; padding: 4px 8px; }
[data-ui-orientation="landscape"] .content-editor-screen .content-editor-window { padding: 16px; gap: 16px; min-width: 0; }
@media (min-width: 1100px) {
  [data-ui-orientation="landscape"] .content-editor-screen .content-editor-index { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  [data-ui-orientation="landscape"] .content-editor-screen .content-editor-index { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

.system-choice-review { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.system-choice-review[hidden], .system-choice-review__confirm[hidden] { display: none; }
.system-choice-review p { margin: 0; line-height: 1.7; }
.system-choice-review__comparison, .system-choice-review__confirm { display: grid; gap: 10px; }
.system-choice-review button { min-height: 44px; }
.system-preview-overlay { position: fixed; inset: 0; z-index: 5000; display: grid; grid-template-rows: auto minmax(0,1fr); background: var(--surface,#fff8ec); color: var(--ink,#29352c); }
.system-preview-overlay header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; font-size: 16px; }
.system-preview-overlay header div { display: flex; flex-wrap: wrap; gap: 8px; }
.system-preview-overlay button { min-height: 44px; padding: 8px 12px; font-size: 14px; }
.system-preview-overlay button[aria-pressed="true"] { background: var(--accent,#406c4c); color: white; }
.system-preview-overlay iframe { width: 100%; height: 100%; border: 0; min-height: 0; }
.system-preview-viewport { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.system-preview-viewport iframe { position: absolute; top: 50%; left: 50%; transform-origin: center; max-width: none; }

.system-choice-review__comparison[hidden], .content-editor-field:has([data-rarity-applicable="false"]) { display: none; }

.first-card-guide__crop { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.first-card-guide .crop-face-picker__frame { width: min(100%,230px); justify-self: center; }
.first-card-guide .crop-face-picker__frame .first-card-guide__art { width: 100%; border: 0; aspect-ratio: auto; }
.first-card-guide__crop-preview { width: 96px; height: 96px; object-fit: contain; justify-self: center; }

.content-editor-gacha-crop { display: grid; gap: 8px; min-width: 0; }
.content-editor-gacha-crop__preview { position: relative; width: 100%; aspect-ratio: 3.2 / 1; overflow: hidden; background: var(--surface); }
.content-editor-gacha-crop [hidden] { display: none; }

.content-editor-screen .content-editor-header :is(.screen-shell__title, .screen-shell__eyebrow) { color: var(--pf-outline); }

/* After placement, keep the character visible above a compact, scrollable guide. */
.creator-tutorial-home { container-type: inline-size; --ink: var(--pf-outline); --muted: var(--pf-outline); position: absolute; z-index: 104; left: 4%; right: 4%; bottom: 4%; display: grid; gap: 8px; max-height: 46%; overflow-y: auto; padding: 12px; box-sizing: border-box; border: 2px solid var(--pf-frame); border-radius: 12px; background: var(--pf-surface); color: var(--pf-outline); font-size: 14px; line-height: 1.5; }
.creator-tutorial-home > strong { font-size: 18px; }
.creator-tutorial-home p { margin: 0; color: inherit; }
.creator-tutorial-home__actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.creator-tutorial-home__actions .creator-tutorial__action { min-width: 0; padding: 8px; font-size: 14px; }
.creator-tutorial-home__actions > :last-child { grid-column: 1 / -1; }

@container (min-width: 500px) {
  .creator-tutorial-home__actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .creator-tutorial-home__actions > :last-child { grid-column: auto; }
}

.content-editor-unsaved-notice { position: sticky; top: 0; z-index: 5; margin: 0 0 12px; padding: 10px 14px; border: 2px solid var(--pf-accent); border-radius: 8px; background: var(--pf-surface); color: var(--pf-outline); font-size: 15px; font-weight: 700; }
.content-editor-unsaved-notice[hidden] { display: none; }
.story-editor-portrait { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.story-editor-portrait__image { width: 80px; height: 110px; object-fit: contain; background: var(--pf-surface); }
.story-editor-portrait__image[hidden] { display: none; }
.story-editor-portrait > p { flex: 1 1 160px; }

.battle-screen .screen-shell__content {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1.4815cqw;
  overflow: hidden;
}

.battle-stage {
  /* 開始バナーが inset:0 で乗るので、ここが基準になる。 */
  position: relative;
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 1.1111cqw;
}

.battle-arena {
  position: relative;
  display: grid;
  min-height: 0;
  overflow: hidden;
  border: max(1px, 0.2778cqw) solid var(--line);
  border-radius: 2.2222cqw;
  background: var(--surface);
  box-shadow: var(--elev-1);
}

.battle-arena__grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 5.5556cqw 5.5556cqw;
  opacity: 0.5;
}

.battle-enemy-stage {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 42.5926cqw;
  place-items: center;
}

.battle-enemy-shadow {
  position: absolute;
  bottom: 7.4074cqw;
  width: 38.8889cqw;
  height: 5.5556cqw;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  filter: blur(0.4630cqw);
}

.battle-enemy-avatar {
  /* Enemy portrait placeholder (案B §7 exception: card-art placeholders
     may keep an --ink-based fill instead of --surface). */
  width: 34.8148cqw;
  aspect-ratio: 1 / 1.2;
  border-radius: 42% 42% 24% 24%;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.98) 0 8%, transparent 9%),
    radial-gradient(ellipse at 50% 30%, var(--ink-soft) 0 24%, transparent 25%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), color-mix(in srgb, var(--ink) 45%, transparent));
  filter: drop-shadow(0 1.8519cqw 2.9630cqw rgba(32, 38, 58, 0.28));
}

.battle-enemy-info {
  position: absolute;
  z-index: 2;
  left: 2.0370cqw;
  right: 2.0370cqw;
  bottom: 2.0370cqw;
  display: grid;
  gap: 0.7407cqw;
  padding: 1.4815cqw;
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 1.4815cqw;
  background: var(--surface);
  box-shadow: var(--elev-1);
}

.battle-enemy-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.9259cqw;
  align-items: center;
}

.battle-unit__label,
.battle-unit__meta,
.battle-enemy-stats,
.battle-mode-chip {
  margin: 0;
  font-size: max(var(--screen-min-font-size), 1.1111cqw);
  font-weight: 900;
  letter-spacing: 0;
}

/* dispatch-battle-detail-frame-and-legacy-parity §1: pairs the enemy's
   "属性 ${label}" text (kept, never color-only per §13) with the same
   attribute-framed icon used for the party strip and card detail, so both
   sides of the arena read the same way. */
.battle-enemy-attribute {
  display: flex;
  align-items: center;
  gap: 0.5556cqw;
}

.battle-enemy-attribute__icon {
  display: block;
  width: max(20px, 2.5926cqw);
}

.battle-unit__label {
  color: var(--ink-soft);
}

.battle-unit__name {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 2.0370cqw);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-mode-chip {
  padding: 0.4630cqw 1.1111cqw;
  color: var(--ink);
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.battle-hp {
  height: 1.2963cqw;
  overflow: hidden;
  border: max(1px, 0.1852cqw) solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}

.battle-hp > span:first-child {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-danger);
}

.battle-hp--player > span:first-child {
  background: var(--color-success);
}

.battle-battlelog,
.battle-player-status {
  display: grid;
  gap: 0.7407cqw;
  padding: 1.2963cqw 1.4815cqw;
  color: var(--ink);
  border: max(1px, 0.2778cqw) solid var(--line);
  border-radius: 1.4815cqw;
  background: var(--surface);
  box-shadow: var(--elev-1);
}

.battle-battlelog {
  min-height: 7.7778cqw;
  align-content: center;
  font-size: max(var(--screen-min-font-size), 1.4815cqw);
  font-weight: 900;
  line-height: 1.55;
}

.battle-battlelog p,
.battle-player-status p {
  margin: 0;
}

.battle-battlelog__headline {
  display: grid;
  gap: 0.3704cqw;
}

.battle-battlelog__list {
  display: grid;
  gap: 0.3704cqw;
  max-height: 9.2593cqw;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.battle-battlelog__item {
  padding: 0.3704cqw 0.7407cqw;
  color: var(--ink-soft);
  border-radius: 999px;
  background: var(--paper);
  font-size: max(var(--screen-min-font-size), 1.1111cqw);
  font-weight: 800;
}

.battle-player-status {
  grid-template-columns: minmax(0, 1fr);
}

.battle-player-status .battle-unit__label {
  color: var(--ink-soft);
}

.battle-player-status .battle-unit__name {
  display: block;
  margin-top: 0.3704cqw;
  color: var(--ink);
}

.battle-footer {
  display: grid;
  gap: 1.1111cqw;
  min-height: 0;
}

.battle-party-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.9259cqw;
}

.battle-party-slot,
.battle-party-empty {
  /* Party portrait placeholder (案B §7 exception: card-art placeholders
     may keep an --ink-based fill instead of --surface). */
  position: relative;
  display: grid;
  /* dispatch-battle-detail-frame-and-legacy-parity §1: two explicit rows --
     the attribute-framed icon on top (auto, in-flow), the stat text block
     below (1fr, packed to its own bottom) -- instead of one align-content:
     end stack with the icon absolutely overlapping the text. The old
     portrait could get away with overlapping because it was a translucent
     watermark; this icon is opaque and carries real information (frame
     color + badge + rarity chip), so it needs real space, not overlap. */
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 16.6667cqw;
  margin: 0;
  padding: 1.0185cqw;
  overflow: hidden;
  color: #fff;
  border: max(1px, 0.2778cqw) solid var(--line);
  border-radius: 1.2963cqw;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.16), transparent 20%),
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 55%, transparent), var(--ink));
  box-shadow: var(--elev-1);
}

.battle-party-card-empty {
  opacity: 0.48;
  border-style: dashed;
}

/* dispatch-battle-detail-frame-and-legacy-parity §1: the party slot's
   attribute-framed icon (attribute-card-icon.mjs), replacing the old plain
   decorative portrait. In-flow (grid row 1), not absolutely overlapping the
   text below it.

   Full width and the shared portrait ratio, matching the formation strip.
   It used to be a 44%-wide square, which measured about 24 real px on a
   phone -- a thumbnail perched on a card five times its area, while the same
   character was drawn four times larger one screen over. The icon component
   defaults to a square because most of its callers are list thumbnails; the
   screens that draw a card at size override it here and on the result. */
.battle-party-card__icon {
  width: 100%;
}

.battle-party-card__icon .attribute-card-icon {
  aspect-ratio: var(--card-portrait-aspect);
}

/* The stat text block (role/name/attribute/HP·ATK/skill/affinity), packed
   to grid row 2's own bottom -- same bottom-anchored look the whole slot
   used to have, now scoped to just this block so it never competes with
   the icon above it for vertical space. */
.battle-party-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  min-width: 0;
  gap: 0.0926cqw;
}

.battle-party-portrait {
  position: absolute;
  top: 1.6667cqw;
  left: 50%;
  width: 6.4815cqw;
  aspect-ratio: 1 / 1.25;
  border-radius: 42% 42% 24% 24%;
  background:
    radial-gradient(circle at 50% 19%, rgba(255, 255, 255, 0.88) 0 10%, transparent 11%),
    radial-gradient(ellipse at 50% 36%, var(--ink-soft) 0 28%, transparent 29%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), color-mix(in srgb, var(--ink) 50%, transparent));
  transform: translateX(-50%);
  opacity: 0.9;
}

.battle-party-portrait--empty {
  background: rgba(255, 255, 255, 0.18);
}

.battle-party-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.battle-party-slot strong,
.battle-party-slot p {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-party-slot strong {
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
}

.battle-party-slot p {
  font-size: max(var(--screen-min-font-size), 0.9259cqw);
  font-weight: 800;
}

.battle-party-card__skill {
  color: #fff;
  text-shadow: 0 max(1px, .12cqw) max(1px, .18cqw) rgba(8, 24, 62, .55);
}

/* dispatch-attribute-editor-and-affinity §5: advantage/disadvantage mark,
   now a corner badge carrying the ▲/▼ alone. Still not color-alone
   (ui-style-spec-b.md §13): the triangle points opposite ways for the two
   states, and battle-screen.mjs puts the word itself on the badge's
   aria-label so it is read aloud. Sits opposite the attribute badge on the
   icon so the two never collide. */
.battle-party-card__affinity {
  position: absolute;
  top: 0.5556cqw;
  right: 0.5556cqw;
  z-index: 2;
  display: grid;
  min-width: max(18px, 2.037cqw);
  min-height: max(18px, 2.037cqw);
  place-items: center;
  border-radius: 999px;
  background: rgba(3, 8, 24, 0.82);
  box-shadow: 0 0 0 max(1px, 0.0926cqw) rgba(255, 255, 255, 0.3);
  font-size: var(--screen-min-font-size);
  font-weight: 900;
  line-height: 1;
}

.battle-party-card__affinity--advantage {
  color: var(--color-success);
}

.battle-party-card__affinity--disadvantage {
  color: var(--color-danger);
}

.battle-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7407cqw;
}

.battle-actions .screen-action {
  width: 100%;
  min-width: 0;
  padding-inline: 0.7407cqw;
}

/* Battle motion, restored from the legacy screen (public/styles/battle.css --
   battle-party-card-normal-attack-vertical and -damage-hit-vertical, plus its
   red hit overlay). The grammar is the same because it is the same product's
   own earlier work, not a reference to someone else's: whoever acted lunges
   toward the enemy, whoever took the counter is knocked back and flashes.
   The cards are the tempo readout -- there is no countdown bar to read
   instead -- so these have to be legible at a glance. */
.battle-party-slot {
  position: relative;
}

.battle-party-slot.is-attacking {
  animation: battle-party-attack 260ms cubic-bezier(0.22, 0.7, 0.2, 1);
  /* Set per card in battle-screen.mjs so five cards read as a wave. */
  animation-delay: var(--battle-motion-delay, 0ms);
}

.battle-party-slot.is-damaged {
  animation: battle-party-damage 620ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

/* The red wash. A pseudo-element rather than a filter on the card so the
   text and the attribute frame underneath keep their own contrast. */
.battle-party-slot.is-damaged::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(217, 68, 54, 0.42);
  pointer-events: none;
  animation: battle-party-damage-flash 620ms ease;
}

/* A card at zero stays on the strip -- the party is still five slots -- but
   reads as out of the fight. Not opacity alone: it also loses its lift. */
.battle-party-slot.is-defeated {
  opacity: 0.5;
  box-shadow: none;
}

@keyframes battle-party-attack {
  0% { transform: translateY(0); }
  40% { transform: translateY(-16px); }
  100% { transform: translateY(0); }
}

@keyframes battle-party-damage {
  0% { transform: translateY(0); }
  32% { transform: translateY(18px); }
  100% { transform: translateY(0); }
}

@keyframes battle-party-damage-flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

/* Respect a reduced-motion preference: the state still changes (the flash and
   the defeated dimming remain), only the travel is dropped. */
@media (prefers-reduced-motion: reduce) {
  .battle-party-slot.is-attacking,
  .battle-party-slot.is-damaged {
    animation: none;
  }
}

/* Each card's own HP, replacing the removed team-wide PLAYER panel. */
.battle-hp--member {
  height: max(4px, 0.5556cqw);
  margin: 0.3704cqw 0;
}

.battle-party-card__hp {
  color: var(--ink);
  font-size: var(--screen-min-font-size);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* End-of-fight screen (battle-result-screen.mjs). Its own route, not an
   overlay: the genre ends a fight by changing the screen, and what fills the
   new one is the party you brought. The party strip below deliberately reuses
   the formation strip's own grammar (five cells butted into one block, see
   06-formation/slots.css) so the team you built is recognizably the team that
   fought. Only that shape is taken from the catalog
   (docs/research/gameui-catalog/README.md) -- no title's artwork or layout. */
.battle-result-shell {
  position: relative;
  display: grid;
  min-height: 0;
  overflow: hidden;
}

.battle-result-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.2222cqw;
  align-content: center;
  min-height: 0;
  padding: 3.7037cqw 2.963cqw;
  overflow-y: auto;
}

.battle-result-headline {
  display: grid;
  gap: 0.5556cqw;
  justify-items: center;
  text-align: center;
}

.battle-result-headline__eyebrow {
  color: var(--ink-soft);
  font-size: var(--screen-min-font-size);
  font-weight: 900;
  letter-spacing: 0.18em;
}

/* The outcome as a word. Large because this is the screen's subject, but the
   word itself is what carries it -- the color below is reinforcement, never
   the only signal (ui-style-spec-b.md §13). */
.battle-result-headline__word {
  color: var(--ink);
  font-size: max(34px, 6.6667cqw);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
}

.battle-result-screen--win .battle-result-headline__word {
  color: var(--accent);
}

.battle-result-headline__detail {
  margin: 0;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 1.4815cqw);
  font-weight: 800;
}

.battle-result-party {
  display: grid;
  gap: 1.1111cqw;
  justify-items: center;
}

.battle-result-party__strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 1.6667cqw;
  box-shadow: var(--elev-2);
}

.battle-result-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  background: var(--surface);
}

.battle-result-card + .battle-result-card {
  border-left: max(1px, 0.0926cqw) solid var(--line);
}

.battle-result-card--empty {
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
}

/* A card that went down still occupies its place -- the party is what it was
   -- but reads as out of the fight. Dimmed and desaturated together, so it is
   not carried by one channel alone. */
.battle-result-card--defeated {
  opacity: 0.55;
  filter: saturate(0.35);
}

.battle-result-card__art {
  position: relative;
}

.battle-result-card__art .attribute-card-icon {
  aspect-ratio: var(--card-portrait-aspect);
}

.battle-result-card__hp {
  display: grid;
  gap: 0.1852cqw;
  justify-items: center;
  padding: 0.3704cqw 0.1852cqw;
}

.battle-result-card__hpbar {
  overflow: hidden;
  width: 82%;
  height: max(4px, 0.4630cqw);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 16%, var(--paper));
}

.battle-result-card__hpbar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-success, var(--accent));
}

.battle-result-card--defeated .battle-result-card__hpbar span {
  background: var(--ink-muted, var(--ink-soft));
}

.battle-result-card__hptext {
  color: var(--ink);
  font-size: var(--screen-min-font-size);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.battle-result-party__summary {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--screen-min-font-size);
  font-weight: 800;
}

.battle-result-rewards {
  display: grid;
  gap: 0.7407cqw;
  padding: 1.4815cqw 1.6667cqw;
  border: max(1px, 0.0926cqw) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--elev-1);
}

.battle-result-rewards__label {
  color: var(--ink-soft);
  font-size: var(--screen-min-font-size);
  font-weight: 900;
  letter-spacing: 0.16em;
}

.battle-result-rewards__list {
  display: grid;
  gap: 0.5556cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.battle-result-rewards__item {
  display: flex;
  gap: 1.1111cqw;
  align-items: baseline;
  justify-content: space-between;
}

.battle-result-rewards__name {
  color: var(--ink-soft);
  font-size: var(--screen-min-font-size);
  font-weight: 800;
}

.battle-result-rewards__value {
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 1.8519cqw);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.battle-result-rewards__empty {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--screen-min-font-size);
  font-weight: 800;
}

.battle-result-actions {
  justify-content: center;
}

/* 行動したキャラの台詞。
   At the top of the arena, over the enemy's artwork. The floor of the arena
   was the first try and it sat on top of the enemy's HP bar, counter and
   reward -- measured, and covering live numbers with a line of dialogue is
   worse than having no dialogue. */
.battle-voice {
  position: absolute;
  top: 2.2222cqw;
  right: 2.2222cqw;
  left: 2.2222cqw;
  z-index: 3;
  display: grid;
  gap: 0.5556cqw;
  padding: 1.6667cqw 2.2222cqw;
  border: max(1px, 0.2778cqw) solid var(--line);
  border-radius: 2.2222cqw;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow: var(--elev-1);
  pointer-events: none;
}

.battle-voice__name {
  color: var(--accent);
  font-size: max(var(--screen-min-font-size), 2.7778cqw);
  font-weight: 900;
}

.battle-voice__text {
  margin: 0;
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 3.0556cqw);
  font-weight: 700;
  line-height: 1.5;
}

/* 戦う相手。Only drawn when more than one enemy is registered, so a project
   with a single opponent looks exactly as it did. */
.battle-enemy-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1111cqw;
}

.battle-enemy-picker__choice {
  min-height: 44px;
  padding: 0 2.7778cqw;
  color: var(--ink);
  border: max(1px, 0.2778cqw) solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: max(var(--screen-min-font-size), 2.7778cqw);
  font-weight: 900;
  cursor: pointer;
}

.battle-enemy-picker__choice--selected {
  color: var(--paper);
  border-color: var(--accent);
  background: var(--accent);
}

/* 出撃準備。誰が行くのか、何と戦うのか、そして出発する。 */
.sortie-party,
.sortie-opponent {
  display: grid;
  gap: 1.6667cqw;
  padding: 2.2222cqw;
}

.sortie-party__head {
  display: flex;
  gap: 1.6667cqw;
  align-items: baseline;
  justify-content: space-between;
}

.sortie-party__power {
  color: var(--accent);
  font-size: max(var(--screen-min-font-size), 3.0556cqw);
  font-weight: 900;
}

/* 出撃準備の編成は、編成画面と同じ帯。The strip's own rules live in
   06-formation/slots.css; this only gives it room here. */
.sortie-party__list {
  margin: 0;
}

.sortie-opponent__picker {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1111cqw;
}

.sortie-opponent__choice {
  min-height: 44px;
  padding: 0 2.7778cqw;
  color: var(--ink);
  border: max(1px, 0.2778cqw) solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: max(var(--screen-min-font-size), 2.7778cqw);
  font-weight: 900;
  cursor: pointer;
}

.sortie-opponent__choice--selected {
  color: var(--paper);
  border-color: var(--accent);
  background: var(--accent);
}

.sortie-enemy {
  display: grid;
  gap: 0.5556cqw;
  padding: 1.6667cqw;
  border: max(1px, 0.2778cqw) solid var(--line);
  border-radius: 2.2222cqw;
  background: var(--surface);
}

.sortie-enemy__name {
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 3.3333cqw);
}

.sortie-enemy__stats,
.sortie-enemy__reward,
.sortie-empty {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 2.6cqw);
  line-height: 1.5;
}

/* 出発するボタンは、この画面で一番大きいものであるべき。 */
.sortie-depart {
  min-height: 52px;
  flex: 1 1 auto;
  font-size: max(var(--screen-min-font-size), 3.3333cqw);
  font-weight: 900;
}

.sortie-depart[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* 戦闘開始のエフェクト。自分で消えるので、誰も片付けに来ない。 */
.battle-start-banner {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #05070f 34%, transparent);
  pointer-events: none;
  animation: battle-start-fade 2.2s ease-out forwards;
}

.battle-start-banner__text {
  color: #fff;
  font-size: max(var(--screen-min-font-size), 7.2222cqw);
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow: 0 0.5556cqw 1.6667cqw rgba(3, 8, 24, .6);
  animation: battle-start-rush 2.2s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes battle-start-fade {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes battle-start-rush {
  0% { opacity: 0; transform: translateX(-18%) scale(.86); }
  22% { opacity: 1; transform: translateX(0) scale(1); }
  70% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(10%) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .battle-start-banner,
  .battle-start-banner__text {
    animation: none;
  }

  .battle-start-banner {
    opacity: 0;
  }
}

/* 撃ったときの見せ場。スキルで立ち絵、必殺技でカットイン。
 *
 * どちらも開始の旗と同じ置き方（stage の上に絶対配置、pointer-events なし、
 * 自分で消える）。触れないので、演出中もボタンは押せる -- 見せ場が操作を
 * 止めると、二度目からは邪魔になる。 */
.battle-performance {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: grid;
  pointer-events: none;
  overflow: hidden;
}

.battle-performance__art {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 作り手が上げた絵をそのまま出す。枠も角丸も付けない。 */
  object-position: center top;
}

.battle-performance__caption {
  grid-area: 1 / 1;
  align-self: end;
  display: grid;
  gap: .2778cqw;
  padding: 2.2222cqw;
  /* 名前は絵の上に載る。下だけ暗くして、どんな絵でも字が読めるようにする。 */
  background: linear-gradient(to top, rgba(3, 8, 24, .78), transparent);
}

.battle-performance__who {
  color: rgba(255, 255, 255, .82);
  font-size: max(var(--screen-min-font-size), 2.7778cqw);
  letter-spacing: .06em;
}

.battle-performance__skill {
  color: #fff;
  font-size: max(var(--screen-min-font-size), 5cqw);
  font-weight: 900;
  letter-spacing: .04em;
  text-shadow: 0 .4444cqw 1.3333cqw rgba(3, 8, 24, .7);
}

/* スキル: 立ち絵が横から差し込む。画面は覆わない -- 毎ターン全画面が
 * 塞がると、戦況が見えないまま殴り合うことになる。 */
.battle-performance--standing {
  justify-items: start;
  animation: none;
}

.battle-performance--standing .battle-performance__art {
  width: 52%;
  animation: battle-performance-step-in 1.4s cubic-bezier(.16, 1, .3, 1) forwards;
}

.battle-performance--standing .battle-performance__caption {
  width: 52%;
}

/* 必殺技: 全面のカットイン。ここだけは覆う -- 一戦に数回しか来ないので、
 * 覆うことそのものが「特別なことが起きた」の合図になる。 */
.battle-performance--cutin {
  background: rgba(3, 8, 24, .55);
  animation: battle-performance-fade 2.8s ease-out forwards;
}

.battle-performance--cutin .battle-performance__art {
  animation: battle-performance-rush 1.4s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes battle-performance-fade {
  0% { opacity: 0; }
  12% { opacity: 1; }
  74% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes battle-performance-step-in {
  0% { transform: translateX(-24%); }
  26% { transform: translateX(0); }
  100% { transform: translateX(0); }
}

@keyframes battle-performance-rush {
  0% { transform: scale(1.14) translateX(6%); }
  26% { transform: scale(1) translateX(0); }
  100% { transform: scale(1.04) translateX(-2%); }
}

@media (prefers-reduced-motion: reduce) {
  .battle-performance,
  .battle-performance__art {
    animation: none;
  }

  /* 動かさないなら出さない。動きを止めた状態で置きっぱなしにすると、
   * 消えるまでのあいだ画面が塞がったままになる。 */
  .battle-performance {
    opacity: 0;
  }
}

/* 敵の群れ。1体のときは出ない（上の情報だけで足りていて、同じHPを二度出す
 * ことになる）ので、ここは2体以上のときだけの見た目。 */
.battle-enemy-list {
  display: grid;
  gap: .8333cqw;
  margin-top: .8333cqw;
}

.battle-enemy-list--group {
  grid-template-columns: repeat(auto-fit, minmax(16.6667cqw, 1fr));
}

.battle-enemy-unit {
  display: grid;
  gap: .2778cqw;
  padding: .8333cqw 1.1111cqw;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 1.1111cqw;
  background: rgba(8, 14, 32, .42);
  text-align: left;
  /* 押せるものと押せないものが同じ形で並ぶので、button の既定を消しておく。 */
  font: inherit;
  color: inherit;
  appearance: none;
}

/* 狙っている相手。単体攻撃の行き先なので、色だけでなく枠でも分かるようにする
 * -- 色だけの区別は、見え方の違う人に届かない。 */
.battle-enemy-unit.is-targeted {
  border-color: rgba(255, 214, 128, .9);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .55);
}

.battle-enemy-unit.is-defeated {
  opacity: .45;
}

/* 付いている状態の札。
 *
 * 色だけでは区別しない -- 短い名前と残りターンが文字で載る。動けない理由が
 * 画面に出ないうちは、止まっていることが遊びではなく不具合に見える。 */
.battle-state-row {
  display: flex;
  flex-wrap: wrap;
  gap: .2778cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.battle-state-badge {
  display: inline-flex;
  align-items: center;
  gap: .1667cqw;
  padding: .1111cqw .5cqw;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(10, 16, 36, .72);
  color: rgba(255, 255, 255, .92);
  font-size: max(var(--screen-min-font-size), 2cqw);
  line-height: 1.4;
  white-space: nowrap;
}

.battle-state-badge__turns {
  opacity: .72;
  font-variant-numeric: tabular-nums;
}

/* 種類ごとの色。読むのは文字のほうで、色は探しやすさのため。 */
.battle-state-badge--stun {
  border-color: rgba(255, 196, 92, .8);
  background: rgba(84, 52, 8, .78);
}

.battle-state-badge--silence {
  border-color: rgba(178, 148, 255, .8);
  background: rgba(46, 32, 84, .78);
}

.battle-state-badge--taunt {
  border-color: rgba(128, 214, 255, .8);
  background: rgba(12, 48, 72, .78);
}

/* 動けない札が付いているカードは、少し沈める。札と合わせて二重に伝える。 */
.battle-party-card.is-stunned {
  filter: saturate(.6);
}

@media (prefers-reduced-motion: reduce) {
  .battle-party-card.is-stunned {
    filter: none;
  }
}

/* 攻撃の手応え。
 *
 * 素材は増やさない -- 戦闘がすでに知っている数字（何の手番か、どれだけ当たった
 * か）だけで出す。作り手が絵を用意しなくても、殴った感じが画面に出る。 */

/* 飛ぶ数字。当たった先の上に重ねて、浮きながら消える。 */
.battle-impact-numbers {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8333cqw;
  pointer-events: none;
}

.battle-impact-number {
  color: #fff;
  font-size: max(var(--screen-min-font-size), 4.4444cqw);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  text-shadow:
    0 0 .5556cqw rgba(255, 128, 64, .8),
    0 .3333cqw .8333cqw rgba(3, 8, 24, .9);
  /* 多段は少しずつ遅らせて出す。同じ場所に5枚重なると、1回当たったのと
   * 見分けが付かない。 */
  animation: battle-impact-rise 1240ms cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: var(--battle-impact-delay, 0ms);
  opacity: 0;
}

.battle-impact-number--heal {
  text-shadow:
    0 0 .5556cqw rgba(120, 255, 176, .8),
    0 .3333cqw .8333cqw rgba(3, 8, 24, .9);
}

@keyframes battle-impact-rise {
  0% { opacity: 0; transform: translateY(1.6667cqw) scale(.7); }
  22% { opacity: 1; transform: translateY(0) scale(1.12); }
  40% { transform: translateY(-.5556cqw) scale(1); }
  100% { opacity: 0; transform: translateY(-3.3333cqw) scale(1); }
}

/* 当たった相手。白く抜けて戻る。 */
.battle-enemy-unit.is-hit,
.battle-enemy-stage.is-hit {
  animation: battle-impact-flash 640ms ease-out;
}

@keyframes battle-impact-flash {
  0% { filter: brightness(2.4) saturate(.4); }
  100% { filter: none; }
}

/* 舞台の揺れ。手番の種類で幅が変わる -- 必殺技だけが大きく揺れる。 */
.battle-stage[data-battle-impact] {
  animation: battle-impact-shake var(--battle-shake-duration, 240ms) ease-out;
}

.battle-stage[data-battle-impact="light"] { --battle-shake-strength: .3333cqw; --battle-shake-duration: 200ms; }
.battle-stage[data-battle-impact="medium"] { --battle-shake-strength: .8333cqw; --battle-shake-duration: 300ms; }
.battle-stage[data-battle-impact="heavy"] { --battle-shake-strength: 1.6667cqw; --battle-shake-duration: 420ms; }

@keyframes battle-impact-shake {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(calc(var(--battle-shake-strength) * -1), var(--battle-shake-strength), 0); }
  40% { transform: translate3d(var(--battle-shake-strength), calc(var(--battle-shake-strength) * -.6), 0); }
  60% { transform: translate3d(calc(var(--battle-shake-strength) * -.6), 0, 0); }
  80% { transform: translate3d(calc(var(--battle-shake-strength) * .4), 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* 新しく付いた札。一度だけ光る -- 前から付いているものが毎ターン光ると、
 * 何が起きた合図なのか分からなくなる。 */
.battle-state-row.is-fresh .battle-state-badge {
  animation: battle-state-pop 480ms cubic-bezier(.16, 1, .3, 1);
}

@keyframes battle-state-pop {
  0% { transform: scale(.6); box-shadow: 0 0 0 .5556cqw rgba(255, 255, 255, .5); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); box-shadow: none; }
}

/* 位置の基準。数字を重ねるので、当たる先は自分の座標系を持つ。
 *
 * .battle-enemy-info と .battle-party-slot はここに書かない -- どちらも上で
 * すでに position を持っていて（info は absolute で下に貼り付いている）、
 * ここで relative を足すと後勝ちで貼り付けが外れる。実際それでレイアウトが
 * 崩れ、数字も出ていないように見えていた。 */
.battle-enemy-unit {
  position: relative;
}

/* 相手が1体のときの数字は、情報パネルではなく敵の立ち位置に重ねる。
 * パネルは不透明で文字が詰まっているので、そこに数字を重ねても読めない。 */
.battle-enemy-stage .battle-impact-numbers {
  z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
  .battle-impact-number,
  .battle-enemy-unit.is-hit,
  .battle-enemy-stage.is-hit,
  .battle-stage[data-battle-impact],
  .battle-state-row.is-fresh .battle-state-badge {
    animation: none;
  }

  /* 動かさないなら、数字は出したまま置く。消えないと重なるので、そこだけ
   * 薄くして残す -- 動きを止めた人にも、いくら入ったかは要る。 */
  .battle-impact-number {
    opacity: .9;
  }
}

/* ログの一行は消した。何が起きたかは、敵の頭の上の数字と、カードの札が言う
 * -- 同じことを二か所で言うと、どちらを見ればいいのか決まらない。
 *
 * 読み上げ向けの一行だけは残す。数字は絵として出している（aria-hidden）ので、
 * 言葉で受け取る道が他に無い。 */
.battle-turn-readout {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* 数字は敵の頭の上。真ん中に出すと絵に埋もれる。 */
.battle-enemy-stage .battle-impact-numbers {
  align-items: start;
  padding-top: 4.4444cqw;
}

/* 台詞の吹き出し。しゃべった人のカードから出す。
 *
 * しっぽがカードを指すので、名前は繰り返さない -- 誰の台詞かは、指している
 * 先で分かるほうが早い。ホーム画面の吹き出しと同じ作りで、しっぽは回した
 * 正方形（三角形の border trick だと枠線が消えて、輪郭のある吹き出しから角
 * だけ浮いて見える）。 */
.battle-voice--card {
  position: absolute;
  top: auto;
  right: -1.1111cqw;
  bottom: calc(100% + 1.6667cqw);
  left: -1.1111cqw;
  z-index: 7;
  display: grid;
  padding: .8333cqw 1.1111cqw;
  border: max(1px, .2222cqw) solid var(--line);
  border-radius: 1.6667cqw;
  background: var(--paper);
  box-shadow: var(--elev-1);
  pointer-events: none;
  animation: battle-voice-pop 240ms cubic-bezier(.16, 1, .3, 1);
}

.battle-voice--card .battle-voice__text {
  font-size: max(var(--screen-min-font-size), 2.4444cqw);
  line-height: 1.35;
  text-align: center;
}

.battle-voice--card::after {
  position: absolute;
  bottom: -.6111cqw;
  left: 50%;
  width: 1.2222cqw;
  height: 1.2222cqw;
  margin-left: -.6111cqw;
  border-right: max(1px, .2222cqw) solid var(--line);
  border-bottom: max(1px, .2222cqw) solid var(--line);
  background: inherit;
  content: "";
  transform: rotate(45deg);
}

@keyframes battle-voice-pop {
  0% { opacity: 0; transform: translateY(.8333cqw) scale(.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .battle-voice--card {
    animation: none;
  }
}

/* 敵を囲う枠を外す。
 *
 * 戦場を箱に入れると、その箱が「作りかけの部品」に見える -- 枠と影があるだけで
 * 安っぽくなる。敵は背景の上に立っているほうがいい。
 *
 * 罫線（.battle-arena__grid）は残す。あれは置き場所の目安で、枠とは別のもの。 */
.battle-arena {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 敵の情報も、板に載せるのをやめる。読めればよく、囲う必要は無い。
 * 下だけ暗くして、どんな背景でも字が読めるようにする。 */
.battle-enemy-info {
  padding: 1.4815cqw 1.4815cqw 1.1111cqw;
  border: 0;
  border-radius: 0;
  background: linear-gradient(to top, rgba(6, 10, 24, .72), transparent);
  box-shadow: none;
}

.battle-enemy-info .battle-unit__name,
.battle-enemy-info .battle-unit__label,
.battle-enemy-info .battle-unit__meta,
.battle-enemy-info .battle-enemy-stats {
  color: #fff;
  text-shadow: 0 .1852cqw .5556cqw rgba(3, 8, 24, .85);
}

/* スキルの立ち絵。登場後は少し留まり、上へ抜けながら約1秒で消える。
 * 絵と技名の退出距離を揃え、ひとまとまりの演出として動かす。 */
.battle-performance--standing {
  justify-items: start;
  align-items: end;
}

.battle-performance--standing .battle-performance__art {
  width: 34%;
  height: 76%;
  align-self: end;
  object-position: center top;
  animation: battle-performance-rise 2.8s ease-in-out forwards;
}

.battle-performance--standing .battle-performance__caption {
  width: 34%;
  padding: 1.1111cqw;
  animation: battle-performance-rise 2.8s ease-in-out forwards;
}

.battle-performance--standing .battle-performance__skill {
  font-size: max(var(--screen-min-font-size), 3.6111cqw);
}

@keyframes battle-performance-rise {
  0% { opacity: 0; transform: translateY(28%); }
  22% { opacity: 1; transform: translateY(0); }
  64% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8cqw); }
}

/* 必殺技のカットイン。斜めの帯で横に走らせる。
 *
 * 全面を覆っていたのを、画面を横切る一本の帯にした。覆うと戦況が消えるので
 * 一戦に数回でも重い -- 帯なら、走ったことは分かるのに盤面は残る。 */
.battle-performance--cutin {
  place-items: center;
  background: transparent;
}

.battle-performance--cutin .battle-performance__art {
  width: 128%;
  height: 34%;
  /* 斜めに切り出す。切り口が背景と交わる線そのものが、走った向きになる。 */
  clip-path: polygon(0 22%, 100% 0, 100% 78%, 0 100%);
  object-position: center 30%;
  transform-origin: center;
  animation: battle-performance-sweep 2.8s cubic-bezier(.16, 1, .3, 1) forwards;
}

.battle-performance--cutin .battle-performance__caption {
  align-self: center;
  justify-self: end;
  width: auto;
  padding: 1.1111cqw 2.2222cqw;
  background: none;
  text-align: right;
  animation: battle-performance-sweep-text 2.8s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes battle-performance-sweep {
  0% { opacity: 0; transform: translateX(-16%) skewY(-4deg) scale(1.1); }
  18% { opacity: 1; transform: translateX(0) skewY(-4deg) scale(1); }
  72% { opacity: 1; transform: translateX(0) skewY(-4deg) scale(1); }
  100% { opacity: 0; transform: translateX(12%) skewY(-4deg) scale(1); }
}

@keyframes battle-performance-sweep-text {
  0% { opacity: 0; transform: translateX(22%); }
  22% { opacity: 1; transform: translateX(0); }
  74% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-10%); }
}

@media (prefers-reduced-motion: reduce) {
  .battle-performance--standing .battle-performance__art,
  .battle-performance--standing .battle-performance__caption,
  .battle-performance--cutin .battle-performance__art,
  .battle-performance--cutin .battle-performance__caption {
    animation: none;
  }
}

/* 待ちの時計。
 *
 * 「あと17秒で再使用できます。」はボタンに入らないし、5つ並べば読む気も失せる。
 * リングなら一目で「あとどれくらい」が分かり、真ん中の数字がその場で正確さを
 * 足す。円にしたのはボタンが5列グリッドで正方形に近いから -- 横長のボタンなら
 * 線のほうが素直だった。 */
.battle-cooldown {
  position: relative;
  display: grid;
  place-items: center;
  width: 5.5556cqw;
  height: 5.5556cqw;
  border-radius: 50%;
  /* 残っているぶんだけ塗る。0で空、1で満ちる。 */
  background: conic-gradient(
    currentColor calc(var(--battle-cooldown-rate, 1) * 360deg),
    transparent 0
  );
  opacity: .9;
}

/* 中を抜いてリングにする。真ん中は数字の場所。 */
.battle-cooldown::before {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: var(--surface);
  content: "";
}

.battle-cooldown__value {
  position: relative;
  font-size: max(var(--screen-min-font-size), 1.6667cqw);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.02em;
}

/* 時計が入っているボタンは、文字の代わりに時計を置く。 */
.screen-action.is-cooling {
  display: grid;
  place-items: center;
  padding-block: .5556cqw;
}

/* 必殺技は別の段。同じ並びに混ぜると、5枚編成で押せるものが10個並んで、
 * どれがスキルでどれが必殺技か形からは分からなくなる。 */
.battle-actions--special {
  margin-top: .5556cqw;
}

.battle-actions--special .screen-action {
  /* 段が違うことが形でも分かるように、必殺技はひと回り背を高くする。 */
  min-height: 7.4074cqw;
}

/* 演出は戦場の外。端から端まで届き、揺れの外側に立つ。
 *
 * 戦場の中に入れていた頃は、暗幕もカットインも戦場の枠までしか届かず、編成
 * カードの上には掛からなかった。揺れも道連れで、カットインごと画面が揺れていた。
 * 外へ出すと、覆うものは全部に掛かり、揺れるのはその下だけになる。 */
.screen-shell__content > .battle-start-banner,
.screen-shell__content > .battle-performance {
  position: absolute;
  inset: 0;
  z-index: 20;
}

/* 必殺技のカットインは端から端まで。帯が画面の外まで抜けることで、走った
 * ことが分かる。 */
.screen-shell__content > .battle-performance--cutin .battle-performance__art {
  width: 140%;
  max-width: none;
}

/* カットインの下を暗くする。盤面を消さずに、そこだけ持ち上げる。 */
.battle-performance--cutin::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(3, 8, 24, .48);
  content: "";
  animation: battle-performance-fade 2.8s ease-out forwards;
}

/* 当たった相手だけが揺れる。
 *
 * 通常やスキルで毎回画面が揺れると、揺れが「特別なこと」の合図でなくなる。
 * 手応えは、当たった相手が揺れれば足りる。 */
.battle-enemy-unit.is-hit,
.battle-enemy-stage.is-hit {
  animation:
    battle-impact-flash 640ms ease-out,
    battle-unit-shake 420ms cubic-bezier(.36, .07, .19, .97);
}

@keyframes battle-unit-shake {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-1.1111cqw, .2778cqw, 0); }
  40% { transform: translate3d(.8333cqw, -.2778cqw, 0); }
  60% { transform: translate3d(-.5556cqw, 0, 0); }
  80% { transform: translate3d(.2778cqw, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .battle-enemy-unit.is-hit,
  .battle-enemy-stage.is-hit,
  .battle-performance--cutin::before {
    animation: none;
  }
}

/* 待っているボタンでも、名前は消さない。
 *
 * 時計だけにしたら、戦闘の始まり（全部が待ち）でボタンが5つとも時計になり、
 * どれがどれだか分からなくなった。時計は状態で、名前は身元 -- 消していいのは
 * 状態のほうだけ。 */
.screen-action.is-cooling {
  display: grid;
  gap: .1852cqw;
  place-items: center;
  padding-block: .3704cqw;
}

.screen-action__label {
  font-size: max(var(--screen-min-font-size), 1.6667cqw);
  font-weight: 900;
  line-height: 1;
  opacity: .82;
}

@property --battle-cooldown-rate {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.battle-command .battle-cooldown { transition: --battle-cooldown-rate 100ms linear; }
@media (prefers-reduced-motion: reduce) {
  .battle-command .battle-cooldown { transition: none; }
}

/* Title screen, restored from the legacy one (public/screens/title-screen.js).
   Three things from the author fill it -- a background, a logo, and the words
   on the prompt -- and the whole surface starts the game.

   It is deliberately the one screen with no chrome: no nav, no panels, no
   controls. A title screen that shows the product's furniture is not a title
   screen. */
.title-screen-shell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  background: var(--ink);
}

.title-screen-backdrop {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
}

/* Darkened toward the bottom so the prompt stays readable over any image the
   author uploads, bright or busy. Same two-stop wash the legacy screen used. */
.title-screen-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 4, 10, 0.12), rgba(3, 4, 10, 0.62));
}

.title-screen-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3.7037cqw;
  justify-items: center;
  padding: 5.5556cqw 4.4444cqw;
  pointer-events: none;
  text-align: center;
}

.title-screen-logo {
  width: min(74%, 460px);
  height: auto;
  object-fit: contain;
}

.title-screen-name {
  margin: 0;
  color: #fff;
  font-size: max(28px, 5.5556cqw);
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 max(2px, 0.2778cqw) max(6px, 0.7407cqw) rgba(3, 4, 10, 0.7);
}

/* The prompt breathes so it reads as "waiting for you" rather than as a label.
   Motion only -- the words are always there. */
.title-screen-prompt {
  margin: 0;
  color: #fff;
  font-size: max(15px, 2.037cqw);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-shadow: 0 max(1px, 0.1852cqw) max(4px, 0.463cqw) rgba(3, 4, 10, 0.8);
  animation: titlePromptBreath 2200ms ease-in-out infinite;
}

/* The whole screen is the button: a title screen with a small tap target is
   one people fight with. It stays a real button so it is reachable by keyboard
   and announced as one. */
.title-screen-start {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  border: 0;
  background: none;
  cursor: pointer;
}

.title-screen-start:focus-visible {
  outline: max(2px, 0.2778cqw) solid #fff;
  outline-offset: max(-6px, -0.7407cqw);
}

@keyframes titlePromptBreath {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .title-screen-prompt {
    animation: none;
    opacity: 1;
  }
}

/* Legal links stay outside the title's full-screen start button. */
.legal-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 16px; padding:12px 4px; font:14px/1.5 system-ui,sans-serif; }
.legal-links a { display:inline-flex; align-items:center; min-height:44px; color:#245a48; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.title-screen-shell > .legal-links { position:absolute; inset:auto 8px max(8px,env(safe-area-inset-bottom)); z-index:3; width:fit-content; max-width:calc(100% - 16px); margin:auto; padding:0 12px; border-radius:8px; background:rgba(255,253,248,.94); }
.legal-consent { font:14px/1.65 system-ui,sans-serif; color:#39493e; }
.legal-consent label { display:flex; align-items:flex-start; gap:10px; padding:10px 0; min-height:44px; }
.legal-consent input[type="checkbox"] { flex:0 0 22px; width:22px; height:22px; min-height:0; margin:2px 0; }
.legal-consent p { margin:6px 0; }
.legal-links a:focus-visible { outline:3px solid #a86b17; outline-offset:2px; }

.home-announcement-board { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.home-announcement-board__summary {
  /* Match the 132px side tools on the 1080px logical home canvas. */
  position: absolute; top: calc(100% * 212 / 1920); right: calc(100% * 28 / 1080);
  display: grid; place-items: center; width: calc(100% * 132 / 1080); height: auto; aspect-ratio: 1; padding: 0;
  border: 0; background: transparent;
  border-radius: 50%; box-shadow: none; cursor: pointer; pointer-events: auto; isolation: isolate;
}
.home-announcement-board__summary::before { content: ""; position: absolute; inset: 0; background: var(--theme-tool-frame, url('/assets/ui-kits/pop-fantasy-v2/home/illustrated-v1/tool-frame.webp')) center / 100% 100% no-repeat; z-index: -1; }
.home-announcement-board__summary::after { content: ""; position: absolute; inset: 7%; border-radius: 50%; background: var(--pf-surface); z-index: -2; }
.home-announcement-board__summary > img { width: 52%; height: 52%; object-fit: contain; }
.home-announcement-board__badge { position: absolute; right: -4px; top: -4px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 12px; background: var(--pf-accent); color: white; font-size: 12px; font-weight: 700; }
.home-announcement-dialog { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; background: #30271980; pointer-events: auto; }
.home-announcement-dialog[hidden] { display: none; }
.home-announcement-panel { display: grid; grid-template-rows: auto minmax(0,1fr); gap: 12px; width: 100%; max-height: 90%; padding: 12px; box-sizing: border-box; border: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1)) solid transparent; border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch); background: var(--pf-surface); color: var(--pf-outline); }
.home-announcement-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.home-announcement-header h2 { margin: 0; font-size: 22px; color: var(--pf-primary); }
.home-announcement-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; background: var(--theme-tool-frame, url('/assets/ui-kits/pop-fantasy-v2/home/illustrated-v1/tool-frame.webp')) center / contain no-repeat; color: var(--pf-outline); cursor: pointer; }
.home-announcement-close svg { width: 22px; height: 22px; }
.home-announcement-board__list { display: grid; align-content: start; gap: 10px; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--pf-primary) var(--pf-surface); }
.home-announcement-entry__open { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 52px; padding: 12px; border: 1px solid var(--pf-frame); border-radius: 6px; background: var(--pf-surface); color: var(--pf-outline); cursor: pointer; text-align: left; }
.home-announcement-entry__open[data-unread='true'] { border-left: 3px solid var(--pf-accent); }
.home-announcement-entry__title { flex: 1; min-width: 80px; font-size: 16px; overflow-wrap: anywhere; }
.home-announcement-important { justify-self: start; font-size: 12px; padding: 2px 6px; background: var(--pf-accent); color: white; border-radius: 4px; }
.home-announcement-unread { font-size: 12px; color: var(--pf-primary); }
.home-announcement-back { justify-self: start; min-height: 44px; padding: 6px 12px; border: 1px solid var(--pf-frame); border-radius: 6px; background: var(--pf-surface); color: var(--pf-primary); cursor: pointer; }
.home-announcement-detail-title { margin: 0; color: var(--pf-primary); font-size: 22px; overflow-wrap: anywhere; }
.home-announcement-date { margin: 0; color: var(--pf-muted); font-size: 12px; }
.home-announcement-entry__body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.8; }
.home-announcement-image { max-width: 100%; max-height: 240px; object-fit: contain; }
.home-announcement-board button:focus-visible { outline: 2px solid var(--pf-primary); outline-offset: 2px; }

.home-notice-banner { position: absolute; left: 2.6%; bottom: max(17%, calc(var(--home-nav-clearance, 0px) / var(--canvas-display-ratio, 1))); width: 56%; z-index: 35; color: var(--pf-outline); zoom: var(--canvas-display-ratio, 1); }
.home-notice-banner__viewport { --notice-frame-edge: calc(var(--pf-frame-thickness) / var(--calibration-frame-scale, 1)); position: relative; border: 10px solid transparent; background: transparent; }
.home-notice-banner__viewport::before { content: ""; position: absolute; inset: calc(5px / var(--calibration-frame-scale, 1) - 10px); background: var(--pf-surface); pointer-events: none; }
.home-notice-banner__viewport::after { content: ""; position: absolute; inset: -10px; z-index: 2; border: var(--notice-frame-edge) solid transparent; border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch); pointer-events: none; }
.home-notice-banner__clip { position: relative; overflow: hidden; clip-path: inset(max(0px, calc(var(--notice-frame-edge) - 10px))); background: var(--pf-surface); }
.home-notice-banner__track { display: flex; transition: transform 550ms ease; }
.home-notice-banner__slide { flex: 0 0 100%; width: 100%; min-width: 0; height: clamp(52px, calc(var(--screen-frame-inline) * .15), 110px); position: relative; display: flex; align-items: center; padding: 6px; border: 0; border-radius: 0; background: var(--pf-surface); text-align: left; color: var(--pf-outline); box-shadow: none; cursor: pointer; overflow: hidden; }
.home-notice-banner__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-notice-banner__copy { position: relative; display: grid; gap: 4px; width: 100%; padding: 5px; background: #fff9edeb; }
.home-notice-banner__copy small { color: var(--pf-primary); font-size: 10px; }
.home-notice-banner__copy strong { font-size: clamp(12px, calc(var(--screen-frame-inline) * .035), 18px); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.home-notice-banner__controls { display: flex; justify-content: center; align-items: center; gap: 0; background: transparent; border-radius: 0; width: fit-content; margin: 0 auto; font-size: 11px; transform: translateY(-6px); }
.home-notice-banner__controls button { min-width: 28px; height: 28px; padding: 0; background: transparent; border: 0; color: var(--pf-primary); box-shadow: none; font-size: 17px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .home-notice-banner__track { transition: none; } }

.home-notice-banner__controls .home-notice-banner__dot { display: grid; place-items: center; width: 24px; min-width: 24px; height: 24px; }
.home-notice-banner__dot::before { content: ""; width: 6px; height: 6px; border-radius: 9px; border: 1px solid #8d703e; background: #fff8e8; box-shadow: 0 1px 2px #46372250; transition: width 200ms ease, background 200ms ease; }
.home-notice-banner__dot[aria-current="true"]::before { width: 16px; background: var(--pf-primary); border-color: #fff0c6; }

.home-notice-banner__viewport { touch-action: pan-y pinch-zoom; }
.home-notice-banner__slide[data-has-image="true"] { padding: 0; align-items: flex-end; }
.home-notice-banner__slide[data-has-image="true"] .home-notice-banner__copy {
  box-sizing: border-box; padding: 18px 8px 5px; color: white;
  background: linear-gradient(transparent, #172c28d9); text-shadow: 0 1px 2px #0009;
}
.home-notice-banner__slide[data-has-image="true"] .home-notice-banner__copy small { display: none; }
.home-notice-banner__slide[data-has-image="true"] .home-notice-banner__copy strong { -webkit-line-clamp: 1; }
.home-notice-banner__slide:focus-visible { outline: 2px solid var(--pf-primary); outline-offset: -3px; }

/* Theme review 2026-10-02: the slide height was capped at 110px while its
   width grew with the frame, so on large screens the banner flattened (and
   banner images were cropped) and its px text shrank in proportion. Keep one
   3:1 shape and size the text with the banner, as the gothic kit already did. */
.home-notice-banner { container-type: inline-size; }
.home-notice-banner .home-notice-banner__slide:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { height: auto; aspect-ratio: 3 / 1; min-height: 52px; }
.home-notice-banner .home-notice-banner__copy small:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { font-size: max(10px, 3.2cqw); }
.home-notice-banner .home-notice-banner__copy strong:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { font-size: max(12px, 5cqw); }
/* Review 2026-10-03: the banner read too large and crowded the navigation
   icons; draw it at 5/7 of its calibrated size, kept on its left edge and
   lifted a little. transform composes with the calibrated translate/scale. */
.home-game-frame[data-ui-orientation="portrait"] .home-notice-banner { transform-origin: left bottom; transform: translate(4%, -22%) scale(.714); }
/* Round 4: it sat flush on the frame's left edge; 4% of its width gives it
   the same breathing room as the side tools above it. */

/* The screen a share link lands on when it does not simply open the game:
   a dead link, or an invitation waiting on a login or on the owner.

   It sits outside the 1080x1920 logical canvas, so every length here is real
   px rather than cqw -- there is no scaled frame to divide them by, and this
   is one of the few screens a visitor may see before anything else loads. */
.share-entry-screen {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px;
  background: var(--bg);
  color: var(--text);
}

.share-entry-panel {
  display: grid;
  gap: 16px;
  justify-items: center;
  max-width: 420px;
  padding: 32px 24px;
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--elevation-2);
  text-align: center;
}

.share-entry-panel__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.share-entry-panel__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.82;
}

/* 44px minimum: this is often the only thing on the screen to press, and on a
   phone it is the whole reason the visitor is here. */
.share-entry-panel__action {
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent, #fff);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.event-screen__content {
  display: grid;
  align-content: start;
  gap: var(--space-5);
  padding: var(--space-3);
  overflow: auto;
}

.event-screen__header {
  display: grid;
  gap: var(--space-2);
}

.event-screen__eyebrow {
  margin: 0;
  color: var(--accent);
  font-weight: 900;
  letter-spacing: 0.16em;
}

.event-screen__title {
  margin: 0;
  font-size: var(--text-xl);
}

.event-screen__card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elev-1);
}

.event-screen__banner {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.event-screen__card-title,
.event-screen__card-body,
.event-screen__period,
.event-screen__currency,
.event-screen__empty {
  margin: 0;
}

.event-screen__period {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: 700;
}

.event-screen__status,
.home-profile-operation-status {
  margin: 0;
  padding: var(--space-3);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: 700;
}

.event-screen__status[data-tone="error"],
.home-profile-operation-status[data-tone="error"] {
  color: var(--color-danger);
}

.event-screen__status[data-tone="success"],
.home-profile-operation-status[data-tone="success"] {
  color: var(--color-success);
}

.event-screen .screen-action {
  min-height: 44px;
  padding: 0 var(--space-4);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--elev-1);
  cursor: pointer;
  font-weight: 800;
}

.event-screen .screen-action:disabled {
  color: var(--ink-muted);
  background: var(--paper);
  box-shadow: none;
  cursor: not-allowed;
}

.event-screen__currency {
  color: var(--accent);
  font-weight: 900;
}

.home-event-banner {
  position: absolute;
  top: 23cqw;
  right: 19cqw;
  left: 19cqw;
  z-index: 18;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: max(52px, 13cqw);
  padding: 0;
  overflow: hidden;
  color: var(--on-accent);
  border: max(1px, 0.1852cqw) solid color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: 2.4cqw;
  background: var(--accent);
  box-shadow: 0 1cqw 2.8cqw rgba(32, 38, 58, 0.18);
  cursor: pointer;
  text-align: left;
}

.home-event-banner__image {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.68;
}

.home-event-banner__copy {
  grid-area: 1 / 1;
  z-index: 1;
  display: grid;
  align-content: end;
  gap: 0.4cqw;
  padding: 2cqw;
  background: linear-gradient(180deg, transparent 10%, rgba(32, 38, 58, 0.78));
}

.home-event-banner__title,
.home-event-banner__period {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-screen .screen-shell__content { overflow: auto; }
.event-screen__card { background: var(--pf-surface); color: var(--pf-outline); border-color: var(--pf-frame); }
.home-profile-activity-link .home-event-banner__copy { padding: 0; background: none; }
.home-profile-activity-link .home-event-banner__title,
.home-profile-activity-link .home-event-banner__period { font-size: 14px; }

.home-event-banner__title {
  font-size: max(var(--canvas-min-font-size), 2.2cqw);
  font-weight: 900;
}

.home-event-banner__period {
  font-size: max(var(--canvas-min-font-size), 1.3cqw);
  font-weight: 700;
}

/* Event entry and details share the established Pop Fantasy frame. */
.event-screen > .screen-shell__body {
  --screen-shell-padding: calc(var(--screen-frame-inline) * .045);
  --screen-shell-bottom-padding: 24px;
  background: var(--pf-browse-background);
}
.event-screen .screen-shell__content { display: block; overflow: auto; }
.event-screen .event-screen__content { padding: 0; gap: 16px; overflow: visible; }
.event-screen .event-screen__header { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; }
.event-screen .event-screen__title { grid-column: 2; grid-row: 1; color: var(--pf-primary); font-size: 24px; }
.event-screen .event-screen__header .event-screen__back {
  grid-column: 1; grid-row: 1; display: grid; place-items: center;
  width: 44px; height: 44px; min-height: 44px; padding: 10px; border: 0; border-radius: 50%;
  background: var(--pf-surface) var(--theme-tool-frame, url('/assets/ui-kits/pop-fantasy-v2/home/illustrated-v1/tool-frame.webp')) center / 100% 100% no-repeat;
  color: var(--pf-outline); box-shadow: none;
}
.event-screen__back > svg { width: 22px; height: 22px; }
.event-screen .event-screen__card {
  padding: 14px; gap: 12px; border: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1)) solid transparent;
  border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
  border-radius: 8px; background: var(--pf-surface); box-shadow: none;
}
.event-screen .event-screen__card-title { color: var(--pf-primary); font-size: 24px; line-height: 1.35; overflow-wrap: anywhere; }
.event-screen .event-screen__period { color: var(--pf-muted); font-size: 13px; font-weight: 500; }
.event-screen .event-screen__card-body { color: var(--pf-outline); font-size: 15px; line-height: 1.7; }
.event-screen .event-screen__currency { color: var(--pf-primary); font-size: 14px; }
.event-screen .event-screen__currency:empty { display: none; }
.event-screen .event-screen__card > .screen-action {
  min-height: 52px; padding: 4px 8px; border: 10px solid transparent;
  border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
  border-radius: 6px; background: var(--pf-accent); color: var(--pf-highlight); box-shadow: none;
  font-size: 16px; line-height: 1.4; white-space: normal;
}
.event-screen .event-screen__card > .screen-action:disabled { background: var(--pf-primary-soft); color: var(--pf-muted); cursor: default; }
.event-screen .game-disclosure { border: 1px solid var(--pf-frame); border-radius: 6px; }
.event-screen .event-screen__empty { padding: 20px; background: var(--pf-surface); border: 1px solid var(--pf-frame); border-radius: 8px; color: var(--pf-muted); }
.home-game-canvas .home-event-banner {
  top: 18cqw; min-height: 9cqw; overflow: visible;
  border: 0; border-radius: 0; background: var(--pf-surface); box-shadow: none; color: var(--pf-outline);
}
.home-game-canvas .home-event-banner::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: calc(10 * var(--control-px)) solid transparent;
  border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
}
.home-game-canvas .home-event-banner__copy { align-content: center; padding: 1cqw 3cqw; background: var(--pf-surface); }
.home-game-canvas .home-event-banner__title { color: var(--pf-primary); }
.home-game-canvas .home-event-banner__period { color: var(--pf-muted); font-weight: 500; }
.home-game-canvas .home-event-banner:has(.home-event-banner__image) { grid-template-columns: 30% minmax(0,1fr); }
.home-game-canvas .home-event-banner__image { opacity: 1; object-fit: contain; }
.home-game-canvas .home-event-banner:has(.home-event-banner__image) .home-event-banner__copy { grid-column: 2; }

/* ショップ。ガチャ石の疑似購入。 */
.shop-balance {
  display: grid;
  gap: .6cqw;
  padding: 2.2cqw 2.6cqw;
}

.shop-balance__label {
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 2.6cqw);
  font-weight: 900;
}

.shop-balance__value {
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 5.4cqw);
  font-weight: 900;
  line-height: 1.2;
}

/* 決済しないことは脚注ではなく、押す前に読める場所に。 */
.shop-balance__note {
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 2.5cqw);
  line-height: 1.5;
}

.shop-product-list {
  display: grid;
  gap: 1.4cqw;
  padding: 2.2cqw 2.6cqw;
}

.shop-message {
  margin: 0;
  padding: 1.2cqw 1.6cqw;
  color: var(--ink);
  border-radius: var(--radius-md, 2cqw);
  background: var(--surface-strong, var(--surface));
  font-size: max(var(--screen-min-font-size), 2.7cqw);
  font-weight: 700;
}

.shop-product {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.4cqw;
  align-items: center;
  padding: 1.6cqw 1.8cqw;
  border: max(1px, .2cqw) solid var(--line);
  border-radius: var(--radius-md, 2cqw);
  background: var(--surface);
}

.shop-product__icon {
  width: 11cqw;
  height: 11cqw;
  min-width: 40px;
  min-height: 40px;
  object-fit: contain;
  border-radius: var(--radius-sm, 1.2cqw);
  background: var(--surface-strong, var(--paper));
}

.shop-product__icon--empty {
  border: max(1px, .2cqw) dashed var(--line);
}

.shop-product__body {
  display: grid;
  gap: .4cqw;
  min-width: 0;
}

.shop-product__name {
  color: var(--ink);
  font-size: max(var(--screen-min-font-size), 3cqw);
}

.shop-product__jewels,
.shop-product__note {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 2.6cqw);
  line-height: 1.5;
}

/* 値段そのものがボタン。The price is what you press, which is how a shop
   reads in this genre. */
.shop-product__buy {
  min-height: 44px;
  min-width: 22cqw;
  white-space: nowrap;
}

.shop-empty {
  margin: 0;
  color: var(--ink-soft);
  font-size: max(var(--screen-min-font-size), 2.6cqw);
  line-height: 1.5;
}

.shop-screen > .screen-shell__body {
  background: color-mix(in srgb, var(--paper) 94%, #f0dfb4);
}

.shop-screen .shop-screen-header {
  position: relative;
  min-height: 13cqw;
  padding: 3cqw 4cqw 3cqw 17cqw;
  border: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/common/panel-teal-ornate.webp") center / 100% 100% no-repeat;
}

.shop-screen .shop-screen-header::before {
  position: absolute;
  top: 17%;
  bottom: 17%;
  left: 5%;
  width: 13%;
  background: url("/assets/ui-kits/pop-fantasy-v2/home/simple-v3-icons/shop.webp") center / contain no-repeat;
  content: "";
}

.shop-screen .shop-screen-header .screen-shell__eyebrow {
  display: none;
}

.shop-screen .shop-screen-header .screen-shell__title {
  font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: max(var(--screen-min-font-size), 4.2cqw);
}

.shop-screen .shop-balance {
  padding: 4cqw 5cqw;
  border: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/common/panel-teal-simple.webp") center / 100% 100% no-repeat;
}

.shop-screen .shop-product-list {
  padding: 4cqw 4.5cqw;
  border: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/common/content-panel.webp") center / 100% 100% no-repeat;
}

.shop-screen .shop-product {
  min-height: 18cqw;
  padding: 2.4cqw 3cqw;
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/common/secondary-button-wide.webp") center / 100% 100% no-repeat;
}

.shop-screen .shop-product__jewels,
.shop-screen .shop-product__note {
  line-height: 1.3;
}

.shop-screen .shop-product__buy {
  color: #fff;
  border: 0;
  border-radius: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/common/teal-octagon-button.webp") center / 100% 100% no-repeat;
  box-shadow: none;
}

/* Pop Fantasy v2 component contract. One neutral surface family, semantic
   colors, three flat tones. Authored project replacements load after this. */
:root {
  --pf-frame: #c5a15a;
  /* Midpoint of the approved story/battle frames, before viewport scaling. */
  --pf-frame-thickness: 22.9190965px;
  --pf-frame-slice: 64;
  --pf-frame-art: url("/assets/ui-kits/pop-fantasy-v2/home/illustrated-v1/panel-frame.webp");
  --pf-surface: #fff9ed;
  --pf-surface-raised: #fffef8;
  --pf-primary: #426d4f;
  --pf-primary-soft: #edf2e8;
  --pf-accent: #ce7435;
  --pf-outline: #49392c;
  --pf-muted: #756650;
  --pf-highlight: #fffef8;
  --pf-shadow: #88704d;
  --pf-radius: 10px;
  --pf-line: 1px;
  --pf-inset: clamp(12px, 3cqw, 26px);
  --pf-label-height: 22px;
}

/* Optional preview palettes: no geometry changes and no user artwork filter. */
[data-pf-palette="blue"] { --pf-primary: #395e80; --pf-primary-soft: #eef3f7; --pf-accent: #bd733c; }
[data-pf-palette="red"] { --pf-primary: #944d43; --pf-primary-soft: #f7eeea; --pf-accent: #c88035; }
[data-pf-palette="silver"] { --pf-frame: #9aaba7; --pf-shadow: #697976; --pf-primary: #446b67; }
[data-pf-palette="dark"] {
  --pf-surface: #2b302b; --pf-surface-raised: #353d33;
  --pf-outline: #f5edda; --pf-muted: #c0baa7;
  --pf-primary: #9bbc8d; --pf-primary-soft: #394d39;
  --pf-highlight: #e2e7ce; --pf-shadow: #171e18; --pf-accent: #d98a49;
}

:is(.story-screen,.story-reader-screen,.battle-screen,.sortie-screen,.battle-result-screen,
    .formation-screen,.formation-detail-screen,.collection-screen,.gacha-screen,.shop-screen) {
  --ink: var(--pf-outline);
  --ink-soft: var(--pf-muted);
  --surface: var(--pf-surface);
  --paper: var(--pf-surface);
  --line: var(--pf-frame);
  --accent: var(--pf-accent);
  --on-accent: var(--pf-highlight);
}

.pf-panel, .pf-card, .pf-modal,
:is(.story-list-panel,.story-reader-textbox,.story-reader-full-log__panel,
    .sortie-party,.sortie-opponent,.battle-result-rewards):not(.game-screen-part--has-asset) {
  color: var(--pf-outline);
  border: var(--pf-line) solid var(--pf-frame);
  border-top-width: 2px;
  border-radius: var(--pf-radius);
  background: var(--pf-surface);
  box-shadow: inset 0 1px 0 var(--pf-highlight), 0 2px 0 var(--pf-shadow);
  padding: var(--pf-inset);
}
.pf-card { --pf-inset: 12px; }
.pf-header, .story-screen-header .screen-shell__title, .sortie-header .screen-shell__title {
  color: var(--pf-primary);
  font-size: clamp(22px, 5cqw, 36px);
  line-height: 1.2;
}
.pf-primary, .pf-secondary, .pf-tab,
:is(.story-mode-tab,.story-reader-back,.story-reader-log-open,.story-reader-next,.story-reader-choice,
    .sortie-actions .screen-action,.battle-result-actions .screen-action,.battle-actions .screen-action) {
  min-height: 44px;
  border: var(--pf-line) solid var(--pf-frame);
  border-radius: var(--pf-radius);
  padding: 10px 16px;
  color: var(--pf-outline);
  background: var(--pf-surface);
  box-shadow: inset 0 1px 0 var(--pf-highlight), 0 2px 0 var(--pf-shadow);
  cursor: pointer;
  font-size: clamp(13px, 2.8cqw, 18px);
  line-height: 1.25;
}
.pf-primary,
:is(.story-reader-next,.sortie-depart,.battle-result-actions .screen-action--primary) {
  background: var(--pf-accent);
  color: var(--pf-highlight);
  border-color: var(--pf-shadow);
}
.pf-tab[aria-selected="true"], .story-mode-tab--active {
  color: var(--pf-primary);
  background: var(--pf-primary-soft);
  border-color: var(--pf-primary);
  box-shadow: inset 0 -3px 0 var(--pf-primary);
}
.pf-badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--pf-primary-soft);
  color: var(--pf-primary);
  font-size: 12px;
}
.pf-gem { width: 18px; height: 18px; object-fit: contain; }
.pf-navigation { display: flex; align-items: center; justify-content: space-around; gap: 12px; }
:is(.pf-primary,.pf-secondary,.pf-tab,.story-mode-tab,.story-reader-next,.story-reader-back):focus-visible {
  outline: 3px solid var(--pf-primary);
  outline-offset: 3px;
}
:is(.pf-primary,.pf-secondary,.story-reader-next,.sortie-depart,.battle-actions .screen-action):disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* One loaded sprite carries all three colors. Keep readable fallback text
   until it loads; selection never needs another network request. */
.pf-label { position: relative; display: inline-grid; place-items: center; line-height: 1; }
.pf-label__text { color: var(--pf-label-color, var(--pf-outline)); font-weight: 500; }
.pf-label__loader { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* A maker's independent action wordmark owns the complete lettering layer. */
:is(.story-slot-button-label,.battle-slot-button-label)[data-ui-custom-frame] > * { visibility: hidden; }
:is(.story-slot-button-label,.battle-slot-button-label)[data-ui-custom-frame]::after { display: none; }
.pf-label[data-label-ready="true"] {
  height: var(--pf-label-height);
  width: auto;
  aspect-ratio: var(--pf-label-ratio, 2.8);
  max-width: 100%;
}
.pf-label[data-label-ready="true"] .pf-label__text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.pf-label[data-label-ready="true"]::after {
  position: absolute; inset: 0; content: "";
  background-image: var(--pf-label-image);
  background-size: 100% 300%;
  background-position: center var(--pf-label-position, 0%);
  background-repeat: no-repeat;
  pointer-events: none;
}
.home-bottom-nav-item .pf-label {
  --pf-label-height: clamp(14px, 3.2cqw, 22px);
  position: absolute;
  left: 12%; right: 12%; bottom: 10%;
  margin: auto;
}
.home-game-canvas .home-bottom-nav-item .pf-label { --pf-label-height: 3.5cqw; }
.home-bottom-nav-item--active .pf-label { --pf-label-color: var(--pf-primary); --pf-label-position: 50%; }
:is(.battle-slot-button,.story-slot-button) .pf-label { --pf-label-height: 5.4cqw; }
.battle-slot-button .pf-label { --pf-label-color: var(--pf-highlight); --pf-label-position: 100%; }
.pf-label--back { --pf-label-height: 20px; }
.home-character__image[hidden], .story-reader-character img[hidden], .battle-enemy-avatar img[hidden] { display: none; }

/* One thickness for the entire viewport, never for each differently scaled part. */
.home-game-frame, .screen-shell {
  --pf-frame-thickness: clamp(16px, calc(var(--screen-frame-inline, 1440px) * 0.0159160392), 22.9190965px);
}

/* Layout only; surface/button/header appearance belongs to the shared kit. */
.story-screen > .screen-shell__body {
  --screen-shell-padding: calc(var(--screen-frame-inline) * .045);
  --screen-shell-bottom-padding: calc(var(--screen-frame-inline) * .225);
  background: var(--pf-surface) url('/assets/ui-kits/pop-fantasy-v2/home/art/home-background.webp') center / cover no-repeat;
}
.story-screen .screen-shell__content {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 3cqw;
  padding: 1cqw;
  overflow: hidden;
}
.story-screen-header { display: flex; align-items: center; gap: 14px; padding: 2cqw 1cqw; }
.story-screen-header::before {
  content: ''; width: 11cqw; height: 11cqw; flex: 0 0 auto;
  background: url('/assets/ui-kits/pop-fantasy-v2/home/simple-v3-icons/story.webp') center / contain no-repeat;
}
.story-screen-header .screen-shell__eyebrow { display: none; }
.pf-label--heading { --pf-label-height: clamp(26px, 6cqw, 42px); --pf-label-color: var(--pf-primary); }
.story-screen .story-mode-tabs { gap: 8px; min-height: 44px; overflow: visible; }
.story-screen .story-mode-tab { padding: 8px; }

.story-screen .screen-shell__body[data-ui-orientation="landscape"] .screen-shell__content {
  grid-template-columns: clamp(104px, 18%, 200px) minmax(0,1fr);
  grid-template-rows: auto minmax(0,1fr); gap: 10px 16px;
}
.story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-screen-header { grid-column: 1; grid-row: 1; padding: 0; gap: 8px; }
.story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-screen-header::before { width: 28px; height: 28px; }
.story-screen .screen-shell__body[data-ui-orientation="landscape"] .pf-label--heading { --pf-label-height: 24px; }
.story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-mode-tabs {
  grid-column: 1; grid-row: 2; grid-template-columns: minmax(0,1fr);
  align-content: start; min-height: 0; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; padding: 2px;
}
.story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-screen-layout { grid-column: 2; grid-row: 1 / -1; min-width: 0; }
.story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-list-panel { padding: 8px; }
.story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-chapter-block { gap: 8px; }
.story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-chapter-block__header { padding: 6px 2px; font-size: 14px; }
.story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-list-item { min-width: 0; min-height: 84px; padding: 10px; align-content: start; }
.story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-list-item__title { grid-column: 1 / -1; grid-row: 2; font-size: clamp(15px, 1.8cqw, 22px); overflow-wrap: anywhere; }
.story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-list-item__chapter { align-self: center; overflow-wrap: anywhere; }
.story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-list-item__status { grid-row: 1; justify-self: end; }
.story-screen .story-mode-tab--active { color: var(--pf-primary); background: var(--pf-primary-soft); border-color: var(--pf-primary); box-shadow: inset 0 -3px 0 var(--pf-primary); }
.story-screen .story-mode-tab::before,
.story-screen .story-list-panel::before,
.story-screen .story-list-item::before,
.story-screen .story-chapter-block__header::before { content: none; }
.story-screen .story-screen-layout { min-height: 0; display: grid; }
.story-screen .story-list-panel { min-height: 0; overflow: hidden; padding: 3cqw; }
.story-screen .story-chapter-list {
  height: 100%; align-content: start; overflow-y: auto; overflow-x: hidden;
  gap: 5cqw; padding: 0 4px 6px 0; scrollbar-width: thin;
  scrollbar-color: var(--pf-primary) var(--pf-surface);
}
.story-screen .story-chapter-block { gap: 14px; }
.story-screen .story-chapter-block__header {
  min-height: 44px; padding: 10px 2px; border-radius: 0;
  border-bottom: 1px solid var(--pf-frame); color: var(--pf-primary);
  background: transparent; font-size: clamp(13px, 2.8cqw, 18px);
}
.story-screen .story-chapter-block__header span { color: inherit; }
.story-screen .story-chapter-block__header i { border: 0; background: none; color: var(--pf-primary); width: 24px; }
.story-screen .story-list { gap: 12px; }
.story-screen .story-list-item {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px;
  padding: 14px; min-height: 78px; text-align: left;
  border: 1px solid var(--pf-frame); border-radius: var(--pf-radius);
  background: var(--pf-surface-raised); box-shadow: none;
}
.story-screen .story-list-item__chapter { grid-column: 1; color: var(--pf-muted); font-size: 12px; }
.story-screen .story-list-item__title { grid-column: 1; color: var(--pf-outline); font-size: clamp(15px, 3.4cqw, 22px); line-height: 1.5; }
.story-screen .story-list-item__status {
  position: static; grid-column: 2; grid-row: 1 / 3; align-self: center;
  padding: 4px 6px; border: 0; border-radius: 4px;
  font-size: 11px; background: var(--pf-accent); color: var(--pf-highlight);
}
.story-screen .story-list-item[data-story-selected='true'] {
  border-color: var(--pf-primary); background: var(--pf-primary-soft);
  box-shadow: inset 3px 0 0 var(--pf-primary);
}
.story-screen .story-list-item[data-story-selected='true'] :is(.story-list-item__chapter,.story-list-item__title) { color: var(--pf-primary); }
.story-screen .story-list-item[data-story-status='clear'] .story-list-item__status { color: var(--pf-primary); background: var(--pf-primary-soft); border: 0; }
.story-screen .story-list-item[data-story-status='locked'] .story-list-item__status { background: var(--pf-muted); }
/* Reader: one artwork stage and one bottom text panel, no nested frames. */
.story-reader-screen {
  border-radius: var(--screen-shell-radius);
  color: var(--pf-outline);
  background: var(--pf-surface);
}
.story-reader-screen .story-reader-stage { display: block; padding: 0; background: var(--pf-surface); }
.story-reader-screen .story-reader-bg {
  background: url('/assets/ui-kits/pop-fantasy-v2/home/art/home-background.webp') center / cover no-repeat;
  mask-image: none;
}
.story-reader-screen .story-reader-character {
  position: absolute; left: 10%; right: 10%; top: 12%; bottom: 18%;
  display: block; width: 80%; height: 70%; aspect-ratio: auto; margin: 0; border-radius: 0;
}
.story-reader-screen .story-reader-character img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: 100%; object-fit: contain; object-position: center bottom; }
.story-reader-screen .story-reader-character__aura,
.story-reader-screen .story-reader-character__silhouette,
.story-reader-screen .story-reader-character__labels,
.story-reader-screen .story-reader-log { display: none; }
.story-reader-screen .story-reader-back {
  top: 3cqw; left: 3cqw; min-width: 80px; padding: 8px 14px;
}
.story-reader-screen .story-reader-log-open { top: 3cqw; right: 3cqw; color: var(--pf-outline); min-width: 58px; }
.story-reader-screen .story-reader-progress { left: 28%; right: 23%; top: 7cqw; height: 4px; background: var(--pf-surface); }
.story-reader-screen .story-reader-progress span { background: var(--pf-primary); }
.story-reader-screen .story-reader-counter { top: 10cqw; right: 25%; color: var(--pf-outline); font-size: 12px; }
.story-reader-screen .story-reader-textbox {
  position: absolute; left: 4%; right: 4%; bottom: 3%;
  height: 32%; min-height: min(250px,40%); max-height: 44%; display: flex;
  flex-direction: column;
  gap: 8px 12px; padding: clamp(14px, 4cqw, 28px);
  overflow: hidden; cursor: pointer;
}
.story-reader-screen .story-reader-speaker {
  flex: 0 0 auto; padding-bottom: 8px; border-bottom: 1px solid var(--pf-frame);
  color: var(--pf-primary); font-size: clamp(15px, 3.3cqw, 22px);
}
.story-reader-screen .story-reader-text {
  grid-column: 1 / -1; font-size: clamp(15px, 3.2cqw, 21px); line-height: 1.7;
  color: var(--pf-outline); font-weight: 500; flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
.story-reader-screen .story-reader-next { position: static; flex: 0 0 auto; align-self: flex-end; min-width: 78px; margin: 4px 0 0; }
.story-reader-screen .story-reader-choices, .story-reader-screen .story-reader-reward-status { flex: 0 0 auto; max-height: 40%; overflow-y: auto; }
.story-reader-screen .story-reader-choice { width: 100%; margin: 4px 0; color: var(--pf-outline); }
.story-reader-screen .story-reader-full-log { background: rgba(49,39,29,.48); z-index: 10; }
.story-reader-screen .story-reader-full-log__panel { color: var(--pf-outline); max-height: 85%; overflow: auto; }
.story-reader-screen .story-reader-full-log__item { color: var(--pf-outline); background: var(--pf-surface); border-bottom: 1px solid var(--pf-frame); }
.story-reader-screen .story-reader-full-log__text { color: var(--pf-outline); font-size: 14px; line-height: 1.65; }
.story-reader-screen .story-reader-full-log__speaker { color: var(--pf-primary); }
.story-reader-screen .story-reader-audio { top: 15%; right: 3%; }

.story-reader-screen[data-ui-orientation='landscape'] {
  --screen-frame-inline: min(calc(100vw - 24px), calc((100dvh - 24px) * 16 / 9), 1920px);
  --screen-frame-block: calc(var(--screen-frame-inline) * 9 / 16);
}
.story-reader-screen[data-ui-orientation='landscape'] .story-reader-textbox { height: 37%; min-height: 200px; max-height: 54%; bottom: 3%; }
.story-reader-screen[data-ui-orientation='landscape'] .story-reader-text { font-size: 16px; }
.story-reader-screen[data-ui-orientation='landscape'] .story-reader-character { top: 3%; bottom: 20%; height: 77%; }

/* Reader chrome uses the same frame assets and edge scale as home/detail. */
.story-reader-screen .story-reader-stage > .story-reader-textbox,
.story-reader-screen .story-reader-full-log > .story-reader-full-log__panel {
  box-sizing: border-box;
  border: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1)) solid transparent;
  border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
  border-radius: 8px;
  background: var(--pf-surface);
  box-shadow: none;
  padding: clamp(10px, 2.5cqw, 20px);
}
.story-reader-screen .story-reader-stage > .story-reader-textbox {
  border-width: 6px;
  height: 30%; min-height: min(220px, 42%); max-height: 44%;
  gap: 8px;
}
.story-reader-screen .story-reader-stage .story-reader-back,
.story-reader-screen .story-reader-full-log .story-reader-full-log__close {
  display: grid; place-items: center;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  padding: 11px; border: 0; border-image: none; border-radius: 50%;
  background: var(--pf-surface) var(--theme-tool-frame, url('/assets/ui-kits/pop-fantasy-v2/home/illustrated-v1/tool-frame.webp')) center / 100% 100% no-repeat;
  box-shadow: none; color: var(--pf-outline);
}
.story-reader-screen .story-reader-full-log__close > svg { width: 22px; height: 22px; }
.story-reader-screen .story-reader-stage .story-reader-log-open,
.story-reader-screen .story-reader-textbox .story-reader-next {
  display: grid; place-items: center;
  box-sizing: border-box; width: 56px; height: 56px; min-width: 56px; min-height: 56px;
  border: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1)) solid transparent;
  border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
  border-radius: 8px; padding: 0;
  background: var(--pf-surface); color: var(--pf-outline); box-shadow: none;
  font-size: 15px; line-height: 1.25;
}
.story-reader-screen .story-reader-textbox .story-reader-next { background: var(--pf-accent); color: var(--pf-highlight); }
.story-reader-screen :is(.story-reader-log-open, .story-reader-next) > svg { width: 24px; height: 24px; }
.story-reader-screen .story-reader-speaker { padding-bottom: 6px; font-weight: 600; }
.story-reader-screen .story-reader-full-log__header { align-items: center; gap: 8px; }
.story-reader-screen .story-reader-full-log__title { font-size: 20px; color: var(--pf-primary); }
.story-reader-screen .story-reader-full-log__count { color: var(--pf-muted); font-size: 12px; }
.story-reader-screen .story-reader-full-log__item { border: 0; border-bottom: 1px solid var(--pf-frame); border-radius: 0; padding: 12px 4px; box-shadow: none; }
.story-reader-screen .story-reader-full-log__item--current { background: var(--pf-primary-soft); }
.story-reader-screen .story-reader-choice { border: 1px solid var(--pf-frame); border-radius: 8px; background: var(--pf-surface); min-height: 44px; }
.story-reader-screen[data-ui-orientation='landscape'] .story-reader-stage > .story-reader-textbox {
  height: 32%; min-height: min(132px, 45%); max-height: 45%; padding: clamp(10px, 1.6cqw, 22px); gap: 6px;
}
.story-reader-screen[data-ui-orientation='landscape'] .story-reader-speaker { font-size: 16px; padding-bottom: 4px; }

.story-reader-screen .story-reader-stage > .story-reader-back,
.story-reader-screen .story-reader-stage > .story-reader-log-open {
  top: max(12px, 2%); width: 44px; height: 44px; min-width: 44px; min-height: 44px;
}
.story-reader-screen .story-reader-stage > .story-reader-back { left: 3%; }
.story-reader-screen .story-reader-stage > .story-reader-log-open { right: 3%; }
.story-reader-screen .story-reader-stage > .story-reader-log-open,
.story-reader-screen .story-reader-textbox > .story-reader-next { border-width: 6px; }
.story-reader-screen .story-reader-back > svg { width: 22px; height: 22px; }
.story-reader-screen .story-reader-textbox > .story-reader-speaker,
.story-reader-screen .story-reader-textbox > .story-reader-text { margin: 0; }
.story-reader-screen .story-reader-textbox > .story-reader-text { padding-right: 56px; }
.story-reader-screen .story-reader-textbox > .story-reader-next {
  position: absolute; right: 10px; bottom: 10px; margin: 0;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
}
.story-reader-screen .story-reader-textbox > .story-reader-choices,
.story-reader-screen .story-reader-textbox > .story-reader-reward-status { margin-right: 56px; }

/* Story index follows the shared panel and tab frame specification. */
.story-screen .story-list-panel,
.story-screen .story-mode-tabs > .story-mode-tab {
  border: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1)) solid transparent;
  border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
  border-radius: 8px; background: var(--pf-surface); box-shadow: none;
}
.story-screen .story-mode-tabs > .story-mode-tab { padding: 2px; min-height: 52px; }
.story-screen .story-mode-tabs > .story-mode-tab--active {
  background: var(--pf-primary); color: var(--pf-highlight);
}
.story-screen .story-chapter-block__header { border: 0; border-bottom: 1px solid var(--pf-frame); box-shadow: none; }

@container (max-width: 280px) {
  .story-screen .screen-shell__content {
    grid-template-rows: auto auto auto;
    overflow-y: auto;
  }
  .story-screen .story-mode-tabs { display: flex; min-width: 0; overflow-x: auto; }
  .story-screen .story-chapter-list { height: auto; overflow: visible; }
  .story-screen .story-mode-tabs > .story-mode-tab {
    flex: 0 0 96px;
    white-space: nowrap;
    border-width: 6px;
  }
}

/* Review 2026-10-03: the reader is not zoomed like the other screens, and its
   lettering read far too small. Names twice, lines one and a half times the
   former size, still tracking the frame width (phone to wide screens). */
.story-reader-screen[data-ui-orientation='portrait'] .story-reader-speaker { font-size: clamp(22px, 6.6cqw, 44px); }
.story-reader-screen[data-ui-orientation='portrait'] .story-reader-text { font-size: clamp(18px, 4.8cqw, 32px); line-height: 1.6; }

/* Review round 7: the story screen lifts its content -- the heading sits
   closer to the tabs, the chapter list starts right under the panel rim,
   and each story row is shorter -- so more rows fit. */
.story-screen .screen-shell__body[data-ui-orientation="portrait"] .screen-shell__content { gap: 6px; }
.story-screen .screen-shell__body[data-ui-orientation="portrait"] .story-screen-header { padding-block: 0; margin-bottom: -4px; }
.story-screen .screen-shell__body[data-ui-orientation="portrait"] .story-list-panel { padding-top: 6px !important; }
.story-screen .screen-shell__body[data-ui-orientation="portrait"] .story-chapter-block { gap: 8px; margin-top: -8px; }
.story-screen .screen-shell__body[data-ui-orientation="portrait"] .story-chapter-list { gap: 10px; }
.story-screen .screen-shell__body[data-ui-orientation="portrait"] .story-list-item { min-height: 56px; padding-block: 8px; }

/* The featured user image owns the stage; controls share the common kit. */
.gacha-screen .gacha-screen__dock { gap: 10px; }
.gacha-screen .gacha-banner-card::before { content: none; }
.gacha-screen .gacha-banner-card {
  border: 2px solid var(--pf-frame);
  border-radius: 7px;
  background-color: var(--pf-surface);
  box-shadow: inset 0 0 0 1px var(--pf-highlight);
}
.gacha-screen .gacha-banner-card[data-gacha-selected='true'] {
  border-color: var(--pf-primary);
  outline: 2px solid var(--pf-primary);
  outline-offset: -2px;
}
.gacha-screen .gacha-hero-stage--full::before { content: none; }
.gacha-screen .gacha-pull-panel--bare { background: var(--pf-surface); border: 1px solid var(--pf-frame); border-radius: var(--pf-radius); padding: 12px; }
.gacha-screen .gacha-pull-panel--bare .screen-action { background: var(--pf-accent); color: var(--pf-highlight); border: 1px solid var(--pf-shadow); border-radius: var(--pf-radius); min-height: 44px; }
.gacha-screen .gacha-banner-card[data-gacha-selected='true'] { outline-color: var(--pf-primary); }
.gacha-screen .gacha-banner-card--image::after { content: none; }
.gacha-screen .gacha-banner-card--image .gacha-banner-card__title {
  position: absolute; left: 6%; right: 6%; bottom: 7%; z-index: 3;
  padding: 3px 5px; color: var(--pf-outline); background: var(--pf-surface);
  font-size: clamp(12px,2.4cqw,16px); line-height: 1.25;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.gacha-screen .gacha-hero-stage__still { object-fit: contain; }
.gacha-screen .gacha-hero-stage--still::after { content: none; }
.gacha-screen .gacha-hero-stage__copy {
  max-width: none; padding: 10px 14px;
  background: var(--pf-surface); border: 1px solid var(--pf-frame); border-radius: var(--pf-radius);
}
.gacha-screen .gacha-hero-stage__copy strong { color: var(--pf-primary); font-size: clamp(16px,3.2cqw,23px); }
.gacha-screen .gacha-hero-stage__copy p { color: var(--pf-outline); font-size: 13px; line-height: 1.6; }

.gacha-screen .screen-shell__content { display: flex; flex-direction: column; justify-content: end; }
.gacha-screen > .screen-shell__body {
  /* Safari resolves the content's 100% height incorrectly with aspect-ratio
     alone, placing pull controls behind navigation instead of above padding. */
  height: var(--screen-frame-block);
}
.gacha-screen > .screen-shell__body[data-ui-orientation="portrait"] {
  /* Reserve the complete navigation bar plus a gap before the banner rail.
     Review 2026-10-03: the gap was too generous, so the banner, pull
     buttons and rail sit 16px lower, still clear of the bar; round 6 took
     another 12px, down to the top of the bar art. */
  --screen-shell-bottom-padding: max(84px, calc(var(--screen-frame-inline) * .2));
}
.gacha-screen .screen-shell__body[data-ui-orientation="portrait"] .screen-shell__content { padding-bottom: 8px; }
.gacha-screen .gacha-screen__dock { max-height: 100%; flex: 0 1 auto; align-content: start; overflow: auto; }
.gacha-screen .gacha-history-panel {
  top: 12px; right: 12px; width: min(90%, 480px); max-height: calc(100% - 24px);
  box-sizing: border-box; padding: 14px; background: var(--pf-surface); color: var(--pf-outline);
}
.gacha-screen .gacha-history-panel__list { overflow: auto; min-height: 0; max-height: none; }
.gacha-screen .gacha-history-panel__close { min-width: 44px; min-height: 44px; }

.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-screen__dock {
  width: 48%; margin-left: auto; gap: 6px;
}
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-pull-panel--bare { padding: 8px; }
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-pull-panel .screen-actions { gap: 6px; flex-wrap: nowrap; }
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-pull-panel .screen-action { flex: 1; min-width: 0; min-height: 44px; padding: 8px; font-size: 14px; }
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-banner-list { gap: 6px; padding: 0; }
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-banner-step { width: 44px; min-height: 44px; }

/* The selected banner occupies the center, with its neighbors behind it. */
.gacha-screen .gacha-banner-panel--rail .gacha-banner-list {
  display: flex;
  position: relative;
  box-sizing: border-box;
  gap: 0;
  padding: 8px 22%;
  scroll-padding-inline: 22%;
  scrollbar-width: none;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  cursor: grab;
}
.gacha-screen .gacha-banner-panel--rail .gacha-banner-list[data-swiping="true"] {
  scroll-snap-type: none;
  cursor: grabbing;
}
.gacha-screen .gacha-banner-panel--rail .gacha-banner-card {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transform: scale(.84);
  opacity: .7;
  z-index: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}
.gacha-screen .gacha-banner-panel--rail .gacha-banner-card[data-gacha-selected="true"] {
  transform: scale(1);
  opacity: 1;
  z-index: 2;
}
.gacha-banner-step:disabled { opacity: .3; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .gacha-screen .gacha-banner-panel--rail .gacha-banner-card { transition: none; }
}

/* Pull controls share the established gold frame; costs remain live values. */
/* The buttons carry their own frames, leaving their full width for labels. */
.gacha-screen .gacha-screen__dock .gacha-pull-panel.gacha-pull-panel--bare {
  border: 0; border-image: none; background: transparent; padding: 0; box-shadow: none;
}
.gacha-screen .gacha-pull-panel .screen-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 4px; }
.gacha-screen .gacha-pull-panel.gacha-pull-panel--bare .screen-actions .screen-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-width: 0; min-height: 76px; padding: 5px 2px;
  border: 6px solid transparent;
  border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
  border-radius: 8px; background: var(--pf-accent); color: var(--pf-highlight);
  /* Bevel from the theme accent: a fixed orange/brown pair only suited pop fantasy. */
  box-shadow: inset 0 5px 0 color-mix(in srgb, var(--pf-accent) 55%, #fff), inset 0 -5px 0 color-mix(in srgb, var(--pf-accent) 60%, #000), 0 3px 0 var(--pf-outline);
  line-height: 1.2;
}
.gacha-screen .gacha-pull-panel .gacha-pull-count {
  font-size: clamp(20px, 5.6cqw, 30px); font-weight: 800; letter-spacing: -.04em;
  color: var(--pf-highlight); -webkit-text-stroke: .6px var(--pf-outline); paint-order: stroke fill;
}
.gacha-screen .gacha-pull-panel .gacha-jewel-amount { font-size: 16px; font-weight: 600; }
.gacha-screen .gacha-pull-panel .gacha-jewel-amount__icon { width: 20px; height: 20px; flex-basis: 20px; }
.gacha-jewel-amount { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.gacha-jewel-amount__icon { width: 18px; height: 18px; object-fit: contain; flex: 0 0 18px; }
.gacha-jewel-amount__value { font-variant-numeric: tabular-nums; text-align: left; }
.gacha-pull-count { white-space: nowrap; }

/* Presentation uses the same green, gold and cream as the rest of the game. */
.gacha-presentation-overlay {
  --ink: var(--pf-outline);
  --ink-soft: var(--pf-muted);
  --accent: var(--pf-primary);
  background: rgba(20, 32, 25, .8);
}
.gacha-presentation-overlay .gacha-presentation-aura {
  background: conic-gradient(from 40deg, transparent, #c5a15a33, #426d4f33, transparent);
  opacity: .45;
}
.gacha-presentation-overlay .gacha-presentation-panel {
  color: var(--pf-outline);
  border-color: var(--pf-frame);
  background: linear-gradient(155deg, var(--pf-surface-raised), var(--pf-surface) 65%, var(--pf-primary-soft));
  box-shadow: inset 0 0 0 1px var(--pf-highlight), 0 8px 24px #18251d33;
}
.gacha-presentation-overlay .gacha-presentation-circle {
  border-color: #c5a15a40;
}
.gacha-presentation-overlay:not([data-phase="summary"]) .gacha-presentation-panel {
  background: radial-gradient(ellipse at 50% 30%, #344b3c, #16251d 75%);
  box-shadow: none;
}
.gacha-presentation-overlay .gacha-presentation-leadin__headline,
.gacha-presentation-overlay .gacha-presentation-leadin__detail {
  color: var(--pf-surface);
}
.gacha-presentation-overlay[data-phase="upgrade"] .gacha-presentation-leadin__headline {
  color: #f3d28a;
}
.gacha-presentation-overlay .gacha-presentation-card--featured {
  background: var(--pf-primary-soft);
  border-color: var(--pf-frame);
  box-shadow: 0 8px 24px #0e1b1540;
}
.gacha-presentation-overlay :is(.gacha-presentation-card__art, .gacha-presentation-special-cutin__art, .gacha-presentation-camera__art):not([data-has-art]) {
  background: radial-gradient(ellipse at 50% 35%, #dfe7d8, #78927b 55%, #426d4f);
  filter: none;
}
.gacha-presentation-overlay .gacha-presentation-nameplate,
.gacha-presentation-overlay .gacha-presentation-voice {
  color: var(--pf-outline);
  border: 1px solid var(--pf-frame);
  background: var(--pf-surface);
  box-shadow: inset 0 1px 0 var(--pf-highlight);
}
.gacha-presentation-overlay :is(.gacha-presentation-nameplate__rarity, .gacha-presentation-nameplate__arrow) {
  color: var(--pf-primary);
}
.gacha-presentation-overlay :is(.gacha-presentation-close, .gacha-presentation-skip, .gacha-presentation-next) {
  min-width: 44px;
  min-height: 44px;
  color: var(--pf-primary);
  border: 1px solid var(--pf-frame);
  border-radius: var(--pf-radius);
  background: var(--pf-surface);
  box-shadow: inset 0 1px 0 var(--pf-highlight), 0 2px 0 #88704d66;
}
.gacha-presentation-overlay .gacha-presentation-next {
  color: var(--pf-highlight);
  background: var(--pf-accent);
}

/* Secondary gacha actions stay below the shared HUD, above the artwork. */
.gacha-screen .screen-shell__content { padding-top: 56px; }
.gacha-screen .screen-shell__content > .gacha-utilities {
  position: absolute; top: 0; right: 4px; z-index: 30;
  display: flex; align-items: start; gap: 8px;
}
.gacha-screen .gacha-utilities > .gacha-details {
  position: static; flex: none; border: 0; background: none; border-radius: 0;
}
.gacha-screen .gacha-utilities .game-disclosure__summary,
.gacha-screen .gacha-utilities .gacha-history-dock .gacha-history-button {
  display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  padding: 10px; border: 0; border-radius: 50%; list-style: none;
  background: var(--pf-surface) var(--theme-tool-frame, url('/assets/ui-kits/pop-fantasy-v2/home/illustrated-v1/tool-frame.webp')) center / 100% 100% no-repeat;
  color: var(--pf-outline); box-shadow: none;
}
.gacha-screen .gacha-utilities .game-disclosure__summary::-webkit-details-marker { display: none; }
.gacha-screen .gacha-utilities .game-disclosure__summary > svg { width: 22px; height: 22px; }
.gacha-screen .gacha-utilities .gacha-details[open] > .game-disclosure__summary { color: var(--pf-primary); }
.gacha-screen .gacha-utilities .game-disclosure__content {
  position: absolute; top: 52px; right: 0; width: min(320px, 80cqw);
  box-sizing: border-box; max-height: 40dvh; overflow: auto; padding: 12px;
  border: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1)) solid transparent;
  border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
  background: var(--pf-surface); color: var(--pf-outline);
}
.gacha-screen .gacha-history-panel {
  top: calc(var(--screen-frame-inline) * 220 / 1080 + 64px);
  max-height: calc(100% - var(--screen-frame-inline) * 220 / 1080 - 88px);
}
.gacha-screen .gacha-utilities .gacha-history-button__icon { width: 20px; height: 20px; border-width: 2px; }
.gacha-screen .gacha-utilities .gacha-history-button__icon::before,
.gacha-screen .gacha-utilities .gacha-history-button__icon::after { width: 2px; }
.gacha-screen .gacha-utilities .gacha-history-button__icon::before { height: 6px; }
.gacha-screen .gacha-utilities .gacha-history-button__icon::after { height: 5px; }

/* Summoning stage: quiet gold geometry behind the player's artwork. */
.gacha-screen .gacha-summoning-scenery { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.gacha-screen .gacha-summoning-circle {
  position: absolute; top: 20%; left: 7%; width: 86%; height: auto;
  opacity: .36; animation: gacha-summoning-orbit 64s linear infinite;
}
.gacha-screen .gacha-summoning-pedestal {
  position: absolute; left: 8%; top: 64%; width: 84%; height: auto; opacity: .9;
}
.gacha-screen .gacha-hero-stage--full .gacha-hero-stage__still {
  inset: 6% 0 auto; width: 100%; height: 73%; z-index: 1;
  object-fit: contain; object-position: center bottom;
}
.gacha-summoning-spark {
  position: absolute; left: calc(10% + var(--spark-index) * 15%); top: calc(30% + var(--spark-index) * 5%);
  width: 5px; height: 5px; background: #e8ca7d; border: 1px solid #fff5cf;
  rotate: 45deg; opacity: .3; animation: gacha-summoning-drift 5s ease-in-out infinite;
  animation-delay: calc(var(--spark-index) * -.8s);
}
@keyframes gacha-summoning-orbit { to { transform: rotate(360deg); } }
@keyframes gacha-summoning-drift { 0%,100% { translate: 0 10px; opacity: .15; } 50% { translate: 0 -12px; opacity: .7; } }

/* The banner title gets its own ribbon rather than another nested panel. */
.gacha-screen .screen-shell__content .gacha-screen__dock .gacha-hero-stage__copy {
  position: relative; isolation: isolate; padding: 12px 20px; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; text-align: center;
}
.gacha-screen .gacha-screen__dock .gacha-hero-stage__copy::before {
  content: ""; position: absolute; inset: 5px 10px; z-index: -1;
  background: var(--pf-surface); border-block: 2px solid var(--pf-frame);
  clip-path: polygon(0 0,100% 0,97% 50%,100% 100%,0 100%,3% 50%);
}
.gacha-screen .gacha-screen__dock .gacha-hero-stage__copy::after {
  content: "◆"; position: absolute; bottom: -2px; left: calc(50% - 6px);
  color: var(--pf-frame); font-size: 12px; line-height: 1;
}
.gacha-screen .gacha-hero-stage__copy .gacha-hero-stage__name {
  display: block; font-size: clamp(23px, 5.8cqw, 36px); line-height: 1.2;
  color: var(--pf-primary); font-weight: 800; letter-spacing: .03em;
  overflow-wrap: anywhere; text-wrap: balance;
}
.gacha-screen .gacha-hero-stage__copy .gacha-hero-stage__logo { max-width: 100%; max-height: 72px; object-fit: contain; }

/* Only the ten-pull button receives an occasional short glint. */
.gacha-screen .gacha-pull-panel .screen-actions .screen-action[data-gacha-pull-count="10"] {
  position: relative; isolation: isolate; overflow: hidden;
}
.gacha-screen .screen-action[data-gacha-pull-count="10"]::before {
  content: "◆"; position: absolute; top: 0; right: 3px; font-size: 10px;
  color: #ffe3a0; pointer-events: none;
}
.gacha-screen .screen-action[data-gacha-pull-count="10"]::after {
  content: ""; position: absolute; inset: -30% auto -30% -50%; width: 18%;
  background: #fff0ba; opacity: 0; rotate: 24deg; pointer-events: none;
  animation: gacha-ten-glint 6s ease-in-out infinite;
}
@keyframes gacha-ten-glint {
  0%,80% { translate: 0 0; opacity: 0; }
  84% { opacity: .35; }
  94%,100% { translate: 1100% 0; opacity: 0; }
}
.gacha-hero-stage[data-banner-entering="true"] .gacha-hero-stage__still,
.gacha-hero-stage__copy[data-banner-entering="true"] { animation: gacha-banner-arrive 420ms ease-out both; }
@keyframes gacha-banner-arrive { from { opacity: 0; translate: 12px 0; } to { opacity: 1; translate: 0 0; } }
/* Leave the left banner rail clear; contain keeps the complete featured artwork. */
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-summoning-circle { width: 44%; left: 43%; top: 16%; }
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-summoning-pedestal { width: 44%; left: 43%; top: 72%; }
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-hero-stage__still {
  left: 32%; right: 2%; width: 66%; top: 14%; height: 74%;
  object-position: center top;
}
@media (prefers-reduced-motion: reduce) {
  .gacha-screen .gacha-summoning-circle, .gacha-screen .gacha-summoning-spark,
  .gacha-screen .screen-action[data-gacha-pull-count="10"]::after,
  .gacha-hero-stage[data-banner-entering="true"] .gacha-hero-stage__still,
  .gacha-hero-stage__copy[data-banner-entering="true"] { animation: none; }
  .gacha-screen .screen-action[data-gacha-pull-count="10"]::after { display: none; }
}

/* Reveal: protect artwork color; decorate the perimeter, never brighten the face. */
.gacha-presentation-overlay .gacha-presentation-single { isolation: isolate; grid-template-rows: minmax(0, 1fr) auto auto; gap: 10px; align-content: start; }
.gacha-presentation-overlay:not([data-phase="summary"]) .gacha-presentation-panel { padding: 56px 4cqw 10px; gap: 8px; grid-template-rows: minmax(0, 1fr) 44px; background: #1d3027; }
.gacha-presentation-overlay .gacha-presentation-card--featured { z-index: 2; width: 96%; background: #dce5d5; border: 2px solid var(--pf-frame); box-shadow: 0 4px 12px #101e1840; }
.gacha-presentation-overlay .gacha-presentation-card__art[data-has-art],
.gacha-presentation-overlay .gacha-presentation-camera__art[data-has-art] { filter: none; mix-blend-mode: normal; background-blend-mode: normal; }
.gacha-presentation-overlay .gacha-presentation-lightfx { z-index: 0; }
.gacha-presentation-overlay .gacha-presentation-lightfx > * { mix-blend-mode: normal; }
.gacha-presentation-overlay .gacha-presentation-lightfx__burst { inset: 8%; background: none; border: 3px solid #d1af62; border-radius: 50%; }
.gacha-presentation-overlay .gacha-presentation-lightfx__sweep { background: #d1af6226; }
.gacha-presentation-overlay .gacha-presentation-aura { filter: none; opacity: .2; }
.gacha-presentation-overlay .gacha-presentation-animation { z-index: 0; }
.gacha-presentation-overlay .gacha-presentation-circle { width: 96%; border: 0; background: url('/assets/ui-kits/pop-fantasy-v2/gacha/summoning-v1/circle.svg') center / contain no-repeat; opacity: .28; animation-duration: 32s; }
.gacha-presentation-overlay .gacha-presentation-circle--second { width: 72%; opacity: .12; animation-duration: 24s; }
.gacha-presentation-overlay .gacha-presentation-circle--third { display: none; }
.gacha-presentation-gold-spark { position: absolute; left: calc(1% + var(--spark-index) * 14%); top: calc(15% + var(--spark-index) * 9%); width: 5px; height: 5px; rotate: 45deg; background: #e8c678; border: 1px solid #fff0bb; animation: gacha-summoning-drift 3.6s ease-in-out infinite; animation-delay: calc(var(--spark-index) * -.45s); }
.gacha-presentation-overlay .gacha-presentation-nameplate { z-index: 5; width: 96%; grid-row: 2; padding: 8px 12px; border: 0; border-bottom: 2px solid var(--pf-frame); border-radius: 0; background: #1d3027; box-shadow: none; }
.gacha-presentation-overlay .gacha-presentation-nameplate__name { color: #fff4d4; font-size: clamp(22px, 5.5cqw, 36px); line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.gacha-presentation-overlay .gacha-presentation-nameplate__rarity { color: #e8c678; font-size: 16px; }
.gacha-presentation-overlay .gacha-presentation-nameplate__arrow { display: none; }
.gacha-presentation-overlay .gacha-presentation-voice { z-index: 5; width: 96%; grid-row: 3; max-height: min(25dvh, 180px); overflow-y: auto; margin: 0; padding: 10px; border: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1)) solid transparent; border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch); border-radius: 4px; background: var(--pf-surface); color: var(--pf-outline); box-shadow: none; text-align: left; font-size: clamp(16px, 4cqw, 22px); line-height: 1.55; }
.gacha-presentation-overlay .gacha-presentation-footer .gacha-presentation-skip { top: 8px; left: 12px; bottom: auto; z-index: 20; min-width: 96px; min-height: 40px; padding: 6px 12px; font-size: 14px; color: #fff4d4; background: #1d3027; border: 1px solid var(--pf-frame); border-radius: 20px; box-shadow: none; }
.gacha-presentation-overlay .gacha-presentation-footer .gacha-presentation-next { position: static; width: 100%; min-height: 44px; padding: 4px; color: #f1dba8; background: transparent; border: 0; box-shadow: none; font-size: 14px; letter-spacing: .08em; }
@media (prefers-reduced-motion: reduce) { .gacha-presentation-overlay .gacha-presentation-circle, .gacha-presentation-gold-spark { animation: none; } }
.gacha-presentation-overlay .gacha-presentation-card--featured::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1)) solid transparent; border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
}
.gacha-presentation-overlay .gacha-presentation-card--featured .gacha-presentation-card__art[data-has-art] { background-position: center top; }

/* The opening high-rarity line floats at centre before the character appears. */
.gacha-presentation-overlay[data-special-phase="special-voice"] .gacha-presentation-voice {
  position: absolute; grid-area: auto; align-self: auto; justify-self: auto;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 90%; max-height: 70%; padding: 12px; margin: 0;
  border: 0; border-image: none; border-radius: 0; background: transparent; box-shadow: none;
  color: #fff4d4; text-align: center; line-height: 1.8;
  font-size: clamp(18px, 4.8cqw, 28px);
}

/* R stays quiet; SR shines once; SSR adds stronger gold around the artwork. */
.gacha-presentation-overlay[data-rarity-tier="SR"][data-phase="reveal"] .gacha-presentation-card--featured {
  animation: gacha-sr-arrival 1000ms ease-out both;
}
@keyframes gacha-sr-arrival {
  0% { box-shadow: 0 0 0 0 #e7cb8000; }
  30% { box-shadow: 0 0 0 5px #e7cb8066, 0 0 26px 8px #e7cb8055; }
  100% { box-shadow: 0 0 0 1px #e7cb8033, 0 4px 12px #101e1840; }
}
.gacha-presentation-overlay:is([data-rarity-tier="SR"],[data-rarity-tier="SSR"]) .gacha-presentation-gold-spark {
  left: var(--reveal-spark-x); top: var(--reveal-spark-y);
}
.gacha-presentation-overlay[data-rarity-tier="SSR"] .gacha-presentation-gold-spark { width: 7px; height: 7px; animation-duration: 2.4s; }
.gacha-presentation-overlay[data-rarity-tier="SSR"] .gacha-presentation-circle { opacity: .5; animation-duration: 18s; }
.gacha-presentation-overlay[data-rarity-tier="SSR"] .gacha-presentation-circle--second { opacity: .3; animation-duration: 12s; }
.gacha-presentation-overlay[data-rarity-tier="SSR"][data-special-phase="special-final"] .gacha-presentation-card--featured::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border: 3px solid #eed086; border-radius: inherit;
  animation: gacha-ssr-gold-rim 1600ms ease-out both;
}
@keyframes gacha-ssr-gold-rim {
  0% { opacity: 0; box-shadow: inset 0 0 0 #e8c67800; }
  35% { opacity: 1; box-shadow: inset 0 0 14px #e8c67888; }
  100% { opacity: .6; box-shadow: inset 0 0 3px #e8c67833; }
}
@media (prefers-reduced-motion: reduce) {
  .gacha-presentation-overlay[data-rarity-tier="SR"][data-phase="reveal"] .gacha-presentation-card--featured,
  .gacha-presentation-overlay[data-rarity-tier="SSR"][data-special-phase="special-final"] .gacha-presentation-card--featured::before { animation: none; }
}

/* Keep the strongest accent on the ten-pull, leaving the artwork above it room. */
.gacha-screen .gacha-pull-panel.gacha-pull-panel--bare .screen-actions .screen-action[data-gacha-pull-count="1"] {
  background: var(--pf-surface); color: var(--pf-primary);
  box-shadow: inset 0 2px 0 var(--pf-highlight), 0 2px 0 var(--pf-shadow);
}
.gacha-screen .screen-action[data-gacha-pull-count="1"] .gacha-pull-count { color: var(--pf-primary); -webkit-text-stroke: 0; }
.gacha-screen .gacha-screen__dock .gacha-hero-stage__copy { padding: 5px 10px; border: 0; background: transparent; box-shadow: none; }
.gacha-screen .gacha-screen__dock .gacha-hero-stage__name { color: var(--pf-outline); text-shadow: 0 1px 2px var(--pf-surface), 0 0 5px var(--pf-surface); }
.gacha-screen .screen-action[data-gacha-pull-count="10"]::before { content: none; }

.gacha-screen .gacha-screen__dock .gacha-hero-stage__copy::before,
.gacha-screen .gacha-screen__dock .gacha-hero-stage__copy::after { content: none; }
.gacha-screen .gacha-screen__dock .gacha-hero-stage__name { font-size: clamp(18px, 4.5cqw, 28px); }

.gacha-history-panel__cards { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; margin: 10px 0 4px; }
.gacha-history-panel__cards > .attribute-card-icon { width: 100%; min-width: 0; aspect-ratio: 1; }
.gacha-history-panel__missing { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--pf-frame); border-radius: 6px; color: var(--pf-muted); background: var(--pf-surface); }
.gacha-history-panel__breakdown summary { min-height: 44px; padding: 10px 0; box-sizing: border-box; font-size: 13px; cursor: pointer; color: var(--pf-primary); }
.gacha-history-panel__breakdown .gacha-history-panel__summary { margin: 0 0 8px; font-size: 13px; line-height: 1.6; }

.gacha-history-panel__cards .card-ambient { display: none; }

/* One gloss pass after each card settles; the frame and artwork stay still. */
.gacha-card-arrival-sheen { position: absolute; inset: 3px; z-index: 4; overflow: hidden; pointer-events: none; border-radius: inherit; }
.gacha-card-arrival-sheen::before { content: ""; position: absolute; inset: -20% -60%; opacity: 0; background: linear-gradient(115deg, transparent 40%, #fff8dc44 46%, #ffffffb8 50%, #fff8dc44 54%, transparent 60%); transform: translateX(-70%); }
.gacha-presentation-overlay[data-phase="reveal"]:not([data-special="true"]) .gacha-card-arrival-sheen::before,
.gacha-presentation-overlay[data-phase="reveal"][data-special-phase="special-final"] .gacha-card-arrival-sheen::before { animation: gacha-card-arrival-gloss 950ms 200ms ease-in-out both; }
@keyframes gacha-card-arrival-gloss { 0% { transform: translateX(-70%); opacity: 0; } 18%, 72% { opacity: .85; } 100% { transform: translateX(70%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gacha-presentation-overlay .gacha-card-arrival-sheen { display: none; } }

/* Landscape keeps browsing on the left and the active draw controls on the right. */
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .screen-shell__content {
  display: grid;
  grid-template-columns: clamp(128px, 24%, 260px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  overflow: hidden;
}
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-banner-panel--rail {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  min-width: 0;
  padding: 0;
  align-content: stretch;
}
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-banner-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-banner-panel--rail .gacha-banner-list {
  flex-direction: column;
  min-height: 0;
  gap: 10px;
  padding: 4px 8px 4px 4px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: none;
  scroll-padding: 4px;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  cursor: auto;
}
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-banner-panel--rail .gacha-banner-card {
  flex: 0 0 auto;
  width: 100%;
  min-height: 54px;
  aspect-ratio: 2.8 / 1;
  transform: none;
  opacity: 1;
}
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-screen__dock {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  width: min(100%, 480px);
  min-width: 0;
  overflow-x: hidden;
  margin-left: auto;
  gap: 12px;
}
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-banner-rail { align-items: stretch; padding: 0; }
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-banner-list::-webkit-scrollbar { display: block; width: 6px; }
@media (max-height: 500px) {
  .gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-screen__dock { gap: 6px; }
  .gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-screen__dock .gacha-hero-stage__copy { padding: 2px 6px; }
  .gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-hero-stage__name { font-size: 20px; line-height: 1.2; }
  .gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-pull-panel .screen-action { min-height: 60px; padding: 4px; }
}

/* Review round 6: the pull buttons were plain boxes in every theme and read
   out of place (street themes especially). They wear the theme's own button
   art -- the same art as its tabs -- with the 10-pull lit as the main one.
   Pop Fantasy keeps its own buttons. */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .gacha-screen .gacha-pull-panel .screen-action[data-gacha-pull-count]:not(.game-screen-part--has-asset):not([data-ui-custom-frame]) {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: var(--theme-tab-art) center / 100% 100% no-repeat !important;
  color: var(--theme-tab-ink, var(--pf-outline)) !important;
}
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .gacha-screen .gacha-pull-panel .screen-action[data-gacha-pull-count]:not(.game-screen-part--has-asset):not([data-ui-custom-frame])::before { display: none !important; }
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .gacha-screen .gacha-pull-panel .screen-action[data-gacha-pull-count="10"]:not(.game-screen-part--has-asset):not([data-ui-custom-frame]) {
  filter: drop-shadow(0 0 6px var(--pf-accent)) brightness(1.06) saturate(1.1);
}
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .gacha-screen .gacha-pull-panel .screen-action[data-gacha-pull-count] .gacha-jewel-amount { color: var(--theme-tab-ink, var(--pf-outline)); }
/* Frames drawn as an outline only (the street themes) must not show the
   summoning stage through the button: the theme surface fills it. Other
   themes' art has rounded corners, where a fill read as a stray square. */
[data-ui-theme-family="urban"] .gacha-screen .gacha-pull-panel .screen-action[data-gacha-pull-count]:not(.game-screen-part--has-asset):not([data-ui-custom-frame]) { background-color: var(--pf-surface) !important; }
/* Round 7: drawn button art keeps its corners -- nine-slice, so a wide
   button stretches only the middle of the art instead of the whole picture. */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]):not([data-ui-theme-family="urban"]):not([data-ui-theme-kit="celestial"]) .gacha-screen .gacha-pull-panel .screen-action[data-gacha-pull-count]:not(.game-screen-part--has-asset):not([data-ui-custom-frame]) {
  background: none !important;
  border: 0 solid transparent !important;
  border-image: var(--theme-tab-art) 46% 24% fill / 30% 10% / 0 stretch !important;
}
/* Celestial's glass button art is near white, so its pulls are deep blue
   glass instead, with a pale crystal edge and white words (round 6). */
[data-ui-theme-kit="celestial"] .gacha-screen .gacha-pull-panel .screen-action[data-gacha-pull-count]:not(.game-screen-part--has-asset):not([data-ui-custom-frame]) {
  background: linear-gradient(180deg, #34589e, #1d3670) !important;
  border: 2px solid #cfe0ff !important; border-radius: 10px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 2px 6px rgba(20, 38, 92, .35) !important;
}

/* Round 8: the themes from tactical to idol stand in their own drawn gacha
   room (--theme-gacha-background, ui-theme-kits.mjs) instead of the shared
   Pop Fantasy backdrop. */
:is([data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) .gacha-screen > .screen-shell__body { background: var(--theme-gacha-background) center / cover no-repeat !important; }

/* Round 12: the pull buttons draw their art whole, at its own ratio (the nine-slice stretched
   centre ornaments: marine's anchor, cafe's cup). The button takes the art's ratio and its
   words sit inside the art's measured inner panel (--theme-button-*, ui-button-insets.mjs);
   % padding is a share of the width, so the top/bottom insets are divided by the ratio. The
   pull buttons now have art of their own with a roomy panel (gacha-buttons-v2, ui-gacha-buttons.mjs),
   so the words sit fully inside it. */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]):not([data-ui-theme-family="urban"]):not([data-ui-theme-kit="celestial"]) .gacha-screen .gacha-pull-panel .screen-action[data-gacha-pull-count]:not(.game-screen-part--has-asset):not([data-ui-custom-frame]) {
  border: 0 !important; border-image: none !important;
  background: var(--theme-gacha-button-art, var(--theme-tab-art)) center / 100% 100% no-repeat !important;
  aspect-ratio: var(--theme-gacha-ratio, var(--theme-button-ratio, 2.5)); height: auto !important; min-height: 0 !important;
  padding: calc(1 * var(--theme-gacha-inset-t, var(--theme-button-inset-t, .2)) / var(--theme-gacha-ratio, var(--theme-button-ratio, 2.5)) * 100%) calc(var(--theme-gacha-inset-r, var(--theme-button-inset-r, .1)) * 100%) calc(1 * var(--theme-gacha-inset-b, var(--theme-button-inset-b, .2)) / var(--theme-gacha-ratio, var(--theme-button-ratio, 2.5)) * 100%) calc(var(--theme-gacha-inset-l, var(--theme-button-inset-l, .1)) * 100%) !important;
  justify-content: center !important; gap: 2px !important;
}
/* Round 12: the word and the jewel take their size from the panel's inner height (inner share
   of the art's height, over its ratio, times the button width), so they fit every theme's
   panel instead of being nudged theme by theme. */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]):not([data-ui-theme-family="urban"]):not([data-ui-theme-kit="celestial"]) .gacha-screen .gacha-pull-panel .screen-actions:has(> .screen-action[data-gacha-pull-count]) { container-type: inline-size; }
/* The row of two pull buttons is the size container; each button is about 48.5% of it. */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]):not([data-ui-theme-family="urban"]):not([data-ui-theme-kit="celestial"]) .gacha-screen .gacha-pull-panel .screen-action[data-gacha-pull-count]:not(.game-screen-part--has-asset):not([data-ui-custom-frame]) > *, [data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]):not([data-ui-theme-family="urban"]):not([data-ui-theme-kit="celestial"]) .gacha-screen .gacha-pull-panel .screen-action[data-gacha-pull-count]:not(.game-screen-part--has-asset):not([data-ui-custom-frame]) .gacha-jewel-amount__icon {
  --pull-inner: calc((1 - var(--theme-gacha-inset-t, var(--theme-button-inset-t, .2)) - var(--theme-gacha-inset-b, var(--theme-button-inset-b, .2))) / var(--theme-gacha-ratio, var(--theme-button-ratio, 2.5)) * 48.5cqw);
}
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]):not([data-ui-theme-family="urban"]):not([data-ui-theme-kit="celestial"]) .gacha-screen .gacha-pull-panel .screen-action[data-gacha-pull-count]:not(.game-screen-part--has-asset):not([data-ui-custom-frame]) > .gacha-pull-count { height: calc(var(--pull-inner) * .52) !important; width: 100% !important; max-width: 100%; }
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]):not([data-ui-theme-family="urban"]):not([data-ui-theme-kit="celestial"]) .gacha-screen .gacha-pull-panel .screen-action[data-gacha-pull-count]:not(.game-screen-part--has-asset):not([data-ui-custom-frame]) .gacha-jewel-amount { font-size: calc(var(--pull-inner) * .27) !important; line-height: 1; }
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]):not([data-ui-theme-family="urban"]):not([data-ui-theme-kit="celestial"]) .gacha-screen .gacha-pull-panel .screen-action[data-gacha-pull-count]:not(.game-screen-part--has-asset):not([data-ui-custom-frame]) .gacha-jewel-amount__icon { width: calc(var(--pull-inner) * .3) !important; height: calc(var(--pull-inner) * .3) !important; flex-basis: auto !important; }

/* The lead-in of a pull: the colour that hints at what is inside, the seal the
   player breaks, and the break itself (with its flash and shake). Built by
   screens/gacha/gacha-presentation-thrill.mjs; the beats come from
   state/gacha-presentation-rules.mjs. The card landing is presentation-joy.css.

   Loaded after every theme's gacha composition, so the colour of the light
   means the same thing whichever kit a maker chose.

   Two switches turn the loud parts off. data-intensity="calm" is the maker's
   choice (システム設定「ガチャ演出の派手さ」); prefers-reduced-motion is the
   player's. Both keep the colour and the seal -- those say what is happening --
   and drop the flash and the shake. */

/* ---- The colour of the light ------------------------------------------- */

.gacha-presentation-overlay[data-omen="silver"] {
  --omen: #e4ebf2;
  --omen-deep: #8fa0b3;
  --omen-glow: rgba(214, 228, 242, 0.62);
}

.gacha-presentation-overlay[data-omen="gold"] {
  --omen: #ffd568;
  --omen-deep: #b7791f;
  --omen-glow: rgba(255, 196, 70, 0.78);
}

.gacha-presentation-overlay[data-omen="rainbow"] {
  --omen: #fff6fb;
  --omen-deep: #b05cff;
  --omen-glow: rgba(255, 140, 220, 0.8);
  --omen-rainbow: conic-gradient(from 0deg, #ff5f7e, #ffb347, #fff45c, #6dff8f, #5ce1ff, #7a7bff, #ff6ce8, #ff5f7e);
}

/* The glow behind everything on the stage, in the omen's colour. */
/* A square centred on the circle, so turning it never moves the light. */
.gacha-omen-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130cqw;
  aspect-ratio: 1;
  margin: -65cqw 0 0 -65cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--omen-glow) 0%, transparent 58%);
  animation: gachaOmenBreath 1.6s ease-in-out infinite;
}

.gacha-presentation-overlay[data-omen="rainbow"] .gacha-omen-glow {
  background: var(--omen-rainbow);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 58%);
  mask-image: radial-gradient(circle, #000 18%, transparent 58%);
  opacity: 0.55;
  filter: blur(3cqw);
  animation: gachaRainbowSpin 2.4s linear infinite;
}

.gacha-presentation-overlay[data-omen] .gacha-presentation-circle {
  filter: drop-shadow(0 0 1.2cqw var(--omen-glow)) drop-shadow(0 0 3cqw var(--omen-glow));
}

.gacha-presentation-overlay[data-omen="gold"] .gacha-presentation-circle { opacity: 0.5; }
.gacha-presentation-overlay[data-omen="rainbow"] .gacha-presentation-circle {
  opacity: 0.7;
  animation-duration: 6s;
}

.gacha-presentation-overlay[data-omen] .gacha-presentation-gold-spark {
  background: var(--omen);
  box-shadow: 0 0 1.2cqw var(--omen-glow);
}

/* ---- The seal ------------------------------------------------------------ */

/* The seal sits on the circle's centre, whatever the lead-in's own layout. */
.gacha-presentation-overlay[data-phase="seal"] .gacha-presentation-leadin {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
}

.gacha-seal {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6cqw;
  cursor: pointer;
}

.gacha-seal__orb {
  position: relative;
  width: 40cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fff 0%, rgba(255, 255, 255, 0.6) 12%, transparent 30%),
    radial-gradient(circle at 50% 55%, var(--omen) 0%, var(--omen-deep) 78%, #1a1a2a 100%);
  box-shadow: inset 0 -2cqw 4cqw rgba(0, 0, 0, 0.35);
  animation: gachaSealPulse 1.1s ease-in-out infinite;
}

/* The glow sits on the wrapper: a clipped shape cannot carry its own. */
.gacha-seal {
  filter: drop-shadow(0 0 2.4cqw var(--omen-glow)) drop-shadow(0 0 6cqw var(--omen-glow));
}

/* A ring that keeps leaving the orb: the seal is straining to open. */
.gacha-seal__glow {
  position: absolute;
  top: 20cqw;
  left: 50%;
  width: 40cqw;
  aspect-ratio: 1;
  border: 0.8cqw solid var(--omen);
  border-radius: 50%;
  translate: -50% -50%;
  animation: gachaSealRing 1.1s ease-out infinite;
}

.gacha-seal__prompt {
  color: #fff;
  font-size: max(20px, 5.6cqw);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: 0 0 2cqw var(--omen-glow), 0 2px 0 rgba(0, 0, 0, 0.45);
  animation: gachaSealPrompt 0.9s ease-in-out infinite;
}

/* Each theme opens its own object (gacha-theme-flavors.mjs). The colour
   stays the omen's; only the silhouette changes. */
.gacha-seal[data-shape="heart"] .gacha-seal__orb {
  border-radius: 0;
  clip-path: polygon(50% 92%, 12% 54%, 3% 36%, 6% 18%, 18% 7%, 34% 6%, 50% 20%, 66% 6%, 82% 7%, 94% 18%, 97% 36%, 88% 54%);
}
.gacha-seal[data-shape="star"] .gacha-seal__orb {
  border-radius: 0;
  clip-path: polygon(50.0% 2.0%, 62.3% 35.0%, 97.6% 36.5%, 70.0% 58.5%, 79.4% 92.5%, 50.0% 73.0%, 20.6% 92.5%, 30.0% 58.5%, 2.4% 36.5%, 37.7% 35.0%);
}
.gacha-seal[data-shape="burst"] .gacha-seal__orb {
  border-radius: 0;
  clip-path: polygon(50.0% 0.0%, 58.3% 19.1%, 75.0% 6.7%, 72.6% 27.4%, 93.3% 25.0%, 80.9% 41.7%, 100.0% 50.0%, 80.9% 58.3%, 93.3% 75.0%, 72.6% 72.6%, 75.0% 93.3%, 58.3% 80.9%, 50.0% 100.0%, 41.7% 80.9%, 25.0% 93.3%, 27.4% 72.6%, 6.7% 75.0%, 19.1% 58.3%, 0.0% 50.0%, 19.1% 41.7%, 6.7% 25.0%, 27.4% 27.4%, 25.0% 6.7%, 41.7% 19.1%);
}
.gacha-seal[data-shape="gear"] .gacha-seal__orb {
  border-radius: 0;
  clip-path: polygon(50.0% 0.0%, 59.8% 1.0%, 66.1% 11.2%, 73.3% 15.1%, 85.4% 14.6%, 91.6% 22.2%, 88.8% 33.9%, 91.2% 41.8%, 100.0% 50.0%, 99.0% 59.8%, 88.8% 66.1%, 84.9% 73.3%, 85.4% 85.4%, 77.8% 91.6%, 66.1% 88.8%, 58.2% 91.2%, 50.0% 100.0%, 40.2% 99.0%, 33.9% 88.8%, 26.7% 84.9%, 14.6% 85.4%, 8.4% 77.8%, 11.2% 66.1%, 8.8% 58.2%, 0.0% 50.0%, 1.0% 40.2%, 11.2% 33.9%, 15.1% 26.7%, 14.6% 14.6%, 22.2% 8.4%, 33.9% 11.2%, 41.8% 8.8%);
}
.gacha-seal[data-shape="hex"] .gacha-seal__orb {
  border-radius: 0;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.gacha-seal[data-shape="sigil"] .gacha-seal__orb {
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.gacha-seal[data-shape="lantern"] .gacha-seal__orb {
  width: 44cqw;
  aspect-ratio: 1.15;
  border-radius: 50% / 46%;
}
.gacha-seal[data-shape="pod"] .gacha-seal__orb {
  width: 30cqw;
  aspect-ratio: 0.62;
  border-radius: 15cqw;
  background:
    repeating-linear-gradient(0deg, transparent 0 18%, rgba(0, 0, 0, 0.18) 18% 20%),
    linear-gradient(90deg, var(--omen-deep), var(--omen) 40%, #fff 50%, var(--omen) 60%, var(--omen-deep));
}
.gacha-seal[data-shape="ofuda"] .gacha-seal__orb,
.gacha-seal[data-shape="book"] .gacha-seal__orb,
.gacha-seal[data-shape="chest"] .gacha-seal__orb {
  display: grid;
  place-items: center;
  border-radius: 1cqw;
}
.gacha-seal[data-shape="ofuda"] .gacha-seal__orb {
  width: 22cqw;
  aspect-ratio: 0.4;
  background: linear-gradient(180deg, #fffaf0, #f3e6c8);
  border: 0.8cqw solid var(--omen);
}
.gacha-seal[data-shape="ofuda"] .gacha-seal__orb::after {
  content: "封";
  color: #c8102e;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: max(24px, 13cqw);
  font-weight: 900;
}
.gacha-seal[data-shape="book"] .gacha-seal__orb {
  width: 44cqw;
  aspect-ratio: 1.3;
  background:
    linear-gradient(90deg, transparent 48%, rgba(0, 0, 0, 0.3) 49% 51%, transparent 52%),
    linear-gradient(135deg, var(--omen), var(--omen-deep));
}
.gacha-seal[data-shape="chest"] .gacha-seal__orb {
  width: 40cqw;
  aspect-ratio: 1.25;
  border-radius: 0;
  background:
    linear-gradient(180deg, transparent 38%, #3a2412 38% 44%, transparent 44%),
    linear-gradient(90deg, transparent 44%, #3a2412 44% 56%, transparent 56%),
    linear-gradient(180deg, var(--omen), var(--omen-deep));
  box-shadow: inset 0 0 0 1.4cqw #3a2412;
  image-rendering: pixelated;
}

/* ---- The seal breaking --------------------------------------------------- */

.gacha-shatter {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.gacha-shatter__flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 60cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle, #fff 0%, var(--omen) 35%, transparent 70%);
  animation: gachaShatterFlash 520ms ease-out both;
}

.gacha-shatter__shard {
  position: absolute;
  top: 0;
  left: 0;
  width: 7cqw;
  height: 10cqw;
  clip-path: polygon(50% 0, 100% 70%, 30% 100%, 0 40%);
  background: linear-gradient(160deg, #fff, var(--omen) 45%, var(--omen-deep));
  animation: gachaShardFly 620ms cubic-bezier(.12, .8, .3, 1) both;
}

.gacha-presentation-overlay[data-omen="rainbow"] .gacha-shatter__shard {
  background: var(--omen-rainbow);
}

/* The promotion: the same break, into rainbow, with the headline riding it. */
.gacha-presentation-overlay[data-phase="upgrade"] .gacha-presentation-leadin__headline {
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, #ff5f7e, #ffb347, #fff45c, #6dff8f, #5ce1ff, #b77bff, #ff5f7e);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: max(28px, 8cqw);
  filter: drop-shadow(0 0 1.5cqw rgba(255, 255, 255, 0.8));
  animation:
    gachaLeadInAnnounce 560ms cubic-bezier(0.2, 0.7, 0.14, 1) both,
    gachaRainbowText 1.2s linear infinite;
}

/* ---- Flash and shake (loud; off when calm) ------------------------------- */

.gacha-presentation-overlay[data-intensity="flashy"]:is([data-phase="break"], [data-phase="upgrade"], [data-special-phase="special-final"])::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: #fff;
  animation: gachaScreenFlash 420ms ease-out both;
}

.gacha-presentation-overlay[data-intensity="flashy"][data-phase="break"] .gacha-presentation-shell {
  animation: gachaShake 260ms linear both;
}

.gacha-presentation-overlay[data-intensity="flashy"]:is([data-phase="upgrade"], [data-special-phase="special-final"]) .gacha-presentation-shell {
  animation: gachaShakeHard 520ms linear both;
}

/* Most art themes draw the overlay light, where white type disappears. They
   already colour lead-in type with their own primary (ui-theme-motion.css);
   the seal's prompt follows it. */
.gacha-presentation-overlay:not([data-gacha-theme="fantasy"]) .gacha-seal__prompt {
  color: var(--pf-primary);
  text-shadow: 0 0 1.4cqw var(--pf-surface, #fff), 0 0 3cqw var(--omen-glow);
}

/* ---- Calm and reduced motion --------------------------------------------- */

.gacha-presentation-overlay[data-intensity="calm"] .gacha-omen-glow {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .gacha-presentation-overlay::after,
  .gacha-presentation-overlay .gacha-presentation-shell,
  .gacha-omen-glow,
  .gacha-seal__orb,
  .gacha-seal__glow,
  .gacha-seal__prompt,
  .gacha-shatter__shard {
    animation: none;
  }
  .gacha-presentation-overlay::after,
  .gacha-seal__glow,
  .gacha-shatter__shard {
    display: none;
  }
}

/* ---- Keyframes ------------------------------------------------------------ */

@keyframes gachaOmenBreath {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50% { opacity: 0.95; transform: scale(1.04); }
}

@keyframes gachaRainbowSpin {
  to { transform: rotate(1turn); }
}

@keyframes gachaRainbowText {
  to { background-position: 200% 0; }
}

@keyframes gachaSealPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(1.05) rotate(-2deg); }
  55% { transform: scale(1.03) rotate(2deg); }
  70% { transform: scale(1.06) rotate(-1deg); }
}

@keyframes gachaSealRing {
  0% { opacity: 0.9; scale: 1; }
  100% { opacity: 0; scale: 1.7; }
}

@keyframes gachaSealPrompt {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-1.2cqw); opacity: 0.75; }
}

@keyframes gachaShatterFlash {
  0% { opacity: 0; scale: 0.3; }
  25% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 2.2; }
}

@keyframes gachaShardFly {
  0% { opacity: 1; transform: rotate(var(--shard-angle)) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--shard-angle)) translateY(calc(var(--shard-distance) * -1)) rotate(260deg) scale(0.4); }
}

@keyframes gachaScreenFlash {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}

@keyframes gachaShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1.2cqw, 0.6cqw); }
  50% { transform: translate(1cqw, -0.8cqw); }
  75% { transform: translate(-0.6cqw, -0.4cqw); }
}

@keyframes gachaShakeHard {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  12% { transform: translate(-2.4cqw, 1.2cqw) rotate(-0.8deg); }
  25% { transform: translate(2.2cqw, -1.6cqw) rotate(0.8deg); }
  38% { transform: translate(-1.8cqw, -1cqw) rotate(-0.5deg); }
  52% { transform: translate(1.4cqw, 1.2cqw) rotate(0.4deg); }
  66% { transform: translate(-0.8cqw, 0.4cqw); }
  82% { transform: translate(0.4cqw, -0.4cqw); }
}

/* The moment a card lands: rays behind it, confetti over it, the stamp in the
   theme's words, NEW the first time. Built by
   screens/gacha/gacha-presentation-thrill.mjs; loaded after
   presentation-omen-seal.css, whose colour variables it paints with.

   The calm setting and reduced motion keep the rays still and the stamp, and
   drop the confetti (which the calm setting does not even build). */

/* ---- The card lands ------------------------------------------------------ */

/* No z-index of its own: the rays go under the card (z 2) and the confetti
   and stamp over it, which one stacking context could not do. */
.gacha-joy {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Rays turning behind the card, in the card's own colour. */
.gacha-joy__rays {
  position: absolute;
  top: 34%;
  left: 50%;
  width: 170cqw;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, var(--omen-glow) 0deg 9deg, transparent 9deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 62%);
  mask-image: radial-gradient(circle, #000 12%, transparent 62%);
  z-index: 1;
  animation: gachaRaysIn 500ms ease-out both, gachaRaysTurn 14s linear infinite;
}

.gacha-joy[data-tier="SSR"] .gacha-joy__rays {
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.75) 0deg 6deg, transparent 6deg 15deg), var(--omen-rainbow);
  opacity: 0.7;
}

.gacha-joy__confetti {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: hidden;
}

.gacha-joy__piece {
  position: absolute;
  top: -6%;
  left: var(--piece-x);
  width: 1.8cqw;
  height: 3cqw;
  border-radius: 0.3cqw;
  background: hsl(var(--piece-hue) 92% 64%);
  animation: gachaConfettiFall 2.2s cubic-bezier(.25, .6, .4, 1) var(--piece-delay) both;
}

.gacha-joy[data-tier="R"] .gacha-joy__piece {
  background: hsl(var(--piece-hue) 30% 88%);
}

/* What rains down is the theme's (gacha-theme-flavors.mjs). */
.gacha-joy[data-confetti="sparkle"] .gacha-joy__piece { width: 2.4cqw; height: 2.4cqw; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.gacha-joy[data-confetti="dot"] .gacha-joy__piece { width: 2cqw; height: 2cqw; border-radius: 50%; }
.gacha-joy[data-confetti="bar"] .gacha-joy__piece { width: 0.8cqw; height: 4.4cqw; border-radius: 0; }
.gacha-joy[data-confetti="square"] .gacha-joy__piece { width: 2.2cqw; height: 2.2cqw; border-radius: 0; }
.gacha-joy[data-confetti="petal"] .gacha-joy__piece { width: 2.8cqw; height: 2cqw; border-radius: 100% 0; background: hsl(calc(330 + var(--piece-hue) / 24) 80% 82%); }
.gacha-presentation-overlay[data-gacha-theme="gothic"] .gacha-joy[data-confetti="petal"] .gacha-joy__piece { background: hsl(350 70% 36%); }
.gacha-joy[data-confetti="heart"] .gacha-joy__piece { width: 3cqw; height: 3cqw; border-radius: 0; background: hsl(calc(320 + var(--piece-hue) / 12) 90% 72%); clip-path: polygon(50% 92%, 12% 54%, 3% 36%, 6% 18%, 18% 7%, 34% 6%, 50% 20%, 66% 6%, 82% 7%, 94% 18%, 97% 36%, 88% 54%); }
.gacha-joy[data-confetti="star"] .gacha-joy__piece { width: 3cqw; height: 3cqw; border-radius: 0; background: hsl(calc(40 + var(--piece-hue) / 18) 95% 66%); clip-path: polygon(50.0% 2.0%, 62.3% 35.0%, 97.6% 36.5%, 70.0% 58.5%, 79.4% 92.5%, 50.0% 73.0%, 20.6% 92.5%, 30.0% 58.5%, 2.4% 36.5%, 37.7% 35.0%); }
.gacha-joy[data-confetti="coin"] .gacha-joy__piece { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c2, #e2a92b 60%, #8a5a10); }

/* The stamp: this one is yours now. */
.gacha-joy__stamp {
  position: absolute;
  top: 4%;
  right: 5%;
  z-index: 8;
  padding: 0.6cqw 2.6cqw;
  border: 0.8cqw solid currentColor;
  border-radius: 2cqw;
  color: var(--omen-deep);
  background: rgba(255, 255, 255, 0.92);
  font-size: max(22px, 7cqw);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.04em;
  rotate: -10deg;
  box-shadow: 0 0 3cqw var(--omen-glow);
  animation: gachaStampIn 460ms cubic-bezier(.2, 1.6, .35, 1) 180ms both;
}

.gacha-joy[data-tier="SSR"] .gacha-joy__stamp {
  color: #d63b8f;
}

/* 和・中華の判子。朱の角印で押す。 */
.gacha-joy__stamp[data-style="hanko"] {
  padding: 1cqw 2cqw;
  border-radius: 0.6cqw;
  color: #c8102e;
  background: rgba(255, 250, 240, 0.9);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-style: normal;
  letter-spacing: 0.12em;
  rotate: -6deg;
}

.gacha-joy__stamp[data-style="pixel"] {
  border-radius: 0;
  font-family: "DotGothic16", ui-monospace, monospace;
  font-style: normal;
  rotate: 0deg;
}

.gacha-joy__new {
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 8;
  padding: 0.8cqw 2.6cqw;
  border-radius: 99px;
  color: #fff;
  background: linear-gradient(135deg, #ff4f8b, #ff9a3c);
  font-size: max(16px, 4.6cqw);
  font-weight: 900;
  letter-spacing: 0.12em;
  box-shadow: 0 0 2.4cqw rgba(255, 90, 140, 0.8);
  animation: gachaStampIn 420ms cubic-bezier(.2, 1.6, .35, 1) 380ms both, gachaNewBob 1.4s ease-in-out 900ms infinite;
}

/* The card itself answers the landing: one beat of swell and glow. */
.gacha-presentation-overlay[data-phase="reveal"]:not([data-special="true"]) .gacha-presentation-card--featured,
.gacha-presentation-overlay[data-special-phase="special-final"] .gacha-presentation-card--featured {
  box-shadow: 0 0 2cqw var(--omen-glow), 0 0 7cqw var(--omen-glow);
}

.gacha-presentation-overlay[data-phase="reveal"]:not([data-special="true"]) .gacha-presentation-card--featured {
  animation: gachaCardLand 480ms cubic-bezier(.2, 1.5, .35, 1) both;
}

/* The name is called out, not just printed. */
.gacha-presentation-overlay[data-phase="reveal"]:not([data-special="true"]) .gacha-presentation-nameplate,
.gacha-presentation-overlay[data-special-phase="special-final"] .gacha-presentation-nameplate {
  animation: gachaNameCall 560ms cubic-bezier(.2, 1.4, .35, 1) 120ms both;
}

.gacha-presentation-overlay:is([data-phase="reveal"], [data-phase="departure"]) .gacha-presentation-nameplate__name {
  text-shadow: 0 0 1.6cqw var(--omen-glow);
}

/* ---- Calm and reduced motion --------------------------------------------- */

.gacha-presentation-overlay[data-intensity="calm"] .gacha-joy__rays {
  animation: gachaRaysIn 500ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .gacha-joy__rays,
  .gacha-joy__stamp,
  .gacha-joy__new,
  .gacha-presentation-overlay .gacha-presentation-card--featured,
  .gacha-presentation-overlay .gacha-presentation-nameplate {
    animation: none;
  }
  .gacha-joy__confetti {
    display: none;
  }
}

/* ---- Keyframes ------------------------------------------------------------ */

@keyframes gachaRaysIn {
  0% { opacity: 0; scale: 0.4; }
  100% { opacity: 1; scale: 1; }
}

@keyframes gachaRaysTurn {
  to { rotate: 1turn; }
}

@keyframes gachaConfettiFall {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--piece-drift), 100dvh, 0) rotate(900deg); }
}

@keyframes gachaStampIn {
  0% { opacity: 0; transform: scale(2.6); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes gachaNewBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.8cqw); }
}

@keyframes gachaCardLand {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes gachaNameCall {
  0% { opacity: 0; transform: translateY(3cqw) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* The share button on a pull's summary and on a high-rarity landing, and the
   line that says what happened. Built by screens/gacha/gacha-presentation-view.mjs
   (createShareControl). */

/* Keep sharing distinct from the tap that advances the reveal. */
.gacha-presentation-overlay .gacha-presentation-footer .gacha-presentation-share {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 20;
  display: grid;
  justify-items: end;
  gap: 6px;
  max-width: 72%;
}

.gacha-presentation-overlay .gacha-presentation-footer .gacha-presentation-share > .gacha-presentation-share__button {
  display: grid;
  place-items: center;
  width: clamp(44px, 7.0886cqw, 56px);
  height: clamp(44px, 7.0886cqw, 56px);
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--pf-frame, #c5a15a);
  border-radius: 50%;
  background: var(--theme-tool-frame, none) center / 100% 100% no-repeat var(--pf-surface, #fff9ed);
  box-shadow: none;
  cursor: pointer;
}
.gacha-presentation-share__icon { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.gacha-presentation-share__button:focus-visible { outline: 2px solid var(--pf-primary, #426d4f); outline-offset: 3px; }

.gacha-presentation-overlay .gacha-presentation-share__button:disabled {
  opacity: 0.7;
  animation: none;
}

/* In the summary the button sits beside the close button instead: the
   summary panel is short, and a floating button would cover the haul. */
.gacha-presentation-overlay[data-phase="summary"] .gacha-presentation-footer .gacha-presentation-share {
  position: static;
  max-width: none;
}

/* What happened is said at the foot of the screen, over everything, so it
   never pushes the result around or covers the stamp. */
.gacha-presentation-overlay .gacha-presentation-share__status {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 40;
  width: max-content;
  max-width: min(92vw, 520px);
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  color: #fff;
  background: rgba(10, 18, 30, 0.82);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

.gacha-presentation-overlay .gacha-presentation-share__status:empty {
  display: none;
}

/* Battle remains a stage for user art. Controls share the kit primitives. */
:is(.battle-screen,.sortie-screen,.battle-result-screen) > .screen-shell__body {
  --screen-shell-padding: calc(var(--screen-frame-inline) * .035);
  background: var(--pf-surface) url('/assets/ui-kits/pop-fantasy-v2/system-v1/arena.webp') center / cover no-repeat;
}
.sortie-screen > .screen-shell__body { --screen-shell-bottom-padding: calc(var(--screen-frame-inline) * .225); }
.sortie-screen .screen-shell__content { gap: 8px; padding: 1cqw; }
.sortie-screen .screen-shell__body[data-ui-orientation="portrait"] .screen-shell__content {
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}
.sortie-details {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 2px 2px 12px;
  overscroll-behavior-y: contain;
}
.sortie-details > * { flex: 0 0 auto; }
.sortie-screen .sortie-header { padding: 0; }
.sortie-screen .screen-shell__eyebrow { color: var(--pf-primary); font-size: 11px; letter-spacing: .16em; }
.sortie-screen .sortie-party { padding: 3cqw 2cqw; }
.sortie-screen .sortie-party__head { margin-bottom: 6px; }
.sortie-screen .sortie-opponent { padding: 10px; }
.sortie-screen .screen-panel__title { font-size: clamp(17px, 3.6cqw, 25px); color: var(--pf-primary); }
.sortie-screen .sortie-party__power { color: var(--pf-outline); font-size: 13px; }
.sortie-screen .sortie-enemy { border: 0; background: transparent; padding: 0; box-shadow: none; }
.sortie-screen .sortie-enemy { display: flex; align-items: center; gap: 12px; }
.sortie-enemy__icon { width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain; }
.sortie-screen .sortie-enemy__name { font-size: clamp(17px, 3.5cqw, 24px); color: var(--pf-outline); }
.sortie-screen :is(.sortie-enemy__stats,.sortie-enemy__reward) { font-size: 13px; line-height: 1.8; color: var(--pf-muted); }
.sortie-screen .sortie-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; padding: 2px 0 8px; }
.sortie-screen .sortie-depart { min-height: 52px; }
.sortie-screen .sortie-depart { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; }
.sortie-depart__cost { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.sortie-depart__cost img { width: 20px; height: 24px; object-fit: contain; }
.sortie-stamina-error { grid-column: 1 / -1; margin: 0; }
.sortie-presets { display: flex; gap: 8px; }
.sortie-preset { min-width: 44px; min-height: 44px; border: 1px solid var(--pf-frame); border-radius: 8px; background: var(--pf-surface); color: var(--pf-outline); font-size: 18px; cursor: pointer; }
.sortie-preset[aria-pressed="true"] { background: var(--pf-primary); color: var(--pf-surface); }

.battle-screen > .screen-shell__body { --screen-shell-bottom-padding: calc(var(--screen-frame-inline) * .035); }
.battle-screen .screen-shell__content { grid-template-rows: minmax(0,1fr) auto; gap: 2cqw; padding: 0; }
.battle-screen .battle-stage { grid-template-rows: minmax(0,1fr); gap: 0; }
@container (max-width: 280px) {
  .battle-screen .screen-shell__content {
    grid-template-rows: minmax(240px, 1fr) auto;
    overflow-y: auto;
  }
}
.battle-screen .battle-arena { min-height: 0; overflow: visible; grid-template-rows: auto minmax(0,1fr); gap: 8px; }
.battle-screen .battle-arena__grid { display: none; }
.battle-screen .battle-enemy-stage { grid-row: 2; grid-column: 1; grid-template-rows: minmax(0,1fr); min-height: 0; height: 100%; padding: 0; box-sizing: border-box; }
.battle-screen .battle-enemy-avatar {
  width: 24cqw; height: 28cqw; min-height: 0; max-height: 100%; aspect-ratio: auto; border-radius: 0;
  background: url('/assets/ui-kits/pop-fantasy-v2/home/simple-v3-icons/battle.webp') center / contain no-repeat;
  filter: none;
}
.battle-screen .battle-enemy-avatar--image { width: 80%; height: 100%; background: none; }
.battle-screen .battle-enemy-avatar img { width: 100%; height: 100%; object-fit: contain; }
.battle-screen .battle-enemy-shadow { width: 44%; bottom: 4%; height: 3%; filter: none; background: rgba(73,57,44,.16); }
.battle-screen .battle-enemy-info {
  position: relative; grid-row: 1; grid-column: 1;
  top: auto; bottom: auto; left: auto; right: auto;
  padding: 3cqw; border: 1px solid var(--pf-frame); border-radius: var(--pf-radius);
  background: var(--pf-surface); color: var(--pf-outline); box-shadow: 0 2px 0 var(--pf-shadow);
}
.battle-screen .battle-enemy-info :is(.battle-unit__name,.battle-unit__label,.battle-unit__meta,.battle-enemy-stats) {
  color: var(--pf-outline); text-shadow: none;
}
.battle-screen .battle-unit__name { font-size: clamp(16px, 3.2cqw, 23px); }
.battle-screen .battle-mode-chip { font-size: 10px; color: var(--pf-primary); background: var(--pf-primary-soft); border: 0; padding: 5px; }
.battle-screen .battle-hp { height: 7px; border: 0; background: var(--pf-shadow); border-radius: 3px; }
.battle-screen .battle-hp > span:first-child { background: var(--pf-accent); }
.battle-screen .battle-hp--member > span:first-child { background: var(--pf-primary); }
.battle-screen .battle-footer {
  padding: 3cqw 2cqw; border: 1px solid var(--pf-frame); border-radius: var(--pf-radius);
  background: var(--pf-surface); gap: 2cqw;
}
.battle-screen .battle-party-strip { gap: 1.3cqw; }
.battle-screen .battle-party-slot {
  min-height: 0; padding: 0; background: var(--pf-surface-raised);
  border: 0; border-radius: 6px; box-shadow: none; overflow: visible;
}
.battle-screen .battle-party-card__icon .attribute-card-icon { aspect-ratio: .8; }
.battle-screen .battle-party-card__body { padding: 6px 1px; gap: 5px; color: var(--pf-outline); }
.battle-screen .battle-party-card__hp { color: var(--pf-outline); font-size: 11px; margin: 0; white-space: normal; }
.battle-screen .battle-party-card__skill { color: var(--pf-muted); font-size: 10px; line-height: 1.2; }
.battle-screen .battle-actions { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1.3cqw; }
.battle-screen .battle-actions .screen-action { padding: 7px 2px; font-size: 12px; min-width: 0; }
.battle-screen .battle-actions[data-battle-mode='manual'] .screen-action:first-child { grid-column: 1 / -1; }
.battle-screen .battle-actions--special .screen-action { min-height: 44px; background: var(--pf-accent); color: var(--pf-highlight); }
.battle-screen .battle-cooldown { width: 22px; height: 22px; color: var(--pf-primary); }
.battle-screen .battle-cooldown__value { font-size: 11px; }
.battle-screen .battle-voice--card { color: var(--pf-outline); background: var(--pf-surface); border-color: var(--pf-frame); }
.battle-screen .battle-voice--card .battle-voice__text { font-size: 12px; }
.battle-screen .battle-enemy-unit { background: var(--pf-surface); color: var(--pf-outline); border-color: var(--pf-frame); }
.battle-screen .battle-enemy-unit.is-targeted { border-color: var(--pf-primary); outline-color: var(--pf-primary); }

.battle-result-screen .battle-result-shell { padding: 5%; }
.battle-result-screen .battle-result-content {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  justify-content: center; height: 100%; gap: 5cqw;
}
.battle-result-screen .battle-result-headline {
  padding: 4cqw; background: var(--pf-surface); border: 1px solid var(--pf-frame); border-radius: var(--pf-radius);
}
.battle-result-screen .battle-result-headline__word { color: var(--pf-primary); font-size: clamp(36px, 10cqw, 64px); }
.battle-result-screen--lose .battle-result-headline__word { color: var(--pf-muted); }
.battle-result-screen .battle-result-headline__detail { font-size: 14px; color: var(--pf-outline); line-height: 1.6; }
.battle-result-screen .battle-result-party__strip { gap: 1.2cqw; }
.battle-result-screen .battle-result-card { background: var(--pf-surface); border-radius: 6px; }
.battle-result-screen .battle-result-party__summary { color: var(--pf-outline); background: var(--pf-surface); padding: 8px; border-radius: 6px; }
.battle-result-screen .battle-result-rewards__value { color: var(--pf-primary); font-size: 22px; }
.battle-result-member-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; color: var(--pf-outline); font-size: 14px; }
.battle-result-screen .battle-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.battle-result-screen .battle-result-actions .screen-action--primary { grid-column: 1 / -1; min-height: 52px; }

.battle-result-shell[data-ui-orientation="landscape"] .battle-result-content {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-content: start; justify-content: normal; align-items: start; gap: 10px 16px;
}
.battle-result-shell[data-ui-orientation="landscape"] .battle-result-party { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
.battle-result-shell[data-ui-orientation="landscape"] :is(.battle-result-headline,.battle-result-rewards,.battle-result-content > .game-disclosure,.battle-result-actions) { grid-column: 2; }
.battle-result-shell[data-ui-orientation="landscape"] .battle-result-headline { padding: 10px; }
.battle-result-shell[data-ui-orientation="landscape"] .battle-result-headline__word { font-size: 36px; }
.battle-result-shell[data-ui-orientation="landscape"] .battle-result-rewards { padding: 10px; }
.battle-result-shell[data-ui-orientation="landscape"] .battle-result-actions { gap: 6px; }
.battle-result-shell[data-ui-orientation="landscape"] .battle-result-actions .screen-action { min-height: 44px; padding: 8px; font-size: 14px; }

/* Landscape spends width on the enemy, not taller buttons or squeezed art. */
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .screen-shell__content {
  grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); grid-template-rows: minmax(0,1fr); gap: 2cqw;
}
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-footer { align-self: end; padding: 12px; gap: 10px; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-enemy-stage { padding-top: 0; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-enemy-info { padding: 10px; }
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .screen-shell__content {
  grid-template-columns: 1.2fr 1fr; grid-template-rows: auto minmax(0,1fr) auto; gap: 12px;
}
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .sortie-header { grid-column: 1 / -1; padding: 0; }
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .sortie-actions { grid-column: 1 / -1; }

/* Match the formation tab's available width and shared three-row card frame. */
.sortie-screen > .screen-shell__body {
  --screen-shell-padding: calc(var(--screen-frame-inline) * var(--collection-frame-padding-ratio));
}
.sortie-screen .sortie-party { display: block; padding: 0; }
.sortie-screen .screen-shell__body .screen-shell__content .sortie-party {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* Same five columns for portraits and commands, including empty special slots. */
.battle-screen .battle-party-strip { align-items: stretch; }
.battle-screen .battle-party-slot { align-self: stretch; }
.battle-screen .battle-party-card__body { justify-content: flex-start; }
.battle-screen .battle-party-card__hp { font-variant-numeric: tabular-nums; font-size: max(var(--screen-min-font-size), 2.9cqw); }
.battle-screen .battle-party-card__skill { font-size: max(var(--screen-min-font-size), 2.6cqw); }
.battle-screen .battle-action-guide { margin: 0 0 .6cqw; color: var(--pf-primary); font-size: max(var(--screen-min-font-size), 3cqw); font-weight: 700; text-align: center; }
.battle-screen .battle-actions .screen-action { min-height: 12cqw; font-size: max(var(--screen-min-font-size), 3cqw); border-radius: 1.8cqw; }
.battle-screen .battle-footer .battle-actions .screen-action:disabled { opacity: 1; color: var(--pf-muted); background: var(--pf-primary-soft); box-shadow: none; }
.battle-screen .battle-footer .battle-actions .screen-action.is-ready { border-color: var(--pf-primary); color: var(--pf-primary); background: var(--pf-surface); box-shadow: inset 0 0 0 .3cqw var(--pf-primary), 0 0 1.5cqw var(--pf-primary-soft); }
.battle-screen .battle-footer .battle-actions--special .screen-action.is-ready { border-color: var(--pf-accent); color: var(--pf-highlight); background: var(--pf-accent); box-shadow: 0 0 1.8cqw var(--pf-accent); }
.battle-screen .battle-cooldown { width: 5.8cqw; height: 5.8cqw; }
.battle-screen .battle-cooldown__value { font-size: max(var(--screen-min-font-size), 2.9cqw); }
.battle-screen .screen-action__label { font-size: max(var(--screen-min-font-size), 3cqw); opacity: 1; }
.battle-screen .battle-mode-chip { font-size: max(var(--screen-min-font-size), 2.8cqw); white-space: nowrap; }

/* The old home battle overlay also matches .battle-screen; use the shared frame inset. */
.battle-screen.screen-shell { padding: calc(var(--screen-viewport-gap) / 2); }
.battle-screen > .screen-shell__body { max-width: 100%; }

/* Battle panels share the same fine gold ornament as the rest of the game. */
.battle-screen.screen-shell .screen-shell__body :is(.battle-enemy-info, .battle-footer),
.battle-result-screen.screen-shell .screen-shell__body :is(.battle-result-headline, .battle-result-rewards) {
  border: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1)) solid transparent; border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
  border-radius: 0; background: var(--pf-surface); box-shadow: none;
  padding: clamp(6px, 1.4cqw, 12px);
}
.battle-screen .battle-enemy-info { gap: 8px; }
.battle-screen .battle-hp { height: 8px; box-shadow: inset 0 0 0 1px #624d30; }
.battle-screen .battle-footer { gap: 10px; }
.battle-screen .battle-party-card__body { gap: 4px; padding: 4px 0; }
.battle-screen .battle-party-card__hp { font-size: clamp(12px, 2.6cqw, 20px); text-align: left; }
.battle-screen .battle-action-guide { font-size: clamp(12px, 2.7cqw, 18px); line-height: 1.5; margin: 0; }
.battle-screen .battle-actions .screen-action { min-height: 50px; padding: 5px 1px; border-radius: 7px; }
.battle-screen .battle-enemy-attribute__icon--symbol { width: 28px; height: 28px; }
.battle-enemy-attribute__icon--symbol .attribute-card-icon { border: 0; box-shadow: none; background: none; }
.battle-enemy-attribute__icon--symbol .attribute-card-icon__art { display: none; }
.battle-enemy-attribute__icon--symbol .attribute-card-icon > .attribute-card-icon__badge { width: 100%; height: 100%; inset: 0; }
.battle-enemy-attribute__icon--symbol .attribute-card-icon__jewel-image { translate: none; }
.battle-result-screen .battle-result-content { gap: clamp(12px, 3cqw, 24px); overflow-y: auto; justify-content: safe center; scrollbar-width: thin; scrollbar-color: var(--pf-primary) var(--pf-surface); }
.battle-result-screen .battle-result-headline { text-align: center; }
.battle-result-screen .battle-result-headline__word { letter-spacing: .12em; font-size: clamp(34px, 9cqw, 64px); }
.battle-result-screen .battle-result-headline__detail { margin: 4px 0 0; }
.battle-result-screen .battle-result-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.battle-result-screen .battle-result-card__art { aspect-ratio: 1; height: auto; }
.battle-result-screen .battle-result-card__art > .attribute-card-icon { width: 100%; height: 100%; aspect-ratio: 1; border: 0; border-radius: 0; box-shadow: none; }
.battle-result-screen .battle-result-card__art .attribute-card-icon__art { inset: 0; border-radius: 0; }
.battle-result-screen .battle-result-card__art > .attribute-card-icon::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: url('/assets/ui-kits/pop-fantasy-v2/screens/collection-v1/character-frame.webp') center / 100% 100% no-repeat; }
.battle-result-screen .battle-result-rewards__label { font-size: 14px; color: var(--pf-primary); letter-spacing: .08em; }
.battle-result-screen .battle-result-rewards__list { margin: 8px 0 0; padding: 0; }
.battle-result-screen .battle-result-rewards__item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.battle-result-rewards__name img { display: block; width: 28px; height: 28px; object-fit: contain; }
.battle-result-screen .battle-result-rewards__value { text-align: left; font-variant-numeric: tabular-nums; }
.battle-result-screen .battle-result-actions { gap: 8px; }
.battle-result-screen.screen-shell .screen-shell__body .battle-result-actions .screen-action { border: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1)) solid transparent; border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch); border-radius: 0; padding: 6px; min-height: 48px; box-shadow: none; }

/* 時計・完了マークの領域を常設し、リキャスト終了時にも同じ高さを保つ。 */
.battle-screen .battle-footer .battle-actions .battle-command {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 2px;
  height: max(64px, 15cqw);
  min-height: max(64px, 15cqw);
  padding: 5px 1px;
  box-sizing: border-box;
}
.battle-screen .battle-command .battle-cooldown { flex-shrink: 0; }
.battle-screen .battle-command .battle-cooldown__value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.battle-screen .battle-command .battle-cooldown--idle { background: none; }
.battle-screen .battle-command .battle-cooldown--idle::before { display: none; }
.battle-screen .battle-command .screen-action__label { line-height: 1.2; }

/* Skill icons stay with their actor column. Phones retain two 44px tap targets. */
.battle-screen .battle-footer { position: relative; }
.battle-command-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px 1.3cqw; }
.battle-screen .battle-command-grid .battle-actions { display: contents; }
.battle-command-grid .battle-action-empty { display: none; }
.battle-screen .battle-footer .battle-command-grid .battle-actions .battle-command {
  position: relative; isolation: isolate; display: grid; grid-template-rows: 1fr;
  grid-column: var(--battle-command-column); grid-row: 1; justify-self: center;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  padding: 5px; border: 2px solid var(--pf-primary); border-radius: 12px;
  background: var(--pf-primary-soft); color: var(--pf-primary); box-shadow: inset 0 1px 0 var(--pf-highlight);
  overflow: hidden; touch-action: manipulation;
}
.battle-screen .battle-footer .battle-command-grid .battle-actions .battle-command--special {
  grid-row: 2; border-color: var(--pf-accent); border-radius: 50%; color: var(--pf-accent); background: var(--pf-surface);
}
.battle-screen .battle-command-grid .battle-command[aria-disabled="true"] { filter: saturate(.4); }
.battle-screen .battle-command-grid .battle-command[aria-disabled="true"]:not(.is-cooling) { opacity: .38; }
.battle-screen .battle-command-grid .battle-command .screen-action__label { display: none; }
.battle-skill-icon { width: 100%; height: 100%; pointer-events: none; }
.battle-screen .battle-command-grid .battle-command .battle-cooldown {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border-radius: inherit;
  background: conic-gradient(rgba(20,29,25,.72) calc(var(--battle-cooldown-rate) * 360deg), transparent 0);
  color: white; opacity: 1; pointer-events: none;
}
.battle-screen .battle-command-grid .battle-command .battle-cooldown::before { display: none; }
.battle-screen .battle-command-grid .battle-command .battle-cooldown--idle { visibility: hidden; }
.battle-screen .battle-command-grid .battle-cooldown__value { font-size: 12px; font-weight: 800; text-shadow: 0 1px 3px #15241d, 0 0 4px #15241d; }
.battle-command-grid .is-newly-ready::after { content: ""; position: absolute; inset: -20%; z-index: 3; pointer-events: none; background: linear-gradient(110deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%); animation: battle-command-ready-shine .65s ease-out both; }
@keyframes battle-command-ready-shine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .battle-command-grid .is-newly-ready::after { display: none; } }
@container (min-width: 640px) {
  .battle-command-grid { grid-template-columns: repeat(10,minmax(0,1fr)); column-gap: .65cqw; }
  .battle-screen .battle-footer .battle-command-grid .battle-actions .battle-command { grid-column: var(--battle-command-wide-column); grid-row: 1; width: 48px; height: 48px; }
}
.battle-command-grid[data-battle-mode="manual"] .screen-action:not(.battle-command) { grid-column: 1 / -1; grid-row: 3; }
.battle-skill-details { position: absolute; z-index: 25; inset: auto 0 0; max-height: 100%; overflow: auto; padding: 16px; border: 2px solid var(--pf-frame); border-radius: 10px; background: var(--pf-surface); color: var(--pf-outline); box-shadow: 0 -4px 16px #0003; font-size: 14px; line-height: 1.6; }
.battle-skill-details p { margin: 4px 0; }
.battle-skill-details strong { font-size: 18px; }
.battle-skill-details button { min-height: 44px; margin-top: 12px; }

/* Landscape sortie shares the wide formation artwork and reserves its own controls. */
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .screen-shell__content {
  grid-template-columns: 44px minmax(0, 1fr) clamp(140px, 21%, 250px);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .sortie-presets {
  grid-column: 1; grid-row: 1; flex-direction: column; align-items: center;
  /* Calibrated buttons may extend toward the party frame beyond this grid column. */
  justify-content: center; min-height: 0; overflow: visible; position: relative; z-index: 30;
}
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .sortie-preset {
  flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px;
  padding: 0; border-radius: 50%; display: grid; place-items: center;
}
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .sortie-party {
  grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; position: relative;
}
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .formation-slots {
  width: 100%; height: 100%; min-height: 0; aspect-ratio: auto;
  background-image: url('/assets/ui-kits/pop-fantasy-v2/screens/formation-landscape-v1/panel.svg');
}
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .formation-slot-frame {
  background-image: url('/assets/ui-kits/pop-fantasy-v2/screens/formation-landscape-v1/rails.svg'); mask: none;
}
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .formation-slot-list {
  inset: 4.613841524573721% 4% 3.4102306920762286% 4%;
  grid-template-columns: repeat(5,minmax(0,1fr)); height: auto;
}
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .formation-slot-card__stats {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: minmax(0,1fr); padding: 1px;
}
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .formation-slot-card__stat {
  position: static; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px;
}
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .formation-slot-card__stat:is(:nth-child(1), :nth-child(2)) .formation-slot-card__stat-word {
  position: static; width: 60%; height: 35%; flex: 0 0 35%; translate: none; scale: none;
}
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .formation-slot-card__stat-value {
  position: static; width: 100%; height: auto; text-align: center; font-size: clamp(10px,12cqw,20px);
}
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .formation-slot-card__stat:is(:nth-child(1), :nth-child(2)) .formation-slot-card__stat-value > [data-calibration-text] {
  font-size: inherit; translate: none; scale: none; text-align: center;
}
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .sortie-opponent {
  grid-column: 3; grid-row: 1; min-width: 0; min-height: 0; overflow-y: auto; align-content: start;
}
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .sortie-enemy { flex-direction: column; align-items: start; gap: 6px; }
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .sortie-enemy__name { font-size: clamp(14px,1.6cqw,22px); overflow-wrap: anywhere; }
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .sortie-actions {
  grid-column: 2 / -1; grid-row: 2; padding: 0; min-width: 0;
}
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .sortie-actions .screen-action { min-height: 44px; padding: 6px; font-size: clamp(13px,1.6cqw,20px); }
.sortie-screen .screen-shell__body[data-ui-orientation='landscape'] .sortie-empty { position: absolute; inset: 30% 4% auto; text-align: center; margin: 0; background: var(--pf-surface); }

/* Landscape battle: status above the stage, five actor columns below it. */
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .screen-shell__content {
  grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) clamp(150px,34%,230px);
  gap: 10px; overflow: hidden;
}
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-stage { min-height: 0; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-arena { grid-template-rows: auto minmax(0,1fr); gap: 4px; }
.battle-screen.screen-shell .screen-shell__body[data-ui-orientation='landscape'] .battle-enemy-info {
  display: grid; grid-template-columns: auto minmax(60px,1fr) auto; gap: 4px 12px;
  padding: 6px 12px; border-width: 4px; align-items: center;
}
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-enemy-head { display: contents; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-enemy-head > .battle-unit__label { display: none; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-enemy-head > .battle-unit__name { grid-column: 1; grid-row: 1; font-size: clamp(14px,1.7cqw,22px); }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-mode-chip { grid-column: 3; grid-row: 1; font-size: 14px; padding: 4px 8px; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-enemy-info > .battle-hp { grid-column: 2; grid-row: 1; width: 100%; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-enemy-info > .battle-unit__meta { grid-column: 2; grid-row: 2; margin: 0; font-size: 12px; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-enemy-attribute { grid-column: 1; grid-row: 2; margin: 0; font-size: 12px; gap: 4px; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-enemy-attribute__icon--symbol { width: 18px; height: 18px; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-enemy-list--group { grid-column: 1 / -1; max-height: 72px; overflow-y: auto; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-enemy-avatar { width: min(22cqw,180px); height: 85%; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-enemy-avatar--image { width: 70%; height: 100%; }
.battle-screen.screen-shell .screen-shell__body[data-ui-orientation='landscape'] .battle-footer {
  align-self: stretch; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto;
  padding: 0; gap: 6px; border: 0; border-image: none; background: transparent; box-shadow: none;
}
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-party-strip { min-height: 0; gap: 12px; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-party-slot { min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; background: transparent; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-party-card__icon { height: 100%; min-height: 0; width: 100%; display: flex; justify-content: center; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-party-card__icon .attribute-card-icon { width: auto; height: 100%; max-width: 100%; aspect-ratio: 1; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-party-card__body { padding: 2px 4px; gap: 2px; background: var(--pf-surface); border-radius: 4px; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-party-card__hp { font-size: 12px; line-height: 1.2; text-align: center; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-hp--member { height: 5px; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-command-grid { grid-template-columns: repeat(10,minmax(0,1fr)); column-gap: 6px; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-footer .battle-command-grid .battle-actions .battle-command { grid-column: var(--battle-command-wide-column); grid-row: 1; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-action-guide { font-size: 12px; }
.battle-screen > .screen-shell__body[data-ui-orientation='landscape'] { --screen-shell-bottom-padding: 16px; }

/* Keep a character's portrait, HP and two commands together as one unit. */
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-party-slot {
  width: min(100%, clamp(96px, 12cqw, 170px)); justify-self: center;
}
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-party-card__body { width: 100%; box-sizing: border-box; padding: 4px; border: 1px solid var(--pf-frame); }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-party-card__icon .attribute-card-icon { width: 100%; max-width: 100%; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-party-card-empty { visibility: hidden; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-footer .battle-command-grid .battle-actions .battle-command { justify-self: end; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-footer .battle-command-grid .battle-actions .battle-command--special { justify-self: start; }
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-party-slot.is-damaged::after { animation-fill-mode: both; }

/* The result celebrates the party through tall artwork, not a row of thumbnails. */
.battle-result-shell[data-ui-orientation='landscape'] .battle-result-content {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
}
.battle-result-shell[data-ui-orientation='landscape'] .battle-result-party {
  align-self: stretch; min-height: 0; height: 100%; overflow: hidden;
}
.battle-result-shell[data-ui-orientation='landscape'] .battle-result-party__strip {
  grid-template-columns: repeat(var(--result-party-count,5), minmax(0,1fr));
  height: 100%; min-height: 0; gap: 8px; border-radius: 0; box-shadow: none;
}
.battle-result-shell[data-ui-orientation='landscape'] .battle-result-card { grid-template-rows: minmax(0,1fr); min-height: 0; }
.battle-result-shell[data-ui-orientation='landscape'] .battle-result-card--empty { display: none; }
.battle-result-shell[data-ui-orientation='landscape'] .battle-result-card__art { height: 100%; min-height: 0; aspect-ratio: auto; }
.battle-result-shell[data-ui-orientation='landscape'] .battle-result-card__art > .attribute-card-icon { height: 100%; width: 100%; aspect-ratio: auto; }
.battle-result-shell[data-ui-orientation='landscape'] .battle-result-card__art .attribute-card-icon__image { object-fit: cover; object-position: center top; }
.battle-result-shell[data-ui-orientation='landscape'] .battle-result-card__art > .attribute-card-icon::after {
  background: none; border: 5px solid transparent; border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
}
.battle-result-shell[data-ui-orientation='landscape'] .battle-result-actions { align-self: end; }
@media (max-height: 500px) {
  .battle-result-screen .battle-result-shell[data-ui-orientation='landscape'] { padding: 3%; }
  .battle-result-shell[data-ui-orientation='landscape'] .battle-result-content { gap: 6px 12px; }
  .battle-result-screen .battle-result-shell[data-ui-orientation='landscape'] :is(.battle-result-headline,.battle-result-rewards) { border-width: 6px; padding: 6px; }
  .battle-result-shell[data-ui-orientation='landscape'] .battle-result-headline__word { font-size: 24px; }
  .battle-result-shell[data-ui-orientation='landscape'] .battle-result-headline__detail { font-size: 12px; margin: 2px 0 0; }
  .battle-result-shell[data-ui-orientation='landscape'] .battle-result-rewards__list { margin: 2px 0 0; }
  .battle-result-screen .battle-result-shell[data-ui-orientation='landscape'] .battle-result-actions .screen-action { border-width: 5px; padding: 4px; min-height: 44px; }
}

/* Wider battle portraits; result art has no gameplay badges. */
.battle-screen .screen-shell__body[data-ui-orientation='landscape'] .battle-party-slot { width: min(100%, clamp(104px, 14cqw, 200px)); }
.battle-result-shell[data-ui-orientation='landscape'] .battle-result-card :is(.pop-fantasy-rarity-flag,.attribute-card-icon__badge) { display: none; }
.battle-result-shell[data-ui-orientation='landscape'] .battle-result-content { grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); }

/* Review round 5: Pop Fantasy's sortie buttons wear its own button art
   (wide cream for 編成を変更, large red for 出発) instead of the plain screen
   button, drawn at the art's own 3:1 proportions. */
[data-ui-theme-kit="fantasy"] .sortie-screen .sortie-actions .screen-action:not(.game-screen-part--has-asset) {
  border: 0; border-radius: 0; box-shadow: none;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/common/secondary-button-wide.webp") center / 100% 100% no-repeat;
  color: var(--pf-outline);
}
[data-ui-theme-kit="fantasy"] .sortie-screen .sortie-actions .sortie-depart:not(.game-screen-part--has-asset) {
  background-image: url("/assets/ui-kits/pop-fantasy-v2/screens/common/primary-button-large.webp");
  color: #fffef8;
}
/* Round 6: every theme's sortie buttons wear its own button art (the same
   art as its tabs; Pop Fantasy keeps its pills above), with 出発 lit as
   the main one. The words are pictures (ui-theme-art.mjs). */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .sortie-screen .sortie-actions .screen-action:not(.game-screen-part--has-asset) {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: var(--theme-tab-art) center / 100% 100% no-repeat !important;
  color: var(--theme-tab-ink, var(--pf-outline)) !important;
}
/* Round 7: outline-only frames (street themes) are filled with the surface;
   drawn art keeps its corners with a nine-slice instead of stretching. */
[data-ui-theme-family="urban"] .sortie-screen .sortie-actions .screen-action:not(.game-screen-part--has-asset) { background-color: var(--pf-surface) !important; }
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]):not([data-ui-theme-family="urban"]) .sortie-screen .sortie-actions .screen-action:not(.game-screen-part--has-asset) {
  background: none !important;
  border: 0 solid transparent !important;
  border-image: var(--theme-tab-art) 46% 24% fill / 32% 10% / 0 stretch !important;
}
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .sortie-screen .sortie-actions .sortie-depart:not(.game-screen-part--has-asset) { filter: drop-shadow(0 0 6px var(--pf-accent)) brightness(1.06); }
.sortie-screen .sortie-edit-party { display: flex; align-items: center; justify-content: center; }
.sortie-screen .sortie-depart__cost { color: var(--theme-tab-ink, inherit); }
/* Round 6: the fight takes place on the theme's own stage art; simple stays
   plain and Pop Fantasy keeps its arena (both resolve to none). */
[data-ui-theme-kit]:not([data-ui-theme-kit="simple"]):not([data-ui-theme-kit="fantasy"]) .battle-screen > .screen-shell__body {
  background-image: var(--theme-battle-background) !important;
  background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
}

/* Review 2026-10-03: HP numbers sit on the bar (battle-screen.mjs), so the
   bar grows to a readable height and only its first span is the fill. */
.battle-screen .battle-hp:has(> .battle-hp__label) { position: relative; height: 16px; border-radius: 8px; }
.battle-screen .battle-hp > .battle-hp__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  width: auto; height: auto; margin: 0; background: none; border-radius: 0;
  color: #fff; font-size: 11px; font-weight: 800; line-height: 1; white-space: nowrap;
  text-shadow: 0 0 2px rgb(0 0 0 / .85), 0 1px 1px rgb(0 0 0 / .7);
}
.battle-screen .battle-hp--member:has(> .battle-hp__label) { height: 14px; }
.battle-screen .battle-hp--member > .battle-hp__label { font-size: 10px; }
/* The enemy panel is one row of mark + name over the bar. */
.battle-screen .battle-enemy-head { display: flex; align-items: center; gap: 6px; }
.battle-screen .battle-enemy-head > .battle-enemy-attribute { display: inline-flex; flex: none; margin: 0; }
.battle-screen .battle-enemy-head .battle-enemy-attribute__icon { width: 22px; height: 22px; }
.battle-screen .battle-enemy-info { gap: 6px; }
/* The attribute word stays for screen readers only. */
.battle-screen .battle-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

/* Round 9: the opponent's heading is read aloud but not shown; the theme's VS
   mark leads the enemy's row instead. */
.sortie-screen .sortie-opponent__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sortie-screen .sortie-enemy__vs { width: 66px; height: 44px; flex: 0 0 66px; object-fit: contain; }
/* Round 9: Pop Fantasy frames the opponent panel with its own panel art, the
   same frame as the story reader and card detail (the other themes take
   their panel paint). */
[data-ui-theme-kit="fantasy"] .sortie-screen .sortie-opponent:not(.game-screen-part--has-asset) {
  box-sizing: border-box;
  border: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1)) solid transparent;
  border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
  border-radius: 8px; box-shadow: none;
  background: var(--pf-surface);
}
/* Round 10: Pop Fantasy's stamina cost on 出発 reads in white like the word. */
[data-ui-theme-kit="fantasy"] .sortie-screen .sortie-depart__cost { color: #fffef8; text-shadow: 0 0 2px rgba(96, 34, 12, .85), 0 1px 1px rgba(96, 34, 12, .7); }
/* Round 12: the sortie buttons draw their art whole at its own ratio instead of a nine-slice
   that stretched the middle of the art. */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]):not([data-ui-theme-family="urban"]) .sortie-screen .sortie-actions .screen-action:not(.game-screen-part--has-asset) {
  border: 0 !important; border-image: none !important;
  background: var(--theme-tab-art) center / 100% 100% no-repeat !important;
  /* the button takes the art's own ratio, and its words sit inside the art's measured inner
     panel (ui-button-insets.mjs), so they never run onto the side ornaments */
  aspect-ratio: var(--theme-button-ratio, 2.5); height: auto !important; min-height: 0 !important;
  padding: calc(var(--theme-button-inset-t, .2) / var(--theme-button-ratio, 2.5) * 100%) calc(var(--theme-button-inset-r, .1) * 100%) calc(var(--theme-button-inset-b, .2) / var(--theme-button-ratio, 2.5) * 100%) calc(var(--theme-button-inset-l, .1) * 100%) !important;
}
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]):not([data-ui-theme-family="urban"]) .sortie-screen .sortie-actions .screen-action:not(.game-screen-part--has-asset) { flex-wrap: nowrap !important; white-space: nowrap; }

/* Keep the authored icons and panel art. Give the live labels one stable
   rectangle and reserve a lane for speech above the two entry buttons. */
.home-game-canvas--pop-fantasy-v2 { --ink: var(--pf-outline); --ink-soft: var(--pf-muted); --accent: var(--pf-accent); }
.home-game-canvas--pop-fantasy-v2 .home-speech-layer--image { bottom: 65cqw; }
.home-game-frame--portrait .home-speech-layer { bottom: 65cqw; }
.home-game-frame--landscape .home-speech-layer { top: 20%; bottom: auto; }
.home-game-canvas--pop-fantasy-v2 .home-speech--image { padding: 3cqw 4cqw; min-height: 15cqw; }
.home-game-canvas--pop-fantasy-v2 .home-speech__text { color: var(--pf-outline); font-size: 34px; line-height: 1.55; font-weight: 500; }
.home-game-canvas--pop-fantasy-v2 :is(.story-slot-button,.battle-slot-button) .pf-label {
  position: absolute; left: 38%; right: 5%; top: 50%; bottom: auto;
  margin: auto; transform: translateY(-50%); max-width: 57%;
}
.home-game-canvas--pop-fantasy-v2 .battle-slot-button { background-size: 100% 100%; }
.home-game-canvas--pop-fantasy-v2 .home-level-badge__value { color: var(--pf-highlight); }
.home-bottom-nav-item--active::before { width: 28%; top: auto; bottom: 2%; background: var(--pf-primary); height: 3px; }
.formation-detail-back .pf-label { --pf-label-height: clamp(16px,3.8cqw,24px); }
.formation-detail-screen .formation-detail-card__name { min-height: 0; box-sizing: border-box; }
.formation-detail-screen .formation-detail-card__name-text { font-size: clamp(18px,4cqw,30px); color: var(--pf-outline); }
.formation-detail-screen .formation-detail-tab { color: var(--pf-outline); }
.formation-detail-screen .formation-detail-tab[aria-selected='true'] { color: var(--pf-primary); background: var(--pf-primary-soft); border-radius: var(--pf-radius); border: 1px solid var(--pf-primary); }
.home-game-canvas[data-ui-orientation='landscape'] .home-speech-layer--image { bottom: 26cqw; width: 62%; }

/* Keep the neutral character pose between HUD and nav in a short viewport.
   The player's translate/scale remains on the same-width figure. */
.home-game-frame--landscape .home-character:not([data-home-character-placeholder="true"]) {
  bottom: 18.5%; height: 66%;
}
.home-game-frame--landscape .home-character__image {
  height: 100%; object-fit: contain; object-position: bottom center;
}
.home-game-frame--landscape .home-speech[data-home-speech-side="left"] {
  margin-left: max(4cqw, calc(var(--home-speech-anchor, 0%) + 9cqw));
  max-width: min(62cqw, max(30cqw, calc(100% - var(--home-speech-anchor, 0%) - 13cqw)));
}
.home-game-frame--landscape .home-speech[data-home-speech-side="right"] {
  margin-right: max(4cqw, calc(100% - var(--home-speech-anchor, 100%) + 9cqw));
  max-width: min(62cqw, max(30cqw, calc(var(--home-speech-anchor, 100%) - 13cqw)));
}

/* One illustrated frame, nine-sliced without stretching corner ornaments.
   Transparent centers let semantic surfaces change independently of the gold.
   Decoration occupies no layout space; saved bounds and hit targets stay put. */
.home-game-canvas {
  --home-panel-frame: var(--pf-frame-art);
  --home-tool-frame: var(--theme-tool-frame, url("/assets/ui-kits/pop-fantasy-v2/home/illustrated-v1/tool-frame.webp"));
  --home-panel-frame-width: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1));
  --home-frame-highlight: #fff0bd;
  --home-frame-shadow: #806137;
  --home-panel-face: var(--pf-surface);
}
.home-game-canvas > [data-ui-skin="standard"]:is(
  [data-ui-role="status-panel"],
  [data-ui-role="primary-action"],
  [data-ui-role="secondary-action"]
)::before,
.home-game-frame .home-game-canvas::after,
.home-game-canvas .home-speech[data-home-speech-skin="standard"]::before {
  content: "";
  position: absolute;
  inset: var(--home-panel-inset-y, 0px) 0;
  box-sizing: border-box;
  pointer-events: none;
  border: var(--home-panel-frame-width) solid transparent;
  border-image-source: var(--home-panel-frame);
  border-image-slice: var(--pf-frame-slice);
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: var(--pf-frame-repeat, stretch);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.home-game-frame .home-game-canvas::after {
  /* The outer rim is continuous: corner clasps belong to inner panels only. */
  inset: calc(3 * var(--control-px));
  border: calc(3 * var(--control-px)) solid var(--pf-frame);
  border-image: none;
  border-radius: calc(8 * var(--control-px));
  box-shadow: inset 0 0 0 calc(1 * var(--control-px)) var(--home-frame-highlight),
    0 0 0 calc(1 * var(--control-px)) var(--home-frame-shadow);
}

.home-game-canvas > [data-ui-skin="standard"][data-ui-role="status-panel"] {
  --home-panel-frame-width: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1));
  --home-panel-inset-y: calc(-2 * var(--control-px));
  background-color: transparent;
  border: 0;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
}
.home-game-canvas > [data-ui-skin="standard"]:is([data-ui-role="primary-action"], [data-ui-role="secondary-action"]) {
  --home-panel-frame-width: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1));
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
.home-game-canvas > [data-ui-skin="standard"][data-ui-role="primary-action"] {
  --home-panel-face: var(--pf-accent);
}
.home-game-canvas > [data-ui-skin="standard"][data-ui-role="secondary-action"] {
  --home-panel-face: var(--pf-primary);
}
/* These words already have a cream contour. Keep the brown ink row on
   colored faces; the light row erases the separation inside the lettering. */
.home-game-canvas > [data-ui-skin="standard"]:is([data-ui-role="primary-action"], [data-ui-role="secondary-action"]) .pf-label {
  --pf-label-color: var(--pf-outline);
  --pf-label-position: 0%;
}
.home-game-canvas > [data-ui-skin="standard"][data-ui-role="secondary-action"],
.home-game-canvas > [data-ui-skin="standard"][data-ui-role="secondary-action"] .story-slot-button-icon {
  color: var(--pf-primary);
  text-shadow: none;
}
.home-game-canvas > [data-ui-skin="standard"][data-ui-role="tool"] {
  border: 0;
  background-color: transparent;
  box-shadow: none;
  isolation: isolate;
}
/* The illustrated ring has transparent padding outside its circumference.
   Place the face under its gold band, not across the entire square asset. */
.home-game-canvas > [data-ui-skin="standard"][data-ui-role="tool"]::after {
  content: "";
  display: block;
  position: absolute;
  inset: 7%;
  border: 0;
  border-radius: 50%;
  background: var(--pf-surface);
  box-shadow: none;
  z-index: -1;
  pointer-events: none;
}
.home-game-canvas > [data-ui-skin="standard"][data-ui-role="tool"]::before {
  inset: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--home-tool-frame) center / 100% 100% no-repeat;
}
.home-game-canvas > [data-ui-skin="standard"][data-ui-role="tool"] .home-editable-part__icon-image {
  left: 24%; top: 24%; width: 52%; height: 52%;
}
.home-game-canvas > [data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::after {
  background-color: transparent;
  box-shadow: none;
}
.home-game-canvas .home-speech[data-home-speech-skin="standard"] {
  --home-panel-frame-width: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1));
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: calc(12 * var(--control-px)) calc(14 * var(--control-px));
  box-shadow: none;
}
.home-game-canvas .home-speech[data-home-speech-skin="standard"] .home-speech__text {
  max-height: calc(96 * var(--control-px));
  overflow-y: auto;
  pointer-events: auto;
  overscroll-behavior: contain;
  color: var(--pf-outline);
}

/* The fill follows the same nine-slice box as the frame. Its chamfer runs
   underneath the opaque gold, keeping the image's corner cutouts open.
   Clip only this paint layer; never clip text, ornaments or pointer targets. */
.home-game-canvas > [data-ui-skin="standard"]:is(
  [data-ui-role="primary-action"], [data-ui-role="secondary-action"], [data-ui-role="tool"]
):active:not(:disabled) {
  border: 0;
  box-shadow: none;
}
.home-game-canvas > [data-ui-skin="standard"]:is(
  [data-ui-role="status-panel"],
  [data-ui-role="primary-action"], [data-ui-role="secondary-action"]
),
.home-game-canvas .home-speech[data-home-speech-skin="standard"] {
  isolation: isolate;
}
.home-game-canvas > [data-ui-skin="standard"]:is(
  [data-ui-role="status-panel"],
  [data-ui-role="primary-action"], [data-ui-role="secondary-action"]
)::after,
.home-game-canvas .home-speech[data-home-speech-skin="standard"]::after {
  --face-edge: calc(var(--home-panel-frame-width) * .35);
  --face-corner: calc(var(--home-panel-frame-width) * .9);
  content: "";
  display: block;
  position: absolute;
  inset: var(--home-panel-inset-y, 0px) 0;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  transform: none;
  box-shadow: none;
  background: var(--home-panel-face);
  z-index: -1;
  pointer-events: none;
  clip-path: polygon(
    var(--face-corner) var(--face-edge),
    calc(100% - var(--face-corner)) var(--face-edge),
    calc(100% - var(--face-edge)) var(--face-corner),
    calc(100% - var(--face-edge)) calc(100% - var(--face-corner)),
    calc(100% - var(--face-corner)) calc(100% - var(--face-edge)),
    var(--face-corner) calc(100% - var(--face-edge)),
    var(--face-edge) calc(100% - var(--face-corner)),
    var(--face-edge) var(--face-corner)
  );
}

/* Settings use the same physical-pixel frame contract as other panels. */
:is(.home-game-settings-panel, .home-character-panel).home-profile-panel {
  padding: 12px;
  gap: 16px;
  border: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1)) solid transparent;
  border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
  border-radius: 8px;
  background: var(--pf-surface);
  color: var(--pf-outline);
  box-shadow: none;
}
:is(.home-game-settings-panel, .home-character-panel) .home-profile-panel-header { align-items: center; gap: 8px; }
:is(.home-game-settings-panel, .home-character-panel) .home-profile-panel-header h2 { font-size: 24px; color: var(--pf-primary); }
:is(.home-game-settings-panel, .home-character-panel) .home-profile-panel-eyebrow { display: none; }
.home-game-settings-panel .home-profile-panel-section {
  padding: 0;
  gap: 12px;
  border: 0;
  background: none;
}
.home-game-settings-panel .home-profile-panel-section h3 { font-size: 16px; color: var(--pf-primary); }
:is(.home-game-settings-panel, .home-character-panel) .home-profile-panel-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--pf-surface) var(--theme-tool-frame, url("/assets/ui-kits/pop-fantasy-v2/home/illustrated-v1/tool-frame.webp")) center / 100% 100% no-repeat;
  color: var(--pf-outline);
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}
:is(.home-game-settings-panel, .home-character-panel) .home-profile-panel-close > svg { width: 100%; height: 100%; }
.home-game-settings-panel .home-audio-settings__row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--pf-frame);
}
.home-game-settings-panel .home-audio-settings__row:last-child { border-bottom: 0; }
.home-game-settings-panel .home-audio-settings__label {
  grid-column: 1 / -1;
  gap: 8px;
  color: var(--pf-outline);
  font-size: 14px;
  font-weight: 600;
}
.home-game-settings-panel .home-audio-settings__icon { width: 28px; flex-basis: 28px; }
.home-game-settings-panel .home-audio-settings__value { color: var(--pf-outline); font-size: 14px; }
.home-game-settings-panel .home-audio-settings__select { grid-column: 1 / -1; font-size: 14px; }
.home-game-settings-panel .home-audio-settings__slider {
  margin: 0;
  border: 0;
  background: linear-gradient(to right, var(--pf-primary) calc(var(--audio-value, 0) * 1%), var(--pf-frame) 0) center / 100% 4px no-repeat;
}
.home-game-settings-panel .home-audio-settings__slider::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.home-game-settings-panel .home-audio-settings__slider::-moz-range-track { height: 4px; background: transparent; }
.home-game-settings-panel .home-audio-settings__slider::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border: 2px solid var(--pf-frame);
  border-radius: 50%;
  background: var(--pf-accent);
  box-shadow: inset 0 2px 0 var(--pf-highlight), 0 1px 0 var(--pf-shadow);
}
.home-game-settings-panel .home-audio-settings__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--pf-frame);
  border-radius: 50%;
  background: var(--pf-accent);
  box-shadow: inset 0 2px 0 var(--pf-highlight), 0 1px 0 var(--pf-shadow);
}

/* Placement lives outside the scaled canvas. Its grid must shrink to the
   dialog instead of inheriting the party grid's fixed column widths. */
.home-character-panel.home-profile-panel {
  min-width: 0;
  overflow-x: hidden;
  font-size: 14px;
}
.home-character-panel .home-profile-panel-header {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 6px;
  min-width: 0;
}
.home-character-panel .home-character-panel__heading { min-width: 0; margin: 0; }
.home-character-panel .home-profile-panel-header h2 {
  font-size: 16px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.home-character-panel .home-profile-panel-section {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--pf-frame);
  border-radius: var(--pf-radius);
  background: var(--pf-surface);
}
.home-character-panel .home-character-panel__faces {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 6px;
  min-width: 0;
}
.home-character-panel .home-character-panel__face {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  aspect-ratio: 1;
  border-radius: 6px;
}
.home-character-panel .home-character-panel__face[data-selected="true"] { border-color: var(--pf-primary); }
.home-character-panel .home-character-panel__toggle { min-width: 0; font-size: 14px; }
.home-character-panel .home-character-panel__toggle-label,
.home-character-panel .home-character-panel__toggle-mark { flex-shrink: 0; }
.home-character-panel .home-character-panel__hint,
.home-character-panel .home-character-panel__empty { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.home-character-panel .home-character-panel__stow {
  color: var(--pf-primary);
  border-color: var(--pf-frame);
  background: var(--pf-surface);
}

/* Native scrolling, with the same cream/gold/green vocabulary as panels. */
:is(.home-character-panel, .home-game-settings-panel, .collection-card-list, .formation-bench-list, .formation-detail-screen .formation-detail-tab-panel.ui-scrollbar, .story-reader-screen .story-reader-text, .story-reader-screen .story-reader-full-log__list, .shop-screen .shop-product-list) {
  scrollbar-width: thin;
  scrollbar-color: var(--pf-primary) var(--pf-surface);
}
@supports selector(::-webkit-scrollbar) {
  :is(.home-character-panel, .home-game-settings-panel, .collection-card-list, .formation-bench-list, .formation-detail-screen .formation-detail-tab-panel.ui-scrollbar, .story-reader-screen .story-reader-text, .story-reader-screen .story-reader-full-log__list, .shop-screen .shop-product-list) { scrollbar-color: auto; scrollbar-width: auto; }
}
:is(.home-character-panel, .home-game-settings-panel, .collection-card-list, .formation-bench-list, .formation-detail-screen .formation-detail-tab-panel.ui-scrollbar, .story-reader-screen .story-reader-text, .story-reader-screen .story-reader-full-log__list, .shop-screen .shop-product-list)::-webkit-scrollbar { width: 12px; height: 12px; }
:is(.home-character-panel, .home-game-settings-panel, .collection-card-list, .formation-bench-list, .formation-detail-screen .formation-detail-tab-panel.ui-scrollbar, .story-reader-screen .story-reader-text, .story-reader-screen .story-reader-full-log__list, .shop-screen .shop-product-list)::-webkit-scrollbar-track {
  background: var(--pf-surface);
  border: 1px solid var(--pf-frame);
  border-radius: 8px;
}
:is(.home-character-panel, .home-game-settings-panel, .collection-card-list, .formation-bench-list, .formation-detail-screen .formation-detail-tab-panel.ui-scrollbar, .story-reader-screen .story-reader-text, .story-reader-screen .story-reader-full-log__list, .shop-screen .shop-product-list)::-webkit-scrollbar-thumb {
  background: var(--pf-primary);
  border: 2px solid var(--pf-frame);
  border-radius: 8px;
  box-shadow: inset 1px 0 0 var(--pf-highlight);
}
:is(.home-character-panel, .home-game-settings-panel, .collection-card-list, .formation-bench-list, .formation-detail-screen .formation-detail-tab-panel.ui-scrollbar, .story-reader-screen .story-reader-text, .story-reader-screen .story-reader-full-log__list, .shop-screen .shop-product-list)::-webkit-scrollbar-button { display: none; }

/* Sound settings are an unscaled control panel, independent of authored HUD text. */
.home-game-settings-panel.home-profile-panel {
  --control-px: 1px; --canvas-text-xs: 12px; --canvas-text-sm: 14px;
  --canvas-text-md: 16px; --canvas-text-lg: 20px; --canvas-text-xl: 24px;
  inset: 8% 4% auto; width: auto; max-height: 84%; padding: 14px; gap: 12px;
}
.home-game-settings-panel .home-profile-panel-header { display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: center; margin: 0; min-height: 44px; }
.home-game-settings-panel .home-settings-heading { margin: 0; min-width: 0; }
.home-game-settings-panel .home-settings-heading h2 { margin: 0; font-size: 22px; line-height: 1.3; }
.home-game-settings-panel.home-profile-panel .home-profile-panel-close {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; max-width: 44px; padding: 10px;
  max-height: 44px; box-sizing: border-box; aspect-ratio: 1; flex: 0 0 44px; align-self: start; justify-self: end;
  border: 0; border-radius: 50%; background: var(--pf-surface) var(--theme-tool-frame) center / contain no-repeat; transform: none;
}
.home-game-settings-panel .home-audio-settings__row { padding: 10px 0; gap: 6px 12px; }
.home-game-settings-panel .home-audio-settings__label { font-size: 16px; line-height: 1.4; }
.home-game-settings-panel .home-audio-settings__slider { height: 44px; min-height: 44px; }
.home-game-settings-panel .home-audio-settings__value { font-size: 14px; font-variant-numeric: tabular-nums; }

/* Placement uses the same physical control sizing as sound settings. */
.home-character-panel.home-profile-panel {
  --control-px: 1px; --canvas-text-xs: 12px; --canvas-text-sm: 14px;
  --canvas-text-md: 16px; --canvas-text-lg: 20px; --canvas-text-xl: 24px;
  inset: auto 4% 18%; max-height: 54%; padding: 12px; gap: 12px; container-type: inline-size;
}
.home-character-panel.home-profile-panel .home-profile-panel-header { grid-template-columns: 44px minmax(0,1fr) 44px; gap: 8px; align-items: center; min-height: 44px; }
.home-character-panel.home-profile-panel .home-character-panel__heading h2 { margin: 0; font-size: 20px; line-height: 1.3; }
.home-character-panel.home-profile-panel :is(.home-profile-panel-close,.home-character-panel__stow) {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; max-width: 44px;
  padding: 10px; border: 0; border-radius: 50%; background: var(--pf-surface) var(--theme-tool-frame) center / contain no-repeat;
  color: var(--pf-primary); font-size: 20px; line-height: 1; box-shadow: none;
}
.home-character-panel .home-character-panel__floating {
  min-height: 44px; padding: 10px 12px; border: 1px solid var(--pf-frame); border-radius: 8px;
  background: var(--pf-surface); color: var(--pf-outline); font-size: 14px; font-weight: 700; line-height: 1.4;
}
.home-character-panel .home-character-panel__floating[aria-pressed="true"] { background: var(--pf-primary-soft); color: var(--pf-primary); border-color: var(--pf-primary); }
.home-character-panel .home-character-panel__toggle { min-height: 44px; padding: 4px 0; align-items: center; gap: 8px; }
.home-character-panel .home-character-panel__toggle-label { font-size: 16px; }
.home-character-panel .home-character-panel__toggle-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.home-character-panel .home-character-panel__face[data-selected="true"] { box-shadow: inset 0 0 0 2px var(--pf-primary); }
@container (max-width: 250px) { .home-character-panel .home-character-panel__faces { grid-template-columns: repeat(4,minmax(0,1fr)); } }

.home-character-panel.home-profile-panel :is(.home-profile-panel-close, .home-character-panel__stow) {
  box-sizing: border-box; aspect-ratio: 1; flex: 0 0 44px; max-height: 44px; max-width: 44px; min-height: 44px; min-width: 44px;
  align-self: start; justify-self: start;
}
.home-character-panel .home-character-panel__face--symbol { position: relative; display: grid; place-items: center; padding: 0; background: var(--pf-surface); color: var(--pf-primary); }
.home-character-panel.home-profile-panel .home-character-panel__face--symbol { border: 1px solid var(--pf-frame); border-radius: 8px; background: var(--pf-surface); }
.home-character-panel .home-character-panel__choice-symbol { position: static; display: grid; place-items: center; width: 40%; height: 40%; color: var(--pf-primary); }
.home-character-panel__choice-symbol svg { display: block; width: 100%; height: 100%; }
.home-character-panel .home-character-panel__choices { display: flex; gap: 8px; }
.home-character-panel .home-character-panel__choice { min-height: 44px; padding: 8px 16px; border: 1px solid var(--pf-frame); border-radius: 8px; background: var(--pf-surface); color: var(--pf-outline); font-size: 14px; }
.home-character-panel .home-character-panel__choice[data-selected="true"] { background: var(--pf-primary); color: var(--pf-highlight); }

/* A conversation shares one visual area; the reader controls when the reply appears. */
.home-game-canvas .home-speech[hidden] { display: none; }
.home-game-canvas .home-speech[data-home-speech-sequenced="true"] { padding-right: calc(52 * var(--control-px)); }
.home-speech__step { position: absolute; right: calc(4 * var(--control-px)); bottom: calc(4 * var(--control-px)); width: calc(44 * var(--control-px)); height: calc(44 * var(--control-px)); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--pf-primary); font-size: calc(24 * var(--control-px)); cursor: pointer; pointer-events: auto; line-height: 1; }
.home-speech__step:focus-visible { outline: calc(2 * var(--control-px)) solid var(--pf-primary); outline-offset: calc(-3 * var(--control-px)); }

.home-game-canvas [data-home-tool-folded="true"] { display: none; }
.home-tools-menu-toggle {
  padding: 0; border-radius: 50%;
  color: var(--pf-primary); line-height: 1; pointer-events: auto;
}
[data-home-tool-ordered="true"] {
  --home-tool-display-left: var(--home-tool-order-left); --home-tool-display-top: var(--home-tool-order-top);
  --home-tool-display-right: var(--home-tool-order-right); --home-tool-display-bottom: var(--home-tool-order-bottom);
  --home-tool-display-transform: var(--home-tool-order-transform);
}
.home-tools-menu { position: absolute; z-index: 85; inset: 20% 4% auto; display: grid; gap: 8px; padding: 12px; max-height: 65%; overflow: auto; box-sizing: border-box; background: var(--pf-surface); color: var(--pf-outline); border: 2px solid var(--pf-frame); border-radius: 12px; box-shadow: 0 8px 24px #172c2830; }
.home-tools-menu[hidden] { display: none; }
.home-tools-menu__header { display: flex; align-items: center; justify-content: space-between; font-size: 18px; color: var(--pf-primary); }
.home-tools-menu__header button { width: 44px; height: 44px; padding: 0; font-size: 24px; color: var(--pf-primary); background: transparent; border: 0; box-shadow: none; }
.home-tools-menu__action { min-height: 48px; padding: 10px 12px; text-align: left; font-size: 16px; line-height: 1.5; color: var(--pf-primary); background: var(--pf-primary-soft); border: 1px solid var(--pf-frame); border-radius: 8px; box-shadow: none; }

/* Approved initial portrait presentation; authored calibration keeps its prior baseline. */
[data-ui-initial-presentation="reference-v1"] .home-top-hud .home-strength-points { left: 77%; top: 52%; }
[data-ui-initial-presentation="reference-v1"] .home-game-canvas--pop-fantasy-v2 { --pop-fantasy-font-number: "Kaisei Tokumin", Georgia, serif; }
[data-ui-initial-presentation="reference-v1"] .home-resource-pill__recover { margin-left: 0; }
[data-ui-initial-presentation="reference-v1"] .home-resource-pill__body { flex: 0 1 auto; }
[data-ui-initial-presentation="reference-v1"] .home-level-badge__value { font-size: max(var(--canvas-min-font-size, var(--screen-min-font-size)), 6.2cqw); }
[data-ui-initial-presentation="reference-v1"] .home-notice-banner { left: 6.5%; bottom: max(12.5%, calc(var(--home-nav-clearance, 0px) / var(--canvas-display-ratio, 1))); width: 45%; }
[data-ui-initial-presentation="reference-v1"] .home-notice-banner__slide { height: clamp(44px,calc(var(--screen-frame-inline) * .11),100px); }

[data-ui-initial-presentation="reference-v1"] :is(.home-level-badge__value, .home-resource-pill__value, .home-strength-points__value) { font-weight: 700; }
[data-ui-initial-presentation="reference-v1"] .home-game-canvas--pop-fantasy-v2 :is(.story-slot-button, .battle-slot-button) { --entry-label-scale: 1.25; }

/* Frame and lettering have separate insets in the approved header. */
[data-ui-initial-presentation="reference-v1"] .home-level-badge :is(.home-level-badge__caption, .home-level-badge__value) {
  translate: 0 calc(var(--home-part-height, 136px) * .075);
}
[data-ui-initial-presentation="reference-v1"] .home-game-canvas--pop-fantasy-v2 .home-resource-pill__value {
  font-size: min(calc(var(--home-part-width, 398px) * .09), calc(var(--home-part-height, 54px) * .666667));
}

/* Scale the menu mark with its button, independent of font metrics. */
.home-tools-menu-toggle > .home-tools-menu-glyph { display: grid; place-items: center; width: 56%; height: 56%; }
.home-tools-menu-glyph > svg { display: block; width: 100%; height: 100%; }

/* The detail view is an illustration first, with the information below it. */
.formation-screen .formation-bench { padding: 10px; }
.formation-screen .formation-bench-list { padding: 2px; }
:is(.formation-screen, .sortie-screen) .formation-slot-card {
  border-radius: 7px;
  background: var(--pf-surface);
  overflow: visible;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card::after {
  inset: 0;
  background: none;
  border: 2px solid var(--pf-frame);
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px var(--pf-highlight);
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__art {
  border-radius: 7px 7px 0 0;
  background: var(--pf-surface-raised);
  box-shadow: none;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card--selected .formation-slot-card__art { box-shadow: none; }
:is(.formation-screen, .sortie-screen) .formation-slot-card--drop-target .formation-slot-card__art {
  box-shadow: inset 0 0 0 3px var(--pf-primary);
}
.formation-screen .formation-bench-card--selected { outline: none; }
.formation-screen .formation-actions { padding-bottom: 3px; }
:is(.formation-screen, .sortie-screen) .formation-slot-card__leader { display: none; }

/* One approved lattice owns all rails. Content coordinates follow its empty
   apertures, so neighboring cards cannot double up their corner ornaments. */
:is(.formation-screen, .sortie-screen) .formation-slots {
  position: relative;
  aspect-ratio: 1310 / 1201;
  padding: 0;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/formation-unified-v1/panel-outlined.webp") center / 100% 100% no-repeat;
  isolation: isolate;
  overflow: visible;
}
:is(.formation-screen, .sortie-screen) .formation-slots > .formation-slot-frame {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/formation-unified-v1/panel-outlined.webp") center / 100% 100% no-repeat;
  mask: url("/assets/ui-kits/pop-fantasy-v2/screens/formation-unified-v1/rail-mask.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}
:is(.formation-screen, .sortie-screen) .formation-slots .formation-slot-list {
  position: absolute;
  container-type: inline-size;
  z-index: 0;
  isolation: isolate;
  inset: 4.662781% 4.351145% 3.413822% 3.969466%;
  grid-template-columns: minmax(0,245fr) minmax(0,236fr) minmax(0,238fr) minmax(0,235fr) minmax(0,247fr);
  gap: 0;
  overflow: visible;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card {
  grid-template-rows: minmax(0,718fr) minmax(0,239fr) minmax(0,147fr);
  gap: 0;
  min-height: 0;
  background: transparent;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card::after { content: none; }
:is(.formation-screen, .sortie-screen) :is(.formation-slot-card__art, .formation-slot-card__equipment--art, .formation-slot-card__stats) {
  position: relative;
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-sizing: border-box;
  border: 0;
  background-clip: border-box;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__art { background-origin: border-box; }
:is(.formation-screen, .sortie-screen) .formation-slot-card__attribute.attribute-card-icon__badge { bottom: 3%; right: 4%; }
:is(.formation-screen, .sortie-screen) .formation-slot-card__rarity { top: 1%; }
:is(.formation-screen, .sortie-screen) :is(.formation-slot-card__art, .formation-slot-card__equipment--art, .formation-slot-card__stats)::after {
  content: none;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__equipment--art { background: transparent; }
:is(.formation-screen, .sortie-screen) .formation-slot-card__equipment-art--empty { background: transparent; }
:is(.formation-screen, .sortie-screen) .formation-slot-card__stats { background: transparent; padding: 0 2px; gap: 0; grid-template-rows: repeat(2, minmax(0, 1fr)); }
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat { line-height: 1; }
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat { justify-content: flex-start; text-align: left; }
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat-value { flex: 1; text-align: left; }
.formation-detail-screen .formation-detail-stat-grid dd { justify-self: stretch; text-align: left; }
:is(.formation-screen, .sortie-screen) .formation-slot-card__unassign { color: var(--pf-frame); border-radius: 0; box-shadow: none; }
@container (max-width: 620px) {
  :is(.formation-screen, .sortie-screen) .formation-slot-card__stat {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  :is(.formation-screen, .sortie-screen) .formation-slot-card__stat-icon { width: 12px; height: 12px; flex-basis: 12px; }
  :is(.formation-screen, .sortie-screen) .formation-slot-card__stat-value {
    font-size: 12px;
  }
}

.formation-detail-screen > .formation-detail-shell {
  --screen-shell-padding: calc(var(--screen-frame-inline) * .035);
}
.formation-detail-screen .formation-detail-card__art { --detail-frame-width: clamp(4px, .8cqw, 6px); width: 100%; height: 65cqw; margin-block: var(--detail-frame-width); }
.formation-detail-screen .formation-detail-card__art .attribute-card-icon { width: auto; max-width: 100%; height: 100%; aspect-ratio: 1; margin-inline: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.formation-detail-screen .formation-detail-card__art .attribute-card-icon::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--detail-frame-width));
  z-index: 2;
  box-sizing: border-box;
  border: var(--detail-frame-width) solid transparent;
  border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
  border-radius: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}
.formation-detail-screen .formation-detail-card__art .attribute-card-icon__art { background: transparent; }
.formation-detail-screen .formation-detail-card__art .attribute-card-icon__image { object-fit: contain; object-position: center; }
.formation-detail-screen .formation-detail-card__name-text { font-size: clamp(18px,4cqw,30px); }
.formation-detail-screen .formation-detail-tab { background: var(--pf-surface); border: 1px solid var(--pf-frame); border-radius: var(--pf-radius); padding: 10px 6px; font-size: 13px; }
.formation-detail-screen .formation-detail-tab[aria-selected='true'] { border-color: var(--pf-primary); background: var(--pf-primary-soft); color: var(--pf-primary); box-shadow: inset 0 -3px 0 var(--pf-primary); }
.formation-detail-screen .formation-detail-tab-panel {
  border: 1px solid var(--pf-frame); border-image: none; border-radius: var(--pf-radius);
  padding: 16px; background: var(--pf-surface);
  --ui-scrollbar-size: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--pf-primary) var(--pf-surface);
}
.formation-detail-screen .formation-detail-tab-panel::-webkit-scrollbar-track { background: var(--pf-surface); }
.formation-detail-screen .formation-detail-tab-panel::-webkit-scrollbar-thumb { background: var(--pf-primary); border-radius: 4px; }

/* Reuse the home panel's corner ornaments at a constant edge width.
   Names and tab contents stay live text; the illustration keeps its bounds. */
.formation-detail-screen .formation-detail-content :is(.formation-detail-card__name, .formation-detail-tab, .formation-detail-tab-panel, .formation-detail-back) {
  border: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1)) solid transparent;
  border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
  border-radius: 8px;
  background: var(--pf-surface);
  background-clip: border-box;
  box-shadow: none;
  color: var(--pf-outline);
}
.formation-detail-screen .formation-detail-card__name {
  padding: 1.2cqw 2cqw;
}
.formation-detail-screen .formation-detail-tab {
  padding: 5px 2px;
  font-weight: 600;
}
.formation-detail-screen .formation-detail-content .formation-detail-tab[aria-selected='true'] {
  border-color: transparent;
  background: var(--pf-primary);
  background-clip: border-box;
  color: var(--world-on-primary, var(--pf-highlight));
  box-shadow: none;
}
.formation-detail-screen .formation-detail-tab-panel {
  padding: 10px;
}
.formation-detail-screen .formation-detail-content .formation-detail-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: max(112px, 25cqw);
  padding: 0 4px;
}
.formation-detail-back > svg { width: 20px; height: 20px; flex: 0 0 auto; }
.formation-detail-screen .formation-detail-content .formation-detail-artwork-open {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 50%;
  background: var(--theme-tool-frame, url("/assets/ui-kits/pop-fantasy-v2/home/illustrated-v1/tool-frame.webp")) center / 100% 100% no-repeat;
  background-color: var(--pf-surface);
  box-shadow: none;
  color: var(--pf-primary);
}
.formation-detail-artwork-open > svg { width: 100%; height: 100%; }
/* The collection flag fills its square canvas; contain was narrowing this copy. */
.formation-detail-card__name .pop-fantasy-rarity-flag__image { object-fit: fill; }
.formation-detail-screen .formation-detail-tab-panel__text {
  font-weight: 500;
  line-height: 1.7;
}
.formation-detail-screen .formation-detail-stat-grid { gap: 8px 16px; font-size: 16px; }
.formation-detail-screen .formation-detail-stat-grid dt { color: var(--pf-muted); }
.formation-detail-screen .formation-detail-skill__kind { color: var(--pf-primary); }
.formation-detail-screen .formation-detail-skill__effect { font-size: 14px; line-height: 1.7; }
.formation-detail-screen .formation-detail-skill__leader { background: var(--pf-primary-soft); color: var(--pf-primary); }
.formation-detail-screen .formation-detail-shell[data-ui-orientation='landscape'] .formation-detail-content { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto minmax(0,1fr); gap: 12px; }
.formation-detail-screen .formation-detail-shell[data-ui-orientation='landscape'] .formation-detail-back { grid-column: 1 / -1; }
.formation-detail-screen .formation-detail-shell[data-ui-orientation='landscape'] .formation-detail-card { grid-column: 1; grid-row: 2 / 4; grid-template-rows: minmax(0,1fr) auto; }
.formation-detail-screen .formation-detail-shell[data-ui-orientation='landscape'] .formation-detail-card__art { height: 100%; min-height: 0; }
.formation-detail-screen .formation-detail-shell[data-ui-orientation='landscape'] .formation-detail-tabs { grid-column: 2; grid-row: 2; }
.formation-detail-screen .formation-detail-shell[data-ui-orientation='landscape'] .formation-detail-tab-panel { grid-column: 2; grid-row: 3; }

/* Separate sections clearly while keeping labels close to their content. */
.formation-detail-screen .formation-detail-tab-panel {
  --detail-section-gap: clamp(20px, 4cqw, 28px);
  --detail-content-gap: clamp(8px, 1.8cqw, 12px);
}
.formation-detail-screen .formation-detail-tab-panel > .formation-detail-tab-panel__title {
  margin: 0 0 var(--detail-content-gap);
}
.formation-detail-screen .formation-detail-tab-panel > .formation-detail-tab-panel__title:not(:first-child) {
  margin-top: var(--detail-section-gap);
  padding-top: var(--detail-content-gap);
  border-top: 1px solid color-mix(in srgb, var(--pf-frame) 65%, transparent);
}
.formation-detail-screen .formation-detail-stat-grid + .formation-detail-tab-panel__text {
  margin-top: 16px;
}
.formation-detail-screen .formation-detail-tab-panel > .formation-detail-tab-panel__text {
  margin-bottom: 0;
  line-height: 1.7;
}
.formation-detail-screen .formation-detail-story-list {
  margin-top: var(--detail-section-gap);
  padding-top: var(--detail-content-gap);
  border-top: 1px solid color-mix(in srgb, var(--pf-frame) 65%, transparent);
  gap: var(--detail-content-gap);
}
.formation-detail-screen .formation-detail-skill {
  gap: 8px;
  padding: 14px 0;
}
.formation-detail-screen .formation-detail-tab-panel__title + .formation-detail-skill {
  padding-top: 0;
  border-top: 0;
}
.formation-detail-screen .formation-detail-voice-list { gap: 10px; }
.formation-detail-screen .formation-detail-voice-item { padding: 10px 12px; gap: 6px; }

/* Prose stays lighter and slightly smaller than headings and stat values. */
.formation-detail-screen .formation-detail-tab-panel :is(.formation-detail-tab-panel__text, .formation-detail-voice-text, .formation-detail-story-empty) {
  font-size: clamp(12px, .9em, 18px);
  font-weight: 500;
}
.formation-detail-screen :is(.formation-detail-skill__text, .formation-detail-skill__effect) {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
}

.formation-detail-screen .formation-detail-tab-panel :is(.formation-detail-tab-panel__text, .formation-detail-story-empty) { line-height: 1.6; }

/* The leader's approved calibration is the default for every party column.
   cqw refers to the party card, not the flag's smaller text container. */
:is(.formation-screen, .sortie-screen) .formation-slot-card {
  container-type: inline-size;
  /* All numbers use the leader's 245/1201 share of the list width.
     The artwork's slightly unequal columns must not vary the type size. */
  font-size: calc(100cqw * 245 / 1201 * .1287095154944805);
}
:is(.formation-screen, .sortie-screen) .formation-slot-card .pop-fantasy-rarity-flag { container-type: normal; }
:is(.formation-screen, .sortie-screen) .formation-slot-card .pop-fantasy-rarity-flag__image {
  width: 33.99659855413466cqw; height: 33.99659855413466cqw;
  translate: 0% -8.856297960256086%;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card .pop-fantasy-rarity-flag__word {
  font-size: calc(100cqw * .10879476708386282);
  translate: 4.4021253461171055% -11.339938815035554%;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card .attribute-card-icon__jewel-image {
  width: 33.998364713707135cqw; height: 33.998364713707135cqw;
  translate: 9.099220598563718% 17.09984986352732%;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat:nth-child(1) .formation-slot-card__stat-icon {
  width: 17.158694542287511cqw !important; height: 17.158694542287511cqw !important;
  translate: 111.66441465878016% 24.576391133023687%; scale: 1.808717319847909;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat:nth-child(2) .formation-slot-card__stat-icon {
  width: 12.035700130940616cqw !important; height: 16.051613680033314cqw !important;
  translate: 117.60482187666734% -29.71637151822773%; scale: 1.5308539902383151;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat-value > [data-calibration-text] { display: inline-block; }
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat-value {
  position: absolute; left: 36.4%; right: 2%; text-align: left;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat:nth-child(1) .formation-slot-card__stat-value { top: 19%; }
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat:nth-child(2) .formation-slot-card__stat-value { top: 58%; }
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat:nth-child(1) .formation-slot-card__stat-value > [data-calibration-text] {
  font-size: 1em; translate: none;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat:nth-child(2) .formation-slot-card__stat-value > [data-calibration-text] {
  font-size: calc(1em * .12040516337475606 * 1.0868882158076403 / .1287095154944805); translate: none;
}

/* Detail back controls use the same compact round rim as other icon actions. */
.formation-detail-screen .formation-detail-content .formation-detail-back,
.equipment-detail-screen .formation-detail-back {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: grid; place-items: center; padding: 10px;
  border: 0; border-image: none; border-radius: 50%; box-shadow: none;
  background: var(--pf-surface) var(--theme-tool-frame, url("/assets/ui-kits/pop-fantasy-v2/home/illustrated-v1/tool-frame.webp")) center / 100% 100% no-repeat;
}
.memory-material { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.memory-material__icon {
  display: inline-block; width: 44px; height: 44px; flex: 0 0 44px;
  background-image: url("/assets/ui-kits/pop-fantasy-v2/materials/memory-v1/atlas.webp");
  background-size: 400% 200%; background-repeat: no-repeat;
}
.memory-material__count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.formation-detail-action:has(.memory-material) { display: inline-flex; align-items: center; gap: 4px; }
.formation-detail-action .memory-material__icon { width: 32px; height: 32px; flex-basis: 32px; }
.formation-detail-screen .formation-detail-tab-panel .card-detail-bond__caption { font-size: 12px; }

/* A portrait game can become narrower than a phone after device rotation. */
@container (max-width: 280px) {
  .formation-detail-screen .formation-detail-content {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .formation-detail-screen .formation-detail-content > * { flex: 0 0 auto; }
  .formation-detail-screen .formation-detail-back { align-self: flex-start; }
  .formation-detail-screen .formation-detail-tabs {
    display: flex;
    min-width: 0;
    overflow-x: auto;
  }
  .formation-detail-screen .formation-detail-tabs > .formation-detail-tab {
    flex: 0 0 96px;
    white-space: nowrap;
    border-width: 6px;
  }
  .formation-detail-screen .formation-detail-tab-panel { min-height: 180px; overflow: visible; }
}

.growth-v1-panel { display: grid; gap: 16px; font-size: 14px; line-height: 1.6; }
.growth-v1-section { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--pf-frame); }
.growth-v1-section h3 { margin: 0; font-size: 16px; color: var(--pf-primary); }
.growth-v1-section p { margin: 0; }
.growth-v1-field { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 8px; align-items: center; }
.growth-v1-field :is(input,select) { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; font: inherit; border: 1px solid var(--pf-frame); border-radius: 6px; color: var(--pf-outline); background: var(--pf-surface); }
.growth-v1-preview { color: var(--pf-primary); }
.growth-v1-reason { font-size: 12px; color: var(--pf-muted); }
.growth-v1-message { color: var(--pf-outline); }
.growth-migration-preview { display: grid; gap: 8px; }
.growth-v1-section .formation-detail-action { justify-self: start; min-height: 44px; }

/* Keep formation controls in the same coordinate scale as the game frame. */
:is(.formation-screen, .sortie-screen) .screen-shell__body {
  --formation-px: calc(var(--screen-frame-inline) / 375);
}
.formation-screen .formation-actions {
  padding-bottom: calc(3 * var(--formation-px));
}
.formation-screen .screen-shell__body .formation-actions .screen-action {
  --control-px: var(--formation-px);
  width: calc(74 * var(--formation-px));
  min-width: 0;
  min-height: calc(44 * var(--formation-px));
  padding-inline: calc(8 * var(--formation-px));
  font-size: calc(14 * var(--formation-px));
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__unassign {
  min-width: 0;
  min-height: 0;
  width: calc(44 * var(--formation-px));
  height: calc(44 * var(--formation-px));
  padding: calc(10 * var(--formation-px));
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__unassign > svg {
  width: calc(16 * var(--formation-px));
  height: calc(16 * var(--formation-px));
  max-width: 100%;
  max-height: 100%;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__unassign::after {
  width: calc(20 * var(--formation-px));
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__stats {
  padding-inline: calc(2 * var(--formation-px));
  font-size: inherit;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat {
  font-size: inherit;
  min-width: 0;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat-icon {
  flex: 0 0 auto;
  max-width: none;
  max-height: none;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat-value {
  line-height: 1;
  font-size: inherit;
}
.formation-screen .collection-filter-dock {
  bottom: 1.4815cqw;
}
:is(.formation-screen, .collection-screen) .screen-shell__body .collection-filter-fab {
  width: calc(44 * var(--screen-frame-inline) / 375);
  height: calc(44 * var(--screen-frame-inline) / 375);
  min-height: 0;
  padding: calc(10 * var(--screen-frame-inline) / 375);
  border-width: calc(2 * var(--screen-frame-inline) / 375);
}
:is(.formation-screen, .collection-screen) .screen-shell__body .collection-filter-fab__icon {
  width: calc(22 * var(--screen-frame-inline) / 375);
  height: calc(22 * var(--screen-frame-inline) / 375);
}

/* Compact saved-party tabs return the former action row's space to the bench. */
.formation-screen .formation-presets { display: flex; gap: .8cqw; }
/* Start the tabs at the party frame's visible left edge, not the panel box. */
.formation-screen .formation-presets:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { padding-inline-start: calc(11 * var(--formation-px)); }
/* Sized in formation px so the tabs scale with the screen like the slots do. */
.formation-screen .formation-preset {
  min-width: 44px; min-height: 44px; padding: 6px 12px;
  border: 1px solid var(--pf-frame); border-radius: 1.5cqw;
  background: var(--pf-surface); color: var(--pf-primary);
  font-size: 18px; line-height: 1.3;
}
/* Portrait: two thirds of the former 44px tabs (review 2026-10-02). */
.formation-screen .formation-preset:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) {
  min-width: calc(30 * var(--formation-px)); min-height: calc(30 * var(--formation-px));
  padding: calc(4 * var(--formation-px)) calc(8 * var(--formation-px));
  border: max(1px, calc(1 * var(--formation-px))) solid var(--pf-frame); border-radius: 1cqw;
  font-size: calc(12 * var(--formation-px));
}
.formation-screen .formation-preset[aria-pressed="true"] {
  background: var(--pf-primary); color: var(--pf-highlight);
}

/* Fixed stat labels are lettering assets, independent of old icon calibration. */
.formation-slot-card__stat-word {
  display: block; width: 30%; height: auto; object-fit: contain; flex: 0 0 30%;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat-word {
  position: absolute; left: 6%; width: 30%; height: 25%;
  object-fit: contain; translate: none; scale: none;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat:nth-child(1) .formation-slot-card__stat-word { top: 16%; }
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat:nth-child(2) .formation-slot-card__stat-word { top: 55%; }
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat-value { left: 42%; }
.formation-preset__label {
  --pf-label-height: calc(13 * var(--formation-px));
  vertical-align: middle;
}
.formation-preset[aria-pressed="true"] .formation-preset__label { --pf-label-position: 100%; }

/* Left party column calibration approved on 2026-09-21, shared by all slots. */
:is(.formation-screen, .sortie-screen) .formation-slot-card__unassign {
  translate: 17.848194243270893% -15.1023182058446%;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat:nth-child(2) .formation-slot-card__stat-word {
  width: 29.98797469689685cqw; height: 15.000649566234103cqw;
  translate: 3.4194808822494367% 3.4194808822494367%; scale: 1.0683874148514318;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat:is(:nth-child(1), :nth-child(2)) .formation-slot-card__stat-value > [data-calibration-text] {
  font-size: calc(100cqw * .1287118268800501); scale: 1.3131925002223568;
  /* Cancel the scale's centre offset so digit count never shifts the left edge. */
  translate: calc(15.65962501111784% + .17265em) -18.8634005968692%;
}
:is(.formation-screen, .sortie-screen) .formation-slot-card__stat:nth-child(2) .formation-slot-card__stat-value > [data-calibration-text] {
  font-size: calc(100cqw * .1287118268800501);
  translate: calc(15.65962501111784% + .17265em) -1.6019325090083285%;
}

/* The standard view must carry the same numeral styling as the approved view. */
[data-ui-initial-presentation="reference-v1"][data-ui-theme-kit="fantasy"] :is(.formation-screen, .sortie-screen) .formation-slot-card__stat-value {
  font-family: "Kaisei Tokumin", Georgia, serif;
  font-weight: 700;
}
[data-ui-initial-presentation="reference-v1"] .formation-screen .formation-presets { gap: 1.8cqw; }

/* Shared gold frames keep product art and prices easy to scan. */
.shop-screen > .screen-shell__body {
  /* A definite height makes Safari subtract the HUD and navigation padding
     before sizing the scrollable product list. */
  height: var(--screen-frame-block);
  --screen-shell-padding: calc(var(--screen-frame-inline) * .045);
  --screen-shell-bottom-padding: calc(var(--screen-frame-inline) * .22);
  background: var(--pf-surface);
}
.shop-screen .screen-shell__content { grid-template-rows: auto minmax(0, 1fr); gap: 10px; overflow: hidden; }
.shop-screen .screen-shell__content .shop-product-list .shop-product,
.shop-screen .shop-product-list .shop-product .shop-product__buy {
  border: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1)) solid transparent;
  border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
  border-radius: 8px; background: var(--pf-surface); box-shadow: none;
}
.shop-screen .shop-balance { padding: 4px 8px; gap: 4px; }
.shop-screen .shop-balance__note { font-size: 11px; line-height: 1.5; }
.shop-screen .shop-product-list {
  background: none; border: 0; box-shadow: none; padding: 0 4px 8px 0; gap: 10px;
  min-height: 0; overflow-y: auto; overflow-x: hidden; align-content: start; grid-auto-rows: max-content;
}
.shop-screen .shop-product {
  padding: 6px; gap: 4px 10px; min-height: 132px; grid-template-columns: 30% minmax(0,1fr);
}
.shop-screen .shop-product__icon {
  width: 100%; height: auto; aspect-ratio: 1; grid-row: 1 / 3;
  object-fit: contain; background: transparent; border: 0;
}
.shop-screen .shop-product-list .shop-product .shop-product__buy {
  grid-column: 2; justify-self: end; min-width: 96px; min-height: 48px; padding: 0 6px;
  background: var(--pf-accent); color: var(--pf-highlight); font-size: 14px; line-height: 1.2;
}
.shop-screen .shop-product__name { font-size: clamp(14px, 3.2cqw, 18px); color: var(--pf-outline); }
.shop-screen .shop-product__jewels { font-size: 12px; line-height: 1.5; color: var(--pf-muted); }

/* Landscape offers a horizontal shelf rather than full-width tall rows. */
[data-ui-orientation="landscape"] .shop-screen .screen-shell__body { --screen-shell-padding: 12px; }
[data-ui-orientation="landscape"] .shop-screen .screen-shell__content { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); gap: 8px; }
[data-ui-orientation="landscape"] .shop-screen .shop-balance__note { grid-column: 1 / -1; }
[data-ui-orientation="landscape"] .shop-screen .shop-product-list { grid-column: 1 / -1; display: flex; overflow-x: auto; overflow-y: auto; align-items: stretch; gap: 10px; padding: 0 0 6px; }
[data-ui-orientation="landscape"] .shop-screen .shop-product { flex: 0 0 clamp(150px,24%,260px); box-sizing: border-box; min-height: 0; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(40px,1fr) auto auto; justify-items: center; padding: 4px; text-align: center; }
[data-ui-orientation="landscape"] .shop-screen .shop-product__icon { grid-row: auto; width: min(100%,100px); height: 100%; min-height: 40px; max-height: 130px; aspect-ratio: auto; }
[data-ui-orientation="landscape"] .shop-screen .shop-product-list .shop-product .shop-product__buy { grid-column: 1; justify-self: stretch; min-height: 44px; }
[data-ui-orientation="landscape"] .shop-screen .shop-message, [data-ui-orientation="landscape"] .shop-screen .shop-empty { flex: 0 0 180px; align-self: center; font-size: 14px; }
/* Paint the product frame without spending its full slice width on padding. */
[data-ui-orientation="landscape"] .shop-screen .screen-shell__content .shop-product-list .shop-product { position: relative; isolation: isolate; border: 0; padding: 10px; height: 100%; min-height: 160px; grid-template-rows: minmax(28px,1fr) auto auto; }
[data-ui-orientation="landscape"] .shop-screen .shop-product::before { content: ""; position: absolute; inset: 0; border: calc(var(--pf-frame-thickness) / var(--calibration-frame-scale,1)) solid transparent; border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch); pointer-events: none; z-index: -1; }
@media (max-height: 360px) {
  [data-ui-orientation="landscape"] .shop-screen .screen-shell__content .shop-product-list .shop-product { min-height: 128px; padding: 4px; gap: 2px; grid-template-rows: minmax(20px,1fr) auto auto; }
  [data-ui-orientation="landscape"] .shop-screen .shop-product__icon { min-height: 20px; max-height: 30px; }
  [data-ui-orientation="landscape"] .shop-screen .shop-product__name { font-size: 14px; line-height: 1.2; }
  [data-ui-orientation="landscape"] .shop-screen .shop-product__jewels { font-size: 11px; line-height: 1.2; }
}

.game-disclosure {
  min-width: 0;
  color: var(--pf-outline);
  border-block: 1px solid var(--pf-frame);
  background: var(--pf-surface);
  border-radius: var(--pf-radius);
}
.game-disclosure__summary {
  padding: 12px 14px;
  min-height: 44px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.game-disclosure__summary:focus-visible { outline: 3px solid var(--pf-primary); outline-offset: -3px; }
.game-disclosure__content { padding: 0 14px 14px; overflow-wrap: anywhere; }
.home-profile-panel > .game-disclosure { flex: none; }
.home-profile-panel .game-disclosure__content > * + * { margin-top: 12px; }
.home-profile-panel .game-disclosure .home-profile-panel-section { padding: 0; border: 0; background: none; }
.gacha-details { position: relative; z-index: 6; flex: none; }
.gacha-utilities { display: flex; align-items: start; gap: 8px; }
.gacha-utilities .gacha-details { flex: 1; }
.gacha-utilities .gacha-history-dock { flex: none; }
.gacha-balance { margin: 0 0 6px; text-align: center; color: var(--pf-outline); font-size: 13px; }
.gacha-details .gacha-hero-stage__lead { color: var(--pf-outline); font-size: 13px; }
.gacha-details[open] .game-disclosure__content { max-height: 28dvh; overflow: auto; }
.gacha-details .gacha-hero-stage__meta { position: static; display: flex; flex-wrap: wrap; }
.battle-result-content > .game-disclosure { width: 100%; box-sizing: border-box; }
.formation-detail-card__art { position: relative; }
.formation-detail-artwork-open { position: absolute; top: 8px; right: 8px; min-height: 44px; padding: 8px 12px; font-size: 14px; z-index: 2; }

.artwork-viewer {
  position: fixed;
  inset: auto;
  left: calc((100vw - var(--screen-frame-inline)) / 2);
  top: calc((100dvh - var(--screen-frame-block)) / 2);
  width: var(--screen-frame-inline);
  height: var(--screen-frame-block);
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  margin: 0;
  padding: 64px 16px 16px;
  border: 0;
  background: var(--pf-outline);
  color: var(--pf-surface);
  border-radius: var(--screen-shell-radius);
  overflow: hidden;
}
.artwork-viewer::backdrop { background: transparent; }
.artwork-viewer__image { display: block; width: 100%; height: 100%; object-fit: contain; }
.artwork-viewer__image[hidden] { display: none; }
.artwork-viewer__close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  min-width: 80px;
  min-height: 44px;
  border: 1px solid var(--pf-frame);
  border-radius: var(--pf-radius);
  color: var(--pf-outline);
  background: var(--pf-surface);
  font: inherit;
  cursor: pointer;
}
.artwork-viewer__close:focus-visible { outline: 3px solid var(--pf-accent); outline-offset: 3px; }

/* One real-pixel scale for controls, including the scaled home canvas. */
:root { --control-px: 1px; }
.home-game-canvas { --control-px: calc(1px / var(--logical-scale, 1)); }

/* Navs use the same saved geometry in both renderers. Their standard frame
   and dividers are owned by bottom-nav-skin.css. */
.home-bottom-nav, .home-bottom-nav-item { min-height: 0; }

[data-ui-skin="standard"][data-ui-role] {
  box-sizing: border-box;
  background-repeat: no-repeat;
  color: var(--pf-outline);
}

/* Controls have a raised face. Reading surfaces do not. */
[data-ui-skin="standard"]:is([data-ui-role="primary-action"],[data-ui-role="secondary-action"]) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: calc(1 * var(--control-px)) solid var(--pf-shadow);
  border-bottom-width: calc(3 * var(--control-px));
  border-radius: calc(10 * var(--control-px));
  background-color: var(--pf-accent);
  color: var(--pf-highlight);
  box-shadow: inset 0 calc(1 * var(--control-px)) 0 var(--pf-highlight);
  cursor: pointer;
}
[data-ui-skin="standard"][data-ui-role="secondary-action"] { background-color: var(--pf-primary); }
[data-ui-skin="standard"]:is([data-ui-role="primary-action"],[data-ui-role="secondary-action"]) .pf-label {
  --pf-label-height: calc(19 * var(--control-px) * var(--entry-label-scale, 1));
  --pf-label-color: var(--pf-highlight);
  --pf-label-position: 100%;
  position: absolute;
  left: 40%; right: 8%; top: 50%; bottom: auto;
  max-width: 52%; margin: auto; transform: translateY(-50%);
}
[data-ui-skin="standard"]:is([data-ui-role="primary-action"],[data-ui-role="secondary-action"]) :is(.home-editable-part__icon-image,.battle-slot-button-icon,.story-slot-button-icon) {
  position: absolute;
  left: var(--entry-icon-left, 8%); top: var(--entry-icon-top, 20%);
  width: calc(24% * var(--entry-icon-scale, 1));
  height: calc(60% * var(--entry-icon-scale, 1));
  color: var(--pf-highlight);
  object-fit: contain;
}

/* A toolbar button is a small control, not a miniature ornate panel. */
[data-ui-skin="standard"][data-ui-role="tool"] {
  padding: 0;
  border: calc(1 * var(--control-px)) solid var(--pf-frame);
  border-bottom-width: calc(2 * var(--control-px));
  border-radius: 50%;
  background-color: var(--pf-surface);
  box-shadow: none;
}
[data-ui-skin="standard"][data-ui-role="tool"] :is(.home-editable-part__icon-image,.home-ui-glyph) {
  position: absolute; left: 22%; top: 22%; width: 56%; height: 56%;
}
[data-ui-skin="standard"][data-ui-role="status-panel"] {
  border: 0;
  border-bottom: calc(1 * var(--control-px)) solid var(--pf-frame);
  border-radius: calc(10 * var(--control-px));
  background-color: var(--pf-surface);
  box-shadow: none;
}

/* Item contents and selection stay shared with the fallback icon/label UI. */
[data-ui-skin="standard"][data-ui-role="navigation-item"] {
  border: 0;
  border-radius: calc(10 * var(--control-px));
  background-color: transparent;
  box-shadow: none;
  padding: 0;
}
[data-ui-skin="standard"][data-ui-role="navigation-item"] { isolation: isolate; }
[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::after {
  position: absolute; inset: calc(3 * var(--control-px)) calc(7 * var(--control-px));
  z-index: -1; border-radius: calc(8 * var(--control-px));
  background: url("/assets/ui-kits/pop-fantasy-v2/system-v2/selection-bar.webp") center bottom / 70% calc(3 * var(--control-px)) no-repeat;
  content: "";
}
[data-ui-skin="standard"][data-ui-role="navigation-item"]::before { content: none; }
[data-ui-skin="standard"][data-ui-role="navigation-item"] :is(.home-editable-part__icon-image,.home-bottom-nav-icon) {
  position: absolute;
  top: var(--nav-icon-top, 10%);
  left: 50%; transform: translateX(-50%);
  width: calc(28 * var(--control-px) * var(--nav-icon-scale, 1));
  height: calc(28 * var(--control-px) * var(--nav-icon-scale, 1));
  max-width: 70%;
  object-fit: contain;
}
[data-ui-skin="standard"][data-ui-role="navigation-item"] .pf-label {
  --pf-label-height: calc(13 * var(--control-px) * var(--nav-label-scale, 1));
  position: absolute;
  left: 6%; right: 6%; bottom: 8%; top: auto;
  margin: auto; max-width: 88%;
}

[data-ui-skin="standard"]:is(button,[role="button"]):focus-visible {
  outline: calc(2 * var(--control-px)) solid var(--pf-primary);
  outline-offset: calc(3 * var(--control-px));
}
[data-ui-skin="standard"]:is([data-ui-role="primary-action"],[data-ui-role="secondary-action"],[data-ui-role="tool"]):active:not(:disabled) {
  box-shadow: inset 0 calc(2 * var(--control-px)) 0 var(--pf-shadow);
  border-bottom-width: calc(1 * var(--control-px));
}

/* Secondary controls share one weight; display panels keep a quieter edge. */
:is(.pf-primary,.pf-secondary,.story-mode-tab,.formation-detail-tab,.screen-action):not(.game-screen-part--has-asset) {
  border-radius: 10px;
  border-width: 1px;
  min-height: 44px;
  line-height: 1.25;
}
.formation-detail-tabs { gap: 6px; }
.formation-detail-tab { font-size: 14px; padding: 8px 10px; }

/* HUD copy follows logical part dimensions, not a fixed device-pixel floor.
   At a 360px game width, 42/39 logical px are approximately 14/13px. */
.home-game-canvas--pop-fantasy-v2 .home-player-name-tag__name { font-size: min(calc(var(--home-part-width, 420px) * .1), calc(var(--home-part-height, 54px) * .7777778)); }
.home-game-canvas--pop-fantasy-v2 :is(.home-resource-pill__value, .home-resource-pill__recover, .home-strength-points__value) { font-size: min(calc(var(--home-part-width, 398px) * .098), calc(var(--home-part-height, 54px) * .7222222)); }
.home-game-canvas--pop-fantasy-v2 .home-exp-bar__label { font-size: calc(8 * var(--control-px)); }
.home-game-canvas--pop-fantasy-v2 .home-exp-bar__value { font-size: calc(9 * var(--control-px)); }

.home-game-canvas:has(> [data-ui-skin="standard"][data-ui-role="status-panel"]) :is(.home-player-name-tag,.home-exp-bar,.home-resource-pill) {
  border: 0; background: transparent; box-shadow: none;
}

[data-ui-role="navigation-item"], [data-ui-role="primary-action"], [data-ui-role="secondary-action"] { container-type: size; }
[data-ui-skin="standard"][data-ui-role="navigation-item"] .pf-label { --pf-label-height: calc(min(17cqw, 26cqh) * var(--nav-label-scale, 1)); }
[data-ui-skin="standard"][data-ui-role="navigation-item"] :is(.home-editable-part__icon-image,.home-bottom-nav-icon) { width: calc(min(38cqw, 52cqh) * var(--nav-icon-scale, 1)); height: calc(min(38cqw, 52cqh) * var(--nav-icon-scale, 1)); }
[data-ui-skin="standard"]:is([data-ui-role="primary-action"],[data-ui-role="secondary-action"]) .pf-label { --pf-label-height: calc(min(15cqw, 40cqh) * var(--entry-label-scale, 1)); }
[data-ui-role="navigation-item"] .home-bottom-nav-label--image { height: calc(min(17cqw, 26cqh) * var(--nav-label-scale, 1)); }
[data-ui-role="primary-action"] .battle-slot-button-label--image,
[data-ui-role="secondary-action"] .story-slot-button-label--image { height: calc(min(15cqw, 40cqh) * var(--entry-label-scale, 1)); }

[data-ui-skin="standard"]:is([data-ui-role="primary-action"],[data-ui-role="secondary-action"])
  :is(.battle-slot-button-label--image,.story-slot-button-label--image) {
  position: absolute;
  left: 40%; top: 50%;
  transform: translateY(-50%);
  width: auto; max-width: 52%;
  object-fit: contain;
}

/* Quiet inner rims replace illustrated leaves, gemstones and metallic glare.
   They occupy no layout space and never compete with user-supplied artwork. */
[data-ui-skin="standard"]:is([data-ui-role="status-panel"], [data-ui-role="tool"], [data-ui-role="primary-action"], [data-ui-role="secondary-action"])::before {
  content: "";
  display: block;
  position: absolute;
  inset: calc(3 * var(--control-px));
  z-index: 0;
  pointer-events: none;
  border: calc(2 * var(--control-px)) solid #b18a3d;
  box-shadow: inset 0 0 0 calc(1 * var(--control-px)) #fff0c5,
    0 0 0 calc(.5 * var(--control-px)) #806137;
  border-radius: calc(8 * var(--control-px));
}
[data-ui-skin="standard"][data-ui-role="tool"]::before {
  border-radius: 50%;
}
[data-ui-skin="standard"]:is([data-ui-role="primary-action"], [data-ui-role="secondary-action"])::before {
  border-color: #b18a3d;
  border-radius: calc(6 * var(--control-px));
}

/* Comment-panel vocabulary: small corner cuts and flat three-tone paint. */
:root {
  --rim-highlight: #e5ecc8;
  --rim-base: #426d4f;
  --rim-shadow: #294534;
}
[data-ui-skin="standard"][data-ui-role="primary-action"] {
  --rim-highlight: #ffe0a5;
  --rim-base: #ce7435;
  --rim-shadow: #894720;
}
[data-ui-skin="standard"]:is([data-ui-role="status-panel"], [data-ui-role="tool"]) {
  background-color: #f3f3e5;
  box-shadow: inset 0 calc(2 * var(--control-px)) 0 #fffbed,
    inset 0 calc(-3 * var(--control-px)) 0 #b7bd9e;
}
[data-ui-skin="standard"]:is([data-ui-role="primary-action"], [data-ui-role="secondary-action"]) {
  background-color: var(--rim-base);
  box-shadow: inset 0 calc(2 * var(--control-px)) 0 var(--rim-highlight),
    inset 0 calc(-3 * var(--control-px)) 0 var(--rim-shadow);
}
[data-ui-skin="standard"]:is([data-ui-role="status-panel"], [data-ui-role="primary-action"], [data-ui-role="secondary-action"])::before,
.home-game-canvas::after {
  --corner-step: calc(5 * var(--control-px));
  --corner-edge: calc(6 * var(--control-px));
  background:
    linear-gradient(135deg, var(--rim-highlight) 0 calc(1 * var(--control-px)), var(--rim-base) 0 var(--corner-step), var(--rim-shadow) 0 var(--corner-edge), transparent 0) top left,
    linear-gradient(225deg, var(--rim-highlight) 0 calc(1 * var(--control-px)), var(--rim-base) 0 var(--corner-step), var(--rim-shadow) 0 var(--corner-edge), transparent 0) top right,
    linear-gradient(45deg, var(--rim-highlight) 0 calc(1 * var(--control-px)), var(--rim-base) 0 var(--corner-step), var(--rim-shadow) 0 var(--corner-edge), transparent 0) bottom left,
    linear-gradient(315deg, var(--rim-highlight) 0 calc(1 * var(--control-px)), var(--rim-base) 0 var(--corner-step), var(--rim-shadow) 0 var(--corner-edge), transparent 0) bottom right;
  background-size: calc(10 * var(--control-px)) calc(10 * var(--control-px));
  background-repeat: no-repeat;
}
[data-ui-skin="standard"][data-ui-role="tool"]::before {
  background: linear-gradient(to bottom, var(--rim-highlight) 0 20%, var(--rim-base) 20% 75%, var(--rim-shadow) 75%) top center,
    linear-gradient(to bottom, var(--rim-highlight) 0 20%, var(--rim-base) 20% 75%, var(--rim-shadow) 75%) bottom center;
  background-size: calc(7 * var(--control-px)) calc(4 * var(--control-px));
  background-repeat: no-repeat;
}

.stamina-recovery { font-size: 16px; line-height: 1.6; width: min(90vw, 380px); padding: 24px; color: var(--pf-outline); background: var(--pf-surface); border: 2px solid var(--pf-frame); border-radius: 12px; }
.stamina-recovery::backdrop { background: rgba(25, 35, 26, .55); }
.stamina-recovery button { min-height: 44px; margin: 4px; }
.sortie-stamina { flex-basis: 100%; margin: 0; }
.home-resource-pill--green[type="button"] { cursor: pointer; }

.home-resource-pill__recover { color: var(--pf-primary); font-weight: 900; margin-left: 0; }

/* One centered silhouette combines icon and wordmark. Both sprite states
   share a canvas, so selection never moves or resizes the artwork. */
.pf-nav-art {
  display: none;
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: min(94cqw, 90cqh);
  height: min(94cqw, 90cqh);
  z-index: 3;
  background-size: 100% 200%;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
}
.pf-nav-art__loader { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pf-nav-art__wordmark { display: none; }
[data-ui-skin="standard"][data-nav-art-ready="true"] > .pf-nav-art { display: block; }
[data-ui-skin="standard"][data-nav-art-ready="true"] > :is(.home-bottom-nav-icon,.home-editable-part__icon-image,.home-bottom-nav-label) { visibility: hidden; }
.home-bottom-nav-item--active > .pf-nav-art { background-position: center bottom; }
.story-reader-back > svg { width: 22px; height: 22px; vertical-align: middle; }

/* Sorting/filter controls share a plain rim wherever the picker is used. */
:is(.collection-screen, .formation-screen) :is(.collection-filter-fab, .collection-filter-panel) {
  border: 2px solid var(--pf-frame);
  border-image: none;
  border-radius: var(--pf-radius);
  background: var(--pf-surface);
  color: var(--pf-outline);
  box-shadow: none;
}
:is(.collection-screen, .formation-screen) .collection-filter-fab--active {
  background: var(--pf-primary);
  color: var(--pf-highlight);
}
:is(.collection-screen, .formation-screen) .collection-filter-fab {
  display: grid;
  place-items: center;
  grid-auto-flow: row;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 10px;
  border-radius: 50%;
}
:is(.collection-screen, .formation-screen) .collection-filter-fab__label { display: none; }
:is(.collection-screen, .formation-screen) .collection-filter-fab__icon { width: 22px; height: 22px; }

/* The four gameplay screens share the continuous rim used by home and
   collection. Uploaded part artwork keeps control of its own appearance. */
:root { --pf-browse-background: #edf0e5; }
/* Quiet interim backdrop for browsing: keep illustrations on the cards and
   products, with one replaceable color behind the cream content panels. */
:is(.collection-screen, .formation-screen, .gacha-screen, .shop-screen, .formation-detail-screen, .equipment-detail-screen) > .screen-shell__body {
  background: var(--pf-browse-background);
}
:is(.collection-screen, .formation-screen, .gacha-screen, .shop-screen, .formation-detail-screen, .equipment-detail-screen) > .screen-shell__body > .game-screen-background {
  display: none;
}
:is(.formation-screen,.gacha-screen,.shop-screen,.battle-screen,.sortie-screen,.battle-result-screen)
  > :is(.screen-shell__body,.battle-result-shell) {
  border: 2px solid var(--pf-frame);
  box-shadow: inset 0 0 0 1px var(--pf-highlight), 0 1px 0 var(--pf-shadow);
}
:is(.formation-screen,.gacha-screen,.shop-screen,.battle-screen,.sortie-screen,.battle-result-screen)
  :is(.formation-bench,.gacha-pull-panel--bare,.gacha-history-panel,.gacha-hero-stage__copy,
      .shop-balance,.shop-product,.battle-enemy-info,.battle-footer,
      .sortie-party,.sortie-opponent,.battle-result-headline,.battle-result-rewards):not(.game-screen-part--has-asset) {
  border: 2px solid var(--pf-frame);
  border-image: none;
  border-radius: 9px;
  background: var(--pf-surface);
  color: var(--pf-outline);
  box-shadow: inset 0 0 0 1px var(--pf-highlight), 0 1px 0 var(--pf-shadow);
}
:is(.formation-screen,.gacha-screen,.shop-screen,.battle-screen,.sortie-screen,.battle-result-screen)
  :is(.screen-action,.shop-product__buy,.gacha-history-button):not(.game-screen-part--has-asset) {
  border: 2px solid var(--pf-frame);
  border-radius: 8px;
  min-height: 44px;
  color: var(--pf-outline);
  background: var(--pf-surface);
  box-shadow: inset 0 1px 0 var(--pf-highlight), 0 2px 0 var(--pf-shadow);
  text-shadow: none;
}
:is(.gacha-screen,.shop-screen,.sortie-screen,.battle-result-screen)
  :is(.screen-action--primary,.shop-product__buy,.sortie-depart):not(.game-screen-part--has-asset),
.gacha-screen .gacha-pull-panel .screen-action:not(.game-screen-part--has-asset),
.battle-screen .battle-actions--special .screen-action:not(.game-screen-part--has-asset) {
  color: var(--pf-highlight);
  background: var(--pf-accent);
}
:is(.formation-screen,.gacha-screen,.shop-screen,.battle-screen,.sortie-screen,.battle-result-screen)
  :is(.screen-action,.shop-product__buy,.gacha-history-button):focus-visible {
  outline: 3px solid var(--pf-primary);
  outline-offset: 2px;
}
:is(.formation-screen,.gacha-screen,.shop-screen,.battle-screen,.sortie-screen,.battle-result-screen)
  :is(.screen-action,.shop-product__buy):disabled { cursor: not-allowed; opacity: .55; }

/* Reuse collection's generated portrait rim; retain attribute jewels and
   rarity flags above it, with the same independent hit targets. */
.formation-screen .formation-bench-card > .attribute-card-icon,
.battle-screen .battle-party-card__icon > .attribute-card-icon {
  border: 0; border-radius: 0; box-shadow: none;
}
.formation-screen .formation-bench-card > .attribute-card-icon::after,
.battle-screen .battle-party-card__icon > .attribute-card-icon::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/collection-v1/character-frame.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}
.formation-screen .formation-bench-card .attribute-card-icon__art,
.battle-screen .battle-party-card__icon .attribute-card-icon__art {
  inset: 2.5%; border-radius: 0; background: var(--pf-surface-raised);
  clip-path: polygon(3% 0,97% 0,100% 3%,100% 97%,97% 100%,3% 100%,0 97%,0 3%);
}

/* Home and gameplay render the same saved parts in different DOM parents.
   Own the entire standard bar skin here, in real display pixels. */
.home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]:not([data-nav-layout="grid"]) {
  --home-panel-frame: var(--pf-frame-art);
  --home-panel-frame-width: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1));
  --home-panel-inset-y: calc(-2 * var(--control-px));
  --face-edge: calc(var(--home-panel-frame-width) * .35);
  --face-corner: calc(var(--home-panel-frame-width) * .9);
  isolation: isolate;
  border: 0;
  outline: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
.home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]:not([data-nav-layout="grid"])::before {
  content: "";
  display: block;
  position: absolute;
  inset: var(--home-panel-inset-y) 0;
  z-index: 0;
  box-sizing: border-box;
  border: var(--home-panel-frame-width) solid transparent;
  border-image: var(--home-panel-frame) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
  border-radius: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}
.home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]:not([data-nav-layout="grid"])::after {
  content: "";
  display: block;
  position: absolute;
  inset: var(--home-panel-inset-y) 0;
  z-index: -1;
  border: 0;
  border-radius: 0;
  background: var(--pf-surface);
  box-shadow: none;
  pointer-events: none;
  clip-path: polygon(
    var(--face-corner) var(--face-edge),
    calc(100% - var(--face-corner)) var(--face-edge),
    calc(100% - var(--face-edge)) var(--face-corner),
    calc(100% - var(--face-edge)) calc(100% - var(--face-corner)),
    calc(100% - var(--face-corner)) calc(100% - var(--face-edge)),
    var(--face-corner) calc(100% - var(--face-edge)),
    var(--face-edge) calc(100% - var(--face-corner)),
    var(--face-edge) var(--face-corner)
  );
}

/* Four independently selectable objects live on the bar. Moving an icon
   cannot move a divider. The wider transparent box is only for editing. */
.home-bottom-nav-item[data-ui-skin="standard"]::before { content: none; }
.home-bottom-nav > .pf-nav-divider {
  display: block;
  position: absolute;
  top: 14%;
  bottom: 14%;
  width: calc(8 * var(--control-px));
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}
.home-bottom-nav > .pf-nav-divider::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: calc(1 * var(--control-px));
  border: 0;
  background: var(--pf-frame);
  box-shadow: calc(1 * var(--control-px)) 0 0 var(--pf-highlight);
  pointer-events: none;
}
[data-calibration-direct="true"] .home-bottom-nav > .pf-nav-divider {
  pointer-events: auto;
  cursor: move;
  z-index: 60;
}

/* Keep the full tap targets; inset the combined icon and wordmark within them. */
[data-ui-initial-presentation="reference-v1"] .home-bottom-nav-item[data-ui-skin="standard"] > .pf-nav-art {
  top: 14%;
  width: min(94cqw, 82cqh);
  height: min(94cqw, 82cqh);
}

/* The visible outer rim belongs to the physical frame, not a scaled canvas
   or a screen-specific content panel. No border may change its inner size. */
.home-screen > .home-game-frame,
.screen-shell > .screen-shell__body,
.battle-result-screen > .battle-result-shell,
.story-reader-screen {
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}
.home-game-frame > .home-game-canvas::after { content: none; display: none; }
.home-screen > .home-game-frame::after,
.screen-shell > .screen-shell__body::after,
.battle-result-screen > .battle-result-shell::after,
.story-reader-screen::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 80;
  border: 3px solid var(--pf-frame);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #fff0bd, 0 0 0 1px #806137;
  background: none;
  pointer-events: none;
}
.story-reader-screen { position: relative; }

/* Shared home status strip, with a reserved lane above each screen's content. */
.screen-shell__body[data-has-status-bar="true"] {
  /* Safari needs a definite height to exclude HUD/navigation padding from
     the content's 100% height and keep its scroll bounds inside the frame. */
  height: var(--screen-frame-block);
  padding-top: max(var(--game-status-content-top, 0px), calc(var(--screen-frame-inline) * 220 / 1080 + 8px));
}
.game-status-plane {
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(var(--screen-frame-inline) * 220 / 1080);
  z-index: 25; overflow: visible; pointer-events: none;
}
.game-status-plane .game-status-canvas { pointer-events: none; }
.game-status-plane .game-status-canvas > * { pointer-events: auto; }
.game-status-plane .game-status-canvas::after { content: none; }
.home-top-hud .home-strength-points {
  --home-part-width: 398px; --home-part-height: 54px;
  position: absolute; left: 47%; top: 48%; width: 13%; height: 48%;
  display: flex; align-items: center; justify-content: start; gap: 5px;
  color: var(--pf-outline); line-height: 1.1; text-align: left;
}
.home-strength-points__icon { display: block; width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; }

.sortie-screen > .screen-shell__body[data-has-status-bar="true"] {
  --screen-shell-bottom-padding: max(100px, calc(var(--screen-frame-inline) * .22));
}

.home-game-canvas--pop-fantasy-v2 .home-strength-points__value {
  font-size: var(--hud-matched-number-size, min(calc(var(--home-part-width, 398px) * .098), calc(var(--home-part-height, 54px) * .7222222)));
}

.screen-navigation-error { position: fixed; z-index: 2000; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(560px,calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 12px; box-sizing: border-box; border: 1px solid var(--pf-frame); border-radius: 10px; background: var(--pf-surface); color: var(--pf-outline); font-size: 16px; }
.screen-navigation-error button { min-height: 44px; padding: 8px 16px; white-space: nowrap; }
/* Lost progress save: same card as the navigation error, at the top so both can show. */
.progress-save-notice { position: fixed; z-index: 2000; left: 50%; top: 12px; transform: translateX(-50%); width: min(560px,calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 12px; box-sizing: border-box; border: 1px solid var(--pf-frame); border-radius: 10px; background: var(--pf-surface); color: var(--pf-outline); font-size: 16px; }
.progress-save-notice button { min-height: 44px; padding: 8px 16px; white-space: nowrap; }

/* Home and gameplay render the same saved parts in different DOM parents.
   Own the entire standard bar skin here, in real display pixels. */
.home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]:not([data-nav-layout="grid"]) {
  --home-panel-frame: var(--pf-frame-art);
  --home-panel-frame-width: calc(var(--pf-frame-thickness) / var(--logical-scale, 1) / var(--calibration-frame-scale, 1));
  --home-panel-inset-y: calc(-2 * var(--control-px));
  --face-edge: calc(var(--home-panel-frame-width) * .35);
  --face-corner: calc(var(--home-panel-frame-width) * .9);
  isolation: isolate;
  border: 0;
  outline: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
.home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]:not([data-nav-layout="grid"])::before {
  content: "";
  display: block;
  position: absolute;
  inset: var(--home-panel-inset-y) 0;
  z-index: 0;
  box-sizing: border-box;
  border: var(--home-panel-frame-width) solid transparent;
  border-image: var(--home-panel-frame) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
  border-radius: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}
.home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]:not([data-nav-layout="grid"])::after {
  content: "";
  display: block;
  position: absolute;
  inset: var(--home-panel-inset-y) 0;
  z-index: -1;
  border: 0;
  border-radius: 0;
  background: var(--pf-surface);
  box-shadow: none;
  pointer-events: none;
  clip-path: polygon(
    var(--face-corner) var(--face-edge),
    calc(100% - var(--face-corner)) var(--face-edge),
    calc(100% - var(--face-edge)) var(--face-corner),
    calc(100% - var(--face-edge)) calc(100% - var(--face-corner)),
    calc(100% - var(--face-corner)) calc(100% - var(--face-edge)),
    var(--face-corner) calc(100% - var(--face-edge)),
    var(--face-edge) calc(100% - var(--face-corner)),
    var(--face-edge) var(--face-corner)
  );
}

/* Four independently selectable objects live on the bar. Moving an icon
   cannot move a divider. The wider transparent box is only for editing. */
.home-bottom-nav-item[data-ui-skin="standard"]::before { content: none; }
.home-bottom-nav > .pf-nav-divider {
  display: block;
  position: absolute;
  top: 14%;
  bottom: 14%;
  width: calc(8 * var(--control-px));
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}
.home-bottom-nav > .pf-nav-divider::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: calc(1 * var(--control-px));
  border: 0;
  background: var(--pf-frame);
  box-shadow: calc(1 * var(--control-px)) 0 0 var(--pf-highlight);
  pointer-events: none;
}
[data-calibration-direct="true"] .home-bottom-nav > .pf-nav-divider {
  pointer-events: auto;
  cursor: move;
  z-index: 60;
}

/* Keep the full tap targets; inset the combined icon and wordmark within them. */
[data-ui-initial-presentation="reference-v1"] .home-bottom-nav-item[data-ui-skin="standard"] > .pf-nav-art {
  top: 14%;
  width: min(94cqw, 82cqh);
  height: min(94cqw, 82cqh);
}

/* A shared column must not be independently shrunk by three parent widths. */
.collection-screen .collection-card-list,
.formation-screen .formation-bench-list,
.formation-screen .formation-slot-list {
  grid-template-columns: repeat(5, var(--party-grid-column));
  gap: var(--party-grid-gap);
  justify-content: safe center;
  overflow-x: auto;
}
.collection-screen .collection-card-list,
.formation-screen .formation-bench-list { grid-auto-rows: var(--party-grid-column); }
.collection-screen .collection-card-tile,
.formation-screen .formation-bench-card { min-height: 0; padding: 0; border: 0; box-sizing: border-box; }
.formation-screen .formation-bench-card > .attribute-card-icon { width: 100%; height: 100%; }
.formation-screen .formation-slot-card { box-sizing: border-box; }

/* Collection and unassigned candidates use one list frame and inset. */
:is(.collection-screen, .formation-screen) .screen-shell__content :is(.collection-list-panel, .formation-bench) {
  position: relative; min-height: 0; padding: 0;
  border: 0; border-image: none; border-radius: 9px;
  background: var(--pf-surface);
  box-shadow: inset 0 0 0 3px var(--pf-frame), inset 0 0 0 4px var(--pf-highlight), 0 0 0 1px var(--pf-shadow);
}
.collection-screen .collection-list-panel .collection-card-list,
.formation-screen .formation-bench .formation-bench-list {
  position: absolute; inset: clamp(8px, 1.4cqw, 14px);
  display: grid; height: auto; max-height: none; min-height: 0; padding: 0;
  grid-template-columns: repeat(5, var(--party-grid-column));
  grid-auto-rows: var(--party-grid-column); gap: var(--party-grid-gap);
  align-content: start; justify-content: safe center; overflow-x: hidden; overflow-y: auto;
  scrollbar-gutter: stable;
}
.formation-screen .formation-bench-card > .attribute-card-icon {
  border: 0;
  border-radius: 0; box-shadow: none;
}
.formation-screen .formation-bench-card > .attribute-card-icon::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: url("/assets/ui-kits/pop-fantasy-v2/screens/collection-v1/character-frame.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}
:is(.collection-screen, .formation-screen) :is(.collection-card-tile, .formation-bench-card) .attribute-card-icon__art {
  inset: 0; border-radius: inherit; clip-path: none; background: var(--pf-surface-raised);
}

/* Initial presentation matches the approved five-column card density.
   Keep these on :root so saved inline calibration values still take priority. */
:root:has([data-ui-initial-presentation="reference-v1"]) {
  --party-grid-column-ratio: 0.155;
  --party-grid-gap-ratio: 0.008;
}

[data-ui-initial-presentation="reference-v1"] :is(.collection-screen .collection-list-panel .collection-card-list, .formation-screen .formation-bench .formation-bench-list) {
  grid-template-columns: repeat(5, min(var(--party-grid-column), calc((100% - 4 * var(--party-grid-gap)) / 5)));
  grid-auto-rows: max-content;
}
[data-ui-initial-presentation="reference-v1"] :is(.collection-card-tile, .formation-bench-card) { aspect-ratio: 1; }

/* Review 2026-10-03 (round 4): the saved parties 1/2/3 and the
   character/equipment switch share one slim column of tabs on the left. The
   party strip and the list sit to its right, so their left edges line up,
   and dropping the 1/2/3 row hands its height to the list. Portrait only;
   loaded after the per-screen files so it wins on order. */
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] {
  --formation-side-tab: calc(24 * var(--formation-px));
  --formation-side-gap: calc(6 * var(--formation-px));
}
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] .screen-shell__content:has(> .formation-lower) {
  grid-template-columns: var(--formation-side-tab) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: var(--formation-side-gap);
}
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] .screen-shell__content:has(> .formation-lower):has(> .creator-tutorial-coach) {
  grid-template-rows: auto auto minmax(0, 1fr);
}
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] .screen-shell__content:has(> .formation-lower) > * { grid-column: 1 / -1; }
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] .screen-shell__content:has(> .formation-lower) > .formation-presets { grid-column: 1; grid-row: -3 / -2; }
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] .screen-shell__content:has(> .formation-lower) > .formation-slots { grid-column: 2; grid-row: -3 / -2; }
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] .screen-shell__content:has(> .formation-lower) > .formation-lower {
  grid-row: -2 / -1;
  grid-template-columns: var(--formation-side-tab) minmax(0, 1fr);
  column-gap: var(--formation-side-gap);
}

/* One tab look for both stacks: the button art turned upright, four fifths
   of the former size, and selection shown by brightness alone -- the art is
   never recoloured, so a theme whose art carries a colour (the japanese
   maple leaf) does not read as "the red one is chosen". */
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] :is(.formation-presets, .formation-lower-tabs) {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: calc(10 * var(--formation-px)) 0 0;
}
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] .formation-presets { gap: calc(12 * var(--formation-px)); }
/* The pair reads as one set: close together, same art, same size. */
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] .formation-lower-tabs { gap: calc(8 * var(--formation-px)); }
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] :is(.formation-preset, .formation-lower-tabs .screen-action) {
  /* Only the turned art draws the tab: the screen's own button rim and
     surface (fantasy-screen-surfaces.css) showed as a second, offset frame. */
  border: 0; border-radius: 0; background: none; box-shadow: none;
  min-width: 0; width: var(--formation-side-tab); padding: 0;
  font-size: calc(11 * var(--formation-px)); line-height: 1;
}
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] .formation-preset { min-height: calc(34 * var(--formation-px)); }
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] .formation-lower-tabs .screen-action {
  min-height: calc(58 * var(--formation-px));
  writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .02em;
}
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] :is(.formation-preset, .formation-lower-tabs .screen-action)::before {
  inset: auto; left: 50%; top: 50%;
  width: var(--side-tab-art-long, calc(58 * var(--formation-px) * 1.12));
  height: calc(var(--formation-side-tab) * 1.25);
  transform: translate(-50%, -50%) rotate(90deg);
}
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] .formation-preset::before { --side-tab-art-long: calc(34 * var(--formation-px) * 1.18); }
/* Round 5: fading the whole unselected tab sank its word (装備 in japanese
   and wa-modern). Its word stays at full strength; only its art is quieted,
   and the chosen one is told apart by its glow and the notch. */
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] :is(.formation-preset, .formation-lower-tabs .screen-action):not([aria-pressed="true"]) { opacity: 1; text-shadow: none; }
/* The chosen one also points at what it controls: a small accent notch on
   the side facing the strip or the list. */
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] :is(.formation-preset, .formation-lower-tabs .screen-action)[aria-pressed="true"]::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  top: 50%; right: calc(-6 * var(--formation-px));
  /* Physical sides: the character/equipment tabs are written vertically,
     where the logical inline-start side is the top and the notch pointed down. */
  border-top: calc(5 * var(--formation-px)) solid transparent;
  border-bottom: calc(5 * var(--formation-px)) solid transparent;
  border-left: calc(5 * var(--formation-px)) solid var(--pf-accent);
  border-right: 0;
  transform: translateY(-50%);
}
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] :is(.formation-preset, .formation-lower-tabs .screen-action):not([aria-pressed="true"])::before { filter: saturate(.35) brightness(.96); }

/* The list's rim (an inset shadow, card-grid-consistency.css) matches the
   party frame's thin line instead of the former 3px + 1px double rim. */
.formation-screen .screen-shell__content .formation-lower > .formation-bench {
  box-shadow: inset 0 0 0 1px var(--pf-frame), 0 0 0 1px color-mix(in srgb, var(--pf-shadow) 40%, transparent);
}

/* Sortie: the same left column for 1/2/3, so the party moves up and the
   opponent fits above the buttons without scrolling. This screen is zoomed
   from a 375px frame, so plain px scale with it. */
.sortie-screen .screen-shell__body[data-ui-orientation="portrait"] .sortie-details {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 6px; row-gap: 8px;
  align-content: start;
}
.sortie-screen .screen-shell__body[data-ui-orientation="portrait"] .sortie-details > * { grid-column: 1 / -1; }
.sortie-screen .screen-shell__body[data-ui-orientation="portrait"] .sortie-details > .sortie-presets {
  grid-column: 1; grid-row: 1;
  flex-direction: column; align-items: center; gap: 12px; padding: 10px 0 0;
}
.sortie-screen .screen-shell__body[data-ui-orientation="portrait"] .sortie-details > .sortie-party { grid-column: 2; grid-row: 1; }
.sortie-screen .screen-shell__body[data-ui-orientation="portrait"] .sortie-preset {
  min-width: 0; width: 24px; min-height: 34px; padding: 0;
  font-size: 11px; line-height: 1;
}
.sortie-screen .screen-shell__body[data-ui-orientation="portrait"] .sortie-preset::before {
  inset: auto; left: 50%; top: 50%;
  width: 40px; height: 30px;
  transform: translate(-50%, -50%) rotate(90deg);
}
.sortie-screen .screen-shell__body[data-ui-orientation="portrait"] .sortie-preset { border: 0; border-radius: 0; background: none; box-shadow: none; }
.sortie-screen .screen-shell__body[data-ui-orientation="portrait"] .sortie-preset:not([aria-pressed="true"]) { opacity: 1; text-shadow: none; }
.sortie-screen .screen-shell__body[data-ui-orientation="portrait"] .sortie-preset[aria-pressed="true"]::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  top: 50%; right: -6px;
  border-block: 5px solid transparent; border-inline-start: 5px solid var(--pf-accent);
  transform: translateY(-50%);
}
.sortie-screen .screen-shell__body[data-ui-orientation="portrait"] .sortie-preset:not([aria-pressed="true"])::before { filter: saturate(.35) brightness(.96); }

/* Round 5: the key words are pictures now, so the toggles' lettering joins
   the base face (a plain gothic by default) instead of each theme's tab face,
   which read thin and out of place (japanese) and fell back mid-word. */
:root :is(.formation-screen, .sortie-screen, .collection-screen) :is(.formation-preset, .formation-lower-tabs .screen-action, .sortie-preset, .collection-kind-tabs .screen-action) {
  font-family: var(--font-display);
  font-weight: 800;
}

/* Round 5: the box screen's character/equipment switch read too large and
   its button art stretched. The art keeps its own proportions (contain; the
   themes' button art runs 2-3.2 : 1) and the buttons are a size smaller.
   The vertical list tabs keep their art's proportions the same way. */
.collection-kind-tabs:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { gap: 10px; padding: 4px 0 4px 12px; }
.collection-kind-tabs .screen-action {
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
.collection-kind-tabs .screen-action:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) {
  min-width: 0; width: 80px; min-height: 0; height: 28px; padding: 0;
  font-size: 12px; line-height: 1;
}
.collection-kind-tabs .screen-action::before { background-size: contain; }
.collection-kind-tabs .screen-action:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *)::before { inset: -10% -6%; }
/* (Round 7: the list tabs stretch like 1/2/3 again, so both stacks are the
   same width; the box screen's tabs keep their art's ratio.) */
/* One ink for both states, chosen for the art (light on dark buttons);
   lower-panel.css's selected colour no longer overrides it. */
:root :is(.formation-screen, .sortie-screen, .collection-screen) :is(.formation-preset, .formation-lower-tabs .screen-action, .sortie-preset, .collection-kind-tabs .screen-action) { color: var(--theme-tab-ink, var(--pf-outline)); }
:root [data-ui-theme-kit="fantasy"] :is(.formation-screen, .sortie-screen, .collection-screen) :is(.formation-preset, .formation-lower-tabs .screen-action, .sortie-preset, .collection-kind-tabs .screen-action)[aria-pressed="true"] { color: #fffef8; }

/* Review 2026-10-03: the magnifier sat on the detail tabs; it belongs just
   outside the illustration's lower-right corner (the square art is as wide
   as the art box is tall, 65cqw, centred). */
.formation-detail-screen .screen-shell__body[data-ui-orientation="portrait"] .formation-detail-content .formation-detail-artwork-open {
  position: absolute !important; top: auto !important; right: auto !important;
  bottom: 0 !important; left: min(calc(50% + 32.5cqw + 6px), calc(100% - 46px)) !important;
  translate: none !important; transform: none !important;
}
/* The detail tabs (ステータス / 育成 / キャラ詳細) and the story mode tabs
   were taller than the name plate; two thirds of their former height. */
/* Round 7: their words sat low after the shrink -- centred now -- and
   outside Pop Fantasy (whose art needs the room) they are slimmer still. */
.formation-detail-screen .screen-shell__body[data-ui-orientation="portrait"] .formation-detail-tab,
.story-screen .screen-shell__body[data-ui-orientation="portrait"] .story-mode-tab {
  display: flex !important; align-items: center; justify-content: center;
  padding-block: 0 !important; line-height: 1 !important;
}
.formation-detail-screen .screen-shell__body[data-ui-orientation="portrait"] .formation-detail-tab { min-height: 40px !important; height: 40px; }
.story-screen .screen-shell__body[data-ui-orientation="portrait"] .story-mode-tab { min-height: 36px !important; height: 36px; }
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .formation-detail-screen .screen-shell__body[data-ui-orientation="portrait"] .formation-detail-tab { min-height: 34px !important; height: 34px; }
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .story-screen .screen-shell__body[data-ui-orientation="portrait"] .story-mode-tab { min-height: 34px !important; height: 34px; }

/* Round 12: the portrait side tabs stand on upright plates drawn for them (tab-plates-v1:
   short for 1/2/3, long for キャラ/装備), shown at their own ratio and not turned, instead of
   the button art rotated 90 degrees. Pop Fantasy keeps its pills. */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .formation-screen .screen-shell__body[data-ui-orientation="portrait"] .formation-preset::before {
  background: var(--theme-tab-plate-short, var(--theme-tab-art)) center / contain no-repeat !important;
  width: calc(var(--formation-side-tab) * 1.25) !important; height: calc(34 * var(--formation-px) * 1.3) !important;
  transform: translate(-50%, -50%) !important;
}
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .formation-screen .screen-shell__body[data-ui-orientation="portrait"] .formation-lower-tabs .screen-action::before {
  background: var(--theme-tab-plate-long, var(--theme-tab-art)) center / contain no-repeat !important;
  width: calc(var(--formation-side-tab) * 1.25) !important; height: calc(58 * var(--formation-px) * 1.18) !important;
  transform: translate(-50%, -50%) !important;
}
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .sortie-screen .screen-shell__body[data-ui-orientation="portrait"] .sortie-preset::before {
  background: var(--theme-tab-plate-short, var(--theme-tab-art)) center / contain no-repeat !important;
  width: 30px !important; height: 44px !important;
  transform: translate(-50%, -50%) !important;
}

/* Round 14: the box screen's キャラ / 装備 words are 90% of their former size and centred on the
   button art's measured inner panel (ui-button-insets.mjs), so they no longer run onto side
   ornaments (old-map's scarf, marine's anchor, cafe's cup). The tab is 80x28 and its art is drawn
   contained in a box 112% x 120% of it, so the art is 33.6px tall and centred. */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .collection-screen .collection-kind-tabs .screen-action > .tab-word:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) {
  --art-h: 33.6px; --art-w: calc(33.6px * var(--theme-button-ratio, 2.5));
  translate: calc((var(--theme-button-inset-l, .1) - var(--theme-button-inset-r, .1)) / 2 * var(--art-w)) calc((var(--theme-button-inset-t, .2) - var(--theme-button-inset-b, .2)) / 2 * var(--art-h) - 1px);
  scale: .9;
}

/* 横向き。
   システム設定の「画面向き」で横UIを選ぶと、ルート要素に
   data-ui-orientation="landscape" が付く（app-shell.mjs の applyOrientation）。
   ここはその一つの属性が変える見た目を、全部まとめて置いてある場所。

   Everything geometric -- where each part sits inside the canvas -- comes from
   the landscape defaults in ui-layout-defaults.mjs, not from here. This file
   only handles what CSS owns: the frame's own proportions, how much room the
   shell leaves for the navigation, and the few rules that were written
   assuming the nav is a bar along the bottom. */

/* 属性が付くのはアプリのルート要素で、<html> ではない（app-shell.mjs は渡され
   た root にしか触らない）。カスタムプロパティは子孫に降りるので、これで枠の
   計算式が入れ替わる。 */
[data-ui-orientation="landscape"] {
  /* 枠の測り方だけが逆になる。--screen-frame-inline stays "the frame's width"
     so every radius/border/padding formula derived from it keeps working; it
     is now fitted against height x 16/9 instead of height x 9/16. */
  --screen-frame-inline: min(
    calc(100vw - var(--screen-viewport-gap)),
    calc((100dvh - var(--screen-viewport-gap)) * 16 / 9),
    1920px
  );
  --screen-frame-block: calc(var(--screen-frame-inline) * 9 / 16);
  --landscape-nav-icon-size: clamp(28px, calc(var(--screen-frame-inline) * .03), 40px);
  --landscape-nav-label-size: clamp(14px, calc(var(--screen-frame-inline) * .015), 18px);
}

.home-game-frame--landscape {
  /* --screen-frame-inline is already the landscape width (above); the older
     rule reached for --screen-frame-block, which is the *height*. */
  width: var(--screen-frame-inline);
  aspect-ratio: 16 / 9;
}

.screen-shell__body[data-ui-orientation="landscape"] {
  aspect-ratio: 16 / 9;
  /* cqw は枠の幅の割合なので、横だと同じ数字が縦向きより厚くなる。
     Both paddings are re-expressed against the short side, which is the
     height here and the width in portrait: 3.8889cqw of a portrait frame is
     3.8889% of its width, and 2.1875cqw of a landscape frame is the same
     share of its height (3.8889 * 9/16). */
  --screen-shell-padding: 2.1875cqw;
  /* Reserve the compact bottom navigation plus a small content gap. */
  --screen-shell-bottom-padding: max(60px, 7.5cqw);
}

/* ナビの高さの下限を、横では規定の 44px まで下げる。
   縦の 58/66 は、縦長の画面なら気にならない余裕ぶんだった。The floors are in
   real device px (07-home/frame.css divides them by --logical-scale), so on a
   390px-tall landscape phone the portrait pair costs 17% of the screen height
   and pushes the bar past the frame's bottom edge. 44px is the tap-target
   minimum ui-style-spec-b.md §13 actually requires; nothing below it. */
.home-game-canvas[data-ui-orientation="landscape"],
[data-ui-orientation="landscape"] .home-game-canvas {
  --canvas-nav-item-min-height: calc(44px / var(--logical-scale, 1));
  --canvas-nav-bar-min-height: calc(52px / var(--logical-scale, 1));
}

/* cqw の基準を、横でも縦と同じ 1080 に戻す。
   キャンバス内のスタイルは 1cqw = 論理10.8px（1080の1%）として書かれている。
   横のキャンバスは 1920 幅なので、同じ数字がそのまま 1.78 倍に育つ --
   `min-height: 15.1852cqw` の出撃ボタンは 164 のつもりで 292 になり、下の
   バーに潜っていた。

   The fix keeps the canvas 1920 wide for everything that positions against it
   -- offsetWidth, getBoundingClientRect, and every absolutely positioned part,
   all of which resolve against the padding box -- while the *content* box, the
   only thing container queries measure, stays at the 1080 those rules were
   written for. So no coordinate moves and no rule needs rewriting.

   これは向きごとに寸法を書き分けない代わりの一手。Writing a landscape variant
   of all 1200-odd cqw declarations is the alternative, and it would have to be
   kept in step by hand forever. */
[data-ui-orientation="landscape"] .home-game-canvas {
  box-sizing: content-box;
  width: 1080px;
  padding-right: calc(var(--logical-canvas-width, 1920px) - 1080px);
}

/* ホーム以外の5画面のナビにも、同じ 44px の下限を効かせる。
   These screens are not inside the scaled canvas, so they read the floors
   through the plain real-px fallback (07-home/bottom-nav.css) and were
   spending 17.5% of a 390px-tall landscape phone on the bar alone. No divide
   by --logical-scale here: nothing scales them, so the numbers are already
   real device px. */
.screen-shell__body[data-ui-orientation="landscape"] {
  --canvas-nav-item-min-height: 44px;
  --canvas-nav-bar-min-height: 52px;
}

/* Landscape home keeps faces between the HUD and navigation, with separate overlays. */
.home-game-frame--landscape .home-character:not([data-home-character-placeholder="true"]) {
  left: 44%; margin-left: -20%; width: 40%; height: 62%; bottom: 21%;
}
.home-game-frame--landscape .home-character__image { height: 100%; object-fit: contain; object-position: bottom center; }
.home-game-frame--landscape .home-game-canvas .home-speech-layer {
  top: auto; bottom: 36%; left: 36%; right: auto; width: 34%;
}
.home-game-frame--landscape .home-game-canvas .home-speech {
  margin: 0; width: 100%; max-width: none; min-height: 0; padding: calc(12 * var(--control-px)) calc(32 * var(--control-px)) calc(12 * var(--control-px)) calc(12 * var(--control-px));
}
.home-game-frame--landscape .home-speech__text { font-size: max(var(--canvas-min-font-size), 32px); }
.home-game-frame--landscape .home-notice-banner { left: 10%; bottom: max(21%, calc(var(--home-nav-clearance, 0px) / var(--canvas-display-ratio, 1))); width: 24%; }
.home-game-frame--landscape .home-notice-banner__slide { height: clamp(42px, calc(var(--screen-frame-block) * .115), 84px); }
.home-game-frame--landscape .home-announcement-board__summary { top: 2.871967%; right: 1.875%; width: max(39.55421px, 5.993062%); }
.home-game-frame--landscape .home-top-hud .home-strength-points { left: 84%; top: 16%; }

/* Shared HUD uses the same landscape coordinate width as home. */
[data-ui-orientation="landscape"] .screen-shell__body[data-has-status-bar="true"] { padding-top: max(var(--game-status-content-top, 0px), calc(var(--screen-frame-inline) * 156 / 1920 + 8px)); }
[data-ui-orientation="landscape"] .game-status-plane { height: calc(var(--screen-frame-inline) * 156 / 1920); }
[data-ui-orientation="landscape"] .game-status-plane .home-top-hud .home-strength-points { left: 84%; top: 16%; }
[data-ui-orientation="landscape"] .collection-screen .screen-shell__body { --screen-shell-padding: 2.2cqw; --screen-shell-bottom-padding: max(60px, 7.5cqw); }
/* Collection and formation candidates share card density and filter controls. */
[data-ui-orientation="landscape"] .collection-screen .collection-list-panel .collection-card-list,
[data-ui-orientation="landscape"] .formation-screen .formation-bench .formation-bench-list {
  grid-template-columns: repeat(auto-fill,minmax(clamp(64px,calc(var(--screen-frame-inline) * .085),144px),1fr));
  grid-auto-rows: max-content; gap: clamp(4px,.6cqw,10px); justify-content: stretch; align-content: start;
}
[data-ui-orientation="landscape"] .collection-screen .collection-card-tile,
[data-ui-orientation="landscape"] .formation-screen .formation-bench-card { aspect-ratio: 1; min-height: 0; }
[data-ui-orientation="landscape"] .collection-screen .collection-filter-fab,
[data-ui-orientation="landscape"] .formation-screen .collection-filter-fab { width: 48px; height: 48px; min-height: 48px; padding: 10px; }
[data-ui-orientation="landscape"] .collection-screen .collection-filter-fab__icon,
[data-ui-orientation="landscape"] .formation-screen .collection-filter-fab__icon { width: 24px; height: 24px; }

/* Compact landscape chrome. Keep physical tap targets, shrink only their artwork. */
[data-ui-orientation="landscape"] .home-game-canvas--pop-fantasy-v2 .home-level-badge { padding: 6px; }
[data-ui-orientation="landscape"] .home-level-badge__caption { font-size: 20px; }
[data-ui-orientation="landscape"] .home-level-badge__value { font-size: 48px; }
[data-ui-orientation="landscape"] .home-player-name-tag { padding: 0 8px; }
[data-ui-orientation="landscape"] .home-player-name-tag__name { font-size: max(var(--canvas-min-font-size), 30px); overflow: hidden; text-overflow: ellipsis; }
[data-ui-orientation="landscape"] .home-game-canvas--pop-fantasy-v2 :is(.home-resource-pill__value,.home-resource-pill__recover,.home-strength-points__value) { font-size: max(var(--canvas-min-font-size), 30px); }
[data-ui-orientation="landscape"] .home-resource-pill { gap: 8px; padding: 4px; }
[data-ui-orientation="landscape"] .home-resource-pill__recover { margin-left: 0; }
[data-ui-orientation="landscape"] .home-strength-points__icon { width: 32px; height: 32px; flex-basis: 32px; }
[data-ui-orientation="landscape"] .home-game-canvas .home-side-tool { min-height: var(--canvas-tap-target-min); }
[data-ui-orientation="landscape"] .home-bottom-nav-item { flex-direction: row; gap: calc(6 * var(--control-px)); }
.home-game-frame--landscape .home-tools-menu { inset: 15% 2% auto auto; width: min(340px, 90%); max-height: 66%; }

/* Independent icon and approved wordmark, with an unchanged full tap target. */
[data-ui-orientation="landscape"] .home-bottom-nav-item[data-ui-skin="standard"] > .pf-nav-art {
  position: relative; top: auto; left: auto; transform: none; width: auto; height: auto;
  background-size: 0 0; flex: 0 0 auto;
}
[data-ui-orientation="landscape"] .pf-nav-art__wordmark {
  display: block; width: calc(var(--landscape-nav-label-size) * var(--nav-wordmark-ratio) / var(--logical-scale, 1));
  height: calc(var(--landscape-nav-label-size) / var(--logical-scale, 1));
  mask-size: 100% 100%; mask-repeat: no-repeat; background-color: #503522;
}
[data-ui-orientation="landscape"] .home-bottom-nav-item--active .pf-nav-art__wordmark { background-color: #426d4f; }
[data-ui-orientation="landscape"] .home-bottom-nav-item[data-ui-skin="standard"].home-bottom-nav-item--active::after {
  bottom: calc(7 * var(--control-px));
}
[data-ui-orientation="landscape"] .home-bottom-nav-item[data-ui-skin="standard"][data-nav-art-ready="true"] > :is(.home-bottom-nav-icon,.home-editable-part__icon-image) { visibility: visible; }
[data-calibration-direct="true"] [data-ui-orientation="landscape"] :is(.pf-nav-art__wordmark,.home-editable-part__icon-image,.home-bottom-nav-icon,.pf-label) { pointer-events: auto; cursor: move; }
[data-ui-orientation="landscape"] .home-bottom-nav-item[data-ui-skin="standard"] :is(.home-bottom-nav-icon,.home-editable-part__icon-image) {
  position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; order: -1; flex: 0 0 auto; width: calc(var(--landscape-nav-icon-size) / var(--logical-scale, 1)); height: calc(var(--landscape-nav-icon-size) / var(--logical-scale, 1));
}
[data-ui-orientation="landscape"] .home-bottom-nav-item[data-ui-skin="standard"] .pf-label {
  position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; margin: 0; flex: 0 1 auto; --pf-label-height: calc(var(--landscape-nav-label-size) / var(--logical-scale, 1));
}

[data-ui-orientation="landscape"] .home-bottom-nav-item[data-ui-skin="standard"][data-nav-art-ready="true"] > .home-bottom-nav-label { display: none; }

/* The layout editor exposes the fourth tool instead of the folded menu. */
.home-game-frame--landscape:has([data-edit-mode-visible="true"]) .home-announcement-board__summary { top: 16%; }

[data-ui-orientation="landscape"] .home-bottom-nav-item[data-ui-skin="standard"].home-editable-part--custom-icon:not([data-nav-icon-failed="true"]) > .home-bottom-nav-icon { display: none; }
[data-ui-orientation="landscape"] .home-bottom-nav-item[data-ui-skin="standard"][data-nav-icon-failed="true"] > .home-editable-part__icon-image { display: none; }

/* Landscape battle entry: square frame, illustration above its caption. */
[data-ui-orientation="landscape"] .battle-slot-button { min-height: var(--canvas-tap-target-min, 44px); }
[data-ui-orientation="landscape"] .battle-slot-button[data-ui-skin="standard"] :is(.home-editable-part__icon-image,.battle-slot-button-icon) {
  left: 25%; top: 10%; width: 50%; height: 50%;
}
[data-ui-orientation="landscape"] .battle-slot-button[data-ui-skin="standard"] .pf-label {
  left: 15%; right: 15%; top: 76%; max-width: 70%; --pf-label-height: 24cqw;
}

/* A landscape-authored game still needs usable panels when the phone turns
   upright. Use the spare height and stack dense panels instead of letterboxing
   controls into a roughly 210px-high frame. Home retains its authored canvas. */
@media (max-width: 600px) and (orientation: portrait) {
  .screen-shell__body[data-ui-orientation="landscape"] {
    --screen-frame-block: min(calc(100dvh - var(--screen-viewport-gap)), max(480px, calc(var(--screen-frame-inline) * 9 / 16)));
    height: var(--screen-frame-block);
    aspect-ratio: auto;
  }
  .home-game-frame--landscape .home-announcement-board__summary { top: 20%; }
  .home-game-frame--landscape:has(> .home-editor-sheet:not([data-collapsed="true"])) {
    height: min(calc(100dvh - var(--screen-viewport-gap)), 600px);
    max-height: none;
    aspect-ratio: auto;
  }

  .story-screen .screen-shell__body[data-ui-orientation="landscape"] .screen-shell__content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-mode-tabs {
    grid-column: 1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-mode-tab { border-width: 6px; }
  .story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-screen-layout { grid-column: 1; grid-row: 3; }
  .story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-list { grid-template-columns: minmax(0, 1fr); }

  .sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .screen-shell__content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: max-content 200px max-content max-content;
    overflow-y: auto;
    align-content: start;
  }
  .sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .sortie-presets {
    grid-column: 1; grid-row: 1; flex-direction: row;
  }
  .sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .sortie-party { grid-column: 1; grid-row: 2; }
  .sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .sortie-opponent { grid-column: 1; grid-row: 3; overflow: visible; }
  .sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .sortie-enemy { flex-direction: row; align-items: center; }
  .sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .sortie-actions { grid-column: 1; grid-row: 4; }

  .formation-detail-screen .formation-detail-shell[data-ui-orientation="landscape"] .formation-detail-content {
    display: flex; flex-direction: column; overflow-y: auto;
  }
  .formation-detail-screen .formation-detail-shell[data-ui-orientation="landscape"] .formation-detail-content > * { flex: 0 0 auto; }
  .formation-detail-screen .formation-detail-shell[data-ui-orientation="landscape"] .formation-detail-card__art { height: 65cqw; }
  .formation-detail-screen .formation-detail-shell[data-ui-orientation="landscape"] .formation-detail-back { align-self: flex-start; }
  .formation-detail-screen .formation-detail-shell[data-ui-orientation="landscape"] .formation-detail-tab-panel { overflow: visible; }
}

@media (max-height: 360px) and (orientation: landscape) {
  .sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .sortie-presets {
    justify-content: flex-start;
    overflow-y: auto;
    scrollbar-width: none;
  }
}

/* どこを飾りの書体で出すか。
 *
 * 既定（body）は本文の書体（--font-body）。ここに並ぶのは、そこから
 * **飾りの書体（--font-display）へ引き上げる側**だけ。逆にすると、名指しを
 * 忘れた文章が全部飾りの字で出る -- 文章のほうが多いので、多いほうを既定に
 * している。
 *
 * 引き上げる基準は「読ませる量」。一目で押す/見分けるための短い語は飾り、
 * 読み下す文は本文。
 *
 *   飾り … 画面の見出し、パネルの見出し、ボタンの文字、名前、数値、
 *          レアリティ、戦力、ダメージ
 *   本文 … 会話、獲得の台詞、スキルの説明、案内文、編集画面の但し書き
 *
 * ボタンは font: inherit で body から継ぐ（01-base/document.css）ので、
 * ここで button を名指ししないと本文の字のままになる。 */

:is(h1, h2, h3),
.screen-shell__title,
.screen-shell__eyebrow,
.screen-panel__title,
button,
.screen-action,
.game-bottom-nav__item,
.home-bottom-nav-label,
.battle-slot-button,
.story-slot-button {
  font-family: var(--font-display);
}

/* 名前と数値。見分けるためのもので、読み下すものではない。 */
.formation-slot-card__stat-label,
.formation-slot-card__stat-value,
.attribute-card-icon__rarity,
.gacha-presentation-card__name,
.gacha-presentation-card__rarity,
.gacha-presentation-nameplate,
.gacha-presentation-leadin__headline,
.battle-impact-number,
.battle-state-badge,
.formation-detail-card__rarity,
.home-player-name-tag,
.home-resource-value {
  font-family: var(--font-display);
}

/* 逆向きの指定。上の一括（button など）に巻き込まれるが、実際は読ませる文の
   ほうを、本文の書体へ戻す。 */
.battle-voice,
.gacha-presentation-voice,
.story-reader-text,
.content-editor-skill-effect-summary__body,
.screen-empty,
.hint {
  font-family: var(--font-body, var(--font-display));
}

/* 語を絵に差し替えたとき。
 *
 * 文字だったときの大きさ（1em）を基準に高さを決め、幅は絵の比率のまま。
 * 幅を決めて高さを従わせると、語の長さが違うだけで字の大きさが変わる
 * （「ホーム」と「ショップ」で高さが違う下部バーになる）。 */
.home-bottom-nav-label--image {
  width: auto;
  height: calc(1em * var(--nav-label-scale));
  object-fit: contain;
}

.battle-slot-button-label--image,
.story-slot-button-label--image {
  width: auto;
  height: calc(1em * var(--entry-label-scale));
  object-fit: contain;
}

/* 作り手の絵が入ったパーツ。
   ここが受け持つのは一つだけ: 画像が入ったスロットから、既定スキンの装飾を
   降ろすこと。枠線・角丸・影・下地は「絵が無いとき用」の見た目であって、
   誰かが描いた絵の上に残してよいものではない。丸(border-radius: 999px)が
   残っていると、四角く書き出したUIが丸く切り抜かれて見える。

   The uploaded art *is* the chrome. A skin that keeps its own ring, border and
   shadow over someone else's artwork is not a skin, it is a frame around it.

   読み込み順の最後（scripts/build-styles.mjs の styleSourceFiles）に置いてある。
   降ろす相手 -- .home-side-tool の丸、.home-bottom-nav-item の丸、
   .screen-panel の枠 -- は全部これより前のファイルで、同じ詳細度なので
   順番で勝つしかない。詳細度を上げて割り込む形にすると、次に誰かがスキンを
   足すたびに同じ勝負をやり直すことになる。 */

.home-editable-part--image,
.game-screen-part--has-asset,
.game-frame-part--has-asset {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

/* 絵は絵のまま出す。以前は画面ごとに違う色を薄く重ねていた -- ホームは素の
   まま、ゲーム画面の枠は黒10%、画面パーツは白12% -- ので、同じ素材が画面に
   よって違う色で出ていた。重ねたい色があるなら絵の側で決めることなので、
   ここでは何も足さない。 */
.home-editable-part--image,
.game-screen-part--has-asset,
.game-frame-part--has-asset {
  background-repeat: no-repeat;
}

/* A v2 button has two assets: its base stays on the interactive element and
   its icon is a separate transparent image. Dynamic labels and aria names are
   therefore never baked into either bitmap. */
/* ボタンの中の絵柄。

   大きさは**ボタンに対する割合**で持つ。ボタンごとに px で持つと、ボタンの
   大きさを変えるたびに絵柄も打ち直すことになる。

   横は中央に自動で寄せる（左右の余りを半分ずつ）。作り手が合わせたいのは
   たいてい「大きさ」と「上下の位置」で、左右は中央でよい -- 3つの数を
   合わせないと中央にならない作りは、合わせている途中がいつも歪む。 */
.home-editable-part__icon-image {
  --part-icon-scale: 1;
  --part-icon-width: calc(68% * var(--part-icon-scale));
  --part-icon-height: calc(68% * var(--part-icon-scale));
  --part-icon-top: 16%;
  position: absolute;
  z-index: 2;
  top: var(--part-icon-top);
  left: calc((100% - var(--part-icon-width)) / 2);
  width: var(--part-icon-width);
  height: var(--part-icon-height);
  object-fit: contain;
  pointer-events: none;
}

.home-editable-part--custom-icon :is(.home-ui-glyph, .home-bottom-nav-icon, .story-slot-button-icon, .battle-slot-button-icon) {
  visibility: hidden;
}

.home-bottom-nav-item .home-editable-part__icon-image {
  --part-icon-scale: var(--nav-icon-scale);
  --part-icon-width: calc(46% * var(--part-icon-scale));
  --part-icon-height: calc(54% * var(--part-icon-scale));
  --part-icon-top: var(--nav-icon-top);
}

/* 遊ぶ入口の2つ（ストーリー・戦闘開始）。横長のボタンで、絵柄は左に寄せる
   -- 右には文字が入る。ここだけ左を割合で持つ。 */
:is(.story-slot-button, .battle-slot-button) .home-editable-part__icon-image {
  --part-icon-scale: var(--entry-icon-scale);
  --part-icon-width: calc(28% * var(--part-icon-scale));
  --part-icon-height: calc(60% * var(--part-icon-scale));
  --part-icon-top: var(--entry-icon-top);
  left: var(--entry-icon-left);
}

/* パーツ調整ツール。
 *
 * 作っている最中だけ出るもの（?calibrate=1）なので、ゲームの見た目には
 * 合わせない。合わせると、いま見ているのがゲームなのか道具なのか分からなく
 * なる -- 道具は道具の顔をしているほうが、隣に置いた画面を汚さない。
 *
 * 右端に寄せて縦に置くのは、合わせる相手（枠・一覧・カード）が画面の左と
 * 真ん中にいるから。重ねると、動かした結果が自分の下に隠れる。 */
.calibrator-panel {
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 42vw);
  overflow-y: auto;
  padding: 10px;
  color: #e6e9ee;
  background: #262a31;
  border-left: 1px solid #3a4048;
  font-family: "Segoe UI", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

.calibrator-elements input[type="number"], .calibrator-elements select, .calibrator-elements textarea { min-width: 0; width: 100%; box-sizing: border-box; }
.calibrator-elements .calibrator-row { display: grid; grid-template-columns: 1fr 100px; align-items: center; }
.calibrator-elements > button { min-height: 32px; margin: 4px 0; }

.calibrator-header {
  position: sticky;
  z-index: 1;
  top: -10px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -10px -10px 8px;
  padding: 10px;
  background: #262a31;
  border-bottom: 1px solid #3a4048;
}

.calibrator-title {
  flex: 1;
  font-size: 13px;
}

.calibrator-action {
  padding: 5px 9px;
  color: inherit;
  border: 1px solid #3a4048;
  border-radius: 4px;
  background: #2e333b;
  cursor: pointer;
  font: inherit;
}

.calibrator-action:hover {
  background: #3a414c;
}

.calibrator-group {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #3a4048;
  border-radius: 6px;
  background: #2e333b;
}

.calibrator-group__name {
  margin: 0 0 6px;
  color: #ffb454;
  font-size: 12px;
}

/* 一行は 名前 / 数値 / スライダ / 単位 / 戻す、そのあとに実測と但し書きが
   ぶら下がる。触った行だけ左に色を出す -- どれを動かしたかは、書き出しを
   見に行かなくても分かるべき。 */
.calibrator-row {
  display: grid;
  grid-template-columns: 1fr auto minmax(0, 1.3fr) auto auto;
  align-items: center;
  gap: 4px 6px;
  padding: 5px 6px;
  border-left: 2px solid transparent;
}

.calibrator-row[data-calibrator-changed="true"] {
  border-left-color: #4da3ff;
  background: #2a3a4d;
}

.calibrator-row__label {
  min-width: 0;
}

.calibrator-row__number {
  width: 74px;
}

.calibrator-row__number,
.calibrator-row__slider {
  min-width: 0;
}

.calibrator-row__number {
  padding: 3px 5px;
  color: inherit;
  border: 1px solid #3a4048;
  border-radius: 4px;
  background: #1a1d22;
  font: inherit;
}

.calibrator-row__unit {
  color: #9aa4b2;
  white-space: nowrap;
}

.calibrator-row__reset {
  padding: 3px 7px;
  color: inherit;
  border: 1px solid #3a4048;
  border-radius: 4px;
  background: #2e333b;
  cursor: pointer;
  font: inherit;
}

.calibrator-row__reset:disabled {
  opacity: 0.35;
  cursor: default;
}

.calibrator-row__measured,
.calibrator-row__note {
  grid-column: 1 / -1;
  margin: 0;
  color: #9aa4b2;
  font-size: 11px;
}

.calibrator-row__measured {
  color: #5ad18f;
}

.calibrator-footer {
  display: grid;
  gap: 6px;
}

.calibrator-output {
  width: 100%;
  padding: 6px;
  color: inherit;
  border: 1px solid #3a4048;
  border-radius: 4px;
  background: #1a1d22;
  font-family: ui-monospace, "Consolas", monospace;
  font-size: 11px;
  resize: vertical;
}

/* 精密配置の段。行き先を選んで、X/Y/幅/高 を打つ。 */
.calibrator-placement__picker {
  width: 100%;
  margin-bottom: 6px;
  padding: 4px 6px;
  color: inherit;
  border: 1px solid #3a4048;
  border-radius: 4px;
  background: #1a1d22;
  font: inherit;
}

.calibrator-placement__fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.calibrator-placement__field {
  display: grid;
  gap: 2px;
}

.calibrator-placement__field .calibrator-row__number {
  width: 100%;
}

.calibrator-placement__axis {
  color: #9aa4b2;
  font-size: 11px;
}

.calibrator-placement__actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* 書体の見比べ。見本は実際に使う語で出す -- 「あいうえお」で選んだ書体は、
   「戦闘開始」で見たときに別の顔をしている。 */
.calibrator-fonts__row {
  display: grid;
  grid-template-columns: 5em minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.calibrator-fonts__row .calibrator-placement__picker {
  margin-bottom: 0;
}

.calibrator-fonts__sample {
  margin: 6px 0 2px;
  padding: 8px;
  border-radius: 4px;
  background: #1a1d22;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: 18px;
  line-height: 1.5;
}

/* Direct manipulation is the primary surface; advanced controls stay folded. */
.calibrator-panel { top: 8px; right: 8px; bottom: auto; width: min(330px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); border: 1px solid #56616d; border-radius: 10px; box-shadow: 0 6px 24px #0005; }
.calibrator-header { flex-wrap: wrap; }
.calibrator-title { flex-basis: 100%; }
.calibrator-panel[data-collapsed="true"] > :not(.calibrator-header) { display: none; }
.calibrator-panel button, .calibrator-panel select, .calibrator-panel summary { min-height: 36px; }
.calibrator-direct-toggle { width: 100%; background: #426d4f; }
.calibrator-direct-toggle[aria-pressed="true"] { background: #8c512e; }
.calibrator-direct-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.calibrator-direct-status { color: #f4deb5; margin: 8px 0; overflow-wrap: anywhere; }
.calibrator-direct-hint { color: #b9c3ce; margin: 6px 0; }
.calibrator-details, .calibrator-advanced { margin-top: 10px; border-top: 1px solid #46505c; }
.calibrator-details > summary, .calibrator-advanced > summary { cursor: pointer; padding: 8px 0; }
.calibrator-selection { position: fixed; z-index: 1999; box-sizing: border-box; outline: 2px solid #f3ae48; outline-offset: 2px; pointer-events: none; }
.calibrator-selection[data-drag-surface="element"] { pointer-events: auto; cursor: move; touch-action: none; }
.calibrator-selection__caption { pointer-events: auto; cursor: move; touch-action: none; }
.calibrator-selection[hidden] { display: none !important; }
.calibrator-selection__caption { position: absolute; left: 0; bottom: calc(100% + 6px); max-width: 240px; padding: 2px 6px; background: #222d37; color: #fff; border-radius: 3px; font: 12px/1.4 sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calibrator-resize-handle { position: absolute; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; pointer-events: auto; touch-action: none; }
.calibrator-resize-handle::after { content: ""; position: absolute; inset: 8px; border: 2px solid #6a4310; background: #ffde86; border-radius: 3px; }
.calibrator-resize-handle[data-corner="nw"] { left: -14px; top: -14px; cursor: nwse-resize; }
.calibrator-resize-handle[data-corner="ne"] { right: -14px; top: -14px; cursor: nesw-resize; }
.calibrator-resize-handle[data-corner="sw"] { left: -14px; bottom: -14px; cursor: nesw-resize; }
.calibrator-resize-handle[data-corner="se"] { right: -14px; bottom: -14px; cursor: nwse-resize; }
.calibrator-selection[data-compact="true"] .calibrator-resize-handle:not([data-corner="se"]) { display: none; }
[data-calibration-direct="true"] #app { user-select: none; touch-action: none; }
[data-calibration-direct="true"] #app :is([data-calibration-key],img,svg,span,p,strong,h1,h2,button,.home-ui-glyph) { pointer-events: auto !important; cursor: move; touch-action: none; }
[data-calibration-direct="true"] #app :is([data-calibration-key],img,svg,.pf-label):hover { outline: 1px dashed #f3ae48; }
@media (max-width: 700px) {
  .calibrator-panel { top: auto; bottom: 8px; left: 8px; right: 8px; width: auto; max-height: 38dvh; font-size: 13px; }
  .calibrator-panel button, .calibrator-panel select, .calibrator-panel summary { min-height: 44px; }
  .calibrator-panel .calibrator-title { display: none; }
}
@media (pointer: coarse) {
  .calibrator-resize-handle { width: 44px; height: 44px; }
  .calibrator-resize-handle::after { inset: 14px; }
  .calibrator-resize-handle[data-corner="nw"] { left: -22px; top: -22px; }
  .calibrator-resize-handle[data-corner="ne"] { right: -22px; top: -22px; }
  .calibrator-resize-handle[data-corner="sw"] { left: -22px; bottom: -22px; }
  .calibrator-resize-handle[data-corner="se"] { right: -22px; bottom: -22px; }
}

.calibrator-elements > h3 { margin: 0 0 6px; font-size: 14px; }

/* In calibration, moved stat labels must remain selectable over equipment. */
[data-calibration-direct="true"] :is(.formation-screen,.sortie-screen) .formation-slot-card__stats { z-index: 30; pointer-events: none; }
[data-calibration-direct="true"] :is(.formation-screen,.sortie-screen) .formation-slot-card__stats :is(img,output,[data-calibration-text]) { pointer-events: auto; }

/* 起動の儀式。
 *
 * 2枚とも黒地に文字ひとつ。**タイトルの前に来るものは、タイトルより静かで
 * なければならない** -- ここが賑やかだと、タイトルが山にならない。
 *
 * 色は token を使わず黒で固定する。作品ごとの配色は「作品が始まってから」の
 * ものであって、スタジオ名の背後にあると作品の一部に見えてしまう。 */

.boot-studio,
.boot-loading {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  padding: calc(var(--screen-viewport-gap) / 2);
  background: var(--paper);
  color: #f4f1ea;
  z-index: 60;
}

.boot-studio__content {
  display: grid;
  justify-items: center;
  gap: 0.8em;
  /* 出入りは opacity だけで行う。動かすと「登場」になってしまい、社名が
     演出になる。ここは名乗るだけの場所。 */
  opacity: 0;
  transition: none;
  width: 90%;
  text-align: center;
}

.boot-studio[data-boot-phase="in"] .boot-studio__content,
.boot-studio[data-boot-phase="hold"] .boot-studio__content {
  opacity: 1;
}

.boot-studio[data-boot-phase="out"] .boot-studio__content {
  opacity: 0;
}

.boot-studio__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  /* 社名は字間を広く取る。詰まった社名はロゴではなく文になる。 */
  letter-spacing: 0.32em;
  /* 字間を広げた分、右端に空きが出る。その半分を戻して中央に見せる。 */
  text-indent: 0.32em;
  font-size: clamp(16px, 4.6cqw, 30px);
  color: #f4f1ea;
}

.boot-studio__logo {
  width: min(76%, 440px); max-height: 45%; object-fit: contain;
  height: auto;
}

/* 画面ぜんぶが飛ばすためのボタン。見えないが、触れる。 */
.boot-studio__skip {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.boot-loading__content {
  display: grid;
  justify-items: center;
  gap: 1.1em;
  width: min(84%, 560px);
  text-align: center;
}

.boot-loading__tip-label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  letter-spacing: 0.22em;
  font-size: clamp(9px, 2.4cqw, 12px);
  color: #9a9689;
}

.boot-loading__tip {
  margin: 0;
  /* 読ませる文なので本文の書体。ここだけは飾らない。 */
  font-family: var(--font-body, inherit);
  font-size: clamp(12px, 3.4cqw, 16px);
  line-height: 1.8;
  color: #ded9cd;
}

.boot-loading__label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  letter-spacing: 0.18em;
  font-size: clamp(10px, 2.8cqw, 13px);
  color: #8d8879;
}

/* Keep studio branding separate; loading uses the shared fantasy palette. */
.screen-shell.boot-loading { display: grid; background: #252b24; grid-template-rows: 1fr; grid-template-columns: 1fr; }
.boot-loading__label, .boot-loading__tip-label { color: #e1c987; }
.boot-loading__tip { color: #fff6e3; }
@media (prefers-reduced-motion: reduce) {
  .boot-studio__content { transition: none; }
}

.boot-studio__shell, .boot-loading__shell { display: grid; place-items: center; padding: 0; }
.boot-studio__shell { background: #080a0b; }
.screen-shell.boot-loading { background: var(--paper); }
.boot-loading__shell { background: #252b24; }
.boot-studio[data-boot-phase="in"] .boot-studio__content { animation: studioArrival var(--studio-in) ease-out both; }
.boot-studio[data-boot-phase="out"] .boot-studio__content { animation: studioDeparture var(--studio-out) ease-in both; }
@keyframes studioArrival { from { opacity: 0; transform: scale(.96); filter: blur(3px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes studioDeparture { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .boot-studio .boot-studio__content { animation: none; } }

/* 公開ポータル（/play/<token>/site）。
 *
 * ゲームの画面ではなく「作品の公式サイト」なので、アプリの面の規則（文字を
 * 選べない、跳ねない）はここでは外す。色と書体は告知画像と同じ系統の変数
 * （--portal-*、portal-screen.mjs が入れる）から取り、作品ごとの顔にする。 */

.portal {
  --gutter: clamp(16px, 4vw, 56px);
  position: relative;
  min-height: 100dvh;
  overflow-x: clip;
  color: var(--portal-ink);
  background: linear-gradient(160deg, var(--portal-base), var(--portal-edge));
  font-family: var(--portal-body-font);
  font-size: 16px;
  line-height: 1.75;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.portal :where(a) { color: inherit; }
/* アプリ全体の古い規則（p を灰色にする）を持ち込まない。:where で強さを
   class 一つ分に抑え、下の個別の色指定が勝つようにする。 */
.portal :where(p, h1, h2, h3) { color: inherit; }
.portal img { display: block; max-width: 100%; }

/* ---- 上部の案内 ---- */
.portal-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter);
  background: linear-gradient(180deg, color-mix(in srgb, var(--portal-edge) 92%, transparent), color-mix(in srgb, var(--portal-edge) 55%, transparent));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--portal-accent) 45%, transparent);
}
.portal-nav__title { font-family: var(--portal-display-font); font-weight: var(--portal-display-weight); font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.portal-nav__links { display: flex; align-items: center; gap: clamp(10px, 2.5vw, 28px); font-size: 14px; font-weight: 700; flex-shrink: 0; }
.portal-nav__link { text-decoration: none; opacity: .85; }
.portal-nav__link:hover { opacity: 1; text-decoration: underline; }
.portal-nav__play { text-decoration: none; padding: 6px 16px; border-radius: 999px; background: var(--portal-ribbon); color: var(--portal-ribbon-ink); box-shadow: 0 0 0 2px var(--portal-accent); }

/* ---- 最初の一画面 ---- */
.portal-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: min(calc(100dvh - 56px), 860px);
  padding: clamp(40px, 8vh, 96px) var(--gutter);
}
.portal-hero__backdrop { position: absolute; inset: -12px; z-index: -4; background-size: cover; background-position: center; filter: blur(3px) saturate(1.15); opacity: .5; }
.portal-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(circle at 68% 42%, color-mix(in srgb, #fff 45%, var(--portal-glow)) 0, var(--portal-glow-soft) 22%, transparent 60%),
    linear-gradient(90deg, var(--portal-base) 0%, color-mix(in srgb, var(--portal-base) 55%, transparent) 50%, transparent 80%);
}
.portal-hero__rays {
  position: absolute; left: 68%; top: 42%; width: 240vmax; height: 240vmax; z-index: -3;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, #fff 16%, transparent) 0 4deg, transparent 4deg 18deg);
  mask-image: radial-gradient(circle, #000 0, transparent 45%);
  animation: portal-rays 90s linear infinite;
}
@keyframes portal-rays { to { rotate: 1turn; } }
.portal-hero__ghost {
  position: absolute; left: -2vw; bottom: -.18em; z-index: -2;
  font-family: var(--portal-display-font); font-weight: var(--portal-display-weight);
  font-size: clamp(110px, 20vw, 300px); line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 2px var(--portal-accent); opacity: .22;
  pointer-events: none; user-select: none;
}
.portal-hero__art {
  position: absolute; right: -2%; bottom: -6%; z-index: -1;
  height: 112%; max-width: 64%; object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 0 28px var(--portal-glow)) drop-shadow(0 18px 30px rgba(0, 0, 0, .35));
  animation: portal-rise 1.1s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes portal-rise { from { opacity: 0; translate: 0 40px; } }
/* 不透明な一枚絵は、斜めに切った大窓で右端まで。 */
.portal-hero[data-art-kind="window"] .portal-hero__art {
  top: 0; bottom: 0; right: 0; height: 100%; width: 58%; max-width: none;
  object-fit: cover; object-position: center 25%;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  filter: none;
}
.portal-hero[data-art-kind="window"]::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 42%; width: 10.44%; z-index: -1;
  background: linear-gradient(to bottom left, transparent calc(50% - 5px), var(--portal-accent) calc(50% - 5px), var(--portal-accent) calc(50% + 5px), transparent calc(50% + 5px));
  pointer-events: none;
}
.portal-hero__copy { position: relative; max-width: min(620px, 58%); display: grid; gap: 22px; justify-items: start; }
.portal-hero[data-has-art="false"] .portal-hero__copy { max-width: 820px; margin: 0 auto; justify-items: center; text-align: center; }
.portal-hero__logo { max-height: 260px; width: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }

/* 名前と作品名は、告知画像と同じ「縁取り＋上下の色の流れ」。本体は太い縁だけを
   描き、同じ文字（data-text）を上に重ねて色の流れで塗る。 */
.portal-hero__title,
.portal-showcase__name,
.portal-closing__title {
  position: relative; margin: 0;
  font-family: var(--portal-display-font); font-weight: var(--portal-display-weight);
  line-height: 1.08; letter-spacing: .02em; text-wrap: balance;
  color: var(--portal-name-outline); -webkit-text-stroke: .14em var(--portal-name-outline);
  filter: drop-shadow(0 6px 14px var(--portal-name-shadow));
}
.portal-hero__title::after,
.portal-showcase__name::after,
.portal-closing__title::after {
  content: attr(data-text); position: absolute; inset: 0;
  -webkit-text-stroke: 0;
  background: linear-gradient(180deg, var(--portal-name-top), var(--portal-name-mid) 55%, var(--portal-name-bottom));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.portal-hero__title { font-size: clamp(44px, 8vw, 116px); overflow-wrap: anywhere; }

.portal-hero__keywords { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.portal-keyword {
  padding: 4px 16px; font-weight: 800; font-size: 15px;
  color: var(--portal-ribbon-ink); background: var(--portal-ribbon);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.portal-play {
  display: inline-grid; justify-items: center; gap: 2px;
  padding: 16px 44px 14px; text-decoration: none;
  /* どのテーマの色でも読めるよう、主ボタンは白文字＋影で固定する。 */
  color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 0 1px rgba(0, 0, 0, .6);
  background: linear-gradient(180deg, color-mix(in srgb, var(--portal-ribbon) 70%, #fff), var(--portal-ribbon) 55%, color-mix(in srgb, var(--portal-ribbon) 75%, #000));
  border: 2px solid var(--portal-accent); border-radius: 999px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--portal-accent) 30%, transparent), 0 10px 30px color-mix(in srgb, var(--portal-glow) 55%, transparent);
  animation: portal-pulse 2.4s ease-in-out infinite;
}
.portal-play__label { font-family: var(--portal-display-font); font-weight: var(--portal-display-weight); font-size: clamp(22px, 3vw, 30px); letter-spacing: .08em; }
.portal-play__note { font-size: 12px; opacity: .85; }
.portal-play:hover { filter: brightness(1.08); }
@keyframes portal-pulse { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--portal-accent) 0%, transparent), 0 10px 40px color-mix(in srgb, var(--portal-glow) 75%, transparent); } }

/* ---- 世界観の帯 ---- */
.portal-world { overflow: hidden; padding: 14px 0; background: var(--portal-ribbon); color: var(--portal-ribbon-ink); border-block: 3px solid var(--portal-accent); }
.portal-world__track { display: flex; width: max-content; animation: portal-marquee 60s linear infinite; }
.portal-world__word { padding-inline: 28px; font-family: var(--portal-display-font); font-weight: var(--portal-display-weight); font-size: clamp(20px, 3vw, 34px); white-space: nowrap; }
.portal-world__word::after { content: "◆"; margin-left: 56px; font-size: .5em; vertical-align: middle; opacity: .7; }
@keyframes portal-marquee { to { translate: -50% 0; } }

/* ---- 節 ---- */
.portal-section { position: relative; isolation: isolate; padding: clamp(56px, 9vw, 110px) var(--gutter); }
.portal-heading { display: grid; justify-items: center; margin-bottom: clamp(28px, 5vw, 56px); text-align: center; }
.portal-heading__latin { font-family: var(--portal-latin-font); font-weight: 900; font-size: clamp(40px, 8vw, 96px); line-height: 1; letter-spacing: .08em; color: transparent; -webkit-text-stroke: 1.5px var(--portal-accent); opacity: .8; }
.portal-heading__title { margin: -.5em 0 0; font-family: var(--portal-display-font); font-weight: var(--portal-display-weight); font-size: clamp(22px, 3vw, 32px); }

/* ---- キャラクター ---- */
.portal-characters { background: radial-gradient(ellipse at 30% 55%, var(--portal-glow-soft), transparent 60%); }
.portal-characters__stage { max-width: 1100px; margin: 0 auto; }
.portal-showcase { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; animation: portal-rise .6s ease both; }
.portal-showcase__figure { position: relative; display: grid; place-items: end center; min-height: 420px; }
.portal-showcase__figure::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 40%; background: radial-gradient(ellipse at 50% 100%, var(--portal-glow-soft), transparent 70%); }
.portal-showcase__art { position: relative; max-height: 620px; width: auto; object-fit: contain; filter: drop-shadow(0 0 24px var(--portal-glow)); }
.portal-showcase__empty { display: grid; place-items: center; width: 240px; aspect-ratio: 1; border-radius: 50%; font-family: var(--portal-display-font); font-size: 120px; background: var(--portal-panel); border: 3px solid var(--portal-accent); }
.portal-showcase__info { display: grid; gap: 16px; justify-items: start; }
.portal-showcase__affiliation { margin: 0; padding: 2px 14px; font-weight: 800; font-size: 14px; color: var(--portal-ribbon-ink); background: var(--portal-ribbon); }
.portal-showcase__name { font-size: clamp(40px, 6vw, 84px); overflow-wrap: anywhere; }
.portal[data-portal-vertical="true"] .portal-showcase__name { writing-mode: vertical-rl; max-height: 420px; }
.portal-showcase__profile { margin: 0; padding: 18px 22px; background: var(--portal-panel); border-left: 5px solid var(--portal-accent); white-space: pre-line; }
.portal-showcase__arts { display: flex; flex-wrap: wrap; gap: 10px; }
.portal-showcase__thumb { width: 72px; height: 72px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px; background: var(--portal-panel); cursor: pointer; }
.portal-showcase__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.portal-showcase__thumb[aria-pressed="true"] { border-color: var(--portal-accent); box-shadow: 0 0 12px var(--portal-glow); }

.portal-roster { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; max-width: 1100px; margin: clamp(28px, 5vw, 48px) auto 0; }
.portal-roster__item { display: grid; justify-items: center; gap: 6px; width: 96px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.portal-roster__face { display: grid; place-items: center; width: 84px; height: 84px; overflow: hidden; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--portal-accent) 45%, transparent); background: var(--portal-panel); font-family: var(--portal-display-font); font-size: 34px; transition: transform .2s, border-color .2s; }
.portal-roster__face img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.portal-roster__name { font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.portal-roster__item[aria-selected="true"] .portal-roster__face { border-color: var(--portal-accent); transform: scale(1.08); box-shadow: 0 0 18px var(--portal-glow); }

/* ---- ストーリー ---- */
.portal-stories__list { display: grid; gap: 18px; max-width: 900px; margin: 0 auto; padding: 0; list-style: none; counter-reset: story; }
.portal-story { position: relative; padding: 22px 26px 22px 30px; background: var(--portal-panel); border-left: 6px solid var(--portal-accent); }
.portal-story__chapter { display: inline-block; padding: 1px 12px; font-size: 13px; font-weight: 800; color: var(--portal-ribbon-ink); background: var(--portal-ribbon); }
.portal-story__title { margin: 8px 0 0; font-family: var(--portal-display-font); font-weight: var(--portal-display-weight); font-size: clamp(22px, 3vw, 30px); line-height: 1.3; }
.portal-story__synopsis { margin: 10px 0 0; white-space: pre-line; opacity: .92; }

/* ---- 締め ---- */
.portal-closing { display: grid; justify-items: center; gap: 22px; padding: clamp(64px, 10vw, 120px) var(--gutter); text-align: center; background: radial-gradient(ellipse at 50% 60%, var(--portal-glow-soft), transparent 65%); }
.portal-closing__title { margin: 0; font-family: var(--portal-display-font); font-weight: var(--portal-display-weight); font-size: clamp(30px, 5vw, 60px); line-height: 1.2; overflow-wrap: anywhere; }
.portal-copy { padding: 8px 18px; font: inherit; font-size: 14px; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 999px; cursor: pointer; }
.portal-copy__status { min-height: 1.5em; margin: 0; font-size: 14px; }
.portal-footer { padding: 24px var(--gutter) 40px; text-align: center; font-size: 13px; opacity: .75; }
.portal-failure { display: grid; gap: 16px; justify-items: center; padding: 64px 16px; text-align: center; }

/* ---- 系統ごとの味付け ---- */
.portal[data-portal-family="tech"] .portal-section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--portal-glow-soft) 1px, transparent 1px), linear-gradient(90deg, var(--portal-glow-soft) 1px, transparent 1px);
  background-size: 48px 48px; opacity: .35;
}
.portal[data-portal-family="tech"] .portal-hero__rays {
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, #fff 10%, transparent) 0 1deg, transparent 1deg 12deg);
}
.portal[data-portal-family="tech"] .portal-play,
.portal[data-portal-family="tech"] .portal-nav__play { border-radius: 2px; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.portal[data-portal-family="pop"] .portal-section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--portal-vivid) 30%, transparent) 2.5px, transparent 3px);
  background-size: 22px 22px; mask-image: linear-gradient(135deg, #000, transparent 45%);
}
.portal[data-portal-family="pop"] .portal-story,
.portal[data-portal-family="pop"] .portal-showcase__profile { border: 3px solid var(--portal-ink); box-shadow: 6px 6px 0 var(--portal-ink); }
.portal[data-portal-family="wa"] .portal-hero::after {
  content: ""; position: absolute; right: 12%; top: 12%; z-index: -2; width: min(46vw, 560px); aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, var(--portal-vivid) 70%, transparent); pointer-events: none;
}
.portal[data-portal-family="wa"] .portal-hero[data-art-kind="window"]::after { right: auto; top: 0; width: 10.44%; aspect-ratio: auto; border-radius: 0; background: linear-gradient(to bottom left, transparent calc(50% - 5px), var(--portal-accent) calc(50% - 5px), var(--portal-accent) calc(50% + 5px), transparent calc(50% + 5px)); }
.portal[data-portal-family="soft"] .portal-story,
.portal[data-portal-family="soft"] .portal-showcase__profile { border-left: 0; border-radius: 22px; box-shadow: 0 8px 24px color-mix(in srgb, var(--portal-vivid) 18%, transparent); }
.portal[data-portal-family="soft"] .portal-keyword { clip-path: none; border-radius: 999px; }
.portal[data-portal-family="luxe"] .portal-story { border-left: 0; outline: 1px solid color-mix(in srgb, var(--portal-accent) 60%, transparent); outline-offset: -6px; box-shadow: inset 0 0 0 1px var(--portal-accent); }

/* ---- 狭い画面：絵を背に敷き、文字を下に ---- */
@media (max-width: 760px) {
  .portal-nav__link { display: none; }
  .portal-hero { align-items: end; min-height: calc(100dvh - 52px); }
  .portal-hero__art { right: 50%; translate: 50% 0; height: 88%; max-width: 110%; bottom: 18%; }
  .portal-hero[data-art-kind="window"] .portal-hero__art { width: 100%; height: 70%; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); translate: none; right: 0; }
  .portal-hero[data-art-kind="window"]::after { display: none; }
  .portal-hero::before { background: radial-gradient(circle at 50% 36%, var(--portal-glow-soft), transparent 60%), linear-gradient(0deg, var(--portal-base) 22%, transparent 60%); }
  .portal-hero__copy { max-width: none; width: 100%; justify-items: center; text-align: center; }
  .portal-hero__keywords { justify-content: center; }
  .portal-showcase { grid-template-columns: minmax(0, 1fr); }
  .portal-showcase__figure { min-height: 0; }
  .portal-showcase__art { max-height: 440px; }
  .portal-roster__item { width: 76px; }
  .portal-roster__face { width: 66px; height: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-hero__rays, .portal-world__track, .portal-play, .portal-hero__art, .portal-showcase { animation: none; }
}

.ui-theme-picker { grid-column: 1 / -1; padding: 10px; border: 1px solid var(--pf-frame); border-radius: 10px; background: var(--pf-surface); color: var(--pf-outline); }
.ui-theme-picker > summary { cursor: pointer; font-weight: 700; font-size: 16px; }
.ui-theme-picker__body { display: grid; gap: 10px; padding-top: 12px; }
.ui-theme-picker__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ui-theme-card { display: grid; gap: 6px; min-width: 0; padding: 8px; background: var(--sample-surface); color: var(--sample-primary); border: 1px solid var(--sample-frame); border-radius: 8px; text-align: left; cursor: pointer; }
.ui-theme-card[aria-pressed="true"] { outline: 2px solid var(--pf-primary); outline-offset: 1px; }
.ui-theme-card strong { font-size: 14px; }
.ui-theme-card small { font-size: 11px; line-height: 1.5; }
.ui-theme-card__preview { height: 70px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 3px double var(--sample-frame); background: var(--sample-surface); }
.ui-theme-card[data-theme="simple"] .ui-theme-card__preview { border: 1px solid var(--sample-frame); border-radius: 8px; }
.ui-theme-card__preview i { width: 20%; height: 34px; border: 1px solid var(--sample-frame); border-radius: 3px; background: var(--sample-primary); opacity: .8; }
.ui-theme-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-theme-colors button { display: inline-flex; align-items: center; gap: 5px; }
.ui-theme-colors button::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--swatch); }
.ui-theme-picker__body button:not(.ui-theme-card) { min-height: 40px; padding: 6px 10px; border: 1px solid var(--pf-frame); border-radius: 7px; background: var(--pf-surface); color: var(--pf-primary); font-size: 12px; cursor: pointer; }
.ui-theme-colors button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--pf-primary); }
.ui-theme-picker__body > p { margin: 0; font-size: 12px; line-height: 1.5; }

/* The project palette changes UI chrome; custom artwork is never recolored. */
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) .home-game-canvas { --home-tool-frame: var(--theme-tool-frame); }
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) .home-announcement-board__summary::before,
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) .home-game-canvas > [data-ui-skin="standard"][data-ui-role="tool"]::before { background-image: var(--theme-tool-frame); }
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) :is(.collection-card-list, .formation-bench-card, .gacha-presentation-card--summary, .battle-result-card__art, .battle-party-card__icon) .attribute-card-icon::after { background-image: var(--theme-card-frame); }
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) :is(.home-announcement-close, .gacha-history-button, .gacha-info-button) { background-image: var(--theme-tool-frame); }
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) .home-game-frame { border-color: var(--pf-frame); box-shadow: none; }
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) .home-game-canvas::after { border-color: var(--pf-frame); box-shadow: none; }

/* Complete built-in art changes with the theme, not only its border colors. */
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) [data-ui-skin="standard"] > .pf-nav-art { display: none; }
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) [data-ui-skin="standard"][data-nav-art-ready="true"] > :is(.home-bottom-nav-icon,.home-editable-part__icon-image,.home-bottom-nav-label) { visibility: visible; }
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) [data-ui-skin="standard"] .pf-label::after { display: none; }
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) [data-ui-skin="standard"] .pf-label__text { position: static; width: auto; height: auto; clip-path: none; overflow: visible; color: var(--pf-primary); font-family: var(--theme-label-font); font-weight: var(--theme-label-weight); letter-spacing: var(--theme-label-spacing); font-size: calc(var(--pf-label-height) * .85); line-height: 1.15; white-space: nowrap; text-shadow: none; }
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) .battle-enemy-avatar:not(.battle-enemy-avatar--image) { background-image: var(--theme-battle-art); }
.ui-edit-guide { grid-column: 1 / -1; font-size: 13px; line-height: 1.6; }

:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) [data-ui-skin="standard"]:is([data-ui-role="primary-action"],[data-ui-role="secondary-action"]) .pf-label__text { color: #fff; }

:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]):not([data-ui-raster-kit="true"]) .home-level-badge { background-image: var(--theme-rank-art); }
.ui-legacy-controls { grid-column: 1 / -1; }
.ui-legacy-controls > summary { cursor: pointer; padding: 10px; }

.ui-theme-card[data-theme="tactical"] .ui-theme-card__preview { border: 3px double var(--sample-frame); border-radius: 0; clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.ui-theme-card[data-theme="tactical"] .ui-theme-card__preview i { border-radius: 0; background: repeating-linear-gradient(135deg,var(--sample-primary) 0 5px,var(--sample-frame) 5px 7px); }
[data-ui-theme-kit="tactical"] { --pf-radius: 3px; --radius-sm: 3px; --radius-md: 5px; }
[data-ui-theme-kit="tactical"] :is(.formation-preset,.sortie-preset,.home-character-panel__choice)[aria-pressed="true"] { color: #172017; }
[data-ui-theme-kit="tactical"] :is(.story-mode-tab,.formation-detail-tab)[aria-selected="true"] { color: var(--pf-primary); }
[data-ui-theme-kit="tactical"] .home-game-canvas > [data-ui-skin="standard"][data-ui-role="navigation-item"] { color: var(--pf-primary); }
[data-ui-theme-kit="tactical"] :is(.formation-screen,.sortie-screen) .formation-slots { background: var(--pf-surface); }
[data-ui-theme-kit="tactical"] :is(.formation-screen,.sortie-screen) .formation-slots > .formation-slot-frame { background-image: var(--theme-formation-frame); mask: none; }
[data-ui-theme-kit="tactical"] :is(.formation-screen,.sortie-screen) .formation-slot-card__stat-word { filter: brightness(0) invert(.9); }
[data-ui-theme-kit="tactical"] .home-notice-banner__copy { background: var(--pf-surface); color: var(--pf-outline); }
[data-ui-theme-kit="tactical"] .home-profile-panel :is(h2,h3) { color: var(--pf-primary); }
[data-ui-theme-kit="tactical"] .home-character-panel .home-character-panel__face--symbol { background: var(--pf-surface-raised); }
[data-ui-theme-kit="tactical"] :is(.battle-mode-chip,.battle-actions .screen-action:disabled) { background: var(--pf-primary-soft); color: var(--pf-primary); }

:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]):not([data-ui-raster-kit="true"]) .home-game-canvas .home-level-badge::before, :is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]):not([data-ui-raster-kit="true"]) .home-level-badge[data-ui-asset-source="theme"] { background-image: var(--theme-rank-art) !important; }
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) .home-tools-menu-toggle > span { position: relative; z-index: 2; color: var(--pf-primary); }

[data-ui-theme-kit="tactical"] [data-ui-skin="standard"][data-ui-role="secondary-action"] .pf-label__text { color: #172017; }

/* Label art and live lettering share a box, but not the fantasy sprite ratio.
   Custom image labels and saved parent geometry remain independent. */
[data-ui-theme-kit="simple"] {
  --theme-label-font: "Noto Sans JP", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --theme-label-weight: 600;
  --theme-label-spacing: .025em;
  --theme-nav-radius: 10px;
}
[data-ui-theme-kit="tactical"] {
  --theme-label-font: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --theme-label-weight: 900;
  --theme-label-spacing: .065em;
  --theme-nav-radius: 2px;
}
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) [data-ui-skin="standard"] .pf-label {
  aspect-ratio: auto; min-width: 0; overflow: visible;
}
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) [data-ui-orientation="landscape"] .home-bottom-nav-item[data-ui-skin="standard"][data-nav-art-ready="true"] > .home-bottom-nav-label {
  display: inline-grid;
}
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) .home-bottom-nav-item[data-ui-skin="standard"] {
  border-radius: var(--theme-nav-radius); text-shadow: none;
}
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]):not([data-ui-raster-kit="true"]) .home-bottom-nav-item[data-ui-skin="standard"].home-bottom-nav-item--active {
  background-color: var(--pf-primary-soft);
  box-shadow: inset 0 -2px 0 var(--pf-primary);
}
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]):not([data-ui-raster-kit="true"]) .home-bottom-nav-item[data-ui-skin="standard"].home-bottom-nav-item--active::before {
  display: none;
}
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"],[data-ui-theme-family="urban"],[data-ui-theme-family="world"]) .home-bottom-nav-item[data-ui-skin="standard"]:focus-visible {
  outline: 2px solid var(--pf-primary); outline-offset: -3px;
}

/* The five illustrated families share behavior, but keep their own motifs and type. */
:is([data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) :is(.formation-screen,.sortie-screen) .formation-slots { background: var(--pf-surface); }
:is([data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) :is(.formation-screen,.sortie-screen) .formation-slots > .formation-slot-frame { background-image: var(--theme-formation-frame); mask: none; }
:is([data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) .home-notice-banner__copy { background: var(--pf-surface); color: var(--pf-outline); }
:is([data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) .formation-slot-card__stat-word { filter: none; }
:is([data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-palette="sumi"]) .formation-slot-card__stat-word { filter: brightness(0) invert(.9); }
[data-ui-theme-palette="blue-white"] .formation-slot-card__stat-word { filter: none; }
[data-ui-theme-kit="kawaii"] { --pf-radius: 18px; --radius-sm: 12px; --radius-md: 18px; }
[data-ui-theme-kit="gothic"] { --pf-radius: 3px; --radius-sm: 3px; --radius-md: 5px; }
:is([data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) { --pf-radius: 4px; --radius-sm: 4px; --radius-md: 6px; }
.ui-theme-card__preview img { width: 32px; height: 32px; object-fit: contain; }
.ui-theme-card[data-theme="kawaii"] .ui-theme-card__preview { border-radius: 20px; border-style: dashed; }
.ui-theme-card[data-theme="gothic"] .ui-theme-card__preview { border-radius: 28px 28px 2px 2px; }
.ui-theme-card[data-theme="wa-modern"] .ui-theme-card__preview { border-width: 1px; border-left-width: 5px; }
.ui-theme-card[data-theme="chinese"] .ui-theme-card__preview { border-width: 5px; border-style: double; }
.ui-theme-card[data-theme="japanese"] .ui-theme-card__preview { border-radius: 2px; border-style: double; }
:is([data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]):not([data-ui-raster-kit="true"]) .home-game-canvas--pop-fantasy-v2 .home-level-badge :is(.home-level-badge__caption,.home-level-badge__value) { color: var(--pf-primary); text-shadow: none; }

/* Genre kits keep geometry shared while frame assets supply the silhouettes. */
:is([data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) { --pf-radius: var(--theme-nav-radius); --radius-sm: var(--theme-nav-radius); }
:is([data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) .formation-slot-card__stat-word { filter: brightness(0) invert(.9); }
[data-ui-theme-kit="pixel"][data-ui-theme-palette="handheld"] .formation-slot-card__stat-word { filter: none; }
[data-ui-theme-kit="comic"] .home-bottom-nav-item[data-ui-skin="standard"].home-bottom-nav-item--active { box-shadow: inset 0 -3px 0 var(--pf-primary); outline: 2px solid var(--pf-primary); outline-offset: -3px; }
[data-ui-theme-kit="pixel"] .home-bottom-nav-item[data-ui-skin="standard"] img { image-rendering: pixelated; }
.ui-theme-card[data-theme="hologram"] .ui-theme-card__preview { border-style: solid; clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.ui-theme-card[data-theme="steampunk"] .ui-theme-card__preview { border-style: ridge; border-width: 5px; border-radius: 8px; }
.ui-theme-card[data-theme="comic"] .ui-theme-card__preview { border-style: solid; border-width: 4px; box-shadow: 3px 3px 0 var(--sample-primary); }
.ui-theme-card[data-theme="storybook"] .ui-theme-card__preview { border-style: dashed; border-radius: 12px 6px 14px 7px; }
.ui-theme-card[data-theme="celestial"] .ui-theme-card__preview { border-style: double; border-radius: 20px; }
.ui-theme-card[data-theme="occult"] .ui-theme-card__preview { border-style: dashed; border-radius: 0; }
.ui-theme-card[data-theme="pixel"] .ui-theme-card__preview { border-style: solid; border-width: 4px; border-radius: 0; image-rendering: pixelated; }
.ui-theme-card[data-theme="idol"] .ui-theme-card__preview { border-style: dotted; border-width: 4px; border-radius: 12px; }

/* Shared utility buttons use the selected theme's frame, not the old gold ring. */
[data-ui-theme-kit] .gacha-screen .gacha-utilities .game-disclosure__summary,
[data-ui-theme-kit] .gacha-screen .gacha-utilities .gacha-history-dock .gacha-history-button { background-image: var(--theme-tool-frame); }

/* Simple (theme review 2026-10-02): its solid silhouettes read heavy, so the
   navigation icons sit smaller; on accent-filled buttons (all three palettes
   are dark) icons turn white instead of disappearing into the fill. */
[data-ui-theme-kit="simple"] .home-bottom-nav[data-nav-layout="grid"] { --nav-icon-scale: .7; }
/* Round 8: the 10-pull and depart buttons are light art now, so their
   icons stay black like the rest (the white flip was for dark buttons). */
[data-ui-theme-kit="simple"] .screen-action--primary:not(.sortie-depart):not([data-gacha-pull-count]) img { filter: brightness(0) invert(1); }
[data-ui-theme-kit="simple"] :is(.sortie-depart, .gacha-screen .screen-action[data-gacha-pull-count]) img { filter: brightness(0) !important; }
/* Simple's rank pennant has a long point below the box, so the lettering sat
   against its top edge; centre it in the pennant's square body instead. */
[data-ui-raster-kit="true"][data-ui-theme-kit="simple"] .home-game-canvas .home-level-badge[data-ui-asset-source="theme"]:not([data-ui-custom-frame]) :is(.home-level-badge__caption,.home-level-badge__value) { translate: 0 .3em; }
/* Rank lettering ran into several themes' frame ornaments (kawaii, gothic,
   chinese, hologram, steampunk); the review asked for a larger flag rather
   than smaller text, so every raster rank frame grows around the lettering. */
html [data-ui-raster-kit="true"][data-ui-theme-kit] .home-game-canvas .home-level-badge[data-ui-asset-source="theme"]:not([data-ui-custom-frame])::before { inset: -12% -16% -36%; }
html [data-ui-raster-kit="true"][data-ui-theme-kit] .home-game-canvas .home-level-badge[data-ui-asset-source="theme"]:not([data-ui-custom-frame]) :is(.home-level-badge__caption,.home-level-badge__value) { translate: 0 .15em; }
/* Theme review 2026-10-02, per-theme nudges:
   - navigation items sit a little lower in the dock in every themed kit, so
     tall art no longer rises into the battle button (tactical, hologram,
     steampunk);
   - wa-modern: navigation lettering read larger than everything else;
   - japanese: the battle word stays inside its frame but reads larger. */
[data-ui-nav-kit="illustrated-v2"] .home-bottom-nav[data-nav-layout="grid"] > .home-bottom-nav-item[data-nav-grid-item="true"]:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { top: 5%; }
[data-ui-theme-kit="wa-modern"] .home-bottom-nav { --nav-label-scale: .82; }
[data-ui-theme-kit="japanese"] .battle-slot-button-label { --action-word-scale: 1.12; }

/* Navigation words measured to one ink height still read uneven in some
   sets; per-word corrections from the review (2026-10-02). */
[data-ui-theme-kit="chinese"] .home-bottom-nav-label[data-label-key="formation"] { --nav-label-scale: .84; }
[data-ui-theme-kit="chinese"] .home-bottom-nav-label[data-label-key="home"] { --nav-label-scale: .92; }
[data-ui-theme-kit="chinese"] .home-bottom-nav-label:is([data-label-key="character"],[data-label-key="gacha"]) { --nav-label-scale: 1.08; }
[data-ui-theme-kit="hologram"] .home-bottom-nav-label[data-label-key="home"] { --nav-label-scale: .84; }
[data-ui-theme-kit="hologram"] .home-bottom-nav-label:is([data-label-key="formation"],[data-label-key="gacha"],[data-label-key="shop"]) { --nav-label-scale: 1.12; }
[data-ui-theme-kit="hologram"] .battle-slot-button-label { --action-word-scale: 1.3; }

/* Hollow rank frames (data-ui-rank-hollow, generated from the art) get a
   painted body in the theme's primary, distinct from the top HUD, with white
   lettering (review 2026-10-03). The art is drawn over the fill. */
html [data-ui-rank-hollow="true"] .home-game-canvas .home-level-badge[data-ui-asset-source="theme"]:not([data-ui-custom-frame]) {
  background: none !important;
  isolation: isolate;
}
/* Round 4: the paint follows the frame's traced inside (rank-fills/<id>.png,
   from build-rank-frame-fills.mjs), drawn under the art and the lettering, so
   the frame's lower point is filled too. */
html [data-ui-rank-hollow="true"] .home-game-canvas .home-level-badge[data-ui-asset-source="theme"]:not([data-ui-custom-frame])::after {
  content: ""; position: absolute; inset: -12% -16% -36%; z-index: 0; pointer-events: none;
  /* Round 6: a deeper, quieter tone than the primary, so the white rank
     reads and the body does not compete with the frame. */
  background: color-mix(in srgb, var(--pf-primary) 42%, #121520);
  -webkit-mask: var(--theme-rank-fill-mask, linear-gradient(#000 0 0)) center / 100% 100% no-repeat;
  mask: var(--theme-rank-fill-mask, linear-gradient(#000 0 0)) center / 100% 100% no-repeat;
}
html [data-ui-rank-hollow="true"] .home-game-canvas .home-level-badge[data-ui-asset-source="theme"]:not([data-ui-custom-frame])::before { z-index: 1; }
html [data-ui-rank-hollow="true"] .home-game-canvas .home-level-badge[data-ui-asset-source="theme"]:not([data-ui-custom-frame]) > * { position: relative; z-index: 2; }
html [data-ui-rank-hollow="true"] .home-game-canvas .home-level-badge[data-ui-asset-source="theme"]:not([data-ui-custom-frame]) :is(.home-level-badge__caption,.home-level-badge__value) {
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
/* Celestial's pale glass rim vanished into its pale HUD: a deeper blue rim. */
html [data-ui-theme-kit="celestial"] .home-game-canvas .home-level-badge[data-ui-asset-source="theme"]:not([data-ui-custom-frame])::before { filter: brightness(.62) saturate(1.8) contrast(1.25); }

/* Per-theme legibility from the review (2026-10-03):
   - celestial: white feathers on pale blue vanished in the shop -> shadow;
   - occult: the gear sank into the dark tool ring -> brighter; the jewel
     sank into the black HUD and the gacha buttons -> a faint aura; the growth
     coin sank into the HUD -> a light rim. */
[data-ui-theme-kit="celestial"] .shop-product__icon { filter: drop-shadow(0 2px 3px rgba(24, 44, 90, .55)) drop-shadow(0 0 1px rgba(24, 44, 90, .6)); }
[data-ui-theme-kit="occult"] :is([data-home-slot-ref="home.settingsTool"],[data-calibration-key="home.settingsTool"]) :is(.home-editable-part__icon-image,.home-side-tool-icon) { filter: brightness(1.7) contrast(1.1); }
[data-ui-theme-kit="occult"] :is(.home-resource-pill--blue .home-resource-icon, .gacha-jewel-amount__icon, .shop-product__price-icon) { filter: drop-shadow(0 0 2px rgba(214, 170, 255, .95)) drop-shadow(0 0 5px rgba(170, 110, 255, .7)); }
[data-ui-theme-kit="occult"] .home-strength-points__icon { filter: drop-shadow(1px 0 0 rgba(236, 226, 255, .85)) drop-shadow(-1px 0 0 rgba(236, 226, 255, .85)) drop-shadow(0 1px 0 rgba(236, 226, 255, .85)) drop-shadow(0 -1px 0 rgba(236, 226, 255, .85)); }
/* Round 4: chinese's battle picture sank into its red button; a soft white
   halo lifts it without outlining it. */
[data-ui-theme-kit="chinese"] .battle-slot-button :is(.battle-slot-button-icon, .home-editable-part__icon-image) { filter: drop-shadow(0 0 3px rgba(255, 252, 240, .95)) drop-shadow(0 0 8px rgba(255, 250, 236, .85)) drop-shadow(0 0 14px rgba(255, 246, 228, .55)); }
/* Round 4: wa-modern's ink lettering sits on dark pull buttons; a pale paper
   halo keeps 「ガチャ」 legible without recolouring the brush ink. */
[data-ui-theme-kit="wa-modern"] .gacha-pull-panel .gacha-pull-count { filter: drop-shadow(0 0 1px rgba(250, 244, 230, .95)) drop-shadow(0 0 3px rgba(250, 244, 230, .8)); }

/* ---- Review round 5 (2026-10-03) ---- */
/* Formation stat labels kept Pop Fantasy's green ink in every theme; they
   take the theme's own colours now (lettering follows the base face). */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .formation-slot-card__stat-label { color: var(--pf-primary); }
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .formation-slot-card__stat-value { color: var(--pf-outline); }
/* Rarity flags sit further left, attribute jewels further toward the
   card's lower right, in the themes where they crowded the portrait. */
:is([data-ui-theme-kit="fantasy"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="idol"]) .attribute-card-icon > .attribute-card-icon__rarity { translate: -9% 0; }
:is([data-ui-theme-kit="gothic"],[data-ui-theme-kit="idol"]) .attribute-card-icon > .attribute-card-icon__badge { translate: 7% 7%; }
/* Gothic's silver rarity flags were too dark to read. */
[data-ui-theme-kit="gothic"] .attribute-card-icon__rarity img { filter: brightness(1.55) contrast(1.08); }
/* Celestial: pale crystal lettering needs a deep blue edge everywhere it
   sits on pale glass -- rarity flags, the action words and icons. */
[data-ui-theme-kit="celestial"] :is(.battle-slot-button-label, .story-slot-button-label, .battle-slot-button-icon, .story-slot-button-icon, .battle-slot-button .home-editable-part__icon-image, .story-slot-button .home-editable-part__icon-image) {
  filter: drop-shadow(1px 0 0 #1d3c86) drop-shadow(-1px 0 0 #1d3c86) drop-shadow(0 1px 0 #1d3c86) drop-shadow(0 -1px 0 #1d3c86);
}
/* Celestial's 10-pull word reads better whitened on its blue button. */
[data-ui-theme-kit="celestial"] .gacha-pull-panel .screen-action[data-gacha-pull-count="10"] > .gacha-pull-count { filter: brightness(3) saturate(.2) drop-shadow(0 0 1px #17306e); }
/* Neon: the jewel sank into the dark HUD and shop; a neon glow. */
[data-ui-theme-kit="neon"] :is(.home-resource-pill--blue .home-resource-icon, .shop-product__icon, .gacha-jewel-amount__icon, .shop-product__price-icon) { filter: drop-shadow(0 0 2px rgba(255, 140, 255, .95)) drop-shadow(0 0 6px rgba(180, 110, 255, .75)); }
/* Occult: all three side tools sank into their dark rings; a faint pale
   surround lifts them (the gear also keeps its brightening). */
[data-ui-theme-kit="occult"] :is(.home-side-tool .home-editable-part__icon-image, .home-side-tool .home-side-tool-icon, .home-tools-menu-toggle > span) { filter: drop-shadow(0 0 2px rgba(236, 226, 255, .9)) drop-shadow(0 0 5px rgba(206, 186, 255, .55)); }
[data-ui-theme-kit="occult"] :is([data-home-slot-ref="home.settingsTool"],[data-calibration-key="home.settingsTool"]) :is(.home-editable-part__icon-image,.home-side-tool-icon) { filter: brightness(1.7) contrast(1.1) drop-shadow(0 0 2px rgba(236, 226, 255, .9)) drop-shadow(0 0 5px rgba(206, 186, 255, .55)); }
/* Skate: the rank number was cream on a cream flag. */
html [data-ui-theme-kit="skate"] .home-game-canvas .home-level-badge :is(.home-level-badge__caption, .home-level-badge__value) { color: #26313d !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .6) !important; }
/* The street themes (neon, graffiti, skate, rave, industrial) kept Pop
   Fantasy's paper party frame; their own formation frame and surface. */
[data-ui-theme-family="urban"] :is(.formation-screen,.sortie-screen) .formation-slots:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { background: var(--pf-surface); }
/* The urban party frame is drawn for the portrait row of five; landscape has no urban
   frame of its own yet, so it keeps the plain one. */
[data-ui-theme-family="urban"] :is(.formation-screen,.sortie-screen) .formation-slots > .formation-slot-frame:not([data-ui-custom-frame]):where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { background-image: var(--theme-formation-frame); mask: none; }
/* Neon's STORY (round 8): a dark body with a neon rim, and the word lit,
   instead of a pale button with a darkened word. */
[data-ui-theme-kit="neon"] .story-slot-button::after { background-color: #241036 !important; box-shadow: inset 0 0 0 2px #ed9fff, 0 0 10px rgba(237, 159, 255, .65) !important; }
[data-ui-theme-kit="neon"] .story-slot-button-label { filter: drop-shadow(0 0 2px #ffd6ff) drop-shadow(0 0 6px rgba(237, 159, 255, .9)); }
/* Round 5: the rank frames are portrait art (0.56-0.91 : 1) but were drawn
   into a near-square box, so every theme's flag read stretched sideways.
   Draw the art, and the traced fill under it, at its own proportions. */
html [data-ui-raster-kit="true"][data-ui-theme-kit] .home-game-canvas .home-level-badge[data-ui-asset-source="theme"]:not([data-ui-custom-frame])::before { background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; }
html [data-ui-rank-hollow="true"] .home-game-canvas .home-level-badge[data-ui-asset-source="theme"]:not([data-ui-custom-frame])::after { -webkit-mask-size: contain; mask-size: contain; }
/* Round 6: the selected story tab is filled with the theme's pale tint but
   kept white lettering (cyberpunk, pixel, gothic...); dark lettering, as the
   detail tabs already use. */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .story-screen .story-mode-tab--active { color: #16181d !important; text-shadow: none !important; }
/* ---- Review round 6 ---- */
/* Celestial: attribute jewels get a navy edge and sit further toward the
   card's lower right; the side tools and the tab pictures get a soft navy
   shadow so white-on-pale art stops washing out. */
[data-ui-theme-kit="celestial"] .attribute-card-icon > .attribute-card-icon__badge { translate: 7% 7%; }
[data-ui-theme-kit="celestial"] .attribute-card-icon__jewel-image { filter: drop-shadow(1px 0 0 #1d3c86) drop-shadow(-1px 0 0 #1d3c86) drop-shadow(0 1px 0 #1d3c86) drop-shadow(0 -1px 0 #1d3c86); }
[data-ui-theme-kit="celestial"] :is(.home-side-tool .home-editable-part__icon-image, .home-side-tool .home-side-tool-icon, .home-tools-menu-toggle > span, .home-bottom-nav-item .home-editable-part__icon-image, .home-bottom-nav-icon) { filter: drop-shadow(0 2px 2px rgba(20, 38, 92, .55)) drop-shadow(0 0 1px rgba(20, 38, 92, .7)); }
/* Celestial's pull buttons: a deep blue body under the glass art, white words. */
[data-ui-theme-kit="celestial"] .gacha-screen .gacha-pull-panel .screen-action[data-gacha-pull-count] { background-color: #23427e !important; }
[data-ui-theme-kit="celestial"] .gacha-pull-panel .screen-action[data-gacha-pull-count] > .gacha-pull-count { filter: brightness(3) saturate(.15) drop-shadow(0 0 1px #17306e); }
[data-ui-theme-kit="celestial"] .gacha-screen .gacha-pull-panel .screen-action[data-gacha-pull-count] .gacha-jewel-amount { color: #f4f8ff; }
/* Street themes: their tab art is drawn to stretch, so the box tabs run wide
   and the list tabs tall (no ratio lock), and the party numbers sit closer. */
[data-ui-theme-family="urban"] .collection-kind-tabs .screen-action:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { width: 96px; }
[data-ui-theme-family="urban"] .collection-kind-tabs .screen-action::before,
[data-ui-theme-family="urban"] .formation-screen .formation-lower-tabs .screen-action::before { background-size: 100% 100% !important; }
[data-ui-theme-family="urban"] .formation-screen .screen-shell__body[data-ui-orientation="portrait"] .formation-presets { gap: calc(12 * var(--formation-px)); }
[data-ui-theme-family="urban"] .sortie-screen .screen-shell__body[data-ui-orientation="portrait"] .sortie-presets { gap: 12px; }
/* Home (round 7): what read small was the word, not the button -- the
   buttons go back to their size, slightly slimmer, and the words grow. */
.home-game-frame[data-ui-orientation="portrait"] :is(.story-slot-button, .battle-slot-button) { transform-origin: right center; scale: .92; }
/* The word itself grows (themes draw it differently, so the label box is
   scaled), leaning into the spare room right of the icon. */
/* Round 8: outside Pop Fantasy the words fit their buttons at their own
   size; Pop Fantasy's grow, centred in the space beside the icon. */
[data-ui-theme-kit="fantasy"] .home-game-frame[data-ui-orientation="portrait"] :is(.story-slot-button-label, .battle-slot-button-label) { transform-origin: 50% 50%; scale: 1.36; }
/* Comic: speed lines / a speech balloon / smoke behind the story and battle
   words (round 6); the words themselves stay as they were. The word is drawn
   in the label's ::before, so the backdrop takes the spare ::after, larger
   than the word box and behind it. */
[data-ui-theme-kit="comic"] :is(.story-slot-button-label, .battle-slot-button-label)[data-action-wordmark] { isolation: isolate; }
[data-ui-theme-kit="comic"] :is(.story-slot-button-label, .battle-slot-button-label)[data-action-wordmark]::after {
  content: "" !important; display: block !important; position: absolute !important; inset: -30% -18% !important; z-index: -1 !important;
  background: center / contain no-repeat !important; pointer-events: none; opacity: .9;
  filter: drop-shadow(0 0 1px rgba(40, 30, 10, .55));
}
[data-ui-theme-kit="comic"] .story-slot-button-label[data-action-wordmark]::after { background-image: url("/assets/ui-kits/action-wordmarks-v1/comic/story-backdrop-v2.webp") !important; }
/* Round 8: the story word speaks from a speech bubble, large enough to hold
   the whole word with the tail showing (it hid behind the word before). */
[data-ui-theme-kit="comic"] .story-slot-button-label[data-action-wordmark]::after { inset: -70% -50% -52% -30% !important; opacity: 1 !important; }
[data-ui-theme-kit="comic"] .battle-slot-button-label[data-action-wordmark]::after { background-image: url("/assets/ui-kits/action-wordmarks-v1/comic/battle-backdrop-v1.webp") !important; }
/* Storybook: plain white read empty; the surfaces wear a watercolour paper
   grain (round 6), light enough to keep every word legible. */
[data-ui-theme-kit="storybook"] { --storybook-paper: url("/assets/ui-kits/quiet-panels-v1/storybook/paper-texture-v1.webp"); }
[data-ui-theme-kit="storybook"] :is(.screen-shell > .screen-shell__body, .formation-slots, .formation-bench, .collection-list-panel, .shop-product, .formation-detail-content .screen-panel, .battle-enemy-info, .battle-footer, .sortie-opponent, .gacha-history-panel) {
  background-image: var(--storybook-paper) !important; background-size: 256px 256px !important; background-repeat: repeat !important;
}
/* ---- Review round 7 ---- */
/* Pop Fantasy: rarity flags further left, a larger flag on the detail name
   plate, a cream body inside that plate, and a smaller menu mark. */
[data-ui-theme-kit="fantasy"] .attribute-card-icon > .attribute-card-icon__rarity { translate: -18% 0; }
[data-ui-theme-kit="fantasy"] .formation-detail-screen :is(.formation-detail-identity, .formation-detail-card__identity) .pop-fantasy-rarity-flag { scale: 1.45; transform-origin: center; }
[data-ui-theme-kit="fantasy"] .formation-detail-screen :is(.formation-detail-identity, .formation-detail-card__identity) { background-color: color-mix(in srgb, var(--pf-surface) 88%, var(--pf-primary)); }
[data-ui-theme-kit="fantasy"] .home-tools-menu-toggle > span { scale: .8; }
/* Simple: the jewel on its pull buttons is a black silhouette, like the HUD. */
[data-ui-theme-kit="simple"] .gacha-pull-panel .gacha-jewel-amount__icon { filter: brightness(0); }
/* Every theme: the home speech bubble keeps a real margin around its words. */
.home-game-canvas .home-speech { box-sizing: border-box; padding: 5% 8% !important; }
/* ---- Review round 8 ---- */
/* Pull buttons: a smaller jewel and count, so they stay inside the art
   (wa-modern, occult). */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .gacha-pull-panel .screen-action[data-gacha-pull-count] .gacha-jewel-amount { font-size: 12px; gap: 3px; }
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .gacha-pull-panel .screen-action[data-gacha-pull-count] .gacha-jewel-amount__icon { width: 15px !important; height: 15px !important; }
/* Selected story tab: white letters where the selected fill is the deep
   theme colour (japanese, kawaii, simple). */
:is([data-ui-theme-kit="japanese"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="simple"]):not([data-ui-theme-kit="fantasy"]) .story-screen .story-mode-tab.story-mode-tab--active { color: #fff !important; }
/* Wa-modern's ink story heading sat on a dark page: a soft white glow. */
[data-ui-theme-kit="wa-modern"] .story-screen-header .pf-label--heading { filter: drop-shadow(0 0 2px rgba(255, 252, 240, .95)) drop-shadow(0 0 6px rgba(255, 248, 230, .7)); }
/* Detail name plate: the rarity flag fills its box and sits on the same
   centre line as the attribute jewel, a little larger. */
.formation-detail-card__name .pop-fantasy-rarity-flag { align-self: center; scale: 1.2; }
.formation-detail-card__name .pop-fantasy-rarity-flag__image { width: 100% !important; height: 100% !important; inset: 0; }
.formation-detail-card__name { align-items: center; }
/* Detail art frame (panel-paint themes): hugs the picture instead of
   standing 24px off it. */
[data-ui-panel-paint="true"] .formation-detail-screen .formation-detail-card__art:has(.attribute-card-icon:not([data-ui-custom-frame])) { --detail-frame-width: 8px !important; }
/* Pop Fantasy: the depart word in white. */
/* The sort / filter button keeps clear of the list's right and bottom edges. */
:is(.collection-screen, .formation-screen) .collection-filter-fab:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { translate: -8px -8px; }
/* Home side tools sit a little lower, clear of the rank flags. */
.home-game-frame[data-ui-orientation="portrait"] :is(.home-side-tool, .home-tools-menu-toggle) { margin-top: 56px; }
/* Rank flags: chinese a touch larger; gothic raised and larger so its rank
   stays inside the flag. */
html [data-ui-theme-kit="chinese"] .home-game-canvas .home-level-badge:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { scale: 1.1; transform-origin: center top; }
html [data-ui-theme-kit="gothic"] .home-game-canvas .home-level-badge:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { scale: 1.1; transform-origin: center top; translate: 0 -6%; }
/* Celestial: a shadow under the winged pull words. */
[data-ui-theme-kit="celestial"] .gacha-pull-panel .screen-action[data-gacha-pull-count] > .gacha-pull-count { filter: brightness(3) saturate(.15) drop-shadow(0 1px 1px rgba(12, 22, 64, .9)) drop-shadow(0 0 3px rgba(12, 22, 64, .6)) !important; }
/* Street themes: tabs keep real width (box) and height (formation list);
   the pull buttons are wide rectangles that hold their words. */
[data-ui-theme-family="urban"] .collection-kind-tabs .screen-action:where([data-ui-orientation="portrait"],[data-ui-orientation="portrait"] *) { width: 124px !important; }
[data-ui-theme-family="urban"] .formation-screen .screen-shell__body[data-ui-orientation="portrait"] .formation-lower-tabs .screen-action { min-height: calc(76 * var(--formation-px)) !important; }
[data-ui-theme-family="urban"] .gacha-screen .gacha-pull-panel .screen-actions { grid-template-columns: 1fr 1fr; gap: 10px; }
[data-ui-theme-family="urban"] .gacha-screen .gacha-pull-panel .screen-action[data-gacha-pull-count] { width: 100%; min-height: 58px; padding: 6px 10px; }
/* Formation: with the slimmer tab column the party frame grows to fill the
   room it freed (a plain scale-up). */
.formation-screen .screen-shell__body[data-ui-orientation="portrait"] .screen-shell__content:has(> .formation-lower) > .formation-slots { zoom: 1.07; }
/* Round 8 (second pass): celestial's white feather on the pale pull buttons
   gets a soft shadow so it reads as a shape, not a gap. */
[data-ui-theme-kit="celestial"] .gacha-screen .gacha-pull-panel .screen-action[data-gacha-pull-count] .gacha-jewel-amount__icon { filter: drop-shadow(0 1px 1px rgba(24, 36, 84, .7)) drop-shadow(0 0 2px rgba(24, 36, 84, .45)) !important; }
/* Round 8 (second pass): comic's card detail art frame is drawn with the
   G-pen panel (quiet-panels-v1/comic v4), nine-sliced so the ink line keeps
   its weight; the stock corner-and-rule paint is switched off there. */
[data-ui-theme-kit="comic"] .formation-detail-screen .formation-detail-card__art .attribute-card-icon:not([data-ui-custom-frame])::after { background: none !important; border: 22px solid transparent !important; border-image: url("/assets/ui-kits/quiet-panels-v1/comic/panel-portrait-v4.webp") 40 / 22px / 0 stretch !important; inset: -10px !important; }
/* Round 10: the tools column sits lower so it clears the rank flags, whose
   drawn art reaches well below their box in many themes (arcade, chinese,
   theater...). Rounds 8 and 9 set translate here, which never applied: the
   calibration rule for these parts sets translate with !important. A top
   margin moves the absolutely placed parts without touching it. */
/* Round 9: Pop Fantasy's rarity flag is centred on the attribute jewel by
   what is drawn, not by its box (the banner's art sits high in its box). */
[data-ui-theme-kit="fantasy"] .formation-detail-screen :is(.formation-detail-identity, .formation-detail-card__identity) .pop-fantasy-rarity-flag { translate: 0 16%; }
/* Round 9 / 10: Pop Fantasy's home words, measured on the page: the icon and word
   together were 10px left of the button's centre and the words 5px (story) and
   8.5px (battle) high; the shift is a share of the word box so it scales. */
[data-ui-theme-kit="fantasy"] .home-game-frame[data-ui-orientation="portrait"] .story-slot-button-label { translate: 10.5% 17.5%; }
[data-ui-theme-kit="fantasy"] .home-game-frame[data-ui-orientation="portrait"] .battle-slot-button-label { translate: 10.5% 25%; }
/* Round 9: simple's notice board drops the red pin's colour (it read as an
   unread badge); the whole mark is black and white. */
[data-ui-theme-kit="simple"] .home-announcement-board__summary > img { filter: grayscale(1) contrast(1.6); }
/* Round 9: the story heading and its icon move up, keeping a little air. */
.story-screen .screen-shell__body[data-ui-orientation="portrait"] .story-screen-header { translate: 0 -8px; }
/* Round 11: the speech bubble behind comic's story word is withdrawn (the
   owner's call); the word stands on the button as drawn. */
[data-ui-theme-kit="comic"] .story-slot-button-label[data-action-wordmark]::after { content: none !important; display: none !important; }
/* Round 11: celestial's white feather in the top HUD gets the same soft
   shadow as on the pull buttons. */
[data-ui-theme-kit="celestial"] .home-resource-pill--blue .home-resource-icon { filter: drop-shadow(0 1px 1px rgba(24, 36, 84, .7)) drop-shadow(0 0 2px rgba(24, 36, 84, .45)) !important; }
/* Round 11: hologram's 戦闘 reads a size larger. */
[data-ui-theme-kit="hologram"] .home-game-frame[data-ui-orientation="portrait"] .battle-slot-button-label { scale: 1.2; transform-origin: 50% 50%; }
/* Round 11: comic's dialogue plate and log take the G-pen panel too. The reader
   is not zoomed, so the panel paint's corner pieces drew tiny (a thin line under
   Pop Fantasy's gold rim); the G-pen panel is nine-sliced at its own weight. */
[data-ui-theme-kit="comic"] .story-reader-screen :is(.story-reader-stage > .story-reader-textbox, .story-reader-full-log > .story-reader-full-log__panel):not([data-ui-custom-frame]) {
  border: 28px solid transparent !important;
  border-image: url("/assets/ui-kits/quiet-panels-v1/comic/panel-portrait-v4.webp") 40 / 28px / 0 stretch !important;
  border-radius: 0 !important;
  background: linear-gradient(var(--pf-surface), var(--pf-surface)) center / calc(100% - 22px) calc(100% - 22px) no-repeat border-box !important;
}
/* Round 11: storybook's gacha room shows its drawn backdrop. The paper grain
   rule above (also !important, later in the cascade) had painted over it since
   round 8, so the room was plain paper. */
[data-ui-theme-kit="storybook"] .gacha-screen > .screen-shell__body { background: var(--theme-gacha-background) center / cover no-repeat !important; }
/* Round 12: the rank flag fits its lettering in every theme. Measured on the page (rank-fit2):
   the smallest scale and shift of the drawn flag at which every pixel of RANK and the rank,
   with 4px of air, lands on the flag's flat window. The traced fill (::after) shares the
   flag's box, so it moves with it. Replaces the per-theme nudges of rounds 8 to 11. */
[data-ui-theme-kit="gothic"] .home-game-canvas .home-level-badge::before, [data-ui-theme-kit="gothic"] .home-game-canvas .home-level-badge::after { scale: 1.02; translate: 0px -14px; transform-origin: 50% 50%; }
[data-ui-theme-kit="chinese"] .home-game-canvas .home-level-badge::before, [data-ui-theme-kit="chinese"] .home-game-canvas .home-level-badge::after { scale: 1.18; translate: 0px 0px; transform-origin: 50% 50%; }
[data-ui-theme-kit="steampunk"] .home-game-canvas .home-level-badge::before, [data-ui-theme-kit="steampunk"] .home-game-canvas .home-level-badge::after { scale: 1; translate: -2px -10px; transform-origin: 50% 50%; }
[data-ui-theme-kit="occult"] .home-game-canvas .home-level-badge::before, [data-ui-theme-kit="occult"] .home-game-canvas .home-level-badge::after { scale: 1.2; translate: -2px -10px; transform-origin: 50% 50%; }
[data-ui-theme-kit="neon"] .home-game-canvas .home-level-badge::before, [data-ui-theme-kit="neon"] .home-game-canvas .home-level-badge::after { scale: 1.12; translate: 0px -20px; transform-origin: 50% 50%; }
[data-ui-theme-kit="graffiti"] .home-game-canvas .home-level-badge::before, [data-ui-theme-kit="graffiti"] .home-game-canvas .home-level-badge::after { scale: 1.12; translate: 0px -20px; transform-origin: 50% 50%; }
[data-ui-theme-kit="skate"] .home-game-canvas .home-level-badge::before, [data-ui-theme-kit="skate"] .home-game-canvas .home-level-badge::after { scale: 1.12; translate: 0px -24px; transform-origin: 50% 50%; }
[data-ui-theme-kit="rave"] .home-game-canvas .home-level-badge::before, [data-ui-theme-kit="rave"] .home-game-canvas .home-level-badge::after { scale: 1.12; translate: 0px -20px; transform-origin: 50% 50%; }
[data-ui-theme-kit="industrial"] .home-game-canvas .home-level-badge::before, [data-ui-theme-kit="industrial"] .home-game-canvas .home-level-badge::after { scale: 1.12; translate: 0px -20px; transform-origin: 50% 50%; }
[data-ui-theme-kit="space-control"] .home-game-canvas .home-level-badge::before, [data-ui-theme-kit="space-control"] .home-game-canvas .home-level-badge::after { scale: 1; translate: 0px -6px; transform-origin: 50% 50%; }

/* Theme effects decorate the interface; character art is never brightened. */
[data-ui-theme-kit="simple"] .tap-effect { width: 32px; height: 32px; margin: -16px; border: 1.5px solid var(--pf-primary); background: none; animation: theme-tap-soft .52s ease-out forwards; }
[data-ui-theme-kit="tactical"] .tap-effect { width: 32px; height: 32px; margin: -16px; border: 1px dashed var(--pf-primary); border-radius: 0; background: linear-gradient(var(--pf-primary),var(--pf-primary)) center/1px 16px no-repeat,linear-gradient(var(--pf-primary),var(--pf-primary)) center/16px 1px no-repeat; animation: theme-tap-lock .52s ease-out forwards; }
@keyframes theme-tap-soft { from { transform: scale(.4); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }
@keyframes theme-tap-lock { 0% { transform: scale(1.4); opacity: 0; } 22% { transform: scale(.85); opacity: .85; } 60% { opacity: .65; } 100% { transform: scale(1); opacity: 0; } }

:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) .loading-emblem__gem,
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) .loading-emblem__spark,
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) .loading-emblem__ring::before,
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) .loading-emblem__ring::after { display: none; }
[data-ui-theme-kit="simple"] .loading-emblem__ring { inset: 24px; border: 2px solid var(--pf-primary-soft); border-top-color: var(--pf-primary); box-shadow: none; animation: loading-emblem-turn 1.6s linear infinite; }
[data-ui-theme-kit="simple"] .loading-emblem::after { content: ""; position: absolute; inset: 49px; border-radius: 50%; background: var(--pf-primary); }
[data-ui-theme-kit="tactical"] .loading-emblem__ring { inset: 14px; border: 1px dashed var(--pf-primary); box-shadow: inset 0 0 0 10px var(--pf-surface); background: conic-gradient(from 0deg,transparent 65%,color-mix(in srgb,var(--pf-primary) 35%,transparent)); animation: loading-emblem-turn 3s linear infinite; }
[data-ui-theme-kit="tactical"] .loading-emblem::after { content: ""; position: absolute; inset: 24px; background: linear-gradient(var(--pf-primary),var(--pf-primary)) center/1px 100% no-repeat,linear-gradient(var(--pf-primary),var(--pf-primary)) center/100% 1px no-repeat; }
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) .boot-loading__shell { background: var(--pf-surface); }
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) :is(.boot-loading__label,.boot-loading__tip-label) { color: var(--pf-primary); }
:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) .boot-loading__tip { color: var(--pf-outline); }
[data-ui-theme-kit="simple"] .app-loading { background: #f5f8fcee; }
[data-ui-theme-kit="simple"] .app-loading__label { color: var(--pf-primary); }
[data-ui-theme-kit="tactical"] .app-loading { background: #141c18ee; }
[data-ui-theme-kit="tactical"] .app-loading__label { color: var(--pf-primary); letter-spacing: .14em; }

.gacha-presentation-overlay[data-gacha-theme="simple"] { background: #e7eef2ed; }
.gacha-presentation-overlay[data-gacha-theme="tactical"] { background: #0c1310ed; }
.gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) :is(.gacha-presentation-panel,.gacha-presentation-nameplate) { background: var(--pf-surface); }
.gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) :is(.gacha-presentation-nameplate__name,.gacha-presentation-nameplate__rarity,.gacha-presentation-leadin__headline) { color: var(--pf-primary); text-shadow: none; }
.gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-aura { display: none; }
.gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-circle { background: none; border: 1px solid var(--pf-primary); border-radius: 50%; opacity: .16; }
.gacha-presentation-overlay[data-gacha-theme="simple"] .gacha-presentation-circle { animation: theme-orbit 18s linear infinite; border-style: solid; }
.gacha-presentation-overlay[data-gacha-theme="simple"] .gacha-presentation-circle--second { width: 65%; border-style: dashed; opacity: .1; }
.gacha-presentation-overlay[data-gacha-theme="simple"] .gacha-presentation-gold-spark { width: 3px; height: 3px; border: 0; border-radius: 50%; background: var(--pf-primary); rotate: 0deg; opacity: .45; }
.gacha-presentation-overlay[data-gacha-theme="tactical"] .gacha-presentation-circle { border-radius: 0; border-style: dashed; animation: theme-orbit 36s linear infinite; }
.gacha-presentation-overlay[data-gacha-theme="tactical"] .gacha-presentation-circle--second { border-radius: 50%; border-style: solid; background: linear-gradient(var(--pf-primary),var(--pf-primary)) center/1px 100% no-repeat,linear-gradient(var(--pf-primary),var(--pf-primary)) center/100% 1px no-repeat; }
.gacha-presentation-overlay[data-gacha-theme="tactical"] .gacha-presentation-gold-spark { width: 3px; height: 10px; rotate: 0deg; border: 0; background: var(--pf-primary); opacity: .5; }
.gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-lightfx__burst { border-color: var(--pf-primary); box-shadow: none; }
.gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-lightfx__sweep { background: color-mix(in srgb,var(--pf-primary) 12%,transparent); }
.gacha-presentation-overlay[data-gacha-theme="tactical"] .gacha-presentation-animation::before,
.gacha-presentation-overlay[data-gacha-theme="tactical"] .gacha-presentation-animation::after { content: ""; position: absolute; top: 0; bottom: 0; width: 49.8%; background: repeating-linear-gradient(0deg,#19251f 0 45px,#304135 46px 47px); border: 1px solid var(--pf-frame); opacity: .8; }
.gacha-presentation-overlay[data-gacha-theme="tactical"] .gacha-presentation-animation::before { left: 0; }
.gacha-presentation-overlay[data-gacha-theme="tactical"] .gacha-presentation-animation::after { right: 0; }
.gacha-presentation-overlay[data-gacha-theme="tactical"][data-phase="reveal"] .gacha-presentation-animation::before { animation: theme-door-left .8s ease-out forwards; }
.gacha-presentation-overlay[data-gacha-theme="tactical"][data-phase="reveal"] .gacha-presentation-animation::after { animation: theme-door-right .8s ease-out forwards; }
.gacha-presentation-overlay[data-gacha-theme="tactical"][data-phase="departure"] .gacha-presentation-animation::before,
.gacha-presentation-overlay[data-gacha-theme="tactical"][data-phase="departure"] .gacha-presentation-animation::after { display: none; }
.gacha-presentation-overlay[data-gacha-theme="tactical"] .gacha-presentation-leadin { border: 1px solid var(--pf-frame); border-left: 4px solid var(--pf-primary); padding: 24px 12px; background: #17221bed; }
.gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-leadin { position: relative; z-index: 2; width: 88%; height: fit-content; min-height: 120px; align-self: center; justify-self: center; place-content: center; }
.gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-leadin__headline { animation: none; }
.gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"])[data-special-phase="special-voice"] .gacha-presentation-voice { color: var(--pf-primary); }
.gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-card--featured { background: var(--pf-surface-raised); }
.gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-footer .gacha-presentation-next { color: var(--pf-primary); }
.gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-footer .gacha-presentation-skip { background: var(--pf-surface); border-color: var(--pf-frame); color: var(--pf-primary); }
.gacha-presentation-overlay[data-gacha-theme="simple"][data-phase="reveal"][data-rarity-tier="SR"] .gacha-presentation-card--featured { animation: theme-simple-arrive .8s ease-out both; }
.gacha-presentation-overlay[data-gacha-theme="simple"][data-special-phase="special-final"][data-rarity-tier="SSR"] .gacha-presentation-card--featured { animation: theme-simple-arrive 1.2s ease-out both; }
.gacha-presentation-overlay[data-gacha-theme="tactical"][data-special-phase="special-final"][data-rarity-tier="SSR"] .gacha-presentation-card--featured::before { border-color: var(--pf-primary); box-shadow: 0 0 14px color-mix(in srgb,var(--pf-primary) 35%,transparent); animation: theme-lock-arrive 1.4s ease-out; }
.gacha-presentation-overlay[data-gacha-theme="simple"][data-special-phase="special-final"] .gacha-presentation-card--featured::before { border-color: var(--pf-primary); box-shadow: 0 0 12px color-mix(in srgb,var(--pf-primary) 20%,transparent); animation: theme-lock-arrive 1.2s ease-out; }
.gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-lightfx__spark { background: none; box-shadow: none; }
.gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-card--summary[data-rarity-tier="SSR"] { filter: drop-shadow(0 0 5px var(--pf-primary)); }
.gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-card--summary[data-rarity-tier="SSR"]::after { color: var(--pf-primary); text-shadow: 0 0 3px var(--pf-surface), 0 0 8px var(--pf-primary); }
.gacha-presentation-overlay[data-gacha-theme="tactical"] .gacha-presentation-card--summary[data-rarity-tier="SSR"]::after { content: "⌖"; font-family: system-ui, sans-serif; }
@keyframes theme-simple-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes theme-orbit { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes theme-door-left { to { transform: translateX(-105%); opacity: 0; } }
@keyframes theme-door-right { to { transform: translateX(105%); opacity: 0; } }
@keyframes theme-lock-arrive { from { opacity: 0; transform: scale(1.04); } 40% { opacity: 1; } to { opacity: .6; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  :is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) .loading-emblem__ring { animation: none; }
  .gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) :is(.gacha-presentation-circle,.gacha-presentation-gold-spark,.gacha-presentation-card--featured) { animation: none; }
  .gacha-presentation-overlay[data-gacha-theme="tactical"] .gacha-presentation-animation::before,
  .gacha-presentation-overlay[data-gacha-theme="tactical"] .gacha-presentation-animation::after { display: none; }
}

:is([data-ui-theme-kit="simple"],[data-ui-theme-kit="tactical"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) :is(.gacha-summoning-circle,.gacha-summoning-pedestal) { display: none; }
[data-ui-theme-kit="simple"] .gacha-summoning-spark { background: var(--pf-primary); border-color: var(--pf-primary-soft); border-radius: 50%; }
[data-ui-theme-kit="tactical"] .gacha-summoning-spark { background: var(--pf-primary); border: 0; border-radius: 0; width: 3px; height: 8px; rotate: 0deg; }
@media (prefers-reduced-motion: reduce) {
 .gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-card--featured,
 .gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-card--featured::before { animation: none !important; }
 .gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"])[data-special-phase="special-final"] .gacha-presentation-card--featured,
 .gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"])[data-phase="reveal"]:not([data-rarity-tier="SSR"]) .gacha-presentation-card--featured,
 .gacha-presentation-overlay:is([data-gacha-theme="simple"],[data-gacha-theme="tactical"],[data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-card--summary { opacity: 1; transform: none; animation: none !important; }
}

/* New families: themed marks behind the card, never a brightness filter over artwork. */
:is([data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) .tap-effect { width: 34px; height: 34px; margin: -17px; border: 1px solid var(--pf-primary); background: color-mix(in srgb,var(--pf-primary) 15%,transparent); animation: theme-tap-soft .6s ease-out forwards; }
[data-ui-theme-kit="japanese"] .tap-effect { border-radius: 50% 10% 50% 10%; rotate: 30deg; }
[data-ui-theme-kit="wa-modern"] .tap-effect { border-radius: 50%; border-width: 1px 3px 1px 1px; background: none; }
[data-ui-theme-kit="kawaii"] .tap-effect { clip-path: polygon(50% 92%,8% 52%,4% 26%,20% 8%,38% 8%,50% 24%,62% 8%,80% 8%,96% 26%,92% 52%); background: var(--pf-primary); }
[data-ui-theme-kit="gothic"] .tap-effect { border-radius: 0; rotate: 45deg; border-style: double; border-width: 3px; }
[data-ui-theme-kit="chinese"] .tap-effect { border-radius: 20%; border: 3px double var(--pf-primary); }
:is([data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) .loading-emblem__ring { inset: 15px; border: 2px solid var(--pf-primary-soft); border-top: 3px solid var(--pf-primary); box-shadow: none; animation: loading-emblem-turn 2.8s linear infinite; }
[data-ui-theme-kit="japanese"] .loading-emblem__ring { border-radius: 40% 60% 40% 60%; }
[data-ui-theme-kit="kawaii"] .loading-emblem__ring { border-style: dotted; border-width: 7px; animation-duration: 5s; }
[data-ui-theme-kit="gothic"] .loading-emblem__ring { border-style: double; border-width: 5px; }
[data-ui-theme-kit="chinese"] .loading-emblem__ring { border-radius: 20%; border-style: double; border-width: 4px; }
:is([data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) .app-loading { background: color-mix(in srgb,var(--pf-surface) 95%,transparent); color: var(--pf-primary); }
.gacha-presentation-overlay:is([data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) { background: color-mix(in srgb,var(--pf-surface) 96%,transparent); }
.gacha-presentation-overlay:is([data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-circle { animation: theme-orbit 28s linear infinite; border-width: 3px; }
.gacha-presentation-overlay[data-gacha-theme="japanese"] .gacha-presentation-circle { border-radius: 42% 58% 42% 58%; border-style: double; }
.gacha-presentation-overlay[data-gacha-theme="wa-modern"] .gacha-presentation-circle { border-width: 1px 7px 1px 1px; opacity: .18; }
.gacha-presentation-overlay[data-gacha-theme="kawaii"] .gacha-presentation-circle { border-width: 8px; border-style: dotted; opacity: .22; }
.gacha-presentation-overlay[data-gacha-theme="gothic"] .gacha-presentation-circle { border-style: double; border-width: 8px; border-radius: 12%; }
.gacha-presentation-overlay[data-gacha-theme="chinese"] .gacha-presentation-circle { border-radius: 20%; border-style: double; border-width: 10px; }
.gacha-presentation-overlay:is([data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-gold-spark { background: var(--pf-primary); border: none; width: 6px; height: 6px; opacity: .5; }
.gacha-presentation-overlay[data-gacha-theme="japanese"] .gacha-presentation-gold-spark { border-radius: 70% 0; width: 7px; height: 12px; }
.gacha-presentation-overlay[data-gacha-theme="kawaii"] .gacha-presentation-gold-spark { border-radius: 50%; box-shadow: 0 0 5px var(--pf-accent); }
.gacha-presentation-overlay[data-gacha-theme="chinese"] .gacha-presentation-gold-spark { border-radius: 30%; height: 10px; }
.gacha-presentation-overlay:is([data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"])[data-special-phase="special-final"] .gacha-presentation-card--featured::before { border-color: var(--pf-primary); box-shadow: 0 0 22px color-mix(in srgb,var(--pf-primary) 45%,transparent); animation: theme-lock-arrive 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) {
 :is([data-ui-theme-kit="japanese"],[data-ui-theme-kit="wa-modern"],[data-ui-theme-kit="kawaii"],[data-ui-theme-kit="gothic"],[data-ui-theme-kit="chinese"],[data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) :is(.tap-effect,.loading-emblem__ring) { animation: none; }
 .gacha-presentation-overlay:is([data-gacha-theme="japanese"],[data-gacha-theme="wa-modern"],[data-gacha-theme="kawaii"],[data-gacha-theme="gothic"],[data-gacha-theme="chinese"],[data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) :is(.gacha-presentation-circle,.gacha-presentation-gold-spark,.gacha-presentation-card--featured::before) { animation: none; }
}

/* Eight genre motifs. No flashing or filters over character artwork. */
:is([data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) .tap-effect { border: 0; border-radius: 0; background: var(--theme-emblem-art) center / contain no-repeat; width: 40px; height: 40px; margin: -20px; }
:is([data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) .loading-emblem::after { content: ""; position: absolute; inset: 28px; background: var(--theme-emblem-art) center / contain no-repeat; }
[data-ui-theme-kit="hologram"] .loading-emblem__ring { border-style: dashed; }
[data-ui-theme-kit="steampunk"] .loading-emblem__ring { border-style: dashed; border-width: 7px; animation-duration: 4s; }
[data-ui-theme-kit="comic"] .loading-emblem__ring { border-width: 5px; border-style: dotted; }
[data-ui-theme-kit="storybook"] .loading-emblem__ring { border-style: dashed; border-radius: 42% 48% 44% 50%; }
[data-ui-theme-kit="celestial"] .loading-emblem__ring { border-style: double; border-width: 5px; }
[data-ui-theme-kit="occult"] .loading-emblem__ring { animation-duration: 8s; border-style: dashed; }
[data-ui-theme-kit="pixel"] .loading-emblem__ring { border-radius: 0; border-width: 4px; animation-timing-function: steps(8); }
[data-ui-theme-kit="idol"] .loading-emblem__ring { border-style: dotted; border-width: 6px; }
.gacha-presentation-overlay:is([data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-circle { border: 0; border-radius: 0; background: var(--theme-emblem-art) center / contain no-repeat; opacity: .14; }
.gacha-presentation-overlay:is([data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-circle--second { width: 65%; opacity: .08; animation-direction: reverse; }
.gacha-presentation-overlay:is([data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) .gacha-presentation-leadin__headline { font-family: var(--theme-label-font); font-weight: var(--theme-label-weight); letter-spacing: var(--theme-label-spacing); }
.gacha-presentation-overlay[data-gacha-theme="hologram"] .gacha-presentation-gold-spark { width: 2px; height: 18px; rotate: 0deg; }
.gacha-presentation-overlay[data-gacha-theme="steampunk"] .gacha-presentation-gold-spark { border: 1px solid var(--pf-primary); background: transparent; border-radius: 50%; }
.gacha-presentation-overlay[data-gacha-theme="comic"] .gacha-presentation-gold-spark { width: 12px; height: 5px; }
.gacha-presentation-overlay[data-gacha-theme="storybook"] .gacha-presentation-gold-spark { border-radius: 90% 0; height: 11px; }
.gacha-presentation-overlay[data-gacha-theme="celestial"] .gacha-presentation-gold-spark { height: 13px; width: 4px; box-shadow: 0 0 4px var(--pf-primary); }
.gacha-presentation-overlay[data-gacha-theme="occult"] .gacha-presentation-gold-spark { opacity: .2; width: 2px; height: 7px; }
.gacha-presentation-overlay[data-gacha-theme="pixel"] .gacha-presentation-circle { animation-timing-function: steps(12); }
.gacha-presentation-overlay[data-gacha-theme="pixel"] .gacha-presentation-gold-spark { rotate: 0deg; width: 8px; height: 8px; }
.gacha-presentation-overlay[data-gacha-theme="idol"] .gacha-presentation-gold-spark { border-radius: 50%; box-shadow: 0 0 6px var(--pf-primary); }
.gacha-presentation-overlay:is([data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"])[data-special-phase="special-final"] .gacha-presentation-card--featured { animation: theme-simple-arrive 1s ease-out both; }
@media (prefers-reduced-motion: reduce) {
 .gacha-presentation-overlay:is([data-gacha-theme="hologram"],[data-gacha-theme="steampunk"],[data-gacha-theme="comic"],[data-gacha-theme="storybook"],[data-gacha-theme="celestial"],[data-gacha-theme="occult"],[data-gacha-theme="pixel"],[data-gacha-theme="idol"]) :is(.gacha-presentation-circle,.gacha-presentation-gold-spark,.gacha-presentation-card--featured) { animation: none !important; }
 :is([data-ui-theme-kit="hologram"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="comic"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="celestial"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="pixel"],[data-ui-theme-kit="idol"]) .loading-emblem__ring { animation: none; }
}

/* Bundled lettering for fixed navigation only. Header generated by build-bottom-nav-v2.mjs. */
@font-face { font-family: "Nav-wa"; src: url('/assets/ui-kits/nav-v2/fonts/wa.ttf'); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nav-sf"; src: url('/assets/ui-kits/nav-v2/fonts/sf.ttf'); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nav-tactical"; src: url('/assets/ui-kits/nav-v2/fonts/tactical.ttf'); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nav-fantasy"; src: url('/assets/ui-kits/nav-v2/fonts/fantasy.ttf'); font-weight: 800; font-display: swap; }
@font-face { font-family: "Nav-simple"; src: url('/assets/ui-kits/nav-v2/fonts/simple.ttf'); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nav-modern"; src: url('/assets/ui-kits/nav-v2/fonts/modern.ttf'); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nav-kawaii"; src: url('/assets/ui-kits/nav-v2/fonts/kawaii.ttf'); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nav-gothic"; src: url('/assets/ui-kits/nav-v2/fonts/gothic.ttf'); font-weight: 800; font-display: swap; }
@font-face { font-family: "Nav-chinese"; src: url('/assets/ui-kits/nav-v2/fonts/chinese.ttf'); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nav-steam"; src: url('/assets/ui-kits/nav-v2/fonts/steam.ttf'); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nav-storybook"; src: url('/assets/ui-kits/nav-v2/fonts/storybook.ttf'); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nav-celestial"; src: url('/assets/ui-kits/nav-v2/fonts/celestial.ttf'); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nav-occult"; src: url('/assets/ui-kits/nav-v2/fonts/occult.ttf'); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nav-pixel"; src: url('/assets/ui-kits/nav-v2/fonts/pixel.ttf'); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nav-idol"; src: url('/assets/ui-kits/nav-v2/fonts/idol.ttf'); font-weight: 800; font-display: swap; }
[data-ui-theme-kit="fantasy"] { --nav-v2-font: "Nav-fantasy", sans-serif; --nav-v2-weight: 800; }
[data-ui-theme-kit="simple"] { --nav-v2-font: "Nav-simple", sans-serif; --nav-v2-weight: 600; }
[data-ui-theme-kit="japanese"] { --nav-v2-font: "Nav-wa", sans-serif; --nav-v2-weight: 400; }
[data-ui-theme-kit="wa-modern"] { --nav-v2-font: "Nav-modern", sans-serif; --nav-v2-weight: 600; }
[data-ui-theme-kit="kawaii"] { --nav-v2-font: "Nav-kawaii", sans-serif; --nav-v2-weight: 400; }
[data-ui-theme-kit="gothic"] { --nav-v2-font: "Nav-gothic", sans-serif; --nav-v2-weight: 800; }
[data-ui-theme-kit="chinese"] { --nav-v2-font: "Nav-chinese", sans-serif; --nav-v2-weight: 700; }
[data-ui-theme-kit="tactical"] { --nav-v2-font: "Nav-tactical", sans-serif; --nav-v2-weight: 400; }
[data-ui-theme-kit="hologram"] { --nav-v2-font: "Nav-sf", sans-serif; --nav-v2-weight: 700; }
[data-ui-theme-kit="steampunk"] { --nav-v2-font: "Nav-steam", sans-serif; --nav-v2-weight: 700; }
[data-ui-theme-kit="comic"] { --nav-v2-font: "Nav-tactical", sans-serif; --nav-v2-weight: 400; }
[data-ui-theme-kit="storybook"] { --nav-v2-font: "Nav-storybook", sans-serif; --nav-v2-weight: 600; }
[data-ui-theme-kit="celestial"] { --nav-v2-font: "Nav-celestial", sans-serif; --nav-v2-weight: 700; }
[data-ui-theme-kit="occult"] { --nav-v2-font: "Nav-occult", sans-serif; --nav-v2-weight: 400; }
[data-ui-theme-kit="pixel"] { --nav-v2-font: "Nav-pixel", sans-serif; --nav-v2-weight: 400; }
[data-ui-theme-kit="idol"] { --nav-v2-font: "Nav-idol", sans-serif; --nav-v2-weight: 800; }
[data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-role="navigation-item"] {
  isolation: isolate; padding: 0; container-type: size;
  --nav-v2-art-x: 12%; --nav-v2-art-y: 5%; --nav-v2-art-w: 76%; --nav-v2-art-h: 64%;
  --nav-v2-label-x: 5%; --nav-v2-label-y: 72%; --nav-v2-label-w: 90%; --nav-v2-label-h: 24%;
  --nav-v2-label-size: min(20cqw, 25cqh);
}
/* Built-in lettering uses the available row; authored labels retain their box. */
[data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-role="navigation-item"]:where([data-ui-skin="standard"]:not([data-ui-asset-source="custom"]):not(:has(> .home-bottom-nav-label[data-ui-custom-frame]))) {
  --nav-v2-label-x: 0%; --nav-v2-label-w: 100%;
}
[data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-role="navigation-item"] > .pf-nav-art { display: none; }
[data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-role="navigation-item"] > :is(.home-editable-part__icon-image,.home-bottom-nav-icon) {
  position: absolute; inset: auto; left: var(--nav-v2-art-x); top: var(--nav-v2-art-y);
  width: var(--nav-v2-art-w); height: var(--nav-v2-art-h); margin: 0; padding: 0;
  object-fit: contain; object-position: center; transform: none; aspect-ratio: auto;
  max-width: none; max-height: none; visibility: visible;
  z-index: 1;
}
[data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-role="navigation-item"].home-editable-part--custom-icon:not([data-nav-icon-failed="true"]) > .home-bottom-nav-icon { visibility: hidden; }
[data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-role="navigation-item"][data-nav-icon-failed="true"] > .home-editable-part__icon-image { visibility: hidden; }
[data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-role="navigation-item"][data-nav-icon-failed="true"] > .home-bottom-nav-icon { display: block; visibility: visible; }
[data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-role="navigation-item"] > .home-bottom-nav-label {
  position: absolute; inset: auto; left: var(--nav-v2-label-x); top: var(--nav-v2-label-y);
  width: var(--nav-v2-label-w); height: var(--nav-v2-label-h); margin: 0; padding: 0;
  display: grid; place-items: center; visibility: visible; transform: none;
  object-fit: contain; aspect-ratio: auto; max-width: none; overflow: visible;
  z-index: 2;
}
[data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-role="navigation-item"] > .home-bottom-nav-label::after { display: none; }
/* The legacy composed-image loader must not hide the independent v2 label. */
[data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-role="navigation-item"][data-nav-art-ready="true"] > .home-bottom-nav-label { display: grid; visibility: visible; }
[data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-role="navigation-item"] .pf-label__text {
  position: static; display: block; width: auto; height: auto; clip-path: none; overflow: visible;
  font-family: var(--nav-v2-font); font-weight: var(--nav-v2-weight); font-size: var(--nav-v2-label-size);
  line-height: 1; letter-spacing: 0; white-space: nowrap; color: var(--pf-primary); text-shadow: none;
}
[data-ui-nav-kit="illustrated-v2"] [data-ui-orientation="landscape"] .home-bottom-nav-item[data-ui-role="navigation-item"] {
  --nav-v2-art-x: 5%; --nav-v2-art-y: 8%; --nav-v2-art-w: 29%; --nav-v2-art-h: 84%;
  --nav-v2-label-x: 37%; --nav-v2-label-y: 26%; --nav-v2-label-w: 59%; --nav-v2-label-h: 48%;
  --nav-v2-label-size: min(10cqw, 31cqh);
}
/* Decorative state is independent of the saved hit rectangle. */
[data-ui-nav-kit="illustrated-v2"]:not([data-ui-raster-kit="true"]) .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"]::before {
  content: ""; display: block; position: absolute; inset: 3%; width: auto; height: auto;
  top: 3%; left: 3%; bottom: 3%; transform: none; z-index: -1; pointer-events: none;
  border: 1px solid transparent; border-radius: 3px; background: transparent; box-shadow: none;
}
[data-ui-nav-kit="illustrated-v2"]:not([data-ui-raster-kit="true"]) .home-bottom-nav-item[data-ui-skin="standard"].home-bottom-nav-item--active {
  background: transparent; box-shadow: none; outline: none;
}
[data-ui-nav-kit="illustrated-v2"]:not([data-ui-raster-kit="true"]) .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before {
  background: var(--pf-primary-soft); border-color: var(--pf-frame); box-shadow: inset 0 -2px 0 var(--pf-primary);
}
[data-ui-nav-kit="illustrated-v2"]:not([data-ui-raster-kit="true"]) .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"]::after { content: none; background: none; box-shadow: none; }
[data-ui-nav-kit="illustrated-v2"]:not([data-ui-raster-kit="true"]) .home-bottom-nav-item[data-ui-skin="standard"]:active::before { background: var(--pf-primary-soft); }
[data-ui-nav-kit="illustrated-v2"]:not([data-ui-raster-kit="true"]) .home-bottom-nav-item:focus-visible { outline: 2px solid var(--pf-primary); outline-offset: -3px; }
[data-ui-theme-kit="japanese"]:not([data-ui-raster-kit="true"]) .home-bottom-nav-item[data-ui-skin="standard"]::before { border-radius: 40% 3% 35% 3%; }
[data-ui-theme-kit="tactical"]:not([data-ui-raster-kit="true"]) .home-bottom-nav-item[data-ui-skin="standard"]::before { border-radius: 0; border-style: solid; }
[data-ui-theme-kit="tactical"][data-ui-nav-kit="illustrated-v2"]:not([data-ui-raster-kit="true"]) .home-bottom-nav-item .pf-label__text { text-shadow: 0 1px 0 #152017; }
/* State plates carry the theme without moving any hit or content rectangle. */
:is([data-ui-theme-kit="kawaii"],[data-ui-theme-kit="storybook"],[data-ui-theme-kit="idol"])[data-ui-nav-kit="illustrated-v2"]:not([data-ui-raster-kit="true"]) .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"]::before { border-radius: 18% 18% 12% 12%; }
[data-ui-theme-kit="gothic"][data-ui-nav-kit="illustrated-v2"]:not([data-ui-raster-kit="true"]) .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"]::before { border-radius: 32% 32% 2% 2%; }
[data-ui-theme-kit="celestial"][data-ui-nav-kit="illustrated-v2"]:not([data-ui-raster-kit="true"]) .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"]::before { border-radius: 24%; border-style: double; }
[data-ui-theme-kit="occult"][data-ui-nav-kit="illustrated-v2"]:not([data-ui-raster-kit="true"]) .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"]::before { border-style: dashed; }
[data-ui-theme-kit="comic"][data-ui-nav-kit="illustrated-v2"]:not([data-ui-raster-kit="true"]) .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"]::before { border-radius: 3%; border-width: 2px; }
[data-ui-theme-kit="pixel"][data-ui-nav-kit="illustrated-v2"]:not([data-ui-raster-kit="true"]) .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"]::before { border-radius: 0; border-width: 2px; }

/* Adopted artwork changes paint layers only. Saved placement and hit areas stay intact. */
.pop-fantasy-rarity-flag__image[data-ui-label-in-art="true"] { object-fit: contain; }
.pop-fantasy-rarity-flag__image[data-ui-label-in-art="true"] + .pop-fantasy-rarity-flag__text { opacity: 0; }
.pop-fantasy-rarity-flag[data-rarity-display="stars"] .pop-fantasy-rarity-flag__image { object-fit: contain; object-position: left top; }
.pop-fantasy-rarity-flag[data-rarity-display="stars"] .pop-fantasy-rarity-flag__image[data-ui-label-in-art="true"] { width: 200%; height: 70%; }
[data-ui-theme-kit="celestial"] .pop-fantasy-rarity-flag[data-rarity-display="stars"] .pop-fantasy-rarity-flag__image { filter: drop-shadow(0 0 .4px #334c69); }

[data-ui-theme-kit="gothic"]:not([data-ui-raster-kit="true"]) .home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]:not([data-nav-layout="grid"])::before {
  border-image: none; border-color: transparent;
  background: var(--theme-illustrated-navigation) center / 100% 100% no-repeat;
}
[data-ui-theme-kit="gothic"]:not([data-ui-raster-kit="true"]) .home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]:not([data-nav-layout="grid"])::after { background: transparent; }
[data-ui-theme-kit="gothic"]:not([data-ui-raster-kit="true"]) .home-bottom-nav[data-ui-skin="standard"] > .pf-nav-divider::before { background: #bab5c2; box-shadow: none; }
[data-ui-theme-kit="gothic"]:not([data-ui-raster-kit="true"]) .home-bottom-nav-item .pf-label__text { color: #eee9f1; text-shadow: 0 1px 1px #16121c; }

[data-ui-theme-kit="kawaii"]:not([data-ui-raster-kit="true"]) :is(.home-game-settings-panel,.home-character-panel,.home-announcement-panel,.shop-product,.formation-detail-tab-panel) {
  background-image: var(--theme-lace-top),var(--theme-lace-bottom),linear-gradient(#edced8,#f0d8e0),linear-gradient(#f0d8e0,#edced8);
  background-position: left top,left bottom,left top,left bottom;
  background-size: 96px 26px,96px 26px,100% 26px,100% 26px;
  background-repeat: repeat-x,repeat-x,no-repeat,no-repeat;
  background-color: var(--pf-surface); border-color: #d9b4ab;
}
[data-ui-theme-kit="kawaii"]:not([data-ui-raster-kit="true"]) .home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]:not([data-nav-layout="grid"])::before {
  border-image: none; border: 1px solid #d9b4ab; border-radius: 12px;
  background-image: var(--theme-lace-top); background-position: left top;
  background-size: 96px 16px; background-repeat: repeat-x;
}
[data-ui-theme-kit="kawaii"]:not([data-ui-raster-kit="true"]) .home-bottom-nav-item .pf-label__text { color: #815033; }

[data-ui-theme-kit="celestial"]:not([data-ui-raster-kit="true"]) :is(.home-game-settings-panel,.home-character-panel,.home-announcement-panel,.shop-product,.formation-detail-tab-panel) {
  background: linear-gradient(135deg,#ffffffab,#d4dfffa8 50%,#ffffffb8);
  backdrop-filter: blur(4px); border-color: #ffffffc9;
}
[data-ui-theme-kit="celestial"]:not([data-ui-raster-kit="true"]) .home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]:not([data-nav-layout="grid"])::after { background: #e6f1ffc7; }
[data-ui-theme-kit="celestial"] .home-game-frame { box-shadow: inset 0 0 24px #d6ebff55; }

[data-ui-theme-kit="occult"]:not([data-ui-raster-kit="true"]) :is(.home-game-settings-panel,.home-character-panel,.home-announcement-panel,.shop-product,.formation-detail-tab-panel) {
  background-image: var(--theme-illustrated-panel); background-size: 100% 100%;
  background-color: var(--pf-surface); border-color: #706855;
}
[data-ui-theme-kit="occult"]:not([data-ui-raster-kit="true"]) .home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]:not([data-nav-layout="grid"])::after { background: var(--theme-illustrated-panel) center / 100% 100% no-repeat; }
/* Lettered rarity art drawn into one common box made N/R look huge and SSR
   tiny (theme review 2026-10-02). Size by rank instead, anchored top-left. */
.pop-fantasy-rarity-flag[data-rarity-display="letters"] .pop-fantasy-rarity-flag__image[data-ui-label-in-art="true"] { transform-origin: left top; transform: scale(var(--rarity-art-size, 1)); }
.pop-fantasy-rarity-flag[data-rarity-display="letters"][data-rarity="n"] { --rarity-art-size: .74; }
.pop-fantasy-rarity-flag[data-rarity-display="letters"][data-rarity="r"] { --rarity-art-size: .8; }
.pop-fantasy-rarity-flag[data-rarity-display="letters"][data-rarity="sr"] { --rarity-art-size: .95; }
.pop-fantasy-rarity-flag[data-rarity-display="letters"][data-rarity="ssr"] { --rarity-art-size: 1.06; }

/* Urban finishes paint within the existing portrait/landscape and saved geometry. */
[data-ui-theme-family="urban"] { --nav-v2-font: var(--theme-label-font); --nav-v2-weight: 900; --pf-radius: var(--theme-nav-radius); }
[data-ui-theme-family="urban"] [data-ui-skin="standard"][data-ui-role="secondary-action"] .pf-label__text { color: #141a1e; }
[data-ui-theme-kit="skate"][data-ui-theme-palette="cream"] [data-ui-skin="standard"][data-ui-role="secondary-action"] .pf-label__text { color: #fff7e5; }
[data-ui-theme-family="urban"] .home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]:not([data-nav-layout="grid"])::after { background: var(--pf-surface); }
[data-ui-theme-family="urban"] .home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]:not([data-nav-layout="grid"])::before { border-image: none; border: 1px solid var(--pf-frame); background: transparent; }
[data-ui-theme-family="urban"] .home-bottom-nav-item > .home-bottom-nav-label:not(img) { z-index: 2; }
[data-ui-theme-family="urban"] .home-bottom-nav-item > :is(.home-editable-part__icon-image,.home-bottom-nav-icon) { z-index: 1; }
[data-ui-theme-family="urban"] .home-bottom-nav-item[data-ui-skin="standard"] { color: var(--pf-outline); }
[data-ui-theme-family="urban"] .home-bottom-nav-item:focus-visible { outline: 2px dashed var(--pf-primary); outline-offset: -2px; }
[data-ui-theme-kit="graffiti"][data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-role="navigation-item"]:not([data-nav-grid-item="true"]) {
  --nav-v2-art-x: 36%; --nav-v2-art-y: 2%; --nav-v2-art-w: 28%; --nav-v2-art-h: 26%;
  --nav-v2-label-x: 0%; --nav-v2-label-y: 23%; --nav-v2-label-w: 100%; --nav-v2-label-h: 72%;
}

[data-ui-theme-kit="neon"][data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before {
  background: var(--pf-primary-soft); border: 1px solid var(--pf-primary); border-radius: 10px;
  box-shadow: inset 0 0 7px var(--pf-frame),0 0 7px var(--pf-frame); animation: urban-ignite .42s ease-out;
}
[data-ui-theme-kit="graffiti"][data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before {
  inset: 15% 0 0; border: 0; border-radius: 0; box-shadow: none; background: var(--pf-primary);
  mask: url('/assets/ui-kits/illustrated-v3/graffiti/spray.svg') center / 100% 100% no-repeat;
  animation: urban-spray .36s cubic-bezier(.15,.8,.25,1) both;
}
[data-ui-theme-kit="skate"][data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before {
  background: var(--pf-primary-soft); border: 2px solid var(--pf-outline); border-radius: 9px 2px 11px 3px;
  box-shadow: 2px 2px 0 var(--pf-frame); animation: urban-stick .28s ease-out;
}
[data-ui-theme-kit="rave"][data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before {
  background: linear-gradient(110deg,var(--pf-primary-soft) 80%,var(--pf-primary) 80%); border: 0; border-radius: 0;
  box-shadow: inset 0 -3px 0 var(--pf-primary); animation: urban-beat .4s ease-out;
}
[data-ui-theme-kit="industrial"][data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before {
  background: var(--pf-primary-soft); border: 2px solid var(--pf-frame); border-radius: 0;
  box-shadow: inset 0 -4px 0 var(--pf-primary),inset 0 3px 0 #ffffff18; animation: urban-press .2s ease-out;
}
[data-ui-theme-kit="industrial"] .home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]:not([data-nav-layout="grid"])::before { border-top: 4px dashed var(--pf-primary); }
.ui-theme-card:is([data-theme="neon"],[data-theme="graffiti"],[data-theme="skate"],[data-theme="rave"],[data-theme="industrial"]) .ui-theme-card__preview { border: 1px solid var(--sample-frame); }
.ui-theme-card[data-theme="neon"] .ui-theme-card__preview { box-shadow: inset 0 0 10px var(--sample-frame); border-radius: 9px; }
.ui-theme-card[data-theme="graffiti"] .ui-theme-card__preview { border-width: 0 0 5px; border-style: dashed; }
.ui-theme-card[data-theme="skate"] .ui-theme-card__preview { border-radius: 10px 2px 10px 2px; box-shadow: 3px 3px 0 var(--sample-frame); }
.ui-theme-card[data-theme="rave"] .ui-theme-card__preview { border-inline-width: 5px; }
.ui-theme-card[data-theme="industrial"] .ui-theme-card__preview { border-top: 4px dashed var(--sample-frame); }

/* Detached tap layers receive the theme id and primary color from the runtime. */
:is([data-ui-theme-kit="neon"],[data-ui-theme-kit="graffiti"],[data-ui-theme-kit="skate"],[data-ui-theme-kit="rave"],[data-ui-theme-kit="industrial"]) .tap-effect { width: 38px; height: 38px; margin: -19px; border: 2px solid var(--pf-primary); background: none; animation: urban-tap .5s ease-out forwards; }
[data-ui-theme-kit="neon"] .tap-effect { border-radius: 50%; box-shadow: 0 0 8px var(--pf-primary),inset 0 0 5px var(--pf-primary); }
[data-ui-theme-kit="graffiti"] .tap-effect { border: 0; background: var(--pf-primary); mask: url('/assets/ui-kits/illustrated-v3/graffiti/spray.svg') center / contain no-repeat; }
[data-ui-theme-kit="skate"] .tap-effect { border-radius: 5px 1px 6px 2px; rotate: -12deg; }
[data-ui-theme-kit="rave"] .tap-effect { border-width: 5px; border-radius: 50%; }
[data-ui-theme-kit="industrial"] .tap-effect { border-radius: 0; border-style: dashed; }
[data-ui-theme-family="urban"] .loading-emblem__ring { border-color: var(--pf-primary); }
[data-ui-theme-kit="graffiti"] .loading-emblem__ring { border-style: dashed; border-radius: 44% 56% 49% 51%; }
[data-ui-theme-kit="skate"] .loading-emblem__ring { border-width: 6px; }
[data-ui-theme-kit="rave"] .loading-emblem__ring { border-radius: 0; border-style: dashed; }
[data-ui-theme-kit="industrial"] .loading-emblem__ring { border-radius: 8%; border-style: double; }
[data-ui-theme-kit="neon"] .loading-emblem__ring { box-shadow: 0 0 12px var(--pf-primary); }

.gacha-presentation-overlay:is([data-gacha-theme="neon"],[data-gacha-theme="graffiti"],[data-gacha-theme="skate"],[data-gacha-theme="rave"],[data-gacha-theme="industrial"]) { background: radial-gradient(ellipse at 50% 45%,var(--pf-primary-soft),var(--pf-surface) 75%); }
.gacha-presentation-overlay[data-gacha-theme="neon"] .gacha-presentation-circle { border: 3px solid var(--pf-primary); box-shadow: 0 0 24px var(--pf-frame); }
.gacha-presentation-overlay[data-gacha-theme="graffiti"] .gacha-presentation-circle { border: 0; background: var(--pf-primary); opacity: .2; mask: url('/assets/ui-kits/illustrated-v3/graffiti/spray.svg') center / contain no-repeat; }
.gacha-presentation-overlay[data-gacha-theme="skate"] .gacha-presentation-circle { border-radius: 8%; border: 10px double var(--pf-frame); }
.gacha-presentation-overlay[data-gacha-theme="rave"] .gacha-presentation-circle { border-radius: 0; border: 12px dashed var(--pf-primary); }
.gacha-presentation-overlay[data-gacha-theme="industrial"] .gacha-presentation-circle { border-radius: 4%; border: 10px double var(--pf-frame); }
@keyframes urban-spray { from { transform: scale(.2) rotate(-12deg); opacity: 0; } 65% { transform: scale(1.06) rotate(2deg); opacity: .9; } to { transform: scale(1); opacity: .72; } }
@keyframes urban-ignite { from { opacity: .25; } to { opacity: 1; } }
@keyframes urban-stick { from { transform: scale(1.1) rotate(-8deg); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@keyframes urban-beat { from { transform: scale(.88); opacity: .3; } 60% { transform: scale(1.04); } to { transform: scale(1); opacity: 1; } }
@keyframes urban-press { from { translate: 0 -3px; } to { translate: 0 0; } }
@keyframes urban-tap { from { scale: .3; opacity: .8; } to { scale: 1.5; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
 [data-ui-theme-family="urban"][data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before,
 :is([data-ui-theme-kit="neon"],[data-ui-theme-kit="graffiti"],[data-ui-theme-kit="skate"],[data-ui-theme-kit="rave"],[data-ui-theme-kit="industrial"]) :is(.tap-effect,.loading-emblem__ring),
 .gacha-presentation-overlay:is([data-gacha-theme="neon"],[data-gacha-theme="graffiti"],[data-gacha-theme="skate"],[data-gacha-theme="rave"],[data-gacha-theme="industrial"]) .gacha-presentation-circle { animation: none; transform: none; }
}

/* These are paint layers. Parent hit boxes, labels and saved transforms are shared. */
[data-ui-theme-family="world"] { --pf-radius: var(--theme-nav-radius); }
[data-ui-theme-family="world"][data-ui-theme-kit] .home-level-badge :is(.home-level-badge__caption,.home-level-badge__value) { color: var(--pf-outline); text-shadow: none; }
[data-ui-theme-family="world"] .home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]::after { background: var(--pf-surface); }
[data-ui-theme-family="world"] .home-bottom-nav-item:focus-visible { outline: 2px solid var(--pf-primary); outline-offset: -3px; }
[data-ui-theme-family="world"] [data-ui-skin="standard"][data-ui-role="secondary-action"] .pf-label__text { color: var(--world-on-primary); }
[data-ui-theme-family="world"] .formation-slot-card__stat-word { filter: var(--world-stat-filter); }
[data-ui-theme-family="world"][data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before {
 background: var(--pf-primary-soft); border: 1px solid var(--pf-frame); box-shadow: inset 0 -2px 0 var(--pf-primary); animation: world-select .28s ease-out;
}
[data-ui-theme-family="world"][data-ui-theme-motion="scan"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before { border-radius: 0; clip-path: polygon(10% 0,100% 0,100% 82%,87% 100%,0 100%,0 15%); }
[data-ui-theme-family="world"][data-ui-theme-motion="orbit"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before { border-radius: 35%; border-style: double; }
[data-ui-theme-family="world"][data-ui-theme-motion="bloom"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before { border-radius: 40% 5% 40% 5%; }
[data-ui-theme-family="world"][data-ui-theme-motion="ripple"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before { border-radius: 22%; }
[data-ui-theme-family="world"][data-ui-theme-motion="stitch"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before { border: 2px dashed var(--pf-frame); border-radius: 12px; }
[data-ui-theme-family="world"][data-ui-theme-motion="stamp"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before { border-radius: 1px; border-style: double; }
[data-ui-theme-family="world"][data-ui-theme-motion="curtain"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before { border-radius: 28% 28% 2% 2%; background-image: linear-gradient(90deg,transparent,var(--pf-surface),transparent); }
[data-ui-theme-family="world"][data-ui-theme-motion="pixel"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before { border-radius: 0; border-width: 3px; }
[data-ui-theme-family="world"][data-ui-theme-motion="fan"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before { border-radius: 0; border-style: double; border-width: 3px; }
[data-ui-theme-kit="collage"] .home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]::after { background: linear-gradient(110deg,var(--pf-primary-soft) 30%,var(--pf-surface) 30% 75%,var(--pf-primary-soft) 75%); }
[data-ui-theme-kit="textile"] :is(.home-game-settings-panel,.shop-product,.formation-detail-tab-panel) { border-style: dashed; }
[data-ui-theme-kit="newspaper"] :is(.home-game-settings-panel,.shop-product,.formation-detail-tab-panel) { border-radius: 0; box-shadow: none; }
[data-ui-theme-kit="art-deco"] :is(.home-game-settings-panel,.shop-product,.formation-detail-tab-panel) { border-style: double; border-radius: 0; }
[data-ui-theme-kit="art-nouveau"] :is(.home-game-settings-panel,.shop-product,.formation-detail-tab-panel) { border-radius: 22px 4px 22px 4px; }
[data-ui-theme-family="world"] .loading-emblem__ring { border-color: var(--pf-primary); }
[data-ui-theme-family="world"][data-ui-theme-motion="stitch"] .loading-emblem__ring { border-style: dashed; }
[data-ui-theme-family="world"][data-ui-theme-motion="scan"] .loading-emblem__ring { border-radius: 12%; }
[data-ui-theme-family="world"][data-ui-theme-motion="fan"] .loading-emblem__ring { border-style: double; border-width: 5px; }
/* The tap layer is outside the screen. Runtime copies just the motion id and color. */
[data-ui-theme-family="world"] .tap-effect { width: 36px; height: 36px; margin: -18px; border: 2px solid var(--pf-primary); background: transparent; animation: world-tap .5s ease-out forwards; }
[data-ui-theme-family="world"][data-ui-theme-motion="scan"] .tap-effect { border-radius: 0; border-style: dashed; }
[data-ui-theme-family="world"][data-ui-theme-motion="bloom"] .tap-effect { border-radius: 50% 8% 50% 8%; rotate: 30deg; }
[data-ui-theme-family="world"][data-ui-theme-motion="stitch"] .tap-effect { border-radius: 20%; border-style: dashed; }
[data-ui-theme-family="world"][data-ui-theme-motion="stamp"] .tap-effect { border-radius: 3px; border-style: double; }
[data-ui-theme-family="world"][data-ui-theme-motion="pixel"] .tap-effect { border-radius: 0; border-width: 5px; }
[data-ui-theme-family="world"][data-ui-theme-motion="fan"] .tap-effect { border-radius: 0; rotate: 45deg; border-style: double; }
.gacha-presentation-overlay[data-gacha-world="true"] { background: radial-gradient(ellipse at 50% 40%,var(--pf-primary-soft),var(--pf-surface) 75%); }
.gacha-presentation-overlay[data-gacha-world="true"][data-gacha-motion="scan"] .gacha-presentation-circle { border-radius: 6%; border: 5px dashed var(--pf-primary); }
.gacha-presentation-overlay[data-gacha-world="true"][data-gacha-motion="bloom"] .gacha-presentation-circle { border-radius: 48% 8% 48% 8%; border: 6px double var(--pf-frame); }
.gacha-presentation-overlay[data-gacha-world="true"][data-gacha-motion="stitch"] .gacha-presentation-circle { border-radius: 15%; border: 5px dashed var(--pf-frame); }
.gacha-presentation-overlay[data-gacha-world="true"][data-gacha-motion="stamp"] .gacha-presentation-circle { border-radius: 0; border: 7px double var(--pf-frame); }
.gacha-presentation-overlay[data-gacha-world="true"][data-gacha-motion="curtain"] .gacha-presentation-circle { border-radius: 40% 40% 0 0; border: 8px solid var(--pf-frame); }
.gacha-presentation-overlay[data-gacha-world="true"][data-gacha-motion="pixel"] .gacha-presentation-circle { border-radius: 0; border: 12px dashed var(--pf-primary); }
.gacha-presentation-overlay[data-gacha-world="true"][data-gacha-motion="fan"] .gacha-presentation-circle { border-radius: 0; border: 12px double var(--pf-frame); }
@keyframes world-select { from { opacity: .3; scale: .92; } to { opacity: 1; scale: 1; } }
@keyframes world-tap { from { opacity: .75; scale: .5; } to { opacity: 0; scale: 1.7; } }
@media (prefers-reduced-motion: reduce) {
 [data-ui-theme-family="world"][data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::before,
 [data-ui-theme-family="world"] :is(.tap-effect,.loading-emblem__ring),
 .gacha-presentation-overlay[data-gacha-world="true"] .gacha-presentation-circle { animation: none; transform: none; }
}

/* One paint owner for adopted raster frames. Geometry belongs to the layout. */
[data-ui-raster-kit="true"] :is(.formation-screen,.sortie-screen) .formation-slots { background: var(--pf-surface); }
[data-ui-raster-kit="true"] :is(.formation-screen,.sortie-screen) .formation-slots > .formation-slot-frame:not([data-ui-custom-frame]) { background-image: var(--theme-formation-frame); mask: none; }
[data-ui-raster-kit="true"] :is([data-ui-orientation="landscape"],.home-game-frame--landscape) {
 --pf-frame-art: var(--raster-panel-landscape);
 --pf-frame-slice: var(--raster-panel-landscape-slice);
 --theme-illustrated-panel: var(--raster-panel-landscape);
 --theme-illustrated-navigation: var(--raster-nav-landscape);
 --theme-formation-frame: var(--raster-formation-landscape);
 --raster-nav-side-ratio: var(--raster-nav-landscape-side-ratio);
}
[data-ui-custom-frame], [data-ui-asset-source="custom"] { --pf-frame-repeat: stretch; }

/* Navigation artwork stands on its own; do not squash frame ornaments into rails. */
[data-ui-raster-kit="true"] .home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]:not([data-nav-layout="grid"]):not([data-ui-asset-source="custom"],[data-ui-custom-frame])::before {
 content: none; border: 0; border-image: none; background: none;
}
[data-ui-raster-kit="true"] .home-bottom-nav[data-ui-skin="standard"][data-ui-role="navigation"]:not([data-nav-layout="grid"]):not([data-ui-asset-source="custom"],[data-ui-custom-frame])::after {
 inset: 0;
 width: auto; height: auto; background: linear-gradient(to bottom, transparent, var(--pf-surface) 30%); clip-path: none; border-radius: 0;
}
[data-ui-raster-kit="true"] .home-bottom-nav > .pf-nav-divider:not([data-ui-custom-frame],[data-ui-asset-source="custom"])::before { display: none; }
[data-ui-raster-kit="true"][data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-skin="standard"] { background-color: transparent; box-shadow: none; }
[data-ui-raster-kit="true"][data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"]::before { content: none; }
[data-ui-raster-kit="true"][data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"].home-bottom-nav-item--active::after {
 content: ""; position: absolute; inset: auto 30% 0; width: 40%; height: calc(2 * var(--control-px));
 border: 0; border-radius: 999px; background: var(--pf-primary); box-shadow: none; pointer-events: none;
}

[data-ui-raster-kit="true"] :is([data-ui-skin="standard"][data-ui-role="primary-action"],[data-ui-skin="standard"][data-ui-role="secondary-action"],.shop-product__buy):not([data-ui-asset-source="custom"],[data-ui-custom-frame]) {
 --raster-band: calc(4 * var(--control-px)); isolation: isolate; position: relative;
 background-color: transparent; border: 0; border-image: none; box-shadow: none; color: var(--raster-button-ink);
}
[data-ui-raster-kit="true"] :is([data-ui-skin="standard"][data-ui-role="primary-action"],[data-ui-skin="standard"][data-ui-role="secondary-action"],.shop-product__buy):not([data-ui-asset-source="custom"],[data-ui-custom-frame])::before {
 content: ""; display: block; position: absolute; inset: 0; z-index: -1; box-sizing: border-box;
 border: solid transparent; border-width: var(--raster-band) calc(var(--raster-band) * var(--raster-button-side-ratio));
 border-image: var(--theme-illustrated-button) 35% 25% fill / 1 / 0 stretch;
 background: none; border-radius: 0; box-shadow: none; pointer-events: none;
}
[data-ui-raster-kit="true"] :is([data-ui-skin="standard"][data-ui-role="primary-action"],[data-ui-skin="standard"][data-ui-role="secondary-action"],.shop-product__buy):not([data-ui-asset-source="custom"],[data-ui-custom-frame])::after { display: none; }
[data-ui-raster-kit="true"] :is([data-ui-skin="standard"][data-ui-role="primary-action"],[data-ui-skin="standard"][data-ui-role="secondary-action"],.shop-product__buy)[data-ui-custom-frame]::before,
[data-ui-raster-kit="true"] :is([data-ui-skin="standard"][data-ui-role="primary-action"],[data-ui-skin="standard"][data-ui-role="secondary-action"],.shop-product__buy)[data-ui-custom-frame]::after { display: none; }
[data-ui-raster-kit="true"][data-ui-theme-kit] :is([data-ui-skin="standard"][data-ui-role="primary-action"],[data-ui-skin="standard"][data-ui-role="secondary-action"],.shop-product__buy) .pf-label__text { color: var(--raster-button-ink); }

[data-ui-raster-kit="true"] .home-game-canvas { --home-tool-frame: var(--theme-tool-frame); }
[data-ui-raster-kit="true"][data-ui-theme-kit] .home-game-canvas > [data-ui-skin="standard"][data-ui-role="status-panel"]:not([data-ui-custom-frame],[data-ui-asset-source="custom"]) {
 --home-panel-frame-width: calc(5 * var(--control-px));
 --home-panel-frame: var(--raster-panel-landscape);
 --pf-frame-slice: var(--raster-panel-landscape-slice);
}
[data-ui-raster-kit="true"] .home-game-canvas > [data-ui-skin="standard"][data-ui-role="tool"]:not([data-ui-custom-frame])::before { background-image: var(--theme-tool-frame); background-size: contain; background-repeat: no-repeat; background-position: center; }
[data-ui-raster-kit="true"][data-ui-theme-kit] .home-game-canvas .home-level-badge[data-ui-asset-source="theme"]:not([data-ui-custom-frame]) { background-image: none !important; }
[data-ui-raster-kit="true"][data-ui-theme-kit] .home-game-canvas .home-level-badge[data-ui-asset-source="theme"]:not([data-ui-custom-frame])::before { display: block; inset: 0 0 -25%; background: var(--theme-rank-art) center / 100% 100% no-repeat; }
[data-ui-raster-kit="true"][data-ui-theme-kit] .home-game-canvas .home-level-badge[data-ui-asset-source="theme"][data-ui-custom-frame]::before { display: none; }
[data-ui-raster-kit="true"][data-ui-theme-kit] .home-game-canvas .home-level-badge[data-ui-asset-source="theme"] :is(.home-level-badge__caption,.home-level-badge__value) { color: var(--raster-rank-ink); }
[data-ui-raster-kit="true"][data-ui-theme-kit="wa-modern"] [data-ui-skin="standard"] > .home-bottom-nav-label:not(img)::before { filter: drop-shadow(0 0 1px #fff4db); }

/* Gothic: the registered box is content, while silverwork paints outside it. */
/* Navigation is lettering and silverwork; authored replacements retain their own art. */
[data-ui-theme-kit="gothic"][data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"]:not([data-ui-asset-source="custom"]) > :is(.home-bottom-nav-icon,.home-editable-part__icon-image) { display: none; }
[data-ui-theme-kit="gothic"][data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-skin="standard"][data-ui-role="navigation-item"]:not([data-ui-asset-source="custom"]) > .home-bottom-nav-label {
 left: 5%; top: 20%; width: 90%; height: 60%;
 --nav-v2-label-size: min(23cqw, 38cqh);
}
[data-ui-theme-kit="gothic"][data-ui-nav-kit="illustrated-v2"] .home-bottom-nav-item[data-ui-skin="standard"].home-bottom-nav-item--active::after { bottom: 12%; }

/* The banner's image area owns its aspect ratio, independent of viewport height. */
[data-ui-theme-kit="gothic"] .home-notice-banner { container-type: inline-size; }
[data-ui-theme-kit="gothic"] .home-notice-banner__viewport:not([data-ui-custom-frame]) { border: 0; }
[data-ui-theme-kit="gothic"] .home-notice-banner__viewport:not([data-ui-custom-frame])::before { inset: 0; }
[data-ui-theme-kit="gothic"] .home-notice-banner__viewport:not([data-ui-custom-frame])::after {
 inset: -8px; border: 8px solid transparent;
 border-image: var(--gothic-button-frame) var(--gothic-button-slice) / 1 / 0 stretch;
}
[data-ui-theme-kit="gothic"] .home-notice-banner__clip { clip-path: none; }
[data-ui-theme-kit="gothic"] .home-notice-banner .home-notice-banner__slide { height: auto; aspect-ratio: 3 / 1; min-height: 72px; }
[data-ui-theme-kit="gothic"] .home-notice-banner .home-notice-banner__copy strong { font-size: clamp(12px, 5cqw, 18px); }
[data-ui-theme-kit="gothic"] .home-notice-banner__controls { transform: translateY(4px); }

[data-ui-theme-kit="gothic"] .home-game-canvas {
 --gothic-action-band: calc(var(--home-action-content-width,348px) * .075);
 --gothic-action-rise: calc(var(--gothic-action-band) * (var(--gothic-button-top-weight) + 2 * var(--gothic-button-bottom-weight)) + 12px);
}

/* Expansion and border width match: the inner edge is the content edge. */
[data-ui-theme-kit="gothic"][data-ui-raster-kit="true"] .home-game-canvas > [data-ui-skin="standard"]:is([data-ui-role="primary-action"],[data-ui-role="secondary-action"]):not([data-ui-asset-source="custom"],[data-ui-custom-frame]) {
 --gothic-button-band: var(--gothic-action-band);
 --gothic-button-widths: calc(var(--gothic-button-band) * var(--gothic-button-top-weight)) calc(var(--gothic-button-band) * var(--gothic-button-right-weight)) calc(var(--gothic-button-band) * var(--gothic-button-bottom-weight)) calc(var(--gothic-button-band) * var(--gothic-button-left-weight));
 background-color: var(--pf-surface); border-radius: calc(3 * var(--control-px)); overflow: visible;
}
[data-ui-theme-kit="gothic"][data-ui-raster-kit="true"] .home-game-canvas > [data-ui-skin="standard"]:is([data-ui-role="primary-action"],[data-ui-role="secondary-action"]):not([data-ui-asset-source="custom"],[data-ui-custom-frame])::before {
 inset: calc(-1 * var(--gothic-button-band) * var(--gothic-button-top-weight)) calc(-1 * var(--gothic-button-band) * var(--gothic-button-right-weight)) calc(-1 * var(--gothic-button-band) * var(--gothic-button-bottom-weight)) calc(-1 * var(--gothic-button-band) * var(--gothic-button-left-weight));
 border: solid transparent; border-width: var(--gothic-button-widths); background: none;
 border-image: var(--gothic-button-frame) var(--gothic-button-slice) / 1 / 0 stretch; pointer-events: auto;
}
[data-ui-theme-kit="gothic"] .home-game-canvas > [data-home-slot-ref="home.battleButton"][data-ui-skin="standard"]:not([data-ui-asset-source="custom"],[data-ui-custom-frame]) { translate: 0 calc(-1 * var(--gothic-action-band) * var(--gothic-button-bottom-weight)); }
[data-ui-theme-kit="gothic"] .home-game-canvas > [data-home-slot-ref="home.storyButton"][data-ui-skin="standard"]:not([data-ui-asset-source="custom"],[data-ui-custom-frame]),
[data-ui-theme-kit="gothic"] .home-game-canvas:has(> [data-home-slot-ref="home.storyButton"][data-ui-skin="standard"]:not([data-ui-asset-source="custom"],[data-ui-custom-frame])) .home-speech[data-home-speech-skin="standard"]:not([data-ui-custom-frame]) { translate: 0 calc(-1 * var(--gothic-action-rise)); }

[data-ui-theme-kit="gothic"] .home-game-frame--landscape .home-game-canvas > [data-ui-skin="standard"]:is([data-ui-role="primary-action"],[data-ui-role="secondary-action"]):not([data-ui-asset-source="custom"],[data-ui-custom-frame]) {
 translate: calc(-1 * var(--gothic-action-band) * var(--gothic-button-right-weight) - 12px) 0;
}
[data-ui-theme-kit="gothic"] .home-game-frame--landscape .home-game-canvas > [data-home-slot-ref="home.storyButton"][data-ui-skin="standard"]:not([data-ui-asset-source="custom"],[data-ui-custom-frame]) {
 translate: calc(-1 * var(--gothic-action-band) * var(--gothic-button-right-weight) - 12px) calc(-1 * var(--gothic-action-band));
}

/* Faces own the square; theme material is confined to a quiet exterior edge. */
[data-ui-theme-kit] {
  --character-rim-width: clamp(1px, .25cqw, 2px);
  --character-rim-gap: max(var(--party-grid-gap), calc(2 * var(--character-rim-width) + 2px));
}
/* Dedicated rim artwork supplies its own exterior band; the face remains full-size. */
[data-ui-theme-kit] :is(.collection-card-list,.formation-bench-card,.gacha-presentation-card--summary,.battle-result-card__art,.battle-party-card__icon) .attribute-card-icon:not([data-ui-custom-frame]) {
  border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  outline: 1px solid var(--pf-frame); outline-offset: 0;
}
[data-ui-theme-kit] :is(.collection-card-list,.formation-bench-card,.gacha-presentation-card--summary,.battle-result-card__art,.battle-party-card__icon) .attribute-card-icon:not([data-ui-custom-frame])::after {
  content: ""; position: absolute; box-sizing: border-box;
  inset: calc(-1 * var(--character-rim-width));
  border: var(--character-rim-width) solid transparent;
  border-image: var(--character-rim-art) var(--character-rim-slice) / 1 / 0 stretch;
  background: none; box-shadow: none; pointer-events: none; z-index: 3;
}
[data-ui-theme-kit] :is(.collection-card-list,.formation-bench-card,.gacha-presentation-card--summary,.battle-result-card__art,.battle-party-card__icon) .attribute-card-icon:not([data-ui-custom-frame]) > .attribute-card-icon__art {
  inset: 0; border-radius: 0; clip-path: none;
}

/* A theme cannot change the agreed five-column density through decoration. */
[data-ui-theme-kit] .collection-screen .collection-list-panel .collection-card-list,
[data-ui-theme-kit] .formation-screen .formation-bench .formation-bench-list {
  grid-template-columns: repeat(5, min(var(--party-grid-column), calc((100% - 4 * var(--character-rim-gap)) / 5)));
  grid-auto-rows: max-content; gap: var(--character-rim-gap);
  padding: calc(var(--character-rim-width) + 1px); box-sizing: border-box;
}
[data-ui-theme-kit] :is(.collection-card-tile,.formation-bench-card) { aspect-ratio: 1; overflow: visible; }
[data-ui-theme-kit] :is(.collection-card-tile,.formation-bench-card) > .attribute-card-icon { width: 100%; height: auto; aspect-ratio: 1; }
[data-ui-theme-kit] .gacha-presentation-result-grid:not(.gacha-presentation-result-grid--single) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--character-rim-gap); padding: calc(var(--character-rim-width) + 1px);
}
[data-ui-theme-kit] .gacha-presentation-result-grid--single { padding: calc(var(--character-rim-width) + 1px); }
[data-ui-theme-kit] .gacha-presentation-overlay[data-phase="summary"] .gacha-presentation-panel { max-height: calc(100dvh - 32px); overflow-y: auto; }

/* Thin illustrated rings surround the existing icon and hit rectangle. */
[data-ui-theme-kit] .home-game-canvas > [data-ui-skin="standard"][data-ui-role="tool"]:not([data-ui-asset-source="custom"],[data-ui-custom-frame])::before {
  inset: 0; background: var(--theme-tool-frame) center / 100% 100% no-repeat;
}
[data-ui-theme-kit] .home-game-canvas > [data-ui-skin="standard"][data-ui-role="tool"]:not([data-ui-asset-source="custom"],[data-ui-custom-frame])::after,
[data-ui-theme-kit] .home-announcement-board__summary:not([data-ui-custom-frame])::after { inset: 3%; }
[data-ui-theme-kit] .home-announcement-board__summary:not([data-ui-custom-frame])::before {
  background-image: var(--theme-tool-frame);
}

/* Real loading and the editor preview share this same presentation. */
.screen-shell.boot-loading { grid-template-columns: minmax(0, 1fr); }
[data-ui-theme-kit] .boot-loading__shell {
  position: relative; isolation: isolate; overflow: hidden;
  min-width: 0; max-width: 100%; height: auto; aspect-ratio: 9 / 16; grid-template-columns: minmax(0, 1fr);
  background: var(--pf-surface); color: var(--pf-outline);
}
[data-ui-theme-kit] .boot-loading__shell[data-ui-orientation="landscape"] { aspect-ratio: 16 / 9; }
[data-ui-theme-kit] .boot-loading__shell[data-ui-orientation="landscape"] .boot-loading__content {
  grid-template-columns: minmax(96px, .5fr) minmax(0, 1fr);
  width: min(86%, 800px); column-gap: 28px; row-gap: 10px;
}
[data-ui-theme-kit] .boot-loading__shell[data-ui-orientation="landscape"] .theme-loading-mark {
  grid-column: 1; grid-row: 1 / span 4; align-self: center; width: clamp(96px, 14cqw, 168px);
}
[data-ui-theme-kit] .boot-loading__shell[data-ui-orientation="landscape"] :is(.boot-loading__tip-label,.boot-loading__tip,.boot-loading__label,.theme-loading-activity) { grid-column: 2; }
[data-ui-theme-kit] .boot-loading__shell::before,
.app-loading[data-themed-loading="true"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: none; opacity: .12;
}
[data-ui-theme-kit] .boot-loading__content { position: relative; padding: 24px 0; gap: 20px; }
[data-ui-theme-kit] .boot-loading__tip-label { color: var(--pf-primary); font-size: 12px; letter-spacing: .18em; }
[data-ui-theme-kit] .boot-loading__tip {
  max-width: min(100%, 34em); box-sizing: border-box; padding: 14px 18px; color: var(--pf-outline);
  background: color-mix(in srgb, var(--pf-surface) 88%, transparent);
  border-block: 1px solid color-mix(in srgb, var(--pf-frame) 35%, transparent);
  font-family: var(--font-body, sans-serif); font-size: clamp(14px, 3.2cqw, 17px);
  line-height: 1.8; overflow-wrap: anywhere;
}
[data-ui-theme-kit] .boot-loading__label,
[data-themed-loading="true"] .app-loading__label {
  color: var(--pf-outline); font-family: var(--theme-label-font, var(--font-display));
  font-size: 16px; font-weight: 600; line-height: 1.6; letter-spacing: .06em;
  text-align: center; max-width: min(84vw, 34em); overflow-wrap: anywhere;
}
.app-loading[data-themed-loading="true"] {
  isolation: isolate; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px; box-sizing: border-box;
  background: color-mix(in srgb, var(--pf-surface) 96%, transparent);
  color: var(--pf-outline); backdrop-filter: blur(4px);
}
.app-loading[data-themed-loading="true"]::before { opacity: .07; }
.loading-emblem.theme-loading-mark {
  width: clamp(112px, 26cqw, 168px); height: auto; aspect-ratio: 1;
  position: relative; isolation: isolate;
}
.loading-emblem.theme-loading-mark::before,
.loading-emblem.theme-loading-mark::after { content: none; }
.theme-loading-mark__ring {
  position: absolute; inset: var(--loading-ring-inset, 5%);
  background: var(--loading-ring-art, none) center / contain no-repeat;
  animation: theme-loading-turn var(--loading-ring-duration, 10s) var(--loading-ring-timing, linear) infinite;
}
.theme-loading-mark__emblem {
  position: absolute; inset: 29%; display: block;
  background: var(--loading-emblem-art, url('/assets/ui-kits/pop-fantasy-v2/loading/emerald.svg')) center / contain no-repeat;
  animation: var(--loading-emblem-animation, theme-loading-float) var(--loading-emblem-duration, 3.2s) var(--loading-emblem-timing, ease-in-out) infinite var(--loading-emblem-direction, normal);
}
.theme-loading-mark__halo {
  position: absolute; inset: 18%; border-radius: 50%; z-index: -1;
  background: var(--loading-halo-background, none);
  animation: var(--loading-halo-animation, none) 4s linear infinite;
}
.theme-loading-activity { display: flex; gap: 9px; height: 8px; align-items: center; }
.theme-loading-activity > span { width: 5px; height: 5px; border-radius: 50%; background: var(--pf-primary); animation: theme-loading-dot 1.8s ease-in-out infinite; }
.theme-loading-activity > span:nth-child(2) { animation-delay: .2s; }
.theme-loading-activity > span:nth-child(3) { animation-delay: .4s; }
.ui-theme-loading-preview { position: relative; border-radius: 10px; overflow: hidden; }
.ui-theme-loading-preview > [data-themed-loading="true"] { position: relative; inset: auto; z-index: 0; min-height: 260px; }
.ui-theme-loading-preview .theme-loading-mark { width: 128px; }
.ui-theme-loading-preview .app-loading__label { max-width: 100%; }
@keyframes theme-loading-turn { to { transform: rotate(360deg); } }
@keyframes theme-loading-float { 0%,100% { transform: translateY(3px); } 50% { transform: translateY(-3px); } }
@keyframes theme-loading-breathe { 0%,100% { opacity: .72; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.02); } }
@keyframes theme-loading-scan { 0%,100% { opacity: .65; transform: translateY(2px); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes theme-loading-sway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes theme-loading-bounce { 0%,100% { transform: translateY(2px); } 45% { transform: translateY(-5px); } 60% { transform: translateY(0); } }
@keyframes theme-loading-dot { 0%,80%,100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .theme-loading-mark > span, .theme-loading-activity > span { animation: none; transform: none; opacity: 1; }
}

/* Native corner art and tightly cropped rails have independent display sizes.
   Keep the existing layout borders/padding: these rules only replace paint. */
[data-ui-panel-paint="true"][data-ui-theme-kit] :is(
  .formation-detail-content .formation-detail-card__name,
  .formation-detail-content .formation-detail-tab,
  .formation-detail-content .formation-detail-tab-panel,
  .home-game-settings-panel.home-profile-panel,
  .home-character-panel.home-profile-panel,
  .home-announcement-panel,
  .story-reader-full-log__panel,
  .story-reader-textbox,
  .story-reader-log-open,
  .story-reader-next,
  .story-list-panel,
  .story-mode-tab,
  .gacha-utilities .game-disclosure__content,
  .gacha-pull-panel .screen-actions .screen-action,
  .gacha-presentation-voice,
  .battle-enemy-info,
  .sortie-screen .sortie-opponent,
  .battle-footer,
  .battle-result-headline,
  .battle-result-rewards,
  .battle-result-actions .screen-action,
  .event-screen__card,
  .event-screen__card > .screen-action,
  .shop-product
):not([data-ui-custom-frame],[data-ui-asset-source="custom"]),
[data-ui-panel-paint="true"][data-ui-theme-kit] .formation-detail-card__art .attribute-card-icon:not([data-ui-custom-frame])::after,
[data-ui-panel-paint="true"][data-ui-theme-kit] .gacha-presentation-card--featured:not([data-ui-custom-frame])::after,
[data-ui-panel-paint="true"][data-ui-theme-kit] .home-game-canvas > [data-ui-role="status-panel"]:not([data-ui-custom-frame],[data-ui-asset-source="custom"])::before,
[data-ui-panel-paint="true"][data-ui-theme-kit] .home-game-canvas .home-speech[data-home-speech-skin="standard"]:not([data-ui-custom-frame],[data-ui-asset-source="custom"])::before,
[data-ui-panel-paint="true"][data-ui-theme-kit] .home-notice-banner__viewport:not([data-ui-custom-frame])::after,
[data-ui-panel-paint="true"][data-ui-theme-kit] .home-event-banner:not([data-ui-custom-frame])::after {
  --panel-paint-unit: calc(1px / var(--panel-render-scale, 1) / var(--calibration-frame-scale, 1));
  --panel-corner-size: calc(32 * var(--panel-paint-unit));
  --panel-line-size: calc(2 * var(--panel-paint-unit));
  --panel-top-position: calc(var(--panel-corner-size) * var(--panel-top-anchor) - var(--panel-line-size) / 2);
  --panel-right-position: calc(var(--panel-corner-size) * var(--panel-right-anchor) - var(--panel-line-size) / 2);
  --panel-bottom-position: calc(var(--panel-corner-size) * var(--panel-bottom-anchor) - var(--panel-line-size) / 2);
  --panel-left-position: calc(var(--panel-corner-size) * var(--panel-left-anchor) - var(--panel-line-size) / 2);
  border-image: none;
  background-image: var(--panel-paint-images);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box;
  background-size:
    var(--panel-corner-size) var(--panel-corner-size),
    var(--panel-corner-size) var(--panel-corner-size),
    var(--panel-corner-size) var(--panel-corner-size),
    var(--panel-corner-size) var(--panel-corner-size),
    calc(100% - 2 * var(--panel-corner-size)) var(--panel-line-size),
    var(--panel-line-size) calc(100% - 2 * var(--panel-corner-size)),
    calc(100% - 2 * var(--panel-corner-size)) var(--panel-line-size),
    var(--panel-line-size) calc(100% - 2 * var(--panel-corner-size));
  background-position:
    left top, right top, left bottom, right bottom,
    left var(--panel-corner-size) top var(--panel-top-position),
    right var(--panel-right-position) top var(--panel-corner-size),
    left var(--panel-corner-size) bottom var(--panel-bottom-position),
    left var(--panel-left-position) top var(--panel-corner-size);
}

/* Portrait paint sits outside the full artwork, with clearance for the next row. */
[data-ui-panel-paint="true"][data-ui-theme-kit] :is(.formation-detail-content .formation-detail-tab,.story-mode-tab,.story-reader-log-open,.story-reader-next,.battle-result-actions .screen-action,.gacha-pull-panel .screen-actions .screen-action,.event-screen__card > .screen-action):not([data-ui-custom-frame],[data-ui-asset-source="custom"]) {
  --panel-corner-size: calc(26 * var(--panel-paint-unit));
}
[data-ui-panel-paint="true"][data-ui-theme-kit] .home-game-canvas > [data-ui-role="status-panel"]:not([data-ui-custom-frame],[data-ui-asset-source="custom"])::before {
  --panel-corner-size: calc(24 * var(--panel-paint-unit));
}
/* Short dialogue plates need clear text space, including in landscape. */
[data-ui-panel-paint="true"][data-ui-theme-kit] .home-game-canvas .home-speech[data-home-speech-skin="standard"]:not([data-ui-custom-frame],[data-ui-asset-source="custom"])::before {
  --panel-corner-size: calc(16 * var(--panel-paint-unit));
}
[data-ui-panel-paint="true"] .formation-detail-screen .formation-detail-card__art:has(.attribute-card-icon:not([data-ui-custom-frame])) {
  --detail-frame-width: 24px;
}
/* The product itself now owns the paint in both orientations. */
[data-ui-panel-paint="true"][data-ui-theme-kit] .shop-product:not([data-ui-custom-frame],[data-ui-asset-source="custom"])::before { content: none; }

/* Review round 8: in the themes with large corner art (gothic, occult,
   steampunk) the rails sit well inside the box, and the box's fill showed
   outside them. Their fill is painted as one more layer, inset to the rails,
   so it stays inside the frame. --panel-fill carries the state colour. */
[data-ui-panel-paint="true"]:is([data-ui-theme-kit="gothic"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="comic"]) :is(
  .formation-detail-content .formation-detail-card__name,
  .formation-detail-content .formation-detail-tab,
  .formation-detail-content .formation-detail-tab-panel,
  .story-list-panel,
  .story-mode-tab,
  .battle-enemy-info,
  .sortie-screen .sortie-opponent,
  .battle-footer,
  .shop-product
):not([data-ui-custom-frame],[data-ui-asset-source="custom"]) {
  --panel-fill: var(--pf-surface);
  background-color: transparent !important;
  background-image: var(--panel-paint-images), linear-gradient(var(--panel-fill), var(--panel-fill)) !important;
  background-size:
    var(--panel-corner-size) var(--panel-corner-size),
    var(--panel-corner-size) var(--panel-corner-size),
    var(--panel-corner-size) var(--panel-corner-size),
    var(--panel-corner-size) var(--panel-corner-size),
    calc(100% - 2 * var(--panel-corner-size)) var(--panel-line-size),
    var(--panel-line-size) calc(100% - 2 * var(--panel-corner-size)),
    calc(100% - 2 * var(--panel-corner-size)) var(--panel-line-size),
    var(--panel-line-size) calc(100% - 2 * var(--panel-corner-size)),
    calc(100% - var(--panel-left-position) - var(--panel-right-position)) calc(100% - var(--panel-top-position) - var(--panel-bottom-position)) !important;
  background-position:
    left top, right top, left bottom, right bottom,
    left var(--panel-corner-size) top var(--panel-top-position),
    right var(--panel-right-position) top var(--panel-corner-size),
    left var(--panel-corner-size) bottom var(--panel-bottom-position),
    left var(--panel-left-position) top var(--panel-corner-size),
    left var(--panel-left-position) top var(--panel-top-position) !important;
  background-repeat: no-repeat !important;
}
/* The selected tab keeps its tint inside the frame (round 8 lost it). */
[data-ui-panel-paint="true"]:is([data-ui-theme-kit="gothic"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="steampunk"]) :is(.story-mode-tab--active, .formation-detail-tab--active, .formation-detail-tab[aria-selected="true"], .formation-detail-tab[aria-pressed="true"]):not([data-ui-custom-frame],[data-ui-asset-source="custom"]) { --panel-fill: color-mix(in srgb, var(--pf-highlight, #fff) 72%, var(--pf-primary)) !important; }
/* Their corner art is large; the slim tabs get back some height. */
:is([data-ui-theme-kit="gothic"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="comic"]) .formation-detail-screen .screen-shell__body[data-ui-orientation="portrait"] .formation-detail-tab,
:is([data-ui-theme-kit="gothic"],[data-ui-theme-kit="occult"],[data-ui-theme-kit="steampunk"],[data-ui-theme-kit="japanese"],[data-ui-theme-kit="comic"]) .story-screen .screen-shell__body[data-ui-orientation="portrait"] .story-mode-tab { min-height: 42px !important; height: 42px !important; }
/* Round 9: japanese joins the inset fill, but its chosen tab stays the deep
   red with white lettering (the shared light tint washed the word out). */
[data-ui-panel-paint="true"]:is([data-ui-theme-kit="japanese"],[data-ui-theme-kit="comic"]) :is(.story-mode-tab--active, .formation-detail-tab--active, .formation-detail-tab[aria-selected="true"]) { --panel-fill: var(--pf-primary) !important; }

/* Full-scene theme art is exclusively a home layer. Screen content keeps its own art.
   Pop fantasy keeps its original kit, whose battle arena is part of that art. */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .screen-shell .screen-shell__body:not([data-ui-custom-frame],[data-ui-asset-source="custom"]) {
  background-image: none;
  background-color: var(--pf-surface);
}

[data-ui-theme-kit] .home-background-layer[data-ui-asset-source="theme"] {
  background-image: var(--home-theme-background-art);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

[data-ui-theme-kit] .home-game-frame--landscape .home-background-layer[data-ui-asset-source="theme"] {
  background-image: var(--home-theme-background-landscape);
}

/* Solid information surfaces sit below existing frame artwork. No layout changes. */
[data-ui-theme-kit][data-ui-nav-kit] :is(
  .formation-detail-card__art .attribute-card-icon,
  .formation-detail-content .formation-detail-card__name,
  .formation-detail-content .formation-detail-tab-panel,
  .home-game-settings-panel.home-profile-panel,
  .home-character-panel.home-profile-panel,
  .home-announcement-panel,
  .story-list-panel,
  .gacha-utilities .game-disclosure__content,
  .battle-enemy-info,.battle-footer,.battle-result-headline,.battle-result-rewards,
  .event-screen__card,.shop-product
):not([data-ui-custom-frame],[data-ui-asset-source="custom"]) {
  --ink: var(--panel-surface-ink);
  --ink-soft: var(--panel-surface-muted);
  --ink-muted: var(--panel-surface-muted);
  --pf-outline: var(--panel-surface-ink);
  --pf-muted: var(--panel-surface-muted);
  --paper: var(--panel-surface-inset);
  --line: var(--panel-surface-line);
  background-color: var(--panel-surface-fill);
  color: var(--panel-surface-ink);
  box-shadow: var(--panel-surface-shadow);
}

[data-ui-theme-kit][data-ui-nav-kit] :is(
  .formation-detail-content .formation-detail-tab-panel,
  .home-game-settings-panel.home-profile-panel,.home-character-panel.home-profile-panel,
  .home-announcement-panel,.story-list-panel,.gacha-utilities .game-disclosure__content,
  .battle-enemy-info,.battle-result-rewards,.event-screen__card,.shop-product
):not([data-ui-custom-frame],[data-ui-asset-source="custom"]) :is(h1,h2,h3,dt) {
  color: var(--panel-surface-heading);
}

/* Nested notes have a second solid surface, not a translucent layer over text. */
[data-ui-theme-kit][data-ui-nav-kit] .formation-detail-tab-panel:not([data-ui-custom-frame],[data-ui-asset-source="custom"]) :is(
  .formation-detail-voice-item,.formation-detail-story-item--open,.formation-detail-gallery-item
):not([data-ui-custom-frame],[data-ui-asset-source="custom"]) {
  --ink: var(--panel-surface-inset-ink);
  --ink-soft: var(--panel-surface-inset-ink);
  --ink-muted: var(--panel-surface-inset-ink);
  background-color: var(--panel-surface-inset);
  color: var(--panel-surface-inset-ink);
  border-color: var(--panel-surface-line);
}

[data-ui-theme-kit][data-ui-nav-kit] .formation-detail-content .formation-detail-tab:not([data-ui-custom-frame],[data-ui-asset-source="custom"]) {
  background-color: var(--panel-surface-fill);
  color: var(--panel-surface-heading);
}
[data-ui-theme-kit][data-ui-nav-kit] .formation-detail-content .formation-detail-tab[aria-selected="true"]:not([data-ui-custom-frame],[data-ui-asset-source="custom"]) {
  background-color: var(--panel-selected-fill);
  color: var(--panel-selected-ink);
}

/* Equal grid tracks sit above a dock that joins the bottom of the game frame. */
.home-bottom-nav[data-nav-layout="grid"] {
  display: grid; grid-template-columns: repeat(var(--nav-grid-columns, 5), minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr); align-items: stretch;
  box-sizing: border-box; padding: 1.1cqw 2cqw; gap: 1cqw;
  height: auto; aspect-ratio: 100 / 22; min-height: 0;
  --nav-icon-scale: .86;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  isolation: isolate; overflow: visible;
}
.home-bottom-nav[data-nav-layout="grid"] > .home-bottom-nav-item[data-nav-grid-item="true"] {
  position: relative; inset: auto; width: 100%; height: 100%; min-width: 0; min-height: 0;
  margin: 0; transform: none; box-sizing: border-box;
  --nav-v2-label-y: 61%;
}
:is([data-ui-orientation="landscape"],.home-game-frame--landscape) .home-bottom-nav[data-nav-layout="grid"] { aspect-ratio: 100 / 7; padding-block: .5cqw; --nav-icon-offset-y: 0%; }
:is([data-ui-orientation="landscape"],.home-game-frame--landscape) .home-bottom-nav[data-nav-layout="grid"] > .home-bottom-nav-item[data-nav-grid-item="true"] { --nav-v2-label-y: 26%; }
.home-bottom-nav[data-nav-layout="grid"]::before {
  content: ""; display: block; position: absolute; inset: 40% -4% -50%;
  z-index: -1; pointer-events: none; box-sizing: border-box;
  background: color-mix(in srgb, var(--pf-surface) 92%, var(--pf-primary) 8%);
  border: 0; border-top: max(1px, .12cqw) solid var(--pf-frame);
  border-radius: 1cqw 1cqw 0 0;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pf-highlight) 45%, transparent);
}
.home-bottom-nav[data-nav-layout="grid"]::after { content: none; display: none; }
.home-bottom-nav[data-nav-layout="grid"] > .pf-nav-divider { display: none; }
.home-bottom-nav[data-nav-layout="grid"] > .home-bottom-nav-item[hidden] { display: none; }

/* Balance these Japanese silhouettes against the fox mask, keeping the grid fixed. */
[data-ui-theme-kit="japanese"] .home-bottom-nav[data-nav-layout="grid"] > .home-bottom-nav-item[data-ui-skin="standard"]:has(> [data-label-key="home"]) { --nav-icon-scale: .74; --nav-word-emphasis: .9; }
[data-ui-theme-kit="japanese"] .home-bottom-nav[data-nav-layout="grid"] > .home-bottom-nav-item[data-ui-skin="standard"]:has(> [data-label-key="gacha"]) { --nav-icon-scale: 1.08; --nav-word-emphasis: 1.05; }
[data-ui-theme-kit="japanese"] .home-bottom-nav[data-nav-layout="grid"] > .home-bottom-nav-item[data-ui-skin="standard"]:has(> [data-label-key="shop"]) { --nav-icon-scale: 1.02; --nav-word-emphasis: 1.08; }
[data-ui-theme-kit="japanese"] .home-bottom-nav[data-nav-layout="grid"] > .home-bottom-nav-item[data-ui-skin="standard"] > .home-bottom-nav-label:not(img):not([data-ui-custom-frame]) { scale: var(--nav-word-emphasis, 1); transform-origin: 50% 100%; }
[data-ui-theme-kit="japanese"] .home-bottom-nav[data-nav-layout="grid"] > .home-bottom-nav-item[data-ui-skin="standard"]:is(:has(> [data-label-key="gacha"]),:has(> [data-label-key="shop"])) > :is(.home-editable-part__icon-image,.home-bottom-nav-icon) { translate: 0 var(--nav-icon-offset-y, 8%); }

/* 横持ちの検品の直し（2026-10-05〜）。
   縦持ちと横持ちは独立している。ここに置く規則は、どれも横のときだけ効くように
   セレクタの一つ一つに横の印を付ける:
     :where([data-ui-orientation="landscape"],[data-ui-orientation="landscape"] *)
   （:where() は詳細度を足さないので、付けても強さは変わらない）。
   印のない規則を置くと tests/unit/landscape-review-scoped.test.mjs が落ちる。
   縦の写真が一枚も変わっていないことを撮って確かめてから完了とする。

   Last in the build order so a landscape fix wins over the theme files it
   corrects without needing extra specificity. */

/* 横持ち第1ラウンド: ホーム以外の画面を、横にしたスマホ（375 x 16/9 = 666.67px 幅）で組んで
   実際の枠へ拡大する。縦（02-shared/screen-zoom.css）と同じ考え方で、拡大率だけ横用
   （--screen-zoom-landscape、ui/screen-zoom.mjs）。字・ボタン・タイルが縦と同じ大きさに見える。
   キャラ詳細・ストーリー一覧・戦闘は、横用の配置（拡大なし）のほうが良かったので拡大しない（横持ち第2ラウンド）。 */
[data-ui-orientation="landscape"]:where(:not(.screen-shell__body)) { --screen-frame-actual-landscape: var(--screen-frame-inline); }
.screen-shell:not(.formation-detail-screen, .story-screen, .battle-screen) > .screen-shell__body[data-ui-orientation="landscape"] {
  zoom: var(--screen-zoom-landscape, 1);
  --screen-frame-inline: 666.6667px;
  --screen-frame-block: 375px;
  --screen-shell-border-width: max(1px, calc(375px * 0.003704));
  --screen-shell-radius: calc(375px * 0.025926);
  --party-grid-gap: calc(375px * var(--party-grid-gap-ratio));
  --party-grid-column: calc(375px * var(--party-grid-column-ratio));
}
/* 共通の上の帯（ホームのキャンバス）は自分で枠に合わせるので、拡大を戻す。 */
.screen-shell:not(.formation-detail-screen, .story-screen, .battle-screen) > .screen-shell__body[data-ui-orientation="landscape"] .game-status-plane {
  zoom: calc(1 / var(--screen-zoom-landscape, 1));
  --screen-frame-inline: var(--screen-frame-actual-landscape);
}

/* ストーリー再生も同じ横のスマホで組んで拡大する（字の上限 16px が大きな画面で小さく見えていた）。 */
.story-reader-screen[data-ui-orientation="landscape"] {
  zoom: var(--screen-zoom-landscape, 1);
  --screen-frame-inline: 666.6667px;
  --screen-frame-block: 375px;
}

/* ボックス: タイルは縦と同じ大きさ（拡大前 52px 四方、縦の実測 50〜53px）のまま、横幅いっぱいに並べる
   （縦の「5列」は横には持ち込まない）。 */
[data-ui-orientation="landscape"] :is(.collection-screen .collection-list-panel .collection-card-list, .formation-screen .formation-bench .formation-bench-list) {
  grid-template-columns: repeat(auto-fill, 52px);
  grid-auto-rows: max-content;
  justify-content: start;
}

/* 出撃のボタン: 横では高さを決め、幅は絵の比率から出す（縦の「横幅いっぱい＋絵の比率」を
   横に持ち込むと、ボタンが画面の半分の幅で背の高い板になっていた）。
   テーマの印は横の印と同じ一番外の要素に付くので、横の印はボタン側（:where(... *)）に付ける。 */
[data-ui-orientation="landscape"] .sortie-screen .sortie-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 24px; }
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]):not([data-ui-theme-family="urban"]) .sortie-screen .sortie-actions .screen-action:not(.game-screen-part--has-asset):where([data-ui-orientation="landscape"] *) {
  --sortie-h: 48px;
  flex: 0 0 auto; height: var(--sortie-h) !important;
  width: calc(var(--sortie-h) * var(--theme-button-ratio, 2.5)) !important;
  /* 縦は余白を幅の割合で取っているが、横は高さが基準なので、絵の内側の枠を高さから出す。 */
  padding: calc(var(--theme-button-inset-t, .2) * var(--sortie-h)) calc(var(--theme-button-inset-r, .1) * var(--sortie-h) * var(--theme-button-ratio, 2.5)) calc(var(--theme-button-inset-b, .2) * var(--sortie-h)) calc(var(--theme-button-inset-l, .1) * var(--sortie-h) * var(--theme-button-ratio, 2.5)) !important;
}
/* 出発は主ボタンで、字と消費の数が入るので一段大きく。 */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]):not([data-ui-theme-family="urban"]) .sortie-screen .sortie-actions .sortie-depart:not(.game-screen-part--has-asset):where([data-ui-orientation="landscape"] *) { --sortie-h: 60px; }
/* Pop Fantasy の出撃ボタンの絵は 3:1。引き伸ばさずにその比率で描く。 */
[data-ui-theme-kit="fantasy"] .sortie-screen .sortie-actions .screen-action:not(.game-screen-part--has-asset):where([data-ui-orientation="landscape"] *) {
  flex: 0 0 auto; width: auto; height: 48px; aspect-ratio: 3; padding: 0 18px;
}

/* ボックスのキャラ / 装備: 縦の編成の一覧と同じく、一覧の左に縦書きの細いタブを立てる
   （札の絵は立てて使い、字は縦書きの絵 tab-*-v）。 */
.collection-screen .screen-shell__body[data-ui-orientation="landscape"] .screen-shell__content {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: 10px;
}
.collection-screen .screen-shell__body[data-ui-orientation="landscape"] .collection-kind-tabs {
  grid-column: 1; grid-row: 1;
  flex-direction: column; justify-content: flex-start; align-items: center;
  gap: 22px; padding: 10px 0 0; min-height: 0;
}
.collection-screen .screen-shell__body[data-ui-orientation="landscape"] .collection-layout { grid-column: 2; grid-row: 1; }
.collection-screen .screen-shell__body[data-ui-orientation="landscape"] .collection-kind-tabs .screen-action {
  writing-mode: vertical-rl; text-orientation: upright;
  min-width: 0; width: 30px !important; min-height: 72px; height: 72px; padding: 6px 0;
}
.collection-screen .screen-shell__body[data-ui-orientation="landscape"] .collection-kind-tabs .screen-action::before {
  inset: auto; left: 50%; top: 50%;
  width: calc(72px * 1.22); height: calc(30px * 1.32);
  transform: translate(-50%, -50%) rotate(90deg);
  background-size: 100% 100%;
}
/* 字の絵の規則（ui-theme-art.mjs）は横書き用の大きさを持っていて詳細度も高いので、縦のタブでは上書きする。 */
.collection-screen .screen-shell__body[data-ui-orientation="landscape"] .collection-kind-tabs .screen-action > .tab-word[data-tab-word] {
  position: absolute !important; inset: 12% 14% !important; min-width: 0 !important; width: auto !important; height: auto !important;
}

/* ショップ: 5つの商品が横一列に収まるように。 */
[data-ui-orientation="landscape"] .shop-screen .screen-shell__content .shop-product-list .shop-product { flex: 1 1 0; min-width: 0; width: auto; max-width: none; }

/* 編成・出撃の枠のカードの属性の印: 縦（第13ラウンド）は角の外へ寄せているが、横のカードでは
   右下の枠に埋もれる。横では左上へ寄せて、印が欠けずに見えるようにする（全テーマ）。 */
/* 位置調整のデータが translate を !important で持つので（23% 26% 外寄り）、重ねがけできる transform で動かす。 */
[data-ui-theme-kit] :is(.formation-screen, .sortie-screen) .formation-slot-card__attribute.attribute-card-icon__badge:where([data-ui-orientation="landscape"] *) { transform: translate(-20%, -22%); }

/* ホームのプレイヤー名: 名前の字に位置調整の拡大（約1.25倍）がかかり、はみ出しを隠す枠から下が切れていた。
   長い名前の「…」は残したまま、枠の外へ少しだけ描けるようにする。 */
.home-game-frame--landscape .home-player-name-tag__name { overflow: clip; overflow-clip-margin: 0.5em; }

/* ホームの物語 / 戦闘: 横の戦闘ボタンは「絵が上、字が下」（landscape.css）で、物語の「絵の右に字」と
   揃っていなかった。物語と同じく絵を左、字を右に置く。 */
/* 横持ち第6ラウンド: 物語と戦闘を同じ物差しで置く。戦闘ボタンには位置調整の拡大（scale）がかかるが、2つのボタンは
   見た目の幅が同じなので、絵と字の大きさ・位置をボタンの幅の割合（と縦横比）で決めれば、どのテーマでも同じ大きさに見える
   （前は Pop Fantasy で測った倍率を掛けていて、字の絵の比率が違う他のテーマで物語が大きく、戦闘が小さくなった）。
   横持ち第7ラウンド: 字を少し左へ（40% → 35%。字の絵は箱の中央に描かれるので、アイコンとは重ならない）。 */
.home-game-frame--landscape :is(.story-slot-button, .battle-slot-button)[data-ui-skin="standard"] :is(.home-editable-part__icon-image, .story-slot-button-icon, .battle-slot-button-icon) {
  position: absolute !important; left: 5% !important; top: 50% !important; right: auto !important; bottom: auto !important;
  width: 31% !important; height: auto !important; aspect-ratio: 1; translate: 0 -50% !important; transform: none !important; scale: none !important;
}
.home-game-frame--landscape :is(.story-slot-button, .battle-slot-button)[data-ui-skin="standard"] .pf-label {
  position: absolute !important; left: 35% !important; right: auto !important; top: 50% !important; bottom: auto !important;
  width: 55cqw !important; max-width: none !important; height: calc(55cqw / 2.3) !important; translate: 0 -50% !important; transform: none !important; scale: none !important;
}
.home-game-frame--landscape :is(.story-slot-button, .battle-slot-button)[data-ui-skin="standard"] { container-type: inline-size; }

/* Pop Fantasy のナビ: 手描きの部品（composed-nav-art）は縦の大きさのままで、横では他のテーマの
   半分以下だった。絵と字を他のテーマと同じくらいに拡大する。 */
[data-ui-theme-kit="fantasy"] .home-game-frame--landscape .home-bottom-nav-item > :is(img.home-editable-part__icon-image, .pf-nav-art) { zoom: 2.9; }

/* 文字の最低サイズ 9pt（12px）。横のスマホ（拡大率ほぼ 1）で 12px を下回っていた字（横持ち第1ラウンドの調べ）。
   ホームはキャンバス（論理幅 1920）がスマホでは約 0.353 倍になるので、34px で 12px。 */
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__empty-prompt,
.shop-screen .screen-shell__body[data-ui-orientation="landscape"] .shop-balance__note,
.story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-list-item__status,
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-hp__label { font-size: 12px; }
.home-game-frame--landscape .home-notice-banner__copy small { font-size: 12px; }
.home-game-frame--landscape .home-speech__text { font-size: 34px; }

/* 横持ち第2ラウンド */
/* ガチャボタン: 拡大で大きくなりすぎたので、縦横とも半分（面積 1/4）に。 */
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-pull-panel .screen-actions { zoom: .5; }
/* 横持ち第3ラウンド: 横幅をさらに 2/3 に（ボタンの絵の比率を保つので高さも 2/3）。 */
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-pull-panel .screen-actions { width: 66.667%; margin-inline: auto; }
/* ストーリー再生の送りボタンを小さく。 */
.story-reader-screen[data-ui-orientation="landscape"] .story-reader-next { zoom: .6; }
/* ホーム以外の画面の上の帯でも、プレイヤー名の下が切れないように（ホームと同じ直し）。 */
[data-ui-orientation="landscape"] .game-status-plane .home-player-name-tag__name { overflow: clip; overflow-clip-margin: 0.5em; }
/* ボックスのカードの属性の印: 横では大きく下の縁からはみ出していた。縦と同じく右下の角の内側に収める。 */
[data-ui-theme-kit] .collection-screen .collection-card-tile .attribute-card-icon__badge:where([data-ui-orientation="landscape"] *) { transform: translate(-14%, -16%) scale(.82); transform-origin: right bottom; }
/* 編成の 1/2/3 を編成枠に寄せる（枠との隙間が約 28px＝拡大後 80px あった）。 */
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-presets { transform: translateX(20px); width: 32px; gap: 6px; }

/* 横持ち第3ラウンド */
/* ホームの物語の絵を大きく（絵は場所を数値で置いているので、拡大は見た目だけ）。 */
/* ホームの物語・戦闘のボタンを左へ寄せて、右の余白を増やす。位置調整のデータが translate と（戦闘には）scale を持つので、
   倍率の影響を受けない margin で同じ 48px 寄せる。 */
.home-game-frame--landscape :is(.story-slot-button, .battle-slot-button) { margin-left: -48px; }
/* キャラ詳細のタブの字（ステータス・育成・キャラ詳細）を大きく。字の絵は字の大きさに合わせて大きくなる。 */
.formation-detail-screen .formation-detail-shell[data-ui-orientation="landscape"] .formation-detail-tab { font-size: 26px; }
/* ショップ: 字が枠いっぱいに詰まっていた。商品名を一段小さく、内側に余白を取り、説明は「＋」の前で折り返す（「おまけ 100」を割らない）。 */
[data-ui-orientation="landscape"] .shop-screen .screen-shell__content .shop-product-list .shop-product { padding: 14px 12px; }
[data-ui-orientation="landscape"] .shop-screen .shop-product .shop-product__name { font-size: 15px; line-height: 1.3; }
[data-ui-orientation="landscape"] .shop-screen .shop-product .shop-product__jewels { font-size: 12px; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
/* 出撃: 相手の欄に押されて編成枠が狭かった。相手の欄は細い縦長に（VS・絵・名前を縦に積んで1画面に収める）、1/2/3 は小さく詰める。 */
.sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .screen-shell__content { grid-template-columns: 34px minmax(0, 1fr) 96px; gap: 8px; }
.sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .sortie-presets { gap: 6px; padding-block: 16px 8px; }
.sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .sortie-preset { flex: 0 0 32px; width: 32px; height: 32px; min-height: 32px; min-width: 0; font-size: 14px; }
.sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .sortie-opponent { overflow: hidden; padding: 6px; }
.sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .sortie-enemy { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .sortie-enemy__name { font-size: 12px; overflow-wrap: anywhere; }
.sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .sortie-enemy { width: 100%; }
.sortie-screen .screen-shell__body[data-ui-orientation="landscape"] img.sortie-enemy__vs { width: 100%; height: auto; max-height: 40px; aspect-ratio: 3 / 2; object-fit: contain; flex: 0 0 auto; }
.sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .sortie-enemy__icon { width: 36px; height: 36px; }

/* 横持ち第4ラウンド */
/* 出撃: 編成枠を大きく。画面の左右の余白を詰めて 1/2/3 と相手の欄を端へ、下の余白を詰めてボタンを下げる。 */
.sortie-screen .screen-shell__body[data-ui-orientation="landscape"] { padding-inline: 10px; padding-top: 58px; padding-bottom: 50px; }
.sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .screen-shell__content { padding-inline: 0; column-gap: 10px; row-gap: 6px; }
/* 出撃（Pop Fantasy 以外）: Pop Fantasy の横の編成枠の絵（板とレール）が全テーマに出て、カードとずれて重なっていた。
   外して、ワールド系は自分の横用の枠の絵を使う。 */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slots { background-image: none; }
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-frame:not([data-ui-custom-frame]) { background-image: none; }
[data-ui-raster-kit="true"]:not([data-ui-theme-kit="fantasy"]) .sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-frame:not([data-ui-custom-frame]) { background-image: var(--theme-formation-frame); }
/* 横持ちの編成枠の絵（formation-landscape-v3、テーマごとに描き下ろし・隅飾りはマスの外）。カードの並びは Pop Fantasy の比率のまま
   動かさない（カードの絵はその比率で切ってある、持ち主の指示）。代わりに枠の絵の方を、測った外周の線
   （ui-formation-landscape-frames.mjs）がカードの並びの外周に重なるように伸び縮みさせて置く。 */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) :is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slots { background-image: none !important; }
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) :is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slots > .formation-slot-frame:not([data-ui-custom-frame]) { background: none !important; mask: none !important; }
/* 横持ち第6ラウンド: 枠はカードの上に重ねる（キャラの絵は枠の下）。外周は左右 1.6%・上下 2.6% 外へ逃がし、
   角の飾りや線が数値に入らないようにする。カードの段（絵＋装備 / 数値）は Pop Fantasy の比率で、枠の絵の段と
   合わないので、枠を「上＋中の段」（::before）と「数値の段」（::after）の2枚に分けて、それぞれの区切り線を
   カードの区切りに合わせて伸び縮みさせる。単位は一覧の大きさ（container の cqw / cqh）。 */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) :is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] :is(.formation-slot-list, .formation-slots > .formation-slot-frame) {
  container-type: size;
  --fl-mx: 0px; --fl-my: 0px;  /* 横持ち第8ラウンド: 外へ逃がすのをやめ、外周をカードの外周にぴったり合わせる（隅の飾りは v3 でマスの外） */
  --fl-a1: 65.04cqh;  /* 絵の段の下端（Pop Fantasy のカードの段 718:239:147） */
  --fl-r1: 86.68cqh;  /* 数値の段の上端 */
  --fl-fw: calc((100cqw + 2 * var(--fl-mx)) / (var(--fl-x1, .96) - var(--fl-x0, .04)));
  --fl-sa: calc((var(--fl-a1) + var(--fl-my)) / (var(--fl-y1, .6) - var(--fl-y0, .046)));
  --fl-sm: calc((var(--fl-r1) - var(--fl-a1)) / (var(--fl-y2, .8) - var(--fl-y1, .6)));
  --fl-sb: calc((100cqh + var(--fl-my) - var(--fl-r1)) / (var(--fl-y3, .966) - var(--fl-y2, .8)));
}
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) :is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-list::before,
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) :is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-list::after,
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) :is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slots > .formation-slot-frame::before {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  left: calc(-1 * var(--fl-x0, .04) * var(--fl-fw) - var(--fl-mx)); width: var(--fl-fw);
  background: var(--fl-frame, var(--theme-formation-frame, none)) center / 100% 100% no-repeat;
}
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) :is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-list::before {
  top: calc(-1 * var(--fl-my) - var(--fl-y0, .046) * var(--fl-sa)); height: var(--fl-sa);
  clip-path: inset(0 0 calc((1 - var(--fl-y1, .6) - .012) * 100%) 0);
}
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) :is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-list::after {
  top: calc(var(--fl-r1) - var(--fl-y2, .8) * var(--fl-sb)); height: var(--fl-sb);
  clip-path: inset(calc((var(--fl-y2, .8) + .012) * 100%) 0 0 0);
}
/* 横持ち第7ラウンド: 枠を3段に。真ん中の段（装備）は、一覧と同じ位置に重ねた枠の要素の ::before に描き、
   「絵|装備」の線をカードの絵の下端に合わせる（2段のときは枠の絵の比率のままで、線とカードの絵がずれていた）。 */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slots > .formation-slot-frame:not([data-ui-custom-frame]) { inset: 4.61384% 4% 3.41023% 4% !important; pointer-events: none; }
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) .sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slots > .formation-slot-frame:not([data-ui-custom-frame]) { inset: 4.66278% 4.35114% 3.41382% 3.96947% !important; pointer-events: none; }
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) :is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slots > .formation-slot-frame::before {
  top: calc(var(--fl-a1) - var(--fl-y1, .6) * var(--fl-sm)); height: var(--fl-sm);
  clip-path: inset(calc((var(--fl-y1, .6) + .012) * 100%) 0 calc((1 - var(--fl-y2, .8) - .012) * 100%) 0);
}

/* 戦闘（横）: A 方式。舞台（敵）は上に広く、下の帯を5人分に分け、各人の顔と HP の右にスキル（上）と
   必殺技（下）を縦に並べる（2026-10-05、持ち主の案）。部品の入れ物は display: contents で外し、
   ボタンは自分の --battle-command-column（何人目か）で列を決める。 */
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-footer {
  display: grid;
  /* 帯の高さ = 画面の高さの 30%。ボタン1つの辺 = 帯の半分（スキル・必殺技の2段）。 */
  --battle-band: min(27vh, 290px); --battle-gap: 6px;
  --battle-btn: calc((var(--battle-band) - var(--battle-gap)) / 2 * .78);
  grid-template-columns: repeat(5, minmax(0, 1fr) var(--battle-btn));
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--battle-gap); row-gap: var(--battle-gap);
  height: var(--battle-band);
}
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] :is(.battle-party-strip, .battle-command-grid, .battle-actions) { display: contents; }
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-party-slot { grid-row: 1 / 3; min-width: 0; height: auto; }
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-party-slot:nth-child(1) { grid-column: 1; }
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-party-slot:nth-child(2) { grid-column: 3; }
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-party-slot:nth-child(3) { grid-column: 5; }
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-party-slot:nth-child(4) { grid-column: 7; }
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-party-slot:nth-child(5) { grid-column: 9; }
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-command {
  grid-column: calc(var(--battle-command-column, 1) * 2) !important; grid-row: 1 !important;
  width: var(--battle-btn) !important; height: var(--battle-btn) !important; min-height: 0 !important; min-width: 0 !important; padding: 0; margin: 0; align-self: center; justify-self: center;
}
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-command--special { grid-row: 2 !important; }
/* 顔の札は帯の高さいっぱいに（顔を大きく）。 */
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-party-slot { height: 100% !important; max-height: none !important; align-self: stretch; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) auto !important; overflow: hidden; }
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-party-card__icon { min-height: 0; height: 100% !important; }
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-action-empty { display: none; }
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .screen-shell__content { grid-template-rows: minmax(0, 1fr) auto; }

/* 横持ち第5ラウンド */
/* ホームの物語・戦闘: 絵と字の見た目の大きさを揃える（戦闘ボタンには位置調整の拡大がかかっているので、
   測った見た目の高さで合わせる: 絵 約140px、字 約64px）。 */
/* 編成の 1/2/3 を出撃と同じ大きさ（32px）に。 */
.formation-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-preset { flex: 0 0 32px !important; max-height: 32px !important; width: 32px !important; height: 32px !important; min-height: 32px !important; min-width: 0 !important; font-size: 14px; }
/* ショップ: 商品の高さを取って詰まりを解く（説明の行が収まる高さ）。 */
[data-ui-orientation="landscape"] .shop-screen .screen-shell__content .shop-product-list .shop-product { min-height: 0; height: 100%; grid-template-rows: minmax(0, 1fr) auto auto auto; row-gap: 4px; }
/* 横持ち第7ラウンド: 商品は一覧の高さちょうどに（215px の最低の高さが一覧の表示枠より大きく、下が切れていた）。 */
[data-ui-orientation="landscape"] .shop-screen .screen-shell__content .shop-product-list { grid-auto-rows: 100%; align-items: stretch; }
/* Pop Fantasy: ホーム以外の画面の下のナビが、ホームより小さかった（絵 80px・字 126px に対しホームは 116px・165px）。揃える。 */
[data-ui-theme-kit="fantasy"] .screen-shell__body[data-ui-orientation="landscape"] .game-bottom-nav .home-bottom-nav-item > img.home-editable-part__icon-image { zoom: 4.153; }
[data-ui-theme-kit="fantasy"] .screen-shell__body[data-ui-orientation="landscape"] .game-bottom-nav .home-bottom-nav-item > .pf-nav-art { zoom: 3.709; }
/* Pop Fantasy: 下のナビのガチャの絵と字を近づける。 */
[data-ui-theme-kit="fantasy"] :is(.home-game-frame--landscape, .screen-shell__body[data-ui-orientation="landscape"]) [data-calibration-key="home.navGacha"] > .pf-nav-art { margin-left: 0; }
/* ガチャボタンを下げて台座に載せる。 */
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-pull-panel { transform: translateY(18px); }
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] :is(.screen-shell__content, .gacha-screen__dock, .gacha-pull-panel) { overflow: visible; }

/* 横持ち第6ラウンド */
/* 和モダン: 編成・出撃の数値の段は暗い地なので、HP・攻撃の字の絵を白く。 */
:is([data-ui-theme-kit="wa-modern"], [data-ui-theme-kit="space-control"]) :is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] img.formation-slot-card__stat-word { filter: brightness(0) invert(1) !important; }
/* 画面の上の余白をテーマによらず同じに（ランクの旗の高さで本文の始まりが上下していた。ショップの「疑似購入です」の高さの違いの原因）。 */
[data-ui-orientation="landscape"] .screen-shell__body[data-has-status-bar="true"] { padding-top: calc(var(--screen-frame-inline) * 156 / 1920 + 13px); }
/* ショップ: 商品の下が画面の中身の枠で切れていたので、切れないように。 */
.shop-screen .screen-shell__body[data-ui-orientation="landscape"] .screen-shell__content { overflow: visible; }
/* ホームのお知らせ: 縦と同じ 3:1 に。文字の地はテーマの地の色（クリーム色の固定をやめる）。 */
.home-game-frame--landscape .home-notice-banner .home-notice-banner__slide { aspect-ratio: 3 / 1; height: auto; }
.home-game-frame--landscape .home-notice-banner__copy { background: color-mix(in srgb, var(--pf-surface, #fff9ed) 92%, transparent); color: var(--pf-ink, inherit); }
/* 戦闘: 下の帯にテーマの枠。 */
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-footer { position: relative; padding: 10px 14px; box-sizing: border-box; height: calc(var(--battle-band) + 20px); }
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border: var(--pf-frame-thickness, 12px) solid transparent;
  background: color-mix(in srgb, var(--pf-surface, #fff9ed) 70%, transparent) padding-box;
}
/* 横持ち第7ラウンド: 枠の線は顔の絵より上に重ねる（下地は ::before で後ろ、線は ::after で前）。 */
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-footer::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  border: var(--pf-frame-thickness, 12px) solid transparent;
  border-image: var(--pf-frame-art) var(--pf-frame-slice) / 1 / 0 var(--pf-frame-repeat, stretch);
}
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-footer > * { position: relative; z-index: 1; }
/* 戦闘: 敵の欄は「属性の印・名前」の下に HP バー。HP バーの長さは、敵5体なら1体分（画面の1/5）を基本に、
   1体だけのとき（ボス扱い）は3体分（3/5）。 */
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-enemy-info {
  width: 60%; justify-self: center; box-sizing: border-box;
  grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 6px; align-items: center;
}
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-enemy-info .battle-enemy-attribute { grid-column: 1; grid-row: 1; width: auto; }
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-enemy-info .battle-unit__name { grid-column: 2; grid-row: 1; width: auto; font-size: 30px; line-height: 1.2; }
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-enemy-info > .battle-hp { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 30px; }
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-enemy-info .battle-enemy-attribute__icon { width: 36px; height: 36px; }
.battle-screen .screen-shell__body[data-ui-orientation="landscape"] .battle-enemy-info .battle-hp__label { font-size: 16px; }

/* 横持ち第7ラウンド */
/* ホーム以外の画面の下のナビを、ホームと同じ組み方に（画面の拡大を戻す。上の帯と同じ扱い）。
   拡大の中で組むと、ナビの中の絵と字がホームより数px下に落ちていた。 */
.screen-shell:not(.formation-detail-screen, .story-screen, .battle-screen) > .screen-shell__body[data-ui-orientation="landscape"] .game-navigation-plane {
  zoom: calc(1 / var(--screen-zoom-landscape, 1));
  --screen-frame-inline: var(--screen-frame-actual-landscape);
}
/* 余白と間隔もホームの実寸に合わせる（ホームは 5.3px・21.3px・間 10.7px、拡大を戻した画面は 9.5px・37.9px・19px で、
   ボタンが幅 338px・高さ 110px と小さく、中の絵と字もその分小さく下に寄っていた）。 */
.screen-shell:not(.formation-detail-screen, .story-screen, .battle-screen) > .screen-shell__body[data-ui-orientation="landscape"] .game-navigation-plane .home-bottom-nav.game-bottom-nav {
  padding: 0.2813cqw 1.125cqw; gap: 0.5627cqw;
}
/* 編成・出撃のカードの HP / 攻撃: 位置調整のデータで1つずつずらして置いていたため、攻撃だけ箱の大きさと高さが違い
   （HP 91x25px、攻撃 61x30px で 6px 上）、出撃では数字がカードの下へはみ出していた。横では、カードの左右半分に
   同じ置き方（字の下に数字、半分の中央）で並べ、大きさは数字の欄の高さに対する割合で決める。
   位置調整のデータが強いセレクタ＋!important で translate を当てているので、:not(#_) で強さを足して上書きする。 */
:is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__stats:not(#_) {
  display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: 100% !important; align-items: center;
  container-type: size; padding: 0 4% !important; gap: 0 !important;
}
:is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__stat:not(#_) {
  grid-row: 1 !important; position: relative !important; display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important; gap: 4cqh !important;
  width: auto !important; height: 100% !important; inset: auto !important; padding: 0 !important; margin: 0 !important;
}
:is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__stat:nth-child(1):not(#_) { grid-column: 1 !important; }
:is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__stat:nth-child(2):not(#_) { grid-column: 2 !important; }
:is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] :is(.formation-slot-card__stat-word, .formation-slot-card__stat-value, .formation-slot-card__stat-value > *):not(#_) {
  position: static !important; inset: auto !important; translate: none !important; transform: none !important; scale: none !important; margin: 0 !important; flex: none !important; min-height: 0 !important;
}
:is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__stat-word:not(#_) {
  height: 24cqh !important; width: auto !important; max-width: 100% !important; object-fit: contain; font-size: 21cqh !important; line-height: 1 !important;
}
:is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__stat-value:not(#_) {
  width: auto !important; height: auto !important; font-size: 31cqh !important; line-height: 1 !important; text-align: center !important;
}
:is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__stat-value > *:not(#_) { font-size: inherit !important; line-height: 1 !important; }
:is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__stat-word:not(#_) { height: 24cqh !important; }
.sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__stat-word:not(#_):not(#_) { height: 27cqh !important; font-size: 24cqh !important; }
.sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__stat-value:not(#_):not(#_) { font-size: 35cqh !important; }
/* 編成・出撃の属性アイコン: 下に枠の線が重なるぶん下の余白が狭く見えたので、右の余白と同じに見えるまで上げる（下端で置かれているので margin-bottom）。 */
:is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card .attribute-card-icon__badge:not(#_) { margin-bottom: 3% !important; }
/* 都市系の出撃ボタン: 「出発（GO）」が残りの幅いっぱいに伸び、「編成を変更」の約7倍の幅になっていた。
   他のテーマと同じ高さ（48px / 出発 60px）と、枠の絵（伸び縮みする枠）に合う 3:1 の幅にそろえる。 */
[data-ui-theme-family="urban"] .sortie-screen .sortie-actions .screen-action:where([data-ui-orientation="landscape"] *) {
  --sortie-h: 48px; flex: 0 0 auto !important; height: var(--sortie-h) !important; width: calc(var(--sortie-h) * 3) !important;
}
[data-ui-theme-family="urban"] .sortie-screen .sortie-actions .sortie-depart:where([data-ui-orientation="landscape"] *) { --sortie-h: 60px; }
/* 都市系のボックス: キャラ・装備のタブの光る縁が左へ出て、中身の枠（overflow: hidden）で切れていた。タブ列を少し右へ。 */
[data-ui-theme-family="urban"] .collection-screen .collection-kind-tabs:where([data-ui-orientation="landscape"] *) { margin-left: 12px; }
/* ボックスのタイルの属性アイコンを右下の角へ（編成のカードのアイコンとは別の指定。タイルの右 11px・下 9px から右 4px・下 4px 前後へ）。 */
.collection-screen .screen-shell__body[data-ui-orientation="landscape"] .collection-card-tile .attribute-card-icon__badge { translate: 18% 14%; }
/* ストーリー一覧の見出し「物語」: アイコン 28px・字 24px で、下のメイン〜キャラのボタン（幅 196px）の半分ほどしかなかった。
   アイコンと字を大きくして、ボタンの幅に近づける（字が横長のテーマは、残りの幅に収める）。 */
.story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-screen-header { height: 64px; gap: 10px; }
.story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-screen-header::before { width: 56px !important; height: 56px !important; flex: 0 0 56px !important; }
.story-screen .screen-shell__body[data-ui-orientation="landscape"] .story-screen-header .pf-label--heading { --pf-label-height: 46px !important; height: 46px !important; width: calc(46px * var(--pf-label-ratio, 2)) !important; max-width: 128px !important; flex: 0 1 auto !important; }
/* 横持ち第8ラウンド: 下のナビの「アイコン＋字」を1つのかたまりにして、5つを等間隔に並べる。他のテーマは
   ui-nav-landscape-groups.mjs（ui-theme-art.mjs が出す）。Pop Fantasy はナビの作りが別なので、ここで置く
   （ガチャの字は上の margin を外してアイコンから 8px、かたまりごと左へ。ショップに寄って見えていた）。 */
[data-ui-theme-kit="fantasy"] :is(.home-game-frame--landscape, .screen-shell__body[data-ui-orientation="landscape"]) [data-calibration-key="home.navHome"].home-bottom-nav-item { translate: 31px 0; }
[data-ui-theme-kit="fantasy"] :is(.home-game-frame--landscape, .screen-shell__body[data-ui-orientation="landscape"]) [data-calibration-key="home.navCollection"].home-bottom-nav-item { translate: 27px 0; }
[data-ui-theme-kit="fantasy"] :is(.home-game-frame--landscape, .screen-shell__body[data-ui-orientation="landscape"]) [data-calibration-key="home.navFormation"].home-bottom-nav-item { translate: -7px 0; }
[data-ui-theme-kit="fantasy"] :is(.home-game-frame--landscape, .screen-shell__body[data-ui-orientation="landscape"]) [data-calibration-key="home.navGacha"].home-bottom-nav-item { translate: -57px 0; }
[data-ui-theme-kit="fantasy"] :is(.home-game-frame--landscape, .screen-shell__body[data-ui-orientation="landscape"]) [data-calibration-key="home.navShop"].home-bottom-nav-item { translate: -55px 0; }
/* 出撃: 枠をカードの外周に合わせたので、1/2/3 と敵の紹介が枠から約 85px 離れて見えていた。どちらも枠から 28px 前後まで寄せる（枠の外へ出る角の飾りのぶん）
   （拡大のかかる画面なので、自分の幅に対する割合で動かす: 1/2/3 は幅 97px で 59%、敵の欄は幅 273px で 17%（21% では枠の飾りに左端が隠れるテーマがあった））。 */
.sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .sortie-presets { translate: 58.8% 0; }
.sortie-screen .screen-shell__body[data-ui-orientation="landscape"] .sortie-opponent { translate: -17% 0; }
/* 横持ち第8ラウンド: 枠の外周をカードにぴったり合わせたので、線の太いテーマで数字が下の線に触れていた。
   字と数字をひと回り小さくして欄の中央に置き、上下に線のぶんの余白を残す（上の 24/31cqh・出撃 27/35cqh）。 */
/* 数字の欄は、枠の線（装備|数字の線・外周の下の線）がかぶらない内側だけを使う。線の太さはテーマごとに枠の絵から測った
   割合（--fl-pt / --fl-pb、ui-formation-landscape-frames.mjs）。字と数字の大きさも内側の高さに合わせる。 */
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) :is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__stats:not(#_) { --fl-in: calc(1 - var(--fl-pt, .12) - var(--fl-pb, .16)); }
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) :is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__stat:not(#_):not(#_) {
  align-self: start !important; height: calc(var(--fl-in) * 100cqh) !important; margin-top: calc(var(--fl-pt, .12) * 100cqh) !important; gap: calc(var(--fl-in) * 5cqh) !important;
}
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) :is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__stat-word:not(#_):not(#_):not(#_) { height: calc(var(--fl-in) * 36cqh) !important; font-size: calc(var(--fl-in) * 32cqh) !important; }
[data-ui-theme-kit]:not([data-ui-theme-kit="fantasy"]) :is(.formation-screen, .sortie-screen) .screen-shell__body[data-ui-orientation="landscape"] .formation-slot-card__stat-value:not(#_):not(#_):not(#_) { font-size: calc(var(--fl-in) * 48cqh) !important; }
/* ガチャ: ボタン2つと題名の中心（x 1176）が魔法陣・台座の中心（x 1244）より左にずれていた。ボタンを右へ、
   魔法陣と台座を左へ寄せ、3つとも x 1210 にそろえる（拡大のかかる画面なので、自分の幅に対する割合で動かす）。 */
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-pull-panel { translate: 2.83% 0; }
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-summoning-circle { translate: -3.76% 0; }
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-summoning-pedestal { translate: -4.08% 0; }
.gacha-screen .screen-shell__body[data-ui-orientation="landscape"] .gacha-hero-stage__name { translate: 3.13% 0; }