@font-face{font-family:Marker;src:url('/joebotarcade/assets/PermanentMarker-Regular.ttf') format('truetype');font-display:swap}
:root{--ink:#29183c;--paper:#fff1d4;--purple:#7626b0;--teal:#008e91;--board-height:106px;color-scheme:light;font-family:Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#ead6ae;color:var(--ink)}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{cursor:pointer;font:inherit}a{color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid #ff8d20;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.court{position:relative;isolation:isolate;width:100%;height:100%;height:100dvh;overflow:hidden;background:repeating-linear-gradient(0deg,transparent 0 31px,#ae947c36 32px 33px),repeating-linear-gradient(90deg,#e9d7b5 0 67px,#cbbb9b 68px 69px)}
.play-area{position:absolute;top:calc(env(safe-area-inset-top,0px) + var(--board-height));left:0;right:0;bottom:0;overflow:hidden;background:#e9d7b5 url('/joebotarcade/assets/gym-clean-v5.webp') center/100% 100% no-repeat}
/* One uniform playfield scale preserves the round ball and approved physics. */
.court-markings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.playfield{position:absolute;left:50%;bottom:env(safe-area-inset-bottom,0px);transform:translateX(-50%);width:var(--play-width,100%);height:var(--play-height,100%);pointer-events:none}
canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;touch-action:none;pointer-events:auto}
.hanging-banner{position:absolute;top:9%;width:28.5%;height:auto;overflow:hidden;z-index:1;filter:drop-shadow(2px 3px 2px #30203577);pointer-events:none}.champ{left:1%}.fans{right:1%}
.mascot{position:absolute;width:55%;left:-1%;bottom:23%;z-index:2;pointer-events:none;filter:drop-shadow(3px 5px 1px #45283644);transform-origin:50% 100%}
.mascot.celebrate{animation:celebrate .65s ease-in-out 2}@keyframes celebrate{50%{transform:translateY(-15px) rotate(-8deg)}}
.scoreboard{position:absolute;z-index:5;top:calc(env(safe-area-inset-top,0px) + 7px);left:50%;transform:translateX(-50%) rotate(-.4deg);width:min(calc(100% - 24px),370px);height:91px;padding:8px 12px 5px;border:4px solid #564c50;border-radius:3px;background:repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 3px),#181d27;box-shadow:inset 0 0 0 2px #0c1019,2px 4px 0 #322d35,4px 7px 5px #372c3c55;color:#faf0d6}
.scoreboard:before,.scoreboard:after{content:'';position:absolute;bottom:100%;height:18px;width:6px;background:#514953;border:1px solid #302936;z-index:-1}.scoreboard:before{left:17%}.scoreboard:after{right:17%}
.bolt{position:absolute;width:5px;height:5px;background:#9a8d84;border:1px solid #24222a;border-radius:50%;box-shadow:inset 0 1px #dfd5b8}.bolt-tl{top:2px;left:2px}.bolt-tr{top:2px;right:2px}.bolt-bl{bottom:2px;left:2px}.bolt-br{bottom:2px;right:2px}
.board-main{display:grid;grid-template-columns:1fr 118px 1fr;align-items:center;gap:4px;height:56px;text-align:center}
.score-label{display:block;font-size:10px;line-height:12px;font-weight:800;letter-spacing:.14em}
.digits{display:flex;height:39px;justify-content:center;align-items:center;color:#ffb74e;font:38px/1 monospace}
.digits svg{display:block;height:34px;max-width:100%;filter:drop-shadow(0 0 2px #ff8b2540)}
.board-center{display:flex;flex-direction:column;align-items:center;justify-content:center;height:64px;margin-top:-5px}.board-center img{width:111px;height:52px;object-fit:contain}.board-center #mode-label{font-size:8px;font-weight:800;letter-spacing:.08em;line-height:14px;white-space:nowrap;color:#dec9a0}
.board-bottom{display:flex;justify-content:space-around;border-top:1px solid #73655966;margin-top:4px;padding-top:3px;font-size:9px;letter-spacing:.1em;font-weight:700;line-height:12px}.board-bottom b{font:700 15px/12px monospace;letter-spacing:0;color:#ffa853;margin-left:8px}
.court-nav{position:absolute;top:3px;left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));display:flex;justify-content:flex-end;align-items:flex-start;z-index:6;pointer-events:none}
.menu-toggle{width:46px;height:46px;padding:11px;display:flex;flex-direction:column;justify-content:center;gap:5px;border:2px solid #48304b;border-radius:7px;background:#fff2d6e8;box-shadow:1px 2px #60434a77;pointer-events:auto}.menu-toggle span{height:3px;width:21px;background:#352440;border-radius:1px}
.scene-paper{display:flex;align-items:center;min-height:46px;padding:0 4px;font:clamp(14px,4.4vw,18px) Marker,Arial,sans-serif;text-decoration-thickness:2px;text-underline-offset:5px;pointer-events:auto}
.hint{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);left:5%;right:5%;z-index:4;pointer-events:none;text-align:center}
.hint span{display:inline-block;font:clamp(18px,5.4vw,26px)/1.3 Marker,Arial,sans-serif;padding:10px 20px;color:#25162f;background:#fff1ce;clip-path:polygon(1% 9%,8% 7%,7% 0,98% 4%,96% 13%,100% 18%,97% 87%,99% 96%,7% 100%,8% 92%,0 93%,2% 80%,0 71%);transform:rotate(-2deg)}.hint span:empty{display:none}
.shot-feedback{position:absolute;z-index:4;top:50%;left:47%;right:2%;margin:0;text-align:center;font:clamp(12px,3.5vw,15px)/1.35 Marker,Arial,sans-serif;color:#1c1535;pointer-events:none}.shot-feedback:not(:empty){background:#fff8e8;border:2px solid #392046;padding:10px 11px;border-radius:22px 25px 23px 17px;box-shadow:1px 3px 0 #392046}
#power-meter{position:absolute;z-index:4;bottom:23%;width:44%;left:53%;height:12px;accent-color:#06a7a4;border:2px solid #321743;border-radius:6px;background:#fff2ce;transform:rotate(-90deg);transform-origin:left center;pointer-events:none}progress[hidden]{display:none}
dialog{margin:auto;color:var(--ink);background:var(--paper);border:3px solid var(--ink);max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-width:calc(100% - 28px)}dialog::backdrop{background:#110b20ad}
.game-menu{width:350px;padding:18px 20px 20px;border-radius:13px;box-shadow:4px 6px #21122e;overflow:auto}
.menu-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--ink);padding-bottom:9px}.menu-heading h2{font:27px/1 Marker,Arial,sans-serif;margin:0}.menu-close{width:44px;height:44px;font-size:33px;line-height:1;border:0;background:transparent;color:var(--ink)}
.menu-row{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:54px;padding:12px 0;border:0;border-bottom:1px solid #b9a58f;border-radius:0;background:transparent;color:var(--ink);font-size:17px;font-weight:700;text-decoration:none;text-align:left;gap:16px}.menu-row span{font-size:22px}.menu-row[aria-current]{color:#077674}
.how-to{font-size:14px;line-height:1.5;margin:18px 0 14px}.personal-best{font-size:13px;line-height:1.4;font-weight:700;margin:0 0 3px}.storage-note{font-size:12px;line-height:1.4;color:#65566b;margin:0 0 16px}
.resume{width:100%;min-height:48px;border:2px solid var(--ink);border-radius:10px;background:var(--teal);color:#fff;font:19px Marker,Arial,sans-serif}
.result{overflow:visible;border-radius:25px;padding:110px 20px 22px;width:350px;box-shadow:5px 7px #160b29;text-align:center}.result img{position:absolute;top:-80px;left:50%;transform:translateX(-50%);height:205px;max-width:90%;filter:drop-shadow(0 4px 0 #201439)}.result h2{font:clamp(31px,10vw,43px)/1.12 Marker,Arial,sans-serif;letter-spacing:-1px;text-shadow:2px 3px #04b4a7;transform:rotate(-5deg);margin:8px 0 22px}.result p{font-size:14px;line-height:1.4}.result p:empty{display:none}.actions{display:flex;flex-direction:column;gap:12px}.actions>*{width:100%;min-height:50px;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font:22px Marker,Arial,sans-serif;border:3px solid #29113d;border-radius:21px;padding:13px 8px;box-shadow:0 4px #251035;background:linear-gradient(#ad39dd,#7222b2)}.actions .secondary{background:linear-gradient(#10d5cb,#00a4a4)}
noscript{position:fixed;inset:auto 10px 20px;padding:20px;background:var(--paper);z-index:10}
@media(max-width:350px){.board-main{grid-template-columns:1fr 106px 1fr}.board-center img{width:100px}.scoreboard{padding-left:8px;padding-right:8px}.scene-paper{font-size:14px}.hint span{padding:8px 16px}.game-menu{padding:12px 16px}.menu-row{min-height:49px}.how-to{margin:14px 0}}
@media(max-height:600px){:root{--board-height:98px}.scoreboard{height:85px;padding-top:5px}.board-main{height:52px}.board-center img{height:47px}.digits svg{height:31px}.hint{bottom:calc(env(safe-area-inset-bottom,0px) + 5px)}.hint span{font-size:18px;padding:7px 14px}.result{padding-top:58px;padding-bottom:16px}.result img{height:132px;top:-65px}.result h2{font-size:30px;margin:5px 0 15px}.actions>*{font-size:19px;padding:9px}.game-menu{max-height:calc(100dvh - 20px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}
@media(min-aspect-ratio:1/1){.play-area{background-size:auto 100%;background-repeat:repeat-x}.court-nav{left:12px;right:12px}.hint{left:25%;right:25%}}

/* Thunderbun speaks from beside the lane; feedback stays clear of the hoop. */
@media(max-height:600px){.hanging-banner{top:52px;width:27%}}
.shot-feedback:not(:empty):before{content:'';position:absolute;left:-17px;top:23px;width:19px;height:21px;background:#392046;clip-path:polygon(100% 0,0 80%,100% 100%)}
.shot-feedback:not(:empty):after{content:'';position:absolute;left:-12px;top:26px;width:14px;height:15px;background:#fff8e8;clip-path:polygon(100% 0,0 80%,100% 100%)}