/* THEME: darkgame — charcoal arcade, neon lime/magenta, mono display headings */
:root { --bg:#0a0d12; --fg:#e8eef2; --muted:#8b98a8; --accent:#a3ff5c; --accent2:#ff5cc8; --card:#12161f; --line:#232b38; --radius:14px; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Segoe UI",system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--fg); line-height:1.6; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:
  radial-gradient(600px 300px at 85% -5%, rgba(163,255,92,.08), transparent 70%),
  radial-gradient(600px 300px at 0% 20%, rgba(255,92,200,.06), transparent 70%); }
a { color:var(--accent); text-decoration:none; }
.site-header { display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; align-items:center; padding:.9rem 1.25rem; background:rgba(10,13,18,.92); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; backdrop-filter:blur(8px); }
.brand { font-weight:800; font-size:1.25rem; color:var(--accent); letter-spacing:.02em; font-family:Consolas,"Cascadia Mono",monospace; text-shadow:0 0 18px rgba(163,255,92,.45); }
.site-header nav { display:flex; flex-wrap:wrap; gap:.25rem .85rem; font-size:.9rem; }
.site-header nav a { color:var(--muted); padding:.25rem .4rem; border-radius:8px; }
.site-header nav a[aria-current], .site-header nav a:hover { color:var(--accent); background:rgba(163,255,92,.09); }
main { max-width:960px; margin:0 auto; padding:1.5rem 1.25rem 3rem; }
.hero { padding:2.4rem 0 1.4rem; }
.hero h1 { font-size:clamp(1.7rem,4vw,2.5rem); letter-spacing:-.01em; margin:0 0 .5rem; font-family:Consolas,"Cascadia Mono",monospace; text-shadow:0 0 24px rgba(163,255,92,.25); }
.lede { color:var(--muted); font-size:1.06rem; margin:.25rem 0 0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; box-shadow:0 8px 24px rgba(0,0,0,.35); margin:1.25rem 0; }
.card h2 { margin-top:0; }
.content h2 { letter-spacing:-.01em; margin-top:2rem; }
.content p, .content li { color:#c3ccd6; }
label { display:block; font-weight:600; margin:.75rem 0 .25rem; }
input, select { width:100%; padding:.65rem .8rem; border:1px solid var(--line); border-radius:10px; font:inherit; background:#0d1118; color:var(--fg); }
input:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(163,255,92,.12); }
button.btn { margin-top:1rem; background:linear-gradient(135deg,var(--accent),#57d94f); color:#0a0d12; border:0; padding:.7rem 1.3rem; border-radius:10px; font:inherit; font-weight:800; cursor:pointer; box-shadow:0 0 18px rgba(163,255,92,.28); }
button.btn:hover { filter:brightness(1.08); }
.calc-result { margin-top:1rem; background:#0d1118; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px; padding:1rem 1.2rem; font-size:1.15rem; font-weight:700; color:var(--accent); min-height:1em; font-family:Consolas,"Cascadia Mono",monospace; white-space:pre-line; }
.tools-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem; margin-top:1rem; }
.tool-card { display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem; color:var(--fg); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.tool-card:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.5); border-color:rgba(163,255,92,.4); }
.tool-card h3 { margin:.35rem 0 .25rem; font-size:1.02rem; }
.tool-card p { margin:0; color:var(--muted); font-size:.9rem; }
.tool-icon { font-size:1.5rem; }
.tool-tag { display:inline-block; margin-top:.5rem; font-size:.8rem; color:var(--accent); font-weight:700; }
details { border:1px solid var(--line); border-radius:10px; padding:.7rem 1rem; margin:.5rem 0; background:var(--card); }
summary { font-weight:700; cursor:pointer; }
.ad-slot { margin:2.25rem auto; max-width:920px; text-align:center; }
.ad-slot:empty { display:none; }
.site-footer { border-top:1px solid var(--line); padding:1.25rem; text-align:center; color:var(--muted); font-size:.9rem; }
textarea { width:100%; min-height:90px; padding:.65rem .8rem; border:1px solid var(--line); border-radius:10px; font:inherit; background:#0d1118; color:var(--fg); resize:vertical; }
textarea:focus { outline:none; border-color:var(--accent); }
.fb-row { display:flex; gap:.75rem; margin-top:.7rem; flex-wrap:wrap; }
.fb-row input { flex:1; min-width:200px; }
.feedback-section { margin-top:2.6rem; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.6rem; }
.feedback-section h2 { margin-top:0; }

/* ---- game pivot (homepage banners + panels) ---- */
.game-banners { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; margin:1rem 0 1.5rem; }
.game-banner { position:relative; display:block; border-radius:14px; overflow:hidden; border:2px solid var(--line); aspect-ratio:16/8; transition:border-color .12s ease, box-shadow .12s ease; }
.game-banner img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .18s ease; }
.game-banner:hover img { transform:scale(1.05); }
.game-banner.sel { border-color:var(--gaccent,var(--accent)); box-shadow:0 0 0 2px var(--gaccent,var(--accent)), 0 8px 26px rgba(0,0,0,.5); }
.gb-overlay { position:absolute; inset:auto 0 0 0; padding:1.8rem .95rem .65rem; background:linear-gradient(transparent, rgba(5,8,12,.94)); display:flex; flex-direction:column; }
.gb-name { font-weight:800; font-size:1.08rem; color:#fff; font-family:Consolas,"Cascadia Mono",monospace; text-shadow:0 2px 10px rgba(0,0,0,.7); }
.gb-sub { color:var(--gaccent,var(--accent)); font-size:.82rem; font-weight:700; }
.pivot-panel[hidden] { display:none; }
.pivot-panel { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--gaccent,var(--accent)); border-radius:12px; padding:1.2rem 1.25rem 1.4rem; margin-bottom:1.5rem; }
.pv-h { margin:1.1rem 0 .4rem; font-size:1.05rem; }
.pv-h:first-of-type { margin-top:.2rem; }
.pv-hublink { display:inline-block; font-weight:800; font-size:.9rem; color:var(--gaccent,var(--accent)); border:1px solid var(--gaccent,var(--accent)); padding:.35rem .8rem; border-radius:99px; margin-bottom:.5rem; }
.pv-hublink:hover { background:rgba(163,255,92,.08); }

/* ---- game hub hero ---- */
.game-hero { position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); margin:1.1rem 0 1.3rem; }
.gh-imgs { display:flex; }
.gh-imgs img { flex:1; min-width:0; width:100%; aspect-ratio:16/7; object-fit:cover; display:block; }
.game-hero .gh-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:1.4rem; background:linear-gradient(transparent 35%, rgba(5,8,12,.92)); }
.game-hero h1 { margin:0; font-size:clamp(1.6rem,3.5vw,2.3rem); color:#fff; font-family:Consolas,"Cascadia Mono",monospace; text-shadow:0 2px 14px rgba(0,0,0,.65); }
.game-hero p { margin:.3rem 0 0; color:#dbe6f0; max-width:640px; }

/* ---- page banner strip + card thumbnails ---- */
.page-banner { border-radius:12px; overflow:hidden; border:1px solid var(--line); margin-bottom:1.1rem; }
.page-banner img { width:100%; aspect-ratio:2/1; object-fit:cover; display:block; }
.tool-card.has-img { padding:.9rem; }
.tool-card .tc-img { width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:9px; display:block; margin-bottom:.55rem; background:#0d1118; }