/* =============================================================
   ColorTilesGame.online — Main Stylesheet v2.0
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Syne:wght@700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg0:#080e14;--bg1:#0f1923;--bg2:#16222e;--bg3:#1d2e3d;--bg4:#243850;
  --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.16);
  --text:#e8f4ff;--dim:#6a8ca8;--muted:#3a5068;
  --red:#e85d4a;--orange:#f5a623;--yellow:#f5e342;
  --green:#50c878;--teal:#2dd4bf;--blue:#4a9eff;
  --violet:#9b5de5;--pink:#f72585;--lime:#b5e63d;--gold:#ffc93c;
  --hf:'Syne',sans-serif;--bf:'Outfit',sans-serif;
  --sh:0 8px 40px rgba(0,0,0,.55);
  --r:14px;--rs:8px;
}
html{height:100%;scroll-behavior:smooth}
body{min-height:100%;font-family:var(--bf);background:var(--bg0);color:var(--text);display:flex;flex-direction:column;overflow-x:hidden;line-height:1.6}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer;font-family:var(--bf)}
ul,ol{padding-left:1.4em}

/* ===================== HEADER ===================== */
.site-header{background:rgba(8,14,20,.97);border-bottom:1px solid var(--border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:sticky;top:0;z-index:900;width:100%}
.hdr-inner{max-width:1220px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:0 20px;height:64px}
.site-logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.site-logo:hover{text-decoration:none}
.logo-grid{width:40px;height:40px;display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:6px;flex-shrink:0}
.lg-a{background:#e09840;border-radius:3px}.lg-b{background:#d83838;border-radius:3px}
.lg-c{background:#68a038;border-radius:3px}.lg-d{background:#4888b0;border-radius:3px}
.logo-name{font-family:var(--hf);font-size:1rem;font-weight:800;color:var(--text);line-height:1.15;letter-spacing:-.01em}
.logo-url{font-size:.5rem;color:var(--dim);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.hdr-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-a{display:inline-flex;align-items:center;padding:6px 13px;border-radius:8px;font-size:.8rem;font-weight:600;color:var(--dim);transition:all .13s;text-decoration:none}
.nav-a:hover,.nav-a.active{background:rgba(255,255,255,.07);color:var(--text);text-decoration:none}
.nav-cta{background:linear-gradient(135deg,#4a9eff,#2268cc)!important;color:#fff!important;padding:8px 20px;border-radius:99px;font-weight:700;box-shadow:0 2px 14px rgba(74,158,255,.35);margin-left:6px}
.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.08);text-decoration:none}
.ham{display:none;background:none;border:1px solid var(--border);border-radius:7px;padding:7px 11px;color:var(--dim);font-size:1.1rem;margin-left:auto}
.mob-nav{display:none;position:fixed;top:64px;inset-x:0;bottom:0;background:rgba(8,14,20,.99);z-index:899;flex-direction:column;padding:14px;gap:2px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mob-nav.open{display:flex}
.mob-nav .nav-a{font-size:.92rem;padding:13px 16px;border-radius:10px;border-bottom:1px solid var(--border);color:var(--text)}

/* ===================== FOOTER ===================== */
.site-footer{background:#050c13;border-top:1px solid var(--border);padding:52px 20px 28px;margin-top:auto}
.ftr-grid{max-width:1220px;margin:0 auto;display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:48px}
.ftr-brand-desc{font-size:.78rem;color:var(--dim);line-height:1.75;margin-top:12px;max-width:230px}
.ftr-col h4{font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;color:var(--orange);font-weight:800;margin-bottom:14px}
.ftr-a{display:block;font-size:.8rem;color:var(--dim);margin-bottom:9px;transition:color .12s;text-decoration:none}
.ftr-a:hover{color:var(--text);text-decoration:none}
.ftr-social{display:flex;gap:8px;margin-top:16px}
.ftr-soc-a{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--dim);transition:all .13s;text-decoration:none;font-family:monospace;font-weight:900}
.ftr-soc-a:hover{background:rgba(74,158,255,.15);color:var(--blue);border-color:rgba(74,158,255,.3);text-decoration:none}
.ftr-bottom{max-width:1220px;margin:32px auto 0;padding-top:22px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ftr-copy{font-size:.73rem;color:var(--dim)}
.ftr-badges{display:flex;gap:8px}
.ftr-badge{font-size:.62rem;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:99px;padding:3px 10px;color:var(--muted)}

/* ===================== BUTTONS ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 26px;border-radius:99px;font-family:var(--bf);font-weight:700;font-size:.9rem;border:none;cursor:pointer;transition:all .15s;text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-blue{background:linear-gradient(135deg,#4a9eff,#2268cc);color:#fff;box-shadow:0 4px 20px rgba(74,158,255,.35)}
.btn-blue:hover{box-shadow:0 6px 28px rgba(74,158,255,.45);filter:brightness(1.07)}
.btn-ghost{background:rgba(255,255,255,.07);color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-sm{padding:8px 18px;font-size:.78rem}
.btn-green{background:linear-gradient(135deg,#50c878,#2e9a52);color:#fff;box-shadow:0 4px 16px rgba(80,200,120,.28)}

/* ===================== SETTINGS MODAL ===================== */
.modal-wrap{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:1000;align-items:center;justify-content:center}
.modal-wrap.open{display:flex}
.modal-box{background:linear-gradient(160deg,var(--bg2),var(--bg3));border:1.5px solid var(--border2);border-radius:20px;padding:26px;max-width:310px;width:94%;box-shadow:0 24px 80px rgba(0,0,0,.75)}
.modal-h{font-family:var(--hf);font-size:1.05rem;font-weight:800;color:var(--text);margin-bottom:18px}
.tog-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border)}
.tog-row:last-of-type{border:none}
.tog-lbl{font-size:.83rem;font-weight:700;color:var(--text)}
.tog-sub{font-size:.64rem;color:var(--dim);margin-top:2px}
.tog{width:42px;height:23px;border-radius:99px;background:rgba(255,255,255,.12);border:none;position:relative;cursor:pointer;transition:background .16s;flex-shrink:0}
.tog::after{content:'';position:absolute;width:16px;height:16px;background:#fff;border-radius:50%;top:3.5px;left:3.5px;transition:transform .16s;box-shadow:0 1px 5px rgba(0,0,0,.4)}
.tog.on{background:var(--blue)}.tog.on::after{transform:translateX(19px)}
.modal-btns{display:flex;gap:8px;margin-top:18px}
.mbtn{flex:1;padding:11px;border-radius:10px;font-family:var(--bf);font-size:.84rem;font-weight:700;border:none;cursor:pointer;transition:all .12s}
.mbtn-blue{background:linear-gradient(135deg,#4a9eff,#2268cc);color:#fff}
.mbtn-ghost{background:rgba(255,255,255,.07);border:1px solid var(--border);color:var(--text)}
.mbtn-ghost:hover{background:rgba(255,255,255,.12)}

/* ===================== HOME HERO ===================== */
.home-hero{max-width:1220px;margin:0 auto;padding:70px 20px 50px;text-align:center;position:relative}
.home-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(74,158,255,.1),transparent);pointer-events:none}
.hero-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(74,158,255,.12);border:1px solid rgba(74,158,255,.28);border-radius:99px;padding:6px 16px;font-size:.72rem;font-weight:700;color:var(--blue);margin-bottom:22px;text-transform:uppercase;letter-spacing:.08em}
.hero-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:blink 1.8s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.hero-h1{font-family:var(--hf);font-size:clamp(2.5rem,7vw,4.4rem);font-weight:800;letter-spacing:-.025em;line-height:1.04;margin-bottom:18px}
.hero-grad{background:linear-gradient(135deg,var(--orange),var(--red),var(--violet));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-p{font-size:1.02rem;color:var(--dim);max-width:580px;margin:0 auto 32px;line-height:1.7}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:52px}
.hero-stats{display:flex;gap:48px;justify-content:center;flex-wrap:wrap}
.hstat{text-align:center}
.hstat-val{font-family:var(--hf);font-size:2.2rem;font-weight:800;line-height:1}
.hstat-lbl{font-size:.63rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-top:3px}

/* ===================== FEATURED CARD ===================== */
.featured-wrap{max-width:1220px;margin:0 auto 44px;padding:0 20px}
.feat-card{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--border2);border-radius:22px;padding:36px;display:flex;gap:36px;align-items:center;position:relative;overflow:hidden}
.feat-card::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 80% at 100% 50%,rgba(74,158,255,.08),transparent);pointer-events:none}
.feat-text{flex:1;min-width:0;position:relative;z-index:1}
.feat-eyebrow{font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;color:var(--blue);font-weight:800;margin-bottom:8px}
.feat-h2{font-family:var(--hf);font-size:2rem;font-weight:800;margin-bottom:10px;line-height:1.08}
.feat-desc{font-size:.86rem;color:var(--dim);line-height:1.68;margin-bottom:22px;max-width:460px}
.feat-art{width:180px;flex-shrink:0;position:relative;z-index:1}
.feat-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ft{aspect-ratio:1;border-radius:14px;box-shadow:inset 0 3px 0 rgba(255,255,255,.22),inset 0 -3px 0 rgba(0,0,0,.2),0 6px 20px rgba(0,0,0,.35)}
.ft0{background:linear-gradient(145deg,#e09840,#b07028)}
.ft1{background:linear-gradient(145deg,#68a038,#488020)}
.ft2{background:linear-gradient(145deg,#4888b0,#306080)}
.ft3{background:linear-gradient(145deg,#d83838,#a01818)}

/* ===================== GAME CARDS GRID ===================== */
.section-wrap{max-width:1220px;margin:0 auto;padding:0 20px 64px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:8px}
.section-title{font-family:var(--hf);font-size:1.55rem;font-weight:800}
.section-sub{font-size:.78rem;color:var(--dim)}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:20px}
.game-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all .18s;position:relative;text-decoration:none;display:block;color:inherit}
.game-card:hover{transform:translateY(-5px);border-color:var(--border2);box-shadow:0 16px 50px rgba(0,0,0,.5);text-decoration:none;color:inherit}
.gc-thumb{height:148px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gc-icon{font-size:3rem;position:relative;z-index:1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4))}
.gc-badge{position:absolute;top:10px;right:10px;font-size:.57rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:99px}
.gc-badge.daily{background:rgba(80,200,120,.18);color:#50c878;border:1px solid rgba(80,200,120,.3)}
.gc-badge.hot{background:rgba(232,93,74,.18);color:#e85d4a;border:1px solid rgba(232,93,74,.3)}
.gc-badge.new{background:rgba(245,166,35,.18);color:#f5a623;border:1px solid rgba(245,166,35,.3)}
.gc-prog{position:absolute;bottom:0;left:0;height:3px;border-radius:0 99px 0 0;transition:width .4s}
.gc-body{padding:15px 17px 17px}
.gc-title{font-family:var(--hf);font-size:1.02rem;font-weight:800;margin-bottom:5px}
.gc-desc{font-size:.74rem;color:var(--dim);line-height:1.55;margin-bottom:13px}
.gc-foot{display:flex;align-items:center;justify-content:space-between}
.gc-lv{font-size:.62rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.gc-play{background:rgba(255,255,255,.07);border:1px solid var(--border);border-radius:99px;padding:4px 14px;font-size:.72rem;font-weight:700;transition:all .13s}
.game-card:hover .gc-play{background:var(--blue);border-color:var(--blue);color:#fff}

/* ===================== WHY PLAY (HOME) ===================== */
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.feat-item{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:22px 20px;text-align:center}
.feat-ico{font-size:2rem;margin-bottom:10px}
.feat-iname{font-family:var(--hf);font-size:.92rem;font-weight:800;margin-bottom:5px}
.feat-idesc{font-size:.76rem;color:var(--dim);line-height:1.6}

/* ===================== GAME PAGE ===================== */
.gpage-wrap{display:flex;flex-direction:column;flex:1}
.g-topbar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--bg1);border-bottom:1px solid var(--border);flex-wrap:wrap}
.back-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:1px solid var(--border);border-radius:8px;padding:6px 14px;font-size:.75rem;font-weight:700;color:var(--dim);text-decoration:none;transition:all .13s;flex-shrink:0}
.back-btn:hover{color:var(--text);border-color:var(--border2);background:rgba(255,255,255,.05);text-decoration:none}
.g-title-wrap{display:flex;flex-direction:column;min-width:0}
.g-name{font-family:var(--hf);font-size:1rem;font-weight:800;white-space:nowrap}
.g-sub-txt{font-size:.67rem;color:var(--dim)}
.g-actions{margin-left:auto;display:flex;gap:6px}
.ico-btn{background:none;border:1px solid var(--border);border-radius:7px;padding:6px 11px;font-size:.75rem;font-weight:700;color:var(--dim);transition:all .12s;white-space:nowrap}
.ico-btn:hover{color:var(--text);background:rgba(255,255,255,.06)}
.lv-bar{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--bg1);border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.lv-bar::-webkit-scrollbar{display:none}
.lv-lbl{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;flex-shrink:0}
.lv-dots{display:flex;gap:4px}
.ld{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);flex-shrink:0;transition:all .15s;cursor:default}
.ld.done{background:var(--green);border-color:var(--green)}
.ld.cur{background:var(--blue);border-color:var(--blue);transform:scale(1.5)}
.lv-num{font-size:.82rem;font-weight:800;color:var(--blue);flex-shrink:0;white-space:nowrap}
.g-hud{display:flex;border-bottom:1px solid var(--border)}
.hud-c{flex:1;padding:7px 4px;text-align:center;border-right:1px solid var(--border)}
.hud-c:last-child{border-right:none}
.hud-l{font-size:.5rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);font-weight:700}
.hud-v{font-size:1.1rem;font-weight:900;line-height:1.2}
.g-body{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column}
.game-area{flex:1;display:flex;align-items:center;justify-content:center;padding:14px;min-height:280px}
.g-overlay{position:absolute;inset:0;background:rgba(8,14,20,.88);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:50}
.g-overlay.hidden{display:none!important}
.ov-card{background:linear-gradient(160deg,var(--bg2),var(--bg3));border:1.5px solid var(--border2);border-radius:20px;padding:30px 24px;max-width:310px;width:94%;text-align:center;box-shadow:var(--sh)}
.ov-ico{font-size:2.8rem;margin-bottom:8px}
.ov-title{font-family:var(--hf);font-size:1.35rem;font-weight:800;margin-bottom:8px}
.ov-sub{font-size:.8rem;color:var(--dim);line-height:1.65;margin-bottom:14px}
.ov-score{font-family:var(--hf);font-size:2.1rem;font-weight:800;color:var(--gold);line-height:1}
.ov-slbl{font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-bottom:18px}
.ov-btns{display:flex;gap:8px}
.ovb{flex:1;padding:12px;border-radius:10px;font-family:var(--bf);font-size:.85rem;font-weight:700;border:none;cursor:pointer;transition:all .12s}
.ovb-p{background:linear-gradient(135deg,#4a9eff,#2268cc);color:#fff}
.ovb-p:hover{transform:translateY(-1px);filter:brightness(1.07)}
.ovb-s{background:rgba(255,255,255,.08);border:1px solid var(--border);color:var(--text)}
.ovb-s:hover{background:rgba(255,255,255,.12)}
.howto-panel{background:var(--bg2);border-bottom:1px solid var(--border);padding:14px 18px;display:none}
.howto-panel.open{display:block}
.howto-panel h4{font-family:var(--hf);font-size:.88rem;font-weight:800;margin-bottom:10px}
.howto-panel ol{padding-left:18px}
.howto-panel li{font-size:.78rem;color:var(--dim);margin-bottom:5px;line-height:1.55}
.g-guide{border-top:1px solid var(--border);background:var(--bg1);padding:20px}
.g-guide-inner{max-width:900px;margin:0 auto}
.g-guide h3{font-family:var(--hf);font-size:.95rem;font-weight:800;margin-bottom:14px;color:var(--text)}
.guide-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.gs-item{display:flex;gap:9px;align-items:flex-start}
.gs-num{background:var(--blue);color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:.63rem;font-weight:800;flex-shrink:0;margin-top:1px}
.gs-txt{font-size:.77rem;color:var(--dim);line-height:1.55}

/* ===================== COLOR TILES GAME ===================== */
#ct-board{background:#c8a060;border:3px solid #9a7040;border-radius:12px;padding:6px;display:grid;gap:3px;position:relative;box-shadow:inset 0 4px 14px rgba(0,0,0,.25),0 8px 32px rgba(0,0,0,.45)}
.ct-cell{border-radius:5px;background:rgba(140,100,40,.22);position:relative;aspect-ratio:1;cursor:pointer}
.ct-tile{position:absolute;inset:1px;border-radius:4px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.18);overflow:hidden;transition:transform .08s}
.ct-tile::before{content:'';position:absolute;top:2px;left:3px;right:3px;height:40%;background:rgba(255,255,255,.2);border-radius:3px 3px 50% 50%;pointer-events:none}
.ct-tile.blk{filter:brightness(.5) saturate(.35)}
.ct-tile.blk::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(0,0,0,.2),rgba(0,0,0,.2) 3px,transparent 3px,transparent 7px);z-index:3}
.ct-cell.sel .ct-tile{box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(255,255,255,.18),inset 0 2px 0 rgba(255,255,255,.28);z-index:8;animation:selPulse 1.4s ease infinite}
@keyframes selPulse{0%,100%{box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(255,255,255,.1),inset 0 2px 0 rgba(255,255,255,.28)}50%{box-shadow:0 0 0 3px #ffe870,0 0 0 9px rgba(255,230,80,.08),inset 0 2px 0 rgba(255,255,255,.28)}}
@keyframes tileIn{0%{transform:scale(.25);opacity:0}65%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes tileBlast{0%{transform:scale(1);opacity:1;filter:brightness(1)}30%{transform:scale(1.4);filter:brightness(2.8)}70%{transform:scale(2);opacity:.3}100%{transform:scale(0);opacity:0}}
.ct-tile.tile-new{animation:tileIn .2s ease forwards}
.ct-tile.tile-blast{animation:tileBlast .32s cubic-bezier(.36,.07,.19,.97) forwards!important;z-index:10}
.ct0{background:linear-gradient(145deg,#e09840,#b07030)}
.ct1{background:linear-gradient(145deg,#d4b038,#a08020)}
.ct2{background:linear-gradient(145deg,#68a038,#488022)}
.ct3{background:linear-gradient(145deg,#d83838,#a01c1c)}
.ct4{background:linear-gradient(145deg,#885528,#583012)}
.ct5{background:linear-gradient(145deg,#4888b0,#2e6292)}
.ct-sq{width:32%;height:32%;border-radius:2px;background:rgba(0,0,0,.2);position:relative;z-index:1}
.ct-dir{position:absolute;inset:0;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:2.8rem;opacity:0;pointer-events:none;z-index:15;color:rgba(255,255,255,.7)}
@keyframes dirGo{0%{opacity:0;transform:scale(.4)}35%{opacity:.9;transform:scale(1.1)}100%{opacity:0;transform:scale(1)}}
.ct-dir.go{animation:dirGo .38s ease forwards}
.arpad{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px}
.arpad-row{display:flex;gap:3px}
.ak{width:42px;height:42px;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:var(--dim);transition:all .1s;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.ak:hover,.ak:active{background:rgba(255,255,255,.14);color:var(--text);transform:scale(.91)}
/* Particles */
@keyframes ptf{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}}
.particle{position:absolute;width:7px;height:7px;border-radius:50%;z-index:30;pointer-events:none;animation:ptf .44s ease forwards}
/* Score pop */
.score-pop{position:fixed;pointer-events:none;font-family:var(--bf);font-size:1.1rem;font-weight:900;color:var(--gold);text-shadow:0 2px 8px rgba(0,0,0,.6);z-index:9999;animation:spop .65s ease forwards}
@keyframes spop{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-52px) scale(.55);opacity:0}}

/* ===================== STATIC PAGES ===================== */
.page-hero{background:radial-gradient(ellipse 100% 60% at 50% -15%,rgba(74,158,255,.09),transparent);padding:56px 20px 42px;text-align:center}
.pg-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(74,158,255,.1);border:1px solid rgba(74,158,255,.22);border-radius:99px;padding:5px 15px;font-size:.7rem;font-weight:700;color:var(--blue);margin-bottom:18px;text-transform:uppercase;letter-spacing:.07em}
.page-hero h1{font-family:var(--hf);font-size:clamp(2rem,6vw,3.3rem);font-weight:800;letter-spacing:-.022em;line-height:1.08;margin-bottom:14px}
.page-hero p{font-size:.98rem;color:var(--dim);max-width:560px;margin:0 auto}
.breadcrumb{display:flex;align-items:center;gap:7px;font-size:.72rem;color:var(--dim);padding:4px 0 22px;flex-wrap:wrap}
.breadcrumb a{color:var(--dim);text-decoration:none;transition:color .12s}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb span.sep{color:var(--muted)}
.static-body{max-width:880px;margin:0 auto;padding:44px 24px 80px}
.static-body h2{font-family:var(--hf);font-size:1.2rem;font-weight:700;color:var(--blue);margin:34px 0 11px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.static-body h3{font-family:var(--hf);font-size:1rem;font-weight:700;color:var(--text);margin:22px 0 8px}
.static-body p{font-size:.87rem;color:#89acc6;line-height:1.9;margin-bottom:13px}
.static-body li{font-size:.87rem;color:#89acc6;line-height:1.85;margin-bottom:6px}
.static-body strong{color:var(--text)}
.static-body a{color:var(--blue)}

/* ===================== HOW TO PLAY PAGE ===================== */
.htp-game-block{margin-bottom:52px;scroll-margin-top:82px}
.htp-block-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.htp-icon-big{font-size:2.4rem}
.htp-block-title{font-family:var(--hf);font-size:1.22rem;font-weight:800;color:var(--text);margin:0}
.htp-block-desc{font-size:.8rem;color:var(--dim);margin:3px 0 0}
.htp-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:12px}
.htp-step{display:flex;gap:11px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rs);padding:14px}
.htp-step-num{background:var(--blue);color:#fff;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;flex-shrink:0;margin-top:1px}
.htp-step-txt{font-size:.8rem;color:var(--dim);line-height:1.6}
.htp-step strong{color:var(--text)}
/* Quick jump nav */
.htp-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;padding:16px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r)}
.htp-nav-a{font-size:.75rem;font-weight:700;color:var(--dim);text-decoration:none;padding:5px 12px;border-radius:99px;border:1px solid var(--border);transition:all .13s;background:rgba(255,255,255,.03)}
.htp-nav-a:hover{color:var(--text);border-color:var(--border2);background:rgba(255,255,255,.07);text-decoration:none}

/* ===================== CONTACT PAGE ===================== */
.contact-form{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:28px;max-width:580px}
.cf-group{margin-bottom:16px}
.cf-label{display:block;font-size:.78rem;font-weight:700;color:var(--text);margin-bottom:6px}
.cf-input,.cf-textarea{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:11px 14px;font-family:var(--bf);font-size:.85rem;color:var(--text);outline:none;transition:border-color .14s;-webkit-appearance:none}
.cf-input:focus,.cf-textarea:focus{border-color:var(--blue)}
.cf-textarea{resize:vertical;min-height:120px}

/* ===================== RESPONSIVE ===================== */
@media(max-width:960px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){
  .ham{display:flex}
  .hdr-nav .nav-a:not(.nav-cta){display:none}
  .feat-card{flex-direction:column-reverse;text-align:center}
  .feat-art{margin:0 auto;width:140px}
  .games-grid{grid-template-columns:1fr 1fr}
  .hero-stats{gap:28px}
  .hstat-val{font-size:1.7rem}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:440px){
  .games-grid{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .hero-h1{font-size:2.2rem}
}

/* ===================== GAME-GENERATED CSS (backward compat) ===================== */
/* Games build their own HUD/level/board HTML with these class names */
.ghud,.g-hud-inner{display:flex;border-bottom:1px solid var(--border)}
.ghud-cell,.hud-c{flex:1;padding:7px 4px;text-align:center;border-right:1px solid var(--border)}
.ghud-cell:last-child,.hud-c:last-child{border-right:none}
.ghud-lbl,.hud-l{font-size:.5rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);font-weight:700}
.ghud-val,.hud-v{font-size:1.1rem;font-weight:900;line-height:1.2}
.level-sel,.lv-bar-inner{display:flex;align-items:center;gap:10px;padding:8px 16px;border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:var(--bg1)}
.ls-label,.lv-lbl{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;flex-shrink:0}
.ls-dots,.lv-dots-inner{display:flex;gap:4px}
.ls-num,.lv-num-inner{font-size:.82rem;font-weight:800;color:var(--blue);flex-shrink:0}
/* gp-* classes used by game functions */
.gp-header{display:none} /* PHP provides the topbar */
.gp-back{display:none}   /* PHP back button used instead */
/* ct-ar used in CT arpad */
.ct-ar{display:flex;gap:3px}

/* ================================================================
   COLOR TILES — Google-faithful tile design & 800px game box
   ================================================================ */

/* ---- 800×800 game container ---- */
.game-box-800 {
  width: min(800px, 100vw);
  height: min(800px, calc(100vh - 64px - 48px));
  min-height: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg0);
}
/* Override game-container for Color Tiles */
#game-container {
  width: 100%;
  flex: 1;
}

/* ---- CT Tile styles (Google earthy palette) ---- */
/* Override previous ct0–ct5 */
.ct-tile.ct0 { background: linear-gradient(145deg, #e09e58, #c8813a); }
.ct-tile.ct1 { background: linear-gradient(145deg, #d4bc30, #b5a020); }
.ct-tile.ct2 { background: linear-gradient(145deg, #68a840, #4e8c2a); }
.ct-tile.ct3 { background: linear-gradient(145deg, #d84040, #b82828); }
.ct-tile.ct4 { background: linear-gradient(145deg, #8a5530, #6b3e1c); }
.ct-tile.ct5 { background: linear-gradient(145deg, #4288b8, #2e6898); }

.ct-tile {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.28),
    inset 0 -3px 0 rgba(0,0,0,.22),
    inset 2px 0 0 rgba(255,255,255,.1),
    inset -2px 0 0 rgba(0,0,0,.12),
    0 2px 6px rgba(0,0,0,.3);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition: transform .08s;
}
/* Sheen highlight like Google's tiles */
.ct-tile::before {
  content: '';
  position: absolute;
  top: 2px; left: 4px; right: 4px;
  height: 38%;
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 100%);
  border-radius: 5px 5px 50% 50%;
  pointer-events: none;
}
/* Bottom shadow stripe */
.ct-tile::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28%;
  background: rgba(0,0,0,.18);
  border-radius: 0 0 7px 7px;
  pointer-events: none;
}

/* Symbols inside tiles */
.ct-sym { position: relative; z-index: 2; pointer-events: none; flex-shrink: 0; }
.ct-circle {
  width: 35%; height: 35%;
  border-radius: 50%;
  border: 2.5px solid rgba(0,0,0,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 3px rgba(0,0,0,.3);
  background: rgba(0,0,0,.18);
}
.ct-diamond {
  width: 28%; height: 28%;
  background: rgba(0,0,0,.22);
  border: 2px solid rgba(0,0,0,.28);
  transform: rotate(45deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.ct-sq-sym {
  width: 30%; height: 30%;
  border-radius: 3px;
  background: rgba(0,0,0,.22);
  border: 2px solid rgba(0,0,0,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.ct-cb-lbl {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 900;
  color: rgba(0,0,0,.55);
  z-index: 5;
  pointer-events: none;
}

/* Blocked tile stripe pattern */
.ct-tile.blk {
  background: linear-gradient(145deg, #2a3520, #1e2818) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.06), 0 1px 3px rgba(0,0,0,.4) !important;
}
.ct-tile.blk::before { display: none; }
.ct-tile.blk::after  { display: none; }
.ct-block-stripe {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,.3) 0px, rgba(0,0,0,.3) 3px,
    rgba(255,255,255,.04) 3px, rgba(255,255,255,.04) 8px
  );
  pointer-events: none;
}

/* CT cell (empty slot) */
.ct-cell {
  border-radius: 7px;
  background: rgba(20,40,10,.35);
  border: 1px solid rgba(0,0,0,.2);
  position: relative;
  flex-shrink: 0;
}
.ct-cell.sel .ct-tile {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px rgba(255,255,255,.25),
    inset 0 3px 0 rgba(255,255,255,.28),
    inset 0 -3px 0 rgba(0,0,0,.22);
  z-index: 8;
  animation: selPulse 1.5s ease infinite;
}

/* Blast animation */
@keyframes tileBlast {
  0%   { transform: scale(1);   opacity: 1; filter: brightness(1.2); }
  30%  { transform: scale(1.5); opacity: 1; filter: brightness(3); }
  70%  { transform: scale(2.2); opacity: .3; }
  100% { transform: scale(0);   opacity: 0; }
}
.ct-tile.blast { animation: tileBlast .35s cubic-bezier(.36,.07,.19,.97) forwards !important; z-index: 10; }

/* New tile appear */
@keyframes tileIn {
  0%   { transform: scale(.2); opacity: 0; }
  65%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.ct-tile.tile-new { animation: tileIn .18s ease forwards; }

/* Direction flash */
.ct-dir {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  color: rgba(255,255,255,.75);
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  border-radius: 13px;
}
@keyframes dirGo {
  0%   { opacity: 0; transform: scale(.4); }
  30%  { opacity: .9; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(.9); }
}
.ct-dir.go { animation: dirGo .38s ease forwards; }

/* Moves bar dots */
.ct-mv-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.15);
  flex-shrink: 0;
  transition: all .2s;
}
.ct-mv-dot.active { background: var(--blue); border-color: var(--blue); }

/* D-pad arrows */
.arpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: var(--bg1);
  border-top: 1px solid var(--border);
}
.ct-ar { display: flex; gap: 3px; }
.ak {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--border);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--dim);
  cursor: pointer;
  transition: all .1s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ak:hover, .ak:active {
  background: rgba(255,255,255,.16);
  color: var(--text);
  transform: scale(.9);
}

/* gp-btn used inline */
.gp-btn {
  background: rgba(255,255,255,.07);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 12px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--dim);
  cursor: pointer;
  transition: all .12s;
}
.gp-btn:hover { color: var(--text); background: rgba(255,255,255,.12); }

/* ================================================================
   RESPONSIVE — 800px game page layout
   ================================================================ */
/* Game page: full height flex column */
.game-page-main {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 64px);
}
/* Game frame: centers the 800px box */
.game-frame {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--bg0);
  padding: 0;
}
/* The 800px max-width game container */
.game-800 {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg0);
  border-left:  1px solid var(--border);
  border-right: 1px solid var(--border);
}
@media(max-width:800px) {
  .game-800 { border: none; }
}

/* Mobile responsive game area */
@media(max-width:480px) {
  .ak { width: 40px; height: 40px; font-size: 1rem; }
  .hud-c, .ghud-cell { padding: 5px 3px; }
  .hud-v, .ghud-val  { font-size: .95rem; }
  .hud-l, .ghud-lbl  { font-size: .45rem; }
}
@media(max-width:360px) {
  .ak { width: 36px; height: 36px; font-size: .9rem; }
}