*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#45204f,#120d1c 60%);color:#fff;font-family:system-ui,Arial,sans-serif}
header{display:flex;justify-content:space-between;align-items:center;padding:20px 4vw;border-bottom:1px solid #ffffff20}
small{letter-spacing:.12em}
header small{letter-spacing:.22em;color:#ffca68;font-weight:800}
h1{font-size:clamp(26px,4vw,48px);margin:4px 0}
header p{margin:0;color:#d9cadd}
.status{border:1px solid #ffca68;border-radius:30px;padding:9px 16px;color:#ffca68;font-weight:800;white-space:nowrap}
.banner{margin:16px 4vw 0;padding:16px;text-align:center;font-size:clamp(22px,3.5vw,40px);font-weight:900;color:#2a1600;background:linear-gradient(90deg,#ffca68,#ff8d4d);border-radius:16px;animation:pulse 1.2s ease-in-out infinite alternate}
.banner[hidden]{display:none}
main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;max-width:1500px;margin:auto;padding:22px 4vw}
.board-head{text-align:center;margin:6px 0 20px}
.board-head h2{font-size:clamp(22px,3.5vw,36px);margin:0 0 6px}
.board-head p{color:#d9cadd;margin:0}
.boxes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.box{min-height:140px;border:2px solid #a95bb5;border-radius:18px;background:linear-gradient(145deg,#632b70,#281b3e);font-weight:900;box-shadow:0 8px 0 #170f25;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;text-align:center}
.box .gift{font-size:38px}
.box small{font-size:13px;color:#f6d5ff}
.box.revealed{background:#211a2b;border-color:#66566e;box-shadow:none}
.box.revealed.k-target{border-color:#ffca68;background:#3a2a10}
.box.revealed.k-enemy{border-color:#d1566a;background:#3a1620}
.box.revealed.k-surprise{border-color:#5fd4a3}
.box img{width:80px;height:80px;object-fit:contain}
.box .name{font-size:14px}
.box .by{font-size:11px;color:#c9b9ce}
.box.just{animation:pop .8s cubic-bezier(.2,1.6,.4,1)}
.side{display:flex;flex-direction:column;gap:16px}
.card{background:#1a1226cc;border:1px solid #ffffff22;border-radius:16px;padding:14px 16px}
.card h3{margin:0 0 10px;color:#ffca68;font-size:16px}
.rank,.feed{margin:0;padding:0;list-style:none}
.rank li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid #ffffff14;counter-increment:r}
.rank{counter-reset:r}
.rank li:before{content:counter(r) ".";color:#ffca68;width:1.6em;font-weight:800}
.rank .rn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed li{padding:7px 0;border-bottom:1px solid #ffffff14;font-size:14px;color:#eadff0;overflow-wrap:anywhere}
.feed li.win{color:#ffca68;font-weight:700}
.muted{color:#a898b0}
footer{text-align:center;color:#c9b9ce;padding:24px 0}
.empty{grid-column:1/-1;text-align:center;padding:60px 10px;color:#e4c9e9}
@keyframes pop{0%{transform:scale(.4) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.02)}}
@media(max-width:900px){main{grid-template-columns:1fr}.boxes{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.box{min-height:110px}}