/* HomeScreen intro box (matches GameScreen, lighter typography) */
.home-intro-box {
	background: linear-gradient(90deg, #e3f6fd 0%, #fafdff 100%);
	border: 1.5px solid #b6e0fa;
	border-radius: 12px;
	box-shadow: 0 2px 10px 0 rgba(14, 165, 233, 0.06);
	padding: 16px 18px 10px 18px;
	margin: 0 auto 22px auto;
	max-width: 540px;
	text-align: center;
	font-size: 0.93em;
	font-weight: 450;
	line-height: 1.35;
	color: #2a2a2a;
}
/* GameScreen contained boxes for intro and final/explanation */
.game-intro-box {
	background: linear-gradient(90deg, #e3f6fd 0%, #fafdff 100%);
	border: 1.5px solid #b6e0fa;
	border-radius: 12px;
	box-shadow: 0 2px 10px 0 rgba(14, 165, 233, 0.06);
	padding: 16px 18px 10px 18px;
	margin-bottom: 18px;
	max-width: 540px;
	text-align: center;
}
.game-intro-label {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #3ba1c9;
	margin: 0 0 4px 0;
}
.game-final-box {
	background: linear-gradient(90deg, #fdf6e3 0%, #fffdfa 100%);
	border: 1.5px solid #fbbf24;
	border-radius: 12px;
	box-shadow: 0 2px 10px 0 rgba(251, 191, 36, 0.07);
	padding: 16px 18px 10px 18px;
	margin-top: 18px;
	max-width: 540px;
	text-align: center;
}
.game-final-label {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #b8890b;
	margin: 0 0 4px 0;
}
/* HomeScreen branding refinement */
.home-logo {
	display: block;
	margin: 0 auto 18px auto;
	width: 270px;
	max-width: 98vw;
	filter: drop-shadow(0 2px 8px #0001);
	transition: width 0.2s;
}

@media (max-width: 600px) {
	.home-logo {
		width: 170px;
	}
}

.footer-isologo.prominent {
	display: block;
	margin: 0 auto 15px auto;
	width: 170px;
	max-width: 45vw;
	opacity: 1;
	filter: none;
	transition: width 0.2s;
}

@media (min-width: 900px) {
	.footer-isologo.prominent {
		width: 180px;
	}
}

@media (max-width: 600px) {
	.footer-isologo.prominent {
		width: 130px;
	}
}
@media (max-width: 400px) {
	.footer-isologo.prominent {
		width: 110px;
	}
}

.home-footer {
	margin-top: 44px;
	text-align: center;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.footer-powered-by {
	font-size: 0.92rem;
	color: #222;
	opacity: 0.58;
	margin-top: 12px;
	margin-bottom: 2px;
	letter-spacing: 0.01em;
	font-weight: 500;
	text-align: center;
	user-select: none;
}

@media (max-width: 600px) {
	.footer-powered-by {
		font-size: 0.82rem;
	}
}
:root {
	color-scheme: light;
	--bg: #f6fafc;
	--text: #111827;
	--muted: #4b5563;
	--card: #ffffff;
	--border: rgba(17, 24, 39, 0.12);
	--primary: #0ea5e9;
	--primary-hover: #0284c7;
	--focus: rgba(14, 165, 233, 0.32);
	--accent-yellow: #fbbf24;
	--shadow: 0 12px 30px rgba(17, 24, 39, 0.08);
	--shadow-soft: 0 8px 18px rgba(17, 24, 39, 0.06);
}

* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
		"Apple Color Emoji", "Segoe UI Emoji";
	color: var(--text);
	background: var(--bg);
	padding: 32px;
}

.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	text-align: left;
}

/* FOOTER */
.site-footer {
	margin-top: 28px;
	text-align: center;
}

.site-footer-text {
	display: inline-block;
	font-size: 0.82rem;
	line-height: 1.4;
	color: rgba(17, 24, 39, 0.55);
}

.site-footer-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(17, 24, 39, 0.35);
	text-underline-offset: 2px;
}

.site-footer-link:hover {
	text-decoration-color: rgba(17, 24, 39, 0.6);
}

.site-footer-link:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 8px;
}

.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: var(--shadow);
	padding: 20px;
}

/* HERO */
.hero {
	margin-bottom: 18px;
}

.hero-card {
	text-align: center;
	position: relative;
	overflow: hidden;
	padding: 28px 22px;
}

.hero-card::before {
	content: "";
	position: absolute;
	left: -120px;
	top: -120px;
	width: 260px;
	height: 260px;
	background: radial-gradient(circle at center, rgba(14, 165, 233, 0.18), rgba(14, 165, 233, 0));
	transform: rotate(10deg);
}

.hero-card::after {
	content: "";
	position: absolute;
	right: -140px;
	bottom: -140px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle at center, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0));
}

.hero-title {
	text-align: center;
	font-size: 2rem;
	margin-bottom: 8px;
}

.brand-logo {
	width: 165px;
	margin: 0 auto 12px auto;
	display: block;
	opacity: 0.9;
}

.hero-subtitle {
	margin: 12px 0 0;
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--muted);
	position: relative;
}

.hero-note {
	margin: 10px 0 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: rgba(17, 24, 39, 0.66);
	position: relative;
}

.hero-actions {
	margin-top: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	position: relative;
}

.hero-actions .primary-button,
.hero-actions .secondary-button {
	width: auto;
	margin-top: 0;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 520px) {
	.hero-actions {
		flex-direction: column;
	}

	.hero-actions .primary-button,
	.hero-actions .secondary-button {
		width: 100%;
	}
}

/* LAYOUT */
.layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 980px) {
	.layout {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

.product-column {
	display: grid;
	gap: 18px;
}

/* BUTTONS */
.primary-button {
	margin-top: 0;
	appearance: none;
	border: 0;
	background: var(--primary);
	color: #fff;
	font-weight: 800;
	font-size: 1rem;
	padding: 12px 18px;
	border-radius: 999px;
	cursor: pointer;
	width: 100%;
	box-shadow: var(--shadow-soft);
	transition: transform 140ms ease, background 140ms ease;
}

.primary-button:hover {
	background: var(--primary-hover);
	transform: translateY(-1px);
}

.primary-button:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

.secondary-button {
	margin-top: 12px;
	appearance: none;
	border: 1px solid var(--border);
	background: rgba(14, 165, 233, 0.06);
	color: var(--text);
	font-weight: 800;
	font-size: 1rem;
	padding: 12px 18px;
	border-radius: 999px;
	cursor: pointer;
	width: 100%;
	transition: background 140ms ease;
}

.secondary-button:hover {
	background: rgba(14, 165, 233, 0.12);
}

.secondary-button:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

/* STATUS */
.status {
	min-height: 1.5em;
	font-size: 0.95rem;
	color: var(--muted);
}

/* SELECTOR */
.selector {
	margin-top: 0;
}

.selector-title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.3;
}

.field {
	margin-top: 12px;
	text-align: left;
}

.label {
	display: block;
	font-size: 0.95rem;
	color: var(--muted);
	margin-bottom: 8px;
}


/* Wheel Picker Styles (global) */
.wheel-picker {
	width: 48px;
	height: 96px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 1px 3px #0001;
	border: 1.5px solid #bbb;
	overflow: hidden;
	user-select: none;
	touch-action: pan-y;
	cursor: grab;
}
.wheel-value {
	width: 100%;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.13rem;
	color: #222;
	opacity: 0.45;
	transition: transform 0.13s cubic-bezier(.4,1.4,.6,1), opacity 0.13s, font-size 0.13s;
	pointer-events: none;
	font-weight: 500;
	position: absolute;
	left: 0;
	top: calc(50% - 16px);
	transform: translateY(0) scale(0.82);
	z-index: 1;
}
.wheel-value.selected {
	font-size: 1.32rem;
	color: #111;
	opacity: 1;
	font-weight: 700;
	z-index: 2;
	text-shadow: 0 2px 8px #0001;
	transform: translateY(-3px) scale(1.22) !important;
}

/* CONTENT */
.meta {
	margin-top: 0;
	text-align: left;
}

.result-row {
	display: grid;
	grid-template-columns: 110px 1fr;
	align-items: baseline;
	gap: 10px;
	padding: 6px 0;
}

.result-label {
	font-size: 0.95rem;
	color: var(--muted);
}

.result-value {
	font-weight: 900;
	letter-spacing: 0.08em;
}

.content-card {
	margin-top: 0;
	text-align: left;
}

.content-title {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.25;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.9;
}

.content-subtitle {
	margin: 8px 0 0;
	font-size: 0.92rem;
	line-height: 1.45;
	color: rgba(17, 24, 39, 0.62);
}

.content-text {
	margin: 12px 0 0;
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--text);
}

.result-question {
	margin: 12px 0 0;
	font-size: 1.1rem;
	line-height: 1.45;
	font-weight: 900;
	color: var(--text);
}

.result-hint {
	margin: 12px 0 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--muted);
}

.answers {
	margin-top: 10px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px;
}

.answer-option {
	appearance: none;
	border: 1px solid var(--border);
	background: #fff;
	color: var(--text);
	border-radius: 16px;
	padding: 14px;
	cursor: pointer;
	text-align: left;
	min-height: 56px;
	transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.answer-option:hover {
	background: rgba(14, 165, 233, 0.06);
	transform: translateY(-1px);
	border-color: rgba(14, 165, 233, 0.35);
}

.answer-option:active {
	transform: translateY(0);
}

.answer-option:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

.answer-option:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.answer-meta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 10px;
	border: 1px solid var(--border);
	font-weight: 900;
	margin-right: 10px;
	background: rgba(251, 191, 36, 0.18);
}

.answer-text {
	font-weight: 800;
	line-height: 1.35;
}

.feedback {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--border);
	font-weight: 900;
}

.feedback--ok {
	background: rgba(14, 165, 233, 0.12);
	border-color: rgba(14, 165, 233, 0.35);
}

.feedback--bad {
	background: rgba(17, 24, 39, 0.06);
}

/* JANUS CONSOLE */
.janus-console {
	margin-top: 0;
	background: rgba(17, 24, 39, 0.02);
	box-shadow: var(--shadow-soft);
}

.janus-console-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.janus-console-title {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.95;
}

.janus-console-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

@media (min-width: 720px) {
	.janus-console-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.janus-kv {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid rgba(17, 24, 39, 0.1);
	background: rgba(17, 24, 39, 0.03);
}

.janus-k {
	font-size: 12px;
	opacity: 0.82;
}

.janus-v {
	font-size: 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
		monospace;
	font-variant-numeric: tabular-nums;
	opacity: 0.95;
	text-align: right;
	max-width: 62%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.protocol-layer {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(17, 24, 39, 0.1);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.protocol-title {
	font-size: 12px;
	opacity: 0.8;
}

.badges {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.badge {
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(14, 165, 233, 0.22);
	background: rgba(14, 165, 233, 0.08);
	font-size: 12px;
	opacity: 0.95;
}

.badge[data-state="inactive"] {
	opacity: 0.55;
	border-color: rgba(17, 24, 39, 0.12);
	background: rgba(17, 24, 39, 0.03);
}

@media (max-width: 520px) {
	body {
		padding: 18px;
	}
}