/* =========================================================
   AB Halloween: old iPhone (iOS 6 era) style site
   Desktop/tablet: a black iPhone 5 scaled to fit the window.
   Phones: the frame is dropped and the screen fills the display.
   ========================================================= */

:root {
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* iPhone 5 drawn at 1 CSS px = 1 iOS point (screen is 320 x 568) */
  --phone-w: 376px;
  --phone-h: 795px;
  --screen-w: 320px;
  --screen-h: 568px;
  --screen-top: 113px;

  --sb-h: 20px;            /* status bar height */
  --lock-top-pad: 10px;    /* space above the big clock */
  --safe-bottom: 0px;      /* home-indicator space on modern phones */

  --ios-bg: #cbd2d8;
  --ios-stripe: #c5ccd3;
  --nav-top: #b0bccb;
  --nav-bottom: #6d84a2;
}

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

html, body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background: #e4e4e8 radial-gradient(ellipse at 50% 35%, #fafafa 0%, #e4e4e8 55%, #c6c6cc 100%) fixed;
}

button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* =========================================================
   The iPhone body
   ========================================================= */

.iphone {
  --scale: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--phone-w);
  height: var(--phone-h);
  transform: translate(-50%, -50%) scale(var(--scale));
  border-radius: 62px;
  /* anodised slate band, seen at the very edge */
  background: linear-gradient(90deg, #232326, #55555b 5%, #333337 18%, #29292c 50%, #333337 82%, #55555b 95%, #232326);
  box-shadow:
    inset 0 0 0 1px #0b0b0c,
    inset 0 0 0 2.5px #a3a3aa,      /* polished chamfer */
    inset 0 0 0 3.5px #3a3a3e,
    0 1px 1px rgba(0, 0, 0, .25),
    0 25px 50px -12px rgba(0, 0, 0, .5),
    0 60px 100px -30px rgba(0, 0, 0, .35);
}

/* black glass front */
.face {
  position: absolute;
  inset: 4px;
  border-radius: 58px;
  background: radial-gradient(120% 60% at 50% 0%, #1c1c1f 0%, #0b0b0c 60%) #0b0b0c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 0 8px rgba(0, 0, 0, .9);
}

.camera {
  position: absolute;
  top: 28px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #6b7fa6 0 1px, #1f2638 2px, #07080c 4.5px);
  box-shadow: 0 0 0 1.5px #1c1c1e, 0 0 0 2.5px #080808;
}

.earpiece {
  position: absolute;
  top: 54px;
  left: 50%;
  width: 64px;
  height: 8px;
  margin-left: -32px;
  border-radius: 4px;
  background-color: #141416;
  background-image: radial-gradient(circle, #2e2e33 .7px, transparent 1px);
  background-size: 3px 3px;
  box-shadow: inset 0 1px 2px #000, 0 0 0 1px #1d1d20, 0 1px 0 1px rgba(255, 255, 255, .05);
}

/* side buttons */
.hw {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  background: linear-gradient(90deg, #1d1d20, #6a6a70 45%, #2a2a2e);
}

.hw-power {
  top: -4px;
  right: 66px;
  width: 56px;
  height: 5px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(#7a7a80, #2a2a2e);
  cursor: pointer;
}
.hw-power:active { top: -3px; }

.hw-mute,
.hw-vol-up,
.hw-vol-down {
  left: -4px;
  width: 5px;
  border-radius: 3px 0 0 3px;
}
.hw-mute { top: 118px; height: 24px; }
.hw-vol-up { top: 170px; height: 40px; }
.hw-vol-down { top: 224px; height: 40px; }

.home-button {
  position: absolute;
  left: 50%;
  top: calc(var(--screen-top) + var(--screen-h) + (var(--phone-h) - var(--screen-top) - var(--screen-h)) / 2);
  width: 68px;
  height: 68px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #1e1e21, #0a0a0b 70%);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .9),
    inset 0 -1px 1px rgba(255, 255, 255, .07),
    0 0 0 1px #1f1f22,
    0 1px 0 1px rgba(255, 255, 255, .06);
  cursor: pointer;
}
.home-button::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 19px;
  height: 19px;
  margin: auto;
  border: 1.5px solid rgba(255, 255, 255, .5);
  border-radius: 5px;
}
.home-button:active { background: radial-gradient(circle at 50% 30%, #141416, #050506 70%); }

/* reflection across the glass */
.glare {
  position: absolute;
  inset: 4px;
  z-index: 5;
  border-radius: 58px;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .025) 38%, rgba(255, 255, 255, 0) 38.1%);
}

/* =========================================================
   Screen
   ========================================================= */

.screen {
  position: absolute;
  left: calc((var(--phone-w) - var(--screen-w)) / 2);
  top: var(--screen-top);
  width: var(--screen-w);
  height: var(--screen-h);
  overflow: hidden;
  overflow: clip; /* can't be scrolled out of place, e.g. when the keyboard opens */
  isolation: isolate;
  background: #000;
  color: #fff;
  box-shadow: 0 0 0 2px #000, 0 0 0 3px #161618;
}

.screen.no-anim,
.screen.no-anim * { transition: none !important; }

.screen-off {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.screen.is-off .screen-off {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease, visibility 0s;
}

/* ---------- Status bar ---------- */

.statusbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--sb-h);
  margin: 0;
  padding: 0 5px;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font: bold 12px/1 var(--font);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
  transition: background-color .3s;
  -webkit-appearance: none;
  appearance: none;
}
.statusbar:focus-visible { outline: 2px solid #6fa8ff; outline-offset: -2px; }
.screen.is-unlocked .statusbar { background: var(--nav-bottom); }

.sb-left,
.sb-right {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 4px;
}
.sb-right { justify-content: flex-end; }

.sb-signal {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 10px;
}
.sb-signal i {
  width: 3px;
  border-radius: .5px;
  background: currentColor;
}
.sb-signal i:nth-child(1) { height: 2px; }
.sb-signal i:nth-child(2) { height: 4px; }
.sb-signal i:nth-child(3) { height: 6px; }
.sb-signal i:nth-child(4) { height: 8px; }
.sb-signal i:nth-child(5) { height: 10px; }

.sb-wifi { width: 15px; height: 11px; }

.sb-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}
.sb-lock { display: none; width: 9px; height: 12px; }
.screen:not(.is-unlocked) .sb-lock { display: block; }
.screen:not(.is-unlocked) .sb-time { display: none; }

.sb-battery {
  position: relative;
  width: 24px;
  height: 11px;
  margin-right: 3px;
  padding: 1px;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.sb-battery::after {
  content: "";
  position: absolute;
  top: 2.5px;
  right: -4px;
  width: 2px;
  height: 4px;
  border-radius: 0 1px 1px 0;
  background: currentColor;
}
/* low battery, iOS 6 red */
.sb-battery-level {
  display: block;
  width: 15%;
  height: 100%;
  border-radius: 1px;
  background: linear-gradient(#ff6b5e, #d0140a);
}

/* =========================================================
   Lock screen
   ========================================================= */

.lock {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #181a18;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: opacity .3s, visibility 0s;
}

.wallpaper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform .5s ease;
}

.lock-top,
.lock-bottom {
  position: relative;
  background: linear-gradient(rgba(59, 59, 59, .82), rgba(0, 0, 0, .85));
  transition: transform .4s cubic-bezier(.2, .8, .2, 1); /* sliding back in when locking */
}

.lock-top {
  padding: calc(var(--sb-h) + var(--lock-top-pad)) 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
}

.lock-time {
  display: block;
  font-size: 60px;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.5px;
}

.lock-date {
  margin-top: 2px;
  font-size: 15px;
  min-height: 18px;
}

/* iOS 6 style notification under the clock */
.lock-alert {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 8px auto;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  background: linear-gradient(rgba(64, 64, 68, .84), rgba(14, 14, 16, .88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 8px rgba(0, 0, 0, .5);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
  /* "backwards" so that once it has slid in, swiping can move it */
  animation: lock-alert-in .5s ease-out .6s backwards;
  touch-action: none;
  cursor: grab;
}
.lock-alert:active { cursor: grabbing; }
.lock-alert-icon {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(#fff, #e6e6e6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  text-align: center;
  text-shadow: none;
}
.lock-alert-day {
  height: 9px;
  background: linear-gradient(#ea4b3f, #b8180f);
  color: #fff;
  font: bold 7px/9px var(--font);
  letter-spacing: .3px;
}
.lock-alert-date {
  color: #1d1d1d;
  font: bold 17px/21px var(--font);
}
.lock-alert-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.lock-alert-text b { font-size: 15px; }
.lock-alert-text span { color: rgba(255, 255, 255, .9); font-size: 13px; }
.lock-alert-when {
  align-self: flex-start;
  color: rgba(255, 255, 255, .65);
  font-size: 11px;
}
@keyframes lock-alert-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.lock-bottom {
  display: flex;
  justify-content: center;
  padding: 24px 0 calc(24px + var(--safe-bottom));
  border-top: 1px solid rgba(255, 255, 255, .2);
}

/* ---------- slide to unlock ---------- */

.slider {
  position: relative;
  display: flex;
  align-items: center;
  width: 90%;
  max-width: 340px;
  height: 54px;
  padding: 2px;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  background: linear-gradient(#030303, #232323);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .12);
  touch-action: none;
  cursor: grab;
}

.slider-knob {
  position: relative;
  z-index: 1;
  display: grid;
  flex: none;
  place-items: center;
  width: 80px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(#fafafa, #dadada 50%, #c4c4c4 51%, #a3a3a3);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .6);
  color: #7d7d7d;
  cursor: grab;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.slider-knob:active { cursor: grabbing; }
.slider-knob:focus-visible { outline: 2px solid #6fa8ff; outline-offset: 2px; }
.slider-knob svg {
  width: 30px;
  height: 22px;
  filter: drop-shadow(0 1px 0 #fff);
}

.slider-label {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  font-size: 20px;
  letter-spacing: .2px;
  pointer-events: none;
  color: #5b5b5b;
  background: linear-gradient(100deg, #5b5b5b 0%, #5b5b5b 40%, #fff 50%, #5b5b5b 60%, #5b5b5b 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2.6s linear infinite;
  transition: opacity .25s;
}

@keyframes shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

/* ---------- unlock animation ---------- */

.screen.is-unlocked .lock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease .15s, visibility 0s linear .45s;
}
.screen.is-unlocked .lock-top,
.screen.is-unlocked .lock-bottom { transition: transform .4s cubic-bezier(.5, 0, .75, 0); } /* sliding away */
.screen.is-unlocked .lock-top { transform: translateY(-100%); }
.screen.is-unlocked .lock-bottom { transform: translateY(100%); }
.screen.is-unlocked .wallpaper { transform: scale(1.06); }

/* =========================================================
   Unlocked app (iOS 6 grouped-table look)
   ========================================================= */

.app {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  color: #000;
  background-color: var(--ios-bg);
  background-image: repeating-linear-gradient(90deg, var(--ios-bg) 0 4px, var(--ios-stripe) 4px 7px);
  opacity: 0;
  visibility: hidden;
  transform: scale(.94);
  transition: opacity .3s, transform .3s, visibility 0s linear .3s;
}
.screen.is-unlocked .app {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .4s ease .15s, transform .4s ease .15s, visibility 0s;
}

.navbar {
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: calc(44px + var(--sb-h));
  padding: var(--sb-h) 70px 0;
  background: linear-gradient(var(--nav-top), var(--nav-bottom));
  border-bottom: 1px solid #2d3642;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .2);
}

.navbar-title {
  margin: 0;
  overflow: hidden;
  color: #fff;
  font: bold 20px/1.2 var(--font);
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
}

.navbar-lock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: #fff;
  font: bold 20px/1.2 var(--font);
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
  cursor: pointer;
}
.navbar-lock svg {
  width: 14px;
  height: 18px;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .5));
}
.navbar-lock:active { opacity: .6; }
.navbar-lock:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

/* Bars and buttons: a tap is always a tap, never a text selection or link preview. */
.statusbar,
.navbar,
.row,
.ig-card,
.breply-button,
.bdelete,
.send-button {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* iOS 6 arrow-shaped back button */
.back-button {
  position: absolute;
  left: 17px;
  top: calc(var(--sb-h) + 7px);
  z-index: 0;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 9px 0 4px;
  border: 1px solid #2f3841;
  border-left: 0;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(#8fa4c1, #4b6e9d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 0 rgba(255, 255, 255, .25);
  color: #fff;
  font: bold 12px/1 var(--font);
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .45);
}
.back-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
  width: 21px;
  height: 21px;
  border: solid #2f3841;
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 4px;
  background: linear-gradient(135deg, #8fa4c1, #4b6e9d);
  transform: translate(-50%, -50%) rotate(45deg);
}
.back-button:active,
.back-button:active::before { background: linear-gradient(135deg, #6a83a6, #344f74); }

.app-scroll {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(24px + var(--safe-bottom));
  scrollbar-width: none;
}
.app-scroll::-webkit-scrollbar { display: none; }

/* ---------- home ---------- */

.welcome {
  margin: 6px 0 20px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}
.welcome span { display: block; }
.welcome-ab {
  font-size: 48px;
  letter-spacing: -1px;
}
.welcome-sub {
  margin-top: 6px;
  padding-left: 6px; /* balances the letter-spacing after the last letter */
  font-size: 18px;
  letter-spacing: 6px;
}

/* glossy iOS 6 icon */
.row-icon {
  position: relative;
  flex: none;
  overflow: hidden;
}
.row-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  border-radius: 0 0 60% 60% / 0 0 25% 25%;
  background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .12));
  pointer-events: none;
}

.group {
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid #999;
  border-radius: 8px;
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #999;
  color: #000;
  text-decoration: none;
}
.row:last-child { border-bottom: 0; }
.row::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 4px 0 auto;
  border: solid #7f7f7f;
  border-width: 2.5px 2.5px 0 0;
  transform: rotate(45deg);
}
.row:active {
  background: linear-gradient(#058cf5, #015fe6);
  color: #fff;
}
.row:active::after { border-color: #fff; }

.row-label {
  font-size: 13px;
  font-weight: 600;
}

/* gray text on the right of a row, e.g. "Coming soon" (iOS 6 detail text) */
.row-detail {
  margin-left: auto;
  color: #6f7b8f;
  font-size: 13px;
}
.row--detail::after { margin-left: 4px; }

/* small red "18+" pill next to RSVP, like an iOS 6 badge */
.age-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  border: 1.5px solid #fff;
  border-radius: 9px;
  background: linear-gradient(#f2645c, #c8170e);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 13px;
  vertical-align: 1px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}
.row:active .row-detail { color: #fff; }

.row-icon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 6px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.row-icon svg { width: 100%; height: 100%; display: block; }
.row-icon--rsvp { background: linear-gradient(#ffad4a, #e0640b); }
.row-icon--bulletin { background: linear-gradient(#a36ad6, #5e2a96); }
.row-icon--photos { background: linear-gradient(#8fd0fb, #2f8fdc); }
.row-icon--game { background: linear-gradient(#6a4a9c, #1f1036); }
.row-icon--notes { background: linear-gradient(#fff7b0, #f3d548); }

/* ---------- inner pages ---------- */

.page-title {
  margin: 0 0 16px;
  padding: 0 4px;
  font-size: 28px;
  font-weight: normal;
  line-height: 32px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}

.card {
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #aaa;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7);
  font-size: 14px;
  line-height: 1.4;
}
.card h3 { margin: 0 0 4px; font-size: 16px; }
.card p { margin: 0; }

.page-sub {
  margin: -10px 0 14px;
  padding: 0 4px;
  color: #4c566c;
  font-size: 13px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}

/* ---------- Bulletin (anonymous board) ---------- */

.composer {
  margin-bottom: 16px;
  padding: 8px;
  border: 1px solid #aaa;
  border-radius: 8px;
  background: linear-gradient(#f7f8fa, #e4e8ee);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

.composer-input {
  display: block;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #a9adb5;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
  color: #000;
  font: 16px/1.3 var(--font); /* 16px or more stops iPhones zooming in on tap */
  resize: none;
  -webkit-appearance: none;
  appearance: none;
}
.composer-input:focus { outline: none; border-color: #6b8fc4; }

.composer-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.composer-as { color: #4c566c; font-size: 12px; }
.composer-as b { color: #000; }
.composer-count {
  margin-left: auto;
  color: #8a8f99;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.composer-count + .send-button { margin-left: 0; }

/* iOS 6 Messages-style "Send" button */
.send-button {
  flex: none;
  min-width: 64px;
  height: 30px;
  margin-left: auto;
  padding: 0 14px;
  border: 1px solid #1d4f9e;
  border-radius: 15px;
  background: linear-gradient(#8ab8f7, #3d7fe0 50%, #256ad6 51%, #3b80e8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .25);
  color: #fff;
  font: bold 15px/1 var(--font);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .35);
  cursor: pointer;
}
.send-button:active { background: linear-gradient(#5e93dd, #1f5cc0); }
.send-button:disabled { opacity: .55; cursor: default; }

.composer-error {
  margin: 6px 2px 0;
  color: #c10f0f;
  font-size: 12px;
}

.bstatus {
  margin: 8px 0 16px;
  color: #4c566c;
  font-size: 14px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}
.bstatus:empty { display: none; }

.bpost {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #aaa;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

.bpost-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bavatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(hsl(var(--hue) 60% 62%), hsl(var(--hue) 55% 40%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 1px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.bavatar svg { width: 100%; height: 100%; margin-top: 2px; }

.bauthor { font-size: 14px; }
.byou { color: #8a8f99; font-weight: normal; }
.btime { margin-left: auto; color: #8a8f99; font-size: 12px; }

/* host only (666) */
.bdelete {
  padding: 2px 0 2px 4px;
  border: 0;
  background: none;
  color: #c10f0f;
  font: bold 12px/1.2 var(--font);
  cursor: pointer;
}

.bbody {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.breplies:not(:empty) {
  margin-top: 10px;
  padding-left: 10px;
  border-left: 2px solid #d5dbe3;
}
.breply + .breply { margin-top: 10px; }
.breply .bavatar { width: 22px; height: 22px; }
.breply .bbody { font-size: 14px; }

.breply-button {
  margin-top: 8px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: #385487;
  font: bold 13px/1.2 var(--font);
  cursor: pointer;
}

.composer--reply { margin: 8px 0 0; padding: 6px; }
.composer--reply .composer-input { min-height: 36px; }

.bmore {
  display: block;
  margin: 0 auto 16px;
  padding: 8px 16px;
  border: 1px solid #8e96a3;
  border-radius: 8px;
  background: linear-gradient(#fdfdfd, #dfe3e8);
  color: #385487;
  font: bold 14px/1 var(--font);
  cursor: pointer;
}

/* ---------- Instagram page ---------- */

/* a page that exactly fills the screen under the nav bar and never scrolls */
.page--fill {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.app-scroll.no-scroll {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.ig-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  border: 1px solid #aaa;
  border-radius: 10px;
  background: linear-gradient(#fff, #f1f3f6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7), inset 0 1px 0 #fff;
  color: #000;
  text-decoration: none;
}
.ig-card:active { background: linear-gradient(#e6ecf3, #d8e0ea); }

.ig-avatar {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: 4px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(#ffb04d, #c4520a);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  color: #fff;
  font: bold 28px/1 var(--font);
  letter-spacing: -1px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .35);
}
.ig-avatar--djs {
  background: linear-gradient(#a36ad6, #5e2a96);
  font-size: 22px;
}

.ig-name {
  font-size: 20px;
  font-weight: bold;
}

.ig-handle {
  color: #3f729b;
  font-size: 14px;
}

.ig-follow {
  margin-top: 8px;
  padding: 9px 16px;
  border: 1px solid #2a5a8c;
  border-radius: 5px;
  background: linear-gradient(#6a9fd4, #2e6aa8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 1px rgba(0, 0, 0, .2);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .35);
}

/* ---------- Halloween Game page ---------- */

.screen[data-page="game"] .app-scroll { padding: 6px 6px calc(4px + var(--safe-bottom)); }
.page--game { gap: 4px; }

.game-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #2d1f45;
  border-radius: 6px;
  background: #000;
}

/* The game at its own size (970x580), placed and scaled to fit by fitGame() in main.js. */
.game-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 970px;
  height: 580px;
  border: 0;
  background: #000;
  transform: scale(.3);
  transform-origin: 0 0;
}

.game-credit {
  margin: 0;
  color: #4c566c;
  font-size: 10px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}

/* Full-screen game: no bars, edge to edge (phone held sideways, or the full-screen button). */
.screen.game-full .statusbar,
.screen.game-full .navbar,
.screen.game-full .game-credit { display: none; }
.screen.game-full .app-scroll { padding: 0; }
.screen.game-full .game-stage { border: 0; border-radius: 0; }
.game-stage:fullscreen { border: 0; border-radius: 0; }
.game-stage:-webkit-full-screen { width: 100%; height: 100%; border: 0; border-radius: 0; }

/* Turn-your-phone messages: "Please flip your phone" (game, held upright) and
   "Please turn your phone upright" (anywhere else, held sideways). */
.turn-prompt {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  /* same light pinstripe background as the rest of the site */
  background-color: var(--ios-bg);
  background-image: repeating-linear-gradient(90deg, var(--ios-bg) 0 4px, var(--ios-stripe) 4px 7px);
  color: #2b2f36;
  font-family: var(--font);
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}
.turn-prompt p { margin: 6px 0 0; font-size: 22px; font-weight: bold; }
.turn-prompt small { color: #4c566c; font-size: 14px; }
.turn-prompt-phone {
  width: 44px;
  height: 70px;
  animation: turn-sideways 2.4s ease-in-out infinite;
}
.upright-prompt .turn-prompt-phone { animation-name: turn-upright; }
@keyframes turn-sideways {
  0%, 25% { transform: rotate(0); }
  55%, 85% { transform: rotate(-90deg); }
  100% { transform: rotate(0); }
}
@keyframes turn-upright {
  0%, 25% { transform: rotate(-90deg); }
  55%, 85% { transform: rotate(0); }
  100% { transform: rotate(-90deg); }
}

.game-flip {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* covers everything; shown by keepUpright() in main.js */
.upright-prompt {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
html.ask-upright .upright-prompt { display: flex; }

/* round buttons over the game: full screen (bottom right) and leave (top left) */
.game-button {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  cursor: pointer;
}
.game-button svg { width: 15px; height: 15px; }
.game-expand { right: 8px; bottom: 8px; }
.game-exit {
  top: 8px;
  left: calc(8px + env(safe-area-inset-left, 0px));
  display: none;
}
.screen.game-full .game-exit { display: grid; }
.game-stage:fullscreen .game-exit { display: grid; }
.game-stage:-webkit-full-screen .game-exit { display: grid; }
/* magnifier (top right): lights up orange while zoomed in */
.game-zoom { top: 8px; right: calc(8px + env(safe-area-inset-right, 0px)); }
.game-stage.is-zoomed .game-zoom { border-color: #fff; background: rgba(224, 100, 11, .9); }
.game-stage.is-zoomed .zoom-plus-bar { display: none; }
.screen.game-full .game-expand { display: none; }
.game-stage:fullscreen .game-expand { display: none; }
.game-stage:-webkit-full-screen .game-expand { display: none; }

/* Computers: the drawn iPhone turns sideways while the game is open; the screen
   inside turns back the other way so everything stays upright. */
.iphone.is-landscape {
  transform: translate(-50%, -50%) rotate(-90deg) scale(var(--scale));
}
.iphone.is-landscape .screen {
  left: calc((var(--phone-w) - var(--screen-h)) / 2);
  top: calc(var(--screen-top) + (var(--screen-h) - var(--screen-w)) / 2);
  width: var(--screen-h);
  height: var(--screen-w);
  transform: rotate(90deg);
}

/* ---------- Notes (iOS 6 Notes look, read-only) ---------- */

.screen[data-page="notes"],
.screen[data-page="note"] {
  --note-font: "Marker Felt", "Noteworthy", "Chalkboard SE", "Comic Sans MS", cursive;
  --note-ink: #1d1a14;
  --note-red: #b23b2b;      /* "Today" and the date */
  --note-line: #d9d2a2;     /* ruled lines */
  --note-margin: #e2a99b;   /* double red margin */
  --note-paper:
    linear-gradient(90deg, transparent 21px, var(--note-margin) 21px 22px, transparent 22px 24px, var(--note-margin) 24px 25px, transparent 25px),
    var(--note-rules),
    linear-gradient(#fdf9cb, #f7ee9e);
  /* dark chocolate leather */
  --leather:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px),
    linear-gradient(#6c4b33, #4a301d 55%, #3a2515);
  --leather-button: linear-gradient(#6e4d35, #3e2716);
}

/* plain black status bar, like the real app */
.screen.is-unlocked[data-page="notes"] .statusbar,
.screen.is-unlocked[data-page="note"] .statusbar { background: #000; }

.screen[data-page="notes"] .navbar,
.screen[data-page="note"] .navbar {
  background: var(--leather);
  border-bottom: 1px solid #1e130a;
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, .18), 0 2px 4px rgba(0, 0, 0, .45);
}
/* a note: its title sits left, next to the Notes button, cut off with "…" */
.screen[data-page="note"] .navbar {
  justify-content: flex-start;
  padding-left: 96px;
  padding-right: 58px;
}

.screen[data-page="note"] .back-button,
.screen[data-page="notes"] .back-button,
.screen[data-page="note"] .back-button::before,
.screen[data-page="notes"] .back-button::before {
  border-color: #1e130a;
  background: linear-gradient(135deg, #6e4d35, #3e2716);
}
.screen[data-page="note"] .back-button,
.screen[data-page="notes"] .back-button {
  background: var(--leather-button);
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, .2), 0 1px 0 rgba(255, 220, 180, .12);
}

/* share button (note view) */
.nav-icon-button {
  position: absolute;
  right: 8px;
  top: calc(var(--sb-h) + 7px);
  display: grid;
  place-items: center;
  width: 42px;
  height: 30px;
  padding: 0;
  border: 1px solid #1e130a;
  border-radius: 5px;
  background: var(--leather-button);
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, .2), 0 1px 0 rgba(255, 220, 180, .12);
  color: #fff;
  cursor: pointer;
}
.nav-icon-button svg {
  width: 21px;
  height: 18px;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .6));
}
.nav-icon-button:active { background: linear-gradient(#4e3422, #2a190c); }

/* soft yellow ruled paper with the double red margin; it scrolls with the text */
.screen[data-page="notes"] .app-scroll,
.screen[data-page="note"] .app-scroll {
  padding: 0 0 calc(30px + var(--safe-bottom));
  background: var(--note-paper);
  background-attachment: local;
}
.screen[data-page="notes"] { --note-rules: repeating-linear-gradient(transparent 0 43px, var(--note-line) 43px 44px); }
.screen[data-page="note"] { --note-rules: repeating-linear-gradient(transparent 0 29px, var(--note-line) 29px 30px); }

/* the list of notes: title, time, arrow */
.notes-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.note-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px 0 34px;
  color: var(--note-ink);
  font: 21px/44px var(--note-font);
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.note-row:active { background: rgba(156, 90, 60, .15); }
.note-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-when {
  color: var(--note-red);
  font: 15px var(--font);
}
.note-row::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border: solid #b48b6a;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

/* one note */
.note-paper {
  min-height: 100%;
  padding: 0 14px 0 34px;
  color: var(--note-ink);
  font: 23px/30px var(--note-font);
}
.note-paper h3,
.note-paper p {
  margin: 0;
  font: inherit;
}
/* exactly two ruled lines tall (lines are 30px apart), so the note's text below
   lands on the lines; "Today" and the date sit on the second line */
.note-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  height: 60px;
  padding-top: 30px;
  color: var(--note-red);
  font: 15px/30px var(--font);
}
.note-head b { font-weight: 600; }

/* Open Chat: paused / banned notice and the host's Pause button */
.bnotice {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #c9a94a;
  border-radius: 8px;
  background: linear-gradient(#fff6c8, #f6e49a);
  color: #5a4510;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.chat-blocked .breply-button,
.chat-blocked .composer--reply { display: none; }

.bhost-button {
  display: block;
  width: 100%;
  margin: -4px 0 12px;
  padding: 9px 12px;
  border: 1px solid #8e96a3;
  border-radius: 8px;
  background: linear-gradient(#fdfdfd, #dfe3e8);
  box-shadow: inset 0 1px 0 #fff;
  color: #b0281c;
  font: bold 14px/1 var(--font);
  cursor: pointer;
}
.bhost-button:active { background: linear-gradient(#e4e8ed, #cfd5dc); }

/* ---------- RSVP ---------- */

/* the count and the date */
.rsvp-head {
  margin: 12px 0 30px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}
.rsvp-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}
.rsvp-count b {
  font-size: 58px;
  line-height: 1;
  letter-spacing: -1px;
}
.rsvp-count span {
  margin-top: 6px;
  color: #4c566c;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.rsvp-when {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 8px 14px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 17px;
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  color: #2b3445;
  font-size: 14px;
  font-weight: bold;
}
.rsvp-when .age-badge { margin-left: 0; }

/* section headings, iOS 6 grouped-table style */
.group-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 12px 8px;
  color: #4c566c;
  font-size: 15px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}
.group-title small { font-size: 12px; font-weight: normal; }
.group-count {
  margin-left: auto;
  color: #6f7b8f;
  font-size: 13px;
}

/* iOS 6 grouped table: white cells with a bold label on the left */
.form-group,
.rsvp-list,
.rsvp-full {
  margin: 0;
  padding: 0;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  list-style: none;
}
.field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 14px;
  border-bottom: 1px solid #d6d6d6;
}
.field:last-child { border-bottom: 0; }
.field-label {
  flex: none;
  width: 74px;
  font-size: 16px;
  font-weight: bold;
}
.field-input {
  flex: 1;
  min-width: 0;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #385487;
  font: 17px var(--font); /* 16px or more stops iPhones zooming in on tap */
  -webkit-appearance: none;
  appearance: none;
}
.field-input:focus { outline: none; }
.field-input::placeholder { color: #b3b3b3; }
.field--switch { cursor: pointer; }
.field--switch .field-label { flex: 1; width: auto; }

/* iOS 6 ON/OFF switch */
.switch-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ios-switch {
  position: relative;
  flex: none;
  width: 77px;
  height: 27px;
  overflow: hidden;
  border: 1px solid #a3a3a3;
  border-radius: 14px;
  background: linear-gradient(#e2e2e2, #fdfdfd);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25);
  transition: background .2s, border-color .2s;
}
.ios-switch::after {
  content: "OFF";
  position: absolute;
  top: 0;
  right: 10px;
  color: #7f7f7f;
  font: bold 15px/27px var(--font);
}
.ios-switch::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -1px;
  left: -1px;
  width: 27px;
  height: 27px;
  border: 1px solid #a3a3a3;
  border-radius: 50%;
  background: linear-gradient(#cfcfcf, #fcfcfc);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transition: left .2s ease;
}
.switch-input:checked + .ios-switch {
  border-color: #1d5bb8;
  background: linear-gradient(#1f6fe0, #59a2ff);
}
.switch-input:checked + .ios-switch::after {
  content: "ON";
  right: auto;
  left: 14px;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}
.switch-input:checked + .ios-switch::before { left: 49px; border-color: #1d5bb8; }
.switch-input:focus-visible + .ios-switch { outline: 2px solid #6fa8ff; outline-offset: 2px; }

.form-note {
  margin: 10px 18px 20px;
  color: #4c566c;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}
.form-error {
  margin: -6px 12px 16px;
  color: #c10f0f;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

/* big iOS 6 blue button */
.big-button {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0 0 36px;
  border: 1px solid #1d4f9e;
  border-radius: 9px;
  background: linear-gradient(#8ab8f7, #3d7fe0 50%, #256ad6 51%, #3b80e8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .25);
  color: #fff;
  font: bold 18px/1 var(--font);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .35);
  cursor: pointer;
}
.big-button:active { background: linear-gradient(#5e93dd, #1f5cc0); }
.big-button:disabled { opacity: .6; cursor: default; }

/* "Thank you for RSVPing!" */
.rsvp-done {
  margin: 0 0 36px;
  padding: 24px 18px 14px;
  border: 1px solid #aaa;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  text-align: center;
}
.rsvp-check {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(#7fd36b, #2f9a1e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .3);
  color: #fff;
}
.rsvp-check svg { width: 27px; height: 27px; }
.rsvp-thanks { margin: 12px 0 8px; font-size: 21px; }
.rsvp-done-text { margin: 0 0 8px; color: #4c566c; font-size: 15px; line-height: 1.45; }
.link-button {
  margin-top: 4px;
  padding: 10px;
  border: 0;
  background: none;
  color: #2a5db0;
  font: bold 15px var(--font);
  cursor: pointer;
}

/* The lists: about six names show, the rest scroll inside the box. A fade at the
   bottom shows when there are more below (js/rsvp.js sets .more-below). */
.scroll-box {
  position: relative;
  margin-bottom: 28px;
}
.rsvp-list,
.rsvp-full {
  max-height: 336px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.scroll-box::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  left: 1px;
  height: 44px;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.scroll-box.more-below::after { opacity: 1; }

.rsvp-guest,
.rsvp-full-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 14px;
  border-bottom: 1px solid #e2e2e2;
  font-size: 17px;
  font-weight: bold;
}
.rsvp-guest:last-child,
.rsvp-full-row:last-child { border-bottom: 0; }

/* round initial, like iOS Contacts */
.rsvp-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)), var(--avatar, #8e96a3);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .15);
  color: #fff;
  font-size: 16px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}
.rsvp-you {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 10px;
  background: linear-gradient(#8ab8f7, #3b80e8);
  color: #fff;
  font-size: 12px;
}
.rsvp-status {
  margin: -16px 0 28px;
  color: #4c566c;
  font-size: 15px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}
.rsvp-status:empty { display: none; }

.rsvp-closed .rsvp-form,
.rsvp-closed .rsvp-done,
.rsvp-closed .scroll-box,
.rsvp-closed .group-title { display: none; }
.rsvp-closed .rsvp-status { margin-top: 0; }

.rsvp-host { margin-top: 4px; }
.rsvp-full-text { flex: 1; min-width: 0; }
.rsvp-full-text b { display: block; font-size: 16px; }
.rsvp-full-text small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #6f7b8f;
  font-size: 13px;
  font-weight: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rsvp-remove {
  flex: none;
  padding: 6px 10px;
  border: 1px solid #a8261b;
  border-radius: 6px;
  background: linear-gradient(#ef6a5e, #c8261b);
  color: #fff;
  font: bold 13px var(--font);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
  cursor: pointer;
}
.rsvp-copy { margin: -16px 0 12px; color: #2a5db0; }

/* iOS 6 action sheet: slides up from the bottom of the screen */
.action-sheet {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, .45);
}
.action-sheet-panel {
  width: 100%;
  padding: 12px 18px calc(18px + var(--safe-bottom));
  border-top: 1px solid rgba(255, 255, 255, .35);
  background: linear-gradient(rgba(74, 82, 96, .95), rgba(28, 32, 40, .97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  animation: sheet-up .25s ease-out;
}
.action-sheet-title {
  margin: 0 0 10px;
  color: #fff;
  font-size: 13px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
}
.action-sheet-buttons { display: flex; flex-direction: column; gap: 8px; }
.sheet-button {
  height: 44px;
  border: 1px solid rgba(0, 0, 0, .6);
  border-radius: 8px;
  background: linear-gradient(#fdfdfd, #dadde2 50%, #c9ccd3 51%, #dcdfe4);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(255, 255, 255, .15);
  color: #1c2433;
  font: bold 16px var(--font);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.sheet-button--destructive {
  background: linear-gradient(#f27b72, #d9372b 50%, #c8251a 51%, #d43a2f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .4);
}
.sheet-button--cancel {
  margin-top: 6px;
  background: linear-gradient(#50545c, #2b2e34 50%, #212328 51%, #2b2e34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}

/* ---------- Photo Gallery (iOS 6 Photos look) ---------- */

/* the grid: white, square thumbnails four across with thin gaps */
.screen[data-page="gallery"] .app-scroll {
  padding: 4px 4px calc(16px + var(--safe-bottom));
  background: #fff;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.photo-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: #e3e5e8;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-thumb:active img { opacity: .7; }
/* video: camera icon and length on a dark strip along the bottom */
.thumb-video {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 16px;
  padding: 0 4px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));
  color: #fff;
  font: bold 10px/1 var(--font);
}
.thumb-video svg { width: 14px; height: 9px; }
.photo-count {
  margin: 14px 0 0;
  color: #6d7480;
  font-size: 15px;
  text-align: center;
}

/* the viewer: full screen black, translucent bars that hide with a tap */
.screen[data-page="photo"] .navbar { display: none; }
.screen[data-page="photo"] .app-scroll { padding: 0; overflow: hidden; background: #000; }
.screen.is-unlocked[data-page="photo"] .statusbar { background: rgba(0, 0, 0, .55); }

.page--viewer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
}
/* the row of photos; gallery.js slides it along under your finger */
.viewer-track {
  --gap: 20px;
  display: flex;
  gap: var(--gap);
  height: 100%;
  touch-action: none;
  will-change: transform;
  cursor: grab;
}
.viewer-track.is-dragging { cursor: grabbing; }
.slide {
  position: relative;
  display: grid;
  flex: 0 0 100%;
  place-items: center;
  height: 100%;
  overflow: hidden;
}
.slide-img,
.slide-video {
  grid-area: 1 / 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.slide-video { width: 100%; height: 100%; background: #000; }
.slide.is-playing .slide-poster,
.slide.is-playing .slide-play { display: none; }
/* big round play button on videos */
.slide-play {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 0 0 0 4px;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  color: #fff;
  cursor: pointer;
}
.slide-play svg { width: 36px; height: 36px; }

.viewer-top,
.viewer-scrub,
.viewer-bottom {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  background: linear-gradient(rgba(42, 42, 44, .78), rgba(0, 0, 0, .78));
  transition: opacity .25s;
}
.page--viewer.bars-hidden .viewer-top,
.page--viewer.bars-hidden .viewer-scrub,
.page--viewer.bars-hidden .viewer-bottom {
  opacity: 0;
  pointer-events: none;
}
.viewer-top {
  top: 0;
  justify-content: center;
  height: calc(44px + var(--sb-h));
  padding-top: var(--sb-h);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.viewer-title {
  font: bold 18px/1 var(--font);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
}
/* iOS 6 black arrow-shaped back button */
.viewer-back {
  position: absolute;
  left: 17px;
  top: calc(var(--sb-h) + 7px);
  z-index: 0;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 9px 0 4px;
  border: 1px solid rgba(0, 0, 0, .8);
  border-left: 0;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(#5b5d62, #2a2b2e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  color: #fff;
  font: bold 12px/1 var(--font);
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
}
.viewer-back::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
  width: 21px;
  height: 21px;
  border: solid rgba(0, 0, 0, .8);
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 4px;
  background: linear-gradient(135deg, #5b5d62, #2a2b2e);
  transform: translate(-50%, -50%) rotate(45deg);
}
.viewer-back:active,
.viewer-back:active::before { background: linear-gradient(135deg, #3c3e42, #18191b); }

/* frames of the video to drag through */
.viewer-scrub {
  top: calc(44px + var(--sb-h));
  gap: 8px;
  height: 46px;
  padding: 0 10px;
}
.scrub-time {
  flex: none;
  width: 34px;
  font: 11px/1 var(--font);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.scrub-strip {
  position: relative;
  flex: 1;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 3px;
  background-color: #222;
  background-size: 100% 100%;
  touch-action: none;
  cursor: ew-resize;
}
.scrub-head {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 0;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, .8);
  pointer-events: none;
}

.viewer-bottom {
  bottom: 0;
  justify-content: space-around;
  height: calc(44px + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.viewer-btn {
  display: grid;
  place-items: center;
  width: 54px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .6));
  cursor: pointer;
}
.viewer-btn svg { width: 22px; height: 22px; }
.viewer-btn:active { opacity: .5; }
.icon-pause,
.page--viewer.is-playing .icon-play { display: none; }
.page--viewer.is-playing .icon-pause { display: block; }

/* small rounded message in the middle of the screen, e.g. "Link Copied" */
.hud {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 60;
  min-width: 150px;
  max-width: 80%;
  padding: 16px 18px;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  font: bold 16px/1.3 var(--font);
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
  pointer-events: none;
}

/* iPhone only: appears if the Instagram app didn't open */
.ig-fallback {
  position: absolute;
  left: 50%;
  bottom: calc(18px + var(--safe-bottom));
  z-index: 3;
  width: max-content;
  max-width: 90%;
  padding: 9px 14px;
  transform: translateX(-50%);
  border-radius: 16px;
  background: rgba(0, 0, 0, .78);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

/* =========================================================
   Phones: no frame, the screen is the whole display
   (keep this query in sync with PHONE_QUERY in js/main.js)
   ========================================================= */

@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
  :root {
    /* old-iPhone status bar, pushed below the notch when there is one */
    --sb-h: calc(20px + env(safe-area-inset-top, 0px));
    --lock-top-pad: 16px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  body { background: #000; }

  .iphone {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
    border-radius: 0;
    background: #000;
    box-shadow: none;
  }

  .face,
  .hw,
  .home-button,
  .glare { display: none; }

  .statusbar { padding-top: env(safe-area-inset-top, 0px); }

  .screen {
    inset: 0;
    width: auto;
    height: auto;
    box-shadow: none;
  }

  .lock-time { font-size: min(72px, 18.75vw); }
}

/* phones: turning sideways fills the screen on its own, so no full-screen button;
   held upright, the game asks to be turned */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
  .game-expand { display: none; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .game-flip { display: flex; }
  .game-zoom { display: none; }
  .game-stage { border-color: transparent; background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}