/*
Theme Name: Play Center Fun — NEO
Theme URI: https://play-center-fun.com/
Author: ChatGPT
Description: Clean light theme with sidebar layout, mobile drawer, masonry cards and comparison tables. Built for licensed directory sites with excellent UX.
Version: 2.0.0
Text Domain: play-center-fun-neo
License: GPLv2 or later
*/

:root{
  --bg: #ffffff;
  --fg: #0b1220;
  --muted: #5d6b85;
  --border: #e6e9f0;
  --acc: #0ea5b6;      /* teal */
  --acc2: #3b82f6;     /* blue */
  --acc-grad: linear-gradient(90deg, var(--acc), var(--acc2));
  --radius: 18px;
  --container: 1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.section{padding:56px 0; border-top:1px solid var(--border)}

.grid{display:grid; gap:20px}
.grid-2{grid-template-columns: 280px 1fr} /* sidebar + content */
.grid-3{grid-template-columns: repeat(3,1fr)}
.grid-4{grid-template-columns: repeat(4,1fr)}

@media (max-width: 1080px){
  .grid-2{grid-template-columns: 1fr}
}

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:22px;
  box-shadow: 0 4px 16px rgba(10,20,40,.04);
}

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

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius: 12px;
  background: var(--acc-grad); color:#fff; font-weight: 800; border:0;
  box-shadow: 0 6px 16px rgba(14,165,182,.25);
}
.btn.alt{background: transparent; color: var(--fg); border:2px solid var(--acc)}

.badge{display:inline-block; padding:4px 10px; border-radius:999px; background:#e8f7fb; color:#0b6b78; border:1px solid #cfeef5; font-size:.85rem}

.note{color: var(--muted); font-size:.96rem}

header.header{
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px}
.brand .logo{width:34px;height:34px;border-radius:10px;background:var(--acc-grad)}
.brand .title{font-weight:900; letter-spacing:.2px}
.menu{display:flex; gap:16px; flex-wrap:wrap}
.menu a{padding:8px 10px; border-radius:10px}
.menu a:hover{background:#f3f6fb}

.hamburger{display:none; width:40px;height:40px; border-radius:12px; border:1px solid var(--border); background:#fff; align-items:center; justify-content:center}
@media (max-width: 900px){
  .menu{display:none}
  .hamburger{display:flex}
}

.drawer{position:fixed; inset:0 0 0 auto; width:82%; max-width:360px; background:#fff; border-left:1px solid var(--border); transform: translateX(100%); transition:.25s; z-index:200}
.drawer.open{transform: translateX(0)}
.drawer .drawer-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border)}
.drawer .drawer-menu{padding:10px 14px; display:flex; flex-direction:column; gap:8px}
.drawer .drawer-menu a{padding:10px 12px; border-radius:10px}
.drawer .drawer-menu a:hover{background:#f3f6fb}

.hero{padding:40px 0 0}
.hero .headline{font-size:2.2rem; line-height:1.15; margin:8px 0}
.hero .sub{font-size:1.05rem; color: var(--muted)}
.hero .hero-visual{
  border-radius: 22px; border:1px dashed #cdd6e6; background:#f8fbff; height:260px;
  display:flex; align-items:center; justify-content:center; color:#a6b4cf; font-weight:800
}

.sidebar .sticky{position: sticky; top:86px; display:flex; flex-direction:column; gap:10px}
.sidebar .toc{display:flex; flex-direction:column; gap:8px}
.sidebar .toc a{color:#3b4a6b}

.masonry{column-count:3; column-gap:18px}
@media (max-width:1100px){ .masonry{column-count:2} }
@media (max-width:720px){ .masonry{column-count:1} }
.masonry .mitem{break-inside: avoid; margin-bottom:18px}
.mitem .brand{display:flex; align-items:center; justify-content:space-between}
.mitem .pay{margin-top:6px; color:#5d6b85; font-size:.92rem}

.table{width:100%; border-collapse: collapse; font-size:.98rem}
.table th, .table td{border:1px solid var(--border); padding:12px 10px; text-align:left}
.table th{background:#f6f8fc}

footer.footer{border-top:1px solid var(--border); margin-top:60px}
.footer-grid{display:grid; gap:18px; grid-template-columns: 2fr 1fr 1fr}
@media (max-width: 900px){ .footer-grid{grid-template-columns:1fr} }
.footer-bottom{display:flex; justify-content:space-between; gap:12px; padding:16px 0; margin-top:8px; color:var(--muted); font-size:.95rem; border-top:1px solid var(--border)}