/* Deploy na Sexta — styles on the Lab shell. Accent: orange #f97316. */

/* Override the Lab's shared --accent so the "?" help button + modal
   pick up this toy's own color (Lab pattern). */
:root { --accent: #f97316; }

.dx-intro { text-align: center; margin: 0 auto 1.6rem; max-width: 720px; }
.dx-intro__title { font-family: 'Poppins', sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin: 0 0 .45rem; }
.dx-intro__lead { color: var(--text-muted, #94a3b8); font-size: 1.02rem; margin: 0; }
.dx-nojs { color: var(--text-muted, #94a3b8); padding: 1rem; }

#dx-mount { position: relative; min-height: 380px; display: flex; flex-direction: column; }

.dx-hud { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem;
  font: 600 .78rem ui-monospace, Menlo, monospace; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted, #94a3b8); }
.dx-hud b { color: #fb923c; }
.dx-clock.is-extra b { color: #a3e635; }
.dx-cafes { font-size: .95rem; letter-spacing: .18em; }
.dx-best { margin-left: auto; }

.dx-event { border: 1px solid rgba(249,115,22,.45); background: rgba(249,115,22,.08); color: var(--text-main, #f8fafc);
  border-radius: 10px; padding: .5rem .85rem; font-size: .88rem; margin-bottom: .8rem; }

.dx-stage { font: 600 .8rem ui-monospace, monospace; letter-spacing: .05em; color: var(--text-muted, #94a3b8);
  margin-bottom: .55rem; overflow-wrap: anywhere; }
.dx-stage .is-done { color: #4ade80; }
.dx-stage .is-now { color: #fb923c; }

.dx-barwrap { padding: .4rem 0 .8rem; cursor: pointer; touch-action: manipulation; }
.dx-bar { position: relative; height: 46px; border-radius: 999px; border: 1px solid var(--border, rgba(255,255,255,.14));
  background: var(--surface-2, #243349); overflow: hidden; }
.dx-window { position: absolute; top: 0; bottom: 0; background: rgba(34,197,94,.3);
  border-left: 2px solid #22c55e; border-right: 2px solid #22c55e; }
.dx-marker { position: absolute; top: 3px; bottom: 3px; width: 10px; margin-left: -5px; border-radius: 6px;
  background: #f8fafc; box-shadow: 0 0 10px rgba(248,250,252,.7); }
.dx-marker.is-hit { background: #4ade80; box-shadow: 0 0 14px rgba(74,222,128,.9); }
.dx-marker.is-miss { background: #ef4444; box-shadow: 0 0 14px rgba(239,68,68,.9); animation: dx-shake .18s linear 2; }
@keyframes dx-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

.dx-press { align-self: center; margin: .2rem 0 .9rem; width: min(100%, 320px); min-height: 56px; cursor: pointer;
  border-radius: 999px; border: 2px solid #f97316; background: rgba(249,115,22,.14); color: #fb923c;
  font: 800 1.05rem 'Inter', sans-serif; letter-spacing: .1em; transition: transform .08s, background .15s;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.dx-press:active { transform: scale(.97); background: rgba(249,115,22,.35); color: #fff; }

.dx-log { font: 500 .8rem ui-monospace, monospace; color: var(--text-muted, #94a3b8); min-height: 5.2em; }
.dx-log__line { margin: 0 0 .2rem; }
.dx-log__line::before { content: '$ '; opacity: .5; }
.dx-log__line.is-ok { color: #4ade80; }
.dx-log__line.is-miss { color: #f87171; }

.dx-overlay { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .5rem; text-align: center; padding: 1rem; border-radius: 12px;
  background: var(--bg-card, rgba(15,23,42,.96)); }
.dx-ov-stamp { font: 700 .68rem ui-monospace, monospace; letter-spacing: .22em; color: #fb923c; }
.dx-ov-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(1.7rem, 5vw, 2.6rem);
  line-height: 1.05; margin: 0; text-shadow: 0 0 24px rgba(249,115,22,.45); }
.dx-ov-title--small { font-size: clamp(1.15rem, 3.5vw, 1.7rem); }
.dx-ov-sub { color: var(--text-muted, #94a3b8); font-size: .95rem; margin: 0; max-width: 460px; }
.dx-ov-keys { color: var(--text-muted, #64748b); font-size: .8rem; margin: 0; }
.dx-ov-keys b, .dx-ov-sub b { color: var(--text-main, #e2e8f0); }
.dx-ov-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }

.dx-btn { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; border-radius: 999px;
  font: 700 .85rem 'Inter', sans-serif; letter-spacing: .04em; padding: .55rem 1.1rem; margin-top: .6rem;
  border: 1px solid var(--border, rgba(148,163,184,.35)); background: transparent; color: var(--text-main, #e2e8f0);
  transition: border-color .15s, background .15s; }
.dx-btn:hover { border-color: #f97316; }
.dx-btn--primary { background: #f97316; border-color: #f97316; color: #fff; }
.dx-btn--primary:hover { background: #ea580c; }
.dx-kbd { font: 600 .68rem ui-monospace, monospace; border: 1px solid rgba(255,255,255,.35); border-radius: 5px;
  padding: .08rem .38rem; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .dx-marker.is-miss { animation: none !important; }
}