:root {
  --ink: #f7fff9;
  --deep: #102e22;
  --deep-2: #173c2b;
  --leaf: #5dbb65;
  --leaf-light: #9bdc75;
  --sand: #f2dd9b;
  --amber: #f3b63b;
  --glass: rgba(12, 39, 29, 0.84);
  --glass-soft: rgba(15, 45, 34, 0.68);
  --line: rgba(255,255,255,.18);
  --shadow: 0 18px 50px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #b9dcf2; color: var(--ink); }
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif; touch-action: none; }
button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(255, 231, 128, .95); outline-offset: 3px; }
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#world.dragging { cursor: grabbing; }
.hidden { display: none !important; }

.screen-card {
  position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(680px, calc(100vw - 32px));
  border: 1px solid var(--line); border-radius: 26px; padding: 30px;
  background: linear-gradient(145deg, rgba(14,49,35,.95), rgba(9,29,22,.93));
  box-shadow: var(--shadow); backdrop-filter: blur(12px);
}
.loading-card { text-align: center; width: min(520px, calc(100vw - 32px)); }
.logo-mark { font-size: 48px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.2)); }
.eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #c9f2ba; }
h1 { margin: 0; font-size: clamp(28px, 5.4vw, 46px); line-height: 1.14; letter-spacing: -.02em; }
.lead { margin: 16px 0 18px; font-size: clamp(15px, 2.5vw, 18px); line-height: 1.8; color: rgba(255,255,255,.92); }
.fine, .notice { margin: 14px 0 0; font-size: 12px; line-height: 1.65; color: rgba(255,255,255,.64); }
.pill { display: inline-block; padding: 4px 8px; margin-right: 8px; border-radius: 999px; background: #d7ef70; color: #17351f; letter-spacing: .08em; }
.loader { width: 100%; height: 8px; border-radius: 999px; overflow: hidden; margin: 22px 0 0; background: rgba(255,255,255,.12); }
.loader span { display: block; width: 36%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8ed463, #e8dd67); animation: loading 1.1s ease-in-out infinite alternate; }
@keyframes loading { from { transform: translateX(-20%); } to { transform: translateX(220%); } }

.controls-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin: 18px 0; }
.controls-grid div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 13px; background: rgba(255,255,255,.07); font-size: 12px; }
kbd { color: #152b1e; background: #eff7d0; border-radius: 7px; padding: 5px 8px; font-weight: 900; box-shadow: inset 0 -2px rgba(0,0,0,.12); white-space: nowrap; }
.primary, .secondary { min-height: 48px; border: 0; border-radius: 14px; padding: 12px 20px; font-weight: 900; cursor: pointer; transition: transform .15s ease, filter .15s ease; }
.primary { width: 100%; color: #17331f; background: linear-gradient(135deg, #dff16d, #8ed368); box-shadow: 0 9px 24px rgba(80,150,70,.25); }
.secondary { color: #fff; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.18); }
.primary:hover, .secondary:hover { filter: brightness(1.05); transform: translateY(-1px); }

.hud { position: fixed; z-index: 12; inset: max(14px, env(safe-area-inset-top)) 16px auto 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; pointer-events: none; }
.brand-card, .counter-card { border: 1px solid rgba(255,255,255,.24); background: var(--glass); backdrop-filter: blur(10px); box-shadow: 0 8px 25px rgba(0,0,0,.16); }
.brand-card { display: flex; align-items: center; gap: 10px; min-width: 245px; padding: 10px 13px; border-radius: 16px; }
.brand-icon { font-size: 24px; }
.brand-card b { display: block; font-size: 13px; line-height: 1.25; }
.brand-card small { display: block; margin-top: 3px; color: #d0ecad; letter-spacing: .12em; font-size: 9px; }
.counter-card { padding: 12px 15px; border-radius: 999px; font-size: 13px; white-space: nowrap; }
.counter-card b { color: #ffe680; }


.prompt { position: fixed; z-index: 15; left: 50%; bottom: max(82px, calc(env(safe-area-inset-bottom) + 72px)); transform: translateX(-50%); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 12px 18px; color: #fff; background: rgba(13,42,31,.9); box-shadow: 0 10px 30px rgba(0,0,0,.24); backdrop-filter: blur(8px); font-weight: 800; font-size: 13px; cursor: pointer; animation: bob 1.4s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translate(-50%, -4px); } }
.toast { position: fixed; z-index: 21; left: 50%; top: 20%; transform: translate(-50%, -10px); max-width: min(560px, calc(100vw - 32px)); padding: 14px 20px; border-radius: 16px; background: rgba(13,42,31,.92); border: 1px solid rgba(255,255,255,.2); box-shadow: var(--shadow); font-weight: 800; text-align: center; opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.round-ui { position: fixed; z-index: 13; right: 16px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.23); border-radius: 50%; color: white; background: var(--glass); backdrop-filter: blur(8px); box-shadow: 0 8px 20px rgba(0,0,0,.16); font-weight: 900; cursor: pointer; }
.help-button { bottom: max(18px, env(safe-area-inset-bottom)); }

.mobile-controls { position: fixed; z-index: 14; inset: auto 0 max(15px, env(safe-area-inset-bottom)) 0; pointer-events: none; }
.dpad { position: absolute; left: 16px; bottom: 0; width: 148px; height: 148px; }
.dpad button, .action-stack button { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; border: 1px solid rgba(255,255,255,.25); color: white; background: rgba(17,49,36,.74); backdrop-filter: blur(8px); box-shadow: 0 7px 18px rgba(0,0,0,.17); }
.dpad button { position: absolute; width: 48px; height: 48px; border-radius: 15px; font-size: 17px; }
.dpad-up { left: 50px; top: 0; }.dpad-down { left: 50px; bottom: 0; }.dpad-left { left: 0; top: 50px; }.dpad-right { right: 0; top: 50px; }
.dpad-center { position: absolute; left: 55px; top: 55px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); }
.dpad button.pressed { background: rgba(211,237,103,.36); transform: scale(.96); }
.action-stack { position: absolute; right: 16px; bottom: 0; display: grid; gap: 12px; }
.action-stack button { width: 82px; height: 62px; border-radius: 22px; font-weight: 900; }
.action-stack small { display: block; font-size: 9px; letter-spacing: .1em; opacity: .75; }
.action-stack span { display: block; margin-top: 2px; font-size: 13px; }
.run-btn.active { color: #18331f; background: linear-gradient(135deg, rgba(225,242,107,.96), rgba(137,208,96,.96)); }
.action-btn.ready { background: rgba(224,167,49,.88); }

.modal { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(4,17,12,.48); backdrop-filter: blur(8px); }
.modal-card { position: relative; width: min(620px, 100%); padding: 28px; border-radius: 24px; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(145deg, rgba(17,54,39,.97), rgba(8,30,22,.96)); box-shadow: var(--shadow); text-align: center; }
.modal-card.compact { width: min(520px, 100%); text-align: left; }
.modal-card h2 { margin: 0 0 12px; font-size: 30px; }
.modal-close { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; color: white; background: rgba(255,255,255,.1); cursor: pointer; }
.help-list { display: grid; gap: 10px; margin: 18px 0; }
.help-list div { display: grid; grid-template-columns: 74px 1fr; gap: 12px; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.065); }
.help-list b { color: #e8f688; }.help-list span { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.86); }
.complete-icon { font-size: 50px; margin-bottom: 4px; }.complete-copy { line-height: 1.8; color: rgba(255,255,255,.82); }
.modal-actions { display: grid; grid-template-columns: 1.15fr .85fr; gap: 10px; margin-top: 22px; }
.modal-actions .primary { width: auto; }

@media (hover: hover) and (pointer: fine) {
  .mobile-controls { display: none !important; }
}

@media (max-width: 700px) {
  .screen-card { padding: 23px 19px; border-radius: 22px; }
  .controls-grid { grid-template-columns: 1fr 1fr; }
  .controls-grid div { display: grid; justify-content: stretch; gap: 6px; text-align: center; }
  .brand-card { min-width: 0; max-width: 66vw; padding: 9px 11px; }
  .brand-card b { font-size: 11px; }
  .brand-icon { display: none; }
  .counter-card { font-size: 12px; padding: 10px 12px; }
  .round-ui { right: 10px; width: 40px; height: 40px; }
  .help-button { bottom: 170px; }
  .prompt { bottom: 176px; font-size: 12px; padding: 10px 14px; }
  .toast { top: 17%; font-size: 13px; }
  .modal-actions { grid-template-columns: 1fr; }
  .modal-card { padding: 24px 19px; }
  .modal-card h2 { font-size: 26px; }
}

@media (max-width: 390px) {
  .dpad { transform: scale(.88); transform-origin: left bottom; }
  .action-stack { transform: scale(.9); transform-origin: right bottom; }
  .controls-grid { grid-template-columns: 1fr; }
  .welcome-card .lead { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .loader span, .prompt { animation: none; }
  * { scroll-behavior: auto !important; }
}


/* ========================================================================== */
/* v0.2.7: mobile controller layout + long-press/haptic suppression + scrolling */
/* ========================================================================== */

/* Treat the virtual controller as game input, not selectable/callout web UI. */
.mobile-controls,
.mobile-controls button,
.help-button {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.mobile-controls button,
.help-button {
  touch-action: none;
  -webkit-user-drag: none;
  outline: none;
}
.mobile-controls button::selection,
.help-button::selection { background: transparent; }

/* Match Mitsumotaro World's phone layout:
   RUN at far left / Help beside it / D-pad centered / ACTION at far right. */
@media (pointer: coarse), (max-width: 800px) {
  .mobile-controls {
    left: 0;
    right: 0;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    height: 101px;
    display: block;
  }

  .mobile-controls .dpad {
    --dpad-size: 48px;
    --dpad-gap: 5px;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: calc(var(--dpad-size) * 3 + var(--dpad-gap) * 2);
    height: calc(var(--dpad-size) * 2 + var(--dpad-gap));
    display: grid;
    grid-template-columns: repeat(3, var(--dpad-size));
    grid-template-rows: repeat(2, var(--dpad-size));
    gap: var(--dpad-gap);
    transform: translateX(-50%);
    transform-origin: center bottom;
  }
  .mobile-controls .dpad button {
    position: static;
    width: var(--dpad-size);
    height: var(--dpad-size);
    margin: 0;
    border-radius: 13px;
  }
  .mobile-controls .dpad-up    { grid-column: 2; grid-row: 1; }
  .mobile-controls .dpad-left  { grid-column: 1; grid-row: 2; }
  .mobile-controls .dpad-down  { grid-column: 2; grid-row: 2; }
  .mobile-controls .dpad-right { grid-column: 3; grid-row: 2; }
  .mobile-controls .dpad-center { display: none; }

  .mobile-controls .action-stack {
    position: static;
    display: block;
    /* v0.2.8: old <=390px scale() made this element the containing block
       for RUN/ACTION, so those two buttons floated above the lower row.
       Keep the wrapper untransformed so absolute buttons use
       .mobile-controls as the common positioning reference. */
    transform: none !important;
    transform-origin: initial !important;
  }
  .mobile-controls .action-stack button {
    position: absolute;
    margin: 0;
    border-radius: 50%;
  }
  .mobile-controls .run-btn {
    left: calc(14px + env(safe-area-inset-left, 0px));
    right: auto;
    bottom: 0;
    width: 54px;
    height: 54px;
  }
  .mobile-controls .action-btn {
    left: auto;
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: 0;
    width: 66px;
    height: 66px;
  }

  /* The desktop help button becomes the second button in the left cluster. */
  .help-button {
    left: calc(75px + env(safe-area-inset-left, 0px));
    right: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 54px;
    height: 54px;
  }

  .prompt {
    bottom: calc(168px + env(safe-area-inset-bottom, 0px));
  }

  /* The welcome screen is taller than many phone viewports. Pin it between the
     safe areas and make the card itself the scroll container. This avoids the
     previous state where the Start button existed below the visible viewport. */
  .welcome-card {
    top: max(10px, env(safe-area-inset-top, 0px));
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-gutter: stable;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }
  body.welcome-open { touch-action: pan-y; }

  /* Other information/result modals can also exceed short landscape or browser
     viewports, so give every modal card the same safe internal scrolling. */
  .modal-card {
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}

@media (max-width: 420px) {
  .mobile-controls { height: 87px; }
  .mobile-controls .dpad {
    --dpad-size: 42px;
    --dpad-gap: 3px;
  }
  .mobile-controls .dpad button { border-radius: 12px; }
  .mobile-controls .run-btn {
    left: calc(10px + env(safe-area-inset-left, 0px));
    width: 50px;
    height: 50px;
  }
  .help-button {
    left: calc(66px + env(safe-area-inset-left, 0px));
    width: 50px;
    height: 50px;
  }
  .mobile-controls .action-btn {
    right: calc(10px + env(safe-area-inset-right, 0px));
    width: 66px;
    height: 66px;
  }
}

@media (max-width: 380px) {
  .mobile-controls { height: 82px; }
  .mobile-controls .dpad {
    --dpad-size: 40px;
    --dpad-gap: 2px;
  }
  .mobile-controls .dpad button { border-radius: 11px; }
  .mobile-controls .run-btn {
    left: calc(8px + env(safe-area-inset-left, 0px));
    width: 46px;
    height: 46px;
  }
  .help-button {
    left: calc(60px + env(safe-area-inset-left, 0px));
    width: 46px;
    height: 46px;
  }
  .mobile-controls .action-btn {
    right: calc(8px + env(safe-area-inset-right, 0px));
    width: 66px;
    height: 66px;
  }
}

@media (max-width: 340px) {
  .mobile-controls { height: 78px; }
  .mobile-controls .dpad {
    --dpad-size: 38px;
    --dpad-gap: 2px;
  }
  .mobile-controls .dpad button { border-radius: 10px; }
  .mobile-controls .run-btn {
    left: calc(8px + env(safe-area-inset-left, 0px));
    width: 42px;
    height: 42px;
  }
  .help-button {
    left: calc(56px + env(safe-area-inset-left, 0px));
    width: 42px;
    height: 42px;
  }
  .mobile-controls .action-btn {
    right: calc(8px + env(safe-area-inset-right, 0px));
    width: 62px;
    height: 62px;
  }
}


/* ========================================================================== */
/* v0.2.8: RUN / ACTION bottom-row alignment guard */
/* ========================================================================== */
@media (pointer: coarse), (max-width: 800px) {
  .mobile-controls .action-stack {
    transform: none !important;
  }

  /* RUN / Help / D-pad lower row / ACTION share exactly the same bottom line. */
  .mobile-controls .run-btn,
  .mobile-controls .action-btn {
    bottom: 0 !important;
  }

  .help-button {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

/* v0.5.5 — optional on-screen framing (not dinosaur world position). */
.camera-frame-settings {margin:18px 0 10px;padding:15px 16px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.055);text-align:left;}
.camera-frame-heading,.camera-frame-endpoints,.camera-frame-footer {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.camera-frame-heading strong {font-size:14px;color:#ecf7ec;}
.camera-frame-heading output {color:#e7f58f;font-weight:900;font-variant-numeric:tabular-nums;}
.camera-frame-settings input[type=range] {display:block;width:100%;margin:14px 0 7px;accent-color:#e7f58f;cursor:pointer;touch-action:pan-x;}
.camera-frame-endpoints {font-size:11px;color:rgba(255,255,255,.65);}
.camera-frame-footer {margin-top:13px;}
.camera-frame-footer small {color:rgba(255,255,255,.73);font-size:11px;line-height:1.5;}
.camera-frame-footer button {flex-shrink:0;font-size:11px;padding:9px 12px;border-radius:10px;}
@media(max-width:390px){.camera-frame-footer{align-items:flex-start;flex-direction:column;}.camera-frame-footer button{align-self:flex-end;}}


/* v0.5.6: scroll the Help contents on BOTH desktop and touch screens.
   Keep the title/close button visible while settings are scrolled. */
#helpModal {
  --help-safe-top: max(12px, env(safe-area-inset-top, 0px));
  --help-safe-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  padding: var(--help-safe-top) 12px var(--help-safe-bottom);
}
#helpModal .help-modal-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 24px); /* fallback for older browsers */
  max-height: calc(100dvh - var(--help-safe-top) - var(--help-safe-bottom));
  padding: 0;
  overflow: hidden;
}
#helpModal .help-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 14px;
  padding: 28px 22px 0 28px;
}
#helpModal .help-modal-header h2 { margin-bottom: 14px; }
#helpModal .modal-close {
  position: static;
  flex: 0 0 36px;
}
#helpModal .help-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 28px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 239, 188, .58) transparent;
}
#helpModal .help-modal-scroll:focus-visible {
  outline: 2px solid rgba(216, 239, 188, .8);
  outline-offset: -2px;
  border-radius: 0 0 14px 14px;
}
@media (max-width: 700px) {
  #helpModal .help-modal-header { padding: 24px 17px 0 19px; }
  #helpModal .help-modal-scroll { padding: 0 19px 24px; }
}

/* v0.5.9 aerial warp: existing UI is hidden ONLY during the presentation. */
body.sky-warp-active .hud,
body.sky-warp-active .prompt,
body.sky-warp-active .round-ui,
body.sky-warp-active .mobile-controls,
body.sky-warp-active .area-map-panel,
body.sky-warp-active .dino-status,
body.sky-warp-active .toast { opacity:0 !important; pointer-events:none !important; }
.sky-warp-hud { position:fixed; z-index:45; top:max(16px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:min(640px,calc(100vw - 24px)); color:#ecf9e7; padding:13px 17px 11px; border-radius:16px; border:1px solid rgba(229,246,193,.38); background:rgba(9,38,43,.84); box-shadow:0 8px 30px #071b2875; backdrop-filter:blur(11px); }
.sky-warp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.sky-warp-head strong{display:block;font-size:12px;letter-spacing:.22em;color:#e9eaa1;}
#skyWarpModeTitle[hidden]{display:none!important;}
.sky-warp-head p{margin:5px 0;font-size:14px;font-weight:750;line-height:1.35;}
.sky-warp-head button {cursor:pointer;flex:none;padding:9px 12px;border-radius:999px;border:1px solid rgba(232,246,216,.45);color:#eaffcc;background:rgba(28,80,67,.8);font-weight:700;}
.sky-warp-progress{margin-top:7px;height:4px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden;}
.sky-warp-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#76dbe7,#f8ea91);transition:width .07s linear;}
.sky-warp-attribution{margin-top:7px;font-size:10px;color:rgba(221,242,242,.74);}
.sky-warp-attribution[hidden]{display:none!important;}
.sky-warp-flash {position:fixed;inset:0;z-index:43;pointer-events:none;opacity:0;background:radial-gradient(circle,#fffde7 0%,rgba(211,251,255,.75) 45%,transparent 90%);}
.sky-warp-flash-active {animation:sky-warp-flash .28s ease-out forwards;}
@keyframes sky-warp-flash {0%{opacity:.88;}100%{opacity:0;}}
@media(max-width:700px){.sky-warp-hud{top:max(8px,env(safe-area-inset-top));padding:9px 12px}.sky-warp-head p{font-size:12px}.sky-warp-head strong{font-size:10px}.sky-warp-attribution{font-size:9px}}

/* Stage F: optional sound toggle for cross-era warp only. */
#timeWarpSoundToggle[hidden]{display:none!important}
#timeWarpSoundToggle{margin-left:auto;font-size:11px;white-space:nowrap}
@media(max-width:700px){#timeWarpSoundToggle{font-size:10px;padding:7px 8px}.sky-warp-head{gap:6px}}

/* v0.6.28: always-available dinosaur switcher inside the scrollable help panel. */
#helpModal .help-dino-settings {border:1px solid rgba(221,244,165,.25);border-radius:15px;padding:14px;margin:6px 0 16px;background:rgba(207,240,142,.075);}
#helpModal .help-dino-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
#helpModal .help-dino-heading strong {font-size:15px;color:#f1ffbd;}
#helpModal .help-dino-heading span {font-size:12px;color:rgba(244,252,220,.8);}
#helpModal .help-dino-choices {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
#helpModal .help-dino-choices button {min-width:0;border:1px solid rgba(228,255,188,.33);border-radius:11px;padding:11px 7px;color:#f6fff0;background:rgba(13,48,34,.75);cursor:pointer;touch-action:manipulation;text-align:center;}
#helpModal .help-dino-choices button b,#helpModal .help-dino-choices button small {display:block;overflow-wrap:anywhere;}
#helpModal .help-dino-choices button b {font-size:12px;line-height:1.45;}
#helpModal .help-dino-choices button small {font-size:10px;line-height:1.45;color:rgba(235,250,226,.76);margin-top:4px;}
#helpModal .help-dino-choices button.selected {border-color:#e2ec80;background:rgba(173,209,89,.25);box-shadow:inset 0 0 0 1px rgba(222,241,147,.45);}
#helpModal .help-dino-choices button:disabled {opacity:.53;cursor:wait;}
#helpModal .help-dino-choices button:focus-visible {outline:2px solid #eaffb5;outline-offset:2px;}
#helpModal .help-dino-settings .notice {margin-top:9px;font-size:11px;}
@media(max-width:410px){#helpModal .help-dino-choices {grid-template-columns:1fr;}#helpModal .help-dino-choices button {padding:9px 10px;text-align:left;}#helpModal .help-dino-choices button b {font-size:13px;}#helpModal .help-dino-choices button small {font-size:11px;}}

/* Stage I v0.6.33 – opt-in developer performance monitor. */
.performance-settings{margin:16px 0;padding:13px;border:1px solid rgba(225,245,180,.27);background:rgba(32,67,43,.36);border-radius:14px}
.performance-settings strong{display:block;font-size:14px;color:#e9f8bf}
.performance-settings .notice{font-size:12px;line-height:1.6;margin:8px 0 10px}
.performance-settings button{font-size:12px;min-height:40px;width:100%;padding:9px 12px}
.performance-panel{position:fixed;z-index:28;left:max(12px,env(safe-area-inset-left));top:max(85px,calc(env(safe-area-inset-top) + 58px));width:min(270px,calc(100vw - 26px));max-height:min(75vh,560px);overflow:auto;border:1px solid rgba(218,245,184,.36);border-radius:14px;padding:12px;background:rgba(13,36,30,.95);color:#f1ffe4;box-shadow:0 8px 28px rgba(0,0,0,.25);font-variant-numeric:tabular-nums;font-size:12px}
.performance-panel-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.performance-panel-head strong{font-size:12px;color:#ddf7ac}
.performance-panel-head button{width:32px;height:32px;background:rgba(255,255,255,.13);color:#fff;border:0;border-radius:9px;font-size:20px;cursor:pointer}
.performance-panel-grid{display:grid;grid-template-columns:1fr auto;gap:7px 9px;align-items:center}
.performance-panel-grid>span{opacity:.83}
.performance-panel-grid>b{text-align:right;font-size:12px}
.performance-panel .performance-auto{width:100%;min-height:40px;border:1px solid rgba(220,252,181,.35);border-radius:9px;margin:12px 0 8px;background:rgba(80,118,62,.45);color:#fff;font-size:12px;font-weight:700;cursor:pointer}
.performance-panel small{display:block;opacity:.73;line-height:1.5;font-size:10px}
@media(max-width:600px){.performance-panel{top:max(72px,calc(env(safe-area-inset-top) + 55px));width:min(245px,calc(100vw - 18px));padding:10px;font-size:11px}.performance-panel-grid>b{font-size:11px}}

/* v0.6.34 — compact upper-right identity and scrollable welcome on all screens. */
.hud { left:auto; right:max(12px,env(safe-area-inset-right,0px)); top:max(12px,env(safe-area-inset-top,0px)); width:min(330px,calc(100vw - 24px)); justify-content:flex-end; }
.hud .brand-card { width:100%; min-width:0; max-width:100%; padding:10px 12px; pointer-events:none; border-radius:13px; }
.hud .brand-card div { min-width:0; }
.hud .brand-card b { font-size:clamp(11px,1.2vw,13px); overflow-wrap:anywhere; }
.hud .brand-card small { font-size:10px; line-height:1.42; letter-spacing:0; overflow-wrap:anywhere; }
.welcome-card { max-height:calc(100vh - 28px); max-height:calc(100dvh - 28px); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; scrollbar-gutter:stable; }
/* Make the start button visually distinct from the control-mode guidance. */
.welcome-card .welcome-control-note { margin-bottom:20px; }
.help-warp-settings {border:1px solid rgba(220,240,171,.28);border-radius:15px;padding:13px 14px;margin:6px 0 16px;background:rgba(196,230,147,.075);text-align:left;}
.help-warp-settings strong {display:block;color:#f1ffbd;font-size:14px;}
.help-warp-settings .notice {margin:7px 0 11px;}
.help-warp-settings button {width:100%;min-height:43px;}
.help-warp-settings small {display:block;margin-top:7px;color:rgba(240,251,217,.75);font-size:11px;}
@media(max-width:700px){
 .hud{right:10px;top:max(8px,env(safe-area-inset-top,0px));width:min(265px,calc(100vw - 20px));}
 .hud .brand-card{padding:8px 10px;max-width:100%;}
 .hud .brand-card b{font-size:11px;}
 .hud .brand-card small{font-size:9px;}
}
@media(max-height:500px){.welcome-card{max-height:calc(100dvh - 16px);}}

/* 2026-10-28 UI2 — start the adventure directly beneath the invitation. */
.welcome-card #startBtn { display:block; margin:0 0 24px; }
.welcome-card .lead { margin-bottom:16px; }

/* v0.6.43: quiet, optional map-source disclosure in the existing help dialog */
.map-data-credits { margin: 16px 0 8px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.17); border-radius: 12px; background: rgba(255,255,255,.05); font-size: 12px; line-height: 1.65; color: rgba(255,255,255,.78); }
.map-data-credits summary { cursor: pointer; font-weight: 700; color: #dcefc2; }
.map-data-credits p { margin: 9px 0 0; overflow-wrap: anywhere; }
.map-data-credits a { color: #c8eaf7; text-decoration: underline; text-underline-offset: 2px; }
.map-data-credits a:focus-visible { outline: 2px solid #e5f58c; outline-offset: 2px; }

/* v0.6.46 — four primary actions at the top of the help dialog, on all screens. */
#helpModal .help-modal-heading {min-width:0;}
#helpModal .help-back-button {
  display:block;margin:0 0 7px;padding:4px 11px;border:1px solid rgba(231,248,197,.3);
  border-radius:999px;background:rgba(222,250,199,.09);color:#eafad3;
  font-size:12px;font-weight:700;cursor:pointer;touch-action:manipulation;
}
#helpModal .help-quick-grid {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  margin:2px 0 8px;
}
#helpModal .help-quick-tile {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:0;min-height:124px;gap:5px;padding:15px 9px;
  border:1px solid rgba(222,246,176,.32);border-radius:16px;
  background:linear-gradient(145deg,rgba(92,143,86,.27),rgba(31,77,61,.42));
  color:#efffe8;cursor:pointer;touch-action:manipulation;text-align:center;
  transition:background-color .12s ease,border-color .12s ease;
}
#helpModal .help-quick-tile:hover {background:rgba(137,181,102,.30);border-color:rgba(230,250,184,.6);}
#helpModal .help-quick-tile:active {background:rgba(171,208,112,.38);}
#helpModal .help-quick-tile:focus-visible,
#helpModal .help-back-button:focus-visible {outline:3px solid #e1f58a;outline-offset:2px;}
#helpModal .help-quick-icon {display:block;font-size:25px;line-height:1.15;color:#e0f69a;}
#helpModal .help-quick-tile strong {display:block;font-size:17px;line-height:1.3;white-space:nowrap;}
#helpModal .help-quick-tile small {display:block;font-size:11px;line-height:1.4;color:rgba(245,253,230,.82);}
#helpModal .help-overview-hint {margin:12px 0 20px;font-size:12px;line-height:1.6;color:rgba(239,252,222,.79);}
#helpModal .help-overview .performance-settings {margin:18px 0;}
#helpModal .help-detail {padding-top:2px;}
#helpModal .help-detail > :first-child {margin-top:0;}
#helpModal .help-detail .camera-frame-settings {margin-top:6px;}
@media (max-width:700px){
  #helpModal .help-quick-grid {gap:9px;}
  #helpModal .help-quick-tile {min-height:104px;padding:11px 5px;gap:4px;}
  #helpModal .help-quick-icon {font-size:21px;}
  #helpModal .help-quick-tile strong {font-size:15px;}
  #helpModal .help-quick-tile small {font-size:10px;}
}
@media (max-width:360px){
  #helpModal .help-quick-tile {min-height:98px;}
  #helpModal .help-quick-tile strong {font-size:14px;}
}

/* P0-P5 multilingual selector; welcome screen and help-modal footer. */
.locale-selector{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid rgba(220,247,196,.35);border-radius:11px;background:rgba(16,49,38,.94);color:#eaf6d8;max-width:100%;font-size:14px}
.locale-selector select{background:transparent;color:inherit;border:0;padding:4px;max-width:135px;min-width:82px;font:inherit;cursor:pointer}
.locale-selector select option{background:#163c2c;color:#fff}
.locale-selector:focus-within{outline:2px solid #e4fa8c;outline-offset:2px}
.welcome-locale{display:flex;justify-content:flex-end;margin-bottom:12px}
.locale-game{pointer-events:auto}
.locale-game.hidden{display:none!important}
/* The in-game language selector lives at the very bottom of the ? overview. */
#helpModal .help-language-settings {
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin:17px 0 2px;padding:13px 14px;
  border:1px solid rgba(222,246,176,.28);border-radius:13px;
  background:rgba(196,230,147,.065);
}
#helpModal .help-language-title {font-size:14px;color:#eef6d2;}
#helpModal .help-language-settings .locale-selector {padding:5px 8px;font-size:13px;}
#helpModal .help-language-settings .locale-selector select {min-width:96px;max-width:134px;font-size:13px;}
html[lang="en"] .modal-card,html[lang="zh-Hans"] .modal-card{overflow-wrap:anywhere}
html[lang="en"] .help-quick-tile strong,html[lang="zh-Hans"] .help-quick-tile strong{font-size:clamp(13px,2.5vw,21px);line-height:1.23}
html[lang="en"] .help-quick-tile small,html[lang="zh-Hans"] .help-quick-tile small{line-height:1.35}
@media(max-width:600px){
  .locale-selector{font-size:12px;padding:4px 6px;}
  .locale-selector select{max-width:112px;min-width:72px;}
  .welcome-locale{margin-bottom:10px;}
  #helpModal .help-language-settings{padding:11px 12px;}
  #helpModal .help-language-title{font-size:13px;}
  #helpModal .help-language-settings .locale-selector{font-size:12px;}
  #helpModal .help-language-settings .locale-selector select{font-size:12px;min-width:82px;max-width:115px;}
}

/* v0.6.62 — Initial loading and welcome titles remain on one line.
   Scope strictly to the initial screens so HUD, help and game text are unchanged.
   Use viewport-responsive type to avoid clipping on narrow phones. */
#loading > h1,
#welcomeTitle {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  letter-spacing: -.045em;
  max-width: 100%;
}
#loading > h1 {
  font-size: clamp(15px, 5vw, 36px);
  line-height: 1.2;
}
#welcomeTitle {
  font-size: clamp(17px, 5.8vw, 44px);
  line-height: 1.2;
}
@media (max-width: 319px) {
  #loading > h1 { font-size: clamp(12px, 4.8vw, 15px); }
  #welcomeTitle { font-size: clamp(13px, 5.2vw, 17px); }
}

/* Phase 1: fullness meter is opposite the upper-left 3-stage MAP HUD. */
.fullness-hud{position:fixed;z-index:19;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:49px;height:132px;display:flex;flex-direction:column;align-items:center;gap:9px;padding:11px 6px 20px;border:1px solid rgba(231,249,188,.32);border-radius:17px;background:rgba(14,49,39,.9);color:#f6ffe4;box-shadow:0 8px 20px #05191546;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;appearance:none;-webkit-appearance:none;font:inherit;}
.fullness-hud:focus-visible{outline:2px solid #c9f177;outline-offset:3px;}
.fullness-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:17px;line-height:1;flex:0 0 auto;}
.fullness-track{position:relative;flex:1 1 auto;width:11px;min-height:64px;border-radius:999px;background:#5b6e5b;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.2);}
.fullness-track>span{position:absolute;left:0;right:0;bottom:0;height:100%;display:block;border-radius:inherit;background:linear-gradient(180deg,#c9f177,#79c664);transition:height .25s;}
.fullness-hud[data-status="empty"] .fullness-track>span,.fullness-hud[data-status="critical"] .fullness-track>span,.fullness-hud[data-status="hungry"] .fullness-track>span{background:#df8869;}
.fullness-hud[data-status="overfed"] .fullness-track>span{background:#e1bb70;}
.fullness-test-dot{position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;background:#f2d992;box-shadow:0 0 0 2px rgba(14,49,39,.72);}
.fullness-bubble{position:fixed;z-index:18;transform:translate(-50%,-100%);max-width:min(230px,67vw);padding:8px 11px;border-radius:15px;background:#f9fde3;color:#173724;border:2px solid #bfd67e;box-shadow:0 5px 15px #0a311b66;font-size:13px;font-weight:800;line-height:1.4;text-align:center;pointer-events:none;white-space:pre-line;}
.fullness-bubble:after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#f9fde3;}
#fullnessInfoModal .fullness-info-card{width:min(300px,100%);text-align:center;padding:24px 22px 20px;}
.fullness-info-card h2{margin-bottom:10px;font-size:24px;}
.fullness-info-meter{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0 8px;}
.fullness-info-meter .fullness-icon{width:42px;height:42px;font-size:22px;}
.fullness-info-value{font-size:36px;line-height:1;font-variant-numeric:tabular-nums;}
.fullness-info-card .notice{margin:0;color:#d7e7d2;text-align:center;}
body.sky-warp-active .fullness-hud,body.sky-warp-active .fullness-bubble{opacity:0!important;visibility:hidden!important;}
.fullness-warp-hint{margin:12px 0 0;padding:10px;border-radius:10px;border:1px solid #d8cb8b66;color:#f4edbc;background:#856d2622;font-size:13px;line-height:1.5;}
.fullness-help-panel{padding:13px;margin:14px 0;border:1px solid #e8fbb433;border-radius:12px;background:#deecaf0e;}
.fullness-help-panel>strong{font-size:14px;color:#e9f3bf;}
.fullness-help-panel .notice{margin:7px 0 0;}
.fullness-debug{margin-top:10px;font-size:12px;}
.fullness-debug-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
.fullness-debug-actions button{min-height:32px;min-width:43px;padding:5px 7px;font-size:12px;}
@media(max-width:600px){.fullness-hud{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));width:48px;height:122px;padding:10px 5px 19px;border-radius:16px;gap:7px;}.fullness-icon{width:27px;height:27px;font-size:17px}.fullness-track{width:10px;min-height:60px}.fullness-info-card{width:min(280px,100%)}.fullness-info-value{font-size:32px}.fullness-bubble{font-size:12px}}
@media(max-width:350px){.fullness-hud{width:46px;height:114px;right:5px;gap:7px;padding-bottom:17px}.fullness-track{min-height:56px}}


/* v0.6.71: restart/continue without taking settings away from the user. */
.adventure-resume-choice{display:grid;gap:11px;margin:8px 0 20px;}
.adventure-checkpoint{padding:14px 16px;border:1px solid rgba(223,241,179,.28);border-radius:14px;background:rgba(255,255,255,.07);text-align:left;}
.adventure-checkpoint strong{color:#e4f2b8;}
.adventure-checkpoint p{margin:7px 0 4px;line-height:1.5;}
.adventure-checkpoint small{color:#bfd4bd;}
.adventure-resume-choice .secondary{width:100%;}
.adventure-save-help{margin:15px 0;padding:14px;border:1px solid rgba(226,241,189,.28);border-radius:14px;background:rgba(255,255,255,.045);}
.adventure-save-help strong{display:block;color:#e9f3bf;margin-bottom:5px;}
.adventure-save-help .notice{margin:7px 0 10px;}
.adventure-save-help button{width:100%;}
.adventure-reset-card{max-width:420px;}
.adventure-reset-card p{line-height:1.75;}
@media(max-width:500px){.adventure-reset-card{padding:22px 17px;}.adventure-reset-card h2{font-size:21px;}}


/* v0.6.107: WebGL context-loss recovery UI (also shown during full screen). */
.webgl-recovery { position: fixed; z-index: 9999; inset: 0; display: grid; place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  background: rgba(8, 27, 21, .95); color: #fff; box-sizing: border-box; }
.webgl-recovery-card { width: min(460px, 100%); padding: 26px 20px; text-align: center;
  border: 1px solid rgba(255,255,255,.22); background: #143d2f; border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.24); }
.webgl-recovery-symbol { font-size: 42px; margin-bottom: 10px; }
.webgl-recovery-card h2 { font-size: 21px; margin: 0 0 12px; }
.webgl-recovery-card p { font-size: 14px; line-height: 1.8; margin: 0 0 15px; }
.webgl-recovery-card small { display: block; color: rgba(255,255,255,.78);
  line-height: 1.6; margin-top: 14px; }
.webgl-recovery-card .primary { margin-top: 10px; }


/* v0.6.109: Move Help ABOVE RUN on phones; free the space left of D-pad.
   Absolute coordinates use the same viewport/safe-area reference as RUN.
   No HTML reordering: keyboard focus, click and modal bindings are intact. */
@media (pointer: coarse), (max-width: 800px) {
  .help-button {
    --help-run-offset: 14px;
    --help-run-size: 54px;
    left: calc(var(--help-run-offset) + env(safe-area-inset-left, 0px));
    right: auto;
    bottom: calc(var(--help-run-offset) + env(safe-area-inset-bottom, 0px) + var(--help-run-size) + 12px);
    width: var(--help-run-size);
    height: var(--help-run-size);
  }
}
@media (max-width: 420px) {
  .help-button { --help-run-offset: 10px; --help-run-size: 50px; }
}
@media (max-width: 380px) {
  .help-button { --help-run-offset: 8px; --help-run-size: 46px; }
}
@media (max-width: 340px) {
  .help-button { --help-run-offset: 8px; --help-run-size: 42px; }
}

/* v0.6.149: analog joystick is direction only; independent RUN is restored. */
.mobile-controls .virtual-joystick {
  --joystick-x:0px;--joystick-y:0px;
  position:absolute;left:50%;bottom:0;
  width:104px;height:104px;transform:translateX(-50%);
  pointer-events:auto;touch-action:none;overscroll-behavior:contain;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  border-radius:50%;border:2px solid rgba(222,255,225,.48);
  background:radial-gradient(circle at 48% 44%,rgba(40,84,63,.78),rgba(13,39,31,.91));
  box-shadow:0 6px 22px rgba(0,0,0,.25),inset 0 0 0 7px rgba(255,255,255,.045);
  isolation:isolate;-webkit-tap-highlight-color:transparent;
}
.mobile-controls .virtual-joystick.is-active { border-color:rgba(179,249,197,.85); }
.mobile-controls .virtual-joystick .joystick-direction {
  position:absolute;color:rgba(245,255,244,.7);font-size:13px;font-weight:900;
  pointer-events:none;line-height:1;text-shadow:0 1px 4px rgba(0,0,0,.3);
}
.mobile-controls .joystick-direction-up {top:7px;left:50%;transform:translateX(-50%)}
.mobile-controls .joystick-direction-down {bottom:7px;left:50%;transform:translateX(-50%)}
.mobile-controls .joystick-direction-left {left:8px;top:50%;transform:translateY(-50%)}
.mobile-controls .joystick-direction-right {right:8px;top:50%;transform:translateY(-50%)}
.mobile-controls .joystick-thumb {
  position:absolute;top:50%;left:50%;width:44px;height:44px;
  display:grid;place-items:center;pointer-events:none;border-radius:50%;
  border:2px solid rgba(239,255,239,.85);
  background:radial-gradient(circle at 36% 30%,rgba(202,255,207,.95),rgba(103,188,136,.89) 67%,rgba(44,110,77,.96));
  box-shadow:0 4px 13px rgba(0,0,0,.35);transition:transform .10s ease-out;
  transform:translate(calc(-50% + var(--joystick-x)),calc(-50% + var(--joystick-y)));
}
.mobile-controls .virtual-joystick.is-active .joystick-thumb{transition:none}
.mobile-controls .joystick-thumb-dot{width:12px;height:12px;border-radius:50%;background:rgba(25,74,48,.65)}
@media (pointer:coarse),(max-width:800px){
  .mobile-controls {height:106px}
  .mobile-controls .virtual-joystick {left:50%;bottom:0;width:104px;height:104px;transform:translateX(-50%)}
  .mobile-controls .action-btn {right:calc(14px + env(safe-area-inset-right,0px));bottom:0;width:66px;height:66px}
  .help-button {left:calc(14px + env(safe-area-inset-left,0px));right:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:54px;height:54px}
  #facingResetBtn {bottom:calc(128px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:420px){
  .mobile-controls{height:98px}
  .mobile-controls .virtual-joystick{width:96px;height:96px}
  .mobile-controls .joystick-thumb{width:40px;height:40px}
  .mobile-controls .action-btn{right:calc(10px + env(safe-area-inset-right,0px));width:66px;height:66px}
  .help-button{left:calc(10px + env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));width:50px;height:50px}
  #facingResetBtn{bottom:calc(116px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:340px){
  .mobile-controls{height:90px}
  .mobile-controls .virtual-joystick{width:88px;height:88px}
  .mobile-controls .joystick-thumb{width:36px;height:36px}
  .mobile-controls .action-btn{right:calc(8px + env(safe-area-inset-right,0px));width:62px;height:62px}
  .help-button{left:calc(8px + env(safe-area-inset-left,0px));width:42px;height:42px}
  #facingResetBtn{bottom:calc(108px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){.mobile-controls .joystick-thumb{transition:none}}


/* v0.6.137 — place the easy-mode front-reset immediately above Help.
   area-ui.css is loaded after styles.css, so use the element ID to override
   its desktop centering without touching desktop controls. */
@media (pointer:coarse), (max-width:800px) {
  #facingResetBtn {
    position:fixed;
    z-index:19;
    left:calc(14px + env(safe-area-inset-left,0px));
    right:auto;
    bottom:calc(14px + env(safe-area-inset-bottom,0px) + 54px + 12px);
    transform:none;
    margin:0;
    padding:9px 11px;
    min-height:40px;
    min-width:54px;
    font-size:12px;
    line-height:1.15;
    white-space:nowrap;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
  }
  #facingResetBtn small{display:none;}
}
@media (max-width:420px){
  #facingResetBtn {
    left:calc(10px + env(safe-area-inset-left,0px));
    bottom:calc(14px + env(safe-area-inset-bottom,0px) + 50px + 10px);
    padding:8px 9px;
    font-size:11px;
  }
}
@media (max-width:340px){
  #facingResetBtn {
    left:calc(8px + env(safe-area-inset-left,0px));
    bottom:calc(14px + env(safe-area-inset-bottom,0px) + 42px + 8px);
    padding:8px;
    font-size:10px;
    min-width:42px;
  }
}


/* v0.6.144: Clear, centered GLB loading status in BOTH dinosaur selectors.
   The overlay is scoped to each modal card, not the whole field or other modals. */
.dino-card, #helpModal .help-modal-card { isolation: isolate; }
.dino-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 22px;
  overflow: auto;
  background: rgba(5, 31, 23, .97);
  border-radius: inherit;
  text-align: center;
  color: #f5ffe6;
  cursor: progress;
}
.dino-loading-content {
  width: 100%;
  max-width: 450px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.dino-loading-spinner {
  display: block;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  flex: none;
  border: 6px solid rgba(225, 247, 180, .23);
  border-top-color: #e6f79c;
  border-right-color: #86d8b2;
  border-radius: 50%;
  animation: dino-loading-spin 1s linear infinite;
}
.dino-loading-message {
  display: block;
  max-width: 100%;
  font-size: clamp(19px, 3vw, 25px);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.dino-loading-hint {
  max-width: 30em;
  margin: 0;
  color: #e3efcf;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.7;
}
@keyframes dino-loading-spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
  .dino-loading-overlay { padding: 22px 17px; }
  .dino-loading-content { gap: 14px; }
  .dino-loading-spinner { width: 54px; height: 54px; border-width: 5px; }
  .dino-loading-message { font-size: clamp(18px, 5.2vw, 22px); }
  .dino-loading-hint { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .dino-loading-spinner { animation-duration: 3s; }
}


/* v0.6.149 — final smartphone control arrangement.
   Keep existing 104/96/88 joystick sizes, but put RUN below Help and
   center Facing directly ABOVE the joystick. No changes to desktop controls. */
@media (pointer:coarse), (max-width:800px) {
  :root { --dino-joy-diameter:104px; --dino-left-button:54px; --dino-left-gap:14px; }
  .mobile-controls { height:calc(var(--dino-joy-diameter) + 2px); }
  .mobile-controls .virtual-joystick {
    width:var(--dino-joy-diameter);height:var(--dino-joy-diameter);
    left:50%;bottom:0;transform:translateX(-50%);
  }
  .mobile-controls #runBtn:not(.hidden) {
    display:flex;align-items:center;justify-content:center;
  }
  .mobile-controls #runBtn {
    position:absolute;left:calc(var(--dino-left-gap) + env(safe-area-inset-left,0px));
    right:auto;bottom:0;
    width:var(--dino-left-button);height:var(--dino-left-button);
    font-size:12px;font-weight:900;line-height:1.1;letter-spacing:0;
    border-radius:50%;cursor:pointer;
  }
  .mobile-controls #runBtn.active:not(:disabled) {
    color:#173b21;border-color:#e9fbb7;
    background:linear-gradient(135deg,#e5f792,#7cd068);
    box-shadow:0 0 0 3px rgba(160,255,140,.20),0 8px 23px #0005;
  }
  .mobile-controls #runBtn:disabled { opacity:.55; }
  .help-button {
    left:calc(var(--dino-left-gap) + env(safe-area-inset-left,0px));right:auto;
    width:var(--dino-left-button);height:var(--dino-left-button);
    bottom:calc(14px + env(safe-area-inset-bottom,0px) + var(--dino-left-button) + 12px);
  }
  #facingResetBtn {
    position:fixed;z-index:19;
    left:50%;right:auto;
    bottom:calc(14px + env(safe-area-inset-bottom,0px) + var(--dino-joy-diameter) + 12px);
    transform:translateX(-50%);margin:0;
    min-height:36px;min-width:0;width:auto;
    padding:8px 14px;border-radius:22px;
    font-size:12px;line-height:1.15;white-space:nowrap;
  }
  #facingResetBtn small {display:none;}
}
@media (max-width:420px) {
  :root { --dino-joy-diameter:96px; --dino-left-button:50px; --dino-left-gap:10px; }
  #facingResetBtn {padding:8px 12px;font-size:11px;}
}
@media (max-width:340px) {
  :root { --dino-joy-diameter:88px; --dino-left-button:42px; --dino-left-gap:8px; }
  .mobile-controls #runBtn {font-size:11px;}
  #facingResetBtn {padding:7px 11px;font-size:11px;}
}

/* v0.6.172: FUKUI Dino Forest gate transition. */
.forest-transition{position:fixed;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-copy{position:relative;z-index:3;text-align:center;color:#f3ffe8;text-shadow:0 3px 18px #031a0e;padding:20px;transform:translateY(10px);opacity:0;animation:forestCopyIn .7s .16s ease-out forwards}
.forest-transition-copy small{display:block;font-size:11px;letter-spacing:.20em;font-weight:800;color:#bfe49d}.forest-transition-copy h2{margin:8px 0 5px;font-size:clamp(28px,7vw,52px);line-height:1.1}.forest-transition-copy p{margin:0;font-weight:800;letter-spacing:.04em}
.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}
@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}}
@keyframes forestCopyIn{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.forest-transition-mist,.forest-transition-ring,.forest-transition-leaves span,.forest-transition-copy{animation:none!important}.forest-transition.active .forest-transition-copy{opacity:1;transform:none}}

/* v0.6.174 — phones do not need the desktop-style key guide on the welcome screen.
   Keep the separate control-mode note visible, as requested. */
@media (pointer: coarse) {
  .welcome-card .controls-grid { display: none !important; }
  .welcome-card .welcome-control-note { margin-top: 8px; }
}


/* v0.6.178 — contact link in the in-game help dialog. */
#helpModal .help-contact {
  margin:18px 0 2px;
  padding:15px 14px 14px;
  border-top:1px solid rgba(229,245,190,.22);
  border-radius:12px;
  background:rgba(12,34,28,.34);
}
#helpModal .help-contact > strong {
  display:block;
  margin-bottom:6px;
  color:#f1ffbd;
  font-size:14px;
}
#helpModal .help-contact .notice { margin:0 0 8px; }
#helpModal .help-contact-email {
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:7px 10px;
  border:1px solid rgba(226,245,176,.34);
  border-radius:10px;
  color:#f7ffd9;
  background:rgba(83,121,67,.24);
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  overflow-wrap:anywhere;
  touch-action:manipulation;
}
#helpModal .help-contact-email:hover { background:rgba(116,157,87,.34); }
#helpModal .help-contact-email:focus-visible { outline:2px solid #e1f58a; outline-offset:2px; }
#helpModal .help-contact-hint {
  margin:9px 0 0;
  color:rgba(239,250,221,.70);
  font-size:11px;
  line-height:1.55;
}
@media(max-width:600px){
  #helpModal .help-contact {margin-top:15px;padding:13px 12px;}
  #helpModal .help-contact-email {width:100%;justify-content:center;font-size:13px;}
}