/* ============================================================
   Party Hat Games. Marketing site mock screens.
   Self-contained recreations of the host lobby and three
   controller screens. Faithful to the real game's CSS but
   scoped under .mkScreen to avoid colliding with the rest
   of the marketing site. Uses cqmin so each screen scales
   to whatever bezel it sits inside.
   ============================================================ */

/* Each .tv__screen and .phone__screen is a sizing container. */
.tv__screen, .phone__screen {
  container-type: size;
}

/* Reset the screen surface so the mock fills the bezel.
   Dot dimensions stay in px so the dots look the same regardless of bezel
   size; the GRID spacing uses cqmin so the layout still feels right. */
.mkScreen {
  position: absolute; inset: 0;
  background: var(--paper, #FFF4E6);
  background-image:
    radial-gradient(circle, rgba(255, 61, 139, .10) 1.6px, transparent 2px),
    radial-gradient(circle, rgba(24, 198, 222, .10) 1.6px, transparent 2px),
    radial-gradient(circle, rgba(255, 196, 46, .14) 1.6px, transparent 2px);
  background-size: 14cqmin 14cqmin, 14cqmin 14cqmin, 14cqmin 14cqmin;
  background-position: 0 0, 5.2cqmin 7.6cqmin, 10cqmin 2.8cqmin;
  color: var(--ink, #2E1248);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

.mkScreen *, .mkScreen *::before, .mkScreen *::after { box-sizing: border-box; }

.mkScreen .fk { font-family: "Fredoka", "Inter", system-ui, sans-serif; }

.mkScreen .mark {
  background: linear-gradient(104deg, transparent 0.4%, var(--yellow, #FFC42E) 1.6%, var(--yellow, #FFC42E) 97%, transparent 99%);
  background-size: 100% 56%;
  background-repeat: no-repeat;
  background-position: 0 82%;
  padding: 0 .12em;
}

/* ============================================================
   HOST BATTLE RESULTS (TV)
   ============================================================ */
.mkBattle {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 4cqmin 5cqmin 3.5cqmin;
}
.mkBattle__prompt {
  text-align: center; flex-shrink: 0;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 5.4cqmin;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 22ch;
  margin: 0 auto 3cqmin;
  text-shadow: 0 1.4cqmin 0 var(--ink-soft, rgba(46, 18, 72, 0.14));
}
.mkBattle__cards {
  flex: 1; min-height: 0;
  display: flex; align-items: stretch; gap: 3cqmin;
}
.mkBattle__vs {
  flex: 0 0 auto; align-self: center;
  font-family: "Fredoka", sans-serif; font-weight: 700;
  font-size: 5cqmin; color: var(--ink);
  background: var(--yellow, #FFC42E);
  border: 0.5cqmin solid var(--ink);
  border-radius: 50%;
  width: 11cqmin; height: 11cqmin;
  display: grid; place-items: center;
  box-shadow: 0 1cqmin 0 var(--ink);
  rotate: -6deg;
  z-index: 2;
  animation: mkVsWobble 2.4s ease-in-out infinite;
}
@keyframes mkVsWobble {
  0%, 100% { transform: rotate(0) scale(1); }
  20%      { transform: rotate(8deg) scale(1.06); }
  60%      { transform: rotate(-4deg) scale(1.04); }
}
.mkMatchup {
  position: relative;
  flex: 1 1 0; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 1.6cqmin;
}
.mkMatchup:nth-child(1) { rotate: -1.6deg; }
.mkMatchup:nth-child(3) { rotate: 1.6deg; }
.mkMatchup__frame {
  position: relative;
  flex: 1 1 0; min-height: 0; min-width: 0;
  display: grid; place-items: center;
  background: var(--card, #fff);
  border: 0.5cqmin solid var(--ink);
  border-radius: 2.4cqmin;
  box-shadow: 0 1cqmin 0 var(--ink);
  padding: 1.4cqmin;
  overflow: hidden;
}
.mkMatchup__gif {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: 100%;
  object-fit: contain;
  border-radius: 1.4cqmin;
  background: var(--paper-2, #FBE8D0);
}
.mkMatchup--winner .mkMatchup__frame {
  border-color: var(--yellow, #FFC42E);
  box-shadow: 0 1cqmin 0 var(--yellow-deep, #E2A400);
  animation: mkWinnerPulse 1.8s ease-in-out infinite;
}
@keyframes mkWinnerPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}
.mkMatchup--loser .mkMatchup__frame { opacity: .42; filter: saturate(.6); }

/* Winner pill, points pill, author pill */
.mkMatchup__win {
  position: absolute; top: -2.6cqmin; left: 50%;
  translate: -50% 0; rotate: -7deg; z-index: 6;
  font-family: "Fredoka", sans-serif; font-weight: 700;
  font-size: 2.2cqmin; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); background: var(--yellow, #FFC42E);
  border: 0.5cqmin solid var(--ink);
  border-radius: 999px;
  padding: 0.7cqmin 2cqmin;
  box-shadow: 0 0.7cqmin 0 var(--ink);
}
.mkMatchup__points {
  position: absolute; top: -2cqmin; right: -2cqmin;
  rotate: 8deg; z-index: 6;
  font-family: "Fredoka", sans-serif; font-weight: 700;
  font-size: 2.8cqmin; color: var(--ink);
  background: var(--lime, #57CF3C);
  border: 0.5cqmin solid var(--ink);
  border-radius: 999px;
  padding: 0.7cqmin 2cqmin;
  box-shadow: 0 0.7cqmin 0 var(--ink);
}
.mkMatchup:nth-child(1) .mkMatchup__points { left: -2cqmin; right: auto; rotate: -8deg; }
.mkMatchup__who {
  position: absolute; bottom: -2.4cqmin; left: 50%;
  translate: -50% 0; z-index: 6;
  display: inline-flex; align-items: center; gap: 1.4cqmin;
  background: var(--card, #fff);
  border: 0.5cqmin solid var(--ink);
  border-radius: 999px;
  padding: 0.7cqmin 2cqmin 0.7cqmin 0.9cqmin;
  box-shadow: 0 0.7cqmin 0 var(--ink);
  white-space: nowrap;
}
.mkMatchup__face {
  width: 4cqmin; height: 4cqmin;
  border-radius: 50%;
  border: 0.3cqmin solid var(--ink);
  display: grid; place-items: center;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 2.2cqmin;
}
.mkMatchup__name {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 2.2cqmin;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Vote stickers landing on the winning gif */
.mkSticker {
  position: absolute;
  translate: -50% -50%;
  z-index: 4;
  display: inline-flex; align-items: center; gap: 0.8cqmin;
  background: var(--card, #fff);
  border: 0.4cqmin solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 0.8cqmin 0 var(--ink);
  padding: 0.6cqmin 1.4cqmin 0.6cqmin 0.6cqmin;
  white-space: nowrap;
  transform-origin: 50% 50%;
  animation: mkStickerPop .42s cubic-bezier(.34, 1.32, .5, 1) both;
}
.mkSticker--p1 { rotate: -6deg; animation-delay: .1s; }
.mkSticker--p2 { rotate: 4deg;  animation-delay: .35s; }
.mkSticker--p3 { rotate: -3deg; animation-delay: .6s; }
.mkSticker--p4 { rotate: 5deg;  animation-delay: .2s; }
@keyframes mkStickerPop {
  0%   { opacity: 0; transform: scale(0) rotate(-30deg); }
  65%  { opacity: 1; transform: scale(1.14) rotate(6deg); }
  100% { opacity: 1; transform: none; }
}
.mkSticker__av {
  width: 3.4cqmin; height: 3.4cqmin;
  border-radius: 50%;
  border: 0.3cqmin solid var(--ink);
  display: grid; place-items: center;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 1.8cqmin;
}
.mkSticker__nm {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 1.9cqmin;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.mkBattle__foot {
  display: flex; justify-content: center; align-items: center;
  margin-top: 3.6cqmin;
}
.mkVerdict {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 3.2cqmin;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--card, #fff);
  border: 0.5cqmin solid var(--ink);
  border-radius: 999px;
  padding: 1cqmin 3cqmin;
  box-shadow: 0 0.8cqmin 0 var(--ink);
}

/* ============================================================
   HOST LOBBY (TV) -- kept for re-use
   ============================================================ */
.mkLobby {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 5cqmin;
  align-items: stretch;
  padding: 5cqmin 6cqmin;
}
.mkLobby__join { display: flex; flex-direction: column; justify-content: center; gap: 2.4cqmin; }
.mkLobby__game {
  font-family: "Fredoka", sans-serif; font-weight: 700;
  font-size: 6.4cqmin; line-height: .98; color: var(--ink);
  margin: 0 0 -0.4cqmin;
}
.mkLobby__lead {
  font-family: "Fredoka", sans-serif; font-weight: 600;
  font-size: 3.6cqmin; line-height: 1.12; color: var(--ink); margin: 0;
}
.mkLobby__row { display: flex; align-items: center; gap: 3cqmin; flex-wrap: wrap; }

.mkQr {
  flex-shrink: 0;
  width: 22cqmin; height: 22cqmin;
  background: #fff;
  border: 0.5cqmin solid var(--ink);
  border-radius: 2.4cqmin;
  box-shadow: 0 1.2cqmin 0 var(--ink);
  padding: 1.2cqmin;
  animation: mkQrBob 3.8s ease-in-out infinite;
}
@keyframes mkQrBob {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50%      { translate: 0 -0.6cqmin; rotate: 1.4deg; }
}
.mkQr__grid {
  width: 100%; height: 100%;
  background:
    conic-gradient(from 0deg at 50% 50%, var(--ink) 25%, #fff 25% 50%, var(--ink) 50% 75%, #fff 75%);
  background-size: 25% 25%;
  position: relative;
}
/* Three QR-style corner markers + a peppering of pixels via box-shadows */
.mkQr__grid::before, .mkQr__grid::after {
  content: ""; position: absolute;
  width: 22%; height: 22%;
  background: var(--ink);
  box-shadow: inset 0 0 0 0.5cqmin #fff, inset 0 0 0 1cqmin var(--ink);
}
.mkQr__grid::before { top: 6%; left: 6%; }
.mkQr__grid::after  { top: 6%; right: 6%; }
.mkQr__bl {
  position: absolute; bottom: 6%; left: 6%;
  width: 22%; height: 22%;
  background: var(--ink);
  box-shadow: inset 0 0 0 0.5cqmin #fff, inset 0 0 0 1cqmin var(--ink);
}

.mkRoomCode {
  background: #fff;
  border: 0.5cqmin solid var(--ink);
  border-radius: 3.4cqmin;
  box-shadow: 0 1.4cqmin 0 var(--ink);
  padding: 1.6cqmin 3.2cqmin 1.8cqmin;
  rotate: -1.5deg;
  animation: mkRoomCodeWobble 4.4s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes mkRoomCodeWobble {
  0%, 100% { rotate: -1.5deg; translate: 0 0; }
  50%      { rotate: 1.2deg;  translate: 0 -0.5cqmin; }
}
.mkRoomCode__label {
  font-family: "Fredoka", sans-serif;
  font-size: 1.7cqmin; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-2, #7A6A88);
  margin: 0 0 0.3cqmin;
}
.mkRoomCode__value {
  font-family: "Fredoka", sans-serif;
  font-size: 10cqmin; font-weight: 700; line-height: 1;
  letter-spacing: 0.14em; color: var(--ink);
}
.mkRoomCode__players {
  font-family: "Fredoka", sans-serif;
  font-size: 2cqmin; font-weight: 600;
  color: var(--ink-2, #7A6A88);
  margin: 0.6cqmin 0 0;
}

.mkRoster { display: flex; flex-direction: column; min-height: 0; }
.mkRoster__title {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 3cqmin;
  color: var(--ink);
  margin: 0 0 2cqmin;
}
.mkRoster__grid {
  flex: 1; min-height: 0; align-content: flex-start;
  display: flex; flex-wrap: wrap; gap: 1.8cqmin;
  overflow: hidden;
}
.mkRoster__card {
  display: flex; align-items: center; gap: 1.6cqmin;
  background: #fff;
  border: 0.4cqmin solid var(--ink);
  border-radius: 2.4cqmin;
  box-shadow: 0 1cqmin 0 var(--ink);
  padding: 1.2cqmin 2cqmin 1.2cqmin 1.2cqmin;
  animation: mkRosterSway 4.6s ease-in-out infinite;
  transform-origin: 50% 80%;
}
.mkRoster__card:nth-child(odd)  { rotate: -1deg; animation-delay: .6s; }
.mkRoster__card:nth-child(even) { rotate: 1deg; animation-delay: 1.3s; }
.mkRoster__card:nth-child(3n)   { animation-delay: 2s; }
.mkRoster__card:nth-child(4n)   { animation-delay: 1.6s; }
@keyframes mkRosterSway {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(0.5cqmin) rotate(1deg); }
}
.mkRoster__avatar {
  flex-shrink: 0;
  width: 6cqmin; height: 6cqmin;
  border-radius: 50%;
  border: 0.4cqmin solid var(--ink);
  background: var(--paper-2, #FBE8D0);
  display: grid; place-items: center;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 3cqmin;
  color: var(--ink);
}
.mkRoster__name {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 2cqmin;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

/* Coloured avatar swatches so the roster reads as a party. */
.mkAv--pink   { background: var(--pink, #FF3D8B);   color: #fff; }
.mkAv--cyan   { background: var(--cyan, #18C6DE); }
.mkAv--yellow { background: var(--yellow, #FFC42E); }
.mkAv--lime   { background: var(--lime, #57CF3C); }
.mkAv--purple { background: var(--purple, #9B57F0); color: #fff; }
.mkAv--tang   { background: var(--tang, #FF6B2C);  color: #fff; }

/* ============================================================
   CONTROLLER PHONES
   ============================================================ */
.mkCtrl {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 8cqmin 6cqmin 6cqmin;
}
.mkCtrl__eyebrow {
  font-family: "Fredoka", sans-serif;
  font-size: 3cqmin; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2, #7A6A88);
  margin: 0 0 2.4cqmin;
}
.mkCtrl__title {
  font-family: "Fredoka", sans-serif;
  font-size: 8cqmin; font-weight: 600;
  line-height: 1.05; letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.mkCtrl__title--sm {
  font-size: 6cqmin; line-height: 1.07;
}
.mkCtrl__sub {
  margin: 2.8cqmin 0 0;
  color: var(--ink-2, #7A6A88);
  font-size: 3.8cqmin; line-height: 1.35; font-weight: 500;
}

/* Controller form (prompt entry) */
.mkForm { display: grid; gap: 2.8cqmin; margin-top: 3.4cqmin; }
.mkField { display: block; }
.mkField__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2.4cqmin; margin: 0 0 1.6cqmin;
}
.mkField__label {
  font-family: "Fredoka", sans-serif;
  font-size: 3cqmin; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2, #7A6A88);
  margin: 0;
}
.mkField__suggest {
  font-family: "Fredoka", sans-serif;
  font-size: 2.8cqmin; font-weight: 700;
  color: var(--ink);
  background: var(--yellow, #FFC42E);
  border: 0.6cqmin solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 0.8cqmin 0 var(--ink);
  padding: 1cqmin 3cqmin;
}
.mkInput {
  width: 100%;
  padding: 3.4cqmin 3.6cqmin;
  background: #fff;
  border: 0.6cqmin solid var(--ink);
  border-radius: 4cqmin;
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-size: 4cqmin; font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 0.9cqmin 0 rgba(46, 18, 72, 0.14);
  min-height: 14cqmin;
}
.mkInput--empty { color: var(--ink-3, #BAACC6); font-weight: 500; font-style: italic; }
.mkCaret {
  display: inline-block;
  color: var(--pink, #FF3D8B);
  font-weight: 700;
  animation: mkCaret 1s steps(2) infinite;
}
@keyframes mkCaret { 50% { opacity: 0; } }

.mkCtrl__cta {
  position: absolute; left: 6cqmin; right: 6cqmin; bottom: 6cqmin;
}
.mkCtrl__btn {
  display: block;
  width: 100%;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 4.2cqmin;
  letter-spacing: 0.01em;
  border: 0.6cqmin solid var(--ink);
  border-radius: 4cqmin;
  padding: 3.6cqmin 0;
  background: var(--pink, #FF3D8B);
  color: var(--ink);
  box-shadow: 0 1.2cqmin 0 var(--ink);
  text-align: center;
}

/* Controller vote screen */
.mkVoteCards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 3cqmin;
  margin-top: 5cqmin;
}
.mkVoteBtn {
  position: relative;
  border: 0.6cqmin solid var(--ink);
  border-radius: 4cqmin;
  background: #fff;
  box-shadow: 0 1.2cqmin 0 var(--ink);
  overflow: hidden;
  aspect-ratio: 1 / 1.1;
}
.mkVoteBtn:nth-child(1) { transform: rotate(-1.6deg); }
.mkVoteBtn:nth-child(2) { transform: rotate(1.6deg); }
.mkVoteBtn--picked {
  border-color: var(--celebrate, #FFC42E);
  box-shadow: 0 1.2cqmin 0 var(--celebrate-deep, #E2A400);
}
.mkVoteBtn--picked::after {
  content: "";
  position: absolute; inset: -1.2cqmin;
  border: 0.6cqmin solid var(--celebrate, #FFC42E);
  border-radius: 5cqmin;
  pointer-events: none;
  animation: mkPickedRing 1.4s ease-in-out infinite;
}
@keyframes mkPickedRing {
  0%, 100% { transform: scale(1); opacity: .7; }
  50%      { transform: scale(1.02); opacity: 1; }
}
.mkVoteBtn.is-dim { opacity: .45; filter: saturate(.65); }
.mkVoteBtn__img {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Controller gif picker */
.mkCtrl--picker { padding: 0; }
.mkPicker__prompt {
  padding: 6cqmin 5cqmin 4cqmin;
  text-align: center;
  flex-shrink: 0;
}
.mkPicker__board {
  flex: 1;
  background: var(--paper-2, #FBE8D0);
  border-top: 0.6cqmin solid var(--ink);
  padding: 3.6cqmin 3cqmin;
  display: flex; flex-direction: column;
  gap: 2.6cqmin;
  min-height: 0;
}
.mkSearch {
  display: flex; align-items: center; gap: 2cqmin;
  background: #fff;
  border: 0.6cqmin solid var(--ink);
  border-radius: 999px;
  padding: 2cqmin 4cqmin;
  font-family: "Inter", sans-serif;
  font-size: 3.4cqmin; font-weight: 500;
  color: var(--ink-3, #BAACC6);
  box-shadow: 0 0.8cqmin 0 rgba(46, 18, 72, 0.14);
}
.mkSearch svg { width: 4cqmin; height: 4cqmin; color: var(--ink-2, #7A6A88); flex-shrink: 0; }

.mkMasonry {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2cqmin;
  overflow: hidden;
}
.mkMcol { display: flex; flex-direction: column; gap: 2cqmin; min-height: 0; }
.mkTile {
  display: block;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  border: 0.4cqmin solid var(--ink);
  border-radius: 2cqmin;
  box-shadow: 0 0.8cqmin 0 rgba(46, 18, 72, 0.14);
  background: var(--paper-2, #FBE8D0);
  object-fit: cover;
}
/* Slight flex variation so the columns feel like a real masonry, not a grid. */
.mkMcol:nth-child(1) .mkTile:nth-child(1) { flex-grow: 3; }
.mkMcol:nth-child(1) .mkTile:nth-child(2) { flex-grow: 4; }
.mkMcol:nth-child(1) .mkTile:nth-child(3) { flex-grow: 3; }
.mkMcol:nth-child(2) .mkTile:nth-child(1) { flex-grow: 4; }
.mkMcol:nth-child(2) .mkTile:nth-child(2) { flex-grow: 3; }
.mkMcol:nth-child(2) .mkTile:nth-child(3) { flex-grow: 3; }
.mkTile--picked {
  outline: 0.5cqmin solid var(--ink);
  outline-offset: 0.6cqmin;
  animation: mkPickedRing 1.4s ease-in-out infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mkScreen *, .mkScreen *::before, .mkScreen *::after {
    animation: none !important;
    transition: none !important;
  }
}