/* Line98 Leaderboard UI - light theme (matches light game background) */

/* Pinned to the empty strip in the button row of images/layout.png: logical
   x 230..331, y 463..497. That gap is clear of the switches (x 3..131), of
   undo/power (x 332..405) and of the score row (y 0..51) at every scale - a
   screen corner is not, which is why this follows the board instead.
   The --board-* variables are written by CanvasResize() in js/canvas.js. */
#lb-btn {
	/* Centred on logical y 480 - the same centre line the game paints the
	   switches and the undo/power buttons on, so the whole row reads as one.
	   Anchoring the top edge instead lifts the button off that line as the
	   scale rises and it shrinks in logical terms (10px too high at scale 1.8).
	   Height is capped at 41 logical px, exactly the room between the last row
	   of balls (sprites end at 456) and the bottom of the canvas (500), so a
	   centred button still cannot steal a tap from the board. The 28px floor
	   only engages below scale 0.68, where the layout has already dropped to
	   solo mode and has slack below the board anyway. */
	--lb-btn-size: clamp(28px, calc(var(--board-s, 1) * 41px), 56px);
	position: fixed;
	box-sizing: border-box;
	left: calc(var(--board-x, 0px) + var(--board-s, 1) * 280px - var(--lb-btn-size) / 2);
	top: calc(var(--board-y, 0px) + var(--board-s, 1) * 480px - var(--lb-btn-size) / 2);
	z-index: 9990;
	width: var(--lb-btn-size);
	height: var(--lb-btn-size);
	border-radius: 50%;
	background: #ffffff;
	color: #d19a00;
	font-size: calc(var(--lb-btn-size) * 0.52);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 1px solid #d3dce6;
	box-shadow: 0 2px 8px rgba(30, 50, 80, 0.18);
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

/* Invisible tap padding - the same idea as hit_pad in js/switch.js and
   js/button.js for the controls either side of it. Never extends upwards:
   the bottom row of the board is directly above and keeps its full area. */
#lb-btn::before {
	content: '';
	position: absolute;
	left: -8px;
	right: -8px;
	top: 0;
	bottom: -8px;
}

#lb-btn:active {
	transform: scale(0.94);
}

#lb-modal {
	position: fixed;
	inset: 0;
	z-index: 9991;
	background: rgba(20, 35, 55, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
	box-sizing: border-box;
}

#lb-modal.lb-hidden {
	display: none;
}

.lb-box {
	width: 100%;
	max-width: 420px;
	max-height: 100%;
	background: linear-gradient(180deg, #ffffff, #f2f7fc);
	border: 1px solid #d3dce6;
	border-radius: 14px;
	box-shadow: 0 10px 34px rgba(30, 50, 80, 0.22);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.lb-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid #e2e8ef;
}

.lb-title {
	color: #b8860b;
	font-size: 18px;
	font-weight: bold;
}

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

.lb-share {
	color: #5f7184;
	font-size: 13px;
	cursor: pointer;
	padding: 5px 10px;
	border: 1px solid #cdd7e2;
	border-radius: 8px;
	background: #ffffff;
	-webkit-tap-highlight-color: transparent;
}

.lb-share:active {
	background: #eaf1f8;
	color: #2c3e50;
}

.lb-close {
	color: #5f7184;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 6px;
}

#lb-toast {
	position: fixed;
	left: 50%;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
	transform: translateX(-50%);
	background: linear-gradient(180deg, #ffe080, #f0b429);
	color: #5b3d00;
	font-weight: bold;
	font-size: 14px;
	padding: 10px 18px;
	border-radius: 20px;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s;
	box-shadow: 0 4px 14px rgba(30, 50, 80, 0.25);
}

#lb-toast.lb-toast-show {
	opacity: 1;
}

.lb-name-wrap {
	display: flex;
	padding: 12px 16px;
	gap: 8px;
}

#lb-name {
	flex: 1;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #cdd7e2;
	border-radius: 8px;
	background: #ffffff;
	color: #223142;
	font-size: 15px;
	outline: none;
	-webkit-user-select: text;
	user-select: text;
	-webkit-touch-callout: default;
}

#lb-name:focus {
	border-color: #e0a800;
	box-shadow: 0 0 0 3px rgba(224, 168, 0, 0.18);
}

#lb-name-save {
	height: 40px;
	padding: 0 16px;
	border: none;
	border-radius: 8px;
	background: linear-gradient(180deg, #ffe080, #f0b429);
	color: #5b3d00;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(224, 168, 0, 0.35);
}

#lb-name-save:active {
	transform: scale(0.97);
}

.lb-tabs {
	display: flex;
	gap: 6px;
	padding: 10px 16px 0;
}

.lb-tab {
	flex: 1;
	height: 34px;
	border: 1px solid #cdd7e2;
	border-radius: 8px;
	background: #ffffff;
	color: #5f7184;
	font-size: 13px;
	cursor: pointer;
}

.lb-tab.active {
	background: linear-gradient(180deg, #ffe080, #f0b429);
	border-color: #e0a800;
	color: #5b3d00;
	font-weight: bold;
	box-shadow: 0 2px 6px rgba(224, 168, 0, 0.3);
}

/* Height comes from the flex column, not from a vh cap: with the keyboard open
   the modal is resized to the visual viewport and the list has to give way. */
.lb-list {
	flex: 1 1 0;
	overflow-y: auto;
	padding: 10px 16px;
	min-height: 0;
	touch-action: pan-y;
}

.lb-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	color: #2c3e50;
	font-size: 15px;
}

.lb-row:nth-child(odd) {
	background: #f0f5fa;
}

.lb-row:nth-child(even) {
	background: #ffffff;
}

.lb-row-mine {
	outline: 2px solid #e0a800;
	background: #fdf3d7 !important;
}

.lb-rank {
	width: 40px;
	text-align: center;
	font-weight: bold;
	color: #b8860b;
	flex-shrink: 0;
}

.lb-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lb-score {
	font-weight: bold;
	color: #b8860b;
	flex-shrink: 0;
}

.lb-msg {
	color: #6b7c8e;
	text-align: center;
	padding: 24px 0;
	font-size: 14px;
}

.lb-mine {
	padding: 10px 16px;
	border-top: 1px solid #e2e8ef;
	color: #b8860b;
	font-size: 14px;
	text-align: center;
}

/* --- Right sidebar: Daily Ranking --- */

/* Width and height are written by CanvasResize() in js/canvas.js; the values
   here are only what shows before the first layout pass runs. */
.lb-sidebar {
	width: 300px;
	flex-shrink: 0;
	min-height: 0;
	max-height: 100%;
	margin: 1.5rem 0;
	background: linear-gradient(180deg, #ffffff, #f2f7fc);
	border: 1px solid #d3dce6;
	border-radius: 14px;
	color: #2c3e50;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(30, 50, 80, 0.18);
}

.lb-sb-title {
	padding: 12px 16px;
	color: #b8860b;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.5px;
	text-align: center;
	border-bottom: 1px solid #e2e8ef;
}

.lb-sb-tabs {
	display: flex;
	gap: 6px;
	padding: 10px 12px 0;
}

.lb-sb-tabs .lb-tab {
	height: 28px;
	font-size: 12px;
	padding: 0 2px;
}

.lb-sb-list {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	padding: 8px 12px;
	touch-action: pan-y;
}

.lb-sb-list .lb-row {
	padding: 6px 8px;
	font-size: 13px;
	gap: 8px;
}

.lb-sb-list .lb-rank {
	width: 30px;
	font-size: 13px;
}

.lb-sb-list .lb-score {
	font-size: 13px;
}

.lb-sb-mine {
	padding: 8px 12px;
	border-top: 1px solid #e2e8ef;
	color: #b8860b;
	font-size: 12px;
	text-align: center;
}

/* Layout mode is chosen by CanvasResize() from the space actually available,
   not from a width breakpoint - a landscape phone is wide but short, and the
   board there needs the same treatment as a narrow one. */

/* column: leaderboard stacks below the board */
:root[data-layout="column"] #container {
	flex-direction: column;
}

:root[data-layout="column"] #container .lb-sidebar {
	width: 100%;
	max-width: none;
	flex: none;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}

/* solo: too little room for both - board only, leaderboard behind the trophy */
:root[data-layout="solo"] #container .lb-sidebar {
	display: none;
}

/* --- Sidebar footer: name + share --- */

/* These two only ever lived in the trophy modal, which a player with the
   leaderboard already on screen has no reason to open - so desktop players
   never named themselves and went onto the board as "Người chơi #XXXX".

   Shown only when CanvasSidebar() in js/canvas.js reports the sidebar came out
   tall enough (data-sb-foot="1"); otherwise the ranking list would be the thing
   getting squeezed, and the trophy button carries these instead. Hidden by
   default so that the frame before the first layout pass shows the button
   alone rather than two name fields at once. */
.lb-sb-foot {
	padding: 8px 12px 10px;
	border-top: 1px solid #e2e8ef;
	display: none;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

:root[data-sb-foot="1"] .lb-sb-foot {
	display: flex;
}

#lb-sb-name {
	flex: 1;
	min-width: 0;
	height: 34px;
	padding: 0 10px;
	border: 1px solid #cdd7e2;
	border-radius: 8px;
	background: #ffffff;
	color: #223142;
	font-size: 14px;
	outline: none;
	-webkit-user-select: text;
	user-select: text;
	-webkit-touch-callout: default;
}

#lb-sb-name:focus {
	border-color: #e0a800;
	box-shadow: 0 0 0 3px rgba(224, 168, 0, 0.18);
}

#lb-sb-name-save {
	height: 34px;
	padding: 0 14px;
	border: none;
	border-radius: 8px;
	background: linear-gradient(180deg, #ffe080, #f0b429);
	color: #5b3d00;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(224, 168, 0, 0.35);
}

/* Icon-only so the whole footer stays one 34px row: a second full-width row
   pushed the footer to 95px, which no portrait sidebar can spare. */
#lb-sb-share {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid #cdd7e2;
	border-radius: 8px;
	background: #ffffff;
	color: #5f7184;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}

#lb-sb-share:active {
	background: #eaf1f8;
	color: #2c3e50;
}

#lb-sb-name-save:active {
	transform: scale(0.97);
}

/* Exactly one place to set a name, never two and never none: the same flag
   that shows the footer hides the trophy, so the two cannot disagree. */
:root[data-sb-foot="1"] #lb-btn {
	display: none;
}

/* The modal carries a ranking only when the sidebar is off screen (solo).
   With the sidebar visible it would be the same tabs and the same rows twice
   over, so the modal drops to what is genuinely only in it: name and share.
   Default-hidden: before the first layout pass the sidebar is the safer bet. */
:root:not([data-layout="solo"]) #lb-tabs,
:root:not([data-layout="solo"]) #lb-list,
:root:not([data-layout="solo"]) #lb-mine {
	display: none;
}