:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #171717;
  background: #f6f4ef;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { background: #f6f4ef; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: linear-gradient(#fbfaf7, #f3f0e9); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

.shell { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 20px 0 42px; }
.loading-shell { width: min(660px, calc(100% - 28px)); }

.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.brand { display:flex; flex-direction:column; line-height:1; }
.brand strong { font-size: clamp(28px, 4.8vw, 46px); letter-spacing:-.055em; }
.brand span { margin-top:7px; color:#777167; font-size:11px; text-transform:uppercase; letter-spacing:.18em; font-weight:750; }
.top-actions { display:flex; align-items:center; gap:8px; }

.icon-btn, .tiny-btn { border:1px solid #d9d5cd; background:#fff; color:#222; }
.icon-btn { border-radius:999px; width:44px; height:44px; display:grid; place-items:center; font-weight:800; }
.tiny-btn { min-height:36px; border-radius:999px; padding:0 12px; font-size:12px; font-weight:800; }

.page-grid { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:16px; align-items:start; }
.game-card, .leaderboard-card, .loading-card { border:1px solid #dcd8d0; background:rgba(255,255,255,.94); border-radius:24px; box-shadow:0 16px 50px rgba(40,34,24,.055); }
.game-card { overflow:hidden; }
.loading-card { padding:72px 24px; text-align:center; margin-top:50px; }
.loading-card p { color:#726d64; }

.progress { display:grid; grid-template-columns:repeat(10, 1fr); gap:5px; padding:14px 16px 0; }
.progress div { height:6px; background:#e8e5df; border-radius:999px; }
.progress div.done { background:#202020; }
.progress div.current { background:linear-gradient(90deg,#202020 50%,#e8e5df 50%); }

.game-head { padding:16px 20px 8px; text-align:center; }
.eyebrow { color:#7a756d; font-size:11px; text-transform:uppercase; letter-spacing:.16em; font-weight:800; }
.game-head h1 { margin:9px 0 4px; font-size:clamp(24px,4vw,36px); letter-spacing:-.04em; }
.game-head p { margin:0; color:#716c64; font-size:14px; }

.stage { position:relative; margin:10px 14px 12px; min-height:470px; border:1px solid #dfdbd3; border-radius:19px; overflow:hidden; background:linear-gradient(#fbfaf7 0 78%, #d8d3ca 78% 78.3%, #eeeae3 78.3% 100%); }
.ground-line { position:absolute; left:4%; right:4%; bottom:21.7%; height:1px; background:#cbc6bd; }
.pokemon-column { position:absolute; top:5%; bottom:22%; width:48%; display:flex; align-items:flex-end; justify-content:center; }
.reference-column { left:0; }
.target-column { right:0; }
.pokemon-size-box { position:absolute; bottom:0; width:92%; display:flex; align-items:flex-end; justify-content:center; transition:height .13s ease-out; pointer-events:none; }
.pokemon-img { display:block; height:100%; max-height:100%; width:auto; max-width:none; object-fit:contain; transform-origin:50% 100%; }
.reference-box { z-index:4; }
.guess-box { z-index:2; }
.reference-img, .guess-img { filter:brightness(0) drop-shadow(0 8px 5px rgba(0,0,0,.10)); }
.revealed .guess-img, .revealed .reference-img { filter:none; }
.true-box { z-index:6; }
.true-img {
  opacity:.60;
  filter:
    brightness(0)
    drop-shadow(2px 0 0 rgba(255,255,255,.95))
    drop-shadow(-2px 0 0 rgba(255,255,255,.95))
    drop-shadow(0 2px 0 rgba(255,255,255,.95))
    drop-shadow(0 -2px 0 rgba(255,255,255,.95))
    drop-shadow(0 0 5px rgba(0,0,0,.55));
}
.name-chip { position:absolute; bottom:-54px; left:50%; transform:translateX(-50%); width:min(92%, 250px); text-align:center; }
.name-chip small { display:block; color:#8a857c; text-transform:uppercase; letter-spacing:.10em; font-size:9px; font-weight:800; }
.name-chip strong { display:block; margin-top:2px; font-size:13px; line-height:1.2; }
.reveal-key { position:absolute; top:12px; right:12px; display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; color:#5f5b55; background:rgba(255,255,255,.88); border:1px solid #dedad2; border-radius:999px; padding:7px 9px; }
.shadow-swatch { width:16px; height:16px; border-radius:5px; background:rgba(0,0,0,.58); border:2px solid #fff; box-shadow:0 0 0 1px #65615b; }

/* Reveal camera: keep the real comparison readable even after an extreme miss. */
.revealed .extreme-guess .guess-img { opacity:.34; }
.offscreen-note {
  position:absolute; top:13px; left:50%; transform:translateX(-50%); z-index:8;
  max-width:88%; padding:5px 8px; border-radius:999px; white-space:nowrap;
  background:rgba(255,255,255,.9); border:1px solid #dedad2; color:#68635c;
  font-size:9px; font-weight:850; letter-spacing:.02em;
}

.controls { padding:0 20px 22px; }
.guess-row { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; }
.slider { width:100%; accent-color:#202020; }
.guess-value { min-width:74px; text-align:right; font-variant-numeric:tabular-nums; font-weight:900; font-size:20px; }
.ratio-caption { margin-top:3px; color:#8a857c; font-size:11px; }
.round-result { margin-top:14px; padding:13px 14px; border:1px solid #dedad2; border-radius:15px; background:#f7f5f0; text-align:center; }
.round-result strong { display:block; font-size:21px; letter-spacing:-.02em; }
.round-result span { display:block; margin-top:3px; color:#777168; font-size:11px; line-height:1.45; }
.action-row { display:flex; gap:10px; margin-top:15px; }
.primary, .secondary { min-height:50px; border-radius:14px; font-weight:850; letter-spacing:.01em; }
.primary { flex:1; border:0; background:#171717; color:#fff; padding:0 18px; }
.secondary { border:1px solid #d8d4cc; background:#fff; color:#222; padding:0 18px; }

.final { padding:27px 22px 30px; text-align:center; }
.score-big { margin-top:8px; font-size:clamp(62px,11vw,98px); letter-spacing:-.075em; font-weight:950; line-height:.95; }
.score-big span { font-size:.33em; letter-spacing:-.02em; color:#777168; margin-left:4px; }
.result-blocks { margin:18px auto 8px; display:grid; grid-template-columns:repeat(5, 34px); justify-content:center; gap:4px; font-size:27px; line-height:1; }
.final-copy { margin:12px 0 18px; color:#69645d; }
.stats-grid { width:min(560px,100%); margin:0 auto 18px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.stats-grid div { background:#f5f2ec; border-radius:14px; padding:12px 8px; }
.stats-grid strong { display:block; font-size:20px; }
.stats-grid span { display:block; margin-top:3px; color:#827d74; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.final-actions { width:min(500px,100%); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.final-actions .primary { grid-column:1 / -1; }
.leaderboard-cta { grid-column:1 / -1; }

.leaderboard-form { width:min(500px,100%); margin:18px auto 0; padding:16px; border:1px solid #dcd8d0; border-radius:17px; text-align:left; background:#faf9f6; }
.form-title { font-weight:900; font-size:17px; }
.leaderboard-form p { margin:4px 0 13px; color:#777168; font-size:12px; line-height:1.45; }
.leaderboard-form label { display:block; margin:10px 0; }
.leaderboard-form label span { display:block; margin-bottom:5px; font-size:11px; font-weight:800; color:#615d56; }
.leaderboard-form input { width:100%; min-height:46px; border:1px solid #d4d0c8; border-radius:12px; padding:0 12px; background:#fff; font-size:16px; }
.leaderboard-form .primary { width:100%; margin-top:4px; }
.leaderboard-form small { display:block; margin-top:9px; color:#88827a; font-size:10px; line-height:1.45; }
.form-message { width:min(500px,100%); margin:12px auto 0; padding:11px 12px; border-radius:12px; background:#f1eee8; color:#5d5952; font-size:12px; }

.leaderboard-card { position:sticky; top:14px; overflow:hidden; }
.leaderboard-head { display:flex; align-items:center; justify-content:space-between; padding:15px 15px 11px; border-bottom:1px solid #ebe8e2; }
.leaderboard-head div { display:flex; flex-direction:column; }
.leaderboard-head span { font-size:10px; color:#888279; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.leaderboard-head strong { margin-top:2px; font-size:20px; letter-spacing:-.025em; }
.leaderboard-list { list-style:none; margin:0; padding:7px; max-height:590px; overflow:auto; }
.leaderboard-list li { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:7px; align-items:center; min-height:40px; padding:6px 8px; border-radius:10px; font-size:12px; }
.leaderboard-list li:nth-child(even) { background:#faf9f6; }
.leaderboard-list .rank { font-variant-numeric:tabular-nums; color:#817b72; }
.leaderboard-list .username { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:750; }
.leaderboard-list li strong { font-variant-numeric:tabular-nums; }
.leaderboard-list li.gold { background:linear-gradient(90deg,#fff7d6,#fffdf5); color:#806100; font-weight:900; }
.leaderboard-list li.silver { background:linear-gradient(90deg,#eef1f3,#fbfcfd); color:#59636b; font-weight:900; }
.leaderboard-list li.bronze { background:linear-gradient(90deg,#f5dfd0,#fff8f3); color:#8c552f; font-weight:900; }
.leaderboard-empty { padding:34px 20px; text-align:center; color:#777168; }
.leaderboard-empty strong { color:#2b2926; }
.leaderboard-empty p { margin:6px 0 0; font-size:12px; line-height:1.5; }
.leaderboard-foot { padding:10px 14px 13px; border-top:1px solid #ebe8e2; color:#8c867d; font-size:9px; text-align:center; }

.notice { margin:12px 0 0; color:#7d776f; font-size:10px; line-height:1.5; }
.loader, .mini-loader { border-radius:50%; border-style:solid; border-color:#ddd8cf; border-top-color:#1f1f1f; animation:spin .8s linear infinite; }
.loader { width:40px; height:40px; border-width:4px; margin:0 auto 18px; }
.mini-loader { width:24px; height:24px; border-width:3px; margin:0 auto 10px; }
@keyframes spin { to { transform:rotate(360deg); } }

.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.42); display:grid; place-items:center; padding:18px; z-index:30; }
.modal { width:min(540px,100%); max-height:85vh; overflow:auto; background:#fff; border-radius:22px; padding:22px; box-shadow:0 28px 90px rgba(0,0,0,.25); }
.modal h2 { margin-top:0; }
.modal p, .modal li { color:#5f5b55; line-height:1.55; }
.close { float:right; }
.error { color:#9a2f25; }

@media (max-width: 900px) {
  .page-grid { grid-template-columns:1fr; }
  .leaderboard-card { position:static; }
  .leaderboard-list { max-height:430px; }
}

@media (max-width: 640px) {
  .shell { width:min(100% - 14px, 1180px); padding-top:8px; }
  .topbar { margin-bottom:8px; }
  .brand strong { font-size:30px; }
  .brand span { font-size:9px; }
  .game-card, .leaderboard-card { border-radius:19px; }
  .progress { padding:11px 10px 0; gap:3px; }
  .progress div { height:5px; }
  .game-head { padding:13px 12px 5px; }
  .game-head h1 { font-size:25px; }
  .game-head p { font-size:12px; }
  .stage { min-height:390px; margin:8px; }
  .pokemon-column { width:50%; top:5%; }
  .pokemon-size-box { width:96%; }
  .name-chip { bottom:-50px; }
  .name-chip strong { font-size:11px; }
  .controls { padding:0 12px 16px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .final-actions { grid-template-columns:1fr; }
  .final-actions .primary, .leaderboard-cta { grid-column:auto; }
  .round-result span { font-size:10px; }
}

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

/* V2.1 polish: touch-friendly controls, stronger Top 3, tighter phone layout. */
body { overflow-x:hidden; }
.pokemon-img { user-select:none; -webkit-user-drag:none; }
.slider { min-height:44px; touch-action:pan-x; }
.slider::-webkit-slider-thumb { width:28px; height:28px; }
.slider::-moz-range-thumb { width:28px; height:28px; border:0; }
.leaderboard-list li.gold,
.leaderboard-list li.silver,
.leaderboard-list li.bronze { font-family:Georgia, "Times New Roman", serif; letter-spacing:.01em; }
.leaderboard-list li.gold .username,
.leaderboard-list li.silver .username,
.leaderboard-list li.bronze .username { font-size:13px; }
.leaderboard-list li.gold strong,
.leaderboard-list li.silver strong,
.leaderboard-list li.bronze strong { font-size:13px; }

@media (max-width: 640px) {
  .shell { width:calc(100% - 10px); padding-bottom:26px; }
  .topbar { padding:0 3px; }
  .top-actions { gap:6px; }
  .icon-btn { width:42px; height:42px; }
  .tiny-btn { min-height:42px; }
  .game-head h1 { line-height:1.06; }
  .game-head p { max-width:290px; margin-inline:auto; line-height:1.35; }
  .stage { min-height:365px; border-radius:16px; }
  .pokemon-column { top:4%; bottom:23%; }
  .pokemon-size-box { width:94%; }
  .name-chip { bottom:-48px; width:96%; }
  .name-chip small { font-size:8px; }
  .name-chip strong { font-size:10.5px; overflow-wrap:anywhere; }
  .reveal-key { top:8px; right:8px; padding:6px 7px; font-size:9px; }
  .shadow-swatch { width:13px; height:13px; }
  .guess-row { grid-template-columns:minmax(0,1fr) 66px; gap:8px; }
  .guess-value { min-width:0; font-size:18px; }
  .ratio-caption { margin-top:-3px; }
  .primary, .secondary { min-height:52px; }
  .round-result { margin-top:10px; padding:11px; }
  .round-result strong { font-size:19px; }
  .final { padding:22px 12px 24px; }
  .score-big { font-size:68px; }
  .result-blocks { grid-template-columns:repeat(5, 31px); font-size:25px; }
  .leaderboard-form { padding:13px; }
  .leaderboard-card { border-radius:19px; }
  .leaderboard-list { max-height:360px; }
  .leaderboard-head { padding:13px 12px 10px; }
}

@media (max-width: 380px) {
  .brand strong { font-size:27px; }
  .brand span { font-size:8px; letter-spacing:.12em; }
  .stage { min-height:340px; margin:6px; }
  .game-head { padding-left:9px; padding-right:9px; }
  .game-head h1 { font-size:22px; }
  .controls { padding-left:9px; padding-right:9px; }
  .progress { padding-left:8px; padding-right:8px; }
  .final { padding-left:9px; padding-right:9px; }
  .stats-grid { gap:6px; }
  .stats-grid div { padding:10px 5px; }
  .stats-grid strong { font-size:18px; }
}

/* =========================================================
   SizeDex V3 — visual rebrand
   Keeps the gameplay/layout logic intact while giving the site
   an original, cleaner game identity.
   ========================================================= */
:root {
  --sd-ink:#111827;
  --sd-muted:#6b7280;
  --sd-border:rgba(15,23,42,.10);
  --sd-panel:rgba(255,255,255,.88);
  --sd-accent:#6d5dfc;
  --sd-accent-2:#08a8c6;
  --sd-soft:#f3f5ff;
  --sd-floor:#f3f0e9;
}

html { background:#f7f8fc; }
body {
  color:var(--sd-ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(109,93,252,.10), transparent 30rem),
    radial-gradient(circle at 92% 10%, rgba(8,168,198,.09), transparent 28rem),
    linear-gradient(180deg,#fbfcff 0%,#f5f6fa 55%,#f8f7f3 100%);
}

.shell { width:min(1240px,calc(100% - 32px)); padding-top:24px; }
.topbar { margin-bottom:16px; padding:0 4px; }
.brand { display:block; }
.brand-lockup { display:flex; align-items:center; gap:12px; }
.brand-lockup > div { display:flex; flex-direction:column; line-height:1; }
.brand-mark {
  width:48px; height:48px; border-radius:15px; display:grid; place-items:center;
  color:#fff; font-size:25px; font-weight:950; letter-spacing:-.08em;
  background:linear-gradient(135deg,var(--sd-accent),var(--sd-accent-2));
  box-shadow:0 10px 24px rgba(82,73,207,.22), inset 0 1px 0 rgba(255,255,255,.35);
  transform:rotate(-4deg);
}
.brand strong {
  font-size:clamp(30px,4.2vw,48px); color:#10131a;
  letter-spacing:-.065em; line-height:.88;
}
.brand span { color:#73798a; margin-top:9px; letter-spacing:.17em; }

.game-card,.leaderboard-card,.loading-card {
  border-color:var(--sd-border);
  background:var(--sd-panel);
  box-shadow:0 18px 60px rgba(28,33,55,.075);
  backdrop-filter:blur(10px);
}
.game-card { border-radius:28px; }
.leaderboard-card { border-radius:24px; }

.progress { gap:7px; padding:17px 20px 0; }
.progress div { height:7px; background:#e8eaf1; }
.progress div.done { background:linear-gradient(90deg,var(--sd-accent),var(--sd-accent-2)); }
.progress div.current { background:linear-gradient(90deg,var(--sd-accent) 50%,#e8eaf1 50%); }

.game-head { padding-top:20px; }
.eyebrow { color:#74798a; letter-spacing:.18em; }
.game-head h1 { color:#11131a; font-weight:900; font-size:clamp(28px,4vw,42px); }
.game-head p { color:#727788; }

.stage {
  border-color:rgba(15,23,42,.11);
  border-radius:23px;
  background:
    radial-gradient(circle at 50% 16%,rgba(109,93,252,.055),transparent 38%),
    linear-gradient(#fff 0 78%,#d9d6cf 78% 78.3%,#f0ede7 78.3% 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.ground-line { background:#c9c6c0; }
.name-chip small { color:#84899a; }
.name-chip strong { color:#171a22; font-weight:850; }
.reveal-key {
  color:#565c6e; border-color:rgba(15,23,42,.10); background:rgba(255,255,255,.92);
  box-shadow:0 6px 20px rgba(24,28,48,.07);
}

.controls { padding-top:2px; }
.guess-value { color:#12151d; font-size:22px; }
.ratio-caption { color:#858a98; }
.slider { accent-color:var(--sd-accent); }
.slider::-webkit-slider-runnable-track { height:7px; border-radius:999px; background:#e2e5ed; }
.slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:27px; height:27px; margin-top:-10px;
  border-radius:50%; border:4px solid #fff; background:linear-gradient(135deg,var(--sd-accent),var(--sd-accent-2));
  box-shadow:0 2px 8px rgba(48,43,116,.28);
}
.slider::-moz-range-track { height:7px; border-radius:999px; background:#e2e5ed; }
.slider::-moz-range-thumb { width:21px; height:21px; border:4px solid #fff; border-radius:50%; background:var(--sd-accent); box-shadow:0 2px 8px rgba(48,43,116,.28); }

.primary {
  border:0; color:#fff;
  background:linear-gradient(135deg,#171a24 0%,#252b3b 100%);
  box-shadow:0 8px 18px rgba(20,24,35,.11);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.secondary { border-color:rgba(15,23,42,.12); background:rgba(255,255,255,.92); }
@media (hover:hover) and (pointer:fine) {
  .primary:hover { transform:translateY(-1px); box-shadow:0 11px 23px rgba(20,24,35,.16); filter:brightness(1.05); }
  .secondary:hover,.tiny-btn:hover,.icon-btn:hover { border-color:rgba(109,93,252,.32); background:#fff; }
}

.round-result { background:linear-gradient(135deg,#f8f8ff,#f4fbfc); border-color:rgba(109,93,252,.15); }
.round-result strong { color:#171a24; }

.leaderboard-head { padding:18px 17px 14px; }
.leaderboard-head strong { font-size:22px; }
.leaderboard-head span { color:#808598; }
.leaderboard-list li { min-height:43px; border-radius:12px; }
.leaderboard-list li:nth-child(even) { background:#f8f9fc; }
.leaderboard-foot { color:#9195a2; }

.final .score-big { color:#10131a; }
.stats-grid div { background:linear-gradient(180deg,#f7f8fd,#f2f4f8); border:1px solid rgba(15,23,42,.05); }
.result-blocks { filter:saturate(.92); }

.icon-btn,.tiny-btn { border-color:rgba(15,23,42,.11); background:rgba(255,255,255,.8); backdrop-filter:blur(8px); }
.notice { color:#8b8f9c; text-align:center; max-width:880px; margin:16px auto 0; }

@media (max-width:900px) {
  .page-grid { gap:14px; }
  .leaderboard-card { order:2; }
}

@media (max-width:640px) {
  .shell { width:calc(100% - 12px); padding-top:10px; }
  .brand-lockup { gap:9px; }
  .brand-mark { width:39px; height:39px; border-radius:12px; font-size:21px; }
  .brand strong { font-size:29px; }
  .brand span { margin-top:6px; font-size:8px; }
  .game-card,.leaderboard-card { border-radius:21px; }
  .progress { padding:12px 11px 0; gap:4px; }
  .game-head { padding-top:14px; }
  .game-head h1 { font-size:25px; }
  .stage { border-radius:18px; margin:8px; }
  .controls { padding-left:12px; padding-right:12px; }
  .guess-value { font-size:19px; }
}