/* The Net Press — 1win App Review
   Page-scoped styles. Reuses tokens from ../styles.css (colors, radius,
   shadow, fonts) so this page matches the rest of the site in both
   light and dark mode without touching the shared stylesheet. */

:root{
  --win-green: #0e9f6e;
  --win-green-dark: #0b7d57;
  --win-amber: #b3670e;
  --win-amber-soft: #fbf1e3;
}
:root[data-theme="dark"]{
  --win-amber-soft: #2a2013;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --win-amber-soft: #2a2013;
  }
}

/* Disclosure strip */
.promo-banner{
  background:var(--text);
  color:var(--bg);
  text-align:center;
  font-size:.76rem;
  letter-spacing:.02em;
  padding:8px 16px;
}
.promo-banner strong{color:inherit}

/* This page's content needs full-width tables/grids, so relax the
   shared .article-body max-width and cap only prose paragraphs. */
.article-body{max-width:none}
.article-body p{max-width:70ch}
.article-body ul, .article-body ol{max-width:70ch}

/* The shared drop-cap rule (.article-body p:first-of-type::first-letter)
   is scoped per parent, so every boxed component with a single <p> (promo
   code, disclosure, verdict panel...) was picking up its own giant drop
   cap. Disable it globally on this page and re-enable it only on the
   true opening paragraph via .lede. */
.article-body p:first-of-type::first-letter{
  all:unset; float:none; padding:0; font:inherit; color:inherit;
}
.article-body p.lede:first-of-type::first-letter{
  font-family:var(--font-serif);
  font-size:3.2rem;
  font-weight:700;
  float:left;
  line-height:.85;
  padding:6px 8px 0 0;
  color:var(--accent);
}

/* Verdict box */
.verdict-box{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:28px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 28px;
  margin:22px 0;
}
.verdict-score{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-right:28px;
  border-right:1px solid var(--border);
  min-width:120px;
}
.verdict-score .num{
  font-family:var(--font-serif);
  font-size:2.6rem;
  font-weight:700;
  color:var(--accent);
  line-height:1;
}
.verdict-score .of5{font-size:1rem; color:var(--text-muted); font-weight:400}
.verdict-score .label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted);
  margin-top:8px; text-align:center;
}

.stars{
  position:relative;
  display:inline-block;
  font-size:1.1rem;
  line-height:1;
  font-family:Georgia, serif;
  letter-spacing:2px;
  color:var(--border);
}
.stars::before{content:"★★★★★"}
.stars .fill{
  position:absolute; top:0; left:0; overflow:hidden;
  white-space:nowrap; color:#f5a623;
}
.stars .fill::before{content:"★★★★★"}

.rating-bars{display:flex; flex-direction:column; gap:11px}
.rating-bar{display:grid; grid-template-columns:150px 1fr 34px; align-items:center; gap:12px; font-size:.86rem}
.rating-bar .track{
  height:8px; border-radius:999px; background:var(--accent-soft); overflow:hidden;
}
.rating-bar .fill{display:block; height:100%; background:var(--accent); border-radius:999px}
.rating-bar .val{color:var(--text-muted); font-weight:600; text-align:right}

/* Quick facts + data tables */
.data-table{width:100%; border-collapse:collapse; margin:18px 0; font-size:.92rem}
.data-table caption{text-align:left; font-size:.78rem; color:var(--text-muted); margin-bottom:8px}
.data-table th, .data-table td{
  text-align:left; padding:11px 14px; border-bottom:1px solid var(--border);
}
.data-table thead th{
  background:var(--accent-soft); color:var(--accent-dark);
  font-size:.76rem; text-transform:uppercase; letter-spacing:.06em;
  border-bottom:none;
}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:var(--accent-soft)}
.table-scroll{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border)}
.table-scroll .data-table{margin:0; border:none}
.table-scroll .data-table th:first-child, .table-scroll .data-table td:first-child{padding-left:16px}

.quick-facts{list-style:none; margin:0; padding:0; font-size:.88rem}
.quick-facts li{
  display:flex; justify-content:space-between; gap:10px;
  padding:9px 0; border-top:1px dashed var(--border);
}
.quick-facts li:first-child{border-top:none}
.quick-facts .k{color:var(--text-muted)}
.quick-facts .v{font-weight:600; text-align:right}

/* CTA buttons */
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin:22px 0}
.btn-cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--win-green); color:#fff;
  padding:14px 22px; border-radius:12px;
  text-decoration:none; font-weight:700; font-size:.95rem;
  box-shadow:0 8px 20px -10px rgba(14,159,110,.6);
  border:none;
}
.btn-cta:hover{background:var(--win-green-dark)}
.btn-cta .icon{font-size:1.2rem}
.btn-cta small{display:block; font-weight:400; font-size:.72rem; opacity:.85}
.btn-cta--ghost{
  background:transparent; color:var(--accent); border:1px solid var(--accent);
  box-shadow:none;
}
.btn-cta--ghost:hover{background:var(--accent-soft)}
.cta-note{font-size:.76rem; color:var(--text-muted); margin-top:-10px; margin-bottom:22px}

/* Table of contents */
.toc{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; margin:22px 0; box-shadow:var(--shadow);
}
.toc h2{font-family:var(--font-serif); font-size:1.05rem; margin:0 0 12px}
.toc ol{margin:0; padding-left:1.2em; columns:2; column-gap:24px; font-size:.86rem}
.toc li{margin-bottom:8px; break-inside:avoid}
.toc a{color:var(--text); text-decoration:none}
.toc a:hover{color:var(--accent)}
aside .widget .toc{margin:0; padding:0; border:none; box-shadow:none}
aside .widget .toc ol{columns:1}

/* Section anchors offset for sticky header */
.article-body h2, .article-body h3{scroll-margin-top:90px}
.article-body h2{
  font-family:var(--font-serif); font-size:1.5rem; margin:40px 0 14px;
  padding-bottom:8px; border-bottom:2px solid var(--text);
}
.article-body h3{font-family:var(--font-serif); font-size:1.18rem; margin:26px 0 10px}

/* Screenshot gallery */
.screenshot-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin:20px 0 28px;
}
.screenshot-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
}
.screenshot-card__media{
  aspect-ratio:9/16; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); font-size:2.6rem; color:var(--accent); opacity:.6;
}
.screenshot-card figcaption{padding:12px 14px; font-size:.82rem; color:var(--text-muted)}
.screenshot-card figcaption strong{display:block; color:var(--text); font-size:.86rem; margin-bottom:2px}

/* Pros & cons */
.pros-cons{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:20px 0}
.pc-col{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow);
}
.pc-col h3{margin:0 0 14px; font-family:var(--font-serif); font-size:1.05rem}
.pc-col ul{list-style:none; margin:0; padding:0; font-size:.9rem}
.pc-col li{display:flex; gap:10px; padding:8px 0; border-top:1px dashed var(--border)}
.pc-col li:first-child{border-top:none}
.pc-col--pros h3{color:var(--win-green)}
.pc-col--pros li::before{content:"✓"; color:var(--win-green); font-weight:700}
.pc-col--cons h3{color:#c0392b}
.pc-col--cons li::before{content:"✕"; color:#c0392b; font-weight:700}

/* Promo code chip */
.promo-code{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--accent-soft); border:1px dashed var(--accent);
  border-radius:12px; padding:16px 18px; margin:18px 0;
}
.promo-code .chip{
  font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight:700; letter-spacing:.05em; background:var(--surface);
  border:1px solid var(--accent); color:var(--accent-dark);
  padding:8px 14px; border-radius:8px; font-size:.95rem;
}
.promo-code p{margin:0; font-size:.84rem; color:var(--text-muted)}

/* Disclosure / responsible gambling boxes */
.rg-box{
  background:var(--win-amber-soft); border:1px solid var(--win-amber);
  border-radius:var(--radius); padding:18px 20px; margin:26px 0;
  font-size:.88rem; color:var(--text);
}
.rg-box h3{margin:0 0 8px; font-size:.95rem; color:var(--win-amber)}
.rg-box p{margin:0 0 8px}
.rg-box p:last-child{margin-bottom:0}
.rg-box a{color:var(--accent); font-weight:600}

.disclosure-box{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:16px 18px; margin:22px 0; font-size:.84rem; color:var(--text-muted);
}
.disclosure-box strong{color:var(--text)}

/* FAQ accordion (native <details>, no JS) */
.faq-list{display:flex; flex-direction:column; gap:10px; margin:18px 0}
.faq-item{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; padding:16px 20px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-weight:600; font-size:.95rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+"; font-size:1.3rem; color:var(--accent); font-weight:400;
  flex-shrink:0; transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 20px 18px; color:var(--text-muted); font-size:.92rem; max-width:70ch}

/* Verdict CTA panel near end of article */
.verdict-panel{
  background:linear-gradient(135deg, var(--accent-soft), var(--surface));
  border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; margin:30px 0; text-align:center; box-shadow:var(--shadow);
}
.verdict-panel h2{border:none; margin:0 0 10px; padding:0}
.verdict-panel p{max-width:60ch; margin:0 auto 18px; color:var(--text-muted)}
.verdict-panel .cta-row{justify-content:center}

/* Sidebar widget tweaks */
.widget .rg-box{margin:0}
.widget-icon-logo{
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.widget-icon-logo img{width:34px; height:34px; border-radius:8px}
.widget-icon-logo span{font-family:var(--font-serif); font-weight:700; font-size:1.05rem}

/* Responsive */
@media (max-width:980px){
  .screenshot-grid{grid-template-columns:repeat(2, 1fr)}
  .pros-cons{grid-template-columns:1fr}
}
@media (max-width:760px){
  .verdict-box{grid-template-columns:1fr}
  .verdict-score{border-right:none; border-bottom:1px solid var(--border); padding-right:0; padding-bottom:16px}
  .rating-bar{grid-template-columns:110px 1fr 30px; gap:8px}
  .toc ol{columns:1}
  .screenshot-grid{grid-template-columns:repeat(2, 1fr)}
  .cta-row{flex-direction:column}
  .btn-cta{justify-content:center}
}