/* Mahjong za četvoro: sto, ruka, reke, pločice protivnika, traka za uzimanje. Pločice iz tile.css. */
.is-game .felt.mj4{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.mjboard{position:absolute;inset:0}
.mjlayer{position:absolute;inset:0}
.mjboard .mtile{transform-origin:0 0;transition:filter .15s}
.mjboard .mtile.mine{cursor:pointer;z-index:20}
.mjboard .mtile.mine.legal:hover{filter:brightness(1.06)}
.mjboard .mtile.sel{filter:drop-shadow(0 0 6px rgba(240,212,145,.9))}
.mjboard .mtile.hint{filter:drop-shadow(0 0 7px #8ee09b)}
.mjboard .mtile.river.last{filter:drop-shadow(0 0 6px rgba(240,212,145,.95))}
.mjboard .mjback{border-radius:12%;background:linear-gradient(180deg,#2c7a52,#1c5238);box-shadow:inset 0 0 0 2px #e2d2ad,0 2px 4px rgba(0,0,0,.35)}
.mjplate{position:absolute;left:0;top:0;z-index:40;display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:16px;
  background:rgba(20,10,4,.74);border:1px solid rgba(212,176,106,.3);font-size:13px;white-space:nowrap}
.mjplate .w{font-style:normal;font-weight:800;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:12px}
.mjplate.dealer .w{background:#b81f2a;color:#fff}
.mjplate b{font:700 14px var(--sans);max-width:110px;overflow:hidden;text-overflow:ellipsis}
.mjplate small{color:#f0c4d6;font-weight:700}
.mjplate .bt{margin-left:4px;min-width:30px;text-align:center;padding:1px 7px;border-radius:10px;background:rgba(255,255,255,.1);font-weight:800;font-variant-numeric:tabular-nums}
.mjplate.turn{border-color:var(--brass-hi);box-shadow:0 0 0 3px rgba(240,212,145,.25)}
.mjcenter{position:absolute;left:0;top:0;width:180px;z-index:10;display:grid;justify-items:center;gap:2px;text-align:center;pointer-events:none}
.mjcenter b{font:italic 700 16px var(--serif);color:#fff3d6}
.mjcenter span{font:700 12px var(--sans);color:var(--cream-3);letter-spacing:.04em}
.mjcenter em{font:600 13px var(--sans);font-style:normal;color:var(--cream);min-height:18px}
.mjclaim{position:absolute;left:50%;transform:translateX(-50%);z-index:60;display:none;padding:10px 12px;border-radius:16px;background:rgba(20,10,4,.88);
  border:1px solid rgba(212,176,106,.4);box-shadow:0 12px 30px rgba(0,0,0,.45);text-align:center;max-width:calc(100% - 24px)}
.mjclaim.on{display:block}
.mjclaim p{margin:0 0 8px;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.mjclaim div{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.mjclaim .btn{min-height:44px}
.mjclaim-q{width:36px;height:36px;border-radius:50%;border:1px solid rgba(212,176,106,.45);background:none;color:var(--brass-hi);font:800 15px var(--sans);cursor:pointer}
.mjfaan{list-style:none;margin:8px 0;padding:0;display:grid;gap:4px}
.mjfaan li{display:flex;justify-content:space-between;padding:4px 8px;border-radius:8px;background:rgba(255,255,255,.06)}
.mjscroll{overflow-x:auto}
.mjtable{width:100%;border-collapse:collapse;margin:6px 0;font-variant-numeric:tabular-nums}
.mjtable th,.mjtable td{padding:6px;text-align:center;border-bottom:1px solid rgba(212,176,106,.2);white-space:nowrap}
.mjtable tbody th{text-align:left;color:var(--cream-3);font-weight:600}
.mjtable tr.me th,.mjtable tr.me td{color:var(--cream)}
.mjtable td.ok{color:var(--brass-hi)}
@media (max-width:640px){.mjplate{height:28px;padding:0 7px;font-size:12px}.mjplate b{max-width:70px;font-size:12px}}