/* Midnight Field Kit: places, deal fan, play overlay, tab bar, toast.
   Everything is cut with scissors: straight, slightly wrong edges instead of rounded corners.
   The second ink layer is always shifted 2px, like a print run that drifted. */

:root {
  --card-w: min(72vw, 300px, calc((100dvh - 330px) * 0.72));
  --hard-shadow: rgba(8, 6, 32, 0.55);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .11 0 0 0 0 .3 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

html[data-theme="day"] {
  --hard-shadow: rgba(31, 27, 77, 0.32);
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- Places ---------- */

.places {
  display: flex;
  flex-direction: column;
}

.places-hero {
  flex: 1 0 auto;
  display: flex;
  align-items: flex-end;
  padding: 20px 22px 18px;
  max-width: 11ch;
  box-sizing: content-box;
  font-size: clamp(2.5rem, 13.5vw, 4.2rem);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-shadow: 2px 2px 0 var(--tomato);
  transform: rotate(-1.5deg);
  transform-origin: left bottom;
}

.places-grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(max(var(--tap-big), 104px), auto);
  gap: 13px 14px;
  padding: 0 16px 18px;
}

.place-btn {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--tap-big);
  padding: 9px 8px 11px;
  color: var(--card-ink);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.1;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 90ms ease-out;
  user-select: none;
  -webkit-user-select: none;
}

.place-btn::before,
.place-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--cut);
}

.place-btn::before {
  z-index: -2;
  background: var(--suit);
  transform: translate(5px, 6px);
}

.place-btn::after {
  z-index: -1;
  background: var(--grain), var(--card-paper);
}

.place-btn:active {
  transform: rotate(var(--tilt, 0deg)) translate(3px, 4px);
}

.place-btn:nth-child(1) { --tilt: -1.4deg; --cut: polygon(2% 5%, 97% 0, 100% 90%, 91% 99%, 4% 100%, 0 22%); }
.place-btn:nth-child(2) { --tilt: 1.1deg; --cut: polygon(0 8%, 12% 0, 99% 4%, 97% 97%, 3% 100%, 1% 60%); }
.place-btn:nth-child(3) { --tilt: 0.8deg; --cut: polygon(3% 0, 98% 6%, 100% 76%, 95% 100%, 0 96%); }
.place-btn:nth-child(4) { --tilt: -1.8deg; --cut: polygon(0 3%, 90% 0, 100% 14%, 98% 100%, 5% 97%); }
.place-btn:nth-child(5) { --tilt: -0.7deg; --cut: polygon(4% 0, 100% 3%, 97% 94%, 86% 100%, 0 98%, 2% 30%); }
.place-btn:nth-child(6) { --tilt: 1.7deg; --cut: polygon(0 0, 96% 5%, 100% 98%, 8% 100%, 0 84%); }
.place-btn:nth-child(7) { --tilt: 1deg; --cut: polygon(6% 3%, 100% 0, 98% 100%, 2% 96%, 0 18%); }
.place-btn:nth-child(8) { --tilt: -1.2deg; --cut: polygon(0 6%, 97% 0, 100% 80%, 94% 97%, 3% 100%); }

.place-glyph {
  width: 50px;
  height: 50px;
}

.place-glyph svg {
  width: 100%;
  height: 100%;
}

.place-note {
  font-family: var(--font-card);
  font-weight: 400;
  font-size: 0.76rem;
}

/* ---------- Deal ---------- */

.deal {
  display: flex;
  flex-direction: column;
}

.deal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 2px;
}

.deal-back {
  order: 3;
  margin-left: auto;
  padding: 0 4px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.deal-glyph {
  flex: none;
  width: 34px;
  height: 34px;
}

.deal-glyph svg {
  width: 100%;
  height: 100%;
}

.deal-title {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.05;
  text-shadow: 2px 2px 0 var(--suit);
}

.deal-note {
  padding: 0 16px;
  font-family: var(--font-card);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.deal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 6px 14px 0;
}

.chip-group {
  display: flex;
  gap: 6px;
}

.chip {
  padding: 0 11px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--surface);
  clip-path: polygon(2% 6%, 98% 0, 100% 92%, 1% 100%);
}

.chip[aria-pressed="true"] {
  color: var(--card-ink);
  background: var(--marigold);
}

.fan {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 26px calc(50% - var(--card-w) / 2) 34px;
  -webkit-overflow-scrolling: touch;
}

.fan::-webkit-scrollbar {
  display: none;
}

.fan-slot {
  position: relative;
  flex: none;
  display: block;
  width: var(--card-w);
  margin-inline: calc(var(--card-w) * -0.025);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  color: var(--card-ink);
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
  animation: deal-in 240ms cubic-bezier(0.2, 0.9, 0.3, 1.15) backwards;
  animation-delay: var(--deal-delay, 0ms);
}

.fan-slot:focus-visible {
  outline-offset: 8px;
}

@keyframes deal-in {
  from {
    transform: translate(-30px, 70px) rotate(-16deg);
    opacity: 0;
  }
}

.fan-tilt {
  display: block;
  transform-origin: 50% 110%;
  filter: drop-shadow(3px 4px 0 var(--hard-shadow));
  will-change: transform;
}

.qcard {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 5 / 7;
  padding: calc(var(--card-w) * 0.2) calc(var(--card-w) * 0.09);
  color: var(--card-ink);
  background: var(--grain), var(--card-paper);
  border-radius: var(--radius-card);
  clip-path: polygon(0.8% 1.2%, 98.6% 0, 100% 2.2%, 99.2% 98.4%, 97.4% 100%, 1.6% 99.2%, 0 97%);
  overflow: hidden;
}

.qcard-corner {
  position: absolute;
  top: calc(var(--card-w) * 0.035);
  left: calc(var(--card-w) * 0.04);
  width: calc(var(--card-w) * 0.15);
  height: calc(var(--card-w) * 0.15);
}

.qcard-corner svg {
  width: 100%;
  height: 100%;
}

.qcard-corner--flip {
  top: auto;
  left: auto;
  right: calc(var(--card-w) * 0.04);
  bottom: calc(var(--card-w) * 0.035);
  transform: rotate(180deg);
}

.qcard-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4em;
  font-size: calc(var(--card-w) * 0.07);
}

.qcard-title {
  font-family: var(--font-display);
  font-size: 1.42em;
  font-weight: 900;
  line-height: 1.04;
  text-shadow: 2px 2px 0 color-mix(in srgb, var(--suit) 62%, transparent);
}

.qcard-preface {
  font-family: var(--font-card);
  font-weight: 700;
}

.qcard-text {
  font-family: var(--font-card);
  line-height: 1.32;
}

.deal-empty {
  flex: 1 1 auto;
  padding: 30px 24px;
  font-family: var(--font-card);
  font-size: 1.05rem;
  line-height: 1.4;
}

.deal-again {
  flex: none;
  position: relative;
  isolation: isolate;
  align-self: center;
  width: min(78vw, 320px);
  min-height: 60px;
  margin-bottom: 12px;
  color: var(--card-ink);
  font-size: 1.28rem;
  font-weight: 900;
  transition: transform 90ms ease-out;
}

.deal-again::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--marigold);
  clip-path: polygon(1% 10%, 99% 0, 100% 86%, 3% 100%);
}

.deal-again:active {
  transform: translate(2px, 3px);
}

/* ---------- Play overlay ---------- */

.play {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding:
    calc(var(--safe-top) + 6px)
    calc(var(--safe-right) + 16px)
    calc(var(--safe-bottom) + 16px)
    calc(var(--safe-left) + 16px);
  background: var(--bg);
  color: var(--ink);
  --card-w: min(86vw, 420px, calc((100dvh - 270px) * 0.72));
  /* A small hand pressing this card must not select its words or zoom the page. */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Laid over the app for a moment after a card closes. See shieldTaps. */
.tap-shield {
  position: fixed;
  inset: 0;
  z-index: 50;
  touch-action: manipulation;
}

.play-side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.play-btn {
  padding: 0 14px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
}

.play-close {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.play-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}

.play-stage .qcard {
  width: var(--card-w);
  filter: none;
  transform: rotate(-0.8deg);
}

.play-stage .qcard-body {
  font-size: calc(var(--card-w) * 0.074);
}

.play-message {
  flex: none;
  text-align: center;
  font-family: var(--font-card);
  font-size: 1rem;
}

.play-controls {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 128px;
}

.play-stop,
.play-again {
  position: relative;
  isolation: isolate;
  min-height: 60px;
  min-width: 112px;
}

.play-stop::before,
.play-again::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--surface);
  clip-path: polygon(2% 7%, 98% 0, 100% 90%, 0 100%);
}

/* The one loud thing on the screen: a slab for a small fist. */
.stamp-btn {
  position: relative;
  isolation: isolate;
  flex: none;
  margin-left: auto;
  width: 128px;
  height: 128px;
  padding: 18px;
  color: var(--card-paper);
  font-size: 1.22rem;
  font-weight: 900;
  line-height: 1.02;
  transition: transform 80ms ease-out;
}

.stamp-btn::before,
.stamp-btn::after {
  content: "";
  position: absolute;
  clip-path: polygon(30% 1%, 70% 0, 92% 13%, 100% 34%, 99% 68%, 87% 90%, 66% 100%, 31% 99%, 11% 88%, 0 66%, 1% 31%, 12% 11%);
}

.stamp-btn::before {
  inset: 0;
  z-index: -2;
  background: var(--tomato);
}

.stamp-btn::after {
  inset: 7px;
  z-index: -1;
  background: color-mix(in srgb, var(--card-ink) 18%, var(--tomato));
}

.stamp-btn:active {
  transform: scale(0.9) rotate(-3deg);
}

.stamp-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(62%, 240px);
  aspect-ratio: 1;
  margin: 0;
  transform: translate(-50%, -50%) rotate(-9deg);
  animation: thunk 340ms cubic-bezier(0.25, 0.7, 0.3, 1) both;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.stamp-mark svg {
  width: 100%;
  height: 100%;
}

@keyframes thunk {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.3) rotate(10deg);
  }
  48% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.9) rotate(-13deg);
  }
  68% {
    transform: translate(-50%, -50%) scale(1.05) rotate(-6deg);
  }
  84% {
    transform: translate(-50%, -50%) scale(0.98) rotate(-10deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-9deg);
  }
}

.play-stage.is-thunked .qcard {
  animation: card-bump 220ms ease-out 150ms;
}

@keyframes card-bump {
  35% { transform: rotate(-0.8deg) translateY(5px) scale(0.985); }
}

/* Car: a dark, quiet screen in either theme. Words only, and big enough to ignore. */
.play--car {
  --ink: #FFF6E3;
  background: #16143A;
  color: #FFF6E3;
}

.play--car .play-message {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(3rem, 16vw, 5.4rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-align: left;
  text-shadow: 2px 2px 0 var(--sky);
}

.play--car .play-stage:has(.qcard[hidden]):not(:has(.stamp-mark)) {
  display: none;
}

.play--car .play-stop,
.play--car .play-again {
  width: 100%;
  min-height: 112px;
  color: #FFF6E3;
  font-size: 2.2rem;
  font-weight: 900;
}

.play--car .play-stop::before {
  background: var(--tomato);
}

.play--car .play-controls {
  flex-direction: column;
  align-items: stretch;
  min-height: 112px;
  margin-top: auto;
}

.play--car .play-side {
  align-items: stretch;
}

.play--car .play-close {
  order: -1; /* so Play again lands exactly where Stop was */
  align-self: center;
}

.play--car .stamp-btn {
  order: -1;
  margin-inline: auto;
}

.play--car .stamp-mark {
  mix-blend-mode: normal;
}

/* Voice failed in the car: the card text comes back, so the warning stops shouting. */
.play--car:has(.qcard:not([hidden])) .play-message {
  flex: none;
  display: block;
  font-size: clamp(1.4rem, 6.4vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-shadow: none;
}

.play--car:has(.qcard:not([hidden])) .play-controls {
  min-height: 0;
}

.play--car:has(.qcard:not([hidden])) .play-again {
  min-height: 72px;
  font-size: 1.5rem;
}

/* ---------- Tab bar ---------- */

#tabbar {
  flex: none;
  display: flex;
  min-height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding: 3px var(--safe-right) var(--safe-bottom) var(--safe-left);
  background: var(--surface);
  clip-path: polygon(0 3px, 18% 0, 47% 4px, 73% 1px, 100% 4px, 100% 100%, 0 100%);
}

.tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
}

.tab[aria-current="page"] {
  color: var(--ink);
}

.tab:focus-visible {
  outline-offset: -3px;
}

.tab-glyph {
  width: 25px;
  height: 25px;
}

.tab-glyph svg {
  width: 100%;
  height: 100%;
}

.tab[aria-current="page"] .tab-glyph {
  filter: drop-shadow(2px 2px 0 var(--tomato));
}

/* ---------- Toast ---------- */

#toast-root {
  position: fixed;
  left: calc(var(--safe-left) + 14px);
  right: calc(var(--safe-right) + 14px);
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 14px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.toast {
  max-width: 100%;
  padding: 10px 15px 11px;
  color: var(--card-ink);
  background: var(--grain), var(--card-paper);
  font-family: var(--font-card);
  font-size: 0.95rem;
  line-height: 1.25;
  clip-path: polygon(1% 5%, 99% 0, 100% 94%, 0 100%);
  animation: toast-drop 150ms ease-out;
}

/* Cream paper disappears on the cream day table, so the day toast is printed in ink. */
html[data-theme="day"] .toast {
  color: var(--card-paper);
  background: var(--card-ink);
}

@keyframes toast-drop {
  from { transform: translateY(10px); }
}

/* ---------- Installed app, day table ---------- */

/* iOS prints light status text over the page here, so the cream table needs an ink band behind it. */
html[data-theme="day"] body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  height: var(--safe-top);
  background: #1F1B4D;
  pointer-events: none;
}

/* ---------- Short screens ---------- */

@media (max-height: 680px) {
  .places-hero {
    flex: 0 0 auto;
    max-width: none;
    padding: 8px 18px 8px;
    font-size: 1.6rem;
    transform: none;
  }

  .places-grid {
    grid-auto-rows: minmax(88px, auto);
    gap: 8px 12px;
    padding-bottom: 10px;
  }

  .place-glyph {
    width: 40px;
    height: 40px;
  }
}

/* ---------- Phone on its side. The manifest asks for portrait, but iOS may not listen. ---------- */

@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --card-w: min(30vw, calc((100dvh - var(--tabbar-h) - var(--safe-top) - var(--safe-bottom) - 24px) / 1.4));
  }

  .places-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .deal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 236px;
    grid-template-rows: auto auto auto 1fr auto;
  }

  .deal-head,
  .deal-note,
  .deal-chips,
  .deal-again {
    grid-column: 2;
  }

  .deal-head { grid-row: 1; }
  .deal-note { grid-row: 2; }
  .deal-chips { grid-row: 3; }

  .deal-again {
    grid-row: 5;
    width: calc(100% - 12px);
    margin: 0 6px 6px;
  }

  .chip-group {
    flex-wrap: wrap;
  }

  .fan,
  .deal-empty {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .fan {
    padding-block: 8px;
  }

  .play {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 34vw);
    grid-template-rows: auto 1fr;
    --card-w: min(40vw, calc((100dvh - var(--safe-top) - var(--safe-bottom) - 26px) / 1.4));
  }

  .play-stage {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .play-message {
    grid-column: 2;
    grid-row: 1;
  }

  .play-controls {
    grid-column: 2;
    grid-row: 2;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }

  .play--car:not(:has(.qcard:not([hidden]))) .play-message {
    grid-column: 1;
    grid-row: 1 / -1;
    font-size: clamp(2.4rem, 8vw, 3.6rem);
  }

  .play--car .play-controls {
    grid-row: 1 / -1;
    margin-top: 0;
  }

  .play--car .play-stop,
  .play--car .play-again {
    min-height: 88px;
    font-size: 1.7rem;
  }

  .stamp-btn {
    margin-left: 0;
    order: -1;
  }
}

/* ---------- Reduced motion: nothing rotates or thunks ---------- */

@media (prefers-reduced-motion: reduce) {
  .fan-slot,
  .stamp-mark,
  .toast,
  .play-stage.is-thunked .qcard {
    animation: none;
  }

  .fan-tilt,
  .place-btn,
  .deal-again,
  .stamp-btn {
    transition: none;
  }

  .stamp-btn:active {
    transform: none;
  }
}