/* ============================================================
   SepoGames — shared styles for every game page
   Change something here and it changes on ALL games at once.
   ============================================================ */

/* ---------- the text block under each game (SEO) ---------- */
.seo{width:100%;max-width:720px;margin:26px auto 8px;padding:0 4px;}
.seo h1{font-size:clamp(20px,5vw,27px);font-weight:800;letter-spacing:-.02em;
  line-height:1.2;color:#F2EEFF;margin-bottom:12px;}
.seo h2{font-size:15px;font-weight:800;color:#FFC93C;margin:22px 0 9px;letter-spacing:.02em;}
.seo p,.seo li{font-size:14px;line-height:1.65;color:#A79CD8;}
.seo ol,.seo ul{padding-left:20px;}
.seo li{margin-bottom:7px;}
.seo li::marker{color:#6E5ABF;}
.crumb{font-size:11px;color:#6E63A8;margin-bottom:14px;}
.crumb a{color:#9A8FCF;text-decoration:none;}
.crumb a:hover{color:#FFC93C;}
.seo .fb{margin-top:22px;padding-top:16px;border-top:1px solid #2E2260;}
.seo .fb a{display:inline-block;font-size:13px;font-weight:700;color:#FFC93C;
  text-decoration:none;border:1px solid #4A3A8F;border-radius:999px;padding:11px 18px;}
.seo .fb a:hover{border-color:#FFC93C;}

/* ---------- "More games" strip ---------- */
.more-games{width:100%;max-width:460px;margin:4px auto 18px;padding:0 2px;}
.more-games h2{font-size:10px;letter-spacing:.20em;text-transform:uppercase;
  color:#9A8FCF;font-weight:700;margin:0 0 9px 2px;}
.mg-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.mg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:12px 4px;border-radius:13px;text-decoration:none;color:#F2EEFF;
  border:1px solid #3A2A70;background:rgba(46,31,92,.55);transition:border-color .15s;}
.mg .i{font-size:22px;line-height:1;}
.mg .n{font-size:9.5px;font-weight:700;text-align:center;line-height:1.25;}
.mg:active,.mg:hover{border-color:#FFC93C;}

/* ---------- legal / footer row ---------- */
.legalline{max-width:460px;margin:2px auto 26px;padding:0 6px;text-align:center;
  font-size:11px;color:#6E63A8;line-height:1.9;}
.legalline a{color:#9A8FCF;text-decoration:none;}
.legalline a:hover{color:#FFC93C;}

/* ---------- bigger screen while playing ---------- */
.fsbtn{background:rgba(46,31,92,.6);border:1px solid #3A2A70;color:#9A8FCF;font:inherit;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:12px 4px;border-radius:12px;cursor:pointer;flex:1;min-width:70px;}
.fsbtn:active{color:#F2EEFF;border-color:#FFC93C;}
.fsbtn.float{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:500;width:46px;height:46px;flex:none;padding:0;font-size:19px;
  background:rgba(30,20,68,.9);color:#FFC93C;}
html.fs-on .wrap{max-width:100vw;padding-left:4px;padding-right:4px;}
html.fs-on .bar,html.fs-on .hint,html.fs-on .seo,html.fs-on .more-games,
html.fs-on .legalline,html.fs-on .adslot{display:none !important;}
html.fs-on body{padding-top:0;justify-content:center;}
html.fs-on .stats{margin-bottom:5px;}
html.fs-on .stat{padding:4px 8px;}
html.fs-on .stat i{font-size:15px;}

/* ============ blog ============ */
.post{max-width:720px;margin:0 auto;padding:22px 18px 40px;}
.post .crumb{margin-bottom:18px;}
.post h1{font-size:clamp(24px,6.2vw,36px);font-weight:800;letter-spacing:-.025em;
  line-height:1.18;margin-bottom:12px;}
.post .meta{font-size:12px;color:#6E63A8;margin-bottom:26px;}
.post .meta b{color:#FFC93C;font-weight:700;}
.post h2{font-size:19px;font-weight:800;margin:30px 0 10px;color:#F2EEFF;letter-spacing:-.01em;}
.post h3{font-size:15px;font-weight:800;margin:22px 0 8px;color:#FFC93C;}
.post p,.post li{font-size:15px;line-height:1.75;color:#B6ACE2;margin-bottom:13px;}
.post ul,.post ol{padding-left:22px;}
.post li{margin-bottom:8px;}
.post li::marker{color:#6E5ABF;}
.post strong{color:#F2EEFF;}
.post a{color:#FFC93C;}
.post .lead{font-size:16px;color:#CFC6F0;}
.post .box{background:rgba(46,31,92,.5);border:1px solid #3A2A70;border-radius:14px;
  padding:16px 18px;margin:24px 0;}
.post .box p:last-child{margin-bottom:0;}
.playbtn{display:inline-block;margin:6px 8px 6px 0;font-size:14px;font-weight:800;
  text-decoration:none;padding:13px 22px;border-radius:999px;
  background:linear-gradient(135deg,#FFC93C,#FF9A3C);color:#2A1D00;}
.postlist{max-width:720px;margin:0 auto;padding:0 18px;}
.pcard{display:flex;gap:14px;align-items:flex-start;text-decoration:none;
  background:rgba(46,31,92,.42);border:1px solid #3A2A70;border-radius:16px;
  padding:16px;margin-bottom:12px;transition:border-color .15s;}
.pcard:hover{border-color:#FFC93C;}
.pcard .pi{font-size:28px;line-height:1;flex:none;}
.pcard b{display:block;font-size:16px;color:#F2EEFF;line-height:1.3;margin-bottom:5px;}
.pcard span{display:block;font-size:13px;color:#A79CD8;line-height:1.5;}
.pcard em{display:block;font-style:normal;font-size:11px;color:#6E63A8;margin-top:7px;}

/* ============ menu button + slide-in panel ============ */
.menubtn{background:rgba(46,31,92,.6);border:1px solid #3A2A70;color:#F2EEFF;
  font:inherit;font-size:17px;line-height:1;cursor:pointer;
  width:38px;height:34px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;flex:none;}
.menubtn:active{border-color:#FFC93C;color:#FFC93C;}
.menubtn.float{position:fixed;top:calc(10px + env(safe-area-inset-top));
  right:12px;z-index:600;background:rgba(30,20,68,.92);}

#sepoPanel{position:fixed;inset:0;z-index:900;display:none;}
#sepoPanel.open{display:block;}
#sepoPanel .scrim{position:absolute;inset:0;background:rgba(10,6,26,.72);
  backdrop-filter:blur(2px);}
#sepoPanel .sheet{position:absolute;top:0;right:0;bottom:0;width:min(86vw,330px);
  background:#1E1444;border-left:1px solid #3A2A70;overflow-y:auto;
  padding:16px 16px calc(28px + env(safe-area-inset-bottom));
  box-shadow:-14px 0 40px rgba(0,0,0,.5);
  animation:sheetIn .18s ease-out;}
@keyframes sheetIn{from{transform:translateX(28px);opacity:.4}to{transform:none;opacity:1}}
#sepoPanel .phead{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;}
#sepoPanel .phead b{font-size:16px;font-weight:800;color:#F2EEFF;}
#sepoPanel .phead b i{font-style:normal;color:#FFC93C;}
#sepoPanel .close{background:none;border:0;color:#9A8FCF;font-size:24px;
  cursor:pointer;line-height:1;padding:2px 6px;}
#sepoPanel h4{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#6E63A8;font-weight:700;margin:20px 0 9px;}
#sepoPanel a.row{display:flex;align-items:center;gap:11px;text-decoration:none;
  color:#E4DEFA;font-size:14px;font-weight:600;padding:12px 12px;border-radius:12px;
  border:1px solid transparent;}
#sepoPanel a.row:hover,#sepoPanel a.row:active{background:rgba(46,31,92,.7);
  border-color:#3A2A70;color:#fff;}
#sepoPanel a.row span.ri{font-size:17px;width:22px;text-align:center;}
#sepoPanel .langs{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;}
#sepoPanel .lang{display:flex;align-items:center;gap:8px;background:rgba(46,31,92,.55);
  border:1px solid #3A2A70;color:#C8BFF0;font:inherit;font-size:13px;font-weight:600;
  padding:11px 10px;border-radius:11px;cursor:pointer;text-align:left;}
#sepoPanel .lang:active{border-color:#FFC93C;}
#sepoPanel .lang.on{border-color:#FFC93C;color:#FFC93C;background:rgba(255,201,60,.12);}
#sepoPanel .note{font-size:11px;color:#6E63A8;line-height:1.6;margin-top:10px;}
#sepoPanel .instbtn{width:100%;border:0;cursor:pointer;font:inherit;font-weight:800;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:14px;
  border-radius:999px;background:linear-gradient(135deg,#FFC93C,#FF9A3C);color:#2A1D00;
  margin-top:6px;display:none;}

/* keep Google's translate bar from pushing the page down */
.goog-te-banner-frame,.skiptranslate iframe{display:none !important;}
body{top:0 !important;}
#gt_hidden{display:none;}