@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;0,800;1,700;1,800&display=swap');

:root{--bg:#08111f;--panel:#0e1a2c;--panel2:#111f34;--line:rgba(255,255,255,.09);--text:#f5f8fc;--muted:#8d9bad;--blue:#5d9cff;--gold:#ffb84d;--green:#69e1a7}
*{box-sizing:border-box}#newGameBtn.hidden{display:none!important} body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,Arial,sans-serif;min-height:100vh;overflow-x:hidden}
.bg-orb{position:fixed;border-radius:50%;filter:blur(100px);opacity:.18;pointer-events:none}.orb-a{width:450px;height:450px;background:#2663d9;top:-180px;left:-130px}.orb-b{width:400px;height:400px;background:#d98324;right:-150px;top:280px}
.app-shell{width:min(1180px,calc(100% - 32px));margin:auto;position:relative;z-index:1}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;gap:12px;align-items:center}.brand-mark{width:44px;height:44px;display:grid;place-items:center;color:#ffd36a}.brand-mark svg{width:44px;height:44px;display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}.brand h1{margin:0;font-size:21px;letter-spacing:-.7px}.brand span{font:10px "DM Mono";letter-spacing:1.8px;color:var(--muted)}
.top-actions{display:flex;gap:10px}.icon-btn,.how-btn,.secondary-btn{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:10px 13px;cursor:pointer;font-family:inherit}.icon-btn:hover,.how-btn:hover,.secondary-btn:hover{background:rgba(255,255,255,.09)}
.hero{padding:44px 0 28px;display:flex;justify-content:space-between;gap:24px;align-items:end}.hero h2{font-size:clamp(36px,5vw,62px);line-height:1.03;letter-spacing:-3px;margin:12px 0;font-weight:800}.hero em{font-family:"Playfair Display";font-weight:700;color:#ffc36b}.hero p{margin:0;color:var(--muted);font-size:15px}
.daily-card{min-width:190px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border:1px solid var(--line);padding:17px 20px;border-radius:15px}.daily-card span,.daily-card small{display:block;font:10px "DM Mono";letter-spacing:1.4px;color:var(--muted)}.daily-card strong{font:30px "DM Mono";display:block;margin:6px 0}
.mode-row{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px}.mode-tabs{display:flex;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:12px;padding:4px;gap:3px}.mode{border:0;background:transparent;color:var(--muted);padding:9px 16px;border-radius:8px;font-family:inherit;font-weight:700;cursor:pointer}.mode.active{background:#203453;color:white;box-shadow:0 4px 15px rgba(0,0,0,.2)}.streak-box{display:flex;align-items:center;gap:7px;font-size:18px}.streak-box span{font:10px "DM Mono";letter-spacing:1.2px;color:var(--muted);margin-left:3px}
.dashboard{display:grid;grid-template-columns:repeat(3,1fr) 2.2fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:15px;overflow:hidden;margin-bottom:14px}.stat,.progress-wrap{background:rgba(14,26,44,.85);padding:16px 19px}.stat span,.progress-label span{font:10px "DM Mono";letter-spacing:1.3px;color:var(--muted);display:block}.stat strong{display:block;font-size:22px;margin-top:3px}.score strong{color:#ffbd58}.progress-label{display:flex;justify-content:space-between}.progress-label strong{font-size:12px}.progress{height:7px;background:#1a2a40;border-radius:20px;margin-top:11px;overflow:hidden}.progress div{width:0;height:100%;background:linear-gradient(90deg,#4f7fd8,#6aa5f7,#ffd35c,#f27143,#e64242);transition:width .55s ease}
.game-card{background:rgba(14,26,44,.92);border:1px solid var(--line);border-radius:19px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.25)}.map-toolbar{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--line)}.map-status{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}.map-status span:first-child{width:8px;height:8px;background:#ffb84d;border-radius:50%;box-shadow:0 0 10px #ffb84d}#map{height:min(61vh,600px);min-height:410px;background:#87b7dc}
.guess-panel{padding:15px 16px 16px}form{display:flex;gap:10px}.input-wrap{flex:1;display:flex;align-items:center;gap:9px;background:#091321;border:1px solid #263a54;border-radius:11px;padding:0 15px}.input-wrap span{color:#8295ac;font-size:22px}input{width:100%;padding:14px 0;background:transparent;border:0;outline:0;color:white;font:15px Manrope}input::placeholder{color:#66778c}#guessBtn,.modal-card button{border:0;background:linear-gradient(135deg,#f5ad4e,#e56b47);color:white;border-radius:11px;padding:0 22px;font-weight:800;font-family:inherit;cursor:pointer;box-shadow:0 10px 24px rgba(229,107,71,.2)}#guessBtn:hover{transform:translateY(-1px)}.feedback-row{display:flex;justify-content:space-between;align-items:center;gap:20px}.feedback-row p{font-size:13px;color:var(--muted);min-height:20px}.heat-legend{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted);font-family:"DM Mono"}.heat-legend div{width:100px;height:6px;border-radius:10px;background:linear-gradient(90deg,#ffffff,#69a0d2,#ffe66d,#ef9a7d,#301812)}
.bottom-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin:14px 0 32px}.panel{background:rgba(14,26,44,.82);border:1px solid var(--line);border-radius:15px;padding:18px}.panel-heading{display:flex;justify-content:space-between;align-items:center}.panel h3{margin:0;font-size:14px}.panel-heading span{font:10px "DM Mono";color:var(--muted)}#guessHistory{list-style:none;padding:0;margin:10px 0 0;max-height:260px;overflow:auto}.guess-item{display:grid;grid-template-columns:13px 1fr auto;gap:9px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.055);font-size:13px;animation:slideIn .35s ease}.guess-dot{width:9px;height:9px;border-radius:50%}.guess-name{font-weight:700}.guess-distance{font:11px "DM Mono";color:var(--muted)}.empty{color:var(--muted);font-size:13px;padding:10px 0}.tip{display:flex;gap:11px;margin-top:15px;font-size:12px}.tip b{min-width:72px}.tip span{color:var(--muted);line-height:1.5}
.modal{position:fixed;inset:0;background:rgba(2,7,14,.72);backdrop-filter:blur(9px);z-index:9999;display:grid;place-items:center;padding:20px}.modal.hidden{display:none}.modal-card{position:relative;width:min(460px,100%);background:#111f34;border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:34px;text-align:center;box-shadow:0 40px 100px rgba(0,0,0,.5);animation:pop .35s ease}.modal-card h2{font-size:30px;margin:9px 0}.modal-card p{color:var(--muted);font-size:14px;line-height:1.65;text-align:left}.modal-icon{font-size:48px}.close{position:absolute;right:13px;top:10px;background:none;border:0;color:var(--muted);font-size:26px;cursor:pointer}.modal-card button:not(.close){height:46px;padding:0 23px;margin-top:10px}.confetti{font-size:62px}.win-score{margin:18px 0;background:#091321;padding:15px;border-radius:13px}.win-score span{font:10px "DM Mono";color:var(--muted);display:block}.win-score strong{font-size:32px;color:#ffbd58}.win-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.win-actions button{min-width:145px}.win-actions .secondary-modal-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);box-shadow:none;color:#dce7f2}.win-actions .secondary-modal-btn:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}
footer{text-align:center;color:#536274;font:10px "DM Mono";letter-spacing:1px;padding:25px 0 35px}@keyframes pulse{50%{transform:scale(1.45);opacity:.5}}@keyframes pop{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:none}}@keyframes slideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@media(max-width:760px){.app-shell{width:min(100% - 20px,1180px)}.topbar{height:76px}.how-btn{display:none}.hero{padding:28px 0 20px;align-items:start}.daily-card{display:none}.mode-row{align-items:flex-start}.streak-box span{display:none}.dashboard{grid-template-columns:repeat(3,1fr)}.progress-wrap{grid-column:1/-1}.bottom-grid{grid-template-columns:1fr}#map{height:48vh;min-height:370px}.feedback-row{align-items:flex-start;flex-direction:column;gap:2px}.heat-legend{align-self:flex-end;margin-top:-25px}.mode{padding:8px 10px;font-size:12px}.stat,.progress-wrap{padding:13px 10px}.stat strong{font-size:18px}form{flex-direction:column}#guessBtn{height:48px}.hero h2{letter-spacing:-2px}.brand span{font-size:8px}}

/* Desktop refinements */
@media(min-width:761px){
  .app-shell{width:min(1280px,calc(100% - 56px))}
  #map{height:clamp(500px,62vh,720px);min-height:500px}
  .game-card{overflow:visible}
  .map-toolbar,.guess-panel{background:rgba(14,26,44,.96)}
  .bottom-grid{grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr)}
  .hero{padding-top:52px}
}

/* Prevent Leaflet controls/tooltips from being clipped or sitting behind the UI. */
.leaflet-container{font-family:Manrope,Arial,sans-serif}
.leaflet-control-zoom a{color:#18283d!important}
.leaflet-control-attribution{font-size:9px}


/* Premium game-map treatment */
#map{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,#17304a 0%,#0b1727 58%,#060d17 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 0 90px rgba(0,0,0,.45)}
#map .leaflet-overlay-pane{filter:drop-shadow(0 0 3px rgba(75,155,255,.16)) drop-shadow(0 5px 9px rgba(0,0,0,.35))}
#map .leaflet-control-zoom{margin:16px!important;border:1px solid rgba(145,190,240,.22)!important;border-radius:13px!important;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.38),0 0 20px rgba(68,130,220,.08)!important;backdrop-filter:blur(10px)}
#map .leaflet-control-zoom a{width:36px!important;height:36px!important;line-height:36px!important;background:rgba(10,22,38,.88)!important;border:0!important;color:#dcecff!important;font-weight:700;transition:background .18s ease,color .18s ease}
#map .leaflet-control-zoom a:hover{background:rgba(35,62,94,.96)!important;color:#fff!important}
#map .leaflet-control-zoom a+a{border-top:1px solid rgba(145,190,240,.14)!important}
#map:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:399;background:radial-gradient(circle at 50% 45%,transparent 38%,rgba(2,8,16,.16) 68%,rgba(2,7,14,.62) 100%)}
#map:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:400;box-shadow:inset 0 0 90px rgba(1,7,14,.45),inset 0 0 0 1px rgba(255,255,255,.035)}

/* Premium framing */
.game-card{box-shadow:0 35px 100px rgba(0,0,0,.38),0 0 0 1px rgba(117,171,230,.035)}
.map-toolbar{background:linear-gradient(180deg,rgba(17,31,52,.98),rgba(11,23,39,.98));box-shadow:0 8px 24px rgba(0,0,0,.12)}
.map-status{letter-spacing:.1px}

/* Refined centered brand header */
@media(min-width:761px){
  .topbar{height:136px;position:relative;justify-content:center;padding:18px 0 20px}
  .brand{gap:16px;align-items:center;text-align:left}
  .brand-mark{width:68px;height:68px;flex:0 0 68px;color:#ffd36a}
  .brand-mark svg{width:68px;height:68px;filter:drop-shadow(0 5px 12px rgba(0,0,0,.3))}
  .brand h1{font-size:34px;line-height:1;letter-spacing:-1.35px}
  .brand span{display:block;margin-top:8px;font-size:10px;letter-spacing:2.8px;white-space:nowrap}
  .top-actions{position:absolute;right:0;top:50%;transform:translateY(-50%)}
}

@media(max-width:760px){
  .topbar{height:104px;position:relative;justify-content:center;padding:10px 0 12px}
  .brand{gap:10px}
  .brand-mark{width:52px;height:52px;flex:0 0 52px}
  .brand-mark svg{width:52px;height:52px}
  .brand h1{font-size:26px;letter-spacing:-1px}
  .brand span{display:block;margin-top:5px;font-size:7px;letter-spacing:1.45px;white-space:nowrap}
  .top-actions{position:absolute;right:0;top:50%;transform:translateY(-50%)}
}

/* Subtle hero treatment — keeps the mystery prompt secondary to the game */
.hero{padding:28px 0 18px;align-items:center}
.hero h2{font-size:clamp(27px,3.4vw,42px);line-height:1.08;letter-spacing:-1.8px;margin:7px 0 6px;max-width:760px}
.hero p{font-size:13px;max-width:620px}
.daily-card{min-width:170px;padding:13px 16px}
.daily-card strong{font-size:25px;margin:4px 0}
@media(min-width:761px){.hero{padding-top:30px;padding-bottom:18px}.hero h2{font-size:clamp(30px,3.2vw,44px)}}
@media(max-width:760px){.hero{padding:20px 0 14px}.hero h2{font-size:28px;letter-spacing:-1.2px}}

/* Larger, signature brand header — clearly the primary identity of the page */
@media(min-width:761px){
  .topbar{
    height:178px;
    padding:24px 0 28px;
  }
  .brand{
    gap:20px;
  }
  .brand-mark,
  .brand-mark svg{
    width:88px;
    height:88px;
  }
  .brand h1{
    font-size:46px;
    line-height:.98;
    letter-spacing:-2px;
  }
  .brand span{
    margin-top:10px;
    font-size:11px;
    letter-spacing:3px;
    white-space:nowrap;
  }
  .top-actions{right:0}

  /* Keep the mystery prompt intentionally quieter than the brand */
  .hero{
    padding-top:18px;
    padding-bottom:12px;
  }
  .hero h2{
    font-size:clamp(27px,2.7vw,38px);
    letter-spacing:-1.5px;
  }
}

@media(max-width:760px){
  .topbar{
    height:124px;
    padding:12px 0 16px;
  }
  .brand{
    gap:12px;
  }
  .brand-mark,
  .brand-mark svg{
    width:62px;
    height:62px;
  }
  .brand h1{
    font-size:30px;
    letter-spacing:-1.2px;
  }
  .brand span{
    margin-top:6px;
    font-size:10px;
    letter-spacing:2px;
    font-weight:600;
    white-space:nowrap;
  }
}

/* Emphasize only the words “mystery country” in the hero heading */
.mystery-accent{
  color:#66c7ff;
}
.mystery-accent em{
  font-style:italic;
}

/* Earthlike visual direction */
:root{
  --bg:#07170f;
  --panel:#0b2418;
  --panel2:#10311f;
  --line:rgba(176,255,220,.13);
  --text:#f4fffb;
  --muted:#a3c0b3;
  --blue:#28f0d0;
  --gold:#ffd86a;
  --green:#49f2b0;
  --turquoise:#20f5d0;
}

html,body{background:#07170f}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(900px 650px at 8% -10%,rgba(58,92,76,.14),transparent 62%),
    radial-gradient(800px 600px at 94% 12%,rgba(49,82,68,.12),transparent 62%),
    radial-gradient(700px 500px at 48% 100%,rgba(32,62,48,.14),transparent 68%),
    linear-gradient(145deg,#0b1511 0%,#17241d 45%,#0c1712 100%);
  position:relative;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.46' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.38;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23c5ded2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath opacity='.42' d='M-80 150 C80 40 170 235 340 126 S610 58 770 165 S1060 270 1225 135 S1460 55 1680 145'/%3E%3Cpath opacity='.37' d='M-90 184 C75 78 180 270 350 160 S620 94 785 198 S1070 302 1240 168 S1470 92 1690 178'/%3E%3Cpath opacity='.31' d='M-95 220 C65 115 188 305 362 195 S635 132 800 232 S1080 340 1255 202 S1485 128 1695 214'/%3E%3Cpath opacity='.27' d='M-100 260 C55 155 200 342 375 230 S650 170 815 270 S1090 375 1270 238 S1500 165 1700 250'/%3E%3Cpath opacity='.39' d='M-100 610 C85 500 195 690 365 575 S650 520 825 625 S1095 730 1270 585 S1500 515 1700 610'/%3E%3Cpath opacity='.34' d='M-105 648 C78 540 205 725 380 612 S660 558 840 663 S1110 768 1288 623 S1515 552 1705 646'/%3E%3Cpath opacity='.29' d='M-110 688 C70 578 215 764 395 652 S675 598 855 704 S1125 805 1305 662 S1530 592 1710 684'/%3E%3Cpath opacity='.24' d='M-115 730 C62 620 225 806 410 695 S690 642 875 746 S1140 845 1320 705 S1545 632 1715 725'/%3E%3Cpath opacity='.35' d='M330 -70 C250 65 470 105 410 230 S300 420 470 500 S625 655 545 805 S450 940 520 1070'/%3E%3Cpath opacity='.29' d='M370 -75 C295 70 515 112 450 245 S345 430 505 515 S665 670 585 820 S495 950 560 1075'/%3E%3Cpath opacity='.25' d='M1040 -70 C970 65 1180 112 1120 235 S1015 420 1170 505 S1325 655 1250 805 S1160 950 1225 1070'/%3E%3Cpath opacity='.21' d='M1080 -75 C1010 70 1220 115 1160 250 S1055 435 1210 520 S1365 675 1290 820 S1200 955 1265 1075'/%3E%3C/g%3E%3C/svg%3E");
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  mask-image:radial-gradient(ellipse at center,black 0%,rgba(0,0,0,.82) 62%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse at center,black 0%,rgba(0,0,0,.82) 62%,transparent 100%);
}
.bg-orb{filter:blur(110px);opacity:.2}.orb-a{background:#22b878}.orb-b{background:#0b8f72}

.app-shell{z-index:1}
.brand-mark{color:var(--turquoise)}
.brand h1,.hero h2,.panel h3,.stat strong,.modal-card h2,.guess-name{color:#f5fffb}
.brand span,.daily-card span,.daily-card small,.stat span,.progress-label span,.streak-box span,.map-status,.guess-distance,.empty,.tip span,footer{color:#9bc0b0}
.brand h1{text-shadow:0 0 24px rgba(32,245,208,.16)}

.topbar{border-bottom-color:rgba(102,255,215,.14)}
.icon-btn,.how-btn,.secondary-btn{
  background:rgba(9,44,30,.66);
  border-color:rgba(91,241,204,.2);
  color:#eafff8;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}
.icon-btn:hover,.how-btn:hover,.secondary-btn:hover{background:rgba(21,75,54,.78);border-color:rgba(32,245,208,.42)}

.hero h2{color:#f8fffd;text-shadow:0 4px 26px rgba(0,0,0,.24)}
.hero p{color:#a7c6b7}
.mystery-accent,.hero em{color:var(--turquoise)!important;text-shadow:0 0 20px rgba(32,245,208,.2)}
.daily-card{
  background:linear-gradient(145deg,rgba(26,82,58,.58),rgba(7,31,21,.72));
  border-color:rgba(75,239,190,.18);
  box-shadow:0 16px 38px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.035);
}

.mode-tabs{background:rgba(6,31,20,.62);border-color:rgba(102,255,215,.14)}
.mode{color:#91b3a3}
.mode.active{background:linear-gradient(135deg,#117c67,#0b5e50);color:#f4fffd;box-shadow:0 6px 18px rgba(10,116,91,.28),inset 0 1px 0 rgba(255,255,255,.1)}
.streak-box{color:#effff9}

.dashboard{background:rgba(73,220,172,.12);border-color:rgba(102,255,215,.13)}
.stat,.progress-wrap{background:rgba(8,35,23,.82)}
.score strong{color:#ffda67}
.progress{background:#153526}
.progress div{background:linear-gradient(90deg,#fff,#f6d2bb,#e0845d,#b13f2b,#3a140d)}

.game-card{background:rgba(8,35,23,.9);border-color:rgba(102,255,215,.14);box-shadow:0 35px 100px rgba(0,0,0,.42),0 0 0 1px rgba(61,236,190,.045)}
.map-toolbar{background:linear-gradient(180deg,rgba(12,43,29,.98),rgba(7,29,20,.98));border-bottom-color:rgba(102,255,215,.12)}
.map-status span:first-child{background:var(--turquoise);box-shadow:0 0 12px rgba(32,245,208,.75)}

#map{
  background:radial-gradient(circle at 48% 43%,#173d2a 0%,#0c281b 55%,#06150d 100%);
  box-shadow:inset 0 0 0 1px rgba(104,255,215,.08),inset 0 0 100px rgba(0,0,0,.46);
}
#map:before{background:radial-gradient(circle at 50% 45%,transparent 36%,rgba(2,13,8,.12) 67%,rgba(1,10,6,.64) 100%)}
#map .leaflet-overlay-pane{filter:drop-shadow(0 0 4px rgba(42,245,208,.11)) drop-shadow(0 5px 9px rgba(0,0,0,.38))}
#map .leaflet-control-zoom{border-color:rgba(102,255,215,.22)!important;box-shadow:0 12px 30px rgba(0,0,0,.42),0 0 20px rgba(32,245,208,.07)!important}
#map .leaflet-control-zoom a{background:rgba(7,31,21,.9)!important;color:#dffff5!important}
#map .leaflet-control-zoom a:hover{background:rgba(19,77,57,.96)!important;color:#fff!important}

.guess-panel{background:rgba(8,35,23,.94)}
.input-wrap{background:#061a11;border-color:rgba(102,255,215,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.input-wrap span{color:#7de7ca}
input{font-family:inherit;color:#f5fffb}
input::placeholder{color:#6e9483}
#guessBtn,.modal-card button{
  background:linear-gradient(135deg,#20f5d0,#13cdb0);
  color:#04251c;
  box-shadow:0 12px 28px rgba(24,218,183,.22);
}
#guessBtn:hover{box-shadow:0 15px 34px rgba(24,218,183,.3)}
.feedback-row p{color:#a4c5b5}
.heat-legend{color:#9dc0af}

.bottom-grid .panel{background:rgba(8,35,23,.78);border-color:rgba(102,255,215,.12)}
#guessHistory .guess-item{border-bottom-color:rgba(102,255,215,.07)}

.modal{background:rgba(2,12,7,.76)}
.modal-card{background:linear-gradient(150deg,#103321,#092116);border-color:rgba(102,255,215,.18);box-shadow:0 40px 100px rgba(0,0,0,.58),0 0 50px rgba(21,214,177,.07)}
.modal-card p{color:#a6c5b6}
.close{color:#8cae9f}
.win-score{background:#061a11;border:1px solid rgba(102,255,215,.08)}
.win-score strong{color:#ffda67}
footer{color:#638677}

.leaflet-container{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif}

/* Light grey content tiles — neutral contrast against the earthlike background */
.daily-card,
.dashboard,
.stat,
.progress-wrap,
.game-card,
.map-toolbar,
.guess-panel,
.bottom-grid .panel{
  background:rgba(222,226,224,.94);
  border-color:rgba(255,255,255,.52);
  color:#17231f;
  box-shadow:0 18px 42px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.72);
}

.daily-card span,.daily-card small,
.stat span,.progress-label span,
.map-status,.guess-distance,.empty,.tip span,
.panel-heading span,
.feedback-row p,
.heat-legend,
.streak-box span{
  color:#5d6b66;
}

.daily-card strong,
.stat strong,
.panel h3,
.guess-name,
.progress-label strong,
.streak-box{
  color:#17231f;
}

.daily-card{background:rgba(222,226,224,.96)}
.dashboard{background:rgba(255,255,255,.34);border-color:rgba(255,255,255,.52)}
.stat,.progress-wrap{background:rgba(222,226,224,.94)}
.game-card{background:rgba(222,226,224,.96)}
.map-toolbar{background:rgba(222,226,224,.97);border-bottom-color:rgba(35,57,49,.14)}
.guess-panel{background:rgba(222,226,224,.97)}
.bottom-grid .panel{background:rgba(222,226,224,.94)}

.mode-tabs{background:rgba(222,226,224,.86);border-color:rgba(255,255,255,.5);box-shadow:0 10px 26px rgba(0,0,0,.14)}
.mode{color:#53635d}
.mode.active{background:linear-gradient(135deg,#20cdb2,#14a58f);color:#f6fffc;box-shadow:0 6px 18px rgba(10,116,91,.22),inset 0 1px 0 rgba(255,255,255,.25)}

.progress{background:#b9c1bd}
.progress-label strong{color:#17231f}

.input-wrap{background:#f2f4f3;border-color:rgba(45,70,61,.18);box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.input-wrap span{color:#1aa990}
input{color:#17231f}
input::placeholder{color:#7a8883}

.guess-item{border-bottom-color:rgba(35,57,49,.12)}

/* Darker, translucent neutral tiles that blend with the earthlike background */
.daily-card,
.stat,
.progress-wrap,
.game-card,
.guess-panel,
.bottom-grid .panel{
  background:rgba(43,50,48,.76);
  border-color:rgba(205,215,211,.16);
  box-shadow:0 18px 48px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.045);
}

.dashboard{background:rgba(185,198,193,.10);border-color:rgba(205,215,211,.15)}
.map-toolbar{background:rgba(43,50,48,.78);border-bottom-color:rgba(205,215,211,.14)}
.mode-tabs{background:rgba(43,50,48,.68);border-color:rgba(205,215,211,.16)}
.mode{color:#c2cbc7}
.mode.active{background:linear-gradient(135deg,rgba(24,142,121,.95),rgba(15,106,92,.95));color:#f6fffc}
.input-wrap{background:rgba(22,29,27,.78);border-color:rgba(205,215,211,.16)}

/* Match tile typography to the bright GlobeQuest/header text */
.daily-card,
.dashboard,
.stat,
.progress-wrap,
.game-card,
.map-toolbar,
.guess-panel,
.bottom-grid .panel{
  color:#f5fffb;
}
.daily-card strong,
.stat strong,
.panel h3,
.guess-name,
.progress-label strong,
.streak-box,
.map-status,
.feedback-row p{
  color:#f5fffb;
}
.daily-card span,.daily-card small,
.stat span,.progress-label span,
.guess-distance,.empty,.tip span,
.panel-heading span,
.heat-legend,.streak-box span{
  color:#9bc0b0;
}
input{color:#f5fffb}
input::placeholder{color:#8fa99d}


/* Centered GlobeQuest identity with tagline beneath logo and title */
@media(min-width:761px){
  .topbar{
    height:196px;
    position:relative;
    justify-content:center;
    padding:20px 0 24px;
  }
  .brand{
    flex-direction:column;
    gap:8px;
    align-items:center;
    text-align:center;
  }
  .brand-mark,.brand-mark svg{width:78px;height:78px}
  .brand-copy{display:flex;flex-direction:column;align-items:center}
  .brand h1{font-size:46px;line-height:.98;letter-spacing:-2px}
  .brand span{
    display:block;
    margin-top:9px;
    font-size:11px;
    letter-spacing:2.4px;
    font-weight:600;
    white-space:nowrap;
  }
  .top-actions{right:0}
}

@media(max-width:760px){
  .topbar{
    height:164px;
    position:relative;
    justify-content:center;
    padding:14px 0 18px;
  }
  .brand{
    flex-direction:column;
    gap:5px;
    align-items:center;
    text-align:center;
  }
  .brand-mark,.brand-mark svg{width:58px;height:58px}
  .brand-copy{display:flex;flex-direction:column;align-items:center}
  .brand h1{font-size:30px;line-height:1;letter-spacing:-1.2px}
  .brand span{
    display:block;
    margin-top:7px;
    font-size:8px;
    letter-spacing:1.35px;
    font-weight:600;
    white-space:nowrap;
  }
}

/* Continent quest selector */
.hidden{display:none!important}
.continent-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:-2px 0 14px;padding:11px 14px;background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:13px}
.continent-label{min-width:115px}
.continent-label span{display:block;font:9px "DM Mono";letter-spacing:1.2px;color:var(--muted)}
.continent-label strong{display:block;font-size:13px;margin-top:2px}
.continent-tabs{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
.continent{border:1px solid transparent;background:transparent;color:var(--muted);padding:7px 10px;border-radius:8px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.18s ease}
.continent:hover{background:rgba(255,255,255,.06);color:var(--text)}
.continent.active{background:#203453;color:#fff;border-color:rgba(255,255,255,.07);box-shadow:0 3px 12px rgba(0,0,0,.16)}
@media(max-width:800px){
  .continent-row{align-items:flex-start;flex-direction:column}
  .continent-tabs{justify-content:flex-start}
}

/* Clickable GlobeQuest home brand */
.site-brand-link{display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;padding:5px 7px;border-radius:10px;transition:background .18s ease,transform .18s ease}
.site-brand-link:hover{background:rgba(255,255,255,.055);transform:translateY(-1px)}
.site-brand-mark{width:32px;height:32px;display:grid;place-items:center;color:var(--turquoise)}
.site-brand-mark svg{width:32px;height:32px;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}
.site-brand-copy{display:flex;flex-direction:column;line-height:1;text-align:left}
.site-brand-copy strong{font-size:15px;letter-spacing:-.45px;font-weight:800;color:var(--turquoise)}
.site-brand-copy small{margin-top:4px;font:600 7px "DM Mono";letter-spacing:1.8px;color:var(--muted)}
@media(max-width:760px){.site-brand-copy{display:none}.site-brand-mark{width:30px;height:30px}.site-brand-mark svg{width:30px;height:30px}}