:root{
  --ink:#13251d;--cream:#f2efdf;--paper:#e8e3ce;--leaf:#194b35;--lime:#d9ff55;
  --orange:#ff6b3d;--yellow:#ffc83d;--line:rgba(19,37,29,.2);--shadow:#0d1b15;
}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;min-height:100%;background:var(--cream);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
button,a{font:inherit}button{cursor:pointer}button:focus-visible,canvas:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.app{width:min(1500px,100%);min-height:100svh;margin:auto;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));display:grid;grid-template-rows:auto 1fr auto;gap:12px}
.topbar{height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:950;font-size:13px;line-height:.92;letter-spacing:-.03em}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--lime);font-size:23px}
.status-pill{justify-self:center;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:99px;padding:9px 14px;font-weight:900;font-size:11px;letter-spacing:.12em;background:rgba(255,255,255,.35)}.status-pill i{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(255,107,61,.13)}
.wallet-button{justify-self:end;min-width:126px;height:44px;border:0;border-radius:5px;background:var(--yellow);color:var(--ink);display:grid;grid-template-columns:auto auto;grid-template-rows:1fr 1fr;align-items:center;column-gap:6px;padding:6px 13px;box-shadow:3px 3px 0 var(--ink);transition:.15s transform}.wallet-button:hover{transform:translate(-1px,-1px)}.wallet-button .coin-icon{grid-row:1/3;font-size:22px;color:#c67b00;text-shadow:1px 1px 0 #fff3a2}.wallet-button strong{align-self:end;text-align:left;font-size:17px;line-height:1}.wallet-button small{align-self:start;font-size:8px;font-weight:900;letter-spacing:.12em;text-align:left}
.game-card{min-height:0;display:grid;grid-template-rows:minmax(430px,1fr) auto;border:1px solid var(--ink);background:var(--ink);box-shadow:6px 6px 0 rgba(19,37,29,.16)}
.game-stage{position:relative;min-height:430px;max-height:calc(100svh - 174px);overflow:hidden;background:#8ec8a4;isolation:isolate;touch-action:none;user-select:none}
canvas{display:block;width:100%;height:100%;min-height:430px;touch-action:none}
.grain{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.hud{position:absolute;z-index:5;left:16px;top:16px;display:flex;gap:8px;pointer-events:none}.hud-item{min-width:86px;padding:9px 12px 8px;border:1px solid rgba(255,255,255,.55);background:rgba(12,38,29,.78);color:white;backdrop-filter:blur(8px);box-shadow:0 3px 0 rgba(0,0,0,.18)}.hud-item span{display:block;color:var(--lime);font-size:8px;font-weight:900;letter-spacing:.16em}.hud-item strong{display:block;margin-top:2px;font-size:20px;line-height:1}.hud-item strong em{font-style:normal}.coin-dot{color:var(--yellow);font-size:.8em}
.restart-always{position:absolute;z-index:7;right:16px;top:16px;min-width:48px;min-height:48px;border:1px solid rgba(255,255,255,.55);border-radius:0;background:rgba(12,38,29,.78);color:white;font-size:16px;font-weight:900;letter-spacing:.08em;backdrop-filter:blur(8px)}.restart-always span{font-size:9px;margin-left:4px}.restart-always:hover{background:var(--orange)}
.feedback{position:absolute;z-index:6;left:50%;top:23%;transform:translate(-50%,-50%);color:white;font-weight:950;font-size:clamp(18px,3vw,34px);text-shadow:0 3px 0 var(--shadow);opacity:0;pointer-events:none;white-space:nowrap}.feedback.pop{animation:pop .75s ease}@keyframes pop{0%{opacity:0;transform:translate(-50%,-20%) scale(.8)}20%,65%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-75%) scale(1.08)}}
.overlay{position:absolute;z-index:10;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(28px,6vw,80px);background:linear-gradient(90deg,rgba(12,35,27,.94) 0%,rgba(12,35,27,.86) 42%,rgba(12,35,27,.15) 100%);color:white}.overlay[hidden]{display:none}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--lime);font-size:10px;font-weight:950;letter-spacing:.18em}.eyebrow:before{content:"";width:28px;height:3px;background:var(--orange)}.overlay h1,.overlay h2{margin:10px 0 12px;font-size:clamp(43px,8vw,96px);line-height:.83;letter-spacing:-.075em;text-transform:uppercase}.overlay h1 span,.overlay h2 span{color:var(--orange)}.overlay p{margin:0 0 25px;font-size:clamp(13px,1.8vw,18px);font-weight:650;line-height:1.45;color:rgba(255,255,255,.82)}
.primary,.secondary{min-height:50px;border:0;padding:0 20px;font-weight:950;text-transform:uppercase;letter-spacing:.06em}.primary{background:var(--lime);color:var(--ink);box-shadow:4px 4px 0 var(--orange)}.primary span{margin-left:18px}.primary:hover{background:white}.secondary{background:transparent;color:white;text-decoration:underline;text-underline-offset:5px}.light{color:var(--ink)}
.help-overlay{background:rgba(12,35,27,.96)}.help-overlay h2{font-size:clamp(38px,6vw,72px)}.help-grid{width:min(720px,100%);display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:5px 0 22px}.help-grid div{min-height:60px;border:1px solid rgba(255,255,255,.19);display:flex;align-items:center;gap:13px;padding:10px 12px;background:rgba(255,255,255,.05)}.help-grid b{min-width:74px;color:var(--lime);font-size:13px}.help-grid span{font-size:12px;color:rgba(255,255,255,.8)}
.end-overlay{background:linear-gradient(90deg,rgba(16,41,31,.97),rgba(16,41,31,.83))}.end-overlay h2{font-size:clamp(42px,7vw,84px)}.result-number{display:flex;align-items:flex-end;gap:12px;margin-bottom:8px}.result-number strong{font-size:clamp(52px,8vw,92px);line-height:.8;color:var(--yellow)}.result-number span{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.end-actions{display:flex;align-items:center;gap:8px}
.controls-info{min-height:58px;background:var(--ink);color:white;display:flex;align-items:center;gap:22px;padding:9px 16px}.controls-info>div{display:flex;align-items:center;gap:5px}.controls-info .key{display:grid;place-items:center;min-width:28px;height:28px;border:1px solid rgba(255,255,255,.4);font-size:11px;font-weight:950}.controls-info b{margin-left:4px;color:var(--lime);font-size:9px;letter-spacing:.1em}.controls-info p{margin-left:auto;font-size:10px;color:rgba(255,255,255,.6);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.footer-note{display:flex;justify-content:space-between;font-size:9px;font-weight:900;letter-spacing:.15em;color:rgba(19,37,29,.65)}
.modal-backdrop{position:fixed;z-index:50;inset:0;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:rgba(8,22,16,.82);display:grid;place-items:center;backdrop-filter:blur(10px)}.modal-backdrop[hidden]{display:none}.shop-panel{width:min(900px,100%);max-height:calc(100svh - 24px);overflow:auto;background:var(--cream);border:1px solid var(--ink);box-shadow:8px 8px 0 var(--orange);padding:clamp(18px,3vw,34px)}.shop-head{display:flex;justify-content:space-between;align-items:flex-start}.shop-head .eyebrow{color:var(--leaf)}.shop-head h2{margin:5px 0 12px;font-size:clamp(34px,5vw,60px);line-height:.9;letter-spacing:-.065em;text-transform:uppercase}.shop-head h2 span{color:var(--orange)}.close{width:48px;height:48px;border:1px solid var(--ink);background:transparent;font-size:30px}.shop-balance{display:flex;justify-content:space-between;padding:11px 13px;background:var(--ink);color:white;font-size:10px;font-weight:900;letter-spacing:.13em}.shop-balance strong{font-size:16px}.shop-panel h3{margin:19px 0 8px;font-size:10px;letter-spacing:.18em}.shop-grid{display:grid;gap:8px}.character-grid{grid-template-columns:repeat(2,1fr)}.location-grid{grid-template-columns:repeat(3,1fr)}.shop-card{position:relative;min-height:120px;border:1px solid var(--line);background:#fffaf0;color:var(--ink);padding:15px;text-align:left;display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto 1fr;column-gap:13px;transition:.15s}.shop-card:hover{border-color:var(--orange);transform:translateY(-2px)}.shop-card.selected{border:2px solid var(--leaf);box-shadow:inset 0 0 0 3px var(--lime)}.shop-card.locked{filter:saturate(.7)}.shop-card .card-art,.shop-card .scene-icon{grid-row:1/4;width:62px;height:78px;display:grid;place-items:center;background:var(--leaf);color:#8f6747;font-size:42px;border-radius:45% 45% 40% 40%}.shop-card .panda-art{color:white;text-shadow:-8px -8px 0 #17251f,8px -8px 0 #17251f}.shop-card .scene-icon{border-radius:2px;color:var(--lime);font-size:38px}.scene-bamboo .scene-icon{background:#296a39}.scene-desert .scene-icon{background:#d98936;color:#fff3c3}.shop-card b{font-size:16px}.shop-card small{font-size:10px;color:#5e6b64}.shop-card em{align-self:end;font-style:normal;font-size:9px;font-weight:950;letter-spacing:.11em;color:var(--orange)}.shop-note{margin:14px 0 0;font-size:10px;color:#64736b}
@media (max-width:720px){
  .app{height:100svh;min-height:0;padding:0;gap:0;overflow:hidden;grid-template-rows:58px minmax(0,1fr) 0}.topbar{height:58px;padding:7px 10px;background:var(--cream)}.brand{font-size:10px}.brand-mark{width:34px;height:34px}.status-pill{display:none}.wallet-button{min-width:104px;height:40px}.game-card{min-height:0;border-left:0;border-right:0;box-shadow:none;grid-template-rows:minmax(0,1fr) 54px}.game-stage{height:auto;min-height:0;max-height:none}canvas{min-height:100%}.hud{left:8px;top:8px;gap:4px}.hud-item{min-width:69px;padding:7px 8px}.hud-item span{font-size:7px}.hud-item strong{font-size:16px}.restart-always{right:8px;top:8px;min-width:44px;min-height:44px;padding:0 10px}.restart-always span{display:none}.overlay{padding:28px 22px;background:linear-gradient(0deg,rgba(12,35,27,.96),rgba(12,35,27,.68))}.overlay h1,.overlay h2{font-size:clamp(42px,15vw,68px)}.overlay p br{display:none}.help-grid{grid-template-columns:1fr;gap:5px;max-height:55vh;overflow:auto}.help-grid div{min-height:46px}.controls-info{min-height:54px;padding:7px 8px;gap:7px;justify-content:center}.controls-info>div{gap:3px}.controls-info .key{min-width:26px;height:26px}.controls-info b{font-size:7px}.controls-info p{display:none}.footer-note{display:none}.shop-panel{padding:17px}.location-grid{grid-template-columns:1fr}.shop-card{min-height:96px}.shop-card .card-art,.shop-card .scene-icon{height:64px}.modal-backdrop{padding:8px}.shop-panel{max-height:calc(100svh - 16px)}
}
@media (max-height:620px) and (orientation:landscape){
  .topbar{display:none}.app{padding:0}.game-stage{height:calc(100svh - 42px);min-height:300px}.game-card{grid-template-rows:1fr 42px}.overlay{padding:18px 36px}.overlay h1,.overlay h2{font-size:48px;margin:7px 0}.overlay p{margin-bottom:13px}.help-grid{grid-template-columns:repeat(3,1fr);max-height:none}.help-grid div{min-height:43px}.footer-note{display:none}.hud-item{padding:6px 8px}.controls-info{min-height:42px}.shop-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.shop-head,.shop-balance,.shop-note{grid-column:1/3}.shop-panel h3{margin:10px 0 5px}.location-grid{grid-template-columns:1fr}.shop-card{min-height:74px;padding:8px}.shop-card .card-art,.shop-card .scene-icon{height:56px;width:52px}.shop-head h2{font-size:34px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.feedback.pop{animation:none;opacity:1}}