@charset "utf-8";

/* Themes: dark by default, light follows the system unless the player picks one in the menu
   (data-theme on <html>). Icy blues only, everywhere: no reds, greens or yellows, even for errors
   (a wrong word shakes instead). */

:root {
	color-scheme:dark;

	--bg:#06101c;
	--bg-glow:rgba(111, 211, 255, 0.07);
	--panel:#0b1828;
	--panel-hover:#10223a;
	--line:#17293f;
	--line-strong:#24405f;
	--text:#e6f3fc;
	--muted:#8aa7c0;
	--faint:#557089;
	--accent:#6fd3ff;
	--accent-soft:rgba(111, 211, 255, 0.1);
	--accent-line:rgba(111, 211, 255, 0.35);
	--shadow:0 14px 36px rgba(0, 0, 0, 0.55);

	/* Progress bars: yours is the deeper blue, everyone else's the paler one */
	--mine:#2f8fdc;
	--theirs:#bfe8ff;

	--cell:#12304d;
	--cell-hover:#173a5c;
	--cell-text:#e6f3fc;
	--cell-edge:#1f4568;
	--cell-press:#1d4a72;
	--center:#bfe8ff;
	--center-press:#94d6ff;
	--center-text:#062038;
	--arm:rgba(150, 215, 255, 0.17);
	--arm-lit:rgba(190, 235, 255, 0.95);
	--glow:rgba(150, 225, 255, 0.85);
	--dim-letter:#3d5a75;

	/* A missed word: a quiet near-black block, nothing like the bright good-word toasts */
	--bad-bg:#0e1114;
	--bad-edge:rgba(97, 97, 97, 0.35);
	--bad-text:#939393;
	--good-text:#d5edff;
	--spark-glow:#6fd3ff;
}

@media (prefers-color-scheme:light) {
	:root:not([data-theme="dark"]) {
		color-scheme:light;

		--bg:#e8f3fb;
		--bg-glow:rgba(42, 143, 216, 0.1);
		--panel:#f7fbfe;
		--panel-hover:#edf5fc;
		--line:#d3e5f2;
		--line-strong:#b2cde2;
		--text:#0d2a44;
		--muted:#4f6f89;
		--faint:#86a3bb;
		--accent:#1683c9;
		--accent-soft:rgba(22, 131, 201, 0.09);
		--accent-line:rgba(22, 131, 201, 0.35);
		--shadow:0 14px 36px rgba(20, 60, 100, 0.16);

		--mine:#155f9e;
		--theirs:#7fc0ec;

		--cell:#c6e1f4;
		--cell-hover:#b7d8f0;
		--cell-text:#0d2a44;
		--cell-edge:#8dbbdd;
		--cell-press:#9ccbec;
		--center:#2a8fd8;
		--center-press:#1d6fae;
		--center-text:#ffffff;
		--arm:rgba(42, 143, 216, 0.18);
		--arm-lit:rgba(22, 131, 201, 0.95);
		--glow:rgba(42, 143, 216, 0.7);
		--dim-letter:#a9c3d8;

		--bad-bg:#00334b;
		--bad-edge:#00334b;
		--bad-text:#ffffff;
		--good-text:#1683c9;
		--spark-glow:#0b4f86;
	}
}

:root[data-theme="light"] {
	color-scheme:light;

	--bg:#e8f3fb;
	--bg-glow:rgba(42, 143, 216, 0.1);
	--panel:#f7fbfe;
	--panel-hover:#edf5fc;
	--line:#d3e5f2;
	--line-strong:#b2cde2;
	--text:#0d2a44;
	--muted:#4f6f89;
	--faint:#86a3bb;
	--accent:#1683c9;
	--accent-soft:rgba(22, 131, 201, 0.09);
	--accent-line:rgba(22, 131, 201, 0.35);
	--shadow:0 14px 36px rgba(20, 60, 100, 0.16);

	--mine:#155f9e;
	--theirs:#7fc0ec;

	--cell:#c6e1f4;
	--cell-hover:#b7d8f0;
	--cell-text:#0d2a44;
	--cell-edge:#8dbbdd;
	--cell-press:#9ccbec;
	--center:#2a8fd8;
	--center-press:#1d6fae;
	--center-text:#ffffff;
	--arm:rgba(42, 143, 216, 0.18);
	--arm-lit:rgba(22, 131, 201, 0.95);
	--glow:rgba(42, 143, 216, 0.7);
	--dim-letter:#a9c3d8;

	--bad-bg:#00334b;
	--bad-edge:#00334b;
	--bad-text:#ffffff;
	--good-text:#1683c9;
	--spark-glow:#0b4f86;
}

* { box-sizing:border-box; }

html {
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
	touch-action:manipulation;
	overscroll-behavior:none;
}

body {
	margin:0;
	min-height:100vh;
	min-height:100dvh;
	display:flex;
	flex-direction:column;
	background:radial-gradient(ellipse at 50% -10%, var(--bg-glow), transparent 60%) var(--bg);
	color:var(--text);
	font-family:'Space Grotesk', system-ui, sans-serif;
	-webkit-tap-highlight-color:transparent;
}

/* The game never scrolls or rubber-bands (pinning the body is what stops iOS overscroll);
   only the insides of drawers and sheets scroll */
/* No double-tap zoom anywhere (drawers still scroll, pinch still works); the board and buttons
   take no gestures at all, and scripts.js stops iOS turning fast taps there into a zoom */
body.game {
	position:fixed;
	inset:0;
	overflow:hidden;
	overscroll-behavior:none;
	touch-action:manipulation;
}

button {
	font:inherit;
	color:inherit;
	cursor:pointer;
}

.hide { display:none !important; }

.hint {
	margin:0;
	font-size:13px;
	color:var(--muted);
	line-height:1.45;
}

.icon {
	width:1em;
	height:1em;
	vertical-align:-0.12em;
	color:var(--accent);
}


/* The game: a top bar with the word count, rank and menu buttons, and the play area filling the
   rest of the screen at any size */

.app {
	position:relative;
	width:100%;
	max-width:560px;
	height:100%;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	padding:0 14px max(10px, env(safe-area-inset-bottom));
}

.topbar {
	position:relative;
	z-index:5;
	display:flex;
	align-items:center;
	gap:10px;
	padding:max(10px, env(safe-area-inset-top)) 0 12px;
}

/* With a drawer open, the play area blurs behind it (no darkening), and the other top-bar buttons
   fade so the open drawer's button stands out */
.topbar [data-drawer] { transition:opacity 0.18s, border-color 0.18s, background 0.18s; }
.drawer_open .topbar [data-drawer]:not(.on) { opacity:0.4; }

.topbar h1 {
	margin:0 auto 0 0;
	font-size:24px;
}

.topbar_buttons {
	display:flex;
	align-items:center;
	gap:6px;
	min-width:0;
}

.chip {
	height:36px;
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:0 12px;
	border:1px solid var(--line-strong);
	border-radius:18px;
	background:var(--panel);
	font-size:14px;
	white-space:nowrap;
}

.chip_icon {
	flex:none;
	width:18px;
	height:18px;
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}

/* Before you have a rank, a little rank icon stands in for its name */
.chip .rank_icon, .chip .rank_name:empty { display:none; }
.chip:has(.rank_name:empty) .rank_icon { display:block; }

.chip .score {
	min-width:26px;
	padding:1px 7px;
	border-radius:999px;
	background:var(--accent);
	color:var(--bg);
	font-size:13px;
	text-align:center;
}

.chip.on, .round.on {
	border-color:var(--accent);
	background:var(--accent-soft);
}

.menu_btn svg {
	width:20px;
	height:20px;
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
}

.angel .chip .rank_name { color:var(--accent); font-weight:700; }

/* Progress toward the day's maximum, with a dot for each rank */
.track {
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:4px;
	border-radius:2px;
	background:var(--line);
}

.track .fill {
	position:absolute;
	inset:0 auto 0 0;
	width:0;
	border-radius:2px;
	background:var(--mine);
	transition:width 0.4s ease;
}

.ticks i {
	position:absolute;
	top:50%;
	width:6px;
	height:6px;
	margin:-3px 0 0 -3px;
	border-radius:50%;
	background:var(--line-strong);
}

.ticks i.got { background:var(--mine); }

@media (max-width:380px) {
	.topbar h1 { font-size:20px; }
	.chip { padding:0 9px; gap:5px; }
}



/* Play area: no scrolling, zooming, selecting or callouts, so fast thumbs only ever type */

.play {
	flex:1;
	min-height:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	gap:6px;
	touch-action:manipulation;
	-webkit-user-select:none;
	user-select:none;
	-webkit-touch-callout:none;
}

/* Playing a past day: back to today, the date, and the reveal button */
.past_bar {
	position:relative;
	z-index:2;
	flex:none;
	width:100%;
	display:flex;
	align-items:center;
	gap:10px;
	padding:8px 0 2px;
	font-size:14px;
	pointer-events:none;
}

/* Your words strip tucks up under the bar, so it reads as yours, not your rival's. The bar sits on
   top but only its buttons take taps; elsewhere touches fall through to the strip. */
.past_bar button { pointer-events:auto; }
.past_bar:not(.hide) + .versus { margin-top:-8px; }
.past_bar:not(.hide) + .versus .vs_rival { margin-top:12px; }

.past_bar button {
	height:30px;
	padding:0 12px;
	border:1px solid var(--line-strong);
	border-radius:15px;
	background:var(--panel);
	font-size:13px;
	font-weight:500;
	white-space:nowrap;
}

.past_back {
	display:inline-flex;
	align-items:center;
	gap:2px;
	padding-left:6px !important;
}

.past_back svg {
	width:16px;
	height:16px;
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.past_date { flex:1; text-align:center; font-weight:700; color:var(--accent); }
.past_reveal.armed { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:700; }
.past_reveal.done { color:var(--muted); }

/* Head to head: you and one rival, above the board. Tap the rival's name to pick who. */
.versus {
	flex:none;
	width:100%;
	display:flex;
	flex-direction:column;
}

/* With the rival up here too, leave the toast its own room above the word being typed */
.versus.with_rival { margin-bottom:22px; }

.vs_row {
	display:grid;
	grid-template-columns:minmax(0, 1fr) auto auto;
	grid-template-areas:"bar bar bar" "name rank score" "meta meta meta";
	align-items:baseline;
	column-gap:10px;
	row-gap:5px;
}

.vs_name {
	grid-area:name;
	position:relative;
	min-width:0;
	display:flex;
	align-items:center;
	gap:4px;
	font-weight:700;
}

.vs_name > span {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.vs_name em {
	font-style:normal;
	font-weight:500;
	font-size:12px;
	color:var(--accent);
}

.vs_name .chev {
	flex:none;
	width:16px;
	height:16px;
	fill:none;
	stroke:var(--muted);
	stroke-width:2;
}

/* The native picker sits invisibly over the rival's name, so tapping the name opens it */
.rival_pick {
	position:absolute;
	inset:-6px 0;
	width:100%;
	opacity:0;
	font-size:16px;
	cursor:pointer;
	-webkit-appearance:none;
	appearance:none;
}

.vs_rank { grid-area:rank; font-size:13px; color:var(--muted); }
.vs_score { grid-area:score; font-weight:700; min-width:28px; text-align:right; }

.vs_bar {
	grid-area:bar;
	height:6px;
	border-radius:3px;
	background:var(--line);
	overflow:hidden;
}

.vs_bar i {
	display:block;
	height:100%;
	border-radius:3px;
	background:var(--theirs);
	transition:width 0.4s ease;
}

.vs_row.angel .vs_rank { color:var(--accent); font-weight:700; }

.vs_meta {
	grid-area:meta;
	display:flex;
	gap:12px;
	font-size:12px;
	color:var(--faint);
}

.vs_meta .icon { margin-right:3px; }

/* Your words strip: counts, then your words newest first, on one line. Flick it sideways; tap it for
   the full list. It fades out at the right edge to show there's more. */
.my_words {
	display:flex;
	align-items:baseline;
	gap:14px;
	overflow-x:auto;
	overflow-y:hidden;
	overscroll-behavior-x:contain;
	scrollbar-width:none;
	white-space:nowrap;
	/* A generous touch area: out to the screen edges, up to the top bar, and down under the typed
	   word (which lets touches through); the words themselves don't move */
	margin:0 -14px;
	padding:14px 46px 30px 14px;
	font-size:15px;
	cursor:pointer;
	touch-action:pan-x pinch-zoom;
	-webkit-mask-image:linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 50px), transparent calc(100% - 14px));
	mask-image:linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 50px), transparent calc(100% - 14px));
}

.versus:not(.with_rival) + .entry_wrap { margin-top:-16px; }
/* ...but under the past-day bar the strip is already pulled up 8px, so the typed word stays put */
.past_bar:not(.hide) + .versus:not(.with_rival) + .entry_wrap { margin-top:-8px; }
.with_rival .my_words { padding-bottom:14px; }

.my_words::-webkit-scrollbar { display:none; }

.mw_stats {
	display:flex;
	gap:12px;
	font-size:13px;
	color:var(--muted);
}

.mw_stats .icon { margin-right:3px; }
.mw_revealed { color:var(--accent); font-weight:700; }

.mw_words {
	display:flex;
	gap:12px;
	padding-left:14px;
	border-left:1px solid var(--line-strong);
}

.mw_words span { text-transform:capitalize; }
.mw_words .six, .mw_words .full { font-weight:700; }
.mw_words .full { color:var(--center); }
.mw_words .fresh { animation:fresh 1.2s ease-out; }
.mw_words .none { color:var(--faint); text-transform:none; }
.vs_empty { font-size:13px; color:var(--faint); }

/* Rival at the bottom of the screen (menu setting), below the buttons */
.vs_rival.at_bottom {
	flex:none;
	width:100%;
	margin-top:auto;
	padding-top:10px;
}

.vs_rival .vs_row { cursor:pointer; }


/* Planner pages: an ordinary scrolling page */

.layout {
	width:100%;
	max-width:880px;
	margin:0 auto;
	padding:max(14px, env(safe-area-inset-top)) 16px 28px;
	display:flex;
	flex-direction:column;
	gap:16px;
}

.masthead {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding-top:12px;
}

.title {
	display:flex;
	align-items:baseline;
	gap:12px;
	flex-wrap:wrap;
}

h1 {
	margin:0;
	font-size:30px;
	font-weight:700;
	letter-spacing:0.01em;
}

.date_line {
	font-size:14px;
	color:var(--muted);
}

.round {
	flex:none;
	width:36px;
	height:36px;
	border-radius:50%;
	border:1px solid var(--line-strong);
	background:var(--panel);
	font-size:17px;
	font-weight:700;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:0;
}

.round:hover { background:var(--panel-hover); }

/* The word being typed, with a toast above it */

.entry_wrap {
	flex:none;
	position:relative;
	pointer-events:none;
	width:100%;
	padding-top:8px;
	display:flex;
	justify-content:center;
}

.entry {
	min-height:42px;
	display:flex;
	align-items:center;
	font-size:32px;
	font-weight:700;
	letter-spacing:0.06em;
}

.typed .c { color:var(--accent); }
.typed .x { color:var(--dim-letter); }

.caret {
	width:2px;
	height:32px;
	margin-left:2px;
	background:var(--accent);
	animation:blink 1s steps(1) infinite;
}

@keyframes blink { 50% { opacity:0; } }

.entry_wrap.shake .entry { animation:shake 0.32s; }

@keyframes shake {
	20% { transform:translateX(-7px); }
	40% { transform:translateX(6px); }
	60% { transform:translateX(-4px); }
	80% { transform:translateX(2px); }
}

.toast {
	position:absolute;
	z-index:2;
	bottom:calc(100% - 10px);
	left:50%;
	transform:translate(-50%, 4px);
	padding:5px 12px;
	border-radius:8px;
	border:1px solid var(--line-strong);
	background:var(--panel);
	font-size:14px;
	font-weight:500;
	white-space:nowrap;
	text-align:center;
	opacity:0;
	pointer-events:none;
	transition:opacity 0.15s, transform 0.15s;
}

.toast.show {
	opacity:1;
	transform:translate(-50%, 0);
}

/* A miss: near-black on dark, deep navy on light (--bad-* tokens) */
.toast.bad {
	border-color:var(--bad-edge);
	background:var(--bad-bg);
	color:var(--bad-text);
}

.toast.good, .toast.big {
	border-color:var(--accent-line);
	color:var(--good-text);
}

.toast.big {
	background:var(--accent);
	color:var(--bg);
	font-weight:700;
	letter-spacing:0.02em;
}

/* Reaching Radiant */
.toast.radiant {
	padding:8px 22px;
	border:2px solid var(--accent);
	border-radius:12px;
	background:var(--panel);
	color:var(--accent);
	font-size:24px;
	font-weight:700;
	letter-spacing:0.03em;
	box-shadow:0 0 18px var(--accent-soft), 0 0 4px var(--accent);
	/* Starts low over the entry field (just emptied by the word that got you here) and rises slowly the
	   whole time it shows, fading and growing all the way, as if you're flying into it, gone by the
	   time it's half again as big. (An animation, not transitions; sparkle() in scripts.js follows this
	   path, so keep the two in step.) */
	top:29px;
	bottom:auto;
	transform:translate(-50%, calc(-50% - 22px)) scale(1.5);
	transition:none;
}

.toast.radiant.show {
	animation:ascend 2s linear both;
}

@keyframes ascend {
	0% { opacity:0; transform:translate(-50%, calc(-50% + 10px)) scale(1); }
	6% { opacity:1; transform:translate(-50%, calc(-50% + 8px)) scale(1.03); }
	45% { opacity:0.8; transform:translate(-50%, calc(-50% - 4.4px)) scale(1.225); }
	100% { opacity:0; transform:translate(-50%, calc(-50% - 22px)) scale(1.5); }
}

.toast small {
	display:block;
	font-size:12px;
	font-weight:500;
	opacity:0.85;
}

/* The snowflake */

.flake {
	flex:0 1 auto;
	width:100%;
	max-width:420px;
	min-height:0;
	max-height:100%;
	overflow:visible;
	touch-action:none;
}

.arms path {
	fill:none;
	stroke:var(--arm);
	stroke-width:2.2;
	stroke-linecap:round;
	stroke-linejoin:round;
	transition:stroke 0.3s;
}

.cell { cursor:pointer; }

.cell_body {
	transform-box:fill-box;
	transform-origin:center;
	transition:transform 0.08s;
}

.cell path {
	fill:var(--cell);
	stroke:var(--cell-edge);
	stroke-width:1.5;
	transition:fill 0.12s;
}

.cell text {
	fill:var(--cell-text);
	font-size:26px;
	font-weight:700;
	text-anchor:middle;
	dominant-baseline:central;
	pointer-events:none;
}

.cell.center path { fill:var(--center); stroke:none; }
.cell.center text { fill:var(--center-text); }

@media (hover:hover) {
	.cell.outer:hover path { fill:var(--cell-hover); }
}

.cell.pressed .cell_body { transform:scale(0.9); }
.cell.pressed path { fill:var(--cell-press); transition:none; }
.cell.center.pressed path { fill:var(--center-press); }

/* Shuffle without motion (reduced-motion setting): the new letters just fade in */
.shuffled .cell.outer text { animation:settle 0.28s ease-out; }

/* Shuffle spin: the spinning letters smear (scripts.js sets the blur to match the speed) */
.spinning .whirl text { filter:url(#smear); }

@keyframes settle {
	from { opacity:0; }
	to { opacity:1; }
}

/* Halo: the six points light up together, and the arms flash */
.six_burst .cell.outer path { animation:glow 1.5s ease-out; }
.six_burst .arms path { animation:arm_lit 1.5s ease-out; }
.flake_burst .cell path { animation:glow 1.5s ease-out; }
.flake_burst .arms path { animation:arm_lit 1.5s ease-out; }

@keyframes glow {
	15% { fill:var(--glow); }
}

@keyframes arm_lit {
	15% { stroke:var(--arm-lit); stroke-width:3.5; }
}

/* Answers revealed: the board is just for looking */
.flake.locked .ring, .flake.locked .hub { opacity:0.45; }
.controls.locked .control:not([data-act="shuffle"]) { opacity:0.4; }

.controls {
	flex:none;
	touch-action:none;
	display:flex;
	align-items:center;
	gap:14px;
	padding-bottom:4px;
}

.control {
	min-width:96px;
	height:48px;
	padding:0 18px;
	border-radius:24px;
	border:1px solid var(--line-strong);
	background:var(--panel);
	font-size:16px;
	font-weight:500;
	transition:transform 0.08s, background 0.12s;
}

/* Delete and Enter tuck up and out toward the board, about where a thumb expects the next cell */
.control[data-act="delete"] { position:relative; top:-24px; left:-8px; }
.control[data-act="enter"] { position:relative; top:-24px; left:8px; }

.control.round {
	min-width:0;
	width:48px;
	height:48px;
	padding:0;
}

.control svg {
	width:22px;
	height:22px;
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.control.pressed {
	transform:scale(0.94);
	background:var(--accent-soft);
}


/* Drawers: drop down from under the top bar over a dimmed play area */

.scrim {
	position:fixed;
	inset:0;
	z-index:3;
}

.play { transition:filter 0.18s; }
.drawer_open .play { filter:blur(6px); }

.drawer {
	position:absolute;
	left:8px;
	right:8px;
	top:calc(max(10px, env(safe-area-inset-top)) + 52px);
	z-index:4;
	max-height:calc(100% - max(10px, env(safe-area-inset-top)) - 80px);
	overflow-y:auto;
	overscroll-behavior:contain;
	-webkit-overflow-scrolling:touch;
	padding:14px 16px 16px;
	border:1px solid var(--line-strong);
	border-radius:14px;
	background:var(--panel);
	box-shadow:var(--shadow);
	opacity:0;
	visibility:hidden;
	transform:translateY(-12px);
	transition:opacity 0.18s, transform 0.18s, visibility 0s 0.18s;
}

.drawer.open {
	opacity:1;
	visibility:visible;
	transform:none;
	transition:opacity 0.18s, transform 0.18s;
}

.drawer_head, .panel_head {
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:10px;
}

.friends_head { margin-top:18px; }

.panel {
	border:1px solid var(--line);
	border-radius:14px;
	background:var(--panel);
	padding:12px 14px 14px;
}

.panel_title {
	font-size:13px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:0.08em;
	color:var(--muted);
}

.panel_title b {
	margin-left:4px;
	color:var(--text);
	text-transform:none;
	letter-spacing:0;
}

.drawer_head .hint { margin-left:auto; font-size:12px; }

.sort_btn {
	width:30px;
	height:30px;
	color:var(--muted);
}

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

.sort_btn .sort_recent, .sort_btn.recent .sort_abc { display:none; }
.sort_btn.recent .sort_recent { display:block; }

.special_counts {
	margin-left:auto;
	display:inline-flex;
	gap:12px;
	font-size:14px;
	font-weight:700;
}

.special_counts .icon { margin-right:4px; }

.found {
	list-style:none;
	margin:0;
	padding:0;
	columns:2;
	column-gap:18px;
	font-size:15px;
}

.found li {
	padding:4px 0;
	border-bottom:1px solid var(--line);
	break-inside:avoid;
	text-transform:capitalize;
}

.found li.full, .found li.six { font-weight:700; }
.found li.full { color:var(--center); }
.found li .icon { margin-left:5px; }
.found li.fresh { animation:fresh 1.2s ease-out; }
.found li.none { color:var(--faint); border:0; text-transform:none; }
/* Revealed answers you didn't find */
.found li.missed { color:var(--faint); font-style:italic; }
.found li.missed.full { color:var(--faint); }

@keyframes fresh {
	from { color:var(--accent); }
}

.live_dot {
	width:7px;
	height:7px;
	border-radius:50%;
	background:var(--accent);
	animation:breathe 2.4s ease-in-out infinite;
}

@keyframes breathe { 50% { opacity:0.3; } }

.friends {
	display:flex;
	flex-direction:column;
	gap:12px;
	margin-bottom:8px;
}

.friend {
	display:grid;
	grid-template-columns:1fr auto auto;
	grid-template-areas:"name rank score" "bar bar bar" "meta meta meta";
	align-items:baseline;
	column-gap:10px;
	row-gap:4px;
}

.f_name { grid-area:name; font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.f_name em { font-style:normal; font-weight:500; font-size:12px; color:var(--accent); }
.f_rank { grid-area:rank; font-size:13px; color:var(--muted); }
.f_score { grid-area:score; font-weight:700; }
.f_meta { grid-area:meta; font-size:12px; color:var(--faint); }
.f_meta .icon { margin-right:2px; }

.f_bar {
	grid-area:bar;
	height:5px;
	border-radius:3px;
	background:var(--line);
	overflow:hidden;
}

.f_bar i {
	display:block;
	height:100%;
	background:var(--theirs);
	transition:width 0.4s ease;
}

.friend.you .f_bar i { background:var(--mine); }
.friend.angel .f_rank { color:var(--accent); font-weight:700; }

.menu_item {
	width:100%;
	margin-bottom:14px;
	padding:10px 12px;
	border:1px solid var(--line-strong);
	border-radius:10px;
	background:var(--bg);
	font-weight:700;
	text-align:left;
}

/* Past puzzles, listed under their menu button */
.past_btn {
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.past_btn .chev {
	width:18px;
	height:18px;
	fill:none;
	stroke:var(--muted);
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
	transition:transform 0.18s;
}

.past_btn.open { margin-bottom:6px; }
.past_btn.open .chev { transform:rotate(180deg); }

.past_list {
	margin:0 0 14px;
	display:flex;
	flex-direction:column;
}

.past_day {
	display:flex;
	align-items:center;
	gap:8px;
	padding:9px 10px;
	border:0;
	border-bottom:1px solid var(--line);
	background:none;
	font-size:14px;
	text-align:left;
}

.past_day:hover { background:var(--panel-hover); }
.past_day.on { background:var(--accent-soft); }
.pd_date { flex:1; font-weight:700; }
.past_day.revealed .pd_date { color:var(--muted); opacity:0.7; }
.pd_date .icon { width:13px; height:13px; margin-right:5px; vertical-align:-0.1em; color:var(--muted); }
.pd_badges { display:inline-flex; gap:3px; }
.pd_badge .icon { width:14px; height:14px; }
.pd_rank { color:var(--muted); }
.pd_rank.none { color:var(--faint); }
.pd_score { min-width:30px; text-align:right; }

.past_more {
	margin-top:6px;
	padding:8px;
	border:0;
	background:none;
	color:var(--accent);
	font-size:14px;
	font-weight:700;
}

.menu_foot {
	margin:16px 0 0;
	font-size:12px;
	color:var(--faint);
}

.menu_foot .date_line { font-size:12px; color:inherit; }

.setting + .setting { margin-top:14px; }

.setting_label {
	display:block;
	margin-bottom:6px;
	font-size:13px;
	color:var(--muted);
}

.segmented {
	display:inline-flex;
	border:1px solid var(--line-strong);
	border-radius:9px;
	overflow:hidden;
}

.segmented button {
	padding:6px 14px;
	border:0;
	background:none;
	font-size:14px;
}

.segmented button + button { border-left:1px solid var(--line-strong); }
.segmented button.on { background:var(--accent-soft); color:var(--accent); font-weight:700; }

.name_row {
	display:flex;
	gap:8px;
	margin-bottom:6px;
}

.name_row input {
	flex:1;
	min-width:0;
	padding:8px 10px;
	border:1px solid var(--line-strong);
	border-radius:9px;
	background:var(--bg);
	color:var(--text);
	font:inherit;
	font-size:16px;
}

.name_row input:focus {
	outline:none;
	border-color:var(--accent);
}

.link_btn {
	padding:4px 0;
	border:0;
	background:none;
	color:var(--muted);
	font-size:13px;
	text-decoration:underline;
	text-underline-offset:3px;
}

.pin_prompt { margin:0 0 8px; font-size:14px; line-height:1.4; }

.signed_in, .group_line, .group_buttons {
	display:flex;
	align-items:baseline;
	gap:12px;
}

.signed_in { margin-bottom:6px; }
.who_name, .group_name { font-weight:700; font-size:16px; }
.group_count { color:var(--muted); font-size:13px; }
.group_buttons { align-items:center; margin-top:8px; }
.group_form .hint { margin-top:0; }

.save_name {
	padding:8px 14px;
	border:1px solid var(--accent-line);
	border-radius:9px;
	background:var(--accent-soft);
	color:var(--accent);
	font-weight:700;
}


/* Stats sheet: tiles, final ranks (one hue, counts beside the bars), totals, badges */

.st_who { margin:-6px 0 12px; color:var(--muted); }

.st_tiles {
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:8px;
}

.st_tile {
	display:flex;
	flex-direction:column;
	align-items:center;
	padding:10px 4px 8px;
	border:1px solid var(--line);
	border-radius:10px;
	background:var(--bg);
	text-align:center;
}

.st_tile b { font-size:24px; line-height:1.1; }
.st_tile span { font-size:11px; color:var(--muted); line-height:1.25; }

.st_ranks {
	list-style:none;
	margin:6px 0 0;
	padding:0;
}

.st_ranks li {
	display:grid;
	grid-template-columns:84px 1fr 28px;
	align-items:center;
	gap:10px;
	padding:3px 0;
	font-size:13px;
}

.sr_name { color:var(--text); }
.st_ranks li.zero .sr_name, .st_ranks li.zero .sr_n { color:var(--faint); }

.sr_track {
	height:8px;
	border-radius:0 4px 4px 0;
	background:var(--line);
}

.sr_track i {
	display:block;
	height:100%;
	min-width:0;
	border-radius:0 4px 4px 0;
	background:var(--mine);
}

.sr_n { text-align:right; font-weight:700; }

.st_totals {
	display:flex;
	flex-wrap:wrap;
	gap:6px 16px;
	font-size:14px;
	color:var(--muted);
}

.st_totals b { color:var(--text); margin-right:3px; }
.st_totals .icon { margin-right:4px; }

.st_badges {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:8px;
	margin-top:6px;
}

.badge {
	display:flex;
	align-items:center;
	gap:9px;
	padding:8px 10px;
	border:1px dashed var(--line-strong);
	border-radius:10px;
	color:var(--faint);
	line-height:1.25;
}

.badge.earned {
	border:1px solid var(--accent-line);
	background:var(--accent-soft);
	color:var(--text);
}

.b_icon {
	position:relative;
	flex:none;
	width:30px;
	height:30px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.b_icon .icon { width:26px; height:26px; color:var(--faint); }
.badge.earned .b_icon .icon { color:var(--accent); }

/* "1st" tag on the first-to-find badges */
.b_icon i {
	position:absolute;
	right:-5px;
	bottom:-3px;
	padding:0 3px;
	border-radius:5px;
	background:var(--panel);
	font-size:9px;
	font-style:normal;
	font-weight:700;
}

.badge.earned .b_icon i { color:var(--accent); }
.b_text { flex:1; min-width:0; display:flex; flex-direction:column; }
.b_text b { font-size:13px; }
.b_text small { font-size:11px; color:var(--muted); }
.badge:not(.earned) .b_text small { color:var(--faint); }
.b_count { font-size:13px; font-weight:700; color:var(--accent); }

@media (max-width:380px) {
	.st_badges { grid-template-columns:1fr; }
}

/* How to play sheet, and the rank ladder in the points drawer */

.overlay {
	position:fixed;
	inset:0;
	z-index:10;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:16px;
	background:rgba(3, 10, 20, 0.6);
	-webkit-backdrop-filter:blur(3px);
	backdrop-filter:blur(3px);
}

.sheet {
	position:relative;
	width:100%;
	max-width:420px;
	max-height:calc(100dvh - 32px);
	overflow-y:auto;
	padding:20px 22px 22px;
	border:1px solid var(--line-strong);
	border-radius:16px;
	background:var(--panel);
	box-shadow:var(--shadow);
	line-height:1.5;
}

.sheet h2 { margin:0 0 10px; font-size:22px; }
.sheet h3 { margin:16px 0 4px; font-size:15px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }
.sheet p { margin:0 0 10px; }
.sheet ul { margin:0 0 10px; padding-left:20px; }

.sheet .close {
	position:absolute;
	top:14px;
	right:14px;
	font-size:20px;
	font-weight:500;
}

.callout {
	display:flex;
	gap:12px;
	align-items:flex-start;
	margin:4px 0 10px;
	padding:10px 12px;
	border:1px solid var(--accent-line);
	border-radius:10px;
	background:var(--accent-soft);
}

.callout .icon { flex:none; width:24px; height:24px; margin-top:2px; }
.callout p { margin:0; }

.ranks {
	list-style:none;
	margin:0;
	padding:0;
}

.ranks li {
	display:flex;
	justify-content:space-between;
	padding:7px 10px;
	border-radius:8px;
	color:var(--faint);
}

.ranks li.got { color:var(--text); }
.ranks .to_go { font-family:'Fredoka', sans-serif; font-size:0.8em; font-style:normal; font-weight:400; color:var(--muted); margin-left:5px; vertical-align:0.08em; }

.ranks li.here {
	background:var(--accent-soft);
	color:var(--accent);
	font-weight:700;
}


/* Planner (admin/) */

.planner .date_line { color:var(--accent); text-decoration:none; }
.planner_body { display:flex; flex-direction:column; gap:16px; }
.planner .panel_head .save_name { margin-left:auto; padding:5px 12px; font-size:14px; }
.planner .panel_head .round { margin-left:auto; width:30px; height:30px; }
.pin_panel .panel_title { display:block; margin-bottom:8px; }

.mini {
	font-weight:500;
	letter-spacing:0.12em;
	color:var(--muted);
}

.mini b {
	margin-right:4px;
	padding:1px 6px;
	border-radius:5px;
	background:var(--center);
	color:var(--center-text);
	letter-spacing:0;
}

.link {
	padding:0;
	border:0;
	background:none;
	color:var(--accent);
	font-size:14px;
}

.link:hover { text-decoration:underline; }

.d_actions {
	display:flex;
	gap:12px;
	align-items:center;
	justify-content:flex-end;
}

.d_actions .save_name { padding:4px 10px; font-size:14px; }

.warn { margin:4px 0 10px; color:var(--accent); font-weight:500; }

.schedule_on {
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin:6px 0 10px;
	font-size:14px;
	color:var(--muted);
}

.schedule_on input {
	padding:5px 8px;
	border:1px solid var(--line-strong);
	border-radius:8px;
	background:var(--bg);
	color:var(--text);
	font:inherit;
}

.option {
	display:grid;
	grid-template-columns:minmax(120px, 0.8fr) minmax(190px, 1.2fr) auto;
	gap:8px;
	align-items:center;
	padding:7px 0;
	border-bottom:1px solid var(--line);
	font-size:15px;
}

.option.no_six > span:not(.d_actions) { opacity:0.45; }

.counts {
	display:inline-flex;
	flex-wrap:wrap;
	align-items:center;
	gap:4px 14px;
}

.c_kind {
	display:inline-flex;
	align-items:center;
	gap:4px;
}

.d_stats {
	color:var(--muted);
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:4px 14px;
}

.day {
	display:grid;
	grid-template-columns:110px 110px 1fr 40px auto;
	gap:10px;
	align-items:center;
	padding:7px 0;
	border-bottom:1px solid var(--line);
	font-size:14px;
}

.day.past { opacity:0.5; }
.day.today { background:var(--accent-soft); margin:0 -14px; padding:7px 14px; }
.d_date em { font-style:normal; font-size:12px; color:var(--accent); }
.d_empty { grid-column:2 / -1; display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--faint); }
.d_by { font-size:12px; color:var(--faint); }
.d_by.admin { color:var(--accent); font-weight:700; }

@media (max-width:640px) {
	.day { grid-template-columns:1fr auto; }
	.d_stats { grid-column:1 / -1; }
	.d_empty { grid-column:2 / -1; }
	.option { grid-template-columns:1fr; }
	.option .d_actions { grid-column:1 / -1; justify-content:flex-start; }
}

.d_none { font-size:14px; color:var(--faint); }

.weird_list {
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	padding:10px 0 12px;
	border-bottom:1px solid var(--line);
}

/* A weird word: tap to leave it out (−) or put it back (+). Dotted underline = Halo,
   solid = Snowflake. */
.weird_word {
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:4px 6px 4px 10px;
	border:1px solid var(--line-strong);
	border-radius:8px;
	background:var(--bg);
	font-size:14px;
}

.weird_word:hover { border-color:var(--accent-line); }

.weird_word.kind_six .ww {
	-webkit-text-decoration:underline dotted;
	text-decoration:underline dotted;
	text-underline-offset:3px;
}

.weird_word.kind_flake .ww {
	-webkit-text-decoration:underline solid;
	text-decoration:underline solid;
	text-underline-offset:3px;
}

.weird_word .pm {
	width:20px;
	height:20px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:5px;
	background:var(--accent-soft);
	color:var(--accent);
	font-weight:700;
	line-height:1;
}

.weird_word.omitted {
	border-style:dashed;
	color:var(--faint);
}

.weird_word.omitted .ww { opacity:0.6; }

/* Leave out all / put all back, above the words */
.ww_tools {
	flex-basis:100%;
	display:flex;
	gap:16px;
	margin-bottom:2px;
}

/* Hovering a word shows what it means and where to look it up, just above it (on touch screens,
   just the links, always shown) */
.ww_wrap {
	position:relative;
	display:inline-flex;
}

.ww_look {
	position:absolute;
	left:0;
	bottom:100%;
	z-index:3;
	display:none;
	flex-direction:column;
	gap:6px;
	width:max-content;
	max-width:320px;
	padding:8px 10px;
	border:1px solid var(--line-strong);
	border-radius:8px;
	background:var(--panel);
	box-shadow:var(--shadow);
	font-size:13px;
	line-height:1.4;
}

.ww_def { display:flex; flex-direction:column; gap:3px; }
.wd_word { font-size:14px; }
.wd_via { font-size:12px; color:var(--muted); }
.wd_sense i { color:var(--muted); }
.wd_none { color:var(--faint); }
.ww_links { display:flex; gap:12px; font-size:12px; }
.ww_look a { color:var(--accent); }

@media (hover:hover) {
	.ww_wrap:hover .ww_look { display:flex; }
}

@media (hover:none) {
	.ww_wrap { flex-direction:column; align-items:flex-start; gap:2px; }
	.ww_look { position:static; display:flex; width:auto; padding:0 2px; border:0; background:none; box-shadow:none; font-size:11px; }
	.ww_def { display:none; }
}

.obscure_panel .panel_head .segmented { margin-left:auto; }
.obscure_panel .hint { margin:0; }

.notice {
	position:fixed;
	left:50%;
	bottom:max(20px, env(safe-area-inset-bottom));
	transform:translateX(-50%);
	z-index:20;
	padding:9px 16px;
	border:1px solid var(--accent-line);
	border-radius:10px;
	background:var(--panel);
	box-shadow:var(--shadow);
	font-size:14px;
}


/* Radiant / Snow Angel twinkles (see sparkle() in scripts.js) */
.sparkles {
	position:fixed;
	inset:0;
	z-index:100;
	pointer-events:none;
	overflow:hidden;
}

.sparkles i {
	position:absolute;
	opacity:0;
	animation:twinkle 800ms ease-in-out both;
}

.sparkles svg {
	display:block;
	width:100%;
	height:100%;
	fill:#fff;
	filter:drop-shadow(0 0 2px var(--spark-glow)) drop-shadow(0 0 5px var(--spark-glow));
}

@keyframes twinkle {
	0% { opacity:0; transform:scale(0) rotate(0deg); }
	45% { opacity:1; transform:scale(1) rotate(45deg); }
	100% { opacity:0; transform:scale(0) rotate(90deg); }
}


/* Planner: players and groups */
.player_row, .group_row {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:4px 12px;
	padding:9px 0;
	border-top:1px solid var(--line);
}

.pl_name { font-weight:700; }
.pl_meta { flex:1; color:var(--muted); font-size:13px; }
.pl_link { flex-basis:100%; font-size:13px; color:var(--accent); word-break:break-all; }
.groups { margin-top:14px; }