
.mobile-joystick,.mobile-quickbar{display:none}
@media(max-width:850px),(pointer:coarse){
.mobile-joystick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:0 0 auto;user-select:none}
.mobile-quickbar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;gap:8px;background:#27152e;border-bottom:1px solid #794873}
.quickbar-label{font-size:11px;font-weight:900;color:#ffc7ea}.quickbar-label small{display:block;font-size:9px;font-weight:600;color:#ceadc9}
.quickbar-actions{display:flex;gap:6px}.quickbar-actions button{min-height:42px;padding:9px 12px;background:#38233d;color:#fff1e7;border:1px solid #a970a4;border-radius:8px;font-size:12px;font-weight:850}
.joy-surface{width:123px;height:123px;position:relative;touch-action:none;overscroll-behavior:contain;border-radius:50%;border:3px solid #ae76ae;background:radial-gradient(circle,#54284f,#3d2648 55%,#28162d);box-shadow:inset 0 0 22px #0d0c19b2,0 3px 14px #120b1eb2}
.joy-surface:focus-visible{outline:3px solid #ffe6a6}.joy-surface>span:not(.joy-thumb){position:absolute;color:#ffd0e5;font-size:15px;opacity:.75;pointer-events:none}
.joy-n{left:calc(50% - 7px);top:4px}.joy-s{left:calc(50% - 7px);bottom:4px}.joy-w{left:8px;top:calc(50% - 10px)}.joy-e{right:8px;top:calc(50% - 10px)}
.joy-thumb{position:absolute;left:calc(50% - 23px);top:calc(50% - 23px);width:46px;height:46px;border:3px solid #ffd4f3;background:radial-gradient(circle at 30% 25%,#ffaee3,#f248a2);border-radius:50%;color:#340b28;display:flex;align-items:center;justify-content:center;font-size:23px;pointer-events:none;box-shadow:0 3px 15px #14081b}
.joy-caption{font-size:10px;font-weight:900;color:#ecc8e4}.controls .move-buttons{display:none!important}
.controls{align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:10px 12px!important}
.controls .action-buttons{display:grid!important;grid-template-columns:repeat(2,minmax(72px,1fr));gap:8px!important;flex:1;max-width:240px}
.controls .action-buttons button{min-width:0!important;min-height:57px!important;padding:8px!important;font-size:12px!important;line-height:1.25;border-radius:13px;touch-action:manipulation;font-weight:900}
.controls .action-buttons #interact{grid-column:1/-1;font-size:14px!important;background:#ffcb7a;color:#261525;border:2px solid #fff0cb}
.controls .action-buttons #attack{background:#fa4da6;color:#290d22;border:2px solid #ffbddc}
.controls .action-buttons #heal{background:#573666;color:#fff1e5;border:2px solid #bb8cb8}
.controls .action-buttons kbd{display:none}.game-panel{scroll-margin-top:12px}
.canvas-frame,#world{touch-action:none;overscroll-behavior:contain}
.game-panel.tyler-immersive{position:fixed!important;inset:0!important;z-index:99999!important;background:#180e21;display:flex;flex-direction:column;overflow:auto;min-height:100dvh;width:100%;border-radius:0!important;max-width:none!important;padding-bottom:max(8px,env(safe-area-inset-bottom))}
.tyler-immersive-active body{overflow:hidden!important}.tyler-immersive .panel-top{padding:6px 11px!important}
.tyler-immersive .canvas-frame{max-height:57dvh;display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:190px}
.tyler-immersive #world{object-fit:contain;max-width:100%;max-height:57dvh}
.tyler-immersive .controls{margin-top:auto}.tyler-immersive .game-bottom{display:flex;flex-direction:column;flex:0 0 auto}
}
@media(max-width:390px){.joy-surface{height:110px;width:110px}.controls .action-buttons{max-width:215px}.controls .action-buttons button{min-height:54px!important;font-size:11px!important}.quickbar-actions button{padding:8px;min-height:39px}}
@media(orientation:landscape) and (max-height:550px){.tyler-immersive .canvas-frame{max-height:60dvh}.tyler-immersive .panel-top{display:none!important}.tyler-immersive .controls{padding:4px 12px!important}.tyler-immersive .joy-surface{width:78px;height:78px}.tyler-immersive .controls .action-buttons button{min-height:42px!important}}
