/* Mobile-first. Light/dark via CSS variables on :root[data-theme]. */
:root {
	--bg: #f6f3ec;
	--surface: #ffffff;
	--surface-2: #f3efe6;
	--text: #1f2937;
	--muted: #6b7280;
	--border: #e5e0d5;
	--board-bg: #2d2a26;
	--cell: #efe9dd;
	--accent: #2563eb;
	--ok: #16a34a;
	--bad: #dc2626;
	--gold: #d97706;
	font-family: system-ui, -apple-system, sans-serif;
}
:root[data-theme="dark"] {
	--bg: #161411;
	--surface: #211e1a;
	--surface-2: #2b2722;
	--text: #ece7dd;
	--muted: #9b948a;
	--border: #38332c;
	--board-bg: #0c0b09;
	--cell: #3a352e;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); }

header {
	display: flex; align-items: center; gap: .6rem;
	padding: .5rem .8rem; background: var(--surface); border-bottom: 1px solid var(--border);
	position: sticky; top: 0; z-index: 5;
}
#logo { width: 30px; height: 30px; border-radius: 8px; }
header h1 { font-size: 1.05rem; margin: 0; flex: 1; }
#who { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--muted); }
#btn-theme { font-size: 1rem; padding: .2rem .5rem; }
#btn-login, #btn-logout { font-size: .75rem; padding: .15rem .5rem; }

main {
	display: flex; flex-direction: column; gap: .8rem;
	padding: .8rem; max-width: 480px; margin: 0 auto;
}

section { background: var(--surface); border-radius: 14px; padding: .8rem; }
.muted { color: var(--muted); font-size: .85rem; }
h2 { font-size: .95rem; margin: 0 0 .5rem; }

#landing { text-align: center; }
#landing h2 { font-size: 1.25rem; margin: .8rem 0 .3rem; }
#landing h3 { font-size: .9rem; margin: 1.2rem 0 .4rem; color: var(--muted); }
#hero-img { width: 100%; border-radius: 12px; }
button.big { font-size: 1.1rem; padding: .7rem 1.6rem; margin: .8rem 0 .4rem; width: 100%; }
#join-row { display: flex; gap: .4rem; justify-content: center; margin-top: .5rem; }
#join-code { text-transform: uppercase; width: 11em; text-align: center; }

#public-parties { display: flex; flex-direction: column; gap: .4rem; }
.party-card {
	display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
	text-align: left; padding: .55rem .8rem;
}
.party-card { position: relative; width: 100%; }
.party-card b { letter-spacing: .06em; }
.party-x { position: absolute; top: 6px; right: 10px; color: var(--muted); font-size: .8rem; }
#my-parties { display: flex; flex-direction: column; gap: .4rem; }
.party-card small { color: var(--muted); }

#room-strip { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
#btn-rename { padding: .25rem .5rem; }
#btn-leave { color: var(--bad); }
#room-label { font-weight: 700; letter-spacing: .08em; flex: 1; }

#banner {
	background: linear-gradient(90deg, #fbbf24, #f59e0b); color: #422006;
	border-radius: 14px; padding: .7rem .9rem; font-weight: 700; text-align: center;
}

/* lobby: game picker */
#game-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .6rem; }
.game-card {
	display: flex; flex-direction: column; align-items: center; gap: .2rem;
	padding: .6rem .3rem; text-align: center; border: 2px solid var(--border);
}
.game-card.picked { border-color: var(--accent); background: var(--surface-2); }
.game-card .gc-icon { font-size: 1.5rem; }
.game-card b { font-size: .85rem; }
.game-card small { color: var(--muted); font-size: .68rem; line-height: 1.25; }
#card-panel {
	grid-column: 1 / -1; background: var(--surface-2); border: 2px solid var(--accent);
	border-radius: 12px; padding: .6rem .7rem; margin: -.1rem 0 .2rem;
}
#game-options { display: flex; flex-direction: column; gap: .4rem; margin: 0 0 .6rem; }
#game-options label { font-size: .9rem; }
#agree-row { display: flex; gap: .5rem; margin-top: .5rem; }

/* play area is game-agnostic; modules style their own boards */
#play-area { display: flex; flex-direction: column; gap: .7rem; align-items: center; }
#game-root { width: 100%; display: flex; justify-content: center; }
#status-bar { display: flex; gap: 1rem; align-items: center; font-size: .92rem; min-height: 1.3em; flex-wrap: wrap; justify-content: center; }
#timer { font-variant-numeric: tabular-nums; font-weight: 700; }
#game-status.ok { color: var(--ok); }
#game-status.bad { color: var(--bad); font-weight: 700; }
#game-status.won { color: var(--gold); font-weight: 800; }
#round-game-label { margin: 0; text-align: center; }
#game-help { margin: 0; max-width: 470px; text-align: center; font-size: .82rem; }
#game-help summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; }
#game-help[open] summary { margin-bottom: .25rem; }
.chat-msg a { color: var(--accent); word-break: break-all; }

button, select, input {
	font: inherit; padding: .45rem .8rem; border-radius: 10px;
	border: 1px solid var(--border); background: var(--surface); color: var(--text);
	cursor: pointer;
}
button:active { background: var(--surface-2); }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }

#score-header { display: flex; justify-content: space-between; align-items: baseline; }
.player {
	display: flex; align-items: center; gap: .6rem;
	padding: .45rem .3rem; border-bottom: 1px solid var(--border);
}
.player:last-child { border-bottom: none; }
.player .pname { flex: 1; font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.player .crown { font-size: .8rem; }
.player .pts { font-weight: 800; font-variant-numeric: tabular-nums; }
.player .ptime { color: var(--gold); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.player .pmini { min-width: 60px; display: flex; justify-content: center; }
.mini-board {
	display: grid; grid-template-columns: repeat(6, 9px); grid-template-rows: repeat(6, 9px);
	gap: 1px; background: var(--board-bg); padding: 2px; border-radius: 4px;
}
.mini-board .mc { background: var(--cell); border-radius: 1px; }
.player .stuck-badge { color: var(--bad); font-size: .72rem; font-weight: 700; }
.player.stuck .pmini { outline: 2px solid var(--bad); border-radius: 4px; }
#party-settings { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; font-size: .85rem; }
#master-room-controls { display: flex; gap: .4rem; margin-top: .6rem; flex-wrap: wrap; }
#master-room-controls button { font-size: .8rem; padding: .3rem .6rem; }

/* playlist & next-up */
#round-buttons { display: flex; gap: .5rem; }
#playlist-box { background: var(--surface); border-radius: 14px; padding: .6rem .8rem; display: flex; flex-direction: column; gap: .3rem; }
.pl-item { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.pl-item.done { opacity: .45; }
.pl-item.next .pl-label { font-weight: 700; }
.pl-mark { width: 1.3em; text-align: center; color: var(--accent); font-weight: 700; }
.pl-label { flex: 1; }
.pl-x { font-size: .7rem; padding: .1rem .45rem; }
#next-up {
	background: var(--surface); border: 2px solid var(--accent); border-radius: 14px;
	padding: .6rem .8rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
#next-up-label { font-weight: 700; flex: 1; }
#next-up button { font-size: .85rem; padding: .3rem .7rem; }

/* host admin */
.game-card { position: relative; }
.gc-lock { position: absolute; top: 4px; right: 6px; font-size: .8rem; opacity: .35; }
.gc-lock:hover { opacity: 1; }
.game-card.locked { opacity: .42; }
.game-card.locked .gc-lock { opacity: 1; }
.player .boot { font-size: .65rem; padding: .1rem .4rem; color: var(--bad); }

/* feedback */
#btn-feedback { font-size: 1rem; padding: .2rem .5rem; }
#fb-shot { width: 100%; max-height: 180px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); }
#fb-text { display: block; width: 100%; margin: .6rem 0; font: inherit; padding: .5rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); resize: vertical; }
#fb-include { font-size: .8rem; color: var(--muted); display: block; margin-top: .4rem; }
#fb-buttons { display: flex; gap: .5rem; justify-content: center; }
#feedback-modal { text-align: left; width: min(90vw, 420px); }
#feedback-modal h2, #fb-buttons { text-align: center; }

/* event toasts */
#toasts {
	position: fixed; top: 56px; left: 50%; transform: translateX(-50%);
	display: flex; flex-direction: column; gap: .4rem; z-index: 70; pointer-events: none;
}
.toast {
	background: var(--text); color: var(--bg); padding: .45rem .9rem; border-radius: 99px;
	font-size: .85rem; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.3);
	animation: toast-in .25s ease; transition: opacity .5s;
}
.toast.out { opacity: 0; }
@keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } }

/* chat */
#chat-log {
	max-height: 160px; overflow-y: auto; display: flex; flex-direction: column;
	gap: .25rem; margin-bottom: .5rem; font-size: .85rem;
}
.chat-msg b { color: var(--accent); font-weight: 700; }
.chat-msg.mine b { color: var(--gold); }
#chat-form { display: flex; gap: .4rem; }
#chat-input { flex: 1; min-width: 0; }

/* sign in with Google */
button.google {
	display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
	width: 100%; font-weight: 600; padding: .55rem .8rem;
}

/* solved celebration */
.board-pop { animation: board-pop .55s ease; }
@keyframes board-pop {
	0% { transform: scale(1); }
	35% { transform: scale(1.05) rotate(1deg); }
	70% { transform: scale(.99) rotate(-.5deg); }
	100% { transform: scale(1); }
}
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
#confetti i {
	position: absolute; top: 55%; width: 9px; height: 14px; border-radius: 2px;
	animation: confetti var(--t) cubic-bezier(.2, .55, .45, 1) forwards;
	opacity: 0;
}
@keyframes confetti {
	0% { transform: translate(0, 0) rotate(0); opacity: 1; }
	30% { transform: translate(calc(var(--dx) * .55), calc(var(--up) * -1)) rotate(calc(var(--rot) * .4)); opacity: 1; }
	100% { transform: translate(var(--dx), 60vh) rotate(var(--rot)); opacity: 0; }
}

dialog {
	border: none; border-radius: 16px; background: var(--surface); color: var(--text);
	max-width: 90vw; padding: 1.2rem; text-align: center;
}
dialog::backdrop { background: rgba(0,0,0,.45); }
#name-input { display: block; width: 100%; margin: .8rem 0; text-align: center; }
#qr-box svg { width: min(70vw, 280px); height: auto; border-radius: 8px; }
#qr-link { word-break: break-all; }

/* wider screens: two columns — explicit rows so the side panels stack
   tight under each other instead of auto-flowing below the tall board */
@media (min-width: 760px) {
	main {
		max-width: 1100px; display: grid; align-items: start;
		grid-template-columns: minmax(0, 1fr) 360px;
		grid-template-rows: auto auto auto auto 1fr;
	}
	#landing, #room-strip, #banner { grid-column: 1 / -1; }
	#lobby, #play-area { grid-column: 1; grid-row: 3 / span 3; }
	#players-panel { grid-column: 2; grid-row: 3; }
	#chat-panel { grid-column: 2; grid-row: 4; }
	#chat-log { max-height: 44vh; }
	.player .pmini { min-width: 84px; }
}