* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: #fff; text-align: center; overflow-x: hidden;
  font: 700 18px/1.4 ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  background: linear-gradient(120deg, #5b2be0, #c026d3, #2563eb, #5b2be0) 0 0 / 300% 300%;
  animation: drift 18s linear infinite;
}
/* two soft blobs floating behind everything */
body::before, body::after {
  content: ""; position: fixed; z-index: -1; width: 60vmax; height: 60vmax; border-radius: 50%;
  background: radial-gradient(circle, #ffd84d55, transparent 65%); top: -20vmax; left: -20vmax;
  animation: float 14s ease-in-out infinite alternate;
}
body::after { background: radial-gradient(circle, #22d3ee55, transparent 65%); top: auto; left: auto; bottom: -25vmax; right: -20vmax; animation-duration: 19s; }

#app { max-width: 520px; margin: 0 auto; padding: 24px 16px; }
body.host { font-size: 28px; }
body.host #app { max-width: 1200px; padding-bottom: 90px; }
h1 { font-size: 2.2em; margin: .4em 0; text-shadow: 0 4px 0 #0004; }
h2 { font-size: 1.4em; margin: .5em 0; text-shadow: 0 3px 0 #0004; }
.dim { opacity: .8; font-weight: 500; }

button, input { font: inherit; border-radius: 16px; border: 0; padding: 14px 18px; }
button { background: #fff; color: #3b1a9e; cursor: pointer; box-shadow: 0 6px 0 #0005; transition: transform .1s, box-shadow .1s; }
button:hover:not(:disabled) { transform: translateY(-2px); }
button:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 #0005; }
button:focus-visible, input:focus-visible { outline: 4px solid #ffd84d; outline-offset: 2px; }
label { display: block; margin: 16px 0; }
input { display: block; width: 100%; margin-top: 8px; text-align: center; }
form button { width: 100%; }

.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
.opts > * { min-height: 90px; padding: 14px; border-radius: 16px; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 0 #0005; }
.o0 { background: #c0392b; } .o1 { background: #1f6fd0; } .o2 { background: #8a5a00; } .o3 { background: #1e8449; }
.sel { outline: 5px solid #fff; outline-offset: -5px; }
.sel::before { content: "✓ "; }
.opts.revealed > :not(.right) { opacity: .3; transform: scale(.94); transition: .4s; }

canvas { width: 100%; max-width: 400px; aspect-ratio: 1; background: #fff; border-radius: 16px; touch-action: none; box-shadow: 0 6px 0 #0005; }
.row { display: flex; gap: 12px; margin-top: 16px; }
.row button { flex: 1; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin: 20px 0; }
body.host .grid { grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); justify-content: center; }
.grid img { width: 100%; display: block; border-radius: 12px; background: #fff; box-shadow: 0 6px 0 #0005; }
.grid > :nth-child(odd) { rotate: -2deg; } .grid > :nth-child(even) { rotate: 2deg; }
.pic { padding: 6px; background: transparent; box-shadow: none; }
.pic.sel { background: #ffd84d; outline: 0; scale: 1.06; }
.pic.sel::before { content: ""; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0; list-style: none; }
.chips li { background: #fff; color: #3b1a9e; padding: 6px 18px; border-radius: 99px; box-shadow: 0 4px 0 #0005; }
ol.scores { list-style-position: inside; padding: 0; text-align: left; max-width: 500px; margin: 20px auto; }
ol.scores li { background: #0004; margin: 10px 0; padding: 10px 18px; border-radius: 16px; }
ol.scores li:first-child { background: #ffd84d; color: #3b1a9e; font-size: 1.3em; }
ol.scores li:first-child::after { content: " 👑"; }
ol.scores span { float: right; }
.url { font-size: 1.8em; color: #ffd84d; text-shadow: 0 4px 0 #0004; }

.controls { position: fixed; bottom: 0; left: 0; right: 0; display: flex; gap: 12px; justify-content: flex-end; align-items: center; padding: 12px 16px; font-size: 16px; }
.confetti { position: fixed; top: -20px; width: 12px; height: 18px; z-index: 5; pointer-events: none; animation: fall linear forwards; }

@keyframes drift { to { background-position: 300% 0; } }
@keyframes float { to { transform: translate(12vmax, 8vmax) scale(1.2); } }
@keyframes pop { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 70% { transform: scale(1.08) rotate(2deg); } 100% { transform: none; opacity: 1; } }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
@keyframes wiggle { 0%, 100% { transform: rotate(0) scale(1.05); } 25% { transform: rotate(-3deg) scale(1.1); } 75% { transform: rotate(3deg) scale(1.1); } }
@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* .pop is re-applied by fx.js only when the screen changes, so answer counts ticking up do not replay everything */
@media (prefers-reduced-motion: no-preference) {
  .pop h1, .pop h2, .pop form { animation: pop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
  .pop .opts > *, .pop .grid > *, .pop ol.scores li, .pop canvas { animation: rise .5s cubic-bezier(.3, 1.4, .5, 1) both; }
  .pop .opts > :nth-child(2), .pop .grid > :nth-child(2) { animation-delay: .1s; }
  .pop .opts > :nth-child(3), .pop .grid > :nth-child(3) { animation-delay: .2s; }
  .pop .opts > :nth-child(4), .pop .grid > :nth-child(n+4) { animation-delay: .3s; }
  /* scores build suspense from the bottom up, winner last */
  .pop ol.scores li { animation-delay: 1.2s; }
  .pop ol.scores li:nth-child(3) { animation-delay: 2s; }
  .pop ol.scores li:nth-child(2) { animation-delay: 2.8s; }
  .pop ol.scores li:first-child { animation: pop .8s 3.8s cubic-bezier(.3, 1.6, .5, 1) both; }
  .opts .right { animation: wiggle .5s 3 !important; }
  .chips li:last-child { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }
  .url { animation: pulse 1.6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { body, body::before, body::after { animation: none; } .confetti { display: none; } }