:root{color-scheme:dark;font-family:Georgia,"Times New Roman",serif;background:#0d0b0e;color:#f6e9c7}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none;touch-action:none}
body{display:grid;place-items:center;min-height:100dvh;background:#0d0b0e}
#stage{position:relative;isolation:isolate;overflow:hidden;width:min(100vw,133.333333dvh);height:min(100dvh,75vw);aspect-ratio:4/3;container-type:size;background:#28202a;cursor:crosshair;touch-action:none}
#court{position:absolute;inset:0;overflow:hidden}
.court-view{position:absolute;inset:0;overflow:hidden;background:#302320;pointer-events:none}
.court-view[hidden]{display:none}
.court-background,.court-bench{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.court-background{z-index:0}.court-bench{z-index:3}
.actor{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none}
.actor:focus-visible{outline:2px solid #f9da89;outline-offset:-6px}
.character-sprite{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:fill;image-rendering:pixelated;pointer-events:none}
.actor.mirrored .character-sprite{transform:scaleX(-1)}
#roomTurn{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
#roomTurn[hidden]{display:none}
.actor.hit{animation:character-hit .16s ease-out forwards}
@keyframes character-hit{0%{filter:brightness(1.7);opacity:1}22%{translate:-1.2cqw 0;filter:brightness(1.3)}45%{translate:1cqw 0}70%{translate:-.4cqw 0;opacity:.6}100%{translate:0 1cqh;opacity:0}}
#fx,#wordFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#fx{z-index:10}#wordFx{z-index:14}
.hud{position:absolute;z-index:18;top:2.1%;left:10%;right:10%;min-height:6.8cqh;display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:.6cqh 1.7cqw;border:1px solid #d6bd7980;border-radius:.7cqh;background:linear-gradient(#25202be8,#14131be8);box-shadow:0 .3cqh .8cqh #140b0a85;pointer-events:none;text-shadow:0 1px #000}
.hud-ammo,.hud-hits{display:flex;align-items:baseline;gap:.9cqw;white-space:nowrap}
.hud-label{font:700 clamp(8px,1.7cqh,16px) system-ui,sans-serif;letter-spacing:.1em;color:#e7d7b3}
.hud strong{font-size:clamp(15px,3.6cqh,32px);line-height:1;color:#fff4d8;font-variant-numeric:tabular-nums}
.ammo-max{font-size:clamp(11px,2.5cqh,23px);color:#c4b8a4}
.hud-ammo{pointer-events:auto;border:0;background:transparent;color:inherit;font:inherit;margin:0;padding:.4cqh .3cqw;cursor:pointer;touch-action:manipulation;border-radius:.4cqh}
.hud-ammo:focus-visible{outline:2px solid #f1d087;outline-offset:2px}
.hud-ammo.denied{animation:ammo-denied .25s ease-out}
@keyframes ammo-denied{0%,60%{color:#f8a563;filter:brightness(1.8)}100%{filter:none}}
.hud-health{display:flex;align-items:center;gap:.5cqw;line-height:1}
.heart{display:block;width:3.5cqw;max-width:38px;aspect-ratio:1;color:#ed6468;filter:drop-shadow(0 1px 0 #5c202a)}
.heart.empty{color:#746366}.heart svg{display:block;width:100%;height:100%}
.turn{position:absolute;z-index:20;top:30%;height:42%;width:7.4%;margin:0;padding:0;border:0;background:transparent;cursor:pointer;touch-action:manipulation;transition:filter .12s,opacity .12s}
.turn img{display:block;object-fit:contain;width:100%;height:100%;pointer-events:none}
.turn-left{left:1.1%}.turn-right{right:1.1%}.turn-right img{transform:scaleX(-1)}
.turn:hover{filter:brightness(1.3)}.turn:active{filter:brightness(1.6)}.turn:disabled{opacity:.45;cursor:default}.turn:focus-visible{outline:2px solid #ebdab5;outline-offset:2px;border-radius:1cqh}
#loading{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;gap:1rem;background:#201c21;color:#e6d8bd;font:600 clamp(12px,2.4cqh,22px) system-ui,sans-serif}
#loading[hidden]{display:none}#retry{font:inherit;padding:.4em .8em;border:1px solid #d7bc8b;color:#f9e7c5;background:#3a3033;border-radius:.25em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;padding:0;border:0}
@media(prefers-reduced-motion:reduce){.actor.hit{animation:fade-out .2s linear forwards}@keyframes fade-out{to{opacity:0}}}

.dialogue{position:absolute;z-index:22;left:0;right:0;bottom:0;height:40.625%;background:url('/CodyFPS/assets/court/chatbox.webp') center/100% 100% no-repeat;image-rendering:pixelated;color:#fff;font-family:Arial,sans-serif;cursor:default;touch-action:manipulation}
.dialogue[hidden]{display:none}
.dialogue-name{position:absolute;left:1%;top:1%;width:26%;height:15%;display:flex;align-items:center;justify-content:center;font-size:clamp(10px,3cqw,32px);font-weight:400;line-height:1;white-space:nowrap;text-shadow:1px 1px #111}
.dialogue-text{position:absolute;inset:21% 3.5% 6%;margin:0;font-size:clamp(12px,3.8cqw,42px);font-weight:400;line-height:1.4;text-shadow:1px 1px #000;white-space:pre-wrap;overflow-wrap:break-word}
.actor.reacting{animation:reaction-flinch .24s ease-out}
@keyframes reaction-flinch{0%{filter:brightness(1.6);translate:-1cqw 0}50%{translate:.6cqw 0}100%{filter:none;translate:0 0}}
@media(prefers-reduced-motion:reduce){.actor.reacting{animation:none}}

.actor[hidden]{display:none}
.pan-out-right{animation:pan-out-right .26s cubic-bezier(.22,.7,.25,1) both;will-change:transform}
.pan-in-right{animation:pan-in-right .26s cubic-bezier(.22,.7,.25,1) both;will-change:transform}
.pan-out-left{animation:pan-out-left .26s cubic-bezier(.22,.7,.25,1) both;will-change:transform}
.pan-in-left{animation:pan-in-left .26s cubic-bezier(.22,.7,.25,1) both;will-change:transform}
@keyframes pan-out-right{to{transform:translate3d(-100%,0,0)}}
@keyframes pan-in-right{from{transform:translate3d(100%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes pan-out-left{to{transform:translate3d(100%,0,0)}}
@keyframes pan-in-left{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(0,0,0)}}
.game-over{position:absolute;inset:0;z-index:28;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2cqh;background:#0d0b0ee8;font:clamp(16px,3cqw,32px) Georgia,serif;color:#f6e9c7}
.game-over[hidden]{display:none}.game-over h1,.game-over p{margin:0}.game-over button{font:inherit;background:#292335;border:1px solid #bca97c;color:inherit;padding:.4em 1em;cursor:pointer;border-radius:.2em}
@media(prefers-reduced-motion:reduce){[class*="pan-out-"]{animation:none}[class*="pan-in-"]{animation:brief-fade .08s linear both}@keyframes brief-fade{from{opacity:0}to{opacity:1}}}
/* Original components cropped from the supplied cobalt courtroom sprite sheets. */
.hud{left:3%;right:3%;top:2%;height:8.7cqh;min-height:0;padding:.8cqh 2.4cqw;display:grid;grid-template-columns:33% 31% 36%;gap:0;border:0;border-radius:0;background:url('/CodyFPS/assets/ui/hud-frame.webp') center/100% 100% no-repeat;box-shadow:none;color:#fff3d1}
.hud-ammo,.hud-hits{justify-content:center;align-items:center;gap:1cqw}
.hud-label{font:700 clamp(9px,2cqw,24px) Georgia,serif;letter-spacing:.01em;color:#fff0c9;text-shadow:1px 1px 1px #000}
.hud strong{font:700 clamp(15px,3cqw,36px) Georgia,serif;color:#fff3d6;line-height:1}
.ammo-max{font-size:clamp(11px,2.3cqw,28px);color:#fff1cf}
.hud-health{justify-content:center;gap:.55cqw}
.heart{width:5cqw;max-width:none;aspect-ratio:1.16;filter:none;background:url('/CodyFPS/assets/ui/heart-full.png') center/contain no-repeat}
.heart.empty{background-image:url('/CodyFPS/assets/ui/heart-empty.png')}
.heart.half{background-image:url('/CodyFPS/assets/ui/heart-half.png')}
#stage[data-screen="menu"]{cursor:default}
#stage[data-screen="menu"] .hud,#stage[data-screen="menu"] .turn,#stage[data-screen="menu"] .actor{visibility:hidden}
.menu-shell{position:absolute;inset:0;z-index:29;background:linear-gradient(#071126cf,#030817e8);color:#fff0ca;cursor:default;font-family:Georgia,"Times New Roman",serif}
.menu-shell[hidden],.menu-shell [hidden]{display:none!important}
.main-panel{position:absolute;inset:0}
.menu-title{position:absolute;left:15%;top:7%;width:70%;height:18%;object-fit:contain}
.menu-intro{position:absolute;top:27%;left:8%;right:8%;margin:0;text-align:center;font-size:clamp(9px,1.85cqw,23px);color:#e8dcc0;line-height:1.4}
.menu-buttons{position:absolute;left:8%;right:8%;top:34%;display:grid;grid-template-columns:1fr 1fr;gap:3cqh 2cqw}
.art-button{display:block;border:0;padding:0;margin:0;background:transparent;cursor:pointer;touch-action:manipulation}
.art-button img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.menu-buttons .art-button{width:100%;aspect-ratio:4.18;min-height:44px}
.menu-buttons #startGame{grid-column:1/-1;justify-self:center;width:60%}
.menu-buttons .text-art-button{display:grid;place-items:center;text-decoration:none}
.art-button:hover{filter:brightness(1.18)}.art-button:active{filter:brightness(.86)}
.art-button:focus-visible{outline:2px solid #ffe4a3;outline-offset:.35cqw;border-radius:.6cqw}
.sub-panel{position:absolute;left:8%;top:5%;width:84%;height:90%;border:2.7cqw solid transparent;border-image:url('/CodyFPS/assets/ui/panel.webp') 40 fill stretch}
.panel-title{position:absolute;left:12%;top:4%;width:76%;height:17%;object-fit:contain}
.panel-caption{position:absolute;left:5%;right:5%;top:23%;margin:0;text-align:center;font-size:clamp(10px,1.9cqw,24px);color:#e8dcc0}
.leader-header{position:absolute;left:8%;top:32%;width:84%;height:10%;object-fit:fill}
.score-rows{position:absolute;left:8%;right:8%;top:44%;bottom:19%;list-style:none;margin:0;padding:0;overflow:auto;touch-action:pan-y;overscroll-behavior:contain}
.score-rows li{display:grid;grid-template-columns:22% 56% 22%;align-items:center;text-align:center;height:7.5cqh;margin-bottom:1cqh;background:url('/CodyFPS/assets/ui/leader-row.webp') center/100% 100% no-repeat;font-size:clamp(12px,2.4cqw,30px);font-variant-numeric:tabular-nums}
.empty-scores{position:absolute;left:12%;right:12%;top:49%;margin:0;text-align:center;font-size:clamp(11px,2.15cqw,26px);line-height:1.5}
.panel-back,.panel-apply{position:absolute;bottom:4%;height:13%;width:29%}
.panel-back{left:7%}.panel-apply{right:7%}
.settings-list{position:absolute;top:32%;left:10%;right:10%}
.setting{position:relative;display:flex;justify-content:space-between;align-items:center;min-height:11cqh;margin-bottom:2cqh;gap:2cqw;padding:1cqh 2cqw;font-size:clamp(12px,2.5cqw,30px);background:url('/CodyFPS/assets/ui/button.webp') center/100% 100% no-repeat;cursor:pointer}
.setting input{position:absolute;right:2cqw;top:0;width:12cqw;height:100%;margin:0;opacity:0;z-index:1;cursor:pointer}
.art-toggle{display:block;width:12cqw;aspect-ratio:2.14;flex:none;background:url('/CodyFPS/assets/ui/toggle-off.webp') center/contain no-repeat}
.setting input:checked+.art-toggle{background-image:url('/CodyFPS/assets/ui/toggle-on.webp')}
.setting input:focus-visible+.art-toggle{outline:2px solid #ffe4a3;outline-offset:.3cqw;border-radius:3cqw}
.setting input:disabled+.art-toggle{opacity:.6}
.settings-note,.settings-status{font-size:clamp(9px,1.65cqw,20px);text-align:center;line-height:1.4;color:#e8dcc0}
.settings-status{position:absolute;top:72%;left:10%;right:10%;margin:0}
#loading{background:linear-gradient(#06142cf5,#0b264bf5)}
.game-over button{background:url('/CodyFPS/assets/ui/button.webp') center/100% 100% no-repeat;border:0;border-radius:0;min-width:30cqw;padding:.9em 1.5em;color:#fff0ca}
.no-hit-effects .actor.hit{animation:quiet-hit .16s linear forwards}
@keyframes quiet-hit{to{opacity:0}}
.reduced-motion .actor.hit{animation:quiet-hit .16s linear forwards}
.reduced-motion [class*="pan-out-"]{animation:none}
.reduced-motion [class*="pan-in-"]{animation:brief-fade .08s linear both}
html,body{touch-action:manipulation}
#stage[data-screen="menu"]{touch-action:pan-y}
.setting{padding-left:4cqw}

/* Live labels reuse the supplied blank blue/gold artwork. */
.text-art-button{background:url('/CodyFPS/assets/ui/button.webp') center/100% 100% no-repeat;color:#ffecc0;font:700 clamp(13px,3.1cqw,38px) Georgia,serif;text-transform:uppercase;letter-spacing:.06em;text-shadow:1px 2px 1px #080d19}
.text-panel-title{position:absolute;left:7%;right:7%;top:4%;height:17%;display:grid;place-items:center;margin:0;font-size:clamp(20px,4.5cqw,54px);font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-shadow:1px 2px 2px #000}
.mode-list{position:absolute;left:9%;right:9%;top:31%;display:grid;gap:1.5cqh}
.mode-button{display:flex;align-items:center;justify-content:space-between;gap:2cqw;height:10cqh;padding:0 4cqw;border:0;background:url('/CodyFPS/assets/ui/button.webp') center/100% 100% no-repeat;color:#fff0ca;font-family:Georgia,serif;cursor:pointer;touch-action:manipulation}
.mode-name{font-size:clamp(13px,2.65cqw,32px);font-weight:700}
.mode-status{font-size:clamp(10px,1.8cqw,22px);letter-spacing:.02em;color:#ffe0a2}
.mode-button:disabled{cursor:default;filter:saturate(.35);color:#b0b7c1}
.mode-button:disabled .mode-status{display:flex;align-items:center;gap:1cqw;color:#b0b7c1}
.mode-button:disabled .mode-status:before{content:'';width:2cqw;height:2.4cqw;min-width:9px;min-height:11px;background:currentColor;clip-path:polygon(15% 42%,15% 25%,25% 8%,40% 0,60% 0,75% 8%,85% 25%,85% 42%,100% 42%,100% 100%,0 100%,0 42%,30% 42%,70% 42%,70% 27%,62% 17%,38% 17%,30% 27%,30% 42%)}
.mode-button:not(:disabled):hover{background-image:url('/CodyFPS/assets/ui/button-hover.webp')}
.mode-button:focus-visible,.help-content:focus-visible{outline:2px solid #ffe4a3;outline-offset:.4cqw}
.help-content{position:absolute;top:27%;bottom:22%;left:9%;right:9%;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding-right:2cqw;font-size:clamp(12px,2cqw,24px);line-height:1.5;scrollbar-color:#ae9966 #081729;scrollbar-width:thin}
.help-content h2{font-size:1.12em;margin:1em 0 .25em;color:#ffe0a2}
.help-content h2:first-child{margin-top:0}
.help-content p{margin:0 0 .8em;color:#e8e1cf}



.mode-list{top:27%;gap:1cqh}.mode-button{height:8.5cqh}
#testChoices{position:absolute;inset:28% 6% 22%;display:grid;grid-template-columns:1fr 1fr;gap:1.5cqh 2cqw;overflow:auto}
.test-choice{border:1px solid #c3ac70;background:#09234b;color:#fff0ca;padding:1cqh 1cqw;font-family:Georgia,serif;cursor:pointer}.test-choice strong{display:block;font-size:clamp(12px,2.3cqw,28px)}.test-choice small{display:block;margin-top:.5em;font-size:clamp(10px,1.5cqw,18px);line-height:1.3}
#stage[data-session=test] .hud-hits strong{display:none}
#blackout{position:absolute;inset:0;z-index:8;background:#000;opacity:0;pointer-events:none;transition:opacity .22s}#blackout.on{opacity:1}
#idLabels{position:absolute;inset:0;z-index:11;pointer-events:none}.id-label{position:absolute;transform:translate(-50%,-50%);color:#fff;font:600 2.8cqw monospace;white-space:nowrap;text-shadow:0 0 .4cqw #ffffff50}
#modeBanner{position:absolute;z-index:25;top:12%;left:10%;right:10%;margin:0;padding:1cqh 2cqw;background:#071629e8;color:#fff0ca;border:1px solid #c7af73;font-size:clamp(10px,1.9cqw,23px);text-align:center;pointer-events:none;transition:opacity .2s}#modeBanner:empty,#modeBanner.faded{opacity:0}
#stage[data-solo=true] .actor:not(.encounter-actor){visibility:hidden}
.encounter-actor[data-phase=yellow] img{filter:sepia(.6) saturate(2.5) drop-shadow(0 0 1.5cqw #ffde00)}.encounter-actor[data-phase=red] img{filter:sepia(.8) saturate(6) hue-rotate(320deg) drop-shadow(0 0 2cqw #ff2929)}
#tankShield{position:absolute;z-index:13;left:22%;right:22%;top:14%;bottom:15%;pointer-events:none;transform:perspective(700px) rotateY(-9deg) rotateX(3deg);filter:drop-shadow(0 0 1.1cqw #46cfff90)}
#tankShield svg{display:block;width:100%;height:100%;overflow:visible}
#tankShield .shield-scan{animation:cody-shield-scan 2.4s linear infinite}
@keyframes cody-shield-scan{from{transform:translateY(-12px)}to{transform:translateY(390px)}}
@media(prefers-reduced-motion:reduce){#tankShield .shield-scan{animation:none;transform:translateY(180px)}}
.reduced-motion #tankShield .shield-scan{animation:none;transform:translateY(180px)}
#tankMeter{position:absolute;z-index:24;bottom:3%;left:26%;right:26%;padding:1cqh 2cqw;background:#071629ef;color:#fff0ca;text-align:center;font-size:clamp(10px,1.8cqw,22px)}#tankProgress{display:block;width:100%;height:2cqh;accent-color:#55cfff}#tankCount{display:block}
#kickCody,#exitTest{position:absolute;z-index:26;border:1px solid #d8bd78;background:#09234b;color:#fff0ca;font:700 clamp(12px,2.5cqw,30px) Georgia,serif;padding:1cqh 2cqw;cursor:pointer}#kickCody{bottom:16%;left:38%;right:38%;height:10cqh}#exitTest{bottom:2%;left:2%;font-size:clamp(10px,1.7cqw,20px)}
#tankShield[hidden],#tankMeter[hidden],#kickCody[hidden],#exitTest[hidden],#chooseTest[hidden],#testResult[hidden],#resultScore[hidden]{display:none!important}
.reflected:after{content:'';position:absolute;inset:0;z-index:27;pointer-events:none;background:linear-gradient(135deg,transparent 55%,#ff33337a);animation:brief-fade .3s reverse both}


/* One original-art frame and one label treatment across every menu action.
   Nine-slice borders keep gold corner rivets round at any button size. */
.court-button,.menu-buttons .court-button,.mode-button,.test-choice,.game-over button,#kickCody,#exitTest{
  appearance:none;-webkit-appearance:none;box-sizing:border-box;
  border:clamp(8px,2cqw,25px) solid transparent;
  border-image:url('/CodyFPS/assets/ui/button.webp') 56 fill stretch;
  background:none;border-radius:0;color:#fff0c9;
  font-family:Georgia,'Times New Roman',serif;font-weight:700;line-height:1.1;
  text-align:center;text-decoration:none;text-transform:uppercase;letter-spacing:.025em;
  -webkit-text-stroke:.085em #020815;paint-order:stroke fill;text-shadow:0 .08em .03em #020815;
  cursor:pointer;touch-action:manipulation;
}
.menu-buttons .court-button{display:grid;place-items:center;padding:0;font-size:clamp(12px,3.3cqw,41px)}
.menu-buttons #startGame{font-size:clamp(14px,4.1cqw,51px)}
.panel-back,.panel-apply{display:grid;place-items:center;padding:0;font-size:clamp(12px,2.8cqw,35px)}
.mode-button,.test-choice{border-width:clamp(6px,1.4cqw,18px)}
.mode-button{padding:0 1.4cqw;text-align:left;line-height:1}
.mode-name{font-size:clamp(12px,2.65cqw,32px)}
.mode-status{font-weight:400;text-transform:none;letter-spacing:0;-webkit-text-stroke:0;text-shadow:0 1px #020815}
.mode-button:disabled{cursor:default;filter:saturate(.3);color:#b0b7c1}
.court-button:not(:disabled):hover,.mode-button:not(:disabled):hover,.test-choice:not(:disabled):hover,.game-over button:hover,#kickCody:hover,#exitTest:hover{border-image-source:url('/CodyFPS/assets/ui/button-hover.webp');background:none}
.court-button:focus-visible,.test-choice:focus-visible,.game-over button:focus-visible,#kickCody:focus-visible,#exitTest:focus-visible{outline:2px solid #ffe4a3;outline-offset:.35cqw}
.court-button:active,.mode-button:not(:disabled):active,.test-choice:active{filter:brightness(.85)}
.test-choice{padding:.7cqh 1cqw;display:flex;flex-direction:column;justify-content:center;align-items:center}
.test-choice strong{font-size:clamp(12px,2.2cqw,28px);line-height:1.15}
.test-choice small{color:#e8dcc0;font-size:clamp(10px,1.4cqw,18px);font-weight:400;text-transform:none;letter-spacing:0;-webkit-text-stroke:0;text-shadow:0 1px #020815;line-height:1.3;margin-top:.5cqh}
.game-over button{padding:.5em 1em}
#kickCody,#exitTest{padding:.5cqh 1cqw}
@container(max-width:600px){.test-choice small{display:none}.test-choice{min-height:38px}.test-choice strong{font-size:clamp(11px,3cqw,18px)}}
/* Allow artwork buttons to shrink within the phone-width grid. */
.menu-buttons{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.menu-buttons .court-button{min-width:0}
@container(max-width:600px){.test-choice{min-height:34px;padding:.2cqh .4cqw;border-width:5px}.test-choice strong{font-size:clamp(11px,2.8cqw,16px)}}

/* The supplied transparent samurai logo has a 2:1 silhouette, with no title box. */
.menu-title{left:15%;top:1%;width:70%;height:42%;object-fit:contain}
.menu-intro{top:44.5%}
.menu-buttons{top:50%;gap:1.5cqh 2cqw}
@container(max-width:360px){.menu-buttons{top:49%}}

/* Original callout artwork; only opacity/transform animate, with no blur. */
.mode-callout{position:absolute;inset:0;z-index:27;display:grid;place-items:center;background:#0005;pointer-events:none}
.mode-callout[hidden]{display:none}
.mode-callout img{width:86%;height:72%;object-fit:contain;filter:drop-shadow(0 .6cqh .6cqh #0008);animation:callout-arrive .18s ease-out both}
@keyframes callout-arrive{from{opacity:0;transform:translateX(6%) scale(.93)}to{opacity:1;transform:none}}
.reduced-motion .mode-callout img{animation:none}
@media(prefers-reduced-motion:reduce){.mode-callout img{animation:none}}
.settings-list{top:29%}
.setting{min-height:9cqh;margin-bottom:1.5cqh}
.settings-status{top:74%}
/* Pointer focus must not leave a temporary rectangle over the artwork. */
.art-button:focus:not(:focus-visible){outline:none}

/* Cropped directly from the supplied artwork; labels are already painted. */
.menu-buttons #openSuggestions,.menu-buttons #openHelp{border:0;border-image:none;background:none;padding:0;display:block;aspect-ratio:4.77}
.menu-buttons #openSuggestions img,.menu-buttons #openHelp img{width:100%;height:100%;object-fit:contain}
#loading{z-index:100;display:grid;place-items:center;background:radial-gradient(ellipse at center,#0c2c56,#030b1c)}
.loading-content{width:82%;display:flex;align-items:center;flex-direction:column;gap:2cqh;font-family:Georgia,serif}
.loading-gavel{width:13%;aspect-ratio:1;object-fit:contain}
.loading-title{width:48%;height:10cqh;object-fit:contain}
.loading-progress{position:relative;width:100%;aspect-ratio:20}
.loading-frame{position:absolute;inset:0;width:100%;height:100%}
.loading-fill{position:absolute;left:1.7%;top:20%;width:96.6%;height:60%;object-fit:fill;clip-path:inset(0 100% 0 0)}
#loadingText,#loadingPercent{font-size:clamp(11px,2cqw,24px);text-align:center}
#loadingPercent{font-variant-numeric:tabular-nums;font-size:clamp(15px,3cqw,32px)}
#testSound{display:block;margin:0 auto;padding:.3em .8em;background:#09234b;border:1px solid #c7af73;color:#fff0ca;font:inherit;font-size:clamp(11px,1.8cqw,22px);cursor:pointer}

#scoreSubmission{display:grid;gap:1cqh;width:65%;max-width:520px;text-align:center;font-size:clamp(12px,2cqw,24px)}
#scoreSubmission[hidden]{display:none}
#showname{width:100%;padding:.4em .7em;background:#06142c;color:#fff0ca;border:1px solid #c7af73;border-radius:.2em;font:16px Georgia,serif;user-select:text;-webkit-user-select:text;touch-action:manipulation}
#onlineStatus{max-width:80%;font-size:clamp(11px,1.7cqw,20px);text-align:center}
#onlineStatus:empty{display:none}
.game-over{gap:1.2cqh;overflow:auto;touch-action:pan-y;padding:2cqh 0}
.game-over #scoreSubmission button{font-size:clamp(12px,2cqw,24px)}
.mode-connection{position:absolute;left:5%;right:5%;bottom:19%;margin:0;font-size:clamp(10px,1.6cqw,20px);text-align:center;color:#ffe0a2}
#refreshScores{position:absolute;right:7%;bottom:5%;height:11%;padding:0 2cqw;border:1px solid #bca97c;color:#fff0ca;background:#09234b;font:700 clamp(12px,2cqw,24px) Georgia,serif;cursor:pointer}
.score-rows li span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 1cqw}
#loadingText{max-width:95%;overflow-wrap:anywhere}


/* Supplied menu lettering is baked into each sprite; do not draw another frame
   or code label over the artwork. The Annoying Cody logo stays separate. */
.menu-buttons .art-button{border:0;border-image:none;background:none;padding:0;display:block;aspect-ratio:auto;min-height:0;align-self:center}
.menu-buttons .art-button img{display:block;width:100%;height:auto;object-fit:contain;image-rendering:auto}
.menu-buttons .art-button:not(:disabled):hover{border-image:none;background:none;filter:brightness(1.15)}
.menu-buttons .art-button:active{filter:brightness(.85)}
.menu-buttons #openSuggestions,.menu-buttons #openHelp{aspect-ratio:auto}
/* Frame the union of all eleven poses: source box (115,27)–(309,267).
   Crop only transparent padding in CSS; retain the original GIF bytes/timing. */
.loading-runner{position:relative;flex:none;width:33.95cqh;height:42cqh;overflow:hidden}
.loading-cody{position:absolute;left:-59.27835%;top:-11.25%;width:226.804124%;height:129.166667%;max-width:none;object-fit:fill;image-rendering:auto}
.loading-cody-still{display:none}
@media(prefers-reduced-motion:reduce){.loading-cody-animated{display:none}.loading-cody-still{display:block}}
.reduced-motion .loading-cody-animated{display:none}.reduced-motion .loading-cody-still{display:block}

.test-access-form{position:absolute;inset:28% 12% 20%;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:1.5cqh;text-align:center;font-size:clamp(12px,2.5cqw,28px)}
#testKeyword{width:100%;padding:.5em .7em;background:#06142c;color:#fff0ca;border:1px solid #c7af73;font:16px Georgia,serif;user-select:text;-webkit-user-select:text;touch-action:manipulation}
#testKeyword[aria-invalid=true]{border-color:#ff7777}
#testAccessError{min-height:1.2em;margin:0;color:#ff9999}
.test-access-form button{align-self:center;min-width:45%;font-size:clamp(12px,2.5cqw,28px)}



/* Natural image height wins over earlier Suggestions/Help sizing rules. */
.menu-buttons #openSuggestions img,.menu-buttons #openHelp img{height:auto}