:root{--ink:#071b2c;--paper:#fff8df;--cedar:#174c3b;--amber:#d88a35;--cyan:#65d7df;--gold:#ffd34a;--coral:#e35b43}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:#e7eee9;color:var(--ink)}
.game-shell{width:min(1040px,calc(100% - 28px));margin:auto;padding:18px 0 64px}.hero-stage{position:relative;overflow:hidden;background:var(--cedar)}.hero-stage>img{display:block;width:100%;aspect-ratio:1200/630;object-fit:cover}
.hero-stage:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 56%,#071b2cb8)}.hero-tag{position:absolute;z-index:2;left:16px;bottom:14px;padding:7px 11px;border:2px solid var(--ink);border-radius:8px;background:var(--gold);font-weight:950}.intro-copy{max-width:780px;margin:22px auto}
.eyebrow,.dek{font-weight:900;letter-spacing:.04em}.intro h1{font-size:clamp(46px,8vw,82px);line-height:.9;margin:.18em 0;letter-spacing:-.045em}.dek{font-size:clamp(17px,2.4vw,23px)}
.news-brief,.rule-card{margin:18px 0;padding:16px;border:3px solid var(--ink);border-radius:14px;background:#fff}.rule-card{box-shadow:7px 7px 0 var(--cedar)}.rule-card strong{display:block;font-size:1.18rem}.rule-card ol{padding-left:1.35rem;font-weight:800}.rule-card small{display:block;margin-top:12px;color:#4b5b5d}
button,.share{min-height:54px;border:3px solid var(--ink);border-radius:12px;background:var(--gold);color:var(--ink);font:inherit;font-weight:950;padding:10px 18px;cursor:pointer}
.hud{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:10px}.hud>div{padding:7px;border:2px solid var(--ink);border-radius:9px;background:#fff;text-align:center}.hud span{display:block;font-size:11px;font-weight:850}.hud b{font-size:20px}
.factory{position:relative;overflow:hidden;min-height:590px;border:4px solid var(--ink);border-radius:22px;background-image:linear-gradient(#071b2c4d,#071b2c80),url('/games/2026-07-24-can-the-forest/art/nikko-press-v3.webp');background-position:center;background-size:cover;box-shadow:8px 8px 0 var(--ink);isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.factory:after{content:"";position:absolute;left:0;right:0;top:49%;height:132px;background:linear-gradient(90deg,#4f5f62,#8b9b9c 50%,#4f5f62);border-block:7px solid var(--ink);opacity:.88;z-index:0}
.press-zone{position:absolute;left:48%;top:19%;bottom:14%;width:32%;border:9px solid var(--gold);border-radius:48% 48% 22px 22px;background:#ffd34a18;box-shadow:0 0 0 7px #fff8dfb8,inset 0 0 38px #ffd34a66;z-index:2;pointer-events:none}.press-zone:before{content:"STORY PRESS";position:absolute;left:50%;top:8px;transform:translateX(-50%);white-space:nowrap;padding:5px 9px;background:var(--gold);border:2px solid var(--ink);border-radius:6px;font-weight:950;font-size:11px}
.can-machine{position:absolute;right:7%;bottom:5%;z-index:5;width:22%;min-width:145px;text-align:center;pointer-events:none}.can-top{height:36px;border:5px solid var(--ink);border-radius:18px 18px 5px 5px;background:#b8c3c2;box-shadow:5px 5px 0 #071b2c55}
#can-body{position:relative;width:70%;height:220px;margin:-3px auto 0;border:6px solid var(--ink);border-radius:9px 9px 29px 29px;background:linear-gradient(90deg,#9da9aa,#fff7d6 48%,#8d999a);overflow:hidden;transition:transform .18s,filter .18s}
#can-body:before{content:"NIKKO";position:absolute;left:50%;top:12px;transform:translateX(-50%) rotate(-90deg);transform-origin:center;font-size:31px;font-weight:1000;letter-spacing:.08em;color:#174c3b88}
#can-body[data-state="filled"]{filter:saturate(1.15)}#can-body[data-state="burst"]{transform:rotate(8deg) scale(1.08);background:var(--coral)}
#label-stickers{position:absolute;inset:38px 6px 16px;display:grid;grid-template-columns:repeat(2,1fr);align-content:end;gap:2px;padding:5px}#label-stickers img{width:100%;height:46px;object-fit:contain;filter:drop-shadow(2px 2px 0 #fff)}
#story-lanes{position:absolute;inset:0;z-index:4}.story-item{--x:-15%;--lane:0;position:absolute;left:var(--x);top:calc(31% + var(--lane)*27%);display:grid;place-items:center;width:142px;height:118px;padding:4px;transform:translate(-50%,-50%);border:0;background:transparent;filter:drop-shadow(5px 6px 0 #071b2c);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .18s,opacity .18s}
.story-item:before{content:"";position:absolute;inset:4px;border:4px solid var(--ink);border-radius:50%;background:var(--paper);z-index:-1}.story-item img{width:94px;height:76px;object-fit:contain}.story-item span{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:max-content;max-width:150px;padding:4px 7px;border:2px solid var(--ink);border-radius:6px;background:#fff;font-size:10px;line-height:1;font-weight:950}
.story-item.large{width:154px;height:126px}.story-item.small{width:128px;height:108px}.story-item.hype:before{border-style:dashed;background:#ffc6ba}.story-item.hype span{background:var(--coral);color:#fff}
.story-item[data-zone="true"]{transform:translate(-50%,-50%) scale(1.12);filter:drop-shadow(0 0 13px var(--gold)) drop-shadow(5px 6px 0 #071b2c)}.story-item[data-zone="true"]:before{box-shadow:0 0 0 7px var(--gold)}
.story-item.packed{transform:translate(82%,-10%) scale(.15);opacity:0}.story-item.rejected{transform:translate(-50%,-50%) rotate(18deg) scale(.2);opacity:0}.story-item.burst{animation:shake .25s linear 2}
@keyframes shake{50%{transform:translate(-45%,-50%) rotate(7deg)}}
.pressure{position:absolute;left:13px;right:13px;top:12px;z-index:8;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:8px 10px;background:#fffdf2eb;border:3px solid var(--ink);border-radius:10px;font-size:11px;font-weight:950}.pressure-track{height:17px;overflow:hidden;border:2px solid var(--ink);border-radius:5px;background:#e6ece9}.pressure-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--gold),var(--coral));transition:width .1s}
.feedback{position:absolute;left:50%;bottom:11px;z-index:9;width:max-content;max-width:calc(100% - 30px);margin:0;padding:8px 12px;transform:translateX(-50%);border:3px solid var(--ink);border-radius:9px;background:#fff;font-weight:950;text-align:center}.feedback.packed{background:#c8f3dc}.feedback.hype,.feedback.burst,.feedback.miss{background:#ffd1c8}
.result{display:grid;grid-template-columns:minmax(260px,.9fr) 1.1fr;gap:24px;align-items:center;padding:24px;border:3px solid var(--ink);border-radius:18px;background:#fff}.result-illustration{width:100%;border:4px solid var(--ink);border-radius:16px}.score-line strong{font-size:72px}.actions{display:flex;flex-wrap:wrap;gap:10px}.share{display:inline-flex;align-items:center;text-decoration:none}.news-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px}.play,.actions{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.play button,.actions button,.actions a{touch-action:manipulation}
@media(max-width:640px){.game-shell{width:min(100% - 14px,1040px)}.hud{grid-template-columns:repeat(3,1fr)}.hud>div:nth-child(4),.hud>div:nth-child(5){grid-column:span 1}.factory{min-height:600px;background-position:52% center}.press-zone{left:43%;width:38%}.can-machine{right:0;width:29%;min-width:126px}#can-body{height:185px}.story-item{width:116px;height:100px}.story-item.large{width:126px;height:108px}.story-item img{width:78px;height:64px}.story-item span{max-width:125px;font-size:9px}.result{grid-template-columns:1fr;padding:15px}.result-illustration{max-height:310px;object-fit:cover}.actions>*{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}