@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@600;700&display=swap");
:root{--bg:#050806;--panel:#0a100c;--panel2:#0d1510;--line:#1e2a22;--green:#61ff52;--green2:#39df58;--muted:#849188}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#050806!important;color:#eef4ef;font-family:Inter,Arial,sans-serif}
body{background:radial-gradient(circle at 72% 18%,#16401b12,transparent 28%),linear-gradient(180deg,#050806,#060907 55%,#040604)!important}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:70px 70px;opacity:.025}
.game-top{height:68px;padding:0 3.2%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#070a08f5;backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}.brand{width:178px;height:57px;display:flex}.brand img{width:100%;height:100%;object-fit:contain;object-position:left center;filter:drop-shadow(0 0 15px #39ff4938)}.right{display:flex;gap:8px;align-items:center}.right>a,.langbox>button{padding:9px 12px;border:1px solid var(--line);background:#0b110d;color:#fff;border-radius:9px;text-decoration:none}.langbox{position:relative}.lang-menu{display:none;position:absolute;right:0;top:45px;width:170px;background:#0a100c;border:1px solid #2b372f;border-radius:12px;padding:6px;z-index:30;box-shadow:0 20px 55px #000}.lang-menu.show{display:block}.lang-menu button{width:100%;padding:10px;background:transparent;color:#fff;border:0;text-align:left;border-radius:8px}.lang-menu button:hover{background:#172019;color:var(--green)}
.ad{display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px dashed #344238;background:#080d09;color:#59665d;letter-spacing:.5px}.ad small{font-size:8px;margin-top:4px}.header-ad{height:48px;width:min(1060px,92%);margin:10px auto;border-radius:9px}
main{width:min(1180px,94%);margin:17px auto 60px}.crumb{font-size:8px;color:#68746b;margin-bottom:7px}.title-row{display:flex;align-items:end;justify-content:space-between;gap:15px}.eyebrow{font-size:8px;letter-spacing:2px;color:var(--green);font-weight:800}.title-row h1{font:700 28px "Space Grotesk";margin:4px 0}.title-row>a{border:1px solid #29362d;padding:9px 11px;border-radius:9px;color:#dce4de;font-size:10px}.top-game-ad{height:42px;margin:10px 0;border-radius:9px}
.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;align-items:start}.play-left{min-width:0}.play-right{display:flex;flex-direction:column;gap:10px}.game-shell{position:relative;width:100%;max-width:780px;margin:0 auto;aspect-ratio:16/9;border:1px solid #2d4932;border-radius:12px;overflow:hidden;background:#000!important;box-shadow:0 18px 55px #000c}.game-shell iframe{width:100%;height:100%;border:0;display:none;background:#000!important}.start{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;cursor:pointer;background:radial-gradient(circle at 50% 45%,#163c192b,#030603 67%)}.start .icon{font-size:58px;filter:drop-shadow(0 0 25px #49ff52)}.start small{font-size:8px;letter-spacing:3px;color:var(--green)}.start h2{font:700 21px "Space Grotesk";margin:6px}.start p{font-size:8px;color:#a6b0a8;font-weight:800}.start button{background:var(--green);color:#061007;border:0;border-radius:8px;padding:10px 18px;font-weight:900;cursor:pointer}.start em{font-size:8px;color:#66736a;font-style:normal;margin-top:9px}.game-shell>#fs{position:absolute;right:9px;top:9px;z-index:6;background:#071008e8;color:var(--green);border:1px solid #3a8542;border-radius:8px;padding:7px 9px;cursor:pointer}
.actions{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:8px auto 0}.actions button,.actions a{padding:8px 11px;border-radius:8px;background:#0a100c;border:1px solid #27342b;color:#fff;text-decoration:none;cursor:pointer;font-size:9px}.actions button:hover,.actions a:hover{color:var(--green);border-color:#3b7542}.actions b{color:var(--green)}.shortcuts{text-align:center;padding:7px 2px;color:#69756d;font-size:8px}.under-game-ad{height:45px;border-radius:9px;margin:7px 0 0}
.side-game-ad{height:170px;border-radius:11px}.side-game-ad.second{height:120px}.panel{border:1px solid #1c2820;border-radius:12px;background:linear-gradient(180deg,#0b110d,#080d09);padding:13px}.panel h2{font:700 12px "Space Grotesk";color:#f0f4f1;margin:0 0 5px}.easy{margin:0 0 8px;color:var(--green);font-size:8px;font-weight:800}.keyboard-img{width:100%;height:auto;display:block;border-radius:8px;margin:5px 0 9px;background:#0a0d0b}.control{display:block;margin:0 0 5px;padding:7px 8px;border-radius:7px;border:1px solid #27372b;background:#101611;font-size:8px}.control b{color:var(--green)}#description,.note{color:#7d8980;font-size:8.5px;line-height:1.6}.online,.solo{display:inline-block;padding:7px 9px;border-radius:99px;font-size:8px}.online{color:var(--green);border:1px solid #2f7137;background:#0b1a0d}.solo{color:#b8c2ba;border:1px solid #343d36}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.wide-game-ad{min-height:105px;border-radius:11px}.bottom-ad{height:64px;border-radius:9px;margin-top:12px}.interstitial{display:none;position:fixed;inset:0;background:#000d;z-index:100;align-items:center;justify-content:center}.interstitial.show{display:flex}.interstitial .ad{width:min(620px,90vw);height:280px;border-radius:14px}.interstitial>#close{position:absolute;right:20px;top:18px;width:36px;height:36px;border-radius:50%;background:#0b100d;color:#fff;border:1px solid #39443c;font-size:22px}
footer{text-align:center;border-top:1px solid var(--line);padding:20px;color:#647067;font-size:9px}
@media(max-width:900px){.play-layout{grid-template-columns:1fr}.play-right{display:grid;grid-template-columns:1fr 1fr}.side-game-ad{height:95px}.controls-panel{grid-column:1/-1}.side-game-ad.second{height:95px}.game-shell{max-width:760px}}
@media(max-width:620px){.game-top{height:62px;padding:6px 10px}.brand{width:145px;height:49px}.right>a{font-size:9px;padding:8px}.header-ad{height:40px}.play-right{display:block}.side-game-ad{display:none}.controls-panel{margin-top:10px}.info-grid{grid-template-columns:1fr}.title-row h1{font-size:23px}.game-shell{border-radius:9px}.start .icon{font-size:45px}.start h2{font-size:17px}.start p{font-size:7px}.actions button,.actions a{font-size:8px;padding:8px}.keyboard-img{max-height:125px;object-fit:contain}}

.game-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.game-tags span{font-size:7px;color:#8ca693;border:1px solid #233229;border-radius:99px;padding:4px 6px;background:#0b120d}.category-line{font-size:9px;color:#738077}.category-line a{color:#6dff52;text-decoration:none}.related{margin-top:12px}.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:9px}.related-card{display:block;border:1px solid #1d2a20;border-radius:9px;overflow:hidden;background:#0a100c;color:#eaf0eb;text-decoration:none}.related-card img{display:block;width:100%;height:72px;object-fit:cover}.related-card span{display:block;padding:7px;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.related-card:hover{border-color:#4e8c51;color:#6dff52}@media(max-width:620px){.related-grid{grid-template-columns:repeat(2,1fr)}}

/* Mobile landscape-game rotation helper */
.rotate-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  background:rgba(2,6,4,.96);
  color:#fff;
}
.rotate-overlay.show{display:flex}
.rotate-card{
  max-width:360px;
  border:1px solid rgba(92,255,72,.45);
  border-radius:24px;
  padding:28px 22px;
  background:linear-gradient(145deg,#0b1510,#07100b);
  box-shadow:0 0 50px rgba(61,255,55,.12);
}
.rotate-icon{
  font-size:58px;
  line-height:1;
  margin-bottom:14px;
  animation:rotatePhone 1.8s ease-in-out infinite;
}
.rotate-card h2{margin:0 0 9px;font-size:25px}
.rotate-card p{margin:0;color:#a7b4aa;line-height:1.55}
@keyframes rotatePhone{
  0%,100%{transform:rotate(0deg)}
  45%,70%{transform:rotate(90deg)}
}
@media (max-width:760px){
  body.game-landscape-needed .game-top,
  body.game-landscape-needed .header-ad,
  body.game-landscape-needed main> .crumb,
  body.game-landscape-needed main> .title-row,
  body.game-landscape-needed main> .top-game-ad,
  body.game-landscape-needed main> .play-layout,
  body.game-landscape-needed main> .info-grid,
  body.game-landscape-needed main> .related,
  body.game-landscape-needed main> .bottom-ad,
  body.game-landscape-needed footer{
    /* Normal page remains usable; overlay appears only while orientation is wrong. */
  }
}

/* =========================================================
   ARGAMES GAME PAGE — PHONE-FIRST LAYOUT
   ========================================================= */
.mobile-unsupported{
  display:none;
  position:fixed;
  inset:0;
  z-index:10000;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(2,6,4,.97);
  backdrop-filter:blur(10px);
}
.mobile-unsupported.show{display:flex}
.unsupported-card{
  width:min(390px,100%);
  padding:28px 22px;
  border:1px solid rgba(102,255,77,.35);
  border-radius:24px;
  background:linear-gradient(150deg,#0b1510,#070c09);
  text-align:center;
  box-shadow:0 20px 80px rgba(0,0,0,.7),0 0 45px rgba(79,255,67,.08);
}
.unsupported-icon{font-size:56px;margin-bottom:10px}
.unsupported-card h2{margin:0 0 10px;font-size:25px;color:#f2f7f3}
.unsupported-card p{margin:0 0 20px;color:#94a49a;line-height:1.55;font-size:13px}
.unsupported-card a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 16px;
  border:1px solid #4d9d4d;
  border-radius:13px;
  color:#70ff4f;
  text-decoration:none;
  background:#09130d;
}

/* Make the game itself dominant on phones. */
@media(max-width:620px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{background:#050806}
  .game-top{
    position:sticky !important;
    top:0 !important;
    z-index:80 !important;
    height:62px !important;
    padding:7px 10px !important;
    background:rgba(4,8,6,.96) !important;
    backdrop-filter:blur(12px);
  }
  .game-top .brand{
    width:128px !important;
    height:auto !important;
  }
  .game-top .right{
    gap:5px !important;
  }
  .game-top .right>a{
    font-size:10px !important;
    padding:9px 10px !important;
    border-radius:11px !important;
  }
  .game-top .langbox button{
    height:38px !important;
    padding:0 9px !important;
    border-radius:11px !important;
    font-size:12px !important;
  }

  .header-ad{
    width:calc(100% - 18px) !important;
    height:55px !important;
    min-height:55px !important;
    margin:8px auto !important;
  }

  main{
    width:100% !important;
    max-width:none !important;
    padding:0 9px 30px !important;
    margin:0 !important;
  }
  .crumb{display:none !important}

  .title-row{
    display:flex !important;
    flex-direction:column !important;
    gap:9px !important;
    margin:9px 2px 10px !important;
  }
  .title-row h1{
    font-size:25px !important;
    line-height:1.08 !important;
    margin:4px 0 !important;
  }
  .title-row .eyebrow{font-size:9px !important;letter-spacing:2px !important}
  #meta{font-size:10px !important;color:#849289 !important}
  .game-tags{gap:4px !important}
  .game-tags span{font-size:8px !important;padding:4px 6px !important}
  #provider{
    align-self:flex-start !important;
    font-size:10px !important;
    padding:8px 10px !important;
    border-radius:11px !important;
  }

  .top-game-ad{min-height:55px !important;margin:7px 0 10px !important}

  .play-layout{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    gap:10px !important;
  }
  .play-left{width:100% !important;min-width:0 !important}
  .game-shell{
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    aspect-ratio:16/9 !important;
    min-height:0 !important;
    border-radius:14px !important;
    border:1px solid rgba(91,255,75,.35) !important;
    overflow:hidden !important;
    background:#020403 !important;
  }
  #frame{width:100% !important;height:100% !important;border:0 !important}
  .start{
    padding:15px !important;
  }
  .start .icon{font-size:48px !important}
  .start small{font-size:8px !important;letter-spacing:2px !important}
  .start h2{
    max-width:90% !important;
    font-size:19px !important;
    line-height:1.1 !important;
  }
  .start p{
    font-size:9px !important;
    line-height:1.35 !important;
    max-width:90% !important;
  }
  .start button{
    min-height:42px !important;
    padding:0 15px !important;
    border-radius:12px !important;
    font-size:11px !important;
  }
  .start em{font-size:8px !important}

  .game-shell #fs{
    width:38px !important;
    height:38px !important;
    right:7px !important;
    top:7px !important;
    border-radius:10px !important;
  }

  .actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    margin-top:8px !important;
  }
  .actions button,.actions a{
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:8px 7px !important;
    border-radius:12px !important;
    font-size:10px !important;
    white-space:nowrap !important;
  }
  .shortcuts{
    text-align:center !important;
    font-size:9px !important;
    line-height:1.45 !important;
    margin:8px 2px !important;
  }

  .under-game-ad{
    min-height:60px !important;
    margin:8px 0 !important;
  }

  .play-right{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    gap:9px !important;
  }
  .side-game-ad{display:none !important}
  .controls-panel{
    width:100% !important;
    margin:0 !important;
    padding:14px !important;
    border-radius:16px !important;
  }
  .controls-panel h2{font-size:17px !important}
  .controls-panel .easy{font-size:10px !important}
  .keyboard-img{
    width:100% !important;
    max-height:155px !important;
    object-fit:contain !important;
    margin:6px auto 9px !important;
  }
  #controls{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
  }
  .control{
    min-height:39px !important;
    padding:8px !important;
    font-size:9px !important;
    border-radius:10px !important;
  }
  .controls-panel .note{
    font-size:9px !important;
    line-height:1.4 !important;
  }

  .info-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:9px !important;
    margin-top:10px !important;
  }
  .info-grid .panel{
    padding:14px !important;
    border-radius:16px !important;
  }
  .info-grid .panel h2{font-size:16px !important}
  #description{
    font-size:11px !important;
    line-height:1.6 !important;
  }

  .wide-game-ad,.bottom-ad{
    min-height:65px !important;
    margin-top:9px !important;
  }
  .related{margin-top:10px !important;padding:14px !important}
  .related h2{font-size:16px !important}
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:7px !important}
  .related-card img{height:95px !important}
  .related-card span{font-size:9px !important;padding:7px !important}

  footer{
    padding:18px 10px 28px !important;
    font-size:9px !important;
    text-align:center !important;
  }

  /* For games that need landscape, the shell becomes wide after rotation. */
  @media (orientation:landscape){
    .game-shell{aspect-ratio:16/9 !important;max-height:calc(100dvh - 95px) !important}
    .title-row,.top-game-ad,.under-game-ad,.controls-panel,.info-grid,.related,.bottom-ad{display:none !important}
    .play-layout{margin:0 !important}
  }
}

@media(max-width:390px){
  main{padding-left:7px !important;padding-right:7px !important}
  .game-top .brand{width:116px !important}
  .game-top .right>a{font-size:9px !important;padding:8px !important}
  .actions button,.actions a{font-size:9px !important}
  #controls{grid-template-columns:1fr !important}
}

/* Live ad safety on game page */
.native-ad{box-sizing:border-box;width:100%;min-height:70px;overflow:hidden}
.native-ad-code{width:100%;max-width:100%;text-align:center;overflow:hidden}
@media(max-width:620px){.native-ad{min-height:55px;margin:7px 0}.native-ad-code{max-width:100vw}}

/* Final ARGAMES live-ad layout */
.live-ad{box-sizing:border-box;width:100%;min-height:70px;margin:10px auto;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border:1px dashed rgba(105,255,78,.20);border-radius:12px;background:rgba(5,12,8,.55)}
.live-ad .ad-label{font-size:8px;letter-spacing:1.5px;text-transform:uppercase;opacity:.42;margin-bottom:4px}
.live-ad .native-ad-code{width:100%;max-width:100%;text-align:center;overflow:hidden}
.live-ad iframe,.live-ad img{max-width:100% !important}
@media(max-width:760px){.live-ad{min-height:58px;margin:7px auto;border-radius:10px}.live-ad .native-ad-code{max-width:100vw}}

/* ARGAMES — ads between content, never in the page header */
.between-games-ad{
  grid-column:1 / -1;
  width:min(100%,900px);
  min-height:90px;
  margin:18px auto;
  padding:6px 10px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px dashed rgba(105,255,78,.18);
  border-radius:12px;
  background:rgba(5,12,8,.45);
}
.bottom-page-ad{
  width:min(100%,1100px);
  min-height:90px;
  margin:28px auto 10px;
  padding:6px 10px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px dashed rgba(105,255,78,.18);
  border-radius:12px;
  background:rgba(5,12,8,.45);
}
.between-games-ad .ad-label,.bottom-page-ad .ad-label{
  font-size:8px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  opacity:.4;
  margin-bottom:4px;
}
.between-games-ad .native-ad-code,.bottom-page-ad .native-ad-code{
  width:100%;
  max-width:100%;
  text-align:center;
  overflow:hidden;
}
@media(max-width:760px){
  .between-games-ad{
    min-height:72px;
    width:100%;
    margin:12px 0;
    padding:4px;
  }
  .bottom-page-ad{
    min-height:72px;
    width:100%;
    margin:18px 0 6px;
    padding:4px;
  }
  /* Never reserve ad space in the header on mobile. */
  .header-ad,.top-game-ad,.side-game-ad{display:none !important}
}

/* Dynamic catalog ad slot */
#popularGrid > .between-games-ad{
  grid-column:1 / -1 !important;
  width:100% !important;
  min-height:90px;
  align-self:stretch;
}
@media(max-width:760px){
  #popularGrid > .between-games-ad{
    min-height:72px;
    margin:12px 0;
  }
}