:root{
    --bg: #17140f;
    --bg-panel: #221c15;
    --bg-panel-2: #2b241a;
    --stroke: #3a3225;
    --lantern: #d6903c;
    --lantern-dim: #8a5f2c;
    --gem: #55c2b5;
    --wood: #7fae5f;
    --text: #ece5d6;
    --text-muted: #a89a82;
    --danger: #c2542f;
    --success: #6fae5b;
    --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sans);}
  body{
    min-height:100vh;
    background:
      radial-gradient(ellipse at top, #2a2115 0%, transparent 60%),
      repeating-linear-gradient(180deg, #17140f 0px, #171310 40px, #191410 41px, #171310 81px);
    overscroll-behavior:none;
  }
  .app{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding-bottom:70px;}

  header.top{
    padding:14px 16px 10px;
    display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid var(--stroke);
    background:linear-gradient(180deg, rgba(214,144,60,.08), transparent);
  }
  header.top h1{
    font-size:16px;margin:0;letter-spacing:.04em;text-transform:uppercase;
    font-family:var(--mono);color:var(--lantern);
  }
  header.top .money{
    font-family:var(--mono);font-size:15px;font-weight:600;color:var(--text);
    display:flex;align-items:center;gap:6px;
  }
  header.top .money::before{content:"₽";color:var(--lantern);}

  .skill-shaft{
    margin:14px 16px 4px;
    background:var(--bg-panel);
    border:1px solid var(--stroke);
    border-radius:10px;
    padding:12px 14px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.35);
  }
  .skill-shaft + .skill-shaft{margin-top:8px;}
  .skill-shaft .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
  .skill-shaft .label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);}
  .skill-shaft .value{font-family:var(--mono);font-size:15px;color:var(--gem);}
  .skill-shaft.wood-shaft .value{color:var(--wood);}
  .shaft-track{
    position:relative;height:14px;border-radius:7px;overflow:hidden;
    background:repeating-linear-gradient(90deg,#151009 0 8px,#1b140d 8px 16px);
    border:1px solid var(--stroke);
  }
  .shaft-fill{
    position:absolute;inset:0 auto 0 0;height:100%;width:0%;
    background:linear-gradient(90deg, var(--lantern-dim), var(--lantern));
    box-shadow:0 0 10px rgba(214,144,60,.55);
    transition:width .35s ease;
  }
  .wood-shaft .shaft-fill{
    background:linear-gradient(90deg, #3f5c31, var(--wood));
    box-shadow:0 0 10px rgba(127,174,95,.45);
  }
  .shaft-locked{font-size:11px;color:var(--text-muted);text-align:center;padding:4px 0 0;}

  main{flex:1;padding:4px 16px 16px;}
  .view{display:none;}
  .view.active{display:block;}

  .mine-stage{
    margin-top:10px;
    background:var(--bg-panel);
    border:1px solid var(--stroke);
    border-radius:14px;
    padding:20px 16px 16px;
    text-align:center;
  }
  .mode-toggle{display:flex;gap:8px;justify-content:center;margin-bottom:12px;}
  .mode-toggle button{
    font-family:var(--mono);font-size:12px;padding:8px 14px;border-radius:999px;
    border:1px solid var(--stroke);background:var(--bg-panel-2);color:var(--text-muted);cursor:pointer;
  }
  .mode-toggle button.active{color:var(--lantern);border-color:var(--lantern-dim);}
  .mode-toggle button:disabled{opacity:.35;cursor:default;}

  .mining-anim{
    font-size:44px;text-align:center;margin:8px 0 4px;
    display:flex;align-items:center;justify-content:center;gap:2px;
  }
  .miner-figure{display:inline-block;}
  .mining-tool{
    display:inline-block;font-size:40px;
    transform-origin:75% 85%;
    animation: swing-tool 0.85s ease-in-out infinite;
  }
  .mining-tool.wood-tool{ animation-duration:0.7s; }
  @keyframes swing-tool{
    0%{ transform:rotate(-10deg); }
    35%{ transform:rotate(-45deg); }
    55%{ transform:rotate(20deg); }
    100%{ transform:rotate(-10deg); }
  }

  .mine-stage.mine-3d{padding:14px 14px 16px;}
  .mine-scene{
    position:relative;height:170px;border-radius:14px;overflow:hidden;
    margin-bottom:10px;perspective:420px;
    border:2px solid #241a10;
    background:
      radial-gradient(ellipse 90% 70% at 78% 45%, #3a2c1a 0%, #221709 55%, transparent 75%),
      linear-gradient(180deg, #17110a 0%, #241a10 55%, #1c140b 100%);
    box-shadow:inset 0 0 30px rgba(0,0,0,.7);
  }
  .mine-tunnel{
    position:absolute;inset:0;
    background:
      radial-gradient(ellipse 60% 90% at 50% 40%, transparent 40%, rgba(0,0,0,.6) 100%),
      repeating-linear-gradient(100deg, rgba(0,0,0,.12) 0 3px, transparent 3px 16px);
  }
  .mine-floor{
    position:absolute;left:0;right:0;bottom:0;height:46%;
    background:linear-gradient(180deg, rgba(60,45,26,.4), rgba(20,14,8,.9));
    transform:rotateX(35deg) scale(1.2);transform-origin:50% 100%;
    border-top:1px solid rgba(255,255,255,.06);
  }
  .mine-detail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
  .mine-beam{
    position:absolute;bottom:8%;width:7px;height:52%;
    background:linear-gradient(90deg,#6b4a2c,#3a2814);
    border-radius:2px;box-shadow:1px 0 2px rgba(0,0,0,.4);
  }
  .mine-beam.mb1{left:38%;}
  .mine-beam.mb2{left:60%;}
  .mine-beam-top{
    position:absolute;bottom:52%;left:36%;width:26%;height:6px;
    background:linear-gradient(180deg,#7a5834,#3a2814);border-radius:2px;
  }
  .mine-torch{position:absolute;width:18px;height:26px;z-index:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));}
  .mine-rubble{
    position:absolute;border-radius:50%;transform:translate(-50%,-50%);
    background:radial-gradient(circle at 35% 30%, #3a2a1a, #16100a);opacity:.75;
  }
  .mine-vein{position:absolute;right:8%;top:18%;width:34%;height:60%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));}
  .mine-ore-copper{position:absolute;left:2%;top:12%;width:20%;height:26%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));}
  .mine-ore-quartz{position:absolute;right:2%;bottom:6%;width:16%;height:24%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));}
  .mine-figure-svg{position:absolute;left:8%;bottom:2%;width:46%;height:92%;filter:drop-shadow(0 4px 5px rgba(0,0,0,.55));}
  .miner-swing-arm{transform-origin:39px 40px;animation:miner-swing 0.9s ease-in-out infinite;}
  @keyframes miner-swing{
    0%{ transform:rotate(-6deg); }
    35%{ transform:rotate(-58deg); }
    52%{ transform:rotate(18deg); }
    100%{ transform:rotate(-6deg); }
  }
  .mine-spark{
    position:absolute;right:18%;top:42%;width:10px;height:10px;border-radius:50%;
    background:radial-gradient(circle, #fff3d6 0%, #e8c878 40%, transparent 75%);
    opacity:0;animation:mine-spark-flash 0.9s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes mine-spark-flash{
    0%,44%{opacity:0;transform:scale(.5);}
    52%{opacity:1;transform:scale(1.4);}
    62%,100%{opacity:0;transform:scale(.6);}
  }

  /* ---- forest scene (Лес) — same staging technique as the mine, forest palette ---- */
  .forest-scene{
    position:relative;height:170px;border-radius:14px;overflow:hidden;
    margin-bottom:10px;
    border:2px solid #1c2413;
    background:
      radial-gradient(ellipse 90% 70% at 25% 24%, #3a4a24 0%, #202c14 55%, transparent 75%),
      linear-gradient(180deg, #101a0c 0%, #1a2412 55%, #12190c 100%);
    box-shadow:inset 0 0 30px rgba(0,0,0,.7);
  }
  .forest-canopy{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
  .forest-ray{
    position:absolute;top:-6%;width:16px;height:70%;
    background:linear-gradient(180deg, rgba(226,224,160,.24), transparent);
    transform:rotate(10deg);filter:blur(1px);pointer-events:none;
  }
  .forest-ground{
    position:absolute;left:0;right:0;bottom:0;height:30%;
    background:linear-gradient(180deg, rgba(46,58,26,.5), rgba(16,20,10,.92));
    border-top:1px solid rgba(200,220,150,.08);
  }
  .forest-log{
    position:absolute;border-radius:50%;transform:translate(-50%,-50%);
    background:radial-gradient(circle at 35% 30%, #6b4a2c, #241a0e);opacity:.85;
    border:1px solid rgba(0,0,0,.3);
  }
  .forest-stump{position:absolute;left:3%;bottom:4%;width:15%;height:20%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));}
  .forest-logpile{position:absolute;right:2%;bottom:5%;width:22%;height:20%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));}
  .lumberjack-figure-svg{position:absolute;left:8%;bottom:2%;width:46%;height:92%;filter:drop-shadow(0 4px 5px rgba(0,0,0,.55));}
  .wood-spark{
    position:absolute;right:20%;top:46%;width:9px;height:9px;border-radius:50%;
    background:radial-gradient(circle, #eef4d4 0%, #a8c878 45%, transparent 75%);
    opacity:0;animation:mine-spark-flash 0.9s ease-in-out infinite;
    pointer-events:none;
  }

  /* ---- hit feedback: floating gain popup + impact flash, triggered on real ticks ---- */
  .gain-float{
    position:absolute;top:40%;left:50%;
    display:flex;align-items:center;gap:4px;z-index:5;
    font-family:var(--mono);font-weight:700;font-size:14px;color:#fff3d6;
    text-shadow:0 1px 3px rgba(0,0,0,.85);
    pointer-events:none;
    animation:gain-float-up 1.1s ease-out forwards;
  }
  .gain-float .icon-wrap{width:16px;height:16px;}
  .gain-float.gold{color:var(--lantern);font-size:16px;}
  @keyframes gain-float-up{
    0%{ opacity:0; transform:translate(-50%,8px) scale(.8); }
    15%{ opacity:1; transform:translate(-50%,-2px) scale(1.08); }
    78%{ opacity:1; transform:translate(-50%,-32px) scale(1); }
    100%{ opacity:0; transform:translate(-50%,-44px) scale(.94); }
  }
  .mine-scene.impact, .forest-scene.impact{ animation:scene-impact-flash .4s ease-out; }
  @keyframes scene-impact-flash{
    0%{ filter:brightness(1.7) saturate(1.2); }
    100%{ filter:brightness(1) saturate(1); }
  }

  /* upgrade button sitting directly on each open "Ярус" strata card */
  .tier-upg-btn{
    position:absolute;left:6px;bottom:6px;z-index:6;
    align-items:center;justify-content:center;gap:3px;
    font-family:var(--mono);font-size:10px;font-weight:700;
    padding:5px 9px;border-radius:7px;border:1px solid #2a7a1f;
    background:linear-gradient(180deg,#3fd94a,#1f9e2c);color:#0a2a0d;
    box-shadow:0 2px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.35);
    cursor:pointer;
  }
  .tier-upg-btn:disabled{
    background:linear-gradient(180deg,#6b7268,#454d44);border-color:#2c332a;
    color:#aab4a4;opacity:.75;cursor:default;
  }
  .tier-upg-btn:active:not(:disabled){transform:translateY(1px);}
  .tier-upg-cost{
    position:absolute;left:6px;bottom:30px;z-index:6;max-width:70%;
    font-family:var(--mono);font-size:8.5px;font-weight:700;line-height:1.3;
    color:#eafce0;text-shadow:0 1px 2px #000,0 0 4px #000;
  }
  /* "how much this mineral yields per strike right now" — sits to the
     right of the tier's own progress bar, top-right corner of the card */
  .tier-yield-badge{
    position:absolute;right:6px;top:6px;z-index:6;
    font-family:var(--mono);font-size:9px;font-weight:700;
    padding:3px 6px;border-radius:6px;white-space:nowrap;
    background:rgba(8,16,10,.72);border:1px solid rgba(140,241,122,.4);
    color:#c8f7c0;text-shadow:0 1px 2px #000;
  }

  .kuznya-job-row{padding-bottom:10px;margin-bottom:10px;border-bottom:1px dashed var(--stroke);}
  .kuznya-job-row:last-child{padding-bottom:0;margin-bottom:0;border-bottom:none;}
  .smelter-total-time{
    font-size:12px;font-weight:700;color:var(--lantern);margin:0 0 12px;
    padding-bottom:10px;border-bottom:1px solid var(--stroke);
  }

  .mine-hud{
    background:linear-gradient(155deg, rgba(60,48,32,.6), rgba(18,14,9,.75));
    backdrop-filter:blur(6px);border:1px solid rgba(232,200,120,.2);border-radius:12px;
    padding:8px 10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  }
  .mine-hud .pickaxe-badge{margin-bottom:2px;}

  .pickaxe-badge{
    font-family:var(--mono);font-size:12px;color:var(--text-muted);
    margin-bottom:4px;
  }
  .pickaxe-badge b{color:var(--lantern);}
  .bonus-panel{
    text-align:left;font-family:var(--mono);font-size:11px;color:var(--text-muted);
    background:var(--bg-panel-2);border:1px solid var(--stroke);border-radius:8px;
    padding:8px 10px;margin:8px 0 0;line-height:1.5;
  }
  .bonus-panel .row b{color:var(--gem);}
  .bonus-panel .row{display:block;}
  .last-find{
    min-height:46px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    font-family:var(--mono);font-size:15px;color:var(--text);
    margin:6px 0 14px;
  }
  .find-main{display:flex;align-items:center;gap:8px;}
  .bonus-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
  .bonus-tag{
    font-size:11px;color:var(--gem);background:rgba(85,194,181,.14);
    border:1px solid rgba(85,194,181,.35);padding:3px 10px;border-radius:999px;
  }
  .icon-wrap{
    width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex:none;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
  }
  .icon-wrap .icon-svg{width:100%;height:100%;}
  .last-find .icon-wrap{width:30px;height:30px;}
  .progress-track{
    position:relative;height:6px;border-radius:3px;overflow:hidden;
    background:#151009;border:1px solid var(--stroke);
    margin:12px auto 0;max-width:220px;
  }
  .progress-fill{
    position:absolute;inset:0 auto 0 0;height:100%;width:0%;
    background:var(--gem);transition:width .1s linear;
  }
  .wood-shaft ~ .mine-stage .progress-fill{background:var(--wood);}
  .hint{font-size:11px;color:var(--text-muted);margin-top:10px;}

  .section-title{
    font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
    color:var(--text-muted);margin:20px 0 8px;
  }

  .inv-grid{display:flex;flex-direction:column;gap:6px;}
  .inv-row{
    display:flex;align-items:center;gap:10px;
    background:var(--bg-panel);border:1px solid var(--stroke);border-radius:10px;
    padding:10px 12px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 4px rgba(0,0,0,.3);
  }
  .inv-row.locked{opacity:.35;}
  .inv-row .name{flex:1;font-size:14px;}
  .inv-row .cat{font-size:10px;color:var(--text-muted);text-transform:uppercase;margin-left:6px;}
  .inv-row .count{font-family:var(--mono);font-size:14px;min-width:44px;text-align:right;}
  .inv-row .price{font-family:var(--mono);font-size:11px;color:var(--text-muted);min-width:56px;text-align:right;}
  .sell-btn{
    font-family:var(--mono);font-size:11px;padding:6px 10px;border-radius:7px;
    border:1px solid var(--stroke);background:var(--bg-panel-2);color:var(--success);
    cursor:pointer;
  }
  .sell-btn:disabled{color:var(--text-muted);opacity:.4;cursor:default;}
  .qty-input{
    width:52px;font-family:var(--mono);font-size:12px;padding:5px 6px;border-radius:6px;
    border:1px solid var(--stroke);background:var(--bg-panel-2);color:var(--text);text-align:center;
  }
  .qty-input:disabled{opacity:.4;}
  .inv-row button[data-smelt]{
    font-family:var(--mono);font-size:11px;padding:6px 10px;border-radius:7px;
    border:1px solid var(--lantern-dim);background:var(--bg-panel-2);color:var(--lantern);cursor:pointer;
  }
  .inv-row button[data-smelt]:disabled{opacity:.35;cursor:default;color:var(--text-muted);border-color:var(--stroke);}

  .pick-grid{display:flex;flex-direction:column;gap:8px;}
  .pick-card{
    background:var(--bg-panel);border:1px solid var(--stroke);border-radius:12px;
    padding:12px 14px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.35);
  }
  .pick-card.equipped{border-color:var(--lantern);box-shadow:0 0 0 1px var(--lantern) inset, inset 0 1px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.35);}
  .pick-top{display:flex;align-items:center;gap:12px;}
  .pick-icon{
    width:38px;height:38px;border-radius:9px;flex:none;
    display:flex;align-items:center;justify-content:center;font-size:18px;
    background:var(--bg-panel-2);border:1px solid var(--stroke);
  }
  .pick-icon .icon-wrap{width:32px;height:32px;}
  .pick-info{flex:1;min-width:0;}
  .pick-info .n{font-size:14px;font-weight:600;}
  .pick-info .s{font-size:11px;color:var(--text-muted);font-family:var(--mono);}
  .pick-action{
    font-family:var(--mono);font-size:11px;padding:8px 12px;border-radius:8px;
    border:1px solid var(--stroke);background:var(--bg-panel-2);color:var(--text);cursor:pointer;
    flex:none;white-space:nowrap;
  }
  .pick-action.buy{color:var(--lantern);border-color:var(--lantern-dim);}
  .pick-action.equip{color:var(--gem);}
  .pick-action:disabled{opacity:.35;cursor:default;color:var(--text-muted);border-color:var(--stroke);}
  .pick-action.current{color:var(--lantern);}
  .pick-upgrade{
    margin-top:8px;padding-top:8px;border-top:1px dashed var(--stroke);
    display:flex;align-items:center;justify-content:space-between;gap:8px;
  }
  .pick-upgrade .lvl{font-family:var(--mono);font-size:11px;color:var(--text-muted);}
  .pick-upgrade .lvl b{color:var(--gem);}
  .pick-upgrade button{
    font-family:var(--mono);font-size:11px;padding:6px 10px;border-radius:7px;
    border:1px solid var(--lantern-dim);background:var(--bg-panel-2);color:var(--lantern);cursor:pointer;
  }
  .pick-upgrade button:disabled{opacity:.35;cursor:default;color:var(--text-muted);border-color:var(--stroke);}

  .hero-equip-summary{
    font-family:var(--mono);font-size:11px;color:var(--gem);
    background:var(--bg-panel);border:1px solid var(--stroke);border-radius:10px;
    padding:8px 12px;margin-bottom:10px;
  }
  .hero-equip-grid{display:flex;flex-direction:column;gap:8px;}
  .hero-slot{
    background:var(--bg-panel);border:1px solid var(--stroke);border-radius:12px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.35);
    overflow:hidden;
  }
  .hero-slot > summary{
    display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none;
  }
  .hero-slot > summary::-webkit-details-marker{display:none;}
  .hero-slot[open] > summary{border-bottom:1px solid var(--stroke);}
  .hero-slot-icon{
    width:38px;height:38px;border-radius:9px;flex:none;
    display:flex;align-items:center;justify-content:center;font-size:18px;
    background:var(--bg-panel-2);border:1px solid var(--stroke);
  }
  .hero-slot-info{flex:1;min-width:0;display:flex;flex-direction:column;}
  .hero-slot-info b{font-size:14px;font-weight:600;}
  .hero-slot-info small{font-size:11px;color:var(--text-muted);font-family:var(--mono);}
  .hero-slot-options{display:flex;flex-direction:column;gap:6px;padding:10px 14px 12px;}
  .hero-slot-option{
    display:flex;align-items:center;gap:8px;font-size:12px;
    padding:6px 0;border-bottom:1px dashed var(--stroke);
  }
  .hero-slot-option:last-child{border-bottom:none;}
  .hero-slot-option.is-equipped .hero-slot-option-name{color:var(--lantern);}
  .hero-slot-option.is-unaffordable{opacity:.8;}
  .hero-slot-option.is-level-locked{opacity:.55;}
  .hero-slot-option.is-rare-tier{background:linear-gradient(90deg, rgba(170,99,255,.1), transparent 70%);border-radius:6px;}
  .hero-slot-option-icon{flex:none;}
  .hero-slot-option-icon .equipment-icon{width:34px;height:34px;border-radius:8px;}
  .hero-slot-option-icon.rare-ore-tier-icon{
    width:34px;height:34px;display:flex;align-items:center;justify-content:center;
    font-size:19px;background:var(--bg-panel-2);border:1px solid var(--stroke);border-radius:8px;
  }
  .hero-slot-option-name{flex:1;min-width:0;}
  .hero-slot-option-cost{font-family:var(--mono);font-size:10px;color:var(--text-muted);white-space:nowrap;}
  .hero-slot-action{
    font-family:var(--mono);font-size:11px;padding:6px 10px;border-radius:7px;
    border:1px solid var(--lantern-dim);background:var(--bg-panel-2);color:var(--lantern);cursor:pointer;
    flex:none;white-space:nowrap;
  }
  .hero-slot-action:disabled{opacity:.35;cursor:default;color:var(--text-muted);border-color:var(--stroke);}
  .hero-slot-readonly{display:flex;align-items:center;gap:12px;padding:12px 14px;}
  .taming-skill .player-skill-info>i>em{background:linear-gradient(90deg,#8a5a2e,#e0a95c);box-shadow:0 0 7px #d19a52;}
  .rare-ore-skill .player-skill-info>i>em{background:linear-gradient(90deg,#2e6a8a,#6cc3e0);box-shadow:0 0 7px #52b0d1;}
  .rare-ore-skill{cursor:pointer;}
  .rare-wood-skill .player-skill-info>i>em{background:linear-gradient(90deg,#3f7a2e,#8fd15c);box-shadow:0 0 7px #6ec14a;}
  .rare-wood-skill{cursor:pointer;}
  .melee-skill .player-skill-info>i>em{background:linear-gradient(90deg,#8a2e2e,#e05c5c);box-shadow:0 0 7px #c94b4b;}
  .sword-skill .player-skill-info>i>em{background:linear-gradient(90deg,#5a6a7a,#a8bece);box-shadow:0 0 7px #8ea5b8;}
  .bow-skill .player-skill-info>i>em{background:linear-gradient(90deg,#7a5a2e,#ceab6c);box-shadow:0 0 7px #c19a52;}
  .shield-skill .player-skill-info>i>em{background:linear-gradient(90deg,#4a5a6a,#9ab0c4);box-shadow:0 0 7px #7f9bb2;}
  .combat-axe-skill .player-skill-info>i>em{background:linear-gradient(90deg,#6a3a2e,#c4785c);box-shadow:0 0 7px #ac6248;}
  .tactics-skill .player-skill-info>i>em{background:linear-gradient(90deg,#5a3a7a,#b08cd1);box-shadow:0 0 7px #9a71bd;}
  .smithing-skill .player-skill-info>i>em{background:linear-gradient(90deg,#8a4a1e,#f0a03c);box-shadow:0 0 7px #e08a2e;}
  /* trees are decorative background scenery by default (pointer-events:none
     on the whole layer) — opt just this kind back in so they're tappable */
  .map-tree{pointer-events:auto!important;cursor:pointer;}
  .map-tree.felled{display:none;}
  .rare-ore-info-list{display:flex;flex-direction:column;gap:6px;margin:10px 0;text-align:left;max-height:50vh;overflow:auto;}
  .rare-ore-info-row{
    display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;
    background:var(--bg-panel-2);border:1px solid var(--stroke);font-family:var(--mono);font-size:11px;
  }
  .rare-ore-info-row.locked{opacity:.5;}
  .rare-ore-info-row .icon{font-size:15px;flex:none;}
  .rare-ore-info-row .name{flex:1;color:var(--text);}
  .rare-ore-info-row .req{color:var(--text-muted);white-space:nowrap;}
  .rare-ore-info-row.unlocked .req{color:var(--gem);}
  .cave-dig-panel{
    position:absolute;z-index:5;left:50%;bottom:16px;transform:translateX(-50%);
    width:min(94%,410px);display:flex;flex-direction:column;align-items:center;gap:8px;
  }
  .cave-dig-buttons{display:flex;gap:8px;width:100%;}
  #caveDigBtn, #caveBagBtn{
    flex:1;font-family:var(--mono);font-weight:700;padding:12px 14px;border-radius:10px;
    cursor:pointer;box-shadow:0 5px 12px rgba(0,0,0,.5);
  }
  #caveDigBtn{border:1px solid var(--lantern-dim);background:var(--lantern);color:#231a0d;}
  #caveDigBtn:disabled{opacity:.5;cursor:default;}
  #caveBagBtn{border:1px solid #a4773e;background:rgba(15,27,31,.9);color:#ffe0a0;}
  .cave-dig-status{
    width:100%;padding:8px 12px;border-radius:10px;background:rgba(15,27,31,.9);
    border:1px solid #a4773e;color:#ffe0a0;text-align:center;box-shadow:0 5px 12px rgba(0,0,0,.5);
  }
  .cave-dig-status small{font-family:var(--mono);font-size:11px;}
  .cave-dig-status .progress-track{margin-top:6px;}
  .cave-dig-skill-row{margin-top:10px;padding-top:8px;border-top:1px dashed #a4773e;text-align:left;}
  .cave-dig-skill-row small{color:#d8c5a0;}
  .cave-dig-skill-row .progress-track{margin:4px 0 0;}
  .cave-dig-skill-row .progress-fill{background:linear-gradient(90deg,#2e6a8a,#6cc3e0);}
  #caveDigStopBtn{
    width:100%;margin-top:8px;font-family:var(--mono);font-weight:700;font-size:11px;
    padding:8px;border-radius:8px;border:1px solid #a4773e;background:rgba(15,27,31,.9);
    color:#ffe0a0;cursor:pointer;
  }
  /* tree chop menu: a compact panel anchored to the bottom of the map, not
     a full-screen dimming modal — the map stays visible/interactive behind it */
  .tree-chop-panel{
    position:absolute;z-index:30;left:50%;bottom:16px;transform:translateX(-50%);
    width:min(94%,380px);
  }
  .tree-chop-panel.hidden{display:none;}
  body.world-map-mode .tree-chop-panel{
    position:fixed!important;left:50%!important;
    bottom:calc(78px + env(safe-area-inset-bottom))!important;
  }
  .tree-chop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
  .tree-chop-head b{font:700 12px var(--serif,var(--sans));color:#ffe0a0;}
  .tree-chop-head button{
    width:22px;height:22px;padding:0;border-radius:50%;border:1px solid #a4773e;
    background:rgba(15,27,31,.9);color:#ffe0a0;font-size:14px;line-height:1;cursor:pointer;
  }
  #treeChopStartBtn{
    width:100%;margin-top:10px;font-family:var(--mono);font-weight:700;padding:10px;border-radius:8px;
    border:1px solid var(--lantern-dim);background:var(--lantern);color:#231a0d;cursor:pointer;
  }
  /* the "Сумка" modal needs to render above the cave overlay (z-index:80)
     when opened from inside the mine, not just from the outer world map */
  #worldBagModal{z-index:90!important;}
  .hero-bag-row{display:flex;align-items:center;gap:6px;font:700 9px var(--sans);color:#ffe2a0;padding:2px 0;}
  .hero-bag-row .icon{font-size:12px;flex:none;}
  .hero-bag-row .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .hero-bag-row .count{font-family:var(--mono);color:#fff1bd;}
  /* the stallion was purely decorative (pointer-events:none) — make it a
     real tap target for the taming menu, and give it a hide state for the
     30s window after it's been tamed and before the next one appears */
  .world-white-stallion{pointer-events:auto!important;cursor:pointer;}
  .world-white-stallion.hidden{display:none!important;}
  /* tamed companions trail the hero forever — no longer a tap target, and
     their nameplate (built for the fixed wild spawn point) no longer applies */
  .world-white-stallion.tamed{pointer-events:none!important;cursor:default;}
  .world-white-stallion.tamed>span{display:none;}
  .hero-tools-link{
    align-self:flex-start;font-family:var(--mono);font-size:11px;padding:8px 12px;border-radius:8px;
    border:1px solid var(--stroke);background:var(--bg-panel-2);color:var(--text);cursor:pointer;margin-top:4px;
  }

  .gem-slot{
    margin-top:8px;padding-top:8px;border-top:1px dashed var(--stroke);
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  }
  .gem-slot.empty .gem-hint{font-family:var(--mono);font-size:11px;color:var(--text-muted);flex:1;min-width:0;}
  .gem-select{
    font-family:var(--mono);font-size:11px;padding:6px 8px;border-radius:7px;
    border:1px solid var(--stroke);background:var(--bg-panel-2);color:var(--text);max-width:100%;
  }
  .gem-socket-btn{
    font-family:var(--mono);font-size:11px;padding:6px 10px;border-radius:7px;
    border:1px solid var(--gem);background:var(--bg-panel-2);color:var(--gem);cursor:pointer;flex:none;
  }
  .gem-slot.filled .gem-icon{flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;}
  .gem-slot.filled .gem-icon .icon-wrap{width:26px;height:26px;}
  .gem-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
  .gem-name{font-family:var(--mono);font-size:11px;font-weight:700;color:#e0c8ff;}
  .gem-bonus{font-size:10px;color:var(--gem);}
  .gem-cost{font-size:10px;color:var(--text-muted);}
  .gem-upg-btn{
    font-family:var(--mono);font-size:11px;padding:6px 10px;border-radius:7px;
    border:1px solid var(--lantern-dim);background:var(--bg-panel-2);color:var(--lantern);cursor:pointer;flex:none;
  }
  .gem-upg-btn:disabled{opacity:.35;cursor:default;color:var(--text-muted);border-color:var(--stroke);}

  .char-grid{display:flex;flex-direction:column;gap:8px;}
  .char-card{
    background:var(--bg-panel);border:1px solid var(--stroke);border-radius:12px;
    padding:12px 14px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.35);
  }
  .char-card.locked{opacity:.45;}
  .char-card.master{border-color:var(--lantern-dim);}
  .char-top{display:flex;align-items:center;gap:10px;}
  .char-emoji{
    flex:none;width:58px;height:58px;line-height:1;position:relative;
    border-radius:50%;overflow:hidden;
    background:
      radial-gradient(circle at 32% 26%, rgba(255,255,255,.28), rgba(255,255,255,0) 45%),
      linear-gradient(155deg, rgba(90,70,50,.9), rgba(30,22,14,.9));
    box-shadow:0 0 0 2px rgba(232,200,120,.4), 0 3px 8px rgba(0,0,0,.45), inset 0 1px 2px rgba(255,255,255,.15);
  }
  .char-emoji svg{width:100%;height:100%;display:block;overflow:visible;}
  .char-card.master .char-emoji{box-shadow:0 0 0 2px rgba(232,200,120,.7), 0 0 10px rgba(214,144,60,.4), 0 2px 6px rgba(0,0,0,.45), inset 0 1px 2px rgba(255,255,255,.15);}
  .char-info{flex:1;min-width:0;}
  .char-info .n{font-size:14px;font-weight:600;}
  .char-info .s{font-size:11px;color:var(--text-muted);font-family:var(--mono);display:flex;align-items:center;gap:4px;}
  .char-info .s .icon-wrap{width:14px;height:14px;}
  .char-action{
    font-family:var(--mono);font-size:11px;padding:8px 12px;border-radius:8px;
    border:1px solid var(--lantern-dim);background:var(--bg-panel-2);color:var(--lantern);cursor:pointer;
    flex:none;white-space:nowrap;
  }
  .char-action:disabled{opacity:.35;cursor:default;color:var(--text-muted);border-color:var(--stroke);}
  .char-progress{margin-top:10px;}
  .char-progress .row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--text-muted);margin-bottom:5px;}
  .char-progress .row b{color:var(--gem);}
  .char-track{position:relative;height:14px;border-radius:7px;overflow:hidden;background:#151009;border:1px solid var(--stroke);}
  .char-fill{position:absolute;inset:0 auto 0 0;height:100%;width:0%;background:linear-gradient(90deg,var(--lantern-dim),var(--lantern));}
  .char-track-label{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:9px;font-weight:700;color:#1c1409;
    text-shadow:0 0 3px rgba(255,255,255,.35);letter-spacing:.02em;
  }

  #view-castle{ --parchment:#e8d7ad; --parchment-edge:#c9a869; --wood:#5c3c22; --wood-dark:#3a2414; }

  .back-link{
    display:inline-block;margin:10px 0 0;font-family:var(--mono);font-size:12px;
    background:none;border:1px solid var(--stroke);color:var(--text-muted);
    padding:6px 12px;border-radius:8px;cursor:pointer;
  }
  .castle-banner{
    position:relative;text-align:center;margin:12px 0 10px;padding:12px 30px;
    background:linear-gradient(135deg, rgba(107,68,37,.9), rgba(35,22,12,.9));
    backdrop-filter:blur(4px);
    border-radius:16px;
    box-shadow:0 6px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(232,200,120,.3);
  }
  .castle-banner-text{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:800;letter-spacing:.03em;
    font-size:18px;background:linear-gradient(90deg,#fff3d6,#e8c878);-webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:0 2px 8px rgba(214,144,60,.4);
  }

  .castle-card, .city-card{
    background:linear-gradient(155deg, rgba(60,48,32,.75), rgba(18,14,9,.85));
    backdrop-filter:blur(8px);
    border:1px solid rgba(232,200,120,.22);
    box-shadow:0 10px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
    border-radius:18px;
    padding:20px 18px;text-align:center;color:#f0e6cf;
  }
  .castle-emoji{font-size:44px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));position:relative;display:inline-block;}
  .castle-emoji.alert::after{
    content:"!";position:absolute;top:-4px;right:-8px;width:20px;height:20px;border-radius:50%;
    background:#e0392b;color:#fff;font-family:var(--mono);font-weight:700;font-size:13px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 2px #2a1808,0 0 8px rgba(224,57,43,.8);
    animation:alert-pulse 1.1s ease-in-out infinite;
  }
  .castle-level{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:800;font-size:23px;margin:8px 0 2px;
    background:linear-gradient(90deg,#f0d9ab,var(--lantern));-webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .castle-sub{font-size:12px;color:#c9b89a;margin-bottom:14px;}
  .castle-note{font-size:12px;color:#7fd88a;margin-top:10px;font-weight:600;}
  .castle-cost{font-family:var(--mono);font-size:11px;color:#c9b89a;margin:8px 0;}
  #castleUpBtn{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:700;font-size:14px;padding:11px 22px;border-radius:12px;
    border:none;background:linear-gradient(135deg,#f0c878,var(--lantern) 70%);color:#2a1a05;cursor:pointer;margin-top:8px;
    box-shadow:0 4px 12px rgba(214,144,60,.4), inset 0 1px 0 rgba(255,255,255,.35);
  }
  #castleUpBtn:disabled{background:rgba(120,110,90,.4);color:#8a8272;box-shadow:none;}

  .city-card{ padding:16px; margin-bottom:10px; text-align:left;border-radius:16px; }
  .city-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
  .city-emoji{font-size:27px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));}
  .city-info .n{font-size:14px;font-weight:700;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#f0e6cf;}
  .city-info .s{font-size:11px;color:#c9b89a;font-family:var(--mono);}
  .city-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .city-actions button{
    flex:1;min-width:130px;
    font-family:var(--mono);font-size:12px;padding:10px 10px;border-radius:11px;
    border:1px solid rgba(232,200,120,.25);background:rgba(255,255,255,.06);color:#f0e6cf;cursor:pointer;
    backdrop-filter:blur(4px);
  }
  .city-actions button.primary{
    color:#2a1a05;background:linear-gradient(135deg,#f0c878,var(--lantern) 70%);border:none;font-weight:700;
    box-shadow:0 3px 10px rgba(214,144,60,.35);
  }
  .city-actions button:disabled{opacity:.4;cursor:default;box-shadow:none;}

  .castle-map{
    height:760px;
    margin:10px 0 6px;padding:0;border-radius:16px;
    position:relative;overflow:hidden;perspective:420px;
    border:3px solid var(--wood-dark);
    background:
      radial-gradient(circle 40px at 15% 9%, #fff9e0 0%, #ffe89a 55%, transparent 100%),
      radial-gradient(ellipse 140% 65% at 50% 0%, #7ecbea 0%, #4a9fd8 50%, transparent 78%),
      linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 26%, rgba(255,255,255,.4) 33%, rgba(255,255,255,.08) 40%, transparent 48%),
      linear-gradient(180deg, #bfe3f5 0%, #cdeaf0 18%, #e2f0d8 28%, #cfe8a0 34%, #82c25c 55%, #4f9040 100%);
    box-shadow:0 0 0 6px var(--wood) inset;
  }
  /* full-bleed: the castle scene background should reach the true edges of
     the screen, not just the app's centered 520px column (the app itself
     stays centered — only this scene's backdrop breaks out of it) */
  #castleMap.castle-map{
    width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
  }
  /* the castle is already painted directly into the scene's background
     image, so the "zamok" hotspot's own separate castle picture on top of
     it was a redundant second castle graphic — drop it, keep just the tap
     target and its label */
  #castleMap.castle-map .map-tile[data-building="zamok"]::before{
    background-image:none!important;
  }
  .sky-cloud{
    position:absolute;border-radius:50%;pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(255,255,255,.18), transparent 70%);
    filter:blur(2px);
    animation:cloud-drift 60s linear infinite;
  }
  @keyframes cloud-drift{from{transform:translateX(-8%);}to{transform:translateX(8%);}}
  .castle-map::before{ content:none; }
  .castle-map::after{ content:none; }
  .torch-glow{
    position:absolute;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);
    background:radial-gradient(circle, #ffdf9a 0%, #e8a955 45%, transparent 75%);
    box-shadow:0 0 10px 4px rgba(232,169,85,.7);
    animation:torch-flicker 1.6s ease-in-out infinite;
    z-index:1;pointer-events:none;
  }
  .torch-glow.t2{animation-delay:.5s;}
  @keyframes torch-flicker{0%,100%{opacity:.8;transform:scale(1);}45%{opacity:1;transform:scale(1.15);}60%{opacity:.7;transform:scale(.9);}}
  .scene-mountains{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
  .scene-river{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
  .scene-bridges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
  .river-shimmer{animation:river-flow 3s linear infinite;}
  @keyframes river-flow{to{stroke-dashoffset:-16;}}
  .scene-forest{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
  .scene-horizon{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
  .sparkle{
    position:absolute;width:4px;height:4px;border-radius:50%;z-index:2;
    background:radial-gradient(circle, #fff9d6 0%, #e8c878 55%, transparent 80%);
    box-shadow:0 0 6px 2px rgba(232,200,120,.6);
    animation:sparkle-float 5s ease-in-out infinite;
    opacity:0;
  }
  @keyframes sparkle-float{
    0%{ opacity:0; transform:translateY(0) scale(.6); }
    15%{ opacity:.9; }
    70%{ opacity:.6; }
    100%{ opacity:0; transform:translateY(-60px) scale(1.1); }
  }
  .mist-cloud{
    z-index:0;background:radial-gradient(ellipse at center, rgba(255,255,255,.75), rgba(255,255,255,0) 70%);
    filter:blur(3px);opacity:.8;
  }
  .iso-platform{
    position:absolute;z-index:0;
    border-radius:46% 54% 58% 42% / 50% 46% 54% 50%;
  }
  .iso-platform::after{
    content:"";position:absolute;inset:0;border-radius:inherit;
    background:radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.3), transparent 55%);
    mix-blend-mode:soft-light;
  }
  .plat-castle{
    background:
      radial-gradient(5px 3px at 20% 70%, #b8a878, transparent),
      radial-gradient(4px 3px at 70% 60%, #d9cba0, transparent),
      radial-gradient(6px 4px at 45% 80%, #a8946a, transparent),
      linear-gradient(160deg,#eee3c4,#cdbd8e);
    box-shadow:
      0 14px 0 -2px #b8a06e,
      0 26px 0 -4px #927b4e,
      0 38px 0 -6px #6b573a,
      0 48px 40px rgba(0,0,0,.45);
  }
  .plat-market{
    background:
      radial-gradient(5px 3px at 15% 25%, #7fc850, transparent),
      radial-gradient(4px 3px at 65% 70%, #8fd860, transparent),
      radial-gradient(6px 4px at 40% 45%, #5c9e3a, transparent),
      linear-gradient(160deg,#a6e070,#69ac42);
    box-shadow:
      0 14px 0 -2px #5c9438,
      0 26px 0 -4px #46702c,
      0 38px 0 -6px #33501f,
      0 48px 40px rgba(0,0,0,.45);
  }
  .plat-mountain{
    background:
      radial-gradient(6px 4px at 25% 30%, #f0f5f8, transparent),
      radial-gradient(5px 3px at 70% 60%, #b8c4cc, transparent),
      radial-gradient(7px 5px at 45% 75%, #9fadb6, transparent),
      linear-gradient(160deg,#d8e0e6,#8fa0ac);
    box-shadow:
      0 14px 0 -2px #7e8f9a,
      0 26px 0 -4px #5c6c78,
      0 38px 0 -6px #3f4a54,
      0 48px 40px rgba(0,0,0,.45);
  }
  .plat-forest{
    background:
      radial-gradient(5px 3px at 20% 30%, #9edc6c, transparent),
      radial-gradient(4px 3px at 70% 65%, #6bb048, transparent),
      radial-gradient(6px 4px at 45% 50%, #3f7a2e, transparent),
      linear-gradient(160deg,#82c85a,#488a34);
    box-shadow:
      0 14px 0 -2px #3f7228,
      0 26px 0 -4px #2f5c1f,
      0 38px 0 -6px #203f16,
      0 48px 40px rgba(0,0,0,.45);
  }
  .plat-harbor{
    background:
      radial-gradient(5px 3px at 25% 30%, #f5e8b8, transparent),
      radial-gradient(4px 3px at 65% 60%, #e0c888, transparent),
      radial-gradient(6px 4px at 45% 78%, #c9a860, transparent),
      linear-gradient(160deg,#eddb9a,#c9a860);
    box-shadow:
      0 14px 0 -2px #b8925a,
      0 26px 0 -4px #8a6a3a,
      0 38px 0 -6px #654c29,
      0 48px 40px rgba(0,0,0,.45);
  }
  .iso-bridges{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
  .castle-roads{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
  .scene-vignette{
    position:absolute;inset:0;pointer-events:none;z-index:5;
    box-shadow:inset 0 0 90px 30px rgba(0,0,0,.55);
    background:radial-gradient(ellipse 80% 90% at 50% 45%, transparent 60%, rgba(10,8,14,.35) 100%);
  }
  .map-tile{
    display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;
    background:none;border:none;cursor:pointer;position:absolute;z-index:1;
    color:#f0e6cf;padding:0;transform:translate(-50%,-50%) scale(var(--ds,1));
    transition:transform .18s ease;
  }
  .map-tile .mt-ic{
    width:58px;height:58px;display:flex;align-items:center;justify-content:center;position:relative;
    transition:transform .18s ease;
  }
  .map-tile .mt-ic svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 5px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(150,110,220,.15));}
  .map-tile .mt-ic svg rect, .map-tile .mt-ic svg polygon, .map-tile .mt-ic svg path{
    stroke:#160d05;stroke-width:.7;stroke-linejoin:round;paint-order:stroke fill;
  }
  .map-tile.tile-big .mt-ic{
    width:96px;height:96px;
  }
  .map-tile.tile-big .mt-ic svg{filter:drop-shadow(0 5px 6px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(214,144,60,.35));}
  .map-tile .mt-label{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:600;
    font-size:9.5px;text-align:center;color:#f5ecd8;letter-spacing:.01em;
    text-shadow:0 1px 3px rgba(0,0,0,.9);
    background:rgba(20,14,6,.5);border-radius:6px;padding:1px 6px;
  }
  .map-tile:active{transform:translate(-50%,-50%) scale(calc(var(--ds,1) * 0.94));}
  .map-tile.soon .mt-ic svg{filter:drop-shadow(0 3px 4px rgba(0,0,0,.5)) grayscale(.6) brightness(.75);}
  .map-tile.soon .mt-label{opacity:.6;}
  .map-tile.soon::after{
    content:"🔒";position:absolute;top:-2px;right:6px;font-size:10px;
  }
  .castle-flag{transform-origin:20px -2px;animation:flag-wave 2.2s ease-in-out infinite;}
  @keyframes flag-wave{0%,100%{transform:scaleX(1) skewY(0deg);}50%{transform:scaleX(.82) skewY(-8deg);}}
  .forge-smoke{animation:smoke-rise 2.6s ease-in infinite;}
  .forge-smoke.s2{animation-delay:.9s;}
  @keyframes smoke-rise{0%{transform:translateY(0) scale(.6);opacity:.65;}100%{transform:translateY(-9px) scale(1.3);opacity:0;}}
  .saw-blade{transform-origin:29px 22px;animation:saw-spin 1.2s linear infinite;}
  @keyframes saw-spin{to{transform:rotate(360deg);}}
  .forge-glow{animation:forge-pulse 1.3s ease-in-out infinite;transform-origin:20px 31px;}
  @keyframes forge-pulse{0%,100%{opacity:.55;transform:scale(.9);}50%{opacity:1;transform:scale(1.15);}}
  .sawdust{animation:sawdust-puff 1.6s ease-out infinite;}
  .sawdust.sd2{animation-delay:.7s;}
  @keyframes sawdust-puff{0%{opacity:.8;transform:translate(0,0) scale(.6);}100%{opacity:0;transform:translate(4px,-3px) scale(1.2);}}
  .sign-swing{animation:sign-sway 2.8s ease-in-out infinite;}
  @keyframes sign-sway{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(6deg);}}
  .window-flicker{animation:window-flick 2.2s ease-in-out infinite;}
  .window-flicker.wf2{animation-delay:1.1s;}
  @keyframes window-flick{0%,100%{opacity:1;}45%{opacity:.6;}55%{opacity:1;}80%{opacity:.75;}}
  .coin-glint{animation:coin-shine 2s ease-in-out infinite;}
  .coin-glint.cg2{animation-delay:1s;}
  @keyframes coin-shine{0%,100%{opacity:0;transform:scale(.5);}50%{opacity:.9;transform:scale(1.2);}}
  .section-title.flash{
    animation: flash-title 0.9s ease;
    border-radius:6px;
  }
  #view-castle .section-title{
    text-align:center;font-family:Georgia,'Times New Roman',serif;font-size:12px;
    letter-spacing:.08em;color:#f0d9ab;background:linear-gradient(180deg,#6b4425,#4a2e18);
    border:1px solid #2a1808;border-radius:6px;padding:5px 10px;margin:18px 0 8px;
    text-transform:none;
  }
  @keyframes flash-title{
    0%{ background:rgba(214,144,60,.35); }
    100%{ background:transparent; }
  }

  nav.tabs{
    position:fixed;left:0;right:0;bottom:0;
    max-width:520px;margin:0 auto;
    display:flex;flex-wrap:wrap;background:var(--bg-panel);border-top:1px solid var(--stroke);
    padding-bottom:env(safe-area-inset-bottom);
  }
  nav.tabs button{
    flex:1 1 19%;min-width:18%;background:none;border:none;color:var(--text-muted);
    font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.02em;
    padding:9px 2px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;
  }
  nav.tabs button .ic{font-size:16px;}
  nav.tabs button.active{color:var(--lantern);}
  nav.tabs button, .nav-item-wrap{position:relative;}
  .nav-alert-badge{
    position:absolute;top:2px;right:16%;width:14px;height:14px;border-radius:50%;
    background:#e0392b;color:#fff;font-family:var(--mono);font-weight:700;font-size:10px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 2px var(--bg-panel), 0 0 6px rgba(224,57,43,.8);
    animation:alert-pulse 1.1s ease-in-out infinite;
  }
  .map-tile.alert .mt-ic::after{
    content:"!";position:absolute;top:-4px;right:-2px;width:15px;height:15px;border-radius:50%;
    background:#e0392b;color:#fff;font-family:var(--mono);font-weight:700;font-size:11px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 2px #2a1808, 0 0 6px rgba(224,57,43,.8);
    animation:alert-pulse 1.1s ease-in-out infinite;
  }
  .map-tile .mt-ic{position:relative;}
  @keyframes alert-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}

  .nav-item-wrap{position:relative;flex:1 1 19%;min-width:18%;display:flex;}
  .nav-item-wrap > button{flex:1;width:100%;}
  .nav-dropdown{
    position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(6px);
    display:none;flex-direction:column;gap:4px;
    background:var(--bg-panel-2);border:1px solid var(--stroke);border-radius:10px;
    padding:6px;margin-bottom:6px;box-shadow:0 6px 18px rgba(0,0,0,.5);z-index:60;
    min-width:130px;
  }
  .nav-dropdown.open{display:flex;}
  .nav-dropdown button{
    font-family:var(--mono);font-size:12px;padding:9px 10px;border-radius:7px;
    border:none;background:none;color:var(--text);text-align:left;cursor:pointer;white-space:nowrap;
  }
  .nav-dropdown button:hover, .nav-dropdown button.active{color:var(--lantern);background:var(--bg-panel);}

  .toast{
    position:fixed;top:10px;left:50%;transform:translateX(-50%);
    background:var(--lantern);color:#231a0d;font-family:var(--mono);font-size:12px;
    padding:8px 14px;border-radius:8px;font-weight:700;
    opacity:0;pointer-events:none;transition:opacity .25s ease, top .25s ease;
    z-index:50;white-space:nowrap;
  }
  .toast.show{opacity:1;top:16px;}

  .offline-modal{
    position:fixed;inset:0;z-index:400;
    background:rgba(10,7,4,.72);
    display:flex;align-items:center;justify-content:center;padding:20px;
  }
  .offline-modal.hidden{display:none;}
  .offline-modal-card{
    background:var(--bg-panel);border:2px solid var(--stroke);border-radius:14px;
    padding:22px 20px;max-width:320px;width:100%;text-align:center;
    box-shadow:0 10px 30px #000;
  }
  .offline-modal-card h3{margin:0 0 10px;color:var(--lantern);font-size:16px;}
  .offline-modal-card p{margin:0 0 16px;color:var(--text);font-size:14px;line-height:1.5;}
  .offline-modal-card button{
    font-family:var(--mono);font-weight:700;padding:10px 20px;border-radius:8px;
    border:none;background:var(--lantern);color:#231a0d;cursor:pointer;
    margin:4px 3px 0;
  }
  .offline-modal-card button:disabled{opacity:.5;cursor:default;}
  #stallionModalClose{background:var(--bg-panel-2);color:var(--text);border:1px solid var(--stroke);}
  #stallionModal .progress-track{margin:10px 0;}
  .stallion-skill-row{margin-top:6px;text-align:left;}
  .stallion-skill-row small{font-family:var(--mono);font-size:11px;color:var(--text-muted);}
  .stallion-skill-row .progress-track{margin:4px 0 0;}
  .stallion-skill-row .progress-fill{background:linear-gradient(90deg,#8a5a2e,#e0a95c);}

  .reset-btn{
    display:block;margin:22px auto 4px;font-family:var(--mono);font-size:11px;
    color:var(--danger);background:none;border:1px solid var(--danger);border-radius:8px;
    padding:8px 14px;cursor:pointer;
  }

  ::-webkit-scrollbar{width:0;height:0;}

  .sync-overlay{
    position:fixed;inset:0;z-index:9999;
    background:var(--bg);color:var(--text);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;text-align:center;padding:24px;font-family:var(--sans);
  }
  .sync-overlay.hidden{display:none;}
  .sync-overlay .spinner{
    width:34px;height:34px;border-radius:50%;
    border:3px solid var(--stroke);border-top-color:var(--lantern);
    animation:sync-spin 0.8s linear infinite;
  }
  @keyframes sync-spin{to{transform:rotate(360deg);}}
  .sync-overlay a.botlink{color:var(--lantern);font-weight:600;}
  .sync-overlay p{margin:0;color:var(--text-muted);font-size:14px;line-height:1.5;}

  /* Medieval visual system — carved oak, forged iron and warm torchlight. */
  :root{
    --bg:#100b07;
    --bg-panel:#2b1a0f;
    --bg-panel-2:#3a2414;
    --stroke:#79502a;
    --lantern:#f0b84f;
    --lantern-dim:#9d6224;
    --gem:#67d8d0;
    --wood:#93bd58;
    --text:#fff1cf;
    --text-muted:#c5aa7d;
    --danger:#d76646;
    --success:#8dca62;
    --display:Georgia,"Times New Roman",serif;
  }
  body{
    background:
      radial-gradient(circle at 50% -10%,rgba(255,176,67,.18),transparent 32%),
      linear-gradient(rgba(12,8,5,.88),rgba(12,8,5,.96)),
      repeating-linear-gradient(90deg,#2d1b0f 0 34px,#24150c 34px 36px,#321e11 36px 70px);
  }
  .app{
    background:
      linear-gradient(90deg,rgba(0,0,0,.35),transparent 5%,transparent 95%,rgba(0,0,0,.35)),
      radial-gradient(ellipse at 50% 22%,rgba(91,56,27,.28),transparent 60%);
  }
  header.top{
    position:sticky;top:0;z-index:40;padding:10px 13px;
    border-bottom:3px solid #5b351c;
    background:linear-gradient(180deg,#4b2d18,#25150c);
    box-shadow:0 3px 0 #120a05,0 8px 22px rgba(0,0,0,.55),inset 0 1px rgba(255,224,157,.16);
  }
  header.top::before,header.top::after{
    content:"◆";color:#b77b30;font-size:10px;text-shadow:0 1px #000;
  }
  header.top h1{
    flex:1;margin-left:8px;font-family:var(--display);font-size:20px;font-weight:800;
    text-transform:none;letter-spacing:.02em;color:#ffe2a0;text-shadow:0 2px 0 #5b2c0d,0 3px 7px #000;
  }
  header.top h1 small{display:block;font:600 9px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#bfa274;text-shadow:none;}
  header.top .money{
    padding:7px 11px;border:1px solid #bc7f30;border-radius:8px;
    background:linear-gradient(180deg,#342014,#1c1009);color:#fff1c9;
    box-shadow:inset 0 0 0 2px #120b07,inset 0 1px rgba(255,255,255,.12),0 2px 5px #100904;
  }
  header.top .money::before{content:"●";color:#ffd153;text-shadow:0 0 6px #ee941f;}
  .skill-shaft,.mine-stage,.inv-row,.pick-card,.char-card{
    position:relative;border:2px solid #6d4728;border-radius:10px;
    background:
      linear-gradient(145deg,rgba(255,224,165,.05),transparent 30%),
      linear-gradient(180deg,#352215,#21130b);
    box-shadow:inset 0 0 0 2px #140c07,inset 0 1px rgba(255,255,255,.09),0 5px 12px rgba(0,0,0,.45);
  }
  .skill-shaft::before,.mine-stage::before,.pick-card::before,.char-card::before{
    content:"";position:absolute;inset:5px;pointer-events:none;border:1px solid rgba(202,145,70,.16);border-radius:5px;
  }
  .skill-shaft{padding:14px 16px;}
  .skill-shaft .label,.section-title{font-family:var(--display);font-weight:700;color:#e7c98d;}
  .skill-shaft .value{font-family:var(--display);font-weight:800;color:#72e2d8;text-shadow:0 0 8px rgba(69,206,195,.3);}
  .shaft-track,.char-track{
    height:17px;border:2px solid #100a06;border-radius:5px;background:#0d0805;
    box-shadow:inset 0 2px 5px #000,0 0 0 1px #694523;
  }
  .shaft-fill,.char-fill{
    background:linear-gradient(180deg,#ffd771 0%,#dc922e 48%,#945115 100%);
    box-shadow:inset 0 1px rgba(255,255,255,.5),0 0 9px rgba(240,184,79,.45);
  }
  .mine-stage{padding:18px 14px;}
  .mine-scene,.forest-scene{border:3px solid #16100b;border-radius:9px;box-shadow:0 0 0 2px #76502c,inset 0 0 40px #000;}
  .mine-hud,.bonus-panel{
    border:1px solid #71502f;background:linear-gradient(180deg,rgba(67,43,25,.94),rgba(31,19,11,.95));
    box-shadow:inset 0 1px rgba(255,255,255,.08);border-radius:7px;
  }
  .mode-toggle button,.pick-action,.char-action,.sell-btn,.pick-upgrade button,.inv-row button[data-smelt],.back-link,.city-actions button{
    border:2px solid #75502d;border-radius:7px;background:linear-gradient(180deg,#51351f,#28170d);
    box-shadow:inset 0 1px rgba(255,228,174,.14),0 3px 0 #130b06;color:#f3d9a5;
    font-family:var(--display);font-weight:700;
  }
  .mode-toggle button.active,.pick-action.buy,.char-action,.city-actions button.primary,#castleUpBtn{
    color:#291706;border-color:#d49b3c;background:linear-gradient(180deg,#ffe27c,#d48b25 58%,#a85b16);
    box-shadow:inset 0 1px rgba(255,255,255,.55),0 3px 0 #633313,0 0 12px rgba(228,153,48,.25);
  }
  button:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px rgba(255,255,255,.12),0 1px 0 #130b06;}
  .section-title{
    position:relative;text-align:center;font-size:13px;letter-spacing:.05em;text-transform:none;margin:22px 0 11px;
  }
  .section-title::before,.section-title::after{content:" — ";color:#80542a;}
  .inv-row .name,.pick-info .n,.char-info .n{font-family:var(--display);font-weight:700;color:#ffe7b6;}
  .pick-icon{border:2px solid #6f4a29;background:radial-gradient(circle at 35% 25%,#614329,#28180e);box-shadow:inset 0 0 0 2px #160d08;}
  .castle-banner{
    border:2px solid #8d602f;border-radius:8px;background:linear-gradient(180deg,#5d3a1d,#2a180c);
    box-shadow:inset 0 0 0 2px #1a0e07,0 5px 12px #090503;
  }
  .castle-banner::before,.castle-banner::after{content:"⚜";position:absolute;top:50%;transform:translateY(-50%);color:#d7a846;}
  .castle-banner::before{left:14px}.castle-banner::after{right:14px}
  .castle-banner-text{font-family:var(--display);color:#ffe0a0;background:none;font-size:20px;text-shadow:0 2px #542a0f;}
  .castle-card,.city-card{border:2px solid #78512d;border-radius:9px;background:linear-gradient(150deg,#3d2818,#20130b);box-shadow:inset 0 0 0 2px #130b07,0 7px 18px #080402;}
  .castle-level{font-family:var(--display);color:#f5c961;background:none;}
  .castle-map{border:4px solid #4b2b16;border-radius:8px;box-shadow:0 0 0 2px #9a6932,inset 0 0 0 4px #2a170c,0 8px 18px #070402;}
  nav.tabs{
    z-index:50;padding:5px 6px calc(5px + env(safe-area-inset-bottom));gap:3px;
    border-top:2px solid #8b5b2b;background:linear-gradient(180deg,#49301d,#21130b);
    box-shadow:0 -4px 18px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.1);
  }
  nav.tabs button{
    border:1px solid transparent;border-radius:7px;font-family:var(--display);font-size:10px;text-transform:none;
    color:#c9ad7f;padding:7px 2px 6px;text-shadow:0 1px #000;
  }
  nav.tabs button .ic{font-size:20px;filter:drop-shadow(0 2px 1px #000);}
  nav.tabs button.active{color:#ffe09a;border-color:#8f622f;background:linear-gradient(180deg,#5b3b21,#342013);box-shadow:inset 0 0 0 1px #21130b;}
  .nav-dropdown{border:2px solid #80572f;border-radius:8px;background:#2e1c10;box-shadow:inset 0 0 0 2px #140b06,0 7px 20px #000;}
  .toast{border:2px solid #ffe094;background:linear-gradient(180deg,#f8c558,#c9791e);box-shadow:0 4px 0 #542a0e,0 8px 20px #000;}
  @media (max-width:380px){header.top h1{font-size:17px}.castle-map{height:680px}.app{padding-bottom:74px}}

  /* Sky fill behind the resource bar/skill shaft/tier header, so the mine
     picture's sky reads as continuous all the way up to the top menu bar
     instead of stopping at a dark gap. */
  #view-shakhta{background:transparent;}

  /* Layered mine overview inspired by the supplied reference. */
  .mine-depths{
    position:relative;margin:12px 0 14px;border:3px solid #4a2b17;border-radius:10px;overflow:hidden;
    background:#17100b;box-shadow:0 0 0 2px #9a6731,0 8px 20px #080402,inset 0 0 35px #000;
  }
  .mine-depths::before{
    content:"";position:absolute;z-index:6;top:0;bottom:0;right:17%;width:30px;
    border-left:4px solid #301b0e;border-right:4px solid #301b0e;
    background:repeating-linear-gradient(180deg,#75502f 0 5px,#25160d 5px 18px);
    box-shadow:0 0 0 2px #a17138,inset 0 0 8px #000,0 0 10px #000;
  }
  .mine-depths::after{
    content:"";position:absolute;z-index:7;right:calc(17% + 5px);top:20px;width:18px;height:28px;
    border:2px solid #9b6c35;border-radius:3px;background:linear-gradient(90deg,#25170d,#684421,#25170d);
    box-shadow:0 58px 0 #3c2513,0 116px 0 #3c2513,0 174px 0 #3c2513;
  }
  .depth-head{
    position:relative;z-index:8;display:flex;align-items:center;justify-content:space-between;padding:9px 12px;
    background:linear-gradient(180deg,#63401f,#321d0f);border-bottom:3px solid #1a0f08;color:#ffe0a0;
    font-family:var(--display);font-weight:800;text-shadow:0 2px #4b250d;
  }
  .depth-head span{font:700 10px var(--sans);padding:4px 8px;border:1px solid #bd8437;border-radius:10px;background:#23130a;color:#f2ca74;text-shadow:none;}

  /* moved above the mine picture (was an opaque box overlaid on it) —
     now plain text in normal flow, no frame, so the artwork stays fully visible */
  #view-shakhta .depth-head{
    position:static;inset:auto;top:auto;
    margin:0 2px 8px;padding:0 2px;
    border:none;border-radius:0;background:none;box-shadow:none;
  }
  #view-shakhta .depth-head span{background:none;border:none;padding:2px 0;}
  #view-shakhta .depth-head{flex-wrap:wrap;row-gap:6px;}
  .depth-head-upg-btn{
    display:inline-flex;align-items:center;gap:4px;margin-left:8px;
    font-family:var(--mono);font-size:11px;font-weight:700;
    padding:6px 10px;border-radius:8px;border:1px solid #2a7a1f;
    background:linear-gradient(180deg,#3fd94a,#1f9e2c);color:#0a2a0d;
    box-shadow:0 2px 4px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35);
    cursor:pointer;animation:alert-pulse 1.4s ease-in-out infinite;
  }
  .depth-head-upg-btn:active{transform:translateY(1px);}

  @keyframes jump-highlight-flash{
    0%,100%{ box-shadow:0 0 0 0 rgba(63,217,74,0); }
    15%,55%{ box-shadow:0 0 0 3px rgba(63,217,74,.95), 0 0 24px 6px rgba(63,217,74,.65); }
  }
  .strata-floor.jump-highlight{ animation:jump-highlight-flash 1.2s ease-out; }

  /* transparent nav buttons — overrides the opaque wood-panel button fill
     added elsewhere; higher specificity so it wins regardless of source order */
  body nav.tabs button{
    background:transparent!important;
  }
  body nav.tabs button.active{
    background:rgba(255,255,255,.08)!important;
  }
  .depth-floor{
    position:relative;height:92px;padding:8px 24% 8px 11px;border-bottom:7px solid #402512;
    background:
      radial-gradient(circle at var(--vein-x,12%) 54%,var(--ore-glow,#4fb9d0) 0 4px,transparent 5px),
      radial-gradient(circle at calc(var(--vein-x,12%) + 5%) 36%,var(--ore-glow,#4fb9d0) 0 3px,transparent 4px),
      radial-gradient(ellipse at 20% 40%,color-mix(in srgb,var(--ore-glow,#4fb9d0) 45%,transparent),transparent 24%),
      linear-gradient(105deg,#17100b,#302015 42%,#17100b);
    box-shadow:inset 0 10px 16px rgba(0,0,0,.5),inset 0 -8px 10px rgba(0,0,0,.7);
  }
  .depth-floor:last-child{border-bottom:0;}
  .depth-floor::before{
    content:"";position:absolute;left:0;right:0;bottom:12px;height:5px;background:#25150c;
    border-top:2px solid #76502e;border-bottom:2px solid #0c0704;box-shadow:0 6px 0 #6d4928;
  }
  .depth-beams{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 8%,#53351f 8% 10%,transparent 10% 42%,#53351f 42% 44%,transparent 44%);opacity:.85;}
  .depth-info{position:relative;z-index:3;display:flex;align-items:center;gap:7px;}
  .depth-level{font:800 12px var(--display);color:#f6d494;text-shadow:0 2px #000;}
  .depth-rate{font:700 9px var(--mono);color:#91d974;background:rgba(9,18,7,.75);padding:3px 5px;border-radius:4px;border:1px solid #41642e;}
  .depth-worker{position:absolute;z-index:4;left:34%;bottom:17px;font-size:29px;filter:drop-shadow(0 3px 2px #000);animation:depth-work .9s ease-in-out infinite;transform-origin:bottom center;}
  .depth-worker.second{left:51%;animation-delay:.4s;transform:scale(.88);}
  .depth-cart{position:absolute;z-index:4;right:25%;bottom:14px;font-size:28px;filter:drop-shadow(0 3px 2px #000);}
  .depth-gems{position:absolute;z-index:2;left:7%;bottom:12px;font-size:27px;filter:drop-shadow(0 0 8px var(--ore-glow,#4fb9d0));}
  .depth-lamp{position:absolute;z-index:3;left:45%;top:18px;width:6px;height:6px;border-radius:50%;background:#fff0ad;box-shadow:0 0 7px 3px #e79b39;}
  @keyframes depth-work{0%,100%{transform:rotate(-5deg)}45%{transform:rotate(9deg)}}
  .active-heading{display:flex;align-items:center;gap:8px;margin:14px 2px 8px;color:#eac985;font:800 13px var(--display);}
  .active-heading::before,.active-heading::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#82562d);}
  .active-heading::after{background:linear-gradient(90deg,#82562d,transparent);}
  @media (prefers-reduced-motion:reduce){.depth-worker{animation:none}}