:root{
  --bg:#060a0f;--panel:#0d1520;--panel2:#111c2e;
  --accent:#00d4ff;--accent2:#ff6b35;--gold:#ffd23f;
  --green:#39ff14;--red:#ff2d55;--text:#e8edf5;
  --muted:#4a5568;--border:rgba(0,212,255,0.18);
  --study:#9b59b6;--study2:#6c3483;--studyb:rgba(155,89,182,0.22);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:'Barlow Condensed',sans-serif;min-height:calc(100vh - 60px);overflow:hidden;}
body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.04) 2px,rgba(0,0,0,0.04) 4px);pointer-events:none;z-index:9999;}
.screen{display:none;min-height:calc(100vh - 60px);}
.screen.active{display:flex;flex-direction:column;}

/* INTRO */
#screen-intro{align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#0a1628 0%,#060a0f 70%);}
.intro-inner{text-align:center;max-width:800px;padding:2rem;}
.logo{font-family:'Bebas Neue',sans-serif;font-size:clamp(4rem,12vw,9rem);letter-spacing:.05em;line-height:1;background:linear-gradient(135deg,#00d4ff 0%,#fff 50%,#ff6b35 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 40px rgba(0,212,255,.45));animation:logoPulse 3s ease-in-out infinite;}
@keyframes logoPulse{0%,100%{filter:drop-shadow(0 0 40px rgba(0,212,255,.4))}50%{filter:drop-shadow(0 0 70px rgba(0,212,255,.75))}}
.logo-sub{font-size:1rem;letter-spacing:.4em;color:var(--muted);text-transform:uppercase;margin-top:-.3rem;margin-bottom:1.5rem;}

/* REGION CHIPS */
.config-full{margin-bottom:1.2rem;}
.config-full label{display:block;font-size:.65rem;letter-spacing:.3em;color:var(--accent);text-transform:uppercase;margin-bottom:.5rem;}
.region-chips{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;}
.rchip{font-family:'Bebas Neue',sans-serif;font-size:.8rem;letter-spacing:.08em;padding:.3rem .6rem;background:transparent;border:1px solid var(--muted);color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap;}
.rchip.active{border-color:var(--accent);color:var(--accent);background:rgba(0,212,255,.1);}
.rchip:hover{border-color:var(--accent);color:var(--accent);}
.rchip[data-r="all"]{border-color:var(--gold);color:var(--muted);}
.rchip[data-r="all"].active{border-color:var(--gold);color:var(--gold);background:rgba(255,210,63,.1);}
.region-chips.mini .rchip{font-size:.65rem;padding:.15rem .35rem;}

/* TOGGLE FILTERS BUTTON */
.btn-toggle-filters{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:.15em;padding:.5rem 2rem;background:transparent;border:1px solid var(--muted);color:var(--muted);cursor:pointer;transition:all .2s;margin-bottom:1rem;width:100%;}
.btn-toggle-filters:hover,.btn-toggle-filters.active{border-color:var(--accent);color:var(--accent);}
#filters-wrap{animation:fadeIn .2s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* SEGMENTED BUTTONS */
.seg-btns{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;}
.seg-btn{font-family:'Bebas Neue',sans-serif;font-size:.8rem;letter-spacing:.06em;padding:.35rem .7rem;background:transparent;border:1px solid var(--muted);color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap;flex:1;text-align:center;min-width:50px;}
.seg-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(0,212,255,.12);}
.seg-btn:hover{border-color:var(--accent);color:var(--accent);}

/* CHECKBOXES */
.size-checks,.region-checks{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.ck-label{display:flex;align-items:center;gap:4px;font-size:.85rem;color:var(--text);cursor:pointer;padding:.3rem .5rem;border:1px solid var(--border);transition:all .15s;}
.ck-label:hover{border-color:var(--accent);}
.ck-label input[type="checkbox"]{accent-color:var(--accent);width:14px;height:14px;}
.config-select{width:100%;padding:.7rem 1rem;background:var(--panel);border:1px solid var(--border);color:var(--text);font-family:'Barlow Condensed',sans-serif;font-size:1rem;outline:none;cursor:pointer;transition:border-color .2s;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300d4ff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;}
.config-select:focus{border-color:var(--accent);}

/* CONFIG GRID */
.config-3col{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem;}
.config-group label{display:block;font-size:.65rem;letter-spacing:.3em;color:var(--accent);text-transform:uppercase;margin-bottom:.4rem;}
.config-group select,.config-group .config-select{width:100%;padding:.7rem 1rem;background:var(--panel);border:1px solid var(--border);color:var(--text);font-family:'Barlow Condensed',sans-serif;font-size:1rem;outline:none;cursor:pointer;transition:border-color .2s;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300d4ff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;}
.config-group select:focus,.config-group .config-select:focus{border-color:var(--accent);}

.btn-actions{display:flex;gap:10px;}
.btn-start{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:.15em;padding:1rem 3rem;background:linear-gradient(135deg,var(--accent),#0099bb);border:none;color:#000;cursor:pointer;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);transition:transform .2s;flex:1;}
.btn-start:hover{transform:scale(1.05);}
.btn-start.study{background:linear-gradient(135deg,var(--study),var(--study2));color:#fff;}

/* HUD */
.hud-top{display:flex;align-items:stretch;gap:1px;background:var(--border);border-bottom:1px solid var(--border);flex-shrink:0;height:54px;}
.hud-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.3rem .8rem;background:var(--panel);flex:1;min-width:60px;}
.hud-label{font-size:.56rem;letter-spacing:.25em;color:var(--muted);text-transform:uppercase;}
.hud-val{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;line-height:1;}
#val-region{font-size:1.05rem;color:#88aacc;}
#val-diff{color:var(--accent2);}
#val-pct{color:var(--gold);}
#hud-countdown .hud-val{color:var(--accent);}
#hud-countdown.danger .hud-val{color:var(--red);animation:blink .5s infinite;}
#val-scope{color:var(--muted);font-size:1.1rem;}
.hud-top.study-hud{background:rgba(155,89,182,.2);border-bottom:1px solid rgba(155,89,182,.3);}
.hud-top.study-hud .hud-cell{background:rgba(13,10,24,.95);}
.hud-top.study-hud .hud-label{color:rgba(155,89,182,.7);}
@keyframes blink{50%{opacity:.3}}
.progress-wrap{height:3px;background:var(--muted);flex-shrink:0;}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .4s;}
.progress-bar.study{background:linear-gradient(90deg,var(--study),var(--accent2));}

/* GAME BODY */
#screen-game{height:calc(100vh - 60px);overflow:hidden;}
.game-body{flex:1;display:flex;overflow:hidden;position:relative;}
#map{flex:1;z-index:1;}
.leaflet-control-attribution,.leaflet-control-zoom{display:none!important;}

/* ANSWER PANEL */
.answer-panel{width:310px;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;z-index:10;}
.answer-panel.study{border-left-color:rgba(155,89,182,.4);}
.answer-header{padding:.9rem 1.1rem .5rem;border-bottom:1px solid var(--border);}
.answer-panel.study .answer-header{border-bottom-color:rgba(155,89,182,.3);}
.q-label{font-size:.62rem;letter-spacing:.3em;color:var(--accent);text-transform:uppercase;}
.answer-panel.study .q-label{color:var(--study);}
.q-text{font-family:'Bebas Neue',sans-serif;font-size:1.35rem;line-height:1.2;margin-top:.15rem;}

/* OPTIONS */
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:.9rem;flex:1;overflow-y:auto;}
.opt-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.7rem .3rem;background:var(--panel2);border:1px solid var(--border);cursor:pointer;transition:all .15s;position:relative;overflow:hidden;min-height:90px;}
.opt-btn:hover:not(:disabled){border-color:var(--accent);background:#0d2035;transform:translateY(-2px);}
.opt-btn:disabled{cursor:not-allowed;}
.opt-flag-img{width:38px;height:25px;object-fit:cover;border:1px solid rgba(255,255,255,.15);display:block;}
.opt-flag-fb{width:38px;height:25px;background:var(--muted);display:flex;align-items:center;justify-content:center;font-size:.55rem;color:var(--text);font-weight:700;letter-spacing:.05em;}
.opt-city{font-family:'Bebas Neue',sans-serif;font-size:.95rem;letter-spacing:.04em;text-align:center;line-height:1.1;color:var(--text);}
.opt-country{font-size:.65rem;color:var(--muted);letter-spacing:.08em;text-align:center;}
.opt-btn.correct{border-color:var(--green)!important;background:rgba(57,255,20,.12)!important;animation:flashG .4s;}
.opt-btn.wrong{border-color:var(--red)!important;background:rgba(255,45,85,.12)!important;animation:flashR .4s;}
@keyframes flashG{0%{background:rgba(57,255,20,.4)}100%{background:rgba(57,255,20,.12)}}
@keyframes flashR{0%{background:rgba(255,45,85,.4)}100%{background:rgba(255,45,85,.12)}}

/* STUDY TOOLBAR (inside sidebar) */
.study-toolbar{padding:.5rem .7rem;border-bottom:1px solid rgba(155,89,182,.3);display:flex;flex-direction:column;gap:.4rem;}
.st-row{display:flex;align-items:center;gap:.5rem;}
.st-row-regions{flex-wrap:wrap;}
.st-label{font-size:.55rem;letter-spacing:.2em;color:var(--study);text-transform:uppercase;min-width:38px;flex-shrink:0;}
.st-sort-btns{display:flex;gap:3px;}
.st-btn{font-family:'Bebas Neue',sans-serif;font-size:.7rem;letter-spacing:.06em;padding:.15rem .4rem;background:transparent;border:1px solid var(--muted);color:var(--muted);cursor:pointer;transition:all .15s;}
.st-btn.active{border-color:var(--study);color:var(--study);background:rgba(155,89,182,.15);}
.st-btn:hover{border-color:var(--study);color:var(--study);}
.st-select{padding:.2rem .5rem;background:var(--panel2);border:1px solid rgba(155,89,182,.3);color:var(--text);font-family:'Barlow Condensed',sans-serif;font-size:.8rem;outline:none;cursor:pointer;flex:1;max-width:140px;}

/* INDEX PANEL */
.index-panel{display:flex;flex-direction:column;flex:1;overflow:hidden;}
.index-list{flex:1;overflow-y:auto;padding:.4rem 0;}
.index-region{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--study);padding:.5rem .9rem .2rem;position:sticky;top:0;background:var(--panel);font-weight:600;}
.index-city{display:flex;align-items:center;gap:.5rem;padding:.4rem .9rem;cursor:pointer;font-size:1rem;transition:background .15s;border-left:2px solid transparent;}
.index-city:hover{background:rgba(155,89,182,.1);border-left-color:var(--study);}
.index-city.active{background:rgba(155,89,182,.15);border-left-color:var(--study);}
.index-city-flag{width:22px;height:15px;object-fit:cover;border:1px solid rgba(255,255,255,.1);flex-shrink:0;}
.index-city-name{flex:1;color:var(--text);font-weight:600;}
.index-city-country{font-size:.85rem;color:var(--muted);}
.index-city-pop{font-size:.8rem;color:var(--muted);margin-left:auto;white-space:nowrap;}

/* DOTS + NAV */
.round-dots{display:flex;gap:4px;justify-content:center;padding:.6rem .5rem;border-top:1px solid var(--border);flex-wrap:wrap;}
.dot{width:9px;height:9px;border:1px solid var(--muted);border-radius:50%;transition:all .3s;cursor:pointer;}
.dot:hover{border-color:var(--accent);transform:scale(1.3);}
.dot.done{background:var(--green);border-color:var(--green);}
.dot.wrong-dot{background:var(--red);border-color:var(--red);}
.dot.skipped-dot{background:var(--muted);border-color:var(--muted);opacity:.4;cursor:not-allowed;}
.dot.active{border-color:var(--accent);background:rgba(0,212,255,.3);}
.dot.study-seen{background:var(--study);border-color:var(--study);}
.dot.study-sabia{background:var(--green);border-color:var(--green);}
.dot.study-dudaba{background:var(--gold);border-color:var(--gold);}
.dot.study-nosabi{background:var(--red);border-color:var(--red);}

.nav-bar{display:flex;align-items:center;justify-content:space-between;padding:.5rem .6rem;border-top:1px solid var(--border);gap:5px;}
.nav-btn{font-family:'Bebas Neue',sans-serif;font-size:.8rem;letter-spacing:.08em;padding:.3rem .5rem;background:transparent;border:1px solid var(--border);color:var(--muted);cursor:pointer;flex:1;transition:all .15s;white-space:nowrap;text-align:center;}
.nav-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.nav-btn.skip{border-color:rgba(255,107,53,.4);color:var(--accent2);}
.nav-btn.skip:hover:not(:disabled){border-color:var(--accent2);background:rgba(255,107,53,.08);}
.nav-btn.study-nav{border-color:rgba(155,89,182,.5);color:var(--study);}
.nav-btn.study-nav:hover{border-color:var(--study);background:rgba(155,89,182,.1);}
.nav-btn.game-nav{border-color:rgba(0,212,255,.5);color:var(--accent);}
.nav-btn.game-nav:hover{border-color:var(--accent);background:rgba(0,212,255,.1);}
.nav-btn:disabled{opacity:.3;cursor:not-allowed;}

/* PAUSE OVERLAY */
.pause-overlay{position:absolute;inset:0;background:rgba(6,10,15,.95);display:none;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(15px);}
.pause-overlay.show{display:flex;}
.pause-box{text-align:center;display:flex;flex-direction:column;gap:1rem;align-items:center;}
.pause-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.5rem,6vw,4rem);letter-spacing:.15em;color:var(--accent);filter:drop-shadow(0 0 20px rgba(0,212,255,.4));}
.pause-btn{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.12em;padding:.8rem 2.5rem;border:none;cursor:pointer;transition:transform .2s;clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);min-width:240px;}
.pause-btn:hover{transform:scale(1.05);}
.pause-btn:not(.secondary):not(.study-btn){background:linear-gradient(135deg,var(--accent),#0099bb);color:#000;}
.pause-btn.secondary{background:var(--panel2);color:var(--muted);}
.pause-btn.secondary:hover{color:var(--accent);}
.pause-btn.study-btn{background:linear-gradient(135deg,var(--study),var(--study2));color:#fff;}

/* RESULT OVERLAY */
.result-overlay{position:absolute;top:0;left:0;right:310px;bottom:0;background:rgba(6,10,15,.82);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(5px);}
.result-overlay.inverse-mode{right:0;z-index:200;}
.result-overlay.show{opacity:1;pointer-events:all;}
.result-box{text-align:center;padding:2rem;}
.result-icon{font-size:3.5rem;font-family:'Bebas Neue',sans-serif;line-height:1;margin-bottom:.8rem;animation:popIn .4s cubic-bezier(.175,.885,.32,1.275);}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
.result-label{font-family:'Bebas Neue',sans-serif;font-size:2.8rem;letter-spacing:.1em;}
.result-pts{font-family:'Bebas Neue',sans-serif;font-size:4rem;line-height:1;color:var(--gold);animation:slideUp .5s ease .1s both;}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.result-sub{font-size:.95rem;color:var(--muted);margin-top:.4rem;}
.auto-bar{height:3px;background:var(--muted);margin-top:.8rem;overflow:hidden;}
.auto-bar-fill{height:100%;background:var(--accent);width:100%;transition:width 1s linear;}

/* STUDY BOTTOM BAR */
.study-bottom{display:none;align-items:center;gap:1.2rem;padding:.8rem 1.2rem;background:rgba(13,10,24,.95);border-top:1px solid rgba(155,89,182,.3);position:absolute;bottom:0;left:0;right:310px;z-index:50;backdrop-filter:blur(8px);}
.study-bottom.visible{display:flex;}
.study-bottom-left{display:flex;align-items:center;gap:1rem;flex:1;min-width:0;}
.study-bottom-flag{width:56px;height:38px;object-fit:cover;border:1px solid rgba(255,255,255,.15);flex-shrink:0;}
.study-bottom-info{min-width:0;}
.study-bottom-name{font-family:'Bebas Neue',sans-serif;font-size:2rem;line-height:1;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.study-bottom-country{font-size:1.1rem;color:var(--study);letter-spacing:.08em;font-weight:600;}
.study-bottom-meta{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.25rem;}
.city-region-tag{display:inline-block;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;padding:.2rem .6rem;background:rgba(155,89,182,.2);border:1px solid rgba(155,89,182,.4);color:var(--study);}
.city-diff-tag{display:inline-block;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;padding:.2rem .6rem;background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.25);color:var(--accent);}
.study-coords{font-size:1rem;color:var(--muted);letter-spacing:.05em;font-weight:600;}
.study-pop{font-size:1rem;color:var(--text);font-weight:600;}
.grade-label{font-size:.7rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-bottom:4px;text-align:right;}
.grade-btns{display:flex;gap:6px;}
.grade-btn{flex:1;font-family:'Bebas Neue',sans-serif;font-size:.9rem;letter-spacing:.1em;padding:.5rem .5rem;border:1px solid;background:transparent;cursor:pointer;transition:all .15s;white-space:nowrap;}
.grade-btn.sabia{border-color:var(--green);color:var(--green);}
.grade-btn.sabia:hover,.grade-btn.sabia.active{background:rgba(57,255,20,.15);}
.grade-btn.dudaba{border-color:var(--gold);color:var(--gold);}
.grade-btn.dudaba:hover,.grade-btn.dudaba.active{background:rgba(255,210,63,.15);}
.grade-btn.nosabi{border-color:var(--red);color:var(--red);}
.grade-btn.nosabi:hover,.grade-btn.nosabi.active{background:rgba(255,45,85,.15);}
.study-bottom-right{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;flex-shrink:0;}

/* END SCREEN */
#screen-end{align-items:center;justify-content:flex-start;background:radial-gradient(ellipse at 50% 50%,#0a1628 0%,#060a0f 70%);overflow-y:auto;padding:1rem 0;}
.end-inner{text-align:center;max-width:700px;width:100%;padding:2rem 1.5rem;margin:auto;}
.end-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,5vw,3.5rem);background:linear-gradient(135deg,var(--gold),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.3rem;}
.end-title.study{background:linear-gradient(135deg,var(--study),var(--accent))!important;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.end-summary{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;color:var(--text);margin-bottom:1rem;letter-spacing:.05em;}
.end-summary span{color:var(--gold);}

.end-city-list{text-align:left;max-height:50vh;overflow-y:auto;margin-bottom:1rem;border:1px solid var(--border);background:var(--panel);}
.ecl-row{display:flex;align-items:center;gap:.6rem;padding:.45rem .8rem;border-bottom:1px solid rgba(255,255,255,.04);font-size:.85rem;}
.ecl-row.correct{border-left:3px solid var(--green);}
.ecl-row.wrong{border-left:3px solid var(--red);}
.ecl-row.skipped{border-left:3px solid var(--accent2);}
.ecl-flag{width:24px;height:16px;object-fit:cover;border:1px solid rgba(255,255,255,.1);flex-shrink:0;}
.ecl-name{font-family:'Bebas Neue',sans-serif;font-size:1rem;flex:1;color:var(--text);}
.ecl-country{font-size:.7rem;color:var(--muted);min-width:60px;}
.ecl-answer{font-size:.7rem;color:var(--red);min-width:80px;}
.ecl-num{font-family:'Bebas Neue',sans-serif;font-size:.9rem;min-width:22px;text-align:center;color:var(--muted);}
.ecl-time{font-size:.7rem;color:var(--muted);min-width:30px;text-align:right;}
.ecl-score{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;min-width:45px;text-align:right;}
.ecl-row.correct .ecl-score{color:var(--green);}
.ecl-row.wrong .ecl-score{color:var(--red);}
.ecl-row.skipped .ecl-score{color:var(--accent2);}
.ecl-row.skipped .ecl-name{opacity:.6;}

.study-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1rem 0;}
.sb2{padding:.7rem .5rem;border:1px solid;text-align:center;}
.sb2.sabia{border-color:var(--green);background:rgba(57,255,20,.06);}
.sb2.dudaba{border-color:var(--gold);background:rgba(255,210,63,.06);}
.sb2.nosabi{border-color:var(--red);background:rgba(255,45,85,.06);}
.sb2-v{font-family:'Bebas Neue',sans-serif;font-size:2.5rem;}
.sb2.sabia .sb2-v{color:var(--green);}
.sb2.dudaba .sb2-v{color:var(--gold);}
.sb2.nosabi .sb2-v{color:var(--red);}
.sb2-l{font-size:.65rem;letter-spacing:.15em;color:var(--muted);text-transform:uppercase;}

.end-actions{display:flex;gap:10px;justify-content:center;margin-top:1rem;flex-wrap:wrap;}
.btn-play-again{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.15em;padding:.8rem 2.5rem;background:linear-gradient(135deg,var(--accent),#0099bb);border:none;color:#000;cursor:pointer;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);transition:transform .2s;}
.btn-play-again:hover{transform:scale(1.05);}
.btn-play-again.study{background:linear-gradient(135deg,var(--study),var(--study2));color:#fff;}
.btn-play-again.game{background:linear-gradient(135deg,var(--accent),#0099bb);color:#000;}
.btn-play-again.secondary{background:var(--panel2);color:var(--muted);}
.btn-play-again.secondary:hover{color:var(--accent);}

/* ══════════════ BLOCK 1: MOBILE + VISUAL IMPROVEMENTS ══════════════ */

/* Prevent pull-to-refresh on mobile (#35) */
html,body{overscroll-behavior:none;}

/* Screen transitions (#11) */
.screen.active{animation:screenIn .3s ease-out;}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Chip micro-feedback (#12) */
.rchip:active{transform:scale(0.88);}

/* Keyboard shortcut hints on option buttons (#9) */
.opt-key-hint{position:absolute;top:3px;left:5px;font-family:'Bebas Neue',sans-serif;font-size:.6rem;color:var(--muted);opacity:.45;pointer-events:none;line-height:1;}
@media(hover:none){.opt-key-hint{display:none;}}

/* Haptic flash classes (visual reinforcement) */
.opt-btn.correct{transition:border-color .15s,background .15s;}
.opt-btn.wrong{transition:border-color .15s,background .15s;}

/* Orientation hint banner (#31) */
.orientation-hint{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(0,212,255,.08);border-top:1px solid rgba(0,212,255,.3);padding:.5rem 1rem;z-index:9998;text-align:center;font-size:.75rem;color:var(--accent);cursor:pointer;backdrop-filter:blur(5px);}
.orientation-hint .dismiss{margin-left:.5rem;opacity:.5;font-size:.65rem;}
@media(max-width:768px) and (orientation:portrait){.orientation-hint.show{display:block;}}

/* ══ MOBILE RESPONSIVE (#1, #15, #32) ══ */
@media(max-width:768px){
  /* Intro */
  .intro-inner{padding:1rem .8rem;}
  .logo{font-size:clamp(2.8rem,10vw,5rem);}
  .logo-sub{font-size:.75rem;letter-spacing:.2em;margin-bottom:1rem;}
  .config-full{margin-bottom:.8rem;}
  .config-3col{grid-template-columns:1fr;gap:.5rem;margin-bottom:1rem;}
  .config-group select{padding:.5rem .8rem;font-size:.9rem;}
  .btn-actions{flex-direction:column;}
  .btn-start{padding:.7rem 2rem;font-size:1.4rem;}
  .region-chips{gap:3px;}
  .rchip{font-size:.7rem;padding:.2rem .45rem;}

  /* HUD: keep only Ciudad, Aciertos, Tiempo (#15) */
  .hud-top{height:38px;}
  .hud-cell:nth-child(1),.hud-cell:nth-child(2),.hud-cell:nth-child(6){display:none;}
  .hud-val{font-size:1rem;}
  .hud-label{font-size:.5rem;}

  /* Game body: vertical stack */
  .game-body{flex-direction:column;}
  #map{flex:1;min-height:30vh;order:1;}
  .answer-panel{width:100%;border-left:none;border-top:1px solid var(--border);max-height:50vh;overflow:hidden;flex-shrink:0;order:3;}

  /* Result overlay covers full width */
  .result-overlay{right:0;bottom:0;}
  .result-box{padding:1rem;}
  .result-icon{font-size:2.5rem;margin-bottom:.4rem;}
  .result-label{font-size:2rem;}
  .result-pts{font-size:2.8rem;}

  /* Study bottom: flow layout on mobile */
  .study-bottom{position:relative;right:auto;left:auto;bottom:auto;order:2;flex-direction:column;gap:.4rem;padding:.5rem .8rem;}
  .study-bottom.visible{display:flex;}
  .study-bottom-flag{width:36px;height:24px;}
  .study-bottom-name{font-size:1.3rem;}
  .study-bottom-country{font-size:.9rem;}
  .study-bottom-meta{gap:.4rem;}
  .study-bottom-meta span{font-size:.75rem;}
  .study-bottom-right{width:100%;align-items:stretch;}
  .grade-btns{width:100%;}
  .grade-btn{padding:.4rem .3rem;font-size:.8rem;}
  .grade-label{text-align:center;}

  /* Answer panel content */
  .answer-header{padding:.4rem .7rem .2rem;}
  .q-label{font-size:.55rem;}
  .q-text{font-size:1rem;}
  .options-grid{padding:.4rem;gap:4px;}
  .opt-btn{min-height:65px;padding:.4rem .2rem;}
  .opt-flag-img{width:30px;height:20px;}
  .opt-city{font-size:.85rem;}
  .opt-country{font-size:.6rem;}

  /* Dots compact */
  .round-dots{padding:.25rem .4rem;gap:2px;}
  .dot{width:7px;height:7px;}

  /* Nav bar */
  .nav-bar{padding:.3rem .4rem;gap:3px;}
  .nav-btn{padding:.35rem .3rem;font-size:.75rem;}

  /* Study toolbar compact */
  .study-toolbar{padding:.3rem .5rem;gap:.3rem;}
  .st-label{font-size:.5rem;min-width:28px;}
  .st-btn{font-size:.6rem;padding:.1rem .3rem;}
  .st-select{font-size:.75rem;padding:.15rem .4rem;}
  .st-row-regions .region-chips{gap:2px;}

  /* End screen */
  .end-inner{padding:1rem .8rem;}
  .end-summary{font-size:1.2rem;}
  .end-actions{flex-direction:column;align-items:stretch;}
  .btn-play-again{padding:.6rem 1.5rem;font-size:1.2rem;}
  .end-city-list{max-height:40vh;font-size:.8rem;}
  .ecl-row{padding:.35rem .5rem;gap:.4rem;font-size:.8rem;}
  .ecl-flag{width:20px;height:13px;}
  .ecl-answer{min-width:60px;}
  .ecl-country{min-width:40px;}
  .study-breakdown{gap:.4rem;margin:.6rem 0;}
  .sb2{padding:.5rem .3rem;}
  .sb2-v{font-size:2rem;}

  /* Countdown ring compact on mobile */
  .countdown-wrap{width:28px;height:28px;}
  .countdown-svg{width:28px;height:28px;}
  .countdown-wrap .hud-val{font-size:.85rem!important;}

  /* Result city info compact */
  .result-city-info{gap:.3rem!important;margin-top:.3rem!important;}
  .result-info-flag{width:24px!important;height:16px!important;}
  .result-info-name{font-size:1rem!important;}
}

/* ══════════════ BLOCK 2: GAMEPLAY + VISUAL FEATURES ══════════════ */

/* Countdown circular ring (#13) */
.countdown-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;}
.countdown-svg{position:absolute;inset:0;width:100%;height:100%;}
.countdown-wrap .hud-val{position:relative;z-index:1;font-size:1.1rem!important;}
#countdown-arc{transition:stroke .3s,stroke-dashoffset .15s linear;}

/* Region border on map (#14) */
#map{outline:3px solid transparent;outline-offset:-3px;transition:outline-color .5s;}

/* Tile loading spinner (#10) */
.tile-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;opacity:0;transition:opacity .3s;pointer-events:none;}
.tile-spinner.show{opacity:1;}
.tile-spinner-ring{width:32px;height:32px;border:3px solid rgba(0,212,255,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* Result post-round city info (#7) */
.result-city-info{display:none;align-items:center;gap:.5rem;justify-content:center;margin-top:.6rem;animation:slideUp .4s ease .15s both;}
.result-city-info.show{display:flex;}
.result-info-flag{width:32px;height:21px;object-fit:cover;border:1px solid rgba(255,255,255,.2);}
.result-info-name{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;color:var(--text);}
.result-info-country{font-size:.85rem;color:var(--muted);}

/* Dot tooltip (#17) */
.dot-tooltip{position:fixed;transform:translate(-50%,-100%);background:var(--panel2);border:1px solid var(--border);padding:.2rem .5rem;font-size:.7rem;color:var(--text);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:500;font-family:'Barlow Condensed',sans-serif;}
.dot-tooltip.show{opacity:1;}

/* Share button (#36) */
.btn-play-again.share{background:linear-gradient(135deg,var(--gold),var(--accent2));color:#000;}
.share-toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:var(--green);color:#000;padding:.5rem 1.5rem;font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:.1em;z-index:10000;animation:toastIn .3s ease,toastOut .3s ease 1.5s forwards;}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes toastOut{to{opacity:0;transform:translateX(-50%) translateY(-10px)}}

/* End screen city rows clickable (#3) */
.ecl-row{cursor:pointer;transition:background .15s;}
.ecl-row:hover{background:rgba(255,255,255,.04);}

/* ══════════════ BLOCK 3 ══════════════ */

/* Parallax intro (#16) */
.intro-inner{transition:transform .15s ease-out;}

/* Daily challenge button (#20) */
.daily-wrap{margin-bottom:1.2rem;text-align:center;}
.btn-daily{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.12em;padding:.7rem 2rem;background:linear-gradient(135deg,var(--gold),var(--accent2));border:none;color:#000;cursor:pointer;clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);transition:transform .2s;width:100%;max-width:350px;}
.btn-daily:hover{transform:scale(1.05);}
.btn-daily.done{background:linear-gradient(135deg,var(--muted),#2c3e50);color:var(--text);cursor:default;}
.btn-daily.done:hover{transform:none;}
.daily-sub{font-size:.7rem;color:var(--muted);letter-spacing:.15em;margin-top:.3rem;}

/* Study hide-name mode (#8) */
.study-bottom.hide-name .study-bottom-name,
.study-bottom.hide-name .study-bottom-country{filter:blur(10px);user-select:none;cursor:pointer;transition:filter .3s;}
.study-bottom.hide-name.revealed .study-bottom-name,
.study-bottom.hide-name.revealed .study-bottom-country{filter:none;cursor:default;}
.study-bottom.hide-name .study-bottom-meta{filter:blur(6px);transition:filter .3s;}
.study-bottom.hide-name.revealed .study-bottom-meta{filter:none;}
.reveal-hint{font-size:.65rem;letter-spacing:.15em;color:var(--study);text-transform:uppercase;text-align:center;margin-top:.2rem;animation:blink 1.5s infinite;}
.study-bottom.hide-name.revealed .reveal-hint{display:none;}

/* Adaptive difficulty indicator (#18) */
.streak-badge{position:absolute;top:2px;right:5px;font-size:.5rem;color:var(--gold);font-family:'Bebas Neue',sans-serif;pointer-events:none;opacity:.7;}

/* ══════════════ BLOCK 4 ══════════════ */

/* Radar chart (#38) */
.radar-wrap{margin:1rem auto;max-width:320px;}
.radar-wrap svg{width:100%;height:auto;}
.radar-label{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;fill:var(--muted);text-anchor:middle;dominant-baseline:middle;}
.radar-polygon{fill:rgba(0,212,255,.15);stroke:var(--accent);stroke-width:1.5;}
.radar-grid{fill:none;stroke:rgba(255,255,255,.06);stroke-width:.5;}

/* Badges (#39) */
.badges-wrap{margin:1rem 0;}
.badges-title{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;color:var(--gold);text-align:center;letter-spacing:.1em;margin-bottom:.5rem;}
.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.5rem;}
.badge-card{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.6rem .4rem;border:1px solid var(--border);background:var(--panel);text-align:center;transition:border-color .2s;}
.badge-card.unlocked{border-color:var(--gold);background:rgba(255,210,63,.04);}
.badge-card.locked{opacity:.35;}
.badge-icon{font-size:1.6rem;line-height:1;}
.badge-name{font-family:'Bebas Neue',sans-serif;font-size:.85rem;letter-spacing:.06em;color:var(--text);}
.badge-desc{font-size:.6rem;color:var(--muted);line-height:1.2;}

/* Swipe hint (#2) */
.swipe-hint{position:absolute;top:50%;transform:translateY(-50%);font-size:2rem;color:rgba(255,255,255,.15);pointer-events:none;z-index:60;animation:swipeFade .3s ease;font-family:'Bebas Neue',sans-serif;}
.swipe-hint.left{left:1rem;}
.swipe-hint.right{right:1rem;}
@keyframes swipeFade{from{opacity:0}to{opacity:1}}

/* Emoji flag fallback (#30) */
.opt-flag-emoji,.ecl-flag-emoji,.index-flag-emoji,.study-flag-emoji,.result-flag-emoji{font-size:1.4rem;line-height:1;display:flex;align-items:center;justify-content:center;}

@media(max-width:768px){
  .radar-wrap{max-width:240px;}
  .badges-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.3rem;}
  .badge-card{padding:.4rem .3rem;}
  .badge-icon{font-size:1.3rem;}
  .badge-name{font-size:.75rem;}
}

/* ══════════════ BLOCK 5: FINAL FEATURES ══════════════ */

/* Loading overlay (#26) */
.loading-overlay{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:20000;transition:opacity .4s;}
.loading-overlay.done{opacity:0;pointer-events:none;}
.loading-inner{text-align:center;}
.loading-text{font-size:.8rem;color:var(--muted);letter-spacing:.2em;margin-bottom:.6rem;}
.loading-bar{width:200px;height:3px;background:var(--muted);margin:0 auto;overflow:hidden;}
.loading-bar-fill{height:100%;width:0%;background:var(--accent);transition:width .3s;}

/* Category filter (#19) - uses same select style */

/* Inverse mode (#21) — sidebar fallback (hidden, use fullscreen) */
.inverse-grid{display:none!important;}

/* Inverse mode fullscreen grid */
.inverse-fullscreen{position:absolute;inset:0;z-index:50;display:none;flex-direction:column;background:var(--bg);}
.inverse-fullscreen.show{display:flex;}
.inverse-header{padding:.6rem 1rem;text-align:center;border-bottom:1px solid var(--border);background:var(--panel);flex-shrink:0;}
.inverse-city-name{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,4vw,3.5rem);color:var(--accent);line-height:1;}
.inverse-city-country{font-size:1rem;color:var(--muted);letter-spacing:.15em;}
.inverse-thumbs{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;flex:1;padding:6px;overflow:hidden;}
.inv-btn{position:relative;cursor:pointer;border:3px solid var(--border);background:var(--panel2);transition:all .15s;overflow:hidden;display:flex;align-items:stretch;}
.inv-btn:hover:not(:disabled){border-color:var(--accent);box-shadow:0 0 15px rgba(0,212,255,.3);}
.inv-btn:disabled{cursor:not-allowed;opacity:.7;}
.inv-thumb{width:100%;height:100%;object-fit:cover;display:block;background:#0a1220;position:absolute;inset:0;}
/* City label overlay on inverse buttons */
.inv-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.85));padding:.5rem .6rem .4rem;display:flex;flex-direction:column;align-items:center;z-index:3;pointer-events:none;}
.inv-label-name{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9);letter-spacing:.05em;}
.inv-label-country{font-size:.75rem;color:rgba(255,255,255,.7);text-shadow:0 1px 3px rgba(0,0,0,.8);}
.inv-btn .opt-key-hint{position:absolute;top:6px;left:8px;font-family:'Bebas Neue',sans-serif;font-size:1rem;color:rgba(255,255,255,.7);z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.8);}
.inv-btn.correct{border-color:var(--green)!important;box-shadow:0 0 20px rgba(57,255,20,.4)!important;animation:flashG .4s;}
.inv-btn.wrong{border-color:var(--red)!important;box-shadow:0 0 20px rgba(255,45,85,.4)!important;animation:flashR .4s;}
.inverse-nav{display:flex;gap:8px;padding:.5rem 1rem;background:var(--panel);border-top:1px solid var(--border);justify-content:center;flex-shrink:0;}
.inverse-nav .nav-btn{flex:0 1 120px;}

/* Versus mode (#37) */
.btn-start.versus{background:linear-gradient(135deg,var(--accent2),#cc4400);color:#fff;}
.versus-setup{margin-bottom:1rem;}
.vs-row{display:flex;align-items:center;gap:.8rem;justify-content:center;}
.vs-input{width:120px;padding:.5rem .8rem;background:var(--panel);border:1px solid var(--border);color:var(--text);font-family:'Barlow Condensed',sans-serif;font-size:1rem;text-align:center;outline:none;transition:border-color .2s;}
.vs-input:focus{border-color:var(--accent);}
.vs-label{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:var(--accent2);}
.versus-overlay{position:absolute;inset:0;background:rgba(6,10,15,.95);display:none;align-items:center;justify-content:center;z-index:250;backdrop-filter:blur(15px);}
.versus-overlay.show{display:flex;}
.versus-box{text-align:center;display:flex;flex-direction:column;gap:.8rem;align-items:center;}
.versus-turn-title{font-size:1rem;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;}
.versus-player-name{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.5rem,6vw,4rem);filter:drop-shadow(0 0 20px rgba(0,212,255,.4));}
.versus-player-name.p1{color:var(--accent);}
.versus-player-name.p2{color:var(--accent2);}
.versus-scores{display:flex;gap:2rem;margin-bottom:.5rem;}
.vs-score-box{text-align:center;padding:.5rem 1.2rem;border:2px solid transparent;transition:all .2s;}
.vs-score-name{font-size:.75rem;letter-spacing:.15em;color:var(--muted);text-transform:uppercase;}
.vs-score-val{font-family:'Bebas Neue',sans-serif;font-size:2.8rem;color:var(--text);line-height:1;}
.vs-score-sub{font-size:.65rem;color:var(--muted);margin-top:.2rem;}
.vs-score-box.p1{border-color:rgba(0,212,255,.3);}
.vs-score-box.p1 .vs-score-name{color:var(--accent);}
.vs-score-box.p1.active{border-color:var(--accent);background:rgba(0,212,255,.08);}
.vs-score-box.p1.active .vs-score-val{color:var(--accent);}
.vs-score-box.p2{border-color:rgba(255,107,53,.3);}
.vs-score-box.p2 .vs-score-name{color:var(--accent2);}
.vs-score-box.p2.active{border-color:var(--accent2);background:rgba(255,107,53,.08);}
.vs-score-box.p2.active .vs-score-val{color:var(--accent2);}

/* Versus persistent HUD scoreboard */
.versus-hud{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.4rem .8rem;background:var(--panel);border-bottom:1px solid var(--border);}
.versus-hud .vh-player{display:flex;align-items:center;gap:.5rem;font-family:'Bebas Neue',sans-serif;}
.versus-hud .vh-name{font-size:.9rem;letter-spacing:.08em;}
.versus-hud .vh-correct{font-size:1.6rem;line-height:1;}
.versus-hud .vh-score{font-size:.75rem;color:var(--muted);}
.versus-hud .vh-vs{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;color:var(--muted);letter-spacing:.1em;}
.versus-hud .vh-p1 .vh-name{color:var(--accent);}
.versus-hud .vh-p1 .vh-correct{color:var(--accent);}
.versus-hud .vh-p2 .vh-name{color:var(--accent2);}
.versus-hud .vh-p2 .vh-correct{color:var(--accent2);}
.versus-hud .vh-player.active{text-shadow:0 0 10px currentColor;}

/* Versus colored HUD header */
.hud-top.versus-p1{border-bottom:2px solid var(--accent);background:rgba(0,212,255,.08);}
.hud-top.versus-p2{border-bottom:2px solid var(--accent2);background:rgba(255,107,53,.08);}

/* Versus end results — duel layout */
.versus-end-scores{display:flex;gap:1.5rem;justify-content:center;margin-bottom:1rem;}
.vs-end-card{flex:1;max-width:220px;padding:1.2rem;border:2px solid var(--border);text-align:center;}
.vs-end-card.winner{border-color:var(--gold);background:rgba(255,210,63,.06);}
.vs-end-card.p1{border-color:rgba(0,212,255,.4);}
.vs-end-card.p2{border-color:rgba(255,107,53,.4);}
.vs-end-name{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.08em;color:var(--text);}
.vs-end-correct{font-family:'Bebas Neue',sans-serif;font-size:3rem;line-height:1;}
.vs-end-card.p1 .vs-end-correct{color:var(--accent);}
.vs-end-card.p2 .vs-end-correct{color:var(--accent2);}
.vs-end-detail{font-size:.75rem;color:var(--muted);margin-top:.2rem;}
.vs-end-tag{font-family:'Bebas Neue',sans-serif;font-size:.9rem;color:var(--green);margin-top:.3rem;}

/* Versus duel city list — side by side */
.vs-duel-list{text-align:left;max-height:50vh;overflow-y:auto;margin-bottom:1rem;border:1px solid var(--border);background:var(--panel);}
.vs-duel-row{display:grid;grid-template-columns:1fr auto 1fr;gap:0;border-bottom:1px solid rgba(255,255,255,.04);align-items:center;}
.vs-duel-cell{display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem;font-size:.85rem;}
.vs-duel-cell.p1{justify-content:flex-end;text-align:right;}
.vs-duel-cell.p2{justify-content:flex-start;}
.vs-duel-cell .duel-icon{font-size:.8rem;}
.vs-duel-cell .duel-icon.ok{color:var(--green);}
.vs-duel-cell .duel-icon.fail{color:var(--red);}
.vs-duel-cell .duel-icon.skip{color:var(--muted);}
.vs-duel-center{display:flex;flex-direction:column;align-items:center;padding:.3rem .5rem;min-width:100px;}
.vs-duel-center .duel-city{font-family:'Bebas Neue',sans-serif;font-size:.9rem;color:var(--text);white-space:nowrap;}
.vs-duel-center .duel-country{font-size:.6rem;color:var(--muted);}
.vs-duel-center img{width:20px;height:13px;object-fit:cover;border:1px solid rgba(255,255,255,.1);}

/* Virtual scroll (#29) */
.index-list{position:relative;}
.index-list.virtual{overflow-y:auto;}
.index-list .vscroll-spacer{display:block;pointer-events:none;}

@media(max-width:768px){
  .versus-setup .vs-row{flex-direction:column;gap:.4rem;}
  .vs-input{width:100%;}
  .vs-label{font-size:1.2rem;}
  .inverse-thumbs{gap:3px;padding:3px;}
  .inv-btn{border-width:2px;}
  .inverse-header{padding:.4rem .6rem;}
  .inverse-city-name{font-size:1.5rem;}
  .inverse-nav .nav-btn{font-size:.7rem;padding:.3rem .4rem;}
  .versus-end-scores{flex-direction:row;}
  .vs-end-card{padding:.8rem .5rem;}
  .vs-end-correct{font-size:2.2rem;}
  .versus-hud{padding:.3rem .5rem;gap:.6rem;}
  .versus-hud .vh-correct{font-size:1.3rem;}
  .versus-hud .vh-name{font-size:.75rem;}
  .vs-duel-cell{padding:.3rem .4rem;font-size:.75rem;}
  .vs-duel-center .duel-city{font-size:.8rem;}
  .vs-duel-center{min-width:70px;padding:.2rem .3rem;}
}

/* ══════════════ BLOCK 6: NEW FEATURES ══════════════ */

/* Write mode */
.write-mode-wrap{display:flex;flex-direction:column;padding:.9rem;flex:1;gap:.5rem;}
.write-input{width:100%;padding:.8rem 1rem;background:var(--panel2);border:1px solid var(--border);color:var(--text);font-family:'Barlow Condensed',sans-serif;font-size:1.2rem;outline:none;transition:border-color .2s;}
.write-input:focus{border-color:var(--accent);}
.write-input:disabled{opacity:.5;}
.write-suggestions{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow-y:auto;}
.write-sug-item{display:flex;align-items:center;gap:8px;padding:.5rem .8rem;background:var(--panel2);border:1px solid transparent;cursor:pointer;font-size:.95rem;color:var(--text);transition:all .1s;}
.write-sug-item:hover,.write-sug-item.highlighted{border-color:var(--accent);background:rgba(0,212,255,.08);color:var(--accent);}
.write-sug-flag{width:20px;height:14px;object-fit:cover;flex-shrink:0;border-radius:1px;}
.write-sug-name{font-weight:600;flex-shrink:0;}
.write-sug-country{color:var(--muted);font-size:.85rem;flex:1;}
.write-sug-pop{color:var(--muted);font-size:.75rem;margin-left:auto;flex-shrink:0;opacity:.7;}
.write-result{padding:.6rem .8rem;font-family:'Bebas Neue',sans-serif;font-size:1.2rem;text-align:center;}
.write-result.correct{color:var(--green);border:1px solid var(--green);background:rgba(57,255,20,.08);}
.write-result.wrong{color:var(--red);border:1px solid var(--red);background:rgba(255,45,85,.08);}

/* Zoom toggle buttons (in-game) — bottom of map, bigger */
.zoom-toggle-wrap{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:6px;background:rgba(6,10,15,.9);padding:8px 14px;border:1px solid var(--border);border-radius:6px;backdrop-filter:blur(8px);}
.zoom-lvl-btn{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:.06em;padding:.5rem 1rem;background:transparent;border:2px solid var(--muted);color:var(--muted);cursor:pointer;transition:all .2s;white-space:nowrap;border-radius:4px;display:flex;align-items:center;gap:6px;}
.zoom-lvl-btn .zoom-icon{font-size:1.2rem;font-weight:bold;}
.zoom-lvl-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(0,212,255,.15);box-shadow:0 0 12px rgba(0,212,255,.2);}
.zoom-lvl-btn:hover{border-color:var(--accent);color:var(--accent);}

/* Mode hint */
.mode-hint{font-size:.75rem;color:var(--muted);text-align:center;margin-top:.3rem;font-style:italic;letter-spacing:.03em;}

/* Player colors */
.vs-input.p1-border{border-color:#3498db;}
.vs-input.p1-border:focus{border-color:#5dade2;box-shadow:0 0 8px rgba(52,152,219,.3);}
.vs-input.p2-border{border-color:#e74c3c;}
.vs-input.p2-border:focus{border-color:#ec7063;box-shadow:0 0 8px rgba(231,76,60,.3);}
.vs-color-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;}
.vs-color-dot.p1{background:#3498db;}
.vs-color-dot.p2{background:#e74c3c;}
.vs-colors-hint{display:flex;align-items:center;justify-content:center;gap:1.2rem;font-size:.8rem;color:var(--muted);margin-top:.5rem;}

/* Stats button */
.stats-btn{background:transparent !important;border-color:var(--gold) !important;color:var(--gold) !important;}
.stats-btn:hover{background:rgba(255,210,63,.1) !important;}

/* Stats screen */
#screen-stats{align-items:center;justify-content:flex-start;overflow-y:auto;overflow-x:hidden;padding:2rem 1rem 4rem;background:radial-gradient(ellipse at 50% 0%,#0a1628 0%,#060a0f 70%);}
#screen-stats .end-inner{width:100%;max-width:650px;margin:0 auto;}

/* Stats header */
.stats-header{text-align:center;margin-bottom:2rem;}
.stats-header .end-title{margin-bottom:.3rem;}
.stats-header-sub{font-size:.85rem;color:var(--muted);letter-spacing:.1em;}

/* Main KPI ring */
.stat-hero{display:flex;justify-content:center;margin-bottom:2rem;}
.stat-ring{position:relative;width:160px;height:160px;}
.stat-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.stat-ring-bg{fill:none;stroke:var(--panel2);stroke-width:8;}
.stat-ring-fill{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .8s ease;}
.stat-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.stat-ring-val{font-family:'Bebas Neue',sans-serif;font-size:2.8rem;color:var(--accent);line-height:1;}
.stat-ring-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.15em;}

/* Stat cards grid */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:2rem;}
.stat-card{background:linear-gradient(135deg,var(--panel2),rgba(17,28,46,.6));border:1px solid var(--border);padding:1.1rem .6rem;text-align:center;border-radius:6px;position:relative;overflow:hidden;transition:border-color .2s, transform .2s;}
.stat-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5;}
.stat-val{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;color:var(--accent);line-height:1;}
.stat-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-top:.35rem;}
.stat-card .stat-icon{font-size:1.4rem;margin-bottom:.3rem;display:block;filter:grayscale(.3);}

/* Section headers */
.stat-section{margin-bottom:1.8rem;}
.stat-section-title{font-family:'Bebas Neue',sans-serif;font-size:1.15rem;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;margin-bottom:.8rem;text-align:center;position:relative;}
.stat-section-title::after{content:'';display:block;width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin:.4rem auto 0;}

/* Region bars with progress */
.stat-regions{display:flex;flex-direction:column;gap:6px;}
.stat-region-row{display:flex;align-items:center;gap:10px;padding:.55rem .9rem;background:var(--panel2);border:1px solid var(--border);border-radius:5px;transition:border-color .15s;}
.stat-region-row:hover{border-color:var(--accent);}
.stat-region-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor;}
.stat-region-name{flex:1;font-size:.9rem;font-weight:500;}
.stat-region-bar{width:80px;height:6px;background:var(--panel);border-radius:3px;overflow:hidden;flex-shrink:0;}
.stat-region-bar-fill{height:100%;border-radius:3px;transition:width .6s ease;}
.stat-region-count{font-size:.75rem;color:var(--muted);min-width:55px;text-align:right;}
.stat-empty{text-align:center;color:var(--muted);font-size:.9rem;padding:1.5rem;border:1px dashed var(--border);border-radius:6px;}

/* Badges grid */
.stat-badges{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.stat-badge{display:flex;align-items:center;gap:10px;padding:.65rem .8rem;background:var(--panel2);border:1px solid var(--border);border-radius:6px;transition:all .2s;position:relative;overflow:hidden;}
.stat-badge.unlocked{border-color:var(--gold);background:linear-gradient(135deg,rgba(255,210,63,.08),rgba(255,210,63,.02));}
.stat-badge.unlocked::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.stat-badge.unlocked .stat-badge-icon{filter:none;}
.stat-badge.locked{opacity:.35;filter:grayscale(.8);}
.stat-badge-icon{font-size:1.6rem;flex-shrink:0;filter:grayscale(1);}
.stat-badge-info{display:flex;flex-direction:column;gap:1px;min-width:0;}
.stat-badge-name{font-family:'Bebas Neue',sans-serif;font-size:.9rem;letter-spacing:.06em;color:var(--text);}
.stat-badge-desc{font-size:.65rem;color:var(--muted);line-height:1.3;}

/* Precision bar at bottom */
.stat-precision-bar{width:100%;height:8px;background:var(--panel);border-radius:4px;overflow:hidden;margin-top:.3rem;}
.stat-precision-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--red),var(--gold),var(--green));transition:width .8s ease;}

/* Unlimited mode end button */
#btn-end-unlimited{border-color:var(--red);color:var(--red);}
#btn-end-unlimited:hover{background:rgba(255,45,85,.1);}

@media(max-width:768px){
  .seg-btns{gap:3px;}
  .seg-btn{font-size:.65rem;padding:.25rem .4rem;min-width:40px;}
  .ck-label{font-size:.75rem;padding:.2rem .4rem;}
  .write-input{font-size:1rem;padding:.6rem .8rem;}
  .write-sug-item{padding:.4rem .6rem;font-size:.85rem;}
  .zoom-toggle-wrap{bottom:8px;padding:6px 10px;gap:4px;}
  .zoom-lvl-btn{font-size:.8rem;padding:.4rem .7rem;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .stat-badges{grid-template-columns:1fr;}
  .stat-ring{width:130px;height:130px;}
  .stat-ring-val{font-size:2.2rem;}
  .stat-region-bar{width:50px;}
  .inv-label-name{font-size:.85rem;}
  .inv-label-country{font-size:.6rem;}
  .inv-label{padding:.3rem .4rem .25rem;}
}