/* 5line's own furniture: the board and the hand. Everything else its screens
   use — table browser, seats, HUD, banners, result stats — is shared table
   chrome and lives in style.css. */
/* board */
.board-wrap{background:var(--felt-700);border:1px solid var(--felt-line);border-radius:16px;padding:7px}
.board{display:grid;grid-template-columns:repeat(10,1fr);gap:2.5px;container-type:inline-size}
/* a cell is the slot, not the card: the face is real art (games/cards.svg) and
   keeps its own 2:3 shape inside a squarer cell, so the felt shows down both
   sides the way a card laid on a table does */
.cell{aspect-ratio:1/1.15;background:#183226;border-radius:3.5px;position:relative;border:none;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:default;overflow:hidden}
.cell .cellface{width:auto;height:100%;border-radius:4%/2.7%}
.cell.corner{background:linear-gradient(135deg,#E8D9A9,#CBB068)}
.cell.corner::after{content:"★";font-size:14px;color:#8A6E1E}
.cell .oc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
/* a chip covers the middle of the face; it sits low and stays small so the
   card's index corner still says which cell this is */
.cell.has-chip .cellface{opacity:.82}
.cell.has-chip .oc{align-items:flex-end;padding-bottom:1px}
.cell.has-chip .oc i{width:54%}
.cell .oc i{width:74%;aspect-ratio:1;border-radius:50%;font-style:normal;font-size:9px;color:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.oc.c0 i{background:radial-gradient(circle at 35% 30%,#6FA0FF,#2F63D8)}
.oc.c1 i{background:radial-gradient(circle at 35% 30%,#FFAE6B,#D96F23)}
.oc.c2 i{background:radial-gradient(circle at 35% 30%,#BC9CFF,#7C50E0)}
/* glyphs track the board width, so a wider board reads better, not just bigger */
@supports (container-type:inline-size){
  .cell.corner::after{font-size:4.2cqw}
  .cell .oc i{font-size:2.5cqw}
  .cell .lastp{font-size:2.3cqw;line-height:1.6}
}
.cell.seq{box-shadow:0 0 0 2px var(--brass),0 0 9px rgba(217,164,65,.55);z-index:1}
/* where each player last put a card down: team-tinted ring + their initial, so
   two players on one team stay apart. outline, not box-shadow — .seq/.legal own
   that and a line or a legal target must still read through the marker. */
.cell.last{outline:2px solid var(--lastc);outline-offset:-2px;z-index:1}
.cell.last0{--lastc:#2F63D8}
.cell.last1{--lastc:#D96F23}
.cell.last2{--lastc:#7C50E0}
.cell.mine{outline-style:dashed}
.cell .lastp{position:absolute;left:0;bottom:0;z-index:3;padding:0 2px;border-radius:0 3.5px 0 3px;
  background:var(--lastc);color:#fff;font:800 7px/1.6 'Instrument Sans';letter-spacing:.02em}
.cell.legal{box-shadow:0 0 0 2px #7FE0A8;z-index:1;cursor:pointer}
/* hand */
.cards{display:flex;gap:6px;justify-content:center}
/* min-width:0 lets a 7-card hand shrink to fit — without it the glyphs set a
   min-content floor and the last card runs off the right edge on a phone. */
/* the button is only the slot and the shadow — the card inside it is real art,
   at the deck's own 2:3, so the two agree on where the edges are */
.pcard{flex:1 1 0;min-width:0;max-width:84px;aspect-ratio:2/3;background:none;border-radius:7px;cursor:pointer;border:none;
  padding:0;position:relative;box-shadow:0 4px 10px rgba(0,0,0,.35);transition:transform .12s}
.pcard.sel{box-shadow:0 0 0 2.5px #7FE0A8,0 6px 14px rgba(0,0,0,.4);transform:translateY(-6px)}
/* both overlays sit on printed art, so each carries its own plate */
.pcard.dead::after{content:"dead";position:absolute;bottom:6%;left:8%;right:8%;text-align:center;
  font:700 8px 'Instrument Sans';color:#fff;background:rgba(120,58,30,.92);border-radius:4px;
  padding:1px 0;letter-spacing:.06em}
.pcard.dead .cf{filter:grayscale(.5);opacity:.75}
/* Jack role marks: no faces on these cards, so the arrow carries the meaning.
   Down = two-eyed, places a chip. Up = one-eyed, lifts an opponent's chip off. */
.pcard.jack .jarrow{position:absolute;top:5%;right:5%;line-height:1;font-weight:800;font-size:15px;
  width:1.35em;height:1.35em;border-radius:50%;display:grid;place-items:center;color:#fff}
.pcard.jack .jrole{position:absolute;bottom:6%;left:8%;right:8%;text-align:center;color:#fff;border-radius:4px;
  font:700 7px 'Instrument Sans';padding:1px 0;letter-spacing:.07em;text-transform:uppercase}
.pcard.j-place .jarrow,.pcard.j-place .jrole{background:rgba(30,95,58,.92)}
.pcard.j-remove .jarrow,.pcard.j-remove .jrole{background:rgba(120,58,30,.92)}
.pcard.jack.dead::after{content:none}
/* type scales with the card itself, so a 7-card hand and a 3-card one both fill */
@supports (container-type:inline-size){
  .pcard{container-type:inline-size}
  .pcard.dead::after{font-size:13cqw}
  .pcard.jack .jarrow{font-size:22cqw}
  .pcard.jack .jrole{font-size:12cqw}
}