*{box-sizing:border-box}
:root{
  --glass:rgba(255,255,255,.88);
  --glass-dark:rgba(20,36,55,.90);
  --ink:#20304a;
  --muted:#63748e;
  --blue:#5367d9;
  --blue2:#7387ef;
  --gold:#ffd35b;
  --green:#43b879;
  --red:#df5d63;
  --line:rgba(103,124,155,.22)
}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#bfe2f6;font-family:Inter,Arial,sans-serif;color:var(--ink)}
button{font:inherit}
.game-shell{position:fixed;inset:0;overflow:hidden}
#renderCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.hud{position:fixed;z-index:10;background:var(--glass);border:1px solid var(--line);box-shadow:0 12px 34px rgba(30,50,80,.16);backdrop-filter:blur(13px)}
.top-hud{left:15px;right:15px;top:13px;border-radius:22px;padding:13px 15px;display:flex;justify-content:space-between;gap:18px;align-items:center}
.title-block{min-width:0}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:#5367d9;font-weight:950}
h1{font-size:clamp(20px,2.5vw,31px);margin:2px 0 3px;line-height:1.05}
.task-text{font-size:13px;color:var(--muted);max-width:760px;line-height:1.35;font-weight:650}
.top-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.progress-wrap{background:#eff2ff;border:1px solid #dfe4ff;border-radius:13px;padding:6px 11px;min-width:82px;text-align:center}
.progress-wrap span{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#7883bd;font-weight:900}
.progress-wrap b{font-size:16px;color:#4b5ec8}
.btn{border:0;border-radius:13px;padding:11px 15px;font-weight:950;cursor:pointer;box-shadow:0 6px 15px rgba(50,70,150,.13)}
.btn:active{transform:translateY(1px)}.primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff}.wide{width:100%}
.icon-btn{width:43px;height:43px;border:0;border-radius:13px;background:#eef1f8;color:#40516f;font-size:22px;font-weight:900;cursor:pointer}
.help-panel{left:15px;bottom:15px;padding:12px 14px;border-radius:17px;font-size:11px;line-height:1.65}
.help-title{font-weight:950;font-size:13px;margin-bottom:2px}.mobile-note{color:#71809a;margin-top:3px}
kbd{display:inline-block;padding:0 5px;background:#eef1f5;border:1px solid #cbd4df;border-bottom-width:3px;border-radius:5px;font-weight:900}
.mode-badge{position:fixed;z-index:11;left:50%;top:104px;transform:translateX(-50%);padding:8px 15px;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid rgba(100,120,150,.22);backdrop-filter:blur(10px);font-size:11px;font-weight:950;color:#5367d9;box-shadow:0 7px 22px rgba(30,50,80,.12);white-space:nowrap}
.message{position:fixed;z-index:11;left:50%;bottom:23px;transform:translateX(-50%);background:var(--glass-dark);color:#fff;padding:10px 15px;border-radius:999px;font-weight:850;font-size:12px;box-shadow:0 9px 25px rgba(20,30,50,.23);max-width:min(690px,72vw);text-align:center;pointer-events:none}
.message.good{background:rgba(35,145,91,.94)}.message.bad{background:rgba(210,70,70,.94)}
.carry-badge{position:fixed;z-index:11;right:17px;top:106px;background:#fff4bf;border:1px solid #ead37c;color:#695411;padding:9px 12px;border-radius:12px;font-weight:950;box-shadow:0 6px 18px rgba(90,75,20,.14)}
.mobile-controls{display:none;position:fixed;z-index:13;left:0;right:0;bottom:17px;pointer-events:none}
.joystick{position:absolute;left:17px;bottom:0;width:124px;height:124px;border-radius:50%;background:rgba(255,255,255,.40);border:2px solid rgba(255,255,255,.78);box-shadow:inset 0 0 24px rgba(74,104,150,.10),0 7px 25px rgba(20,40,70,.16);pointer-events:auto;touch-action:none;backdrop-filter:blur(6px)}
.joy-cross{position:absolute;background:rgba(83,103,217,.13)}.joy-v{width:1px;top:13px;bottom:13px;left:50%}.joy-h{height:1px;left:13px;right:13px;top:50%}
.stick{position:absolute;width:56px;height:56px;border-radius:50%;left:32px;top:32px;background:linear-gradient(145deg,#7185ed,#465bc8);border:2px solid rgba(255,255,255,.58);box-shadow:0 6px 17px rgba(30,50,100,.30);transform:translate(0,0);will-change:transform}
.action-btn{position:absolute;right:20px;bottom:15px;width:96px;height:96px;border:3px solid rgba(255,255,255,.65);border-radius:50%;background:linear-gradient(145deg,#ffd75e,#f3ad32);color:#503b08;font-weight:950;font-size:13px;box-shadow:0 9px 28px rgba(90,60,10,.23);pointer-events:auto;touch-action:manipulation}
.action-btn:active{transform:scale(.96)}
.win-overlay{position:fixed;z-index:50;inset:0;background:rgba(20,28,48,.50);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(7px)}
.win-overlay[hidden]{display:none}.win-card{position:relative;width:min(400px,calc(100vw - 26px));background:linear-gradient(180deg,#fff,#f8f9ff);border:1px solid #e5e9f5;border-radius:25px;padding:15px 18px 21px;text-align:center;box-shadow:0 22px 65px rgba(25,35,60,.30)}
.win-close{position:absolute;right:10px;top:9px;width:36px;height:36px;border:0;border-radius:50%;background:#f1f3f8;font-size:25px;cursor:pointer}.stars{color:#e9b931;font-size:23px;letter-spacing:8px}.win-alien{display:block;width:min(250px,68vw);max-height:215px;object-fit:contain;margin:0 auto;border-radius:16px}.win-title{font-size:28px;font-weight:950;color:#5367d9}.win-text{color:#71809a;margin:5px 0 8px}.win-stats{font-size:12px;font-weight:850;color:#65728a;margin-bottom:13px}
.three-error{position:fixed;z-index:100;inset:0;display:grid;place-items:center;background:#eef4fb;color:#a43f4c;font-weight:900;text-align:center;padding:30px;line-height:1.6}.three-error[hidden]{display:none}

@media(max-width:780px){
  .top-hud{left:7px;right:7px;top:7px;padding:9px 10px;border-radius:16px;align-items:flex-start}
  h1{font-size:18px}.eyebrow{font-size:8px}.task-text{font-size:11px;line-height:1.25;max-width:58vw}
  .top-actions{gap:5px}.progress-wrap{min-width:58px;padding:5px 7px}.progress-wrap b{font-size:14px}
  .top-actions .btn{padding:8px 9px;font-size:10px}.icon-btn{width:36px;height:36px;font-size:18px}
  .help-panel{display:none}.mode-badge{top:106px;font-size:9px;padding:6px 10px}
  .message{bottom:151px;max-width:91vw;font-size:11px;padding:8px 11px}
  .carry-badge{right:8px;top:112px;font-size:10px;padding:7px 9px}
  .mobile-controls{display:block}
}
@media(max-width:500px){
  .top-actions .primary{display:none}.task-text{max-width:66vw}.mode-badge{top:102px}
  .joystick{width:116px;height:116px}.stick{width:52px;height:52px;left:30px;top:30px}
  .action-btn{width:88px;height:88px}
}