/* styles.css — Atlas Globe Quiz */

  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{height:100%;}
  body{font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:#f3ead6;overflow:hidden;
    background:radial-gradient(circle at 72% 28%, #103047 0%, #0a1c2b 48%, #060f18 100%);}
  button{font-family:'DM Sans',sans-serif;}
  #root{position:fixed;inset:0;display:flex;overflow:hidden;}
  .stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.4px 1.4px at 12% 22%,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 24% 68%,rgba(255,255,255,.4),transparent),radial-gradient(1.3px 1.3px at 46% 14%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 63% 80%,rgba(255,255,255,.35),transparent),radial-gradient(1.5px 1.5px at 83% 30%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 91% 64%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 36% 88%,rgba(255,255,255,.3),transparent);}

  #menu-btn{position:fixed;top:22px;left:22px;z-index:30;width:46px;height:46px;border-radius:13px;border:1px solid rgba(255,255,255,.14);background:rgba(10,22,33,.72);backdrop-filter:blur(8px);color:#f3ead6;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s;}
  #menu-btn:hover{background:rgba(20,40,56,.9);border-color:rgba(231,218,187,.4);}

  aside{position:absolute;top:0;left:0;bottom:0;z-index:15;width:min(404px,100vw);display:flex;flex-direction:column;padding:38px;overflow-y:auto;
    background:linear-gradient(180deg,rgba(8,18,28,.84),rgba(6,14,22,.76));backdrop-filter:blur(14px);
    border-right:1px solid rgba(255,255,255,.08);box-shadow:0 0 60px rgba(0,0,0,.4);
    transform:translateX(-100%);will-change:transform;}

  main{position:relative;flex:1;z-index:1;}
  #globe{position:absolute;inset:0;user-select:none;}
  #globe svg{display:block;cursor:grab;touch-action:none;}
  #globe svg:active{cursor:grabbing;}

  .eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#8aa0af;}
  .serif{font-family:'Spectral',serif;}
  .divider{height:1px;background:rgba(255,255,255,.09);margin:28px 0;}

  .start-card{display:flex;align-items:center;gap:15px;text-align:left;padding:17px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);color:#f3ead6;cursor:pointer;transition:transform .16s,border-color .2s,background .2s;}
  .start-card:hover{transform:translateX(3px);border-color:rgba(231,218,187,.45);background:rgba(231,218,187,.07);}

  .stat-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8aa0af;}
  .stat-num{font-family:'Spectral',serif;font-size:29px;font-weight:600;margin-top:4px;}

  .ghost{padding:13px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#aebecb;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s,color .2s;}
  .ghost:hover{background:rgba(255,255,255,.05);color:#f3ead6;}
  .hint-btn{padding:13px;border-radius:11px;border:1px solid rgba(231,218,187,.28);background:transparent;color:#f3ead6;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s,border-color .2s;}
  .hint-btn:hover{background:rgba(231,218,187,.09);border-color:rgba(231,218,187,.5);}
  .back-btn{margin-top:14px;width:100%;padding:10px;border-radius:11px;border:none;background:transparent;color:#74899a;font-size:13px;font-weight:500;cursor:pointer;letter-spacing:.02em;transition:color .2s;}
  .back-btn:hover{color:#f3ead6;}

  .cap-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 15px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#f3ead6;font-size:15px;font-weight:500;cursor:pointer;transition:background .18s,border-color .18s,color .18s;}
  .cap-opt:not(:disabled):hover{background:rgba(231,218,187,.08);border-color:rgba(231,218,187,.4);}
  .cap-opt:disabled{cursor:default;}
  .cap-opt .key{font-size:11px;font-weight:700;opacity:.55;width:14px;flex-shrink:0;}

  .primary{padding:14px 30px;border-radius:12px;border:none;background:#e7dabb;color:#10222f;font-size:15px;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .2s;}
  .primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(231,218,187,.25);}
  .secondary{padding:14px 30px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#f3ead6;font-size:15px;font-weight:500;cursor:pointer;transition:background .2s;}
  .secondary:hover{background:rgba(255,255,255,.06);}

  #tooltip{position:absolute;left:0;top:0;pointer-events:none;z-index:6;background:rgba(243,234,214,.97);padding:9px 13px;border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.4);opacity:0;transition:opacity .12s;max-width:240px;}

  .overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;}
  #loading{z-index:8;flex-direction:column;gap:20px;color:#9fb4c2;}
  #finished{z-index:50;background:radial-gradient(circle at 50% 40%,rgba(12,30,44,.78),rgba(4,10,16,.92));backdrop-filter:blur(6px);}
  .spinner{width:46px;height:46px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:#e7dabb;animation:gqspin 1s linear infinite;}
  .pop{animation:gqpop .4s ease both;}
  @keyframes gqspin{to{transform:rotate(360deg);}}
  @keyframes gqpop{0%{transform:scale(.96);}100%{transform:scale(1);}}
  .hidden{display:none !important;}
  @media (max-width:640px){
    aside{padding:30px 24px;}
    #menu-btn{top:16px;}
    #ctry-target{font-size:40px !important;}
    #finished > div{padding:40px 26px !important;}
    #fin-score{font-size:52px !important;}
  }