/* ============================================================================
   pcprofile.com - Locked design tokens (Gaming Compatibility Checker)
   Palette family: OCEAN (ink-navy + electric cyan). Display: Chakra Petch.
   Body: Inter. Material-shadcn DNA: soft elevation, inset-ripple, 8% grain,
   12px radius. AI-slop avoided: HUD-panel callouts, no emoji, no default
   tinted+border-l-4 box. This file is the single source of truth for the
   theme chrome (assets/css/theme.css) and the checker bundle theme.
   ========================================================================== */

:root {
  /* --- Ocean palette --- */
  --ink-900: #0B1220;   /* deepest bg / primary */
  --ink-800: #111a2e;   /* raised surface on dark */
  --ink-700: #1b2740;   /* borders on dark */
  --ink-600: #2b3a5a;

  --paper-0:  #ffffff;
  --paper-50: #f5f7fb;  /* page bg (light) */
  --paper-100:#eef2f8;  /* muted surface */
  --paper-200:#e2e8f0;  /* borders (light) */

  --cyan-500: #22D3EE;  /* signal accent */
  --cyan-600: #0bb6d4;  /* accent hover */
  --cyan-300: #7ee7f6;  /* accent light */
  --cyan-glow: rgba(34,211,238,.28);

  /* verdict scale (HUD signal colors - not emoji) */
  --verdict-no:   #f0506e;  /* won't run */
  --verdict-low:  #f6a609;  /* low */
  --verdict-mid:  #2dd4bf;  /* medium-high */
  --verdict-ultra:#22D3EE;  /* ultra */

  /* semantic (light surface, the default reading context) */
  --bg:        var(--paper-50);
  --surface:   var(--paper-0);
  --surface-2: var(--paper-100);
  --text:      #0d1526;
  --text-muted:#5a6678;
  --border:    var(--paper-200);
  --primary:   var(--ink-900);
  --on-primary:#ffffff;
  --accent:    var(--cyan-600);

  /* radius / spacing / type */
  --radius: 0.75rem;        /* 12px */
  --radius-sm: 0.5rem;
  --radius-pill: 999px;
  --font-display: "Chakra Petch", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --fs-base: 16px;

  /* material elevation */
  --shadow-sm: 0 1px 2px rgba(11,18,32,.06), 0 1px 1px rgba(11,18,32,.04);
  --shadow-md: 0 4px 12px rgba(11,18,32,.08), 0 2px 4px rgba(11,18,32,.05);
  --shadow-lg: 0 18px 48px rgba(11,18,32,.16);
  --shadow-glow: 0 0 0 1px rgba(34,211,238,.4), 0 8px 30px var(--cyan-glow);

  --container: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--fs-base); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-feature-settings: "cv05","ss01";
  position: relative;
}

/* 8% grain overlay (material-shadcn DNA) - pure CSS, no external image dep */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
}
h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
h3 { font-size: 1.25rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }

/* --- Card (material surface) --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* --- Button: material gradient + inset ripple (DNA) --- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display);
  font-weight: 600; font-size: .95rem;
  padding: .7rem 1.25rem;
  border: none; border-radius: var(--radius-sm);
  cursor: pointer; position: relative;
  color: var(--on-primary);
  background: linear-gradient(to bottom, var(--ink-700), var(--ink-900));
  box-shadow: var(--shadow-sm);
  transition: transform .08s ease, box-shadow .15s ease;
}
.btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.35);
  pointer-events: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn--accent {
  background: linear-gradient(to bottom, var(--cyan-500), var(--cyan-600));
  color: var(--ink-900);
}
.btn--accent:hover { box-shadow: var(--shadow-glow); }

/* --- HUD panel: the site-specific callout treatment (NOT the AI-slop
   tinted + border-l-4 box). Used for methodology/disclaimer notes. --- */
.hud-panel {
  position: relative;
  background:
    linear-gradient(var(--ink-800), var(--ink-800)) padding-box,
    linear-gradient(120deg, var(--cyan-500), transparent 60%) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: #cfe9f2;
  padding: 1rem 1.1rem 1rem 1.1rem;
  font-size: .9rem;
  font-family: var(--font-mono);
}
.hud-panel::before {
  content: "// " attr(data-label);
  display: block;
  color: var(--cyan-300);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}

/* --- Verdict pill --- */
.verdict {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700;
  padding: .4rem .9rem; border-radius: var(--radius-pill);
  font-size: .95rem;
}
.verdict[data-tier="no"]    { background: rgba(240,80,110,.12);  color: var(--verdict-no);  }
.verdict[data-tier="low"]   { background: rgba(246,166,9,.14);   color: #b9790a; }
.verdict[data-tier="mid"]   { background: rgba(45,212,191,.14);  color: #0f8c7e; }
.verdict[data-tier="ultra"] { background: rgba(34,211,238,.16);  color: #0a7f97; }

/* inline SVG check/cross glyphs (NO emoji) */
.glyph { width: 1.05em; height: 1.05em; vertical-align: -.15em; flex: none; }

/* ============================================================================
   Theme chrome - DASHBOARD SHELL (left sidebar + content card), ported from
   the material-shadcn template layout, recolored to the ocean palette.
   ========================================================================== */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink-900);color:#fff;padding:.6rem 1rem;border-radius:0 0 var(--radius-sm) 0;z-index:10000;}
.skip-link:focus{left:0;}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--text);}
.brand:hover{text-decoration:none;}

.app-shell{display:flex;align-items:flex-start;min-height:100vh;}

.sidebar{width:248px;flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;}
.sidebar-brand{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.1rem .5rem;}
.sidebar-nav{flex:1;padding:.75rem .8rem;}
.nav-item{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border-radius:var(--radius-sm);color:var(--text);font-weight:500;font-size:.92rem;border:1px solid transparent;margin-bottom:.25rem;}
.nav-item:hover{background:var(--surface-2);text-decoration:none;}
.nav-item .glyph{width:1.15em;height:1.15em;color:var(--text-muted);flex:none;}
.nav-item.is-active{position:relative;color:#fff;border-color:var(--ink-900);box-shadow:var(--shadow-sm);background:linear-gradient(to bottom,var(--ink-700),var(--ink-900));}
.nav-item.is-active::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.35);pointer-events:none;}
.nav-item.is-active .glyph{color:var(--cyan-300);}
.sidebar-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin:1rem .8rem .4rem;padding-top:.75rem;border-top:1px solid var(--border);}
.sidebar-foot{padding:.9rem;}
.sidebar-close{display:none;background:none;border:none;cursor:pointer;color:var(--text-muted);padding:.3rem;}

.app-main{flex:1;min-width:0;padding:1.25rem;display:flex;flex-direction:column;gap:1rem;}
.content-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:clamp(1.1rem,2.5vw,2.1rem);flex:1;}
.sidebar-toggle{display:none;align-items:center;gap:.4rem;align-self:flex-start;font-family:var(--font-display);font-weight:600;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .8rem;cursor:pointer;color:var(--text);}
.sidebar-overlay{position:fixed;inset:0;background:rgba(11,18,32,.5);z-index:55;}

.container{width:100%;max-width:none;margin:0;padding-inline:0;}

.hero{padding:1rem 0 1.75rem;}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:2.25rem;align-items:center;}
.eyebrow{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .4rem;}
.lead{font-size:1.12rem;color:var(--text-muted);max-width:46ch;}
.checker{padding:1.5rem;box-shadow:var(--shadow-md);}
.checker h2{font-size:1.15rem;margin:0 0 1rem;}
.field{margin-bottom:.85rem;}
.field label{display:block;font-size:.8rem;font-weight:600;margin-bottom:.3rem;color:var(--text-muted);}
.detect-note{font-size:.78rem;color:var(--text-muted);margin:.2rem 0 1rem;}

.games-strip{padding:1.75rem 0 .5rem;}
.games-strip h2{margin-bottom:1rem;}
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1rem;}
.game-card{padding:1rem;display:block;transition:transform .1s,box-shadow .15s;}
.game-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);text-decoration:none;}
.game-card .title{font-family:var(--font-display);font-weight:600;color:var(--text);}
.game-card .meta{font-size:.8rem;color:var(--text-muted);}

.explain{padding:1.75rem 0 .5rem;}
.explain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.step{padding:1.25rem;}
.step .n{font-family:var(--font-mono);color:var(--accent);font-size:.8rem;}
.step h3{margin:.3rem 0 .4rem;}

.spec-table{width:100%;border-collapse:collapse;margin:1.25rem 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.spec-table th,.spec-table td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--border);font-size:.92rem;}
.spec-table th{font-family:var(--font-display);background:var(--surface-2);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);}
.spec-table tr:last-child td{border-bottom:none;}
.spec-table .req-label{font-weight:600;color:var(--text);}

.prose{max-width:72ch;}
.prose h2{margin-top:2rem;} .prose h3{margin-top:1.5rem;}
.prose p,.prose li{color:var(--text);}
.prose img{max-width:100%;height:auto;border-radius:var(--radius);}

details{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.6rem;}
summary{cursor:pointer;padding:.85rem 1rem;font-weight:600;font-family:var(--font-display);list-style:none;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";float:right;color:var(--accent);font-weight:700;}
details[open] summary::after{content:"\2212";}
details[open] summary{border-bottom:1px solid var(--border);}
details .answer{padding:.85rem 1rem;margin:0;color:var(--text-muted);}

.breadcrumbs{font-size:.82rem;color:var(--text-muted);padding:0 0 .75rem;}
.breadcrumbs a{color:var(--text-muted);} .breadcrumbs a:hover{color:var(--accent);}
.section-title{margin:2rem 0 1rem;} .page-hero{padding:.5rem 0 1rem;}
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;margin:1rem 0;}

.app-footer{padding:.5rem .25rem 1rem;color:var(--text-muted);font-size:.88rem;}
.app-footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;align-items:flex-start;}
.app-footer p{max-width:40ch;margin:.4rem 0 0;}
.brand--foot{font-size:1rem;}
.app-footer-links{display:flex;gap:1.25rem;flex-wrap:wrap;}
.app-footer-links a{color:var(--accent);}
.app-footer-base{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--border);}

@media (max-width:960px){
  .hero-grid,.explain-grid{grid-template-columns:1fr;}
  .sidebar{position:fixed;left:0;top:0;bottom:0;height:100vh;width:264px;z-index:60;transform:translateX(-100%);transition:transform .25s ease;}
  body.sidebar-open .sidebar{transform:none;}
  .sidebar-close{display:inline-flex;}
  .sidebar-toggle{display:inline-flex;}
}
@media (min-width:961px){ .sidebar-overlay{display:none;} }

/* media / hero banners */
.showcase{padding:1.5rem 0 .5rem;}
.showcase-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center;}
.showcase-grid picture{display:block;}
.showcase-grid img{width:100%;height:260px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border);}
.game-banner{margin:0 0 1.25rem;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);}
.game-banner img{width:100%;height:150px;object-fit:cover;display:block;}
.guide-lead{margin:0 0 1.5rem;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);}
.guide-lead img{width:100%;height:240px;object-fit:cover;display:block;}
.infographic{margin:1.5rem 0;}
.infographic img{width:100%;max-width:720px;height:auto;display:block;}
.infographic figcaption{font-size:.82rem;color:var(--text-muted);margin-top:.4rem;}
@media (max-width:820px){ .showcase-grid{grid-template-columns:1fr;} .showcase-grid img{height:200px;} }

.games-cover{margin:0 0 1.25rem;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);line-height:0;}
.games-cover img{width:100%;height:auto;display:block;}

/* real brand logo (transparent PNG, 355x120) - shown at true aspect, fit to sidebar */
.brand--logo{display:block;}
.brand--logo img{display:block;width:auto;max-width:100%;height:auto;}
.sidebar-brand{align-items:flex-start;}

.app-footer-disclaimer{font-size:.78rem;line-height:1.55;color:#7d8ba3;max-width:90ch;margin:0 0 .75rem;}
.app-footer-disclaimer a{color:var(--cyan-300);}