html,body{margin:0;padding:0;overflow:hidden;background:#87CEEB;font-family:monospace;height:100%;}
  #c{display:block;touch-action:none;}
  /* ---- loading screen: shown until the first chunks around spawn are
     generated, then faded out and removed (see game-loop.js). Sits above
     everything (including #blocker/home screen) so it's the very first
     thing painted, even before any other UI has initialized. ---- */
  #loadingScreen{
    position:fixed;inset:0;z-index:100;background:#1c2024;color:#fff;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
    font-family:monospace;transition:opacity 0.4s ease;
  }
  #loadingScreen.fadeOut{ opacity:0; pointer-events:none; }
  #loadingTitle{ display:flex;align-items:center;justify-content:center; }
  #loadingLogo{ width:180px;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
  #loadingBarTrack{ width:260px;height:18px;border:3px solid #000;background:#333;border-radius:3px;overflow:hidden; }
  #loadingBarFill{ width:0%;height:100%;background:#5fa63a;transition:width 0.15s ease; }
  #loadingLabel{ font-size:13px;color:#ccc; }
  #crosshair{
    position:fixed;top:50%;left:50%;width:18px;height:18px;
    transform:translate(-50%,-50%);pointer-events:none;z-index:5;
  }
  #crosshair:before,#crosshair:after{ content:'';position:absolute;background:#fff;transition:background 0.05s; }
  #crosshair:before{ left:8px; top:0; width:2px; height:18px; }
  #crosshair:after{ top:8px; left:0; width:18px; height:2px; }
  /* Bolded/thickened briefly on left or right click (see triggerCrosshairPunch
     in player-controls.js), then eased back to the normal thin cross.
     Kept subtle — only 1px thicker each side, not a big blob. */
  #crosshair.punch:before{ left:7.5px; width:3px; }
  #crosshair.punch:after{ top:7.5px; height:3px; }
  #hotbar{
    position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
    display:flex;gap:4px;background:rgba(0,0,0,0.35);padding:6px;border:3px solid #000;border-radius:4px;
    z-index:5;
  }
  .slot{
    width:52px;height:52px;background:#c6c6c6;border:3px solid #000;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    position:relative;box-sizing:border-box;
  }
  .slot.active{ border-color:#fff; box-shadow:0 0 0 2px #000; }
  .slot .icon{width:28px;height:28px;border:2px solid #000;}
  .slot .count{position:absolute;bottom:1px;right:3px;font-size:11px;font-weight:bold;color:#000;text-shadow:1px 1px 0 #fff;}
  #fps{position:fixed;top:10px;right:10px;color:#0f0;font-size:12px;background:rgba(0,0,0,0.4);padding:4px 8px;border-radius:3px;z-index:5;text-align:right;line-height:1.5;}
  /* Depth/coordinate HUD readout — sits right under the FPS counter (top-right
     corner), shown any time the game is running. Especially useful now that
     caves go much deeper/bigger than the old world height, so it's easy to
     lose track of how far down you are relative to the surface. */
  #coordHud{
    position:fixed;top:66px;right:10px;color:#ddd;font-size:11px;font-family:monospace;
    background:rgba(0,0,0,0.4);padding:4px 8px;border-radius:3px;z-index:5;text-align:right;line-height:1.5;
  }
  #blocker{
    position:fixed;inset:0;color:#fff;z-index:20;background:#1c2024;
  }
  /* ---- bloxd.io-style home screen: full-bleed dark page + card grid ---- */
  #homeScreen{
    position:absolute;inset:0;background:#1c2024;overflow-y:auto;
    font-family:monospace;cursor:default;
  }
  #homeTopBar{
    display:flex;align-items:center;justify-content:center;position:relative;
    padding:14px 20px;background:#22262b;border-bottom:2px solid #000;pointer-events:auto;
  }
  #homeUpdatesBtn{
    position:absolute;right:20px;bottom:20px;
    display:flex;align-items:center;gap:6px;font-family:monospace;font-size:13px;font-weight:bold;
    background:#333;color:#fff;border:none;border-radius:5px;padding:10px 16px;cursor:pointer;
    box-shadow:0 2px 0 rgba(0,0,0,0.4);pointer-events:auto;z-index:2;
  }
  #homeUpdatesBtn:hover{ background:#3d3d3d; }
  #homeUpdatesBtn:active{ transform:translateY(1px); }
  /* Unseen-updates badge: small dot pinned to the button's top-right corner,
     shown only while the latest CHANGELOG version is newer than the version
     the player last actually opened the panel on (see updates.js). Button is
     already position:absolute above, so this just anchors off it directly. */
  #homeUpdatesBtn.hasUnseen::after{
    content:'';position:absolute;top:-4px;right:-4px;width:10px;height:10px;
    background:#ff5252;border:2px solid #1c2024;border-radius:50%;
  }
  /* Player name + Settings gear: home-screen-only corner widgets, both
     positioned relative to #blocker (position:fixed, see above) so they sit
     in fixed screen corners regardless of home-screen scroll — same
     treatment as #homeUpdatesBtn, just the other two corners so none of the
     three overlap or crowd the top bar. */
  #playerNameLabel{
    position:absolute;top:12px;left:20px;color:#fff;font:bold 15px monospace;
    background:rgba(0,0,0,0.45);border:none;padding:8px 14px;border-radius:5px;
    cursor:pointer;z-index:2;pointer-events:auto;
  }
  #playerNameLabel:hover{ background:rgba(0,0,0,0.65); }
  #playerNameLabel:active{ transform:translateY(1px); }
  /* Small popup editor that appears right under the name label when
     clicked — positioned relative to #blocker same as the label itself,
     just offset a bit further down so it doesn't sit on top of it. */
  #playerNameEditor{
    position:absolute;top:56px;left:20px;z-index:3;
    background:#333;border:3px solid #111;border-radius:6px;padding:12px;
    display:flex;gap:8px;align-items:center;box-shadow:0 4px 10px rgba(0,0,0,0.4);
    pointer-events:auto;
  }
  #playerNameEditor input{
    font-family:monospace;font-size:13px;padding:7px 9px;width:150px;border:2px solid #123;border-radius:3px;
    background:#1c1f21;color:#fff;box-sizing:border-box;
  }
  #playerNameEditor .menuBtn{ display:inline-block;width:auto;margin:0;padding:8px 14px;font-size:13px; }
  #settingsIconBtn{
    position:absolute;top:12px;right:20px;
    background:none;border:none;color:#fff;font-size:30px;line-height:1;
    cursor:pointer;z-index:2;padding:0;pointer-events:auto;
    text-shadow:0 2px 4px rgba(0,0,0,0.6);
  }
  #settingsIconBtn:hover{ color:#ffd54a; }
  #settingsIconBtn:active{ transform:translateY(1px); }
  #homeBrand{ font-size:20px;font-weight:bold;letter-spacing:1px;display:flex;align-items:center;gap:8px; }
  #homeBrandIcon{ width:22px;height:22px;object-fit:contain; }
  #homeGridWrap{ padding:18px 24px 40px; pointer-events:auto; }
  #homeGridWrap .gridLabel{ color:#9aa5a9;font-size:13px;margin:14px 0 8px; }
  #gameGrid, #worldGrid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;
  }
  .gameCard{
    aspect-ratio:1/1;position:relative;border:none;border-radius:8px;overflow:hidden;
    cursor:pointer;padding:0;background:#333;color:#fff;font-family:monospace;
    box-shadow:0 2px 0 rgba(0,0,0,0.4);
  }
  .gameCard:active{ transform:translateY(1px); }
  .gameCardArt{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:42px;
  }
  .gameCardArt-survival{ background:linear-gradient(160deg,#3a6b2e,#274a1f); }
  .gameCardArt-creative{ background:linear-gradient(160deg,#2e5a8f,#1f3d61); }
  .gameCardArt-parkour{ background:linear-gradient(160deg,#a8791f,#6b4a10); }
  .gameCardArt-mapmaker{ background:linear-gradient(160deg,#8a3fd6,#4a1f7a); }
  .gameCardArt-oneblock{ background:linear-gradient(160deg,#5a8f3c,#2f4a1f); }
  .gameCardArt-lavarise{ background:linear-gradient(160deg,#e8580f,#4a1706); }
  .gameCardLabel{
    position:absolute;left:0;right:0;bottom:0;padding:6px 8px 7px;
    background:linear-gradient(0deg,rgba(0,0,0,0.85),rgba(0,0,0,0));
    font-size:12.5px;font-weight:bold;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .worldCard .gameCardArt{ font-size:30px; }
  .worldCard .worldCardMeta{
    position:absolute;top:5px;right:6px;background:rgba(0,0,0,0.55);border-radius:8px;
    font-size:9.5px;padding:2px 6px;
  }
  .worldCard .worldRowDelete{
    position:absolute;top:5px;left:6px;background:rgba(90,38,38,0.85);border:none;border-radius:8px;
    color:#fff;font-size:11px;width:20px;height:20px;line-height:20px;padding:0;cursor:pointer;
  }
  .worldCard .worldRowDelete:hover{ background:#7a3232; }
  #worldListEmpty{ font-size:12px;color:#666;padding:6px 2px; }
  /* ---- name-entry dialog: centered box on top of the home screen ---- */
  #namePrompt{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    text-align:center;font-size:20px;
  }
  #namePrompt.box{background:#333;border:4px solid #111;padding:24px 34px;border-radius:6px;pointer-events:auto;}
  #namePrompt h1{margin:0 0 10px 0;font-size:22px;letter-spacing:1px;}
  /* ---- delete-world confirmation dialog: same centered-box treatment,
     shown before a world save is actually wiped (see requestDeleteWorld()
     in player-controls.js) ---- */
  #deleteConfirm{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    text-align:center;font-size:20px;
  }
  #deleteConfirm.box{background:#333;border:4px solid #111;padding:24px 34px;border-radius:6px;pointer-events:auto;max-width:340px;}
  #deleteConfirm h1{margin:0 0 10px 0;font-size:22px;letter-spacing:1px;}
  #deleteConfirm p{margin:0 0 4px 0;font-size:14px;color:#ddd;line-height:1.5;}
  /* ---- updates/changelog dialog: same centered-box treatment as
     #namePrompt, just wider and with an internally-scrolling list so old
     entries stay reachable without the dialog itself growing past the
     viewport ---- */
  #updatesPanel{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    text-align:center;font-size:20px;
  }
  #updatesPanel.box{
    background:#333;border:4px solid #111;padding:22px 30px;border-radius:6px;pointer-events:auto;
    width:440px;max-width:88vw;
  }
  #updatesPanel h1{margin:0 0 12px 0;font-size:22px;letter-spacing:1px;}
  #updatesList{
    max-height:56vh;overflow-y:auto;text-align:left;font-size:14px;margin-bottom:16px;padding-right:6px;
  }
  .updateEntry{
    border-bottom:1px solid #444;padding:10px 2px 14px;
  }
  .updateEntry:last-child{ border-bottom:none; }
  /* Newest entry gets a subtle left accent + tint so it reads as "current"
     at a glance, distinct from the plain older entries below it. */
  .updateEntry-latest{
    background:rgba(255,213,74,0.06);border-left:3px solid #ffd54a;
    padding-left:10px;margin-left:-10px;border-radius:0 4px 4px 0;
  }
  .updateEntry .updateHeader{
    display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;
  }
  .updateEntry .updateVersion{ color:#ffd54a;font-weight:bold; }
  .updateLatestTag{
    color:#1c2024;background:#ffd54a;font-size:10px;font-weight:bold;
    padding:2px 6px;border-radius:8px;letter-spacing:0.5px;vertical-align:middle;
  }
  .updateEntry .updateDate{ color:#9aa5a9;font-size:12px; }
  .updateEntry ul{ margin:0;padding-left:0;color:#ddd;font-size:13px;line-height:1.6;list-style:none; }
  .updateEntry ul li{ margin-bottom:5px; }
  /* Category tags — New / Fixed / Changed — one per changelog line, colored
     so the panel is scannable without reading every sentence. */
  .updateTag{
    display:inline-block;font-size:9.5px;font-weight:bold;letter-spacing:0.5px;
    padding:2px 6px;border-radius:3px;margin-right:7px;vertical-align:1px;
  }
  .updateTag-new{ background:#2f6b3c;color:#a9e8b6; }
  .updateTag-fix{ background:#6b3c2f;color:#f0b8a0; }
  .updateTag-change{ background:#2f4a6b;color:#a9c8e8; }
  .menuBtn{
    display:block;width:220px;margin:8px auto;padding:10px 16px;font-size:15px;font-family:monospace;font-weight:bold;
    background:#4a8f3c;color:#fff;border:3px solid #123;border-radius:4px;cursor:pointer;pointer-events:auto;
  }
  .menuBtn:active{ transform:translateY(1px); }
  .menuBtn.secondary{ background:#5a5a5a; }
  .menuBtn.danger{ background:#8f3c3c; }
  .menuBtn:disabled{ background:#3a3a3a; color:#888; cursor:not-allowed; }
  #namePrompt input{
    font-family:monospace;font-size:14px;padding:9px 10px;width:100%;border:2px solid #123;border-radius:3px;
    text-align:center;box-sizing:border-box;margin-top:10px;pointer-events:auto;
  }
  #escMenu{
    position:fixed;inset:0;background:rgba(0,0,0,0.55);display:none;align-items:center;justify-content:center;z-index:25;
  }
  #escMenu .box{background:#333;border:4px solid #111;padding:22px 30px;border-radius:6px;text-align:center;}
  #escMenu h2{color:#fff;margin:0 0 12px 0;}
  #settingsPanel{
    position:fixed;inset:0;background:rgba(0,0,0,0.55);display:none;align-items:center;justify-content:center;z-index:26;
  }
  #settingsPanel .box{background:#333;border:4px solid #111;padding:22px 30px;border-radius:6px;text-align:center;min-width:280px;}
  #settingsPanel h2{color:#fff;margin:0 0 16px 0;}

  /* ---- Settings v2: sidebar-tabs layout (Account/General/Audio/etc. style
     reference), replacing the old single stacked list of every setting.
     #settingsPanel .box above still supplies the outer dark box/border; this
     just restyles its interior into a header + sidebar + content area. ---- */
  #settingsPanel .settingsBoxV2{
    text-align:left;padding:0;overflow:hidden;width:560px;max-width:92vw;
  }
  .settingsHeader{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 22px;border-bottom:2px solid #222;
  }
  .settingsHeader h2{ margin:0; }
  .settingsCloseBtn{
    background:#8f3c3c;color:#fff;border:none;border-radius:4px;width:26px;height:26px;
    font-size:14px;line-height:1;cursor:pointer;pointer-events:auto;
  }
  .settingsCloseBtn:hover{ background:#a94848; }
  .settingsBody{ display:flex;min-height:340px;max-height:60vh; }
  .settingsSidebar{
    display:flex;flex-direction:column;gap:2px;width:150px;flex-shrink:0;
    background:#2a2a2a;padding:10px 0;border-right:2px solid #222;overflow-y:auto;
  }
  .settingsTabBtn{
    display:block;width:100%;text-align:left;background:none;border:none;color:#bbb;
    font:bold 13px monospace;padding:10px 16px;cursor:pointer;pointer-events:auto;
    border-left:3px solid transparent;
  }
  .settingsTabBtn:hover{ background:rgba(255,255,255,0.05);color:#fff; }
  .settingsTabBtn.active{ color:#ffd54a;background:rgba(255,213,74,0.08);border-left:3px solid #ffd54a; }
  .settingsContent{ flex:1;padding:20px 22px;overflow-y:auto; }
  .settingsTab{ display:none; }
  .settingsTab.active{ display:block; }

  .keybindList{ margin-top:14px;border-top:1px solid #444;padding-top:10px; }
  .keybindRow{
    display:flex;align-items:center;justify-content:space-between;
    padding:7px 0;border-bottom:1px solid #3a3a3a;
  }
  .keybindRow:last-child{ border-bottom:none; }
  .keybindRow .keybindLabel{ color:#fff;font:bold 13px monospace; }
  .keybindKeyBtn{
    background:#1c1f21;color:#ffd54a;border:2px solid #123;border-radius:3px;
    font:bold 12px monospace;padding:6px 14px;min-width:96px;text-align:center;
    cursor:pointer;pointer-events:auto;
  }
  .keybindKeyBtn:hover{ border-color:#4a8f3c; }
  .keybindKeyBtn.listening{ background:#4a8f3c;color:#fff;border-color:#fff; }
  .keybindKeyBtn.conflict{ border-color:#c0392b;color:#ff8a80; }
  .keybindResetBtn{ margin:14px 0 0 0;width:auto;min-width:0;padding:9px 16px;font-size:12px; }

  #settingsPanel .box .keybindList,
  #settingsPanel .box .settingsRow{ text-align:left; }
  #settingsPanel .settingsBoxV2 > .menuBtn{ margin:14px 22px 20px; width:calc(100% - 44px); }
  .settingsRow{margin:0 0 16px 0;text-align:left;}
  .settingsRow label{
    display:flex;justify-content:space-between;color:#fff;font:bold 13px monospace;margin-bottom:6px;
  }
  .settingsRow label span{color:#ffd54a;font-weight:normal;}
  .settingsRow input[type="text"]{
    font-family:monospace;font-size:13px;padding:7px 9px;width:100%;border:2px solid #123;border-radius:3px;
    text-align:center;box-sizing:border-box;margin-top:4px;background:#1c1f21;color:#fff;
  }
  .settingsRow input[type="range"]{
    width:100%;pointer-events:auto;accent-color:#4a8f3c;
  }
  /* toggle-style row (checkbox), e.g. Invert Y Look — label + checkbox
     side by side instead of label-above-slider like the range rows */
  .settingsRow-toggle{ display:flex;align-items:center;justify-content:space-between; }
  .settingsRow-toggle label{ margin-bottom:0; }
  .settingsRow-toggle input[type="checkbox"]{
    width:20px;height:20px;pointer-events:auto;accent-color:#4a8f3c;cursor:pointer;flex-shrink:0;
  }
  /* Graphics tab tier row — four equal buttons, the active tier highlighted
     (same look as the keybind key buttons: dark chip, gold text, green hover). */
  .gfxTierRow{ display:flex;gap:6px; }
  .gfxTierBtn{
    flex:1 1 0;min-width:0;background:#1c1f21;color:#ffd54a;border:2px solid #123;border-radius:3px;
    font:bold 12px monospace;padding:8px 0;text-align:center;cursor:pointer;pointer-events:auto;
  }
  .gfxTierBtn:hover{ border-color:#4a8f3c; }
  .gfxTierBtn.active{ background:#4a8f3c;color:#fff;border-color:#fff; }
  /* Character tab color swatches — label above a row of clickable color
     circles, same label style as every other settings row. */
  .settingsRow-swatches label{ margin-bottom:8px; }
  .swatchRow{ display:flex; flex-wrap:wrap; gap:8px; }
  .colorSwatch{
    width:30px;height:30px;border-radius:50%;border:2px solid #123;cursor:pointer;
    pointer-events:auto;padding:0;box-sizing:border-box;transition:transform 0.1s;
  }
  .colorSwatch:hover{ transform:scale(1.12); }
  .colorSwatch.selected{
    border-color:#ffd54a;box-shadow:0 0 0 2px #ffd54a;
  }
  #loadingMsg{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);color:#fff;font-size:12px;
    background:rgba(0,0,0,0.4);padding:4px 10px;border-radius:3px;z-index:5;display:none;}
  #craftPanel{
    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    background:#c6c6c6;border:4px solid #000;padding:16px;border-radius:4px;
    display:none;z-index:15;width:560px;max-width:92vw;max-height:88vh;overflow-y:auto;
  }
  #craftPanel h2{margin:0 0 10px 0;font-size:16px;}
  #invMain{ display:flex; gap:14px; margin-bottom:10px; }
  #craftGridArea{ flex:1.3; }
  #recipeBook{ flex:1; min-width:0; border-left:2px solid #8a8a8a; padding-left:12px; }
  #recipeBookHint{ font-weight:normal; font-size:10px; color:#444; }
  .gridLabel{ font-size:11px; font-weight:bold; color:#333; margin:8px 0 4px 0; }
  #craftGridWrap{ display:flex; align-items:center; gap:8px; }
  #craftArrow{ font-size:20px; font-weight:bold; color:#333; }
  #craftStationNote{ font-size:11px;color:#333;margin:2px 0 8px 0; }
  .itemGrid{
    display:grid; gap:4px;
  }
  #craftGrid2x2{ grid-template-columns:repeat(2,40px); }
  #craftGrid3x3{ grid-template-columns:repeat(3,40px); }
  #craftOutputGrid{ grid-template-columns:40px; }
  #backpackGrid{ grid-template-columns:repeat(9,40px); }
  #invHotbarGrid{ grid-template-columns:repeat(9,40px); }
  .craftGrid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:4px;max-height:260px;overflow-y:auto;
    padding-right:2px;
  }
  .itemSlot{
    width:40px;height:40px;background:#8a8a8a;border:2px solid #000;
    display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;box-sizing:border-box;
    user-select:none;
  }
  .itemSlot:hover{ background:#a0a0a0; }
  .itemSlot.output{ background:#7a7a5a; cursor:default; }
  .itemSlot.output:hover{ background:#7a7a5a; }
  .itemSlot .icon{ position:absolute; inset:2px; }
  .itemSlot .count{
    position:absolute; bottom:0px; right:2px; font-size:11px; font-weight:bold; color:#fff;
    text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
  }
  .craftSlot{
    width:44px;height:44px;background:#8a8a8a;border:2px solid #000;
    display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;box-sizing:border-box;
  }
  .craftSlot:hover{ background:#a0a0a0; }
  .craftSlot.selected{ border-color:#fff; box-shadow:0 0 0 2px #4a8f3c; }
  .craftSlot.locked{ opacity:0.45; cursor:not-allowed; }
  .craftSlot .icon{width:26px;height:26px;border:2px solid #000;}
  .craftSlot .lockBadge{
    position:absolute;bottom:1px;right:2px;font-size:10px;
  }
  #heldItemGhost{
    position:fixed; width:36px; height:36px; pointer-events:none; z-index:40; display:none;
    filter:drop-shadow(2px 2px 2px rgba(0,0,0,0.6));
  }
  #heldItemGhost .count{
    position:absolute; bottom:-2px; right:-2px; font-size:11px; font-weight:bold; color:#fff;
    text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
  }
  #closeCraft{position:absolute;top:6px;right:8px;cursor:pointer;font-weight:bold;background:#000;color:#fff;
    width:20px;height:20px;text-align:center;line-height:20px;border-radius:2px;font-size:13px;}
  #furnacePanel{
    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    background:#c6c6c6;border:4px solid #000;padding:16px;border-radius:4px;
    display:none;z-index:15;width:420px;max-width:92vw;max-height:88vh;overflow-y:auto;
  }
  #furnacePanel h2{margin:0 0 10px 0;font-size:16px;}
  #closeFurnace{position:absolute;top:6px;right:8px;cursor:pointer;font-weight:bold;background:#000;color:#fff;
    width:20px;height:20px;text-align:center;line-height:20px;border-radius:2px;font-size:13px;}
  #furnaceBody{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
  .furnaceCol{ display:flex; flex-direction:column; align-items:center; }
  #furnaceFlame{ font-size:20px; margin:6px 0; opacity:0.35; transition:opacity 0.2s; }
  #furnaceFlame.lit{ opacity:1; filter:drop-shadow(0 0 4px #ff9a2e); }
  #furnaceProgressWrap{ display:flex; flex-direction:column; align-items:center; gap:2px; }
  #furnaceArrow{ font-size:18px; font-weight:bold; color:#333; }
  #furnaceProgressTrack{ width:60px; height:8px; background:#5a5a5a; border:1px solid #000; border-radius:2px; overflow:hidden; }
  #furnaceProgressFill{ height:100%; width:0%; background:#e8792e; transition:width 0.15s linear; }
  #chestPanel{
    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    background:#c6c6c6;border:4px solid #000;padding:16px;border-radius:4px;
    display:none;z-index:15;width:420px;max-width:92vw;max-height:88vh;overflow-y:auto;
  }
  #chestPanel h2{margin:0 0 10px 0;font-size:16px;}
  #closeChest{position:absolute;top:6px;right:8px;cursor:pointer;font-weight:bold;background:#000;color:#fff;
    width:20px;height:20px;text-align:center;line-height:20px;border-radius:2px;font-size:13px;}
  #chestGrid{ grid-template-columns:repeat(9,40px); margin-bottom:6px; }
  #vitals{
    position:fixed;bottom:88px;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:row;gap:18px;z-index:6;pointer-events:none;align-items:center;
  }
  .bar{display:flex;gap:2px;}
  .pip{width:13px;height:13px;position:relative;}
  .pip svg{width:100%;height:100%;display:block;filter:drop-shadow(1px 1px 0 #000);}
  @keyframes barHit{
    0%{transform:translateX(0);}
    20%{transform:translateX(-3px);}
    40%{transform:translateX(3px);}
    60%{transform:translateX(-2px);}
    80%{transform:translateX(2px);}
    100%{transform:translateX(0);}
  }
  .bar.hit{ animation:barHit 0.3s ease; filter:drop-shadow(0 0 4px rgba(217,38,38,0.85)); }
  #dayClock{
    position:fixed;top:10px;left:50%;transform:translateX(-50%);color:#fff;font-size:12px;
    background:rgba(0,0,0,0.35);padding:4px 10px;border-radius:3px;z-index:5;text-align:center;
    display:flex;align-items:center;gap:6px;
  }
  #dayClock .icon{font-size:14px;}
  #toast{
    position:fixed;bottom:110px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;
    background:rgba(0,0,0,0.55);padding:6px 14px;border-radius:3px;z-index:6;text-align:center;
    opacity:0;pointer-events:none;transition:opacity 0.25s;
  }
  #toast.show{opacity:1;}
  #deathScreen{
    position:fixed;inset:0;background:rgba(60,0,0,0.75);color:#fff;display:none;
    align-items:center;justify-content:center;flex-direction:column;z-index:30;text-align:center;
  }
  #deathScreen h1{
    font-size:42px;margin:0 0 10px 0;letter-spacing:3px;color:#ff5252;
    text-shadow:0 0 18px rgba(255,82,82,0.6),2px 2px 0 #2a0000;
    animation:deathTitleIn 0.35s ease-out;
  }
  @keyframes deathTitleIn{
    from{ transform:scale(1.3); opacity:0; }
    to{ transform:scale(1); opacity:1; }
  }
  #deathScreen p{font-size:14px;color:#ecc;margin:4px 0;}
  #deathCause{font-size:17px;color:#fff;font-weight:bold;margin-top:2px;}
  #deathSurvived{font-size:12.5px;color:#c99;margin-bottom:18px;letter-spacing:0.5px;}
  #mineProgress{
    position:fixed;top:calc(50% + 22px);left:50%;transform:translateX(-50%);
    width:60px;height:6px;background:rgba(0,0,0,0.4);border:1px solid #000;border-radius:2px;
    z-index:5;display:none;overflow:hidden;
  }
  #mineProgress .fill{height:100%;background:#e0b04a;width:0%;}

/* ===== v2.0 homepage polish (flat, sharp, amber/dark) ===== */
#homeScreen{ background:#15171a; }
#homeTopBar{ flex-direction:column; gap:6px; padding:26px 20px 18px; background:#1b1e22; border-bottom:2px solid #c98a2b; }
#homeBrand{ font-size:30px; letter-spacing:6px; color:#e0a43a; }
#homeBrandIcon{ width:30px; height:30px; image-rendering:pixelated; }
#homeTagline{ font-size:12px; letter-spacing:4px; color:#8a8f96; text-transform:uppercase; }
#homeGridWrap{ max-width:980px; margin:0 auto; animation:homeIn .45s ease-out both; }
@keyframes homeIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.gridLabel{ color:#c98a2b; letter-spacing:3px; text-transform:uppercase; border-bottom:1px solid #2c3035; padding-bottom:6px; }
.gameCard{ border:2px solid #2c3035; border-radius:3px; background:#1f2328; transition:transform .12s ease, border-color .12s ease, background .12s ease; }
.gameCard:hover{ transform:translateY(-3px); border-color:#c98a2b; background:#252a30; }
.gameCard:active{ transform:translateY(0); }
.gameCardLabel{ letter-spacing:2px; text-transform:uppercase; }
#homeUpdatesBtn, #playerNameLabel{ border-radius:3px; }


/* ---------- account box (Sign in with Google), bottom-left of the home screen; account.js shows it only when the server supports sign-in ---------- */
#accountBox{
  position:absolute;left:20px;bottom:20px;z-index:2;pointer-events:auto;
  flex-direction:column;align-items:flex-start;gap:6px;max-width:300px;
  background:rgba(0,0,0,0.45);border-radius:5px;padding:10px 12px;font-family:monospace;color:#fff;
}
#accountBox .accountRow{ display:flex;align-items:center;gap:10px; }
#accountBox .accountWho{ font-size:13px;font-weight:bold; }
#accountBox .accountOut{
  font:bold 12px monospace;background:#333;color:#fff;border:none;border-radius:4px;padding:5px 10px;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,0.4);
}
#accountBox .accountOut:hover{ background:#3d3d3d; }
#accountBox .accountHint{ font-size:11px;opacity:0.75;line-height:1.35; }
#accountBox .accountMsg{ font-size:12px;color:#ffd54a; }