/* ================= MACHINE WRAPS =================

   HOW THESE ARE BUILT.

   1 · A WRAP IS A SHAPE BEFORE IT IS A COLOUR.
   The first version of this file said the header band was the billboard and
   the wrap's job was to paint it. That was the frame-decorating mistake in a
   new costume, and it produced ten machines that differed only in hue — all of
   them the same rounded rectangle with the same disc on top and the same pale
   window in the middle. Colour alone was never going to make a Game Boy read
   as a Game Boy.

   So a wrap now redraws FIVE surfaces, and each of the five differs across all
   ten: the SILHOUETTE (.kbody's border-radius), the HEADPIECE (.pokedisc, no
   longer a disc), the SCREEN BEZEL (.kscreen — the frame of the biggest thing
   on the machine, and identical on all ten until now), the HARDWARE (.kcam and
   .kreader) and the TRAY. _tests/wraps.test.js asserts no two wraps share any
   of them, because "does this look good" is not testable and "have these
   collapsed back into one object" is exactly what went wrong.

   Border-radius rather than clip-path for the outline: a clip cuts the
   box-shadow off, and the glow around these cabinets is half the look.

   2 · NOTHING TOUCHES `.mscreen`.
   The screen is the shop, the cart, the catalogue and the pack opening. A wrap
   that tinted it would be something you look THROUGH to use the machine.

   3 · HARD EDGES, EVERY TIME.
   Facets, bars, pixels, cracks, silhouettes, guilloché, awning scallops. Not
   one soft radial blend does structural work in this file. A smooth gradient is
   the surface a computer makes and a printer cannot, and a page full of them is
   why the last two attempts read as generated.

   4 · GOLD NEEDS BLACK. See 24 Karat. Gold on gold is caution tape.
*/

/* ---------- the effects layer ----------
   BEHIND EVERYTHING. The binder shipped its fx at z-index 5 once and put a
   white sweep straight across the card faces; the same mistake here would put
   it across the catalogue. So the layer sits at 0 and the cabinet's children
   are lifted to 2, which means the light shows exactly where light physically
   falls on a machine — in the header, down the margins, around the tray — and
   stops dead at the glass.

   The lift is declared HERE rather than in machine.css so the whole stacking
   decision reads in one place. A z-index in one file that only makes sense
   because of a z-index in another is how the binder got this wrong. */
.mwfx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  border-radius:inherit;contain:paint}
.mwfx>i,.mwfx>b{position:absolute;display:block}
.kbody>.kmain,.kbody>.cartbar{position:relative;z-index:2}
.kbody>.ktray{z-index:2}
/* THE HEADPIECE COUNTS AS MOTION TOO. Both rules used to name `.mwfx>i` only,
   which was correct while every moving part lived in the fx layer. MissingNo.'s
   block twitches on `.pokedisc`, and the crest is a direct child of .kbody —
   outside the fx layer, so a tab in the background would have kept animating it
   and prefers-reduced-motion would not have stopped it. Anything that moves has
   to be named in both places; that is what the selector list is for. */
body.skin-paused .mwfx>i,
body.skin-paused .kiosk[class*="mw-"] .pokedisc{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .mwfx>i,
  .kiosk[class*="mw-"] .pokedisc{animation:none!important}
}

/* ---------- GEOMETRY THAT SURVIVES BEING SHRUNK ----------
   The shop preview and the rail chip draw the same cabinet at 158px and 58px.
   They used to do that by RE-SPECIFYING the geometry — `.up-mach .kbody` set
   its own border-radius, `.up-mach .pokedisc` its own width — and both of those
   are (0,2,0), the same weight as `.mw-gameboy .kbody`, sitting later in the
   file. So the preview won, every wrap got the same corners and the same disc,
   and the identity this whole file exists to create was thrown away in the one
   place people shop for it.

   Absolute pixels are the reason it had to. A 54px corner is right on a 410px
   cabinet and absurd on a 58px chip, so something has to scale — the fix is to
   let it scale rather than be overwritten. Each wrap declares its shape in
   variables; the shared rule multiplies them by --rs / --ps; and the small
   renderers set nothing but that multiplier.

   One source of truth per shape, and a preview that cannot flatten it. */
.kiosk .kbody{
  --r1:46px;--r2:46px;--r3:30px;--r4:30px;--rs:1;
  border-radius:calc(var(--r1)*var(--rs)) calc(var(--r2)*var(--rs))
                calc(var(--r3)*var(--rs)) calc(var(--r4)*var(--rs))}
.kiosk .pokedisc{
  --pw:116px;--ph:116px;--pt:-56px;--ps:1;
  width:calc(var(--pw)*var(--ps));height:calc(var(--ph)*var(--ps));
  top:calc(var(--pt)*var(--ps))}
/* The side hardware gets the same treatment for the same reason. A wrap that
   turns .kcam into a 34px D-pad is pointless if the preview pins it back to 5px
   square — and a D-pad is the one thing on a Game Boy nobody would accept
   missing, so the scale has to reach the hardware too. */
.kiosk .kcam{
  --cw:12px;--ch:12px;--cs:1;
  width:calc(var(--cw)*var(--cs));height:calc(var(--ch)*var(--cs))}
.kiosk .kreader{
  --kw:40px;--kh:120px;--ks:1;
  width:calc(var(--kw)*var(--ks));height:calc(var(--kh)*var(--ks))}

/* the header billboard: the band the crest sits in, and the main canvas */
.kbody::before{content:'';position:absolute;left:0;right:0;top:0;height:72px;
  border-radius:44px 44px 0 0;pointer-events:none;z-index:1}
/* the print texture, on every wrap at once.
   A two-layer dot screen at 3px, offset from itself, in overlay. Trading cards
   and machine vinyl are both PRINTED — they carry a rosette you can see with a
   loupe — and this is the single cheapest thing that stops eight flat colour
   fields from looking like eight flat colour fields. */
.kbody::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  border-radius:inherit;
  background:
    radial-gradient(circle at 1px 1px,rgba(0,0,0,.26) .55px,transparent 1.1px) 0 0/3px 3px,
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.15) .55px,transparent 1.1px) 1.5px 1.5px/3px 3px;
  mix-blend-mode:overlay;opacity:.75}

/* printed marks — DOT MATRIX, 999.9 FINE, the grade on a slab.
   Real text rather than a `content:` string so it can be read, selected and
   translated, and so Certified can build its label out of your actual trophy. */
.mw-mark{font-family:'Bebas Neue',Outfit,sans-serif;letter-spacing:.16em;
  line-height:1;white-space:nowrap;z-index:1}

/* ============================================================
   TEN OBJECTS, NOT TEN PAINT JOBS
   ============================================================
   v283 shipped ten wraps that were rejected as "mid", and the diagnosis is the
   same one the binder skins earned twice — it just wore a new costume.

   Every wrap repainted the SAME OBJECT. Same rounded rectangle, same disc of
   the same size in the same place, same pale screen filling the middle, same
   side column, same dark tray. Ten of the same machine in ten colourways. The
   binder lesson was "the cover is the art, not the frame"; the machine version
   of that is THE CABINET IS THE ART, and a cabinet is a shape before it is a
   colour. Colour alone was never going to make a Game Boy read as a Game Boy.

   So each wrap now owns five things, and each of the five is different on all
   ten. That is the whole rewrite:

     1 · SILHOUETTE   .kbody's border-radius. A Game Boy's asymmetric
                      bottom-right corner IS a Game Boy; nothing else needed.
                      Radius rather than clip-path, because a clip kills the
                      box-shadow and the glow around these is half the look.
     2 · HEADPIECE    .pokedisc. It is not a Poké Ball any more, it is whatever
                      belongs on top of THIS object — a cartridge, a thatched
                      roof, a milled coin, a torn glitch block. It sits outside
                      the cabinet's clip, so it is allowed to overhang.
     3 · SCREEN BEZEL .kscreen. The window is the biggest element on the whole
                      machine and its FRAME was identical on all ten, which is
                      what flattened them more than anything else. The screen
                      contents are still never touched.
     4 · HARDWARE     .kcam and .kreader. A/B buttons, a hanging street sign, a
                      lava vent, a cert barcode.
     5 · TRAY         .ktray. A speaker grille, a hollow log, a furnace mouth.

   The rules that survive unchanged, because they were never the problem:
   nothing touches .mscreen, motion is transform/opacity on .mwfx only, and
   every pattern is hard-edged — no soft radial blends.
   ============================================================ */

/* ============================================================
   1 · ORIGINAL — free
   The machine as it has always been. It declares no fx, so the wrap most
   people are running costs nothing: no node, no layer, no animation frame.
   Values live in machine.css; the only rule here turns off the shared
   billboard band, because the original never had one.
   ============================================================ */
.mw-original .kbody::before{display:none}

/* ============================================================
   2 · POKÉ MART — $2,500
   A SHOPFRONT. What makes one read as a shopfront in one glance is the AWNING,
   so the headpiece stops being a disc and becomes one: wider than the cabinet,
   overhanging both sides, with a hard scalloped hem cut by a repeating radial.
   Scallops are the one thing a gradient cannot fake.
   ============================================================ */
.mw-pokemart .kbody{
  --r1:12px;--r2:12px;--r3:22px;--r4:22px;
  background:linear-gradient(175deg,#fbfdff,#eaf0fa 55%,#dbe4f3);
  border-color:#2f7fe0;
  box-shadow:0 0 10px #2f7fe0aa,0 0 30px #2f7fe055,0 0 70px #2f7fe028,
             0 26px 60px rgba(0,0,0,.6),inset 0 2px 8px #ffffffcc,inset 0 -12px 26px #00000018}
/* the sign band under the awning */
.mw-pokemart .kbody::before{
  height:56px;border-radius:11px 11px 0 0;
  background:linear-gradient(180deg,#2f7fe0 0 62%,#1e5fbf 62% 100%);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.16)}
/* ---- the awning ---- */
.mw-pokemart .pokedisc{
  --ph:44px;--pt:-30px;width:114%;left:-7%;transform:none;border-radius:6px 6px 0 0;
  border:none;
  background:
    radial-gradient(circle at 11px 0,#1e5fbf 10px,transparent 10.5px) 0 100%/22px 11px repeat-x,
    repeating-linear-gradient(90deg,#2f7fe0 0 22px,#f4f8ff 22px 44px);
  box-shadow:0 8px 18px rgba(0,0,0,.45),inset 0 3px 0 rgba(255,255,255,.45)}
/* the round shop sign hung on the awning */
.mw-pokemart .pokedisc::after{
  width:38px;height:38px;inset:auto;left:50%;top:9px;margin:0 0 0 -19px;
  border-radius:50%;border:3px solid #0e1a30;
  background:linear-gradient(180deg,#fff 0 46%,#0e1a30 46% 56%,#2f7fe0 56% 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.5)}
/* a shopfront window: white frame, glass, and the light strip along its head */
.mw-pokemart .kscreen{
  background:#f7faff;padding:9px;border-radius:5px;
  box-shadow:0 4px 18px rgba(0,0,0,.3),inset 0 0 0 3px #2f7fe0,inset 0 0 0 9px #f7faff,
             inset 0 6px 12px rgba(47,127,224,.18)}
.mw-pokemart .kcam{background:#2f7fe0;box-shadow:0 0 8px #2f7fe0,0 0 0 2px #dbe4f3}
/* the sliding automatic door */
.mw-pokemart .kreader{
  background:linear-gradient(90deg,#cfe0f7 0 46%,#2f7fe0 46% 54%,#cfe0f7 54% 100%);
  border-color:#1e5fbf;border-radius:4px;
  box-shadow:0 0 8px #2f7fe066,inset 0 0 0 2px #f7faff}
.mw-pokemart .kreader::before{top:8px;left:4px;right:4px;height:3px;background:#1e5fbf;box-shadow:none}
.mw-pokemart .kreader::after{bottom:8px;left:50%;width:10px;height:3px;border-radius:1px;background:#1e5fbf}
/* the tiled shop floor at the threshold */
.mw-pokemart .ktray{
  border-color:#2f7fe0;border-radius:6px;
  background:repeating-conic-gradient(#e8eefb 0 25%,#c3d3ec 0 50%) 0 0/22px 22px;
  box-shadow:0 0 10px #2f7fe055,inset 0 5px 14px rgba(0,0,0,.28)}
.mw-pokemart .mw-sweep{top:0;height:56px;left:0;width:34%;
  background:linear-gradient(104deg,transparent,rgba(255,255,255,.55) 48%,transparent);
  animation:mwSweep 7s ease-in-out infinite}
@keyframes mwSweep{0%,64%{transform:translate3d(-140%,0,0)}100%{transform:translate3d(340%,0,0)}}
.mw-pokemart .mw-awn{top:56px;left:5%;right:5%;height:24px;
  background:linear-gradient(180deg,rgba(47,127,224,.34),transparent);
  animation:mwGlowPulse 4.4s ease-in-out infinite}
@keyframes mwGlowPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ============================================================
   3 · GAME BOY — $9,000
   v289's attempt "looked nothing like a Game Boy", and it didn't: a pale
   green-grey box with a tab on top, a huge WHITE window, and two pink dots.
   Three things were missing and all three are the whole design.

   THE D-PAD. Nobody draws a Game Boy without one. It is the first thing your
   eye looks for and there wasn't one anywhere.

   THE BEZEL HAS TO SWALLOW THE SCREEN. On a DMG the LCD is a small greenish
   panel sunk into a large charcoal surround — the surround is most of the top
   half of the machine. Here the product window is white and enormous, and the
   window is the shop so it cannot be tinted or shrunk much. So the bezel is
   built out of LAYERED INSET RINGS instead: charcoal, then a lighter step,
   then the shadow well. That reads as 20mm of plastic while only costing 7mm
   of actual width.

   THE COLOUR IS GREY, NOT GREEN. The green belongs to the screen and the glow.
   A green BODY is a Game Boy Pocket at best and a bar of soap at worst.
   ============================================================ */
.mw-gameboy .kbody{
  --r1:14px;--r2:14px;--r3:62px;--r4:14px;
  background:
    /* the shell's moulded seam, down both sides */
    linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,transparent 2px 6px),
    linear-gradient(270deg,rgba(0,0,0,.12) 0 2px,transparent 2px 6px),
    linear-gradient(168deg,#d8d5c6,#c2bfae 52%,#a5a291);
  border-color:#8b9a2b;
  box-shadow:0 0 10px #9bbc0f66,0 0 30px #9bbc0f33,0 0 70px #9bbc0f18,
             0 26px 60px rgba(0,0,0,.6),
             inset 0 3px 0 rgba(255,255,255,.7),inset 0 -5px 0 rgba(90,88,74,.5)}
/* the top edge: power switch and its OFF·ON ticks */
.mw-gameboy .kbody::before{
  height:34px;border-radius:13px 13px 0 0;
  background:
    linear-gradient(90deg,transparent 0 12%,#7e7c6b 12% 13%,transparent 13% 16%,
                    #7e7c6b 16% 17%,transparent 17%),
    linear-gradient(180deg,#cfccbd 0 62%,#a8a595 62% 70%,#cfccbd 70% 100%);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.16)}
/* ---- the cartridge, seated in the slot ---- */
.mw-gameboy .pokedisc{
  --pw:96px;--ph:44px;--pt:-30px;
  border-radius:5px 5px 2px 2px;border:2px solid #3b3a2e;
  background:
    /* the two grip notches down the sides */
    linear-gradient(90deg,#3b3a2e 0 6%,transparent 6% 11%,#3b3a2e 11% 17%,transparent 17%),
    linear-gradient(270deg,#3b3a2e 0 6%,transparent 6% 11%,#3b3a2e 11% 17%,transparent 17%),
    linear-gradient(180deg,#8f8b76 0 26%,#6f6c5b 26% 100%);
  box-shadow:0 7px 16px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.28)}
/* the cartridge label */
.mw-gameboy .pokedisc::after{
  width:58px;height:20px;inset:auto;left:50%;top:7px;margin:0 0 0 -29px;
  border-radius:1px;border:1px solid #3b3a2e;
  background:linear-gradient(180deg,#e9e4cf 0 46%,#c8c2a8 46% 100%);
  box-shadow:none}
/* THE BEZEL, built from rings so it reads deep without eating the shop */
.mw-gameboy .kscreen{
  background:linear-gradient(180deg,#4c5044,#33362d);
  padding:14px 13px 26px;border-radius:8px 8px 30px 8px;
  box-shadow:
    inset 0 0 0 2px #23261f,          /* the moulding line */
    inset 0 0 0 9px #40443a,          /* the raised surround */
    inset 0 0 0 11px #23261f,         /* the step down to the glass */
    inset 0 6px 14px rgba(0,0,0,.55),
    0 5px 20px rgba(0,0,0,.55)}
/* ---- THE D-PAD, which is the whole point ----
   Two bars crossed with background-size, so it is one element with no pseudos
   left to spend and it scales with --cs rather than being pinned in pixels. */
.mw-gameboy .kcam{
  --cw:38px;--ch:38px;border-radius:6px;
  background:
    linear-gradient(#33362d,#33362d) center/100% 34% no-repeat,
    linear-gradient(#33362d,#33362d) center/34% 100% no-repeat;
  box-shadow:0 2px 0 rgba(90,88,74,.6)}
/* A and B, raked the way they actually sit */
.mw-gameboy .kreader{
  --kw:40px;--kh:56px;
  background:none;border:none;box-shadow:none;transform:rotate(-25deg)}
.mw-gameboy .kreader::before{
  top:2px;left:auto;right:-2px;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(180deg,#b0356f,#7d1f4b);
  box-shadow:0 3px 0 #4e1230,inset 0 2px 0 rgba(255,255,255,.35)}
.mw-gameboy .kreader::after{
  bottom:auto;top:28px;left:-2px;transform:none;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(180deg,#b0356f,#7d1f4b);
  box-shadow:0 3px 0 #4e1230,inset 0 2px 0 rgba(255,255,255,.35)}
/* the raked speaker grille, six slots, bottom right like the real thing */
.mw-gameboy .ktray{
  border-color:#8b9a2b;border-radius:6px 6px 30px 6px;
  background:
    repeating-linear-gradient(-28deg,#8b8874 0 4px,transparent 4px 13px) right/46% 100% no-repeat,
    linear-gradient(180deg,#c8c5b6,#aeab9b);
  box-shadow:0 0 10px #9bbc0f33,inset 0 3px 0 rgba(255,255,255,.5),
             inset 0 -3px 0 rgba(90,88,74,.45)}
/* the LCD's own scanline, stepped because a pixel does not interpolate */
.mw-gameboy .mw-scan{left:0;right:0;top:0;height:12px;
  background:linear-gradient(180deg,rgba(155,188,15,.45),transparent);
  animation:mwScan 3.4s steps(24,end) infinite}
@keyframes mwScan{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,1200%,0)}}
.mw-gameboy .mw-dmg{inset:0;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.05) 0 2px,transparent 2px 4px)}
.mw-gameboy .mw-dmgmark{left:50%;top:40px;transform:translateX(-50%);
  font-size:7px;color:#7d1f4b;opacity:.9}

/* ============================================================
   4 · SAFARI ZONE — $30,000
   The concept survived review; the execution was called boring, and it was —
   a flat brown box with a small roof on it. Flat brown is the problem. A hut
   is made of things: planks with gaps between them, a beam, lashings, a roof
   with actual straw in it. So the body gets real seams with dark shadow in
   them, the roof gets depth and a ridge, and the whole thing sits in grass.
   ============================================================ */
.mw-safari .kbody{
  --r1:8px;--r2:8px;--r3:18px;--r4:18px;
  background:
    /* plank seams: a dark gap and a lit top edge, so the boards have thickness */
    repeating-linear-gradient(180deg,
      rgba(255,222,170,.16) 0 2px,transparent 2px 4px,
      transparent 4px 30px,rgba(0,0,0,.34) 30px 34px),
    /* the vertical corner posts */
    linear-gradient(90deg,#4f3517 0 14px,transparent 14px),
    linear-gradient(270deg,#4f3517 0 14px,transparent 14px),
    linear-gradient(172deg,#a9793f,#8c5f2c 55%,#6f4a20);
  border-color:#3ddc84;
  box-shadow:0 0 10px #3ddc8477,0 0 30px #3ddc8438,0 0 70px #3ddc841c,
             0 26px 60px rgba(0,0,0,.6),inset 0 2px 8px #ffd9a055,inset 0 -12px 26px #00000044}
/* the lashed crossbeam under the eaves, with rope whipping */
.mw-safari .kbody::before{
  height:38px;border-radius:7px 7px 0 0;
  background:
    repeating-linear-gradient(58deg,rgba(0,0,0,.28) 0 3px,transparent 3px 9px),
    repeating-linear-gradient(90deg,#5c3d1a 0 26px,#7a5327 26px 30px),
    #6b4722;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.35),inset 0 2px 0 rgba(255,214,150,.25)}
/* ---- the thatch: deeper, with strands, a ridge beam and a shadow under it ---- */
.mw-safari .pokedisc{
  --ph:64px;--pt:-46px;width:126%;left:-13%;transform:none;border:none;border-radius:0;
  background:
    /* the ridge along the peak */
    linear-gradient(180deg,#6b4722 0 7px,transparent 7px),
    /* straw, raked two ways so it is not a stripe pattern */
    repeating-linear-gradient(172deg,#d9a955 0 3px,#b8873a 3px 6px,#976c28 6px 9px),
    repeating-linear-gradient(8deg,rgba(0,0,0,.18) 0 2px,transparent 2px 11px);
  clip-path:polygon(0 56%,5% 0,95% 0,100% 56%,
    97% 56%,95.5% 100%,93% 56%,90% 56%,88.5% 94%,86% 56%,83% 56%,81.5% 100%,79% 56%,
    76% 56%,74.5% 90%,72% 56%,69% 56%,67.5% 100%,65% 56%,62% 56%,60.5% 92%,58% 56%,
    55% 56%,53.5% 100%,51% 56%,48% 56%,46.5% 88%,44% 56%,41% 56%,39.5% 100%,37% 56%,
    34% 56%,32.5% 94%,30% 56%,27% 56%,25.5% 100%,23% 56%,20% 56%,18.5% 90%,16% 56%,
    13% 56%,11.5% 100%,9% 56%,6% 56%,4.5% 96%,2% 56%);
  box-shadow:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
/* the Safari Ball nailed to the gable */
.mw-safari .pokedisc::after{
  width:38px;height:38px;inset:auto;left:50%;top:9px;margin:0 0 0 -19px;border-radius:50%;
  border:3px solid #2c1c08;
  background:
    linear-gradient(90deg,transparent 0 42%,#2c1c08 42% 46%,transparent 46% 54%,#2c1c08 54% 58%,transparent 58%),
    linear-gradient(180deg,#7fa53f 0 44%,#2c1c08 44% 56%,#d9c9a4 56% 100%);
  box-shadow:0 3px 8px rgba(0,0,0,.6)}
/* a shuttered window, rope-lashed at the corners */
.mw-safari .kscreen{
  background:linear-gradient(180deg,#7a5327,#5c3d1a);
  padding:11px;border-radius:3px;
  box-shadow:
    inset 0 0 0 2px #c99a4a,
    inset 0 0 0 4px #4f3517,
    inset 0 0 0 11px #8c5f2c,
    inset 0 0 0 13px #4f3517,
    inset 0 4px 10px rgba(0,0,0,.4),
    0 5px 18px rgba(0,0,0,.5)}
/* the warden's lantern, actually lit */
.mw-safari .kcam{
  --cw:20px;--ch:24px;border-radius:3px 3px 5px 5px;
  background:linear-gradient(180deg,#4f3517 0 18%,#ffd97a 18% 82%,#4f3517 82% 100%);
  box-shadow:0 0 16px #ffbe3d,0 0 0 1px #2c1c08}
/* a carved signpost with two routed grooves */
.mw-safari .kreader{
  background:
    linear-gradient(90deg,transparent 0 20%,rgba(0,0,0,.3) 20% 24%,transparent 24% 76%,rgba(0,0,0,.3) 76% 80%,transparent 80%),
    repeating-linear-gradient(180deg,#8c5f2c 0 9px,#7a5327 9px 18px);
  border-color:#3ddc84;border-radius:2px;
  box-shadow:0 0 8px #3ddc8455,inset 0 0 0 2px #4f3517}
.mw-safari .kreader::before{top:11px;left:3px;right:3px;height:6px;border-radius:1px;
  background:#c99a4a;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.mw-safari .kreader::after{bottom:11px;left:50%;width:14px;height:6px;border-radius:1px;background:#c99a4a}
/* a hollow log, with the grain running round the bore */
.mw-safari .ktray{
  border-color:#3ddc84;border-radius:26px;
  background:
    radial-gradient(ellipse 56% 84% at 50% 50%,#1a0f03 0 40%,#3a2409 40% 46%,transparent 48%),
    repeating-linear-gradient(90deg,#8c5f2c 0 4px,#6f4a20 4px 11px);
  box-shadow:0 0 10px #3ddc8444,inset 0 5px 16px rgba(0,0,0,.6),
             inset 0 -3px 0 rgba(255,214,150,.18)}
/* grass along the base, drawn as hard blades */
.mw-safari .mw-grass{left:0;right:0;bottom:0;height:34px;
  background:repeating-linear-gradient(84deg,#2f8a4f 0 3px,transparent 3px 9px),
             repeating-linear-gradient(96deg,#3ddc84 0 2px,transparent 2px 11px);
  clip-path:polygon(0 100%,0 62%,3% 22%,6% 66%,9% 8%,12% 60%,15% 30%,18% 70%,21% 12%,
    24% 58%,27% 34%,30% 66%,33% 6%,36% 62%,39% 26%,42% 70%,45% 14%,48% 56%,51% 32%,
    54% 68%,57% 10%,60% 60%,63% 28%,66% 72%,69% 16%,72% 58%,75% 36%,78% 64%,81% 8%,
    84% 62%,87% 24%,90% 68%,93% 14%,96% 60%,100% 30%,100% 100%);
  opacity:.9}
.mw-safari .mw-leaf{width:14px;height:14px;border-radius:0 100% 0 100%;background:#3ddc84;opacity:.8}
.mw-safari .mw-leaf.l1{left:8%;top:38%;animation:mwLeaf 9s linear infinite}
.mw-safari .mw-leaf.l2{right:11%;top:24%;animation:mwLeaf 11s linear infinite 2.4s}
@keyframes mwLeaf{
  0%{transform:translate3d(0,-24px,0) rotate(0);opacity:0}
  12%{opacity:.85}
  88%{opacity:.85}
  100%{transform:translate3d(26px,300px,0) rotate(300deg);opacity:0}
}
.mw-safari .mw-fly{width:5px;height:5px;border-radius:50%;background:#ffe98a;
  box-shadow:0 0 10px #ffd23d,0 0 20px #ffbe3d}
.mw-safari .mw-fly.f1{left:18%;top:56%;animation:mwFly 6.5s ease-in-out infinite}
.mw-safari .mw-fly.f2{right:22%;top:70%;animation:mwFly 8s ease-in-out infinite 1.6s}
.mw-safari .mw-fly.f3{left:44%;bottom:16%;animation:mwFly 7.2s ease-in-out infinite 3.1s}
@keyframes mwFly{
  0%,100%{transform:translate3d(0,0,0);opacity:.15}
  50%{transform:translate3d(18px,-26px,0);opacity:1}
}

/* ============================================================
   5 · GLACIER — $75,000
   Called bland, and it deserved it: pale blue on pale blue, every edge the
   same value as the one next to it, so none of the facets or icicles read at
   all. Ice is not pale — a glacier is DEEP blue with white where it has been
   fractured, and the contrast between the two is the entire material.

   So the body goes dark teal, everything structural is near-white, and the
   icicles hang off a rim that is a different value from the thing they hang
   from. Same shapes as before; they are just visible now.
   ============================================================ */
.mw-glacier .kbody{
  --r1:40px;--r2:12px;--r3:34px;--r4:14px;
  background:
    /* fracture planes, hard-edged and bright against the deep body */
    linear-gradient(116deg,rgba(226,250,255,.85) 0 3px,transparent 3px 20%),
    linear-gradient(-64deg,rgba(190,238,255,.6) 0 2px,transparent 2px 26%),
    linear-gradient(142deg,rgba(226,250,255,.5) 0 2px,transparent 2px 34%),
    /* the big cleaved facets */
    linear-gradient(122deg,rgba(255,255,255,.22) 0 26%,transparent 26% 42%,
                    rgba(255,255,255,.13) 42% 58%,transparent 58%),
    linear-gradient(168deg,#2e88ad,#1b5c7d 52%,#0e3b53);
  border-color:#62f0d8;
  box-shadow:0 0 12px #62f0d8bb,0 0 34px #62f0d866,0 0 80px #62f0d82e,
             0 26px 60px rgba(0,0,0,.62),
             inset 0 3px 12px rgba(226,250,255,.55),inset 0 -16px 34px rgba(6,32,48,.6)}
/* ---- the icicle rim: near-white teeth on a dark body ---- */
.mw-glacier .kbody::before{
  height:74px;border-radius:38px 12px 0 0;
  background:linear-gradient(180deg,#f4feff 0 34%,#c8ecfa 34% 62%,#9fd8ef 62% 100%);
  clip-path:polygon(0 0,100% 0,100% 40%,97% 82%,94% 40%,91% 66%,88% 40%,84% 96%,
    81% 40%,77% 70%,74% 40%,70% 88%,67% 40%,63% 62%,60% 40%,56% 100%,53% 40%,
    49% 74%,46% 40%,42% 90%,39% 40%,35% 64%,32% 40%,28% 84%,25% 40%,21% 70%,
    18% 40%,14% 94%,11% 40%,7% 66%,4% 40%,0 78%);
  box-shadow:0 4px 12px rgba(6,32,48,.5)}
/* a hexagonal chunk of ice with a Dive Ball frozen inside it */
.mw-glacier .pokedisc{
  --pw:94px;--ph:86px;--pt:-48px;border-radius:0;border:none;
  clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);
  background:
    linear-gradient(126deg,rgba(255,255,255,.9) 0 3px,transparent 3px 24%),
    linear-gradient(-58deg,rgba(255,255,255,.6) 0 2px,transparent 2px 30%),
    linear-gradient(126deg,rgba(255,255,255,.5) 0 20%,transparent 20% 38%,
                    rgba(255,255,255,.28) 38% 52%,transparent 52%),
    linear-gradient(180deg,#dff7ff,#6bb4d3);
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.mw-glacier .pokedisc::after{
  width:38px;height:38px;inset:auto;left:50%;top:24px;margin:0 0 0 -19px;border-radius:50%;
  border:3px solid #06202f;
  background:
    linear-gradient(90deg,transparent 0 44%,#06202f 44% 48%,transparent 48%),
    linear-gradient(180deg,#1f9ed6 0 44%,#06202f 44% 56%,#eaf9ff 56% 100%);
  box-shadow:0 0 18px rgba(98,240,216,.85)}
/* a window rimmed in thick frost, with teeth along its inner top edge */
.mw-glacier .kscreen{
  background:linear-gradient(180deg,#d6f2fd,#8ec8e2);
  padding:11px;border-radius:5px 16px 5px 16px;
  box-shadow:
    inset 0 0 0 2px #f4feff,
    inset 0 0 0 5px #62f0d8,
    inset 0 0 0 8px #0e3b53,
    inset 0 8px 16px rgba(255,255,255,.85),
    0 5px 20px rgba(6,32,48,.5)}
/* a bubble trapped in the ice */
.mw-glacier .kcam{
  --cw:16px;--ch:16px;
  background:radial-gradient(circle at 36% 30%,#ffffff 0 26%,#8ecfe6 26% 70%,#2e88ad 70%);
  box-shadow:0 0 10px rgba(226,250,255,.8),0 0 0 2px rgba(14,59,83,.6)}
/* a column of clear ice with hard internal fractures */
.mw-glacier .kreader{
  background:
    linear-gradient(154deg,rgba(255,255,255,.95) 0 2px,transparent 2px 26%),
    linear-gradient(-146deg,rgba(255,255,255,.7) 0 2px,transparent 2px 34%),
    linear-gradient(180deg,rgba(226,250,255,.85),rgba(110,180,210,.9));
  border-color:#62f0d8;border-radius:3px 11px 3px 11px;
  box-shadow:0 0 12px #62f0d877,inset 0 0 0 2px rgba(255,255,255,.8)}
.mw-glacier .kreader::before{top:8px;left:5px;right:5px;height:14px;border-radius:2px;
  background:rgba(255,255,255,.95);box-shadow:0 0 8px rgba(255,255,255,.8)}
.mw-glacier .kreader::after{bottom:8px;left:50%;width:11px;height:11px;border-radius:2px;
  background:rgba(255,255,255,.95)}
/* packed snow, broken along the top, with the shadow line under the lip */
.mw-glacier .ktray{
  border-color:#62f0d8;border-radius:6px 6px 16px 16px;
  background:linear-gradient(180deg,#ffffff 0 30%,#cfeaf7 30% 46%,#7fb4cd 46% 100%);
  clip-path:polygon(0 20%,6% 3%,13% 18%,21% 1%,29% 15%,37% 2%,45% 17%,53% 3%,
    61% 18%,69% 2%,77% 15%,85% 1%,93% 18%,100% 5%,100% 100%,0 100%);
  box-shadow:0 0 12px #62f0d866,inset 0 -8px 18px rgba(6,32,48,.45)}
.mw-glacier .mw-facet{inset:0;
  background:
    linear-gradient(74deg,rgba(255,255,255,.4) 0 2px,transparent 2px 22%),
    linear-gradient(-58deg,rgba(255,255,255,.3) 0 2px,transparent 2px 28%),
    linear-gradient(100deg,rgba(255,255,255,.22) 0 1px,transparent 1px 17%)}
.mw-glacier .mw-glint{top:-30%;bottom:-30%;left:0;width:22%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.9) 50%,transparent);
  animation:mwGlint 6s ease-in-out infinite}
@keyframes mwGlint{0%,70%{transform:translate3d(-160%,0,0)}100%{transform:translate3d(420%,0,0)}}
.mw-glacier .mw-snow{width:5px;height:5px;border-radius:50%;background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.9)}
.mw-glacier .mw-snow.s1{left:14%;top:-6px;animation:mwSnow 8s linear infinite}
.mw-glacier .mw-snow.s2{left:52%;top:-6px;animation:mwSnow 10s linear infinite 2s}
.mw-glacier .mw-snow.s3{left:81%;top:-6px;animation:mwSnow 9s linear infinite 4.5s}
@keyframes mwSnow{
  0%{transform:translate3d(0,0,0);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translate3d(-16px,420px,0);opacity:0}
}

/* ============================================================
   6 · NEON CITY — $175,000
   The nearest to right first time, so this is a level-up rather than a rewrite.
   What it was missing was DEPTH — everything glowed at the same distance, which
   is not how a lit street works. Now there are three planes: the tubes on the
   cabinet, a vertical shop sign hanging PROUD of it on the left, and the wet
   pavement throwing the whole thing back up from below.

   Still the only genuinely dark cabinet, because neon needs black to be neon.
   ============================================================ */
.mw-neon .kbody{
  --r1:6px;--r2:6px;--r3:6px;--r4:6px;
  background:
    /* the tiled facade behind the lights, barely there until light hits it */
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 26px),
    linear-gradient(172deg,#141127,#08070f 55%,#170f28);
  border-color:#ff2fd0;
  box-shadow:0 0 14px #ff2fd0dd,0 0 40px #ff2fd077,0 0 96px #ff2fd03a,
             0 26px 60px rgba(0,0,0,.8),
             inset 0 0 0 1px rgba(255,47,208,.35),
             inset 0 -40px 60px rgba(255,47,208,.14)}
/* the marquee: tube letters as hard blocks, on their own dark plate */
.mw-neon .kbody::before{
  height:52px;border-radius:5px 5px 0 0;
  background:
    /* the block "letters" */
    linear-gradient(90deg,transparent 0 14%,#2ff5ff 14% 17%,transparent 17% 20%,
      #2ff5ff 20% 23%,transparent 23% 27%,#ff2fd0 27% 30%,transparent 30% 33%,
      #ff2fd0 33% 36%,transparent 36% 40%,#2ff5ff 40% 43%,transparent 43% 46%,
      #ffe23d 46% 49%,transparent 49% 53%,#ff2fd0 53% 56%,transparent 56% 59%,
      #2ff5ff 59% 62%,transparent 62% 66%,#ff2fd0 66% 69%,transparent 69% 72%,
      #2ff5ff 72% 75%,transparent 75%) 0 40%/100% 26% no-repeat,
    /* the tube rails above and below them */
    linear-gradient(180deg,transparent 0 14%,#ff2fd0 14% 18%,transparent 18% 82%,
                    #2ff5ff 82% 86%,transparent 86%),
    #07060d;
  box-shadow:inset 0 0 30px rgba(255,47,208,.45),0 3px 18px rgba(255,47,208,.35)}
/* a hollow ring sign, double-tubed */
.mw-neon .pokedisc{
  --pw:86px;--ph:86px;--pt:-44px;border-radius:50%;
  border:5px solid #ff2fd0;background:#07060d;
  box-shadow:0 0 18px #ff2fd0,0 0 48px #ff2fd088,
             inset 0 0 18px #ff2fd0bb,inset 0 0 0 6px #07060d,inset 0 0 0 9px #2ff5ff}
.mw-neon .pokedisc::after{
  width:26px;height:26px;border:4px solid #ffe23d;background:#07060d;
  box-shadow:0 0 16px #ffe23d,inset 0 0 8px #ffe23d}
/* the window as a lit shopfront: tube frame, and light spilling onto the sill */
.mw-neon .kscreen{
  background:#07060d;padding:8px;border-radius:3px;
  box-shadow:
    inset 0 0 0 2px #2ff5ff,
    inset 0 0 0 5px #07060d,
    inset 0 0 0 6px rgba(255,47,208,.55),
    inset 0 0 22px rgba(47,245,255,.45),
    0 0 26px rgba(47,245,255,.4)}
.mw-neon .kcam{
  --cw:14px;--ch:14px;background:#ffe23d;
  box-shadow:0 0 12px #ffe23d,0 0 26px #ffe23d88,0 0 0 2px #14112a}
/* the hanging sign, stacked characters, lit from within */
.mw-neon .kreader{
  --kw:40px;--kh:132px;
  background:#0b0917;border-color:#ff2fd0;border-radius:2px;
  box-shadow:0 0 18px #ff2fd099,0 0 40px #ff2fd044,
             inset 0 0 0 1px rgba(255,47,208,.6),inset 0 0 14px rgba(255,47,208,.3)}
.mw-neon .kreader::before{
  top:6px;left:5px;right:5px;bottom:14px;height:auto;border-radius:0;
  background:
    linear-gradient(180deg,
      #ff2fd0 0 13%,transparent 13% 20%,
      #2ff5ff 20% 33%,transparent 33% 40%,
      #ffe23d 40% 53%,transparent 53% 60%,
      #ff2fd0 60% 73%,transparent 73% 80%,
      #2ff5ff 80% 93%,transparent 93%);
  box-shadow:0 0 14px rgba(255,47,208,.8)}
.mw-neon .kreader::after{bottom:5px;left:50%;width:16px;height:4px;border-radius:0;
  background:#2ff5ff;box-shadow:0 0 12px #2ff5ff}
/* wet asphalt: the machine's own light coming back up at it */
.mw-neon .ktray{
  border-color:#2ff5ff;border-radius:3px;
  background:
    repeating-linear-gradient(90deg,rgba(47,245,255,.18) 0 2px,transparent 2px 15px),
    linear-gradient(180deg,#07060d 0 26%,#1d0f30 62%,#2a1140 100%);
  box-shadow:0 0 20px #2ff5ff77,0 6px 26px rgba(255,47,208,.5),
             inset 0 -10px 24px rgba(255,47,208,.5),inset 0 2px 0 rgba(47,245,255,.6)}
.mw-neon .mw-tube{left:5%;right:5%;height:3px;border-radius:2px}
.mw-neon .mw-tube.t1{top:56%;background:#2ff5ff;box-shadow:0 0 14px #2ff5ff,0 0 30px #2ff5ff77}
.mw-neon .mw-tube.t2{top:80%;background:#ff2fd0;box-shadow:0 0 14px #ff2fd0,0 0 30px #ff2fd077}
.mw-neon .mw-flick{inset:0;background:rgba(255,47,208,.13);
  animation:mwFlick 5.5s steps(1,end) infinite}
@keyframes mwFlick{
  0%,86%{opacity:0}87%{opacity:1}88%{opacity:0}90%{opacity:1}92%{opacity:0}
  94%{opacity:1}96%{opacity:0}
}
.mw-neon .mw-runner{top:0;bottom:0;left:0;width:12%;
  background:linear-gradient(90deg,transparent,rgba(47,245,255,.4),transparent);
  animation:mwRun 4.6s linear infinite}
@keyframes mwRun{from{transform:translate3d(-120%,0,0)}to{transform:translate3d(820%,0,0)}}
/* rain, because a wet street needs a reason to be wet */
.mw-neon .mw-rain{inset:-20% 0;
  background:repeating-linear-gradient(76deg,rgba(47,245,255,.16) 0 1px,transparent 1px 22px);
  animation:mwRain 1.1s linear infinite}
@keyframes mwRain{from{transform:translate3d(0,-22px,0)}to{transform:translate3d(0,22px,0)}}

/* ============================================================
   7 · MAGMA — $320,000
   The old one was orange all over, which is the opposite of how lava reads.
   Molten rock is only bright where it is EXPOSED — the rest is black crust,
   and the contrast between the two is what makes it look hot. An evenly orange
   machine looks like a machine painted orange.

   So the body is obsidian now and the heat comes through it: cracks that
   actually glow, a pour that hangs in real drips, and a tray that is an open
   furnace with a grate across the mouth and molten light behind the bars.
   ============================================================ */
.mw-magma .kbody{
  --r1:24px;--r2:50px;--r3:18px;--r4:46px;
  background:
    /* the crack network — thin, bright, and lit on one side like a real fissure */
    linear-gradient(72deg,transparent 0 18%,rgba(255,214,90,.95) 18% 18.6%,
                    rgba(255,90,10,.5) 18.6% 19.6%,transparent 19.6%),
    linear-gradient(-46deg,transparent 0 34%,rgba(255,180,60,.85) 34% 34.5%,
                    rgba(220,60,0,.45) 34.5% 35.4%,transparent 35.4%),
    linear-gradient(24deg,transparent 0 62%,rgba(255,150,40,.7) 62% 62.4%,transparent 62.4%),
    linear-gradient(-78deg,transparent 0 48%,rgba(255,120,20,.6) 48% 48.4%,transparent 48.4%),
    /* the crust itself */
    repeating-linear-gradient(38deg,rgba(255,255,255,.025) 0 1px,transparent 1px 9px),
    linear-gradient(172deg,#1e1917,#0d0b0a 55%,#171210);
  border-color:#ff6a1f;
  box-shadow:0 0 14px #ff6a1fdd,0 0 40px #ff6a1f77,0 0 96px #ff6a1f3a,
             0 26px 60px rgba(0,0,0,.78),
             inset 0 2px 8px rgba(255,140,60,.14),
             inset 0 -34px 56px rgba(255,90,10,.22)}
/* the pour, with drips that actually hang off it */
.mw-magma .kbody::before{
  height:66px;border-radius:22px 48px 0 0;
  background:
    linear-gradient(180deg,#fff0b0 0 8%,#ffd24a 8% 26%,#ff8a1f 26% 56%,#e03c00 56% 84%,#a82600 84%);
  clip-path:polygon(0 0,100% 0,100% 54%,96% 54%,94.5% 88%,93% 54%,86% 54%,84% 100%,
    82% 54%,72% 54%,70.5% 78%,69% 54%,58% 54%,56% 96%,54% 54%,44% 54%,42.5% 74%,
    41% 54%,30% 54%,28% 92%,26% 54%,16% 54%,14.5% 82%,13% 54%,5% 54%,3.5% 70%,2% 54%);
  box-shadow:0 0 34px rgba(255,106,31,.85)}
/* a magma orb: crusted shell, molten core showing through the breaks */
.mw-magma .pokedisc{
  --pw:92px;--ph:92px;--pt:-46px;border-radius:50%;
  border:5px solid #0d0b0a;
  background:
    linear-gradient(52deg,transparent 0 28%,rgba(255,220,120,.95) 28% 29%,transparent 29%),
    linear-gradient(-38deg,transparent 0 56%,rgba(255,180,60,.8) 56% 56.8%,transparent 56.8%),
    radial-gradient(circle at 42% 34%,#fff0b0 0 10%,#ffb02a 10% 30%,#ff6a1f 30% 52%,
                    #8f1f00 52% 74%,#2a1310 74% 100%);
  box-shadow:0 0 34px #ff6a1fbb,0 8px 22px rgba(0,0,0,.7),inset 0 -8px 18px rgba(0,0,0,.55)}
.mw-magma .pokedisc::after{
  width:26px;height:26px;border:4px solid #0d0b0a;background:#fff3c0;
  box-shadow:0 0 26px #ffd24a,0 0 44px #ff8a1f}
/* obsidian frame, molten in the seams */
.mw-magma .kscreen{
  background:linear-gradient(180deg,#1e1917,#0a0908);
  padding:11px;border-radius:8px 18px 8px 18px;
  box-shadow:
    inset 0 0 0 2px #ff6a1f,
    inset 0 0 0 4px #0a0908,
    inset 0 0 0 6px rgba(255,140,40,.4),
    inset 0 0 22px rgba(255,106,31,.4),
    0 5px 22px rgba(0,0,0,.7),0 0 26px rgba(255,106,31,.35)}
/* an ember caught in the crust */
.mw-magma .kcam{
  --cw:15px;--ch:15px;
  background:radial-gradient(circle at 40% 34%,#fff3c0 0 26%,#ffb02a 26% 60%,#c22e00 60%);
  box-shadow:0 0 16px #ff8a1f,0 0 30px #ff6a1f88,0 0 0 2px #0d0b0a}
/* a vent, glowing hard through the slits */
.mw-magma .kreader{
  background:
    repeating-linear-gradient(180deg,#0a0908 0 8px,#ff8a1f 8px 11px,#ffd24a 11px 12px),
    #0a0908;
  border-color:#ff6a1f;border-radius:4px;
  box-shadow:0 0 18px #ff6a1f99,inset 0 0 14px rgba(255,106,31,.6)}
.mw-magma .kreader::before{display:none}
.mw-magma .kreader::after{display:none}
/* THE FURNACE MOUTH: molten behind, iron bars across, heat spilling out */
.mw-magma .ktray{
  border-color:#ff6a1f;border-radius:9px;
  background:
    repeating-linear-gradient(90deg,#14100e 0 7px,transparent 7px 22px),
    linear-gradient(180deg,#fff0b0 0 10%,#ffb02a 10% 34%,#ff6a1f 34% 62%,#8f1f00 100%);
  box-shadow:0 0 28px #ff6a1faa,0 6px 26px rgba(255,106,31,.6),
             inset 0 8px 26px rgba(0,0,0,.7),inset 0 0 0 2px #0a0908}
.mw-magma .mw-crack{inset:0;
  background:
    linear-gradient(84deg,transparent 0 26%,rgba(255,190,70,.8) 26% 26.5%,transparent 26.5%),
    linear-gradient(-58deg,transparent 0 44%,rgba(255,120,20,.7) 44% 44.5%,transparent 44.5%),
    linear-gradient(16deg,transparent 0 72%,rgba(255,220,120,.6) 72% 72.4%,transparent 72.4%);
  animation:mwCrackGlow 4.2s ease-in-out infinite}
@keyframes mwCrackGlow{0%,100%{opacity:.55}50%{opacity:1}}
.mw-magma .mw-heat{inset:0;
  background:radial-gradient(120% 56% at 50% 106%,rgba(255,106,31,.6),transparent 60%);
  animation:mwHeat 3.6s ease-in-out infinite}
@keyframes mwHeat{0%,100%{opacity:.45}50%{opacity:1}}
.mw-magma .mw-ember{width:5px;height:5px;border-radius:50%;background:#ffd24a;
  box-shadow:0 0 12px #ff8a1f,0 0 22px #ff6a1f}
.mw-magma .mw-ember.e1{left:22%;bottom:6%;animation:mwEmber 5.4s linear infinite}
.mw-magma .mw-ember.e2{left:56%;bottom:4%;animation:mwEmber 6.8s linear infinite 1.8s}
.mw-magma .mw-ember.e3{left:78%;bottom:8%;animation:mwEmber 6s linear infinite 3.4s}
@keyframes mwEmber{
  0%{transform:translate3d(0,0,0) scale(1);opacity:0}
  14%{opacity:1}
  100%{transform:translate3d(-22px,-260px,0) scale(.3);opacity:0}
}

/* ============================================================
   8 · 24 KARAT — $500,000
   A BAR OF BULLION, which means squared-off and heavy rather than rounded and
   shiny — the ingot read comes from the bevel, not from the colour. And the
   trim is BLACK. Hall of Fame was gold on gold and read as caution tape; gold
   with black lacquer is the difference between a watch and a hazard sign.
   ============================================================ */
.mw-karat .kbody{
  --r1:10px;--r2:10px;--r3:7px;--r4:7px;
  background:
    linear-gradient(172deg,#ffe9a8 0 6%,#f0c04a 6% 52%,#c98f18 52% 94%,#a8760e 94%),
    #e3b23c;
  border-color:#141212;
  box-shadow:0 0 12px #ffcb0577,0 0 34px #ffcb0533,
             0 26px 60px rgba(0,0,0,.7),
             inset 0 3px 0 rgba(255,255,255,.6),inset 0 -4px 0 rgba(120,80,0,.55),
             inset 5px 0 10px rgba(255,255,255,.28),inset -5px 0 12px rgba(110,72,0,.4)}
/* the struck top face of the bar */
.mw-karat .kbody::before{
  height:50px;border-radius:9px 9px 0 0;
  background:linear-gradient(180deg,#fff3c9 0 40%,#f5cf6a 40% 100%);
  clip-path:polygon(0 0,100% 0,96% 100%,4% 100%);
  box-shadow:inset 0 -2px 0 rgba(120,80,0,.35)}
/* a milled coin */
.mw-karat .pokedisc{
  --pw:84px;--ph:84px;--pt:-42px;border-radius:50%;
  border:3px solid #141212;
  background:
    repeating-conic-gradient(from 0deg,#141212 0 1.5deg,transparent 1.5deg 3deg) content-box,
    radial-gradient(circle at 40% 32%,#fff3c9 0 22%,#f0c04a 22% 62%,#b8830f 62% 100%);
  padding:5px;
  box-shadow:0 8px 20px rgba(0,0,0,.6),inset 0 0 0 3px #b8830f}
.mw-karat .pokedisc::after{
  width:30px;height:30px;border:3px solid #141212;
  background:linear-gradient(180deg,#fff3c9,#d9a521);
  box-shadow:inset 0 -3px 6px rgba(120,80,0,.5)}
/* BLACK LACQUER, which is the whole point */
.mw-karat .kscreen{
  background:linear-gradient(180deg,#1a1717,#0b0a0a);
  padding:10px;border-radius:5px;
  box-shadow:0 6px 20px rgba(0,0,0,.6),inset 0 0 0 2px #e3b23c,
             inset 0 0 0 5px #0b0a0a}
.mw-karat .kcam{background:#0b0a0a;box-shadow:inset 0 0 4px #000,0 0 0 2px #e3b23c}
.mw-karat .kreader{
  background:linear-gradient(180deg,#1a1717,#0b0a0a);
  border-color:#e3b23c;border-radius:4px;
  box-shadow:0 0 10px rgba(255,203,5,.4),inset 0 0 0 1px rgba(227,178,60,.5)}
.mw-karat .kreader::before{top:8px;left:4px;right:4px;height:4px;border-radius:0;
  background:#e3b23c;box-shadow:none}
.mw-karat .kreader::after{bottom:8px;left:50%;width:14px;height:4px;border-radius:0;background:#e3b23c}
.mw-karat .ktray{
  border-color:#e3b23c;border-radius:5px;
  background:linear-gradient(180deg,#1a1717 0 22%,#0b0a0a 100%);
  box-shadow:0 0 12px rgba(255,203,5,.35),inset 0 3px 0 #e3b23c,inset 0 8px 18px rgba(0,0,0,.7)}
.mw-karat .mw-guilloche{inset:0;
  background:
    repeating-linear-gradient(46deg,rgba(120,80,0,.22) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(-46deg,rgba(120,80,0,.18) 0 1px,transparent 1px 7px)}
.mw-karat .mw-polish{top:-30%;bottom:-30%;left:0;width:22%;
  background:linear-gradient(102deg,transparent,rgba(255,255,255,.7) 50%,transparent);
  animation:mwPolish 7.5s ease-in-out infinite}
@keyframes mwPolish{0%,72%{transform:translate3d(-180%,0,0)}100%{transform:translate3d(520%,0,0)}}
.mw-karat .mw-fine{left:50%;bottom:9px;transform:translateX(-50%);font-size:8px;color:#4a3400}

/* ============================================================
   9 · CERTIFIED — finish one master set
   Called boring, and the reason is worth naming: a white box is only boring
   because it is BLANK. A real graded slab is not blank at all — it is covered
   in specific, official-looking detail, and every bit of that detail is what
   makes holding one feel like something.

   So this stops being a white cabinet and becomes the actual object: the label
   plate with its red banner and cert number, the tamper hologram running the
   full width under it, the stepped inner well where the plastic drops away to
   the card, and the hard specular streak down the acrylic that tells you it is
   a sealed case rather than a picture of one.
   ============================================================ */
.mw-certified .kbody{
  --r1:8px;--r2:8px;--r3:8px;--r4:8px;
  background:
    /* the specular edge along the top-left of the shell */
    linear-gradient(118deg,rgba(255,255,255,.9) 0 2px,transparent 2px 16%),
    linear-gradient(118deg,rgba(255,255,255,.45) 0 12%,transparent 12% 28%),
    linear-gradient(172deg,#fbfcff,#e6eaf3 52%,#c4cbdb);
  border:5px solid rgba(255,255,255,.7);
  box-shadow:0 0 14px rgba(232,235,255,.6),0 0 40px rgba(232,235,255,.26),
             0 26px 60px rgba(0,0,0,.62),
             inset 0 0 0 2px rgba(110,122,155,.4),
             inset 0 4px 14px rgba(255,255,255,.95),
             inset 0 -6px 18px rgba(110,122,155,.22)}
/* THE LABEL PLATE — the red banner, the rule lines, and the hologram strip */
.mw-certified .kbody::before{
  height:78px;border-radius:5px 5px 0 0;
  background:
    /* the tamper hologram, a hard prismatic band across the bottom of the label */
    repeating-linear-gradient(64deg,
      rgba(255,120,190,.55) 0 6px,rgba(120,220,255,.55) 6px 12px,
      rgba(190,255,170,.5) 12px 18px,rgba(255,225,130,.5) 18px 24px) 0 100%/100% 13% no-repeat,
    /* the red identification banner */
    linear-gradient(#b3132a,#8e0c20) 0 60%/100% 5% no-repeat,
    /* the rule under the set name */
    linear-gradient(#1a1d29,#1a1d29) 0 40%/100% 2% no-repeat,
    linear-gradient(180deg,#ffffff 0 86%,#e3e7f0 86% 100%);
  box-shadow:inset 0 0 0 1px rgba(110,122,155,.45),0 2px 6px rgba(110,122,155,.3)}
/* the grading company's seal, pressed into the top of the case */
.mw-certified .pokedisc{
  --pw:56px;--ph:56px;--pt:-28px;border-radius:50%;
  border:3px solid #8f97ad;
  background:
    conic-gradient(from 0deg,#ffd7ea,#d7f0ff,#e6ffdc,#fff4cf,#ffd7ea),
    #eef0f6;
  box-shadow:0 7px 18px rgba(0,0,0,.45),inset 0 0 0 4px #ffffff,
             inset 0 0 0 6px rgba(110,122,155,.35)}
.mw-certified .pokedisc::after{
  width:20px;height:20px;border:3px solid #1a1d29;background:#fff;
  box-shadow:inset 0 0 0 2px #b3132a}
/* the inner well: the plastic stepping down to where the card actually sits */
.mw-certified .kscreen{
  background:#e9ecf4;padding:12px;border-radius:3px;
  box-shadow:
    inset 0 0 0 2px rgba(110,122,155,.5),
    inset 0 0 0 4px #ffffff,
    inset 0 0 0 6px rgba(110,122,155,.28),
    inset 0 0 0 12px #f7f9fd,
    inset 0 7px 14px rgba(110,122,155,.35),
    0 5px 20px rgba(0,0,0,.25)}
/* the security dot */
.mw-certified .kcam{
  --cw:14px;--ch:14px;
  background:conic-gradient(from 40deg,#ff9ad2,#9ad9ff,#b6ffcf,#ffe9a0,#ff9ad2);
  box-shadow:0 0 0 2px #fff,0 0 8px rgba(160,190,255,.9)}
/* the cert barcode, with the number block under it */
.mw-certified .kreader{
  background:#fff;border-color:#b9c0d2;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(110,122,155,.4),0 2px 8px rgba(110,122,155,.25)}
.mw-certified .kreader::before{
  top:7px;left:5px;right:5px;height:58%;border-radius:0;
  background:repeating-linear-gradient(90deg,
    #1a1d29 0 2px,transparent 2px 4px,#1a1d29 4px 5px,transparent 5px 8px,
    #1a1d29 8px 11px,transparent 11px 13px);
  box-shadow:none}
.mw-certified .kreader::after{
  bottom:7px;left:50%;width:24px;height:7px;border-radius:1px;
  background:repeating-linear-gradient(90deg,#1a1d29 0 2px,transparent 2px 4px)}
/* the sealed bottom lip, with the weld line across it */
.mw-certified .ktray{
  border-color:rgba(255,255,255,.75);border-radius:5px;
  background:
    linear-gradient(#8f97ad,#8f97ad) 0 34%/100% 2px no-repeat,
    linear-gradient(180deg,#f2f5fa 0 30%,#dee3ee 30% 62%,#c4cbdb 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.95),
             inset 0 -6px 14px rgba(110,122,155,.45),
             0 5px 16px rgba(0,0,0,.32)}
/* the hard streak down the acrylic — one pass, not a shimmer */
.mw-certified .mw-slabglare{top:-40%;bottom:-40%;left:0;width:26%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.95) 46%,
             rgba(255,255,255,.4) 54%,transparent);
  animation:mwSlab 8s ease-in-out infinite}
@keyframes mwSlab{0%,76%{transform:translate3d(-160%,0,0)}100%{transform:translate3d(420%,0,0)}}
/* the prismatic sheen that only shows at an angle, the way a hologram does */
.mw-certified .mw-holo{inset:0;mix-blend-mode:overlay;
  background:repeating-linear-gradient(112deg,
    rgba(255,120,190,.5) 0 10px,rgba(120,220,255,.5) 10px 20px,
    rgba(190,255,170,.45) 20px 30px,rgba(255,225,130,.45) 30px 40px);
  opacity:.22;animation:mwHolo 9s ease-in-out infinite}
@keyframes mwHolo{0%,100%{opacity:.12}50%{opacity:.34}}

/* ============================================================
   10 · MISSINGNO. — reach level 50
   A RENDERING FAULT WEARING THE SHAPE OF A MACHINE. Square corners because the
   renderer forgot to round them, tile rows sliding out of alignment, colour
   bars where the header should be, and a headpiece that cannot decide what it
   is. Everything SNAPS — steps(), never a transition — because corruption does
   not ease in and out.
   ============================================================ */
.mw-missingno .kbody{
  --r1:0;--r2:0;--r3:0;--r4:0;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 6px,transparent 6px 12px),
    linear-gradient(172deg,#2a1c3a,#1a1226 55%,#241634);
  border-color:#b06cff;
  box-shadow:0 0 12px #b06cffaa,0 0 34px #b06cff55,0 0 80px #b06cff28,
             0 26px 60px rgba(0,0,0,.7),
             3px 0 0 rgba(255,47,208,.5),-3px 0 0 rgba(61,220,132,.4)}
/* colour bars */
.mw-missingno .kbody::before{
  height:46px;border-radius:0;
  background:repeating-linear-gradient(90deg,
    #ff2fd0 0 11%,#3ddc84 11% 22%,#b06cff 22% 33%,#ffe23d 33% 44%,
    #2ff5ff 44% 55%,#ff4d4d 55% 66%,#f2f4ff 66% 77%,#1a1226 77% 88%,#ff2fd0 88% 100%)}
/* a block that will not settle on a shape */
.mw-missingno .pokedisc{
  --pw:72px;--ph:72px;--pt:-36px;border-radius:0;
  border:3px solid #f2f4ff;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 4px,transparent 4px 8px),
    repeating-linear-gradient(90deg,#ff2fd0 0 25%,#3ddc84 25% 50%,#b06cff 50% 75%,#ffe23d 75% 100%);
  box-shadow:4px 0 0 rgba(255,47,208,.6),-4px 0 0 rgba(61,220,132,.5),0 8px 18px rgba(0,0,0,.6);
  animation:mwBlockJump 3.7s steps(1,end) infinite}
@keyframes mwBlockJump{
  0%,88%{transform:translateX(-50%)}
  90%{transform:translateX(calc(-50% + 7px))}
  92%{transform:translateX(calc(-50% - 5px))}
  94%{transform:translateX(-50%)}
}
.mw-missingno .pokedisc::after{
  width:22px;height:22px;border:3px solid #1a1226;border-radius:0;background:#f2f4ff;
  box-shadow:3px 0 0 #ff2fd0,-3px 0 0 #3ddc84}
/* a bezel drawn twice, a few pixels apart */
.mw-missingno .kscreen{
  background:#1a1226;padding:7px;border-radius:0;
  box-shadow:inset 0 0 0 2px #f2f4ff,
             3px 3px 0 rgba(255,47,208,.55),-3px -3px 0 rgba(61,220,132,.45)}
.mw-missingno .kcam{border-radius:0;background:#3ddc84;box-shadow:2px 0 0 #ff2fd0,0 0 8px #3ddc84}
/* scrambled tile rows */
.mw-missingno .kreader{
  border-radius:0;border-color:#f2f4ff;
  background:
    repeating-linear-gradient(180deg,
      #ff2fd0 0 6px,#1a1226 6px 12px,#3ddc84 12px 18px,#1a1226 18px 24px,
      #b06cff 24px 30px,#1a1226 30px 36px);
  box-shadow:3px 0 0 rgba(255,47,208,.5),-3px 0 0 rgba(61,220,132,.4)}
.mw-missingno .kreader::before{display:none}
.mw-missingno .kreader::after{display:none}
.mw-missingno .ktray{
  border-radius:0;border-color:#f2f4ff;
  background:repeating-linear-gradient(90deg,
    #1a1226 0 8%,#ff2fd0 8% 12%,#1a1226 12% 30%,#3ddc84 30% 34%,#1a1226 34% 58%,
    #b06cff 58% 62%,#1a1226 62% 84%,#ffe23d 84% 88%,#1a1226 88% 100%);
  box-shadow:inset 0 4px 12px rgba(0,0,0,.6)}
.mw-missingno .mw-bars{inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(255,47,208,.16) 0 3px,transparent 3px 9px,rgba(61,220,132,.14) 9px 12px,transparent 12px 21px)}
.mw-missingno .mw-tiles{inset:0;
  background:repeating-linear-gradient(180deg,
    rgba(255,255,255,.07) 0 5px,transparent 5px 13px);
  animation:mwTiles 4.1s steps(1,end) infinite}
@keyframes mwTiles{
  0%,60%{transform:translate3d(0,0,0)}
  62%{transform:translate3d(9px,0,0)}
  64%{transform:translate3d(-6px,0,0)}
  66%{transform:translate3d(0,0,0)}
  86%{transform:translate3d(0,0,0)}
  88%{transform:translate3d(-11px,0,0)}
  90%{transform:translate3d(0,0,0)}
}
.mw-missingno .mw-shear{left:0;right:0;top:36%;height:16%;
  background:rgba(255,47,208,.20);
  animation:mwShear 5.3s steps(1,end) infinite}
@keyframes mwShear{
  0%,90%{opacity:0;transform:translate3d(0,0,0)}
  91%{opacity:1;transform:translate3d(13px,0,0)}
  93%{opacity:.85;transform:translate3d(-9px,0,0)}
  95%{opacity:0}
}
.mw-missingno .mw-glitchmark{left:9px;top:54px;font-size:8px;color:#3ddc84;
  text-shadow:2px 0 #ff2fd0,-2px 0 #b06cff;animation:mwJump 4.3s steps(1,end) infinite}
@keyframes mwJump{
  0%,92%{transform:translate3d(0,0,0)}
  93%{transform:translate3d(6px,0,0)}
  95%{transform:translate3d(-4px,0,0)}
  97%{transform:translate3d(0,0,0)}
}

/* ============================================================
   THE SHOP PREVIEW
   The same classes at a smaller size, exactly like `.up-binder` reuses
   `.binder3d`. Every colour rule above is therefore shared between the preview
   and the real cabinet, and the preview cannot drift from the thing you are
   buying — which was the whole problem with the three invented gradient
   rectangles the Upgrades page shipped with.
   ============================================================ */
/* THE SAME STAGE THE BINDER GETS, to the pixel. Values copied from
   `.up-panel-skin` / `.up-binder` in shop.css rather than re-invented, because
   the machine tab reading as a different screen from the binder tab was the
   complaint — and a stage that is "about the same" is exactly how two tabs
   drift apart. Same perspective, same parallax step, same tilt, same float,
   same lit backdrop, same pause and reduced-motion rules.

   The cabinet is a couple of degrees flatter than the binder on Y: it is twice
   as wide, and the same -9deg that reads as a book standing open reads as a
   fridge falling over. */
.up-panel-mach{display:flex;align-items:center;justify-content:center;
  perspective:900px;
  background:radial-gradient(95% 85% at 50% 20%,#141838,#080a18 78%)!important}
.up-panel-mach.here .up-glow{animation:upGlowIn .55s ease both}
.up-mach{position:relative;z-index:2;width:158px;flex:none;
  transform:translateX(calc((var(--i,0) - var(--cur,0)) * 26px))
            rotateY(-7deg) rotateX(3deg)}
.up-panel-mach.here .up-mach{animation:upMachFloat 5.5s ease-in-out infinite}
@keyframes upMachFloat{
  0%,100%{transform:translateX(calc((var(--i,0) - var(--cur,0)) * 26px)) translateY(0)
          rotateY(-7deg) rotateX(3deg)}
  50%    {transform:translateX(calc((var(--i,0) - var(--cur,0)) * 26px)) translateY(-7px)
          rotateY(-4deg) rotateX(1deg)}
}
@media (prefers-reduced-motion:reduce){ .up-panel-mach.here .up-mach{animation:none} }
body.skin-paused .up-panel-mach .up-mach{animation-play-state:paused}
/* geometry comes from the wrap; this only says how much smaller it all is */
.up-mach .kbody{--rs:.39;padding:27px 6px 7px;border-width:1.5px}
.up-mach .kbody::before{height:27px}
.up-mach .pokedisc{--ps:.38;border-width:2px;
  box-shadow:0 0 0 3px #f5edd6,0 6px 16px rgba(0,0,0,.5)}
.up-mach .pokedisc::after{width:13px;height:13px;border-width:2px}
.up-mach .kmain{gap:4px}
.up-mach .kscreen{padding:3px;border-radius:7px}
.up-mach .mscreen{height:108px;border-radius:5px}
.up-mach .kside{width:17px;gap:6px;padding-top:24px}
.up-mach .kcam{--cs:.4;box-shadow:inset 0 0 2px #000,0 0 0 1px #cbbb8e}
.up-mach .kreader{--ks:.39;border-radius:5px;border-width:1.5px}
.up-mach .kreader::before{top:5px;left:2px;right:2px;height:10px;border-radius:2px}
.up-mach .kreader::after{bottom:4px;width:7px;height:7px;border-radius:2px}
.up-mach .ktray{height:21px;margin-top:5px;border-width:1.5px}
.up-mach .mwfx{border-radius:inherit}
/* the marks and the label are sized for a 410px cabinet; at 158 they would be
   unreadable smudges, so the preview drops the microtype and keeps the label */
.up-mach .mw-mark{display:none}
.up-mach .mw-label{left:4px;right:4px;top:3px;height:20px;gap:3px;padding:0 4px;border-radius:3px}
.up-mach .mw-lgrade{font-size:5px;height:15px;letter-spacing:.1em}
.up-mach .mw-lname{font-size:7px}
.up-mach .mw-lsym{width:13px;height:13px}
.up-mach .mw-lsym b{font-size:9px}
.up-mach .mw-l10{width:18px;padding:1px 0 2px;border-radius:2px}
.up-mach .mw-l10 b{font-size:9px}
.up-mach .mw-l10 span{font-size:3.5px;letter-spacing:.06em}
/* ---- the preview screen: your own sealed product, standing in the machine ----

   `flex-direction:row` IS LOAD-BEARING. machine.css declares
   `.mscreen{display:flex;flex-direction:column}` because the real screen is a
   scrolling catalogue. This rule and that one are both (0,1,0), so `display`
   here wins on load order — but `flex-direction` is a SEPARATE longhand and was
   never overridden, so the column survived and the two products stacked
   vertically inside a 108px box with `overflow:hidden` on it. That is the
   clipped, oversized card art on the preview.

   And nothing sized `.pv`. On the shelf, `.up-prod .pv{height:106px}` gives the
   product a box; here there was only a `max-height` on the image, so its WIDTH
   was whatever the source file happened to be and a box photo ran straight out
   of the cabinet.

   So the products are laid out exactly the way the shelf lays them out —
   bottom-aligned in a row, standing on the floor of the screen — with every
   axis constrained: half the width each, contained, nothing able to overflow
   no matter what shape the photo is. */
.up-mscreen{display:flex;flex-direction:row;align-items:flex-end;justify-content:center;
  gap:4px;padding:7px 6px 6px}
.up-mscreen .up-mprod{flex:0 1 auto;min-width:0;max-width:calc(50% - 2px);height:88px;
  display:flex;align-items:flex-end;justify-content:center}
.up-mscreen .up-mprod .pv{height:100%;max-width:100%;
  display:flex;align-items:flex-end;justify-content:center}
.up-mscreen .wrapimg{height:100%;width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 6px 9px rgba(0,0,0,.45))}
.up-mscreen .prod-pack{height:82px;width:46px}
.up-mscreen .cuboid{transform:scale(.5);transform-origin:bottom center}
.up-mscreen .up-mempty{font-family:'Bebas Neue',Outfit,sans-serif;font-size:13px;
  letter-spacing:.16em;color:#b8bcc9}

/* the rail chip: body, crest and a dark screen. Enough to tell ten apart at
   58px, which is the only job a chip has.

   NO HEIGHT HERE, and that is the whole point of the comment. The element
   carries `up-chipart up-chipmach kiosk`; shop.css sets `.up-chipart{height:58px}`
   and this rule used to set `height:100%` — same specificity (0,1,0), and
   wraps.css loads AFTER shop.css, so 100% won. The parent `.up-chip` is an
   auto-height flex column, so 100% resolved to auto, and every child in here is
   absolutely positioned — leaving a chip with no content and therefore almost
   no height. That is why the machines rail came out a third the size of the
   shelves and binders rails, with the names pushed off the bottom.

   The shelf and binder chips never hit it: shelf-rooms.css loads BEFORE
   shop.css, and `.up-chipbinder` simply never sets a height. So the fix is to
   stop competing — the one rule that sizes a chip is `.up-chipart`, for all
   three categories. */
.up-chipmach{position:relative;display:block;overflow:hidden}
.up-chipmach .kbody{position:absolute;inset:0;padding:0;--rs:.2;border-width:1px;
  box-shadow:none!important}
.up-chipmach .kbody::before{height:15px;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}
.up-chipmach .kbody::after{opacity:.5}
.up-chipmach .pokedisc{width:17px;height:17px;top:5px;border-width:1.5px;box-shadow:none}
.up-chipmach .pokedisc::after{width:5px;height:5px;border-width:1.5px;box-shadow:none}
.up-chipmach .cscreen{position:absolute;left:6px;right:6px;top:26px;bottom:11px;
  border-radius:3px;background:#f5f5f7;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.up-chipmach .ctray{position:absolute;left:6px;right:6px;bottom:4px;height:5px;border-radius:2px}