/* Getaway game on the city page. Landscape, tablet and desktop first.
   The map is square and the frame is wide, so the space either side of it goes
   to the rails rather than being left as dead padding. */
.lbgw-game{
	margin-top:8px;
}
.lbgw-stage{
	background:#241F2E;
	border:2px solid #241F2E;
	border-radius:12px;
	display:flex;
	height:min(64vh,620px);
	justify-content:space-between;
	overflow:hidden;
}
/* The level is square. Give the viewport the same shape so the map fills it
   corner to corner, and hand the width that is left to the rails. Any space
   beyond the rail cap sits beside the map in the frame colour, never as beige
   letterbox inside the canvas. */
.lbgw-viewport{
	position:relative;
	aspect-ratio:1;
	container-type:inline-size;
	flex:0 0 auto;
	height:100%;
	touch-action:none;
}
.lbgw-game-canvas{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	top:0;
	display:block;
}
/* Score, loot and fuel a second time, for the phone strip at the foot of the
   map. The rails carry them on a wide screen, so this stays hidden until the
   breakpoint asks for it and only one copy is ever on screen. */
.lbgw-hud{
	align-items:center;
	display:none;
	gap:14px;
}
/* The whole city as a square in the top corner of the map. At the phone's zoom
   the camera shows about a seventh of the box, so this is the only thing that
   says where the loot you have not reached is. Sized against the viewport, so
   it is the same share of the map on any phone. It rests translucent so it
   reads as something laid over the map rather than a hole cut in it, and drops
   further still when the car drives in behind it. */
.lbgw-mini-corner{
	position:absolute;
	right:0;
	top:0;
	display:none;
	opacity:0.65;
	padding:8px;
	transition:opacity 0.2s ease;
	width:42cqw;
	z-index:2;
}
/* Out of the way the moment the car reaches it, back again when it leaves.
   Opacity and not display, so it fades instead of blinking and the board is
   still faintly there while you drive across it. */
.lbgw-mini-corner--faded{
	opacity:0.12;
}
.lbgw-mini-corner .lbgw-minimap-map{
	margin:0;
	max-width:none;
}
.lbgw-hud-stat{
	display:flex;
	flex-direction:column;
}
.lbgw-hud-label{
	color:rgba(253,244,224,0.55);
	font-size:10px;
	letter-spacing:0.12em;
	text-transform:uppercase;
}
.lbgw-hud-value{
	color:#FDF4E0;
	font-size:20px;
	font-variant-numeric:tabular-nums;
	font-weight:800;
	line-height:1.15;
}
/* The dial draws itself at the width of whatever holds it, and the E and F it
   labels are fixed pixels, so this is the smallest it stays legible at. */
.lbgw-hud-fuel{
	margin-left:auto;
	width:96px;
}
.lbgw-loading{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	top:0;
	align-items:center;
	background:#FDF4E0;
	color:#241F2E;
	display:flex;
	flex-direction:column;
	gap:14px;
	justify-content:center;
	z-index:2;
}
.lbgw-loading[hidden]{
	display:none;
}
.lbgw-spinner{
	animation:lbgw-spin 900ms linear infinite;
	border:4px solid rgba(36,31,46,0.15);
	border-radius:50%;
	border-top-color:#E8352B;
	height:38px;
	width:38px;
}
.lbgw-loading-text{
	font-size:13px;
}
/* The one thing a visitor without an account can do with the game. It sits over
   the demo at the top of the picture, and it is sized in the viewport's own
   units like the result card, so it grows with the board in full screen. */
@keyframes lbgw-spin{
	to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion:reduce){
	.lbgw-spinner{
		animation-duration:2400ms;
	}
}
/* The minimap. It is the overview the camera gave up, so it takes the full
   width of the rail and stays square, like the board it is showing. */
/* The canvas is sized square from this box's width, so its width is also its
   height. Left alone it is the full rail width and eats two thirds of a rail
   that is only 64vh tall, which is what left the visited list one row. A
   quarter of the viewport is under 40% of the rail at that height. */
.lbgw-minimap-map{
	border:2px solid #FDF4E0;
	border-radius:3px;
	line-height:0;
	margin-top:4px;
	max-width:25vh;
	overflow:hidden;
}
.lbgw-minimap{
	display:block;
	width:100%;
}
.lbgw-rail{
	background:#241F2E;
	color:#FDF4E0;
	display:flex;
	flex:1 1 200px;
	flex-direction:column;
	font-size:13px;
	gap:12px;
	max-width:320px;
	min-width:0;
	/* The stage is 64vh, so on a 768px tall tablet the left rail is under 500px
	   and has more to say than that. Scrolling it is what keeps the fuel dial
	   and the street name reachable instead of clipped off the bottom. */
	overflow-y:auto;
	padding:16px 14px;
}
.lbgw-rail--right{
	border-left:1px solid rgba(253,244,224,0.14);
}
.lbgw-rail--left{
	border-right:1px solid rgba(253,244,224,0.14);
}
.lbgw-stat-label{
	color:rgba(253,244,224,0.55);
	font-size:10px;
	letter-spacing:0.12em;
	text-transform:uppercase;
}
.lbgw-stat-value{
	font-size:20px;
	font-weight:700;
	line-height:1.2;
}
.lbgw-stat-value--sm{
	font-size:14px;
	font-weight:400;
	line-height:1.35;
}
/* Drawn, not styled. The dial is a canvas so it uses the same palette and the
   same sizing routine as the map, and the rail only has to give it a width. */
.lbgw-gauge{
	display:block;
	margin-top:4px;
}
/* The goal, in the same paper balloon the knowledge rail uses. Nobody opening
   the tab knows what finishing this means, and the counters underneath only read
   as progress once they do. */
.lbgw-goal{
	position:relative;
	background:#FDF4E0;
	border:2px solid #241F2E;
	border-radius:10px;
	box-shadow:2px 2px 0 rgba(0,0,0,0.35);
	color:#241F2E;
	padding:8px 10px;
}
.lbgw-goal::after{
	position:absolute;
	bottom:-7px;
	left:16px;
	background:#FDF4E0;
	border-bottom:2px solid #241F2E;
	border-right:2px solid #241F2E;
	content:"";
	height:9px;
	transform:rotate(45deg);
	width:9px;
}
.lbgw-goal .lbgw-stat-label{
	color:rgba(36,31,46,0.55);
}
.lbgw-goal p{
	font-size:12px;
	font-weight:700;
	line-height:1.4;
	margin:4px 0 0;
}
.lbgw-goal .lbgw-goal-more{
	color:rgba(36,31,46,0.72);
	font-size:11px;
	font-weight:400;
}
/* While a run is on the goal steps aside. It is the tallest block in the rail,
   it is read once before the first drive, and the loot counter underneath is
   already saying the same thing. */
.lbgw-game--driving .lbgw-goal{
	display:none;
}
/* The three best runs in this city. PHP prints the list on load and prints it
   again into the reply after a run, so the rail is showing the score table
   rather than a second opinion about it. */
.lbgw-top-list{
	display:flex;
	flex-direction:column;
	gap:2px;
	list-style:none;
	margin:4px 0 0;
	padding:0;
}
.lbgw-top-row{
	align-items:baseline;
	display:flex;
	font-size:13px;
	gap:7px;
	line-height:1.3;
}
.lbgw-top-row.is-me{
	color:#FFD23F;
	font-weight:700;
}
.lbgw-top-place{
	color:rgba(253,244,224,0.45);
	font-size:11px;
	width:9px;
}
.lbgw-top-name{
	flex:1 1 auto;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.lbgw-top-score{
	font-weight:700;
}
.lbgw-top-none{
	color:rgba(253,244,224,0.55);
	font-size:12px;
	margin:4px 0 0;
}
.lbgw-top-note{
	color:rgba(253,244,224,0.72);
	font-size:11px;
	margin:4px 0 0;
	min-height:14px;
}
/* The money bag on a run that took every loot bag in the city, in the colour the
   bags are drawn on the map. */
.lbgw-top-bag{
	align-items:center;
	align-self:center;
	color:#FFC01E;
	display:inline-flex;
}
.lbgw-icon{
	display:block;
	height:14px;
	width:14px;
}
/* The one to beat, on the section heading and not in the rail: it is read before
   the first drive, while the rail is read during one. The heading is a flex row
   so the badge sits at the end of it and the rule underneath still runs the full
   width. A city nobody has driven prints nothing at all. */
.lbgw-title{
	align-items:center;
	display:flex;
	gap:12px;
	justify-content:space-between;
}
.lbgw-champ{
	align-items:center;
	display:flex;
	font-size:13px;
	gap:6px;
	letter-spacing:0;
	text-transform:none;
}
.lbgw-champ:empty{
	display:none;
}
.lbgw-champ .lbgw-icon{
	color:var(--lbfe-yellow);
	height:20px;
	width:20px;
}
.lbgw-champ-name{
	font-weight:400;
}
.lbgw-champ-score{
	font-weight:700;
}

/* The one control that has to be found without looking, so it sits at the top
   of the rail and takes the width that is going. */
.lbgw-controls{
	display:flex;
	flex-direction:column;
	gap:8px;
}
.lbgw-rail .lbgw-btn{
	background:rgba(253,244,224,0.14);
	color:#FDF4E0;
}
/* The muted state is a translucent fill on a dark rail, so brightening it moves
   almost nothing and the hover reads as no hover at all. It takes a lighter fill
   of its own instead. */
.lbgw-rail .lbgw-btn--action.is-off:hover:not([disabled]){
	background:rgba(253,244,224,0.34);
	color:#FDF4E0;
}
/* The action buttons carry their own colour per state, so the plain rail hover
   must not paint over it. */
.lbgw-rail .lbgw-btn:not(.lbgw-btn--action):hover:not([disabled]){
	background:rgba(253,244,224,0.26);
}
/* The three controls. Comic buttons, not browser buttons: filled colour, ink
   outline and a hard offset shadow like everything on the map, with the icon
   carrying the state and the word repeating it. Pressing pushes the button into
   its own shadow. */
.lbgw-rail .lbgw-btn--action{
	align-items:center;
	background:#FDF4E0;
	border:2px solid #241F2E;
	border-radius:10px;
	box-shadow:3px 3px 0 rgba(0,0,0,0.5);
	color:#241F2E;
	display:flex;
	font-size:15px;
	font-weight:700;
	gap:10px;
	padding:10px 12px;
	width:100%;
}
.lbgw-btn--action svg{
	flex:0 0 auto;
	height:26px;
	width:26px;
}
.lbgw-btn-label{
	flex:1 1 auto;
	text-align:left;
}
.lbgw-rail .lbgw-btn--action.is-go{background:#12BE72}
.lbgw-rail .lbgw-btn--action.is-hold{background:#FFD23F}
.lbgw-rail .lbgw-btn--action.is-stop{
	background:#E8352B;
	color:#FDF4E0;
}
.lbgw-rail .lbgw-btn--action.is-off{
	background:rgba(253,244,224,0.16);
	border-color:rgba(253,244,224,0.5);
	color:rgba(253,244,224,0.75);
}
.lbgw-rail .lbgw-btn--action:hover:not([disabled]){
	filter:brightness(1.08);
}
.lbgw-rail .lbgw-btn--action:active:not([disabled]){
	box-shadow:1px 1px 0 rgba(0,0,0,0.5);
	transform:translate(2px,2px);
}
.lbgw-btn[disabled]{
	box-shadow:none;
	cursor:default;
	opacity:0.4;
}
/* Filled by the game from the same tables it scores with, so the key and the
   payout cannot drift apart. */
.lbgw-legend-list,
.lbgw-visited{
	display:flex;
	flex-direction:column;
	gap:3px;
	list-style:none;
	margin:4px 0 0;
	padding:0;
}
.lbgw-legend-list li,
.lbgw-visited li{
	align-items:center;
	display:flex;
	gap:7px;
	line-height:1;
}
/* The key is read before the first drive, the same as the goal on the other
   side, and it is ten rows deep. While a run is on it steps aside and the
   visited list takes its place, which is the list you actually want then. */
.lbgw-game--driving .lbgw-legend-block{
	display:none;
}
/* The block takes the height the key and the help text leave, and the run
   scrolls inside it rather than pushing the help off the bottom. */
.lbgw-visited-block{
	display:flex;
	flex:1 1 auto;
	flex-direction:column;
	min-height:0;
}
.lbgw-visited{
	flex:1 1 auto;
	min-height:0;
	overflow-y:auto;
}
.lbgw-legend-list .lbgw-key,
.lbgw-visited .lbgw-key{
	display:block;
	flex:0 0 auto;
}
.lbgw-legend-name{
	flex:1 1 auto;
	font-size:12px;
}
.lbgw-legend-val{
	color:rgba(253,244,224,0.55);
	font-size:11px;
	white-space:nowrap;
}
/* The knowledge rail from the brief. A pickup never stops the game, it pushes a
   balloon in here instead: paper on the dark rail, with a tail pointing back at
   the map it came from. */
.lbgw-visited li.lbgw-bubble{
	position:relative;
	align-items:flex-start;
	animation:lbgw-pop 0.18s ease-out;
	background:#FDF4E0;
	border:2px solid #241F2E;
	border-radius:10px;
	box-shadow:2px 2px 0 rgba(0,0,0,0.35);
	color:#241F2E;
	gap:6px;
	line-height:1.3;
	margin:0 2px 7px 7px;
	padding:6px 8px;
}
.lbgw-visited li.lbgw-bubble::before{
	position:absolute;
	bottom:7px;
	left:-7px;
	background:#FDF4E0;
	border-bottom:2px solid #241F2E;
	border-left:2px solid #241F2E;
	content:"";
	height:9px;
	transform:rotate(45deg);
	width:9px;
}
.lbgw-bubble-body{
	flex:1 1 auto;
	min-width:0;
}
.lbgw-bubble-name{
	font-size:12px;
	font-weight:700;
}
.lbgw-bubble-what{
	color:rgba(36,31,46,0.65);
	font-size:11px;
}
.lbgw-bubble-fact{
	border-top:1px solid rgba(36,31,46,0.18);
	font-size:11px;
	margin-top:4px;
	padding-top:4px;
}
.lbgw-bubble-val{
	background:#FFD23F;
	border:1.5px solid #241F2E;
	border-radius:8px;
	flex:0 0 auto;
	font-size:11px;
	font-weight:700;
	padding:1px 5px;
}
.lbgw-stat-count{
	color:#FDF4E0;
	letter-spacing:0;
}
@keyframes lbgw-pop{
	from{
		opacity:0;
		transform:translateY(-5px) scale(0.92);
	}
	to{
		opacity:1;
		transform:none;
	}
}
@media (prefers-reduced-motion:reduce){
	.lbgw-visited li.lbgw-bubble{animation:none}
}
.lbgw-help{
	color:rgba(253,244,224,0.6);
	font-size:11px;
	line-height:1.5;
	margin-top:auto;
}
.lbgw-game-bar{
	align-items:center;
	color:#555;
	display:flex;
	flex-wrap:wrap;
	font-size:13px;
	gap:8px 14px;
	margin-top:8px;
}
.lbgw-game-status{
	flex:1 1 auto;
}
/* A row of the bar under the map rather than a layer over it. It used to be
   absolutely positioned in the viewport, where it sat on top of the corner
   minimap and, being sized in cqw against a container only as wide as the phone,
   rendered at about 8px there. In the bar it is outside the container query, so
   the site's own button sizing applies and there is nothing here to restate. */
.lbgw-signup{
	display:flex;
	flex:1 0 100%;
	justify-content:center;
}
/* ODbL wants the credit seen rather than tucked away, and at the right hand end
   of the bar it was whatever the status line left over. A 100% flex basis puts
   it on its own row of a bar that already wraps, so it centres against the whole
   width instead of against the gap between two other things. */
.lbgw-game-credit{
	color:#777;
	flex:1 0 100%;
	font-size:11px;
	text-align:center;
}
.lbgw-btn{
	background:#241F2E;
	border:0;
	border-radius:6px;
	color:#FDF4E0;
	cursor:pointer;
	font:inherit;
	padding:6px 14px;
}
.lbgw-btn:hover{
	background:#3a3348;
}
.lbgw-game-note{
	color:#555;
	font-size:13px;
	margin:0 0 10px;
}

/* Full screen: the browser makes the root the whole viewport, so the frame
   loses its border and the stage takes everything that is left. */
/* Full screen is ours, not the browser's: the game pinned over the page, with
   the page behind it stopped from scrolling under it. Nothing to ask
   permission for, and it behaves the same in every browser. */
.lbgw-game--full{
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	top:0;
	background:#241F2E;
	display:flex;
	flex-direction:column;
	margin:0;
	padding:0;
	z-index:9000;
}
.lbgw-full-open{
	overflow:hidden;
}
.lbgw-game--full .lbgw-stage{
	border:0;
	border-radius:0;
	flex:1 1 auto;
	height:auto;
}
.lbgw-game--full .lbgw-game-bar{
	color:rgba(253,244,224,0.7);
	margin:0;
	padding:8px 14px;
}
.lbgw-game--full .lbgw-game-credit{
	color:rgba(253,244,224,0.5);
}
.lbgw-game--full .lbgw-game-note{
	display:none;
}

/* The brief is landscape from 1024 up. Below that the rails would squeeze the
   map to nothing, so they step aside. */
@media (max-width:900px){
	/* The stage was 64vh tall and the viewport is square off that height, so on
	   a 360 by 800 phone a 512px canvas sat in a 360px box and 150px of it was
	   clipped away, which put the car at 256px on a 360px screen instead of in
	   the middle of it. On a phone the square comes off the width instead, and
	   the stage stacks, so the strip sits below the map and takes its own
	   height rather than covering the bottom of it. */
	.lbgw-stage{
		flex-direction:column;
		height:auto;
	}
	.lbgw-viewport{
		flex:1 1 auto;
		height:auto;
		width:100%;
	}
	.lbgw-rail{
		display:none;
	}
	/* Drive, Pause and Sound live in the left rail, so hiding the rails left a
	   phone with no way to start a run, stop one or silence it. The rail comes
	   back as a strip under the map with the controls and the three readouts
	   showing, which is where a thumb is anyway. It is a row of the stage rather
	   than a layer over the map, because floated over it the strip took the
	   bottom of the street the car was driving down. The rail is written before
	   the map, so `order` puts it back underneath. */
	.lbgw-rail--left{
		background:rgba(36,31,46,0.88);
		border-right:0;
		display:flex;
		flex:0 0 auto;
		gap:8px;
		max-width:none;
		order:2;
		overflow:visible;
		padding:8px;
	}
	.lbgw-rail--left > :not(.lbgw-controls):not(.lbgw-hud){
		display:none;
	}
	.lbgw-controls{
		flex-direction:row;
		width:100%;
	}
	/* Three across a 360px phone is about 110px each, and the icon takes 26 of
	   them, so the label centres under what is left and the gap closes up. */
	.lbgw-rail--left .lbgw-btn--action{
		flex:1 1 0;
		font-size:13px;
		gap:6px;
		justify-content:center;
		min-width:0;
		padding:10px 6px;
	}
	.lbgw-rail--left .lbgw-btn-label{
		flex:0 1 auto;
		text-align:center;
	}
	.lbgw-hud{
		display:flex;
	}
	.lbgw-mini-corner{
		display:block;
	}
	/* Full screen on a phone gave about a quarter of the screen to the bar,
	   because the status line wraps to three rows under the Exit button. The
	   status is the only part of it that can go: the credit is the OSM
	   attribution and has to stay visible. The map takes the height back. */
	.lbgw-game--full .lbgw-game-status{
		display:none;
	}
}

/* The end of a run. The map stays behind it, dimmed, because where you were
   caught is half of the result. Everything is sized in container units against
   the viewport, so the card is the same card at 620px on the page as it is at
   1400px full screen. */
.lbgw-card{
	/* One unit for the whole card, so the zoom is a single number. Everything
	   below is a multiple of it. */
	--u:1cqw;
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	top:0;
	align-items:center;
	background:rgba(36,31,46,0.5);
	display:flex;
	justify-content:center;
	padding:calc(4 * var(--u));
	z-index:3;
}
.lbgw-card-box{
	background:#FDF4E0;
	border:calc(0.3 * var(--u)) solid #241F2E;
	border-radius:calc(1.8 * var(--u));
	box-shadow:calc(0.8 * var(--u)) calc(0.8 * var(--u)) 0 rgba(36,31,46,0.85);
	color:#241F2E;
	display:flex;
	flex-direction:column;
	font-size:calc(2 * var(--u));
	gap:calc(1.4 * var(--u));
	max-height:100%;
	max-width:100%;
	padding:calc(2.8 * var(--u));
	width:calc(58 * var(--u));
}
.lbgw-card-head{
	font-family:'Bangers', cursive;
	font-size:calc(6.5 * var(--u));
	letter-spacing:0.02em;
	line-height:1;
	margin:0;
	text-align:center;
}
.lbgw-card-line{
	color:rgba(36,31,46,0.7);
	margin:0;
	text-align:center;
}
.lbgw-card-figures{
	border-bottom:calc(0.15 * var(--u)) solid rgba(36,31,46,0.18);
	border-top:calc(0.15 * var(--u)) solid rgba(36,31,46,0.18);
	display:flex;
	padding:calc(1.4 * var(--u)) 0;
}
.lbgw-card-figure{
	flex:1 1 0;
	text-align:center;
}
.lbgw-card-fig{
	display:block;
	font-size:calc(4.2 * var(--u));
	font-variant-numeric:tabular-nums;
	font-weight:800;
	line-height:1.1;
}
.lbgw-card-cap{
	color:rgba(36,31,46,0.55);
	display:block;
	font-size:calc(1.3 * var(--u));
	letter-spacing:0.12em;
	text-transform:uppercase;
}
.lbgw-card-rows{
	display:flex;
	flex-direction:column;
	gap:calc(1 * var(--u));
	list-style:none;
	margin:0;
	min-height:0;
	overflow-y:auto;
	padding:0;
}
.lbgw-card-row{
	align-items:center;
	display:flex;
	gap:calc(1.2 * var(--u));
}
.lbgw-card-row .lbgw-key{
	display:block;
	flex:0 0 auto;
	height:calc(2.6 * var(--u));
	width:calc(2.6 * var(--u));
}
.lbgw-card-name{
	flex:1 1 auto;
}
.lbgw-card-count{
	color:rgba(36,31,46,0.55);
	font-variant-numeric:tabular-nums;
}
.lbgw-card-val{
	font-variant-numeric:tabular-nums;
	font-weight:700;
	min-width:calc(8 * var(--u));
	text-align:right;
}
.lbgw-card-note{
	color:rgba(36,31,46,0.7);
	margin:0;
	min-height:1.4em;
	text-align:center;
}
/* The same comic button as the rail, in the card's units rather than the rail's
   pixels, because the card scales and the rail does not. */
.lbgw-card-again{
	align-items:center;
	align-self:center;
	background:#12BE72;
	border:calc(0.25 * var(--u)) solid #241F2E;
	border-radius:calc(1 * var(--u));
	box-shadow:calc(0.4 * var(--u)) calc(0.4 * var(--u)) 0 rgba(36,31,46,0.6);
	color:#241F2E;
	cursor:pointer;
	display:flex;
	font:inherit;
	font-weight:700;
	justify-content:center;
	padding:calc(1.1 * var(--u)) calc(3 * var(--u));
}
.lbgw-card-again:active{
	box-shadow:none;
	transform:translate(calc(0.4 * var(--u)),calc(0.4 * var(--u)));
}

/* The card is drawn in the viewport's own units so it is the same card at 620px
   on the page and at 1400px full screen. On a 375px phone that made body text
   2cqw, which is 7px. Doubling the unit is the zoom, and the box is already
   capped at max-width so the wider card just fills what the padding leaves.
   This has to sit after the rule that sets --u to 1cqw and not up in the phone
   block with the rails: the two selectors weigh the same, so whichever is
   written last wins, and written first it did nothing at all. */
@media (max-width:900px){
	.lbgw-card{
		--u:2.1cqw;
	}
}