/* =====================================================================
   FINN-CLASSIC · SHARED PAGE COMPONENTS
   ---------------------------------------------------------------------
   These classes are consumed by the existing sub-pages:
     download.php · rule.php · donate.php · server-info.php
   They are re-expressed in the new design tokens so those pages keep
   working (and inherit the new theme) without their markup changing.

   Do not delete a selector here without grepping the sub-pages first.
   ===================================================================== */

/* ---------- Section shell -------------------------------------------- */
.section{
	position:relative;
	padding:var(--space-section) 0;
}
/* Sub-pages set padding-top:calc(var(--nav-h) + 80px) inline — --nav-h
   is defined in fc-tokens.css, so that inline style still resolves. */

.section-title{
	font-family:var(--font-display);
	font-size:var(--t-section);
	color:var(--color-text-primary);
	margin:0;
}
.section-title:lang(th){ font-family:var(--font-body); letter-spacing:0; }
.section-subtitle{
	color:var(--color-text-secondary);
	max-width:64ch;
	margin:var(--space-3) 0 0;
}

/* ---------- Breadcrumbs ---------------------------------------------- */
.crumbs{
	display:flex; align-items:center; flex-wrap:wrap;
	gap:var(--space-2);
	margin-bottom:var(--space-5);
	font-size:var(--t-small);
	color:var(--color-text-secondary);
}
.crumbs a{
	color:var(--color-blue);                    /* 6.68:1 */
	text-decoration:none;
	min-height:44px;
	display:inline-flex; align-items:center; gap:6px;
}
.crumbs a:hover{ text-decoration:underline; }
.crumbs .sep{ color:var(--color-text-secondary); opacity:.6; }
.crumbs .current{ color:var(--color-text-primary); font-weight:600; }

/* ---------- Panel — the main content surface on sub-pages ------------- */
.panel{
	position:relative;
	background:var(--color-surface);
	border-radius:var(--radius-large);
	box-shadow:var(--shadow-card);
	padding:var(--space-7);
	margin-bottom:var(--space-7);
}
.panel-head{
	display:flex; align-items:center; flex-wrap:wrap;
	gap:var(--space-4);
	padding-bottom:var(--space-5);
	margin-bottom:var(--space-6);
	border-bottom:1px solid var(--color-border);   /* 4.34:1 — perceivable */
}
.panel-head h2{
	font-size:var(--t-tile);
	color:var(--color-text-primary);
	margin:0;
}
.panel-head p{
	margin:6px 0 0;
	color:var(--color-text-secondary);
	font-size:var(--t-small);
}
/* The panel icon medallion */
.panel-head .pi{
	display:grid; place-items:center;
	width:52px; height:52px; flex:none;
	background:var(--color-navy-900);
	color:var(--color-gold);                       /* 9.07:1 — on navy, legal */
	border-radius:var(--radius-medium);
	font-size:20px;
}
.panel-meta{
	margin-left:auto;
	display:flex; align-items:center; gap:var(--space-3);
	font-size:var(--t-small);
	color:var(--color-text-secondary);
}
.panel-meta a{ color:var(--color-blue); }

/* ---------- Info box — rules, descriptions, reward lists --------------- */
.info-box{
	background:var(--color-bg-primary);
	border-radius:var(--radius-medium);
	border-left:4px solid var(--color-gold-ink);   /* 5.49:1 — LAW 1 on light */
	padding:var(--space-5) var(--space-6);
	margin-bottom:var(--space-5);
}
.info-box h3{
	display:flex; align-items:center; flex-wrap:wrap;
	gap:var(--space-3);
	font-size:var(--t-tile);
	color:var(--color-text-primary);
	margin:0 0 var(--space-4);
}
.info-box h3 small{
	font-size:var(--t-small);
	font-weight:500;
	color:var(--color-text-secondary);
	font-family:var(--font-body);
	letter-spacing:0;
}
.info-box ul{ margin:0; padding-left:1.25em; }
.info-box li{
	margin-bottom:var(--space-3);
	color:var(--color-text-primary);
}
.info-box li:last-child{ margin-bottom:0; }

/* Tone variants used by rule.php / donate.php */
.info-box.green{ border-left-color:var(--color-success); }   /* 4.95:1 */
.info-box.gold { border-left-color:var(--color-gold-ink); }
.info-box.info { border-left-color:var(--color-blue); }

/* ---------- Notice strip ---------------------------------------------- */
.notice{
	display:flex; align-items:flex-start; gap:var(--space-3);
	background:var(--color-bg-secondary);
	border-left:4px solid var(--color-ember);      /* 5.05:1 */
	border-radius:var(--radius-medium);
	padding:var(--space-5);
	color:var(--color-text-primary);
}
.notice i{ color:var(--color-ember); margin-top:4px; }

/* ---------- Download table -------------------------------------------- */
.dl-table{
	width:100%;
	border-collapse:collapse;
	font-size:var(--t-body);
}
.dl-table th,
.dl-table td{
	padding:var(--space-4);
	text-align:left;
	vertical-align:middle;
	border-bottom:1px solid var(--color-border);   /* 4.34:1 */
}
.dl-table th{
	font-size:var(--t-small);
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.08em;
	color:var(--color-gold-ink);                   /* 5.81:1 on surface */
	background:var(--color-bg-primary);
	white-space:nowrap;
}
.dl-table th:lang(th){ text-transform:none; letter-spacing:0; }
.dl-table tbody tr{ transition:background var(--dur-fast) var(--ease-press); }
.dl-table tbody tr:hover{ background:var(--color-surface-hover); }
.dl-table td{ color:var(--color-text-primary); }

.dl-type-icon{
	display:inline-grid; place-items:center;
	width:40px; height:40px;
	background:var(--color-navy-900);
	color:var(--color-gold);
	border-radius:var(--radius-small);
	font-size:16px;
}
.dl-btn{
	display:inline-flex; align-items:center; justify-content:center;
	gap:8px;
	min-height:44px;
	padding:0 var(--space-5);
	background:var(--color-blue);
	color:var(--color-text-on-dark-max);           /* 7.20:1 */
	border:2px solid var(--color-blue-deep);
	border-radius:var(--radius-medium);
	font-weight:600;
	font-size:var(--t-small);
	text-decoration:none;
	white-space:nowrap;
	transition:transform var(--dur-fast) var(--ease-press);
}
.dl-btn:hover{ transform:translateY(-2px); color:var(--color-text-on-dark-max); }

/* Responsive table: becomes a stacked list so it can never overflow.
   The breakpoint is 1023px, not 767px: the table's min-content width is ~726px
   and the panel's padding + page gutter eat ~120px, so a real table still
   overflowed a 768px viewport by 28px. It only fits from ~1024px up. */
@media (max-width:1023px){
	.dl-table thead{
		position:absolute; width:1px; height:1px;
		overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
	}
	.dl-table,
	.dl-table tbody,
	.dl-table tr,
	.dl-table td{ display:block; width:100%; }
	.dl-table tr{
		margin-bottom:var(--space-5);
		padding:var(--space-4);
		background:var(--color-bg-primary);
		border-radius:var(--radius-medium);
	}
	.dl-table td{
		border-bottom:0;
		padding:var(--space-2) 0;
	}
	.dl-btn{ width:100%; }
}

/* ---------- Tags & pills ----------------------------------------------- */
.tags{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.tag,
.pill{
	display:inline-flex; align-items:center; gap:6px;
	padding:6px 12px;
	border-radius:999px;
	font-size:var(--t-small);
	font-weight:600;
	background:var(--color-bg-secondary);
	color:var(--color-text-primary);               /* 14.36:1 */
}
.tag.gold,
.pill.gold{
	background:rgba(138,90,18,.12);
	color:var(--color-gold-ink);                   /* 5.49:1 */
}
.tag.green,
.pill.green{
	background:rgba(30,122,72,.12);
	color:var(--color-success);                    /* 4.95:1 */
}
.tag.new,
.pill.new,
.tag.featured,
.pill.featured{
	background:rgba(196,52,31,.10);
	color:var(--color-ember);                      /* 5.05:1 */
}
.tag.info,
.pill.info{
	background:rgba(27,79,191,.10);
	color:var(--color-blue);                       /* 6.68:1 */
}
.tag.mobile,
.pill.mobile{
	background:var(--color-navy-900);
	color:var(--color-gold);                       /* 9.07:1 — on navy */
}

/* Coin strip — the little item-sprite badges */
.coin-strip{
	display:inline-flex; align-items:center; gap:8px;
	padding:6px 14px;
	border-radius:999px;
	background:var(--color-navy-900);
	color:var(--color-text-on-dark);               /* 14.30:1 */
	font-size:var(--t-small);
	font-weight:600;
}
.coin-strip img{ width:18px; height:18px; image-rendering:pixelated; }

/* Pixel tag — the section eyebrow used on sub-pages */
.pixel-tag{
	display:inline-flex; align-items:center; gap:8px;
	padding:6px 14px;
	border-radius:999px;
	background:var(--color-bg-secondary);
	color:var(--color-gold-ink);                   /* 4.95:1 on parchment */
	font-size:var(--t-small);
	font-weight:600;
}
.pixel-tag img{ image-rendering:pixelated; }

/* ---------- Stat strip (server-info.php) -------------------------------- */
.hero-stats{
	display:flex; flex-wrap:wrap;
	gap:var(--space-5);
	background:var(--color-navy-900);
	border-radius:var(--radius-large);
	padding:var(--space-6);
}
.hero-stats .stat{ flex:1 1 160px; min-width:0; }
.stat-value{
	font-family:var(--font-display);
	font-size:var(--t-stat);
	font-weight:700;
	line-height:var(--lh-display);
	color:var(--color-gold);                       /* 9.07:1 — on navy */
	font-variant-numeric:tabular-nums;
}
.stat-value:lang(th){ font-family:var(--font-body); }
.stat-label{
	font-size:var(--t-small);
	color:var(--color-text-on-dark-dim);           /* 8.56:1 */
	margin-top:var(--space-1);
}

/* ---------- Monster parade (server-info.php / legacy) -------------------- */
.mob-parade{
	display:grid;
	/* min() lets the track collapse below its floor on very narrow screens.
	   A bare minmax(150px,1fr) cannot shrink past 150px and forces overflow. */
	grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));
	gap:var(--space-4);
}
.mob-card{
	display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
	padding:var(--space-5) var(--space-3);
	background:var(--color-surface);
	border-radius:var(--radius-large);
	box-shadow:var(--shadow-card);
	transition:transform var(--dur-fast) var(--ease-press),
	           box-shadow var(--dur-fast) var(--ease-press);
}
.mob-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.mob-card .sprite{ display:grid; place-items:center; min-height:72px; }
.mob-card .sprite img{ image-rendering:pixelated; }
.mob-card .name{
	font-weight:600;
	color:var(--color-text-primary);               /* 16.88:1 */
	text-align:center;
	font-size:var(--t-small);
}
.mob-card .rarity{
	font-size:var(--t-small);
	font-weight:700;
	letter-spacing:.08em;
	color:var(--color-gold-ink);                   /* 5.81:1 on surface */
}
.mob-card.rare .rarity{ color:var(--color-blue); }

/* ---------- Feature grid (legacy) ---------------------------------------- */
.feature-grid{
	display:grid;
	/* min(280px,100%) — without it the 280px floor plus the panel padding and the
	   page gutter exceeds a 320px viewport and pushes the page sideways. */
	grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
	gap:20px;
}
.feature{
	padding:var(--space-6);
	background:var(--color-surface);
	border-radius:var(--radius-large);
	box-shadow:var(--shadow-card);
	transition:transform var(--dur-fast) var(--ease-press),
	           box-shadow var(--dur-fast) var(--ease-press);
}
.feature:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.feature h3{
	font-size:var(--t-tile);
	color:var(--color-text-primary);
	margin:var(--space-4) 0 var(--space-3);
}
.feature p{ color:var(--color-text-secondary); margin:0; }
.feature-icon-ro{
	display:grid; place-items:center;
	width:56px; height:56px;
	background:var(--color-bg-secondary);
	border-radius:var(--radius-medium);
}
.feature-icon-ro img{ image-rendering:pixelated; }

/* ---------- Utilities ---------------------------------------------------- */
.mt-8{ margin-top:var(--space-8); }

@media (max-width:767px){
	.hide-sm{ display:none !important; }
	/* 40px of panel padding on each side is a lot of a 320px screen. */
	.panel{ padding:var(--space-5); }
	.info-box{ padding:var(--space-4); }
	.panel-meta{ margin-left:0; }
}