/* Remi pe tablă — masa cu formațiile sus, suportul cu piesele jos */
.tile{position:relative;width:72px;height:100px;flex:none;border-radius:12px;box-sizing:border-box;display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(170deg,#fffaf0,#efe4cc 70%,#d9c9a6);box-shadow:0 5px 0 #a8946b,0 9px 14px rgba(0,0,0,.45),inset 0 0 0 2px rgba(255,255,255,.7);
  font-family:var(--display);font-size:58px;line-height:1;transition:transform .12s}
.tile::after{content:"";position:absolute;left:50%;bottom:12px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:currentColor;opacity:.85}
.tile.c0{color:#d8182a}.tile.c1{color:#1d5bd8}.tile.c2{color:#1a1a22}.tile.c3{color:#e08a00}
.tile.jk{color:#c41f8a;font-size:50px}
.tile.jk::after{display:none}
.tile b{font-weight:400;margin-top:-14px}
.tile.sel{transform:translateY(-18px);box-shadow:0 5px 0 #a8946b,0 0 0 5px var(--gold),0 0 26px rgba(255,204,51,.8)}
.tile.took{box-shadow:0 5px 0 #a8946b,0 0 0 4px #5cff8a,0 9px 14px rgba(0,0,0,.45)}
.tile.took.sel{box-shadow:0 5px 0 #a8946b,0 0 0 5px var(--gold),0 0 26px rgba(255,204,51,.8)}
.tile.sm{width:52px;height:72px;border-radius:9px;font-size:42px;box-shadow:0 4px 0 #a8946b,0 6px 10px rgba(0,0,0,.4);cursor:inherit}
.tile.sm::after{width:10px;height:10px;margin-left:-5px;bottom:8px}
.tile.sm b{margin-top:-10px}
.tile.sm.jk{font-size:36px}
.tile.sm.new{box-shadow:0 4px 0 #a8946b,0 0 0 4px #5cff8a}
.tile.sm.fresh{animation:tIn .5s}
@keyframes tIn{from{transform:translateY(-30px) scale(1.3);opacity:0}}

/* masa cu formațiile */
.rTable{position:absolute;left:330px;top:205px;width:1260px;height:440px;box-sizing:border-box;padding:22px;border-radius:34px;z-index:2;
  display:flex;flex-wrap:wrap;align-content:flex-start;gap:16px 22px;overflow:auto;
  background:radial-gradient(ellipse at 50% 40%,#17705e,#0c4a3e 60%,#063028);box-shadow:0 0 0 4px #c9952e,0 0 0 10px #3a1d06,0 30px 70px rgba(0,0,0,.6),inset 0 0 40px rgba(0,0,0,.45)}
.rEmpty{width:100%;text-align:center;font-family:var(--ui);font-weight:700;font-size:28px;color:rgba(255,255,255,.28);margin-top:170px}
.meld{display:flex;gap:4px;padding:8px;border-radius:14px;background:rgba(0,0,0,.18);transition:box-shadow .15s}
.meld.can{cursor:pointer;box-shadow:0 0 0 3px rgba(125,255,154,.75)}
.meld.can:hover{box-shadow:0 0 0 4px #7dff9a,0 0 22px rgba(125,255,154,.6)}
.meld.mine{background:rgba(255,204,51,.12)}

/* pachetul și piesa aruncată */
.rPile{position:absolute;left:1620px;top:330px;width:270px;display:flex;flex-direction:column;align-items:center;gap:24px;z-index:3}
.pDeck{position:relative;width:150px;height:130px;border-radius:18px;background:repeating-linear-gradient(45deg,#1d6a5a 0 10px,#145448 10px 20px);
  box-shadow:0 6px 0 #0a2c25,0 0 0 4px #c9952e,0 12px 20px rgba(0,0,0,.5),6px -6px 0 -2px #145448,6px -6px 0 2px #c9952e;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pDeck span{font-size:56px;color:#fff;line-height:1}
.pDeck small{font-family:var(--ui);font-weight:800;font-size:16px;letter-spacing:2px;color:#d6f5ec}
.pDeck.can,.pDisc.can{animation:canPulse 1.1s infinite}
@keyframes canPulse{50%{box-shadow:0 6px 0 #0a2c25,0 0 0 6px #7dff9a,0 0 36px #7dff9a}}
.pDisc{width:110px;height:140px;border-radius:16px;display:grid;place-items:center;box-shadow:inset 0 0 0 3px rgba(255,255,255,.25)}
.pDisc .ph{font-family:var(--ui);font-weight:800;font-size:15px;letter-spacing:1px;color:rgba(255,255,255,.4)}
.pDisc .tile{cursor:inherit}
.pDisc.can .tile{box-shadow:0 5px 0 #a8946b,0 0 0 5px #7dff9a,0 0 30px #7dff9a}

/* formațiile pregătite în tura curentă */
.stageBox{position:absolute;left:330px;top:655px;width:1260px;height:120px;box-sizing:border-box;padding:10px 16px;border-radius:22px;z-index:4;display:flex;align-items:center;gap:18px;
  background:rgba(10,4,24,.82);box-shadow:0 0 0 3px rgba(92,255,138,.55)}
.sbHead{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:none}
.sbHead b{font-weight:400;font-size:28px;color:#5cff8a;letter-spacing:1px}
.sbHead span{font-family:var(--ui);font-weight:800;font-size:20px;color:#e6dcff}
.sbHead .sbtn{height:40px;font-size:20px;padding:0 14px}
.sbRows{display:flex;gap:16px;overflow-x:auto;flex:1}
.sbRows .meld{cursor:pointer;background:rgba(92,255,138,.12)}

/* suportul */
.rack{position:absolute;left:330px;top:790px;width:1260px;height:270px;box-sizing:border-box;padding:24px 22px 14px;border-radius:30px 30px 0 0;z-index:5;
  background:linear-gradient(180deg,#8a5426,#5c3312 60%,#3c1f08);box-shadow:0 -6px 30px rgba(0,0,0,.5),inset 0 4px 0 rgba(255,210,140,.3),inset 0 -110px 0 -100px rgba(0,0,0,.25)}
.rackTiles{display:flex;flex-wrap:wrap;gap:12px 6px;height:212px;align-content:flex-start}
.rackBtns{position:absolute;right:-300px;top:96px;display:flex;flex-direction:column;gap:12px;width:280px}
.rackBtns .sbtn{width:100%;text-align:center;font-size:24px}
.rCtl{position:absolute;left:1620px;top:660px;width:280px;display:flex;flex-direction:column;gap:14px;z-index:6}
.rCtl .tbtn{width:100%;font-size:30px;padding:14px 10px}
.rMsg{position:absolute;left:960px;top:150px;transform:translateX(-50%);z-index:6;font-family:var(--ui);font-weight:800;font-size:28px;color:#fff4d6;text-shadow:0 2px 6px rgba(0,0,0,.8);white-space:nowrap}

/* plăcuțele jucătorilor */
.plates .pl{position:absolute}
.plates .pl .cnt{display:inline-block;padding:1px 9px;border-radius:9px;background:rgba(255,255,255,.12);margin-left:4px}
.plates .pl .opn{font-style:normal;color:#5cff8a}
.g-remi .seatCtl{left:24px;bottom:auto;top:900px}
.g-remi .waitBox{top:330px}
