/* ===== Trang trí PC thuần hình ảnh: nền, quầng sáng, góc HUD (tách khỏi pc.css cho dưới 500 dòng) ===== */
/* Lớp trang trí nền: lưới chấm mờ dần vào giữa + đốm lấp lánh */
.pc > .pc-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.pc-deco::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(30, 120, 220, 0.22) 1.2px, transparent 1.7px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 55% 65% at 50% 45%, transparent 45%, #000 95%);
  mask-image: radial-gradient(ellipse 55% 65% at 50% 45%, transparent 45%, #000 95%);
}
/* Ngôi sao 4 cánh: hai elip mảnh bắt chéo + lõi sáng */
.pc-sparkle {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--size);
  aspect-ratio: 1;
  --arm: radial-gradient(closest-side, #fff 15%, rgba(60, 165, 250, 0.85) 45%, transparent);
  background:
    var(--arm) center / 100% 14% no-repeat,
    var(--arm) center / 14% 100% no-repeat,
    radial-gradient(closest-side, #fff 20%, rgba(80, 190, 255, 0.6) 50%, transparent) center / 60% 60%
      no-repeat;
}

/* Quầng sáng trắng sau logo */
.pc-logo::before {
  content: "";
  position: absolute;
  inset: -45% -30%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* Quầng sáng sau điện thoại (xanh) và sau khung tải (trắng) */
.pc-body::before,
.pc-body::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: -1;
  border-radius: 50%;
  translate: 0 -50%;
  pointer-events: none;
}
.pc-body::before {
  left: -4%;
  width: 48%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(100, 205, 255, 0.5), transparent);
}
.pc-body::after {
  right: -6%;
  width: 58%;
  aspect-ratio: 1.2;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.7), transparent);
}

/* Pseudo z-index -1 nằm dưới nội dung nhờ isolation của khung */
.pc-panel::before,
.pc-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
/* 4 góc kiểu HUD */
.pc-panel::before {
  --corner: #2bb8f3;
  --len: 22px;
  --thick: 3px;
  inset: 10px;
  background:
    linear-gradient(var(--corner) 0 0) top left / var(--len) var(--thick),
    linear-gradient(var(--corner) 0 0) top left / var(--thick) var(--len),
    linear-gradient(var(--corner) 0 0) top right / var(--len) var(--thick),
    linear-gradient(var(--corner) 0 0) top right / var(--thick) var(--len),
    linear-gradient(var(--corner) 0 0) bottom left / var(--len) var(--thick),
    linear-gradient(var(--corner) 0 0) bottom left / var(--thick) var(--len),
    linear-gradient(var(--corner) 0 0) bottom right / var(--len) var(--thick),
    linear-gradient(var(--corner) 0 0) bottom right / var(--thick) var(--len);
  background-repeat: no-repeat;
}
/* Vệt bóng kính chéo góc trên trái */
.pc-panel::after {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 38%);
}
