@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;
}

@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;
	}
}

: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;
}

* { 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 {
	flex:none;
	width:100%;
	display:flex;
	align-items:center;
	gap:10px;
	padding:8px 0 2px;
	font-size:14px;
}

.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; }
.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;
}

.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:-12px; left:-12px; }
.control[data-act="enter"] { position:relative; top:-12px; left:12px; }

.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; }
.pd_badges { display:inline-flex; gap:3px; }
.pd_badge .icon { width:14px; height:14px; }
.pd_rank { color:var(--muted); }
.pd_rank em { font-style:normal; font-size:12px; color:var(--faint); }
.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);
}

.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 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; 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:auto; }
	.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;
}