@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f1efe9;color:#101010;font-family:"Space Grotesk",Arial,sans-serif}.header{height:78px;border-bottom:1px solid #111;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;position:sticky;top:0;background:#f1efe9eF;backdrop-filter:blur(10px);z-index:10}.logo{font-weight:700;font-size:24px;letter-spacing:-1px;color:#111;text-decoration:none}.logo span{font-weight:400}.nav{display:flex;gap:6px}.nav-link,.game-tab{font:500 12px "DM Mono",monospace;text-transform:uppercase;border:1px solid transparent;background:none;padding:10px 14px;cursor:pointer}.nav-link.active,.nav-link:hover,.game-tab.active,.game-tab:hover{border-color:#111}.header-mark{font:12px "DM Mono",monospace}.page{display:none}.active-page{display:block}.hero{min-height:76vh;padding:12vh 8vw 8vh;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid #111}.eyebrow{font:11px "DM Mono",monospace;letter-spacing:.12em;margin:0 0 30px}.hero h1{font-size:clamp(70px,13vw,190px);line-height:.78;letter-spacing:-.08em;margin:0}.hero h1 em{font-style:normal;color:#111}.hero-text{font-size:17px;line-height:1.5;max-width:520px;margin:55px 0 30px}.scroll-link{font:11px "DM Mono",monospace;text-transform:uppercase;color:#111;text-decoration:none}.parts-section,.build-flow{padding:100px 8vw;border-bottom:1px solid #111}.section-head{margin-bottom:70px}.section-head h2,.build-flow h2{font-size:clamp(42px,6vw,90px);line-height:.9;letter-spacing:-.06em;margin:0}.parts-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #111;border-left:1px solid #111}.part-card{min-height:280px;padding:24px;border-right:1px solid #111;border-bottom:1px solid #111;position:relative;cursor:help}.part-card:hover{background:#111;color:#f1efe9}.part-number{font:11px "DM Mono",monospace;position:absolute;top:20px;right:20px}.part-icon{font:600 35px "DM Mono",monospace;margin-top:38px;margin-bottom:65px}.part-card h3{font-size:23px;margin:0 0 8px}.part-card p{font-size:12px;margin:0;opacity:.65}.tooltip{position:absolute;left:15px;right:15px;bottom:calc(100% - 25px);padding:18px;background:#d8ff42;color:#111;border:1px solid #111;font-size:12px;line-height:1.5;z-index:5;opacity:0;transform:translateY(10px);pointer-events:none;transition:.18s;box-shadow:6px 6px 0 #111}.part-card:hover .tooltip{opacity:1;transform:none}.build-flow{display:grid;grid-template-columns:1fr 1fr;gap:10vw}.flow-list>div{border-top:1px solid #111;padding:22px 0;display:grid;grid-template-columns:55px 1fr;gap:8px}.flow-list span,.hint,.scoreline{font:11px "DM Mono",monospace}.flow-list small{grid-column:2;opacity:.6}.games-hero{min-height:60vh}.game-tabs{display:flex;border-bottom:1px solid #111;padding:18px 8vw;gap:6px}.game-panel{display:none;padding:55px 8vw 100px}.game-panel.active{display:block}.game-title{display:flex;align-items:center;justify-content:space-between;font-size:70px;letter-spacing:-.06em;margin-bottom:15px}.start-btn{background:#111;color:#f1efe9;border:0;padding:13px 20px;font:11px "DM Mono",monospace;cursor:pointer}.scoreline{margin-bottom:20px}.scoreline span{margin-left:25px;opacity:.6}.board2048{width:min(460px,90vw);aspect-ratio:1;background:#b7b3a9;border:5px solid #111;padding:5px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.tile{display:grid;place-items:center;background:#d7d2c7;font-size:32px;font-weight:700}.tile.v2{background:#eee9df}.tile.v4{background:#ddd8c8}.tile.v8{background:#d8ff42}.tile.v16{background:#ff9b6a}.tile.v32{background:#ff6b6b}.tile.v64{background:#111;color:#fff}.tile.v128,.tile.v256,.tile.v512,.tile.v1024,.tile.v2048{background:#c4a7ff}.mines-board{width:min(450px,90vw);display:grid;grid-template-columns:repeat(9,1fr);gap:3px;background:#111;border:3px solid #111}.mine-cell{aspect-ratio:1;border:0;background:#d7d2c7;font:700 16px "DM Mono",monospace;cursor:pointer}.mine-cell.open{background:#eee9df}.mine-cell.flag{background:#d8ff42}.mine-cell.mine{background:#ff6b6b}#snakeCanvas{display:block;width:min(400px,90vw);height:auto;border:2px solid #111;background:#111}.game-status{min-height:38px;margin:0 0 14px;font:11px "DM Mono",monospace}.restart-game{margin-left:14px;padding:8px 12px;border:1px solid #111;background:#fff;color:#111;font:10px "DM Mono",monospace;cursor:pointer}.restart-game:hover{background:#111;color:#fff}footer{border-top:1px solid #111;padding:25px 4vw;display:flex;justify-content:space-between;font:10px "DM Mono",monospace}@media(max-width:800px){.parts-grid{grid-template-columns:repeat(2,1fr)}.build-flow{grid-template-columns:1fr}}@media(max-width:500px){.parts-grid{grid-template-columns:1fr}.hero,.parts-section,.build-flow,.game-panel{padding-left:6vw;padding-right:6vw}}

.header-tools{display:flex;align-items:center;gap:14px}.theme-toggle{font:10px "DM Mono",monospace;border:1px solid #111;background:transparent;color:#111;padding:8px 11px;cursor:pointer}.theme-toggle:hover{background:#111;color:#fff}.game-status{min-height:38px;margin:0 0 14px;font:11px "DM Mono",monospace}.restart-game{margin-left:14px;padding:8px 12px;border:1px solid #111;background:#fff;color:#111;font:10px "DM Mono",monospace;cursor:pointer}.restart-game:hover{background:#111;color:#fff}
body.dark{background:#090b0f;color:#edf2f5}body.dark .header{background:#090b0fe8;border-color:#27303a}body.dark .logo,body.dark .nav-link,body.dark .game-tab,body.dark .scroll-link{color:#edf2f5}body.dark .nav-link.active,body.dark .nav-link:hover,body.dark .game-tab.active,body.dark .game-tab:hover{border-color:#27303a}body.dark .theme-toggle{border-color:#69f0ae;color:#69f0ae}body.dark .theme-toggle:hover{background:#69f0ae;color:#07100b}body.dark .parts-section,body.dark .build-flow,body.dark .game-tabs,body.dark footer{border-color:#27303a}body.dark .part-card{background:#10141a;border-color:#27303a}body.dark .part-card:hover{background:#151a21}body.dark .part-card p,body.dark .hero-text{color:#8b98a5}body.dark .tooltip{background:#17201d;color:#eafcf3;border-color:#69f0ae;box-shadow:6px 6px 0 #000}body.dark .start-btn{background:#69f0ae;color:#07100b}body.dark .restart-game{border-color:#69f0ae;background:#10141a;color:#edf2f5}body.dark .restart-game:hover{background:#69f0ae;color:#07100b}

.guide-section{padding:110px 8vw;border-bottom:1px solid #111}.guide-head{display:grid;grid-template-columns:1.2fr .8fr;gap:8vw;align-items:end;max-width:1200px;margin:auto}.guide-head h2{font-size:clamp(48px,7vw,100px);line-height:.86;letter-spacing:-.07em;margin:0}.guide-head h2 em{font-style:normal;-webkit-text-stroke:1px #111;color:transparent}.guide-intro{font-size:14px;line-height:1.7;opacity:.65;max-width:500px}.guide-progress{max-width:1200px;margin:70px auto 30px;display:flex;align-items:center;gap:15px;font:10px "DM Mono",monospace}.guide-progress div{height:1px;background:#111;flex:1;position:relative}.guide-progress i{position:absolute;left:0;top:-2px;width:28%;height:3px;background:#d8ff42}.guide-list{max-width:1200px;margin:auto;border-top:1px solid #111}.guide-list details{border-bottom:1px solid #111}.guide-list summary{list-style:none;display:grid;grid-template-columns:60px 1fr 160px;align-items:center;gap:20px;padding:24px 0;cursor:pointer}.guide-list summary::-webkit-details-marker{display:none}.guide-list summary span{font:10px "DM Mono",monospace;opacity:.55}.guide-list summary b{font-size:21px;letter-spacing:-.03em}.guide-list summary small{font:10px "DM Mono",monospace;opacity:.5}.guide-list summary:after{content:'+';font:20px "DM Mono",monospace;text-align:right}.guide-list details[open] summary:after{content:'−'}.guide-list details[open] summary b{color:#69f0ae}.guide-list details>div{padding:0 160px 30px 80px;max-width:1000px}.guide-list p{font-size:14px;line-height:1.7;opacity:.75}.guide-list ul{margin:18px 0 0;padding-left:20px;font-size:12px;line-height:2;opacity:.7}.guide-list code{background:#111;color:#d8ff42;padding:3px 5px;font-family:"DM Mono",monospace}.tip-box{margin-top:22px;padding:16px;border:1px solid #111;background:#d8ff42;color:#111;font:11px/1.6 "DM Mono",monospace}.compatibility{max-width:1200px;margin:90px auto 0;padding-top:70px;border-top:1px solid #111;display:grid;grid-template-columns:1fr 1fr;gap:8vw}.compatibility h3{font-size:40px;line-height:.95;letter-spacing:-.05em;margin:0}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid #111;border-left:1px solid #111}.check-grid span{padding:18px;border-right:1px solid #111;border-bottom:1px solid #111;font:10px "DM Mono",monospace}.theme-toggle{transition:.2s}.header-tools{display:flex;align-items:center;gap:14px}
body.dark .guide-section,body.dark .guide-progress div,body.dark .guide-list,body.dark .guide-list details,body.dark .compatibility{border-color:#27303a}body.dark .guide-head h2 em{color:transparent;-webkit-text-stroke:1px #edf2f5}body.dark .guide-list summary b{color:#edf2f5}body.dark .guide-list details[open] summary b{color:#69f0ae}body.dark .tip-box{background:#69f0ae;border-color:#69f0ae;color:#07100b}body.dark .guide-list code{background:#27303a;color:#69f0ae}.theme-toggle{font:10px "DM Mono",monospace;border:1px solid #111;background:transparent;color:#111;padding:8px 11px;cursor:pointer}.theme-toggle:hover{background:#111;color:#fff}
@media(max-width:800px){.guide-head,.compatibility{grid-template-columns:1fr}.guide-list summary{grid-template-columns:40px 1fr 25px}.guide-list summary small{display:none}.guide-list details>div{padding-left:40px;padding-right:0}.check-grid{grid-template-columns:1fr}.guide-section{padding-left:6vw;padding-right:6vw}}
.configurator{padding:110px 8vw;border-bottom:1px solid #111}.config-head{max-width:1200px;margin:auto;display:grid;grid-template-columns:1.15fr .85fr;gap:8vw;align-items:end}.config-head h2{font-size:clamp(45px,6vw,86px);line-height:.88;letter-spacing:-.07em;margin:0}.config-head h2 em{font-style:normal;-webkit-text-stroke:1px #111;color:transparent}.config-head>p{font-size:14px;line-height:1.7;opacity:.65}.preset-row{max-width:1200px;margin:55px auto 20px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;border-bottom:1px solid #111;padding-bottom:18px}.preset-row span{font:10px "DM Mono",monospace;opacity:.5;margin-right:8px}.preset-row button{background:transparent;border:1px solid #111;padding:9px 12px;font:10px "DM Mono",monospace;cursor:pointer}.preset-row button:hover{background:#111;color:#fff}.preset-row button.active-preset{background:#111;color:#fff}.currency-picker{margin-left:auto;display:flex;align-items:center;gap:8px;font:10px "DM Mono",monospace;opacity:.8}.currency-picker select{background:#f1efe9;border:1px solid #111;padding:8px 10px;font:10px "DM Mono",monospace;color:#111}.builder-layout{max-width:1200px;margin:auto;display:grid;grid-template-columns:1.45fr .55fr;gap:25px}.builder-parts{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid #111;border-left:1px solid #111}.builder-card{padding:20px;border-right:1px solid #111;border-bottom:1px solid #111}.builder-card label{display:block;font:10px "DM Mono",monospace;opacity:.55;margin-bottom:10px}.builder-card select{width:100%;background:#f1efe9;border:1px solid #111;color:#111;padding:12px;font:12px "DM Mono",monospace;outline:none}.build-summary{border:1px solid #111;background:#111;color:#f1efe9;padding:22px;align-self:start;position:sticky;top:95px}.summary-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid #333;font:10px "DM Mono",monospace}.summary-top b{font-size:28px;color:#d8ff42}.compat-status{margin:18px 0;padding:13px;border:1px solid #444;font:10px/1.5 "DM Mono",monospace}.compat-status.ok{border-color:#69f0ae;color:#69f0ae}.compat-status.bad{border-color:#ff657a;color:#ff657a}.compat-list{font:10px/1.7 "DM Mono",monospace;color:#aaa}.compat-list div{padding:7px 0;border-bottom:1px solid #292929}.compat-list .ok{color:#69f0ae}.compat-list .bad{color:#ff657a}.summary-lines{margin-top:18px}.summary-lines div{display:flex;justify-content:space-between;padding:8px 0;font-size:12px}.summary-lines b{color:#fff}.price-note{font:9px/1.5 "DM Mono",monospace;color:#777;margin:18px 0 0}.dark .configurator{background:#090b0f;color:#edf2f5}.dark .config-head h2 em{color:#edf2f5}.dark .preset-row,.dark .builder-parts{border-color:#27303a}.dark .preset-row button{border-color:#27303a;color:#edf2f5}.dark .preset-row button:hover,.dark .preset-row button.active-preset{background:#edf2f5;color:#090b0f}.dark .currency-picker select{background:#151a21;color:#edf2f5;border-color:#27303a}.dark .builder-card{border-color:#27303a;background:#10141a}.dark .builder-card select{background:#151a21;color:#edf2f5;border-color:#27303a}.dark .build-summary{border-color:#27303a;background:#10141a}.dark .summary-top{border-color:#27303a}.dark .summary-top b{color:#69f0ae}.dark .compat-status{border-color:#27303a}.dark .compat-status.ok{border-color:#69f0ae}.dark .compat-status.bad{border-color:#ff657a}@media(max-width:850px){.config-head,.builder-layout{grid-template-columns:1fr}.build-summary{position:static}.builder-parts{grid-template-columns:1fr}.configurator{padding-left:6vw;padding-right:6vw}}

.game-actions{display:flex;gap:8px;align-items:center}
.game-actions .secondary{background:transparent;color:#69f0ae;border:1px solid #27303a}
.game-actions .secondary:hover{background:#17201d;border-color:#69f0ae}

.cell.flag{font-size:16px}

/* Theme-aware hero outline */
body.dark-theme .hero h1 .outline{
  color:transparent;
  -webkit-text-stroke:1px #f4f0e8;
  text-shadow:none;
}
body:not(.dark-theme) .hero h1 .outline{
  color:transparent;
  -webkit-text-stroke:1px #111820;
  text-shadow:none;
}

/* 2048: calmer dark tiles with readable numbers */
body.dark-theme .b2048{background:#1a2027;border-color:#303944}
body.dark-theme .b2048 .tile{background:#242c34;color:#e8edf1}
body.dark-theme .b2048 .tile.v2{background:#303a44;color:#f4f7f9}
body.dark-theme .b2048 .tile.v4{background:#3a4651;color:#fff}
body.dark-theme .b2048 .tile.v8{background:#4e8f72;color:#f4fff8}
body.dark-theme .b2048 .tile.v16{background:#4d789d;color:#f5fbff}
body.dark-theme .b2048 .tile.v32{background:#a4774f;color:#fff}
body.dark-theme .b2048 .tile.v64{background:#9d4f5c;color:#fff}
body.dark-theme .b2048 .tile.v128,
body.dark-theme .b2048 .tile.v256,
body.dark-theme .b2048 .tile.v512,
body.dark-theme .b2048 .tile.v1024,
body.dark-theme .b2048 .tile.v2048{background:#6f5f99;color:#fff}

/* FINAL CONTRAST FIX */
.hero h1 .hero-outline{
  color:transparent !important;
  -webkit-text-stroke:2px #111820 !important;
  text-shadow:none !important;
}
body.dark .hero h1 .hero-outline{
  color:transparent !important;
  -webkit-text-stroke:2px #f1efe9 !important;
  text-shadow:none !important;
}

/* FINAL 2048 DARK-THEME FIX */
body.dark .b2048{
  background:#161b21 !important;
  border-color:#303944 !important;
}
body.dark .b2048 .tile{
  background:#252c34 !important;
  color:#f3f6f8 !important;
  text-shadow:none !important;
}
body.dark .b2048 .tile.v2{background:#303943 !important;color:#f7f9fa !important}
body.dark .b2048 .tile.v4{background:#3c4751 !important;color:#fff !important}
body.dark .b2048 .tile.v8{background:#4c7f68 !important;color:#fff !important}
body.dark .b2048 .tile.v16{background:#4e718f !important;color:#fff !important}
body.dark .b2048 .tile.v32{background:#8b6748 !important;color:#fff !important}
body.dark .b2048 .tile.v64{background:#8e4855 !important;color:#fff !important}
body.dark .b2048 .tile.v128,
body.dark .b2048 .tile.v256,
body.dark .b2048 .tile.v512,
body.dark .b2048 .tile.v1024,
body.dark .b2048 .tile.v2048{
  background:#625685 !important;
  color:#fff !important;
}

/* === GAME CONTROLS: always visible === */
.game-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.reset-btn{
  padding:13px 20px;border:1px solid #111;background:transparent;color:#111;
  font:11px "DM Mono",monospace;cursor:pointer;text-transform:uppercase
}
.reset-btn:hover{background:#111;color:#fff}
.mobile-game-tools{margin:12px 0;display:flex;gap:8px}
.mobile-game-tools .reset-btn{padding:9px 13px}

/* === 2048 TEXT CONTRAST === */
.board2048 .tile{color:#171a1d!important;text-shadow:none!important;font-weight:800!important}
.board2048 .tile.v2{background:#eee9df!important;color:#171a1d!important}
.board2048 .tile.v4{background:#ddd8c8!important;color:#171a1d!important}
.board2048 .tile.v8{background:#d8ff42!important;color:#111!important}
.board2048 .tile.v16{background:#ff9b6a!important;color:#111!important}
.board2048 .tile.v32{background:#ff6b6b!important;color:#111!important}
.board2048 .tile.v64{background:#111!important;color:#fff!important}
.board2048 .tile.v128,.board2048 .tile.v256,.board2048 .tile.v512,.board2048 .tile.v1024,.board2048 .tile.v2048{background:#c4a7ff!important;color:#111!important}

/* Dark theme: readable but not glowing. */
body.dark .board2048 .tile{color:#fff!important;background:#252d35!important}
body.dark .board2048 .tile.v2{background:#303943!important;color:#fff!important}
body.dark .board2048 .tile.v4{background:#3d4852!important;color:#fff!important}
body.dark .board2048 .tile.v8{background:#47735f!important;color:#fff!important}
body.dark .board2048 .tile.v16{background:#4c6f8d!important;color:#fff!important}
body.dark .board2048 .tile.v32{background:#775739!important;color:#fff!important}
body.dark .board2048 .tile.v64{background:#7e3f4b!important;color:#fff!important}
body.dark .board2048 .tile.v128,body.dark .board2048 .tile.v256,body.dark .board2048 .tile.v512,body.dark .board2048 .tile.v1024,body.dark .board2048 .tile.v2048{background:#5f517e!important;color:#fff!important}
body.dark .reset-btn{color:#69f0ae;border-color:#40505b}
body.dark .reset-btn:hover{background:#17201d;border-color:#69f0ae}

/* Touch-friendly boards. */
.board2048,.mines-board,#snakeCanvas{touch-action:none;-webkit-user-select:none;user-select:none}
@media(max-width:600px){
  .game-title{font-size:44px;gap:12px}
  .game-actions{justify-content:flex-start}
  .start-btn,.reset-btn{padding:11px 14px}
  .board2048{width:min(92vw,430px);gap:4px;padding:4px}
  .board2048 .tile{font-size:clamp(24px,7vw,34px)}
  .mines-board{width:min(92vw,430px);gap:2px}
  .mine-cell{font-size:clamp(12px,3.8vw,17px)}
  #snakeCanvas{width:min(92vw,400px);height:auto}
}