/* ============================================================
   Figma screens — "My G Mall Rush"
   Mystery Box / Settings / Missions / Leaderboard / Game Over

   EVERY screen is authored inside a fixed 440x956 .fstage — the Figma frame
   size — and scaled uniformly to the device by --stage-scale (set in ui.js).
   All offsets below are the literal Figma x/y/w/h, so the layout is exact on
   any handset and nothing can be pushed off the bottom.

   Palette from the Figma file:
     orange  #F78024 -> #DD6305      button  #FF7A1C -> #E96100
     ink     #2B2B2B                 panel   #E8E8E8 / #D9D9D9
     track   #3E3E3E                 badge   #F74424 -> #DD1705
   ============================================================ */
:root {
  --fg-orange: #F78024;
  --fg-orange-dk: #DD6305;
  --fg-btn: #FF7A1C;
  --fg-btn-dk: #E96100;
  --fg-ink: #2B2B2B;
  --fg-track: #3E3E3E;
}

.fscreen {
  position: absolute; inset: 0; z-index: 60; overflow: hidden;
  background: rgba(8, 12, 22, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.fscreen.hidden { display: none; }

.fstage {
  position: absolute; left: 50%; top: 50%;
  width: 440px; height: 956px;
  /* --stage-dy nudges the stage clear of asymmetric safe-area insets */
  transform: translate(-50%, -50%) translateY(var(--stage-dy, 0px)) scale(var(--stage-scale, 1));
  transform-origin: center center;
}

/* ---------- shared: back button (Figma x15 y22 48x51 r12) ---------- */
.st-back {
  position: absolute; left: 15px; top: 22px; width: 48px; height: 51px; z-index: 6;
  border: 0; border-radius: 12px; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(180deg, #FF8A2B, #E96100);
  box-shadow: 0 4px 0 #B64D00, 0 6px 14px rgba(0,0,0,.35);
}
.st-back svg { width: 27px; height: 27px; }
.st-back img { width: 28px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
.st-homeglyph { color: #fff; font-size: 27px; line-height: 1; }
.st-back:active { transform: translateY(2px); box-shadow: 0 2px 0 #B64D00; }

/* ---------- shared: G coin token ---------- */
.gcoin, .mb-coin, .ms-coin, .st-coin, .lb-coin {
  border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 400; line-height: 1;
  background: radial-gradient(circle at 34% 30%, #FFA557, var(--fg-orange) 55%, var(--fg-orange-dk));
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.22), 0 2px 5px rgba(0,0,0,.3);
}

/* ============================================================
   MYSTERY BOX  (Figma 07)
   ============================================================ */
.fscreen.mbox {
  background: repeating-conic-gradient(from 0deg at 50% 52%, #58C9D8 0deg 7deg, #4FBECD 7deg 14deg), #4FBECD;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* wallet: coin 49 @ x274 y22, pill 148x38 @ x277 y28 r12, "1,240" 23px @ x347 */
.mb-wallet { position: absolute; left: 274px; top: 22px; width: 151px; height: 49px; }
.mb-wallet::before {
  content: ""; position: absolute; left: 3px; top: 6px; width: 148px; height: 38px;
  background: #fff; border-radius: 12px; box-shadow: 0 3px 8px rgba(0,0,0,.28);
}
.mb-coin { position: absolute; left: 0; top: 0; width: 49px; height: 49px; font-size: 31px; }
.mb-wallet strong { position: absolute; left: 63px; top: 6px; width: 88px; height: 38px;
  display: grid; place-items: center; color: #000; font-size: 23px; font-weight: 700; }

/* title 288x94 @ x76 y139 r22, inner 264x73 @ x87 y149 */
.mb-title {
  position: absolute; left: 76px; top: 139px; width: 288px; height: 94px;
  border-radius: 22px; border: 5px solid #fff;
  background: linear-gradient(180deg, #63E0F5, #1E7FD6);
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.mb-title b { color: #fff; font-size: 36px; font-weight: 700; line-height: 1.05; letter-spacing: .3px; }
.mb-title i { color: #21B7FC; font-size: 22px; font-weight: 700; font-style: normal; line-height: 1.1; }

/* These state layers span the whole stage, so they must NOT eat clicks —
   otherwise they sit on top of the back button and swallow it. Only the two
   real controls inside them take pointer events. */
.mb-stage { position: absolute; inset: 0; pointer-events: none; }
.mb-stage.hidden { display: none; }
.mb-cube, .mb-claim { pointer-events: auto; }

/* closed box sits where the reward coin lands (x140 y398 160x160) */
.mb-cube {
  position: absolute; left: 125px; top: 383px; width: 190px; height: 190px;
  background: none; border: 0; cursor: pointer; animation: mboxIdle 1.6s ease-in-out infinite;
}
.mb-cube img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0,0,0,.3)); }
.mb-cube.locked { animation: none; opacity: .55; filter: grayscale(.7); }
@keyframes mboxIdle { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
.mb-hint { position: absolute; left: 0; right: 0; top: 600px; text-align: center;
  color: #fff; font-weight: 700; font-size: 17px; text-shadow: 0 2px 6px rgba(0,0,0,.3); }

/* reward: confetti art x63 y353 340x246, glow x113 y371 214, coin x140 y398 160 */
.mb-art { position: absolute; left: 63px; top: 353px; width: 340px; height: 246px; object-fit: contain; }
.mb-glow {
  position: absolute; left: 113px; top: 371px; width: 214px; height: 214px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.92), rgba(255,255,255,0) 66%);
}
.mb-bigcoin {
  position: absolute; left: 140px; top: 398px; width: 160px; height: 160px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 102px; line-height: 1;
  background: radial-gradient(circle at 34% 28%, #FFA557, var(--fg-orange) 58%, var(--fg-orange-dk));
  box-shadow: inset 0 -8px 18px rgba(0,0,0,.24), 0 10px 30px rgba(0,0,0,.3);
  animation: mboxPop .5s cubic-bezier(.2,1.6,.4,1);
}
@keyframes mboxPop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mb-amount { position: absolute; left: 0; right: 0; top: 552px; text-align: center;
  color: #fff; font-size: 41px; font-weight: 700; text-shadow: 0 4px 10px rgba(0,0,0,.28); }
/* Claim 185x60 @ x128 y842 r40, inner 170x47 */
.mb-claim {
  position: absolute; left: 128px; top: 842px; width: 185px; height: 60px;
  border-radius: 40px; border: 5px solid #fff; cursor: pointer;
  background: linear-gradient(180deg, var(--fg-btn), var(--fg-btn-dk));
  color: #fff; font-size: 25px; font-weight: 700;
  box-shadow: 0 7px 20px rgba(0,0,0,.36);
}
.mb-claim:active { transform: translateY(2px); }

/* ============================================================
   SETTINGS  (Figma 04)
   ============================================================ */
/* active-mission banner 252x69 @ x86 y22 r11 */
.st-quest {
  position: absolute; left: 86px; top: 22px; width: 252px; height: 69px; border-radius: 11px;
  background: rgba(38,38,38,.86); border: 2px solid var(--fg-orange); overflow: hidden;
}
.st-quest b { position: absolute; left: 55px; top: 11px; color: #fff; font-size: 15px; font-weight: 700; }
.st-questbar {
  position: absolute; left: 51px; top: 40px; width: 174px; height: 15px; border-radius: 16px;
  background: var(--fg-track); overflow: hidden; display: block;
}
.st-questbar i { position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(180deg, #FF9A3D, var(--fg-orange)); border-radius: 16px; }
.st-questbar em { position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 11px; font-weight: 700; font-style: normal; }

/* wallet: coin 29 @ x350 y22, pill 73x19 @ x352 y27 r5, "1,240" 13px @ x384 */
.st-wallet { position: absolute; left: 350px; top: 22px; width: 89px; height: 29px; }
.st-wallet::before { content: ""; position: absolute; left: 2px; top: 5px; width: 73px; height: 19px;
  background: #fff; border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,.26); }
.st-coin { position: absolute; left: 0; top: 0; width: 29px; height: 29px; font-size: 18px; }
.st-wallet strong { position: absolute; left: 32px; top: 5px; width: 43px; height: 19px;
  display: grid; place-items: center; color: #000; font-size: 13px; font-weight: 700; }

/* SETTINGS pill 233x76 @ x103 y204 r50, inner 214x59 */
.st-pill {
  position: absolute; left: 103px; top: 204px; width: 233px; height: 76px;
  border-radius: 50px; border: 5px solid #fff; z-index: 3;
  background: linear-gradient(180deg, var(--fg-btn), var(--fg-btn-dk));
  box-shadow: 0 7px 18px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: #fff; font-size: 31px; font-weight: 700; letter-spacing: .5px;
}
.st-pillic { font-size: 26px; }
.st-outer {
  position: absolute; left: 17px; top: 230px; width: 406px; height: 431px; border-radius: 25px;
  background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 44px rgba(0,0,0,.42);
}
.st-inner {
  position: absolute; left: 32px; top: 244px; width: 375px; height: 404px;
  border-radius: 13px; background: #E8E8E8; overflow: hidden;
}
.st-x {
  position: absolute; left: 397px; top: 228px; width: 28px; height: 29px; z-index: 4;
  border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--fg-btn), var(--fg-btn-dk)); box-shadow: 0 3px 8px rgba(0,0,0,.34);
}
.st-x svg { width: 18px; height: 18px; }

/* AUDIO card 340x186 @ x53 y318 r13 — coordinates below are card-relative */
.set-card {
  position: absolute; left: 21px; top: 74px; width: 340px; height: 186px;
  background: #fff; border-radius: 13px; box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
.set-card.collapsed { height: 62px; }
.set-card.collapsed .set-rows { display: none; }
.set-card.collapsed .set-chev { transform: rotate(180deg); }
.set-head { position: absolute; left: 0; top: 0; width: 100%; height: 62px; cursor: pointer; }
.set-ic { position: absolute; left: 11px; top: 9px; width: 40px; height: 42px; border-radius: 8px;
  display: grid; place-items: center; background: linear-gradient(180deg, #FD941A, #F26722); }
.set-ic img { width: 29px; height: 21px; object-fit: contain; filter: brightness(0) invert(1); }
.set-headtext { position: absolute; left: 62px; top: 12px; }
.set-headtext strong { display: block; color: var(--fg-ink); font-size: 16px; font-weight: 700; line-height: 1.2; }
.set-headtext small { display: block; color: var(--fg-ink); font-size: 11px; font-weight: 350; opacity: .8; margin-top: 5px; }
.set-chev { position: absolute; left: 302px; top: 22px; width: 10px; height: 7px; transition: transform .2s; }
.set-chev::before { content: ""; position: absolute; inset: 0;
  border-left: 2px solid #8A8A8A; border-top: 2px solid #8A8A8A;
  transform: rotate(45deg) scale(.8); transform-origin: center; }
.set-rows { position: absolute; left: 0; top: 62px; width: 100%; }
.set-row { position: relative; height: 42px; border-top: 1px solid #EDEDED; }
.set-row:first-child { border-top: 0; }
.set-rowic { position: absolute; left: 21px; top: 11px; width: 22px; text-align: center;
  color: var(--fg-orange); font-size: 16px; }
.set-label { position: absolute; left: 62px; top: 0; height: 100%; display: flex; align-items: center;
  color: var(--fg-ink); font-size: 11px; font-weight: 700; }
.set-range {
  position: absolute; left: 148px; top: 0; width: 93px; height: 100%;
  -webkit-appearance: none; appearance: none; background: none; margin: 0; cursor: pointer;
}
.set-range::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: #D6D6D6; }
.set-range::-moz-range-track { height: 3px; border-radius: 3px; background: #D6D6D6; }
.set-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--fg-orange); margin-top: -4.5px; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.set-range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%;
  background: var(--fg-orange); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.set-range::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--fg-orange); }
.set-pct { position: absolute; left: 258px; top: 0; width: 24px; height: 100%;
  display: flex; align-items: center; color: var(--fg-ink); font-size: 10px; font-weight: 700; }
.set-spacer { display: none; }
.set-toggle {
  position: absolute; left: 289px; top: 12px; width: 33px; height: 17px; border-radius: 56px;
  border: 0; cursor: pointer; background: #CFCFCF; transition: background .18s;
}
.set-toggle::after { content: ""; position: absolute; top: 1px; left: 1px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.set-toggle.on { background: linear-gradient(180deg, #FD941A, #F26722); }
.set-toggle.on::after { transform: translateX(16px); }

/* divider x46 y534 348 wide -> panel-relative */
.set-divider { position: absolute; left: 14px; top: 290px; width: 348px; height: 1px; background: #C8C8C8; }
/* ABOUT 70x69 @ x188 y556 r11 */
.set-about {
  position: absolute; left: 156px; top: 312px; width: 70px; height: 69px; border-radius: 11px;
  border: 0; cursor: pointer; background: #FDFDFD; display: grid; place-items: center; gap: 2px;
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
}
.set-about span { font-size: 30px; color: var(--fg-orange); line-height: 1; }
.set-about small { font-size: 7px; font-weight: 700; color: var(--fg-ink); }
.set-aboutbox { position: absolute; left: 20px; right: 20px; top: 386px; text-align: center;
  color: #555; font-size: 10px; line-height: 1.5; }
.set-aboutbox.hidden { display: none; }

/* ============================================================
   MISSIONS  (Figma 05)
   ============================================================ */
.ms-wallet { position: absolute; left: 323px; top: 22px; width: 102px; height: 39px; }
.ms-wallet::before { content: ""; position: absolute; left: 2px; top: 7px; width: 100px; height: 26px;
  background: #fff; border-radius: 8px; box-shadow: 0 3px 8px rgba(0,0,0,.28); }
.ms-coin { position: absolute; left: 0; top: 0; width: 39px; height: 39px; font-size: 25px; }
.ms-wallet strong { position: absolute; left: 46px; top: 7px; width: 56px; height: 26px;
  display: grid; place-items: center; color: #000; font-size: 18px; font-weight: 700; }

/* tabs: DAILY 127x33 @ x43 y122, WEEKLY 127x33 @ x270 y125 */
.ms-tab {
  position: absolute; width: 127px; height: 33px; border: 0; cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
}
.ms-tab.daily  { left: 43px;  top: 122px; background: #E9E9E9; border-radius: 10px 0 0 10px; color: #FF7914; }
.ms-tab.weekly { left: 270px; top: 125px; background: #D9D9D9; border-radius: 0 10px 10px 0; color: #999; }
.ms-tab.active { color: #FF7914; }
/* MISSIONS pill 125x41 @ x158 y115 r27 */
.ms-pill {
  position: absolute; left: 158px; top: 115px; width: 125px; height: 41px; border-radius: 27px;
  border: 4px solid #fff; z-index: 3;
  background: linear-gradient(180deg, var(--fg-btn), var(--fg-btn-dk));
  box-shadow: 0 6px 14px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: #fff; font-size: 13px; font-weight: 700;
}
.ms-pill img { width: 24px; height: 23px; object-fit: contain; filter: brightness(0) invert(1); }
.ms-outer {
  position: absolute; left: 18px; top: 131px; width: 405px; height: 711px; border-radius: 25px;
  background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 44px rgba(0,0,0,.42);
}
.ms-inner {
  position: absolute; left: 33px; top: 146px; width: 376px; height: 681px;
  border-radius: 13px; background: #E8E8E8; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.ms-list { position: relative; padding: 19px 0 16px; }
.ms-x {
  position: absolute; left: 397px; top: 129px; width: 28px; height: 29px; z-index: 4;
  border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--fg-btn), var(--fg-btn-dk)); box-shadow: 0 3px 8px rgba(0,0,0,.34);
}
.ms-x svg { width: 18px; height: 18px; }

/* row card 348x70 @ x46 (list-relative x13), 82px pitch */
.mrow {
  position: relative; left: 13px; width: 348px; height: 70px; margin-bottom: 12px;
  background: #fff; border-radius: 17px; box-shadow: 0 2px 7px rgba(0,0,0,.1);
}
.mrow:last-child { margin-bottom: 0; }
.mrow.claimed { opacity: .62; }
.micon {
  position: absolute; left: 8px; top: 5px; width: 60px; height: 60px; border-radius: 12px;
  background: #fff; border: 2px solid var(--fg-orange); display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.micon img { max-width: 45px; max-height: 49px; object-fit: contain; }
.mtitle { position: absolute; left: 80px; top: 10px; color: var(--fg-ink); font-size: 14px; font-weight: 700; }
.mdesc  { position: absolute; left: 80px; top: 27px; color: var(--fg-ink); font-size: 10px; font-weight: 350; opacity: .85; }
.mbar {
  position: absolute; left: 78px; top: 44px; width: 174px; height: 11px; border-radius: 16px;
  background: var(--fg-track); overflow: hidden;
}
.mbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #FF9A3D, var(--fg-orange)); border-radius: 16px; }
.mbar span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; }
.mrow .gcoin { position: absolute; left: 269px; top: 15px; width: 23px; height: 23px; font-size: 15px; }
.mreward { position: absolute; left: 262px; top: 40px; width: 38px; text-align: center;
  color: var(--fg-ink); font-size: 13px; font-weight: 600; }
.mgo {
  position: absolute; left: 303px; top: 15px; width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid #CFCFCF; background: #fff; color: #B0B0B0; font-size: 17px; font-weight: 700;
  display: grid; place-items: center; padding: 0;
}
.mgo.ready { border-color: #22C55E; color: #22C55E; cursor: pointer; }
.mgo:disabled { cursor: default; }
.mrow.claimed .mgo { border-color: #22C55E; color: #22C55E; }

/* ============================================================
   LEADERBOARD  (Figma 06)
   ============================================================ */
.fscreen.lbscreen { padding: 0; }
.lb-back {
  position: absolute; left: 15px; top: 22px; width: 48px; height: 51px;
  border: 0; border-radius: 12px; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(180deg, #FF8A2B, #E96100);
  box-shadow: 0 4px 0 #B64D00, 0 6px 14px rgba(0,0,0,.35);
}
.lb-back svg { width: 27px; height: 27px; }
.lb-back:active { transform: translateY(2px); box-shadow: 0 2px 0 #B64D00; }
.lb-wallet { position: absolute; left: 323px; top: 22px; width: 101px; height: 38px; }
.lb-wallet::before { content: ""; position: absolute; left: 2px; top: 7px; width: 99px; height: 25px;
  background: #fff; border-radius: 8px; box-shadow: 0 3px 8px rgba(0,0,0,.28); }
.lb-coin { position: absolute; left: 0; top: 0; width: 38px; height: 38px; font-size: 25px; }
.lb-wallet strong { position: absolute; left: 46px; top: 6px; width: 55px; text-align: center;
  color: #000; font-size: 18px; font-weight: 700; line-height: 26px; }
.lb-deco { position: absolute; top: 122px; width: 61px; height: 99px; }
.lb-deco.l { left: 105px; }
.lb-deco.r { left: 265px; width: 62px; }
.lb-crown { position: absolute; left: 202px; top: 127px; width: 37px; height: 27px; z-index: 3; }
.lb-pill {
  position: absolute; left: 131px; top: 143px; width: 177px; height: 49px;
  border-radius: 999px; background: linear-gradient(180deg, #FF7A1C, #E96100);
  border: 4px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center; gap: 7px; z-index: 3;
}
.lb-pill img { width: 19px; height: 24px; object-fit: contain; }
.lb-pill span { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .3px; }
.lb-outer {
  position: absolute; left: 18px; top: 177px; width: 405px; height: 617px;
  border-radius: 25px; background: rgba(255,255,255,.22);
  border: 2px solid rgba(255,255,255,.55); box-shadow: 0 18px 44px rgba(0,0,0,.42);
}
.lb-inner {
  position: absolute; left: 32px; top: 192px; width: 376px; height: 587px;
  border-radius: 14px; background: #E8E8E8; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.lb-list { position: relative; padding: 20px 0 16px; }
.lb-more {
  position: absolute; left: 220px; top: 765px; width: 25px; height: 25px; z-index: 4;
  border-radius: 50%; border: 0; cursor: pointer; background: #fff;
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.22);
}
.lb-more svg { width: 10px; height: 6px; }
.lb-more.hidden { display: none; }
.lb-x {
  position: absolute; left: 397px; top: 177px; width: 28px; height: 28px; z-index: 4;
  border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(180deg, #FF7A1C, #E96100); box-shadow: 0 3px 8px rgba(0,0,0,.34);
}
.lb-x svg { width: 18px; height: 18px; }
.lbrow {
  position: relative; height: 51px; width: 323px; margin: 0 0 19px 39px;
  background: #fff; border-radius: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.lbrow:last-child { margin-bottom: 0; }
.lbrow.top { border: 2px solid var(--fg-orange); }
.lbrow.you { border: 2px solid #1E7FD6; background: #EAF4FF; }
.lbmedal { position: absolute; left: -30px; top: 13px; width: 25px; height: 25px; }
.lbrank { position: absolute; left: -30px; top: 13px; width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center; background: #EFEFEF; color: #555; font-size: 14px; font-weight: 700; }
.lbav { position: absolute; left: 0; top: -4px; width: 59px; height: 59px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--fg-orange); background: #fff; }
.lbav-you { display: grid; place-items: center; background: #1E7FD6; border-color: #1E7FD6;
  color: #fff; font-size: 13px; font-weight: 800; }
.lbname { position: absolute; left: 81px; right: 108px; top: 0; height: 100%;
  display: flex; align-items: center; color: var(--fg-ink); font-size: 14px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbrow .gcoin { position: absolute; left: 223px; top: 14px; width: 23px; height: 23px; font-size: 15px; }
.lbscore { position: absolute; left: 252px; top: 0; height: 100%; display: flex; align-items: center;
  color: var(--fg-ink); font-size: 13px; font-weight: 600; }

/* ---------- bottom nav shared by leaderboard + missions ---------- */
/* ---------- bottom navigation bar ----------
   Deliberately NOT inside the contain-fit .fstage. The 440x956 design is taller
   than a typical handset, so a contain fit letterboxes it left/right and the bar
   shrank to ~61% of the screen width where the Figma has it at 320/440 = 73%.
   Instead the bar keeps the design's 440-wide coordinate space but is scaled off
   the viewport WIDTH (--nav-scale) and anchored to the real bottom edge
   (--nav-shift, both set in ui.js). Same markup + same vars on every screen, so
   the bar is pixel-identical as you navigate. */
.lb-nav {
  position: absolute; left: 50%; bottom: 0; margin-left: -220px;
  width: 440px; height: 956px; pointer-events: none; z-index: 8;
  transform-origin: 50% 100%;
  transform: translateY(var(--nav-shift, 0px)) scale(var(--nav-scale, 1));
}
.lb-navbar { position: absolute; left: 60px; top: 875px; width: 320px; height: 58px;
  background: #fff; border-radius: 17px; box-shadow: 0 8px 22px rgba(0,0,0,.32); }
.lb-navdiv { position: absolute; top: 886px; width: 1px; height: 36px; background: #E3E3E3; }
.lb-navdiv.d1 { left: 160px; }
.lb-navdiv.d2 { left: 278px; }
.lb-navchip { position: absolute; left: 181px; top: 872px; width: 78px; height: 64px; border-radius: 14px;
  background: linear-gradient(180deg, #FF8A2B, #E96100); box-shadow: 0 5px 12px rgba(0,0,0,.28); }
.lb-navbtn { position: absolute; border: 0; background: none; cursor: pointer; pointer-events: auto;
  padding: 0; display: grid; place-items: center; }
.lb-navbtn.b1 { left: 60px;  top: 875px; width: 100px; height: 58px; }
.lb-navbtn.b2 { left: 181px; top: 872px; width: 78px;  height: 64px; }
.lb-navbtn.b3 { left: 278px; top: 875px; width: 102px; height: 58px; }
.lb-navbtn svg { width: 32px; height: 27px; fill: var(--fg-orange); }
.lb-navbtn img { width: 32px; height: 40px; object-fit: contain; }
.lb-navbtn.b3 img { width: 29px; height: 39px; }
.lb-navbtn.active img { filter: brightness(0) invert(1); }
/* The trophy/gift art is light — drawn for the orange chip. On the plain white
   bar (missions) recolour it to brand orange so it stays visible. */
.lb-navbtn.flat img, .lb-navbtn.b3 img {
  filter: brightness(0) invert(52%) sepia(60%) saturate(2500%) hue-rotate(357deg) brightness(98%) contrast(94%);
}

/* ============================================================
   GAME OVER  (Figma 08)
   ============================================================ */
.fscreen.go { background: linear-gradient(180deg, #F7F7F7 0%, #FBEAD9 62%, #F6C79A 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none; }
/* YOU EARNED pill 168x41 @ x64 y98 r27 */
.go-earned {
  position: absolute; left: 64px; top: 98px; width: 168px; height: 41px; border-radius: 27px;
  border: 4px solid #fff; background: linear-gradient(180deg, var(--fg-btn), var(--fg-btn-dk));
  display: grid; place-items: center; color: #fff; font-size: 17px; font-weight: 700;
  box-shadow: 0 6px 16px rgba(0,0,0,.22); z-index: 3;
}
/* grid panel 257x531 @ x15 y126 r14 */
.go-panel { position: absolute; left: 15px; top: 126px; width: 257px; height: 531px;
  border-radius: 14px; background: rgba(190,190,190,.42); }
.go-grid {
  position: absolute; left: 15px; top: 126px; width: 257px; height: 531px;
  padding: 37px 0 12px 32px; display: grid; grid-template-columns: 60px 60px; gap: 18px 64px;
  align-content: start; overflow-y: auto;
}
/* cells 60x60 r12, badges 22x22 offset up-left of the corner */
.gocell { position: relative; width: 60px; height: 60px; border-radius: 12px; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.14); }
.gocell img { position: absolute; left: 15%; top: 15%; width: 70%; height: 70%; object-fit: contain; }
.gobadge {
  position: absolute; left: 44px; top: -6px; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(180deg, #F74424, #DD1705); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
}
.go-empty { grid-column: 1 / -1; color: #666; font-size: 11px; text-align: center; padding: 30px 8px; }
/* ---- display podium (Figma: top ellipse y531, body to y576, stem below) ---- */
.go-podstem {
  position: absolute; left: 316px; top: 570px; width: 27px; height: 386px;
  background: linear-gradient(90deg, #E55009 0%, #EF631F 18%, #FFDCC0 46%, #FDB267 62%, #E55009 100%);
}
.go-podbody {
  position: absolute; left: 249px; top: 543px; width: 161px; height: 40px;
  background: linear-gradient(90deg, #E55009 0%, #EF631F 14%, #FFDCC0 42%, #FDB267 60%, #E55009 100%);
}
/* lower rim of the cylinder */
.go-podlip {
  position: absolute; left: 249px; top: 570px; width: 161px; height: 25px; border-radius: 50%;
  background: linear-gradient(180deg, #FF6B1E, #E55008);
}
/* lit top face the character stands on */
.go-podtop {
  position: absolute; left: 249px; top: 531px; width: 161px; height: 25px; border-radius: 50%;
  background: linear-gradient(180deg, #FFA651, #FF6B1E);
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
/* character 171x428 @ x252 y119 — mirrored so he turns TOWARD the earned grid
   on the left; the source art is angled to the viewer's right. */
.go-char { position: absolute; left: 252px; top: 119px; width: 171px; height: 428px;
  object-fit: contain; object-position: bottom; pointer-events: none; transform: scaleX(-1); }
/* score card outer 201x152 @ x222 y626 r21, inner 187x134 @ x229 y635 r13 */
.go-card {
  position: absolute; left: 222px; top: 626px; width: 201px; height: 152px; border-radius: 21px;
  background: linear-gradient(180deg, #FFA054, var(--fg-orange)); box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.go-card::before { content: ""; position: absolute; left: 7px; top: 9px; width: 187px; height: 134px;
  border-radius: 13px; background: #fff; }
.go-card strong { position: absolute; left: 7px; top: 30px; width: 187px; text-align: center;
  color: #000; font-size: 40px; font-weight: 700; line-height: 1; }
.go-best {
  position: absolute; left: 50px; top: 92px; width: 103px; height: 26px; border-radius: 51px;
  background: linear-gradient(180deg, #E8407A, #C3175A); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.go-best img { width: 15px; height: 12px; object-fit: contain; }
.go-best.hidden { display: none; }
/* SCORE tag 127x41 @ x259 y757 r27 */
.go-scoretag {
  position: absolute; left: 259px; top: 757px; width: 127px; height: 41px; border-radius: 27px;
  border: 4px solid #fff; background: linear-gradient(180deg, var(--fg-btn), var(--fg-btn-dk));
  display: grid; place-items: center; color: #fff; font-size: 17px; font-weight: 700;
  box-shadow: 0 5px 12px rgba(0,0,0,.24);
}
/* RETRY 233x76 @ x104 y827 r50; home/share 48x51 @ x35 / x360 y841 */
.go-retry {
  position: absolute; left: 104px; top: 827px; width: 233px; height: 76px; border-radius: 50px;
  border: 5px solid #fff; cursor: pointer; color: #fff; font-size: 31px; font-weight: 700; letter-spacing: 1px;
  background: linear-gradient(180deg, var(--fg-btn), var(--fg-btn-dk)); box-shadow: 0 7px 20px rgba(0,0,0,.3);
}
.go-home, .go-share {
  position: absolute; top: 841px; width: 48px; height: 51px; border-radius: 12px; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #FF8A2B, #E96100); box-shadow: 0 4px 0 #B64D00, 0 6px 14px rgba(0,0,0,.3);
}
.go-home { left: 35px; }
.go-share { left: 360px; }
.go-home svg { width: 28px; height: 24px; fill: #fff; }
.go-share svg { width: 23px; height: 23px; }
.go-retry:active, .go-home:active, .go-share:active { transform: translateY(2px); }

/* ============================================================
   GAMEPLAY HUD  (Figma 02)
   Same fixed 440x956 stage as the menus. pointer-events are off on the stage
   so lane swipes reach the canvas; each control re-enables them.
   ============================================================ */
.hud-stage { z-index: 25; pointer-events: none; }
.hud-stage.hidden { display: none; }
/* pause 48x51 @ x15 y22 r12, bars 25 tall @ x30/x44 */
.gh-pause {
  position: absolute; left: 15px; top: 22px; width: 48px; height: 51px; pointer-events: auto;
  border: 0; border-radius: 12px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 8px;
  background: linear-gradient(180deg, #FF8A2B, #E96100);
  box-shadow: 0 4px 0 #B64D00, 0 6px 14px rgba(0,0,0,.35);
}
.gh-pause span { width: 6px; height: 25px; border-radius: 3px; background: #fff; }
.gh-pause:active { transform: translateY(2px); box-shadow: 0 2px 0 #B64D00; }
/* Figma 03 turns this same button into HOME while the run is paused, and gives
   it the white ring the pause state does not have. */
.gh-pause .gh-homeglyph { display: none; width: 27px; height: 23px; fill: #fff; }
.gh-pause.home span { display: none; }
.gh-pause.home .gh-homeglyph { display: block; }
.gh-pause.home { box-shadow: 0 0 0 2px #fff, 0 4px 0 #B64D00, 0 6px 14px rgba(0,0,0,.35); }
.gh-pause.home:active { box-shadow: 0 0 0 2px #fff, 0 2px 0 #B64D00; }

/* mission banner 252x69 @ x86 y22 r11 */
.gh-quest {
  position: absolute; left: 86px; top: 22px; width: 252px; height: 69px; border-radius: 11px;
  background: rgba(38,38,38,.86); border: 2px solid var(--fg-orange); overflow: hidden;
}
/* Item art is stacked 3 deep exactly as the Figma does — boxes
   x98/x102/x107 (banner starts at x86) with the front copy on top. */
.gh-questart, .st-questart {
  /* offsets resolve from the banner's PADDING box, so subtract its 2px border:
     Figma x98 y25 with the banner at x86 y22 -> left 10, top 1 */
  position: absolute; left: 10px; top: 1px; width: 46px; height: 59px;
}
.gh-questart .qa, .st-questart .qa { position: absolute; object-fit: contain; }
.gh-questart .qa-back,  .st-questart .qa-back  { left: 0;  top: 0; width: 31px; height: 59px; filter: brightness(.55); }
.gh-questart .qa-mid,   .st-questart .qa-mid   { left: 4px; top: 0; width: 29px; height: 59px; filter: brightness(.75); }
.gh-questart .qa-front, .st-questart .qa-front { left: 9px; top: 0; width: 25px; height: 57px; }
.gh-quest b { position: absolute; left: 55px; top: 11px; right: 6px; color: #fff; font-size: 15px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-questbar { position: absolute; left: 51px; top: 40px; width: 174px; height: 15px; border-radius: 16px;
  background: var(--fg-track); overflow: hidden; display: block; }
.gh-questbar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 16px;
  background: linear-gradient(180deg, #FF9A3D, var(--fg-orange)); transition: width .25s ease; }
.gh-questbar em { position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 11px; font-weight: 700; font-style: normal; }

/* wallet: coin 29 @ x350 y22, pill 73x19 @ x352 y27 r5 */
.gh-wallet { position: absolute; left: 350px; top: 22px; width: 89px; height: 29px; }
.gh-wallet::before { content: ""; position: absolute; left: 2px; top: 5px; width: 73px; height: 19px;
  background: #fff; border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,.26); }
.gh-wallet .st-coin { position: absolute; left: 0; top: 0; width: 29px; height: 29px; font-size: 18px; }
.gh-wallet strong { position: absolute; left: 32px; top: 5px; width: 43px; height: 19px;
  display: grid; place-items: center; color: #000; font-size: 13px; font-weight: 700; }
/* live score sits just under the wallet (the Figma has no score readout, but a
   runner needs one — kept small so it doesn't fight the design) */
/* The legacy top power strip is replaced by the Figma power chips. */
#powerbar { display: none !important; }
/* sits just under the mission banner so it can never collide with it */
.gh-score { position: absolute; left: 250px; top: 96px; width: 175px; text-align: right; }
.gh-score b { display: block; color: #fff; font-size: 22px; font-weight: 800; line-height: 1;
  text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.gh-score small { color: rgba(255,255,255,.82); font-size: 10px; font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.7); }

/* battery 106x74 @ x-3 y864 (headphone DJ battery) — always on screen, as in
   the Figma. `i` masks the artwork's 5-cell meter from the right as it drains;
   the percentages below are the meter's position INSIDE the PNG. */
.gh-battery { position: absolute; left: -3px; top: 864px; width: 106px; height: 74px; }
.gh-battery img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* The five cells sit at x 51%-88%, y 43%-75% of the PNG; the mask is inset to
   those bounds so it never eats the artwork's orange frame. */
.gh-battery i {
  position: absolute; right: 12%; top: 43%; height: 32%; width: 0; max-width: 37%;
  background: rgba(6, 4, 30, .92); transition: width .3s linear;
}
/* no headphones on: the icon is present but reads as inert */
.gh-battery.off { filter: grayscale(.9); opacity: .45; }
.gh-battery.low { animation: ghBattLow .7s steps(2, start) infinite; }
@keyframes ghBattLow { 50% { opacity: .4; } }

/* power chips 60x63 @ x365, stacked upward from y817 */
.gh-powers { position: absolute; left: 365px; top: 660px; width: 60px; height: 220px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; }
.gh-power {
  position: relative; width: 60px; height: 63px; border-radius: 10px; flex: 0 0 auto;
  background: rgba(24,26,32,.82); border: 1px solid rgba(255,255,255,.14);
  display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.4);
  animation: ghPop .28s cubic-bezier(.2,1.6,.4,1);
}
.gh-power img { max-width: 42px; max-height: 44px; object-fit: contain; }
.gh-power .gh-glyph { font-size: 30px; line-height: 1; }
/* thin countdown ring along the bottom edge of the chip */
.gh-power i { position: absolute; left: 6px; right: 6px; bottom: 5px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.2); overflow: hidden; }
.gh-power i b { position: absolute; inset: 0 auto 0 0; background: var(--fg-orange); border-radius: 2px; }
.gh-power.expiring { animation: ghBlink .5s steps(2, start) infinite; }
@keyframes ghPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ghBlink { 50% { opacity: .35; } }

/* hearts pill 86x37 @ x339 y897 r6, hearts 22x18 @ x346/371/396 y908 */
.gh-hearts {
  position: absolute; left: 339px; top: 897px; width: 86px; height: 37px; border-radius: 6px;
  background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; gap: 3px;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.gh-hearts .life { width: 22px; height: 18px; background: url("assets/ui/fg/ic_heart.png") center/contain no-repeat; }
.gh-hearts .life.spent { filter: grayscale(1) brightness(1.7); opacity: .45; }
/* In-run notice ("LAST CHANCE!", "MISSION COMPLETE"). Sits just under the
   mission banner rather than mid-screen, and is deliberately small — it appears
   the instant play resumes, so it must never sit over the lanes the player is
   reading. Sized in vw with px caps so it stays a chip on a tablet too. */
.revive-toast {
  position: absolute; left: 50%; top: 15%; transform: translateX(-50%); z-index: 40;
  max-width: 76%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: min(1.6vw, 7px) min(3.6vw, 16px); border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, var(--fg-btn), var(--fg-btn-dk)); border: 2px solid #fff;
  color: #fff; font-size: min(3.4vw, 14px); font-weight: 800; letter-spacing: .3px; text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  animation: reviveIn .35s cubic-bezier(.2,1.6,.4,1);
}
.revive-toast.hidden { display: none; }
@keyframes reviveIn { from { transform: translateX(-50%) scale(.5); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

/* the mission currently tracked on the gameplay banner */
.mrow.active { outline: 3px solid var(--fg-orange); outline-offset: -1px; }
.mrow.active::after {
  content: "TRACKING"; position: absolute; right: 10px; top: -8px;
  padding: 2px 8px; border-radius: 999px; background: var(--fg-orange);
  color: #fff; font-size: 8px; font-weight: 700; letter-spacing: .4px;
}

/* Home screen: the active chip sits over the FIRST cell (home) rather than the
   second, and the home glyph inverts to white on top of it. */
.lb-navchip.home { left: 71px; }
.lb-navbtn.b1.active svg { fill: #fff; }


/* style.css only defines .hidden for a few specific components, so the mission
   badge needs its own rule or it renders a "0" chip when nothing is claimable. */
.notice-dot.hidden { display: none !important; }

/* ============================================================
   PAUSE  (Figma 03)
   Every coordinate below is the literal Figma x/y/w/h inside the 440x956 frame.
   Measured off the exported frame at 2x, so the card, both buttons and the tip
   panel land on the same pixels as the design.
   ============================================================ */
/* Deliberately UNDER #gameHud (z 25 -> raised to 45 while paused): backdrop-filter
   only blurs what is painted below it, and the design keeps the HUD sharp. */
.pausescreen { z-index: 20; background: rgba(10, 14, 24, .22); }
.pausescreen .fstage { pointer-events: none; }
.pausescreen .pz-x, .pausescreen .pz-resume, .pausescreen .pz-restart { pointer-events: auto; }

/* card 303x327 @ x69 y281 r20 */
.pz-card {
  position: absolute; left: 69px; top: 281px; width: 303px; height: 327px; border-radius: 20px;
  background: linear-gradient(180deg, #E1E1E1, #EAEAEA);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.9);
}
/* pause badge 48x49 @ x189 y247, straddling the card's top edge */
.pz-badge {
  position: absolute; left: 189px; top: 247px; width: 48px; height: 49px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(180deg, #FF8A2B, #E96100); border: 2px solid #fff;
  box-shadow: 0 5px 14px rgba(0,0,0,.35);
}
.pz-badge span { width: 4px; height: 24px; border-radius: 2px; background: #fff; }
/* close 28x29 @ x360 y266 */
.pz-x {
  position: absolute; left: 360px; top: 266px; width: 29px; height: 29px; border-radius: 50%;
  border: 2px solid #fff; cursor: pointer; display: grid; place-items: center; padding: 0;
  background: linear-gradient(180deg, #FF8A2B, #E96100);
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
.pz-x svg { width: 17px; height: 17px; }
.pz-x:active { transform: translateY(1px); }

/* title: caps y313-327, glyphs x183-259 (76 wide). Font sizes throughout this
   screen are set from the MEASURED glyph width in the exported frame, not from
   the cap height — the Figma face is narrower than the fallback stack, so
   matching the height alone overruns the slashes either side. */
.pz-title {
  position: absolute; left: 69px; top: 306px; width: 303px; height: 28px; line-height: 28px; margin: 0;
  text-align: center; color: var(--fg-ink); font-size: 19px; font-weight: 800; letter-spacing: .2px;
}
/* the two stacked slashes either side of the title */
.pz-dash { position: absolute; top: 314px; width: 19px; height: 9px; }
.pz-dash.l { left: 153px; }
.pz-dash.r { left: 266px; }
/* the design draws these as slanted speed-marks, not plain rules */
.pz-dash i { position: absolute; left: 0; height: 3px; border-radius: 2px; background: #FF6D20;
  transform: skewX(-18deg); }
.pz-dash i:nth-child(1) { top: 0; width: 19px; }
.pz-dash i:nth-child(2) { top: 5px; width: 15px; }
.pz-dash.l i:nth-child(2) { left: 4px; }

/* RESUME 237x77 @ x101 y348 — white ring + orange gradient pill */
.pz-resume {
  position: absolute; left: 101px; top: 348px; width: 237px; height: 77px; border-radius: 999px;
  border: 5px solid #fff; cursor: pointer; padding: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, #FFA855, #FF6A1E);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
/* the sheen across the upper third of the pill in the design */
.pz-resume::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 4px; height: 38%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0));
  pointer-events: none;
}
.pz-play { width: 30px; height: 30px; flex: 0 0 auto; }
.pz-resume b { color: #fff; font-size: 31px; font-weight: 800; letter-spacing: -.3px; line-height: 1; }
.pz-resume:active { transform: translateY(2px); }

/* RESTART 213x43 @ x114 y445 — pale pill, icon parked on the left */
.pz-restart {
  position: absolute; left: 114px; top: 445px; width: 213px; height: 43px; border-radius: 999px;
  border: 1px solid #CBCBCB; cursor: pointer; padding: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #EDEDED, #FAFAFA 45%, #EDEDED);
  box-shadow: 0 2px 5px rgba(0,0,0,.12);
}
.pz-refresh { position: absolute; left: 23px; top: 12px; width: 20px; height: 20px; }
.pz-restart b { color: var(--fg-ink); font-size: 17px; font-weight: 800; letter-spacing: 0; }
.pz-restart:active { transform: translateY(1px); }

/* hairline 282x1 @ x79 y513 */
.pz-divider { position: absolute; left: 79px; top: 513px; width: 282px; height: 1px; background: #D8D8D8; }

/* tip panel 272x55 @ x84 y537 r10 */
.pz-tip {
  position: absolute; left: 84px; top: 537px; width: 272px; height: 55px; border-radius: 10px;
  border: 1px solid #CBCBCB; background: linear-gradient(180deg, #FAFAFA, #E9E9E9);
}
.pz-bulb { position: absolute; left: 21px; top: 16px; width: 15px; height: 21px; }
.pz-tip b {
  position: absolute; left: 48px; top: 13px; height: 19px; line-height: 19px;
  color: var(--fg-ink); font-size: 12.4px; font-weight: 700; white-space: nowrap;
}
.pz-tip small {
  position: absolute; left: 48px; top: 29px; height: 15px; line-height: 15px;
  color: #5F5F5F; font-size: 8.4px; font-weight: 500; white-space: nowrap;
}