/* ==========================================================================
   CHAG GAMING — Casino
   The casino's own theme, black and gold. Buttons, panels, icons, the logo
   and the card back are cut from the theme picture (public/assets/theme/);
   what the picture does not show is drawn to match.
   Layout: sticky brand bar, one column capped at 1100px. The blackjack table
   is an oval stage with the betting and play controls docked underneath.
   ========================================================================== */

:root {
	--cg-black: #050505;
	--cg-panel: #121212;
	--cg-panel-light: #1c1c1c;
	--cg-line: #2c2617;
	--cg-gold: #d4af37;
	--cg-gold-bright: #f6dd8c;
	--cg-gold-dim: #8a6d1f;
	--cg-gold-glow: rgba(212, 175, 55, .3);
	--cg-gold-wash: rgba(212, 175, 55, .08);
	--cg-ink: #1a1300;
	--cg-text: #f5f0e6;
	--cg-text-muted: #b8ada0;
	--cg-win: #7bd8a3;
	--cg-loss: #f0919d;
	--cg-disabled-bg: #1a1a1a;
	--cg-disabled-fg: #6f685b;
	--cg-disabled-line: #333;
	--cg-shadow: rgba(0, 0, 0, .6);

	--card-face: #fbf7ec;
	--card-face-shade: #ece4d0;
	--card-ink: #17140d;
	--card-red: #b3182d;
	--card-back: #0d0b06;

	--chip-10: #1d4e89;
	--chip-25: #1f6f43;
	--chip-50: #8c1c2c;
	--chip-100: #26221a;
	--chip-250: #4a1773;
	--chip-500: #a2511a;
	--chip-1000: #c9a227;
	--chip-edge: rgba(255, 255, 255, .75);
	--chip-text: #fff;

	/* What lies under each plate: its own colours. On a display whose scale is not a whole
	   number (Windows at 125 % or 150 %, a machine stretched to the full screen) the nine pieces
	   of a plate do not quite meet, and the dark page showed through the joins as a grid across
	   the button. With the plate's own colours behind it, the joins cannot be seen. */
	--under-gold: linear-gradient(#e0aa3d, #dba53b 11px, #b57917 calc(100% - 11px), #a66b0e) padding-box;
	--under-line: linear-gradient(#0d0d0b, #050504) padding-box;
	--under-tile: linear-gradient(#141412, #030303) padding-box;
	--under-panel: #040404 padding-box;

	--font-display: 'Roboto', 'Segoe UI', system-ui, sans-serif;
	--font-body: 'Roboto', 'Segoe UI', system-ui, sans-serif;
	--card-w: clamp(54px, 14vw, 88px);
	--gutter: 20px;

	color-scheme: dark;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	height: 100%;
}

body {
	margin: 0;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	background: radial-gradient(ellipse at top, #1a1a1a 0%, var(--cg-black) 70%) fixed var(--cg-black);
	color: var(--cg-text);
	font: 400 1rem/1.55 var(--font-body);
	-webkit-text-size-adjust: 100%;
}

[hidden] {
	display: none !important;
}

h1, h2, h3 {
	margin: 0;
	font-family: var(--font-display);
	text-wrap: balance;
}

p {
	margin: 0;
}

a {
	color: var(--cg-gold-bright);
}

:focus-visible {
	outline: 2px solid var(--cg-gold-bright);
	outline-offset: 3px;
}

/* The theme's chip, shown next to every amount */
.coin-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	background: url("../assets/theme/icon-chip.png") center / contain no-repeat;
	margin-right: .35em;
	vertical-align: -.14em;
}

/* ==========================================================================
   Buttons
   Every button is a plate cut from the theme: its corners and edges are the
   theme's own pixels, its middle stretches (border-image). A plate is not a
   box, so glows are drop-shadows, which follow its outline.
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	border: 1px solid transparent;
	background: none;
	font-family: var(--font-display);
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, filter .15s ease;
}

/* The gold button ("Jouer" in the theme) */
.btn-gold {
	border-image: url("../assets/theme/plate-gold.png") 11 14 fill / 11px 14px;
	border-radius: 6px;
	background: var(--under-gold);
	color: var(--cg-ink);
}

/* The outlined button ("Règles" in the theme) */
.btn-ghost, .btn-dark {
	border-image: url("../assets/theme/plate-line.png") 8 12 fill / 8px 12px;
	border-radius: 6px;
	background: var(--under-line);
	color: var(--cg-text);
}

.btn:hover:not(:disabled) {
	filter: brightness(1.12) drop-shadow(0 0 6px var(--cg-gold-glow));
	transform: translateY(-1px);
}

.btn:active:not(:disabled) {
	filter: brightness(.9);
	transform: none;
}

.btn:disabled {
	filter: grayscale(1) brightness(.55);
	cursor: default;
}

.btn-small {
	padding: 7px 14px;
	font-size: .7rem;
}

/* Stake down and up: the theme's tile, with its round plus and a minus made from it */
.step {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid transparent;
	border-image: url("../assets/theme/plate-tile.png") 12 16 fill / 12px 16px;
	border-radius: 10px;
	background: var(--under-tile);
	font-size: 0; /* the sign is the picture; the button keeps its label for screen readers */
	cursor: pointer;
	transition: transform .15s ease, filter .15s ease;
}

.step::before {
	content: "";
	width: 28px;
	height: 28px;
	background: url("../assets/theme/icon-plus.png") center / contain no-repeat;
}

.step-minus::before {
	background-image: url("../assets/theme/icon-minus.png");
}

.step:hover:not(:disabled) {
	filter: brightness(1.15) drop-shadow(0 0 6px var(--cg-gold-glow));
}

.step:active:not(:disabled) {
	filter: brightness(.9);
}

.step:disabled {
	filter: grayscale(1) brightness(.5);
	cursor: default;
}

/* ==========================================================================
   Top bar
   ========================================================================== */

.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 18px;
	padding: 10px var(--gutter);
	background: var(--cg-black);
	border-bottom: 2px solid var(--cg-gold-dim);
	box-shadow: 0 2px 12px var(--cg-shadow);
}

/* The theme's wordmark */
.brand {
	display: block;
	flex: none;
}

.brand img {
	display: block;
	width: auto;
	height: 36px;
}

.topnav {
	display: flex;
	gap: 4px;
	margin-right: auto;
}

.topnav a {
	padding: 6px 12px;
	border-radius: 20px;
	color: var(--cg-text-muted);
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
}

.topnav a:hover {
	color: var(--cg-text);
}

.topnav a[aria-current="page"] {
	color: var(--cg-gold-bright);
	background: var(--cg-gold-wash);
}

/* The theme's credits panel */
.wallet {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.15;
	padding: 5px 18px;
	border: 1px solid transparent;
	border-image: url("../assets/theme/plate-panel.png") 10 12 fill / 10px 12px;
	border-radius: 9px;
	background: var(--under-panel);
}

.wallet-label {
	font-size: .6rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cg-gold);
}

.wallet-value {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--cg-gold-bright);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.account {
	display: flex;
	align-items: center;
	gap: 10px;
}

.logout-icon {
	display: none;
}

.account-name {
	max-width: 16ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--cg-text-muted);
}

/* ==========================================================================
   Page shell
   ========================================================================== */

.page {
	flex: 1;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding-inline: var(--gutter);
	padding-block: 28px 44px;
	/* cards are dealt in from the side: on a phone that must not let the page slide sideways */
	overflow-x: clip;
}

.page-head {
	margin-bottom: 24px;
}

.page-head h1 {
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	letter-spacing: .04em;
	color: var(--cg-gold-bright);
}

.page-head p {
	max-width: 65ch;
	color: var(--cg-text-muted);
}

.panel {
	background: var(--cg-panel);
	border: 1px solid var(--cg-gold-dim);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
	padding: 24px;
}

.site-footer {
	padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--cg-line);
	text-align: center;
	font-size: .75rem;
	color: var(--cg-text-muted);
}

.form-error {
	color: var(--cg-loss);
	font-size: .9rem;
}

/* ==========================================================================
   Hero (loading and sign-in screens)
   ========================================================================== */

/* The theme's logo, at the size it was drawn */
.hero-logo {
	margin: 0 0 6px;
	line-height: 0;
}

.hero-logo img {
	width: min(253px, 62vw);
	height: auto;
}

.hero-tagline {
	font-family: var(--font-display);
	letter-spacing: .4em;
	color: var(--cg-text-muted);
}

.loading {
	padding-block: 16vh;
	text-align: center;
}

.auth {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 400px);
	gap: 56px;
	align-items: center;
	padding-block: 5vh;
}

.auth-hero {
	display: grid;
	gap: 14px;
}

.hero-copy {
	max-width: 46ch;
	font-size: 1.1rem;
	color: var(--cg-text-muted);
}

.hero-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: 10px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--cg-line);
	list-style: none;
	font-size: .85rem;
	color: var(--cg-text-muted);
}

.hero-facts li {
	display: grid;
	gap: 2px;
}

.hero-facts strong {
	font-family: var(--font-display);
	font-size: 1.35rem;
	color: var(--cg-gold-bright);
}

.auth-panel {
	display: grid;
	gap: 18px;
}

.tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	border: 1px solid transparent;
	border-image: url("../assets/theme/plate-panel.png") 10 12 fill / 10px 12px;
	border-radius: 9px;
	background: var(--under-panel);
}

.tabs button {
	padding: 10px 8px;
	background: none;
	border: 1px solid transparent;
	color: var(--cg-text-muted);
	font-family: var(--font-display);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}

.tabs button[aria-selected="true"] {
	border-image: url("../assets/theme/plate-gold.png") 11 14 fill / 11px 14px;
	border-radius: 6px;
	background: var(--under-gold);
	color: var(--cg-ink);
}

.tabs button:focus-visible {
	outline-offset: -3px;
}

.field {
	display: grid;
	gap: 6px;
}

.field label {
	font-size: .7rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cg-text-muted);
}

.field input {
	width: 100%;
	padding: 12px 14px;
	background: var(--cg-black);
	border: 1px solid var(--cg-line);
	border-radius: 8px;
	color: var(--cg-text);
	font: inherit;
}

.field input:focus-visible {
	outline: none;
	border-color: var(--cg-gold);
	box-shadow: 0 0 0 3px var(--cg-gold-glow);
}

.field-hint {
	font-size: .8rem;
	color: var(--cg-text-muted);
}

/* ==========================================================================
   Lobby
   ========================================================================== */

.lobby-games {
	display: grid;
	gap: 20px;
}

.game-tile {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	padding: 28px;
	background: radial-gradient(ellipse at 20% 50%, var(--cg-panel-light) 0%, #080808 75%);
	border: 5px double var(--cg-gold-dim);
	border-radius: 28px;
	box-shadow: 0 0 40px rgba(0, 0, 0, .5), inset 0 0 60px rgba(212, 175, 55, .05);
	color: inherit;
	text-decoration: none;
}

.tile-art {
	--card-w: 78px;
	display: flex;
	padding-left: calc(var(--card-w) * .5);
}

.tile-art .card:first-child {
	transform: rotate(-7deg);
}

.tile-art .card:last-child {
	transform: translateY(6px) rotate(6deg);
}

.tile-body {
	display: grid;
	gap: 10px;
	justify-items: start;
}

.tile-body h2 {
	font-size: 1.7rem;
	color: var(--cg-gold-bright);
	letter-spacing: .04em;
}

.tile-body p {
	color: var(--cg-text-muted);
}

.tables-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 14px;
}

.table-card {
	display: grid;
	justify-items: start;
	gap: 6px;
	padding: 18px;
	background: var(--cg-panel);
	border: 1px solid var(--cg-gold-dim);
	border-radius: 16px;
	color: inherit;
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}

.table-card:hover {
	border-color: var(--cg-gold);
	transform: translateY(-2px);
}

.table-card h3 {
	font-size: 1.05rem;
	letter-spacing: .06em;
	color: var(--cg-gold-bright);
}

.seat-dots {
	display: flex;
	gap: 5px;
	padding-block: 4px;
}

.seat-dot {
	width: 11px;
	height: 11px;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 50%;
}

.seat-dot-on {
	background: var(--cg-gold);
	border-color: var(--cg-gold);
}

.table-count {
	font-size: .8rem;
	color: var(--cg-text-muted);
	font-variant-numeric: tabular-nums;
}

.table-players {
	min-height: 2.9em;
	margin-bottom: 4px;
	font-size: .85rem;
	overflow-wrap: anywhere;
}

.game-tile-soon {
	position: relative;
	padding: 20px 24px;
	border: 1px dashed var(--cg-gold-dim);
	border-radius: 16px;
	color: var(--cg-text-muted);
}

.game-tile-soon h2 {
	font-size: 1.05rem;
	color: var(--cg-text);
	padding-right: 90px;
}

.soon-tag {
	position: absolute;
	top: 18px;
	right: 20px;
	padding: 2px 10px;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 20px;
	font-size: .65rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cg-gold-bright);
}

.board-panel {
	display: grid;
	gap: 10px;
}

.board-panel h2 {
	font-size: 1.1rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cg-gold-bright);
}

.board-mini {
	margin: 0;
	padding: 0;
	list-style: none;
}

.board-mini li {
	display: grid;
	grid-template-columns: 2ch minmax(0, 1fr) auto;
	gap: 12px;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: 1px solid var(--cg-line);
	font-variant-numeric: tabular-nums;
}

.board-rank {
	font-family: var(--font-display);
	color: var(--cg-gold);
}

.board-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.board-link {
	justify-self: start;
	font-size: .85rem;
}

/* --- Home page: the two ways in, who is playing, a few machines, the boards --- */

.home-doors {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.home-door {
	gap: 22px;
	padding: 24px;
	transition: border-color .2s ease, transform .2s ease;
}

.home-door:hover {
	border-color: var(--cg-gold);
	transform: translateY(-2px);
}

.home-door .tile-art {
	--card-w: 64px;
}

.home-door .tile-body h2 {
	font-size: 1.45rem;
}

/* three machines, fanned like the two cards of the other door */
.home-thumbs {
	align-items: center;
	padding-left: 0;
}

.home-thumbs .game-thumb {
	width: 58px;
	height: 58px;
	box-shadow: 0 4px 10px var(--cg-shadow);
}

.home-thumbs .game-thumb:nth-child(1) {
	transform: rotate(-8deg);
}

.home-thumbs .game-thumb:nth-child(2) {
	position: relative;
	z-index: 1;
	margin-inline: -14px;
	transform: translateY(-6px);
}

.home-thumbs .game-thumb:nth-child(3) {
	transform: rotate(8deg);
}

.home-block {
	display: grid;
	gap: 14px;
	margin-top: 28px;
}

.home-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.home-heading .lobby-heading {
	margin-top: 0;
}

.home-boards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
	margin-top: 32px;
}

/* A win: who and at which game, then how much */
.board-mini.wins-mini li {
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 8px 0;
}

.wins-who {
	display: grid;
	min-width: 0;
}

.wins-game {
	overflow: hidden;
	color: var(--cg-text-muted);
	font-size: .78rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.board-title {
	margin: 28px 0 10px;
	font-size: 1.1rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cg-gold-bright);
}

.board-note {
	color: var(--cg-text-muted);
	font-size: .9rem;
}

.is-win {
	color: var(--cg-win);
}

.is-loss {
	color: var(--cg-loss);
}

.is-even {
	color: var(--cg-text-muted);
}

/* ==========================================================================
   Playing cards (drawn in CSS so they stay sharp at any size)
   ========================================================================== */

.hand {
	display: flex;
	justify-content: center;
	/* cards overlap by half; this offsets the first card's negative margin */
	padding-left: calc(var(--card-w) * .5);
	min-height: calc(var(--card-w) * 1.4);
}

.hand-wrap {
	position: relative;
	padding-bottom: 16px;
}

/* The total sits astride the bottom edge of its hand */
.hand-wrap .total-badge {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	min-width: 42px;
	min-height: 1.8em;
	padding: 2px 10px;
	font-size: .95rem;
	line-height: 1.5;
	box-shadow: 0 2px 8px var(--cg-shadow);
}

.card, .card-slot {
	flex: none;
	width: var(--card-w);
	height: calc(var(--card-w) * 1.4);
	margin-left: calc(var(--card-w) * -.5);
	border-radius: calc(var(--card-w) * .09);
}

.card {
	position: relative;
	background: linear-gradient(160deg, var(--card-face), var(--card-face-shade));
	color: var(--card-ink);
	box-shadow: 0 4px 10px var(--cg-shadow), 0 0 0 1px rgba(212, 175, 55, .35);
	font-family: var(--font-display);
	font-size: calc(var(--card-w) * .25);
	font-weight: 700;
	line-height: 1;
	user-select: none;
}

.card-red {
	color: var(--card-red);
}

.card-corner {
	position: absolute;
	top: 7%;
	left: 9%;
	display: grid;
	justify-items: center;
	gap: .08em;
}

.card-corner span {
	font-size: .85em;
}

.card-pip {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding-top: 12%;
	font-size: 2.1em;
}

/* The theme's card back */
.card-back {
	background: var(--card-back) url("../assets/theme/card-back.png") center / 100% 100% no-repeat;
	box-shadow: 0 4px 10px var(--cg-shadow);
}

/* Empty seat marker shown before the first deal */
.card-slot {
	border: 1px dashed var(--cg-gold-dim);
	opacity: .5;
}

.card-slot + .card-slot {
	margin-left: 8px;
}

@keyframes deal-in {
	from {
		opacity: 0;
		transform: translate(46px, -64px) rotate(9deg);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes flip-in {
	from {
		transform: rotateY(90deg);
	}
	to {
		transform: none;
	}
}

.deal-in {
	animation: deal-in .32s cubic-bezier(.2, .8, .3, 1) both;
	animation-delay: var(--delay, 0ms);
}

.flip-in {
	animation: flip-in .28s ease-out both;
}

/* ==========================================================================
   Live blackjack table
   ========================================================================== */

.table-bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: baseline;
	gap: 12px;
	max-width: 1000px;
	margin: 0 auto 12px;
}

.table-back {
	justify-self: start;
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cg-text-muted);
}

.table-back:hover {
	color: var(--cg-gold-bright);
}

.table-bar h1 {
	font-size: 1.15rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cg-gold-bright);
}

.table-status {
	justify-self: end;
	text-align: right;
	font-size: .85rem;
	color: var(--cg-text-muted);
	font-variant-numeric: tabular-nums;
}

.table-status-you {
	color: var(--cg-gold-bright);
	font-weight: 700;
}

.table-oval {
	max-width: 1000px;
	margin: 0 auto;
	padding: 22px 36px 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	background: radial-gradient(ellipse at center, var(--cg-panel-light) 0%, #060606 75%);
	border: 5px double var(--cg-gold-dim);
	border-radius: 130px / 70px;
	box-shadow: 0 0 50px rgba(0, 0, 0, .65), inset 0 0 70px rgba(212, 175, 55, .06);
}

.table-section {
	display: grid;
	justify-items: center;
	gap: 8px;
	width: 100%;
}

.seat-label {
	font-size: .85rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--cg-gold-bright);
}

.total-badge {
	display: inline-block;
	min-width: 50px;
	min-height: 2.05em;
	padding: 4px 10px;
	background: var(--cg-black);
	border: 1px solid var(--cg-gold-dim);
	border-radius: 20px;
	color: var(--cg-gold-bright);
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.total-badge:empty {
	visibility: hidden;
}

.table-banner {
	text-align: center;
}

.table-banner p {
	margin: 2px 0;
	font-family: var(--font-display);
	font-size: .68rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cg-gold-dim);
}

.table-banner p:first-child {
	font-size: .8rem;
	color: var(--cg-gold-bright);
}

/* Five seats along the player side of the table */
.seats {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
}

.seat {
	--card-w: 48px;
	display: grid;
	align-content: start;
	justify-items: center;
	gap: 8px;
	min-width: 0;
	min-height: 168px;
	padding: 10px 6px;
	background: rgba(0, 0, 0, .28);
	border: 1px solid var(--cg-line);
	border-radius: 14px;
	color: inherit;
	font: inherit;
	transition: border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.seat-you {
	background: var(--cg-gold-wash);
	border-color: var(--cg-gold-dim);
}

.seat-turn {
	border-color: var(--cg-gold);
	box-shadow: 0 0 18px var(--cg-gold-glow);
}

.seat-away {
	opacity: .55;
}

.seat-head {
	display: grid;
	justify-items: center;
	max-width: 100%;
	line-height: 1.3;
}

.seat-name {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--font-display);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cg-gold-bright);
}

/* The player's rank badge, in front of their name */
.seat-who {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	min-width: 0;
}

.seat-who .seat-name {
	min-width: 0;
}

.seat-who .rank-badge {
	width: 24px;
	height: 24px;
}

.seat-balance {
	font-size: .75rem;
	color: var(--cg-text-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.seat-note {
	align-self: center;
	font-size: .78rem;
	text-align: center;
	color: var(--cg-text-muted);
}

.seat-note-bet {
	padding: 3px 10px;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 20px;
	color: var(--cg-gold-bright);
	font-variant-numeric: tabular-nums;
}

.seat-empty {
	align-content: center;
	border-style: dashed;
	color: var(--cg-text-muted);
	font-size: .8rem;
}

.seat-open {
	cursor: pointer;
}

.seat-open:hover {
	border-color: var(--cg-gold);
	background: var(--cg-gold-wash);
}

.seat-cta {
	font-family: var(--font-display);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cg-gold-bright);
}

.seat-hands {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 8px;
}

/* One column per hand: cards with their total, then stake and outcome */
.hand-seat {
	display: grid;
	justify-items: center;
	gap: 4px;
	padding: 4px;
	border: 1px solid transparent;
	border-radius: 10px;
	transition: opacity .25s ease, border-color .25s ease;
}

/* With a split, the hand waiting its turn steps back */
.hand-seat-waiting {
	opacity: .55;
}

.hand-seat-active {
	border-color: var(--cg-gold-dim);
}

.hand-meta {
	display: grid;
	justify-items: center;
	gap: 3px;
	min-height: 1.5em;
	font-size: .78rem;
	color: var(--cg-text-muted);
	font-variant-numeric: tabular-nums;
}

.hand-outcome {
	padding: 1px 8px;
	border: 1px solid currentColor;
	border-radius: 20px;
	font-family: var(--font-display);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.seat .hand-wrap .total-badge {
	min-width: 34px;
	padding: 1px 8px;
	font-size: .82rem;
}

/* ==========================================================================
   Dock: betting, play and result controls under the table
   ========================================================================== */

.dock {
	max-width: 560px;
	min-height: 150px;
	margin: 18px auto 0;
	display: grid;
	align-content: start;
	gap: 12px;
	text-align: center;
}

.dock-panel {
	display: grid;
	justify-items: center;
	gap: 14px;
}

.dock-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.dock-note {
	padding-top: 10px;
	color: var(--cg-text-muted);
}

.link-button {
	justify-self: center;
	padding: 4px 8px;
	background: none;
	border: 0;
	color: var(--cg-text-muted);
	font: inherit;
	font-size: .85rem;
	text-decoration: underline;
	cursor: pointer;
}

.link-button:hover {
	color: var(--cg-gold-bright);
}

.dock-copy {
	max-width: 52ch;
	color: var(--cg-text-muted);
}

.bet-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	width: 100%;
}

.bet-row .btn-ghost, .bet-row .step-minus, .bet-row-undo {
	justify-self: end;
}

/* Taking chips back at the betting tables: the last one, or all of them */
.bet-row-undo {
	display: flex;
	gap: 8px;
}

.bet-row .btn-gold, .bet-row-go {
	justify-self: start;
}

/* Validating the chips, or putting the last bets back down in one go */
.bet-row-go {
	display: flex;
	gap: 8px;
}

.bet-row-go .btn {
	white-space: nowrap;
}

/* The dock of the betting tables holds that one button more: it is wider, its row as wide as what it holds */
.bets-dock {
	max-width: 800px;
}

.bets-dock .dock-note, .bets-dock .dock-copy {
	max-width: 560px;
	margin-inline: auto;
}

#bets-controls .bet-row {
	grid-template-columns: auto auto auto;
	justify-content: center;
}

@media (max-width: 900px) {
	.bet-row-go {
		flex-direction: column;
		gap: 4px;
	}

	.bet-row-go .btn {
		padding-block: 6px;
	}
}

/* The stake: the theme's information panel, chip included */
.bet-pill {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 120px;
	padding: 5px 18px;
	border: 1px solid transparent;
	border-image: url("../assets/theme/plate-panel.png") 10 12 fill / 10px 12px;
	border-radius: 9px;
	background: var(--under-panel);
	line-height: 1.2;
}

.bet-pill-label {
	font-size: .6rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cg-text-muted);
}

.bet-pill-value {
	display: flex;
	align-items: center;
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--cg-gold-bright);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bet-pill-value .coin-icon {
	flex: none;
	width: .85em;
	height: .85em;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.chip {
	width: 58px;
	height: 58px;
	padding: 0;
	border: 4px dashed var(--chip-edge);
	border-radius: 50%;
	background: var(--chip);
	color: var(--chip-text);
	font-family: var(--font-display);
	font-size: .95rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 0 0 2px var(--chip), 0 4px 8px var(--cg-shadow);
	transition: transform .15s ease, opacity .15s ease;
}

.chip-10 { --chip: var(--chip-10); }
.chip-25 { --chip: var(--chip-25); }
.chip-50 { --chip: var(--chip-50); }
.chip-100 { --chip: var(--chip-100); border-color: var(--cg-gold); }
.chip-250 { --chip: var(--chip-250); }
/* two chips the theme does not show, drawn like its five: copper, and the theme's gold */
.chip-500 { --chip: var(--chip-500); }
.chip-1000 { --chip: var(--chip-1000); border-color: rgba(26, 19, 0, .6); color: var(--cg-ink); }

.chip:hover:not(:disabled) {
	transform: translateY(-4px);
}

.chip:disabled {
	opacity: .3;
	cursor: default;
}

.play-buttons {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
}

.play-buttons .btn {
	min-height: 54px;
	padding-inline: 8px;
}

.result-headline {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--cg-gold-bright);
	text-wrap: balance;
}

.result-amount {
	font-family: var(--font-display);
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

/* Under the result: what was staked and what came back */
.result-detail {
	color: var(--cg-text-muted);
	font-size: .95rem;
	font-variant-numeric: tabular-nums;
}

.rules {
	max-width: 760px;
	margin: 28px auto 0;
	padding-top: 14px;
	border-top: 1px solid var(--cg-line);
}

.rules summary {
	font-family: var(--font-display);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cg-gold-bright);
	cursor: pointer;
}

.rules-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px 32px;
	margin-top: 16px;
}

.rules-grid h3 {
	margin-bottom: 4px;
	font-size: .95rem;
	color: var(--cg-gold-bright);
}

.rules-grid p {
	font-size: .92rem;
	color: var(--cg-text-muted);
}

/* ==========================================================================
   Leaderboard
   ========================================================================== */

.table-scroll {
	overflow-x: auto;
}

.board {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.board th {
	padding: 10px 12px;
	border-bottom: 1px solid var(--cg-gold-dim);
	text-align: left;
	font-size: .65rem;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--cg-text-muted);
}

.board td {
	padding: 12px;
	border-bottom: 1px solid var(--cg-line);
	white-space: nowrap;
}

.board .num {
	text-align: right;
}

.board .board-rank {
	width: 1%;
}

.board .board-player {
	width: 100%;
	max-width: 0;
}

.board-player > div {
	display: flex;
	align-items: center;
	min-width: 0;
}

.you-tag {
	flex: none;
}

.board .is-you td {
	background: var(--cg-gold-wash);
}

.you-tag {
	margin-left: 8px;
	padding: 1px 8px;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 20px;
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cg-gold-bright);
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 860px) {
	/* One column, with the form moved up right under the logo */
	.auth {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: 14px;
		padding-block: 0;
		text-align: center;
	}

	.auth-hero {
		display: contents;
	}

	.auth-panel {
		order: 1;
		width: 100%;
		max-width: 440px;
		margin-block: 10px;
		text-align: left;
	}

	.hero-copy {
		order: 2;
	}

	.hero-facts {
		order: 3;
		justify-content: center;
		width: 100%;
	}

	.home-doors, .home-boards {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 700px) {
	:root {
		--gutter: 16px;
	}

	.topbar {
		gap: 8px 12px;
	}

	.brand {
		margin-right: auto;
	}

	.brand img {
		height: 30px;
	}

	.topnav {
		order: 5;
		flex-basis: 100%;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2px;
		margin-right: 0;
	}

	/* five sections for an administrator: they must fit across a phone */
	.topnav a {
		padding: 4px 7px;
		font-size: .7rem;
		letter-spacing: .06em;
	}

	.account-name, .logout-text {
		display: none;
	}

	.logout-icon {
		display: block;
	}

	#logout-button {
		padding: 7px 9px;
	}

	.page {
		padding-block: 14px 32px;
	}

	/* At a table the site nav gives way: the Tables link in the bar leads back */
	.at-table .topnav {
		display: none;
	}

	.table-bar {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 2px 12px;
		margin-bottom: 8px;
	}

	.table-bar h1 {
		justify-self: end;
		font-size: .95rem;
	}

	.table-status {
		grid-column: 1 / -1;
		justify-self: center;
		text-align: center;
	}

	.table-oval {
		padding: 14px 10px 16px;
		gap: 8px;
		border-radius: 60px / 40px;
	}

	.seats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 6px;
	}

	.seats-watching {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.seat {
		--card-w: 30px;
		gap: 4px;
		min-height: 96px;
		padding: 6px 2px;
		border-radius: 10px;
	}

	/* Small cards keep only their corner, a little larger */
	.seat .card {
		font-size: calc(var(--card-w) * .38);
	}

	.seat .card-pip {
		display: none;
	}

	.seat .hand-wrap {
		padding-bottom: 10px;
	}

	.seat .hand-wrap .total-badge {
		min-width: 28px;
		min-height: 0;
		padding: 0 6px;
		font-size: .72rem;
	}

	.seat-name {
		font-size: .66rem;
	}

	.seat-who {
		gap: 3px;
	}

	.seat-who .rank-badge {
		width: 18px;
		height: 18px;
	}

	.seat-who .rank-badge-unranked {
		font-size: .66rem;
	}

	.seat-you .seat-who .rank-badge {
		width: 24px;
		height: 24px;
	}

	.seat-balance, .seat-note, .hand-meta {
		font-size: .68rem;
	}

	.seat-cta {
		font-size: .62rem;
	}

	.hand-seat {
		padding: 2px;
	}

	/* My own seat: full width under the others, with readable cards */
	.seat-you {
		--card-w: 52px;
		grid-column: 1 / -1;
		order: 1;
		min-height: 0;
		padding: 8px;
	}

	.seat-you .card {
		font-size: calc(var(--card-w) * .25);
	}

	.seat-you .card-pip {
		display: grid;
	}

	.seat-you .hand-wrap {
		padding-bottom: 14px;
	}

	.seat-you .hand-wrap .total-badge {
		min-width: 38px;
		padding: 1px 8px;
		font-size: .85rem;
	}

	.seat-you .seat-name {
		font-size: .78rem;
	}

	.seat-you .seat-balance, .seat-you .hand-meta {
		font-size: .78rem;
	}
}

@media (max-width: 520px) {
	.wallet {
		padding-inline: 12px;
	}

	/* The tables are what matters on a phone: the intro shrinks to make room */
	.game-tile {
		grid-template-columns: minmax(0, 1fr);
		padding: 18px 20px;
		border-radius: 20px;
	}

	.tile-art {
		display: none;
	}

	.tile-body h2 {
		font-size: 1.3rem;
	}

	.tile-body p {
		font-size: .92rem;
	}

	.tables-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.table-card {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 2px 12px;
		padding: 14px 16px;
	}

	.table-card > * {
		grid-column: 1;
	}

	.table-card .btn {
		grid-column: 2;
		grid-row: 1 / span 4;
	}

	.table-players {
		min-height: 0;
		margin-bottom: 0;
	}

	.hero-facts {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
		font-size: .78rem;
	}

	.hero-facts strong {
		font-size: 1.15rem;
	}

	.play-buttons {
		gap: 8px;
	}

	.play-buttons .btn {
		padding-inline: 4px;
		font-size: .72rem;
		letter-spacing: .04em;
	}

	/* Keep the whole round on one phone screen */
	.table-banner p + p {
		display: none;
	}

	/* seven chips across a phone */
	.chips {
		gap: 6px;
	}

	.chip {
		width: 44px;
		height: 44px;
		border-width: 3px;
		font-size: .78rem;
	}

	.dock {
		margin-top: 12px;
		gap: 8px;
	}

	.dock-panel {
		gap: 10px;
	}

	.dock-actions {
		gap: 8px;
	}

	.dock-actions .btn, .bet-row .btn {
		padding-inline: 12px;
		font-size: .78rem;
	}

	.bet-row {
		grid-template-columns: auto auto auto;
		justify-content: center;
		gap: 8px;
	}

	.bet-pill {
		min-width: 96px;
		padding-inline: 10px;
	}

	.result-headline {
		font-size: 1.25rem;
	}

	.result-amount {
		font-size: 1.7rem;
	}

	.board {
		font-size: .9rem;
	}

	.board th {
		letter-spacing: .1em;
	}

	.board th, .board td {
		padding-inline: 6px;
	}

	.you-tag {
		display: none;
	}

	.col-wide {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.deal-in, .flip-in {
		animation: none;
	}

	.btn, .chip, .seat, .hand-seat, .table-card {
		transition: none;
	}
}

/* ==========================================================================
   More games: lobby cards
   ========================================================================== */

.lobby-heading {
	margin-top: 8px;
	font-size: .85rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cg-text-muted);
}

.game-card {
	position: relative;
	padding-top: 20px;
}

.game-blurb {
	min-height: 3.1em;
	font-size: .88rem;
	color: var(--cg-text-muted);
}

/* A small picture of the game, cut from the artwork */
.game-thumb {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	border: 1px solid var(--cg-gold-dim);
	background-color: var(--cg-black);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.game-thumb-roulette {
	background-image: url("../assets/r88/img/roulette_wheel.png");
}

.game-thumb-craps {
	background-image: url("../assets/r88/img/d5.png");
	background-size: 62%;
}

.game-thumb-slots {
	/* the seven, third symbol of the reel strip */
	background-image: url("../assets/r88/img/slot_reel.png");
	background-size: 100% 600%;
	background-position: 0 40%;
	background-color: var(--card-face);
}

.game-thumb-baccarat {
	background-image: url("../assets/r88/img/baccarat_banker.png");
	background-size: 64%;
}

.game-thumb-poker::before {
	content: "A♠\FE0E";
	display: grid;
	place-items: center;
	height: 100%;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--card-ink);
}

.game-thumb-poker {
	background: linear-gradient(160deg, var(--card-face), var(--card-face-shade));
}

/* ==========================================================================
   Top bar: sound switch
   ========================================================================== */

/* The theme's speaker, as it is drawn in its top bar */
.icon-button {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.icon-button img {
	display: block;
	width: 27px;
	height: auto;
	transition: opacity .15s ease, filter .15s ease;
}

.icon-button:hover img {
	filter: brightness(1.25);
}

/* Sound off: the same speaker, dimmed and struck through */
.sound-off img {
	opacity: .4;
}

.sound-off::after {
	content: "";
	position: absolute;
	width: 30px;
	height: 2px;
	border-radius: 1px;
	background: var(--cg-gold);
	transform: rotate(-45deg);
}

/* ==========================================================================
   Betting tables: roulette, baccarat, craps
   ========================================================================== */

:root {
	--felt-green: #233a31;
	--felt-red: #6a2326;
	--felt-blue: #1b2f52;
	--felt-line: rgba(245, 240, 230, .5);
	--spot-red: #c43a3a;
	--spot-black: #1b1917;
	--spot-green: #1f8a4c;
	--spot-text: #fff;
}

.felt {
	max-width: 1000px;
	margin: 0 auto;
	padding: 22px;
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	border: 5px double var(--cg-gold-dim);
	border-radius: 28px;
	box-shadow: 0 0 50px rgba(0, 0, 0, .65), inset 0 0 80px rgba(0, 0, 0, .35);
	color: var(--spot-text);
}

.felt-green { background: var(--felt-green); }
.felt-red { background: var(--felt-red); }
.felt-blue { background: var(--felt-blue); }

.bets-stage {
	display: grid;
	justify-items: center;
	min-width: 0;
}

.felt .seat-label {
	color: var(--spot-text);
}

/* A place to put chips */
.spot {
	position: relative;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 2px;
	min-width: 0;
	padding: 4px;
	background: transparent;
	border: 1px solid var(--felt-line);
	color: var(--spot-text);
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.15;
	cursor: pointer;
	transition: box-shadow .15s ease, filter .15s ease, opacity .15s ease;
}

.spot:hover:not(:disabled) {
	filter: brightness(1.25);
	box-shadow: inset 0 0 0 2px var(--cg-gold-bright);
}

.spot:disabled {
	cursor: default;
}

/* The numbers an inside bet covers, while the player points at it */
.spot-aim {
	filter: brightness(1.3);
	box-shadow: inset 0 0 0 2px var(--cg-gold-bright);
}

.spot-red { background: var(--spot-red); }
.spot-black { background: var(--spot-black); }
.spot-green { background: var(--spot-green); }

.spot-pays {
	font-family: var(--font-body);
	font-size: .72rem;
	font-weight: 400;
	opacity: .85;
	text-wrap: balance;
}

.spot-closed {
	opacity: .45;
}

/* The winning spots light up once the result is in */
.spot-hit {
	box-shadow: inset 0 0 0 3px var(--cg-gold-bright), 0 0 16px var(--cg-gold-glow);
	z-index: 1;
}

.spot-chip {
	position: absolute;
	right: 2px;
	bottom: 2px;
	min-width: 22px;
	padding: 1px 5px;
	border: 1px solid var(--cg-ink);
	border-radius: 20px;
	background: var(--cg-gold);
	color: var(--cg-ink);
	font-family: var(--font-body);
	font-size: .7rem;
	font-weight: 700;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 1px 4px var(--cg-shadow);
	pointer-events: none;
}

.spot-number .spot-chip {
	left: 50%;
	right: auto;
	bottom: 1px;
	transform: translateX(-50%);
	min-width: 20px;
	padding: 0 4px;
	font-size: .64rem;
}

.spot-number:has(.spot-chip:not([hidden])) {
	align-content: start;
}

/* Chips placed on screen but not sent to the table yet */
.spot-chip-draft {
	background: var(--cg-gold-bright);
	border-style: dashed;
}

.spot-won .spot-chip {
	background: var(--cg-win);
}

.spot-lost .spot-chip {
	background: var(--cg-loss);
	text-decoration: line-through;
	opacity: .8;
}

/* --- Roulette --- */

.roulette-layout {
	position: relative; /* the inside bets are placed against its cells */
	display: grid;
	grid-template-columns: 1.1fr repeat(12, minmax(0, 1fr)) 1.3fr;
	grid-template-rows: repeat(3, 44px) 36px 36px;
	font-size: .95rem;
}

.roulette-layout .spot, .roulette-layout .spot-edge {
	grid-column: var(--hc) / span var(--hcs);
	grid-row: var(--hr) / span var(--hrs);
}

/* An inside bet: a place for chips on a line of the layout, between two numbers, where four
   meet, or at the foot of a line. It lies on an edge or a corner of one number's cell. */
.spot-edge {
	position: absolute;
	left: calc(var(--hx) * 100%);
	top: calc(var(--hy) * 100%);
	z-index: 2;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	translate: -50% -50%;
	cursor: pointer;
}

.spot-edge:disabled {
	cursor: default;
}

/* where the chip would go */
.spot-edge:hover:not(:disabled)::before, .spot-edge:focus-visible::before {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--cg-gold-bright);
	box-shadow: 0 0 8px var(--cg-gold-glow);
}

.spot-edge .spot-chip {
	left: 50%;
	top: 50%;
	right: auto;
	bottom: auto;
	min-width: 20px;
	padding: 0 4px;
	font-size: .64rem;
	translate: -50% -50%;
}

.roulette-layout .spot-outside {
	font-size: .78rem;
	letter-spacing: .04em;
}

.wheel {
	position: relative;
	width: 100%;
	max-width: 260px;
	aspect-ratio: 1;
}

.wheel-base, .wheel-orbit {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.wheel-disc {
	position: absolute;
	left: 12.33%;
	top: 12.33%;
	width: 75.33%;
	height: 75.33%;
}

.wheel-ball {
	position: absolute;
	left: 48.3%;
	top: 23.5%;
	width: 3.4%;
	height: auto;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7));
}

/* The number that came up, in the hub of the wheel */
.wheel-number {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	min-width: 2.2em;
	padding: 4px 8px;
	border-radius: 30px;
	border: 2px solid var(--cg-gold-bright);
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--spot-text);
	font-variant-numeric: tabular-nums;
}

.wheel-number:empty {
	display: none;
}

.wheel-number-rouge { background: var(--spot-red); }
.wheel-number-noir { background: var(--spot-black); }
.wheel-number-vert { background: var(--spot-green); }

/* --- Baccarat and craps: three large spots --- */

.trio-layout {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.spot-big {
	min-height: 110px;
	padding: 12px 8px;
	border-radius: 14px;
	border-width: 2px;
	font-size: 1.15rem;
	letter-spacing: .04em;
}

.spot-big .spot-chip {
	top: 8px;
	right: 8px;
	bottom: auto;
	padding: 2px 9px;
	font-size: .85rem;
}

.felt-red, .felt-blue {
	grid-template-columns: minmax(0, 1fr);
}

.bac-hands {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	--card-w: 62px;
}

.bac-side {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 12px 8px 14px;
	border: 1px solid transparent;
	border-radius: 16px;
	transition: border-color .2s ease, background-color .2s ease;
}

.bac-side-win {
	border-color: var(--cg-gold-bright);
	background: rgba(0, 0, 0, .22);
}

.bac-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bac-mark {
	width: 30px;
	height: 30px;
	opacity: .85;
}

.craps-stage {
	display: grid;
	justify-items: center;
	gap: 10px;
}

.craps-puck {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .9rem;
}

.craps-puck img {
	width: 34px;
	height: auto;
}

.craps-dice {
	display: flex;
	gap: 14px;
}

.die {
	width: 64px;
	height: 64px;
	border-radius: 10px;
	box-shadow: 0 4px 10px var(--cg-shadow);
}

/* --- Around the felt: last results, who is playing --- */

.bets-side {
	max-width: 1000px;
	margin: 12px auto 0;
	display: grid;
	gap: 10px;
}

.bets-history-box {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.bets-side-label {
	flex: none;
	font-size: .65rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cg-text-muted);
}

.bets-history {
	display: flex;
	gap: 5px;
	overflow: hidden;
}

.history-item {
	flex: none;
	min-width: 28px;
	padding: 2px 6px;
	border: 1px solid var(--cg-line);
	border-radius: 20px;
	background: var(--cg-panel);
	font-family: var(--font-display);
	font-size: .8rem;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.history-rouge, .history-banker { background: var(--spot-red); color: var(--spot-text); }
.history-noir { background: var(--spot-black); color: var(--spot-text); }
.history-vert, .history-tie { background: var(--spot-green); color: var(--spot-text); }
.history-player { background: var(--felt-blue); color: var(--spot-text); }

.bets-players {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bets-player {
	display: flex;
	align-items: baseline;
	gap: 8px;
	max-width: 100%;
	padding: 5px 12px;
	border: 1px solid var(--cg-line);
	border-radius: 20px;
	background: var(--cg-panel);
	font-size: .85rem;
}

.bets-player-you {
	border-color: var(--cg-gold-dim);
}

.bets-player-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 700;
}

.bets-player-status {
	flex: none;
	color: var(--cg-text-muted);
	font-variant-numeric: tabular-nums;
}

/* Chips from the artwork: four colours, second row of the button sheet */
.pack-chip {
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: url("../assets/r88/img/CGButtonSet.png") no-repeat;
	/* the sheet is 14 tiles wide and 4 high */
	background-size: 1400% 400%;
	background-position-y: 33.333%;
	color: var(--chip-text);
	font-family: var(--font-display);
	font-size: .95rem;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}

.pack-chip-0 { background-position-x: 0; }
.pack-chip-1 { background-position-x: 7.692%; }
.pack-chip-2 { background-position-x: 15.385%; }
.pack-chip-3 { background-position-x: 23.077%; }

/* The artwork stops at four colours. The 500 and the 1 000 are its blue and its red chip,
   tinted purple and gold; the tint is on a layer of its own so that the figure stays white. */
.pack-chip-4, .pack-chip-5 {
	position: relative;
	isolation: isolate;
	background-image: none;
}

.pack-chip-4::before, .pack-chip-5::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: url("../assets/r88/img/CGButtonSet.png") no-repeat;
	background-size: 1400% 400%;
	background-position-y: 33.333%;
}

.pack-chip-4::before {
	background-position-x: 7.692%;
	filter: hue-rotate(75deg) saturate(.9);
}

.pack-chip-5::before {
	background-position-x: 0;
	filter: hue-rotate(42deg) saturate(1.5) brightness(1.15);
}

.pack-chip:hover:not(:disabled) {
	transform: translateY(-3px);
}

.pack-chip-on {
	box-shadow: 0 0 0 3px var(--cg-gold-bright), 0 0 16px var(--cg-gold-glow);
	transform: translateY(-3px);
}

.pack-chip:disabled {
	opacity: .5;
	cursor: default;
}

/* ==========================================================================
   Machines: slots and video poker
   ========================================================================== */

/* The main action of a machine: the theme's gold plate in its black frame ("Deal") */
.btn-big, .pg-spin {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-width: 220px;
	min-height: 86px;
	padding: 0 34px;
	border: 1px solid transparent;
	border-image: url("../assets/theme/plate-main.png") 26 fill / 26px;
	border-radius: 14px;
	/* gold under the plate's gold only, in two bands that keep clear of its rounded corners, and
	   the black of its frame under the rest */
	background:
		linear-gradient(#e3ae43, #e0aa40 7px, #af7212 calc(100% - 7px), #a86a0c) center / calc(100% - 20px) calc(100% - 38px) no-repeat,
		linear-gradient(#e0a93c, #e0aa40 15px, #af7212 calc(100% - 15px), #9c6004) center / calc(100% - 38px) calc(100% - 22px) no-repeat,
		#060606 padding-box;
	color: var(--cg-ink);
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .15s ease, filter .15s ease;
}

/* Dealing a hand: the theme's own drawing of two cards */
#poker-go {
	flex-direction: row;
	gap: 10px;
}

#poker-go::before {
	content: "";
	flex: none;
	width: 30px;
	height: 32px;
	background: url("../assets/theme/icon-deal.png") center / contain no-repeat;
}

.pick-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 14px;
}

/* Several choices side by side: speed and automatic spins */
.pick-rows {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 26px;
}

.pick-label {
	font-size: .7rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cg-text-muted);
}

/* A choice between a few options: a tray like the theme's chip tray, the option taken in gold */
.picks {
	display: flex;
	gap: 4px;
	padding: 4px;
	border: 1px solid transparent;
	border-image: url("../assets/theme/plate-panel.png") 10 12 fill / 10px 12px;
	border-radius: 9px;
	background: var(--under-panel);
}

.pick {
	min-width: 56px;
	padding: 6px 10px;
	background: none;
	border: 1px solid transparent;
	color: var(--cg-text-muted);
	font-family: var(--font-display);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}

.pick:hover:not(:disabled):not(.pick-on) {
	color: var(--cg-text);
}

.pick-on {
	border-image: url("../assets/theme/plate-gold.png") 11 14 fill / 11px 14px;
	border-radius: 6px;
	background: var(--under-gold);
	color: var(--cg-ink);
}

.pick:disabled {
	cursor: default;
}

/* Turbo is for the base game: during a bonus its plate greys, and comes back after */
.pick-on.pick-held {
	filter: grayscale(.85) brightness(.7);
}

/* The machine artwork, with the three reels laid over its windows */
/* Controls of the classic machines, as in the theme: choices first, the main button last, on one line */
.sl-dock {
	max-width: 800px;
}

.sl-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 22px;
}

.sl-controls .pick-row {
	flex-direction: column;
	gap: 4px;
}

.sl-controls .bet-row {
	grid-template-columns: auto auto auto;
	width: auto;
}

.sl-dock .dock-copy {
	justify-self: center;
}

.slot-machine {
	position: relative;
	/* never taller than what leaves the controls on screen: the artwork is 816 by 624 */
	max-width: min(760px, max(340px, calc((var(--vh, 100vh) - 372px) * 1.3077)));
	margin: 0 auto;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 14px;
	overflow: hidden;
	background: var(--cg-black);
	box-shadow: 0 0 50px rgba(0, 0, 0, .65);
}

.slot-machine img {
	display: block;
	width: 100%;
	height: auto;
}

.slot-reel {
	position: absolute;
	top: 24.6%;
	width: 17.16%;
	height: 31.4%;
	background: url("../assets/r88/img/slot_reel.png") repeat-y;
	background-size: 100% auto;
	box-shadow: inset 0 10px 12px -8px rgba(0, 0, 0, .55), inset 0 -10px 12px -8px rgba(0, 0, 0, .55);
}

.slot-reel[data-reel="0"] { left: 21.45%; }
.slot-reel[data-reel="1"] { left: 41.05%; }
.slot-reel[data-reel="2"] { left: 60.66%; }

/* A reel whose symbol pays: its window lights up, three times, and stays lit */
@keyframes slot-reel-win {
	50% { box-shadow: inset 0 0 0 4px #fff, inset 0 0 44px rgba(255, 244, 200, .95); filter: brightness(1.3); }
}

.slot-reel-win {
	box-shadow: inset 0 0 0 3px var(--cg-gold-bright), inset 0 0 26px rgba(246, 221, 140, .6);
	animation: slot-reel-win calc(.55s * var(--pace, 1)) ease-in-out 3;
}

/* The payline is part of the artwork underneath: redraw it over the reels */
.slot-reel::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% - 1.5px);
	height: 3px;
	background: #f00;
	opacity: .55;
}

.poker-machine {
	max-width: 760px;
	margin: 0 auto;
	padding: 18px;
	display: grid;
	gap: 16px;
	background: radial-gradient(ellipse at center, var(--cg-panel-light) 0%, #060606 80%);
	border: 1px solid var(--cg-gold-dim);
	border-radius: 14px;
	box-shadow: 0 0 50px rgba(0, 0, 0, .65);
}

.paytable {
	width: 100%;
	border-collapse: collapse;
	font-size: .85rem;
	font-variant-numeric: tabular-nums;
}

.paytable caption {
	padding-bottom: 6px;
	font-size: .65rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cg-text-muted);
}

.paytable th, .paytable td {
	padding: 3px 8px;
	border: 1px solid var(--cg-line);
}

.paytable th {
	text-align: left;
	font-weight: 400;
	color: var(--cg-gold-bright);
}

.paytable td {
	width: 13%;
	text-align: right;
	color: var(--cg-text-muted);
}

/* The column for the current bet, and the row that just won */
.paytable .paytable-bet {
	background: rgba(212, 175, 55, .16);
	color: var(--cg-gold-bright);
	font-weight: 700;
}

.paytable-won th, .paytable-won td {
	background: rgba(123, 216, 163, .14);
	color: var(--cg-win);
	animation: paytable-hit .9s ease-out;
}

@keyframes paytable-hit {
	0% { background: rgba(123, 216, 163, .55); }
	40% { background: rgba(123, 216, 163, .14); }
	60% { background: rgba(123, 216, 163, .4); }
}

.poker-hand {
	display: flex;
	justify-content: center;
	gap: 10px;
	--card-w: clamp(52px, 15vw, 96px);
}

.poker-card {
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: 6px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 12px;
	color: var(--cg-text-muted);
	font: inherit;
	cursor: pointer;
}

.poker-card:disabled {
	cursor: default;
}

/* Cards here sit side by side, not fanned */
.poker-card .card {
	margin-left: 0;
}

.poker-card-held {
	border-color: var(--cg-gold);
	background: var(--cg-gold-wash);
	color: var(--cg-gold-bright);
}

.poker-hold {
	min-height: 1.3em;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.site-footer p + p {
	margin-top: 4px;
	font-size: .68rem;
}

/* ==========================================================================
   More games: small screens
   ========================================================================== */

@media (max-width: 860px) {
	.felt {
		grid-template-columns: minmax(0, 1fr);
		padding: 16px;
		gap: 16px;
	}

	.wheel {
		max-width: 220px;
	}
}

@media (max-width: 700px) {
	.felt {
		padding: 12px 10px;
		border-radius: 20px;
	}

	.wheel {
		max-width: 190px;
	}

	/* The roulette felt turns upright: numbers three across, twelve down */
	.roulette-layout {
		grid-template-columns: 1.15fr 1fr repeat(3, minmax(0, 1.2fr));
		grid-template-rows: 38px repeat(12, 40px) 34px;
	}

	.roulette-layout .spot, .roulette-layout .spot-edge {
		grid-column: var(--vc) / span var(--vcs);
		grid-row: var(--vr) / span var(--vrs);
	}

	/* a finger needs more room than a pointer, and the number itself must stay easy to touch */
	.spot-edge {
		left: calc(var(--vx) * 100%);
		top: calc(var(--vy) * 100%);
		width: 22px;
		height: 18px;
		border-radius: 9px;
	}

	.trio-layout {
		gap: 8px;
	}

	.spot-big {
		min-height: 96px;
		padding: 10px 4px;
		font-size: .95rem;
	}

	.spot-pays {
		font-size: .66rem;
	}

	.bac-hands {
		gap: 8px;
		--card-w: 48px;
	}

	.die {
		width: 54px;
		height: 54px;
	}

	/* Chips and the main button stay within reach while the felt scrolls */
	.bets-dock {
		position: sticky;
		bottom: 0;
		z-index: 5;
		margin-inline: calc(var(--gutter) * -1);
		padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom, 0px));
		min-height: 0;
		background: var(--cg-black);
		border-top: 1px solid var(--cg-gold-dim);
	}

	.bets-dock .dock-note {
		padding-top: 0;
	}

	.pack-chip {
		width: 46px;
		height: 46px;
		font-size: .85rem;
	}

	/* the two ways of taking chips back, one above the other, leave the row its width */
	.bet-row-undo, .bet-row-go {
		flex-direction: column;
		gap: 4px;
	}

	.bet-row-undo .btn, .bet-row-go .btn {
		padding-block: 6px;
	}

	.poker-machine {
		padding: 12px 10px;
		border-radius: 18px;
	}

	.poker-hand {
		gap: 2px;
	}

	.poker-card {
		padding: 4px 2px;
	}

	.paytable {
		font-size: .74rem;
	}

	.paytable th, .paytable td {
		padding: 2px 5px;
	}

	.btn-big {
		min-width: 0;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spot, .pack-chip, .bac-side {
		transition: none;
	}
}

/* ==========================================================================
   Big Piggy Bonus
   A dark stage over the mansion artwork; reels on charcoal tiles so the
   symbols carry the colour. Pink marks what belongs to the bonus.
   ========================================================================== */

:root {
	--pg-stage: #0f0d13;
	--pg-cell: #211e28;
	--pg-line: #3a3546;
	--pg-pink: #ff5c93;
	--pg-pink-glow: rgba(255, 92, 147, .5);
	--pg-veil: rgba(12, 10, 16, .88);
}

.game-thumb-piggy {
	background-image: url("../assets/piggy/S.png");
	background-size: 88%;
}

.pg-stage {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
	padding: 18px 26px 18px 230px;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 14px;
	overflow: hidden;
	background: var(--pg-stage) url("../assets/piggy/bg-day.png") center 30% / cover;
	box-shadow: 0 0 50px rgba(0, 0, 0, .65);
}

/* The backdrops are small pictures: a veil hides the stretch and keeps the reels readable */
.pg-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(12, 10, 16, .25), rgba(12, 10, 16, .7));
}

.pg-night {
	background-image: url("../assets/piggy/bg-night.png");
}

.pg-mascot {
	position: absolute;
	left: 6px;
	bottom: -34px;
	z-index: 1;
	width: 220px;
	height: auto;
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6));
	pointer-events: none;
}

.pg-frame {
	position: relative;
	z-index: 1;
	/* six reels by four rows: about 1.5 times wider than tall */
	max-width: clamp(420px, calc((var(--vh, 100vh) - 378px) * 1.5 + 20px), 760px);
	margin: 0 auto;
	padding: 10px;
	background: var(--pg-veil);
	border: 2px solid var(--cg-gold-dim);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}

/* Bonus hunt switched on: the frame says so until it is switched off */
.pg-hunting .pg-frame {
	border-color: var(--pg-pink);
	box-shadow: 0 0 22px var(--pg-pink-glow), 0 10px 30px rgba(0, 0, 0, .6);
}

.pg-flag {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 3;
	transform: translate(-50%, -55%);
	padding: 2px 12px;
	border-radius: 999px;
	background: var(--pg-pink);
	color: var(--cg-ink);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.pg-board {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 6px;
}

.pg-reel {
	display: grid;
	gap: 6px;
}

.pg-cell {
	position: relative;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	background: var(--pg-cell);
	border: 1px solid var(--pg-line);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.pg-cell img {
	width: 88%;
	height: 88%;
	object-fit: contain;
	transition: opacity .2s ease;
}

/* In the vault: what the symbol on this cell brings */
.pg-tag {
	position: absolute;
	left: 3px;
	right: 3px;
	bottom: 3px;
	padding: 1px 2px;
	overflow: hidden;
	border-radius: 6px;
	background: rgba(12, 10, 16, .84);
	color: var(--cg-gold-bright);
	font-family: var(--font-display);
	font-size: clamp(.56rem, 1.5vw, .95rem);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.pg-tag:empty {
	display: none;
}

.pg-tag-mult {
	color: var(--pg-pink);
}

/* A cell of the vault nothing has landed on yet */
.pg-empty {
	background: rgba(12, 10, 16, .55);
	border-style: dashed;
}

.pg-empty img {
	visibility: hidden;
}

@keyframes pg-roll {
	from { transform: translateY(-22%); }
	to { transform: translateY(22%); }
}

@keyframes pg-land {
	0% { transform: translateY(-12px); }
	60% { transform: translateY(4px); }
	100% { transform: none; }
}

@keyframes pg-pulse {
	50% { transform: scale(1.07); }
}

@keyframes pg-pop {
	0% { transform: scale(.6); }
	60% { transform: scale(1.15); }
	100% { transform: none; }
}

.pg-rolling .pg-cell:not(.pg-held) img {
	filter: blur(2px);
	animation: pg-roll .14s linear infinite;
}

/* --pg-speed is set by the speed buttons: 1 by default, more when slow, less in turbo */
.pg-landed {
	animation: pg-land calc(.22s * var(--pg-speed, 1)) ease-out;
}

.pg-win {
	border-color: var(--cg-gold-bright);
	box-shadow: inset 0 0 0 1px var(--cg-gold-bright), 0 0 14px var(--cg-gold-glow);
}

.pg-win img {
	animation: win-hit calc(.5s * var(--pg-speed, 1)) cubic-bezier(.3, 1.3, .5, 1) both, win-breathe calc(1.1s * var(--pg-speed, 1)) ease-in-out calc(.5s * var(--pg-speed, 1)) infinite;
}

.pg-dim img {
	opacity: .3;
}

/* A wild stuck for the rest of the bonus */
.pg-held {
	border-color: var(--pg-pink);
	box-shadow: inset 0 0 0 2px var(--pg-pink), 0 0 12px var(--pg-pink-glow);
}

.pg-new img {
	animation: pg-pop calc(.4s * var(--pg-speed, 1)) ease-out;
}

/* A prize of the vault being counted by a piggy bank that just landed */
.pg-collect {
	border-color: var(--cg-gold-bright);
	box-shadow: inset 0 0 0 2px var(--cg-gold-bright), 0 0 14px var(--cg-gold-glow);
}

.pg-collect img {
	animation: pg-pulse calc(.5s * var(--pg-speed, 1)) ease-in-out;
}

.pg-scatter {
	border-color: var(--pg-pink);
	box-shadow: 0 0 14px var(--pg-pink-glow);
}

.pg-scatter img {
	animation: pg-pulse calc(.5s * var(--pg-speed, 1)) ease-in-out 3;
}

/* Free spins left, multiplier, bonus winnings */
.pg-hud {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 10px;
	text-align: center;
}

.pg-hud-item {
	display: grid;
	gap: 2px;
}

.pg-hud-label {
	font-size: .62rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cg-text-muted);
}

.pg-hud-value {
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--cg-gold-bright);
	font-variant-numeric: tabular-nums;
}

.pg-hud-mult .pg-hud-value {
	color: var(--pg-pink);
}

.pg-bump {
	animation: pg-pop .4s ease-out;
}

.pg-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 8px;
	padding: 16px;
	background: var(--pg-veil);
	border-radius: 14px;
	text-align: center;
}

.pg-overlay-kicker {
	font-size: .8rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--pg-pink);
}

.pg-overlay-kicker:empty, .pg-overlay-title:empty, .pg-overlay-text:empty, .pg-choices:empty {
	display: none;
}

.pg-overlay-title {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 6vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--cg-gold-bright);
	font-variant-numeric: tabular-nums;
	text-wrap: balance;
}

.pg-overlay-text {
	max-width: 42ch;
	color: var(--cg-text-muted);
}

.pg-overlay .dock-actions {
	margin-top: 8px;
}

/* Bonuses to buy: what each one is, and its price on the button */
.pg-choices {
	display: grid;
	gap: 8px;
	width: min(100%, 440px);
	margin-top: 4px;
}

.pg-choice {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 8px 8px 8px 14px;
	border: 1px solid transparent;
	border-image: url("../assets/theme/plate-panel.png") 10 12 fill / 10px 12px;
	border-radius: 9px;
	background: var(--under-panel);
	text-align: left;
}

.pg-choice-name {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cg-gold);
}

.pg-choice-text {
	font-size: .9rem;
	color: var(--cg-text);
}

.pg-choice .btn {
	min-width: 96px;
	padding: 9px 14px;
	font-variant-numeric: tabular-nums;
}

/* Controls, laid out as in the theme: the stake, the action tiles, then the main button */
.pg-dock {
	max-width: 800px;
}

.pg-controls {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
}

.pg-bet {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pg-side {
	display: flex;
	justify-content: center;
	gap: 10px;
}

/* An action tile, as "Hit" or "Stand" in the theme: a name, and what it costs */
.pg-buy {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	max-width: 180px;
	min-height: 60px;
	padding: 8px 12px;
	border: 1px solid transparent;
	border-image: url("../assets/theme/plate-tile.png") 12 16 fill / 12px 16px;
	border-radius: 10px;
	background: var(--under-tile);
	color: var(--cg-text);
	font: inherit;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	transition: transform .15s ease, filter .15s ease;
}

.pg-buy-label {
	font-family: var(--font-display);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.pg-buy-price {
	font-family: var(--font-display);
	font-size: .95rem;
	font-weight: 700;
	color: var(--cg-gold-bright);
	font-variant-numeric: tabular-nums;
}

/* The bonus hunt is a switch: the gold plate while it is on, like the theme's lit tile */
.pg-hunt[aria-pressed="true"] {
	border-image: url("../assets/theme/plate-gold.png") 11 14 fill / 11px 14px;
	border-radius: 6px;
	background: var(--under-gold);
}

.pg-hunt[aria-pressed="true"] .pg-buy-label, .pg-hunt[aria-pressed="true"] .pg-buy-price {
	color: var(--cg-ink);
}

/* What a spin costs, shown when it is not simply the stake */
.pg-spin-cost {
	font-size: .62em;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	font-variant-numeric: tabular-nums;
}

.pg-spin-cost:empty {
	display: none;
}

.pg-spin:hover:not(:disabled), .pg-buy:hover:not(:disabled) {
	filter: brightness(1.12) drop-shadow(0 0 7px var(--cg-gold-glow));
	transform: translateY(-1px);
}

.pg-spin:active:not(:disabled), .pg-buy:active:not(:disabled) {
	filter: brightness(.9);
	transform: none;
}

/* Bonus hunt on: the main button wears the bonus colour */
.pg-spin-hunt:not(:disabled) {
	filter: drop-shadow(0 0 7px var(--pg-pink));
}

.pg-spin:disabled, .pg-buy:disabled {
	filter: grayscale(1) brightness(.55);
	cursor: default;
}

/* Still on while a round plays, only out of reach */
.pg-hunt[aria-pressed="true"]:disabled {
	filter: brightness(.6);
}

.pg-pays-title {
	margin: 20px 0 8px;
	font-size: .95rem;
	color: var(--cg-gold-bright);
}

.pg-pays thead th {
	text-align: right;
	font-size: .65rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cg-text-muted);
}

.pg-pays thead th:first-child {
	text-align: left;
}

.pg-pays tbody th {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pg-pays-icon {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

@media (max-width: 860px) {
	.pg-stage {
		padding: 16px;
	}

	.pg-mascot {
		display: none;
	}
}

@media (max-width: 700px) {
	.pg-stage {
		padding: 8px;
		border-radius: 18px;
	}

	.pg-frame {
		padding: 6px;
		border-radius: 12px;
	}

	.pg-board, .pg-reel {
		gap: 3px;
	}

	.pg-cell {
		border-radius: 6px;
	}

	.pg-cell img {
		width: 94%;
		height: 94%;
	}

	.pg-hud-value {
		font-size: 1.05rem;
	}

	.pg-frame {
		max-width: none;
	}

	.pg-hud-label {
		font-size: .5rem;
		letter-spacing: .08em;
	}

	/* Stake and main button side by side, the action tiles on a line of their own */
	.pg-controls {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 10px;
	}

	.pg-side {
		grid-row: 2;
		grid-column: 1 / -1;
	}

	.pg-buy {
		max-width: none;
		min-height: 52px;
		padding: 6px 8px;
	}

	.pg-bet {
		gap: 6px;
	}

	.pg-bet .bet-pill {
		min-width: 88px;
		padding-inline: 8px;
	}

	.pg-bet .step {
		width: 42px;
		height: 46px;
	}

	.pg-overlay {
		gap: 6px;
		padding: 8px;
	}

	.pg-choice {
		gap: 8px;
		padding: 6px 6px 6px 10px;
	}

	.pg-choice-text {
		font-size: .82rem;
	}

	.pg-choice .btn {
		min-width: 84px;
	}

	.pg-overlay .dock-actions {
		margin-top: 2px;
	}

	.pg-tag {
		left: 1px;
		right: 1px;
		bottom: 1px;
		padding: 0 1px;
		border-radius: 4px;
		/* six-figure prizes still have to fit a 45px cell */
		font-size: min(.56rem, 2.2vw);
		letter-spacing: -.02em;
	}

	.pg-dock {
		margin-top: 8px;
	}

	/* the same plate, drawn smaller */
	.pg-spin {
		min-width: 0;
		min-height: 62px;
		padding: 0 20px;
		border-image-width: 18px;
		border-radius: 10px;
		background:
			linear-gradient(#e3ae43, #e0aa40 5px, #af7212 calc(100% - 5px), #a86a0c) center / calc(100% - 14px) calc(100% - 26px) no-repeat,
			linear-gradient(#e0a93c, #e0aa40 10px, #af7212 calc(100% - 10px), #9c6004) center / calc(100% - 26px) calc(100% - 16px) no-repeat,
			#060606 padding-box;
		font-size: 1.1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pg-rolling .pg-cell img, .pg-landed, .pg-win img, .pg-new img, .pg-collect img, .pg-scatter img, .pg-bump {
		animation: none;
		filter: none;
	}

	.pg-cell, .pg-buy, .pg-spin, .btn, .step {
		transition: none;
	}
}

/* ==========================================================================
   Le Butin du Capitaine
   A tall stage, as on a phone: the captain and his wheel, a wooden banner
   for the winnings, then the reels. Tiles sit edge to edge on dark sand,
   which shows through where winning symbols have gone.
   ========================================================================== */

:root {
	--pr-wood: #4a2212;
	--pr-wood-dark: #2a120a;
	--pr-sand: #3d2a12;
	--pr-brass: #c9973c;
	--pr-red: #d8321c;
	--pr-yellow: #ffe15a;
}

.game-thumb-pirate {
	background-image: url("../assets/pirate/CA.webp");
}

.pr-stage {
	position: relative;
	/* head, banner and reels together are about 1.26 times as tall as wide */
	width: 100%;
	max-width: clamp(300px, calc((var(--vh, 100vh) - 340px) / 1.26), 520px);
	margin: 0 auto;
	/* text on the stage is sized from the stage, not from the screen */
	container-type: inline-size;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 14px;
	overflow: hidden;
	background: var(--pr-wood-dark);
	box-shadow: 0 0 50px rgba(0, 0, 0, .65);
}

.pr-head {
	position: relative;
	aspect-ratio: 700 / 352;
}

/* One picture per notch of the wheel, stacked: only the lit one shows */
.pr-head-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.pr-head-on {
	opacity: 1;
}

/* The multiplier the next win gets, in figures (the wheel shows it too) */
.pr-mult {
	position: absolute;
	top: 3%;
	right: 2.5%;
	width: 15.5%;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border: 2px solid var(--pr-brass);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #f0613a, var(--pr-red) 55%, #7c1408);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
	color: var(--pr-yellow);
	font-family: var(--font-display);
	font-size: clamp(.9rem, 5.2cqw, 1.7rem);
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
	font-variant-numeric: tabular-nums;
}

@keyframes pr-pop {
	0% { transform: scale(.6); }
	60% { transform: scale(1.18); }
	100% { transform: none; }
}

.pr-bump {
	animation: pr-pop .4s ease-out;
}

.pr-banner {
	min-height: 2.6em;
	padding: 0 12px;
	overflow: hidden;
	line-height: 2.6;
	white-space: nowrap;
	text-overflow: ellipsis;
	border-block: 3px solid var(--pr-brass);
	background: linear-gradient(#6a321a, var(--pr-wood) 45%, #33160b);
	color: var(--cg-gold-bright);
	font-family: var(--font-display);
	font-size: clamp(.85rem, 4.6cqw, 1.35rem);
	font-weight: 700;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
	font-variant-numeric: tabular-nums;
}

.pr-banner.is-win {
	color: var(--pr-yellow);
}

.pr-frame {
	padding: 6px;
	background: linear-gradient(var(--pr-wood), var(--pr-wood-dark));
}

.pr-reels {
	position: relative;
}

.pr-board {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 2px;
	overflow: hidden;
	border-radius: 6px;
	background: radial-gradient(circle at 30% 40%, #5a3d17, var(--pr-sand) 60%, #24170a);
}

.pr-reel {
	display: grid;
	gap: 2px;
}

.pr-cell {
	position: relative;
	aspect-ratio: 1;
}

.pr-cell img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	transition: opacity .2s ease, filter .2s ease;
}

@keyframes pr-roll {
	from { transform: translateY(-30%); }
	to { transform: translateY(30%); }
}

@keyframes pr-land {
	0% { transform: translateY(-10px); }
	60% { transform: translateY(4px); }
	100% { transform: none; }
}

@keyframes pr-pulse {
	50% { transform: scale(1.08); }
}

@keyframes pr-burst {
	40% { transform: scale(1.15); filter: brightness(1.8); opacity: 1; }
	100% { transform: scale(.3); filter: brightness(2.2); opacity: 0; }
}

.pr-rolling .pr-cell img {
	filter: blur(2px);
	animation: pr-roll .12s linear infinite;
}

/* --pr-speed is set by the speed buttons: 1 by default, more when slow, less in turbo */
.pr-landed {
	animation: pr-land calc(.22s * var(--pr-speed, 1)) ease-out;
}

/* A symbol of a winning line, and the others while it shows */
.pr-win {
	z-index: 1;
}

.pr-win img {
	box-shadow: 0 0 0 2px var(--pr-yellow), 0 0 14px 3px rgba(255, 190, 40, .85);
	animation: win-hit calc(.5s * var(--pr-speed, 1)) cubic-bezier(.3, 1.3, .5, 1) both, win-breathe calc(1.1s * var(--pr-speed, 1)) ease-in-out calc(.5s * var(--pr-speed, 1)) infinite;
}

.pr-dim img {
	filter: brightness(.38);
}

/* Paid, and leaving the reels */
.pr-gone img {
	animation: pr-burst calc(.26s * var(--pr-speed, 1)) ease-in forwards;
}

.pr-scatter {
	z-index: 1;
}

.pr-scatter img {
	box-shadow: 0 0 0 2px var(--pr-yellow), 0 0 16px 4px rgba(255, 190, 40, .9);
	animation: pr-pulse calc(.5s * var(--pr-speed, 1)) ease-in-out 3;
}

/* The winning lines, drawn across the reels: one unit per cell */
.pr-lines {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.pr-lines polyline {
	fill: none;
	stroke: var(--pr-yellow);
	stroke-width: 3;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	opacity: .9;
	filter: drop-shadow(0 0 3px rgba(255, 170, 30, .9));
}

/* Free spins left */
.pr-free {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 3em;
	padding: 4px 12px;
	border-top: 3px solid var(--pr-brass);
	background: linear-gradient(#6a321a, var(--pr-wood) 45%, #33160b);
	color: var(--cg-gold-bright);
	font-family: var(--font-display);
	font-size: clamp(.85rem, 4.4cqw, 1.3rem);
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

.pr-free-count {
	color: var(--pr-yellow);
	font-size: 1.9em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.pr-free-count:empty {
	display: none;
}

/* Free spins under way: everything turns to gold */
.pr-free-mode {
	border-color: var(--pr-brass);
	box-shadow: 0 0 40px rgba(255, 170, 30, .35), 0 0 50px rgba(0, 0, 0, .65);
}

.pr-free-mode .pr-board {
	background: radial-gradient(circle at 30% 40%, #a8741c, #6b4512 60%, #3a2409);
}

.pr-overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 8px;
	padding: 16px;
	background: radial-gradient(circle at 50% 30%, rgba(60, 30, 8, .95), rgba(8, 4, 2, .96) 75%);
	text-align: center;
}

.pr-overlay-art {
	width: min(88%, 380px);
	height: auto;
	border-radius: 12px;
	/* the pictures are cut out of a larger scene: let their edges melt away */
	-webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 74%);
	mask-image: radial-gradient(ellipse at center, #000 55%, transparent 74%);
}

.pr-overlay-kicker {
	font-size: .8rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--pr-brass);
}

.pr-overlay-kicker:empty, .pr-overlay-text:empty {
	display: none;
}

.pr-overlay-title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 9cqw, 2.8rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--pr-yellow);
	text-shadow: 0 2px 4px rgba(0, 0, 0, .7);
	font-variant-numeric: tabular-nums;
	text-wrap: balance;
}

.pr-overlay-text {
	max-width: 34ch;
	color: var(--cg-text);
}

.pr-overlay .dock-actions {
	margin-top: 8px;
}

/* Controls: the stake, then the spin button */
.pr-dock {
	max-width: 520px;
}

.pr-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.pr-bet {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pr-pays-icon {
	width: 34px;
	height: 34px;
	border-radius: 6px;
}

/* The 20 lines, each on its own little five-by-three grid */
.pr-line-chart {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 12px 10px;
}

.pr-line {
	display: grid;
	justify-items: center;
	gap: 3px;
}

.pr-line-grid {
	display: grid;
	grid-template-columns: repeat(5, 10px);
	grid-auto-rows: 10px;
	gap: 2px;
}

.pr-line-grid span {
	border-radius: 2px;
	background: var(--cg-panel-light);
}

.pr-line-grid .pr-line-on {
	background: var(--cg-gold);
}

.pr-line-number {
	font-size: .7rem;
	color: var(--cg-text-muted);
	font-variant-numeric: tabular-nums;
}

/* Beside its controls the stage is sized by the height it may take */
.cab-wide .pr-stage {
	width: clamp(320px, calc((var(--vh, 100vh) - 135px) / 1.26), 540px);
	max-width: none;
}

@media (max-width: 700px) {
	.pr-stage {
		max-width: min(100%, calc((var(--vh, 100vh) - 300px) / 1.26));
		min-width: min(100%, 300px);
		border-radius: 16px;
	}

	.pr-frame {
		padding: 4px;
	}

	.pr-controls {
		gap: 14px;
	}

	.pr-dock {
		margin-top: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pr-rolling .pr-cell img, .pr-landed, .pr-win img, .pr-gone img, .pr-scatter img, .pr-bump {
		animation: none;
		filter: none;
	}

	.pr-gone img {
		opacity: 0;
	}

	.pr-cell img {
		transition: none;
	}
}

/* ==========================================================================
   Wanted Wild
   A western street at dusk. Reels on dark plum tiles; amber marks what
   belongs to the bonuses. A wanted reel is a poster hung over the whole
   reel, with its bounty on a plank underneath. The controls, the buy menu
   and the overlay are those of Big Piggy Bonus, in amber instead of pink.
   ========================================================================== */

#view-wanted {
	--pg-pink: #ffab3d;
	--pg-pink-glow: rgba(255, 171, 61, .5);
	--pg-veil: rgba(18, 10, 22, .9);
	--ww-cell: #241a33;
	--ww-line: #46325c;
	--ww-wood: #5b3517;
	--ww-wood-dark: #2b170a;
	--ww-yellow: #ffe15a;
}

.game-thumb-wanted {
	background-image: url("../assets/wanted/W.webp");
}

.ww-stage {
	max-width: 900px;
	margin: 0 auto;
	padding: 18px;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 14px;
	/* night sky over the last light on the street */
	background:
		radial-gradient(ellipse at 50% 118%, #b4541f 0%, rgba(140, 62, 32, .55) 28%, transparent 60%),
		linear-gradient(#17112b, #2a1838 55%, #3a1d2c);
	box-shadow: 0 0 50px rgba(0, 0, 0, .65);
	/* text on the reels is sized from the stage, not from the screen */
	container-type: inline-size;
}

.ww-frame {
	position: relative;
	/* five reels by three rows */
	max-width: clamp(380px, calc((var(--vh, 100vh) - 400px) * 5 / 3 + 20px), 760px);
	margin: 0 auto;
	padding: 10px;
	background: var(--pg-veil);
	border: 2px solid #8a5a2b;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}

/* Bonus hunt switched on: the frame says so until it is switched off */
.ww-hunting .ww-frame, .ww-bonus .ww-frame {
	border-color: var(--pg-pink);
	box-shadow: 0 0 22px var(--pg-pink-glow), 0 10px 30px rgba(0, 0, 0, .6);
}

.ww-hud {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 10px;
	text-align: center;
}

.ww-reels {
	position: relative;
}

.ww-board {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 6px;
}

.ww-reel {
	position: relative;
	display: grid;
	gap: 6px;
}

.ww-cell {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	background: linear-gradient(#2d2140, var(--ww-cell));
	border: 1px solid var(--ww-line);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ww-cell img {
	width: 92%;
	height: 92%;
	object-fit: contain;
	transition: opacity .2s ease, filter .2s ease;
}

/* The sheriff, the coyote and the poster are pictures in their own frame */
.ww-framed img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@keyframes ww-roll {
	from { transform: translateY(-24%); }
	to { transform: translateY(24%); }
}

@keyframes ww-land {
	0% { transform: translateY(-12px); }
	60% { transform: translateY(4px); }
	100% { transform: none; }
}

@keyframes ww-pulse {
	50% { transform: scale(1.07); }
}

@keyframes ww-pop {
	0% { transform: scale(.3); opacity: 0; }
	60% { transform: scale(1.25); opacity: 1; }
	100% { transform: none; opacity: 1; }
}

@keyframes ww-unroll {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0); }
}

.ww-rolling .ww-cell img {
	filter: blur(2px);
	animation: ww-roll .13s linear infinite;
}

/* --ww-speed is set by the speed buttons: 1 by default, more when slow, less in turbo */
.ww-landed {
	animation: ww-land calc(.22s * var(--ww-speed, 1)) ease-out;
}

.ww-cell.ww-win {
	border-color: var(--ww-yellow);
	box-shadow: inset 0 0 0 1px var(--ww-yellow), 0 0 14px rgba(255, 200, 60, .7);
}

.ww-cell.ww-win img {
	animation: win-hit calc(.5s * var(--ww-speed, 1)) cubic-bezier(.3, 1.3, .5, 1) both, win-breathe calc(1.1s * var(--ww-speed, 1)) ease-in-out calc(.5s * var(--ww-speed, 1)) infinite;
}

.ww-cell.ww-dim img {
	opacity: .3;
}

/* The three symbols that opened a bonus */
.ww-call {
	border-color: var(--pg-pink);
	box-shadow: 0 0 16px var(--pg-pink-glow);
}

.ww-call img {
	animation: ww-pulse calc(.5s * var(--ww-speed, 1)) ease-in-out 3;
}

/* A wanted reel: the poster over the whole reel, its bounty underneath */
.ww-wanted {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 2px solid #d8a640;
	border-radius: 10px;
	background: linear-gradient(var(--ww-wood), var(--ww-wood-dark));
	box-shadow: 0 0 14px rgba(255, 170, 40, .5);
	animation: ww-unroll calc(.32s * var(--ww-speed, 1)) ease-out;
}

.ww-poster {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 300 / 577;
}

.ww-bounty {
	flex: 1;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 0;
	min-height: 0;
	border-top: 2px solid #d8a640;
	line-height: 1.05;
}

.ww-bounty-label {
	font-size: clamp(.45rem, 1.5cqw, .7rem);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #e9c98a;
}

.ww-bounty-value {
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 6.4cqw, 2.6rem);
	font-weight: 700;
	color: var(--ww-yellow);
	text-shadow: 0 2px 0 #7a3d06, 0 0 12px rgba(255, 190, 40, .6);
	font-variant-numeric: tabular-nums;
}

.ww-bounty-value:empty::before {
	content: "?";
	opacity: .5;
}

.ww-pop {
	animation: ww-pop calc(.38s * var(--ww-speed, 1)) ease-out;
}

.ww-wanted.ww-win {
	border-color: var(--ww-yellow);
	box-shadow: 0 0 0 2px var(--ww-yellow), 0 0 22px rgba(255, 200, 60, .85);
}

.ww-wanted.ww-dim {
	filter: brightness(.55);
}

/* Held by the hold-up until its last spin */
.ww-held {
	border-style: double;
	border-width: 4px;
}

/* The winning lines, drawn across the reels: one unit per cell */
.ww-lines {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ww-lines polyline {
	fill: none;
	stroke: var(--ww-yellow);
	stroke-width: 3;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	opacity: .9;
	filter: drop-shadow(0 0 3px rgba(255, 170, 30, .9));
}

.ww-overlay {
	z-index: 3;
}

/* Pictures of a bonus on its opening screen: the bag, or the two duellists */
.ww-art {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.ww-art:empty {
	display: none;
}

.ww-art-bag {
	width: clamp(64px, 16cqw, 130px);
	height: auto;
}

.ww-art-face {
	width: clamp(46px, 11cqw, 96px);
	height: auto;
	border: 2px solid #d8a640;
	border-radius: 8px;
}

.ww-art-versus {
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 5cqw, 2rem);
	font-weight: 700;
	color: var(--pg-pink);
}

@media (max-width: 860px) {
	.ww-stage {
		padding: 14px;
	}
}

@media (max-width: 700px) {
	.ww-stage {
		padding: 8px;
		border-radius: 18px;
	}

	.ww-frame {
		max-width: none;
		padding: 6px;
		border-radius: 12px;
	}

	.ww-board, .ww-reel {
		gap: 3px;
	}

	.ww-cell, .ww-wanted {
		border-radius: 6px;
	}

	.ww-cell img {
		width: 96%;
		height: 96%;
	}

	/* the opening screens have little room over three short rows */
	.ww-art-face {
		width: 40px;
	}

	.ww-art-bag {
		width: 56px;
	}

	.ww-overlay .pg-overlay-title {
		font-size: 1.5rem;
	}

	.ww-overlay .pg-overlay-text {
		font-size: .82rem;
		line-height: 1.3;
	}

	.ww-overlay {
		gap: 5px;
		padding: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ww-rolling .ww-cell img, .ww-landed, .ww-cell.ww-win img, .ww-call img, .ww-wanted, .ww-pop {
		animation: none;
		filter: none;
	}

	.ww-cell {
		transition: none;
	}
}

/* ==========================================================================
   Olympus Heights
   The game's own screenshot is the backdrop, behind a veil; the reels are its
   stone tiles, edge to edge, in cells of the picture's own proportions.
   Sky blue marks what belongs to the bonuses.
   ========================================================================== */

#view-olympus {
	--pg-pink: #7fd8ff;
	--pg-pink-glow: rgba(127, 216, 255, .5);
	--pg-veil: rgba(18, 10, 26, .9);
	--oh-stone: #45293a;
	--oh-yellow: #ffe15a;
}

.game-thumb-olympus {
	background-image: url("../assets/olympus/S.webp");
}


.oh-stage {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	padding: 16px;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 14px;
	overflow: hidden;
	background: #1a1226 url("../assets/olympus/backdrop.webp") center / cover;
	box-shadow: 0 0 50px rgba(0, 0, 0, .65);
	/* text on the reels is sized from the stage, not from the screen */
	container-type: inline-size;
}

/* The backdrop is a small picture: a veil hides the stretch and keeps the reels readable */
.oh-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(14, 8, 22, .45), rgba(14, 8, 22, .75));
}

.oh-frame {
	position: relative;
	z-index: 1;
	/* six reels by five rows of 54 by 42.4 cells: about 1.5 times wider than tall */
	max-width: clamp(360px, calc((var(--vh, 100vh) - 440px) * 1.5 + 16px), 640px);
	margin: 0 auto;
	padding: 8px;
	background: var(--pg-veil);
	border: 2px solid #b08a3c;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}

.oh-hunting .oh-frame, .oh-bonus .oh-frame {
	border-color: var(--pg-pink);
	box-shadow: 0 0 22px var(--pg-pink-glow), 0 10px 30px rgba(0, 0, 0, .6);
}

/* The multiplier, always; free spins left and bonus winnings beside it during a bonus */
.oh-hud {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 8px;
	text-align: center;
}

.oh-hud-extra {
	visibility: hidden;
}

.oh-hud-bonus .oh-hud-extra {
	visibility: visible;
}

.oh-board {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 2px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--oh-stone);
}

.oh-reel {
	display: grid;
	gap: 2px;
}

.oh-cell {
	position: relative;
	aspect-ratio: 54 / 42.4;
}

.oh-cell img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	transition: filter .2s ease;
}

@keyframes oh-roll {
	from { transform: translateY(-30%); }
	to { transform: translateY(30%); }
}

@keyframes oh-land {
	0% { transform: translateY(-10px); }
	60% { transform: translateY(4px); }
	100% { transform: none; }
}

@keyframes oh-pulse {
	50% { transform: scale(1.08); }
}

@keyframes oh-burst {
	40% { transform: scale(1.15); filter: brightness(1.8); opacity: 1; }
	100% { transform: scale(.3); filter: brightness(2.2); opacity: 0; }
}

.oh-rolling .oh-cell img {
	filter: blur(2px);
	animation: oh-roll .12s linear infinite;
}

/* --oh-speed is set by the speed buttons: 1 by default, more when slow, less in turbo */
.oh-landed {
	animation: oh-land calc(.2s * var(--oh-speed, 1)) ease-out;
}

/* A symbol that pays, and the others while it shows */
.oh-win {
	z-index: 1;
}

.oh-win img {
	box-shadow: 0 0 0 2px var(--oh-yellow), 0 0 12px 3px rgba(255, 190, 40, .85);
	animation: win-hit calc(.5s * var(--oh-speed, 1)) cubic-bezier(.3, 1.3, .5, 1) both, win-breathe calc(1.1s * var(--oh-speed, 1)) ease-in-out calc(.5s * var(--oh-speed, 1)) infinite;
}

.oh-dim img {
	filter: brightness(.4);
}

/* Paid, and leaving the reels */
.oh-gone img {
	animation: oh-burst calc(.24s * var(--oh-speed, 1)) ease-in forwards;
}

/* The scatters that opened a bonus */
.oh-call {
	z-index: 1;
}

.oh-call img {
	box-shadow: 0 0 0 2px var(--pg-pink), 0 0 16px 4px var(--pg-pink-glow);
	animation: oh-pulse calc(.5s * var(--oh-speed, 1)) ease-in-out 3;
}

.oh-overlay {
	z-index: 3;
}

/* Zeus, standing on the left of a bonus's opening screen */
.oh-overlay-art {
	position: absolute;
	top: 5%;
	left: 3%;
	width: auto;
	height: 90%;
	border-radius: 8px;
}

.oh-with-art {
	padding-left: 27%;
}

@media (max-width: 700px) {
	.oh-stage {
		padding: 6px;
	}

	.oh-frame {
		max-width: none;
		padding: 4px;
		border-radius: 10px;
	}

	.oh-overlay {
		gap: 5px;
		padding: 6px;
	}

	.oh-with-art {
		padding-left: 25%;
	}

	.oh-overlay .pg-overlay-title {
		font-size: 1.4rem;
	}

	.oh-overlay .pg-overlay-text {
		font-size: .8rem;
		line-height: 1.3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oh-rolling .oh-cell img, .oh-landed, .oh-win img, .oh-gone img, .oh-call img {
		animation: none;
		filter: none;
	}

	.oh-gone img {
		opacity: 0;
	}

	.oh-cell img {
		transition: none;
	}
}

/* ==========================================================================
   Huff N' Puff
   The casino machine's look: reels as dark green strips between bright green
   rails, four jackpot meters above, a yellow "total win" bar below. Frames,
   houses and symbols are cut from the machine's own screens.
   ========================================================================== */

#view-huff {
	--pg-pink: #ffd91f;
	--pg-pink-glow: rgba(255, 217, 31, .5);
	--hf-green: #36a02a;
	--hf-reel-top: #030b05;
	--hf-reel: #0b2a11;
	--hf-yellow: #ffd91f;
}

.game-thumb-huff {
	background-image: url("../assets/huff/P3.webp");
	background-color: #0b2a11;
}

.hf-stage {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	padding: 16px;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 14px;
	overflow: hidden;
	background: #0a1030 url("../assets/huff/backdrop.webp") center top / cover;
	box-shadow: 0 0 50px rgba(0, 0, 0, .65);
	/* text on the machine is sized from the stage, not from the screen */
	container-type: inline-size;
}

/* The backdrop is a small picture: a veil hides the stretch and keeps the reels readable */
.hf-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(6, 10, 30, .35), rgba(6, 10, 30, .7));
}

.hf-frame {
	position: relative;
	z-index: 1;
	/* meters, reels (40 wide for 21 tall) and bar: sized so the controls stay on screen */
	max-width: clamp(330px, calc((var(--vh, 100vh) - 474px) * 1.9 + 16px), 680px);
	margin: 0 auto;
	padding: 8px;
	background: rgba(4, 18, 8, .93);
	border: 3px solid var(--hf-green);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}

.hf-bonus .hf-frame {
	border-color: var(--hf-yellow);
	box-shadow: 0 0 22px rgba(255, 217, 31, .45), 0 10px 30px rgba(0, 0, 0, .6);
}

/* The four jackpot meters */
.hf-jackpots {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	margin-bottom: 8px;
}

.hf-jackpot {
	display: grid;
	justify-items: center;
	padding: 3px 2px;
	border: 1px solid transparent;
	border-image: url("../assets/theme/plate-panel.png") 10 12 fill / 10px 12px;
	border-radius: 9px;
	background: var(--under-panel);
	line-height: 1.15;
}

.hf-jackpot-name {
	font-size: clamp(.55rem, 1.7cqw, .72rem);
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hf-jackpot-value {
	font-size: clamp(.68rem, 2.5cqw, 1.05rem);
	font-weight: 700;
	color: var(--cg-gold-bright);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hf-jackpot-mini .hf-jackpot-name { color: #e37bff; }
.hf-jackpot-minor .hf-jackpot-name { color: #5fdc5a; }
.hf-jackpot-major .hf-jackpot-name { color: #5aa8ff; }
.hf-jackpot-grand .hf-jackpot-name { color: #ff5a4d; }

@keyframes hf-flash {
	50% { filter: brightness(1.9) drop-shadow(0 0 8px var(--hf-yellow)); transform: scale(1.06); }
}

.hf-jackpot-hit {
	animation: hf-flash .5s ease-in-out 4;
}

.hf-reels {
	position: relative;
}

/* Reels as on the machine: dark strips between bright green rails, no line between the rows */
.hf-board {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 4px;
	padding: 4px;
	overflow: hidden;
	border-radius: 6px;
	background: var(--hf-green);
}

.hf-reel {
	display: grid;
	background: linear-gradient(var(--hf-reel-top), var(--hf-reel) 45%);
}

.hf-cell {
	position: relative;
	aspect-ratio: 8 / 7;
}

.hf-symbol {
	display: block;
	width: 100%;
	height: 100%;
	transition: opacity .2s ease, filter .2s ease;
}

@keyframes hf-roll {
	from { transform: translateY(-28%); }
	to { transform: translateY(28%); }
}

@keyframes hf-land {
	0% { transform: translateY(-10px); }
	60% { transform: translateY(4px); }
	100% { transform: none; }
}

@keyframes hf-pulse {
	50% { transform: scale(1.08); }
}

@keyframes hf-pop {
	0% { transform: scale(.55); opacity: 0; }
	60% { transform: scale(1.12); opacity: 1; }
	100% { transform: none; opacity: 1; }
}

.hf-rolling .hf-symbol {
	filter: blur(2px);
	animation: hf-roll .12s linear infinite;
}

/* --hf-speed is set by the speed buttons: 1 by default, more when slow, less in turbo */
.hf-landed {
	animation: hf-land calc(.22s * var(--hf-speed, 1)) ease-out;
}

.hf-win .hf-symbol {
	animation: win-jump calc(.5s * var(--hf-speed, 1)) cubic-bezier(.3, 1.3, .5, 1) both, win-breathe calc(1.1s * var(--hf-speed, 1)) ease-in-out calc(.5s * var(--hf-speed, 1)) infinite;
	filter: drop-shadow(0 0 6px var(--hf-yellow));
}

.hf-dim .hf-symbol {
	opacity: .32;
}

/* The hats or saws that opened a feature, or a hat building its frame */
.hf-call .hf-symbol {
	animation: hf-pulse calc(.45s * var(--hf-speed, 1)) ease-in-out 3;
	filter: drop-shadow(0 0 8px #fff);
}

/* A frame: rope for straw, planks for wood, bricks for brick */
.hf-ring {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: center / 100% 100% no-repeat;
	pointer-events: none;
}

.hf-ring-1 { background-image: url("../assets/huff/frame-1.webp"); }
.hf-ring-2 { background-image: url("../assets/huff/frame-2.webp"); }
.hf-ring-3 { background-image: url("../assets/huff/frame-3.webp"); }

.hf-pop {
	animation: hf-pop calc(.34s * var(--hf-speed, 1)) ease-out;
}

/* The house a frame turns into, and the prize it gives up once blown down */
.hf-house {
	position: absolute;
	inset: 2%;
	z-index: 2;
	width: 96%;
	height: 96%;
	object-fit: contain;
}

.hf-built .hf-symbol, .hf-built .hf-ring {
	visibility: hidden;
}

@keyframes hf-blow {
	25% { transform: translateX(-5%) rotate(-7deg); opacity: 1; }
	100% { transform: translate(170%, -70%) rotate(55deg); opacity: 0; }
}

@keyframes hf-prize {
	0% { transform: scale(.4); opacity: 0; }
	60% { transform: scale(1.2); opacity: 1; }
	100% { transform: none; opacity: 1; }
}

.hf-blown .hf-house {
	animation: hf-blow calc(.5s * var(--hf-speed, 1)) ease-in forwards;
}

.hf-prize {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	opacity: 0;
	color: var(--hf-yellow);
	font-family: var(--font-display);
	font-size: clamp(.62rem, 2.7cqw, 1.25rem);
	font-weight: 900;
	line-height: 1.1;
	text-align: center;
	white-space: pre-line;
	text-shadow: 0 2px 0 #5a3200, 0 0 10px rgba(0, 0, 0, .8);
	font-variant-numeric: tabular-nums;
}

.hf-blown .hf-prize {
	animation: hf-prize calc(.35s * var(--hf-speed, 1)) ease-out calc(.2s * var(--hf-speed, 1)) forwards;
}

.hf-prize-jackpot {
	color: #fff;
	text-transform: uppercase;
	text-shadow: 0 2px 0 #8a0d0d, 0 0 12px #ff5a4d;
}

/* The giant hat, the saw crossing a row, the wolf come to blow */
.hf-mega {
	position: absolute;
	z-index: 3;
	object-fit: fill;
	animation: hf-pop .4s ease-out;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .7));
}

.hf-cut {
	position: absolute;
	left: 0;
	z-index: 3;
	width: 20%;
	height: 33.34%;
}

@keyframes hf-wolf-in {
	from { transform: translateX(-120%); }
	to { transform: none; }
}

.hf-wolf {
	position: absolute;
	left: 0;
	top: 33.33%;
	z-index: 3;
	/* one cell of the first reel */
	width: 20.5%;
	height: 33.34%;
	border: 2px solid var(--hf-yellow);
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .7);
	animation: hf-wolf-in .35s ease-out;
}

/* Under the reels: the free spins counter and the machine's "total win" bar */
.hf-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 12px;
	margin-top: 8px;
	font-family: var(--font-display);
	font-size: clamp(.68rem, 2.3cqw, .9rem);
	font-weight: 900;
	text-transform: uppercase;
}

.hf-free {
	padding: 3px 10px;
	border: 2px solid #ffd27a;
	border-radius: 8px;
	background: linear-gradient(#ff9a2e, #d9480f);
	color: #fff;
	white-space: nowrap;
}

.hf-total {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 3px 4px 3px 14px;
	border: 2px solid #fff3a6;
	border-radius: 8px;
	background: linear-gradient(#ffe95a, #f2b705);
	color: #1a1300;
	white-space: nowrap;
}

.hf-total-value {
	min-width: 8ch;
	padding: 1px 10px;
	border-radius: 5px;
	background: #5a0d0d;
	color: #ffe15a;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* The wheel: eight segments, turned by the page to the one the server drew */
.hf-wheel-layer {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 9px;
	background: rgba(4, 8, 24, .9);
}

.hf-wheel-box {
	position: relative;
	height: 90%;
	max-width: 90%;
	aspect-ratio: 1;
}

.hf-wheel {
	position: absolute;
	inset: 0;
	border: 6px solid #d9dde3;
	border-radius: 50%;
	/* buzz saw, mini, mega hat, minor, buzz saw, mansions, mega hat, major: the server's order */
	background: conic-gradient(#0e8fa3 0 45deg, #7b3fc4 0 90deg, #e0541b 0 135deg, #2e9e3a 0 180deg, #0b7384 0 225deg, #c2185b 0 270deg, #f08a1c 0 315deg, #1e66d0 0);
	box-shadow: 0 0 0 4px #f0b62e, 0 0 30px rgba(255, 200, 60, .5);
}

.hf-wedge {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
}

.hf-wedge span {
	width: 27%;
	margin-top: 8%;
	color: #fff;
	font-family: var(--font-display);
	font-size: clamp(.56rem, 2.4cqw, 1.05rem);
	font-weight: 900;
	line-height: 1.05;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 6px rgba(0, 0, 0, .5);
}

.hf-hub {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 17%;
	aspect-ratio: 1;
	border: 3px solid #fff3a6;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff3a6, #f0b62e 60%, #8a5a00);
	transform: translate(-50%, -50%);
}

.hf-pointer {
	position: absolute;
	left: 50%;
	top: -6px;
	border: 12px solid transparent;
	border-top: 24px solid #fff;
	transform: translateX(-50%);
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7));
}

.hf-overlay {
	z-index: 5;
}

@media (max-width: 700px) {
	.hf-stage {
		padding: 6px;
	}

	.hf-frame {
		max-width: none;
		padding: 5px;
		border-radius: 10px;
	}

	.hf-jackpots {
		gap: 3px;
		margin-bottom: 5px;
	}

	.hf-board {
		gap: 3px;
		padding: 3px;
	}

	.hf-bar {
		margin-top: 5px;
	}

	.hf-overlay {
		gap: 5px;
		padding: 8px;
	}

	.hf-overlay .pg-overlay-title {
		font-size: 1.5rem;
	}

	.hf-overlay .pg-overlay-text {
		font-size: .82rem;
		line-height: 1.3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hf-rolling .hf-symbol, .hf-landed, .hf-win .hf-symbol, .hf-call .hf-symbol, .hf-pop, .hf-mega, .hf-wolf, .hf-jackpot-hit {
		animation: none;
		filter: none;
	}

	.hf-blown .hf-house {
		animation: none;
		opacity: 0;
	}

	.hf-blown .hf-prize {
		animation: none;
		opacity: 1;
	}

	.hf-symbol {
		transition: none;
	}
}


/* ==========================================================================
   Administration
   ========================================================================== */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* "admin", "bloqué" beside a player's name */
.admin-tag {
	margin-left: 8px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--cg-gold-wash);
	color: var(--cg-gold-bright);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.admin-tag-locked {
	color: var(--cg-loss);
}

.admin-cell {
	text-align: right;
	white-space: nowrap;
}

/* The player being managed */
.admin-selected td, .admin-selected th {
	background: var(--cg-gold-wash);
}

.admin-panel {
	display: grid;
	gap: 18px;
	margin-top: 18px;
}

.admin-panel h2 {
	font-size: 1.25rem;
	color: var(--cg-gold-bright);
}

.admin-facts {
	color: var(--cg-text-muted);
	font-variant-numeric: tabular-nums;
}

.admin-group {
	display: grid;
	gap: 10px;
}

.admin-group h3 {
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cg-text-muted);
}

.admin-row {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 10px;
}

.admin-row .field {
	flex: 1 1 180px;
	max-width: 260px;
}

.admin-quick {
	justify-content: flex-start;
}

.admin-actions {
	justify-content: flex-start;
	margin-top: 12px;
}

.admin-panel .admin-actions {
	margin-top: 0;
}

/* What the last action did; a new password is written large enough to copy */
.admin-note {
	min-height: 1.5em;
	color: var(--cg-gold-bright);
	overflow-wrap: anywhere;
}

.admin-note strong {
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--cg-black);
	font-family: ui-monospace, Consolas, monospace;
	font-size: 1.1rem;
	letter-spacing: .08em;
	user-select: all;
}

/* ==========================================================================
   Live poker table (Texas Hold'em)
   Six seats around the board: three above it, three below, the player's own
   at the bottom centre. The table and its seats are the blackjack table's;
   the controls are the theme's action tiles, tray and plates.
   ========================================================================== */

.hd-table {
	gap: 14px;
	padding-inline: 28px;
}

.hd-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
}

.hd-seat {
	position: relative;
	gap: 4px;
	min-height: 150px;
	padding-block: 8px 12px;
}

.hd-you {
	background: var(--cg-gold-wash);
	border-color: var(--cg-gold-dim);
}

.hd-you.seat-turn {
	border-color: var(--cg-gold);
}

.hd-folded {
	opacity: .5;
}

.hd-folded .card {
	filter: grayscale(.6) brightness(.7);
}

.hd-seat.hd-winner {
	border-color: var(--cg-win);
	box-shadow: 0 0 18px rgba(123, 216, 163, .3);
}

/* The seat being bought into */
.hd-picked {
	border-style: solid;
	border-color: var(--cg-gold);
	background: var(--cg-gold-wash);
}

/* The dealer button */
.hd-button {
	position: absolute;
	top: -8px;
	right: -6px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--card-face);
	color: var(--card-ink);
	box-shadow: 0 0 0 2px var(--cg-gold), 0 2px 6px var(--cg-shadow);
	font-family: var(--font-display);
	font-size: .7rem;
	font-weight: 900;
}

/* What the player last did, or the hand they show */
.hd-last {
	min-height: 1.3em;
	font-family: var(--font-display);
	font-size: .68rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	color: var(--cg-text-muted);
}

.hd-winner .hd-last {
	color: var(--cg-win);
}

/* The chips in front of a player on this street, or what the hand brought them */
.hd-chips {
	min-height: 1.75em;
	padding: 2px 10px;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 20px;
	color: var(--cg-gold-bright);
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hd-chips.is-win {
	border-color: currentColor;
	color: var(--cg-win);
	font-weight: 700;
}

.hd-chips-none {
	visibility: hidden;
}

/* The turn clock: a bar that empties under the player to speak */
.hd-clock {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 5px;
	height: 3px;
	border-radius: 2px;
	background: var(--cg-line);
	overflow: hidden;
}

.hd-clock::after {
	content: "";
	display: block;
	width: calc(var(--left, 1) * 100%);
	height: 100%;
	background: var(--cg-gold);
	transition: width .25s linear;
}

/* The middle of the table: the board and the pot */
.hd-middle {
	display: grid;
	justify-items: center;
	gap: 8px;
}

.hd-board {
	--card-w: 64px;
	display: flex;
	gap: 6px;
}

.hd-board .card, .hd-board .card-slot {
	margin-left: 0;
}

.hd-blinds {
	font-family: var(--font-display);
	font-size: .68rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cg-gold-dim);
}

/* At the showdown the cards of the winning hand stand out from the others */
.hd-unused {
	filter: brightness(.45);
}

.hd-used {
	box-shadow: 0 0 0 2px var(--cg-gold), 0 0 12px var(--cg-gold-glow);
}

/* Under the table: the player's own two cards again, large, and what they make */
.hd-dock {
	max-width: 620px;
}

.hd-mine {
	--card-w: 62px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.hd-mine .hand {
	min-height: 0;
}

.hd-mine-facts {
	display: grid;
	justify-items: start;
	min-width: 120px;
	line-height: 1.3;
	text-align: left;
}

.hd-mine-label {
	font-size: .6rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cg-text-muted);
}

.hd-mine-holding {
	min-height: 1.3em;
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--cg-gold-bright);
}

.hd-mine-stack {
	display: flex;
	align-items: center;
	font-size: .9rem;
	color: var(--cg-text-muted);
	font-variant-numeric: tabular-nums;
}

/* The four moves: the theme's action tiles, a name and what it costs */
.hd-actions {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
}

.hd-actions .pg-buy {
	max-width: none;
	min-height: 58px;
	padding-inline: 6px;
}

/* Sizing a raise or a buy-in: less, the amount or the shortcuts, more */
.hd-sizing {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.hd-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 18px;
}

/* On a wide screen the controls stand beside the table: a whole hand on one screen, no scrolling */
@media (min-width: 1000px) {
	#view-holdem {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		column-gap: 24px;
		align-items: center;
	}

	#view-holdem .table-bar, #view-holdem .rules {
		grid-column: 1 / -1;
	}

	#view-holdem .table-bar {
		width: 100%;
		max-width: none;
	}

	#view-holdem .hd-table {
		max-width: none;
		margin: 0;
	}

	#view-holdem .hd-dock {
		max-width: none;
		margin: 0;
	}

	.hd-actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hd-sizing .pick {
		min-width: 0;
		padding-inline: 9px;
	}
}

@media (max-width: 700px) {
	.hd-table {
		gap: 6px;
		padding: 10px 8px 12px;
	}

	.hd-row {
		gap: 6px;
	}

	.hd-seat {
		gap: 2px;
		min-height: 98px;
		padding-block: 5px 8px;
	}

	.hd-last {
		font-size: .58rem;
		letter-spacing: .06em;
	}

	.hd-chips {
		min-height: 1.6em;
		padding: 1px 7px;
		font-size: .68rem;
	}

	.hd-button {
		top: -6px;
		right: -3px;
		width: 18px;
		height: 18px;
		font-size: .6rem;
	}

	.hd-board {
		--card-w: 40px;
		gap: 4px;
	}

	.hd-middle {
		gap: 5px;
	}

	.hd-middle .bet-pill {
		min-width: 96px;
		padding: 2px 14px;
	}

	.hd-middle .bet-pill-value {
		font-size: 1.1rem;
	}

	.hd-dock {
		margin-top: 10px;
		gap: 8px;
	}

	.hd-actions .pg-buy {
		min-height: 52px;
	}

	.hd-sizing .step {
		width: 42px;
		height: 42px;
	}

	.hd-blinds {
		display: none;
	}

	.hd-mine {
		--card-w: 46px;
	}
}

@media (max-width: 520px) {
	.hd-actions {
		gap: 6px;
	}

	.hd-actions .pg-buy {
		padding-inline: 3px;
	}

	.hd-actions .pg-buy-label {
		font-size: .6rem;
		letter-spacing: .03em;
	}

	.hd-actions .pg-buy-price {
		font-size: .85rem;
	}

	.hd-sizing {
		gap: 6px;
	}

	.hd-sizing .pick {
		min-width: 0;
		padding-inline: 9px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hd-clock::after {
		transition: none;
	}

	.vk-call .vk-symbol, .vk-turn .vk-symbol, .vk-win .vk-symbol, .vk-bump {
		animation: none;
	}
}

/* ==========================================================================
   Viking's Fortune
   Mathis's own machine, carried over from its Python (pygame) version. The
   stage is the Python's background picture, zoomed on its frame; the reels
   sit on the frame's picture as they do there. The scene is laid out once,
   in shares of the picture, and the stage shows a window onto it: the whole
   frame with its scenery on a wide screen, the reels alone on a phone.
   Controls are the theme's, as on every machine.
   ========================================================================== */

.game-thumb-viking {
	background-image: url("../assets/viking/viking.png");
}

.vk-stage {
	/* the window onto the picture: its left and top edges, its width and height, as shares of the picture */
	--crop-x: .055;
	--crop-y: .04;
	--crop-w: .89;
	--crop-h: .89;
	position: relative;
	aspect-ratio: 3 / 2;
	/* never taller than what leaves the controls on screen */
	max-width: min(900px, max(360px, calc((var(--vh, 100vh) - 490px) * 1.5)));
	margin: 0 auto;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 14px;
	/* clipped, not merely hidden: the scene is larger than its window and must never scroll inside it */
	overflow: hidden;
	overflow: clip;
	background: #0b1030;
	box-shadow: 0 0 50px rgba(0, 0, 0, .65);
	/* everything on the scene is sized from the stage, not from the screen */
	container-type: inline-size;
}

/* The whole picture (3 by 2), placed so that the window shows its part of it */
.vk-scene {
	position: absolute;
	left: calc(-100cqw * var(--crop-x) / var(--crop-w));
	top: calc(-66.667cqw * var(--crop-y) / var(--crop-w));
	width: calc(100cqw / var(--crop-w));
	aspect-ratio: 3 / 2;
	background: url("../assets/viking/scene.webp") center / 100% 100% no-repeat;
}

/* The logo and the balance sign stand over the saloon, as in the Python */
.vk-logo {
	position: absolute;
	left: 6.2%;
	top: 6%;
	width: 16.5%;
	height: auto;
}

.vk-balance {
	position: absolute;
	left: 6.2%;
	top: 48%;
	width: 16.5%;
	aspect-ratio: 1;
	background: url("../assets/viking/balance.png") center / contain no-repeat;
}

.vk-balance span {
	position: absolute;
	left: 9%;
	right: 22%;
	top: 39%;
	height: 27%;
	display: grid;
	place-items: center;
	color: #ffd700;
	font-family: var(--font-display);
	font-size: calc(2.1cqw / var(--crop-w));
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* The reels: on the frame's picture, where the Python draws them */
.vk-reels {
	position: absolute;
	left: 24.9%;
	top: 18.4%;
	width: 43%;
	height: 52%;
	overflow: hidden;
	overflow: clip;
	border-radius: 1.2% / 1.5%;
	/* the picture stays in sight behind the symbols, dimmed so they read */
	background: rgba(8, 10, 34, .55);
}

.vk-board {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	height: 100%;
}

.vk-reel {
	display: grid;
	grid-template-rows: repeat(5, minmax(0, 1fr));
	min-height: 0;
}

.vk-cell {
	position: relative;
	min-height: 0;
	border: 2px solid transparent;
}

.vk-symbol {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4%;
}

/* A symbol of a winning line: framed in the line's colour, as in the Python */
.vk-win {
	border-color: var(--vk-line, #ffd700);
	box-shadow: 0 0 10px var(--vk-line, #ffd700), inset 0 0 8px rgba(0, 0, 0, .4);
}

.vk-win .vk-symbol {
	animation: win-jump calc(.5s * var(--pace, 1)) cubic-bezier(.3, 1.3, .5, 1) both, win-breathe calc(1.1s * var(--pace, 1)) ease-in-out calc(.5s * var(--pace, 1)) infinite;
}

/* The winning lines, drawn across the reels: one unit per cell */
.vk-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.vk-lines polyline {
	fill: none;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	opacity: .75;
}

/* The wooden sign under the reels: the gain and the lines that made it */
.vk-plaque {
	position: absolute;
	left: 25.2%;
	top: 74.2%;
	width: 42.6%;
	height: 13.2%;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: .3cqw;
	text-align: center;
	line-height: 1.2;
}

.vk-gain {
	color: #ffd700;
	font-family: var(--font-display);
	font-size: calc(2.3cqw / var(--crop-w));
	font-weight: 900;
	font-variant-numeric: tabular-nums;
}

.vk-detail {
	display: grid;
	color: #7dff8a;
	font-size: calc(1.5cqw / var(--crop-w));
	font-variant-numeric: tabular-nums;
}

.vk-gain:empty, .vk-detail:empty {
	display: none;
}

.vk-overlay {
	inset: 0;
	border-radius: 0;
}

/* The shield, over the announcement of a bonus */
.vk-overlay-art {
	width: clamp(48px, 13cqw, 96px);
	height: auto;
}

.vk-flag {
	top: 14px;
}

/* A cell called out: the shields that open a bonus, a bag that has just landed */
@keyframes vk-pulse {
	50% { transform: scale(1.18); }
}

.vk-call .vk-symbol {
	animation: vk-pulse .45s ease-in-out 3;
	filter: drop-shadow(0 0 8px #fff);
}

/* A bag of gold that stays: on its gold square until the bonus ends */
@keyframes vk-turn {
	from { transform: rotateY(90deg); }
	to { transform: none; }
}

.vk-sticky {
	border-color: #ffd700;
	background: rgba(255, 215, 0, .2);
	box-shadow: inset 0 0 10px rgba(255, 215, 0, .55);
}

.vk-turn .vk-symbol {
	animation: vk-turn .4s ease-out;
}

/* During a bonus the reels wear gold */
.vk-bonus .vk-reels {
	box-shadow: 0 0 0 2px #ffd700, 0 0 22px rgba(255, 215, 0, .55);
}

/* The multiplier of the bonuses where it climbs: astride the top edge of the reels, clear of the symbols */
@keyframes vk-bump {
	40% { transform: scale(1.45); }
}

.vk-mult {
	position: absolute;
	left: 46.4%;
	top: 18.4%;
	translate: -50% -82%;
	z-index: 2;
	min-width: 2.4em;
	padding: .1em .45em;
	border: 2px solid #6b2a00;
	border-radius: 999px;
	background: linear-gradient(#ffe45c, #ff9d2e);
	color: #3a1500;
	font-family: var(--font-display);
	font-size: calc(2.6cqw / var(--crop-w));
	font-weight: 900;
	line-height: 1.2;
	text-align: center;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

.vk-bump {
	animation: vk-bump .35s ease-out;
}

/* The two tiles, on a line of their own under the bet and the main button */
.vk-side {
	grid-row: auto;
	grid-column: auto;
	width: 100%;
	max-width: 380px;
	margin-inline: auto;
}

/* The lines of the pay table: six columns here */
.vk-line-grid {
	grid-template-columns: repeat(6, 9px);
	grid-auto-rows: 9px;
}

/* Beside its controls the frame may be as tall as the screen allows */
.cab-wide .vk-stage {
	width: 100%;
	max-width: min(100%, calc((var(--vh, 100vh) - 170px) * 1.5));
}

/* On a phone the window closes in on the reels: the frame's rim around them, and no more */
@media (max-width: 699px) {
	.vk-stage {
		--crop-x: .228;
		--crop-y: .13;
		--crop-w: .472;
		--crop-h: .615;
		aspect-ratio: 1416 / 1230;
		max-width: min(100%, max(300px, calc((var(--vh, 100vh) - 440px) * 1.151)));
	}

	.vk-logo, .vk-balance, .vk-plaque {
		display: none;
	}

	.vk-side .pg-buy {
		min-height: 52px;
	}

	.vk-cell {
		border-width: 1.5px;
	}
}

/* ==========================================================================
   Machine cabinets
   Every machine sits in a cabinet laid out like the screens of the theme: a
   black panel in a fine gold line, a bar on top (the way back, the wordmark,
   the machine's name, the balance, sound, full screen), the machine's screen
   and, inside the same frame, its controls. The bar is built by common.js.
   The full-screen sign is not in the theme: four corners drawn in its gold.

   A machine's screen is sized from --vh, the height it may count on: the
   window's, less what the cabinet adds around it.
   ========================================================================== */

.cab {
	--cab-stage: 760px; /* the widest the machine's screen gets */
	--cab-deck: 320px; /* the column of controls, when they stand beside the screen */
	--vh: calc(100vh - 88px); /* the page's bar aside, the cabinet's bar and its win strip */
	/* never narrower than its controls need to stand on one line */
	max-width: calc(max(var(--cab-stage), 800px) + 26px);
	margin: 0 auto;
	position: relative; /* the coins of a win fly over it */
}

#view-piggy .cab { --cab-stage: 1000px; }
#view-pirate .cab { --cab-stage: 540px; }
#view-wanted .cab, #view-olympus .cab, #view-huff .cab, #view-viking .cab { --cab-stage: 900px; }

.cab-body {
	border: 1px solid var(--cg-gold-dim);
	border-radius: 18px;
	background: linear-gradient(#0c0c0c, var(--cg-black) 120px);
	box-shadow: 0 0 50px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(212, 175, 55, .06);
	overflow: hidden;
	overflow: clip;
}

/* The bar on top, as on the theme's screens */
.cab-top {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 46px;
	padding: 5px 12px;
	border-bottom: 1px solid var(--cg-line);
	background: var(--cg-black);
}

/* What the round pays: the same strip under the bar of every machine. "Gain",
   the amount, and where it comes from; or a plain line when nothing is won.
   Its height never changes, so nothing under it moves when a win shows. */
.cab-win {
	height: 44px;
	margin: 0;
	padding: 0 14px;
	border-bottom: 1px solid var(--cg-line);
	background: #070707;
	/* one line whatever it says: the strip never grows, so the reels never move */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;
	font-family: var(--font-display);
	font-size: .92rem;
	font-variant-numeric: tabular-nums;
	line-height: 43px;
	color: var(--cg-text-muted);
	position: relative; /* a light sweeps across it on a win */
}

.cab-win-label {
	margin-right: 10px;
	font-size: .62rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cg-gold);
}

.cab-win-amount {
	display: inline-block; /* it pops when it changes */
	margin-right: 10px;
	text-align: right; /* it counts up in the room its last figure takes */
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--cg-win);
}

/* nothing won: no label, no amount - the line alone, or nothing */
.cab-win:not(.is-win) .cab-win-label, .cab-win:not(.is-win) .cab-win-amount {
	display: none;
}

.cab-win.is-note .cab-win-detail {
	font-size: 1rem;
	font-weight: 500;
	color: var(--cg-text);
}

@keyframes cab-win-pop {
	0% { transform: scale(.7); }
	45% { transform: scale(1.4); }
	100% { transform: none; }
}

.cab-win-pop {
	animation: cab-win-pop .42s ease-out;
}

.cab-back {
	flex: none;
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cg-text-muted);
	white-space: nowrap;
}

.cab-back:hover {
	color: var(--cg-gold-bright);
}

.cab-word {
	flex: none;
	width: auto;
	height: 24px;
}

.cab-name {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .95rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cg-gold-bright);
}

/* A machine with a logo of its own shows it in place of its name */
.cab-name img {
	display: block;
	width: auto;
	height: 30px;
	border-radius: 5px;
}

/* The balance: the theme's "Crédits" panel */
.cab-credit {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2px 14px;
	border: 1px solid transparent;
	border-image: url("../assets/theme/plate-panel.png") 10 12 fill / 10px 12px;
	border-radius: 9px;
	background: var(--under-panel);
	line-height: 1.15;
}

.cab-credit-label {
	font-size: .52rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cg-gold);
}

.cab-credit-value {
	font-family: var(--font-display);
	font-size: .95rem;
	font-weight: 700;
	color: var(--cg-gold-bright);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Full screen: four corners in the theme's gold, opening out, and closing in once it is on */
.cab-full svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: var(--cg-gold);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .15s ease;
}

.cab-full:hover svg {
	stroke: var(--cg-gold-bright);
}

.cab-full-close, .cab-full[aria-pressed="true"] .cab-full-open {
	display: none;
}

.cab-full[aria-pressed="true"] .cab-full-close {
	display: block;
}

/* The screen and, under it, the controls */
.cab-play {
	padding: 12px;
}

.cab-play > .dock {
	min-height: 0;
	margin-top: 12px;
}

/* Side by side: the screen takes the room, the controls stand in a column beside it */
.cab-wide {
	max-width: calc(var(--cab-stage) + var(--cab-deck) + 50px);
}

.cab-wide .cab-play {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--cab-deck);
	align-items: center;
	column-gap: 22px;
}

/* A screen centred by its margins would shrink to nothing in a grid: it takes its column, up to its own limit */
:where(.cab-wide .cab-play) > :first-child {
	width: 100%;
}

.cab-wide .cab-play > .dock {
	width: 100%;
	max-width: none;
	margin: 0;
}

.cab-wide .sl-controls, .cab-wide .pg-controls, .cab-wide .pr-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.cab-wide .pick-rows {
	flex-direction: column;
	align-items: center;
}

.cab-wide .pg-side {
	width: 100%;
}

/* ---- Full screen ---- */

/* The cabinet takes its largest natural size and is scaled as a whole to the
   display (common.js measures it and sets the scale) */
.cab.cab-full-on {
	--vh: 3000px;
	max-width: none;
	background: var(--cg-black);
	overflow: hidden;
}

.cab-full-on.cab-tall {
	--cab-design: min(100vw, calc(max(var(--cab-stage), 800px) + 26px));
}

.cab-full-on.cab-wide {
	--cab-design: calc(var(--cab-stage) + var(--cab-deck) + 50px);
}

/* In the middle of the display whatever its size, then scaled about its centre */
.cab-full-on .cab-body {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	display: flex;
	flex-direction: column;
	width: var(--cab-w, var(--cab-design));
	height: var(--cab-h, auto);
	border: 0;
	border-radius: 0;
	transform: scale(var(--cab-scale, 1));
}

/* What room is left goes above and below the screen and its controls, equally */
.cab-full-on .cab-play {
	margin-block: auto;
}

/* Where the browser has no full-screen mode for a part of the page: the cabinet fills the window */
.cab-fill {
	position: fixed;
	inset: 0;
	z-index: 60;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	margin: 0;
}

body.cab-open {
	overflow: hidden;
}

@media (max-width: 700px) {
	/* On a phone the cabinet goes nearly from edge to edge, and its bar is no taller than the title it replaces: the screen keeps its size */
	.cab {
		--vh: 100vh;
		margin-inline: -10px;
	}

	.cab-full-on {
		margin-inline: 0;
	}

	.cab-body {
		border-radius: 14px;
	}

	.cab-top {
		gap: 8px;
		min-height: 42px;
		padding: 4px 8px;
	}

	.cab-play {
		padding: 8px 6px 10px;
	}

	.cab-play > .dock {
		margin-top: 8px;
	}

	.cab-name {
		font-size: .74rem;
		letter-spacing: .1em;
	}

	.cab-name img {
		height: 24px;
	}

	.cab-credit {
		padding-inline: 10px;
	}

	.cab-credit-value {
		font-size: .88rem;
	}

	/* The site's own bar carries the wordmark; full screen, that bar is gone and the wordmark takes the name's place */
	.cab-word {
		display: none;
	}

	.cab-full-on .cab-word {
		display: block;
		margin-right: auto;
	}

	.cab-full-on .cab-name {
		display: none;
	}
}


/* ==========================================================================
   Wanted Wild 2
   The same street as the first machine, later in the night: cold blue tiles,
   and a red-orange for what belongs to the bonuses. It reuses the first
   machine's reels, posters and overlay (.ww-*); what follows is only what
   differs - five rows, posters that walk, and the run.
   ========================================================================== */

#view-wanted2 {
	--pg-pink: #ff7a45;
	--pg-pink-glow: rgba(255, 122, 69, .5);
	--pg-veil: rgba(8, 12, 22, .92);
	--ww-cell: #14202e;
	--ww-line: #2c435c;
	--ww-wood: #5b3517;
	--ww-wood-dark: #2b170a;
	--ww-yellow: #ffe15a;
}

#view-wanted2 .cab { --cab-stage: 600px; }

.game-thumb-wanted2 {
	background-image: url("../assets/wanted/CO.webp");
}

.w2-stage {
	max-width: 620px;
	/* the last of the night over the roofs */
	background:
		radial-gradient(ellipse at 50% 120%, #a8431c 0%, rgba(120, 52, 40, .5) 26%, transparent 58%),
		linear-gradient(#0b1424, #142238 55%, #2a1c2c);
}

/* five reels by five rows: as wide as it may be tall */
.w2-stage .ww-frame {
	max-width: clamp(300px, calc(var(--vh, 100vh) - 430px), 560px);
}

/* Beside its controls the frame takes the height of the screen */
.cab-wide .w2-stage {
	max-width: min(100%, calc(var(--vh, 100vh) - 110px));
}

.cab-wide .w2-stage .ww-frame {
	max-width: clamp(320px, calc(var(--vh, 100vh) - 170px), 560px);
}

.w2-stage .ww-cell {
	background: linear-gradient(#1b2b3d, var(--ww-cell));
}

.w2-stage .ww-board, .w2-stage .ww-reel {
	gap: 4px;
}

/* A wanted reel five rows high: the poster on top, the bounty under it, then the way it is heading */
.w2-wanted {
	will-change: transform;
}

.w2-wanted .ww-poster {
	flex: none;
}

.w2-wanted .ww-bounty {
	flex: 1;
	border-bottom: 2px solid #d8a640;
}

.w2-wanted .ww-bounty-value {
	font-size: clamp(1.2rem, 9cqw, 2.8rem);
}

.w2-way {
	flex: none;
	display: grid;
	place-items: center;
	padding: 2% 0 4%;
	color: #e9c98a;
	font-size: clamp(.8rem, 4.2cqw, 1.5rem);
	line-height: 1;
	animation: w2-step .8s ease-in-out infinite alternate;
}

@keyframes w2-step {
	from { opacity: .45; }
	to { opacity: 1; }
}

/* On the run: the frame says so until the last wanted reel has gone */
.w2-running .ww-frame {
	border-color: var(--ww-yellow);
	box-shadow: 0 0 22px rgba(255, 200, 60, .45), 0 10px 30px rgba(0, 0, 0, .6);
}

.w2-run {
	top: auto;
	bottom: 0;
	transform: translate(-50%, 55%);
	background: var(--ww-yellow);
}

/* The count of free spins and what they have paid: a plate astride the top of
   the frame, so that the reels keep their size and their place during a bonus */
.w2-stage .ww-hud, .fp-stage .ww-hud {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 3;
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 3px 16px;
	border: 1px solid var(--pg-pink);
	border-radius: 999px;
	background: #0a1220;
	white-space: nowrap;
	translate: -50% -55%;
}

.w2-stage .pg-hud-item, .fp-stage .pg-hud-item {
	display: flex;
	align-items: baseline;
	gap: 7px;
}

.w2-stage .pg-hud-label, .fp-stage .pg-hud-label {
	font-size: .56rem;
}

.w2-stage .pg-hud-value, .fp-stage .pg-hud-value {
	font-size: .95rem;
}

/* during a bonus the counter stands where the bonus hunt's flag does */
.w2-stage.ww-bonus #wanted2-flag, .fp-stage.ww-bonus #fruit-flag {
	display: none;
}

/* the lines of the pay table: five rows here */
.w2-line-chart {
	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
}

@media (max-width: 700px) {
	.w2-stage .ww-frame {
		max-width: none;
	}

	.w2-stage .ww-board, .w2-stage .ww-reel {
		gap: 2px;
	}

	.w2-wanted .ww-bounty-value {
		font-size: clamp(1rem, 8.5cqw, 2rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.w2-way {
		animation: none;
	}
}

/* ==========================================================================
   Wanted Wild Megaways
   The street of the two other Wanted machines at high noon: sand and rust.
   It reuses their reels and overlay (.ww-*); what follows is what differs -
   six reels whose cells share the reel's height, however many they are, a bar
   that counts the ways and names the bounty, and symbols that leave.
   ========================================================================== */

#view-wantedmega {
	--pg-pink: #ffc24a;
	--pg-pink-glow: rgba(255, 194, 74, .5);
	--pg-veil: rgba(20, 12, 6, .92);
	--ww-cell: #2a1c10;
	--ww-line: #5c4022;
	--ww-wood: #5b3517;
	--ww-wood-dark: #2b170a;
	--ww-yellow: #ffe15a;
}

#view-wantedmega .cab { --cab-stage: 720px; }

.game-thumb-wantedmega {
	background-image: url("../assets/wanted/RA.webp");
}

.mw-stage {
	max-width: 740px;
	/* a hard sun on the sand */
	background:
		radial-gradient(ellipse at 50% -10%, #f0b454 0%, rgba(196, 112, 40, .55) 30%, transparent 62%),
		linear-gradient(#3a2110, #25150b 60%, #170d07);
}

/* six reels in a window five sixths as high as it is wide, under the bar */
.mw-stage .ww-frame {
	max-width: clamp(320px, calc((var(--vh, 100vh) - 470px) * 6 / 5), 700px);
}

/* Beside its controls the frame takes the height of the screen */
.cab-wide .mw-stage {
	max-width: min(100%, calc((var(--vh, 100vh) - 190px) * 6 / 5 + 60px));
}

.cab-wide .mw-stage .ww-frame {
	max-width: clamp(340px, calc((var(--vh, 100vh) - 230px) * 6 / 5), 700px);
}

/* The ways this spin offers, and the bounty its wins are paid at; during a
   bonus, the free spins left and what they have paid */
.mw-bar {
	display: flex;
	justify-content: center;
	gap: 8px 22px;
	flex-wrap: wrap;
	min-height: 2.9rem;
	margin-bottom: 8px;
	text-align: center;
}

.mw-bar .pg-hud-item {
	min-width: 5.5em;
}

.mw-bar .pg-hud-value {
	font-size: 1.15rem;
}

/* every reel as high as it can be: 117 649 ways */
.mw-ways-top {
	color: var(--ww-yellow);
	text-shadow: 0 0 10px rgba(255, 200, 60, .8);
}

.mw-stage .ww-reels {
	overflow: hidden;
	overflow: clip;
	border-radius: 8px;
}

.mw-stage .ww-board {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	aspect-ratio: 6 / 5;
	gap: 4px;
}

/* A reel shares its height between its cells, two of them or seven */
.mw-stage .ww-reel {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 0;
}

.mw-stage .ww-cell {
	flex: 1 1 0;
	aspect-ratio: auto;
	min-height: 0;
	border-radius: 8px;
	background: linear-gradient(#3a2816, var(--ww-cell));
}

/* a cell may be much wider than high, or much higher than wide: the whole picture always shows */
.mw-stage .ww-cell img, .mw-stage .ww-framed img {
	width: 94%;
	height: 94%;
	object-fit: contain;
}

.mw-stage .ww-framed img {
	border-radius: 8px;
}

/* A poster's multiplier, on the poster: the gold of the bounty */
.mw-stage .ww-cell {
	position: relative;
}

.mw-mult {
	position: absolute;
	left: 50%;
	bottom: 4%;
	translate: -50% 0;
	z-index: 2;
	min-width: 2em;
	padding: 0 .35em;
	border: 1px solid #6b3a00;
	border-radius: 999px;
	background: linear-gradient(#ffe45c, #ff9d2e);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .6), 0 0 10px rgba(255, 190, 60, .55);
	color: #3a1500;
	font-family: var(--font-display);
	font-size: clamp(.55rem, 2.7cqw, 1.05rem);
	font-weight: 900;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
}

.ww-dim .mw-mult {
	opacity: .35;
}

@keyframes mw-mult-pop {
	0% { transform: scale(1); }
	45% { transform: scale(1.45) rotate(-6deg); }
	100% { transform: none; }
}

.mw-mult-pop {
	animation: mw-mult-pop calc(.45s * var(--ww-speed, 1)) ease-out;
}

/* Paid, and leaving the reels */
@keyframes mw-burst {
	to { transform: scale(1.5); opacity: 0; }
}

.mw-gone img {
	animation: mw-burst calc(.24s * var(--ww-speed, 1)) ease-in forwards;
}

@media (max-width: 700px) {
	.mw-stage .ww-frame {
		max-width: none;
	}

	.mw-stage .ww-board, .mw-stage .ww-reel {
		gap: 2px;
	}

	.mw-stage .ww-cell {
		border-radius: 5px;
	}

	.mw-bar {
		gap: 4px 14px;
		min-height: 2.6rem;
		margin-bottom: 6px;
	}

	.mw-bar .pg-hud-item {
		min-width: 4.4em;
	}

	.mw-bar .pg-hud-value {
		font-size: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mw-gone img {
		animation: none;
		opacity: 0;
	}
}

/* ==========================================================================
   Fruit Party
   The fruits are cut from a sheet drawn on plum: every cell is that same plum,
   so each picture and its glow sit in their cell without a seam. Pink marks
   what belongs to the bonuses. The frame, the counter and the overlay are
   those of the Wanted machines (.ww-*).
   ========================================================================== */

#view-fruit {
	--pg-pink: #ff5fa8;
	--pg-pink-glow: rgba(255, 95, 168, .5);
	--pg-veil: rgba(22, 10, 26, .93);
	--fp-plum: #2f1d33; /* the sheet's own background */
	--fp-line: #4a2f52;
	--fp-yellow: #ffe15a;
}

#view-fruit .cab { --cab-stage: 600px; }

.game-thumb-fruit {
	background-image: url("../assets/fruit/ST.png");
}

.fp-stage {
	max-width: 620px;
	/* party lights over the plum */
	background:
		radial-gradient(ellipse at 15% 0%, rgba(255, 95, 168, .35) 0%, transparent 45%),
		radial-gradient(ellipse at 85% 0%, rgba(255, 190, 70, .28) 0%, transparent 45%),
		linear-gradient(#3b2140, #22122a 60%, #170b1c);
}

/* seven reels by seven rows: as wide as it may be tall */
.fp-stage .ww-frame {
	max-width: clamp(300px, calc(var(--vh, 100vh) - 430px), 560px);
	border-color: #7a3f86;
}

/* Beside its controls the frame takes the height of the screen */
.cab-wide .fp-stage {
	max-width: min(100%, calc(var(--vh, 100vh) - 110px));
}

.cab-wide .fp-stage .ww-frame {
	max-width: clamp(320px, calc(var(--vh, 100vh) - 170px), 560px);
}

.fp-stage .ww-reels {
	overflow: hidden;
	overflow: clip;
	border-radius: 8px;
}

.fp-board {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 3px;
}

.fp-reel {
	display: grid;
	gap: 3px;
}

.fp-cell {
	position: relative;
	aspect-ratio: 1;
	background: var(--fp-plum);
	border: 1px solid var(--fp-line);
	border-radius: 7px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.fp-cell img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	transition: opacity .2s ease, filter .2s ease;
}

@keyframes fp-roll {
	from { transform: translateY(-26%); }
	to { transform: translateY(26%); }
}

@keyframes fp-land {
	0% { transform: translateY(-10px); }
	60% { transform: translateY(3px); }
	100% { transform: none; }
}

@keyframes fp-pulse {
	50% { transform: scale(1.1); }
}

@keyframes fp-burst {
	to { transform: scale(1.5); opacity: 0; }
}

@keyframes fp-mark-pop {
	0% { transform: scale(.2) rotate(-20deg); opacity: 0; }
	60% { transform: scale(1.35) rotate(6deg); opacity: 1; }
	100% { transform: none; opacity: 1; }
}

.fp-rolling .fp-cell {
	overflow: hidden;
}

.fp-rolling .fp-cell img {
	filter: blur(2px);
	animation: fp-roll .12s linear infinite;
}

/* --fp-speed is set by the speed buttons: 1 by default, more when slow, less in turbo */
.fp-landed {
	animation: fp-land calc(.2s * var(--fp-speed, 1)) ease-out;
}

/* A fruit of a winning cluster, and the others while it shows */
.fp-win {
	z-index: 1;
	border-color: var(--fp-yellow);
	box-shadow: inset 0 0 0 1px var(--fp-yellow), 0 0 12px rgba(255, 210, 80, .75);
}

.fp-win img {
	animation: win-hit calc(.5s * var(--fp-speed, 1)) cubic-bezier(.3, 1.3, .5, 1) both, win-breathe calc(1.1s * var(--fp-speed, 1)) ease-in-out calc(.5s * var(--fp-speed, 1)) infinite;
}

.fp-dim img {
	opacity: .32;
}

/* Paid, and leaving the reels */
.fp-gone img {
	animation: fp-burst calc(.23s * var(--fp-speed, 1)) ease-in forwards;
}

.fp-gone .fp-mark {
	opacity: 0;
}

/* A party multiplier on a winning fruit */
.fp-mark {
	position: absolute;
	right: -3px;
	top: -3px;
	z-index: 2;
	min-width: 1.9em;
	padding: 0 .3em;
	border: 1px solid #5a1638;
	border-radius: 999px;
	background: linear-gradient(#ff8cc4, var(--pg-pink));
	color: #2a0a1c;
	font-family: var(--font-display);
	font-size: clamp(.6rem, 3.6cqw, 1.05rem);
	font-weight: 900;
	line-height: 1.45;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .6), 0 0 10px var(--pg-pink-glow);
	transition: opacity .15s ease;
}

.fp-mark-pop {
	animation: fp-mark-pop calc(.36s * var(--fp-speed, 1)) ease-out;
}

/* the golden 777 over the name of a bonus */
.fp-art {
	width: clamp(54px, 14cqw, 96px);
	height: auto;
	border-radius: 12px;
	box-shadow: 0 0 18px var(--pg-pink-glow);
}

@media (max-width: 700px) {
	.fp-stage .ww-frame {
		max-width: none;
	}

	.fp-board, .fp-reel {
		gap: 2px;
	}

	.fp-cell {
		border-radius: 5px;
	}

	.fp-mark {
		right: -2px;
		top: -2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fp-rolling .fp-cell img, .fp-landed, .fp-win img, .fp-gone img, .fp-mark-pop {
		animation: none;
		filter: none;
	}

	.fp-gone img {
		opacity: 0;
	}
}

/* ==========================================================================
   Le Bandit
   The original's own screen is the scene - the street, the frame of the
   reels, the logo and the bandit - and the page's reels sit exactly where the
   game's were. Cells are the game's dark squares; a golden square is the
   mustard tile of its bonus screens. Green, the logo's, marks what belongs to
   the bonuses. On a phone the reels take the whole width over the street.
   ========================================================================== */

#view-bandit {
	--pg-pink: #6ddb57;
	--pg-pink-glow: rgba(109, 219, 87, .5);
	--pg-veil: rgba(18, 14, 10, .92);
	--lb-cell: #2f2a26;
	--lb-line: #191613;
	--lb-gold-1: #f0d465;
	--lb-gold-2: #cfa83d;
	--lb-gold-3: #94721f;
	--lb-ink: #3b2408;
}

#view-bandit .cab { --cab-stage: 1000px; }

/* the logo is long: in a narrow bar it shrinks rather than being cut */
#view-bandit .cab-name img {
	max-width: 100%;
	height: auto;
	max-height: 30px;
}

.game-thumb-bandit {
	background-image: url("../assets/bandit/W.webp");
}

.lb-stage {
	position: relative;
	/* the original's screen is 800 by 384: its reels are the middle 46 % of it */
	aspect-ratio: 800 / 384;
	max-width: min(100%, var(--cab-stage), max(560px, calc((var(--vh, 100vh) - 272px) * 2.083)));
	margin: 0 auto;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 14px;
	overflow: hidden;
	overflow: clip;
	background: #241e1a;
	box-shadow: 0 0 50px rgba(0, 0, 0, .65);
	/* digits on the coins are sized from the stage, not from the screen */
	container-type: inline-size;
}

.lb-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../assets/bandit/scene.webp") center / 100% 100%;
	transition: filter .8s ease;
}

/* the free spins are played at night, as in the original: the street darkens and turns blue */
.lb-stage::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #2b4a9a;
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity .8s ease;
	pointer-events: none;
}

.lb-bonus::before {
	filter: brightness(.7) saturate(.6);
}

.lb-bonus::after {
	opacity: .85;
}

.lb-hunting .lb-board, .lb-bonus .lb-board {
	box-shadow: 0 0 0 2px var(--pg-pink), 0 0 22px var(--pg-pink-glow);
}

.lb-stage .pg-flag {
	top: 4%;
	transform: translateX(-50%);
}

/* The count of free spins and what they have paid, over the logo */
.lb-hud {
	position: absolute;
	top: 2.5%;
	left: 50%;
	z-index: 3;
	display: flex;
	gap: 16px;
	padding: 3px 16px;
	border: 1px solid var(--pg-pink);
	border-radius: 999px;
	background: #0d140b;
	white-space: nowrap;
	translate: -50% 0;
}

.lb-hud .pg-hud-item {
	display: flex;
	align-items: baseline;
	gap: 7px;
}

.lb-hud .pg-hud-label {
	font-size: .56rem;
}

.lb-hud .pg-hud-value {
	font-size: .95rem;
}

.lb-board {
	position: absolute;
	left: 27%;
	top: 16.67%;
	width: 46.125%;
	height: 79.95%;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	background: var(--lb-line);
}

.lb-reel {
	display: grid;
	grid-template-rows: repeat(5, minmax(0, 1fr));
}

.lb-cell {
	position: relative;
	background: var(--lb-cell);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), inset 1px 1px 0 1px rgba(255, 255, 255, .035);
	transition: background-color .25s ease;
}

/* a symbol's picture holds its cell and a tenth more around it */
.lb-symbol {
	position: absolute;
	left: -10%;
	top: -10%;
	z-index: 1;
	width: 120%;
	height: 120%;
	pointer-events: none;
	transition: opacity .2s ease, filter .2s ease;
}

/* A golden square: the mustard tile of the bonus screens, with its bevel */
.lb-gold {
	background: linear-gradient(145deg, var(--lb-gold-1), var(--lb-gold-2) 58%, var(--lb-gold-3));
	box-shadow: inset 0 0 0 1px #4a370b, inset 3px 3px 0 rgba(255, 244, 176, .5), inset -3px -3px 0 rgba(84, 58, 6, .5);
}

@keyframes lb-gild {
	0% { filter: brightness(2.2); }
	100% { filter: none; }
}

.lb-gild {
	animation: lb-gild calc(.6s * var(--lb-speed, 1)) ease-out;
}

@keyframes lb-roll {
	from { transform: translateY(-26%); }
	to { transform: translateY(26%); }
}

@keyframes lb-land {
	0% { transform: translateY(-10px); }
	60% { transform: translateY(3px); }
	100% { transform: none; }
}

@keyframes lb-burst {
	to { transform: scale(1.45); opacity: 0; }
}

@keyframes lb-pulse {
	50% { transform: scale(1.12); }
}

.lb-rolling .lb-cell {
	overflow: hidden;
}

.lb-rolling .lb-symbol {
	filter: blur(2px);
	animation: lb-roll .12s linear infinite;
}

/* --lb-speed is set by the speed buttons: 1 by default, more when slow, less in turbo */
.lb-landed {
	animation: lb-land calc(.2s * var(--lb-speed, 1)) ease-out;
}

/* A symbol of a winning cluster, and the others while it shows */
.lb-win {
	z-index: 1;
}

.lb-win .lb-symbol {
	filter: drop-shadow(0 0 5px rgba(255, 228, 120, .95));
	animation: win-hit calc(.5s * var(--lb-speed, 1)) cubic-bezier(.3, 1.3, .5, 1) both, win-breathe calc(1.1s * var(--lb-speed, 1)) ease-in-out calc(.5s * var(--lb-speed, 1)) infinite;
}

.lb-dim .lb-symbol {
	opacity: .35;
}

/* Paid, or of a winning kind, and leaving the reels */
.lb-gone .lb-symbol {
	animation: lb-burst calc(.25s * var(--lb-speed, 1)) ease-in forwards;
}

/* The cameras that opened a bonus, the rainbow that wakes the golden squares */
.lb-call {
	z-index: 2;
}

.lb-call .lb-symbol {
	filter: drop-shadow(0 0 8px var(--pg-pink));
	animation: lb-pulse calc(.5s * var(--lb-speed, 1)) ease-in-out 3;
}

@keyframes lb-rainbow {
	0% { transform: scale(.4) rotate(-12deg); filter: brightness(2); }
	60% { transform: scale(1.25) rotate(4deg); }
	100% { transform: none; }
}

.lb-rainbow .lb-symbol {
	animation: lb-rainbow calc(.55s * var(--lb-speed, 1)) ease-out;
}

/* What a golden square turned into: a coin, a clover or a pot, and its value */
.lb-revealed .lb-symbol {
	opacity: 0;
}

.lb-tile {
	position: absolute;
	inset: -5%;
	z-index: 2;
	display: grid;
	place-items: center;
}

.lb-tile[hidden] {
	display: none;
}

.lb-tile img {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
}

.lb-value {
	grid-area: 1 / 1;
	font-family: var(--font-display);
	font-weight: 900;
	line-height: 1;
	color: #fff6dc;
	letter-spacing: -.02em;
	-webkit-text-stroke: .09em var(--lb-ink);
	paint-order: stroke fill;
	text-shadow: 0 .07em 0 var(--lb-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* a cell is 7.7 % of the stage's width; the digits shrink as the number grows */
.lb-value[data-size="l"] { font-size: 3.1cqw; }
.lb-value[data-size="m"] { font-size: 2.3cqw; }
.lb-value[data-size="s"] { font-size: 1.6cqw; }

.lb-tile-B { --lb-ink: #5b2307; }
.lb-tile-V { --lb-ink: #1f4252; }
.lb-tile-G { --lb-ink: #5b3c02; }

.lb-tile-C .lb-value {
	--lb-ink: #0c4209;
	color: #eaffdc;
}

.lb-tile-P .lb-value {
	--lb-ink: #241a00;
	color: #ffe98a;
	transform: translateY(14%);
}

@keyframes lb-flip {
	0% { transform: rotateY(90deg) scale(.8); filter: brightness(1.8); }
	100% { transform: none; }
}

@keyframes lb-bump {
	0% { transform: scale(1); }
	45% { transform: scale(1.3); filter: brightness(1.5); }
	100% { transform: scale(1); }
}

@keyframes lb-give {
	50% { transform: scale(.82); filter: brightness(1.6); }
}

@keyframes lb-glow {
	50% { transform: scale(1.18) rotate(-8deg); filter: drop-shadow(0 0 10px #8dff6a) brightness(1.3); }
}

.lb-flip {
	animation: lb-flip calc(.3s * var(--lb-speed, 1)) ease-out;
}

.lb-bump {
	z-index: 3;
	animation: lb-bump calc(.45s * var(--lb-speed, 1)) ease-out;
}

.lb-give {
	animation: lb-give calc(.35s * var(--lb-speed, 1)) ease-in-out;
}

.lb-glow {
	z-index: 3;
	animation: lb-glow calc(.5s * var(--lb-speed, 1)) ease-in-out 2;
}

.lb-overlay {
	z-index: 4;
	border-radius: 0;
}

/* The bandit over the name of a bonus, or beside its result */
.lb-art {
	height: clamp(90px, 24cqw, 210px);
	width: auto;
	border-radius: 10px;
	border: 1px solid var(--cg-gold-dim);
	box-shadow: 0 0 22px var(--pg-pink-glow);
}

@media (max-width: 700px) {
	.lb-stage {
		aspect-ratio: auto;
		max-width: none;
		padding: 34px 6px 6px;
	}

	.lb-stage::before {
		background-size: cover;
		background-position: 40% top;
		opacity: .55;
	}

	.lb-board {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 6 / 5;
		border-radius: 6px;
		overflow: hidden;
		overflow: clip;
	}

	.lb-stage .pg-flag {
		top: 8px;
	}

	#view-bandit .cab-name img {
		max-height: 24px;
	}

	.lb-hud {
		top: 4px;
		gap: 10px;
		padding: 2px 10px;
	}

	/* here a cell is a sixth of the width */
	.lb-value[data-size="l"] { font-size: 7cqw; }
	.lb-value[data-size="m"] { font-size: 5.2cqw; }
	.lb-value[data-size="s"] { font-size: 3.6cqw; }

	.lb-art {
		height: clamp(70px, 30cqw, 140px);
	}

	.lb-overlay {
		gap: 5px;
		padding: 8px;
	}

	.lb-overlay .pg-overlay-title {
		font-size: 1.5rem;
	}

	.lb-overlay .pg-overlay-text {
		font-size: .8rem;
		line-height: 1.3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lb-rolling .lb-symbol, .lb-landed, .lb-win .lb-symbol, .lb-gone .lb-symbol, .lb-call .lb-symbol, .lb-rainbow .lb-symbol, .lb-gild, .lb-flip, .lb-bump, .lb-give, .lb-glow {
		animation: none;
		filter: none;
	}

	.lb-gone .lb-symbol {
		opacity: 0;
	}

	.lb-stage::before, .lb-stage::after, .lb-cell, .lb-symbol {
		transition: none;
	}
}

/* ==========================================================================
   Stormforged
   The original's own screens are the scenes - the frame of the reels and its
   logo in the snow, the lava of Surtur's Vengeance, the ice of Warriors of
   the Storm - each cut so that its reels fall in the same place, and the
   page's reels sit exactly over them. The reels take each scene's colour,
   measured on the recording; the game's teal draws the lines. Ice blue marks
   what belongs to the features. The storm reels and the inside of the
   portals come from the original; the portals' frames, the multipliers'
   lettering and the hammer that strikes are drawn here.
   ========================================================================== */

#view-storm {
	--pg-pink: #7fd4ff;
	--pg-pink-glow: rgba(127, 212, 255, .5);
	--pg-veil: rgba(8, 13, 20, .92);
	--sf-line: #7fe8d6;
	--sf-ink: #0c2440;
	/* the reels' colour, top and bottom, in the base game and in each bonus */
	--sf-reel-1: #1f1e1e;
	--sf-reel-2: #161515;
}

.sf-surtur {
	--sf-reel-1: #33171a;
	--sf-reel-2: #261113;
}

.sf-storm {
	--sf-reel-1: #2c2e35;
	--sf-reel-2: #212328;
}

#view-storm .cab { --cab-stage: 1000px; }

/* the logo is long: in a narrow bar it shrinks rather than being cut */
#view-storm .cab-name img {
	max-width: 100%;
	height: auto;
	max-height: 30px;
}

.game-thumb-storm {
	background-image: url("../assets/storm/SU.webp");
}

.sf-stage {
	position: relative;
	aspect-ratio: 1.6;
	max-width: min(100%, var(--cab-stage), max(560px, calc((var(--vh, 100vh) - 272px) * 1.6)));
	margin: 0 auto;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 14px;
	overflow: hidden;
	overflow: clip;
	background: #10151b;
	box-shadow: 0 0 50px rgba(0, 0, 0, .65);
	/* the digits on the reels are sized from the stage, not from the screen */
	container-type: inline-size;
}

.sf-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../assets/storm/scene.webp") center / 100% 100%;
}

.sf-surtur::before {
	background-image: url("../assets/storm/scene-surtur.webp");
}

.sf-storm::before {
	background-image: url("../assets/storm/scene-storm.webp");
}

.sf-hunting .sf-board {
	box-shadow: 0 0 0 2px var(--pg-pink), 0 0 22px var(--pg-pink-glow);
}

/* the feature spins switched on, in the corner: the logo stays in view */
.sf-stage .pg-flag {
	top: 3%;
	left: 3%;
	transform: none;
}

/* The count of free spins and what they have paid, over the logo */
.sf-hud {
	position: absolute;
	top: 2.5%;
	left: 50%;
	z-index: 3;
	display: flex;
	gap: 16px;
	padding: 3px 16px;
	border: 1px solid var(--pg-pink);
	border-radius: 999px;
	background: #0b1520;
	white-space: nowrap;
	translate: -50% 0;
}

.sf-hud .pg-hud-item {
	display: flex;
	align-items: baseline;
	gap: 7px;
}

.sf-hud .pg-hud-label {
	font-size: .56rem;
}

.sf-hud .pg-hud-value {
	font-size: .95rem;
}

/* the reels of every scene are 15 % from the left and from the top, 70 % wide */
.sf-board {
	position: absolute;
	left: 15%;
	top: 15%;
	width: 70%;
	height: 81.76%;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	border-radius: 4px;
	background: var(--sf-reel-2);
}

.sf-reel {
	position: relative;
	display: grid;
	grid-template-rows: repeat(4, minmax(0, 1fr));
	background: linear-gradient(180deg, var(--sf-reel-1), var(--sf-reel-2));
	transition: background-color .8s ease;
	box-shadow: inset 1px 0 0 rgba(0, 0, 0, .55), inset -1px 0 0 rgba(255, 255, 255, .04), inset 0 0 18px rgba(0, 0, 0, .45);
}

.sf-cell {
	position: relative;
}

/* a symbol's picture is square, as high as its cell */
.sf-symbol {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	height: 96%;
	width: auto;
	aspect-ratio: 1;
	translate: -50% -50%;
	pointer-events: none;
	transition: opacity .2s ease, filter .2s ease;
}

@keyframes sf-roll {
	from { transform: translateY(-24%); }
	to { transform: translateY(24%); }
}

@keyframes sf-land {
	0% { transform: translateY(-8px); }
	60% { transform: translateY(3px); }
	100% { transform: none; }
}

@keyframes sf-pulse {
	50% { transform: scale(1.14); }
}

.sf-rolling .sf-cell {
	overflow: hidden;
}

.sf-rolling .sf-cell:not(.sf-sticky) .sf-symbol {
	filter: blur(2px);
	animation: sf-roll .12s linear infinite;
}

/* slow motion, while a bonus is one scatter away */
.sf-rolling.sus-now .sf-cell:not(.sf-sticky) .sf-symbol {
	filter: blur(.5px);
	animation-duration: .6s;
}

/* --sf-speed is set by the speed buttons: 1 by default, more when slow, less in turbo */
.sf-landed {
	animation: sf-land calc(.2s * var(--sf-speed, 1)) ease-out;
}

/* The symbols of the winning lines, and the others while they show */
.sf-win {
	z-index: 2;
}

.sf-win .sf-symbol {
	filter: drop-shadow(0 0 6px rgba(143, 227, 255, .95));
	animation: win-hit calc(.5s * var(--sf-speed, 1)) cubic-bezier(.3, 1.3, .5, 1) both, win-breathe calc(1.1s * var(--sf-speed, 1)) ease-in-out calc(.5s * var(--sf-speed, 1)) infinite;
}

.sf-dim .sf-symbol {
	opacity: .35;
}

/* A hand, an ice brand or a hammer that has just landed; the scatters that open a bonus */
.sf-call {
	z-index: 2;
}

.sf-call .sf-symbol {
	filter: drop-shadow(0 0 8px var(--pg-pink));
	animation: sf-pulse calc(.5s * var(--sf-speed, 1)) ease-in-out 3;
}

/* The winning lines, drawn across the reels: one unit per cell */
.sf-lines {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.sf-lines polyline {
	fill: none;
	stroke: var(--sf-line);
	stroke-width: 3;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	opacity: .85;
	filter: drop-shadow(0 0 3px rgba(127, 232, 214, .9));
}

/* A portal torn from a hand of Surtur down its reel: a window onto
   Muspelheim's fire; from an ice brand, onto Midgard's ice. The window shows
   the foot of a scene as high as the reel (the script sizes it). It sits over
   the symbols of its cells; a multiplier or a coin shows over it. */
.sf-portal {
	position: absolute;
	left: 11%;
	right: 11%;
	z-index: 1;
	border: 2px solid #ffd58a;
	border-radius: 12px;
	background: #e2742f url("../assets/storm/portal-fire.webp") center bottom / 100% 100% no-repeat;
	box-shadow: 0 0 10px 3px rgba(255, 140, 30, .9), inset 0 0 12px rgba(255, 228, 160, .75);
	transform-origin: top;
	pointer-events: none;
	transition: box-shadow .25s ease;
}

.sf-portal[hidden] {
	display: none;
}

.sf-portal-ice {
	border-color: #e2fbff;
	background-color: #8dd5f0;
	background-image: url("../assets/storm/portal-ice.webp");
	box-shadow: 0 0 12px 3px rgba(110, 220, 255, .9), inset 0 0 12px rgba(255, 255, 255, .65);
}

/* on a winning line */
.sf-portal.sf-lit {
	box-shadow: 0 0 20px 6px rgba(255, 170, 60, .95), inset 0 0 14px rgba(255, 240, 190, .85);
}

.sf-portal-ice.sf-lit {
	box-shadow: 0 0 20px 6px rgba(140, 230, 255, .95), inset 0 0 14px rgba(255, 255, 255, .8);
}

/* the sum of its wilds' multipliers, as the original writes them, where the
   last wild was (the script places it) */
.sf-portal-mult {
	position: absolute;
	left: 0;
	right: 0;
	translate: 0 -50%;
	text-align: center;
	font-size: 5cqw;
}

.sf-portal-mult:empty {
	display: none;
}

@keyframes sf-tear {
	0% { transform: scaleY(0); filter: brightness(2); }
	100% { transform: scaleY(1); filter: none; }
}

.sf-tear {
	animation: sf-tear calc(.4s * var(--sf-speed, 1)) cubic-bezier(.3, .8, .4, 1);
}

/* under the portal the cells give way, the hand's with them */
.sf-torn .sf-symbol {
	opacity: 0;
}

/* What a portal tore through: a wild's multiplier, a chest's prize on its coin */
.sf-badge {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.sf-badge[hidden] {
	display: none;
}

.sf-badge > * {
	grid-area: 1 / 1;
}

/* multipliers in the original's lettering: pale blue, slanted, dark outline */
.sf-mult span, .sf-prize span, .sf-storm-mult, .sf-portal-mult {
	font-family: var(--font-display);
	font-weight: 900;
	font-style: italic;
	line-height: 1;
	color: #a9e2ff;
	-webkit-text-stroke: .08em var(--sf-ink);
	paint-order: stroke fill;
	text-shadow: 0 .05em 0 var(--sf-ink), 0 0 10px rgba(170, 228, 255, .85);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* a cell is 14 % of the stage's width */
.sf-mult span {
	font-size: 4.4cqw;
}

.sf-prize img {
	width: 72%;
	height: auto;
}

.sf-prize span {
	font-size: 2.1cqw;
	font-style: normal;
	color: #eef4f8;
	-webkit-text-stroke-color: #2a2f36;
}

@keyframes sf-pop {
	0% { transform: scale(.3); opacity: 0; }
	60% { transform: scale(1.25); opacity: 1; }
	100% { transform: scale(1); }
}

.sf-pop {
	animation: sf-pop calc(.4s * var(--sf-speed, 1)) ease-out;
}

/* A wild that sticks, in Surtur's Vengeance: the blue wild catches fire and
   turns gold, as on the original */
@keyframes sf-ignite {
	0% { transform: scale(1.3); filter: brightness(2.2) sepia(1) saturate(3) hue-rotate(-20deg); }
	100% { transform: none; filter: none; }
}

.sf-ignite .sf-symbol {
	animation: sf-ignite calc(.6s * var(--sf-speed, 1)) ease-out;
}

/* A storm reel: a warrior and his multiplier, the storm, or white mist while
   it waits - each in the original's gilded frame */
.sf-stormreel {
	position: absolute;
	inset: 0 1%;
	z-index: 2;
	overflow: hidden;
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(143, 227, 255, .45);
	transition: box-shadow .25s ease;
}

.sf-stormreel[hidden] {
	display: none;
}

.sf-stormreel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.sf-storm-mult {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6%;
	text-align: center;
	font-size: 5.2cqw;
}

/* the storm itself: lightning now and then */
.sf-storm-storm::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 30%, rgba(235, 248, 255, .85), transparent 65%);
	opacity: 0;
	animation: sf-lightning 2.8s steps(1, end) infinite;
}

@keyframes sf-lightning {
	0%, 62%, 66%, 70%, 100% { opacity: 0; }
	63%, 69% { opacity: 1; }
}

.sf-stormreel.sf-lit {
	box-shadow: 0 0 18px 5px rgba(143, 227, 255, .95);
}

/* Thor's hammer coming down on its reel, then a white flash over the stage */
.sf-hammer {
	position: absolute;
	top: -14%;
	z-index: 6;
	width: 30%;
	height: auto;
	translate: -50% 0;
	transform-origin: 70% 80%;
	pointer-events: none;
	filter: drop-shadow(0 0 14px rgba(170, 225, 255, .95));
}

.sf-hammer[hidden] {
	display: none;
}

@keyframes sf-strike {
	0% { transform: translateY(-30%) rotate(-55deg) scale(1.5); opacity: 0; }
	35% { opacity: 1; }
	80% { transform: translateY(35%) rotate(8deg) scale(1.1); }
	100% { transform: translateY(30%) rotate(0) scale(1.1); }
}

.sf-strike {
	animation: sf-strike calc(.45s * var(--sf-speed, 1)) cubic-bezier(.5, 0, .9, .5) forwards;
}

.sf-flash {
	position: absolute;
	inset: 0;
	z-index: 6;
	background: radial-gradient(circle at 50% 55%, #fff, rgba(210, 238, 255, .85) 35%, rgba(150, 210, 255, .2) 75%);
	opacity: 0;
	pointer-events: none;
}

@keyframes sf-flash {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

.sf-flash-on {
	animation: sf-flash calc(.7s * var(--sf-speed, 1)) ease-out;
}

@keyframes sf-forge {
	0% { transform: scaleY(.15); filter: brightness(3); }
	100% { transform: none; filter: none; }
}

@keyframes sf-reveal {
	0% { transform: scale(1.06); filter: brightness(2.2); }
	100% { transform: none; filter: none; }
}

@keyframes sf-slide {
	from { transform: translateX(105%); }
	to { transform: none; }
}

.sf-forge {
	animation: sf-forge calc(.45s * var(--sf-speed, 1)) ease-out;
}

.sf-reveal {
	animation: sf-reveal calc(.45s * var(--sf-speed, 1)) ease-out;
}

.sf-slide {
	animation: sf-slide calc(.5s * var(--sf-speed, 1)) ease-in-out;
}

.sf-overlay {
	z-index: 5;
	border-radius: 0;
}

/* Surtur over the name of his bonus, the berserker over the other's */
.sf-art {
	height: clamp(90px, 22cqw, 200px);
	width: auto;
}

.sf-art-berserker-art, .sf-art-surtur-art {
	border: 1px solid var(--cg-gold-dim);
	border-radius: 10px;
	box-shadow: 0 0 22px var(--pg-pink-glow);
}

@media (max-width: 700px) {
	.sf-stage {
		aspect-ratio: auto;
		max-width: none;
		padding: 34px 6px 6px;
	}

	.sf-stage::before {
		background-size: cover;
		background-position: center top;
		opacity: .55;
	}

	.sf-board {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 5 / 3.65;
		overflow: hidden;
		overflow: clip;
	}

	.sf-stage .pg-flag {
		top: 8px;
		left: 8px;
	}

	#view-storm .cab-name img {
		max-height: 24px;
	}

	.sf-hud {
		top: 4px;
		gap: 10px;
		padding: 2px 10px;
	}

	/* here a cell is a fifth of the width */
	.sf-mult span { font-size: 6.2cqw; }
	.sf-portal-mult { font-size: 7cqw; }
	.sf-prize span { font-size: 3.2cqw; }
	.sf-storm-mult { font-size: 7.2cqw; }

	.sf-art {
		height: clamp(70px, 30cqw, 140px);
	}

	.sf-overlay {
		gap: 5px;
		padding: 8px;
	}

	.sf-overlay .pg-overlay-title {
		font-size: 1.5rem;
	}

	.sf-overlay .pg-overlay-text {
		font-size: .8rem;
		line-height: 1.3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sf-rolling .sf-cell:not(.sf-sticky) .sf-symbol, .sf-landed, .sf-win .sf-symbol, .sf-call .sf-symbol, .sf-tear, .sf-pop, .sf-ignite .sf-symbol, .sf-forge, .sf-reveal, .sf-slide, .sf-storm-storm::after, .sf-strike, .sf-flash-on {
		animation: none;
		filter: none;
	}

	.sf-symbol, .sf-stormreel {
		transition: none;
	}
}

/* ==========================================================================
   Chaos Crew 2
   The original's own screens are the scenes - the graffiti wall with the cat
   and the reaper for the base game, the green wall and the monster for the
   bonus - and the page's reels sit exactly over theirs. The multipliers above
   the reels are written where the original writes them, in its yellow; its
   neon green marks what belongs to the features. The stripes of the sticky
   symbols are the original's colours; the tape of the epic ones is drawn.
   ========================================================================== */

#view-chaos {
	--pg-pink: #9dff3c;
	--pg-pink-glow: rgba(157, 255, 60, .45);
	--pg-veil: rgba(10, 8, 14, .92);
	--cc-line: #ff3fb4;
	--cc-yellow: #f6f03a;
	--cc-cyan: #3fd6ff;
}

#view-chaos .cab { --cab-stage: 1060px; }

#view-chaos .cab-name img {
	max-width: 100%;
	height: auto;
	max-height: 34px;
}

.game-thumb-chaos {
	background-image: url("../assets/chaos/W.webp");
}

.cc-stage {
	position: relative;
	/* the original's screen, its controls cut off: 1258 by 628 */
	aspect-ratio: 1258 / 628;
	max-width: min(100%, var(--cab-stage), max(560px, calc((var(--vh, 100vh) - 272px) * 2)));
	margin: 0 auto;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 14px;
	overflow: hidden;
	overflow: clip;
	background: #0e0b12;
	box-shadow: 0 0 50px rgba(0, 0, 0, .65);
	container-type: inline-size;
}

.cc-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../assets/chaos/scene.webp") center / 100% 100%;
}

.cc-bonus::before {
	background-image: url("../assets/chaos/scene-bonus.webp");
}

@keyframes cc-flash {
	0% { filter: brightness(2.4) saturate(2); }
	100% { filter: none; }
}

.cc-flash {
	animation: cc-flash calc(.6s * var(--cc-speed, 1)) ease-out;
}

.cc-hunting .cc-board {
	box-shadow: 0 0 0 2px var(--pg-pink), 0 0 22px var(--pg-pink-glow);
}

.cc-stage .pg-flag {
	top: 3%;
	left: auto;
	right: 3%;
	transform: none;
}

/* The bonus's count, lives and total, at the top left, over the wall */
.cc-hud {
	position: absolute;
	top: 3%;
	left: 1.5%;
	z-index: 3;
	display: grid;
	gap: 4px;
	padding: 8px 12px;
	border: 1px solid var(--pg-pink);
	border-radius: 12px;
	background: rgba(8, 12, 6, .88);
}

.cc-hud .pg-hud-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.cc-hud .pg-hud-label {
	font-size: .56rem;
}

.cc-hud .pg-hud-value {
	font-size: .95rem;
}

.cc-lives {
	display: flex;
	gap: 4px;
}

.cc-life {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--pg-pink);
	opacity: .35;
}

.cc-life-on {
	background: var(--pg-pink);
	box-shadow: 0 0 8px var(--pg-pink-glow);
	opacity: 1;
}

/* The reels of both scenes: 28 % from the left, 18 % from the top */
.cc-board {
	position: absolute;
	left: 28.24%;
	top: 18.05%;
	width: 43.52%;
	height: 77.47%;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	background: #150d1a;
	transition: background-color .5s ease;
}

.cc-bonus .cc-board {
	background: #0c0c0c;
}

.cc-reel {
	position: relative;
	display: grid;
	grid-template-rows: repeat(5, minmax(0, 1fr));
}

.cc-cell {
	position: relative;
}

.cc-symbol, .cc-tape {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 100%;
	width: auto;
	aspect-ratio: 1;
	translate: -50% -50%;
	pointer-events: none;
}

.cc-symbol {
	z-index: 1;
	transition: opacity .2s ease, filter .2s ease;
}

/* a blank of the bonus: greyed, as on the original */
.cc-bcell:not(.cc-multi) .cc-symbol {
	height: 92%;
	opacity: .8;
}

/* Sticky: the original's yellow and black stripes behind the symbol */
.cc-stripes {
	position: absolute;
	inset: 4% 6%;
	z-index: 0;
	background: repeating-linear-gradient(-45deg, #c8f134 0 7px, #101010 7px 14px);
	box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
}

.cc-stripes[hidden], .cc-tape[hidden], .cc-badge[hidden] {
	display: none;
}

/* Epic: duct tape across */
.cc-tape {
	z-index: 2;
	height: 92%;
}

/* What a symbol shows: a skull's value in its mouth, a cat's multiplier on a banner */
.cc-badge {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 3;
	translate: -50% -50%;
	font-family: var(--font-display);
	font-weight: 900;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	font-variant-numeric: tabular-nums;
}

.cc-badge-skull {
	top: 46%;
	color: var(--cc-cyan);
	font-size: 2.7cqw;
	-webkit-text-stroke: .07em #051018;
	paint-order: stroke fill;
}

.cc-badge-cat {
	top: 80%;
	padding: .1em .4em;
	border-radius: 6px;
	background: #ff2e9a;
	color: #fff;
	font-size: 1.6cqw;
	box-shadow: 0 2px 0 #7a0c46;
}

@keyframes cc-roll {
	from { transform: translateY(-24%); }
	to { transform: translateY(24%); }
}

@keyframes cc-land {
	0% { transform: translateY(-10px); }
	60% { transform: translateY(3px); }
	100% { transform: none; }
}

@keyframes cc-drop {
	0% { transform: translateY(-60%); opacity: 0; }
	100% { transform: none; opacity: 1; }
}

@keyframes cc-pulse {
	50% { transform: scale(1.16); }
}

.cc-rolling .cc-cell {
	overflow: hidden;
}

.cc-rolling .cc-symbol {
	filter: blur(2px);
	animation: cc-roll .12s linear infinite;
}

.cc-rolling.sus-now .cc-symbol {
	filter: blur(.5px);
	animation-duration: .6s;
}

.cc-landed {
	animation: cc-land calc(.2s * var(--cc-speed, 1)) ease-out;
}

.cc-drop .cc-cell:not(.cc-held) {
	animation: cc-drop calc(.25s * var(--cc-speed, 1)) ease-out;
}

.cc-win {
	z-index: 2;
}

.cc-win .cc-symbol {
	filter: drop-shadow(0 0 6px rgba(255, 63, 180, .95));
	animation: win-hit calc(.5s * var(--cc-speed, 1)) cubic-bezier(.3, 1.3, .5, 1) both, win-breathe calc(1.1s * var(--cc-speed, 1)) ease-in-out calc(.5s * var(--cc-speed, 1)) infinite;
}

.cc-dim .cc-symbol {
	opacity: .35;
}

/* A bonus symbol, a cat or a multiplier that has just landed or just acted */
.cc-call, .cc-hit {
	z-index: 2;
}

.cc-call .cc-symbol {
	filter: drop-shadow(0 0 8px var(--pg-pink));
	animation: cc-pulse calc(.5s * var(--cc-speed, 1)) ease-in-out 2;
}

.cc-hit .cc-symbol, .cc-hit .cc-badge {
	animation: win-hit calc(.45s * var(--cc-speed, 1)) cubic-bezier(.3, 1.3, .5, 1) both;
}

.cc-lines {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.cc-lines polyline {
	fill: none;
	stroke: var(--cc-line);
	stroke-width: 3;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	opacity: .9;
	filter: drop-shadow(0 0 3px rgba(255, 63, 180, .9));
}

/* The reel multipliers, above the reels, where the original writes its own
   (the scene keeps the original's + between them) */
.cc-labels {
	position: absolute;
	left: 28.24%;
	top: 10.4%;
	width: 43.52%;
	height: 6.4%;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: center;
	pointer-events: none;
}

.cc-labels[hidden] {
	display: none;
}

.cc-label {
	position: relative;
	justify-self: center;
	font-family: var(--font-display);
	font-size: 2.2cqw;
	font-weight: 900;
	font-style: italic;
	line-height: 1;
	color: var(--cc-yellow);
	-webkit-text-stroke: .08em #120d00;
	paint-order: stroke fill;
	text-shadow: 0 .06em 0 #120d00;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@keyframes cc-bump {
	0% { transform: scale(1); }
	45% { transform: scale(1.4); filter: brightness(1.6); }
	100% { transform: scale(1); }
}

.cc-bump {
	animation: cc-bump calc(.4s * var(--cc-speed, 1)) ease-out;
}

@keyframes cc-sweep {
	50% { filter: brightness(1.8) drop-shadow(0 0 10px rgba(246, 240, 58, .9)); }
}

.cc-sweep {
	animation: cc-sweep calc(.6s * var(--cc-speed, 1)) ease-in-out;
}

/* The Best of: the three rounds, the best one lit */
.cc-best {
	position: absolute;
	left: 1.5%;
	top: 34%;
	z-index: 3;
	width: 22%;
	padding: 8px 10px;
	border: 2px solid #b13cff;
	border-radius: 10px;
	background: rgba(30, 6, 44, .9);
	box-shadow: 0 0 18px rgba(177, 60, 255, .5);
}

.cc-best[hidden] {
	display: none;
}

.cc-best-title {
	margin-bottom: 6px;
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--cc-yellow);
	text-align: center;
}

.cc-best-slot {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 3px 6px;
	border-radius: 6px;
	font-variant-numeric: tabular-nums;
}

.cc-best-name {
	font-size: .75rem;
	color: var(--cg-text-muted);
}

.cc-best-value {
	font-family: var(--font-display);
	font-weight: 900;
	color: #fff;
}

.cc-best-top {
	background: var(--pg-pink);
}

.cc-best-top .cc-best-name, .cc-best-top .cc-best-value {
	color: var(--cg-ink);
}

.cc-overlay {
	z-index: 5;
	border-radius: 0;
}

.cc-art {
	height: clamp(80px, 16cqw, 170px);
	width: auto;
}

@media (max-width: 700px) {
	.cc-stage {
		aspect-ratio: auto;
		max-width: none;
		padding: 74px 6px 6px;
	}

	.cc-stage::before {
		background-size: cover;
		background-position: center top;
		opacity: .5;
	}

	.cc-board {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 547.5 / 486.5;
		overflow: hidden;
		overflow: clip;
	}

	.cc-labels {
		left: 6px;
		right: 6px;
		top: 46px;
		width: auto;
		height: 24px;
	}

	.cc-label { font-size: 5cqw; }
	.cc-badge-skull { font-size: 6cqw; }
	.cc-badge-cat { font-size: 3.6cqw; }

	.cc-hud {
		top: 4px;
		left: 6px;
		right: 6px;
		display: flex;
		justify-content: space-between;
		padding: 4px 10px;
	}

	.cc-best {
		top: auto;
		bottom: 8px;
		left: 50%;
		width: 70%;
		translate: -50% 0;
	}

	.cc-stage .pg-flag {
		top: 8px;
	}

	.cc-overlay {
		gap: 5px;
		padding: 8px;
	}

	.cc-overlay .pg-overlay-title {
		font-size: 1.5rem;
	}

	.cc-overlay .pg-overlay-text {
		font-size: .8rem;
		line-height: 1.3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-rolling .cc-symbol, .cc-landed, .cc-drop .cc-cell, .cc-win .cc-symbol, .cc-call .cc-symbol, .cc-hit .cc-symbol, .cc-hit .cc-badge, .cc-bump, .cc-sweep, .cc-flash {
		animation: none;
		filter: none;
	}
}

/* ==========================================================================
   Suspense: reels held back while bonus symbols are showing
   When one more bonus symbol would open a bonus, or a better one, the reels
   still turning glow, the one about to stop turns in slow motion, and the
   symbols already down pulse. The classes are put on by common.js.
   ========================================================================== */

.sus-reel {
	position: relative;
}

.sus-reel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: 8px;
	box-shadow: inset 0 0 0 2px rgba(246, 221, 140, .6), inset 0 0 20px rgba(212, 175, 55, .4);
	pointer-events: none;
	animation: sus-glow .7s ease-in-out infinite alternate;
}

/* the reel about to stop */
.sus-now::after {
	box-shadow: inset 0 0 0 3px var(--cg-gold-bright), inset 0 0 30px rgba(246, 221, 140, .65);
	animation-duration: .32s;
}

@keyframes sus-glow {
	from { opacity: .3; }
	to { opacity: 1; }
}

/* slow motion: the symbols pass slowly enough to be read */
.pg-rolling.sus-now .pg-cell:not(.pg-held) img,
.pr-rolling.sus-now .pr-cell img,
.ww-rolling.sus-now .ww-cell img,
.oh-rolling.sus-now .oh-cell img,
.hf-rolling.sus-now .hf-symbol,
.fp-rolling.sus-now .fp-cell img,
.lb-rolling.sus-now .lb-symbol {
	filter: blur(.5px);
	animation-duration: .6s;
}

/* the bonus symbols already down, while the others are awaited */
.sus-call {
	z-index: 2;
}

.sus-call img {
	filter: drop-shadow(0 0 6px var(--cg-gold-bright)) brightness(1.15);
	animation: sus-pulse .42s ease-in-out infinite alternate;
}

@keyframes sus-pulse {
	from { transform: scale(1); }
	to { transform: scale(1.12); }
}

/* a bonus symbol that has just landed */
.sus-land img {
	animation: sus-pop .5s ease-out;
}

@keyframes sus-pop {
	from { transform: scale(1.4); filter: brightness(1.7); }
	to { transform: scale(1); }
}

/* Viking's Fortune, where the symbols fall one by one: the frame glows while they fall slowly */
.sus-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	box-shadow: inset 0 0 0 3px var(--cg-gold-bright), inset 0 0 34px rgba(246, 221, 140, .55);
	pointer-events: none;
	animation: sus-glow .45s ease-in-out infinite alternate;
}

/* ==========================================================================
   Win lights: what moves when money is won, the same everywhere
   ========================================================================== */

/* A winning symbol jumps out with a flash, then breathes for as long as the win shows */
@keyframes win-hit {
	0% { transform: scale(1); filter: brightness(1); }
	30% { transform: scale(1.22); filter: brightness(1.7); }
	60% { transform: scale(.96); filter: brightness(1.15); }
	100% { transform: scale(1.03); filter: brightness(1.1); }
}

@keyframes win-jump {
	0% { transform: scale(1); }
	30% { transform: scale(1.22); }
	60% { transform: scale(.96); }
	100% { transform: scale(1.03); }
}

@keyframes win-breathe {
	0%, 100% { transform: scale(1.03); }
	50% { transform: scale(1.1); }
}

/* The strip of a machine: it lights up and a gleam crosses it, stronger as the win is bigger */
@keyframes cab-win-glow {
	0% { background-color: rgba(246, 221, 140, calc(.1 + .035 * var(--win-level, 1))); box-shadow: inset 0 0 calc(10px + 5px * var(--win-level, 1)) rgba(246, 221, 140, .5); }
	100% { background-color: #070707; box-shadow: inset 0 0 0 rgba(246, 221, 140, 0); }
}

@keyframes cab-win-sweep {
	from { transform: translateX(-110%) skewX(-18deg); }
	to { transform: translateX(110%) skewX(-18deg); }
}

.cab-win[data-level="2"] { --win-level: 2; }
.cab-win[data-level="3"] { --win-level: 3; }
.cab-win[data-level="4"] { --win-level: 4; }
.cab-win[data-level="5"] { --win-level: 5; }
.cab-win[data-level="6"] { --win-level: 6; }
.cab-win[data-level="7"] { --win-level: 7; }

.cab-win-flash {
	animation: cab-win-glow calc(.7s + .12s * var(--win-level, 1)) ease-out;
}

.cab-win-flash::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 20%, rgba(255, 244, 200, calc(.25 + .07 * var(--win-level, 1))) 50%, transparent 80%);
	pointer-events: none;
	animation: cab-win-sweep .75s ease-out both;
}

/* from five stakes up the amount itself turns to gold for a moment */
@keyframes cab-win-gold {
	0%, 60% { color: var(--cg-gold-bright); text-shadow: 0 0 14px rgba(246, 221, 140, .8); }
	100% { color: var(--cg-win); text-shadow: none; }
}

.cab-win-flash:is([data-level="4"], [data-level="5"], [data-level="6"], [data-level="7"]) .cab-win-amount {
	animation: cab-win-pop .42s ease-out, cab-win-gold 1.6s ease-out;
}

/* The coins of a win - the theme's own - in a layer over the cabinet, or over the page at a table */
.fx-layer {
	position: absolute;
	inset: 0;
	z-index: 70;
	overflow: hidden;
	pointer-events: none;
}

body > .fx-layer {
	position: fixed;
}

.fx-coin {
	position: absolute;
	display: block;
	will-change: transform;
}

.fx-coin i {
	display: block;
	width: 100%;
	height: 100%;
	background: url("../assets/theme/icon-chip.png") center / contain no-repeat;
	filter: brightness(1.35) saturate(1.25) drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
	will-change: transform, opacity;
}

/* A win announced over the reels: the amount lands with a bounce, larger, and glows */
@keyframes fx-title-in {
	0% { transform: scale(.4); opacity: 0; }
	55% { transform: scale(1.18); opacity: 1; }
	100% { transform: none; }
}

@keyframes fx-title-glow {
	from { text-shadow: 0 0 14px rgba(123, 216, 163, .35), 0 2px 0 rgba(0, 0, 0, .5); }
	to { text-shadow: 0 0 34px rgba(123, 216, 163, .85), 0 2px 0 rgba(0, 0, 0, .5); }
}

.pg-overlay-title.is-win, .pr-overlay-title.is-win {
	font-size: clamp(2.1rem, 8vw, 3.7rem);
	animation: fx-title-in .5s ease-out both, fx-title-glow .8s ease-in-out .5s infinite alternate;
}

/* The balance, when money comes in */
@keyframes wallet-up {
	0% { transform: none; }
	35% { transform: scale(1.22); color: var(--cg-win); text-shadow: 0 0 12px rgba(123, 216, 163, .7); }
	100% { transform: none; }
}

.cab-balance {
	display: inline-block; /* it jumps when money comes in */
}

.wallet-up {
	animation: wallet-up .55s ease-out;
}

/* The tables: the result lands with a bounce when it is a win, the winning spots flash, a paid chip pops */
@keyframes fx-result-in {
	0% { transform: scale(.5); opacity: 0; }
	55% { transform: scale(1.15); opacity: 1; }
	100% { transform: none; }
}

.result-amount.is-win {
	text-shadow: 0 0 22px rgba(123, 216, 163, .45);
	animation: fx-result-in .5s ease-out both;
}

@keyframes fx-spot-hit {
	50% { box-shadow: inset 0 0 0 3px #fff, 0 0 28px 4px rgba(246, 221, 140, .85); filter: brightness(1.35); }
}

.spot-hit {
	animation: fx-spot-hit .7s ease-in-out 3;
}

/* `scale`, not `transform`: the chips are already placed with one */
@keyframes fx-chip-pop {
	0% { scale: .3; }
	60% { scale: 1.45; }
	100% { scale: 1; }
}

.spot-won .spot-chip {
	box-shadow: 0 0 10px rgba(123, 216, 163, .8), 0 1px 4px var(--cg-shadow);
	animation: fx-chip-pop .5s ease-out both;
}

.hand-outcome.is-win, .hd-chips.is-win {
	animation: fx-chip-pop .5s ease-out both;
}

@keyframes fx-seat-win {
	50% { box-shadow: 0 0 30px 4px rgba(123, 216, 163, .6); }
}

.hd-seat.hd-winner {
	animation: fx-seat-win .8s ease-in-out 3;
}

@media (prefers-reduced-motion: reduce) {
	.cab-win-flash, .cab-win-flash::after, .cab-win-flash .cab-win-amount, .cab-win-pop, .wallet-up, .paytable-won th, .paytable-won td, .slot-reel-win,
	.pg-overlay-title.is-win, .pr-overlay-title.is-win, .result-amount.is-win, .spot-hit, .spot-won .spot-chip,
	.hand-outcome.is-win, .hd-chips.is-win, .hd-seat.hd-winner {
		animation: none;
	}

	.cab-win-flash::after, .fx-layer {
		display: none;
	}
}

/* ==========================================================================
   Chat: one room for everyone, opened from the top bar
   ========================================================================== */

/* The theme has no sign for a chat: a speech bubble drawn in its gold, as the full-screen corners are */
.chat-icon {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: var(--cg-gold);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .15s ease;
}

.icon-button:hover .chat-icon, #chat-button[aria-expanded="true"] .chat-icon {
	stroke: var(--cg-gold-bright);
}

/* How many messages wait to be read */
.chat-badge {
	position: absolute;
	top: 0;
	right: -2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--cg-gold);
	color: var(--cg-ink);
	font-size: .64rem;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

/* a big win among them */
@keyframes chat-badge-win {
	50% { transform: scale(1.25); box-shadow: 0 0 10px rgba(123, 216, 163, .9); }
}

.chat-badge-win {
	background: var(--cg-win);
	animation: chat-badge-win .9s ease-in-out infinite;
}

/* The panel: the theme's information panel, large; it floats over the page's corner */
.chat {
	position: fixed;
	right: 14px;
	bottom: calc(14px + var(--chat-lift, 0px));
	z-index: 40;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto auto;
	width: min(350px, calc(100vw - 28px));
	height: min(520px, calc(100vh - 96px));
	height: min(520px, calc(100dvh - 96px - var(--chat-lift, 0px)));
	border: 1px solid transparent;
	border-image: url("../assets/theme/plate-panel.png") 10 12 fill / 10px 12px;
	border-radius: 9px;
	background: var(--under-panel);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .8);
}

.chat[hidden] {
	display: none;
}

.chat-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px 6px 14px;
	border-bottom: 1px solid var(--cg-line);
}

.chat-title {
	font-family: var(--font-display);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cg-gold-bright);
}

.chat-online {
	margin-right: auto;
	font-size: .72rem;
	color: var(--cg-text-muted);
	font-variant-numeric: tabular-nums;
}

.chat-lines {
	grid-row: 2;
	grid-column: 1;
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
	padding: 10px 12px;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.chat-empty {
	grid-row: 2;
	grid-column: 1;
	align-self: center;
	padding: 0 24px;
	color: var(--cg-text-muted);
	font-size: .9rem;
	text-align: center;
	text-wrap: balance;
	pointer-events: none;
}

.chat-line {
	position: relative;
	font-size: .9rem;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.chat-name {
	margin-right: 4px;
	font-weight: 700;
	color: var(--cg-gold);
}

.chat-line .rank-badge-s {
	width: 18px;
	height: 18px;
	vertical-align: -4px;
}

.chat-rank {
	margin: 0 6px 0 3px;
	font-size: .76rem;
}

.chat-rank.rank-unranked {
	color: var(--cg-text-muted);
}

.chat-mine .chat-name {
	color: var(--cg-gold-bright);
}

.chat-text {
	color: var(--cg-text);
}

.chat-time {
	margin-left: 8px;
	font-size: .68rem;
	color: var(--cg-text-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* A win of 500 times the stake or more, told by the casino */
.chat-win {
	padding: 7px 10px;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 8px;
	background: var(--cg-gold-wash);
}

.chat-win .chat-text {
	font-weight: 700;
	color: var(--cg-gold-bright);
	font-variant-numeric: tabular-nums;
}

/* For administrators: takes the message out for everyone */
.chat-remove {
	margin-left: 6px;
	padding: 0 5px;
	background: none;
	border: 0;
	color: var(--cg-text-muted);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.chat-remove:hover {
	color: var(--cg-loss);
}

.chat-error {
	padding: 0 12px 6px;
	font-size: .8rem;
}

.chat-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	padding: 10px;
	border-top: 1px solid var(--cg-line);
}

.chat-form input {
	min-width: 0;
	padding: 8px 12px;
	background: var(--cg-black);
	border: 1px solid var(--cg-line);
	border-radius: 8px;
	color: var(--cg-text);
	font: inherit;
	/* under 16px an iPhone zooms the page in when the field takes the focus */
	font-size: 1rem;
}

.chat-form input:focus-visible {
	outline: none;
	border-color: var(--cg-gold);
	box-shadow: 0 0 0 3px var(--cg-gold-glow);
}

.chat-form input:disabled {
	opacity: .6;
}

@media (max-width: 700px) {
	/* one more button in the bar: everything in it draws closer */
	.topbar {
		gap: 8px 10px;
	}

	.account {
		gap: 2px;
	}

	.wallet {
		padding-inline: 12px;
	}

	/* The panel rises from the bottom, as wide as the phone; a keyboard lifts it (--chat-lift, set by chat.js) */
	.chat {
		left: 0;
		right: 0;
		bottom: var(--chat-lift, 0px);
		width: auto;
		height: min(560px, calc(72vh - var(--chat-lift, 0px)));
		height: min(560px, calc(100dvh - 120px - var(--chat-lift, 0px)), max(260px, calc(72dvh - var(--chat-lift, 0px))));
		border-radius: 14px 14px 0 0;
	}

	.chat-form {
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.chat-badge-win {
		animation: none;
	}
}

/* ==========================================================================
   Ranks: the badges, the leaderboard page, the players' pages
   The badges are cut from the rank sheets (public/assets/rank/). What the
   theme has no model for - the bar that shows how far along a rank a player
   is, the tiles of figures, the curve of the elo - is drawn in its gold on
   its panels.
   ========================================================================== */

.rank-badge {
	display: inline-block;
	flex: none;
	width: 40px;
	height: 40px;
	object-fit: contain;
	vertical-align: middle;
}

.rank-badge-s {
	width: 28px;
	height: 28px;
}

.rank-badge-l {
	width: 68px;
	height: 68px;
}

.rank-badge-xl {
	width: 132px;
	height: 132px;
}

/* A player still being placed: the lowest badge, greyed, under a question mark */
.rank-badge-unranked {
	position: relative;
	isolation: isolate;
	display: inline-grid;
	place-items: center;
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 900;
	line-height: 1;
	color: var(--cg-gold-bright);
	text-shadow: 0 1px 3px var(--cg-black);
}

.rank-badge-unranked::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../assets/rank/plastique.webp") center / contain no-repeat;
	filter: grayscale(1) brightness(.42);
}

.rank-badge-s.rank-badge-unranked {
	font-size: .85rem;
}

.rank-badge-l.rank-badge-unranked {
	font-size: 1.9rem;
}

.rank-badge-xl.rank-badge-unranked {
	font-size: 3.6rem;
}

/* A rank's name wears its badge's colour */
.rank-name {
	font-weight: 700;
	white-space: nowrap;
}

.rank-plastique { color: #b9bcc2; }
.rank-bronze { color: #dd9a68; }
.rank-silver { color: #cdd6e0; }
.rank-gold { color: #f2c94c; }
.rank-platine { color: #74d9ea; }
.rank-diamant { color: #62adff; }
.rank-gambler { color: #bd93ff; }
.rank-grand-gambler { color: #ffb24d; }

.rank-gsl {
	color: var(--cg-gold-bright);
	text-shadow: 0 0 10px rgba(168, 85, 247, .8);
}

/* A player's name, wherever it is shown, leads to their page */
.player-link {
	color: inherit;
	text-decoration: none;
}

.player-link:hover {
	color: var(--cg-gold-bright);
	text-decoration: underline;
}

/* The top bar: the player's badge and name, leading to their own page */
.account-link {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	text-decoration: none;
}

.account-rank {
	display: flex;
}

.account-link:hover .account-name {
	color: var(--cg-text);
}

.page-head-sub {
	font-size: .6em;
	font-weight: 500;
	letter-spacing: .1em;
	white-space: nowrap;
	color: var(--cg-text-muted);
}

/* The day before the season: what is about to happen */
.season-banner {
	margin-bottom: 20px;
	padding: 14px 18px;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 12px;
	background: var(--cg-gold-wash);
	color: var(--cg-gold-bright);
}

/* --- A player's rank, large: on the leaderboard (their own) and at the top of a profile --- */

.rank-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 28px;
	margin-bottom: 26px;
}

.rank-card-badge {
	display: grid;
	flex: none;
	place-items: center;
}

.rank-card-main {
	display: grid;
	flex: 1 1 280px;
	gap: 6px;
	min-width: 0;
}

.rank-card-label {
	font-size: .65rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cg-text-muted);
}

.rank-card h2, .profile-name {
	font-size: clamp(1.4rem, 3.4vw, 2rem);
	letter-spacing: .03em;
	color: var(--cg-gold-bright);
}

.profile-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	overflow-wrap: anywhere;
}

.rank-card-rank {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 700;
}

.rank-card-note {
	font-size: .9rem;
	color: var(--cg-text-muted);
}

.rank-card-day {
	display: grid;
	flex: 0 1 310px;
	gap: 6px;
	justify-items: start;
	padding-left: 28px;
	border-left: 1px solid var(--cg-line);
}

.rank-card-figure {
	font-family: var(--font-display);
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.rank-card-day .btn {
	margin-top: 6px;
}

/* How far along the rank: a gold line filling a dark groove */
.rank-bar {
	--fill: 0%;
	max-width: 440px;
	height: 10px;
	overflow: hidden;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 999px;
	background: var(--cg-black);
}

.rank-bar span {
	display: block;
	width: var(--fill);
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--cg-gold-dim), var(--cg-gold) 60%, var(--cg-gold-bright));
	transition: width .5s ease;
}

/* --- The leaderboard page --- */

.board-switch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.board-switch .pick {
	min-width: 0;
	padding-inline: 14px;
	white-space: nowrap;
}

.board-search {
	display: flex;
	align-items: center;
	gap: 8px;
}

.board-search input {
	width: 190px;
	padding: 7px 12px;
	border: 1px solid var(--cg-line);
	border-radius: 8px;
	background: var(--cg-black);
	color: var(--cg-text);
	font: inherit;
	font-size: .9rem;
}

.board-search input:focus-visible {
	outline: none;
	border-color: var(--cg-gold);
	box-shadow: 0 0 0 3px var(--cg-gold-glow);
}

.board-day {
	margin: 4px 0 8px;
	font-size: .95rem;
	font-weight: 500;
	color: var(--cg-text-muted);
}

.board-day::first-letter {
	text-transform: uppercase;
}

/* a player in a table: badge, then name */
.board-player .rank-badge {
	margin-right: 10px;
}

.rank-after {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rank-after .you-tag {
	margin-left: 0;
}

/* the home page's short ranking: badge, name, elo */
.board-mini.rank-mini li {
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	padding: 6px 0;
}

/* Every rank and the elo it takes */
.rank-ladder {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rank-step {
	display: grid;
	gap: 2px;
	justify-items: center;
	padding: 12px 6px;
	border: 1px solid var(--cg-line);
	border-radius: 12px;
	background: var(--cg-panel);
	text-align: center;
}

.rank-step .rank-name {
	font-size: .88rem;
}

.rank-step-yours {
	border-color: var(--cg-gold);
	box-shadow: 0 0 14px var(--cg-gold-glow);
}

.rank-step-range {
	font-size: .74rem;
	font-variant-numeric: tabular-nums;
	color: var(--cg-text-muted);
}

.rank-rules {
	display: grid;
	gap: 6px;
	max-width: 85ch;
	margin: 16px 0 0;
	padding-left: 20px;
	font-size: .9rem;
	color: var(--cg-text-muted);
}

/* --- A player's page --- */

.profile-back {
	margin-bottom: 14px;
}

.stat-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
	gap: 12px;
	margin: 0;
}

.stat-tile {
	display: grid;
	align-content: start;
	gap: 2px;
	padding: 14px 16px;
	border: 1px solid var(--cg-line);
	border-radius: 12px;
	background: var(--cg-panel);
}

.stat-label {
	font-size: .62rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cg-text-muted);
}

.stat-value {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.stat-sub {
	margin: 0;
	font-size: .78rem;
	color: var(--cg-text-muted);
}

/* The curve of the season's elo. One line, in the theme's gold; the lines
   across it are the ranks. Drawn at the size it is shown (profile.js), so its
   lettering stays the size written here. */
.elo-chart {
	position: relative;
	margin: 0;
	border: 1px solid var(--cg-line);
	border-radius: 12px;
	background: var(--cg-panel);
}

.elo-chart svg {
	display: block;
	width: 100%;
	height: auto;
	touch-action: pan-y;
}

.elo-grid {
	stroke: rgba(245, 240, 230, .1);
	stroke-width: 1;
}

.elo-tick {
	fill: var(--cg-text-muted);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

/* a rank's name sits on its line, at the start of the curve; the panel's colour around the
   letters keeps the curve from running through them */
.elo-step {
	fill: var(--cg-text-muted);
	stroke: var(--cg-panel);
	stroke-width: 4px;
	paint-order: stroke;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.elo-line {
	fill: none;
	stroke: var(--cg-gold);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.elo-dot {
	fill: var(--cg-gold-bright);
	stroke: var(--cg-panel);
	stroke-width: 2;
}

.elo-now {
	fill: var(--cg-text);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.elo-cross {
	stroke: var(--cg-text-muted);
	stroke-width: 1;
	stroke-dasharray: 3 3;
}

.elo-hit {
	fill: transparent;
	cursor: crosshair;
}

.elo-tip {
	position: absolute;
	z-index: 1;
	display: grid;
	gap: 1px;
	padding: 8px 11px;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 8px;
	background: var(--cg-black);
	box-shadow: 0 6px 18px var(--cg-shadow);
	font-size: .78rem;
	white-space: nowrap;
	color: var(--cg-text-muted);
	pointer-events: none;
	transform: translate(14px, -50%);
}

.elo-tip-left {
	transform: translate(calc(-100% - 14px), -50%);
}

.elo-tip strong {
	font-size: .98rem;
	color: var(--cg-text);
}

.elo-tip span:first-child::first-letter {
	text-transform: uppercase;
}

/* --- What the last day did to the player's rank, told once --- */

.recap {
	width: min(430px, calc(100vw - 32px));
	padding: 26px 24px 22px;
	border: 1px solid var(--cg-gold-dim);
	border-radius: 16px;
	background: var(--cg-panel);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .7), 0 0 40px var(--cg-gold-glow);
	color: var(--cg-text);
	text-align: center;
}

.recap[open] {
	display: grid;
	gap: 8px;
	justify-items: center;
}

.recap::backdrop {
	background: rgba(0, 0, 0, .74);
}

.recap-day {
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cg-text-muted);
}

.recap h2 {
	font-size: 1.5rem;
	letter-spacing: .04em;
	color: var(--cg-gold-bright);
}

.recap-badge {
	margin: 6px 0 2px;
}

.recap-rank {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 700;
}

.recap-change {
	font-size: 1.02rem;
	font-weight: 700;
}

.recap-facts {
	margin-bottom: 10px;
	font-size: .88rem;
	color: var(--cg-text-muted);
}

@media (max-width: 700px) {
	.rank-badge-xl {
		width: 100px;
		height: 100px;
	}

	.rank-badge-xl.rank-badge-unranked {
		font-size: 2.7rem;
	}

	.rank-card {
		gap: 14px 18px;
	}

	/* the day goes under the rank */
	.rank-card-day {
		flex-basis: 100%;
		padding: 14px 0 0;
		border-top: 1px solid var(--cg-line);
		border-left: 0;
	}

	.board-switch .picks {
		width: 100%;
	}

	/* three names of unequal length: each takes the room it needs */
	.board-switch .pick {
		flex: 1 1 auto;
		padding-inline: 5px;
		font-size: .66rem;
		letter-spacing: 0;
	}

	.board-search {
		width: 100%;
	}

	.board-search input {
		flex: 1;
		width: auto;
		min-width: 0;
	}

	.rank-ladder {
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
		gap: 8px;
	}

	.rank-ladder .rank-badge-l {
		width: 54px;
		height: 54px;
	}

	.stat-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.stat-tile {
		padding: 12px;
	}

	.stat-value {
		font-size: 1.15rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rank-bar span {
		transition: none;
	}
}

/* A newer version of the casino is online: a band at the foot of the screen, over everything */
.update-banner {
	position: fixed;
	left: 50%;
	bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	translate: -50% 0;
	z-index: 80;
	display: flex;
	align-items: center;
	gap: 12px;
	width: max-content;
	max-width: calc(100vw - 32px);
	padding: 10px 12px 10px 16px;
	border: 1px solid var(--cg-gold);
	border-radius: 12px;
	background: var(--cg-panel);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .7), 0 0 18px var(--cg-gold-glow);
	color: var(--cg-text);
	font-size: .9rem;
}

.update-banner .btn {
	flex: none;
}