/* 주사위 굴리기 */
.dc-settings { display: grid; gap: 12px 24px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .dc-settings { grid-template-columns: 1fr 1fr; } }
.dc-settings > * { min-width: 0; }

/* 주사위 판 */
.dc-tray {
  --ds: clamp(50px, 14vw, 76px);
  position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 26px;
  min-height: 200px; padding: 44px 16px 30px; border-radius: var(--radius-lg); cursor: pointer;
  background: radial-gradient(ellipse at 50% 35%, #2f8a62 0%, #1d5c42 100%);
  box-shadow: inset 0 0 0 6px #7a5230, inset 0 0 0 8px #5e3d22, inset 0 0 36px rgba(0, 0, 0, .38);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.dc-tray.is-many { --ds: clamp(44px, 12vw, 66px); gap: 20px 22px; }
.dc-tray:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.game-shell.is-full .dc-tray { --ds: clamp(56px, 11vw, 96px); min-height: 280px; }

.dc-die { position: relative; width: var(--ds); height: var(--ds); flex: none; }
.dc-toss { position: absolute; inset: 0; perspective: 520px; z-index: 1; }
.dc-shadow {
  position: absolute; left: 8%; right: 8%; bottom: -9px; height: 14px; border-radius: 50%;
  background: rgba(0, 0, 0, .38); filter: blur(4px); z-index: 0;
}
.dc-die.is-rolling .dc-toss { animation: dc-jump 1.2s cubic-bezier(.3, .6, .4, 1) var(--delay, 0ms) both; }
.dc-die.is-rolling .dc-shadow { animation: dc-shadow 1.2s cubic-bezier(.3, .6, .4, 1) var(--delay, 0ms) both; }

/* 6면체 */
.dc-cube { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.15, .75, .25, 1); }
.dc-face {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: 13%; border-radius: 16%;
  background: radial-gradient(circle at 30% 25%, #ffffff 0%, #f4efe7 65%, #e4dccf 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), inset 0 -4px 8px rgba(0, 0, 0, .09);
}
.dc-f1 { transform: rotateY(0deg) translateZ(calc(var(--ds) / 2)); }
.dc-f2 { transform: rotateX(90deg) translateZ(calc(var(--ds) / 2)); }
.dc-f3 { transform: rotateY(90deg) translateZ(calc(var(--ds) / 2)); }
.dc-f4 { transform: rotateY(-90deg) translateZ(calc(var(--ds) / 2)); }
.dc-f5 { transform: rotateX(-90deg) translateZ(calc(var(--ds) / 2)); }
.dc-f6 { transform: rotateY(180deg) translateZ(calc(var(--ds) / 2)); }
.dc-pip {
  width: 76%; height: 76%; place-self: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4b5066, #14161e); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .4);
}
.dc-f1 .dc-pip { width: 120%; height: 120%; background: radial-gradient(circle at 35% 30%, #ff7073, #c81d25); }

/* 20면체 숫자 타일 */
.dc-tile {
  position: absolute; inset: -4%; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
  background: linear-gradient(160deg, #9b6bff 0%, #5b3bd6 100%);
  transition: transform 1.2s cubic-bezier(.15, .75, .25, 1);
}
.dc-tile::before {
  content: ""; position: absolute; left: 17%; right: 17%; top: 20%; bottom: 17%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); background: rgba(255, 255, 255, .17);
}
.dc-num {
  position: relative; z-index: 1; color: #fff; font-weight: 900; font-family: var(--font-num);
  font-size: calc(var(--ds) * .36); line-height: 1; margin-top: 8%; text-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}
.dc-die.is-spinning .dc-num { opacity: .8; }

@keyframes dc-jump {
  0% { transform: translateY(0); }
  22% { transform: translateY(-58px); }
  48% { transform: translateY(0); }
  62% { transform: translateY(-16px); }
  76% { transform: translateY(0); }
  87% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
@keyframes dc-shadow {
  0% { transform: scale(1); opacity: 1; }
  22% { transform: scale(.45); opacity: .35; }
  48% { transform: scale(1); opacity: 1; }
  62% { transform: scale(.8); opacity: .75; }
  76%, 100% { transform: scale(1); opacity: 1; }
}

/* 합계·기록 */
.dc-total { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 78px; text-align: center; }
.dc-sum { font-size: clamp(30px, 8vw, 46px); font-weight: 900; font-family: var(--font-num); letter-spacing: -0.02em; line-height: 1.15; }
.dc-detail { color: var(--text-2); font-weight: 700; font-size: 15px; min-height: 1.4em; font-family: var(--font-num); }
.dc-history { margin: 8px 0 0; padding-left: 1.4em; display: grid; gap: 3px; font-weight: 600; font-family: var(--font-num); }
.dc-history li:first-child { color: var(--primary); font-weight: 800; }

/* 대결 */
.dc-info { margin: 0; text-align: center; }
.dc-info .tag { font-size: 13px; padding: 4px 12px; }
.dc-banner-t { font-weight: 900; max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dc-row {
  --c: var(--primary);
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-weight: 700;
}
.dc-row-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.dc-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-row-vals { color: var(--text-3); font-size: 13px; font-family: var(--font-num); white-space: nowrap; }
.dc-row-sum { font-weight: 900; font-family: var(--font-num); white-space: nowrap; }
.dc-row.is-cur { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent); }
.dc-row.is-tied { background: var(--accent-soft); }
.dc-row.is-hit { border-color: var(--primary); background: var(--primary-soft); }
@media (max-width: 480px) {
  .dc-row { grid-template-columns: 10px minmax(0, 1fr) auto; padding: 10px 12px; }
  .dc-row-vals { display: none; }
}