*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;display:flex;flex-direction:column;min-height:100vh;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color:#f3f4f6;background:radial-gradient(1400px 700px at 10% -10%,#2b3234,#0b0c0d) fixed}
/* Links and text defaults */
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}

.topbar{position:sticky;top:0;z-index:10;display:flex;gap:12px;justify-content:space-between;align-items:center;padding:14px 16px;background:#0e0f10ad;backdrop-filter:blur(6px);border-bottom:1px solid #1f2425;overflow:hidden;min-height:56px;max-height:none}
.topbar h1{font-size:22px;letter-spacing:.5px;margin:0}
/* Taller header variant (used on modes.html) */
.topbar--tall{padding:22px 16px}
.topbar--tall h1{font-size:26px}
/* Removed animated/hover brand elements for simpler title */
.container{max-width:1200px;width:min(100%,560px);margin:20px auto;padding:0 16px}
/* Wide container variant (for pages like modes.html) with modest cap */
.container--wide{max-width:1000px;width:100%}
main{flex:1 0 auto}
.search-box{position:sticky;top:60px;z-index:5;margin:6px auto 0;max-width:840px;width:100%}
#search{width:100%;padding:16px 20px;border-radius:24px;border:1px solid #2a2f30;background:#141718;color:#fff;font-size:18px;box-shadow:0 10px 30px rgba(0,0,0,.25);min-height:56px}
.suggestions{position:absolute;left:0;right:0;background:#0f1213;border:1px solid #242829;border-radius:16px;margin-top:6px;overflow:hidden;display:none;box-shadow:0 12px 28px rgba(0,0,0,.35)}
.search-actions{display:flex;justify-content:flex-end;margin-top:8px}
.suggestion{padding:14px 14px;cursor:pointer;border-top:1px solid #1b1f20;font-size:16px}
.suggestion:hover{background:#171b1c}
.guesses{margin:20px 0;display:flex;flex-direction:column;gap:14px}
/* Guess card revamped to vertical centered layout */
.guess{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;background:#0f1112;border:1px solid #1f2425;border-radius:16px;padding:16px 18px;box-shadow:0 10px 24px rgba(0,0,0,.22);width:100%;max-width:560px;margin:0 auto;min-height:264px}
.guess .guess-header{display:flex;align-items:center;gap:12px;width:100%;max-width:560px}
.guess .guess-header img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid #202526;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.guess .title{font-size:22px;font-weight:900;letter-spacing:.2px;margin:0}
.guess-body{width:100%;max-width:560px;margin:0 auto}

/* Stats in a strict 3x2 grid (like Spotle) */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin-top:8px}
.stat{display:inline-flex;flex-direction:column;gap:4px;background:#1a1d1e;border:1px solid #2e3335;border-radius:14px;padding:6px;min-height:clamp(56px,7vw,68px);align-items:center;justify-content:center;will-change:transform,opacity;width:100%}
.stat.good{background:#205c2f;border-color:#2a7a40}
.stat.warn{background:#6c5a17;border-color:#c1a01b}
.stat.bad{background:#431414;border-color:#6c2222}
.stat .stat-label{font-size:clamp(10px,1.6vw,12px);opacity:.86;text-align:center;width:100%}
.stat .stat-value{font-size:clamp(14px,2vw,16px);font-weight:800;display:flex;align-items:center;justify-content:center;gap:6px;position:relative;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .stat-value.long{font-size:14px}
.stat .stat-value.long2{font-size:13px}
.stat .stat-value.long3{font-size:12px}
.stat .stat-value.pop{font-size:12px;line-height:1.05}
.stat .stat-value.pop.long{font-size:11.5px}
.stat .stat-value.pop.long2{font-size:11px}
.stat .stat-value.pop.long3{font-size:10.5px}
.stat .stat-value::after{content:attr(data-dir);position:absolute;right:5px;opacity:.9;pointer-events:none}
/* Slightly smaller icon for popularity to match tighter text */
.stat .stat-value.pop::after{transform:scale(.9); transform-origin:right center}
.flag{filter:saturate(1.1)}
.flag-icon{width:20px;height:20px;border-radius:4px;object-fit:cover;image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;box-shadow:0 0 0 1px #2a2f30;position:absolute;left:6px;top:50%;transform:translateY(-50%);pointer-events:none;backface-visibility:hidden;transform-style:preserve-3d}
/* Reserve symmetric space for decorations (flag on left and arrow/check on right) so text stays centered */
.stat .stat-value[data-flag="1"],
.stat .stat-value[data-dir]:not([data-dir=""]) {padding-left:24px;padding-right:24px}
/* Extra room when a flag is present so it never visually touches the text */
.stat .stat-value[data-flag="1"]{padding-left:22px}
/* Extra room on the right for arrow/✓ so it never gets covered by long text */
.stat .stat-value[data-dir]:not([data-dir=""]) {padding-right:28px}
/* Even tighter for popularity to give a bit more room */
.stat .stat-value.pop[data-dir]:not([data-dir=""]) {padding-right:24px}
.legend{display:flex;gap:8px;margin-top:10px;justify-content:center}
.chip{padding:6px 10px;border-radius:999px;border:1px solid #2b3031;background:#1b2021;font-size:12px}
.chip.good{background:#0f3d1a;border-color:#1d5d2c}
.chip.warn{background:#4a3b12;border-color:#8a6b1a}
.chip.bad{background:#431414;border-color:#6c2222}
/* Fold/reveal animation with slight perspective */
@keyframes unfold{0%{transform:perspective(500px) rotateX(-90deg);opacity:0;filter:blur(2px)}100%{transform:perspective(500px) rotateX(0deg);opacity:1;filter:blur(0)}}
.fold-in{animation:unfold .5s cubic-bezier(.2,.7,.2,1) both;transform-origin:top}

/* Unified button style (works for <button> and <a>) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;min-height:40px;border-radius:12px;background:linear-gradient(135deg,#2fbf71,#1d9858);border:none;color:#fff;cursor:pointer;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.25);font-size:14px}
.btn:hover{filter:brightness(1.05)}
.btn:focus{outline:none}
/* Neutral button (for hint) */
.btn-neutral{background:linear-gradient(135deg,#2a2e31,#1b1f22)}

dialog{background:#0e1011;color:#f3f4f6;border:1px solid #232728;border-radius:14px;padding:16px;width:min(92vw,520px);max-width:92vw;max-height:90vh;overflow:auto}
/* Robust centering for dialogs */
dialog[open]{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}
dialog::backdrop{background:rgba(0,0,0,.4)}
/* Center content specifically for the hint modal */
#hintDialog h3,#hintDialog p{text-align:center}
#hintDialog menu{justify-content:center}
label{display:flex;flex-direction:column;gap:6px;margin:6px 0;font-size:14px}
input,select,textarea{padding:12px;border-radius:10px;border:1px solid #2a2f30;background:#111415;color:#fff;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
menu{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
.footer{border-top:1px solid #1f2425;background:#0e1011;margin-top:auto}

/* Modes page grid (mosaic) */
.modes-grid{display:grid;gap:14px;margin-top:12px;grid-template-columns:repeat(12,1fr);grid-template-areas:
	'day day day day day day random random random random random random'
	'day day day day day day countries countries countries countries countries countries'
	'custom custom custom custom custom custom countries countries countries countries countries countries';}
.tile{position:relative;border:1px solid #1f2425;border-radius:16px;padding:18px;background:linear-gradient(160deg,#121415,#0c0e0f);box-shadow:0 10px 26px rgba(0,0,0,.28);transition:transform .2s ease, box-shadow .2s ease}
.tile:hover{transform:translateY(-2px) rotateX(1deg) rotateY(-1deg);box-shadow:0 16px 34px rgba(0,0,0,.35)}
.tile .h{font-size:20px;font-weight:800;margin:0 0 6px}
.tile .d{opacity:.85;font-size:13px}
.tile .actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.tile--day{grid-area:day;min-height:260px}
.tile--day{grid-area:day;min-height:260px;position:relative;overflow:hidden}
.tile--day::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55));pointer-events:none}
.tile--day > *{position:relative;z-index:1}
.tile--random{grid-area:random}
.tile--countries{grid-area:countries}
.tile--custom{grid-area:custom}
/* Countries tile: wrap buttons flexibly so they never overflow */
.tile--countries .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;max-width:100%}
.tile--countries .btn{width:auto;flex:0 1 auto;white-space:nowrap}
/* Day cover image, not too tall */
.day-cover{position:absolute;left:16px;right:16px;bottom:16px;border-radius:14px;overflow:hidden;border:1px solid #24292a}
.day-cover img{display:block;width:100%;height:120px;object-fit:cover;filter:saturate(1.05) contrast(1.02)}
/* Custom tile bigger content spacing */
.tile--custom .d{margin-bottom:6px}
.tile--custom input{min-height:44px}
/* Divider inside custom tile */
.divider{height:1px;background:#1f2425;margin:16px -2px 10px}
/* Difficulty section */
.difficulty{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.diff{border:1px solid #263032;border-radius:12px;padding:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);display:block;color:inherit;text-decoration:none;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease}
.diff:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,0.02)}
.diff .actions{margin-top:8px}
.diff-title{font-weight:800;margin-bottom:4px}
.diff-desc{opacity:.85}
.diff--easy{background:linear-gradient(135deg,#0f2a1c,#10261d);border-color:#1b6b40}
.diff--medium{background:linear-gradient(135deg,#2a250f,#211e0d);border-color:#8a6b1a}
.diff--hard{background:linear-gradient(135deg,#2a1212,#201010);border-color:#6c2222}
.btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.15);box-shadow:none}
.btn--ghost:hover{background:rgba(255,255,255,.05)}
/* (removed older grid version and duplicate day-cover block to avoid conflicts) */

@media (max-width:900px){
		.modes-grid{grid-template-columns:1fr;grid-template-areas:
			'day'
			'random'
			'countries'
			'custom';
			gap:12px}
		.tile{padding:16px}
		.tile .h{font-size:18px}
		.tile .d{font-size:12.5px}
		.tile--countries .actions{display:flex;flex-wrap:wrap}
		.day-cover img{height:140px}
}
/* Mobile tweaks */
@media (max-width:600px){
	.topbar{overflow:visible;min-height:56px}
	/* Make header buttons smaller and consistent on mobile */
	.topbar .btn{padding:6px 10px;min-height:32px;font-size:12.5px;line-height:1;appearance:none;-webkit-appearance:none}
	/* Header actions container gap override (beats inline) */
	.topbar > div{gap:6px !important}
	/* Compact footer */
	.footer .container{padding:8px 0 !important;gap:6px !important}
	.footer nav{gap:6px !important}
	.footer{font-size:12px}
	.footer .btn{padding:5px 9px;min-height:28px;font-size:11.5px}
}
/* (Removed forcing .container to min-width:100% on small screens to allow custom widths) */
@media (max-width:520px){
	/* Dialog typography and shape on very small screens */
	dialog{border-radius:12px;padding:12px;width:min(94vw,480px)}
	.guess{max-width:480px;min-height:240px}
	.guess .guess-header{max-width:480px}
	.guess-body{max-width:480px}
	.stats{grid-template-columns:repeat(2,1fr)}
	.stat{min-height:52px;padding:3px}
	.stat .stat-label{font-size:11px}
	.stat .stat-value{font-size:13px}
	.stat .stat-value.pop{font-size:10.5px}
	.stat .stat-value.pop.long{font-size:10px}
	.stat .stat-value.pop.long2{font-size:9.5px}
	.stat .stat-value.pop.long3{font-size:9px}
	/* Keep flag size fixed on small screens */
	.flag-icon{width:20px;height:20px}
	/* Modes: prevent overflow by making difficulty single-column */
	.difficulty{grid-template-columns:1fr}
}


/* Extra-small devices: < 450px — tighter everything */
@media (max-width:450px){
	/* Modes page: tighter tiles and button wrapping */
	.modes-grid{gap:10px}
	.tile{padding:14px}
	.tile .h{font-size:17px}
	.tile .d{font-size:12px}
	.tile .actions{gap:6px}
	.tile--countries .actions{gap:6px}
	.tile--countries .btn{flex:1 1 auto; min-width: 42%; font-size:12px; padding:8px 10px}
	.tile--custom input{min-height:40px}
	.diff{padding:10px}
	/* Even tighter header buttons */
	.topbar .btn{padding:5px 8px;min-height:28px;font-size:11.5px}
	.topbar > div{gap:5px !important}
	/* Footer container fixed width for tiny screens */
	.footer .container{width:290px !important;max-width:290px !important;margin-left:auto;margin-right:auto}
	.guess{max-width:440px;min-height:224px}
	.guess .guess-header{max-width:440px}
	.guess-body{max-width:440px}
	.guess .guess-header img{width:60px;height:60px}
	.stats{grid-template-columns:repeat(2,1fr)}
	.stat{min-height:46px;padding:2px}
	.stat .stat-label{font-size:10px}
	.stat .stat-value{font-size:12px}
	.stat .stat-value.pop{font-size:9.5px}
	.stat .stat-value.pop.long{font-size:9px}
	.stat .stat-value.pop.long2{font-size:8.8px}
	.stat .stat-value.pop.long3{font-size:8.5px}
	/* Flags a bit smaller to save space, still crisp */
	.flag-icon{width:18px;height:18px}
	/* Reduce reserved paddings but keep symmetry and visibility */
	.stat .stat-value[data-flag="1"]{padding-left:30px}
	.stat .stat-value[data-dir]:not([data-dir=""]) {padding-right:34px}
	.stat .stat-value::after{right:8px}
	.stat .stat-value.pop::after{transform:scale(.85)}
	/* Footer even more compact on very small devices */
	.footer nav{gap:5px !important}
	.footer .btn{padding:4px 7px;min-height:26px;font-size:11px}
	.footer{font-size:11.5px}
}
@media (max-width:720px){
	.guess{max-width:600px}
	.guess .guess-header{max-width:600px}
	.guess-body{max-width:600px}
	.stats{grid-template-columns:repeat(2,1fr)}
	.stat{min-height:56px;padding:4px}
	.stat .stat-label{font-size:12px}
	.stat .stat-value{font-size:12px}
	.stat .stat-value.pop{font-size:11.5px}
	.stat .stat-value.pop.long{font-size:11px}
	.stat .stat-value.pop.long2{font-size:10.5px}
	.stat .stat-value.pop.long3{font-size:10px}
	/* Only avatar in header scales, flags stay 20x20 */
	.guess .guess-header img{width:72px;height:72px}
	.flag-icon{width:20px;height:20px}
	#search{font-size:16px}
	.grid{grid-template-columns:1fr}
}