/******************************************************************************
 * Which Is Bigger? — Version 0.2.9 Alpha
 ******************************************************************************/

:root{
    --color-background:#0f172a;
    --color-surface:#1e293b;
    --color-surface-light:#334155;
    --color-primary:#3b82f6;
    --color-primary-hover:#60a5fa;
    --color-success:#22c55e;
    --color-danger:#ef4444;
    --color-warning:#fbbf24;
    --color-text:#f8fafc;
    --color-text-muted:#94a3b8;
    --color-border:rgba(255,255,255,.08);
    --font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --space-xs:.5rem;
    --space-sm:.75rem;
    --space-md:1rem;
    --space-lg:1.5rem;
    --space-xl:2rem;
    --space-2xl:3rem;
    --radius-sm:8px;
    --radius-md:16px;
    --radius-lg:24px;
    --shadow-small:0 8px 20px rgba(0,0,0,.18);
    --shadow-large:0 18px 45px rgba(0,0,0,.30);
    --transition:.25s ease;
    --card-edge-gap:clamp(7px,1.3vh,14px);
    --card-size:min(42vw,86cqh,520px);
}

*,*::before,*::after{box-sizing:border-box;}
html{font-size:16px;height:100%;}
body{
    margin:0;
    height:100%;
    min-height:100svh;
    overflow:hidden;
    background:linear-gradient(180deg,#08101d,var(--color-background));
    color:var(--color-text);
    font-family:var(--font-family);
}

#app{
    width:min(1300px,96vw);
    height:100svh;
    margin:auto;
    padding:clamp(12px,2.2vh,24px) 0 clamp(10px,1.8vh,20px);
    display:grid;
    grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
    min-height:0;
}

#app-header{text-align:center;margin-bottom:clamp(10px,1.8vh,22px);}
h1{margin:0;font-size:clamp(2rem,4.2vw,3.5rem);font-weight:900;letter-spacing:-.03em;line-height:1;}
#subtitle{color:var(--color-text-muted);margin:clamp(5px,1vh,10px) 0 0;font-size:clamp(.85rem,1.8vw,1.05rem);}
#version-number{margin-left:.25em;color:var(--color-primary-hover);font-weight:700;white-space:nowrap;}

#top-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.4vw,18px);margin-bottom:clamp(8px,1.5vh,18px);}
.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:clamp(9px,1.5vh,16px) clamp(8px,1.3vw,16px);text-align:center;box-shadow:var(--shadow-small);min-width:0;}
.stat-label{display:block;color:var(--color-text-muted);font-size:clamp(.68rem,1.2vw,.85rem);line-height:1.1;}
.stat-value{display:block;margin-top:clamp(4px,.7vh,7px);font-size:clamp(1.2rem,2.4vw,1.8rem);font-weight:800;line-height:1;}

button{cursor:pointer;border:none;border-radius:var(--radius-md);background:var(--color-primary);color:white;padding:14px 22px;font-size:1rem;font-weight:700;transition:all var(--transition);}
button:hover{background:var(--color-primary-hover);transform:translateY(-2px);}
button:active{transform:translateY(1px);}

#round-control{height:clamp(58px,9vh,76px);margin:0 auto clamp(3px,.7vh,7px);display:flex;align-items:center;justify-content:center;text-align:center;}
#start-game-button{min-width:190px;height:clamp(52px,8vh,68px);padding:0 28px;font-size:clamp(1rem,2vw,1.15rem);}
#round-timer{height:clamp(52px,8vh,68px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
#start-game-button[hidden],#round-timer[hidden]{display:none;}
.timer-label{display:block;color:var(--color-text-muted);font-size:clamp(.66rem,1.2vw,.8rem);font-weight:700;text-transform:uppercase;letter-spacing:.08em;line-height:1;}
#timer-value{display:block;min-width:3.4ch;margin-top:3px;font-size:clamp(2rem,4.3vw,3.4rem);font-variant-numeric:tabular-nums;font-weight:900;line-height:.95;color:var(--color-warning);transition:color .15s ease,text-shadow .15s ease;}
#timer-value.timer-danger{color:var(--color-danger);text-shadow:0 0 16px rgba(239,68,68,.45);}

#status-panel{text-align:center;margin-bottom:var(--card-edge-gap);min-height:1.4em;}
#status-message{margin:0;font-size:clamp(.85rem,1.8vw,1.08rem);line-height:1.25;color:var(--color-text-muted);}

#game-board{
    min-height:0;
    height:100%;
    display:grid;
    grid-template-columns:var(--card-size) auto var(--card-size);
    gap:clamp(12px,1.6vw,22px);
    justify-content:center;
    align-items:start;
    margin:0;
    container-type:size;
}
.city-card{background:linear-gradient(180deg,var(--color-surface-light),var(--color-surface));border-radius:var(--radius-lg);border:2px solid transparent;min-width:0;min-height:0;width:var(--card-size);height:var(--card-size);aspect-ratio:1 / 1;justify-self:center;align-self:start;padding:clamp(12px,2.5vh,26px) clamp(10px,2vw,26px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;transition:all var(--transition);box-shadow:var(--shadow-large);overflow:hidden;container-type:size;}
.city-card:hover{transform:translateY(-5px);border-color:rgba(59,130,246,.4);}
.city-card.selected-card{transform:translateY(-3px) scale(1.01);}
.city-card.correct-card{border-color:var(--color-success);box-shadow:0 0 0 7px rgba(34,197,94,.45),var(--shadow-large);}
.city-card.incorrect-card{border-color:var(--color-danger);box-shadow:0 0 0 7px rgba(239,68,68,.45),var(--shadow-large);}
.city-card.wrong-shake{animation:wrongShake .48s cubic-bezier(.36,.07,.19,.97) both;}
.city-card.correct-card:hover,.city-card.incorrect-card:hover{transform:translateY(-3px) scale(1.01);}
.city-name{font-size:clamp(1rem,8cqi,2.7rem);font-weight:800;margin:clamp(5px,3cqi,14px) 0;line-height:1.05;overflow-wrap:anywhere;max-width:100%;}
.county-name{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:clamp(.56rem,3.2cqi,.95rem);line-height:1.15;max-width:100%;overflow-wrap:anywhere;}
.population{margin-top:clamp(7px,5cqi,22px);font-size:clamp(.78rem,4.2cqi,1.25rem);font-weight:700;color:var(--color-warning);max-width:100%;overflow-wrap:anywhere;}
.hidden{visibility:hidden;}
#versus{align-self:start;margin-top:calc(var(--card-size) / 2);transform:translateY(-50%);font-size:clamp(1rem,2.3vw,1.8rem);font-weight:900;color:var(--color-primary);}

#app-footer{margin:0;text-align:center;color:var(--color-text-muted);font-size:clamp(.65rem,1.2vw,.82rem);line-height:1.2;}

#confetti-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:6;}

#game-over-overlay{position:fixed;inset:0;justify-content:center;align-items:center;background:rgba(0,0,0,.78);padding:clamp(6px,2vmin,20px);z-index:10;overflow:hidden;}
#game-over-overlay:not([hidden]){display:flex;}
#game-over-panel{background:var(--color-surface);padding:clamp(10px,3.2vh,34px) clamp(12px,3vmin,34px);border-radius:clamp(12px,2.5vmin,var(--radius-lg));width:min(520px,94vw);max-height:none;overflow:hidden;text-align:center;box-shadow:var(--shadow-large);border:1px solid var(--color-border);animation:panelIn .25s ease;}
#game-over-title{margin:0;font-size:clamp(1.25rem,5vh,2.2rem);font-weight:900;line-height:1;}
#game-over-message{margin:clamp(4px,1.2vh,10px) 0 clamp(8px,2vh,20px);color:var(--color-text-muted);font-size:clamp(.72rem,2.2vh,1rem);line-height:1.2;}
.game-summary{display:grid;gap:clamp(4px,1vh,10px);margin-bottom:clamp(8px,2vh,20px);}
.summary-row{display:flex;justify-content:space-between;align-items:center;gap:clamp(8px,2vw,20px);padding:clamp(5px,1.4vh,10px) clamp(9px,2.4vw,16px);background:rgba(255,255,255,.04);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:clamp(.68rem,2vh,.95rem);line-height:1.1;}
.summary-row strong{color:var(--color-warning);font-size:clamp(.78rem,2.4vh,1.1rem);}
#restart-button{padding:clamp(7px,1.8vh,12px) clamp(16px,4vw,24px);font-size:clamp(.78rem,2.2vh,1rem);}
.new-record{color:var(--color-warning);text-shadow:0 0 18px rgba(251,191,36,.45);animation:recordGlow 1s ease-in-out infinite alternate;}

.stat-pop{animation:statPop .25s ease;}
@keyframes statPop{0%{transform:scale(1);}50%{transform:scale(1.14);}100%{transform:scale(1);}}
@keyframes panelIn{from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:none;}}
@keyframes recordGlow{from{text-shadow:0 0 8px rgba(251,191,36,.25);}to{text-shadow:0 0 24px rgba(251,191,36,.7);}}
@keyframes wrongShake{
    0%,100%{transform:translateY(-3px) translateX(0) scale(1.01);}
    15%{transform:translateY(-3px) translateX(-10px) rotate(-.5deg) scale(1.01);}
    30%{transform:translateY(-3px) translateX(9px) rotate(.45deg) scale(1.01);}
    45%{transform:translateY(-3px) translateX(-7px) rotate(-.35deg) scale(1.01);}
    60%{transform:translateY(-3px) translateX(5px) rotate(.25deg) scale(1.01);}
    75%{transform:translateY(-3px) translateX(-3px) rotate(-.15deg) scale(1.01);}
    90%{transform:translateY(-3px) translateX(2px) scale(1.01);}
}

#achievement-toast{display:none;}
#achievement-toast.show{display:block;transform:translateX(-50%) translateY(0);}

@media(max-width:700px){
    #app{width:96vw;padding-top:10px;padding-bottom:8px;--card-edge-gap:6px;--card-size:min(43vw,86cqh);}
    #app-header{margin-bottom:8px;}
    h1{font-size:clamp(1.7rem,8vw,2.35rem);}
    #subtitle{font-size:clamp(.7rem,3vw,.85rem);margin-top:4px;}
    #top-stats{gap:6px;margin-bottom:7px;}
    .stat-card{padding:7px 3px;border-radius:10px;}
    .stat-label{font-size:clamp(.56rem,2.6vw,.7rem);letter-spacing:-.01em;}
    .stat-value{font-size:clamp(1rem,4.8vw,1.35rem);margin-top:3px;}
    #round-control{height:55px;margin-bottom:2px;}
    #start-game-button,#round-timer{height:50px;}
    #start-game-button{min-width:160px;padding:0 20px;font-size:1rem;}
    .timer-label{font-size:.62rem;}
    #timer-value{font-size:2rem;}
    #status-panel{min-height:1.2em;}
    #status-message{font-size:clamp(.72rem,3.1vw,.9rem);}
    #game-board{gap:6px;}
    .city-card{border-radius:14px;padding:8px 5px;}
    #versus{font-size:clamp(.72rem,3.4vw,1rem);}
    #app-footer{font-size:clamp(.56rem,2.2vw,.68rem);}
    #game-over-panel{width:min(500px,96vw);padding-left:10px;padding-right:10px;}
}

@media(max-height:700px){
    #app{padding-top:8px;padding-bottom:7px;--card-edge-gap:5px;}
    #app-header{margin-bottom:7px;}
    h1{font-size:clamp(1.7rem,4vw,2.5rem);}
    #subtitle{margin-top:3px;font-size:.75rem;}
    #top-stats{margin-bottom:6px;}
    .stat-card{padding-top:7px;padding-bottom:7px;}
    #round-control{height:50px;margin-bottom:1px;}
    #start-game-button,#round-timer{height:46px;}
    #timer-value{font-size:2rem;}
    .city-card{padding-top:8px;padding-bottom:8px;}
}

@media(max-height:520px){
    #game-over-panel{padding-top:7px;padding-bottom:7px;}
    #game-over-title{font-size:clamp(1rem,4.5vh,1.45rem);}
    #game-over-message{margin:3px 0 6px;font-size:clamp(.62rem,2vh,.78rem);}
    .game-summary{gap:3px;margin-bottom:6px;}
    .summary-row{padding:4px 8px;font-size:clamp(.6rem,1.8vh,.74rem);}
    .summary-row strong{font-size:clamp(.68rem,2.1vh,.84rem);}
    #restart-button{padding:5px 14px;font-size:clamp(.68rem,2vh,.82rem);}
}

@media(max-width:700px) and (max-height:620px){
    #app{--card-edge-gap:4px;}
    #subtitle{display:none;}
    #app-header{margin-bottom:5px;}
    #top-stats{margin-bottom:5px;}
    .stat-card{padding-top:5px;padding-bottom:5px;}
    #round-control{height:44px;}
    #start-game-button,#round-timer{height:40px;}
    #timer-value{font-size:1.7rem;margin-top:1px;}
    .timer-label{font-size:.56rem;}
    #app-footer{font-size:.55rem;}
}

@media(prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important;}
}