/* =========================================================
 * 戦記ガチャ フロント
 * すべて .vg-scope 配下。!important は使わない。
 * SWELL の .post_content 系(詳細度 0,1,1)より強くなるよう、
 * 要素にはクラスを付けて 0,2,x 以上で指定している。
 * ======================================================= */

.vg-scope {
	--vg-ink: #14161c;
	--vg-panel: #1b1e25;
	--vg-panel-2: #22262e;
	--vg-rule: #343944;
	--vg-parch: #d8cfc0;
	--vg-dim: #9d9588;
	--vg-blood: #8c2f2a;
	--vg-gold: #b98a3c;
	--vg-gold-l: #d4b06a;
	--vg-arcane: #7fa8d8;
	--vg-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
	--vg-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "YuGothic", sans-serif;
	--vg-page: #181a20;
	--vg-page-rule: #2c3038;
	box-sizing: border-box;
	max-width: 880px;
	margin: 0 auto 32px;
	padding: 22px 20px 24px;
	color: var(--vg-parch);
	background: var(--vg-page);
	border: 1px solid var(--vg-page-rule);
	font-family: var(--vg-sans);
	font-size: 15px;
	line-height: 1.75;
}
.vg-scope *,
.vg-scope *::before,
.vg-scope *::after { box-sizing: border-box; }

/* ---- 文字 ---- */
.vg-scope .vg-kicker { margin: 0; font-size: 12px; color: var(--vg-dim); font-family: var(--vg-serif); letter-spacing: .06em; }
.vg-scope .vg-title { margin: 2px 0 10px; font-family: var(--vg-serif); font-size: 24px; font-weight: 600; letter-spacing: .14em; line-height: 1.4; color: var(--vg-parch); }
.vg-scope .vg-subtitle { margin: 0 0 10px; font-family: var(--vg-serif); font-size: 17px; letter-spacing: .1em; color: var(--vg-parch); }
.vg-scope .vg-note { margin: 6px 0 10px; font-size: 13px; color: var(--vg-dim); }
.vg-scope .vg-inline-msg { margin: 8px 0 0; font-size: 13px; color: var(--vg-gold-l); min-height: 1.2em; }
.vg-scope .vg-msg { margin: 10px 0 0; min-height: 1.4em; font-size: 14px; color: #e0a39a; text-align: center; }
.vg-scope a { color: var(--vg-gold-l); }

/* ---- ボタン ---- */
.vg-scope .vg-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	min-height: 54px;
	padding: 8px 20px;
	font-family: var(--vg-serif);
	color: var(--vg-parch);
	background: var(--vg-panel-2);
	border: 1px solid #5a5f6b;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.vg-scope .vg-btn:hover { border-color: var(--vg-gold); }
.vg-scope .vg-btn-strong { color: #f3ebdc; background: var(--vg-blood); border-color: #b0453e; }
.vg-scope .vg-btn-strong:hover { background: #9f3831; border-color: var(--vg-gold-l); }
.vg-scope .vg-btn[disabled] { opacity: .45; cursor: not-allowed; }
.vg-scope .vg-btn-main { font-size: 17px; letter-spacing: .12em; }
.vg-scope .vg-btn-sub { font-size: 11px; font-family: var(--vg-sans); opacity: .85; }
.vg-scope .vg-btn-ghost {
	padding: 6px 14px;
	font-size: 13px;
	font-family: var(--vg-sans);
	color: var(--vg-parch);
	background: transparent;
	border: 1px solid var(--vg-rule);
	border-radius: 2px;
	cursor: pointer;
}
.vg-scope .vg-btn-ghost:hover { border-color: var(--vg-gold); }
.vg-scope .vg-btn-ghost[disabled] { opacity: .5; cursor: default; }
.vg-scope button:focus-visible,
.vg-scope select:focus-visible,
.vg-scope summary:focus-visible,
.vg-scope a:focus-visible { outline: 2px solid var(--vg-arcane); outline-offset: 2px; }

/* ---- 財布 ---- */
.vg-scope .vg-wallet { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 4px 0 6px; font-size: 13px; color: var(--vg-dim); }
.vg-scope .vg-wallet-item strong { margin: 0 3px 0 6px; font-size: 20px; font-weight: 500; font-family: var(--vg-serif); color: var(--vg-parch); font-feature-settings: "tnum"; }
.vg-scope .vg-pity { margin: 0; font-size: 13px; color: var(--vg-dim); }
.vg-scope .vg-pity strong { font-size: 17px; color: var(--vg-gold-l); font-weight: 500; }

/* ---- レア度タグ ---- */
.vg-scope .vg-rtag { display: inline-block; padding: 0 7px; font-size: 11px; line-height: 1.8; letter-spacing: .04em; border: 1px solid var(--vg-frame, #6b7280); color: var(--vg-parch); white-space: nowrap; }

/* レア度ごとの枠と下地(色だけに頼らず、必ず文字ラベルと併記する) */
.vg-scope .vg-r-N { --vg-frame: #6b7280; --vg-bg: #1a1c22; }
.vg-scope .vg-r-R { --vg-frame: #8a6a45; --vg-bg: #1c1a16; }
.vg-scope .vg-r-SR { --vg-frame: #b9c2cc; --vg-bg: #1a1d24; }
.vg-scope .vg-r-SSR { --vg-frame: #b98a3c; --vg-bg: #1f1a12; }
.vg-scope .vg-r-LR { --vg-frame: #d4b06a; --vg-bg: #14161c; }

/* =========================================================
 * ガチャ
 * ======================================================= */
.vg-scope .vg-gacha-head { border-bottom: 1px solid var(--vg-rule); padding-bottom: 12px; }
.vg-scope .vg-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	margin: 16px 0;
	padding: 18px 10px;
	background: var(--vg-ink);
	border: 1px solid var(--vg-rule);
}
.vg-scope .vg-stage-idle { max-width: 30em; text-align: center; font-family: var(--vg-serif); color: var(--vg-dim); letter-spacing: .06em; }
.vg-scope .vg-stage-idle p { margin: 0; }
.vg-scope .vg-reveal { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; width: 100%; }
.vg-scope .vg-reveal-wait { margin: 0; font-family: var(--vg-serif); color: var(--vg-dim); letter-spacing: .08em; }
.vg-scope .vg-reveal-hint { margin: 0; font-size: 12px; color: var(--vg-dim); }
.vg-scope .vg-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }

/* 結果カード */
.vg-scope .vg-rcard {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 150px;
	background: var(--vg-bg);
	border: 1px solid var(--vg-frame);
	box-shadow: inset 0 0 0 3px var(--vg-bg), inset 0 0 0 4px var(--vg-frame);
	padding: 8px;
}
.vg-scope .vg-rcard.is-big { max-width: 220px; opacity: 0; }
.vg-scope .vg-rcard-art img { display: block; width: 100%; height: auto; margin: 0; }
.vg-scope .vg-rcard-body { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; text-align: center; }
.vg-scope .vg-rcard-rarity { font-size: 11px; color: var(--vg-frame); letter-spacing: .06em; }
.vg-scope .vg-rcard-name { font-family: var(--vg-serif); font-size: 13px; line-height: 1.45; color: var(--vg-parch); }
.vg-scope .vg-rcard.is-big .vg-rcard-name { font-size: 16px; }
.vg-scope .vg-rcard-pt { font-size: 12px; color: var(--vg-gold-l); font-feature-settings: "tnum"; }
.vg-scope .vg-new { display: inline-block; font-size: 11px; color: var(--vg-arcane); letter-spacing: .06em; }
.vg-scope .vg-dup { display: inline-block; font-size: 11px; color: var(--vg-dim); }
.vg-scope .vg-flag { display: inline-block; font-size: 10px; color: #e0a39a; }

/* 黒金: 羊皮紙の欠けた角 */
.vg-scope .vg-rcard.vg-r-LR,
.vg-scope .vg-card.vg-r-LR.is-owned {
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
	box-shadow: inset 0 0 0 2px #000, inset 0 0 0 3px var(--vg-frame), inset 0 0 0 5px #000, inset 0 0 0 6px #7a6538;
}

/* 墨がにじむように現れる(1回の演出だけに動きを集める) */
@keyframes vg-ink {
	0% { opacity: 0; filter: blur(10px) contrast(1.8) brightness(.4); transform: scale(.97); }
	55% { opacity: 1; filter: blur(2px) contrast(1.2) brightness(.8); }
	100% { opacity: 1; filter: none; transform: none; }
}
.vg-scope .vg-rcard.is-big.is-in { animation: vg-ink .7s ease-out forwards; }
.vg-scope .vg-rcard.is-big.is-in.vg-r-SSR,
.vg-scope .vg-rcard.is-big.is-in.vg-r-LR { animation-duration: 1.4s; }

.vg-scope .vg-results {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
}
.vg-scope .vg-results .vg-rcard { max-width: none; }
.vg-scope .vg-results .vg-rcard.is-big { max-width: 240px; margin: 0 auto; opacity: 1; grid-column: 1 / -1; }
.vg-scope .vg-summary { margin-top: 14px; text-align: center; font-size: 14px; }
.vg-scope .vg-summary p { margin: 2px 0; }
.vg-scope .vg-summary .vg-sum-main { font-family: var(--vg-serif); font-size: 18px; color: var(--vg-gold-l); }
.vg-scope .vg-summary .vg-sum-unlock { color: var(--vg-arcane); }

/* SSR 以上: 画面全体にセピアの幕(スコープ外に置く要素) */
.vg-sepia {
	position: fixed;
	inset: 0;
	z-index: 99998;
	pointer-events: none;
	background: rgba(112, 80, 40, .2);
	-webkit-backdrop-filter: sepia(.85) brightness(.85);
	backdrop-filter: sepia(.85) brightness(.85);
	opacity: 0;
	transition: opacity .45s ease;
}
.vg-sepia.is-on { opacity: 1; }

/* ---- 提供割合 ---- */
.vg-scope .vg-rates { margin-top: 18px; border-top: 1px solid var(--vg-rule); padding-top: 10px; }
.vg-scope .vg-rates-sum { cursor: pointer; font-size: 13px; color: var(--vg-dim); padding: 4px 0; }
.vg-scope .vg-rates-body { padding-top: 8px; font-size: 13px; }
.vg-scope .vg-rates-notes p,
.vg-scope .vg-rates-body .vg-rates-list { margin: 6px 0; color: var(--vg-dim); line-height: 1.7; }
.vg-scope .vg-rates-list .vg-rtag { margin-right: 6px; }

/* ---- 表 ---- */
.vg-scope .vg-table-wrap { overflow-x: auto; }
.vg-scope .vg-table { width: 100%; margin: 0; border-collapse: collapse; border: 0; font-size: 13px; }
.vg-scope .vg-table th,
.vg-scope .vg-table td { padding: 7px 8px; border: 0; border-bottom: 1px solid var(--vg-rule); background: transparent; color: var(--vg-parch); text-align: left; font-weight: 400; }
.vg-scope .vg-table thead th { color: var(--vg-dim); font-size: 12px; }
.vg-scope .vg-table .vg-num { text-align: right; white-space: nowrap; color: var(--vg-gold-l); }
.vg-scope .vg-hist td:first-child,
.vg-scope .vg-hist td:nth-child(3) { white-space: nowrap; color: var(--vg-dim); font-size: 12px; }

/* =========================================================
 * 図鑑
 * ======================================================= */
.vg-scope .vg-zukan-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.vg-scope .vg-profile-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--vg-dim); }
.vg-scope .vg-title-badge { padding: 1px 10px; font-family: var(--vg-serif); color: var(--vg-gold-l); border: 1px solid var(--vg-gold); }
.vg-scope .vg-zukan-rate { text-align: right; }
.vg-scope .vg-rate-num { margin: 0; font-family: var(--vg-serif); line-height: 1; }
.vg-scope .vg-rate-num strong { font-size: 48px; font-weight: 500; color: var(--vg-parch); font-feature-settings: "tnum"; }
.vg-scope .vg-rate-num span { font-size: 18px; color: var(--vg-dim); }
.vg-scope .vg-rate-label { margin: 4px 0 0; font-size: 12px; color: var(--vg-dim); }

.vg-scope .vg-rbars { display: grid; gap: 6px; margin: 16px 0 12px; }
.vg-scope .vg-rbar { display: grid; grid-template-columns: 6.5em 1fr 4em 4.5em; align-items: center; gap: 10px; font-size: 12px; }
.vg-scope .vg-rbar-label { color: var(--vg-parch); }
.vg-scope .vg-rbar-track { height: 4px; background: var(--vg-ink); }
.vg-scope .vg-rbar-fill { display: block; height: 100%; background: var(--vg-frame); }
.vg-scope .vg-rbar-count { text-align: right; font-feature-settings: "tnum"; }
.vg-scope .vg-rbar-hint { color: var(--vg-dim); }

.vg-scope .vg-milestones { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.vg-scope .vg-ms { display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 10px; font-size: 12px; color: var(--vg-dim); border: 1px dashed var(--vg-rule); }
.vg-scope .vg-ms.is-done { color: var(--vg-parch); border-style: solid; border-color: var(--vg-gold); }
.vg-scope .vg-ms-need { font-feature-settings: "tnum"; }
.vg-scope .vg-ms-name { font-family: var(--vg-serif); }

.vg-scope .vg-profile-form,
.vg-scope .vg-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 10px 0 14px; }
.vg-scope .vg-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--vg-dim); }
.vg-scope .vg-field select {
	min-height: 36px;
	padding: 4px 8px;
	font-size: 14px;
	color: var(--vg-parch);
	background: var(--vg-ink);
	border: 1px solid var(--vg-rule);
	border-radius: 2px;
}
.vg-scope .vg-tabs { display: flex; border: 1px solid var(--vg-rule); }
.vg-scope .vg-tab {
	min-height: 36px;
	padding: 4px 14px;
	font-size: 13px;
	font-family: var(--vg-sans);
	color: var(--vg-dim);
	background: transparent;
	border: 0;
	border-right: 1px solid var(--vg-rule);
	cursor: pointer;
}
.vg-scope .vg-tab:last-child { border-right: 0; }
.vg-scope .vg-tab[aria-selected="true"] { color: var(--vg-parch); background: var(--vg-panel-2); box-shadow: inset 0 -2px 0 var(--vg-blood); }

.vg-scope .vg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.vg-scope .vg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 6px 6px 8px;
	font: inherit;
	text-align: center;
	color: var(--vg-parch);
	background: var(--vg-bg);
	border: 1px solid var(--vg-frame);
	border-radius: 0;
	box-shadow: inset 0 0 0 2px var(--vg-bg), inset 0 0 0 3px var(--vg-frame);
}
.vg-scope button.vg-card { cursor: pointer; }
.vg-scope button.vg-card:hover { border-color: var(--vg-parch); }
.vg-scope .vg-card.is-unknown { border-style: dashed; box-shadow: none; opacity: .7; }
.vg-scope .vg-card-art img { display: block; width: 100%; height: auto; margin: 0; }
.vg-scope .vg-card-no { display: block; font-size: 10px; color: var(--vg-dim); font-feature-settings: "tnum"; letter-spacing: .04em; }
.vg-scope .vg-card-name { display: block; min-height: 2.9em; font-family: var(--vg-serif); font-size: 12px; line-height: 1.45; }
.vg-scope .vg-card-rarity { display: block; font-size: 10px; color: var(--vg-frame); }
.vg-scope .vg-card-count { position: absolute; top: 6px; right: 8px; font-size: 11px; color: var(--vg-parch); background: var(--vg-ink); padding: 0 4px; }

/* 詳細モーダル */
.vg-scope .vg-modal { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: center; justify-content: center; padding: 16px; }
.vg-scope .vg-modal-back { position: absolute; inset: 0; background: rgba(8, 9, 12, .78); }
.vg-scope .vg-modal-box {
	position: relative;
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 20px;
	width: 100%;
	max-width: 640px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 22px;
	color: var(--vg-parch);
	background: var(--vg-panel);
	border: 1px solid var(--vg-gold);
}
.vg-scope .vg-modal-x { position: absolute; top: 6px; right: 8px; width: 36px; height: 36px; font-size: 20px; color: var(--vg-dim); background: transparent; border: 0; cursor: pointer; }
.vg-scope .vg-modal-art { background: var(--vg-bg, #1a1c22); border: 1px solid var(--vg-frame, #6b7280); box-shadow: inset 0 0 0 3px var(--vg-bg, #1a1c22), inset 0 0 0 4px var(--vg-frame, #6b7280); padding: 8px; align-self: start; }
.vg-scope .vg-modal-art img { display: block; width: 100%; height: auto; margin: 0; }
.vg-scope .vg-modal-no { margin: 0; font-size: 12px; color: var(--vg-dim); }
.vg-scope .vg-modal-name { margin: 2px 0 6px; font-family: var(--vg-serif); font-size: 21px; letter-spacing: .06em; line-height: 1.4; }
.vg-scope .vg-modal-meta { margin: 0 0 10px; font-size: 12px; color: var(--vg-gold-l); }
.vg-scope .vg-modal-desc { margin: 0 0 12px; font-family: var(--vg-serif); font-size: 14px; line-height: 1.95; max-width: 30em; }
.vg-scope .vg-modal-got { margin: 0; font-size: 12px; color: var(--vg-dim); }

/* 図鑑スキン(レア度コンプで解放) */
.vg-scope.vg-skin-iron { --vg-page: #1a1b1e; --vg-page-rule: #6b5a4a; }
.vg-scope.vg-skin-bronze { --vg-page: #1d1a15; --vg-page-rule: #8a6a45; }
.vg-scope.vg-skin-silver { --vg-page: #1a1d23; --vg-page-rule: #b9c2cc; }
.vg-scope.vg-skin-gold { --vg-page: #1e1a12; --vg-page-rule: #b98a3c; }
.vg-scope.vg-skin-blackgold { --vg-page: #0f1013; --vg-page-rule: #d4b06a; box-shadow: inset 0 0 0 3px #0f1013, inset 0 0 0 4px #7a6538; }

/* =========================================================
 * ログインボーナス
 * ======================================================= */
.vg-scope .vg-bonus-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.vg-scope .vg-streak { margin: 0; font-size: 13px; color: var(--vg-dim); }
.vg-scope .vg-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 8px 0 14px; }
.vg-scope .vg-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; text-align: center; background: var(--vg-ink); border: 1px solid var(--vg-rule); }
.vg-scope .vg-day-n { font-family: var(--vg-serif); font-size: 13px; }
.vg-scope .vg-day-rw { font-size: 10px; line-height: 1.5; color: var(--vg-dim); word-break: keep-all; }
.vg-scope .vg-day.is-done { border-color: #5c4a2c; color: var(--vg-dim); }
.vg-scope .vg-day.is-done .vg-day-n::after { content: "\2713"; margin-left: 3px; color: var(--vg-gold); }
.vg-scope .vg-day.is-today { border-color: var(--vg-gold); box-shadow: inset 0 0 0 1px var(--vg-gold); color: var(--vg-parch); }
.vg-scope .vg-bonus-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* =========================================================
 * 交換所・マイページ
 * ======================================================= */
.vg-scope .vg-ex-have { margin: 0 0 10px; font-size: 13px; color: var(--vg-dim); }
.vg-scope .vg-ex-have strong { font-size: 18px; font-weight: 500; color: var(--vg-parch); margin-left: 6px; }
.vg-scope .vg-ex-list { display: grid; gap: 6px; max-height: 480px; overflow-y: auto; padding-right: 4px; }
.vg-scope .vg-ex-item { display: grid; grid-template-columns: 40px 1fr auto auto auto; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; background: var(--vg-bg); border-left: 3px solid var(--vg-frame); font-size: 13px; }
.vg-scope .vg-ex-item.is-owned { opacity: .55; }
.vg-scope .vg-ex-art img { display: block; width: 40px; height: auto; margin: 0; }
.vg-scope .vg-ex-name { font-family: var(--vg-serif); }
.vg-scope .vg-ex-name .vg-card-no { display: inline; margin-right: 8px; }
.vg-scope .vg-ex-rarity { font-size: 11px; color: var(--vg-frame); white-space: nowrap; }
.vg-scope .vg-ex-cost { font-size: 12px; color: var(--vg-gold-l); white-space: nowrap; }

.vg-scope.vg-mypage { background: transparent; border: 0; padding: 0; }
.vg-scope .vg-panel,
.vg-scope.vg-mypage .vg-scope { margin: 0 0 16px; padding: 18px; background: var(--vg-page); border: 1px solid var(--vg-page-rule); max-width: none; }

/* =========================================================
 * 未受け取りバッジ(画面の隅に小さく)
 * ======================================================= */
.vg-scope.vg-badge {
	position: fixed;
	left: 12px;
	bottom: 12px;
	z-index: 9990;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100vw - 24px);
	margin: 0;
	padding: 6px 6px 6px 12px;
	font-size: 13px;
	line-height: 1.4;
	background: var(--vg-panel);
	border: 1px solid var(--vg-gold);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.vg-scope .vg-badge-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 2px; font: inherit; color: var(--vg-parch); background: transparent; border: 0; cursor: pointer; }
.vg-scope .vg-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vg-blood); box-shadow: 0 0 0 2px #3a1c1a; }
.vg-scope .vg-badge-msg:empty { display: none; }
.vg-scope .vg-badge-link { font-size: 13px; }
.vg-scope .vg-badge-close { width: 28px; height: 28px; font-size: 16px; color: var(--vg-dim); background: transparent; border: 0; cursor: pointer; }

/* =========================================================
 * 狭い画面
 * ======================================================= */
@media (max-width: 600px) {
	.vg-scope { padding: 16px 12px 18px; }
	.vg-scope .vg-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vg-scope .vg-btn { min-width: 0; flex: 1 1 40%; }
	.vg-scope .vg-rbar { grid-template-columns: 5.5em 1fr 3.5em; }
	.vg-scope .vg-rbar-hint { display: none; }
	.vg-scope .vg-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.vg-scope .vg-modal-box { grid-template-columns: 1fr; }
	.vg-scope .vg-modal-art { max-width: 180px; margin: 0 auto; }
	.vg-scope .vg-ex-item { grid-template-columns: 40px 1fr auto; }
	.vg-scope .vg-ex-rarity,
	.vg-scope .vg-ex-cost { grid-column: 2; }
	.vg-scope .vg-rate-num strong { font-size: 38px; }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
	.vg-scope .vg-rcard.is-big,
	.vg-scope .vg-rcard.is-big.is-in { animation: none; opacity: 1; }
	.vg-sepia { display: none; }
	.vg-scope .vg-btn { transition: none; }
}

/* hidden 属性は常に優先(ファイル末尾に置く) */
.vg-scope [hidden],
.vg-scope[hidden] { display: none; }