@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@600;700;800&display=swap');
/* =====================================================================
   MAPIDESK SKIN  —  "Study Adventure" look for all game/quiz pages
   Colours, fonts, shadows & radii only. No layout / size / script changes.
   Load AFTER each page's own <style>:  <link rel="stylesheet" href="/mapidesk-skin.css">
   ===================================================================== */
:root{
  --body-bg:#EAF6FF; --card-bg:#FFFFFF; --white-glass:#F4FAFF;
  --glass-bg:rgba(255,255,255,.9); --glass-border:#CFE0EC;
  --glass-shadow:0 5px 0 #B4CCDD,0 16px 26px -14px rgba(23,48,71,.28);
  --border-light:#CFE0EC; --edge:#B4CCDD;
  --deep-blue:#173047; --deep-blue-soft:#24506F; --ink:#3A566E; --ink-soft:#4B6780;
  --muted:#6F879B; --muted-light:#A9BDCC;
  --gold:#E8730B; --gold-bright:#FFC800; --gold-glow:rgba(255,200,0,.22);
  --blue:#1B8FDC; --violet:#9B5DE5; --teal:#43A60A; --danger:#E5484D; --coral:#E5484D;
  --blue-soft:rgba(27,143,220,.14); --violet-soft:rgba(155,93,229,.14); --danger-dim:rgba(229,72,77,.14);
  --glow-1:rgba(255,200,0,.26); --glow-2:rgba(27,143,220,.24); --glow-3:rgba(224,72,155,.16);
  --doodle:.2;
}
[data-theme="dark"]{
  --body-bg:#131F24; --card-bg:#1F2C34; --white-glass:#25353F;
  --glass-bg:rgba(31,44,52,.9); --glass-border:#37464F;
  --glass-shadow:0 5px 0 #0C151A,0 16px 26px -14px rgba(0,0,0,.6);
  --border-light:#37464F; --edge:#0C151A;
  --deep-blue:#F1F7FB; --deep-blue-soft:#C3D2DC; --ink:#C3D2DC; --ink-soft:#A8BAC6;
  --muted:#8FA3B1; --muted-light:#566772;
  --gold:#FFC800; --gold-bright:#FFD84D; --gold-glow:rgba(255,200,0,.14);
  --teal:#5FC79A; --blue-soft:rgba(27,143,220,.22); --violet-soft:rgba(155,93,229,.22);
  --glow-1:rgba(255,200,0,.10); --glow-2:rgba(27,143,220,.18); --glow-3:rgba(224,72,155,.14); --doodle:.09;
}

/* ---------- fonts ---------- */
body,.btn,.sub,.nav-links a,.exit-btn,textarea,input{font-family:'Nunito',-apple-system,sans-serif;font-weight:700;}
h1,h3,.logo .brand-text .name,.strait-card .title,.final-score,.vs-score,.how-title,.share-title,#exit-dialog h3,.btn,.copy-btn,.exit-btn{font-family:'Fredoka',sans-serif;}
h1 span{font-style:normal;color:var(--deep-blue);background:linear-gradient(transparent 62%,var(--gold-bright) 62% 90%,transparent 90%);padding:0 4px;margin:0 -4px;}
[data-theme="dark"] h1 span{background:linear-gradient(transparent 62%,rgba(255,200,0,.4) 62% 90%,transparent 90%);}
.strait-card .title{color:var(--deep-blue);}
.logo .brand-text .tag,.strait-card .eyebrow{color:var(--blue);font-weight:800;}

/* ---------- page background: glows + study doodles ---------- */
body{background-color:var(--body-bg);
  background-image:radial-gradient(420px 420px at 0% 20%,var(--glow-1),transparent 70%),radial-gradient(460px 460px at 100% 38%,var(--glow-2),transparent 70%),radial-gradient(440px 440px at 0% 78%,var(--glow-3),transparent 70%);}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--doodle);background-size:220px 220px;
  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%3Cg fill='none' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 40v14M23 47h14' stroke='%23E0489B'/%3E%3Cpath d='M150 30c6-8 12 8 18 0s12 8 18 0' stroke='%231B8FDC'/%3E%3Ccircle cx='96' cy='96' r='8' stroke='%23FFC800'/%3E%3Cpath d='M170 120l7 14 15 2-11 10 3 15-14-8-14 8 3-15-11-10 15-2z' stroke='%239B5DE5'/%3E%3Cpath d='M40 150l30-12 6 12-30 12z' stroke='%2343A60A'/%3E%3Cpath d='M110 190c5-7 10 7 15 0s10 7 15 0' stroke='%23E8730B'/%3E%3Cpath d='M84 24l9 9M93 24l-9 9' stroke='%230E9E96'/%3E%3C/g%3E%3Ctext x='118' y='60' font-family='Arial' font-weight='700' font-size='22' fill='%23E5484D'%3E%CF%80%3C/text%3E%3Ctext x='14' y='108' font-family='Arial' font-weight='700' font-size='20' fill='%231B8FDC'%3EABC%3C/text%3E%3Ctext x='188' y='200' font-family='Arial' font-weight='700' font-size='20' fill='%2343A60A'%3E%2B%3C/text%3E%3C/svg%3E");}
.screen{background:transparent !important;}   /* let the doodles show through the menu screens */

/* ---------- chunky "raised" cards ---------- */
.nav-inner,.strait-card,.score-pill,#feedback,.info-card,.score-hero,.step,.vs-card,.b-row,#exit-dialog,#map-viewport,.link-box,.hud-back-btn{
  background:var(--card-bg);border:1px solid var(--border-light);box-shadow:0 4px 0 var(--edge),0 14px 24px -14px rgba(23,48,71,.28);}
.nav-inner{background:var(--glass-bg);box-shadow:var(--glass-shadow);}
#map-viewport{box-shadow:0 5px 0 var(--edge),0 16px 26px -14px rgba(23,48,71,.3);}
.info-card{border-radius:22px;} .info-card.accent{border-color:var(--blue);}
.info-card:hover{transform:translateY(-3px);}
.b-row{box-shadow:0 3px 0 var(--edge);}
.vs-side.rival{background:linear-gradient(160deg,var(--danger-dim),var(--card-bg));}
.vs-side.you{background:linear-gradient(200deg,var(--gold-glow),var(--card-bg));}
.vs-badge{background:var(--gold-bright);color:#3A2A00;border:3px solid #fff;box-shadow:0 4px 0 #D49A00;}
#exit-dialog{box-shadow:0 7px 0 var(--edge),0 30px 60px rgba(0,0,0,.3);border-radius:26px;}
#exit-dialog-overlay{background:rgba(19,31,36,.55);}
.menu-footer{border-top:3px dotted var(--border-light);}
.share-block{border-top:3px dotted var(--border-light);}

/* ---------- chunky buttons (press-down effect) ---------- */
.btn{position:relative;overflow:hidden;text-transform:none;letter-spacing:.01em;font-size:14px;font-weight:600;
  transition:transform .1s,box-shadow .1s,filter .15s;}
.btn::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 50%);pointer-events:none;}
.btn:active{transform:translateY(5px);}
.btn-primary,[data-theme="dark"] .btn-primary{background:var(--blue);color:#fff;box-shadow:0 5px 0 #136AA6;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 7px 0 #136AA6;}
.btn-primary:active{box-shadow:0 0 0 transparent;}
.btn-teal{background:#43A60A;color:#fff;box-shadow:0 5px 0 #2F7D00;}
.btn-teal:hover{box-shadow:0 7px 0 #2F7D00;transform:translateY(-2px);}
.btn-teal:active{box-shadow:0 0 0 transparent;}
.btn-ghost,#exit-dialog .btn-secondary{background:var(--card-bg);border:2px solid var(--border-light);color:var(--deep-blue);box-shadow:0 4px 0 var(--edge);}
.btn-ghost:hover,#exit-dialog .btn-secondary:hover{border-color:var(--blue);color:var(--blue);background:var(--card-bg);transform:translateY(-2px);}
.btn-ghost:active{box-shadow:0 0 0 transparent;}
.btn:disabled{opacity:.5;}
.exit-btn,.copy-btn{border:2px solid var(--border-light);background:var(--card-bg);color:var(--deep-blue);border-radius:100px;box-shadow:0 3px 0 var(--edge);text-transform:none;}
.exit-btn:hover,.copy-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--card-bg);transform:translateY(-2px);}
.exit-btn:active,.copy-btn:active{transform:translateY(3px);box-shadow:0 0 0 transparent;}
.theme-toggle{background:var(--gold-glow);border:2px solid rgba(255,200,0,.55);color:var(--gold);box-shadow:0 3px 0 rgba(212,154,0,.45);}
.theme-toggle:hover{background:var(--gold-glow);transform:translateY(-2px);}
.hud-back-btn{border:2px solid var(--border-light);}
.share-icons a{border:2px solid var(--border-light);background:var(--card-bg);border-radius:100px;box-shadow:0 4px 0 var(--edge);}
.share-icons a:first-child{color:#2F7D00;} .share-icons a:nth-child(2){color:#136AA6;}
.share-icons a:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--edge);}

/* ---------- badges, pills, icons (colourful rotation) ---------- */
.kicker,.mode-badge{background:var(--gold-bright);color:#3A2A00;border:none;box-shadow:0 3px 0 #D49A00;transform:rotate(-1.5deg);}
.mode-badge .dot{background:#3A2A00;box-shadow:none;}
.icon-circle{background:var(--gold-glow);border:2px solid rgba(255,200,0,.6);color:var(--gold);box-shadow:0 3px 0 rgba(212,154,0,.45);}
.icon-circle.blue{background:var(--blue-soft);border-color:var(--blue);color:var(--blue);box-shadow:0 3px 0 #136AA6;}
.icon-circle.violet{background:var(--violet-soft);border-color:var(--violet);color:var(--violet);box-shadow:0 3px 0 #7138B8;}
.icon-circle.coral{background:var(--danger-dim);border-color:var(--danger);color:var(--danger);box-shadow:0 3px 0 #B02A30;}
.icon-circle.teal{background:rgba(67,166,10,.15);border-color:#43A60A;color:#43A60A;box-shadow:0 3px 0 #2F7D00;}
.step-num{background:var(--blue);border:none;color:#fff;box-shadow:0 3px 0 #136AA6;font-family:'Fredoka',sans-serif;}
.step:nth-child(2) .step-num{background:#E0489B;box-shadow:0 3px 0 #A8286F;}
.step:nth-child(3) .step-num{background:#43A60A;box-shadow:0 3px 0 #2F7D00;}
.scope-badge.india{background:var(--gold-bright);color:#3A2A00;border:none;box-shadow:0 2px 0 #D49A00;}
.scope-badge.world{background:var(--blue);color:#fff;border:none;box-shadow:0 2px 0 #136AA6;}
.brand{color:var(--blue);}
.score-pill{border-radius:100px;color:var(--muted);}
.score-pill b{color:#43A60A;}
#challenge-flag{border:2px solid rgba(229,72,77,.5);box-shadow:0 3px 0 rgba(229,72,77,.4);}
.dot{background:var(--border-light);} .dot.done{background:#43A60A;box-shadow:none;} .dot.now{background:var(--gold-bright);box-shadow:0 0 0 3px rgba(255,200,0,.35);}
.b-row .b-idx{background:var(--blue);color:#fff;box-shadow:0 2px 0 #136AA6;}
.b-pts.good{background:rgba(67,166,10,.18);color:#43A60A;} .b-pts.mid{background:rgba(255,200,0,.25);color:#B87F00;} .b-pts.bad{background:var(--danger-dim);color:var(--danger);}
[data-theme="dark"] .b-pts.mid{color:#FFC800;}
.b-mk.ok{background:rgba(67,166,10,.18);color:#43A60A;} .b-mk.no{background:var(--danger-dim);color:var(--danger);}
.final-score,.vs-side.you .vs-score{color:var(--blue);} .vs-side.rival .vs-score{color:var(--danger);}
.verdict-box.win{background:rgba(67,166,10,.15);color:#43A60A;border:2px solid #43A60A;}
.verdict-box.lose{border:2px solid var(--danger);}
.verdict-box.tie{background:var(--gold-glow);color:var(--gold);border:2px solid var(--gold-bright);}
#feedback .verdict.good{color:#43A60A;} #feedback .verdict.mid{color:#B87F00;} #feedback .verdict.bad{color:var(--danger);}
[data-theme="dark"] #feedback .verdict.mid{color:#FFC800;}
#feedback .detail-line{color:var(--violet);}

/* ---------- inputs ---------- */
.info-card textarea,.link-box{background:var(--white-glass);border:2px solid var(--border-light);border-radius:16px;color:var(--deep-blue);}
.info-card textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft);}
.link-box input{color:var(--blue);}
#toast{background:#173047;color:#fff;border-radius:100px;box-shadow:0 4px 0 #0C151A;}

/* ---------- map controls (Leaflet) ---------- */
#map .leaflet-control-zoom a{background:var(--card-bg) !important;color:var(--blue) !important;border:none !important;box-shadow:0 3px 0 var(--edge);font-family:'Fredoka',sans-serif;}
#map .leaflet-control-zoom{border:none !important;box-shadow:none !important;}
#map .leaflet-control-attribution a{color:var(--blue) !important;}
.line-label{background:var(--gold-bright);color:#3A2A00;box-shadow:0 3px 0 #D49A00;}
.guess-label{box-shadow:0 3px 0 #B02A30;}
.country-label{box-shadow:0 3px 0 rgba(0,0,0,.25);}
.mineral-icon-wrap .m-tag{color:#3A2A00;}
#confettiCanvas{z-index:5600;}

/* ---------- floating orbs on menu screens, recoloured ---------- */
#screen-invite::before,#screen-end::before{background:radial-gradient(circle,rgba(255,200,0,.38),transparent 70%) !important;}
#screen-invite::after,#screen-end::after{background:radial-gradient(circle,rgba(27,143,220,.26),transparent 70%) !important;}

@media (prefers-reduced-motion:reduce){body::before{opacity:var(--doodle);}}

/* ---------- dark mode map tiles (same as homepage) ---------- */
[data-theme="dark"] #map .leaflet-tile-pane{
  filter:invert(1) hue-rotate(188deg) brightness(.82) saturate(.55) contrast(.98);
}
[data-theme="dark"] #map{background:#0F2029;}

/* ---------- hide game HUD behind Start / Invite / Result screens ---------- */
.screen:not(.hidden) ~ :not(.screen){
  visibility:hidden !important;
  pointer-events:none !important;
}