.d-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; margin-bottom: 10px; }
.d-p { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 12px; background: var(--bg-elevated); border: 2px solid var(--border); transition: opacity .3s, border-color .2s, transform .2s; min-width: 0; position: relative; }
.d-p .pk-av { width: 26px; height: 26px; font-size: .75rem; }
.d-p b { font-size: .72rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-h { font-size: .6rem; letter-spacing: -1px; white-space: nowrap; }
.d-p.dead { opacity: .35; filter: grayscale(1); }
.d-p.me { border-color: var(--accent); }
.d-p.done::after { content: "✓"; position: absolute; top: 2px; right: 6px; font-size: .7rem; color: var(--pk-good); font-weight: 900; }
.d-p.hit { animation: gShake .5s; border-color: var(--pk-bad); }
.d-q { background: linear-gradient(160deg, #1d1d2c, #2b1740); color: #fff; border-radius: 18px; padding: 16px; border: 1px solid #3a2a55; box-shadow: 0 10px 30px rgba(80,20,120,.3); }
.d-qh { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 700; opacity: .8; text-transform: uppercase; }
.d-qt { font-size: 1.22rem; font-weight: 800; line-height: 1.35; margin-top: 10px; }
.d-sol { margin-top: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.1); font-weight: 700; }
.g-opt { position: relative; }
.d-who { display: flex; justify-content: center; gap: 2px; margin-top: 6px; flex-wrap: wrap; }
.d-who .pk-av { width: 20px; height: 20px; font-size: .6rem; animation: gPop .3s both; }
.d-banner { margin: 12px 0; padding: 10px 14px; border-radius: 12px; text-align: center; font-weight: 800; background: var(--bg-elevated); border: 1px solid var(--border); }
.d-banner.bad { background: color-mix(in srgb, var(--pk-bad) 18%, var(--bg-elevated)); border-color: var(--pk-bad); }
.d-banner.good { background: color-mix(in srgb, var(--pk-good) 18%, var(--bg-elevated)); border-color: var(--pk-good); }
.d-vote { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.d-vb { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; min-height: 96px; border-radius: 14px; border: 2px solid var(--border); background: var(--bg-elevated); color: var(--text); font: inherit; cursor: pointer; transition: transform .1s, border-color .15s; }
.d-vb:active { transform: scale(.96); }
.d-vb.sel { border-color: var(--pk-bad); background: color-mix(in srgb, var(--pk-bad) 15%, var(--bg-elevated)); }
.d-vb small { color: var(--text-muted); font-size: .7rem; }
.d-vb:disabled:not(.sel) { opacity: .7; cursor: default; }
.d-bars { display: grid; gap: 8px; margin: 14px 0; }
.d-bar { display: flex; align-items: center; gap: 10px; }
.d-bt { flex: 1; height: 14px; border-radius: 99px; background: var(--border); overflow: hidden; }
.d-bt i { display: block; height: 100%; background: linear-gradient(90deg, #ff5c7a, #ff8a3d); animation: dGrow .8s ease both; transform-origin: left; }
@keyframes dGrow { from { transform: scaleX(0); } }
.d-plane { font-size: 3.5rem; animation: pkBob 2s infinite; }
.d-next { margin-top: 14px; }