/* The game details pop-up as the owner-picked steel cartridge (Details A, 2026-10-23; site-art details-a-shell-20261023).
   The shell picture (details-shell-a-*.webp, 1464x872) lies on top; its screen and three thumbnail windows are transparent,
   so the trailer and screens sit behind it and the bezel overlaps their edges. Every region below is the measured opening
   in percent of the picture (site-art/02_cutouts/details-a-shell-20261023/pieces.json). Text sizes use the shell's width
   (cqw) so the label reads the same at every size; phones move the label's text under the shell. */
/* the open label and its dimmed backdrop sit above the robot's flying layer (.escort-overlay, z-index 90 in
   console-integration.css), so the robot never covers the red close button or the label's text (round 2, 2026-10-23) */
.ns .dlg-back{z-index:95}
.ns .dlg.dsh{position:relative;container-type:inline-size;display:block;width:min(1600px,98vw,calc((100svh - 16px) * 1464 / 872));max-height:none;overflow:visible;padding:0;
  border:0;border-radius:0;background:none;box-shadow:none}
.dsh-body{position:relative;aspect-ratio:1464/872;filter:drop-shadow(0 26px 40px rgba(0,0,0,.7))}
/* the dark plate behind the windows, so an empty thumbnail slot reads as a switched-off screen */
.dsh-body::before{content:"";position:absolute;left:8%;top:10%;width:56%;height:69%;background:#050506;
  background-image:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.dsh-frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;user-select:none}

/* the screen: the existing tube (boot, channel effects, trailer video) sized to the opening plus a little under the bezel */
.dsh .dsh-scr{position:absolute;left:7.9%;top:9.9%;width:55.7%;height:50.8%;z-index:1}
.dsh .dsh-scr .op{position:absolute;inset:0;overflow:hidden;border-radius:2.5%/4.5%;background:#020203}
.dsh .dsh-scr .op img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dsh .dsh-scr .osd{display:none}   /* the player already chose this game: no title or P1/FREE PLAY text over its screen */
.dsh .cabinet-detail-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:8;background:#050506}

/* the three thumbnail windows */
.dsh .thumbs{position:absolute;left:9.4%;top:61.3%;width:52.7%;height:16.7%;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:1.55%}
.dsh .th{position:relative;width:auto;height:100%;padding:0;border:0;border-radius:0;overflow:hidden;background:#050506;box-shadow:none;cursor:pointer}
.dsh .th img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;filter:brightness(.62) saturate(.8);transition:filter .18s}
.dsh .th:hover img,.dsh .th:focus-visible img{filter:brightness(.88) saturate(.95)}
.dsh .th.on img{filter:none}
.dsh .th.on::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 .32cqw #e7c98e}
.dsh .th:focus-visible{outline:.3cqw solid #ffd27a;outline-offset:-.3cqw}
/* the trailer thumb: the clip's poster with a play mark (game-media.js) */
.dsh .th.feature-trailer-tab{min-width:0;font:inherit;color:inherit;background:#050506;border:0}
.dsh .th .play-mark{position:absolute;left:50%;top:50%;width:3.2cqw;height:3.2cqw;translate:-50% -50%;border-radius:50%;background:rgba(16,12,10,.62);
  box-shadow:0 0 0 .18cqw rgba(231,201,142,.85)}
.dsh .th .play-mark::after{content:"";position:absolute;left:38%;top:28%;border-style:solid;border-width:.72cqw 0 .72cqw 1.15cqw;border-color:transparent transparent transparent #f3e3c2}

/* the cream label: a sibling of the shell, placed over it in percent of the dialog (whose height is the shell's) */
.dsh .dlg-info{position:absolute;left:66.6%;top:11.6%;width:24.4%;height:67.6%;z-index:4;padding:0 .4cqw 0 0;gap:0;display:block;
  overflow:auto;scrollbar-width:thin;scrollbar-color:#9a7a52 transparent;color:#2a211b}
.dsh .dlg-kind{display:flex;flex-wrap:wrap;gap:.5cqw .9cqw;margin:0 0 .9cqw}
.dsh .dlg-kind span{display:inline-flex;align-items:center;gap:.4cqw;padding:.25cqw .7cqw .25cqw .3cqw;border-radius:99px;background:#2b231d;
  font:700 max(9px,.72cqw)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#f0dcb4}
.dsh .dlg-kind .ga{width:max(14px,1.35cqw)}
.dsh h2{margin:0 0 .8cqw;font:900 clamp(26px,3.9cqw,58px)/.92 var(--f-display);text-transform:uppercase;letter-spacing:.005em;color:#16110d;text-wrap:balance;overflow-wrap:anywhere}
.dsh .dlg-hook{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:0 0 1.1cqw;font:600 max(12px,1.12cqw)/1.38 var(--f-body);color:#3b2e24}
.dsh .dsh-h{margin:0 0 .7cqw;padding-top:1cqw;border-top:.12cqw solid rgba(60,42,28,.42);font:800 max(11px,1.02cqw)/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:#16110d}
.dsh .dlg-ctl{display:grid;gap:.75cqw;margin:0;padding:0;list-style:none;font:500 max(11px,.98cqw)/1.42 var(--f-body);color:#3b2e24}
.dsh .dlg-ctl li{position:relative;padding-left:2.3cqw}
/* a brass rivet in front of each line, like the label's own screws */
.dsh .dlg-ctl li::before{content:"";position:absolute;left:.35cqw;top:.42em;width:.95cqw;height:.95cqw;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d9b77a,#8a6532 55%,#4a3420);box-shadow:0 .08cqw .12cqw rgba(0,0,0,.45)}
  box-shadow:inset 0 -.18cqw 0 #8f8574,0 .1cqw 0 #5d5346,0 0 0 .08cqw #4a4036}

/* drawn how-to-play (howto.js): a picture of the action, the key caps or mouse button, one or two words */
.dsh .dlg-ctl.ht{gap:.45cqw}
.dsh .dlg-ctl.ht li{padding:0}.dsh .dlg-ctl.ht li::before{display:none}
.dsh .ht-row{display:grid;grid-template-columns:2.3cqw minmax(5.2cqw,auto) 1fr;align-items:center;gap:.8cqw;min-height:2.5cqw}
.dsh .ht-row.menu{opacity:.78}
.dsh .ht-pic{width:2.1cqw;height:2.1cqw;fill:none;stroke:#2b211a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dsh .ht-l{font:700 max(12px,1.16cqw)/1.15 var(--f-body);color:#2a211b}
.dsh .ht-in{display:flex;align-items:center;gap:.35cqw;flex-wrap:wrap}
.dsh .ht-key{display:inline-grid;place-items:center;min-width:2.15cqw;height:2.15cqw;padding:0 .5cqw;border-radius:.4cqw;
  font:800 max(10px,1.02cqw)/1 var(--f-mono);color:#1b1612;background:linear-gradient(#f4efe6,#cfc6b6);
  box-shadow:inset 0 -.26cqw 0 #9a8f7e,0 .14cqw 0 #4a4036,0 0 0 .1cqw #4a4036}
.dsh .ht-key.wide{min-width:4.6cqw;font-size:max(9px,.86cqw)}
/* W over A S D, like the real keyboard */
.dsh .ht-cross{display:grid;grid-template-columns:repeat(3,2.05cqw);grid-template-rows:repeat(2,2.05cqw);gap:.18cqw}
.dsh .ht-cross .c0{grid-column:2;grid-row:1}.dsh .ht-cross .c1{grid-column:1;grid-row:2}.dsh .ht-cross .c2{grid-column:2;grid-row:2}.dsh .ht-cross .c3{grid-column:3;grid-row:2}
.dsh .ht-cross .ht-key{min-width:0;padding:0}
/* a mouse with the button to press filled in orange */
.dsh .ht-mouse{position:relative;display:inline-block;width:1.9cqw;height:2.7cqw;border-radius:.95cqw .95cqw 1.1cqw 1.1cqw;background:#f1ebe0;
  box-shadow:inset 0 -.2cqw 0 #b9ae9c,0 0 0 .12cqw #3b3028}
.dsh .ht-mouse::before{content:"";position:absolute;left:50%;top:0;width:.12cqw;height:1.1cqw;background:#3b3028;translate:-50% 0}
.dsh .ht-mouse i{position:absolute;top:.12cqw;width:calc(50% - .18cqw);height:1cqw;background:#e2702e}
.dsh .ht-mouse.b0 i{left:.12cqw;border-radius:.85cqw 0 0 0}
.dsh .ht-mouse.b2 i{right:.12cqw;border-radius:0 .85cqw 0 0}
.dsh .ht-mouse.b1 i{left:50%;width:.5cqw;translate:-50% 0;border-radius:.2cqw}

/* the keys: the painted LOAD key is an invisible hit area over the picture; Play and close are pictures of their own (below) */
.dsh-key{position:absolute;z-index:5;display:block;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dsh-key::after{content:"";position:absolute;inset:0;border-radius:.6cqw;transition:background .12s,box-shadow .12s}
.dsh-key:hover::after{background:rgba(255,236,200,.1)}
.dsh-key:active::after,.dsh-key.down::after{background:rgba(0,0,0,.24);box-shadow:inset 0 .3cqw .5cqw rgba(0,0,0,.45)}
.dsh-key:focus-visible{outline:.32cqw solid #ffd27a;outline-offset:.2cqw;border-radius:.6cqw}
.dsh-load{left:66.1%;top:85.8%;width:16.2%;height:10.3%}

/* the green PLAY plate (2026-10-23, the owner: "use a button that matches with the load one, make it green"): the LOAD
   key's enamel plate in green, covering the painted orange key (578-912 x 742-850 of the 1464 picture) with a little to
   spare. The press is a sink and a darker shade; cab.js holds it, springs it back with the 'up' click and only then opens
   the game's tab. */
/* the clickable key is the whole painted key and socket (566-922 x 732-860), so a child's press anywhere on it counts;
   the plate (342 px wide) sits inside it over the orange key */
.dsh-play{left:38.5%;top:83.7%;width:24.64%;height:15.1%}
.dsh-cap{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.dsh-play .dsh-cap{left:2.88%;top:4.02%;width:94.82%;height:92.33%;filter:drop-shadow(0 .22cqw .2cqw rgba(0,0,0,.55));transition:transform .08s ease-out,filter .08s ease-out}
.dsh-play::after{display:none}
.dsh-play:hover .dsh-cap{filter:drop-shadow(0 .22cqw .2cqw rgba(0,0,0,.55)) brightness(1.07)}
.dsh-play.down .dsh-cap,.dsh-play:active .dsh-cap{transform:translateY(.4cqw) scale(.98);filter:drop-shadow(0 .04cqw .04cqw rgba(0,0,0,.6)) brightness(.78)}
.dsh-play:focus-visible{outline-offset:.1cqw;border-radius:.9cqw}

/* the big red close button (2026-10-23, the owner: "a larger red button on the right top corner ... make it glow" so kids
   see where to exit). It sits over the painted small X, centred a little inward so it stays on the steel corner, with a
   calm red glow that breathes; reduced motion keeps the glow still. The picture is two layers split from one drawing
   (site-art details-a-close-red-20261023, ring and dome): the red dome under a still steel ring. A press sinks only the
   dome into its dark socket; the ring and its four screws stay where they are. */
.dsh-x{left:95.77%;top:9.62%;width:8.5%;height:auto;aspect-ratio:1;translate:-50% -50%;border-radius:50%;transition:scale .12s ease-out}
.dsh-x::after{display:none}
/* the socket the dome sinks into: the dome's circle (centre 600,583 and r 434 of the 1198 px drawing) */
.dsh-sock{position:absolute;left:13.86%;top:12.44%;width:72.45%;height:72.45%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 38%,#1c0f0b,#060303 72%)}
.dsh-x .dsh-dome{transition:translate .1s ease-out,scale .1s ease-out,filter .1s ease-out}
.dsh-x::before{content:"";position:absolute;inset:5%;border-radius:50%;pointer-events:none;opacity:.7;
  box-shadow:0 0 0 max(2px,.22cqw) rgba(255,96,70,.42),0 0 max(10px,1.5cqw) max(3px,.5cqw) rgba(255,48,28,.6);
  animation:dsh-glow 1.8s ease-in-out infinite}
@keyframes dsh-glow{0%,100%{opacity:.38;scale:.97}50%{opacity:1;scale:1.06}}
/* hover lifts the whole button and lights the glow fully (the breathing stops, or it would override the opacity) */
.dsh-x:hover{scale:1.05}
.dsh-x:hover::before{animation:none;opacity:1;scale:1.06}
.dsh-x:hover .dsh-dome{filter:brightness(1.08)}
.dsh-x:active .dsh-dome,.dsh-x.down .dsh-dome{translate:0 2.5%;scale:.97;filter:brightness(.78) saturate(1.08)}
.dsh-x:focus-visible{border-radius:50%;outline-offset:.35cqw}
@media (prefers-reduced-motion:reduce){.dsh-x::before{animation:none}}

/* phones: the shell keeps its screen, thumbnails and keys; the label's text moves under it onto a matching cream plate */
@media (max-width:760px){
  .ns .dlg.dsh{width:100%;max-height:calc(100svh - 20px);overflow:auto;overscroll-behavior:contain}
  .dsh .dlg-info{position:relative;left:auto;top:auto;width:auto;height:auto;margin:10px 4% 6px;padding:18px 18px 20px;overflow:visible;z-index:2;
    border-radius:6px;background:#e7d7b6;
    background-image:radial-gradient(circle at 12px 12px,#8a6b44 0 3px,#4b3a28 3.6px,transparent 4.4px),radial-gradient(circle at calc(100% - 12px) 12px,#8a6b44 0 3px,#4b3a28 3.6px,transparent 4.4px),
      radial-gradient(circle at 12px calc(100% - 12px),#8a6b44 0 3px,#4b3a28 3.6px,transparent 4.4px),radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#8a6b44 0 3px,#4b3a28 3.6px,transparent 4.4px),
      linear-gradient(170deg,#efe2c4,#ddc9a3);
    box-shadow:0 0 0 3px #2c2620,0 10px 24px rgba(0,0,0,.6)}
  .dsh .dlg-kind{gap:6px;margin-bottom:10px}.dsh .dlg-kind span{padding:4px 9px 4px 4px;gap:5px;font-size:10px}.dsh .dlg-kind .ga{width:18px}
  .dsh h2{font-size:34px;margin-bottom:8px}
  .dsh .dlg-hook{-webkit-line-clamp:4;font-size:14px;margin-bottom:12px}
  .dsh .dsh-h{padding-top:12px;border-top-width:1px}
  .dsh .dsh-h{font-size:13px;margin-bottom:8px}
  .dsh .dlg-ctl{gap:8px;font-size:13px}.dsh .dlg-ctl li{padding-left:24px}
  .dsh .dlg-ctl li::before{left:4px;width:10px;height:10px;box-shadow:0 1px 1px rgba(0,0,0,.45)}
  .dsh .ht-row{grid-template-columns:24px minmax(60px,auto) 1fr;gap:9px;min-height:32px}
  .dsh .ht-pic{width:22px;height:22px}.dsh .ht-l{font-size:14px}
  .dsh .ht-key{min-width:26px;height:26px;padding:0 6px;border-radius:5px;font-size:12px;box-shadow:inset 0 -3px 0 #9a8f7e,0 2px 0 #4a4036,0 0 0 1px #4a4036}
  .dsh .ht-key.wide{min-width:52px;font-size:11px}
  .dsh .ht-cross{grid-template-columns:repeat(3,26px);grid-template-rows:repeat(2,26px);gap:3px}
  .dsh .ht-mouse{width:20px;height:28px;border-radius:10px 10px 12px 12px;box-shadow:inset 0 -2px 0 #b9ae9c,0 0 0 1.5px #3b3028}
  .dsh .ht-mouse::before{width:1.5px;height:11px}.dsh .ht-mouse i{top:1.5px;width:calc(50% - 2px);height:10px}
  .dsh .th .play-mark{width:24px;height:24px}.dsh .th .play-mark::after{border-width:5px 0 5px 8px}
  /* the close button keeps a 44 px finger target. The dialog scrolls (and so clips) on phones, so it gets a 12 px margin
     for the button's glow, and a button grown past 8.5% moves its centre inward by what it grew: its right edge stays on the
     shell's edge and it still covers the painted X (cqw is the shell's width here) */
  .ns .dlg.dsh{padding:12px 12px 0}
  .dsh-x{width:max(44px,8.5cqw);left:calc(95.77% - max(0px,22px - 4.25cqw));top:calc(9.62% + max(0px,22px - 4.25cqw) * .6)}
  /* the Play key's touch area grows to 44 px tall without changing the picture */
  .dsh-play::after{display:block;inset:min(0px,calc(50% - 22px)) 0;background:none!important;box-shadow:none!important}
}