:root {
  --pink: #f6a9f1;
  --cyan: #8eeeff;
  --purple: #8b62ff;
  --deep: #171027;
  --yellow: #ffd93d;
  --orange: #ff9b2f;
  --panel: rgba(53, 48, 63, 0.68);
  --line: rgba(255, 255, 255, 0.55);
  --player-hair: #17150f;
  --hoodie-color: #ffd8cb;
  --hoodie-shadow: #d88a78;
  --pants-color: #fff9f0;
  --shoe-color: #fff4ea;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: "Microsoft YaHei", "Trebuchet MS", sans-serif;
  background: #191327;
}

button {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  transition: transform 0.16s ease, filter 0.16s ease;
}

button:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.06);
}

.game-screen {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.18), transparent 40%);
}

.playground {
  position: relative;
  width: min(100vw, 1280px);
  aspect-ratio: 2.05 / 1;
  max-height: 100vh;
  overflow: hidden;
  color: #fff;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.38) 1px, transparent 1px),
    radial-gradient(circle at 76% 34%, rgba(255,255,255,.72), transparent 22%),
    linear-gradient(135deg, #ffb2f5 0%, #bff9ff 46%, #f8b0f5 100%);
  background-size: 24px 24px, 24px 24px, auto, auto;
  box-shadow: 0 0 60px rgba(0,0,0,.45);
}

.playground::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.26) 18px 20px),
    radial-gradient(circle at 22% 70%, rgba(255,255,255,.8), transparent 8%),
    radial-gradient(circle at 91% 24%, rgba(255,255,255,.7), transparent 9%);
  opacity: .34;
  pointer-events: none;
}

.top-left-time {
  position: absolute;
  left: 88px;
  top: 6px;
  z-index: 3;
  color: #fff7ad;
  font-size: 20px;
  font-weight: 900;
  text-shadow: 0 2px 2px rgba(0,0,0,.2);
}

.left-rail {
  position: absolute;
  left: 12px;
  top: 36px;
  bottom: 38px;
  z-index: 4;
  width: 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.rail-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  color: #f58fe9;
  background: rgba(255,255,255,.46);
  border: 3px solid rgba(255,255,255,.38);
}

.rail-icon.plus {
  margin-top: auto;
  border-radius: 50%;
  color: #fff;
  font-size: 30px;
  background: #b865ff;
}

.friend-panel {
  position: absolute;
  left: 78px;
  top: 34px;
  z-index: 5;
  width: 104px;
  height: 436px;
  border-radius: 0 0 14px 14px;
  background: #1b1725;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}

.profile-card {
  display: grid;
  place-items: center;
  height: 94px;
  background: #111;
  border-radius: 8px 8px 0 0;
}

.portrait {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 42%, #ffd9e6 0 25%, transparent 26%),
    radial-gradient(circle at 50% 36%, #111 0 38%, transparent 39%),
    linear-gradient(180deg, #f7dbff, #201727);
}

.uid {
  font-size: 12px;
  font-weight: 900;
}

.friend-button {
  width: 88px;
  height: 46px;
  margin: 16px 8px 0;
  border-radius: 8px;
  color: white;
  font-size: 20px;
  background: #0f0d14;
}

.buddy-tab {
  position: absolute;
  right: -28px;
  top: 132px;
  width: 28px;
  padding: 6px 3px;
  color: #ffd852;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  background: #1b1725;
  border-radius: 0 10px 10px 0;
}

.top-menu {
  position: absolute;
  left: 210px;
  right: 330px;
  top: 28px;
  z-index: 6;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.top-menu button {
  min-width: 74px;
  height: 70px;
  padding-top: 42px;
  position: relative;
  color: #3b2342;
  font-size: 14px;
  background: transparent;
  text-shadow: 0 2px 0 #fff;
}

.top-menu button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 42px;
  height: 42px;
  transform: translateX(-50%);
  border-radius: 14px;
  background: linear-gradient(145deg, #fff45a, #ff72d8);
  border: 3px solid #fff;
  box-shadow: 0 4px 0 rgba(69, 38, 99, .25);
}

.top-menu button:nth-child(2)::before { background: linear-gradient(145deg, #5fd8ff, #8b62ff); }
.top-menu button:nth-child(3)::before { background: linear-gradient(145deg, #ffe6a2, #ff88a8); }
.top-menu button:nth-child(4)::before { background: linear-gradient(145deg, #fff, #ffc867); }
.top-menu button:nth-child(5)::before { background: linear-gradient(145deg, #fc86ff, #8b62ff); }
.top-menu button:nth-child(6)::before { background: linear-gradient(145deg, #ffd93d, #ff8b2f); }

.task-card {
  position: absolute;
  left: 188px;
  top: 134px;
  z-index: 4;
  width: 250px;
  min-height: 180px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--panel);
  color: #dfffff;
}

.task-card header {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.task-card strong {
  display: inline-grid;
  place-items: center;
  width: 82px;
  height: 34px;
  border-radius: 999px;
  color: #ffe485;
  background: #7450b9;
  border: 3px solid #fff;
}

.task-card span {
  display: block;
  color: #5dfff1;
  font-weight: 900;
}

.task-card p {
  margin: 5px 0 16px;
  font-size: 13px;
  color: white;
}

.pass-card {
  position: absolute;
  left: 178px;
  bottom: 112px;
  z-index: 4;
  width: 140px;
  height: 86px;
  border-radius: 8px;
  color: #4c2600;
  border: 4px solid white;
  background: linear-gradient(135deg, #fff98a, #ffb21d);
  box-shadow: 0 8px 0 rgba(0,0,0,.65);
}

.pass-card b {
  position: absolute;
  right: 8px;
  top: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  background: #ffae00;
}

.center-stage {
  position: absolute;
  inset: 78px 292px 74px 410px;
  z-index: 2;
}

.room-frame {
  position: absolute;
  inset: 0;
  border: 6px solid rgba(255,255,255,.72);
  border-bottom-width: 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.36) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.36) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.08));
  background-size: 32px 32px, 32px 32px, auto;
  clip-path: polygon(13% 0, 87% 0, 100% 18%, 100% 100%, 0 100%, 0 18%);
}

.hello {
  position: absolute;
  right: -220px;
  top: 0;
  color: #d383df;
  font-size: 36px;
  font-weight: 900;
  -webkit-text-stroke: 2px rgba(255,255,255,.55);
}

.poster {
  position: absolute;
  right: -205px;
  top: 115px;
  width: 160px;
  height: 72px;
  display: grid;
  place-items: center;
  color: #e9a2ee;
  font-weight: 900;
  border: 4px solid #f2b7ff;
  background: rgba(255,255,255,.35);
}

.hearts {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  color: #f58fe9;
  font-size: 28px;
}

.player-character {
  position: absolute;
  left: 50%;
  bottom: -18px;
  z-index: 5;
  width: 238px;
  height: 430px;
  transform: translateX(-50%);
}

.image-character {
  width: 300px;
  height: 430px;
  bottom: -20px;
  display: grid;
  place-items: end center;
  pointer-events: none;
}

.image-character img {
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0 18px 18px rgba(80, 35, 80, .24));
  mix-blend-mode: multiply;
}

.head {
  position: absolute;
  left: 63px;
  top: 68px;
  z-index: 6;
  width: 112px;
  height: 120px;
  border: 3px solid #a66b5a;
  border-radius: 48% 48% 52% 52%;
  background:
    radial-gradient(circle at 50% 58%, #f2b99b 0 4%, transparent 5%),
    radial-gradient(circle at 30% 50%, #794333 0 7%, transparent 8%),
    radial-gradient(circle at 70% 50%, #794333 0 7%, transparent 8%),
    radial-gradient(circle at 28% 67%, rgba(255,158,158,.32) 0 12%, transparent 13%),
    radial-gradient(circle at 72% 67%, rgba(255,158,158,.32) 0 12%, transparent 13%),
    linear-gradient(180deg, #fff9df, #ffe8cf);
  box-shadow: -38px 28px 0 -24px #ffe8cf, 38px 28px 0 -24px #ffe8cf;
}

.head::after {
  content: "";
  position: absolute;
  left: 39px;
  top: 77px;
  width: 36px;
  height: 14px;
  border-bottom: 4px solid #c26d61;
  border-radius: 0 0 40px 40px;
}

.hair {
  position: absolute;
  left: 35px;
  top: 8px;
  z-index: 5;
  width: 168px;
  height: 212px;
  border-radius: 50% 50% 36% 36%;
  background:
    radial-gradient(ellipse at 49% 8%, transparent 0 17%, var(--player-hair) 18%),
    var(--player-hair);
  box-shadow: -30px 78px 0 -5px var(--player-hair), 30px 78px 0 -5px var(--player-hair);
}

.hair::before {
  content: "";
  position: absolute;
  left: 55px;
  top: 54px;
  width: 60px;
  height: 78px;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(90deg, transparent 0 18%, #fff8df 19% 29%, transparent 30% 45%, #fff8df 46% 57%, transparent 58% 72%, #fff8df 73% 84%, transparent 85%);
}

.hair::after {
  content: "";
  position: absolute;
  left: 38px;
  top: 30px;
  width: 84px;
  height: 38px;
  border-radius: 50%;
  border-top: 4px solid rgba(255,255,255,.26);
}

.body {
  position: absolute;
  left: 35px;
  top: 184px;
  z-index: 4;
  width: 168px;
  height: 142px;
  border: 3px solid var(--hoodie-shadow);
  border-radius: 36px 36px 24px 24px;
  background:
    linear-gradient(90deg, transparent 0 45%, var(--hoodie-shadow) 46% 48%, transparent 49% 52%, var(--hoodie-shadow) 53% 55%, transparent 56%),
    radial-gradient(ellipse at 50% 0, #ffe9df 0 22%, transparent 23%),
    linear-gradient(180deg, var(--hoodie-color), color-mix(in srgb, var(--hoodie-color) 78%, #fff));
}

.body::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 2px;
  width: 82px;
  height: 42px;
  border: 3px solid var(--hoodie-shadow);
  border-top: 0;
  border-radius: 0 0 48px 48px;
  background: color-mix(in srgb, var(--hoodie-color) 82%, #fff);
}

.body::after {
  content: "";
  position: absolute;
  left: 23px;
  right: 23px;
  bottom: 12px;
  height: 3px;
  border-radius: 999px;
  background: var(--hoodie-shadow);
}

.left-arm,
.right-arm {
  position: absolute;
  top: 206px;
  z-index: 3;
  width: 48px;
  height: 120px;
  border: 3px solid var(--hoodie-shadow);
  border-radius: 26px 26px 20px 20px;
  background: linear-gradient(180deg, var(--hoodie-color) 0 78%, #fff8df 79%);
}

.left-arm { left: 16px; transform: rotate(12deg); }
.right-arm { right: 16px; transform: rotate(-12deg); }

.left-leg,
.right-leg {
  position: absolute;
  top: 316px;
  z-index: 2;
  width: 54px;
  height: 104px;
  border: 3px solid #a66b5a;
  border-radius: 10px 10px 20px 20px;
  background: linear-gradient(180deg, var(--pants-color) 0 78%, var(--shoe-color) 79% 100%);
}

.left-leg::after,
.right-leg::after {
  content: "";
  position: absolute;
  left: -9px;
  bottom: -4px;
  width: 70px;
  height: 24px;
  border: 3px solid #a66b5a;
  border-radius: 50% 50% 16px 16px;
  background: var(--shoe-color);
}

.left-leg { left: 62px; }
.right-leg { right: 62px; }

.edit-pet,
.change-outfit {
  position: absolute;
  z-index: 7;
  width: 78px;
  height: 54px;
  border-radius: 18px;
  color: #231334;
  background: rgba(255,255,255,.72);
  border: 3px solid #8b62ff;
}

.edit-pet { left: 408px; bottom: 85px; }
.change-outfit { right: 292px; top: 125px; }

.coin-bar {
  position: absolute;
  right: 184px;
  top: 12px;
  z-index: 8;
  width: 150px;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 0 12px;
  border-radius: 12px;
  background: #17111b;
  box-shadow: 0 5px 0 rgba(0,0,0,.35);
}

.diamond {
  color: #9f77ff;
  font-size: 24px;
  text-shadow: 0 0 10px #fff;
}

.coin-bar strong {
  flex: 1;
  text-align: center;
  font-size: 17px;
}

.coin-bar button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  background: #555;
}

.right-top {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 8;
  display: flex;
  gap: 10px;
}

.right-top button {
  width: 78px;
  height: 64px;
  border-radius: 8px;
  color: #fff;
  background: #08070d;
  border: 4px solid #fff;
}

.right-actions {
  position: absolute;
  right: 16px;
  top: 166px;
  z-index: 8;
  display: grid;
  gap: 12px;
}

.right-actions button {
  width: 128px;
  height: 58px;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffaf2d, #6a3aff 45%, #08070d 46%);
  border: 3px solid rgba(255,255,255,.6);
  text-shadow: 0 2px 0 #000;
}

.right-actions .unused {
  display: none;
}

.bottom-bar {
  position: absolute;
  left: 58px;
  right: 34px;
  bottom: 20px;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 18px;
}

.bottom-bar button {
  height: 62px;
  border: 5px solid #111;
  border-radius: 12px;
  color: #170b17;
  box-shadow: 0 8px 0 rgba(0,0,0,.55);
}

.big {
  width: 166px;
  font-size: 22px;
}

.yellow,
.play {
  background: linear-gradient(135deg, #fff375, #ffb323);
}

.purple {
  width: 126px;
  background: linear-gradient(135deg, #b993ff, #5e3cff);
}

.chat {
  width: 112px;
  margin-left: 6px;
  color: #fff !important;
  border-radius: 999px !important;
  background: #050505;
}

.edit-avatar {
  width: 190px;
  margin-left: auto;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ffe871, #ffc331);
}

.play {
  width: 190px;
  height: 86px !important;
  font-size: 34px;
}

.play-scene,
.recharge-scene,
.hot-sale-scene,
.pet-scene,
.message-scene,
.gacha-scene,
.npc-scene,
.season-pass-scene {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  background: #fff0f4;
}

.play-scene.show,
.recharge-scene.show,
.hot-sale-scene.show,
.pet-scene.show,
.message-scene.show,
.gacha-scene.show,
.npc-scene.show,
.season-pass-scene.show {
  display: block;
}

.play-scene img {
  width: 100%;
  height: 100%;
  display: block;
}

.recharge-scene {
  overflow: auto;
  background: #f6bd00;
}

.recharge-scene.show {
  display: grid;
  place-items: center;
}

.recharge-scene img {
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: initial;
  background: #f6bd00;
}

.hot-sale-scene {
  overflow: auto;
  background: #ffe4ed;
}

.hot-sale-scene.show {
  display: grid;
  place-items: center;
}

.hot-sale-scene img {
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: initial;
  background: #ffe4ed;
}

.pet-scene {
  overflow: auto;
  background: #fff0f4;
}

.pet-scene.show {
  display: grid;
  place-items: center;
}

.pet-scene img {
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: initial;
  background: #fff0f4;
}

.message-scene {
  overflow: auto;
  background: #ffe7ef;
}

.message-scene.show {
  display: grid;
  place-items: center;
}

.message-scene img {
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: initial;
  background: #ffe7ef;
}

.gacha-scene {
  overflow: auto;
  background: #fbe6f4;
}

.gacha-scene.show {
  display: grid;
  place-items: center;
}

.gacha-scene img {
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: initial;
  background: #fbe6f4;
}

.npc-scene {
  overflow: auto;
  background: #f7ddea;
}

.npc-scene.show {
  display: grid;
  place-items: center;
}

.npc-scene img {
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: initial;
  background: #f7ddea;
}

.season-pass-scene {
  overflow: auto;
  background: #191b55;
}

.season-pass-scene.show {
  display: grid;
  place-items: center;
}

.season-pass-scene img {
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: initial;
  background: #191b55;
}

.back-home {
  position: absolute;
  right: 28px;
  top: 24px;
  z-index: 2;
  width: 120px;
  height: 48px;
  color: #5b2640;
  border-radius: 999px;
  border: 4px solid #fff;
  background: linear-gradient(135deg, #fff1a8, #ff9bcc);
  box-shadow: 0 7px 0 rgba(126, 73, 91, .4);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 50;
  transform: translate(-50%, 100px);
  border-radius: 999px;
  padding: 12px 20px;
  color: #fff;
  font-weight: 900;
  background: rgba(20, 13, 31, .92);
  transition: transform .22s ease;
}

.toast.show {
  transform: translate(-50%, 0);
}

@media (max-width: 900px) {
  .playground {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    border-radius: 0;
    transform-origin: center;
  }

  .top-menu {
    right: 250px;
    gap: 4px;
  }

  .top-menu button {
    min-width: 58px;
    font-size: 11px;
  }

  .friend-panel {
    transform: scale(.88);
    transform-origin: top left;
  }

  .task-card,
  .pass-card {
    transform: scale(.86);
    transform-origin: left center;
  }

  .center-stage {
    inset: 80px 230px 72px 290px;
  }

  .right-actions button {
    width: 112px;
  }

  .bottom-bar {
    gap: 8px;
  }

  .big,
  .play,
  .edit-avatar {
    width: 130px;
  }
}