@charset "UTF-8";
/* ============================================================
   VNJ — スキン図鑑 レビュー機能（星5・武器カテゴリ別＋コメント）
   - 一覧カードの★チップ（vnj-skins.css とは別ファイル・同時 enqueue）
   - 詳細ページの集計サマリー / 投稿フォーム（ラジオ星入力）/ レビュー一覧
   既存トークン（--accent / --fg* / --surface / --r-* …）に追従、ダーク対応。
   ============================================================ */

:root {
	--star-on:  #F5B400;
	--star-off: color-mix(in srgb, var(--fg3) 55%, transparent);
}
[data-theme="dark"] {
	--star-on:  #FFC53D;
	--star-off: color-mix(in srgb, var(--fg3) 60%, transparent);
}

/* ---- 共通：塗り星 ---- */
/* flex:none＝重ね星(__fg は width:--p% の flex 箱)の中で星が縮んで下地とズレるのを防ぐ */
.vnj-star { display: block; fill: currentColor; flex: none; }

/* ---- 平均表示の星（下地＋金の重ね幅で小数を表現） ---- */
.vnj-stars { position: relative; display: inline-flex; line-height: 0; white-space: nowrap; vertical-align: middle; }
.vnj-stars__bg { display: inline-flex; gap: 1px; color: var(--star-off); }
.vnj-stars__fg { position: absolute; top: 0; left: 0; width: var(--p, 0%); overflow: hidden; display: inline-flex; gap: 1px; color: var(--star-on); }

/* ============================================================
   一覧カードの★チップ
   ============================================================ */
.vnj-skincard__rating {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: var(--fs-meta);
	font-weight: var(--w-bold);
	color: var(--fg2);
	font-variant-numeric: tabular-nums;
}
.vnj-skincard__rating .vnj-star { color: var(--star-on); }
.vnj-skincard__rating small { font-weight: var(--w-medium); color: var(--fg3); font-size: 0.85em; }
/* カードの「いいね＋星評価」をまとめる右寄せグループ */
.vnj-skincard__stats { display: inline-flex; align-items: center; gap: 8px; flex: none; }
/* 未評価（レビュー0件）は控えめなグレー表示 */
.vnj-skincard__rating.is-none { color: var(--fg3); }
.vnj-skincard__rating.is-none .vnj-star { color: var(--star-off); }
.vnj-skincard__rating.is-none small { font-size: 1em; }

/* ============================================================
   レビューセクション
   ============================================================ */
.vnj-revsec { margin-top: var(--sp-12); }
.vnj-revsec__h {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-h4);
	font-weight: var(--w-bold);
	color: var(--fg1);
}
.vnj-revsec__note { margin: 0 0 var(--sp-4); font-size: var(--fs-small); color: var(--fg3); }

/* ---- 集計サマリー ---- */
.vnj-revsummary {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-5) var(--sp-8);
	align-items: center;
	padding: var(--sp-5) var(--sp-6);
	margin-bottom: var(--sp-8);
	background: var(--surface);
	border: var(--bw) solid var(--border);
	border-radius: var(--r-lg);
}
.vnj-revsummary__big {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 132px;
	padding-right: var(--sp-6);
	border-right: var(--bw) solid var(--border);
}
.vnj-revsummary__num {
	font-size: 44px;
	font-weight: var(--w-black);
	line-height: 1.05;
	color: var(--fg1);
	font-variant-numeric: tabular-nums;
}
.vnj-revsummary__count { font-size: var(--fs-meta); color: var(--fg3); }
.vnj-revsummary__axes { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.vnj-revsummary__empty { grid-column: 1 / -1; margin: 0; color: var(--fg2); font-size: var(--fs-small); text-align: center; }

.vnj-revbar { display: grid; grid-template-columns: 5em 1fr 2.4em; align-items: center; gap: var(--sp-3); }
.vnj-revbar__label { font-size: var(--fs-small); color: var(--fg2); }
.vnj-revbar__track { height: 7px; border-radius: var(--r-pill); background: var(--wash); overflow: hidden; }
.vnj-revbar__fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); }
.vnj-revbar__num { font-size: var(--fs-small); font-weight: var(--w-bold); color: var(--fg1); text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   投稿/編集フォーム
   ============================================================ */
.vnj-revformwrap {
	padding: var(--sp-5) var(--sp-6);
	margin-bottom: var(--sp-8);
	background: var(--surface);
	border: var(--bw) solid var(--border);
	border-radius: var(--r-lg);
}
.vnj-revform__axes { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.vnj-revform__axis {
	display: grid;
	grid-template-columns: 7em auto;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-1) 0;
}
.vnj-revform__axis.is-total { margin-top: var(--sp-1); padding-top: var(--sp-3); border-top: var(--bw) dashed var(--border); }
.vnj-revform__axislabel { font-size: var(--fs-small); font-weight: var(--w-medium); color: var(--fg1); display: inline-flex; align-items: center; gap: var(--sp-2); }
.vnj-revform__req {
	font-style: normal; font-size: 10px; font-weight: var(--w-bold);
	color: var(--accent-on); background: var(--accent);
	padding: 1px 5px; border-radius: var(--r-sm); letter-spacing: .02em;
}

/* ラジオ星入力（DOM は 5→1、row-reverse で見た目 1→5） */
.vnj-starinput { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.vnj-starinput__radio {
	position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.vnj-starinput__star {
	display: inline-flex; cursor: pointer; color: var(--star-off); line-height: 0;
	padding: 1px;
	transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.vnj-starinput__star:active { transform: scale(.9); }
/* 選択済み：そのラジオ以降（=値が小さい側）を点灯 */
.vnj-starinput__radio:checked ~ .vnj-starinput__star { color: var(--star-on); }
/* ホバー中：一旦すべて消灯し、ホバーした星以降だけ点灯。
   点灯ルールを :hover 配下に入れて消灯リセット(0,3,0)・選択(0,3,0)より詳細度を上げる（カーソル追従のズレ防止） */
.vnj-starinput:hover .vnj-starinput__star { color: var(--star-off); }
.vnj-starinput:hover .vnj-starinput__star:hover,
.vnj-starinput:hover .vnj-starinput__star:hover ~ .vnj-starinput__star { color: var(--star-on); }
/* キーボードフォーカス可視化 */
.vnj-starinput__radio:focus-visible + .vnj-starinput__star { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

.vnj-revform__comment,
.vnj-revform__author {
	width: 100%;
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--fg1);
	background: var(--bg);
	border: var(--bw) solid var(--border-strong);
	border-radius: var(--r-md);
	padding: var(--sp-3);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.vnj-revform__comment { resize: vertical; min-height: 72px; margin-bottom: var(--sp-3); }
.vnj-revform__comment:focus,
.vnj-revform__author:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.vnj-revform__foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.vnj-revform__author { flex: 1 1 200px; min-width: 0; }
.vnj-revform__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }

.vnj-revform__submit {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	font-weight: var(--w-bold);
	color: var(--accent-on);
	background: var(--accent);
	border: none;
	border-radius: var(--r-md);
	padding: var(--sp-3) var(--sp-6);
	cursor: pointer;
	transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.vnj-revform__submit:hover { filter: brightness(1.06); }
.vnj-revform__submit:active { transform: translateY(1px); }
.vnj-revform__submit:disabled { opacity: .55; cursor: default; }
.vnj-revform__del {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--fg2);
	background: transparent;
	border: var(--bw) solid var(--border-strong);
	border-radius: var(--r-md);
	padding: var(--sp-3) var(--sp-4);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.vnj-revform__del:hover { color: #c0392b; border-color: #c0392b; }
.vnj-revform__del[hidden] { display: none; }

.vnj-revform__msg { margin: var(--sp-3) 0 0; font-size: var(--fs-small); min-height: 1.2em; }
.vnj-revform__msg.is-ok { color: var(--accent-ink); }
.vnj-revform__msg.is-err { color: #c0392b; }

/* ============================================================
   レビュー一覧
   ============================================================ */
.vnj-revlist { display: flex; flex-direction: column; gap: var(--sp-3); }
.vnj-rev {
	padding: var(--sp-4) var(--sp-5);
	background: var(--surface);
	border: var(--bw) solid var(--border);
	border-radius: var(--r-md);
}
.vnj-rev.is-mine { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.vnj-rev__head { display: flex; align-items: center; gap: var(--sp-3); }
.vnj-rev__avatar {
	flex: none;
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--r-pill);
	font-weight: var(--w-bold);
	font-size: 15px;
	color: #fff;
	background: hsl(var(--h, 210) 45% 48%);
}
[data-theme="dark"] .vnj-rev__avatar { background: hsl(var(--h, 210) 42% 55%); }
.vnj-rev__avatar--anon svg { width: 18px; height: 18px; }
.vnj-rev__meta { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.vnj-rev__name { font-size: var(--fs-small); font-weight: var(--w-bold); color: var(--fg1); display: inline-flex; align-items: baseline; gap: var(--sp-2); }
.vnj-rev__uid { font-family: var(--font-mono); font-size: 10px; font-weight: var(--w-medium); color: var(--fg3); }
.vnj-rev__date { font-size: var(--fs-meta); color: var(--fg3); }
.vnj-rev__score { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; }
.vnj-rev__score b { font-size: var(--fs-small); font-weight: var(--w-bold); color: var(--fg1); font-variant-numeric: tabular-nums; }

.vnj-rev__axes { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); }
.vnj-rev__axis { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-meta); color: var(--fg2); }
.vnj-rev__axislabel { color: var(--fg3); }

.vnj-rev__comment {
	margin: var(--sp-3) 0 0;
	font-size: var(--fs-small);
	line-height: 1.75;
	color: var(--fg1);
	overflow-wrap: anywhere;
}
.vnj-rev__foot { display: flex; justify-content: flex-end; margin-top: var(--sp-2); }
.vnj-rev__report {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: var(--fs-meta); color: var(--fg3);
	background: none; border: none; cursor: pointer; padding: 2px 4px;
	transition: color var(--dur-fast) var(--ease);
}
.vnj-rev__report:hover { color: #c0392b; }
.vnj-rev__report.is-done { color: var(--fg3); cursor: default; }

.vnj-revlist__morewrap { display: flex; justify-content: center; margin-top: var(--sp-4); }
.vnj-revmore {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	font-weight: var(--w-medium);
	color: var(--fg1);
	background: var(--surface);
	border: var(--bw) solid var(--border-strong);
	border-radius: var(--r-pill);
	padding: var(--sp-3) var(--sp-8);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.vnj-revmore:hover { background: var(--wash); border-color: var(--fg2); }
.vnj-revmore.is-loading { opacity: .6; cursor: default; }

/* ============================================================
   モバイル
   ============================================================ */
@media (max-width: 599px) {
	.vnj-revsummary { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-4); }
	.vnj-revsummary__big {
		flex-direction: row; align-items: baseline; justify-content: flex-start;
		gap: var(--sp-3); min-width: 0; padding: 0 0 var(--sp-4); border-right: none;
		border-bottom: var(--bw) solid var(--border); width: 100%;
	}
	.vnj-revsummary__num { font-size: 34px; }
	.vnj-revformwrap { padding: var(--sp-4); }
	.vnj-revform__axis { grid-template-columns: 5.5em auto; gap: var(--sp-2); }
	.vnj-revform__actions { width: 100%; margin-left: 0; }
	.vnj-revform__submit { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.vnj-starinput__star,
	.vnj-revform__submit,
	.vnj-rev__report,
	.vnj-revmore { transition: none; }
}

/* ============================================================
   ★ 案2 DUAL（Solid）— レビューUIを確定デザイン（VALORANT風）に統一
   ・色（赤・ダーク/ブレイズ）は vnj-skins.css のトークン乗せ換えで反映済み。
     ここでは「形＝角カット」「ボタン＝Solid」を .vnj-skins-main 配下に追加。
   ・元に戻すには、この「★ 案2 DUAL」ブロックを削除すればOK。
   ============================================================ */
[data-theme="blaze"] { --star-on: #FFC53D; } /* ブレイズでも星をくっきり金色に */

/* パネル類（集計・フォーム枠・各レビュー）＝角カット */
.vnj-skins-main .vnj-revsummary,
.vnj-skins-main .vnj-revformwrap,
.vnj-skins-main .vnj-rev { border-radius: 0; clip-path: var(--vnj-clip-btn); }

/* 大きな平均点＝Teko で“スコア感”、評価バー＝赤 */
.vnj-skins-main .vnj-revsummary__num { font-family: var(--vnj-ff-num); font-weight: 600; }
.vnj-skins-main .vnj-revbar__fill { background: var(--vnj-red); }

/* 「必須」バッジ＝赤・角あり・英字感 */
.vnj-skins-main .vnj-revform__req {
	background: var(--vnj-red); color: var(--vnj-on); border-radius: 0;
	font-family: var(--vnj-ff-disp); letter-spacing: .06em;
}

/* 入力欄（コメント・ニックネーム）＝角カット、フォーカスでシアン枠 */
.vnj-skins-main .vnj-revform__comment,
.vnj-skins-main .vnj-revform__author {
	border-radius: 0; clip-path: var(--vnj-clip-btn);
	background: var(--vnj-bg); border-color: var(--vnj-line-strong);
}
.vnj-skins-main .vnj-revform__comment:focus,
.vnj-skins-main .vnj-revform__author:focus {
	border-color: var(--vnj-cyan); box-shadow: none; outline: none;
}

/* 投稿ボタン＝赤ソリッド・角カット・英字大文字（主操作と統一） */
.vnj-skins-main .vnj-revform__submit {
	background: var(--vnj-red); color: var(--vnj-on); border: 1px solid var(--vnj-red);
	border-radius: 0; clip-path: var(--vnj-clip-btn);
	font-family: var(--vnj-ff-disp); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.vnj-skins-main .vnj-revform__submit:hover { filter: brightness(1.08); }

/* 削除ボタン＝パネル＋枠・角カット。ホバーで赤（破壊操作の注意色） */
.vnj-skins-main .vnj-revform__del {
	background: var(--vnj-panel-2); color: var(--vnj-dim);
	border: 1px solid var(--vnj-line-strong); border-radius: 0; clip-path: var(--vnj-clip-btn);
	font-family: var(--vnj-ff-disp); font-weight: 700; letter-spacing: .04em;
}
.vnj-skins-main .vnj-revform__del:hover { color: var(--vnj-red); border-color: var(--vnj-red); }

/* 「レビューをもっと見る」＝パネル＋枠・角カット。ホバーでシアン（サブ操作と統一） */
.vnj-skins-main .vnj-revmore {
	background: var(--vnj-panel-2); color: var(--vnj-text);
	border: 1px solid var(--vnj-line-strong); border-radius: 0; clip-path: var(--vnj-clip-btn);
	font-family: var(--vnj-ff-disp); font-weight: 700; letter-spacing: .06em;
}
.vnj-skins-main .vnj-revmore:hover { background: var(--vnj-panel-2); border-color: var(--vnj-cyan); color: var(--vnj-cyan); }

/* カード内：評価値を「いいね数(11px)」と同じ大きさに統一（高さも揃う）。(件数)は控えめのまま */
.vnj-skins-main .vnj-skincard__rating { font-size: 11px; }