/* Miners World Hub. The look follows the game's UI (StarterGui.Game.Frames): Builder Sans ExtraBold-like text with
   black outlines, dark grey gradient windows with grey borders, checkered top bars, and glossy pill buttons in the
   game's colours (grey, green, red, orange, blue). Layout and behaviour stay like a website. */

/* The game's font, Builder Sans (Roblox's, from Studio's content/fonts, unmodified as its licence asks). The site's
   600 is the game's Medium, 800 and up its ExtraBold (what nearly all of the game's text uses) */
@font-face { font-family: "Builder Sans"; src: url("/mw/static/fonts/BuilderSans-Medium.otf") format("opentype"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Builder Sans"; src: url("/mw/static/fonts/BuilderSans-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Builder Sans"; src: url("/mw/static/fonts/BuilderSans-ExtraBold.otf") format("opentype"); font-weight: 800 900; font-display: swap; }

:root {
	--bg: #141414;
	--bg2: #191919;
	--panel: #262626;
	--panel2: #323232;
	--line: #4b4b4b;
	--line2: #646464;
	--text: #ffffff;
	--muted: #b4b4b4;
	--gold: #ffc779;
	--gold2: #ffd9a3;
	--teal: #64ff64;
	--red: #ff6464;
	--green: #64ff64;
	--blue: #8e8eff;
	--radius: 14px;
	--shadow: 0 10px 30px rgba(0, 0, 0, .5);
	/* the game's black text outline (UIStroke 2, Contextual) */
	--outline: 0 0 0 #000, 1.5px 1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px -1.5px 0 #000, 0 1.8px 0 #000, 0 -1.8px 0 #000, 1.8px 0 0 #000, -1.8px 0 0 #000;
	--outline-thin: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
	/* the game's checker textures */
	--checkers: repeating-conic-gradient(rgba(0, 0, 0, .06) 0 25%, transparent 0 50%) 0 0 / 26px 26px;
	--checkers-soft: repeating-conic-gradient(rgba(255, 255, 255, .025) 0 25%, transparent 0 50%) 0 0 / 50px 50px;
	--window: linear-gradient(180deg, #323232, #191919);
	--item: linear-gradient(0deg, #323232, #4b4b4b);
	color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; }
html { overflow-x: clip; }

body {
	background: var(--checkers-soft), radial-gradient(1200px 600px at 50% -20%, #2b2b2b, transparent 70%), var(--bg);
	color: var(--text);
	font: 600 15px/1.45 "Builder Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

a { color: var(--gold); text-decoration: none; font-weight: 700; }
a:hover { text-decoration: underline; }

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

/* Game-style text: heavy and outlined */
h1, h2, .game-text, .stat .value, .brand, .nav a, .tab, .btn, .chip, .badge, .account-button, .card b, .code-box {
	font-weight: 800;
	text-shadow: var(--outline);
}

/* ------------------------------------------------------------------ header */

.top {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 10px 22px;
	background: var(--checkers), linear-gradient(180deg, #191919, #2d2d2d);
	border-bottom: 2px solid #000;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	font-size: 19px;
	white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand b { color: var(--gold); }

/* The game's Blocks Mined icon (same as the favicon) */
.brand-mark {
	width: 30px;
	height: 30px;
	object-fit: contain;
	flex: none;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}

.nav {
	display: flex;
	gap: 6px;
	flex: 1;
}

.nav a {
	color: var(--text);
	padding: 6px 13px;
	border-radius: 999px;
	border: 2px solid transparent;
}
.nav a:hover { text-decoration: none; background: rgba(255, 255, 255, .06); border-color: var(--line); }
.nav a.active {
	background: var(--checkers), linear-gradient(200deg, #64ff64, #82ff86 50%, #64ff64);
	border-color: #50cc50;
	color: #fff;
}

.account-button {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 13px 5px 6px;
	border: 2px solid #939393;
	border-radius: 999px;
	color: var(--text);
	white-space: nowrap;
	background: var(--checkers), linear-gradient(200deg, #6b6b6b, #8a8a8a 50%, #6b6b6b);
}
.account-button:hover { text-decoration: none; filter: brightness(1.1); }
.account-button img { width: 26px; height: 26px; border-radius: 50%; background: var(--panel2); border: 2px solid #000; }

.menu-button {
	display: none;
	background: var(--item);
	border: 2px solid var(--line2);
	border-radius: 10px;
	padding: 4px 11px;
	cursor: pointer;
	font-weight: 800;
}

@media (max-width: 900px) {
	.top { flex-wrap: wrap; padding: 10px 16px; }
	.menu-button { display: block; margin-left: auto; }
	.account-button { order: 2; }
	.nav { order: 3; flex-basis: 100%; flex-direction: column; display: none; }
	.nav.open { display: flex; }
}

/* ------------------------------------------------------------------ layout */

.app {
	flex: 1;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 26px 22px 60px;
}

@media (max-width: 600px) { .app { padding: 18px 16px 50px; } }

.foot {
	text-align: center;
	color: var(--muted);
	font-size: 13px;
	padding: 18px;
	border-top: 2px solid #000;
	background: linear-gradient(180deg, #1c1c1c, #141414);
}

.loading, .empty {
	color: var(--muted);
	text-align: center;
	padding: 40px 10px;
	font-weight: 700;
}

.error-box {
	color: #fff;
	background: linear-gradient(180deg, rgba(255, 100, 100, .22), rgba(255, 100, 100, .1));
	border: 2px solid #b64747;
	border-radius: var(--radius);
	padding: 12px 14px;
	font-weight: 700;
}

/* a banned player's page (staff only): the ban under the name, like the error box */
.ban-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	color: #fff;
	background: linear-gradient(180deg, rgba(255, 100, 100, .22), rgba(255, 100, 100, .1));
	border: 2px solid #b64747;
	border-radius: var(--radius);
	padding: 12px 14px;
	margin-bottom: 16px;
}
.ban-banner-title { font-size: 18px; font-weight: 800; }
.ban-banner > .stack { flex: 1 1 260px; min-width: 0; }

h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: .01em; }
h2 { font-size: 20px; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 0 0 8px; font-weight: 800; }
.sub { color: var(--muted); margin: 0 0 22px; }

.panel {
	background: var(--window);
	border: 2px solid var(--line);
	border-radius: var(--radius);
	padding: 18px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.panel + .panel { margin-top: 16px; }

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.stack > * + * { margin-top: 14px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.right { margin-left: auto; }
.nowrap { white-space: nowrap; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
/* Grid and stacked columns may shrink below their content: a wide table (the trade audit's partners) made its column,
   and the whole page, wider than a phone's screen instead of scrolling inside its own box */
.grid2 > *, .grid3 > *, .stack > *, .craft-layout > * { min-width: 0; }
.grid2, .grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ controls */

.input, select.input, textarea.input {
	background: #191919;
	border: 2px solid var(--line);
	border-radius: 10px;
	padding: 9px 12px;
	outline: none;
	min-width: 0;
	font-weight: 700;
	color: #fff;
}
.input::placeholder { color: #8a8a8a; }
.input:focus { border-color: #50cc50; box-shadow: 0 0 0 3px rgba(100, 255, 100, .15); }
textarea.input { width: 100%; resize: vertical; min-height: 70px; }
select.input option { background: #262626; }

/* The game's pill buttons: a glossy diagonal gradient, a darker border and the faint checker texture */
.btn {
	--b1: #afafaf;
	--b2: #ffffff;
	--bs: #939393;
	position: relative;
	background: var(--checkers), linear-gradient(200deg, var(--b1), var(--b2) 50%, var(--b1));
	border: 2px solid var(--bs);
	border-radius: 999px;
	padding: 8px 16px;
	color: #fff;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), inset 0 2px 0 rgba(255, 255, 255, .35);
	transition: filter .1s, transform .05s;
}
a.btn { display: inline-block; }
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; filter: grayscale(.5); }
.btn.primary { --b1: #64ff64; --b2: #82ff86; --bs: #50cc50; }
.btn.primary:hover { filter: brightness(1.05); }
.btn.danger { --b1: #ff6464; --b2: #ffa4a4; --bs: #b64747; }
.btn.blue { --b1: #6464ff; --b2: #8e8eff; --bs: #4747b6; }
.btn.orange { --b1: #ff8e3c; --b2: #ffc779; --bs: #ad6029; }
.btn.small { padding: 4px 11px; font-size: 13px; }
/* Quieter buttons (close, remove, secondary links) */
.btn.ghost {
	background: var(--item);
	border-color: var(--line2);
	box-shadow: none;
}
.btn.ghost.danger { color: #ffb0b0; }

.tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.tab {
	background: var(--item);
	border: 2px solid var(--line2);
	border-radius: 999px;
	padding: 6px 15px;
	cursor: pointer;
	color: #fff;
}
.tab:hover { filter: brightness(1.15); text-decoration: none; }
.tab.active {
	background: var(--checkers), linear-gradient(200deg, #64ff64, #82ff86 50%, #64ff64);
	border-color: #50cc50;
}

.toolbar {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 14px;
}
.toolbar .input { flex: 1 1 180px; }
.toolbar select.input { flex: 0 1 auto; }

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: .02em;
	white-space: nowrap;
}

.badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 12px;
	background: var(--item);
	border: 2px solid var(--line2);
	color: #fff;
}
.badge.good { background: linear-gradient(200deg, #3fbf3f, #5fdc63 50%, #3fbf3f); border-color: #2e8f2e; }
.badge.bad { background: linear-gradient(200deg, #e05050, #ff8a8a 50%, #e05050); border-color: #963232; }
.badge.gold { background: linear-gradient(200deg, #ff8e3c, #ffc779 50%, #ff8e3c); border-color: #ad6029; }

/* ------------------------------------------------------------------ home */

.hero {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 24px;
	align-items: center;
	padding: 28px;
	border-radius: 18px;
	border: 2px solid var(--line);
	background: var(--checkers-soft), linear-gradient(180deg, #303030, #191919);
	box-shadow: var(--shadow);
	margin-bottom: 22px;
}
.hero h1 { font-size: 36px; }
.hero h1 span { color: var(--gold); }
.hero-ores {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
}
.hero-ores i {
	aspect-ratio: 1;
	border-radius: 8px;
	border: 2px solid #000;
	box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .25), inset 4px 4px 0 rgba(255, 255, 255, .25);
}
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .hero-ores { display: none; } }

.search-big { display: flex; gap: 10px; margin-top: 18px; }
.search-big .input { flex: 1; font-size: 16px; padding: 12px 14px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.card {
	display: block;
	background: var(--item);
	border: 2px solid var(--line2);
	border-radius: var(--radius);
	padding: 16px;
	color: var(--text);
	transition: transform .12s, border-color .12s;
}
.card:hover { transform: translateY(-2px); border-color: #50cc50; text-decoration: none; }
.card b { display: block; font-size: 17px; margin-bottom: 4px; }
.card span { color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------------ blocks */

.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
	gap: 10px;
}

/* Like the game's list buttons (Crafting > Accessory): grey gradient, the border in the item's rarity colour (--rc) so
   rarities can be told apart at a glance, also with poor eyesight (user request) */
.tile {
	position: relative;
	display: flex;
	gap: 10px;
	align-items: center;
	background: var(--item);
	border: 3px solid var(--rc, var(--line2));
	box-shadow: inset 0 0 10px -4px var(--rc, transparent);
	border-radius: 12px;
	padding: 7px 9px;
	cursor: pointer;
	text-align: left;
	min-width: 0;
	color: #fff;
	transition: transform .12s ease, border-color .12s ease, filter .12s ease;
}
.tile:hover { filter: brightness(1.15); transform: translateY(-1px); }
.tile:active { transform: translateY(0); }
.rarity-text { color: var(--rc, var(--muted)); font-weight: 800; text-shadow: var(--outline-thin); }
.tile .cube { flex: none; }
.tile .info { min-width: 0; }
.tile .name { font-weight: 800; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: var(--outline-thin); }
.tile .meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .amount { font-weight: 800; color: var(--text); }
.tile.missing { opacity: .55; }

/* The Blocks page: one section per layer */
.layer-group + .layer-group { margin-top: 22px; }
.layer-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	margin-bottom: 10px;
	border-radius: 12px;
	border: 2px solid #000;
	background: var(--checkers), linear-gradient(180deg, #191919, #2d2d2d);
}
.layer-head h3 { margin: 0; font-size: 18px; text-shadow: var(--outline); }

.cube {
	width: 34px;
	height: 34px;
	border-radius: 7px;
	background: var(--cc, #555);
	border: 2px solid #000;
	box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .28), inset 5px 5px 0 -2px rgba(255, 255, 255, .2);
	position: relative;
	overflow: hidden;
}
.cube::after {
	content: "";
	position: absolute;
	inset: 25% 25%;
	border-radius: 3px;
	background: var(--oc, transparent);
	box-shadow: 0 0 10px var(--oc, transparent);
}
.cube.big { width: 72px; height: 72px; border-radius: 12px; border-width: 3px; }
/* A rarity point (gauntlet recipes): a gem in the rarity's colour */
.points-gem {
	width: 30px;
	height: 30px;
	margin: 2px;
	transform: rotate(45deg) scale(.85);
	border-radius: 6px;
	background: linear-gradient(135deg, rgba(255, 255, 255, .55), transparent 55%), var(--pc, #888);
	border: 2px solid #000;
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3), 0 0 10px var(--pc, transparent);
}
/* The game's logo on the home page */
.hero-logo {
	width: 100%;
	max-width: 440px;
	/* Its own aspect ratio: the grid row stretched it to the hero's height (squashed) */
	height: auto;
	align-self: center;
	object-fit: contain;
	justify-self: center;
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6));
}
@media (max-width: 860px) { .hero-logo { max-width: 300px; order: -1; } }
/* Country flags (flagcdn.com) */
.flag {
	width: 24px;
	height: 18px;
	border-radius: 3px;
	border: 1px solid #000;
	vertical-align: -3px;
	margin-right: 8px;
	object-fit: cover;
}
/* A flag on the right of a name (the header, a profile) */
.flag.name-flag { margin-right: 0; margin-left: 8px; }
h1 .flag.name-flag { width: 32px; height: 24px; vertical-align: 0; }
/* Countries: a row opens to its best players */
tr.country-row { cursor: pointer; }
tr.country-row:hover td { background: rgba(255, 255, 255, .04); }
.country-arrow { display: inline-block; width: 14px; margin-right: 6px; color: #9aa4b2; transition: transform .15s; }
.country-arrow.open { transform: rotate(90deg); }
tr.country-player td { background: rgba(255, 255, 255, .025); font-size: .95em; }
tr.country-player td:nth-child(2) { padding-left: 42px; }
/* An expanded partner in the trade audit */
tr.partner-open td { background: rgba(100, 255, 100, .08); }
.partner-trades td { background: transparent !important; border: none !important; padding: 0 6px 10px !important; }
.partner-trade {
	display: grid;
	grid-template-columns: 90px 1fr 24px 1fr;
	gap: 8px;
	align-items: start;
	padding: 8px 0;
	border-top: 1px solid rgba(255, 255, 255, .06);
}
.partner-trade:first-child { border-top: none; }
.partner-trade .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 700px) { .partner-trade { grid-template-columns: 1fr; } }
/* The game's block renders (transparent webp) */
.cube-img {
	width: 34px;
	height: 34px;
	object-fit: contain;
	flex: none;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55));
	user-select: none;
}
.cube-img.big { width: 72px; height: 72px; }
.tile .cube-img { width: 38px; height: 38px; margin: -2px 0; }
/* blocks with no icon at all (the invisible Barrier): the space only */
.cube-none { width: 34px; height: 34px; flex: none; }
.cube-none.big { width: 72px; height: 72px; }
.tile .cube-none { width: 38px; height: 38px; margin: -2px 0; }

.table-wrap { overflow-x: auto; }
/* Shop prices: the Emerald icon and the amount */
.price { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: #64ff64; white-space: nowrap; text-shadow: var(--outline-thin); }
.price img { flex: none; }
.price.big { font-size: 20px; }
.price .per { color: var(--muted); font-weight: 700; font-size: .9em; margin-left: 2px; }
/* the cart: its lines, the order text to copy */
.cart-line { gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); flex-wrap: nowrap; }
.cart-line .grow { min-width: 0; }
.order-text { margin: 10px 0; padding: 10px 12px; background: #101010; border: 2px solid var(--line); border-radius: 10px; font: 600 13px/1.5 Consolas, "Cascadia Mono", monospace;
	white-space: pre-wrap; overflow-wrap: anywhere; }
.in-cart { color: var(--gold); margin-left: 6px; }
.price-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.price-form .input { width: 100%; }
@media (max-width: 520px) { .cart-line { flex-wrap: wrap; } }
/* a tile's "price · has N" line, centred on one height */
.price-line { display: inline-flex; align-items: center; gap: 4px; line-height: 1.2; vertical-align: middle; }
.bad-text { color: var(--red); }
.form-label { font-size: 13px; color: var(--muted); font-weight: 800; }
.price-form .form-label { display: grid; gap: 4px; }
table.list {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 4px;
	font-size: 14px;
}
table.list th {
	text-align: left;
	color: var(--muted);
	font-weight: 800;
	font-size: 13px;
	padding: 6px 10px;
	white-space: nowrap;
}
/* Rows look like the game's list entries */
table.list td {
	padding: 8px 10px;
	vertical-align: middle;
	background: rgba(255, 255, 255, .035);
	border-top: 1px solid rgba(255, 255, 255, .05);
	border-bottom: 1px solid rgba(0, 0, 0, .35);
}
table.list td:first-child { border-radius: 10px 0 0 10px; }
table.list td:last-child { border-radius: 0 10px 10px 0; }
table.list tr.click { cursor: pointer; }
table.list tr.click:hover td { background: rgba(255, 255, 255, .09); }
table.list td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 800; }
table.list th.num { text-align: right; }

.rank-num { color: var(--muted); font-weight: 800; width: 40px; }
.rank-1 { color: #ffd34d; text-shadow: var(--outline-thin); }
.rank-2 { color: #e6ebf2; text-shadow: var(--outline-thin); }
.rank-3 { color: #ff9f5a; text-shadow: var(--outline-thin); }

.user {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	color: var(--text);
}
.user img, .user .avatar-blank {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--panel2);
	border: 2px solid #000;
	flex: none;
}
.user .names { min-width: 0; line-height: 1.2; }
.user .display { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: var(--outline-thin); }
.user .handle { font-size: 12px; color: var(--muted); font-weight: 600; }
a.user:hover { text-decoration: none; }
a.user:hover .display { color: var(--gold); }

/* ------------------------------------------------------------------ profile header */

.profile-head {
	display: flex;
	gap: 18px;
	align-items: center;
	flex-wrap: wrap;
}
.profile-head img.avatar {
	width: 96px;
	height: 96px;
	border-radius: 18px;
	background: var(--window);
	border: 3px solid #000;
	box-shadow: 0 0 0 2px var(--line);
}
.profile-head h1 { margin: 0; }

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 12px;
	margin: 18px 0;
}
.stat {
	background: var(--window);
	border: 2px solid var(--line);
	border-radius: var(--radius);
	padding: 12px 14px;
}
.stat .label { color: var(--muted); font-size: 13px; font-weight: 800; }
.stat .value { font-size: 22px; margin-top: 2px; }

.saved-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.saved-list a {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	background: var(--item);
	border: 2px solid var(--line2);
	border-radius: 999px;
	padding: 3px 12px 3px 3px;
	color: var(--text);
	font-size: 13px;
}
.saved-list a img { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #000; }

/* ------------------------------------------------------------------ crafts */

.craft-layout { display: grid; grid-template-columns: 300px 1fr; gap: 18px; }
@media (max-width: 900px) { .craft-layout { grid-template-columns: 1fr; } }

.craft-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: calc(100vh - 170px);
	overflow-y: auto;
	position: sticky;
	top: 80px;
	padding: 10px;
	background: var(--window);
	border: 2px solid var(--line);
	border-radius: var(--radius);
}
@media (max-width: 900px) { .craft-list { position: static; max-height: 320px; } }

.craft-item {
	display: flex;
	gap: 10px;
	align-items: center;
	background: var(--item);
	border: 2px solid var(--line2);
	border-radius: 12px;
	padding: 7px 10px;
	cursor: pointer;
	text-align: left;
	color: #fff;
}
.craft-item:hover { filter: brightness(1.15); text-decoration: none; }
.craft-item.active { border-color: #50cc50; box-shadow: 0 0 0 2px rgba(100, 255, 100, .25); }
.craft-item img, .craft-icon-blank { width: 38px; height: 38px; object-fit: contain; flex: none; border-radius: 8px; }
.craft-icon-blank { background: #191919; }
.craft-item .group { font-size: 12px; color: var(--muted); font-weight: 700; }

.level {
	background: var(--window);
	border: 2px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: 14px;
	overflow: hidden;
}
.level-head {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 2px solid #000;
	flex-wrap: wrap;
	background: var(--checkers), linear-gradient(180deg, #191919, #2d2d2d);
}
.level-head h3 { margin: 0; font-size: 17px; text-shadow: var(--outline); }
.level-num { color: var(--muted); font-weight: 800; font-size: 13px; }
.level-body { padding: 14px 16px; }
.level-desc { color: var(--muted); margin: 0 0 12px; }

.req {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 8px 0;
	border-top: 1px solid rgba(255, 255, 255, .06);
	cursor: pointer;
}
.req:first-child { border-top: none; }
.req .need { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 800; }
/* Bars like the game's progress bars: dark track, bright fill, black border */
.bar {
	height: 9px;
	background: #111;
	border: 2px solid #000;
	border-radius: 99px;
	overflow: hidden;
	margin-top: 5px;
}
.bar i { display: block; height: 100%; background: linear-gradient(180deg, #a6ffa6, #46d046); border-radius: 99px; }
.bar.done i { background: linear-gradient(180deg, #a6ffa6, #2fbf2f); }

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

/* ------------------------------------------------------------------ market */

.post {
	background: var(--window);
	border: 2px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 16px;
	margin-bottom: 12px;
}
.post-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.trade {
	display: grid;
	grid-template-columns: 1fr 40px 1fr;
	gap: 10px;
	align-items: start;
}
.trade .side h4 {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--muted);
	font-weight: 800;
}
.trade .arrow { align-self: center; text-align: center; color: var(--gold); font-size: 24px; font-weight: 800; text-shadow: var(--outline); }
.trade .tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (max-width: 700px) {
	.trade { grid-template-columns: 1fr; }
	.trade .arrow { transform: rotate(90deg); }
}
.post-note { margin: 12px 0 0; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.post-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

.item-editor { display: flex; flex-direction: column; gap: 8px; }
.item-row {
	display: grid;
	grid-template-columns: 1fr 130px 34px;
	gap: 8px;
	align-items: center;
}
.item-row .tile { cursor: default; }

.rep { font-weight: 800; text-shadow: var(--outline-thin); }
.rep .p { color: var(--green); }
.rep .m { color: var(--red); }

.review {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 10px 0;
}
.review:first-child { border-top: none; }

/* ------------------------------------------------------------------ modal / toast */

.modal {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: rgba(0, 0, 0, .7);
	display: flex;
	justify-content: center;
	padding: 40px 16px;
	overflow-y: auto;
	animation: fade-in .15s ease;
}
.modal[hidden] { display: none; }
/* centred, and a tall one still scrolls from its top */
.modal > .dialog { margin: auto 0; animation: dialog-in .18s cubic-bezier(.2, .8, .3, 1); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
/* Windows like the game's menus: checkered title strip at the top */
.dialog {
	width: 100%;
	max-width: 620px;
	background: linear-gradient(180deg, #191919, #303030 30%, #323232);
	border: 3px solid #000;
	box-shadow: 0 0 0 2px var(--line), var(--shadow);
	border-radius: 18px;
	padding: 20px;
	position: relative;
}
.dialog::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 64px;
	border-radius: 15px 15px 0 0;
	background: var(--checkers);
	-webkit-mask: linear-gradient(180deg, #000, transparent);
	mask: linear-gradient(180deg, #000, transparent);
	pointer-events: none;
}
.dialog > * { position: relative; }
/* The game's red close button */
.dialog .close {
	position: absolute;
	top: 12px;
	right: 12px;
	/* Above the dialog's content (also positioned, and later in the page: it covered the button) */
	z-index: 3;
	--b1: #ff6464;
	--b2: #ffa4a4;
	--bs: #b64747;
	background: var(--checkers), linear-gradient(200deg, var(--b1), var(--b2) 50%, var(--b1));
	border-color: var(--bs);
	text-shadow: 1.5px 1.5px 0 #963232, -1.5px 1.5px 0 #963232, 1.5px -1.5px 0 #963232, -1.5px -1.5px 0 #963232;
}
.picker-results {
	max-height: 50vh;
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 8px;
	margin-top: 12px;
}

.toast {
	position: fixed;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 60;
	background: linear-gradient(180deg, #323232, #191919);
	border: 2px solid #50cc50;
	border-radius: 999px;
	padding: 10px 18px;
	box-shadow: var(--shadow);
	max-width: calc(100% - 32px);
	font-weight: 800;
	text-shadow: var(--outline-thin);
}
.toast.bad { border-color: #b64747; color: #ffb0b0; }
.toast[hidden] { display: none; }

.code-box {
	font: 800 30px/1 Consolas, "Cascadia Mono", monospace;
	letter-spacing: .14em;
	background: var(--checkers), #191919;
	border: 3px dashed #50cc50;
	color: #82ff86;
	border-radius: 14px;
	padding: 16px;
	text-align: center;
	user-select: all;
}
.command {
	font: 700 15px Consolas, "Cascadia Mono", monospace;
	background: #191919;
	border: 2px solid var(--line);
	border-radius: 10px;
	padding: 8px 12px;
	user-select: all;
	overflow-wrap: anywhere;
}

.form { display: flex; flex-direction: column; gap: 10px; }
.form label { font-size: 13px; color: var(--muted); font-weight: 800; }
.form .input { width: 100%; }

.pager { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 16px; }

/* Chat logs (/chatlogs, staff) */
.mono { font-family: Consolas, "Cascadia Mono", monospace; }
.chat-filters .toolbar + .toolbar { margin-top: 10px; }
.chat-filters .toolbar { margin-bottom: 0; }
/* the filters, the tabs and the list each their own block (they touched) */
.chat-filters { margin-bottom: 20px; }
.chat-log {
	background: #191919;
	border: 2px solid var(--line);
	border-radius: 10px;
	padding: 6px 0;
	max-height: 70vh;
	overflow-y: auto;
}
.chat-line {
	display: grid;
	grid-template-columns: 170px minmax(110px, auto) 1fr;
	gap: 10px;
	padding: 4px 12px;
	align-items: baseline;
	font-weight: 700;
}
.chat-line:nth-child(even) { background: rgba(255, 255, 255, .03); }
.chat-line:hover { background: rgba(255, 255, 255, .07); }
.chat-line.pm { background: rgba(142, 142, 255, .08); }
.chat-time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chat-who { white-space: nowrap; text-shadow: var(--outline-thin); }
.chat-who a { text-decoration: none; }
.chat-who a:hover { text-decoration: underline; }
.chat-text { overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-text mark { background: var(--gold); color: #000; border-radius: 4px; padding: 0 2px; }
table.list tr.visited td { opacity: .65; }
.spinner {
	width: 16px; height: 16px;
	border: 3px solid var(--line); border-top-color: var(--gold);
	border-radius: 50%;
	animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
	.chat-line { grid-template-columns: 1fr; gap: 2px; padding: 6px 10px; }
	.chat-who { white-space: normal; }
}

/* Admin > AB Tests */
.ab-bar { height: 14px; border-radius: 7px; background: #191919; border: 2px solid var(--line); overflow: hidden; }
.ab-bar > div { height: 100%; background: linear-gradient(90deg, #3fbf3f, #64ff64); transition: width .4s; }
.ab-table td.num, .ab-table th.num { min-width: 90px; }
.ab-table td.ab-best { color: var(--green); }
.ab-table td.ab-worst { color: var(--red); }
.ab-details { margin-top: 12px; }
.ab-details > summary { cursor: pointer; font-weight: 800; padding: 6px 0; }
/* AB test calculator: significance against the control (green better, red worse), a cell's second line, planning */
.ab-table td small, .ab-table th small { display: block; font-size: 11px; font-weight: 600; opacity: .85; white-space: nowrap; }
.ab-table td.ab-sig-up, td.ab-sig-up, .ab-sig-up { color: var(--green); }
.ab-table td.ab-sig-down, td.ab-sig-down, .ab-sig-down { color: var(--red); }
.ab-table td.ab-sig-none small { color: var(--muted); }
.ab-settings { margin-bottom: 14px; }
.ab-settings label { display: flex; align-items: center; gap: 6px; }
.ab-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 14px 0; }
.ab-srm { font-weight: 800; }
.ab-conclude { margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--line); }
.good-text { color: var(--green); }

/* Shop: crafts in the cart (blocks of a set to keep or leave out) */
.cart-craft { border-bottom: 1px solid rgba(255, 255, 255, .06); padding-bottom: 6px; }
.craft-details > summary { cursor: pointer; color: var(--muted); padding: 4px 0 4px 44px; }
.craft-contents { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 6px 44px; }
.craft-block { gap: 8px; flex-wrap: nowrap; cursor: pointer; }
.craft-block.left-out { opacity: .5; }
.craft-block .cube-img, .craft-block .cube { width: 24px; height: 24px; }
.small-input { width: 90px; padding: 4px 8px; font-size: 13px; text-align: right; }
@media (max-width: 700px) {
	.craft-details > summary, .craft-contents { padding-left: 0; }
	.craft-block { flex-wrap: wrap; }
}

/* Dropdowns (app.js enhanceSelect): the site's own button and list over the hidden native select */
.dropdown { position: relative; display: inline-flex; min-width: 0; }
.toolbar .dropdown { flex: 0 1 auto; }
.dropdown-native { position: absolute; inset: 0; opacity: 0; pointer-events: none; width: 100%; }
.dropdown-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-width: 0;
	background: #191919;
	border: 2px solid var(--line);
	border-radius: 10px;
	padding: 9px 12px;
	font-weight: 800;
	color: #fff;
	cursor: pointer;
	text-align: left;
	text-shadow: var(--outline-thin);
	transition: border-color .12s ease, background .12s ease;
}
.dropdown-button:hover { border-color: var(--line2); background: #1f1f1f; }
.dropdown-button:focus-visible, .dropdown-button[aria-expanded="true"] { outline: none; border-color: #50cc50; box-shadow: 0 0 0 3px rgba(100, 255, 100, .15); }
.dropdown-button:disabled { opacity: .5; cursor: default; }
.dropdown-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-arrow {
	flex: none;
	width: 8px;
	height: 8px;
	border-right: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	color: var(--muted);
	transform: translateY(-2px) rotate(45deg);
	transition: transform .15s ease;
}
.dropdown-button[aria-expanded="true"] .dropdown-arrow { transform: translateY(2px) rotate(-135deg); }
.dropdown-list {
	position: fixed;
	z-index: 80;
	display: flex;
	flex-direction: column;
	min-width: 180px;
	max-width: calc(100vw - 16px);
	padding: 6px;
	background: linear-gradient(180deg, #2a2a2a, #1d1d1d);
	border: 2px solid #000;
	box-shadow: 0 0 0 2px var(--line), var(--shadow);
	border-radius: 12px;
	outline: none;
	animation: dropdown-in .12s ease;
}
@keyframes dropdown-in { from { opacity: 0; transform: translateY(-4px); } }
.dropdown-filter { margin-bottom: 6px; padding: 7px 10px; font-size: 14px; }
/* iOS zooms the page into any focused text box under 16px */
@media (pointer: coarse) { input, select, textarea, .dropdown-filter { font-size: 16px; } }
.dropdown-items { overflow-y: auto; min-height: 0; }
.dropdown-item {
	padding: 7px 10px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 800;
	white-space: nowrap;
	text-shadow: var(--outline-thin);
}
.dropdown-item.active { background: rgba(255, 255, 255, .08); }
.dropdown-item.selected { background: rgba(100, 255, 100, .14); }
.dropdown-item.selected.active { background: rgba(100, 255, 100, .2); }
.dropdown-empty { padding: 8px 10px; color: var(--muted); }

/* Gentle movement: pages fade in, panels and cards ease */
.app > div:not(.loading) { animation: page-in .2s ease; }
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } }
.panel, .card, .craft-item, .tab, .nav a { transition: border-color .15s ease, filter .15s ease, transform .15s ease, background .15s ease; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Admin: open reports */
.report-card {
	background: var(--item);
	border: 2px solid var(--line2);
	border-radius: 12px;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.report-card + .report-card { margin-top: 10px; }
.report-head { gap: 10px; }
.report-reason {
	background: #191919;
	border: 2px solid var(--line);
	border-radius: 10px;
	padding: 9px 12px;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}
.report-from { gap: 8px; }
.report-from .user img, .report-from .user .avatar-blank { width: 24px; height: 24px; }
.report-actions { justify-content: flex-end; gap: 8px; }