@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&family=Cinzel:wght@400;600&display=swap');

:root {
  --gold:#c9a84c; --gold-light:#e8c97a; --gold-dark:#8a6a2a; --gold-glow:rgba(201,168,76,.4);
  --bg:#0e0b05; --panel-bg:linear-gradient(160deg,#3a2a0c,#1e1408); --panel-b:#7a5a1a;
  --t2:#3d2c0e;--t2c:#e8c97a; --t4:#4a3210;--t4c:#f0d98a; --t8:#7a4010;--t8c:#fff;
  --t16:#9a3a08;--t16c:#fff; --t32:#b83008;--t32c:#fff; --t64:#d02808;--t64c:#fff;
  --t128:#c9a84c;--t128c:#1a0e00; --t256:#d4b840;--t256c:#1a0e00; --t512:#dcc830;--t512c:#1a0e00;
  --t1024:#e8d420;--t1024c:#1a0e00; --t2048:#f0e010;--t2048c:#1a0e00;
  --tsuper:#fff8d0;--tsuperc:#1a0e00;
}


html,body{min-height:100vh;}
body{
  background:var(--bg);
  background-image:radial-gradient(ellipse at 15% 15%,#241806 0%,transparent 55%),radial-gradient(ellipse at 85% 85%,#160e03 0%,transparent 55%);
  display:flex;flex-direction:column;align-items:center;
  font-family:'Rajdhani',sans-serif;color:var(--gold-light);user-select:none;
}

/* ─── HEADER ─── */
.app-header{width:100%;max-width:1280px;padding:14px 20px 0;text-align:center;flex-shrink:0;}
h1{
  font-family:'Orbitron',monospace;font-weight:900;font-size:clamp(1.4rem,3.5vw,2.2rem);
  letter-spacing:.2em;color:var(--gold-light);text-transform:uppercase;
  text-shadow:0 0 30px var(--gold-glow),0 0 70px rgba(201,168,76,.15);
}
.subtitle{font-family:'Cinzel',serif;font-size:.65rem;color:var(--gold-dark);letter-spacing:.3em;text-transform:uppercase;margin-bottom:10px;}

/* ─── NAV ─── */
.nav-tabs{display:flex;width:100%;max-width:1280px;border-bottom:2px solid var(--gold-dark);padding:0 20px;flex-shrink:0;}
.nav-tab{
  flex:1;padding:9px 6px;font-family:'Orbitron',monospace;font-size:.58rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold-dark);background:transparent;
  border:none;cursor:pointer;transition:all .2s;border-bottom:3px solid transparent;margin-bottom:-2px;
}
.nav-tab.active{color:var(--gold-light);border-bottom-color:var(--gold);background:linear-gradient(to bottom,rgba(201,168,76,.07),transparent);}
.nav-tab:hover:not(.active){color:var(--gold);}

/* ─── PAGES ─── */
.pages{flex:1;width:100%;max-width:1280px;overflow:hidden;position:relative;}
.page{display:none;width:100%;padding:16px 20px 40px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.page.active{display:block;}
.page::-webkit-scrollbar{width:4px;}
.page::-webkit-scrollbar-track{background:transparent;}
.page::-webkit-scrollbar-thumb{background:var(--gold-dark);border-radius:2px;}

/* Play page centers its content */
#page-play.active{display:flex;flex-direction:column;align-items:center;padding:12px 16px 30px;overflow:hidden;}

/* ─── GAME ─── */
.game-top{display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%;max-width:420px;margin-bottom:10px;}
.score-box{background:#1a1005;border:1px solid var(--gold-dark);border-radius:10px;padding:5px 10px;text-align:center;flex:1;}
.score-box .label{font-size:.56rem;letter-spacing:.1em;color:var(--gold-dark);text-transform:uppercase;}
.score-box .val{font-family:'Orbitron',monospace;font-size:1rem;color:var(--gold-light);font-weight:700;}
.btn-new{
  font-family:'Orbitron',monospace;font-size:.62rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:8px 12px;border-radius:10px;cursor:pointer;
  background:linear-gradient(135deg,#7a5a1a,#c9a84c);color:#1a0e00;border:none;
  transition:all .2s;box-shadow:0 0 15px rgba(201,168,76,.2);white-space:nowrap;flex-shrink:0;
}
.btn-new:hover{background:linear-gradient(135deg,#c9a84c,#e8d040);}

.grid-container{width:min(calc(100vw - 32px),420px);aspect-ratio:1/1;position:relative;flex-shrink:0;}
.grid-wrap{
  width:100%;height:100%;background:#0d0900;border-radius:14px;padding:8px;
  border:2px solid var(--gold-dark);box-shadow:inset 0 0 30px rgba(0,0,0,.7),0 0 40px rgba(201,168,76,.08);
  position:relative;
}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(5px,1.5vw,9px);width:100%;height:100%;}
.cell-bg{background:#1e1508;border-radius:8px;border:1px solid #2a1c08;}
.tiles-layer{position:absolute;inset:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(5px,1.5vw,9px);pointer-events:none;}
.tile{
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',monospace;font-weight:700;transition:transform .1s;
  animation:pop .14s ease;font-size:clamp(.55rem,3.5vw,1.35rem);
}
@keyframes pop{0%{transform:scale(.65);opacity:.4}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.tile.merged{animation:merge .16s ease;}
@keyframes merge{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1)}}
.tile[data-v="2"]{background:var(--t2);color:var(--t2c);}
.tile[data-v="4"]{background:var(--t4);color:var(--t4c);}
.tile[data-v="8"]{background:var(--t8);color:var(--t8c);}
.tile[data-v="16"]{background:var(--t16);color:var(--t16c);}
.tile[data-v="32"]{background:var(--t32);color:var(--t32c);}
.tile[data-v="64"]{background:var(--t64);color:var(--t64c);box-shadow:0 0 15px rgba(208,40,8,.5);}
.tile[data-v="128"]{background:var(--t128);color:var(--t128c);box-shadow:0 0 20px rgba(201,168,76,.6);}
.tile[data-v="256"]{background:var(--t256);color:var(--t256c);box-shadow:0 0 25px rgba(212,184,64,.7);}
.tile[data-v="512"]{background:var(--t512);color:var(--t512c);box-shadow:0 0 28px rgba(220,200,48,.8);}
.tile[data-v="1024"]{background:var(--t1024);color:var(--t1024c);box-shadow:0 0 33px rgba(232,212,32,.9);}
.tile[data-v="2048"]{background:var(--t2048);color:var(--t2048c);box-shadow:0 0 44px rgba(240,224,16,1),0 0 70px rgba(240,224,16,.4);}
.tile.super{background:var(--tsuper);color:var(--tsuperc);box-shadow:0 0 55px rgba(255,255,200,.9);}

.overlay{
  position:absolute;inset:0;border-radius:12px;background:rgba(10,7,2,.9);
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:10;
}
.overlay.show{display:flex;}
.overlay-title{font-family:'Orbitron',monospace;font-size:1.3rem;font-weight:900;letter-spacing:.15em;color:var(--gold-light);text-shadow:0 0 30px var(--gold-glow);text-align:center;}
.overlay-sub{color:var(--gold-dark);font-size:.85rem;text-align:center;padding:0 16px;}

.game-footer{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:420px;margin-top:8px;gap:8px;}
.hint-text{font-size:.66rem;color:var(--gold-dark);letter-spacing:.05em;}
.btn-hint{
  font-family:'Orbitron',monospace;font-size:.58rem;font-weight:700;
  padding:7px 11px;border-radius:9px;cursor:pointer;
  background:rgba(34,197,94,.1);color:#22c55e;border:1px solid rgba(34,197,94,.35);
  transition:all .2s;white-space:nowrap;
}
.btn-hint.active{background:rgba(34,197,94,.2);color:#4ade80;border-color:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.25);}
.btn-hint:hover{background:rgba(34,197,94,.18);}

.mini-stats{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;width:100%;max-width:420px;margin-top:8px;}
.mini-stat{background:#1a1005;border:1px solid #2a1c08;border-radius:8px;padding:4px 10px;text-align:center;flex:1;min-width:65px;}
.mini-stat .ml{font-size:.54rem;color:var(--gold-dark);letter-spacing:.09em;text-transform:uppercase;}
.mini-stat .mv{font-family:'Orbitron',monospace;font-size:.82rem;color:var(--gold-light);}

/* ─── HINT PANEL ─── */
.hint-panel{
  width:100%;max-width:420px;
  background:linear-gradient(160deg,#0c1a09,#060f05);
  border:1px solid rgba(34,197,94,.28);border-radius:14px;
  padding:13px 14px;margin-top:10px;display:none;
}
.hint-panel.show{display:block;}
.hint-panel-title{
  font-family:'Orbitron',monospace;font-size:.62rem;font-weight:700;
  color:#4ade80;letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px;
}
.hint-arrows{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.hint-dir{
  border-radius:10px;padding:9px 10px;
  display:flex;align-items:center;gap:8px;
  border:1px solid transparent;position:relative;overflow:hidden;
  cursor:default;
}
.hint-dir-icon{font-size:1.5rem;flex-shrink:0;line-height:1;}
.hint-dir-info{flex:1;min-width:0;}
.hint-dir-label{font-family:'Orbitron',monospace;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.hint-dir-score{font-size:.7rem;color:rgba(255,255,255,.6);margin-top:2px;}
.hint-dir-badge{font-family:'Orbitron',monospace;font-size:.52rem;font-weight:700;padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;white-space:nowrap;}

.hd-best{border-color:rgba(34,197,94,.55);background:rgba(34,197,94,.07);}
.hd-best .hint-dir-label{color:#4ade80;} .hd-best .hint-dir-badge{background:rgba(34,197,94,.22);color:#4ade80;border:1px solid rgba(34,197,94,.5);}
.hd-good{border-color:rgba(132,204,22,.45);background:rgba(132,204,22,.06);}
.hd-good .hint-dir-label{color:#a3e635;} .hd-good .hint-dir-badge{background:rgba(132,204,22,.18);color:#a3e635;border:1px solid rgba(132,204,22,.4);}
.hd-ok{border-color:rgba(245,158,11,.38);background:rgba(245,158,11,.05);}
.hd-ok .hint-dir-label{color:#fbbf24;} .hd-ok .hint-dir-badge{background:rgba(245,158,11,.18);color:#fbbf24;border:1px solid rgba(245,158,11,.35);}
.hd-bad{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.05);}
.hd-bad .hint-dir-label{color:#f87171;} .hd-bad .hint-dir-badge{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.3);}
.hd-invalid{opacity:.3;border-color:rgba(255,255,255,.08);background:rgba(0,0,0,.1);}
.hd-invalid .hint-dir-label{color:#444;} .hd-invalid .hint-dir-badge{background:rgba(255,255,255,.04);color:#444;border:1px solid #2a2a2a;}

/* ─── CONTENT SECTIONS ─── */
.section{background:linear-gradient(160deg,#2a1e08,#1a1005);border:1px solid var(--gold-dark);border-radius:14px;padding:16px 18px;margin-bottom:14px;}
.section:last-child{margin-bottom:0;}
.section-title{
  font-family:'Orbitron',monospace;font-size:.68rem;font-weight:700;letter-spacing:.18em;
  color:var(--gold);text-transform:uppercase;border-bottom:1px solid var(--gold-dark);
  padding-bottom:7px;margin-bottom:13px;display:flex;align-items:center;gap:7px;
}
.section-title span{font-size:.95rem;}
.prose{font-size:.87rem;line-height:1.7;color:#c8a85a;margin-bottom:10px;}
.prose:last-child{margin-bottom:0;}
.prose strong{color:var(--gold-light);}
.tip{background:#0d0900;border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:9px 11px;margin:8px 0;font-size:.83rem;line-height:1.62;color:#c8a85a;}
.tip strong{color:var(--gold-light);}
.tip:last-child{margin-bottom:0;}
.formula-box{background:#0d0900;border:1px solid #3a2a0c;border-radius:8px;padding:10px 14px;margin:9px 0;color:var(--gold);font-size:.84rem;text-align:center;line-height:1.9;overflow-x:auto;}
.numbered-step{display:flex;gap:11px;align-items:flex-start;margin:9px 0;font-size:.84rem;color:#c8a85a;line-height:1.62;}
.step-num{font-family:'Orbitron',monospace;font-size:.66rem;font-weight:900;color:var(--gold);background:#1a1005;border:1px solid var(--gold-dark);border-radius:50%;min-width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.ex-board{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;max-width:175px;}
.ex-cell{aspect-ratio:1;border-radius:5px;display:flex;align-items:center;justify-content:center;font-family:'Orbitron',monospace;font-weight:700;font-size:clamp(.44rem,1.8vw,.7rem);}
.badge{display:inline-block;font-family:'Orbitron',monospace;font-size:.52rem;padding:2px 6px;border-radius:100px;font-weight:700;letter-spacing:.04em;margin-right:4px;}
.badge-easy{background:rgba(40,140,40,.2);color:#7ae07a;border:1px solid #3a7a3a;}
.badge-hard{background:rgba(200,40,40,.18);color:#e87a7a;border:1px solid #7a3a3a;}
.badge-pro{background:rgba(201,168,76,.14);color:var(--gold);border:1px solid var(--gold-dark);}
.strat-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0;}
.strat-card{background:#0d0900;border:1px solid var(--gold-dark);border-radius:10px;padding:11px;}
.strat-card .sc-t{font-family:'Orbitron',monospace;font-size:.58rem;font-weight:700;color:var(--gold);letter-spacing:.09em;margin-bottom:5px;text-transform:uppercase;}
.strat-card .sc-b{font-size:.77rem;line-height:1.55;color:#c8a85a;}
.snake-row{display:flex;gap:4px;align-items:center;margin:2px 0;font-family:'Orbitron',monospace;font-size:.56rem;}
.snake-cell{width:42px;height:26px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:700;}
.snake-arrow{color:var(--gold);font-size:.8rem;font-weight:700;}
.prob-row{display:flex;align-items:center;gap:9px;margin:5px 0;}
.prob-label{min-width:82px;font-size:.74rem;color:var(--gold-dark);}
.prob-bar-wrap{flex:1;height:8px;background:#1a1005;border-radius:4px;overflow:hidden;}
.prob-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold-dark),var(--gold));}
.prob-pct{width:36px;text-align:right;font-size:.7rem;color:var(--gold-light);}

/* ═══════════════════════════════════════════
   DESKTOP (≥768px)
   - Two-column content
   - Play page: game left + sidebar right
   - No scroll restrictions
═══════════════════════════════════════════ */
@media (min-width:768px){
  .pages{height:calc(100vh - 160px);overflow:hidden;}
  .page{height:100%;overflow-y:auto;padding:20px 28px 50px;}

  /* Play page desktop: side-by-side */
  #page-play.active{
    flex-direction:row;align-items:flex-start;justify-content:center;
    gap:26px;overflow-y:auto;padding:20px 28px 50px;height:100%;
  }
  .game-left{display:flex;flex-direction:column;align-items:center;flex-shrink:0;}
  .grid-container{width:clamp(300px,33vw,440px);}
  .game-top,.game-footer,.mini-stats{max-width:clamp(300px,33vw,440px);}
  .hint-panel{max-width:clamp(300px,33vw,440px);}

  /* Right sidebar (visible desktop only) */
  .game-right{
    display:flex;flex-direction:column;gap:13px;
    width:320px;flex-shrink:0;padding-top:2px;
  }

  /* Two-column layout for content pages */
  .col2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;align-items:start;}
  .col2 .section{margin-bottom:0;}
  .col3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px;align-items:start;}
  .col3 .section{margin-bottom:0;}
  .span2{grid-column:1/-1;}

  /* Nav wider on desktop */
  .nav-tab{font-size:.65rem;padding:10px 14px;}
}

/* ═══════════════════════════════════════════
   MOBILE (<768px)
   - Single column
   - Scroll lock on play page
   - game-right hidden
═══════════════════════════════════════════ */
@media (max-width:767px){
  .game-right{display:none!important;}
  .col2,.col3{display:contents;}
  /* scroll lock class */
  body.play-locked{overflow:hidden;height:calc(100vh - 60px);}
  body.play-locked .pages{height:calc(100vh - 90px);overflow:hidden;}
  #page-play.active{overflow:hidden;height:100%;justify-content:flex-start;}
}

/* large screens */
@media (min-width:1100px){
  .grid-container{width:clamp(380px,30vw,480px);}
  .game-top,.game-footer,.mini-stats,.hint-panel{max-width:clamp(380px,30vw,480px);}
  .game-right{width:360px;}
}