/* ============================================================
   Holiday Survival Kit — V2
   Content, mechanics & connections: V1 (holiday-survival-kit-game-EN.html)
   Visual design: V3 (Equativ dark palette, parallax winter scene, glassmorphism)
   ============================================================ */

@font-face{font-family:'Mona Sans';src:url(fonts/MonaSans-300.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Mona Sans';src:url(fonts/MonaSans-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Mona Sans';src:url(fonts/MonaSans-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Mona Sans';src:url(fonts/MonaSans-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Mona Sans';src:url(fonts/MonaSans-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Mona Sans';src:url(fonts/MonaSans-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Mona Sans';src:url(fonts/MonaSans-900.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap;}

:root{
  --eq-logo-lockup-src: url(images/logo.png);
  --eq-logo-icon-src: url(images/logo-icon.png);
  --icon-mission-1: url(images/badge-1.png);
  --icon-mission-2: url(images/badge-2.png);
  --icon-mission-3: url(images/badge-3.png);
  --icon-mission-4: url(images/badge-4.png);

  --orange:#FE5000;
  --orange-2:#FF9E73;
  --orange-3:#FFBB52;
  --orange-4:#FF9B00;
  --orange-5:#FF9869;
  --orange-6:#FF702E;
  --navy-0:#07090F;
  --navy-1:#0B1220;
  --navy-2:#131A2A;
  --ink:#111520;
  --white:#fff;
  --teal-1:#78C4EA;
  --teal-2:#46A6C6;
  --mint-1:#B6DACC;
  --mint-2:#76CBAA;
  --slate-1:#A2A8B1;
  --slate-2:#41454E;
  --slate-3:#171A22;
  --good:#3f7d55;
  --bad:#c23b2e;
  --glass-1: rgba(255,255,255,0.30);
  --glass-2: rgba(255,255,255,0.12);
  --glass-3: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.5);
  --glass-border-soft: rgba(255,255,255,0.16);
  --text-soft: #DCE7EF;
  --text-softer: #AFBCC9;
  --shadow-lg: 0 40px 100px rgba(8,11,20,0.5);
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Mona Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  background:var(--navy-0);
  color:var(--white);
  letter-spacing:0;
  overflow-x:hidden;
}
a{color:var(--orange-4);text-decoration:none;}
a:hover{color:var(--orange-3);}
button{font-family:inherit;}
h1,h2,h3,p{margin:0;}
.display{font-weight:300;letter-spacing:0;}
em{font-style:italic;}

/* ---------- keyframes ---------- */
@keyframes snowA{from{background-position:0 -420px}to{background-position:-70px 420px}}
@keyframes snowB{from{background-position:0 -520px}to{background-position:90px 520px}}
@keyframes snowC{from{background-position:0 -640px}to{background-position:-40px 640px}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes bobSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes twinkle{0%,100%{opacity:.3}50%{opacity:.9}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes sweep{from{transform:translateX(-120%)}to{transform:translateX(220%)}}
@keyframes pulseSeal{0%,100%{box-shadow:0 0 0 0 rgba(254,80,0,.55)}50%{box-shadow:0 0 0 10px rgba(254,80,0,0)}}
@keyframes shakeX{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes popIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* ============================================================
   FULL-SCREEN PARALLAX WINTER SCENE (persistent background)
   ============================================================ */
/* Outer clip: always fills the viewport exactly. */
.hsk-scene{
  position:fixed; inset:0; z-index:0; overflow:hidden; background:#0B1220;
}
/* Inner scene: fixed 16:10 aspect ratio (the ratio the artwork was drawn for), scaled up
   with the classic "background-size:cover" technique so mountains/trees/orbs never
   stretch or flatten on wider or narrower viewports — it always crops, never distorts. */
.hsk-scene-inner{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  /* Fallback sizing (used only before JS runs, or if JS is unavailable): CSS "cover"
     technique keeping the fixed 16:10 (1.6) aspect ratio the artwork was drawn for. */
  width:100vw; height:62.5vw; /* 100vw / 1.6 */
  min-height:100vh; min-width:160vh; /* 100vh * 1.6 */
  background:linear-gradient(180deg,#0E3242 0%,#17505F 24%,#2C7489 46%,#4B9CB0 60%,#8AC4D3 72%,#C9E3EE 84%,#EFF7FB 94%,#FFFFFF 100%);
}
.hsk-scene .l{position:absolute;}
.hsk-scene .sun-glow{inset:0;background:radial-gradient(70% 46% at 30% 78%, rgba(255,155,0,0.5) 0%, rgba(255,200,118,0.2) 40%, rgba(255,200,118,0) 74%);}
.hsk-scene .stars{inset:0 0 40% 0;background-image:radial-gradient(1.6px 1.6px at 30px 40px,#fff,transparent),radial-gradient(1.2px 1.2px at 140px 110px,#fff,transparent),radial-gradient(1.8px 1.8px at 250px 60px,#fff,transparent),radial-gradient(1.2px 1.2px at 330px 160px,#fff,transparent);background-size:380px 220px;opacity:.5;animation:twinkle 6s ease-in-out infinite;}

.hsk-scene .hill-l{left:-8%;bottom:14%;width:52%;height:22%;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(160deg,#4E8FA6 0%,#2C5F77 70%);}
.hsk-scene .hill-r{right:-12%;bottom:13%;width:56%;height:25%;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(200deg,#FFC876 0%,#E9A05E 55%,#B08469 100%);opacity:.85;}
.hsk-scene .hill-m{left:20%;bottom:11%;width:46%;height:18%;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(170deg,#9FD3E4 0%,#5CB2CE 80%);}

.hsk-scene .orb{position:absolute;border-radius:50%;}
.hsk-scene .orb-blue{left:26%;top:13%;width:clamp(50px,6vw,96px);aspect-ratio:1;background:linear-gradient(150deg,#78C4EA 0%,#46A6C6 65%);box-shadow:inset -12px -16px 32px rgba(0,0,0,0.28),0 30px 60px rgba(0,0,0,0.35);animation:bob 9s ease-in-out infinite;}
.hsk-scene .orb-orange{right:4%;top:12%;width:clamp(60px,7.5vw,116px);aspect-ratio:1;background:linear-gradient(150deg,#FFBB52 0%,#FF9B00 65%);box-shadow:inset -14px -18px 38px rgba(0,0,0,0.3),0 34px 70px rgba(0,0,0,0.4);animation:bobSlow 11s ease-in-out infinite;}
.hsk-scene .orb-mint{left:58%;top:11%;width:clamp(28px,3vw,50px);aspect-ratio:1;background:linear-gradient(150deg,#B6DACC 0%,#76CBAA 65%);box-shadow:inset -8px -10px 20px rgba(0,0,0,0.25),0 18px 40px rgba(0,0,0,0.3);animation:bob 7s ease-in-out infinite;}

/* Height raised from the original 13%/15% (which, combined with preserveAspectRatio="none",
   forced the pine-tree paths to stretch far wider than tall and look squashed) up to a
   percentage that keeps the rendered box close to the artwork's native ~7.2:1 ratio
   (1440x200 viewBox) at our fixed 16:10 scene aspect, so the trees keep their shape. */
.hsk-scene .trees-back{left:0;right:0;bottom:12%;width:100%;height:22%;opacity:.55;}
.hsk-scene .trees-front{left:0;right:0;bottom:2%;width:100%;height:24%;}

.hsk-scene .snowcap-l{left:-6%;bottom:3%;width:60%;height:17%;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(180deg,#F4FAFD 0%,#DCEAF4 100%);}
.hsk-scene .snowcap-r{right:-10%;bottom:2%;width:58%;height:16%;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(180deg,#FFFFFF 0%,#E4EFF7 100%);}
.hsk-scene .ground{left:-4%;right:-4%;bottom:-8%;height:17%;border-radius:50% 50% 0 0/60% 60% 0 0;background:linear-gradient(180deg,#FFFFFF 0%,#EDF4FA 60%,#DCE8F2 100%);box-shadow:0 -14px 40px rgba(255,255,255,0.35);}

.hsk-scene .snow{position:absolute;inset:0;pointer-events:none;}
.hsk-scene .snow-a{background-image:radial-gradient(2.4px 2.4px at 40px 60px,rgba(255,255,255,0.95),transparent),radial-gradient(1.8px 1.8px at 180px 200px,rgba(255,255,255,0.8),transparent),radial-gradient(2.8px 2.8px at 300px 120px,rgba(255,255,255,0.9),transparent),radial-gradient(1.6px 1.6px at 90px 330px,rgba(255,255,255,0.7),transparent);background-size:380px 420px;animation:snowA 13s linear infinite;}
.hsk-scene .snow-b{background-image:radial-gradient(3.4px 3.4px at 120px 90px,rgba(255,255,255,0.9),transparent),radial-gradient(2.4px 2.4px at 330px 260px,rgba(255,255,255,0.75),transparent),radial-gradient(3px 3px at 220px 420px,rgba(255,255,255,0.85),transparent);background-size:460px 520px;filter:blur(.6px);animation:snowB 9s linear infinite;}
.hsk-scene .snow-c{background-image:radial-gradient(5px 5px at 260px 140px,rgba(255,255,255,0.7),transparent),radial-gradient(4px 4px at 60px 380px,rgba(255,255,255,0.6),transparent);background-size:620px 640px;filter:blur(2px);animation:snowC 7s linear infinite;}
.hsk-scene .vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 45%, rgba(8,11,20,0.55) 100%);}

/* ============================================================
   APP SHELL / NAV
   ============================================================ */
.hsk-app{position:relative;z-index:1;min-height:100vh;}

.eq-logo-lockup{
  display:inline-block;
  width:118px;height:16px;
  background-image:var(--eq-logo-lockup-src);
  background-repeat:no-repeat;background-size:contain;background-position:left center;
  flex-shrink:0;
}
.eq-logo-lockup.lg{width:150px;height:20px;}
.eq-logo-lockup.sm{width:96px;height:13px;opacity:.9;}
.eq-logo-lockup.md{width:108px;height:15px;}

.eq-logo-icon{
  display:inline-block;
  width:20px;height:20px;
  background-image:var(--eq-logo-icon-src);
  background-repeat:no-repeat;background-size:contain;background-position:center;
  flex-shrink:0;
}

.app-navbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px clamp(16px,3vw,40px);
}
.app-logo-pill{
  display:flex;align-items:center;gap:10px;
  padding:9px 18px;border-radius:999px;
  background:rgba(17,21,32,0.72);border:1px solid var(--glass-border-soft);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.app-logo-text{
  font-size:clamp(11px,0.95vw,14px);font-weight:700;font-style:italic;color:#fff;
  letter-spacing:0;white-space:nowrap;text-transform:uppercase;
}
.app-navlinks{display:flex;gap:8px;flex-wrap:wrap;}
.app-navlink{
  font-size:13px;font-weight:600;color:#fff;padding:9px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.32);background:rgba(255,255,255,0.10);cursor:pointer;
  transition:background .15s ease;white-space:nowrap;
}
.app-navlink:hover{background:rgba(255,255,255,0.2);}
.app-navlink.current{color:var(--ink);background:#fff;border-color:#fff;font-weight:700;}

.screen{display:none;position:relative;min-height:100vh;padding-bottom:40px;}
.screen.active{display:block;animation:rise .35s ease-out both;}

/* ============================================================
   GLASS COMPONENTS (shared)
   ============================================================ */
.glass-card{
  background:linear-gradient(120deg,rgba(255,255,255,0.28),rgba(255,255,255,0.10));
  border:1px solid var(--glass-border);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
}
.btn-primary,.btn-solid,.cb-btn{
  font-family:inherit;font-size:14px;font-weight:700;color:#fff;
  padding:14px 22px;border:none;border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg,var(--orange),var(--orange-2));
  box-shadow:0 16px 34px rgba(254,80,0,0.4);
  transition:filter .15s ease, transform .15s ease, color .15s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.btn-primary:hover,.btn-solid:hover,.cb-btn:hover{filter:brightness(1.07);color:#F3EFEA;}
.btn-primary:active,.btn-solid:active,.cb-btn:active{transform:translateY(1px);}
.btn-ghost{
  font-family:inherit;font-size:13px;font-weight:600;color:#fff;
  padding:12px 20px;border-radius:999px;border:1px solid rgba(255,255,255,0.5);
  background:rgba(255,255,255,0.10);cursor:pointer;transition:background .15s ease;
}
.btn-ghost:hover{background:rgba(255,255,255,0.2);}

/* ============================================================
   1. LOGIN / HOME
   ============================================================ */
.login-bg{min-height:100vh;padding:0 0 40px;}
.login-topbar{display:none;}
.hero-inner{
  display:grid;grid-template-columns:1.15fr 0.85fr;gap:clamp(18px,3.5vw,52px);
  align-items:start;padding:clamp(90px,10vh,140px) clamp(24px,4vw,64px) 40px;
  max-width:1440px;margin:0 auto;
}
.hero-left{display:flex;flex-direction:column;gap:clamp(9px,1.3vw,15px);animation:rise .5s ease-out both;}
.kit-tag{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:4px;}
.kit-tag .eq-logo-lockup{width:132px;height:18px;}
.kit-name{font-size:clamp(13px,1.15vw,16px);font-weight:700;font-style:italic;color:#fff;letter-spacing:0;text-transform:uppercase;}
.hero-title{font-size:clamp(28px,4vw,52px);line-height:1.04;font-weight:300;color:#fff;text-shadow:0 8px 40px rgba(0,0,0,0.45);padding-top:clamp(18px,3vw,38px);}
.hero-title em{font-weight:300;font-style:italic;color:var(--orange-6);}
.hero-title .emoji{font-style:normal;display:inline-block;}
.hero-p{margin:0;font-size:clamp(13px,1.1vw,17px);line-height:1.45;font-weight:400;color:#fff;}
.hero-p-soft{margin:0;font-size:clamp(12px,1vw,15px);line-height:1.45;font-weight:300;color:#EAF1F6;}
.hero-p-max{max-width:38em;}
.chaos-line{font-weight:300 !important;color:#EAF1F6 !important;}
.num-list{display:flex;flex-direction:column;gap:6px;margin:4px 0;}
.num-item{display:flex;align-items:center;gap:9px;}
.num-circle{display:grid;place-items:center;width:20px;height:20px;flex:none;border-radius:50%;background:linear-gradient(180deg,rgba(228,228,228,.43),rgba(149,197,212,.33));font-size:10px;font-weight:700;color:#fff;}
.num-item span:last-child{font-size:clamp(12px,1vw,15px);font-weight:300;color:#fff;}
.hero-cta-line{font-size:clamp(13px,1.1vw,18px) !important;font-weight:800 !important;color:#fff;max-width:38em;}
.hero-stats{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px;}
.hero-stat{
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;
  background:linear-gradient(120deg,rgba(255,255,255,0.26),rgba(255,255,255,0.10));
  border:1px solid rgba(255,255,255,0.5);backdrop-filter:blur(20px);
  font-size:clamp(11px,0.95vw,14px);font-weight:600;color:#fff;
}

.hero-right{justify-self:end;width:100%;padding-top:clamp(0px,5vw,64px);}
.login-card{
  width:min(100%,400px);margin-left:auto;padding:clamp(18px,2.2vw,30px);border-radius:20px;
  background:linear-gradient(120deg,rgba(255,255,255,0.30),rgba(255,255,255,0.12));
  border:1px solid rgba(255,255,255,0.55);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  box-shadow:0 34px 90px rgba(8,11,20,0.5);
  display:flex;flex-direction:column;gap:12px;animation:rise .6s ease-out both;
}
.home-footer{display:flex;justify-content:center;align-items:center;padding:clamp(24px,4vw,48px) 0 12px;max-width:1440px;margin:0 auto;}
.widget-tag{font-size:10px;font-weight:700;color:#B2D7FB;text-transform:uppercase;letter-spacing:.08em;}
.login-title{font-size:clamp(18px,1.8vw,26px);font-weight:600;color:#fff;line-height:1.1;}
.login-tagline{font-size:clamp(12px,1vw,15px);font-weight:300;color:#E4EDF4;line-height:1.4;}
.login-step{display:none;flex-direction:column;gap:12px;}
.login-step.active{display:flex;}
.login-desc{font-size:13px;font-weight:400;color:#fff;line-height:1.5;}
.field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:#fff;}
.field input{
  font-family:inherit;font-size:14px;padding:13px 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,0.7);background:rgba(255,255,255,0.95);color:var(--ink);outline:none;
}
.field input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(254,80,0,.25);}
.field-error{display:none;font-size:12px;font-weight:600;color:#FFD3C4;background:rgba(194,59,46,.28);border:1px solid rgba(255,150,120,.5);border-radius:10px;padding:8px 12px;}
.field-error.show{display:block;}
.login-foot{font-size:11px;font-weight:300;color:rgba(255,255,255,.85);text-align:center;line-height:1.4;margin:0;}
.login-foot a{color:inherit;font-weight:600;text-decoration:underline;}
.login-foot a:hover{color:#fff;}
.signup-success{font-size:34px;text-align:center;}

/* ============================================================
   2 & 5. BOARD + BADGES SHELL
   ============================================================ */
.xmas-board{position:relative;z-index:1;padding-top:8px;}
.xh-player{display:flex;align-items:center;gap:12px;margin-right:auto;}
.xh-avatar{display:grid;place-items:center;width:clamp(38px,3.4vw,52px);aspect-ratio:1;border-radius:50%;background:linear-gradient(150deg,var(--orange-5) 0%,var(--orange) 65%);font-size:clamp(12px,1.1vw,16px);font-weight:700;color:#fff;flex-shrink:0;}
.xmas-header{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(10px,1.4vw,20px);
  margin:6px clamp(16px,3vw,40px) 0;padding:clamp(12px,1.4vw,18px) clamp(14px,2vw,24px);
  border-radius:16px;background:rgba(17,21,32,0.66);border:1px solid var(--glass-border-soft);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
}
.xh-stats{display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap;}
.xh-stat{display:flex;flex-direction:column;gap:2px;padding-right:clamp(12px,1.6vw,24px);border-right:1px solid rgba(255,255,255,0.14);}
.xh-stat:last-child{border-right:none;min-width:clamp(140px,18vw,240px);}
.xh-stat .num{font-size:clamp(16px,1.8vw,26px);font-weight:600;color:#fff;line-height:1;}
.xh-stat .lbl{font-size:10px;font-weight:600;color:#8FCADE;text-transform:uppercase;letter-spacing:.04em;}
.xh-progress-track{display:block;height:7px;border-radius:999px;background:rgba(255,255,255,0.18);overflow:hidden;}
.xh-progress-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--orange-2));transition:width .4s ease;}

.scroll-hint{text-align:center;font-size:12px;color:var(--text-softer);margin:16px 0 0;}
.mission-pill-wrap{display:flex;justify-content:center;margin:12px 0;}
.mission-pill{
  display:flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;
  background:rgba(17,21,32,0.66);border:1px solid var(--glass-border-soft);
  font-size:12px;font-weight:700;color:#fff;backdrop-filter:blur(16px);
}
.mp-dot{opacity:.5;}
.mp-title{font-weight:400;color:var(--text-soft);}

.carousel-wrap{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,22px);padding:12px clamp(12px,2vw,32px) 4px;perspective:1800px;min-height:420px;}
.carousel-arrow{
  display:grid;place-items:center;width:clamp(38px,3vw,48px);aspect-ratio:1;border-radius:50%;
  border:none;background:#fff;color:var(--ink);font-size:18px;cursor:pointer;flex-shrink:0;
  box-shadow:0 14px 30px rgba(8,11,20,0.4);transition:transform .15s ease;
}
.carousel-arrow:hover{transform:scale(1.06);}
.carousel-track{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,22px);flex:1;max-width:1100px;min-height:400px;position:relative;}

.envelope{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .35s ease, opacity .35s ease;transform:rotateY(0deg) scale(1);}
.env-card{
  width:clamp(150px,20vw,270px);padding:clamp(18px,2.2vw,26px) clamp(16px,2vw,24px);border-radius:22px;
  background:linear-gradient(120deg,rgba(255,255,255,0.20),rgba(255,255,255,0.06));
  border:1px solid rgba(255,255,255,0.34);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  box-shadow:0 30px 60px rgba(8,11,20,0.4);color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  position:relative;overflow:hidden;justify-content:flex-start;min-height:200px;
  transition:opacity .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.env-flap-lid{display:none;}
.env-eyebrow{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.8);}
.env-face{display:flex;flex-direction:column;align-items:center;gap:10px;margin:4px 0 2px;}
.env-icon-wrap{position:relative;display:grid;place-items:center;}
.env-tree{
  display:grid;place-items:center;width:clamp(46px,4.4vw,64px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(150deg,var(--orange-5) 0%,var(--orange) 65%);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  box-shadow:inset -6px -8px 16px rgba(0,0,0,0.2),0 18px 34px rgba(254,80,0,0.35);
}
.env-badge-1{background-image:var(--icon-mission-1);background-color:var(--mint-2);}
.env-badge-2{background-image:var(--icon-mission-2);background-color:var(--teal-2);}
.env-badge-3{background-image:var(--icon-mission-3);background-color:var(--orange);}
.env-badge-4{background-image:var(--icon-mission-4);background-color:var(--slate-2);}
.env-num{position:absolute;top:-6px;right:-10px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--ink);font-size:11px;font-weight:800;box-shadow:0 6px 14px rgba(0,0,0,.35);}
.env-title{font-size:13px;font-weight:600;color:#fff;line-height:1.2;}
.env-desc{display:none;font-size:11px;font-weight:300;line-height:1.45;color:#EDF3F8;text-align:left;}
.env-tags{display:none;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:2px;}
.env-tag{padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);font-size:10px;font-weight:600;color:#fff;white-space:nowrap;}
.env-cta{display:none;margin-top:8px;font-family:inherit;font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.02em;padding:10px 18px;border:none;border-radius:999px;cursor:pointer;background:linear-gradient(90deg,var(--orange),var(--orange-2));box-shadow:0 14px 30px rgba(254,80,0,.45);transition:filter .15s ease, color .15s ease;}
.env-cta:hover{filter:brightness(1.07);color:#F3EFEA;}
.env-cta:disabled{opacity:1;cursor:not-allowed;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);box-shadow:none;color:rgba(255,255,255,.6);}
.env-cta:disabled:hover{filter:none;color:rgba(255,255,255,.6);}

.envelope.locked{cursor:not-allowed;}
.envelope.locked .env-card{opacity:.6;}
.envelope.locked .env-num{animation:pulseSeal 2.2s ease-in-out infinite;}

.envelope.pos-center{transform:rotateY(0deg) scale(1);}
.envelope.pos-center .env-card{
  width:clamp(240px,28vw,400px);padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,32px);
  transform:translateZ(60px) scale(1);opacity:1;min-height:260px;
  background:linear-gradient(120deg,rgba(255,255,255,0.34),rgba(255,255,255,0.14));
  border-color:rgba(255,255,255,0.62);box-shadow:0 50px 100px rgba(8,11,20,0.55), inset 0 1px 0 rgba(255,255,255,0.6);
}
.envelope.pos-center .env-card::before{
  content:'';position:absolute;top:0;left:0;width:40%;height:100%;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.22) 50%,rgba(255,255,255,0) 100%);
  animation:sweep 5s ease-in-out infinite;
}
.envelope.pos-center .env-title{font-size:clamp(16px,1.7vw,23px);font-weight:600;margin-top:2px;}
.envelope.pos-center .env-desc,
.envelope.pos-center .env-tags,
.envelope.pos-center .env-cta{display:flex;}
.envelope.pos-prev{transform:rotateY(16deg) scale(0.9);z-index:1;}
.envelope.pos-prev .env-card{transform-origin:right center;opacity:.8;}
.envelope.pos-next{transform:rotateY(-14deg) scale(0.9);z-index:1;}
.envelope.pos-next .env-card{transform-origin:left center;opacity:.8;}
.envelope.pos-hidden{display:none;}
.envelope.available .env-num{animation:pulseSeal 2.2s ease-in-out infinite;}

.carousel-ribbon{height:6px;border-radius:999px;background:rgba(17,21,32,0.35);overflow:hidden;margin:6px clamp(24px,4vw,56px) 0;max-width:1100px;margin-left:auto;margin-right:auto;}
.carousel-ribbon-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--orange-2));transition:width .4s ease;}
.board-footer{display:flex;justify-content:center;padding:26px 0 10px;opacity:1;}
.board-footer-logo{width:96px;height:13px;}

/* ============================================================
   3 & 3b. MISSION PAGES
   ============================================================ */
.mission-timer{
  position:fixed;top:18px;right:clamp(16px,3vw,40px);z-index:5;
  display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
  background:rgba(17,21,32,0.7);border:1px solid var(--glass-border-soft);backdrop-filter:blur(20px);
  font-size:clamp(12px,1.1vw,16px);font-weight:700;color:#fff;
}
.mission-timer::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--orange-4);box-shadow:0 0 12px var(--orange-4);}
.mission-timer-unit{font-weight:400;opacity:.8;}
.mission-wrap{max-width:1180px;margin:0 auto;padding:16px clamp(16px,3vw,40px) 40px;}
.m-breadcrumb{
  font-family:inherit;font-size:13px;font-weight:600;color:#fff;padding:9px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.4);background:rgba(255,255,255,0.14);backdrop-filter:blur(16px);
  cursor:pointer;margin-bottom:16px;
}
.m-breadcrumb:hover{background:rgba(255,255,255,0.24);}
.m-header{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:clamp(16px,3vw,40px);
  padding:clamp(16px,2.2vw,28px) clamp(18px,2.6vw,32px);border-radius:20px;
  background:linear-gradient(115deg,rgba(17,21,32,0.86) 0%,rgba(20,65,55,0.78) 100%);
  border:1px solid var(--glass-border-soft);backdrop-filter:blur(20px);margin-bottom:20px;
}
.m-eyebrow{font-size:10px;font-weight:700;color:var(--mint-2);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:6px;}
.m-title{font-size:clamp(22px,2.6vw,40px);font-weight:300;color:#fff;line-height:1.08;display:block;}
.m-brief{font-size:clamp(12px,1vw,16px);font-weight:300;color:var(--text-soft);line-height:1.5;max-width:56em;display:block;margin-top:8px;}
.m-progress-row{display:flex;flex-direction:column;gap:8px;min-width:clamp(160px,20vw,260px);}
.m-progress-track{display:block;height:7px;border-radius:999px;background:rgba(255,255,255,0.18);overflow:hidden;}
.m-progress-fill{display:block;width:0%;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--orange-2));transition:width .35s ease;}
.m-progress-label{font-size:11px;font-weight:600;color:#fff;}

.puzzle-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(14px,2vw,26px);align-items:start;}
.clue-panel,.avalanche-decoder{
  display:flex;flex-direction:column;gap:clamp(10px,1.2vw,14px);padding:clamp(16px,1.8vw,24px);
  border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,0.92) 0%,rgba(255,255,255,0.72) 100%);
  border:1px solid rgba(255,255,255,0.95);backdrop-filter:blur(24px);box-shadow:0 22px 60px rgba(17,21,32,0.25);
}
.panel-title{font-size:clamp(13px,1.1vw,16px);font-weight:700;color:var(--ink);}
.panel-sub{font-size:12px;font-weight:400;color:#595959;margin-top:-6px;}
.clue-card{
  padding:clamp(12px,1.2vw,16px);border-radius:12px;background:#fff;box-shadow:0 3px 20px rgba(0,0,0,0.10);
  cursor:pointer;display:flex;gap:10px;align-items:flex-start;font-size:clamp(12px,1vw,15px);
  font-weight:400;color:var(--ink);line-height:1.4;transition:transform .15s ease, box-shadow .15s ease;
}
.clue-card:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(0,0,0,.14);}
.clue-card.selected{border:2px solid var(--orange);box-shadow:0 8px 26px rgba(254,80,0,.25);}
.clue-card.matched{opacity:.45;cursor:default;pointer-events:none;}
.clue-tag{flex-shrink:0;padding:3px 9px;border-radius:999px;background:var(--ink);color:#fff;font-size:10px;font-weight:700;}

.profile-panel{
  display:flex;flex-direction:column;gap:clamp(10px,1.2vw,14px);padding:clamp(16px,1.8vw,24px);
  border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,0.92) 0%,rgba(255,255,255,0.72) 100%);
  border:1px solid rgba(255,255,255,0.95);backdrop-filter:blur(24px);box-shadow:0 22px 60px rgba(17,21,32,0.25);color:var(--ink);
}
.profile-panel .panel-title{color:var(--ink);}
.profile-panel .panel-sub{color:#595959;}
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);}
.profile-card{
  padding:clamp(12px,1.4vw,18px);border-radius:14px;
  background:#fff;box-shadow:0 3px 20px rgba(0,0,0,0.10);
  border:1px solid rgba(17,21,32,0.08);display:flex;flex-direction:column;gap:6px;
  cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;position:relative;
}
.profile-card:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(0,0,0,.14);}
.profile-icon{font-size:22px;}
.profile-name{font-size:clamp(12px,1vw,14px);font-weight:700;color:var(--ink);}
.profile-hint{font-size:11px;font-weight:400;color:#595959;}
.profile-slot{margin-top:4px;font-size:11px;font-weight:600;color:#8a8f98;padding:6px 10px;border-radius:8px;background:rgba(17,21,32,.06);}
.profile-slot.filled{background:rgba(118,203,170,.28);color:#0d2b22;}
.profile-slot.wrong{background:rgba(194,59,46,.16);color:#7a1f16;}
.profile-card.answered.solved{border-color:rgba(118,203,170,.9);box-shadow:0 16px 40px rgba(118,203,170,.3);}
.profile-card.answered.wrong{border-color:rgba(194,59,46,.7);}
.profile-card.shake{animation:shakeX .35s ease;}
.profile-intel{margin-top:8px;font-size:11px;font-weight:400;line-height:1.5;color:#595959;border-top:1px solid rgba(17,21,32,.1);padding-top:8px;}
.profile-intel a{color:var(--orange);font-weight:600;}
.check{color:#2f7d55;}
.cross{color:#c23b2e;}

.complete-banner{
  display:none;position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:8;
  align-items:center;gap:16px;padding:14px 20px;border-radius:16px;max-width:min(92vw,720px);
  background:rgba(17,21,32,0.92);border:1px solid rgba(255,255,255,0.2);backdrop-filter:blur(24px);
  box-shadow:0 30px 70px rgba(0,0,0,.5);animation:rise .35s ease-out both;
}
.complete-banner.show{display:flex;flex-wrap:wrap;}
.cb-text{font-size:13px;font-weight:400;color:#fff;line-height:1.4;flex:1;min-width:200px;}

/* avalanche */
.avalanche-stage{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:clamp(14px,2vw,26px);align-items:start;}
.ice-block-row{display:flex;flex-direction:column;gap:8px;}
.ice-block{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:rgba(120,196,234,.16);border:1px solid rgba(120,196,234,.35);font-size:12.5px;font-weight:600;color:var(--ink);transition:background .2s ease;}
.ice-block .ib-icon{font-size:15px;}
.ice-block.cleared{background:rgba(118,203,170,.22);border-color:rgba(118,203,170,.6);}
.ice-block.stuck{background:rgba(194,59,46,.14);border-color:rgba(194,59,46,.45);}
.acronym-card{
  padding:clamp(18px,2.2vw,28px);border-radius:18px;
  background:linear-gradient(120deg,rgba(255,255,255,0.9),rgba(255,255,255,0.7));
  border:1px solid rgba(255,255,255,0.95);backdrop-filter:blur(24px);box-shadow:0 22px 60px rgba(17,21,32,0.25);
  color:var(--ink);display:flex;flex-direction:column;gap:14px;min-height:240px;
}
.ac-eyebrow{font-size:10px;font-weight:700;color:var(--orange);text-transform:uppercase;letter-spacing:.06em;}
.ac-question{font-size:clamp(16px,1.6vw,22px);font-weight:600;color:var(--ink);}
.ac-choices{display:flex;flex-direction:column;gap:10px;}
.ac-choice{
  text-align:left;padding:13px 16px;border-radius:12px;border:1px solid rgba(0,0,0,.12);
  background:#fff;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.ac-choice:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.1);}
.ac-choice:disabled{cursor:default;}
.ac-choice.correct{border-color:var(--good);background:rgba(183,224,198,.45);color:#123f30;}
.ac-choice.wrong{border-color:var(--bad);background:rgba(194,59,46,.12);}
.ac-feedback{font-size:12.5px;line-height:1.55;border-radius:10px;padding:12px 14px;color:var(--ink);}
.ac-feedback.is-correct{background:rgba(183,224,198,.4);}
.ac-feedback.is-wrong{background:rgba(194,59,46,.12);}
.ac-feedback .snowed-in{font-weight:800;color:var(--bad);display:block;margin-bottom:6px;}
.ac-continue{display:flex;justify-content:flex-end;}

/* ============================================================
   4. MISSION COMPLETE
   ============================================================ */
.complete-bg{min-height:100vh;}
.complete-wrap{
  max-width:640px;margin:0 auto;padding:clamp(24px,3vw,44px);border-radius:24px;text-align:center;
  background:linear-gradient(165deg,rgba(19,26,42,0.82) 0%,rgba(8,12,22,0.86) 100%);
  border:1px solid rgba(255,255,255,0.18);backdrop-filter:blur(30px);box-shadow:0 50px 110px rgba(8,11,20,0.6);
  color:#fff;animation:rise .5s ease-out both;
}
.stamp{display:inline-block;font-size:10px;font-weight:700;color:var(--orange-4);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;}
.badge-earned-card{display:flex;align-items:center;gap:14px;justify-content:center;margin:18px 0;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);}
.badge-earned-tag{font-size:10px;font-weight:700;color:var(--mint-2);text-transform:uppercase;}
.badge-earned-name{font-size:14px;font-weight:700;color:#fff;}
.score-card{margin:18px 0;padding:6px 4px;border-top:1px solid rgba(255,255,255,.18);text-align:left;}
.score-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:13px;font-weight:400;color:var(--text-soft);}
.score-row:last-child{font-weight:700;color:#fff;border-bottom:none;}
.resource-card{display:flex;gap:14px;align-items:center;text-align:left;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);margin-top:6px;}
.resource-thumb{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:rgba(255,255,255,.12);}
.resource-link{font-size:12.5px;font-weight:600;}
.badge-teaser{margin-top:16px;text-align:left;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);font-size:12.5px;color:var(--text-soft);}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px;}

/* ============================================================
   5. BADGES
   ============================================================ */
.badge-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,22px);padding:clamp(20px,3vw,40px) clamp(16px,3vw,40px) 40px;max-width:1300px;margin:0 auto;}
.badge-card{
  padding:clamp(16px,1.8vw,24px);border-radius:18px;text-align:center;color:#fff;
  background:linear-gradient(120deg,rgba(255,255,255,0.28),rgba(255,255,255,0.11));
  border:1px solid rgba(255,255,255,0.5);backdrop-filter:blur(28px);box-shadow:0 30px 70px rgba(8,11,20,0.4);
  display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform .2s ease;
}
.badge-card:not(.is-locked):hover{transform:translateY(-4px);}
.badge-card.is-locked{opacity:.65;}
.badge-medal{display:grid;place-items:center;width:clamp(56px,6vw,86px);aspect-ratio:1;border-radius:50%;font-size:0;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:inset -9px -12px 22px rgba(0,0,0,0.25);}
.badge-medal.b1{background-image:var(--icon-mission-1);background-color:var(--mint-2);}
.badge-medal.b2{background-image:var(--icon-mission-2);background-color:var(--teal-2);}
.badge-medal.b3{background-image:var(--icon-mission-3);background-color:var(--orange);}
.badge-medal.b4{background-image:var(--icon-mission-4);background-color:var(--slate-2);}
/* Only badges that are NOT yet unlocked get an attention-drawing animation. */
@keyframes badgeLockedPulse{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-7px) scale(1.045);}}
@keyframes badgeLockedGlow{0%,100%{box-shadow:inset -9px -12px 22px rgba(0,0,0,0.25),0 0 0 0 rgba(255,255,255,0);}50%{box-shadow:inset -9px -12px 22px rgba(0,0,0,0.25),0 0 26px 7px rgba(255,255,255,0.4);}}
.badge-card:has(.badge-state.locked) .badge-medal{animation:badgeLockedPulse 2.6s ease-in-out infinite,badgeLockedGlow 2.6s ease-in-out infinite;}
.badge-name{font-size:clamp(12px,1.1vw,17px);font-weight:600;line-height:1.2;}
.badge-crit{font-size:11px;font-weight:300;color:var(--text-soft);}
.badge-state{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:4px 10px;border-radius:999px;}
.badge-state.earned{color:#123f30;background:#B6DACC;}
.badge-state.locked{color:var(--text-softer);background:rgba(255,255,255,.1);}
.badge-share{margin-top:auto;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.5);font-size:11px;font-weight:600;color:#fff;cursor:pointer;}
.badge-share:hover:not(:disabled){background:rgba(255,255,255,0.3);}

/* ============================================================
   6. FINALE  (kept from V3 — not present in V1)
   ============================================================ */
.finale-wrap{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(18px,3vw,48px);align-items:start;padding:clamp(90px,11vh,150px) clamp(20px,3vw,40px) 60px;max-width:1300px;margin:0 auto;}
.finale-left{display:flex;flex-direction:column;gap:clamp(10px,1.6vw,20px);animation:rise .5s ease-out both;}
.finale-eyebrow{font-size:10px;font-weight:700;color:var(--orange-4);text-transform:uppercase;letter-spacing:.06em;}
.finale-title{font-size:clamp(26px,3.6vw,52px);font-weight:300;color:#fff;line-height:1.05;}
.finale-title em{font-style:italic;color:var(--orange-6);}
.finale-body{font-size:clamp(12px,1.15vw,17px);font-weight:300;line-height:1.55;color:var(--text-soft);max-width:32em;}
.finale-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.finale-report{
  justify-self:end;width:min(100%,430px);padding:clamp(20px,2.6vw,36px);border-radius:22px;
  background:linear-gradient(120deg,rgba(255,255,255,0.32),rgba(255,255,255,0.14));
  border:1px solid rgba(255,255,255,0.6);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  box-shadow:0 44px 100px rgba(8,11,20,0.5);
  display:flex;flex-direction:column;gap:14px;color:#fff;
}
.finale-report-title{font-size:clamp(14px,1.4vw,20px);font-weight:600;}
.finale-score{display:flex;align-items:flex-end;gap:10px;}
.finale-score-num{font-size:clamp(34px,4.4vw,58px);font-weight:600;line-height:.95;}
.finale-score-of{font-size:11px;font-weight:600;color:#B2D7FB;text-transform:uppercase;padding-bottom:8px;}
.finale-bars{display:flex;gap:8px;}
.finale-bars span{flex:1;height:8px;border-radius:999px;}
.finale-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid rgba(255,255,255,0.22);font-size:13px;font-weight:300;color:var(--text-soft);}
.finale-row b{font-weight:600;color:#fff;}
.finale-share-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.finale-share-btn svg{flex-shrink:0;}

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:20;align-items:center;justify-content:center;
  background:rgba(7,9,15,0.72);backdrop-filter:blur(6px);padding:20px;
}
.modal-overlay.show{display:flex;}
.modal-card{
  position:relative;width:min(92vw,440px);padding:32px 28px 28px;border-radius:22px;text-align:center;
  background:#fff;color:var(--ink);box-shadow:0 40px 110px rgba(0,0,0,.5);animation:popIn .25s ease-out both;
}
.modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:none;background:rgba(0,0,0,.06);color:var(--ink);font-size:14px;cursor:pointer;}
.modal-close:hover{background:rgba(0,0,0,.12);}

.briefing-card{
  position:relative;width:min(92vw,560px);max-height:88vh;overflow-y:auto;padding:32px 30px 28px;border-radius:22px;text-align:left;
  background:linear-gradient(160deg,rgba(20,25,38,.97),rgba(11,18,32,.98));color:#fff;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 110px rgba(0,0,0,.6);animation:popIn .25s ease-out both;
}
.briefing-eyebrow{font-size:11px;font-weight:700;color:var(--orange-4);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
.briefing-title{font-size:clamp(20px,2.4vw,28px);font-weight:600;margin-bottom:6px;}
.briefing-tagline{font-size:13px;font-weight:300;color:var(--text-soft);margin-bottom:16px;}
.briefing-meta{display:flex;gap:22px;flex-wrap:wrap;padding:14px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:16px;}
.briefing-meta-lbl{display:block;font-size:10px;font-weight:700;color:var(--text-softer);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;}
.briefing-meta-val{display:block;font-size:13px;font-weight:600;color:#fff;}
.briefing-body{font-size:13.5px;font-weight:300;line-height:1.6;color:var(--text-soft);margin-bottom:16px;}
.briefing-howto{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 16px;margin-bottom:20px;}
.briefing-howto-title{font-size:12px;font-weight:700;color:#fff;margin-bottom:8px;}
.briefing-howto-list{margin:0;padding-left:18px;font-size:12.5px;font-weight:300;color:var(--text-soft);line-height:1.7;}
.briefing-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;padding-top:100px;}
  .hero-right{justify-self:stretch;}
  .login-card{margin:0 auto;}
  .puzzle-grid,.avalanche-stage{grid-template-columns:1fr;}
  .badge-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .finale-wrap{grid-template-columns:1fr;}
  .finale-report{justify-self:stretch;}
  .profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .app-navbar{padding:12px 14px;}
  .app-navlinks{gap:6px;}
  .app-navlink{padding:8px 13px;font-size:12px;}
  .xmas-header{flex-direction:column;align-items:stretch;}
  .xh-stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:8px;}
  .carousel-wrap{min-height:340px;}
  .envelope.pos-prev,.envelope.pos-next{display:none;}
  .envelope.pos-center .env-card{width:min(78vw,320px);}
  .badge-grid{grid-template-columns:1fr 1fr;padding-bottom:24px;}
}
@media (max-width:520px){
  .badge-grid{grid-template-columns:1fr;}
  .cta-row,.finale-actions{flex-direction:column;}
  .cta-row .btn-ghost,.cta-row .btn-solid,.finale-actions button{width:100%;}
}

/* Keep the supplied HSK typography and carousel geometry isolated from the
   retired prototype styles that are still present in the application shell. */
.hsk-app .display{
  font-weight:300;
  letter-spacing:0;
  text-transform:none;
}
.hsk-app .carousel-track .envelope{
  width:auto;
  flex:0 0 auto;
}
.hsk-app .badge-medal{
  width:clamp(56px,6vw,86px);
  height:auto;
  aspect-ratio:1;
  margin:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hsk-app .badge-medal.b1{background-image:var(--icon-mission-1);background-color:var(--mint-2);}
.hsk-app .badge-medal.b2{background-image:var(--icon-mission-2);background-color:var(--teal-2);}
.hsk-app .badge-medal.b3{background-image:var(--icon-mission-3);background-color:var(--orange);}
.hsk-app .badge-medal.b4{background-image:var(--icon-mission-4);background-color:var(--slate-2);}

/* The retired shell added a decorative dashed ring to every medal. Keep the
   supplied badge artwork untouched and render it without that overlay. */
.hsk-app .badge-medal::after,
#badge-modal .badge-medal::after{
  content:none;
  display:none;
}

/* The reveal modal sits outside .hsk-app in the supplied markup, so isolate it
   explicitly from the retired shell's badge gradients and uppercase display. */
#badge-modal .badge-medal{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
#badge-modal .badge-medal.b2{
  background-image:var(--icon-mission-2);
  background-color:var(--teal-2);
}
#badge-modal .display{
  font-weight:300;
  letter-spacing:0;
  text-transform:none;
}

/* Prevent retired application-shell rules from changing the supplied game's
   typeface or turning the dark score breakdown into a white card. */
.hsk-app,
.hsk-app *,
#badge-modal,
#badge-modal *,
#briefing-overlay,
#briefing-overlay *{
  font-family:'Mona Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  letter-spacing:0;
}
.hsk-app .complete-wrap .score-card{
  display:block;
  margin:18px 0;
  padding:6px 4px;
  border:0;
  border-top:1px solid rgba(255,255,255,.18);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--text-soft);
  text-align:left;
}
.hsk-app .complete-wrap .score-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.14);
  font-size:13px;
  font-weight:400;
  color:var(--text-soft);
}
.hsk-app .complete-wrap .score-row span:last-child{
  flex-shrink:0;
  font-weight:600;
  color:inherit;
  font-variant-numeric:tabular-nums;
}
.hsk-app .complete-wrap .score-row:last-child{
  padding-top:10px;
  border-bottom:0;
  font-size:13px;
  font-weight:700;
  color:#fff;
}
/* Survival report share button: white pill with black text for visibility */
.hsk-app .finale-share-btn{
  background:#fff;
  border:1px solid #fff;
  color:#111;
  box-shadow:0 10px 26px rgba(0,0,0,0.22);
}
.hsk-app .finale-share-btn:hover,
.hsk-app .finale-share-btn:disabled{
  background:#fff;
}
.hsk-app .finale-share-btn:disabled{
  opacity:1;
  cursor:default;
}

/* ---- Mission Complete: coloured glow behind the earned badge ---- */
.hsk-app .badge-earned-card .badge-medal{position:relative;box-shadow:inset -9px -12px 22px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.14);}
.hsk-app .badge-earned-card .badge-medal::before{
  content:"";position:absolute;inset:-26%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,var(--badge-glow,rgba(255,255,255,.55)) 0%,rgba(0,0,0,0) 70%);
  filter:blur(6px);animation:badgeEarnedGlow 2.8s ease-in-out infinite;
}
.hsk-app .badge-earned-card .badge-medal.b1{--badge-glow:rgba(139,214,178,.75);}
.hsk-app .badge-earned-card .badge-medal.b2{--badge-glow:rgba(70,166,198,.8);}
.hsk-app .badge-earned-card .badge-medal.b3{--badge-glow:rgba(240,96,40,.75);}
.hsk-app .badge-earned-card .badge-medal.b4{--badge-glow:rgba(150,170,195,.7);}
@keyframes badgeEarnedGlow{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}

.hsk-app #login-step1 .login-title{font-weight:500;}
.hsk-app #login-step2 .login-title{font-weight:700;}