@import url('fonts/fonts.css');
/* Spoločná téma hier Herne: tmavý neón a sklo (nadväzuje na Herňu, vycibrenejšie). */
:root {
	--bg: #07080f;
	--bg2: #0c0f1c;
	--ink: #eef0f8;
	--ink2: rgba(238, 240, 248, 0.78);
	--mut: #8f96ad;
	--acc: #22e6ff;
	--acc2: #b06bff;
	--hot: #ff3d9a;
	--gold: #ffb02e;
	--ok: #4cf2a0;
	--bad: #ff5470;
	--glass: rgba(16, 19, 32, 0.72);
	--glass2: rgba(24, 28, 46, 0.86);
	--line: rgba(255, 255, 255, 0.11);
	--line2: rgba(255, 255, 255, 0.2);
	--r: 18px;
	--sh: 0 24px 60px -24px rgba(0, 0, 0, 0.8), 0 2px 0 rgba(255, 255, 255, 0.05) inset;
	--font: 'Segoe UI', Inter, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
	--mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
	color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body { overflow-x: hidden; }
button, input, select { font: inherit; color: inherit; }
::selection { background: rgba(34, 230, 255, 0.35); }

/* pozadie: pomaly sa vlniace svetelné škvrny + jemná mriežka */
#bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(1200px 700px at 50% -10%, #141b3a 0%, var(--bg) 60%); }
#bg::before, #bg::after { content: ''; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: 0.32; animation: drift 26s ease-in-out infinite alternate; }
#bg::before { background: radial-gradient(circle, var(--bga, #22e6ff) 0%, transparent 65%); left: -18vmax; top: 10vh; }
#bg::after { background: radial-gradient(circle, var(--bgb, #b06bff) 0%, transparent 65%); right: -20vmax; bottom: -10vh; animation-delay: -13s; }
#bg i { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); }
@keyframes drift { to { transform: translate(8vmax, -6vmax) scale(1.15); } }

/* horná lišta */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: linear-gradient(to bottom, rgba(7,8,15,.92), rgba(7,8,15,.55)); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top a.back { color: var(--mut); text-decoration: none; font-weight: 600; font-size: .92rem; padding: 6px 10px; border-radius: 10px; }
.top a.back:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.top .gtitle { font-weight: 900; letter-spacing: -.02em; background: linear-gradient(100deg, var(--acc), var(--acc2) 55%, var(--hot)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.top .sp { flex: 1; }
.top .code { font: 700 .9rem var(--mono); letter-spacing: .2em; color: var(--ink2); padding: 5px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.iconbtn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.05); cursor: pointer; font-size: 1.05rem; }
.iconbtn:hover { background: rgba(255,255,255,.1); }

/* panely a typografia */
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); backdrop-filter: blur(16px) saturate(1.2); }
.wrap { width: min(1100px, 100%); margin: 0 auto; padding: 22px 16px 60px; }
.title-xl { margin: 0; font-size: clamp(2.6rem, 8vw, 5.4rem); font-weight: 900; letter-spacing: -.045em; line-height: .92; background: linear-gradient(100deg, var(--acc), var(--acc2) 45%, var(--hot) 75%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 30px rgba(176,107,255,.25)); }
.kicker { font: 600 .74rem var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mut); }
.lead { color: var(--ink2); font-size: 1.05rem; line-height: 1.55; max-width: 60ch; }
.mut { color: var(--mut); }
h2, h3 { letter-spacing: -.02em; }

/* tlačidlá a vstupy */
.btn { position: relative; cursor: pointer; border: 0; border-radius: 14px; padding: 13px 22px; font-weight: 800; letter-spacing: .01em; color: #06070c; background: linear-gradient(135deg, var(--acc), #7be8ff); box-shadow: 0 12px 30px -12px rgba(34,230,255,.7), 0 1px 0 rgba(255,255,255,.5) inset; transition: transform .15s, filter .15s, box-shadow .2s; }
.btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .38; cursor: default; filter: grayscale(.4); }
.btn.alt { color: var(--ink); background: rgba(255,255,255,.07); border: 1px solid var(--line); box-shadow: none; }
.btn.alt:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.btn.hot { background: linear-gradient(135deg, var(--hot), #ff7ab8); box-shadow: 0 12px 30px -12px rgba(255,61,154,.7); color: #1a0010; }
.btn.gold { background: linear-gradient(135deg, var(--gold), #ffd36e); box-shadow: 0 12px 30px -12px rgba(255,176,46,.7); color: #1a1000; }
.btn.sm { padding: 8px 14px; border-radius: 11px; font-size: .88rem; }
.btn.block { width: 100%; }
.inp { width: 100%; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.055); color: var(--ink); font-size: 1.02rem; outline: none; transition: border-color .15s, background .15s; }
.inp:focus { border-color: var(--acc); background: rgba(34,230,255,.07); }
.inp.code { font: 800 1.15rem var(--mono); letter-spacing: .32em; text-transform: uppercase; text-align: center; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.sel { appearance: none; padding: 9px 34px 9px 12px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238f96ad' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--ink); cursor: pointer; }
.sel:disabled { opacity: .7; cursor: default; }
button.sel { text-align: left; white-space: nowrap; }
.sel[aria-expanded='true'] { border-color: var(--acc); }
.ddmenu { position: fixed; z-index: 90; display: grid; gap: 2px; padding: 5px; max-height: 70vh; overflow-y: auto; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg2); box-shadow: var(--sh); }
.dditem { padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-align: left; white-space: nowrap; cursor: pointer; }
.dditem:hover, .dditem:focus-visible { outline: 0; background: rgba(255,255,255,.1); }
.dditem.on { color: var(--acc); font-weight: 700; }

/* domovská obrazovka hry */
.home { display: grid; grid-template-columns: 1.25fr .9fr; gap: 22px; align-items: start; }
.home .hero { padding: 28px; overflow: hidden; position: relative; }
.home .hero .art { margin: 18px -6px 4px; }
.home .hero .art svg { width: 100%; height: auto; display: block; }
.home .join { padding: 22px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--mut); font-size: .85rem; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.rules { margin: 0; padding-left: 1.15em; color: var(--ink2); line-height: 1.6; }
.rules li { margin: 4px 0; }
.rules b { color: var(--ink); }
@media (max-width: 860px) { .home { grid-template-columns: 1fr; } }

/* lobby */
.lobby { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
@media (max-width: 860px) { .lobby { grid-template-columns: 1fr; } }
.panel { padding: 20px; }
.panel h3 { margin: 0 0 12px; font-size: 1.05rem; }
.bigcode { font: 900 clamp(2.4rem, 9vw, 3.6rem) var(--mono); letter-spacing: .28em; text-align: center; background: linear-gradient(100deg, var(--acc), var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; cursor: pointer; user-select: all; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plist li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); animation: pop .35s cubic-bezier(.2,1.4,.4,1); }
.plist .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px var(--c); flex: none; }
.plist .nm { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist .tag { font-size: .72rem; color: var(--mut); border: 1px solid var(--line); border-radius: 8px; padding: 2px 7px; }
.plist .tag.tteam { color: var(--ink); font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--c) 28%, transparent); border-color: var(--c); }
.plist .off { opacity: .45; }
.plist li.empty { justify-content: center; flex-wrap: wrap; color: var(--mut); border-style: dashed; animation: none; }
.optrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.optrow:last-child { border-bottom: 0; }
.optrow .l { color: var(--ink2); font-size: .94rem; }
.optrow .h { display: block; color: var(--mut); font-size: .78rem; margin-top: 2px; }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(6px); } }

/* toasty, modály, pomocné */
#toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
#toast div { padding: 11px 16px; border-radius: 14px; background: var(--glass2); border: 1px solid var(--line2); box-shadow: var(--sh); font-weight: 600; animation: toast 3.6s ease forwards; max-width: min(92vw, 520px); text-align: center; }
#toast div.err { border-color: rgba(255,84,112,.6); }
@keyframes toast { 0% { opacity: 0; transform: translateY(10px); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(3,4,10,.62); backdrop-filter: blur(6px); animation: fade .2s; }
.modal > .glass { width: min(520px, 100%); max-height: 88vh; overflow: auto; padding: 22px; animation: pop .3s cubic-bezier(.2,1.3,.4,1); }
@keyframes fade { from { opacity: 0; } }
.hidden { display: none !important; }
.endbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40; display: flex; gap: 10px; padding: 10px; border-radius: 18px; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line2); border-top-color: var(--acc); animation: rot 1s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes rot { to { transform: rotate(360deg); } }
.conn { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 70; padding: 8px 14px; border-radius: 12px; background: rgba(255,84,112,.16); border: 1px solid rgba(255,84,112,.5); font-weight: 600; font-size: .9rem; }
.foot { margin-top: 26px; text-align: center; color: var(--mut); font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }

/* hlavné menu (cfg.menu): celoobrazovková 3D scéna, horná lišta so záložkami, dlaždice, lišta s klávesmi */
body:has(.mm3) > header.top, body:has(.mm3) #bg { display: none; }
.mm3 { --logo: 'Alfa Slab One', Georgia, serif; position: fixed; inset: 0; z-index: 5; overflow: hidden; background: radial-gradient(ellipse 110% 80% at 70% 10%, #4fa6ff 0%, #2f5be0 38%, #3a2399 72%, #1d0f55 100%); color: #fff; }
.mmscene { position: absolute; inset: 0; }
.mmscene canvas { display: block; width: 100% !important; height: 100% !important; }
.mmscene .art, .mmscene .stage { height: 100%; aspect-ratio: auto; margin: 0; border-radius: 0; background: transparent; }
.mmscene .stage::before { display: none; }
.mmshade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(14,10,52,.92) 0%, rgba(20,14,70,.7) 30%, rgba(20,14,70,0) 62%), linear-gradient(180deg, rgba(10,8,40,.55) 0%, transparent 18%, transparent 80%, rgba(10,8,40,.7) 100%); transition: background .4s; }
.mm3.is-sub .mmshade { background: linear-gradient(90deg, rgba(20,14,70,0) 30%, rgba(14,10,52,.75) 60%, rgba(14,10,52,.92) 100%), linear-gradient(180deg, rgba(10,8,40,.55) 0%, transparent 18%, transparent 80%, rgba(10,8,40,.7) 100%); }
.mmslot { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr auto; }

.mmtop { display: flex; align-items: center; gap: 18px; padding: 14px clamp(16px, 3vw, 40px); }
.mmlogo { display: flex; align-items: center; gap: 10px; font: 400 1.15rem/1 var(--logo); color: #ffd25a; text-shadow: 0 2px 0 #7a3b00; white-space: nowrap; }
.mmlogo img { filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.mmtabs { display: flex; gap: 4px; margin-left: 12px; }
.mmtab { position: relative; padding: 10px 14px; border: 0; background: none; color: rgba(255,255,255,.7); font: 800 .82rem/1 inherit; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .15s; }
.mmtab::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; border-radius: 3px; background: #ffd25a; transform: scaleX(0); transition: transform .2s; }
.mmtab:hover, .mmtab:focus-visible { color: #fff; outline: none; }
.mmtab.on { color: #fff; }
.mmtab.on::after, .mmtab:focus-visible::after { transform: scaleX(1); }
.mmtop .sp { flex: 1; }
.mmlive { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.28); font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.9); }
.mmlive::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.7); animation: mmlive 1.8s infinite; }
@keyframes mmlive { 70% { box-shadow: 0 0 0 8px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.mmcard { display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.28); color: #fff; font: inherit; cursor: pointer; text-align: left; transition: background .15s, border-color .15s; }
.mmcard:hover, .mmcard:focus-visible { background: rgba(0,0,0,.4); border-color: rgba(255,255,255,.4); outline: none; }
.mmcard .av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #ffd25a, #ff7a45); color: #3a1600; font: 400 1.05rem var(--logo); }
.mmcard .nm { display: flex; flex-direction: column; line-height: 1.15; }
.mmcard b { font-size: .92rem; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmcard small { font-size: .72rem; color: rgba(255,255,255,.65); }
.mmicon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.28); color: #fff; font-size: 1rem; cursor: pointer; text-decoration: none; transition: background .15s; }
.mmicon:hover { background: rgba(0,0,0,.45); }

.mmbody { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 0 clamp(16px, 3vw, 40px); min-height: 0; overflow: auto; }
.mmbody.sub { align-items: flex-end; }
.mmhead { animation: mmup .5s cubic-bezier(.2,.8,.2,1) both; }
.mmtitle { margin: 0; font: 400 clamp(2.2rem, 4.2vw, 3.6rem)/1 var(--logo); background: linear-gradient(180deg, #fff6d8 0%, #ffd25a 50%, #ff9f1c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 #7a3b00) drop-shadow(0 12px 24px rgba(0,0,0,.5)); }
.mmtag { margin: 10px 0 0; max-width: 44ch; color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.5; }
.mmkick { font: 800 .74rem/1 inherit; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 10px; }
.mmplay { width: min(640px, 100%); }
.mmtiles { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 132px; gap: 12px; }
.mmtile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 16px; border: 0; border-radius: 10px; overflow: hidden; color: #fff; font: inherit; text-align: left; cursor: pointer; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 14px 30px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.3); outline: 3px solid transparent; outline-offset: 3px; transition: transform .2s cubic-bezier(.2,.8,.2,1), outline-color .15s, box-shadow .2s; animation: mmup .45s cubic-bezier(.2,.8,.2,1) both; }
.mmtile:nth-child(2) { animation-delay: .06s; } .mmtile:nth-child(3) { animation-delay: .12s; } .mmtile:nth-child(4) { animation-delay: .18s; }
.mmtile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s; }
.mmtile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.35), transparent 60%); pointer-events: none; }
.mmtile:hover, .mmtile:focus-visible { transform: translateY(-4px) scale(1.02); outline-color: #fff; box-shadow: 0 22px 40px -16px rgba(0,0,0,.8), 0 0 30px -6px var(--c1); }
.mmtile:hover::before, .mmtile:focus-visible::before { transform: translateX(120%); }
.mmtile:active { transform: scale(.98); }
.mmtile .big { position: absolute; right: -6%; top: -14%; font-size: 6.5rem; line-height: 1; opacity: .9; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); transform: rotate(-10deg); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.mmtile:hover .big, .mmtile:focus-visible .big { transform: rotate(-4deg) scale(1.08); }
.mmtile .tag { position: absolute; left: 14px; top: 12px; z-index: 1; padding: 4px 8px; border-radius: 4px; background: rgba(0,0,0,.32); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mmtile .tx { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; }
.mmtile b { font-size: 1.15rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
.mmtile small { font-size: .8rem; line-height: 1.35; color: rgba(255,255,255,.88); }
.mmtile.big { grid-column: span 3; grid-row: span 2; padding: 22px 24px; }
.mmtile.big .big { font-size: 13rem; right: 2%; top: -8%; }
.mmtile.big b { font-size: 2.1rem; }
.mmtile.big small { font-size: .98rem; max-width: 34ch; }
.mmtile.big .tag::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #3ddc84; vertical-align: 1px; }

.mmdrawer { width: min(520px, 100%); max-height: 100%; overflow: auto; padding: 22px 24px; border-radius: 14px; background: rgba(16,11,60,.82); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); animation: mmside .35s cubic-bezier(.2,.8,.2,1) both; }
.mmdrawer h3 { margin: 0; font-size: 1.5rem; font-weight: 900; }
.mmdhead { display: flex; align-items: center; gap: 10px; }
.mmesc { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.mmesc:hover { background: rgba(255,255,255,.14); }
.mmdrawer .optrow { border-color: rgba(255,255,255,.1); }
@keyframes mmup { from { opacity: 0; transform: translateY(16px); } }
@keyframes mmside { from { opacity: 0; transform: translateX(30px); } }

.mmbar { display: flex; align-items: center; gap: 18px; padding: 12px clamp(16px, 3vw, 40px); font-size: .78rem; color: rgba(255,255,255,.7); }
.mmbar .sp { flex: 1; }
.mmbar a { color: #fff; }
.mmbar kbd { display: inline-block; min-width: 22px; margin-right: 4px; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.14); border-bottom: 2px solid rgba(0,0,0,.35); font: 700 .72rem var(--mono, monospace); color: #fff; text-align: center; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.chip { min-width: 40px; padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); cursor: pointer; font: inherit; font-weight: 700; transition: background .15s, color .15s; }
.chip.on { background: #ffd25a; border-color: transparent; color: #2a1500; }
.optrow .inp { max-width: 200px; }
.qlobby { max-width: 520px; margin: 6vh auto 0; padding: 24px; }
.qcount { font: 400 3.4rem/1 'Alfa Slab One', Georgia, serif; text-align: center; color: var(--bga, var(--acc)); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
	.mmtabs, .mmbar span:not(.sp):not(:last-child), .mmlive { display: none; }
	.mmshade { background: rgba(14,10,52,.6); }
	.mmtiles { grid-template-columns: 1fr 1fr; }
	.mmtile.big { grid-column: span 2; }
	.mmbody.sub { align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .mmtile, .mmhead, .mmdrawer { animation: none; } }
.mm3:not(.is-sub) .mmscene { left: 42%; }
.mm3.is-sub .mmscene { right: 30%; }
.mmdrawer .btn:not(.alt) { background: linear-gradient(135deg, #ffe08a, #ffb02e); color: #2a1500; box-shadow: 0 12px 30px -12px rgba(255,176,46,.8); }
.mmdrawer .chip { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); padding: 7px 12px; font-size: .9rem; }
.mmdrawer .chip.on { background: #ffd25a; border-color: transparent; color: #2a1500; }
@media (max-width: 900px) { .mm3 .mmscene { left: 0; right: 0; } }
/* písma menu: tri návrhy (?f=a|b|c) */
.mm3 { --hd: 'Lilita One', var(--logo); --hw: 400; --tx: 'Nunito', sans-serif; font-family: var(--tx); }
.mm3.fb { --hd: 'Barlow Condensed', sans-serif; --hw: 800; --tx: 'Barlow', sans-serif; }
.mm3.fc { --hd: 'Rubik', sans-serif; --hw: 800; --tx: 'Rubik', sans-serif; }
.mm3 button, .mm3 input, .mm3 .sel, .ddmenu { font-family: var(--tx, inherit); }
.mm3 .mmtitle, .mm3 .mmlogo { font-family: var(--hd); font-weight: var(--hw); letter-spacing: 0; }
.mm3.fb .mmtitle, .mm3.fb .mmlogo { text-transform: uppercase; letter-spacing: .01em; }
.mm3 .mmtile b, .mm3 .mmdrawer h3, .mm3 .mmtab, .mm3 .mmcard b, .mm3 .mmkick, .mm3 .mmtile .tag { font-family: var(--hd); font-weight: var(--hw); }
.mm3.fa .mmtile b, .mm3.fa .mmtab { letter-spacing: .03em; }
.mm3.fb .mmtile b { font-size: 1.35rem; letter-spacing: .02em; }
.mm3.fb .mmtile.big b { font-size: 2.5rem; }
.mm3 .mmtile small, .mm3 .mmtag { font-weight: 600; }
.mm3.fb .mmtab { font-size: .95rem; letter-spacing: .1em; }
.mm3 .mmbar kbd { font-family: var(--tx); }
.mm3.fd { --hd: 'Fredoka', sans-serif; --hw: 700; --tx: 'Nunito', sans-serif; }
.mm3.fe { --hd: 'Exo 2', sans-serif; --hw: 900; --tx: 'Exo 2', sans-serif; }
.mm3.fe .mmtile b, .mm3.fe .mmtitle { font-style: italic; }
.mm3.ff { --hd: 'Russo One', sans-serif; --hw: 400; --tx: 'Rubik', sans-serif; }
/* doladenie: ikony neprekrývajú text, veľká dlaždica má výzvu Hrať */
.mmplay { margin-top: 8px; }
.mmtile .tx { max-width: 72%; }
.mmtile.big .tx { max-width: 60%; }
.mmtile:not(.big) .big { font-size: 4.6rem; right: -4%; top: -10%; opacity: .85; }
.mmtile .cta { position: absolute; right: 22px; bottom: 22px; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 12px 26px; border-radius: 999px; background: #fff; color: #c2185b; font: var(--hw, 800) 1.15rem/1 var(--hd, inherit); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 10px 24px -8px rgba(0,0,0,.45); transition: transform .2s, box-shadow .2s; }
.mmtile .cta::after { content: '▶'; font-size: .8em; }
.mmtile.big:hover .cta, .mmtile.big:focus-visible .cta { transform: scale(1.06); box-shadow: 0 14px 30px -8px rgba(0,0,0,.55); }
.mmtile.big .tag { font-size: .72rem; }
.mmlogo .beta { margin-left: 8px; padding: 3px 6px; border-radius: 4px; background: #ff3d6e; color: #fff; font: 800 .62rem/1 var(--tx, sans-serif); letter-spacing: .12em; text-shadow: none; vertical-align: 3px; }
/* SVG ikony v menu */
.mm3 .ico svg { display: block; width: 20px; height: 20px; }
.mmtile .big { display: block; color: #fff; opacity: .26; filter: none; }
.mmtile .big svg { display: block; width: 100%; height: 100%; stroke-width: 1.6; }
.mmtile:not(.big) .big { width: 120px; height: 120px; font-size: 0; right: -18px; top: -14px; }
.mmtile.big .big { width: 280px; height: 280px; font-size: 0; right: -20px; top: -40px; opacity: .22; }
.mmtile:hover .big, .mmtile:focus-visible .big { opacity: .4; }
.mmtile:not(.big) .tx { max-width: 100%; }
.mmtile:not(.big) small { max-width: 85%; }
.mmtile:not(.big) b { white-space: nowrap; }
.mmtile:not(.big) .big { opacity: .22; width: 104px; height: 104px; right: -14px; top: -10px; }
.mmtile:not(.big):hover .big, .mmtile:not(.big):focus-visible .big { opacity: .34; }
.mmcard .xpbar { display: block; height: 3px; margin-top: 3px; border-radius: 3px; background: linear-gradient(90deg, #ffd25a var(--p), rgba(255,255,255,.18) var(--p)); }

/* vzhľad menu Monte Carlo (vybraný 2026-11-03): smaragd, čierna a zlato, ako salónik kasína */
.mm3.d1 { background: radial-gradient(ellipse 90% 70% at 72% 30%, #1f6b4f 0%, #0e3a2c 45%, #061a14 80%, #030c09 100%); }
.d1 .mmshade { background: linear-gradient(90deg, rgba(3,12,9,.94) 0%, rgba(4,18,13,.72) 32%, rgba(4,18,13,0) 62%), radial-gradient(ellipse 60% 50% at 70% 45%, transparent 40%, rgba(0,0,0,.55) 100%); }
.d1 .mmlogo, .d1 .mmtab.on { color: #e9c46a; }
.d1 .mmlogo { text-shadow: none; letter-spacing: .04em; }
.d1 .mmtab::after { background: #e9c46a; height: 2px; }
.d1 .mmtitle { background: linear-gradient(180deg, #fff3cf 0%, #e9c46a 45%, #a8771e 100%); -webkit-background-clip: text; background-clip: text; letter-spacing: .01em; }
.d1 .mmtile { --c1: rgba(10,34,26,.82) !important; --c2: rgba(5,18,14,.9) !important; border: 1px solid rgba(233,196,106,.35); border-radius: 6px; backdrop-filter: blur(8px); box-shadow: 0 20px 40px -20px rgba(0,0,0,.9); }
.d1 .mmtile .big { color: #e9c46a; opacity: .22; }
.d1 .mmtile .tag { background: transparent; border: 1px solid rgba(233,196,106,.5); color: #e9c46a; }
.d1 .mmtile b { color: #f7e7b5; text-shadow: none; }
.d1 .mmtile.big { --c1: #12523c !important; --c2: #072a1f !important; border-color: #e9c46a; }
.d1 .mmtile.big .big { opacity: .35; }
.d1 .mmtile .cta { background: linear-gradient(180deg, #f6d985, #d4a53c); color: #1d1300; border-radius: 4px; }
.d1 .mmtile:hover, .d1 .mmtile:focus-visible { outline-color: #e9c46a; box-shadow: 0 22px 40px -16px rgba(0,0,0,.9), 0 0 34px -6px rgba(233,196,106,.45); }
.d1 .mmdrawer { background: rgba(5,22,16,.88); border-color: rgba(233,196,106,.3); border-radius: 6px; }
.d1 .mmcard .av { background: linear-gradient(135deg, #f6d985, #b8862b); }