/*
 * LiveArea screen-only visual layer, modelled on the PS Vita shell.
 * Geometry is deliberately absent: app.js owns the 960x544 viewport,
 * 840x500 sheet, 280x158 gate and style-specific frame coordinates.
 * CSS here is never included in an exported PNG, template.xml or VPK.
 * 1cqw = 9.6 reference pixels.
 */

/* Shell backdrop: the margins either side of the LiveArea sheet. */
.screen {
  --shell: #3a4048;
  border-radius: 2px;
  background: linear-gradient(180deg, #4a5059 0%, var(--shell) 55%, #2c3138 100%);
}

/* Info bar: solid black like the Vita, 44px on the 544px reference screen. */
.screen .status-bar {
  z-index: 7;
  height: 8.09%;
  padding-inline: 1.6%;
  background: linear-gradient(180deg, #000 0%, #050505 90%, #1a1a1a 100%);
  color: #fff;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 1.95cqw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
}
.screen .status-bar > span { display: inline-flex; align-items: center; gap: .9cqw; }
.screen .status-bar i { display: block; flex: none; }
.screen .status-bar .sb-net { font-size: 0; }
.screen .sb-signal {
  width: 2.1cqw; height: 1.7cqw;
  background:
    linear-gradient(#fff, #fff) 0 100% / 18% 30% no-repeat,
    linear-gradient(#fff, #fff) 27% 100% / 18% 52% no-repeat,
    linear-gradient(#fff, #fff) 54% 100% / 18% 76% no-repeat,
    linear-gradient(#fff, #fff) 82% 100% / 18% 100% no-repeat;
  opacity: .95;
}
.screen .sb-wifi {
  width: 2.2cqw; height: 1.65cqw;
  background:
    radial-gradient(circle at 50% 100%, #fff 0 13%, transparent 14% 30%, #fff 31% 45%, transparent 46% 62%, #fff 63% 77%, transparent 78%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.screen .status-bar .sb-apps { gap: .7cqw; }
.screen .sb-home {
  width: 1.95cqw; height: 1.85cqw;
  background: #fff;
  clip-path: polygon(50% 0, 100% 46%, 86% 46%, 86% 100%, 60% 100%, 60% 66%, 40% 66%, 40% 100%, 14% 100%, 14% 46%, 0 46%);
}
.screen .sb-app {
  width: 2.3cqw; height: 2.3cqw;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #d8ecff, #4a8fe0 55%, #1d4f99);
  box-shadow: 0 0 0 .1cqw #ffffffb0;
}
.screen .sb-app img { width: 100%; height: 100%; object-fit: cover; display: block; }
.screen .status-bar .battery {
  position: relative;
  width: 3.1cqw;
  height: 1.45cqw;
  border: .14cqw solid #f2f2f2;
  border-radius: .25cqw;
  background: linear-gradient(90deg, #7fe04a 0%, #4cc22a 78%, #000 79%);
  background-clip: padding-box;
  box-shadow: inset 0 0 0 .1cqw #000;
}
.screen .status-bar .battery::after {
  content: "";
  position: absolute;
  top: 25%;
  right: -.42cqw;
  height: 50%;
  width: .24cqw;
  border-radius: 0 .2cqw .2cqw 0;
  background: #f2f2f2;
}

/* The LiveArea sheet is exactly 840x500 (positioned in app.css). */
.screen .livearea-card {
  border-radius: 0;
  background: linear-gradient(180deg, #e9ebee 0%, #d5d9de 100%);
  box-shadow: 0 0 1.2cqw #0006;
}
/* Empty-state prompt is an editing aid only; the clean preview shows the bare page. */
.screen .livearea-card .empty-screen { color: #5b626c; }
.screen .livearea-card .empty-screen strong { font-weight: 500; }
.screen:not(.guided) .livearea-card .empty-screen { display: none; }

/* Back arrow in the left margin: tap to return to the Home screen. */
.screen .la-back {
  position: absolute;
  z-index: 3;
  left: 2.1%;
  top: 50%;
  width: 2.1cqw;
  height: 3cqw;
  transform: translateY(-50%);
  background: #fff;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  filter: drop-shadow(0 .1cqw .2cqw #0008);
  opacity: .92;
  pointer-events: none;
}

/* Peel: the curled page corner the Vita uses to close an app. */
.screen .la-peel {
  position: absolute;
  z-index: 6;
  top: 8.09%;
  right: 6.25%;
  width: 5.2cqw;
  height: 5.2cqw;
  pointer-events: none;
  background:
    linear-gradient(225deg, transparent 49.5%, #0004 50%, transparent 56%),
    linear-gradient(225deg, transparent 50%, #f8fafc 50.5%, #d9dee6 72%, #aeb6c2 100%);
  filter: drop-shadow(-.25cqw .3cqw .35cqw #0007);
}
.screen .la-peel::after {
  /* The corner the page was peeled from shows the shell behind it. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(225deg, var(--shell) 50%, transparent 50.5%);
}

/* Start gate: white-framed card with the blue Start button. */
.screen .gate-region {
  /* Ring drawn outside the box so the 280x158 artwork is never squeezed. */
  border: 0;
  border-radius: .5cqw;
  box-shadow: 0 0 0 .32cqw #f4f6fa, 0 .35cqw 1.1cqw .3cqw #000a;
}
.screen .gate-region:not(:has(img)) {
  background:
    linear-gradient(180deg, #8a9099 0%, #5f656e 100%);
}
.screen .gate-region:has(img) { background: transparent; }
.screen .start-chip,
.screen .gate-start {
  border: .12cqw solid #ffffffcc;
  border-radius: .45cqw;
  background: linear-gradient(180deg, #3b9be6 0%, #1f7fd6 100%);
  color: #fff;
  font: 600 clamp(8px, 1.8cqw, 16px)/1 "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 .1cqw .3cqw #0007;
  pointer-events: none;
}
.screen .gate-start {
  position: absolute; z-index: 1; left: 28.57%; bottom: 5.06%; width: 42.86%; height: 20.25%;
  display: grid; place-items: center;
}

/* Home screen: the app's bubble on the Vita wallpaper. */
.screen .bubble-backdrop {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 110% 55% at 50% 118%, #5d8fc4 0%, transparent 70%),
    linear-gradient(180deg, #18324f 0%, #23476f 60%, #3a6896 100%);
}
.screen .bubble-backdrop::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  background:
    radial-gradient(ellipse 110% 70% at 40% 120%, transparent 68%, #ffffff26 68.6%, transparent 70%);
}
.screen .bubble-stack {
  z-index: 1;
  gap: 1.2cqw;
  font-weight: 600;
  font-size: 1.9cqw;
  letter-spacing: -.01em;
  text-shadow: 0 .1cqw .3cqw #0009;
}
.screen .bubble-icon {
  width: 13.3333cqw;
  height: 13.3333cqw;
  border-radius: 50%;
  border: .16cqw solid #ffffffd9;
  background:
    radial-gradient(circle at 34% 15%, #e9f4ff 0 8%, #9ccdf5 18%, #3f8fdc 48%, #1d5aa8 79%, #0b2f66 100%);
  box-shadow:
    0 1.25cqw 2.2cqw -.3cqw #0a2a5aa8,
    inset 0 0 0 .1cqw #ffffffc0,
    inset 0 -.9cqw 1.05cqw #0b2a5a80;
}
.screen .bubble-icon::before {
  z-index: 2;
  top: 3%;
  left: 10%;
  width: 80%;
  height: 49%;
  transform: rotate(-4deg);
  border-radius: 50% 50% 42% 42% / 67% 67% 45% 45%;
  background:
    radial-gradient(ellipse at 34% 8%, #ffffffdf 0 8%, transparent 24%),
    linear-gradient(180deg, #ffffffb0, #ffffff55 41%, #ffffff0c 84%, transparent);
}
.screen .bubble-icon::after {
  z-index: 3;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 116%, #0b2a5a70, transparent 58%),
    radial-gradient(circle at 18% 47%, #ffffff22, transparent 28%);
  box-shadow: inset 0 .12cqw .2cqw #fff9, inset 0 -.46cqw .68cqw #0b2a5a80;
}
.screen .bubble-icon img { border-radius: inherit; }

/* Selection artifacts are editor-only. Hide guides to see the clean result. */
#screen.guided .frame-guide {
  border: .1cqw dashed #ffffffb0;
  box-shadow: inset 0 0 0 .1cqw #00000033;
  border-radius: .2cqw;
  background: #00000024;
}
#screen.guided .frame-guide span {
  min-width: 1.75cqw;
  min-height: 1.75cqw;
  border: .07cqw solid #ffffffa0;
  border-radius: .3cqw;
  background: #101828e8;
  color: #fff;
  font-size: 1.15cqw;
  font-weight: 750;
}
#screen.guided .frame-guide[aria-pressed=true] {
  background: #ffffff14;
  border-color: #fff;
  border-style: solid;
}
#screen.guided .frame-guide[aria-pressed=true] span {
  background: #fff;
  border-color: #fff;
  color: #111;
}
@media (forced-colors: active) {
  .screen { background: Canvas; }
  .screen .status-bar { color: CanvasText; background: Canvas; border-bottom: 1px solid CanvasText; }
  .screen .status-bar i, .screen .la-peel, .screen .la-back { display: none; }
  .screen .livearea-card, .screen .bubble-backdrop { background: Canvas; }
  .screen .bubble-icon, .screen .gate-region:not(:has(img)) { background: ButtonFace; box-shadow: none; }
  #screen.guided .frame-guide { border-color: Highlight; }
}

/* Editing hints stay out of the way until you point at the item. */
#screen .gate-drag-hint, #screen .frame-drag-hint { opacity: 0; transition: opacity .15s; }
#screen .gate-region:hover .gate-drag-hint, #screen .gate-region:focus-visible .gate-drag-hint,
#screen .frame-art:hover .frame-drag-hint { opacity: 1; }
@media (hover: none) { #screen .gate-drag-hint, #screen .frame-drag-hint { opacity: 1; } }