/* ── The "Official" Taco Bell Tier List ─────────────────────────────
   Retro-fiesta: warm cream, deep purple ink, hot pink / teal / sunset
   orange, Memphis confetti, hard offset shadows. Light only, on purpose. */

:root {
  --bg: #FBF3E4;
  --ink: #3B2064;
  --pink: #E8378F;
  --purple: #7A4BC8;
  --teal: #12A5A0;
  --orange: #F5772B;
  --yellow: #FFC945;
  --card: #FFFFFF;
  --shadow: 4px 4px 0 var(--ink);
  --radius: 12px;
  --display: "Righteous", "Trebuchet MS", sans-serif;
  --body: "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* backgrounds stop at the border's inner edge; otherwise the bg color
   bleeds through the border's antialiased outer edge on rotated elements
   (ghost outline on tilted badges and hovered cards) */
.tier-badge, .tier-row, .item-card img, dialog, .modal-body img, .modal-tier {
  background-clip: padding-box;
}

html { scroll-behavior: smooth; }

/* The design's natural size targets ~1080-1440p; on big viewports scale the
   whole page up like browser zoom instead of drowning in cream. */
@media (min-width: 1800px) { html { zoom: 1.25; } }
@media (min-width: 2400px) { html { zoom: 1.5; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ── Wrapping-paper background ──
   A repeating Memphis tile on the body itself, evenly distributed like
   gift wrap; the opaque hero and white tier rows pass over it. */

body {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'><g fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M-28 4 Q-21 -8 -14 0 T0 0 T14 0 T28 -4' stroke='%23E8378F' stroke-width='4' opacity='.20' transform='translate(40 50) rotate(-15)'/><circle r='5' fill='%23F5772B' opacity='.22' transform='translate(150 28)'/><path d='M0 -14 L12 10 H-12 Z' stroke='%23FFC945' stroke-width='3' opacity='.30' transform='translate(255 55) rotate(12)'/><circle r='10' stroke='%2312A5A0' stroke-width='4' opacity='.20' transform='translate(330 25)'/><circle r='10' stroke='%237A4BC8' stroke-width='4' opacity='.16' transform='translate(85 140)'/><path d='M-24 8 L-12 -6 L0 8 L12 -6 L24 8' stroke='%2312A5A0' stroke-width='4' opacity='.20' transform='translate(200 125) rotate(-8)'/><path d='M-3 -11 h6 v8 h8 v6 h-8 v8 h-6 v-8 h-8 v-6 h8 Z' fill='%23E8378F' opacity='.18' transform='translate(315 155) rotate(20)'/><path d='M-12 0 A12 12 0 0 1 12 0 Z' fill='%237A4BC8' opacity='.15' transform='translate(35 235) rotate(160)'/><path d='M0 -9 L8 7 H-8 Z' fill='%2312A5A0' opacity='.18' transform='translate(145 218) rotate(-25)'/><path d='M-28 4 Q-21 -8 -14 0 T0 0 T14 0 T28 -4' stroke='%23F5772B' stroke-width='4' opacity='.20' transform='translate(255 245) rotate(8)'/><circle r='5' fill='%23FFC945' opacity='.30' transform='translate(332 258)'/><path d='M-3 -11 h6 v8 h8 v6 h-8 v8 h-6 v-8 h-8 v-6 h8 Z' fill='%23F5772B' opacity='.18' transform='translate(62 322) rotate(-10)'/><circle r='9' stroke='%23E8378F' stroke-width='4' opacity='.17' transform='translate(172 315)'/><path d='M-24 8 L-12 -6 L0 8 L12 -6 L24 8' stroke='%23FFC945' stroke-width='4' opacity='.28' transform='translate(292 328) rotate(5)'/></g></svg>");
  background-size: 360px 360px;
}

/* ── Hero ── */

.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 3.5rem 1rem 4.5rem;
  background: var(--bg); /* opaque: covers the fixed .bg layer up top */
}

.hero-inner { position: relative; z-index: 2; }

.kicker {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--teal);
  margin-bottom: 0.6rem;
}

h1 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6.5vw, 4.4rem);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

h1 .official {
  color: var(--pink);
  text-shadow: 3px 3px 0 var(--yellow);
}

.stats {
  margin-top: 1.1rem;
  font-weight: 700;
  color: var(--purple);
  font-size: 0.95rem;
}

.bell-mark {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.bell-mark:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; border-radius: 12px; }
.bell-mark svg {
  width: 64px;
  height: 64px;
  margin-bottom: 0.75rem;
  transform: rotate(-8deg);
  transform-origin: 50% 12%; /* swing from the crown */
}
.bell-mark.ringing svg { animation: bell-swing 1.1s ease-out; }
@keyframes bell-swing {
  0%   { transform: rotate(-8deg); }
  14%  { transform: rotate(16deg); }
  34%  { transform: rotate(-20deg); }
  54%  { transform: rotate(10deg); }
  74%  { transform: rotate(-13deg); }
  100% { transform: rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) { .bell-mark.ringing svg { animation: none; } }
.bell-body { fill: var(--purple); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.bell-knob { fill: var(--pink); stroke: var(--ink); stroke-width: 3; }
.bell-lip { fill: var(--purple); stroke: var(--ink); stroke-width: 3; }
.bell-clapper { fill: var(--pink); stroke: var(--ink); stroke-width: 3; }

/* zigzag divider under the hero */
.zigzag {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14px;
  background: var(--teal);
  clip-path: polygon(0 100%, 0 55%, 2.5% 0, 5% 55%, 7.5% 0, 10% 55%, 12.5% 0, 15% 55%, 17.5% 0, 20% 55%, 22.5% 0, 25% 55%, 27.5% 0, 30% 55%, 32.5% 0, 35% 55%, 37.5% 0, 40% 55%, 42.5% 0, 45% 55%, 47.5% 0, 50% 55%, 52.5% 0, 55% 55%, 57.5% 0, 60% 55%, 62.5% 0, 65% 55%, 67.5% 0, 70% 55%, 72.5% 0, 75% 55%, 77.5% 0, 80% 55%, 82.5% 0, 85% 55%, 87.5% 0, 90% 55%, 92.5% 0, 95% 55%, 97.5% 0, 100% 55%, 100% 100%);
}

/* ── Memphis confetti ── */

.confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.shape {
  position: absolute;
  opacity: 0.85;
  animation: bob 5s ease-in-out infinite alternate;
  /* own compositor layer: unrotated shapes otherwise get pixel-snapped,
     which turns the slow drift into visible 1px hops */
  will-change: transform, translate;
}
.shape.squiggle { width: 64px; stroke: var(--pink); }
.shape.zig      { width: 60px; stroke: var(--orange); }
.shape.tri      { width: 26px; fill: var(--yellow); stroke: var(--ink); stroke-width: 1.5; }
.shape.ring     { width: 26px; stroke: var(--teal); }
.shape.plus     { width: 22px; fill: var(--pink); }
.shape.dot      { width: 14px; fill: var(--orange); }
.shape.half     { width: 30px; fill: var(--purple); }

.s1 { top: 14%; left: 7%;  animation-delay: -1s; transform: rotate(-12deg); }
.s2 { top: 68%; right: 6%; animation-delay: -3s; transform: rotate(9deg); }
.t1 { top: 22%; right: 12%; animation-delay: -2s; transform: rotate(14deg); }
.t2 { top: 74%; left: 13%;  animation-delay: -4s; transform: rotate(-20deg); }
.r1 { top: 55%; left: 4%;   animation-delay: -2.5s; transform: rotate(2deg); }
.r2 { top: 12%; right: 28%; animation-delay: -0.5s; transform: rotate(-2deg); }
.p1 { top: 84%; right: 12%; animation-delay: -1.8s; transform: rotate(12deg); }
.z1 { top: 38%; left: 16%;  animation-delay: -3.4s; transform: rotate(-6deg); }
.d1 { top: 30%; left: 30%;  animation-delay: -2.2s; transform: rotate(2deg); }
.h1 { top: 44%; right: 8%;  animation-delay: -4.2s; transform: rotate(-160deg); }

@keyframes bob {
  from { translate: 0 -7px; }
  to   { translate: 0 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .shape { animation: none; }
  html { scroll-behavior: auto; }
}

/* hide the busiest confetti on small screens */
@media (max-width: 640px) {
  .d1, .z1, .r2, .h1 { display: none; }
}

/* ── Tier board ── */

main {
  max-width: 1060px;
  margin: 0 auto;
  padding: 2.5rem 1rem 1rem;
}

.tier-row {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.9rem;
  margin-bottom: 1.4rem;
}

.tier-badge {
  flex: 0 0 92px;
  align-self: flex-start; /* fixed sticker pinned to the top of its row */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.85rem 0.25rem;
  text-align: center;
  transform: rotate(-2deg);
  /* drop-shadow, not box-shadow: box-shadow clips out the area under the
     element with its own AA edge, which never aligns with the rotated
     element's edge AA and leaves a hairline seam (visible in Firefox) */
  filter: drop-shadow(3px 3px 0 var(--ink));
}
.tier-letter {
  font-family: var(--display);
  font-size: 2.6rem;
  line-height: 1;
}
.tier-name {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tier-S .tier-badge { background: var(--pink);   color: #fff; }
.tier-A .tier-badge { background: var(--orange); color: #fff; }
.tier-B .tier-badge { background: var(--yellow); color: var(--ink); }
.tier-C .tier-badge { background: var(--teal);   color: #fff; }
.tier-D .tier-badge { background: var(--purple); color: #fff; }
.tier-F .tier-badge { background: var(--ink);    color: var(--yellow); }

.tier-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  flex: 1;
  min-height: 96px;
}

.item-card {
  width: 96px;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
  transition: transform 0.12s ease;
}
.item-card img {
  width: 96px;
  height: 96px;
  display: block;
  object-fit: cover;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  /* transparent ink so hover interpolates offset + alpha smoothly */
  filter: drop-shadow(0 0 0 rgba(59, 32, 100, 0));
  transition: filter 0.12s ease;
}
.item-card .item-name {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0.3rem;
}
.item-card:hover, .item-card:focus-visible {
  transform: translate(-2px, -3px) rotate(-1.5deg);
}
.item-card:hover img, .item-card:focus-visible img {
  filter: drop-shadow(3px 4px 0 rgba(59, 32, 100, 1));
}
.item-card:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 10px; }

.tier-empty {
  align-self: center;
  font-style: italic;
  font-weight: 400;
  opacity: 0.55;
  font-size: 0.85rem;
}

/* ── Modal ── */

dialog {
  margin: auto; /* the * reset kills the UA rule that centers <dialog> */
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
  background: var(--bg);
  color: var(--ink);
  padding: 1.5rem;
  max-width: 560px;
  width: calc(100vw - 2rem);
}
dialog::backdrop { background: rgba(59, 32, 100, 0.55); }

dialog .close {
  position: absolute;
  top: 0.5rem; right: 0.7rem;
  border: none;
  background: none;
  font-size: 1.8rem;
  font-family: var(--body);
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
}

.modal-body { display: flex; gap: 1.2rem; align-items: flex-start; }
.modal-body img {
  width: 148px; height: 148px;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  flex-shrink: 0;
}
.modal-info { flex: 1; min-width: 0; }
.modal-info h2 {
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1.15;
  margin-bottom: 0.35rem;
  padding-right: 1.2rem;
}
.modal-meta {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 0.6rem;
}
.modal-tier {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.95rem;
  padding: 0.1rem 0.6rem;
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  margin-bottom: 0.6rem;
}
.tier-chip-S { background: var(--pink);   color: #fff; }
.tier-chip-A { background: var(--orange); color: #fff; }
.tier-chip-B { background: var(--yellow); color: var(--ink); }
.tier-chip-C { background: var(--teal);   color: #fff; }
.tier-chip-D { background: var(--purple); color: #fff; }
.tier-chip-F { background: var(--ink);    color: var(--yellow); }

.tasting { margin-top: 0.5rem; font-size: 0.9rem; }
.tasting .t-head { font-weight: 800; font-size: 0.78rem; color: var(--teal); text-transform: uppercase; letter-spacing: 0.06em; }
.tasting .t-notes { font-style: italic; }

@media (max-width: 520px) {
  .modal-body { flex-direction: column; align-items: center; text-align: center; }
  .tier-badge { flex-basis: 68px; }
  .tier-letter { font-size: 2rem; }
  .item-card, .item-card img { width: 76px; }
  .item-card img { height: 76px; }
}

/* ── Admin mode (local review console only) ── */

.admin-flag {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 10;
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.85rem;
  background: var(--yellow);
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  transform: rotate(-2deg);
  filter: drop-shadow(2px 2px 0 var(--ink));
  pointer-events: none;
}

body.admin .item-card { cursor: grab; }
body.admin .item-card:active { cursor: grabbing; }

.card-dragging { opacity: 0.35; }

.drop-indicator {
  width: 6px;
  height: 96px;
  border-radius: 3px;
  background: var(--pink);
  filter: drop-shadow(1px 1px 0 var(--ink));
}

.tier-items.drop-hot { background: rgba(232, 55, 143, 0.06); border-radius: 8px; }

/* backlog pane: pinned left column in admin, so drags onto the board are
   short hops instead of cross-page journeys */
#backlog-pane { display: none; }
body.admin main {
  position: relative;
  max-width: none; /* admin owns the full viewport width */
  padding: 2.5rem 1.5rem 1rem;
}
body.admin #board { margin-left: calc(33% + 1.5rem); }
body.admin #backlog-pane {
  /* absolutely positioned so the board alone sets the page height;
     the pane matches it exactly and scrolls its own overflow */
  display: block;
  position: absolute;
  top: 2.5rem;
  bottom: 1.4rem; /* board rows carry 1.4rem bottom margin; align with the last row */
  left: 1.5rem;
  width: 33%;
  overflow-y: auto;
  border: 3px dashed var(--ink);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.6);
  padding: 0.9rem;
}
.backlog-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
  padding: 0.35rem 0.7rem;
  background: #cfc4b4;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  transform: rotate(-1deg);
  filter: drop-shadow(3px 3px 0 var(--ink));
}
.backlog-head .tier-letter { font-size: 1.6rem; }
.backlog-items { min-height: 200px; align-content: flex-start; }
@media (max-width: 1100px) {
  body.admin #board { margin-left: 0; }
  body.admin #backlog-pane {
    position: static;
    width: auto;
    max-height: 40vh;
    margin-bottom: 1.4rem;
  }
}
.item-card.unrated img { filter: grayscale(1) opacity(0.75); }
.item-card.unrated:hover img, .item-card.unrated:focus-visible img {
  filter: grayscale(0) opacity(1) drop-shadow(3px 4px 0 rgba(59, 32, 100, 1));
}
.item-card.unrated .item-name { opacity: 0.6; }

.modal-tier-unrated {
  background: #cfc4b4;
  color: var(--ink);
}

.t-edit {
  width: 100%;
  min-height: 72px;
  margin-top: 0.2rem;
  font-family: var(--body);
  font-size: 0.9rem;
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  resize: vertical;
}
.t-edit:focus { outline: 3px solid var(--pink); outline-offset: 1px; }

.admin-bar { margin-top: 0.8rem; display: flex; gap: 0.6rem; }
.btn {
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--yellow);
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  filter: drop-shadow(2px 2px 0 var(--ink));
}
.btn:hover { translate: -1px -1px; filter: drop-shadow(3px 3px 0 var(--ink)); }
.btn-save { background: var(--teal); color: #fff; }

/* ── Footer ── */

footer {
  max-width: 760px;
  margin: 1.5rem auto 0;
  padding: 0 1rem 2.5rem;
  text-align: center;
  font-size: 0.8rem;
}
footer #synced { font-weight: 700; color: var(--teal); margin-bottom: 0.5rem; }
.disclaimer { opacity: 0.65; }
.disclaimer a { color: var(--pink); font-weight: 700; text-decoration-thickness: 2px; }
.disclaimer a:hover { color: var(--purple); }