/* Ludo Team Game 3D - all rules are scoped under .ltg-root */
.ltg-root {
	container-type: inline-size;
	box-sizing: border-box;
	max-width: 1000px;
	margin: 1em auto;
	padding: 12px;
	background: radial-gradient(120% 100% at 20% 0%, #2d3157 0%, #161830 55%, #0d0e1c 100%);
	border-radius: 20px;
	color: #eef1f8;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Bengali", "Hind Siliguri", sans-serif;
	font-size: 16px;
	line-height: 1.35;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.ltg-root *, .ltg-root *::before, .ltg-root *::after { box-sizing: border-box; }
.ltg-root input[type="text"] { -webkit-user-select: text; user-select: text; }

/* ---------- buttons ---------- */
.ltg-root .ltg-btn {
	appearance: none;
	min-height: 44px;
	padding: 10px 16px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(180deg, #4b5278, #353b5c);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
	transition: transform .1s ease, opacity .15s ease, filter .15s ease;
}
.ltg-root .ltg-btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.ltg-root .ltg-btn:active:not(:disabled) { transform: translateY(1px); }
.ltg-root .ltg-btn:disabled { opacity: .45; cursor: not-allowed; }
.ltg-root .ltg-primary { background: linear-gradient(180deg, #43b86a, #25873f); }
.ltg-root .ltg-ghost { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.ltg-root .ltg-mini { min-height: 38px; padding: 6px 12px; font-size: .88em; border-radius: 10px; white-space: nowrap; }

/* ---------- setup screen ---------- */
.ltg-root .ltg-setup {
	max-width: 580px;
	margin: 0 auto;
	padding: 20px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 18px;
	backdrop-filter: blur(6px);
}
.ltg-root .ltg-title { margin: 0; font-size: 1.9em; line-height: 1.2; text-align: center; color: #ffd54f; text-shadow: 0 2px 12px rgba(255, 193, 7, .35); }
.ltg-root .ltg-sub { margin: 4px 0 14px; text-align: center; color: #9aa3c7; }
.ltg-root .ltg-label { margin: 12px 0 6px; font-weight: 700; color: #cfd6f3; }
.ltg-root .ltg-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.ltg-root .ltg-chip { flex: 1 1 200px; cursor: pointer; position: relative; }
.ltg-root .ltg-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ltg-root .ltg-chip span {
	display: block;
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .07);
	text-align: center;
	font-weight: 600;
	border: 2px solid transparent;
}
.ltg-root .ltg-chip input:checked + span { background: rgba(67, 184, 106, .18); border-color: #43b86a; color: #b9f6ca; }
.ltg-root .ltg-chip input:focus-visible + span { outline: 3px solid #90caf9; }
.ltg-root .ltg-hint { margin: 8px 0 0; font-size: .9em; color: #9aa3c7; }
.ltg-root .ltg-setup[data-mode="solo"] .ltg-hint,
.ltg-root .ltg-setup[data-mode="solo"] .ltg-tag { display: none; }
.ltg-root .ltg-prow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ltg-root .ltg-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3), inset 0 3px 4px rgba(255, 255, 255, .45); }
.ltg-root .ltg-prow .ltg-dot { width: 24px; height: 24px; }
.ltg-root .ltg-name, .ltg-root .ltg-type {
	min-width: 0;
	height: 44px;
	padding: 0 10px;
	border: 2px solid rgba(255, 255, 255, .15);
	border-radius: 10px;
	background: rgba(0, 0, 0, .3);
	color: #fff;
	font: inherit;
	font-size: 16px;
}
.ltg-root .ltg-type option { color: #111; }
.ltg-root .ltg-name { flex: 1 1 auto; }
.ltg-root .ltg-type { flex: none; }
.ltg-root .ltg-tag { flex: none; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .78em; font-weight: 700; color: #cfd6f3; white-space: nowrap; }
.ltg-root .ltg-start { width: 100%; margin-top: 12px; font-size: 1.1em; }

/* ---------- game layout ---------- */
.ltg-root .ltg-game { display: block; }
.ltg-root .ltg-main { min-width: 0; }
.ltg-root .ltg-turnbar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	padding: 8px 10px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .1);
}
.ltg-root .ltg-turnbar .ltg-dot { width: 24px; height: 24px; }
.ltg-root .ltg-tbtext { flex: 1 1 auto; min-width: 0; }
.ltg-root .ltg-turntext { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltg-root .ltg-msg { min-height: 1.3em; font-size: .82em; color: #aeb7dc; }

/* ---------- 3D stage ---------- */
.ltg-root .ltg-stagewrap { position: relative; }
.ltg-root .ltg-stage {
	--u: 22px; --tilt: 50deg; --sc: .9;
	position: relative;
	width: 100%;
	height: 480px;
	perspective: calc(var(--u) * var(--pf, 70));
	perspective-origin: 50% 50%;
	overflow: hidden;
	border-radius: 16px;
	background: radial-gradient(110% 80% at 50% 25%, #2b2f55 0%, #15172c 65%, #0a0b16 100%);
	touch-action: manipulation;
}
.ltg-root .ltg-world {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--u) * 17);
	height: calc(var(--u) * 22.7);
	margin-left: calc(var(--u) * -8.5);
	margin-top: calc(var(--u) * -11.35);
	transform-style: preserve-3d;
	transform: rotateX(var(--tilt)) scale(var(--sc));
	transition: transform .7s cubic-bezier(.3, .7, .2, 1);
}
.ltg-root .ltg-init .ltg-world, .ltg-root .ltg-init .ltg-token3d { transition: none; }
.ltg-root .ltg-table {
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	transform-style: preserve-3d;
	border-radius: calc(var(--u) * .9);
	background:
		radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, .09), transparent 60%),
		repeating-linear-gradient(45deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 5px),
		radial-gradient(ellipse at 50% 40%, #1d7350 0%, #135238 62%, #0a3524 100%);
	box-shadow:
		inset 0 0 0 calc(var(--u) * .26) #4a2f1c,
		inset 0 0 0 calc(var(--u) * .34) #8a6335,
		inset 0 0 calc(var(--u) * 2.4) rgba(0, 0, 0, .65),
		0 calc(var(--u) * .5) calc(var(--u) * 1.6) rgba(0, 0, 0, .7);
}
.ltg-root .ltg-slabshadow {
	position: absolute; left: 0; top: 0;
	border-radius: calc(var(--u) * .9);
	background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.ltg-root .ltg-box, .ltg-root .ltg-grid { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.ltg-root .ltg-face { position: absolute; left: 0; top: 0; }
.ltg-root .ltg-top.ltg-slabtop {
	border-radius: calc(var(--u) * .25);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 40%),
		repeating-linear-gradient(92deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 7px),
		linear-gradient(160deg, #7a5036, #5b3a29 55%, #3f2618);
	box-shadow: inset 0 0 0 calc(var(--u) * .05) #d9b25f, inset 0 0 0 calc(var(--u) * .11) rgba(0, 0, 0, .35);
}

/* flat play surface (cells, stars) */
.ltg-root .ltg-floor {
	position: absolute; left: 0; top: 0;
	border-radius: calc(var(--u) * .12);
	background: radial-gradient(circle at 35% 25%, #fffaf0, #f1e6cf 70%, #e3d3b2);
	box-shadow: 0 0 0 calc(var(--u) * .05) #c8a45a;
}
.ltg-root .ltg-cell { position: absolute; }
.ltg-root .ltg-track {
	background: linear-gradient(145deg, #ffffff, #f0e7d3 70%, #e2d5b8);
	box-shadow: inset 0 0 0 calc(var(--u) * .035) rgba(110, 80, 40, .55), inset 0 calc(var(--u) * .06) calc(var(--u) * .08) rgba(255, 255, 255, .9);
}
.ltg-root .ltg-hc { box-shadow: inset 0 0 0 calc(var(--u) * .035) rgba(0, 0, 0, .35), inset 0 calc(var(--u) * .06) calc(var(--u) * .08) rgba(255, 255, 255, .45); }
.ltg-root .ltg-star {
	position: absolute;
	display: flex; align-items: center; justify-content: center;
	font-size: calc(var(--u) * .8); line-height: 1;
	color: #c9a227; text-shadow: 0 calc(var(--u) * .03) 0 rgba(255, 255, 255, .8), 0 calc(var(--u) * -.02) 0 rgba(120, 80, 0, .4);
}

/* yards */
.ltg-root .ltg-top { border-radius: calc(var(--u) * .18); box-shadow: inset 0 0 0 calc(var(--u) * .06) rgba(0, 0, 0, .25), inset 0 calc(var(--u) * .08) calc(var(--u) * .12) rgba(255, 255, 255, .4); }
.ltg-root .ltg-yactive { box-shadow: inset 0 0 0 calc(var(--u) * .1) #fff, inset 0 0 calc(var(--u) * .8) rgba(255, 255, 255, .75); animation: ltg-yglow 1s ease-in-out infinite alternate; }
.ltg-root .ltg-well {
	position: absolute;
	border-radius: calc(var(--u) * .6);
	background: radial-gradient(circle at 40% 30%, #fffdf6, #efe4cb);
	box-shadow: inset 0 calc(var(--u) * .1) calc(var(--u) * .25) rgba(0, 0, 0, .35), 0 calc(var(--u) * .03) 0 rgba(255, 255, 255, .5);
}
.ltg-root .ltg-slot {
	position: absolute;
	border: calc(var(--u) * .07) solid;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, rgba(0, 0, 0, .05), rgba(0, 0, 0, .28));
	box-shadow: inset 0 calc(var(--u) * .08) calc(var(--u) * .14) rgba(0, 0, 0, .45);
}
.ltg-root .ltg-yname, .ltg-root .ltg-yteam {
	position: absolute; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	pointer-events: none; padding: 0 calc(var(--u) * .2);
}
.ltg-root .ltg-yname { font-size: calc(var(--u) * .46); font-weight: 800; line-height: 1.1; text-shadow: 0 calc(var(--u) * .03) calc(var(--u) * .05) rgba(0, 0, 0, .35); }
.ltg-root .ltg-yteam { font-size: calc(var(--u) * .28); line-height: 1.1; opacity: .92; }

/* centre block */
.ltg-root .ltg-tri { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ltg-root .ltg-gem {
	position: absolute; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff, #ffe082 35%, #c9a227 75%, #8a6a10);
	box-shadow: 0 calc(var(--u) * .05) calc(var(--u) * .12) rgba(0, 0, 0, .5);
}

/* ---------- pawns ---------- */
.ltg-root .ltg-token3d {
	position: absolute; left: 0; top: 0; width: 0; height: 0;
	transform-style: preserve-3d;
	transition: transform .19s ease-out;
	pointer-events: none;
}
.ltg-root .ltg-pawn { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transition: transform .19s ease-out; }
.ltg-root .ltg-bob { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.ltg-root .ltg-disc { position: absolute; left: 0; top: 0; border-radius: 50%; box-shadow: inset 0 0 0 calc(var(--u) * .012) rgba(0, 0, 0, .22); }
.ltg-root .ltg-head {
	position: absolute;
	left: calc(var(--u) * -.23); top: calc(var(--u) * -.23);
	border-radius: 50%;
	transform: translateZ(calc(var(--u) * .83)) rotateX(calc(var(--tilt) * -1));
	box-shadow: 0 calc(var(--u) * .03) calc(var(--u) * .06) rgba(0, 0, 0, .35);
}
.ltg-root .ltg-shadow {
	position: absolute; left: 0; top: 0; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}
.ltg-root .ltg-ring {
	position: absolute; border-radius: 50%;
	border: calc(var(--u) * .09) solid #fff;
	box-shadow: 0 0 calc(var(--u) * .5) #ffeb3b, inset 0 0 calc(var(--u) * .3) #ffeb3b;
	opacity: 0;
	transform: translateZ(calc(var(--u) * .02));
}
.ltg-root .ltg-hit { position: absolute; left: 0; top: 0; border-radius: 50%; }
.ltg-root .ltg-movable { pointer-events: auto; cursor: pointer; }
.ltg-root .ltg-movable .ltg-ring { opacity: 1; animation: ltg-ring .7s ease-in-out infinite alternate; }
.ltg-root .ltg-movable .ltg-bob { animation: ltg-bob .6s ease-in-out infinite alternate; }

/* ---------- dice corners ---------- */
.ltg-root .ltg-pad {
	position: absolute; left: 0; top: 0;
	border-radius: calc(var(--u) * .7);
	background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .13), rgba(0, 0, 0, .35));
	box-shadow: inset 0 0 0 calc(var(--u) * .07) var(--pc), inset 0 0 calc(var(--u) * .7) rgba(0, 0, 0, .55);
	opacity: .75;
}
.ltg-root .ltg-pad.ltg-active { opacity: 1; animation: ltg-pad 1s ease-in-out infinite alternate; }
.ltg-root .ltg-pad.ltg-clickable { cursor: pointer; }
.ltg-root .ltg-dicespot { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; outline: none; }
.ltg-root .ltg-dicespot.ltg-clickable { cursor: pointer; }
.ltg-root .ltg-hop, .ltg-root .ltg-yaw { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.ltg-root .ltg-yaw { transition: transform .95s ease-out; }
.ltg-root .ltg-hop.ltg-throw { animation: ltg-hop .95s ease-out; }
.ltg-root .ltg-cube { position: absolute; transform-style: preserve-3d; transition: transform .95s cubic-bezier(.22, .75, .3, 1); }
.ltg-root .ltg-dface {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	border-radius: calc(var(--u) * .32);
	box-shadow: inset 0 0 calc(var(--u) * .28) rgba(60, 40, 10, .3), inset 0 calc(var(--u) * .04) 0 rgba(255, 255, 255, .95);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.ltg-root .ltg-idle .ltg-dface { filter: brightness(.7) saturate(.85); }
.ltg-root .ltg-dshadow {
	position: absolute; left: 0; top: 0; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.ltg-root .ltg-dlabel { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.ltg-root .ltg-dname { font-size: calc(var(--u) * .56); font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #cfd6f3; text-shadow: 0 calc(var(--u) * .04) calc(var(--u) * .08) rgba(0, 0, 0, .7); }
.ltg-root .ltg-dname.ltg-on { color: #ffe082; }
.ltg-root .ltg-dteam { font-size: calc(var(--u) * .4); color: #9fb3a8; white-space: nowrap; }

@keyframes ltg-ring { from { transform: translateZ(calc(var(--u) * .02)) scale(.88); } to { transform: translateZ(calc(var(--u) * .02)) scale(1.12); } }
@keyframes ltg-bob { from { transform: translateZ(0); } to { transform: translateZ(calc(var(--u) * .3)); } }
@keyframes ltg-pad { from { box-shadow: inset 0 0 0 calc(var(--u) * .07) var(--pc), inset 0 0 calc(var(--u) * .7) rgba(0, 0, 0, .5), 0 0 calc(var(--u) * .4) var(--pc); } to { box-shadow: inset 0 0 0 calc(var(--u) * .1) var(--pc), inset 0 0 calc(var(--u) * .7) rgba(0, 0, 0, .3), 0 0 calc(var(--u) * 1.3) var(--pc); } }
@keyframes ltg-yglow { from { filter: brightness(1); } to { filter: brightness(1.18); } }
@keyframes ltg-hop {
	0% { transform: translateZ(0); }
	30% { transform: translateZ(calc(var(--u) * 3)); }
	58% { transform: translateZ(calc(var(--u) * .2)); }
	75% { transform: translateZ(calc(var(--u) * 1)); }
	100% { transform: translateZ(0); }
}

/* ---------- side panel ---------- */
.ltg-root .ltg-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ltg-root .ltg-scores { padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
.ltg-root .ltg-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ltg-root .ltg-team { padding: 8px; border-radius: 10px; background: rgba(0, 0, 0, .22); }
.ltg-root .ltg-teamhead { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 4px; font-size: .85em; font-weight: 700; color: #aeb7dc; }
.ltg-root .ltg-srow { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; font-size: .92em; }
.ltg-root .ltg-srow.ltg-cur { background: rgba(255, 213, 79, .14); box-shadow: inset 0 0 0 2px #ffca28; font-weight: 700; }
.ltg-root .ltg-sname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltg-root .ltg-snum { flex: none; font-variant-numeric: tabular-nums; color: #aeb7dc; }
.ltg-root .ltg-actions { display: flex; gap: 8px; }
.ltg-root .ltg-actions .ltg-btn { flex: 1 1 0; }

/* ---------- winner overlay ---------- */
.ltg-root .ltg-over {
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px;
	border-radius: 16px;
	background: rgba(10, 11, 22, .82);
	backdrop-filter: blur(4px);
	text-align: center;
	font-size: 1.35em;
	font-weight: 800;
	color: #ffe082;
	z-index: 5;
}
.ltg-root .ltg-over[hidden] { display: none; }
.ltg-root .ltg-over .ltg-trophy { font-size: 3.4em; line-height: 1; }
.ltg-root .ltg-over .ltg-btnrow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; font-size: .75em; }

@media (prefers-reduced-motion: reduce) {
	.ltg-root .ltg-world, .ltg-root .ltg-token3d, .ltg-root .ltg-pawn, .ltg-root .ltg-cube, .ltg-root .ltg-yaw { transition: none; }
	.ltg-root .ltg-movable .ltg-ring, .ltg-root .ltg-movable .ltg-bob, .ltg-root .ltg-pad.ltg-active, .ltg-root .ltg-yactive, .ltg-root .ltg-hop.ltg-throw { animation: none; }
}

/* narrow screens: turn text on its own row, buttons below */
@container (max-width: 560px) {
	.ltg-root .ltg-turnbar { flex-wrap: wrap; }
	.ltg-root .ltg-tbtext { flex: 1 1 calc(100% - 40px); }
	.ltg-root .ltg-turnbar .ltg-roll, .ltg-root .ltg-turnbar .ltg-view { flex: 1 1 0; }
	.ltg-root .ltg-turnbar .ltg-snd { flex: 0 0 auto; }
}

/* ---------- board only; everything else lives in the Info panel ---------- */
.ltg-root .ltg-game { max-width: 760px; margin: 0 auto; }
.ltg-root .ltg-turnbar { margin-bottom: 0; }
.ltg-root .ltg-infobtn {
	position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 8;
	min-height: 36px; padding: 4px 14px; border-radius: 999px;
	background: rgba(20, 22, 44, .72); backdrop-filter: blur(4px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.ltg-root .ltg-infobtn:hover:not(:disabled) { transform: translateX(-50%) translateY(-1px); }
.ltg-root .ltg-infobtn:active:not(:disabled) { transform: translateX(-50%) translateY(1px); }
.ltg-root .ltg-panel {
	position: absolute; left: 8px; right: 8px; top: 54px; bottom: 8px; z-index: 7;
	display: flex; flex-direction: column; gap: 10px; overflow-y: auto;
	padding: 12px; border-radius: 16px;
	background: rgba(10, 11, 22, .98); border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.ltg-root .ltg-panel[hidden] { display: none; }
.ltg-root .ltg-prow2 { display: flex; gap: 8px; }
.ltg-root .ltg-prow2 .ltg-roll, .ltg-root .ltg-prow2 .ltg-view { flex: 1 1 0; }
.ltg-root .ltg-prow2 .ltg-snd { flex: 0 0 auto; }
.ltg-root .ltg-teams { grid-template-columns: 1fr 1fr; }
@container (max-width: 420px) { .ltg-root .ltg-teams { grid-template-columns: 1fr; } }

/* ================= full-screen game, card layout, themed background ================= */
.ltg-root.ltg-full {
	position: fixed; left: 0; top: 0; right: 0; bottom: 0;
	width: auto; height: 100vh; max-width: none; margin: 0; padding: 0;
	border-radius: 0; box-shadow: none; z-index: 2147483000; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	background: #10163a;
}
@supports (height: 100dvh) { .ltg-root.ltg-full { height: 100dvh; } }
.ltg-root .ltg-bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ltg-root .ltg-bg::before {
	content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
	background-image:
		linear-gradient(45deg, rgba(255, 255, 255, .07) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .07) 75%),
		linear-gradient(45deg, rgba(255, 255, 255, .07) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .07) 75%);
	background-size: 12vmin 12vmin; background-position: 0 0, 6vmin 6vmin;
}
.ltg-root .ltg-bg::after {
	content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
	background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .45) 100%);
}
.ltg-root .ltg-beam {
	position: absolute; top: -5%; width: 38%; height: 110%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 75%);
	clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
}
.ltg-root .ltg-beam.b1 { left: -8%; transform: rotate(-16deg); }
.ltg-root .ltg-beam.b2 { right: -8%; transform: rotate(16deg); }
.ltg-root .ltg-sp { position: absolute; display: block; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); animation: ltg-float 6s ease-in-out infinite alternate; }
.ltg-root .ltg-sp svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 .7vmin .9vmin rgba(0, 0, 0, .35)); }
@keyframes ltg-float {
	from { transform: translate(-50%, -50%) rotate(var(--r, 0deg)); }
	to { transform: translate(-50%, calc(-50% - 1.8vmin)) rotate(calc(var(--r, 0deg) + 10deg)); }
}
.ltg-root.ltg-full .ltg-game { position: relative; z-index: 1; max-width: none; margin: 0; width: auto; }
.ltg-root.ltg-full .ltg-main { min-width: 0; }
.ltg-root .ltg-stagewrap { margin: 0 auto; }
.ltg-root .ltg-stage { background: none; overflow: visible; border-radius: 0; }
.ltg-root .ltg-table { background: none; box-shadow: none; }

/* player cards */
.ltg-root .ltg-pad {
	border-radius: calc(var(--u) * .5);
	background: linear-gradient(160deg, rgba(24, 36, 100, .94), rgba(9, 15, 54, .95));
	box-shadow: inset 0 0 0 calc(var(--u) * .09) var(--pc), 0 calc(var(--u) * .14) calc(var(--u) * .35) rgba(0, 0, 0, .45);
	opacity: .92;
}
.ltg-root .ltg-pad.ltg-active { opacity: 1; }
.ltg-root .ltg-avatar {
	position: absolute; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: calc(var(--u) * .95); line-height: 1;
	background: radial-gradient(circle at 35% 28%, #ffffff, var(--pc) 130%);
	box-shadow: inset 0 0 0 calc(var(--u) * .07) var(--pc), 0 calc(var(--u) * .06) calc(var(--u) * .14) rgba(0, 0, 0, .4);
}
.ltg-root .ltg-cname {
	position: absolute; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	font-size: calc(var(--u) * .46); font-weight: 800; line-height: 1.15; color: #fff; pointer-events: none;
}
.ltg-root .ltg-cdots { position: absolute; display: flex; justify-content: center; gap: calc(var(--u) * .24); pointer-events: none; }
.ltg-root .ltg-cdots i { display: block; width: calc(var(--u) * .3); height: calc(var(--u) * .3); border-radius: 50%; background: rgba(255, 255, 255, .22); }
.ltg-root .ltg-cdots i.on { background: var(--pc); box-shadow: 0 0 calc(var(--u) * .3) var(--pc); }
.ltg-root .ltg-ctag {
	position: absolute; padding: 0 calc(var(--u) * .2); border-radius: 999px;
	background: rgba(255, 255, 255, .16); color: #dfe5ff; font-size: calc(var(--u) * .36); font-weight: 800; line-height: 1.5; pointer-events: none;
}

/* info button: small round icon between the two top cards */
.ltg-root .ltg-infobtn, .ltg-root .ltg-infobtn:hover:not(:disabled), .ltg-root .ltg-infobtn:active:not(:disabled) { transform: none; }
.ltg-root .ltg-infobtn {
	top: var(--iy, 8px); left: calc(50% - 18px);
	width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; font-size: 18px; line-height: 1;
}
.ltg-root .ltg-panel { top: calc(var(--iy, 8px) + 46px); }
.ltg-root .ltg-prow2 { flex-wrap: wrap; }
.ltg-root .ltg-prow2 .ltg-bgbtn, .ltg-root .ltg-prow2 .ltg-fsbtn { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .ltg-root .ltg-sp { animation: none; } }