/* Snack Draft: a retro diner. Teal booths, cherry red, mustard, a checked tablecloth and floating snacks. */
:root {
  --bg: #0d2a2c; --bg2: #123638; --card: rgba(255, 246, 225, 0.06); --card2: #1d4a4c; --line: #2e6265;
  --text: #fff6e1; --muted: #a9cfc9; --accent: #ffc23d; --yellow: #ffc23d; --red: #ff4d5e; --green: #7be08c;
  --grad: linear-gradient(135deg, #ff6b6b, #ff4d5e);
  --font-head: 'Lilita One', var(--font-body); --font-body: 'Nunito', Inter, system-ui, sans-serif; --head-weight: 400;
  --radius: 22px;
}
body { background: radial-gradient(1000px 600px at 50% -10%, #1f5a5c, transparent 70%), #0d2a2c fixed; }
.btn { color: #fff; background: linear-gradient(180deg, #ff6b78, #e8394c); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); font-family: var(--font-head); font-weight: 400; letter-spacing: 0.03em; font-size: 1.15rem; box-shadow: 0 5px 0 #9c1f2e, 0 10px 24px rgba(255, 77, 94, 0.35); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #9c1f2e; }
.btn.ghost { background: var(--card2); text-shadow: none; box-shadow: 0 4px 0 #082022; }
.card { background: #143c3e; border: 2px solid #2e6265; box-shadow: 0 10px 0 rgba(0, 0, 0, 0.18); }
.hero { color: #ffc23d; text-shadow: 0 5px 0 #b3261e, 0 0 30px rgba(255, 194, 61, 0.35); transform: rotate(-3deg); }
.big-code { background: none; color: #ffc23d; -webkit-text-fill-color: #ffc23d; text-shadow: 0 4px 0 #b3261e; }
.banner { color: #ffc23d; text-shadow: 0 3px 0 #b3261e; }
.tv-top .title { color: #ffc23d; }
.pop { animation: plate 0.6s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes plate { 0% { transform: translateY(-60px) rotate(-10deg); opacity: 0; } 60% { transform: translateY(6px) rotate(2deg); opacity: 1; } 100% { transform: none; } }

.scene .food { position: absolute; bottom: -10vh; opacity: 0.12; animation: floatup 20s linear infinite; filter: saturate(0.8); }
@keyframes floatup { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(-125vh) rotate(360deg); } }
.scene .cloth { position: absolute; left: 0; right: 0; bottom: 0; height: 2.4vh; min-height: 14px; opacity: 0.7;
  background: repeating-conic-gradient(#ff4d5e 0 25%, #fff6e1 0 50%) 0 0 / 2.4vh 2.4vh; }
.phone .scene .cloth { display: none; }
.back-link { bottom: calc(max(2.4vh, 14px) + 8px); }