:root {
  --sea-deep: #023e57;
  --sea: #0a6e8c;
  --sea-light: #3aa6c4;
  --foam: #e8f7fb;
  --crab: #ff6b4a;
  --crab-dark: #e8502f;
  --sun: #ffd166;
  --ink: #052b3a;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: var(--foam);
  background: linear-gradient(180deg, var(--sea) 0%, var(--sea-deep) 100%);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 18px 60px;
}

header {
  text-align: center;
  padding: 18px 0 10px;
}

header h1 {
  font-size: 1.8rem;
  letter-spacing: 0.5px;
}

header .crab {
  display: block;
  width: 110px;
  height: auto;
  margin: 0 auto 4px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
  animation: wobble 2.5s ease-in-out infinite;
}

body.display header .crab {
  width: 150px;
}

@keyframes wobble {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}

header p {
  opacity: 0.85;
  margin-top: 6px;
  font-size: 0.95rem;
}

.add-form {
  display: flex;
  gap: 8px;
  margin: 22px 0 8px;
}

.add-form input {
  flex: 1;
  padding: 14px 16px;
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  background: var(--foam);
  color: var(--ink);
  outline: none;
}

.add-form button {
  padding: 0 20px;
  border: none;
  border-radius: 14px;
  background: var(--crab);
  color: white;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.08s, background 0.15s;
}

.add-form button:active { transform: scale(0.95); }
.add-form button:hover { background: var(--crab-dark); }

.msg {
  min-height: 22px;
  font-size: 0.9rem;
  text-align: center;
  margin: 4px 0 8px;
  transition: opacity 0.3s;
}
.msg.error { color: var(--sun); }
.msg.ok { color: #9ff5c9; }

ul.list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

li.row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px 14px;
}

/* Entry fade only for genuinely new rows. Applied via a one-shot class in
   reconcile (NOT on .row), so re-ordered/reused rows never re-animate and
   the list does not flicker on every poll. */
li.row.enter {
  animation: pop 0.25s ease;
}

@keyframes pop {
  from { opacity: 0; }
  to { opacity: 1; }
}

li.row .rank {
  font-size: 1.1rem;
  width: 26px;
  text-align: center;
  opacity: 0.7;
}

li.row .name {
  flex: 1;
  font-size: 1.1rem;
  word-break: break-word;
}

li.row .votes {
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
}

li.row button.vote {
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--sun);
  color: var(--ink);
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.08s, opacity 0.2s;
}
li.row button.vote:active { transform: scale(0.9); }
li.row button.vote.voted {
  background: rgba(255, 255, 255, 0.18);
  color: var(--foam);
  cursor: default;
}

li.row button.vote.del {
  background: var(--crab);
  color: white;
}
li.row button.vote.del:hover { background: var(--crab-dark); }

.empty {
  text-align: center;
  opacity: 0.7;
  padding: 30px 0;
  font-style: italic;
}

/* ---- display page ---- */
body.display .wrap { max-width: 1000px; }
.display-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 36px;
  align-items: start;
}
.qr-card {
  background: var(--foam);
  color: var(--ink);
  border-radius: 22px;
  padding: 26px;
  text-align: center;
}
.qr-card #qr { display: flex; justify-content: center; }
.qr-card #qr img, .qr-card #qr canvas { width: 100%; height: auto; max-width: 320px; }
.qr-card h2 { margin-bottom: 14px; }
.qr-card .url {
  margin-top: 14px;
  font-weight: bold;
  color: var(--sea);
  word-break: break-all;
}
.leaderboard h2 { margin-bottom: 14px; text-align: center; }
body.display li.row .name { font-size: 1.4rem; }
body.display li.row .votes { font-size: 1.4rem; }

@media (max-width: 760px) {
  .display-grid { grid-template-columns: 1fr; }
}