@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg: #FFFFFF;
  --paper: #FFFFFF;
  --ink: #000000;
  --muted: #666666;
  --light-gray: #F5F5F5;
  --border-gray: #E0E0E0;
  --shadow-3d: 
    0 1px 0 #000,
    0 2px 0 #000,
    0 3px 0 #000,
    0 4px 0 #000,
    0 5px 0 #000,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25);
  --shadow-3d-small:
    0 1px 0 #000,
    0 2px 0 #000,
    0 3px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3);
  --shadow-3d-hover:
    0 1px 0 #000,
    0 2px 0 #000,
    0 3px 0 #000,
    0 4px 0 #000,
    0 5px 0 #000,
    0 6px 0 #000,
    0 7px 0 #000,
    0 8px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 7px 15px rgba(0,0,0,.3);
  --radius: 16px;
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html, body {
  height: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* App container */
.app {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 20px 120px;
}

/* Header */
header {
  top: 0;
  z-index: 100;
  background: linear-gradient(to bottom, var(--bg) 85%, rgba(255,255,255,0.9) 95%, transparent);
  padding: 8px 0 20px;
  margin-bottom: 24px;
}

.title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 0px;
}

.title-row2 {
  display: flex;
  width: 100%;     /* <-- make it stretch */
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

/* ===== Statement Card (poster-style) ===== */
.statement-card{
  border: 4px solid var(--ink);
  border-radius: 16px;
  padding: 22px 20px;
  background: var(--paper);
  box-shadow: var(--shadow-3d);
}

.statement-head{
  display:flex; align-items:center; gap:12px;
  margin-bottom: 8px;
}

.stamp{
  display:inline-block;
  font-weight: 900;
  letter-spacing: .12em;
  font-size: 11px;
  padding: 6px 10px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 2px 0 #000;
}

.btn.shout{
  margin-left: auto;
  font-weight: 900;
  letter-spacing: .06em;
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: var(--shadow-3d-small);
}

.statement-date{
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 3px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 14px;
}

/* Big lines that read like a declaration */
.statement-lines{
  display:flex; flex-direction:column; gap:10px;
}
.statement-lines .line{
  display:flex; align-items:baseline; gap:12px;
  font-weight: 900;
  line-height: 1.05;
  font-size: clamp(22px, 4.2vw, 40px);
  text-wrap: balance;
}

/* tier badge + accent bar */
.tier-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 42px; height: 36px;
  padding: 0 10px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  font-size: clamp(18px, 3.3vw, 28px);
  line-height: 1;
  box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.5);
  background: var(--badge-bg, var(--paper));
  color: var(--ink);
}
.accent-bar{
  flex: 0 0 8px; height: 1.05em;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--accent, #ddd);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

/* item label + title */
.line .who{ font-size: .55em; letter-spacing: .08em; margin-right: 2px; text-transform: uppercase; }
.line .title{ font-weight: 900; }

/* per-tier color hints */
.line[data-tier="A"]{ --accent:#FF2B2B; --badge-bg: rgba(255,43,43,.18); }
.line[data-tier="B"]{ --accent:#FF8A00; --badge-bg: rgba(255,138,0,.18); }
.line[data-tier="C"]{ --accent:#FFDD00; --badge-bg: rgba(255,221,0,.22); }
.line[data-tier="D"]{ --accent:#00D65C; --badge-bg: rgba(0,214,92,.18); }
.line[data-tier="E"]{ --accent:#2F6FFF; --badge-bg: rgba(47,111,255,.18); }
.line[data-tier="F"]{ --accent:#A64DFF; --badge-bg: rgba(166,77,255,.18); }

.statement-foot{
  display:flex; align-items:center; gap:10px; margin-top: 14px;
}
.hash{
  border: 3px solid var(--ink);
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 2px 0 #000;
}

/* small screens: make it breathe vertically */
@media (max-width: 640px){
  .statement-lines .line{ font-size: clamp(22px, 6vw, 36px); }
  .tier-badge{ min-width: 38px; height: 34px; }
  .accent-bar{ flex-basis: 7px; }
}


h1 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0;
  text-shadow: var(--shadow-3d);
  transform: perspective(500px) rotateY(-5deg);
  transition: var(--transition);
}

h1:hover {
  transform: perspective(500px) rotateY(0deg) translateZ(20px);
  text-shadow: var(--shadow-3d-hover);
}

.reset-chip {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 100px;
  padding: 8px 16px;
  box-shadow: var(--shadow-3d-small);
  transition: var(--transition);
  white-space: nowrap;
  margin-left: auto; /* pushes it all the way right */
  }

.reset-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3d);
}

/* Tabs */
.tabs {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.tab {
  appearance: none;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 10px 20px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-3d-small);
  position: relative;
}

.tab:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3d);
}

.tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}

.date-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 100px;
  color: var(--ink);
  margin-left: auto;
  box-shadow: 0 2px 0 #000, 0 3px 5px rgba(0,0,0,0.1);
}

/* Ads */
.ad {
  border: 2px dashed var(--border-gray);
  background: repeating-linear-gradient(
    45deg,
    #FAFAFA,
    #FAFAFA 10px,
    #F5F5F5 10px,
    #F5F5F5 20px
  );
  color: var(--muted);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 16px;
  border-radius: var(--radius);
  margin: 20px 0;
}

.ad.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  background: var(--paper);
  z-index: 90;
  border-top: 3px solid var(--ink);
  box-shadow: 0 -2px 0 #000, 0 -5px 10px rgba(0,0,0,0.1);
}

/* Cards */
.card {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 24px;
  transition: var(--transition);
  position: relative;
  box-shadow: var(--shadow-3d);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3d-hover);
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .grid { 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  }
  .grid.hot { 
    grid-template-columns: 1fr; 
  }
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}

.title {
  font-weight: 800;
  font-size: 20px;
  margin: 12px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 100px;
  padding: 4px 10px;
  box-shadow: 0 2px 0 #000;
}

/* Rating - with rainbow hover */
.rating {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.rating .label {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* Summary */
.summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  font-weight: 600;
}

/* Buttons */
.btn {
  appearance: none;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-3d-small);
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3d);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 #000, 0 2px 3px rgba(0,0,0,0.2);
}

.btn.ghost {
  background: transparent;
  box-shadow: none;
  border-width: 2px;
}

.btn.ghost:hover {
  background: var(--light-gray);
  box-shadow: 0 2px 0 #000, 0 3px 5px rgba(0,0,0,0.1);
}

.btn.primary {
  background: var(--ink);
  color: var(--paper);
}

.btn.primary:hover {
  box-shadow: var(--shadow-3d-hover);
}

.btn.block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Hot take specific */
.hot-headline {
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.1;
  font-weight: 900;
  margin: 20px 0 24px;
  text-shadow: 
    2px 2px 0 #E0E0E0,
    3px 3px 0 #C0C0C0,
    4px 4px 8px rgba(0,0,0,0.1);
}

.hot-image {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  background: var(--light-gray);
  border: 3px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-3d-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: 14px 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 12px;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

textarea:focus {
  outline: none;
  box-shadow: 
    inset 0 2px 4px rgba(0,0,0,0.1),
    0 0 0 3px var(--light-gray);
}

textarea::placeholder {
  color: var(--muted);
}

ul.takes {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}

ul.takes li {
  padding: 14px 16px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  margin-top: 12px;
  font-weight: 500;
  transition: var(--transition);
  box-shadow: 0 2px 0 #000, 0 3px 5px rgba(0,0,0,0.1);
}

ul.takes li:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-3d-small);
}

/* Utilities */
[hidden] {
  display: none !important;
}

.spacer {
  flex: 1;
}

.small {
  font-size: 13px;
}

.muted {
  color: var(--muted);
}

/* Footer */
footer {
  margin-top: 40px;
  text-align: center;
}

footer p {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.kbd {
  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
  font-size: 11px;
  font-weight: 700;
  background: var(--light-gray);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--ink);
  box-shadow: 0 1px 0 #000;
}

/* Card entrance animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: slideUp 0.4s ease-out backwards;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }

/* Responsive adjustments */
@media (max-width: 640px) {
  .app {
    padding: 16px 12px 120px;
  }
  
  h1 {
    transform: none;
  }
  
  .tabs {
    width: 100%;
  }
  
  .tab {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    font-size: 13px;
  }
  
  .date-pill {
    display: none;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--light-gray);
  border: 2px solid var(--ink);
}

::-webkit-scrollbar-thumb {
  background: var(--ink);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #333;
}

/* ===== A–F tier pills with rainbow hover + in-pill results ===== */
.tier-list{
  display:flex; flex-direction:column; gap:10px; margin:6px 0 8px;
}
.tier-list.locked .tier{ cursor: default; opacity: .96; }
.tier-list .tier{
  position:relative; overflow:hidden; z-index:0;
  --pct: 0%;                       /* result fill width (set inline by JS) */
  --tier-color: transparent;       /* set by [data-tier] mapping below */
}

/* pill base: monochrome */
.tier{
  appearance:none; width:100%;
  border:3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 900; font-size: 18px; letter-spacing:.02em;
  text-align:left;
  display:flex; align-items:center; gap:10px;
  box-shadow: var(--shadow-3d-small);
  transition: transform .14s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.tier .t-label{ position:relative; z-index:1; }
.tier .t-pct{ margin-left:auto; font-weight:800; position:relative; z-index:1; opacity:0; transition: opacity .2s ease; }

/* in-pill colored fill (appears when results are shown) */
.tier::before{
  content:""; position:absolute; inset:0; width: var(--pct);
  background: var(--tier-color); opacity:.18;
  transition: width 700ms cubic-bezier(.4,0,.2,1);
  z-index:0;
}

/* show % only when results are revealed */
.tier-list.show-results .t-pct{ opacity:1; }

/* chosen styling */

/* hover rainbow (only before locked) */
/* vivid tier colors */
.tier[data-tier="A"]{ --tier-color:#FF2B2B; } /* brighter red */
.tier[data-tier="B"]{ --tier-color:#FF8A00; } /* punchy orange */
.tier[data-tier="C"]{ --tier-color:#FFDD00; } /* bright yellow */
.tier[data-tier="D"]{ --tier-color:#00D65C; } /* vivid green */
.tier[data-tier="E"]{ --tier-color:#2F6FFF; } /* bright blue */
.tier[data-tier="F"]{ --tier-color:#A64DFF; } /* vivid violet */

/* hover uses the same vivid colors */
.tier-list:not(.locked) .tier[data-tier="A"]:hover{ background:#FF2B2B; color:#fff; }
.tier-list:not(.locked) .tier[data-tier="B"]:hover{ background:#FF8A00; color:#fff; }
.tier-list:not(.locked) .tier[data-tier="C"]:hover{ background:#FFDD00; color:#000; }
.tier-list:not(.locked) .tier[data-tier="D"]:hover{ background:#00D65C; color:#fff; }
.tier-list:not(.locked) .tier[data-tier="E"]:hover{ background:#2F6FFF; color:#fff; }
.tier-list:not(.locked) .tier[data-tier="F"]:hover{ background:#A64DFF; color:#fff; }


/* ==== Barber-pole animation on in-pill results ==== */

/* make sure text sits above the animated overlay */
.tier .t-label,
.tier .t-pct {
  position: relative;
  z-index: 2;              /* was 1 before; bump above ::after */
}

/* we already use ::before for the solid color fill.
   now add ::after for the moving bright stripes */
.tier::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: var(--pct);                  /* matches result width set by JS */
  pointer-events:none;
  z-index: 1;                         /* between text (z=2) and base background */
  opacity: 0;                         /* only visible when results are shown */

  /* two layers:
     1) soft top highlight
     2) repeating diagonal white stripes that "climb" upward */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.35) 0 12px,   /* bright stripe width */
      rgba(255,255,255,0)  12px 24px  /* gap */
    );
  background-size:
    100% 100%,                        /* highlight covers fill */
    24px 24px;                        /* stripe size (tweakable) */
  background-position:
    0 0,
    0 0;

  /* animation speed is tweakable via var */
  --pole-speed: 2.2s;
  animation: poleUp var(--pole-speed) linear infinite;
}

/* reveal the overlay only when results are shown */
.tier-list.show-results .tier::after{ opacity: .9; }

/* the solid colored fill (your ::before) stays as-is; to make the glow tighter,
   you can keep your previous settings. This line is just here as a reminder:
   .tier::before { width: var(--pct); background: var(--tier-color); opacity:.18; } */

/* motion: diagonal stripes drift upward */
@keyframes poleUp{
  0%   { background-position: 0 0,        0   0;   }
  100% { background-position: 0 0,        0 -24px; } /* move one stripe-height up */
}

/* accessibility: prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .tier::after{ animation: none; opacity: .5; }  /* static stripes */
}

/* ===== OVERRIDES: in-pill results (brighter) + barber-pole ===== */

/* Global knobs (tweak to taste) */
:root{
  --tier-alpha: .42;        /* colored fill strength (was ~.18) */
  --pole-alpha: 1;          /* stripe overlay opacity when shown */
  --stripe-bright: .60;     /* white stripe intensity (0–1) */
  --stripe-highlight: .28;  /* top sheen intensity (0–1) */
  --pole-speed: 1.8s;       /* stripe speed */
}

/* Stronger specificity + fallbacks so it always wins */
.tier-list .tier{
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* Solid color fill (uses --pct; falls back to 60% so you can SEE it even if JS didn't set it) */
.tier-list .tier::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width: var(--pct, 60%);
  background: var(--tier-color, #000);
  opacity: var(--tier-alpha, .42);
  z-index: 0;
  pointer-events:none;
}

/* Moving barber-pole overlay */
.tier-list .tier::after{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width: var(--pct, 60%);
  z-index: 1;                 /* above ::before, below text */
  pointer-events:none;
  opacity: 0;                 /* revealed when results show */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,var(--stripe-highlight, .28)), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,var(--stripe-bright, .60)) 0 10px,
      rgba(255,255,255,0)                         10px 20px
    );
  background-size: 100% 100%, 20px 20px;
  background-position: 0 0, 0 0;
  animation: poleUp var(--pole-speed, 1.8s) linear infinite;
}

/* Reveal overlay when results are shown */
.tier-list.show-results .tier::after{ opacity: var(--pole-alpha, 1); }

/* Text stays above overlays */
.tier .t-label, .tier .t-pct{ position:relative; z-index: 2; }

/* More obvious motion (move two stripe heights so you SEE it) */
@keyframes poleUp{
  0%   { background-position: 0 0,    0   0; }
  100% { background-position: 0 0,    0 -40px; }
}

/* Vivid tier colors (also brighten hover) */
.tier[data-tier="A"]{ --tier-color:#FF2B2B; }
.tier[data-tier="B"]{ --tier-color:#FF8A00; }
.tier[data-tier="C"]{ --tier-color:#FFDD00; }
.tier[data-tier="D"]{ --tier-color:#00D65C; }
.tier[data-tier="E"]{ --tier-color:#2F6FFF; }
.tier[data-tier="F"]{ --tier-color:#A64DFF; }

.tier-list:not(.locked) .tier[data-tier="A"]:hover{ background:#FF2B2B; color:#fff; }
.tier-list:not(.locked) .tier[data-tier="B"]:hover{ background:#FF8A00; color:#fff; }
.tier-list:not(.locked) .tier[data-tier="C"]:hover{ background:#FFDD00; color:#000; }
.tier-list:not(.locked) .tier[data-tier="D"]:hover{ background:#00D65C; color:#fff; }
.tier-list:not(.locked) .tier[data-tier="E"]:hover{ background:#2F6FFF; color:#fff; }
.tier-list:not(.locked) .tier[data-tier="F"]:hover{ background:#A64DFF; color:#fff; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .tier-list .tier::after{ animation: none; opacity: .5; }
}

/* --- Image fit for card thumbnails --- */

/* keep your existing .thumb styles; this just ensures sizing */
.thumb { display:block; }

/* aspect ratios per shape (you likely already have these; safe to re-define) */
.thumb--wide   { aspect-ratio: 16 / 9; }
.thumb--square { aspect-ratio: 1 / 1; }
.thumb--circle { aspect-ratio: 1 / 1; border-radius: 999px; overflow:hidden; }

/* make the actual image fill the thumb box without distortion */
.thumb__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;        /* fill + crop */
  object-position: center;  /* center the crop */
  /* smoother loading */
  image-rendering: auto;
}

/* if you use <picture>, let it stretch like the img */
.thumb picture,
.thumb__picture{
  display:block;
  width:100%;
  height:100%;
}

/* placeholder initials stay centered */
.thumb.placeholder { display:flex; align-items:center; justify-content:center; }
.thumb.placeholder .ph{
  font-weight:900;
  font-size: clamp(24px, 6vw, 40px);
  letter-spacing: -0.02em;
}

/* small screens: slightly taller “wide” posters so they don’t feel too short */
@media (max-width: 480px){
  .thumb--wide { aspect-ratio: 4 / 3; } /* was 16/9; tweak to taste */
}

/* --- Square thumbnail with black-line 3D effect --- */
.thumb--square { aspect-ratio: 1 / 1; }

.thumb{
  position: relative;
  border: 3px solid var(--ink);      /* same bold line as cards */
  border-radius: 12px;               /* match your --radius vibe */
  background: var(--paper);
  overflow: hidden;
  box-shadow: var(--shadow-3d-small);/* 3D lift */
  transition: var(--transition);
  margin-top: 8px;                   /* breathing room above image */
}

.thumb:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-3d);      /* deeper on hover */
}

/* subtle inner hairline for depth */
.thumb::after{
  content:"";
  position:absolute; inset:0;
  border: 1px solid rgba(0,0,0,.08);
  pointer-events:none;
}

/* image fit */
.thumb__img{
  width:100%; height:100%;
  display:block;
  object-fit: cover;
  object-position: center;
}

/* Stack the title text and its chip vertically */
/* Stack title + chip, but remove the extra gap */
.title > div:first-child{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;                  /* was 6px */
  line-height: 1.15;       /* keeps the title compact */
}

/* Control the exact space between the title line and the chip/spacer */
.title > div:first-child .chip--spacer{
  margin-top: 12px;         /* tweak: 0–4px to taste */
  display: inline-block;   /* consistent box sizing for div/span chips */
}


/* Make chips look the same whether they're <div> or <span> */
.chip{ display: inline-block; }

/* Spacer chip: occupies identical space to a real chip but stays invisible */
.chip--spacer{
  visibility: hidden;      /* keeps layout space */
  pointer-events: none;
}

/* --- Ticket style (collision-free) --- */



/* Use OUTLINE (not border) so layout & fill backgrounds aren't affected */
.tier.chosen {
  outline: 3px dashed var(--accent, #111);
  outline-offset: 3px;
  /* keep your printed inner edge, but this doesn't cover the fill */
  border-radius: 12px; /* match your pill radius */
}

/* Optional tiny lift so it feels selected (doesn't affect fill) */
.tier.chosen {
  transform: translateY(-1px);
}

/* Per-tier accent colors (A–F → red→violet) */
.tier[data-tier="A"] { --accent:#e74c3c; }
.tier[data-tier="B"] { --accent:#e67e22; }
.tier[data-tier="C"] { --accent:#f1c40f; }
.tier[data-tier="D"] { --accent:#27ae60; }
.tier[data-tier="E"] { --accent:#3498db; }
.tier[data-tier="F"] { --accent:#9b59b6; }

/* === Statement Card: pill lines (no vertical bar) === */
#statementCard .poster-lines {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* pill container */
#statementCard .line{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--pill-bg, var(--paper));
  box-shadow: var(--shadow-3d-small);
}

/* bold labels & titles */
#statementCard .who{
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-right: 4px;
}
#statementCard .title{
  font-weight: 800;
}

/* round “A/B/C…” badge */
#statementCard .tier-badge{
  display: inline-grid;
  place-items: center;
  width: 36px; height: 28px;
  padding: 0 10px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  font-weight: 900;
  background: var(--badge-bg, #fff);
  box-shadow: 0 1px 0 #000, 0 2px 3px rgba(0,0,0,.15);
}

/* remove any old colored bar if it still exists */
#statementCard .accent-bar{ display:none !important; }

/* gentle per-tier tints (match your A–F palette) */
#statementCard .line[data-tier="A"]{ --pill-bg:#ffe5e5; --badge-bg:#ffd1d1; }
#statementCard .line[data-tier="B"]{ --pill-bg:#ffe9d1; --badge-bg:#ffd9b0; }
#statementCard .line[data-tier="C"]{ --pill-bg:#fff6bf; --badge-bg:#ffe98f; }
#statementCard .line[data-tier="D"]{ --pill-bg:#d9ffe9; --badge-bg:#b8f7d1; }
#statementCard .line[data-tier="E"]{ --pill-bg:#dfe9ff; --badge-bg:#cddaff; }
#statementCard .line[data-tier="F"]{ --pill-bg:#efe1ff; --badge-bg:#e2ccff; }

/* responsive: tighter pills on small screens */
@media (max-width: 520px){
  #statementCard .line{ padding: 10px 12px; }
  #statementCard .tier-badge{ width: 32px; height: 26px; }
}

/* Share sheet overlay */
.share-sheet[hidden] { display: none !important; }
.share-sheet {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.25);
  display: grid; place-items: end center;
  padding: 16px;
  z-index: 2000;
}

/* Card matches your bold/ink style */
.share-card {
  width: min(820px, 100%);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3d);
  padding: 16px;
  animation: slideUp .22s ease-out;
}

/* Header */
.share-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.share-title {
  font-weight: 900; letter-spacing: .02em; font-size: 18px;
}

/* Prefilled text area */
.share-text {
  width: 100%;
  min-height: 140px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px; line-height: 1.5; color: var(--ink);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.08);
}

.site-title { margin: 0; text-shadow: none; transform: none; }
.site-title img { display: block; height: 100px; /* tweak */ }

/* Force the chip to the far right inside the title row */

/* Thin rainbow line with diagonal bands */
.rainbow-divider{
  --h: 10px;                 /* thickness */
  --r: 999px;                /* roundness */
  --stripe: 16px;            /* width of each diagonal color band */

  height: var(--h);
  width: 100%;
  border-radius: var(--r);
  background:
    repeating-linear-gradient(
      45deg,
      #ff0040 0              , #ff0040 var(--stripe),
      #ff7a00 var(--stripe)  , #ff7a00 calc(var(--stripe)*2),
      #ffd300 calc(var(--stripe)*2), #ffd300 calc(var(--stripe)*3),
      #00c853 calc(var(--stripe)*3), #00c853 calc(var(--stripe)*4),
      #00b0ff calc(var(--stripe)*4), #00b0ff calc(var(--stripe)*5),
      #7c4dff calc(var(--stripe)*5), #7c4dff calc(var(--stripe)*6)
    );
  /* a soft outline to match your UI */
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.06),
    0 1px 2px rgba(0,0,0,.06);
}

/* Optional: make the stripes gently scroll */
.rainbow-divider.is-animated{
  animation: rainbow-slide 20s linear infinite;
  background-size: auto;
}
@keyframes rainbow-slide{
  from { background-position: 0 0; }
  to   { background-position: 200% 0; }
}

/* (optional) compact thickness on small screens */
@media (max-width: 600px){
  .rainbow-divider{ --h: 8px; --stripe: 14px; }
}

/* ===== Mobile polish pack ===== */

/* iOS safe-area padding */
@supports (padding: max(0px)) {
  .app { padding-bottom: max(120px, env(safe-area-inset-bottom)); }
  .ad.sticky { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* <= 480px phones */
@media (max-width: 480px){
  .app { padding: 14px 12px max(120px, env(safe-area-inset-bottom)); }

  /* header */
  .title-row2 { gap: 10px; margin-bottom: 12px; }
  .site-title img { height: 72px; }
  .reset-chip { font-size: 12px; padding: 6px 12px; }

  /* grid & cards */
  .grid { grid-template-columns: 1fr; gap: 16px; }
  .card { padding: 16px; border-radius: 14px; }
  .eyebrow { font-size: 10px; }
  .title { font-size: 18px; margin: 8px 0 12px; }

  /* thumbs */
  .thumb { border-radius: 10px; }
  .thumb--wide { aspect-ratio: 4 / 3; } /* taller posters on phones */

  /* tier pills */
  .tier { padding: 12px 14px; font-size: 16px; border-radius: 10px; }
  .tier .t-pct { font-size: 14px; }
  .tier-badge { min-width: 36px; height: 30px; font-size: 16px; }
  .tier-list { gap: 8px; }

  /* statement card */
  .statement-card { padding: 16px; border-radius: 14px; }
  .stamp { font-size: 10px; padding: 5px 8px; }
  .statement-date { font-size: 11px; margin-bottom: 10px; }
  .statement-lines .line { font-size: clamp(20px, 6vw, 32px); gap: 10px; }
  .hash { font-size: 11px; padding: 5px 8px; }

  /* buttons & tabs */
  .btn { padding: 10px 16px; font-size: 14px; border-radius: 10px; }
  .btn.shout { padding: 10px 14px; }
  .tabs { gap: 8px; }
  .tab { flex: 1; padding: 10px 12px; font-size: 13px; }

  /* share sheet card */
  .share-card { width: 100%; padding: 14px; }
  .share-text { min-height: 120px; font-size: 12.5px; }
}

/* ultra-small devices (<=360px width) */
@media (max-width: 360px){
  .title { font-size: 17px; }
  .tier { padding: 10px 12px; font-size: 15px; }
  .tier .t-pct { font-size: 13px; }
  .statement-lines .line { font-size: clamp(18px, 6.8vw, 28px); }
  .site-title img { height: 64px; }
}

/* touch improvements */
@media (hover: none) and (pointer: coarse){
  .btn:hover,
  .tab:hover,
  .tier:hover,
  .card:hover { transform: none; } /* avoid jumpy hover on touch */
  .btn, .tab, .tier { box-shadow: var(--shadow-3d-small); }
}

/* performance: soften heavy shadows on low-power devices */
@media (max-width: 480px) and (prefers-reduced-motion: reduce){
  .card, .btn, .tab, .thumb { box-shadow: 0 1px 0 #000, 0 2px 3px rgba(0,0,0,.12); }
  .card, .btn, .tab, .thumb, h1 { animation: none !important; transition: none !important; }
}

/* Safe fallback: no fill unless JS sets --pct AND results are revealed */
.tier-list .tier::before{ width: var(--pct, 0%); }
.tier-list .tier::after { width: var(--pct, 0%); }

/* Hide fills entirely before reveal */
.tier-list:not(.show-results) .tier::before{ width: 0 !important; }
.tier-list:not(.show-results) .tier::after { opacity: 0 !important; }

/* Show % text only after reveal (you already have this) */
.tier-list .t-pct{ opacity: 0; }
.tier-list.show-results .t-pct{ opacity: 1; }