.fasl-game { max-width: 1060px; margin: 16px auto; padding: clamp(10px, 2.5vw, 24px); border-radius: 18px; background: #faf5ef; color: #321c29; font-family: inherit; }
.fasl-game *, .fasl-game *::before { box-sizing: border-box; }
.fasl-game .fasl-header { padding: 16px; text-align: center; border-radius: 12px; background: #70293b; color: #fff3d6; }
.fasl-header span { font-size: 12px; font-weight: 700; letter-spacing: .07em; }
.fasl-game .fasl-header h2 { margin: 5px 0; color: inherit; font-size: clamp(24px, 5vw, 40px); line-height: 1.2; }
.fasl-header p { margin: 0; font-size: 14px; }
.fasl-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 18px; margin-top: 16px; align-items: start; }
.fasl-board { position: relative; display: grid; grid-template: repeat(10, minmax(0, 1fr)) / repeat(10, minmax(0, 1fr)); aspect-ratio: 1; border: 4px solid #70293b; border-radius: 7px; overflow: hidden; background: #a57251; gap: 1px; }
.fasl-square { background: #fff3dd; padding: 2px; font-size: clamp(8px, 1.5vw, 13px); line-height: 1.15; font-weight: 700; }
.fasl-square:nth-child(even) { background: #f1ddc3; }
.fasl-square.fasl-finish { background: #f6ce70; }
.fasl-board svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fasl-token { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 3.6%; aspect-ratio: 1; border: 1px solid #fff; border-radius: 50%; color: #fff; font-size: clamp(6px, 1.15vw, 11px); font-weight: 800; line-height: 1; }
.fasl-token[hidden] { display: none; }
.fasl-panel { padding: 14px; border: 1px solid #e3c6ad; border-radius: 12px; background: #fff; }
.fasl-panel select, .fasl-panel button, .fasl-guide button { font: inherit; min-height: 44px; border: 1px solid #ad7886; border-radius: 8px; padding: 6px 12px; touch-action: manipulation; }
.fasl-panel button, .fasl-guide button { cursor: pointer; }
.fasl-panel .fasl-roll { display: block; width: 100%; background: #70293b; color: #fff; font-weight: 700; }
.fasl-roll:disabled { opacity: .6; cursor: default; }
.fasl-reset { background: #fff4e9; color: #70293b; }
.fasl-game .fasl-players { margin: 12px 0; padding: 0; list-style: none; }
.fasl-game .fasl-players li { padding: 4px 7px; margin: 3px 0; border-inline-start: 5px solid var(--fasl-player); }
.fasl-active { background: #fff0d8; font-weight: 700; }
.fasl-game .fasl-status { margin: 10px 0; min-height: 3em; font-size: 14px; }
.fasl-guide details { margin-top: 12px; font-size: 14px; }
@media (max-width: 680px) {
	.fasl-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.fasl-panel { padding: 10px; }
}

.fasl-game {
	background: radial-gradient(ellipse at 50% 0, #fff8e9, transparent 68%), #efdfcd;
	border: 1px solid #ddc3a6;
	box-shadow: 0 14px 30px #48242b24;
}
.fasl-game .fasl-header {
	position: relative;
	border: 1px solid #c68552;
	background: radial-gradient(ellipse at 50% 0, #9d4560, transparent 74%), linear-gradient(135deg, #321327, #621f39 56%, #351329);
	box-shadow: inset 0 0 0 4px #3c182a, inset 0 0 0 5px #bc8e54, 0 5px 10px #50223730;
	padding: 20px 16px;
}
.fasl-game .fasl-header h2 { color: #ffe4a0; text-shadow: 0 2px 0 #522137, 0 4px 8px #210e18; }
.fasl-header span { color: #ffdfa1; }
.fasl-board {
	border: clamp(5px, 1.1vw, 12px) solid #744021;
	border-top-color: #a36939;
	border-bottom-color: #482415;
	background: #976036;
	box-shadow: 0 5px 0 #472315, 0 10px 16px #49251842, 0 0 0 1px #d09551;
}
.fasl-square {
	background: linear-gradient(145deg, #fff7e3, #edd1a1);
	box-shadow: inset 0 1px 0 #fff8e2, inset -1px -1px 0 #96653654;
	color: #3f231c;
}
.fasl-square:nth-child(even) { background: linear-gradient(145deg, #f4dfbd, #d8aa76); }
.fasl-square.fasl-finish { background: linear-gradient(140deg, #fff0a9, #e3a137); }
.fasl-board svg { filter: drop-shadow(1px 2px 1px #39201766); }
.fasl-token {
	background-image: radial-gradient(circle at 31% 24%, #ffffff99, transparent 36%), linear-gradient(155deg, transparent 40%, #0009);
	box-shadow: 0 2px 0 #34171d, 0 3px 5px #382221a6;
	text-shadow: 0 1px 2px #000;
}
.fasl-panel {
	background: linear-gradient(#fffdf6, #fcf0df);
	box-shadow: 0 5px 0 #d7b38d, 0 8px 14px #532b2024, inset 0 1px 0 white;
}
.fasl-panel .fasl-roll {
	background: linear-gradient(#913e57, #631e37);
	box-shadow: inset 0 1px 0 #f7abc58c, 0 4px 0 #3c1726;
}
.fasl-panel .fasl-roll:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #3c1726; }
.fasl-die {
	--fasl-half-die: clamp(36px, 4.2vw, 54px);
	position: relative;
	width: calc(2 * var(--fasl-half-die));
	aspect-ratio: 1;
	margin: 26px auto 30px;
	perspective: 520px;
}
.fasl-die::before {
	content: "";
	position: absolute;
	inset: auto -12% -13% 0;
	height: 25%;
	border-radius: 50%;
	background: #35183b55;
	filter: blur(9px);
}
.fasl-cube {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}
.fasl-face {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template: repeat(3, 1fr) / repeat(3, 1fr);
	place-items: center;
	padding: 12%;
	border: 1px solid #c6a77c;
	border-radius: 14%;
	background: linear-gradient(150deg, #fffdf6, #eee0c4 72%, #d5b68b);
	box-shadow: inset 2px 3px 5px #fff, inset -3px -3px 6px #9a6b3b48;
	backface-visibility: hidden;
}
.fasl-face-1 { transform: translateZ(var(--fasl-half-die)); }
.fasl-face-2 { transform: rotateY(90deg) translateZ(var(--fasl-half-die)); }
.fasl-face-3 { transform: rotateX(90deg) translateZ(var(--fasl-half-die)); }
.fasl-face-4 { transform: rotateX(-90deg) translateZ(var(--fasl-half-die)); }
.fasl-face-5 { transform: rotateY(-90deg) translateZ(var(--fasl-half-die)); }
.fasl-face-6 { transform: rotateY(180deg) translateZ(var(--fasl-half-die)); }
.fasl-face-2, .fasl-face-5 { background: linear-gradient(145deg, #f4e6cb, #c8a77d); }
.fasl-face .fasl-pip {
	width: 49%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 65% 78%, #704557, #281722 78%);
	box-shadow: inset 0 2px 2px #170e18, 0 1px 0 #fff;
}
@media (max-width: 680px) {
	.fasl-layout { gap: 16px; }
}

/* FirstAudio purple and gold, with a raised game board. */
.fasl-game {
	background: radial-gradient(ellipse at 50% 0, #fff, transparent 70%), #f1e8fa;
	border-color: #d9c5eb;
	box-shadow: 0 14px 32px #411c6a26;
}
.fasl-game .fasl-header {
	background: radial-gradient(ellipse at 50% 0, #8554ba, transparent 75%), linear-gradient(135deg, #2c1747, #542b81 56%, #29153e);
	box-shadow: inset 0 0 0 4px #321951, inset 0 0 0 5px #cf9c59, 0 5px 12px #35165444;
}
.fasl-game .fasl-header h2 { text-shadow: 0 2px 0 #311754, 0 4px 8px #1d1031; }
.fasl-board {
	border-color: #543479;
	border-top-color: #9269be;
	border-bottom-color: #2e1847;
	background: #ad8ac1;
	box-shadow: 0 5px 0 #29153f, 0 10px 18px #30185052, 0 0 0 1px #cca069;
}
.fasl-square {
	background: linear-gradient(145deg, #fffaf0, #f5e8d4);
	box-shadow: inset 0 1px 0 #fff, inset -1px -1px 0 #80629445;
	color: #341c50;
}
.fasl-square:nth-child(even) { background: linear-gradient(145deg, #f2e5ff, #dec7f1); }
.fasl-board svg { filter: drop-shadow(1px 3px 2px #2d133c80); }
.fasl-panel {
	background: linear-gradient(#fff, #f8f1ff);
	border-color: #ddc8ee;
	box-shadow: 0 5px 0 #d7c0ea, 0 8px 14px #3b1c5326;
}
.fasl-panel .fasl-roll {
	background: linear-gradient(#8c53bf, #532783);
	box-shadow: inset 0 1px 0 #e3b7ff8c, 0 4px 0 #34194f;
}
.fasl-panel .fasl-roll:active:not(:disabled) { box-shadow: 0 2px 0 #34194f; }
.fasl-reset { background: #f8eeff; color: #542b81; }
.fasl-active { background: #f1e0ff; }
@media (prefers-reduced-motion: no-preference) {
	.fasl-won .fasl-finish { animation: fasl-win 1.15s ease-in-out 3 alternate; }
}
@keyframes fasl-win {
	from { box-shadow: inset 0 0 0 1px #f8d275; }
	to { box-shadow: inset 0 0 15px #fff8bb, 0 0 11px #e7a132; }
}

/* The board and the two control sections share one responsive layout. */
.fasl-game {
	max-width: 1300px;
	container-type: inline-size;
}
.fasl-layout {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "title" "board" "controls" "guide";
	gap: 16px;
	margin-top: 0;
}
.fasl-header { grid-area: title; }
.fasl-board { grid-area: board; }
.fasl-panel { grid-area: controls; }
.fasl-guide {
	grid-area: guide;
	min-width: 0;
	padding: clamp(12px, 1.5vw, 22px);
	border-radius: 12px;
	background: linear-gradient(150deg, #f6effd, #e8d9f6);
	color: #341c50;
}
.fasl-game .fasl-status { margin: 0 0 14px; min-height: 0; font-size: 16px; line-height: 1.7; }
.fasl-guide summary { font-weight: 700; cursor: pointer; }
.fasl-guide details p { margin: 8px 0 0; line-height: 1.85; }

@container (min-width: 860px) {
	.fasl-layout {
		grid-template-columns: minmax(0, 52fr) repeat(2, minmax(0, 23fr));
		grid-template-areas: "board title title" "board controls guide";
		grid-template-rows: auto 1fr;
	}
	.fasl-board { align-self: center; }
}

/* Widen only FirstAudio articles that contain this game. */
main.fa-single:has(.fasl-game) {
	width: min(calc(100% - 24px), 1300px);
	max-width: 1300px;
	margin-inline: auto;
	padding-block: 16px;
}
main.fa-single:has(.fasl-game) > article > :is(.fa-back, .fa-article-head, .fa-article-image) { display: none; }

.fasl-game [hidden] { display: none !important; }
.fasl-lobby { max-width: 680px; margin-inline: auto; }
.fasl-choices, .fasl-waiting { display: grid; gap: 12px; margin-top: 16px; }
.fasl-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fasl-lobby button {
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid #d6a768;
	border-radius: 12px;
	background: linear-gradient(#8552b1, #492467);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.fasl-waiting > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px;
	border: 1px solid #d6a768;
	border-radius: 14px;
	background: #fffaf1;
}
@media (max-width: 680px) {
	.fasl-game[data-online] .fasl-layout {
		grid-template-areas: "title" "board" "status" "controls" "exit" "rules";
	}
	.fasl-game[data-online] .fasl-guide { display: contents; }
	.fasl-game[data-online] .fasl-status {
		grid-area: status;
		margin: 0;
		padding: 10px 12px;
		border-radius: 10px;
		background: #f6effd;
	}
	.fasl-game[data-online] .fasl-reset { grid-area: exit; justify-self: start; }
	.fasl-game[data-online] .fasl-guide details { grid-area: rules; margin-top: 0; }
	.fasl-game[data-online] .fasl-roll { min-height: 52px; }
}
.fasl-guest {
	display: grid;
	gap: 12px;
	margin-top: 14px;
	padding: 14px;
	border-radius: 12px;
	background: #fffaf1;
}
.fasl-guest label { display: grid; gap: 6px; }
.fasl-guest input { min-height: 44px; min-width: 0; padding: 8px 10px; font: inherit; }

.fasl-invite { display: grid; justify-items: end; gap: 8px; margin-bottom: 12px; }
.fasl-invite button {
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid #c2965c;
	border-radius: 9px;
	background: #542b81;
	color: white;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.fasl-invite-options {
	display: flex;
	align-items: end;
	flex-wrap: wrap;
	gap: 8px;
	width: min(100%, 580px);
	padding: 12px;
	border: 1px solid #ddc8ee;
	border-radius: 12px;
	background: #fff;
}
.fasl-invite-options label { display: grid; flex: 1 1 210px; min-width: 0; }
.fasl-invite-url { min-width: 0; min-height: 44px; padding: 6px 8px; font: inherit; }
.fasl-invite-status { flex-basis: 100%; font-size: 14px; }
.fasl-invite-status:empty { display: none; }

.fasl-game .fasl-lobby-poster {
	display: block;
	width: min(100%, 220px);
	height: auto;
	margin: 14px auto;
	border-radius: 12px;
}
.fasl-game .fasl-share-poster {
	width: 64px;
	height: 64px;
	border-radius: 8px;
}