: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%); } }

.mission-preview { display: grid; gap: 5px; padding: 14px 16px; margin: 8px 0 16px; border-radius: 16px; background: rgba(221,243,129,.10); border: 1px solid rgba(221,243,129,.25); }
.mission-preview b { color: #e9f99a; font-size: 13px; }
.mission-preview span { font-size: 14px; line-height: 1.55; }
.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; }

.mission { position: fixed; z-index: 11; top: 82px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100vw - 34px)); padding: 13px 42px 13px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; background: rgba(18,49,36,.84); backdrop-filter: blur(9px); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.mission b { display: block; color: #e8f688; font-size: 13px; margin-bottom: 3px; }
.mission span { display: block; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.83); }
.mission button { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.1); cursor: pointer; }

.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; }
.demo-note { position: fixed; z-index: 8; left: 50%; bottom: 8px; transform: translateX(-50%); max-width: calc(100vw - 220px); font-size: 9px; letter-spacing: .03em; color: rgba(255,255,255,.72); text-shadow: 0 1px 4px rgba(0,0,0,.55); pointer-events: none; white-space: nowrap; }

@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; }
  .mission { top: 74px; }
  .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; }
  .demo-note { display: none; }
  .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; }
  .mission-preview { 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));
  }
}