/* ============================================================
   THE WILD: Back Out to the Wild — styles
   Responsive, touch-first, safe-area aware.
   ============================================================ */

:root{
  --heart-size: clamp(24px, 4.2vmin, 44px);
  --hud-font: clamp(14px, 2.6vmin, 26px);
  --hud-pad: clamp(8px, 1.8vmin, 20px);
  --btn-size: clamp(58px, 11vmin, 84px);
  --joy-size: clamp(104px, 22vmin, 160px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --ink: #f4f7f2;
  --shadow: 0 2px 8px rgba(0,0,0,.75);
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0;
  width:100%; height:100%;
  overflow:hidden;
  background:#0d1b17;
  color:var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  overscroll-behavior:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  position:fixed; inset:0;
}

#game-canvas{
  display:block;
  width:100%; height:100%;
  touch-action:none;
  outline:none;
}

.hidden{ display:none !important; }

.noscript{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:#0d1b17; color:#fff; font-size:20px; text-align:center; padding:24px; z-index:9999;
}

/* ===================== HUD ===================== */
#hud{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:20;
  padding: calc(var(--hud-pad) + env(safe-area-inset-top,0px)) calc(var(--hud-pad) + var(--safe-r)) var(--hud-pad) calc(var(--hud-pad) + var(--safe-l));
}

.hud-hearts{
  position:absolute;
  top: calc(var(--hud-pad) + env(safe-area-inset-top,0px));
  left: calc(var(--hud-pad) + var(--safe-l));
  display:flex; gap: clamp(3px,.8vmin,8px);
}
.hud-hearts .heart{
  width:var(--heart-size); height:var(--heart-size);
  background-size: contain; background-repeat:no-repeat; background-position:center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.7));
  transition: opacity .18s ease, transform .18s ease;
}
.hud-hearts .heart.empty{ opacity:.22; transform: scale(.82); filter:grayscale(1) drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.hud-hearts .heart.pulse{ animation: heartPulse .45s ease; }
@keyframes heartPulse{ 0%{transform:scale(1)} 40%{transform:scale(1.45)} 100%{transform:scale(.82)} }

/* fallback CSS heart when texture missing */
.heart.css-heart{ position:relative; background:none; }
.heart.css-heart::before, .heart.css-heart::after{
  content:""; position:absolute; top:12%; width:50%; height:78%;
  background:#e63946; border-radius:50% 50% 0 0; transform-origin:0 100%;
}
.heart.css-heart::before{ left:50%; transform: rotate(-45deg); transform-origin:0 100%; }
.heart.css-heart::after{ left:0; transform: rotate(45deg); transform-origin:100% 100%; }

.hud-timer{
  position:absolute;
  top: calc(var(--hud-pad) + env(safe-area-inset-top,0px));
  right: calc(var(--hud-pad) + var(--safe-r));
  font-size: calc(var(--hud-font) * 1.25);
  font-weight:800; letter-spacing:1.5px;
  text-shadow: var(--shadow);
  font-variant-numeric: tabular-nums;
}

.hud-outfit{
  position:absolute;
  top: calc(var(--hud-pad) + env(safe-area-inset-top,0px));
  left:50%; transform:translateX(-50%);
  font-size: var(--hud-font); font-weight:700;
  text-shadow: var(--shadow);
  opacity:.92; white-space:nowrap;
}
.hud-biome{
  position:absolute;
  top: calc(var(--hud-pad) + env(safe-area-inset-top,0px) + var(--hud-font) + 8px);
  left:50%; transform:translateX(-50%);
  font-size: calc(var(--hud-font) * .8); font-weight:600;
  text-shadow: var(--shadow); opacity:.6; white-space:nowrap;
}

.hud-hint{
  position:absolute;
  bottom: calc(var(--hud-pad) + var(--safe-b));
  left:50%; transform:translateX(-50%);
  font-size: calc(var(--hud-font) * .85);
  text-shadow: var(--shadow); opacity:.7; white-space:nowrap;
}
.hud-hint b{ color:#ffd166; }

.hud-toast{
  position:absolute;
  top:22%; left:50%; transform:translate(-50%,-50%) scale(.8);
  font-size: calc(var(--hud-font) * 1.5); font-weight:900;
  color:#ffd166; text-shadow:0 3px 10px rgba(0,0,0,.9);
  opacity:0; text-align:center; white-space:nowrap;
  transition: opacity .25s ease, transform .25s ease;
}
.hud-toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.hud-cd{
  position:absolute;
  top: calc(var(--hud-pad) + env(safe-area-inset-top,0px) + var(--heart-size) + 10px);
  left: calc(var(--hud-pad) + var(--safe-l));
  /* match the hearts row width exactly (5 hearts + 4 gaps) */
  width: calc(var(--heart-size) * 5 + clamp(3px,.8vmin,8px) * 4);
  max-width: calc(100vw - var(--hud-pad) * 2 - var(--safe-l) - var(--safe-r));
  height: clamp(5px,1vmin,9px);
  background: rgba(0,0,0,.35); border-radius:99px; overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
}
.hud-cd span{ display:block; height:100%; width:100%; background:#4cc9f0; border-radius:99px; transition: width .08s linear; }

/* damage vignette */
#hud.hurt::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 clamp(60px,14vmin,180px) rgba(220,20,40,.85);
  animation: hurtFlash .5s ease-out;
}
@keyframes hurtFlash{ from{opacity:1} to{opacity:0} }

/* ===================== TOUCH UI ===================== */
#touch-ui{ position:fixed; inset:0; z-index:30; pointer-events:none; }

.joy{
  position:absolute;
  left: calc(clamp(16px,4vmin,44px) + var(--safe-l));
  bottom: calc(clamp(16px,4vmin,44px) + var(--safe-b));
  width:var(--joy-size); height:var(--joy-size);
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.13) 0%, rgba(255,255,255,.06) 60%, rgba(255,255,255,.03) 100%);
  border:2px solid rgba(255,255,255,.3);
  pointer-events:auto; touch-action:none;
  box-shadow: 0 4px 18px rgba(0,0,0,.4);
}
.joy-knob{
  position:absolute; left:50%; top:50%;
  width:44%; height:44%;
  margin-left:-22%; margin-top:-22%;
  border-radius:50%;
  background: rgba(255,255,255,.62);
  border:2px solid rgba(255,255,255,.85);
  box-shadow: 0 3px 10px rgba(0,0,0,.5);
  transition: transform .06s linear;
  will-change: transform;
}

.btn-cluster{
  position:absolute;
  right: calc(clamp(14px,3vmin,36px) + var(--safe-r));
  bottom: calc(clamp(14px,3vmin,36px) + var(--safe-b));
  display:grid;
  grid-template-columns: repeat(2, var(--btn-size));
  gap: clamp(10px, 2.2vmin, 22px);
  pointer-events:none;
}
.act-btn{
  width:var(--btn-size); height:var(--btn-size);
  border-radius:50%;
  border:3px solid rgba(255,255,255,.55);
  font-size: calc(var(--btn-size) * .42);
  line-height:1;
  color:#fff;
  pointer-events:auto; touch-action:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  transition: transform .07s ease, filter .07s ease;
  padding:0; cursor:pointer;
  -webkit-user-select:none; user-select:none;
}
.act-btn:active, .act-btn.pressed{ transform: scale(.88); filter: brightness(1.4); }
.act-btn.cooling{ opacity:.4; }
.act-btn.red{    background: rgba(214,40,57,.85); }
.act-btn.blue{   background: rgba(30,110,220,.85); }
.act-btn.green{  background: rgba(35,160,80,.85); }
.act-btn.yellow{ background: rgba(220,170,30,.85); }

/* ===================== OVERLAYS ===================== */
.overlay{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  /* Lighter scrim: the live 3D scene stays visible behind the menus */
  background: radial-gradient(ellipse at center, rgba(12,30,24,.58) 0%, rgba(5,10,9,.84) 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  text-align:center;
  padding: max(16px, env(safe-area-inset-top,0px)) 16px max(16px, var(--safe-b)) 16px;
  overflow:auto;
}
.overlay-inner{ max-width: 760px; width:100%; }

.game-title{
  font-size: clamp(38px, 11vmin, 108px);
  margin:0; letter-spacing: clamp(2px,1.2vmin,12px);
  font-weight:900;
  background: linear-gradient(180deg,#dcffa8 0%,#7cd45c 50%,#2e7d32 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.95)) drop-shadow(0 0 22px rgba(120,220,90,.35));
}
.game-subtitle{
  font-size: clamp(15px, 3.4vmin, 34px);
  margin: .2em 0 1em; font-weight:600; color:#eaf7e2; letter-spacing:2px;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
.go-title{ font-size: clamp(30px, 8vmin, 76px); margin:0 0 .3em; color:#ff8a80; font-weight:900; text-shadow:0 3px 10px rgba(0,0,0,.9); }
.go-stat{ font-size: clamp(17px, 4vmin, 36px); margin-bottom:.4em; text-shadow:0 2px 8px rgba(0,0,0,.9); }
.go-stat b{ color:#ffd166; }
.go-sub{ font-size: clamp(13px, 2.6vmin, 22px); opacity:.92; margin-bottom:.3em; text-shadow:0 2px 6px rgba(0,0,0,.9); }
.go-note{ font-size: clamp(12px, 2.2vmin, 19px); opacity:.8; margin-top:1em; text-shadow:0 2px 6px rgba(0,0,0,.9); }

.big-btn{
  margin-top: clamp(14px,3vmin,32px);
  padding: clamp(12px,2.4vmin,22px) clamp(24px,5vmin,52px);
  font-size: clamp(15px, 3.2vmin, 30px);
  font-weight:800; letter-spacing:2px;
  color:#0d1b17;
  background: linear-gradient(180deg,#b6f36a,#5cb85c);
  border:none; border-radius:99px;
  cursor:pointer;
  box-shadow: 0 6px 0 #2e7d32, 0 10px 22px rgba(0,0,0,.5);
  transition: transform .08s ease, box-shadow .08s ease;
  touch-action: manipulation;
  font-family:inherit;
}
.big-btn:active{ transform: translateY(4px); box-shadow: 0 2px 0 #2e7d32, 0 6px 14px rgba(0,0,0,.5); }

.loading-status{ font-size: clamp(13px,2.6vmin,22px); opacity:.75; margin: clamp(14px,3vmin,32px) 0; min-height:1.4em; }

.controls-help{
  margin-top: clamp(18px,4vmin,44px);
  display:flex; gap:clamp(16px,4vmin,48px); justify-content:center; flex-wrap:wrap;
  font-size: clamp(11px,2.2vmin,18px);
  text-shadow: 0 2px 6px rgba(0,0,0,.95);
}
.ch-col h3{ margin:0 0 .5em; font-size:1.15em; color:#b6f36a; }
.ch-col p{ margin:.28em 0; }
.ch-col b{ color:#ffd166; }

.rotate-icon{ font-size: clamp(50px,16vmin,140px); animation: rotateHint 2s ease-in-out infinite; }
@keyframes rotateHint{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-90deg)} }
#rotate-screen h2{ font-size: clamp(20px,5vmin,40px); }
#rotate-screen p{ font-size: clamp(13px,3vmin,24px); opacity:.8; }

/* device-conditional help columns */
.mobile-only{ display:none; }
body.is-touch .mobile-only{ display:block; }
body.is-touch .desktop-only{ display:none; }