/* Obrazovky mimo zápas: menu s režimy a přihlášením, mapa kampaně, face-off s bossem, odměny.
   Plus vzhled arén jednotlivých bossů a nové stavy postav. */
#toast { z-index: 95; }

/* Menu */
.menu-actions { display: grid; gap: 12px; justify-items: center; width: min(360px, 100%); }
.menu-actions #play-btn { width: 100%; }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.mode-btn { padding: 13px 10px; font: 800 14px/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; }
.mode-btn.locked { opacity: .55; }
.mode-btn.locked::before { content: '🔒 '; }
.profile { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; min-height: 44px; text-align: left; }
.profile > small { flex-basis: 100%; text-align: center; color: var(--muted); font-size: 12px; }
.profile img, .profile .avatar { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px var(--gold); display: grid; place-items: center; font-size: 22px; background: var(--plum); }
.profile .who { display: grid; gap: 2px; }
.profile .who b { font-size: 15px; }
.profile .who small { color: var(--muted); font-size: 12px; }
.btn.small { padding: 8px 12px; font-size: 13px; }
.google-btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: #fff; color: #1f1f1f; font: 600 15px/1 var(--font-body); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.google-btn svg { width: 20px; height: 20px; }

/* Společné nadpisy obrazovek */
.screen-title { margin: 0; font: 900 clamp(34px, 9vw, 56px)/1 var(--font-display); text-transform: uppercase; color: var(--gold); text-shadow: 0 5px 0 #5a2a00, 0 0 30px rgba(255, 204, 77, .4); }
.screen-sub { margin: 0; color: var(--muted); }

/* Mapa kampaně: svislá cesta přes 6 bossů */
.map-inner { width: min(520px, 100%); margin: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.map { list-style: none; margin: 8px 0; padding: 0; width: 100%; display: grid; gap: 18px; position: relative; }
.map::before { content: ''; position: absolute; left: 44px; top: 30px; bottom: 30px; width: 4px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--hot) 60%, #6d8dff); opacity: .45; }
.node { position: relative; display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 14px; padding: 10px 14px 10px 0; text-align: left;
  border-radius: 18px; cursor: pointer; transition: transform .2s, background .2s; animation: node-in .5s backwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes node-in { from { opacity: 0; transform: translateX(-24px); } }
.node:hover { background: rgba(255, 255, 255, .05); }
.node-portrait { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .35), transparent 50%), linear-gradient(165deg, #5a3aa0, #1c0f38);
  box-shadow: 0 0 0 4px #1b1030, 0 0 0 7px #8d88ad, 0 8px 20px rgba(0, 0, 0, .5); }
.node-portrait span { font-size: 44px; line-height: 1; }
.node-info { display: grid; gap: 3px; min-width: 0; }
.node-info small { font: 700 11px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.node-info b { font: 800 18px/1.15 var(--font-display); }
.node-info span { font-size: 13px; color: #cdbfe8; }
.node-state { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 900 18px/1 var(--font-display); background: rgba(255, 255, 255, .08); }
.node.beaten .node-portrait { box-shadow: 0 0 0 4px #1b1030, 0 0 0 7px var(--gold), 0 0 22px rgba(255, 204, 77, .45); }
.node.beaten .node-state { background: var(--gold); color: #2a1400; }
.node.current .node-portrait { box-shadow: 0 0 0 4px #1b1030, 0 0 0 7px var(--ready), 0 0 28px rgba(125, 255, 178, .6); animation: pulse 1.6s ease-in-out infinite; }
.node.current .node-state { background: var(--ready); color: #0b2a18; }
.node.locked { cursor: default; opacity: .5; filter: grayscale(.7); }
.node.set-clash .node-portrait { background: radial-gradient(circle at 30% 20%, rgba(37, 99, 235, .7), transparent 60%), linear-gradient(165deg, #142454, #0a0a12); }
.node.set-clash:not(.locked) .node-portrait { box-shadow: 0 0 0 4px #0e1430, 0 0 0 7px #6d8dff, 0 0 24px rgba(34, 211, 238, .5); }

/* Face-off před bossem */
.intro-inner { width: min(640px, 100%); margin: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.faceoff { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; width: 100%; }
.fighter { display: grid; justify-items: center; gap: 6px; }
.fighter .portrait { width: clamp(96px, 28vw, 150px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .4), transparent 50%), linear-gradient(165deg, #5a3aa0, #1c0f38);
  box-shadow: 0 0 0 5px #1b1030, 0 0 0 9px var(--gold), 0 14px 30px rgba(0, 0, 0, .55); }
.fighter.boss .portrait { background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .4), transparent 50%), linear-gradient(165deg, #b0204e, #3a0620); }
.fighter .portrait span { font-size: clamp(50px, 15vw, 80px); line-height: 1; }
.fighter b { font: 800 clamp(15px, 4vw, 20px)/1.15 var(--font-display); }
.fighter small { color: var(--muted); }
.fighter.me { animation: slide-l .6s cubic-bezier(.2, .9, .3, 1.2) backwards; }
.fighter.boss { animation: slide-r .6s cubic-bezier(.2, .9, .3, 1.2) backwards; }
@keyframes slide-l { from { opacity: 0; transform: translateX(-60%); } }
@keyframes slide-r { from { opacity: 0; transform: translateX(60%); } }
.vs { font: 900 clamp(34px, 10vw, 60px)/1 var(--font-display); color: var(--hot); text-shadow: 0 5px 0 #3a0020, 0 0 30px rgba(255, 46, 136, .8);
  animation: vs .5s .45s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes vs { from { opacity: 0; transform: scale(3) rotate(-12deg); } }
.intro-inner blockquote { margin: 0; max-width: 40ch; font: italic 600 17px/1.4 var(--font-body); color: #f3e9ff; }
.intro-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; width: 100%; text-align: left; }
.intro-info section { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.intro-info h3, .reward-title { margin: 0 0 8px; font: 800 13px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.intro-info ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; }
.intro-info p { margin: 0; font-size: 14px; }
.intro-info b { color: var(--paper); margin-right: 4px; }
.reward-preview { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.reward-preview .card { --card-w: clamp(84px, 24vw, 120px); }
.intro-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Clash face-off ve vizuálu Clash MMA */
.intro-inner.set-clash .fighter.boss .portrait { background: radial-gradient(circle at 30% 20%, rgba(37, 99, 235, .7), transparent 60%), linear-gradient(165deg, #142454, #0a0a12);
  box-shadow: 0 0 0 5px #0e1430, 0 0 0 9px #6d8dff, 0 0 40px rgba(34, 211, 238, .55); }
.intro-inner.set-clash .vs { background: linear-gradient(100deg, #b54cf5, #5b8ff9 55%, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 0 16px rgba(91, 143, 249, .8)); }
.intro-inner.set-clash h3 { color: #5fd8f7; }

/* Odměny */
.reward-inner { width: min(760px, 100%); margin: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.reward-inner h2 { margin: 0; font: 900 clamp(30px, 8vw, 52px)/1.05 var(--font-display); text-transform: uppercase; color: var(--gold); text-shadow: 0 5px 0 #5a2a00, 0 0 30px rgba(255, 204, 77, .5); text-wrap: balance; }
.reward-inner p { margin: 0; color: var(--muted); max-width: 46ch; }
.reward-cards { display: flex; justify-content: center; gap: clamp(8px, 2vw, 22px); flex-wrap: wrap; perspective: 900px; }
.reward-cards .card { --card-w: clamp(100px, 28vw, 200px); }
.reward-inner .unlock { padding: 12px 16px; border-radius: 14px; background: rgba(125, 255, 178, .12); color: #d6ffe8; font-weight: 700; }

/* Schopnost soupeře vedle jeho balíčku */
.enemy-power { width: calc(var(--hero-w) * .5); background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .4), transparent 50%), linear-gradient(165deg, #c2185b, #3a0620); }
.enemy-power .hp-emoji { font-size: calc(var(--hero-w) * .24); }
.enemy-power .hp-cost { width: 18px; height: 18px; font-size: 10px; top: -6px; }

/* Nové stavy postav */
.minion.frozen .minion-body::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(160deg, rgba(200, 240, 255, .7), rgba(92, 225, 255, .25) 50%, rgba(255, 255, 255, .55)); mix-blend-mode: screen; }
.minion.frozen .minion-body { box-shadow: 0 0 0 4cqw #0b3550, 0 0 0 7cqw #9ff3ff, 0 0 14cqw rgba(159, 243, 255, .8); }
.minion.silenced .minion-art { filter: grayscale(.85) brightness(.8); }
.badge.poison { box-shadow: 0 0 0 2cqw #7dffb2, 0 0 8cqw rgba(125, 255, 178, .6); }
.float-label.ice { background: #9ff3ff; color: #06283a; }
.float-label.boss { background: linear-gradient(90deg, #c2185b, #ff2e88); color: #fff; }

/* Arény bossů: jemně jiná barva scény */
body[data-arena="studio"] .stage-bg { filter: hue-rotate(-25deg) saturate(1.1); }
body[data-arena="festival"] .stage-bg { filter: hue-rotate(-60deg) saturate(1.3); }
body[data-arena="redakce"] .stage-bg { filter: grayscale(.45) contrast(1.1); }
body[data-arena="gala"] .stage-bg { filter: sepia(.35) saturate(1.4) brightness(1.05); }
body[data-arena="clash"] .stage-bg { filter: hue-rotate(35deg) saturate(1.2); }
body[data-arena="clash"] .floor { background-image: linear-gradient(rgba(91, 143, 249, .25) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(34, 211, 238, .22) 1.5px, transparent 1.5px); }

/* Průvodce nad rukou */
#coach { position: fixed; left: 50%; transform: translateX(-50%); z-index: 84; pointer-events: none;
  bottom: calc(var(--card-w) * 1.12 + env(safe-area-inset-bottom, 0px) + 54px);
  display: flex; align-items: flex-start; gap: 10px; width: min(92vw, 400px); padding: 12px 14px; border-radius: 18px;
  background: rgba(21, 10, 38, .95); border: 1px solid rgba(255, 204, 77, .55); box-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 0 24px rgba(255, 204, 77, .18); }
#coach.intro { border-color: rgba(92, 225, 255, .7); box-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 0 24px rgba(92, 225, 255, .25); }
#coach .coach-guide { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
  background: linear-gradient(165deg, #5a3aa0, #1c0f38); box-shadow: 0 0 0 2px var(--gold); }
#coach p { margin: 0; font: 600 14px/1.35 var(--font-body); color: #f3ecff; }
#coach b { color: var(--gold); }
#coach.intro b { color: #9ff3ff; }
.hero-power[hidden] { display: none !important; }

/* Face-off: co se v levelu naučíš a nové karty */
.intro-inner .lesson { width: 100%; padding: 14px 16px; border-radius: 16px; text-align: left; background: rgba(255, 204, 77, .1); border: 1px solid rgba(255, 204, 77, .35); }
.intro-inner .lesson h3 { margin: 0 0 6px; font: 800 13px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.intro-inner .lesson p { margin: 0; font-size: 15px; }
.fresh-cards { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.fresh-cards .card { --card-w: clamp(92px, 26vw, 130px); }