/* The page playing along with the film, and the mini game. Goes with play.js. */

/* ---------- 1. the page plays along with the film ---------- */
.hero { background-position: calc(50% + var(--sway, 0px)) 20px; transition: background-position .32s cubic-bezier(.3, 0, .2, 1); }
html.first-shadow:not([data-world="outside"]) { --shade: 0 24px 40px rgba(48, 66, 60, .32); }   /* "It's mine": the Lounge's first shadow */
.capsule, .pillbtn, .card, .frame { transition: box-shadow 1s ease; }

.note--sync .note__btn { pointer-events: none; }
.note--sync .note__btn--quiet.is-pressed { background: var(--peach-light); }

/* her own words under the capsule, once the app has gone: a book serif, coming into focus, as in the film */
.hero__voice { display: none; }
.hero__line[data-voice] > .in, .hero__line[data-voice] > .out { display: none !important; }
.hero__line[data-voice] .hero__voice { display: inline; font-family: var(--voice); font-style: italic; font-weight: 500; letter-spacing: -.015em; animation: into-focus .9s ease-out both; }
@keyframes into-focus { from { filter: blur(7px); opacity: .15; } }

/* ---------- 2. the game ---------- */
html.game-on { overflow: hidden; }
html.game-on .rain { z-index: 70; }
/* the way in: a card that says what it is */
.game__teaser { grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; justify-self: start; max-width: 30rem; margin-top: .8rem; font-family: var(--app); }
.game__teaser > div { display: grid; gap: .45rem; }
.game__teaser h3 { margin: 0; font: var(--head-weight) 2rem/1 var(--display); color: var(--coral); }
.game__teaser p { font-size: 1rem; line-height: 1.4; }
.game__teaser .note__label { margin: 0; font-size: .66rem; }
.game__teaser-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: .3rem; }
.game__teaser .note__btn { font-size: 1rem; padding: .8em 1.3em; }
.game__best { font: 600 .68rem/1.3 var(--caps); letter-spacing: .18em; text-transform: uppercase; }
/* two small cards, askew: the game in miniature */
.game__pad { position: relative; width: 58px; height: 58px; border-radius: 16px; background: var(--mint); }
.game__pad i { position: absolute; left: 9px; width: 34px; height: 13px; border-radius: 5px; background: var(--white); }
.game__pad i:first-child { top: 14px; rotate: -8deg; }
.game__pad i:last-child { top: 31px; left: 15px; rotate: 6deg; background: var(--coral); }
.game {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--ground) var(--pattern) center / 176px 236px;
  color: var(--text);
  font-family: var(--copy);
  overflow: hidden;
  outline: 0;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.game[hidden] { display: none; }
.game__top { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; width: min(100%, 440px); margin-inline: auto; }
.game__score { display: flex; align-items: baseline; gap: .9em; font: 600 .75rem/1 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--label); background: var(--ground); padding: .6em 1em .6em 1.1em; border-radius: 99px; }
.game__score b { font: var(--head-weight) 1.7rem/1 var(--head); letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.game__stack { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; width: min(100%, 440px); margin-inline: auto; font-family: var(--app); }
.feeling { grid-template-columns: auto minmax(0, 1fr) auto; position: relative; overflow: hidden; padding-bottom: 17px; cursor: pointer; }
.feeling .note__btn { pointer-events: none; }
.feeling__life { position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; background: var(--coral); transform-origin: left; animation: life var(--life) linear forwards; }
@keyframes life { to { transform: scaleX(0); } }
.feeling.is-swiped { animation: swiped .24s ease-in forwards; pointer-events: none; }
@keyframes swiped { to { transform: translateX(110%) rotate(4deg); opacity: 0; } }
.feeling.is-mine { cursor: default; padding-bottom: 12px; }
.feeling.is-mine .note__btn, .feeling.is-mine .feeling__life { display: none; }
.game__panel { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; justify-items: center; gap: 1.1rem; padding: 24px; text-align: center; pointer-events: none; }
.game__panel > * { pointer-events: auto; }
.game__panel[hidden] { display: none; }
.game__panel h2 { font-size: clamp(3rem, 12vw, 6.5rem); }
.game__panel p { max-width: 24rem; font-size: 1.2rem; }
.game__panel .game__hint { font: 600 .7rem/1.3 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--label); }
.game__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.game__copy { font: 700 1rem/1.3 var(--copy); text-decoration: underline; text-underline-offset: 4px; max-width: 24rem; }
.game__flash { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; padding: 16px; text-align: center; font: var(--head-weight) clamp(3rem, 13vw, 9rem)/.95 var(--head); color: var(--title); opacity: 0; pointer-events: none; }
.game__flash.is-on { animation: flash .55s ease-out; }
@keyframes flash { from { opacity: .6; transform: scale(.96); } to { opacity: 0; transform: scale(1.03); } }
@media (max-width: 760px) { .game { background-size: 132px 177px; } }
@media (prefers-reduced-motion: reduce) { .feeling__life { animation: life var(--life) linear forwards !important; } }   /* the bar is the timer, so it still runs */

/* Native modal semantics supply focus containment, Escape and background isolation. */
.game { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; }
.game__panel { overflow-y: auto; align-content: safe center; padding-top: 88px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.feeling { flex-shrink: 0; text-align: left; }
.feeling:disabled { color: var(--ink); opacity: 1; }
.game__copy { overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.game :focus-visible { outline-color: var(--text); }
.game .feeling:focus-visible { outline-color: var(--ink); outline-offset: -4px; }
@media (max-width: 380px) {
  .game__pad { width: 40px; }
  .feeling { gap: 8px; padding-inline: 10px; }
  .feeling .note__icon { width: 26px; height: 30px; }
  .feeling .note__btn { padding-inline: .65em; }
}

.feeling .note__label, .feeling .note__text { display: block; }