:root{
    --sky-top:#7ec0ff;
    --sky-bottom:#bfe3ff;
    --grass:#5aa02c;
    --grass-dark:#3c6b1d;
    --dirt:#8a5a2b;
    --stone:#8d8d8d;
    --panel:#c6c6c6;
    --panel-dark:#5a5a5a;
    --panel-light:#ffffff;
    --ink:#222;
    --accent:#5aa02c;
    --danger:#b23b3b;
    --pixel:'Press Start 2P', ui-monospace, monospace;
    --body:'Inter', system-ui, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--body);color:var(--ink)}

/* ---------- Auth screen ---------- */
body.auth{
    min-height:100%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 70%,var(--grass) 70%,var(--grass) 100%);
    overflow:hidden;padding:24px;
}

.sky{position:fixed;inset:0;pointer-events:none;z-index:0}
.cloud-cube{
    position:absolute;left:var(--x);top:var(--y);
    width:var(--s);height:var(--s);
    background:rgba(255,255,255,.85);
    border:3px solid rgba(255,255,255,.95);
    box-shadow:inset -6px -6px 0 rgba(0,0,0,.07), 6px 6px 0 rgba(0,0,0,.05);
    animation:drift var(--d) linear infinite;
}
@keyframes drift{
    0%{transform:translateX(-12vw) translateY(0)}
    50%{transform:translateX(12vw) translateY(-8px)}
    100%{transform:translateX(-12vw) translateY(0)}
}

.panel{
    position:relative;z-index:1;width:min(420px,100%);
    background:var(--panel);
    border:4px solid var(--panel-dark);
    box-shadow:
        inset 4px 4px 0 var(--panel-light),
        inset -4px -4px 0 var(--panel-dark),
        10px 10px 0 rgba(0,0,0,.25);
    padding:32px 28px 28px;
}

.logo{
    font-family:var(--pixel);font-size:26px;line-height:1.3;margin:0;letter-spacing:1px;
    color:var(--grass-dark);text-shadow:3px 3px 0 rgba(0,0,0,.18);
}
.logo span{color:var(--dirt)}
.tagline{font-size:13px;color:#444;margin:10px 0 20px}

.tabs{display:flex;gap:8px;margin-bottom:16px}
.tab{
    flex:1;font-family:var(--pixel);font-size:9px;letter-spacing:.5px;
    padding:12px 6px;cursor:pointer;color:#333;
    background:var(--stone);
    border:3px solid var(--panel-dark);
    box-shadow:inset 3px 3px 0 rgba(255,255,255,.4),inset -3px -3px 0 rgba(0,0,0,.25);
}
.tab.is-active{background:var(--grass);color:#fff}

.form{display:none;flex-direction:column;gap:14px}
.form.is-active{display:flex}

label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:#333}
input{
    font-family:var(--body);font-size:15px;padding:11px 12px;color:var(--ink);
    background:#efefef;border:3px solid var(--panel-dark);
    box-shadow:inset 2px 2px 0 rgba(0,0,0,.2);
}
input:focus{outline:3px solid var(--grass);outline-offset:1px}

.btn{
    margin-top:6px;font-family:var(--pixel);font-size:11px;letter-spacing:.5px;color:#fff;
    padding:14px;cursor:pointer;background:var(--grass);
    border:3px solid var(--grass-dark);
    box-shadow:inset 3px 3px 0 rgba(255,255,255,.3),inset -3px -3px 0 rgba(0,0,0,.25);
}
.btn:hover{filter:brightness(1.08)}
.btn:active{box-shadow:inset 3px 3px 0 rgba(0,0,0,.25)}

.flash{
    background:#f6dcdc;color:var(--danger);border:3px solid var(--danger);
    padding:10px 12px;font-size:13px;margin-bottom:14px;
}

.foot{
    position:relative;z-index:1;margin-top:22px;font-size:12px;color:#2c4a16;
    background:rgba(255,255,255,.6);padding:6px 12px;border-radius:4px;text-align:center;
}

@media (max-width:480px){
    .logo{font-size:20px}
    .panel{padding:24px 18px}
}

/* ---------- In-game HUD ---------- */
body.game{margin:0;overflow:hidden;background:#000;font-family:var(--body)}
#app{position:fixed;inset:0}
canvas{display:block}

#crosshair{
    position:fixed;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);
    pointer-events:none;z-index:5;opacity:.85;
}
#crosshair::before,#crosshair::after{
    content:"";position:absolute;background:#fff;box-shadow:0 0 2px rgba(0,0,0,.8);
}
#crosshair::before{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
#crosshair::after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}

#topbar{
    position:fixed;top:12px;left:12px;right:12px;z-index:6;
    display:flex;justify-content:space-between;align-items:center;
    pointer-events:none;
}
#topbar .pill{
    pointer-events:auto;background:rgba(0,0,0,.55);color:#fff;
    font-size:12px;padding:7px 12px;border-radius:6px;backdrop-filter:blur(3px);
}
#topbar a{color:#9ad36b;text-decoration:none;font-weight:600}
#save-state{color:#cfcfcf}

#hotbar{
    position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:6;
    display:flex;gap:4px;padding:5px;background:rgba(0,0,0,.45);border-radius:8px;
}
.slot{
    width:54px;height:54px;position:relative;cursor:pointer;
    border:3px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);
    display:flex;align-items:center;justify-content:center;
}
.slot .swatch{width:34px;height:34px;box-shadow:inset -5px -5px 0 rgba(0,0,0,.25),inset 5px 5px 0 rgba(255,255,255,.25)}
.slot .key{position:absolute;top:1px;left:3px;font-size:10px;color:#ddd;font-weight:700}
.slot .name{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:8px;color:#eee;text-transform:uppercase;letter-spacing:.3px}
.slot.is-active{border-color:#fff;box-shadow:0 0 0 2px #000,0 0 10px rgba(255,255,255,.4)}

#hint{
    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;
    background:rgba(0,0,0,.7);color:#fff;padding:22px 26px;border-radius:10px;
    text-align:center;max-width:340px;cursor:pointer;
}
#hint h2{font-family:var(--pixel);font-size:14px;margin:0 0 14px;color:#9ad36b}
#hint p{margin:6px 0;font-size:13px;line-height:1.5}
#hint .go{margin-top:14px;font-family:var(--pixel);font-size:10px;color:#ffd86b}
#hint.hidden{display:none}

#mode-tag{
    position:fixed;bottom:84px;left:50%;transform:translateX(-50%);z-index:6;
    background:rgba(0,0,0,.5);color:#fff;font-size:11px;padding:4px 10px;border-radius:5px;
}

#clock{
    position:fixed;top:52px;left:12px;z-index:6;
    background:rgba(0,0,0,.5);color:#fff;backdrop-filter:blur(3px);
    font-family:var(--pixel);font-size:11px;letter-spacing:1px;
    padding:6px 10px;border-radius:6px;
}

#toast{
    position:fixed;top:96px;left:50%;z-index:8;
    transform:translateX(-50%) translateY(-6px);
    background:rgba(0,0,0,.72);color:#ffd86b;font-size:13px;font-weight:600;
    padding:8px 14px;border-radius:6px;opacity:0;pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== Tool bar (Build / Chest / Door / Portal / Monster) ===== */
#tools{
    position:fixed;top:52px;left:50%;transform:translateX(-50%);z-index:6;
    display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:92vw;
}
.tool{
    font-family:var(--pixel);font-size:9px;color:#eee;cursor:pointer;
    background:rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.22);
    padding:7px 9px;border-radius:6px;backdrop-filter:blur(3px);letter-spacing:.5px;
}
.tool:hover{border-color:rgba(255,255,255,.5)}
.tool.active{border-color:#ffd86b;color:#ffd86b;box-shadow:0 0 0 1px #000,0 0 8px rgba(255,216,107,.4)}

/* ===== Modal panels (chest / door / portal config + prompts) ===== */
.panel-modal{
    position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.45);
}
.pm-card{
    width:min(360px,90vw);background:#2a2a33;color:#eee;border:3px solid #000;
    border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.5);overflow:hidden;
}
.pm-head{
    display:flex;align-items:center;justify-content:space-between;
    background:#3a3a46;padding:10px 12px;font-family:var(--pixel);font-size:11px;letter-spacing:.5px;
}
.pm-x{background:none;border:none;color:#bbb;font-size:20px;line-height:1;cursor:pointer}
.pm-x:hover{color:#fff}
.pm-body{padding:14px}
.pm-note{font-size:12px;color:#c7c7d0;margin:0 0 10px}
.pm-input{
    width:100%;box-sizing:border-box;padding:9px 10px;font-size:14px;
    background:#1f1f27;border:2px solid #555;border-radius:6px;color:#fff;margin-bottom:10px;
}
.pm-input:focus{outline:none;border-color:#ffd86b}
.pm-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.pm-btn{
    flex:1;min-width:90px;padding:9px 10px;font-size:12px;font-weight:600;cursor:pointer;
    background:#4a4a58;border:2px solid #000;border-radius:6px;color:#fff;
    box-shadow:inset 0 -3px 0 rgba(0,0,0,.3);
}
.pm-btn:hover{background:#565668}
.pm-btn.ok{background:#3f7a3a}
.pm-btn.ok:hover{background:#4a8c44}

/* ===== Chest grid ===== */
.chest-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.chest-cell{
    background:#1f1f27;border:2px solid #444;border-radius:6px;padding:6px 4px;text-align:center;
}
.cc-swatch{width:26px;height:26px;margin:0 auto 4px;box-shadow:inset -4px -4px 0 rgba(0,0,0,.25),inset 4px 4px 0 rgba(255,255,255,.2)}
.cc-name{font-size:8px;color:#bbb;text-transform:uppercase;letter-spacing:.3px;height:18px}
.cc-row{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:3px}
.cc-count{font-size:12px;min-width:18px;color:#fff}
.cc-btn{width:20px;height:20px;line-height:1;padding:0;font-size:13px;background:#4a4a58;border:1px solid #000;border-radius:4px;color:#fff;cursor:pointer}
.cc-btn:hover{background:#565668}

/* ===== Monster command panel ===== */
#monster-panel{
    position:fixed;left:12px;bottom:96px;z-index:6;display:none;
    background:rgba(0,0,0,.6);backdrop-filter:blur(4px);border:2px solid rgba(255,255,255,.18);
    border-radius:8px;padding:8px 10px;max-height:46vh;overflow:auto;min-width:184px;
}
.mp-title{font-family:var(--pixel);font-size:9px;color:#ffd86b;letter-spacing:.5px;margin-bottom:6px}
.mp-row{display:flex;align-items:center;gap:6px;margin:4px 0}
.mp-dot{width:12px;height:12px;border-radius:2px;flex:none;box-shadow:inset -2px -2px 0 rgba(0,0,0,.3)}
.mp-name{font-size:11px;color:#eee;flex:1;white-space:nowrap}
#monster-panel select{
    font-size:11px;background:#1f1f27;color:#fff;border:1px solid #555;border-radius:4px;padding:3px 4px;cursor:pointer;
}

/* ===== Multiplayer player count ===== */
#mp-count{
    position:fixed;top:52px;right:12px;z-index:6;
    background:rgba(0,0,0,.5);color:#fff;backdrop-filter:blur(3px);
    font-family:var(--pixel);font-size:10px;letter-spacing:.5px;
    padding:6px 10px;border-radius:6px;
}

/* ===== Surface (respawn) action button ===== */
.tool-action{
    position:fixed;top:92px;left:50%;transform:translateX(-50%);z-index:6;
    font-family:var(--pixel);font-size:9px;color:#fff;cursor:pointer;
    background:rgba(40,90,140,.7);border:2px solid rgba(255,255,255,.3);
    padding:7px 10px;border-radius:6px;backdrop-filter:blur(3px);letter-spacing:.5px;
}
.tool-action:hover{border-color:#fff;background:rgba(50,110,170,.85)}

/* ===== Player hearts ===== */
#hearts{
    position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:6;
    display:flex;gap:3px;pointer-events:none;
    text-shadow:0 0 3px #000, 0 0 3px #000;
}
#hearts .heart{font-size:20px;line-height:1}
#hearts .heart.full{color:#ff4d4d}
#hearts .heart.empty{color:rgba(255,255,255,.35)}