/* ============================================================
   ENGINE GUILD - ui/site.css   (every page, via includes/unified_header.php)

   The light site theme shared by the main site, game pages and developer
   tools. Page stylesheets use these tokens instead of hard-coded colours
   (var(--eg-surface), var(--eg-text) ...), so the whole site changes from
   here.

   - Tokens          colours, lines, text, status colours
   - Header & menus
   - Full-width pages: page wrappers fill the window; panels run edge to
     edge with only a top and bottom border (no corners)
   - Common pieces:  info notes, inputs, tables
   - Popups (toasts) - ui/site.js

   Developer customisation is kept: --primary-color (accent), fonts and
   banners always apply. A game can opt in to its own page background
   (body.eg-custom-bg) and its own panel frames (body.eg-frames) in
   Settings & Deploy.
   ============================================================ */

:root {
    --eg-bg:          #f2f3f6;   /* page */
    --eg-surface:     #ffffff;   /* panels, cards */
    --eg-sunken:      #f6f7f9;   /* inputs, wells, table heads */
    --eg-line:        #dcdfe5;   /* borders */
    --eg-line-soft:   #eceef2;   /* dividers */
    --eg-text:        #1c2028;
    --eg-text-soft:   #353b45;
    --eg-muted:       #626a77;
    --eg-faint:       #949ba6;
    --eg-ink-rgb:     0, 0, 0;   /* for rgba() tints that used to be white-on-dark */
    --eg-green:       #1a7f37;
    --eg-red:         #cf222e;
    --eg-blue:        #0969da;
    --eg-amber:       #9a6700;
    --eg-gold:        #a87d2a;
    --eg-shadow:      0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .06);
    --eg-gutter:      clamp(16px, 3vw, 40px);
    --eg-accent:      var(--primary-color, #a87d2a);
}

html { background: var(--eg-bg); }
body { color: var(--eg-text); }
body:not(.eg-custom-bg) { background: var(--eg-bg) !important; background-image: none !important; }
a { color: var(--eg-blue); }
h1, h2, h3, h4 { color: var(--eg-text); }
::selection { background: color-mix(in srgb, var(--eg-accent) 30%, transparent); }

/* ---------- Header & menus ---------- */
.u-header { background: var(--eg-surface) !important; border-bottom: 1px solid var(--eg-line) !important; box-shadow: 0 1px 0 rgba(16,24,40,.03); }
.u-brand a { color: var(--eg-text) !important; }
.u-dd-btn { color: var(--eg-text-soft) !important; }
.u-dd-btn:hover, .u-dd.active .u-dd-btn { color: var(--eg-text) !important; }
.u-dd-menu { background: var(--eg-surface) !important; border-color: var(--eg-line) !important; box-shadow: 0 16px 40px rgba(16,24,40,.14) !important; }
.u-dd-menu a, .u-dd-menu button { color: var(--eg-text-soft) !important; border-bottom-color: var(--eg-line-soft) !important; }
.u-dd-menu a:hover, .u-dd-menu button:hover { background: var(--eg-sunken) !important; color: var(--eg-text) !important; }
.u-dd-menu .u-active { color: var(--eg-accent) !important; border-left-color: var(--eg-accent) !important; }
.u-dd-menu .u-label { color: var(--eg-faint) !important; }
.u-mobile-toggle { color: var(--eg-text) !important; }
.u-notif { color: var(--eg-muted) !important; }
.u-badge { border-color: var(--eg-surface) !important; }

/* ---------- Full-width pages ----------
   Every page wrapper fills the window. Panels inside run edge to edge;
   anything else in the wrapper (headings, intro text, forms) keeps a
   gutter so it doesn't touch the window edge. */
:is(.g-wrap, .fin-wrap, .team-wrap, .sp-wrap, .cf-wrap, .av-wrap, .isnd-wrap, .sa-wrap, .eg-wrap,
    .terms-container, .lic-wrap, .rm-wrap, .st-wrap, .ss-wrap, .mod-wrap, .prof-wrap, .portal-container,
    .store-container, .hub-container, .collection-layout, .market-layout, .trading-layout, .reveal-container,
    .t-container, .s-container, .v-container, .container, .wrap, .page-wrapper, .dashboard-container,
    .main-content, .dash-content, .dev-container) {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}
:is(.g-wrap, .fin-wrap, .team-wrap, .sp-wrap, .cf-wrap, .av-wrap, .isnd-wrap, .sa-wrap,
    .terms-container, .lic-wrap, .rm-wrap, .st-wrap, .ss-wrap, .mod-wrap, .store-container,
    .t-container, .s-container, .v-container) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
:is(.g-wrap, .fin-wrap, .team-wrap, .sp-wrap, .cf-wrap, .av-wrap, .isnd-wrap, .sa-wrap,
    .terms-container, .lic-wrap, .rm-wrap, .st-wrap, .ss-wrap, .mod-wrap, .store-container,
    .t-container, .s-container, .v-container) > :not(.eg-edge):not(:is(.g-panel, .fin-panel, .panel, .sa-panel, .pa-panel, .mod-panel, .prof-panel, .s-panel, .v-panel, .glass-panel, .settings-panel, .danger-panel, .slots-panel, .store-grid, .eg-sec)) {
    padding-left: var(--eg-gutter);
    padding-right: var(--eg-gutter);
}

/* Edge-to-edge panels: full width, a top and bottom border, no side
   borders and no rounded corners. Their own padding keeps content off the
   window edge. A game that turns its frames on (body.eg-frames) keeps its
   frame images on game pages. */
body:not(.eg-frames) :is(.g-panel, .fin-panel, .panel, .sa-panel, .pa-panel, .mod-panel, .prof-panel, .s-panel, .v-panel,
    .glass-panel, .settings-panel, .danger-panel, .slots-panel, .eg-edge, .qp-section, .news-section, .card-panel,
    .sf-panel, .storefront-form, .ro-wrap, .explore-sidebar, .gotm-card, .reveal-container, .pull-panel),
body.eg-frames:not(.eg-game-page) :is(.g-panel, .fin-panel, .panel, .sa-panel, .pa-panel, .mod-panel, .prof-panel, .s-panel, .v-panel,
    .glass-panel, .settings-panel, .danger-panel, .slots-panel, .eg-edge) {
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    border-image: none !important;
    border-top: 1px solid var(--eg-line) !important;
    border-bottom: 1px solid var(--eg-line) !important;
    box-shadow: none !important;
    background: var(--eg-surface);
}
body:not(.eg-frames) :is(.g-panel, .fin-panel, .panel, .glass-panel, .settings-panel, .eg-edge, .qp-section, .news-section) {
    border-top: 2px solid var(--eg-accent) !important;
}
:is(.g-panel, .fin-panel, .panel, .sa-panel, .glass-panel, .settings-panel, .eg-edge) + :is(.g-panel, .fin-panel, .panel, .sa-panel, .glass-panel, .settings-panel, .eg-edge) { margin-top: 1.25rem; }
:is(.g-panel, .fin-panel, .panel, .glass-panel, .settings-panel, .eg-edge) > :is(.g-panel-head, .fin-head, .panel-header) {
    padding-left: var(--eg-gutter) !important;
    padding-right: var(--eg-gutter) !important;
}
:is(.g-panel, .fin-panel, .glass-panel, .eg-edge) > :is(.g-panel-body, .fin-body) {
    padding-left: var(--eg-gutter) !important;
    padding-right: var(--eg-gutter) !important;
}

/* ---------- Common pieces ---------- */
.alert, .alert-box, .notice, .note-box {
    background: var(--eg-sunken);
    border: 1px solid var(--eg-line);
    border-left: 4px solid var(--eg-blue);
    color: var(--eg-text-soft);
    border-radius: 6px;
    padding: .8rem 1rem;
}
.alert.alert-warning, .alert.warning { border-left-color: var(--eg-amber); }
.alert.alert-error, .alert.alert-danger, .alert-box.err { border-left-color: var(--eg-red); }
.alert.alert-success, .alert.ok, .alert-box.ok { border-left-color: var(--eg-green); }

input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"],
input[type="url"], input[type="date"], input[type="datetime-local"], select, textarea {
    color: var(--eg-text);
    background-color: var(--eg-surface);
    border-color: var(--eg-line);
}
input::placeholder, textarea::placeholder { color: var(--eg-faint); }
table { color: var(--eg-text-soft); }
code { background: var(--eg-sunken); color: var(--eg-text); border-radius: 4px; padding: 0 .3em; }
.eg-build-stamp { color: var(--eg-faint) !important; }

/* Wide tables and grids never push the page sideways on a phone. */
@media (max-width: 760px) {
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    img, video, canvas { max-width: 100%; }
}

/* ---------- Popups (ui/site.js) ---------- */
.eg-toasts {
    position: fixed; top: 84px; right: 16px; z-index: 5000;
    display: flex; flex-direction: column; gap: 10px;
    width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.eg-toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--eg-surface); color: var(--eg-text);
    border: 1px solid var(--eg-line); border-left: 4px solid var(--eg-green);
    border-radius: 8px; padding: 12px 12px 12px 14px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
    font-size: .92rem; line-height: 1.45;
    opacity: 0; transform: translateX(16px); transition: opacity .22s ease, transform .22s ease;
}
.eg-toast.in { opacity: 1; transform: none; }
.eg-toast.out { opacity: 0; transform: translateX(16px); }
.eg-toast-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: #fff; background: var(--eg-green); margin-top: 1px; }
.eg-toast-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.eg-toast-close { flex: none; background: none; border: 0; color: var(--eg-faint); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.eg-toast-close:hover { color: var(--eg-text); }
.eg-toast-error   { border-left-color: var(--eg-red); }   .eg-toast-error .eg-toast-icon   { background: var(--eg-red); }
.eg-toast-warning { border-left-color: var(--eg-amber); } .eg-toast-warning .eg-toast-icon { background: var(--eg-amber); }
.eg-toast-info    { border-left-color: var(--eg-blue); }  .eg-toast-info .eg-toast-icon    { background: var(--eg-blue); }
@media (max-width: 600px) {
    .eg-toasts { top: auto; bottom: 12px; right: 12px; left: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .eg-toast { transition: none; } }

/* ---------- Game pages on the site theme ----------
   Game pages define their look from the developer's colours (--bg,
   --surface, --gp-panel-bg ...). Unless the game opts in to its own
   background, those map to the site tokens; the developer's primary
   colour, fonts and banner still apply. */
body:not(.eg-custom-bg) {
    --bg: var(--eg-bg); --bg-color: var(--eg-bg); --bg-top: var(--eg-bg); --gp-bg: var(--eg-bg);
    --surface: var(--eg-surface); --panel: var(--eg-surface); --border: var(--eg-line);
    --gp-panel-bg: var(--eg-surface); --gp-text-color: var(--eg-text); --gp-muted-color: var(--eg-muted);
    --gp-border-color: var(--eg-line); --gp-frame-color: var(--eg-line);
}
/* ---------- Page header (includes/page_head.php) ----------
   The same compact band on every game page: title, a short line under it,
   buttons on the right. Edge to edge, top and bottom border only. */
.eg-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
    background: var(--eg-surface); border-top: 1px solid var(--eg-line); border-bottom: 1px solid var(--eg-line);
    padding: 18px var(--eg-gutter); margin: 0 0 20px; box-sizing: border-box; width: 100%; }
.eg-page-head h1 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.2; color: var(--eg-text); font-family: var(--game-heading-font, inherit); }
.eg-page-head-icon { color: var(--eg-accent); }
.eg-page-head p { margin: 4px 0 0; color: var(--eg-muted); font-size: .92rem; }
.eg-page-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Game banner directly above: no gap, the band continues it. */
.portal-hero + .eg-page-head { margin-top: 0; }

/* The developer's own theme (Settings & Deploy > "Use my page background").
   The site's colour tokens become the game's panel / text / border colours,
   so every page built on the tokens follows the game - panels, inputs,
   headings, muted text, tints. Values come from includes/unified_header.php
   (--dev-*). The site header and its menus keep the Engine look. */
body.eg-game-page.eg-custom-bg {
    --eg-surface:   var(--dev-panel);
    --eg-sunken:    color-mix(in srgb, var(--dev-panel) 86%, rgb(var(--dev-ink-rgb)) 4%);
    --eg-line:      var(--dev-border);
    --eg-line-soft: color-mix(in srgb, var(--dev-border) 55%, var(--dev-panel));
    --eg-text:      var(--dev-text);
    --eg-text-soft: color-mix(in srgb, var(--dev-text) 85%, var(--dev-panel));
    --eg-muted:     var(--dev-muted);
    --eg-faint:     color-mix(in srgb, var(--dev-muted) 65%, var(--dev-panel));
    --eg-ink-rgb:   var(--dev-ink-rgb);
    --eg-shadow:    0 2px 10px rgb(0 0 0 / .35);
    --gp-panel-bg: var(--dev-panel); --gp-text-color: var(--dev-text); --gp-muted-color: var(--dev-muted); --gp-border-color: var(--dev-border);
}
/* The developer's panel corner radius (Settings & Deploy > Panels & frames)
   on the cards and boxes of every game page. Full-width bands stay square. */
body.eg-game-page :is(.portal-card, .deck-card, .starter-card, .qp-card, .tl-reward-box, .sp-chip, .glass-panel,
    .empty-state, .card-panel, .stat-card, .pack-card, .listing-card, .ability-card, .achievement-card, .cosmetic-card,
    .t-card, .st-card) { border-radius: var(--dev-radius, 8px) !important; }

/* Status colours that stay readable on a dark panel. */
body.eg-dev-dark { --eg-green: #3fb950; --eg-red: #f85149; --eg-blue: #58a6ff; --eg-amber: #d29922; --eg-gold: #d8b46c; }
body.eg-custom-bg .u-header, body.eg-custom-bg .eg-toasts {
    --eg-surface: #ffffff; --eg-sunken: #f6f7f9; --eg-line: #dcdfe5; --eg-line-soft: #eceef2;
    --eg-text: #1c2028; --eg-text-soft: #353b45; --eg-muted: #626a77; --eg-faint: #949ba6; --eg-ink-rgb: 0, 0, 0;
    --eg-green: #1a7f37; --eg-red: #cf222e; --eg-blue: #0969da; --eg-amber: #9a6700; --eg-gold: #a87d2a;
}

/* Frame images only when the game turns them on; otherwise a plain line. */
body:not(.eg-frames) {
    --gp-frame-source: none; --gp-frame-width: 1px; --gp-panel-border-width: 1px;
    --game-panel-frame-source: none; --game-panel-frame-width: 1px; --game-panel-frame-border-color: var(--eg-line);
}
body:not(.eg-frames) .portal-card { border: 1px solid var(--eg-line) !important; border-top: 3px solid var(--eg-accent) !important; box-shadow: var(--eg-shadow) !important; }

/* ---------- News layout (player/dashboard.php, player/articles.php) ----------
   A magazine front page: one large lead tile and a side tile with the title
   over the image, then a row of cards with the image above the title. */
.nw { width: 100%; box-sizing: border-box; padding: 24px var(--eg-gutter) 56px; }
.nw-row { display: grid; gap: 16px; }
.nw-lead { grid-template-columns: minmax(0, 2.35fr) minmax(0, 1fr); margin-bottom: 18px; }
.nw-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nw-tile { position: relative; display: block; overflow: hidden; border-radius: 4px; background: var(--tile-bg, #1f2430); color: #fff; text-decoration: none; min-height: 220px; isolation: isolate; }
.nw-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .35s ease; }
.nw-tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .25) 45%, rgb(0 0 0 / 0) 70%); }
.nw-tile:hover img { transform: scale(1.03); }
.nw-tile-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; }
.nw-kicker { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .85); margin-bottom: 6px; }
.nw-tile h2, .nw-tile h3 { color: rgb(255 255 255) !important; margin: 0; line-height: 1.2; text-shadow: 0 1px 8px rgb(0 0 0 / .4); font-family: inherit; }
.nw-tile h2 { font-size: clamp(1.25rem, 2.2vw, 1.85rem); }
.nw-tile h3 { font-size: 1.15rem; }
.nw-lead .nw-tile { min-height: clamp(240px, 32vw, 400px); }
.nw-card { display: flex; flex-direction: column; text-decoration: none; color: var(--eg-text); min-width: 0; }
.nw-card-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--tile-bg, #1f2430); }
.nw-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.nw-card:hover .nw-card-img img { transform: scale(1.04); }
.nw-card-img .nw-ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgb(255 255 255 / .9); font-weight: 700; font-size: 1.1rem; padding: 12px; text-align: center; }
.nw-card h3 { font-size: .98rem; line-height: 1.35; margin: 10px 0 4px; color: var(--eg-text); font-family: inherit; }
.nw-card:hover h3 { color: var(--eg-accent); }
.nw-meta { color: var(--eg-muted); font-size: .8rem; }
.nw-section { margin-top: 36px; }
.nw-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--eg-text); padding-bottom: 6px; margin-bottom: 16px; }
.nw-section-head h2 { margin: 0; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; font-family: inherit; color: var(--eg-text); }
.nw-section-head a { font-size: .85rem; color: var(--eg-muted); text-decoration: none; }
.nw-section-head a:hover { color: var(--eg-accent); }
.nw-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nw-box { background: var(--eg-surface); border-top: 2px solid var(--eg-accent); border-bottom: 1px solid var(--eg-line); padding: 18px 20px; }
.nw-box h3 { margin: 0 0 12px; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; font-family: inherit; color: var(--eg-text); }
@media (max-width: 1100px) { .nw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nw-band { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
    .nw-lead { grid-template-columns: 1fr; }
    .nw-band { grid-template-columns: 1fr; }
    .nw-tile { min-height: 200px; }
}
@media (max-width: 480px) { .nw-cards { grid-template-columns: 1fr; } }
.nw-box .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nw-box .stat-card { padding: 12px 14px !important; min-height: 0 !important; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 2px; border-radius: 6px; }
.nw-box .stat-card .stat-value { font-size: 1.6rem; line-height: 1.1; }
.nw-box .stat-card .stat-label { font-size: .72rem; }

/* Page intros that sit outside a wrapper keep the gutter. */
.marketplace-intro { padding: 1.4rem var(--eg-gutter) .6rem; }
.marketplace-intro h1 { margin: 0; }
.marketplace-intro p { margin: .3rem 0 0; color: var(--eg-muted); }
input:disabled, select:disabled, textarea:disabled { background-color: var(--eg-sunken); color: var(--eg-muted); }

/* Full-width page wrapper for developer tools (replaces old centred boxes). */
.eg-page-wrap { padding: 1.5rem var(--eg-gutter) 3rem; box-sizing: border-box; width: 100%; }
.page-wrapper { padding: 0 !important; display: block !important; }
body:not(.eg-frames) .dashboard-container {
    border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important;
    border-top: 2px solid var(--eg-accent) !important; border-bottom: 1px solid var(--eg-line) !important;
    box-shadow: none !important; padding: 2rem var(--eg-gutter) !important;
}
.panel { max-width: none !important; }

/* ---------- Combined developer pages (includes/dev_hub_run.php) ----------
   The tab bar across the top of a combined page: the page's name, then one
   tab per tool. Each tab is a full page load of that tool inside the page. */
.eg-hub-tabs { display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap; background: var(--eg-surface); border-bottom: 1px solid var(--eg-line);
    padding: 0 var(--eg-gutter); box-sizing: border-box; width: 100%; }
.eg-hub-title { display: flex; align-items: center; font-weight: 800; color: var(--eg-text); margin-right: 18px; padding: 12px 0; white-space: nowrap; }
.eg-hub-tabs a { display: flex; align-items: center; padding: 12px 14px; color: var(--eg-muted); text-decoration: none; font-weight: 600; font-size: .9rem;
    border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.eg-hub-tabs a:hover { color: var(--eg-text); }
.eg-hub-tabs a.active { color: var(--eg-text); border-bottom-color: var(--eg-accent); }
@media (max-width: 760px) { .eg-hub-tabs { flex-wrap: nowrap; overflow-x: auto; } .eg-hub-title { display: none; } }