/* ============================================================
   GORSEY BANK — Wildlife Watch
   8-bit overhead field-guide game. NES-era pixel aesthetic.
   ============================================================ */

:root{
  --ink:#f4e7c1;          /* parchment cream text       */
  --ink-dim:#bcae8c;
  --panel:#241f33;        /* deep dusk purple panel     */
  --panel-2:#1a1726;
  --panel-edge:#0c0a14;
  --orange:#ff7f4f;       /* warm coral (house roofs)   */
  --orange-dk:#c84a22;
  --blue:#4a9fcc;         /* derbyshire sky blue        */
  --green:#6cae45;
  --shadow:#0a0810;
  --grid: 6px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  background:#0c0a14;
  color:var(--ink);
  font-family:'VT323', 'Courier New', monospace;
  overflow:hidden;
  -webkit-font-smoothing:none;
  image-rendering:pixelated;
}

/* binocular / crosshair cursor */
#stage{
  position:fixed; inset:0;
  cursor:crosshair;
  background:
    radial-gradient(ellipse at 50% 30%, #1d2a3a 0%, #121a26 55%, #0c0a14 100%);
}

canvas#game{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* ---------- CRT / scanline overlay ---------- */
#crt{
  position:fixed; inset:0; pointer-events:none; z-index:40;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0.18) 3px,
      rgba(0,0,0,0.18) 4px);
  mix-blend-mode:multiply;
}
#crt::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}

/* ---------- HUD ---------- */
.hud{ position:fixed; z-index:30; pointer-events:none; }

#topbar{
  top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  background:linear-gradient(to bottom, rgba(12,10,20,0.92), rgba(12,10,20,0.0));
}
#title{
  font-family:'Press Start 2P', monospace;
  font-size:15px; line-height:1.4;
  color:var(--orange);
  text-shadow:3px 3px 0 var(--shadow), 0 0 1px var(--orange-dk);
  letter-spacing:1px;
}
#title small{
  display:block; margin-top:6px;
  font-family:'VT323', monospace; font-size:18px;
  color:var(--blue); text-shadow:2px 2px 0 var(--shadow);
  letter-spacing:0;
}

/* field guide panel */
#guide{
  top:74px; right:14px;
  width:210px;
  pointer-events:auto;
  background:var(--panel);
  border:var(--grid) solid transparent;
  border-image:
    repeating-linear-gradient(45deg,var(--panel-edge) 0 6px,#3a3350 6px 12px) 6;
  box-shadow:0 0 0 3px var(--panel-edge), 8px 8px 0 rgba(0,0,0,0.4);
  padding:12px 12px 14px;
}
#guide h2{
  font-family:'Press Start 2P', monospace;
  font-size:10px; color:var(--orange);
  margin-bottom:10px; text-shadow:2px 2px 0 var(--shadow);
}
.species{
  display:flex; align-items:center; gap:9px;
  font-size:19px; line-height:1;
  padding:5px 4px; margin:2px 0;
  color:var(--ink-dim);
  border-bottom:2px dotted rgba(255,255,255,0.08);
  transition:color .15s;
}
.species .chk{
  width:18px; height:18px; flex:0 0 18px;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--ink-dim);
  font-size:14px; color:transparent;
}
.species.found{ color:var(--ink); }
.species.found .chk{ border-color:var(--green); color:var(--green); background:rgba(108,174,69,0.12); }
.species .cnt{ margin-left:auto; font-size:16px; color:var(--blue); }

#guide .progress{
  margin-top:10px; font-size:16px; color:var(--ink-dim);
  border-top:2px solid var(--panel-edge); padding-top:8px;
}
#guide .progress b{ color:var(--green); }

/* wild tally panel (bottom-left, clear of the guide & hint) */
#wildpanel{
  left:14px; bottom:54px;
  width:200px;
  pointer-events:auto;
  background:var(--panel);
  border:var(--grid) solid transparent;
  border-image:
    repeating-linear-gradient(45deg,var(--panel-edge) 0 6px,#3a3350 6px 12px) 6;
  box-shadow:0 0 0 3px var(--panel-edge), 8px 8px 0 rgba(0,0,0,0.4);
  padding:12px 12px 10px;
}
#wildpanel h2{
  font-family:'Press Start 2P', monospace;
  font-size:10px; color:var(--blue);
  margin-bottom:10px; text-shadow:2px 2px 0 var(--shadow);
}
.wrow{
  display:flex; align-items:center;
  font-size:19px; line-height:1;
  padding:4px 4px; color:var(--ink-dim);
  border-bottom:2px dotted rgba(255,255,255,0.08);
}
.wrow .wl{ margin-right:auto; }
.wrow b{ font-size:20px; font-variant-numeric:tabular-nums; }
.wrow .wg{ color:var(--green); }
.wrow .wb{ color:var(--blue); }
.wrow .wo{ color:var(--orange); }
.wrow .wm{ color:#c86a5a; }

/* "about to leave" countdown alert */
#leaving{
  position:fixed; z-index:34; left:50%; bottom:58px;
  transform:translate(-50%, 20px);
  width:min(340px, 78vw);
  background:var(--panel-2);
  border:3px solid var(--orange);
  box-shadow:0 0 0 3px var(--panel-edge), 5px 5px 0 rgba(0,0,0,0.45);
  padding:8px 12px 9px; text-align:center;
  opacity:0; pointer-events:none;
  transition:opacity .18s, transform .18s;
}
#leaving.show{ opacity:1; transform:translate(-50%, 0); }
#leaving .lv-txt{
  font-family:'Press Start 2P', monospace; font-size:10px;
  color:var(--orange); text-shadow:2px 2px 0 var(--shadow);
  display:block; margin-bottom:7px;
}
#leaving #lv-species{ color:var(--ink); }
#leaving .lv-bar{
  height:9px; background:#0c0a14;
  border:2px solid var(--panel-edge); overflow:hidden;
}
#leaving .lv-bar i{
  display:block; height:100%; width:100%;
  background:var(--orange);
  transition:width .12s linear, background .2s;
}

/* bottom hint bar */
#hint{
  left:0; right:0; bottom:0;
  text-align:center; padding:8px 10px 12px;
  font-size:18px; color:var(--ink-dim);
  background:linear-gradient(to top, rgba(12,10,20,0.92), rgba(12,10,20,0.0));
}
#hint b{ color:var(--orange); }
#hint .key{
  color:var(--ink); border:2px solid var(--ink-dim);
  padding:0 5px; border-radius:2px; margin:0 1px;
}

/* sound toggle */
#sound{
  position:fixed; z-index:31; top:78px; left:14px;
  pointer-events:auto; cursor:pointer;
  font-family:'Press Start 2P', monospace; font-size:9px;
  color:var(--ink); background:var(--panel);
  border:3px solid var(--panel-edge);
  box-shadow:4px 4px 0 rgba(0,0,0,0.4);
  padding:8px 10px;
}
#sound:hover{ color:var(--orange); }
#sound.off{ color:#8a8294; }

/* floating tooltip + toast */
#tip{
  position:fixed; z-index:35; pointer-events:none;
  font-size:18px; color:var(--ink);
  background:var(--panel-2); border:2px solid var(--orange);
  padding:2px 8px; transform:translate(-50%,-140%);
  white-space:nowrap; display:none;
  box-shadow:3px 3px 0 var(--shadow);
}
#toast{
  position:fixed; z-index:36; left:50%; top:38%;
  transform:translate(-50%,-50%) scale(0.6);
  font-family:'Press Start 2P', monospace; font-size:16px;
  color:var(--green); text-shadow:3px 3px 0 var(--shadow);
  opacity:0; pointer-events:none; text-align:center;
}
#toast.show{ animation:pop 1.5s ease-out forwards; }
@keyframes pop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0.5); }
  20%{ opacity:1; transform:translate(-50%,-50%) scale(1.1); }
  35%{ transform:translate(-50%,-50%) scale(1.0); }
  80%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-90%) scale(1.0); }
}

/* ---------- Start screen ---------- */
#start{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; text-align:center;
  background:
    radial-gradient(ellipse at 50% 35%, #20344a 0%, #121a26 60%, #0a0810 100%);
}
#start h1{
  font-family:'Press Start 2P', monospace;
  font-size:34px; line-height:1.5; color:var(--orange);
  text-shadow:5px 5px 0 var(--shadow), 0 0 2px var(--orange-dk);
}
#start h1 .b{ color:var(--blue); }
#start p{ font-size:21px; color:var(--ink-dim); max-width:520px; padding:0 20px; }
#start p .hl{ color:var(--green); }
#startbtn{
  margin-top:6px; cursor:pointer;
  font-family:'Press Start 2P', monospace; font-size:16px;
  color:#0c0a14; background:var(--orange);
  border:none; padding:16px 26px;
  box-shadow:6px 6px 0 var(--orange-dk), 12px 12px 0 rgba(0,0,0,0.4);
  animation:blink 1.2s steps(2,start) infinite;
}
#startbtn:hover{ background:#ffd089; box-shadow:6px 6px 0 var(--orange-dk),12px 12px 0 rgba(0,0,0,0.5); }
@keyframes blink{ 50%{ filter:brightness(1.25); } }
#start .credit{ font-size:16px; color:#6b6480; margin-top:8px; }
.pixelbirds{ display:flex; gap:34px; align-items:flex-end; justify-content:center; }
.pixelbirds .martin{ image-rendering:pixelated; shape-rendering:crispEdges;
  filter:drop-shadow(2px 3px 0 rgba(0,0,0,0.5)); animation:flap 1.6s ease-in-out infinite; }
.pixelbirds .b2{ animation-delay:.4s; }
.pixelbirds .b3{ animation-delay:.8s; }
@keyframes flap{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-8px) rotate(4deg); } }

@media (max-width:680px){
  #title{ font-size:11px; } #title small{ font-size:15px; }
  #guide{ width:170px; top:64px; }
  #wildpanel{ width:150px; bottom:50px; }
  #wildpanel h2{ font-size:9px; }
  .wrow{ font-size:15px; padding:3px 4px; } .wrow b{ font-size:16px; }
  #start h1{ font-size:22px; }
}