/* ==========================================================================
   Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button {
  font: inherit;
}

.page {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-7);
}

/* ==========================================================================
   Typography and layout helpers
   ========================================================================== */

.heading-xl { font-size: var(--font-size-xxl); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.heading-lg { font-size: var(--font-size-xl); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.heading-md { font-size: var(--font-size-lg); font-weight: 600; line-height: 1.3; }
.heading-sm { font-size: var(--font-size-md); font-weight: 600; }

.text-secondary { color: var(--color-text-secondary); }
.text-small { font-size: var(--font-size-sm); }
.center { text-align: center; }

.stack-sm > * + * { margin-top: var(--space-2); }
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}
.link:hover { text-decoration: underline; }

.back-link {
  display: inline-block;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
}
.back-link:hover { color: var(--color-text); }

.badge {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  vertical-align: middle;
}

/* ==========================================================================
   Navbar
   ========================================================================== */

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--navbar-height);
  padding: 0 var(--space-5);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.navbar__link {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
}

.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }

.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  width: 240px;
  padding: var(--space-4);
  background: var(--color-background);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.menu__name { font-weight: 600; }
.menu__email { color: var(--color-text-secondary); font-size: var(--font-size-sm); margin-bottom: var(--space-3); word-break: break-all; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 700;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;
}
.btn:active { transform: scale(0.98); }
.btn--block { width: 100%; }
.btn--small { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); }

.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--primary:active { background: var(--color-primary-pressed); }

.btn--ghost { background: transparent; border-color: var(--color-text); color: var(--color-text); }
.btn--ghost:hover { background: var(--color-surface); }

.btn--google {
  background: var(--color-background);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn--google:hover { background: var(--color-surface); }

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.divider::before,
.divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

.btn--danger-ghost { background: transparent; color: var(--color-error); }
.btn--danger-ghost:hover { background: var(--color-error-tint); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-background);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  text-decoration: none;
  cursor: pointer;
}
.icon-btn:hover:not(:disabled) { border-color: var(--color-text); }
.icon-btn--danger { color: var(--color-error); }
.icon-btn--danger:hover { border-color: var(--color-error); background: var(--color-error-tint); }

/* ==========================================================================
   Forms
   ========================================================================== */

.surface {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-background);
  box-shadow: var(--shadow-soft);
}

.field { display: block; }

.field__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.field__input {
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  color: var(--color-text);
  background: var(--color-background);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field__input:focus {
  outline: none;
  border-color: var(--color-text);
  box-shadow: 0 0 0 1px var(--color-text);
}
.field__input--textarea { resize: vertical; min-height: 88px; }

.field__file { width: 100%; font-size: var(--font-size-sm); }
.field__file::file-selector-button {
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.field__hint {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.alert {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.alert--info { background: var(--color-primary-tint); color: var(--color-primary-pressed); }
.alert--success { background: var(--color-success-tint); color: var(--color-success); }
.alert--error { background: var(--color-error-tint); color: var(--color-error); }

/* ==========================================================================
   Auth
   ========================================================================== */

.auth { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-4); }
.auth__hero { display: flex; flex-direction: column; gap: var(--space-2); }
.auth__switch { text-align: center; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.auth__switch a { color: var(--color-primary); font-weight: 600; }

/* ==========================================================================
   Home
   ========================================================================== */

.join { display: flex; gap: var(--space-2); }

.code-input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.code-input:focus { outline: none; border-color: var(--color-text); box-shadow: 0 0 0 1px var(--color-text); }
.code-input::placeholder { color: var(--color-border-strong); }

.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary), #a24ce6);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s var(--ease-out);
}
.cta:hover { transform: translateY(-2px); }
.cta .text-secondary { color: rgba(255, 255, 255, 0.85); }
.cta__arrow { font-size: var(--font-size-xl); }

/* ==========================================================================
   Decks
   ========================================================================== */

.deck-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 160px;
  gap: var(--space-4);
  margin: 0 calc(-1 * var(--space-5));
  padding: var(--space-1) var(--space-5) var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.deck-carousel > * { scroll-snap-align: start; }

.deck-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-4);
}

.deck-tile { display: block; text-decoration: none; }
.deck-tile:hover .deck-tile__image { transform: scale(1.02); }

.deck-tile__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: transform 0.2s var(--ease-out);
}
.deck-tile__image--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.deck-tile__body { padding-top: var(--space-2); }
.deck-tile__title { display: block; font-size: var(--font-size-md); font-weight: 600; line-height: 1.3; }
.deck-tile__meta { display: block; color: var(--color-text-secondary); font-size: var(--font-size-sm); }

.card-list { list-style: none; margin: 0; padding: 0; }

.card-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.card-row__image { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.card-row__body { flex: 1; min-width: 0; }
.card-row__title { font-size: var(--font-size-md); font-weight: 600; }
.card-row__description {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-row__actions { display: flex; gap: var(--space-1); }

/* Image picker: upload a photo or use an emoji */

.image-picker { min-width: 0; margin: 0; padding: 0; border: none; }
.image-picker > legend { padding: 0; }

.segmented {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.segmented label { flex: 1; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  display: block;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.segmented input:checked + span { background: var(--color-background); color: var(--color-text); box-shadow: var(--shadow-soft); }
.segmented input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.image-picker__panel { display: none; }
.image-picker:has(input[value="upload"]:checked) .image-picker__panel--upload,
.image-picker:has(input[value="emoji"]:checked) .image-picker__panel--emoji { display: block; }

.emoji-choice { display: flex; align-items: center; gap: var(--space-4); }
.emoji-input {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: 2.5rem;
  text-align: center;
}
.emoji-input:focus { outline: none; border-color: var(--color-text); box-shadow: 0 0 0 1px var(--color-text); }

.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--space-1); margin-top: var(--space-3); }
.emoji-grid__item {
  aspect-ratio: 1;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 1.4rem;
  cursor: pointer;
}
.emoji-grid__item:hover,
.emoji-grid__item[aria-pressed="true"] { background: var(--color-primary-tint); }

.card-preview { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }

/* ==========================================================================
   Rooms: deck picker, code, people
   ========================================================================== */

.deck-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

.deck-option {
  position: relative;
  display: block;
  padding: var(--space-2);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.deck-option input { position: absolute; opacity: 0; pointer-events: none; }
.deck-option:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-tint); }
.deck-option:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.deck-option--disabled { opacity: 0.45; cursor: not-allowed; }
.deck-option__body { display: block; padding: var(--space-2) var(--space-1) 0; }

.sticky-footer {
  position: sticky;
  bottom: 0;
  padding: var(--space-4) 0;
  background: linear-gradient(to top, var(--color-background) 70%, transparent);
}

.code-display {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border: 2px dashed var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  line-height: 1.2;
}
.code-display--button { cursor: pointer; font-family: inherit; }
.code-display--button:active { transform: scale(0.98); }
.code-display__hint { font-size: var(--font-size-xs); font-weight: 600; letter-spacing: normal; }

.people { list-style: none; margin: 0; padding: 0; text-align: left; }
.people__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
}
.people__item:last-child { border-bottom: none; }

.waiting-dots { display: flex; justify-content: center; gap: var(--space-2); padding-top: var(--space-2); }
.waiting-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: pulse 1.2s infinite ease-in-out;
}
.waiting-dots span:nth-child(2) { animation-delay: 0.15s; }
.waiting-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes pulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

.progress { height: 10px; border-radius: var(--radius-pill); background: var(--color-surface); overflow: hidden; }
.progress--thin { height: 6px; }
.progress__bar {
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
  transition: width 0.4s var(--ease-out);
}

/* ==========================================================================
   Swipe screen
   ========================================================================== */

.page--swipe .page { padding-bottom: var(--space-4); }

.swiper {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--navbar-height) - var(--space-5) - var(--space-4));
  min-height: 480px;
}

.swiper__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); }

.swiper__stack { position: relative; flex: 1; }

.swipe-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  touch-action: none;
  user-select: none;
  cursor: grab;
  will-change: transform;
  transition: transform 0.25s var(--ease-out);
}
.swipe-card:active { cursor: grabbing; }
/* Cards underneath peek out slightly, so the stack looks like a stack. */
.swipe-card:not(:last-child) { transform: scale(0.96) translateY(10px); box-shadow: var(--shadow-soft); }
.swipe-card:not(:last-child):not(:nth-last-child(2)) { visibility: hidden; }

.swipe-card__image { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

.swipe-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-7) var(--space-5) var(--space-5);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  color: #fff;
}
.swipe-card__title { font-size: var(--font-size-xxl); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.swipe-card__description { margin-top: var(--space-2); font-size: var(--font-size-md); opacity: 0.9; }

.swipe-card__stamp {
  position: absolute;
  top: var(--space-6);
  padding: var(--space-1) var(--space-3);
  border: 4px solid currentColor;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-xl);
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0;
  pointer-events: none;
}
.swipe-card__stamp--like { left: var(--space-5); color: var(--color-like); transform: rotate(-14deg); }
.swipe-card__stamp--nope { right: var(--space-5); color: var(--color-nope); transform: rotate(14deg); }

.swiper__actions { display: flex; justify-content: center; gap: var(--space-6); padding-top: var(--space-5); }

.round-btn {
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 50%;
  background: var(--color-background);
  box-shadow: var(--shadow-card);
  font-size: 1.75rem;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s;
}
.round-btn:hover { transform: scale(1.06); box-shadow: var(--shadow-lifted); }
.round-btn:active { transform: scale(0.94); }
.round-btn--nope { color: var(--color-nope); }
.round-btn--like { color: var(--color-like); }

/* ==========================================================================
   Results
   ========================================================================== */

.results { display: flex; flex-direction: column; gap: var(--space-7); }

.results__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: calc(100dvh - var(--navbar-height) - var(--space-7));
  justify-content: center;
}

.results__eyebrow {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.winner-card {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lifted);
  animation: pop-in 0.5s var(--ease-out);
}
.winner-card__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.winner-card__body { padding: var(--space-5); }
.winner-card__body > * + * { margin-top: var(--space-2); }
.winner-card__votes { color: var(--color-primary); font-weight: 700; }

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: none; }
}

.scroll-hint {
  align-self: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  animation: nudge 1.8s infinite ease-in-out;
}

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.tally { list-style: none; margin: 0; padding: 0; }
.tally__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}
.tally__row--winner { background: var(--color-primary-tint); }
.tally__image { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.tally__body { flex: 1; min-width: 0; }
.tally__line { display: flex; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
.tally__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tally__count { color: var(--color-text-secondary); font-size: var(--font-size-sm); white-space: nowrap; }

/* ==========================================================================
   Emoji pictures (emoji cards and deck covers)
   ========================================================================== */

/* Sized by whatever class it shares (thumbnail, tile, swipe card...). The emoji
   scales with that box through container query units. */
.emoji-art {
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
  background: linear-gradient(135deg, var(--emoji-from), var(--emoji-to));
}
.emoji-art__glyph { font-size: 45cqmin; line-height: 1; user-select: none; }
/* On a swipe card, lift the emoji above the title gradient at the bottom. */
.swipe-card__image.emoji-art { padding-bottom: 20%; }

/* ==========================================================================
   Empty and error states
   ========================================================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-7) 0;
  text-align: center;
}
.empty-state--compact { padding: var(--space-5) 0; }
.empty-state__icon { font-size: 3rem; }