/* Hitko — videz tiskane družabne igre: karton, debele obrobe, trde sence brez zabrisa. Vizualni motiv je gramofonska plošča: temna sredica igre proti svetlim karticam. Temi sta dve in se razlikujeta SAMO po paleti — konstrukcija (obrobe, radiji, zamiki senc) je skupna. Preklop je `data-tema` na , nastavi ga app.js. Imena --zelena* so slotovi za osnovno barvo teme, ne dobesedno zelena: pri Terakoti so to odtenki bora in okre. */ :root { --r-s: 8px; --r-m: 10px; --r-l: 12px; --r-xl: 14px; --preh: 0.18s cubic-bezier(0.32, 0.72, 0, 1); /* Trde sence brez zabrisa so nosilec tiskanega videza. Barvo da --crnilo. */ --senca-s: 3px 3px 0 var(--crnilo); --senca-m: 4px 4px 0 var(--crnilo); } /* ── Terakota: topla tiskana paleta, vse barve z istim podtonom ──────────── papir F2E7D5 · črnilo 2B2119 · terakota C9603C · oker DDA23E · bor 2E6B58 */ :root, :root[data-tema="terakota"] { --zelena-temna: #2E6B58; --zelena: #3A8069; --zelena-svetla: #DDA23E; --zelena-bledo: #F7E9D0; --zelena-rob: #2B2119; --crnilo: #2B2119; --besedilo: #2B2119; --besedilo-tiho: #7A6A5A; --besedilo-bledo: #A3937F; --povrsina: #FBF4E7; --ozadje: #F2E7D5; --rob: #2B2119; --poudarek: #C9603C; --poudarek-temni: #A2453A; --poudarek-bledo: #F7DECF; --na-poudarku: #FBF4E7; --rdeca: #A2453A; --rdeca-bledo: #F7DECF; --zlata: #DDA23E; --vinil: #241C15; --nalepka: #C9603C; --plosca-slika: url("/plosca-terakota.webp"); --senca-l: 0 -8px 40px rgba(43, 33, 25, 0.28); --tekstura: rgba(43, 33, 25, 0.022); /* Barva letnice po desetletju: časovnica postane berljiv barvni lok. Vse so preverjene na >= 4:1 proti --povrsina. */ --d1950: #2E6B58; --d1960: #457A50; --d1970: #62783A; --d1980: #97722A; --d1990: #BC5535; --d2000: #A2453A; --d2010: #7E4136; --d2020: #5A3A34; } /* ── Žajbelj: hladna, skoraj enobarvna paleta z eno toplo iskro ──────────── papir E6EBE3 · črnilo 1E2A25 · žajbelj 4F7A66 · gorčica D4A02F */ :root[data-tema="zajbelj"] { --zelena-temna: #34574A; --zelena: #4F7A66; --zelena-svetla: #D4A02F; --zelena-bledo: #DCE5DA; --zelena-rob: #1E2A25; --crnilo: #1E2A25; --besedilo: #1E2A25; --besedilo-tiho: #66786F; --besedilo-bledo: #93A399; --povrsina: #F4F7F2; --ozadje: #E6EBE3; --rob: #1E2A25; --poudarek: #D4A02F; --poudarek-temni: #A87B1C; --poudarek-bledo: #F0E4C6; --na-poudarku: #1E2A25; --rdeca: #A85440; --rdeca-bledo: #F0DCD5; --zlata: #D4A02F; --vinil: #182220; --nalepka: #4F7A66; --plosca-slika: url("/plosca-zajbelj.webp"); --senca-l: 0 -8px 40px rgba(30, 42, 37, 0.26); --tekstura: rgba(30, 42, 37, 0.02); --d1950: #1E3A33; --d1960: #2C5045; --d1970: #3E6A57; --d1980: #48755F; --d1990: #5E7A48; --d2000: #847932; --d2010: #8A6A24; --d2020: #7C5E3E; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--ozadje); scrollbar-width: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; } html, body { overscroll-behavior: none; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* Diagonalna nitka je komaj vidna, a papirju vzame vtis zaslona. */ background: repeating-linear-gradient(135deg, var(--tekstura) 0 2px, transparent 2px 5px), var(--ozadje); color: var(--besedilo); /* ⚠️ `dvh` na Androidu vključuje pas pod gestikulacijsko vrstico, zato je telo nekaj deset pikslov višje od vidnega polja in stran drsi po praznem. `svh` je najmanjša možna višina vidnega polja in tega ne počne. */ min-height: 100vh; min-height: 100svh; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; font-size: 16px; line-height: 1.45; } /* Na igralnem zaslonu drsenja ni: vsebina je vanj ze ujeta z `overflow: hidden`, drsel bi le prazen pas, ki ga pusti razlika med visino okna in vidnega polja. ⚠️ Zapreti je treba `html`, ne le `body` — drsi korenski element, in `overflow` samo na telesu ostane brez ucinka. */ html.brez-drsenja, html.brez-drsenja body { overflow: hidden; height: 100%; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input { font-family: inherit; } h1, h2, h3, p { margin: 0; } .skrito { display: none !important; } .container { max-width: 480px; margin: 0 auto; padding: 1.5rem 1.05rem 1.5rem; } /* Prostor za lebdečo ukazno vrstico na dnu. */ .container--z-vrstico { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); } /* ═══════════════ Splošni gradniki ═══════════════ */ .kartica { background: var(--povrsina); border: 2px solid var(--crnilo); border-radius: var(--r-l); padding: 1.05rem 1rem 1.15rem; box-shadow: var(--senca-s); margin-bottom: 1.1rem; } .kartica-naslov { font-size: 0.7rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.11em; color: var(--zelena-temna); margin-bottom: 0.85rem; } .namig { font-size: 0.78rem; color: var(--besedilo-tiho); margin-top: 0.75rem; line-height: 1.45; } /* Glavni gumb je edini kos v barvi poudarka — zato ga oko najde takoj. Ob pritisku se pomakne v svojo senco, kot da ga res potisneš v papir. */ .gumb-glavni { width: 100%; padding: 1.05rem 1.25rem; border-radius: var(--r-m); background: var(--poudarek); border: 2.5px solid var(--crnilo); color: var(--na-poudarku); font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: var(--senca-m); transition: transform var(--preh), box-shadow var(--preh), opacity var(--preh); } .gumb-glavni:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--crnilo); } .gumb-glavni:disabled { opacity: 0.45; box-shadow: var(--senca-m); } .gumb-glavni.ozek { width: auto; padding: 0.85rem 1.35rem; font-size: 0.92rem; } .gumb-tih { padding: 0.85rem 1.35rem; border-radius: var(--r-m); background: var(--povrsina); color: var(--crnilo); border: 2px solid var(--crnilo); box-shadow: 2px 2px 0 var(--crnilo); font-weight: 800; font-size: 0.92rem; transition: transform var(--preh), box-shadow var(--preh); } .gumb-tih:active { transform: translate(2px, 2px); box-shadow: none; } .gumb-dodaj { width: 100%; padding: 0.8rem; border-radius: var(--r-s); border: 2px dashed var(--crnilo); background: transparent; color: var(--crnilo); font-weight: 800; font-size: 0.88rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; transition: background var(--preh); } .gumb-dodaj:active { background: var(--zelena-bledo); } .header-btn { background: var(--povrsina); border: 2px solid var(--crnilo); padding: 0.5rem 0.95rem; border-radius: 9999px; font-weight: 800; color: var(--crnilo); font-size: 0.8rem; box-shadow: 2px 2px 0 var(--crnilo); } .icon-btn { background: var(--povrsina); border: 2px solid var(--crnilo); width: 2.3rem; height: 2.3rem; border-radius: 9999px; color: var(--crnilo); display: inline-flex; align-items: center; justify-content: center; box-shadow: 2px 2px 0 var(--crnilo); transition: transform var(--preh), box-shadow var(--preh); } .icon-btn:active { transform: translate(2px, 2px); box-shadow: none; } .napaka { color: var(--rdeca); font-size: 0.85rem; text-align: center; margin-top: 0.85rem; min-height: 1.1rem; } /* Lebdeča ukazna vrstica na dnu zaslona z nastavitvijo */ .ukazna-vrstica { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 0.85rem 1.05rem calc(0.85rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent 0%, var(--ozadje) 42%); } .ukazna-vrstica > * { max-width: 480px; margin: 0 auto; display: flex; } /* ═══════════════ Znak (glava nastavitve) ═══════════════ */ .znak-vrsta { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.6rem; } .znak-plosca { width: 3.1rem; height: 3.1rem; flex-shrink: 0; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 2px var(--crnilo), 3px 3px 0 var(--crnilo); } .znak-plosca svg { width: 100%; height: 100%; display: block; } .znak-besedilo { flex: 1; min-width: 0; } .znak-ime { font-size: 1.95rem; font-weight: 900; letter-spacing: -0.045em; color: var(--crnilo); line-height: 1; text-transform: uppercase; } .znak-podnaslov { font-size: 0.82rem; color: var(--besedilo-tiho); margin-top: 0.25rem; line-height: 1.35; } /* ═══════════════ Igralci ═══════════════ */ .igralci { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.7rem; } .igralec-vrsta { display: flex; align-items: center; gap: 0.6rem; background: var(--povrsina); border: 2px solid var(--crnilo); border-radius: var(--r-s); padding: 0.45rem 0.5rem 0.45rem 0.55rem; transition: box-shadow var(--preh); } .igralec-vrsta:focus-within { box-shadow: 2px 2px 0 var(--crnilo); } .igralec-vrsta input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 0.95rem; font-weight: 600; color: var(--besedilo); padding: 0.35rem 0; } .igralec-vrsta input:focus { outline: none; } .igralec-vrsta input::placeholder { color: var(--besedilo-bledo); font-weight: 500; } .avatar { width: 2.15rem; height: 2.15rem; flex-shrink: 0; border-radius: 50%; background: linear-gradient(140deg, var(--zelena) 0%, var(--zelena-temna) 100%); color: var(--povrsina); font-weight: 800; font-size: 0.88rem; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--crnilo); box-shadow: 2px 2px 0 var(--crnilo); } .odstrani { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 8px; color: var(--besedilo-bledo); display: inline-flex; align-items: center; justify-content: center; transition: background var(--preh), color var(--preh); } .odstrani:active { background: var(--rdeca-bledo); color: var(--rdeca); } /* ═══════════════ Paketi glasbe ═══════════════ */ .paketi { display: flex; flex-direction: column; gap: 0.5rem; } .paket { display: flex; align-items: center; gap: 0.75rem; text-align: left; padding: 0.75rem 0.85rem; border-radius: var(--r-s); border: 2px solid var(--crnilo); background: var(--povrsina); transition: background var(--preh), box-shadow var(--preh); } .paket-ikona { width: 2.3rem; height: 2.3rem; flex-shrink: 0; border-radius: 8px; background: var(--zelena-bledo); color: var(--zelena-temna); border: 1.5px solid var(--crnilo); display: inline-flex; align-items: center; justify-content: center; transition: background var(--preh), color var(--preh); } .paket-ikona svg { width: 18px; height: 18px; } .paket-besedilo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; } .paket-ime { font-size: 0.93rem; font-weight: 700; color: var(--besedilo); } .paket-stevilo { font-size: 0.76rem; color: var(--besedilo-tiho); font-variant-numeric: tabular-nums; } .paket .kljukica { width: 1.35rem; height: 1.35rem; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--crnilo); background: var(--povrsina); position: relative; transition: background var(--preh); } .paket.izbrana { background: var(--zelena-bledo); box-shadow: 3px 3px 0 var(--crnilo); } .paket.izbrana .paket-ikona { background: var(--zelena); color: var(--povrsina); } .kljukica::after { content: ''; position: absolute; inset: 0; background: no-repeat center/0.72rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); opacity: 0; transition: opacity var(--preh); } .izbrana .kljukica { background: var(--zelena); } .izbrana .kljukica::after { opacity: 1; } /* ═══════════════ Segmentni izbirnik (dolžina odseka) ═══════════════ */ .segment { display: flex; gap: 0.3rem; padding: 0.3rem; background: var(--zelena-bledo); border: 2px solid var(--crnilo); border-radius: var(--r-s); } .segment button { flex: 1; padding: 0.6rem 0.25rem; border-radius: 6px; font-size: 0.88rem; font-weight: 800; color: var(--besedilo-tiho); font-variant-numeric: tabular-nums; transition: background var(--preh), color var(--preh), box-shadow var(--preh); } /* ⚠️ Izbrani gumb je bil svetel na svetli podlagi in se je zlil z njo — na posnetku telefona je bilo videti, kot da izbire sploh ni. Obrobo naredimo z `inset` senco in ne z `border`: obroba bi gumbu dodala 4 px in vsi štirje bi se ob vsaki izbiri prestavili. */ .segment button.izbrana { background: var(--povrsina); color: var(--crnilo); box-shadow: inset 0 0 0 2px var(--crnilo), 2px 2px 0 var(--crnilo); } /* ═══════════════ Načini ═══════════════ */ .nacini { display: flex; flex-direction: column; gap: 0.5rem; } .nacin { display: flex; flex-direction: column; gap: 0.15rem; text-align: left; padding: 0.75rem 0.85rem; border-radius: var(--r-s); border: 2px solid var(--crnilo); background: var(--povrsina); transition: background var(--preh), box-shadow var(--preh); } .nacin-glava { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .nacin-glava strong { font-size: 0.93rem; font-weight: 700; } .nacin-opis { font-size: 0.76rem; color: var(--besedilo-tiho); } .nacin .kljukica { width: 1.25rem; height: 1.25rem; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--crnilo); background: var(--povrsina); position: relative; transition: background var(--preh); } .nacin.izbrana { background: var(--zelena-bledo); box-shadow: 3px 3px 0 var(--crnilo); } .nacin.izbrana strong { color: var(--crnilo); } .nacin.izbrana .kljukica { background: var(--zelena); } /* ═══════════════ Drsniki ═══════════════ */ .drsnik { display: block; margin-bottom: 1.1rem; } .drsnik:last-child { margin-bottom: 0.15rem; } .drsnik-glava { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.5rem; } .drsnik-oznaka { font-size: 0.82rem; color: var(--besedilo-tiho); font-weight: 600; } .drsnik-vrednost { font-size: 1.05rem; font-weight: 900; color: var(--crnilo); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .drsnik input[type="range"] { width: 100%; height: 22px; background: transparent; appearance: none; -webkit-appearance: none; } /* --delez nastavi app.js ob vsakem premiku: prehojeni del proge je zelen. */ .drsnik input[type="range"] { --delez: 0%; --proga: linear-gradient(90deg, var(--zelena) 0 var(--delez), var(--zelena-bledo) var(--delez) 100%); } .drsnik input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--proga); border: 2px solid var(--crnilo); box-sizing: content-box; } .drsnik input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--proga); border: 2px solid var(--crnilo); box-sizing: content-box; } .drsnik input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; margin-top: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--povrsina); border: 2.5px solid var(--crnilo); box-shadow: 2px 2px 0 var(--crnilo); cursor: grab; } .drsnik input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--crnilo); background: var(--povrsina); box-shadow: 2px 2px 0 var(--crnilo); cursor: grab; } /* ═══════════════ Igra: glava ═══════════════ */ /* Igralni zaslon je natanko en zaslon visok in se navpično NE premika: ukazna vrstica je zadnji element stolpca, ne lebdeči sloj čez vsebino. Le tako se ne more zaleteti v časovnico (kartice imajo krmilo, ki visi čez spodnji rob). Vodoravno drsi samo časovnica. */ #zaslon-igra:not(.skrito) { display: flex; flex-direction: column; height: 100vh; height: 100svh; overflow: hidden; /* Plošča se ukloni nizkim zaslonom, da vse ostane znotraj višine. */ --plosca: clamp(112px, 21dvh, 190px); } #zaslon-igra > .container { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; padding-bottom: 0.35rem; } /* Obroč napredka sega 8px čez ploščo, senca še dlje — brez tega odmika se gramofon ob tesni postavitvi zaleti v pas z rezultati nad njim. */ #zaslon-igra .gramofon { margin-top: auto; padding-top: 1.6rem; flex-shrink: 0; } #zaslon-igra /* Vpogled v tujo časovnico: prekinjena obroba pove, da to ni igralno polje. Brez tega je zaslon videti kot poteza, ki ji manjkajo reže. */ .casovnica-ovoj.vpogled { outline: 2px dashed var(--zelena-temna); outline-offset: -2px; border-radius: var(--r-m); opacity: 0.92; } .casovnica-prazna { padding: 2.2rem 1rem; color: var(--besedilo-tiho); font-size: 0.9rem; text-align: center; width: 100%; } .casovnica-ovoj { margin-bottom: auto; flex-shrink: 0; } /* Ukazi so del stolpca, ne lebdeči pas — nič pod njimi ni skrito. */ #zaslon-igra .ukazna-vrstica { position: static; flex-shrink: 0; background: var(--ozadje); padding-top: 0.35rem; } .igra-glava { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.35rem; } .na-potezi { display: flex; align-items: center; gap: 0.6rem; min-width: 0; } .na-potezi .avatar { width: 2.5rem; height: 2.5rem; font-size: 1rem; } .na-potezi-besedilo { display: flex; flex-direction: column; min-width: 0; } .na-potezi-oznaka { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.11em; color: var(--besedilo-bledo); } .na-potezi-ime { font-size: 1.05rem; font-weight: 750; letter-spacing: -0.015em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .glava-desno { display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0; } .zetoni { display: inline-flex; gap: 0.2rem; } /* Žetoni v glavi so gumb: odprejo list, ki pove, kaj z njimi. */ .zetoni-gumb { display: inline-flex; align-items: center; gap: 0.2rem; min-height: 2.3rem; padding: 0 0.7rem; border-radius: 9999px; background: var(--povrsina); border: 2px solid var(--crnilo); box-shadow: 2px 2px 0 var(--crnilo); transition: transform var(--preh), box-shadow var(--preh); } .zetoni-gumb:active { transform: translate(2px, 2px); box-shadow: none; } /* Pregled rezultatov: vodoravni pas kartic vseh igralcev. */ .rezultati { display: flex; gap: 0.45rem; overflow-x: auto; scrollbar-width: none; margin: 0 -1.05rem; padding: 0 1.05rem 0.15rem; } .rezultati::-webkit-scrollbar { display: none; } /* Kartica je gumb: tap nanjo pokaže časovnico tistega igralca. Zato ima tudi `text-align: left` in `font: inherit` — brez tega bi brskalnik gumbu vsilil svojo pisavo in sredinsko poravnavo. */ .rezultat { flex: 1 1 0; min-width: 5.2rem; background: var(--povrsina); border: 2px solid var(--crnilo); border-radius: var(--r-s); padding: 0.5rem 0.6rem; box-shadow: var(--senca-s); display: flex; flex-direction: column; gap: 0.1rem; text-align: left; font: inherit; color: inherit; transition: transform var(--preh), box-shadow var(--preh); } .rezultat:active { transform: translate(2px, 2px); box-shadow: none; } .rezultat-ime { font-size: 0.68rem; font-weight: 800; color: var(--besedilo-tiho); text-transform: uppercase; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rezultat-stanje { display: flex; align-items: baseline; gap: 0.15rem; } .rezultat-kartic { font-size: 1.15rem; font-weight: 850; color: var(--besedilo); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; } .rezultat-cilj { font-size: 0.72rem; font-weight: 650; color: var(--besedilo-bledo); } /* Igralec na potezi je edina kartica v barvi poudarka. */ .rezultat.akt { background: var(--poudarek); } .rezultat.akt .rezultat-ime, .rezultat.akt .rezultat-kartic, .rezultat.akt .rezultat-cilj { color: var(--na-poudarku); } /* Katera časovnica je na zaslonu. Ko gledaš tujo, mora biti oboje razvidno hkrati: kdo je na potezi (barva poudarka) in v kaj gledaš (obroba). */ .rezultat.gledan { box-shadow: inset 0 0 0 2px var(--zelena-temna), var(--senca-s); } .rezultat.akt.gledan { box-shadow: var(--senca-s); } /* Napredek proti cilju kot tanka črta pod številko. */ .rezultat-proga { height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.16); margin-top: 0.35rem; overflow: hidden; } .rezultat-proga span { display: block; height: 100%; border-radius: 2px; background: var(--crnilo); transition: width var(--preh); } .rezultat.akt .rezultat-proga span { background: var(--na-poudarku); } /* ── Valuti ─────────────────────────────────────────────────────────────── Žeton in nota sta risana vektorsko (simbola #sim-zeton in #sim-nota v index.html), ne s `clip-path` in gradienti. Razlog je merilo: isti znak nastopa pri 11 px v glavi in pri 28 px v listu, oblikovani rob pa se je pri večji meri razlezel. Barve simbol pobere iz teme prek `var()` — te se skozi dedujejo, zato risbe ni treba podvajati za vsako paleto. */ .zeton-pika, .nota-pika { width: 0.78rem; height: 0.78rem; flex-shrink: 0; display: inline-block; vertical-align: -0.15em; overflow: visible; } /* Nota je ozka risba, zato pri isti širini kot okrogel kovanec deluje drobnejša — optično jo izenačimo z nekaj odstotki več. */ .nota-pika, .nota-prazen { width: 0.92rem; height: 0.92rem; } /* Prazno mesto: ista risba, le pobledela — oblika mora ostati ista, sicer se bere kot druga valuta. */ .zeton-prazen, .nota-prazen { width: 0.78rem; height: 0.78rem; flex-shrink: 0; display: inline-block; vertical-align: -0.15em; opacity: 0.24; } /* ═══════════════ Igra: gramofon ═══════════════ */ .gramofon { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.2rem; } .plosca { position: relative; width: var(--plosca, 190px); height: var(--plosca, 190px); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform var(--preh); } .plosca:active { transform: scale(0.97); } .plosca:disabled { opacity: 0.55; } /* Sama plošča: slika vinila v visoki ločljivosti (public/plosca-*.webp, 1024 px), ena na temo. Prej so bili utori narisani s `repeating-radial-gradient`: barvni prehodi v prelivih niso glajeni, zato so se na gostih obročih videle stopnice in moiré. Slika se pomanjša z glajenjem in ostane čista tudi pri 3x zaslonu. Senca pod ploščo je namenoma odsotna — plošča leži na papirju, ne lebdi nad njim. */ .plosca-disk { position: absolute; inset: 9px; border-radius: 50%; /* Barva pod sliko: dokler se slika nalaga, je plosca ze crn vinil in ne luknja. */ background: var(--plosca-slika) center / 100% 100% no-repeat, var(--vinil); box-shadow: inset 0 0 0 2px var(--crnilo); } .plosca.vrti .plosca-disk { animation: vrti 2.6s linear infinite; } @keyframes vrti { to { transform: rotate(360deg); } } /* Ikona v sredini se ne vrti. Ni bel trikotnik na nalepki, ampak znak, ki je videti **natisnjen na ploščo**: papirnata ploskev, obroba iz črnila in trda senca brez zabrisa — isti jezik kot gumbi drugod po aplikaciji. ⚠️ Senca je `drop-shadow`, ne `box-shadow`: slediti mora obliki trikotnika, ne njegovemu očrtanemu kvadratu. ⚠️ Znak ostane znotraj zlatega obroča nalepke (~33 % premera plošče), zato je širina omejena s `clamp` — pri golem odstotku bi na velikem zaslonu zlezel čez obroč, na nizkem pa se skrčil pod berljivost. Papir z obrobo iz črnila drži kontrast tudi na temnejši žajbelj nalepki, kjer bi sam papir zbledel. */ .plosca-ikona { position: relative; z-index: 2; width: clamp(24px, 22%, 40px); aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; filter: drop-shadow(1.6px 1.6px 0 var(--crnilo)); transition: transform var(--preh), filter var(--preh); } .plosca-ikona svg { width: 100%; height: 100%; display: block; } .plosca-ikona path, .plosca-ikona rect { fill: var(--povrsina); stroke: var(--crnilo); stroke-width: 2.2; stroke-linejoin: round; } /* Pritisk senco pogoltne — enako kot pri kartonskih gumbih. */ .plosca:active .plosca-ikona { transform: translate(1.6px, 1.6px); filter: none; } /* Med vrtenjem s prstom plošča ni gumb; znak naj ob vsakem dotiku ne poskakuje. */ .plosca.vrtim .plosca-ikona { transform: none; filter: drop-shadow(1.6px 1.6px 0 var(--crnilo)); } /* Ročica z iglo: v mirovanju je odmaknjena, med predvajanjem se spusti na ploščo. Motiv gramofona je bil brez nje nedokončan. Ovoj drži iglo v koordinatah plošče, zato se skupaj z njo skrči na nizkih zaslonih. */ .gramofon-plosca { position: relative; width: var(--plosca, 190px); height: var(--plosca, 190px); } .igla { position: absolute; top: -6%; right: -13%; z-index: 4; width: 58%; height: 58%; pointer-events: none; transform-origin: 84% 16%; /* V mirovanju je igla odmaknjena z plošče, med predvajanjem stoji na zunanjem utoru. Kota sta izbrana tako, da konica pristane na vinilu in ne na nalepki ali čez ikono v sredini. */ transform: rotate(-42deg); transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1); } .igla svg { width: 100%; height: 100%; display: block; overflow: visible; } .gramofon.igra .igla { transform: rotate(2deg); } /* Ročica je svetla z debelo temno obrobo: tako se vidi na črnem vinilu in na papirju. Barvo dobi le glava z iglo — edini del, ki se plošče res dotika. */ .i-rocica-obroba { stroke: var(--crnilo); stroke-width: 12; stroke-linecap: round; } .i-rocica { stroke: var(--povrsina); stroke-width: 5.5; stroke-linecap: round; } .i-glava { fill: var(--poudarek); stroke: var(--crnilo); stroke-width: 3.5; } .i-konica { stroke: var(--crnilo); stroke-width: 3.5; stroke-linecap: round; } .i-os { fill: var(--povrsina); stroke: var(--crnilo); stroke-width: 4; } .i-vijak { fill: var(--crnilo); } .obroc { position: absolute; inset: -8px; transform: rotate(-90deg); pointer-events: none; } .obroc circle { fill: none; stroke-width: 5; } .obroc-ozadje { stroke: var(--zelena-bledo); } .obroc-napredek { stroke: var(--poudarek); stroke-linecap: round; stroke-dasharray: 439.8; stroke-dashoffset: 439.8; transition: stroke-dashoffset 0.12s linear; } .predvajalnik-info { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; margin-top: 0.85rem; } .cas { display: inline-flex; align-items: baseline; gap: 0.25rem; font-size: 1.5rem; font-weight: 900; color: var(--crnilo); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; } .cas-skupaj { font-size: 0.88rem; font-weight: 650; color: var(--besedilo-bledo); } .stanje { font-size: 0.8rem; color: var(--besedilo-tiho); } /* Prostor za natanko eno vrstico drzi tudi, ko je navodilo prazno: sicer bi se ob vsakem koraku poteze premaknila cela postavitev, casovnica z njo. Zato so besedila kratka — v verzalkah se daljse na 360 px prelomi. */ .navodilo { text-align: center; font-size: 0.92rem; font-weight: 900; color: var(--besedilo); margin-bottom: 0.9rem; text-transform: uppercase; letter-spacing: 0.02em; min-height: 1.35em; } /* ═══════════════ Igra: časovnica ═══════════════ */ /* Zgornji in spodnji rob sta radodarna: ob razkritju kartica malo zraste in zasije, ovoj pa vodoravno drsi (overflow-y bi jo sicer odrezal). Spodaj mora biti prostora za senco krmila: `overflow-x: auto` prisili `overflow-y` v clip, zato bi se senca odrezala v ostro belo črto. */ .casovnica-ovoj { overflow-x: auto; overflow-y: hidden; margin: 0 -1.05rem; padding: 1.1rem 1.05rem 2.2rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .casovnica-ovoj::-webkit-scrollbar { display: none; } .casovnica { display: flex; align-items: stretch; gap: 0.55rem; width: max-content; margin: 0 auto; min-height: 150px; } .kartica-pesem { position: relative; width: 118px; flex-shrink: 0; background: var(--povrsina); border: 2.5px solid var(--crnilo); border-radius: var(--r-m); overflow: hidden; box-shadow: var(--senca-m); display: flex; flex-direction: column; } /* Pas z letnico nosi barvo desetletja: časovnica postane berljiv barvni lok in luknje v zbirki se vidijo na prvi pogled. --leto-barva nastavi razred .d19xx, ki ga na kartico obesi app.js. Rezerva je barva teme. */ .kp-leto { background: var(--leto-barva, var(--zelena-temna)); color: var(--povrsina); font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; text-align: center; padding: 0.6rem 0.3rem 0.55rem; line-height: 1; border-bottom: 2.5px solid var(--crnilo); font-variant-numeric: tabular-nums; } .d1950 { --leto-barva: var(--d1950); } .d1960 { --leto-barva: var(--d1960); } .d1970 { --leto-barva: var(--d1970); } .d1980 { --leto-barva: var(--d1980); } .d1990 { --leto-barva: var(--d1990); } .d2000 { --leto-barva: var(--d2000); } .d2010 { --leto-barva: var(--d2010); } .d2020 { --leto-barva: var(--d2020); } /* Klasika: desetletja tu nič ne povedo, zato barvamo po glasbenih obdobjih. Barve so iste štiri kot pri desetletjih, le razporejene čez daljši lok. */ .o-barok { --leto-barva: var(--d1950); } .o-klasicizem { --leto-barva: var(--d1970); } .o-romantika { --leto-barva: var(--d1990); } .o-moderna { --leto-barva: var(--d2010); } .kp-telo { position: relative; flex: 1; padding: 0.5rem 0.45rem 0.55rem; display: flex; flex-direction: column; gap: 0.1rem; align-items: center; text-align: center; justify-content: flex-end; } /* Naslovnica albuma pod besedilom: iz kartic naredi zbirko plošč, ne belega prostora. Preliv proti spodnjemu robu drži naslov berljiv na vsaki sliki. */ .kp-slika { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: grayscale(0.45) contrast(0.92); } /* Preliv doseze poln papir ze na 45 %, da dvovrsticni naslov nikoli ne pade na temno naslovnico. Slika ostane vidna v zgornji tretjini kartice. */ .kp-slika::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, var(--povrsina) 45%); } .kp-naslov { position: relative; z-index: 1; font-size: 0.72rem; font-weight: 800; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .kp-izvajalec { position: relative; z-index: 1; font-size: 0.64rem; color: var(--besedilo-tiho); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; } .kartica-pesem.nova { animation: pojavi 0.42s cubic-bezier(0.34, 1.36, 0.64, 1); } .kartica-pesem.nova::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-m); box-shadow: inset 0 0 0 3px var(--poudarek); pointer-events: none; } @keyframes pojavi { from { transform: scale(0.78) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } } /* Reža med karticami: pas z gumbom + na sredini. 44px zaradi zadetka s prstom. */ .reza { width: 40px; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; /* Sirina, notranji rob in margina so v prehodu, ker se reza ob zaklepu postavitve sesede, ne izbrise. */ transition: opacity 0.16s ease, width 0.36s cubic-bezier(0.5, 0, 0.2, 1), padding 0.36s cubic-bezier(0.5, 0, 0.2, 1), margin 0.36s cubic-bezier(0.5, 0, 0.2, 1); } .reza::before { content: ''; position: absolute; top: 12%; bottom: 12%; left: 50%; width: 2px; margin-left: -1px; border-radius: 1px; background: repeating-linear-gradient(180deg, var(--crnilo) 0 4px, transparent 4px 9px); opacity: 0.32; } .reza-znak { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: var(--povrsina); color: var(--crnilo); border: 2px solid var(--crnilo); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; font-weight: 900; line-height: 1; box-shadow: 0 0 0 4px var(--ozadje), 2px 2px 0 var(--crnilo); transition: transform var(--preh), background var(--preh), color var(--preh); } .reza:active .reza-znak { transform: scale(1.18); background: var(--poudarek); color: var(--na-poudarku); } /* ⚠️ Zaklep postavitve rez NE odstrani, ampak jim sesede sirino na nic. Ce bi jih izris preprosto izpustil, bi se cela vrsta v enem okvirju stisnila za 40 px na rezo — prav tisti grobi preskok, ki ga tu ni. Zato jih `izrisiCasovnico()` izrise vedno, ob preklopu stanja pa poskrbi `izrisiCasovnicoMehko()` / `zakleniCasovnico()`, da se sirina spremeni na ze izrisani vrsti. */ /* ⚠️ `min-width: 0` je nujen: privzeti `min-width: auto` flex elementa ga drzi pri sirini vsebine (gumb +) in reza bi tudi zaklenjena ostala ~12 px siroka. Gumb ima tudi privzeti `padding` brskalnika (1px 6px) — pri `box-sizing: border-box` ga sirina 0 ne more poziniti, zato ga tu izrecno umaknemo. `overflow: hidden` samo tu, ker bi sicer odrezal senco gumba v odprti vrsti. */ .casovnica.zaklenjena .reza { width: 0; min-width: 0; padding: 0; overflow: hidden; /* Negativna margina poje se enega od obeh razmikov (`gap: 0.55rem`), sicer bi sosednji kartici ostali dvakrat tako narazen kot brez reze. */ margin-left: -0.55rem; opacity: 0; pointer-events: none; } .casovnica.zaklenjena .reza-znak { transform: scale(0.4); } /* ═══════════════ Skrivnostna kartica (postavitev in obrat) ═══════════════ */ /* Kartica, ki jo igralec postavlja: leži s hrbtom navzgor in se ob razkritju obrne. Ovoj je prozoren — vidno je le tisto od obeh strani, ki je obrnjeno k nam. */ .kartica-pesem.skrivnost { background: none; border: none; box-shadow: none; overflow: visible; perspective: 900px; animation: pojavi 0.34s cubic-bezier(0.34, 1.36, 0.64, 1); } .kp-flip { position: relative; flex: 1; transform-style: preserve-3d; transition: transform 0.72s cubic-bezier(0.5, 0.05, 0.2, 1); } .skrivnost.obrnjena .kp-flip { transform: rotateY(180deg); } /* Kratek poklon ob potrditvi: kartica se posede na mesto, da je zaklep viden tudi takrat, ko je reza ob njej edina in se vrsta skoraj ne premakne. */ .skrivnost.zaklepa { animation: usedi 0.44s cubic-bezier(0.3, 1.4, 0.5, 1); } @keyframes usedi { 0% { transform: scale(1); } 38% { transform: scale(0.93) translateY(4px); } 100% { transform: scale(1); } } .kp-stran { position: absolute; inset: 0; z-index: 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--r-m); overflow: hidden; background: var(--povrsina); border: 2.5px solid var(--crnilo); box-shadow: var(--senca-m); display: flex; flex-direction: column; } .kp-lice { transform: rotateY(180deg); } /* Hrbet: temna plošča na progastem tisku, enak motiv kot ikona aplikacije. */ .kp-hrbet { align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, var(--zelena-temna) 0 9px, var(--zelena) 9px 18px); color: var(--povrsina); } .hrbet-plosca { width: 62%; opacity: 0.9; } .hrbet-znak { position: absolute; font-size: 1.5rem; font-weight: 850; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); } /* Kolut s števkami: trak se dvakrat zavrti in obstane na pravi števki. */ .kp-leto .stevka { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; } .kp-leto .trak { display: block; transform: translateY(0); transition: transform 1.05s cubic-bezier(0.22, 0.72, 0.16, 1); } .kp-leto .trak b { display: block; height: 1em; line-height: 1; font-weight: inherit; } .skrivnost.obrnjena .kp-leto .trak { transform: translateY(-20em); } /* Sij, ki plane izpod kartice v trenutku obrata. */ .skrivnost::before { content: ''; position: absolute; inset: -18px; z-index: 0; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, var(--zlata) 0%, transparent 68%); } .skrivnost.obrnjena::before { animation: sij 1.4s ease-out; } @keyframes sij { 0% { opacity: 0; transform: scale(0.55); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } } /* Krmilo za prestavljanje kartice po časovnici. */ /* Krmilo visi čez spodnji rob kartice, da ne zakriva njenega lica. */ .krmilo { position: absolute; left: 50%; bottom: -22px; z-index: 3; transform: translateX(-50%); display: flex; gap: 0.4rem; } .krmilo-gumb { width: 38px; height: 38px; border-radius: 50%; background: var(--povrsina); color: var(--crnilo); border: 2px solid var(--crnilo); /* Nizka senca namenoma: visoka bi segla čez rob drsnega ovoja in se odrezala. */ box-shadow: 2px 2px 0 var(--crnilo); font-size: 1.3rem; font-weight: 900; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--preh), opacity var(--preh); } .krmilo-gumb:active { transform: scale(0.9); background: var(--zelena-bledo); } .krmilo-gumb:disabled { opacity: 0.3; } /* Krmilo se ob zaklepu posede pod kartico, namesto da bi izginilo v enem okvirju. */ .krmilo { transition: opacity 0.18s ease, transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); } .casovnica.zaklenjena .krmilo { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-10px) scale(0.5); } /* Žig, ki se zabije čez spodnji rob kartice (sredine ne zakrije — tam je naslov). */ /* Besedilo na licu ima pod seboj zrak, sicer žig prekrije izvajalca. Velja samo za kartico na odru razkritja — kartice na časovnici žiga nimajo. */ .kp-lice .kp-telo { padding-bottom: 1.5rem; } .zig { position: absolute; left: 50%; bottom: -16px; z-index: 4; transform: translate(-50%, 0) rotate(-6deg); padding: 0.3rem 0.72rem; border-radius: 9px; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; border: 2.5px solid currentColor; background: var(--povrsina); animation: zabij 0.42s cubic-bezier(0.2, 1.5, 0.4, 1); } .zig.pravilno { color: var(--zelena-temna); } .zig.napacno { color: var(--rdeca); } @keyframes zabij { from { transform: translate(-50%, 0) rotate(-6deg) scale(2.7); opacity: 0; } to { transform: translate(-50%, 0) rotate(-6deg) scale(1); opacity: 1; } } .skrivnost.potrjena .kp-lice { box-shadow: var(--senca-m), inset 0 0 0 3px var(--zlata); } .skrivnost.zavrnjena .kp-stran { filter: saturate(0.3); } /* Ukazi poteze (potrdi / razkrij). Prostor drži tudi, ko gumba ni: sicer bi časovnica poskočila gor in dol ob vsakem koraku poteze. */ .ukazi-vrsta { gap: 0.6rem; min-height: 3.55rem; } /* Med vpogledom je v vrstici en sam gumb — brez tega bi obvisel ob levem robu. */ .ukazi-vrsta:has(> #zapri-vpogled:not(.skrito)) { justify-content: center; } #igra-ukazi.prazna { visibility: hidden; } #preklici-postavitev { flex-shrink: 0; padding-left: 1.05rem; padding-right: 1.05rem; } /* Razkritje je drug korak kot potrditev — dobi barvo teme, ne poudarka. */ .gumb-glavni.razkrij { background: var(--zelena-temna); color: var(--povrsina); } /* ═══════════════ Skupno: zastor in spodnji list ═══════════════ */ .zastor { position: fixed; inset: 0; z-index: 40; background: rgba(22, 33, 28, 0.42); backdrop-filter: blur(2px); animation: zabledi 0.22s ease; } @keyframes zabledi { from { opacity: 0; } to { opacity: 1; } } .list { position: fixed; left: 0; right: 0; bottom: 0; z-index: 42; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--povrsina); overflow: hidden; border-top: 2.5px solid var(--crnilo); box-shadow: var(--senca-l); animation: pridrsi 0.34s cubic-bezier(0.32, 0.72, 0, 1); max-height: 92dvh; overflow-y: auto; } @keyframes pridrsi { from { transform: translateY(100%); } to { transform: none; } } .list-vsebina { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; padding: 0.6rem 1.15rem calc(1.35rem + env(safe-area-inset-bottom)); text-align: center; } .list-rocaj { width: 38px; height: 4px; border-radius: 2px; margin: 0 auto 0.9rem; background: var(--crnilo); opacity: 0.25; } .izid { display: flex; width: fit-content; margin: 0 auto 0.8rem; align-items: center; gap: 0.4rem; padding: 0.32rem 0.85rem 0.32rem 0.6rem; border-radius: 9999px; font-size: 0.74rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.07em; border: 2px solid currentColor; } .izid.pravilno { background: var(--zelena-bledo); color: var(--zelena-temna); } .izid.napacno { background: var(--rdeca-bledo); color: var(--rdeca); } .izid.darilo { background: var(--poudarek-bledo); color: var(--poudarek-temni); } .izid svg { width: 15px; height: 15px; } /* ═══════════════ List z žetoni ═══════════════ */ .list-naslov { font-size: 1.2rem; font-weight: 900; letter-spacing: 0.01em; text-transform: uppercase; color: var(--crnilo); margin-bottom: 1rem; } .zetoni-veliki { display: flex; gap: 0.45rem; justify-content: center; margin-bottom: 0.75rem; } /* V listu s pravili sta valuti velika znaka: isti vektorski risbi, le večji. */ .zeton-velik, .nota-velika { width: 1.75rem; height: 1.75rem; flex-shrink: 0; display: block; overflow: visible; } .nota-velika { width: 2rem; height: 2rem; } .zeton-velik.prazen, .nota-velika.prazen { opacity: 0.24; } /* ⚠️ V načinu pro sta vrsti valut eno pod drugo — deset znakov v isti vrstici se na telefonu prelomi in zadnja nota konča sama pod prvo vrsto. Navpičnosti pa NE smemo dati ovoju: v osnovnem načinu je v njem le pet žetonov in ti se v `column` postavijo eden pod drugega. Zato vrsti ločimo z `flex-basis: 100%`, ovoj pa ostane vodoraven. */ .zetoni-veliki { flex-wrap: wrap; row-gap: 0.4rem; } .velika-vrsta { display: flex; gap: 0.45rem; flex-basis: 100%; justify-content: center; } .zetoni-stanje { font-size: 0.85rem; color: var(--besedilo-tiho); margin-bottom: 1.1rem; } .zetoni-pravila { list-style: none; margin: 0 0 1.2rem; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 0.6rem; } .zetoni-pravila li { position: relative; padding-left: 1.35rem; font-size: 0.85rem; line-height: 1.4; color: var(--besedilo-tiho); } /* Postavki o žetonu in noti nosita risbo valute — ta je njuna oznaka, zato pike ne dobita, sicer sta pred besedilom dva znaka. */ .zetoni-pravila li.z-znakom { padding-left: 1.7rem; } .zetoni-pravila li.z-znakom::before { display: none; } .zetoni-pravila li.z-znakom > svg { position: absolute; left: 0; top: 0.05em; width: 1.25rem; height: 1.25rem; } .zetoni-pravila li::before { content: ''; position: absolute; left: 0.1rem; top: 0.5em; width: 0.34rem; height: 0.34rem; border-radius: 50%; background: var(--besedilo-bledo); } .zetoni-pravila strong { color: var(--besedilo); } .gumb-tih.siroki { width: 100%; margin-top: 0.6rem; } /* ═══════════════ Potrditev ═══════════════ */ .potrditev-opis { font-size: 0.88rem; color: var(--besedilo-tiho); margin-bottom: 1.2rem; } .gumb-glavni.nevaren { background: var(--rdeca); color: var(--povrsina); } .zeton-vprasanje { border-top: 1px solid var(--rob); padding-top: 1rem; margin-bottom: 0.85rem; } .zeton-vprasanje p { font-size: 0.88rem; font-weight: 650; color: var(--besedilo-tiho); margin-bottom: 0.8rem; } .zeton-gumbi { display: flex; gap: 0.6rem; justify-content: center; } /* ═══════════════ Konec igre ═══════════════ */ .konec { text-align: center; padding-top: 3rem; } .pokal { width: 4.6rem; height: 4.6rem; border-radius: 50%; margin: 0 auto 1.1rem; background: linear-gradient(140deg, #F7E4B4, var(--zlata)); color: var(--crnilo); display: inline-flex; align-items: center; justify-content: center; border: 2.5px solid var(--crnilo); box-shadow: 4px 4px 0 var(--crnilo); } .konec-naslov { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; color: var(--crnilo); } .konec-podnaslov { font-size: 0.88rem; color: var(--besedilo-tiho); margin-top: 0.3rem; } .koncna-lestvica { display: flex; flex-direction: column; gap: 0.5rem; margin: 1.7rem 0 1.5rem; } .lestvica-vrsta { display: flex; align-items: center; gap: 0.7rem; background: var(--povrsina); border: 2px solid var(--crnilo); border-radius: var(--r-s); padding: 0.7rem 0.85rem; box-shadow: var(--senca-s); text-align: left; } .mesto { width: 1.75rem; height: 1.75rem; flex-shrink: 0; border-radius: 50%; background: var(--zelena-bledo); color: var(--crnilo); border: 2px solid var(--crnilo); font-size: 0.8rem; font-weight: 900; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; } .lestvica-ime { flex: 1; min-width: 0; font-weight: 700; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lestvica-meta { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; } .lestvica-kartic { font-size: 0.82rem; color: var(--besedilo-tiho); font-variant-numeric: tabular-nums; } .lestvica-vrsta.zmagovalec { background: var(--poudarek); box-shadow: var(--senca-m); } .lestvica-vrsta.zmagovalec .mesto { background: var(--zlata); } .lestvica-vrsta.zmagovalec .lestvica-ime, .lestvica-vrsta.zmagovalec .lestvica-kartic { color: var(--na-poudarku); } /* ═══════════════ Oder razkritja (naslovnica čez zaslon) ═══════════════ */ /* Kartica prileti iz časovnice na ta sloj, iz nje pa se razlije naslovnica albuma čez cel zaslon. Vse je fiksno na okno, ker časovnica vodoravno drsi in bi kartico sicer odrezala. */ .oder-razkritja { position: fixed; inset: 0; z-index: 60; } .or-zastor { position: absolute; inset: 0; z-index: 0; background: rgba(12, 20, 16, 0.55); animation: zabledi 0.35s ease; } .or-naslovnica { position: fixed; z-index: 1; border-radius: var(--r-m); opacity: 0; background-size: cover; background-position: center; background-color: var(--vinil); transition: transform 0.78s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.5s ease, border-radius 0.6s ease, filter 0.7s ease; } /* Filter deluje v lastnem koordinatnem prostoru elementa, torej ga povečava pomnoži: 3,5 px lokalno da ~30 px na zaslonu. Večja vrednost bi naredila prosojen rob čez pol zaslona. */ .or-naslovnica.razlito { opacity: 1; filter: blur(3.5px) saturate(1.5); border-radius: 0; } /* Prek naslovnice gre temna kopreha, sicer bi bilo belo besedilo neberljivo. */ .or-tema { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity 0.6s ease; background: linear-gradient(180deg, rgba(10, 18, 14, 0.28) 0%, rgba(10, 18, 14, 0.50) 48%, rgba(10, 18, 14, 0.76) 100%); } .or-tema.vidno { opacity: 1; } .or-sloj { position: absolute; inset: 0; z-index: 3; } /* Izid je na kartici kot žig; tu se pokaže samo pri kartici, kupljeni z žetoni. */ .or-podatki { position: absolute; left: 0; right: 0; top: 52%; z-index: 4; text-align: center; color: #fff; padding: 0 1.2rem; } .or-podatki .izid { opacity: 0; transition: opacity 0.4s ease 0.12s; } .podatki-vidni .or-podatki .izid { opacity: 1; } /* Letnica se izpiše z brisom od leve — kot da jo nekdo napiše čez naslovnico. */ .or-leto { font-size: clamp(3rem, 15vw, 4.2rem); font-weight: 850; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 6px 34px rgba(0, 0, 0, 0.5); clip-path: inset(0 100% 0 0); transition: clip-path 0.72s cubic-bezier(0.22, 0.8, 0.2, 1); } .or-leto.vidno { clip-path: inset(0 0 0 0); } .or-naslov, .or-izvajalec { opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.32, 0.72, 0, 1); } .or-naslov { font-size: 1.22rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 0.7rem; text-wrap: balance; transition-delay: 0.18s; } .or-izvajalec { font-size: 0.95rem; opacity: 0; margin-top: 0.15rem; transition-delay: 0.26s; } .podatki-vidni .or-naslov { opacity: 1; transform: none; } .podatki-vidni .or-izvajalec { opacity: 0.8; transform: none; } .or-dno { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--povrsina); border-radius: var(--r-xl) var(--r-xl) 0 0; border-top: 2.5px solid var(--crnilo); box-shadow: var(--senca-l); padding: 1.1rem 1.15rem calc(1.35rem + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1); } .dno-vidno .or-dno { transform: none; } .or-dno > * { max-width: 480px; margin-left: auto; margin-right: auto; } .or-dno .zeton-vprasanje { border-top: none; padding-top: 0; } /* Kartica na odru: senca je močnejša, ker leti nad temno naslovnico. Krmilo za prestavljanje gre z njo, zato ga tu izrecno skrijemo. */ .or-sloj .krmilo { display: none; } .or-sloj .skrivnost { z-index: 2; /* Ob prestavitvi na oder bi se `pojavi` s kartice na casovnici zavrtela znova. */ animation: none; transition: transform 0.65s cubic-bezier(0.34, 1.14, 0.4, 1); } /* Polet s casovnice na sredino odra. Prehoda tu ni mogoce uporabiti: kartico smo pravkar prestavili v DOM in brskalnik novo vstavljenemu elementu prve spremembe sloga ne animira — zato skoci. Pot je zato zapisana kot animacija, cilj pa pride iz JS v spremenljivkah, ker je odvisen od mesta na casovnici. Lok ima tri dele: kartica se odlepi od mize, zaokrozi navzgor in se poravna. */ .or-sloj .skrivnost.leti { animation: or-polet 0.72s forwards; } @keyframes or-polet { 0% { transform: translate(0, 0) scale(1) rotate(0deg); animation-timing-function: cubic-bezier(0.22, 0.7, 0.4, 1); } 16% { transform: translate(calc(var(--dx) * 0.02), calc(var(--dy) * 0.05 - 22px)) scale(1.09) rotate(-4.5deg); animation-timing-function: cubic-bezier(0.5, 0, 0.35, 0.9); } 58% { transform: translate(calc(var(--dx) * 0.42), calc(var(--dy) * 0.68)) scale(calc(var(--merilo) * 0.8)) rotate(2deg); animation-timing-function: cubic-bezier(0.3, 0.5, 0.25, 1); } /* Rahel prelet cez cilj, da pristanek dobi tezo. */ 86% { transform: translate(calc(var(--dx) * 1.02), calc(var(--dy) * 1.03)) scale(calc(var(--merilo) * 1.045)) rotate(-0.8deg); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); } 100% { transform: translate(var(--dx), var(--dy)) scale(var(--merilo)) rotate(0deg); } } .or-sloj .skrivnost .kp-stran { box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45); } .luknja { flex-shrink: 0; } /* ═══════════════ Izbira videza ═══════════════ */ .teme { display: flex; gap: 0.6rem; } .tema { position: relative; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem 0.6rem 0.7rem; border-radius: var(--r-s); border: 2px solid var(--crnilo); background: var(--povrsina); transition: background var(--preh), box-shadow var(--preh); } .tema.izbrana { background: var(--zelena-bledo); box-shadow: 3px 3px 0 var(--crnilo); } /* Sama senca je prešibek znak, katera tema teče — kljukica pove naravnost. */ .tema.izbrana::after { content: ''; position: absolute; top: -9px; right: -9px; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--zelena) no-repeat center/0.8rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); border: 2px solid var(--crnilo); } /* Vzorec pokaže paleto same teme, ne trenutne — zato so barve zapisane tu. */ .tema-vzorec { display: flex; height: 1.9rem; border: 2px solid var(--crnilo); border-radius: 5px; overflow: hidden; } .tema-vzorec span { flex: 1; } .tema-ime { font-size: 0.85rem; font-weight: 800; } .tema-opis { font-size: 0.72rem; color: var(--besedilo-tiho); line-height: 1.3; } /* ═══════════════ Povzetek partije ═══════════════ */ /* Seznam vsega, kar se je med partijo predvajalo — naravni zaključek večera. */ .povzetek { text-align: left; margin-top: 1.7rem; } .povzetek-vrsta { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0; border-bottom: 1.5px dashed var(--zelena-rob); } .povzetek-vrsta:last-child { border-bottom: none; padding-bottom: 0; } .povzetek-leto { flex-shrink: 0; width: 3.1rem; text-align: center; padding: 0.3rem 0.1rem; border-radius: 6px; background: var(--leto-barva, var(--zelena-temna)); color: var(--povrsina); border: 2px solid var(--crnilo); font-size: 0.82rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; } .povzetek-besedilo { flex: 1; min-width: 0; } .povzetek-naslov { display: block; font-size: 0.83rem; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .povzetek-izvajalec { display: block; font-size: 0.72rem; color: var(--besedilo-tiho); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .povzetek-izid { flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--crnilo); display: inline-flex; align-items: center; justify-content: center; } .povzetek-izid svg { width: 11px; height: 11px; } .povzetek-izid.da { background: var(--zelena); color: var(--povrsina); } .povzetek-izid.ne { background: var(--rdeca-bledo); color: var(--rdeca); } .povzetek-kdo { font-size: 0.68rem; color: var(--besedilo-bledo); } /* Ali je igralec vedel naslov oz. izvajalca. Znak je gol — brez kroga in obrobe — da ne tekmuje z izidom postavitve na desni, ki je edini razlog za kartico. Prazen `` (ni podatka) obdrzi sirino, sicer se naslov in izvajalec razideta vsak po svoje. */ .povzetek-vedel { display: inline-flex; align-items: center; justify-content: center; width: 0.72rem; height: 0.72rem; margin-right: 0.32rem; vertical-align: -0.04em; } .povzetek-vedel svg { width: 100%; height: 100%; } .povzetek-vedel.da { color: var(--zelena-temna); } .povzetek-vedel.ne { color: var(--rdeca); } .povzetek-legenda { margin: -0.25rem 0 0.6rem; font-size: 0.68rem; line-height: 1.35; color: var(--besedilo-bledo); } /* ═══════════════ Nizki zasloni ═══════════════ */ /* Igralni zaslon se ne premika navpično, zato mora na nizkih telefonih vse skupaj shujšati — sicer bi spodnji rob časovnice izginil pod ukazi. */ @media (max-height: 700px) { #zaslon-igra:not(.skrito) { --plosca: clamp(96px, 19dvh, 190px); } #zaslon-igra .igra-glava { margin-bottom: 0.8rem; } #zaslon-igra .gramofon { padding-top: 0.8rem; margin-bottom: 0.7rem; } #zaslon-igra .predvajalnik-info { margin-top: 0.5rem; } #zaslon-igra .navodilo { margin-bottom: 0.6rem; font-size: 0.9rem; } #zaslon-igra .casovnica-ovoj { padding-top: 0.7rem; } #zaslon-igra .casovnica { min-height: 132px; } } /* ═══════════════ Uvodna animacija ═══════════════ Odrska tocka ob odprtju, v jeziku ostale aplikacije: papir, crnilo, plosca. Koreografija (vse je cisti CSS, app.js le pobere sloj): | cas | kaj | |------:|-----| | 0 | zarki se razprejo in pocasi zavrtijo | | 80ms | plosca pade z vrha in se z zamahom usede, vrti se od hitrega proti mirnemu | | 500ms | rocica se spusti na zunanji utor | | 560ms | trije zvocni valovi gredo iz plosce | | 700ms | crke imena se ena za drugo odtisnejo v papir | |1150ms | podnaslov in izenacevalnik | |2050ms | app.js zazene odhod (razred .uvod--konec) | Sloj lezi cez vse in NE zadrzuje nalaganja — aplikacija se gradi pod njim. ⚠️ Sence pod plosco ni: plosca lezi na papirju, ne lebdi nad njim (isto kot gramofon v igri). Tezo da izteg krivulje ob pristanku, ne senca. */ .uvod { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; overflow: hidden; background: repeating-linear-gradient(135deg, var(--tekstura) 0 2px, transparent 2px 5px), var(--ozadje); transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.5, 0, 0.75, 0); } /* Odhod je poteg kamere skozi plosco, ne le zabris. */ .uvod--konec { opacity: 0; transform: scale(1.14); pointer-events: none; } .uvod-oder { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-bottom: 1rem; /* opticno sredisce je malo nad geometrijskim */ } /* Zarki: retro sonce iz bledega poudarka. Vrtijo se pocasi, da ozadje ziveti zacne, a ne tekmuje s plosco. */ .uvod-vrtisce { position: relative; } .uvod-zarki { position: absolute; left: 50%; top: 50%; z-index: -1; width: 190vmax; height: 190vmax; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--poudarek-bledo) 0 7deg, transparent 7deg 18deg); animation: uvod-zarki 2.6s cubic-bezier(0.16, 0.8, 0.3, 1) both; } @keyframes uvod-zarki { from { opacity: 0; transform: translate(-50%, -50%) rotate(-24deg) scale(0.55); } 30% { opacity: 1; } to { opacity: 1; transform: translate(-50%, -50%) rotate(14deg) scale(1); } } .uvod-plosca { position: relative; width: min(52vw, 200px); height: min(52vw, 200px); animation: uvod-spust 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 0.08s both; } @keyframes uvod-spust { from { transform: translateY(-48vh) scale(0.35); opacity: 0; } 45% { opacity: 1; } to { transform: none; opacity: 1; } } /* Ista plosca kot v igri, le vecja — ista slika iz `--plosca-slika`. Vrti se z izteko: zazene se hitro, kot bi jo pravkar pognal, in se umiri do zadnje tretjine uvoda. Odsev je vrisan v sliko, zato lastnega sloja ni vec. */ .uvod-disk { position: absolute; inset: 0; border-radius: 50%; /* Barva pod sliko: dokler se slika nalaga, je plosca ze crn vinil in ne luknja. */ background: var(--plosca-slika) center / 100% 100% no-repeat, var(--vinil); box-shadow: inset 0 0 0 2.5px var(--crnilo); animation: uvod-vrti 2.6s cubic-bezier(0.08, 0.75, 0.3, 1) both; } @keyframes uvod-vrti { from { transform: rotate(0deg); } to { transform: rotate(1080deg); } } /* Zvocni valovi: trije obroci, ki gredo iz roba plosce v papir. */ .uvod-val { position: absolute; inset: -2%; border-radius: 50%; border: 3px solid var(--poudarek); opacity: 0; animation: uvod-val 1.25s ease-out 0.56s infinite; } .uvod-val:nth-of-type(2) { animation-delay: 0.98s; border-color: var(--zelena-temna); } .uvod-val:nth-of-type(3) { animation-delay: 1.4s; border-color: var(--zlata); } @keyframes uvod-val { from { transform: scale(0.94); opacity: 0; } 18% { opacity: 0.8; } to { transform: scale(2.15); opacity: 0; } } /* Rocica: ista risba in ista koncna lega kot pri gramofonu v igri. */ .uvod-igla { position: absolute; top: -6%; right: -13%; z-index: 4; width: 58%; height: 58%; pointer-events: none; transform-origin: 84% 16%; animation: uvod-igla 0.72s cubic-bezier(0.4, 0.1, 0.2, 1) 0.5s both; } .uvod-igla svg { width: 100%; height: 100%; display: block; overflow: visible; } @keyframes uvod-igla { from { transform: rotate(-78deg); } to { transform: rotate(2deg); } } /* Ime se odtisne crko po crko, vsaka z zamahom iz druge strani — od tod "dinamicno". Trda barvna senca je isti tiskarski prijem kot pri gumbih. */ .uvod-ime { display: flex; margin-top: 1.7rem; font-size: clamp(3.1rem, 19vw, 4.8rem); font-weight: 900; letter-spacing: -0.045em; line-height: 1; text-transform: uppercase; color: var(--crnilo); } .uvod-ime span { display: inline-block; text-shadow: 5px 5px 0 var(--poudarek); animation: uvod-crka 0.46s cubic-bezier(0.3, 1.7, 0.55, 1) both; } .uvod-ime span:nth-child(1) { animation-delay: 0.70s; } .uvod-ime span:nth-child(2) { animation-delay: 0.78s; --nagib: 14deg; } .uvod-ime span:nth-child(3) { animation-delay: 0.86s; } .uvod-ime span:nth-child(4) { animation-delay: 0.94s; --nagib: 14deg; } .uvod-ime span:nth-child(5) { animation-delay: 1.02s; } @keyframes uvod-crka { from { transform: translateY(0.42em) scale(0.45) rotate(var(--nagib, -14deg)); opacity: 0; } to { transform: none; opacity: 1; } } .uvod-podnaslov { margin-top: 0.85rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--besedilo-tiho); animation: uvod-podnaslov 0.5s ease-out 1.15s both; } @keyframes uvod-podnaslov { from { opacity: 0; transform: translateY(8px); letter-spacing: 0.05em; } to { opacity: 1; transform: none; letter-spacing: 0.24em; } } /* Izenacevalnik: sedem stolpcev v barvah teme, vsak s svojim ritmom. */ .uvod-eq { display: flex; align-items: flex-end; gap: 7px; height: 40px; margin-top: 1.15rem; /* Stolpci so v mirovanju nizki in bi se pred zacetkom brali kot vrsta pik. */ opacity: 0; animation: uvod-eq-vstop 0.3s ease-out 1.18s forwards; } @keyframes uvod-eq-vstop { to { opacity: 1; } } .uvod-eq i { width: 12px; height: 100%; background: var(--zelena-temna); border: 2px solid var(--crnilo); border-radius: 2px; transform-origin: 50% 100%; transform: scaleY(0.18); animation: uvod-eq 0.44s ease-in-out 1.2s infinite alternate both; } .uvod-eq i:nth-child(2) { background: var(--poudarek); animation-duration: 0.32s; animation-delay: 1.26s; } .uvod-eq i:nth-child(3) { background: var(--zlata); animation-duration: 0.52s; animation-delay: 1.22s; } .uvod-eq i:nth-child(4) { animation-duration: 0.38s; animation-delay: 1.3s; } .uvod-eq i:nth-child(5) { background: var(--zlata); animation-duration: 0.46s; animation-delay: 1.24s; } .uvod-eq i:nth-child(6) { background: var(--poudarek); animation-duration: 0.3s; animation-delay: 1.32s; } .uvod-eq i:nth-child(7) { animation-duration: 0.5s; animation-delay: 1.2s; } .uvod-eq i:nth-child(8) { background: var(--poudarek); animation-duration: 0.36s; animation-delay: 1.28s; } .uvod-eq i:nth-child(9) { background: var(--zlata); animation-duration: 0.48s; animation-delay: 1.22s; } @keyframes uvod-eq { from { transform: scaleY(0.2); } to { transform: scaleY(1); } } /* Nizki zasloni: plosca in ime se umaknejo, da uvod ostane znotraj visine. */ @media (max-height: 700px) { .uvod-plosca { width: min(42vw, 150px); height: min(42vw, 150px); } .uvod-ime { margin-top: 1.2rem; font-size: clamp(2.6rem, 16vw, 3.8rem); } .uvod-eq { margin-top: 0.8rem; height: 30px; } } /* Kdor ne mara gibanja, ga ne dobi. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Skrit YouTubov predvajalnik. Nekaterih evrovizijskih in eminih skladb ni ne na Deezerju ne na iTunesu; predvajamo jih od tam. Okvir mora ostati v dokumentu in imeti velikost — brskalnik ustavi predvajanje v elementu z `display: none` — a ga igralec ne sme videti, ker je v njem izpisan naslov videa in s tem odgovor. */ /* ⚠️ Okvirja NE smemo odriniti z zaslona. Android Chrome iz videa, ki se predvaja zunaj vidnega polja, naredi sliko-v-sliki in ga prikaže v kotu — z naslovom vred, torej z odgovorom. Zato ostane v vidnem polju, majhen in pokrit z neprosojno krinko v barvi ozadja. */ .yt-skrit { position: fixed; left: 0; bottom: 0; z-index: 0; width: 64px; height: 36px; overflow: hidden; pointer-events: none; } /* ⚠️ YT.Player okvirju vsili svojo velikost (640 × 360). Ovoj ga sicer obreže, a okvir kljub temu sega stotine pikslov pod rob zaslona in na nekaterih napravah tam odpre navpično drsenje po praznem. Zato ga skrčimo na ovoj. */ .yt-skrit iframe { display: block; width: 100%; height: 100%; border: 0; } /* Krinka mora nositi isto teksturo kot telo strani, sicer se v kotu vidi gladek kvadrat. `background-attachment: fixed` veže izhodišče vzorca na vidno polje; ker igralni zaslon ne drsi, se ujame z vzorcem na `body`. */ .yt-skrit::after { content: ''; position: absolute; inset: -2px; background: repeating-linear-gradient(135deg, var(--tekstura) 0 2px, transparent 2px 5px), var(--ozadje); background-attachment: fixed; } /* ═══════════════ Poteg navzdol za osvežitev ═══════════════ */ /* Nameščena PWA teče brez naslovne vrstice, zato brskalnikovega potega navzdol ni. Ker aplikacija ob zagonu pobere stanje s strežnika, je osvežitev edini način, da igralec dobi spremembo, ki se je zgodila zunaj njegove seje. */ .poteg { position: fixed; top: 0; left: 50%; z-index: 60; display: grid; place-items: center; width: 38px; height: 38px; margin-left: -19px; border: 1px solid var(--rob); border-radius: 50%; background: var(--povrsina); box-shadow: var(--senca-s); /* Zunaj zaslona in neviden, dokler ga prst ne povleče. */ transform: translateY(-60px); opacity: 0; pointer-events: none; } /* Med potegom sledi prstu brez prehoda, ob spustu pa se gladko vrne. */ .poteg--sledi { transition: none; } .poteg--vraca { transition: transform 0.25s ease, opacity 0.25s ease; } /* Ko je prag dosežen, se plošča obarva — igralec vidi, da lahko spusti. */ .poteg--pripravljen { border-color: var(--poudarek); color: var(--poudarek); } .poteg--vrti svg { animation: poteg-vrti 0.8s linear infinite; } @keyframes poteg-vrti { to { transform: rotate(360deg); } } /* ═══════════════ Način pro: kraja in dve valuti ═══════════════ */ /* Gumbi za krajo stojijo v ukazni vrstici ob razkritju. Vsak nasprotnik z noto dobi svojega — pass-and-play je na enem telefonu, zato ime pove, čigav je. */ .kraja-gumbi { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .kraja-gumb { display: inline-flex; align-items: center; gap: 0.35rem; /* Ime in znak note morata ostati v eni vrstici, sicer gumb podvoji visino in ukazna vrstica poskoci. */ white-space: nowrap; padding: 0.7rem 0.8rem; border-radius: var(--r-m); background: var(--povrsina); color: var(--crnilo); border: 2px solid var(--crnilo); box-shadow: 2px 2px 0 var(--crnilo); font-weight: 800; font-size: 0.85rem; transition: transform var(--preh), box-shadow var(--preh); } .kraja-gumb:active { transform: translate(2px, 2px); box-shadow: none; } /* Dve valuti v glavi: žetoni in note eden nad drugim, da vrstica ne raste. */ .valute-prikaz { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; } .valute-vrsta { display: flex; gap: 2px; align-items: center; min-height: 0.7rem; } /* Polji za podelitev. Nagrada je skrita, dokler igralec ne tapne — vnaprej ne sme vedeti, kaj mu kaj prinese. */ .valute-vprasanje { text-align: center; } .valute-vprasanje > p { font-weight: 800; margin-bottom: 0.7rem; } .valute-polja { display: flex; gap: 0.6rem; justify-content: center; margin-bottom: 0.85rem; } .valuta-polje { flex: 1; max-width: 9rem; padding: 0.85rem 0.7rem; border: 2px dashed var(--crnilo); border-radius: var(--r-m); background: transparent; color: var(--crnilo); display: flex; flex-direction: column; align-items: center; gap: 0.35rem; transition: background var(--preh), border-style var(--preh); } .valuta-polje.izbrano { background: var(--zelena-bledo); border-style: solid; box-shadow: 2px 2px 0 var(--crnilo); } .valuta-oznaka { font-weight: 850; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; } /* Potrditev je edini gumb, ki potezo zares zaključi, zato je barvna — bel gumb na belem listu se je zlival z okvirjema nad njim in ga igralci niso našli. Bor, ne terakota: terakota je rezervirana za "naprej" tik pod njim. */ .potrdi-valute { min-width: 9.5rem; background: var(--zelena-temna); color: var(--povrsina); } /* Nagrada je poanta poteze, zato je znak večji od tistih v glavi. */ .valuta-nagrada { display: flex; gap: 3px; align-items: center; min-height: 1.3rem; } .valuta-nagrada svg { width: 1.3rem; height: 1.3rem; } .kraja-izid { font-size: 0.85rem; color: var(--besedilo-tiho); margin-top: 0.6rem; text-align: center; } /* ═══════════════ Statistika partije ═══════════════ */ .stat-blok { margin-bottom: 1.05rem; } .stat-blok:last-child { margin-bottom: 0; } .stat-naslov { font-size: 0.68rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.1em; color: var(--besedilo-tiho); margin-bottom: 0.45rem; } .stat-vrstica { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px dashed var(--zelena-bledo); font-size: 0.88rem; } .stat-vrstica:last-child { border-bottom: none; } .stat-kdo { font-weight: 800; } .stat-koliko { color: var(--besedilo-tiho); display: flex; gap: 3px; align-items: center; } /* Desetletje nosi svojo barvo, enako kot letnice na časovnici. */ .stat-desetletje { font-weight: 900; color: var(--leto-barva, var(--besedilo)); } .stat-poudarek { font-size: 0.95rem; font-weight: 850; } /* Sled kartice med krajo: kje jo je postavil igralec na potezi. Medla in neodzivna — izzivalec vidi izhodišče, a ga ne more izbrati kot svojo režo. */ .kartica-pesem.sled { opacity: 0.28; filter: blur(1.5px) saturate(0.5); pointer-events: none; box-shadow: none; /* ⚠️ Brez tega animacija `pojavi` s `.skrivnost` prepiše prosojnost in sled v prvih tretjinah sekunde utripne v polni barvi. */ animation: none; } /* Vrtenje plošče s prstom premika posnetek. Med vrtenjem ustavimo animacijo samodejnega vrtenja — sicer se plošča vrti sama in prstu hkrati. */ .plosca.vrtim .plosca-disk { animation: none; } .plosca.vrtim { cursor: grabbing; } /* Med vrtenjem plošča ne sme počiti v `:active` pomanjšanje ob vsakem premiku. */ .plosca.vrtim:active { transform: none; } /* ═══════════════ Popravek podatkov o pesmi ═══════════════ */ /* Gumb stoji pod izvajalcem na odru razkritja: dovolj viden, da ga igralec najde, dovolj tih, da ne tekmuje z letnico. */ /* Gumb je tih in ob strani: popravek je izhod v sili, ne del poteze. Zato stoji levo zgoraj nad odrom in ne pod letnico, kjer je tekmoval z odgovorom. */ .or-popravi { position: fixed; z-index: 6; top: calc(0.7rem + env(safe-area-inset-top)); left: 0.8rem; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.6rem; border-radius: 9999px; background: rgba(20, 16, 12, 0.34); border: 1px solid rgba(251, 244, 231, 0.34); color: rgba(251, 244, 231, 0.82); font-size: 0.68rem; font-weight: 700; backdrop-filter: blur(3px); } .or-popravi:active { background: rgba(20, 16, 12, 0.55); } /* ⚠️ Oder razkritja je na `z-index: 60`, list s pravili pa na 42 — popravek se odpira NAD odrom, zato mora biti višje od obeh, sicer ga oder prekrije in gumbi so nedosegljivi (izmerjeno: klik je prestregel odsek odra). */ #popravek-zastor { z-index: 70; } #popravek-list { z-index: 72; } /* Vnosna polja v listu za popravek. */ #popravek-list .namig { margin-bottom: 1.1rem; } .polje { display: block; margin-bottom: 0.85rem; text-align: left; } .polje-oznaka { display: block; margin-bottom: 0.3rem; font-size: 0.7rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.09em; color: var(--besedilo-tiho); } .polje input { width: 100%; padding: 0.75rem 0.85rem; border: 2px solid var(--crnilo); border-radius: var(--r-s); background: var(--povrsina); color: var(--besedilo); font-size: 1rem; font-weight: 600; } .polje input:focus { outline: none; box-shadow: 2px 2px 0 var(--crnilo); } .popravek-preverba { margin-bottom: 0.85rem; } .popravek-preverba a { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; text-decoration: none; } /* ═══════════════ Prejšnje igre ═══════════════ */ /* Vrstica je celotna tipka: na telefonu se v seznam meri s palcem, ne s kazalcem. Gumb za izbris stoji ločeno ob njej, da odlaganje in brisanje nista sosednja dotika na isti ploskvi. */ /* Gumb v glavi nosi piko, kadar kaksna partija caka nadaljevanja: odlozena igra ne sme utoniti za zaprtim listom. */ .icon-btn { position: relative; } .icon-btn.ima-odlozeno::after { content: ''; position: absolute; top: -3px; right: -3px; width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--poudarek); border: 2px solid var(--crnilo); } .zgo-seznam { display: flex; flex-direction: column; gap: 0.5rem; text-align: left; margin-bottom: 0.9rem; } .zgo-vrsta { display: flex; align-items: stretch; gap: 0.4rem; } .zgo-odpri { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.7rem; background: var(--povrsina); border: 2px solid var(--crnilo); border-radius: var(--r-s); padding: 0.6rem 0.7rem; box-shadow: var(--senca-s); text-align: left; color: var(--besedilo); font: inherit; cursor: pointer; } .zgo-odpri:active { transform: translate(2px, 2px); box-shadow: none; } .zgo-znak { width: 1.75rem; height: 1.75rem; flex-shrink: 0; border-radius: 50%; background: var(--zelena-bledo); border: 2px solid var(--crnilo); display: inline-flex; align-items: center; justify-content: center; } .zgo-znak svg { width: 13px; height: 13px; } /* Odložena partija je edina, ki nekaj čaka od tebe — zato edina v poudarku. */ .zgo-vrsta.tece .zgo-znak { background: var(--poudarek); color: var(--na-poudarku); } .zgo-vrsta.koncana .zgo-znak { background: var(--zlata); } .zgo-telo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .zgo-imena { font-weight: 700; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zgo-meta { font-size: 0.72rem; color: var(--besedilo-tiho); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zgo-stanje { flex-shrink: 0; font-size: 0.66rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.06em; color: var(--zelena-temna); } .zgo-vrsta.tece .zgo-stanje { color: var(--poudarek); } .zgo-brisi { flex-shrink: 0; width: 2.1rem; display: inline-flex; align-items: center; justify-content: center; background: var(--ozadje); border: 2px solid var(--crnilo); border-radius: var(--r-s); box-shadow: var(--senca-s); color: var(--besedilo-tiho); cursor: pointer; } .zgo-brisi:active { transform: translate(2px, 2px); box-shadow: none; } /* Izbris je nevaren in redek: rdeč postane šele pod prstom, sicer bi seznam izgledal kot vrsta opozoril. */ .zgo-brisi:active { color: var(--rdeca); } .gumb-tih.nevarni { color: var(--rdeca); } .zgo-prazno { font-size: 0.82rem; line-height: 1.5; color: var(--besedilo-tiho); margin: 0.2rem 0 1.1rem; text-align: center; }