/* Zajednički izgled mobilnog (i budućeg web) klijenta - jedan fajl za sve ekrane.
   Dijeli ga svaki host preko _content/YambShared.UI/yamb.css. */

:root {
    --pozadina: #12181f;
    --povrsina: #1b232d;
    --povrsina-2: #24303c;
    --tekst: #e8eef5;
    --tekst-slabo: #9fb0c2;
    --akcenat: #2b8fe0;
    --akcenat-tamni: #1f6ba9;
    --greska: #ff6b6b;
    --uspjeh: #4cd07d;
    --ivica: #2e3a48;
    --traka-visina: 52px;

    /* PRAVILO: ništa se ne razvlači preko razumne mjere. Na telefonu su sve ove granice veće
       od ekrana, pa se ne osjete; na tabletu i monitoru zaustavljaju rast, a višak prostora
       ostaje OKO sadržaja. Fluidno - bez prelomnih tačaka.
       Poravnanje po smislu: forme i spiskovi se čitaju red po red (tekst lijevo), a radnje
       i pločice se centriraju. */
    --sirina-sadrzaja: 560px;   /* forme, spiskovi, kartice s tekstom */
    --sirina-radnji: 420px;     /* dugmad, poruke, potvrde */
    --sirina-plocica: 640px;    /* mreža pločica na početnom ekranu */
    --visina-plocice: 132px;    /* pločica ne raste u visinu preko ovoga */
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--pozadina);
    color: var(--tekst);
    font-family: "Segoe UI", "Segoe UI Emoji", Roboto, system-ui, sans-serif;
    font-size: 16px;
    overscroll-behavior: none;
}

/* Blazor korijen: bez visine ovdje ljuska ne dobija punu visinu ekrana, pa chat-dock
   ne stoji na donjoj ivici nego odmah ispod sadržaja. */
#app {
    height: 100%;
}

.yamb-app {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- gornja traka --- */

/* Dvoredna traka: gore nazad/naslov/akcije, dolje tokeni i tip naloga; avatar desno preko
   oba reda. Na stolu (traka-kompaktna) ostaje samo prvi red. */
.yamb-traka {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    padding-top: calc(3px + env(safe-area-inset-top));
    background: var(--povrsina);
    border-bottom: 1px solid var(--ivica);
    flex: 0 0 auto;
}

.traka-redovi {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.traka-red {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.traka-red-2 {
    padding-left: 4px;
}

.traka-avatar {
    flex: 0 0 auto;
    padding: 0;
    background: transparent;
    border: none;
    line-height: 0;
}

.traka-nalog {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    color: var(--tekst-slabo);
    background: transparent;
    border: none;
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.traka-kompaktna .traka-dugme {
    width: 32px;
    height: 32px;
}

/* zaobljeno dugme s diskretnom podlogom - ikone su SVG, ne tekstualni znakovi */
.traka-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--tekst-slabo);
    background: var(--povrsina-2);
    border: none;
    border-radius: 10px;
}

.traka-dugme:active {
    color: var(--tekst);
    background: var(--ivica);
}

/* nazad je najčešći potez u traci - puna bijela strelica, kao tekst na glavnoj dugmadi */
.traka-dugme-nazad {
    color: #fff;
}

.traka-dugme-nazad:active {
    color: #fff;
}

/* prečica u partiju je jedina akcentovana - to je poziv na akciju */
.traka-dugme-akcenat {
    color: #fff;
    background: var(--akcenat);
}

.traka-dugme-akcenat:active {
    background: var(--akcenat-tamni);
}

.traka-ikona {
    width: 20px;
    height: 20px;
    display: block;
}

.traka-naslov {
    flex: 1 1 auto;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.traka-tokeni {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--povrsina-2);
    color: var(--tekst);
    border: none;
    font-size: 13px;
}

/* dijamant iz desktop resursa (Icons\diamond2.png) - ista slika svuda gdje se pominju tokeni */
.ikona-token {
    width: 14px;
    height: 14px;
    display: block;
    filter: invert(78%) sepia(35%) saturate(600%) hue-rotate(150deg);
}

.ikona-token-veca {
    width: 20px;
    height: 20px;
}

.yamb-sadrzaj {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* ekran bez klizača (glavni panel): sadržaj se uklapa u raspoloživu visinu */
.sadrzaj-pun {
    overflow: hidden;
    min-height: 0;
    padding: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
}

/* Kad je chat dock na ekranu, ON je zadnji element i on rezerviše safe-area - sadržaj
   iznad njega je NE smije dodavati drugi put. Bez ovoga se na stolu ispod dugmadi
   otvarao prazan pojas visok skoro dva reda tabele (16px + safe-area, pa opet safe-area).
   Mora stajati POSLIJE .yamb-sadrzaj/.sadrzaj-pun - ista specifičnost, redoslijed odlučuje. */
.sadrzaj-sa-dockom,
.sadrzaj-sa-dockom.sadrzaj-pun {
    padding-bottom: 6px;
}

/* --- osnovni elementi --- */

.ekran-centar {
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.logo {
    margin: 24px 0 16px;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: var(--akcenat);
}

.naslov {
    margin: 8px 0 8px;
    font-size: 22px;
    font-weight: 600;
}

.polje {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.polje label {
    font-size: 13px;
    color: var(--tekst-slabo);
}

/* Jednoredne kontrole (dugme, padajuća lista, polje za unos) imaju ISTU visinu - 42px.
   Niže od ranijih 46-48px, ali i dalje udobno za prst na telefonu. */
.polje input {
    height: 42px;
    padding: 0 12px;
    font-size: 16px;
    color: var(--tekst);
    background: var(--povrsina);
    border: 1px solid var(--ivica);
    border-radius: 10px;
}

.polje input:focus {
    outline: none;
    border-color: var(--akcenat);
}

/* Dugme je RADNJA - raste do `--sirina-radnji` pa se centrira (na monitoru je razvučeno
   dugme preko cijele širine ružno i teško pogodivo mišem). */
.dugme-glavno {
    width: min(100%, var(--sirina-radnji));
    margin-inline: auto;
    height: 42px;
    margin-top: 6px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    background: var(--akcenat);
    border: none;
    border-radius: 10px;
}

.dugme-glavno:active {
    background: var(--akcenat-tamni);
}

.dugme-glavno:disabled {
    opacity: .6;
}

.linkovi {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.link {
    padding: 8px 4px;
    font-size: 14px;
    color: var(--akcenat);
    background: transparent;
    border: none;
}

.sitno {
    margin: 0;
    font-size: 12px;
    color: var(--tekst-slabo);
}

.poruka {
    margin: 0;
    font-size: 14px;
}

.poruka-greska {
    margin: 0;
    font-size: 14px;
    color: var(--greska);
}

.poruka-ok {
    margin: 0;
    font-size: 14px;
    color: var(--uspjeh);
}

/* --- početni ekran (pločice) --- */

/* Glavni panel NEMA klizač: nadimak zauzima svoj red, a pločice se rastežu na sve što
   preostane od visine ekrana (grid dijeli prostor na jednake redove). */
.pocetna {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* početni ekran: samo nadimak (ostalo je u gornjoj traci, bez dupliranja) */
.ja {
    display: flex;
    align-items: center;
}

.ja-nick {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mreža pločica: na telefonu popunjava ekran, na monitoru staje na `--sirina-plocica` i
   centrira se, a pločice ne rastu u visinu preko `--visina-plocice` (razvučene su izgledale
   ružno). Kolone se same slažu - bez prelomnih tačaka. */
.plocice {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(0, min(1fr, var(--visina-plocice)));
    gap: 8px;
    width: min(100%, var(--sirina-plocica));
    margin-inline: auto;
    align-content: start;
}

.plocica {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 0;
    padding: 4px;
    color: var(--tekst);
    background: var(--povrsina);
    border: 1px solid var(--ivica);
    border-radius: 14px;
    text-align: center;
    overflow: hidden;
}

.plocica:active {
    background: var(--povrsina-2);
}

.plocica-neaktivna {
    opacity: .45;
}

/* Odjava je radnja, ne navigacija - stoji zadnja, diskretnija je i odvojena razmakom,
   pa se ne klikne slučajno umjesto susjedne pločice. */
.plocica-odjava {
    color: var(--tekst-slabo);
    border-color: transparent;
    background: transparent;
}

/* ikona i tekst se skaliraju s veličinom pločice, pa isti raspored radi i na malom ekranu */
.plocica-ikona {
    font-size: min(28px, 7vw);
    line-height: 1;
}

.plocica-tekst {
    font-size: min(13px, 3.4vw);
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
}

/* --- liste (partije, igrači, kolone) --- */

/* Spisak se takođe čita red po red - blok centriran, sadržaj lijevo. */
.lista {
    list-style: none;
    margin: 12px auto 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(100%, var(--sirina-sadrzaja));
    text-align: left;
}

.red {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--povrsina);
    border: 1px solid var(--ivica);
    border-radius: 12px;
}

.red:active {
    background: var(--povrsina-2);
}

.red-cekaigrace .red-naslov {
    font-weight: 700;
}

.red-izabran {
    border-color: var(--akcenat);
}

.red-zakljucan {
    opacity: .45;
}

.red-tekst {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.red-naslov {
    font-size: 15px;
    /* dug naziv (npr. vrsta partije) se skraćuje s "..." umjesto da lomi red i gura ostalo */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.red-sitno {
    font-size: 12px;
    color: var(--tekst-slabo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.red-desno {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--tekst-slabo);
}

.tacka {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* --- forma partije --- */

.lobi,
/* Forma je blok koji se ČITA: sadržaj ostaje poravnat lijevo, a sam blok se na širokom
   ekranu centrira i ne razvlači preko `--sirina-sadrzaja`. */
.forma {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: min(100%, var(--sirina-sadrzaja));
    margin-inline: auto;
    text-align: left;
}

.polje select,
.izbor {
    height: 42px;
    padding: 0 12px;
    font-size: 16px;
    text-align: left;
    color: var(--tekst);
    background: var(--povrsina);
    border: 1px solid var(--ivica);
    border-radius: 10px;
}

.polje .vrijednost {
    padding: 10px 0;
    font-size: 16px;
}

.cekiraj {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 15px;
    color: var(--tekst);
}

.cekiraj input {
    width: 20px;
    height: 20px;
}

.kolone-pregled {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
}

.ikona-kolone {
    width: 18px;
    height: 18px;
    color: var(--tekst-slabo);
}

.dugme-sporedno {
    width: min(100%, var(--sirina-radnji));
    margin-inline: auto;
    height: 42px;
    font-size: 16px;
    color: var(--tekst);
    background: var(--povrsina-2);
    border: 1px solid var(--ivica);
    border-radius: 10px;
}

/* ekran preko ekrana (izbor kolona) - ponaša se kao zaseban ekran */
.preko-ekrana {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    background: var(--pozadina);
}

/* --- chat dock (uvijek pri dnu) --- */

.chat-dock {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--povrsina);
    border-top: 1px solid var(--ivica);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Raširen chat ne uzima pola ekrana nego tačno onoliko koliko treba za ~5 redova
   poruka (visina ispod je fiksna) - ostatak ekrana ostaje igri/spisku. */
.chat-raireno {
    height: auto;
}

/* Skupljen dock je visok 36px (bio ~45): manji padding i niža strelica, tekst ostaje isti
   i u jednom redu. Ušteda ide tabeli za stolom. */
.chat-linija {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px;
}

.chat-zadnja {
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--tekst-slabo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-strelica {
    flex: 0 0 auto;
    width: 34px;
    height: 26px;
    color: var(--tekst-slabo);
    background: transparent;
    border: none;
    font-size: 13px;
}

.chat-zaglavlje {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--ivica);
}

.chat-tabovi {
    flex: 1 1 auto;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 6px;
}

.chat-tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--tekst-slabo);
    background: var(--povrsina-2);
    border: none;
    border-radius: 12px;
}

.chat-tab-aktivan {
    color: #fff;
    background: var(--akcenat);
}

.chat-zatvori {
    font-size: 14px;
    opacity: .8;
}

.chat-poruke {
    flex: 0 0 auto;
    height: 116px;   /* ~5 redova (14px tekst, gap 4px); starije poruke idu u skrol */
    overflow-y: auto;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-poruka {
    font-size: 14px;
    word-break: break-word;
}

.chat-nick {
    color: var(--akcenat);
    margin-right: 4px;
}

.chat-unos {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid var(--ivica);
}

.chat-unos input {
    flex: 1 1 auto;
    height: 40px;
    padding: 0 10px;
    font-size: 15px;
    color: var(--tekst);
    background: var(--povrsina-2);
    border: 1px solid var(--ivica);
    border-radius: 10px;
}

.chat-posalji {
    flex: 0 0 auto;
    width: 52px;
    height: 40px;
    margin-top: 0;
}

/* --- prekidači (Svi igrači / Favoriti) --- */

.prekidaci {
    display: flex;
    gap: 6px;
}

.prekidac {
    flex: 1 1 0;
    height: 38px;
    font-size: 14px;
    color: var(--tekst-slabo);
    background: var(--povrsina);
    border: 1px solid var(--ivica);
    border-radius: 10px;
}

.prekidac-aktivan {
    color: #fff;
    background: var(--akcenat);
    border-color: var(--akcenat);
}

.igraci {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* spisak igrača je dugačak - red je tijesan uz avatar (3px gore/dolje) i 3px između igrača;
   važi SAMO ovdje, ostale liste (lobi, klubovi, tokeni...) zadržavaju prostraniji red */
.igraci .lista {
    margin-top: 0;
    gap: 3px;
}

.igraci .red {
    padding: 3px 12px;
}

/* rang liste su takođe duge - isti tijesan red kao kod spiska igrača (igrač ILI klub) */
.rangliste .lista {
    margin-top: 0;
    gap: 3px;
}

.rangliste .red {
    padding: 3px 12px;
}

.sheet-stavka-izabrana {
    background: var(--akcenat);
    color: #fff;
}

.bedzevi {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* medalja + čip s brojem preko nje (kao desktop vitrina) */
.bedz-stavka {
    position: relative;
    display: block;
    padding: 0;
    background: none;
    border: none;
}

.bedz {
    display: block;
    width: 52px;
    height: 52px;
}

.bedz-cip {
    position: absolute;
    right: -2px;
    bottom: -2px;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 8px;
}

/* prazna vitrina: mutna prazna mjesta da tabla "ima oblik" */
.bedz-prazno {
    width: 46px;
    height: 46px;
    border: 1.5px dashed var(--ivica);
    border-radius: 50%;
    background: rgba(128, 128, 128, .08);
}

/* vrijednost + dugme "Kopiraj" u istom redu (referral kod i link) */
.kopiraj-red {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kopiraj-red .vrijednost {
    flex: 1 1 auto;
    min-width: 0;
}

.skrati {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bedz-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bedz-info-red {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* --- podešavanja --- */

.naslov-grupe {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tekst-slabo);
    text-transform: uppercase;
}

.zastava {
    flex: 0 0 auto;
    width: 28px;
    height: 20px;
    object-fit: cover;
    border-radius: 3px;
    background: var(--povrsina-2);
}

.zastava-red {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

/* sloj za efekat kolone - iznad svega, ne hvata dodir */
.efekt-canvas {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
}

/* Pretpregled u galeriji: čestice ostaju UNUTAR kartice skina (kao desktop EffectView). */
.efekt-canvas-unutra {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* --- emoji u chatu --- */

.emote-mreza {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 10px;
    border-top: 1px solid var(--ivica);
}

.emote {
    width: 34px;
    height: 34px;
    font-size: 20px;
    background: transparent;
    border: none;
}

.chat-emote-dugme {
    flex: 0 0 auto;
    width: 38px;
    height: 40px;
    font-size: 20px;
    background: transparent;
    border: none;
}

/* --- pomoć (docs stranice sa servera) --- */

.pomoc-okvir {
    height: 100%;
}

.pomoc-iframe {
    width: 100%;
    height: 100%;
    min-height: 70vh;
    border: none;
    background: #fff;
}

.botcheck {
    align-items: center;
    text-align: center;
}

.zadatak-dugme {
    display: block;
    font-size: 11px;
    color: var(--akcenat);
}

.dugme-ikona {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    color: var(--tekst-slabo);
    background: transparent;
    border: none;
    font-size: 14px;
}

/* --- klubovi --- */

.klub-zaglavlje {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 8px;
}

.klub-tag {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* slobodno mjesto za klub (imaš pravo na njega, samo nisi član) */
.red-prazno {
    border-style: dashed;
    color: var(--tekst-slabo);
}

/* --- ponuda tokena --- */

/* Ikona reda ima FIKSNU širinu: kvačica/poklon/prazan kvadrat su različito široki glifovi, pa bi
   bez ovoga tekst poskakivao udesno čim se zadatak riješi (i redovi ne bi bili poravnati). */
.red-ikona {
    flex: 0 0 22px;
    width: 22px;
    text-align: center;
    font-size: 20px;
    line-height: 1;
}

/* gratis poklon i plaćena akcija se izdvajaju iz običnih paketa */
.red-poklon {
    border-color: var(--uspjeh);
}

.red-akcija {
    border-color: #e8912d;
}

.stara-cijena {
    margin-right: 6px;
    color: var(--tekst-slabo);
}

/* --- rang liste --- */

.rangliste {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rang-tabela {
    border: 1px solid var(--ivica);
    border-radius: 12px;
    padding: 8px;
}

/* nagrađivana tabela ima zlatni okvir i 🏆 bedž - isto kao na desktopu */
.rang-nagradna {
    border-color: #c8a33a;
    border-width: 2px;
}

.rang-naslov {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.rang-bedz {
    flex: 0 0 auto;
    font-size: 11px;
    color: #c8a33a;
}

.rang-mjesto {
    flex: 0 0 auto;
    min-width: 24px;
    font-size: 13px;
    color: var(--tekst-slabo);
}

.rang-nagrada {
    flex: 0 0 auto;
    font-size: 13px;
    color: #c8a33a;
}

/* --- avatar (slika + ram preko nje) --- */

.avatar {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 6px;
    background: var(--povrsina-2);
    overflow: hidden;
}

.avatar-slika {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
}

.avatar-ram {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* --- galerija kozmetike (avatari, ramovi, skinovi) --- */

.galerija {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 12px;
}

/* Kartica ima FIKSNE dimenzije i fiksne zone - promjena sadržaja (status, rok, cijena)
   ne smije pomjerati ni jedan drugi element u dijalogu. */
/* Visina se NE zadaje: sve zone unutra imaju fiksnu visinu, pa je i kartica uvijek iste
   visine - a nema ni odsječenog sadržaja ni praznog repa kao kad je visina bila tvrdo
   zadata. Razmak između zona je jedan te isti (3px). */
.galerija-stavka {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 104px;
    padding: 6px;
    color: var(--tekst);
    background: var(--povrsina);
    border: 2px solid var(--ivica);
    border-radius: 12px;
    text-align: center;
    overflow: hidden;
}

/* traka iznad slike: "Aktivan" (prazna kad nije) - zato se ništa ne pomjera kad se pojavi */
.galerija-oznaka {
    flex: 0 0 auto;
    height: 16px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    color: var(--akcenat);
    white-space: nowrap;
}

.galerija-preview {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
}

/* status i akcija su UVIJEK prisutni (i kad su prazni) - zato prostor ne nestaje */
.galerija-status {
    flex: 0 0 auto;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
    color: var(--tekst-slabo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Cijena + period: stalna zona na svakoj kartici (i kad je stavka kupljena), u DVA reda -
   "90 tokena · 30 dana" u jednom redu nije stajalo na uskoj kartici. */
.galerija-cijena {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 26px;
    font-size: 11px;
    line-height: 13px;
    color: var(--tekst-slabo);
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

/* Zona akcije nosi JEDNU oznaku ("Kupi" / "Produži"); prostor je rezervisan i kad je prazna,
   da kartice ostanu iste visine bez obzira na stanje stavke. */
.galerija-akcija {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
}

.cijena-radnja {
    font-size: 11px;
    color: var(--akcenat);
    line-height: 1;
}

.galerija-izabrana {
    border-color: var(--akcenat);
}

.galerija-naziv {
    flex: 0 0 auto;
    height: 17px;
    font-size: 13px;
    line-height: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* neposjedovana kozmetika nosi vidljivu cijenu (tap otvara potvrdu, ne kupuje odmah) */
.cijena-oznaka {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--povrsina-2);
    color: #c8a33a;
    font-size: 12px;
    white-space: nowrap;
}

.galerija-dodaj {
    cursor: pointer;
}

.galerija-plus {
    font-size: 26px;
    color: var(--tekst-slabo);
}

.kockice-par {
    display: flex;
    gap: 4px;
}

/* Isječak tabele 2x2 (kao desktop SkinRender.TableView): gore lijevo obično polje, ispod njega
   suma kolone, desno od sume ukupna suma; gore desno ostaje prazno. */
.tabela-primjer {
    display: grid;
    grid-template-columns: repeat(2, 30px);
    grid-template-rows: repeat(2, 26px);
    gap: 2px;
}

.primjer-polje {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    font-size: 12px;
}

/* prazno mjesto gore-desno u isječku tabele */
.primjer-prazno {
    display: block;
}

/* Pretpregled efekta: polja kao mini-tabela (podloga u bojama mog skina tabele), a čestice se
   crtaju preko njih - zato zona mora imati stvarnu širinu/visinu (canvas cilja njen centar). */
.efekat-primjer {
    position: relative;   /* canvas efekta se pozicionira u odnosu na ovaj okvir */
    overflow: hidden;
    font-size: 13px;
    color: var(--tekst-slabo);
    /* dva reda "oznaka + vrijednost", kao desktop EffectView */
    display: grid;
    grid-template-columns: auto 34px;
    grid-template-rows: repeat(2, 24px);
    gap: 2px;
    justify-content: center;
    align-content: center;
}

/* oznaka dobitka (Yamb / Poker) u pretpregledu efekta */
.efekat-oznaka {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    height: 24px;
    font-size: 11px;
    font-weight: 700;
}

.efekat-primjer .primjer-polje {
    width: 34px;
    height: 24px;
}

/* --- sto (partija): traka igrača / tabela / kockice --- */

/* Sto je zbijen namjerno: sav ušteđeni prostor ide tabli, da tabela stane BEZ klizača. */
.sto {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    min-height: 0;
}

.igraci-traka {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
}

.igrac {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 58px;
    padding: 2px 4px;
    color: var(--tekst);
    background: var(--povrsina);
    border: 2px solid transparent;
    border-radius: 10px;
}

.igrac-izabran {
    border-color: var(--akcenat);
}

/* igrač na potezu: avatar dobija akcentni prsten */
.igrac-napotezu .avatar {
    outline: 2px solid var(--akcenat);
    outline-offset: 1px;
}

.igrac-ime {
    max-width: 72px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.igrac-sitno {
    font-size: 10px;
    color: var(--tekst-slabo);
}

/* Status poteza u traci igrača: uzima SAV preostali prostor desno od pločica, pa je
   njegov centar fiksan - tekst se mijenja ("Ti si na potezu" / "X je na potezu" /
   "Čeka se: ...") bez pomjeranja ičega. Duži tekst se skraćuje umjesto da gura pločice. */
.traka-status {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.2;
}

.traka-status-tekst {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

.rok {
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--povrsina-2);
    font-variant-numeric: tabular-nums;
}

.rok-hitno {
    background: var(--greska);
    color: #fff;
}

/* tabela dobija sav preostali prostor; klizač je zadnja odbrana ako ekran baš ne može stati */
/* Okvir je visok TAČNO koliko tabela (a skuplja se i dobija klizač kad visine nema).
   Ranije je uzimao SAV višak visine (`flex: 1 1 auto`), pa je na visokom ekranu između
   tabele i kockica zjapila praznina, a kockice su sjedile uz chat. Sada višak ostaje
   ISPOD kockica, a one stoje odmah uz tabelu. */
.tabela-okvir {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;   /* razmak kad se prikazuje više tabela jedna uz drugu */
}

/* jedna tabela + (na širokom ekranu) natpis s avatarom i nadimkom iznad nje */
.tabela-jedna {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.tabela-naslov {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--tekst-slabo);
}

.tabela-naslov.igrac-napotezu {
    color: var(--tekst);
    background: var(--povrsina-2);
}

/* Širina kolone: idealnih 34px, a kad ih je puno - podijeli raspoloživo (svih 9 stane
   bez horizontalnog skrola). Tabela uža od ekrana ostaje centrirana. */
.tabela {
    --w: min(34px, (100vw - 24px - 38px) / var(--u, var(--n)));
    display: grid;
    grid-template-columns: 38px repeat(var(--n), var(--w));
    align-content: start;
    gap: 2px;
}

/* Kolona Sume je šira (1.5x) i stoji odvojeno - kao na desktopu; u računicu širine ulazi
   kroz --u (broj igračih kolona + 1.5). */
.tabela.sa-sumama {
    grid-template-columns: 38px repeat(var(--n), var(--w)) calc(var(--w) * 1.5);
}

/* Visina reda se računa iz raspoložive visine ekrana: tabela ima 18 redova (zaglavlje + 17),
   a ostatak ekrana (traka, igrači, kockice, dugmad, chat) troši oko 300px. Tako tabela stane
   BEZ klizača i na nižim telefonima, a na visokim ostaje ugodnih 30px. */
.tabela {
    --celija-h: clamp(19px, calc((100vh - 300px) / 18), 30px);
}

.celija {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--celija-h, 30px);
    padding: 0;
    font-size: min(13px, calc(var(--celija-h, 30px) * 0.46));
    color: var(--tekst);
    background: var(--povrsina);
    border: 1px solid var(--ivica);
    border-radius: 5px;
    overflow: hidden;
}

.celija-imena {
    background: transparent;
    border-color: transparent;
    color: var(--tekst-slabo);
    font-size: min(12px, calc(var(--celija-h, 30px) * 0.42));
    /* Natpis mora stati u 38px široku kolonu - kolona se NE širi (devet igračih kolona mora
       stati bez horizontalnog skrola), pa se najduži natpis ("Ukupno") stisne za nijansu. */
    white-space: nowrap;
    overflow: hidden;
}

/* najduži natpisi u koloni imena - sitniji font da se vide cijeli */
.celija-imena.ime-dugo {
    font-size: min(10px, calc(var(--celija-h, 30px) * 0.36));
    letter-spacing: -.02em;
}

/* Zaglavlje ostaje vidljivo dok se tabela skroluje. Sticky UNUTAR istog grida (a ne odvojen
   element) - tako su širine kolona garantovano poravnate s tijelom tabele. Pozadina mora biti
   neprozirna da redovi ne prosijavaju kroz zaglavlje. */
.celija-zaglavlje {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--povrsina-2);
    border: none;
    cursor: pointer;
}

.celija-polje:disabled {
    opacity: .85;
}

/* Polje u roku za poništavanje: prikazuje VRIJEDNOST (kao desktop), a da se može poništiti
   govore boja i sitna strelica u uglu - broj se više ne krije iza "↩" do isteka roka. */
.celija-pending {
    background: #e8912d;
    color: #1b1b1b;
    font-weight: 700;
    position: relative;
}

.celija-pending::after {
    content: "↩";
    position: absolute;
    top: -1px;
    right: 1px;
    font-size: 9px;
    line-height: 1;
    opacity: 0.75;
}

/* Najavljeno/dirigovano polje - mora se vidjeti na prvi pogled. Sam obrub se na ćeliji
   od 34px na telefonu ne primjećuje, pa je igrač najavu previđao i onda mu se svaki
   drugi tap tiho odbijao (izgledalo je kao da kolona Najava ne radi). */
.celija-najava {
    border-color: var(--akcenat);
    background: var(--akcenat);
    color: #fff;
    font-weight: 700;
}

/* 2 vs 2: privremeni potez tima (čeka partnera da potvrdi ili preusmjeri) */
.celija-tim {
    background: var(--akcenat-tamni);
    color: #fff;
}

.celija-sume {
    background: var(--povrsina-2);
    color: var(--tekst-slabo);
    margin-left: 4px;   /* odvojena od igračih kolona */
}

/* U koloni Sume se NE igra: redovi za upis su prazni (desktop ih drži nevidljivim),
   vrijednost stoji samo u redovima sa sumama. */
.celija-sume-prazna {
    background: transparent;
    border-color: transparent;
}

.celija-ukupno {
    background: var(--povrsina-2);
    font-weight: 600;
}

.sume-toggle {
    width: 100%;
    height: 100%;
    color: var(--tekst-slabo);
    background: transparent;
    border: none;
    font-size: 14px;
}

.kockice-red {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 2px 0;
}

/* kockicu crta skin (SVG u Kocka.razor), dugme je samo dodirna površina */
.kocka-dugme {
    padding: 0;
    background: transparent;
    border: none;
    line-height: 0;
}

.kocka-dugme:disabled {
    opacity: .5;
}

.kocka-svg {
    display: block;
}

/* dugmad za stolom su niža od standardnih (prostor ide tabli), ali i dalje ≥40px za prst */
/* Red s dugmadima za stolom: grupa raste do razumne širine pa se CENTRIRA - ranije su se
   tri dugmeta razvlačila preko cijelog monitora. */
.akcije-red {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    padding-bottom: 2px;
    width: min(100%, var(--sirina-sadrzaja));
    margin-inline: auto;
    justify-content: center;
}

/* Dugmad za stolom su niža za 20% (40 -> 32px) - smanjen je SAMO prazan prostor oko teksta,
   veličina slova ostaje ista; ušteđena visina ide tabeli. */
.akcije-red .dugme-glavno,
.akcije-red .dugme-sporedno {
    /* u redu dugmad dijele širinu ravnomjerno, ali nijedno ne prelazi razumnu mjeru */
    flex: 1 1 0;
    width: auto;
    max-width: 200px;
    margin-inline: 0;
    height: 32px;
    min-height: 32px;
    margin-top: 0;
    padding: 0 8px;
    font-size: 14px;
}

/* traka brzine snimka (samo u replay režimu stola) */
.replay-red {
    display: flex;
    align-items: center;
    gap: 8px;
}

.replay-klizac {
    flex: 1 1 auto;
    min-width: 0;
    accent-color: var(--akcenat);
}

.replay-red .dugme-sporedno {
    margin-top: 0;
}

/* --- donji sheet (kontekstne akcije, dijalozi) --- */

.sheet-pozadina {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}

.sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    background: var(--povrsina);
    border-top: 1px solid var(--ivica);
    border-radius: 16px 16px 0 0;
}

.sheet h2 {
    margin: 0;
    font-size: 18px;
}

.sheet-akcije {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sheet-stavka {
    padding: 14px 12px;
    font-size: 16px;
    text-align: left;
    color: var(--tekst);
    background: var(--povrsina-2);
    border: none;
    border-radius: 10px;
}

.sheet-stavka:active {
    background: var(--akcenat-tamni);
}

/* --- Blazor traka za neuhvaćenu grešku --- */

/* Traka stoji na VRHU: na dnu su je preklapala sistemska dugmad telefona (gesture bar), pa se
   "Osvježi" nije moglo kliknuti. Gore je uvijek dostupna, uz razmak za statusnu traku. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
    padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top));
    color: #1b1b1b;
    background: #ffe08a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

/* dodirne mete moraju biti dovoljno velike za prst */
#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    display: inline-block;
    min-width: 44px;
    min-height: 32px;
    padding: 6px 10px;
    font-weight: 600;
    cursor: pointer;
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: calc(6px + env(safe-area-inset-top));
    right: 8px;
}

/* pretpregled klub-taga u izabranim bojama (pozadina + tekst) */
.klub-tag-primjer {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
}

/* Dijalog kluba je grupisan po smislu (identitet / izgled taga / opis / ulazak) - ranije je
   sve bilo u nizu istih polja, pa se nije vidjelo šta se na šta odnosi. */
.grupa-naslov {
    margin: 14px 0 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tekst-slabo);
}

/* obje boje i pretpregled stoje u istom redu - odmah se vidi je li tag čitljiv */
.boje-red {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.boja-izbor {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.boja-izbor input[type="color"] {
    width: 56px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--ivica);
    border-radius: 6px;
    background: none;
}