/* FILTH®LAND — ink #0a0a0a, bone #f2efe8, red #e21e2b, blue #1268b3.
   Palette read from the live Shopify theme. */
@font-face{
  font-family:"VCR OSD Mono";
  src:url("assets/fonts/VCR_OSD_MONO.ttf") format("truetype");
  font-weight:normal;font-style:normal;font-display:swap;
}
:root{
  --ink:#0a0a0a; --bone:#f2efe8; --red:#e21e2b; --blue:#1268b3;
  --line:#4a4a47; --dim:rgba(242,239,232,.55);
  /* phosphor: the same tube the shift clock in the office runs on */
  --p-bg:#04120a; --p-dim:#1f9c5a; --p:#5dffa0; --p-hot:#b9ffd0;
  --mono:"VCR OSD Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* The page is viewport-fit=cover, so 100vh runs behind the Dynamic Island
     and the home indicator. Everything pinned to an edge reads these instead
     of a raw pixel offset — otherwise the close button sits under the island
     and cannot be tapped. Named so they can be overridden when testing. */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);
  color:var(--bone);font-family:var(--mono);-webkit-tap-highlight-color:transparent}
canvas#stage{display:block;width:100%;height:100%;touch-action:none}

/* ---------- boot ---------- */
#boot{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;
  justify-content:flex-start;transition:opacity .5s;
  padding:var(--sat) var(--sar) calc(5vh + var(--sab)) calc(5vw + var(--sal));
  pointer-events:none;   /* the backdrop must not swallow HUD clicks */
  background:radial-gradient(ellipse at 55% 45%,transparent 30%,rgba(3,4,6,.82) 100%)}
.boot-card{pointer-events:auto}
#boot.gone{opacity:0;pointer-events:none}
/* the clock-in station is the same tube as the shift clock on the wall */
.boot-card{width:min(90vw,436px);padding:24px 22px;text-align:left;overflow:hidden}
.boot-mark{font-size:40px;font-weight:400;letter-spacing:1px;line-height:1;
  color:var(--p-hot);text-shadow:0 0 12px rgba(93,255,160,.6)}
.boot-sub{margin-top:10px;font-size:11px;letter-spacing:.2em;color:var(--p-dim)}
.boot-copy{font-size:13px;line-height:1.7;color:var(--p);margin:18px 0 20px;
  position:relative;z-index:2}
#enter{width:100%;display:flex;justify-content:space-between;align-items:center;
  gap:10px;padding:15px 18px;border:1px solid var(--p);background:transparent;
  color:var(--p-hot);font:400 14px/1 var(--mono);letter-spacing:.16em;
  cursor:pointer;min-height:54px;position:relative;z-index:4;
  text-shadow:0 0 8px rgba(93,255,160,.7)}
#enter[disabled]{border-color:rgba(31,156,90,.5);color:var(--p-dim);
  cursor:progress;text-shadow:none}
/* once the floor is staged the button pulses like the clock does */
#enter:not([disabled]){animation:clockin 1.5s ease-in-out infinite}
@keyframes clockin{
  0%,100%{background:rgba(93,255,160,.08);box-shadow:0 0 0 rgba(93,255,160,0)}
  50%{background:rgba(93,255,160,.2);box-shadow:0 0 22px rgba(93,255,160,.25)}}
#enter:not([disabled]):hover{background:var(--p);color:#03150c;text-shadow:none;
  animation:none}
#enter-pct{opacity:.8}
.boot-keys{margin-top:14px;font-size:11px;letter-spacing:.14em;color:var(--p-dim);
  position:relative;z-index:2}

/* ---------- reticle + hint ---------- */
#reticle{position:fixed;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;
  border-radius:50%;background:rgba(242,239,232,.5);z-index:10;pointer-events:none;
  transition:transform .12s,background .12s}
#reticle.hot{background:var(--red);transform:scale(2.1)}
#hint{position:fixed;left:50%;top:calc(50% + 26px);transform:translateX(-50%);
  z-index:10;pointer-events:none;font-size:11px;letter-spacing:.13em;
  padding:6px 12px;background:rgba(10,10,10,.72);border:1px solid var(--line);
  opacity:0;transition:opacity .15s;white-space:nowrap;max-width:88vw;
  overflow:hidden;text-overflow:ellipsis}
#hint.on{opacity:1}

/* ---------- pick-list button ---------- */
#hud-buttons{position:fixed;right:calc(14px + var(--sar));top:calc(14px + var(--sat));
  z-index:45;display:flex;gap:8px}
#shop-btn,#clockin-btn,#manifest-btn,#inventory-btn{min-height:44px;
  padding:11px 15px;border:1px solid var(--p-dim);background:rgba(4,18,10,.85);
  color:var(--p);font:400 12px/1 var(--mono);letter-spacing:.2em;cursor:pointer;
  text-shadow:0 0 7px rgba(93,255,160,.75);box-shadow:0 0 16px rgba(93,255,160,.13) inset}
#shop-btn:hover,#manifest-btn:hover,#inventory-btn:hover,#clockin-btn:hover{color:var(--p-hot);border-color:var(--p);
  box-shadow:0 0 22px rgba(93,255,160,.3) inset,0 0 14px rgba(93,255,160,.2)}
#manifest-btn>*,#inventory-btn>*,#clockin-btn>*{pointer-events:none}
/* The way out to the real store. It is an anchor, not a button, so it behaves
   like a link — new tab, so the floor is still here when they come back — and
   it reads dimmer than the in-world controls because it leaves the room. */
#shop-btn{display:flex;align-items:center;text-decoration:none;
  border-color:rgba(31,156,90,.55);color:var(--p-dim)}
/* Only on the loader, and only once the floor is staged. Opening the terminal
   from the back office folds the big boot card away — this is what is left of
   it, so you can still start the shift without closing what you were reading. */
#clockin-btn{display:none;background:rgba(93,255,160,.12);color:var(--p-hot)}
body.in-office #clockin-btn{display:block}
#clockin-btn[disabled]{opacity:.4;cursor:progress}
#clockin-btn:not([disabled]){animation:clockin 1.5s ease-in-out infinite}
/* the card steps aside while the terminal is up */
/* While the panel is up it owns the screen. Leaving the HUD on top of it is
   how the close button ends up behind something on a phone, and those buttons
   do nothing useful while the panel is open anyway. */
body.terminal-open #hud-buttons{display:none}
body.in-office.terminal-open .boot-card{display:none}
body.in-office.terminal-open #boot{background:none;pointer-events:none}

/* ---------- the terminal ----------
   One window for the whole catalogue: the list on the left, the selected piece
   on the right with its real photography and data. Nothing leaves the site
   except the buy link, and that is a deliberate act. */
.crt{position:relative;border:1px solid var(--p-dim);
  background:
    radial-gradient(ellipse at 50% 45%,rgba(93,255,160,.07),transparent 72%),
    var(--p-bg);
  box-shadow:0 0 0 3px #0a0d0b,0 0 26px rgba(93,255,160,.14),
             0 0 60px rgba(0,0,0,.7),inset 0 0 44px rgba(0,0,0,.72);
  color:var(--p);text-shadow:0 0 6px rgba(93,255,160,.55)}
.crt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,.28) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%)}

#terminal{position:fixed;left:50%;transform:translate(-50%,-50%);
  /* centred in the SAFE area, not the viewport: shift by half the difference
     between the insets, then cap the height to what is actually visible */
  top:calc(50% + (var(--sat) - var(--sab)) / 2);
  z-index:46;width:min(94vw,940px);height:min(80dvh,640px);
  max-height:calc(100dvh - var(--sat) - var(--sab) - 20px);
  max-width:calc(100vw - var(--sal) - var(--sar) - 16px);
  display:none;flex-direction:column;overflow:hidden}
#terminal.on{display:flex;animation:crt-on .22s ease-out}
@keyframes crt-on{from{opacity:0;transform:translate(-50%,-50%) scaleY(.84)}
  to{opacity:1;transform:translate(-50%,-50%) scaleY(1)}}

.tm-head{display:flex;align-items:center;gap:12px;padding:11px 13px;
  border-bottom:1px solid var(--p-dim);font-size:12px;letter-spacing:.18em;
  color:var(--p-hot);background:rgba(93,255,160,.07);flex:0 0 auto}
.tm-title{flex:1}
.tm-count{color:var(--p-dim)}
#tm-back{position:absolute;left:10px;top:10px;z-index:8;display:none;
  border:1px solid var(--p-dim);background:rgba(4,18,10,.85);color:var(--p);
  font:400 10px/1 var(--mono);letter-spacing:.14em;padding:8px 10px;cursor:pointer}
#terminal.card-only #tm-back{display:block}
/* PICK LIST: just the list, narrow — you are choosing where to walk */
#terminal.pick-mode:not(.card-only){width:min(94vw,460px);height:min(70dvh,520px)}
#terminal.pick-mode:not(.card-only) .tm-detail{display:none}
#terminal.pick-mode:not(.card-only) .tm-body{grid-template-columns:1fr}
#terminal.pick-mode:not(.card-only) .tm-list{border-right:0}
#terminal.card-only .tm-list{display:none}
#terminal.card-only .tm-body{grid-template-columns:1fr}
#terminal.card-only{width:min(94vw,560px)}
#tm-close{position:relative;z-index:9;width:32px;height:28px;border:0;background:transparent;color:var(--p-dim);
  font:400 20px/1 var(--mono);cursor:pointer;z-index:7;position:relative}
#tm-close:hover{color:var(--p-hot)}

.tm-body{flex:1;display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);
  min-height:0}
.tm-list{overflow-y:auto;border-right:1px solid rgba(31,156,90,.4);
  scrollbar-width:thin;scrollbar-color:var(--p-dim) transparent}
.row{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;
  width:100%;padding:9px 12px;border:0;border-bottom:1px solid rgba(31,156,90,.24);
  background:transparent;color:var(--p);font:400 11.5px/1.35 var(--mono);
  text-align:left;cursor:pointer;text-shadow:inherit}
.row:hover{background:rgba(93,255,160,.1);color:var(--p-hot)}
.row.sel{background:var(--p);color:#03150c;text-shadow:none}
.row.sel .bin,.row.sel .pr{color:#03150c}
.bin{color:var(--p-dim);font-size:11px}
.pr{color:var(--p-hot);letter-spacing:.04em}
.row.seen .nm::after{content:" ✓";color:var(--p-dim)}
.row.out{opacity:.34;cursor:not-allowed}

/* position:relative so the back button anchors HERE and not to the window,
   where it lands on top of the title */
.tm-detail{position:relative;display:grid;
  grid-template-rows:minmax(0,42%) minmax(0,1fr) auto;min-height:0}
.tm-shot{min-height:0;display:grid;place-items:center;position:relative;
  z-index:7;background:#12140f;border-bottom:1px solid rgba(31,156,90,.3);
  padding:10px;overflow:hidden}
/* The shot keeps TRUE COLOUR — this is the shop, the colourway has to be
   trustworthy. It still reads as a screen, but through a neutral CRT dither
   rather than the phosphor tint the rest of the terminal wears. The grid row
   is the size constraint; max-height alone lets a square shot overflow. */
.tm-shot img{width:100%;height:100%;min-height:0;object-fit:contain}
.tm-shot::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,.20) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(to right,
      rgba(0,0,0,.10) 0 1px, transparent 1px 2px);
  mix-blend-mode:multiply}
.tm-meta{padding:14px 16px 10px;overflow-y:auto;min-height:0;
  scrollbar-width:thin;scrollbar-color:var(--p-dim) transparent}
#tm-name{font-size:13px;letter-spacing:.08em;line-height:1.45;color:var(--p-hot)}
#tm-price{margin-top:6px;font-size:24px;color:var(--p-hot)}
#tm-avail{margin-top:4px;font-size:10.5px;letter-spacing:.14em;color:var(--p-dim)}
#tm-specs{margin:12px 0 0;display:grid;grid-template-columns:64px 1fr;
  gap:4px 10px;font-size:10.5px;line-height:1.5}
#tm-specs dt{color:var(--p-dim);letter-spacing:.12em}
#tm-specs dd{margin:0;color:var(--p)}
#tm-desc{margin:12px 0 0;font-size:11px;line-height:1.65;color:var(--p)}
.tm-actions{display:grid;grid-template-columns:1fr 1fr;gap:1px;z-index:7;
  border-top:1px solid var(--p-dim);background:var(--p-bg)}
#tm-goto,#tm-buy{display:block;padding:15px 10px;min-height:50px;border:0;
  text-align:center;text-decoration:none;font:400 11px/1.7 var(--mono);
  letter-spacing:.14em;cursor:pointer}
#tm-goto{background:rgba(93,255,160,.14);color:var(--p-hot)}
#tm-goto:hover{background:rgba(93,255,160,.28)}
#tm-buy{background:var(--bone);color:var(--ink);text-shadow:none}
#tm-buy:hover{background:var(--red);color:var(--bone)}
/* A phone held sideways gives the panel about 240px of height. At the desktop
   proportions the shot eats half of it and the action row lands on top of the
   name and price. Give the copy the room and put the chrome on a diet. */
@media (max-height:560px){
  .tm-detail{grid-template-rows:minmax(0,34%) minmax(0,1fr) auto}
  .tm-meta{padding:9px 12px 8px}
  #tm-name{font-size:11px}
  #tm-price{font-size:18px;margin-top:3px}
  #tm-avail{margin-top:2px}
  #tm-specs{margin-top:8px}
  #tm-desc{margin-top:8px}
  #tm-goto,#tm-buy{padding:10px 8px;min-height:42px;font-size:10px;line-height:1.4}
  .tm-head{padding:7px 10px}
  .tm-foot{display:none}
}

.tm-foot{padding:8px 13px;border-top:1px solid var(--p-dim);font-size:10px;
  letter-spacing:.12em;color:var(--p-dim);flex:0 0 auto}

/* ---------- walk stick (touch) ----------
   Same phosphor tube as the terminal: a ring with a lit knob. Hidden until a
   coarse pointer actually shows up, so it never appears on a desktop. */
/* The one-time orientation line, across the top under the HUD row so it can
   never sit on those buttons. It is a read, not a control: pointer-events off
   so it cannot swallow a tap on the canvas underneath. */
#welcome{position:fixed;left:0;right:0;top:calc(var(--sat) + 70px);z-index:44;
  display:none;flex-direction:column;align-items:center;gap:5px;
  padding:12px 16px 22px;pointer-events:none;text-align:center;
  font:400 12px/1.5 var(--mono);letter-spacing:.2em;color:var(--p-hot);
  text-shadow:0 0 9px rgba(93,255,160,.55);
  background:linear-gradient(to bottom,rgba(4,18,10,.9) 0%,rgba(4,18,10,.6) 55%,rgba(4,18,10,0) 100%);
  opacity:0;transition:opacity .5s ease}
#welcome.on{display:flex;opacity:1}
/* both classes are on during the fade — outrank .on rather than lean on order */
#welcome.on.out{opacity:0}
.wc-nav{color:var(--p-dim);font-size:10px;letter-spacing:.14em}
@media (max-width:640px){
  #welcome{top:calc(var(--sat) + 66px);font-size:10px;letter-spacing:.14em;
    padding:10px 14px 18px}
  .wc-nav{font-size:8.5px;letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){ #welcome{transition:opacity .01s} }

#stick{position:fixed;left:calc(18px + var(--sal));bottom:calc(18px + var(--sab));
  z-index:21;width:124px;height:124px;
  border-radius:50%;display:none;place-items:center;touch-action:none;
  box-shadow:0 0 0 2px #0a0d0b,0 0 20px rgba(93,255,160,.14),
             inset 0 0 30px rgba(0,0,0,.7)}
body.touch #stick{display:grid}
#stick::after{border-radius:50%}
#stick-ring{position:absolute;inset:16px;border:1px solid rgba(93,255,160,.32);
  border-radius:50%}
#stick-knob{position:relative;z-index:4;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--p);background:rgba(93,255,160,.16);
  box-shadow:0 0 14px rgba(93,255,160,.4);
  transform:translate(0,0);transition:transform .06s linear}
#stick.on #stick-knob{background:rgba(93,255,160,.34);
  box-shadow:0 0 22px rgba(93,255,160,.65)}
#stick-label{position:absolute;bottom:9px;z-index:4;font:400 9px/1 var(--mono);
  letter-spacing:.22em;color:var(--p-dim)}

/* ---------- reticle + hint, same tube ---------- */
#hint{border-color:var(--p-dim);background:rgba(4,18,10,.8);color:var(--p);
  text-shadow:0 0 6px rgba(93,255,160,.5);font-size:12px}
#reticle.hot{background:var(--p-hot);box-shadow:0 0 10px rgba(93,255,160,.9)}

@media (max-width:640px){
  /* on a phone the terminal stacks: the piece first, its list under it */
  #terminal{width:calc(100vw - 16px);height:min(84dvh,700px)}
  .tm-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,38%)}
  .tm-list{border-right:0;border-top:1px solid rgba(31,156,90,.4);order:2}
  .tm-detail{order:1}
  .tm-shot{height:38%;min-height:130px}
  .tm-head{font-size:9.5px;letter-spacing:.1em;padding:9px 10px}
  .row{grid-template-columns:26px 1fr auto;gap:7px;padding:8px 10px;
    font-size:10px;line-height:1.3}
  .bin{font-size:9px}
  .tm-foot{font-size:8.5px;letter-spacing:.06em;padding:7px 10px}
  #tm-name{font-size:11.5px}
  #tm-price{font-size:20px}
  #tm-desc{font-size:10.5px}
  #hint{font-size:10px}
  /* the exit has to be reachable with a thumb, not just visible */
  #tm-close{width:44px;height:40px;font-size:22px}
  .tm-head{padding-right:4px}
  /* the card is an overlay on a place, not the page: keep the office visible */
  .boot-card{padding:16px 15px}
  .boot-mark{font-size:26px}
  .boot-sub{font-size:9px;letter-spacing:.14em;margin-top:7px}
  .boot-copy{font-size:10.5px;line-height:1.55;margin:12px 0 14px}
  #enter{padding:13px 14px;min-height:48px;font-size:12px}
  .boot-keys{font-size:8.5px;margin-top:10px;letter-spacing:.1em}
  #boot{padding:0 0 3vh 3vw}
  #manifest-btn,#inventory-btn{font-size:9px;padding:9px 10px}
  /* keep the card clear of the stick */
  #card{bottom:158px}
  #stick{width:112px;height:112px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}