/* Acorn Swap — pixel-art cozy match-3, warm autumn forest */
@font-face{font-family:"Pixelify";src:url("fonts/pixelify.woff") format("woff");font-weight:400 700;font-display:swap}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#2f5a37;--deep:#1d3a24;--panel:#fff3dc;--ink:#3a2416;--muted:#7a5a40;
  --orange:#e8742c;--orange-d:#a8481a;--gold:#f3c234;--gold-d:#b8861a;--leaf:#5bbf3c;--leaf-d:#2e7f34;
  --red:#d8343a;--cream:#fffaf0;
  --font:"Pixelify",ui-monospace,"Courier New",monospace;
  --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
}
html,body{height:100%;overflow:hidden;background:var(--deep);color:var(--ink);font-family:var(--font);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;font-variant-ligatures:none;font-feature-settings:'liga' 0;user-select:none;-webkit-user-select:none}
#app{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden}
#game{display:block;width:100%;height:100%;touch-action:none;image-rendering:pixelated;image-rendering:crisp-edges}
button{font-family:inherit}
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:calc(14px + var(--safe-top)) 12px calc(14px + var(--safe-bottom));
  background:rgba(29,58,36,.55);opacity:0;pointer-events:none;transition:opacity .2s steps(4);z-index:10;overflow-y:auto}
.screen.active{opacity:1;pointer-events:auto}
.panel{width:min(380px,100%);margin:auto;padding:18px 16px 14px;text-align:center;background:var(--panel);
  border:4px solid var(--ink);
  box-shadow:0 0 0 4px #c98a48,0 0 0 8px var(--ink),8px 10px 0 8px rgba(0,0,0,.25);
  image-rendering:pixelated}
.panel.small{width:min(300px,100%)}
.panel.wide{width:min(440px,100%)}
.lang-picker{display:flex;gap:6px;justify-content:center;margin-bottom:10px}
.lang-btn{min-width:46px;min-height:34px;border:3px solid var(--ink);background:var(--cream);color:var(--muted);
  font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.lang-btn.active{background:var(--leaf);color:#fff;text-shadow:1px 1px 0 var(--leaf-d)}
.badge{font-size:13px;letter-spacing:.14em;color:var(--orange-d);font-weight:700;margin-bottom:2px}
h1{font-size:44px;line-height:1;color:var(--orange);letter-spacing:.02em;margin:2px 0 6px;
  text-shadow:3px 3px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink),0 6px 0 rgba(58,36,22,.25)}
h2{font-size:28px;color:var(--orange);text-shadow:2px 2px 0 var(--ink);margin-bottom:8px}
.tagline{color:var(--muted);font-size:16px;margin-bottom:4px}
.ver{display:inline-block;font-size:12px;color:var(--leaf-d);border:2px solid var(--leaf-d);padding:0 6px;margin-bottom:8px}
.howto{text-align:left;margin:0 auto 8px;padding-left:20px;color:var(--ink);font-size:14px;line-height:1.35;max-width:320px}
.howto li{margin-bottom:3px}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin-top:8px;
  border:3px solid var(--ink);font-weight:700;font-size:19px;cursor:pointer;text-decoration:none;color:var(--ink);
  box-shadow:0 4px 0 var(--ink);background:var(--cream);position:relative;top:0}
.btn:active{top:3px;box-shadow:0 1px 0 var(--ink)}
.btn:focus-visible,.lang-btn:focus-visible,.lvl:focus-visible,.icon-btn:focus-visible{outline:3px dashed var(--gold);outline-offset:2px}
.btn-play{background:var(--orange);color:#fff;text-shadow:2px 2px 0 var(--orange-d);font-size:22px}
.btn-alt{background:var(--leaf);color:#fff;text-shadow:2px 2px 0 var(--leaf-d)}
.btn-ghost{background:var(--cream);color:var(--muted);font-size:16px;min-height:40px}
.btn-tip{background:#ffe9b8;color:var(--orange-d);font-size:15px;min-height:38px}
.hint{margin-top:8px;color:var(--muted);font-size:14px}
.studio{margin-top:6px;font-size:12px;letter-spacing:.16em;color:#a8805a;text-transform:uppercase}
.result{font-size:34px;margin:2px 0;color:var(--orange);text-shadow:2px 2px 0 var(--ink)}
.result-sub{color:var(--muted);margin:2px 0;font-size:16px}
.stars-big{font-size:46px;letter-spacing:6px;color:var(--gold);text-shadow:3px 3px 0 var(--ink);line-height:1.1}
.stars-big .off{color:#d9c8a8;text-shadow:3px 3px 0 rgba(58,36,22,.35)}
.stars-big span{display:inline-block;animation:starpop .45s steps(5) both}
.stars-big span:nth-child(2){animation-delay:.25s}.stars-big span:nth-child(3){animation-delay:.5s}
@keyframes starpop{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.35)}100%{transform:scale(1)}}
.new-record{color:var(--leaf-d);font-weight:700;font-size:18px;margin:4px 0}
.hidden{display:none!important}
/* HUD */
.hud{position:absolute;top:0;left:0;right:0;padding:calc(6px + var(--safe-top)) 8px 0;z-index:5;pointer-events:none}
.hud-row{display:flex;justify-content:center;align-items:stretch;gap:6px;max-width:560px;margin:0 auto}
.hud-block{background:var(--panel);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);padding:2px 8px;min-width:58px;text-align:center}
.hud-block.score{flex:1;max-width:190px}
.hud-label{display:block;font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.hud-block>span:not(.hud-label){font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);font-size:21px;line-height:1.05}
.hud-block.moves>span:not(.hud-label){color:var(--orange-d);font-size:24px}
.hud-block.moves.low{background:#ffd9c2;animation:lowpulse .6s steps(2) infinite}
@keyframes lowpulse{50%{transform:translateY(-2px)}}
.starbar{position:relative;height:9px;margin:2px 0 3px;background:#d9c8a8;border:2px solid var(--ink)}
.starbar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold);transition:width .25s steps(6)}
.starbar b{position:absolute;top:-9px;font-size:13px;color:#b8a888;transform:translateX(-50%);text-shadow:1px 1px 0 var(--ink)}
.starbar b.on{color:var(--gold)}
#mark3{left:calc(100% - 4px)}
.icon-btn{pointer-events:auto;min-width:42px;min-height:42px;border:3px solid var(--ink);background:var(--cream);color:var(--ink);
  font-size:20px;font-weight:700;cursor:pointer;box-shadow:0 3px 0 var(--ink);position:relative;top:0}
.icon-btn:active{top:2px;box-shadow:0 1px 0 var(--ink)}
.icon-btn.off{color:#b8a888;text-decoration:line-through}
.goals{display:flex;justify-content:center;gap:8px;margin:7px auto 0;flex-wrap:wrap}
.goal{display:flex;align-items:center;gap:4px;background:rgba(255,243,220,.95);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);padding:2px 8px 2px 4px;min-width:66px}
.goal canvas{width:30px;height:30px;image-rendering:pixelated}
.goal span{font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.goal.done{background:#d8f5c8}.goal.done span{color:var(--leaf-d)}
.goal.bump{animation:bump .25s steps(3)}
@keyframes bump{50%{transform:scale(1.18)}}
.goals.static{margin:8px auto}
.coach{position:absolute;left:50%;bottom:calc(10px + var(--safe-bottom));transform:translateX(-50%);z-index:6;width:min(460px,calc(100% - 20px));
  background:var(--panel);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);padding:6px 10px;font-size:15px;text-align:center;color:var(--ink);pointer-events:none}
/* Levels */
.level-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:6px 0 4px}
.lvl{aspect-ratio:1;border:3px solid var(--ink);background:var(--cream);box-shadow:0 3px 0 var(--ink);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--ink);padding:0;position:relative;top:0}
.lvl:active{top:2px;box-shadow:0 1px 0 var(--ink)}
.lvl small{font-size:10px;letter-spacing:0;color:var(--gold-d);line-height:1}
.lvl.cur{background:var(--orange);color:#fff;text-shadow:1px 1px 0 var(--orange-d)}
.lvl.cur small{color:#fff3b0}
.lvl.done{background:#e3f5d4}
.lvl.locked{background:#d9c8a8;color:#a8906c;cursor:not-allowed;box-shadow:0 3px 0 #8a7050;border-color:#8a7050}
@media (max-height:620px){.howto{display:none}h1{font-size:36px}}
@media (prefers-reduced-motion:reduce){.stars-big span,.goal.bump,.hud-block.moves.low{animation:none}}