:root{--page:#eaf1e4;--paper:#fffdf7;--paper2:#f7f3e9;--ink:#243028;--muted:#748077;--line:#d7dfd3;--accent:#294b31;--grass:#6f8c46;--cut:#d7d2ad;--shadow:0 16px 45px rgba(48,63,47,.12)}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-width:0;overflow-x:hidden}body{min-height:100vh;background:radial-gradient(700px 380px at 0 0,rgba(255,255,255,.9),transparent 65%),linear-gradient(180deg,#edf4e7,#e7ecdf);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{text-decoration:none;color:inherit}button{font:inherit}.page-shell{width:100%;max-width:1540px;margin:0 auto;padding:12px}.game-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.game-brand{display:flex;align-items:center;gap:10px}.game-mark{width:39px;height:39px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:950}.game-name{font-weight:950;font-size:18px;letter-spacing:-.3px}.game-tagline{font-size:10px;color:var(--muted);margin-top:1px}.game-actions{display:flex;gap:8px}.home-button,.plain-button,.primary-button{border-radius:9px;padding:9px 12px;font-size:11px;font-weight:800;cursor:pointer}.home-button{background:var(--accent);border:1px solid var(--accent);color:#fff}.plain-button{background:rgba(255,253,247,.95);border:1px solid var(--line);color:var(--ink)}.primary-button{background:var(--accent);border:1px solid var(--accent);color:#fff}.ad-slot{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;background:rgba(255,253,247,.42);border:1px solid rgba(82,101,80,.14);border-radius:10px}.ad-slot:not(.has-ad)::before{content:"ADVERTISEMENT";position:absolute;inset:0;display:grid;place-items:center;color:rgba(72,88,73,.45);font-size:9px;letter-spacing:1.15px;font-weight:800}.top-ad,.bottom-ad{width:100%;min-height:90px}.top-ad{margin-bottom:10px}.bottom-ad{margin-top:10px}.side-ad{min-height:600px}.side-ad:not(.has-ad){background:rgba(255,253,247,.50);border-color:rgba(82,101,80,.18)}.ad-slot.has-ad{background:transparent;border-color:transparent}.ad-slot.has-ad::before{display:none}
.play-layout{display:flex;width:100%;min-width:0;gap:10px;align-items:flex-start}.side-ad{flex:0 0 170px;width:170px}.game-column{flex:1 1 auto;min-width:0;width:auto}.game-card{width:100%;min-width:0;background:rgba(255,253,247,.97);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}.hud{width:100%;display:grid;grid-template-columns:minmax(150px,1.35fr) minmax(100px,1fr) minmax(90px,1fr) minmax(120px,1fr) auto;gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line)}.hud-stat{min-width:0}.hud-stat small,.mode-pill small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.75px}.hud-stat strong{font-size:16px;font-variant-numeric:tabular-nums}.progress{height:7px;background:#e3e7dd;border-radius:999px;margin-top:6px;overflow:hidden}.progress span{display:block;height:100%;width:0;background:var(--accent)}.mode-pill{min-width:70px;text-align:center;background:var(--paper2);border:1px solid var(--line);padding:8px 10px;border-radius:10px}.mode-pill strong{font-size:13px}.field-wrap{position:relative;width:100%;height:auto;aspect-ratio:16/10;min-height:470px;max-height:calc(100vh - 245px);background:#5f7c3c;touch-action:none;overflow:hidden}.field-wrap canvas{display:block;width:100%!important;height:100%!important}.overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:16px;background:rgba(38,52,41,.67);backdrop-filter:blur(6px)}.overlay.hidden{display:none}.dialog{width:min(520px,94%);background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:24px;text-align:center;box-shadow:0 28px 70px rgba(35,50,39,.22)}.dialog h2{font-size:30px;letter-spacing:-.8px;margin:0 0 7px}.dialog p{font-size:12px;color:var(--muted);line-height:1.55;margin:0}.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.mode{border:1px solid var(--line);background:#f8f5ec;color:var(--ink);border-radius:14px;padding:15px;text-align:left;cursor:pointer}.mode.sel{background:var(--accent);border-color:var(--accent);color:#fff}.mode small{display:block;font-size:9px;text-transform:uppercase;opacity:.72}.mode b{display:block;font-size:19px;margin:4px 0}.mode span{font-size:10px;opacity:.74}.mode i{display:block;width:36px;height:36px;border-radius:50%;border:2px solid currentColor;margin-top:12px}.mode[data-m="2"] i{width:50px;height:50px}.dialog-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:17px}.count{font-size:80px;color:#fff;font-weight:950}.finish-time{font-size:50px;font-weight:950;color:var(--accent);font-variant-numeric:tabular-nums;margin:3px 0 7px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.result-grid>div{background:#f5f1e6;border:1px solid var(--line);border-radius:11px;padding:10px}.result-grid small{display:block;font-size:8px;color:var(--muted);text-transform:uppercase}.result-grid strong{font-size:13px}.save-box{margin-top:14px;padding:13px;border:1px solid #d4e0ca;background:#eef4e7;border-radius:12px}.save-box strong{display:block;font-size:13px}.save-box span{display:block;color:var(--muted);font-size:10px;margin-top:4px}.field-footer{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.notice,.info-card{background:rgba(255,253,247,.97);border:1px solid var(--line);border-radius:14px;padding:13px;box-shadow:0 8px 24px rgba(48,63,47,.06)}.notice{margin-top:10px}.under-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:10px;margin-top:10px}.info-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.info-head h3{font-size:13px;margin:0}.tabs{display:flex;gap:5px}.tab{border:1px solid var(--line);background:#f6f2e8;color:var(--muted);border-radius:8px;padding:5px 8px;font-size:9px}.tab.on{background:var(--accent);border-color:var(--accent);color:#fff}.leaderrow{display:grid;grid-template-columns:31px 1fr auto;gap:8px;padding:7px 0;border-top:1px solid #e5e8df;font-size:11px}.leaderrow:first-child{border-top:0}.leaderrow b{font-variant-numeric:tabular-nums}.account-row{height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}.account-row strong{font-size:12px}.account-row span{display:block;font-size:10px;color:var(--muted);margin-top:3px}.game-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:15px 3px 5px;color:#6d776f;font-size:10px}.footer-links{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:1279px) and (min-width:1024px){
  .page-shell{max-width:100%;padding:10px}
  .play-layout{display:flex;width:100%;gap:8px;align-items:flex-start}
  .side-ad{
    display:flex!important;
    flex:0 0 140px;
    width:140px;
    min-width:140px;
    min-height:600px
  }
  .game-column{flex:1 1 auto;min-width:0;width:auto}
  .hud{grid-template-columns:minmax(150px,1.4fr) 1fr 1fr auto}
  .hud .best{display:none}
  .field-wrap{min-height:500px;max-height:none}
  .top-ad,.bottom-ad{min-height:90px}
}

@media(max-width:1023px){
  .side-ad{display:none!important}
  .play-layout{display:block}
  .game-column{width:100%}
  .hud{grid-template-columns:minmax(150px,1.4fr) 1fr 1fr auto}
  .hud .best{display:none}
  .field-wrap{min-height:500px;max-height:none}
  .top-ad,.bottom-ad{min-height:90px}
}

@media(max-width:720px){
  .page-shell{padding:8px}
  .game-tagline{display:none}
  .top-ad{display:none!important}
  .hud{grid-template-columns:1.3fr 1fr auto;padding:9px}
  .hud .actionsstat,.hud .best{display:none}
  .field-wrap{aspect-ratio:9/12;min-height:520px}
  .under-grid{grid-template-columns:1fr}
  .modes{grid-template-columns:1fr}
  .result-grid{grid-template-columns:repeat(3,1fr)}
  .bottom-ad{min-height:50px}
  .home-button,.plain-button{padding:8px 9px}
  .game-footer{padding-bottom:8px}
}


/* Mobile gameplay guard */
.field-wrap{
  touch-action:none !important;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

@media (pointer:coarse) and (max-width:1023px){
  /* Keep active swiping away from Android/iOS back-gesture edge zones. */
  .field-wrap{
    width:calc(100% - 48px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (pointer:coarse) and (max-width:420px){
  .field-wrap{
    width:calc(100% - 40px) !important;
  }
}

/* CLEARFIELD mobile viewport-fit correction */
html,body{
  overflow-x:hidden;
  overflow-y:auto;
}

.field-wrap{
  touch-action:none !important;
  overscroll-behavior:contain;
}

@media (pointer:coarse), (max-height:900px){
  .page,
  body{
    min-height:100%;
  }

  .field-wrap{
    max-height:calc(100dvh - 245px) !important;
    min-height:280px !important;
    height:calc(100dvh - 245px) !important;
  }

  .field-wrap canvas,
  .field-wrap #field,
  .field-wrap .field{
    max-height:100% !important;
  }
}

@media (max-height:760px){
  .top-ad,
  .topad{
    display:none !important;
  }

  .field-wrap{
    max-height:calc(100dvh - 170px) !important;
    height:calc(100dvh - 170px) !important;
  }
}

@media (max-height:650px){
  .field-wrap{
    max-height:calc(100dvh - 145px) !important;
    height:calc(100dvh - 145px) !important;
    min-height:220px !important;
  }
}

@supports not (height:100dvh){
  @media (pointer:coarse), (max-height:900px){
    .field-wrap{
      max-height:calc(100vh - 245px) !important;
      height:calc(100vh - 245px) !important;
    }
  }
  @media (max-height:760px){
    .field-wrap{
      max-height:calc(100vh - 170px) !important;
      height:calc(100vh - 170px) !important;
    }
  }
}


/* FULL-VIEW PLAY AREA */
.field-wrap{height:min(68vh,calc(100svh - 185px))!important;min-height:360px}
#game{width:100%!important;height:100%!important}
@media(max-width:760px){.field-wrap{height:calc(100svh - 170px)!important;min-height:300px}}


/* LIVE CONSISTENCY FIX — Clearfield viewport authority */
.field-wrap.sg-gameplay-viewport{
  aspect-ratio:auto!important;
  min-height:0!important;
  height:var(--sg-play-height)!important;
  max-height:var(--sg-play-height)!important;
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
.field-wrap.sg-gameplay-viewport #game{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
}
@media(max-width:720px){
  .field-wrap.sg-gameplay-viewport{
    aspect-ratio:auto!important;
    min-height:0!important;
    width:100%!important;
  }
}