/* Family Movie Night — the family desk's ballot.

   Pastel Y2K / MS Paint: a translucent pink-to-blue window floating on a dreamy
   sakura wallpaper, ringed with glossy pixel hearts, sparkles and glass bubbles.
   Every motif here is CSS or inline SVG drawn by us — no third-party art.

   The window furniture (.win / .win-bar / .win-menu / .win-status) keeps the
   family desk's panel shape so /movie-night/ still reads as part of
   delarosafams.com. Text stays deep plum on pastel: the reference art is
   white-on-pink, which is pretty and unreadable on a phone in sunlight. */

@font-face {
  font-family: "MS W98 UI";
  src: url("/fonts/ms-w98-ui.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MS W98 UI";
  src: url("/fonts/ms-w98-ui-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --pink: #ffb6d9;
  --pink-hot: #ff8fc0;
  --blue: #d9f0ff;
  --sky: #9ad7ff;
  --sky-deep: #6aa9e8;
  --lav-deep: #cdb4ff;

  --win: rgba(255, 240, 250, .74);
  --ink: #5e3352;
  --ink-2: #77476d;
  --ink-soft: #8f6f88;
  --ok: #3f9a6d;

  --sh-card: 0 3px 0 rgba(205, 180, 255, .40), 0 7px 16px rgba(190, 130, 175, .16);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  padding: 16px 11px 30px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font: 15px/1.5 "MS W98 UI", Tahoma, Verdana, "DejaVu Sans", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(760px 400px at 8% -6%, #ffffff 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(660px 440px at 96% 2%, rgba(205, 180, 255, .55) 0%, rgba(205, 180, 255, 0) 64%),
    radial-gradient(760px 520px at 46% 108%, rgba(184, 242, 230, .8) 0%, rgba(184, 242, 230, 0) 62%),
    linear-gradient(162deg, #ffe6f7 0%, #ffe0f4 20%, #f3dcff 46%, #ddeeff 74%, #d4f8f0 100%);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}

/* the wallpaper's floating icons ---------------------------------------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.sky svg { position: absolute; }
.deco-heart   { left: 6%;   top: 5%;    width: 22px; height: 20px; transform: rotate(-9deg); }
.deco-petals  { right: 8%;  top: 2%;    width: 26px; height: 26px; }
.deco-spark   { left: 13%;  top: 25%;   width: 16px; height: 16px; }
.deco-bubble  { right: 5%;  top: 21%;   width: 30px; height: 30px; }
.deco-spark2  { right: 15%; top: 46%;   width: 13px; height: 13px; }
.deco-petals2 { left: 4%;   top: 52%;   width: 20px; height: 20px; }
.deco-heart2  { right: 7%;  bottom: 8%; width: 18px; height: 16px; transform: rotate(12deg); }
.deco-cursor  { left: 7%;   bottom: 13%; width: 15px; height: 20px; }

/* the window ------------------------------------------------------------ */

.win {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  background: var(--win);
  border: 2px solid rgba(255, 255, 255, .94);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(255, 143, 192, .38),
    0 18px 42px rgba(168, 108, 158, .28),
    0 0 46px rgba(255, 182, 217, .5) inset;
  backdrop-filter: blur(7px) saturate(1.18);
  -webkit-backdrop-filter: blur(7px) saturate(1.18);
  overflow: hidden;
}

.win-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  background: linear-gradient(90deg, #ffbfe0 0%, #ffa6d2 46%, #a9d8ff 100%);
  border-bottom: 2px solid rgba(255, 255, 255, .9);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(206, 76, 142, .95), 0 0 9px rgba(255, 143, 192, .75);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .4px;
}

.win-ico { display: flex; flex: 0 0 auto; }

.win-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.win-btns { display: flex; gap: 4px; flex: 0 0 auto; }

.win-btns i {
  width: 19px;
  height: 17px;
  display: grid;
  place-items: center;
  font: 700 9px/1 Tahoma, sans-serif;
  font-style: normal;
  color: #b8668f;
  text-shadow: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 214, 235, .85));
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(180, 120, 165, .32);
}

.win-menu {
  display: flex;
  gap: 15px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, .45);
  border-bottom: 1px solid rgba(255, 255, 255, .8);
  font-size: 12px;
  color: var(--ink-2);
}

/* the Paint colour strip — decorative, but it is what makes it read "Paint" */
.swatches {
  display: flex;
  gap: 3px;
  padding: 6px 12px 7px;
  background: rgba(255, 255, 255, .3);
  border-bottom: 1px solid rgba(255, 255, 255, .7);
  overflow: hidden;
}
.swatches i {
  flex: 0 0 auto;
  width: 15px;
  height: 13px;
  border-radius: 3px;
  /* a mid-tone hairline: white-on-white made the first swatch invisible */
  border: 1px solid rgba(176, 130, 172, .55);
  box-shadow: 0 1px 2px rgba(175, 120, 165, .22);
}

.win-body { padding: 15px 14px 16px; }

/* the banner ------------------------------------------------------------ */

.banner {
  position: relative;
  margin-bottom: 15px;
  padding: 10px 12px 11px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(255, 231, 246, .72));
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(190, 130, 175, .14);
}

/* Motifs inside the window: on a phone the window covers the wallpaper, so the
   sakura and hearts have to live in the page itself to be seen at all. */
.bloom {
  position: absolute;
  pointer-events: none;
  opacity: .9;
}
.bloom-tr { top: -11px; right: 9px; width: 26px; height: 26px; }
.bloom-tl { top: 8px; right: 40px; width: 15px; height: 15px; opacity: .8; }

.lede { margin: 0; font-size: 14.5px; }

.deadline {
  margin: 7px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #a92f72;
}

/* The banner's closing-time pill is GONE, along with the note that explained it
   (Darren, 2026-10-12: "just remove voting period"). There is no voting period
   to explain, so `.deadline-note` was deleted rather than left dead. `.deadline`
   itself stays: the organizer page still wears it for its error line. */

/* controls -------------------------------------------------------------- */

.lbl {
  display: block;
  margin: 0 0 6px;
  font-size: 12.5px;
  letter-spacing: .4px;
  color: var(--ink-2);
}

.row { display: flex; gap: 8px; }

input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, .93);
  border: 2px solid #ffffff;
  border-radius: 11px;
  box-shadow: 0 2px 0 rgba(205, 180, 255, .38), inset 0 1px 3px rgba(170, 120, 160, .12);
}

input::placeholder { color: #9c7291; }

input:focus, button:focus-visible {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 2px 0 var(--sky-deep), 0 0 0 3px rgba(154, 215, 255, .4);
}

.btn {
  flex: 0 0 auto;
  padding: 11px 15px;
  font: 700 14px/1 "MS W98 UI", Tahoma, Verdana, sans-serif;
  color: #ffffff;
  background: linear-gradient(180deg, #ffb0d6, #ff7ab8);
  border: 2px solid #ffffff;
  border-radius: 11px;
  box-shadow: 0 3px 0 #e779ab, 0 7px 14px rgba(255, 143, 192, .35);
  text-shadow: 0 1px 0 rgba(214, 105, 160, .55);
  cursor: pointer;
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); box-shadow: 0 2px 0 #e779ab; }
.btn[disabled] { opacity: .6; cursor: default; }

.who {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 2px;
  padding: 7px 10px;
  font-size: 13px;
  background: rgba(255, 255, 255, .64);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 10px;
}
.who b { color: #b8668f; }

.link {
  border: 0;
  margin-left: 2px;
  /* a real thumb target: someone who mistypes their name has to fix it here */
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
  color: #a8447a;
  background: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.q {
  margin: 20px 0 2px;
  padding-top: 12px;
  border-top: 1px dotted rgba(184, 102, 143, .34);
  font-size: 15.5px;
  font-weight: 700;
  color: #6b2f5b;
}

.hint { margin: 6px 0 8px; font-size: 13px; color: var(--ink-2); }

/* `hidden` has to win over any display rule we set on the same element: .who is
   display:flex, and without this the UA rule loses, so the who row and the
   hidden steps show before anyone has a name. */
[hidden] { display: none !important; }

/* THE GATE — the name comes first. Until it is in, the ballot below is visible
   but dimmed and dead to the touch, so the one thing to do is the only thing
   that works. */
.gate {
  margin: 0 0 8px;
  padding: 13px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 246, 252, .9));
  border: 2px solid #ffffff;
  border-radius: 14px;
  box-shadow: var(--sh-card);
}
.gate .q-first { margin: 0; padding-top: 0; border-top: 0; font-size: 17px; }
.gate .gate-lead { margin: 4px 0 9px; }
#sheet.locked {
  opacity: .4;
  filter: saturate(.3);
  pointer-events: none;
  user-select: none;
}
/* no phantom tick in the locked state: a ghost tick inside a dimmed box reads as
   an answer that was already given */
#sheet.locked .ghost { display: none; }

/* THE FINISH LINE — the page saves on every tap, which left the family with no
   way to tell whether they were done. One big button at the end of the
   questions, and a green confirmation that names what they actually picked. */
.done-step { margin: 18px 0 2px; }
.done-btn {
  display: block;
  width: 100%;
  padding: 15px 16px;
  font: inherit;
  text-align: center;
  color: #ffffff;
  background: linear-gradient(180deg, #ff9ecb, #ff6fae 60%, #e2589b);
  border: 2px solid #ffffff;
  border-radius: 14px;
  box-shadow: 0 5px 0 #c3407f, 0 10px 22px rgba(200, 90, 150, .35);
  cursor: pointer;
}
.done-btn .done-t {
  display: block;
  font-size: 17px;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(150, 60, 110, .35);
}
.done-btn .done-s { display: block; margin-top: 3px; font-size: 12.5px; opacity: .95; }
.done-btn:active { transform: translateY(1px); }
.done-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, #b8f0d4, #7fdcb0 60%, #55c795);
  box-shadow: 0 5px 0 #3aa377, 0 10px 22px rgba(90, 190, 150, .32);
}
.done-btn[aria-pressed="true"] .done-t { text-shadow: 0 1px 0 rgba(30, 110, 80, .3); }
.done-note {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .8);
  border: 2px solid #ffffff;
  border-radius: 14px;
  box-shadow: var(--sh-card);
}
.done-yay { margin: 0 0 4px; font-weight: 700; color: #2f7d5c; }
.done-sum { margin: 0 0 6px; font-size: 13px; color: var(--ink); }
.done-again { margin: 0; font-size: 12px; color: var(--ink-2); }

/* THE SOUNDTRACK — a small iPod Classic in the corner. Folded to a pill until
   someone taps (browsers will not start sound on their own), small on a phone,
   and MENU folds it back down. */
.ipod {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: inherit;
}
.ipod-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 78vw;
  padding: 9px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #4a3a55;
  background: linear-gradient(180deg, #ffffff, #efe9f6);
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(120, 80, 140, .32);
  cursor: pointer;
}
.ipod-tab-ico { font-size: 15px; color: #c14d8e; }
.ipod-tab[aria-expanded="true"] .ipod-tab-ico { color: #4d8a6a; }
.ipod-body {
  width: 202px;
  padding: 10px 10px 12px;
  background: linear-gradient(180deg, #ffffff, #f2eef9);
  border: 2px solid #ffffff;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(110, 70, 130, .38);
}
.ipod-screen {
  padding: 8px 10px 9px;
  background: linear-gradient(180deg, #dfe7f2, #c9d5e6);
  border: 2px solid #b9c6da;
  border-radius: 9px;
  box-shadow: inset 0 2px 6px rgba(60, 80, 120, .28);
}
.ipod-bar {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #3c4a63;
}
.ipod-title {
  margin: 5px 0 1px;
  font-size: 13px;
  font-weight: 700;
  color: #1f2a3d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ipod-artist { margin: 0; font-size: 11px; color: #4d5c78; }
.ipod-progress {
  margin: 7px 0 4px;
  height: 6px;
  background: rgba(60, 80, 120, .22);
  border-radius: 99px;
  overflow: hidden;
}
.ipod-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #7fb6ff, #4d7fd6);
}
.ipod-time {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: #3c4a63;
}
.ipod-vol {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #3c4a63;
}
.ipod-vol input { flex: 1; height: 14px; accent-color: #b8668f; }
.ipod-wheel {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 11px auto 0;
  background: radial-gradient(circle at 50% 45%, #ffffff, #ece7f4);
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: inset 0 2px 8px rgba(120, 90, 140, .2), 0 3px 10px rgba(120, 80, 140, .18);
}
.ipod-btn {
  position: absolute;
  padding: 2px 4px;
  font: inherit;
  color: #6b6480;
  background: none;
  border: 0;
  cursor: pointer;
}
.ipod-menu { top: 6px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.ipod-prev { left: 7px; top: 50%; transform: translateY(-50%); font-size: 10px; }
.ipod-next { right: 7px; top: 50%; transform: translateY(-50%); font-size: 10px; }
.ipod-play { bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 10px; }
.ipod-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: radial-gradient(circle at 50% 38%, #ffffff, #e6e0ef);
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(120, 90, 140, .28);
  cursor: pointer;
}
.ipod-btn:hover, .ipod-center:hover { color: #b8668f; }
@media (max-width: 640px) {
  .ipod { right: 10px; bottom: 10px; }
  .ipod-body { width: 190px; }
  .ipod-wheel { width: 104px; height: 104px; }
  .ipod-center { width: 40px; height: 40px; }
}

/* THE SHARE — a pink letter with a heart, sitting in the banner. Pink paper,
   deeper pink heart, and a slow friendly wiggle so the eye lands on it: this is
   the button that fills the couch. */
.share {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 13px 0 0;
  padding: 11px 13px;
  font: inherit;
  text-align: left;
  color: #6b2f5b;
  background: linear-gradient(180deg, #fff6fb, #ffdff0);
  border: 2px solid #ffffff;
  border-radius: 15px;
  box-shadow: 0 5px 0 #ebadd0, 0 12px 26px rgba(200, 90, 150, .38);
  cursor: pointer;
}
.share:hover { box-shadow: 0 5px 0 #ebadd0, 0 15px 32px rgba(200, 90, 150, .46); }
.share:active { transform: translateY(1px); }
.share-ico { flex: 0 0 auto; animation: sharewiggle 3.6s ease-in-out infinite; }
.share-ico svg { display: block; width: 54px; height: 42px; }
.share-ico .env { fill: #ff8cc2; stroke: #ffffff; stroke-width: 2.4; }
.share-ico .env-flap { fill: #8fbcff; stroke: #ffffff; stroke-width: 2.4; }
.share-ico .env-throat { fill: #6f2c53; }
.share-ico .env-lip { fill: #ff74b4; stroke: #ffffff; stroke-width: 2.2; }
.share-ico .env-paper { fill: #ffffff; stroke: #d9c9e5; stroke-width: 1.2; }
.share-ico .env-line { fill: none; stroke: #a992bb; stroke-width: 2.2; stroke-linecap: round; }
.share-ico .env-heart { fill: #e0417f; stroke: #ffffff; stroke-width: 1.6; }
.share-ico .env-spark { fill: #ffffff; }
.share-text { display: block; min-width: 0; }
.share-t { display: block; font-size: 15.5px; font-weight: 700; color: #8f2f60; }
.share-s { display: block; margin-top: 1px; font-size: 12px; color: var(--ink-2); }
.share-thanks { margin: 2px 0 0; }
@keyframes sharewiggle {
  0%, 82%, 100% { transform: rotate(0deg); }
  86% { transform: rotate(-6deg) translateY(-1px); }
  90% { transform: rotate(6deg) translateY(-1px); }
  94% { transform: rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) { .share-ico { animation: none; } }

/* The iPod pill floats, so the last thing on the page must not end up under it:
   on a phone the sheet gets a tail of empty space the size of the pill. */
@media (max-width: 760px) {
  main.win { padding-bottom: 78px; }
}

/* AFTER DONE — the summary page. What they sent, a thank-you, and a countdown
   home. Auditable: the numbers come from the same state the server saved. */
body.thanks-open { overflow: hidden; }
.thanks {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(58, 22, 48, .55);
  overflow-y: auto;
}
.thanks-card {
  width: 100%;
  max-width: 420px;
  padding: 20px 18px 16px;
  text-align: center;
  background: linear-gradient(180deg, #ffffff, #fdf1f8);
  border: 3px solid #ffffff;
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(70, 30, 60, .5);
}
.thanks-yay {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 9px;
  font-size: 30px;
  color: #ffffff;
  background: linear-gradient(180deg, #8fdcb4, #5cc394);
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(70, 160, 120, .4);
}
.thanks-h1 { margin: 0 0 6px; font-size: 20px; color: #6b2f5b; }
.thanks-lede { margin: 0 0 12px; font-size: 13px; color: #77476d; }
.thanks-list { margin: 0 0 14px; padding: 0; list-style: none; text-align: left; }
.thanks-list li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 14px;
  line-height: 1.4;
  color: #4a2b45;
  border-bottom: 1px dotted rgba(184, 102, 143, .28);
}
.thanks-list li:before {
  content: "\2713";
  position: absolute;
  left: 1px;
  font-weight: 700;
  color: #5cc394;
}
.thanks-list li b { color: #6b2f5b; }
.thanks-redirect { margin: 0 0 12px; font-size: 13.5px; color: #6b2f5b; }
.thanks-redirect b { font-size: 18px; color: #c3407f; }
.thanks-acts { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.thanks-acts .btn { width: 100%; }

/* The results are a summary, not a ballot: its own recessed surface, so nobody
   taps a bar expecting it to vote. On a real phone the bars were the only list
   in view and they read as the options — that is what "I can't vote" meant. */
.tally {
  margin-top: 20px;
  padding: 12px 14px 8px;
  background: rgba(255, 255, 255, .5);
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 14px;
}

/* THE BIG CHECKBOX ------------------------------------------------------ */

.att {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  margin: 8px 0 9px;
  padding: 13px 14px;
  font: inherit;
  color: var(--ink);
  text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 237, 248, .88));
  border: 2px solid #ffffff;
  border-radius: 15px;
  box-shadow: var(--sh-card);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.att:active { transform: translateY(1px); }

.att .box {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #ffe6f5);
  /* a strong outline: the box has to read as interactive before it is ticked */
  border: 2px solid var(--pink-hot);
  box-shadow: inset 0 2px 0 #ffffff, 0 2px 7px rgba(190, 130, 175, .3);
}
.att .box svg {
  grid-area: 1 / 1;
  width: 26px;
  height: 26px;
  transition: opacity .13s ease, transform .13s ease;
}
/* an empty box needs to show what it wants: a clear ghost tick, filled on tap */
.att .box .ghost { opacity: .42; }
.att .box .tick { opacity: 0; transform: scale(.55); }
.att .t { display: block; font-size: 16.5px; font-weight: 700; }
.att .s { display: block; margin-top: 1px; font-size: 13px; color: var(--ink-2); }

.att[aria-checked="true"] {
  background: linear-gradient(180deg, #ffe0f1, #ffc4e5);
  box-shadow: 0 4px 0 #ff9ccd, 0 11px 22px rgba(255, 143, 192, .42);
}
.att[aria-checked="true"] .box {
  background: linear-gradient(180deg, #ff9ccd, #ff6fb0);
  border-color: #ffffff;
  animation: pop .22s ease;
}
.att[aria-checked="true"] .box .tick { opacity: 1; transform: scale(1); }
.att[aria-checked="true"] .box .ghost { opacity: 0; }
.att[aria-checked="true"] .s { color: #8a2f66; }

@keyframes pop {
  0% { transform: scale(1); }
  55% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* the quiet second answer — a no is still an answer */
.att-no {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0 0 4px;
  padding: 10px 13px;
  font: inherit;
  font-size: 14px;
  color: var(--ink-2);
  text-align: left;
  background: rgba(255, 255, 255, .58);
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 13px;
  cursor: pointer;
}
.att-no .box {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff, #eef6ff);
  border: 2px solid var(--sky-deep);
  box-shadow: inset 0 2px 0 #ffffff;
}
.att-no .box svg { grid-area: 1 / 1; width: 17px; height: 17px; }
.att-no .box .tick { opacity: 0; }
.att-no[aria-pressed="true"] {
  color: var(--ink);
  background: linear-gradient(180deg, #eaf6ff, #d3eaff);
  border-color: #ffffff;
  box-shadow: 0 3px 0 var(--sky-deep);
}
.att-no[aria-pressed="true"] .box {
  background: linear-gradient(180deg, #9ad7ff, #6aa9e8);
  border-color: #ffffff;
}
.att-no[aria-pressed="true"] .box .tick { opacity: 1; }

/* the cards ------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 9px;
  margin: 4px 0 6px;
}

.card {
  position: relative;
  display: block;
  width: 100%;
  min-height: 62px;
  padding: 11px 13px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 246, 252, .88));
  border: 2px solid #ffffff;
  border-radius: 13px;
  box-shadow: var(--sh-card);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

.card:active { transform: translateY(1px); }
.card .t { display: block; font-weight: 700; font-size: 14.5px; }
.card .s { display: block; font-size: 12px; color: var(--ink-2); margin-top: 1px; }
.card .em { float: right; margin-left: 6px; font-size: 19px; line-height: 1; }

/* the movie cards carry the real poster: a small case on the left, copy beside
   it — one per row, because a 62px case inside a half-width column leaves the
   title nowhere to go */
.cards.movies { grid-template-columns: 1fr; }
.cards.movies .card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px 10px 10px;
}
/* every row keeps the same 62px column, so the card with no poster does not
   start its text where the film titles start */
.slot {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 84px;
  height: 126px;
  font-size: 32px;
  background: rgba(255, 255, 255, .5);
  border: 2px dashed rgba(184, 102, 143, .38);
  border-radius: 10px;
}
img.slot {
  display: block;
  object-fit: cover;
  background: none;
  border: 2px solid #ffffff;
  box-shadow: 0 3px 9px rgba(150, 110, 160, .34);
}
.cards.movies .txt { flex: 1 1 auto; min-width: 0; }
.cards.movies .t { font-size: 16px; }
.cards.movies .s { margin-top: 3px; font-size: 13px; line-height: 1.36; }
.card .tick { display: none; position: absolute; }

.card[aria-pressed="true"] {
  /* the whole card has to read as chosen, not just the corner tick */
  background: linear-gradient(180deg, #d8ecff, #bcdcff);
  border-color: var(--sky);
  box-shadow: 0 4px 0 var(--sky-deep), 0 9px 22px rgba(90, 150, 220, .42);
}

.card[aria-pressed="true"] .tick {
  display: grid;
  place-items: center;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(180deg, #9ad7ff, #6aa9e8);
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(120, 170, 230, .5);
}

/* "not that weekend" is not a night — give it the quieter, secondary skin so it
   cannot be mistaken for a fifth date */
.card.later {
  background: rgba(255, 255, 255, .6);
  border: 2px dashed rgba(205, 180, 255, .9);
  box-shadow: none;
}
.card.later[aria-pressed="true"] {
  background: linear-gradient(180deg, #f3edff, #e4d7ff);
  border-style: solid;
  border-color: #ffffff;
  box-shadow: 0 4px 0 var(--lav-deep);
}

/* the tally ------------------------------------------------------------- */

.tally {
  margin: 20px 0 4px;
  padding: 12px 12px 10px;
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 13px;
}

.tally .q { margin-top: 0; padding-top: 0; border-top: 0; }

.tally-body { margin-top: 8px; }

/* One panel per question, with its own coloured header band and a ruled heart
   between panels. Both answers used to be translucent-white boxes of the SAME
   wash as the panel holding them, and only a heading (same size, same pink)
   told them apart: Darren, 2026-10-12, on a phone screenshot of the results —
   "make a more obvious break on who is in and what night can you make. it
   blends in too much". So: an OPAQUE surface over the panel's wash, a thick
   tinted border, its own accent colour per question, the heading promoted to a
   full-width band, and a dashed heart rule in the gap between two panels.
   Nothing here may rely on `overflow: hidden` on the panel — the ::before rule
   hangs OUTSIDE the box, and a parent's overflow beats a child's position. */
.bar-group {
  position: relative;
  margin-bottom: 22px;
  padding: 0 11px 11px;
  background: #fffdfe;
  border: 2px solid var(--q-edge, #ea93bd);
  border-radius: 13px;
  box-shadow: 0 2px 0 rgba(205, 180, 255, .34), 0 6px 14px rgba(190, 130, 175, .14);
}
.bar-group:last-child { margin-bottom: 2px; }

/* the break: a dashed rule with a pixel heart on it, in the gap above a panel */
.bar-group + .bar-group,
.step[data-q] + .step[data-q] { margin-top: 26px; }
.bar-group + .bar-group::before,
.step[data-q] + .step[data-q]::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: -19px;
  height: 12px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'><path d='M1 5.4h2.6v2.6H1zM12.4 5.4H15v2.6h-2.6zM3.6 3h2.5v2.4H3.6zM9.9 3h2.5v2.4H9.9zM6.1 8h3.8v2.6H6.1zM3.6 5.4h2.5v2.6H3.6zM9.9 5.4h2.5v2.6H9.9zM1 3h2.6v2.4H1zM12.4 3H15v2.4h-2.6z' fill='%23e884b6'/><path d='M1 3h2.6v2.4H1zM12.4 3H15v2.4h-2.6zM3.6 10.6h8.8v2.4H3.6z' fill='%23f7b6d2'/></svg>")
      center center / 16px 15px no-repeat,
    repeating-linear-gradient(90deg, rgba(184, 102, 143, .5) 0 8px, rgba(184, 102, 143, 0) 8px 15px)
      center center / 100% 3px no-repeat;
}

/* THE VOTING SCREEN WEARS IT TOO. Darren, 2026-10-12, looking at the ballot on his
   phone: "i dont see that change live on my mobile" -- because the banded panels
   had only been put on the RESULTS screen. The questions here were the same
   weakness the results had: a plain heading over a 1px dotted rule. Same panel,
   same band, same drawn break, so a question looks like a question wherever it
   is asked. The heading keeps a slightly larger size than a results label: on
   this screen it IS the question, not a caption over a tally. */
.step[data-q] {
  position: relative;
  margin: 0 0 22px;
  padding: 0 11px 11px;
  background: #fffdfe;
  border: 2px solid var(--q-edge, #ea93bd);
  border-radius: 13px;
  box-shadow: 0 2px 0 rgba(205, 180, 255, .34), 0 6px 14px rgba(190, 130, 175, .14);
}

.step[data-q] .q {
  margin: 0 -11px 10px;
  padding: 9px 12px 8px;
  border-top: 0;
  border-bottom: 2px solid var(--q-rule, #e87fb2);
  border-radius: 11px 11px 0 0;
  background: var(--q-band, linear-gradient(180deg, #ffc6e2, #ff9ecb));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
  font-size: 13px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--q-ink, #5e1f45);
}

.bar-head {
  margin: 0 -11px 10px;
  padding: 8px 12px 7px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: #5e1f45;
  /* A band, not a caption: the tint has to survive a phone in daylight and a
     screenshot read, so it is a saturated pastel with its own bottom rule rather
     than a hint of colour. */
  background: var(--q-band, linear-gradient(180deg, #ffc6e2, #ff9ecb));
  border-bottom: 2px solid var(--q-rule, #e87fb2);
  border-radius: 11px 11px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

/* ONE palette, TWO screens. Each question wears its own accent, keyed off the
   marker it declares (`data-q`): pink for who is in, sky for the night, lavender
   for the film, mint for next month's ballot -- the same four on the results
   cards and on the ballot's own sections, declared once here and read by both.
   Keyed on the QUESTION and not on position, so a section that is absent (a
   question nobody answered, a step not revealed yet) cannot hand its colour to
   the next one. */
[data-q="attend"]  { --q-band: linear-gradient(180deg, #ffc6e2, #ff9ecb); --q-rule: #e87fb2; --q-edge: #ea93bd; --q-ink: #5e1f45; }
[data-q="night"]   { --q-band: linear-gradient(180deg, #c6e7ff, #9fd3fa); --q-rule: #6fb3e6; --q-edge: #93c8ee; --q-ink: #123c63; }
[data-q="movie"]   { --q-band: linear-gradient(180deg, #ddd0ff, #c3acfb); --q-rule: #a184e6; --q-edge: #bda3f4; --q-ink: #38206e; }
[data-q="nominee"] { --q-band: linear-gradient(180deg, #cbf3e0, #a9e6c8); --q-rule: #7ccca4; --q-edge: #93d6b6; --q-ink: #14472f; }

.bar-group[data-q], .step[data-q] { border-color: var(--q-edge); }
.bar-group[data-q] .bar-head, .step[data-q] .q {
  background: var(--q-band);
  border-bottom-color: var(--q-rule);
  color: var(--q-ink);
}

.bar-row {
  margin-bottom: 9px;
  padding-bottom: 7px;
  border-bottom: 1px dotted rgba(184, 102, 143, .4);
}

.bar-row:last-child { margin-bottom: 2px; padding-bottom: 0; border-bottom: 0; }

.bar-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
}

.bar-lab { font-weight: 700; flex: 1 1 auto; min-width: 0; }
.bar-lab .sub { font-weight: 400; color: var(--ink-2); }
.bar-n { flex: 0 0 auto; color: var(--ink-2); }
/* the poster, small, inside a result row */
.mini {
  flex: 0 0 auto;
  width: 28px;
  height: 42px;
  margin-right: 8px;
  object-fit: cover;
  border: 1.5px solid #ffffff;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(150, 110, 160, .3);
}

/* the film's one-line synopsis, under its row in the results */
.row-sub { margin: 0 0 5px 36px; font-size: 12px; color: var(--ink-2); }

.track {
  position: relative;
  height: 16px;
  margin: 6px 0 5px;
  /* A tinted, clearly-bordered meter: a white box reads as an empty input, and
     too pale a track reads as a loading skeleton rather than zero votes. */
  background: #e6dcf0;
  border: 1.5px solid rgba(255, 255, 255, .95);
  border-radius: 999px;
  box-shadow: inset 0 2px 4px rgba(140, 95, 135, .3);
  overflow: hidden;
}

.track > i {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb6d9, #ff8fc0 58%, #cdb4ff);
  box-shadow: 0 0 9px rgba(255, 143, 192, .7), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: width .25s ease;
}

.bar-row.lead .track > i {
  background: linear-gradient(90deg, #ffd166, #ffb6d9 60%, #ff8fc0);
  box-shadow: 0 0 10px rgba(255, 209, 102, .75), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
  min-height: 15px;
  font-size: 13.5px;
  letter-spacing: .2px;
  color: var(--ink);
}
/* Each name is its own little tag, so a full name reads as a person and a row
   with several answers still wraps cleanly on a phone. Deep plum on solid white
   with a real border — the old translucent chip washed out in daylight. */
.chips b {
  padding: 2px 9px 3px;
  font-weight: 600;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid rgba(160, 100, 150, .5);
  border-radius: 999px;
  line-height: 1.65;
  box-shadow: 0 1px 1px rgba(94, 51, 82, .1);
}
/* Your own name, so "LEADING" is never mistaken for "you voted for this". */
.chips b.you {
  font-weight: 700;
  color: #a6487a;
  background: #fff2f9;
  border-color: rgba(166, 72, 122, .8);
}

.lead-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  color: #8a5a12;
  background: linear-gradient(180deg, #ffe9a8, #ffd166);
  border: 1px solid #fff0c4;
  border-radius: 999px;
  vertical-align: 1px;
}

.lead-tag.tied {
  color: #4a5f86;
  background: linear-gradient(180deg, #e2efff, #c4dcff);
  border-color: #ffffff;
}

.nominees { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.nominees li { margin: 2px 0; }
.nominees .nm { color: var(--ink-soft); font-size: 12.5px; }

.empty { font-size: 13px; color: var(--ink-2); }

/* the signature --------------------------------------------------------- */

.credit {
  position: relative;
  width: max-content;
  max-width: 200px;
  margin: 16px 6px 2px auto;
  padding: 8px 15px 9px;
  background: linear-gradient(180deg, #ffb6d9 0%, #ffc9e6 42%, #b8e6ff 100%);
  border: 2px solid #ffffff;
  border-radius: 19px;
  box-shadow: 0 8px 18px rgba(180, 120, 170, .3), inset 0 2px 0 rgba(255, 255, 255, .8);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(255, 143, 192, .9), 0 0 7px rgba(255, 255, 255, .6);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.credit::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: -8px;
  width: 13px;
  height: 13px;
  background: #b8e6ff;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  border-radius: 0 0 5px 0;
  transform: rotate(45deg);
}

.win-status {
  display: flex;
  /* The voting period is gone, so the only thing left in the status bar is the
     answered count — keep it on the right, where it has always sat. */
  justify-content: flex-end;
  gap: 10px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, .48);
  border-top: 1px solid rgba(255, 255, 255, .85);
  font-size: 11.5px;
  color: var(--ink-2);
}
#count { flex: 0 0 auto; }

/* the toast ------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 70;
  padding: 10px 17px;
  font: 700 13.5px/1 "MS W98 UI", Tahoma, Verdana, sans-serif;
  color: #ffffff;
  background: linear-gradient(180deg, #ffb0d6, #ff7ab8);
  border: 2px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 9px 22px rgba(255, 143, 192, .45);
  text-shadow: 0 1px 0 rgba(214, 105, 160, .5);
  line-height: 1.3;
  max-width: min(88vw, 420px);
  text-align: center;
}

/* phones ---------------------------------------------------------------- */

@media (max-width: 560px) {
  body { padding: 12px 8px 26px; }
  .win-body { padding: 13px 12px 14px; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 60px; padding: 12px 13px; }
  .card .t { font-size: 15px; }
  .q { font-size: 16px; }
  .row { flex-wrap: wrap; }
  .row .btn { flex: 1 1 100%; }
  .lede { font-size: 14px; }
  .att { padding: 12px 13px; }
  .att .t { font-size: 16px; }
}

@media (max-width: 360px) {
  .win-menu { gap: 11px; font-size: 11.5px; }
  .swatches i { width: 13px; height: 11px; }
  .att .box { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   THE IPOD — a white player in a clear sticker-covered case (2026-10-12).
   Supersedes the plain rules above: white faceplate with pink tint, a
   translucent case with gloss streaks, a classic iPod menu on the screen (blue
   selection bar, chevrons, scrollbar-ish track), and stickers — bear, star,
   strawberries, cake slice, Pikachu — sitting UNDER the screen and wheel so an
   overlapping corner looks tucked behind. Plus the crack in the glass.
   ========================================================================== */
.ipod-body {
  position: relative;
  width: 216px;
  padding: 11px 11px 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fdf8fc 52%, #f7edf6 100%);
  border: 2px solid #ffffff;
  border-radius: 26px;
  box-shadow: 0 16px 38px rgba(110, 70, 130, .4), inset 0 -3px 9px rgba(170, 130, 170, .16);
}
/* the clear case over the faceplate: a slightly larger shell with a visible
   plastic edge and thickness, so it reads as a case even on a white body */
.ipod-case {
  position: absolute;
  inset: -6px;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, .98);
  border-radius: 32px;
  pointer-events: none;
  background: linear-gradient(158deg, rgba(188, 208, 240, .32) 0%, rgba(232, 240, 252, .16) 30%, rgba(214, 228, 250, .1) 52%, rgba(196, 214, 244, .28) 100%);
  box-shadow:
    0 4px 10px rgba(90, 112, 150, .26),
    inset 0 0 0 1px rgba(255, 255, 255, .92),
    inset 0 0 0 3px rgba(150, 170, 205, .28),
    inset -4px -5px 12px rgba(140, 160, 195, .24),
    inset 3px 3px 6px rgba(255, 255, 255, .72);
}
.case-gloss {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(146deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .62) 5%, rgba(170, 192, 232, .24) 10%, rgba(255, 255, 255, .06) 14%, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0) 58%, rgba(172, 194, 234, .18) 70%, rgba(255, 255, 255, .5) 86%, rgba(255, 255, 255, .95) 100%);
}
.case-gloss::before {
  content: "";
  position: absolute;
  top: -30px;
  left: -34px;
  width: 88%;
  height: 58%;
  border-radius: 50%;
  transform: rotate(-25deg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .72) 26%, rgba(255, 255, 255, .12) 68%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}
.case-gloss::after {
  content: "";
  position: absolute;
  bottom: -34px;
  right: -38px;
  width: 80%;
  height: 52%;
  border-radius: 50%;
  transform: rotate(-8deg);
  background: linear-gradient(0deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .4) 48%, rgba(255, 255, 255, 0) 100%);
}
.stk {
  position: absolute;
  display: block;
  filter: drop-shadow(0 2px 2px rgba(92, 72, 112, .4));
}
.stk svg { display: block; width: 100%; height: 100%; }
.stk-bear { left: 2px; top: 152px; width: 44px; height: 44px; transform: rotate(-8deg); }
.stk-star { right: 5px; top: 142px; width: 26px; height: 26px; transform: rotate(10deg); }
.stk-star2 { left: 19px; top: 131px; width: 21px; height: 21px; transform: rotate(-12deg); }
.stk-straw1 { left: 60px; top: 262px; width: 22px; height: 22px; transform: rotate(6deg); }
.stk-straw2 { right: 9px; top: 193px; width: 22px; height: 22px; transform: rotate(-12deg); }
.stk-straw3 { left: -3px; top: 134px; width: 25px; height: 25px; transform: rotate(-16deg); }
.stk-straw4 { right: 28px; top: 129px; width: 22px; height: 22px; transform: rotate(14deg); }
.stk-spark { right: 0; top: 128px; width: 19px; height: 19px; transform: rotate(8deg); }
.stk-heart { left: 44px; top: 178px; width: 19px; height: 19px; transform: rotate(14deg); }
.stk-note { right: -4px; top: 248px; width: 26px; height: 26px; transform: rotate(-6deg); }
.stk-cake { right: 0; top: 214px; width: 46px; height: 46px; transform: rotate(5deg); }
.stk-pika { left: -6px; top: 206px; width: 62px; height: 62px; transform: rotate(-5deg); }

/* the screen: dark bezel, then the LCD */
.ipod-screen {
  position: relative;
  z-index: 1;
  padding: 4px;
  background: linear-gradient(180deg, #343c4e, #1c2230);
  border: 2px solid #ffffff;
  border-radius: 13px;
  box-shadow: inset 0 2px 6px rgba(8, 14, 26, .6), 0 1px 0 rgba(255, 255, 255, .85);
}
.ipod-lcd {
  padding: 2px 0 3px;
  background: linear-gradient(180deg, #ffffff, #eef2f9);
  border-radius: 9px;
  overflow: hidden;
}
.ipod-bar {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 52px 3px 7px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #34405c;
  background: linear-gradient(180deg, #f6f9fd, #dce4f2);
  border-bottom: 1px solid #c3cee2;
}
.ipod-title {
  margin: 3px 4px 0;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(180deg, #6ea8f0, #2f6fc4);
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgba(20, 50, 100, .5);
}
.ipod-title::after { content: "\203A"; float: right; font-weight: 400; opacity: .92; }
.ipod-artist {
  margin: 1px 4px 0;
  padding: 3px 7px;
  font-size: 10.5px;
  color: #2b3446;
  border-bottom: 1px solid #e2e8f2;
}
.ipod-artist::after { content: "\203A"; float: right; color: #97a4bc; }
.ipod-progress {
  margin: 5px 8px 3px;
  height: 5px;
  background: #d9e2f0;
  border-radius: 99px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(40, 60, 100, .3);
}
.ipod-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6ea8f0, #2f6fc4); }
.ipod-time {
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 8.5px;
  color: #55617a;
}
.ipod-vol {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 8px 0;
  padding: 3px 6px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #34405c;
  background: #eef2f9;
  border-radius: 5px;
}
.ipod-vol input { flex: 1; height: 13px; accent-color: #2f6fc4; }

/* the crack in the top-right of the glass */
.ipod-crack {
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 3;
  width: 40px;
  height: 30px;
  pointer-events: none;
}

/* the wheel */
.ipod-wheel {
  position: relative;
  z-index: 1;
  width: 108px;
  height: 108px;
  margin: 10px auto 0;
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, #f4f2f8 60%, #e7e3ef 100%);
  border: 1px solid #ffffff;
  border-radius: 50%;
  box-shadow: inset 0 1px 4px rgba(120, 100, 140, .18), 0 2px 6px rgba(120, 90, 140, .16);
}
.ipod-btn { color: #5f6a80; font-size: 10px; }
.ipod-menu { font-size: 9.5px; letter-spacing: .1em; font-weight: 700; }
.ipod-btn:hover, .ipod-center:hover { color: #e0559b; }
.ipod-center {
  width: 42px;
  height: 42px;
  background: radial-gradient(circle at 50% 36%, #ffffff, #eae7f2);
  border: 1px solid #ffffff;
  box-shadow: 0 2px 5px rgba(120, 90, 140, .3);
}
.ipod-center-heart { display: block; width: 16px; height: 16px; margin: 0 auto; }

@media (max-width: 640px) {
  .ipod-body { width: 200px; }
  .ipod-wheel { width: 100px; height: 100px; }
  .ipod-center { width: 38px; height: 38px; }
  .stk-bear { top: 144px; width: 40px; height: 40px; }
  .stk-star { top: 136px; width: 23px; height: 23px; }
  .stk-straw1 { top: 254px; left: 56px; width: 20px; height: 20px; }
  .stk-straw2 { top: 186px; }
  .stk-straw3 { top: 124px; width: 22px; height: 22px; }
  .stk-spark { top: 120px; width: 17px; height: 17px; }
  .stk-heart { top: 170px; left: 40px; }
  .stk-cake { top: 206px; width: 43px; height: 43px; }
  .stk-note { top: 238px; width: 23px; height: 23px; }
  .stk-pika { top: 198px; width: 58px; height: 58px; }
}