/* Device housings for the STACKSWORTH simulator (used by index.html and embed.html). */

/* ---------- wood + print textures ---------- */
:root {
  /* fine noise that turns flat gradients into wood fibre */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.22' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.05 0 0 0 0 0 0 0 0 -0.7 0.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- CORE ---------- */
.core-device {
  --w: 100%;
  position: relative;
  width: var(--w);
  max-width: 620px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
}
.core-shell {
  position: relative;
  aspect-ratio: 670 / 470;
  border-radius: 9% / 13%;
  padding: 3.4%;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.75), 0 8px 18px rgba(0,0,0,.45), inset 0 2px 1px rgba(255,255,255,.12), inset 0 -3px 6px rgba(0,0,0,.4);
  /* Black Walnut enclosure (hardwood editions) */
  background:
    var(--grain),
    repeating-linear-gradient(178deg, rgba(0,0,0,.18) 0 2px, transparent 2px 7px, rgba(255,220,180,.05) 7px 9px, transparent 9px 15px),
    linear-gradient(180deg, #5b3a27, #3d2618 60%, #2e1c12);
  background-blend-mode: multiply, normal, normal;
}
.core-face {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 7% / 10%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 3px 8px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.08);
  background-blend-mode: multiply, normal, normal;
}
.case-mahogany .core-face {
  background:
    var(--grain),
    repeating-linear-gradient(176deg, rgba(90,30,10,.22) 0 3px, transparent 3px 11px, rgba(255,200,150,.10) 11px 13px, transparent 13px 22px),
    linear-gradient(160deg, #c27a47, #a85f33 45%, #b46c3d 70%, #8f4d29);
}
.case-purpleheart .core-face {
  background:
    var(--grain),
    repeating-linear-gradient(177deg, rgba(40,0,30,.25) 0 2px, transparent 2px 9px, rgba(255,170,220,.08) 9px 11px, transparent 11px 19px),
    linear-gradient(160deg, #8f2f6a, #74204f 50%, #85295e 75%, #5e1a40);
}
.case-padauk .core-face {
  background:
    var(--grain),
    repeating-linear-gradient(175deg, rgba(60,0,0,.25) 0 3px, transparent 3px 10px, rgba(255,160,120,.08) 10px 12px, transparent 12px 20px),
    linear-gradient(160deg, #9e2c22, #7f1e19 50%, #932820 75%, #66160f);
}
/* Standard edition: matte black 3D-printed PLA with visible layer lines */
.case-standard .core-shell {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2a2a2d, #18181a 70%, #111113);
}
.case-standard .core-face {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #232326, #1a1a1c);
}

.screw {
  position: absolute;
  width: 3.4%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #6b5a4c, #2a211a 55%, #120d09);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 1px 1px rgba(255,255,255,.12);
  transform: translate(-50%, -50%);
}
.screw::after { content: ""; position: absolute; inset: 32%; border-radius: 50%; background: #0c0907; }
.screw.s1 { left: 9.7%; top: 21.5%; } .screw.s2 { left: 90.3%; top: 21.5%; }
.screw.s3 { left: 9.7%; top: 78.5%; } .screw.s4 { left: 90.3%; top: 78.5%; }

.core-bezel {
  position: absolute;
  left: 50%; top: 50%;
  width: 55%;
  transform: translate(-50%, -50%);
  background: #05070b;
  padding: 1.6% 1.6% 1.6%;
  border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.6), inset 0 0 0 1px #1b2230;
}
.core-screen {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: pointer;
  touch-action: pan-y;
  border-radius: 1px;
}
.core-screen:focus-visible { outline: 3px solid #f7931a; outline-offset: 4px; }
.core-bezel::after { /* glass reflection */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 3px;
  background: linear-gradient(125deg, rgba(255,255,255,.07), transparent 38%);
}
.core-stand {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 64%;
  height: 13%;
  display: flex; align-items: center; justify-content: center; gap: 3%;
  background: linear-gradient(180deg, #2b2b2e, #18181a);
  border-radius: 4px 4px 2px 2px;
  box-shadow: 0 12px 20px -8px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
  color: #0d0d0e;
  font: 800 clamp(9px, 3.4cqi, 22px)/1 "Poppins", system-ui, sans-serif;
  letter-spacing: .12em;
  text-shadow: 0 1px 0 rgba(255,255,255,.09);
  container-type: inline-size;
}
.core-device { container-type: inline-size; }
.core-stand { font-size: clamp(8px, 3.6cqi, 22px); }
.core-stand .hex {
  display: inline-grid; place-items: center;
  width: 1.4em; height: 1.4em;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: #0d0d0e; color: #2a2a2d; letter-spacing: 0; font-size: 1em;
}

/* ---------- MATRIX ---------- */
.mx-device {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  container-type: inline-size;
}
.mx-body {
  position: relative;
  aspect-ratio: 424 / 144;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #4a4b50, #36373b 60%, #2b2c30);
  clip-path: polygon(3.5% 0, 96.5% 0, 100% 10%, 100% 90%, 96.5% 100%, 3.5% 100%, 0 90%, 0 10%);
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.6));
}
.mx-panel {
  position: absolute;
  left: 4.7%; right: 4.7%;
  top: 13%;
  aspect-ratio: 4 / 1;
  background: #141416;
  box-shadow: inset 0 0 0 1px #000, 0 0 0 2px #222;
}
.mx-screen { display: block; width: 100%; height: 100%; cursor: pointer; }
.mx-hatch {
  position: absolute; bottom: 4%; width: 17%; height: 11%;
  background: repeating-linear-gradient(115deg, #d9d6cf 0 2px, transparent 2px 6px);
  opacity: .8;
}
.mx-hatch.l { left: 5%; } .mx-hatch.r { right: 5%; }
.mx-top {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 51%; height: 9%;
  z-index: 2;
  background: linear-gradient(180deg, #f4efe2, #e2dccb);
  border-radius: 3px;
  box-shadow: 0 3px 6px rgba(0,0,0,.35);
  display: flex; flex-direction: column; justify-content: center; gap: 12%; padding: 0 12%;
}
.mx-top i { display: block; height: 2px; background: #3b3b3b; border-radius: 1px; }
.mx-top i:nth-child(2) { margin: 0 4%; }
.mx-label {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 51%; height: 14%;
  background: linear-gradient(180deg, #f4efe2, #e0d9c6);
  border-radius: 3px;
  box-shadow: 0 6px 10px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; gap: 3%;
  font: 800 clamp(12px, 5cqi, 40px)/1 "Poppins", system-ui, sans-serif;
  letter-spacing: .08em; color: #2a2a2a;
}
.mx-label b { font-size: .7em; }

/* Spacers sized from the device's own width (padding % on the device itself
   would be measured from its parent, which breaks when max-width kicks in). */
.core-device::after { content: ""; display: block; padding-bottom: 7%; }
.mx-device::before { content: ""; display: block; padding-top: 3.2%; }
.mx-device::after { content: ""; display: block; padding-bottom: 7.5%; }
/* stretch the grain noise over the whole panel so its tile seam never shows */
.core-shell, .core-face { background-size: 100% 100%, auto, auto !important; }
.case-standard .core-shell, .case-standard .core-face { background-size: auto !important; }