/* ============================================================
   Public games browser (/services/game_servers/) — Panel V2 render.
   Scoped: body.pv2games — the classic page is untouched.

   THIS SHEET IS THE THIN PART. The grid, the tiles and the corner sash all
   come from css/sspanel/panel-v2-neworder.css, which the template links
   alongside this one: that is the panel's ?neworder picker itself, not a copy
   of it, and its selectors carry a body.pubv2 arm so the same file dresses
   both surfaces. Everything here is only what a PUBLIC page has to add:

     1. the handful of panel-v2-core primitives the picker leans on
        (.pv2-input / .pv2-search / .pv2-empty). panel-v2-core.css is not
        enqueued outside the panels, so those three come across verbatim.
     2. the two links a public tile carries that a panel tile does not — the
        whole-tile game-page link and the Order button in the price row.
     3. page-level spacing.

   Design contract: CLAUDE-DESIGN-SYSTEM.md + public-v2-core.css.
   ============================================================ */

/* ---------- tokens ----------
   public-v2-core.css declares these on body.pubv2, which is added by a script
   in header.tpl. Re-declaring them on the server-rendered route class means
   the grid is never briefly unpainted, and it is the same pattern about-v2.css
   already uses. Values mirror public-v2-core.css exactly — one palette. */
body.pv2games {
	--pv2-surface: #1a1a1b;
	--pv2-panel: #212122;
	--pv2-raised: #252526;
	--pv2-field: #2d2d2e;
	--pv2-hover: #333333;
	--pv2-border: #3a3a3b;
	--pv2-border-strong: #4c4c4d;
	--pv2-line: #2c2c2d;
	--pv2-text: #ffffff;
	--pv2-text-soft: #cccccc;
	--pv2-text-muted: #999999;
	--pv2-text-dim: #666666;
	--pv2-accent: #d5a84a;
	--pv2-gold: #eaa824;
	--pv2-gold-deep: #db9b15;
	--pv2-radius: 4px;
	--pv2-radius-lg: 6px;
	--pv2-ctl-h: 32px;
}

/* ---------- panel-v2-core primitives the picker expects ---------- */
body.pv2games .pv2-input {
	height: var(--pv2-ctl-h); padding: 0 11px;
	background: var(--pv2-field); border: 1px solid var(--pv2-border);
	border-radius: var(--pv2-radius); color: #fff;
	font: 400 13px 'Open Sans', Arial, sans-serif;
}
body.pv2games .pv2-input:focus {
	outline: none; border-color: var(--pv2-accent); box-shadow: 0 0 0 1px rgba(213, 168, 74, 0.25);
}
body.pv2games .pv2-input::placeholder { color: var(--pv2-text-dim); }
body.pv2games .pv2-search { position: relative; }
body.pv2games .pv2-search .pv2-input { padding-left: 32px; width: 100%; }
/* layout.css gives every text input a 10px bottom margin, which inflates the
   wrapper past the field and drops the magnifier below the placeholder — the
   same trap panel-v2-core neutralises inside the panels. */
body.pv2games .pv2-search > .pv2-input { margin: 0 !important; }
body.pv2games .pv2-search > i {
	position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
	width: auto; height: auto; padding: 0; margin: 0; line-height: 1;
	color: var(--pv2-text-dim); font-size: 13px; pointer-events: none;
}
body.pv2games .pv2-empty { text-align: center; padding: 46px 20px; color: var(--pv2-text-muted); }
body.pv2games .pv2-empty i { font-size: 30px; color: var(--pv2-text-dim); display: block; margin-bottom: 12px; }
body.pv2games .pv2-empty strong { display: block; color: var(--pv2-text-soft); font-size: 15px; font-weight: 600; margin-bottom: 5px; }

/* ---------- page spine ---------- */
body.pv2games .pv2-neworder { padding: 26px 0 10px; }
/* the theme's own h4/h3 reset does not reach these, and the band supplies the
   heading; nothing else here needs a section header. */
body.pv2games section.page-title { margin-bottom: 0; }

/* ---------- the two links a public tile carries ----------
   A panel tile IS one <a> to the order form. A public tile has to reach two
   places — the game page (the link this page ranks on) and the order form — so
   the tile is a <div>, the whole surface is a stretched link to the game page,
   and the Order button sits above it on its own z-index. Both hrefs are in the
   server html; neither is built by script. */
body.pv2games .pv2g-tile { position: relative; }
body.pv2games .pv2g-stretch {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
	border-radius: var(--pv2-radius-lg);
}
/* The visible game name is the real anchor text, exactly as the classic row's
   <h4><a> was, so it has to keep the tile's white heading colour rather than
   the site link colour.
   SPECIFICITY, not !important: public-v2-core.css is linked from header.tpl, so
   it lands LATER in the document than this sheet and wins every tie. Its
   `body.pubv2 .pv2p a` is (0,3,1) — these are written to (0,4,1) and (0,4,2) so
   they win on weight instead of on order. Keep the depth if you edit them. */
body.pv2games .pv2-neworder .pv2-no-meta .pv2-no-name a,
body.pv2games .pv2-neworder .pv2-no-meta .pv2-no-name a:hover,
body.pv2games .pv2-neworder .pv2-no-meta .pv2-no-name a:focus {
	color: inherit; text-decoration: none; position: relative; z-index: 2;
	/* the ellipsis belongs on the anchor too: the clip on the parent hides a
	   long title, but the inline box still measures past the tile and reads as
	   an overflow in any audit that walks bounding boxes. */
	display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.pv2games .pv2-no-price { gap: 5px; }
body.pv2games .pv2-neworder .pv2-no-price a.pv2g-order,
body.pv2games a.pv2g-order {
	position: relative; z-index: 2; margin-left: auto; flex: 0 0 auto;
	display: inline-block; padding: 3px 11px;
	background: var(--pv2-gold); border: 1px solid var(--pv2-gold-deep);
	border-radius: var(--pv2-radius);
	font: 600 11px/1.5 'Open Sans', Arial, sans-serif; letter-spacing: .02em;
	color: #1a1a1b; text-decoration: none; white-space: nowrap;
	transition: background-color .12s, border-color .12s;
}
body.pv2games .pv2-neworder .pv2-no-price a.pv2g-order:hover,
body.pv2games .pv2-neworder .pv2-no-price a.pv2g-order:focus,
body.pv2games a.pv2g-order:hover,
body.pv2games a.pv2g-order:focus {
	background: #f5c257; border-color: var(--pv2-gold); color: #1a1a1b; text-decoration: none;
}

/* the sale sash. layout.css has no gold ribbon and white ink does not carry on
   gold, so this is the picker's pre-order variant under its own name. */
body.pv2games .pv2-no-badge.deal {
	background: linear-gradient(#f0b64a 0%, #db9b15 100%);
	color: #1a1a1b; text-shadow: 0 1px 0 rgba(255, 255, 255, .18);
}
body.pv2games .pv2-no-badge.deal::before,
body.pv2games .pv2-no-badge.deal::after { border-top-color: #8a6210; }

/* ---------- the theme's own list/table resets do not apply here ---------- */
body.pv2games .pv2-no-grid img { border: 0; }

/* ---------- phones ----------
   The tile drops to two-up at 700 (the picker's own breakpoint). At that width
   "Starting at $0.70 / slot" plus an Order button will not sit on one line, so
   the price row wraps and the button takes the full width underneath — still
   one tap target, still 44px. */
@media (max-width: 700px) {
	body.pv2games .pv2-neworder { padding: 18px 0 6px; }
	body.pv2games .pv2-no-price { flex-wrap: wrap; }
	body.pv2games .pv2-neworder .pv2-no-price a.pv2g-order,
	body.pv2games a.pv2g-order {
		margin-left: 0; width: 100%; margin-top: 8px;
		padding: 0; line-height: 34px; text-align: center; font-size: 12px;
	}
	/* the picker lets a long title wrap to two lines on touch — the anchor has
	   to stop ellipsising so the parent's clamp can do it */
	body.pv2games .pv2-neworder .pv2-no-meta .pv2-no-name a {
		display: inline; white-space: normal; overflow: visible; text-overflow: clip;
	}
}
@media (hover: none) {
	body.pv2games .pv2-neworder .pv2-no-price a.pv2g-order,
	body.pv2games a.pv2g-order { line-height: 34px; padding-top: 0; padding-bottom: 0; }
}