/*
 * CareHub Plus — Layout (app shell, phone-format device, HUD, controls)
 *
 * Places the phone-format #device (mobile first, 390x844 reference), the
 * layer stack inside it (stage, HUD, intro, dialog layer, controls, cover),
 * the safe-area insets, the progress dots and the desktop brand wash that
 * frames a centred device from 768 px up. Values come from tokens.css only.
 *
 * Author: Vitoria Lana
 * Created on: 21/10/2026
 * Version: 1.0.0
 * Squad: CareHub Plus
 */

/* ---------- App shell ---------- */
#app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

.wash {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 200%;
  background: var(--gradient-brand);
  pointer-events: none;
}

#device {
  position: relative;
  width: min(100vw, var(--device-max));
  height: 100vh;
  height: 100dvh;
  margin-inline: auto;
  overflow: hidden;
  background: var(--bg);
}

/* ---------- Layer stack ---------- */
#stage {
  position: absolute;
  inset: 0;
  z-index: var(--z-scene);
  isolation: isolate;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 40% at 20% 8%, var(--light-key), transparent),
    radial-gradient(50% 45% at 88% 30%, var(--light-rim), transparent),
    var(--gradient-brand);
}

/* The play band between the HUD and the controls (design §19) */
#camera {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--hud-h) + env(safe-area-inset-top, 0px));
  bottom: calc(var(--controls-h) + env(safe-area-inset-bottom, 0px));
}

.grade {
  position: absolute;
  inset: 0;
  z-index: var(--z-grade);
  pointer-events: none;
  opacity: 0;
}

#scene2d {
  position: absolute;
  inset: 0;
  z-index: var(--z-scene2d);
  pointer-events: none;
}

#hud {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: var(--z-hud);
  height: calc(var(--hud-h) + env(safe-area-inset-top, 0px));
  padding-top: max(var(--space-16), env(safe-area-inset-top, 0px));
  padding-left: calc(var(--space-16) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--space-16) + env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  opacity: 0;
  visibility: hidden;
}

/* White pills keep the small logo and the dots legible over the lilac
   backdrop and over a busy scene (the HUD band itself stays transparent). */
.hud-logo {
  box-sizing: content-box;
  height: var(--size-hud-logo-h);
  width: auto;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-full);
  background: var(--bg);
  box-shadow: var(--shadow-card);
}

.hud .dots,
#hud .dots {
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-full);
  background: var(--bg);
  box-shadow: var(--shadow-card);
}

#intro {
  position: absolute;
  inset: 0;
  z-index: var(--z-intro);
  /* Same layered backdrop as the next screen (.backdrop): two soft light
     pools over the brand gradient. */
  background:
    radial-gradient(60% 40% at 20% 8%, var(--light-key), transparent),
    radial-gradient(50% 45% at 88% 30%, var(--light-rim), transparent),
    var(--gradient-brand);
  overflow-y: auto;
}

#layer {
  position: absolute;
  inset: 0;
  z-index: var(--z-layer);
  pointer-events: none;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

#layer > * {
  pointer-events: auto;
}

#controls {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  z-index: var(--z-controls);
  height: calc(var(--controls-h) + env(safe-area-inset-bottom, 0px));
  padding-top: var(--space-16);
  padding-bottom: calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
  padding-left: calc(var(--space-16) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--space-16) + env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  gap: var(--space-12);
  opacity: 0;
  visibility: hidden;
}

#roll-btn {
  flex: 1 1 auto;
  /* Match the dice height so the button and the dice dock line up. */
  height: var(--dice-size);
  min-height: var(--dice-size);
}

#cover {
  position: absolute;
  inset: 0;
  z-index: var(--z-cover);
  background: var(--gradient-brand);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

#fatal {
  position: absolute;
  inset: 0;
  z-index: var(--z-fatal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
  padding: var(--space-32);
  background: var(--surface);
  text-align: center;
}

#fatal img {
  width: var(--size-logo-hero);
  height: auto;
}

/* ---------- Progress dots (HUD) ---------- */
.dots {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.dot {
  position: relative;
  width: var(--size-dot);
  height: var(--size-dot);
  border-radius: var(--radius-full);
  background: var(--border-strong);
}

.dot-fill {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  opacity: 0;
  transform: scale(0);
}

.band-1 .dot-fill { background: var(--progress-1); }
.band-2 .dot-fill { background: var(--progress-2); }
.band-3 .dot-fill { background: var(--progress-3); }
.band-4 .dot-fill { background: var(--progress-4); }

/* ---------- Desktop: centred phone-format stage inside the brand wash ---------- */
@media (min-width: 768px) {
  #app {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
  }

  .wash {
    display: block;
  }

  #device {
    height: min(100vh - var(--device-gap), var(--device-max-h));
    height: min(100dvh - var(--device-gap), var(--device-max-h));
    margin-inline: 0;
    border-radius: var(--radius-24);
    box-shadow: var(--shadow-overlay), var(--shadow-device);
  }
}