* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #1b1030; color: #fff1d0; font: 17px/1.5 system-ui, sans-serif; user-select: none; }
main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; height: 100%; }
.play { display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; cursor: pointer; transition: background .08s; }
.play.lit { background: #2c1a45; }
.play.early { background: #4a1420; }
.lamp { position: relative; width: 160px; height: 220px; margin-bottom: 8px; }
.shade { position: absolute; left: 10px; right: 10px; top: 0; height: 90px; background: #e0632e; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); border-radius: 6px; z-index: 2; }
.bulb { position: absolute; left: 50%; top: 70px; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; background: #4b3d58; transition: background .05s, box-shadow .05s; }
.lit .bulb { background: #ffe58a; box-shadow: 0 0 60px 30px rgba(255, 210, 90, .55), 0 0 160px 80px rgba(255, 194, 60, .25); }
.stem { position: absolute; left: 50%; top: 90px; width: 8px; height: 110px; margin-left: -4px; background: #c9a36a; }
.foot { position: absolute; left: 30px; right: 30px; bottom: 0; height: 18px; border-radius: 50% 50% 6px 6px; background: #8a4b26; }
.msg { margin: 0; font: 800 clamp(26px, 5vw, 44px)/1.1 system-ui, sans-serif; letter-spacing: -1px; }
.sub { margin: 0; opacity: .75; min-height: 1.5em; }
button { font: 800 18px system-ui, sans-serif; padding: 12px 30px; border-radius: 999px; border: 0; background: #ffc23c; color: #1b1030; box-shadow: 0 4px 0 #b8861f; cursor: pointer; }
button:active { transform: translateY(3px); box-shadow: 0 1px 0 #b8861f; }
form { display: grid; gap: 8px; cursor: default; }
.row { display: flex; gap: 8px; }
input { font: inherit; padding: 10px 14px; border-radius: 999px; border: 2px solid #5b4778; background: #120a22; color: #fff1d0; width: 200px; }
input:focus { outline: none; border-color: #ffc23c; }
.board { background: #120a22; padding: 28px 24px; overflow: auto; }
.board h2 { margin: 0 0 16px; font: 800 22px system-ui, sans-serif; }
ol { margin: 0; padding: 0; list-style: none; counter-reset: r; }
li { counter-increment: r; display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #2c1f44; }
li::before { content: counter(r); width: 1.6em; opacity: .5; font-weight: 700; }
li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
li b { font-variant-numeric: tabular-nums; color: #ffc23c; }
li.me { color: #ffc23c; }
li.empty::before { content: none; }
li.empty { opacity: .6; border: 0; }
@media (max-width: 700px) { main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .board { max-height: 40vh; } .lamp { transform: scale(.75); margin: -20px 0 -30px; } }