/* ==========================================================================
   银河第一海星罐头 — 廉价未来 / 星际消费主义 / 广告精神污染样式表
   本文件已通过银河广告联盟认证：广告含量 97%
   ========================================================================== */

:root {
  --ink: #0b0312;
  --ink-2: #16051f;
  --ink-3: #23092d;
  --paper: #f4e7ca;
  --paper-2: #e5d1a8;
  --cream: #fff4dc;
  --yellow: #ffe84a;
  --yellow-deep: #ffc400;
  --pink: #ff2ea6;
  --pink-soft: #ff77c8;
  --hot: #ff473d;
  --red: #d7192f;
  --cyan: #65f9ff;
  --lime: #c8ff37;
  --violet: #9a5bff;
  --gold: #ffcf42;
  --green: #44ff9a;
  --black: #09020d;
  --line: #2a0b1e;
  --shadow: rgba(0, 0, 0, .55);
  --font-ui: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --font-display: "Arial Black", "Microsoft YaHei", "SimHei", "PingFang SC", sans-serif;
  --font-mono: "Lucida Console", Consolas, "Courier New", monospace;
  --font-song: "SimSun", "Songti SC", "STSong", serif;
  --chrome-h: 72px;
  --taskbar-h: 48px;
  --fork-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23ffe84a' stroke='%23150008' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M8 3v10M13 3v10M18 3v10M8 13h10v4H8z'/%3E%3Cpath d='M13 17v12h3V17z'/%3E%3C/g%3E%3C/svg%3E") 13 17, pointer;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html {
  background: #05000b;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  color: var(--cream);
  background:
    radial-gradient(ellipse 80% 60% at 70% -10%, rgba(91, 29, 126, .42), transparent 65%),
    radial-gradient(ellipse 60% 58% at 8% 90%, rgba(255, 46, 166, .15), transparent 65%),
    radial-gradient(ellipse 70% 60% at 50% 110%, rgba(61, 15, 77, .6), transparent 60%),
    linear-gradient(160deg, #07000f 0%, #10021c 48%, #06000d 100%);
  font-family: var(--font-ui);
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
  touch-action: manipulation;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

::selection {
  color: #12000a;
  background: var(--yellow);
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   天幕：星空、星云、轨道垃圾
   -------------------------------------------------------------------------- */

.star-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff9e8;
  box-shadow: 0 0 5px rgba(255, 255, 255, .8);
  animation: twinkle var(--twinkle, 3s) steps(2) infinite;
  animation-delay: var(--delay, 0s);
  opacity: .65;
}

.star--big {
  width: 3px;
  height: 3px;
  box-shadow: 0 0 10px 2px rgba(255, 77, 200, .55);
}

.star--colored {
  background: var(--cyan);
  box-shadow: 0 0 9px rgba(101, 249, 255, .8);
}

.nebula {
  position: fixed;
  z-index: 0;
  width: 85vw;
  height: 85vw;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(48px);
  opacity: .22;
}

.nebula--one {
  left: -36vw;
  top: -42vw;
  background: radial-gradient(circle at 60% 60%, rgba(255, 46, 166, .55), rgba(112, 27, 255, .22) 40%, transparent 68%);
  animation: drift-one 34s ease-in-out infinite alternate;
}

.nebula--two {
  right: -35vw;
  bottom: -50vw;
  background: radial-gradient(circle at 40% 40%, rgba(101, 249, 255, .25), rgba(255, 174, 0, .12) 42%, transparent 68%);
  animation: drift-two 42s ease-in-out infinite alternate;
}

/* 全屏脏屏与扫描线 -------------------------------------------------------- */

.crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .2) 2px 3px),
    linear-gradient(90deg, rgba(255, 0, 110, .025), transparent 18%, transparent 82%, rgba(0, 240, 255, .025));
  mix-blend-mode: multiply;
  opacity: .8;
  animation: crt-drift 11s linear infinite;
}

.screen-dirt {
  position: fixed;
  inset: 0;
  z-index: 899;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(ellipse 19% 13% at 12% 82%, rgba(255, 232, 190, .08), transparent 72%),
    radial-gradient(ellipse 22% 8% at 72% 68%, rgba(255, 255, 255, .055), transparent 80%),
    radial-gradient(ellipse 16% 20% at 93% 24%, rgba(255, 206, 255, .06), transparent 76%),
    radial-gradient(ellipse 9% 5% at 40% 12%, rgba(255, 244, 220, .08), transparent 75%);
  filter: blur(2px);
}

.glitch-layer {
  position: fixed;
  inset: 0;
  z-index: 950;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.glitch-layer i {
  position: absolute;
  left: -5%;
  width: 110%;
  height: 10%;
  background: linear-gradient(90deg, transparent, rgba(255, 46, 166, .55), rgba(101, 249, 255, .4), transparent);
  mix-blend-mode: screen;
  transform: translateX(-101%);
}

.glitch-layer i:nth-child(1) {
  top: 13%;
}

.glitch-layer i:nth-child(2) {
  top: 46%;
  height: 4%;
}

.glitch-layer i:nth-child(3) {
  top: 76%;
  height: 14%;
}

body.glitching .glitch-layer {
  opacity: 1;
}

body.glitching .glitch-layer i {
  animation: glitch-bar .22s steps(2) both;
}

@keyframes glitch-bar {
  0% { transform: translateX(-101%); }
  40% { transform: translateX(13%); }
  55% { transform: translateX(-8%); }
  100% { transform: translateX(101%); }
}

/* --------------------------------------------------------------------------
   伪造浏览器外框
   -------------------------------------------------------------------------- */

.browser-chrome {
  position: relative;
  z-index: 200;
  flex: 0 0 var(--chrome-h);
  min-height: var(--chrome-h);
  color: #d9d2c5;
  background: #241b1a;
  border-bottom: 2px solid #000;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .28);
  user-select: none;
}

.chrome-tabs {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 34px;
  padding: 5px 12px 0 10px;
  background: linear-gradient(#1f1716, #120e0e);
  border-bottom: 1px solid #000;
}

.chrome-lights {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin-right: 3px;
  padding-bottom: 2px;
}

.chrome-lights i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .6);
}

.chrome-lights i:nth-child(1) { background: #d6cdbd; }
.chrome-lights i:nth-child(2) { background: #d6cdbd; }
.chrome-lights i:nth-child(3) { background: #d6cdbd; }

.chrome-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 29px;
  max-width: 380px;
  padding: 0 10px;
  border: 1px solid #40352f;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  color: #a49c8c;
  background: #191313;
  font-size: 11px;
  white-space: nowrap;
}

.chrome-tab--active {
  color: #231d16;
  background: linear-gradient(#c8c0ab, #9a907c);
  border-color: #d7cdb9 #4a3e32 #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}

.tab-favicon {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  color: #12000a;
  background: #ffd94a;
  font-size: 10px;
  font-weight: 900;
}

.tab-title {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}

.tab-noise {
  color: #8c1712;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.tab-close {
  opacity: .6;
  font-size: 15px;
  line-height: 1;
}

.chrome-tab--ghost {
  max-width: 150px;
  color: #6b6358;
  background: #0e0b0b;
}

.chrome-newtab {
  align-self: center;
  width: 23px;
  height: 22px;
  margin-left: 2px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #8c8478;
  font-size: 15px;
  line-height: 1;
}

.chrome-newtab:hover {
  border-color: #564b41;
  color: var(--yellow);
  background: #2f2620;
}

.chrome-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding-bottom: 4px;
}

.chrome-action {
  height: 23px;
  padding: 0 8px;
  border: 1px solid #4b4037;
  border-radius: 4px;
  color: #b7ad9c;
  background: #221b16;
  font-size: 10px;
  font-family: var(--font-mono);
  white-space: nowrap;
}

.chrome-action:hover {
  color: var(--yellow);
  border-color: #8a7b64;
  background: #30261e;
}

.chrome-action.is-off {
  color: #6e665c;
  text-decoration: line-through;
}

.chrome-action--help {
  width: 24px;
  padding: 0;
  border-radius: 50%;
  color: #1d140b;
  background: var(--yellow);
  border-color: #000;
  font-weight: 900;
}

.chrome-address {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 4px 13px 5px;
  background: linear-gradient(#332a23, #241d19);
  border-bottom: 1px solid #0d0a08;
}

.chrome-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  color: #6f665a;
  font-family: var(--font-mono);
  font-size: 14px;
}

.chrome-nav span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1a1512;
  cursor: not-allowed;
}

.chrome-nav button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #c0b7a5;
  background: #1a1512;
  font-size: 14px;
}

.chrome-nav button:hover {
  color: var(--yellow);
  background: #3a2d22;
}

.address-bar {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 27px;
  padding: 0 9px;
  overflow: hidden;
  text-align: left;
  border: 1px solid #000;
  border-radius: 4px;
  color: #211a13;
  background: linear-gradient(#f2ecdf, #d9d2c4);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .8), 0 1px 0 rgba(255, 255, 255, .08);
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
}

.address-bar:hover {
  background: linear-gradient(#fffbee, #e5dece);
}

.address-lock {
  margin-right: 5px;
  font-size: 9px;
  filter: grayscale(1);
}

.address-protocol {
  color: #77705f;
}

#addressText {
  overflow: hidden;
  text-overflow: ellipsis;
}

.address-badge {
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid #9e2d22;
  border-radius: 2px;
  color: #8e1f18;
  background: #ffe1bc;
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 700;
}

.chrome-extensions {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 2px;
  color: #958c7d;
  font-size: 13px;
}

.chrome-extensions .ext-badge {
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border-radius: 50%;
  color: #16000a;
  background: var(--pink);
  font-size: 8px;
  font-weight: 900;
}

/* --------------------------------------------------------------------------
   通用屏幕
   -------------------------------------------------------------------------- */

.screen {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
}

.start-screen {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.boot-flash {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  color: var(--yellow);
  background: #040008;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.4vw, 19px);
  letter-spacing: .12em;
  text-shadow: 0 0 13px rgba(255, 232, 74, .6);
  animation: boot-out .8s 1.15s both;
  pointer-events: none;
}

.boot-flash span::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 15px;
  margin-right: 9px;
  vertical-align: -2px;
  background: var(--yellow);
  animation: blink .5s steps(1) infinite;
}

@keyframes boot-out {
  to { opacity: 0; visibility: hidden; }
}

/* --------------------------------------------------------------------------
   开始界面：广告海洋
   -------------------------------------------------------------------------- */

.ad-collage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(6, 0, 16, .2), rgba(7, 0, 14, .55) 75%),
    radial-gradient(ellipse 68% 48% at 50% 42%, rgba(103, 23, 133, .18), transparent 70%);
}

.ad-collage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 46, 166, .035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(101, 249, 255, .025) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 82%);
}

.space-watermark {
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 0;
  width: min(1000px, 90vw);
  transform: translate(-50%, -50%) rotate(-5deg);
  text-align: center;
  pointer-events: none;
  opacity: .085;
  font-family: var(--font-display);
  line-height: .8;
}

.watermark-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--pink);
  font-family: var(--font-ui);
  font-size: clamp(15px, 2vw, 28px);
  font-weight: 900;
  letter-spacing: .5em;
}

.watermark-big {
  display: block;
  color: #fff;
  font-size: clamp(68px, 12vw, 180px);
  letter-spacing: -.07em;
}

.watermark-small {
  display: block;
  margin-top: 16px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.2vw, 16px);
  letter-spacing: .3em;
}

.orbit {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 44%;
  border: 1px dashed rgba(255, 46, 166, .16);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-16deg);
}

.orbit--one {
  width: min(980px, 84vw);
  height: min(510px, 57vh);
  animation: orbit-wobble 18s ease-in-out infinite alternate;
}

.orbit--two {
  width: min(1330px, 112vw);
  height: min(700px, 78vh);
  border-color: rgba(101, 249, 255, .09);
  transform: translate(-50%, -50%) rotate(11deg);
  animation: orbit-wobble 26s 2s ease-in-out infinite alternate-reverse;
}

/* 广告卡片通用 ------------------------------------------------------------- */

.ad {
  position: absolute;
  z-index: 8;
  border: 3px solid #15020b;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .18) inset,
    7px 8px 0 rgba(0, 0, 0, .52),
    0 0 27px rgba(255, 46, 166, .12);
  transform-origin: center;
  animation: ad-slam .5s cubic-bezier(.2, .9, .2, 1.1) both;
  will-change: transform, opacity;
}

.ad:hover {
  z-index: 35;
}

.ad-close {
  position: absolute;
  right: 4px;
  top: 4px;
  z-index: 12;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(0, 0, 0, .8);
  border-radius: 2px;
  color: #1c090e;
  background: #f6efdf;
  box-shadow: 1px 1px 0 #000;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.ad-close:hover {
  color: #fff;
  background: var(--red);
}

.ad-cta {
  position: relative;
  display: block;
  width: 100%;
  padding: 8px 8px;
  border: 2px solid #100208;
  box-shadow: 3px 3px 0 #100208;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.1;
  transition: transform .08s, box-shadow .08s, filter .15s;
}

.ad-cta:hover {
  transform: translate(-1px, -2px);
  filter: brightness(1.12) saturate(1.15);
  box-shadow: 4px 5px 0 #100208;
}

.ad-cta:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #100208;
}

.ad-cta--lime { color: #102001; background: var(--lime); }
.ad-cta--pink { color: #250011; background: #ff4fb3; }
.ad-cta--red { color: #fff4d8; background: #d9152e; }
.ad-cta--gold { color: #2b1200; background: var(--gold); }
.ad-cta--violet { color: #fff6da; background: #7329df; }
.ad-cta--money { color: #0c2504; background: #a8e95e; }
.ad-cta--paper { color: #f8eed9; background: #8f1f16; }

.ad-fineprint {
  margin: 8px 0 0;
  font-family: var(--font-song);
  font-size: 8px;
  line-height: 1.5;
  opacity: .62;
}

/* 左：基因飞升 ------------------------------------------------------------- */

.ad--gene {
  left: 1.7%;
  top: 7%;
  z-index: 12;
  width: clamp(212px, 17vw, 270px);
  padding: 14px 14px 12px;
  overflow: hidden;
  color: #c9ff6b;
  background:
    repeating-linear-gradient(0deg, rgba(124, 255, 68, .03) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 85% 10%, rgba(125, 255, 100, .17), transparent 47%),
    #07180a;
  border-color: var(--lime);
  transform: rotate(-1.8deg);
  animation-delay: .1s;
  box-shadow: 7px 8px 0 rgba(0, 0, 0, .58), 0 0 28px rgba(140, 255, 56, .18);
}

.ad--gene .ad-ribbon {
  display: inline-block;
  margin: -2px 0 10px;
  padding: 2px 6px;
  color: #0a1b03;
  background: var(--lime);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

.ad--gene h2 {
  position: relative;
  z-index: 2;
  margin: 0 0 10px;
  color: #e3ffac;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.5vw, 40px);
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.08em;
  text-shadow: 0 0 13px rgba(165, 255, 79, .4), 2px 2px 0 #173b0b;
}

.ad--gene h2 span {
  color: var(--pink);
  font-size: 1.17em;
  text-shadow: 0 0 14px rgba(255, 46, 166, .52);
}

.ad-copy {
  position: relative;
  z-index: 2;
  margin: 0 0 11px;
  color: #a6df73;
  font-size: clamp(10px, .86vw, 12px);
  line-height: 1.65;
}

.gene-helix {
  position: absolute;
  right: -8px;
  top: 17px;
  width: 62px;
  height: 160px;
  opacity: .45;
  transform: rotate(9deg);
}

.gene-helix i {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 17px;
  border: 2px solid var(--lime);
  border-radius: 50%;
  transform: skewX(-25deg) rotate(var(--r, 0deg));
  animation: helix-pulse 2.8s ease-in-out infinite;
  animation-delay: calc(var(--n) * -.3s);
}

.gene-helix i:nth-child(1) { top: 0; --r: 15deg; --n: 1; }
.gene-helix i:nth-child(2) { top: 30px; --r: -22deg; --n: 2; }
.gene-helix i:nth-child(3) { top: 60px; --r: 8deg; --n: 3; }
.gene-helix i:nth-child(4) { top: 90px; --r: -15deg; --n: 4; }
.gene-helix i:nth-child(5) { top: 120px; --r: 19deg; --n: 5; }

.ad-social-proof {
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px dashed rgba(200, 255, 55, .27);
  color: rgba(200, 255, 55, .56);
  font-family: var(--font-song);
  font-size: 8px;
  line-height: 1.55;
}

.ad-social-proof b {
  color: #ff6969;
}

/* 卫健委提示 --------------------------------------------------------------- */

.ad--health {
  left: 40%;
  bottom: 1.5%;
  z-index: 13;
  width: clamp(242px, 20vw, 300px);
  padding: 0 14px 12px;
  color: #372114;
  background:
    repeating-linear-gradient(90deg, rgba(93, 49, 23, .035) 0 1px, transparent 1px 5px),
    #f3ead5;
  border-color: #5d2d17;
  transform: rotate(1.1deg);
  animation-delay: .5s;
  box-shadow: 7px 8px 0 rgba(0, 0, 0, .52), 0 0 0 3px #d8c49e;
}

.gov-stripe {
  margin: 0 -14px 10px;
  padding: 4px 8px;
  color: #fff5dd;
  background: repeating-linear-gradient(90deg, #9d2016 0 8px, #b52c20 8px 16px);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
}

.gov-seal {
  position: absolute;
  right: 15px;
  top: 34px;
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  border: 2px solid rgba(163, 31, 22, .78);
  border-radius: 50%;
  color: rgba(163, 31, 22, .82);
  font-family: var(--font-song);
  font-size: 23px;
  font-weight: 900;
  transform: rotate(-12deg);
  opacity: .85;
}

.ad--health h3 {
  margin: 0 0 7px;
  color: #60220f;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .02em;
}

.ad--health h3 span {
  color: #ba1d15;
  text-decoration: underline wavy rgba(186, 29, 21, .55);
}

.ad--health p {
  margin: 0 0 8px;
  font-size: 9px;
  line-height: 1.6;
}

/* 左中：代言人直播 --------------------------------------------------------- */

.ad--live {
  left: 2.2%;
  top: 36%;
  z-index: 14;
  width: clamp(228px, 19vw, 286px);
  padding: 0 12px 12px;
  overflow: hidden;
  color: #4b0023;
  background:
    radial-gradient(circle at 50% 25%, #ffcae6 0, #ff7cc1 38%, #f22d92 70%, #b0005d 100%);
  border-color: #ff9fd2;
  transform: rotate(1.5deg);
  animation-delay: .24s;
  box-shadow: 7px 8px 0 rgba(0, 0, 0, .55), 0 0 32px rgba(255, 46, 166, .3);
}

.live-head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 -12px 5px;
  padding: 5px 8px;
  color: #ffeaf4;
  background: rgba(47, 0, 25, .82);
  font-family: var(--font-mono);
  font-size: 8px;
}

.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff3a3a;
  box-shadow: 0 0 7px #ff3a3a;
  animation: pulse-dot 1.15s ease-in-out infinite;
}

.celeb-stage {
  position: relative;
  height: clamp(118px, 12vw, 168px);
  margin: 0 -12px;
  overflow: hidden;
}

.celeb-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .35) 0 4deg, transparent 4deg 12deg);
  transform: translate(-50%, -50%);
  animation: slow-spin 24s linear infinite;
  opacity: .55;
}

.celeb-star {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%) rotate(-4deg);
  filter: drop-shadow(0 7px 0 rgba(74, 0, 34, .22));
  animation: idol-bob 2.8s ease-in-out infinite;
}

.celeb-wig {
  position: absolute;
  left: 50%;
  top: 3px;
  z-index: 3;
  width: 117px;
  height: 84px;
  border-radius: 60% 60% 34% 34%;
  background:
    radial-gradient(ellipse at 38% 28%, rgba(255, 255, 255, .43), transparent 22%),
    radial-gradient(ellipse at 55% 30%, #ffd85c, #ed9d14 65%, #b76500);
  transform: translateX(-50%) rotate(-2deg);
  box-shadow: 0 4px 0 rgba(74, 0, 34, .18);
}

.celeb-sash {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 4;
  padding: 2px 14px;
  color: #4c001e;
  background: var(--yellow);
  border: 2px solid #45001f;
  font-size: 8px;
  font-weight: 900;
  transform: translateX(-50%) rotate(-7deg);
  box-shadow: 2px 2px 0 rgba(55, 0, 25, .4);
}

.heart {
  position: absolute;
  z-index: 5;
  color: #fff1f8;
  font-size: 16px;
  text-shadow: 0 0 8px #ff1f88, 2px 2px 0 #71003c;
  animation: heart-float 3.2s ease-in infinite;
}

.heart--1 { left: 20%; top: 45%; animation-delay: .1s; }
.heart--2 { right: 19%; top: 28%; font-size: 11px; animation-delay: 1.2s; }
.heart--3 { right: 28%; top: 57%; font-size: 20px; animation-delay: 2.2s; }

.ad--live h2 {
  margin: 1px 0 4px;
  color: #fff1f8;
  font-family: var(--font-display);
  font-size: clamp(23px, 2vw, 32px);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.06em;
  text-shadow: 3px 3px 0 #7f0046;
}

.live-copy {
  margin: 0 0 8px;
  color: #5b002d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.live-copy small {
  font-family: var(--font-song);
  font-size: 8px;
  font-weight: 400;
  opacity: .65;
}

.ad--live .ad-fineprint {
  color: #4c0025;
  opacity: .62;
}

/* 右侧：震惊新闻 ----------------------------------------------------------- */

.ad--news {
  right: 1.7%;
  top: 6.5%;
  z-index: 13;
  width: clamp(250px, 21vw, 318px);
  padding: 0 15px 12px;
  color: #f7ead3;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px),
    #210d0b;
  border-color: #f1d7ae;
  transform: rotate(1.6deg);
  animation-delay: .16s;
  box-shadow: 7px 8px 0 rgba(0, 0, 0, .6), 0 0 30px rgba(255, 71, 61, .17);
}

.news-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -15px;
  padding: 6px 9px;
  color: #fff4e3;
  background: #a01119;
  border-bottom: 2px solid #000;
}

.news-logo {
  font-family: var(--font-song);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.news-hot {
  color: #ffe169;
  font-family: var(--font-mono);
  font-size: 8px;
}

.news-flash {
  display: inline-block;
  margin: 9px 0 5px;
  padding: 1px 5px;
  color: #2c0800;
  background: var(--yellow);
  transform: rotate(-2deg);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
}

.ad--news h2 {
  margin: 0 0 8px;
  color: #fff0d3;
  font-family: var(--font-song);
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -.02em;
}

.ad--news h2 span {
  color: #ff5547;
  font-size: 1.28em;
  text-shadow: 2px 2px 0 #4b0000;
}

.news-copy {
  margin: 0 0 10px;
  color: #e7d5bb;
  font-size: 10px;
  line-height: 1.7;
}

.news-side {
  display: inline-block;
  margin-top: 4px;
  color: #c6a580;
  font-size: 8px;
  line-height: 1.5;
  border-top: 1px dashed rgba(241, 215, 174, .2);
  padding-top: 3px;
}

.news-debris {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  color: #b98f7b;
  font-family: var(--font-mono);
  font-size: 7px;
}

.news-debris span {
  padding: 2px 4px;
  border: 1px solid rgba(255, 236, 206, .19);
}

.news-debris span:first-child {
  color: #2f0800;
  border-color: var(--yellow);
  background: var(--yellow);
  font-weight: 900;
}

/* 中奖弹窗 ---------------------------------------------------------------- */

.ad--prize {
  right: 22%;
  top: 2%;
  z-index: 16;
  width: clamp(210px, 17vw, 252px);
  overflow: hidden;
  color: #4b2a00;
  background:
    radial-gradient(circle at 50% 34%, #fffde6 0, #ffea88 35%, #ffc21f 72%, #d78d00 100%);
  border: 3px solid #5b2700;
  transform: rotate(2.1deg);
  animation-delay: .34s;
  box-shadow: 7px 9px 0 rgba(0, 0, 0, .58), 0 0 28px rgba(255, 200, 42, .28);
}

.popup-titlebar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 5px 3px 8px;
  color: #f5f1e6;
  background: linear-gradient(90deg, #173f89, #2d73c8);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .02em;
}

.ad-close--titlebar {
  position: static;
  width: 15px;
  height: 14px;
  margin-left: 8px;
  font-size: 11px;
}

.prize-rays {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 5deg, rgba(255, 255, 255, .52) 0 7deg, transparent 7deg 20deg);
  transform: translate(-50%, -50%);
  animation: slow-spin 18s linear infinite reverse;
  opacity: .42;
  pointer-events: none;
}

.prize-stars {
  position: relative;
  margin-top: 9px;
  color: #bc6f00;
  text-align: center;
  font-size: 16px;
  letter-spacing: .2em;
  animation: shimmer 1.8s ease-in-out infinite;
}

.ad--prize h2 {
  position: relative;
  margin: 0;
  color: #c41814;
  font-family: var(--font-display);
  font-size: clamp(31px, 2.7vw, 42px);
  font-weight: 900;
  text-align: center;
  line-height: 1;
  letter-spacing: -.06em;
  text-shadow: 3px 3px 0 #fff7c4, 5px 5px 0 rgba(123, 50, 0, .24);
  transform: rotate(-3deg);
}

.prize-main {
  position: relative;
  margin: 5px 0 3px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}

.prize-main strong {
  display: inline-block;
  padding: 0 3px;
  color: #fff;
  background: #d21a18;
  font-family: var(--font-mono);
  font-size: 1.35em;
  transform: rotate(-2deg);
}

.prize-copy {
  position: relative;
  margin: 0 13px 9px;
  font-size: 8px;
  line-height: 1.6;
  text-align: center;
}

.ad--prize .ad-fineprint {
  margin: 6px 12px 9px;
  text-align: center;
  color: #5d3300;
  opacity: .7;
}

/* 右侧：会员 --------------------------------------------------------------- */

.ad--member {
  right: 2.2%;
  top: 34%;
  z-index: 12;
  width: clamp(232px, 19vw, 290px);
  padding: 13px 14px 12px;
  overflow: hidden;
  color: #f4e6ff;
  background:
    radial-gradient(ellipse at 84% 0, rgba(218, 169, 255, .29), transparent 48%),
    linear-gradient(145deg, #2e0c4e, #150522 62%, #25093b);
  border-color: #bd7dff;
  transform: rotate(-1.2deg);
  animation-delay: .4s;
  box-shadow: 7px 8px 0 rgba(0, 0, 0, .57), 0 0 30px rgba(154, 91, 255, .24);
}

.member-crown {
  position: absolute;
  right: 12px;
  top: 8px;
  color: var(--gold);
  font-size: 29px;
  transform: rotate(12deg);
  filter: drop-shadow(0 0 9px rgba(255, 207, 66, .5));
  animation: crown-bob 2.4s ease-in-out infinite;
}

.member-top {
  margin: 0 0 7px;
  color: #bf9fdd;
  font-family: var(--font-mono);
  font-size: 8px;
}

.member-top b {
  color: #ff8dcd;
}

.ad--member h2 {
  margin: 0 0 7px;
  color: #ffeab3;
  font-family: var(--font-display);
  font-size: clamp(24px, 2vw, 31px);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: 1;
  text-shadow: 0 0 17px rgba(255, 207, 66, .35), 2px 2px 0 #31064b;
}

.member-list {
  margin: 0 0 9px;
  padding: 0;
  list-style: none;
  color: #eadbfa;
  font-size: 10px;
  line-height: 1.7;
}

.member-list li::before {
  content: "♛";
  margin-right: 5px;
  color: var(--gold);
  font-size: 8px;
}

.member-list em {
  color: #9d7daf;
  font-style: normal;
  font-size: 8px;
}

.member-price {
  margin-bottom: 8px;
  color: #d9c4e7;
  font-family: var(--font-mono);
  font-size: 9px;
}

.member-price span {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
}

.ad--member .ad-fineprint {
  color: #bca1cc;
}

/* 左下：贷款 --------------------------------------------------------------- */

.ad--loan {
  left: 21%;
  bottom: 2%;
  z-index: 14;
  width: clamp(222px, 18vw, 272px);
  padding: 12px 14px;
  color: #203205;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .32), transparent 40%),
    repeating-linear-gradient(0deg, rgba(72, 110, 22, .08) 0 1px, transparent 1px 6px),
    #d7e9a1;
  border-color: #425f0d;
  transform: rotate(-1.4deg);
  animation-delay: .3s;
  box-shadow: 7px 8px 0 rgba(0, 0, 0, .54), 0 0 0 3px #a7c364;
}

.loan-bank {
  margin-bottom: 6px;
  color: #34550b;
  font-family: var(--font-song);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}

.ad--loan h2 {
  margin: 0 0 5px;
  color: #2e4b05;
  font-family: var(--font-song);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -.03em;
}

.ad--loan h2 span {
  color: #a8210d;
  text-decoration: underline double rgba(168, 33, 13, .38);
}

.loan-copy {
  margin: 0 0 7px;
  color: #526c20;
  font-size: 9px;
  letter-spacing: .05em;
}

.loan-stamp {
  position: absolute;
  right: 13px;
  top: 40px;
  padding: 4px 5px;
  border: 2px solid rgba(160, 20, 13, .65);
  border-radius: 50%;
  color: rgba(160, 20, 13, .72);
  font-family: var(--font-song);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  transform: rotate(13deg);
}

.ad--loan .ad-fineprint {
  color: #4a601e;
}

/* 右下漂浮小广告 ----------------------------------------------------------- */

.ad--chip {
  z-index: 22;
  max-width: 250px;
  padding: 7px 9px;
  color: #1d0a12;
  background: #fff1cd;
  border-width: 2px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .55);
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1.5;
  animation: chip-in .6s both;
}

.ad--chip button {
  margin-left: 4px;
  padding: 1px 4px;
  border: 1px solid #38121e;
  color: #52101d;
  background: var(--yellow);
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 900;
}

.ad--chip b,
.ad--chip strong {
  display: block;
  color: #a0122c;
}

.chip-a {
  left: 16%;
  top: 22%;
  transform: rotate(-4deg);
  animation-delay: .58s;
}

.chip-a .chip-blink {
  color: #cf1010;
  animation: blink 1s steps(1) infinite;
}

.chip-b {
  right: 3%;
  bottom: 2%;
  width: 168px;
  transform: rotate(2.6deg);
  animation-delay: .7s;
}

.chip-c {
  left: 29.5%;
  top: 1.5%;
  width: 214px;
  color: #f8e9ff;
  background: #53146e;
  border-color: #ff58b7;
  transform: rotate(-1.5deg);
  animation-delay: .8s;
}

.chip-c span {
  color: #ff9bd2;
}

.chip-c strong {
  color: #ffe25c;
}

.chip-c button {
  color: #21000f;
  background: #ff5ab5;
}

.chip-d {
  right: 16%;
  bottom: 3.5%;
  width: auto;
  color: #6d1a0d;
  background: #ffd9ba;
  transform: rotate(-2deg);
  animation-delay: 1s;
}

.chip-d b {
  display: inline;
  color: #b11318;
}

.mobile-ad-note {
  display: none;
}

/* --------------------------------------------------------------------------
   开始界面：太空巨幅主广告
   -------------------------------------------------------------------------- */

.ad--hero {
  left: 50%;
  top: 48%;
  z-index: 30;
  width: min(660px, 49vw);
  padding: 0;
  overflow: visible;
  color: #2a070d;
  background:
    repeating-linear-gradient(0deg, rgba(121, 26, 15, .035) 0 1px, transparent 1px 4px),
    #f8e9c2;
  border: 4px solid #280510;
  transform: translate(-50%, -50%) rotate(-.5deg);
  animation: hero-in .65s cubic-bezier(.18, .89, .25, 1.08) both;
  box-shadow:
    0 0 0 3px #f2b800,
    0 0 0 7px #a30f2e,
    16px 19px 0 rgba(0, 0, 0, .55),
    0 0 58px rgba(255, 188, 0, .25);
}

.ad--hero::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 232, 74, .13) 0 6deg, transparent 6deg 15deg);
  opacity: .8;
  pointer-events: none;
}

.hero-stripe {
  height: 12px;
  margin: 0;
  border-bottom: 3px solid #280510;
  background: repeating-linear-gradient(90deg, #d7192f 0 36px, #f4d24c 36px 72px, #1c4f8f 72px 108px);
}

.hero-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(48, 9, 12, .25);
  font-family: var(--font-mono);
  font-size: clamp(7px, .62vw, 9px);
  letter-spacing: .04em;
}

.hero-brand {
  color: #6f1c16;
  font-weight: 900;
}

.hero-anniv {
  padding: 1px 5px;
  color: #fff5d9;
  background: #bf1b24;
  font-family: var(--font-ui);
  font-size: 7px;
  font-weight: 700;
  transform: rotate(-.8deg);
}

.ad-close--hero {
  top: 19px;
  right: 7px;
}

.hero-main {
  display: grid;
  grid-template-columns: 1.09fr .91fr;
  gap: 3px;
  min-height: 330px;
  padding: 10px 16px 2px 20px;
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 3px;
}

.hero-kicker {
  display: inline-block;
  margin-bottom: 2px;
  padding: 2px 6px;
  color: #fff4d3;
  background: #2b0a0d;
  font-size: clamp(8px, .68vw, 10px);
  font-weight: 900;
  letter-spacing: .11em;
  transform: skewX(-8deg);
}

.hero-copy h1 {
  margin: 0 0 2px;
  color: #bd1529;
  font-family: var(--font-display);
  font-size: clamp(64px, 6.35vw, 93px);
  font-weight: 900;
  line-height: .79;
  letter-spacing: -.1em;
  text-shadow:
    3px 3px 0 #fff4d2,
    6px 7px 0 rgba(53, 8, 12, .18);
  transform: scaleX(.94);
  transform-origin: left center;
}

.hero-copy h1 span {
  color: #27080d;
  font-size: .91em;
}

.hero-subline {
  margin: 8px 0 7px;
  color: #5e2517;
  font-size: clamp(10px, .9vw, 13px);
  font-weight: 700;
  letter-spacing: .08em;
}

.hero-price-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  padding: 4px 8px 4px 6px;
  color: #fff5da;
  background: #1d090a;
  transform: rotate(-1deg);
  box-shadow: 3px 3px 0 rgba(89, 20, 8, .22);
}

.price-old {
  color: #eab38f;
  font-family: var(--font-mono);
  font-size: 8px;
  text-decoration: line-through;
}

.price-now {
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: clamp(26px, 2.2vw, 33px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.05em;
}

.price-now small {
  font-size: .48em;
}

.price-unit {
  align-self: flex-end;
  padding-bottom: 1px;
  color: #f4d3ae;
  font-size: 7px;
}

.hero-bullets {
  margin: 0 0 9px;
  padding: 0;
  list-style: none;
  color: #4f1b13;
  font-family: var(--font-song);
  font-size: clamp(9px, .8vw, 11px);
  line-height: 1.6;
}

.hero-bullets li::before {
  content: "✦";
  margin-right: 4px;
  color: #c41a25;
}

.hero-bullets b {
  color: #7a2716;
  font-weight: 900;
}

.btn-buy {
  padding: 8px 14px;
  border: 3px solid #28050a;
  color: #fff2cd;
  background: linear-gradient(#e82533, #a30f22);
  box-shadow: 4px 4px 0 #2b060b;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1;
  transition: transform .08s, filter .15s;
}

.btn-buy:hover {
  filter: brightness(1.13) saturate(1.18);
  transform: translate(-1px, -2px) rotate(-1deg);
}

.btn-buy:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #2b060b;
}

.hero-stock {
  margin-top: 7px;
  color: #7a2f1d;
  font-family: var(--font-mono);
  font-size: 8px;
}

.hero-stock span {
  color: #b91726;
  font-size: 13px;
  font-weight: 900;
}

.hero-stock em {
  color: #b91726;
  font-style: normal;
  text-decoration: underline wavy;
}

.hero-visual {
  position: relative;
  min-width: 0;
}

.poster-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 4deg, rgba(255, 196, 0, .5) 0 6deg, transparent 6deg 16deg);
  transform: translate(-50%, -50%);
  animation: slow-spin 34s linear infinite;
  opacity: .7;
}

.poster-can {
  position: absolute;
  left: 50%;
  top: 2%;
  width: clamp(128px, 12.6vw, 174px);
  height: clamp(252px, 25vw, 335px);
  transform: translateX(-50%) rotate(5deg);
  animation: can-poster-bob 4.6s ease-in-out infinite;
  filter: drop-shadow(8px 13px 0 rgba(40, 6, 8, .22));
}

.poster-can-shadow {
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 105%;
  height: 19px;
  border-radius: 50%;
  background: rgba(48, 9, 8, .45);
  filter: blur(5px);
  transform: translateX(-50%);
}

.poster-can-lid {
  position: absolute;
  left: 0;
  top: -3px;
  z-index: 5;
  width: 100%;
  height: 28px;
  border: 2px solid #29130c;
  border-radius: 50%;
  background: linear-gradient(100deg, #88877d, #dedac6 29%, #fffce9 47%, #a6a497 72%, #6a6d63);
  box-shadow: inset 0 4px 4px rgba(255, 255, 255, .4), 0 2px 0 rgba(34, 14, 6, .2);
}

.poster-pull {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 39%;
  height: 9px;
  border: 2px solid #3e352b;
  border-radius: 9px;
  background: #bab7a8;
  transform: translateX(-50%) rotate(3deg);
}

.poster-pull::after {
  content: "";
  position: absolute;
  left: 72%;
  top: 1px;
  width: 13px;
  height: 12px;
  border: 2px solid #504539;
  border-radius: 50%;
  background: #b4b1a4;
}

.poster-can-body {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 11px;
  bottom: 7px;
  overflow: hidden;
  border: 2px solid #2a0c07;
  border-radius: 12% 12% 8% 8% / 4% 4% 3% 3%;
  background:
    linear-gradient(90deg, #8b6436 0, #c6a16c 2%, transparent 6%, transparent 94%, #a37b49 98%, #755329 100%),
    linear-gradient(90deg, #c9a86e, #f3ddae 20%, #d5b67d 54%, #f8e7bd 70%, #b08d58);
  box-shadow: inset 7px 0 15px rgba(58, 29, 7, .35), inset -7px 0 15px rgba(58, 29, 7, .33);
}

.poster-label {
  position: absolute;
  inset: 20px 8px 17px;
  overflow: hidden;
  border: 2px solid #3c0a08;
  border-radius: 4px;
  color: #34090b;
  background:
    repeating-linear-gradient(0deg, rgba(97, 24, 13, .06) 0 1px, transparent 1px 4px),
    linear-gradient(165deg, #f8e6b9 0%, #f3c94d 36%, #e9ab27 68%, #ca7214 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 249, 219, .35);
}

.poster-label::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 32px;
  width: 140px;
  height: 26px;
  background: #c21d2e;
  transform: rotate(-43deg);
  box-shadow: 0 2px 0 rgba(77, 9, 4, .3);
}

.poster-label::after {
  content: "★";
  position: absolute;
  right: 7px;
  top: 8px;
  color: #d21f30;
  font-size: 18px;
}

.poster-label-top {
  position: relative;
  z-index: 2;
  margin-top: 5px;
  color: #f9eccd;
  font-family: var(--font-mono);
  font-size: 5px;
  letter-spacing: .05em;
  text-align: center;
}

.poster-label-brand {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  color: #7f1c10;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .25em;
  text-align: center;
}

.poster-label-main {
  position: relative;
  z-index: 2;
  margin-top: 1px;
  color: #f7eccf;
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 29px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.06em;
  text-align: center;
  text-shadow: 2px 2px 0 #881323;
}

.poster-label-main em {
  color: #b51528;
  font-style: normal;
  text-shadow: 2px 2px 0 #f7eccf;
}

.poster-label-star {
  position: relative;
  z-index: 2;
  margin-top: 1px;
  color: #c7162a;
  font-size: 25px;
  line-height: 1;
  text-align: center;
  transform: rotate(12deg);
}

.poster-label-desc {
  position: relative;
  z-index: 2;
  margin-top: 2px;
  color: #43120b;
  font-size: 7px;
  font-weight: 900;
  text-align: center;
  letter-spacing: .08em;
}

.poster-label-open {
  position: relative;
  z-index: 2;
  width: fit-content;
  margin: 4px auto 0;
  padding: 2px 7px;
  color: #fff4dd;
  background: #9e1625;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
}

.poster-label-seal {
  position: absolute;
  right: 7px;
  bottom: 33px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 2px solid #8e1b16;
  border-radius: 50%;
  color: #8e1b16;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  line-height: .85;
  text-align: center;
  transform: rotate(-13deg);
}

.poster-label-seal small {
  font-family: var(--font-song);
  font-size: 5px;
}

.poster-label-fine {
  position: absolute;
  left: 7px;
  bottom: 17px;
  color: #5a1d0e;
  font-family: var(--font-song);
  font-size: 5px;
  line-height: 1.5;
}

.poster-label-barcode {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 6px;
  height: 8px;
  background: repeating-linear-gradient(90deg, #2b0e09 0 1px, transparent 1px 3px, #2b0e09 3px 5px, transparent 5px 6px);
  opacity: .7;
}

.poster-can-shine {
  position: absolute;
  left: 15%;
  top: 0;
  bottom: 0;
  width: 15%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .48), transparent);
  transform: skewX(-5deg);
  opacity: .6;
  mix-blend-mode: screen;
}

.poster-can-ridges {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(74, 38, 10, .12) 6px 7px);
  opacity: .65;
}

.poster-can-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 23px;
  border: 2px solid #29130c;
  border-radius: 50%;
  background: linear-gradient(#d2c9ae, #6f6b5d 52%, #3c3930);
  z-index: 4;
}

.hero-burst {
  position: absolute;
  right: 5px;
  bottom: 4px;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 59px;
  height: 59px;
  border: 2px solid #4a0d07;
  border-radius: 50%;
  color: #fff5d8;
  background: #c11928;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  transform: rotate(12deg);
  animation: badge-wobble 2.8s ease-in-out infinite;
}

.hero-legal-sticker {
  position: absolute;
  left: 1px;
  bottom: 71px;
  z-index: 8;
  padding: 4px 6px;
  color: #1f0707;
  background: #fff5d3;
  border: 1px solid #40100b;
  box-shadow: 2px 2px 0 rgba(42, 5, 6, .25);
  font-family: var(--font-song);
  font-size: 6px;
  line-height: 1.45;
  transform: rotate(-5deg);
}

.hero-legal-sticker small {
  color: #b01b1e;
}

.hero-footer {
  position: relative;
  min-height: 64px;
  padding: 7px 13px 8px;
  border-top: 2px solid rgba(50, 10, 11, .28);
  background:
    repeating-linear-gradient(135deg, rgba(144, 22, 19, .035) 0 5px, transparent 5px 10px),
    #f0dcae;
}

.hero-fineprint {
  width: 76%;
  margin: 0;
  color: #5c2b1d;
  font-family: var(--font-song);
  font-size: 7px;
  line-height: 1.55;
}

.hero-fineprint b {
  color: #8e3a20;
  font-weight: 400;
}

.hero-code {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 5px;
  color: #f9f1de;
  background: #6f2718;
  font-family: var(--font-mono);
  font-size: 6px;
}

.start-btn {
  position: absolute;
  right: 15px;
  bottom: 12px;
  z-index: 15;
  display: inline-block;
  padding: 2px 5px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 1px;
  color: #f9f3db;
  background: #4b1d1d;
  box-shadow: 1px 1px 0 #26080b;
  font-family: var(--font-mono);
  font-size: 7px;
  line-height: 1.2;
  letter-spacing: .03em;
  opacity: .76;
  transition: transform .16s, opacity .16s, background .16s, box-shadow .16s;
}

.start-btn::after {
  content: "";
  position: absolute;
  inset: -16px -14px;
}

.start-btn:hover,
.start-btn:focus-visible {
  opacity: 1;
  color: #230607;
  background: var(--yellow);
  border-color: #1e060a;
  box-shadow: 0 0 10px rgba(255, 232, 74, .85), 2px 2px 0 #1e060a;
  transform: scale(1.65) rotate(-2deg);
}

.start-orbit {
  position: absolute;
  right: 7px;
  bottom: 27px;
  z-index: 14;
  color: #ffe747;
  font-size: 7px;
  text-shadow: 0 0 7px #ffdc3d;
  animation: spark-orbit 3s linear infinite;
  pointer-events: none;
}

.start-btn.is-spotted {
  opacity: 1;
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  animation: spotted-pulse 1s ease-in-out infinite;
}

.hint-spotlight {
  position: absolute;
  z-index: 80;
  right: 4.8%;
  bottom: 9.5%;
  width: 130px;
  height: 80px;
  border: 2px dashed var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(2, 0, 8, .59), 0 0 28px rgba(101, 249, 255, .65) inset;
  pointer-events: none;
  animation: spotlight-pulse 1.1s ease-in-out infinite;
}

.hint-bubble {
  position: absolute;
  right: 50%;
  bottom: 75%;
  width: 150px;
  padding: 7px;
  color: #16040b;
  background: var(--cyan);
  border: 2px solid #05020a;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .45);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  transform: translateX(50%) rotate(-2deg);
}

.hint-bubble small {
  font-weight: 400;
  font-size: 8px;
}

/* --------------------------------------------------------------------------
   开始界面任务栏
   -------------------------------------------------------------------------- */

.start-taskbar {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: stretch;
  flex: 0 0 var(--taskbar-h);
  min-height: var(--taskbar-h);
  color: #ded5c2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 22%),
    linear-gradient(90deg, #2a1d17, #1a1212 46%, #211713);
  border-top: 2px solid #0b0604;
  box-shadow: 0 -3px 0 rgba(255, 46, 166, .18);
  user-select: none;
}

.taskbar-orb {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border-right: 1px solid #4a382c;
  color: #261004;
  background: linear-gradient(#ffe766, #c69316);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: inset -2px 0 0 #000, inset 0 1px 0 rgba(255, 255, 255, .45);
}

.taskbar-orb:hover {
  filter: brightness(1.1);
}

.taskbar-orb span {
  font-family: var(--font-ui);
  font-size: 9px;
}

.taskbar-orb::first-letter {
  font-size: 20px;
}

.taskbar-mission {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 12px;
  border-right: 1px solid #3b2b24;
  background: linear-gradient(90deg, rgba(255, 46, 166, .07), transparent 55%);
}

.mission-tag {
  flex: none;
  padding: 2px 5px;
  color: #16050b;
  background: var(--pink);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .04em;
}

.taskbar-mission strong {
  color: var(--yellow);
  font-size: 11px;
  letter-spacing: .04em;
  white-space: nowrap;
}

.mission-sub {
  overflow: hidden;
  color: #8d8173;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.taskbar-hint {
  flex: none;
  margin-left: 2px;
  padding: 3px 7px;
  border: 1px solid #756653;
  color: #d8c9ae;
  background: #221914;
  font-size: 8px;
}

.taskbar-hint:hover {
  color: #1d0b03;
  background: var(--yellow);
  border-color: #000;
}

.taskbar-tray {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding: 0 11px;
  border-left: 1px solid #3d2d25;
}

.tray-item {
  padding: 3px 5px;
  border: 1px solid transparent;
  color: #9f9484;
  font-family: var(--font-mono);
  font-size: 7px;
  white-space: nowrap;
}

.tray-item b {
  color: #ff7c69;
}

.tray-item--static {
  cursor: default;
}

button.tray-item:hover {
  color: var(--yellow);
  border-color: #5a4a3e;
  background: #30231b;
}

.taskbar-clock {
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid #4a382c;
  color: #e6d9c2;
  font-family: var(--font-mono);
  font-size: 8px;
  white-space: nowrap;
}