Theme Name: 51Game Theme
Author: Prince
Version: 1.0
Description: 51Game WordPress Theme
*/
/* 51Game - Premium White + Yellow Theme */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --white:#FFFFFF;
  --yellow:#FFD400;
  --yellow-dark:#B8860B;
  --text:#111111;
  --bg:#F5F5F5;
  --border:#EAEAEA;
  --muted:#555;
  --header-bg:#0E0E0E;
  --shadow-yellow:0 10px 30px -10px rgba(255,212,0,.35);
}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  font-size:16px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--yellow-dark);text-decoration:none}
a:hover{text-decoration:underline}

.site-header{
    width:100%;
}

.header-inner{
    width:100%;
    max-width:none !important;
    margin:0 !important;
}

body.page .site-header,
body.wp-singular .site-header{
    width:100vw;
    margin-left:calc(50% - 50vw);
}
.logo-link{display:flex;align-items:center;gap:10px}
.logo-link img{height:44px;width:auto;filter:drop-shadow(0 2px 6px rgba(255,212,0,.25))}
.brand-name{color:var(--white);font-weight:800;font-size:18px;letter-spacing:.5px}
.main-nav{display:flex;gap:24px}
.main-nav a{
  color:#ddd;font-size:14px;font-weight:600;
  padding:6px 2px;border-bottom:2px solid transparent;
  transition:all .2s;
}
.main-nav a:hover{color:var(--yellow);text-decoration:none}
.main-nav a.active{color:var(--yellow);border-bottom-color:var(--yellow)}
.menu-toggle{display:none;background:none;border:0;color:var(--yellow);font-size:26px;cursor:pointer}

/* CONTAINER */
.page{
  max-width:1100pxpx;
  margin:30px auto;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:10px;
  padding:40px 48px;
  box-shadow:0 4px 20px rgba(0,0,0,.04);
}
h1.page-title{
  font-size:30px;font-weight:800;margin-bottom:18px;
  border-bottom:2px solid var(--border);padding-bottom:14px;
}
.lead{font-size:16px;color:#222;margin-bottom:14px}
.lead strong{color:var(--text)}

/* SECTION HEADING (yellow gradient bar) */
.section-heading{
  background:linear-gradient(90deg,#B8860B,#FFD400);
  color:#fff;
  height:42px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;letter-spacing:.5px;
  font-size:17px;
  margin:34px 0 18px;
  text-align:center;
  box-shadow:0 4px 14px -4px rgba(184,134,11,.4);
}
.sub-heading{
  background:#111;color:#FFD400;
  height:42px;border-radius:8px;
  display:flex;align-items:center;justify-content:flex-start;padding:0 18px;
  font-weight:700;letter-spacing:.5px;font-size:15px;
  margin:24px 0 14px;
  border-left:4px solid var(--yellow);
}

/* IMAGES IN SECTIONS */
.section-image{
  margin:22px auto;
  border:2px solid var(--yellow);
  border-radius:14px;
  box-shadow:0 12px 30px -10px rgba(255,212,0,.45);
  overflow:hidden;
  max-width:340px;
  background:#fff;
}
.section-image img{display:block;width:100%}
.app-icon-wrap{
  display:flex;justify-content:center;margin:24px 0;
}
.app-icon-wrap img{
  width:160px;height:160px;object-fit:contain;
  border:3px solid var(--yellow);
  border-radius:24px;background:#fff;padding:14px;
  box-shadow:0 14px 30px -8px rgba(255,212,0,.5);
}
.btn-register{
  display:block;width:max-content;margin:18px auto;
  background:linear-gradient(90deg,#B8860B,#FFD400);
  color:#fff;font-weight:700;
  padding:12px 34px;border-radius:30px;
  box-shadow:0 8px 20px -6px rgba(184,134,11,.5);
}
.btn-register:hover{text-decoration:none;transform:translateY(-1px)}

/* TABLES */
table.app-table{
  width:100%;border-collapse:collapse;margin:14px 0 8px;
  font-size:15px;
}
.app-table th,.app-table td{
  border:1px solid var(--border);
  padding:11px 14px;text-align:left;
}
.app-table th{
  background:#111;color:var(--yellow);
  font-weight:700;text-align:center;
}
.app-table tr:nth-child(even) td{background:#fafafa}

/* TABLE OF CONTENTS */
.toc{
  background:#fafafa;border:1px solid var(--border);
  border-radius:10px;padding:18px 24px;margin:18px 0;
}
.toc h3{
  font-size:17px;margin-bottom:10px;
  color:var(--text);font-weight:700;
}
.toc ol{margin-left:18px;font-size:14.5px;color:#333}
.toc ol li{margin:4px 0}
.toc a{color:#222}
.toc a:hover{color:var(--yellow-dark)}

/* LISTS */
.content ul,.content ol{margin:10px 0 14px 22px}
.content li{margin:5px 0}
.content p{margin:10px 0}

/* FAQ */
.faq-item{
  background:#111;color:#fff;
  border-radius:8px;margin:10px 0;
  overflow:hidden;border:1px solid #222;
}
.faq-q{
  padding:14px 18px;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  font-weight:700;font-size:15px;
}
.faq-q .plus{color:var(--yellow);font-size:22px;transition:transform .2s}
.faq-item.open .faq-q .plus{transform:rotate(45deg)}
.faq-a{
  display:none;
  padding:0 18px 16px;color:#ddd;font-size:14.5px;
  border-top:1px solid #222;
}
.faq-item.open .faq-a{display:block;padding-top:14px}

/* FOOTER */
.site-footer{
  background:#0E0E0E;color:#bbb;
  padding:30px 20px;margin-top:50px;
  text-align:center;border-top:3px solid var(--yellow);
}
.site-footer img{height:46px;margin:0 auto 10px}
.site-footer p{font-size:13px;margin:6px 0}
.site-footer a{color:var(--yellow)}

/* RESPONSIVE */
@media(max-width:780px){
  .page{padding:24px 18px;margin:14px;border-radius:8px}
  h1.page-title{font-size:24px}
  .section-heading{font-size:14px;height:auto;min-height:42px;padding:8px 12px;text-align:center}
  .main-nav{display:none;position:absolute;top:70px;left:0;right:0;
    background:#0E0E0E;flex-direction:column;gap:0;padding:10px 0;border-top:1px solid #222}
  .main-nav.open{display:flex}
  .main-nav a{padding:12px 20px;border-bottom:1px solid #1a1a1a}
  .menu-toggle{display:block}
  .app-table th,.app-table td{padding:8px;font-size:13.5px}
}

/* ===== Blog cards (listing) ===== */
.blog-list .blog-card{
  background:#fff;border:1px solid var(--border);
  border-radius:10px;padding:22px 26px;margin:18px 0;
  box-shadow:0 2px 10px rgba(0,0,0,.03);
}
.blog-card .blog-title{font-size:22px;font-weight:800;line-height:1.3;margin-bottom:6px}
.blog-card .blog-title a{color:#111}
.blog-card .blog-title a:hover{color:var(--yellow-dark)}
.blog-meta{font-size:13px;color:var(--muted);margin:4px 0 10px}
.blog-meta a{color:var(--yellow-dark)}
.blog-excerpt{font-size:15px;color:#333;margin:8px 0 12px}
.read-more{color:var(--yellow-dark);font-weight:600}
.blog-tags{font-size:13px;color:var(--muted);border-top:1px solid var(--border);padding-top:10px;margin-top:10px}
.back-link{margin-top:30px;font-size:14px}
.back-link a{color:var(--yellow-dark);font-weight:600}

/* Article typography for generated content */
.page h2{font-size:22px;font-weight:800;margin:28px 0 10px;color:#111;border-left:4px solid var(--yellow);padding-left:12px}
.page h3{font-size:17px;font-weight:700;margin:20px 0 8px;color:#222}
.page ul,.page ol{margin:8px 0 14px 22px}
.page li{margin:5px 0}

/* ===== Rating Widget ===== */
.rating-widget{
  margin:40px auto 10px;text-align:center;
  border-top:1px solid var(--border);padding-top:24px;max-width:520px;
}
.rating-title{font-size:18px;font-weight:700;color:#111;margin-bottom:4px}
.rating-sub{font-size:13px;color:var(--muted);margin-bottom:10px}
.stars{display:inline-flex;gap:6px;font-size:34px;line-height:1;cursor:pointer;user-select:none}
.stars .star{color:#d8d8d8;transition:color .15s,transform .15s}
.stars .star.active,.stars:hover .star.hover,.stars .star.hover{color:var(--yellow)}
.stars .star:hover{transform:scale(1.15)}
.rating-avg{font-size:13px;color:#444;margin-top:10px}

.site-header{
    width:100% !important;
    max-width:none !important;
}

.header-inner{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:14px 40px !important;
}