.d-strip{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--ink);color:#fff;padding:10px 14px 7px;font-family:var(--slab);font-weight:600;font-size:14px;letter-spacing:.07em;text-transform:uppercase;line-height:1.1}
.d-strip-note{color:var(--yellow);text-align:right;min-width:0}
.d-wiring{height:10px;background:linear-gradient(90deg,var(--yellow) 0 25%,var(--blue) 25% 50%,var(--green) 50% 75%,var(--violet) 75%);border-bottom:var(--rule) solid var(--ink)}
.d-play{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 32px;align-items:start;min-width:0}
.d-frame,.d-stats,.d-locked{background:var(--paper);border:3px solid var(--ink);min-width:0}
.d-frame{box-shadow:10px 10px 0 rgba(20,23,26,.16)}
.d-frame-main{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);align-items:start;background:var(--shade)}
.d-frame-stage{position:relative;min-width:0;--ratio:16/9}
.d-frame-panel{align-self:stretch;min-width:0;background:var(--paper);border-left:var(--rule) solid var(--ink)}
.d-counters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:var(--rule) solid var(--ink)}
.d-counters li{padding:12px 18px 6px;min-width:0}
.d-counters li + li{border-left:1px solid var(--hair)}
.d-counter-name{display:block;font-family:var(--slab);font-weight:700;font-size:14.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;color:var(--grey)}
.d-counter-value{display:block;font-family:var(--slab);font-weight:800;font-size:44px;line-height:1.05;font-variant-numeric:tabular-nums}
.d-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:14px 16px 14px}
.d-start{width:100%;min-height:60px;font-size:24px;padding:14px 26px 10px}
.page-play .btn[disabled],.page-play .btn[disabled]:hover{background:var(--shade);color:var(--grey);border-color:var(--grey);cursor:not-allowed;transform:none;box-shadow:none}
.page-play .btn[disabled]::after,.page-play .btn[disabled]:hover::after{width:16px;opacity:.6}
.d-cycle-label{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin-bottom:7px;font-size:15px;line-height:1.3}
.d-cycle-label strong{font-family:var(--slab);font-size:17px}
.d-cycle{position:relative;display:block;height:22px;margin:2px;box-shadow:0 0 0 2px var(--ink);background:#fff;overflow:hidden}
.d-cycle-fill{position:absolute;inset:0;background:var(--tone);transform:scaleX(0);transform-origin:left center}
.d-cycle::after{content:"";position:absolute;inset:0;opacity:.45;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1.5px),var(--ink) calc(20% - 1.5px) 20%)}
.d-frame.is-running .d-cycle-fill{animation:d-cycle-run 5s linear both}
@keyframes d-cycle-run{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.d-frame-note{display:flex;align-items:center;gap:12px;border-top:var(--rule) solid var(--ink);padding:12px 18px 12px;font-size:15.5px;line-height:1.4}
.d-frame-note img{width:44px;height:44px;flex:none}
.d-stats-body{display:grid;gap:18px;padding:16px 18px 18px}
.d-vs li{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0 7px;border-top:1px solid var(--hair)}
.d-vs li:first-child{border-top:var(--rule) solid var(--ink)}
.d-vs-name{font-family:var(--slab);font-weight:700;font-size:17px;line-height:1.15}
.d-vs-bar{display:block;height:16px;margin:2px;box-shadow:0 0 0 2px var(--ink);background:repeating-linear-gradient(135deg,var(--hair) 0 1.5px,transparent 1.5px 7px),#fff}
.d-vs-value{font-size:15.5px;color:var(--grey);white-space:nowrap}
.d-chart{display:flex;align-items:center;justify-content:center;height:170px;border:var(--rule) solid var(--ink);background:linear-gradient(var(--hair) 1px,transparent 1px) 0 -1px/100% 34px,linear-gradient(90deg,var(--hair) 1px,transparent 1px) -1px 0/34px 100%,#fff}
.d-chart span{background:#fff;border:1.5px solid var(--ink);padding:5px 9px 3px;font-size:14.5px;line-height:1.2}
.d-chart-axis{display:flex;justify-content:space-between;gap:10px;margin-top:5px;font-size:14px;color:var(--grey)}
.d-stats-head{display:block;margin-bottom:6px}
.d-locked{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:22px 44px;align-items:start;padding:22px 22px 22px}
.d-locked-text{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.d-locked-title{font-family:var(--slab);font-weight:800;font-size:32px;line-height:1}
.d-locked-text p{max-width:47ch}
.d-rank{width:100%}
.d-rank td:last-child,.d-rank th:last-child{text-align:right;padding-right:0}
.d-badges{display:flex;flex-wrap:wrap;gap:14px 10px;margin-top:20px;padding-top:16px;border-top:2px dashed var(--ink)}
.d-badges li{display:flex;flex-direction:column;align-items:center;gap:8px;width:96px;text-align:center;font-size:14px;line-height:1.2;color:var(--grey)}
.d-badge{display:block;width:60px;height:60px;border:2px dashed var(--grey);background:#fff}
.d-badge-round{border-radius:50%}
.d-badge-diamond{transform:rotate(45deg) scale(.76)}
.d-badge-hex{border:0;background:var(--hair);clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%)}
.d-badge-tri{border:0;background:var(--hair);clip-path:polygon(50% 4%,100% 96%,0 96%)}
.page-play .marks{align-content:start}

@media (max-width:1020px){
  .d-play,.d-locked{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .d-frame{box-shadow:5px 5px 0 rgba(20,23,26,.16)}
  .d-strip{font-size:13px;padding:8px 12px 5px}
  .d-counters li{padding:10px 12px 4px}
  .d-counter-value{font-size:36px}
  .d-frame-main{grid-template-columns:minmax(0,1fr)}
  .d-frame-panel{border-left:0;border-top:var(--rule) solid var(--ink)}
  .d-controls{padding:14px 12px 14px}
  .d-frame-note{padding:12px}
  .d-stats-body{padding:14px 12px 16px}
  .d-vs li{grid-template-columns:minmax(0,1fr) auto}
  .d-vs-bar{grid-column:1/-1;order:3}
  .d-locked{padding:16px 12px 18px}
  .d-locked-title{font-size:26px}
  .d-badges li{width:calc(33.33% - 7px)}
}
@media (prefers-reduced-motion:reduce){
  .d-frame.is-running .d-cycle-fill{transform:none;background:repeating-linear-gradient(135deg,var(--tone) 0 6px,#fff 6px 12px)}
}