/*
 * 新しい遊び（ラッシュ・速打ち・ふたりで早押し）。inc/games/zone.php・template-parts/games/zone-page.php・assets/js/games-zone*.js
 *
 * タイトル画面はほかのゲームと同じ .gt-*（games-brand.css）。ここは、この3つだけのもの:
 * 画面の中の動き（.gz-attract）・舞台（.gz-stage）・カード・端末・向かい合わせ・結果・ゲームセンターの札（.ga-zone）。
 * 動きは transform と opacity だけ（GPU の合成で動く）。動きを減らす設定では止めて、最後の形を出す。
 * ルートの文字サイズは 62.5%（1rem = 10px）なので px で書く。頭文字 gz- はほかのプラグイン（gs- gp- gh- gd-）とぶつからない。
 */

.gz {
	--gz-ink: #1d1813;
	--gz-text: #2b2620;
	--gz-muted: #6f6052;
	--gz-line: #e8e1d4;
	--gz-paper: #fff;
	--gz-ground: #fff4e1;
	--gz-ok: #1e7a45;
	--gz-ng: #c0341d;
	max-width: 1080px;
	margin: 0 auto;
	font: 400 16px/1.75 system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
	color: var(--gz-text);
}
.gz *,
.gz *::before,
.gz *::after {
	box-sizing: border-box;
}
.gz :where(h2, h3, p, ol, ul, fieldset, legend) {
	margin: 0;
	padding: 0;
}
.gz :where(ol, ul) {
	list-style: none;
}
.gz [hidden] {
	display: none !important;
}
/* ゲームセンターの地（games-arcade.css は読まないので、ここで） */
.gz-page {
	background: var(--ga-ground, #fff4e1);
	color: var(--ga-text, #2b2620);
	padding: 18px 16px 110px;
}
.gz-h {
	font: 700 clamp(20px, 2.6vw, 26px)/1.35 var(--ga-brandfont);
	color: var(--gz-ink);
}

/* ---------- タイトル画面の足し ---------- */

.gz-mines {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.gz-seg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	border: 0;
	margin-top: 4px !important;
}
.gz-seg legend {
	float: left;
	margin-right: 8px !important;
	font-size: 13px;
	font-weight: 700;
	color: var(--gz-muted);
}
.gz-seg label {
	position: relative;
	cursor: pointer;
}
.gz-seg input {
	position: absolute;
	opacity: 0;
	inset: 0;
	cursor: pointer;
}
.gz-seg span {
	display: grid;
	gap: 0;
	min-height: 44px;
	align-content: center;
	padding: 6px 16px;
	border: 2px solid var(--gz-ink);
	border-radius: 14px;
	background: var(--gz-paper);
	line-height: 1.25;
	transition: transform 0.15s var(--ga-pop), background-color 0.15s ease;
}
.gz-seg b {
	font: 700 15px/1.3 var(--ga-brandfont);
	color: var(--gz-ink);
}
.gz-seg small {
	font-size: 11px;
	color: var(--gz-muted);
}
.gz-seg input:checked + span {
	background: var(--gz-ink);
	transform: translateY(-2px);
	box-shadow: 0 3px 0 var(--ga-c);
}
.gz-seg input:checked + span :is(b, small) {
	color: #fff;
}
.gz-seg input:focus-visible + span {
	outline: 3px solid var(--ga-accent);
	outline-offset: 2px;
}
.gz-seg input:disabled + span {
	opacity: 0.45;
}

/* ---------- 画面の中の動き（タイトル・ゲームセンターの札） ---------- */

.gz-attract {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 150px;
	pointer-events: none;
}
/* ラッシュ: 3枚のカードが扇に開いて、真ん中がめくれる・導火線 */
.gz-at-card {
	position: absolute;
	display: grid;
	place-items: center;
	width: 64px;
	height: 88px;
	border: 3px solid var(--gz-c, #ff5b00);
	border-radius: 12px;
	background: #fff4e1;
	box-shadow: 0 0 22px rgba(255, 91, 0, 0.45);
	font: 400 30px/1 var(--ga-num);
	color: #1d1813;
	will-change: transform;
	backface-visibility: hidden;
}
.gz-at-card.is-a {
	animation: gz-fan-a 3.6s var(--ga-out) infinite;
}
.gz-at-card.is-c {
	animation: gz-fan-c 3.6s var(--ga-out) infinite;
}
.gz-at-card.is-b {
	z-index: 2;
	background: #ff5b00;
	color: #fff;
	animation: gz-flip 3.6s var(--ga-out) infinite;
}
@keyframes gz-fan-a {
	0%, 12% { transform: translate3d(0, 0, 0) rotate(0); }
	30%, 86% { transform: translate3d(-58px, 10px, 0) rotate(-16deg); }
	100% { transform: translate3d(0, 0, 0) rotate(0); }
}
@keyframes gz-fan-c {
	0%, 12% { transform: translate3d(0, 0, 0) rotate(0); }
	30%, 86% { transform: translate3d(58px, 10px, 0) rotate(16deg); }
	100% { transform: translate3d(0, 0, 0) rotate(0); }
}
@keyframes gz-flip {
	0%, 34% { transform: translate3d(0, 0, 0) scale(1) rotateY(0); }
	46% { transform: translate3d(0, -14px, 0) scale(1.12) rotateY(90deg); }
	58%, 86% { transform: translate3d(0, -14px, 0) scale(1.12) rotateY(0); }
	100% { transform: translate3d(0, 0, 0) scale(1) rotateY(0); }
}
.gz-at-fuse {
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: 34px;
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
}
.gz-at-fuse i {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #ffd84d, #ff5b00);
	transform-origin: left;
	animation: gz-burn 3.6s linear infinite;
	will-change: transform;
}
@keyframes gz-burn {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}
/* 速打ち: 端末に1字ずつ打たれていく・打/分 */
.gz-at-term {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 2px solid rgba(90, 208, 138, 0.6);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.35);
	font: 700 clamp(15px, 2vw, 19px)/1 ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
	color: #f1ede6;
	box-shadow: 0 0 24px rgba(90, 208, 138, 0.35);
}
.gz-at-ps1 {
	color: #5ad08a;
}
.gz-at-typed {
	position: relative;
	display: inline-block;
	overflow: hidden;
	white-space: pre;
}
/* 打っていない字を隠す覆い（右へ1字ずつ動く＝transform。覆いの左端がカーソル） */
.gz-at-cover {
	position: absolute;
	inset: -2px -14px -2px 0;
	background: #120e0b;
	transform: translate3d(0, 0, 0);
	animation: gz-cover 3.6s steps(12, end) infinite;
	will-change: transform;
}
.gz-at-cover::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 0.6em;
	background: #5ad08a;
	animation: gt-blink 0.8s steps(2, jump-none) infinite;
}
@keyframes gz-cover {
	0%, 8% { transform: translate3d(0, 0, 0); }
	70%, 100% { transform: translate3d(100%, 0, 0); }
}
.gz-at-cpm {
	position: absolute;
	right: 14%;
	top: 22%;
	display: grid;
	justify-items: end;
	font: 400 34px/0.9 var(--ga-num);
	color: #ffd84d;
	text-shadow: 0 0 16px rgba(255, 216, 77, 0.55);
	animation: gz-pop 3.6s var(--ga-pop) infinite;
	will-change: transform;
}
.gz-at-cpm small {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	text-shadow: none;
}
@keyframes gz-pop {
	0%, 66% { transform: scale(0.4); opacity: 0; }
	76%, 94% { transform: scale(1); opacity: 1; }
	100% { transform: scale(1); opacity: 0; }
}
/* 早押し: 2人のランプが交互に光る */
.gz-attract--versus {
	grid-template-columns: 1fr auto 1fr;
	gap: 14px;
	padding-inline: 12%;
}
.gz-at-side {
	display: grid;
	gap: 8px;
	justify-items: center;
}
.gz-at-side i {
	width: 42px;
	height: 14px;
	border-radius: 999px;
	background: var(--p);
	opacity: 0.25;
	animation: gz-lamp 1.8s ease-in-out infinite;
}
.gz-at-side.is-p1 {
	--p: #ff5b00;
}
.gz-at-side.is-p2 {
	--p: #4d8dff;
}
.gz-at-side.is-p2 i {
	animation-delay: 0.9s;
}
.gz-at-side i:nth-child(2) {
	animation-delay: 0.15s;
}
.gz-at-side.is-p2 i:nth-child(2) {
	animation-delay: 1.05s;
}
.gz-at-side i:nth-child(3) {
	animation-delay: 0.3s;
}
.gz-at-side.is-p2 i:nth-child(3) {
	animation-delay: 1.2s;
}
@keyframes gz-lamp {
	0%, 100% { opacity: 0.22; transform: scale(0.92); }
	22% { opacity: 1; transform: scale(1.08); }
}
.gz-at-vs {
	font: 400 44px/1 var(--ga-num);
	color: #fff;
	text-shadow: 3px 3px 0 #ff5b00, -3px -3px 0 #4d8dff;
	animation: gz-vs 1.8s var(--ga-pop) infinite;
	will-change: transform;
}
@keyframes gz-vs {
	0%, 100% { transform: scale(1) rotate(-4deg); }
	50% { transform: scale(1.14) rotate(4deg); }
}

/* =========================================================
 |  舞台
 +=========================================================*/

html.gz-open,
html.gz-open body {
	overflow: hidden !important;
}
html.gz-open .gp-nav,
html.gz-open .gp-notice {
	visibility: hidden;
}
.gz-stage {
	--gz-ink: #1d1813;
	--gz-text: #2b2620;
	--gz-muted: #6f6052;
	--gz-paper: #fff;
	--gz-ground: #fff4e1;
	--gz-ok: #1e7a45;
	--gz-ng: #c0341d;
	--gz-num: "Din1451Alt", "Bahnschrift", "DIN Alternate", "Arial Narrow", system-ui, sans-serif;
	--gz-brand: var(--font-site-brand, "linuxPro-CPL"), "Hiragino Sans", "Noto Sans JP", sans-serif;
	--gz-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
	--gz-pop: cubic-bezier(0.2, 1.5, 0.4, 1);
	--gz-out: cubic-bezier(0.2, 0.8, 0.2, 1);
	position: fixed;
	left: 0;
	right: 0;
	top: var(--gz-top, 0px);
	z-index: 100020;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	height: 100vh;
	height: var(--gz-vh, 100dvh);
	overflow: hidden;
	background:
		radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--gz-c) 26%, transparent), transparent 58%),
		linear-gradient(rgba(29, 24, 19, 0.035) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(90deg, rgba(29, 24, 19, 0.035) 1px, transparent 1px) 0 0 / 28px 28px,
		var(--gz-ground);
	color: var(--gz-text);
	font: 400 16px/1.7 system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	animation: gz-in 0.32s var(--gz-out) both;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
.gz-stage[hidden] {
	display: none;
}
@keyframes gz-in {
	from { opacity: 0; transform: scale(1.02); }
}
.gz-stage *,
.gz-stage *::before,
.gz-stage *::after {
	box-sizing: border-box;
}
.gz-stage :where(p, ol, li, h2, h3) {
	margin: 0;
	padding: 0;
}
.gz-stage ol {
	list-style: none;
}
.gz-stage [hidden] {
	display: none !important;
}
.gz-stage :where(button):focus-visible {
	outline: 3px solid #ff5b00;
	outline-offset: 3px;
}
.gz-stage button {
	touch-action: manipulation;
	font: inherit;
}

/* 上の帯 */
.gz-bar {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 8px;
}
.gz-hud {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.gz-quit,
.gz-sound {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 3px solid var(--gz-ink);
	border-radius: 50%;
	background: var(--gz-paper);
	color: var(--gz-ink);
	cursor: pointer;
	box-shadow: 0 3px 0 var(--gz-ink);
	transition: transform 0.12s ease;
}
.gz-quit:active,
.gz-sound:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 var(--gz-ink);
}
.gz-sound {
	width: 40px;
	height: 40px;
	border-width: 2px;
	color: var(--gz-muted);
	box-shadow: none;
}
.gz-sound[aria-pressed="true"] {
	background: var(--gz-ink);
	color: #ffd84d;
}
.gz-lives {
	display: flex;
	gap: 2px;
}
.gz-heart {
	display: grid;
	color: #e23b23;
	filter: drop-shadow(0 2px 0 var(--gz-ink));
	transition: transform 0.25s var(--gz-pop), opacity 0.25s ease;
}
.gz-heart.is-lost {
	opacity: 0.2;
	transform: scale(0.8);
	filter: grayscale(1);
}
.gz-heart.is-break {
	animation: gz-heart 0.6s var(--gz-out);
}
@keyframes gz-heart {
	0% { transform: scale(1); opacity: 1; }
	30% { transform: scale(1.5) rotate(-12deg); opacity: 1; }
	100% { transform: scale(0.8) translate3d(0, 6px, 0); opacity: 0.2; }
}
.gz-count {
	font: 400 22px/1 var(--gz-num);
	color: var(--gz-ink);
	font-variant-numeric: tabular-nums;
}
.gz-count span {
	font-size: 15px;
	color: var(--gz-muted);
}
.gz-score,
.gz-speed {
	display: grid;
	justify-items: end;
	margin-left: auto;
	line-height: 1;
}
.gz-speed {
	margin-left: 0;
}
.gz-score span,
.gz-speed span {
	font: 700 10px/1 system-ui, sans-serif;
	letter-spacing: 0.16em;
	color: var(--gz-muted);
}
.gz-score b,
.gz-speed b {
	font: 400 26px/1 var(--gz-num);
	color: var(--gz-ink);
	font-variant-numeric: tabular-nums;
}
.gz-speed {
	grid-auto-flow: column;
	align-items: baseline;
	gap: 3px;
	padding: 4px 10px 3px;
	border: 2px solid var(--gz-ink);
	border-radius: 999px;
	background: var(--gz-paper);
}
.gz-speed b {
	font-size: 20px;
}
.gz-combo {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 5px 10px 4px;
	border: 2px solid var(--gz-ink);
	border-radius: 10px;
	background: var(--gz-ink);
	color: #ffd84d;
	font: 400 20px/1 var(--gz-num);
	transform: rotate(-4deg);
}
.gz-combo span {
	font-size: 10px;
	letter-spacing: 0.12em;
	color: #ffb071;
}
.gz-bump {
	animation: gz-bump 0.42s var(--gz-pop);
}
@keyframes gz-bump {
	40% { transform: scale(1.32) rotate(-5deg); }
}
.gz-body {
	position: relative;
	z-index: 2;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 16px 18px;
}
.gz-tip {
	margin: 12px auto 0 !important;
	max-width: 640px;
	text-align: center;
	font-size: 12px;
	color: var(--gz-muted);
}
.gz-keys kbd,
.gz-vs__key {
	display: inline-block;
	min-width: 20px;
	padding: 1px 5px;
	border: 1.5px solid var(--gz-ink);
	border-radius: 5px;
	box-shadow: 0 1.5px 0 var(--gz-ink);
	background: #fff;
	font: 400 12px/1.3 var(--gz-num);
	text-align: center;
	color: var(--gz-ink);
}
@media (pointer: coarse) {
	.gz-keys,
	.gz-vs__key,
	.gz-choice__key {
		display: none !important;
	}
}

/* 光る縁・粒・浮く字 */
.gz-flash {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	opacity: 0;
}
.gz-flash.is-ok {
	box-shadow: inset 0 0 0 6px #2e9e5b, inset 0 0 90px rgba(46, 158, 91, 0.45);
	animation: gz-flash 0.5s ease-out;
}
.gz-flash.is-ng {
	box-shadow: inset 0 0 0 6px #d2381c, inset 0 0 120px rgba(210, 56, 28, 0.5);
	animation: gz-flash 0.6s ease-out;
}
.gz-flash.is-fever {
	box-shadow: inset 0 0 0 8px #ffd84d, inset 0 0 160px rgba(255, 91, 0, 0.6);
	animation: gz-flash 0.9s ease-out;
}
@keyframes gz-flash {
	0% { opacity: 1; }
	100% { opacity: 0; }
}
.gz-fx {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.gz-floats {
	position: absolute;
	inset: 0;
	z-index: 6;
	overflow: hidden;
	pointer-events: none;
}
.gz-float {
	position: absolute;
	transform: translate(-50%, -50%);
	font: 400 30px/1 var(--gz-num);
	color: var(--gz-ink);
	text-shadow: 2px 2px 0 #fff, -1px -1px 0 #fff;
	white-space: nowrap;
	animation: gz-float 1.1s var(--gz-out) forwards;
	will-change: transform, opacity;
}
.gz-float.is-ok {
	color: #1e7a45;
}
.gz-float.is-ng {
	color: #c0341d;
	font-size: 24px;
}
.gz-float.is-mult {
	font-size: 20px;
	color: #ff5b00;
}
.gz-float.is-fever {
	font-size: 38px;
	color: #ff5b00;
	text-shadow: 3px 3px 0 #ffd84d, -1px -1px 0 #fff;
}
.gz-float.is-flip {
	animation-name: gz-float-flip;
}
@keyframes gz-float {
	0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
	18% { opacity: 1; transform: translate(-50%, -70%) scale(1.15); }
	100% { opacity: 0; transform: translate(-50%, -190%) scale(1); }
}
@keyframes gz-float-flip {
	0% { opacity: 0; transform: translate(-50%, -70%) rotate(180deg) scale(0.6); }
	18% { opacity: 1; transform: translate(-50%, -30%) rotate(180deg) scale(1.15); }
	100% { opacity: 0; transform: translate(-50%, 90%) rotate(180deg) scale(1); }
}
.gz-shake {
	animation: gz-shake 0.42s ease;
}
.gz-shake--strong {
	animation: gz-shake-strong 0.5s ease;
}
@keyframes gz-shake {
	20% { transform: translate3d(-8px, 0, 0); }
	40% { transform: translate3d(7px, 0, 0); }
	60% { transform: translate3d(-5px, 0, 0); }
	80% { transform: translate3d(3px, 0, 0); }
}
@keyframes gz-shake-strong {
	15% { transform: translate3d(-12px, 2px, 0) rotate(-1.5deg); }
	35% { transform: translate3d(10px, -2px, 0) rotate(1.2deg); }
	55% { transform: translate3d(-7px, 1px, 0) rotate(-0.6deg); }
	75% { transform: translate3d(4px, 0, 0); }
}

/* 3-2-1・大きな字 */
.gz-splash {
	position: absolute;
	inset: 0;
	z-index: 8;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 10px;
	background: rgba(23, 18, 14, 0.82);
	pointer-events: none;
}
.gz-splash.is-fever {
	background: transparent;
}
.gz-splash__word {
	font: 400 clamp(64px, 15vw, 150px)/1 var(--gz-num);
	letter-spacing: 0.08em;
	color: #fff;
	text-shadow: 6px 6px 0 var(--gz-c);
	animation: gz-word 0.48s var(--gz-pop) both;
}
.gz-splash__word.is-go {
	color: #ffd84d;
	text-shadow: 6px 6px 0 #ff5b00;
}
.gz-splash__word.is-label {
	font: 700 clamp(30px, 7vw, 56px)/1.2 var(--gz-brand);
	letter-spacing: 0;
}
.gz-splash.is-fever .gz-splash__word {
	color: #ffd84d;
	text-shadow: 5px 5px 0 #d2381c, -3px -3px 0 #ff5b00;
	animation: gz-fever-word 0.7s var(--gz-pop) both;
}
.gz-splash.is-over .gz-splash__word {
	color: #f1ede6;
	text-shadow: 6px 6px 0 #c0341d;
	font-size: clamp(54px, 12vw, 120px);
}
.gz-splash.is-clear .gz-splash__word {
	color: #ffd84d;
	text-shadow: 6px 6px 0 #2e9e5b;
}
.gz-splash__sub {
	font: 700 clamp(16px, 3vw, 22px)/1.4 var(--gz-brand);
	color: #f1ede6;
	animation: gz-in 0.4s 0.2s var(--gz-out) both;
}
.gz-splash.is-fever .gz-splash__sub {
	color: #1d1813;
	padding: 2px 12px;
	border-radius: 999px;
	background: #ffd84d;
}
@keyframes gz-word {
	from { opacity: 0; transform: scale(2.2) rotate(-6deg); }
	to { opacity: 1; transform: scale(1) rotate(-3deg); }
}
@keyframes gz-fever-word {
	0% { opacity: 0; transform: scale(0.3) rotate(-20deg); }
	60% { opacity: 1; transform: scale(1.25) rotate(4deg); }
	100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}

/* やめますか？ */
.gz-confirm {
	position: absolute;
	inset: 0;
	z-index: 9;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(23, 18, 14, 0.6);
}
.gz-confirm__card {
	display: grid;
	gap: 10px;
	width: min(100%, 380px);
	padding: 22px;
	border: 3px solid var(--gz-ink);
	border-radius: 22px;
	background: var(--gz-paper);
	box-shadow: 6px 6px 0 var(--gz-ink);
	animation: gz-word 0.3s var(--gz-pop) both;
}
.gz-confirm__h {
	font: 700 20px/1.4 var(--gz-brand);
	color: var(--gz-ink);
}
.gz-confirm__actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}
.gz-confirm__leave {
	background: var(--gz-ink) !important;
	color: #fff !important;
}

/* FEVER（画面が燃える） */
.gz-stage.is-fever::before {
	content: "";
	position: absolute;
	inset: -40%;
	z-index: 0;
	background: repeating-linear-gradient(-45deg, rgba(255, 91, 0, 0.16) 0 24px, rgba(255, 216, 77, 0.16) 24px 48px);
	animation: gz-stripes 1.2s linear infinite;
	will-change: transform;
	pointer-events: none;
}
@keyframes gz-stripes {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(68px, 0, 0); }
}
.gz-stage.is-fever .gz-score b {
	color: #ff5b00;
}
.gz-stage.is-fever .gz-combo {
	background: #ff5b00;
	color: #fff;
	animation: gz-fever-pill 0.6s ease-in-out infinite alternate;
}
@keyframes gz-fever-pill {
	to { transform: rotate(-4deg) scale(1.12); }
}

/* =========================================================
 |  ラッシュ（カード）
 +=========================================================*/

.gz-stage--rush .gz-body {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
}
.gz-table {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: center;
	min-height: 0;
	padding-top: 6px;
}
.gz-pile {
	position: absolute;
	right: max(8px, calc(50% - 360px));
	top: 6px;
	width: 46px;
	height: 62px;
}
.gz-pile i {
	position: absolute;
	inset: 0;
	border: 2px solid var(--gz-ink);
	border-radius: 9px;
	background: repeating-linear-gradient(45deg, var(--gz-c) 0 6px, color-mix(in srgb, var(--gz-c) 70%, #fff) 6px 12px);
	transform: rotate(6deg);
}
.gz-pile i:nth-child(2) {
	transform: translate3d(-3px, -3px, 0) rotate(-2deg);
}
.gz-pile i:nth-child(3) {
	transform: translate3d(-6px, -6px, 0) rotate(3deg);
}
@media (max-width: 640px) {
	.gz-pile {
		display: none;
	}
}
.gz-slot {
	width: 100%;
	max-width: 680px;
}
.gz-card {
	position: relative;
	display: grid;
	gap: 12px;
	padding: clamp(18px, 3.4vw, 30px);
	border: 3px solid var(--gz-ink);
	border-radius: 26px;
	background: var(--gz-paper);
	box-shadow: 8px 8px 0 var(--gz-ink);
	will-change: transform;
}
.gz-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.gz-card__tag {
	padding: 4px 12px 3px;
	border: 2px solid var(--gz-ink);
	border-radius: 999px;
	background: var(--gz-c);
	color: var(--gz-on);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
}
.gz-card[data-kind="codename"] .gz-card__tag,
.gz-card[data-kind="newer"] .gz-card__tag {
	background: #8e44ad;
	color: #fff;
}
.gz-card[data-kind="lts"] .gz-card__tag,
.gz-card[data-kind="alive"] .gz-card__tag {
	background: #2e9e5b;
	color: #fff;
}
.gz-card[data-kind="shot"] .gz-card__tag {
	background: #2f6fd6;
	color: #fff;
}
.gz-card__no {
	font: 400 15px/1 var(--gz-num);
	letter-spacing: 0.12em;
	color: var(--gz-muted);
}
.gz-card__q {
	font: 700 clamp(20px, 3.4vw, 28px)/1.45 var(--gz-brand);
	color: var(--gz-ink);
	text-wrap: balance;
}
.gz-shot {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	max-width: 100%;
	border: 3px solid var(--gz-ink);
	border-radius: 16px;
	background: var(--gz-ink);
}
.gz-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}
/* 導火線（WAAPI で左へ燃える・先に火花） */
.gz-fuse {
	position: relative;
	height: 10px;
	overflow: hidden;
	border: 2px solid var(--gz-ink);
	border-radius: 999px;
	background: var(--gz-line, #e8e1d4);
}
.gz-fuse__burn {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #ffd84d, #ff5b00);
	will-change: transform;
}
.gz-fuse__burn::after {
	content: "";
	position: absolute;
	right: -6px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 25%, #ffd84d 45%, rgba(255, 91, 0, 0) 70%);
	animation: gz-spark 0.18s steps(2) infinite;
}
@keyframes gz-spark {
	50% { transform: scale(1.5); }
}
.gz-card.is-hot .gz-fuse__burn {
	background: linear-gradient(90deg, #ff5b00, #d2381c);
}
.gz-card.is-hot .gz-fuse {
	animation: gz-hot 0.5s ease-in-out infinite alternate;
}
@keyframes gz-hot {
	to { transform: scaleY(1.35); }
}
.gz-card.is-revealed .gz-fuse {
	opacity: 0.35;
	animation: none;
}
/* 選択肢 */
.gz-choices {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}
@media (min-width: 640px) {
	.gz-choices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.gz-choices.is-vs {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.gz-choices.is-vs::before {
	content: "or";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 3px solid var(--gz-ink);
	border-radius: 50%;
	background: #ffd84d;
	font: 400 15px/1 var(--gz-num);
	color: var(--gz-ink);
}
.gz-choice {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 60px;
	padding: 10px 14px;
	overflow: hidden;
	border: 3px solid var(--gz-ink);
	border-radius: 16px;
	background: var(--gz-paper);
	color: var(--gz-ink);
	font-weight: 800;
	font-size: 17px;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 5px 0 var(--gz-ink);
	transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease;
}
.gz-choices.is-vs .gz-choice {
	justify-content: center;
	min-height: 96px;
	text-align: center;
	flex-direction: column;
	font-size: 19px;
}
.gz-choice:hover {
	background: #fffaf0;
}
.gz-choice:active {
	transform: translateY(4px);
	box-shadow: 0 1px 0 var(--gz-ink);
}
/* 押したところから波紋 */
.gz-choice::after {
	content: "";
	position: absolute;
	left: var(--x, 50%);
	top: var(--y, 50%);
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--gz-c) 30%, transparent);
	opacity: 0;
	transform: scale(0);
	pointer-events: none;
}
.gz-choice.is-picked::after {
	animation: gz-ripple 0.5s ease-out;
}
@keyframes gz-ripple {
	from { opacity: 1; transform: scale(0); }
	to { opacity: 0; transform: scale(40); }
}
.gz-choice__key {
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 2px solid var(--gz-ink);
	border-radius: 7px;
	background: var(--gz-ground);
	font: 400 14px/1 var(--gz-num);
}
.gz-choices.is-vs .gz-choice__key {
	position: absolute;
	left: 10px;
	top: 10px;
}
.gz-choice__mono {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	overflow: hidden;
	border: 2px solid var(--gz-ink);
	border-radius: 10px;
	background: var(--m, #ff5b00);
	color: #fff;
	font: 400 16px/1 var(--gz-num);
	letter-spacing: 0.02em;
}
.gz-choices.is-vs .gz-choice__mono {
	width: 46px;
	height: 46px;
	font-size: 20px;
}
.gz-choice__mono img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
}
.gz-choice__label {
	min-width: 0;
	overflow-wrap: anywhere;
}
.gz-choice:disabled {
	cursor: default;
}
.gz-card.is-revealed .gz-choice:not(.is-right):not(.is-answer):not(.is-wrong) {
	opacity: 0.45;
}
.gz-choice.is-right,
.gz-choice.is-answer {
	border-color: var(--gz-ok);
	background: #e3f5ea;
	color: #0f4f2b;
	box-shadow: 0 5px 0 var(--gz-ok);
}
.gz-choice.is-right {
	animation: gz-right 0.5s var(--gz-pop);
}
.gz-choice.is-answer {
	animation: gz-glow 0.9s ease-in-out 2;
}
.gz-choice.is-right::before,
.gz-choice.is-answer::before {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	width: 26px;
	height: 26px;
	margin-top: -13px;
	border-radius: 50%;
	background: var(--gz-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5.5 12.5 4 4L18.5 7.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.gz-choice.is-wrong {
	border-color: var(--gz-ng);
	background: #fdebe7;
	color: #7d1f10;
	box-shadow: 0 5px 0 var(--gz-ng);
}
@keyframes gz-right {
	40% { transform: scale(1.06) rotate(-1deg); }
}
@keyframes gz-glow {
	50% { box-shadow: 0 5px 0 var(--gz-ok), 0 0 0 6px rgba(46, 158, 91, 0.3); }
}
/* 答えの説明（カードの下に出る） */
.gz-card__why {
	display: grid;
	gap: 4px;
	padding: 12px 14px;
	border: 2px solid var(--gz-ink);
	border-radius: 14px;
	background: var(--gz-ground);
	animation: gz-in 0.3s var(--gz-out) both;
	outline: none;
}
.gz-card.is-ok .gz-card__why {
	background: #e3f5ea;
}
.gz-card.is-ng .gz-card__why {
	background: #fdebe7;
}
.gz-card__verdict {
	font: 700 17px/1.4 var(--gz-brand);
	color: var(--gz-ink);
}
.gz-card__reason {
	font-size: 14px;
	color: var(--gz-text);
}
.gz-card__next {
	font-size: 11px;
	color: var(--gz-muted);
}

/* =========================================================
 |  速打ち（端末）
 +=========================================================*/

.gz-stage--type {
	background:
		radial-gradient(circle at 50% -10%, rgba(90, 208, 138, 0.22), transparent 55%),
		#221b15;
	color: #f1ede6;
}
.gz-stage--type .gz-quit,
.gz-stage--type .gz-sound {
	border-color: #f1ede6;
	box-shadow: 0 3px 0 #000;
}
.gz-stage--type :is(.gz-score span, .gz-speed span) {
	color: rgba(241, 237, 230, 0.6);
}
.gz-stage--type .gz-score b {
	color: #f1ede6;
}
.gz-stage--type .gz-speed {
	border-color: #5ad08a;
	background: transparent;
}
.gz-stage--type .gz-speed b {
	color: #5ad08a;
}
.gz-stage--type .gz-combo {
	border-color: #ffd84d;
}
.gz-stage--type .gz-tip {
	color: rgba(241, 237, 230, 0.6);
}
.gz-stage--type .gz-body {
	display: grid;
	align-content: start;
	justify-items: center;
	gap: 10px;
}
/* キーボードのある画面は真ん中に（スマホは画面のキーボードが下から出るので上に寄せる） */
@media (pointer: fine) and (min-height: 620px) {
	.gz-stage--type .gz-body {
		align-content: center;
		padding-bottom: 8vh;
	}
}
/* 残り時間（横の帯・WAAPI で縮む） */
.gz-clock {
	position: relative;
	flex: 1;
	min-width: 80px;
	height: 26px;
	overflow: hidden;
	border: 2px solid #f1ede6;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
}
.gz-clock__fill {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #2e9e5b, #5ad08a);
	transform-origin: left;
	will-change: transform;
}
.gz-clock b {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font: 400 17px/1 var(--gz-num);
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	font-variant-numeric: tabular-nums;
}
.gz-clock.is-warn .gz-clock__fill {
	background: linear-gradient(90deg, #d2381c, #ff5b00);
}
.gz-clock.is-warn {
	animation: gz-hot 0.5s ease-in-out infinite alternate;
}
.gz-term {
	width: 100%;
	max-width: 860px;
	overflow: hidden;
	border: 3px solid #000;
	border-radius: 16px;
	background: #120e0b;
	box-shadow: 0 0 0 1px rgba(90, 208, 138, 0.25), 0 18px 50px rgba(0, 0, 0, 0.45);
	font: 400 clamp(15px, 2.2vw, 18px)/1.55 var(--gz-mono);
	color: #f1ede6;
}
.gz-term__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background: #2b231c;
	font: 700 12px/1 system-ui, sans-serif;
	color: rgba(241, 237, 230, 0.6);
}
.gz-term__bar i {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #ff5f57;
}
.gz-term__bar i:nth-child(2) {
	background: #febc2e;
}
.gz-term__bar i:nth-child(3) {
	background: #28c840;
}
.gz-term__bar span {
	margin-left: 8px;
}
.gz-term__screen {
	display: grid;
	gap: 10px;
	padding: 14px 16px 16px;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 4px),
		#120e0b;
}
.gz-term__log {
	display: grid;
	gap: 0;
	min-height: 5.4em;
	max-height: 9em;
	overflow: hidden;
	align-content: end;
	-webkit-mask-image: linear-gradient(transparent, #000 40%);
	mask-image: linear-gradient(transparent, #000 40%);
}
.gz-log {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	color: rgba(241, 237, 230, 0.9);
	animation: gz-log 0.18s ease-out both;
}
.gz-log__ps1 {
	color: #5ad08a;
}
.gz-log.is-ok .gz-log__cmd {
	color: #b7f5cf;
}
.gz-log--out {
	color: rgba(241, 237, 230, 0.62);
}
.gz-log.is-ng,
.gz-log--out.is-ng {
	color: #ff9a85;
}
@keyframes gz-log {
	from { opacity: 0; transform: translate3d(0, 6px, 0); }
}
.gz-term__task {
	display: grid;
	gap: 4px;
	padding: 10px 12px;
	border: 1px dashed rgba(90, 208, 138, 0.45);
	border-radius: 10px;
	background: rgba(90, 208, 138, 0.06);
	font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
}
.gz-term__cmd {
	justify-self: start;
	padding: 1px 8px;
	border-radius: 6px;
	background: #5ad08a;
	color: #120e0b;
	font: 700 13px/1.5 var(--gz-mono);
}
.gz-term__say {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(241, 237, 230, 0.9);
}
.gz-stage.is-recall .gz-term__say {
	font: 700 clamp(17px, 2.6vw, 21px)/1.55 var(--gz-brand);
	color: #fff;
}
.gz-term__hint {
	font: 700 clamp(18px, 3vw, 24px)/1.4 var(--gz-mono);
	letter-spacing: 0.08em;
	color: #ffd84d;
}
.gz-term__hint.is-more {
	animation: gz-bump 0.42s var(--gz-pop);
}
.gz-term__line {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
	min-height: 2.2em;
	padding: 8px 10px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.04);
	cursor: text;
}
.gz-term__ps1 {
	flex: none;
	white-space: nowrap;
	color: #5ad08a;
}
.gz-term__ps1 b {
	font-weight: 700;
}
.gz-term__ps1 i {
	font-style: normal;
	color: #6fb7ff;
}
.gz-term__text {
	flex: 1;
	min-width: 0;
	font-size: clamp(19px, 3.2vw, 26px);
	letter-spacing: 0.02em;
	overflow-wrap: anywhere;
	word-break: break-all;
}
/* 打つ欄は見えないが、画面のキーボードを出すために必要（16px 未満だと iOS で拡大される） */
.gz-term__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: transparent;
	caret-color: transparent;
	font-size: 16px;
	opacity: 0.01;
	cursor: text;
}
.gz-ch {
	color: rgba(241, 237, 230, 0.32);
	transition: color 0.08s ease;
}
.gz-ch.is-done {
	color: #fff;
	text-shadow: 0 0 8px rgba(90, 208, 138, 0.55);
}
.gz-ch.is-sp:not(.is-done) {
	background: radial-gradient(circle, rgba(241, 237, 230, 0.35) 0 1.5px, transparent 2px) center / 100% 100% no-repeat;
}
.gz-ch.is-next {
	position: relative;
	color: rgba(241, 237, 230, 0.6);
	box-shadow: inset 0 -3px 0 #5ad08a;
	animation: gz-cursor 0.9s steps(2, jump-none) infinite;
}
@keyframes gz-cursor {
	50% { box-shadow: inset 0 -3px 0 transparent; }
}
.gz-ch.is-miss {
	color: #fff;
	background: #d2381c;
	border-radius: 3px;
	animation: gz-miss 0.3s ease;
}
@keyframes gz-miss {
	50% { transform: translate3d(0, -4px, 0); }
}
.gz-caret {
	display: inline-block;
	width: 0.6em;
	height: 1.1em;
	margin-left: 2px;
	vertical-align: -0.15em;
	background: #5ad08a;
	animation: gt-blink 0.9s steps(2, jump-none) infinite;
}
.gz-term__line.is-ready {
	background: rgba(90, 208, 138, 0.12);
	box-shadow: inset 0 0 0 2px #5ad08a;
}
.gz-term__line.is-ready::after {
	content: "⏎ Enter";
	position: absolute;
	right: 10px;
	bottom: 6px;
	padding: 1px 8px;
	border-radius: 6px;
	background: #5ad08a;
	color: #120e0b;
	font: 700 12px/1.5 system-ui, sans-serif;
	animation: gz-bump 0.6s var(--gz-pop) infinite alternate;
}
/* スマホの記号のボタン */
.gz-aux {
	display: none;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	width: 100%;
	max-width: 860px;
}
@media (pointer: coarse) {
	.gz-aux {
		display: flex;
	}
}
.gz-aux__key {
	min-width: 42px;
	min-height: 42px;
	padding: 0 10px;
	border: 2px solid #f1ede6;
	border-radius: 10px;
	background: #2b231c;
	color: #f1ede6;
	font: 700 18px/1 var(--gz-mono);
	cursor: pointer;
	box-shadow: 0 3px 0 #000;
}
.gz-aux__key:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 #000;
	background: #5ad08a;
	color: #120e0b;
}
.gz-aux__pass {
	display: none;
	font: 700 14px/1 system-ui, sans-serif;
	border-color: #ffd84d;
	color: #ffd84d;
}
.gz-stage.is-recall .gz-aux__pass {
	display: inline-block;
}
/* パソコンでも「思い出す」のパスは押せるように */
@media (pointer: fine) {
	.gz-stage.is-recall .gz-aux {
		display: flex;
	}
	.gz-stage.is-recall .gz-aux__key:not(.gz-aux__pass) {
		display: none;
	}
}

/* =========================================================
 |  ふたりで早押し
 +=========================================================*/

.gz-stage--versus {
	grid-template-rows: minmax(0, 1fr);
	background: #1d1813;
}
.gz-stage--versus .gz-body {
	padding: 0;
	overflow: hidden;
}
.gz-vs {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-areas: "p1 mid p2";
	height: 100%;
	gap: 0;
}
.gz-vs__side {
	--p: #ff5b00;
	position: relative;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	gap: 10px;
	min-height: 0;
	padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 16px;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--p) 36%, transparent), transparent 60%),
		color-mix(in srgb, var(--p) 10%, #fff4e1);
	transition: filter 0.25s ease, opacity 0.25s ease;
}
.gz-vs__side.is-p1 {
	grid-area: p1;
}
.gz-vs__side.is-p2 {
	grid-area: p2;
}
.gz-vs__head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.gz-vs__name {
	padding: 3px 12px 2px;
	border: 2px solid var(--gz-ink);
	border-radius: 999px;
	background: var(--p);
	color: #fff;
	font: 700 14px/1.4 var(--gz-brand);
}
.gz-vs__pips {
	display: flex;
	gap: 4px;
}
.gz-vs__pips i {
	width: 14px;
	height: 14px;
	border: 2px solid var(--gz-ink);
	border-radius: 50%;
	background: #fff;
	transition: transform 0.3s var(--gz-pop), background-color 0.2s ease;
}
.gz-vs__pips i.is-on {
	background: var(--p);
	transform: scale(1.15);
}
.gz-vs__pts {
	margin-left: auto;
	font: 400 40px/1 var(--gz-num);
	color: var(--gz-ink);
	font-variant-numeric: tabular-nums;
}
.gz-vs__card {
	display: grid;
	align-content: center;
	gap: 12px;
	min-height: 0;
}
.gz-vs__tag {
	justify-self: start;
	padding: 2px 10px;
	border: 2px solid var(--gz-ink);
	border-radius: 999px;
	background: #fff;
	font-size: 11px;
	font-weight: 800;
}
.gz-vs__tag:empty {
	display: none;
}
.gz-vs__q {
	font: 700 clamp(17px, 2.6vw, 24px)/1.5 var(--gz-brand);
	color: var(--gz-ink);
	text-wrap: balance;
}
.gz-vs__choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.gz-vs__choice {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 64px;
	padding: 8px 10px;
	border: 3px solid var(--gz-ink);
	border-radius: 16px;
	background: #fff;
	color: var(--gz-ink);
	font: 800 clamp(15px, 2.2vw, 19px)/1.3 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 5px 0 var(--gz-ink);
	transition: transform 0.08s ease, box-shadow 0.08s ease;
	user-select: none;
	-webkit-user-select: none;
}
.gz-vs__choice:active {
	transform: translateY(4px);
	box-shadow: 0 1px 0 var(--gz-ink);
}
.gz-vs__label {
	overflow-wrap: anywhere;
}
.gz-vs__key {
	position: absolute;
	left: 6px;
	top: 6px;
}
.gz-vs__choice.is-right,
.gz-vs__choice.is-answer {
	border-color: var(--gz-ok);
	background: #e3f5ea;
	color: #0f4f2b;
	box-shadow: 0 5px 0 var(--gz-ok);
}
.gz-vs__choice.is-right {
	background: var(--p);
	color: #fff;
	animation: gz-right 0.5s var(--gz-pop);
}
.gz-vs__choice.is-wrong {
	border-color: var(--gz-ng);
	background: #fdebe7;
	color: #7d1f10;
}
.gz-vs__choice:disabled {
	cursor: default;
}
.gz-vs__side.is-locked .gz-vs__card,
.gz-vs__side.is-dim .gz-vs__card {
	filter: grayscale(0.85);
	opacity: 0.55;
}
.gz-vs__mark {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	place-items: center;
	pointer-events: none;
	font: 400 clamp(110px, 26vw, 220px)/1 var(--gz-num);
	color: var(--p);
	text-shadow: 6px 6px 0 var(--gz-ink);
	opacity: 0;
}
.gz-vs__side.is-got .gz-vs__mark,
.gz-vs__side.is-locked .gz-vs__mark,
.gz-vs__side.is-final .gz-vs__mark {
	animation: gz-mark 0.9s var(--gz-pop) forwards;
}
.gz-vs__side.is-locked .gz-vs__mark {
	color: #d2381c;
	animation-name: gz-mark-x;
}
.gz-vs__side.is-final .gz-vs__mark {
	font-size: clamp(70px, 16vw, 150px);
	animation-name: gz-mark-final;
}
.gz-vs__side.is-lose .gz-vs__mark,
.gz-vs__side.is-draw .gz-vs__mark {
	color: #f1ede6;
	text-shadow: 4px 4px 0 var(--gz-ink);
}
.gz-vs__side.is-lose {
	filter: grayscale(0.7) brightness(0.8);
}
.gz-vs__side.is-win {
	background:
		radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--p) 60%, transparent), transparent 70%),
		color-mix(in srgb, var(--p) 22%, #fff4e1);
}
@keyframes gz-mark {
	0% { opacity: 0; transform: scale(0.3); }
	45% { opacity: 1; transform: scale(1.12); }
	100% { opacity: 0; transform: scale(1); }
}
@keyframes gz-mark-x {
	0% { opacity: 0; transform: scale(1.6) rotate(-10deg); }
	30% { opacity: 0.9; transform: scale(1) rotate(0); }
	100% { opacity: 0.5; transform: scale(1); }
}
@keyframes gz-mark-final {
	0% { opacity: 0; transform: scale(0.3) rotate(-12deg); }
	60% { opacity: 1; transform: scale(1.12) rotate(4deg); }
	100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}
.gz-vs__mid {
	grid-area: mid;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px 8px;
	background: #1d1813;
	color: #f1ede6;
}
.gz-vs__timer {
	position: relative;
	width: 10px;
	height: 40%;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
}
.gz-vs__timer i {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(#ffd84d, #ff5b00);
	transform-origin: bottom;
	will-change: transform;
}
.gz-vs__round {
	font: 400 20px/1 var(--gz-num);
	letter-spacing: 0.06em;
}
.gz-stage--versus .gz-quit {
	border-color: #f1ede6;
}
/* 縦のスマホ: 向かい合わせ（上の人の画面は逆さ） */
.gz-stage--versus.is-table .gz-vs {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-areas: "p2" "mid" "p1";
}
.gz-stage--versus.is-table .gz-vs__side.is-p2 {
	transform: rotate(180deg);
	padding-top: 16px;
	padding-bottom: calc(14px + env(safe-area-inset-top, 0px));
}
.gz-stage--versus.is-table .gz-vs__side.is-p1 {
	padding-top: 14px;
	padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
.gz-stage--versus.is-table .gz-vs__mid {
	flex-direction: row;
	padding: 6px 12px;
}
.gz-stage--versus.is-table .gz-vs__timer {
	width: auto;
	flex: 1;
	height: 10px;
}
.gz-stage--versus.is-table .gz-vs__timer i {
	transform-origin: left;
}
.gz-stage--versus.is-table .gz-vs__pts {
	font-size: 32px;
}
.gz-stage--versus.is-table .gz-vs__q {
	font-size: clamp(15px, 4.2vw, 19px);
}
.gz-stage--versus.is-table .gz-vs__choice {
	min-height: 54px;
	font-size: 15px;
}
/* 勝負がついたら */
.gz-vs__end {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 7;
	display: grid;
	gap: 12px;
	justify-items: center;
	width: min(92vw, 420px);
	padding: 18px;
	border: 3px solid var(--gz-ink);
	border-radius: 22px;
	background: #fff;
	box-shadow: 6px 6px 0 #000;
	transform: translate(-50%, -50%);
	animation: gz-end 0.4s var(--gz-pop) both;
}
@keyframes gz-end {
	from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
}
.gz-vs__end-h {
	font: 700 22px/1.4 var(--gz-brand);
	color: var(--gz-ink);
	text-align: center;
}
.gz-vs__end-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.gz-vs__end-actions .ga-play {
	margin-top: 0;
}

/* =========================================================
 |  結果
 +=========================================================*/

.gz-res {
	display: grid;
	gap: 20px;
	margin-top: 26px;
	padding: clamp(20px, 3.4vw, 34px);
	border: 3px solid var(--gz-ink);
	border-radius: 26px;
	background: var(--gz-paper);
	box-shadow: 8px 8px 0 var(--gz-ink);
	outline: none;
	scroll-margin-top: 90px;
}
.gz-res.is-in {
	animation: gz-in 0.4s var(--ga-out) both;
}
.gz-res__head {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 6px;
	text-align: center;
}
.gz-res__eyebrow {
	font: 700 14px/1.4 var(--ga-brandfont);
	color: var(--gz-muted);
}
.gz-res__score {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	font-weight: 400;
}
.gz-res__score b {
	font: 400 clamp(72px, 13vw, 128px)/0.95 var(--ga-num);
	color: var(--gz-ink);
	text-shadow: 5px 5px 0 var(--ga-c);
	font-variant-numeric: tabular-nums;
}
.gz-page--type .gz-res__score b {
	text-shadow: 5px 5px 0 #2e9e5b;
}
.gz-res__score span {
	font: 700 22px/1 var(--ga-brandfont);
	color: var(--gz-muted);
}
/* 印（ランク）: 押されると跳ねて、輪が広がる */
.gz-res__stamp {
	position: absolute;
	right: clamp(0px, 4vw, 40px);
	top: 10px;
	display: grid;
	place-items: center;
	align-content: center;
	width: 112px;
	height: 112px;
	border: 6px double var(--ga-accent);
	border-radius: 50%;
	color: var(--ga-accent);
	opacity: 0;
	transform: rotate(-14deg) scale(2.4);
}
.gz-res__stamp b {
	font: 400 52px/0.9 var(--ga-num);
}
.gz-res__stamp span {
	max-width: 92px;
	font: 800 11px/1.25 var(--ga-brandfont);
	text-align: center;
}
.gz-res__stamp.is-on {
	animation: gz-stamp 0.42s cubic-bezier(0.3, 1.6, 0.5, 1) forwards;
}
.gz-res__stamp[data-rank="S"] {
	border-color: #d2381c;
	color: #d2381c;
}
.gz-res__stamp[data-rank="A"],
.gz-res__stamp[data-rank="勝"] {
	border-color: #ff5b00;
	color: #ff5b00;
}
.gz-res__stamp[data-rank="B"] {
	border-color: #2e9e5b;
	color: #2e9e5b;
}
.gz-res__stamp[data-rank="C"],
.gz-res__stamp[data-rank="D"],
.gz-res__stamp[data-rank="引"] {
	border-color: var(--gz-ink);
	color: var(--gz-ink);
}
@keyframes gz-stamp {
	0% { opacity: 0; transform: rotate(-14deg) scale(2.4); }
	70% { opacity: 1; transform: rotate(-14deg) scale(0.92); }
	100% { opacity: 1; transform: rotate(-14deg) scale(1); }
}
@media (max-width: 640px) {
	.gz-res__stamp {
		position: static;
		order: 3;
		width: 96px;
		height: 96px;
	}
}
.gz-res__best {
	padding: 4px 14px;
	border: 2px solid var(--gz-ink);
	border-radius: 999px;
	background: #ffd84d;
	color: var(--gz-ink);
	font-weight: 800;
	font-size: 14px;
}
.gz-res__best.is-on {
	animation: gz-fever-word 0.6s var(--ga-pop) both;
}
.gz-res__best.is-quiet {
	background: var(--gz-ground);
	font-weight: 700;
}
.gz-res__facts {
	font-size: 14px;
	color: var(--gz-text);
}
.gz-res__crowd {
	font: 700 15px/1.5 var(--ga-brandfont);
	color: var(--gz-ink);
}
.gz-res__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.gz-res__actions .ga-play {
	margin-top: 0;
}
.gz-review {
	display: grid;
	gap: 10px;
}
.gz-review__list {
	display: grid;
	gap: 8px;
}
.gz-review__item {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto;
	align-items: start;
	gap: 10px;
	padding: 10px 12px;
	border: 2px solid var(--gz-line);
	border-radius: 14px;
	background: var(--gz-ground);
}
.gz-review__item.is-ok {
	border-color: #b8e2c7;
}
.gz-review__item.is-ng {
	border-color: #f2c2b6;
}
.gz-review__mark {
	font: 400 22px/1.2 var(--ga-num);
	text-align: center;
}
.gz-review__item.is-ok .gz-review__mark {
	color: var(--gz-ok);
}
.gz-review__item.is-ng .gz-review__mark {
	color: var(--gz-ng);
}
.gz-review__q {
	font-weight: 700;
	font-size: 14px;
	color: var(--gz-ink);
}
.gz-review__a,
.gz-review__why {
	font-size: 13px;
	color: var(--gz-text);
}
.gz-review__why {
	color: var(--gz-muted);
}
.gz-review__code {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 6px;
	background: #17120e;
	color: #b7f5cf;
	font: 400 14px/1.5 ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
	overflow-wrap: anywhere;
}
.gz-review__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
}
.gz-review__go {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 2px 10px;
	border: 2px solid var(--gz-ink);
	border-radius: 999px;
	background: #fff;
	color: var(--gz-ink);
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}
.gz-review__go.is-lab {
	background: #17120e;
	color: #5ad08a;
}
.gz-review__empty {
	font-size: 14px;
	color: var(--gz-muted);
}
@media (max-width: 520px) {
	.gz-review__item {
		grid-template-columns: 26px minmax(0, 1fr);
	}
	.gz-review__go,
	.gz-review__links {
		grid-column: 2;
		justify-self: start;
	}
}

/* =========================================================
 |  遊んだあとで・遊び方・ほかの遊び
 +=========================================================*/

.gz .lp-ad-slot {
	margin-top: 26px;
}
.gz-gear {
	margin-top: 26px;
}
.gz-next,
.gz-how,
.gz-more {
	display: grid;
	gap: 14px;
	margin-top: 30px;
}
.gz-next__list,
.gz-more__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 12px;
}
.gz-next__list a,
.gz-more__list a {
	display: grid;
	gap: 2px;
	height: 100%;
	padding: 14px 16px;
	border: 3px solid var(--gz-ink);
	border-radius: 18px;
	background: var(--gz-paper);
	color: var(--gz-text);
	text-decoration: none;
	box-shadow: 0 4px 0 var(--gz-ink);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.gz-next__list a:hover,
.gz-more__list a:hover {
	color: var(--gz-text);
	transform: translateY(-2px);
	box-shadow: 0 6px 0 var(--gz-ink);
}
.gz-next__list b,
.gz-more__list b {
	font: 700 16px/1.4 var(--ga-brandfont);
	color: var(--gz-ink);
}
.gz-next__list span,
.gz-more__list span {
	font-size: 13px;
	color: var(--gz-muted);
}
.gz-more__list a {
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 12px;
	align-items: center;
}
.gz-more__icon {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 2px solid var(--gz-ink);
	border-radius: 14px;
	background: var(--ga-c, #2e9e5b);
	color: var(--ga-on, #fff) !important;
}
.gz-more__list li:last-child .gz-more__icon {
	background: #2e9e5b;
	color: #fff !important;
}
.gz-how__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 12px;
}
.gz-how__list li {
	display: grid;
	gap: 4px;
	padding: 16px;
	border: 2px solid var(--ga-line-strong, #d8cebb);
	border-radius: 18px;
	background: var(--gz-paper);
	font-size: 14px;
}
.gz-how__list b {
	font: 700 16px/1.4 var(--ga-brandfont);
	color: var(--gz-ink);
}

/* =========================================================
 |  ふたりで早押しの離れた対戦（inc/games/zone-online.php・games-zone-online.js）
 +=========================================================*/

/* 待合（ページの中） */
.gz-online {
	display: grid;
	gap: 16px;
	margin-top: 26px;
	padding: clamp(18px, 3vw, 28px);
	border: 3px solid var(--gz-ink);
	border-radius: 24px;
	background:
		radial-gradient(circle at 0% 0%, rgba(255, 91, 0, 0.16), transparent 45%),
		radial-gradient(circle at 100% 100%, rgba(47, 111, 214, 0.18), transparent 45%),
		var(--gz-paper);
	box-shadow: 6px 6px 0 var(--gz-ink);
	scroll-margin-top: 90px;
}
.gz-online.is-invited {
	animation: gz-invite 1.2s ease-in-out 2;
}
@keyframes gz-invite {
	50% { box-shadow: 6px 6px 0 var(--gz-ink), 0 0 0 8px rgba(47, 111, 214, 0.3); }
}
.gz-online__head {
	display: grid;
	gap: 6px;
}
.gz-online__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 700 14px/1 var(--ga-brandfont);
	color: var(--gz-ink);
}
.gz-online__kicker span {
	padding: 4px 9px 3px;
	border-radius: 6px;
	background: var(--gz-ink);
	color: #6fb7ff;
	font: 400 14px/1 var(--ga-num);
	letter-spacing: 0.16em;
}
.gz-online__lead {
	max-width: 46em;
	font-size: 14px;
	color: var(--gz-text);
}
.gz-online__invite {
	justify-self: start;
	padding: 4px 12px;
	border-radius: 999px;
	background: #2f6fd6;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}
.gz-online__start {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 14px;
}
.gz-online__card {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: 8px;
	margin: 0;
	padding: 16px;
	border: 2px solid var(--gz-ink);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.85);
}
.gz-online__card .ga-play {
	margin-top: 0;
}
.gz-online__step {
	font: 700 14px/1.4 var(--ga-brandfont);
	color: var(--gz-ink);
}
.gz-online__hint {
	font-size: 12px;
	color: var(--gz-muted);
}
.gz-online__field {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 14px;
}
.gz-online__field input {
	width: 6.2em;
	padding: 6px 10px;
	border: 3px solid var(--gz-ink);
	border-radius: 12px;
	background: #fff;
	color: var(--gz-ink);
	font: 400 30px/1 var(--ga-num);
	letter-spacing: 0.24em;
	text-align: center;
}
.gz-online__field input:focus-visible {
	outline: 3px solid #2f6fd6;
	outline-offset: 2px;
}
.gz-online__lobby {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	align-items: center;
	gap: 18px;
}
@media (max-width: 720px) {
	.gz-online__lobby {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.gz-online__room {
		grid-column: 1 / -1;
	}
}
.gz-online__code {
	display: grid;
	justify-items: center;
	gap: 6px;
}
.gz-online__code p {
	font-size: 12px;
	font-weight: 700;
	color: var(--gz-muted);
}
.gz-online__code b {
	padding: 8px 16px 6px;
	border-radius: 14px;
	background: var(--ga-screen, #17120e);
	color: #ffd84d;
	font: 400 clamp(40px, 7vw, 56px)/1 var(--ga-num);
	letter-spacing: 0.12em;
	text-shadow: 0 0 18px rgba(255, 216, 77, 0.55);
	white-space: nowrap;
	animation: gz-pop-in 0.5s var(--ga-pop) both;
}
@keyframes gz-pop-in {
	from { opacity: 0; transform: scale(0.6) rotate(-6deg); }
}
.gz-online__qr {
	width: 140px;
	height: 140px;
	border: 2px solid var(--gz-ink);
	border-radius: 12px;
	background: #fff;
	image-rendering: pixelated;
}
.gz-online__room {
	display: grid;
	gap: 10px;
}
.gz-online__players {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.gz-online__players li {
	--p: #ff5b00;
	padding: 6px 14px;
	border: 2px dashed var(--gz-ink);
	border-radius: 999px;
	background: #fff;
	color: var(--gz-muted);
	font-weight: 700;
	font-size: 14px;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s var(--ga-pop);
}
.gz-online__players li.is-p2 {
	--p: #2f6fd6;
}
.gz-online__players li.is-in {
	border-style: solid;
	background: var(--p);
	color: #fff;
	transform: scale(1.04);
}
.gz-online__players li.is-away {
	opacity: 0.6;
}
.gz-online__status {
	font: 700 14px/1.5 var(--ga-brandfont);
	color: var(--gz-ink);
}
.gz-online__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.gz-online__actions .ga-play {
	margin-top: 0;
}
.gz-online__actions .ga-play:disabled {
	background: var(--ga-line-strong, #d8cebb);
	color: var(--gz-muted);
	box-shadow: 0 4px 0 var(--gz-ink);
	cursor: default;
	transform: none;
}
.gz-online__err {
	padding: 10px 14px;
	border: 2px solid var(--gz-ng);
	border-radius: 14px;
	background: #fdebe7;
	color: #8f2414;
	font-weight: 700;
	font-size: 14px;
}

/* 舞台（相手が上・自分が下） */
.gz-stage--online {
	grid-template-rows: minmax(0, 1fr);
	background:
		radial-gradient(circle at 50% 0%, rgba(47, 111, 214, 0.18), transparent 50%),
		radial-gradient(circle at 50% 100%, rgba(255, 91, 0, 0.18), transparent 50%),
		var(--gz-ground);
}
.gz-stage--online .gz-body {
	padding: 0;
	overflow: hidden;
}
.gz-on {
	position: relative;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	height: 100%;
}
.gz-on__opp,
.gz-on__me {
	--p: #2f6fd6;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: var(--gz-ink);
	color: #f1ede6;
}
.gz-on__opp {
	padding-top: calc(10px + env(safe-area-inset-top, 0px));
	box-shadow: inset 0 -4px 0 var(--p);
}
.gz-on__me {
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	box-shadow: inset 0 4px 0 var(--p);
}
.gz-on__opp .gz-vs__name,
.gz-on__me .gz-vs__name {
	flex: none;
	border-color: #f1ede6;
	background: var(--p);
	white-space: nowrap;
}
.gz-on .gz-vs__pips {
	flex-wrap: wrap;
	min-width: 0;
}
@media (max-width: 420px) {
	.gz-on .gz-vs__pips i {
		width: 11px;
		height: 11px;
	}
	.gz-on__state {
		font-size: 12px;
		padding: 2px 8px;
	}
}
.gz-on__opp .gz-vs__pts,
.gz-on__me .gz-vs__pts {
	margin-left: auto;
	color: #fff;
	font-size: 32px;
}
.gz-on__me .gz-quit,
.gz-on__me .gz-sound {
	border-color: #f1ede6;
}
.gz-on .gz-vs__pips i {
	border-color: #f1ede6;
	background: transparent;
}
.gz-on .gz-vs__pips i.is-on {
	background: var(--p);
}
.gz-on__state {
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
}
.gz-on__state:empty {
	display: none;
}
.gz-on__state.is-buzz {
	background: #ffd84d;
	color: var(--gz-ink);
	animation: gz-bump 0.42s var(--gz-pop);
}
.gz-on__state.is-win {
	background: var(--p);
	color: #fff;
}
.gz-on__state.is-lose {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(241, 237, 230, 0.7);
}
.gz-on__dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #5ad08a;
	box-shadow: 0 0 8px #5ad08a;
}
.gz-on__dot.is-away {
	background: #d2381c;
	box-shadow: 0 0 8px #d2381c;
	animation: gt-blink 1s steps(2, jump-none) infinite;
}
.gz-on__main {
	display: grid;
	align-content: center;
	gap: 12px;
	width: 100%;
	max-width: 760px;
	min-height: 0;
	margin: 0 auto;
	padding: 16px;
	overflow-y: auto;
}
.gz-on__round {
	justify-self: center;
	font: 400 18px/1 var(--gz-num);
	letter-spacing: 0.2em;
	color: var(--gz-muted);
}
.gz-on__main .gz-vs__tag {
	justify-self: center;
}
.gz-on__q {
	min-height: 2.9em;
	font: 700 clamp(19px, 3.6vw, 27px)/1.45 var(--gz-brand);
	color: var(--gz-ink);
	text-align: center;
	text-wrap: balance;
}
.gz-on__timer {
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(29, 24, 19, 0.12);
}
.gz-on__timer i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #ffd84d, #ff5b00);
	transform-origin: left;
	will-change: transform;
}
.gz-on__choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.gz-on__choices .gz-vs__choice {
	--p: #ff5b00;
	min-height: 76px;
	font-size: clamp(16px, 2.6vw, 20px);
}
.gz-on__choices .gz-vs__choice.is-picked {
	transform: translateY(4px);
	box-shadow: 0 1px 0 var(--gz-ink);
}
.gz-on__choices .gz-vs__choice.is-hold {
	border-color: #c79a00;
	background: #fff8d6;
	animation: gz-hot 0.45s ease-in-out infinite alternate;
}
.gz-on__note {
	min-height: 1.6em;
	text-align: center;
	font: 700 14px/1.5 var(--gz-brand);
	color: var(--gz-ink);
}
.gz-on__mark.is-o,
.gz-on__mark.is-x,
.gz-on__mark.is-them,
.gz-on__mark.is-none,
.gz-on__mark.is-win,
.gz-on__mark.is-lose {
	animation: gz-mark 1s var(--gz-pop) forwards;
}
.gz-on__mark.is-o {
	color: #ff5b00;
}
.gz-on__mark.is-x {
	color: #d2381c;
	animation-name: gz-mark-x;
}
.gz-on__mark.is-them,
.gz-on__mark.is-none {
	font: 700 clamp(30px, 8vw, 60px)/1.2 var(--gz-brand);
	color: #2f6fd6;
	text-shadow: 3px 3px 0 var(--gz-ink);
}
.gz-on__mark.is-none {
	color: var(--gz-muted);
}
.gz-on__mark.is-win,
.gz-on__mark.is-lose {
	animation-name: gz-mark-final;
}
.gz-on__mark.is-win {
	color: #ffd84d;
}
.gz-on__mark.is-lose {
	color: #f1ede6;
}
.gz-on__end-note {
	font-size: 13px;
	color: var(--gz-muted);
	text-align: center;
}

/* =========================================================
 |  ラッシュの週替わり（inc/games/zone-week.php）
 +=========================================================*/

/* タイトル画面の「今週の 15 枚」 */
.gz-week {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px 10px 10px;
	border: 2px solid var(--gz-ink);
	border-radius: 16px;
	background:
		repeating-linear-gradient(-45deg, rgba(255, 91, 0, 0.08) 0 10px, transparent 10px 20px),
		var(--gz-paper);
}
.gz-week__no {
	flex: none;
	display: grid;
	place-items: center;
	min-width: 70px;
	padding: 6px 8px 8px;
	border-radius: 12px;
	background: var(--ga-screen, #17120e);
	color: #ffb071;
	font: 400 28px/1 var(--ga-num);
	text-shadow: 0 0 14px rgba(255, 91, 0, 0.7);
}
.gz-week__no small {
	font-size: 10px;
	letter-spacing: 0.3em;
	color: rgba(255, 255, 255, 0.7);
	text-shadow: none;
}
.gz-week__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}
.gz-week__h {
	display: grid;
	font: 700 16px/1.35 var(--ga-brandfont);
	color: var(--gz-ink);
}
.gz-week__h span {
	font: 400 12px/1.5 system-ui, sans-serif;
	color: var(--gz-muted);
}
.gz-week__nums {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 12px;
	font-size: 12px;
	color: var(--gz-muted);
}
.gz-week__nums b {
	font: 400 16px/1 var(--ga-num);
	color: var(--gz-ink);
	font-variant-numeric: tabular-nums;
}
.gz-week__mine {
	justify-self: start;
	margin-top: 2px !important;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--gz-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
/* 舞台の帯の「WEEK #3・本番」 */
.gz-weektag {
	padding: 3px 9px;
	border: 2px solid var(--gz-ink);
	border-radius: 999px;
	background: #ffd84d;
	color: var(--gz-ink);
	font: 400 13px/1.2 var(--gz-num);
	letter-spacing: 0.06em;
	white-space: nowrap;
}
@media (max-width: 420px) {
	.gz-weektag {
		display: none;
	}
}
/* 結果の「今週のみんな」と分布 */
.gz-res__more {
	display: grid;
	gap: 24px;
}
.gz-weekres {
	display: grid;
	gap: 10px;
	padding: 16px;
	border: 2px solid var(--gz-ink);
	border-radius: 18px;
	background: var(--gz-ground);
}
.gz-weekres__lead {
	font: 700 15px/1.5 var(--ga-brandfont);
	color: var(--gz-ink);
}
.gz-weekres__next {
	font-size: 13px;
	color: var(--gz-muted);
}
.gz-weekres__rank {
	justify-self: start;
	padding: 6px 14px;
	border: 2px solid var(--gz-ink);
	border-radius: 999px;
	background: #fff;
	color: var(--gz-ink);
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
}
.gz-weekres__rank.is-in {
	background: #ffd84d;
}
.gz-dist {
	display: grid;
	gap: 5px;
}
.gz-dist__row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 72px;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--gz-muted);
}
.gz-dist__label {
	font: 400 13px/1 var(--ga-num);
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.gz-dist__track {
	height: 16px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(29, 24, 19, 0.08);
}
.gz-dist__bar {
	display: block;
	width: var(--w, 0%);
	min-width: 4px;
	height: 100%;
	border-radius: inherit;
	background: var(--ga-line-strong, #d8cebb);
	transform-origin: left;
	animation: gz-grow 0.6s var(--ga-out) both;
	animation-delay: calc(var(--d, 0) * 50ms + 300ms);
}
.gz-dist__row.is-mine {
	color: var(--gz-ink);
	font-weight: 800;
}
.gz-dist__row.is-mine .gz-dist__bar {
	background: var(--ga-c, #ff5b00);
}
@keyframes gz-grow {
	from { transform: scaleX(0); }
}
/* ゲームセンターの札の「WEEK #3」 */
.ga-zone__week {
	position: absolute;
	right: 12px;
	top: 12px;
	z-index: 2;
	padding: 2px 9px;
	border: 2px solid var(--ga-ink);
	border-radius: 999px;
	background: var(--ga-ink);
	color: #ffb071;
	font: 400 13px/1.3 var(--ga-num);
	letter-spacing: 0.1em;
}

/* =========================================================
 |  ゲームセンターの札（template-parts/games/arcade.php の .ga-zone）
 +=========================================================*/

.ga-zone {
	display: grid;
	gap: 14px;
	margin-top: 30px;
}
.ga-zone__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
}
.ga-zone__head p {
	font-size: 14px;
	color: var(--ga-muted);
}
.ga-zone__rank {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 2px solid var(--ga-ink);
	border-radius: 999px;
	background: #ffd84d;
	color: var(--ga-ink);
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
	box-shadow: 0 3px 0 var(--ga-ink);
}
.ga-zone__rank:hover {
	color: var(--ga-ink);
	transform: translateY(-1px);
}
.ga-zone__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 16px;
}
.ga-zone__card {
	--ga-c: #ff5b00;
}
.ga-zone__link {
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100%;
	overflow: hidden;
	border: 3px solid var(--ga-ink);
	border-radius: 22px;
	background: var(--ga-surface);
	color: var(--ga-text);
	text-decoration: none;
	box-shadow: 6px 6px 0 var(--ga-ink);
	transition: transform 0.15s var(--ga-pop), box-shadow 0.15s ease;
}
.ga-zone__link:hover {
	color: var(--ga-text);
	transform: translate3d(-2px, -3px, 0) rotate(-0.5deg);
	box-shadow: 9px 9px 0 var(--ga-ink);
}
.ga-zone__link:active {
	transform: translate3d(3px, 3px, 0);
	box-shadow: 2px 2px 0 var(--ga-ink);
}
.ga-zone__screen {
	position: relative;
	display: grid;
	place-items: center;
	height: 158px;
	overflow: hidden;
	border-bottom: 3px solid var(--ga-ink);
	background:
		radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ga-c) 42%, transparent), transparent 64%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 4px),
		var(--ga-screen, #17120e);
	contain: paint;
	isolation: isolate;
	--gz-c: var(--ga-c);
}
.ga-zone__card.is-type .ga-zone__screen {
	background:
		radial-gradient(circle at 50% 45%, rgba(90, 208, 138, 0.35), transparent 64%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 4px),
		var(--ga-screen, #17120e);
}
.ga-zone__new {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 2;
	padding: 2px 9px;
	border: 2px solid var(--ga-ink);
	border-radius: 999px;
	background: #ffd84d;
	color: var(--ga-ink);
	font: 400 13px/1.3 var(--ga-num);
	letter-spacing: 0.14em;
}
.ga-zone__body {
	display: grid;
	align-content: start;
	gap: 4px;
	padding: 14px 16px 16px;
}
.ga-zone__title {
	font: 700 19px/1.35 var(--ga-brandfont);
	color: var(--ga-ink);
}
.ga-zone__sub {
	font-size: 13px;
	color: var(--ga-muted);
}
.ga-zone__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-top: 8px;
	font-size: 12px;
	color: var(--ga-muted);
}
.ga-zone__foot b {
	font: 400 16px/1 var(--ga-num);
	color: var(--ga-ink);
}
.ga-zone__mine {
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--ga-ink);
	color: #fff;
	font-weight: 700;
}
.ga-zone__mine b {
	color: #ffb071;
}
.ga-zone__go {
	margin-left: auto;
	padding: 5px 14px;
	border: 2px solid var(--ga-ink);
	border-radius: 999px;
	background: var(--ga-c);
	color: var(--ga-on, #fff);
	font: 400 15px/1 var(--ga-num);
	letter-spacing: 0.14em;
}
.ga-zone__card.is-type .ga-zone__go {
	background: var(--ga-ink);
	color: #5ad08a;
}

/* =========================================================
 |  動きを減らす
 +=========================================================*/

@media (prefers-reduced-motion: reduce) {
	.gz-attract *,
	.gz-stage,
	.gz-stage *,
	.gz-stage *::before,
	.gz-stage *::after,
	.gz-res,
	.gz-res *,
	.ga-zone__screen *,
	.gz-dist__bar {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0ms !important;
		transition-duration: 0.01ms !important;
	}
	.gz-res__stamp {
		opacity: 1;
		transform: rotate(-14deg);
	}
	.gz-stage.is-fever::before {
		animation: none;
	}
	.gz-at-cover {
		transform: translate3d(100%, 0, 0);
	}
	.gz-at-cpm {
		opacity: 1;
		transform: none;
	}
}
@media (forced-colors: active) {
	.gz-choice.is-right,
	.gz-choice.is-answer,
	.gz-vs__choice.is-right,
	.gz-vs__choice.is-answer {
		outline: 4px solid Highlight;
	}
	.gz-choice.is-wrong,
	.gz-vs__choice.is-wrong {
		outline: 4px dashed CanvasText;
	}
}