/*
 * 今日の挑戦（/games/daily/）。template-parts/games/daily-page.php・assets/js/games-daily.js
 *
 * タイトル画面はほかのゲームと同じ .gt-*（games-brand.css）、舞台は .gs（games-stage.css）を使う。
 * ここにあるのは、この画面だけのもの: 画面の「#8」・舞台の時計・ボタンの選択肢・結果（点・🟩🟥 の並び・分布・答え合わせ）。
 * ルートの文字サイズは 62.5%（1rem = 10px）なので px で書く。
 */

.gdc {
	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(--ga-text);
}
.gdc *,
.gdc *::before,
.gdc *::after {
	box-sizing: border-box;
}
.gdc :where(h2, h3, p, ol, ul) {
	margin: 0;
	padding: 0;
}
.gdc :where(ol, ul) {
	list-style: none;
}
.gdc [hidden] {
	display: none !important;
}

/* 画面の「#8」 */
.gdc-screen__no {
	display: grid;
	justify-items: center;
	color: #ffb071;
	font: 400 clamp(64px, 9vw, 96px)/0.9 var(--ga-num);
	text-shadow: 0 0 26px rgba(255, 91, 0, 0.75), 5px 5px 0 var(--ga-accent);
	animation: gt-hover 3.2s ease-in-out infinite;
	will-change: transform;
	backface-visibility: hidden;
}
.gdc-screen__no small {
	font-size: 15px;
	letter-spacing: 0.4em;
	color: rgba(255, 255, 255, 0.78);
	text-shadow: none;
	margin-bottom: 6px;
}

/* 舞台の時計（数え上がり） */
.gdc-clock {
	flex: none;
	min-width: 52px;
	font: 400 18px/1 var(--gst-num);
	color: var(--gst-ink);
	text-align: right;
	font-variant-numeric: tabular-nums;
}
/* 選択肢はボタン（フォームが無いので） */
.gst button.lp-choice {
	width: 100%;
	text-align: left;
	font: inherit;
	font-weight: 700;
	color: var(--gst-ink);
}
.gst .is-vs button.lp-choice {
	text-align: center;
}
.gst button.lp-choice:focus-visible {
	outline: 3px solid var(--gst-accent);
	outline-offset: 3px;
}
.gdc-rate {
	font: 700 13px/1.5 system-ui, sans-serif;
	color: var(--gst-muted);
}

/* ---------- 結果 ---------- */

.gdc-result {
	display: grid;
	gap: 18px;
	margin-top: 22px;
	padding: clamp(20px, 3.6vw, 36px);
	border: 3px solid var(--ga-ink);
	border-radius: 28px;
	background:
		radial-gradient(circle at 100% 0%, rgba(255, 91, 0, 0.16), transparent 42%),
		var(--ga-surface);
	box-shadow: 8px 8px 0 var(--ga-ink);
	outline: none;
}
.gdc-result.is-in {
	animation: gr-drop 0.6s var(--ga-pop) both;
}
@keyframes gr-drop {
	from { opacity: 0; transform: translateY(-36px) rotate(-1.5deg) scale(0.97); }
}
.gdc-result__head {
	display: grid;
	justify-items: start;
	gap: 6px;
}
.gdc-result__eyebrow {
	font: 700 14px/1.4 var(--ga-brandfont);
	color: var(--ga-muted);
}
.gdc-result__score {
	display: flex;
	align-items: baseline;
	gap: 10px;
	color: var(--ga-ink);
}
.gdc-result__score b {
	font: 400 clamp(84px, 14vw, 132px)/0.9 var(--ga-num);
	text-shadow: 5px 5px 0 var(--ga-accent);
	font-variant-numeric: tabular-nums;
}
.gdc-result.is-perfect .gdc-result__score b {
	text-shadow: 5px 5px 0 #2e9e5b;
}
.gdc-result__score span {
	font: 400 32px/1 var(--ga-num);
	color: var(--ga-muted);
}
.gdc-grid {
	display: flex;
	gap: 8px;
}
.gdc-sq {
	width: 34px;
	height: 34px;
	border: 3px solid var(--ga-ink);
	border-radius: 9px;
	transform: rotate(-3deg);
}
.gdc-sq.is-ok {
	background: #2e9e5b;
}
.gdc-sq.is-ng {
	background: #d2381c;
}
.gdc-result.is-in .gdc-sq {
	animation: gdc-pop 0.42s var(--ga-pop) both;
	animation-delay: calc(0.75s + var(--i, 0) * 0.14s);
}
@keyframes gdc-pop {
	from { opacity: 0; transform: scale(2) rotate(-24deg); }
}
.gdc-result__facts {
	font: 700 14px/1.5 system-ui, sans-serif;
	color: var(--ga-muted);
}

.gdc-h {
	font: 700 18px/1.4 var(--ga-brandfont);
	color: var(--ga-ink);
}
.gdc-crowd {
	display: grid;
	gap: 10px;
	padding: 16px 18px;
	border: 2px solid var(--ga-line-strong);
	border-radius: 18px;
	background: var(--ga-ground);
}
.gdc-crowd__lead {
	font-weight: 700;
	color: var(--ga-ink);
}
/* 分布（横の棒・上が満点・自分の点の行は色つき） */
.gdc-dist {
	display: grid;
	gap: 6px;
}
.gdc-dist__row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 92px;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--ga-muted);
}
.gdc-dist__label {
	font: 400 16px/1 var(--ga-num);
	color: var(--ga-ink);
	text-align: right;
}
.gdc-dist__track {
	position: relative;
	height: 16px;
	border-radius: 999px;
	background: rgba(29, 24, 19, 0.08);
	overflow: hidden;
}
.gdc-dist__bar {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--w, 0%);
	min-width: 2px;
	border-radius: 999px;
	background: var(--ga-line-strong);
	transform-origin: left;
}
.gdc-result.is-in .gdc-dist__bar {
	animation: gdc-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	animation-delay: calc(1.5s + var(--d, 0) * 0.06s);
}
@keyframes gdc-grow {
	from { transform: scaleX(0); }
}
.gdc-dist__row.is-mine .gdc-dist__bar {
	background: var(--ga-accent);
}
.gdc-dist__row.is-mine {
	color: var(--ga-ink);
	font-weight: 800;
}
.gdc-dist__n {
	font-variant-numeric: tabular-nums;
}

.gdc-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.gdc-share .ga-play {
	margin-top: 0;
	padding: 11px 22px 10px 24px;
	font: 700 18px/1 var(--ga-brandfont);
	letter-spacing: 0.04em;
}
.gdc-next {
	font-size: 14px;
	color: var(--ga-muted);
}
.gdc-next b {
	font: 400 20px/1 var(--ga-num);
	color: var(--ga-ink);
	font-variant-numeric: tabular-nums;
}
.gdc-review {
	display: grid;
	gap: 10px;
}
.gdc-review__item {
	display: grid;
	gap: 4px;
	padding: 12px 16px 12px 18px;
	border: 2px solid var(--ga-line-strong);
	border-left-width: 8px;
	border-radius: 14px;
	background: var(--ga-surface);
	font-size: 14px;
}
.gdc-review__item.is-ok {
	border-left-color: #2e9e5b;
}
.gdc-review__item.is-ng {
	border-left-color: #d2381c;
}
.gdc-review__q {
	font-weight: 800;
	color: var(--ga-ink);
}
.gdc-review__a {
	color: var(--ga-text);
}
.gdc-review__item.is-ok .gdc-review__a {
	color: #1e7a45;
	font-weight: 700;
}
.gdc-review__item.is-ng .gdc-review__a {
	color: #c0341d;
	font-weight: 700;
}
.gdc-review__right {
	font-weight: 700;
	color: #1e7a45;
}
.gdc-review__why {
	color: var(--ga-muted);
}
.gdc-review__rate {
	justify-self: start;
	padding: 1px 10px;
	border-radius: 999px;
	background: var(--ga-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
.gdc-more {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.gdc-how {
	margin-top: 40px;
}
.gdc-how__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 12px;
	margin-top: 12px !important;
}
.gdc-how__list li {
	padding: 14px 16px;
	border: 2px solid var(--ga-line-strong);
	border-radius: 14px;
	background: var(--ga-surface);
	font-size: 14px;
	color: var(--ga-muted);
}
.gdc-how__list b {
	display: block;
	font: 700 15px/1.5 var(--ga-brandfont);
	color: var(--ga-ink);
}

@media (prefers-reduced-motion: reduce) {
	.gdc *,
	.gdc *::before,
	.gdc *::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
	}
}

.gdc-page {
	background: var(--ga-ground);
	padding: 18px 16px 110px;
}

/* ---------- 検定ウィーク（inc/games/daily-week.php） ---------- */

.gdc-screen__week {
	position: absolute;
	top: 14px;
	left: 50%;
	padding: 3px 10px;
	border: 2px solid #ffd84d;
	border-radius: 999px;
	color: #ffd84d;
	font: 400 13px/1.2 var(--ga-num);
	letter-spacing: 0.16em;
	white-space: nowrap;
	transform: translateX(-50%);
	text-shadow: 0 0 10px rgba(255, 216, 77, 0.6);
}
.gdc-tag-week {
	background: #ffd84d !important;
	color: var(--ga-ink) !important;
}
.gdc-week {
	display: grid;
	gap: 14px;
	margin-top: 22px;
	padding: clamp(18px, 3vw, 28px);
	border: 3px solid var(--ga-ink);
	border-radius: 24px;
	background:
		repeating-linear-gradient(-45deg, rgba(255, 216, 77, 0.18) 0 12px, transparent 12px 24px),
		var(--ga-surface);
	box-shadow: 6px 6px 0 var(--ga-ink);
}
.gdc-week.is-next {
	background: var(--ga-surface);
	box-shadow: none;
	border-style: dashed;
}
.gdc-week__head {
	display: grid;
	gap: 4px;
}
.gdc-week__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 700 14px/1.2 var(--ga-brandfont);
	color: var(--ga-ink);
}
.gdc-week__kicker span {
	padding: 4px 9px 3px;
	border-radius: 6px;
	background: var(--ga-ink);
	color: #ffd84d;
	font: 400 13px/1 var(--ga-num);
	letter-spacing: 0.16em;
}
.gdc-week__kicker b {
	font: 400 20px/1 var(--ga-num);
}
.gdc-week__lead {
	max-width: 46em;
	font-size: 14px;
	color: var(--ga-text);
}
.gdc-week__dates {
	font-size: 13px;
	color: var(--ga-muted);
}
.gdc-week__dates b {
	font: 400 16px/1 var(--ga-num);
	color: var(--ga-ink);
}
.gdc-week__days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
}
.gdc-week__day {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 4px;
	padding: 8px 2px 10px;
	border: 2px dashed var(--ga-line-strong);
	border-radius: 14px;
	background: #fff;
	text-align: center;
}
.gdc-week__day.is-today {
	border: 3px solid var(--ga-accent);
	box-shadow: 0 0 0 4px rgba(255, 91, 0, 0.15);
}
.gdc-week__day.is-future {
	opacity: 0.55;
}
.gdc-week__day.is-done {
	border-style: solid;
	border-color: var(--ga-ink);
	background: #fff8d6;
}
.gdc-week__day.is-perfect {
	background: #e3f5ea;
}
.gdc-week__day.is-miss .gdc-week__score {
	color: var(--ga-muted);
	font-size: 13px;
}
.gdc-week__dow {
	font-size: 12px;
	font-weight: 800;
	color: var(--ga-muted);
}
.gdc-week__score {
	font: 400 clamp(16px, 3vw, 22px)/1 var(--ga-num);
	color: var(--ga-ink);
	white-space: nowrap;
}
.gdc-week__mini {
	display: flex;
	gap: 2px;
	min-height: 7px;
}
.gdc-week__mini i {
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: #d2381c;
}
.gdc-week__mini i.is-ok {
	background: #2e9e5b;
}
/* 今日のスタンプが押される */
.gdc-week__day.is-stamp {
	animation: gdc-stamp 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.gdc-week__day.is-done::after {
	content: "済";
	position: absolute;
	top: -8px;
	right: -6px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border: 2px solid #d2381c;
	border-radius: 50%;
	background: #fff;
	color: #d2381c;
	font-size: 11px;
	font-weight: 800;
	transform: rotate(-12deg);
}
@keyframes gdc-stamp {
	0% { transform: scale(1.6) rotate(-8deg); opacity: 0; }
	70% { transform: scale(0.94) rotate(1deg); opacity: 1; }
	100% { transform: none; }
}
.gdc-week__sum {
	font: 700 15px/1.5 var(--ga-brandfont);
	color: var(--ga-ink);
}
.gdc-week__badge {
	justify-self: start;
	padding: 4px 14px;
	border: 2px solid var(--ga-ink);
	border-radius: 999px;
	background: var(--ga-ink);
	color: #ffd84d;
	font-weight: 800;
	font-size: 14px;
}
.gdc-week__badge.is-full {
	background: #ffd84d;
	color: var(--ga-ink);
	animation: gdc-stamp 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.gdc-week__review {
	padding: 8px 12px;
	border-left: 5px solid var(--ga-accent);
	border-radius: 8px;
	background: var(--ga-accent-soft);
	font-size: 14px;
	font-weight: 700;
	color: var(--ga-ink);
}
.gdc-week__games p {
	font-size: 13px;
	font-weight: 700;
	color: var(--ga-muted);
}
.gdc-week__games ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px !important;
}
.gdc-week__games a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 4px 14px;
	border: 2px solid var(--ga-ink);
	border-radius: 999px;
	background: #fff;
	color: var(--ga-ink);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	box-shadow: 0 3px 0 var(--ga-ink);
}
@media (max-width: 480px) {
	.gdc-week__days {
		gap: 4px;
	}
	.gdc-week__mini i {
		width: 5px;
		height: 5px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.gdc-week__day.is-stamp,
	.gdc-week__badge.is-full {
		animation: none;
	}
}

/* 週間ランキングの一言 */
.gdc-rank a {
	display: inline-flex;
	padding: 6px 14px;
	border: 2px solid var(--ga-ink);
	border-radius: 999px;
	background: #fff;
	color: var(--ga-ink);
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
}
.gdc-rank.is-in a {
	background: #ffd84d;
	animation: gdc-stamp 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}