/* The casino on felt. The Games lobby is a wall of tables on the Furb wall
   grid: each table a plate square drawing its game's live shape, the name
   beneath in the display cut, one mono record line. Choosing a table opens
   its board across the page. Cards are paper; the scratch coating, card
   backs and red roulette numbers are the house dither. Every rule here is
   scoped to .games so the room and the Account keep their own styles.
   Breakpoints: (max-width:599px) (min-width:600px) (max-width:899px) (min-width:900px) (min-width:1180px). */

/* The felt is --plate in both themes, and by night --deep is the same
   colour, so a --deep fill would vanish on it. --felt-deep is the plate's
   own deep step: the Toggle role's fill, drawn in the plate's inks. */
.games{--felt-rule:color-mix(in srgb,var(--on-plate) 32%,transparent);--felt-guide:color-mix(in srgb,var(--on-plate) 16%,transparent);--felt-deep:color-mix(in srgb,var(--on-plate) 16%,var(--plate))}

/* ---------- the lobby ---------- */
.games.at-lobby{padding:var(--space-5) var(--pad) var(--space-7);min-width:0}
.lobby-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-5)}
.lobby-bar .find{flex:1 1 280px;max-width:420px;margin:0}
.lobby-activity{flex:none}
.lobby-activity .n{font:400 var(--type-caption)/1.5 var(--mono);color:var(--mute)}
.lobby-categories{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.lobby-categories .lobby-category{min-height:44px;max-width:100%;white-space:normal}
.lobby-group,.lobby-services{margin-top:var(--space-6)}
.lobby-title{margin-bottom:var(--space-4);padding-top:var(--space-2);border-top:1px solid var(--rule);font:400 var(--type-caption)/1.5 var(--mono);color:var(--mute)}
/* The lobby is one ruled sheet, like the Furb walls. */
.lobby-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--guide)}
.table-tile{min-width:0;padding:var(--space-3) var(--space-3) var(--space-4);border-right:1px solid var(--guide);border-bottom:1px solid var(--guide)}
.table-pick{display:grid;gap:0;width:100%;padding:0;text-align:left;color:var(--ink)}
.table-pick:focus-visible{outline:none}
.table-pick:focus-visible .felt{outline:2px solid var(--ink);outline-offset:3px}
.table-pick:hover .table-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.table-name{margin-top:var(--space-3);font:var(--cut-weight) var(--type-head)/1 var(--sans);font-stretch:var(--cut-stretch);letter-spacing:var(--cut-tracking);overflow-wrap:anywhere}
.table-line{margin-top:var(--space-1);font:400 var(--type-caption)/1.45 var(--mono);color:var(--mute);overflow-wrap:anywhere}
/* Current: the table whose board you came back from. */
.table-pick[aria-current="true"] .felt{outline:2px solid var(--ink);outline-offset:3px}
.table-pick[aria-current="true"] .table-line{color:var(--ink)}
/* Disabled: the reason stands in for the record line. */
.table-pick.off .felt{outline:1px solid var(--guide);outline-offset:-1px}
.table-pick.off .felt>:not(.live-chip){opacity:.4}
.table-pick.off .table-name{color:var(--mute)}
/* Live: a lime chip that says so. */
.live-chip{position:absolute;top:var(--space-3);left:var(--space-3);padding:var(--space-1) var(--space-2);background:var(--lime);color:var(--on-lime);font:600 var(--type-caption)/1.2 var(--sans)}

/* The plate square. Shapes size to it (cqi), so a phone's smaller tile
   draws the same picture. */
.felt{position:relative;display:grid;place-items:center;aspect-ratio:1;overflow:hidden;background:var(--plate);color:var(--on-plate);container-type:inline-size}

.felt-cards{display:flex;gap:4cqi}
.felt-card{display:block;width:21cqi;aspect-ratio:5/7;padding:3cqi;background:var(--on-plate);color:var(--plate);font:700 9cqi/1 var(--sans)}
.felt-card.back{background-color:var(--plate);background-repeat:repeat;image-rendering:pixelated;box-shadow:inset 0 0 0 1px var(--felt-rule)}
.felt-cards:has(>:nth-child(5)) {gap:2.5cqi}
.felt-cards:has(>:nth-child(5)) .felt-card{width:15cqi;padding:2cqi;font-size:7cqi}
.felt-reels{display:grid;grid-template-columns:repeat(var(--reel-columns,3),18cqi);gap:2.5cqi}
.felt-reels span{display:grid;place-items:center;aspect-ratio:1;box-shadow:inset 0 0 0 1px var(--felt-rule);font-size:9.5cqi;line-height:1}
.felt-reels span.line{background:var(--on-plate);color:var(--plate);box-shadow:none}
.felt-number,.felt-glyph{display:grid;justify-items:center;gap:3cqi;text-align:center}
.felt-number b,.felt-glyph b{font:var(--cut-weight) 38cqi/.9 var(--sans);font-stretch:var(--cut-stretch);letter-spacing:var(--cut-tracking)}
.felt-glyph b{font-size:30cqi}
.felt-number small,.felt-glyph small{font:400 var(--type-caption)/1.3 var(--mono);color:var(--on-plate)}
.felt-lights{display:grid;grid-template-columns:repeat(3,15cqi);grid-auto-rows:15cqi;gap:2.5cqi}
.felt-lights i{box-shadow:inset 0 0 0 1px var(--felt-rule)}
.felt-lights i.lit{background:var(--on-plate)}
.felt-lights i.mid{box-shadow:none}
.felt-dice{display:flex;gap:5cqi}
.felt-die{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:20cqi;aspect-ratio:1;padding:3cqi;background:var(--on-plate)}
.felt-die i{display:block}
.felt-die i.pip{place-self:center;width:62%;aspect-ratio:1;background:var(--plate)}
.felt-scratch{display:grid;grid-template-columns:repeat(3,17cqi);gap:2.5cqi}
.felt-scratch span{display:grid;place-items:center;aspect-ratio:1;background:var(--on-plate);color:var(--plate);font:400 7cqi/1 var(--mono)}
.felt-scratch span.coat{background-color:var(--plate);background-repeat:repeat;image-rendering:pixelated;box-shadow:inset 0 0 0 1px var(--felt-rule)}
.felt-grid{display:grid;grid-template-columns:repeat(8,7cqi);grid-auto-rows:7cqi;border-top:1px solid var(--felt-guide);border-left:1px solid var(--felt-guide)}
.felt-grid i{border-right:1px solid var(--felt-guide);border-bottom:1px solid var(--felt-guide)}
.felt-grid i.ship{background:var(--on-plate)}
.felt-grid i.hit{background:var(--lime)}
.felt-grid i.miss{background:radial-gradient(circle,var(--felt-rule) 0 26%,transparent 30%)}
.felt-cylinder{position:relative;width:46cqi;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px var(--felt-rule)}
.felt-cylinder i{position:absolute;top:50%;left:50%;width:12cqi;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--on-plate);transform:translate(-50%,-50%) rotate(var(--turn)) translateY(-14cqi)}
.felt-cylinder i.loaded{background:var(--on-plate)}
.felt-rings{position:relative;display:grid;place-items:center;width:52cqi;aspect-ratio:1}
.felt-rings i,.felt-rings b{grid-area:1/1;border-radius:50%;box-shadow:inset 0 0 0 1px var(--felt-rule)}
.felt-rings i:nth-child(1){width:100%;height:100%}
.felt-rings i:nth-child(2){width:66%;height:66%}
.felt-rings i:nth-child(3){width:34%;height:34%}
.felt-rings b{width:10%;height:10%;background:var(--on-plate)}

/* The services that are not tables: a quiet register. */
.service-columns{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:0 var(--space-6)}
.service-group .group-title{padding:var(--space-2) 0 var(--space-1)}
.service-group .item{padding:var(--space-2) 0;border-top:1px solid var(--guide)}
.service-group .item[aria-current="true"]{padding-left:var(--space-2);box-shadow:inset 2px 0 0 var(--ink);font-weight:600}
.lobby .tables-group{max-width:560px;margin-top:var(--space-6);padding-top:0;border-top:0}
.lobby .tables-group .group-title{margin-bottom:var(--space-2);padding:var(--space-2) 0 0;border-top:1px solid var(--rule)}
.lobby .tables-group .empty,.lobby .tables-list,.lobby .table-note{padding-left:0;padding-right:0}
.lobby>.empty{margin-top:var(--space-6);color:var(--mute)}
.lobby>.empty .chip{margin-top:var(--space-3)}

/* ---------- a table's board, across the page ---------- */
.games.at-table .md-board{max-width:calc(1080px + 2 * var(--pad))}
.games.at-table.battleship .md-board{max-width:none}
.games-back{display:inline-flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);min-height:24px;padding:0;font:400 var(--type-caption)/1.5 var(--mono);color:var(--mute);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--mute);text-underline-offset:.18em}
.games-back:hover{color:var(--ink)}
.games .board-head h3{font:var(--cut-weight) var(--type-title)/var(--leading-statement) var(--sans);font-stretch:var(--cut-stretch);letter-spacing:var(--cut-tracking)}

/* Cards are always paper. Held cards carry the word Held and no fill. */
.games .playing-card{background:var(--on-plate);color:var(--plate);border-color:var(--plate);font:700 var(--type-head)/1 var(--sans)}
.games .playing-card.hidden{background-color:var(--plate);background-repeat:repeat;image-rendering:pixelated;color:var(--on-plate);border-color:var(--plate)}
.games .playing-card.hidden span{visibility:hidden}
.games button.playing-card small{color:var(--plate)}
.games button.playing-card.held{background:var(--on-plate);color:var(--plate);transform:translateY(-6px)}
.games button.playing-card.held small{font-weight:600}

/* Toggles (lounge.css): the deep fill, an ink outline and weight 600. */
.games .scratch-tiers button[aria-pressed="true"] .casino-mono{color:var(--mute)}

/* The scratch ticket: coated in the dither until it is bought. */
.scratch-ticket{display:flex;justify-content:center;margin:var(--space-4) 0;padding:var(--space-5);background:var(--plate)}
.scratch-ticket .felt-scratch{grid-template-columns:repeat(3,72px);gap:var(--space-2)}
.scratch-ticket .felt-scratch span{font-size:var(--type-title)}

/* The last play, on the felt, drawn large. */
.last-play .felt-board{display:flex;justify-content:center;margin-top:var(--space-2);padding:var(--space-5);background:var(--plate);color:var(--on-plate)}
.last-play>.casino-mono{margin-top:var(--space-2)}
.reel-window{display:grid;grid-template-columns:repeat(var(--reel-columns,3),minmax(0,64px));gap:var(--space-1);width:min(100%,360px)}
.reel-window span{display:grid;place-items:center;aspect-ratio:1;background:var(--on-plate);font-size:clamp(20px,5vw,32px);line-height:1}
.felt-board-number{display:grid;justify-items:center;gap:var(--space-2)}
.felt-board-number b{font:var(--cut-weight) var(--type-display)/var(--leading-display) var(--sans);font-stretch:var(--cut-stretch);letter-spacing:var(--cut-tracking)}
.felt-board-number span{font:400 var(--type-caption)/1.5 var(--mono)}
.felt-board-dice{display:flex;align-items:center;gap:var(--space-5)}
.felt-board-dice .felt-dice{gap:var(--space-3)}
.felt-board-dice .felt-die{width:64px;padding:var(--space-2)}
.felt-board-dice b{font:var(--cut-weight) var(--type-statement)/1 var(--sans);font-stretch:var(--cut-stretch)}

/* ---------- bet layouts: the table the bet buttons sit on ---------- */
.svc-board-field{display:grid;gap:var(--space-2);margin-top:var(--space-2)}
.svc-board-field>.svc-field-label{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--space-1) var(--space-4);color:var(--mute)}
.svc-board-field>.svc-field-label .casino-mono{color:var(--ink)}
.bet{position:relative;display:grid;place-content:center;justify-items:center;gap:var(--space-1);min-width:0;padding:var(--space-1);background:transparent;color:var(--on-plate);box-shadow:inset 0 0 0 1px var(--felt-rule);font:400 var(--type-small)/1.1 var(--sans);text-align:center}
.bet b,.bet small,.bet .felt-dice{position:relative}
.bet b{font-weight:400}
.bet small{font:400 var(--type-caption)/1.2 var(--mono)}
.bet .dots{position:absolute;inset:0;background-repeat:repeat;image-rendering:pixelated;pointer-events:none}
.bet .dots~b,.bet .dots~small{padding:0 var(--space-1);background:var(--plate)}
.bet:hover:not(:disabled){box-shadow:inset 0 0 0 2px var(--on-plate)}
.bet:focus-visible{outline:2px solid var(--on-plate);outline-offset:-5px}
/* The chosen bet is a Toggle: the felt's deep fill, a 1px outline in the
   plate's ink and weight 600. Red numbers keep their dots, and the numeral
   keeps a patch of the fill behind it so it stays legible. */
.bet[aria-pressed="true"]{background:var(--felt-deep);color:var(--on-plate);box-shadow:inset 0 0 0 1px var(--on-plate);font-weight:600}
.bet[aria-pressed="true"] b{font-weight:600}
.bet[aria-pressed="true"] .dots~b,.bet[aria-pressed="true"] .dots~small{background:var(--felt-deep)}
.bet[aria-pressed="true"]:hover:not(:disabled){box-shadow:inset 0 0 0 2px var(--on-plate)}
.bet:disabled{color:color-mix(in srgb,var(--on-plate) 55%,transparent)}
.roulette-layout{display:grid;grid-template-columns:minmax(44px,1.1fr) repeat(12,minmax(0,1fr));grid-template-rows:repeat(3,52px) 48px 48px;gap:var(--space-1);padding:var(--space-3);background:var(--plate)}
.roulette-layout .bet{grid-area:var(--area)}
.roulette-layout .bet-0 b{font:var(--cut-weight) var(--type-head)/1 var(--sans);font-stretch:var(--cut-stretch)}
.roulette-note{margin-top:var(--space-1)}
.sicbo-layout{display:grid;gap:var(--space-2);padding:var(--space-3);background:var(--plate)}
.sicbo-sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.bet-side{min-height:76px}
.bet-side b{font:var(--cut-weight) var(--type-head)/1 var(--sans);font-stretch:var(--cut-stretch);letter-spacing:var(--cut-tracking)}
.sicbo-triples{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-2)}
.bet-triple{padding:var(--space-2) var(--space-1);gap:var(--space-1)}
.bet-triple .felt-dice{gap:3px}
.bet-triple .felt-die{width:26px;padding:3px}
.bet-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-2);padding:var(--space-3);background:var(--plate)}
.bet-buttons .bet{min-height:64px}
.bet-buttons .bet b{font:var(--cut-weight) var(--type-lead)/1 var(--sans);font-stretch:var(--cut-stretch)}

@media (max-width:599px){
  .games.at-lobby{padding:var(--space-3) var(--pad) var(--space-6)}
  .lobby-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .table-tile{padding:var(--space-2) var(--space-2) var(--space-3)}
  .table-name{font-size:var(--type-lead)}
  .live-chip{top:var(--space-2);left:var(--space-2)}
  .roulette-layout{grid-template-columns:repeat(3,minmax(0,1fr)) 64px 64px;grid-template-rows:44px repeat(12,40px)}
  .roulette-layout .bet{grid-area:var(--phone-area)}
  .sicbo-triples{grid-template-columns:repeat(3,minmax(0,1fr))}
  .reel-window{grid-template-columns:repeat(var(--reel-columns,3),minmax(0,1fr))}
}
@media (forced-colors:active){
  .felt,.bet,.felt-card,.felt-die,.reel-window span{forced-color-adjust:none}
}

/* Receipts draw the same felt: reels and dice are paper on the plate. */
.games .reel-grid{gap:var(--space-1);padding:var(--space-2);border-color:var(--plate);background:var(--plate)}
.games .reel-cell{background:var(--on-plate)}
.games .die{border-color:var(--plate);background:var(--on-plate)}
.games .die i.pip{background:var(--plate)}

/* A long table shows its first three rows; "Show all" opens the whole table
   in their place, so no row appears twice. (Account boards too.) */
.domain-table-wrap.folded:has(>.domain-all[open])>.domain-preview{display:none}