/* ===========================================================
   See The Good — "The Glasses" interactive game page
   Layers on top of styles.css (shared chrome: bg, menu, fonts)
   =========================================================== */

:root {
  --glasses-size: clamp(280px, 46vw, 500px);  /* draggable glasses width */
  --case-w:       clamp(240px, 42vw, 380px);
}

.game-body {
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---- Layout ---- */
.game-main {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(84px, 12vh, 130px) 5vw 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-intro {
  text-align: center;
  margin-bottom: clamp(18px, 4vh, 36px);
}
.game-title {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(44px, 9vw, 86px);
  color: var(--yellow);
  line-height: 1;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 0 rgba(0,0,0,0.25), 0 10px 30px rgba(0,0,0,0.35);
}
.game-sub {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(15px, 2.4vw, 20px);
  color: rgba(255,255,255,0.92);
  margin-top: 12px;
  transition: opacity .3s ease;
}

/* ---- Stage: holds collage, good-layer, case + glasses ---- */
.stage {
  position: relative;
  width: 100%;
  max-width: 860px;
  /* Room for the collage on top and the case at the bottom. */
  padding-bottom: clamp(150px, 24vw, 230px);
  touch-action: none;            /* we handle dragging ourselves */
  user-select: none;
}

/* Collage of scenes (the everyday view) */
.collage {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  width: 100%;
}
.scene {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 18px 44px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.12);
}
.scene-base {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- The "good" layer (good image + explanation) ----
   Always present but masked to the lens shapes, so it's only visible
   *through the glasses*. The mask follows the glasses (JS sets
   --lens-x/--lens-y) and scales with the glasses size. */
.good-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  --lens-x: -9999px;
  --lens-y: -9999px;
  -webkit-mask-image: url('assets/images/Game/lens-mask.png');
          mask-image: url('assets/images/Game/lens-mask.png');
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-size: var(--glasses-size) var(--glasses-size);
          mask-size: var(--glasses-size) var(--glasses-size);
  -webkit-mask-position: var(--lens-x) var(--lens-y);
          mask-position: var(--lens-x) var(--lens-y);
}

/* The "good" image — exactly overlays the base scene. */
.good-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Explanation — lives on the good layer, so it too is only seen
   through the lenses as you move the glasses over it. */
.scene-explain {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px clamp(14px, 3vw, 32px) clamp(10px, 1.8vw, 16px);
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(14px, 2vw, 20px);
  line-height: 1.35;
  color: #fffdf5;
  background: linear-gradient(180deg, rgba(0,18,40,0) 0%, rgba(0,18,40,0.85) 60%, rgba(0,18,40,0.95) 100%);
}
.scene-explain strong { color: var(--yellow); font-weight: 800; }

/* ---- Glasses case ---- */
.case {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 3;
  width: var(--case-w);
  height: calc(var(--case-w) * 0.34);
}
.case-base {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  border-radius: 0 0 18px 18px / 0 0 26px 26px;
  background: linear-gradient(180deg, #16224d 0%, #0a1330 100%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.12), 0 16px 30px rgba(0,0,0,0.45);
  border: 2px solid rgba(253,205,27,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-logo {
  height: 52%;            /* small, with substantial room around it */
  width: auto;
  max-height: 46px;
  opacity: 0.92;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  pointer-events: none;
}
.case-lid {
  position: absolute;
  inset: 0 0 38% 0;
  border: 2px solid rgba(253,205,27,0.55);
  border-bottom: none;
  border-radius: 18px 18px 0 0 / 26px 26px 0 0;
  background: linear-gradient(180deg, #233072 0%, #16224d 100%);
  color: var(--yellow);
  cursor: pointer;
  transform-origin: top center;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.case-label {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(12px, 2.2vw, 15px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: case-pulse 1.8s ease-in-out infinite;
}
@keyframes case-pulse { 0%,100%{opacity:.6} 50%{opacity:1} }

.case[data-open="true"] .case-lid {
  transform: rotateX(-118deg);
  opacity: 0;                 /* fade as it swings open (hides mirrored label) */
  pointer-events: none;
}
.case[data-open="true"] .case-label { opacity: 0; transition: opacity .15s ease; }

/* Highlight the case as a drop target while dragging the glasses over it */
.case.drop-ready .case-base {
  border-color: var(--yellow);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.12),
              0 0 0 3px rgba(253,205,27,0.45), 0 16px 30px rgba(0,0,0,0.45);
}

/* ---- Glasses (draggable) ----
   Positioned by their CENTRE (left/top = centre point + translate(-50%,-50%))
   so resizing always grows/shrinks symmetrically about the middle. JS sets
   left/top; the lens mask is offset to match. */
.glasses {
  position: absolute;
  z-index: 4;
  width: var(--glasses-size);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.5));
  /* Hidden inside the closed case until it's opened */
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.glasses img { display: block; width: 100%; height: auto; }

/* Once the case is open, the glasses are visible and grabbable */
.case-open .glasses { opacity: 1; pointer-events: auto; }
.glasses.dragging { cursor: grabbing; }

/* ---- "Move the glasses" hint ---- */
.glasses-hint {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -100%);
  max-width: 200px;
  padding: 8px 13px;
  border-radius: 12px;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(12px, 1.9vw, 14px);
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.glasses-hint::after {              /* arrow pointing down at the glasses */
  content: '';
  position: absolute;
  left: 50%; bottom: -8px;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-bottom: 0;
  border-top-color: var(--yellow);
}
.glasses-hint.show { opacity: 1; animation: hint-bounce 1.4s ease-in-out infinite; }
@keyframes hint-bounce {
  0%,100% { transform: translate(-50%, -100%); }
  50%     { transform: translate(-50%, calc(-100% - 6px)); }
}

/* ---- Glasses-size slider ---- */
.controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(18px, 3vh, 30px);
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.14);
}
.controls label {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
}
.controls input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: clamp(140px, 34vw, 280px);
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  outline: none;
  cursor: pointer;
}
.controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--yellow);
  border: 2.5px solid rgba(0,0,0,0.7);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.controls input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--yellow);
  border: 2.5px solid rgba(0,0,0,0.7);
}

/* ---- Home button ---- */
.game-home-btn {
  position: fixed;
  left: 5vw;
  top: 14px;
  z-index: 102;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  border: 2.5px solid rgba(0,0,0,0.75);
  box-shadow: 0 0 0 3px rgba(253,205,27,0.3), 0 6px 20px rgba(0,0,0,0.3);
  transition: transform .15s, box-shadow .2s;
}
.game-home-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(253,205,27,0.5), 0 10px 28px rgba(0,0,0,0.35);
}