/* A self-contained little fair in the same wood, brass and plum palette. */
dialog:has(.dunk-game){width:min(1120px,calc(100vw - 28px));max-height:calc(100svh - 26px);border:1px solid #98734e;border-radius:22px;background:#3a251e;overflow:auto;box-shadow:0 30px 90px #100a08c9}
dialog:has(.dunk-game) .dialog-close{color:#f4dcaa;background:#67452e;border-color:#d4a66f66}
.dunk-game{position:relative;overflow:hidden;border-radius:20px;color:#eddbb8;font-family:Georgia,serif;background:#3c291f}
.dunk-heading{position:absolute;top:0;left:0;right:auto;width:34%;box-sizing:border-box;z-index:3;pointer-events:none;text-align:center;padding:20px 18px 24px;background:radial-gradient(ellipse at 50% 0,#1d171980,transparent 75%);text-shadow:0 2px 8px #1a0b06}
.dunk-heading>span{font:9px/1.2 Georgia;letter-spacing:.2em;text-transform:uppercase;color:#e9c88c}
.dunk-heading h2{font:43px/1 Georgia!important;font-weight:400!important;letter-spacing:-1.7px;margin:7px 0!important;color:#fff0ce}
.dunk-heading p{font:italic 12px/1.5 Georgia;color:#edcf9d;margin:8px 0 0}
.dunk-playfield{position:relative;height:min(80svh,640px);min-height:350px;isolation:isolate;overflow:hidden;background:#65412f url('../assets/generated/dunk-courtyard-all-v3.webp') center/cover no-repeat}
.dunk-crowd{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .18s ease;z-index:0}
.dunk-crowd.is-playing{opacity:1}.dunk-crowd-cheer{z-index:1}
.dunk-canvas{position:absolute;inset:70px 0 44px;width:100%;height:calc(100% - 114px);z-index:2;touch-action:none;outline:0}
.dunk-canvas canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline:none!important}
.dunk-canvas[data-dragging=true] canvas{cursor:grabbing}
.dunk-canvas:not([data-pointer-focus=true]) canvas:focus-visible{outline:2px solid #d1ab71!important;outline-offset:-5px;border-radius:12px}
.dunk-loading,.dunk-error{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;color:#f2d5a8;background:#2f231ac7;backdrop-filter:blur(5px)}
.dunk-loading i{width:23px;height:23px;border:2px solid #b68a4444;border-top-color:#e9c88c;border-radius:50%;animation:dunk-wait 1.3s linear infinite}
.dunk-error button{background:#643c48;color:#f8e6c7;border:1px solid #cda976;border-radius:30px;padding:13px 25px;font:14px Georgia}
.dunk-error[hidden]{display:none}
.dunk-score{position:absolute;left:24px;bottom:18px;z-index:3;display:flex;align-items:baseline;gap:6px;white-space:nowrap;padding:8px 12px;border-radius:4px;background:#2a1b1366;text-shadow:0 1px 3px #24140b;pointer-events:none}
.dunk-score b{font:24px/1 Georgia;font-variant-numeric:tabular-nums;color:#fff1ce}.dunk-score span{font:italic 11px Georgia;color:#f0d9b4}.dunk-score i{width:1px;height:20px;background:#e5c78c66;margin:0 6px}
.dunk-sound{position:absolute;right:67px;top:20px;z-index:4;background:#412a1dc9;border:1px solid #d3b17c66;border-radius:24px;color:#f8e4bf;font:11px Georgia;padding:9px 12px;cursor:pointer;box-shadow:0 2px 8px #180e1840}
.dunk-sound:focus-visible{outline:2px solid #f4daa2;outline-offset:4px}
.dunk-help{position:absolute;bottom:18px;left:230px;right:230px;z-index:3;pointer-events:none;text-align:center;text-shadow:0 1px 4px #1e120a,0 0 10px #1e120a}
.dunk-instruction{font:13px/1.4 Georgia;color:#fff0d1;margin:0;min-height:1.4em}
.dunk-keyboard{font:10px/1.5 Georgia;color:#f0d8b4;letter-spacing:.03em;margin:4px 0 0}
.ledge-game{position:absolute;left:calc(50% + 109px);width:32px;height:32px;padding:0;display:grid;place-items:center;border:1px solid #b38d55;border-radius:50%;background:radial-gradient(circle at 36% 25%,#efce87,#8a5f31);box-shadow:0 2px 3px #21110c88,inset 0 1px #ffe0a777;cursor:pointer}
.ledge-game span{display:block;width:21px;height:21px;border-radius:50%;background:radial-gradient(circle,#a55255 0 3px,#ecdfbb 3.5px 6px,#a55255 6.5px 8px,#ecdfbb 8.5px);box-shadow:inset 0 1px 2px #35201a55}.ledge-game:hover{filter:brightness(1.12)}.can-pan .ledge-game{margin-top:32px}
@keyframes dunk-wait{to{transform:rotate(360deg)}}
@media(max-width:680px){
 dialog:has(.dunk-game){width:calc(100vw - 12px);max-height:calc(100svh - 14px)}
 .dunk-heading{width:auto;right:0;padding:16px 53px 20px;background:linear-gradient(#1d1719a6,transparent)}.dunk-heading h2{font-size:34px!important}.dunk-heading p{font-size:10px}.dunk-heading>span{font-size:8px}
 .dunk-playfield{height:min(76svh,600px);min-height:390px;max-height:calc(100svh - 38px);background-image:url('../assets/generated/dunk-courtyard-mobile-v1.webp')}
 .dunk-canvas{inset:42% 0 46px;height:calc(58% - 46px)}
 .dunk-score{left:12px;bottom:13px;padding:5px 8px;gap:4px}.dunk-score b{font-size:18px}.dunk-score span{font-size:9px}.dunk-score i{height:15px;margin:0 3px}
 .dunk-sound{top:92px;right:12px;padding:8px 10px;font-size:10px}.dunk-help{left:auto;right:14px;bottom:18px;width:45%;text-align:right}.dunk-instruction{font-size:10px}.dunk-keyboard{display:none}.ledge-game{left:calc(50% + 97px)}
}
@media(max-width:360px){.ledge-game{left:calc(50% + 76px)}.dunk-playfield{min-height:380px}.dunk-score b{font-size:16px}.dunk-score{left:9px}.dunk-help{right:11px;width:44%}}
@media(max-height:620px) and (min-width:681px){.dunk-playfield{height:calc(100svh - 38px);min-height:280px}.dunk-canvas{inset:50px 0 40px;height:calc(100% - 90px)}.dunk-heading{padding-top:12px}.dunk-heading h2{font-size:32px!important}.dunk-heading p{display:none}.dunk-score{left:14px;bottom:12px}.dunk-help{left:200px;right:80px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.dunk-loading i{animation:none}.dunk-game *{transition:none!important}.dunk-crowd{display:none}}

.dunk-sound{width:36px;height:36px;min-width:36px;padding:8px;display:grid;place-items:center}.dunk-sound svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}.dunk-sound[aria-pressed=false] .sound-waves,.dunk-sound[aria-pressed=true] .sound-muted{display:none}
@media(max-width:680px){.dunk-sound{width:34px;height:34px;min-width:34px;padding:8px}}