/* =========================================================
   Conspiracy Theory Catcher — pixel/EGA blocky styling.
   Gameplay renders on the canvas; menus/shop are DOM overlays
   styled to match the chunky Keen aesthetic.
   ========================================================= */
:root{
  --black:#000;
  --ega-blue:#1a1c2c;
  --ega-dkblue:#10121f;
  --olive:#5a6e2a;
  --olive-lt:#8aa83f;
  --gold:#f2c33c;
  --gold-dk:#b8861a;
  --red:#d23b2f;
  --cream:#f4e7c8;
  --cyan:#3fd0e0;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{width:100%;height:100%;overflow:hidden;background:#000;}
body{
  font-family:'Courier New',monospace;
  font-weight:bold;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--cream);
  -webkit-user-select:none;user-select:none;
  touch-action:none;
}
#stage{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:#000;
}
#game{
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  background:#000;
}

/* ---------- Overlay screens ---------- */
.screen{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:14px;padding:24px;text-align:center;
  background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.35) 0 8px,rgba(0,0,0,.5) 8px 16px),
    linear-gradient(160deg,#2a2348 0%,#1a1c2c 60%,#10121f 100%);
  z-index:20;
}
.screen.hidden,#touch.hidden{display:none;}
.screen h1{
  font-size:clamp(30px,9vw,68px);line-height:.95;color:var(--gold);
  text-shadow:4px 4px 0 #000,8px 8px 0 var(--gold-dk);
}
.screen h2{
  font-size:clamp(26px,7vw,52px);color:var(--cyan);
  text-shadow:3px 3px 0 #000;
}
.kicker{color:var(--olive-lt);font-size:clamp(13px,3.4vw,18px);}
.tag{color:var(--cream);font-size:clamp(13px,3.6vw,20px);max-width:560px;opacity:.95;}
.tool,.coins{color:var(--gold);font-size:clamp(14px,3.8vw,22px);}
.hint{color:#9aa;font-size:clamp(10px,2.8vw,14px);text-transform:none;letter-spacing:0;margin-top:6px;}
.gate{color:var(--red);font-size:clamp(12px,3.2vw,16px);min-height:1.2em;text-transform:none;}

/* ---------- Blocky buttons ---------- */
button{
  font-family:inherit;font-weight:bold;text-transform:uppercase;
  cursor:pointer;color:var(--black);
  background:var(--gold);
  border:0;border-bottom:5px solid var(--gold-dk);
  box-shadow:0 0 0 3px #000, 4px 4px 0 3px #000;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;
}
button:active{transform:translateY(2px);border-bottom-width:3px;}
.big{font-size:clamp(18px,5vw,30px);padding:12px 34px;margin-top:6px;}
.lil{font-size:clamp(11px,3vw,15px);padding:6px 14px;background:#555;border-bottom-color:#222;color:#fff;text-transform:none;}

/* ---------- Shop: sea-monster keeper + item photo ---------- */
#shopStage{
  display:flex;align-items:center;gap:10px;
  width:100%;max-width:560px;flex-wrap:wrap;justify-content:center;
}
#shopKeeper{
  flex:0 0 auto;width:84px;height:84px;
  image-rendering:pixelated;image-rendering:crisp-edges;
  background:linear-gradient(180deg,#0a3340,#03101a);
  border:3px solid #000;border-radius:8px;
}
#shopSpeech{
  flex:1 1 200px;min-width:0;align-self:stretch;
  display:flex;align-items:center;
  position:relative;text-align:left;
  background:rgba(255,255,255,0.94);color:#10121f;
  border:3px solid #000;border-radius:10px;
  padding:8px 11px;
  text-transform:none;letter-spacing:0;line-height:1.25;
  font-size:clamp(11px,2.9vw,15px);
}
#shopSpeech:after{ /* little tail pointing at the keeper */
  content:'';position:absolute;left:-11px;top:24px;
  border:6px solid transparent;border-right-color:#000;
}
#photoWrap{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;}
#shopPhoto{
  width:72px;height:72px;
  image-rendering:pixelated;image-rendering:crisp-edges;
  background:rgba(0,0,0,0.4);
  border:3px solid var(--gold);border-radius:8px;
}
#photoLabel{font-size:clamp(9px,2.4vw,12px);color:var(--gold);max-width:80px;}

/* ---------- Shop list ---------- */
#shopList{
  display:flex;flex-direction:column;gap:8px;
  width:100%;max-width:520px;max-height:52vh;overflow-y:auto;
  padding:4px;
}
.shop-row{
  display:flex;align-items:center;gap:10px;
  background:rgba(0,0,0,.45);
  border:3px solid #000;border-left:6px solid var(--olive);
  padding:8px 10px;text-align:left;
}
.shop-row.req{border-left-color:var(--red);}
.shop-row .info{flex:1;min-width:0;}
.shop-row .nm{color:var(--gold);font-size:clamp(13px,3.4vw,17px);}
.shop-row .ds{color:#cdd;font-size:clamp(10px,2.6vw,13px);text-transform:none;letter-spacing:0;}
.shop-row button{
  font-size:clamp(12px,3vw,15px);padding:8px 12px;white-space:nowrap;
  box-shadow:0 0 0 2px #000,3px 3px 0 2px #000;
}
.shop-row button.owned{background:var(--olive-lt);border-bottom-color:var(--olive);}
.shop-row button.cant{background:#777;border-bottom-color:#444;color:#ddd;}

/* ---------- Touch controls ---------- */
#touch{position:absolute;inset:0;z-index:10;pointer-events:none;}
#dpad{
  position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));
  width:168px;height:168px;
}
.pad{
  position:absolute;width:56px;height:56px;pointer-events:auto;
  font-size:22px;color:#000;background:rgba(242,195,60,.82);
  border:0;border-radius:8px;box-shadow:0 0 0 3px #000;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
}
.pad:active{background:var(--gold);}
.pad.up{left:56px;top:0;}
.pad.left{left:0;top:56px;}
.pad.right{left:112px;top:56px;}
.pad.down{left:56px;top:112px;}
#actionBtn{
  position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom));
  width:104px;height:104px;border-radius:50%;pointer-events:auto;
  font-size:18px;color:#fff;background:rgba(210,59,47,.88);
  border:0;box-shadow:0 0 0 4px #000;
  touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
}
#actionBtn:active{background:var(--red);transform:scale(.94);}

/* Hide touch controls on devices that clearly aren't touch (desktop) only
   if no touch — handled in JS; keep CSS minimal. */