#game label{font-size:15px;display:inline-flex;align-items:center;gap:6px}
#game .dc-lbl{font-size:15px;opacity:.8}
#game .dc-pn{min-width:1.4em;text-align:center;font-size:17px}
#game .dc-panel[hidden]{display:none}
#game .dc-modes button{flex:1 1 auto;min-width:0;padding:7px 6px;white-space:nowrap}
#game .dc-names{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px;margin:0 0 10px}
#game .dc-names input{font:inherit;font-size:15px;width:100%;min-width:0;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);min-height:40px;user-select:text;-webkit-user-select:text}
#game .dc-score{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 10px;table-layout:fixed}
#game .dc-score th,#game .dc-score td{border-bottom:1px solid var(--line);padding:6px 4px;text-align:center;overflow-wrap:anywhere}
#game .dc-score th{font-size:13px;font-weight:600;opacity:.75}
#game .dc-score tr.turn td{background:var(--accent-soft)}
#game .dc-score tr.turn td:first-child{font-weight:800}
#game .dc-score tr.won td:last-child{color:var(--accent);font-weight:800}
#game .dc-oescore{font-size:14px;opacity:.9}
#game .dc-oescore b{font-variant-numeric:tabular-nums}

#game .dc-tray{--ds:clamp(48px,14vw,78px);display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:10px;min-height:calc(var(--ds) * 2 + 34px);padding:12px 6px;border-radius:14px;background:var(--board);perspective:600px;cursor:pointer;outline-offset:3px}
#game .dc-tray:focus-visible{outline:3px solid var(--accent)}
#game .die{position:relative;width:var(--ds);height:var(--ds);flex:none;display:grid;place-items:center;transform-style:preserve-3d}
#game .die.d6{background:var(--card);border:1px solid var(--line);border-radius:18%;box-shadow:inset 0 -4px 0 rgb(0 0 0 / .12),0 3px 6px rgb(0 0 0 / .25);display:block}
#game .die.d6 i{width:calc(var(--ds) * .17);height:calc(var(--ds) * .17);border-radius:50%;background:var(--fg);visibility:hidden;position:absolute;transform:translate(-50%,-50%)}
#game .die.d6 i:nth-child(3n+1){left:24%}#game .die.d6 i:nth-child(3n+2){left:50%}#game .die.d6 i:nth-child(3n){left:76%}
#game .die.d6 i:nth-child(-n+3){top:24%}#game .die.d6 i:nth-child(n+4):nth-child(-n+6){top:50%}#game .die.d6 i:nth-child(n+7){top:76%}
#game .die.d6 i.on{visibility:visible}
#game .die.d6.v1 i.on{background:#d4483b;width:calc(var(--ds) * .26);height:calc(var(--ds) * .26)}
#game .die.poly{background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:calc(var(--ds) * .36);font-variant-numeric:tabular-nums;filter:drop-shadow(0 3px 3px rgb(0 0 0 / .25))}
#game .die.d4{clip-path:polygon(50% 4%,97% 92%,3% 92%);padding-top:22%}
#game .die.d8{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
#game .die.d10{clip-path:polygon(50% 0,96% 40%,50% 100%,4% 40%);padding-bottom:14%}
#game .die.d12{clip-path:polygon(50% 0,98% 36%,80% 96%,20% 96%,2% 36%)}
#game .die.d20{clip-path:polygon(50% 0,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%)}
#game .die.rolling{animation:dc-tumble .8s cubic-bezier(.25,.7,.35,1)}
@keyframes dc-tumble{
  0%{transform:translateY(-40%) rotateX(0) rotateY(0) rotateZ(0) scale(.85)}
  45%{transform:translateY(10%) rotateX(calc(var(--rx) * .6)) rotateY(calc(var(--ry) * .6)) rotateZ(calc(var(--rz) * .6))}
  75%{transform:translateY(-6%) rotateX(calc(var(--rx) * .9)) rotateY(calc(var(--ry) * .9)) rotateZ(calc(var(--rz) * .9))}
  100%{transform:translateY(0) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(1)}
}
#game .dc-sum{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 12px;margin:10px 0 4px;min-height:44px}
#game .dc-sumv{font-size:34px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
#game .dc-vals{font-size:15px;opacity:.75;font-variant-numeric:tabular-nums}
#game .dc-go{justify-content:center;margin:4px 0 0}
#game .dc-go button.primary{min-width:180px;font-weight:700;font-size:17px;min-height:48px}
#game .dc-hint{font-size:13px;opacity:.65}
#game .status{text-align:center;min-height:1.5em}

#game .dc-box{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
#game .dc-box summary{cursor:pointer;font-weight:700;margin-bottom:6px}
#game .dc-ftot{font-weight:400;font-size:13px;opacity:.75}
#game .dc-freq{display:grid;gap:3px;font-size:13px;font-variant-numeric:tabular-nums}
#game .dc-frow{display:grid;grid-template-columns:2.2em 1fr 6.6em;align-items:center;gap:6px}
#game .dc-frow b{text-align:right}
#game .dc-bar{height:12px;border-radius:6px;background:var(--bg2,var(--bg));overflow:hidden}
#game .dc-bar span{display:block;height:100%;width:0;background:var(--accent);border-radius:6px;transition:width .25s}
#game .dc-frow em{font-style:normal;opacity:.8;text-align:right;white-space:nowrap}
#game .dc-hhead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
#game .dc-hhead button{min-height:34px;padding:4px 10px;font-size:14px}
#game .dc-hist{margin:0;padding-left:30px;max-height:220px;overflow:auto;font-size:14px;line-height:1.55;user-select:text;-webkit-user-select:text}
#game .dc-hist:empty::before{content:"아직 굴리지 않았습니다.";opacity:.6;margin-left:-30px}
#game .dc-hist li span{opacity:.7}
@media (max-width:600px){#game .dc-modes{gap:6px}#game .dc-modes button{font-size:14px;padding:7px 4px}#game .dc-sumv{font-size:30px}#game .dc-tray{gap:8px}}
@media (prefers-reduced-motion:reduce){#game .die.rolling{animation:none}#game .dc-bar span{transition:none}}