/**
 * Galaxy Strike Online — Starbase World  v3
 * Isometric Habbo-style walkable environment.
 *
 * Features:
 *  - JSON-driven grid size, walls, doors, rooms
 *  - Per-segment wall colour overrides
 *  - Animated sliding doors (open when player is adjacent)
 *  - Locked rooms (filled with sealed tiles, show LOCKED badge)
 *    → unlock via room_unlock decoration items from shop/dungeons/quests
 *  - Wallpapers: global or per-room, purchasable/earnable
 *    → active wallpaper overrides style.floorColor* + style.wall* + style.door*
 *  - Wallpaper selector panel (bottom toolbar)
 *  - Click-to-walk BFS pathfinding
 *  - Pixel-art astronaut with walk animation
 */

const TILE = { VOID: 0, FLOOR: 1, WALL: 2, DOOR: 3, LOCKED: 4 };

class StarbaseWorld {
    constructor(canvasId, layoutJson, starbasePlayerData, decorationCatalog) {
        this.canvas  = document.getElementById(canvasId);
        this.ctx     = this.canvas.getContext('2d');

        this.TW = 64;
        this.TH = 32;

        this.layout = layoutJson || StarbaseWorld.defaultLayout();
        this.COLS   = this.layout.grid.cols;
        this.ROWS   = this.layout.grid.rows;

        // Player's starbase save data { wallpaper, ownedWallpapers, unlockedRooms, roomWallpapers }
        this.sbData  = starbasePlayerData || { wallpaper: null, ownedWallpapers: [], unlockedRooms: [] };
        // Full decoration catalog from server
        this.catalog = decorationCatalog  || [];

        this.originX = 0;
        this.originY = 0;

        const ps = this.layout.playerStart || { col: Math.floor(this.COLS/2), row: 2 };
        this.player = {
            col: ps.col, row: ps.row, x: 0, y: 0,
            path: [], moving: false, frame: 0, frameTimer: 0,
            dir: 'se', name: 'Commander'
        };

        this.tileMap = this._buildMapFromLayout();

        this.doorStates = {};
        this.doorDefs   = {};
        for (const d of (this.layout.doors || [])) {
            const k = `${d.col},${d.row}`;
            this.doorStates[k] = { open: false, anim: 0 };
            this.doorDefs[k]   = d;
        }

        this.wallDefs = {};
        for (const w of (this.layout.walls || [])) {
            for (let i = 0; i < (w.span || 1); i++) {
                const c = w.dir === 'h' ? w.col + i : w.col;
                const r = w.dir === 'v' ? w.row + i : w.row;
                this.wallDefs[`${c},${r}`] = w;
            }
        }

        // Which room each floor tile belongs to (for per-room wallpaper)
        this.tileRoom = this._buildRoomMap();

        this.objects = this._buildObjects();

        this.hoveredTile      = null;
        this._pendingInteract = null;
        this._stars           = null;
        this.lastTime = 0;
        this.running  = false;
        this.animId   = null;

        // Wallpaper UI state
        this._wpPanelOpen = false;
        this._wpSelected  = null;   // wallpaperId being previewed
        this._wpRoomTarget= null;   // roomId to apply to (null = global)

        this._recenterCamera();
        this._bindInput();
        this._snapPlayerPos();
        this._buildWallpaperPanel();
    }

    // ─── Default layout ──────────────────────────────────────────────────────
    static defaultLayout() {
        return {
            name: 'Starbase Alpha-7', grid: { cols: 20, rows: 16 },
            style: {
                wallColor: '#00d4ff', wallColorLeft: '#0c1626',
                wallColorRight: '#0a1220', wallColorTop: '#1a2840',
                floorColorEven: '#151c2e', floorColorOdd: '#111827',
                doorColor: '#00ffcc', doorFrameColor: '#00d4ff'
            },
            walls: [
                { col:0,  row:0,  span:20, dir:'h' }, { col:0,  row:15, span:20, dir:'h' },
                { col:0,  row:0,  span:16, dir:'v' }, { col:19, row:0,  span:16, dir:'v' },
            ],
            doors: [], rooms: [], playerStart: { col:10, row:2 }
        };
    }

    // ─── Map builder ─────────────────────────────────────────────────────────
    _buildMapFromLayout() {
        const C = this.COLS, R = this.ROWS;
        const map = Array.from({ length: R }, () => Array(C).fill(TILE.FLOOR));

        for (const w of (this.layout.walls || [])) {
            for (let i = 0; i < (w.span || 1); i++) {
                const c = w.dir === 'h' ? w.col + i : w.col;
                const r = w.dir === 'v' ? w.row + i : w.row;
                if (r >= 0 && r < R && c >= 0 && c < C) map[r][c] = TILE.WALL;
            }
        }
        for (const d of (this.layout.doors || [])) {
            if (d.row >= 0 && d.row < R && d.col >= 0 && d.col < C)
                map[d.row][d.col] = TILE.DOOR;
        }

        // Seal locked rooms
        for (const room of (this.layout.rooms || [])) {
            if (!room.unlock) continue;
            const owned = this.sbData.unlockedRooms || [];
            if (owned.includes(room.id)) continue;  // player has unlocked it

            const b = room.bounds;
            for (let r = b.row; r < b.row + b.rows; r++) {
                for (let c = b.col; c < b.col + b.cols; c++) {
                    if (r >= 0 && r < R && c >= 0 && c < C && map[r][c] === TILE.FLOOR)
                        map[r][c] = TILE.LOCKED;
                }
            }
        }
        return map;
    }

    _buildRoomMap() {
        const C = this.COLS, R = this.ROWS;
        const rm = Array.from({ length: R }, () => Array(C).fill(null));
        for (const room of (this.layout.rooms || [])) {
            const b = room.bounds;
            for (let r = b.row; r < b.row + b.rows; r++)
                for (let c = b.col; c < b.col + b.cols; c++)
                    if (r >= 0 && r < R && c >= 0 && c < C) rm[r][c] = room.id;
        }
        return rm;
    }

    // ─── Style resolver ───────────────────────────────────────────────────────
    /**
     * Returns the effective style for a given tile position.
     * Priority: per-room wallpaper → global wallpaper → layout.style defaults
     */
    _styleFor(col, row) {
        const base = this.layout.style || {};
        const globalWpId   = this.sbData.wallpaper;
        const roomId       = this.tileRoom[row]?.[col];
        const roomWpId     = roomId && this.sbData.roomWallpapers?.[roomId];
        const activeWpId   = this._wpSelected || roomWpId || globalWpId;

        if (!activeWpId) return base;
        const wp = this.catalog.find(i => i.id === activeWpId && i.subtype === 'wallpaper');
        if (!wp?.preview) return base;

        // Merge: preview overrides base, but let per-wall-segment defs still win later
        return { ...base, ...wp.preview };
    }

    // ─── Interactive objects ──────────────────────────────────────────────────
    _buildObjects() {
        const sc = c => Math.min(c, this.COLS - 2);
        const sr = r => Math.min(r, this.ROWS - 2);
        const mk = (id, col, row, icon, label, color, glow, action) =>
            ({ id, col: sc(col), row: sr(row), icon, label, color, glowColor: glow, action });
        const modal = (title, icon, desc, color, btn) =>
            () => this._showInteractModal(title, icon, desc, color, btn ? [btn] : []);

        return [
            mk('shop',     3,  2,  '🛒','Trade Post',       '#00d4ff','rgba(0,212,255,.6)',
                modal('Trade Post','🛒','Access the galactic marketplace to buy ships, weapons, armour, wallpapers, and room unlocks.','#00d4ff',{label:'Open Shop',action:'shop'})),
            mk('crafting', 21, 2,  '⚗️','Forge',            '#ff8800','rgba(255,136,0,.6)',
                modal('Forge','⚗️','Smelt ores, combine alloys, build circuits and hull sections.','#ff8800',{label:'Open Crafting',action:'crafting'})),
            mk('quests',   3,  16, '📋','Mission Board',    '#ffdd00','rgba(255,221,0,.6)',
                modal('Mission Board','📋','Daily missions, weekly challenges, and story campaign.','#ffdd00',{label:'View Quests',action:'quests'})),
            mk('hangar',   21, 16, '🚀','Hangar',           '#aa44ff','rgba(170,68,255,.6)',
                modal('Hangar','🚀','Equip your active ship and prepare for dungeon runs.','#aa44ff',{label:'View Ships',action:'ships'})),
            mk('skills',   12, 3,  '🎓','Academy',          '#00ff88','rgba(0,255,136,.6)',
                modal('Academy','🎓','Improve combat, science, and crafting proficiencies.','#00ff88',{label:'Train Skills',action:'skills'})),
            mk('terminal', 12, 10, '💻','Command Terminal', '#ff00ff','rgba(255,0,255,.6)',
                modal('Command Terminal','💻','Monitor stats, server status, and your empire.','#ff00ff',{label:'Base Overview',action:'base'})),
            mk('wallpaper',12, 17, '🎨','Wallpaper Desk',   '#ffaa00','rgba(255,170,0,.6)',
                () => this._toggleWallpaperPanel()),
        ];
    }

    // ─── Coordinate helpers ───────────────────────────────────────────────────
    _isoProject(col, row) {
        return {
            x: this.originX + (col - row) * (this.TW / 2),
            y: this.originY + (col + row) * (this.TH / 2)
        };
    }
    _screenToGrid(sx, sy) {
        const tx = sx - this.originX, ty = sy - this.originY;
        return {
            col: Math.floor((tx / (this.TW/2) + ty / (this.TH/2)) / 2),
            row: Math.floor((ty / (this.TH/2) - tx / (this.TW/2)) / 2)
        };
    }
    _recenterCamera() {
        this.originX = this.canvas.width  / 2;
        this.originY = this.canvas.height * 0.13;
    }
    _snapPlayerPos() {
        const iso = this._isoProject(this.player.col + 0.5, this.player.row + 0.5);
        this.player.x = iso.x;
        this.player.y = iso.y;
    }

    // ─── Pathfinding ──────────────────────────────────────────────────────────
    _walkable(col, row) {
        if (col < 0 || row < 0 || col >= this.COLS || row >= this.ROWS) return false;
        const t = this.tileMap[row][col];
        return t === TILE.FLOOR || t === TILE.DOOR;
    }
    _findPath(sc, sr, tc, tr) {
        if (!this._walkable(tc, tr)) return [];
        const key = (c, r) => `${c},${r}`;
        const q = [{ c: sc, r: sr, path: [] }];
        const vis = new Set([key(sc, sr)]);
        const dirs = [[1,0],[-1,0],[0,1],[0,-1]];
        while (q.length) {
            const { c, r, path } = q.shift();
            if (c === tc && r === tr) return path;
            for (const [dc, dr] of dirs) {
                const nc = c+dc, nr = r+dr, k = key(nc, nr);
                if (!vis.has(k) && this._walkable(nc, nr)) {
                    vis.add(k);
                    q.push({ c: nc, r: nr, path: [...path, { col: nc, row: nr }] });
                }
            }
        }
        return [];
    }
    _findAdjacentWalkable(col, row) {
        for (const [dc, dr] of [[0,-1],[0,1],[-1,0],[1,0]]) {
            const nc = col+dc, nr = row+dr;
            if (this._walkable(nc, nr)) return { col: nc, row: nr };
        }
        return null;
    }

    // ─── Input ────────────────────────────────────────────────────────────────
    _bindInput() {
        this.canvas.addEventListener('click',     e => this._onClick(e));
        this.canvas.addEventListener('mousemove', e => this._onMouseMove(e));
        this.canvas.addEventListener('mouseleave',() => { this.hoveredTile = null; });
    }
    _canvasPos(e) {
        const r = this.canvas.getBoundingClientRect();
        return {
            x: (e.clientX - r.left) * (this.canvas.width  / r.width),
            y: (e.clientY - r.top)  * (this.canvas.height / r.height)
        };
    }
    _onClick(e) {
        const { x, y } = this._canvasPos(e);
        const { col, row } = this._screenToGrid(x, y);
        if (col < 0 || row < 0 || col >= this.COLS || row >= this.ROWS) return;

        // Clicking a locked tile → show unlock info
        if (this.tileMap[row][col] === TILE.LOCKED) {
            const roomId = this.tileRoom[row]?.[col];
            const room   = this.layout.rooms?.find(rm => rm.id === roomId);
            if (room) this._showLockedRoomModal(room);
            return;
        }

        const obj = this.objects.find(o => o.col === col && o.row === row);
        if (obj) {
            const adj = this._findAdjacentWalkable(obj.col, obj.row);
            if (adj) {
                this.player.path   = this._findPath(this.player.col, this.player.row, adj.col, adj.row);
                this.player.moving = this.player.path.length > 0;
                this._pendingInteract = obj;
            } else { obj.action(); }
            return;
        }

        this.player.path   = this._findPath(this.player.col, this.player.row, col, row);
        this.player.moving = this.player.path.length > 0;
        this._pendingInteract = null;
    }
    _onMouseMove(e) {
        const { x, y } = this._canvasPos(e);
        const { col, row } = this._screenToGrid(x, y);
        this.hoveredTile = (col>=0&&row>=0&&col<this.COLS&&row<this.ROWS) ? {col,row} : null;
    }

    // ─── Game loop ────────────────────────────────────────────────────────────
    start() {
        if (this.running) return;
        this.running  = true;
        this.lastTime = performance.now();
        const loop = ts => {
            if (!this.running) return;
            const dt = Math.min((ts - this.lastTime) / 1000, 0.1);
            this.lastTime = ts;
            this._update(dt);
            this._render();
            this.animId = requestAnimationFrame(loop);
        };
        this.animId = requestAnimationFrame(loop);
    }
    stop() {
        this.running = false;
        if (this.animId) cancelAnimationFrame(this.animId);
    }
    resize(w, h) {
        this.canvas.width  = w;
        this.canvas.height = h;
        this._recenterCamera();
        this._snapPlayerPos();
        this._stars = null;
    }

    // ─── Update ───────────────────────────────────────────────────────────────
    _update(dt) {
        this._updatePlayer(dt);
        this._updateDoors(dt);
    }
    _updatePlayer(dt) {
        const p = this.player;
        if (!p.moving || !p.path.length) return;
        const SPEED = 4.5;
        const next  = p.path[0];
        const tPos  = this._isoProject(next.col + 0.5, next.row + 0.5);
        const dx = tPos.x - p.x, dy = tPos.y - p.y;
        const dist = Math.sqrt(dx*dx + dy*dy);
        const step = SPEED * this.TW * dt;

        const dC = next.col - p.col, dR = next.row - p.row;
        if      (dC>0&&dR===0) p.dir='se';
        else if (dC<0&&dR===0) p.dir='nw';
        else if (dR>0&&dC===0) p.dir='sw';
        else if (dR<0&&dC===0) p.dir='ne';

        if (dist <= step) {
            p.x = tPos.x; p.y = tPos.y;
            p.col = next.col; p.row = next.row;
            p.path.shift();
            if (!p.path.length) {
                p.moving = false;
                if (this._pendingInteract) {
                    const obj = this._pendingInteract;
                    this._pendingInteract = null;
                    setTimeout(() => obj.action(), 100);
                }
            }
        } else {
            p.x += (dx/dist)*step;
            p.y += (dy/dist)*step;
        }
        p.frameTimer += dt;
        if (p.frameTimer > 0.15) { p.frame = (p.frame+1)%4; p.frameTimer = 0; }
    }
    _updateDoors(dt) {
        const p = this.player;
        const SPEED = 3.5;
        for (const key of Object.keys(this.doorStates)) {
            const [dc, dr] = key.split(',').map(Number);
            const state = this.doorStates[key];
            state.open  = (Math.abs(p.col - dc) + Math.abs(p.row - dr)) <= 1;
            const target = state.open ? 1 : 0;
            if (state.anim < target)      state.anim = Math.min(state.anim + SPEED*dt, 1);
            else if (state.anim > target) state.anim = Math.max(state.anim - SPEED*dt, 0);
        }
    }

    // ─── Render ───────────────────────────────────────────────────────────────
    _render() {
        const ctx = this.ctx;
        ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        ctx.fillStyle = '#07091a';
        ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
        this._drawStarfield();

        for (let r = 0; r < this.ROWS; r++) {
            for (let c = 0; c < this.COLS; c++) {
                const tile = this.tileMap[r][c];
                const iso  = this._isoProject(c, r);
                const hov  = this.hoveredTile?.col===c && this.hoveredTile?.row===r;
                const st   = this._styleFor(c, r);

                if      (tile === TILE.FLOOR)  this._drawFloorTile(iso.x, iso.y, c, r, hov, st);
                else if (tile === TILE.WALL) {
                    this._drawFloorTile(iso.x, iso.y, c, r, false, st);
                    this._drawWallTile(iso.x, iso.y, this.wallDefs[`${c},${r}`], st);
                }
                else if (tile === TILE.DOOR) {
                    this._drawFloorTile(iso.x, iso.y, c, r, hov, st);
                    this._drawDoorTile(iso.x, iso.y, c, r, this.doorDefs[`${c},${r}`], st);
                }
                else if (tile === TILE.LOCKED) this._drawLockedTile(iso.x, iso.y, c, r, hov);
            }
        }

        this._drawRoomLabels();

        const sorted = [...this.objects].sort((a,b) => (a.col+a.row)-(b.col+b.row));
        for (const obj of sorted) {
            const iso = this._isoProject(obj.col+0.5, obj.row+0.5);
            this._drawObject(obj, iso.x, iso.y);
        }

        this._drawPlayer();
        this._drawHUD();
    }

    // ─── Tile drawers ─────────────────────────────────────────────────────────
    _drawStarfield() {
        const ctx = this.ctx;
        if (!this._stars) {
            this._stars = [];
            const rng = mulberry32(0xdeadbeef);
            for (let i=0; i<120; i++) this._stars.push({
                x: rng()*this.canvas.width, y: rng()*(this.canvas.height*0.25),
                r: rng()*1.5+0.3, a: rng()*0.6+0.2
            });
        }
        for (const s of this._stars) {
            ctx.beginPath(); ctx.arc(s.x, s.y, s.r, 0, Math.PI*2);
            ctx.fillStyle = `rgba(180,210,255,${s.a})`; ctx.fill();
        }
    }

    _drawFloorTile(x, y, col, row, hovered, st) {
        const ctx = this.ctx, tw = this.TW, th = this.TH;
        const even = (col+row)%2===0;
        const base = even ? (st.floorColorEven||'#151c2e') : (st.floorColorOdd||'#111827');
        const fill = hovered ? this._lighten(base, 0.35) : base;

        ctx.beginPath();
        ctx.moveTo(x, y); ctx.lineTo(x+tw/2, y+th/2);
        ctx.lineTo(x, y+th); ctx.lineTo(x-tw/2, y+th/2);
        ctx.closePath();
        ctx.fillStyle   = fill; ctx.fill();
        ctx.strokeStyle = hovered ? 'rgba(0,212,255,.5)' : 'rgba(0,212,255,.08)';
        ctx.lineWidth   = hovered ? 1.5 : 0.8; ctx.stroke();
    }

    _drawWallTile(x, y, def, st) {
        const ctx = this.ctx, tw = this.TW, th = this.TH, h = th*1.8;
        const accent = (def?.color)      || st.wallColor      || '#00d4ff';
        const left   = (def?.colorLeft)  || st.wallColorLeft  || '#0c1626';
        const right  = (def?.colorRight) || st.wallColorRight || '#0a1220';
        const top    = (def?.colorTop)   || st.wallColorTop   || '#1a2840';

        ctx.beginPath();
        ctx.moveTo(x-tw/2, y+th/2  ); ctx.lineTo(x,      y+th    );
        ctx.lineTo(x,      y+th+h  ); ctx.lineTo(x-tw/2, y+th/2+h);
        ctx.closePath(); ctx.fillStyle=left; ctx.fill();
        ctx.strokeStyle=this._alpha(accent,.15); ctx.lineWidth=0.8; ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(x,      y+th    ); ctx.lineTo(x+tw/2, y+th/2  );
        ctx.lineTo(x+tw/2, y+th/2+h); ctx.lineTo(x,      y+th+h  );
        ctx.closePath(); ctx.fillStyle=right; ctx.fill();
        ctx.strokeStyle=this._alpha(accent,.10); ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(x,      y      ); ctx.lineTo(x+tw/2, y+th/2);
        ctx.lineTo(x,      y+th   ); ctx.lineTo(x-tw/2, y+th/2);
        ctx.closePath(); ctx.fillStyle=top; ctx.fill();
        ctx.strokeStyle=this._alpha(accent,.35); ctx.lineWidth=1; ctx.stroke();
    }

    _drawDoorTile(x, y, col, row, def, st) {
        const ctx = this.ctx, tw = this.TW, th = this.TH, h = th*1.8;
        const key  = `${col},${row}`;
        const anim = (this.doorStates[key]||{anim:0}).anim;
        const fc   = (def?.frameColor) || st.doorFrameColor || '#00d4ff';
        const dc   = (def?.color)      || st.doorColor      || '#00ffcc';
        const fw   = tw*0.12;
        const slide= anim*h*0.93;

        // Left pillar
        ctx.beginPath();
        ctx.moveTo(x-tw/2,    y+th/2        ); ctx.lineTo(x-tw/2+fw, y+th/2+fw*.5  );
        ctx.lineTo(x-tw/2+fw, y+th/2+h+fw*.5); ctx.lineTo(x-tw/2,    y+th/2+h      );
        ctx.closePath(); ctx.fillStyle=this._darken(fc,.25); ctx.fill();
        ctx.strokeStyle=this._alpha(fc,.6); ctx.lineWidth=0.8; ctx.stroke();

        // Right pillar
        ctx.beginPath();
        ctx.moveTo(x+tw/2,    y+th/2        ); ctx.lineTo(x+tw/2-fw, y+th/2+fw*.5  );
        ctx.lineTo(x+tw/2-fw, y+th/2+h+fw*.5); ctx.lineTo(x+tw/2,    y+th/2+h      );
        ctx.closePath(); ctx.fillStyle=this._darken(fc,.3); ctx.fill();
        ctx.strokeStyle=this._alpha(fc,.5); ctx.stroke();

        // Top lintel
        ctx.beginPath();
        ctx.moveTo(x-tw/2+fw, y+th/2+fw*.5 ); ctx.lineTo(x+tw/2-fw, y+th/2+fw*.5 );
        ctx.lineTo(x+tw/2-fw, y+th/2+fw*1.5); ctx.lineTo(x-tw/2+fw, y+th/2+fw*1.5);
        ctx.closePath(); ctx.fillStyle=this._darken(fc,.2); ctx.fill();
        ctx.strokeStyle=this._alpha(fc,.6); ctx.stroke();

        // Sliding panel
        const pTop    = y+th/2+fw*1.5 - slide;
        const pBottom = y+th/2+h;
        const pw      = tw - fw*2;
        if (pBottom - pTop > 1) {
            ctx.save();
            ctx.beginPath(); ctx.rect(x-tw/2, y+th/2+fw*1.5-h, tw, h*2); ctx.clip();
            ctx.beginPath();
            ctx.moveTo(x-pw/2, pTop           ); ctx.lineTo(x+pw/2, pTop  -th*.25);
            ctx.lineTo(x+pw/2, pBottom-th*.25  ); ctx.lineTo(x-pw/2, pBottom      );
            ctx.closePath();
            const pg = ctx.createLinearGradient(x, pTop, x, pBottom);
            pg.addColorStop(0, this._alpha(dc,.9)); pg.addColorStop(1, this._alpha(dc,.35));
            ctx.fillStyle=pg; ctx.fill();
            ctx.strokeStyle=this._alpha(dc,.85); ctx.lineWidth=1; ctx.stroke();
            ctx.strokeStyle=this._alpha(dc,.18); ctx.lineWidth=0.5;
            for (let ly=pTop+5; ly<pBottom; ly+=5) {
                ctx.beginPath(); ctx.moveTo(x-pw/2, ly); ctx.lineTo(x+pw/2, ly-th*.25); ctx.stroke();
            }
            if (anim>0.05) {
                ctx.fillStyle=this._alpha(dc, anim*.7);
                ctx.beginPath(); ctx.ellipse(x, pTop, pw/2, 4, 0, 0, Math.PI*2); ctx.fill();
            }
            ctx.restore();
        }

        const pulse = anim<0.1 ? 0.25+Math.sin(performance.now()/400)*.12 : anim*.4;
        const fg = ctx.createRadialGradient(x, y+th, 0, x, y+th, 18);
        fg.addColorStop(0, this._alpha(dc, pulse)); fg.addColorStop(1,'transparent');
        ctx.fillStyle=fg;
        ctx.beginPath(); ctx.ellipse(x, y+th, 18, 9, 0, 0, Math.PI*2); ctx.fill();
    }

    _drawLockedTile(x, y, col, row, hovered) {
        const ctx = this.ctx, tw = this.TW, th = this.TH, h = th*1.8;
        const now = performance.now()/1000;
        const pulse = 0.3 + Math.sin(now*1.5)*0.1;

        // Sealed wall face — dark hatched
        const fill = hovered ? '#1a1a2a' : '#0e0e1a';
        ctx.beginPath();
        ctx.moveTo(x, y); ctx.lineTo(x+tw/2, y+th/2);
        ctx.lineTo(x, y+th); ctx.lineTo(x-tw/2, y+th/2);
        ctx.closePath(); ctx.fillStyle=fill; ctx.fill();

        // Hatch pattern
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x, y); ctx.lineTo(x+tw/2, y+th/2);
        ctx.lineTo(x, y+th); ctx.lineTo(x-tw/2, y+th/2);
        ctx.closePath(); ctx.clip();
        ctx.strokeStyle=`rgba(80,80,120,${0.15+pulse*0.1})`; ctx.lineWidth=1;
        for (let i=-tw; i<tw*2; i+=8) {
            ctx.beginPath(); ctx.moveTo(x-tw/2+i, y); ctx.lineTo(x-tw/2+i+tw, y+th); ctx.stroke();
        }
        ctx.restore();

        // Lock icon in centre
        ctx.font='14px serif'; ctx.textAlign='center'; ctx.textBaseline='middle';
        ctx.fillStyle=`rgba(100,100,160,${pulse})`;
        ctx.fillText('🔒', x, y+th/2);

        // Glowing border
        ctx.beginPath();
        ctx.moveTo(x, y); ctx.lineTo(x+tw/2, y+th/2);
        ctx.lineTo(x, y+th); ctx.lineTo(x-tw/2, y+th/2);
        ctx.closePath();
        ctx.strokeStyle=`rgba(80,80,200,${pulse})`; ctx.lineWidth=1.5; ctx.stroke();
    }

    _drawRoomLabels() {
        if (!this.layout.rooms?.length) return;
        const ctx = this.ctx;
        for (const room of this.layout.rooms) {
            const b   = room.bounds;
            const iso = this._isoProject(b.col + b.cols/2, b.row + b.rows/2 + 0.5);
            const locked = room.unlock && !(this.sbData.unlockedRooms||[]).includes(room.id);

            ctx.save();
            ctx.font = '700 9px "Orbitron",monospace';
            ctx.textAlign = 'center'; ctx.textBaseline = 'middle';

            if (locked) {
                ctx.fillStyle = 'rgba(80,80,160,.55)';
                ctx.fillText('[ LOCKED ]', iso.x+1, iso.y+1);
                ctx.fillStyle = 'rgba(120,120,220,.45)';
                ctx.fillText('[ LOCKED ]', iso.x, iso.y);
            } else {
                ctx.fillStyle = 'rgba(0,0,0,.55)';
                ctx.fillText(room.label.toUpperCase(), iso.x+1, iso.y+1);
                ctx.fillStyle = 'rgba(180,210,255,.22)';
                ctx.fillText(room.label.toUpperCase(), iso.x, iso.y);
            }
            ctx.restore();
        }
    }

    // ─── Object drawing ───────────────────────────────────────────────────────
    _drawObject(obj, cx, cy) {
        const ctx = this.ctx, now = performance.now()/1000;
        const bob = Math.sin(now*2+obj.col)*3;
        const cy2 = cy - 28 - bob;

        // ── Construction animation overlay ────────────────────────────────
        const bldState = this._buildingStates?.[obj.id];
        const isConstructing = bldState?.constructing;
        const isUpgrading    = bldState?.upgrading;
        const justCompleted  = bldState?.completedAt && (Date.now() - bldState.completedAt) < 3000;

        const grad = ctx.createRadialGradient(cx, cy+this.TH/2, 0, cx, cy+this.TH/2, 30);
        grad.addColorStop(0, obj.glowColor.replace('.6','.35'));
        grad.addColorStop(1,'transparent');
        ctx.fillStyle=grad;
        ctx.beginPath(); ctx.ellipse(cx, cy+this.TH/2, 28, 14, 0, 0, Math.PI*2); ctx.fill();

        // Dim box if under construction
        if (isConstructing || isUpgrading) ctx.globalAlpha = 0.5;
        this._drawIsoBox(cx, cy, 36, 36, 20, obj.color);
        ctx.globalAlpha = 1;

        ctx.font='22px serif'; ctx.textAlign='center'; ctx.textBaseline='middle';
        ctx.fillText(obj.icon, cx, cy2);
        ctx.font='600 9px "Orbitron",monospace'; ctx.textAlign='center'; ctx.textBaseline='top';
        ctx.fillStyle='rgba(0,0,0,.8)'; ctx.fillText(obj.label, cx+1, cy2+20);
        ctx.fillStyle=obj.color;         ctx.fillText(obj.label, cx,   cy2+19);

        // ── Spinning construction ring ─────────────────────────────────────
        if (isConstructing || isUpgrading) {
            const angle = (now * 2) % (Math.PI * 2);
            const ringR = 22;
            ctx.save();
            ctx.strokeStyle = isUpgrading ? '#ffd700' : '#00ff88';
            ctx.lineWidth = 2.5;
            ctx.setLineDash([10, 6]);
            ctx.lineDashOffset = -now * 20;
            ctx.globalAlpha = 0.85;
            ctx.beginPath();
            ctx.arc(cx, cy - 10, ringR, angle, angle + Math.PI * 1.4);
            ctx.stroke();
            // Small progress arc
            const progress = bldState.progress || 0;
            ctx.setLineDash([]);
            ctx.strokeStyle = isUpgrading ? 'rgba(255,215,0,.2)' : 'rgba(0,255,136,.2)';
            ctx.lineWidth = 4;
            ctx.beginPath();
            ctx.arc(cx, cy - 10, ringR, -Math.PI/2, -Math.PI/2 + Math.PI*2*progress);
            ctx.stroke();
            // Label
            ctx.font = '700 8px "Orbitron",monospace';
            ctx.fillStyle = isUpgrading ? '#ffd700' : '#00ff88';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(isUpgrading ? '↑ UPG' : '⚙ BLD', cx, cy - 10);
            ctx.restore();
        }

        // ── Completion pulse flash ─────────────────────────────────────────
        if (justCompleted) {
            const age = (Date.now() - bldState.completedAt) / 3000;
            const pulseAlpha = Math.max(0, 0.7 - age);
            ctx.save();
            ctx.globalAlpha = pulseAlpha;
            ctx.strokeStyle = '#ffffff';
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.arc(cx, cy - 10, 22 + age * 20, 0, Math.PI * 2);
            ctx.stroke();
            ctx.restore();
        }
    }

    /** Call this from the game update loop to set building states for animation */
    setBuildingStates(states) {
        this._buildingStates = states || {};
    }

    _drawIsoBox(cx, cy, w, d, h, color) {
        const ctx=this.ctx, hw=w/2, hd=d/4;
        ctx.beginPath();
        ctx.moveTo(cx, cy-h); ctx.lineTo(cx+hw, cy-h+hd); ctx.lineTo(cx, cy-h+hd*2); ctx.lineTo(cx-hw, cy-h+hd);
        ctx.closePath(); ctx.fillStyle=color; ctx.globalAlpha=0.9; ctx.fill(); ctx.globalAlpha=1;

        ctx.beginPath();
        ctx.moveTo(cx-hw, cy-h+hd); ctx.lineTo(cx, cy-h+hd*2); ctx.lineTo(cx, cy+hd*2); ctx.lineTo(cx-hw, cy+hd);
        ctx.closePath(); ctx.fillStyle=this._darken(color,.4); ctx.fill();

        ctx.beginPath();
        ctx.moveTo(cx+hw, cy-h+hd); ctx.lineTo(cx, cy-h+hd*2); ctx.lineTo(cx, cy+hd*2); ctx.lineTo(cx+hw, cy+hd);
        ctx.closePath(); ctx.fillStyle=this._darken(color,.25); ctx.fill();

        ctx.strokeStyle=color; ctx.lineWidth=0.8; ctx.globalAlpha=0.5;
        ctx.beginPath();
        ctx.moveTo(cx, cy-h); ctx.lineTo(cx+hw, cy-h+hd); ctx.lineTo(cx+hw, cy+hd);
        ctx.lineTo(cx, cy+hd*2); ctx.lineTo(cx-hw, cy+hd); ctx.lineTo(cx-hw, cy-h+hd);
        ctx.closePath(); ctx.stroke(); ctx.globalAlpha=1;
    }

    // ─── Player drawing ───────────────────────────────────────────────────────
    _drawPlayer() {
        const ctx=this.ctx, p=this.player, cx=p.x, cy=p.y, now=performance.now()/1000;
        ctx.fillStyle='rgba(0,0,0,.4)';
        ctx.beginPath(); ctx.ellipse(cx,cy+2,10,5,0,0,Math.PI*2); ctx.fill();
        const bobY=p.moving?Math.sin(now*12)*2:0, bodyY=cy-28+bobY;
        const legSw=p.moving?Math.sin(now*10)*5:0, armSw=p.moving?Math.sin(now*10)*6:0;
        ctx.strokeStyle='#00d4ff'; ctx.lineWidth=3; ctx.lineCap='round';
        ctx.beginPath(); ctx.moveTo(cx-3,bodyY+18); ctx.lineTo(cx-3+legSw,bodyY+26); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(cx+3,bodyY+18); ctx.lineTo(cx+3-legSw,bodyY+26); ctx.stroke();
        ctx.strokeStyle='#0099cc'; ctx.lineWidth=2.5;
        ctx.beginPath(); ctx.moveTo(cx-7,bodyY+7); ctx.lineTo(cx-9-armSw,bodyY+14); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(cx+7,bodyY+7); ctx.lineTo(cx+9+armSw,bodyY+14); ctx.stroke();
        const bg=ctx.createLinearGradient(cx-8,bodyY,cx+8,bodyY+18);
        bg.addColorStop(0,'#1a6a8a'); bg.addColorStop(1,'#0a3a5a');
        ctx.fillStyle=bg;
        ctx.beginPath(); ctx.roundRect(cx-7,bodyY+3,14,16,3); ctx.fill();
        ctx.strokeStyle='#00d4ff'; ctx.lineWidth=1; ctx.stroke();
        ctx.strokeStyle='rgba(0,212,255,.6)'; ctx.lineWidth=1;
        ctx.beginPath(); ctx.moveTo(cx,bodyY+5); ctx.lineTo(cx,bodyY+17); ctx.stroke();
        const hg=ctx.createRadialGradient(cx-2,bodyY-3,1,cx,bodyY,9);
        hg.addColorStop(0,'#2a8aaa'); hg.addColorStop(1,'#0a2540');
        ctx.fillStyle=hg;
        ctx.beginPath(); ctx.arc(cx,bodyY,9,0,Math.PI*2); ctx.fill();
        ctx.strokeStyle='#00d4ff'; ctx.lineWidth=1.5; ctx.stroke();
        ctx.fillStyle='rgba(0,212,255,.35)';
        ctx.beginPath(); ctx.ellipse(cx,bodyY+1,5,4,0,0,Math.PI*2); ctx.fill();
        ctx.strokeStyle='rgba(0,212,255,.7)'; ctx.lineWidth=0.8; ctx.stroke();
        ctx.fillStyle='rgba(255,255,255,.3)';
        ctx.beginPath(); ctx.ellipse(cx-1.5,bodyY-.5,1.5,1,-.5,0,Math.PI*2); ctx.fill();
        ctx.font='700 8px "Orbitron",monospace'; ctx.textAlign='center'; ctx.textBaseline='bottom';
        ctx.fillStyle='rgba(0,0,0,.7)'; ctx.fillText(p.name,cx+1,bodyY-12);
        ctx.fillStyle='#00d4ff';        ctx.fillText(p.name,cx,  bodyY-13);
    }

    // ─── HUD ──────────────────────────────────────────────────────────────────
    _drawHUD() {
        const ctx=this.ctx, W=this.canvas.width, H=this.canvas.height;
        const accent=this.layout.style?.wallColor||'#00d4ff';
        ctx.fillStyle='rgba(7,9,18,.88)';
        ctx.fillRect(0, H-32, W, 32);
        ctx.font='10px "Orbitron",monospace';
        ctx.fillStyle=this._alpha(accent,.65);
        ctx.textAlign='center'; ctx.textBaseline='middle';
        ctx.fillText('[ CLICK FLOOR TO WALK  •  CLICK STATION TO INTERACT  •  CLICK 🔒 TO UNLOCK ROOM ]', W/2, H-16);
        ctx.font='700 11px "Orbitron",monospace'; ctx.fillStyle=accent;
        ctx.textAlign='left'; ctx.fillText('◈  '+(this.layout.name||'STARBASE').toUpperCase(), 14, 20);
        ctx.font='700 9px "Orbitron",monospace'; ctx.fillStyle=this._alpha(accent,.35);
        ctx.textAlign='right'; ctx.fillText(`${this.COLS}×${this.ROWS}`, W-14, 20);

        // Active wallpaper badge
        const wpId = this.sbData.wallpaper;
        if (wpId) {
            const wp = this.catalog.find(i => i.id === wpId);
            if (wp) {
                ctx.font='700 9px "Orbitron",monospace';
                ctx.fillStyle=this._alpha(accent,.5);
                ctx.textAlign='right';
                ctx.fillText(`🎨 ${wp.name}`, W-14, 36);
            }
        }
    }

    // ─── Wallpaper panel ──────────────────────────────────────────────────────
    _buildWallpaperPanel() {
        document.getElementById('sb-wp-panel')?.remove();
        const wallpapers = this.catalog.filter(i => i.subtype === 'wallpaper');
        const owned      = this.sbData.ownedWallpapers || [];
        const rooms      = (this.layout.rooms || []).filter(r =>
            !r.unlock || (this.sbData.unlockedRooms||[]).includes(r.id));

        const panel = document.createElement('div');
        panel.id = 'sb-wp-panel';
        panel.style.cssText = `
            display:none; position:absolute; bottom:36px; left:0; right:0;
            background:linear-gradient(180deg,transparent,rgba(7,9,24,.96));
            border-top:1px solid rgba(0,212,255,.25);
            padding:12px 16px 10px; z-index:500; font-family:'Orbitron',monospace;
            pointer-events:all;
        `;

        // Room selector row
        const roomTabs = rooms.map(r =>
            `<button data-room="${r.id}" onclick="starbaseWorld._wpSetRoom('${r.id}')"
                style="background:rgba(0,212,255,.12);border:1px solid rgba(0,212,255,.3);
                color:#00d4ff;padding:4px 10px;border-radius:4px;cursor:pointer;
                font-family:'Orbitron',monospace;font-size:9px;margin-right:6px">
                ${r.label}
            </button>`
        ).join('');

        // Wallpaper swatches
        const swatches = wallpapers.map(wp => {
            const isOwned = owned.includes(wp.id);
            const p = wp.preview || {};
            const bg = p.wallColorTop || p.floorColorEven || '#1a2840';
            const fg = p.doorColor    || p.wallColor      || '#00ffcc';
            return `
            <div onclick="starbaseWorld._wpPreview('${wp.id}')"
                 title="${wp.name}${isOwned ? '' : ' (not owned)'}"
                 style="display:inline-flex;flex-direction:column;align-items:center;
                        gap:3px;cursor:${isOwned?'pointer':'default'};opacity:${isOwned?1:0.38};
                        margin-right:8px;vertical-align:top">
                <div style="width:36px;height:36px;border-radius:4px;border:2px solid ${fg};
                            background:${bg};position:relative;overflow:hidden">
                    ${isOwned ? '' : '<div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px">🔒</div>'}
                    <div style="position:absolute;bottom:0;left:0;right:0;height:12px;
                                background:${p.wallColor||'#00d4ff'}33"></div>
                </div>
                <span style="font-size:7px;color:${isOwned?fg:'#555'};max-width:40px;
                             text-align:center;line-height:1.2">${wp.name}</span>
            </div>`;
        }).join('');

        panel.innerHTML = `
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
                <span style="font-size:10px;color:#00d4ff;font-weight:700">WALLPAPER</span>
                <span style="font-size:9px;color:rgba(0,212,255,.5)">Apply to:</span>
                <button onclick="starbaseWorld._wpSetRoom(null)"
                    style="background:rgba(0,212,255,.2);border:1px solid rgba(0,212,255,.5);
                    color:#00d4ff;padding:4px 10px;border-radius:4px;cursor:pointer;
                    font-family:'Orbitron',monospace;font-size:9px">All Rooms</button>
                ${roomTabs}
                <button onclick="starbaseWorld._wpApply(null)"
                    style="margin-left:auto;background:rgba(255,80,80,.15);border:1px solid rgba(255,80,80,.4);
                    color:#ff6060;padding:4px 12px;border-radius:4px;cursor:pointer;
                    font-family:'Orbitron',monospace;font-size:9px">Reset</button>
                <button onclick="starbaseWorld._toggleWallpaperPanel()"
                    style="background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;font-size:16px">✕</button>
            </div>
            <div style="overflow-x:auto;white-space:nowrap;padding-bottom:4px">${swatches}</div>
            <div style="margin-top:8px;display:flex;align-items:center;gap:10px">
                <span id="sb-wp-preview-name" style="font-size:9px;color:rgba(0,212,255,.6)">Hover a swatch to preview</span>
                <button id="sb-wp-apply-btn" onclick="starbaseWorld._wpApply(starbaseWorld._wpSelected)"
                    style="display:none;background:rgba(0,212,255,.2);border:1px solid #00d4ff;
                    color:#00d4ff;padding:5px 16px;border-radius:5px;cursor:pointer;
                    font-family:'Orbitron',monospace;font-size:9px;font-weight:700">Apply</button>
            </div>
        `;

        const container = this.canvas.parentElement;
        container.style.position = 'relative';
        container.appendChild(panel);
        this._wpPanel = panel;
    }

    _toggleWallpaperPanel() {
        if (!this._wpPanel) this._buildWallpaperPanel();
        this._wpPanelOpen = !this._wpPanelOpen;
        this._wpPanel.style.display = this._wpPanelOpen ? 'block' : 'none';
        if (this._wpPanelOpen) {
            this._wpSelected  = null;
            this._wpRoomTarget = null;
        }
    }

    _wpSetRoom(roomId) {
        this._wpRoomTarget = roomId;
        // Highlight active tab
        this._wpPanel.querySelectorAll('button[data-room]').forEach(b => {
            b.style.background = b.dataset.room === roomId
                ? 'rgba(0,212,255,.35)' : 'rgba(0,212,255,.12)';
        });
    }

    _wpPreview(wpId) {
        const owned = this.sbData.ownedWallpapers || [];
        if (!owned.includes(wpId)) return;
        this._wpSelected = wpId;
        const wp = this.catalog.find(i => i.id === wpId);
        const nameEl = document.getElementById('sb-wp-preview-name');
        const applyBtn = document.getElementById('sb-wp-apply-btn');
        if (nameEl && wp)  nameEl.textContent = wp.name + ' — ' + (wp.description || '');
        if (applyBtn)      applyBtn.style.display = 'inline-block';
    }

    _wpApply(wpId) {
        this._wpSelected = null;
        const socket = window.game?.socket || window.gameInitializer?.socket;
        if (!socket) {
            // Offline: apply locally only
            if (this._wpRoomTarget) {
                if (!this.sbData.roomWallpapers) this.sbData.roomWallpapers = {};
                if (wpId) this.sbData.roomWallpapers[this._wpRoomTarget] = wpId;
                else delete this.sbData.roomWallpapers[this._wpRoomTarget];
            } else {
                this.sbData.wallpaper = wpId;
            }
            return;
        }
        socket.emit('set_wallpaper', { wallpaperId: wpId, roomId: this._wpRoomTarget || null });
        // Optimistic update
        if (this._wpRoomTarget) {
            if (!this.sbData.roomWallpapers) this.sbData.roomWallpapers = {};
            if (wpId) this.sbData.roomWallpapers[this._wpRoomTarget] = wpId;
            else delete this.sbData.roomWallpapers[this._wpRoomTarget];
        } else {
            this.sbData.wallpaper = wpId;
        }
        const applyBtn = document.getElementById('sb-wp-apply-btn');
        if (applyBtn) applyBtn.style.display = 'none';
    }

    // ─── Interaction modals ───────────────────────────────────────────────────
    _showInteractModal(title, icon, desc, color, buttons) {
        document.getElementById('sb-interact-modal')?.remove();
        const modal = document.createElement('div');
        modal.id = 'sb-interact-modal';
        modal.style.cssText = `
            position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
            background:linear-gradient(135deg,#0d1525,#111c30);border:2px solid ${color};
            border-radius:12px;padding:24px 28px;min-width:280px;max-width:360px;z-index:1000;
            box-shadow:0 0 40px ${color}55,0 8px 32px rgba(0,0,0,.8);
            font-family:'Orbitron',monospace;color:#fff;animation:sbModalIn .2s ease;pointer-events:all;
        `;
        const btnHtml = buttons.map(b=>`
            <button onclick="starbaseWorld._handleModalAction('${b.action}');document.getElementById('sb-interact-modal').remove();"
                style="background:${color}22;border:1px solid ${color};color:${color};
                       padding:8px 18px;border-radius:6px;cursor:pointer;
                       font-family:'Orbitron',monospace;font-size:10px;font-weight:700;transition:background .2s;"
                onmouseover="this.style.background='${color}44'" onmouseout="this.style.background='${color}22'">${b.label}</button>
        `).join('');
        modal.innerHTML=`
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
                <span style="font-size:2em">${icon}</span>
                <div>
                    <div style="font-size:13px;font-weight:700;color:${color};letter-spacing:1px">${title}</div>
                    <div style="font-size:9px;color:rgba(255,255,255,.4);margin-top:2px">STARBASE STATION</div>
                </div>
                <button onclick="document.getElementById('sb-interact-modal').remove()"
                    style="margin-left:auto;background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;font-size:18px">&times;</button>
            </div>
            <div style="font-size:11px;color:rgba(184,197,214,.9);line-height:1.6;margin-bottom:18px">${desc}</div>
            <div style="display:flex;flex-wrap:wrap;gap:8px">${btnHtml}</div>
        `;
        this.canvas.parentElement.appendChild(modal);
        setTimeout(() => modal.remove(), 8000);
    }

    _showLockedRoomModal(room) {
        const unlock = this.catalog.find(i => i.id === room.unlock);
        const name   = unlock?.name || room.unlock;
        const price  = unlock ? `${unlock.price} ${unlock.currency}` : '?';
        const rarity = unlock?.rarity || 'unknown';
        const color  = '#ff8844';
        this._showInteractModal(
            `${room.label} — Locked`, '🔒',
            `This wing requires the <strong style="color:${color}">${name}</strong> (${rarity}) to unlock.<br><br>` +
            (unlock?.categories?.includes('shop') ? `Purchase for ${price} in the Trade Post, or earn it as a dungeon drop.` :
             `Earn this by clearing dungeons or completing quests.`),
            color,
            unlock?.categories?.includes('shop') ? [{ label: 'Visit Trade Post', action: 'shop' }] : []
        );
    }

    _handleModalAction(action) {
        const map={shop:'[data-tab="shop"]',crafting:'[data-tab="crafting"]',
                   quests:'[data-tab="quests"]',skills:'[data-tab="skills"]',base:'[data-tab="base"]'};
        if (map[action]) { const b=document.querySelector(map[action]); if(b){b.click();return;} }
        for (const b of document.querySelectorAll('[onclick]')) {
            if ((b.getAttribute('onclick')||'').toLowerCase().includes(action)) { b.click(); return; }
        }
    }

    // ─── Color utilities ──────────────────────────────────────────────────────
    _hexToRgb(hex) {
        hex=hex.replace('#','');
        if (hex.length===3) hex=hex.split('').map(c=>c+c).join('');
        return { r:parseInt(hex.slice(0,2),16), g:parseInt(hex.slice(2,4),16), b:parseInt(hex.slice(4,6),16) };
    }
    _darken(hex, f) {
        const {r,g,b}=this._hexToRgb(hex);
        return `rgb(${Math.round(r*f)},${Math.round(g*f)},${Math.round(b*f)})`;
    }
    _lighten(hex, f) {
        const {r,g,b}=this._hexToRgb(hex);
        return `rgb(${Math.min(255,Math.round(r+(255-r)*f))},${Math.min(255,Math.round(g+(255-g)*f))},${Math.min(255,Math.round(b+(255-b)*f))})`;
    }
    _alpha(hex, a) {
        if (hex.startsWith('rgba')||hex.startsWith('rgb(')) return hex.replace(/[\d.]+\)$/,`${a})`);
        const {r,g,b}=this._hexToRgb(hex);
        return `rgba(${r},${g},${b},${a})`;
    }
}

// ─── JSON loader ──────────────────────────────────────────────────────────────
async function loadStarbaseWorld(canvasId) {
    let layout;
    try {
        const resp = await fetch(`data/starbase-layout.json?v=${Date.now()}`);
        if (!resp.ok) throw new Error(resp.status);
        layout = await resp.json();
    } catch(e) {
        console.warn('[STARBASE] Using default layout:', e.message);
        layout = StarbaseWorld.defaultLayout();
    }

    // Fetch player starbase data from server
    let sbData = { wallpaper: null, ownedWallpapers: [], unlockedRooms: [] };
    let catalog = [];

    const socket = window.game?.socket || window.gameInitializer?.socket;
    if (socket) {
        await new Promise(resolve => {
            const timer = setTimeout(resolve, 3000);
            socket.once('starbase_data', data => {
                clearTimeout(timer);
                if (data.success) { sbData = data.starbase; catalog = data.catalog || []; }
                resolve();
            });
            socket.emit('get_starbase_data');
        });
    }

    if (window.starbaseWorld) { window.starbaseWorld.stop(); window.starbaseWorld = null; }
    window.starbaseWorld = new StarbaseWorld(canvasId, layout, sbData, catalog);

    // Listen for server wallpaper confirmations
    if (socket) {
        socket.off('wallpaper_set');
        socket.on('wallpaper_set', data => {
            if (data.success && window.starbaseWorld) {
                window.starbaseWorld.sbData = data.starbase;
            }
        });
    }

    return window.starbaseWorld;
}

// ─── Helpers ──────────────────────────────────────────────────────────────────
function mulberry32(a) {
    return function() {
        a|=0; a=a+0x6D2B79F5|0;
        let t=Math.imul(a^a>>>15,1|a);
        t=t+Math.imul(t^t>>>7,61|t)^t;
        return ((t^t>>>14)>>>0)/4294967296;
    };
}

(function(){
    if (document.getElementById('sb-anim-style')) return;
    const s=document.createElement('style'); s.id='sb-anim-style';
    s.textContent=`
        @keyframes sbModalIn {
            from{opacity:0;transform:translate(-50%,-46%)}
            to  {opacity:1;transform:translate(-50%,-50%)}
        }
    `;
    document.head.appendChild(s);
})();