@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Syne:wght@700;800&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d1610;--bg2:#141f18;--panel:#1e3828;
  --text:#e2edd4;--dim:#6e9070;--gold:#d4a840;--g2:#eacc60;
  --c0:#e09840;--c1:#d4b038;--c2:#68a038;--c3:#d83838;--c4:#885528;--c5:#4888b0;
  --radius:14px;--sh:0 8px 40px rgba(0,0,0,.55);
  --hf:'Syne',sans-serif;--bf:'Nunito',sans-serif;
}
html,body{min-height:100%;font-family:var(--bf);background:var(--bg);color:var(--text);overflow-x:hidden}
body{display:flex;flex-direction:column}
a{color:var(--g2);text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer;font-family:var(--bf)}
main{flex:1}

/* HEADER */
.site-header{background:rgba(10,18,12,.97);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:200}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:58px;gap:16px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.logo-grid{width:32px;height:32px;background:#1e3828;border-radius:7px;display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:5px;flex-shrink:0}
.logo-grid span{border-radius:2px}
.lt0{background:#e09840}.lt1{background:#d4b038}.lt2{background:#68a038}.lt3{background:#d83838}
.logo-name{font-family:var(--hf);font-size:1rem;font-weight:800;color:var(--g2);white-space:nowrap}
.logo-badge{background:var(--gold);color:#1a2810;font-size:.48rem;font-weight:900;padding:1px 6px;border-radius:99px;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;margin-left:4px}
.site-nav{display:flex;align-items:center;gap:4px}
.nav-a{font-size:.78rem;font-weight:700;color:var(--dim);padding:6px 10px;border-radius:8px;transition:all .14s;text-decoration:none;white-space:nowrap}
.nav-a:hover{background:rgba(255,255,255,.07);color:var(--text);text-decoration:none}
.nav-a.active{color:var(--g2)}
.nav-play{background:linear-gradient(135deg,#88a838,#547020)!important;color:#dff0b0!important;padding:7px 14px;border-radius:99px;font-size:.8rem;font-weight:800}
.nav-play:hover{background:linear-gradient(135deg,#98b848,#648030)!important;transform:translateY(-1px);text-decoration:none}
.hamburger{display:none;background:none;border:1px solid rgba(255,255,255,.18);border-radius:7px;padding:5px 8px;color:var(--dim);font-size:.9rem;cursor:pointer;align-items:center;justify-content:center}
.mobile-menu{display:none;position:fixed;inset:0;top:58px;background:rgba(8,14,10,.98);z-index:199;flex-direction:column;padding:16px;gap:4px;overflow-y:auto}
.mobile-menu.open{display:flex}
.mobile-menu .nav-a{font-size:.95rem;padding:12px 14px;border-radius:10px;border-bottom:1px solid rgba(255,255,255,.06)}
@media(max-width:768px){.hamburger{display:flex}.site-nav .nav-a:not(.nav-play){display:none}}

/* FOOTER */
.site-footer{background:rgba(6,10,8,.9);border-top:1px solid rgba(255,255,255,.07);padding:36px 20px 24px;margin-top:auto}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
@media(max-width:700px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.footer-grid{grid-template-columns:1fr}}
.footer-col h4{font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);font-weight:800;margin-bottom:12px}
.footer-col a{display:block;font-size:.78rem;color:var(--dim);margin-bottom:7px;transition:color .12s;text-decoration:none}
.footer-col a:hover{color:var(--text)}
.footer-col p{font-size:.76rem;color:var(--dim);line-height:1.65;margin-bottom:12px}
.footer-bottom{max-width:1200px;margin:20px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:.7rem;color:var(--dim)}
.footer-ver{font-size:.66rem;background:rgba(255,255,255,.06);border-radius:99px;padding:2px 10px;color:var(--dim)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:99px;font-size:.9rem;font-weight:800;border:none;cursor:pointer;transition:all .13s;text-decoration:none}
.btn-green{background:linear-gradient(135deg,#88a838,#547020);color:#dff0b0;box-shadow:0 3px 14px rgba(80,110,24,.35)}
.btn-green:hover{background:linear-gradient(135deg,#98b848,#648030);transform:translateY(-2px);text-decoration:none}
.btn-ghost{background:rgba(255,255,255,.07);color:var(--text);border:1px solid rgba(255,255,255,.18)}
.btn-ghost:hover{background:rgba(255,255,255,.12);text-decoration:none}

/* MODAL */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:400;align-items:center;justify-content:center}
.modal-bg.open{display:flex}
.modal{background:var(--panel);border:1.5px solid rgba(255,255,255,.12);border-radius:18px;padding:24px;max-width:310px;width:90%;box-shadow:var(--sh)}
.modal h3{font-family:var(--hf);font-size:1rem;font-weight:800;color:#d8ea80;margin-bottom:16px}
.tog-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.tog-row:last-of-type{border-bottom:none}
.tog-lbl{font-size:.82rem;font-weight:700}
.tog-desc{font-size:.64rem;color:var(--dim);margin-top:1px}
.tog{width:38px;height:20px;border-radius:99px;background:rgba(255,255,255,.13);border:none;position:relative;transition:background .17s;flex-shrink:0;cursor:pointer}
.tog::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .17s;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.tog.on{background:var(--gold)}.tog.on::after{transform:translateX(18px)}
.modal-btns{display:flex;gap:8px;margin-top:14px}
.mbtn{flex:1;padding:9px;border-radius:9px;border:none;font-size:.82rem;font-weight:800;cursor:pointer;transition:all .12s}
.mbtn-p{background:linear-gradient(135deg,#88a838,#547020);color:#dff0b0}
.mbtn-s{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--text)}
.mbtn-s:hover{background:rgba(255,255,255,.13)}

/* GAME SHELL */
.g-shell{background:linear-gradient(160deg,#1e3328,#101c14);border:1.5px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden;box-shadow:var(--sh);max-width:500px;margin:0 auto;width:100%}
.g-topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.15)}
.g-brand{font-family:var(--hf);font-size:.95rem;font-weight:800;color:#d8ea80}
.g-sub{font-size:.65rem;color:var(--dim);font-weight:700;margin-top:1px}
.g-actions{display:flex;gap:5px}
.g-btn{background:none;border:1px solid rgba(255,255,255,.15);border-radius:7px;padding:5px 10px;font-size:.7rem;font-weight:700;color:var(--dim);transition:all .12s;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.g-btn:hover{background:rgba(255,255,255,.08);color:var(--text);text-decoration:none}
.g-hud{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid rgba(255,255,255,.06)}
.g-hc{padding:8px 6px;text-align:center;border-right:1px solid rgba(255,255,255,.06)}
.g-hc:last-child{border-right:none}
.g-hl{font-size:.46rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);font-weight:700}
.g-hv{font-size:1.1rem;font-weight:900;line-height:1.15;color:var(--g2)}
.g-hv.warn{color:#e0a030}.g-hv.danger{color:#d83030}
.g-dots{display:flex;gap:3px;padding:7px 14px;flex-wrap:wrap;justify-content:center;border-bottom:1px solid rgba(255,255,255,.06)}
.gd{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);transition:all .2s;flex-shrink:0}
.gd.cur{background:var(--gold);border-color:var(--gold);transform:scale(1.4)}
.gd.ok{background:#6aa030;border-color:#5a9020}
.gd.fail{background:rgba(180,40,40,.7);border-color:#b82828}

/* BOARD ZONE */
.bz{display:flex;align-items:center;justify-content:center;padding:12px;min-height:200px;position:relative}
#board{border-radius:12px;padding:7px;display:grid;gap:4px;position:relative;background:#c8a464;border:3px solid #a07840;box-shadow:inset 0 3px 12px rgba(0,0,0,.2),0 6px 24px rgba(0,0,0,.35)}

/* TILES */
.cell{border-radius:6px;background:rgba(150,110,50,.28);position:relative;cursor:pointer}
.tl{position:absolute;inset:1px;border-radius:5px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 0 rgba(255,255,255,.26),inset 0 -2px 0 rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.28);overflow:hidden;z-index:2}
.tl::before{content:'';position:absolute;top:2px;left:3px;right:3px;height:40%;background:rgba(255,255,255,.17);border-radius:3px 3px 50% 50%;z-index:3;pointer-events:none}
.tl .sq{width:36%;height:36%;border-radius:2px;background:rgba(0,0,0,.22);z-index:2;flex-shrink:0}
.tl.blk{filter:brightness(.55) saturate(.4)}
.tl.blk::before{display:none}
.tl.blk::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(0,0,0,.18),rgba(0,0,0,.18) 3px,transparent 3px,transparent 7px);border-radius:5px;z-index:4}
.cell.sel .tl{box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(255,255,255,.3),inset 0 2px 0 rgba(255,255,255,.26)}
.cell.sel{z-index:8}
.c0{background:linear-gradient(145deg,#e09840,#b07028)}
.c1{background:linear-gradient(145deg,#d4b038,#a08018)}
.c2{background:linear-gradient(145deg,#68a038,#488020)}
.c3{background:linear-gradient(145deg,#d83838,#a01818)}
.c4{background:linear-gradient(145deg,#885528,#583010)}
.c5{background:linear-gradient(145deg,#4888b0,#306080)}
@keyframes tileIn{0%{transform:scale(.3);opacity:0}65%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes tileOut{0%{transform:scale(1);opacity:1}20%{transform:scale(1.5);filter:brightness(3)}55%{transform:scale(2);opacity:.4}100%{transform:scale(0);opacity:0}}
@keyframes selPulse{0%,100%{box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(255,255,255,.18)}50%{box-shadow:0 0 0 3px #ffe880,0 0 0 8px rgba(255,232,128,.12)}}
.tl.entering{animation:tileIn .22s ease forwards}
.tl.blasting{animation:tileOut .3s cubic-bezier(.36,.07,.19,.97) forwards!important;pointer-events:none;z-index:10}
.cell.sel .tl{animation:selPulse 1.4s ease infinite!important}

/* SPARK */
@keyframes spark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}}
.spark{position:absolute;width:7px;height:7px;border-radius:50%;z-index:30;pointer-events:none;animation:spark .42s ease forwards}

/* DIR FLASH */
.df{position:absolute;inset:0;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:2.2rem;color:rgba(255,255,255,.75);opacity:0;pointer-events:none;z-index:15}
@keyframes dfGo{0%{opacity:0;transform:scale(.5)}35%{opacity:.85;transform:scale(1.1)}100%{opacity:0;transform:scale(1)}}
.df.go{animation:dfGo .38s ease forwards}

/* MOVES BAR */
.g-mb{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid rgba(255,255,255,.06)}
.g-ml{font-size:.58rem;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);font-weight:700;flex-shrink:0}
.g-pips{display:flex;gap:3px;flex:1;flex-wrap:wrap}
.g-pip{width:10px;height:10px;border-radius:50%;background:var(--gold);border:1.5px solid rgba(200,168,60,.4);flex-shrink:0}
.g-pip.off{background:transparent;border-color:rgba(255,255,255,.18)}
.g-mn{font-size:1rem;font-weight:900;color:var(--g2);min-width:22px;text-align:right}

/* ARROW PAD */
.g-ap{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-top:1px solid rgba(255,255,255,.06)}
.g-ar{display:flex;gap:4px}
.ak{width:40px;height:40px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.18);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.95rem;color:var(--dim);transition:all .1s;-webkit-tap-highlight-color:transparent;user-select:none;cursor:pointer}
.ak:hover,.ak:active{background:rgba(255,255,255,.12);color:var(--text);transform:scale(.9)}

/* HINT */
.g-hint{padding:5px 14px;text-align:center;font-size:.66rem;color:var(--gold);font-weight:700;min-height:22px}
.g-hint.off{visibility:hidden}

/* OVERLAY */
.overlay{position:absolute;inset:0;background:rgba(10,18,12,.92);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;border-radius:18px;z-index:50}
.overlay.hide{display:none}
.ov-card{background:linear-gradient(160deg,#243c2e,#141e18);border:1.5px solid rgba(255,255,255,.12);border-radius:16px;padding:24px 20px;width:90%;max-width:300px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.ov-ico{font-size:2.4rem;margin-bottom:6px}
.ov-title{font-family:var(--hf);font-size:1.25rem;font-weight:800;color:#d8ea80;margin-bottom:5px}
.ov-sub{font-size:.76rem;color:var(--dim);line-height:1.55;margin-bottom:12px}
.ov-pts{font-size:2rem;font-weight:900;color:var(--g2)}
.ov-pts-lbl{font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-bottom:12px}
.ov-btns{display:flex;gap:8px;margin-top:4px}
.ov-btn{flex:1;padding:10px;border-radius:10px;border:none;font-size:.82rem;font-weight:800;cursor:pointer;transition:all .13s;font-family:var(--bf)}
.ov-green{background:linear-gradient(135deg,#88a838,#547020);color:#dff0b0}
.ov-green:hover{background:linear-gradient(135deg,#98b848,#648030);transform:translateY(-1px)}
.ov-ghost{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);color:var(--text)}
.ov-ghost:hover{background:rgba(255,255,255,.13)}

/* SCORE POP */
.spop{position:fixed;pointer-events:none;font-size:1.1rem;font-weight:900;color:var(--g2);text-shadow:0 2px 6px rgba(0,0,0,.6);z-index:999;animation:spup .7s ease forwards}
@keyframes spup{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-55px) scale(.5);opacity:0}}

/* BONUS BANNER */
@keyframes bbpop{0%{opacity:0;transform:translateX(-50%) scale(.6)}20%{opacity:1;transform:translateX(-50%) scale(1.05)}80%{opacity:1;transform:translateX(-50%) translateY(-10px) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-30px) scale(.8)}}
.bonus-banner{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:var(--gold);color:#1a2810;font-family:var(--hf);font-size:1rem;font-weight:800;padding:8px 20px;border-radius:10px;white-space:nowrap;z-index:60;pointer-events:none;animation:bbpop .9s ease forwards}

/* END SCREEN */
.end-screen{display:none;max-width:460px;margin:0 auto;padding:32px 16px 60px;text-align:center}
.end-screen.show{display:block}
.end-emo{font-size:3.5rem;margin-bottom:10px}
.end-h{font-family:var(--hf);font-size:1.75rem;font-weight:800;color:#d8ea80;margin-bottom:5px}
.end-sub{font-size:.84rem;color:var(--dim);margin-bottom:24px;line-height:1.6}
.end-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.es-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:14px 8px}
.es-val{font-family:var(--hf);font-size:1.9rem;font-weight:800;color:var(--g2)}
.es-lbl{font-size:.56rem;text-transform:uppercase;letter-spacing:.09em;color:var(--dim)}
.end-lvs{display:flex;gap:2.5px;flex-wrap:wrap;justify-content:center;margin:0 auto 16px;padding:10px;background:rgba(0,0,0,.2);border-radius:10px;max-width:320px}
.elv{width:12px;height:12px;border-radius:3px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.elv.y{background:#6aa030;border-color:#5a9020}
.elv.n{background:#6a1818;border-color:#4a0808}
.end-copy{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:10px 14px;font-size:.72rem;color:var(--dim);cursor:pointer;font-family:var(--bf);width:100%;text-align:left;margin-bottom:12px;transition:background .11s}
.end-copy:hover{background:rgba(255,255,255,.1)}
.end-btns{display:flex;gap:10px}
.end-btn{flex:1;padding:13px;border-radius:12px;border:none;font-size:.9rem;font-weight:800;cursor:pointer;transition:all .13s;font-family:var(--bf)}
.end-btn-p{background:linear-gradient(135deg,#88a838,#547020);color:#dff0b0;box-shadow:0 3px 12px rgba(80,110,24,.35)}
.end-btn-p:hover{background:linear-gradient(135deg,#98b848,#648030);transform:translateY(-1px)}
.end-btn-s{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--text)}
.end-btn-s:hover{background:rgba(255,255,255,.13)}

/* STATIC PAGES */
.page-wrap{max-width:820px;margin:0 auto;padding:48px 24px 80px}
.page-wrap h1{font-family:var(--hf);font-size:clamp(1.8rem,5vw,2.4rem);font-weight:800;color:#d8ea80;margin-bottom:8px}
.page-wrap .lead{font-size:1rem;color:var(--dim);margin-bottom:36px;line-height:1.65}
.page-wrap h2{font-family:var(--hf);font-size:1.1rem;font-weight:700;color:var(--g2);margin:26px 0 9px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.07)}
.page-wrap p{font-size:.87rem;color:#b0c8a0;line-height:1.75;margin-bottom:12px}
.page-wrap ul{padding-left:20px;margin-bottom:12px}
.page-wrap li{font-size:.87rem;color:#b0c8a0;line-height:1.75;margin-bottom:5px}
.page-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(212,168,64,.12);border:1px solid rgba(212,168,64,.25);border-radius:99px;padding:4px 12px;font-size:.73rem;font-weight:700;color:var(--gold);margin-bottom:22px}

/* DAILY PILL */
.daily-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(212,168,64,.12);border:1px solid rgba(212,168,64,.28);border-radius:99px;padding:5px 14px;font-size:.73rem;font-weight:800;color:var(--gold)}
.dot-pulse{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;animation:dp 2s infinite}
@keyframes dp{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}

/* RESPONSIVE */
@media(max-width:500px){
  .g-hud{grid-template-columns:repeat(2,1fr)}
  .g-hc:nth-child(2){border-right:none}
  .g-hc:nth-child(3){border-top:1px solid rgba(255,255,255,.06)}
}