/* The page below the console as one walk through the arcade at night (2026-10-22, owner: "unify this space ... custom
   nice backgrounds on everything").
   Story, top to bottom: the night yard outside (#top, the approved backdrop) falls into shadow under the console; you
   step under the workshop's door header (#sep-1); inside hangs the cartridge wall (pegboard, wall-cartridges.css); below
   it the score board is bolted to a steel wall under a work lamp (#best); at the back is the members' locked cage
   (#members); a lintel; the front of a big machine with its coin door, orange T-moulding down both sides (#door); a
   lintel, and out the back to the cartridge graveyard at dusk (#graveyard keeps its own backdrop); a last lintel over the
   footer, the arcade's steel base plate. Dark, warm work-lamp light from the upper left, worn steel, low saturation, no
   glows. The workshop rooms blend into each other; the lintel is the one separator, wherever you change rooms: a slim
   gunmetal beam with worn hazard ends, the same material as the account bar's plate (sa176-02).
   The strip art of the old separator slots (rail-1..3) is hidden here, as are the coin door's picture (tex-door) and
   the footer backdrop (foot-art): CSS plus approved art only. Drafts of painted walls for these rooms wait for the
   owner's pick in site-art/01_drafts (section-*-20261022.png). */

.orange-cabinet{
  --sx-night:#07060b;                       /* the page's night (= --bg): every room fades to it at its edges */
  --sx-lamp:255,170,92;                     /* warm work-lamp light, for rgba() */
  --sx-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .86 0 0 0 0 .8 0 0 0 1.7 -.82'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.8 -.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.22'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='.5'/%3E%3C/svg%3E");
  /* rust and scratches: --sx-wear on small steel parts, the fainter --sx-scuff on big walls */
  --sx-wear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.032' numOctaves='5' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .34 0 0 0 0 .14 0 0 0 0 .05 0 0 0 2.6 -1.62'/%3E%3C/filter%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .05' numOctaves='2' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .77 0 0 0 0 .72 0 0 0 6 -4.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)' opacity='.55'/%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='.12'/%3E%3C/svg%3E");
  --sx-scuff:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022' numOctaves='5' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .13 0 0 0 0 .05 0 0 0 2.4 -1.5'/%3E%3C/filter%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .04' numOctaves='2' seed='29' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .77 0 0 0 0 .72 0 0 0 6 -4.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)' opacity='.3'/%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='.07'/%3E%3C/svg%3E");
  /* the lintel: a gunmetal beam lit from above, bolts every 96 px, worn hazard paint on both ends */
  --sx-lintel:
    var(--sx-wear) 0 0/360px 360px,
    radial-gradient(circle,#958e86 0 1.3px,#3b3733 2px,#0b0a0a 2.7px,transparent 3.3px) 48px 50%/96px 100% repeat-x,
    repeating-linear-gradient(-45deg,#b9561b 0 8px,#120f0f 8px 16px) 0 0/76px 100% no-repeat,
    repeating-linear-gradient(45deg,#b9561b 0 8px,#120f0f 8px 16px) 100% 0/76px 100% no-repeat,
    linear-gradient(to bottom,#57514b 0,#36322e 1px,#272421 3px,#1d1b19 45%,#151413 80%,#0b0a0a 100%);
  --sx-lintel-shadow:0 1px 0 rgba(0,0,0,.6),0 12px 20px rgba(0,0,0,.55),0 -6px 14px rgba(0,0,0,.35);
  --sx-lintel-h:18px;
  --sx-header-h:26px;
  --sx-tm:13px;                             /* the coin machine's T-moulding */
  /* a steel plate's four corner screws, for the plates screwed to the machine */
  --sx-screws:
    radial-gradient(circle at 10px 10px,#8f8a84 0 1.4px,#2b2826 2.1px,transparent 2.8px),
    radial-gradient(circle at calc(100% - 10px) 10px,#8f8a84 0 1.4px,#2b2826 2.1px,transparent 2.8px),
    radial-gradient(circle at 10px calc(100% - 10px),#8f8a84 0 1.4px,#2b2826 2.1px,transparent 2.8px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#8f8a84 0 1.4px,#2b2826 2.1px,transparent 2.8px)
}
@media (max-width:640px){.orange-cabinet{--sx-lintel-h:14px;--sx-header-h:20px;--sx-tm:8px}}

/* ---------- separators: the old strip slots give way to the lintel ---------- */
.orange-cabinet .sep>.rail{display:none}
.orange-cabinet .sep{margin:0}
.orange-cabinet .sep:not(#sep-1){position:relative;z-index:2;height:var(--sx-lintel-h)}
.orange-cabinet .sep:not(#sep-1)::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--sx-lintel);box-shadow:var(--sx-lintel-shadow)}

/* ---------- 1. outside: the yard falls into shadow behind the console's base ---------- */
.orange-cabinet #cab-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(9,7,8,0),rgba(9,7,8,.45) 40%,rgba(9,7,8,.86) 78%,#090708)}

/* ---------- 2. the threshold: the workshop's door header, the yard's last light on its top edge ---------- */
.orange-cabinet #sep-1{position:relative;z-index:2;height:clamp(46px,4.6vw,66px);background:linear-gradient(to bottom,#090708,#0a0809 60%,#0b0a0b)}
.orange-cabinet #sep-1::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--sx-header-h);pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--sx-lamp),.1),rgba(var(--sx-lamp),.5) 22%,rgba(var(--sx-lamp),.26) 52%,rgba(var(--sx-lamp),.44) 82%,rgba(var(--sx-lamp),.1)) 0 0/100% 1px no-repeat,var(--sx-lintel);
  box-shadow:0 1px 0 rgba(0,0,0,.6),0 16px 26px rgba(0,0,0,.62)}

/* ---------- 3. today's best: the score board bolted to a steel wall under a work lamp ---------- */
.orange-cabinet .best-sec{isolation:isolate;padding-top:64px;padding-bottom:84px}
.orange-cabinet .best-sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* the owner's pick (2026-10-22): the painted score wall, veiled behind the board so the rows stay readable */
  background:
    radial-gradient(ellipse 58% 72% at 50% 54%,rgba(7,6,11,.55),rgba(7,6,11,.16) 70%,rgba(7,6,11,0)),
    linear-gradient(rgba(7,6,11,.22),rgba(7,6,11,.22)),
    url(/arcade/art/ui/cabinet/section-score-wall-1672.webp) center 18%/cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 70px,#000 calc(100% - 90px),transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 70px,#000 calc(100% - 90px),transparent 100%)}

/* ---------- 4. members only: the locked cage at the back of the workshop ---------- */
.orange-cabinet .mem-sec{isolation:isolate;padding-top:56px;padding-bottom:88px}
.orange-cabinet .mem-sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* the owner's pick (2026-10-22): the painted members' back room behind its cage */
  background:
    radial-gradient(ellipse 50% 72% at 50% 52%,rgba(7,6,11,.46),rgba(7,6,11,0) 75%),
    linear-gradient(rgba(7,6,11,.14),rgba(7,6,11,.14)),
    url(/arcade/art/ui/cabinet/section-members-backroom-1672.webp) center 42%/cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 50px,#000 calc(100% - 70px),transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 50px,#000 calc(100% - 70px),transparent 100%)}
/* the heading on the account bar's gunmetal plate with hazard ends: light stamped letters, no glow */
.orange-cabinet .mem-h{display:grid;place-items:center;width:min(100%,640px);aspect-ratio:1539/137;margin:0 auto;padding-left:.16em;
  background:url(/arcade/art/ui/cabinet/nav-plate-sa176-02.webp) center/100% 100% no-repeat;filter:drop-shadow(0 6px 9px rgba(0,0,0,.5));
  font:900 clamp(17px,2vw,27px)/1 var(--f-display);letter-spacing:.16em;color:#efe5d3;text-shadow:0 2px 0 rgba(0,0,0,.75),0 -1px 0 rgba(255,255,255,.1)}
/* sealed cartridges: dark steel frames, a strip of hazard tape across each, a bone question mark */
.orange-cabinet .sealed-pic{border:1px solid rgba(214,196,160,.16);background:radial-gradient(ellipse at 50% 40%,#2a2522,#0a0909 75%);
  box-shadow:inset 0 0 0 1px #000,0 14px 28px rgba(0,0,0,.55)}
.orange-cabinet .sealed-pic::after{content:"";position:absolute;left:-12%;right:-12%;top:66%;height:20px;transform:rotate(-8deg);pointer-events:none;
  background:url(/arcade/art/ui/cabinet/strip-sa08-02-tile.webp) 0 0/auto 100% repeat-x;opacity:.82;filter:saturate(.8) brightness(.85);box-shadow:0 3px 6px rgba(0,0,0,.5)}
.orange-cabinet .sealed-q{color:#dccaa4;text-shadow:0 3px 0 rgba(0,0,0,.8)}
.orange-cabinet .sealed-name{color:#9d9488}
.orange-cabinet .sealed-tag{color:var(--amber)}

/* ---------- 5. the coin door: the front of a big machine, black crinkle steel between orange T-moulding ---------- */
.orange-cabinet .membership-backdrop{display:none}
.orange-cabinet .door-sec{padding-top:64px;padding-bottom:118px}
.orange-cabinet #door::before{content:"";position:absolute;top:0;bottom:0;left:max(8px,calc(50% - 700px));right:max(8px,calc(50% - 700px));z-index:-1;pointer-events:none;
  background:
    var(--sx-grain) 0 0/220px 220px,
    var(--sx-scuff) 0 0/420px 420px,
    /* T-moulding: rounded orange plastic edges, lit from the left */
    linear-gradient(90deg,#4a1a06,#c4521a 25%,#e9772f 42%,#b9471a 70%,#5a2008) 0 0/var(--sx-tm) 100% no-repeat,
    linear-gradient(90deg,#4a1a06,#a83f14 30%,#d0622a 50%,#9c3a12 75%,#3e1505) 100% 0/var(--sx-tm) 100% no-repeat,
    /* the dark channel where the moulding meets the panel */
    linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)) var(--sx-tm) 0/2px 100% no-repeat,
    linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)) calc(100% - var(--sx-tm)) 0/2px 100% no-repeat,
    /* the kick plate: a seam, darker steel and worn hazard paint along its foot */
    repeating-linear-gradient(-45deg,rgba(150,66,20,.5) 0 12px,rgba(0,0,0,0) 12px 24px) 0 calc(100% - 18px)/100% 12px no-repeat,
    linear-gradient(to bottom,rgba(255,236,214,.08) 0 1px,rgba(0,0,0,.65) 1px 3px,rgba(0,0,0,.3) 3px) 0 100%/100% 74px no-repeat,
    /* the control panel's overhang shades the top of the face */
    linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,0)) 0 0/100% 70px no-repeat,
    /* the work lamp from the upper left */
    linear-gradient(115deg,rgba(var(--sx-lamp),.075),rgba(var(--sx-lamp),0) 42%),
    linear-gradient(to bottom,#121113,#151416 40%,#131214 75%,#0e0d0f)}
/* out the back: the machine's room ends under a lintel and the graveyard's own dusk backdrop fades in below */
.orange-cabinet #door::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--sx-lintel-h);z-index:3;pointer-events:none;background:var(--sx-lintel);box-shadow:var(--sx-lintel-shadow)}

/* the coin door itself: black crinkle paint in a steel frame (the slot's picture inside the door is hidden) */
.orange-cabinet .door>.bgl{display:none}
.orange-cabinet .door{background:var(--sx-grain) 0 0/220px 220px,linear-gradient(165deg,#2a282b,#1b1a1d 38%,#131215);
  box-shadow:0 0 0 2px #050505,0 0 0 6px #2b2927,0 0 0 7px #48443f,0 26px 40px rgba(0,0,0,.6)}

/* the tier cards and the prize counter: steel instruction plates screwed to the machine */
.orange-cabinet .tier,.orange-cabinet #door .scores{background:var(--sx-screws),linear-gradient(180deg,#201f22,#18171a 55%,#141316);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.5),0 0 0 1px #050405,0 12px 22px rgba(0,0,0,.45)}
.orange-cabinet .tier:hover,.orange-cabinet .tier:focus-within{background:var(--sx-screws),linear-gradient(180deg,#262428,#1c1b1e 55%,#161518);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -2px 0 rgba(0,0,0,.5),0 0 0 1px rgba(255,184,77,.38),0 14px 26px rgba(0,0,0,.5)}
.orange-cabinet .perks li::before{background:#cdb48a;box-shadow:none}

/* ---------- 6. the footer: the arcade's steel base plate under the last lintel ---------- */
.orange-cabinet .foot-art{display:none}
.orange-cabinet .foot-body{background:
    var(--sx-grain) 0 0/220px 220px,
    var(--sx-scuff) 0 0/420px 420px,
    radial-gradient(circle at 18px 18px,rgba(178,168,156,.3) 0 1.4px,rgba(0,0,0,.7) 2.1px,transparent 2.7px) 0 0/120px 100% repeat-x,
    linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0)) 0 0/100% 60px no-repeat,
    radial-gradient(ellipse 50% 90% at 16% 0,rgba(var(--sx-lamp),.07),rgba(var(--sx-lamp),0) 70%),
    linear-gradient(to bottom,#141316,#100f11 55%,#0a090b)}