.dd-page {
  max-width: 1040px;
  padding-top: 46px;
}

.dd-intro {
  max-width: 900px;
  margin-bottom: 22px;
}
.dd-intro h1 { max-width: 780px; }
.dd-intro .lede { max-width: 880px; }

.dd-challenge {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto 12px;
  padding: 10px 14px;
  border: 1px solid #d7e27b;
  border-radius: 13px;
  background: var(--accent-soft);
}
.dd-challenge.hidden { display: none; }
.dd-challenge span {
  color: #5d632e;
  font-size: .6rem;
  font-weight: 950;
  letter-spacing: .1em;
}
.dd-challenge strong { font-size: .92rem; }
.dd-challenge strong b { font-size: 1.18rem; }
.dd-challenge em {
  justify-self: end;
  color: #5d632e;
  font-size: .68rem;
  font-style: normal;
  font-weight: 780;
}

.dd-shell {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid #11150f;
  border-radius: 20px;
  background: #1c211a;
  box-shadow: 0 16px 42px rgba(28, 33, 26, .16);
}

.dd-topbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: #171c16;
}
.dd-stat {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 9px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.dd-stat:last-child { border-right: 0; }
.dd-stat span {
  color: #aab0a4;
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.dd-stat strong {
  margin-top: 2px;
  color: #fff;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: -.045em;
}
.dd-lives-stat strong {
  min-height: 24px;
  font-size: 1.18rem;
  letter-spacing: .04em;
}
.dd-life-hats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.dd-life-hat {
  display: block;
  width: 23px;
  height: 23px;
  object-fit: contain;
  transition: opacity .16s ease, filter .16s ease, transform .16s ease;
}
.dd-life-hat.is-lost {
  opacity: .16;
  filter: grayscale(1);
  transform: scale(.88);
}

.dd-wall-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 9px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: #1b2119;
}
.dd-wall-status-copy {
  min-width: 0;
}
.dd-wall-status-copy strong,
.dd-wall-status-copy span {
  display: block;
}
.dd-wall-status-copy strong {
  color: #e5ff50;
  font-size: .78rem;
  font-weight: 950;
  line-height: 1.2;
  letter-spacing: .1em;
}
.dd-wall-status-copy span {
  margin-top: 3px;
  color: #b8bfb2;
  font-size: .67rem;
  font-weight: 760;
  line-height: 1.35;
}
.dd-wall-direction {
  align-self: center;
  color: #e5ff50;
  font-size: .71rem;
  font-weight: 950;
  line-height: 1.2;
  letter-spacing: .07em;
  white-space: nowrap;
}

.dd-stage-wrap {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    #20261e;
  background-size: 24px 24px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.dd-stage {
  display: block;
  width: 100%;
  height: auto;
}

.dd-start-card {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: min(520px, calc(100% - 34px));
  transform: translate(-50%, -50%);
  padding: 18px 18px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 17px;
  background: rgba(23,28,22,.95);
  box-shadow: 0 16px 36px rgba(0,0,0,.32);
  color: #fff;
  text-align: center;
  backdrop-filter: blur(7px);
}
.dd-start-card.is-hidden { display: none; }
.dd-start-card .section-kicker { margin-bottom: 5px; color: #e5ff50; }
.dd-start-card h2 { margin: 0; color: #fff; font-size: 1.35rem; letter-spacing: -.035em; }
.dd-start-card > p:last-child { margin: 11px 0 0; color: #bfc5ba; font-size: .72rem; line-height: 1.45; }
.dd-start-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 13px;
}
.dd-start-rules span {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  color: #d5d9d1;
  font-size: .69rem;
  font-weight: 760;
}
.dd-start-rules b { color: #e5ff50; font-weight: 950; }

.dd-wall-complete {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%) scale(1);
  min-width: 230px;
  padding: 16px 20px;
  border: 2px solid #e5ff50;
  border-radius: 15px;
  background: rgba(23,28,22,.95);
  color: #fff;
  text-align: center;
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
  animation: ddCompletePop .3s ease-out both;
}
.dd-wall-complete.hidden { display: none; }
.dd-wall-complete span { display: block; color: #e5ff50; font-size: .7rem; font-weight: 950; letter-spacing: .14em; }
.dd-wall-complete strong { display: block; margin-top: 2px; font-size: 2rem; letter-spacing: -.04em; }
@keyframes ddCompletePop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.dd-controls {
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  gap: 1px;
  border-top: 1px solid rgba(255,255,255,.11);
  border-bottom: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.08);
}
.dd-control {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 0;
  background: #171c16;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .12s ease, transform .08s ease;
}
.dd-control:hover { background: #252d22; }
.dd-control:active { transform: scale(.985); background: #30392c; }
.dd-control:disabled { opacity: .42; cursor: default; }
.dd-control span { color: #e5ff50; font-size: 1.85rem; font-weight: 950; line-height: 1; }
.dd-control strong { font-size: .73rem; font-weight: 950; letter-spacing: .09em; }
.dd-control-rotate { background: #20271d; }
.dd-control-rotate .dd-rotate-icon { font-size: 1.65rem; }
.dd-control.is-active { background: #354018; }

.dd-control-note {
  margin: 0;
  padding: 8px 12px 9px;
  background: #171c16;
  color: #aeb5a9;
  font-size: .65rem;
  font-weight: 700;
  text-align: center;
}

.dd-feedback {
  margin: 11px 14px 0;
  padding: 9px 12px;
  border-radius: 11px;
  font-size: .72rem;
  font-weight: 820;
  text-align: center;
}
.dd-feedback.hidden { display: none; }
.dd-feedback.is-good {
  border: 1px solid #778725;
  background: #34410d;
  color: #edf4b2;
}
.dd-feedback.is-bad {
  border: 1px solid #a55f55;
  background: #4b2823;
  color: #ffd9d3;
}
.dd-primary {
  width: calc(100% - 28px);
  min-height: 50px;
  margin: 12px 14px 14px;
}
.dd-shell.is-running .dd-primary { display: none; }
.dd-shell.is-correct .dd-stage-wrap::after,
.dd-shell.is-wrong .dd-stage-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  animation: ddFlash .22s ease-out both;
}
.dd-shell.is-correct .dd-stage-wrap::after { background: rgba(229,255,80,.14); }
.dd-shell.is-wrong .dd-stage-wrap::after { background: rgba(201,96,82,.18); }
.dd-shell.is-wrong { animation: ddShake .18s linear; }
@keyframes ddFlash { from { opacity: 1; } to { opacity: 0; } }
@keyframes ddShake {
  0%,100% { transform: translateX(0); }
  30% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
}

.dd-game-over {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(14,17,13,.73);
  backdrop-filter: blur(5px);
}
.dd-game-over.hidden { display: none; }
.dd-game-over-card {
  width: min(500px, 100%);
  padding: 22px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: #1c211a;
  color: #fff;
  box-shadow: 0 20px 46px rgba(0,0,0,.36);
  text-align: center;
}
.dd-game-over-card .section-kicker { color: #e5ff50; }
.dd-game-over-card h2 { margin: 4px 0 6px; color: #fff; font-size: 1.65rem; }
.dd-game-over-message { margin: 0; color: #c4c9c0; font-size: .83rem; }
.dd-game-over-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0;
}
.dd-game-over-stats span {
  padding: 10px 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  color: #aeb5a9;
  font-size: .63rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.dd-game-over-stats strong { display: block; margin-top: 2px; color: #fff; font-size: 1.35rem; letter-spacing: -.04em; }
.dd-game-over-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dd-game-over-actions button { min-height: 48px; }
.dd-share-status { min-height: 18px; margin: 9px 0 0; color: #bfc5ba; font-size: .67rem; }
.dd-challenge-result {
  margin: -3px 0 13px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #30392c;
  color: #e9eddf;
  font-size: .72rem;
  font-weight: 820;
}
.dd-challenge-result.hidden { display: none; }

.dd-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 900px;
  margin: 16px auto 0;
}
.dd-legend > div {
  min-height: 86px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.dd-legend strong { display: block; margin: 8px 0 3px; font-size: .76rem; }
.dd-legend small { display: block; color: var(--muted); font-size: .66rem; line-height: 1.38; }
.dd-legend-edge { display: block; width: 52px; height: 9px; border-radius: 4px; }
.dd-legend-factory { border: 1px solid #a7ad9f; background: linear-gradient(90deg,#d9ddd3,#f4f1e8,#d9ddd3); }
.dd-legend-cut { border-left: 4px solid #343a31; background: #eee9dc; }
.dd-legend-seam {
  display: block;
  width: 58px;
  height: 30px;
  border: 1px solid #bcb7ab;
  border-radius: 3px;
  background:
    linear-gradient(#60675c 0 0) 50% 0 / 1px 100% no-repeat,
    linear-gradient(#60675c 0 0) 0 68% / 50% 2px no-repeat,
    linear-gradient(#60675c 0 0) 100% 34% / 50% 2px no-repeat,
    #eee9dc;
}

/* SVG game art */
.dd-stage .dd-bg { fill: transparent; }
.dd-stage .dd-floor { fill: #171c16; }
.dd-stage .dd-floor-line { stroke: #697064; stroke-width: 3; }
.dd-stage .dd-wall-zone { fill: rgba(255,255,255,.022); stroke: rgba(255,255,255,.08); stroke-width: 1.5; stroke-dasharray: 7 7; }
.dd-stage .dd-track { fill: #9da49a; stroke: #e0e4dd; stroke-width: 1.2; }
.dd-stage .dd-track-shadow { fill: #737b70; }
.dd-stage .dd-layout-tick { stroke: #e5ff50; stroke-width: 1.6; opacity: .72; }
.dd-stage .dd-stud { fill: #858d82; stroke: #c8cec4; stroke-width: 1.1; }
.dd-stage .dd-stud-web { fill: #666f64; }
.dd-stage .dd-header { fill: #8b9388; stroke: #d2d7cf; stroke-width: 1.2; }
.dd-stage .dd-opening { fill: #171c16; stroke: #d0d5cc; stroke-width: 1.5; stroke-dasharray: 6 5; }
.dd-stage .dd-opening-label { fill: #afb6aa; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-anchor: middle; }
.dd-stage .dd-wall-title { fill: #e5ff50; font-size: 13px; font-weight: 950; letter-spacing: .12em; }
.dd-stage .dd-wall-meta { fill: #b1b8ac; font-size: 10.5px; font-weight: 780; }
.dd-stage .dd-hang-arrow { fill: #e5ff50; font-size: 12px; font-weight: 950; letter-spacing: .06em; text-anchor: end; }
.dd-stage .dd-board-installed { fill: #e7e3d8; stroke: #777d73; stroke-width: 1.45; }
.dd-stage .dd-board-installed-line { stroke: #aaa69c; stroke-width: 1; }
.dd-stage .dd-board-falling { fill: #f5f1e6; stroke: #161a14; stroke-width: 2.2; filter: drop-shadow(0 8px 8px rgba(0,0,0,.25)); }
.dd-stage .dd-board-falling-accent { fill: rgba(229,255,80,.12); stroke: #e5ff50; stroke-width: 1.5; }
.dd-stage .dd-factory-edge { fill: #d0d4ca; opacity: .95; }
.dd-stage .dd-cut-edge { fill: #4a5047; }
.dd-stage .dd-piece-label { fill: #242921; font-size: 12px; font-weight: 950; letter-spacing: .03em; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.dd-stage .dd-piece-sub { fill: #60665d; font-size: 8.5px; font-weight: 850; letter-spacing: .07em; text-anchor: middle; pointer-events: none; }
.dd-stage .dd-edge-label { fill: #31372f; font-size: 10px; font-weight: 950; letter-spacing: .07em; text-anchor: middle; dominant-baseline: middle; pointer-events: none; paint-order: stroke; stroke: rgba(245,241,230,.88); stroke-width: 2.4px; stroke-linejoin: round; }
.dd-stage .dd-next-label { fill: #9fa69a; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.dd-stage .dd-seam-callout { stroke: #e5ff50; stroke-width: 1.3; stroke-dasharray: 4 4; opacity: .75; }
.dd-stage .dd-seam-callout-text { fill: #e5ff50; font-size: 9px; font-weight: 900; letter-spacing: .06em; }

@media (max-width: 720px) {
  .dd-page { padding-top: 28px; }
  .dd-intro { margin-bottom: 15px; }
  .dd-intro h1 { font-size: clamp(2rem, 10vw, 3rem); }
  .dd-challenge { grid-template-columns: 1fr auto; margin-bottom: 9px; }
  .dd-challenge em { grid-column: 1 / -1; justify-self: start; }
  .dd-shell { border-radius: 16px; }
  .dd-stat { min-height: 57px; padding: 7px 4px; }
  .dd-stat span { font-size: .52rem; }
  .dd-stat strong { font-size: 1.23rem; }
  .dd-lives-stat strong { font-size: .93rem; }
  .dd-life-hat { width: 19px; height: 19px; }
  .dd-wall-status {
    grid-template-columns: 1fr;
    gap: 5px;
    min-height: 70px;
    padding: 9px 13px 10px;
  }
  .dd-wall-status-copy strong { font-size: .72rem; }
  .dd-wall-status-copy span { font-size: .62rem; }
  .dd-wall-direction { font-size: .66rem; }
  .dd-control { min-height: 64px; gap: 6px; }
  .dd-control span { font-size: 1.55rem; }
  .dd-control strong { font-size: .65rem; }
  .dd-control-note { font-size: .59rem; }
  .dd-start-card { width: calc(100% - 26px); padding: 14px 13px; }
  .dd-start-card h2 { font-size: 1.12rem; }
  .dd-start-rules { grid-template-columns: 1fr; gap: 5px; }
  .dd-start-rules span { min-height: 35px; padding: 6px 8px; font-size: .62rem; }
  .dd-start-card > p:last-child { font-size: .62rem; }
  .dd-legend { grid-template-columns: 1fr; gap: 8px; }
  .dd-legend > div { min-height: 0; }
  .dd-game-over { padding: 12px; }
  .dd-game-over-card { padding: 18px 14px; }
  .dd-game-over-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-control,
  .dd-wall-complete,
  .dd-shell.is-wrong,
  .dd-shell.is-correct .dd-stage-wrap::after,
  .dd-shell.is-wrong .dd-stage-wrap::after { animation: none !important; transition: none !important; }
}