/* ==========================================================================
   游戏界面：廉价未来操作系统的核心体验
   ========================================================================== */

.game-screen {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 10px 26px 9px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 65% at 50% 52%, rgba(58, 13, 76, .54), transparent 72%),
    linear-gradient(180deg, rgba(3, 0, 8, .45), rgba(5, 0, 11, .78));
}

.game-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 46, 166, .05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(101, 249, 255, .04) 1px, transparent 1px);
  background-size: 90px 90px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
}

.game-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ambient-banner {
  position: absolute;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 148px;
  height: 410px;
  padding: 17px 8px;
  overflow: hidden;
  border: 2px solid var(--pink);
  color: var(--pink);
  background: rgba(13, 2, 18, .74);
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: center;
  letter-spacing: .11em;
  transform: translateY(-50%) rotate(-2deg);
  box-shadow: 0 0 32px rgba(255, 46, 166, .14);
  opacity: .8;
}

.ambient-banner b {
  color: var(--yellow);
  font-family: var(--font-ui);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: .05em;
  writing-mode: vertical-rl;
  text-shadow: 0 0 12px rgba(255, 232, 74, .5);
}

.ambient-banner span:first-child {
  animation: blink 1.4s steps(1) infinite;
}

.ambient-banner--left {
  left: 7px;
}

.ambient-banner--right {
  right: 7px;
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-50%) rotate(2deg);
  box-shadow: 0 0 32px rgba(101, 249, 255, .12);
}

.ambient-banner--right b {
  color: var(--lime);
}

.game-shell {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(1160px, calc(100vw - 52px));
  height: 100%;
  max-height: calc(100dvh - var(--chrome-h) - 19px);
  overflow: hidden;
  color: var(--cream);
  background: #09030f;
  border: 2px solid #79664e;
  box-shadow:
    0 0 0 1px #020006,
    0 0 0 6px rgba(20, 8, 25, .38),
    12px 14px 0 rgba(0, 0, 0, .42),
    0 0 52px rgba(255, 46, 166, .13),
    inset 0 0 80px rgba(51, 14, 63, .28);
}

.game-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .025), transparent 12%, transparent 88%, rgba(255, 255, 255, .025)),
    radial-gradient(ellipse at 50% 0, rgba(255, 46, 166, .08), transparent 50%);
}

.game-titlebar {
  display: flex;
  align-items: center;
  flex: 0 0 30px;
  min-height: 30px;
  padding: 0 4px 0 8px;
  color: #251c14;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 35%),
    linear-gradient(90deg, #c3b99e, #a69a7d);
  border-bottom: 2px solid #090304;
  font-family: var(--font-mono);
  font-size: 10px;
  user-select: none;
}

.game-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  color: #ffe244;
  background: #8f1525;
  border: 1px solid #2b0709;
  font-size: 10px;
}

.game-titletext {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.game-titletext b {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: -.02em;
}

.game-titletext span {
  color: #62533d;
  font-family: var(--font-song);
  font-size: 7px;
}

.game-window-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.game-window-actions button {
  display: grid;
  place-items: center;
  width: 19px;
  height: 17px;
  border: 1px solid #4f4334;
  color: #2d2015;
  background: linear-gradient(#e0d7c2, #a99a81);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
}

.game-window-actions button:hover {
  color: #12070a;
  background: var(--yellow);
}

.game-hud {
  display: flex;
  align-items: center;
  flex: 0 0 66px;
  min-height: 66px;
  gap: clamp(12px, 2.1vw, 29px);
  padding: 7px 14px;
  background:
    radial-gradient(ellipse at 2% 30%, rgba(255, 46, 166, .19), transparent 22%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, #1a0923, #0d0514);
  border-bottom: 1px solid #4a274f;
  box-shadow: inset 0 -1px 0 #000, 0 3px 0 rgba(0, 0, 0, .28);
}

.hud-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 1 230px;
  min-width: 0;
}

.hud-logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 44px;
  padding: 2px;
  border: 2px solid #c62033;
  color: #ffe253;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .11) 0 4px, transparent 4px 8px),
    #7f0b25;
  font-family: var(--font-song);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
}

.hud-logo sup {
  font-size: 5px;
}

.hud-title {
  overflow: hidden;
  color: #f9edcb;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hud-title small {
  display: block;
  margin-top: 2px;
  color: #9e7b9d;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 400;
}

.hud-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 150px;
}

.hud-progress > span,
.hud-stat > span {
  color: #ad93b2;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .04em;
  white-space: nowrap;
}

.progress-pips {
  display: flex;
  flex: 1;
  gap: 3px;
  max-width: 177px;
}

.progress-pips i {
  position: relative;
  flex: 1;
  height: 14px;
  border: 1px solid #5b3964;
  background: #251029;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .4);
  transition: background .3s, box-shadow .3s;
}

.progress-pips i::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: rgba(255, 255, 255, .035);
}

.progress-pips i.is-filled {
  border-color: #ffe35b;
  background: linear-gradient(#ffe862, #e5a92d);
  box-shadow: 0 0 8px rgba(255, 221, 70, .58), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.progress-pips i.is-filling {
  animation: pip-flash .55s ease-in-out infinite alternate;
}

.hud-progress b {
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
}

.hud-stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex: none;
}

.hud-stat b {
  color: #ff96d1;
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1;
  letter-spacing: -.05em;
  text-shadow: 0 0 12px rgba(255, 46, 166, .4);
}

.hud-stat small {
  color: #806a80;
  font-family: var(--font-mono);
  font-size: 7px;
}

.hud-stat--ad b {
  color: #ff6945;
  font-size: 15px;
}

.hud-stat--ad {
  cursor: pointer;
}

.hud-stat--ad:hover b {
  text-shadow: 0 0 14px rgba(255, 105, 69, .8);
}

.hud-anniv {
  flex: none;
  padding: 4px 6px;
  color: #19050c;
  background: var(--yellow);
  font-family: var(--font-song);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  transform: rotate(2deg);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .35);
}

.hud-anniv span {
  color: #9a1823;
}

.game-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(288px, 318px);
  flex: 1 1 auto;
  min-height: 0;
}

/* 游戏舞台 --------------------------------------------------------------- */

.play-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background:
    linear-gradient(90deg, rgba(255, 46, 166, .03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(101, 249, 255, .025) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 60%, #22102d 0, #100518 51%, #07020d 100%);
  background-size: 56px 56px, 56px 56px, 100% 100%;
  border-right: 2px solid #3d2342;
}

.stage-topline {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 29px;
  min-height: 29px;
  padding: 0 13px;
  color: #a992ac;
  background: rgba(12, 3, 18, .85);
  border-bottom: 1px solid #381f3c;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .03em;
}

.stage-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffb3d4;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
}

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

.stage-viewers {
  color: #77657b;
}

.stage-viewers b {
  color: var(--cyan);
  font-weight: 400;
}

.stage-flag {
  margin-left: auto;
  color: #ffb26d;
  font-family: var(--font-ui);
  font-size: 8px;
}

.scene {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 47% 48% at 58% 67%, rgba(255, 46, 166, .14), transparent 68%),
    radial-gradient(ellipse 33% 37% at 34% 62%, rgba(101, 249, 255, .06), transparent 75%),
    linear-gradient(180deg, rgba(22, 7, 29, .15), rgba(8, 2, 12, .82) 85%);
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 69px, rgba(255, 255, 255, .025) 69px 70px),
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 15%);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 85%, transparent);
}

.scene::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 6px;
  z-index: 1;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 48, 180, .11);
  filter: blur(14px);
  pointer-events: none;
}

.scene-watermark {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 0;
  color: rgba(255, 255, 255, .025);
  font-family: var(--font-display);
  font-size: clamp(76px, 11vw, 142px);
  font-weight: 900;
  line-height: .77;
  letter-spacing: -.08em;
  text-align: center;
  transform: translate(-50%, -50%) rotate(-6deg);
  white-space: nowrap;
  pointer-events: none;
}

.scene-watermark span {
  display: block;
  font-family: var(--font-song);
  font-size: .42em;
  letter-spacing: .22em;
}

.scene-shelf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 31%;
  background:
    linear-gradient(180deg, transparent, rgba(32, 7, 24, .8) 83%, #1c0616 100%),
    repeating-linear-gradient(90deg, transparent 0 59px, rgba(255, 255, 255, .018) 59px 60px);
  pointer-events: none;
}

.scene-shelf::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 99, 190, .23), transparent);
}

.scene-floor-light {
  position: absolute;
  left: 50%;
  bottom: -14px;
  z-index: 2;
  width: 70%;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 133, 204, .19), transparent 69%);
  transform: translateX(-50%);
  pointer-events: none;
}

.scene-sticker {
  position: absolute;
  z-index: 3;
  padding: 8px 8px 6px;
  color: #2b090f;
  background: #f6eddb;
  border: 2px solid #2b090f;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
  font-family: var(--font-song);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  pointer-events: none;
}

.scene-sticker small {
  color: #9b3a2a;
  font-family: var(--font-ui);
  font-size: 6px;
  font-weight: 400;
}

.scene-sticker--one {
  left: 3%;
  top: 11%;
  transform: rotate(-6deg);
}

.scene-sticker--two {
  right: 2.5%;
  top: 12%;
  color: #f3e8d0;
  background: #6b1422;
  border-color: #f3e8d0;
  transform: rotate(5deg);
}

.scene-sticker--two small {
  color: #efc4ca;
}

.scene-tag {
  position: absolute;
  left: 2.5%;
  bottom: 15%;
  z-index: 3;
  padding: 8px 9px;
  color: #3e1208;
  background: #ffdd74;
  border: 2px solid #3e1208;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .33);
  font-family: var(--font-song);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  transform: rotate(4deg);
  pointer-events: none;
}

.scene-tag::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -11px;
  width: 1px;
  height: 11px;
  background: #3e1208;
}

.scene-tag b {
  color: #a9141f;
  font-size: 9px;
}

/* 对白泡泡 --------------------------------------------------------------- */

.speech-bubble {
  position: absolute;
  left: 3%;
  top: 4%;
  z-index: 26;
  width: min(410px, 54%);
  min-height: 75px;
  padding: 0 12px 11px;
  color: #251018;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), transparent 20%),
    #f9efd9;
  border: 2px solid #1b060d;
  box-shadow: 5px 6px 0 rgba(0, 0, 0, .43), inset 0 0 0 1px rgba(255, 255, 255, .36);
  transform: rotate(-.35deg);
}

.speech-bubble::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: repeating-linear-gradient(180deg, #c3192c 0 8px, #e6c552 8px 16px);
}

.speech-speaker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 -12px 6px;
  padding: 4px 9px 4px 13px;
  color: #fff4dc;
  background: #271020;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
}

.speech-speaker small {
  color: #bd97b5;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0;
}

.speech-text {
  min-height: 2.8em;
  color: #2c1019;
  font-family: var(--font-song);
  font-size: clamp(10px, .92vw, 13px);
  line-height: 1.55;
  white-space: pre-line;
}

.speech-text::after {
  content: "▌";
  color: #b51a2c;
  animation: blink .7s steps(1) infinite;
}

.speech-bubble.is-done .speech-text::after {
  display: none;
}

.speech-tail {
  position: absolute;
  right: 26px;
  bottom: -14px;
  width: 23px;
  height: 20px;
  background: #f9efd9;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .35));
  transform: rotate(2deg);
}

.life-signal {
  position: absolute;
  left: 50%;
  bottom: 36%;
  z-index: 18;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  color: #f4efd8;
  background: rgba(10, 2, 14, .73);
  border: 1px solid #5f4a65;
  font-family: var(--font-mono);
  font-size: 8px;
  transform: translateX(-50%);
  transition: opacity .3s;
}

.life-signal i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 7px var(--lime);
  animation: pulse-dot 1.1s ease-in-out infinite;
}

.scene.is-open .life-signal {
  opacity: 0;
}

/* 罐头 ------------------------------------------------------------------- */

.can-wrap {
  position: absolute;
  left: 50%;
  bottom: 8.5%;
  z-index: 12;
  width: clamp(142px, 14.2vw, 185px);
  height: clamp(237px, 24.5vw, 316px);
  transform: translateX(-50%);
  transition: left .7s cubic-bezier(.18, .83, .26, 1), transform .6s ease;
  filter: drop-shadow(10px 13px 9px rgba(0, 0, 0, .34));
}

.scene.is-open .can-wrap {
  left: 29.5%;
  transform: translateX(-50%) rotate(-3.5deg) translateY(-1px);
}

.can-glow {
  position: absolute;
  left: 50%;
  top: 5%;
  width: 145%;
  height: 92%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 182, 82, .28), transparent 67%);
  transform: translateX(-50%);
  filter: blur(8px);
  pointer-events: none;
}

.can {
  position: absolute;
  inset: 0;
}

.can-lid {
  position: absolute;
  left: 0;
  top: -1.5%;
  z-index: 8;
  width: 100%;
  height: 9.2%;
  transform-origin: 25% 60%;
  transition: transform .7s cubic-bezier(.2, .8, .3, 1), opacity .45s .3s;
}

.can-lid-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 2px solid #1d0f07;
  border-radius: 50%;
  background:
    linear-gradient(105deg, #545449, #b8b5a6 22%, #eeead8 40%, #c5c1af 65%, #6d6d60 100%);
  box-shadow: inset 0 3px 4px rgba(255, 255, 255, .54), inset 0 -4px 5px rgba(0, 0, 0, .27), 0 3px 0 rgba(0, 0, 0, .25);
}

.can-lid-inner::before {
  content: "";
  position: absolute;
  left: 9%;
  top: 17%;
  width: 82%;
  height: 65%;
  border: 1px solid rgba(59, 56, 43, .33);
  border-radius: 50%;
}

.pull-tab {
  position: absolute;
  left: 50%;
  top: 28%;
  width: 42%;
  height: 29%;
  border: 2px solid #514b3d;
  border-radius: 8px;
  background: linear-gradient(#cec9b8, #8f8c7f);
  transform: translateX(-50%) rotate(4deg);
  box-shadow: 1px 1px 0 rgba(255, 255, 255, .28);
}

.pull-tab::after {
  content: "";
  position: absolute;
  left: 70%;
  top: 4%;
  width: 38%;
  height: 92%;
  border: 2px solid #494333;
  border-radius: 50%;
  background: #aaa697;
}

.scene.is-open .can-lid {
  transform: translate(158%, -170%) rotate(132deg);
  opacity: 0;
}

.can-body {
  position: absolute;
  left: 1px;
  right: 1px;
  top: 2%;
  bottom: 2.5%;
  overflow: hidden;
  border: 2px solid #1e0b05;
  border-radius: 11% 11% 8% 8% / 4% 4% 3% 3%;
  background:
    linear-gradient(90deg, #6f4f2d, #b98f5c 4%, #e4c991 13%, #c79e66 53%, #f1dda9 77%, #a07b4b 95%, #5c3f23),
    #ad8551;
  box-shadow: inset 8px 0 13px rgba(37, 17, 2, .5), inset -9px 0 13px rgba(37, 17, 2, .48);
}

.can-label {
  position: absolute;
  inset: 8% 4.5% 7%;
  overflow: hidden;
  color: #320a0c;
  background:
    repeating-linear-gradient(0deg, rgba(95, 18, 10, .055) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 32% 18%, #fff3c2, transparent 31%),
    linear-gradient(165deg, #f9e8b8 0%, #f6d56b 33%, #e9ae2f 68%, #c37515 100%);
  border: 2px solid #390906;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
}

.can-label::before {
  content: "";
  position: absolute;
  left: -33%;
  top: 13%;
  width: 172%;
  height: 18%;
  background: #c11d2c;
  transform: rotate(-42deg);
}

.can-label-brand {
  position: relative;
  z-index: 2;
  margin-top: 3%;
  color: #f8efd9;
  font-family: var(--font-mono);
  font-size: clamp(4px, .47vw, 6px);
  letter-spacing: .04em;
  text-align: center;
}

.can-label-first {
  position: relative;
  z-index: 2;
  margin-top: 7%;
  color: #7f190f;
  font-family: var(--font-song);
  font-size: clamp(6px, .64vw, 8px);
  font-weight: 900;
  letter-spacing: .31em;
  text-align: center;
}

.can-label-main {
  position: relative;
  z-index: 2;
  margin-top: 1%;
  color: #f9efd2;
  font-family: var(--font-display);
  font-size: clamp(23px, 2.35vw, 34px);
  font-weight: 900;
  line-height: .91;
  letter-spacing: -.07em;
  text-align: center;
  text-shadow: 2px 2px 0 #7c1322;
  transform: rotate(-2deg);
}

.can-label-main b {
  color: #bb1528;
  font-weight: 900;
  text-shadow: 1px 2px 0 #fff1cf;
}

.can-label-star {
  position: relative;
  z-index: 2;
  margin-top: 2%;
  color: #c41828;
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: .9;
  text-align: center;
  transform: rotate(11deg);
}

.can-label-desc {
  position: relative;
  z-index: 2;
  margin-top: 2%;
  color: #3e110a;
  font-family: var(--font-song);
  font-size: clamp(5px, .53vw, 7px);
  font-weight: 900;
  text-align: center;
  letter-spacing: .05em;
}

.can-label-open {
  position: relative;
  z-index: 2;
  width: fit-content;
  margin: 4% auto 0;
  padding: 2px 5px;
  color: #fff3df;
  background: #8d1422;
  font-size: clamp(4px, .48vw, 6px);
  font-weight: 900;
  letter-spacing: .08em;
}

.can-label-seal {
  position: absolute;
  right: 6%;
  bottom: 17%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 27%;
  aspect-ratio: 1;
  border: 2px solid #8d1a15;
  border-radius: 50%;
  color: #8d1a15;
  font-family: var(--font-display);
  font-size: clamp(8px, .91vw, 13px);
  font-weight: 900;
  line-height: .82;
  text-align: center;
  transform: rotate(-12deg);
}

.can-label-seal small {
  display: block;
  font-family: var(--font-song);
  font-size: .42em;
  letter-spacing: .05em;
}

.can-label-fine {
  position: absolute;
  left: 5%;
  bottom: 8.5%;
  color: #551b0c;
  font-family: var(--font-song);
  font-size: clamp(3px, .35vw, 4.5px);
  line-height: 1.4;
}

.can-label-barcode {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 3%;
  height: 3.5%;
  background: repeating-linear-gradient(90deg, #2d0d08 0 1px, transparent 1px 2.5px, #2d0d08 2.5px 4px, transparent 4px 5.5px);
  opacity: .7;
}

.can-shine {
  position: absolute;
  left: 13%;
  top: 0;
  bottom: 0;
  width: 16%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  mix-blend-mode: screen;
  transform: skewX(-5deg);
  opacity: .55;
  pointer-events: none;
}

.can-ridges {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(60, 31, 8, .11) 5px 6px);
  opacity: .7;
  pointer-events: none;
}

.can-base {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 7;
  width: 100%;
  height: 7%;
  border: 2px solid #1f0d06;
  border-radius: 50%;
  background: linear-gradient(#d5c8a9, #777361 50%, #36332b);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}

.can-steam {
  position: absolute;
  left: 50%;
  top: -12%;
  z-index: 10;
  width: 100%;
  height: 90%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}

.scene.is-steaming .can-steam {
  opacity: 1;
}

.can-steam i {
  position: absolute;
  bottom: 0;
  display: block;
  width: 13px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(to top, rgba(255, 210, 230, .02), rgba(255, 210, 230, .46), transparent);
  filter: blur(4px);
  animation: steam-rise 1.7s ease-out infinite;
}

.can-steam i:nth-child(1) { left: 25%; height: 58px; animation-delay: .1s; }
.can-steam i:nth-child(2) { left: 41%; height: 80px; animation-delay: .4s; }
.can-steam i:nth-child(3) { left: 57%; height: 52px; animation-delay: .2s; }
.can-steam i:nth-child(4) { left: 70%; height: 73px; animation-delay: .62s; }

.can-cert {
  position: absolute;
  right: -12%;
  top: 21%;
  z-index: 11;
  padding: 4px 5px;
  color: #3e090c;
  background: #ffd9db;
  border: 2px solid #7c1018;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .32);
  font-family: var(--font-song);
  font-size: 7px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  transform: rotate(8deg);
}

.can-wrap:hover .can {
  filter: brightness(1.04);
}

.can-wrap.is-shaking {
  animation: can-hold-shake .16s linear infinite;
}

.scene.is-open .can-cert {
  opacity: .35;
}

/* 海星 ------------------------------------------------------------------- */

.starfish-wrap {
  position: absolute;
  left: 69%;
  bottom: 4.5%;
  z-index: 15;
  width: clamp(278px, 31vw, 384px);
  height: auto;
  transform: translateX(-50%) translateY(18%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease .1s;
}

.scene.is-open .starfish-wrap {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  animation: starfish-land .8s cubic-bezier(.18, .89, .28, 1.22) both;
}

.starfish {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: url(#sfDrop);
  transition: filter .2s, transform .2s;
}

.starfish .arm {
  cursor: var(--fork-cursor);
  outline: none;
  transition: opacity .3s ease;
}

.starfish .arm-shape {
  fill: url(#sfArmGrad);
  stroke: #982f24;
  stroke-width: 4;
  transition: fill .16s, filter .16s;
}

.starfish .arm-light {
  fill: none;
  stroke: #ffd2ad;
  stroke-width: 5;
  stroke-linecap: round;
  opacity: .27;
  pointer-events: none;
}

.starfish .arm-suckers circle {
  fill: #ffe0b3;
  opacity: .47;
  pointer-events: none;
}

.starfish .arm-hotspot {
  fill: transparent;
  pointer-events: all;
  cursor: var(--fork-cursor);
}

.starfish .arm:hover .arm-shape,
.starfish .arm:focus-visible .arm-shape {
  fill: #ffae72;
  filter: drop-shadow(0 0 9px rgba(255, 232, 74, .7));
  stroke: #fff2c9;
  stroke-width: 5;
}

.starfish .arm.is-bitten {
  opacity: 0;
  pointer-events: none;
}

.starfish-body {
  stroke: #982f24;
  stroke-width: 4;
  transition: fill .2s;
}

.starfish-body-light {
  stroke: #ffe0c6;
  stroke-width: 7;
  stroke-linecap: round;
  opacity: .25;
  pointer-events: none;
}

.starfish-spots circle {
  fill: #b73726;
  opacity: .28;
  pointer-events: none;
}

.starfish .eyes .pupil {
  transition: transform .15s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.starfish .brow {
  fill: none;
  stroke: #7e211b;
  stroke-width: 5;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .2s ease;
}

.starfish .mouth {
  opacity: 0;
  transition: opacity .13s ease;
  pointer-events: none;
}

.starfish.mood-happy #mouthHappy { opacity: 1; }
.starfish.mood-worried #mouthWorried { opacity: 1; }
.starfish.mood-angry #mouthAngry { opacity: 1; }
.starfish.mood-scared #mouthScared { opacity: 1; }

.starfish.mood-scared .pupil {
  transform: scale(.76);
}

.starfish.mood-scared .brow-l { transform: rotate(-14deg) translateY(-2px); }
.starfish.mood-scared .brow-r { transform: rotate(14deg) translateY(-2px); }
.starfish.mood-angry .brow-l { transform: rotate(18deg) translateY(2px); }
.starfish.mood-angry .brow-r { transform: rotate(-18deg) translateY(2px); }
.starfish.mood-happy .brow-l { transform: translateY(-3px) rotate(-5deg); }
.starfish.mood-happy .brow-r { transform: translateY(-3px) rotate(5deg); }

.starfish .sweat {
  opacity: 0;
  fill: #b7f3ff;
  stroke: #357089;
  stroke-width: 2;
}

.starfish.mood-scared .sweat {
  opacity: 1;
  animation: sweat-drip 1s ease-in infinite;
}

.starfish .lash {
  fill: none;
  stroke: #5c1714;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .37;
}

.starfish.is-hurt {
  animation: sf-hurt .4s cubic-bezier(.36, .07, .19, .97);
}

.starfish.is-poked {
  animation: sf-poked .4s ease;
}

.starfish-wrap.is-dead .starfish {
  animation: sf-empty 1.2s ease forwards;
}

.starfish-wrap.is-dead {
  pointer-events: none;
}

.starfish-badge,
.starfish-sash {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  user-select: none;
}

.starfish-badge {
  left: -3%;
  top: 17%;
  padding: 5px 9px;
  color: #2b0a0e;
  background: #f8f0dc;
  border: 1px solid #2b0a0e;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .27);
  font-family: var(--font-song);
  font-size: clamp(7px, .61vw, 9px);
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  transform: rotate(-7deg);
}

.starfish-badge small {
  display: block;
  color: #8f4c36;
  font-family: var(--font-mono);
  font-size: .62em;
  font-weight: 400;
}

.starfish-sash {
  left: 34%;
  bottom: 17%;
  padding: 2px 11px;
  color: #17030a;
  background: var(--yellow);
  border: 2px solid #340810;
  font-family: var(--font-ui);
  font-size: clamp(6px, .53vw, 8px);
  font-weight: 900;
  letter-spacing: .06em;
  transform: rotate(-12deg);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .28);
}

.bite-tooltip {
  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 12;
  padding: 5px 9px;
  color: #1c0410;
  background: var(--yellow);
  border: 2px solid #1c0410;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .3);
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-3deg);
  animation: tooltip-bob 1.05s ease-in-out infinite;
  pointer-events: auto;
  cursor: var(--fork-cursor);
}

.bite-tooltip span {
  display: block;
  color: #b6101e;
  font-size: 12px;
  line-height: .8;
  text-align: center;
}

.scene:not(.is-open) .starfish-wrap,
.scene.is-complete .starfish-wrap {
  pointer-events: none;
}

.scene.is-complete .bite-tooltip {
  display: none;
}

/* 餐桌与点击特效 ---------------------------------------------------------- */

.plate {
  position: absolute;
  left: 50%;
  bottom: 3.5%;
  z-index: 4;
  width: 69%;
  height: 11%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 248, 218, .18), transparent 41%),
    linear-gradient(180deg, #f1ddb1 0 18%, #9f854f 20% 35%, #4e3427 37% 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .36),
    0 17px 25px rgba(0, 0, 0, .42);
  transform: translateX(-50%);
  pointer-events: none;
}

.plate::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12%;
  width: 80%;
  height: 57%;
  border: 1px solid rgba(63, 37, 20, .42);
  border-radius: 50%;
  transform: translateX(-50%);
}

.particles {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}

.juice {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size, 7px);
  height: var(--size, 7px);
  border-radius: var(--round, 50%);
  background: var(--color, #ff7a5c);
  box-shadow: 0 0 4px rgba(255, 128, 70, .5);
  animation: juice-fly .72s cubic-bezier(.16, .84, .32, 1) forwards;
}

.juice.spark {
  border-radius: 1px;
  background: var(--yellow);
  box-shadow: 0 0 8px var(--yellow);
}

.chomp-text {
  position: absolute;
  z-index: 41;
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: clamp(23px, 3.2vw, 43px);
  font-weight: 900;
  letter-spacing: -.08em;
  text-shadow:
    2px 2px 0 #2a050b,
    -2px -2px 0 #2a050b,
    0 0 17px rgba(255, 218, 52, .49);
  pointer-events: none;
  opacity: 0;
  transform: rotate(-7deg) scale(.5);
}

.chomp-text.is-showing {
  animation: chomp-pop .55s ease-out both;
}

.score-float {
  position: absolute;
  z-index: 42;
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 900;
  text-shadow: 1px 1px 0 #0a1d00, 0 0 9px rgba(200, 255, 55, .6);
  pointer-events: none;
  animation: score-rise .85s ease-out both;
}

.score-float.bad {
  color: var(--pink);
  text-shadow: 1px 1px 0 #2b0013, 0 0 9px rgba(255, 46, 166, .6);
}

/* 操作区 ----------------------------------------------------------------- */

.action-dock {
  position: relative;
  flex: 0 0 104px;
  min-height: 104px;
  padding: 10px 16px 9px;
  border-top: 1px solid #4c2b4d;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 46, 166, .11), transparent 66%),
    linear-gradient(180deg, #15081c, #0a040f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  text-align: center;
}

.action-hint {
  min-height: 14px;
  margin-bottom: 5px;
  color: #d9c0d3;
  font-family: var(--font-song);
  font-size: clamp(10px, .82vw, 12px);
  letter-spacing: .02em;
}

.action-hint.is-alert {
  color: #ffd86b;
}

.open-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(390px, 82%);
  height: 52px;
  overflow: hidden;
  color: #241000;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .16) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, #fff078, #ffc321 56%, #dc8b00);
  border: 3px solid #1d0709;
  box-shadow:
    5px 5px 0 #220510,
    0 0 23px rgba(255, 200, 27, .2),
    inset 0 2px 0 rgba(255, 255, 255, .72);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
  user-select: none;
  touch-action: none;
  transition: transform .08s, box-shadow .08s, filter .15s;
}

.open-btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

.open-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #220510;
}

.open-btn-label {
  position: relative;
  z-index: 2;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1.1;
}

.open-btn-sub {
  position: relative;
  z-index: 2;
  margin-top: 2px;
  font-family: var(--font-song);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .01em;
  opacity: .7;
}

.open-btn-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 0;
  height: 100%;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .15) 0 6px, transparent 6px 12px),
    linear-gradient(#ff9d48, #e13c25);
  border-right: 2px solid #24060a;
  transition: width .05s linear;
}

.open-btn.is-complete {
  display: none;
}

.open-btn.is-triggered {
  animation: button-agree .42s ease both;
}

.auto-bite-btn {
  display: inline-block;
  margin-top: 2px;
  padding: 4px 11px;
  border: 1px solid #785b78;
  color: #c8aec5;
  background: rgba(34, 12, 40, .7);
  font-size: 9px;
}

.auto-bite-btn:hover {
  color: #23060b;
  background: var(--yellow);
  border-color: #17050a;
}

.action-fineprint {
  margin-top: 6px;
  color: #79637a;
  font-family: var(--font-song);
  font-size: 8px;
  letter-spacing: .02em;
}

/* 侧栏 ------------------------------------------------------------------- */

.side-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  color: #281018;
  background:
    repeating-linear-gradient(0deg, rgba(65, 35, 13, .025) 0 1px, transparent 1px 5px),
    #e7d7b7;
  border-left: 1px solid #b7a17b;
  box-shadow: inset 5px 0 14px rgba(70, 42, 15, .16);
}

.side-tabs {
  display: flex;
  flex: 0 0 31px;
  padding: 5px 6px 0;
  gap: 3px;
  background: #cbb994;
  border-bottom: 2px solid #735d3e;
}

.side-tab {
  position: relative;
  padding: 4px 10px 5px;
  border: 1px solid #8d7857;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  color: #69563e;
  background: #baa681;
  font-family: var(--font-song);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.side-tab--active {
  color: #281018;
  background: #f2e5c8;
  border-color: #6d583d;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5);
}

.side-tab:hover {
  color: #210b12;
  background: #f1dfbb;
}

.side-panels {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-color: #8d7957 #d8c7a6;
  scrollbar-width: thin;
}

.side-panels::-webkit-scrollbar {
  width: 9px;
}

.side-panels::-webkit-scrollbar-track {
  background: #d8c7a6;
}

.side-panels::-webkit-scrollbar-thumb {
  border: 2px solid #d8c7a6;
  background: #8d7957;
}

.side-panel-content {
  padding: 9px 10px 11px;
}

.live-panel-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  color: #8a4d30;
  font-family: var(--font-mono);
  font-size: 8px;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 4px;
  color: #fff3dc;
  background: #be1d2c;
  font-family: var(--font-ui);
  font-size: 7px;
  font-weight: 900;
}

.live-badge i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff4d8;
  animation: blink .8s steps(1) infinite;
}

.product-mini {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px;
  border: 1px solid #b49b74;
  background: #f7edd7;
  box-shadow: 2px 2px 0 rgba(94, 62, 28, .12);
}

.product-mini-thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 37px;
  height: 44px;
  color: #f9ecce;
  background: linear-gradient(155deg, #c71d2d, #7d101b);
  border: 1px solid #3a0a0b;
  font-size: 21px;
  text-shadow: 2px 2px 0 rgba(60, 6, 8, .35);
}

.product-mini b {
  display: block;
  font-size: 10px;
  line-height: 1.3;
}

.product-mini span,
.product-mini small {
  display: block;
  margin-top: 1px;
  color: #8e5a35;
  font-family: var(--font-song);
  font-size: 8px;
  line-height: 1.25;
}

.product-mini small {
  color: #a27a54;
}

.streamer-comments {
  margin: 8px 0;
  padding: 6px;
  border: 1px solid #b49b74;
  background: #f5ead3;
}

.stream-comment {
  display: flex;
  gap: 6px;
  padding: 3px 1px;
  border-bottom: 1px dashed rgba(126, 92, 57, .18);
  font-family: var(--font-song);
  font-size: 8px;
  line-height: 1.4;
}

.stream-comment:last-child {
  border-bottom: 0;
}

.stream-comment b {
  flex: none;
  color: #8b3c1d;
  font-family: var(--font-ui);
  font-size: 8px;
}

.stream-comment span {
  color: #62452c;
}

.stream-comment--ad {
  padding: 4px;
  border: 1px solid #dfa93b;
  background: #fff4bd;
}

.stream-comment--ad em {
  flex: none;
  color: #9b1d08;
  font-family: var(--font-mono);
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
}

.stream-comment--gold b {
  color: #a86a00;
}

.stream-comment.is-new {
  animation: comment-in .35s ease-out both;
}

.rating-card {
  margin-bottom: 8px;
  padding: 7px;
  border: 1px solid #b49b74;
  background: #fbf2df;
}

.rating-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: #765a3e;
  font-family: var(--font-song);
  font-size: 9px;
}

.rating-head b {
  color: #bb1726;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
}

.stars {
  margin: 1px 0 3px;
  color: #d09100;
  font-size: 17px;
  letter-spacing: .13em;
  line-height: 1;
}

.rating-fine {
  color: #a1835f;
  font-family: var(--font-song);
  font-size: 7px;
  line-height: 1.4;
}

.side-promo {
  position: relative;
  padding: 8px 7px;
  color: #401027;
  background: #ffbcdd;
  border: 1px solid #a12f60;
  box-shadow: 2px 2px 0 rgba(94, 12, 49, .12);
  font-size: 8px;
  line-height: 1.5;
}

.promo-flash {
  display: inline-block;
  margin-bottom: 3px;
  padding: 1px 4px;
  color: #fff2d4;
  background: #ba1d28;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 900;
}

.side-promo b {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-song);
  font-size: 9px;
}

.side-promo button {
  padding: 3px 6px;
  border: 1px solid #5a1235;
  color: #fff0d8;
  background: #9d1e54;
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 900;
}

.side-promo button:hover {
  color: #35051b;
  background: var(--yellow);
}

.side-recommend {
  margin-top: 7px;
  border: 1px solid #b9a17b;
  background: #f2e5c9;
}

.side-recommend-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
  border-bottom: 1px solid #c7b18c;
  color: #70472a;
  background: #dfcba5;
  font-family: var(--font-song);
  font-size: 8px;
  font-weight: 900;
}

.side-recommend-head span {
  padding: 1px 3px;
  color: #fff4d9;
  background: #a41c28;
  font-family: var(--font-mono);
  font-size: 6px;
  font-weight: 400;
}

.rec-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border-bottom: 1px dashed #ccb892;
}

.rec-row:last-of-type {
  border-bottom: 0;
}

.rec-thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 31px;
  height: 30px;
  border: 1px solid #ae946c;
  background: #fff4dc;
  font-size: 15px;
}

.rec-copy {
  min-width: 0;
  flex: 1;
}

.rec-copy b {
  display: block;
  overflow: hidden;
  color: #5c2d18;
  font-family: var(--font-song);
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rec-copy small {
  display: block;
  overflow: hidden;
  margin-top: 1px;
  color: #9a7c57;
  font-family: var(--font-song);
  font-size: 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rec-row button {
  flex: none;
  padding: 2px 5px;
  border: 1px solid #5b1b16;
  color: #fff1d6;
  background: #a52226;
  font-size: 7px;
  font-weight: 900;
}

.rec-row button:hover {
  color: #2a070b;
  background: var(--yellow);
}

.side-ad-slot {
  margin: 5px;
  padding: 6px 5px;
  border: 1px dashed #b48c5b;
  color: #987244;
  background:
    repeating-linear-gradient(135deg, rgba(130, 88, 39, .05) 0 4px, transparent 4px 8px);
  font-family: var(--font-song);
  font-size: 8px;
  line-height: 1.4;
  text-align: center;
}

.side-ad-slot small {
  font-size: 6px;
  opacity: .7;
}

.spec-title {
  margin: 0 0 8px;
  padding-bottom: 5px;
  border-bottom: 2px solid #b7a17b;
  color: #4d2e1a;
  font-family: var(--font-song);
  font-size: 14px;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  color: #573b24;
  font-family: var(--font-song);
  font-size: 8px;
  line-height: 1.45;
}

.spec-table th {
  width: 31%;
  padding: 4px 4px;
  border-bottom: 1px solid #d5c5a7;
  color: #8a6746;
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
}

.spec-table td {
  padding: 4px 2px;
  border-bottom: 1px solid #d5c5a7;
}

.spec-warning {
  margin-top: 8px;
  padding: 6px 7px;
  color: #781a14;
  background: #ffe9d3;
  border-left: 3px solid #b8281e;
  font-family: var(--font-song);
  font-size: 8px;
  line-height: 1.6;
}

.spec-barcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 11px 0 8px;
}

.spec-barcode span {
  width: 82%;
  height: 24px;
  background: repeating-linear-gradient(90deg, #351e13 0 2px, transparent 2px 4px, #351e13 4px 5px, transparent 5px 8px);
  opacity: .75;
}

.spec-barcode b {
  margin-top: 3px;
  color: #6d4d32;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .2em;
}

.spec-more {
  display: block;
  width: 100%;
  padding: 5px;
  border: 1px dashed #a38a66;
  color: #80613f;
  background: transparent;
  font-size: 8px;
}

.spec-more:hover {
  color: #31150c;
  background: #f7ebd3;
}

.chat-window {
  height: 190px;
  overflow: auto;
  padding: 5px;
  border: 1px solid #b49b74;
  background: #f8efdc;
  font-family: var(--font-song);
  font-size: 8px;
}

.chat-msg {
  max-width: 91%;
  margin-bottom: 6px;
  padding: 5px 6px;
  line-height: 1.5;
  border: 1px solid #d4c3a2;
  background: #fff9ed;
}

.chat-msg--bot {
  color: #5d4029;
  background: #eef4dd;
  border-color: #b8c69b;
}

.chat-msg--user {
  margin-left: auto;
  color: #4c231c;
  background: #ffe2b5;
  border-color: #d4a973;
}

.chat-name {
  display: block;
  margin-bottom: 2px;
  color: #6e4d28;
  font-family: var(--font-ui);
  font-size: 7px;
  font-weight: 900;
}

.chat-msg small {
  display: block;
  margin-top: 2px;
  color: #a28b6a;
  font-family: var(--font-ui);
  font-size: 7px;
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 5px 0;
}

.chat-suggestions button {
  padding: 3px 5px;
  border: 1px solid #baa27d;
  color: #796044;
  background: #f4e8cf;
  font-size: 7px;
}

.chat-suggestions button:hover {
  color: #2d100d;
  background: #fff6df;
}

.chat-form {
  display: flex;
  gap: 4px;
}

.chat-form input {
  flex: 1;
  min-width: 0;
  padding: 4px 5px;
  border: 1px solid #a68c66;
  color: #402518;
  background: #fff9ea;
  font-family: var(--font-song);
  font-size: 8px;
}

.chat-form input::placeholder {
  color: #a38b6e;
}

.chat-form button {
  padding: 3px 7px;
  border: 1px solid #604119;
  color: #3b240c;
  background: #dfc073;
  font-size: 8px;
  font-weight: 900;
}

.chat-form button:hover {
  background: var(--yellow);
}

.chat-fine {
  margin: 6px 0 0;
  color: #9e8665;
  font-family: var(--font-song);
  font-size: 7px;
  line-height: 1.4;
}

.side-cta {
  flex: none;
  padding: 8px 9px 7px;
  background: #d0bb97;
  border-top: 1px solid #9e8765;
}

.member-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 7px 6px;
  border: 2px solid #3f0b28;
  color: #ffeab6;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .09) 0 5px, transparent 5px 10px),
    linear-gradient(#6e218a, #3d0b4e);
  box-shadow: 2px 2px 0 rgba(64, 22, 11, .26);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.member-btn span {
  color: var(--gold);
  font-size: 16px;
  line-height: 1;
}

.member-btn:hover {
  color: #2a021a;
  background: var(--gold);
}

.side-cta p {
  margin: 4px 0 0;
  color: #846d4e;
  font-family: var(--font-song);
  font-size: 7px;
  text-align: center;
}

/* 页脚与滚动条 ----------------------------------------------------------- */

.game-footer {
  display: flex;
  align-items: stretch;
  flex: 0 0 30px;
  min-height: 30px;
  border-top: 2px solid #3b1e3e;
  background: #09030d;
}

.game-ticker-wrap {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}

.ticker-label {
  display: flex;
  align-items: center;
  flex: none;
  padding: 0 8px;
  color: #2a0309;
  background: #d52439;
  font-family: var(--font-song);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .03em;
}

.game-ticker {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.game-ticker div {
  flex: none;
  color: #ae888f;
  font-family: var(--font-song);
  font-size: 8px;
  white-space: nowrap;
  animation: ticker-run 38s linear infinite;
}

.game-ticker:hover div {
  animation-play-state: paused;
}

.game-footer-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 0 8px;
  border-left: 1px solid #3b1e3e;
}

.game-footer-right span {
  color: #8e6589;
  font-family: var(--font-mono);
  font-size: 7px;
  white-space: nowrap;
}

.game-footer-right b {
  color: var(--yellow);
}

.game-footer-right button {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid #5d4660;
  color: #a487a1;
  font-size: 10px;
}

.game-footer-right button:hover {
  color: #19040e;
  background: var(--yellow);
}

/* 游戏内迷你广告 --------------------------------------------------------- */

.mini-ad-container {
  position: absolute;
  right: 29px;
  bottom: 47px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

.mini-ad {
  position: relative;
  width: min(292px, calc(100vw - 60px));
  padding: 10px 11px;
  color: #2b0b16;
  background:
    repeating-linear-gradient(0deg, rgba(112, 50, 19, .035) 0 1px, transparent 1px 5px),
    #f8eac9;
  border: 2px solid #20050c;
  box-shadow: 5px 6px 0 rgba(0, 0, 0, .46);
  pointer-events: auto;
  animation: mini-ad-in .42s cubic-bezier(.2, .9, .2, 1.1) both;
}

.mini-ad:nth-child(even) {
  transform: rotate(1deg);
}

.mini-ad.is-leaving {
  animation: mini-ad-out .25s ease-in both;
}

.mini-ad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -10px -11px 6px;
  padding: 3px 6px;
  color: #fff2dc;
  background: #8d1b2c;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .04em;
}

.mini-ad-close {
  color: #fff2dc;
  font-size: 12px;
  line-height: 1;
}

.mini-ad b {
  display: block;
  color: #861727;
  font-family: var(--font-song);
  font-size: 12px;
  line-height: 1.3;
}

.mini-ad p {
  margin: 3px 0 7px;
  color: #63402d;
  font-family: var(--font-song);
  font-size: 8px;
  line-height: 1.55;
}

.mini-ad button {
  padding: 4px 7px;
  border: 1px solid #3c0a13;
  color: #fff4dc;
  background: #c51e33;
  font-size: 8px;
  font-weight: 900;
}

.mini-ad button:hover {
  color: #25040b;
  background: var(--yellow);
}

.mini-ad .mini-ad-fine {
  margin: 5px 0 0;
  color: #9c8062;
  font-size: 7px;
}