/* Wrapper de juego — barra superior + iframe del juego */
:root {
  --ct-bar-h: 56px;
  --ct-bar-h-sm: 48px;
}

body.play-mode {
  margin: 0; padding: 0; overflow: hidden;
  background: var(--bg-0); color: var(--ink);
  height: 100vh; height: 100dvh;
}

.play-bar {
  height: var(--ct-bar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  background: rgba(8,12,20,.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 5;
}
.play-bar .back {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--ink); cursor: pointer;
}
.play-bar .gtitle {
  flex: 1; min-width: 0;
}
.play-bar .gtitle .gname {
  font-weight: 800; font-family: var(--font-display);
  font-size: 16px; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.play-bar .gtitle .gmeta {
  font-size: 11px; color: var(--ink-mute); margin-top: 3px;
}
.play-bar .mode-tag {
  padding: 4px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
}
.play-bar .mode-tag.demo  { background: rgba(58,168,255,.18); color: var(--info); }
.play-bar .mode-tag.duel  { background: rgba(255,61,139,.18); color: var(--c5); }
.play-bar .mode-tag.pool  { background: rgba(122,92,255,.18); color: #b5a5ff; }

.play-bar .balance {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,211,77,.13); border: 1px solid rgba(255,211,77,.35);
  color: var(--c4); font-weight: 800; font-size: 13px;
}

.play-frame {
  position: fixed;
  inset: var(--ct-bar-h) 0 0 0;
  background: var(--bg-0);
}
.play-frame iframe {
  width: 100%; height: 100%; border: 0; display: block;
}

/* Overlay "Acabé" */
.score-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(6,8,15,.92);
  backdrop-filter: blur(14px);
  display: grid; place-items: center;
  padding: 20px;
  animation: fadeIn var(--t-med);
}
.score-card {
  width: 100%; max-width: 440px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-hi);
  animation: pop var(--t-med);
}
.score-card .head {
  padding: 28px 24px 18px; text-align: center;
  background: var(--grad-1);
  color: #06080f;
}
.score-card .head.win { background: var(--grad-3); }
.score-card .head.lose { background: linear-gradient(135deg, #4b5675, #2c3550); color: #fff; }
.score-card .head.draw { background: linear-gradient(135deg, #7a5cff, #3aa8ff); color: #fff; }
.score-card .head .label { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; opacity: .82; }
.score-card .head .value { font-family: var(--font-display); font-weight: 900; font-size: 64px; line-height: 1; margin: 6px 0 4px; }
.score-card .head .sub { font-size: 14px; font-weight: 600; opacity: .8; }
.score-card .body { padding: 22px; }
.score-card .actions { display: flex; flex-direction: column; gap: 10px; }

/* Footer floating: "Enviar score" en modo reto */
.submit-bar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30;
  background: rgba(11,18,30,.96);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-hi);
  animation: slideIn var(--t-med);
}
.submit-bar .info { flex: 1; }
.submit-bar .info .t { font-weight: 800; font-size: 14px; }
.submit-bar .info .s { font-size: 12px; color: var(--ink-mute); }

@media (max-width: 480px) {
  :root { --ct-bar-h: var(--ct-bar-h-sm); }
  .play-bar .gtitle .gname { font-size: 14px; }
  .play-bar .balance { font-size: 12px; padding: 5px 10px; }
}