/* Večerní TV show: sametová opona, zlaté reflektory, LED podlaha studia.
   Hra se drží jednoho tmavého světa, proto jen jedno téma. */
:root {
  --ink: #0b0614;
  --night: #150a26;
  --plum: #2a1240;
  --velvet: #6b0f3a;
  --gold: #ffcc4d;
  --gold-deep: #c98a12;
  --hot: #ff2e88;
  --ice: #5ce1ff;
  --ready: #7dffb2;
  --blood: #ff3b4e;
  --paper: #fff6e8;
  --muted: #b9a7d8;
  --panel: rgba(21, 10, 38, 0.82);
  --font-display: 'Unbounded', 'Arial Black', 'Helvetica Neue', system-ui, sans-serif;
  --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --card-w: clamp(76px, min(21vw, 15.5vh), 150px);
  --hero-w: clamp(58px, min(16vw, 10.5vh), 98px);
  --gap: clamp(4px, 1vw, 10px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ink);
  color: var(--paper);
  font: 15px/1.4 var(--font-body);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ice); outline-offset: 3px; }

/* Scéna */
.stage-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgba(160, 110, 255, .38), transparent 70%),
    radial-gradient(ellipse 90% 50% at 50% 112%, rgba(255, 46, 136, .32), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255, 204, 77, .07), transparent 70%),
    linear-gradient(180deg, #120824 0%, var(--ink) 45%, #12061a 100%);
}
.curtain { position: absolute; top: -5%; bottom: -5%; width: 13vw; min-width: 46px;
  background: repeating-linear-gradient(90deg, #4a0a28 0 14px, #7a1440 14px 22px, #3a0820 22px 30px);
  filter: saturate(1.1) brightness(.75);
  mask-image: linear-gradient(90deg, #000 40%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent);
}
.curtain.left { left: 0; }
.curtain.right { right: 0; transform: scaleX(-1); }
.beam { position: absolute; top: -12%; width: 46vw; height: 125%; left: calc(50% - 23vw);
  transform-origin: 50% 0; mix-blend-mode: screen; filter: blur(8px); opacity: .55;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  animation: sway 11s ease-in-out infinite alternate;
}
.b1 { background: linear-gradient(180deg, rgba(255, 220, 150, .45), transparent 75%); --from: -26deg; --to: -8deg; }
.b2 { background: linear-gradient(180deg, rgba(255, 70, 160, .35), transparent 70%); --from: 18deg; --to: 4deg; animation-duration: 13s; }
.b3 { background: linear-gradient(180deg, rgba(92, 225, 255, .3), transparent 70%); --from: -4deg; --to: 12deg; animation-duration: 9s; }
@keyframes sway { from { transform: rotate(var(--from)); } to { transform: rotate(var(--to)); } }
.floor { position: absolute; left: -30%; right: -30%; bottom: -8%; height: 52%;
  background-image:
    linear-gradient(rgba(255, 46, 136, .22) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(255, 46, 136, .22) 1.5px, transparent 1.5px);
  background-size: 54px 54px;
  transform: perspective(420px) rotateX(62deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(0deg, #000 10%, transparent 85%);
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 85%);
  animation: floor 6s linear infinite;
}
@keyframes floor { to { background-position: 0 54px; } }
#ambient, #fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#fx-canvas { z-index: 60; }

/* Rozložení hrací plochy */
#stage {
  position: fixed; inset: 0; margin: 0 auto; max-width: 1180px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr) auto calc(var(--card-w) * 0.95);
  padding: calc(env(safe-area-inset-top, 0px) + 6px) max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px));
  z-index: 2;
}
#stage.storming { animation: storm 1.2s ease-out; }
@keyframes storm { 0%, 100% { filter: none; } 20% { filter: hue-rotate(-30deg) saturate(.4) brightness(.6); } }
body.lost #stage { filter: grayscale(.85) brightness(.7); transition: filter 1.5s; }

.btn { border: 0; cursor: pointer; border-radius: 999px; padding: 12px 22px; font: 800 15px/1 var(--font-body); letter-spacing: .02em; }
.btn.gold { color: #2a1400; background: linear-gradient(180deg, #fff1b0, var(--gold) 45%, var(--gold-deep)); box-shadow: 0 6px 0 #7a4a00, 0 10px 30px rgba(255, 204, 77, .45), inset 0 2px 0 rgba(255, 255, 255, .7); position: relative; overflow: hidden; }
.btn.gold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .8) 50%, transparent 65%); transform: translateX(-120%); animation: shine 2.8s ease-in-out infinite; }
.btn.gold:active { transform: translateY(4px); box-shadow: 0 2px 0 #7a4a00, 0 6px 20px rgba(255, 204, 77, .4); }
.btn.big { font: 900 clamp(20px, 5vw, 26px)/1 var(--font-display); padding: 18px 44px; text-transform: uppercase; letter-spacing: .06em; }
.btn.ghost { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: var(--paper); }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.icon-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(10, 4, 20, .6); cursor: pointer; font-size: 16px; display: grid; place-items: center; }

/* Menu a konec hry */
.screen { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 20px) max(16px, env(safe-area-inset-left, 0px));
  background: radial-gradient(ellipse at 50% 30%, rgba(42, 18, 64, .55), rgba(11, 6, 20, .94) 70%);
  touch-action: auto;
}
.menu-inner, .go-inner { width: min(560px, 100%); margin: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.menu-cards { --card-w: clamp(84px, min(25vw, 17vh), 170px); position: relative; height: calc(var(--card-w) * 1.55); width: 100%; margin-bottom: -6vh; perspective: 900px; }
.menu-cards .card { position: absolute; left: 50%; top: 4%;
  transform: translateX(calc(-50% + var(--i) * 62%)) rotate(calc(var(--i) * 12deg)) translateY(calc(var(--i) * var(--i) * 10%)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  animation: float 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.4s); z-index: calc(2 - var(--i) * var(--i));
}
@keyframes float { 50% { translate: 0 -10px; } }
.logo { margin: 0; display: flex; flex-direction: column; line-height: .86; font: 900 clamp(52px, 15vw, 104px)/.86 var(--font-display); text-transform: uppercase; letter-spacing: -.02em; }
.logo span { background: linear-gradient(100deg, #b8730a 0%, #ffe9a3 20%, var(--gold) 38%, #fff8de 50%, var(--gold) 62%, #b8730a 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: logo 4s linear infinite; filter: drop-shadow(0 6px 0 #4a1a00) drop-shadow(0 0 30px rgba(255, 204, 77, .35)); }
.logo .logo-fans { font-size: .72em; letter-spacing: .14em; background: linear-gradient(100deg, var(--hot), #ffb3d6 45%, var(--ice) 70%, var(--hot)); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 5px 0 #3a0020) drop-shadow(0 0 26px rgba(255, 46, 136, .5)); }
@keyframes logo { to { background-position: -250% 0; } }
.tagline { margin: 0; color: var(--muted); font-size: 15px; max-width: 34ch; text-wrap: balance; }
.how { list-style: none; padding: 16px 18px; margin: 4px 0 0; display: grid; gap: 8px; text-align: left; font-size: 13.5px; color: #dccff5; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; max-width: 46ch; }
.how b { color: var(--gold); }
.fine { margin: 0; font-size: 12px; color: rgba(185, 167, 216, .7); letter-spacing: .04em; }
#gameover h2 { margin: 0; font: 900 clamp(44px, 12vw, 84px)/1 var(--font-display); text-transform: uppercase; color: var(--gold); text-shadow: 0 6px 0 #5a2a00, 0 0 40px rgba(255, 204, 77, .5); }
body.lost #gameover h2 { color: #c9c3d8; text-shadow: 0 6px 0 #241b33; }
#go-sub { margin: 0; color: var(--muted); max-width: 36ch; }
.go-stats { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.go-stats div { min-width: 96px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); display: grid; }
.go-stats b { font: 800 26px/1.1 var(--font-display); color: var(--paper); font-variant-numeric: tabular-nums; }
.go-stats span { font-size: 12px; color: var(--muted); }
.go-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .beam, .floor, .btn.gold::after, .logo span, .menu-cards .card { animation: none; }
}