/*
 * Cogg Game Platform
 * Copyright (c) 2026 Greg Strelzoff / Cogg. All rights reserved.
 * Proprietary and confidential.
 *
 * game-ui.css
 *   Shared PANEL-AND-CONTROL baseline for board and table game pages,
 *   extracted verbatim from the Modern Art pages (the canonical look).
 *   Chrome only: type scale, panels, headings, labels, inputs and
 *   selects, the three-part button grammar (accent buttons commit,
 *   ghost buttons are secondary, tile buttons are selectable options,
 *   the Modern Art card pattern), seat-config rows, tables, muted and
 *   good/bad text, and the fixed build stamp. Game pieces (boards,
 *   lanes, cards, mats) stay inline in each game's page, and stylized
 *   games (Crypt's terminal look) do not load this file.
 *
 *   Relation to game-chrome.css: that file is the topbar and status-bar
 *   chrome for the classic-games family on the platform.css palette;
 *   THIS file is the Modern Art panel baseline and carries its own
 *   root palette. A page may load both.
 *
 *   Load order: link this file BEFORE the page's inline <style>, so
 *   page-specific rules win on conflict via source order.
 *   Consumers: games/modern-art/solo.html, games/modern-art/game.html,
 *   games/container/index.html.
 */

:root { --bg:#15161a; --panel:#1f2128; --line:#33363f; --ink:#e8e8ec; --dim:#9aa0ad; --accent:#d8b25a; --good:#6fcf97; --bad:#eb5757; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif; }

.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }
h2 { font-size:15px; margin:0 0 10px; color:var(--accent); text-transform:uppercase; letter-spacing:1px; }
label { color:var(--dim); margin-right:6px; }
select, input[type=text], input[type=number] { background:#15161a; color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:5px 7px; font:inherit; }

button { background:var(--accent); color:#15161a; border:0; border-radius:6px; padding:7px 13px; font:inherit; font-weight:600; cursor:pointer; }
button.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
button.tile { background:#15161a; color:var(--ink); border:1px solid var(--line); border-radius:8px; font-weight:400; }
button.ghost:hover, button.tile:hover { border-color:var(--accent); }
button:disabled { opacity:.4; cursor:default; }

.muted { color:var(--dim); }
.good { color:var(--good); } .bad { color:var(--bad); }
.seatRow { display:flex; align-items:center; gap:10px; margin:6px 0; }
.seatRow input[type=text] { background:#15161a; color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:5px 7px; font:inherit; width:120px; }

table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:5px 8px; border-bottom:1px solid var(--line); }
th { color:var(--dim); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.5px; }

.build-stamp, .version-stamp { position:fixed; bottom:8px; right:12px; font-size:16px; color:var(--dim); opacity:.6; pointer-events:none; z-index:9999; }