:root {
  color-scheme: dark;
  --bg: #070b15;
  --panel: rgba(17, 24, 39, .94);
  --line: rgba(255,255,255,.12);
  --text: #f8fafc;
  --muted: #94a3b8;
  --accent: #f97316;
  --accent2: #facc15;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at 50% -20%, #26324a, var(--bg) 52%); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; }
body { display: flex; justify-content: center; overscroll-behavior: none; }
button { font: inherit; }
.game-shell { width: min(1180px, 100%); padding: 14px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
h1 { margin:0; font-size:clamp(24px,4vw,46px); line-height:.9; letter-spacing:.08em; color:var(--accent2); text-shadow:3px 3px 0 #b91c1c; }
.topbar p { margin:7px 0 0; color:var(--muted); }
.top-actions { display:flex; gap:8px; }
button { border:1px solid var(--line); background:#172033; color:var(--text); border-radius:12px; padding:10px 14px; cursor:pointer; font-weight:800; touch-action:none; }
button:hover { filter:brightness(1.15); }
.stage-wrap { position:relative; overflow:hidden; border-radius:18px; border:1px solid var(--line); background:#020617; box-shadow:0 25px 70px rgba(0,0,0,.45); }
canvas { display:block; width:100%; height:auto; aspect-ratio:4/3; image-rendering:pixelated; touch-action:none; }
.overlay { position:absolute; inset:0; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(2,6,23,.72); backdrop-filter:blur(5px); }
.overlay.visible { display:flex; }
.panel { width:min(590px,100%); padding:clamp(20px,4vw,38px); border-radius:20px; border:1px solid rgba(255,255,255,.16); background:var(--panel); box-shadow:0 28px 80px rgba(0,0,0,.55); text-align:center; }
.eyebrow { color:#fb923c; font-weight:900; font-size:12px; letter-spacing:.18em; }
.panel h2 { margin:8px 0 12px; font-size:clamp(32px,6vw,62px); line-height:.9; color:#fde047; text-transform:uppercase; }
.panel p { color:#cbd5e1; line-height:1.55; }
.primary { min-width:210px; background:linear-gradient(180deg,#fb923c,#ea580c); border-color:#fdba74; font-size:18px; box-shadow:0 8px 0 #9a3412; }
.primary:active { transform:translateY(5px); box-shadow:0 3px 0 #9a3412; }
.controls-hint { margin-bottom:0; font-size:13px; }
.overlay-stats { margin:14px 0; color:#fef08a; font-weight:900; }
.mobile-controls { display:none; margin-top:12px; align-items:center; justify-content:space-between; gap:16px; }
.dpad { display:flex; align-items:center; gap:8px; }
.vertical { display:flex; flex-direction:column; gap:8px; }
.mobile-controls button { min-width:62px; min-height:56px; font-size:20px; user-select:none; -webkit-user-select:none; }
.mobile-controls .jump { min-width:110px; min-height:90px; border-radius:50%; background:#b91c1c; border-color:#fecaca; }
footer { text-align:center; color:#64748b; font-size:12px; padding:10px 4px; }
@media (hover:none), (max-width:900px) {
  .mobile-controls { display:flex; }
  .top-actions button:last-child { display:none; }
  .game-shell { padding:8px; }
}
@media (orientation:landscape) and (max-height:650px) {
  .topbar, footer { display:none; }
  .game-shell { width:100vw; padding:0; display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:8px; }
  .stage-wrap { border-radius:0; height:100vh; display:flex; align-items:center; }
  canvas { max-height:100vh; }
  .mobile-controls { margin:0; padding:10px; flex-direction:column; justify-content:center; }
}

/* Vložení do herního portálu Nebrzdíme.cz. */
html.embed, html.embed body {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
html.embed body { display: block; }
html.embed .game-shell {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
html.embed .topbar,
html.embed footer { display: none; }
html.embed .stage-wrap {
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
html.embed canvas {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 4 / 3;
}
html.embed .mobile-controls {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: #0b1220;
}
@media (hover:hover) and (min-width:901px) {
  html.embed .mobile-controls { display: none; }
}
@media (orientation:landscape) and (max-height:650px) {
  html.embed .game-shell {
    height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0,1fr) clamp(190px,27vw,250px);
    gap: 0;
  }
  html.embed .stage-wrap { height: 100dvh; }
  html.embed .mobile-controls {
    height: 100dvh;
    display: flex;
    padding-top: max(8px, env(safe-area-inset-top));
  }
}
@media (orientation:portrait) and (max-width:900px) {
  html.embed .mobile-controls button { min-width: 56px; min-height: 50px; }
  html.embed .mobile-controls .jump { min-width: 96px; min-height: 76px; }
}