/*
 * ゲームのページのブランドの層（Goodly Arcade）。Docs/games-ux-redesign.md
 *
 * 1. ゲームの共通の部品（札 .ga-tag・押しボタン .ga-play）と色の言葉
 * 2. タイトル画面（template-parts/games/title.php の .gt-*）
 * 3. プラグインが描く紙面（コマンド・タイピング・結果の詳しい紙面）を Goodly の色に寄せる
 *    （プラグインの汎用の青と灰色 → オレンジ・黒の太い枠・クリーム）。並び（レイアウト）は変えない
 * ルートの文字サイズは 62.5%（1rem = 10px）なので px で書く。
 */

:root {
	--ga-ground: var(--guide-bg, #fff4e1);
	--ga-surface: #fff;
	--ga-ink: #1d1813;
	--ga-text: #2b2620;
	--ga-muted: #6f6052;
	--ga-line: #e8e1d4;
	--ga-line-strong: #d8cebb;
	--ga-accent: #ff5b00;
	--ga-accent-soft: #ffedca;
	--ga-screen: #17120e;
	--ga-num: "Din1451Alt", "Bahnschrift", "DIN Alternate", "Arial Narrow", system-ui, sans-serif;
	--ga-brandfont: var(--font-site-brand, "linuxPro-CPL"), "Hiragino Sans", "Noto Sans JP", sans-serif;
	--ga-pop: cubic-bezier(0.2, 1.5, 0.4, 1);
	--ga-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- 1. 共通の部品 ---------- */

.ga-tag {
	display: inline-block;
	padding: 4px 10px 3px;
	border: 2px solid var(--ga-ink);
	border-radius: 999px;
	background: var(--ga-c, var(--ga-accent));
	color: var(--ga-on, #fff);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}
.ga-play {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	padding: 12px 26px 11px 30px;
	border: 3px solid var(--ga-ink);
	border-radius: 999px;
	background: var(--ga-accent);
	color: #fff;
	font: 400 22px/1 var(--ga-num);
	letter-spacing: 0.18em;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 6px 0 var(--ga-ink);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ga-play:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 0 var(--ga-ink);
}
.ga-play:active {
	transform: translateY(5px);
	box-shadow: 0 1px 0 var(--ga-ink);
}
.ga-play:focus-visible {
	outline: 3px solid var(--ga-accent);
	outline-offset: 4px;
}
.ga-play svg {
	animation: ga-nudge 1.4s ease-in-out infinite;
}
@keyframes ga-nudge {
	50% { transform: translateX(3px); }
}

.ga-toast {
	position: fixed;
	left: 50%;
	bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	z-index: 100002;
	max-width: calc(100vw - 32px);
	padding: 10px 18px;
	border: 3px solid var(--ga-ink);
	border-radius: 999px;
	background: var(--ga-ink);
	color: #f1ede6;
	font-size: 14px;
	font-weight: 700;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 20px);
	transition: opacity 0.2s ease, transform 0.3s var(--ga-pop);
}
.ga-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* 白い丸ボタン（結果・今日の挑戦） */
.gr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 6px 20px;
	border: 3px solid var(--ga-ink);
	border-radius: 999px;
	background: var(--ga-surface);
	color: var(--ga-ink);
	font: inherit;
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 4px 0 var(--ga-ink);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.gr-btn:hover {
	color: var(--ga-ink);
	transform: translateY(-1px);
	box-shadow: 0 5px 0 var(--ga-ink);
}
.gr-btn:active {
	transform: translateY(3px);
	box-shadow: 0 1px 0 var(--ga-ink);
}
.gr-btn--next {
	background: var(--ga-accent-soft);
}

.gr-confetti {
	position: fixed;
	inset: 0;
	z-index: 100025;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ---------- 2. タイトル画面 ---------- */

.lp-single-game,
.lp-single-game-result,
.lp-typing-template {
	background: var(--ga-ground);
}
.lp-single-game,
.lp-single-game-result {
	padding: 18px 16px 110px;
}
.lp-single-game > article,
.lp-single-game-result > article {
	max-width: 1080px;
	margin-inline: auto;
}
.gt {
	--ga-c: var(--ga-accent);
	--ga-on: #fff;
	margin-bottom: 22px;
	font: 400 16px/1.75 system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
	color: var(--ga-text);
}
.gt *,
.gt *::before,
.gt *::after {
	box-sizing: border-box;
}
.gt :where(h1, p, ol, dl, dd) {
	margin: 0;
	padding: 0;
}
.gt [hidden] {
	display: none !important;
}
.gt-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	font-size: 13px;
	color: var(--ga-muted);
}
.gt-crumbs li + li::before {
	content: "/";
	margin-right: 10px;
	color: var(--ga-line-strong);
}
.gt-crumbs a {
	color: inherit;
	text-decoration: none;
}
.gt-cabinet {
	display: grid;
	grid-template-columns: minmax(180px, 0.75fr) minmax(0, 1.5fr);
	margin-top: 14px;
	overflow: hidden;
	border: 3px solid var(--ga-ink);
	border-radius: 26px;
	background: var(--ga-surface);
	box-shadow: 8px 8px 0 var(--ga-ink);
}
@media (max-width: 720px) {
	.gt-cabinet {
		grid-template-columns: minmax(0, 1fr);
		box-shadow: 5px 5px 0 var(--ga-ink);
	}
}
.gt-screen {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 220px;
	overflow: hidden;
	/* 中の動き（走査線・浮くアイコン）を、この画面の中だけで描き直す */
	contain: paint;
	isolation: isolate;
	border-right: 3px solid var(--ga-ink);
	background:
		radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--gt-glow, var(--ga-c)) 45%, transparent), transparent 62%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 4px),
		var(--ga-screen);
}
.gt[style*="#1d1813"] .gt-screen {
	--gt-glow: #5ad08a;
}
@media (max-width: 720px) {
	.gt-screen {
		min-height: 150px;
		border-right: 0;
		border-bottom: 3px solid var(--ga-ink);
	}
}
.gt-screen__glyph {
	display: grid;
	place-items: center;
	width: 124px;
	height: 124px;
	border: 3px solid var(--gt-glow, var(--ga-c));
	border-radius: 30px;
	color: var(--gt-glow, var(--ga-c));
	background: color-mix(in srgb, var(--gt-glow, var(--ga-c)) 12%, transparent);
	box-shadow: 0 0 36px color-mix(in srgb, var(--gt-glow, var(--ga-c)) 55%, transparent), inset 0 0 18px color-mix(in srgb, var(--gt-glow, var(--ga-c)) 30%, transparent);
	animation: gt-hover 3.2s ease-in-out infinite;
	will-change: transform;
	backface-visibility: hidden;
}
@media (max-width: 720px) {
	.gt-screen__glyph {
		width: 96px;
		height: 96px;
	}
}
@keyframes gt-hover {
	from { transform: translate3d(0, 0, 0) rotate(0deg); }
	50% { transform: translate3d(0, -6px, 0) rotate(-2deg); }
	to { transform: translate3d(0, 0, 0) rotate(0deg); }
}
/*
 * 走査線。前は background-position を動かしていた＝毎フレーム、画面全体を描き直していた（メインの処理が
 * 混むと止まって、カクついて見えた）。いまは光の帯を transform で滑らせる＝GPU の合成だけで動く。
 */
.gt-screen__scan,
.ga-daily__scan {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
}
.gt-screen__scan::before,
.ga-daily__scan::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 34%;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.07) 42%, rgba(255, 255, 255, 0.11) 50%, rgba(255, 255, 255, 0.07) 58%, transparent);
	transform: translate3d(0, -100%, 0);
	animation: gt-scan 3.6s linear infinite;
	will-change: transform;
}
@keyframes gt-scan {
	from { transform: translate3d(0, -100%, 0); }
	to { transform: translate3d(0, 1000%, 0); }
}
/* 画面が見えていないあいだは止める（games-title.js・games-arcade.js・games-zone.js が付ける） */
.is-offscreen,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after {
	animation-play-state: paused !important;
}
.gt-screen__press {
	position: absolute;
	bottom: 14px;
	font: 400 13px/1 var(--ga-num);
	letter-spacing: 0.3em;
	color: rgba(255, 255, 255, 0.78);
	animation: gt-blink 1.2s steps(2, jump-none) infinite;
}
@keyframes gt-blink {
	50% { opacity: 0.15; }
}
.gt-body {
	display: grid;
	align-content: center;
	gap: 10px;
	padding: clamp(20px, 3.4vw, 36px);
}
.gt-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ga-muted);
}
.gt-title {
	font: 700 clamp(26px, 4vw, 42px)/1.25 var(--ga-brandfont);
	color: var(--ga-ink);
	text-wrap: balance;
}
.gt-sub {
	font: 700 15px/1.5 var(--ga-brandfont);
	color: var(--ga-muted);
}
.gt-lead {
	max-width: 40em;
	font-size: 15px;
	color: var(--ga-text);
}
.gt-nums {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: 4px !important;
	border: 2px solid var(--ga-ink);
	border-radius: 14px;
	background: var(--ga-ground);
	overflow: hidden;
	align-self: start;
	justify-self: start;
}
.gt-nums > div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 2px;
	padding: 8px 16px 9px;
	border-left: 1px dashed var(--ga-line-strong);
}
.gt-nums > div:first-child {
	border-left: 0;
}
.gt-nums dt {
	font-size: 11px;
	font-weight: 700;
	color: var(--ga-muted);
}
.gt-nums dd {
	display: flex;
	align-items: baseline;
	gap: 2px;
}
.gt-nums b {
	font: 400 26px/1 var(--ga-num);
	color: var(--ga-ink);
	font-variant-numeric: tabular-nums;
}
.gt-nums small {
	font-size: 12px;
	color: var(--ga-muted);
}
.gt-mine {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-self: start;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--ga-ink);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}
.gt-mine b {
	color: #ffb071;
	font: 400 16px/1 var(--ga-num);
}
.gt-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-top: 6px;
}
.gt-actions .ga-play {
	margin-top: 0;
}
.gt-hint {
	display: grid;
	gap: 2px;
	font-size: 13px;
	color: var(--ga-muted);
}
.gt-keys kbd {
	display: inline-block;
	min-width: 20px;
	padding: 1px 5px;
	border: 1.5px solid var(--ga-ink);
	border-radius: 5px;
	box-shadow: 0 1.5px 0 var(--ga-ink);
	background: #fff;
	font: 400 12px/1.3 var(--ga-num);
	text-align: center;
	color: var(--ga-ink);
}

/* ---------- 3. プラグインの紙面を Goodly の色に ---------- */

:is(.lp-single-game, .lp-single-game-result, .lp-typing-template) :is(.lp-diagnosis, .lp-result-panel, .lp-related-section) {
	border: 3px solid var(--ga-ink);
	border-radius: 22px;
	background: var(--ga-surface);
	box-shadow: none;
}
:is(.lp-single-game, .lp-single-game-result, .lp-typing-template) :is(.lp-panel-header h2, .lp-result-panel h2, .lp-related-section h2) {
	font-family: var(--ga-brandfont);
	color: var(--ga-ink);
}
:is(.lp-single-game, .lp-single-game-result, .lp-typing-template) :is(.lp-button, .lp-copy-button) {
	border: 3px solid var(--ga-ink);
	border-radius: 999px;
	background: var(--ga-accent);
	color: #fff;
	font-weight: 800;
	box-shadow: 0 4px 0 var(--ga-ink);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
:is(.lp-single-game, .lp-single-game-result, .lp-typing-template) :is(.lp-button, .lp-copy-button):hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 5px 0 var(--ga-ink);
}
:is(.lp-single-game, .lp-single-game-result, .lp-typing-template) :is(.lp-button, .lp-copy-button):active {
	transform: translateY(3px);
	box-shadow: 0 1px 0 var(--ga-ink);
}
:is(.lp-single-game, .lp-single-game-result, .lp-typing-template) :is(.lp-button--secondary, .lp-copy-button) {
	background: var(--ga-surface);
	color: var(--ga-ink);
}
:is(.lp-single-game, .lp-single-game-result, .lp-typing-template) :is(.lp-button--secondary, .lp-copy-button):hover {
	color: var(--ga-ink);
	background: var(--ga-accent-soft);
}
:is(.lp-single-game, .lp-single-game-result) .lp-button:disabled,
:is(.lp-single-game, .lp-single-game-result) .lp-button[aria-disabled="true"] {
	background: var(--ga-line);
	border-color: var(--ga-line-strong);
	color: var(--ga-muted);
	box-shadow: none;
}
:is(.lp-single-game, .lp-single-game-result) :is(.lp-game-meta li, .lp-result-hero__chips li) {
	border: 2px solid var(--ga-ink);
	border-radius: 999px;
	background: var(--ga-surface);
	font-size: 13px;
}
:is(.lp-single-game, .lp-single-game-result) .lp-form-error {
	margin-bottom: 14px;
	padding: 12px 16px;
	border: 3px solid #c0341d;
	border-radius: 16px;
	background: #fdebe7;
	color: #8f2414;
	font-weight: 700;
}
/* 本文（ゲームの概要）は紙に */
.lp-single-game__content {
	margin-top: 28px;
	padding: clamp(18px, 3vw, 30px);
	border: 2px solid var(--ga-line-strong);
	border-radius: 20px;
	background: var(--ga-surface);
}

/* コマンドゲーム: 端末は黒・プロンプトは緑。ミッションの紙は太い枠 */
.lp-single-game .lp-command-terminal {
	border: 3px solid var(--ga-ink);
	border-radius: 16px;
	background: #17120e;
	color: #f1ede6;
}
.lp-single-game .lp-command-terminal__prompt {
	color: #5ad08a;
}
.lp-single-game :is(.lp-command-step, .lp-command-overview, .lp-command-task-brief, .lp-command-learning-panel) {
	border-color: var(--ga-ink);
	border-radius: 18px;
}

/*
 * コマンドゲームの画面の中（第2波）。プラグインの汎用の青（#2f5cff・紺の端末・水色の札）を Goodly の色に。
 * 遊ぶ所（#gt-play）の中だけ。並び（レイアウト）は変えない。
 */
#gt-play .lp-diagnosis-form__topbar {
	border-color: var(--ga-ink);
	border-width: 2px;
	border-radius: 16px;
	background: var(--ga-surface);
}
#gt-play .lp-diagnosis-form__progress-text {
	font-family: var(--ga-num);
	color: var(--ga-ink);
}
#gt-play :is(.lp-diagnosis-form__progress-remaining, .lp-exam-step__meta) {
	color: var(--ga-muted);
}
#gt-play .lp-diagnosis-form__progress-bar {
	background: var(--ga-line);
	border-radius: 999px;
}
#gt-play .lp-diagnosis-form__progress-fill {
	background: var(--ga-accent);
	border-radius: 999px;
}
#gt-play .lp-diagnosis-form__step-dot {
	background: var(--ga-line-strong);
	border-color: var(--ga-line-strong);
}
#gt-play .lp-diagnosis-form__step-dot.is-done {
	background: var(--ga-ink);
	border-color: var(--ga-ink);
}
#gt-play .lp-diagnosis-form__step-dot.is-current {
	background: var(--ga-accent);
	border-color: var(--ga-ink);
}
#gt-play .lp-diagnosis-form__helper {
	border-color: var(--ga-line-strong);
	border-radius: 12px;
	background: var(--ga-ground);
	color: var(--ga-text);
}
#gt-play .lp-diagnosis-step__index {
	border: 2px solid var(--ga-ink);
	background: var(--ga-ink);
	color: #5ad08a;
	font-family: var(--ga-num);
	letter-spacing: 0.06em;
}
#gt-play .lp-command-run {
	border: 3px solid var(--ga-ink);
	border-radius: 16px;
	background: #17120e;
}
#gt-play .lp-command-run__screen {
	color: #f1ede6;
}
#gt-play .lp-command-run__screen li {
	background: transparent;
}
#gt-play :is(.lp-command-run__prompt, .lp-command-run__prompt span) {
	color: #5ad08a;
}
#gt-play :is(.lp-command-run__status, .lp-command-terminal__label) {
	color: rgba(241, 237, 230, 0.66);
}
#gt-play :is(.lp-command-task-card, .lp-command-task-brief__state, .lp-command-disclosure) {
	border-color: var(--ga-line-strong);
}
#gt-play :is(.lp-command-task-command-list__group, .lp-command-task-state__node-type, .lp-command-task-state__mode) {
	border-color: var(--ga-ink);
	background: var(--ga-accent-soft);
	color: var(--ga-ink);
}
#gt-play .lp-diagnosis-form__actions {
	border: 2px solid var(--ga-ink);
	border-radius: 18px;
	background: rgba(255, 253, 247, 0.96);
}

/* タイピング: プラグインの濃紺の見出しはタイトル画面に置き換わる。打つ画面は太い枠 */
.lp-typing-template {
	width: auto;
	max-width: none;
	padding: 18px 16px 110px;
}
.lp-typing-template > article {
	max-width: 1080px;
	margin-inline: auto;
}
.lp-typing-template .lp-typing-shell {
	border: 3px solid var(--ga-ink);
	border-radius: 22px;
	box-shadow: 8px 8px 0 var(--ga-ink);
}
.lp-typing-template :is(.lp-typing-hero__eyebrow, .lp-typing-shell__eyebrow, .lp-typing-kicker) {
	color: var(--ga-accent);
}
.lp-typing-template .lp-typing-seo-note,
.lp-typing-template .lp-typing-intro {
	padding: clamp(18px, 3vw, 30px);
	border: 2px solid var(--ga-line-strong);
	border-radius: 20px;
	background: var(--ga-surface);
}

/* Club と連携の小さな帯（遊んだあとに出す・プラグインの色を Goodly に） */
:is(.lp-single-game, .lp-typing-template) .gc-link-slot:not(:empty) {
	margin-top: 22px;
}

@media (prefers-reduced-motion: reduce) {
	.gt *,
	.ga-play svg {
		animation: none !important;
	}
}

/* キーボードの案内は、指で触る端末では出さない */
@media (pointer: coarse) {
	.gt-keys {
		display: none;
	}
}