/* ===== Goalmira theme — plain light portal (overrides main.css + subpage inline styles) ===== */
:root{
  --ac:#157a57; --acbtn:#1b8f66; --acbar:#1f9c7a;
  --bg:#f3f4f6; --card:#ffffff; --line:#d9dde1; --line2:#e6e9ec;
  --tx:#333333; --mut:#6f7780;
}

/* base */
body{ background:var(--bg)!important; color:var(--tx)!important;
  font-family:Arial,"Helvetica Neue",Helvetica,"Microsoft Yahei",sans-serif!important; }
a{ color:var(--ac); }

/* header: white bar, dark icons/text (beats inline filter + color:#fff) */
header{ background:#ffffff!important; border-bottom:1px solid var(--line)!important; box-shadow:none!important; position:static; }
header .logo{ color:var(--tx)!important; }
header .icon_sea img, header .icon_top img{ filter:brightness(0)!important; opacity:.65; }
header .icon_sea, header .icon_top{ color:var(--tx)!important; }

/* breadcrumb */
.crumb{ color:var(--mut)!important; }
.crumb a{ color:var(--ac)!important; }
.crumb p{ color:var(--tx)!important; }

/* hero: flat light panel, no gradient/confetti/trophy */
.wc-hero{
  background:var(--card); border:1px solid var(--line); border-radius:4px;
  padding:14px 14px; margin:12px 0 14px; text-align:left; box-shadow:none;
}
.wc-confetti{ display:none!important; }
.wc-hero .trophy{ display:none!important; }
.wc-hero .wc-badge{
  display:inline-block; font-size:11px; letter-spacing:1px; font-weight:700;
  color:var(--ac); background:transparent; padding:0; border-radius:0; margin-bottom:4px;
}
.wc-hero h1{
  font-size:1.25rem; font-weight:700; margin:2px 0 6px; line-height:1.35;
  color:var(--tx); background:none; -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:currentColor;
}
.wc-hero p{ color:var(--mut); font-size:13px; line-height:1.6; max-width:none; margin:0; }

/* section header: left accent bar + plain title */
.game-section{ border-bottom:1px solid var(--line2); margin-bottom:22px; padding-bottom:18px; }
.section-title{
  display:block; font-size:1.05rem; font-weight:700; color:var(--ac);
  border-left:4px solid var(--acbar); padding-left:8px; margin:18px 0 12px;
}

/* game cards: centered, white, bordered, with a Play button */
.gamelist{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }  /* mobile-first: 3 per row */
.gamelist li a{
  display:block; background:var(--card); border:1px solid var(--line); border-radius:4px;
  color:var(--tx); overflow:hidden; text-align:center; padding-bottom:10px; box-shadow:none;
  transition:border-color .15s;
}
.gamelist li a:hover{ transform:none!important; box-shadow:none!important; border-color:var(--acbtn); }
.gamelist .thumb{ aspect-ratio:1; background:#ececec; }
.gamelist .thumb img{ width:100%; height:100%; object-fit:cover; }
.gamelist dl{ padding:8px 8px 0; }
.gamelist dt{ font-size:13px; color:var(--tx); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gamelist dd{ font-size:12px; color:var(--mut); display:flex; gap:10px; justify-content:center; }
.gamelist li a::after{
  content:"Play"; display:inline-block; margin:8px auto 0;
  background:var(--acbtn); color:#fff; font-size:12px; font-weight:700;
  padding:3px 18px; border-radius:3px;
}
.gamelist .card-badge{ position:absolute; top:4px; left:4px; width:34px; height:20px; z-index:1; }
.star-rank{
  position:absolute; top:6px; left:6px; z-index:3;
  background:var(--acbtn); color:#fff; font-weight:700; font-size:11px;
  padding:1px 6px; border-radius:3px; box-shadow:none;
}
/* featured section: same plain look as the rest */
.game-section.allstar{ border-bottom:1px solid var(--line2); }
.game-section.allstar .section-title{
  color:var(--ac); background:none; box-shadow:none; border-left:4px solid var(--acbar);
  padding:0 0 0 8px; border-radius:0; font-weight:700; display:block;
}
.allstar .gamelist{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.allstar .gamelist li a{ border:1px solid var(--line); background:var(--card); box-shadow:none; }
.allstar .gamelist li a:hover{ box-shadow:none; transform:none; border-color:var(--acbtn); }
.allstar .gamelist dt{ font-weight:600; }

/* category + search popups: light */
.categoryBox .box{ background:#fff; border:1px solid var(--line); }
.categoryBox .close{ color:var(--tx); }
.categoryBox .navList a{ color:var(--tx)!important; }
.categoryBox .cate h2{ color:var(--ac); }
.catelist a{ color:var(--mut); }
.catelist a:hover{ color:var(--ac); }
.searchBox{ background:rgba(0,0,0,.45); }
.searchBox .comMain .container{ background:#fff; border-radius:4px; padding-top:8px; }
.searchBox .searB .back{ color:var(--tx); }
.searchBox .searchMain{ background:#fff; border:1px solid var(--line); }
.searchBox input{ color:var(--tx); }
.searchBox input::placeholder{ color:#9aa3ab; }
.searchBox button{ background:var(--acbtn); color:#fff; }
.searchBox h2{ color:var(--mut); }

/* footer + back-to-top */
footer{ border-top:1px solid var(--line)!important; background:#fafbfc; }
footer .abot p{ color:var(--mut)!important; }
footer .bot{ border-top:1px solid var(--line2)!important; }
footer .bot nav a{ color:var(--ac)!important; }
footer .copy{ color:#9aa3ab!important; }
.top_lea{ background:var(--acbtn)!important; color:#fff!important; box-shadow:none!important; }

/* ===== subpage inline-style overrides (use !important to beat inline <style>) ===== */
/* game pages (.gp) */
.gp .crumb{ color:var(--mut)!important; }
.gp .crumb a{ color:var(--ac)!important; }
.gp h1{ color:var(--tx)!important; }
.gp h2{ color:var(--tx)!important; }
.gp p{ color:#555!important; }
.gp .meta{ color:var(--mut)!important; }
.gp .fsbtn{ background:var(--acbtn)!important; color:#fff!important; }
.gp .rel a{ color:var(--tx)!important; }
.gp .rel dt{ color:var(--tx)!important; }

/* legal pages (.doc) + about (.legal-page) + blog (.post-body/.post-meta) */
.doc h1, .legal-page h1, .post-body h1{ color:var(--tx)!important; }
.doc h2, .legal-page h2, .post-body h2{ color:var(--ac)!important; }
.doc p, .doc li, .legal-page p, .legal-page li, .post-body p, .post-body ul, .post-body li{ color:#555!important; }
.doc a, .legal-page a, .post-body a, .back, .home, .post-meta{ color:var(--ac)!important; }
.doc .stamp, .post-meta{ color:var(--mut)!important; }
.card{ background:#fff!important; border:1px solid var(--line)!important; }
.card .row{ color:var(--tx)!important; }
.card .row b{ color:var(--ac)!important; }

/* ===== responsive grid: 3 per row on phones (like the other game portals), more on bigger screens ===== */
@media (min-width:600px){
  .gamelist, .allstar .gamelist{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
}
@media (min-width:900px){
  .gamelist, .allstar .gamelist{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
}
/* tighten cards on small phones so 3-up stays readable */
@media (max-width:520px){
  .gamelist dl{ padding:6px 5px 0; }
  .gamelist dt{ font-size:12px; }
  .gamelist dd{ font-size:10px; gap:5px; flex-wrap:wrap; }
  .gamelist li a{ padding-bottom:8px; }
  .gamelist li a::after{ font-size:11px; padding:3px 10px; margin-top:6px; }
  .section-title{ font-size:1rem; }
  .wc-hero h1{ font-size:1.15rem; }
  .wc-hero{ padding:12px; }
}

/* ===== game player: ghana-style cover + big Play + large play area (light) ===== */
.playGame{ position:relative!important; max-height:80vh!important; border:1px solid var(--line); border-radius:6px; background:#000; margin:4px 0 12px; overflow:hidden; }
/* make cover + iframe always fill the play box */
.playGame .iframe_img, .playGame .game_iframe{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; }
.iframe_img{ background:#ececec!important; cursor:pointer; }
.iframe_img img{ width:100%!important; height:100%!important; object-fit:cover!important; max-width:none!important; max-height:none!important; }
.bbc{ background:rgba(0,0,0,.25)!important; }
.bbc a{ background:var(--acbtn)!important; color:#fff!important; box-shadow:none!important; padding:13px 40px!important; border-radius:6px!important; font-size:1.05rem!important; font-weight:700; }
.playGame .fsBtn{ background:var(--acbtn)!important; color:#fff!important; font-size:14px!important; font-weight:700; padding:8px 16px!important; border-radius:6px!important; box-shadow:0 2px 6px rgba(0,0,0,.4)!important; }
/* phone: game fills most of the screen */
@media (max-width:600px){
  .playGame{ aspect-ratio:auto!important; height:calc(100vh - 150px)!important; max-height:none!important; border-radius:0!important; }
}
/* CSS pseudo-fullscreen — works on iPhone too (iOS blocks real fullscreen on non-video) */
.playGame.fs-on{ position:fixed!important; inset:0!important; width:100vw!important; height:100vh!important; max-height:none!important; margin:0!important; z-index:99999!important; border:0!important; border-radius:0!important; }
.playGame.fs-on .fsBtn{ display:block!important; position:fixed!important; top:10px; right:10px; z-index:100000!important; }