:root{
  --site-bg:#f8fafc;
  --site-surface:#ffffff;
  --site-surface-soft:#f8fafc;
  --site-text:#111827;
  --site-muted:#4b5563;
  --site-line:#e5e7eb;
  --site-accent:#2563eb;
  --site-accent-strong:#1d4ed8;
  --site-teal:#0f766e;
  --site-gold:#b45309;
  --site-coral:#c2410c;
  --site-danger:#be123c;
  --site-shadow:0 10px 28px rgba(15,23,42,.06);
  --site-radius:16px;
  --site-radius-lg:20px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100vh;
  font-family:"Aptos","Segoe UI Variable","Segoe UI",system-ui,sans-serif;
  color:var(--site-text);
  background:var(--site-bg);
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  border:0;
  background:none;
}

img,
svg{
  max-width:100%;
  display:block;
}

.page-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.site-wrap{
  width:min(1180px,calc(100% - 28px));
  margin:0 auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:40;
  border-bottom:1px solid var(--site-line);
  background:rgba(248,250,252,.95);
  backdrop-filter:blur(12px);
}

.site-header-inner{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:68px;
  padding:10px 0;
  position:relative;
}

.site-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}

.site-brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0;
  background:transparent;
  border:0;
  color:var(--site-text);
  font-weight:900;
  letter-spacing:.01em;
}

.site-brand-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--site-accent);
}

.site-nav{
  display:flex;
  align-items:center;
  gap:6px;
}

.site-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:var(--site-muted);
  font-size:.88rem;
  font-weight:800;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"]{
  border-color:var(--site-line);
  background:#fff;
  color:var(--site-text);
  box-shadow:0 8px 18px rgba(15,23,42,.05);
  transform:translateY(-1px);
}

.site-more{
  position:relative;
}

.site-more > summary{
  list-style:none;
}

.site-more > summary::-webkit-details-marker{
  display:none;
}

.site-more-summary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:38px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:var(--site-muted);
  font-size:.88rem;
  font-weight:800;
  cursor:pointer;
  user-select:none;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease;
}

.site-more-summary::after{
  content:"▾";
  font-size:.72rem;
  line-height:1;
}

.site-more[open] > .site-more-summary,
.site-more-summary:hover,
.site-more-summary.is-active{
  border-color:var(--site-line);
  background:#fff;
  color:var(--site-text);
  box-shadow:0 8px 18px rgba(15,23,42,.05);
  transform:translateY(-1px);
}

.site-more-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:50;
  display:grid;
  gap:4px;
  min-width:210px;
  padding:8px;
  border:1px solid var(--site-line);
  border-radius:16px;
  background:rgba(255,255,255,.98);
  box-shadow:var(--site-shadow);
}

.site-more-menu a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:0 12px;
  border-radius:12px;
  color:var(--site-muted);
  font-size:.9rem;
  font-weight:800;
}

.site-more-menu a:hover,
.site-more-menu a[aria-current="page"]{
  background:#eff6ff;
  color:var(--site-accent-strong);
}

.site-mobile-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border:1px solid var(--site-line);
  border-radius:12px;
  background:#fff;
  color:var(--site-text);
  font-size:.9rem;
  font-weight:800;
  box-shadow:none;
}

.site-mobile-menu{
  position:absolute;
  inset:100% 0 auto 0;
  z-index:38;
  border-bottom:1px solid var(--site-line);
  background:rgba(248,250,252,.98);
  box-shadow:0 18px 32px rgba(15,23,42,.08);
  backdrop-filter:blur(12px);
}

.site-mobile-menu[hidden]{
  display:none;
}

.site-mobile-menu-inner{
  padding:12px 0 14px;
}

.site-mobile-nav{
  display:grid;
  gap:8px;
}

.site-mobile-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--site-line);
  border-radius:14px;
  background:#fff;
  color:var(--site-text);
  font-size:.95rem;
  font-weight:800;
}

.site-mobile-nav a[aria-current="page"]{
  border-color:#bfdbfe;
  background:#eff6ff;
  color:var(--site-accent-strong);
}

main{
  flex:1;
  padding-bottom:22px;
}

.hero{
  padding:24px 0 12px;
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
  gap:14px;
  align-items:start;
}

.hero-copy{
  max-width:760px;
}

.eyebrow{
  margin:0 0 10px;
  color:var(--site-accent);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.hero h1,
.section h2,
.section h3,
.card h3,
.panel h3{
  margin:0;
  letter-spacing:0;
}

.hero h1{
  max-width:820px;
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1.06;
  font-weight:950;
}

.hero-lead{
  max-width:760px;
  margin:12px 0 0;
  color:var(--site-muted);
  font-size:1rem;
  line-height:1.65;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.hero-chips,
.status-chips,
.button-row,
.button-row-wrap,
.tool-actions,
.tab-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.button,
.button-secondary,
.button-ghost,
.small-button,
.danger-button,
.input-button,
.tab,
.hero-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--site-line);
  border-radius:12px;
  background:#fff;
  color:var(--site-text);
  font-weight:800;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(15,23,42,.05);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease,color .16s ease;
}

.button:hover,
.button-secondary:hover,
.button-ghost:hover,
.small-button:hover,
.danger-button:hover,
.input-button:hover,
.tab:hover,
.hero-button:hover,
.card:hover,
.mini-card:hover,
.tool-card:hover,
.feature-card:hover,
.legal-card:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}

.button.primary,
.button-ghost.primary,
.input-button.primary{
  border-color:transparent;
  background:var(--site-accent);
  color:#fff;
  box-shadow:0 8px 20px rgba(37,99,235,.14);
}

.button.primary:hover,
.button-ghost.primary:hover,
.input-button.primary:hover{
  background:var(--site-accent-strong);
}

.button.secondary,
.button-secondary{
  border-color:#cbd5e1;
  background:#fff;
  box-shadow:none;
}

.button.secondary:hover,
.button-secondary:hover{
  background:#f8fafc;
}

.chip,
.status-chip,
.tag,
.site-chip,
.pricing-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 12px;
  border:1px solid #dbeafe;
  border-radius:999px;
  background:#eff6ff;
  color:var(--site-accent-strong);
  font-size:.8rem;
  font-weight:850;
  white-space:nowrap;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid #dbeafe;
  background:#eff6ff;
  color:var(--site-accent-strong);
  font-size:.75rem;
  font-weight:900;
  white-space:nowrap;
}

.pill.warning{
  border-color:rgba(180,83,9,.16);
  background:rgba(180,83,9,.12);
  color:var(--site-gold);
}

.pill.neutral{
  border-color:var(--site-line);
  background:#f8fafc;
  color:var(--site-muted);
}

.hero-side,
.panel,
.card,
.mini-card,
.metric-card,
.tool-card,
.legal-card,
.form-card,
.result-card,
.content-card,
.feature-card,
.summary-card,
.details-card{
  border:1px solid var(--site-line);
  border-radius:var(--site-radius-lg);
  background:#fff;
  box-shadow:var(--site-shadow);
}

.hero-side{
  padding:16px;
  position:relative;
  overflow:hidden;
}

.hero-side::before,
.panel::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:rgba(37,99,235,.14);
}

.hero-side-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.hero-side-card{
  padding:12px 13px;
  border:1px solid var(--site-line);
  border-radius:14px;
  background:var(--site-surface-soft);
}

.hero-side-card span{
  display:block;
  color:var(--site-muted);
  font-size:.72rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.hero-side-card strong{
  display:block;
  margin-top:4px;
  font-size:.96rem;
  line-height:1.28;
}

.section{
  padding:20px 0 0;
  scroll-margin-top:76px;
}

.section-head,
.panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.panel-head{
  margin-bottom:12px;
}

.panel-title{
  margin:0;
  color:var(--site-accent-strong);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.section-copy,
.section-footnote,
.panel-note,
.mini-note,
.meta-note,
.result-detail,
.stat-note,
.hero-copy-small{
  margin:0;
  color:var(--site-muted);
  line-height:1.6;
}

.section-copy,
.panel-note,
.mini-note,
.meta-note,
.result-detail,
.stat-note{
  font-size:.92rem;
}

.section-title{
  margin:0;
  font-size:clamp(1.4rem,2.5vw,2rem);
  line-height:1.1;
  font-weight:950;
}

.panel{
  position:relative;
  overflow:hidden;
  padding:16px;
}

.card-grid,
.tool-grid,
.overview-grid,
.resource-grid,
.metric-grid,
.legal-grid,
.faq-grid,
.preview-grid{
  display:grid;
  gap:10px;
}

.card-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.tool-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.overview-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.resource-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.metric-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.legal-grid,
.faq-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.preview-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.card,
.mini-card,
.tool-card,
.feature-card,
.summary-card,
.metric-card,
.content-card,
.legal-card,
.form-card,
.result-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
}

.card,
.mini-card,
.tool-card,
.feature-card,
.legal-card{
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}

.card:hover,
.mini-card:hover,
.tool-card:hover,
.feature-card:hover,
.legal-card:hover{
  border-color:#bfdbfe;
}

.card h3,
.mini-card h3,
.tool-card h3,
.feature-card h3,
.legal-card h3,
.form-card h3,
.result-card h3,
.content-card h3{
  font-size:1.02rem;
  line-height:1.2;
}

.card p,
.mini-card p,
.tool-card p,
.feature-card p,
.legal-card p,
.content-card p{
  margin:0;
  color:var(--site-muted);
  line-height:1.55;
}

.card-link{
  margin-top:auto;
  color:var(--site-accent-strong);
  font-size:.86rem;
  font-weight:900;
}

.section-block{
  display:grid;
  gap:12px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.field{
  display:grid;
  gap:6px;
}

.field span{
  color:var(--site-muted);
  font-size:.82rem;
  font-weight:800;
}

.input,
.select,
.textarea{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1px solid var(--site-line);
  border-radius:12px;
  background:#fff;
  color:var(--site-text);
}

.textarea{
  min-height:120px;
  resize:vertical;
}

.input:focus,
.select:focus,
.textarea:focus{
  outline:2px solid rgba(37,99,235,.16);
  outline-offset:1px;
  border-color:rgba(37,99,235,.34);
}

.wide{
  grid-column:1 / -1;
}

.tool-actions{
  margin-top:auto;
}

.tab-bar{
  align-items:center;
}

.tab.active{
  border-color:#bfdbfe;
  background:#eff6ff;
  color:var(--site-accent-strong);
}

.result-card strong,
.summary-value,
.stat-value,
.feature-value{
  display:block;
  font-size:clamp(1.18rem,2vw,1.7rem);
  line-height:1.15;
  font-weight:950;
}

.stat-stack{
  display:grid;
  gap:8px;
}

.status-list{
  display:grid;
  gap:10px;
}

.status-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:13px 14px;
  border:1px solid var(--site-line);
  border-radius:16px;
  background:#fff;
}

.status-row strong{
  display:block;
  font-size:.98rem;
}

.status-row span{
  display:block;
  color:var(--site-muted);
  font-size:.88rem;
  line-height:1.45;
}

.footer{
  padding:26px 0 24px;
  margin-top:14px;
}

.footer-shell{
  padding:20px 0 0;
  border-top:1px solid var(--site-line);
  background:transparent;
}

.site-footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  gap:18px;
}

.footer-brand{
  display:grid;
  gap:10px;
}

.footer-brand p{
  margin:0;
  color:var(--site-muted);
  line-height:1.55;
}

.footer-group{
  display:grid;
  gap:10px;
}

.footer-group h3{
  margin:0;
  color:var(--site-accent-strong);
  font-size:.88rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.footer-group a{
  color:var(--site-muted);
  font-size:.92rem;
  line-height:1.55;
}

.footer-group a:hover{
  color:var(--site-accent-strong);
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid var(--site-line);
  color:var(--site-muted);
  font-size:.92rem;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
}

.footer-links a{
  color:var(--site-muted);
}

.footer-links a:hover{
  color:var(--site-accent-strong);
}

.note-box{
  padding:13px 14px;
  border:1px solid var(--site-line);
  border-radius:16px;
  background:#fff;
  color:var(--site-muted);
  line-height:1.6;
}

.rich-list{
  display:grid;
  gap:8px;
}

.rich-list li{
  line-height:1.55;
  color:var(--site-muted);
}

.split-output{
  display:grid;
  gap:8px;
}

.split-output a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border:1px solid var(--site-line);
  border-radius:12px;
  background:#fff;
  color:var(--site-accent-strong);
  font-weight:800;
}

.split-output a:hover{
  border-color:#bfdbfe;
  background:#eff6ff;
}

.details-card{
  padding:14px;
}

.ad-slot,
[data-ad-slot]{
  display:none;
}

body[data-page="games"] .hero-copy{
  max-width:700px;
}

body[data-page="games"] .hero-side{
  background:#111827;
  border-color:#0f172a;
  color:#e5e7eb;
}

body[data-page="games"] .hero-side::before{
  background:rgba(255,255,255,.08);
}

body[data-page="games"] .hero-side-card{
  background:rgba(255,255,255,.06);
  border-color:rgba(148,163,184,.18);
}

body[data-page="games"] .hero-side-card span{
  color:#94a3b8;
}

body[data-page="games"] .hero-side-card strong{
  color:#f8fafc;
}

body[data-page="home"] .hero{
  padding-bottom:8px;
}

body[data-page="home"] .hero-grid{
  grid-template-columns:minmax(0,1fr);
}

body[data-page="home"] .hero-copy{
  max-width:760px;
}

@media (max-width: 1040px){
  .hero-grid,
  .site-footer-grid{
    grid-template-columns:1fr;
  }

  .card-grid,
  .tool-grid,
  .resource-grid,
  .preview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .metric-grid,
  .legal-grid,
  .faq-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 960px){
  .site-nav{
    display:none;
  }

  .site-mobile-toggle{
    display:inline-flex;
  }

  .site-header-inner{
    min-height:64px;
  }
}

@media (max-width: 720px){
  .site-wrap{
    width:min(calc(100% - 20px),560px);
  }

  .hero{
    padding-top:18px;
  }

  .hero h1{
    font-size:clamp(1.9rem,8vw,2.8rem);
  }

  .hero-actions,
  .button-row,
  .button-row-wrap,
  .tab-bar{
    gap:8px;
  }

  .button,
  .button-secondary,
  .button-ghost,
  .small-button,
  .danger-button,
  .input-button,
  .tab{
    min-height:42px;
  }

  .card-grid,
  .tool-grid,
  .resource-grid,
  .preview-grid,
  .overview-grid,
  .metric-grid,
  .legal-grid,
  .faq-grid,
  .form-grid,
  .hero-side-grid{
    grid-template-columns:1fr;
  }

  .card,
  .mini-card,
  .tool-card,
  .feature-card,
  .summary-card,
  .metric-card,
  .content-card,
  .legal-card,
  .form-card,
  .result-card{
    padding:13px;
  }

  .panel{
    padding:14px;
  }

  .hero-side{
    padding:14px;
  }

  .footer{
    padding:22px 0 20px;
  }

  .footer-bottom{
    align-items:flex-start;
  }

  .status-row{
    grid-template-columns:1fr;
  }
}