/* Copied from animalarmygame e24e710; keep in sync by hand (see scripts/lib/copy-rules.mjs). */
/*
 * Habitat (beta) - own stylesheet, `.hab-*` classes only, consuming the
 * :root tokens game.css defines (cabinet/drawer/brass/parchment/moss/
 * blaze/water + the font tokens). Same fixed full-screen overlay shape as
 * .pp-overlay so the mode reads as one of the game's screens. The globe is
 * a square canvas that fills the column width on a phone and is capped on
 * desktop so the animal card and the action button stay in one view.
 */
.hab-overlay{
  position:fixed; inset:0; z-index:1150;
  background:var(--cabinet); color:var(--parchment);
  display:flex; flex-direction:column; align-items:center;
  padding:16px 16px 24px; overflow-y:auto;
  font-family:var(--font-body);
}
.hab-overlay[hidden]{ display:none; }
.hab-overlay-content{ width:100%; max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:12px; min-height:100%; }
@media (min-width:900px){ .hab-overlay-content{ max-width:640px; } }

.hab-head{ display:flex; align-items:center; gap:10px; }
.hab-back{
  background:transparent; border:1px solid var(--drawer-edge); color:var(--parchment-dim);
  border-radius:999px; padding:6px 12px; font:600 13px var(--font-body); cursor:pointer;
}
.hab-back:hover{ background:var(--drawer); color:var(--parchment); }
/* 44px landing zone around the 32px pill (first-run round 2, 2026-09). */
.hab-back{ position:relative; }
.hab-back::before{ content:""; position:absolute; inset:-7px -4px; }
.hab-title{ flex:1; min-width:0; font:400 18px var(--font-display); letter-spacing:.04em; color:var(--brass-bright); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hab-score{ font:800 15px var(--font-stamp); color:var(--parchment); background:var(--drawer); border:1px solid var(--drawer-edge); border-radius:999px; padding:5px 12px; }

.hab-progress{ display:flex; gap:5px; }
.hab-cell{ flex:1; height:6px; border-radius:3px; background:var(--drawer); border:1px solid var(--drawer-edge); }
.hab-cell.is-current{ background:var(--brass); border-color:var(--brass-bright); box-shadow:0 0 8px rgba(240,207,110,.5); }
.hab-cell.is-hit{ background:var(--moss-bright); border-color:var(--moss-bright); }
.hab-cell.is-near{ background:var(--brass-bright); border-color:var(--brass-bright); }
.hab-cell.is-miss{ background:var(--blaze); border-color:var(--blaze); }

.hab-card{
  display:flex; align-items:center; gap:14px;
  background:var(--drawer); border:1px solid var(--drawer-edge); border-radius:16px; padding:12px 14px;
  box-shadow:0 8px 24px var(--drawer-shadow);
}
.hab-sprite{ width:72px; height:72px; flex:none; display:flex; align-items:center; justify-content:center; font-size:44px; }
.hab-sprite .animal-art{ width:72px; height:72px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.hab-card-text{ min-width:0; flex:1; }
.hab-round{ font:700 11px var(--font-stamp); letter-spacing:.08em; text-transform:uppercase; color:var(--brass); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hab-name{ margin:2px 0 0; font:400 26px var(--font-display); color:var(--parchment); line-height:1.05; }
.hab-meta{ margin-top:4px; font:600 13px var(--font-body); color:var(--parchment-dim); }
.hab-prompt{ margin:0; text-align:center; font:600 14px var(--font-body); color:var(--parchment-dim); }

.hab-globe-slot{ display:flex; justify-content:center; position:relative; }
.hab-globe{ width:100%; max-width:min(100%, calc(100vh - 330px), 560px); max-width:min(100%, calc(100dvh - 330px), 560px); min-width:min(100%, 240px); aspect-ratio:1/1; position:relative; }
@media (max-width:480px){
  .hab-overlay{ padding:10px 8px 0; }
  .hab-overlay-content{ gap:8px; }
  .hab-globe{ max-width:min(100%, calc(100vh - 300px)); max-width:min(100%, calc(100dvh - 300px)); }
  .hab-card{ padding:8px 10px; gap:10px; border-radius:14px; }
  .hab-sprite{ width:52px; height:52px; font-size:34px; }
  .hab-sprite .animal-art{ width:52px; height:52px; }
  .hab-name{ font-size:21px; }
  .hab-meta{ font-size:12px; margin-top:2px; }
  .hab-prompt{ font-size:13px; }
  .hab-verdict{ font-size:17px; }
  .hab-points{ font-size:19px; }
  .hab-where{ font-size:13px; }
  .hab-fact{ font-size:13px; padding:8px 10px; }
}
@media (max-width:360px){ .hab-title{ font-size:15px; } .hab-score{ font-size:13px; padding:4px 9px; } .hab-back{ padding:5px 9px; font-size:12px; } }
.hab-canvas{
  width:100%; height:100%; display:block; touch-action:none; cursor:grab;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(240,207,110,.15), 0 20px 50px rgba(3,10,6,.7), inset 0 0 60px rgba(0,0,0,.35);
}
.hab-canvas:active{ cursor:grabbing; }

.hab-tools{ position:absolute; right:6px; bottom:6px; z-index:2; display:flex; flex-direction:column; gap:6px; }
.hab-tool{ width:40px; height:40px; border-radius:50%; border:1px solid var(--drawer-edge); background:rgba(26,51,39,.92); color:var(--parchment); font:800 20px var(--font-stamp); cursor:pointer; padding:0; box-shadow:0 4px 12px rgba(3,10,6,.5); }
.hab-tool:hover{ background:var(--drawer-hover); }
.hab-tool-text{ font-size:18px; }
/* the one button that matters stays on screen: sticky to the bottom of the
   scrolling overlay, with a fade so the globe can run underneath */
.hab-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; position:sticky; bottom:0; z-index:3; margin-top:auto; padding:10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background:linear-gradient(to top, var(--cabinet) 65%, rgba(15,33,24,0)); }
.hab-actions-result{ position:static; padding:0; background:none; margin-top:0; }
.hab-primary{
  background:var(--blaze); color:#1a0c02; border:0; border-radius:999px;
  padding:13px 26px; font:400 17px var(--font-display); letter-spacing:.05em; text-transform:uppercase; cursor:pointer;
  box-shadow:0 6px 18px rgba(255,122,31,.35); transition:transform .12s ease, opacity .12s ease;
}
.hab-primary:hover{ transform:translateY(-1px); }
.hab-primary[disabled]{ opacity:.4; cursor:default; box-shadow:none; transform:none; }
.hab-secondary{
  background:transparent; color:var(--parchment); border:1px solid var(--drawer-edge); border-radius:999px;
  padding:12px 22px; font:400 15px var(--font-display); letter-spacing:.05em; text-transform:uppercase; cursor:pointer;
}
.hab-secondary:hover{ background:var(--drawer); }

/* reveal */
.hab-card-reveal.is-hit{ border-color:var(--moss-bright); box-shadow:0 0 0 2px rgba(126,212,143,.25), 0 8px 24px var(--drawer-shadow); animation:hab-pop .45s ease; }
.hab-card-reveal.is-near{ border-color:var(--brass-bright); }
.hab-card-reveal.is-miss{ border-color:var(--blaze); animation:hab-shake .4s ease; }
.hab-verdict{ font:400 20px var(--font-display); color:var(--parchment); line-height:1.1; }
.is-hit .hab-verdict{ color:var(--moss-bright); }
.is-miss .hab-verdict{ color:var(--blaze-bright); }
.hab-points{ margin-top:4px; font:800 22px var(--font-stamp); color:var(--brass-bright); }
.hab-points span{ font-size:13px; color:var(--parchment-dim); font-weight:600; }
.hab-where{ margin-top:6px; font:600 14px var(--font-body); color:var(--parchment); }
.hab-fact{ margin:0; padding:10px 14px; border-left:3px solid var(--brass); background:rgba(201,162,77,.08); border-radius:0 10px 10px 0; font:500 14px var(--font-legible); color:var(--parchment-dim); }
.hab-fact b{ color:var(--brass-bright); }
@keyframes hab-pop{ 0%{ transform:scale(.96);} 55%{ transform:scale(1.02);} 100%{ transform:scale(1);} }
@keyframes hab-shake{ 0%,100%{ transform:translateX(0);} 25%{ transform:translateX(-6px);} 75%{ transform:translateX(6px);} }

/* result */
.hab-result-head{ text-align:center; padding:10px 0 4px; }
.hab-result-score{ font:400 52px var(--font-display); color:var(--brass-bright); line-height:1; text-shadow:0 4px 18px rgba(240,207,110,.25); }
.hab-result-score span{ font-size:18px; color:var(--parchment-dim); }
.hab-result-sub{ margin-top:8px; font:600 15px var(--font-body); color:var(--parchment); }
.hab-award{ margin:8px 0 0; font:700 13px var(--font-stamp); color:var(--moss-bright); }
.hab-rows{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.hab-row{ display:flex; align-items:center; gap:10px; background:var(--drawer); border:1px solid var(--drawer-edge); border-left-width:4px; border-radius:12px; padding:8px 10px; }
.hab-row.is-hit{ border-left-color:var(--moss-bright); }
.hab-row.is-near{ border-left-color:var(--brass-bright); }
.hab-row.is-miss{ border-left-color:var(--blaze); }
.hab-row-num{ width:20px; text-align:center; font:800 12px var(--font-stamp); color:var(--parchment-dim); }
.hab-row-sprite{ width:36px; height:36px; flex:none; display:flex; align-items:center; justify-content:center; font-size:24px; }
.hab-row-sprite .animal-art{ width:36px; height:36px; object-fit:contain; }
.hab-row-text{ flex:1; min-width:0; display:flex; flex-direction:column; }
.hab-row-text b{ font:700 14px var(--font-body); color:var(--parchment); }
.hab-row-text span{ font:500 12px var(--font-legible); color:var(--parchment-dim); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.25; }
.hab-row-pts{ font:800 13px var(--font-stamp); color:var(--brass-bright); white-space:nowrap; }
.hab-foot{ margin:4px 0 0; text-align:center; font:500 12px var(--font-legible); color:var(--parchment-dim); }

/* landing card (third door under PLAY): full width, a little warmer */
.home-door-mini.home-door-habitat{ grid-column:1 / -1; border-color:color-mix(in srgb, var(--brass) 45%, var(--drawer-edge)); }
.home-door-habitat .home-door-mini-art{ object-fit:contain; object-position:50% 50%; background:radial-gradient(circle at 50% 40%, #1d5a6e, #0f3d4c 70%); padding:4px; }
/* featured above PLAY while Habitat is new to this player (js/whats-new.js):
   a gold-edged globe banner, one slow glow, the NEW star on the title */
.home-door-mini.home-habitat-featured{
  width:100%; margin:0 0 10px; padding:10px 14px 10px 10px;
  grid-template-columns:52px minmax(0,1fr) auto;
  border:1.5px solid var(--brass-bright);
  background:linear-gradient(100deg, rgba(29,90,110,.55), rgba(15,61,76,.25) 55%, transparent), var(--drawer);
  box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 6px 22px rgba(240,207,110,.18);
  animation:habFeatureGlow 2.8s ease-in-out 3;
}
.home-habitat-featured .home-door-mini-art{ width:52px; height:52px; }
.home-habitat-featured .home-door-mini-title{ font-size:16px; display:flex; align-items:center; }
.home-habitat-featured .home-door-mini-sub{ font-size:12.5px; color:var(--parchment); }
.home-habitat-featured .home-door-mini-arrow{ color:var(--brass-bright); }
@keyframes habFeatureGlow{
  0%,100%{ box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 6px 22px rgba(240,207,110,.18); }
  50%{ box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 6px 30px rgba(240,207,110,.45); }
}
.home-hero.home-habitat-featured{ border-color:var(--brass-bright); animation:habFeatureGlow 2.8s ease-in-out 3; }
@media (prefers-reduced-motion:reduce){ .home-door-mini.home-habitat-featured, .home-hero.home-habitat-featured{ animation:none; } }

/* landscape phones: the globe takes the right half, sized to the height,
   with the card, prompt and button on the left */
@media (orientation:landscape) and (max-height:520px){
  .hab-overlay{ padding:10px 14px; }
  .hab-overlay-content:has(.hab-globe-slot){ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'head globe' 'prog globe' 'card globe' 'prompt globe' 'fact globe' 'actions globe'; column-gap:14px; row-gap:8px; align-content:start; max-width:none; }
  .hab-head{ grid-area:head; } .hab-progress{ grid-area:prog; } .hab-card{ grid-area:card; } .hab-prompt{ grid-area:prompt; text-align:left; }
  .hab-fact{ grid-area:fact; } .hab-actions{ grid-area:actions; position:static; background:none; padding:0; justify-content:flex-start; margin-top:auto; }
  .hab-globe-slot{ grid-area:globe; align-self:start; }
  .hab-globe{ width:calc(100vh - 20px); width:calc(100dvh - 20px); max-width:calc(100vh - 20px); max-width:calc(100dvh - 20px); min-width:0; }
}

/* first-tap intro: a small centred card, not a full screen */
.hab-intro-overlay{ position:fixed; inset:0; z-index:1160; background:rgba(3,10,6,.7); display:flex; align-items:center; justify-content:center; padding:24px; }
.hab-intro-overlay[hidden]{ display:none; }
.hab-intro-card{ background:var(--drawer); border:1px solid var(--drawer-edge); border-radius:18px; padding:24px 22px; max-width:380px; text-align:center; box-shadow:0 20px 60px var(--drawer-shadow); }
.hab-intro-globe{ font-size:48px; line-height:1; animation:hab-spin 6s linear infinite; display:inline-block; }
@keyframes hab-spin{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }
.hab-intro-title{ margin:10px 0 6px; font:400 28px var(--font-display); color:var(--brass-bright); letter-spacing:.04em; }
.hab-intro-copy{ margin:0 0 16px; font:500 15px var(--font-legible); color:var(--parchment); line-height:1.45; }
@media (prefers-reduced-motion: reduce){ .hab-intro-globe, .hab-card-reveal{ animation:none; } }

/* Small phones: the globe fills the width, which pushes Lock it in / Next
   below the fold on a 568px-tall screen. The action row sticks to the bottom
   of the overlay instead, so the one button that moves the round on is
   always under the thumb. */
@media (max-width:480px){
  .hab-actions{
    position:sticky; bottom:0; z-index:2; margin:0 -8px -20px; padding:10px 8px calc(14px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(180deg, rgba(15,33,24,0) 0%, var(--cabinet) 35%);
  }
  .hab-actions-result{ position:static; margin:0; padding:0; background:none; }
}