/* =========================================================
   مغامرة المأمون V36.14 — 3D PARTY BOARD GAME THEME
   Visual redesign only: keeps all existing educational logic,
   accounts, progress, Supabase, OpenAI, audio and activities.
   ========================================================= */

:root{
 --party-blue:#0754a8;
 --party-blue2:#063f84;
 --party-deep:#052f67;
 --party-sky:#21a8e7;
 --party-gold:#ffd34f;
 --party-gold2:#e7a915;
 --party-cream:#fff9e9;
 --party-cream2:#f7e7bd;
 --party-green:#24bd5c;
 --party-green2:#139444;
 --party-red:#ef4c43;
 --party-shadow:0 12px 0 rgba(3,41,83,.18),0 18px 30px rgba(0,28,61,.26);
 --party-soft:0 12px 28px rgba(0,37,76,.22);
}

/* ---------- shared glossy game controls ---------- */
#app button{ -webkit-tap-highlight-color:transparent }
#app .big-btn,#app .control-btn,#app .choice,#app .token,#app .match-card,#app .alpha-btn{
 transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;
}
@media(hover:hover) and (pointer:fine){
 #app .big-btn:hover,#app .control-btn:hover,#app .choice:hover,#app .token:hover,#app .match-card:hover,#app .alpha-btn:hover{
  transform:translateY(-3px);filter:brightness(1.035)
 }
}
#app .big-btn:active,#app .control-btn:active,#app .choice:active,#app .token:active,#app .match-card:active{
 transform:translateY(2px)!important;
 box-shadow:0 3px 0 rgba(3,49,91,.25)!important;
}

/* ---------- 3D top HUD, matching the reference ---------- */
#app .top-hud{
 height:74px!important;
 padding:8px 18px!important;
 background:linear-gradient(180deg,#0a65bc 0%,#06498e 56%,#05386f 100%)!important;
 border-bottom:3px solid #f7c53a!important;
 box-shadow:0 8px 20px rgba(0,33,71,.28),inset 0 1px 0 rgba(255,255,255,.32)!important;
 color:#fff!important;
}
#app .profile-chip,#app .hud-pill,#app .toggle-btn,#app .round-btn{
 background:linear-gradient(180deg,#1676c9,#084b91)!important;
 border:2px solid rgba(129,213,255,.75)!important;
 box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 5px 0 #033871,0 8px 15px rgba(0,23,54,.24)!important;
 color:#fff!important;
 border-radius:18px!important;
}
#app .profile-chip{padding:5px 12px 5px 7px!important;border-radius:999px!important}
#app .profile-chip img{
 width:50px!important;height:50px!important;
 border:3px solid #fff!important;box-shadow:0 0 0 3px #50bfff!important;
 background:#fff!important
}
#app .profile-chip b{font-size:17px!important}
#app .hud-pill{min-height:48px!important;display:flex!important;align-items:center!important;gap:7px!important;padding:8px 15px!important;font-size:17px!important}
#app .hud-title{
 background:linear-gradient(180deg,#1269b8,#073f80);
 border:2px solid #58bfff;border-radius:20px;padding:9px 18px;
 box-shadow:inset 0 2px 0 rgba(255,255,255,.22),0 5px 0 #043365;
 color:#fff!important
}

/* ---------- WORLD: 3D board map ---------- */
#worldScreen{
 background:linear-gradient(180deg,#0f8fc0,#08668e)!important;
}
#worldScreen .world{
 background:linear-gradient(180deg,#1aa6d3,#09759c)!important;
}
#mapBox{
 border:5px solid rgba(255,255,255,.92)!important;
 border-radius:28px!important;
 overflow:hidden!important;
 box-shadow:0 0 0 4px #f3bd31,0 18px 32px rgba(0,31,63,.34)!important;
 background:#79daf2!important
}
#mapBox .world-art{
 filter:saturate(1.16) contrast(1.06) brightness(1.03)!important;
 transform:scale(1.012);
}

/* Make the route look raised rather than like a flat line */
#mapBox .learning-route path,#mapBox .learning-route polyline{
 stroke:#fff3b2!important;
 stroke-width:1.15!important;
 stroke-dasharray:2.2 1.65!important;
 filter:drop-shadow(0 3px 0 #c88810) drop-shadow(0 5px 3px rgba(0,0,0,.35))!important;
 animation:routeDash 1.9s linear infinite!important;
}
#mapBox .learning-route #learningRouteDone{
 stroke:#ffd331!important;
 stroke-width:1.7!important;
 stroke-dasharray:none!important;
 filter:drop-shadow(0 2px 0 #bb7c06) drop-shadow(0 0 7px rgba(255,215,53,.9))!important
}

/* Stage labels: compact blue/gold badges, no grey cards */
#mapBox .station-node{
 width:auto!important;height:auto!important;min-width:118px!important;
 padding:7px 14px 7px 42px!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 background:linear-gradient(180deg,#146bb9,#073c79)!important;
 border:2.5px solid #ffd34f!important;border-radius:999px!important;
 box-shadow:inset 0 2px 0 rgba(255,255,255,.28),0 5px 0 #073269,0 9px 16px rgba(0,30,65,.31)!important;
 color:white!important;z-index:9!important;
 overflow:visible!important;
}
#mapBox .station-node span{
 position:absolute!important;left:-17px!important;top:50%!important;
 transform:translateY(-50%)!important;
 width:42px!important;height:42px!important;margin:0!important;
 display:grid!important;place-items:center!important;
 border-radius:50%!important;
 background:radial-gradient(circle at 35% 25%,#fff6b4 0 10%,#ffd83c 28%,#f2b619 72%,#bd7900 100%)!important;
 border:3px solid #fff!important;
 box-shadow:0 0 0 3px #f0ae12,0 5px 8px rgba(0,0,0,.25)!important;
 color:#6a4600!important;font-size:20px!important;font-weight:1000!important;
}
#mapBox .station-node b{
 background:none!important;color:#fff!important;box-shadow:none!important;
 padding:0!important;margin:0!important;font-size:14px!important;
 white-space:nowrap!important;text-shadow:0 2px 0 rgba(0,0,0,.22)!important
}
#mapBox .station-node small,#mapBox .station-node .node-missions{display:none!important}
#mapBox .station-node .node-stars{
 position:absolute!important;top:calc(100% + 4px)!important;left:50%!important;
 transform:translateX(-50%)!important;font-size:11px!important;
 color:#ffd84d!important;text-shadow:0 2px 3px #063a70!important;
 width:auto!important;height:auto!important;border:0!important;box-shadow:none!important;background:none!important
}
#mapBox .station-node.current{
 box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 5px 0 #073269,0 0 0 5px rgba(255,211,79,.34),0 0 22px #ffd34f!important
}
#mapBox .station-node.current span{animation:partyStagePulse 1s ease-in-out infinite!important}
#mapBox .station-node.done{
 background:linear-gradient(180deg,#26c969,#118c46)!important;border-color:#f5ffbd!important
}
#mapBox .station-node.done span{
 background:radial-gradient(circle at 30% 20%,#dffff0,#3bd778 48%,#15904b 100%)!important;
 color:#fff!important
}
#mapBox .station-node.locked{
 filter:none!important;opacity:.72!important;
 background:linear-gradient(180deg,#8d9aa8,#616d79)!important;border-color:#e4e8eb!important
}

/* Raised board spaces */
#mapBox .path-dot.stage-checkpoint{
 width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;
 z-index:10!important;overflow:visible!important
}
#mapBox .path-dot.stage-checkpoint span{
 width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
 border:3px solid #fff!important;border-radius:50%!important;
 background:radial-gradient(circle at 34% 24%,#f8fbff 0 12%,#a8b3bd 30%,#65717d 76%,#414a54 100%)!important;
 color:#fff!important;font-size:13px!important;font-weight:1000!important;
 box-shadow:0 0 0 3px #737f8a,0 6px 0 #48515a,0 10px 14px rgba(0,0,0,.32)!important;
 text-shadow:0 1px 2px rgba(0,0,0,.4)!important
}
#mapBox .path-dot.stage-checkpoint::before{
 content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
 width:34px;height:9px;border-radius:50%;background:rgba(0,26,51,.26);filter:blur(2px);z-index:-1
}
#mapBox .path-dot.stage-checkpoint::after{
 content:attr(data-step)!important;position:absolute!important;left:50%!important;top:calc(100% + 5px)!important;
 transform:translateX(-50%)!important;width:18px!important;height:18px!important;min-width:18px!important;
 display:grid!important;place-items:center!important;border-radius:50%!important;
 background:#073e7c!important;color:#fff!important;border:2px solid #fff!important;
 font-size:9px!important;font-weight:1000!important;box-shadow:0 3px 5px rgba(0,0,0,.24)!important
}
#mapBox .path-dot.done span{
 background:radial-gradient(circle at 30% 20%,#effff4 0 10%,#35d36d 30%,#16934a 78%,#0d6d35 100%)!important;
 box-shadow:0 0 0 3px #dfffe8,0 6px 0 #0d7538,0 10px 14px rgba(0,0,0,.25)!important;
 color:#fff!important
}
#mapBox .path-dot.done::after{background:#138b43!important}
#mapBox .path-dot.current-checkpoint span,#mapBox .path-dot.next span{
 background:radial-gradient(circle at 32% 20%,#fffde5 0 12%,#ffe04e 32%,#f3b51b 76%,#bf7700 100%)!important;
 color:#684600!important;
 box-shadow:0 0 0 3px #fff7c1,0 6px 0 #bd7a07,0 0 0 9px rgba(255,212,57,.28),0 0 20px #ffd23f!important;
 animation:partyCheckpointPulse 1s ease-in-out infinite!important
}
#mapBox .path-dot.current-checkpoint::after,#mapBox .path-dot.next::after{background:#d7980b!important}
#mapBox .path-dot.tomorrow span{
 background:radial-gradient(circle at 32% 20%,#fffce7,#ffd14d 40%,#9c6b11 100%)!important
}
#mapBox .path-dot.armed span{transform:scale(1.1)!important}

/* Mamoun is a large 3D game token */
#mapBox .mamoun-token-wrap{
 width:calc(var(--mw)*.092)!important;height:calc(var(--mw)*.132)!important;
 min-width:72px!important;min-height:104px!important;z-index:14!important;
 filter:drop-shadow(0 15px 9px rgba(0,0,0,.3))!important
}
#mapBox .mamoun-token-wrap::after{
 bottom:-1%!important;width:58%!important;height:9%!important;background:rgba(5,30,45,.32)!important
}
#mapBox .mamoun-token-wrap #explorer{
 filter:saturate(1.08) brightness(1.04)!important;
 animation:partyMamounIdle 1.25s ease-in-out infinite!important
}
#mapBox .mamoun-token-wrap.moving #explorer{animation:partyMamounRun .24s ease-in-out infinite!important}
#mapBox .mamoun-token-wrap.celebrate #explorer{animation:partyMamounWin .9s cubic-bezier(.16,.84,.29,1.25) both!important}
#mapBox .mamoun-game-mood{
 top:-3%!important;padding:6px 10px!important;
 background:linear-gradient(180deg,#fff,#fff4c9)!important;border:2px solid #ffd34f!important;
 color:#074681!important;box-shadow:0 4px 0 #d69c12,0 8px 14px rgba(0,0,0,.2)!important;
 font-size:11px!important
}

/* Mission panel = ivory + blue + gold game card */
#worldScreen .mission-panel{
 top:14px!important;right:14px!important;width:min(330px,29vw)!important;
 padding:14px!important;border:4px solid #f3bb2a!important;border-radius:28px!important;
 background:linear-gradient(180deg,#fffef4,#fff7df)!important;
 box-shadow:0 0 0 3px #fff,0 10px 0 #0a4d8f,0 20px 32px rgba(0,28,61,.34)!important;
 overflow:hidden!important
}
#worldScreen .mission-panel::before{
 content:"خريطة المغامرة";
 display:block;margin:-14px -14px 12px;padding:13px 16px;
 background:linear-gradient(180deg,#1168b5,#073d7a);
 color:#fff;border-bottom:3px solid #f3bb2a;
 font-size:21px;font-weight:1000;text-align:center;text-shadow:0 2px 0 rgba(0,0,0,.2)
}
#worldScreen .mission-zone{
 display:inline-flex!important;padding:5px 10px!important;border-radius:999px!important;
 background:#fff0b4!important;color:#8a5a00!important;font-size:11px!important;font-weight:1000!important
}
#worldScreen .mission-panel h3{
 margin:7px 0 4px!important;font-size:24px!important;color:#073f7d!important
}
#worldScreen .mission-panel>strong{color:#a86d00!important;font-size:13px!important}
#worldScreen .mission-panel p{font-size:12px!important;line-height:1.45!important;margin:6px 0!important;color:#345b75!important}
#worldScreen .can-do{
 padding:9px 10px!important;margin-top:8px!important;border-radius:15px!important;
 background:#fff!important;border:2px dashed #efb326!important;color:#684b12!important;font-size:12px!important
}
#worldScreen .mission-list{margin-top:8px!important}
#worldScreen .ml-head{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:7px!important;font-size:12px!important}
#worldScreen .ml-item{
 width:100%!important;min-height:48px!important;margin:6px 0!important;padding:7px 9px!important;
 display:grid!important;grid-template-columns:38px minmax(0,1fr) auto!important;align-items:center!important;gap:7px!important;
 background:linear-gradient(180deg,#fff,#fffaf0)!important;border:2px solid #eed59b!important;border-radius:15px!important;
 box-shadow:0 3px 0 #e4c170!important;color:#0b477f!important;text-align:right!important
}
#worldScreen .ml-item.next{border-color:#f1b923!important;box-shadow:0 3px 0 #cc8b0b,0 0 0 3px rgba(255,209,61,.16)!important}
#worldScreen .ml-item.done{border-color:#7bd49c!important;background:linear-gradient(180deg,#f4fff7,#e9faef)!important;box-shadow:0 3px 0 #42a866!important}
#worldScreen .ml-item.locked{filter:grayscale(.65);opacity:.63!important}
#worldScreen .ml-icon{font-size:21px!important}
#worldScreen .ml-text b{font-size:12px!important}
#worldScreen .ml-text .gloss{font-size:9px!important}
#worldScreen .mission-bottom>span{
 background:linear-gradient(180deg,#fff8d6,#ffe99a)!important;border:2px solid #f2c442!important;color:#775100!important;
 border-radius:14px!important;padding:7px!important
}
#worldScreen #enterStageBtn{
 min-height:54px!important;border-radius:18px!important;
 background:linear-gradient(180deg,#38da68,#14a447)!important;
 border:3px solid #e8ffe8!important;border-bottom:6px solid #087c35!important;
 box-shadow:0 5px 0 #075d2b,0 8px 16px rgba(0,83,38,.22)!important;
 color:#fff!important;font-size:18px!important
}

/* Bottom nav floating game dock */
#worldScreen .game-nav{
 position:absolute!important;left:50%!important;bottom:12px!important;transform:translateX(-50%)!important;
 width:min(680px,72vw)!important;height:66px!important;padding:5px 7px!important;
 display:flex!important;gap:4px!important;
 background:linear-gradient(180deg,#0b5ca7,#07386f)!important;
 border:3px solid #f4bf2c!important;border-radius:22px!important;
 box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 7px 0 #052d5e,0 13px 24px rgba(0,24,52,.28)!important;
 z-index:25!important
}
#worldScreen .game-nav button{
 min-width:0!important;flex:1!important;border-radius:14px!important;color:#eaf7ff!important;font-size:20px!important
}
#worldScreen .game-nav button span{font-size:10px!important;font-weight:900!important}
#worldScreen .game-nav button.active{
 background:linear-gradient(180deg,#ffd94f,#eaaa12)!important;color:#5b3b00!important;
 box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 4px 0 #b97800!important
}

/* ---------- ACTIVITY SCREENS: real interactive 3D game ---------- */
#stageScreen{
 background:linear-gradient(180deg,#168fbd,#075f8a)!important
}
#stageScreen .stage-bg{
 background-image:
  linear-gradient(rgba(0,71,111,.08),rgba(0,44,76,.2)),
  url('bahrain-world.webp?v=33')!important;
 background-size:cover!important;background-position:center!important;
 filter:saturate(1.15) brightness(1.04)!important
}
#stageScreen .stage-layout{
 grid-template-columns:minmax(190px,240px) minmax(0,1fr)!important;
 gap:18px!important;width:min(1320px,96vw)!important;padding:14px 0 20px!important
}
#stageScreen .coach{
 background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,247,219,.95))!important;
 border:4px solid #f3bb2c!important;border-radius:30px!important;
 box-shadow:0 0 0 3px #fff,0 8px 0 #0b4a85,0 17px 30px rgba(0,32,64,.27)!important;
 padding:13px!important
}
#stageScreen .coach img{
 width:min(185px,100%)!important;max-height:260px!important;
 filter:drop-shadow(0 10px 7px rgba(0,0,0,.18))!important;
 animation:partyMamounCoach 1.8s ease-in-out infinite!important
}
#stageScreen .coach-talk{
 background:linear-gradient(180deg,#fff,#edf9ff)!important;border:2px solid #9dddf7!important;
 border-radius:18px!important;box-shadow:0 4px 0 #c8eaf7!important
}
#stageScreen .coach-talk b{color:#07529b!important}
#stageScreen .skill-progress .bar{
 height:15px!important;border:2px solid #fff!important;background:#c6d7e3!important;
 box-shadow:inset 0 2px 4px rgba(0,0,0,.15)!important
}
#stageScreen .skill-progress .bar b{background:linear-gradient(90deg,#24c867,#ffd34f)!important}

#stageScreen .activity-board,#writeScreen .activity-board,#checkScreen .activity-board,#labScreen .lab-content{
 background:
  radial-gradient(circle at 50% 0,rgba(255,255,255,.9),transparent 23%),
  linear-gradient(180deg,#fffdf3 0%,#fff6d9 100%)!important;
 border:6px solid #c88b1a!important;
 border-radius:34px!important;
 box-shadow:0 0 0 4px #ffe78d,0 9px 0 #87570d,0 20px 36px rgba(0,27,56,.32),inset 0 2px 0 #fff!important;
 position:relative!important;
}
#stageScreen .activity-board::before,#writeScreen .activity-board::before,#checkScreen .activity-board::before{
 content:"";position:absolute;inset:7px;border:2px solid rgba(137,82,12,.16);border-radius:25px;pointer-events:none
}
#stageScreen .activity-title h2,#writeScreen .activity-title h2,#checkScreen .activity-title h2{
 display:inline-block!important;padding:9px 23px!important;margin:3px auto 7px!important;
 background:linear-gradient(180deg,#136dc1,#074384)!important;color:#fff!important;
 border:3px solid #72c8ff!important;border-radius:22px!important;
 box-shadow:inset 0 2px 0 rgba(255,255,255,.27),0 5px 0 #052f66!important;
 text-shadow:0 2px 0 rgba(0,0,0,.2)!important
}
#stageScreen .cefr-tag{
 background:linear-gradient(180deg,#fff7c9,#ffe284)!important;color:#805500!important;border:2px solid #efb627!important;
 border-radius:999px!important;font-weight:1000!important
}
#stageScreen .activity-target{
 background:linear-gradient(180deg,#fff,#fff8e8)!important;
 border:3px solid #e8c777!important;border-radius:24px!important;
 box-shadow:inset 0 2px 0 #fff,0 6px 0 #d8b35c!important
}

/* Play / slow / generic controls */
#stageScreen .control-btn,#writeScreen .control-btn,#checkScreen .control-btn{
 background:linear-gradient(180deg,#1da5ee,#0875c5)!important;
 color:#fff!important;border:3px solid #bde9ff!important;border-bottom:6px solid #055b9e!important;
 box-shadow:0 5px 0 #06497d,0 8px 13px rgba(0,53,101,.18)!important;border-radius:18px!important
}
#stageScreen .control-btn:nth-child(even){background:linear-gradient(180deg,#ffb32b,#eb7c0f)!important;border-color:#ffe5aa!important;border-bottom-color:#af5200!important}

/* Multiple choice = 3D colored pads like the reference */
#stageScreen .choice-grid{gap:16px!important}
#stageScreen .choice{
 min-height:82px!important;border:4px solid #fff!important;border-radius:22px!important;
 color:#fff!important;text-shadow:0 2px 0 rgba(0,0,0,.18)!important;
 box-shadow:inset 0 3px 0 rgba(255,255,255,.28),0 8px 0 #075294,0 12px 18px rgba(0,38,77,.22)!important
}
#stageScreen .choice:nth-child(3n+1){background:linear-gradient(180deg,#35ce68,#149447)!important;box-shadow:inset 0 3px 0 rgba(255,255,255,.28),0 8px 0 #0c6d34,0 12px 18px rgba(0,38,77,.22)!important}
#stageScreen .choice:nth-child(3n+2){background:linear-gradient(180deg,#259ee9,#0866b7)!important}
#stageScreen .choice:nth-child(3n+3){background:linear-gradient(180deg,#ffb22c,#ec7f10)!important;box-shadow:inset 0 3px 0 rgba(255,255,255,.28),0 8px 0 #ac5200,0 12px 18px rgba(0,38,77,.22)!important}
#stageScreen .choice.correct{background:linear-gradient(180deg,#45dd78,#149847)!important;border-color:#e8ffe8!important}
#stageScreen .choice.wrong{background:linear-gradient(180deg,#ff7169,#d93832)!important;border-color:#ffe1df!important;box-shadow:0 8px 0 #9b221e!important}

/* Letter hunt = glossy floating bubbles */
#stageScreen .hunt-letter{
 border:4px solid #fff6c3!important;border-radius:50%!important;
 background:radial-gradient(circle at 32% 22%,#fffbd1 0 12%,#ffd635 28%,#f19b12 68%,#a95b00 100%)!important;
 box-shadow:0 0 0 4px #ffc51f,0 8px 0 #a76500,0 12px 18px rgba(0,0,0,.2)!important
}
#stageScreen .hunt-grid{gap:16px!important}
#stageScreen .bubble{
 border:3px solid rgba(255,255,255,.94)!important;
 background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.95) 0 13%,rgba(214,246,255,.83) 29%,rgba(88,193,235,.58) 76%,rgba(12,107,170,.66) 100%)!important;
 box-shadow:inset -8px -10px 15px rgba(0,87,150,.18),inset 8px 8px 15px rgba(255,255,255,.5),0 8px 0 rgba(6,85,136,.35),0 12px 18px rgba(0,40,74,.18)!important;
 animation:partyBubble 2.4s ease-in-out infinite!important
}
#stageScreen .bubble.pop{
 background:radial-gradient(circle at 30% 22%,#fffbd1,#4cdb7b 45%,#168b46)!important
}

/* Syllables, words, sentence tokens */
#stageScreen .syl-tile,#stageScreen .token,#stageScreen .letter-tile,#stageScreen .match-card{
 border:3px solid #fff!important;border-radius:19px!important;
 background:linear-gradient(180deg,#168fe0,#075aa7)!important;color:#fff!important;
 box-shadow:inset 0 2px 0 rgba(255,255,255,.28),0 6px 0 #05437e,0 10px 15px rgba(0,40,75,.18)!important;
 text-shadow:0 2px 0 rgba(0,0,0,.16)!important
}
#stageScreen .sentence-slots{
 background:linear-gradient(180deg,#fff9db,#f7e5a8)!important;border:3px dashed #d69c1a!important;
 box-shadow:inset 0 3px 8px rgba(127,81,0,.09)!important
}
#stageScreen .goal-card{
 background:linear-gradient(180deg,#effaff,#dff2fb)!important;border:2px solid #9fdaf5!important;border-radius:20px!important;padding:10px!important
}

/* Race = glossy party race track */
#stageScreen .race-track{
 height:170px!important;border:7px solid #f3bd31!important;border-radius:28px!important;
 background:linear-gradient(180deg,#34485c,#17293a)!important;
 box-shadow:0 0 0 4px #fff,0 8px 0 #84580d,0 14px 23px rgba(0,0,0,.24)!important
}
#stageScreen .player-car,#stageScreen .rival-car{font-size:52px!important;filter:drop-shadow(0 5px 3px rgba(0,0,0,.3))}

/* Feedback and completion */
#stageScreen .feedback{
 border:2px solid #99d7ef!important;border-radius:17px!important;background:linear-gradient(180deg,#f4fcff,#e8f7fd)!important;
 box-shadow:0 4px 0 #c5e5f0!important
}
#stageScreen .feedback.good{background:linear-gradient(180deg,#f2fff5,#dcf7e5)!important;border-color:#82d59f!important;box-shadow:0 4px 0 #66bc84!important}
#stageScreen .feedback.bad{background:linear-gradient(180deg,#fff7f5,#ffe5e1)!important;border-color:#eca49e!important;box-shadow:0 4px 0 #d77a73!important}
#stageScreen .stage-finish .trophy{filter:drop-shadow(0 9px 5px rgba(0,0,0,.22))!important}
#stageScreen .stage-finish{
 border-radius:28px!important;background:radial-gradient(circle at 50% 35%,rgba(255,224,77,.34),transparent 45%)!important
}

/* ---------- Writing = wood + dark learning board ---------- */
#writeScreen,#checkScreen,#labScreen{
 background:
  linear-gradient(rgba(0,79,124,.1),rgba(0,49,82,.25)),
  url('bahrain-world.webp?v=33') center/cover!important
}
#writeScreen .trace-wrap,#labScreen .trace-wrap{
 background:linear-gradient(180deg,#0b4f91,#06386d)!important;
 border:10px solid #9b601b!important;
 box-shadow:0 0 0 4px #e0a33b,0 8px 0 #5e360d,0 16px 25px rgba(0,0,0,.25),inset 0 0 0 3px rgba(255,255,255,.1)!important;
 border-radius:26px!important
}
#writeScreen .trace-wrap::before,#labScreen .trace-wrap::before{border-color:rgba(255,255,255,.25)!important}
#writeScreen .trace-actions .big-btn,#labScreen .trace-actions .big-btn{
 border:3px solid #fff!important;border-radius:20px!important;box-shadow:0 6px 0 rgba(0,52,91,.3)!important
}

/* ---------- Profile/admin/lab cards keep same game language ---------- */
#profileScreen,#adminScreen,#labScreen,#writeScreen,#checkScreen{
 background-color:#0a6e99!important
}
#profileScreen .profile-content,#adminScreen .admin-content,#labScreen .lab-content{
 border-radius:30px!important
}
#profileScreen .metric,#profileScreen .skill-card,#adminScreen .admin-card,#adminScreen .metric{
 border:3px solid #f1c24b!important;border-radius:20px!important;
 background:linear-gradient(180deg,#fffef5,#fff7df)!important;
 box-shadow:0 5px 0 #d4a23b,0 10px 18px rgba(0,49,86,.12)!important
}

/* ---------- AI panel: same blue/gold game UI ---------- */
.mamoun-buddy-panel{
 border:5px solid #f1bc2c!important;border-radius:32px!important;
 box-shadow:0 0 0 4px #fff,0 12px 0 #06417d,0 25px 48px rgba(0,23,54,.38)!important;
 overflow:hidden!important
}
.mamoun-buddy-panel .mb-head{
 background:linear-gradient(180deg,#126fc3,#073e7c)!important;border-bottom:4px solid #f1bc2c!important;color:#fff!important
}
.mamoun-buddy-panel .mb-main-action{
 background:linear-gradient(180deg,#34d96a,#149e46)!important;border:3px solid #eaffed!important;
 box-shadow:0 6px 0 #087832,0 10px 17px rgba(0,82,37,.2)!important
}
.mamoun-buddy-panel .mb-mini{
 background:linear-gradient(180deg,#1b93e2,#0966b1)!important;color:#fff!important;border:2px solid #b9e7ff!important;
 box-shadow:0 4px 0 #064a88!important
}

/* ---------- Start screen gets the same game identity ---------- */
#startScreen .v36-intro-card{
 border-color:#f3bd2e!important;
 box-shadow:0 0 0 3px #fff,0 9px 0 #07508e,0 20px 42px rgba(0,31,67,.32)!important
}
#startScreen .v36-copy h1{color:#074681!important;text-shadow:0 2px 0 #fff!important}
#startScreen .v36-start-btn{
 border:3px solid #eaffea!important;border-bottom:6px solid #087a33!important;
 box-shadow:0 6px 0 #075e29,0 11px 20px rgba(0,80,37,.18)!important
}
#startScreen #heroAiBtn{
 background:linear-gradient(180deg,#1d91e2,#0965b2)!important;border:3px solid #bde9ff!important;
 box-shadow:0 5px 0 #064a86,0 9px 16px rgba(0,47,91,.18)!important
}

/* ---------- animations ---------- */
@keyframes partyCheckpointPulse{
 0%,100%{transform:scale(1)}
 50%{transform:scale(1.18)}
}
@keyframes partyStagePulse{
 0%,100%{transform:translateY(-50%) scale(1)}
 50%{transform:translateY(-50%) scale(1.13)}
}
@keyframes partyMamounIdle{
 0%,100%{transform:translateY(0) rotate(-1.5deg) scale(1)}
 28%{transform:translateY(-8px) rotate(1.8deg) scale(1.025)}
 55%{transform:translateY(-2px) rotate(-.7deg) scale(1.01)}
 78%{transform:translateY(-6px) rotate(1.1deg) scale(1.02)}
}
@keyframes partyMamounRun{
 0%,100%{transform:translateY(0) rotate(-6deg) scale(1.04)}
 50%{transform:translateY(-13px) rotate(6deg) scale(1.08)}
}
@keyframes partyMamounWin{
 0%{transform:translateY(0) scale(1) rotate(0)}
 30%{transform:translateY(-27px) scale(1.13) rotate(-8deg)}
 55%{transform:translateY(-8px) scale(1.08) rotate(8deg)}
 80%{transform:translateY(-16px) scale(1.1) rotate(-4deg)}
 100%{transform:translateY(0) scale(1) rotate(0)}
}
@keyframes partyMamounCoach{
 0%,100%{transform:translateY(0) rotate(-1deg)}
 50%{transform:translateY(-8px) rotate(1.5deg)}
}
@keyframes partyBubble{
 0%,100%{transform:translateY(0) scale(1)}
 50%{transform:translateY(-7px) scale(1.025)}
}

/* ---------- responsive ---------- */
@media(max-width:1000px){
 #worldScreen .mission-panel{width:300px!important;max-width:31vw!important}
 #mapBox .station-node{min-width:98px!important;padding:6px 10px 6px 34px!important}
 #mapBox .station-node b{font-size:11px!important}
 #mapBox .station-node span{width:34px!important;height:34px!important;left:-14px!important;font-size:16px!important}
 #mapBox .mamoun-token-wrap{width:calc(var(--mw)*.085)!important;height:calc(var(--mw)*.122)!important}
 #stageScreen .stage-layout{grid-template-columns:180px 1fr!important}
 #stageScreen .coach img{width:130px!important}
}
@media(max-width:760px){
 #app .top-hud{height:auto!important;min-height:68px!important;padding:7px!important}
 #app .hud-pill{padding:7px 9px!important;font-size:12px!important;min-height:42px!important}
 #worldScreen .mission-panel{
  width:calc(100% - 16px)!important;max-width:none!important;right:8px!important;left:8px!important;
  top:auto!important;bottom:84px!important;max-height:45%!important;overflow:auto!important;
 }
 #worldScreen .game-nav{width:calc(100% - 18px)!important;bottom:8px!important;height:64px!important}
 #mapBox .station-node{min-width:75px!important;padding:5px 7px 5px 28px!important;border-width:2px!important}
 #mapBox .station-node b{font-size:9px!important}
 #mapBox .station-node span{width:29px!important;height:29px!important;left:-11px!important;font-size:13px!important}
 #mapBox .path-dot.stage-checkpoint{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
 #mapBox .path-dot.stage-checkpoint span{width:25px!important;height:25px!important;min-width:25px!important;min-height:25px!important}
 #mapBox .path-dot.stage-checkpoint::after{display:none!important}
 #mapBox .mamoun-token-wrap{min-width:52px!important;min-height:76px!important}
 #stageScreen .stage-layout{display:block!important;width:94vw!important}
 #stageScreen .coach{display:none!important}
 #stageScreen .activity-board{border-width:4px!important;border-radius:24px!important;padding:15px!important}
 #stageScreen .choice-grid{gap:9px!important}
 #stageScreen .choice{min-height:64px!important;border-radius:17px!important}
}

@media(prefers-reduced-motion:reduce){
 #mapBox .mamoun-token-wrap #explorer,#stageScreen .coach img,#stageScreen .bubble,#mapBox .path-dot.current-checkpoint span{
  animation:none!important
 }
}


/* V36.14.1 — restore clean writing/tracing UI */
#writeScreen,#labScreen{
  background:
    linear-gradient(rgba(238,249,255,.86),rgba(248,252,255,.92)),
    url('bahrain-world.webp?v=33') center/cover!important;
}
#writeScreen .activity-board,
#labScreen .lab-content{
  background:rgba(255,255,255,.97)!important;
  border:4px solid #d4e8ef!important;
  border-radius:30px!important;
  box-shadow:0 16px 36px rgba(7,52,84,.18)!important;
}
#writeScreen .activity-board::before{display:none!important}
#writeScreen .activity-title h2{
  background:none!important;color:#0d3f65!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;text-shadow:none!important;
  padding:0!important
}
#writeScreen .trace-wrap,
#labScreen .trace-wrap{
  position:relative!important;width:min(360px,82vw)!important;aspect-ratio:1!important;
  margin:14px auto 8px!important;border-radius:28px!important;background:#fff!important;
  border:4px solid #cfe3ea!important;
  box-shadow:inset 0 0 0 10px #f6fbfd,0 10px 24px rgba(13,63,101,.12)!important;
  overflow:hidden!important
}
#writeScreen .trace-wrap::before,
#labScreen .trace-wrap::before{
  content:""!important;position:absolute!important;inset:auto 8% 34% 8%!important;
  border-top:2px dashed #dfeaf0!important;display:block!important
}
#writeScreen .trace-wrap.traced,
#labScreen .trace-wrap.traced{
  border-color:#42b966!important;
  box-shadow:inset 0 0 0 10px #eafaf0,0 10px 24px rgba(13,63,101,.12)!important
}
#writeScreen .trace-hint,#labScreen .trace-hint{color:#efb831!important;filter:none!important}
#writeScreen .trace-actions .big-btn,#labScreen .trace-actions .big-btn{
  border-radius:18px!important;box-shadow:0 7px 14px rgba(7,47,73,.14)!important
}
#writeScreen .trace-actions .big-btn.primary,#labScreen .trace-actions .big-btn.primary{
  background:linear-gradient(180deg,#29cb70,#159f4e)!important;
  border:0!important;border-bottom:4px solid #0a7b38!important;color:#fff!important
}
#writeScreen .trace-actions .big-btn.ghost,#labScreen .trace-actions .big-btn.ghost{
  background:#fff!important;color:#0d3f65!important;border:2px solid #bcdbe6!important
}
#writeScreen .feedback{border-radius:18px!important;box-shadow:none!important}
#writeScreen .letter-card,#writeScreen .write-intro{background:#fff!important}
@media(max-width:760px){
  #writeScreen .trace-wrap,#labScreen .trace-wrap{width:min(320px,80vw)!important}
}


/* V36.15 — crisp start map: keep the real map sharp instead of stretching/zooming it */
#startScreen .v36-map-card{
  background:#0a6f97!important;
  isolation:isolate;
}
#startScreen .v36-map-card::before{
  content:"";
  position:absolute;
  inset:-3%;
  z-index:0;
  background:url('bahrain-home-map.webp?v=365') center/cover no-repeat;
  filter:blur(14px) saturate(1.08) brightness(.88);
  transform:scale(1.06);
  opacity:.48;
  pointer-events:none;
}
#startScreen .v36-map-card img{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  filter:none!important;
  image-rendering:auto!important;
  backface-visibility:hidden;
}
#startScreen .v36-map-card::after{
  z-index:2!important;
  background:
    linear-gradient(90deg,rgba(2,33,66,.34) 0%,rgba(2,33,66,.06) 29%,rgba(2,33,66,0) 52%),
    linear-gradient(180deg,rgba(2,30,60,.06),transparent 18%,transparent 82%,rgba(2,30,60,.14))!important;
}
@media(max-width:760px){
 #startScreen .v36-map-card img{object-fit:cover!important;transform:none!important}
}


/* V36.18 — resume journey mobile fix */
#startScreen .resume-box{
 position:relative!important;
 z-index:40!important;
 pointer-events:auto!important;
 cursor:pointer!important;
 display:block;
}
#startScreen .resume-box *{pointer-events:auto!important}
#startScreen .resume-copy{
 font-size:16px!important;
 margin-bottom:10px!important;
 color:#173d64!important;
}
#startScreen .resume-journey-btn{
 width:100%!important;
 min-height:56px!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 touch-action:manipulation!important;
 -webkit-tap-highlight-color:rgba(25,167,216,.12)!important;
 cursor:pointer!important;
}
@media(max-width:760px){
 #startScreen .resume-box{
  margin:0 18px 18px!important;
 }
 #startScreen .resume-journey-btn{
  min-height:62px!important;
  font-size:20px!important;
 }
}


/* V36.19 — resume inside actions: avoids iOS sticky/scroll hitbox issue */
#startScreen .v36-actions #resumeBox{
 order:-1!important;
 margin:0 0 2px!important;
 padding:0!important;
 width:100%!important;
 background:transparent!important;
 border:0!important;
 box-shadow:none!important;
 overflow:visible!important;
 position:relative!important;
 z-index:100!important;
 pointer-events:auto!important;
}
#startScreen .v36-actions #resumeBox.hidden{display:none!important}
#startScreen .resume-journey-btn{
 width:100%!important;
 min-height:72px!important;
 padding:10px 16px!important;
 border-radius:18px!important;
 border:3px solid #bde8ff!important;
 border-bottom:6px solid #07528f!important;
 background:linear-gradient(180deg,#2b9de8,#0870bd)!important;
 color:#fff!important;
 box-shadow:0 6px 0 #06477c,0 10px 18px rgba(0,58,105,.22)!important;
 display:flex!important;
 flex-direction:column!important;
 align-items:center!important;
 justify-content:center!important;
 gap:2px!important;
 font-size:15px!important;
 font-weight:900!important;
 line-height:1.25!important;
 pointer-events:auto!important;
 touch-action:manipulation!important;
 -webkit-user-select:none!important;
 user-select:none!important;
 position:relative!important;
 z-index:101!important;
}
#startScreen .resume-journey-btn strong{
 display:block!important;
 font-size:22px!important;
 color:#fff!important;
}
#startScreen .resume-journey-btn.loading{opacity:.78!important}
#startScreen .v36-actions{pointer-events:auto!important}
#startScreen .v36-actions>*{pointer-events:auto!important}

@media(max-width:760px){
 #startScreen .resume-journey-btn{min-height:76px!important}
 #startScreen .resume-journey-btn strong{font-size:23px!important}
}


/* =========================================================
   V36.20 — clean two-column start layout
   Desktop: real panel + full map, no blurred empty sidebars.
   ========================================================= */
@media(min-width:761px){
  #startScreen.v36-start{
    width:100vw!important;
    height:100vh!important;
    min-height:680px!important;
    overflow:hidden!important;
    background:linear-gradient(180deg,#0b7898 0%,#075f82 100%)!important;
  }

  #startScreen .v36-home{
    width:100vw!important;
    height:100vh!important;
    min-height:680px!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
  }

  /* Left control card */
  #startScreen .v36-intro-card{
    left:28px!important;
    top:96px!important;
    bottom:22px!important;
    width:410px!important;
    min-width:410px!important;
    max-width:410px!important;
    max-height:calc(100vh - 118px)!important;
    z-index:12!important;
  }

  /* Map gets its own real column instead of being a contained image
     inside the whole viewport. */
  #startScreen .v36-map-card{
    position:absolute!important;
    top:84px!important;
    right:18px!important;
    bottom:18px!important;
    left:458px!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    border-radius:28px!important;
    border:4px solid rgba(255,255,255,.82)!important;
    box-shadow:0 16px 38px rgba(0,31,63,.28)!important;
    overflow:hidden!important;
    background:#0c7395!important;
    isolation:isolate!important;
  }

  /* Remove the fake blurred extension that created the empty-looking
     bands at the screen edges. */
  #startScreen .v36-map-card::before{
    display:none!important;
    content:none!important;
  }

  #startScreen .v36-map-card::after{
    z-index:2!important;
    background:
      linear-gradient(90deg,rgba(4,39,67,.08),transparent 18%),
      linear-gradient(180deg,rgba(4,39,67,.05),transparent 14%,transparent 84%,rgba(4,39,67,.08))!important;
  }

  #startScreen .v36-map-card img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:none!important;
    filter:saturate(1.06) contrast(1.02)!important;
    display:block!important;
  }

  #startScreen .v36-map-label{
    top:22px!important;
    right:22px!important;
    z-index:5!important;
  }

  /* Header stays clean above both columns */
  #startScreen .v36-header{
    inset:14px 24px auto 24px!important;
  }

  /* Keep all controls compact enough to fit without shrinking the card */
  #startScreen .v36-intro-top{
    min-height:220px!important;
    padding-top:12px!important;
  }
  #startScreen .v36-mascot-box{
    width:150px!important;
    height:210px!important;
  }
  #startScreen .v36-copy h1{
    font-size:35px!important;
  }
  #startScreen .v36-step{
    min-height:58px!important;
  }
  #startScreen .v36-actions{
    padding-top:8px!important;
    padding-bottom:12px!important;
    gap:8px!important;
  }
  #startScreen .v36-start-btn{
    min-height:54px!important;
    font-size:20px!important;
  }
  #startScreen .resume-journey-btn{
    min-height:62px!important;
  }
}

/* Slightly tighter two-column geometry for 761–1100px */
@media(min-width:761px) and (max-width:1100px){
  #startScreen .v36-intro-card{
    left:16px!important;
    width:350px!important;
    min-width:350px!important;
    max-width:350px!important;
  }
  #startScreen .v36-map-card{
    left:382px!important;
    right:12px!important;
  }
  #startScreen .v36-mascot-box{
    width:132px!important;
    height:190px!important;
  }
  #startScreen .v36-copy{
    padding-left:104px!important;
  }
  #startScreen .v36-copy h1{
    font-size:31px!important;
  }
}

/* Phone keeps the vertical layout, but image fills its own card cleanly. */
@media(max-width:760px){
  #startScreen .v36-map-card::before{
    display:none!important;
    content:none!important;
  }
  #startScreen .v36-map-card{
    background:#0b7898!important;
  }
  #startScreen .v36-map-card img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:none!important;
    filter:saturate(1.04) contrast(1.02)!important;
  }
}


/* V36.20 — proper mobile adventure map */
@media(max-width:760px){
  #worldScreen{
    min-height:100svh!important;
    overflow:hidden!important;
    background:#07527b!important;
  }

  #worldScreen .top-hud{
    position:relative!important;
    z-index:50!important;
    min-height:72px!important;
    padding:6px 7px!important;
    gap:5px!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  #worldScreen .top-hud::-webkit-scrollbar{display:none!important}

  #worldScreen .world{
    position:relative!important;
    height:calc(100svh - 148px)!important;
    min-height:500px!important;
    overflow:hidden!important;
    background:#0b6f95!important;
    padding:0!important;
  }

  /* The blurred image is only a desktop letterbox filler. On phones it was
     becoming the whole visible screen when the map box had no dimensions. */
  #worldScreen .world::before{
    display:none!important;
    content:none!important;
    filter:none!important;
  }

  #worldScreen #mapBox{
    position:absolute!important;
    z-index:2!important;
    margin:0!important;
    border-width:3px!important;
    border-radius:20px!important;
    box-shadow:0 10px 26px rgba(0,28,58,.28)!important;
    background:#75d7ee!important;
    overflow:hidden!important;
  }

  #worldScreen #mapBox .world-art{
    width:100%!important;
    height:100%!important;
    object-fit:fill!important;
    object-position:center!important;
    transform:none!important;
    filter:saturate(1.07) contrast(1.02)!important;
    opacity:1!important;
  }

  /* Compact collapsed bottom sheet: map stays the hero of the screen. */
  #worldScreen .mission-panel{
    position:absolute!important;
    z-index:30!important;
    left:10px!important;
    right:10px!important;
    bottom:78px!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:132px!important;
    overflow:hidden!important;
    padding:32px 12px 10px!important;
    border-width:3px!important;
    border-radius:22px!important;
    box-shadow:0 7px 0 #06447e,0 13px 24px rgba(0,28,61,.28)!important;
  }

  #worldScreen .mission-panel::before{
    display:none!important;
    content:none!important;
  }

  #worldScreen .panel-toggle{
    display:block!important;
    position:absolute!important;
    top:5px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    width:auto!important;
    min-width:118px!important;
    height:25px!important;
    padding:2px 13px!important;
    border:0!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#1679ca,#07509a)!important;
    color:#fff!important;
    font-size:11px!important;
    font-weight:900!important;
    box-shadow:0 3px 0 #06386d!important;
    z-index:4!important;
  }

  #worldScreen .mission-panel:not(.expanded) #missionZone,
  #worldScreen .mission-panel:not(.expanded) #missionSkill,
  #worldScreen .mission-panel:not(.expanded) #missionDesc,
  #worldScreen .mission-panel:not(.expanded) #missionCanDo,
  #worldScreen .mission-panel:not(.expanded) #missionReward,
  #worldScreen .mission-panel:not(.expanded) .mission-list,
  #worldScreen .mission-panel:not(.expanded) .ml-head{
    display:none!important;
  }

  #worldScreen .mission-panel:not(.expanded) h3{
    margin:2px 0 7px!important;
    font-size:19px!important;
    line-height:1.1!important;
    text-align:center!important;
  }

  #worldScreen .mission-panel:not(.expanded) .mission-bottom{
    margin:0!important;
    gap:0!important;
  }

  #worldScreen .mission-panel:not(.expanded) .mission-bottom>span{
    display:none!important;
  }

  #worldScreen .mission-panel:not(.expanded) #enterStageBtn{
    width:100%!important;
    min-height:45px!important;
    padding:8px 12px!important;
    font-size:17px!important;
    border-radius:15px!important;
  }

  #worldScreen .mission-panel.expanded{
    max-height:min(62svh,520px)!important;
    overflow-y:auto!important;
    padding:34px 13px 14px!important;
    overscroll-behavior:contain!important;
  }

  #worldScreen .mission-panel.expanded::before{display:none!important}
  #worldScreen .mission-panel.expanded h3{font-size:21px!important}

  #worldScreen .game-nav{
    position:absolute!important;
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    transform:none!important;
    width:auto!important;
    height:58px!important;
    padding:4px!important;
    border-width:2px!important;
    border-radius:18px!important;
    z-index:40!important;
  }

  #worldScreen .game-nav button{
    min-width:0!important;
    padding:3px 2px!important;
    font-size:17px!important;
    line-height:1!important;
  }
  #worldScreen .game-nav button span{
    font-size:9px!important;
    line-height:1.1!important;
    margin-top:2px!important;
  }

  #mapBox .station-node{
    min-width:64px!important;
    padding:4px 6px 4px 23px!important;
  }
  #mapBox .station-node b{font-size:8px!important}
  #mapBox .station-node span{
    width:25px!important;height:25px!important;left:-9px!important;font-size:11px!important;
  }
  #mapBox .path-dot.stage-checkpoint{
    width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;
  }
  #mapBox .path-dot.stage-checkpoint span{
    width:21px!important;height:21px!important;min-width:21px!important;min-height:21px!important;
    border-width:2px!important;font-size:9px!important;
  }
  #mapBox .mamoun-token-wrap{
    min-width:46px!important;
    min-height:68px!important;
  }
}

@media(max-width:390px){
  #worldScreen .world{height:calc(100svh - 142px)!important}
  #worldScreen .mission-panel{left:7px!important;right:7px!important;bottom:74px!important}
  #worldScreen .game-nav{left:6px!important;right:6px!important;bottom:6px!important}
}


/* V37.02 — remove baked map badge completely */
.map-badge-cover{
  position:absolute!important;
  right:0!important;
  top:0!important;
  width:26.8%!important;
  height:14%!important;
  z-index:6!important;
  pointer-events:none!important;
  background-image:url("data:image/webp;base64,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")!important;
  background-repeat:no-repeat!important;
  background-position:right top!important;
  background-size:100% 100%!important;
}
#startScreen .v36-map-card .start-map-badge-cover{
  z-index:3!important;
}
#mapBox .world-map-badge-cover{
  z-index:6!important;
}
@media(max-width:760px){
  #startScreen .v36-map-card .start-map-badge-cover{
    width:29%!important;
    height:15%!important;
  }
}