/* ČOVJEČE NE LJUTI SE – dizajnerski tokeni i komponente (Faza 2, prijedlog 3. 11. 2026.)
   Izvedeno iz Morska vila tokena (morskavila-tokeni.css v1.1) + vlastiti akcenti igre. */
@font-face{font-family:"Nunito";src:url(fonts/Nunito-var.woff2) format("woff2");font-weight:200 1000;font-display:swap}
@font-face{font-family:"Baloo 2";src:url(fonts/Baloo2-var.ttf) format("truetype");font-weight:400 800;font-display:swap}
:root{
  /* Morska vila (nepromijenjeno) */
  --mv-tirkiz:#0FA3B1; --mv-tirkiz-tamni:#0A707A; --mv-svijetli-tirkiz:#D9F2F4;
  --mv-sunce:#F6C344; --mv-sunce-hover:#E8B634; --mv-sunce-tamno:#D9A21B; --mv-dubina:#123B4A;
  /* Čovječe – vlastiti akcenti */
  --cv-pucina:#0B2B37;      /* najdublje more, pozadina stola */
  --cv-pijesak:#FFF4DC;     /* ploča (otok) */
  --cv-pijesak-tamni:#F1DDB3;
  --cv-koralj:#E35D3A;      /* „ne ljuti se” naljepnica, reakcije, jedenje */
  --cv-koralj-tamni:#B8401F;
  /* Boje igrača (uvijek uz oblik) */
  --p-plava:#2368C4;  --p-plava-svj:#DCE8F8;   /* kvadrat */
  --p-zelena:#12704A; --p-zelena-svj:#D6EEE2;  /* trokut */
  --p-koralj:#E35D3A; --p-koralj-svj:#FBE1D9;  /* krug */
  --p-sunce:#F6C344;  --p-sunce-svj:#FDF0C8;   /* romb */
  --dodir:48px; --r:20px;
  --sjena:0 6px 20px rgba(6,30,40,.28);
  --font:"Nunito",system-ui,sans-serif; --font-naslov:"Baloo 2","Nunito",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:var(--font);color:var(--mv-dubina);font-size:18px;font-weight:600;-webkit-font-smoothing:antialiased}
body.more{min-height:100vh;color:#fff;
  background:
   radial-gradient(120% 60% at 50% -10%, rgba(15,163,177,.55), transparent 60%),
   radial-gradient(90% 50% at 100% 110%, rgba(10,112,122,.55), transparent 60%),
   linear-gradient(180deg,#0F4A5A 0%,var(--mv-dubina) 45%,var(--cv-pucina) 100%);}
.valovi{position:absolute;inset:0;pointer-events:none;opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24'%3E%3Cpath d='M0 12 Q15 2 30 12 T60 12 T90 12 T120 12' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");background-size:120px 24px}
.ekran{position:relative;width:390px;height:844px;overflow:hidden}
.n1{font-family:var(--font-naslov);font-weight:800;line-height:1.05}
h1,h2,h3{font-family:var(--font-naslov);font-weight:800;line-height:1.1}
.mali{font-size:16px;font-weight:600}
/* gornja traka */
.traka{display:flex;align-items:center;gap:8px;padding:12px 14px;position:relative;z-index:2}
.traka .rast{flex:1}
.pil{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px 0 8px;border-radius:999px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.22);color:#fff;font-weight:800;font-size:18px;white-space:nowrap}
.pil .mvb{background:var(--mv-sunce);color:var(--mv-dubina);border-radius:999px;font-size:16px;padding:0 8px;height:24px;display:inline-flex;align-items:center}
.ikona-gumb{width:48px;height:48px;flex:none;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.22)}
/* gumbi */
.gumb{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 22px;border-radius:999px;font-family:var(--font);font-weight:900;font-size:20px;border:0;cursor:pointer;text-decoration:none}
.gumb-sunce{background:var(--mv-sunce);color:var(--mv-dubina);box-shadow:0 5px 0 var(--mv-sunce-tamno),0 10px 18px rgba(0,0,0,.25)}
.gumb-velik{min-height:72px;font-size:28px}
.gumb-bijeli{background:#fff;color:var(--mv-dubina);box-shadow:0 4px 0 #BFD9DD}
.gumb-obrub{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7)}
.gumb-tirkiz{background:var(--mv-tirkiz-tamni);color:#fff;box-shadow:0 4px 0 #07535B}
.gumb-wa{background:#fff;color:var(--mv-dubina);border:2px solid var(--mv-tirkiz-tamni)}
/* kartice */
.kartica{background:#fff;color:var(--mv-dubina);border-radius:var(--r);box-shadow:var(--sjena)}
.kartica-svj{background:var(--mv-svijetli-tirkiz);color:var(--mv-dubina);border-radius:16px}
/* naljepnica „ne ljuti se!” */
.naljepnica{display:inline-block;background:var(--cv-koralj);color:#fff;font-family:var(--font-naslov);font-weight:800;border-radius:12px;padding:2px 12px 0;transform:rotate(-4deg);box-shadow:0 3px 0 var(--cv-koralj-tamni)}
/* znak igre */
.znak{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:.9}
.znak .rijec{font-family:var(--font-naslov);font-weight:800;letter-spacing:-.5px}
/* kocka */
.kocka{width:84px;height:84px;border-radius:20px;background:#fff;box-shadow:inset 0 -6px 0 #D5E3E6,0 8px 18px rgba(0,0,0,.35);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:14px;gap:2px}
.kocka i{display:block;width:16px;height:16px;border-radius:50%;background:var(--mv-dubina);place-self:center}
.kocka i.n{background:transparent}
/* avatari */
.av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:18px;color:#fff;position:relative;border:3px solid #fff}
.bot{font-size:13px;font-weight:900;background:var(--mv-svijetli-tirkiz);color:var(--mv-dubina);border-radius:6px;padding:1px 6px;letter-spacing:.3px}
/* MV potpis */
.mv-potpis{display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;color:#fff;opacity:.95}
.mv-potpis img{height:22px}
.oblik{display:inline-block;vertical-align:-3px}

/* Aplikacija: uspravni mobitel je glavni raspored. */
html, body { min-height: 100%; }
body.more { min-height: 100dvh; }
button, input { font-family: inherit; }
button { cursor: pointer; }
.okvir { width: min(480px, 100%); margin: 0 auto; min-height: 100dvh; position: relative; padding-bottom: 18px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.toast { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; background: #fff; color: var(--mv-dubina); border-radius: 16px; padding: 12px 14px; font-weight: 800; box-shadow: var(--sjena); }
.ekran-app { position: relative; }
.red-imena { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6px; padding: 0 6px; min-height: 58px; align-items: center; }
.igrac { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; border: 2px solid transparent; max-width: 100%; min-width: 0; position: relative; z-index: 2; background: transparent; }
.igrac.desno { flex-direction: row-reverse; justify-self: end; }
.igrac .ime-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 7.2em; }
.igrac.aktivan { background: rgba(246,195,68,.18); border-color: #F6C344; }
.igrac .ime { font-weight: 900; font-size: 17px; display: flex; gap: 4px; align-items: center; }
.reakcija-slot { min-height: 0; display: flex; justify-content: center; padding: 0 12px 4px; position: relative; z-index: 1; }
.reakcija-slot .naljepnica { font-size: 20px; }
.ploca-omot { padding: 0 8px; }
.panel { margin: 8px 12px 0; padding: 12px 14px; border-radius: 20px; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.2); }
.kocka-gumb { background: none; border: 0; padding: 0; border-radius: 20px; }
.kocka-gumb:disabled { opacity: .55; }
.kocka.sest { box-shadow: inset 0 -6px 0 #D5E3E6, 0 0 0 4px #F6C344, 0 8px 18px rgba(0,0,0,.35); }
.traka-vrijeme { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.traka-vrijeme .linija { flex: 1; height: 12px; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; }
.traka-vrijeme .pun { height: 100%; background: #F6C344; border-radius: 99px; }
.traka-vrijeme.koralj .pun { background: #E35D3A; }
.reakcije { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.reakcije button { min-height: 44px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.3); color: #fff; font-weight: 900; font-size: 16px; }
.reakcije button.prva { background: #B8401F; border-color: #B8401F; }
.sjedala { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sjedalo { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 20px; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.22); text-align: center; }
.prsten { position: absolute; left: -6px; top: -6px; }
.modal { position: fixed; inset: 0; z-index: 30; background: rgba(6,25,33,.6); display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow: auto; }
.modal .kartica { width: min(420px, 100%); padding: 22px 18px; text-align: center; }
.skriveno { display: none !important; }
.prekidac { min-width: 48px; min-height: 48px; }
input.kod { width: 100%; min-height: 52px; border-radius: 14px; border: 2px solid var(--mv-tirkiz-tamni); padding: 0 12px; font-size: 18px; font-weight: 800; color: var(--mv-dubina); }
/* Animacije */
.fig { transform-box: fill-box; transform-origin: 50% 60%; }
.anim-krug { transform-box: fill-box; transform-origin: center; }
.moze-prsten { animation: cv-mrav 0.9s linear infinite; }
.cilj { transform-box: fill-box; transform-origin: center; animation: cv-puls 1.1s ease-in-out infinite; }
.igrac.aktivan { animation: cv-sjaj 1.6s ease-in-out infinite; }
.kocka-gumb:not(:disabled) .kocka { animation: cv-poskok 1.2s ease-in-out infinite; }
.kocka-gumb:not(:disabled):active .kocka { transform: scale(.92); animation: none; }
.traka-vrijeme.koralj .pun { animation: cv-treptaj .5s ease-in-out infinite alternate; }
.gumb { transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.gumb:hover { filter: brightness(1.05); }
.gumb:active { transform: translateY(3px); }
.gumb-sunce:active { box-shadow: 0 2px 0 var(--mv-sunce-tamno), 0 5px 10px rgba(0,0,0,.25); }
.mod { transition: transform .15s ease; }
.mod:active { transform: scale(.98); }
.av.ceka { animation: cv-ceka 1.4s ease-in-out infinite; }
.toast:not(.skriveno) { animation: cv-toast .28s cubic-bezier(.2,.7,.3,1); }
.modal { animation: cv-fade .2s ease-out; }
.modal .kartica { animation: cv-modal .3s cubic-bezier(.2,.8,.3,1.2); }
.konfete { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.konfete i { position: absolute; top: 0; display: block; }
@keyframes cv-mrav { to { stroke-dashoffset: -38; } }
@keyframes cv-puls { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: .7; } }
@keyframes cv-sjaj { 0%, 100% { box-shadow: 0 0 0 0 rgba(246,195,68,.0); } 50% { box-shadow: 0 0 0 5px rgba(246,195,68,.28); } }
@keyframes cv-poskok { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-6px) rotate(-4deg); } 60% { transform: translateY(-6px) rotate(4deg); } }
@keyframes cv-treptaj { from { opacity: 1; } to { opacity: .45; } }
@keyframes cv-ceka { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.9); opacity: .55; } }
@keyframes cv-toast { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cv-fade { from { opacity: 0; } }
@keyframes cv-modal { from { transform: translateY(18px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
body.bez-anim *, body.bez-anim *::before, body.bez-anim *::after { animation: none !important; transition: none !important; }
@media (min-width: 1080px) {
  .okvir.siroko { width: min(1240px, 100%); }
  .stol-raspored { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: center; padding: 4px 16px 12px; }
  .stol-raspored .ploca-omot { padding: 0; }
  .stol-raspored .ploca-omot svg { max-height: calc(100dvh - 210px); width: auto; margin: 0 auto; }
}

.ikona-gumb.mala { width: 42px; height: 42px; }
.traka .pil { flex: none; }
.postavke { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.postavke .brzina { flex: 1; display: flex; background: rgba(255,255,255,.12); border-radius: 999px; padding: 3px; min-width: 0; }
.postavke .brzina button { flex: 1; min-height: 36px; border: 0; border-radius: 999px; background: transparent; color: #fff; font-weight: 900; font-size: 14px; padding: 0 4px; }
.postavke .brzina button.on { background: #fff; color: var(--mv-dubina); }
.postavke .brzina button:disabled { opacity: .4; cursor: default; }