/* Mobile-first, no internal scrollbars */
.dtdr-wrap {
  --bg: radial-gradient(1200px 700px at 50% 0%, #f8fbff 0%, #f3f7ff 30%, #eef2ff 60%, #e7ecff 100%);
  --ink: #1f2937;
  --accent: #6d28d9;
  --good: #10b981;
  --bad: #ef4444;
  --chip: #111827;
  position: relative; width: 100%; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto; gap: .5rem;
  background: var(--bg); overflow: hidden;
  color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

.dtdr-ui { display:flex; flex-direction:column; gap:.5rem; padding: .75rem; }

.dtdr-topbar {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.dtdr-brand { font-weight:800; letter-spacing:.2px; font-size: clamp(18px, 2.6vw, 24px); }
.dtdr-score { display:flex; gap:.75rem; font-weight:600; }
.dtdr-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

.dtdr-btn {
  background: white; border: 2px solid #e5e7eb; padding:.4rem .7rem; border-radius: 999px;
  font-weight:700; cursor:pointer; transition: transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.dtdr-btn:active { transform: scale(.98); }
.dtdr-chip { background:#111827; color:white; border:0; padding:.35rem .65rem; border-radius:999px; cursor:pointer; font-weight:700; }
.dtdr-chip[data-active="1"] { background: linear-gradient(135deg, #60a5fa, #a78bfa); }

.dtdr-stage { position: relative; flex:1; min-height: 55svh; display:grid; place-items:center; padding: .25rem .75rem 1rem; }
#dtdr-canvas { width: 100%; height: auto; max-height: 70svh; border-radius: 16px; background:
  linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.55)),
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="100" viewBox="0 0 180 100"><g fill="none" stroke="%23e5e7eb" stroke-width="1"><path d="M0,80 C30,60 60,100 90,80 C120,60 150,100 180,80" /></g></svg>') repeat center/auto 120px;
  box-shadow: 0 10px 30px rgba(64,71,86,.12); }

.dtdr-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.dtdr-tip {
  position:absolute; bottom: 10px; left: 12px; background: rgba(255,255,255,.9);
  padding:.35rem .6rem; border-radius:10px; font-weight:700; box-shadow:0 8px 20px rgba(0,0,0,.08);
  animation: floatUp 2.5s ease-in-out infinite;
}
@keyframes floatUp { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-4px);} }

.dtdr-footer { display:flex; justify-content:center; padding: .5rem .75rem 1rem; }
.dtdr-share { display:flex; gap:.5rem; align-items:center; }
.dtdr-icon { display:inline-flex; width:36px; height:36px; border-radius:999px; align-items:center; justify-content:center; background:white; border:1px solid #e5e7eb; color:#111827; }

.hidden { display:none !important; }

/* End screen */
.dtdr-end { position:fixed; inset:0; display:grid; place-items:center; backdrop-filter: blur(8px); background: rgba(0,0,0,.25); z-index: 40; }
.dtdr-end-card {
  width:min(92vw, 560px); background:white; border-radius: 20px; padding: 1rem; text-align:center;
  box-shadow: 0 20px 50px rgba(0,0,0,.25); animation: pop .35s ease both;
}
@keyframes pop { from { transform: scale(.9); opacity:0;} to { transform: scale(1); opacity:1;} }
.dtdr-end-title { font-size: clamp(22px, 5vw, 36px); font-weight:900; margin:.2rem 0 .6rem;}
.dtdr-stats { font-weight:700; margin-bottom: .75rem; }
.dtdr-end-actions { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; }

/* Micro animations / feedback */
.dtdr-dot-pulse { animation: pulse .9s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ filter: drop-shadow(0 0 0 rgba(99,102,241,.0)); } 50%{ filter: drop-shadow(0 0 6px rgba(99,102,241,.6)); } }
.dtdr-shake { animation: shake .35s ease; }
@keyframes shake { 0%,100%{ transform: translateX(0);} 25%{ transform: translateX(-6px);} 75%{ transform: translateX(6px);} }

/* Landscape tweaks */
@media (min-aspect-ratio: 4/3) {
  .dtdr-ui { padding: .75rem 1rem; }
  #dtdr-canvas { max-height: 75svh; }
}