/* Touch controls use their own layer, leaving the rest of the arena tappable. */
html,body{height:100%;overscroll-behavior:none}
#stage{touch-action:none}
#mobile-controls{--stick-size:clamp(100px,27vw,124px);position:fixed;inset:0;z-index:14;display:block;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.touch-stick{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom));height:var(--stick-size);width:var(--stick-size);border:1px solid #d4b88285;border-radius:50%;background:radial-gradient(circle,#a4825b24,#24192ed9 72%);box-shadow:inset 0 0 0 7px #c1a5740d,0 6px 22px #110c1c77;pointer-events:auto;touch-action:none;--thumb-x:0px;--thumb-y:0px}
.move-stick{left:calc(16px + env(safe-area-inset-left))}
.aim-stick{right:calc(16px + env(safe-area-inset-right));border-color:#8ad6df77}
.stick-cross{position:absolute;inset:15%;border:1px dashed #cfb28736;border-radius:50%}
.stick-cross:before,.stick-cross:after{content:'';position:absolute;left:50%;top:50%;background:#ceb58725;transform:translate(-50%,-50%)}
.stick-cross:before{width:100%;height:1px}.stick-cross:after{height:100%;width:1px}
.stick-thumb{position:absolute;left:50%;top:50%;width:44%;height:44%;border-radius:50%;display:grid;place-items:center;transform:translate(calc(-50% + var(--thumb-x)),calc(-50% + var(--thumb-y)));background:radial-gradient(circle at 35% 30%,#8d6e63,#4e364e);border:1px solid #e7c78b9c;box-shadow:0 4px 12px #160d2266;font-size:24px;color:#e5c894;pointer-events:none}
.aim-stick .stick-thumb{color:#a4e4e6;background:radial-gradient(circle at 35% 30%,#5c8287,#334454);border-color:#88d5de99}
.touch-stick.engaged{border-color:#f2d397;box-shadow:0 0 22px #e1b66c30}
.aim-stick.engaged{border-color:#a3eef2;box-shadow:0 0 22px #7bceda30}
.stick-label{position:absolute;bottom:-16px;left:-10px;right:-10px;text-align:center;font-size:8px;letter-spacing:1.7px;color:#e4c9a0;text-shadow:0 2px 5px #1a1122;pointer-events:none}
.stick-label small{display:block;font-size:5px;letter-spacing:1px;margin-top:3px;color:#b9d6d4}
.touch-actions{position:absolute;right:calc(28px + var(--stick-size) + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;pointer-events:none}
#mobile-controls .touch-action{padding:4px;min-height:54px;width:60px;border:1px solid #d6b77b99;background:linear-gradient(145deg,#63465ce8,#2e2339f2);color:#f1d6a7;border-radius:13px;pointer-events:auto;touch-action:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-shadow:0 4px 12px #180c2255}
.touch-action>span{font-size:23px;line-height:1}.touch-action>strong{font-size:8px;font-weight:600;white-space:nowrap}
#mobile-controls .touch-action.engaged{background:#a08458;color:#241b2a;transform:scale(.95)}
#mobile-blink[aria-disabled="true"]{opacity:.6}
.touch-device .icon-button,.touch-device .close{min-width:44px;min-height:44px}
.touch-device #masthead{left:calc(14px + env(safe-area-inset-left));right:calc(14px + env(safe-area-inset-right));top:calc(12px + env(safe-area-inset-top))}
.touch-device .menu-meta button,.touch-device .menu-footer button{min-height:44px}
.touch-device .pill{min-height:44px}.touch-device .recipe-card{touch-action:manipulation}
.touch-device #overlay{padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));touch-action:pan-y}
.touch-device #dialog{max-height:calc(100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.touch-device .menu-controls{flex-wrap:wrap;font-size:9px;gap:10px}
.touch-playing .game-controls{display:none}.touch-playing .blink-key{display:none}
.touch-playing .hud-bottom{bottom:calc(180px + env(safe-area-inset-bottom))}
@media(max-width:900px){
 .touch-device #menu{position:fixed;inset:0;overflow-y:auto;padding:100px 6vw 40px;touch-action:pan-y;overscroll-behavior:contain}
 .touch-device #menu .menu-copy{position:relative;top:auto;left:auto;width:min(480px,100%)}
 .touch-device .menu-footer{position:relative;left:auto;right:auto;bottom:auto;margin-top:26px;gap:12px}
 .touch-device .scene-caption{display:none}.touch-device .edition{display:none}
 .touch-playing .hud-top{top:calc(73px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));gap:7px}
 .touch-playing .player-card{width:auto;min-width:68px;padding:8px}.touch-playing .player-card>.portrait{display:none}
 .touch-playing .class-card{min-width:0;flex:1;max-width:235px;padding:10px 8px}
 .touch-playing .class-card strong{font-size:19px}.touch-playing .score-card{min-width:70px;padding:9px 7px}
 .touch-playing .score-card strong{font-size:20px}.touch-playing .score-card .hud-label{font-size:6px;letter-spacing:.3px}
 .touch-playing #hearts{font-size:15px;letter-spacing:0}.touch-playing .player-card .hud-label{font-size:7px;letter-spacing:.5px}
 .touch-playing .score-card>span:last-child{font-size:7px}.touch-playing .roster{display:none}
 .touch-playing .hud-bottom{display:contents}
 .touch-playing .spell-panel{position:absolute;top:calc(161px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));width:calc(100% - 150px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:230px;padding:8px 10px;gap:8px}
 .touch-playing .spell-panel strong{font-size:19px}.touch-playing .spell-icon{width:31px;height:33px;font-size:23px;flex-shrink:0}
 .touch-playing .spell-panel .hud-label{font-size:6px;letter-spacing:1px}.touch-playing #spell-level{font-size:6px}
 .touch-playing .ingredient-panel{position:absolute;top:calc(161px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));min-width:112px;padding:9px}
 .touch-playing .ingredient-panel .hud-label{font-size:6px}.touch-playing .ingredient-panel>div{font-size:14px;gap:10px;margin-top:7px}
 .touch-playing .objective-panel{position:absolute;top:calc(224px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));width:auto;min-width:0;min-height:48px;padding:7px 11px;justify-content:center;transform:none}
 .touch-playing .objective-panel strong{font-size:10px}.touch-playing .objective-panel #objective-hint{font-size:8px}
 .touch-playing #boss-bar{top:calc(282px + env(safe-area-inset-top));left:20%;right:8%;padding:7px 9px}.touch-playing #boss-bar small{display:none}
 .touch-playing #banner{top:40%;padding:17px 5px}.touch-playing #banner h2{font-size:38px}.touch-playing #banner small{font-size:7px;letter-spacing:2px}.touch-playing #banner p{font-size:10px}
 .touch-playing #toast{top:auto;bottom:calc(166px + env(safe-area-inset-bottom));font-size:10px;width:max-content;max-width:85vw;padding:10px 14px}
 .touch-playing #detention{top:43%;width:min(330px,86vw);padding:14px}.touch-playing #detention h2{font-size:36px}
}
@media(orientation:landscape) and (max-height:600px) and (pointer:coarse){
 #mobile-controls{--stick-size:96px}.touch-stick{bottom:calc(20px + env(safe-area-inset-bottom))}
 .touch-actions{bottom:calc(17px + env(safe-area-inset-bottom));gap:6px}#mobile-controls .touch-action{min-height:47px;width:56px}
 .touch-device #menu{padding-top:74px}.touch-device #menu h1{font-size:60px;margin:16px 0}.touch-device .tagline{font-size:22px}.touch-device .description{margin-bottom:14px}
 .touch-device #masthead{top:calc(7px + env(safe-area-inset-top))}.touch-device .brand{font-size:12px}.touch-device .brand small{font-size:8px}.touch-device .crest{width:29px;height:35px}
 .touch-playing .hud-top{top:calc(57px + env(safe-area-inset-top))}.touch-playing .class-card{padding:6px 10px;max-width:255px}.touch-playing .class-card strong{font-size:18px}
 .touch-playing .player-card{padding:7px 10px}.touch-playing .score-card{padding:7px 10px}
 .touch-playing .objective-panel{top:calc(123px + env(safe-area-inset-top));left:50%;right:auto;transform:translateX(-50%);width:290px;min-height:40px;padding:5px 10px;gap:7px}
 .touch-playing .objective-panel .objective-icon{font-size:21px}.touch-playing .objective-ring{width:27px;height:27px}
 .touch-playing .spell-panel{top:auto;bottom:calc(11px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:185px;padding:6px 9px}
 .touch-playing .spell-panel strong{font-size:17px}.touch-playing .ingredient-panel{display:none}
 .touch-playing #boss-bar{top:calc(174px + env(safe-area-inset-top));left:35%;right:25%}
 .touch-playing #banner h2{font-size:33px}.touch-playing #banner{top:39%;padding:10px 0}
 .touch-playing #toast{bottom:calc(75px + env(safe-area-inset-bottom))}.touch-playing #detention{top:38%;max-width:300px;padding:9px}.touch-playing #detention h2{font-size:28px;margin:2px 0}
 .touch-playing #detention .eyebrow{font-size:6px}.touch-playing #detention p{font-size:9px;margin-bottom:3px}.touch-playing #sentence{font-size:21px}
}