:root { color: #f8fafc; background: #101828; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 8% 0%, #1e4c4b 0, transparent 32rem), radial-gradient(circle at 95% 100%, #263b70 0, transparent 34rem), #101828; }
main { width: min(100% - 2rem, 1060px); margin: 0 auto; padding: 4rem 0; }
h1, p { margin-top: 0; } h1 { font-size: clamp(2.25rem, 6vw, 4.5rem); letter-spacing: -0.06em; margin-bottom: .5rem; } .eyebrow { color: #6ee7d5; font-size: .78rem; font-weight: 800; letter-spacing: .12em; margin-bottom: .65rem; } .intro { color: #cbd5e1; font-size: 1.05rem; line-height: 1.6; }
.join-card { max-width: 470px; margin: 8vh auto; padding: 2.5rem; border: 1px solid #ffffff21; border-radius: 1.25rem; background: #162133cc; box-shadow: 0 25px 60px #02061780; } form { display: grid; gap: 1rem; margin-top: 2rem; } label { display: grid; gap: .45rem; font-size: .88rem; font-weight: 700; color: #dbeafe; } input { width: 100%; padding: .8rem .9rem; border: 1px solid #53647e; border-radius: .55rem; background: #0f172a; color: white; font: inherit; } input:focus, button:focus-visible { outline: 3px solid #5eead499; outline-offset: 2px; }
button { border: 0; border-radius: .6rem; padding: .8rem 1rem; background: #42d3bd; color: #082f2a; font: 800 .92rem/1 inherit; cursor: pointer; } button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); } button:disabled { cursor: not-allowed; opacity: .5; } .error { min-height: 1.2rem; margin: -.2rem 0 0; color: #fda4af; font-size: .9rem; } .note { margin: 1.4rem 0 0; color: #8fa4bf; font-size: .82rem; }
.hidden { display: none; }.room-header, .status-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.room-header h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0; }.connection { display: flex; align-items: center; gap: .5rem; color: #a7f3d0; font-size: .9rem; }.connection span { width: .55rem; height: .55rem; background: #34d399; border-radius: 50%; box-shadow: 0 0 0 .22rem #34d39926; }.status-row { margin: 2rem 0 1.2rem; }.status-row p { margin: 0; color: #cbd5e1; }.actions { display: flex; gap: .65rem; }.secondary { background: transparent; border: 1px solid #5e718d; color: #dbeafe; }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999; }
.seats { display: grid; grid-template-columns: repeat(7, 1fr); gap: .75rem; }.seat { min-height: 145px; padding: 1rem; border-radius: 1rem; background: #172338; border: 1px solid #ffffff16; }.seat.occupied { display: grid; grid-template-columns: 2.5rem 1fr; grid-template-rows: 2.4rem 1fr; gap: .6rem; }.avatar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #253d64; color: #bfdbfe; font-weight: 800; }.seat strong { display: block; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; }.seat small { color: #7dd3fc; font-weight: 600; }.seat p { color: #9bb0ca; font-size: .77rem; margin: .35rem 0 0; }.vote { grid-column: 1 / -1; display: grid; place-items: center; min-height: 57px; border-radius: .6rem; background: #0e1728; color: #8ba0bd; font-weight: 800; font-size: 1.5rem; }.vote.chosen { border: 1px solid #42d3bd66; color: #6ee7d5; }.empty { border: 1px dashed #56657e80; background: #111c2e80; }.empty-seat { color: #7184a0; font-size: .86rem; }.empty-seat span { display: block; margin-top: .35rem; color: #4f637e; font-size: .75rem; }
.average { margin-top: 1.5rem; text-align: center; font-size: 1.1rem; font-weight: 700; color: #6ee7d5; }.deck-section { margin-top: 3.5rem; }.deck { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .55rem; }.card { min-height: 80px; padding: .5rem; background: #e8fdf8; color: #0f3c39; border: 2px solid transparent; border-radius: .75rem; font-size: 1.3rem; box-shadow: 0 5px 0 #9ed8ce; }.card.selected { background: #42d3bd; border-color: #d1fae5; transform: translateY(-.4rem); box-shadow: 0 9px 0 #218c7c; }
@media (max-width: 760px) { main { padding: 1.5rem 0 2.5rem; }.join-card { margin: 2rem auto; padding: 1.6rem; }.room-header, .status-row { align-items: flex-start; flex-direction: column; }.actions { width: 100%; }.actions button { flex: 1; }.seats { grid-template-columns: repeat(2, 1fr); }.deck { grid-template-columns: repeat(4, 1fr); }.card { min-height: 65px; } }