:root{
  --glass:rgba(5,12,22,.66);
  --line:rgba(255,255,255,.16);
  --text:#f7fbff;
  --accent:#ffe96a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#08111e;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{touch-action:none}
button{font:inherit}
#gameWrap,#game{position:fixed;inset:0;width:100%;height:100%}
#game{display:block;outline:none;touch-action:none}
#hud{position:fixed;inset:0;pointer-events:none;text-shadow:0 2px 9px #000b}
.glass{
  background:var(--glass);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px #0005;
  border-radius:16px;
}
#topLeft{position:absolute;left:12px;top:max(12px,env(safe-area-inset-top));padding:10px 12px}
.brand{font-weight:1000;letter-spacing:.3px}
.brand span{opacity:.6;font-weight:800}
#debug{font-size:11px;font-weight:800;opacity:.8;margin-top:3px}
#topRight{position:absolute;right:12px;top:max(12px,env(safe-area-inset-top));padding:10px 12px;text-align:right;font-size:12px;font-weight:900}
#bars{position:absolute;left:12px;top:max(86px,calc(env(safe-area-inset-top) + 86px));display:flex;flex-direction:column;gap:5px}
.barRow{display:grid;grid-template-columns:23px 120px 34px;align-items:center;gap:5px;font-size:11px;font-weight:950}
.bar{height:10px;border-radius:99px;background:#0008;border:1px solid #ffffff22;overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff5577,#ff91a6)}
.barRow:nth-child(2) .bar i{background:linear-gradient(90deg,#f8a83d,#ffd65b)}
.bar.resonance i{background:linear-gradient(90deg,#77d8ff,#a778ff)}
#objective{position:absolute;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);padding:8px 13px;max-width:min(420px,45vw);text-align:center;font-size:11px}
#objective b{display:block;font-size:10px;letter-spacing:1.4px;color:#ffe96a;margin-bottom:2px}
#crosshair{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%)}
#crosshair i{position:absolute;background:white;border-radius:4px;box-shadow:0 0 4px #000}
#crosshair i:first-child{width:2px;height:18px;left:10px;top:2px}
#crosshair i:last-child{width:18px;height:2px;left:2px;top:10px}
#toast{position:absolute;left:50%;top:21%;transform:translateX(-50%);background:#07101ddb;border:1px solid #ffffff2a;border-radius:999px;padding:9px 14px;font-weight:950;font-size:13px;opacity:0;transition:.16s;white-space:nowrap}
#hotbar{position:absolute;left:50%;bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px));transform:translateX(-50%);display:flex;gap:7px;pointer-events:auto}
.slot{position:relative;width:50px;height:50px;border-radius:50%;background:#07101db8;border:3px solid #ffffffa8;display:grid;place-items:center;box-shadow:0 7px 18px #0007;transition:.12s;pointer-events:auto}
.slot.sel{transform:translateY(-5px) scale(1.08);border-color:#ffe96a}
.orb{width:29px;height:29px;border-radius:50%;box-shadow:inset 6px 6px 8px #fff3,inset -7px -8px 10px #0003}
.count{position:absolute;right:-3px;bottom:-4px;background:#050a11e8;border:1px solid #ffffff2a;border-radius:9px;padding:1px 5px;font-size:10px;font-weight:1000}
#hint{position:absolute;left:50%;bottom:82px;transform:translateX(-50%);font-size:11px;font-weight:900;opacity:.7}
#menuBtn{position:absolute;right:12px;bottom:max(12px,env(safe-area-inset-bottom));pointer-events:auto;width:43px;height:43px;border-radius:50%;border:1px solid #ffffff33;background:#07101dc0;color:white;font-size:20px;font-weight:900;backdrop-filter:blur(8px)}
.modal{position:fixed;inset:0;background:#020711b8;display:grid;place-items:center;pointer-events:auto;z-index:20;backdrop-filter:blur(9px)}
.modal.hidden{display:none}
.modal-card{width:min(92vw,440px);background:#0a1423;border:1px solid #ffffff1f;border-radius:24px;padding:20px;box-shadow:0 30px 80px #000b;text-shadow:none}
.modal-card h2{margin:0 0 5px}
.modal-card p,.modal-card small{opacity:.7}
.modal-card button{width:100%;border:0;border-radius:14px;padding:12px;margin-top:8px;background:#eef7ff;color:#0b1524;font-weight:950}
.recipe{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;background:#ffffff0b;border:1px solid #ffffff12;border-radius:14px;padding:10px;margin:8px 0}
.recipe button{width:auto;margin:0;padding:9px 12px}
.recipe button:disabled{opacity:.3}
.recipe small{display:block}
#boot{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:
radial-gradient(circle at 50% 15%,#173a63 0,#091522 36%,#03070d 100%);color:white}
.boot-card{text-align:center;width:min(90vw,480px);padding:30px}
.logo{font-size:82px;filter:drop-shadow(0 0 32px #8ee8ff88)}
.boot-card h1{font-size:clamp(42px,11vw,80px);letter-spacing:5px;margin:0;font-weight:1000}
.subtitle{font-size:18px;letter-spacing:12px;margin-right:-12px;color:#9fdefa;font-weight:1000}
.boot-card p{opacity:.7}
#playBtn{border:0;border-radius:999px;padding:15px 42px;font-size:18px;font-weight:1000;background:white;color:#07101d;box-shadow:0 12px 40px #7edfff35;margin:12px 0}
.boot-card small{display:block;opacity:.55}
#mobileUI{display:none}
#fatal{display:none;position:fixed;inset:0;z-index:100;background:#11090b;color:#fff;padding:24px;overflow:auto;white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@media(pointer:coarse){
  #objective{top:max(68px,calc(env(safe-area-inset-top) + 68px));max-width:70vw}
  #bars{top:max(116px,calc(env(safe-area-inset-top) + 116px))}
  #topRight{display:none}
  #hint{display:none}
  #mobileUI{display:block}
  #stickArea{position:absolute;left:10px;bottom:max(84px,calc(env(safe-area-inset-bottom) + 78px));width:150px;height:150px;pointer-events:auto}
  #stickBase{position:absolute;left:11px;top:11px;width:128px;height:128px;border-radius:50%;background:#07101d55;border:2px solid #ffffff55;backdrop-filter:blur(6px)}
  #stickKnob{position:absolute;left:39px;top:39px;width:48px;height:48px;border-radius:50%;background:#ffffffbb;box-shadow:0 4px 16px #0006}
  #mobileButtons{position:absolute;right:10px;bottom:max(84px,calc(env(safe-area-inset-bottom) + 78px));width:166px;height:164px;pointer-events:auto}
  #mobileButtons button{position:absolute;border:1px solid #ffffff66;background:#07101d88;color:white;font-weight:1000;backdrop-filter:blur(6px);box-shadow:0 6px 18px #0004}
  #jumpBtn{right:46px;top:0;width:62px;height:62px;border-radius:50%;font-size:23px}
  #breakBtn{left:0;top:62px;width:62px;height:62px;border-radius:50%;font-size:22px}
  #placeBtn{right:0;top:62px;width:62px;height:62px;border-radius:50%;font-size:28px}
  #resBtn{left:20px;bottom:0;width:58px;height:45px;border-radius:22px}
  #craftBtn{right:20px;bottom:0;width:58px;height:45px;border-radius:22px}
  #menuBtn{bottom:max(12px,env(safe-area-inset-bottom))}
  .slot{width:43px;height:43px}
  .orb{width:24px;height:24px}
}