/* ── AirNormies shared theme — Normies monochrome, pixel UI ──────────── */
@font-face{ font-family:"Robotastic"; src:url("fonts/robotastic.ttf") format("truetype"); font-display:swap; }

:root{
  /* only shades of the original Normie colors (#e3e5e4 ink-light / #48494b ink) */
  --bg:#1a1b1c; --ink:#e3e5e4; --ink-strong:#f5f6f6; --muted:#9a9c9e;
  --line:#3a3c3e; --surface:#26282a; --surface-2:#202224; --white:#fff;
  --canvas:#e3e5e4; --board:#202224;
  --accent:#e3e5e4;        /* light = "active/highlight" on the dark UI */
  --accent-strong:#f5f6f6;
  --on-accent:#1a1b1c;     /* text on a light accent fill */
  --hi:#9a9c9e;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display:"Robotastic",var(--sans);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);overflow:hidden}

.app{display:flex;flex-direction:column;height:100vh;padding:14px;gap:10px}

header{flex:0 0 auto;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
h1{font-family:var(--display);font-size:1.8rem;font-weight:400;letter-spacing:.02em;color:var(--ink-strong);text-transform:uppercase}
.sub{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.legend{font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.legend b{color:var(--ink-strong);font-weight:700}
.badge{font-family:var(--mono);font-size:.66rem;color:var(--muted);border:1px solid var(--line);padding:.3rem .5rem;letter-spacing:.04em}
.status{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--line);padding:.35rem .6rem;white-space:pre-line;text-align:right}

.stage{flex:1 1 auto;display:flex;align-items:stretch;gap:12px;min-height:0;position:relative}
#screen{flex:1 1 auto;display:flex;align-items:stretch;gap:12px;min-width:0;min-height:0;width:100%}

/* ── Pixel tiles (dwell targets) ─────────────────────────────────────── */
.tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-family:var(--sans);font-weight:700;font-size:.64rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:0;padding:4px;
  transition:background .1s,border-color .1s,box-shadow .1s,color .1s;user-select:none;cursor:default
}
.tile .ic{line-height:0;color:var(--ink)}
.tile .ic svg{width:1.5em;height:1.5em;display:block}
.tile[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.tile[aria-pressed="true"] .ic{color:var(--on-accent)}
.tile:disabled{opacity:.4}
.tile.hot{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.tile.fire{background:var(--accent-strong);color:var(--on-accent);border-color:var(--accent-strong)}
.tile.fire .ic{color:var(--on-accent)}

/* command rails */
.rail{flex:0 0 116px;display:flex;flex-direction:column;gap:8px;min-height:0}
.rail .tile{flex:1 1 0}

/* ── Home launcher grid ──────────────────────────────────────────────── */
.launch{flex:1 1 auto;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:12px;min-height:0;width:100%}
.tile.big{gap:8px;box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.tile.big .ic svg{width:2.6em;height:2.6em}
.tile.big .lb{font-family:var(--display);font-weight:400;font-size:1rem;letter-spacing:.03em}
.tile.big .dsc{font-family:var(--mono);font-size:.6rem;color:var(--muted);text-transform:none;letter-spacing:0}

/* ── Centered canvas / board ─────────────────────────────────────────── */
.center{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.art-wrap{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.gcanvas{height:100%;width:auto;max-width:100%;aspect-ratio:1;image-rendering:pixelated;
  background:var(--canvas);border:2px solid var(--line);box-shadow:0 0 0 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45)}
.gcanvas.board{background:var(--board);image-rendering:auto}

/* ── Normie Maker traits panel ───────────────────────────────────────── */
.traits{flex:0 0 220px;display:flex;flex-direction:column;gap:4px;overflow:auto;padding:6px;font-family:var(--mono);font-size:.72rem}
.traits .thead{font-family:var(--display);font-weight:400;text-transform:uppercase;color:var(--ink-strong);font-size:1rem;margin-bottom:4px}
.traits .trow{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding:4px 2px;color:var(--muted)}
.traits .trow b{color:var(--ink)}

/* ── NormieCam preview (corner PiP) ──────────────────────────────────── */
.cam-wrap{flex:0 0 auto;height:88px;aspect-ratio:4/3;pointer-events:none;
  position:relative;border:2px solid var(--line);overflow:hidden;background:var(--surface)}
.cam-wrap.pip{position:absolute;right:14px;bottom:14px;height:92px;z-index:6}
#cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);z-index:0}
#feed{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:1;background:var(--surface)}

/* ── Paint slots overlay ─────────────────────────────────────────────── */
#pslots{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
  background:rgba(26,27,28,.94);backdrop-filter:blur(2px)}
.slots-box{display:flex;flex-direction:column;gap:14px;align-items:center;max-width:92%}
.slots-head{font-family:var(--display);font-weight:400;text-transform:uppercase;color:var(--ink-strong);font-size:1.1rem}
.slots-grid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:780px}
.slot-item{display:flex;flex-direction:column;gap:6px;width:150px}
.slot{flex:0 0 auto;width:150px;height:168px}
.slot .thumb{width:130px;height:130px;image-rendering:pixelated;border:2px solid var(--line);background:var(--canvas)}
.slot-del{flex:0 0 auto;width:150px;height:40px;color:var(--muted)}
.slot-close{flex:0 0 auto;width:160px;height:54px}
.empty{font-family:var(--mono);font-size:.82rem;color:var(--muted);padding:1rem}

/* ── Start overlay (the only tap) ────────────────────────────────────── */
#startOverlay{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(26,27,28,.92);backdrop-filter:blur(2px)}
#btnStart{font-family:var(--display);font-weight:400;font-size:1.2rem;letter-spacing:.02em;text-transform:uppercase;
  color:var(--on-accent);background:var(--accent);border:2px solid var(--accent);padding:1rem 1.7rem;cursor:pointer;box-shadow:5px 5px 0 rgba(0,0,0,.5)}
#btnStart:hover{background:var(--accent-strong)}
#startOverlay .hint{font-family:var(--mono);font-size:.72rem;color:var(--muted);max-width:460px;text-align:center;line-height:1.6}

/* ── Global air cursor ───────────────────────────────────────────────── */
#aircursor{position:fixed;z-index:9999;width:22px;height:22px;transform:translate(-50%,-50%);
  pointer-events:none;opacity:0;border:2px solid var(--accent);background:transparent;--p:0}
#aircursor.draw{background:var(--accent);box-shadow:0 0 0 5px rgba(227,229,228,.25)}
#aircursor.erase{background:transparent;border-style:dashed;box-shadow:0 0 0 5px rgba(227,229,228,.15)}
#aircursor .ring{position:absolute;inset:-9px;border-radius:50%;opacity:0;
  background:conic-gradient(var(--accent) calc(var(--p)*360deg), rgba(227,229,228,.14) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);
          mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0)}
#aircursor.dwelling .ring{opacity:1}