/* ============================================================
   MERION HQ — Pixel Kit
   Cozy office-game UI built on Merion brand tokens.
   Gunmetal base + Cyan primary + one neon per team/office.
   ============================================================ */

/* ---- Fonts (loaded via <link> in host HTML) ---- */
:root{
  --font-display:"Press Start 2P", monospace;
  --font-ui:"Pixelify Sans", monospace;
  --font-tag:"Silkscreen", monospace;

  /* Surfaces — deep gunmetal layers */
  --bg0:#05100f;          /* behind everything */
  --bg1:#0a1f22;          /* panel base */
  --bg2:#0f2b30;          /* raised panel */
  --bg3:#14383d;          /* hover / inset highlight */
  --line:#02090a;         /* hard outer border / pixel shadow */
  --bevel:#1f5057;        /* inner bevel highlight */
  --bevel-soft:#16424a;

  /* Brand accents (Merion) */
  --cyan:#00ffd4;
  --cyan-dim:#31a592;
  --cyan-deep:#0a3b38;

  /* Solution neons → team identities */
  --lime:#d4ff00;
  --pink:#ed145b;
  --violet:#7c5bff;     /* lifted from #5F37FF for dark legibility */
  --orange:#ff8c00;
  --magenta:#ff3df0;

  /* Text */
  --text:#eef6f5;
  --muted:#82a3a4;
  --dim:#4f7174;

  /* Warm office / wood from the sprite pack */
  --wood:#8a5a3b;
  --wood-dark:#5e3b24;
  --tan:#d6a679;
  --tan-dark:#b9824f;
  --desk:#e6cf9c;

  --accent:var(--cyan);   /* overridable per frame/team via inline style */
}

*{box-sizing:border-box;}
img{image-rendering:pixelated;image-rendering:crisp-edges;}

/* ---- App canvas ---- */
.px-app{
  font-family:var(--font-ui);
  color:var(--text);
  background:
    radial-gradient(120% 80% at 50% -10%, #0d2a2e 0%, var(--bg0) 60%),
    var(--bg0);
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
  letter-spacing:.2px;
}
/* scanline + dither texture */
.px-app::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 2px, rgba(0,0,0,0) 2px 4px);
  mix-blend-mode:multiply;opacity:.55;
}
.px-app::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:51;
  box-shadow:inset 0 0 120px 20px rgba(0,0,0,.55);
}

/* ---- Typography helpers ---- */
.px-display{font-family:var(--font-display);line-height:1.35;letter-spacing:0;}
.px-tag{font-family:var(--font-tag);text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:var(--muted);}
.px-num{font-variant-numeric:tabular-nums;}
.px-h{font-family:var(--font-display);font-size:13px;color:var(--text);}
.px-muted{color:var(--muted);}
.px-accent{color:var(--accent);}

/* ---- Panel (chunky pixel frame) ---- */
.px-panel{
  position:relative;
  background:var(--bg1);
  border:3px solid var(--line);
  box-shadow:
    inset 0 0 0 2px var(--bevel-soft),
    inset 0 3px 0 0 rgba(255,255,255,.04),
    5px 5px 0 0 rgba(0,0,0,.5);
  border-radius:0;
}
.px-panel.raised{background:var(--bg2);}
.px-panel.flush{box-shadow:inset 0 0 0 2px var(--bevel-soft);}

.px-panel-hd{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  border-bottom:3px solid var(--line);
  background:linear-gradient(var(--bg2),var(--bg1));
}
.px-panel-hd .ttl{font-family:var(--font-display);font-size:11px;letter-spacing:0;}
.px-panel-bd{padding:14px;}

/* ---- Buttons ---- */
.px-btn{
  font-family:var(--font-ui);font-weight:600;font-size:15px;
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:9px 16px 11px;
  color:#04201c;
  background:var(--accent);
  border:3px solid var(--line);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.45),
    inset -3px -3px 0 rgba(0,0,0,.28),
    4px 4px 0 0 var(--line);
  cursor:pointer;border-radius:0;white-space:nowrap;
  transition:transform .04s steps(2), box-shadow .04s steps(2);
  text-shadow:none;
}
.px-btn:hover{filter:brightness(1.08);}
.px-btn:active{
  transform:translate(3px,3px);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.4),inset -3px -3px 0 rgba(0,0,0,.3),1px 1px 0 0 var(--line);
}
.px-btn.ghost{
  color:var(--text);background:var(--bg2);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.06),inset -3px -3px 0 rgba(0,0,0,.4),4px 4px 0 0 var(--line);
}
.px-btn.ghost:hover{background:var(--bg3);filter:none;}
.px-btn.sm{font-size:13px;padding:6px 11px 8px;box-shadow:inset 2px 2px 0 rgba(255,255,255,.4),inset -2px -2px 0 rgba(0,0,0,.28),3px 3px 0 0 var(--line);}
.px-btn.block{width:100%;}

/* ---- Pills / chips ---- */
.px-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px 6px;
  background:var(--bg2);
  border:2px solid var(--line);
  box-shadow:inset 0 0 0 1px var(--bevel-soft);
  font-size:13px;font-weight:500;white-space:nowrap;
}
.px-pill.coin{color:var(--lime);}
.px-pill .px-num{font-weight:700;}

/* dot status */
.px-dot{width:9px;height:9px;border-radius:0;display:inline-block;box-shadow:0 0 0 2px var(--line), 0 0 8px currentColor;}
.live .px-dot,.px-dot.on{color:var(--lime);background:var(--lime);}
.px-dot.busy{color:var(--orange);background:var(--orange);}
.px-dot.off{color:var(--dim);background:var(--dim);box-shadow:0 0 0 2px var(--line);}

/* ---- Sprite img ---- */
.spr{display:block;image-rendering:pixelated;}

/* ---- Pixel progress / XP bar ---- */
.px-bar{
  height:14px;background:var(--bg0);
  border:2px solid var(--line);box-shadow:inset 0 0 0 1px var(--bevel-soft);
  padding:2px;display:flex;gap:2px;overflow:hidden;
}
.px-bar > i{flex:1;background:var(--accent);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.25);}
.px-bar > i.off{background:#0c2226;box-shadow:none;}

/* ---- Team neon helpers ---- */
.t-cyan{--accent:var(--cyan);}
.t-lime{--accent:var(--lime);}
.t-pink{--accent:var(--pink);}
.t-violet{--accent:var(--violet);}
.t-orange{--accent:var(--orange);}

/* avatar */
.px-ava{
  width:34px;height:34px;display:grid;place-items:center;
  font-family:var(--font-display);font-size:11px;color:#04201c;
  background:var(--accent);border:3px solid var(--line);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.4),inset -2px -2px 0 rgba(0,0,0,.3);
}

/* scroll feed */
.px-feed{display:flex;flex-direction:column;gap:0;}
.px-feed > .row{display:flex;gap:10px;align-items:center;padding:9px 4px;border-bottom:2px dashed #123238;}
.px-feed > .row:last-child{border-bottom:0;}

/* live blink */
@keyframes px-blink{0%,60%{opacity:1}61%,100%{opacity:.25}}
.px-blink{animation:px-blink 1.1s steps(1) infinite;}
@keyframes px-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.px-bob{animation:px-bob 1.6s steps(3) infinite;}

/* selection ring on world tiles */
.px-ring{outline:3px solid var(--accent);outline-offset:2px;}

/* ============================================================
   EXTRA COMPONENTS — form controls + game pieces
   ============================================================ */

/* Switch */
.px-switch{width:54px;height:26px;background:var(--bg0);border:3px solid var(--line);
  box-shadow:inset 0 0 0 1px var(--bevel-soft);position:relative;cursor:pointer;padding:0;display:block;}
.px-switch .knob{position:absolute;left:2px;top:2px;width:16px;height:16px;background:var(--muted);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.4),inset -2px -2px 0 rgba(0,0,0,.35);
  transition:left .08s steps(3),background .08s;}
.px-switch.on{background:color-mix(in srgb,var(--accent) 28%,var(--bg0));}
.px-switch.on .knob{left:32px;background:var(--accent);}

/* Checkbox + Radio */
.px-check,.px-radio{width:22px;height:22px;background:var(--bg0);border:3px solid var(--line);
  box-shadow:inset 0 0 0 1px var(--bevel-soft);position:relative;cursor:pointer;flex:0 0 auto;display:inline-block;}
.px-radio{border-radius:50%;}
.px-check.on{background:var(--accent);}
.px-check .ck{position:absolute;left:4px;top:8px;width:3px;height:3px;background:var(--bg0);opacity:0;
  box-shadow:3px 3px 0 var(--bg0),6px 0 0 var(--bg0),9px -3px 0 var(--bg0),12px -6px 0 var(--bg0);}
.px-check.on .ck{opacity:1;}
.px-radio.on{background:color-mix(in srgb,var(--accent) 22%,var(--bg0));}
.px-radio .dot{position:absolute;inset:4px;background:var(--accent);border-radius:50%;opacity:0;}
.px-radio.on .dot{opacity:1;}
.px-optrow{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer;white-space:nowrap;}

/* Input + Select */
.px-input{display:flex;align-items:center;gap:8px;background:var(--bg0);border:3px solid var(--line);
  box-shadow:inset 0 0 0 1px var(--bevel-soft);padding:7px 10px;font-family:var(--font-ui);}
.px-input input{background:transparent;border:0;outline:0;color:var(--text);font-family:var(--font-ui);
  font-size:14px;width:100%;}
.px-input input::placeholder{color:var(--dim);}
.px-input:focus-within{box-shadow:inset 0 0 0 2px var(--accent),0 0 10px color-mix(in srgb,var(--accent) 40%,transparent);}
.px-select{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;}
.px-select .car{color:var(--muted);font-size:12px;}

/* Slider */
.px-slider{height:24px;display:flex;align-items:center;cursor:pointer;position:relative;}
.px-slider .track{height:12px;width:100%;background:var(--bg0);border:2px solid var(--line);
  box-shadow:inset 0 0 0 1px var(--bevel-soft);position:relative;}
.px-slider .fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4);}
.px-slider .knob{position:absolute;top:50%;width:16px;height:22px;background:var(--accent);
  border:3px solid var(--line);transform:translate(-50%,-50%);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.4),inset -2px -2px 0 rgba(0,0,0,.3);}

/* Stepper */
.px-stepper{display:inline-flex;align-items:stretch;border:3px solid var(--line);background:var(--bg0);box-shadow:3px 3px 0 var(--line);}
.px-stepper button{width:34px;background:var(--bg2);border:0;color:var(--text);font-family:var(--font-display);
  font-size:12px;cursor:pointer;}
.px-stepper button:hover{background:var(--bg3);color:var(--accent);}
.px-stepper .val{min-width:48px;display:grid;place-items:center;font-family:var(--font-ui);font-weight:700;
  font-size:15px;border-left:3px solid var(--line);border-right:3px solid var(--line);}

/* Tabs */
.px-tabs{display:inline-flex;border:3px solid var(--line);background:var(--bg0);box-shadow:3px 3px 0 var(--line);}
.px-tab{padding:7px 14px;font-family:var(--font-ui);font-weight:600;font-size:13.5px;color:var(--muted);
  cursor:pointer;border-right:3px solid var(--line);background:transparent;}
.px-tab:last-child{border-right:0;}
.px-tab.on{background:var(--accent);color:#04201c;text-shadow:none;}

/* Toast */
.px-toast{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg2);
  border:3px solid var(--line);box-shadow:4px 4px 0 var(--line);position:relative;}
.px-toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent);}
.px-toast .x{margin-left:6px;color:var(--muted);cursor:pointer;font-weight:700;}
.px-toast .x:hover{color:var(--text);}

/* Dialog */
.px-dialog{width:300px;background:var(--bg1);border:3px solid var(--line);
  box-shadow:inset 0 0 0 2px var(--bevel-soft),6px 6px 0 rgba(0,0,0,.5);}
.px-dialog .hd{display:flex;align-items:center;gap:8px;padding:9px 11px;background:linear-gradient(var(--bg2),var(--bg1));
  border-bottom:3px solid var(--line);}
.px-dialog .hd .ttl{font-family:var(--font-display);font-size:10px;}
.px-dialog .hd .x{margin-left:auto;width:20px;height:20px;display:grid;place-items:center;background:var(--bg0);
  border:2px solid var(--line);color:var(--muted);cursor:pointer;font-weight:700;font-size:12px;}
.px-dialog .hd .x:hover{color:var(--pink);}
.px-dialog .bd{padding:13px;}

/* Slot (achievement / shop) */
.px-slot{width:66px;height:66px;display:grid;place-items:center;background:var(--bg0);border:3px solid var(--line);
  box-shadow:inset 0 0 0 2px var(--bevel-soft),inset 3px 3px 0 rgba(0,0,0,.4);position:relative;}
.px-slot.lit{box-shadow:inset 0 0 0 2px var(--accent),inset 0 0 14px color-mix(in srgb,var(--accent) 40%,transparent);}
.px-ach{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;width:110px;}
.px-ach.locked .px-slot{filter:grayscale(1);}
.px-ach.locked img{opacity:.35;}
.px-ach .lock{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;background:var(--bg2);
  border:2px solid var(--line);display:grid;place-items:center;font-size:10px;color:var(--muted);}

/* Shop item */
.px-shop{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;width:130px;}

/* Energy pips (diamonds) */
.px-energy{display:inline-flex;align-items:center;gap:6px;}
.px-energy .pip{width:13px;height:13px;background:var(--accent);transform:rotate(45deg);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.4),0 0 0 2px var(--line);}
.px-energy .pip.off{background:var(--bg0);box-shadow:inset 0 0 0 1px var(--bevel-soft),0 0 0 2px var(--line);}

/* Speech bubble */
.px-speech{position:relative;background:var(--bg2);border:3px solid var(--line);
  box-shadow:inset 0 0 0 2px var(--bevel-soft),4px 4px 0 rgba(0,0,0,.45);padding:11px 13px;font-size:14px;line-height:1.5;}
.px-speech::after{content:"";position:absolute;left:24px;bottom:-13px;width:14px;height:14px;background:var(--bg2);
  border-right:3px solid var(--line);border-bottom:3px solid var(--line);rotate:45deg;}
.px-speech .who{color:var(--accent);font-weight:700;}