/* Over 9000 – noćno nebo + narandžasti gi + zlato (isti svet kao Saiyan Trka) */
:root {
	color-scheme: dark;
	--sky: #141a4d;
	--panel: #1f2873;
	--line: #3a46a0;
	--ink: #fff3df;
	--muted: #b9c0f0;
	--gi: #ff8a1f;
	--gold: #ffd23f;
	--hp: #3fdc6a;
	--ki: #43c4ff;
	--danger: #ff4d4d;
	--font-display: "Bangers", "Impact", "Arial Black", sans-serif;
	--font-body: "Rubik", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sky); color: var(--ink); font-family: var(--font-body); }
[hidden] { display: none !important; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

button { font: inherit; cursor: pointer; border: 0; }
button:focus-visible, .card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.big { font-family: var(--font-display); font-size: 30px; letter-spacing: 0.06em; padding: 10px 34px; color: #2a1200; background: linear-gradient(#ffd96a, var(--gi)); border-radius: 10px; box-shadow: 0 4px 0 #a2470a; }
.big:hover { filter: brightness(1.08); }
.big:active { transform: translateY(2px); box-shadow: 0 2px 0 #a2470a; }
.ghost { padding: 10px 20px; color: var(--ink); background: transparent; border: 2px solid var(--line); border-radius: 10px; font-weight: 600; }
.ghost:hover { border-color: var(--gold); }

.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20; }
.screen.dim { background: rgba(10, 12, 40, 0.72); backdrop-filter: blur(3px); }
@keyframes hintPulse { from { opacity: 0.6; } to { opacity: 1; } }
.panel h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.05em; color: var(--gi); margin: 0 0 8px; font-size: 26px; }
/* izbor u redu dugmadi (Podešavanja → Grafika) */
.diff { display: flex; gap: 8px; flex-wrap: wrap; }
.diff button { padding: 9px 16px; border-radius: 99px; border: 2px solid var(--line); background: transparent; color: var(--ink); font-weight: 600; }
.diff button.sel { background: var(--gold); color: #1a1440; border-color: var(--gold); }

/* ===== GLAVNI MENI (js/menu.js): početni ekran sa plakatima → ekran režima → VS ekran (#loading) =====
   Opšte klase (može da ih koristi i drugi ekran, npr. igra preko interneta iz js/net/ – kao novi .m-screen u #menu):
   .m-screen  ceo ekran jednog koraka (position: absolute u #menu, vidi se samo sa .on); obično: .m-head, sadržaj, .m-foot
   .m-head    zaglavlje: <button class="m-back"><span>← Nazad <kbd>Esc</kbd></span></button> + <h2 class="m-title"><small>Režim:</small> Naziv</h2>
   .m-foot    donja traka: <p class="m-desc"> (jedan red opisa) + <p class="m-keys"> (tasteri u <kbd>) + <button class="m-go"><span>BORBA!</span></button>
   .m-panel   tamni panel sa odsečenim uglovima; .m-panel.blue / .green = boja trake na vrhu (inače zlatna)
   .m-btn     veliko koso dugme: <button class="m-btn gold"><span><b>Naslov</b><small>podnaslov</small></span></button> (.gold = ti, .blue = drugar / protivnik)
   .m-chip    malo koso dugme: <button class="m-chip"><span>Tekst</span></button>;  .m-opts > .m-opt (.sel) = red izbora
   .m-field   <label class="m-field"><span>Ime</span><input></label>;  .m-label naslov odeljka;  .m-note sitan tekst
   .m-badge   oznaka u uglu (npr. USKORO);  .m-tag kosa oznaka (TI / CPU; .blue)
   Koso dugme: unutrašnji <span> se ispravlja (--sk = ugao). Strelice: stavka ima data-nav, kursor je .m-cur (menu.js).
   Novi ekran: <div class="m-screen" data-screen="ime">…</div> u #menu, pa game.menu.show('ime') – strelice, Enter,
   opis u .m-desc i Esc (nazad na početni ekran) rade sami; prva stavka pod kursorom može da ima data-first.
   Polje za unos u meniju treba da zaustavi keydown (stopPropagation), inače igra čita tastere (npr. M = zvuk). */
@property --acc { syntax: '<color>'; inherits: true; initial-value: #ff9a1f; }
:root { --menu-bg: radial-gradient(ellipse 130% 95% at 50% -15%, #35479f 0%, #1b2367 40%, #0d1238 78%, #080b26 100%); --p1: #ffb52e; --p2: #45a8ff; --p2b: #2a5bff; }
#menu { display: block; overflow: hidden; background: var(--menu-bg); --c1: #ff8a1f; --c2: #3b6cff; --side: var(--p1); transition: --acc 0.45s ease; -webkit-user-select: none; user-select: none; }
#menu [data-nav]:focus-visible { outline: none; }

/* pozadina: sjaj u boji izabranog plakata, spore zrakaste linije, oblaci, tamne ivice (samo CSS) */
.m-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.m-bg i { position: absolute; display: block; }
.m-glow { left: 50%; top: 58%; width: 120vmax; height: 120vmax; translate: -50% -50%; background: radial-gradient(circle closest-side, color-mix(in srgb, var(--acc) 52%, transparent), color-mix(in srgb, var(--acc) 17%, transparent) 45%, transparent 80%); }
/* ekran režima i drugari: sjaj u pozadini je slabiji (tu su slika mape i boje boraca) */
#menu:not([data-screen="home"]) .m-glow { opacity: 0.45; }
.m-rays { left: 50%; top: 56%; width: 150vmax; height: 150vmax; translate: -50% -50%; background: repeating-conic-gradient(rgba(170, 195, 255, 0.08) 0deg 1.1deg, transparent 1.1deg 7deg); -webkit-mask: radial-gradient(circle closest-side, transparent 10%, #000 34%, #000 62%, transparent 92%); mask: radial-gradient(circle closest-side, transparent 10%, #000 34%, #000 62%, transparent 92%); animation: mSpin 240s linear infinite; }
.m-cloud { width: 70vmax; height: 28vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(150, 175, 255, 0.12), transparent); animation: mDrift 50s ease-in-out infinite alternate; }
.m-cloud.c1 { left: -22vmax; top: -8vmax; }
.m-cloud.c2 { right: -26vmax; top: 32%; animation-duration: 64s; animation-delay: -18s; }
.m-cloud.c3 { left: 16%; bottom: -17vmax; animation-duration: 80s; animation-delay: -40s; }
.m-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 75% at 50% 46%, transparent 52%, rgba(3, 5, 22, 0.72)); }
@keyframes mSpin { to { rotate: 360deg; } }
@keyframes mDrift { from { translate: -5vw 0; } to { translate: 5vw 0; } }

.m-screen { position: absolute; inset: 0; z-index: 1; display: none; }
.m-screen.on { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: mScreenIn 0.28s ease-out; } /* (zaglavlje, sadržaj, donja traka) */
@keyframes mScreenIn { from { opacity: 0; } }
/* ulazak u ekran režima: ti sleva, protivnik zdesna, sredina odozdo (brzo) */
.m-setup.on .m-side.l { animation: mInL 0.34s cubic-bezier(0.2, 0.9, 0.3, 1) backwards; }
.m-setup.on .m-side.r { animation: mInR 0.34s cubic-bezier(0.2, 0.9, 0.3, 1) backwards; }
.m-setup.on .m-center, .m-online.on .m-onl { animation: mInUp 0.34s 0.05s ease-out backwards; }
@keyframes mInL { from { translate: -70px 0; opacity: 0; } }
@keyframes mInR { from { translate: 70px 0; opacity: 0; } }
@keyframes mInUp { from { translate: 0 26px; opacity: 0; } }

/* koso dugme: telo koso (--sk), tekst uspravan */
.m-chip, .m-back, .m-opt, .m-btn, .m-go { transform: skewX(var(--sk, -12deg)); }
.m-chip > span, .m-back > span, .m-opt > span, .m-btn > span, .m-go > span { display: inline-block; transform: skewX(calc(-1 * var(--sk, -12deg))); }
.m-chip, .m-back, .m-opt { border: 2px solid rgba(110, 130, 255, 0.5); background: rgba(14, 18, 62, 0.86); color: var(--ink); font-weight: 700; transition: scale 0.12s, border-color 0.15s, color 0.15s, box-shadow 0.15s; }
.m-chip { padding: 8px 26px; font-size: clamp(13px, 1.8vh, 15px); letter-spacing: 0.03em; }
.m-chip.m-cur, .m-back.m-cur { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 18px rgba(255, 210, 63, 0.35); }
.m-chip:hover, .m-back:hover { border-color: var(--gold); }

/* ---- 1. početni ekran ---- */
.m-home.on { grid-template-rows: auto minmax(0, 1fr) auto auto; justify-items: center; row-gap: clamp(6px, 1.4vh, 16px); }
.m-home .sound-hint { position: absolute; z-index: 2; top: 14px; right: 18px; margin: 0; padding: 4px 14px; border: 2px solid var(--gold); border-radius: 99px; background: rgba(10, 12, 40, 0.65); color: var(--gold); font-weight: 700; font-size: 13px; animation: hintPulse 1.1s ease-in-out infinite alternate; }
.m-logo { --lf: clamp(48px, 10vh, 112px); --lt: clamp(16px, 3.4vh, 38px); position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; padding-top: var(--lt); text-align: center; }
.m-logo h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--lf); line-height: 0.9; letter-spacing: 0.04em; color: var(--gold); text-shadow: 4px 4px 0 #b4410a, 8px 8px 0 #1a1440; }
.m-logo > p { margin: 6px 0 0; color: var(--muted); font-size: clamp(11px, 1.55vh, 14px); font-weight: 600; letter-spacing: 0.05em; }
/* zmajeva kugla iza naslova (sija i polako diše) */
.m-ball { position: absolute; z-index: -1; left: 50%; top: calc(var(--lt) + var(--lf) * 0.42); width: calc(var(--lf) * 1.3); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff6dc 0 7%, #ffc56a 22%, #ff8a1f 58%, #c2520b 100%); box-shadow: 0 0 46px rgba(255, 150, 40, 0.6), inset -10px -12px 26px rgba(120, 40, 0, 0.45); animation: mBall 3.6s ease-in-out infinite alternate; }
.m-ball::before { content: ''; position: absolute; inset: -70%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 160, 50, 0.42), rgba(255, 120, 30, 0.12) 55%, transparent); animation: mGlow 2.8s ease-in-out infinite alternate; }
.m-ball i { position: absolute; width: 18%; aspect-ratio: 1; background: #d81e1e; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.m-ball i:nth-child(1) { left: 41%; top: 22%; }
.m-ball i:nth-child(2) { left: 22%; top: 41%; }
.m-ball i:nth-child(3) { left: 60%; top: 41%; }
.m-ball i:nth-child(4) { left: 41%; top: 60%; }
@keyframes mBall { from { rotate: -8deg; scale: 0.97; } to { rotate: 8deg; scale: 1.04; } }
@keyframes mGlow { from { opacity: 0.55; } to { opacity: 1; } }

/* plakati: kosi, likovi u isečcima (menu.js); ostali su jednobojni (plavi), izabrani je u boji, veći i sija */
.m-posters { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.5vw, 26px); width: 100%; height: 100%; min-height: 0; padding: 4px 30px; }
.m-poster { --w: clamp(180px, 20.5vw, 390px); position: relative; flex: 0 0 var(--w); width: var(--w); height: min(100%, 700px); padding: 0; overflow: hidden; border-radius: 3px; background: #0d1240; color: #fff; text-align: left; transform: skewX(-8deg); box-shadow: 0 0 0 2px rgba(110, 130, 255, 0.3), 0 14px 34px rgba(0, 0, 0, 0.5); transition: scale 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.4), box-shadow 0.2s; animation: mPosterIn 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes mPosterIn { from { opacity: 0; translate: 0 50px; } }
.m-poster .m-art { position: absolute; inset: 0 -16%; transform: skewX(8deg); filter: grayscale(1) sepia(0.9) hue-rotate(188deg) saturate(1.6) brightness(0.5) contrast(1.15); transition: filter 0.25s; }
.m-slice, .m-seam { position: absolute; inset: 0; overflow: hidden; }
.m-seam { background: rgba(255, 255, 255, 0.8); }
.m-crop > img, .m-slice > img { position: absolute; display: block; width: auto; max-width: none; pointer-events: none; -webkit-user-drag: none; }
.m-poster::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 5px; background: var(--acc); opacity: 0.4; transition: opacity 0.2s; }
.m-ptxt { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 5px; padding: clamp(34px, 7vh, 70px) 18px clamp(16px, 2.6vh, 26px) 26px; background: linear-gradient(transparent, rgba(5, 7, 28, 0.8) 38%, rgba(5, 7, 28, 0.96)); }
.m-ptxt b { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 2.8vw, 50px); line-height: 0.92; letter-spacing: 0.04em; color: #dfe4ff; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); }
.m-ptxt small { font-size: clamp(11px, 0.95vw, 15px); font-weight: 600; color: var(--muted); }
.m-pvs { position: absolute; z-index: 1; left: 50%; top: 47%; translate: -50% -50%; transform: skewX(8deg); font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 46px); line-height: 1; color: #fff; -webkit-text-stroke: 1.5px #1a1440; text-shadow: 3px 3px 0 #1a1440; opacity: 0.8; }
.m-poster.m-cur { scale: 1.045; z-index: 2; box-shadow: 0 0 0 3px var(--acc), 0 0 36px color-mix(in srgb, var(--acc) 75%, transparent), 0 18px 44px rgba(0, 0, 0, 0.55); }
.m-poster.m-cur .m-art { filter: none; }
.m-poster.m-cur::after { opacity: 1; }
.m-poster.m-cur .m-ptxt b { color: var(--gold); text-shadow: 3px 3px 0 #b4410a, 0 0 24px color-mix(in srgb, var(--acc) 80%, transparent); }
.m-poster.m-cur .m-ptxt small { color: #fff; }
.m-poster.m-cur .m-pvs { color: var(--gold); opacity: 1; text-shadow: 3px 3px 0 #b4410a; }
.m-poster:active { scale: 1.02; }
.m-badge { position: absolute; z-index: 3; top: 16px; right: 14px; padding: 3px 10px; background: var(--gold); color: #1a1440; font-weight: 800; font-size: 12px; letter-spacing: 0.12em; box-shadow: 0 3px 0 #a2470a; }
.m-sec { position: relative; z-index: 3; display: flex; justify-content: center; gap: clamp(10px, 1.2vw, 18px); }

/* donja traka: opis izabrane stavke + tasteri (+ BORBA! na ekranu režima) */
.m-foot { position: relative; z-index: 1; justify-self: stretch; align-self: end; display: flex; align-items: center; gap: 20px; min-height: 50px; padding: 8px clamp(14px, 2.4vw, 40px); background: linear-gradient(90deg, rgba(5, 7, 28, 0.9), rgba(5, 7, 28, 0.62)); border-top: 2px solid rgba(110, 130, 255, 0.28); }
.m-foot::before { content: ''; position: absolute; left: 0; top: -2px; width: 180px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); }
.m-desc { flex: 1; min-width: 0; margin: 0; font-size: clamp(13px, 1.9vh, 16px); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-keys { flex: none; margin: 0; display: flex; gap: 16px; white-space: nowrap; font-size: 13px; color: var(--muted); }
.m-keys kbd { margin-right: 3px; }

/* ---- 2. ekran režima: ti levo (toplo), mreža lica, mapa i težina u sredini, protivnik / botovi / mapa desno (hladno) ---- */
.m-setup.on { --ph: clamp(200px, calc(100vh - 330px), 640px); --pw: calc(var(--ph) * 0.75); --pad: clamp(14px, 2.4vw, 40px); grid-template-columns: calc(var(--pw) + 24px) minmax(0, 1fr) calc(var(--pw) + 24px); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "head head head" "l mid r" "foot foot foot"; column-gap: clamp(10px, 1.8vw, 30px); padding: 0 var(--pad); }
#mSetup.side-p2 { --side: var(--p2); }
#mSetup.mode-svs { --c2: #ff4f7a; }
#mSetup.mode-trening { --c2: #46e07a; }
.m-stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.m-stage i { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(18px) saturate(1.2) brightness(0.42); opacity: 0; transition: opacity 0.6s; }
.m-stage i.on { opacity: 0.6; }
.m-stage::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 34% 62% at 13% 50%, color-mix(in srgb, color-mix(in srgb, var(--c1) 55%, #ff9a1f) 42%, transparent), transparent 75%), radial-gradient(ellipse 34% 62% at 87% 50%, color-mix(in srgb, color-mix(in srgb, var(--c2) 55%, #2f7bff) 42%, transparent), transparent 75%), linear-gradient(rgba(8, 11, 38, 0.35), rgba(8, 11, 38, 0.15) 50%, rgba(8, 11, 38, 0.55)); }
.m-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 22px; justify-self: stretch; margin: 0 calc(-1 * var(--pad, 0px)); padding: clamp(8px, 1.6vh, 16px) clamp(14px, 2.4vw, 40px); }
.m-setup > .m-head { grid-area: head; }
.m-back { flex: none; padding: 7px 18px; font-size: 14px; }
.m-back kbd { margin-left: 6px; padding: 1px 6px; font-size: 11px; }
.m-arrow { font-weight: 800; }
.m-title { margin: 0; display: flex; align-items: baseline; gap: 12px; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 5vh, 52px); line-height: 1; letter-spacing: 0.05em; color: var(--gold); text-shadow: 3px 3px 0 #b4410a, 6px 6px 0 rgba(10, 8, 40, 0.6); }
.m-title small { font-family: var(--font-body); font-size: clamp(12px, 1.6vh, 15px); font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); text-shadow: none; }
.m-setup > .m-foot { grid-area: foot; margin: 0 calc(-1 * var(--pad)); }

.m-side { position: relative; z-index: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.2vh, 12px); }
.m-side.l { grid-area: l; }
.m-side.r { grid-area: r; }
.m-only { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.2vh, 12px); }
#mSetup:not(.mode-borba) .m-only.borba, #mSetup:not(.mode-svs) .m-only.svs, #mSetup:not(.mode-trening) .m-only.trening, #mSetup.mode-trening #diffRow { display: none; }
/* velika kartica borca (ti: zlatna, kosa nalevo; protivnik: plava, kosa nadesno) */
.m-fcard { --sk: -6deg; position: relative; flex: none; width: var(--pw); height: var(--ph); padding: 0; overflow: hidden; background: #0d1240; color: #fff; text-align: left; transform: skewX(var(--sk)); box-shadow: 0 0 0 3px rgba(255, 181, 46, 0.5), 0 16px 36px rgba(0, 0, 0, 0.5); transition: box-shadow 0.2s, filter 0.2s; }
.m-fcard.p2 { --sk: 6deg; box-shadow: 0 0 0 3px rgba(69, 168, 255, 0.5), 0 16px 36px rgba(0, 0, 0, 0.5); }
.m-fcard .m-crop, .vs-card .m-crop { position: absolute; inset: 0 -12%; transform: skewX(calc(-1 * var(--sk))); }
.m-fcard .m-shade { position: absolute; inset: 0; background: linear-gradient(transparent 58%, rgba(5, 7, 28, 0.94)); }
.m-fcard .m-fname { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 20px 12px; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 5.8vh, 66px); line-height: 0.95; letter-spacing: 0.04em; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6); }
.m-fcard.p2 .m-fname { text-align: right; }
.m-fcard .m-tag { position: absolute; top: 12px; left: 18px; }
.m-fcard.p2 .m-tag { left: auto; right: 18px; }
.m-picking { position: absolute; left: 50%; top: 11px; display: none; padding: 2px 14px; translate: -50% 0; font-family: var(--font-display); font-size: clamp(16px, 2.4vh, 22px); letter-spacing: 0.12em; color: #fff; background: rgba(5, 7, 28, 0.82); box-shadow: 0 0 0 2px var(--side), 0 0 14px var(--side); animation: hintPulse 0.7s ease-in-out infinite alternate; }
#mSetup.mode-borba .m-fcard.act .m-picking { display: block; }
#mSetup.mode-borba .m-fcard:not(.act) { filter: brightness(0.62) saturate(0.75); }
.m-fcard.p1.act { box-shadow: 0 0 0 3px var(--p1), 0 0 34px rgba(255, 170, 40, 0.65), 0 16px 36px rgba(0, 0, 0, 0.5); }
.m-fcard.p2.act { box-shadow: 0 0 0 3px var(--p2), 0 0 34px rgba(60, 150, 255, 0.65), 0 16px 36px rgba(0, 0, 0, 0.5); }
.m-fcard.m-cur { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--p1), 0 0 30px rgba(255, 255, 255, 0.35); }
.m-fcard.p2.m-cur { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--p2), 0 0 30px rgba(255, 255, 255, 0.35); }
.m-pop { animation: mPop 0.32s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes mPop { from { scale: 0.94; filter: brightness(1.8); } }
.m-tag { display: inline-block; padding: 3px 12px; font-weight: 800; font-size: 13px; letter-spacing: 0.12em; color: #2a1200; background: linear-gradient(#ffd96a, var(--gi)); transform: skewX(-12deg); }
.m-fcard.p2 .m-tag, .vs-card.p2 .m-tag, .m-tag.blue, .m-panel.blue .m-tag { color: #fff; background: linear-gradient(#5fb8ff, var(--p2b)); }
.m-panel.green .m-tag { color: #062a12; background: linear-gradient(#9dffb8, #2fc45e); }
.m-finfo { width: var(--pw); display: flex; flex-direction: column; gap: 5px; min-height: 0; }
.m-side.r .m-finfo { align-items: flex-end; text-align: right; }
.m-ftag { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.m-ftag span { color: var(--gold); letter-spacing: 0.08em; }
.m-trait { margin: 0; font-size: clamp(12px, 1.7vh, 14px); line-height: 1.3; color: #ffe9b0; }
.m-trait b { margin-right: 3px; color: var(--gold); font-weight: 800; }
.m-specs { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 5px 6px; }
.m-side.r .m-specs { justify-content: flex-end; }
.m-specs span { padding: 2px 10px; transform: skewX(-10deg); border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 12px; font-weight: 700; }

.m-center { grid-area: mid; position: relative; z-index: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 2vh, 22px); }
.m-block { width: 100%; display: flex; flex-direction: column; align-items: center; }
.m-label { margin: 0 0 clamp(5px, 1vh, 10px); font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 2.9vh, 28px); line-height: 1; letter-spacing: 0.06em; color: var(--gi); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); }
.m-label small { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--muted); text-shadow: none; }
#mSetup.side-p2 #mPickLabel { color: var(--p2); }
/* mreža lica: 7 × 2 (12 boraca + nasumično); P1 zlatno, protivnik plavo, kursor beo */
.m-faces { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(7px, 1.2vh, 13px) clamp(9px, 1vw, 15px); width: min(100%, 880px); padding: 4px 14px; }
.m-face { --sk: -8deg; position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; background: #0d1240; color: #fff; transform: skewX(var(--sk)); box-shadow: 0 0 0 2px rgba(110, 130, 255, 0.42); transition: scale 0.12s, box-shadow 0.15s, filter 0.15s; }
.m-face .m-crop { position: absolute; inset: 0 -12%; transform: skewX(8deg); }
.m-face > b { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 4px 3px; overflow: hidden; background: linear-gradient(transparent, rgba(5, 7, 28, 0.92) 60%); font-family: var(--font-display); font-weight: 400; font-size: clamp(13px, 1.9vh, 19px); line-height: 1; letter-spacing: 0.05em; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.m-face.rnd .m-crop { display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, #33449c, #0d1240 72%); }
.m-face.rnd em { margin-top: -14%; font-style: normal; font-family: var(--font-display); font-size: clamp(40px, 6.4vh, 66px); line-height: 1; color: var(--gold); text-shadow: 3px 3px 0 #b4410a; }
.m-face.p1 { box-shadow: 0 0 0 3px var(--p1), 0 0 18px rgba(255, 170, 40, 0.6); }
.m-face.p2 { box-shadow: 0 0 0 3px var(--p2), 0 0 18px rgba(60, 150, 255, 0.6); }
.m-face.m-cur { z-index: 2; scale: 1.1; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--side), 0 0 26px var(--side); }
.m-face.off { filter: grayscale(1) brightness(0.42); cursor: not-allowed; }
.m-ft { position: absolute; top: 4px; display: none; padding: 1px 6px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; }
.m-ft.t1 { left: 8px; color: #2a1200; background: var(--p1); }
.m-ft.t2 { right: 8px; color: #fff; background: var(--p2b); }
.m-face.p1 .m-ft.t1, .m-face.p2 .m-ft.t2 { display: block; }
/* mape: slika sa imenom preko nje */
.m-maps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(9px, 1vw, 15px); width: min(100%, 820px); padding: 4px 14px; }
.m-map { --sk: -8deg; position: relative; padding: 0; overflow: hidden; background: #0d1240; color: #fff; text-align: left; transform: skewX(var(--sk)); box-shadow: 0 0 0 2px rgba(110, 130, 255, 0.42); transition: scale 0.12s, box-shadow 0.15s; }
.m-map .pic { display: block; aspect-ratio: 16 / 9; background-size: cover; background-position: center; transform: skewX(8deg) scale(1.16); filter: saturate(0.7) brightness(0.72); transition: filter 0.2s; }
.m-map > b { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 12px 5px; background: linear-gradient(transparent, rgba(5, 7, 28, 0.9) 55%); font-size: clamp(11px, 1.6vh, 13.5px); font-weight: 800; line-height: 1.15; }
.m-map.sel { box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(255, 210, 63, 0.55); }
.m-map.sel .pic, .m-map.m-cur .pic { filter: none; }
.m-map.m-cur { z-index: 2; scale: 1.06; box-shadow: 0 0 0 3px #fff, 0 0 20px rgba(255, 255, 255, 0.4); }
.m-map.sel.m-cur { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--gold), 0 0 22px rgba(255, 210, 63, 0.6); }
/* red izbora (težina, broj botova) */
.m-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 1vw, 12px); }
.m-opt { min-width: clamp(100px, 9vw, 136px); padding: 8px 18px; font-size: clamp(14px, 1.9vh, 16px); font-weight: 800; }
.m-opt.num { min-width: 0; width: clamp(28px, 4.2vh, 40px); padding: 6px 0; }
.m-bots .m-opts { flex-wrap: nowrap; gap: clamp(5px, 0.6vw, 9px); }
.m-opt.sel { border-color: var(--gold); color: #2a1200; background: linear-gradient(#ffd96a, var(--gi)); box-shadow: 0 3px 0 #a2470a; }
.m-opt.m-cur { scale: 1.08; border-color: #fff; box-shadow: 0 0 16px rgba(255, 255, 255, 0.35); }
.m-opt.sel.m-cur { box-shadow: 0 3px 0 #a2470a, 0 0 0 2px #fff, 0 0 18px rgba(255, 200, 60, 0.6); }
/* težina kao signal: 1–3 popunjene crtice rastuće visine */
.pips { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-left: 10px; vertical-align: -1px; }
.pips i { width: 4px; background: currentColor; opacity: 0.25; }
.pips i:nth-child(1) { height: 5px; }
.pips i:nth-child(2) { height: 8.5px; }
.pips i:nth-child(3) { height: 12px; }
.pips.l1 i:nth-child(1), .pips.l2 i:nth-child(-n+2), .pips.l3 i { opacity: 1; }
/* BORBA! (uvek dole desno) */
.m-go { --sk: -12deg; position: relative; flex: none; margin-left: auto; overflow: hidden; padding: 6px clamp(30px, 3.4vw, 58px) 8px; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4.8vh, 48px); line-height: 1; letter-spacing: 0.08em; color: #2a1200; background: linear-gradient(#ffe68a, #ffb52e 55%, #ff7a12); box-shadow: 0 5px 0 #a2470a, 0 0 28px rgba(255, 160, 40, 0.5); transition: scale 0.12s, box-shadow 0.15s; }
.m-go::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); animation: mShine 2.8s ease-in-out infinite; pointer-events: none; }
@keyframes mShine { 0%, 50% { translate: 0 0; } 100% { translate: 560% 0; } }
.m-go:hover { filter: brightness(1.06); }
.m-go.m-cur { scale: 1.06; box-shadow: 0 5px 0 #a2470a, 0 0 0 3px #fff, 0 0 40px rgba(255, 190, 60, 0.85); }
.m-go:active { translate: 0 2px; box-shadow: 0 3px 0 #a2470a, 0 0 30px rgba(255, 190, 60, 0.7); }
/* paneli (botovi, trening, drugari) */
.m-panel { position: relative; padding: clamp(12px, 2vh, 24px) clamp(14px, 1.6vw, 26px); background: linear-gradient(160deg, rgba(26, 34, 100, 0.92), rgba(8, 11, 38, 0.94)); border: 2px solid rgba(110, 130, 255, 0.42); box-shadow: inset 0 4px 0 var(--pc, var(--gold)); clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); }
.m-panel.blue { --pc: var(--p2); }
.m-panel.green { --pc: #46e07a; }
.m-bots, .m-solo { width: var(--pw); height: var(--ph); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 1.6vh, 16px); text-align: center; }
.m-bots-head { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.m-bots-head b { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 6vh, 62px); line-height: 1; letter-spacing: 0.05em; color: #fff; text-shadow: 3px 3px 0 #1a3a9a; }
.m-botfaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; width: 100%; padding: 0 6px; }
.m-botfaces i { flex: 0 0 calc((100% - 27px) / 4); aspect-ratio: 1; display: grid; place-items: center; transform: skewX(6deg); background: radial-gradient(circle at 50% 40%, #2c5ab8, #0d1240 75%); box-shadow: 0 0 0 2px var(--p2); animation: mBotIn 0.25s backwards; }
.m-botfaces em { font-style: normal; font-family: var(--font-display); font-size: clamp(22px, 3.8vh, 38px); line-height: 1; color: #cfe6ff; transform: skewX(-6deg); }
@keyframes mBotIn { from { scale: 0.6; opacity: 0; } }
.m-bots .m-label { margin: 4px 0 0; }
.m-note { margin: 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
.m-note.m-pulse { color: var(--gold); animation: mPulse 0.5s; }
@keyframes mPulse { 30% { scale: 1.05; } }
.m-solo { align-items: stretch; text-align: left; }
.m-solo .m-bots-head { align-items: flex-start; }
.m-solo-pic { aspect-ratio: 16 / 9; overflow: hidden; transform: skewX(-6deg); box-shadow: 0 0 0 2px #46e07a, 0 0 22px rgba(70, 224, 122, 0.3); }
.m-solo-pic i { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; transform: skewX(6deg) scale(1.12); }
.m-solo-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 3.9vh, 40px); line-height: 1; letter-spacing: 0.04em; color: #fff; }
.m-solo-list { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 6px; font-size: clamp(12px, 1.7vh, 14px); color: var(--ink); }
.m-solo-list li::marker { color: #46e07a; }

/* ---- 3. sa drugarima (mesto za igru preko interneta) ---- */
.m-online.on { justify-items: center; }
.m-onl { align-self: center; width: min(600px, 90vw); display: flex; flex-direction: column; gap: 16px; padding: 30px 32px 26px; }
.m-onl .m-badge { top: 22px; right: 26px; }
.m-onl-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4.8vh, 46px); line-height: 1; letter-spacing: 0.05em; color: var(--gold); text-shadow: 3px 3px 0 #b4410a; }
.m-field { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.m-field input { padding: 10px 14px; border: 2px solid rgba(110, 130, 255, 0.5); background: #0b0f35; color: var(--ink); font: 600 18px var(--font-body); letter-spacing: 0; text-transform: none; outline: none; -webkit-user-select: text; user-select: text; }
.m-field input:focus, .m-field input.m-cur { border-color: var(--gold); box-shadow: 0 0 14px rgba(255, 210, 63, 0.3); }
.m-onl-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.m-btn { --sk: -10deg; padding: 14px 16px; border: 2px solid rgba(110, 130, 255, 0.5); background: rgba(14, 18, 62, 0.9); color: #fff; text-align: center; transition: scale 0.12s, box-shadow 0.15s; }
.m-btn > span { display: flex; flex-direction: column; gap: 4px; }
.m-btn b { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 3.3vh, 30px); line-height: 1; letter-spacing: 0.05em; }
.m-btn small { font-size: 12px; font-weight: 600; }
.m-btn.gold { border-color: var(--gold); color: #2a1200; background: linear-gradient(#ffe27a, #ff9a1f); box-shadow: 0 4px 0 #a2470a; }
.m-btn.blue { border-color: #7cc4ff; background: linear-gradient(#4aa8ff, #2346d8); box-shadow: 0 4px 0 #142a8a; }
.m-btn.m-cur { scale: 1.04; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4), 0 0 0 3px #fff, 0 0 24px rgba(255, 255, 255, 0.35); }

/* ---- VS ekran dok se meč učitava (#loading.has-vs; menu.js složi #vsStage) ---- */
#loading { background: radial-gradient(ellipse at 50% 30%, #2c3a9a, var(--sky) 70%); }
#loading.has-vs { background: #080b26; }
.vs-stage { position: absolute; inset: 0; display: none; overflow: hidden; }
#loading.has-vs .vs-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: clamp(10px, 2.6vw, 56px); padding: 12vh 5vw 25vh; }
#loading.has-vs #loadVs { display: none; }
.vs-bg { position: absolute; inset: 0; }
.vs-bg i { position: absolute; display: block; }
.vs-bg .l { inset: 0; clip-path: polygon(0 0, 56% 0, 44% 100%, 0 100%); background: radial-gradient(ellipse 70% 85% at 24% 48%, #b9500f 0%, #57200d 45%, #1a0b18 100%); }
.vs-bg .r { inset: 0; clip-path: polygon(56% 0, 100% 0, 100% 100%, 44% 100%); background: radial-gradient(ellipse 70% 85% at 76% 48%, #1d5cd0 0%, #10245e 45%, #070b26 100%); }
.vs-bg .seam { inset: 0; clip-path: polygon(55.7% 0, 56.3% 0, 44.3% 100%, 43.7% 100%); background: linear-gradient(#fff6c8, #ffd23f 50%, #fff6c8); }
.vs-bg .rays { left: 50%; top: 48%; width: 150vmax; height: 150vmax; translate: -50% -50%; background: repeating-conic-gradient(rgba(255, 255, 255, 0.07) 0deg 1.2deg, transparent 1.2deg 6deg); -webkit-mask: radial-gradient(circle closest-side, transparent 8%, #000 30%, transparent 80%); mask: radial-gradient(circle closest-side, transparent 8%, #000 30%, transparent 80%); animation: mSpin 70s linear infinite; }
/* gore i dole tamnije: kosa linija ne seče natpise i traku učitavanja */
.vs-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(5, 7, 28, 0.55), transparent 16%, transparent 66%, rgba(5, 7, 28, 0.88) 88%); }
.vs-trening .vs-bg .l { clip-path: none; background: radial-gradient(ellipse 70% 85% at 50% 48%, #2a8a4a 0%, #123a2a 45%, #070b26 100%); }
.vs-trening .vs-bg .r, .vs-trening .vs-bg .seam { display: none; }
.vs-svs .vs-bg .r { background: radial-gradient(ellipse 70% 85% at 76% 48%, #3a3cc8 0%, #1a1660 45%, #070b26 100%); }
.vs-top { position: absolute; z-index: 2; top: 4.5vh; left: 0; right: 0; margin: 0; display: flex; align-items: center; justify-content: center; gap: 16px; color: rgba(255, 255, 255, 0.8); font-size: clamp(12px, 1.9vh, 17px); font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; text-shadow: 0 2px 4px #000; }
.vs-top b { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 4.6vh, 46px); letter-spacing: 0.06em; text-transform: none; color: #fff; }
.vs-top > * + *::before { content: ''; display: inline-block; width: 3px; height: 0.9em; margin-right: 16px; vertical-align: -0.08em; background: var(--gold); transform: skewX(-15deg); }
.vs-l, .vs-r, .vs-mid, .vs-solo { position: relative; z-index: 1; min-width: 0; }
.vs-l, .vs-r { display: flex; flex-direction: column; align-items: center; }
.vs-l { justify-self: end; animation: vsInL 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) backwards; }
.vs-r { justify-self: start; animation: vsInR 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) backwards; }
.vs-card { --sk: -8deg; position: relative; height: min(52vh, 560px); aspect-ratio: 3 / 4; overflow: hidden; background: #0d1240; transform: skewX(var(--sk)); box-shadow: 0 0 0 4px var(--p1), 0 0 60px rgba(255, 150, 40, 0.55), 0 20px 50px rgba(0, 0, 0, 0.6); }
.vs-card.p2 { --sk: 8deg; box-shadow: 0 0 0 4px var(--p2), 0 0 60px rgba(60, 140, 255, 0.55), 0 20px 50px rgba(0, 0, 0, 0.6); }
.vs-card .m-tag { position: absolute; top: 14px; left: 18px; }
.vs-card.p2 .m-tag { left: auto; right: 18px; }
.vs-name { margin-top: 2.2vh; font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 7vh, 80px); line-height: 1; letter-spacing: 0.05em; color: #fff; text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55); white-space: nowrap; }
.vs-mid b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(90px, 19vh, 210px); line-height: 0.8; letter-spacing: 0.02em; color: var(--gold); text-shadow: 6px 6px 0 #b4410a, 12px 12px 0 #1a1440, 0 0 60px rgba(255, 190, 60, 0.75); animation: vsSlam 0.5s 0.25s cubic-bezier(0.2, 1.5, 0.4, 1) backwards; }
.vs-bots { display: grid; grid-template-columns: repeat(var(--cols, 3), clamp(64px, 12vh, 132px)); gap: clamp(8px, 1.4vh, 14px); }
.vs-bots.n1 { --cols: 1; } .vs-bots.n2, .vs-bots.n4 { --cols: 2; } .vs-bots.n7 { --cols: 4; }
.vs-bot { --sk: 8deg; position: relative; aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; transform: skewX(var(--sk)); background: radial-gradient(circle at 50% 40%, #2c5ab8, #0d1240 75%); box-shadow: 0 0 0 3px var(--p2), 0 0 24px rgba(60, 140, 255, 0.45); animation: vsBot 0.3s var(--d, 0.3s) backwards; }
.vs-bot .m-crop { position: absolute; inset: 0 -10%; transform: skewX(-8deg); }
.vs-bot em { font-style: normal; font-family: var(--font-display); font-size: clamp(34px, 6vh, 64px); color: #cfe6ff; }
.vs-solo { grid-column: 1 / -1; justify-self: center; display: flex; align-items: center; gap: 5vw; }
.vs-solo .vs-l { justify-self: auto; }
.vs-word { font-family: var(--font-display); font-weight: 400; font-size: clamp(64px, 14vh, 150px); line-height: 0.85; letter-spacing: 0.04em; color: var(--gold); text-shadow: 5px 5px 0 #b4410a, 10px 10px 0 #1a1440, 0 0 50px rgba(255, 190, 60, 0.6); animation: vsInR 0.42s 0.1s cubic-bezier(0.2, 0.9, 0.3, 1) backwards; }
@keyframes vsInL { from { translate: -40vw 0; opacity: 0; } }
@keyframes vsInR { from { translate: 40vw 0; opacity: 0; } }
@keyframes vsSlam { from { scale: 3; opacity: 0; } 60% { scale: 0.92; opacity: 1; } }
@keyframes vsBot { from { scale: 0.5; opacity: 0; } }
#loading.has-vs .load-box { position: absolute; z-index: 2; left: 50%; bottom: 4.5vh; width: min(640px, 86vw); gap: 8px; translate: -50% 0; }
#loading.has-vs .bar { height: 12px; border-radius: 0; transform: skewX(-20deg); border: 2px solid rgba(255, 255, 255, 0.28); background: rgba(5, 7, 28, 0.85); }
#loading.has-vs #loadText, #loading.has-vs .tip { text-shadow: 0 2px 3px #000; }
#loading.has-vs .tip { color: rgba(255, 255, 255, 0.72); }

/* niski ili uski prozori: manje razmaka; jako uzak prozor – ekran režima se pomera (skrol) */
@media (max-height: 700px) {
	.m-logo > p { display: none; }
	.m-sec .m-chip { padding: 6px 20px; }
}
@media (max-width: 980px) {
	.m-setup.on { display: flex; flex-direction: column; align-items: center; gap: 14px; overflow-y: auto; padding-bottom: 12px; --ph: 300px; }
	.m-setup > .m-foot { position: sticky; bottom: 0; width: 100%; margin: 0; }
	.m-posters { flex-wrap: wrap; overflow-y: auto; }
	.m-poster { --w: 42vw; height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
	.m-rays, .m-cloud, .m-ball, .m-ball::before, .m-go::after, .m-picking, .vs-bg .rays { animation: none; }
	.m-screen.on, .m-poster, .m-pop, .m-botfaces i, .vs-l, .vs-r, .vs-mid b, .vs-bot, .vs-word,
	.m-setup.on .m-side.l, .m-setup.on .m-side.r, .m-setup.on .m-center, .m-online.on .m-onl { animation: none; }
	#menu { transition: none; }
}
/* ===== kraj: GLAVNI MENI ===== */

/* učitavanje (stari prikaz, kad VS ekran nije složen) */
.load-box { width: min(560px, 90vw); text-align: center; display: flex; flex-direction: column; gap: 14px; }
.vs { display: flex; align-items: center; justify-content: center; gap: 18px; }
.vs img { width: 150px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 3px solid var(--gold); }
.vs b { font-family: var(--font-display); font-weight: 400; font-size: 54px; color: var(--gold); text-shadow: 3px 3px 0 #b4410a; }
.vs .bots { display: grid; grid-template-columns: repeat(4, 56px); gap: 6px; }
.vs .bots img { width: 56px; aspect-ratio: 1 / 1; border-width: 2px; }
.bar { height: 14px; border-radius: 99px; background: #0b0f35; border: 2px solid var(--line); overflow: hidden; }
.bar div { height: 100%; width: 0; background: linear-gradient(90deg, var(--gi), var(--gold)); transition: width 0.2s; }
.tip { color: var(--muted); font-size: 14px; margin: 0; min-height: 2.6em; }
#loadText { margin: 0; font-weight: 600; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.pl { position: absolute; top: 14px; display: flex; gap: 10px; align-items: flex-start; width: min(430px, 44vw); }
.pl.p1 { left: 16px; }
.pl.p2 { right: 16px; flex-direction: row-reverse; text-align: right; }
.pl img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; border: 3px solid var(--gold); background: #0f1440; flex: none; }
.pl .info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pl .name { display: flex; gap: 8px; align-items: baseline; text-shadow: 0 2px 2px #000; }
.pl.p2 .name { flex-direction: row-reverse; }
.pl .name b { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: 0.05em; line-height: 1; }
.pl .name .form { font-size: 12px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; }
.hp, .ki { position: relative; height: 16px; background: rgba(8, 10, 40, 0.75); border: 2px solid #0b0f35; border-radius: 4px; overflow: hidden; }
.ki { height: 11px; width: 78%; }
.pl.p2 .ki { margin-left: auto; }
.hp i, .ki i, .hp em { position: absolute; top: 0; bottom: 0; left: 0; }
.pl.p2 .hp i, .pl.p2 .ki i, .pl.p2 .hp em { left: auto; right: 0; }
.hp em { background: #ff6a4a; transition: width 0.6s 0.25s; }
.hp i { background: linear-gradient(#7bff9b, var(--hp)); z-index: 1; }
.hp i.low { background: linear-gradient(#ffd76a, #ff9c2a); }
.hp i.crit { background: linear-gradient(#ff8a8a, var(--danger)); }
/* HP u procentima normalnog zdravlja (hud.js setHpText): na kraju trake, zlatan iznad 100 % (želja Snaga), crven ispod 25 % */
.hp .pct { position: absolute; z-index: 2; top: 0; bottom: 0; right: 6px; font: 800 12px/12px var(--font-body); letter-spacing: 0.02em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: -1px -1px 0 #0b0f35, 1px -1px 0 #0b0f35, -1px 1px 0 #0b0f35, 1px 1px 0 #0b0f35, 0 0 3px #000; }
.pl.p2 .hp .pct { right: auto; left: 6px; }
.hp .pct.over { color: var(--gold); }
.hp .pct.crit { color: #ffb0b0; }
.ki i { background: linear-gradient(#a8ecff, var(--ki)); }
.ki span { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), #0b0f35 calc(25% - 2px) 25%); }
/* zmajeve kugle (Namek): 7 kuglica ispod kija; sakupljena je narandžasta sa crvenim brojem zvezdica, posle želje zlatni sjaj i natpis */
.db { display: flex; align-items: center; gap: 3px; height: 16px; }
.pl.p2 .db { flex-direction: row-reverse; }
.db i { flex: 0 1 16px; min-width: 0; aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 50%; background: rgba(8, 10, 40, 0.35); border: 1.5px solid #0b0f35; box-shadow: inset 0 0 0 1px rgba(255, 150, 50, 0.3); font: normal 800 10px/1 var(--font-body); color: transparent; }
.db i.got { background: radial-gradient(circle at 34% 30%, #fff3c4 0 8%, #ffc24d 24%, #ff8a1f 58%, #c9500a 100%); border-color: #7a2c04; box-shadow: 0 0 6px rgba(255, 140, 30, 0.85); color: #b3000c; animation: dbPop 0.4s ease-out; }
.db b { display: none; flex: none; font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 1; letter-spacing: 0.06em; color: var(--gold); text-shadow: 0 0 6px rgba(255, 190, 40, 0.85), 0 2px 2px #000; white-space: nowrap; }
/* natpis sa trajnim željama (hud.js setDbHud): Snaga zlatna, Večni život zelen, Drugi život roze, tačka između; tri želje sitnije */
.db b .zivot { color: #8dffa8; text-shadow: 0 0 6px rgba(70, 255, 130, 0.7), 0 2px 2px #000; }
.db b .drugi { color: #ffa8c4; text-shadow: 0 0 6px rgba(255, 90, 150, 0.7), 0 2px 2px #000; }
.db b span + span::before { content: "·"; margin: 0 0.3em; color: var(--ink); text-shadow: 0 2px 2px #000; }
.db b.n3 { font-size: 15px; }
/* posle želje: samo natpis; kad opet skuplja kugle (.has), prvo kuglice pa natpis */
.pl.wished .db:not(.has) i { display: none; }
.pl.wished .db.has i { flex-shrink: 0; }
.pl.wished .db b { display: block; }
.pl.p1.wished .db.has b { margin-left: 4px; }
.pl.p2.wished .db.has b { margin-right: 4px; }
.pl.wished img { box-shadow: 0 0 12px rgba(255, 210, 63, 0.8); }
.pl.wished .hp, .pl.wished .ki { border-color: #8a6410; box-shadow: 0 0 0 1px var(--gold), 0 0 10px rgba(255, 210, 63, 0.7); }
@keyframes dbPop { from { transform: scale(1.8); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .db i.got { animation: none; } }
@media (max-width: 560px) { .db { gap: 2px; } .db i { flex-basis: 12px; font-size: 9px; } .db b { font-size: 14px; } .db b.n3 { font-size: 12px; } }

#banner { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-family: var(--font-display); font-size: clamp(60px, 11vw, 130px); color: var(--gold); letter-spacing: 0.05em; text-shadow: 5px 5px 0 #b4410a, 10px 10px 0 rgba(10, 8, 40, 0.7); opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.25s cubic-bezier(.2, 1.6, .4, 1); }
#banner.on { opacity: 1; transform: scale(1); }
#callout { position: absolute; z-index: 1; left: 0; right: 0; top: 18%; text-align: center; font-family: var(--font-display); font-size: clamp(36px, 6vw, 72px); color: #fff; letter-spacing: 0.06em; -webkit-text-stroke: 2px #1a1440; text-shadow: 0 0 18px var(--ki); opacity: 0; transition: opacity 0.25s, transform 0.3s; transform: translateY(10px); }
#callout.on { opacity: 1; transform: none; }
/* brojač niza udaraca (levo, ispod HP trake): broj iskoči pri svakom pogotku */
#combo { position: absolute; z-index: 1; left: 3%; top: 30%; font-family: var(--font-display); font-size: clamp(22px, 3vw, 36px); color: #fff; letter-spacing: 0.06em; -webkit-text-stroke: 1.5px #1a1440; text-shadow: 0 0 14px #ffb020; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
#combo b { font-size: 1.7em; color: #ffd23f; }
#combo.on { opacity: 1; }
#combo.pop b { display: inline-block; animation: comboPop 0.25s ease-out; }
@keyframes comboPop { from { transform: scale(1.6); } to { transform: scale(1); } }
#msg { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); padding: 6px 14px; border-radius: 8px; background: rgba(8, 10, 40, 0.75); font-weight: 600; opacity: 0; transition: opacity 0.2s; white-space: nowrap; }
#msg.on { opacity: 1; }
#hint { position: absolute; left: 16px; bottom: 12px; font-size: 12px; color: rgba(255, 243, 223, 0.65); text-shadow: 0 1px 2px #000; }
/* isključen zvuk (taster M): stalno vidljivo dok je isključen */
#muteBadge { position: absolute; left: 16px; bottom: 34px; padding: 4px 12px; border-radius: 8px; border: 1px solid rgba(255, 120, 120, 0.7); background: rgba(8, 10, 40, 0.78); color: #ffd7d7; font-size: 14px; font-weight: 700; pointer-events: none; }
#muteBadge[hidden] { display: none; }
#cross { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid rgba(255, 255, 255, 0.8); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }
#struggle { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); text-align: center; }
#struggle b { font-family: var(--font-display); font-weight: 400; font-size: 54px; color: #fff; -webkit-text-stroke: 2px #1a1440; letter-spacing: 0.06em; animation: pulse 0.25s infinite alternate; display: block; }
.sbar { width: min(420px, 70vw); height: 14px; border-radius: 99px; background: var(--danger); border: 2px solid #0b0f35; overflow: hidden; margin-top: 6px; }
.sbar i { display: block; height: 100%; width: 50%; background: var(--ki); transition: width 0.08s; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.12); } }

#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 15; }
#hurt { position: fixed; inset: 0; pointer-events: none; z-index: 14; opacity: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(255, 40, 40, 0.55)); }

/* Svi protiv svih: imena iznad botova, spisak nokauta, oživljavanje, tabela (Tab) */
#plates { position: absolute; inset: 0; overflow: hidden; }
.plate { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; will-change: transform; transition: opacity 0.15s; }
.plate b { font-weight: 800; font-size: 13px; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; }
.plate i { display: block; width: 54px; height: 5px; background: rgba(8, 10, 40, 0.8); border: 1px solid #0b0f35; border-radius: 3px; overflow: hidden; }
.plate em { display: block; height: 100%; width: 100%; background: var(--hp); }
/* HP u procentima desno od trake; prazna leva kolona iste širine drži traku na sredini (ispod imena) */
.plate .hpw { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 4px; }
.plate .hpw i { grid-column: 2; }
.plate .pct { grid-column: 3; justify-self: start; font-size: 11px; font-weight: 800; line-height: 1; color: var(--ink); text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plate .pct.over { color: var(--gold); }
.plate .pct.crit { color: #ff9a9a; }
.plate.tgt i { box-shadow: 0 0 0 2px var(--gold); }
.plate.tgt b::before { content: "▼ "; color: var(--gold); }
/* zmajeve kugle iznad bota: "N★" pored imena, zlatan okvir posle želje */
.plate .dbn { margin-left: 5px; color: #ffae35; font-size: 12px; }
.plate.wished { padding: 1px 6px 3px; border-radius: 6px; background: rgba(255, 210, 63, 0.12); box-shadow: 0 0 0 1.5px var(--gold), 0 0 10px rgba(255, 210, 63, 0.55); }
#feed { position: absolute; right: 16px; top: 96px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#feed .k, #feed .note { background: rgba(8, 10, 40, 0.72); padding: 4px 10px; border-radius: 6px; font-size: 14px; font-weight: 600; text-shadow: 0 1px 2px #000; }
#feed .k.me { box-shadow: inset 0 0 0 1px var(--gold); }
/* poruke bez nokauta (svi režimi) */
#feed .note { max-width: min(460px, 72vw); color: var(--gold); text-align: right; box-shadow: inset -3px 0 0 var(--gi); }
/* traka sa kuglama je viša, pa spisak ide malo niže */
#hud:has(.db:not([hidden])) #feed { top: 116px; }
#respawn { position: absolute; left: 50%; top: 56%; transform: translateX(-50%); text-align: center; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 2px 3px #000; }
#respawn b { font-family: var(--font-display); font-weight: 400; font-size: 54px; color: var(--danger); -webkit-text-stroke: 2px #1a1440; letter-spacing: 0.05em; }
#respawn span { font-size: 22px; font-weight: 800; }
#respawn small { font-size: 14px; color: var(--muted); }
#respawn em { font-style: normal; font-weight: 800; }
#score { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(600px, 92vw); background: rgba(20, 26, 77, 0.93); border: 3px solid var(--line); border-radius: 14px; padding: 14px 18px; }
#score h3 { font-family: var(--font-display); font-weight: 400; font-size: 32px; letter-spacing: 0.05em; color: var(--gold); margin: 0 0 6px; text-align: center; }
#score table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
#score th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); text-align: left; padding: 4px 8px; font-weight: 600; }
#score td { padding: 4px 8px; border-top: 1px solid rgba(58, 70, 160, 0.55); }
#score .num { text-align: right; }
#score td.num { font-weight: 800; font-size: 18px; }
#score img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; vertical-align: middle; border: 2px solid var(--line); }
#score .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
#score .n { font-weight: 600; }
#score tr.me td { background: rgba(255, 210, 63, 0.13); }
#score tr.me .n { color: var(--gold); }
#score tr.dead td { opacity: 0.6; }
#score .st { font-size: 12px; color: var(--muted); white-space: nowrap; }
/* kolona "Kugle" (samo mapa sa zmajevim kuglama): ✦ = već iskoristio želju */
#score td.kg { color: rgba(185, 192, 240, 0.55); }
#score td.kg.got { color: #ffae35; }
#score td.kg.w { color: var(--gold); text-shadow: 0 0 6px rgba(255, 210, 63, 0.7); }
@media (max-width: 560px) { #score { padding-inline: 10px; } #score th, #score td { padding-inline: 4px; } }
#score p { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
#cross.on { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 8px var(--gold); }

/* paneli */
.panel { background: var(--panel); border: 3px solid var(--line); border-radius: 16px; padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; min-width: 300px; max-width: 92vw; text-align: center; }
.panel.wide { width: min(720px, 94vw); text-align: left; }
.panel h2 { font-size: 42px; text-align: center; color: var(--gold); }
.panel p { margin: 0; color: var(--muted); }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
@media (max-width: 700px) { .keys { grid-template-columns: 1fr; } }
.keys div { display: flex; gap: 10px; align-items: baseline; }
kbd { font-family: var(--font-body); font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 6px; background: #0f1440; border: 1px solid var(--line); border-bottom-width: 3px; color: var(--gold); white-space: nowrap; }
.keys span { font-size: 14px; color: var(--ink); }
.note { font-size: 14px; }

#err { position: fixed; left: 10px; bottom: 34px; max-width: min(720px, 94vw); max-height: 40vh; overflow: auto; z-index: 99; background: rgba(120, 10, 10, 0.9); color: #fff; font: 12px/1.4 monospace; white-space: pre-wrap; padding: 8px 10px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
	#banner, #callout, #combo, .card { transition: none; }
	#combo.pop b { animation: none; }
	#struggle b { animation: none; }
}

/* brojač brzine (F3) i izveštaj (F4) */
#perf { position: fixed; right: 12px; bottom: 12px; z-index: 30; pointer-events: none; font: 12px/1.45 ui-monospace, Consolas, monospace; white-space: pre; background: rgba(8, 10, 40, 0.84); color: var(--ink); padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
#perfText { width: 100%; font: 12px/1.4 ui-monospace, Consolas, monospace; background: #0b0f35; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px; resize: vertical; }

/* podešavanja */
.set-h { margin: 6px 0 0; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sets { display: grid; grid-template-columns: minmax(110px, auto) 1fr 3.2em; gap: 8px 14px; align-items: center; }
.sets input[type=range] { width: 100%; accent-color: var(--gold); }
.sets output { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
/* tasteri: radnja levo, taster desno (klik -> čeka novi taster) */
#settings .panel, #help .panel { max-height: 92vh; overflow-y: auto; }
.keyset { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; }
.keyset .kname { color: var(--ink); font-size: 14px; }
.kbtn { min-width: 9.5em; padding: 6px 12px; border-radius: 8px; background: #0f1440; border: 1px solid var(--line); border-bottom-width: 3px; color: var(--gold); font-weight: 800; font-size: 13px; text-align: center; }
.kbtn:hover { border-color: var(--gold); }
.kbtn.wait { background: var(--gold); color: #1a1440; border-color: var(--gold); animation: hintPulse 0.6s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .kbtn.wait { animation: none; } }
.chk { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.chk input { width: 18px; height: 18px; accent-color: var(--gold); }
.chk.sel select { margin-left: auto; padding: 6px 10px; border-radius: 8px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; }
.chk.sel select:disabled { opacity: 0.5; cursor: not-allowed; } /* jezik u pauzi (menja se samo u glavnom meniju) */


/* specijalne moći (1/2/3 ili točkić) */
#spbar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 8px; pointer-events: none; }
#spbar .sp { position: relative; min-width: 120px; padding: 6px 12px 7px 36px; border-radius: 10px; background: rgba(16, 12, 48, 0.72); border: 2px solid rgba(255, 255, 255, 0.16); color: #fff; overflow: hidden; transition: border-color 0.12s, opacity 0.12s; }
#spbar .sp kbd { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); min-width: 20px; text-align: center; }
#spbar .sp b { display: block; font-size: 13px; white-space: nowrap; }
#spbar .sp small { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.65); font-variant-numeric: tabular-nums; }
#spbar .sp .cd { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); transform-origin: left center; transform: scaleX(0); }
#spbar .sp.sel { border-color: var(--gold); box-shadow: 0 0 14px rgba(255, 200, 60, 0.45); }
#spbar .sp.low { opacity: 0.5; }
#spbar .sp.charging { border-color: #fff; background: rgba(60, 50, 140, 0.8); }
@media (max-width: 700px) { #spbar .sp { min-width: 0; padding-left: 30px; } #spbar .sp small { display: none; } }

/* ===== KI RADAR (js/radar.js) ===== */
/* skauter gore levo, ispod traka igrača: vidi samo protivnike koji koriste ki. Disk ~132 px (telefon ~100 px) + 6 px oko njega za sjaj ivice.
   Ne hvata miš; z-index -1 = ispod ostalih delova HUD-a (tabela, natpisi), ali iznad igre (#hud ima svoj z-index) */
#radar { position: absolute; top: 114px; left: 10px; width: 144px; height: 144px; z-index: -1; pointer-events: none; }
/* telefon ili nizak ekran: manji disk, malo niže (na uskom ekranu se ime borca prelomi u dva reda) */
@media (max-width: 560px), (max-height: 480px) { #radar { top: 123px; left: 11px; width: 110px; height: 110px; } }
/* ===== kraj: KI RADAR ===== */

/* ===== UVODNI FILM (intro/player.js): "Klikni za početak", film iz igre, natpisi preko filma ===== */
#uvod { position: fixed; inset: 0; z-index: 60; background: #000; overflow: hidden; transition: opacity 0.35s; }
#uvod.out { opacity: 0; }
#uvod video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s; }
#uvod.film video { opacity: 1; }
#uvod.seek video { opacity: 0; } /* mirna verzija: slika se pojavi tek na pravom kadru (player.js: still) */
#uvod.cut video { transition: none; } /* spoj slike: film je odmah ispod naslovne strane koja se gasi */
/* sloj natpisa: player.js ga smesti na vidljivi deo slike filma (natpisi ostaju unutar 5 % od ivica slike) */
#uvodTekst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* kraj filma: slika se utapa u pozadinu menija (ista kao #menu), a naslov sleće u zaglavlje menija */
.uvod-dim { position: absolute; inset: 0; background: var(--menu-bg); opacity: 0; pointer-events: none; }
#uvod.landing .uvod-dim { opacity: 1; transition: opacity 0.6s ease-out; }
#uvod.landing #uvodTekst { overflow: visible; }
#uvod.landing .uvod-skip { animation: none; opacity: 0; transition: opacity 0.3s; }

/* naslovna strana; posle klika (cut) pozadina i natpisi se ugase, a kugla sleće na zmajevu kuglu u prvom kadru filma */
#uvod.splash { cursor: pointer; }
.uvod-splash { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 16px; isolation: isolate; }
.uvod-splash::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 38%, #3a4fb0 0%, #1d2766 46%, var(--sky) 78%); }
#uvod.splash .uvod-splash, #uvod.cut .uvod-splash { display: flex; }
#uvod.cut .uvod-splash { pointer-events: none; }
#uvod.cut .uvod-splash::before { opacity: 0; transition: opacity 0.3s; }
#uvod.cut .uvod-splash > :not(.ball) { opacity: 0; transition: opacity 0.25s; }
#uvod.cut .uvod-splash .press { animation: none; }
.uvod-splash h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(72px, 13vw, 170px); line-height: 0.9; letter-spacing: 0.04em; color: var(--gold); text-shadow: 5px 5px 0 #b4410a, 10px 10px 0 #1a1440, 0 0 46px rgba(255, 190, 60, 0.45); }
.uvod-splash .tag { margin: 0 0 18px; font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase; color: #fff; font-size: clamp(13px, 1.6vw, 20px); }
.uvod-splash .press { margin: 0; padding: 7px 20px; border: 2px solid var(--gold); border-radius: 99px; color: var(--gold); font-weight: 800; font-size: clamp(15px, 1.8vw, 21px); animation: hintPulse 1.1s ease-in-out infinite alternate; }
.uvod-splash .small { margin: 0; color: var(--muted); font-size: 13px; }
/* dok se igra učitava (index.html): posle ranog klika (go) ili bez uvoda (quiet) umesto poziva piše "Učitavanje…" */
.uvod-splash .wait { display: none; margin: 0; padding: 7px 20px; border: 2px solid transparent; color: var(--muted); font-weight: 800; font-size: clamp(15px, 1.8vw, 21px); }
#uvod.go .uvod-splash .press, #uvod.quiet .uvod-splash .press, #uvod.quiet .uvod-splash .small { display: none; }
#uvod.go .uvod-splash .wait, #uvod.quiet .uvod-splash .wait { display: block; }
#uvod.quiet { cursor: default; }
/* zmajeva kugla sa 4 zvezdice */
.uvod-splash .ball { position: relative; width: clamp(90px, 11vw, 140px); aspect-ratio: 1; border-radius: 50%; margin-bottom: 6px;
	background: radial-gradient(circle at 34% 30%, #fff6dc 0 7%, #ffc56a 22%, #ff8a1f 58%, #c2520b 100%);
	box-shadow: 0 0 40px rgba(255, 150, 40, 0.75), inset -8px -10px 22px rgba(120, 40, 0, 0.45); animation: ballFloat 2.4s ease-in-out infinite alternate; }
.uvod-splash .ball i { position: absolute; width: 18%; aspect-ratio: 1; background: #d81e1e; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.uvod-splash .ball i:nth-child(1) { left: 41%; top: 22%; }
.uvod-splash .ball i:nth-child(2) { left: 22%; top: 41%; }
.uvod-splash .ball i:nth-child(3) { left: 60%; top: 41%; }
.uvod-splash .ball i:nth-child(4) { left: 41%; top: 60%; }
@keyframes ballFloat { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-10px) rotate(6deg); } }
.uvod-skip { position: absolute; right: 18px; bottom: 14px; margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 13px; font-weight: 700; text-shadow: 0 1px 3px #000; opacity: 0; pointer-events: none; }
#uvod.film .uvod-skip { animation: skipHint 5s 0.6s both; }
@keyframes skipHint { 0% { opacity: 0; } 12%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* natpisi preko filma: { kind: logo | name | text | power, side: l | r | c } */
.ut { position: absolute; display: flex; flex-direction: column; animation: utLife var(--dur, 2s) linear both; }
.ut.hold { animation: none; } /* naslov ostaje do kraja filma (hold / flipAt) */
@keyframes utLife { 0%, 86% { opacity: 1; } 100% { opacity: 0; } }
.ut b { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.05em; line-height: 0.9; }
.ut small { font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 8px #000, 0 0 2px #000; }
.ut.logo { inset: 0; align-items: center; justify-content: center; gap: 10px; }
/* omotač naslova: sleće u zaglavlje menija (player.js: flip; zato isti razmak slova kao naslov u meniju) */
.ut.logo .lg { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; transform-origin: 0 0; }
.ut.logo b { font-size: clamp(56px, 17vw, 250px); letter-spacing: 0.04em; white-space: nowrap; color: var(--gold); text-shadow: 6px 6px 0 #b4410a, 12px 12px 0 #1a1440, 0 0 60px rgba(255, 200, 70, 0.7); animation: logoSlam 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
/* udarni talas i blesak iza naslova u trenutku udara (logoSlam: 55 % od 0.55 s) */
.ut.logo .lg::before, .ut.logo .lg::after { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0; }
.ut.logo .lg::before { width: 64%; margin: -32% 0 0 -32%; border: clamp(3px, 0.45vw, 8px) solid #fff0b8; box-shadow: 0 0 28px rgba(255, 196, 64, 0.9), inset 0 0 28px rgba(255, 196, 64, 0.7); animation: logoRing 0.8s 0.3s cubic-bezier(0.1, 0.7, 0.3, 1) both; }
.ut.logo .lg::after { width: 46%; margin: -23% 0 0 -23%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 214, 110, 0.55) 45%, transparent); animation: logoFlash 0.5s 0.3s ease-out both; }
@keyframes logoRing { 0% { transform: scale(0.12); opacity: 0; } 10% { opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes logoFlash { 0% { transform: scale(0.3); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.ut.logo small { font-size: clamp(15px, 2vw, 28px); animation: fadeUp 0.7s 0.35s both; }
.ut.name { bottom: 11%; left: 5%; align-items: flex-start; }
.ut.name.r { left: auto; right: 5%; align-items: flex-end; }
.ut.name b { font-size: clamp(44px, 6.4vw, 96px); color: var(--c, var(--gold)); text-shadow: 4px 4px 0 #1a1440, 0 0 24px rgba(0, 0, 0, 0.5); animation: nameIn 0.32s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.ut.name.r b { animation-name: nameInR; }
.ut.name small { font-size: clamp(12px, 1.3vw, 18px); margin-top: 4px; animation: fadeUp 0.5s 0.15s both; }
.ut.text { top: 9%; left: 0; right: 0; align-items: center; }
.ut.text b { font-size: clamp(34px, 4.6vw, 70px); color: var(--c, #fff); text-shadow: 3px 3px 0 #1a1440, 0 0 18px rgba(0, 0, 0, 0.6); animation: fadeUp 0.4s both; }
@keyframes logoSlam { 0% { transform: scale(3.2); opacity: 0; filter: blur(10px); } 55% { transform: scale(0.94); opacity: 1; filter: none; } 100% { transform: scale(1); } }
@keyframes nameIn { from { transform: translateX(-70px) skewX(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nameInR { from { transform: translateX(70px) skewX(14deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeUp { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* skauter (kind: power): nivo snage gore desno, zelene cifre iste širine sa sjajem; glitch = cifre "polude",
   shatter = brojač se razleti (player.js: svaka cifra dobija --dx, --dy, --r), gone = ugasi se (bez shatterAt) */
.ut.power { top: 5%; right: 5%; align-items: flex-end; gap: 4px; isolation: isolate; animation: pwrIn 0.2s ease-out both; }
.ut.power small { color: #3dff6e; font-size: clamp(11px, 1.1vw, 17px); letter-spacing: 0.3em; padding-bottom: 3px; border-bottom: 1px solid rgba(61, 255, 110, 0.55); text-shadow: 0 0 6px rgba(61, 255, 110, 0.8), 0 1px 2px #000; }
.ut.power b { font-family: "Consolas", "SFMono-Regular", "Menlo", ui-monospace, monospace; font-weight: 700; font-size: clamp(34px, 5vw, 80px); line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; color: #3dff6e; text-shadow: 0 0 6px rgba(61, 255, 110, 0.9), 0 0 22px rgba(61, 255, 110, 0.5), 0 2px 3px rgba(0, 0, 0, 0.7); }
.ut.power b span { display: inline-block; width: 0.62em; text-align: center; }
.ut.power.glitch b { animation: pwrGlitch 0.12s steps(1) infinite; text-shadow: -0.07em 0 rgba(255, 40, 90, 0.9), 0.07em 0 rgba(40, 210, 255, 0.9), 0 0 10px rgba(61, 255, 110, 0.9); }
.ut.power.glitch small { animation: pwrGlitch 0.12s steps(1) infinite reverse; }
.ut.power.shatter::after { content: ''; position: absolute; inset: -40% -20%; z-index: -1; background: radial-gradient(closest-side, rgba(225, 255, 232, 0.9), rgba(61, 255, 110, 0.35) 50%, transparent); pointer-events: none; animation: pwrFlash 0.32s ease-out both; }
.ut.power.shatter small, .ut.power.shatter b span { animation: pwrShard 0.45s cubic-bezier(0.15, 0.75, 0.35, 1) both; }
.ut.power.gone { animation: pwrOut 0.25s ease-in both; }
@keyframes pwrIn { from { opacity: 0; transform: scaleY(0.15); } to { opacity: 1; transform: none; } }
@keyframes pwrOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes pwrGlitch { 0% { transform: translate(0.05em, -0.03em) skewX(-8deg); } 33% { transform: translate(-0.06em, 0.02em); } 66% { transform: translate(0.02em, 0.05em) skewX(10deg); } 100% { transform: none; } }
@keyframes pwrShard { 0% { transform: none; opacity: 1; } 100% { transform: translate(var(--dx, 0), var(--dy, -40px)) rotate(var(--r, 0deg)) scale(0.5); opacity: 0; filter: blur(2px); } }
@keyframes pwrFlash { 0% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.3); } }

/* bez pokreta: sistemsko "smanji pokrete" ili player.js (calm: i kad je treperenje ekrana isključeno) –
   miran naslov sa podnaslovom, bez talasa i bleska */
@media (prefers-reduced-motion: reduce) {
	.ut.logo b, .ut.name b, .uvod-splash .ball { animation: none; }
	.ut.logo .lg::before, .ut.logo .lg::after { content: none; }
}
#uvod.calm .ut.logo b, #uvod.calm .ut.logo small { animation: none; }
#uvod.calm .ut.logo .lg::before, #uvod.calm .ut.logo .lg::after { content: none; }
/* ===== kraj: UVODNI FILM ===== */

/* ===== DODIR (js/touch.js): telefon i tablet – džojstik levo, dugmad desno, kamera prevlačenjem =====
   html.touch = komande na dodir uključene (index.html je stavlja pre učitavanja, touch.js kad se promeni podešavanje);
   html.phone = telefon ili tablet (uspravno: „Okreni telefon").
   #tpad: prazan deo ekrana ispod HUD-a (džojstik ispod prsta / kamera); #touch: dugmad iznad HUD-a.
   Mesto i veličinu svakog dugmeta postavlja touch.js (raspored od ivica ekrana u % visine). */
html:not(.touch) .touch-only { display: none !important; }
html.touch .kbd-only { display: none !important; }
.keys-set, .touch-set { display: flex; flex-direction: column; gap: 12px; }
.touch-btns { display: flex; flex-wrap: wrap; gap: 8px; }
html.touch, html.touch body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; touch-action: manipulation; }
html.touch body { -webkit-user-select: none; user-select: none; } /* (dugo držanje ne označava tekst; polja za unos i dalje rade) */
html.touch input, html.touch textarea { -webkit-user-select: text; user-select: text; }
html.touch #game { touch-action: none; }
#tpad { position: fixed; inset: 0; z-index: 9; touch-action: none; }
#touch { --op: 0.85; position: fixed; inset: 0; z-index: 11; pointer-events: none; touch-action: none; -webkit-user-select: none; user-select: none; }
.tb { position: absolute; left: 0; top: 0; width: 60px; height: 60px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; pointer-events: auto; touch-action: none; color: #fff; opacity: var(--op); background: rgba(10, 14, 40, 0.5); border: 2px solid rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.22), 0 3px 10px rgba(0, 0, 0, 0.35); transition: transform 0.06s, background 0.1s, border-color 0.1s, color 0.1s; }
.tb svg { width: 54%; height: 54%; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; pointer-events: none; }
.tb svg .f { fill: currentColor; stroke: none; }
.tb.on { transform: translate(-50%, -50%) scale(0.92); background: rgba(255, 210, 63, 0.36); border-color: var(--gold); color: var(--gold); }
.tb.big { border-width: 3px; background: rgba(10, 14, 40, 0.42); }
.tb.big svg { width: 48%; height: 48%; }
.tb.big.on { background: rgba(67, 196, 255, 0.36); border-color: var(--ki); color: #d8f3ff; }
.tb.small { background: rgba(10, 14, 40, 0.62); border-width: 1.5px; }
.tb.small svg { stroke-width: 3.8; }
.tb-lbl { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 2px; white-space: nowrap; font: 800 11px/1 var(--font-body); letter-spacing: 0.05em; text-shadow: 0 1px 3px #000, 0 0 2px #000; pointer-events: none; }
.tb-sp { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); max-width: 150%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 10px/1 var(--font-body); color: var(--gold); text-shadow: 0 1px 2px #000, 0 0 2px #000; pointer-events: none; }
.tb-pill { position: absolute; top: -6px; right: -8px; display: none; padding: 2px 6px; border-radius: 99px; background: var(--gi); color: #1a0e00; font: 800 10px/1 var(--font-body); pointer-events: none; }
.tb.flying .tb-pill { display: block; }
.tb.lit { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 14px rgba(255, 210, 63, 0.7), inset 0 0 0 2px rgba(0, 0, 0, 0.22); }
.tb.low { opacity: calc(var(--op) * 0.5); }
.tb.gone { display: none; }
.t-mic.on { color: #ff6a6a; border-color: #ff6a6a; background: rgba(255, 80, 80, 0.3); }
.t-snd svg.off, .t-snd.muted svg.on { display: none; }
.t-snd.muted svg.off { display: block; }
.t-snd.muted { color: #ffb0b0; border-color: rgba(255, 120, 120, 0.8); }
/* džojstik: krug, kuglica, narandžasti prsten = brzo */
.tb.joy, .tb.joy.on { background: none; border: 0; box-shadow: none; transform: translate(-50%, -50%); }
.tj-base { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 14, 40, 0.18), rgba(10, 14, 40, 0.48)); border: 2px solid rgba(255, 255, 255, 0.45); }
.tj-ring { position: absolute; inset: -9%; border-radius: 50%; border: 3px dashed rgba(255, 138, 31, 0.5); transition: border-color 0.15s, box-shadow 0.15s; }
.tj-knob { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; transform: translate(calc(-50% + var(--kx, 0px)), calc(-50% + var(--ky, 0px))); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #c9d3ea 60%, #8c98b8); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); }
.tj-fast { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -16%); font: 400 22px/1 var(--font-display); letter-spacing: 0.06em; color: var(--gi); text-shadow: 0 2px 0 #000; opacity: 0; transition: opacity 0.15s; white-space: nowrap; pointer-events: none; }
.tb.joy.boost .tj-ring { border-style: solid; border-color: var(--gi); box-shadow: 0 0 14px rgba(255, 138, 31, 0.7); }
.tb.joy.boost .tj-knob { background: radial-gradient(circle at 40% 35%, #fff2d8, var(--gi) 70%); }
.tb.joy.boost .tj-fast { opacity: 1; }
.tb.ext { display: none; }
/* uređivanje rasporeda (dugme Komande ili Podešavanja → Dodir): preko svega, sa mrežom; traka gore */
#touch.edit { z-index: 50; pointer-events: auto; background-color: rgba(4, 7, 22, 0.62); background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 5vw 10vh; }
#touch.edit .tb { opacity: 1; outline: 2px dashed rgba(255, 255, 255, 0.75); outline-offset: 4px; }
#touch.edit .tb.picked { outline: 3px solid var(--gold); }
#touch.edit .tb.ext { display: grid; border-radius: 12px; background: rgba(67, 196, 255, 0.12); border: 2px solid rgba(67, 196, 255, 0.6); }
.tb-ext { font: 800 11px/1.1 var(--font-body); color: #cfeaff; text-align: center; text-shadow: 0 1px 2px #000; pointer-events: none; }
.tedbar { position: absolute; left: calc(8px + env(safe-area-inset-left, 0px)); top: 8px; display: none; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; width: max-content; max-width: min(56vw, 540px); padding: 8px 12px; border-radius: 12px; background: rgba(12, 16, 52, 0.95); border: 2px solid var(--gold); pointer-events: auto; font-family: var(--font-body); }
#touch.edit .tedbar { display: flex; }
.tedbar.right { left: auto; right: calc(8px + env(safe-area-inset-right, 0px)); } /* izabrano dugme je levo: traka ide desno */
.ted-name { color: var(--gold); font-size: 13px; }
.tedbar label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.tedbar input[type=range] { width: 110px; accent-color: var(--gold); }
.tedbar button { padding: 7px 12px; border-radius: 8px; border: 2px solid var(--line); background: transparent; color: var(--ink); font-weight: 700; font-size: 13px; }
.tedbar button.ted-ok { border-color: var(--gold); background: var(--gold); color: #1a1440; }

/* HUD na dodir: manje trake, protivnik gore na sredini, radar gore desno (touch.js), bez reda sa tasterima */
html.touch #hint, html.touch #muteBadge { display: none !important; }
html.touch .pl { top: 6px; width: min(300px, 33vw); gap: 7px; }
html.touch .pl.p1 { left: calc(8px + env(safe-area-inset-left, 0px)); }
/* protivnik: od kraja trake igrača do malih dugmića gore desno (oni su 72 jedinice od desne ivice; jedinica = 1 % visine,
   najviše 5,2 px – isto kao u touch.js), i na iPhone-u sa zarezom kamere (safe-area) */
html.touch .pl.p2 { right: auto; left: calc(33vw + 22px + env(safe-area-inset-left, 0px)); width: max(140px, min(250px, calc(67vw - 30px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 72 * min(1vh, 5.2px)))); }
html.touch .pl img { width: 40px; height: 40px; border-width: 2px; }
html.touch .pl .name b { font-size: 19px; }
html.touch .pl .name .form { font-size: 10px; }
html.touch .hp { height: 13px; }
html.touch .ki { height: 9px; }
html.touch .hp .pct { font-size: 10px; line-height: 9px; }
html.touch #spbar { pointer-events: auto; gap: 6px; }
html.touch #spbar .sp { min-width: 0; padding: 5px 10px 6px 36px; }
html.touch #spbar .sp b { font-size: 12px; }
html.touch #spbar .sp small { display: block; font-size: 10px; white-space: nowrap; }
@media (max-aspect-ratio: 2 / 1) { html.touch #spbar .sp { padding-right: 7px; } html.touch #spbar .sp b { font-size: 11px; } html.touch #spbar .sp small { font-size: 9px; } } /* telefon 16:9: traka moći uža */
html.touch #feed { right: auto; left: 50%; transform: translateX(-50%); top: 15vh; align-items: center; }
html.touch #feed .k, html.touch #feed .note { font-size: 12px; }
html.touch #feed .note { text-align: center; }
html.touch #msg { bottom: auto; top: 24vh; font-size: 14px; }
html.touch #struggle { bottom: auto; top: 26vh; }
html.touch #struggle b { font-size: 40px; }
html.touch #combo { top: 22vh; }
html.touch #cet:not(.usobi) { bottom: 44vh; } /* (u sobi ostaje dole, ispod spiska igrača) */

/* telefon uspravno: igra je za položen ekran */
#okreni { display: none; }
@media (orientation: portrait) {
	html.phone #okreni { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: radial-gradient(ellipse at 50% 38%, #3a4fb0 0%, #1d2766 46%, var(--sky) 78%); color: var(--ink); font-family: var(--font-body); }
}
#okreni svg { width: 96px; height: 96px; fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; animation: okreni 1.8s ease-in-out infinite; }
#okreni svg .f { fill: rgba(255, 210, 63, 0.25); }
#okreni b { font-family: var(--font-display); font-weight: 400; font-size: 44px; letter-spacing: 0.05em; color: var(--gold); text-shadow: 3px 3px 0 #b4410a; }
#okreni span { color: var(--muted); font-size: 16px; max-width: 28ch; }
#okreni small { color: var(--muted); font-size: 13px; max-width: 34ch; opacity: 0.85; } /* iPhone sa zaključanom rotacijom */
@keyframes okreni { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { #okreni svg { animation: none; } }
/* iPhone: savet za ceo ekran (Dodaj na početni ekran), samo u meniju */
#iosTip { position: fixed; z-index: 30; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(560px, 92vw); padding: 10px 12px 10px 16px; border-radius: 12px; background: rgba(12, 16, 52, 0.94); border: 2px solid var(--gold); color: var(--ink); font: 600 14px/1.35 var(--font-body); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
#iosTip b { color: var(--gold); }
#iosTip button { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #1a1440; font-weight: 800; }
/* nizak ekran (položen telefon): paneli pauze, rezultata, podešavanja i pomoći manji, sa skrolom */
@media (max-height: 500px) {
	.panel { padding: 14px 18px; gap: 8px; }
	.panel h2 { font-size: 30px; margin-bottom: 0; }
	.big { font-size: 24px; padding: 6px 26px; }
	.ghost { padding: 7px 16px; }
	#pause .panel, #result .panel { max-height: 94vh; overflow-y: auto; }
	#settings .panel, #help .panel { max-height: 96vh; }
}
/* na dodir nema tastature: bez natpisa sa tasterima u meniju */
html.touch .m-keys, html.touch .m-back kbd { display: none; }
/* položen telefon (nizak ekran): svaki ekran menija staje u visinu ekrana, bez skrola (posle pravila za uzak prozor) */
@media (max-height: 500px) and (orientation: landscape) {
	.m-home.on { row-gap: 4px; }
	.m-logo { --lf: 44px; --lt: 8px; }
	.m-posters { flex-wrap: nowrap; overflow: visible; gap: 12px; padding: 2px calc(18px + env(safe-area-inset-right, 0px)) 2px calc(18px + env(safe-area-inset-left, 0px)); }
	.m-poster { --w: min(21vw, 210px); height: 100%; }
	.m-ptxt { padding: 26px 10px 10px 18px; gap: 3px; }
	.m-ptxt b { font-size: 24px; }
	.m-ptxt small { font-size: 10px; }
	.m-pvs { font-size: 24px; }
	.m-badge { top: 8px; right: 8px; font-size: 10px; padding: 2px 7px; }
	.m-sec .m-chip { padding: 5px 18px; font-size: 13px; }
	.m-home .sound-hint { top: 8px; left: calc(10px + env(safe-area-inset-left, 0px)); right: auto; padding: 3px 10px; font-size: 11px; }
	.m-foot { min-height: 38px; gap: 12px; padding: 4px calc(14px + env(safe-area-inset-right, 0px)) 4px calc(14px + env(safe-area-inset-left, 0px)); }
	.m-desc { font-size: 12px; }
	/* ekran režima: ti levo, mreža lica, mape i težina u sredini, protivnik / botovi / trening desno */
	.m-setup.on { --pad: calc(10px + env(safe-area-inset-left, 0px)); --ph: calc(100vh - 112px); --pw: calc(var(--ph) * 0.6); display: grid; grid-template-columns: var(--pw) minmax(0, 1fr) var(--pw); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0; align-items: center; overflow: visible; padding: 0 var(--pad); }
	.m-setup > .m-foot { position: relative; width: auto; margin: 0 calc(-1 * var(--pad)); }
	.m-head { gap: 12px; padding: 4px 12px; }
	.m-back { padding: 4px 12px; font-size: 12px; }
	.m-title { font-size: 24px; }
	.m-title small { font-size: 10px; letter-spacing: 0.16em; }
	.m-side { gap: 4px; }
	.m-finfo { display: none; }
	.m-fcard .m-fname { padding: 0 10px 8px; font-size: 22px; }
	.m-fcard .m-tag { top: 6px; left: 8px; padding: 2px 8px; font-size: 10px; }
	.m-fcard.p2 .m-tag { left: auto; right: 8px; }
	.m-picking { top: auto; bottom: 34px; padding: 1px 8px; font-size: 12px; }
	.m-bots .m-opts { flex-wrap: wrap; gap: 4px; }
	.m-center { gap: 4px; }
	.m-label { margin-bottom: 2px; font-size: 14px; }
	.m-label small { font-size: 10px; }
	.m-faces { width: min(100%, 560px); gap: 4px 6px; padding: 2px 4px; }
	.m-face > b { padding: 6px 2px 2px; font-size: 10px; }
	.m-face.rnd em { font-size: 26px; }
	.m-ft { font-size: 8px; padding: 0 3px; }
	.m-maps { width: min(100%, 520px); gap: 6px; padding: 2px 4px; }
	.m-map > b { padding: 6px 5px 2px; font-size: 9px; }
	.m-opt { min-width: 70px; padding: 4px 10px; font-size: 12px; }
	.m-opt.num { width: 26px; padding: 3px 0; }
	.m-go { padding: 3px 24px 5px; font-size: 26px; }
	.m-bots, .m-solo { gap: 6px; padding: 8px 10px; }
	.m-bots-head { gap: 4px; }
	.m-bots-head b { font-size: 24px; }
	.m-botfaces { gap: 5px; }
	.m-botfaces i { flex-basis: calc((100% - 15px) / 4); }
	.m-botfaces em { font-size: 16px; }
	.m-note { font-size: 10px; }
	.m-solo-name { font-size: 18px; }
	.m-solo-list { gap: 2px; font-size: 10px; }
	.m-onl { gap: 10px; padding: 16px 20px 14px; }
}
/* ===== kraj: DODIR ===== */