/* ============================================================
   Sedmice – vizualni sistem
   Tamna "glass" tema: dubinski gradijenti, mliječne površine,
   zlatni akcent i fluidne (clamp) mjere.
   ============================================================ */
:root{
  /* podloga i površine */
  --bg0:#06100e; --bg1:#0a1917; --bg2:#0e2420;
  --felt:#15463d; --felt2:#1b5a4c;
  --glass:rgba(255,255,255,.055);
  --glass2:rgba(255,255,255,.09);
  --hair:rgba(255,255,255,.1);
  --hair2:rgba(255,255,255,.18);

  /* tekst */
  --ivory:#eef6f2; --muted:#93aaa3; --ink:#161d1b;

  /* akcenti */
  --gold:#e8c37a; --gold2:#ffdf9e;
  --grad-gold:linear-gradient(135deg,#ffe3a6,#e3b263 55%,#c5903f);
  --mint:#4fd6a3; --red:#d93a2e; --rose:#ffb3ab;
  --blue:#5c9cf0; --crimson:#ef6a5e;
  --line:var(--hair);

  /* geometrija */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --cw:clamp(58px,16vw,88px); --ch:calc(var(--cw)*1.42);
  --pad:clamp(.8rem,3vw,1.35rem);

  /* sjene */
  --sh1:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.28);
  --sh2:0 2px 6px rgba(0,0,0,.35),0 18px 44px rgba(0,0,0,.42);

  /* tipografija */
  --serif:"Instrument Serif",ui-serif,"Iowan Old Style",Palatino,Georgia,serif;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg0);
  color:var(--ivory);
  font-family:var(--sans);
  font-size:clamp(15px,.4vw + 14px,17px);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* mirni ambijentalni sloj – živi iza svega i nikad se ne re-renderuje */
body::before{
  content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42% 38% at 18% 8%,rgba(32,118,98,.5),transparent 70%),
    radial-gradient(38% 34% at 86% 4%,rgba(28,92,120,.42),transparent 70%),
    radial-gradient(46% 42% at 52% 104%,rgba(24,74,56,.5),transparent 70%);
  animation:drift 34s var(--ease) infinite alternate;
}
@keyframes drift{to{transform:translate3d(2.5%,-2%,0) scale(1.08)}}

h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0 0 .5rem;letter-spacing:-.01em;line-height:1.15}
h2{font-size:clamp(1.5rem,3.4vw,2rem)}
h3{font-size:1.2rem}
b,strong{font-weight:700}
button{font:inherit;cursor:pointer;color:inherit}
a{color:var(--gold2)}
:focus-visible{outline:2px solid var(--gold2);outline-offset:3px;border-radius:6px}
::selection{background:rgba(232,195,122,.3)}

/* ---------------- raspored ---------------- */
.wrap{max-width:1040px;margin:0 auto;padding:clamp(1rem,3vw,1.9rem) var(--pad) 3rem}
.sp{flex:1}
.row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:1.1rem}
.row h2{margin:0}

/* zaglavlje (samo <header class="top">; .tslot.top na stolu dijeli naziv klase) */
header.top{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.7rem clamp(.8rem,3vw,1.4rem);
  background:rgba(8,20,18,.72);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--hair);
}
header.top b{
  font-family:var(--serif);font-size:1.5rem;font-weight:400;letter-spacing:.01em;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
header.top span{color:var(--muted);font-size:.93rem}

/* ---------------- dugmad ---------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:42px;padding:.6rem 1.15rem;
  border:1px solid var(--hair2);border-radius:999px;
  background:var(--glass);color:var(--ivory);
  font-weight:600;font-size:.95rem;letter-spacing:.01em;text-decoration:none;white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease),opacity .18s;
}
.btn:hover{background:var(--glass2);border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.pri{
  border-color:transparent;background:var(--grad-gold);color:#2b1f06;font-weight:800;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 20px rgba(217,173,100,.28);
}
.btn.pri::after{
  content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);
  background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.5),transparent 75%);
  transition:transform .65s var(--ease);
}
.btn.pri:hover::after{transform:translateX(130%)}
.btn.pri:hover{filter:brightness(1.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 28px rgba(217,173,100,.38)}
.btn.ghost{background:transparent;border-color:var(--hair);color:var(--muted)}
.btn.ghost:hover{color:var(--ivory);background:var(--glass)}
.btn.danger{border-color:rgba(239,106,94,.5);color:var(--rose);background:rgba(217,58,46,.1)}
.btn.danger:hover{background:rgba(217,58,46,.2);border-color:var(--crimson)}
.btn.sm{min-height:34px;padding:.3rem .8rem;font-size:.86rem}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;filter:none;box-shadow:none}

/* ---------------- površine ---------------- */
.panel{
  background:var(--glass);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:var(--pad);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--sh1);
}
.panel h3{margin-bottom:.8rem;color:var(--gold2)}
.empty{
  color:var(--muted);text-align:center;padding:2.2rem 1rem;
  border:1px dashed var(--hair2);border-radius:var(--r-lg);background:rgba(255,255,255,.015);
}
.tag{
  display:inline-flex;align-items:center;gap:.3rem;
  border:1px solid var(--hair);border-radius:999px;padding:.18rem .66rem;margin:.1rem .22rem .1rem 0;
  font-size:.79rem;font-weight:600;letter-spacing:.015em;color:var(--ivory);
  background:rgba(255,255,255,.04);white-space:nowrap;
}
.tag.gold{border-color:rgba(232,195,122,.5);color:var(--gold2);background:rgba(232,195,122,.1)}
.tag.danger{border-color:rgba(239,106,94,.5);color:var(--rose);background:rgba(217,58,46,.1)}

/* tabovi */
.tabs{display:flex;gap:.25rem;margin-bottom:1.2rem;padding:.25rem;border-radius:999px;background:rgba(0,0,0,.28);border:1px solid var(--hair)}
.tabs button{
  flex:1;border:0;border-radius:999px;background:transparent;color:var(--muted);
  padding:.55rem .6rem;font-weight:600;font-size:.92rem;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.tabs button:hover{color:var(--ivory)}
.tabs button.on{background:var(--glass2);color:var(--ivory);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 8px rgba(0,0,0,.3)}

/* ---------------- forme ---------------- */
label{display:block;margin:.9rem 0 .3rem;font-size:.86rem;font-weight:600;letter-spacing:.02em;color:var(--muted)}
input[type=text],input[type=password],input[type=number],select{
  width:100%;padding:.72rem .85rem;font:inherit;color:var(--ivory);
  background:rgba(0,0,0,.3);border:1px solid var(--hair);border-radius:var(--r-sm);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s;
}
input:focus,select:focus{outline:0;border-color:rgba(232,195,122,.6);background:rgba(0,0,0,.42);box-shadow:0 0 0 4px rgba(232,195,122,.12)}
input::placeholder{color:#6d8580}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chips label{
  margin:0;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  border:1px solid var(--hair);border-radius:999px;padding:.42rem .9rem;
  color:var(--ivory);font-weight:600;font-size:.9rem;background:rgba(255,255,255,.03);
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.chips label:hover{background:var(--glass);border-color:var(--hair2)}
.chips label:has(input:checked){border-color:rgba(232,195,122,.65);background:rgba(232,195,122,.13);color:var(--gold2)}
.chips input{accent-color:var(--gold);width:1rem;height:1rem;margin:0}
.err{min-height:1.3em;margin:.7rem 0 0;font-size:.9rem;color:var(--rose);font-weight:600}
.actions{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.2rem}

/* ---------------- prijava ---------------- */
.auth{max-width:420px;margin:0 auto;padding:clamp(2.5rem,9vh,5.5rem) var(--pad) 3rem;animation:rise .55s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
.auth h1{
  text-align:center;margin-bottom:.1rem;font-size:clamp(3rem,11vw,4.4rem);
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;animation:shimmer 6s var(--ease) infinite;
  filter:drop-shadow(0 6px 24px rgba(232,195,122,.22));
}
@keyframes shimmer{0%{background-position:0 0}50%{background-position:200% 0}100%{background-position:0 0}}
.auth p.sub{text-align:center;color:var(--muted);margin:0 0 1.8rem;font-size:.97rem}
.auth .panel{box-shadow:var(--sh2)}

/* ---------------- lobi ---------------- */
.rooms{display:grid;gap:.7rem}
.room{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  padding:.9rem clamp(.9rem,2.5vw,1.2rem);
  background:var(--glass);border:1px solid var(--hair);border-radius:var(--r-lg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.room:hover{border-color:var(--hair2);background:var(--glass2);transform:translateY(-2px)}
.room .nm{flex:1;min-width:150px}
.room .nm b{display:block;font-family:var(--serif);font-weight:400;font-size:1.3rem;letter-spacing:-.01em}
.room small{display:block;color:var(--muted);font-size:.84rem}

/* ---------------- modal ---------------- */
.modal{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem;
  background:rgba(3,10,9,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:fade .22s var(--ease);
}
.modal .box{
  width:100%;max-width:440px;max-height:92vh;overflow:auto;
  padding:clamp(1.1rem,3.5vw,1.7rem);
  background:linear-gradient(180deg,rgba(28,56,50,.96),rgba(12,30,27,.97));
  border:1px solid var(--hair2);border-radius:var(--r-xl);box-shadow:var(--sh2);
  animation:pop .26s var(--ease);
}
.modal h2{color:var(--gold2);margin-bottom:.9rem}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}}

/* ---------------- statistika / tabele ---------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem;margin:1rem 0}
.stat{
  padding:.95rem 1.1rem;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--hair);
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.stat:hover{border-color:var(--hair2);transform:translateY(-2px)}
.stat .v{
  font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.1rem);line-height:1.05;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat .l{color:var(--muted);font-size:.84rem;font-weight:600;letter-spacing:.01em}
table{width:100%;border-collapse:collapse;font-size:.93rem}
th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--hair);vertical-align:top}
th{color:var(--muted);font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .15s}
tbody tr:hover{background:rgba(255,255,255,.03)}
.tbl{overflow-x:auto;border-radius:var(--r-md)}

/* ---------------- čekaonica ---------------- */
.teams{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1.1rem 0}
.team{
  position:relative;overflow:hidden;padding:1rem;border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--hair);box-shadow:var(--sh1);
}
.team::before{content:"";position:absolute;inset:0 0 auto;height:3px}
.team.t0::before{background:linear-gradient(90deg,transparent,var(--blue),transparent)}
.team.t1::before{background:linear-gradient(90deg,transparent,var(--crimson),transparent)}
.team.t0{background:linear-gradient(180deg,rgba(92,156,240,.1),var(--glass) 45%)}
.team.t1{background:linear-gradient(180deg,rgba(239,106,94,.1),var(--glass) 45%)}
.team h3{margin-bottom:.7rem;font-family:var(--sans);font-size:.82rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.slot{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;min-height:50px;
  padding:.55rem .75rem;margin-bottom:.5rem;border-radius:var(--r-md);
  background:rgba(0,0,0,.26);border:1px solid var(--hair);
}
.slot:last-child{margin-bottom:0}
.slot b{font-weight:700}
.slot.empty{color:var(--muted);border-style:dashed;background:transparent;padding:.55rem .75rem;font-size:.9rem}
.slot .ok{margin-left:auto;color:var(--mint);font-size:.84rem;font-weight:700}
.slot .wait{margin-left:auto;color:var(--muted);font-size:.84rem;font-weight:600}
.dot{width:9px;height:9px;border-radius:50%;background:#566a65;display:inline-block;flex:0 0 auto}
.dot.on{background:var(--mint);box-shadow:0 0 0 3px rgba(79,214,163,.2),0 0 10px rgba(79,214,163,.7)}

/* ============================================================
   KARTE
   ============================================================ */
.card{
  position:relative;flex:0 0 auto;
  --ch:calc(var(--cw)*1.42);
  width:var(--cw);height:var(--ch);padding:0;line-height:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--ink);font-family:var(--sans);
  background:linear-gradient(157deg,#fffefb 0%,#fbf8f1 48%,#f1ece0 100%);
  border:0;border-radius:calc(var(--cw)*.13);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.09),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(0,0,0,.3),0 6px 16px rgba(0,0,0,.3);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease);
}
.card .r{font-size:calc(var(--cw)*.4);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.card .s{font-size:calc(var(--cw)*.42);line-height:1}
.card.red{color:var(--red)}
/* ugaoni indeks (rang) iz data-r atributa */
.card[data-r]::before,.card[data-r]::after{
  content:attr(data-r);position:absolute;
  font-size:calc(var(--cw)*.19);font-weight:800;letter-spacing:-.02em;opacity:.6;
}
.card[data-r]::before{top:calc(var(--cw)*.07);left:calc(var(--cw)*.1)}
.card[data-r]::after{bottom:calc(var(--cw)*.07);right:calc(var(--cw)*.1);transform:rotate(180deg)}
.card.xs::before,.card.xs::after{display:none}
/* poleđina */
.card.back{
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 4px,transparent 4px 8px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 4px,transparent 4px 8px),
    linear-gradient(150deg,#2b6b5c,#174438 60%,#123a30);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.75),inset 0 0 0 3px rgba(0,0,0,.2),
    0 1px 2px rgba(0,0,0,.35),0 6px 16px rgba(0,0,0,.35);
}
.card.back::before,.card.back::after{display:none}
.card.sm{--cw:clamp(38px,9vw,56px)}
.card.xs{--cw:clamp(28px,6.4vw,40px)}
button.card:disabled{filter:brightness(.78) saturate(.8);cursor:default}
button.card:not(:disabled){cursor:pointer}
button.card:not(:disabled):hover{transform:translateY(-10px) scale(1.03);box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 14px 30px rgba(0,0,0,.45);z-index:4}
button.card:not(:disabled):active{transform:translateY(-4px) scale(.99)}
.card.playable{box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 0 0 2px var(--gold),0 0 20px rgba(232,195,122,.45),0 6px 16px rgba(0,0,0,.3);
  animation:playglow 2.4s ease-in-out infinite}
button.card.playable:hover{animation:none}
@keyframes playglow{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 0 0 2px var(--gold),0 0 11px rgba(232,195,122,.3),0 6px 16px rgba(0,0,0,.3)}
  50%{box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 0 0 2px var(--gold2),0 0 24px rgba(232,195,122,.62),0 6px 16px rgba(0,0,0,.3)}
}
.card.win{box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 0 0 3px var(--gold2),0 0 18px 1px rgba(255,223,158,.5),0 3px 9px rgba(0,0,0,.26);z-index:3;
  animation:winglow 2.6s ease-in-out infinite}
@keyframes winglow{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 0 0 3px var(--gold2),0 0 12px 0 rgba(255,223,158,.38),0 3px 9px rgba(0,0,0,.26)}
  50%{box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 0 0 3px var(--gold2),0 0 26px 3px rgba(255,223,158,.65),0 3px 9px rgba(0,0,0,.26)}
}
/* samo zadnje bačena karta "sleti" na sto – ostale se ne pomjeraju */
.tslot .card.fresh{animation:deal .36s var(--ease) both}
@keyframes deal{from{opacity:0;transform:translateY(-30px) scale(1.08) rotate(-4deg)}}

/* ============================================================
   STOL
   ============================================================ */
.game{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}

/* rezultat */
.score{
  position:sticky;top:0;z-index:20;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:.5rem;
  padding:.55rem .8rem;font-size:.92rem;
  background:rgba(8,20,18,.76);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hair);
}
.score .sc{
  grid-column:2;min-width:0;
  display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;
}
.score .tm{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.28rem .85rem;border-radius:999px;font-weight:700;font-size:.86rem;
  border:1px solid var(--hair2);background:rgba(255,255,255,.04);
}
.score .tm.t0{border-color:rgba(92,156,240,.55);background:rgba(92,156,240,.12)}
.score .tm.t1{border-color:rgba(239,106,94,.55);background:rgba(239,106,94,.12)}
.score .tm.me{box-shadow:0 0 0 1px rgba(232,195,122,.55),0 0 14px rgba(232,195,122,.2)}
.score .tm b{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin-left:.1rem;font-variant-numeric:tabular-nums}
.score .meta{color:var(--muted);font-size:.8rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.quit{
  grid-column:3;justify-self:end;display:inline-flex;align-items:center;
  padding:.26rem .72rem;border-radius:999px;
  font-size:.74rem;font-weight:700;letter-spacing:.04em;
  color:rgba(255,179,171,.7);background:rgba(217,58,46,.08);border:1px solid rgba(239,106,94,.28);
  transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.quit:hover{color:var(--rose);background:rgba(217,58,46,.2);border-color:var(--crimson);transform:translateY(-1px)}
.quit-note{color:var(--rose);font-weight:600;font-size:.92rem}

/* filc */
.table{
  flex:1;position:relative;isolation:isolate;
  width:100%;max-width:1060px;margin-inline:auto;
  display:grid;gap:.4rem;padding:clamp(.5rem,2vw,1rem);
  grid-template-columns:minmax(58px,1fr) minmax(0,3.2fr) minmax(58px,1fr);
  grid-template-rows:auto 1fr auto;
  grid-template-areas:". top ." "left center right" "bottom bottom bottom";
  background:
    radial-gradient(70% 58% at 50% 46%,var(--felt2) 0%,var(--felt) 55%,#0e322c 100%),
    var(--bg1);
}
.table::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 120px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.05);
}
/* na širim ekranima filc postaje zaobljen "sto" usred tamne pozadine */
@media(min-width:900px){
  .table{border-radius:var(--r-xl);margin-block:.5rem;box-shadow:var(--sh2)}
}
.table.two{grid-template-columns:1fr;grid-template-areas:"top" "center" "bottom"}
.z-top{grid-area:top}.z-left{grid-area:left}.z-right{grid-area:right}.z-bottom{grid-area:bottom}
.zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;min-width:0}

/* imena igrača */
.name{
  display:inline-flex;align-items:center;gap:.35rem;flex-wrap:wrap;justify-content:center;max-width:100%;
  padding:.24rem .7rem;border-radius:999px;font-size:.84rem;font-weight:700;
  background:rgba(4,14,12,.55);border:1px solid var(--hair);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease);
}
.name.t0{box-shadow:inset 0 0 0 1px rgba(92,156,240,.6)}
.name.t1{box-shadow:inset 0 0 0 1px rgba(239,106,94,.6)}
.name.turn{
  background:var(--grad-gold);color:#2b1f06;border-color:transparent;
  box-shadow:0 0 0 1px rgba(255,223,158,.6),0 0 22px rgba(232,195,122,.45);
  animation:turnglow 2.2s ease-in-out infinite;
}
@keyframes turnglow{50%{box-shadow:0 0 0 1px rgba(255,223,158,.7),0 0 34px rgba(232,195,122,.7)}}
.name .bd{
  font-size:.64rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.1rem .42rem;border-radius:999px;
  background:rgba(255,255,255,.14);color:rgba(238,246,242,.8);
}
.name.turn .bd{background:rgba(43,31,6,.18);color:rgba(43,31,6,.78)}

/* ruke protivnika */
.backs{display:flex;justify-content:center;max-width:100%}
.backs .card{margin-left:calc(var(--cw)*-.58)}
.backs .card:first-child{margin-left:0}
.z-left .backs,.z-right .backs{flex-direction:column}
.z-left .backs .card,.z-right .backs .card{--cw:clamp(30px,6.4vw,46px);margin-left:0;margin-top:calc(var(--ch)*-.74)}
.z-left .backs .card:first-child,.z-right .backs .card:first-child{margin-top:0}
.partner{
  display:flex;gap:.25rem;justify-content:center;flex-wrap:wrap;
  padding:.3rem .4rem;border-radius:var(--r-md);
  background:rgba(4,14,12,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.partner .card{box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 2px 7px rgba(0,0,0,.32)}

/* centar stola */
.center{
  grid-area:center;position:relative;
  display:grid;align-items:center;justify-items:center;
  grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;
  grid-template-areas:". t ." "l c r" ". b .";
  min-height:clamp(220px,40vh,350px);
}
.center::before{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(80%,420px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.055),transparent 68%);
}
.table.two .center{grid-template-columns:1fr;grid-template-rows:1fr 1fr;grid-template-areas:"t" "b";min-height:clamp(210px,36vh,320px)}
.tslot{display:flex;justify-content:center;align-items:center;min-height:calc(var(--ch)*.7)}
.tslot .card{margin-left:calc(var(--cw)*-.52)}
.tslot .card:first-child{margin-left:0}
.tslot .card:nth-child(2){rotate:3.5deg}
.tslot .card:nth-child(3){rotate:-2.5deg}
.tslot .card:nth-child(4){rotate:4.5deg}
.tslot.top{grid-area:t}.tslot.bottom{grid-area:b}.tslot.left{grid-area:l}.tslot.right{grid-area:r}
.deck{grid-area:c;display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.deck .card{box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 6px 16px rgba(0,0,0,.35),4px 4px 0 -1px rgba(23,68,56,.95),5px 5px 0 0 rgba(255,255,255,.3)}
.table.two .deck{position:absolute;left:clamp(.2rem,1.5vw,.8rem);top:50%;translate:0 -50%}

/* status + glavno dugme */
.status{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:3.1rem;padding:.6rem 1rem;font-size:.95rem;
  background:rgba(8,20,18,.72);border-top:1px solid var(--hair);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.status{position:relative;overflow:hidden}
.status.mine{
  background:linear-gradient(180deg,rgba(232,195,122,.17),rgba(232,195,122,.07));
  color:var(--gold2);font-weight:700;box-shadow:inset 0 1px 0 rgba(232,195,122,.4);
}
.status.mine::after{
  content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-100%);
  background:linear-gradient(100deg,transparent 35%,rgba(255,223,158,.15),transparent 65%);
  animation:sheen 3.6s var(--ease) infinite;
}
@keyframes sheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.nosi{
  display:block;margin:.7rem auto .2rem;border:0;border-radius:999px;
  padding:.8rem clamp(2rem,8vw,3rem);
  background:var(--grad-gold);color:#2b1f06;
  font-family:var(--sans);font-weight:800;font-size:clamp(1.05rem,3.4vw,1.3rem);letter-spacing:.1em;
  animation:pulse 2s ease-out infinite;
  transition:filter .18s var(--ease),transform .18s var(--ease);
}
.nosi:hover{filter:brightness(1.08);transform:translateY(-2px)}
.nosi:active{transform:translateY(0) scale(.98)}
@keyframes pulse{
  0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 26px rgba(217,173,100,.35),0 0 0 0 rgba(232,195,122,.55)}
  70%{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 26px rgba(217,173,100,.35),0 0 0 18px rgba(232,195,122,0)}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 26px rgba(217,173,100,.35),0 0 0 0 rgba(232,195,122,0)}
}

/* moja ruka */
.hand{
  display:flex;justify-content:center;align-items:flex-end;gap:.4rem;
  padding:.5rem .6rem clamp(.8rem,3vw,1.2rem);
  max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
}
.hand .card{margin-left:0}

/* ---------------- preklapanja / rezultati ---------------- */
.overlay{
  position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:1rem;
  background:rgba(3,12,10,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:fade .25s var(--ease);
}
.overlay .box{
  width:100%;max-width:470px;text-align:center;
  padding:clamp(1.3rem,4vw,2rem);
  background:linear-gradient(180deg,rgba(30,60,53,.96),rgba(11,28,25,.97));
  border:1px solid rgba(232,195,122,.35);border-radius:var(--r-xl);
  box-shadow:var(--sh2),0 0 60px rgba(232,195,122,.1);
  animation:pop .3s var(--ease);
}
.overlay .big{
  font-family:var(--serif);font-size:clamp(1.9rem,6vw,2.5rem);margin-bottom:.7rem;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;animation:shimmer 3.2s var(--ease) infinite;
}
.overlay p{color:var(--ivory);margin:.5rem 0}
.overlay #cd{font-family:var(--serif);font-size:1.3rem;color:var(--gold2)}
.res{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;text-align:left;
  padding:.6rem .85rem;margin:.45rem 0;border-radius:var(--r-md);
  background:rgba(255,255,255,.04);border:1px solid var(--hair);font-size:.94rem;
}
.res b{font-family:var(--serif);font-weight:400;font-size:1.4rem;font-variant-numeric:tabular-nums}
.res.t0{border-color:rgba(92,156,240,.5);background:linear-gradient(90deg,rgba(92,156,240,.14),transparent)}
.res.t1{border-color:rgba(239,106,94,.5);background:linear-gradient(90deg,rgba(239,106,94,.14),transparent)}
.res .pen{color:var(--rose);font-weight:700;font-size:.88rem}

/* ---------------- toast ---------------- */
#toast{
  position:fixed;left:50%;bottom:1.4rem;z-index:100;max-width:min(90vw,440px);
  padding:.7rem 1.1rem;border-radius:999px;font-weight:600;font-size:.92rem;
  background:rgba(40,12,10,.92);color:#ffd9d4;border:1px solid rgba(239,106,94,.6);
  box-shadow:var(--sh2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;pointer-events:none;translate:-50% 14px;
  transition:opacity .24s var(--ease),translate .24s var(--ease);
}
#toast.show{opacity:1;translate:-50% 0}
#toast.info{background:rgba(10,42,30,.92);border-color:rgba(79,214,163,.6);color:#cdf5e2}

/* ---------------- responzivno ---------------- */
@media(max-width:620px){
  .teams{grid-template-columns:1fr}
  header.top b{font-size:1.3rem}
  .score{grid-template-columns:1fr;row-gap:.4rem;padding:.45rem .5rem}
  .score .sc{grid-column:1;gap:.35rem}
  .score .meta{font-size:.72rem}
  .quit{grid-column:1;justify-self:center}
  .table{grid-template-columns:minmax(44px,1fr) minmax(0,2.6fr) minmax(44px,1fr);gap:.25rem}
  .hand{gap:.3rem}
  .room{gap:.6rem}
  .name{font-size:.78rem;padding:.2rem .55rem;gap:.28rem}
  .name .bd{font-size:.6rem;padding:.08rem .34rem}
  .partner{padding:.22rem .3rem;gap:.2rem}
  .partner .card{--cw:clamp(34px,8.6vw,56px)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  button.card:not(:disabled):hover{transform:none}
}