/* Showdown na Paulista — game styles on the Lab shell. Accent: dev-blue #2563eb. */

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

.sd-intro { text-align: center; margin: 0 auto 1.6rem; max-width: 720px; }
.sd-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; }
.sd-intro__lead { color: var(--text-muted, #94a3b8); font-size: 1.02rem; margin: 0; }
.sd-nojs { color: var(--text-muted, #94a3b8); padding: 1rem; }

#sd-mount { text-align: left; }

/* HUD */
.sd-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); }
.sd-hud b { color: #60a5fa; }
.sd-hud .sd-hp { color: #f87171; font-size: .95rem; letter-spacing: .12em; }
.sd-hud .sd-buff { color: #a3e635; }
.sd-hud .sd-best { margin-left: auto; }

/* stage: canvas + overlays */
.sd-stage { position: relative; border: 1px solid rgba(148,163,184,.25); border-radius: 10px; overflow: hidden;
  background: #070d1a; }
.sd-canvas { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; touch-action: none; }

.sd-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .5rem; text-align: center; padding: 1rem;
  background: rgba(7,13,26,.86); backdrop-filter: blur(2px); }
.sd-ov-stamp { font: 700 .68rem ui-monospace, monospace; letter-spacing: .22em; color: #60a5fa; }
.sd-ov-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 5vw, 2.6rem);
  line-height: 1.05; letter-spacing: .02em; margin: 0; color: #f8fafc; text-shadow: 0 0 24px rgba(37,99,235,.55); }
.sd-ov-title--small { font-size: clamp(1.2rem, 3.5vw, 1.8rem); }
.sd-ov-sub { color: #94a3b8; font-size: .95rem; margin: 0; }
.sd-ov-keys { color: #64748b; font-size: .8rem; margin: 0; }
.sd-ov-keys b, .sd-ov-sub b { color: #cbd5e1; }
.sd-ov-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }

.sd-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 rgba(148,163,184,.35); background: transparent; color: #e2e8f0; transition: border-color .15s, background .15s; }
.sd-btn:hover { border-color: #2563eb; }
.sd-btn--primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.sd-btn--primary:hover { background: #1d4ed8; }
.sd-kbd { font: 600 .68rem ui-monospace, monospace; border: 1px solid rgba(255,255,255,.35); border-radius: 5px;
  padding: .08rem .38rem; opacity: .8; }

.sd-toast { position: absolute; top: .7rem; left: 50%; transform: translateX(-50%);
  font: 700 .8rem ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(7,13,26,.85); border: 1px solid rgba(148,163,184,.3); border-radius: 999px;
  padding: .35rem .9rem; color: #e2e8f0; animation: sd-in .25s ease both; pointer-events: none; }
@keyframes sd-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } }

/* touch controls: só em ponteiro grosso */
.sd-pads { display: none; }
@media (pointer: coarse) {
  .sd-pads { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .8rem; }
  .sd-dpad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 52px); gap: .3rem;
    grid-template-areas: '. up .' 'left down right'; }
  .sd-dbtn { border: 1px solid rgba(148,163,184,.35); background: rgba(148,163,184,.08); color: inherit;
    border-radius: 12px; font-size: 1.05rem; touch-action: none; user-select: none; -webkit-user-select: none; }
  .sd-dbtn:active { background: rgba(37,99,235,.3); border-color: #2563eb; }
  .sd-dbtn--up { grid-area: up; } .sd-dbtn--left { grid-area: left; }
  .sd-dbtn--down { grid-area: down; } .sd-dbtn--right { grid-area: right; }
  .sd-fire { width: 84px; height: 84px; border-radius: 50%; border: 2px solid #ef4444; color: #ef4444;
    background: rgba(239,68,68,.12); font: 800 .85rem 'Inter', sans-serif; letter-spacing: .08em;
    touch-action: none; user-select: none; -webkit-user-select: none; }
  .sd-fire:active { background: rgba(239,68,68,.35); color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-toast { animation: none !important; }
}