*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#10141d;color:#fff;font-family:Inter,"Segoe UI",Arial,sans-serif}
button,a{font:inherit}
button{border:0}
.lobby{position:relative;width:100vw;height:100vh;min-width:1024px;min-height:650px;overflow:hidden}
.scene{position:absolute;inset:0;background:url("../img/background.png") center/cover no-repeat}
.edge-atmosphere{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(13,10,10,.11),transparent 14%,transparent 84%,rgba(8,11,18,.11)),
    linear-gradient(180deg,rgba(8,9,14,.025),transparent 16%,transparent 86%,rgba(8,9,14,.07))
}
.glass{
  background:linear-gradient(180deg,rgba(26,34,49,.72),rgba(12,18,28,.78));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(16px) saturate(.95);
  -webkit-backdrop-filter:blur(16px) saturate(.95);
  box-shadow:0 12px 30px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.07)
}

/* LEFT MENU — anchored to viewport edge, not a centered 16:9 stage */
.sidebar{
  position:absolute;z-index:10;
  left:clamp(22px,1.6vw,30px);
  top:clamp(48px,6.5vh,66px);
  bottom:clamp(42px,5.8vh,58px);
  width:clamp(145px,9.4vw,158px);
  background:transparent
}
.brand{font:500 clamp(30px,2.2vw,38px)/1 Georgia,serif;letter-spacing:-1px}
.brand span{color:#e79bbb;font-size:.86em}
.brand-script,.side-footer{
  font-family:"Segoe Print","Bradley Hand",cursive;font-style:italic;
  color:#f1ddb6;text-shadow:0 2px 8px rgba(0,0,0,.35)
}
.brand-script{margin:17px 0 clamp(48px,6.0vh,60px) 4px;font-size:clamp(13px,.95vw,16px);line-height:1.08;transform:rotate(-4deg)}
.side-nav{display:grid;gap:clamp(8px,1.05vh,11px)}
.side-item{
  height:clamp(39px,4.5vh,44px);
  display:flex;align-items:center;gap:13px;
  padding:0 13px;color:#fff;text-decoration:none;
  border:1px solid transparent;border-radius:15px;
  font-size:clamp(10px,.72vw,12px);text-shadow:0 1px 3px rgba(0,0,0,.35)
}
.side-item svg{
  width:25px;height:25px;flex:0 0 25px;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}
.side-item b{font-weight:500}
.side-item.active{
  background:linear-gradient(90deg,rgba(255,190,72,.18),rgba(72,49,27,.12));
  border-color:rgba(255,202,93,.90);
  box-shadow:0 0 16px rgba(255,166,44,.35),inset 0 0 14px rgba(255,210,121,.045)
}
.side-item:hover{background:rgba(255,255,255,.04)}
.side-footer{position:absolute;left:4px;bottom:0;font-size:clamp(12px,.9vw,15px);line-height:1.13;transform:rotate(-4deg)}

/* TOP HUD */
.topbar{
  position:absolute;z-index:15;
  top:clamp(14px,1.8vh,19px);
  left:clamp(460px,31.7vw,600px);
  right:clamp(22px,1.6vw,30px);
  height:54px;
  display:flex;align-items:center;justify-content:space-between;
  pointer-events:none
}
.hud-main,.hud-right{pointer-events:auto}
.hud-main{
  width:clamp(470px,31vw,518px);height:52px;border-radius:17px;
  display:flex;align-items:center;padding:5px 8px
}
.avatar{width:42px;height:42px;object-fit:cover;border-radius:50%;border:1px solid rgba(255,221,154,.66);box-shadow:0 0 10px rgba(255,187,70,.12)}
.level{width:102px;margin-left:10px;display:grid;gap:5px}
.level strong{font-size:13px}
.level>span{height:6px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.level i{display:block;width:62%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#58d6eb,#95e4f1);box-shadow:0 0 7px rgba(94,215,235,.24)}
.sep{width:1px;height:31px;margin:0 11px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.26),transparent)}
.hud-stat{display:flex;align-items:center;gap:8px;min-width:116px}
.hud-stat .emoji{font-size:23px}
.hud-stat>div{display:grid}.hud-stat strong{font-size:15px;line-height:1}.hud-stat small{font-size:8.5px;color:rgba(255,255,255,.68);margin-top:2px}
.hud-stat.gem{min-width:100px}
.hud-square{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:#fff;background:rgba(8,12,18,.35);border:1px solid rgba(255,225,163,.36);font-size:22px}
.hud-right{display:flex;align-items:center;gap:12px}
.lang-switch{
  width:clamp(270px,17vw,292px);height:52px;padding:5px;
  display:grid;grid-template-columns:repeat(3,1fr);border-radius:17px
}
.lang{display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:#fff;border-radius:12px;cursor:pointer}
.lang img{
  display:block;width:28px;height:19px;object-fit:cover;border-radius:4px;
  border:1px solid rgba(255,255,255,.30);box-shadow:0 1px 3px rgba(0,0,0,.25)
}
.lang b{font-size:11px;letter-spacing:.035em}
.lang.active{background:linear-gradient(180deg,rgba(255,218,141,.09),rgba(255,255,255,.022));box-shadow:inset 0 0 0 1px rgba(255,222,145,.24)}
.settings{width:48px;height:52px;border-radius:14px;color:#fff;font-size:20px}

/* RIGHT GAME ENTRY — anchored to viewport edge */
.right-stack{
  position:absolute;z-index:12;
  right:clamp(22px,1.6vw,30px);
  top:clamp(92px,10.7vh,108px);
  width:clamp(372px,23.8vw,408px);
  display:grid;gap:12px
}
.game-card{
  position:relative;overflow:hidden;width:100%;isolation:isolate;
  background:#101622;border-radius:22px;
  border:1px solid rgba(255,205,104,.84);
  box-shadow:0 20px 44px rgba(0,0,0,.27),0 0 20px rgba(255,175,45,.13),inset 0 1px rgba(255,255,255,.08);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease
}
.cafe-card{height:clamp(338px,38.8vh,365px)}
.together-card{
  height:clamp(265px,31vh,292px);
  border-color:rgba(237,137,228,.68);
  box-shadow:0 20px 44px rgba(0,0,0,.27),0 0 20px rgba(190,61,219,.13),inset 0 1px rgba(255,255,255,.08)
}
.game-card::after{
  content:"";position:absolute;z-index:4;left:12%;right:12%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,236,187,.88),transparent);pointer-events:none
}
.together-card::after{background:linear-gradient(90deg,transparent,rgba(255,186,235,.84),transparent)}
.game-card:hover{transform:translateY(-3px);border-color:rgba(255,224,153,.94);box-shadow:0 25px 52px rgba(0,0,0,.32),0 0 25px rgba(255,181,50,.17),inset 0 1px rgba(255,255,255,.10)}
.together-card:hover{border-color:rgba(248,191,236,.82);box-shadow:0 25px 52px rgba(0,0,0,.32),0 0 25px rgba(192,69,220,.17),inset 0 1px rgba(255,255,255,.10)}
.game-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform .58s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.cafe-card .game-art{object-position:center 47%;filter:saturate(1.08) contrast(1.035)}
.together-card .game-art{object-position:center 50%;filter:saturate(1.14) contrast(1.045)}
.game-card:hover .game-art{transform:scale(1.055)}
.card-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(9,12,19,.56) 0%,rgba(9,12,19,.18) 46%,rgba(9,12,19,.02) 78%),
    linear-gradient(180deg,rgba(7,10,17,.22),transparent 33%,rgba(8,11,18,.10) 56%,rgba(8,11,18,.89) 100%)
}
.card-overlay.purple{
  background:
    linear-gradient(90deg,rgba(21,9,33,.50),rgba(21,9,33,.12) 53%,rgba(21,9,33,.01) 82%),
    linear-gradient(180deg,rgba(14,8,26,.15),transparent 39%,rgba(14,8,26,.11) 62%,rgba(15,8,27,.90) 100%)
}
.card-copy{position:absolute;z-index:2;left:27px;top:22px;text-shadow:0 2px 9px rgba(0,0,0,.60)}
.title-row{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:650;color:#ffe09b}.title-row .book-mark{font-size:22px}.title-row.pink{color:#f4acd3}
.card-copy h2{margin:11px 0 9px;font:600 clamp(30px,2.15vw,37px)/.91 Georgia,serif;letter-spacing:-1px}
.card-copy p{margin:0;font-size:12px;line-height:1.35;color:rgba(255,255,255,.90)}
.together-copy h2{font-size:clamp(27px,1.9vw,32px)}
.heart-mark{position:absolute;z-index:2;left:49%;top:27%;font:400 34px/1 Georgia,serif;color:#fff0dc;text-shadow:0 0 11px rgba(255,188,90,.36)}
.heart-mark.lower{left:10%;top:49%;color:#ffb7df}
.play-btn{
  position:absolute;z-index:3;left:20px;right:20px;bottom:15px;height:55px;
  border-radius:18px;display:grid;grid-template-columns:45px 1fr 28px;align-items:center;padding:0 14px;cursor:pointer;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease
}
.play-disc{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:17px}
.play-btn strong{font-size:17px;text-align:center}
.play-btn>b{font-size:29px;font-weight:400;justify-self:end}
.play-btn.gold{
  color:#281a07;background:linear-gradient(180deg,#ffe7a5,#f4c25d 50%,#e9a73b);
  border:1px solid rgba(255,244,207,.95);
  box-shadow:0 7px 18px rgba(226,153,37,.24),0 0 14px rgba(255,190,72,.14),inset 0 1px rgba(255,255,255,.72)
}
.play-btn.gold .play-disc{background:rgba(116,74,10,.12)}
.play-btn.violet{
  color:#fff;background:linear-gradient(100deg,#6325d3,#a22be8 52%,#ef4394);
  border:1px solid rgba(255,184,239,.69);
  box-shadow:0 8px 20px rgba(156,42,217,.24),0 0 16px rgba(226,58,174,.14),inset 0 1px rgba(255,255,255,.25)
}
.play-btn.violet .play-disc{background:rgba(255,255,255,.10)}
.play-btn:hover{transform:translateY(-2px);filter:brightness(1.035) saturate(1.06)}
.signature{height:clamp(54px,8.8vh,84px);display:flex;align-items:center;justify-content:center;gap:14px;color:#d7b979;text-align:center}
.signature>i{width:36px;height:1px;background:linear-gradient(90deg,transparent,#d7b979)}
.signature>i:last-child{background:linear-gradient(90deg,#d7b979,transparent)}
.signature div{font-family:"Segoe Print",cursive;font-style:italic;font-size:14px;line-height:1.1}
.signature small{display:block;margin-top:7px;font:700 6.6px/1.5 Georgia,serif;letter-spacing:.17em}
.signature b{display:block;margin-top:4px;font-size:20px}

/* BOTTOM DOCK — true viewport center */
.bottom-dock{
  position:absolute;z-index:13;left:50%;bottom:clamp(28px,5.2vh,49px);transform:translateX(-50%);
  width:clamp(620px,42.2vw,710px);height:clamp(78px,9.2vh,87px);
  border-radius:18px;border-color:rgba(255,203,104,.76);
  display:grid;grid-template-columns:repeat(4,1fr);padding:8px 10px;
  box-shadow:0 14px 32px rgba(0,0,0,.22),0 0 15px rgba(255,177,48,.12),inset 0 1px rgba(255,255,255,.07)
}
.bottom-dock a{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;color:#fff;text-decoration:none}
.bottom-dock a:not(:last-child)::after{content:"";position:absolute;right:0;width:1px;height:48px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.20),transparent)}
.bottom-dock svg{width:34px;height:34px;flex:0 0 34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bottom-dock a>span{height:36px;display:flex;flex-direction:column;justify-content:center;gap:3px}
.bottom-dock b{font-size:11px}.bottom-dock small{font-size:8px;color:rgba(255,255,255,.67)}

@media(max-width:1500px){
  .topbar{left:clamp(400px,29vw,470px)}
  .hud-main{width:470px}
  .right-stack{width:370px}
  .card-copy{left:22px}
  .play-btn{left:16px;right:16px}
}
@media(max-width:1180px){
  .topbar{left:230px}
  .hud-main{width:430px}
  .hud-stat.gem{display:none}
  .lang-switch{width:225px}
  .right-stack{width:340px}
  .bottom-dock{width:560px}
}


/* =========================================================
   STAGE 22 — CINEMATIC JEWEL DOCK
   Built specifically for this page: romantic, cinematic,
   premium, with a jewel-like central PLAY control.
   ========================================================= */

.bottom-dock.cinematic-dock{
  position:absolute !important;
  z-index:18 !important;
  left:50% !important;
  bottom:clamp(24px,4.8vh,45px) !important;
  transform:translateX(-50%) !important;

  width:clamp(660px,43.5vw,760px) !important;
  height:clamp(82px,9.4vh,90px) !important;

  display:grid !important;
  grid-template-columns:1fr 1fr 132px 1fr 1fr !important;
  align-items:center !important;
  gap:0 !important;

  padding:8px 11px !important;

  border-radius:24px !important;

  background:
    radial-gradient(circle at 50% 0%,rgba(255,209,117,.10),transparent 30%),
    linear-gradient(180deg,rgba(31,31,39,.78),rgba(15,18,26,.84)) !important;

  border:1px solid rgba(255,211,121,.64) !important;

  backdrop-filter:blur(20px) saturate(.95) !important;
  -webkit-backdrop-filter:blur(20px) saturate(.95) !important;

  box-shadow:
    0 22px 46px rgba(4,6,10,.28),
    0 0 22px rgba(255,183,53,.08),
    inset 0 1px rgba(255,255,255,.08),
    inset 0 -1px rgba(255,190,76,.04) !important;

  overflow:visible !important;
  isolation:isolate;
}

/* sculpted console silhouette */
.bottom-dock.cinematic-dock::before{
  content:"";
  position:absolute;
  inset:3px;
  z-index:-1;
  border-radius:20px;

  border:1px solid rgba(255,243,204,.055);

  background:
    linear-gradient(180deg,rgba(255,255,255,.026),transparent 34%),
    radial-gradient(circle at 50% 115%,rgba(166,79,183,.045),transparent 30%);

  pointer-events:none;
}

.bottom-dock.cinematic-dock::after{
  content:"";
  position:absolute;
  z-index:-2;
  left:8%;
  right:8%;
  bottom:-17px;
  height:22px;

  border-radius:50%;
  background:rgba(0,0,0,.25);
  filter:blur(14px);

  pointer-events:none;
}

/* subtle gold top energy line */
.dock-topline{
  position:absolute;
  z-index:5;
  top:-1px;
  left:9%;
  right:9%;
  height:1px;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(255,215,132,.24) 18%,
      rgba(255,238,191,.72) 50%,
      rgba(255,215,132,.24) 82%,
      transparent);

  box-shadow:0 0 9px rgba(255,195,81,.12);
}

/* warm/cool light tied to the scene */
.dock-ambient{
  position:absolute;
  z-index:-1;
  bottom:-5px;
  width:30%;
  height:42px;
  border-radius:50%;
  filter:blur(22px);
  opacity:.13;
  pointer-events:none;
}
.dock-ambient-left{left:4%;background:#e9a146}
.dock-ambient-right{right:4%;background:#8065d8}

/* normal nav sectors */
.cinematic-dock .dock-item{
  position:relative !important;
  height:62px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;

  padding:6px 9px !important;

  color:#fff !important;
  text-decoration:none !important;

  border-radius:15px !important;

  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

/* separators stop around the central button */
.cinematic-dock .dock-item[data-dock="lessons"]::after,
.cinematic-dock .dock-item[data-dock="progress"]::after{
  content:"";
  position:absolute;
  right:0;
  top:17%;
  bottom:17%;
  width:1px;

  background:
    linear-gradient(180deg,transparent,rgba(255,255,255,.13),transparent);
}

.cinematic-dock .dock-item:hover{
  transform:translateY(-2px);

  background:
    linear-gradient(180deg,rgba(255,219,145,.045),rgba(255,255,255,.012));
}

.icon-frame{
  width:36px;
  height:36px;
  flex:0 0 36px;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:
    linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.008));

  border:1px solid rgba(255,255,255,.055);

  box-shadow:inset 0 1px rgba(255,255,255,.03);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.icon-frame svg{
  width:26px !important;
  height:26px !important;

  fill:none !important;
  stroke:rgba(255,255,255,.91) !important;
  stroke-width:1.65 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;

  transition:
    stroke .18s ease,
    filter .18s ease,
    transform .18s ease;
}

.dock-copy{
  height:34px !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;

  gap:3px !important;
}

.dock-copy b{
  font-size:10.8px !important;
  font-weight:650 !important;
  line-height:1 !important;

  color:rgba(255,255,255,.95);
}

.dock-copy small{
  font-size:7.2px !important;
  line-height:1 !important;

  color:rgba(255,255,255,.43) !important;

  white-space:nowrap;
}

.cinematic-dock .dock-item:hover .icon-frame{
  transform:translateY(-1px) scale(1.035);

  border-color:rgba(255,219,140,.18);

  background:
    linear-gradient(180deg,rgba(255,220,146,.07),rgba(255,255,255,.01));

  box-shadow:
    0 5px 13px rgba(0,0,0,.08),
    inset 0 1px rgba(255,255,255,.05);
}

.cinematic-dock .dock-item:hover .icon-frame svg{
  stroke:#ffe0a0 !important;
  filter:drop-shadow(0 0 5px rgba(255,197,84,.13));
}

.cinematic-dock .dock-item.active{
  background:
    radial-gradient(circle at 50% 110%,rgba(255,197,81,.08),transparent 55%),
    linear-gradient(180deg,rgba(255,221,149,.025),rgba(255,255,255,.005));
}

.cinematic-dock .dock-item.active .icon-frame{
  border-color:rgba(255,220,143,.24);

  background:
    radial-gradient(circle at 50% 35%,rgba(255,219,141,.11),transparent 68%),
    linear-gradient(180deg,rgba(255,223,151,.05),rgba(255,255,255,.01));

  box-shadow:
    0 0 12px rgba(255,195,74,.05),
    inset 0 1px rgba(255,255,255,.05);
}

.cinematic-dock .dock-item.active .icon-frame svg{
  stroke:#ffe2a4 !important;
  filter:
    drop-shadow(0 0 4px rgba(255,205,102,.20))
    drop-shadow(0 0 8px rgba(255,181,48,.06));
}

.cinematic-dock .dock-item.active .dock-copy b{
  color:#ffe7b5 !important;
}

/* CENTRAL JEWEL PLAY BUTTON */
.dock-play{
  position:relative;
  z-index:8;

  align-self:center;
  justify-self:center;

  width:118px;
  height:96px;

  margin-top:-20px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  background:transparent;
  color:#fff;

  border:0;
}

.dock-play::before{
  content:"";
  position:absolute;
  z-index:-2;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);

  width:104px;
  height:76px;

  border-radius:30px;

  background:
    radial-gradient(circle at 50% 35%,rgba(255,211,122,.14),rgba(22,21,28,.93) 58%,rgba(10,13,20,.96));

  border:1px solid rgba(255,211,123,.62);

  box-shadow:
    0 12px 26px rgba(0,0,0,.26),
    0 0 17px rgba(255,180,49,.10),
    inset 0 1px rgba(255,255,255,.09);
}

.dock-play::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:43%;
  transform:translate(-50%,-50%);

  width:72px;
  height:72px;

  border-radius:50%;

  background:
    radial-gradient(circle at 45% 32%,#ffeeb7 0 10%,#f7c55f 32%,#c37a22 72%,#6b3f16 100%);

  border:2px solid rgba(255,239,189,.82);

  box-shadow:
    0 8px 18px rgba(0,0,0,.24),
    0 0 19px rgba(255,189,55,.21),
    inset 0 2px rgba(255,255,255,.43),
    inset 0 -5px rgba(96,50,10,.20);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.play-ring{
  position:absolute;
  z-index:2;
  top:20px;
  left:50%;
  transform:translateX(-50%);

  width:62px;
  height:62px;

  display:grid;
  place-items:center;

  border-radius:50%;

  border:1px solid rgba(104,58,8,.18);

  pointer-events:none;
}

.play-core{
  margin-left:3px;

  font-size:23px;
  line-height:1;

  color:#2e1c07;

  text-shadow:0 1px rgba(255,245,202,.25);
}

.play-label{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:-1px;
  transform:translateX(-50%);

  min-width:92px;

  display:flex;
  flex-direction:column;
  align-items:center;

  pointer-events:none;
}

.play-label small{
  font-size:5.7px;
  font-weight:900;
  letter-spacing:.12em;

  color:rgba(255,224,165,.64);
}

.play-label strong{
  margin-top:1px;

  font-size:11px;
  line-height:1;

  letter-spacing:.07em;

  color:#ffe8b4;

  text-shadow:0 1px 6px rgba(0,0,0,.32);
}

.dock-play:hover::after{
  transform:translate(-50%,-50%) scale(1.055);

  filter:saturate(1.07) brightness(1.035);

  box-shadow:
    0 10px 22px rgba(0,0,0,.27),
    0 0 25px rgba(255,189,55,.28),
    inset 0 2px rgba(255,255,255,.50),
    inset 0 -5px rgba(96,50,10,.18);
}

.dock-play:hover .play-core{
  transform:scale(1.06);
}

.dock-play:active::after{
  transform:translate(-50%,-50%) scale(.97);
}

/* center base connection so the play control feels built-in */
.dock-play .play-ring::after{
  content:"";
  position:absolute;
  z-index:-1;

  left:50%;
  bottom:-18px;
  transform:translateX(-50%);

  width:72px;
  height:20px;

  background:
    radial-gradient(ellipse at top,rgba(255,194,72,.11),transparent 70%);

  filter:blur(5px);
}

/* responsive behavior preserves the one-piece feel */
@media(max-width:1400px){
  .bottom-dock.cinematic-dock{
    width:650px !important;
    grid-template-columns:1fr 1fr 118px 1fr 1fr !important;
  }

  .dock-copy small{
    font-size:6.7px !important;
  }

  .dock-play{
    width:108px;
  }

  .dock-play::before{
    width:96px;
  }
}

@media(max-width:1120px){
  .bottom-dock.cinematic-dock{
    width:590px !important;
    grid-template-columns:1fr 1fr 108px 1fr 1fr !important;
  }

  .dock-copy small{
    display:none !important;
  }

  .dock-copy{
    height:auto !important;
  }

  .cinematic-dock .dock-item{
    gap:6px !important;
    padding:5px 6px !important;
  }

  .icon-frame{
    width:33px;
    height:33px;
    flex-basis:33px;
  }

  .icon-frame svg{
    width:24px !important;
    height:24px !important;
  }
}

@media(max-width:760px){
  .bottom-dock.cinematic-dock{
    width:calc(100vw - 24px) !important;
    min-width:0 !important;
    grid-template-columns:1fr 1fr 96px 1fr 1fr !important;
  }

  .dock-copy{
    display:none !important;
  }

  .dock-play{
    width:92px;
  }

  .dock-play::before{
    width:84px;
  }
}


/* =========================================================
   STAGE 23 — SIGNATURE LOBBY DOCK
   Research-driven refinement:
   - one anchored shell integrated with the scene
   - primary gameplay entry visually dominant
   - secondary navigation deliberately quieter
   - minimal text, no stacked utility bar
   - responsive without changing hierarchy
   ========================================================= */

.bottom-dock.signature-dock{
  position:absolute !important;
  z-index:18 !important;
  left:50% !important;
  bottom:clamp(22px,4.2vh,40px) !important;
  transform:translateX(-50%) !important;

  width:clamp(650px,42vw,735px) !important;
  height:clamp(80px,8.8vh,88px) !important;

  display:grid !important;
  grid-template-columns:1fr 1fr 126px 1fr 1fr !important;
  align-items:center !important;
  gap:0 !important;

  padding:8px 12px !important;
  overflow:visible !important;

  border-radius:22px !important;

  /* less generic glass, more lacquered game-shell */
  background:
    linear-gradient(180deg,rgba(39,37,42,.88),rgba(17,20,28,.91)) !important;

  border:1px solid rgba(255,207,112,.60) !important;

  backdrop-filter:blur(16px) saturate(.90) !important;
  -webkit-backdrop-filter:blur(16px) saturate(.90) !important;

  box-shadow:
    0 20px 40px rgba(4,6,10,.30),
    0 0 18px rgba(255,179,51,.07),
    inset 0 1px rgba(255,255,255,.07),
    inset 0 -1px rgba(255,193,79,.035) !important;

  isolation:isolate;
}

/* outer ground shadow */
.bottom-dock.signature-dock::after{
  content:"";
  position:absolute;
  z-index:-3;
  left:9%;
  right:9%;
  bottom:-15px;
  height:18px;
  border-radius:50%;
  background:rgba(0,0,0,.28);
  filter:blur(13px);
  pointer-events:none;
}

/* inner manufactured shell */
.bottom-dock.signature-dock::before{
  content:"";
  position:absolute;
  inset:3px;
  z-index:-1;
  border-radius:18px;
  border:1px solid rgba(255,244,209,.045);
  background:
    linear-gradient(180deg,rgba(255,255,255,.022),transparent 38%);
  pointer-events:none;
}

/* top accent line */
.dock-shell-highlight{
  position:absolute;
  z-index:6;
  left:10%;
  right:10%;
  top:-1px;
  height:1px;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(255,214,127,.22) 18%,
      rgba(255,239,195,.68) 50%,
      rgba(255,214,127,.22) 82%,
      transparent);
  box-shadow:0 0 8px rgba(255,194,78,.10);
  pointer-events:none;
}

/* scene-aware color reflection */
.dock-shell-glow{
  position:absolute;
  z-index:-1;
  bottom:-2px;
  width:29%;
  height:28px;
  border-radius:50%;
  filter:blur(20px);
  opacity:.12;
}
.dock-shell-glow.warm{left:4%;background:#e49b3d}
.dock-shell-glow.cool{right:4%;background:#7564c9}

/* secondary nav is intentionally restrained */
.signature-dock .dock-item{
  position:relative !important;
  height:58px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  padding:6px 8px !important;

  color:#fff !important;
  text-decoration:none !important;
  border-radius:13px !important;

  transition:
    transform .18s ease,
    background .18s ease;
}

/* separators only between same-side pairs */
.signature-dock .dock-item[data-dock="lessons"]::after,
.signature-dock .dock-item[data-dock="progress"]::after{
  content:"";
  position:absolute;
  right:0;
  top:20%;
  bottom:20%;
  width:1px;
  background:
    linear-gradient(180deg,transparent,rgba(255,255,255,.11),transparent);
}

/* tactile but quiet hover */
.signature-dock .dock-item:hover{
  transform:translateY(-2px);
  background:rgba(255,223,155,.026);
}

.signature-dock .icon-frame{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:11px;

  background:
    linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.006));
  border:1px solid rgba(255,255,255,.048);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.signature-dock .icon-frame svg{
  width:25px !important;
  height:25px !important;
  fill:none !important;
  stroke:rgba(255,255,255,.88) !important;
  stroke-width:1.6 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;

  transition:
    stroke .18s ease,
    filter .18s ease,
    transform .18s ease;
}

.signature-dock .dock-copy{
  height:32px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:3px !important;
}

.signature-dock .dock-copy b{
  font-size:10.5px !important;
  font-weight:650 !important;
  line-height:1 !important;
  color:rgba(255,255,255,.94);
}

.signature-dock .dock-copy small{
  font-size:6.8px !important;
  line-height:1 !important;
  color:rgba(255,255,255,.39) !important;
  white-space:nowrap;
}

.signature-dock .dock-item:hover .icon-frame{
  transform:translateY(-1px) scale(1.03);
  border-color:rgba(255,218,137,.15);
  background:
    linear-gradient(180deg,rgba(255,221,146,.052),rgba(255,255,255,.008));
}

.signature-dock .dock-item:hover .icon-frame svg{
  stroke:#ffe0a0 !important;
  filter:drop-shadow(0 0 4px rgba(255,196,81,.12));
}

.signature-dock .dock-item.active{
  background:
    radial-gradient(circle at 50% 115%,rgba(255,193,74,.065),transparent 58%);
}

.signature-dock .dock-item.active .icon-frame{
  border-color:rgba(255,219,140,.22);
  background:
    radial-gradient(circle at 50% 35%,rgba(255,218,139,.09),transparent 70%),
    linear-gradient(180deg,rgba(255,222,148,.04),rgba(255,255,255,.006));
}

.signature-dock .dock-item.active .icon-frame svg{
  stroke:#ffe2a5 !important;
  filter:drop-shadow(0 0 4px rgba(255,204,99,.18));
}

.signature-dock .dock-item.active .dock-copy b{
  color:#ffe6b2 !important;
}

/* central play control: one clear gameplay entry */
.signature-dock .dock-play{
  position:relative;
  z-index:8;
  align-self:center;
  justify-self:center;

  width:116px;
  height:100px;
  margin-top:-22px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;
  background:transparent;
  cursor:pointer;
  border:0;
}

/* structural pedestal */
.signature-dock .dock-play::before{
  content:"";
  position:absolute;
  z-index:-3;
  left:50%;
  top:53%;
  transform:translate(-50%,-50%);

  width:108px;
  height:72px;

  border-radius:26px;

  background:
    linear-gradient(180deg,rgba(38,34,34,.96),rgba(14,17,24,.98));

  border:1px solid rgba(255,209,117,.56);

  box-shadow:
    0 13px 27px rgba(0,0,0,.30),
    0 0 15px rgba(255,179,49,.08),
    inset 0 1px rgba(255,255,255,.07);
}

/* actual gold jewel */
.signature-dock .dock-play::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:40%;
  transform:translate(-50%,-50%);

  width:70px;
  height:70px;
  border-radius:50%;

  background:
    radial-gradient(circle at 40% 28%,
      #fff0b7 0 8%,
      #ffd87d 20%,
      #f2b64e 48%,
      #c77b24 76%,
      #784515 100%);

  border:2px solid rgba(255,239,188,.80);

  box-shadow:
    0 9px 20px rgba(0,0,0,.27),
    0 0 18px rgba(255,188,54,.18),
    inset 0 2px rgba(255,255,255,.38),
    inset 0 -5px rgba(96,50,9,.18);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.play-halo{
  position:absolute;
  z-index:-2;
  top:3px;
  left:50%;
  transform:translateX(-50%);
  width:88px;
  height:88px;
  border-radius:50%;
  background:rgba(255,187,54,.08);
  filter:blur(16px);
  opacity:.75;
  pointer-events:none;
}

.signature-dock .play-ring{
  position:absolute;
  z-index:2;
  top:14px;
  left:50%;
  transform:translateX(-50%);

  width:62px;
  height:62px;

  display:grid;
  place-items:center;

  border-radius:50%;
  border:1px solid rgba(104,58,8,.15);
}

.signature-dock .play-core{
  margin-left:3px;
  font-size:22px;
  color:#2e1d08;
  text-shadow:0 1px rgba(255,247,205,.23);
}

.signature-dock .play-label{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:1px;
  transform:translateX(-50%);

  min-width:96px;

  display:flex;
  flex-direction:column;
  align-items:center;
}

.signature-dock .play-label small{
  font-size:5.6px;
  font-weight:900;
  letter-spacing:.12em;
  color:rgba(255,226,166,.55);
}

.signature-dock .play-label strong{
  margin-top:2px;
  font-size:11px;
  letter-spacing:.08em;
  line-height:1;
  color:#ffe7b1;
  text-shadow:0 1px 5px rgba(0,0,0,.35);
}

.signature-dock .dock-play:hover::after{
  transform:translate(-50%,-50%) scale(1.055);
  filter:saturate(1.06) brightness(1.035);

  box-shadow:
    0 11px 23px rgba(0,0,0,.28),
    0 0 25px rgba(255,188,54,.25),
    inset 0 2px rgba(255,255,255,.44),
    inset 0 -5px rgba(96,50,9,.17);
}

.signature-dock .dock-play:active::after{
  transform:translate(-50%,-50%) scale(.97);
}

/* motion respects accessibility */
@media(prefers-reduced-motion:no-preference){
  .signature-dock .dock-play{
    animation:signatureDockIn .38s cubic-bezier(.2,.75,.2,1) both;
  }

  @keyframes signatureDockIn{
    from{opacity:0;transform:translateY(8px) scale(.97)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }
}

/* responsive hierarchy remains fixed: play is always center */
@media(max-width:1400px){
  .bottom-dock.signature-dock{
    width:640px !important;
    grid-template-columns:1fr 1fr 116px 1fr 1fr !important;
  }

  .signature-dock .dock-copy small{
    font-size:6.3px !important;
  }

  .signature-dock .dock-play{
    width:106px;
  }

  .signature-dock .dock-play::before{
    width:98px;
  }
}

@media(max-width:1120px){
  .bottom-dock.signature-dock{
    width:580px !important;
    grid-template-columns:1fr 1fr 104px 1fr 1fr !important;
  }

  .signature-dock .dock-copy small{
    display:none !important;
  }

  .signature-dock .dock-copy{
    height:auto !important;
  }

  .signature-dock .dock-item{
    gap:6px !important;
    padding:5px 6px !important;
  }

  .signature-dock .icon-frame{
    width:31px;
    height:31px;
    flex-basis:31px;
  }

  .signature-dock .icon-frame svg{
    width:23px !important;
    height:23px !important;
  }
}

@media(max-width:760px){
  .bottom-dock.signature-dock{
    width:calc(100vw - 20px) !important;
    min-width:0 !important;
    grid-template-columns:1fr 1fr 92px 1fr 1fr !important;
  }

  .signature-dock .dock-copy{
    display:none !important;
  }

  .signature-dock .dock-play{
    width:88px;
  }

  .signature-dock .dock-play::before{
    width:82px;
  }

  .signature-dock .dock-play::after{
    width:62px;
    height:62px;
  }
}


/* ==========================================================
   STAGE 24 — PREMIUM COMMAND DOCK
   Clean one-piece console. No protruding circular ornament.
   ========================================================== */

.bottom-dock.premium-command-dock{
  position:absolute !important;
  z-index:20 !important;
  left:50% !important;
  bottom:clamp(26px,4.3vh,42px) !important;
  transform:translateX(-50%) !important;

  width:clamp(690px,44vw,790px) !important;
  height:82px !important;
  padding:7px !important;

  display:grid !important;
  grid-template-columns:1fr 1fr 1.22fr 1fr 1fr !important;
  align-items:stretch !important;
  gap:5px !important;

  overflow:hidden !important;
  isolation:isolate;

  border-radius:21px !important;
  border:1px solid rgba(255,211,124,.62) !important;

  background:
    radial-gradient(ellipse at 50% 115%,rgba(201,119,61,.10),transparent 45%),
    linear-gradient(180deg,rgba(37,35,42,.82),rgba(14,17,24,.91)) !important;

  backdrop-filter:blur(19px) saturate(.92) !important;
  -webkit-backdrop-filter:blur(19px) saturate(.92) !important;

  box-shadow:
    0 19px 42px rgba(0,0,0,.29),
    0 2px 0 rgba(0,0,0,.24),
    0 0 0 1px rgba(255,186,68,.035),
    inset 0 1px rgba(255,255,255,.085),
    inset 0 -1px rgba(255,187,65,.035) !important;
}

.bottom-dock.premium-command-dock::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:3px;
  border-radius:17px;
  border:1px solid rgba(255,247,218,.045);
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 45%);
  pointer-events:none;
}

.bottom-dock.premium-command-dock::after{
  content:"";
  position:absolute;
  z-index:-2;
  left:12%;
  right:12%;
  bottom:-14px;
  height:18px;
  border-radius:50%;
  background:rgba(0,0,0,.28);
  filter:blur(13px);
  pointer-events:none;
}

.premium-command-dock .dock-shine{
  position:absolute;
  z-index:6;
  left:12%;
  right:12%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,218,139,.28),rgba(255,244,204,.60),rgba(255,218,139,.28),transparent);
  pointer-events:none;
}

/* NAV ITEMS */
.premium-command-dock .dock-item{
  position:relative !important;
  min-width:0 !important;
  height:auto !important;
  padding:7px 8px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  border-radius:13px !important;
  color:#fff !important;
  text-decoration:none !important;

  background:transparent !important;
  box-shadow:none !important;

  transition:background .18s ease,transform .18s ease;
}

.premium-command-dock .dock-item::after{
  content:"" !important;
  position:absolute !important;
  right:-3px !important;
  top:20% !important;
  bottom:20% !important;
  width:1px !important;
  height:auto !important;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.11),transparent) !important;
}

.premium-command-dock .dock-item[data-dock="games"]::after,
.premium-command-dock .dock-item[data-dock="trips"]::after{
  display:none !important;
}

.premium-command-dock .dock-item:hover{
  transform:translateY(-1px) !important;
  background:linear-gradient(180deg,rgba(255,223,157,.045),rgba(255,255,255,.009)) !important;
}

.premium-command-dock .dock-icon{
  width:35px;
  height:35px;
  flex:0 0 35px;
  display:grid;
  place-items:center;

  border-radius:10px;
  border:1px solid rgba(255,255,255,.065);

  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));

  box-shadow:
    inset 0 1px rgba(255,255,255,.045);
}

.premium-command-dock .dock-icon svg{
  width:24px !important;
  height:24px !important;
  fill:none !important;
  stroke:rgba(255,255,255,.90) !important;
  stroke-width:1.65 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.premium-command-dock .dock-text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  justify-content:center;
}

.premium-command-dock .dock-text b{
  font-size:10.5px !important;
  line-height:1 !important;
  font-weight:650 !important;
  color:rgba(255,255,255,.95) !important;
}

.premium-command-dock .dock-text small{
  font-size:6.7px !important;
  line-height:1 !important;
  color:rgba(255,255,255,.40) !important;
  white-space:nowrap;
}

/* Active state is an inset selection, not a random gold outline */
.premium-command-dock .dock-item.active{
  background:
    radial-gradient(circle at 50% 110%,rgba(255,190,71,.10),transparent 60%),
    linear-gradient(180deg,rgba(255,223,153,.055),rgba(255,255,255,.010)) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,217,135,.09) !important;
}

.premium-command-dock .dock-item.active .dock-icon{
  border-color:rgba(255,218,135,.27);
  background:
    linear-gradient(180deg,rgba(255,222,145,.10),rgba(255,184,68,.025));
}

.premium-command-dock .dock-item.active .dock-icon svg{
  stroke:#ffe1a0 !important;
  filter:drop-shadow(0 0 4px rgba(255,198,84,.18));
}

.premium-command-dock .dock-item.active .dock-text b{
  color:#ffe7b7 !important;
}

/* CENTRAL PLAY — integrated premium CTA */
.premium-command-dock .dock-play{
  position:relative !important;
  z-index:4 !important;

  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:8px 13px !important;

  display:grid !important;
  grid-template-columns:39px 1fr !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;

  border-radius:14px !important;
  border:1px solid rgba(255,223,146,.78) !important;

  color:#2c1d07 !important;
  cursor:pointer !important;

  background:
    radial-gradient(circle at 20% 0%,rgba(255,255,224,.65),transparent 34%),
    linear-gradient(180deg,#ffdf7b 0%,#f3b84f 54%,#d88929 100%) !important;

  box-shadow:
    inset 0 1px rgba(255,255,255,.65),
    inset 0 -3px rgba(125,66,9,.17),
    0 5px 13px rgba(0,0,0,.17),
    0 0 17px rgba(255,185,55,.12) !important;

  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease !important;
}

.premium-command-dock .dock-play::before{
  content:"" !important;
  position:absolute !important;
  inset:2px !important;
  width:auto !important;
  height:auto !important;
  left:2px !important;
  top:2px !important;
  transform:none !important;
  z-index:0 !important;

  border-radius:11px !important;
  border:1px solid rgba(255,249,205,.38) !important;
  background:linear-gradient(112deg,transparent 28%,rgba(255,255,255,.14) 43%,transparent 57%) !important;
  background-size:230% 100% !important;
  box-shadow:none !important;
  pointer-events:none !important;
}

.premium-command-dock .dock-play::after{
  display:none !important;
}

.premium-command-dock .play-icon{
  position:relative;
  z-index:2;

  width:39px;
  height:39px;

  display:grid;
  place-items:center;

  border-radius:50%;
  background:rgba(95,53,7,.12);
  border:1px solid rgba(81,46,6,.18);

  font-size:16px;
  color:#342006;

  box-shadow:
    inset 0 1px rgba(255,255,255,.18);
}

.premium-command-dock .play-text{
  position:relative;
  z-index:2;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
}

.premium-command-dock .play-text small{
  font-size:5.8px;
  font-weight:900;
  letter-spacing:.13em;
  color:rgba(80,48,8,.64);
}

.premium-command-dock .play-text b{
  font-size:18px;
  line-height:1;
  font-weight:850;
  letter-spacing:.055em;
  color:#2d1c06;
}

.premium-command-dock .dock-play:hover{
  transform:translateY(-2px) !important;
  filter:brightness(1.045) saturate(1.03) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.72),
    inset 0 -3px rgba(125,66,9,.15),
    0 8px 18px rgba(0,0,0,.19),
    0 0 22px rgba(255,185,55,.18) !important;
}

.premium-command-dock .dock-play:hover::before{
  animation:premiumPlaySweep .75s ease forwards;
}

@keyframes premiumPlaySweep{
  from{background-position:150% 0}
  to{background-position:-80% 0}
}

.premium-command-dock .dock-play:active{
  transform:translateY(0) scale(.985) !important;
}

/* RESPONSIVE */
@media(max-width:1400px){
  .bottom-dock.premium-command-dock{
    width:650px !important;
    grid-template-columns:1fr 1fr 1.18fr 1fr 1fr !important;
  }

  .premium-command-dock .dock-item{
    gap:6px !important;
    padding:6px !important;
  }

  .premium-command-dock .dock-text small{
    font-size:6.2px !important;
  }
}

@media(max-width:1120px){
  .bottom-dock.premium-command-dock{
    width:580px !important;
  }

  .premium-command-dock .dock-text small{
    display:none !important;
  }

  .premium-command-dock .dock-icon{
    width:32px;
    height:32px;
    flex-basis:32px;
  }

  .premium-command-dock .dock-icon svg{
    width:22px !important;
    height:22px !important;
  }

  .premium-command-dock .play-text small{
    display:none;
  }
}

@media(max-width:760px){
  .bottom-dock.premium-command-dock{
    width:calc(100vw - 22px) !important;
    min-width:0 !important;
    height:72px !important;
    grid-template-columns:1fr 1fr 1.12fr 1fr 1fr !important;
  }

  .premium-command-dock .dock-text{
    display:none !important;
  }

  .premium-command-dock .dock-item{
    padding:5px !important;
  }

  .premium-command-dock .dock-play{
    grid-template-columns:30px 1fr !important;
    gap:5px !important;
    padding:6px !important;
  }

  .premium-command-dock .play-icon{
    width:30px;
    height:30px;
    font-size:12px;
  }

  .premium-command-dock .play-text b{
    font-size:13px;
  }
}


/* =========================================================
   STAGE 26 — RIGHT STACK LOWERED / NOVOSIBIRSK REVEAL
   ========================================================= */

/* Move both right cards down as one unit so the city label can breathe above them. */
.right-stack{
  top:auto !important;
  bottom:clamp(118px,14.2vh,138px) !important;
  right:clamp(22px,1.6vw,30px) !important;
  gap:12px !important;
}

/* The signature below the cards is intentionally removed in Stage 26. */
.signature,
.right-signature{
  display:none !important;
}

/* Slightly tighten the stack so the bottom card sits cleanly above the command dock. */
.cafe-card{
  height:clamp(324px,36.8vh,350px) !important;
}

.together-card{
  height:clamp(245px,28.7vh,272px) !important;
}

/* Preserve visual proportions after the cards move down. */
.card-copy{
  top:20px !important;
}

.play-btn{
  bottom:14px !important;
}

/* Keep enough safe clearance from the bottom dock on shorter screens. */
@media(max-height:860px){
  .right-stack{
    bottom:108px !important;
  }

  .cafe-card{
    height:300px !important;
  }

  .together-card{
    height:228px !important;
  }
}

@media(max-height:760px){
  .right-stack{
    bottom:96px !important;
    gap:9px !important;
  }

  .cafe-card{
    height:270px !important;
  }

  .together-card{
    height:205px !important;
  }
}


/* =========================================================
   STAGE 27 — EXACT BOTTOM ALIGNMENT
   Lower card bottom = bottom command dock bottom.
   ========================================================= */

.right-stack{
  top:auto !important;
  /* Same bottom baseline as the premium command dock */
  bottom:clamp(26px,4.3vh,42px) !important;
  right:clamp(14px,1.15vw,22px) !important;
  gap:12px !important;
}

/* Keep the cards themselves unchanged; only the complete stack moves down. */
@media(max-height:860px){
  .right-stack{
    bottom:clamp(20px,3.5vh,30px) !important;
  }
}

@media(max-height:760px){
  .right-stack{
    bottom:18px !important;
  }
}