.dp-legend{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--color-line);border-radius:12px;background:var(--color-surface);flex:none;padding:9px 0}.dp-legend>div{text-align:center;border-right:1px solid var(--color-line)}.dp-legend>div:last-child{border:0}.dp-legend b{font-size:21px;line-height:23px}.dp-legend small{display:block;font-size:9px;color:var(--color-muted);margin-top:3px}
.dp-core{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;flex:1;min-height:0;text-align:center}.dp-core h2{font-size:clamp(18px,4vw,25px);max-width:310px}.dp-ring{padding:16px;border:1px solid var(--color-line);border-radius:50%;background:radial-gradient(circle,var(--color-signal-faint) 40%,transparent 70%);box-shadow:0 0 0 8px var(--color-line-soft);margin:9px}
#dpButton{width:clamp(128px,24dvh,210px);height:clamp(128px,24dvh,210px);border-radius:50%;border:5px solid var(--color-signal-soft);background:var(--color-ink);color:var(--color-on-ink);box-shadow:0 8px 0 var(--color-signal-deep),0 15px 23px #0002;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;cursor:pointer;font:inherit;touch-action:manipulation;transition:transform .15s,box-shadow .15s}#dpButton b{font-size:26px}#dpButton small{font-size:10px;opacity:.75}#dpButton:active,#dpButton.chosen{transform:translateY(5px);box-shadow:0 3px 0 var(--color-signal-deep),0 8px 13px #0001}#dpButton:disabled{cursor:default}#dpButton.pulse{animation:dp-pulse 1.7s infinite}.dp-core>p{font-size:12px;line-height:17px;color:var(--color-muted);min-height:17px}.dp-core>span:last-child{font-size:9px;color:var(--color-soft)}
@keyframes dp-pulse{50%{border-color:var(--color-signal-deep)}}
@media(max-height:650px){.dp-core{gap:5px}.dp-ring{padding:9px;margin:4px;box-shadow:0 0 0 5px var(--color-line-soft)}#dpButton{width:126px;height:126px}#dpButton b{font-size:20px;white-space:nowrap}.dp-legend{padding:5px 0}.dp-legend b{font-size:18px}.dp-core h2{font-size:18px}.dp-core>p{font-size:10px}}
@media(max-height:500px) and (min-width:600px){#pgBoard{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto}.dp-core{grid-column:1;grid-row:1/4}.dp-legend{grid-column:2}.pg-people{grid-column:2}.pg-round-bar{grid-column:2}#dpButton{width:112px;height:112px}.dp-ring{padding:5px}}
@media(prefers-reduced-motion:reduce){#dpButton{animation:none!important;transition:none}}