/* Supplied artwork owns the cabinet surface. All rules are arcade-only. */
.wa-machine.wa-art{padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible;isolation:isolate;container-type:inline-size}
.wa-machine.wa-art::before,.wa-machine.wa-art::after{content:none}
.wa-art .wa-cabinet{display:block;width:100%;height:auto;margin:0;pointer-events:none}
.wa-art .wa-crown,.wa-art .wa-apron{display:none}
.wa-art .wa-body,.wa-art .wa-left,.wa-art .wa-right,.wa-art .wa-plaque,.wa-art .wa-counter,.wa-art .wa-radio-board,.wa-art .wa-light-plaque{display:contents}
.wa-art .wa-plaque::before,.wa-art .wa-plaque::after,.wa-art .wa-board::before,.wa-art .wa-board::after{content:none}
.wa-art .wa-plaque h2,.wa-art .wa-light-number,.wa-art .wa-hole>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0}

/* Center ink is a lossless excerpt of the supplied b/d paper, never a redraw.
   Contain preserves proportions on the shallower 20-hole paper. The 2% mask
   affects blank texture edges only; every letter/arrow/guide line is opaque. */
.wa-art .wa-board{position:absolute;display:flex;align-items:center;justify-content:center;min-width:0;max-height:none;aspect-ratio:auto;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;z-index:1}
.wa-art .wa-letter{display:block;width:auto;height:auto;max-width:90%;max-height:100%;aspect-ratio:auto;object-fit:contain;margin:0;filter:none;mix-blend-mode:normal;border-radius:0;mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent);-webkit-mask-composite:source-in}

/* Invisible native controls sit exactly over the artwork's arrows and labels. */
.wa-art .wa-counter button,.wa-art .wa-start{position:absolute;display:block;min-width:0;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;text-shadow:none;color:transparent;font-size:0;line-height:1;cursor:pointer;z-index:4;transform:none;filter:none}
.wa-art .wa-counter button:hover,.wa-art .wa-start:hover,.wa-art .wa-counter button:disabled,.wa-art .wa-start:disabled{background:transparent;box-shadow:none;opacity:1;transform:none;filter:none}
.wa-art .wa-counter output{position:absolute;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:0;margin:0;border:0;border-radius:3px;box-shadow:none;background:#f9efdf url('../assets/arcade/final/counter-paper.png') left center / auto 100% repeat-x;color:#091921;font:bold 3.45cqw/1 Georgia,'Times New Roman',serif;font-variant-numeric:tabular-nums;z-index:3;pointer-events:none}
/* Preserve the supplied default 5 and 10/20 numerals exactly. */
.wa-art .wa-seconds output[data-value="5"],.wa-art .wa-count output[data-default="10"][data-value="10"],.wa-art .wa-count output[data-default="20"][data-value="20"]{opacity:0}
.wa-art.wa-count-20 .wa-counter output{font-size:3.3cqw}
.wa-art .wa-radio-board label{position:absolute;display:block;padding:0;margin:0;min-height:0;font-size:0;line-height:1;color:transparent;z-index:4}
.wa-art .wa-radio-board input{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer}
.wa-art .wa-radio-board input:disabled{cursor:default}
.wa-art .wa-radio-board label:focus-within{outline:3px solid #08a9ff;outline-offset:2px}
.wa-art .wa-radio-skin{position:absolute;display:block;background:url('../assets/arcade/final/radio-off.png') center / 100% 100% no-repeat;z-index:5;pointer-events:none}
.wa-art[data-audio-mode="phoneme"] .wa-radio-phoneme,.wa-art[data-audio-mode="example"] .wa-radio-example{background-image:url('../assets/arcade/final/radio-on.png')}
.wa-art .wa-start:not([data-label="Start"])::after{content:attr(data-label);position:absolute;inset:15% 8%;display:flex;align-items:center;justify-content:center;background:#075544 url('../assets/arcade/final/start-green.png') left center / auto 100% repeat-x;color:#fff1d1;font:bold 3.1cqw/1 Georgia,'Times New Roman',serif;pointer-events:none}

/* Always ten fixed sockets. Their on/off glass comes from the supplied board. */
.wa-art .wa-lights{position:absolute;inset:0;display:block;padding:0;margin:0;z-index:2;pointer-events:none}
.wa-art .wa-light-unit{position:absolute;display:block;padding:0;margin:0}
.wa-art .wa-bulb,.wa-art .wa-bulb.lit{display:block;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background:url('../assets/arcade/final/bulb-off.png') center / 100% 100% no-repeat}
.wa-art .wa-bulb.lit{background-image:url('../assets/arcade/final/bulb-on.png')}

/* The source image supplies every hole, rim, label and deck. Clip only sprites.
   The existing rise/bonk keyframes and controller deadlines remain untouched. */
.wa-art .wa-deck{position:absolute;inset:0;display:block;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;z-index:3;pointer-events:none}
.wa-art .wa-hole{position:absolute;min-width:0;text-align:center}
.wa-art .wa-hole-mouth{position:relative;width:100%;height:100%;--wa-hole-height:inherit;border:0;border-radius:0;background:transparent;box-shadow:none;clip-path:none}
.wa-art .wa-gopher-clip{height:240%;clip-path:url(#wa-art-gopher-opening);background:transparent}

/* A centered secondary action beneath the cabinet's star. */
.wa-restart-row{display:flex;justify-content:center;margin:12px 0 4px}
.wa-shell .wa-restart{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 23px;border:1px solid #b78540;border-radius:999px;background:linear-gradient(#fff9e9,#f9e5be);color:#694317;font-size:14px;font-weight:800;box-shadow:0 3px 8px #5b391819;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.wa-restart-icon{display:inline-block;font-size:23px;line-height:1;transition:transform .2s ease}
.wa-shell .wa-restart:active{transform:translateY(1px) scale(.97);box-shadow:0 1px 3px #5b391822}
.wa-shell>.wa-status:empty{display:none}

/* Animate actual source pixels, not transparent hitboxes. Native photo crops
   are sampled as CSS backgrounds, so the artwork files stay unchanged. */
.wa-art .wa-counter button::before,.wa-art .wa-start::before{content:'';position:absolute;inset:0;background-image:var(--wa-skin-image);background-size:var(--wa-skin-size);background-position:var(--wa-skin-position);background-repeat:no-repeat;opacity:0;pointer-events:none;transition:opacity .12s ease,transform .14s ease,filter .14s ease}
.wa-art .wa-counter button::before{border-radius:7px}
.wa-art .wa-start::before{border-radius:8px}
.wa-art .wa-start::after{transition:transform .14s ease}
/* Keep printed audio labels stationary; only the existing radio circle glows. */
.wa-art .wa-radio-board label::before{content:none}
.wa-art .wa-radio-skin{transition:transform .14s ease,filter .14s ease;transform-origin:center}

@media(hover:hover){
 .wa-shell .wa-restart:hover{transform:translateY(-2px);background:linear-gradient(#fffdf4,#ffe9bd);box-shadow:0 5px 12px #5b391827}
 .wa-shell .wa-restart:hover .wa-restart-icon{transform:rotate(-30deg)}
 .wa-art .wa-counter button:not(:disabled):hover::before,.wa-art .wa-start:not(:disabled):hover::before{opacity:1;transform:translateY(-1.5px);filter:brightness(1.08) drop-shadow(0 2px 2px #321b1360)}
 .wa-art .wa-start:not(:disabled):hover::after{transform:translateY(-1.5px)}
 .wa-art:has(.wa-radio-board label:first-child:hover input:not(:disabled)) .wa-radio-phoneme,.wa-art:has(.wa-radio-board label:last-child:hover input:not(:disabled)) .wa-radio-example{transform:scale(1.08);filter:brightness(1.12) drop-shadow(0 0 3px #ffbc5a)}
}
.wa-art .wa-counter button:not(:disabled):active::before,.wa-art .wa-start:not(:disabled):active::before{opacity:1;transform:translateY(1px) scale(.96);filter:brightness(.97)}
.wa-art .wa-start:not(:disabled):active::after{transform:translateY(1px) scale(.96)}
.wa-art:has(.wa-radio-board label:first-child:active input:not(:disabled)) .wa-radio-phoneme,.wa-art:has(.wa-radio-board label:last-child:active input:not(:disabled)) .wa-radio-example{transform:scale(.96);filter:brightness(1.05)}
.wa-shell .wa-restart:hover:active{transform:translateY(1px) scale(.97)}
@media(prefers-reduced-motion:reduce){
 .wa-shell .wa-restart,.wa-restart-icon,.wa-art .wa-counter button::before,.wa-art .wa-start::before,.wa-art .wa-start::after,.wa-art .wa-radio-board label::before,.wa-art .wa-radio-skin{transition:none}
 .wa-shell .wa-restart:hover,.wa-shell .wa-restart:active,.wa-shell .wa-restart:hover:active,.wa-shell .wa-restart:hover .wa-restart-icon,.wa-art .wa-counter button:hover::before,.wa-art .wa-counter button:active::before,.wa-art .wa-start:hover::before,.wa-art .wa-start:active::before,.wa-art .wa-start:hover::after,.wa-art .wa-start:active::after,.wa-art .wa-radio-board label:hover::before,.wa-art .wa-radio-board label:active::before,.wa-art .wa-radio-skin{transform:none!important}
}

/* Keep the desktop cabinet geometry unchanged; phones get a separate stage. */
.wa-art-stage{display:contents}