/* Join the army (#door): the owner's favourite library characters as die-cut stickers above the membership cards
   (site-art army-sticker-*, 2026-10-23). They crowd in at slight angles, bob out of step, and wiggle when pointed at;
   reduced motion keeps them still. */
.army{position:relative;display:flex;justify-content:center;align-items:flex-end;margin:6px auto 4px;padding:0 10px;max-width:1180px;pointer-events:none}
.army-s{--r:0deg;--y:0px;--h:132px;position:relative;flex:0 0 auto;width:calc(var(--h) * .95);height:var(--h);margin:0 -10px;pointer-events:auto;
  transform:translateY(var(--y)) rotate(var(--r));transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.army-s img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 7px rgba(0,0,0,.55));
  animation:army-bob 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.37s)}
.army-s:hover{z-index:2;transform:translateY(calc(var(--y) - 10px)) rotate(var(--r)) scale(1.1)}
.army-s:hover img{animation:army-wiggle .5s ease-in-out infinite}
.army-s.s0{--r:-7deg;--y:10px}.army-s.s1{--r:5deg;--y:-4px}.army-s.s2{--r:-3deg;--y:6px}.army-s.s3{--r:4deg;--y:-2px;--h:140px}
.army-s.lead{--r:0deg;--y:-6px;--h:176px;z-index:1;margin:0 2px}
.army-s.s5{--r:-4deg;--y:0px;--h:140px}.army-s.s6{--r:3deg;--y:6px}.army-s.s7{--r:-5deg;--y:-2px}.army-s.s8{--r:6deg;--y:8px}.army-s.s9{--r:-6deg;--y:-6px}
@keyframes army-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes army-wiggle{0%,100%{rotate:0deg}25%{rotate:-4deg}75%{rotate:4deg}}
.ns.rm .army-s img,.ns.rm .army-s:hover img{animation:none}
@media (prefers-reduced-motion:reduce){.army-s img,.army-s:hover img{animation:none}}
@media (max-width:1100px){.army-s{--h:104px;margin:0 -8px}.army-s.lead{--h:140px}.army-s.s3,.army-s.s5{--h:110px}}
/* phones: they wrap into two rows */
@media (max-width:760px){
  .army{flex-wrap:wrap;row-gap:4px;padding:0}
  .army-s{--h:70px;margin:0 -4px}.army-s.lead{--h:86px}.army-s.s3,.army-s.s5{--h:74px}
}

/* Donate or Patron (the old coin door's left panel): two big picks with their Eggbots, the amount coins under Donate.
   The coin display, LCD, coin slot and tape stay in the page for cab.js's door code but are not shown. */
.door-sec .door-top,.door-sec .cslot-col,.door-sec .door-tape{display:none}
.door-sec .slots{display:block}
.choose{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 14px}
.pick{position:relative;display:grid;justify-items:center;gap:2px;padding:12px 8px 12px;border:0;border-radius:10px;cursor:pointer;text-decoration:none;color:#e9dfcf;
  background:linear-gradient(180deg,#2a282b,#1b1a1d);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px #3a3539,0 6px 14px rgba(0,0,0,.45);
  transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .18s}
.pick img{width:min(118px,100%);aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 5px 6px rgba(0,0,0,.55));transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.pick b{font:900 22px/1 var(--f-display);letter-spacing:.04em;text-transform:uppercase;color:#f3e6cc}
.pick span{font:600 12px/1.25 var(--f-body);color:#b7aa96;text-align:center}
.pick:hover{transform:translateY(-3px)}.pick:hover img{transform:rotate(-5deg) scale(1.06)}
.pick.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 2px #e2702e,0 6px 14px rgba(0,0,0,.45)}
.pick:focus-visible{outline:3px solid #ffd27a;outline-offset:3px}
.ns.rm .pick,.ns.rm .pick img{transition:none}

/* The amount coins (site-art donate-coin-*-20261023, 2026-10-23: the owner asked for coins that look unique, and for no
   text under them): four struck coins in a recessed coin tray under the two picks, one shape and metal per amount (copper
   hex nut $3, nickel gear $5, brass octagon $10, gold crown $25). A tap flips a copy of the coin into the Donate Eggbot's
   box (.amt-fly, cab.js dropCoin) and opens the support page. The chosen coin keeps an orange tick like .pick.on. The note
   and link that sat under the row are screen-reader text; the link shows only while it has keyboard focus. */
.door-sec .amts-col{display:block}
/* The coins are Donate's (review, 2026-10-23: at rest nothing tied the tray to Donate rather than Patron): the tray wears the
   selected Donate pick's orange rim, and a short steel chute with orange rails runs from the Donate pick down into the
   tray, so the pick and its tray read as one piece. A faint chevron in the chute points up, the way a coin travels. */
.amts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;align-items:center;justify-items:center;padding:10px 4px 12px;border-radius:14px;
  background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(255,170,92,.07),rgba(255,170,92,0)),linear-gradient(180deg,#0b0a0c,#141316 70%,#18171a);
  box-shadow:inset 0 3px 9px rgba(0,0,0,.9),inset 0 0 0 1px rgba(0,0,0,.95),0 0 0 2px #e2702e,0 6px 14px rgba(0,0,0,.45)}
#pick-don::after{content:"";position:absolute;left:50%;top:100%;width:44px;height:28px;margin-left:-22px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M2 7l5-5 5 5' fill='none' stroke='%23e2702e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='.75'/%3E%3C/svg%3E") 50% 36%/14px 8px no-repeat,
    linear-gradient(180deg,#1b1a1d,#0b0a0c);
  box-shadow:inset 2px 0 0 #e2702e,inset -2px 0 0 #e2702e,inset 4px 0 3px rgba(0,0,0,.5),inset -4px 0 3px rgba(0,0,0,.5)}
.amt{position:relative;display:grid;place-items:center;width:100%;max-width:84px;aspect-ratio:1;padding:3px;border:0;border-radius:16px;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .24s cubic-bezier(.3,1.6,.5,1)}
.amt img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 5px 4px rgba(0,0,0,.65));transition:filter .2s}
@media (hover:hover){
  .amt:hover{transform:translateY(-5px) rotate(-8deg) scale(1.07)}
  .amt:hover img{filter:drop-shadow(0 10px 7px rgba(0,0,0,.55)) brightness(1.08)}
}
.amt:active{transform:translateY(2px) scale(.9);transition-duration:.06s}
.amt:active img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.75)) brightness(.94)}
.amt.on::after{content:"";position:absolute;left:32%;right:32%;bottom:-5px;height:3px;border-radius:2px;background:#e2702e;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.amt:focus-visible{outline:3px solid #ffd27a;outline-offset:2px}
/* the flying copy lives on <body>, outside .ns */
.amt-fly{position:fixed;z-index:70;margin:0;padding:0;pointer-events:none;object-fit:contain;filter:drop-shadow(0 6px 5px rgba(0,0,0,.55));will-change:transform,opacity}
.door-sec .door-more{margin-top:14px;font-size:14px}
.door-sec .door-more:not(:focus-within){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ns.rm .amt,.ns.rm .amt img{transition:none}
@media (prefers-reduced-motion:reduce){.amt,.amt img{transition:none}}
/* room under the orange-rimmed tray for the door's bottom rivets (they sat on the rim) */
.door-sec .door{padding-bottom:40px}
@media (max-width:760px){.amts{gap:2px;padding:8px 6px 10px}.door-sec .door{padding-bottom:36px}}

/* Workshop is not on sale yet (review, 2026-10-23): its card is taped shut with the hazard tape the sealed Members-only
   cartridges wear (strip-sa08-02, sections.css .sealed-pic), the card dims a little, and the price line reads Coming soon.
   Its key is the hazard-striped key reading "Soon" (cab.js slot key-work), which opens the FAQ answer. */
.tier.soon .mface{filter:drop-shadow(0 14px 16px rgba(0,0,0,.55)) saturate(.75) brightness(.82)}
.mcard .soon-tape{position:absolute;left:-9%;right:-9%;bottom:15%;height:24%;transform:rotate(-9deg);pointer-events:none;
  background:url(/arcade/art/ui/cabinet/strip-sa08-02-tile.webp) 0 0/auto 100% repeat-x;filter:saturate(.85) brightness(.95);
  box-shadow:0 3px 6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,236,190,.25)}
.tier .soon-tag{padding:4px 7px 3px;border-radius:3px;color:#1a1208;letter-spacing:.14em;
  background:repeating-linear-gradient(-45deg,#f0b43a 0 7px,#e9a72c 7px 8px);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 2px 0 rgba(0,0,0,.4)}