/* MetalBear Minesweeper — extracted styles from prototype */
:root{
  --face:#c0c0c0; --hi:#ffffff; --lo:#808080; --dk:#000000; --deep:#dfdfdf;
  --teal:#008080; --led:#ff3b3b; --accent:#ff4d3d; --accent2:#7b2ff7;
  --mb-purple:#756DF3; --mb-purple-d:#5F58D6; --mb-navy:#232141; --mb-yellow:#FFCB7D; --mb-bg:#F4F4FF;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Poppins',"Segoe UI",Verdana,sans-serif;
  background:var(--mb-bg); min-height:100vh; color:var(--mb-navy);
  -webkit-user-select:none; user-select:none;
}

/* ===== HERO ===== */
.hero{
  position:relative; overflow:hidden; padding:0 20px 150px;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 24px),
    var(--mb-purple);
}
/* White floating pill nav -- hugs its content, centered (matches Figma) */
.hero .nav{
  position:relative; z-index:3; width:fit-content; max-width:calc(100% - 32px); margin:22px auto 0;
  padding:8px 8px 8px 20px; display:flex; align-items:center; gap:28px;
  background:#fff; border-radius:100px; box-shadow:0 10px 30px rgba(35,33,65,.16);
}
.hero .nav .logo{display:inline-flex; align-items:center; text-decoration:none}
.hero .nav .logo img{height:30px; width:auto; display:block}
.hero .navlinks{display:flex; gap:20px; margin:0}
.hero .navlinks a{color:#333344; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none}
.hero .navlinks a:hover{color:var(--mb-purple)}
.hero .navright{display:flex; align-items:center; gap:10px; white-space:nowrap}
.hero .stars{display:inline-flex; align-items:center; gap:6px; background:#f3f3f8; color:var(--mb-navy); font-size:13px; font-weight:600; padding:7px 12px; border-radius:20px; border:1px solid #e6e6ef; text-decoration:none}
.hero .signin{color:var(--mb-navy); font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; padding:0 6px}
.hero .tryfree{
  background:#2E2A5E; color:#fff; font-size:14px; font-weight:700;
  padding:10px 18px; border-radius:22px; cursor:pointer; text-decoration:none;
}
.hero .tryfree:active{transform:translateY(1px)}

.hero .herobody{position:relative; z-index:3; max-width:1120px; margin:60px auto 0; text-align:center}
.badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.15);
  color:#fff; font-size:12px; font-weight:600; letter-spacing:.4px;
  padding:6px 14px; border-radius:20px; border:1px solid rgba(255,255,255,.3);
  text-decoration:none;
}
.badge .dot{width:7px; height:7px; border-radius:50%; background:var(--mb-yellow)}
.badge.light{background:#FFCB5C; color:var(--mb-navy); border:none; letter-spacing:1px}
.hero h1{
  font-family:'Unbounded',sans-serif; font-weight:700; color:#fff;
  font-size:clamp(34px,5vw,64px); line-height:1.04; margin:20px 0 0; letter-spacing:-1px;
}
.hero h1 .accent, .accent{color:var(--mb-yellow)}
.hero p{max-width:620px; color:rgba(255,255,255,.92); font-size:16px; line-height:1.55; margin:18px auto 0}
.hero p b{color:#fff; font-weight:700}
.accent-link{color:var(--mb-yellow); font-weight:700; text-decoration:underline}
/* On the yellow Slack section, the "Slack" accent reads as purple, not yellow. */
.slack .accent{color:var(--mb-purple)}

.herobtns{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}
.herobtns.center{justify-content:center}
.hbtn{
  font-weight:700; font-size:15px; padding:13px 24px; border-radius:28px; cursor:pointer;
  text-decoration:none; white-space:nowrap; transition:transform .08s ease;
}
.hbtn.yellow{background:var(--mb-yellow); color:var(--mb-navy); box-shadow:0 5px 0 rgba(0,0,0,.15)}
.hbtn.yellow:active{transform:translateY(2px); box-shadow:0 3px 0 rgba(0,0,0,.15)}
.hbtn.ghost{background:rgba(255,255,255,.12); color:#fff; border:2px solid rgba(255,255,255,.5)}
.hbtn.ghost:hover{border-color:#fff}
.hbtn.white{background:#fff; color:var(--mb-navy); box-shadow:0 5px 0 rgba(0,0,0,.15)}
.hbtn.white:active{transform:translateY(2px); box-shadow:0 3px 0 rgba(0,0,0,.15)}
.hbtn.white b{font-weight:800}
.hbtn.purple{background:var(--mb-purple); color:#fff; box-shadow:0 5px 0 rgba(0,0,0,.15)}
.hbtn.purple:active{transform:translateY(2px); box-shadow:0 3px 0 rgba(0,0,0,.15)}

/* clouds */
.cloud{position:absolute; background:#fff; border-radius:100px; opacity:.9; z-index:1}
.cloud::before,.cloud::after{content:''; position:absolute; background:#fff; border-radius:50%}
.cloud.c1{width:120px; height:40px; top:120px; right:8%}
.cloud.c1::before{width:60px; height:60px; top:-26px; left:18px}
.cloud.c1::after{width:44px; height:44px; top:-16px; left:66px}
.cloud.c2{width:90px; height:32px; top:250px; right:26%; opacity:.75}
.cloud.c2::before{width:46px; height:46px; top:-20px; left:14px}
.cloud.c2::after{width:34px; height:34px; top:-12px; left:50px}
.cloud.c3{width:150px; height:48px; bottom:120px; right:4%; opacity:.8}
.cloud.c3::before{width:70px; height:70px; top:-30px; left:24px}
.cloud.c3::after{width:52px; height:52px; top:-20px; left:82px}

.wave{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:auto; z-index:2; display:block; pointer-events:none}

/* ---- win98 window ---- */
.win{
  width:fit-content; max-width:100%; background:var(--face);
  border:2px solid; border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:4px 4px 0 rgba(0,0,0,.45); padding:3px;
}
.titlebar{
  background:linear-gradient(90deg,#00007b,#1084d0); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:3px 4px 3px 6px; font-weight:700; font-size:13px;
}
.titlebar .t{display:flex; align-items:center; gap:7px}
.titlebar .t .ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:3px;padding:1px}
.titlebar .t .ico img{width:100%;height:100%;object-fit:contain;display:block}
.tbtns{display:flex; gap:2px}
.tbtn{
  width:18px;height:16px; background:var(--face);
  border:2px solid; border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  font-size:10px; line-height:11px; display:flex; align-items:center; justify-content:center;
  font-weight:700; cursor:default;
}
.menubar{display:flex; gap:14px; padding:3px 8px; font-size:12px; border-bottom:1px solid var(--lo)}
.menubar span u{text-decoration:underline}
.menubar span{cursor:default}

.app{padding:10px; display:flex; gap:12px; align-items:flex-start; justify-content:center; flex-wrap:nowrap; overflow-x:auto}

/* the classic sunken game frame */
.gameframe{
  background:var(--face); padding:8px;
  border:3px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo);
}
.hud{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--face); padding:6px 8px; margin-bottom:8px;
  border:3px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo);
}
.led{
  font-family:"Courier New",monospace; font-weight:700; font-size:26px; line-height:1;
  background:#000; color:var(--led); padding:3px 6px; letter-spacing:2px;
  border:1px solid #500; min-width:62px; text-align:right;
  text-shadow:0 0 4px rgba(255,59,59,.7);
}
.smiley{
  width:42px;height:42px; font-size:22px; background:var(--face); cursor:pointer;
  border:3px solid; border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  display:flex; align-items:center; justify-content:center;
}
.smiley:active{border-color:var(--dk) var(--hi) var(--hi) var(--dk)}

.board{
  display:grid; gap:0; background:var(--lo);
  border:3px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  touch-action:manipulation;
}
.cell{
  width:28px;height:28px; background:var(--face);
  border:3px solid; border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px; cursor:pointer; font-family:"Tahoma",sans-serif;
}
.cell.open{
  border:1px solid var(--lo); background:var(--face);
  width:28px;height:28px;
}
.cell.mine,.cell.exploded{background:var(--face) url('mirrord-logo.png') center/contain no-repeat}
.cell.flag{color:#000}
.n1{color:#0000ff} .n2{color:#008000} .n3{color:#d00000} .n4{color:#000080}
.n5{color:#800000} .n6{color:#008080} .n7{color:#000000} .n8{color:#808080}

/* side panel */
.panel{width:230px; min-width:210px; flex:0 0 230px; font-size:12px; display:flex; flex-direction:column}
.panelbox{
  background:var(--face); padding:8px; margin-bottom:10px;
  border:2px solid; border-color:var(--hi) var(--dk) var(--dk) var(--hi);
}
.panelbox h3{margin:0 0 6px; font-size:12px; background:#000080; color:#fff; padding:3px 6px}
.countdown{font-family:"Courier New",monospace; font-size:20px; font-weight:700; text-align:center; padding:4px 0; color:#a00}
.small{font-size:11px; color:#333; line-height:1.45}
.lbrow{display:flex; justify-content:space-between; padding:2px 2px; border-bottom:1px dotted #aaa}
.lbrow.me{background:#fff3b0}
.lbrow .rk{width:18px; color:#555}
.lbrow .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lbrow .tm{font-family:"Courier New",monospace; font-weight:700}
/* Leaderboard fills the panel down to the bottom of the game and scrolls. */
.lbbox{display:flex; flex-direction:column}
/* Hard-bounded scroll region -- fixed cap so the list never pushes the page down. */
#leaderboard{max-height:300px; overflow-y:auto}
.diftabs{display:flex; gap:4px; margin-bottom:6px}
.diftab{
  flex:1; text-align:center; font-size:11px; padding:4px 2px; cursor:pointer; background:var(--face);
  border:2px solid; border-color:var(--hi) var(--dk) var(--dk) var(--hi);
}
.diftab.active{border-color:var(--dk) var(--hi) var(--hi) var(--dk); font-weight:700; background:var(--deep)}

.field{display:flex; gap:6px; align-items:center; margin-top:6px}
.field input{
  flex:1; font-family:"Tahoma",sans-serif; font-size:12px; padding:4px;
  border:2px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); background:#fff;
}
.btn{
  font-family:"Tahoma",sans-serif; font-size:12px; padding:5px 12px; cursor:pointer; background:var(--face); font-weight:700;
  border:2px solid; border-color:var(--hi) var(--dk) var(--dk) var(--hi);
}
.btn:active{border-color:var(--dk) var(--hi) var(--hi) var(--dk)}
.btn.primary{background:var(--mb-purple); color:#fff; border-color:#fff var(--mb-purple-d) var(--mb-purple-d) #fff}
.btn:disabled{color:#808080; cursor:not-allowed}

/* ===== GAME STAGE (holds the win98 window on the light bg) ===== */
.stage{
  max-width:1180px; margin:0 auto; padding:56px 16px 60px;
  display:flex; flex-direction:column; align-items:center;
}
/* Win-real-prizes -- a classic win98 dialog box below the game window. */
.prizes{margin:22px auto 0; width:760px; max-width:100%}
.prizes-body{display:flex; gap:16px; align-items:flex-start; padding:18px 20px 20px}
.prizes-ico{font-size:38px; line-height:1; flex:0 0 auto}
.prizes-txt{flex:1}
.prizes-txt p{margin:0 0 12px; font-size:13px; line-height:1.5; color:#000; font-family:"Tahoma",sans-serif}
.prizes-txt b{font-weight:700}
.prizes-body .btn.primary{display:inline-block; text-decoration:none}

/* ===== LAUNCH WEEK HAPPENS IN SLACK ===== */
.slack{background:var(--mb-yellow); padding:64px 20px}
.slack-wrap{max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:48px}
.slack-in{flex:1; text-align:left}
.slack-art{flex:0 0 auto; width:360px; max-width:40%; height:auto}
.eyebrow{
  display:inline-block; background:#fff; color:var(--mb-navy); font-size:12px; font-weight:600;
  padding:6px 14px; border-radius:20px; box-shadow:0 3px 0 rgba(0,0,0,.1);
}
.slack h2, .cta h2{
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(30px,4.5vw,46px);
  line-height:1.08; margin:18px 0 0; letter-spacing:-.5px;
}
.slack h2 .accent{color:var(--mb-purple)}
.slack p{max-width:560px; margin:16px 0 0; font-size:16px; line-height:1.55; color:#3f3d55}
.ticks{list-style:none; margin:22px 0 26px; padding:0; max-width:520px; text-align:left}
.ticks li{position:relative; padding:7px 0 7px 30px; font-size:14.5px; color:var(--mb-navy)}
.ticks li::before{content:'✓'; position:absolute; left:0; top:6px; color:var(--mb-purple); font-weight:800}
.slack-btns{display:flex; gap:14px; flex-wrap:wrap}

/* ===== FINAL CTA (yellow-framed purple card + peek mascots) ===== */
/* yellow backdrop so the inset purple card is framed on all sides */
.cta-bg{background:var(--mb-yellow); padding:34px 0 0}
.cta{
  position:relative; overflow:hidden; text-align:center; color:#fff;
  background:var(--mb-purple);
  margin:0 auto; width:calc(100% - 6cm); max-width:none; border-radius:24px 24px 0 0;
  padding:clamp(52px,5.5vw,90px) 0;
}
.cta-char{position:absolute; pointer-events:none; z-index:1}
.cta-char img{width:100%; height:auto; display:block}
.cta-char.peek-left{left:0; top:44%; transform:translateY(-50%); width:clamp(96px,11vw,158px)}
.cta-char.peek-top{right:0; top:16%; width:150px}
.cta-char.peek-bottom{right:-16px; bottom:44px; width:224px}
.cta-in{position:relative; z-index:2; margin:0 auto; max-width:860px; padding:0 clamp(20px,4vw,120px)}
.cta-label{
  display:inline-block; margin:0 auto 24px;
  font-family:'Unbounded',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#232141; background:var(--mb-yellow);
  border:2px solid #232141; padding:5px 14px; border-radius:100px;
}
.cta-headline{
  font-family:'Unbounded',sans-serif; font-size:clamp(32px,4vw,52px);
  line-height:1.1; font-weight:700; letter-spacing:-.02em; color:#fff; margin:0 auto 24px;
}
.cta-headline em{font-style:normal; color:var(--mb-yellow)}
.cta-sub{font-size:15px; line-height:1.55; color:rgba(255,255,255,.9); margin:0 auto 32px; max-width:600px}
.cta-actions{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.cta-primary{
  background:#fff; color:#000; border:1.5px solid #232141; border-radius:8px; padding:12px 24px;
  font-family:'Poppins',sans-serif; font-size:15px; font-weight:600; cursor:pointer; text-decoration:none;
  box-shadow:4px 5px 0 #232141; transition:transform .1s ease, box-shadow .15s ease;
}
.cta-primary:hover{transform:translateY(-2px); box-shadow:6px 7px 0 #232141}
.cta-primary b{font-weight:700}
.cta-secondary{
  background:var(--mb-purple); color:#fafafd; border:1px solid rgba(255,255,255,.3); border-radius:8px; padding:12px 24px;
  font-family:'Poppins',sans-serif; font-size:15px; font-weight:600; cursor:pointer; text-decoration:none;
  box-shadow:4px 5px 0 #9e99f7; transition:transform .1s ease, box-shadow .15s ease;
}
.cta-secondary:hover{transform:translateY(-2px); box-shadow:6px 7px 0 #9e99f7}
.cta-link{display:inline-block; color:rgba(255,255,255,.55); font-family:'Poppins',sans-serif; font-size:14px; text-decoration:none}
.cta-link:hover{color:rgba(255,255,255,.85)}
@media (max-width:768px){
  .cta-bg{padding:0}
  .cta{margin:0; border-radius:0; width:100%; max-width:100%; padding:60px 0}
  .cta-char.peek-left{left:-10px; top:40px; width:131px; transform:none}
  .cta-char.peek-top{right:0; top:130px; width:48px; overflow:hidden}
  .cta-char.peek-top img{width:90.9px; max-width:none}
  .cta-char.peek-bottom{right:0; bottom:0; width:115px; overflow:hidden}
  .cta-char.peek-bottom img{width:152px; max-width:none}
  .cta-headline{font-size:29px; padding:0 40px}
  .cta-actions{flex-direction:column; align-items:stretch; padding:0 40px}
}
@media (max-width:820px){
  .slack-wrap{flex-direction:column; text-align:center}
  .slack-in{text-align:center}
  .slack p, .ticks{margin-left:auto; margin-right:auto}
  .slack-art{width:280px; max-width:70%}
}

/* modal */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center; z-index:60; padding:14px}
.overlay.show{display:flex}
.modal{width:100%; max-width:560px; background:var(--face);
  border:2px solid; border-color:var(--hi) var(--dk) var(--dk) var(--hi); box-shadow:5px 5px 0 rgba(0,0,0,.5)}
.modal .titlebar{cursor:default}
.modal .body{padding:14px}

/* button row (used by the name-prompt modal) */
.sharebtns{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}

.rank-note{font-size:12px; margin-top:10px; padding:8px; background:#fffbe6; border:1px solid #d9c64a}
.crown{font-size:13px; font-weight:700; color:#9a6b00}

/* loading state */
.lb-loading{color:#555; font-size:11px; padding:4px 0; font-style:italic}
.lb-error{color:#a00; font-size:11px; padding:4px 0}

@media (max-width:560px){
  .panel{width:100%; flex:1 1 100%}
  .cell,.cell.open{width:24px;height:24px;font-size:14px}
  .app{gap:8px; flex-wrap:wrap}
}

/* ===== Launch Week results window (modal) — Figma 5542:3546 ===== */
.reswin{width:100%; max-width:1000px; background:var(--face);
  border:2px solid; border-color:var(--hi) #6b6b6b #6b6b6b var(--hi);
  box-shadow:6px 6px 0 rgba(0,0,0,.5); font-family:Tahoma,sans-serif;
  max-height:94vh; overflow:auto; display:flex; flex-direction:column}
.reswin-tb{display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(90deg,#312d65,#6e66e2); color:#fff; font-weight:bold; font-size:15px; padding:5px 8px}
.reswin-tb-l{display:flex; align-items:center; gap:9px}
.reswin-chip{width:24px;height:24px;background:#fff;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}
.reswin-chip img{width:17px;height:17px;object-fit:contain;display:block}
.reswin-tb-btns{display:flex; gap:3px}
.reswin-tb-btns span{width:27px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--face);border:2px solid var(--hi);color:#000;font-weight:bold;font-size:14px;cursor:default}
.reswin-tb-btns #modalClose{cursor:pointer}
.reswin-menu{display:flex; gap:16px; padding:7px 16px; font-size:15px; border-bottom:1px solid var(--lo)}

.reswin-body{display:flex; gap:24px; padding:26px 30px 30px; align-items:center}
.reswin-left{flex:1 1 0; min-width:0; display:flex; flex-direction:column}
.reswin-left > .eyebrow{align-self:flex-start}
.eyebrow{display:inline-flex; align-items:center; gap:8px; background:#2e2a5e; color:#ffcb5c;
  font-family:Unbounded,sans-serif; font-weight:700; font-size:12px; letter-spacing:1px; text-transform:uppercase;
  padding:8px 18px; border-radius:100px; box-shadow:3px 3px 0 rgba(0,0,0,.15)}
.eyebrow i{width:8px;height:8px;background:#e11d48;border-radius:2px;display:block}
.res-title{font-family:Unbounded,sans-serif; font-weight:800; font-size:34px; letter-spacing:-1px;
  color:#2e2a5e; margin:16px 0 0; line-height:1.15}
.score-label{font-family:Unbounded,sans-serif; font-weight:700; font-size:10px; letter-spacing:3px; color:#756df3; margin:22px 0 8px}
.score-box{background:#1a1836; border:4px solid #808080; border-right-color:#fff; border-bottom-color:#fff;
  color:#ffcb5c; font-family:Unbounded,sans-serif; font-weight:800; font-size:72px; letter-spacing:4px;
  text-shadow:0 0 20px rgba(255,203,92,.5); padding:0 30px; height:100px; display:flex; align-items:center; max-width:360px}
.stat-row{display:flex; gap:8px; margin-top:22px; max-width:527px}
.stat{flex:1 1 0; min-width:0; background:#e7e7e7; border:2px solid #808080; padding:12px 10px;
  display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center}
.stat span{font-family:Unbounded,sans-serif; font-weight:700; font-size:9px; letter-spacing:2px; color:#756df3}
.stat b{font-family:Unbounded,sans-serif; font-weight:700; font-size:22px; color:#2e2a5e; white-space:nowrap}
.reswin-left .rank-note{margin-top:14px}
/* small "play again" at the bottom-left of the card; keeps the same name.
   fixed top gap (not margin-top:auto, which collapsed against the stats on a
   short card) so there's always clear breathing room above it. */
.res-playagain{align-self:flex-start; margin-top:28px; display:inline-flex; align-items:center; gap:8px;
  font-family:Poppins,sans-serif; font-weight:700; font-size:14px; color:#fff;
  background:#756df3; border:2px solid #2e2a5e; box-shadow:3px 3px 0 rgba(0,0,0,.15);
  padding:9px 18px; cursor:pointer}
.res-playagain:active{box-shadow:1px 1px 0 rgba(0,0,0,.15); transform:translate(2px,2px)}

.reswin-right{flex:0 0 372px; display:flex; flex-direction:column; align-items:stretch}
.reswin-mascot{width:220px; height:auto; align-self:center; margin-bottom:-10px; pointer-events:none}
.cta-stack{display:flex; flex-direction:column; gap:12px}
.res-cta{width:100%; display:flex; align-items:center; gap:10px; height:59px; padding:0 22px; box-sizing:border-box;
  font-family:Poppins,sans-serif; font-weight:600; font-size:18px; color:#2e2a5e; text-decoration:none;
  background:#d2d0d0; border:2px solid #fff; cursor:pointer}
.res-cta em{margin-left:auto; color:#756df3; font-style:normal; font-weight:700}
.res-cta-ico{font-size:16px}
.res-cta-save{background:#ffcb5c; border-width:3px; font-weight:700; box-shadow:4px 4px 0 rgba(0,0,0,.15); justify-content:center; gap:12px}
.res-cta-save:active{box-shadow:2px 2px 0 rgba(0,0,0,.15)}

.reswin-footer{display:flex; align-items:center; justify-content:space-between;
  background:#2e2a5e; border-top:1px solid #fff; padding:11px 20px}
.reswin-footer span:first-child{color:#f8cc8a; font-weight:bold; font-size:15px}
.reswin-footer span:last-child{color:#fff; font-size:16px}

@media (max-width:820px){
  .reswin-body{flex-direction:column; gap:20px; padding:18px; align-items:stretch}
  .reswin-left{width:100%}
  .reswin-right{flex-basis:auto; width:100%; min-height:0; display:flex; flex-direction:column; align-items:center}
  .reswin-mascot{position:static; width:190px}
  .cta-stack{position:static; width:100%; margin-top:12px}
  .res-title{font-size:24px}
  .score-box{font-size:52px; height:84px; max-width:none}
  .stat b{font-size:18px}
}

/* ===== SECURITY DISCLOSURE BANNER (credit: Nitzan Kletter / Daylight) ===== */
.secbanner{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  background:var(--mb-navy); color:#fff; text-decoration:none;
  font-family:'Poppins',"Segoe UI",sans-serif; font-size:13.5px; font-weight:500;
  line-height:1.35; text-align:center; padding:9px 18px;
}
.secbanner:hover{background:#2c2a52}
.secbanner-txt b{color:var(--mb-yellow); font-weight:700}
.secbanner-arrow{color:var(--mb-yellow); font-weight:700}
@media (max-width:560px){
  .secbanner{font-size:12.5px; padding:8px 12px; gap:8px}
  .secbanner-txt{flex-basis:100%}
}