:root{color-scheme:dark;--ink:#f1f3e8;--pale:#cedbce;--glow:#cee4a5;--line:rgba(241,246,229,.27);--bg:#101d17}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif}button{font-family:inherit;cursor:pointer}button:focus-visible{outline:3px solid #f2cf76;outline-offset:3px}#scene{position:relative;width:100%;height:100%;height:100dvh;min-height:260px;overflow:hidden}#webgl{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;background:#263b30}.vignette{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at 50% 38%,transparent 28%,rgba(9,22,13,.24) 75%,rgba(4,13,8,.65) 100%)}.topbar{position:absolute;z-index:8;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:calc(20px + env(safe-area-inset-top,0px)) 22px 10px;color:var(--ink);pointer-events:none}.brand{display:grid;gap:3px;text-shadow:0 2px 8px #06150c}.brand-kicker,.eyebrow{font-weight:700;font-size:10px;letter-spacing:.25em;color:var(--glow)}.brand strong{font-size:24px;letter-spacing:.07em}.brand small{font-size:12px;color:#e0e9d9}.version{font-size:9px;opacity:.7;vertical-align:middle;font-weight:500;letter-spacing:.07em}.top-actions{display:flex;gap:8px;pointer-events:auto}.top-actions button{height:37px;min-width:39px;padding:0 12px;color:#f7fbf1;border:1px solid var(--line);border-radius:100px;background:rgba(6,20,12,.47);backdrop-filter:blur(9px);font-weight:700}.progress-panel{position:absolute;top:calc(111px + env(safe-area-inset-top,0px));left:22px;z-index:8;color:#fff;font-size:11px;text-shadow:0 2px 8px #121f15}.meter{width:180px;height:4px;background:rgba(255,255,255,.3);border-radius:6px;margin-top:5px;overflow:hidden}.meter>div{height:100%;width:0;background:#b9d87c;border-radius:6px;transition:width .15s}.hint{position:absolute;z-index:3;top:24%;width:100%;text-align:center;color:#fff;font-size:15px;text-shadow:0 2px 8px #06120b;opacity:.82;pointer-events:none}.aim{position:absolute;left:50%;top:49%;color:rgba(255,255,255,.4);font-size:16px;font-weight:100;transform:translate(-50%,-50%);pointer-events:none}.bottom-shade{position:absolute;bottom:0;left:0;right:0;height:190px;pointer-events:none;background:linear-gradient(transparent,rgba(4,16,10,.47))}.desktop-tips{position:absolute;bottom:22px;left:22px;color:#e8efe3;font-size:11px;z-index:3;text-shadow:0 1px 5px black;pointer-events:none}.touch-ui{display:none}.toast{z-index:12;position:absolute;bottom:92px;left:50%;transform:translateX(-50%);border:1px solid var(--line);border-radius:12px;background:rgba(8,22,14,.83);color:#f6f9ee;padding:10px 18px;font-size:13px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s}.toast.show{opacity:1}.overlay{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(4,13,8,.45);backdrop-filter:blur(3px)}.overlay.visible{display:flex}.panel{color:#f0f3e9;text-align:left;max-width:490px;width:100%;padding:30px;border:1px solid rgba(227,244,214,.32);border-radius:18px;background:linear-gradient(135deg,rgba(14,37,24,.95),rgba(6,19,15,.94));box-shadow:0 30px 80px rgba(0,0,0,.5)}.hero{padding:41px 36px;text-align:center;background:linear-gradient(130deg,rgba(9,31,19,.94),rgba(18,39,29,.87))}.hero h1{margin:12px 0 9px;font-size:clamp(39px,7vw,65px);letter-spacing:.15em;text-shadow:0 3px 20px rgba(108,154,77,.2)}.hero p{line-height:2;font-size:16px;color:#e1e8db}.tiny-summary{font-size:12px;color:#c1d5ba;margin:24px 0}.primary,.commands button{padding:13px 24px;border:1px solid rgba(255,255,255,.33);border-radius:9px;color:#1c3121;font-weight:800;font-size:15px;background:#cde3a9}.primary:disabled{opacity:.5;cursor:not-allowed}.loadstatus{display:block;color:#b4cbb2;font-size:11px;margin-top:14px}.event-panel h2{font-size:26px;margin:12px 0}.event-panel p{line-height:1.95;color:#e1e8db;font-size:15px}.commands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}.commands button{font-size:14px;background:rgba(238,246,225,.07);color:#f3f8e8}.commands button:hover{background:rgba(215,238,186,.22);border-color:#cce2b7}.fatal{z-index:100;position:absolute;inset:0;padding:36px;background:#18271c;color:#fff;font-size:15px;white-space:pre-line}.fatal[hidden]{display:none}@media (max-width:700px),(pointer:coarse){.topbar{padding:calc(13px + env(safe-area-inset-top,0px)) 12px 10px}.brand strong{font-size:18px}.brand-kicker{font-size:9px}.brand small{font-size:10px}.top-actions button{font-size:11px;min-width:32px;padding:0 8px;height:34px}.progress-panel{top:calc(90px + env(safe-area-inset-top,0px));left:13px}.meter{width:137px}.desktop-tips{display:none}.touch-ui{position:absolute;z-index:9;display:flex;gap:11px;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);align-items:end;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}.touch-ui,.touch-ui *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;touch-action:none}.touch-ui button{color:#fff;border:2px solid rgba(255,255,255,.74);background:rgba(3,19,11,.67);backdrop-filter:blur(5px);touch-action:none;-webkit-appearance:none;appearance:none}.turn{font-size:30px;width:52px;height:58px;border-radius:16px}.advance{height:78px;min-width:106px;border-radius:20px;font-size:18px;font-weight:800}.advance span{display:block;font-size:10px;opacity:.7;font-weight:400}.run{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);border-radius:99px;padding:8px 12px;white-space:nowrap;font-size:11px}.run.active{background:rgba(118,160,66,.82)}.hint{top:22%;font-size:12px}.panel{padding:22px}.hero{padding:29px 18px}.hero p{font-size:14px}.toast{bottom:137px;max-width:90vw;white-space:normal;text-align:center}.aim{top:43%}}

/* v1.4.0 hornet encounter */
.commands.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.impact-fx{position:absolute;z-index:30;left:50%;top:47%;transform:translate(-50%,-50%) scale(.25);font-size:clamp(72px,16vw,190px);line-height:1;color:#fff3a5;text-shadow:0 0 10px #fff,0 0 28px #ffd34d,0 0 55px rgba(255,109,32,.75);opacity:0;pointer-events:none}
.impact-fx.show{animation:hornetImpact .34s ease-out}
#webgl.hornet-hit-shake{animation:hornetShake .26s linear}
@keyframes hornetImpact{0%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(-12deg)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(6deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.55) rotate(14deg)}}
@keyframes hornetShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-7px,3px)}40%{transform:translate(7px,-4px)}60%{transform:translate(-5px,-2px)}80%{transform:translate(4px,3px)}}
@media (max-width:700px),(pointer:coarse){.commands.three{grid-template-columns:1fr}.impact-fx{top:43%}}

/* v1.7.0 Iguanodon encounter */
.event-panel{position:relative}
.event-close-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(5,16,11,.62);color:#fff;font-size:25px;line-height:1;font-weight:500;z-index:3}
.event-close-x:hover{background:rgba(215,238,186,.18)}
.faint-fade{position:absolute;inset:0;z-index:19;background:#000;opacity:0;pointer-events:none;transition:opacity 1.25s ease}
.faint-fade.show{opacity:1}
#webgl.iguanodon-hit-shake{animation:iguanodonShake .48s cubic-bezier(.36,.07,.19,.97)}
@keyframes iguanodonShake{0%,100%{transform:translate(0,0)}10%{transform:translate(-10px,5px)}22%{transform:translate(9px,-6px)}36%{transform:translate(-8px,-3px)}50%{transform:translate(7px,5px)}66%{transform:translate(-5px,2px)}82%{transform:translate(4px,-3px)}}
@media (max-width:700px),(pointer:coarse){.event-close-x{top:9px;right:9px;width:36px;height:36px;font-size:23px}}

/* v1.7.3 Iguanodon ending copy */
.event-panel p{white-space:pre-line}


/* v1.8.5 seamless forest exit transition (matches the museum-gate entry effect). */
.forest-transition{position:absolute;inset:0;z-index:120;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 58%,rgba(55,108,68,.48),rgba(10,31,20,.90) 54%,#07160f 100%);opacity:0;pointer-events:none;transition:opacity .28s ease}
.forest-transition.hidden{display:none}.forest-transition.active{opacity:1}
.forest-transition-mist{position:absolute;inset:-18%;background:radial-gradient(ellipse at 50% 55%,rgba(201,231,183,.20),transparent 42%),repeating-radial-gradient(circle at 50% 55%,rgba(141,188,128,.07) 0 2%,transparent 2% 7%);filter:blur(9px);transform:scale(.8);animation:forestMistRush 1.55s ease-in forwards}
.forest-transition-ring{position:absolute;left:50%;top:54%;width:32vmin;height:32vmin;border:2px solid rgba(194,226,168,.34);border-radius:50%;transform:translate(-50%,-50%) scale(.3);opacity:0;animation:forestRingRush 1.15s ease-out infinite}
.forest-transition-ring.ring-b{animation-delay:.25s}.forest-transition-ring.ring-c{animation-delay:.50s}
.forest-transition-leaves{position:absolute;inset:0;z-index:2;pointer-events:none}.forest-transition-leaves span{position:absolute;color:rgba(198,227,152,.72);font-size:18px;opacity:0;animation:forestLeafRush 1.25s ease-in infinite}.forest-transition-leaves span:nth-child(1){left:12%;top:25%;animation-delay:.05s}.forest-transition-leaves span:nth-child(2){left:80%;top:18%;animation-delay:.22s}.forest-transition-leaves span:nth-child(3){left:25%;top:72%;animation-delay:.36s}.forest-transition-leaves span:nth-child(4){left:72%;top:68%;animation-delay:.12s}.forest-transition-leaves span:nth-child(5){left:43%;top:15%;animation-delay:.48s}.forest-transition-leaves span:nth-child(6){left:58%;top:78%;animation-delay:.63s}

/* v1.9.0: exit transition brightens as the player leaves the forest. */
.forest-transition.exit-mode{background:radial-gradient(circle at 50% 52%,rgba(244,255,211,.82) 0%,rgba(174,218,143,.58) 28%,rgba(70,126,76,.72) 58%,rgba(15,45,28,.90) 100%)}
.forest-transition.exit-mode .forest-transition-mist{background:radial-gradient(ellipse at 50% 48%,rgba(255,255,225,.68),rgba(220,244,180,.28) 28%,transparent 58%),repeating-radial-gradient(circle at 50% 52%,rgba(226,248,185,.12) 0 2%,transparent 2% 7%);filter:blur(7px) brightness(1.18)}
.forest-transition.exit-mode .forest-transition-ring{border-color:rgba(243,255,207,.62)}
.forest-transition.exit-mode .forest-transition-leaves span{color:rgba(225,245,171,.64)}
.forest-transition.exit-mode .forest-loading-copy{color:#fffde9;text-shadow:0 3px 18px rgba(18,54,20,.72)}
.forest-transition.exit-mode .forest-loading-copy p{color:rgba(255,255,235,.94)}

@keyframes forestRingRush{0%{transform:translate(-50%,-50%) scale(.22);opacity:0}22%{opacity:.75}100%{transform:translate(-50%,-50%) scale(4.2);opacity:0}}
@keyframes forestMistRush{0%{transform:scale(.72);opacity:.35}100%{transform:scale(1.65);opacity:1}}
@keyframes forestLeafRush{0%{transform:translate(0,0) scale(.3) rotate(0deg);opacity:0}22%{opacity:.8}100%{transform:translate(calc((50vw - 100%) * .35),calc((50vh - 100%) * .35)) scale(2.4) rotate(220deg);opacity:0}}

.forest-loading-copy{position:relative;z-index:4;text-align:center;color:#f3ffe8;text-shadow:0 3px 18px #031a0e;padding:22px 18px;max-width:min(88vw,620px);opacity:0;transform:translateY(10px);animation:forestLoadingCopyIn .72s .22s ease-out forwards}
.forest-loading-copy h2{margin:0 0 10px;font-size:clamp(20px,5.2vw,34px);line-height:1.35;letter-spacing:.04em}
.forest-loading-copy p{margin:0;font-size:clamp(13px,3.5vw,17px);font-weight:700;line-height:1.75;letter-spacing:.03em;color:rgba(239,255,227,.88)}
@keyframes forestLoadingCopyIn{to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.forest-loading-copy{padding:18px 22px}.forest-loading-copy h2{font-size:22px}.forest-loading-copy p{font-size:14px;max-width:19em;margin-inline:auto}}

@media (prefers-reduced-motion:reduce){.forest-transition-mist,.forest-transition-ring,.forest-transition-leaves span,.forest-loading-copy{animation:none!important}.forest-transition.active,.forest-loading-copy{opacity:1}.forest-loading-copy{transform:none}}

/* v1.8.7: stronger mobile long-press / haptic suppression around movement controls */
@media (max-width:700px),(pointer:coarse){
 .touch-ui,.touch-ui *{
  -webkit-touch-callout:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  touch-action:none!important;
  -webkit-tap-highlight-color:transparent!important;
  overscroll-behavior:none!important;
 }
 .touch-ui button{
  -webkit-appearance:none!important;
  appearance:none!important;
  outline:none;
 }
}


/* v1.12.1 White T. rex bite emphasis */
#webgl.white-rex-bite-shake{animation:whiteRexBiteShake .72s cubic-bezier(.22,.7,.24,1)}
.impact-fx.white-rex-impact{font-size:clamp(105px,22vw,250px);color:#fff1d3;text-shadow:0 0 12px #fff,0 0 34px #ffcf6b,0 0 70px rgba(255,69,30,.92)}
@keyframes whiteRexBiteShake{
 0%,100%{transform:translate(0,0) rotate(0deg)}
 8%{transform:translate(-14px,7px) rotate(-.45deg)}
 18%{transform:translate(13px,-9px) rotate(.5deg)}
 30%{transform:translate(-11px,-5px) rotate(-.35deg)}
 43%{transform:translate(10px,8px) rotate(.35deg)}
 57%{transform:translate(-8px,3px) rotate(-.25deg)}
 70%{transform:translate(7px,-5px) rotate(.2deg)}
 84%{transform:translate(-4px,2px) rotate(-.12deg)}
}
@media(max-width:700px),(pointer:coarse){#webgl.white-rex-bite-shake{animation-duration:.62s}.impact-fx.white-rex-impact{font-size:clamp(92px,27vw,190px)}}