/* The games as they are drawn (games.js): linked on the pages that draw a
   game's table, next to the script. The felt table, cards and dice that
   every page shares stay in degen.css; here are the boards, the stage a
   board game is played on, and full screen. */

/* ---------- full screen: the game takes the space ---------- */
/* A live table or a replay in full screen (.is-full, set by the script
   on the browser's full-screen change): the panel fills the screen, the
   table box is a size container, and the game's surface scales to the
   largest size that fits it. */
.panel.is-full { position: fixed; inset: 0; z-index: 50; max-width: none; height: 100vh; margin: 0; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; padding: 1.25rem 2rem; border-radius: 0; background: var(--bg); }
:is(#live, #replay, #table).is-full { max-width: none; }
.panel.is-full > .panel-head, .panel.is-full > .player { flex: none; }
.panel.is-full > details, .panel.is-full > p.note { display: none; }
.panel.is-full .live-grid { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 3fr) minmax(16rem, 1fr); align-items: stretch; }
.panel.is-full .table-box { height: 100%; min-height: 0; container-type: size; }
.panel.is-full .table-box > .table-baize { height: 100%; box-sizing: border-box; font-size: 1.2rem; }
.panel.is-full .feed-box { display: flex; flex-direction: column; min-height: 0; }
.panel.is-full .feed { max-height: none; flex: 1; align-content: start; overflow-y: auto; }
@media (max-width: 760px) {
  .panel.is-full { padding: .75rem; }
  .panel.is-full .live-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .panel.is-full .feed-box { display: none; }
  .panel.is-full .table-box > .table-baize { font-size: 1rem; }
}
/* Cards, dice and hands grow with the room they have. */
@container (min-height: 640px) and (min-width: 720px) {
  .table-baize:not(.stage) > .center { zoom: 1.35; }
  .table-baize:not(.stage) > .rail { zoom: 1.15; }
}
@container (min-height: 820px) and (min-width: 960px) {
  .table-baize:not(.stage) > .center { zoom: 1.7; }
}

/* ---------- a board game's stage: a board, not a felt table ---------- */
.table-baize.stage { border-radius: var(--r-lg); border: 1px solid #3a342b; background-color: #1b1915; background-image: radial-gradient(ellipse at 50% 45%, #2c2822 0%, #1b1915 70%); box-shadow: inset 0 0 40px rgba(0, 0, 0, .5); padding: 1rem 1.25rem; min-height: 0; }
.panel.is-full .table-box > .table-baize.stage { padding: .75rem 1rem; gap: .6rem; }

/* ---------- chess ---------- */
.chess { --h: 8; display: grid; grid-template-columns: repeat(var(--w), 1fr); width: min(72vw, 22rem); container-type: inline-size; border: 3px solid #5b4630; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
/* Inside a live table or a replay: as wide as the box allows. */
.table-box { container-type: inline-size; }
.table-box .chess { width: min(100cqw - 3.5rem, 34rem); }
/* Full screen: the largest board that fits both the width and the
   height left by the seat plates and the caption, in its proportions. */
.panel.is-full .table-box .chess { width: min(100cqw - 3rem, (100cqh - 15rem) * var(--w) / var(--h)); }
.chess i { aspect-ratio: 1; display: grid; place-items: center; background: #f0d9b5; color: #17140f; font: normal calc(80cqw / var(--w)) / 1 "DejaVu Sans", "Segoe UI Symbol", "Noto Sans Symbols 2", serif; }
.chess .d { background: #b58863; }
/* One shape for both colours: White filled white with a dark edge,
   Black filled dark with a light edge, readable on either square. */
.chess .w, .pocket .w { color: #fdfcf8; -webkit-text-stroke: .07em #17140f; paint-order: stroke fill; text-shadow: 0 .03em .06em rgba(0, 0, 0, .5); }
.chess .b, .pocket .b { color: #17140f; -webkit-text-stroke: .07em #f3ecdc; paint-order: stroke fill; text-shadow: 0 .03em .06em rgba(0, 0, 0, .35); }
.chess .hl { box-shadow: inset 0 0 0 99px rgba(251, 191, 36, .4); }
.chess .ck { box-shadow: inset 0 0 0 99px rgba(239, 68, 68, .6); }
.chess .x { font-size: calc(56cqw / var(--w)); font-weight: 800; }
.seat .pocket { font: 1.35rem/1 "DejaVu Sans", "Segoe UI Symbol", "Noto Sans Symbols 2", serif; letter-spacing: .05em; }

/* A piece in a block of its own (chess.js), so a move slides it over the
   board: the moving piece above the others, a taken one knocked off. */
.chess i { position: relative; }
.chess .pc { display: block; position: relative; z-index: 1; font: inherit; }
.chess .moving .pc { z-index: 3; }
.chess .ghost { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.chess .ck-new { animation: ck-pulse .9s ease-in-out 2; }
@keyframes ck-pulse { 50% { box-shadow: inset 0 0 0 99px rgba(239, 68, 68, .95); } }

/* ---------- liar's dice: each seat's cup over its dice (dice.js) ---------- */
.dcup { position: relative; display: inline-grid; place-items: end center; width: 3.6em; height: 2.9em; font-size: 1rem; }
.dcup-tray { display: flex; flex-wrap: wrap; justify-content: center; align-items: end; gap: 3px; max-width: 3.6em; }
/* The cup: leather, mouth down, wider at the rim. */
.dcup-shell { position: absolute; left: 50%; bottom: 0; width: 3.2em; height: 2.7em; margin-left: -1.6em; transform-origin: 50% 100%; clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); border-radius: .3em .3em .15em .15em; background: linear-gradient(90deg, #3b2312, #7d4c27 40%, #9b6234 52%, #4a2c17); box-shadow: inset 0 -.35em 0 #2a180b, inset 0 .25em 0 rgba(255, 255, 255, .08); }
/* Tipped back: a seat's own dice in a replay; lifted: a challenge. */
.dcup.peek .dcup-shell, .dcup.open .dcup-shell { transform: translateY(-95%) rotate(-14deg); }
.dcup.peek .dcup-shell { opacity: .55; }
.dcup.gone .dcup-shell { opacity: .3; }
.liar-call { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); padding: .4rem 1rem; border-radius: var(--r-pill); background: #b91c1c; color: #fff; font: 800 var(--fs-lg) var(--font-display); white-space: nowrap; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); pointer-events: none; }

/* ---------- rock-paper-scissors: two hands across the table (rps.js) ---------- */
.rps-hands { position: relative; display: flex; align-items: center; gap: 1.25rem; padding: .25rem .5rem; }
.rps-hand { display: grid; justify-items: center; gap: .2rem; opacity: .8; transition: opacity var(--t-med) var(--ease), filter var(--t-med) var(--ease); }
.rps-hand svg { width: 5.5em; height: 3.8em; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
.rps-hand.s1 svg { transform: scaleX(-1); }
.rps-hand.wait { opacity: .6; }
.rps-hand.won { opacity: 1; filter: drop-shadow(0 0 10px rgba(251, 191, 36, .7)); }
.rps-hands .vs { font: 700 var(--fs-sm) var(--font-display); color: #c9dbd1; }
.rps-count { position: absolute; left: 50%; top: -.4rem; transform: translateX(-50%); font: 700 var(--fs-md) var(--font-display); color: #fde68a; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .chess .ck-new { animation: none; } }

/* ---------- a game's page: its demo machine ---------- */
.slot-demo { position: relative; z-index: 1; display: grid; gap: .5rem; align-content: start; min-width: 0; }
.slot-demo .panel-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; }
.slot-demo .panel-head .note { color: #c9dbd1; }
.slot-demo .sound-toggle { margin-left: auto; }
@media (max-width: 760px) { .slot-demo { order: -1; } }
/* The home page's featured table: the speaker beside the link. */
.featured-head { flex-wrap: wrap; }
.featured-head .sound-toggle { margin-left: auto; }
/* The machine needs the hero's width: below a wide screen the copy goes
   above it. */
@media (max-width: 1100px) { .game-hero:has(.slot-demo) { grid-template-columns: minmax(0, 1fr); } }