/**
 * P2-C: 公開ページ(曲/ペア/アーティスト/discover/post)専用レイアウト。
 *
 * レイアウトのみ。色・影・角丸等の意匠はすべてtokens.css/components.cssの
 * トークン変数を使う(box-shadowの直書き禁止)。
 */

.niteru-eyebrow {
	font-size: var(--text-sm);
	color: var(--ink-soft);
	margin: 0 0 var(--space-2);
}

.niteru-page-hero {
	text-align: left;
	padding-bottom: var(--space-4);
}

/*
 * パケットS2: 「先に出た曲」バッジの最小レイアウトのみ(色・背景・枠線等の
 * 意匠は未着手。オーケストレーターが後で仕上げる想定)。figcaptionは
 * display:grid(components.css)のため、このルールが無くても崩れずに
 * 独立した行として表示される。
 */
.origin-badge {
	font-size: var(--text-xs);
}

/* 投稿フォームの曲選択パーツ */
.niteru-song-picker {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.niteru-suggestions {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: var(--z-content);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.niteru-suggestions[hidden] {
	display: none;
}

.niteru-suggestion {
	width: 100%;
	text-align: left;
	background: var(--surface, #fff);
	border: 1px solid var(--ink-faint);
	border-radius: var(--radius-sm, 10px);
	padding: var(--space-2) var(--space-3);
	cursor: pointer;
	font: inherit;
}

.niteru-selected-song {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--ink-soft);
}

.niteru-pending-fields {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-3);
	border: 1px dashed var(--ink-faint);
	border-radius: var(--radius-md, 14px);
}

.niteru-pending-fields[hidden] {
	display: none;
}

.niteru-pending-fields label {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	font-size: var(--text-sm);
	color: var(--ink-soft);
}

.niteru-chip-picker .chip {
	cursor: pointer;
	border: none;
	font: inherit;
	opacity: 0.55;
}

.niteru-chip-picker .chip.is-selected {
	opacity: 1;
	outline: 2px solid var(--action);
	outline-offset: 2px;
}

.niteru-submit-result {
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md, 14px);
}

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

.niteru-submit-result--ok {
	background: color-mix(in srgb, var(--success) 25%, white);
}

.niteru-submit-result--error {
	background: color-mix(in srgb, var(--clay-orange) 30%, white);
}

/**
 * パケットE1: アーティスト単位の物販導線ブロック(pair-page/song-page)。
 * レイアウトのみ(色・角丸等の意匠はclay-btn/clay-cardトークンに委ねる)。
 */
.merch-block {
	margin-top: var(--space-4);
	text-align: center;
}

.merch-block__title {
	margin: 0 0 var(--space-2);
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

.merch-block__links {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}

/**
 * パケットE1: /support/ プラン比較テーブルの横スクロール対応
 * (小画面でテーブルが崩れないよう、テンプレ側のoverflow-x:autoラッパと
 * あわせてセル内改行を抑止する)。
 */
.support-page__plan-table table th,
.support-page__plan-table table td {
	white-space: nowrap;
}

/**
 * パケットG2: 支援クレーム結果ページ(/support/claim/)。
 * レイアウトのみ(色・角丸等の意匠は既存のclay-cardトークンに委ねる。
 * keyframes/transformは使わない指示のため、静的な中央寄せのみ)。
 */
.claim-result {
	max-width: 32rem;
	margin: 0 auto;
	text-align: center;
}

.claim-result__icon {
	font-size: 2.5rem;
	margin: 0 0 var(--space-2);
}

.claim-result__title {
	margin: 0 0 var(--space-2);
}

.claim-result__message {
	color: var(--ink-soft);
}

.claim-result__meta {
	margin-top: var(--space-2);
}

/**
 * 審査中404の根治パケットJ1: ペア詳細(/similar/{id}/)の審査中(投稿者
 * 本人のみ閲覧)バナー。レイアウトのみ(色・背景等の意匠はオーケストレーターが
 * 仕上げる)。
 */
.pair-page__under-review-banner {
	text-align: center;
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4);
}

/*
 * 【削除済み・再追加しないこと】トグルスイッチ(.niteru-switch)と
 * [data-fav-list-rename-wrapper] の寸法は、かつてここ(J1の構造用)と
 * components.css(F7の意匠用)の二重定義になっていた。
 *
 * pages.css は components.css の後に読み込まれる(inc/assets.php の依存指定)
 * ため、詳細度が同じ(0,1,0)なら常にこちらが勝つ。その結果:
 *   - トラック幅は components.css の 52px ではなく、ここの 2.5em
 *     (buttonの既定font-size 13.33px 換算で 33.3px)になっていた
 *   - 一方 thumb の `translate: 24px`(components.css)は `left` とは別プロパティ
 *     なので生き残り、33.3px しかないトラックから約7pxはみ出して
 *     「公開」ラベルの上に乗っていた(公開状態でだけ表示が崩れる正体)
 *
 * スイッチの見た目と寸法は components.css を唯一の定義とする。
 * ここに寸法を書き足すと同じ壊れ方が再発する。
 */

/*
 * [hidden]属性がclay-card/flex系のクラスに上書きされないための明示ルール
 * (motion.cssの教訓と同じ理由。niteru-suggestions[hidden]等の既存パターンを
 * 踏襲。将来これらのクラスにdisplay:flex/gridが追加されても[hidden]が
 * 必ず勝つようにする)。
 */
.me-favorites__list-actions[hidden],
.me-favorites__list-confirm[hidden],
.me-favorites__status[hidden],
[data-fav-create-card][hidden],
[data-delete-account-panel][hidden] {
	display: none;
}

/* ============================================================
   みんなの耳 — ペアのコメント欄(パケットX1)
   ============================================================
   意匠の要点:
     - 会話は「粘土の板に置かれた声」。カードの左縁だけ投稿者の色相で
       染め、アイコン画像を持たないこのサイトなりの「誰が話しているか」を作る
     - 「どこの話?」チップを選ぶと、フォーム全体にその軸の色がうっすら移る。
       何について書いているのかが、書いている最中ずっと目に入る
     - 残量リングは先進的SNSの定番。数字だけより「あとどれくらい」が体で分かる

   【CSSの地雷(このリポジトリで実際に踏んだもの)】
     - キーフレーム/アニメーションに transform を使わない。
       translate / scale / rotate の独立プロパティを使う
       (fill-mode:both の合成transformが粘土グラブを永久に殺すため)
     - メディアクエリは必ずファイル末尾に置く(同詳細度では後勝ち)
     - [hidden] は display を持つクラスに負ける。明示ルールで打ち消す
   ============================================================ */

.pair-comments {
	max-width: 720px;
	margin-inline: auto;
}

.pair-comments__count {
	display: inline-block;
	min-width: 1.9em;
	margin-inline-start: var(--space-2);
	padding: 0 var(--space-2);
	border-radius: var(--radius-pill);
	background: var(--clay-mint);
	color: var(--ink);
	font-size: var(--text-sm);
	text-align: center;
	vertical-align: middle;
}

.pair-comments__lead {
	margin: 0 0 var(--space-5);
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

.pair-comments__list {
	display: grid;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

/* --- コメント1件 --- */

.pair-comments__item {
	--comment-hue: 32;
	position: relative;
	/* Y2: 上下を締める。本文より余白が主役になっていた */
	padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
	border-radius: var(--radius-md);
	background: var(--surface-clay);
	box-shadow: var(--shadow-clay);
}

/* 左縁の色帯 = 投稿者の色。誰の声かが色で分かる */
.pair-comments__item::before {
	content: "";
	position: absolute;
	inset-block: var(--space-3);
	inset-inline-start: var(--space-2);
	width: 5px;
	border-radius: var(--radius-pill);
	background: hsl(var(--comment-hue) 62% 72%);
}

.pair-comments__item.is-mine {
	background: linear-gradient(145deg, #fffdf6 0%, #fdf3e0 100%);
}

/* 送信中: まだ確定していないことを、色ではなく「軽さ」で伝える */
.pair-comments__item.is-pending {
	opacity: 0.62;
	box-shadow: var(--clay-drop-pressed);
}

/* 自動で伏せられたコメント(本人にだけ見えている) */
.pair-comments__item.is-held {
	outline: 2px dashed var(--clay-orange-deep);
	outline-offset: 3px;
}

.pair-comments__head {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
	font-size: var(--text-sm);
}

.pair-comments__avatar {
	width: 14px;
	height: 14px;
	border-radius: var(--radius-pill);
	background: hsl(var(--comment-hue) 62% 72%);
	box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.8);
	flex: none;
}

.pair-comments__author {
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}

a.pair-comments__author:hover,
a.pair-comments__author:focus-visible {
	text-decoration: underline;
}

/* 時刻はそのコメントへの固定リンク。ふだんは目立たず、触れると読める。 */
.pair-comments__time {
	color: var(--ink-faint);
	font-size: var(--text-xs);
	text-decoration: none;
}

a.pair-comments__time:hover,
a.pair-comments__time:focus-visible {
	color: var(--ink-soft);
	text-decoration: underline;
}

a.pair-comments__time:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.pair-comments__delete {
	margin-inline-start: auto;
	padding: var(--space-1) var(--space-2);
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--ink-faint);
	font-family: inherit;
	font-size: var(--text-xs);
	cursor: pointer;
}

.pair-comments__delete:hover,
.pair-comments__delete:focus-visible {
	background: color-mix(in srgb, var(--clay-pink) 40%, transparent);
	color: var(--ink);
}

.pair-comments__focus-chip {
	margin: 0 0 var(--space-2);
}

.pair-comments__body {
	margin: 0;
	color: var(--ink);
	/* 改行はそのまま見せる。URLはリンク化しない(既存の設計判断) */
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.pair-comments__empty {
	margin: 0 0 var(--space-5);
	padding: var(--space-5);
	border-radius: var(--radius-md);
	background: var(--paper-deep);
	color: var(--ink-soft);
	text-align: center;
}

/* --- 投稿フォーム --- */

.pair-comments__form {
	--focus-accent: transparent;
	display: grid;
	gap: var(--space-3);
	border-block-start: 4px solid var(--focus-accent);
	transition: border-color var(--dur-base) var(--ease-soft);
}

.pair-comments__label {
	font-weight: 700;
}

.pair-comments__field {
	position: relative;
}

.pair-comments__textarea {
	width: 100%;
	min-height: 5.5em;
	padding: var(--space-3) var(--space-3) var(--space-6);
	border: 2px solid var(--ink-faint);
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--ink);
	font-family: inherit;
	font-size: var(--text-base);
	line-height: 1.7;
	resize: none;
}

.pair-comments__textarea:focus-visible {
	outline: 2px solid var(--action);
	outline-offset: 2px;
	border-color: var(--action);
}

.pair-comments__gauge {
	position: absolute;
	inset-block-end: var(--space-3);
	inset-inline-end: var(--space-3);
	width: 26px;
	height: 26px;
	pointer-events: none;
}

.pair-comments__ring {
	width: 100%;
	height: 100%;
	/* 12時の位置から時計回りに満ちる。rotateは独立プロパティで指定する */
	rotate: -90deg;
}

.pair-comments__ring-track,
.pair-comments__ring-value {
	fill: none;
	stroke-width: 3;
}

.pair-comments__ring-track {
	stroke: color-mix(in srgb, var(--ink-faint) 40%, transparent);
}

.pair-comments__ring-value {
	stroke: var(--clay-mint-deep);
	stroke-linecap: round;
	transition: stroke-dashoffset 160ms ease, stroke 220ms ease;
}

.pair-comments__ring-value.is-warning {
	stroke: var(--clay-orange-deep);
}

.pair-comments__counter {
	position: absolute;
	inset-block-end: var(--space-3);
	inset-inline-end: calc(var(--space-3) + 34px);
	color: var(--ink-faint);
	font-size: var(--text-xs);
}

.pair-comments__counter.is-warning {
	color: var(--clay-orange-deep);
	font-weight: 700;
}

.pair-comments__focus {
	margin: 0;
	padding: 0;
	border: 0;
}

.pair-comments__focus-legend {
	padding: 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
	font-weight: 700;
}

.pair-comments__optional {
	color: var(--ink-faint);
	font-weight: 400;
}

.pair-comments__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

.pair-comments__chip {
	border: 2px solid transparent;
	font-family: inherit;
	cursor: pointer;
}

.pair-comments__chip.is-selected {
	border-color: var(--ink);
	font-weight: 700;
}

.pair-comments__chip:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

.pair-comments__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.pair-comments__hint {
	margin: 0;
	color: var(--ink-faint);
	font-size: var(--text-xs);
}

/* ユーザーID未設定の人への案内(パケットW1)。書く直前に一度だけ出る。
   注意ではなく「こうするともっと良い」の話なので、警告色は使わない。 */
.pair-comments__handle-hint {
	margin: var(--space-3) 0 0;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	background: var(--clay-mint, rgb(0 0 0 / 4%));
	color: var(--ink-soft);
	font-size: var(--text-sm);
	line-height: 1.7;
}

.pair-comments__submit:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.pair-comments__error {
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--clay-pink) 45%, transparent);
	color: var(--ink);
	font-size: var(--text-sm);
}

/* --- まだ書けない人への案内 --- */

.pair-comments__gate {
	text-align: center;
}

.pair-comments__gate-text {
	margin: 0 0 var(--space-2);
}

.pair-comments__gate-sub {
	margin: 0 0 var(--space-4);
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

.pair-comments__status {
	margin: var(--space-3) 0 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
	text-align: center;
}

/* [hidden] がクラス側の display に負けないようにする(このファイル冒頭の
   教訓と同じ。将来 .pair-comments__empty 等に display が付いても効く) */
.pair-comments__empty[hidden],
.pair-comments__error[hidden] {
	display: none;
}

/* 通報ボタン(パケットX1)。目立たせない。押すこと自体を煽らないため、
   自分のコメントの「消す」と同じ静かな見た目にする。 */
.pair-comments__report {
	margin-inline-start: auto;
	padding: var(--space-1) var(--space-2);
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--ink-faint);
	font-family: inherit;
	font-size: var(--text-xs);
	cursor: pointer;
}

.pair-comments__report:hover,
.pair-comments__report:focus-visible {
	background: color-mix(in srgb, var(--clay-yellow) 50%, transparent);
	color: var(--ink);
}

.pair-comments__report:disabled {
	cursor: default;
	opacity: 0.7;
}

.pair-comments__item.is-reported {
	opacity: 0.75;
}

/* 削除の確認(その場で聞く)。window.confirm() はOSのダイアログが世界観から
   浮くうえ、ページが固まって「何を消そうとしているのか」が見えなくなる。
   対象のカードの中に出すことで、消すものを見たまま選べる。 */
.pair-comments__confirm {
	margin-top: var(--space-3);
	padding: var(--space-3);
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--clay-pink) 22%, var(--paper-deep));
	box-shadow: var(--clay-drop-pressed);
}

.pair-comments__confirm-label {
	margin: 0 0 var(--space-2);
	font-size: var(--text-sm);
	font-weight: 700;
}

.pair-comments__confirm-actions {
	display: flex;
	gap: var(--space-2);
}

.pair-comments__confirm-yes,
.pair-comments__confirm-no {
	flex: 1;
	padding: var(--space-2) var(--space-3);
	border: 0;
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--text-sm);
	cursor: pointer;
}

.pair-comments__confirm-yes {
	background: var(--clay-pink-deep);
	color: #fff;
	font-weight: 700;
}

.pair-comments__confirm-no {
	background: var(--surface);
	color: var(--ink);
}

.pair-comments__confirm-yes:hover,
.pair-comments__confirm-no:hover {
	filter: brightness(1.05);
}

.pair-comments__confirm-yes:focus-visible,
.pair-comments__confirm-no:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

.pair-comments__confirm-yes:disabled,
.pair-comments__confirm-no:disabled {
	opacity: 0.5;
	cursor: default;
}

/* 理由の選択(その場に開く小さな窓)。ブラウザのprompt()は見た目が浮くうえ
   モバイルで扱いづらいので使わない。 */
.pair-comments__report-picker {
	display: grid;
	gap: var(--space-1);
	margin-top: var(--space-3);
	padding: var(--space-3);
	border-radius: var(--radius-md);
	background: var(--paper-deep);
	box-shadow: var(--clay-drop-pressed);
}

.pair-comments__report-label {
	margin: 0 0 var(--space-1);
	color: var(--ink-soft);
	font-size: var(--text-xs);
	font-weight: 700;
}

.pair-comments__report-choice,
.pair-comments__report-cancel {
	padding: var(--space-2) var(--space-3);
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink);
	font-family: inherit;
	font-size: var(--text-sm);
	text-align: start;
	cursor: pointer;
}

.pair-comments__report-choice:hover,
.pair-comments__report-choice:focus-visible {
	background: color-mix(in srgb, var(--clay-yellow) 55%, var(--surface));
}

.pair-comments__report-cancel {
	background: transparent;
	color: var(--ink-faint);
	text-align: center;
}

.pair-comments__report-choice:focus-visible,
.pair-comments__report-cancel:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

.pair-comments__report-choice:disabled,
.pair-comments__report-cancel:disabled {
	opacity: 0.5;
	cursor: default;
}

/* ============================================================
   返信とリアクション(パケットY1)
   ============================================================
   意匠の要点:
     - 返信は1段だけ内側へ。左に粘土の糸が垂れて、親子が線で繋がる
     - 反応は3つ。押すと音が鳴り粒が散る(音程は語彙ごとに違う)
     - 反応が3つ以上集まったカードは左縁の色帯が明るくなる
       = 一覧を流し読みしても「響いているコメント」が目に留まる

   CSSの鉄則(このリポジトリで実際に踏んだもの)は冒頭のコメントを参照。
   ここでも transform は使わず translate/scale/rotate の独立プロパティで書く。
   ============================================================ */

.pair-comments__replies {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
}

.pair-comments__replies:empty {
	margin: 0;
}

/* 畳んでいるときは4件目以降を消す。[hidden] ではなく属性セレクタなのは、
   display を持つクラスに [hidden] が負ける罠を最初から避けるため。 */
.pair-comments__replies.is-folded > [data-reply-extra] {
	display: none;
}

/* --- 返信カード: 1段だけ内側 + 左に糸 --- */

.pair-comments__item--reply {
	position: relative;
	margin-inline-start: var(--space-5);
	padding-block: var(--space-3);
	background: linear-gradient(145deg, #fffdf7 0%, #f9f1e4 100%);
}

/* 親から垂れる粘土の糸。返信が生まれると下へ伸びる */
.pair-comments__item--reply::after {
	content: "";
	position: absolute;
	inset-block-start: -10px;
	inset-inline-start: calc(var(--space-5) * -1 + var(--space-2));
	width: 2px;
	height: calc(100% + 10px);
	border-radius: var(--radius-pill);
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--ink-faint) 55%, transparent),
		color-mix(in srgb, var(--ink-faint) 12%, transparent)
	);
	transform-origin: top;
	animation: reply-thread var(--dur-base) var(--ease-spring) both;
}

@keyframes reply-thread {
	from { scale: 1 0; opacity: 0; }
	to { scale: 1 1; opacity: 1; }
}

/* --- 「返信する」と「すべて見る」 --- */

.pair-comments__more {
	padding: var(--space-1) var(--space-3);
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--ink-soft);
	font-family: inherit;
	font-size: var(--text-xs);
	cursor: pointer;
}

.pair-comments__more:hover,
.pair-comments__more:focus-visible {
	background: color-mix(in srgb, var(--clay-mint) 45%, transparent);
	color: var(--ink);
}

.pair-comments__more:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

.pair-comments__more {
	margin-inline-start: var(--space-5);
	font-weight: 700;
}

/* --- 返信フォーム --- */

.pair-comments__reply-form {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-2) 0 0 var(--space-5);
	padding: var(--space-3);
	border-radius: var(--radius-md);
	background: var(--paper-deep);
	box-shadow: var(--clay-drop-pressed);
}

.pair-comments__reply-textarea {
	width: 100%;
	min-height: 3.4em;
	padding: var(--space-2) var(--space-3);
	border: 2px solid var(--ink-faint);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink);
	font-family: inherit;
	font-size: var(--text-sm);
	line-height: 1.7;
	resize: vertical;
}

.pair-comments__reply-textarea:focus-visible {
	outline: 2px solid var(--action);
	outline-offset: 2px;
	border-color: var(--action);
}

.pair-comments__reply-actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.pair-comments__reply-send:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.pair-comments__reply-cancel {
	padding: var(--space-1) var(--space-3);
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--ink-faint);
	font-family: inherit;
	font-size: var(--text-xs);
	cursor: pointer;
}

.pair-comments__reply-cancel:hover,
.pair-comments__reply-cancel:focus-visible {
	color: var(--ink);
}

/* --- 反応と返信(Y2で1行に統合)---
   以前は3つのボタンを常時並べ、さらに「返信する」が独立した行を持っていた。
   実測で根カード243pxのうち本文が28px(12%)しかなく、会話より操作の飾りの
   方が大きかった。押された反応だけをピルで出し、追加は＋から開くことで
   0件のときはほぼ1行に畳まれる。 */

.pair-comments__reactions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-2);
	position: relative;
}

.pair-comments__reaction-pills {
	display: contents;
}

.pair-comments__reaction,
.pair-comments__react-add,
.pair-comments__reply-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 2px var(--space-2);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--paper-deep) 60%, transparent);
	color: var(--ink-soft);
	font-family: inherit;
	font-size: var(--text-xs);
	line-height: 1.9;
	cursor: pointer;
	transition: background var(--dur-quick) var(--ease-soft),
		border-color var(--dur-quick) var(--ease-soft),
		color var(--dur-quick) var(--ease-soft);
}

.pair-comments__reaction:hover,
.pair-comments__react-add:hover,
.pair-comments__reply-btn:hover {
	background: color-mix(in srgb, var(--clay-yellow) 40%, var(--surface));
	color: var(--ink);
}

.pair-comments__reaction.is-mine {
	border-color: var(--clay-mint-deep);
	background: color-mix(in srgb, var(--clay-mint) 45%, var(--surface));
	color: var(--ink);
	font-weight: 700;
}

.pair-comments__reaction:focus-visible,
.pair-comments__react-add:focus-visible,
.pair-comments__reply-btn:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

.pair-comments__reaction-emoji {
	font-size: 0.95rem;
	line-height: 1;
}

.pair-comments__reaction-count {
	font-variant-numeric: tabular-nums;
}

/* ＋ は反応が無いときの唯一の入口。控えめだが見つかる大きさにする */
.pair-comments__react-add {
	min-width: 2em;
	justify-content: center;
	font-size: var(--text-sm);
	line-height: 1.4;
}

/* --- 反応をえらぶパネル ---
   ここでは縦に並ぶので幅に余裕があり、ラベルを必ず出せる。
   以前はモバイルで絵文字だけになり、初見で意味が分からなかった。 */

.pair-comments__react-picker {
	position: absolute;
	inset-block-start: calc(100% + var(--space-1));
	inset-inline-start: 0;
	z-index: var(--z-content);
	display: grid;
	gap: 2px;
	min-width: 12rem;
	padding: var(--space-2);
	border-radius: var(--radius-md);
	background: var(--surface);
	box-shadow: var(--shadow-clay);
}

.pair-comments__react-choice {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--ink);
	font-family: inherit;
	font-size: var(--text-sm);
	text-align: start;
	cursor: pointer;
}

.pair-comments__react-choice:hover,
.pair-comments__react-choice:focus-visible {
	background: color-mix(in srgb, var(--clay-mint) 35%, transparent);
}

.pair-comments__react-choice.is-mine {
	font-weight: 700;
	background: color-mix(in srgb, var(--clay-mint) 45%, transparent);
}

.pair-comments__react-choice:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: -2px;
}

/* 反応が集まったカードは、左縁の色帯が明るく息をする */
.pair-comments__item.is-resonating::before {
	background: hsl(var(--comment-hue) 78% 66%);
	animation: comment-resonate 2.8s var(--ease-soft) infinite;
}

@keyframes comment-resonate {
	0%, 100% { opacity: 0.85; scale: 1 1; }
	50% { opacity: 1; scale: 1.6 1; }
}
/* 反応の粒(niteru-fx.js の .fx-particle と同じ仕組み。少し小さめ) */
.fx-particle--reaction {
	font-size: 13px;
}
/* ============================================================
   フォロー(パケットZ1)
   ============================================================
   意匠の要点:
     - 「耳の重なり」を数字より先に読ませる。フォローの動機はここにある
     - フォロー中はホバーで「解除」に変わる(押す前に結果が分かる)
     - 外す操作はその場で一度聞く(コメント削除と同じ作法)
   キーフレームに transform を使わないのは既存の鉄則どおり。
   ============================================================ */

.profile-follow {
	/* 【なぜ positioned にするのか】⋯メニューが自己紹介やリンクの下に
	   潜ってしまう不具合の対処(2026-08-05修正)。
	   .profile-header > * は `animation: rise-in … both` を持つため、
	   アニメーションが終わっても translate が 0px のまま残り、**直下の
	   全要素が stacking context になっている**。stacking context の中に
	   入ったメニューは z-index をいくら上げても外へ出られず、あとに
	   書かれた .profile-bio / .profile-links がツリー順で上に乗る。
	   ここを positioned + z-index にして、塊ごと前面へ持ち上げる。 */
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--space-2);
	justify-items: center;
	margin-top: var(--space-3);
}

.profile-follow__counts {
	display: flex;
	gap: var(--space-4);
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

.profile-follow__count strong {
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

/* 差別化の核。フォロワー数より目に入る位置と強さにする */
.profile-follow__affinity {
	margin: 0;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--clay-mint) 40%, var(--surface));
	color: var(--ink);
	font-size: var(--text-sm);
}

.profile-follow__affinity strong {
	font-size: var(--text-base);
	font-variant-numeric: tabular-nums;
}

.profile-follow__affinity-mark {
	margin-inline-end: var(--space-1);
}

.profile-follow__actions {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.profile-follow__btn {
	min-width: 9rem;
	transition: background var(--dur-quick) var(--ease-soft),
		color var(--dur-quick) var(--ease-soft);
}

.profile-follow__btn.is-following {
	background: color-mix(in srgb, var(--clay-mint) 45%, var(--surface));
}

/* ホバーで「解除」に変わるので、色も離れる方向へ寄せる */
.profile-follow__btn.is-hovering-unfollow {
	background: color-mix(in srgb, var(--clay-pink) 40%, var(--surface));
}

.profile-follow__btn.is-pending {
	background: color-mix(in srgb, var(--clay-yellow) 45%, var(--surface));
}

.profile-follow__btn.is-blocked {
	background: color-mix(in srgb, var(--ink-faint) 30%, var(--surface));
}

.profile-follow__btn.is-unavailable:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.profile-follow__more {
	width: 2.4em;
	height: 2.4em;
	border: 0;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--paper-deep) 70%, transparent);
	color: var(--ink-soft);
	font-family: inherit;
	font-size: var(--text-base);
	line-height: 1;
	cursor: pointer;
}

.profile-follow__more:hover,
.profile-follow__more:focus-visible {
	background: color-mix(in srgb, var(--clay-yellow) 40%, var(--surface));
	color: var(--ink);
}

.profile-follow__more:focus-visible,
.profile-follow__btn:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

/* --- ⋯ メニューと確認 --- */

.profile-follow__menu,
.profile-follow__confirm {
	position: absolute;
	inset-block-start: calc(100% + var(--space-2));
	inset-inline-start: 50%;
	translate: -50% 0;
	z-index: var(--z-content);
	display: grid;
	gap: var(--space-1);
	min-width: 16rem;
	padding: var(--space-2);
	border-radius: var(--radius-md);
	background: var(--surface);
	box-shadow: var(--shadow-clay);
	text-align: start;
}

.profile-follow__menu-item {
	display: grid;
	gap: 2px;
	padding: var(--space-2) var(--space-3);
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--ink);
	font-family: inherit;
	text-align: start;
	cursor: pointer;
}

.profile-follow__menu-item:hover,
.profile-follow__menu-item:focus-visible {
	background: color-mix(in srgb, var(--clay-yellow) 35%, transparent);
}

.profile-follow__menu-label {
	font-size: var(--text-sm);
	font-weight: 700;
}

/* 何が起きるかを添える。ブロックとミュートの違いは説明が要る */
.profile-follow__menu-note {
	color: var(--ink-soft);
	font-size: var(--text-xs);
	line-height: 1.5;
}

.profile-follow__confirm {
	background: color-mix(in srgb, var(--clay-pink) 18%, var(--surface));
}

.profile-follow__confirm-label {
	margin: 0 0 var(--space-2);
	font-size: var(--text-sm);
	font-weight: 700;
}

.profile-follow__confirm-actions {
	display: flex;
	gap: var(--space-2);
}

.profile-follow__confirm-yes,
.profile-follow__confirm-no {
	flex: 1;
	padding: var(--space-2) var(--space-3);
	border: 0;
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--text-sm);
	cursor: pointer;
}

.profile-follow__confirm-yes {
	background: var(--clay-pink-deep);
	color: #fff;
	font-weight: 700;
}

.profile-follow__confirm-no {
	background: var(--surface);
	color: var(--ink);
}

.profile-follow__menu-item:focus-visible,
.profile-follow__confirm-yes:focus-visible,
.profile-follow__confirm-no:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: -2px;
}

.profile-follow__status {
	margin: 0;
	min-height: 1.2em;
	color: var(--ink-soft);
	font-size: var(--text-xs);
	text-align: center;
}

/* ============================================================
   フォロー関係の管理 /me/follows/(パケットZ1)
   ============================================================
   1行=1人。左に「その人の色の耳」、中央に名前と**耳の重なり**、
   右に操作。並べ替えの軸に「耳が近い順」を持てるのが、他所のSNSとの
   いちばん分かりやすい違いなので、ツールバーを目に入る位置へ置く。
   ============================================================ */

.follows-page__title {
	font-size: var(--text-xl);
	margin-bottom: var(--space-2);
}

.follows-page__lead {
	color: var(--ink-soft);
	margin-bottom: var(--space-5);
}

.follows-tabs {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	margin-bottom: var(--space-3);
}

.follows-tabs__tab {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: 0 var(--space-4);
	border: none;
	border-radius: 999px;
	background: var(--clay-bg, rgb(0 0 0 / 4%));
	color: var(--ink-soft);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease;
}

.follows-tabs__tab[aria-selected="true"] {
	background: var(--ink);
	color: var(--paper, #fff);
}

.follows-tabs__count {
	min-width: 1.6em;
	padding: 0 0.4em;
	border-radius: 999px;
	background: rgb(0 0 0 / 8%);
	font-size: var(--text-xs);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.follows-tabs__tab[aria-selected="true"] .follows-tabs__count {
	background: rgb(255 255 255 / 22%);
}

.follows-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--space-2);
}

.follows-sort {
	min-height: 40px;
	padding: 0 var(--space-3);
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--ink-soft);
	font: inherit;
	font-size: var(--text-sm);
	cursor: pointer;
}

.follows-sort:hover,
.follows-sort:focus-visible {
	color: var(--ink);
	background: rgb(0 0 0 / 4%);
}

.follows-status {
	margin: 0 0 var(--space-3);
	min-height: 1.2em;
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

.follows-panel__note {
	margin: 0 0 var(--space-3);
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

.follows-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.follows-person {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"id actions"
		"meta actions";
	gap: var(--space-1) var(--space-3);
	align-items: center;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-lg, 18px);
	background: var(--surface, rgb(255 255 255 / 55%));
	box-shadow: var(--clay-shadow-sm, 0 2px 6px rgb(0 0 0 / 6%));
	overflow: hidden;
}

/* 承認・却下が済んだ行。落ち着いた色に沈めてから畳む */
.follows-person.is-resolved {
	background: rgb(0 0 0 / 3%);
	box-shadow: none;
}

.follows-person__id {
	grid-area: id;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

/* その人の色の「耳」。プロフィールのアクセント色相をそのまま持ってくる */
.follows-person__disc {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 30%, hsl(var(--person-hue) 70% 78%), hsl(var(--person-hue) 55% 58%));
	box-shadow: inset 0 -2px 4px hsl(var(--person-hue) 40% 40% / 35%);
}

.follows-person__names {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	min-width: 0;
}

.follows-person__name {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.follows-person__handle {
	color: var(--ink-soft);
	font-size: var(--text-xs);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.follows-person__meta {
	grid-area: meta;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding-left: calc(34px + var(--space-3));
	color: var(--ink-soft);
	font-size: var(--text-xs);
}

/* 差別化の核。ここだけ色を持たせて、判断材料として先に目に入るようにする */
.follows-person__affinity {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: hsl(var(--person-hue) 60% 92%);
	color: hsl(var(--person-hue) 45% 32%);
}

.follows-person__mutual {
	padding: 0.15em 0.5em;
	border-radius: 999px;
	background: rgb(0 0 0 / 6%);
}

.follows-person__since {
	margin-left: auto;
}

.follows-person__actions {
	grid-area: actions;
	display: flex;
	gap: var(--space-2);
}

.follows-person__btn {
	min-height: 40px;
	padding: 0 var(--space-3);
	font-size: var(--text-sm);
	white-space: nowrap;
}

.follows-person__btn--primary {
	background: var(--ink);
	color: var(--paper, #fff);
}

.follows-person__btn--quiet {
	background: transparent;
	color: var(--ink-soft);
	box-shadow: none;
}

.follows-person__btn--following,
.follows-person__btn--pending {
	background: rgb(0 0 0 / 5%);
	color: var(--ink-soft);
}

.follows-person__resolved {
	grid-area: actions;
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
	white-space: nowrap;
}

/* その場に開く確認(ブラウザ標準ダイアログは使わない) */
.follows-person__confirm {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md, 12px);
	background: rgb(0 0 0 / 4%);
}

.follows-person__confirm-label {
	margin: 0;
	font-size: var(--text-sm);
}

.follows-person__confirm-actions {
	display: flex;
	gap: var(--space-2);
}

.follows-person__confirm-yes,
.follows-person__confirm-no {
	min-height: 36px;
	padding: 0 var(--space-3);
	border: none;
	border-radius: 999px;
	font: inherit;
	font-size: var(--text-sm);
	cursor: pointer;
}

.follows-person__confirm-yes {
	background: var(--ink);
	color: var(--paper, #fff);
}

.follows-person__confirm-no {
	background: transparent;
	color: var(--ink-soft);
}

.follows-person__confirm-yes:focus-visible,
.follows-person__confirm-no:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: -2px;
}

/* 空のとき。ここが素っ気ないと機能ごと死ぬので、次の一歩まで書く */
.follows-empty {
	padding: var(--space-6) var(--space-4);
	border-radius: var(--radius-lg, 18px);
	background: var(--surface, rgb(255 255 255 / 45%));
	text-align: center;
}

.follows-empty__lead {
	margin: 0 0 var(--space-2);
	font-weight: 600;
}

.follows-empty__help {
	margin: 0 auto var(--space-4);
	max-width: 34em;
	color: var(--ink-soft);
	font-size: var(--text-sm);
	line-height: 1.7;
}

.follows-page__foot {
	margin-top: var(--space-6);
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

/* ヘッダーのフォロー申請バッジ */
.site-nav__follows {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.site-nav__badge {
	min-width: 1.5em;
	padding: 0 0.35em;
	border-radius: 999px;
	background: var(--accent, #e8734a);
	color: #fff;
	font-size: var(--text-xs);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* ============================================================
   タイムライン /timeline/(パケットZ1)
   ============================================================
   カードは既存の pair-card をそのまま使い、上に「帯」を1本だけ足す。
   帯には**その人の色**が入る。同じ人の投稿が続くと色が続くので、
   誰の耳を辿っているのかが読まずに分かる。
   ============================================================ */

.timeline-page__title {
	font-size: var(--text-xl);
	margin-bottom: var(--space-5);
}

.timeline-feed {
	display: grid;
	gap: var(--space-5);
}

.timeline-item {
	position: relative;
	padding-inline-start: var(--space-4);
}

/* その人の色の縦線。カードの左に沿って落ちる */
.timeline-item::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 3px;
	border-radius: var(--radius-pill, 999px);
	background: linear-gradient(
		to bottom,
		hsl(var(--actor-hue) 65% 70%),
		hsl(var(--actor-hue) 65% 70% / 0%)
	);
}

.timeline-item__reason {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-2);
	font-size: var(--text-sm);
	color: var(--ink-soft);
}

.timeline-item__actor {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.timeline-item__actor:hover .timeline-item__reason-text,
.timeline-item__actor:focus-visible .timeline-item__reason-text {
	text-decoration: underline;
}

.timeline-item__disc {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: radial-gradient(
		circle at 32% 30%,
		hsl(var(--actor-hue) 70% 80%),
		hsl(var(--actor-hue) 55% 60%)
	);
}

.timeline-item__reason-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 「話しています」の方は、会話が起きていることが伝わる印を添える */
.timeline-item--commented .timeline-item__reason-text::after {
	content: " 💬";
}

.timeline-item__time {
	margin-inline-start: auto;
	white-space: nowrap;
	font-size: var(--text-xs);
}

.timeline-empty {
	text-align: center;
}

.timeline-empty__lead {
	margin: 0 0 var(--space-2);
	font-size: var(--text-lg);
	font-weight: 700;
}

.timeline-empty__help {
	margin: 0 auto var(--space-5);
	max-width: 36em;
	color: var(--ink-soft);
	line-height: 1.8;
}

.timeline-empty__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.timeline-page__foot {
	margin-top: var(--space-6);
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

/* ============================================================
   招待状 /me/invites/(パケットW1)
   ============================================================
   招待コードを文字列で並べるとただの管理画面になる。1通ずつ「封筒」に
   して、渡す行為そのものが少し嬉しくなるようにする。F4で作られたまま
   使われていなかった .invite-envelope の意匠を、ここで本来の役目に就ける。

     未使用 … 封がされたまま。宛名の欄にコードが見える
     使用済 … 開封され、中から来てくれた人が顔を出す
     期限切 … 色が抜けて、封蝋が割れている

   アニメーションは JS 側(me-invites.js)。ここは静的な見た目と、
   ホバー/開封状態の遷移だけを持つ。
   ============================================================ */

.invites-page__title {
	font-size: var(--text-xl);
	margin-bottom: var(--space-2);
}

.invites-page__lead {
	color: var(--ink-soft);
	margin-bottom: var(--space-5);
	line-height: 1.8;
}

/* --- 発行の枠 --- */

.invites-quota {
	margin-bottom: var(--space-5);
}

.invites-quota__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.invites-quota__label {
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

.invites-quota__count {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.invites-quota__count strong {
	font-size: var(--text-xl);
	color: var(--clay-pink-deep);
}

.invites-quota__count span {
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

/* 封蝋のスタンプで残量を見せる。数字より先に目が気づく */
.invites-quota__stamps {
	display: flex;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
}

.invites-quota__stamp {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--clay-pink-deep);
	box-shadow: inset 0 -2px 3px rgb(77 68 57 / 25%);
}

.invites-quota__stamp.is-spent {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--ink-faint);
}

.invites-quota__create {
	margin-top: var(--space-4);
}

.invites-quota__blocked {
	margin: var(--space-4) 0 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
	line-height: 1.8;
}

.invites-quota__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

.invites-quota__joined {
	margin: var(--space-4) 0 0;
	padding-top: var(--space-3);
	border-top: 1px solid var(--ink-faint);
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

.invites-status {
	margin: 0 0 var(--space-3);
	min-height: 1.2em;
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

/* --- 封筒の棚 --- */

.invites-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-4);
}

.invite-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-4);
	align-items: start;
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--surface-clay);
	box-shadow: var(--shadow-clay);
}

/* JSが差し込む直前の状態。降りてくるアニメの初期位置 */
.invite-card.is-fresh {
	opacity: 0;
}

/* 封筒の絵。F4の .invite-envelope__art と同じ作り(前面パネルの追加も同じ。
   理由は components.css の .invite-envelope__art のコメント参照) */
.invite-card__envelope {
	position: relative;
	width: 72px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 8px;
	background: linear-gradient(160deg, color-mix(in srgb, var(--clay-pink-deep) 70%, #6d4350), var(--clay-pink-deep));
	box-shadow: var(--clay-drop);
	perspective: 240px;
}

/* 前面パネル。16px = 手紙の上端(52 - 6 - 30) */
.invite-card__envelope::after {
	content: '';
	position: absolute;
	inset: 16px 0 0;
	border-radius: 0 0 8px 8px;
	background: linear-gradient(160deg, var(--clay-pink), color-mix(in srgb, var(--clay-pink-deep) 65%, var(--clay-pink)));
	z-index: 2;
}

.invite-card__flap {
	position: absolute;
	inset: 0 0 auto;
	height: 29px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	background: linear-gradient(180deg, var(--clay-pink-deep), var(--clay-pink));
	border-radius: 8px 8px 0 0;
	transform-origin: top center;
	transition: rotate 460ms var(--ease-spring) 170ms, filter var(--dur-base) var(--ease-soft) 170ms;
	z-index: 3;
}

.invite-card__letter {
	position: absolute;
	left: 50%;
	bottom: 6px;
	translate: -50% 0;
	width: 36px;
	height: 30px;
	display: grid;
	/* ♪ を上端へ(理由は components.css の同名要素のコメント参照) */
	place-items: start center;
	padding-top: 2px;
	line-height: 1;
	background: #fffefa;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 800;
	color: var(--clay-pink-deep);
	box-shadow: 0 1px 3px rgb(77 68 57 / 18%);
	transition: translate 420ms var(--ease-spring);
	z-index: 1;
}

.invite-card__seal {
	position: absolute;
	left: 50%;
	top: 22px;
	translate: -50% 0;
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--clay-yellow-deep);
	color: #fff;
	font-size: 10px;
	box-shadow: 0 1px 2px rgb(77 68 57 / 30%);
	z-index: 4;
	transition: opacity var(--dur-base) var(--ease-soft) 330ms, scale var(--dur-base) var(--ease-spring) 330ms;
}

/* 開封: フラップが開いて手紙が顔を出す(ホバーと「封を開けて渡す」の両方で)。
   開くときはフラップが先、閉じるときは手紙が先。遅延の付け替えで順番を作る */
.invite-card--open:hover .invite-card__flap,
.invite-card.is-opened .invite-card__flap {
	rotate: x 205deg;
	filter: brightness(0.9);
	transition-delay: 0ms;
}

.invite-card--open:hover .invite-card__letter,
.invite-card.is-opened .invite-card__letter {
	translate: -50% -17px;
	transition-delay: 150ms;
}

.invite-card--open:hover .invite-card__seal,
.invite-card.is-opened .invite-card__seal {
	opacity: 0;
	scale: 0.4;
	transition-delay: 0ms;
}

/* 使用済み: 開いたまま固定し、封蝋は「✓」で残す */
.invite-card--used .invite-card__flap {
	rotate: x 205deg;
	filter: brightness(0.9);
}

.invite-card--used .invite-card__letter {
	translate: -50% -17px;
	background: hsl(var(--guest-hue) 70% 96%);
	color: hsl(var(--guest-hue) 45% 40%);
}

.invite-card--used .invite-card__seal {
	background: var(--clay-mint-deep, #7fc8a9);
}

/* 期限切れ: 色が抜ける */
.invite-card--expired {
	opacity: 0.62;
}

.invite-card--expired .invite-card__envelope {
	filter: grayscale(0.7);
}

.invite-card__body {
	min-width: 0;
}

.invite-card__code {
	margin: 0 0 var(--space-1);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--text-lg);
	font-weight: 700;
	letter-spacing: 0.14em;
	word-break: break-all;
}

.invite-card__meta,
.invite-card__state {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

/* 来てくれた人の色。プロフィールのアクセント色相をそのまま持ってくる */
.invite-card__guest-disc {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: radial-gradient(
		circle at 32% 30%,
		hsl(var(--guest-hue) 70% 78%),
		hsl(var(--guest-hue) 55% 58%)
	);
	box-shadow: inset 0 -2px 4px hsl(var(--guest-hue) 40% 40% / 35%);
}

.invite-card__time {
	color: var(--ink-faint);
	font-size: var(--text-xs);
}

/* --- 文面パネル(封筒の中の手紙) --- */

.invite-share {
	margin-top: var(--space-3);
	padding: var(--space-3);
	border-radius: var(--radius-md);
	background: #fffefa;
	box-shadow: inset 0 1px 3px rgb(77 68 57 / 10%);
}

/* [hidden] が display を持つクラスに負けないよう明示する(このリポジトリの鉄則) */
.invite-share[hidden] {
	display: none;
}

.invite-share__tones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.invite-share__tone {
	min-height: 36px;
	padding: 0 var(--space-3);
	border: none;
	border-radius: 999px;
	background: rgb(0 0 0 / 5%);
	color: var(--ink-soft);
	font: inherit;
	font-size: var(--text-sm);
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease;
}

.invite-share__tone[aria-selected="true"] {
	background: var(--ink);
	color: var(--paper, #fff);
}

.invite-share__text {
	width: 100%;
	padding: var(--space-3);
	border: 1px solid var(--ink-faint);
	border-radius: var(--radius-sm, 10px);
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: var(--text-sm);
	line-height: 1.8;
	resize: vertical;
	/* めくれるアニメの軸。transform は使わず rotate プロパティで回す */
	transform-origin: top center;
}

.invite-share__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

.invite-share__note {
	margin: var(--space-2) 0 0;
	color: var(--ink-faint);
	font-size: var(--text-xs);
}

/* コピーしたときに散る粒子 */
.invite-spark {
	position: fixed;
	z-index: var(--z-overlay, 900);
	pointer-events: none;
	color: var(--clay-yellow-deep);
	font-size: 14px;
	translate: -50% -50%;
}

.invites-empty {
	padding: var(--space-6) var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--surface, rgb(255 255 255 / 45%));
	text-align: center;
}

.invites-empty__lead {
	margin: 0 0 var(--space-2);
	font-weight: 600;
}

.invites-empty__help {
	margin: 0 auto;
	max-width: 34em;
	color: var(--ink-soft);
	font-size: var(--text-sm);
	line-height: 1.8;
}

.invites-page__foot {
	margin-top: var(--space-6);
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

/* ============================================================
   招待の入口 /signup/(パケットW1)
   ============================================================
   これまで「招待制です」と言うだけで、どうすればコードを手に入れられるのかが
   どこにも書かれていなかった(=招待制をONにした瞬間に登録が実質止まる)。
   受け取り方を必ず見せたうえで、招待リンクで来た人には**封が解ける**体験を返す。

   演出はJS側(signup.js)。ここは静的な見た目と状態の遷移だけを持つ。
   ============================================================ */

.signup-invite {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-2) var(--space-4);
	align-items: center;
	margin-top: var(--space-4);
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--surface-clay);
	box-shadow: var(--shadow-clay);
	transition: box-shadow var(--dur-base) var(--ease-soft);
}

/* 通ったとき: 縁がやわらかく灯る */
.signup-invite.is-verified {
	box-shadow: var(--shadow-clay), 0 0 0 2px var(--clay-mint-deep, #7fc8a9);
}

.signup-invite.is-rejected {
	box-shadow: var(--shadow-clay), 0 0 0 2px var(--clay-orange-deep, #e08a5a);
}

.signup-invite__envelope {
	position: relative;
	grid-row: span 3;
	width: 72px;
	height: 52px;
	border-radius: 8px;
	background: linear-gradient(160deg, color-mix(in srgb, var(--clay-pink-deep) 70%, #6d4350), var(--clay-pink-deep));
	box-shadow: var(--clay-drop);
	perspective: 240px;
}

/* 前面パネル。16px = 手紙の上端(52 - 6 - 30)。
   理由は components.css の .invite-envelope__art のコメント参照 */
.signup-invite__envelope::after {
	content: '';
	position: absolute;
	inset: 16px 0 0;
	border-radius: 0 0 8px 8px;
	background: linear-gradient(160deg, var(--clay-pink), color-mix(in srgb, var(--clay-pink-deep) 65%, var(--clay-pink)));
	z-index: 2;
}

.signup-invite__flap {
	position: absolute;
	inset: 0 0 auto;
	height: 29px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	background: linear-gradient(180deg, var(--clay-pink-deep), var(--clay-pink));
	border-radius: 8px 8px 0 0;
	transform-origin: top center;
	transition: rotate 460ms var(--ease-spring), filter var(--dur-base) var(--ease-soft);
	z-index: 3;
}

.signup-invite__letter {
	position: absolute;
	left: 50%;
	bottom: 6px;
	translate: -50% 0;
	width: 36px;
	height: 30px;
	display: grid;
	/* ♪ を上端へ(理由は components.css の同名要素のコメント参照) */
	place-items: start center;
	padding-top: 2px;
	line-height: 1;
	background: #fffefa;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 800;
	color: var(--clay-pink-deep);
	box-shadow: 0 1px 3px rgb(77 68 57 / 18%);
	transition: translate 420ms var(--ease-spring) 150ms;
	z-index: 1;
}

.signup-invite__seal {
	position: absolute;
	left: 50%;
	top: 22px;
	translate: -50% 0;
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--clay-yellow-deep);
	color: #fff;
	font-size: 10px;
	box-shadow: 0 1px 2px rgb(77 68 57 / 30%);
	z-index: 4;
	transition: opacity var(--dur-base) var(--ease-soft), scale var(--dur-base) var(--ease-spring);
}

/* 封が解けた状態(JSが is-opened を付ける)。
   フラップが開き、封蝋が外れ、手紙が顔を出すところまでを1組にする
   ── 「コードが通った」ことがこの絵だけで分かるように */
.signup-invite.is-opened .signup-invite__flap {
	rotate: x 205deg;
	filter: brightness(0.9);
}

.signup-invite.is-opened .signup-invite__letter {
	translate: -50% -17px;
}

.signup-invite.is-opened .signup-invite__seal {
	opacity: 0;
	scale: 0.4;
}

.signup-invite__label {
	align-self: end;
	font-size: var(--text-sm);
	color: var(--ink-soft);
}

.signup-invite__input {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: 0.14em;
}

.signup-invite__hint {
	margin: 0;
	align-self: start;
	color: var(--ink-faint);
	font-size: var(--text-xs);
}

/* 招待リンクで来たとき、自動で入ったことが分かるように */
.signup-invite.is-received .signup-invite__hint::before {
	content: "✓ ";
	color: var(--clay-mint-deep, #7fc8a9);
	font-weight: 700;
}

/* --- 招待コードをお持ちでない方へ --- */

.signup-routes {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--ink-faint);
}

.signup-routes__summary {
	cursor: pointer;
	color: var(--ink-soft);
	font-size: var(--text-sm);
	list-style: none;
}

.signup-routes__summary::-webkit-details-marker {
	display: none;
}

.signup-routes__summary::before {
	content: "▸ ";
	display: inline-block;
	transition: rotate 180ms var(--ease-spring);
}

.signup-routes[open] .signup-routes__summary::before {
	rotate: 90deg;
}

.signup-routes__body {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.signup-route {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--surface, rgb(255 255 255 / 55%));
	text-decoration: none;
	color: inherit;
}

.signup-route--link {
	transition: translate var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-soft);
}

.signup-route--link:hover,
.signup-route--link:focus-visible {
	translate: 0 -2px;
	box-shadow: var(--clay-drop);
}

.signup-route__icon {
	flex: 0 0 auto;
	font-size: 1.4rem;
	line-height: 1.4;
}

.signup-route__body {
	display: block;
	min-width: 0;
}

.signup-route__title {
	display: block;
	margin: 0 0 var(--space-1);
	font-weight: 600;
}

.signup-route__note {
	display: block;
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
	line-height: 1.7;
}

/* --- 順番待ち --- */

.waitlist-form {
	position: relative;
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.waitlist-form[hidden] {
	display: none;
}

.waitlist-form__error {
	margin: 0;
	color: var(--clay-orange-deep, #e08a5a);
	font-size: var(--text-sm);
}

.waitlist-form__error[hidden] {
	display: none;
}

/* 受け付けたら「整理券」が差し出される。並んだことが形として残る */
.waitlist-ticket {
	position: relative;
	margin-top: var(--space-3);
	padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
	border-radius: var(--radius-md);
	background: repeating-linear-gradient(
		-45deg,
		#fffefa,
		#fffefa 8px,
		#fdf6e6 8px,
		#fdf6e6 16px
	);
	box-shadow: var(--clay-drop);
}

.waitlist-ticket[hidden] {
	display: none;
}

/* 券のミシン目 */
.waitlist-ticket__perforation {
	position: absolute;
	inset-block: var(--space-3);
	inset-inline-start: var(--space-3);
	width: 2px;
	background: repeating-linear-gradient(
		to bottom,
		var(--ink-faint),
		var(--ink-faint) 4px,
		transparent 4px,
		transparent 8px
	);
}

.waitlist-ticket__lead {
	margin: 0 0 var(--space-1);
	font-weight: 700;
}

.waitlist-ticket__note {
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
	line-height: 1.8;
}

/* ============================================================
   ミニプロフィール(パケットW1)
   ============================================================
   会話の中で名前を見かけても、プロフィールを開くのは一手間で、たいてい
   誰も開かない。その場で「どんな耳の人か」が分かって、そのままフォロー
   までできれば、会話 → 人 → フォロー → タイムライン の輪が閉じる。

   並ぶ数字のうち、発見数ともらった「わかる!」は他所にもある。
   **あなたと重なった発見**だけはこのサイトにしか無いので、いちばん
   目立たせて、開いた瞬間に数が数え上がる(演出は mini-profile.js)。
   ============================================================ */

.mini-profile {
	--mini-hue: 200;
	position: fixed;
	z-index: var(--z-overlay, 900);
	width: min(280px, calc(100vw - 32px));
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--surface-clay);
	box-shadow: var(--shadow-clay-hover, 0 8px 24px rgb(0 0 0 / 14%));
}

/* リンクを指す小さな三角。どこから開いたカードかが分かる */
.mini-profile::after {
	content: "";
	position: absolute;
	inset-block-start: -6px;
	inset-inline-start: 50%;
	translate: -50% 0;
	border-inline: 6px solid transparent;
	border-block-end: 6px solid var(--surface-clay);
}

.mini-profile.is-above::after {
	inset-block: auto -6px;
	border-block-end: none;
	border-block-start: 6px solid var(--surface-clay);
}

.mini-profile__body {
	display: grid;
	gap: var(--space-3);
}

.mini-profile__head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

/* その人の色。プロフィールのアクセント色相をそのまま持ってくる */
.mini-profile__disc {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: radial-gradient(
		circle at 32% 30%,
		hsl(var(--mini-hue) 70% 78%),
		hsl(var(--mini-hue) 55% 58%)
	);
	box-shadow: inset 0 -2px 5px hsl(var(--mini-hue) 40% 40% / 35%);
}

.mini-profile__names {
	display: grid;
	min-width: 0;
}

.mini-profile__name {
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mini-profile__meta {
	color: var(--ink-soft);
	font-size: var(--text-xs);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mini-profile__stats {
	display: flex;
	gap: var(--space-4);
	margin: 0;
}

.mini-profile__stats dt {
	color: var(--ink-soft);
	font-size: var(--text-xs);
}

.mini-profile__stats dd {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

/* 差別化の核。ここだけ色を持たせ、開いた瞬間に目が向くようにする */
.mini-profile__affinity {
	display: flex;
	align-items: center;
	gap: 0.3em;
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-pill, 999px);
	background: hsl(var(--mini-hue) 60% 92%);
	color: hsl(var(--mini-hue) 45% 32%);
	font-size: var(--text-sm);
}

.mini-profile__affinity strong {
	font-size: var(--text-lg);
	font-variant-numeric: tabular-nums;
}

.mini-profile__actions {
	display: flex;
	gap: var(--space-2);
}

.mini-profile__actions > * {
	flex: 1 1 0;
	min-height: 40px;
	font-size: var(--text-sm);
	text-align: center;
	white-space: nowrap;
}

.mini-profile__visit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.mini-profile__status {
	margin: 0;
	min-height: 1.2em;
	color: var(--ink-soft);
	font-size: var(--text-xs);
}

.mini-profile__status:empty {
	display: none;
}

/* ============================================================
   運営のお題 /mood/theme/{slug}/(パケットT2)
   ============================================================
   気分ごとに色が変わる。--theme-hue はテンプレートが
   niteru_theme_mood_hue() の値をインラインで差し込む
   (「雨の日」は青、「踊れる」は紫、と回ごとに景色が変わる)。
   ============================================================ */

.theme-page {
	--theme-tint: hsl(var(--theme-hue) 70% 92%);
	--theme-ink: hsl(var(--theme-hue) 45% 38%);
	--theme-glow: hsl(var(--theme-hue) 85% 72%);
}

.theme-hero {
	position: relative;
}

.theme-hero__title {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-2) 0 var(--space-3);
	font-size: var(--text-hero);
	line-height: 1.25;
}

/* 絵文字がゆっくり息をする。お題は「いま開いている場」なので、
   静止画に見えないだけで印象が変わる */
.theme-hero__emoji {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 1.6em;
	height: 1.6em;
	border-radius: var(--radius-pill);
	background: var(--theme-tint);
	box-shadow: var(--shadow-clay);
	animation: theme-emoji-breathe 5.5s var(--ease-soft) infinite;
}

@keyframes theme-emoji-breathe {
	0%, 100% { scale: 1; rotate: -2deg; }
	50% { scale: 1.06; rotate: 2deg; }
}

.theme-hero__lead {
	max-width: 46em;
	margin: 0 0 var(--space-4);
	color: var(--ink-soft);
	line-height: 1.9;
}

.theme-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
}

.theme-hero__period {
	color: var(--ink-soft);
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
}

.theme-hero__count {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
	color: var(--ink-soft);
}

.theme-hero__count strong {
	color: var(--theme-ink);
	font-size: var(--text-xl);
	font-variant-numeric: tabular-nums;
}

.theme-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}

.theme-countdown {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-pill);
	background: var(--theme-tint);
	color: var(--theme-ink);
	font-size: var(--text-sm);
}

/* 締め切り当日だけ脈打つ。毎回光らせると「急かすサイト」になるので、
   本当に今日までのときにしか出さない */
.theme-page[data-open="1"][data-days-left="1"] .theme-countdown,
.theme-page[data-open="1"][data-days-left="0"] .theme-countdown {
	animation: theme-countdown-pulse 1.8s var(--ease-soft) infinite;
}

@keyframes theme-countdown-pulse {
	0%, 100% { scale: 1; box-shadow: 0 0 0 0 var(--theme-glow); }
	50% { scale: 1.03; box-shadow: 0 0 0 8px transparent; }
}

.theme-hero__how,
.theme-hero__closed {
	margin: var(--space-4) 0 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

/* --- この回の一枚 --- */

.theme-highlight__card {
	position: relative;
	padding: var(--space-3);
	border-radius: var(--radius-xl);
	background: radial-gradient(
		120% 100% at 50% 0%,
		var(--theme-tint) 0%,
		transparent 70%
	);
}

/* --- 空のとき --- */

.theme-empty {
	display: grid;
	justify-items: center;
	gap: var(--space-3);
	padding: var(--space-7) var(--space-5);
	border-radius: var(--radius-xl);
	background: var(--surface-clay);
	box-shadow: var(--shadow-clay);
	text-align: center;
}

.theme-empty__lead {
	margin: 0;
	font-size: var(--text-lg);
}

.theme-empty__help {
	margin: 0 0 var(--space-3);
	color: var(--ink-soft);
}

/* --- これまでのお題(棚) --- */

.theme-past__list {
	display: flex;
	gap: var(--space-3);
	margin: 0;
	padding: 0 0 var(--space-2);
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x proximity;
}

.theme-past__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 14rem;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--surface-clay);
	box-shadow: var(--shadow-clay);
	color: inherit;
	text-decoration: none;
	scroll-snap-align: start;
	transition: translate var(--dur-quick) var(--ease-spring),
		box-shadow var(--dur-quick) var(--ease-soft);
}

.theme-past__item:hover,
.theme-past__item:focus-visible {
	translate: 0 -3px;
	box-shadow: var(--shadow-clay-hover);
}

.theme-past__emoji {
	font-size: var(--text-lg);
}

.theme-past__title {
	font-size: var(--text-sm);
	line-height: 1.5;
}

/* ============================================================
   お題の告知(パケットT2-c。トップ/ハブ/投稿/タイムライン共通)
   ============================================================
   マークアップは niteru_theme_theme_banner() が正本。
   面ごとに書き換えず、variant のクラスで密度だけ変える。
   ============================================================ */

.theme-banner {
	--theme-tint: hsl(var(--theme-hue) 70% 92%);
	--theme-ink: hsl(var(--theme-hue) 45% 38%);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-lg);
	background:
		linear-gradient(135deg, var(--theme-tint) 0%, transparent 55%),
		var(--surface-clay);
	box-shadow: var(--shadow-clay);
}

.theme-banner--hero {
	padding: var(--space-5) var(--space-6);
	border-radius: var(--radius-xl);
}

.theme-banner--inline {
	margin-bottom: var(--space-5);
	padding: var(--space-3) var(--space-4);
}

.theme-banner__emoji {
	display: inline-grid;
	place-items: center;
	width: 2.6em;
	height: 2.6em;
	border-radius: var(--radius-pill);
	background: var(--surface);
	box-shadow: var(--shadow-clay);
	font-size: var(--text-lg);
}

.theme-banner--hero .theme-banner__emoji {
	font-size: var(--text-xl);
}

.theme-banner__body {
	min-width: 0;
}

.theme-banner__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-1);
	color: var(--ink-soft);
	font-size: var(--text-xs);
}

.theme-banner__deadline {
	padding: 2px var(--space-2);
	border-radius: var(--radius-pill);
	background: var(--theme-tint);
	color: var(--theme-ink);
	font-variant-numeric: tabular-nums;
}

/* 締め切り当日だけ主張する。毎回光らせると誰も見なくなる */
.theme-banner__deadline--soon {
	background: var(--agree-soft);
	color: #fff;
	animation: theme-deadline-blink 2.4s var(--ease-soft) infinite;
}

@keyframes theme-deadline-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}

.theme-banner__title {
	margin: 0 0 var(--space-1);
	font-size: var(--text-lg);
	line-height: 1.4;
}

.theme-banner--hero .theme-banner__title {
	font-size: var(--text-xl);
}

.theme-banner__title a {
	color: inherit;
	text-decoration: none;
}

.theme-banner__title a:hover,
.theme-banner__title a:focus-visible {
	text-decoration: underline;
}

.theme-banner__lead {
	margin: 0 0 var(--space-2);
	color: var(--ink-soft);
	font-size: var(--text-sm);
	line-height: 1.8;
}

.theme-banner__count {
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--text-xs);
}

.theme-banner__actions {
	display: grid;
	justify-items: end;
	gap: var(--space-2);
}

.theme-banner__go {
	color: var(--theme-ink);
	font-size: var(--text-sm);
	text-decoration: none;
	white-space: nowrap;
}

.theme-banner__go:hover,
.theme-banner__go:focus-visible {
	text-decoration: underline;
}

/* --- 参加バッジ --- */

.theme-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px var(--space-3);
	border-radius: var(--radius-pill);
	background: hsl(var(--theme-hue) 70% 92%);
	color: hsl(var(--theme-hue) 45% 34%);
	font-size: var(--text-xs);
	text-decoration: none;
	/* 理由チップの列に混ざるので、色だけでなく縁でも区別できるようにする */
	box-shadow: inset 0 0 0 1px hsl(var(--theme-hue) 55% 72%);
}

.theme-badge:hover,
.theme-badge:focus-visible {
	background: hsl(var(--theme-hue) 75% 87%);
}

@media (prefers-reduced-motion: reduce) {
	.theme-hero__emoji,
	.theme-banner__deadline--soon,
	.theme-page[data-open="1"][data-days-left="1"] .theme-countdown,
	.theme-page[data-open="1"][data-days-left="0"] .theme-countdown {
		animation: none;
	}
}

/* ============================================================
   圏外の画面 /offline/(パケットP1-b)
   ============================================================
   マークアップは template-parts/offline/offline-page.php が正本。

   【外部フォントに頼らない】丸ゴシックは Google Fonts から来るので、
   圏外では必ず落ちる。ここは端末の丸ゴシック(Hiragino Maru Gothic ProN /
   BIZ UDGothic)に落ちても成立する組みにしてある ── 文字を小さく詰めない、
   字間で意匠を作らない。
   ============================================================ */

.offline-page__stage {
	display: grid;
	justify-items: center;
	gap: var(--space-4);
	text-align: center;
	padding-block: var(--space-7);
}

.offline-page__title {
	margin: 0;
	font-size: var(--text-xl);
	line-height: 1.6;
}

.offline-page__lead {
	max-width: 32em;
	margin: 0;
	color: var(--ink-soft);
	line-height: 1.9;
}

/* --- 浮かぶレコードと音符(CSSだけで動く=圏外でも生きている) --- */

.offline-orbit {
	position: relative;
	width: 180px;
	height: 180px;
	display: grid;
	place-items: center;
}

.offline-orbit__disc {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, var(--paper) 0 16%, transparent 17%),
		conic-gradient(from 0deg, #4d4439, #6b6152, #4d4439, #6b6152, #4d4439);
	box-shadow: var(--shadow-clay);
	animation: offline-disc-spin 9s linear infinite,
		offline-disc-float 4.5s ease-in-out infinite alternate;
}

@keyframes offline-disc-spin {
	from { rotate: 0deg; }
	to { rotate: 360deg; }
}

@keyframes offline-disc-float {
	from { translate: 0 -6px; }
	to { translate: 0 6px; }
}

.offline-orbit__note {
	position: absolute;
	font-size: 1.6rem;
	color: var(--clay-pink-deep);
	animation: offline-note-drift 6s ease-in-out infinite;
}

.offline-orbit__note--1 { inset-block-start: 6%; inset-inline-start: 12%; animation-delay: 0s; }
.offline-orbit__note--2 { inset-block-start: 40%; inset-inline-end: 4%; color: var(--clay-sky-deep); animation-delay: -2s; }
.offline-orbit__note--3 { inset-block-end: 8%; inset-inline-start: 22%; color: var(--clay-orange-deep); animation-delay: -4s; }

@keyframes offline-note-drift {
	0%   { translate: 0 0; opacity: 0.35; }
	50%  { translate: 0 -18px; opacity: 1; }
	100% { translate: 0 0; opacity: 0.35; }
}

/* --- 端末に持っているものの一覧 --- */

.offline-menu {
	display: grid;
	gap: var(--space-3);
	max-width: 34rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.offline-menu__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--surface-clay);
	box-shadow: var(--shadow-clay);
	color: inherit;
	text-decoration: none;
	transition: translate var(--dur-quick) var(--ease-spring),
		box-shadow var(--dur-quick) var(--ease-soft);
}

a.offline-menu__item:hover,
a.offline-menu__item:focus-visible {
	translate: 0 -3px;
	box-shadow: var(--shadow-clay-hover);
}

/* まだ端末に何も無いときは、押せないことが見て分かる形にする。
   押せそうに見せて何も起きないのが、圏外ではいちばん不親切 */
.offline-menu__item.is-empty {
	opacity: 0.62;
	box-shadow: var(--clay-highlight), var(--clay-inner-shade);
}

.offline-menu__icon {
	display: grid;
	place-items: center;
	width: 2.4em;
	height: 2.4em;
	border-radius: var(--radius-pill);
	background: var(--paper-deep);
	font-size: var(--text-lg);
}

.offline-menu__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.offline-menu__body small {
	color: var(--ink-soft);
	font-size: var(--text-xs);
	line-height: 1.6;
}

.offline-menu__go {
	color: var(--ink-faint);
}

/* 中身がある枠は押せる。0件のときは is-empty のまま(押させない) */
.offline-menu__item[role="button"] {
	cursor: pointer;
}

.offline-menu__item[role="button"]:hover,
.offline-menu__item[role="button"]:focus-visible {
	translate: 0 -3px;
	box-shadow: var(--shadow-clay-hover);
}

/* 枠の下にその場で開く一覧。圏外なので別ページへは飛ばさない */
.offline-list {
	display: grid;
	gap: var(--space-1);
	margin: var(--space-2) 0 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--paper-deep) 70%, transparent);
	list-style: none;
	animation: offline-list-in 260ms var(--ease-spring) both;
}

@keyframes offline-list-in {
	from { opacity: 0; translate: 0 -6px; }
	to { opacity: 1; translate: 0 0; }
}

.offline-list a {
	display: block;
	padding: var(--space-2) 0;
	color: var(--ink);
	font-size: var(--text-sm);
	text-decoration: none;
	/* 曲名が長くても行を割らない。圏外の画面は情報を詰めない方がよい */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.offline-page__aside {
	text-align: center;
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

@media (prefers-reduced-motion: reduce) {
	.offline-orbit__disc,
	.offline-orbit__note {
		animation: none;
	}
}

/* ============================================================
   預かっている操作 /me/pending/(パケットP1-f)
   ============================================================
   【落ち着いた見た目にする】ここに来る人は「送れていないのでは」と
   思って来ている。赤や警告の意匠にすると、正常な待ち状態まで事故に
   見える。雲の色(灰青)を基調に、止まっている物だけ色を変える。
   ============================================================ */

.pending-page__title {
	font-size: var(--text-xl);
	margin: var(--space-2) 0 var(--space-3);
}

.pending-page__lead {
	max-width: 34rem;
	color: var(--ink-soft);
	line-height: 1.9;
}

.pending-page__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-5);
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--paper-deep);
	box-shadow: var(--shadow-clay-pressed);
}

.pending-page__summary {
	margin: 0;
	font-weight: 700;
}

.pending-page__status {
	min-height: 1.5em;
	margin: var(--space-3) 0 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

.pending-list {
	display: grid;
	gap: var(--space-3);
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
}

.pending-list:empty {
	margin: 0;
}

.pending-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	gap: var(--space-3);
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--paper);
	box-shadow: var(--shadow-clay);
	/* 一斉に出ると読めない。上から順に降ろす(--i は行番号) */
	animation: pending-item-in 320ms var(--ease-spring) both;
	animation-delay: calc(var(--i, 0) * 55ms);
}

@keyframes pending-item-in {
	from { opacity: 0; translate: 0 10px; scale: 0.98; }
	to { opacity: 1; translate: 0 0; scale: 1; }
}

/* 送れない事情がある行だけ、静かに色を落とす(警告色にはしない) */
.pending-item.is-blocked {
	background: color-mix(in srgb, var(--paper-deep) 80%, var(--paper));
}

.pending-item__icon {
	font-size: 1.5rem;
	line-height: 1.2;
	/* 雲の中で待っている感じ。ゆっくりで、目を引きすぎない */
	animation: pending-icon-drift 3.6s var(--ease-soft) infinite;
}

@keyframes pending-icon-drift {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -3px; }
}

.pending-item__body {
	min-width: 0;
}

.pending-item__verb {
	margin: 0;
	font-weight: 700;
}

.pending-item__target {
	margin: var(--space-1) 0 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pending-item__target a {
	color: inherit;
}

.pending-item__when {
	margin: var(--space-1) 0 0;
	color: var(--ink-faint);
	font-size: var(--text-xs);
}

.pending-item__note {
	margin: var(--space-2) 0 0;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--paper-deep) 70%, transparent);
	color: var(--ink-soft);
	font-size: var(--text-xs);
	line-height: 1.7;
}

.pending-item__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.pending-item__actions .clay-btn {
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
}

/* 取り消しの確認。行の中に開く(window.confirm は使わない) */
.pending-item__confirm {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
	padding: var(--space-3);
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--paper-deep) 85%, transparent);
	animation: pending-confirm-in 200ms var(--ease-spring) both;
}

@keyframes pending-confirm-in {
	from { opacity: 0; scale: 0.98; }
	to { opacity: 1; scale: 1; }
}

.pending-item__confirm p {
	flex: 1 1 14rem;
	margin: 0;
	font-size: var(--text-sm);
}

.pending-item__confirm .clay-btn {
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
}

.pending-empty {
	margin-top: var(--space-5);
	padding: var(--space-6) var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--paper-deep);
	text-align: center;
}

.pending-empty__mark {
	display: block;
	font-size: 2.5rem;
	animation: pending-icon-drift 4.2s var(--ease-soft) infinite;
}

.pending-empty__title {
	margin: var(--space-3) 0 var(--space-2);
	font-weight: 700;
}

.pending-empty__body {
	margin: 0 0 var(--space-4);
	color: var(--ink-soft);
	font-size: var(--text-sm);
	line-height: 1.9;
}

/* マイページの入口(件数が1件以上のときだけ outbox.js が開ける) */
.me-pending__lead {
	margin: 0 0 var(--space-3);
	color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
	.pending-item,
	.pending-item__icon,
	.pending-item__confirm,
	.pending-empty__mark {
		animation: none;
	}
}

/* ============================================================
   耳くらべ /play/(パケットP2-c)
   ============================================================
   【transform を使わない】このファイル全体の鉄則。カードは
   translate / rotate / scale の独立プロパティで動かす。@keyframes と
   インラインスタイルの両方から別々のプロパティを触るので、
   transform 1本にまとめると必ずどれかが打ち消される。
   ============================================================ */

.play-page {
	/* 判定の向きに応じて画面全体がわずかに傾く。--verdict-hue は
	   カード側から立ち上がってくる(はらっている間だけ色が乗る) */
	padding-bottom: var(--space-6);
}

.play-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-top: var(--space-4);
}

.play-head__remaining {
	margin: var(--space-1) 0 0;
	font-size: var(--text-lg);
	font-weight: 700;
}

/* 進み具合の輪。--p(0〜1)で弧が伸びる */
.play-ring {
	position: relative;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background:
		conic-gradient(var(--agree) calc(var(--p) * 360deg), color-mix(in srgb, var(--paper-deep) 90%, transparent) 0);
	box-shadow: var(--shadow-clay);
}

.play-ring::after {
	content: "";
	position: absolute;
	inset: 6px;
	border-radius: 50%;
	background: var(--paper);
}

.play-ring__streak {
	position: relative;
	z-index: 1;
	font-weight: 700;
	font-size: var(--text-sm);
}

/* 5枚続くたびに一度だけ脈打つ(高揚を音だけに頼らない) */
.play-ring.is-pulse {
	animation: play-ring-pulse 700ms var(--ease-spring);
}

@keyframes play-ring-pulse {
	0% { scale: 1; }
	40% { scale: 1.18; }
	100% { scale: 1; }
}

.play-status {
	min-height: 1.4em;
	margin: var(--space-2) 0 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
	text-align: center;
}

/* --- カードの重なり --- */

.play-stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 420px;
	margin-top: var(--space-3);
	/* 舞台の高さは「カードが乗っているとき」の寸法。手札が尽きたら
	   下の .play-stage.is-empty で畳む(そうしないと、終わりの画面の
	   上下に420px ぶんの空白が残る) */
	/* はらっている間、カードは画面の外まで動く。切っておかないと
	   横スクロールバーが生えて、指の動きがページごと持っていかれる。
	   clip は overflow:hidden と違ってスクロール位置を作らない */
	overflow: clip;
	isolation: isolate;
}

/**
 * 判定の色が舞台ににじむ(パケットP2-e)。
 *
 * --lean(0〜1)と --lean-hue を play.js が毎フレーム書く。カードだけを
 * 染めるやり方は他所にもあるが、**画面ごと傾く**とスワイプが「操作」から
 * 「手応え」に変わる。濃くしすぎると文字が沈むので上限は薄く。
 */
.play-stage::before {
	content: "";
	position: absolute;
	inset: -10%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
		circle at 50% 48%,
		hsl(var(--lean-hue, 28) 86% 74% / calc(var(--lean, 0) * 0.5)) 0%,
		transparent 68%
	);
}

.play-stack,
.play-loading,
.play-empty {
	position: relative;
	z-index: 1;
}

/**
 * 手札が尽きたら舞台を畳む(パケットR3)。
 *
 * 【何が起きていたか】.play-stage は 420px、.play-stack も 420px を
 * 常に確保している。カードが無くなると中身は「ひとまわり、聴きくらべました」
 * の1枚だけなのに、**空のカード置き場が420px居座り**、ファーストビューに
 * 大きな空白ができていた。終わりの画面はそれ自体が主役なので、
 * 舞台の寸法は要らない。
 */
.play-stage.is-empty {
	min-height: 0;
}

.play-stage.is-empty .play-stack {
	display: none;
}

.play-loading {
	display: grid;
	justify-items: center;
	gap: var(--space-3);
	color: var(--ink-soft);
}

/**
 * 【display を指定した要素には [hidden] を効かせ直す】ブラウザ既定の
 * `[hidden] { display: none }` は詳細度0なので、こちらの `display: grid` に
 * 負ける。**hidden を立てても消えない**という形で出る(実装直後に踏んだ)。
 * このファイルで display を指定して hidden も使う要素は、必ずここに足すこと。
 */
.play-loading[hidden],
.play-empty[hidden],
.play-controls[hidden],
.offline-play[hidden] {
	display: none;
}

.play-loading__disc {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, var(--paper) 22%, var(--clay-orange) 23%, var(--clay-orange-deep) 70%);
	animation: play-disc-spin 2.4s linear infinite;
}

@keyframes play-disc-spin {
	from { rotate: 0deg; }
	to { rotate: 360deg; }
}

.play-stack {
	position: relative;
	width: min(100%, 420px);
	height: 420px;
}

.play-card {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: var(--space-3);
	padding: var(--space-5) var(--space-4);
	border-radius: var(--radius-xl);
	background: var(--paper);
	box-shadow: var(--shadow-clay);
	/* 奥の札ほど下がって小さくなる。重なりが見えると「まだある」が伝わる */
	translate: 0 calc(var(--depth) * 12px);
	scale: calc(1 - var(--depth) * 0.05);
	opacity: calc(1 - var(--depth) * 0.18);
	z-index: calc(10 - var(--depth));
	touch-action: none;
	user-select: none;
	/**
	 * 【transition を持たせない】いちばん手前の札は play.js のばねと
	 * 投げの積分が毎フレーム位置を書く(spring.js)。CSS の補間を重ねると、
	 * 書き換えるたびに新しい補間が始まって**指から遅れる**。
	 * 奥の札は作り直しで入れ替わるので、そちらも補間は要らない。
	 */
	animation: play-card-in 260ms var(--ease-spring) both;
}

@keyframes play-card-in {
	from { opacity: 0; scale: 0.94; }
}

.play-card.is-top {
	cursor: grab;
}

/* キーボードで来た人にも、いまどれを判定しているか分かる縁 */
.play-card:focus-visible {
	outline: 3px solid var(--action);
	outline-offset: 4px;
}

.play-card.is-dragging {
	cursor: grabbing;
	/* 掴んでいる間は少しだけ浮かせる(手に取っている感じ) */
	box-shadow: var(--shadow-clay-hover);
}

.play-card.is-gone {
	pointer-events: none;
	z-index: 20;
}

/* 四辺の道しるべ。読まなくても、どちらへはらえば何になるか分かる */
.play-card__edges {
	position: absolute;
	inset: var(--space-2);
	pointer-events: none;
	z-index: 2;
}

/* 奥の札の道しるべは出さない。同じ印が3組見えると、どれが
   いま効くのか分からなくなる(重なりの意味も薄れる) */
.play-card:not(.is-top) .play-card__edges {
	display: none;
}

.play-card__edge {
	position: absolute;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--paper-deep) 80%, transparent);
	font-size: 0.85rem;
	opacity: 0.42;
	transition: opacity 160ms linear, scale 200ms var(--ease-spring);
}

.play-card__edge--left { left: 0; top: 50%; margin-top: -15px; }
.play-card__edge--right { right: 0; top: 50%; margin-top: -15px; }
.play-card__edge--up { top: 0; left: 50%; margin-left: -15px; }
.play-card__edge--down { bottom: 0; left: 50%; margin-left: -15px; }

/* しきい値を越えた向きだけ、はっきり光る */
.play-card__edge.is-armed {
	opacity: 1;
	scale: 1.25;
	background: var(--paper);
	box-shadow: var(--shadow-clay);
}

/* 判定の意思表示。はらう向きの色が乗る */
.play-card__verdict {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: var(--space-2);
	justify-items: center;
	border-radius: inherit;
	background: color-mix(in srgb, hsl(var(--verdict-hue, 28) 80% 88%) 72%, transparent);
	opacity: 0;
	pointer-events: none;
	z-index: 3;
	transition: opacity 120ms linear;
}

.play-card__verdict-mark {
	font-size: 3.4rem;
	line-height: 1;
}

.play-card__verdict-label {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--ink);
}

.play-card__body {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-2);
}

.play-card__link {
	font-size: 1.6rem;
	color: var(--ink-faint);
	/* 2曲のあいだで静かに息をする。止まっていると図に見える */
	animation: play-link-breathe 3.2s var(--ease-soft) infinite;
}

@keyframes play-link-breathe {
	0%, 100% { opacity: 0.55; scale: 1; }
	50% { opacity: 1; scale: 1.14; }
}

.play-orb {
	display: grid;
	justify-items: center;
	gap: var(--space-1);
	min-width: 0;
	text-align: center;
}

.play-orb__disc {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 34%, #fff 6%, var(--clay-pink) 7%, var(--clay-pink-deep) 62%, #d9779a 100%);
	box-shadow: var(--shadow-clay);
	animation: play-orb-float 4.6s var(--ease-soft) infinite;
}

.play-orb--b .play-orb__disc {
	background: radial-gradient(circle at 38% 34%, #fff 6%, var(--clay-sky) 7%, var(--clay-sky-deep) 62%, #5aa6d6 100%);
	animation-delay: -2.3s;
}

@keyframes play-orb-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -7px; }
}

.play-orb__title {
	margin: var(--space-2) 0 0;
	font-weight: 700;
	line-height: 1.4;
	/* 曲名は2行まで。3行になるとカードの高さが揺れて重なりが崩れる */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.play-orb__artist {
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--text-xs);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.play-orb__origin {
	padding: 2px var(--space-2);
	border-radius: var(--radius-pill);
	background: var(--clay-yellow);
	font-size: var(--text-xs);
	font-weight: 700;
}

.play-card__meta {
	display: grid;
	gap: var(--space-2);
}

.play-card__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.play-card__tag {
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--paper-deep);
	font-size: var(--text-xs);
}

.play-card__tag--structure { background: var(--clay-mint); }
.play-card__tag--mood { background: var(--clay-yellow); }

.play-card__comment {
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	background: var(--paper-deep);
	font-size: var(--text-sm);
	line-height: 1.7;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.play-card__foot {
	margin: 0;
	color: var(--ink-faint);
	font-size: var(--text-xs);
	text-align: center;
}

/* --- 操作 --- */

.play-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.play-btn {
	display: grid;
	justify-items: center;
	gap: 2px;
	min-width: 64px;
	min-height: 64px;
	padding: var(--space-2);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--paper);
	box-shadow: var(--shadow-clay);
	color: var(--ink);
	font: inherit;
	cursor: pointer;
	transition: scale 160ms var(--ease-spring), box-shadow 160ms var(--ease-soft);
}

.play-btn:hover { scale: 1.06; box-shadow: var(--shadow-clay-hover); }
.play-btn:active { scale: 0.94; box-shadow: var(--shadow-clay-pressed); }

.play-btn:focus-visible {
	outline: 3px solid var(--action);
	outline-offset: 3px;
}

/**
 * 【4つとも同じ重さで出す】記号は全部カラー絵文字にそろえてある
 * (⤵ や ♡ のような白黒の字グリフを混ぜると、そこだけ「ただの文字」に
 * 見える。実際に「とばす」と「あとで」がそう見えていた)。
 * 大きさも影も同じにして、色と字だけで役割を分ける。
 */
.play-btn__mark {
	font-size: 1.45rem;
	line-height: 1;
	/* 絵文字の下に余白が出て、ラベルとの間が詰まって見えるのを直す */
	display: block;
	margin-bottom: 1px;
}

.play-btn__label {
	font-size: var(--text-xs);
	font-weight: 700;
}

/* 「わかる!」だけ一回り大きい。この遊びの主目的だと手が覚える */
.play-btn--agree {
	min-width: 78px;
	min-height: 78px;
	background: var(--agree-soft);
}

/* 4つとも別の色にする。並んだときに形以外の手がかりがあると、
   指が迷わない(色が見分けられなくても字と記号で分かる) */
.play-btn--hmm { background: var(--hmm-soft); }
.play-btn--save { background: var(--clay-mint); }
.play-btn--skip { background: var(--paper-deep); }

.play-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-4);
	/* 【下の枠と離す】「この発見を開く」と「圏外にそなえる」が詰まって
	   いると、遊びの操作と支度の話が地続きに見えて息苦しくなる。
	   ここは話題の変わり目なので、はっきり間を空ける */
	padding-bottom: var(--space-6);
	border-bottom: 1px solid color-mix(in srgb, var(--ink-faint) 34%, transparent);
}

/* --- 遊び方 --- */

.play-hint {
	margin-top: var(--space-5);
	color: var(--ink-soft);
	font-size: var(--text-sm);
	text-align: center;
	line-height: 1.9;
}

.play-hint kbd {
	padding: 1px 6px;
	border-radius: var(--radius-sm);
	background: var(--paper-deep);
	font-size: var(--text-xs);
}

.play-hint__offline {
	margin-top: var(--space-2);
	color: var(--ink-faint);
	font-size: var(--text-xs);
}

/* --- 終わり --- */

.play-empty {
	display: grid;
	justify-items: center;
	gap: var(--space-3);
	padding: var(--space-6) var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--paper-deep);
	text-align: center;
	animation: play-empty-in 420ms var(--ease-spring) both;
}

@keyframes play-empty-in {
	from { opacity: 0; translate: 0 14px; scale: 0.97; }
	to { opacity: 1; translate: 0 0; scale: 1; }
}

.play-empty__mark {
	font-size: 2.8rem;
	animation: play-orb-float 4s var(--ease-soft) infinite;
}

.play-empty__title {
	margin: 0;
	font-size: var(--text-xl);
}

.play-tally {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-sm);
}

.play-tally strong {
	font-size: var(--text-lg);
	margin-left: var(--space-1);
}

.play-empty__body {
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

.play-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}

.play-spark {
	color: var(--ink);
}

/* --- 音と震えの切り替え(パケットP2-e)--- */

.play-head__right {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.play-pref {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--paper-deep);
	box-shadow: var(--shadow-clay-pressed);
	font-size: 1.05rem;
	cursor: pointer;
	/* 切ってあるときは沈んで色が抜ける。押せることは形で分かる */
	opacity: 0.45;
	filter: grayscale(1);
	transition: opacity 160ms linear, filter 160ms linear, box-shadow 160ms var(--ease-soft);
}

.play-pref.is-on {
	opacity: 1;
	filter: none;
	box-shadow: var(--shadow-clay);
}

.play-pref:focus-visible {
	outline: 3px solid var(--action);
	outline-offset: 2px;
}

/* aria-disabled は押せる見た目のまま沈める(disabled と違いフォーカスは残る) */
.clay-btn.is-disabled {
	opacity: 0.45;
	cursor: default;
	box-shadow: var(--shadow-clay-pressed);
}

/* --- 圏外にそなえる(パケットP2-e)--- */

.play-supply {
	display: grid;
	justify-items: start;
	gap: var(--space-3);
	margin-top: var(--space-5);
	padding: var(--space-5) var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--paper-deep);
}

.play-supply [data-play-deal] {
	margin-top: var(--space-1);
}

.play-supply[hidden] {
	display: none;
}

.play-supply__title {
	margin: 0;
	font-size: var(--text-lg);
}

.play-supply__count {
	margin: 0;
	font-weight: 700;
}

.play-supply__lead {
	margin: 0 0 var(--space-2);
	color: var(--ink-soft);
	font-size: var(--text-sm);
	line-height: 1.9;
}

/* ブラウザで開いているときは、支度より先に入れ方を案内する */
.play-supply[data-mode="browser"] .play-supply__lead,
.play-supply[data-mode="browser"] [data-play-deal] {
	opacity: 0.72;
}

.play-install {
	display: grid;
	justify-items: start;
	gap: var(--space-2);
	width: 100%;
	margin-top: var(--space-3);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	background: var(--paper);
	box-shadow: var(--shadow-clay);
}

.play-install[hidden] {
	display: none;
}

.play-install__lead {
	margin: 0;
	font-size: var(--text-sm);
	line-height: 1.9;
}

.play-install__hint {
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--text-xs);
	line-height: 1.7;
}

/* --- /discover/ からの入口 --- */

.play-invite {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, var(--clay-yellow) 0%, var(--clay-orange) 100%);
	box-shadow: var(--shadow-clay);
	color: var(--ink);
	text-decoration: none;
	transition: scale 200ms var(--ease-spring), box-shadow 200ms var(--ease-soft);
}

.play-invite:hover,
.play-invite:focus-visible {
	scale: 1.015;
	box-shadow: var(--shadow-clay-hover);
}

.play-invite__mark {
	font-size: 1.9rem;
	animation: play-orb-float 3.8s var(--ease-soft) infinite;
}

.play-invite__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.play-invite__body small {
	color: color-mix(in srgb, var(--ink) 78%, transparent);
	font-size: var(--text-xs);
	line-height: 1.6;
}

.play-invite__go {
	font-size: 1.3rem;
	transition: translate 200ms var(--ease-spring);
}

.play-invite:hover .play-invite__go {
	translate: 4px 0;
}

/**
 * 動きを望まない人への道(パケットP2-e)。
 *
 * 【止めるのは動きだけで、機能は削らない】play.js 側でも reduceMotion の
 * ときは投げの積分を回さず、カードは静かに入れ替わる。ここで消すのは
 * 「見ていて酔うもの」── 浮遊・回転・にじみ・跳ね返り。判定も、戻すも、
 * 読み上げも、まったく同じように使える。
 */
@media (prefers-reduced-motion: reduce) {
	.play-card,
	.play-card__link,
	.play-card__edge,
	.play-orb__disc,
	.play-loading__disc,
	.play-empty,
	.play-empty__mark,
	.play-invite__mark,
	.play-ring.is-pulse {
		animation: none;
		transition: none;
	}

	/* 画面全体のにじみは、動きに敏感な人にはいちばん障る */
	.play-stage::before {
		display: none;
	}
}

/**
 * 【縁の色を薄くしすぎない】判定の意思表示は色だけに頼らず、
 * 必ず**字と記号**を添えてある(👏 わかる! のように)。
 * 色が見分けられなくても何が起きるか分かる、が前提。
 */
@media (prefers-contrast: more) {
	.play-card__edge {
		opacity: 0.9;
		background: var(--paper);
		box-shadow: var(--shadow-clay);
	}

	.play-card__verdict {
		background: color-mix(in srgb, hsl(var(--verdict-hue, 28) 80% 88%) 94%, transparent);
	}
}

/* ============================================================
   手がかりの内訳(パケットR2-a)
   ============================================================
   【色と長さだけに頼らない】棒は強さを一目で掴むための飾りで、
   人数は必ず字でも出す。棒は aria-hidden、読み上げには
   「サビの上がり方が近い 3人」と字のほうが渡る。
   ============================================================ */

.pair-page__reasons-lead {
	margin: 0 0 var(--space-4);
	color: var(--ink-soft);
	font-size: var(--text-sm);
	line-height: 1.9;
}

.pair-page__reasons-list {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pair-page__reasons-item {
	display: grid;
	/* チップ / 棒 / 人数 / 発見者の印 */
	grid-template-columns: auto minmax(40px, 1fr) auto auto;
	align-items: center;
	gap: var(--space-3);
}

.pair-page__reasons-bar {
	position: relative;
	height: 8px;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--paper-deep) 88%, transparent);
	overflow: hidden;
}

.pair-page__reasons-bar::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--strength, 0%);
	border-radius: inherit;
	background: linear-gradient(90deg, var(--clay-orange) 0%, var(--agree) 100%);
	/* 読み込み直後に左から伸びる。値が読めることを邪魔しない速さで */
	animation: reason-bar-grow 640ms var(--ease-soft) both;
}

@keyframes reason-bar-grow {
	from { width: 0; }
}

.pair-page__reasons-count {
	color: var(--ink-soft);
	font-size: var(--text-sm);
	white-space: nowrap;
}

.pair-page__reasons-count strong {
	color: var(--ink);
	font-size: var(--text-base);
}

/* 「この手がかりは発見者が言い出した」と分かる印 */
.pair-page__reasons-origin {
	padding: 2px var(--space-2);
	border-radius: var(--radius-pill);
	background: var(--clay-yellow);
	color: var(--ink);
	font-size: var(--text-xs);
	font-weight: 700;
	white-space: nowrap;
}

/* --- あとから手がかりを足す(パケットR2-b)--- */

.pair-page__reasons-add {
	margin-top: var(--space-5);
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--paper-deep);
}

.pair-page__reasons-add[hidden] {
	display: none;
}

.pair-page__reasons-add-lead {
	margin: 0 0 var(--space-3);
	font-weight: 700;
}

.pair-page__reasons-picker {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.pair-page__reasons-toggle {
	border: 0;
	cursor: pointer;
	font: inherit;
	/* 押していないものは沈める。押した瞬間に立ち上がって見えるように */
	opacity: 0.62;
	filter: saturate(0.55);
	transition: opacity 160ms linear, filter 160ms linear, scale 200ms var(--ease-spring);
}

.pair-page__reasons-toggle:hover {
	opacity: 0.85;
}

.pair-page__reasons-toggle[aria-pressed="true"] {
	opacity: 1;
	filter: none;
	box-shadow: var(--shadow-clay);
}

.pair-page__reasons-toggle:active {
	scale: 0.94;
}

.pair-page__reasons-toggle:focus-visible {
	outline: 3px solid var(--action);
	outline-offset: 2px;
}

.pair-page__reasons-status {
	min-height: 1.4em;
	margin: var(--space-3) 0 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

/* まだ「わかる!」を押していない人への一言 */
.pair-page__reasons-invite {
	margin: var(--space-4) 0 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--paper-deep);
	color: var(--ink-soft);
	font-size: var(--text-sm);
	line-height: 1.9;
}

.pair-page__reasons-invite[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.pair-page__reasons-bar::after,
	.pair-page__reasons-toggle {
		animation: none;
		transition: none;
	}
}

/* ============================================================
   似てる手がかりの面 /clue/(パケットR2-c)
   ============================================================
   /mood/ が「どう聴こえたか」から入る面なのに対して、こちらは
   「どこがそうなのか」から入る面。意匠は揃えつつ、見出しの言葉で
   役割を分ける(同じ体裁の使い回しに見せない)。
   ============================================================ */

.clue-hub__list {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.clue-hub__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--paper);
	box-shadow: var(--shadow-clay);
	text-decoration: none;
	transition: scale 180ms var(--ease-spring), box-shadow 180ms var(--ease-soft);
}

.clue-hub__item:hover,
.clue-hub__item:focus-visible {
	scale: 1.015;
	box-shadow: var(--shadow-clay-hover);
}

.clue-hub__go {
	color: var(--ink-faint);
	font-size: 1.2rem;
	transition: translate 180ms var(--ease-spring);
}

.clue-hub__item:hover .clue-hub__go {
	translate: 4px 0;
}

.clue-page__hero {
	font-size: var(--text-xl);
	margin: var(--space-2) 0 var(--space-3);
}

.clue-page__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.clue-page__cross {
	margin: var(--space-4) 0 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

@media (prefers-reduced-motion: reduce) {
	.clue-hub__item,
	.clue-hub__go {
		transition: none;
	}
}

/* ============================================================
   投稿の下書き(パケットP2-d)
   ============================================================ */

/* /post/ の上に出る「書きかけを戻しました」 */
.post-draft {
	display: grid;
	gap: var(--space-2);
	justify-items: start;
	margin-bottom: var(--space-4);
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--clay-yellow);
	animation: post-draft-in 320ms var(--ease-spring) both;
}

@keyframes post-draft-in {
	from { opacity: 0; translate: 0 -8px; }
	to { opacity: 1; translate: 0 0; }
}

.post-draft__text {
	margin: 0;
}

.post-draft__when,
.post-draft__todo {
	margin: 0;
	color: color-mix(in srgb, var(--ink) 76%, transparent);
	font-size: var(--text-xs);
	line-height: 1.7;
}

/* 圏外画面の中の下書き */
.offline-draft {
	display: grid;
	gap: var(--space-3);
}

.offline-draft[hidden] {
	display: none;
}

.offline-draft__lead {
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
	line-height: 1.9;
}

.offline-draft__field {
	display: grid;
	gap: var(--space-2);
	font-size: var(--text-sm);
}

.offline-draft__status {
	min-height: 1.3em;
	margin: 0;
	color: var(--ink-faint);
	font-size: var(--text-xs);
}

.offline-draft__actions {
	display: flex;
	justify-content: flex-end;
}

/* ============================================================
   モバイル(このファイルの最後に置くこと)
   ============================================================
   【なぜ末尾なのか】このリポジトリではメディアクエリを基本ルールより
   前に書いてしまい、同詳細度で後勝ちに負けて丸ごと死んでいた事故がある
   (共鳴弦のモバイル対応が1ヶ月効いていなかった)。追記するときは
   必ずこのブロックの中か、この後ろに書く。
   ============================================================ */


/* パケットM2-1: 曲の探し方のひとこと。
   有名な曲ほど同名の録音が多く(実データで「キラキラ」は125件)、曲名だけでは
   探している版に辿り着けない。アーティスト名を足せることを、探す前に伝える。 */
.niteru-song-picker__hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  line-height: 1.5;
}

@media (max-width: 640px) {
	.pair-comments__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.pair-comments__submit {
		width: 100%;
	}

	/* 指で押せる大きさを確保する(チップは小さすぎると誤爆する) */
	.pair-comments__chip {
		min-height: 40px;
		display: inline-flex;
		align-items: center;
	}

	.pair-comments__delete,
	.pair-comments__report {
		min-height: 32px;
	}

	/* 取り返しのつかない選択なので、狭い画面では特に押し間違えさせない */
	.pair-comments__confirm-yes,
	.pair-comments__confirm-no,
	.pair-comments__report-choice,
	.pair-comments__report-cancel {
		min-height: 44px;
	}

	/* パケットZ1: フォローの窓は画面幅いっぱいに寄せる */
	.profile-follow__menu,
	.profile-follow__confirm {
		min-width: min(20rem, calc(100vw - var(--space-6)));
	}

	.profile-follow__menu-item,
	.profile-follow__confirm-yes,
	.profile-follow__confirm-no {
		min-height: 44px;
	}

	/* パケットY1: 入れ子が深くならないので、狭い画面でも本文幅が保てる。
	   インデントだけ詰めて、糸の位置もそれに合わせる。 */
	.pair-comments__item--reply {
		margin-inline-start: var(--space-4);
	}

	.pair-comments__item--reply::after {
		inset-inline-start: calc(var(--space-4) * -1 + var(--space-1));
	}

	.pair-comments__reply-form,
	.pair-comments__more {
		margin-inline-start: var(--space-4);
	}

	/* Y2: ピルは小さくなったが、指で押せる高さは確保する */
	.pair-comments__reaction,
	.pair-comments__react-add,
	.pair-comments__reply-btn,
	.pair-comments__more {
		min-height: 36px;
	}

	.pair-comments__react-choice {
		min-height: 44px;
	}

	.pair-comments__item {
		padding-inline: var(--space-4) var(--space-3);
		padding-inline-start: var(--space-5);
	}

	/* 文字数の表示はリングだけで足りる。狭い画面で本文に重ならないよう畳む */
	.pair-comments__counter {
		inset-inline-end: calc(var(--space-3) + 32px);
		font-size: 0.68rem;
	}

	/* --- /me/follows/(パケットZ1)。390pxで横あふれを出さない --- */
	.follows-person {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"id"
			"meta"
			"actions";
	}

	.follows-person__meta {
		padding-left: 0;
	}

	.follows-person__since {
		margin-left: 0;
	}

	/* 操作は横いっぱいに広げる。片手で押せる位置と大きさを優先する */
	.follows-person__actions {
		margin-top: var(--space-2);
	}

	.follows-person__btn {
		flex: 1 1 0;
		min-height: 44px;
	}

	.follows-person__resolved {
		margin-top: var(--space-2);
	}

	.follows-tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}

	.follows-tabs__tab {
		flex: 0 0 auto;
	}

	/* --- /timeline/(パケットZ1) --- */
	.timeline-item {
		padding-inline-start: var(--space-3);
	}

	/* 狭い画面では帯を2行に折る。名前が切れて誰か分からなくなるより良い */
	.timeline-item__reason {
		flex-wrap: wrap;
	}

	.timeline-item__time {
		margin-inline-start: calc(18px + var(--space-2));
	}

	.timeline-empty__actions .clay-btn {
		flex: 1 1 100%;
	}

	/* --- /me/invites/(パケットW1)。390pxで横あふれを出さない --- */
	.invite-card {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}

	/* 封筒は少し小さく。本文の幅を優先する */
	.invite-card__envelope {
		width: 60px;
		height: 44px;
	}

	.invite-card__body {
		width: 100%;
	}

	.invite-card__code {
		font-size: var(--text-base);
		letter-spacing: 0.1em;
	}

	/* 操作は横いっぱい。片手で押せる位置と大きさを優先する */
	.invite-share__actions .clay-btn,
	.invites-quota__actions .clay-btn {
		flex: 1 1 100%;
		min-height: 44px;
	}

	.invite-share__tones {
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}

	.invite-share__tone {
		flex: 0 0 auto;
		min-height: 40px;
	}

	/* --- /signup/ の招待まわり(パケットW1) --- */
	/* 封筒を上へ、入力欄を下へ。横に並べると入力欄が潰れる */
	.signup-invite {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}

	.signup-invite__envelope {
		grid-row: auto;
	}

	.signup-invite__input {
		width: 100%;
	}

	.signup-route {
		flex-direction: column;
	}

	.waitlist-form .clay-btn {
		min-height: 44px;
	}

	/* --- ミニプロフィール(パケットW1)--- */
	/* 指で押せる高さを確保する。狭い画面では縦に積む */
	.mini-profile__actions {
		flex-direction: column;
	}

	.mini-profile__actions > * {
		min-height: 44px;
	}

	/* --- お題(パケットT2)--- */
	/* 見出しの絵文字が幅を食うので、狭い画面では上に逃がす */
	.theme-hero__title {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}

	.theme-hero__cta {
		flex-direction: column;
		align-items: stretch;
	}

	.theme-hero__post {
		width: 100%;
		min-height: 44px;
	}

	.theme-countdown {
		justify-content: center;
	}

	/* 棚は横スクロールのまま。ページ本体は溢れさせない */
	.theme-past__item {
		min-width: 11rem;
	}

	/* --- お題の告知(パケットT2-c)--- */
	/* 3列は390pxに入らない。絵文字を本文の上に置いて縦に積む */
	.theme-banner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-3);
	}

	.theme-banner__actions {
		justify-items: stretch;
	}

	.theme-banner__actions .clay-btn {
		width: 100%;
		min-height: 44px;
	}

	.theme-banner__go {
		padding: var(--space-2) 0;
	}

	/* --- 預かっている操作(パケットP1-f)--- */
	/* 3列は390pxに入らない。操作は本文の下へ回して横幅いっぱいにする */
	.pending-item {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.pending-item__actions {
		grid-column: 1 / -1;
		justify-content: flex-end;
	}

	.pending-item__actions .clay-btn,
	.pending-item__confirm .clay-btn {
		min-height: 44px;
	}

	.pending-page__bar {
		align-items: stretch;
		flex-direction: column;
	}

	.pending-page__bar .clay-btn {
		width: 100%;
		min-height: 44px;
	}

	/* --- 耳くらべ(パケットP2-c)--- */
	/* 390pxではカードを画面幅いっぱいに。高さは指の届く範囲に収める
	   (下の操作ボタンまでが片手で触れる距離であること) */
	.play-stack {
		width: 100%;
		height: 380px;
	}

	.play-orb__disc {
		width: 76px;
		height: 76px;
	}

	.play-card {
		padding: var(--space-4) var(--space-3);
	}

	.play-controls {
		gap: var(--space-2);
	}

	.play-btn {
		min-width: 58px;
		min-height: 58px;
	}

	.play-btn--agree {
		min-width: 70px;
		min-height: 70px;
	}

	.play-invite {
		grid-template-columns: auto 1fr;
	}

	.play-invite__go {
		display: none;
	}

	/* 圏外画面に生える耳くらべは、枠の中で完結させる */
	.offline-play .play-stack {
		height: 340px;
	}
}