:root{
    color-scheme: light;
    --sky-top:#6ec6e6;
    --sky-bottom:#bdeaff;
    --sun:#ffd23f;
    --cloud:#fff8e7;
    --hill:#5a8f4f;
    --hill-dark:#437a3d;
    --grass:#4fbf4f;
    --grass-dark:#2f8f3d;
    --grass-darkest:#1f6b28;
    --dirt:#8a5a2a;
    --dirt-dark:#6e441f;
    --trunk:#7a4a24;
    --trunk-dark:#5a3417;
    --skin:#f0b878;
    --ink:#1a1410;
    --shirt:#d94f3d;
    --shirt-dark:#b8392a;
    --pants:#3a5a9a;
    --pants-dark:#2a4278;
    --boot:#1a1410;
    --chip:#c9974d;
    --gold:#ffd23f;
    --panel:#12161c;
    --panel-line:#f4d35e;
    --cream:#fff8e7;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;overflow-x:hidden;background:var(--panel);}
  body{
    font-family:'VT323', ui-monospace, monospace;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;}
  .pixel{
    font-family:'Press Start 2P', 'VT323', monospace;
  }
  a{color:inherit;text-decoration:none;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    background:linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-top) 55%, var(--sky-bottom) 100%);
    padding-bottom: 3.4em;
  }

  /* ---------- HERO STAGE (animated landscape) ---------- */
  .hero-scene{
    position:relative;
    font-size:clamp(6.5px, 1.5vw, 15px);
    height:19em;
    overflow:hidden;
  }
  .pixel-sun{
    position:absolute; top:1.6em; right:8%;
    width:3.4em; height:3.4em;
    background:var(--sun);
    box-shadow: 0 0 0 0.4em rgba(255,210,63,0.25);
  }
  .cloud{
    position:absolute;
    background:var(--cloud);
    box-shadow:
      1.2em -0.6em 0 0 var(--cloud),
      2.4em 0 0 0 var(--cloud),
      -1.2em 0.2em 0 0 var(--cloud);
  }
  .cloud1{ top:2em; left:6%; width:2em; height:0.9em; }
  .cloud2{ top:4.4em; left:30%; width:1.6em; height:0.7em; opacity:.9;}
  .cloud3{ top:1.2em; left:60%; width:1.8em; height:0.8em; opacity:.85;}
  .hills{
    position:absolute; left:0; right:0; bottom:3.2em; height:4.6em;
    background:var(--hill);
    clip-path: polygon(0% 100%, 0% 40%, 10% 55%, 22% 25%, 34% 50%, 48% 15%, 60% 45%, 74% 20%, 86% 48%, 100% 30%, 100% 100%);
  }
  .hills::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:2em;
    background:var(--hill-dark);
    clip-path: polygon(0% 100%, 0% 65%, 14% 80%, 26% 55%, 40% 78%, 54% 50%, 68% 75%, 82% 58%, 100% 70%, 100% 100%);
  }
  .ground{
    position:absolute; left:0; right:0; bottom:0; height:3.2em; z-index:2;
    background:var(--grass-dark);
  }
  .ground::before{
    content:""; position:absolute; left:0; right:0; top:0; height:0.6em;
    background:var(--grass);
  }
  .ground::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1.5em;
    background:var(--dirt);
    box-shadow: inset 0 0.45em 0 0 var(--dirt-dark);
  }
  .scanlines{
    position:absolute; inset:0; z-index:9; pointer-events:none;
    background:repeating-linear-gradient(to bottom, rgba(0,0,0,0.07) 0, rgba(0,0,0,0.07) 1px, transparent 1px, transparent 3px);
    mix-blend-mode:multiply;
  }
  .felled-badge{
    position:absolute; top:0.7em; left:0.7em; z-index:6;
    font-family:'Press Start 2P', monospace; font-size:0.52rem; letter-spacing:0.02em;
    color:var(--cream);
    background:rgba(18,22,28,0.72);
    border:2px solid var(--cream);
    padding:0.45em 0.6em;
  }

  /* ---------- TREE (dynamic position via JS) ---------- */
  .tree{
    position:absolute; bottom:3.2em; left:50%;
    width:0; height:0;
    transform-origin:50% 100%;
    opacity:0;
    z-index:3;
  }
  .tree.hit{ animation:treeShake 0.3s steps(2); }
  .tree.falling{ animation:treeFall 0.85s ease-in forwards; }
  .tree.growing{ animation:treeGrow 0.45s steps(6) forwards; }
  @keyframes treeShake{
    0%{ transform:rotate(0deg); }
    25%{ transform:rotate(4deg); }
    50%{ transform:rotate(-4deg); }
    75%{ transform:rotate(2deg); }
    100%{ transform:rotate(0deg); }
  }
  @keyframes treeFall{
    0%{ transform:rotate(0deg); opacity:1; }
    70%{ transform:rotate(85deg) translateX(0.4em); opacity:1; }
    100%{ transform:rotate(85deg) translateX(0.4em); opacity:0; }
  }
  @keyframes treeGrow{
    0%{ transform:scale(0.15); opacity:0; }
    100%{ transform:scale(1); opacity:1; }
  }
  .trunk{
    position:absolute; bottom:0; left:-0.8em;
    width:1.6em; height:4.6em;
    background:var(--trunk);
    box-shadow: inset -0.35em 0 0 0 var(--trunk-dark);
  }
  .stump{
    position:absolute; bottom:0; left:-0.8em;
    width:1.6em; height:0.9em;
    background:var(--trunk-dark);
  }
  .canopy{ position:absolute; left:50%; background:var(--grass); box-shadow: inset -0.3em 0 0 0 var(--grass-darkest); }
  .canopy.c1{ bottom:3.6em; width:6.4em; height:2.6em; transform:translateX(-50%); background:var(--grass-dark); }
  .canopy.c2{ bottom:5.4em; width:4.8em; height:2.4em; transform:translateX(-50%); background:var(--grass); }
  .canopy.c3{ bottom:7.1em; width:3.2em; height:2.1em; transform:translateX(-50%); background:var(--grass); }
  .canopy.c3::after{
    content:""; position:absolute; top:-1.1em; left:50%; transform:translateX(-50%);
    width:1.2em; height:1.2em; background:var(--grass);
  }

  .chip{
    position:absolute; width:0.45em; height:0.45em; background:var(--chip);
    opacity:0; z-index:5;
  }
  .chip.fly{ animation:chipFly 0.55s ease-out forwards; }
  @keyframes chipFly{
    0%{ opacity:1; transform:translate(0,0) rotate(0deg); }
    100%{ opacity:0; transform:translate(var(--chip-x), var(--chip-y)) rotate(220deg); }
  }

  /* ---------- LUMBERJACK (walks between trees) ---------- */
  .lumberjack-mover{
    position:absolute; bottom:3.2em; left:50%;
    width:5em; height:7.6em;
    transform:translateX(-50%);
    transition:left 1s linear;
    z-index:4;
  }
  .lj-facing{ position:relative; width:100%; height:100%; transform-origin:50% 100%; }
  .lj-facing.face-left{ transform:scaleX(-1); }
  .lumberjack{ position:relative; width:100%; height:100%; }
  .lumberjack.walking{ animation:bob 0.26s steps(2) infinite; }
  @keyframes bob{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-0.16em); }
    100%{ transform:translateY(0); }
  }
  .lj-head{
    position:absolute; top:0; left:1.5em; width:2em; height:1.9em;
    background:var(--skin);
    box-shadow: inset -0.4em 0 0 0 rgba(0,0,0,0.12);
  }
  .lj-hat{
    position:absolute; top:-0.7em; left:1.3em; width:2.4em; height:0.9em;
    background:var(--shirt-dark);
  }
  .lj-hat::after{
    content:""; position:absolute; bottom:-0.4em; left:0; width:100%; height:0.5em; background:var(--shirt-dark);
  }
  .lj-eye{
    position:absolute; top:0.9em; left:2.5em; width:0.35em; height:0.35em; background:var(--ink);
  }
  .lj-body{
    position:absolute; top:1.9em; left:1.1em; width:2.8em; height:2.6em;
    background:var(--shirt);
    box-shadow: inset -0.45em 0 0 0 var(--shirt-dark);
  }
  .lj-legs{
    position:absolute; top:4.5em; left:1.1em; width:2.8em; height:2.3em;
    background:var(--pants);
    box-shadow: inset -0.45em 0 0 0 var(--pants-dark);
  }
  .lj-legs::after{
    content:""; position:absolute; bottom:-0.55em; left:0; width:100%; height:0.6em; background:var(--boot);
  }
  .lj-arm{
    position:absolute; top:2.1em; left:3.7em;
    width:0.85em; height:2.3em;
    background:var(--shirt);
    transform-origin:50% 0%;
    transform:rotate(-8deg);
  }
  .lumberjack.chopping .lj-arm{
    animation:swing 1.15s ease-in-out infinite;
  }
  .lj-axe{
    position:absolute; bottom:-2.2em; left:0.05em;
    width:0.6em; height:2.3em;
    background:var(--trunk);
  }
  .lj-axe::after{
    content:""; position:absolute; top:-0.9em; left:-0.55em;
    width:1.7em; height:1em; background:#c9ced2;
    box-shadow: inset 0.3em 0 0 0 #9aa1a6;
  }
  @keyframes swing{
    0%{ transform:rotate(-8deg); }
    35%{ transform:rotate(-58deg); }
    48%{ transform:rotate(-8deg); }
    100%{ transform:rotate(-8deg); }
  }

  .lj-mouth{
    position:absolute; top:1.55em; left:2.35em; width:0.4em; height:0.12em;
    background:var(--ink);
  }
  .lumberjack.stressed .lj-mouth{
    width:0.3em; height:0.3em; border-radius:50%; top:1.4em; left:2.4em; background:var(--ink);
  }
  .lumberjack.happy .lj-mouth{
    width:0.5em; height:0.24em; background:transparent;
    border-bottom:0.12em solid var(--ink); border-radius:0 0 0.5em 0.5em;
    top:1.48em; left:2.3em;
  }

  /* panic shake + victory hop */
  .lumberjack.stressed{ animation:panicShake 0.22s linear 3; }
  @keyframes panicShake{
    0%{ transform:translateX(0); }
    25%{ transform:translateX(-0.12em); }
    75%{ transform:translateX(0.12em); }
    100%{ transform:translateX(0); }
  }
  .lumberjack.happy{ animation:happyHop 0.42s ease-in-out 2; }
  @keyframes happyHop{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-0.55em); }
  }

  /* exclamation bubble (stays upright even when character flips to face left) */
  .exclaim{
    position:absolute; top:-1.5em; left:50%;
    font-family:'Press Start 2P', monospace; font-size:0.62rem;
    color:var(--ink); background:var(--cream);
    border:2px solid var(--ink); padding:0.12em 0.4em;
    box-shadow:0.1em 0.1em 0 0 var(--ink);
    opacity:0; z-index:7;
    transform:translateX(-50%) scale(0.4) translateY(0.3em);
  }
  #mover .exclaim.pop{ animation:popExclaim 0.9s steps(3) forwards; }
  @keyframes popExclaim{
    0%{ opacity:0; transform:translateX(-50%) scale(0.3) translateY(0.3em); }
    28%{ opacity:1; transform:translateX(-50%) scale(1.2) translateY(-0.2em); }
    48%{ opacity:1; transform:translateX(-50%) scale(1) translateY(0); }
    82%{ opacity:1; transform:translateX(-50%) scale(1) translateY(0); }
    100%{ opacity:0; transform:translateX(-50%) scale(1) translateY(-0.35em); }
  }

  /* sweat drops + sparkles (reuse the chip particle layer) */
  .sweat{
    position:absolute; width:0.38em; height:0.5em;
    background:#bfe8ff;
    border-radius:0 50% 50% 50%;
    opacity:0; z-index:6;
  }
  .sweat.fly{ animation:sweatFly 0.6s ease-out forwards; }
  @keyframes sweatFly{
    0%{ opacity:1; transform:translate(0,0) rotate(20deg); }
    100%{ opacity:0; transform:translate(var(--sw-x), var(--sw-y)) rotate(20deg); }
  }
  .sparkle{
    position:absolute; width:0.34em; height:0.34em;
    background:var(--gold);
    opacity:0; z-index:6;
    box-shadow:0 0 0 0.08em rgba(255,210,63,0.35);
  }
  .sparkle.fly{ animation:sparkleFly 0.7s ease-out forwards; }
  @keyframes sparkleFly{
    0%{ opacity:1; transform:translate(0,0) scale(1); }
    100%{ opacity:0; transform:translate(var(--sp-x), var(--sp-y)) scale(0.3); }
  }

  .hero-inner{
    position:relative; z-index:2;
    max-width:900px; margin:0 auto;
    padding: 2.4em 1.4em 0;
    text-align:center;
  }
  .badge{
    display:inline-block;
    font-family:'Press Start 2P', monospace;
    font-size:0.62rem;
    letter-spacing:0.05em;
    color:var(--panel);
    background:var(--cream);
    border:3px solid var(--ink);
    padding:0.5em 0.8em;
    margin-bottom:1.1em;
    box-shadow:0.25em 0.25em 0 0 var(--ink);
  }
  .title{
    font-family:'Press Start 2P', monospace;
    font-size:clamp(1.6rem, 6vw, 3.2rem);
    line-height:1.35;
    margin:0 0 0.6em;
    color:var(--cream);
    text-shadow:
      0.09em 0.09em 0 var(--ink),
      0.18em 0.18em 0 var(--shirt-dark);
    letter-spacing:0.02em;
  }
  .tagline{
    font-family:'Press Start 2P', monospace;
    font-size:clamp(0.6rem, 1.6vw, 0.85rem);
    color:var(--ink);
    background:var(--gold);
    display:inline-block;
    padding:0.6em 1em;
    border:3px solid var(--ink);
    box-shadow:0.22em 0.22em 0 0 var(--ink);
    margin-bottom:1.8em;
  }

  .hud-row{
    display:flex; flex-wrap:wrap; justify-content:center; gap:1em;
    margin-bottom:1.8em;
  }
  .hud-box{
    display:flex; flex-direction:column; align-items:flex-start; gap:0.25em;
    background:var(--panel);
    border:3px solid var(--cream);
    box-shadow:0.25em 0.25em 0 0 var(--ink);
    padding:0.8em 1.1em;
    min-width:13em;
    transition:transform .12s steps(2);
  }
  .hud-box:hover, .hud-box:focus-visible{ transform:translate(-0.12em,-0.12em); }
  .hud-label{
    font-family:'Press Start 2P', monospace;
    font-size:0.58rem;
    color:var(--gold);
    letter-spacing:0.06em;
  }
  .hud-value{
    font-family:'VT323', monospace;
    font-size:1.35rem;
    color:var(--cream);
    word-break:break-word;
  }
  .start-btn{
    display:inline-block;
    font-family:'Press Start 2P', monospace;
    font-size:clamp(0.62rem, 1.7vw, 0.85rem);
    color:var(--ink);
    background:var(--grass);
    border:3px solid var(--ink);
    padding:0.9em 1.4em;
    box-shadow:0.28em 0.28em 0 0 var(--ink);
    animation:blinkbtn 1.6s steps(1) infinite;
  }
  .start-btn:hover, .start-btn:focus-visible{ background:var(--grass-dark); color:var(--cream); }
  @keyframes blinkbtn{ 0%,49%{opacity:1;} 50%,100%{opacity:.72;} }

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--ink);
    color:var(--cream);
    padding:2.2em 1em;
    text-align:center;
  }
  .foot-inner{ max-width:700px; margin:0 auto; display:flex; flex-direction:column; gap:0.7em; align-items:center; }
  .foot-name{ font-family:'Press Start 2P', monospace; font-size:0.7rem; color:var(--gold); letter-spacing:0.04em; }
  .foot-inner a{ font-size:1.3rem; }
  .foot-inner a:hover{ color:var(--gold); }
  .foot-note{ font-size:0.95rem; opacity:.7; margin-top:0.3em; }

  @media (max-width:640px){
    .hero-scene{ height:15em; }
  }

  @media (prefers-reduced-motion:reduce){
    .start-btn{ animation:none; }
    .lumberjack.chopping .lj-arm{ animation:none; transform:rotate(-40deg); }
    .lumberjack.walking{ animation:none; }
    .lumberjack-mover{ transition:none; }
    .tree, .chip{ animation:none !important; }
  }