:root{
    --bg:#0a0a12;
    --panel:#121022;
    --signal:#00ffcc;
    --road:#2a2a3e;
    --building:#2e1a3e;
    --roof:#3a1a4e;
    --poi:#aa66ff;
    --special:#ff00ff;
    --danger:#ff3860;
    --dim:#5a6b6a;
    --text:#e8ffe8;
    --line: rgba(57,255,136,0.15);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none;}
  html,body{
    margin:0; padding:0; width:100%; height:100%; overflow:hidden;
    background:var(--bg); color:var(--text);
    font-family: ui-monospace, "SF Mono", "Cascadia Code", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
  }
  #app{position:fixed; inset:0; display:flex; flex-direction:column;}

  /* HUD top — two stacked rows: nav icon buttons, then player stats. A single row
     couldn't fit three icon buttons plus level/stamina/resources/time on narrow
     phones without either clipping or crushing everything down to illegibility. */
  #hud-top{
    display:flex; flex-direction:column; gap:8px;
    padding: calc(env(safe-area-inset-top,0px) + 8px) 12px 8px 12px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, rgba(10,14,15,0.95), rgba(10,14,15,0.75));
    z-index:20;
    font-size:12px;
  }
  #hud-nav-row{display:flex; justify-content:flex-end; align-items:center; gap:8px;}
  #hud-stats-row{display:flex; align-items:center; gap:10px; min-width:0;}
  #hud-top .level{color:var(--signal); font-weight:bold; letter-spacing:1px;}
  #hud-top .xpbar{width:80px; height:4px; background:var(--panel); border:1px solid var(--line); margin-top:3px;}
  #hud-top .xpfill{height:100%; background:var(--signal); width:0%;}
  #stamina-wrap{min-width:70px; flex:0 0 auto;}
  #stamina-label{display:flex; justify-content:space-between; color:var(--dim); font-size:9px; letter-spacing:1px; margin-bottom:3px;}
  #stamina-bar{height:8px; border:1px solid rgba(90,209,255,0.35); background:rgba(8,24,38,0.8);}
  #stamina-fill{height:100%; width:100%; background:linear-gradient(90deg,#39ff88,#5ad1ff);}
  /* min-width:0 lets this shrink below its content's natural width instead of pushing
     the stamina/time-chip elements off the right edge on narrow phones — #resbar's own
     overflow-x:auto then takes over as an internal scroll strip */
  #resbar{display:flex; gap:10px; overflow-x:auto; font-size:11px; min-width:0; flex:1;}
  #resbar .res{display:flex; align-items:center; gap:3px; white-space:nowrap; color:var(--text);}
  #resbar .res .n{color:var(--signal); font-weight:bold;}
  #time-chip{display:flex; align-items:center; gap:4px; color:#5ad1ff; font-size:10px; white-space:nowrap; flex:0 0 auto;}
  .hud-icon-btn{
    color:var(--signal); border:1px solid var(--line); border-radius:50%; width:44px; height:44px;
    display:flex; align-items:center; justify-content:center; font-size:18px; cursor:pointer; flex:0 0 auto;
    background:rgba(10,14,15,0.62);
  }

  @media (max-width:400px){
    #hud-top{padding-left:8px; padding-right:8px; gap:6px;}
    #hud-nav-row{gap:6px;}
    #time-chip{font-size:9px; gap:2px;}
    .hud-icon-btn{width:38px; height:38px; font-size:16px;}
  }

  /* Canvas world */
  #world-wrap{flex:1; position:relative; overflow:hidden; touch-action:none;}
  canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
  #geo-status{
    position:absolute; inset:0; z-index:35; display:none; align-items:center; justify-content:center;
    padding:24px; text-align:center; background:rgba(5,7,10,0.92); pointer-events:auto;
  }
  #geo-status.show{display:flex;}
  #geo-status-card{max-width:300px; border:1px solid var(--signal); background:var(--bg); padding:18px;}
  #geo-status-title{color:var(--signal); font-size:13px; letter-spacing:1px;}
  #geo-status-detail{margin-top:8px; color:var(--dim); font-size:11px; line-height:1.45;}
  #geo-retry{display:none; width:100%; margin-top:14px; padding:9px; border:1px solid var(--signal); background:transparent; color:var(--signal); font:inherit; font-size:10px; letter-spacing:1px; cursor:pointer;}
  #geo-status.error #geo-retry{display:block;}

  /* large, central pickup confirmation — deliberately separate from the small
     resource counters so it stays readable while mining on a phone */
  #mining-reward{
    position:absolute; top:18px; left:50%; z-index:31; pointer-events:none;
    transform:translate(-50%,-10px); opacity:0; white-space:nowrap;
    padding:9px 14px; border:1px solid var(--signal); border-radius:4px;
    background:rgba(5,14,12,0.9); color:var(--text); font-size:17px; font-weight:bold;
    letter-spacing:0.5px; text-shadow:0 0 10px rgba(57,255,136,0.72);
  }
  #mining-reward.show{animation:miningReward 1.55s ease-out forwards;}
  @keyframes miningReward{
    0%{opacity:0; transform:translate(-50%,-10px) scale(0.92);}
    14%,62%{opacity:1; transform:translate(-50%,0) scale(1);}
    100%{opacity:0; transform:translate(-50%,-12px) scale(1.02);}
  }

  /* mode toggle (mine / move) */
  #mode-toggle{
    display:none;
    position:absolute; left:12px; top:12px; z-index:25; cursor:pointer;
    border:1px solid var(--signal); color:var(--signal); background:rgba(10,14,15,0.82);
    padding:7px 12px; font-size:11px; letter-spacing:1px; border-radius:4px;
  }
  #mode-toggle.move{ border-color:#5ad1ff; color:#5ad1ff; }
  #mode-toggle.placing{ border-color:var(--danger); color:var(--danger); }

  /* virtual joystick */
  #joystick{
    position:absolute; left:16px; bottom:16px; width:96px; height:96px;
    border-radius:50%; border:1px solid var(--line); background:rgba(13,31,26,0.55) url("/assets/sprites/onscreen-controls/Sprites/Style%20H/Default/joystick_circle_pad_a.png") center/100% 100% no-repeat;
    touch-action:none; z-index:25;
  }
  #joystick-knob{
    width:42px; height:42px; border-radius:50%; background:rgba(57,255,136,0.25) url("/assets/sprites/onscreen-controls/Sprites/Style%20H/Default/joystick_circle_nub_a.png") center/100% 100% no-repeat;
    border:1px solid var(--signal); position:absolute; left:27px; top:27px;
    transition:transform 0.06s linear;
  }

  /* recenter camera button */
  #recenter-btn{
    position:absolute; right:14px; bottom:14px; width:44px; height:44px; border-radius:50%;
    border:1px solid var(--signal); background:rgba(10,14,15,0.82); color:var(--signal);
    font-size:19px; display:flex; align-items:center; justify-content:center; z-index:25; cursor:pointer;
  }
  #recenter-btn.hidden{display:none;}

  /* bottom action bar */
  #actionbar-wrap{
    z-index:20; border-top:1px solid var(--line);
    background:linear-gradient(0deg, rgba(10,14,15,0.97), rgba(10,14,15,0.85));
    padding: 10px 12px calc(env(safe-area-inset-bottom,0px) + 10px) 12px;
  }
  #actionbar{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
  .action-btn{
    /* the source PNG is a 3px-thick pixel-art frame around an opaque light-grey fill —
       stretching it as a plain background-image (the old rule) filled the whole button
       with that grey/white fill instead of a thin frame. border-image 9-slices it
       properly: only the 3px edge is drawn from the asset, and our own background
       color shows through the middle. */
    min-height:58px; border:3px solid var(--line); border-radius:8px; background:rgba(13,31,26,0.92);
    border-image-source:url("/assets/sprites/pixel-ui/9-Slice/Outline/green.png");
    border-image-slice:3; border-image-width:3px; border-image-repeat:stretch;
    color:var(--text); font-family:inherit; letter-spacing:1px; display:flex; align-items:center; justify-content:center;
    gap:8px; cursor:pointer; font-size:11px;
  }
  .action-btn .ico{font-size:22px; line-height:1;}
  .game-icon{display:block; width:22px; height:22px; object-fit:contain;}
  .action-btn.primary{border-color:var(--signal); color:var(--signal); box-shadow:0 0 14px rgba(57,255,136,0.16) inset;}
  .action-btn.mode-move{border-color:#5ad1ff; color:#5ad1ff;}
  .action-btn.mode-mine{border-color:#ffb347; color:#ffb347;}

  /* panels (craft / build / quest / info) — anchored above the hotbar, otherwise the
     open panel covers the very tab bar used to switch between panels */
  #panel{
    position:fixed; left:0; right:0; bottom:var(--actionbar-h, 0px); top:auto; max-height:62vh;
    background:var(--bg) url("/assets/sprites/pixel-ui/9-Slice/Outline/green.png") center/100% 100% no-repeat; border-top:1px solid var(--signal); z-index:40;
    display:none; flex-direction:column;
    box-shadow:0 -8px 30px rgba(0,0,0,0.6);
  }
  #panel.open{display:flex;}
  #panel-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 14px; border-bottom:1px solid var(--line);
  }
  #panel-head .title{color:var(--signal); font-size:13px; letter-spacing:2px;}
  #panel-close{color:var(--dim); font-size:18px; padding:4px 10px; cursor:pointer;}
  #panel-body{overflow-y:auto; padding:10px 14px 20px 14px;}
  .panel-tabs{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px;}
  .panel-tab{min-height:36px; border:1px solid var(--line); background:transparent; color:var(--dim); font:inherit; font-size:10px; letter-spacing:1px;}
  .panel-tab.active{border-color:var(--signal); color:var(--signal); background:rgba(57,255,136,0.08);}

  .recipe{
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 0; border-bottom:1px solid var(--line);
  }
  .recipe .info{flex:1;}
  .recipe .name{font-size:13px; color:var(--text);}
  .recipe .cost{font-size:10px; color:var(--dim); margin-top:2px;}
  .recipe .cost .ok{color:var(--signal);}
  .recipe .cost .no{color:var(--danger);}
  .recipe button{
    background:transparent; border:1px solid var(--signal); color:var(--signal);
    padding:6px 12px; font-family:inherit; font-size:11px; letter-spacing:1px; cursor:pointer;
  }
  .recipe button:disabled{border-color:var(--dim); color:var(--dim); cursor:not-allowed;}

  .quest{padding:8px 0; border-bottom:1px solid var(--line); font-size:12px; display:flex; gap:8px; align-items:flex-start;}
  .quest .box{color:var(--signal); font-size:14px; line-height:1;}
  .quest.done{color:var(--dim); text-decoration:line-through;}
  .quest .reward{font-size:10px; color:var(--dim); margin-top:2px;}

  .legend-section-title{color:var(--signal); font-size:11px; letter-spacing:2px; margin:14px 0 6px 0;}
  .legend-section-title:first-child{margin-top:0;}
  .legend-item{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:12px;}
  .legend-item .ic{width:22px; text-align:center; font-size:16px; flex:0 0 auto;}
  .legend-item .nm{flex:1; line-height:1.4;}

  #map-overlay{
    position:fixed; inset:0; z-index:70; display:none; flex-direction:column;
    background:rgba(5,7,10,0.96); color:var(--text);
  }
  #map-overlay.open{display:flex;}
  #map-head{display:flex; align-items:center; justify-content:space-between; padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 10px; border-bottom:1px solid var(--line);}
  #map-head .title{color:var(--signal); letter-spacing:2px; font-size:13px;}
  #map-close{border:1px solid var(--line); color:var(--signal); background:transparent; width:44px; height:44px; border-radius:50%; font-size:18px;}
  #map-stage{position:relative; flex:1; min-height:0;}
  #city-map{position:absolute; inset:0; width:100%; height:100%; touch-action:none;}
  #map-actions{display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 12px); border-top:1px solid var(--line);}
  .filter-chip,.map-tool{
    min-height:40px; border:1px solid var(--line); color:var(--dim); background:rgba(13,31,26,0.8);
    font-family:inherit; font-size:10px; letter-spacing:1px; border-radius:6px; padding:0 10px;
  }
  .filter-chip.active{color:var(--signal); border-color:var(--signal);}
  .map-tool{color:var(--text);}
  #waypoint-hud{
    position:absolute; left:50%; bottom:128px; transform:translateX(-50%);
    z-index:28; min-width:92px; padding:7px 10px; border:1px solid rgba(255,225,77,0.55);
    background:rgba(10,14,15,0.84); color:#ffe14d; display:none; align-items:center; justify-content:center;
    gap:7px; font-size:11px; border-radius:999px; pointer-events:none;
  }
  #waypoint-hud.show{display:flex;}
  #osm-attribution{
    position:absolute; right:6px; bottom:6px; z-index:24; color:rgba(232,255,232,0.52);
    font-size:9px; pointer-events:none; background:rgba(5,7,10,0.42); padding:2px 4px;
  }

  #context-menu,#map-context-menu{
    position:fixed; z-index:50; background:var(--panel); border:1px solid var(--signal);
    display:none; flex-direction:column; min-width:140px;
  }
  #context-menu button,#map-context-menu button{
    background:transparent; border:none; color:var(--text); padding:10px 14px; text-align:left;
    font-family:inherit; font-size:12px; border-bottom:1px solid var(--line); cursor:pointer;
  }
  #context-menu button:last-child,#map-context-menu button:last-child{border-bottom:none;}
  #context-menu button:active,#map-context-menu button:active{background:rgba(57,255,136,0.1);}

  #toast{
    /* clear of the mode toggle, which sits at the top-left of the world view */
    position:fixed; top:104px; left:50%; transform:translateX(-50%);
    max-width:calc(100% - 24px); text-align:center;
    background:var(--panel); border:1px solid var(--signal); color:var(--signal);
    padding:8px 16px; font-size:11px; letter-spacing:1px; z-index:60;
    opacity:0; pointer-events:none; transition:opacity 0.3s;
  }
  #toast.show{opacity:1;}
  #welcome-back{
    position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center;
    padding:24px; background:rgba(5,7,10,0.86);
  }
  #welcome-back.show{display:flex;}
  #poi-modal{position:fixed; inset:0; z-index:82; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(5,4,12,.88);}
  #poi-modal.show{display:flex;}
  .poi-card{position:relative; width:min(380px,100%); border:1px solid var(--poi); background:var(--bg); padding:20px; box-shadow:0 0 32px rgba(170,102,255,.2);}
  .poi-card .title{color:var(--poi); letter-spacing:1.5px; font-size:14px; padding-right:32px;}
  #poi-modal-close{position:absolute; right:8px; top:8px; width:34px; height:34px; border:0; background:transparent; color:var(--text); font:inherit; font-size:18px;}
  #poi-modal-detail{margin:10px 0 14px; color:var(--dim); font-size:11px; line-height:1.45;}
  #poi-modal-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  #poi-modal-actions button{min-height:42px; border:1px solid var(--poi); background:rgba(46,26,62,.72); color:var(--text); font:inherit; font-size:11px; letter-spacing:.7px;}
  #poi-modal-actions button:disabled{border-color:var(--dim); color:var(--dim);}
  #settings-modal{
    position:fixed; inset:0; z-index:82; display:none; align-items:center; justify-content:center;
    padding:24px; background:rgba(5,4,12,.88);
  }
  #settings-modal.show{display:flex;}
  .settings-card{position:relative; width:min(380px,100%); border:1px solid var(--signal); background:var(--bg); padding:20px; box-shadow:0 0 32px rgba(57,255,136,.16);}
  .settings-card .title{color:var(--signal); letter-spacing:1.5px; font-size:14px; padding-right:32px;}
  #settings-modal-close{position:absolute; right:8px; top:8px; width:34px; height:34px; border:0; background:transparent; color:var(--text); font:inherit; font-size:18px;}
  #settings-modal-body{margin-top:14px; color:var(--text); font-size:12px; line-height:1.6;}
  #settings-modal-body .row{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line);}
  #settings-modal-body .row:last-child{border-bottom:none;}
  #settings-modal-body .k{color:var(--dim); letter-spacing:.5px;}
  #settings-modal-body .v{color:var(--signal); text-align:right; word-break:break-word;}
  .welcome-card{
    width:min(360px,100%); border:1px solid var(--signal); background:var(--bg); padding:20px;
    box-shadow:0 0 32px rgba(57,255,136,0.16);
  }
  .welcome-card .title{color:var(--signal); letter-spacing:1.5px; font-size:13px;}
  #welcome-back-detail{margin:14px 0; color:var(--text); font-size:13px; line-height:1.55;}
  #welcome-back-close{width:100%; min-height:42px; border:1px solid var(--signal); background:transparent; color:var(--signal); font:inherit; letter-spacing:1px;}
  #tile-tooltip{
    position:absolute; z-index:29; display:none; pointer-events:none; max-width:220px;
    padding:5px 7px; border:1px solid rgba(57,255,136,0.52); background:rgba(5,7,10,0.9);
    color:var(--text); font-size:10px; line-height:1.3;
  }
  #tile-tooltip.show{display:block;}