:root {
	color-scheme: dark;
	font-family: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
	--ink: #f7f6f2;
	--muted: #999da6;
	--faint: #5d626d;
	--surface: #101216;
	--surface-raised: #17191f;
	--line: #2a2d35;
	--accent: #ff315f;
	--help-red: #ff315f;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@font-face {
	font-family: "Nok";
	src: url("fonts/nok.otf") format("opentype");
	font-display: swap;
	font-style: normal;
	font-weight: 400;
}

* {
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}

body {
	margin: 0;
	background: #000;
	color: var(--ink);
	touch-action: auto;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

button,
input {
	font: inherit;
}

button {
	color: inherit;
}

button:focus-visible,
input:focus-visible + span,
input:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

[hidden] {
	display: none !important;
}

body[data-game-state="idle"] #board {
	opacity: 0;
}

body[data-game-state="idle"] #game-ui,
body[data-game-state="idle"] #version,
body[data-game-state="idle"] #update-available {
	display: none !important;
}

body[data-game-state="idle"][data-room-mode="local"] .brand,
body[data-game-state="idle"][data-room-mode="local"] #settings-button {
	display: none;
}

body[data-game-state="idle"][data-room-mode="connected"] #board {
	opacity: 1;
}

body[data-game-state="idle"][data-room-mode="connected"] .topbar {
	display: flex !important;
}

body[data-game-state="idle"][data-room-mode="connected"] #game-ui {
	display: grid !important;
}

#board {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	touch-action: none;
}

.topbar {
	position: fixed;
	z-index: 4;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: calc(18px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 18px calc(20px + env(safe-area-inset-left));
	pointer-events: none;
}

.brand {
	margin: 0;
	font-family: "Nok", "Segoe Print", "Bradley Hand", cursive;
	font-size: 1.8rem;
	font-synthesis: none;
	font-weight: 400;
	letter-spacing: 0.015em;
	line-height: 1;
	pointer-events: auto;
	white-space: nowrap;
}

.brand span {
	color: var(--accent);
}

.topbar-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.room-status-button {
	display: none;
	width: 44px;
	min-width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 50%;
	color: #e6e7e9;
	background: rgb(8 9 12 / 72%);
	backdrop-filter: blur(14px);
	cursor: pointer;
	pointer-events: auto;
	font-family: ui-rounded, "Avenir Next", "Segoe UI", sans-serif;
	font-size: 1.16rem;
	font-weight: 700;
	line-height: 1;
	transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

body[data-room-mode="connected"] .room-status-button:not([hidden]) {
	display: inline-flex;
}

.room-status-button:hover {
	border-color: rgb(255 255 255 / 30%);
	background: rgb(24 26 31 / 88%);
}

.room-status-button:active {
	transform: scale(0.96);
}

.icon-button {
	display: grid;
	width: 44px;
	height: 44px;
	padding: 0;
	place-items: center;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 50%;
	background: rgb(8 9 12 / 72%);
	backdrop-filter: blur(14px);
	cursor: pointer;
	pointer-events: auto;
	transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.icon-button:hover {
	border-color: rgb(255 255 255 / 30%);
	background: rgb(24 26 31 / 88%);
}

.icon-button:active {
	transform: scale(0.94);
}

.icon-button svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.help-button {
	border-color: rgb(255 49 95 / 62%);
	color: var(--help-red);
	background: rgb(18 7 11 / 88%);
	box-shadow: 0 0 24px rgb(255 49 95 / 16%);
}

.help-button:hover {
	border-color: var(--help-red);
	color: #fff;
	background: #b9183d;
	box-shadow: 0 0 30px rgb(255 49 95 / 28%);
}

.help-button svg {
	stroke-width: 2.15;
}

.room-entry-button {
	position: fixed;
	z-index: 5;
	right: 16px;
	bottom: calc(24px + env(safe-area-inset-bottom));
	left: 16px;
	display: none;
	width: min(100%, 270px);
	min-height: 56px;
	align-items: center;
	justify-content: center;
	gap: 11px;
	margin: auto;
	padding: 0 22px;
	border: 1px solid rgb(255 49 95 / 68%);
	border-radius: 999px;
	color: #fff;
	background: #151116;
	box-shadow: 0 12px 42px rgb(0 0 0 / 72%), 0 0 28px rgb(255 49 95 / 18%);
	cursor: pointer;
	font-size: 0.86rem;
	font-weight: 760;
	letter-spacing: 0.015em;
	transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

body[data-game-state="idle"][data-room-mode="local"] .room-entry-button {
	display: inline-flex;
}

.room-entry-button:hover {
	border-color: var(--accent);
	background: #21131a;
	box-shadow: 0 14px 48px rgb(0 0 0 / 78%), 0 0 34px rgb(255 49 95 / 25%);
}

.room-entry-button:active {
	transform: scale(0.97);
}

.room-entry-button svg,
.room-action svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.room-entry-button svg {
	color: #ff6d8d;
}

#game-ui {
	position: fixed;
	z-index: 2;
	inset: 0;
	display: grid;
	padding: calc(82px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(42px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
	place-items: center;
	pointer-events: none;
}

.state-panel {
	width: min(100%, 740px);
	text-align: center;
	animation: panel-in 520ms var(--ease) both;
}

.state-panel h1,
.result-panel h2 {
	margin: 0;
	font-weight: 500;
	letter-spacing: -0.055em;
}

.state-panel h1 {
	font-size: clamp(3.25rem, 9vw, 7.5rem);
	line-height: 0.94;
}

.state-copy {
	margin: 30px auto 0;
	color: #c4c5c8;
	font-size: clamp(1rem, 2.3vw, 1.3rem);
	font-weight: 450;
	line-height: 1.55;
}

.active-config {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	margin: 26px 0 0;
	padding: 0 14px;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 999px;
	color: #d9dade;
	background: rgb(255 255 255 / 4%);
	font-size: 0.73rem;
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gesture-hint {
	margin: 16px 0 0;
	color: var(--faint);
	font-size: 0.75rem;
	letter-spacing: 0.015em;
}

.collecting-panel {
	align-self: end;
	padding-bottom: clamp(12px, 4vh, 44px);
}

.countdown-label {
	margin: 0;
	color: #f4f4f2;
	font-size: 0.78rem;
	font-weight: 750;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.player-count {
	margin: 8px 0 0;
	color: var(--muted);
	font-size: 0.86rem;
}

.result-panel {
	display: flex;
	max-width: 850px;
	align-items: center;
	flex-direction: column;
}

body[data-room-mode="connected"][data-game-state="result"][data-winner-device="false"] .result-panel {
	width: min(100%, 620px);
	padding: clamp(20px, 4vw, 32px);
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 30px;
	background: rgb(3 4 6 / 86%);
	box-shadow: 0 24px 80px rgb(0 0 0 / 52%);
	backdrop-filter: blur(18px);
}

.result-meta {
	margin: 0 0 24px;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.17em;
	text-transform: uppercase;
}

.result-panel h2 {
	max-width: 820px;
	font-size: clamp(2.1rem, 6.8vw, 5.6rem);
	line-height: 1.02;
	text-wrap: balance;
}

.result-panel h2.long-prompt {
	font-size: clamp(1.85rem, 4.8vw, 4.2rem);
	line-height: 1.08;
}

.result-panel h2.very-long-prompt {
	font-size: clamp(1.65rem, 4vw, 3.5rem);
}

.next-round {
	display: inline-flex;
	min-height: 50px;
	align-items: center;
	gap: 12px;
	margin-top: 38px;
	padding: 0 22px;
	border: 1px solid rgb(255 255 255 / 28%);
	border-radius: 999px;
	background: rgb(4 5 7 / 36%);
	font-size: 0.82rem;
	font-weight: 750;
	letter-spacing: 0.04em;
	backdrop-filter: blur(10px);
	cursor: pointer;
	pointer-events: auto;
	transition: background 180ms ease, transform 180ms ease;
}

.next-round:hover {
	background: rgb(255 255 255 / 14%);
}

.next-round:active {
	transform: scale(0.97);
}

.next-round:disabled {
	cursor: default;
	opacity: 0.55;
}

.next-round svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

#help-dialog {
	width: min(calc(100% - 28px), 760px);
	max-height: min(88dvh, 820px);
	padding: 0;
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: 28px;
	color: var(--ink);
	background: rgb(14 16 20 / 98%);
	box-shadow: 0 30px 110px rgb(0 0 0 / 72%), 0 0 0 1px rgb(255 49 95 / 10%);
	backdrop-filter: blur(24px);
	overflow: hidden;
	user-select: text;
}

#help-dialog[open] {
	animation: dialog-in 420ms var(--ease) both;
}

#help-dialog::backdrop {
	background: rgb(0 0 0 / 78%);
	backdrop-filter: blur(8px);
}

.help-shell {
	max-height: inherit;
	padding: 32px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	touch-action: pan-y pinch-zoom;
}

.help-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}

.help-header > div {
	min-width: 0;
}

.help-kicker {
	margin: 0 0 10px;
	color: var(--help-red);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.help-header h2 {
	margin: 0;
	font-size: clamp(2rem, 6vw, 3.2rem);
	font-weight: 550;
	letter-spacing: -0.05em;
	line-height: 0.98;
}

.help-header #help-intro {
	max-width: 560px;
	margin: 14px 0 0;
	color: #b7bac1;
	font-size: 0.96rem;
	line-height: 1.5;
}

.help-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 26px;
}

.help-card {
	position: relative;
	min-width: 0;
	padding: 22px;
	border: 1px solid rgb(255 255 255 / 9%);
	border-radius: 20px;
	background: rgb(255 255 255 / 3.5%);
}

.help-card-number {
	margin: 0 0 16px;
	color: var(--help-red);
	font-size: 0.66rem;
	font-weight: 850;
	letter-spacing: 0.14em;
}

.help-card h3 {
	margin: 0;
	font-size: 1.08rem;
	font-weight: 700;
	letter-spacing: -0.018em;
}

.help-card ol,
.help-card ul {
	margin: 15px 0 0;
	padding-left: 1.18rem;
	color: #b9bbc1;
	font-size: 0.86rem;
	line-height: 1.48;
}

.help-card li + li {
	margin-top: 9px;
}

.help-card strong {
	color: #f2f2ef;
	font-weight: 700;
}

.help-navigation-list {
	list-style: none;
	padding-left: 0 !important;
}

.help-navigation-list li {
	display: grid;
	grid-template-columns: minmax(120px, 0.75fr) minmax(0, 1fr);
	gap: 12px;
}

.help-note {
	margin: 12px 0 0;
	padding: 14px 16px;
	border-left: 3px solid var(--help-red);
	border-radius: 4px 12px 12px 4px;
	color: #aeb1b7;
	background: rgb(255 49 95 / 7%);
	font-size: 0.82rem;
	line-height: 1.45;
}

.help-note strong {
	color: #fff;
}

#settings-dialog {
	width: min(calc(100% - 28px), 580px);
	max-height: min(86dvh, 780px);
	padding: 0;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 28px;
	color: var(--ink);
	background: rgb(15 17 21 / 96%);
	box-shadow: 0 30px 100px rgb(0 0 0 / 65%);
	backdrop-filter: blur(24px);
	overflow: hidden;
	user-select: text;
}

#room-dialog {
	--room-paper: #ffd96a;
	--room-paper-soft: #ffecb5;
	--room-ink: #211b1b;
	--room-red: #f43d4a;
	--room-rule: rgb(33 27 27 / 24%);
	width: min(calc(100% - 54px), 680px);
	max-height: min(88dvh, 780px);
	padding: 0;
	border: 2px solid var(--room-ink);
	border-radius: 30px;
	color: var(--room-ink);
	color-scheme: light;
	background: var(--room-paper);
	box-shadow: 14px 15px 0 var(--room-red), 19px 20px 0 var(--room-ink);
	overflow: hidden;
	font-family: ui-rounded, "Avenir Next", "Segoe UI", sans-serif;
	font-synthesis: none;
	user-select: text;
}

#room-dialog[open] {
	animation: dialog-in 420ms var(--ease) both;
}

#room-dialog::backdrop {
	background: rgb(0 0 0 / 84%);
	backdrop-filter: blur(4px);
}

.room-shell {
	position: relative;
	max-height: inherit;
	padding: 38px 42px 34px 52px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-color: var(--room-ink) transparent;
	touch-action: pan-y pinch-zoom;
}

.room-shell::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 19px;
	width: 5px;
	border-right: 1px solid rgb(33 27 27 / 28%);
	border-left: 2px solid rgb(255 255 255 / 46%);
	content: "";
	pointer-events: none;
}

.room-shell::after {
	position: absolute;
	top: 114px;
	right: -58px;
	width: 116px;
	height: 116px;
	border: 2px solid rgb(33 27 27 / 16%);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.room-shell > * {
	position: relative;
	z-index: 1;
}

.room-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 28px;
}

.room-heading {
	min-width: 0;
	max-width: 530px;
}

.room-kicker {
	margin: 0 0 16px;
	color: var(--room-ink);
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
}

.room-header h2 {
	margin: 0;
	font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	font-size: clamp(3.4rem, 8.8vw, 4.8rem);
	font-weight: 400;
	letter-spacing: 0.012em;
	line-height: 0.86;
	text-wrap: balance;
}

.room-header #room-copy {
	max-width: 490px;
	margin: 18px 0 0;
	color: var(--room-ink);
	font-size: 1.14rem;
	line-height: 1.42;
}

#room-dialog .close-button {
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	border: 2px solid var(--room-ink);
	color: var(--room-ink);
	background: rgb(255 236 181 / 66%);
	box-shadow: none;
}

#room-dialog .close-button:hover {
	border-color: var(--room-ink);
	background: var(--room-red);
}

#room-dialog .close-button svg {
	width: 21px;
	height: 21px;
	stroke-width: 2;
}

#room-dialog button:focus-visible,
#room-dialog input:focus-visible {
	outline-color: var(--room-ink);
}

.room-lobby {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 34px;
}

.room-lobby[hidden],
.room-session[hidden] {
	display: none;
}

.room-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 2px 0;
	color: var(--room-ink);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.room-divider::before,
.room-divider::after {
	height: 1px;
	flex: 1;
	background: var(--room-rule);
	content: "";
}

.room-join-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.room-join-form > label {
	color: var(--room-ink);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.room-join-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 138px;
	gap: 12px;
}

.room-code-input {
	width: 100%;
	min-width: 0;
	min-height: 56px;
	padding: 0 16px;
	border: 2px solid var(--room-ink);
	border-radius: 14px;
	outline: none;
	color: var(--room-ink);
	background: var(--room-paper-soft);
	font-family: ui-rounded, "Avenir Next", "Segoe UI", sans-serif;
	font-size: 1.08rem;
	font-weight: 700;
	letter-spacing: 0.065em;
	text-transform: uppercase;
	transition: background 180ms ease, box-shadow 180ms ease;
}

.room-code-input::placeholder {
	color: rgb(33 27 27 / 50%);
}

.room-code-input:focus {
	border-color: var(--room-ink);
	background: #fff2ca;
	box-shadow: 4px 4px 0 var(--room-red);
}

.room-code-input[aria-invalid="true"] {
	border-color: #8f1724;
	box-shadow: 4px 4px 0 rgb(143 23 36 / 28%);
}

.room-code-error {
	margin: 0;
	color: #8f1724;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.35;
}

.room-state {
	margin-top: 34px;
	padding: 22px 0 20px;
	border-top: 2px solid var(--room-rule);
	border-right: 0;
	border-bottom: 2px solid var(--room-rule);
	border-left: 0;
	border-radius: 0;
	background: transparent;
}

.room-status-line {
	margin: 0;
	color: var(--room-ink);
	font-size: 0.98rem;
	font-weight: 700;
	letter-spacing: 0.045em;
}

.room-status-line::before {
	display: none;
}

.room-code-row {
	display: flex;
	min-width: 0;
	align-items: flex-end;
	justify-content: space-between;
	gap: 22px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--room-rule);
}

.room-code-row > span {
	color: var(--room-ink);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

#room-code {
	min-width: 0;
	color: var(--room-ink);
	font-family: ui-rounded, "Avenir Next", "Segoe UI", sans-serif;
	font-size: clamp(1.08rem, 4vw, 1.42rem);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-align: right;
	white-space: nowrap;
}

.room-actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 24px;
}

.room-share-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 14px;
}

.room-action {
	display: inline-flex;
	width: 100%;
	min-height: 56px;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0 18px;
	border-radius: 14px;
	cursor: pointer;
	font-family: ui-rounded, "Avenir Next", "Segoe UI", sans-serif;
	font-size: 1.04rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	transition: background 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
}

.room-action-primary {
	border: 2px solid var(--room-ink);
	color: var(--room-ink);
	background: var(--room-red);
	box-shadow: 3px 3px 0 var(--room-ink);
}

.room-action-primary:hover {
	background: #ff5561;
	box-shadow: 4px 4px 0 var(--room-ink);
	transform: translate(-1px, -1px);
}

.room-action-secondary {
	border: 2px solid var(--room-ink);
	color: var(--room-ink);
	background: var(--room-paper-soft);
}

.room-action-secondary:hover {
	border-color: var(--room-ink);
	background: #fff3d0;
}

.room-action:active {
	box-shadow: 1px 1px 0 var(--room-ink);
	transform: translate(2px, 2px);
}

.room-action:disabled {
	cursor: wait;
	opacity: 0.52;
}

.room-enter {
	display: inline-flex;
	color: var(--room-paper);
	background: var(--room-ink);
	box-shadow: 3px 3px 0 var(--room-red);
}

.room-enter:hover {
	color: var(--room-paper);
	background: #352b2b;
	box-shadow: 4px 4px 0 var(--room-red);
}

body[data-room-role="guest"] .room-share-actions {
	display: none;
}

.room-leave {
	align-self: center;
	min-height: 44px;
	padding: 0 14px;
	border: 0;
	border-radius: 10px;
	color: #6f1f28;
	background: transparent;
	cursor: pointer;
	font-family: ui-rounded, "Avenir Next", "Segoe UI", sans-serif;
	font-size: 0.94rem;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 180ms ease, background 180ms ease;
}

.room-leave:hover {
	color: var(--room-ink);
	background: rgb(33 27 27 / 7%);
}

.room-privacy {
	margin: 10px auto 0;
	color: rgb(33 27 27 / 72%);
	font-size: 0.88rem;
	line-height: 1.4;
	text-align: center;
}

body[data-winner-device="true"][data-game-state="reveal"] .topbar,
body[data-winner-device="true"][data-game-state="reveal"] #game-ui {
	opacity: 0;
	transition: opacity 160ms ease;
}

#settings-dialog[open] {
	animation: dialog-in 420ms var(--ease) both;
}

#settings-dialog::backdrop {
	background: rgb(0 0 0 / 68%);
	backdrop-filter: blur(8px);
}

.settings-shell {
	max-height: inherit;
	padding: 28px;
	overflow-y: auto;
	overscroll-behavior: contain;
	touch-action: pan-y pinch-zoom;
}

.settings-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.settings-header h2 {
	margin: 0;
	font-size: clamp(1.8rem, 6vw, 2.5rem);
	font-weight: 550;
	letter-spacing: -0.045em;
}

.settings-header p {
	margin: 7px 0 0;
	color: var(--muted);
	font-size: 0.9rem;
}

.close-button {
	flex: 0 0 auto;
}

.settings-group {
	margin: 30px 0 0;
	padding: 0;
	border: 0;
}

body[data-room-role="guest"][data-room-mode="connected"] #prompt-toggle-row,
body[data-room-role="guest"][data-room-mode="connected"] #prompt-settings {
	opacity: 0.52;
}

.settings-group legend {
	margin-bottom: 12px;
	color: #b5b7bd;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.segmented-control {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--line);
	border-radius: 15px;
	background: #0a0b0e;
}

.segmented-control label {
	cursor: pointer;
}

.segmented-control input {
	position: absolute;
	opacity: 0;
}

.segmented-control span {
	display: grid;
	min-height: 42px;
	place-items: center;
	border-radius: 11px;
	color: var(--muted);
	font-size: 0.82rem;
	font-weight: 700;
	transition: color 180ms ease, background 180ms ease;
}

.segmented-control input:checked + span {
	color: #fff;
	background: var(--surface-raised);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
}

.category-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.category-option {
	display: flex;
	min-height: 74px;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 14px 14px 16px;
	border: 1px solid var(--line);
	border-radius: 15px;
	background: rgb(255 255 255 / 1.5%);
	cursor: pointer;
	transition: border-color 180ms ease, background 180ms ease;
}

.category-option:has(input:checked) {
	border-color: rgb(255 255 255 / 28%);
	background: rgb(255 255 255 / 6%);
}

.category-option > span,
.toggle-row > span {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 4px;
}

.category-option strong,
.toggle-row strong {
	font-size: 0.85rem;
	font-weight: 720;
}

.category-option small,
.toggle-row small {
	color: var(--muted);
	font-size: 0.69rem;
	line-height: 1.3;
}

.category-option em {
	display: inline-block;
	margin-left: 4px;
	padding: 2px 5px;
	border-radius: 4px;
	color: #ff9aae;
	background: rgb(255 49 95 / 12%);
	font-size: 0.55rem;
	font-style: normal;
	letter-spacing: 0.08em;
	vertical-align: 2px;
}

.category-option input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--accent);
	cursor: pointer;
}

.toggle-row {
	display: flex;
	min-height: 68px;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 0 2px;
}

.switch {
	position: relative;
	display: block;
	width: 48px;
	height: 28px;
	flex: 0 0 auto;
	cursor: pointer;
}

.switch input {
	position: absolute;
	opacity: 0;
}

.switch > span {
	position: absolute;
	inset: 0;
	border: 1px solid #3b3e46;
	border-radius: 999px;
	background: #22242a;
	transition: background 180ms ease, border-color 180ms ease;
}

.switch > span::after {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #a5a8b0;
	content: "";
	transition: background 180ms ease, transform 220ms var(--ease);
}

.switch input:checked + span {
	border-color: var(--accent);
	background: rgb(255 49 95 / 25%);
}

.switch input:checked + span::after {
	background: #fff;
	transform: translateX(20px);
}

.settings-footer {
	margin-top: 12px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.settings-footer p {
	margin: 0;
	color: var(--muted);
	font-size: 0.7rem;
	line-height: 1.55;
}

.settings-footer p:first-child {
	margin-bottom: 3px;
	color: #d7d8dc;
	font-weight: 700;
}

.visually-hidden:not(:focus):not(:active) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	margin: -1px;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

#version {
	position: fixed;
	z-index: 3;
	bottom: max(8px, env(safe-area-inset-bottom));
	left: max(10px, env(safe-area-inset-left));
	margin: 0;
	color: rgb(255 255 255 / 28%);
	font-size: 0.6rem;
}

#update-available {
	position: fixed;
	z-index: 8;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom));
	left: 16px;
	max-width: 480px;
	min-height: 48px;
	margin: auto;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-radius: 14px;
	text-align: center;
	background: var(--surface-raised);
	box-shadow: 0 16px 44px rgb(0 0 0 / 45%);
	font-size: 0.8rem;
}

#update-available a {
	color: #fff;
	font-weight: 750;
}

@keyframes panel-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes dialog-in {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 620px) {
	.topbar {
		padding-top: calc(12px + env(safe-area-inset-top));
	}

	#game-ui {
		padding-top: calc(72px + env(safe-area-inset-top));
		padding-bottom: calc(30px + env(safe-area-inset-bottom));
	}

	.state-panel h1 {
		font-size: clamp(3.25rem, 19vw, 5.5rem);
	}

	.state-copy {
		margin-top: 24px;
	}

	.result-panel h2 {
		font-size: clamp(2rem, 10vw, 3.7rem);
	}

	.result-panel h2.long-prompt {
		font-size: clamp(1.55rem, 6.8vw, 2.25rem);
	}

	.result-panel h2.very-long-prompt {
		font-size: clamp(1.35rem, 5.8vw, 1.9rem);
	}

	.category-list {
		grid-template-columns: 1fr;
	}

	#settings-dialog,
	#help-dialog {
		width: 100%;
		max-width: none;
		max-height: min(90dvh, 780px);
		margin: auto 0 0;
		border-right: 0;
		border-bottom: 0;
		border-left: 0;
		border-radius: 28px 28px 0 0;
	}

	#help-dialog {
		max-height: min(92dvh, 820px);
	}

	#room-dialog {
		width: calc(100% - 28px);
		max-width: 680px;
		max-height: calc(100dvh - 30px);
		margin: auto;
		border: 2px solid var(--room-ink);
		border-radius: 24px;
		box-shadow: 8px 9px 0 var(--room-red), 12px 13px 0 var(--room-ink);
	}

	.settings-shell,
	.help-shell {
		padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
	}

	.help-grid {
		grid-template-columns: 1fr;
	}

	.help-card {
		padding: 20px;
	}

	.room-shell {
		padding: 30px 24px calc(26px + env(safe-area-inset-bottom)) 32px;
	}

	.room-shell::before {
		left: 11px;
	}

	.room-shell::after {
		top: 106px;
		right: -50px;
		width: 98px;
		height: 98px;
	}

	.room-header {
		gap: 18px;
	}

	.room-header h2 {
		font-size: clamp(3.1rem, 15vw, 4.2rem);
	}

	.room-header #room-copy {
		font-size: 1.06rem;
	}

	.room-share-actions {
		grid-template-columns: 1fr;
	}

	.room-join-row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 620px) and (max-height: 700px) {
	.room-shell {
		padding-top: 22px;
	}

	.room-state {
		margin-top: 20px;
		padding: 16px 0;
	}

	.room-lobby {
		gap: 12px;
		margin-top: 20px;
	}

	.room-actions {
		gap: 10px;
		margin-top: 14px;
	}

	.room-share-actions {
		gap: 10px;
	}

	.room-privacy {
		margin-top: 4px;
	}
}

@media (max-width: 360px) {
	.topbar {
		padding-right: calc(12px + env(safe-area-inset-right));
		padding-left: calc(12px + env(safe-area-inset-left));
	}

	.brand {
		font-size: 1.55rem;
	}

	.room-status-button {
		padding: 0;
	}

	.room-shell {
		padding-right: 20px;
		padding-left: 28px;
	}

	.room-header {
		gap: 12px;
	}

	.room-header h2 {
		font-size: 2.9rem;
	}

	.room-state {
		padding: 16px 0;
	}

	.room-code-row {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	#room-code {
		font-size: 1.04rem;
		text-align: left;
	}
}

@media (max-height: 520px) and (orientation: landscape) {
	.topbar {
		padding-top: calc(8px + env(safe-area-inset-top));
	}

	#game-ui {
		padding-top: calc(54px + env(safe-area-inset-top));
		padding-bottom: calc(14px + env(safe-area-inset-bottom));
	}

	.result-meta {
		margin-bottom: 10px;
	}

	.result-panel h2,
	.result-panel h2.long-prompt,
	.result-panel h2.very-long-prompt {
		font-size: clamp(1.15rem, 3vw, 2rem);
		line-height: 1.08;
	}

	.next-round {
		min-height: 42px;
		margin-top: 14px;
		padding: 0 18px;
	}

	#settings-dialog,
	#help-dialog {
		max-height: calc(100dvh - 12px);
	}

	#room-dialog {
		width: min(calc(100% - 42px), 680px);
		max-height: calc(100dvh - 24px);
	}

	.room-shell {
		padding: 18px 32px 20px 40px;
	}

	.room-header h2 {
		font-size: 3rem;
	}

	.room-header #room-copy {
		margin-top: 10px;
		font-size: 0.94rem;
	}

	.room-state {
		margin-top: 16px;
		padding: 12px 0;
	}

	.room-actions {
		margin-top: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}