html,body,#root{background:#050505;width:100%;min-height:100%;margin:0}body{color:#f3eee2;-webkit-tap-highlight-color:transparent;font-family:Trebuchet MS,Arial,sans-serif;overflow:hidden}.app-shell{min-height:100svh;padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));box-sizing:border-box;background:radial-gradient(circle at 50% 15%,#6f5e422e,#0000 42%),linear-gradient(135deg,#111411,#060707 62%);grid-template-rows:minmax(0,1fr) auto;place-items:center;gap:12px;display:grid}.game-canvas{aspect-ratio:4/3;touch-action:none;background:#070808;border:1px solid #4b4b43;border-radius:6px;width:min(100%,1040px);max-height:calc(100svh - 168px);display:block;box-shadow:0 18px 60px #000000d1,0 0 0 5px #111311}.touch-controls{box-sizing:border-box;grid-template-columns:auto 1fr;justify-content:center;align-items:center;gap:28px;width:min(100%,680px);padding:8px 14px;display:grid}.dpad{background:#0d100e;border:1px solid #343831;border-radius:50%;grid-template-columns:repeat(3,44px);gap:4px;padding:8px;display:grid;box-shadow:inset 0 0 18px #000c}.action-pad{justify-content:flex-end;gap:16px;display:flex}button{color:#d7d0c0;touch-action:none;-webkit-user-select:none;user-select:none;background:linear-gradient(#232723,#111411);border:1px solid #3b403a;border-radius:7px;min-width:44px;height:44px;font:800 21px Trebuchet MS,Arial,sans-serif;box-shadow:inset 0 1px #ffffff14,0 3px 8px #00000080}button:active{color:#fff;background:#343a34;transform:translateY(1px)}.dpad-center span{border:2px solid #a69b82;border-radius:50%;width:9px;height:9px;margin:auto;display:block}.joystick-control{--joystick-angle:0deg;color:#56d7d0;touch-action:none;-webkit-user-select:none;user-select:none;justify-items:center;gap:4px;width:126px;display:none}.joystick-control>small{color:#8d958d;letter-spacing:1px;font:800 9px Trebuchet MS,Arial,sans-serif}.joystick-base{background:radial-gradient(circle,#56d7d017 0 17%,#0000 18% 43%,#56d7d017 44% 46%,#0000 47%),linear-gradient(#182522,#09110f);border:2px solid #56d7d06b;border-radius:50%;width:116px;height:116px;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff1a,0 8px 22px #0000005c}.joystick-axis{color:#56d7d040;pointer-events:none;place-items:center;font:900 12px Arial,sans-serif;display:grid;position:absolute;inset:0}.joystick-axis.vertical{line-height:2.9}.joystick-knob{z-index:2;pointer-events:none;background:radial-gradient(circle at 38% 32%,#327a75,#132d2a 70%);border:2px solid #bcfff9c2;border-radius:50%;place-items:center;width:50px;height:50px;transition:transform .13s ease-out;display:grid;position:absolute;top:calc(50% - 26px);left:calc(50% - 26px);box-shadow:0 5px 15px #0000007a,inset 0 1px #fff3}.joystick-control[data-active=true] .joystick-knob{transition:none}.joystick-reticle{width:22px;height:22px;transform:rotate(var(--joystick-angle));border:2px solid #67e5de;border-radius:50%;position:relative}.joystick-reticle:before,.joystick-reticle:after{content:"";background:#67e5de;position:absolute}.joystick-reticle:before{width:2px;height:34px;top:-7px;left:9px}.joystick-reticle:after{width:34px;height:2px;top:9px;left:-7px}.joystick-reticle i{z-index:1;background:#b9fff9;border-radius:50%;position:absolute;inset:7px}.action-pad button{border-radius:50%;place-content:center;gap:1px;min-width:104px;height:64px;display:grid}.action-pad .fire{color:#e66b55;border-color:#b04a3d}.action-pad .magic{color:#63d5cf;border-color:#4ca9a4}.action-pad strong{letter-spacing:1px;font-size:13px}.action-pad small{color:#777d73;letter-spacing:1px;font-size:8px}@media (width>=880px) and (pointer:fine){.touch-controls{opacity:.46;transition:opacity .18s}.touch-controls:hover{opacity:1}}@media (width<=560px){.app-shell{grid-template-rows:auto auto;align-content:center;gap:24px}.touch-controls{grid-template-columns:124px minmax(0,1fr);gap:10px;padding:4px 0}.joystick-control{display:grid}.dpad{display:none}.action-pad{grid-template-columns:repeat(2,minmax(82px,1fr));justify-content:stretch;gap:7px;display:grid}.action-pad button{width:100%;min-width:0;height:92px}}@media (pointer:coarse){.game-canvas{max-height:calc(100svh - 168px)}.touch-controls{grid-template-columns:124px minmax(0,1fr);width:100%;padding:4px 0}.joystick-control{display:grid}.dpad{display:none}.action-pad{grid-template-columns:repeat(2,minmax(82px,1fr));justify-content:stretch;gap:8px;width:100%;display:grid}.action-pad button{width:100%;min-width:0;height:94px}.action-pad strong{font-size:15px}.action-pad small{font-size:9px}}