/* ===================================================================== MORSKA VILA – PROTOTIP PORTALA (app.css) Nadograđuje morskavila-tokeni.css. Pravila kontrasta: tekst = Dubina na bijeloj / Svijetlom tirkizu; bijeli tekst SAMO na Tirkiz tamni (#0A707A) ili Dubini (#123B4A); primarni gumb = Dubina na Suncu. ===================================================================== */ @font-face { font-family: "Nunito"; src: url("../assets/fonts/Nunito-var.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; } :root { --mv-sirina: 1280px; --mv-zaglavlje-v: 90px; /* v3.1 (25. 10. 2026.): desktop > 1000 px – logo 64 px + 13 px gore/dolje (zaglavlje 92 px s obrubom); ≤ 1000 px ostaje 64px */ --mv-donja-nav-v: 72px; --mv-sigurno-dolje: env(safe-area-inset-bottom, 0px); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--mv-zaglavlje-v) + 16px); -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden; } main { flex: 1; } img, svg { max-width: 100%; display: block; } img { height: auto; } [hidden] { display: none !important; } h1, h2, h3, p { margin: 0; } h1, h2, h3 { color: var(--mv-dubina); } button { font: inherit; color: inherit; } .mv-omot { width: 100%; max-width: var(--mv-sirina); margin-inline: auto; padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); } .mv-preskoci { position: absolute; left: 12px; top: -100px; z-index: 100; background: var(--mv-sunce); color: var(--mv-dubina); padding: 12px 20px; border-radius: 12px; font-weight: 800; } .mv-preskoci:focus { top: 12px; } .ikona { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .ikona--puna { fill: currentColor; stroke: none; } /* ---------- Zaglavlje ---------- */ .zaglavlje { position: sticky; top: 0; z-index: 40; background: var(--mv-bijela); border-bottom: 2px solid var(--mv-svijetli-tirkiz); padding-top: env(safe-area-inset-top); } .zaglavlje__red { display: flex; align-items: center; gap: 16px; min-height: var(--mv-zaglavlje-v); } .zaglavlje__logo { display: flex; align-items: center; min-height: 48px; text-decoration: none; flex: none; } .zaglavlje__logo img { height: 64px; width: auto; } /* v3.1: desktop 64 px (prije 50 px), širina ≈ 205 px; mobitel/tablet ≤ 1000 px: 40 px (niže) */ .zaglavlje__nav { display: flex; gap: 4px; margin-left: 12px; } .zaglavlje__nav a { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 999px; color: var(--mv-dubina); text-decoration: none; font-weight: 800; } .zaglavlje__nav a:hover { background: var(--mv-svijetli-tirkiz); } .zaglavlje__nav a[aria-current="page"] { background: var(--mv-svijetli-tirkiz); box-shadow: inset 0 -3px 0 var(--mv-tirkiz-tamni); } .zaglavlje__nav .ikona { color: var(--mv-tirkiz-tamni); } .zaglavlje__desno { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; } /* Mjesto za žetone (faza 2) – namjerno skriveno, ali zauzima svoje mjesto u kodu */ .zaglavlje__zetoni[hidden] { display: none !important; } .gumb-aplus { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 56px; min-height: 48px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--mv-dubina); background: var(--mv-bijela); color: var(--mv-dubina); font-weight: 900; font-size: 18px; cursor: pointer; } .gumb-aplus[aria-pressed="true"] { background: var(--mv-dubina); color: var(--mv-bijela); } .gumb-aplus .gumb-aplus__tekst { font-size: 16px; font-weight: 800; white-space: nowrap; } :root[data-vel-slova="da"] .zaglavlje__nav .ikona { display: none; } @media (max-width: 1240px) { :root[data-vel-slova="da"] .gumb-aplus__tekst { display: none; } } .zaglavlje__korisnik { position: relative; min-width: 0; } .zaglavlje__igrac { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; max-width: 100%; padding: 4px 14px 4px 4px; border: 0; border-radius: 999px; background: var(--mv-svijetli-tirkiz); color: var(--mv-dubina); font-weight: 800; cursor: pointer; } /* Nadimak gore desno (30. 10. 2026.): vidljiv na svim širinama, uvijek u jednom retku. Dugi nadimak (API dopušta do 32 znaka) reže se trotočkom, a puni nadimak je u atributu title (app.js). Širine: desktop 220 px ≈ 20–24 znaka. */ .zaglavlje__nadimak { display: block; min-width: 0; max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .zaglavlje__igrac[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--mv-tirkiz-tamni); } .zaglavlje__izbornik { position: absolute; z-index: 50; top: calc(100% + 8px); right: 0; min-width: 180px; padding: 8px; border: 2px solid var(--mv-svijetli-tirkiz); border-radius: 14px; background: var(--mv-bijela); box-shadow: var(--mv-sjena); } .zaglavlje__izbornik a, .zaglavlje__izbornik button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--mv-dubina); text-decoration: none; font-weight: 800; cursor: pointer; white-space: nowrap; } .zaglavlje__izbornik a:hover, .zaglavlje__izbornik button:hover { background: var(--mv-svijetli-tirkiz); } .zaglavlje__admin { margin-block: 4px; padding-block: 6px 4px; border-block: 1px solid var(--mv-svijetli-tirkiz); } .zaglavlje__admin-naslov { display: block; padding: 0 12px 2px; color: var(--mv-tirkiz-tamni); font-size: calc(13px * var(--mv-skala)); font-weight: 900; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; } .avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--mv-tirkiz-tamni); color: var(--mv-bijela); font-weight: 900; flex: none; } .avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } .avatar--slika { overflow: hidden; background: var(--mv-bijela); } /* ---------- Donja navigacija (mobitel) ---------- */ .donja-nav { display: none; } @media (max-width: 1000px) { :root { --mv-zaglavlje-v: 64px; } .zaglavlje__nav, .zaglavlje__samo-desktop { display: none !important; } .zaglavlje__logo img { height: 40px; } .gumb-aplus .gumb-aplus__tekst { display: none; } .donja-nav { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--mv-dubina); padding-bottom: var(--mv-sigurno-dolje); padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); } .donja-nav ul { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: 640px; } .donja-nav a, .donja-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: var(--mv-donja-nav-v); background: none; border: 0; color: var(--mv-bijela); text-decoration: none; font-size: 15px; font-weight: 800; line-height: 1.1; cursor: pointer; padding: 6px 2px; } .donja-nav [aria-current="page"] { color: var(--mv-dubina); background: var(--mv-sunce); border-radius: 16px 16px 0 0; } .donja-nav :focus-visible { outline-color: var(--mv-sunce); outline-offset: -4px; } body { padding-bottom: calc(var(--mv-donja-nav-v) + var(--mv-sigurno-dolje)); } } @media (max-width: 1000px) and (max-height: 500px) { .zaglavlje { position: static; } :root { --mv-donja-nav-v: 60px; } .donja-nav a, .donja-nav button { flex-direction: row; gap: 8px; } } @media (max-width: 420px) { .zaglavlje__red { gap: 8px; } .zaglavlje__desno { gap: 8px; } .zaglavlje__desno .mv-gumb { padding: 0 1em; } } /* Nadimak u zaglavlju na tabletu/mobitelu (logo 40 px visok ≈ 128 px širok). Uz max-width nadimak se i skuplja (min-width: 0), pa zaglavlje nikad ne prelazi u dva retka ni preko ruba. Novi nadimak ima najviše 16 znakova; ≈ 16 običnih znakova stane na 390 px, ≈ 13 na 360 px. Dulji (stari, do 32) ili široki (WWW…) nadimci dobiju trotočku. */ @media (max-width: 1000px) { .zaglavlje__nadimak { max-width: 180px; } } @media (max-width: 420px) { .zaglavlje__igrac { gap: 6px; padding-right: 10px; } .zaglavlje__nadimak { max-width: 156px; } } @media (max-width: 374px) { .zaglavlje__nadimak { max-width: 124px; } } @media (max-width: 340px) { .zaglavlje__nadimak { max-width: 96px; } } /* ---------- Sekcije ---------- */ .sekcija { padding-block: 48px; } .sekcija--tirkiz { background: var(--mv-svijetli-tirkiz); } .sekcija__glava { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .sekcija__glava p { margin-top: 6px; } .poveznica-strelica { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; font-weight: 800; } @media (max-width: 600px) { .sekcija { padding-block: 32px; } } /* ---------- Hero ---------- */ .hero { background: var(--mv-svijetli-tirkiz); position: relative; overflow: hidden; } .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C240 2 480 2 720 22 S1200 42 1440 22 V40 H0Z' fill='%23fff'/%3E%3C/svg%3E") center/100% 100% no-repeat; } .hero__red { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; padding-block: 48px 72px; } .hero__slogan { display: inline-block; font-size: calc(22px * var(--mv-skala)); font-weight: 700; line-height: 1.3; color: var(--mv-dubina); margin: 0 0 14px; padding-bottom: 4px; border-bottom: 4px solid var(--mv-sunce); } /* v1.2: slogan, Dubina na Svijetlom tirkizu 10,3 : 1 */ .hero h1 { margin-bottom: 16px; } .hero__uvod { font-size: calc(22px * var(--mv-skala)); font-weight: 600; max-width: 34ch; margin-bottom: 28px; } .hero__gumbi { display: flex; gap: 12px; flex-wrap: wrap; } .hero__slika { justify-self: center; width: min(100%, 520px); } .hero__brojka { margin-top: 20px; display: inline-flex; align-items: center; gap: 10px; } .tocka-uzivo { width: 12px; height: 12px; border-radius: 50%; background: var(--mv-tirkiz-tamni); box-shadow: 0 0 0 4px rgba(10,112,122,.2); flex: none; } @media (max-width: 760px) { .hero__red { grid-template-columns: 1fr; padding-block: 28px 56px; gap: 16px; } .hero__slika { width: min(70%, 280px); } .hero__uvod { font-size: calc(19px * var(--mv-skala)); margin-bottom: 20px; } .hero__gumbi .mv-gumb { flex: 1 1 auto; } } @media (max-width: 1000px) and (max-height: 500px) { .hero__red { grid-template-columns: 1.3fr .7fr; padding-block: 20px 48px; } .hero__slika { order: 0; } } /* ---------- Mreža igara ---------- */ .mreza-igara { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); list-style: none; margin: 0; padding: 0; } .mreza-igara--red { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1000px) { .mreza-igara--red { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .mreza-igara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } } @media (max-width: 1000px) and (max-height: 500px) { .mreza-igara, .mreza-igara--red { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .plocica { position: relative; display: flex; flex-direction: column; height: 100%; color: var(--mv-dubina); text-decoration: none; font-weight: 500; border-radius: var(--mv-radijus); background: var(--mv-bijela); box-shadow: var(--mv-sjena); border: 2px solid var(--mv-svijetli-tirkiz); transition: transform .15s, box-shadow .15s; } .plocica:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(18,59,74,.16); border-color: var(--mv-tirkiz); } .plocica__slika { aspect-ratio: 3 / 2; border-radius: 14px 14px 0 0; overflow: hidden; background: var(--mv-svijetli-tirkiz); } .plocica__slika img { width: 100%; height: 100%; object-fit: cover; } .plocica__tijelo { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .plocica__naziv { font-size: calc(20px * var(--mv-skala)); font-weight: 800; line-height: 1.2; } .plocica__meta { font-size: var(--mv-fs-meta); font-weight: 600; line-height: 1.35; display: flex; align-items: center; gap: 8px; } .plocica--uskoro .plocica__slika img { filter: saturate(.75); } .oznaka { display: inline-flex; align-items: center; gap: 4px; font-size: var(--mv-fs-meta); font-weight: 800; line-height: 1.2; padding: .25em .7em; border-radius: 999px; background: var(--mv-sunce); color: var(--mv-dubina); box-shadow: 0 1px 4px rgba(18,59,74,.25); } .oznaka--uskoro { background: var(--mv-dubina); color: var(--mv-bijela); } .oznaka--primjer { background: var(--mv-bijela); color: var(--mv-dubina); border: 2px dashed var(--mv-dubina); box-shadow: none; } @media (max-width: 600px) { .plocica__tijelo { padding: 10px 10px 12px; } .plocica__naziv { font-size: calc(18px * var(--mv-skala)); } .oznaka { font-size: calc(15px * var(--mv-skala)); } } /* ---------- Čipovi kategorija + pretraga ---------- */ .alati { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; } .cipovi { display: flex; gap: 10px; overflow-x: auto; padding: 4px; margin: -4px; scrollbar-width: thin; flex: 1 1 auto; } .cip { flex: none; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--mv-dubina); background: var(--mv-bijela); color: var(--mv-dubina); font-weight: 800; font-size: var(--mv-fs-tekst); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .cip:hover { background: var(--mv-svijetli-tirkiz); } .cip[aria-pressed="true"] { background: var(--mv-dubina); color: var(--mv-bijela); } .cip[aria-pressed="true"]::before { content: "✓"; } .pretraga { position: relative; flex: 0 1 360px; min-width: 240px; } .pretraga .ikona { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--mv-tirkiz-tamni); pointer-events: none; } .polje { width: 100%; min-height: 52px; padding: 0 16px; border: 2px solid var(--mv-dubina); border-radius: 14px; font: inherit; font-weight: 600; color: var(--mv-dubina); background: var(--mv-bijela); } .pretraga .polje { padding-left: 50px; border-radius: 999px; } .polje::placeholder { color: #4D6A75; opacity: 1; } .rezultat-info { margin-bottom: 16px; } .prazno { padding: 32px; text-align: center; background: var(--mv-svijetli-tirkiz); border-radius: var(--mv-radijus); } @media (max-width: 600px) { .pretraga { flex: 1 1 100%; } .cipovi { flex-basis: 100%; } } .raspored { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; width: 100%; } .raspored li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(18,59,74,.45); font-weight: 700; flex-wrap: wrap; } .raspored li strong { font-weight: 900; } .mjesta { height: 10px; border-radius: 999px; background: var(--mv-svijetli-tirkiz); overflow: hidden; } .mjesta span { display: block; height: 100%; background: var(--mv-tirkiz-tamni); } /* ---------- Podnožje ---------- */ .podnozje { background: var(--mv-dubina); color: var(--mv-bijela); padding-block: 40px 32px; margin-top: 48px; } .podnozje a { color: var(--mv-bijela); } .podnozje :focus-visible { outline-color: var(--mv-sunce); } .podnozje__red { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; } .podnozje__logo img { height: 52px; width: auto; margin-bottom: 12px; } .podnozje__logo img.podnozje__logo-slogan { height: auto; width: 320px; max-width: 100%; margin-bottom: 16px; } /* logo sa sloganom: min. 320 px (Knjiga standarda v1.2) */ .podnozje ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .podnozje li a { display: inline-flex; min-height: 44px; align-items: center; } .podnozje h2 { color: var(--mv-bijela); font-size: calc(20px * var(--mv-skala)); margin-bottom: 8px; } .podnozje__dno { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.3); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } @media (max-width: 760px) { .podnozje__red { grid-template-columns: 1fr 1fr; } .podnozje__red > :first-child { grid-column: 1 / -1; } } /* ---------- Listić igre (bottom sheet / modal) ---------- */ dialog { color: var(--mv-dubina); } dialog::backdrop { background: rgba(18,59,74,.55); } .list { border: 0; padding: 0; border-radius: 24px; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-shadow: 0 20px 60px rgba(18,59,74,.35); } .list__unutra { padding: 24px; display: flex; flex-direction: column; gap: 16px; overflow: auto; max-height: calc(100dvh - 32px); } .list__glava { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .list__slika { border-radius: 16px; overflow: hidden; aspect-ratio: 3/2; } .list__slika img { width: 100%; height: 100%; object-fit: cover; } .list__cinjenice { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; } .list__cinjenice li { display: inline-flex; align-items: center; gap: 6px; background: var(--mv-svijetli-tirkiz); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: var(--mv-fs-meta); } .list__cinjenice .ikona { width: 20px; height: 20px; color: var(--mv-tirkiz-tamni); } .list__gumbi { display: flex; gap: 12px; flex-wrap: wrap; } .list__gumbi .mv-gumb { flex: 1 1 200px; } .dobrodosli .list__glava { align-items: center; } .dobrodosli__tekst { margin: 0; font-size: calc(21px * var(--mv-skala)); font-weight: 600; } .gumb-zatvori { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 48px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--mv-dubina); background: var(--mv-bijela); color: var(--mv-dubina); font-weight: 800; cursor: pointer; flex: none; } @media (max-width: 600px) { .list { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 24px 24px 0 0; max-height: 92dvh; } .list__unutra { padding: 20px 20px calc(20px + var(--mv-sigurno-dolje)); max-height: 92dvh; } .list__unutra::before { content: ""; width: 56px; height: 6px; border-radius: 3px; background: #9FB3BA; align-self: center; margin-top: -8px; } } @media (max-height: 500px) and (orientation: landscape) { .list { width: min(760px, calc(100vw - 32px)); } .list__unutra { display: grid; grid-template-columns: 220px 1fr; align-items: start; } .list__unutra > :not(.list__slika) { grid-column: 2; } .list__slika { grid-row: 1 / span 5; grid-column: 1; } } /* ---------- Obavijest (toast) ---------- */ .obavijest { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + var(--mv-sigurno-dolje)); z-index: 90; background: var(--mv-dubina); color: var(--mv-bijela); padding: 14px 22px; border-radius: 16px; font-weight: 700; box-shadow: 0 10px 30px rgba(18,59,74,.3); max-width: min(560px, calc(100vw - 32px)); } .obavijest[hidden] { display: none; } @media (max-width: 1000px) { .obavijest { bottom: calc(var(--mv-donja-nav-v) + 16px + var(--mv-sigurno-dolje)); } } /* ---------- Stranica igre ---------- */ .mrvice { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; font-size: var(--mv-fs-meta); font-weight: 600; } .mrvice li + li::before { content: "›"; margin-right: 8px; font-weight: 800; } .admin-navigacija { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; } .admin-navigacija a { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 14px; border: 2px solid var(--mv-tirkiz); border-radius: 999px; background: var(--mv-bijela); color: var(--mv-tirkiz-tamni); font-weight: 900; text-decoration: none; } .admin-navigacija a:hover, .admin-navigacija a:focus-visible { background: var(--mv-svijetli-tirkiz); } .admin-navigacija a[aria-current="page"] { border-color: var(--mv-dubina); background: var(--mv-dubina); color: var(--mv-bijela); } .igra-glava { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .igra-glava__slika { border-radius: 24px; overflow: hidden; box-shadow: var(--mv-sjena); aspect-ratio: 3/2; } .igra-glava__slika img { width: 100%; height: 100%; object-fit: cover; } .igra-glava__tekst { display: flex; flex-direction: column; gap: 18px; } .igra-glava__gumbi { display: flex; flex-wrap: wrap; gap: 12px; } /* Igra u pripremi (samo admin, 3. 11. 2026.): „Igra još nije spremna” ispod onemogućenog gumba Igraj. */ .igra-nije-spremna { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--mv-svijetli-tirkiz); color: var(--mv-dubina); font-weight: 700; font-size: var(--mv-fs-tekst); } .mv-gumb--velik { min-height: 64px; font-size: calc(22px * var(--mv-skala)); padding: 0 2em; } .napomena { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--mv-svijetli-tirkiz); border-radius: 14px; font-weight: 600; } .napomena .ikona { color: var(--mv-tirkiz-tamni); margin-top: 2px; } .pravila { display: grid; gap: 12px; } .pravila details { border: 2px solid var(--mv-svijetli-tirkiz); border-radius: 16px; background: var(--mv-bijela); } .pravila summary { min-height: 56px; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 800; font-size: calc(20px * var(--mv-skala)); cursor: pointer; list-style: none; } .pravila summary::-webkit-details-marker { display: none; } .pravila summary::after { content: "+"; font-size: 28px; line-height: 1; color: var(--mv-tirkiz-tamni); } .pravila details[open] summary::after { content: "−"; } .pravila__odjeljak { border: 2px solid var(--mv-svijetli-tirkiz); border-radius: 16px; background: var(--mv-bijela); } .pravila__naslov { margin: 0; padding: 16px 20px 8px; font-size: calc(20px * var(--mv-skala)); } .pravila .pravila__tijelo { padding: 0 20px 20px; display: grid; gap: 10px; } .pravila ul, .pravila ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; } .dvostupac { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; } @media (max-width: 860px) { .igra-glava, .dvostupac { grid-template-columns: 1fr; gap: 24px; } } /* ---------- Ljestvica ---------- */ .kartice-tabova { display: flex; gap: 8px; overflow-x: auto; padding: 4px; margin: -4px -4px 16px; } .tab { flex: none; min-height: 52px; padding: 0 20px; border: 2px solid var(--mv-dubina); border-radius: 14px; background: var(--mv-bijela); color: var(--mv-dubina); font-weight: 800; font-size: var(--mv-fs-tekst); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; } .tab img { width: 40px; height: 27px; border-radius: 6px; object-fit: cover; } .tab[aria-selected="true"] { background: var(--mv-dubina); color: var(--mv-bijela); } .segment { display: inline-flex; border: 2px solid var(--mv-dubina); border-radius: 999px; padding: 3px; gap: 3px; background: var(--mv-bijela); flex-wrap: wrap; } .segment button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: transparent; font-weight: 800; cursor: pointer; color: var(--mv-dubina); } .segment button[aria-pressed="true"] { background: var(--mv-sunce); } .postolje { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; align-items: end; list-style: none; padding: 0; } .postolje li { border-radius: 20px; padding: 20px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 2px solid var(--mv-dubina); } .postolje .p1 { background: var(--mv-sunce); order: 2; padding-block: 28px; } .postolje .p2 { background: var(--mv-svijetli-tirkiz); order: 1; } .postolje .p3 { background: var(--mv-bijela); order: 3; } .postolje .mjesto { font-size: calc(30px * var(--mv-skala)); font-weight: 900; line-height: 1; } .postolje .avatar { width: 56px; height: 56px; font-size: 22px; background: var(--mv-dubina); } .postolje .nick { font-weight: 800; overflow-wrap: anywhere; } .tablica-omot { border: 2px solid var(--mv-svijetli-tirkiz); border-radius: 16px; overflow: hidden; } .tablica { width: 100%; border-collapse: collapse; } .tablica th, .tablica td { padding: 12px 16px; text-align: left; } .tablica th { background: var(--mv-svijetli-tirkiz); font-size: var(--mv-fs-meta); font-weight: 800; } .tablica td.broj, .tablica th.broj { text-align: right; font-variant-numeric: tabular-nums; } .tablica tbody tr { border-top: 1px solid var(--mv-svijetli-tirkiz); } .tablica .igrac { display: flex; align-items: center; gap: 12px; font-weight: 700; } .tablica .avatar { width: 36px; height: 36px; font-size: 15px; } @media (max-width: 600px) { .skri-mob { display: none; } .tablica th, .tablica td { padding: 12px 10px; } .postolje { gap: 8px; } .postolje li { padding: 14px 6px; } .postolje .p1 { padding-block: 20px; } } .alati-ljestvice { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; } /* ---------- Prijava ---------- */ .prijava { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; padding-block: 40px; } .prijava__kartica { padding: 32px; border: 2px solid var(--mv-svijetli-tirkiz); } /* v2.7: prijava = registracija, jedan stupac (Google ili link na e-mail) */ .prijava--jedan { grid-template-columns: minmax(0, 560px); justify-content: center; } .prijava__kartica .obrazac .mv-gumb { width: 100%; } .prijava__poslano { display: grid; gap: 14px; justify-items: start; } .prijava__poslano:focus { outline: none; } .prijava__ikona { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--mv-svijetli-tirkiz); color: var(--mv-tirkiz-tamni); } .prijava__ikona .ikona { width: 32px; height: 32px; } .prijava__gumbi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .prijava__simulacija { border-style: dashed; font-size: var(--mv-fs-meta); } /* Prijava lozinkom (30. 10. 2026.): tekstni gumb ispod glavnog gumba prebacuje obrazac između poveznice na e-mail i lozinke. */ .prijava__nacin { justify-self: center; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: var(--mv-tirkiz-tamni); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; text-align: center; } .prijava__nacin:hover { background: var(--mv-svijetli-tirkiz); } .gumb-google { width: 100%; background: var(--mv-bijela); color: var(--mv-dubina); border-color: var(--mv-dubina); } .gumb-google svg { width: 24px; height: 24px; } .razdjel { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-weight: 700; } .razdjel::before, .razdjel::after { content: ""; flex: 1; height: 2px; background: var(--mv-svijetli-tirkiz); } .obrazac { display: grid; gap: 18px; } .obrazac label { font-weight: 800; display: block; margin-bottom: 6px; } .obrazac .pomoc { font-size: var(--mv-fs-meta); font-weight: 600; margin-top: 6px; } .kvacica { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; cursor: pointer; } .kvacica input { width: 28px; height: 28px; margin: 0; flex: none; accent-color: var(--mv-tirkiz-tamni); } .greska { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border: 2px solid #9B1C1C; border-radius: 12px; background: #FFF4F4; color: #7A1010; font-weight: 700; } .greska[hidden] { display: none; } .polje[aria-invalid="true"] { border-color: #9B1C1C; border-width: 3px; } @media (max-width: 860px) { .prijava { grid-template-columns: 1fr; padding-block: 24px; } .prijava__kartica { padding: 20px; } .prijava__gumbi .mv-gumb { flex: 1 1 200px; } } /* ---------- Profil ---------- */ .profil-naslov { margin: 0; } .profil-avatar { display: flex; align-items: center; gap: 22px; margin-top: 22px; padding: 20px 22px; border: 2px solid var(--mv-svijetli-tirkiz); border-radius: var(--mv-radijus); background: var(--mv-bijela); } .profil-avatar__slika { width: 112px; height: 112px; flex: none; display: grid; place-items: center; overflow: hidden; border: 4px solid var(--mv-svijetli-tirkiz); border-radius: 50%; background: var(--mv-tirkiz-tamni); color: var(--mv-bijela); font-size: 42px; font-weight: 900; } .profil-avatar__slika img { width: 100%; height: 100%; object-fit: cover; } .profil-avatar__tekst { display: grid; gap: 5px; min-width: 0; } .profil-avatar__tekst h2, .profil-avatar__tekst p { margin: 0; } .profil-avatar__gumbi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .mv-gumb--tihi { min-height: 48px; padding-inline: 1.15em; border-color: transparent; background: transparent; color: var(--mv-tirkiz-tamni); font-size: var(--mv-fs-meta); } .mv-gumb--tihi:hover, .mv-gumb--tihi:focus-visible { border-color: var(--mv-tirkiz-tamni); background: var(--mv-svijetli-tirkiz); } .avatar-izrez .list__unutra { width: min(94vw, 620px); } .avatar-izrez__platno { width: 100%; height: min(56vh, 460px); overflow: hidden; border-radius: 14px; background: #102D32; } .avatar-izrez__platno img { display: block; max-width: 100%; } @media (max-width: 600px) { .profil-avatar { align-items: flex-start; gap: 16px; padding: 18px; } .profil-avatar__slika { width: 88px; height: 88px; font-size: 34px; } .profil-avatar__gumbi { flex-direction: column; align-items: stretch; } .profil-avatar__gumbi .mv-gumb { width: 100%; } .avatar-izrez__platno { height: min(52vh, 360px); } } /* Nadimak i e-mail ispod naslova (30. 10. 2026.): samo za čitanje, ne mogu se mijenjati; odmah ispod je kartica „Lozinka”. */ .profil-podaci { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 14px 0 0; } .profil-podaci > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .profil-podaci dt { flex: none; font-size: calc(17px * var(--mv-skala)); font-weight: 700; color: var(--mv-tekst-meta); } .profil-podaci dt::after { content: ":"; } .profil-podaci dd { margin: 0; min-width: 0; font-size: calc(20px * var(--mv-skala)); font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; } .profil-podaci [hidden] { display: none; } .profil-lozinka { margin-top: 24px; } @media (max-width: 600px) { .profil-podaci { flex-direction: column; gap: 10px; } .profil-podaci > div { flex-direction: column; align-items: flex-start; gap: 0; } .profil-podaci dt { font-size: var(--mv-fs-meta); } .profil-podaci dt::after { content: none; } .profil-podaci dd { font-size: calc(18px * var(--mv-skala)); } .profil-lozinka { margin-top: 20px; } } .profil-sekcija { padding-block: 32px 0; } .profil-sekcija__naslov { margin: 0 0 20px; } .profil-racun { display: grid; gap: 20px; } .statistika { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; } .stat { padding: 20px; border: 2px solid var(--mv-svijetli-tirkiz); display: grid; gap: 12px; } .stat__glava { display: flex; gap: 12px; align-items: center; } .stat__glava img { width: 64px; border-radius: 10px; } .stat__poruka { display: grid; gap: 3px; min-height: 104px; align-content: center; padding: 18px; border: 2px dashed var(--mv-tirkiz-tamni); border-radius: 14px; background: #F3FBFC; } .stat__poruka span, .stat__zastarjelo { font-size: var(--mv-fs-meta); font-weight: 600; } .stat__zastarjelo { color: var(--mv-tirkiz-tamni); } .stat--ucitavanje { opacity: .78; } .znacke { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); list-style: none; padding: 0; margin: 0; } .znacka { text-align: center; padding: 18px 12px; border-radius: 18px; border: 2px solid var(--mv-svijetli-tirkiz); display: flex; flex-direction: column; align-items: center; gap: 6px; } .znacka__ikona { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--mv-sunce); color: var(--mv-dubina); border: 3px solid var(--mv-dubina); } .znacka__ikona .ikona { width: 36px; height: 36px; } .znacka--zakljucana { border-style: dashed; border-color: #9FB3BA; } .znacka--zakljucana .znacka__ikona { background: var(--mv-onemoguceno-pozadina); color: var(--mv-onemoguceno-tekst); border-color: var(--mv-onemoguceno-tekst); } .znacka strong { font-weight: 800; } .postavke { display: grid; gap: 4px; list-style: none; padding: 0; margin: 0; } .postavke li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border: 2px solid var(--mv-svijetli-tirkiz); border-radius: 16px; flex-wrap: wrap; } .postavke li p { font-size: var(--mv-fs-meta); font-weight: 600; } .postavke .mv-prekidac { flex: none; } .sigurnost-racuna { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border: 2px solid var(--mv-svijetli-tirkiz); border-radius: var(--mv-radijus); background: var(--mv-bijela); } .sigurnost-racuna > div { display: grid; gap: 2px; } .primjer-traka { display: flex; gap: 10px; align-items: center; padding: 10px 16px; border: 2px dashed var(--mv-dubina); border-radius: 12px; font-weight: 700; font-size: var(--mv-fs-meta); margin-bottom: 20px; background: var(--mv-bijela); } .opasna-zona { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border: 2px solid var(--mv-svijetli-tirkiz); border-radius: var(--mv-radijus); background: var(--mv-bijela); } .opasna-zona__tekst { display: grid; gap: 2px; } .opasna-zona h2, .opasna-zona h3, .opasna-zona p { color: var(--mv-dubina); } .mv-gumb--opasni { background: #9B1C1C; border-color: #9B1C1C; color: #FFFFFF; } .mv-gumb--opasni:hover, .mv-gumb--opasni:focus-visible { background: #7A1010; border-color: #7A1010; } .mv-gumb--opasni:disabled { opacity: .65; cursor: wait; } .mv-gumb--opasni-tihi { min-height: 48px; padding-inline: 1.15em; border-color: #9B1C1C; background: var(--mv-bijela); color: #7A1010; font-size: var(--mv-fs-meta); } .mv-gumb--opasni-tihi:hover, .mv-gumb--opasni-tihi:focus-visible { background: #FFF4F4; border-color: #7A1010; } .greska-teksta { color: #7A1010; font-weight: 700; } .greska-teksta[hidden] { display: none; } @media (max-width: 600px) { .opasna-zona, .sigurnost-racuna { flex-direction: column; align-items: flex-start; padding: 18px; } .profil-sekcija { padding-block: 24px 0; } } /* ---------- Info ---------- */ .info { max-width: 820px; display: grid; gap: 32px; padding-block: 40px; } .info section { display: grid; gap: 10px; } .mv-povrsina-naglasena a.mv-gumb, .mv-povrsina-tamna a.mv-gumb { color: var(--mv-dubina); text-decoration: none; } .mv-gumb { text-decoration: none; } .tablica-omot { overflow-x: auto; } .tablica .igrac { overflow-wrap: anywhere; } @media (max-width: 600px) { .segment { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-radius: 16px; } .segment button { padding: 0 6px; border-radius: 12px; font-size: calc(16px * var(--mv-skala)); line-height: 1.15; } .tablica th, .tablica td { padding: 10px 8px; } } .obrazac label.kvacica { display: flex; margin: 0; } .gumb-aplus .gumb-aplus__tekst { font-size: calc(16px * var(--mv-skala)); } /* Mobitel položeno: slika igre uz tekst, ne preko cijelog zaslona */ @media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) { .igra-glava { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; } .igra-glava__slika { max-height: 220px; } } /* ---------- Logotipi igara (v1.4) ---------- Svaka igra zadržava svoj logotip (narančasto-žuti s tamnim obrubom). Uvijek ga stavljamo na svijetlu podlogu: bijela, Svijetli tirkiz ili topla krem. Nikad na Tirkiz/Dubinu. v1.4: sve slike logotipa imaju ISTO platno 8:5 (800×500 / 320×200) s jednakim prozirnim rubom i jednakom visinom crteža (logotipi.py), pa ih svugdje samo stavimo u okvir s object-fit: contain – nijedan nije veći. Podloga logotipa (početna: heroj + „Naša prvenstva”, list igre, stranica igre) bira se klasom na : .logo-pozadina-a bijele kartice .logo-pozadina-b bez kartica – logotip izravno na Svijetlom tirkizu, s mekom sjenom .logo-pozadina-c topla krem kartica (#FFF8E7) – preporuka .logo-pozadina-d jedna zajednička bijela ploča za sva četiri logotipa Brza promjena u pregledniku: dodaj ?pozadina=a|b|c|d na adresu (pamti se u localStorage). */ :root { --mv-logo-krem: #FFF8E7; --mv-logo-krem-rub: #F1E2BF; --mv-logo-podloga: radial-gradient(ellipse at 50% 42%, #FFFFFF 0%, #FFFFFF 38%, #F4FBFC 62%, var(--mv-svijetli-tirkiz) 100%); --mv-logo-sjena: drop-shadow(0 3px 6px rgba(18,59,74,.14)); } img.logo-igre, .hero__igre img { object-fit: contain !important; filter: var(--mv-logo-sjena); border-radius: 0; } .plocica__slika, .list__slika, .igra-glava__slika { position: relative; padding: 0; background: var(--mv-logo-podloga); } .plocica__slika { border-bottom: 2px solid var(--mv-svijetli-tirkiz); } .list__slika, .igra-glava__slika { border: 2px solid var(--mv-svijetli-tirkiz); } /* Platno slike već ima jednak rub (~4–6 %), pa je unutarnji razmak malen i isti za sve igre */ .plocica__slika img.logo-igre, .list__slika img.logo-igre, .igra-glava__slika img.logo-igre { position: absolute; inset: 5% 6%; width: 88%; height: 90%; } .plocica:hover .plocica__slika img { transform: scale(1.03); transition: transform .2s; } .logo-okvir { flex: none; display: grid; place-items: center; width: 96px; height: 64px; padding: 4px; border-radius: 12px; background: var(--mv-logo-podloga); border: 2px solid var(--mv-svijetli-tirkiz); } .logo-okvir img, .stat__glava .logo-okvir img { width: 100%; height: 100%; border-radius: 0; } .stat__glava .logo-okvir { width: 84px; height: 56px; } .tab img.logo-igre { width: 58px; height: 36px; border-radius: 0; } .tab[aria-selected="true"] img.logo-igre { background: var(--mv-bijela); border-radius: 8px; padding: 2px; } /* Početna: četiri logotipa u heroju (zajednička pravila) */ .hero__igre { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: min(100%, 540px); justify-self: center; } .hero__igre a { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 5% 4%; border-radius: 20px; border: 2px solid transparent; transition: transform .15s, border-color .15s, background-color .15s, box-shadow .15s; } .hero__igre a:hover { transform: translateY(-3px); border-color: var(--mv-tirkiz); } .hero__igre img { width: 100%; height: 100%; } @media (max-width: 760px) { .hero__igre { gap: 10px; width: 100%; } .hero__igre a { border-radius: 14px; padding: 4% 4%; } } @media (max-width: 1000px) and (max-height: 500px) { .hero__igre { gap: 8px; } } /* (A) bijele kartice */ .logo-pozadina-a .hero__igre a { background: var(--mv-bijela); box-shadow: var(--mv-sjena); } /* (B) bez kartica: logotip izravno na Svijetlom tirkizu, meka sjena ispod */ .logo-pozadina-b { --mv-logo-sjena: drop-shadow(0 6px 8px rgba(18,59,74,.20)); } .logo-pozadina-b .hero__igre a { aspect-ratio: 8 / 5; padding: 2%; } .logo-pozadina-b .hero__igre a:hover { background: rgba(255,255,255,.45); } .logo-pozadina-b .plocica__slika, .logo-pozadina-b .list__slika, .logo-pozadina-b .igra-glava__slika { background: var(--mv-svijetli-tirkiz); } /* (C) topla krem kartica – poveznica s drvenim stolovima igara, logotip „sjedne” u toplu podlogu */ .logo-pozadina-c .hero__igre a { background: var(--mv-logo-krem); border-color: var(--mv-logo-krem-rub); box-shadow: 0 2px 10px rgba(120,84,20,.10); } .logo-pozadina-c .hero__igre a:hover { border-color: var(--mv-tirkiz); } .logo-pozadina-c .plocica__slika, .logo-pozadina-c .list__slika, .logo-pozadina-c .igra-glava__slika, .logo-pozadina-c .logo-okvir { background: var(--mv-logo-krem); } .logo-pozadina-c .list__slika, .logo-pozadina-c .igra-glava__slika, .logo-pozadina-c .logo-okvir { border-color: var(--mv-logo-krem-rub); } .logo-pozadina-c .plocica__slika { border-bottom-color: var(--mv-logo-krem-rub); } /* (D) jedna zajednička bijela ploča */ .logo-pozadina-d .hero__igre { background: var(--mv-bijela); border-radius: 24px; box-shadow: var(--mv-sjena); padding: 12px; gap: 4px; } .logo-pozadina-d .hero__igre a { border-radius: 16px; } .logo-pozadina-d .hero__igre a:hover { transform: none; background: var(--mv-svijetli-tirkiz); border-color: var(--mv-tirkiz); } @media (max-width: 760px) { .logo-pozadina-d .hero__igre { padding: 8px; gap: 2px; border-radius: 18px; } } /* ---------- Naslovnica v2 (25. 10. 2026.): igre samo jednom; faza 1 bez turnira ---------- index.html = prijedlog 1 „Igre u heroju” (arhivirani prijedlog 2 je u povijesti gita) */ .hero__vrh { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: end; padding-block: 40px 28px; } .hero__vrh .hero__uvod { margin-bottom: 0; max-width: 46ch; } .hero__akcija { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .hero__akcija .hero__brojka { margin-top: 10px; } .hero--igre .mv-omot { padding-bottom: 72px; } @media (max-width: 760px) { .hero__vrh { grid-template-columns: 1fr; padding-block: 24px 20px; gap: 16px; } .hero__akcija { align-items: stretch; } .hero__akcija .mv-gumb { width: 100%; } .hero--igre .mv-omot { padding-bottom: 56px; } } /* Kartica igre (logo + naziv + igrači + Igraj) */ .igre-kartice { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } @media (max-width: 1000px) { .igre-kartice { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .igre-kartice { gap: 12px; } } @media (max-width: 1000px) and (max-height: 500px) { .igre-kartice { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } } .karta-igre { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 14px; background: var(--mv-bijela); border-radius: 20px; box-shadow: var(--mv-sjena); border: 2px solid var(--mv-svijetli-tirkiz); } .sekcija .karta-igre { border-color: var(--mv-svijetli-tirkiz); } .karta-igre__veza { display: flex; flex-direction: column; gap: 10px; color: var(--mv-dubina); text-decoration: none; border-radius: 14px; } .karta-igre__slika { display: grid; place-items: center; aspect-ratio: 8 / 5; padding: 4%; border-radius: 14px; background: var(--mv-logo-podloga); border: 2px solid var(--mv-svijetli-tirkiz); transition: border-color .15s; } .karta-igre__slika img { width: 100%; height: 100%; } .karta-igre__veza:hover .karta-igre__naziv { text-decoration: underline; text-underline-offset: 4px; } .karta-igre__naziv { font-size: calc(24px * var(--mv-skala)); font-weight: 900; line-height: 1.2; padding-inline: 4px; } .karta-igre__meta { display: flex; align-items: center; gap: 8px; margin: 0; padding-inline: 4px; font-size: var(--mv-fs-meta); font-weight: 600; line-height: 1.35; } .karta-igre__primjer { font-weight: 600; color: var(--mv-tekst-meta); } .karta-igre__meta:last-of-type { margin-bottom: 2px; } @media (max-width: 600px) { .karta-igre { padding: 8px 8px 10px; border-radius: 16px; } .karta-igre__naziv { font-size: calc(20px * var(--mv-skala)); } } /* podloga logotipa prati odabranu varijantu (a–d) */ .logo-pozadina-a .karta-igre__slika, .logo-pozadina-d .karta-igre__slika { background: var(--mv-bijela); } .logo-pozadina-b .karta-igre__slika { background: var(--mv-svijetli-tirkiz); border-color: transparent; } .logo-pozadina-c .karta-igre__slika { background: var(--mv-logo-krem); border-color: var(--mv-logo-krem-rub); } /* Ljestvica mjeseca + Kako početi */ .naslovnica-dvoje { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } @media (max-width: 900px) { .naslovnica-dvoje { grid-template-columns: minmax(0, 1fr); } } .blok { padding: 24px; border: 2px solid var(--mv-svijetli-tirkiz); display: flex; flex-direction: column; gap: 14px; } .blok__glava h2 { display: flex; align-items: center; gap: 10px; } .blok__glava h2 .ikona { color: var(--mv-tirkiz-tamni); width: 28px; height: 28px; } .blok__glava p { margin: 4px 0 0; } .blok { min-width: 0; } .blok .cipovi { flex: none; flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } .postolje--mini { margin: 4px 0 0; } .postolje--mini li { padding: 16px 8px; } .postolje--mini .p1 { padding-block: 24px; } .postolje--mini .avatar { width: 48px; height: 48px; font-size: 20px; } .postolje--mini .mjesto { font-size: calc(26px * var(--mv-skala)); } .blok .poveznica-strelica { align-self: flex-start; margin-top: auto; } .koraci { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .koraci li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; } .korak__broj { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--mv-tirkiz-tamni); color: var(--mv-bijela); font-weight: 900; font-size: calc(24px * var(--mv-skala)); } .koraci h3 { font-size: calc(20px * var(--mv-skala)); margin: 2px 0 2px; } .koraci p { margin: 0; } .blok__gumbi { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; } .blok__gumbi[hidden] { display: none; } @media (max-width: 600px) { .blok { padding: 18px 16px; } .blok__gumbi .mv-gumb { flex: 1 1 100%; } } /* Zašto Morska vila */ .prednosti-sekcija h2 { margin-bottom: 20px; } .prednosti { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } @media (max-width: 900px) { .prednosti { grid-template-columns: 1fr; gap: 12px; } } .prednosti li { background: var(--mv-bijela); border-radius: var(--mv-radijus); padding: 22px; box-shadow: var(--mv-sjena); } .prednosti h3 { font-size: calc(21px * var(--mv-skala)); margin: 12px 0 6px; } .prednosti p { margin: 0; } .prednosti__ikona { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--mv-sunce); color: var(--mv-dubina); } .prednosti__ikona .ikona { width: 30px; height: 30px; } .prednosti__ikona--aplus { font-weight: 900; font-size: 22px; } @media (max-width: 900px) { .prednosti li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; padding: 18px; } .prednosti__ikona { grid-row: span 2; } .prednosti h3 { margin-top: 2px; } } /* Prijedlog 2: topli hero s vilom */ .hero--topli .hero__red { padding-block: 48px 80px; } .hero__vila { position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 1; display: grid; place-items: center; } .hero__sunce { position: absolute; left: 10%; top: 4%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #FFFFFF 0%, #FFFFFF 55%, rgba(255,255,255,.55) 70%, rgba(255,255,255,0) 72%); } .hero__sunce::after { content: ""; position: absolute; width: 22%; aspect-ratio: 1; right: 4%; top: 4%; border-radius: 50%; background: var(--mv-sunce); opacity: .9; } .hero__vila img { position: relative; height: 78%; width: auto; } .hero__valovi { position: absolute; left: 0; right: 0; bottom: 2%; width: 100%; height: 22%; } @media (max-width: 760px) { .hero--topli .hero__red { padding-block: 24px 64px; } .hero__vila { width: min(48%, 190px); order: -1; } } @media (max-width: 1000px) and (max-height: 500px) { .hero__vila { width: min(100%, 260px); } } /* mini postolje na mobitelu: tri reda (1., 2., 3.) umjesto tri uska stupca */ @media (max-width: 600px) { .postolje--mini { grid-template-columns: minmax(0, 1fr); gap: 8px; } .postolje--mini li { display: grid; grid-template-columns: 40px 44px minmax(0, 1fr); align-items: center; text-align: left; gap: 0 12px; padding: 10px 14px; } .postolje--mini .mjesto, .postolje--mini .avatar { grid-row: span 2; } .postolje--mini .nick { line-height: 1.25; align-self: end; } .postolje--mini li > .mv-meta { grid-column: 3; align-self: start; } .postolje--mini .p1, .postolje--mini .p2, .postolje--mini .p3 { order: 0; padding-block: 10px; } .postolje--mini .p1 { order: -1; } .postolje--mini .avatar { width: 44px; height: 44px; font-size: 18px; } } /* ---------- Profil: kartica statistike (faza 1 – samo podaci koji postoje) ---------- 1) mjesto na mjesečnoj ljestvici (najistaknutije, poveznica) 2) „Zadnjih 7 dana: N partija” (samo broj odigranih partija; ishodi partija se ne prikazuju) */ .stat { gap: 16px; align-content: start; } .stat h3 { font-size: calc(24px * var(--mv-skala)); } .stat__mjesto { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "oz link" "broj link"; align-items: center; gap: 2px 12px; min-height: 48px; padding: 14px 18px; border-radius: 14px; background: var(--mv-bijela); border: 3px solid var(--mv-tirkiz-tamni); color: var(--mv-dubina); text-decoration: none; } .stat__mjesto:hover { background: #F3FBFC; } .stat__mjesto-oznaka { grid-area: oz; font-size: var(--mv-fs-tekst); font-weight: 700; } .stat__mjesto-broj { grid-area: broj; font-size: calc(34px * var(--mv-skala)); font-weight: 900; line-height: 1.1; } .stat__mjesto-broj--prazno { font-size: calc(22px * var(--mv-skala)); } .stat__mjesto-link { grid-area: link; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--mv-tirkiz-tamni); text-decoration: underline; text-underline-offset: 4px; } .stat__prazno { margin: 4px 0 0; font-weight: 700; } .stat__igraj { justify-self: start; } @media (max-width: 600px) { .stat { padding: 16px; } .stat__mjesto { grid-template-columns: 1fr; grid-template-areas: "oz" "broj" "link"; padding: 12px 14px; } .stat__mjesto-link { margin-top: 6px; } .stat__igraj { width: 100%; } } /* Ljestvica: samo tekući kalendarski mjesec */ .mjesec-oznaka { display: inline-flex; align-items: center; gap: 10px; margin: 0; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--mv-svijetli-tirkiz); font-weight: 700; } .mjesec-oznaka .ikona { color: var(--mv-tirkiz-tamni); } @media (max-width: 860px) { .statistika { grid-template-columns: minmax(0, 1fr); } } /* Kartica statistike v2: mjesto (lijevo, istaknuto) + „Zadnjih 7 dana” (desno); bez ishoda partija */ .stat { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 14px; } .stat__glava, .stat__prazno, .stat__igraj { grid-column: 1 / -1; } .stat .stat__mjesto { grid-template-columns: minmax(0, 1fr); grid-template-areas: "oz" "broj" "link"; } .stat .stat__mjesto-link { margin-top: 4px; } .stat__7dana { margin: 0; display: grid; align-content: center; gap: 2px; min-height: 48px; padding: 14px 16px; border-radius: 14px; background: var(--mv-svijetli-tirkiz); color: var(--mv-dubina); } .stat__7dana-ikona { display: none; } .stat__7dana-oznaka { font-size: var(--mv-fs-tekst); font-weight: 700; } .stat__7dana-broj { font-size: calc(30px * var(--mv-skala)); font-weight: 900; line-height: 1.15; } @media (max-width: 600px) { .stat { grid-template-columns: minmax(0, 1fr); } .stat__7dana { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 12px 14px; } .stat__7dana-ikona { display: inline-flex; color: var(--mv-tirkiz-tamni); } .stat__7dana-broj { font-size: calc(24px * var(--mv-skala)); text-align: right; } } /* ---------- Naslovnica, prijedlog 3 „Prvenstva uživo” (25. 10. 2026.) ---------- Svaka igra = velika kartica: logotip na krem podlozi, naziv, igrači online (zelena točka), Igraj, top 3 ovog mjeseca. */ .tocka-uzivo--zelena { background: #1E8E4E; box-shadow: 0 0 0 4px rgba(30,142,78,.22); } .mv-gumb--obrub { border-color: var(--mv-dubina); } .hero--uzivo .hero__vrh { padding-block: 36px 56px; align-items: center; } .uzivo-ukupno { display: inline-flex; align-items: center; gap: 12px; margin: 0; min-height: 48px; padding: 12px 20px; border-radius: 999px; background: var(--mv-bijela); border: 2px solid var(--mv-tirkiz-tamni); color: var(--mv-dubina); font-weight: 700; } .uzivo-ukupno strong { font-size: calc(26px * var(--mv-skala)); font-weight: 900; } .sekcija--prvenstva { padding-block: 36px 40px; } .prvenstva { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .prvenstvo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "slika naziv" "slika uzivo" "top top"; column-gap: 20px; row-gap: 10px; align-content: start; padding: 20px; background: var(--mv-bijela); border: 2px solid var(--mv-svijetli-tirkiz); border-radius: 22px; box-shadow: var(--mv-sjena); color: var(--mv-dubina); } .prvenstvo__slika { grid-area: slika; display: grid; place-items: center; aspect-ratio: 8 / 5; align-self: start; padding: 4%; border-radius: 16px; background: var(--mv-logo-krem); border: 2px solid var(--mv-logo-krem-rub); } .prvenstvo__slika img { width: 100%; height: 100%; } .prvenstvo__naziv { grid-area: naziv; align-self: end; margin: 0; font-size: calc(26px * var(--mv-skala)); font-weight: 900; line-height: 1.2; } .prvenstvo__naziv a { color: var(--mv-dubina); text-decoration: none; display: inline-flex; min-height: 48px; align-items: center; } .prvenstvo__naziv a:hover { text-decoration: underline; text-underline-offset: 4px; } .prvenstvo__uzivo { grid-area: uzivo; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; } .prvenstvo__broj { font-size: calc(36px * var(--mv-skala)); font-weight: 900; line-height: 1; } .prvenstvo__uzivo-tekst { font-size: var(--mv-fs-tekst); font-weight: 700; } .prvenstvo__primjer { font-size: var(--mv-fs-meta); font-weight: 600; color: var(--mv-tekst-meta); } .prvenstvo__top { grid-area: top; margin-top: 8px; padding-top: 14px; border-top: 2px solid var(--mv-svijetli-tirkiz); display: grid; gap: 8px; } .prvenstvo__top-glava { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .prvenstvo__top-glava h4 { margin: 0; font-size: calc(20px * var(--mv-skala)); font-weight: 900; } .prvenstvo__top-bodovi { font-size: var(--mv-fs-meta); font-weight: 700; color: var(--mv-tekst-meta); } .top3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .top3__red, .top3__ti { display: grid; grid-template-columns: 40px 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px; border-radius: 14px; background: #F3FBFC; margin: 0; } .top3__mjesto { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 900; font-size: var(--mv-fs-tekst); color: var(--mv-dubina); border: 3px solid var(--mv-dubina); background: var(--mv-bijela); } .top3__red--1 .top3__mjesto { background: var(--mv-sunce); } .top3__red--2 .top3__mjesto { background: var(--mv-svijetli-tirkiz); } .top3__red--3 .top3__mjesto { background: var(--mv-bijela); border-color: var(--mv-tirkiz-tamni); } .top3 .avatar, .top3__ti .avatar { width: 40px; height: 40px; font-size: 17px; background: var(--mv-dubina); } .top3__nick { font-weight: 800; overflow-wrap: anywhere; } .top3__bodovi { font-size: calc(20px * var(--mv-skala)); font-weight: 900; text-align: right; } .top3__ti { grid-template-columns: 40px minmax(0, 1fr); background: var(--mv-bijela); border: 2px dashed var(--mv-tirkiz-tamni); } .top3__ti .avatar { background: var(--mv-sunce); color: var(--mv-dubina); } .prvenstvo__link { justify-self: start; color: var(--mv-tirkiz-tamni); } .prvenstva__napomena { margin: 16px 0 0; } .koraci--red { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 16px; } .naslovnica--3 .blok__gumbi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .povjerenje { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; padding: 14px 18px; border-radius: 14px; background: var(--mv-bijela); font-weight: 600; } .povjerenje .ikona { color: var(--mv-tirkiz-tamni); flex: none; } @media (max-width: 1000px) { .prvenstvo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "slika" "naziv" "uzivo" "top"; } .prvenstvo__slika { max-width: 360px; } .koraci--red { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .prvenstva { grid-template-columns: minmax(0, 1fr); gap: 16px; } .prvenstvo { grid-template-columns: 132px minmax(0, 1fr); grid-template-areas: "slika naziv" "slika uzivo" "top top"; column-gap: 14px; padding: 16px; } .prvenstvo__naziv { font-size: calc(22px * var(--mv-skala)); } .prvenstvo__broj { font-size: calc(30px * var(--mv-skala)); } .hero--uzivo .hero__vrh { padding-block: 24px 56px; } .uzivo-ukupno { border-radius: 18px; } } @media (max-width: 420px) { .top3__red { grid-template-columns: 36px 36px minmax(0, 1fr) auto; gap: 8px; padding: 6px 10px; } .top3__mjesto, .top3 .avatar { width: 36px; height: 36px; } .top3 .avatar { font-size: 15px; } } /* ---------- Finalna naslovnica: desktop = prijedlog 3, mobitel (≤ 760 px) = prijedlog 1 ---------- */ @media (min-width: 761px) { .samo-mobitel { display: none !important; } } @media (max-width: 760px) { .samo-desktop { display: none !important; } } /* Uski desktop (1001–1200 px): zbijenije zaglavlje da se ne prelije */ @media (min-width: 1001px) and (max-width: 1200px) { .zaglavlje__red { gap: 10px; } .zaglavlje__nav { margin-left: 4px; } .zaglavlje__nav a { padding: 0 10px; } .zaglavlje__nav .ikona { display: none; } .zaglavlje__desno { gap: 8px; } .zaglavlje__desno .mv-gumb { padding: 0 1em; } } /* ---------- „Brza partija: ” (zadnja igra) ---------- */ .brza-partija { gap: 12px; padding: 6px 20px 6px 6px; min-height: 64px; white-space: normal; text-align: left; justify-content: flex-start; } .brza-partija__logo { display: grid; place-items: center; flex: none; width: 80px; height: 50px; padding: 3px; border-radius: 12px; background: var(--mv-logo-krem); border: 2px solid var(--mv-logo-krem-rub); } .brza-partija__logo img { width: 100%; height: 100%; } .brza-partija__tekst { display: grid; gap: 0; flex: 1 1 auto; min-width: 0; } .brza-partija__naslov { font-weight: 900; line-height: 1.2; } .brza-partija__pod { font-size: var(--mv-fs-meta); font-weight: 600; line-height: 1.3; color: var(--mv-dubina); } .brza-partija > .ikona { flex: none; margin-left: auto; } .hero__akcija--uzivo { display: grid; gap: 12px; justify-items: end; } @media (max-width: 760px) { .brza-partija { width: 100%; padding-right: 16px; gap: 10px; } .brza-partija__naslov { font-size: calc(20px * var(--mv-skala)); } } /* Hero naslov = slogan „Sva prvenstva na jednom mjestu.” (h1, Dubina, Nunito ExtraBold) s diskretnim akcentom u boji Sunca */ .hero .hero__naslov { margin: 0; font-size: var(--mv-fs-h1); font-weight: 800; color: var(--mv-dubina); line-height: var(--mv-lh-naslov); text-wrap: balance; } .hero .hero__naslov::after { content: ""; display: block; width: 96px; height: 6px; margin-top: 14px; border-radius: 3px; background: var(--mv-sunce); } .naslovnica-jedno { display: grid; grid-template-columns: minmax(0, 1fr); } .podnozje__verzija { font-size: 14px; font-weight: 600; color: var(--mv-bijela); opacity: .9; } .podnozje__verzija code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .02em; } /* Faza 1 bez stranice Ljestvica: mjesto na profilu je samo tekst (bez poveznice i strelice) */ .stat__mjesto--tekst, .stat__mjesto--tekst:hover { background: var(--mv-bijela); border-color: var(--mv-svijetli-tirkiz); cursor: default; } .stat .stat__mjesto--tekst { grid-template-areas: "oz" "broj"; } /* Bela: tablica zvanja u pravilima (stranica igre i „Pravila” za stolom) */ .zvanja { width: 100%; max-width: 560px; border-collapse: collapse; margin: 4px 0 8px; font-size: var(--mv-fs-tekst); color: var(--mv-dubina); } .zvanja th, .zvanja td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--mv-svijetli-tirkiz); vertical-align: top; } .zvanja thead th { background: var(--mv-svijetli-tirkiz); font-weight: 800; } .zvanja .broj { text-align: right; font-weight: 900; white-space: nowrap; } .zvanja__napomena { display: block; font-size: var(--mv-fs-meta); font-weight: 600; white-space: normal; } /* v2.7: prazna mjesečna ljestvica (novi mjesec, još nema partija) – prijateljsko stanje, ne greška */ .ljestvica-prazna, .postolje li.ljestvica-prazna, .postolje--mini li.ljestvica-prazna, .top3 li.ljestvica-prazna { display: flex; flex-direction: row; gap: 12px; align-items: center; grid-column: 1 / -1; order: 0; margin: 4px 0 0; padding: 16px 18px; border: 2px dashed var(--mv-tirkiz-tamni); border-radius: 14px; background: #F3FBFC; color: var(--mv-dubina); font-weight: 800; text-align: left; list-style: none; min-height: 52px; } .ljestvica-prazna .ikona { flex: none; width: 32px; height: 32px; color: var(--mv-tirkiz-tamni); } /* v2.7: mjesečni bodovi uz mjesto na profilu */ .stat__mjesto-bodovi { display: block; margin-top: 2px; font-size: var(--mv-fs-tekst); font-weight: 800; line-height: 1.3; color: var(--mv-tirkiz-tamni); } .stat__mjesto-broj--prazno + .stat__mjesto-bodovi { font-weight: 700; color: var(--mv-dubina); } /* ---------- Naslovnica v3.0 – prijedlog A2 „Traka na dnu slike” (25. 10. 2026.) – SAMO MOBILNI RASPORED (≤ 760 px) ---------- Desktop naslovnica (> 760 px, „Prvenstva uživo”) ostaje bez promjene. Na mobilnim karticama igara broj igrača online je tanka poluprozirna traka uz donji rub slike; logotip uvijek ostavlja --mv-traka-v prostora, pa kad traka nestane (online null / greška API-ja) raspored ne skače. Stari redak s brojem ostaje samo za čitač zaslona; traka je aria-hidden. U mobilnom heroju je istaknuti okvir „● 180 igrača upravo igra”. Zelena točka pulsira; uz prefers-reduced-motion miruje. */ .tocka-puls { position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%; background: #1E8E4E; } .tocka-puls::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: .55; animation: mv-puls 1.8s ease-out infinite; } @keyframes mv-puls { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .tocka-puls::after { animation: none; transform: scale(1.7); opacity: .25; } } .online-traka { display: none; } @media (max-width: 760px) { .karta-igre__slika--traka { position: relative; overflow: hidden; --mv-traka-v: 26px; } .karta-igre__slika--traka img.logo-igre { position: absolute; left: 5%; top: 5%; width: 90%; height: calc(92% - var(--mv-traka-v)); } .online-traka { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 2px 8px; background: rgba(18, 59, 74, .88); color: var(--mv-bijela); font-size: var(--mv-fs-meta); font-weight: 700; line-height: 1.15; white-space: nowrap; } .online-traka strong { font-size: calc(18px * var(--mv-skala)); font-weight: 900; font-variant-numeric: tabular-nums; } .online-traka .tocka-puls { width: 9px; height: 9px; background: #3DDC84; } .karta-igre__online { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } } .online-traka[hidden] { display: none !important; } .online-traka__kratko { display: none; } @media (max-width: 600px) { .online-traka__dugo { display: none; } .online-traka__kratko { display: inline; } } .uzivo-istaknuto { display: inline-flex; align-items: center; gap: 12px; margin: 0; min-height: 56px; padding: 10px 22px 10px 18px; border-radius: 999px; background: var(--mv-bijela); border: 3px solid #1E8E4E; color: var(--mv-dubina); font-size: calc(20px * var(--mv-skala)); font-weight: 800; box-shadow: var(--mv-sjena); } .uzivo-istaknuto strong { font-size: calc(32px * var(--mv-skala)); font-weight: 900; font-variant-numeric: tabular-nums; } .uzivo-istaknuto .tocka-puls { width: 14px; height: 14px; } .uzivo-istaknuto[hidden] { display: none !important; } @media (max-width: 760px) { .uzivo-istaknuto { justify-content: center; border-radius: 18px; } } /* ---------- Naslovnica v3.2 – kartice bez vidljivog naziva igre (25. 10. 2026.) ---------- Naziv je već u logotipu: na karticama „Prvenstva uživo” (> 760 px) naslov h3 je samo za čitač zaslona, a poveznica na /igra/{id}-prvenstvo je sama slika (alt „Trešeta prvenstvo – igraj”). Redak „N online igrača” stoji uz sliku, okomito u sredini. Mobilne kartice: naziv samo za čitač zaslona unutar poveznice; ispod slike ostaje „2 ili 3 igrača”. */ .prvenstvo { grid-template-areas: "slika uzivo" "top top"; row-gap: 14px; } .prvenstvo__uzivo { align-self: center; } .prvenstvo__slika { text-decoration: none; transition: border-color .15s; } @media (max-width: 1000px) { .prvenstvo { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "slika uzivo" "top top"; } } @media (max-width: 760px) { .prvenstvo { grid-template-columns: 132px minmax(0, 1fr); grid-template-areas: "slika uzivo" "top top"; } } .karta-igre__veza + .karta-igre__meta { margin-top: 4px; } /* ---------- Pravni dokumenti (26. 10. 2026.) – /terms.html i /privacy.html, unutar .info ---------- */ .pravni article { display: grid; gap: 14px; } .pravni article p { max-width: 70ch; } .pravni__dalje { border-top: 2px solid var(--mv-svijetli-tirkiz); padding-top: 16px; } /* Privatni administratorski pregled igrača uživo. */ .admin-uzivo { min-height: 62vh; padding-block: 32px 56px; } .admin-uzivo .greska { margin-bottom: 12px; } .admin-uzivo__tablica-okvir { overflow-x: auto; padding: 0; } .admin-uzivo__tablica { width: 100%; min-width: 680px; border-collapse: collapse; background: var(--mv-bijela); } .admin-uzivo__tablica th, .admin-uzivo__tablica td { padding: 10px 12px; border-bottom: 1px solid var(--mv-svijetli-tirkiz); text-align: left; vertical-align: middle; } .admin-uzivo__tablica thead th { background: var(--mv-dubina); color: var(--mv-bijela); font-size: var(--mv-fs-meta); font-weight: 900; white-space: nowrap; } .admin-uzivo__red-ukupno > * { background: var(--mv-svijetli-tirkiz); color: var(--mv-dubina); font-size: calc(22px * var(--mv-skala)); font-weight: 900; font-variant-numeric: tabular-nums; } .admin-uzivo__red-ukupno td, .admin-uzivo__broj { white-space: nowrap; } .admin-uzivo__igra { display: flex; align-items: center; gap: 10px; min-width: 130px; font-weight: 900; } .admin-uzivo__igra img { width: 52px; height: 32px; flex: 0 0 auto; object-fit: contain; border-radius: 7px; background: var(--mv-logo-krem); } .admin-uzivo__broj { color: var(--mv-tirkiz-tamni); font-size: calc(22px * var(--mv-skala)); font-weight: 900; font-variant-numeric: tabular-nums; } .admin-uzivo__broj--ukupno { color: var(--mv-dubina); } .admin-uzivo__stanje { margin: 10px 2px 0; color: var(--mv-tekst-meta); font-size: var(--mv-fs-meta); font-weight: 700; } @media (max-width: 600px) { .admin-uzivo__tablica th, .admin-uzivo__tablica td { padding: 8px 10px; } } /* Privatno administratorsko upravljanje trajnim testnim igračima. */ .admin-testni { min-height: 62vh; padding-block: 32px 56px; } .admin-testni__glava { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; } .admin-testni__glava h1 { margin-bottom: 6px; } .admin-testni__glava p { margin: 0; color: var(--mv-tekst-meta); font-weight: 700; } .admin-testni .greska { margin-bottom: 16px; } .admin-testni__vjerodajnice { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 10px 18px; margin-bottom: 20px; } .admin-testni__vjerodajnice[hidden] { display: none; } .admin-testni__vjerodajnice h2, .admin-testni__vjerodajnice p { grid-column: 1 / -1; } .admin-testni__vjerodajnice p { margin-top: 0; } .admin-testni__vjerodajnice label { align-self: center; font-weight: 900; } .admin-testni__kopiraj { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .admin-testni__kopiraj input { width: 100%; min-height: 48px; padding: 8px 12px; border: 2px solid var(--mv-svijetli-tirkiz); border-radius: 10px; background: var(--mv-bijela); color: var(--mv-dubina); font: inherit; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; } .admin-testni__tablica-okvir { overflow-x: auto; padding: 0; } .admin-testni__tablica { width: 100%; min-width: 680px; border-collapse: collapse; background: var(--mv-bijela); } .admin-testni__tablica th, .admin-testni__tablica td { padding: 10px 12px; border-bottom: 1px solid var(--mv-svijetli-tirkiz); text-align: left; vertical-align: middle; } .admin-testni__tablica thead th { background: var(--mv-dubina); color: var(--mv-bijela); font-size: var(--mv-fs-meta); font-weight: 900; white-space: nowrap; } .admin-testni__tablica td:first-child { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; } .admin-testni__brisi, .admin-testni__impersoniraj { min-height: 42px; padding: 7px 12px; } .admin-testni__radnje { display: flex; flex-wrap: wrap; gap: 8px; } .admin-testni__stanje { margin: 10px 2px 0; color: var(--mv-tekst-meta); font-size: var(--mv-fs-meta); font-weight: 700; } /* Admin popis korisnika */ .admin-korisnici { min-height: 62vh; padding-block: 32px 56px; } .admin-korisnici__glava { margin-bottom: 20px; } .admin-korisnici__glava h1 { margin-bottom: 6px; } .admin-korisnici__glava p { margin: 0; color: var(--mv-tekst-meta); font-weight: 700; } .admin-korisnici__zetoni { min-height: 36px; padding: 0 12px; font-size: var(--mv-fs-meta); white-space: nowrap; } .admin-korisnici__uspjeh { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--mv-svijetli-tirkiz); font-weight: 800; } .admin-korisnici__filtri { display: flex; align-items: end; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 18px; } .admin-korisnici__filtri label { display: grid; gap: 6px; color: var(--mv-dubina); font-weight: 900; } .admin-korisnici__filtri select, .admin-korisnici__filtri input { min-height: 44px; padding: 7px 10px; border: 2px solid var(--mv-svijetli-tirkiz); border-radius: 10px; background: var(--mv-bijela); color: var(--mv-dubina); font: inherit; font-weight: 800; } .admin-korisnici__filtri select { min-width: 180px; padding-right: 34px; } .admin-korisnici__filtri input { min-width: 230px; } .admin-korisnici .greska { margin-bottom: 16px; } .admin-korisnici__tablica-okvir { overflow-x: auto; padding: 0; } .admin-korisnici__tablica { width: 100%; min-width: 800px; border-collapse: collapse; background: var(--mv-bijela); } .admin-korisnici__tablica th, .admin-korisnici__tablica td { padding: 10px 12px; border-bottom: 1px solid var(--mv-svijetli-tirkiz); text-align: left; vertical-align: middle; } .admin-korisnici__tablica thead th { background: var(--mv-dubina); color: var(--mv-bijela); font-size: var(--mv-fs-meta); font-weight: 900; white-space: nowrap; } .admin-korisnici__tablica td:nth-child(2) { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; } .admin-korisnici__tablica tr[data-channel="facebook"] td:nth-child(3) { color: #3157A4; font-weight: 900; } .admin-korisnici__tablica tr[data-channel="morskavila"] td:nth-child(3) { color: var(--mv-tirkiz-tamni); font-weight: 900; } .admin-korisnici__tablica tr[data-surface="facebook"] td:nth-child(5) { color: #3157A4; font-weight: 900; } .admin-korisnici__tablica tr[data-surface="morskavila"] td:nth-child(5) { color: var(--mv-tirkiz-tamni); font-weight: 900; } .admin-korisnici__tablica td:last-child { font-weight: 900; } .admin-korisnici__stranice { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; } .admin-korisnici__stranice span { min-width: 130px; text-align: center; font-weight: 900; } .admin-korisnici__stranice button { min-width: 120px; } .admin-korisnici__stranice button:disabled { cursor: default; opacity: .5; } .admin-korisnici__stanje { margin: 10px 2px 0; color: var(--mv-tekst-meta); font-size: var(--mv-fs-meta); font-weight: 700; } @media (max-width: 600px) { .admin-korisnici__filtri { align-items: stretch; flex-direction: column; } .admin-korisnici__filtri select, .admin-korisnici__filtri input { width: 100%; min-width: 0; } .admin-korisnici__stranice { gap: 8px; } .admin-korisnici__stranice span { min-width: 0; } .admin-korisnici__stranice button { min-width: 0; padding-inline: 10px; } .admin-testni__glava { align-items: stretch; flex-direction: column; } .admin-testni__vjerodajnice { grid-template-columns: 1fr; } .admin-testni__vjerodajnice h2, .admin-testni__vjerodajnice p { grid-column: auto; } .admin-testni__kopiraj { grid-template-columns: 1fr; } .admin-testni__tablica th, .admin-testni__tablica td { padding: 8px 10px; } } /* Privatna telemetrija bannera/poveznice iz četiri kartaške igre. */ .admin-telemetrija { min-height: 62vh; padding-block: 32px 56px; } .admin-telemetrija section { margin-top: 28px; } .admin-telemetrija__glava, .admin-telemetrija__podnaslov { display: flex; align-items: end; justify-content: space-between; gap: 20px; } .admin-telemetrija__glava h1, .admin-telemetrija__podnaslov h2 { margin-bottom: 6px; } .admin-telemetrija__glava p { margin: 0; color: var(--mv-tekst-meta); font-weight: 700; } .admin-telemetrija__kontrole { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .admin-telemetrija__kontrole label, .admin-telemetrija__podnaslov label { font-weight: 900; } .admin-telemetrija select { min-height: 44px; padding: 7px 34px 7px 10px; border: 2px solid var(--mv-svijetli-tirkiz); border-radius: 10px; background: var(--mv-bijela); color: var(--mv-dubina); font: inherit; font-weight: 800; } .admin-telemetrija .greska { margin-top: 16px; } .admin-telemetrija__alarm { margin-top: 18px; padding: 14px 18px; border: 3px solid #B3261E; border-radius: 14px; background: #FFF1F0; color: #7A1712; font-weight: 800; } .admin-telemetrija__sažetak { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 12px; } .admin-telemetrija__metrika { display: grid; gap: 4px; padding: 16px; } .admin-telemetrija__metrika span { color: var(--mv-tekst-meta); font-size: var(--mv-fs-meta); font-weight: 800; } .admin-telemetrija__metrika strong { color: var(--mv-dubina); font-size: calc(28px * var(--mv-skala)); font-variant-numeric: tabular-nums; } .admin-telemetrija__tablica-okvir { overflow-x: auto; padding: 0; } .admin-telemetrija__tablica { width: 100%; min-width: 720px; border-collapse: collapse; background: var(--mv-bijela); } .admin-telemetrija__tablica th, .admin-telemetrija__tablica td { padding: 10px 12px; border-bottom: 1px solid var(--mv-svijetli-tirkiz); text-align: left; vertical-align: middle; } .admin-telemetrija__tablica thead th { background: var(--mv-dubina); color: var(--mv-bijela); font-size: var(--mv-fs-meta); font-weight: 900; white-space: nowrap; } .admin-telemetrija__tablica tbody th { color: var(--mv-dubina); font-weight: 900; } .admin-telemetrija__tablica td:not(:first-child) { font-variant-numeric: tabular-nums; } .admin-telemetrija__alarm-celija { background: #FFF1F0; color: #9B1C15; font-weight: 900; } .admin-telemetrija__nedostupno { color: var(--mv-tekst-meta); } .admin-telemetrija__status { font-weight: 900; } .admin-telemetrija__podnaslov { align-items: center; } .admin-telemetrija__podnaslov label { margin-left: auto; } .admin-telemetrija__stanje { margin: 12px 2px 0; color: var(--mv-tekst-meta); font-size: var(--mv-fs-meta); font-weight: 700; } @media (max-width: 900px) { .admin-telemetrija__sažetak { grid-template-columns: repeat(3, minmax(120px, 1fr)); } } @media (max-width: 600px) { .admin-telemetrija__glava { align-items: stretch; flex-direction: column; } .admin-telemetrija__kontrole { display: grid; grid-template-columns: 1fr 1fr; } .admin-telemetrija__kontrole label { grid-column: 1 / -1; } .admin-telemetrija__sažetak { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-telemetrija__podnaslov { align-items: stretch; display: grid; grid-template-columns: 1fr auto; } .admin-telemetrija__podnaslov h2 { grid-column: 1 / -1; } .admin-telemetrija__podnaslov label { margin-left: 0; align-self: center; } } /* ---------- Impersonacija testnog igrača (31. 10. 2026.) ---------- Traka je prvi element ljepljivog zaglavlja (uvijek vidljiva); na mobitelu se tekst i gumb lome u dva reda. */ .impersonacija-traka { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; padding: 8px 16px; background: var(--mv-sunce); color: var(--mv-dubina); font-size: var(--mv-fs-meta); font-weight: 800; line-height: 1.3; text-align: center; } .impersonacija-traka__tekst { overflow-wrap: anywhere; } .impersonacija-traka__gumb { min-height: 40px; padding: 6px 16px; border: 2px solid var(--mv-dubina); border-radius: var(--mv-radijus-gumb); background: var(--mv-dubina); color: var(--mv-bijela); font: inherit; cursor: pointer; } .impersonacija-traka__gumb:hover, .impersonacija-traka__gumb:focus-visible { background: var(--mv-bijela); color: var(--mv-dubina); outline: 3px solid var(--mv-dubina); outline-offset: 2px; } .impersonacija-traka__gumb:disabled { opacity: .65; cursor: wait; } @media (max-width: 600px) { .impersonacija-traka { padding: 8px 12px; } .impersonacija-traka__crtica { display: none; } .impersonacija-traka__gumb { width: 100%; min-height: 44px; } } /* ---------- Naslovnica v3.3 – cijela kartica igre je klikabilna (29. 10. 2026.) ---------- Rastegnuta poveznica: postojeća poveznica (slika) ima ::after preko cijele kartice, pa nema ugniježđenih interaktivnih elemenata. Kartica se na hover/fokus lagano podigne (kao .plocica); fokus tipkovnicom je okvir oko cijele kartice. Hover: tirkizni rub samo oko kartice, okvir logotipa ostaje u običnom stilu (29. 10. 2026.). Ispod broja online igrača je natpis „Igraj →” (29. 10. 2026.: prije „Opis i pravila”). */ .prvenstvo, .karta-igre { position: relative; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; } .prvenstvo__slika::after, .karta-igre__veza::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; } .prvenstvo__slika::after { border-radius: 22px; } .karta-igre__veza::after { border-radius: 20px; } .prvenstvo:hover, .karta-igre:hover, .prvenstvo:focus-within, .karta-igre:focus-within { border-color: var(--mv-tirkiz); box-shadow: 0 8px 22px rgba(18,59,74,.16); } @media (hover: hover) { .prvenstvo:hover, .karta-igre:hover { transform: translateY(-3px); } } .prvenstvo__slika:focus-visible, .karta-igre__veza:focus-visible { outline: none; } .prvenstvo__slika:focus-visible::after, .karta-igre__veza:focus-visible::after { outline: var(--mv-fokus-debljina) solid var(--mv-fokus); outline-offset: var(--mv-fokus-razmak); } @media (prefers-reduced-motion: reduce) { .prvenstvo:hover, .karta-igre:hover { transform: none; } } .prvenstvo__info { grid-area: uzivo; align-self: center; display: grid; gap: 10px; justify-items: start; } .prvenstvo__info .prvenstvo__uzivo { grid-area: auto; } .kartica-dalje { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--mv-tirkiz-tamni); font-size: calc(19px * var(--mv-skala)); font-weight: 900; line-height: 1.3; } .kartica-dalje .ikona { width: 22px; height: 22px; transition: transform .15s; } .prvenstvo:hover .kartica-dalje, .karta-igre:hover .kartica-dalje { text-decoration: underline; text-underline-offset: 4px; } .prvenstvo:hover .kartica-dalje .ikona, .karta-igre:hover .kartica-dalje .ikona { transform: translateX(3px); } .karta-igre .kartica-dalje { padding-inline: 4px; margin-top: auto; } @media (max-width: 600px) { .karta-igre .kartica-dalje { font-size: calc(17px * var(--mv-skala)); gap: 5px; } .karta-igre .kartica-dalje .ikona { width: 20px; height: 20px; } } /* ---------- Statične stranice igara (29. 10. 2026.) ---------- Broj igrača online na stranici igre (puni ga app.js, skriven dok broj ne stigne) i kostur mini ljestvice u statičnom HTML-u. */ /* Gumb „Igraj” na mjestu naslova, desno od njega broj igrača online (29. 10. 2026.). Dok broj ne stigne, redak sa zamjenskim tekstom je nevidljiv, ali zauzima mjesto (bez skakanja rasporeda). Na uskom mobitelu broj smije prijeći ispod gumba. */ .igra-glava__gumbi { align-items: center; column-gap: 24px; row-gap: 12px; } .igra-glava__online { margin: 0; flex-wrap: nowrap; white-space: nowrap; } .igra-glava__online[hidden] { display: flex !important; visibility: hidden; } @media (max-width: 480px) { .igra-glava__gumbi { column-gap: 16px; } .igra-glava__gumbi .mv-gumb--velik { padding: 0 1.3em; } .igra-glava__online .prvenstvo__broj { font-size: calc(30px * var(--mv-skala)); } } .kostur__red { background: linear-gradient(90deg, #EEF7F8 0%, #F7FCFC 50%, #EEF7F8 100%); background-size: 200% 100%; animation: mv-kostur 1.6s ease-in-out infinite; } @keyframes mv-kostur { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { .kostur__red { animation: none; } } .stranica-404 { padding-block: 48px 64px; display: grid; gap: 16px; } .stranica-404__igre { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 8px 0 0; padding: 0; } /* ---------- Poslovni admin izvještaj ---------- */ .admin-report { min-height: 62vh; padding-block: 32px 56px; } .admin-report section { margin-top: 28px; } .admin-report__glava, .admin-report__podnaslov { display: flex; align-items: end; justify-content: space-between; gap: 20px; } .admin-report__glava h1, .admin-report__podnaslov h2 { margin-bottom: 6px; } .admin-report__glava p, .admin-report__podnaslov p { margin: 0; color: var(--mv-tekst-meta); font-weight: 700; } .admin-report__alarm { margin-top: 18px; padding: 14px 18px; border: 3px solid #B36B00; border-radius: 14px; background: #FFF7E6; color: #704400; font-weight: 800; } .admin-report .greska { margin-top: 16px; } .admin-report__sazetak { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 12px; } .admin-report__metrika { display: grid; gap: 5px; padding: 16px; } .admin-report__metrika span { color: var(--mv-tekst-meta); font-size: var(--mv-fs-meta); font-weight: 800; } .admin-report__metrika strong { color: var(--mv-dubina); font-size: calc(28px * var(--mv-skala)); font-variant-numeric: tabular-nums; } .admin-report__tablica-okvir { overflow-x: auto; padding: 0; } .admin-report__tablica { width: 100%; min-width: 980px; border-collapse: collapse; background: var(--mv-bijela); } .admin-report__tablica th, .admin-report__tablica td { padding: 10px 12px; border-bottom: 1px solid var(--mv-svijetli-tirkiz); text-align: left; vertical-align: middle; } .admin-report__tablica thead th { background: var(--mv-dubina); color: var(--mv-bijela); font-size: var(--mv-fs-meta); font-weight: 900; white-space: nowrap; } .admin-report__tablica tbody th, .admin-report__status { font-weight: 900; } .admin-report__tablica td { font-variant-numeric: tabular-nums; } .admin-report__nedostupno { color: var(--mv-tekst-meta); background: #F6F8F8; } .admin-report__grafovi { display: grid; gap: 18px; } .admin-report__grafovi--krug { grid-template-columns: repeat(3, minmax(0, 1fr)); } .admin-report__grafovi--trend { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-report__graf { min-width: 0; height: 330px; padding: 16px; } .admin-report__graf h3 { margin: 0 0 10px; font-size: calc(17px * var(--mv-skala)); } .admin-report__graf canvas { width: 100% !important; height: 270px !important; } .admin-report__graf--trend { height: 400px; } .admin-report__graf--trend canvas { height: 340px !important; } .admin-report__stanje { margin: 18px 2px 0; color: var(--mv-tekst-meta); font-size: var(--mv-fs-meta); font-weight: 700; } @media (max-width: 1000px) { .admin-report__grafovi--krug { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-report__grafovi--trend { grid-template-columns: 1fr; } } @media (max-width: 700px) { .admin-report__glava, .admin-report__podnaslov { align-items: stretch; flex-direction: column; } .admin-report__sazetak { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-report__grafovi--krug { grid-template-columns: 1fr; } .admin-report__graf { height: 310px; } .admin-report__graf canvas { height: 250px !important; } .admin-report__graf--trend { height: 370px; } .admin-report__graf--trend canvas { height: 310px !important; } } @media (max-width: 430px) { .admin-report__sazetak { grid-template-columns: 1fr; } } /* Admin: igre u pripremi (samo admin, 3. 11. 2026.) */ .admin-priprema { margin-block: 32px; } .admin-priprema__popis { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; } .admin-priprema__popis a { padding: 8px 14px 8px 8px; border: 2px solid var(--mv-svijetli-tirkiz); border-radius: 14px; font-weight: 700; text-decoration: none; color: var(--mv-dubina); } .admin-priprema__popis a:hover, .admin-priprema__popis a:focus-visible { border-color: var(--mv-tirkiz); }