/* Which Is Bigger? — v0.2.19 visual overhaul */
:root{--map-paper:#efe4bf;--map-ink:#073c6d;--map-red:#c92d27;--map-blue:#0875d1;--map-gold:#efb743;--map-cream:#f6efd9;--map-shadow:0 18px 42px rgba(22,17,12,.42);--font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;}
html,body{min-height:100%;}body{color:var(--map-ink);background:repeating-linear-gradient(25deg,#302d2b 0 5px,#3a3531 5px 10px,#272625 10px 15px);}body::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);opacity:.35;}
#app{position:relative;isolation:isolate;width:min(1560px,96vw);height:min(980px,96svh);min-height:680px;margin:2svh auto;padding:22px 215px 26px 270px;display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto;overflow:hidden;background:url("map-background.svg") center/cover no-repeat;border:10px solid #eadfbd;border-radius:10px;box-shadow:var(--map-shadow),inset 0 0 0 2px rgba(34,100,126,.25);}
#app::before,#app::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;}#app::before{background:linear-gradient(90deg,transparent 16%,rgba(249,241,213,.44) 25%,rgba(249,241,213,.78) 42%,rgba(249,241,213,.8) 62%,rgba(249,241,213,.5) 78%,transparent 89%);}#app::after{background:repeating-linear-gradient(90deg,transparent 0 24.7%,rgba(97,74,44,.11) 25%,rgba(255,255,255,.12) 25.2%,transparent 25.5% 49.7%,rgba(97,74,44,.1) 50%,rgba(255,255,255,.11) 50.2%,transparent 50.5% 74.7%,rgba(97,74,44,.1) 75%,rgba(255,255,255,.11) 75.2%,transparent 75.5%);mix-blend-mode:multiply;}
.map-rail-left,.map-rail-right{position:absolute;z-index:1;pointer-events:none}.map-rail-left{left:0;top:0;bottom:0;width:16.5%;min-width:210px;background:#0876b9}.map-rail-left::before{content:"✥";display:block;margin:24px 30px 18px;color:#f4ead0;font-size:2.25rem}.map-rail-left::after{content:"People\A Places\A A Bigger\A World\A\A ━━━━━\A\A MAPS\A TRAVEL\A DISCOVER\A EXPLORE";white-space:pre;position:absolute;left:32px;top:91px;color:#f8edcf;font-size:clamp(.84rem,1.15vw,1.28rem);font-weight:800;line-height:1.34}.map-rail-photo{position:absolute;left:0;right:0;top:41%;height:25%;background:linear-gradient(180deg,#9bc7dc 0 34%,#44675c 35% 47%,#173b2d 48%);border-top:7px solid #f3ead0;border-bottom:7px solid #f3ead0}.map-rail-right{right:0;top:54%;bottom:0;width:13.2%;min-width:178px;background:rgba(246,239,217,.91);border:2px solid rgba(39,101,126,.45)}.map-rail-right::before{content:"✥";display:block;text-align:center;padding:16px 0 13px;font-size:2.55rem;border-bottom:1px solid rgba(24,84,112,.35)}.map-rail-right::after{content:"━━  Interstate Highway\A ⊙  U.S. Highway\A ⊙  State Highway\A ──  Other Road\A ┄┄  Railroad\A ▪  National Park\A ▪  State Park\A ▬  Lake / River\A ┄┄  State Boundary\A\A Big World.\A Same Question.";white-space:pre;display:block;padding:10px 14px;font-size:clamp(.52rem,.63vw,.69rem);line-height:1.48;font-weight:700}
#app-header{position:relative;z-index:2;margin:0 0 18px;text-align:center}#app-header h1{position:relative;max-width:690px;margin:0 auto;font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif;font-size:clamp(3.65rem,5.15vw,5.6rem);line-height:.82;color:var(--map-red);text-shadow:0 3px rgba(255,255,255,.45);letter-spacing:-.065em}#app-header h1::first-line{color:var(--map-ink)}#app-header h1::before{content:"🌎";position:absolute;left:64%;top:-10%;font-size:.70em;transform:rotate(4deg)}#subtitle{display:inline-block;margin:11px 0 0;padding:7px 30px;background:var(--map-gold);font-size:0;font-weight:900;box-shadow:0 4px 8px rgba(80,55,24,.22);transform:rotate(-1deg)}#subtitle::before{content:"The Population Guessing Game";font-size:clamp(.88rem,1.3vw,1.34rem)}#version-number{display:none}
#top-stats{position:absolute;z-index:3;left:18.9%;top:34%;width:165px;display:flex;flex-direction:column;padding:12px 15px;background:rgba(247,240,218,.91);border:1px solid rgba(18,85,114,.42)}.stat-card{padding:4px 0;background:none;border:0;box-shadow:none;text-align:left}.stat-label{color:var(--map-ink);font-size:.73rem;font-weight:700;line-height:1.08}.stat-value{color:var(--map-ink);font-size:1.34rem;margin-top:1px;font-weight:900;line-height:1}
#round-control{position:relative;z-index:4;margin:0 auto 10px;display:grid;grid-template-columns:minmax(300px,430px) 160px;grid-template-areas:"difficulty difficulty" "start menu";gap:14px 36px;align-items:center;justify-content:center}#difficulty-control{grid-area:difficulty;width:100%}#difficulty-select{width:100%;height:54px;background:rgba(248,242,222,.95)!important;color:var(--map-ink)!important;border:1px solid rgba(69,72,57,.22)!important;border-radius:11px!important;box-shadow:0 4px 8px rgba(64,48,28,.17)!important;font-weight:900!important}#start-game-button{grid-area:start;width:100%;height:70px!important;padding:0!important;background:linear-gradient(#1787e4,#046bc1)!important;color:#fff;border-radius:12px!important;box-shadow:0 5px 10px rgba(21,59,82,.28)!important;font-size:1.48rem!important}.start-button-trace{display:none!important}#menu-control{grid-area:menu;position:relative;width:100%}#menu-button{width:100%;height:58px;padding:0!important;background:rgba(247,240,218,.95)!important;color:var(--map-ink)!important;border:1px solid rgba(74,72,58,.2)!important;border-radius:11px!important;box-shadow:0 4px 8px rgba(64,48,28,.18)!important;font-size:1.08rem!important}#round-timer{grid-area:start;width:100%;height:70px!important;background:rgba(247,240,218,.91);border-radius:12px}.timer-label{color:var(--map-ink)}#timer-value{color:#b92c26}
#status-panel{position:relative;z-index:2;margin:0 0 12px;min-height:1.2em}#status-message{color:var(--map-ink);font-weight:800;font-size:clamp(.8rem,1.05vw,.96rem)}
#game-board{position:relative;z-index:2;height:100%;min-height:0;display:grid;grid-template-columns:clamp(180px,15.5vw,245px) clamp(58px,5vw,82px) clamp(180px,15.5vw,245px);gap:clamp(20px,2.2vw,36px);align-items:start;justify-content:center;padding-top:4px}.city-card{width:clamp(180px,15.5vw,245px);height:auto;aspect-ratio:auto;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;display:flex;justify-content:flex-start!important}.city-card:hover,.city-card.selected-card,.city-card.correct-card,.city-card.incorrect-card{transform:none}.city-image-frame{order:1;width:clamp(175px,15vw,238px)!important;aspect-ratio:1;border-radius:50%!important;margin:0!important;border:7px solid #f7f0da;box-shadow:0 4px 10px rgba(44,40,30,.2);background:#ddd}.city-name{order:2;width:100%;margin:-5px 0 0!important;padding:8px;background:#f6eed6;color:var(--map-ink);border-radius:5px;box-shadow:0 3px 7px rgba(61,48,30,.18);font-size:clamp(.82rem,1.25vw,1.12rem)!important;line-height:1.04!important;z-index:2}.state-name{order:3;margin-top:2px;color:#4c6270;font-size:clamp(.54rem,.73vw,.7rem)!important}.population{order:4;margin-top:5px!important;color:var(--map-red)!important;font-size:clamp(.95rem,1.3vw,1.25rem)!important}#versus{align-self:start;margin-top:clamp(66px,7vw,105px);font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif;color:var(--map-ink);font-size:clamp(2.25rem,3.6vw,3.5rem)}#versus::before,#versus::after{content:"━";color:#d94a35;font-size:.42em;margin:0 .14em}#sound-toggle-button{background:rgba(247,240,218,.92)!important;color:var(--map-ink)!important;border:1px solid rgba(70,70,55,.2)!important}#app-footer{color:#274e69;font-size:.64rem;margin-top:2px}#score-popup,#menu-panel{background:#f6eed8!important;color:var(--map-ink)!important;border-color:rgba(24,84,112,.28)!important}#game-over-panel{background:var(--map-ink)!important;color:var(--map-cream)!important;border-color:rgba(246,239,217,.38)!important}#menu-panel .menu-item{color:var(--map-ink)}
@media(max-width:900px){body{overflow:auto;min-height:100svh}#app{width:min(520px,100vw);height:100svh;min-height:640px;margin:0 auto;padding:12px 14px 24px;border:0;border-radius:0;overflow:hidden;grid-template-rows:auto auto auto auto minmax(0,1fr) auto;background-position:center top}#app::before{background:rgba(248,240,211,.43)}#app::after{opacity:.42}.map-rail-left,.map-rail-right{display:none}#app-header{margin:0 0 9px}#app-header h1{font-size:clamp(2.75rem,13.8vw,4.35rem);max-width:94%;line-height:.8}#app-header h1::before{left:67%;top:-7%;font-size:.69em}#subtitle{margin-top:7px;padding:6px 13px}#subtitle::before{font-size:clamp(.7rem,3.2vw,.94rem)}#top-stats{position:static;width:100%;display:grid;grid-template-columns:repeat(4,1fr);padding:9px 4px;margin:0 0 8px;background:rgba(247,240,218,.91);border-radius:8px}.stat-card{text-align:center;padding:2px 4px;border-right:1px solid rgba(20,70,100,.22)}.stat-card:last-child{border-right:0}.stat-label{font-size:clamp(.48rem,2.05vw,.64rem);line-height:1}.stat-value{font-size:clamp(.98rem,4.2vw,1.3rem);margin-top:4px}#round-control{width:100%;margin:0 0 10px;grid-template-columns:1fr;grid-template-areas:"difficulty" "start" "menu";gap:8px}#difficulty-control,#start-game-button,#round-timer{width:min(440px,92%);justify-self:center}#menu-control{width:min(250px,55%);justify-self:center}#difficulty-select{height:44px}#start-game-button,#round-timer{height:58px!important}#start-game-button{font-size:clamp(1.2rem,5.4vw,1.6rem)!important}#menu-button{height:50px;font-size:clamp(.96rem,4vw,1.12rem)!important}#status-panel{display:none}#game-board{height:auto;min-height:0;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);gap:4px;align-items:start;padding-top:6px;padding-bottom:105px}.city-card{width:min(37vw,205px)}.city-image-frame{width:min(36vw,198px)!important;border-width:6px}.city-name{font-size:clamp(.7rem,3.2vw,1rem)!important;padding:7px 4px!important}.state-name{font-size:clamp(.46rem,2.15vw,.65rem)!important}.population{font-size:clamp(.78rem,3.2vw,1.05rem)!important}#versus{margin-top:min(13vw,72px);font-size:clamp(1.8rem,7.5vw,2.8rem)}#versus::before,#versus::after{font-size:.3em;margin:0 .08em}#sound-toggle-button{transform:scale(.84)}#app-footer{display:none}#game-board::after{content:"Big World.\A Same Question.";white-space:pre;position:absolute;top:calc(100% - 82px);left:50%;transform:translateX(-50%) rotate(-5deg);font-family:"Segoe Print","Comic Sans MS",cursive;font-size:clamp(1.3rem,6vw,2rem);line-height:1.02;color:var(--map-ink);text-decoration:underline;text-decoration-color:#d83e2e;text-decoration-thickness:3px;text-underline-offset:9px;text-align:center;z-index:-1}}
@media(max-width:430px){#app{padding-left:12px;padding-right:12px}#app-header h1{font-size:clamp(2.7rem,13.5vw,3.65rem)}#subtitle{margin-top:6px}#top-stats{padding-top:8px;padding-bottom:8px}.stat-label{font-size:clamp(.45rem,2vw,.58rem)}#difficulty-control,#start-game-button,#round-timer{width:94%}#menu-control{width:54%}#game-board{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);padding-top:4px;padding-bottom:98px}.city-card{width:38vw}.city-image-frame{width:37vw!important}#versus{margin-top:12vw;font-size:clamp(1.65rem,7vw,2.25rem)}#game-board::after{top:calc(100% - 74px);font-size:clamp(1.22rem,5.7vw,1.7rem)}}