/* =========================================================
   Dexle - styles
   ========================================================= */

:root{
  --ground:#141A2E; --panel:#1D2540; --panel-2:#273052; --line:#33406B;
  --ink:#EEF2FF; --ink-dim:#93A0C8;
  --hit:#3E9D5B; --near:#C88A2E; --miss:#3A4266; --lamp:#E0483C;
}
*{ box-sizing:border-box }

body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'Segoe UI', system-ui, sans-serif; font-size:15px; line-height:1.5;
  background-image:radial-gradient(900px 500px at 50% -10%, #1E2745 0%, transparent 70%);
}
.wrap{ max-width:1080px; margin:0 auto; padding:24px 18px 60px }

/* ---------- header ---------- */
header{ display:flex; align-items:center; gap:14px; margin-bottom:22px }

.lamp{
  width:34px; height:34px; border-radius:50%; flex:none; background:var(--lamp);
  box-shadow:0 0 0 4px #2A3252, 0 0 22px rgba(224,72,60,.55); position:relative;
}
.lamp::after{
  content:""; position:absolute; top:6px; left:7px; width:11px; height:8px;
  border-radius:50%; background:rgba(255,255,255,.6); filter:blur(1px);
}

.titles{ margin-right:26px }          /* room for the shiny sparkles to overflow */
h1{
  margin:0; font-size:26px; letter-spacing:.14em; text-transform:uppercase;
  position:relative;
}
.tag{ color:var(--ink-dim); font-size:13px; margin:0 }

.hdr-btns{ margin-left:auto; display:flex; gap:8px; flex:none }

/* ---------- panels + buttons ---------- */
.panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:18px;
}
button, .toggle{
  cursor:pointer; border:none; border-radius:8px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:12px 22px;
  font-size:14px; background:var(--lamp); color:#fff; font-family:inherit;
}
button:hover{ filter:brightness(1.12) }
button:disabled{ opacity:.45; cursor:not-allowed; filter:none }
button.ghost{ background:var(--panel-2); color:var(--ink); border:1px solid var(--line) }
:focus-visible{ outline:2px solid #7FC4FF; outline-offset:2px }

#start{ text-align:center; padding:46px 20px }
#start h2{ margin:0; letter-spacing:.1em; text-transform:uppercase }
#start p{ color:var(--ink-dim); max-width:52ch; margin:10px auto 24px }

/* ---------- toggles ---------- */
.toggle{
  background:var(--panel-2); color:var(--ink-dim);
  border:1px solid var(--line); padding:9px 14px; font-size:12px;
  text-decoration:none; display:inline-flex; align-items:center; gap:7px;
}
.toggle .star{ font-size:14px; line-height:1 }
.toggle[aria-pressed="true"]{
  background:#3A2F14; border-color:#C9A227; color:#FFD54A;
  box-shadow:0 0 14px rgba(201,162,39,.35);
}
#menu{ padding:10px 12px }
.bars{ display:flex; flex-direction:column; gap:3px }
.bars i{ width:16px; height:2px; background:currentColor; border-radius:2px }

/* ---------- shiny mode ---------- */
.shiny .lamp{
  background:#E8C33D;
  box-shadow:0 0 0 4px #3A3520, 0 0 26px rgba(232,195,61,.65);
}
.shiny h1{
  background:linear-gradient(100deg,
    #FFE9A8 0%, #E8C33D 28%, #FFFDF2 42%, #E8C33D 56%, #C9A227 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 3.4s linear infinite;
}
@keyframes shimmer{ to{ background-position:-250% 0 } }

.shiny h1::before, .shiny h1::after{
  content:"✦"; position:absolute; color:#FFF3C4; pointer-events:none;
  text-shadow:0 0 8px rgba(255,214,74,.9);
  animation:twinkle 2.2s ease-in-out infinite;
}
.shiny h1::before{ top:-7px; right:-13px; font-size:14px }
.shiny h1::after { bottom:-1px; right:-22px; font-size:10px; animation-delay:1.1s }

@keyframes twinkle{
  0%,100%{ opacity:0; transform:scale(.4) rotate(0deg) }
  50%    { opacity:1; transform:scale(1) rotate(90deg) }
}

/* ---------- status pips ---------- */
.status{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.pips{ display:flex; gap:5px }
.pip{
  width:11px; height:11px; border-radius:50%;
  background:var(--panel-2); border:1px solid var(--line);
}
.pip.used{ background:var(--lamp); border-color:var(--lamp) }

/* ---------- search ---------- */
.searchbar{ position:relative; display:flex; gap:10px; margin:12px 0 }
#q{
  flex:1; background:var(--panel); border:1px solid var(--line); border-radius:8px;
  color:var(--ink); padding:13px 15px; font-size:16px; font-family:inherit;
}
#q::placeholder{ color:#6C79A6 }
#q:disabled{ opacity:1 }

.searchbar.caught #q{
  border-color:var(--hit); background:#17321F; color:#9BE8B4;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  text-align:center;
  box-shadow:0 0 0 3px rgba(62,157,91,.25), 0 0 26px rgba(62,157,91,.35);
}
.searchbar.caught #go{ background:var(--hit) }

#list{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20;
  max-height:320px; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  display:none; box-shadow:0 18px 40px rgba(0,0,0,.5);
}
#list.open{ display:block }

.opt{
  display:flex; align-items:center; gap:12px; padding:7px 12px;
  cursor:pointer; border-bottom:1px solid #232C4C;
}
.opt:last-child{ border-bottom:none }
.opt.sel, .opt:hover{ background:var(--panel-2) }
.opt img{ width:42px; height:42px; image-rendering:pixelated; flex:none }
.opt .no{ margin-left:auto; color:var(--ink-dim); font-size:12px }

/* ---------- type chips ---------- */
.type{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* ---------- hints ---------- */
#hintbar{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:14px 0 4px;
}
#hintbar:empty{ display:none }
#hintbar .lead{
  color:var(--ink-dim); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; margin-right:2px;
}
.hintbtn{
  background:#2B2447; border:1px solid #4B3F7A; color:#C9BEF5;
  padding:8px 14px; font-size:12px; text-transform:none; letter-spacing:.02em;
}
.hintbtn:hover{ background:#352C57 }

#hints{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 }
#hints:empty{ display:none }
.hint{
  background:#221C3D; border:1px solid #4B3F7A; border-radius:8px;
  padding:9px 13px; font-size:13px; max-width:min(560px, 100%);
}
.hint b{
  display:block; font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:#9A8BD8; margin-bottom:3px;
}
.hint.wide{ flex:1 1 100%; line-height:1.6 }
.hint .blank{ color:#FFD54A; letter-spacing:.1em }

/* ---------- live card ---------- */
#inspect{ display:none; gap:22px; align-items:center; margin:18px 0 }
#inspect.on{ display:flex }
#inspect img{
  width:170px; height:170px; flex:none;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.5));
}
#inspect h2{ margin:2px 0 8px; font-size:26px }

.facts{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(96px,1fr));
  gap:8px; margin-top:12px;
}
.facts.stats{ grid-template-columns:repeat(7, 1fr); margin-top:8px }

.fact{ background:var(--panel-2); border-radius:8px; padding:8px 10px }
.fact.hit { background:var(--hit) }
.fact.near{ background:var(--near) }
.fact b{
  display:block; font-size:10px; letter-spacing:.12em; font-weight:600;
  color:var(--ink-dim); text-transform:uppercase;
}
.fact.hit b, .fact.near b{ color:rgba(255,255,255,.85) }
.fact span{
  font-family:ui-monospace, Consolas, monospace; font-size:15px;
  display:flex; align-items:center; gap:5px;
}

/* ---------- guess history ---------- */
.scroller{ overflow-x:auto; margin-top:12px }
.grid{ min-width:820px }
.grid:empty{ display:none }

.entry{ margin-bottom:12px }
.row{ display:grid; grid-template-columns:150px repeat(7, 1fr); gap:6px }
.row.stats{ margin-top:6px }

.cell{
  background:var(--miss); border-radius:8px; padding:6px 4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; min-height:62px; gap:2px;
  font-family:ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size:13px;
}
.cell.hit { background:var(--hit) }
.cell.near{ background:var(--near) }
.cell small{
  font-size:9px; letter-spacing:.1em; text-transform:uppercase; opacity:.75;
  font-family:'Segoe UI', system-ui, sans-serif;
}
.arrow{ font-size:16px; line-height:1 }
.row.stats .cell{ min-height:46px; font-size:14px }

.head .cell, .cell.label{
  background:none; min-height:0; padding:2px 6px;
  color:var(--ink-dim); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; font-family:'Segoe UI', system-ui, sans-serif;
}
.cell.label{ justify-content:center; align-items:flex-start; min-height:46px }

.cell.name{
  background:var(--panel); border:1px solid var(--line);
  flex-direction:row; justify-content:flex-start; gap:8px; padding-left:8px;
  font-family:'Segoe UI', system-ui, sans-serif; font-weight:700; font-size:14px;
}
.cell.name img{ width:44px; height:44px; image-rendering:pixelated; flex:none }

.entry.reveal .cell{
  animation:flip .38s ease both; animation-delay:calc(var(--i, 0) * .05s);
}
@keyframes flip{
  from{ transform:rotateX(-90deg); opacity:0 }
  to  { transform:none; opacity:1 }
}

/* ---------- end card (top of the game) ---------- */
#end{
  display:none; margin:14px 0 4px; padding:16px 18px; text-align:center;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
}
#end.on{ display:block }
#end.win{ border-color:var(--hit); box-shadow:0 0 24px rgba(62,157,91,.22) }
#end h2{ margin:0 0 4px; font-size:22px; letter-spacing:.08em; text-transform:uppercase }
#end.win h2{ color:#7EE2A0 }
.endbtns{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px;
}

/* ---------- confetti ---------- */
#confetti{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:60; display:none;
}
#confetti.on{ display:block }

/* ---------- pokedex modal ---------- */
#dexmodal{
  position:fixed; inset:0; z-index:70; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(8,11,22,.78); backdrop-filter:blur(3px);
  animation:fade .25s ease both;
}
#dexmodal[hidden]{ display:none }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

.dexcard{
  width:min(680px, 100%); max-height:88vh; overflow:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  animation:rise .3s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes rise{ from{ transform:translateY(18px) scale(.97); opacity:0 } }

.dexbar{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:var(--lamp); border-radius:13px 13px 0 0;
}
.dexlamp{
  width:20px; height:20px; border-radius:50%; flex:none; background:#8FD4FF;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.7), 0 0 12px rgba(143,212,255,.7);
}
.dexbar-t{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
}
.dexbar button{
  margin-left:auto; background:rgba(0,0,0,.25); color:#fff;
  width:32px; height:32px; padding:0; border-radius:50%; font-size:15px;
}

.dexbody{ padding:20px }
.dexhero{ display:flex; gap:20px; align-items:center; flex-wrap:wrap }
.dexhero img{
  width:180px; height:180px; flex:none;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.5));
}
.dexhero h2{ margin:2px 0 6px; font-size:30px }
.dexcat{ color:var(--ink-dim); font-size:13px; font-style:italic }

.dexentry{
  margin-top:18px; padding:14px 16px; border-radius:10px;
  background:#101728; border:1px solid var(--line);
  font-family:ui-monospace, Consolas, monospace; font-size:14px; line-height:1.75;
  background-image:repeating-linear-gradient(
    to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
}
.dexrows{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:8px; margin-top:14px;
}

/* ---------- generation drawer ---------- */
#scrim{
  position:fixed; inset:0; z-index:80;
  background:rgba(8,11,22,.6); backdrop-filter:blur(2px);
  animation:fade .22s ease both;
}
#scrim[hidden]{ display:none }

#drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:90;
  width:min(340px, 88vw); overflow-y:auto;
  background:var(--panel); border-left:1px solid var(--line);
  box-shadow:-20px 0 60px rgba(0,0,0,.5);
  animation:slidein .22s cubic-bezier(.22,1,.36,1) both;
}
#drawer[hidden]{ display:none }
@keyframes slidein{
  from{ transform:translateX(100%); opacity:.4 }
  to  { transform:none; opacity:1 }
}

.drawer-head{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--panel); z-index:1;
}
.drawer-head h2{
  margin:0; font-size:14px; letter-spacing:.14em; text-transform:uppercase;
}
.drawer-head button{
  margin-left:auto; background:var(--panel-2); color:var(--ink);
  width:30px; height:30px; padding:0; border-radius:50%; font-size:14px;
}
.drawer-body{ padding:18px }

.genlist{ display:flex; flex-direction:column; gap:7px; margin:16px 0 }
.genrow{
  display:flex; align-items:center; gap:11px; cursor:pointer;
  padding:9px 12px; border-radius:8px; font-size:14px;
  background:var(--panel-2); border:1px solid transparent;
  transition:border-color .15s, background .15s;
}
.genrow:hover{ border-color:var(--line) }
.genrow input{ width:16px; height:16px; accent-color:var(--hit); cursor:pointer }
.genrow.on{ border-color:var(--hit); background:#1B2E27 }
.genrow .rg{ margin-left:auto; color:var(--ink-dim); font-size:11px }

.drawer-btns{ display:flex; gap:8px }
.drawer-btns button{ flex:1; padding:9px; font-size:12px }

.poolcount{
  margin:16px 0 0; text-align:center; color:var(--ink-dim); font-size:12px;
}
.poolcount span{ color:var(--ink); font-weight:700 }
.drawer-note{ text-align:center; margin-top:6px; font-size:11px; opacity:.7 }

/* ---------- key ---------- */
.key{
  max-width:720px; margin:52px auto 0; padding:6px 24px 20px;
  border:1px solid var(--line); border-radius:12px; text-align:center;
  background:rgba(29,37,64,.45);
}
.key legend{
  padding:0 12px; margin:0 auto;
  color:var(--ink-dim); font-size:11px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
}
.key-row{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px 22px; align-items:center; font-size:13px; color:var(--ink);
}
.sw{
  width:14px; height:14px; border-radius:4px; flex:none;
  display:inline-block; margin-right:-4px; vertical-align:-2px;
}
.sw.hit { background:var(--hit) }
.sw.near{ background:var(--near) }
.sw.miss{ background:var(--miss) }
.sw.arr{
  width:auto; height:auto; background:none;
  font-size:15px; color:var(--ink-dim); line-height:1;
}
.key-note{
  margin:14px auto 0; max-width:60ch;
  color:var(--ink-dim); font-size:12px; line-height:1.7;
}
.key-tip{
  margin:14px auto 0; max-width:60ch; padding-top:13px;
  border-top:1px solid var(--line);
  color:var(--ink-dim); font-size:12.5px; line-height:1.9;
}
.key-tip b{ color:var(--ink); font-weight:600 }

/* tiny inline hamburger so the tip points at the real button */
.bars-inline{
  display:inline-flex; flex-direction:column; gap:2px; vertical-align:-3px;
  padding:4px 5px; margin:0 2px; border-radius:4px;
  background:var(--panel-2); border:1px solid var(--line);
}
.bars-inline i{
  width:11px; height:1.5px; border-radius:2px; background:var(--ink-dim);
}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .facts.stats{ grid-template-columns:repeat(4, 1fr) }
}
@media (max-width:560px){
  h1{ font-size:20px }
  header{ flex-wrap:wrap; align-items:center }
  .titles{ min-width:0; flex:1; margin-right:0 }
  .hdr-btns{ width:100%; margin-left:0; display:grid; grid-template-columns:repeat(4,1fr) }
  .hdr-btns .toggle{ justify-content:center; min-width:0; padding:9px 4px; font-size:10px }
  #inspect{ flex-direction:column; text-align:center }
  #inspect img{ width:140px; height:140px }
  .dexhero{ justify-content:center; text-align:center }
  .dexhero img{ width:150px; height:150px }
  .key{ padding:6px 16px 18px }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  .shiny h1{ background-position:0 0 }
  .shiny h1::before, .shiny h1::after{ opacity:1; transform:none }
}

/* ---------- enter the tall grass ---------- */
#grass{
  width:100%; margin-top:14px; padding:14px;
  background:var(--hit); font-size:13px; letter-spacing:.1em;
  box-shadow:0 0 22px rgba(62,157,91,.3);
}
#reset{
  width:100%; margin-top:8px; padding:11px;
  font-size:12px; letter-spacing:.08em;
}
.pending{
  color:#E8C33D; opacity:1; line-height:1.6; margin-top:12px;
  padding:9px 11px; border-radius:8px;
  background:rgba(232,195,61,.09); border:1px solid rgba(232,195,61,.35);
}