/* Mafia: trg sa igračima (široko: elipsa oko table, usko: mreža iznad table), papirna tabla pripovedača sa vešću,
   uputstvom, "No one" i otkrivanjem, karta moje uloge i zapis. Noću preko čoje pada tamno nebo sa mesecom.
   Boje i dugmad iz base.css; čoja ostaje izgled stola koji je igrač izabrao. */
.is-game .felt.mf{touch-action:manipulation}
.mf-wrap{position:absolute;inset:0;display:flex;flex-direction:column;gap:clamp(8px,1.2vh,12px);padding:clamp(8px,1.2vw,14px);overflow:auto}
.mf-wrap.ring{overflow:hidden}
.mf-sky{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:linear-gradient(180deg,rgba(12,18,44,.82),rgba(20,28,60,.6))}
/* mesec samo na širokom stolu (ugao je slobodan); na uskom bi pao preko pločice */
.mf-wrap.ring .mf-sky{background:radial-gradient(circle at calc(100% - 34px) 30px,rgba(242,226,166,.95) 0 14px,rgba(242,226,166,.16) 15px 34px,transparent 35px),linear-gradient(180deg,rgba(12,18,44,.82),rgba(20,28,60,.6))}
.felt.mf.night .mf-sky{opacity:1}

.mf-town{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:8px;flex:none}
.mf-wrap.ring .mf-town{position:absolute;inset:0;display:block;pointer-events:none}
.mf-wrap.ring .mf-p{position:absolute;pointer-events:auto}
.mf-p{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;min-height:58px;padding:6px 10px;
  border-radius:16px;cursor:pointer;color:#fff3d6;font:inherit;text-align:left;background:rgba(20,10,4,.6);border:2px solid rgba(212,176,106,.22);transition:border-color .15s,box-shadow .15s,transform .15s}
.mf-av{grid-row:span 2;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--c,#777);border:2px solid rgba(255,255,255,.55);font:800 17px var(--sans);color:#fff}
.mf-nm{font:700 15px/1.15 var(--sans);overflow-wrap:break-word}
.mf-st{font-size:12px;font-weight:700;line-height:1.2;color:#e9d9b4;overflow-wrap:break-word}
.mf-cnt{position:absolute;top:-9px;right:-6px;min-width:24px;height:22px;padding:0 7px;border-radius:11px;font:800 12px/22px var(--sans);text-align:center;background:#f0d491;color:#2a1d12;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.mf-cnt:empty{display:none}
.mf-cnt.bad{background:#b4232f;color:#fff}
.mf-cnt.good{background:#1f6a34;color:#fff}
.mf-p.me{border-color:rgba(240,212,145,.75)}
.mf-p.can:hover{border-color:#f0d491}
.mf-p.sel{border-color:#ffe08a;box-shadow:0 0 0 3px rgba(255,224,138,.45),0 6px 16px rgba(0,0,0,.4);transform:translateY(-2px)}
.mf-p.ally{border-color:rgba(230,90,90,.85);background:rgba(70,10,12,.7)}
.mf-p.out .mf-av{filter:grayscale(1);opacity:.45}
.mf-p.out .mf-nm{text-decoration:line-through;text-decoration-color:rgba(255,243,214,.6)}
.mf-p.out{background:rgba(20,10,4,.42)}
.mf-p.mf-r-mafia .mf-st{color:#ff9b8f}
.mf-p.mf-r-doctor .mf-st{color:#8ee09b}
.mf-p.mf-r-detective .mf-st{color:#9cc4ff}
.mf-p.hint{animation:mfHint 1s ease-in-out 2}
@keyframes mfHint{50%{box-shadow:0 0 0 6px rgba(255,224,138,.6)}}

.mf-board{position:relative;z-index:1;flex:1 1 auto;min-height:auto;display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:20px;background:#fbf6e8;color:#2a1d12;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.mf-board.mf-off{visibility:hidden}
.mf-wrap.ring .mf-board{position:absolute;flex:none;transform:translateY(-50%);overflow-y:auto}
.mf-wrap.ring .mf-log{flex:0 1 auto}
.mf-when{align-self:flex-start;flex:none;min-height:32px;padding:4px 14px;border:0;border-radius:999px;background:#2a1d12;color:#fbf6e8;font:800 14px var(--sans);letter-spacing:.04em;cursor:pointer}
.felt.mf.night .mf-when{background:#1d2747}
.mf-news{flex:none;font:700 clamp(16px,1.8vw,20px)/1.3 var(--serif)}
.mf-news:empty{display:none}
.mf-say{flex:none;font-size:15px;line-height:1.4;color:#4a3a28}
.mf-acts{flex:none;display:flex;flex-wrap:wrap;gap:8px}
.mf-acts:not(:has(button:not([hidden]))){display:none}
.mf-nobody,.mf-reveal{min-height:44px;padding:6px 14px;border-radius:999px;border:2px solid #cdb98f;background:#fffdf7;color:#2a1d12;font:700 14px var(--sans);cursor:pointer}
.mf-nobody.sel,.mf-reveal[aria-pressed="true"]{border-color:#1d3a63;background:#e6eef9}
.mf-me{flex:none;display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 12px;border:0;border-radius:14px;background:#efe3c7;color:#2a1d12;font:inherit;text-align:left;cursor:pointer}
.mf-me:empty{display:none}
.mf-me small{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6b5030}
.mf-me b{display:block;font:800 17px/1.15 var(--sans)}
.mf-me em{display:block;font-style:normal;font-size:13px;line-height:1.3}
.mf-me em b{display:inline;font:inherit;font-weight:800}
.mf-me em .bad{color:#9b1c26}
.mf-card{flex:none;width:30px;height:40px;border-radius:6px;background:#8a6d3b;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.mf-me.mf-r-mafia .mf-card{background:#9b1c26}
.mf-me.mf-r-doctor .mf-card{background:#2f8a4b}
.mf-me.mf-r-detective .mf-card{background:#1d3a63}
.mf-log{flex:1;min-height:0;overflow:auto;margin:0;padding:6px 4px 0 0;border-top:1px solid #e3d5b4;font-size:13px;line-height:1.4;color:#5a4630}
.mf-log ol{margin:0;padding-left:20px}
.mf-log li{margin:2px 0}

/* usko: pločica uspravno (inicijal gore, ime i stanje ispod), da ime stane bez lomljenja */
/* mreža (svaki sto koji nije krug, i položen telefon sa 6 kolona): pločica uspravno, ime se ne lomi */
.mf-wrap:not(.ring) .mf-town{gap:6px}
.mf-wrap:not(.ring) .mf-p{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;justify-items:center;text-align:center;row-gap:1px;min-height:0;padding:5px 3px;border-radius:12px}
.mf-wrap:not(.ring) .mf-av{grid-row:auto;width:26px;height:26px;font-size:13px;border-width:1.5px}
.mf-wrap:not(.ring) .mf-nm{font-size:13px;max-width:100%;overflow-wrap:anywhere}
/* dugo ime (i broj mesta koji razlikuje dva ista imena) se uvek vidi celo: sitnije, nikad odsečeno */
.mf-nm.long{font-size:.86em}
.mf-wrap:not(.ring) .mf-st{font-size:11px;max-width:100%;overflow-wrap:break-word}
.mf-wrap:not(.ring) .mf-st:empty{display:none}
@media (max-width:640px){
  .mf-board{padding:10px 12px;gap:6px}
  .mf-say{font-size:14px}
  .mf-news{font-size:16px}
}
/* nizak telefon: oznaka noći/dana u redu sa vešću, karta uloge sklonjena (uloga je u zaglavlju, provere su značke na
   pločicama), niže pločice; sa 12 igrača na 320 × 568 sve staje */
@media (max-width:640px) and (max-height:760px){
  .mf-board{display:block}
  .mf-board > *{margin-bottom:6px}
  .mf-when{float:left;min-height:26px;margin:1px 8px 2px 0;padding:2px 10px;font-size:12px}
  .mf-news{font-size:15px}
  .mf-say{font-size:13px;line-height:1.35}
  .mf-me{display:none}
  .mf-wrap:not(.ring) .mf-av{width:20px;height:20px;font-size:11px;border-width:1px}
  .mf-wrap:not(.ring) .mf-p{padding:3px 2px}
  .mf-log{max-height:120px}
}
@media (max-width:400px){
  .mf-wrap:not(.ring) .mf-nm{font-size:12px}
  .mf-wrap:not(.ring) .mf-st{font-size:10px}
}

/* TV: tabla gore (vest i uputstvo), pločice ispod, bez zapisa; veličina slova --tvs računa layout() da sve stane */
.is-tv .mf-wrap{overflow:hidden}
.is-tv .mf-board{order:-1;flex:none;padding:calc(var(--tvs,1)*16px) calc(var(--tvs,1)*22px);gap:calc(var(--tvs,1)*8px)}
.is-tv .mf-when{font-size:calc(var(--tvs,1)*16px);min-height:calc(var(--tvs,1)*30px)}
.is-tv .mf-news{font-size:calc(var(--tvs,1)*30px)}
.is-tv .mf-say{font-size:calc(var(--tvs,1)*21px)}
.is-tv .mf-log{display:none}
.is-tv .mf-wrap .mf-p{padding:calc(var(--tvs,1)*6px) 4px}
.is-tv .mf-wrap .mf-av{width:calc(var(--tvs,1)*34px);height:calc(var(--tvs,1)*34px);font-size:calc(var(--tvs,1)*16px)}
.is-tv .mf-wrap .mf-nm{font-size:calc(var(--tvs,1)*19px)}
.is-tv .mf-wrap .mf-st{font-size:calc(var(--tvs,1)*15px)}
.is-tv .mf-cnt{min-width:calc(var(--tvs,1)*28px);height:calc(var(--tvs,1)*26px);padding:0 calc(var(--tvs,1)*8px);font-size:calc(var(--tvs,1)*15px);line-height:calc(var(--tvs,1)*26px);border-radius:calc(var(--tvs,1)*13px)}
/* TV lobi sa 12 imena na malom TV-u: veliki kod i QR manji, da ništa ne izađe iz stola */
@media (max-height:640px){
  .is-tv .felt.mf .tvjoin.big{gap:10px;padding:14px 22px;font-size:15px}
  .is-tv .felt.mf .tvjoin.big .inv-qr{width:clamp(100px,24vh,150px);height:clamp(100px,24vh,150px)}
  .is-tv .felt.mf .tvjoin.big .tvjoin-code span{width:40px;height:50px;font-size:30px}
}