:root{--bg:#7ec8f0;--ink:#fff;--btn:#1fb85a;--panel:#232b3a;box-sizing:border-box}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);overflow:hidden;font-family:"Trebuchet MS","Segoe UI",sans-serif;
  touch-action:none;user-select:none;-webkit-user-select:none;color:var(--ink)}
canvas#c{display:block;width:100%;height:100%}
button{font-family:inherit;cursor:pointer}

/* HUD */
#hud{position:fixed;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top,0px) + 8px) 10px 0;display:flex;justify-content:space-between;gap:8px;pointer-events:none;z-index:4}
.grp{display:flex;gap:6px;flex-wrap:wrap}
.pill{background:rgba(20,30,50,.62);color:var(--ink);font-weight:bold;font-size:14px;padding:6px 11px;border-radius:9px;border:0}
#hud button{pointer-events:auto}
#mini{position:fixed;right:10px;top:calc(env(safe-area-inset-top,0px) + 50px);width:132px;height:132px;border-radius:50%;
  border:3px solid rgba(255,255,255,.7);background:rgba(20,30,50,.5);z-index:3;pointer-events:none}
#cross,#breakBar,#aim,#hearts,#hotbar,#powerBar,#selName{display:none}
body.playing #cross{display:block}
body.cam-front #cross{display:none!important}
body.playing #hearts,body.playing #hotbar,body.playing #powerBar,body.playing #selName{display:flex}
#cross{position:fixed;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);pointer-events:none;z-index:3}
#cross:before,#cross:after{content:"";position:absolute;background:#fff;mix-blend-mode:difference}
#cross:before{left:8px;top:0;width:2px;height:18px}#cross:after{top:8px;left:0;height:2px;width:18px}
#breakBar{position:fixed;left:50%;top:calc(50% + 22px);width:70px;height:6px;transform:translateX(-50%);background:rgba(0,0,0,.5);border-radius:3px;z-index:3;overflow:hidden}
#breakBar i{display:block;height:100%;background:#76ff03;width:0}
#aim{position:fixed;left:50%;top:calc(50% + 36px);transform:translateX(-50%);font-size:13px;font-weight:bold;text-shadow:0 1px 4px #000;pointer-events:none;opacity:0;transition:opacity .15s;z-index:3;white-space:nowrap}
#aim.show{opacity:.95}
body.playing #aim{display:block}
body.playing #breakBar{display:block}

#toast{position:fixed;left:50%;top:30%;transform:translate(-50%,-50%);background:rgba(20,30,50,.88);font-weight:bold;font-size:19px;padding:10px 20px;border-radius:12px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:9;max-width:84vw;text-align:center}
#toast.show{opacity:1}
#dmgFlash{position:fixed;inset:0;background:radial-gradient(circle,transparent 40%,rgba(255,0,0,.55));opacity:0;pointer-events:none;z-index:8;transition:opacity .2s}
#dmgFlash.show{opacity:1}

/* Barra inferior */
#bottom{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);display:flex;flex-direction:column;align-items:center;gap:5px;z-index:5;pointer-events:none}
#hearts{gap:1px;font-size:20px;align-self:center;pointer-events:none}

#hotbar{gap:4px;pointer-events:auto}
#selName{font-size:13px;font-weight:bold;text-shadow:0 1px 4px #000;min-height:16px}
.slot,.invSlot{width:50px;height:50px;background:rgba(20,30,50,.72);border:2px solid rgba(255,255,255,.3);border-radius:7px;display:flex;align-items:center;justify-content:center;position:relative;flex:none}
.slot.sel{border-color:#fff;background:rgba(70,90,130,.92);transform:translateY(-4px) scale(1.08);box-shadow:0 0 10px rgba(255,255,255,.5)}
.slot .key{position:absolute;left:3px;top:0;font-size:10px;color:#bbb}
.ico,.blk,.pic{background-size:100% 100%;background-repeat:no-repeat;image-rendering:pixelated}
.ico{width:34px;height:34px;display:block;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.pic{display:inline-block;width:20px;height:20px;vertical-align:middle;flex:none}
.pic.big{width:30px;height:30px}
.pill{display:inline-flex;align-items:center;gap:6px}
.ht{display:inline-block;width:19px;height:19px;background-size:100% 100%;image-rendering:pixelated}
.ht.f{background-image:var(--heart-full)}.ht.h{background-image:var(--heart-half)}.ht.e{background-image:var(--heart-empty)}
.count{position:absolute;right:3px;bottom:0;font-size:12px;font-weight:bold;text-shadow:1px 1px 2px #000}
#powerBar{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 96px);transform:translateX(-50%);gap:6px;z-index:4;pointer-events:none}
.pw{position:relative;overflow:hidden;background:rgba(20,30,50,.7);font-size:12px;font-weight:bold;padding:4px 9px;border-radius:7px;display:none}
.pw.on{display:block;background:rgba(31,184,90,.85)}
.pw i{position:absolute;left:0;bottom:0;height:3px;background:#b6ff6a;width:0}

/* Inventario */
#inv{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:20}
#inv.open{display:flex}
#invPanel{background:#2b2b2b;border:4px solid #555;border-radius:10px;padding:14px;max-width:96vw;text-align:center}
#invPanel h2{margin:0 0 8px;font-size:20px}
.grid{display:grid;grid-template-columns:repeat(9,50px);gap:5px;justify-content:center}
.invSlot{background:#3a3a3a;border-color:#666;cursor:pointer}
.invSlot:hover{border-color:#bbb}
.sep{margin:10px 0 6px;font-size:12px;opacity:.7}
.hint{font-size:12px;opacity:.7;margin:10px 0 4px}
#invClose{background:#c33;color:#fff;border:0;border-radius:6px;font-size:15px;font-weight:bold;padding:7px 22px}
#dragGhost{position:fixed;display:none;pointer-events:none;z-index:30;background:transparent;border:0}
@media (max-width:560px){.grid{grid-template-columns:repeat(9,36px)}.invSlot{width:36px;height:36px}.ico{width:25px;height:25px}.slot{width:38px;height:38px}#hearts{margin-left:0}}

/* Menú */
#menu{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,25,45,.6);z-index:25}
#panel{background:var(--panel);padding:24px 28px;border-radius:14px;text-align:center;max-width:min(92vw,470px);box-shadow:0 8px 30px rgba(0,0,0,.45)}
#panel h1{margin:0 0 6px;font-size:32px}
#panel p{margin:6px 0;font-size:15px;opacity:.88;line-height:1.4}
#panel p.ctl{font-size:12.5px;opacity:.7;margin-top:14px}
#sw{display:flex;gap:10px;justify-content:center;margin:14px 0}
#sw button{width:36px;height:36px;border-radius:8px;border:3px solid transparent}
#sw button.on{border-color:#fff}
#play{background:var(--btn);color:#fff;border:0;border-radius:10px;font-size:22px;font-weight:bold;padding:12px 46px;margin-top:6px}

/* Controles táctiles */
#touch{display:none}
body.touch.playing #touch{display:block}
#touch button{position:fixed;border-radius:50%;border:3px solid #fff;color:#fff;font-weight:bold;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:24px;touch-action:none}
#touch small{font-size:9px}
#btnDown{display:none}
body.flying #btnDown{display:flex}
#jump{right:20px;bottom:calc(env(safe-area-inset-bottom,0px) + 110px);width:80px;height:80px;background:rgba(31,184,90,.65);font-size:14px!important}
#btnDown{right:108px;bottom:calc(env(safe-area-inset-bottom,0px) + 190px);width:62px;height:62px;background:rgba(41,128,185,.7)}
#btnBreak{right:108px;bottom:calc(env(safe-area-inset-bottom,0px) + 110px);width:68px;height:68px;background:rgba(228,87,46,.7)}
#btnPlace{right:20px;bottom:calc(env(safe-area-inset-bottom,0px) + 200px);width:68px;height:68px;background:rgba(41,160,177,.7)}

/* Cofre en el inventario */
#chestWrap{display:none}
#chestWrap .grid{margin-bottom:4px}

/* Laboratorio */
#lab{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:40}
#lab.open{display:flex}
#labPanel{background:#222a38;border-radius:12px;padding:16px 18px;width:min(94vw,520px);max-height:90vh;display:flex;flex-direction:column}
#labPanel h2{margin:0 0 6px}
#labPanel .hint{margin:0 0 8px}
#labBody{overflow:auto;padding-right:6px;touch-action:pan-y}
#labBody h3{margin:12px 0 4px;font-size:13px;color:#8fd3ff;text-transform:uppercase;letter-spacing:.06em}
#labBody .row{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0}
#labBody .row span{flex:1.3}
#labBody .row input[type=range]{flex:1.4}
#labBody .row b{width:46px;text-align:right}
#labPanel .btns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
#labPanel .btns button{flex:1;background:#3a4a66;color:#fff;border:0;border-radius:7px;padding:8px;font-weight:bold}
#labClose{background:#c33!important}

/* Fundido al dormir */
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:35;transition:opacity .6s}
#fade.on{opacity:1}
#menu button.ghost{display:block;margin:10px auto 0;background:transparent;color:#cfe3ff;border:1px solid #5a6b88;border-radius:8px;padding:7px 14px;font-size:13px}

/* Catálogo creativo */
#catWrap{margin-top:10px}
#catWrap button.ghost{background:transparent;color:#cfe3ff;border:1px solid #5a6b88;border-radius:8px;padding:6px 12px;font-size:13px}
#catGrid{display:none;margin-top:8px;max-height:200px;overflow:auto;padding:4px;background:#222;border-radius:8px;grid-template-columns:repeat(9,50px);gap:5px;justify-content:center;touch-action:pan-y}
@media (max-width:560px){#catGrid{grid-template-columns:repeat(9,36px)}}