:root{
  --ink:#f5eedc;
  --muted:#b5a792;
  --panel:rgba(24,26,22,.92);
  --panel2:rgba(35,34,28,.95);
  --wood:#76563c;
  --wood2:#9a7350;
  --gold:#e8ca76;
  --green:#82bd68;
  --green2:#4f874b;
  --red:#d56765;
  --blue:#6fa9c9;
  --line:rgba(236,220,168,.20);
  --shadow:rgba(0,0,0,.48);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#0e1110;overflow:hidden;font-family:"Trebuchet MS",Verdana,Arial,sans-serif;color:var(--ink)}
button{font:800 13px "Trebuchet MS",Verdana,Arial,sans-serif;color:var(--ink);cursor:pointer}
#app{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;background:#111}
canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
#world{width:100%;height:100%}
#game{position:absolute;inset:0;display:none;background:#6aa55f}

/* MENU */
#menu{position:absolute;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0;overflow:hidden;background:#0d120f}
.menuBackdrop{position:absolute;inset:-8%;background:linear-gradient(180deg,rgba(10,18,14,.06),rgba(8,12,10,.55) 72%,rgba(6,8,7,.78)),url("assets/lone_genesis_2026_showcase.png") center/cover;filter:saturate(1.14) contrast(1.08);transform:scale(1.08);animation:menuKen 32s ease-in-out infinite alternate}
@keyframes menuKen{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.16) translate(-2%,1.4%)}}
.menuGlow{position:absolute;inset:-30%;background:radial-gradient(circle at 50% 38%,rgba(232,202,118,.16),transparent 32%),radial-gradient(circle at 78% 70%,rgba(90,156,87,.14),transparent 26%),radial-gradient(circle at 18% 80%,rgba(80,140,200,.08),transparent 22%);pointer-events:none}
.menuMotes{position:absolute;inset:0;pointer-events:none;z-index:1;background:
  radial-gradient(2px 2px at 12% 28%,rgba(255,236,180,.55),transparent 60%),
  radial-gradient(2px 2px at 78% 22%,rgba(232,202,118,.4),transparent 60%),
  radial-gradient(1px 1px at 64% 58%,rgba(255,244,210,.7),transparent 60%),
  radial-gradient(2px 2px at 28% 72%,rgba(180,220,140,.35),transparent 60%),
  radial-gradient(1px 1px at 88% 76%,rgba(232,202,118,.45),transparent 60%);
  animation:menuMote 9s linear infinite}
@keyframes menuMote{0%{opacity:.35;transform:translateY(0)}50%{opacity:.85}100%{opacity:.35;transform:translateY(-18px)}}
.menuCorner{position:absolute;z-index:3;width:28px;height:28px;border:2px solid #ead27d;pointer-events:none;opacity:.72}
.menuCorner.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.menuCorner.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.menuCorner.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.menuCorner.br{bottom:14px;right:14px;border-left:0;border-top:0}
.menuStage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:min(420px,92%);max-height:100%;padding:12px 0 8px;gap:8px}
.menuBrand{position:relative;z-index:2;display:flex;justify-content:center;line-height:0;flex:0 0 auto}
.brandLogo{
  display:block;height:auto;max-width:100%;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
  image-rendering:auto;
  background:transparent!important;
}
.brandLogo--menu{
  width:clamp(196px,18vw,320px);
  height:auto;
  max-height:min(240px,28vh);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.78)) drop-shadow(0 0 22px rgba(80,140,200,.2));
}
.brandLogo--boot{
  width:clamp(88px,10vw,128px);
  margin:0 auto 8px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(232,202,118,.18));
}
.brandLogo--pause{
  width:108px;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.55));
}
.brandLogo--atelier{
  width:68px;
  margin:0 auto 4px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
.brandLogo--inv{width:50px}
.brandLogo--build{width:40px}
.brandLogo--modal{
  width:56px;flex:0 0 56px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
.menuBanner,.tag{position:relative;z-index:2;margin:0 auto;padding:0 10px;width:100%;max-width:min(460px,96%);box-sizing:border-box;text-align:center}
.menuBanner span,#menu .menuBanner > span{
  display:block;box-sizing:border-box;width:100%;max-width:100%;
  padding:6px 12px;
  font-size:clamp(6.5px,1.55vw,9px);letter-spacing:clamp(.35px,.28vw,1.8px);color:#f4e6c2;
  line-height:1.35;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(180deg,rgba(28,22,16,.72),rgba(16,14,12,.78));
  border:1px solid rgba(232,202,118,.38);
  box-shadow:0 0 0 1px #1e1612, inset 0 1px 0 rgba(255,244,214,.12);
}
.tag:not(.menuBanner){
  display:inline-block;padding:6px 16px;
  font-size:9px;letter-spacing:2.4px;color:#f4e6c2;
  background:linear-gradient(180deg,rgba(28,22,16,.72),rgba(16,14,12,.78));
  border:1px solid rgba(232,202,118,.38);
  box-shadow:0 0 0 1px #1e1612, inset 0 1px 0 rgba(255,244,214,.12);
}
.menuCard{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px;width:100%;max-width:320px;padding:14px 16px 12px}
#menuMsg{position:relative;z-index:2;min-height:16px;margin:0;font-size:11px;color:#e6c97a;text-shadow:0 1px 0 #120e0b}
.menuFeatures{position:relative;z-index:2;display:flex;gap:8px;flex-wrap:nowrap;justify-content:center;font-size:8px;letter-spacing:1px;color:#eadab7;opacity:.88;margin:4px 16px 8px;width:auto;max-width:100%}
.menuFeatures span{padding:4px 8px;border:1px solid rgba(232,202,118,.28);background:rgba(18,16,12,.55);box-shadow:inset 0 1px 0 rgba(255,244,214,.08);white-space:nowrap}
.menuFeatures span{padding:4px 9px;border:1px solid rgba(232,202,118,.28);background:rgba(18,16,12,.55);box-shadow:inset 0 1px 0 rgba(255,244,214,.08)}
.menuFeatures span::before{content:"◆";font-size:7px;margin-right:5px;color:#d7bc72}

/* HUD */
#hud{position:absolute;left:13px;right:13px;top:12px;z-index:20;display:flex;justify-content:flex-start;align-items:flex-start;pointer-events:none}
.hudLeft{display:flex;flex-direction:column;gap:6px}
.statusPanel{width:295px;padding:8px 10px 7px;background:linear-gradient(180deg,rgba(24,28,23,.93),rgba(21,24,20,.90));border:2px solid rgba(236,217,159,.22);box-shadow:0 10px 35px #0007}
.statusRow{display:grid;grid-template-columns:22px 56px 1fr;gap:8px;align-items:center;margin:3px 0}
.statusIcon{width:20px;height:20px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);font-size:11px;font-weight:900;box-shadow:inset 0 0 0 2px rgba(0,0,0,.18)}
.statusIcon.heart{background:#5a2b2c;color:#ffc1a8}.statusIcon.stamina{background:#405c2d;color:#e6d78f}
.statusIcon.pack{background:#4a3a28;color:#ead27d}
.statusIcon.pack svg{width:13px;height:13px}
.statusMeta span{display:block;color:#a89d8a;font-size:7px;letter-spacing:1.4px}.statusMeta strong{display:block;font-size:10px;line-height:10px}
.bar{height:8px;background:#1c211d;border:1px solid #0e120f;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#a34e50,#df7a67);transition:width .1s linear}.statusRow:nth-child(2) .bar i{background:linear-gradient(90deg,#557c3e,#9ac667)}
.statusRow:nth-child(5) .bar i{background:linear-gradient(90deg,#8a6a38,#e2c46f)}
.statusRow:nth-child(5) .bar i.hot{background:linear-gradient(90deg,#a86a28,#e8a048)}
.statusRow:nth-child(5) .bar i.over{background:linear-gradient(90deg,#8a3030,#e07060)}
.statusMini{display:flex;gap:16px;margin-top:5px;padding-top:5px;border-top:1px solid var(--line);font-size:9px;color:#dbd0bb}.statusMini b{font-size:9px;color:#fff}

/* GPS / minimap styles live in the RPG dial block near the end of this file. */

/* HOTBAR */
#hotbar{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);display:flex;gap:3px;padding:6px;background:linear-gradient(180deg,rgba(27,29,24,.95),rgba(18,20,18,.96));border:2px solid rgba(235,214,161,.26);box-shadow:0 12px 35px #0009;z-index:95}
.slot{width:47px;height:47px;background:linear-gradient(180deg,#55443a,#392e29);border:2px solid #211c1a;box-shadow:inset 0 0 0 2px #7b6048;position:relative;display:grid;place-items:center;cursor:pointer}.slot.sel{border-color:#f2d77d;box-shadow:0 0 0 2px #fff1a0, inset 0 0 0 2px #8d6e48;background:linear-gradient(180deg,#69563f,#473a2e)}
.slot img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}.slot .n{position:absolute;left:3px;top:2px;font-size:7px;color:#f0e5cd;opacity:.72}.slot .c{position:absolute;right:3px;bottom:2px;font-size:9px;font-weight:900;text-shadow:1px 1px #000}.slotIcon{font-size:18px}.toolGlyph{font-size:16px;color:#f0d681}.dur{position:absolute;left:4px;right:4px;bottom:3px;height:3px;background:#171a18}.dur i{display:block;height:100%;background:#86bd67}

#controlHint{position:absolute;left:13px;bottom:10px;z-index:18;font-size:8px;letter-spacing:.45px;color:#ded4bf;opacity:.65;text-shadow:2px 2px #1e1917;pointer-events:none}
#contextHint{position:absolute;left:50%;bottom:79px;transform:translateX(-50%);min-width:170px;padding:6px 12px;background:rgba(27,25,22,.91);border:2px solid rgba(219,189,115,.58);text-align:center;font-size:9px;letter-spacing:.4px;text-shadow:1px 1px #000;z-index:20;pointer-events:none;box-shadow:0 8px 25px #0007}
#toast{position:absolute;left:50%;top:78px;transform:translateX(-50%);background:rgba(24,27,23,.95);border:2px solid rgba(219,189,115,.55);padding:8px 13px;opacity:0;pointer-events:none;z-index:90;transition:opacity .14s;box-shadow:0 10px 30px #0007;font-size:10px}.show{opacity:1!important}

/* BUILD */
#buildUI{position:absolute;right:12px;top:50px;width:318px;max-height:535px;overflow:auto;background:linear-gradient(180deg,rgba(33,34,29,.97),rgba(24,26,23,.97));border:2px solid rgba(236,217,159,.23);box-shadow:0 18px 50px #000a;padding:11px;z-index:40}.buildHead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}.buildGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.buildCard{background:rgba(75,59,48,.73);border:2px solid #332823;padding:7px;cursor:pointer;min-height:93px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}.buildCard.sel{outline:2px solid #ead27d;box-shadow:0 0 0 2px #5b472d}.buildCard img{display:block;width:58px;height:47px;object-fit:contain;image-rendering:pixelated;margin-bottom:4px}.buildCard b{font-size:10px}.cost,.muted{font-size:8px;color:#eadab7;opacity:.78;margin-top:3px}.tiny{font-size:9px;padding:7px 9px;width:auto;border:2px solid #312720;background:#725438}.buildStatus{margin-top:9px;padding:7px;background:#22231e;border:1px solid #604d3b;font-size:8px}.tileIcon{width:54px;height:46px;margin-bottom:3px;position:relative}.tileIcon.path{background:#8f704e;border:2px solid #5d4338}.tileIcon.bridge{margin-top:13px;height:20px;background:#96704f;border:2px solid #5a3d32}

/* OVERLAYS / MODALS */
.overlay{position:absolute;inset:0;z-index:80;background:rgba(10,14,12,.55);display:flex;pointer-events:none;align-items:flex-start;justify-content:center;padding-top:42px;backdrop-filter:blur(2px)}.inventoryWindow{pointer-events:auto;width:min(790px,92vw);background:linear-gradient(180deg,#2e3029,#22251f);border:3px solid rgba(236,217,159,.25);box-shadow:0 24px 80px #000c;padding:16px;position:relative}.inventoryTop{display:flex;justify-content:space-between;border-bottom:2px solid var(--line);padding-bottom:10px;margin-bottom:12px}.eyebrow{font-size:7px;color:#a89f8d;letter-spacing:2px}.inventoryTop h2{margin:2px 0 0;font-size:22px;letter-spacing:2px}.inventorySub{font-size:9px;color:#9d9688;margin-top:3px}.closeBtn{width:35px!important;height:35px!important;padding:0!important;background:#754c43!important;border:2px solid #2b2020!important;font-size:22px;line-height:28px}.inventoryBody{display:flex;flex-direction:column;gap:10px}.inventoryGrid{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;background:#161a16;border:3px solid #292c26;padding:7px}.invSlot{height:58px;background:linear-gradient(#53463c,#3a312c);border:2px solid #725a46;display:grid;place-items:center;position:relative;cursor:grab}.invSlot.empty{background:#292c28;cursor:default}.invSlot img{width:35px;height:35px;image-rendering:pixelated}.invCount{position:absolute;right:4px;bottom:2px;font-size:11px;font-weight:900;text-shadow:1px 1px #000}.inventoryLegend{display:flex;gap:18px;font-size:8px;color:#aaa28f;justify-content:center}.legendDot{display:inline-block;width:7px;height:7px;margin-right:4px;border:1px solid #111}.toolDot{background:#d0a55c}.itemDot{background:#6eaa68}.selectedDot{background:#e9d178}
#modal{position:absolute;inset:0;z-index:360;display:grid;place-items:center;background:rgba(9,11,10,.56);backdrop-filter:blur(2px)}.modalBox{width:min(600px,88%);background:linear-gradient(180deg,#34332b,#24251f);border:3px solid rgba(235,212,151,.26);box-shadow:0 24px 90px #000d;padding:18px}.modalBrand{display:flex;align-items:center;gap:12px;margin:0 0 12px}.modalBrand h2,.modalBox h2{margin:0 0 12px;font-size:20px;letter-spacing:1px}.modalBrand h2{margin:0;flex:1}.modalRow{display:flex;gap:8px}.modalRow input{flex:1;padding:10px;background:#e9dfc2;border:2px solid #292024;color:#2b2024;font-weight:700}.slotRow{display:flex;justify-content:space-between;align-items:center;background:#4d4037;border:2px solid #302622;padding:8px;margin:6px 0}.slotRow .btn{width:150px;padding:9px}.btn{padding:9px 12px;border:2px solid #2a211e;background:#725438}.slotRow small{color:#c8c0ae}.secondary{background:#4e5750}

/* PAUSE */
#pauseSidebar{position:absolute;right:0;top:0;bottom:0;width:340px;z-index:100;background:linear-gradient(180deg,rgba(31,33,28,.98),rgba(20,23,20,.99));border-left:3px solid rgba(235,211,144,.32);box-shadow:-25px 0 70px #000b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px}.pauseBrand{display:flex;justify-content:center;line-height:0}.pauseRule{width:170px;height:1px;background:linear-gradient(90deg,transparent,rgba(235,210,145,.45),transparent);margin:2px 0 8px}.pauseSidebar button{width:270px;padding:13px;border:2px solid #2b231f;background:linear-gradient(#7e5c43,#5d412f);box-shadow:inset 0 0 0 2px #a77b52}.pauseHint{font-size:8px;color:#918b7e;margin-top:6px}
.hidden{display:none!important}
#app.intro-active #hotbar,#app.intro-active #statusPanel,#app.intro-active #buildUI,#app.intro-active #minimapWrap,#app.intro-active .rpgHint,#app.intro-active #phoneBar{opacity:0!important;pointer-events:none!important}

@media (max-width:900px){.statusPanel{width:255px}.slot{width:41px;height:41px}.slot img{width:28px;height:28px}.brandLogo--menu{width:min(196px,42%)}.brandLogo--pause{width:128px}}
.resourceOnly{font-size:8px;color:#ead27d;letter-spacing:.6px;white-space:nowrap}.buildCard.locked{opacity:.58}.buildCard.locked:hover{opacity:.78}.buildAvail{font-size:7px;margin-top:4px;color:#8fe0a5}.buildCard.locked .buildAvail{color:#e17676}.buildMissing{width:58px;height:47px;display:flex;align-items:center;justify-content:center;border:1px dashed #8b6d5d;color:#bfa88d;font-size:8px;margin-bottom:4px}
.buildTabs{display:flex;gap:6px;margin:8px 0 0}.buildTab{flex:1;padding:7px 6px;font-size:9px;letter-spacing:.7px;border:2px solid #312720;background:#4a3b32;color:#eadab7;cursor:pointer;font-weight:800}.buildTab.on{background:#725438;color:#fff4d2;box-shadow:inset 0 0 0 1px #ead27d}.buildRotHint{font-size:8px;color:#ead27d;margin:7px 0 0;letter-spacing:.4px}.buildRotHint b{color:#fff4d2}.buildCard img.houseThumb{image-rendering:pixelated;background:#1c1814;border:1px solid #3a2e28}

/* ===== PREMIUM HUD / SURVIVAL BARS ===== */
.statusPanel{width:310px;padding:9px 11px 8px;background:linear-gradient(180deg,rgba(29,31,26,.97),rgba(17,20,17,.96));border:2px solid rgba(236,217,159,.30);border-radius:12px;box-shadow:0 12px 38px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06)}
.statusRow{grid-template-columns:23px 58px 1fr;gap:8px;align-items:center;margin:5px 0}
.statusIcon{width:21px;height:21px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 2px 5px rgba(0,0,0,.25)}
.statusIcon.hunger{background:#5f4a29;color:#e6b96b}.statusIcon.thirst{background:#294e61;color:#8ed0ee}
.statusRow .bar{height:9px;border-radius:5px;overflow:hidden;background:#111612;border:1px solid #090c0a;box-shadow:inset 0 1px 2px #0008}
.statusRow .bar i{border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.statusRow:nth-child(2) .bar i{background:linear-gradient(90deg,#4d783a,#a4d26c)}
.statusRow:nth-child(3) .bar i{background:linear-gradient(90deg,#a47735,#e2b85c)}
.statusRow:nth-child(4) .bar i{background:linear-gradient(90deg,#3d7899,#78c3e4)}

/* ===== PREMIUM HOTBAR ===== */
#hotbar{gap:4px;padding:7px 8px 8px;border-radius:14px;background:linear-gradient(180deg,rgba(39,41,34,.98),rgba(16,19,17,.99));border:2px solid rgba(236,217,159,.34);box-shadow:0 16px 42px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.07)}
.slot{width:49px;height:49px;border-radius:8px;background:linear-gradient(145deg,#5c4b3d,#302925);border:2px solid #1c1816;box-shadow:inset 0 0 0 1px rgba(180,145,106,.55),inset 0 2px 0 rgba(255,255,255,.07),0 3px 5px rgba(0,0,0,.35);transition:transform .08s,filter .08s,box-shadow .08s}
.slot:hover{transform:translateY(-2px);filter:brightness(1.08)}
.slot.sel{transform:translateY(-3px);border-color:#f5d978;box-shadow:0 0 0 2px rgba(255,241,160,.92),0 7px 15px rgba(0,0,0,.38),inset 0 0 0 2px #8d6e48;background:linear-gradient(145deg,#705b42,#49392d)}
.slot img{width:34px;height:34px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.45))}.slot .n{left:5px;top:3px;font-size:7px;font-weight:900}.slot .c{right:5px;bottom:3px;font-size:10px}.slot .dur{left:5px;right:5px;bottom:4px;height:3px;border-radius:2px;overflow:hidden}.slot .dur i{border-radius:2px}

/* ===== PREMIUM INVENTORY ===== */
.overlay{background:radial-gradient(circle at 50% 35%,rgba(20,28,22,.38),rgba(5,8,7,.82));backdrop-filter:blur(4px);padding-top:34px}
.inventoryWindow{width:min(820px,93vw);padding:18px;border-radius:16px;background:linear-gradient(145deg,#32352d,#1b1f1b 68%,#171a18);border:2px solid rgba(236,217,159,.34);box-shadow:0 28px 90px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.06)}
.inventoryTop{padding:2px 2px 13px;margin-bottom:14px;border-bottom:1px solid rgba(236,217,159,.18);align-items:center}.eyebrow{font-size:8px;letter-spacing:3px;color:#c1b18f}.inventoryTop h2{font-size:25px;letter-spacing:3px;text-shadow:2px 2px #171512}.inventorySub{font-size:9px;color:#aaa18f}
.closeBtn{border-radius:8px!important;background:linear-gradient(#795047,#51332e)!important;border:2px solid #251a18!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 10px #0006!important}.closeBtn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.inventoryBody{gap:13px}.inventoryGrid{grid-template-columns:repeat(9,1fr);gap:6px;background:linear-gradient(180deg,#111511,#181c18);border:2px solid rgba(236,217,159,.17);border-radius:12px;padding:9px;box-shadow:inset 0 3px 10px #0007}
.invSlot{height:62px;border-radius:7px;background:linear-gradient(145deg,#5a493d,#342b27);border:2px solid #211b19;box-shadow:inset 0 0 0 1px rgba(180,145,106,.48),inset 0 2px 0 rgba(255,255,255,.045),0 2px 4px #0005;transition:transform .08s,filter .08s,box-shadow .08s}
.invSlot:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:inset 0 0 0 1px rgba(236,217,159,.65),0 4px 10px #0007}.invSlot.empty{background:linear-gradient(145deg,#242a25,#1b201c);border-color:#171b18;box-shadow:inset 0 2px 8px #0007}.invSlot img{width:38px;height:38px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.48))}.invCount{right:5px;bottom:3px;font-size:11px;color:#f5ecd7}.inventoryLegend{padding:4px 0 0;font-size:8px;letter-spacing:.5px;color:#b8af9c}.legendDot{border-radius:3px;box-shadow:0 1px 3px #0006}

@media(max-width:900px){.statusPanel{width:280px}.slot{width:42px;height:42px}.slot img{width:29px;height:29px}.inventoryWindow{width:94vw}.invSlot{height:52px}.invSlot img{width:32px;height:32px}}

/* ===== REFINED COMPACT SURVIVAL HUD ===== */
.statusPanel{width:228px;padding:7px 9px 8px;background:linear-gradient(180deg,rgba(29,31,26,.68),rgba(17,20,17,.58));border:1px solid rgba(236,217,159,.20);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.045);backdrop-filter:blur(5px)}
.statusRow{display:grid;grid-template-columns:19px 1fr;gap:7px;align-items:center;margin:4px 0}
.statusIcon{width:18px;height:18px;border-radius:5px;font-size:10px;opacity:.92}
.statusRow .bar{height:8px;border-radius:4px}
.statusMeta{display:none!important}
.statusPanel .bar i{box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}


/* FINAL REFINEMENT — STATUS HUD: bars + icons only, no panel background/frame */
.statusPanel{
  width:auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.statusRow{
  grid-template-columns:19px 1fr !important;
  gap:7px !important;
  margin:4px 0 !important;
}
.statusIcon{
  width:18px !important;
  height:18px !important;
  border:0 !important;
  box-shadow:none !important;
}
.statusRow .bar{
  min-width:150px;
}

/* ===== STATUS HUD: SINGLE HORIZONTAL ROW ===== */
.statusPanel{display:flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important;white-space:nowrap!important}
.statusRow{display:flex!important;flex:0 0 auto!important;grid-template-columns:none!important;align-items:center!important;gap:6px!important;margin:0!important}
.statusRow .bar{width:78px!important;min-width:78px!important;height:8px!important}
.statusIcon{flex:0 0 18px!important}


/* ===== RPG FORGE UI RESKIN — HOTBAR / INVENTORY ===== */
#hotbar{
  gap:5px;
  padding:7px 8px 8px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(31,27,23,.97),rgba(13,15,13,.98));
  border:2px solid rgba(222,188,116,.38);
  box-shadow:0 14px 38px rgba(0,0,0,.60),inset 0 1px 0 rgba(255,239,187,.10),inset 0 -2px 0 rgba(0,0,0,.38);
}
#hotbar::before{content:"";position:absolute;inset:3px;border:1px solid rgba(255,235,175,.10);border-radius:12px;pointer-events:none}
.slot{
  width:50px;height:50px;border-radius:9px;
  background:linear-gradient(145deg,#66503e 0%,#403229 48%,#2b2521 100%);
  border:2px solid #1a1614;
  box-shadow:inset 0 0 0 1px rgba(207,169,112,.48),inset 0 2px 0 rgba(255,255,255,.09),0 3px 7px rgba(0,0,0,.48);
  overflow:hidden;position:relative;
}
.slot::after{content:"";position:absolute;inset:2px;border-radius:6px;border:1px solid rgba(255,225,159,.08);pointer-events:none}
.slot:hover{transform:translateY(-2px);filter:brightness(1.10);box-shadow:inset 0 0 0 1px rgba(235,205,140,.70),0 7px 14px rgba(0,0,0,.42)}
.slot.sel{transform:translateY(-4px);background:linear-gradient(145deg,#806746,#55412f);border-color:#e9cb72;box-shadow:0 0 0 2px rgba(246,221,130,.78),0 9px 18px rgba(0,0,0,.48),inset 0 0 0 2px #9d7b4e}
.slot.sel::before{content:"";position:absolute;left:7px;right:7px;bottom:3px;height:2px;background:#f0d477;box-shadow:0 0 7px rgba(240,212,119,.55);border-radius:2px}
.slot img{width:35px;height:35px;image-rendering:pixelated;filter:drop-shadow(0 2px 1px rgba(0,0,0,.55))}
.slot .n{left:5px;top:4px;font-size:7px;color:#e8dcc1;text-shadow:1px 1px #16110f;z-index:2}
.slot .c{right:5px;bottom:3px;font-size:10px;color:#fff4d8;text-shadow:1px 1px #17110e;z-index:2}
.slot .dur{left:5px;right:5px;bottom:7px;height:3px;border-radius:2px;background:#14120f;z-index:3}
.slot .dur i{border-radius:2px;background:linear-gradient(90deg,#86aa59,#d9cf76)}

.overlay{background:rgba(6,9,7,.68);backdrop-filter:blur(7px);z-index:130}
.inventoryWindow{
  width:min(850px,93vw);padding:18px 19px 16px;border-radius:18px;
  background:linear-gradient(145deg,#38352c 0%,#25271f 42%,#171a17 100%);
  border:2px solid rgba(229,197,125,.42);
  box-shadow:0 30px 90px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,244,203,.09),inset 0 -3px 0 rgba(0,0,0,.24);
}
.inventoryWindow::before{content:"";position:absolute;inset:5px;border:1px solid rgba(255,226,161,.09);border-radius:13px;pointer-events:none}
.inventoryTop{padding:3px 3px 13px;margin-bottom:13px;border-bottom:1px solid rgba(229,197,125,.20)}
.inventoryTop h2{font-size:24px;letter-spacing:3px;color:#ead7a7;text-shadow:2px 2px #171310}
.inventorySub{font-size:9px;color:#aaa18f}
.inventoryGrid{
  grid-template-columns:repeat(9,1fr);gap:6px;padding:10px;border-radius:12px;
  background:linear-gradient(180deg,#111511,#1a1d18);
  border:2px solid rgba(229,197,125,.18);
  box-shadow:inset 0 4px 13px rgba(0,0,0,.62),0 4px 12px rgba(0,0,0,.20);
}
.invSlot{
  height:62px;border-radius:8px;
  background:linear-gradient(145deg,#66503e,#3a302a 55%,#29231f);
  border:2px solid #1d1816;
  box-shadow:inset 0 0 0 1px rgba(206,168,110,.48),inset 0 2px 0 rgba(255,255,255,.07),0 3px 7px rgba(0,0,0,.42);
}
.invSlot::after{content:"";position:absolute;inset:2px;border-radius:5px;border:1px solid rgba(255,225,159,.08);pointer-events:none}
.invSlot:hover{transform:translateY(-2px);filter:brightness(1.10);box-shadow:inset 0 0 0 1px rgba(244,216,145,.78),0 6px 13px rgba(0,0,0,.48)}
.invSlot.empty{background:linear-gradient(145deg,#252a25,#181d19);border-color:#141816;box-shadow:inset 0 3px 10px rgba(0,0,0,.62)}
.invSlot img{width:39px;height:39px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}
.invCount{right:5px;bottom:3px;font-size:11px;color:#fff2d3;text-shadow:1px 1px #15100e}
.inventoryLegend{padding-top:5px;color:#bdb39d}
.closeBtn{border-radius:9px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 5px 12px rgba(0,0,0,.45)!important}

/* ===== PAUSE / ESC — CLICKABLE SIDEBAR ABOVE BLUR ===== */
#modal{z-index:380!important;pointer-events:auto}
#pauseSidebar{z-index:220;pointer-events:auto}
#pauseSidebar.hidden{pointer-events:none}
#pauseSidebar::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(52,48,38,.18),transparent 30%,rgba(0,0,0,.12));}
#pauseSidebar > *:not(.rpgCorner){position:relative;z-index:1}
#pauseSidebar > .rpgCorner{position:absolute}
.pauseSidebar button{cursor:pointer}

/* ===== LONE GENESIS — MASTER RPG ITEM UI RESKIN ===== */
#hotbar{
  gap:6px;
  padding:7px 9px 9px;
  border-radius:11px;
  background:
    linear-gradient(180deg,rgba(38,43,34,.97),rgba(17,20,17,.985));
  border:2px solid rgba(225,196,120,.52);
  box-shadow:
    0 14px 30px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,248,210,.14),
    inset 0 -3px 0 rgba(0,0,0,.24);
  position:absolute;
}
#hotbar::before{
  content:"";position:absolute;inset:3px;border:1px solid rgba(246,221,153,.18);
  border-radius:8px;pointer-events:none;
}
#hotbar::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,202,118,.55),transparent);
  pointer-events:none;
}
.slot{
  width:48px;height:48px;border-radius:6px;
  background:
    linear-gradient(145deg,rgba(91,75,56,.98),rgba(43,35,29,.99));
  border:2px solid #1b1715;
  box-shadow:
    inset 0 0 0 1px rgba(207,169,112,.48),
    inset 0 2px 0 rgba(255,240,196,.08),
    inset 0 -3px 0 rgba(0,0,0,.18),
    0 3px 6px rgba(0,0,0,.42);
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease,border-color .12s ease;
  image-rendering:pixelated;
}
.slot::before{
  content:"";position:absolute;inset:3px;border:1px solid rgba(245,220,166,.10);
  border-radius:3px;pointer-events:none;
}
.slot::after{
  content:"";position:absolute;left:5px;right:5px;top:5px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,246,212,.10),transparent);
  pointer-events:none;
}
.slot:hover{
  transform:translateY(-3px);
  filter:brightness(1.13);
  box-shadow:inset 0 0 0 1px rgba(242,213,143,.72),0 7px 14px rgba(0,0,0,.48);
}
.slot.sel{
  transform:translateY(-5px);
  border-color:#e8c96f;
  background:linear-gradient(145deg,#735e42,#403126);
  box-shadow:
    0 0 0 2px rgba(245,221,132,.85),
    0 8px 17px rgba(0,0,0,.50),
    inset 0 0 0 2px rgba(137,103,62,.95),
    inset 0 2px 0 rgba(255,245,196,.12);
}
.slot.sel::before{border-color:rgba(255,232,155,.25)}
.slot.sel::after{
  left:8px;right:8px;top:auto;bottom:4px;height:2px;
  background:#f0d477;box-shadow:0 0 8px rgba(240,212,119,.58);
}
.slot img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 1px rgba(0,0,0,.62));image-rendering:pixelated}
.slot .n{left:5px;top:4px;font-size:7px;font-weight:900;color:#eadfca;text-shadow:1px 1px #17120f;z-index:3}
.slot .c{right:5px;bottom:4px;font-size:10px;font-weight:900;color:#fff4d8;text-shadow:1px 1px #17120f;z-index:3}
.slot .dur{left:5px;right:5px;bottom:8px;height:3px;border-radius:1px;background:#12110f;z-index:4;overflow:hidden}
.slot .dur i{height:100%;border-radius:1px;background:linear-gradient(90deg,#6e9d4e,#e0d06f);box-shadow:0 0 3px rgba(163,197,92,.22)}

/* Inventory becomes a crafted RPG satchel/workbench rather than a generic window. */
.overlay{padding-top:28px;background:radial-gradient(circle at 50% 38%,rgba(17,25,19,.30),rgba(3,6,5,.86));backdrop-filter:blur(5px)}
.inventoryWindow{
  width:min(840px,92vw);padding:15px 16px 14px;border-radius:10px;
  position:relative;overflow:hidden;
  background:
    linear-gradient(145deg,rgba(51,54,45,.985),rgba(25,29,25,.99) 62%,rgba(18,21,18,.995));
  border:2px solid rgba(225,196,120,.52);
  box-shadow:
    0 28px 90px rgba(0,0,0,.78),
    inset 0 1px 0 rgba(255,247,210,.11),
    inset 0 -5px 0 rgba(0,0,0,.20);
}
.inventoryWindow::before{
  content:"";position:absolute;inset:5px;border:1px solid rgba(245,220,160,.18);border-radius:6px;pointer-events:none;
}
.inventoryWindow::after{
  content:"";position:absolute;left:16px;right:16px;top:49px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(229,198,125,.36),transparent);pointer-events:none;
}
.inventoryTop{
  position:relative;z-index:2;padding:2px 2px 10px;margin-bottom:11px;border-bottom:0;align-items:center;
}
.eyebrow{font-size:7px;letter-spacing:3px;color:#cdbd96;text-transform:uppercase}
.inventoryTop h2{font-size:23px;letter-spacing:3px;color:#f0dfb4;text-shadow:2px 2px #171411;margin:2px 0 0}
.inventorySub{font-size:8px;color:#a9a18e;margin-top:2px}
.closeBtn{width:31px!important;height:31px!important;border-radius:5px!important;background:linear-gradient(#765047,#4b302c)!important;border:2px solid #251a18!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 10px #0007!important}
.closeBtn:hover{filter:brightness(1.14);transform:translateY(-1px)}
.inventoryBody{position:relative;z-index:2;gap:10px}
.inventoryGrid{
  grid-template-columns:repeat(9,1fr);gap:5px;padding:8px;
  background:linear-gradient(180deg,#101410,#171c17);
  border:2px solid rgba(206,173,108,.30);border-radius:7px;
  box-shadow:inset 0 4px 12px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,244,204,.05);
}
.invSlot{
  height:59px;border-radius:5px;position:relative;
  background:linear-gradient(145deg,#5b493c,#302824);
  border:2px solid #1d1816;
  box-shadow:
    inset 0 0 0 1px rgba(204,164,105,.45),
    inset 0 2px 0 rgba(255,239,194,.07),
    inset 0 -3px 0 rgba(0,0,0,.18),
    0 2px 5px rgba(0,0,0,.36);
  transition:transform .1s ease,filter .1s ease,box-shadow .1s ease,border-color .1s ease;
}
.invSlot::before{content:"";position:absolute;inset:3px;border:1px solid rgba(247,221,165,.08);border-radius:3px;pointer-events:none}
.invSlot:hover{
  transform:translateY(-2px);filter:brightness(1.12);
  border-color:#b59662;
  box-shadow:inset 0 0 0 1px rgba(245,214,143,.62),0 5px 11px rgba(0,0,0,.46);
}
.invSlot.empty{background:linear-gradient(145deg,#252b26,#181d19);border-color:#161a17;box-shadow:inset 0 3px 9px rgba(0,0,0,.62)}
.invSlot img{width:38px;height:38px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 1px rgba(0,0,0,.58))}
.invCount{right:5px;bottom:3px;font-size:10px;font-weight:900;color:#fff3d3;text-shadow:1px 1px #16110f;z-index:3}
.inventoryLegend{justify-content:center;gap:24px;padding:2px 0 0;font-size:7px;letter-spacing:1px;color:#aaa18d}
.legendDot{width:7px;height:7px;border-radius:2px;box-shadow:0 1px 3px #0007}

@media(max-width:900px){
  #hotbar{gap:3px;padding:6px}
  .slot{width:42px;height:42px}
  .slot img{width:29px;height:29px}
  .inventoryWindow{width:94vw;padding:13px}
  .invSlot{height:52px}
  .invSlot img{width:32px;height:32px}
}

/* Inventory must not blur the gameplay layer or the interactive hotbar. */
#hotbar{z-index:240 !important}
#inventoryOverlay{z-index:130 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
#inventoryOverlay .inventoryWindow{z-index:131}

/* Clean, unmistakable pixel-RPG status glyphs. */
.statusIcon{
  display:grid !important;
  place-items:center !important;
  background:transparent !important;
  color:#ead7a7 !important;
  width:19px !important;
  height:19px !important;
  border:0 !important;
  box-shadow:none !important;
  opacity:1 !important;
}
.statusIcon svg{
  width:19px;height:19px;display:block;
  fill:currentColor;
  filter:drop-shadow(1px 1px 0 rgba(20,16,13,.75));
  shape-rendering:crispEdges;
}
.statusIcon.heart{color:#e36b69 !important}
.statusIcon.stamina{color:#e2cf70 !important}
.statusIcon.hunger{color:#d9a65a !important}
.statusIcon.thirst{color:#75b9dc !important}
.statusRow .bar{box-shadow:inset 0 1px 2px rgba(0,0,0,.62),0 1px 0 rgba(255,244,205,.05) !important}

/* Inventory keeps the hotbar sharp and interactive. */
#hotbar{z-index:240 !important;pointer-events:auto !important}
#inventoryOverlay{z-index:130 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
#inventoryOverlay .inventoryWindow{z-index:131}

/* Status icons: crisp, readable pixel-RPG glyphs with no tile/background. */
.statusIcon{
  display:grid !important;place-items:center !important;
  width:19px !important;height:19px !important;
  background:transparent !important;border:0 !important;box-shadow:none !important;
  opacity:1 !important;color:#ead7a7 !important;
}
.statusIcon svg{width:19px;height:19px;display:block;fill:currentColor;shape-rendering:crispEdges;filter:drop-shadow(1px 1px 0 rgba(16,13,10,.82))}
.statusIcon.heart{color:#e66b6a !important}
.statusIcon.stamina{color:#e4cf70 !important}
.statusIcon.hunger{color:#d9a75d !important}
.statusIcon.thirst{color:#73b9df !important}

/* ===== LONE GENESIS — PIXEL RPG HOTBAR & INVENTORY ===== */
#hotbar.rpgForge{
  --bar-rx:0deg;--bar-ry:0deg;
  position:absolute;left:50%;bottom:12px;z-index:240 !important;
  display:flex !important;align-items:flex-end;justify-content:center;
  gap:0 !important;padding:0 !important;width:auto;
  background:none !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;pointer-events:none !important;
  transform:translateX(-50%);
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.55));
}
#hotbar.rpgForge::before,
#hotbar.rpgForge::after{display:none !important;content:none !important}
.rpgForgeAura{
  position:absolute;left:24px;right:24px;bottom:-8px;height:18px;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 40%,rgba(232,202,118,.32),transparent 72%);
  filter:blur(5px);
}
.rpgForgeFrame{
  --px:.5;--py:.5;--bar-rx:0deg;--bar-ry:0deg;
  position:relative;z-index:1;pointer-events:auto;
  display:flex;align-items:stretch;
  transform:rotateX(var(--bar-rx)) rotateY(var(--bar-ry));
  transform-origin:50% 88%;
  transform-style:preserve-3d;
  transition:transform .16s ease-out;
  image-rendering:pixelated;
}
#hotbar.rpgForge.enter .rpgForgeFrame{
  animation:forgeRise .58s cubic-bezier(.16,1,.3,1) both;
}
#hotbar.rpgForge.enter .rpgForgeAura{
  animation:forgeGlow .58s cubic-bezier(.16,1,.3,1) both;
}
@keyframes forgeRise{
  from{opacity:0;transform:translateY(26px) rotateX(var(--bar-rx)) rotateY(var(--bar-ry))}
  to{opacity:1;transform:translateY(0) rotateX(var(--bar-rx)) rotateY(var(--bar-ry))}
}
@keyframes forgeGlow{
  from{opacity:0}
  to{opacity:1}
}
.rpgForgeCap{
  position:relative;z-index:2;width:22px;flex:0 0 22px;
  display:grid;place-items:center;
  background:
    repeating-linear-gradient(90deg,#5c4634 0 3px,#4a382c 3px 6px),
    linear-gradient(180deg,#7a5a40,#2a2018);
  border:2px solid #1e1612;
  box-shadow:inset 0 0 0 1px #c4a06a, inset 0 2px 0 rgba(255,236,196,.16);
}
.rpgForgeCap.left{border-right:0;border-radius:3px 0 0 3px}
.rpgForgeCap.right{border-left:0;border-radius:0 3px 3px 0}
.rpgForgeCap i{
  width:8px;height:8px;display:block;
  background:linear-gradient(135deg,#fff4c8,#e8ca76 40%,#8d6a3a);
  box-shadow:0 0 0 2px #1e1612, inset 1px 1px 0 #fff6d8;
}
.rpgForgePlate{
  position:relative;z-index:1;
  display:flex;align-items:center;
  padding:8px 10px 9px;
  background:
    repeating-linear-gradient(90deg,rgba(255,236,196,.05) 0 2px,transparent 2px 8px),
    linear-gradient(180deg,#6a5340 0%,#3d2e24 48%,#231c18 100%);
  border:2px solid #1e1612;
  border-left:0;border-right:0;
  box-shadow:
    inset 0 1px 0 rgba(255,244,210,.22),
    inset 0 -6px 10px rgba(0,0,0,.35),
    0 0 0 1px #8d6e48;
}
.rpgForgePlate::before{
  content:"";position:absolute;inset:3px;pointer-events:none;
  border:1px solid rgba(232,202,118,.18);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.rpgForgeShine{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(circle at calc(var(--px)*100%) calc(var(--py)*100%),rgba(255,244,214,.20),transparent 44%);
  mix-blend-mode:soft-light;
}
.rpgForgeRail{
  position:absolute;left:8px;right:8px;top:4px;height:2px;pointer-events:none;z-index:4;
  background:linear-gradient(90deg,transparent,#ead27d 12%,#ead27d 88%,transparent);
  opacity:.55;
  box-shadow:0 1px 0 #1e1612;
}
.rpgForgeSlots{
  position:relative;z-index:2;
  display:flex;gap:5px;align-items:center;
}

#hotbar.rpgForge .slot{
  --slot-px:.5;--slot-py:.35;--slot-rx:0deg;--slot-ry:0deg;
  width:48px !important;height:48px !important;border-radius:3px !important;
  position:relative;display:grid;place-items:center;overflow:visible !important;
  cursor:pointer;user-select:none;
  background:
    linear-gradient(180deg,rgba(255,232,180,.08),transparent 28%),
    linear-gradient(180deg,#2a221c,#14110e) !important;
  border:2px solid #1e1612 !important;
  box-shadow:
    inset 0 0 0 1px #6a5340,
    inset 0 4px 6px rgba(0,0,0,.62),
    0 1px 0 rgba(232,202,118,.18) !important;
  transform:translateY(0) !important;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,filter .12s ease !important;
}
#hotbar.rpgForge .slot::before,
#hotbar.rpgForge .slot::after{display:block !important}
#hotbar.rpgForge .slot::before{
  content:"";position:absolute;inset:3px;pointer-events:none;z-index:1;
  border:1px solid rgba(255,220,150,.10);
}
#hotbar.rpgForge .slot::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(circle at calc(var(--slot-px)*100%) calc(var(--slot-py)*100%),rgba(255,244,210,.28),transparent 52%);
  opacity:.5;mix-blend-mode:soft-light;
}
#hotbar.rpgForge .rpgSlotWell,
#inventoryOverlay .rpgSlotWell{
  position:absolute;inset:4px;pointer-events:none;z-index:0;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.55);
}
#hotbar.rpgForge .rpgSlotGlint,
#inventoryOverlay .rpgSlotGlint{
  position:absolute;left:6px;right:6px;top:5px;height:5px;pointer-events:none;z-index:5;
  background:linear-gradient(180deg,rgba(255,246,220,.24),transparent);
}
#hotbar.rpgForge .slot img{
  width:32px !important;height:32px !important;position:relative;z-index:3;
  object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #0008);
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
#hotbar.rpgForge .slot .n{
  left:4px;top:3px;z-index:6;font-size:7px;font-weight:900;letter-spacing:.2px;
  color:#efe3c6;text-shadow:1px 1px #120e0b;opacity:.92;
}
#hotbar.rpgForge .slot .c{
  right:4px;bottom:3px;z-index:6;font-size:10px;color:#fff4d6;text-shadow:1px 1px #120e0b;
}
#hotbar.rpgForge .slot .dur{
  left:5px;right:5px;bottom:5px;height:3px;z-index:6;
  background:#0e0c0a;overflow:hidden;box-shadow:inset 0 1px 1px #000a;
}
#hotbar.rpgForge .slot .dur i{background:linear-gradient(90deg,#6ea24c,#e4d173)}
#hotbar.rpgForge .slot .slotIcon,
#hotbar.rpgForge .slot .toolGlyph{position:relative;z-index:3;font-size:17px;filter:drop-shadow(0 2px 0 #0008)}

#hotbar.rpgForge .slot:hover{
  z-index:5;filter:brightness(1.1);
  transform:translateY(-3px) !important;
  box-shadow:
    inset 0 0 0 1px #ead27d,
    inset 0 3px 5px rgba(0,0,0,.5),
    0 6px 12px rgba(0,0,0,.4) !important;
}
#hotbar.rpgForge .slot.sel{
  z-index:6;
  border-color:#1e1612 !important;
  background:
    linear-gradient(180deg,rgba(255,230,160,.16),transparent 40%),
    linear-gradient(180deg,#4a3a2b,#241c16) !important;
  box-shadow:
    inset 0 0 0 1px #ead27d,
    0 0 0 2px #5b472d,
    0 0 0 3px #ead27d,
    0 0 14px rgba(232,202,118,.32),
    0 6px 12px rgba(0,0,0,.4) !important;
  transform:translateY(-2px) !important;
}
#hotbar.rpgForge .slot.sel::before{
  border-color:rgba(255,232,160,.28);
  background:linear-gradient(90deg,transparent,rgba(255,236,190,.22),transparent);
  background-size:180% 100%;
  animation:selSheen 2.4s linear infinite;
}
@keyframes selSheen{
  0%{background-position:120% 0}
  100%{background-position:-30% 0}
}
#hotbar.rpgForge .slot.dropTarget,
#inventoryOverlay .invSlot.dropTarget{
  border-color:#1e1612 !important;
  box-shadow:inset 0 0 0 1px #c6e38a,0 0 0 2px #5b6d3a !important;
}
#hotbar.rpgForge .slot.is-dragging,
#inventoryOverlay .invSlot.is-dragging{opacity:.4;transform:scale(.92) !important}
#app.is-slot-dragging{cursor:grabbing}
#app.is-slot-dragging #hotbar.rpgForge .slot,
#app.is-slot-dragging #inventoryOverlay .invSlot,
#app.is-slot-dragging #chestOverlay .invSlot{cursor:copy}

#contextHint{bottom:96px !important}
#contextHint:empty{opacity:0;visibility:hidden;padding:0;min-width:0;border:0;background:transparent;box-shadow:none}

#inventoryOverlay.overlay{
  display:flex;align-items:flex-start;justify-content:center;
  padding:20px 18px 108px !important;
  background:transparent !important;
  pointer-events:none;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
#inventoryOverlay.is-open{pointer-events:auto}
#inventoryOverlay .invVeil{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 28%,rgba(12,16,12,.16),rgba(4,6,5,.58));
  opacity:0;transition:opacity .26s ease;
}
#inventoryOverlay.is-open .invVeil{opacity:1;pointer-events:auto}
#inventoryOverlay .inventoryWindow.rpgInv{
  --px:.5;--py:.5;--inv-rx:0deg;--inv-ry:0deg;
  pointer-events:auto;position:relative;overflow:hidden !important;
  width:min(760px,90vw) !important;
  padding:14px 16px 12px !important;
  border-radius:8px !important;
  transform:rotateX(var(--inv-rx)) rotateY(var(--inv-ry)) translateY(14px) scale(.97);
  transform-origin:50% 8%;
  opacity:0;
  transition:transform .36s cubic-bezier(.16,1,.3,1),opacity .26s ease;
  background:
    repeating-linear-gradient(90deg,rgba(255,236,196,.04) 0 2px,transparent 2px 10px),
    linear-gradient(180deg,#4a3d30 0%,#2b261f 48%,#171512 100%) !important;
  border:2px solid #1e1612 !important;
  box-shadow:
    0 0 0 1px #8d6e48,
    0 0 0 3px #1e1612,
    inset 0 1px 0 rgba(255,244,214,.18),
    inset 0 0 0 4px rgba(28,22,16,.5),
    inset 0 0 0 5px rgba(232,202,118,.28),
    0 26px 60px rgba(0,0,0,.6) !important;
  image-rendering:pixelated;
}
#inventoryOverlay.is-open .inventoryWindow.rpgInv{
  opacity:1;
  transform:rotateX(var(--inv-rx)) rotateY(var(--inv-ry)) translateY(0) scale(1);
}
#inventoryOverlay.is-closing .inventoryWindow.rpgInv{
  opacity:0;
  transform:translateY(16px) scale(.97);
  pointer-events:none;
}
#inventoryOverlay .rpgInvShine{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(circle at calc(var(--px)*100%) calc(var(--py)*100%),rgba(255,240,200,.14),transparent 38%);
}
#inventoryOverlay .rpgInvGrain{
  position:absolute;inset:6px;pointer-events:none;z-index:1;opacity:.18;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 7px);
}
#inventoryOverlay .rpgInvCorner{
  position:absolute;width:12px;height:12px;z-index:5;pointer-events:none;
  border:2px solid #ead27d;
}
#inventoryOverlay .rpgInvCorner.tl{top:6px;left:6px;border-right:0;border-bottom:0}
#inventoryOverlay .rpgInvCorner.tr{top:6px;right:6px;border-left:0;border-bottom:0}
#inventoryOverlay .rpgInvCorner.bl{bottom:6px;left:6px;border-right:0;border-top:0}
#inventoryOverlay .rpgInvCorner.br{bottom:6px;right:6px;border-left:0;border-top:0}
#inventoryOverlay .inventoryTop{
  position:relative;z-index:3;
  display:flex;align-items:center;gap:10px;
  padding:2px 2px 10px !important;margin-bottom:0 !important;
  border-bottom:0 !important;
}
#inventoryOverlay .inventoryTop::after{display:none}
#inventoryOverlay .rpgInvEmblem{
  width:52px;height:auto;flex:0 0 52px;
  display:grid;place-items:center;
  background:transparent;border:0;box-shadow:none;
}
#inventoryOverlay .rpgInvEmblem .brandLogo--inv{width:52px}
#inventoryOverlay .rpgInvTitle{flex:1;min-width:0}
#inventoryOverlay .eyebrow{font-size:7px;letter-spacing:2.6px;color:#d7c49a}
#inventoryOverlay .inventoryTop h2{
  margin:2px 0 0;letter-spacing:2px;color:#f3e2b4;
  text-shadow:2px 2px #171310, 0 0 12px rgba(232,202,118,.16);
}
#inventoryOverlay .inventorySub{color:#b5ab96;margin-top:3px}
#inventoryOverlay .closeBtn{
  width:30px !important;height:30px !important;border-radius:3px !important;
  background:linear-gradient(180deg,#8a574b,#4c302c) !important;
  border:2px solid #1e1612 !important;
  box-shadow:inset 0 0 0 1px #c4846a,0 3px 0 #1a140f !important;
  transition:transform .12s ease,filter .12s ease;
}
#inventoryOverlay .closeBtn:hover{transform:translateY(-1px);filter:brightness(1.1)}
#inventoryOverlay .rpgInvBuckle{
  position:relative;z-index:3;display:flex;align-items:center;gap:8px;
  margin:8px 4px 10px;
}
#inventoryOverlay .rpgInvBuckle i{
  flex:1;height:3px;
  background:linear-gradient(90deg,transparent,#8d6a4b,#ead27d,#8d6a4b,transparent);
  box-shadow:0 1px 0 #1e1612;
}
#inventoryOverlay .rpgInvBuckle b{
  width:14px;height:10px;flex:0 0 14px;
  background:#e8ca76;border:2px solid #1e1612;
  box-shadow:inset 1px 1px 0 #fff4c8;
}
#inventoryOverlay .inventoryBody{position:relative;z-index:3}
#inventoryOverlay .inventoryGrid{
  display:grid;grid-template-columns:repeat(9,1fr);gap:5px;
  padding:8px !important;border-radius:4px !important;
  background:linear-gradient(180deg,#121511,#0c0e0c) !important;
  border:2px solid #1e1612 !important;
  box-shadow:inset 0 0 0 1px rgba(232,202,118,.28),inset 0 6px 14px rgba(0,0,0,.62) !important;
}
#inventoryOverlay .invSlot{
  --slot-px:.5;--slot-py:.35;--slot-rx:0deg;--slot-ry:0deg;
  height:56px !important;border-radius:3px !important;
  position:relative;display:grid;place-items:center;cursor:grab;
  background:
    linear-gradient(180deg,rgba(255,230,180,.07),transparent 32%),
    linear-gradient(180deg,#5a493c,#322824) !important;
  border:2px solid #1e1612 !important;
  box-shadow:inset 0 0 0 1px #8d6e48,inset 0 3px 6px rgba(0,0,0,.4) !important;
  transform:none;
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;
}
#inventoryOverlay .invSlot::before{
  content:"";position:absolute;inset:3px;pointer-events:none;
  border:1px solid rgba(255,226,170,.08);
}
#inventoryOverlay .invSlot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at calc(var(--slot-px)*100%) calc(var(--slot-py)*100%),rgba(255,244,210,.26),transparent 55%);
  mix-blend-mode:soft-light;
}
#inventoryOverlay .invSlot.empty{
  background:linear-gradient(180deg,#242a25,#151a16) !important;
  cursor:default;
  box-shadow:inset 0 4px 8px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.04) !important;
}
#inventoryOverlay .invSlot.empty::before{
  background:
    linear-gradient(45deg,transparent 46%,rgba(232,202,118,.12) 49%,transparent 52%),
    linear-gradient(-45deg,transparent 46%,rgba(232,202,118,.12) 49%,transparent 52%);
}
#inventoryOverlay .invSlot:hover{
  z-index:2;filter:brightness(1.08);
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px #ead27d,0 6px 12px rgba(0,0,0,.4) !important;
}
#inventoryOverlay .invSlot img{
  width:36px !important;height:36px !important;position:relative;z-index:3;
  object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #0008);
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
#inventoryOverlay .invCount{
  right:4px;bottom:3px;z-index:4;font-size:10px;color:#fff3d3;text-shadow:1px 1px #15100e;
}
#inventoryOverlay .invSlot .dur{
  left:5px;right:5px;bottom:4px;height:3px;z-index:4;background:#12100e;
}
#inventoryOverlay.invEnter .invSlot{
  animation:invSlotIn .38s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--i,0)*12ms);
}
@keyframes invSlotIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
#inventoryOverlay .rpgInvFooter{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:10px;font-size:8px;letter-spacing:1px;color:#cbb892;opacity:.88;
}
#inventoryOverlay .rpgInvFooter i{
  width:48px;height:2px;
  background:linear-gradient(90deg,transparent,#e8ca76,transparent);
  box-shadow:0 1px 0 #1e1612;
}
.invWeight{
  display:flex;align-items:center;gap:8px;width:100%;padding:4px 6px 2px;
  font-size:8px;letter-spacing:1.2px;color:#d7c49a;
}
.invWeight span{flex:0 0 auto;font-weight:800}
.invWeight b{flex:0 0 auto;font-size:9px;color:#ead27d;letter-spacing:.4px}
.invWeight.hot b{color:#e8a048}
.invWeight.over b{color:#e17676}
.invWeightBar{
  flex:1;height:7px;background:#1c1814;border:1px solid #1e1612;
  box-shadow:inset 0 0 0 1px #5a4a38,0 1px 0 rgba(255,244,214,.08);
}
.invWeightBar i{
  display:block;height:100%;width:0;max-width:100%;
  background:linear-gradient(90deg,#8a6a38,#e2c46f);
  box-shadow:none;
}
.invWeightBar i.hot{background:linear-gradient(90deg,#a86a28,#e8a048)}
.invWeightBar i.over{background:linear-gradient(90deg,#8a3030,#e07060)}

.rpgTooltip{
  position:absolute;z-index:400;pointer-events:none;
  padding:5px 8px 6px;border-radius:2px;
  background:linear-gradient(180deg,#3d3428,#221c16);
  border:2px solid #1e1612;
  box-shadow:inset 0 0 0 1px #e2c36a,0 6px 14px rgba(0,0,0,.5);
  color:#f4e6c2;font-size:10px;font-weight:800;letter-spacing:.4px;
  text-shadow:1px 1px #120e0b;
  opacity:0;transform:translateY(4px);
  transition:opacity .12s ease,transform .12s ease;
  image-rendering:pixelated;
}
.rpgTooltip.show{opacity:1;transform:translateY(0)}
/* ===== CHARACTER ATELIER ===== */
#heroAtelier{position:absolute;inset:0;z-index:420;display:flex;align-items:center;justify-content:center;padding:14px 16px;background:linear-gradient(180deg,rgba(8,12,10,.42),rgba(10,14,12,.78));backdrop-filter:blur(4px)}
#heroAtelier.hidden{display:none!important}
.heroFrame{position:relative;width:min(1020px,100%);height:min(612px,100%);display:grid;grid-template-columns:270px 1fr;gap:0;background:linear-gradient(180deg,#32342c,#1b1e19);border:3px solid rgba(236,217,159,.34);box-shadow:0 28px 90px #000d,inset 0 1px 0 rgba(255,255,255,.07);overflow:hidden}
.heroPreviewPane{padding:12px 14px 14px;background:linear-gradient(180deg,rgba(42,38,30,.95),rgba(22,24,20,.98));border-right:1px solid rgba(232,202,118,.18);display:flex;flex-direction:column;align-items:center}
.heroEyebrow{font-size:8px;letter-spacing:2.2px;color:#cbb892}
.heroPreviewPane h2{margin:2px 0 10px;letter-spacing:2px;color:#f4e6c2;text-shadow:2px 2px #1a1410}
.heroDais{position:relative;width:184px;height:248px;display:grid;place-items:end center;background:
  repeating-linear-gradient(90deg,#3a342c 0 8px,#322c26 8px 16px),
  linear-gradient(180deg,#4a4238,#25201c);
  border:2px solid #2a201d;box-shadow:inset 0 0 0 1px #8d6e48,0 12px 28px #0008;overflow:hidden;cursor:pointer}
.heroDais::after{content:"";position:absolute;inset:4px;border:1px solid rgba(232,202,118,.14);pointer-events:none}
.heroRug{position:absolute;left:22px;right:22px;bottom:18px;height:28px;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,#7a4e48,#5c3a34 58%,transparent 72%);pointer-events:none}
#heroPreview{position:relative;z-index:2;image-rendering:pixelated;image-rendering:crisp-edges;width:160px;height:240px;margin-bottom:22px}
.heroTurnRow{display:flex;align-items:center;gap:10px;margin-top:10px}
.heroIconBtn{width:36px;height:32px;padding:0;border:2px solid #2a201d;background:linear-gradient(#8d6a4b,#64472f);box-shadow:inset 0 0 0 1px #b38b60;color:#f4e6c2}
.heroIconBtn:hover{filter:brightness(1.08)}
#heroDirLabel{min-width:72px;text-align:center;font-size:10px;letter-spacing:1.4px;color:#ead27d}
.heroHint{margin:10px 8px 0;font-size:8px;line-height:1.45;color:#cbb892;opacity:.82}
.heroLookName{margin-top:10px;padding:7px 8px;width:100%;font-size:8px;line-height:1.5;letter-spacing:.3px;color:#eadab7;background:rgba(12,10,8,.35);border:1px solid rgba(232,202,118,.16)}
.heroStudio{padding:14px 14px 12px;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:
  linear-gradient(180deg,rgba(42,44,38,.2),transparent 40px),
  repeating-linear-gradient(0deg,rgba(232,202,118,.04) 0 1px,transparent 1px 18px),
  linear-gradient(180deg,#2a2c26,#181b17)}
.heroStudioTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.heroSex{display:flex;gap:5px}
.heroSex button{padding:7px 12px;border:2px solid #312720;background:#3f342c;color:#eadab7;font-size:8px;letter-spacing:.6px;font-weight:800}
.heroSex button.on{background:linear-gradient(#8d6a4b,#64472f);color:#fff4d2;box-shadow:inset 0 0 0 1px #ead27d}
.heroCoins{display:flex;align-items:center;gap:6px;padding:5px 8px;background:rgba(12,10,8,.42);border:1px solid rgba(232,202,118,.22);font-size:9px;color:#eadab7}
.heroCoins b{color:#ead27d;letter-spacing:.4px}
.heroCoinDot{display:inline-block;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff4c8,#ead27d 40%,#8a7040);border:1px solid #1e1612;box-shadow:0 0 6px rgba(232,202,118,.45)}
.heroShopLink{margin-left:4px;color:#ead27d;text-decoration:none;letter-spacing:.4px;font-weight:800}
.heroShopLink:hover{color:#fff4d2}
.heroCard.lock{opacity:.92;filter:saturate(.82);position:relative}
.heroCard .heroPrice{
  position:absolute;top:5px;right:5px;z-index:3;
  display:inline-flex;align-items:center;justify-content:center;gap:3px;
  min-width:22px;height:18px;padding:0 4px 0 3px;box-sizing:border-box;
  background:linear-gradient(180deg,#3a2e22,#1e1612);
  border:1px solid #ead27d;
  box-shadow:0 2px 0 #1a140f,0 0 8px rgba(232,202,118,.32),inset 0 1px 0 rgba(255,244,210,.18);
  color:#fff4d2;font-size:9px;font-weight:900;letter-spacing:0;line-height:1;opacity:1;
  pointer-events:none;
}
.heroPrice .heroCoinDot{width:8px;height:8px;flex-shrink:0;box-shadow:0 0 4px rgba(232,202,118,.5)}
.heroCard.lock b{color:#d7c49a}
.heroCard.lock>span:not(.heroPrice){color:#ead27d;opacity:1;letter-spacing:.3px}
.heroBuy{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;background:rgba(8,10,8,.55)}
.heroBuy.hidden{display:none!important}
.heroBuyCard{width:min(360px,86%);padding:16px 16px 14px;background:linear-gradient(180deg,#3a342c,#221c18);border:2px solid #ead27d;box-shadow:0 18px 40px #000a}
.heroBuyCard p{margin:0 0 14px;font-size:11px;line-height:1.5;color:#f4e6c2}
.heroBuyRow{display:flex;gap:8px}
.heroCats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.heroCat{padding:7px 2px;border:2px solid #312720;background:#3f342c;color:#eadab7;font-size:7px;letter-spacing:.4px;font-weight:800}
.heroCat.on{background:linear-gradient(#8d6a4b,#64472f);color:#fff4d2;box-shadow:inset 0 0 0 1px #ead27d}
.heroOptions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px;flex:1;align-content:start;overflow-y:auto;min-height:0;padding-right:4px}
.heroCard{min-height:108px;padding:6px;cursor:pointer;background:linear-gradient(180deg,#4a3b32,#322823);border:2px solid #332823;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);display:flex;flex-direction:column;align-items:center;gap:3px}
.heroCard:hover{filter:brightness(1.07);border-color:#5b472d}
.heroCard.sel{outline:2px solid #ead27d;box-shadow:0 0 0 2px #5b472d,inset 0 0 0 1px #ead27d}
.heroCard canvas{image-rendering:pixelated;background:#1c1814;border:1px solid #3a2e28;width:64px;height:96px}
.heroCard b{font-size:10px;color:#f4e6c2;letter-spacing:.4px}
.heroCard span{font-size:7px;color:#cbb892;opacity:.8}
.heroSwatch{display:block;width:28px;height:6px;border:1px solid #1e1612;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.heroBar{display:flex;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(232,202,118,.18)}
.heroGhost,.heroReady{flex:1;padding:11px 10px;border:2px solid #2a201d;letter-spacing:1px}
.heroGhost{background:linear-gradient(#5f6258,#41463e);box-shadow:inset 0 0 0 2px #77796d}
.heroReady{background:linear-gradient(#8d6a4b,#64472f);box-shadow:inset 0 0 0 2px #b38b60,0 5px 0 #30241f;color:#fff4d2}
.heroReady:hover,.heroGhost:hover{transform:translateY(-1px)}
@media(max-width:900px){
  .heroFrame{grid-template-columns:1fr;height:auto;max-height:100%;overflow:auto}
  .heroPreviewPane{border-right:0;border-bottom:1px solid rgba(232,202,118,.18)}
  .heroDais{width:140px;height:190px}
  #heroPreview{width:120px;height:180px}
  .heroCats{grid-template-columns:repeat(4,1fr)}
  .heroOptions{grid-template-columns:repeat(2,1fr)}
}

/* ===== BUILD LEDGER — RPG OFFICINA ===== */
#buildUI.rpgBuild{
  --px:.5;--py:.35;
  position:absolute;left:10px;right:auto;top:52px;bottom:90px;width:min(332px,36vw);
  max-height:none;
  z-index:55 !important;
  display:flex;flex-direction:column;gap:0;
  padding:8px 8px 6px;
  overflow:hidden;
  pointer-events:auto;
  background:
    linear-gradient(180deg,rgba(255,236,196,.10),transparent 16%),
    repeating-linear-gradient(90deg,rgba(42,32,24,.18) 0 2px,transparent 2px 7px),
    linear-gradient(145deg,#4a3d30 0%,#2b261f 46%,#171512 100%);
  border:2px solid #e0c074;
  border-radius:12px;
  box-shadow:
    0 0 0 1px #2a2118,
    0 0 0 4px rgba(14,12,10,.55),
    inset 0 1px 0 rgba(255,244,214,.22),
    inset 0 0 0 5px rgba(28,22,16,.55),
    inset 0 0 0 6px rgba(232,202,118,.22),
    inset 0 -10px 18px rgba(0,0,0,.28),
    0 22px 48px rgba(0,0,0,.52);
}
#buildUI.rpgBuild.hidden{display:none!important}
#buildUI.rpgBuild .rpgBuildShine{
  position:absolute;inset:0;border-radius:10px;pointer-events:none;z-index:2;
  background:radial-gradient(circle at calc(var(--px)*100%) calc(var(--py)*100%),rgba(255,240,200,.14),transparent 38%);
}
#buildUI.rpgBuild .rpgBuildCorner{
  position:absolute;width:14px;height:14px;z-index:5;pointer-events:none;
  border:2px solid #efd089;box-shadow:0 0 8px rgba(232,202,118,.22);
}
#buildUI.rpgBuild .rpgBuildCorner.tl{top:5px;left:5px;border-right:0;border-bottom:0;border-top-left-radius:5px}
#buildUI.rpgBuild .rpgBuildCorner.tr{top:5px;right:5px;border-left:0;border-bottom:0;border-top-right-radius:5px}
#buildUI.rpgBuild .rpgBuildCorner.bl{bottom:5px;left:5px;border-right:0;border-top:0;border-bottom-left-radius:5px}
#buildUI.rpgBuild .rpgBuildCorner.br{bottom:5px;right:5px;border-left:0;border-top:0;border-bottom-right-radius:5px}
#buildUI.rpgBuild .rpgBuildTop{
  position:relative;z-index:3;display:flex;align-items:center;gap:8px;
  flex:0 0 auto;padding:0 2px 6px;margin-bottom:4px;
}
#buildUI.rpgBuild .rpgBuildTop::after{
  content:"";position:absolute;left:6px;right:6px;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,202,118,.55),transparent);
}
#buildUI.rpgBuild .rpgBuildEmblem{
  width:42px;height:auto;flex:0 0 42px;display:grid;place-items:center;
  background:transparent;border:0;border-radius:0;box-shadow:none;
}
#buildUI.rpgBuild .rpgBuildEmblem .brandLogo--build{width:42px}
#buildUI.rpgBuild .rpgBuildTitle{flex:1;min-width:0}
#buildUI.rpgBuild .eyebrow{font-size:7px;letter-spacing:2.2px;color:#d7c49a}
#buildUI.rpgBuild h2,#buildUI.rpgBuild .rpgBuildHead h2{
  margin:1px 0 0;letter-spacing:2px;color:#f3e2b4;
  text-shadow:0 1px 0 #fff4, 2px 2px 0 #171310;
}
#buildUI.rpgBuild .closeBtn{
  width:26px!important;height:26px!important;padding:0!important;border-radius:6px!important;
  background:linear-gradient(180deg,#8a574b,#4c302c)!important;
  border:2px solid #2a1b18!important;font-size:16px;line-height:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 3px 8px #0007!important;
}
#buildUI.rpgBuild .rpgBuildTabs{position:relative;z-index:3;flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:6px}
#buildUI.rpgBuild .rpgBuildTab{
  padding:7px 6px;border:2px solid #2a201d;letter-spacing:1.2px;font-size:9px;font-weight:800;
  background:linear-gradient(#3f342c,#2c241e);color:#eadab7;
  box-shadow:inset 0 0 0 1px rgba(180,145,106,.28);
}
#buildUI.rpgBuild .rpgBuildTab:hover{filter:brightness(1.08)}
#buildUI.rpgBuild .rpgBuildTab.on{
  background:linear-gradient(#8d6a4b,#64472f);color:#fff4d2;
  box-shadow:inset 0 0 0 1px #ead27d,0 3px 0 #30241f;
}
#buildUI.rpgBuild .rpgBuildStage{
  position:relative;z-index:3;margin-bottom:6px;flex:0 0 auto;
  border:2px solid rgba(206,173,108,.45);border-radius:9px;
  background:linear-gradient(180deg,#1a1612,#100e0c);
  box-shadow:inset 0 8px 18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,236,190,.08);
  overflow:hidden;
}
#buildUI.rpgBuild .rpgBuildStageArt{
  position:relative;height:64px;
  display:flex;align-items:center;gap:6px;
  background:
    linear-gradient(180deg,transparent 70%,rgba(16,12,10,.55)),
    repeating-linear-gradient(45deg,rgba(232,202,118,.04) 0 6px,transparent 6px 12px);
}
#buildUI.rpgBuild #buildPreview{
  display:block;flex:1;min-width:0;width:100%;height:64px;image-rendering:pixelated;
}
#buildUI.rpgBuild .rpgBuildCompass{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  z-index:4;display:grid;grid-template-columns:repeat(3,16px);grid-template-rows:repeat(3,16px);gap:2px;
  margin:0;padding:3px;background:rgba(16,12,10,.78);border:1px solid rgba(232,202,118,.35);border-radius:6px;
}
#buildUI.rpgBuild .rpgBuildDir{
  width:16px;height:16px;padding:0;border:1px solid #2a201d;border-radius:3px;
  font-size:7px;font-weight:800;letter-spacing:.2px;color:#eadab7;
  background:linear-gradient(#3f342c,#2c241e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
#buildUI.rpgBuild .rpgBuildDir[data-rot="2"]{grid-column:2;grid-row:1}
#buildUI.rpgBuild .rpgBuildDir[data-rot="1"]{grid-column:1;grid-row:2}
#buildUI.rpgBuild .rpgBuildDirSpin{grid-column:2;grid-row:2;color:#ead27d}
#buildUI.rpgBuild .rpgBuildDir[data-rot="3"]{grid-column:3;grid-row:2}
#buildUI.rpgBuild .rpgBuildDir[data-rot="0"]{grid-column:2;grid-row:3}
#buildUI.rpgBuild .rpgBuildDir:hover{filter:brightness(1.12)}
#buildUI.rpgBuild .rpgBuildDir.on{
  background:linear-gradient(#8d6a4b,#64472f);color:#fff4d2;border-color:#ead27d;
  box-shadow:0 0 8px rgba(232,202,118,.35);
}
#buildUI.rpgBuild .rpgBuildStageMeta{padding:4px 8px 5px}
#buildUI.rpgBuild .rpgBuildStageHead{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:1px;
}
#buildUI.rpgBuild .rpgBuildStageHead b{font-size:12px;color:#f4e6c2;letter-spacing:.6px}
#buildUI.rpgBuild #buildRotLabel{
  font-size:8px;letter-spacing:1.4px;color:#ead27d;text-transform:uppercase;
  padding:2px 6px;border:1px solid rgba(232,202,118,.35);border-radius:3px;
}
#buildUI.rpgBuild #buildSelHint{
  margin:0 0 3px;font-size:8px;line-height:1.3;color:#b5ab96;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:0;max-height:none;
}
#buildUI.rpgBuild .rpgBuildCostRow{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:3px;min-height:16px}
#buildUI.rpgBuild .rpgCostChip{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 5px 2px 3px;background:#141210;border:1px solid #3a2e28;border-radius:4px;
  font-size:8px;color:#ead27d;letter-spacing:.2px;
}
#buildUI.rpgBuild .rpgCostChip img{width:12px;height:12px;image-rendering:pixelated}
#buildUI.rpgBuild .rpgCostChip .n{font-weight:800}
#buildUI.rpgBuild .rpgCostChip i{font-style:normal;color:#cbb892;font-size:7px}
#buildUI.rpgBuild .rpgCostChip.ok{border-color:#3d5a40}
#buildUI.rpgBuild .rpgCostChip.no{color:#e17676;border-color:#6a3030}
#buildUI.rpgBuild .rpgBuildNeed{font-size:8px;color:#8fe0a5;letter-spacing:.4px}
#buildUI.rpgBuild .rpgBuildNeed.no{color:#e17676}
#buildUI.rpgBuild .rpgBuildFilters{
  position:relative;z-index:3;flex:0 0 auto;display:flex;gap:4px;margin-bottom:6px;
}
#buildUI.rpgBuild .rpgBuildSkins{
  position:relative;z-index:3;flex:0 0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-bottom:6px;
}
#buildUI.rpgBuild .rpgBuildSkins[hidden]{display:none!important}
#buildUI.rpgBuild .rpgBuildSkin{
  padding:5px 2px;border:2px solid #2a201d;letter-spacing:.4px;font-size:7px;font-weight:800;
  background:linear-gradient(#3f342c,#2c241e);color:#eadab7;
  box-shadow:inset 0 0 0 1px rgba(180,145,106,.28);
}
#buildUI.rpgBuild .rpgBuildSkin:hover{filter:brightness(1.08)}
#buildUI.rpgBuild .rpgBuildSkin.on{
  background:linear-gradient(#8d6a4b,#64472f);color:#fff4d2;
  box-shadow:inset 0 0 0 1px #ead27d,0 2px 0 #30241f;
}
#buildUI.rpgBuild .rpgBuildFilters[hidden]{display:none!important}
#buildUI.rpgBuild .rpgBuildFilter{
  flex:1;padding:5px 4px;border:1px solid #2a201d;border-radius:5px;
  font-size:7px;font-weight:800;letter-spacing:.8px;color:#cbb892;
  background:linear-gradient(#322824,#241e1a);
}
#buildUI.rpgBuild .rpgBuildFilter:hover{color:#eadab7}
#buildUI.rpgBuild .rpgBuildFilter.on{
  color:#fff4d2;border-color:#8d6a4b;
  background:linear-gradient(#6a4e38,#4a3428);
  box-shadow:inset 0 0 0 1px rgba(234,210,125,.35);
}
#buildUI.rpgBuild .rpgBuildGrid{
  position:relative;z-index:3;flex:1 1 auto;min-height:228px;overflow-x:hidden;overflow-y:auto;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(70px,auto);
  gap:6px;align-content:start;align-items:stretch;
  padding:7px;border-radius:9px;
  background:linear-gradient(180deg,#121511,#0d100e);
  border:2px solid rgba(206,173,108,.38);
  box-shadow:inset 0 6px 16px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,236,190,.06);
}
#buildUI.rpgBuild .rpgBuildCard{
  min-height:70px;height:auto;min-width:0;padding:7px;cursor:pointer;text-align:left;
  display:flex;flex-direction:row;align-items:center;gap:7px;flex-shrink:0;
  background:
    linear-gradient(160deg,rgba(255,230,180,.08),transparent 36%),
    linear-gradient(180deg,#5a493c,#322824);
  border:2px solid #1d1816;border-radius:7px;
  box-shadow:inset 0 0 0 1px rgba(206,168,110,.38),inset 0 2px 0 rgba(255,240,200,.07),0 2px 4px rgba(0,0,0,.35);
}
#buildUI.rpgBuild .rpgBuildCard:hover{filter:brightness(1.08);border-color:#5b472d}
#buildUI.rpgBuild .rpgBuildCard.sel{
  outline:2px solid #ead27d;border-color:#8d6a4b;
  box-shadow:0 0 0 2px #5b472d,inset 0 0 0 1px #ead27d,0 0 14px rgba(232,202,118,.18);
}
#buildUI.rpgBuild .rpgBuildCard.locked{opacity:.58}
#buildUI.rpgBuild .rpgBuildThumb{
  display:block;width:56px;height:56px;flex:0 0 56px;image-rendering:pixelated;
  background:#241c16;border:1px solid #5b472d;border-radius:4px;
}
#buildUI.rpgBuild .rpgBuildCardBody{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
}
#buildUI.rpgBuild .rpgBuildCard b{font-size:10px;color:#f4e6c2;letter-spacing:.3px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#buildUI.rpgBuild .rpgBuildCardCost{display:flex;flex-wrap:wrap;gap:3px;min-height:16px}
#buildUI.rpgBuild .rpgBuildCard .rpgCostChip{padding:1px 4px 1px 2px}
#buildUI.rpgBuild .rpgBuildFooter{
  position:relative;z-index:3;flex:0 0 auto;display:flex;align-items:center;gap:8px;
  margin-top:5px;padding-top:5px;font-size:7px;letter-spacing:.4px;color:#cbb892;
  border-top:1px solid rgba(232,202,118,.18);
}
#buildUI.rpgBuild .rpgBuildFooter i{flex:1;height:1px;background:linear-gradient(90deg,rgba(232,202,118,.35),transparent)}
#buildUI.rpgBuild .rpgBuildGrid::-webkit-scrollbar{width:8px}
#buildUI.rpgBuild .rpgBuildGrid::-webkit-scrollbar-thumb{background:#8d6a4b;border:1px solid #2a201d}
#buildUI.rpgBuild .rpgBuildGrid::-webkit-scrollbar-track{background:#141210}

@media(max-width:900px){
  #hotbar.rpgForge .slot{width:42px !important;height:42px !important}
  #hotbar.rpgForge .slot img{width:28px !important;height:28px !important}
  .rpgForgeCap{width:16px;flex-basis:16px}
  #inventoryOverlay .invSlot{height:50px !important}
  #inventoryOverlay .invSlot img{width:30px !important;height:30px !important}
  #buildUI.rpgBuild{width:min(300px,48vw);top:48px;bottom:84px;left:8px}
  #buildUI.rpgBuild .rpgBuildGrid{min-height:180px}
}

/* ===== CHEST (6 SLOTS) ===== */
#chestOverlay.overlay{
  z-index:132;display:flex;align-items:flex-start;justify-content:center;
  padding:28px 18px 108px;background:transparent;pointer-events:none;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
#chestOverlay.is-open{pointer-events:auto}
#chestOverlay .invVeil{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 24%,rgba(12,16,12,.14),rgba(4,6,5,.5));
  opacity:0;transition:opacity .22s ease;
}
#chestOverlay.is-open .invVeil{opacity:1;pointer-events:auto}
#chestOverlay .inventoryWindow.rpgChest{
  width:min(380px,88vw)!important;padding:14px 14px 12px!important;
  pointer-events:auto;position:relative;z-index:2;
  opacity:0;transform:translateY(12px) scale(.97);
  transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .22s ease;
}
#chestOverlay.is-open .inventoryWindow.rpgChest{opacity:1;transform:translateY(0) scale(1)}
#chestOverlay .rpgInvCorner{
  position:absolute;width:12px;height:12px;z-index:5;pointer-events:none;border:2px solid #ead27d;
}
#chestOverlay .rpgInvCorner.tl{top:6px;left:6px;border-right:0;border-bottom:0}
#chestOverlay .rpgInvCorner.tr{top:6px;right:6px;border-left:0;border-bottom:0}
#chestOverlay .rpgInvCorner.bl{bottom:6px;left:6px;border-right:0;border-top:0}
#chestOverlay .rpgInvCorner.br{bottom:6px;right:6px;border-left:0;border-top:0}
#chestOverlay .rpgInvShine{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(circle at 40% 20%,rgba(255,240,200,.12),transparent 42%);
}
#chestOverlay .chestGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(70px,1fr))!important;
  gap:8px;max-width:288px;margin:0 auto;padding:8px;
}
#chestOverlay .invSlot{
  height:72px;position:relative;display:grid;place-items:center;
}
#chestOverlay .invSlot img{
  width:36px;height:36px;object-fit:contain;image-rendering:pixelated;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
#app.is-slot-dragging #chestOverlay .invSlot{cursor:copy}
#chestOverlay .invSlot.dropTarget{outline:2px solid #ead27d}
#chestOverlay .invSlot.is-dragging{opacity:.4}
#app.is-slot-dragging #chestOverlay.is-open,
#app.is-slot-dragging #inventoryOverlay.is-open,
#app.is-slot-dragging #furnaceOverlay.is-open{
  pointer-events:none;
}
#app.is-slot-dragging #chestOverlay .inventoryWindow,
#app.is-slot-dragging #inventoryOverlay .inventoryWindow,
#app.is-slot-dragging #furnaceOverlay .inventoryWindow,
#app.is-slot-dragging #furnaceOverlay .invSlot,
#app.is-slot-dragging #hotbar{
  pointer-events:auto !important;
}
#app.is-slot-dragging #chestOverlay .invVeil,
#app.is-slot-dragging #inventoryOverlay .invVeil,
#app.is-slot-dragging #furnaceOverlay .invVeil{
  pointer-events:none !important;
}
#app.has-chest-inv #inventoryOverlay.overlay{
  justify-content:flex-start;
  padding:24px 18px 108px 16px;
  z-index:134 !important;
  pointer-events:none;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#app.has-chest-inv #inventoryOverlay.is-open{pointer-events:none}
#app.has-chest-inv #inventoryOverlay.is-open .invVeil{
  pointer-events:none !important;
  opacity:0 !important;
  background:none !important;
}
#app.has-chest-inv #inventoryOverlay .inventoryWindow.rpgInv{
  pointer-events:auto;
  width:min(560px,54vw) !important;
  filter:none !important;
}
#app.has-chest-inv #chestOverlay.overlay{
  justify-content:flex-end;
  padding:24px 16px 108px 18px;
  z-index:133;
  pointer-events:none;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#app.has-chest-inv #chestOverlay.is-open{pointer-events:none}
#app.has-chest-inv #chestOverlay.is-open .invVeil{
  pointer-events:none !important;
  opacity:0 !important;
  background:none !important;
}
#app.has-chest-inv #chestOverlay .inventoryWindow.rpgChest{
  pointer-events:auto;
  width:min(360px,40vw) !important;
  filter:none !important;
}
@media (max-width:900px){
  #app.has-chest-inv #inventoryOverlay.overlay{
    justify-content:center;padding:12px 12px 220px;
  }
  #app.has-chest-inv #inventoryOverlay .inventoryWindow.rpgInv{
    width:min(760px,92vw) !important;
  }
  #app.has-chest-inv #chestOverlay.overlay{
    justify-content:center;align-items:flex-end;padding:0 12px 108px;
  }
  #app.has-chest-inv #chestOverlay .inventoryWindow.rpgChest{
    width:min(380px,92vw) !important;
  }
}

/* ===== FORNACE + INVENTARIO affiancati ===== */
#app.has-furnace-inv #inventoryOverlay.overlay{
  justify-content:flex-start;
  padding:24px 18px 108px 16px;
  z-index:134 !important;
  pointer-events:none;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#app.has-furnace-inv #inventoryOverlay.is-open{pointer-events:none}
#app.has-furnace-inv #inventoryOverlay.is-open .invVeil{
  pointer-events:none !important;
  opacity:0 !important;
  background:none !important;
}
#app.has-furnace-inv #inventoryOverlay .inventoryWindow.rpgInv{
  pointer-events:auto;
  width:min(560px,54vw) !important;
  filter:none !important;
}
#app.has-furnace-inv #furnaceOverlay.overlay{
  justify-content:flex-end;
  padding:24px 16px 108px 18px;
  z-index:133;
  pointer-events:none;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#app.has-furnace-inv #furnaceOverlay.is-open{pointer-events:none}
#app.has-furnace-inv #furnaceOverlay.is-open .invVeil{
  pointer-events:none !important;
  opacity:0 !important;
  background:none !important;
}
#app.has-furnace-inv #furnaceOverlay .inventoryWindow.rpgFurnace{
  pointer-events:auto;
  width:min(420px,40vw) !important;
  filter:none !important;
}
#app.has-furnace-inv #furnaceOverlay .furnaceMenu,
#app.has-furnace-inv #furnaceOverlay .furnaceQty{
  z-index:140;
}
@media (max-width:900px){
  #app.has-furnace-inv #inventoryOverlay.overlay{
    justify-content:center;padding:12px 12px 220px;
  }
  #app.has-furnace-inv #inventoryOverlay .inventoryWindow.rpgInv{
    width:min(760px,92vw) !important;
  }
  #app.has-furnace-inv #furnaceOverlay.overlay{
    justify-content:center;align-items:flex-end;padding:0 12px 108px;
  }
  #app.has-furnace-inv #furnaceOverlay .inventoryWindow.rpgFurnace{
    width:min(420px,92vw) !important;
  }
}

/* ===== BANCO DA LAVORO ===== */
#benchOverlay.overlay{
  z-index:132;display:flex;align-items:flex-start;justify-content:center;
  padding:28px 18px 108px;background:transparent;pointer-events:none;
}
#benchOverlay.is-open{pointer-events:auto}
#benchOverlay .invVeil{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 24%,rgba(12,16,12,.14),rgba(4,6,5,.5));
  opacity:0;transition:opacity .22s ease;
}
#benchOverlay.is-open .invVeil{opacity:1;pointer-events:auto}
#benchOverlay .inventoryWindow.rpgBench{
  width:min(400px,88vw)!important;padding:11px 12px 10px!important;
  max-height:min(520px,calc(100vh - 132px));
  max-height:min(520px,calc(100dvh - 132px));
  display:flex;flex-direction:column;overflow:hidden!important;
  opacity:0;transform:translateY(12px) scale(.97);
  transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .22s ease;
}
#benchOverlay.is-open .inventoryWindow.rpgBench{opacity:1;transform:translateY(0) scale(1)}
#benchOverlay .inventoryTop{
  flex:0 0 auto;padding-bottom:6px;margin-bottom:0;
}
#benchOverlay .inventoryTop h2{letter-spacing:2px;margin:1px 0 0}
#benchOverlay .inventorySub{line-height:1.35;margin-top:2px}
#benchOverlay .rpgInvBuckle{flex:0 0 auto;margin:6px 2px 7px}
#benchOverlay .inventoryBody{
  flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;
}
#benchOverlay .rpgInvFooter{flex:0 0 auto;padding-top:6px;margin-top:4px}
#benchOverlay .rpgInvCorner{
  position:absolute;width:12px;height:12px;z-index:6;pointer-events:none;
  border:2px solid #ead27d;box-shadow:0 0 10px rgba(232,202,118,.22);
}
#benchOverlay .rpgInvCorner.tl{top:6px;left:6px;border-right:0;border-bottom:0}
#benchOverlay .rpgInvCorner.tr{top:6px;right:6px;border-left:0;border-bottom:0}
#benchOverlay .rpgInvCorner.bl{bottom:6px;left:6px;border-right:0;border-top:0}
#benchOverlay .rpgInvCorner.br{bottom:6px;right:6px;border-left:0;border-top:0}
#benchOverlay .rpgInvShine{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(circle at 40% 20%,rgba(255,240,200,.12),transparent 42%);
}
.benchGrid{display:flex;flex-direction:column;gap:6px;padding:4px 2px 2px}
#benchOverlay .benchGrid{
  flex:1 1 auto;min-height:0;
  max-height:min(300px,calc(100vh - 268px));
  max-height:min(300px,calc(100dvh - 268px));
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;
  padding:4px 6px 4px 2px;margin-right:-2px;
  border:2px solid rgba(30,22,18,.85);border-radius:5px;
  background:linear-gradient(180deg,#121511,#0c0e0c);
  box-shadow:inset 0 4px 12px rgba(0,0,0,.55),inset 0 0 0 1px rgba(232,202,118,.14);
}
.benchRecipe{
  display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:center;
  width:100%;text-align:left;cursor:pointer;
  background:linear-gradient(180deg,#3a342c,#2a241e);
  border:2px solid #1e1612;color:#f4e6c2;padding:6px 8px;
  box-shadow:inset 0 1px 0 rgba(255,244,214,.12),0 0 0 1px #8d6e48;
  font-family:inherit;
}
#benchOverlay .benchRecipe{grid-template-columns:38px 1fr auto;gap:7px;padding:5px 7px}
.benchRecipe.ok{border-color:#3d5a40;box-shadow:inset 0 1px 0 rgba(255,244,214,.12),0 0 0 1px #6a8a58}
.benchRecipe.no{opacity:.78;cursor:not-allowed}
.benchRecipe:not(:disabled):hover{filter:brightness(1.08)}
.benchIcon{width:48px;height:48px;display:grid;place-items:center;background:rgba(12,10,8,.35);border:1px solid rgba(232,202,118,.22)}
#benchOverlay .benchIcon{width:38px;height:38px}
.benchIcon img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated}
#benchOverlay .benchIcon img{width:28px;height:28px}
.benchMeta{display:flex;flex-direction:column;gap:3px;min-width:0}
.benchMeta b{font-size:13px;letter-spacing:.6px;color:#ead27d}
#benchOverlay .benchMeta b{font-size:11px;letter-spacing:.4px}
.benchMeta i{font-style:normal;font-size:10px;color:#cbb892}
#benchOverlay .benchMeta i{
  font-size:9px;line-height:1.25;color:#b8a888;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.benchCost{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.benchCost .rpgCostChip{
  display:inline-flex;align-items:center;gap:3px;padding:2px 5px;
  background:#1e1a16;border:1px solid #5a4a38;font-size:10px;color:#f4e6c2;
}
.benchCost .rpgCostChip img{width:12px;height:12px;image-rendering:pixelated}
.benchCost .rpgCostChip.ok{border-color:#3d5a40}
.benchCost .rpgCostChip.no{color:#e17676;border-color:#6a3030}
.benchCost .rpgCostChip i{font-style:normal;color:#cbb892;font-size:8px}
.benchMake{
  font-size:9px;letter-spacing:1.2px;text-transform:uppercase;
  padding:6px 8px;border:1px solid #8d6e48;background:#2a2218;color:#ead27d;white-space:nowrap;
}
#benchOverlay .benchMake{font-size:8px;letter-spacing:.9px;padding:4px 6px}
.benchRecipe.ok .benchMake{background:#2c3a28;border-color:#6a8a58;color:#d8f0c8}
.benchRecipe.no .benchMake{background:#3a2220;border-color:#6a3030;color:#e17676}

/* ===== FORNACE ===== */
#furnaceOverlay.overlay{
  z-index:133;display:flex;align-items:flex-start;justify-content:center;
  padding:28px 18px 108px;background:transparent;pointer-events:none;
}
#furnaceOverlay.is-open{pointer-events:auto}
#furnaceOverlay .invVeil{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 22%,rgba(40,18,10,.18),rgba(6,6,5,.52));
  opacity:0;transition:opacity .22s ease;
}
#furnaceOverlay.is-open .invVeil{opacity:1;pointer-events:auto}
#furnaceOverlay .inventoryWindow.rpgFurnace{
  width:min(420px,90vw)!important;padding:14px 14px 12px!important;
  opacity:0;transform:translateY(12px) scale(.97);
  transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .22s ease;
}
#furnaceOverlay.is-open .inventoryWindow.rpgFurnace{opacity:1;transform:translateY(0) scale(1)}
#furnaceOverlay .rpgInvCorner{
  position:absolute;width:12px;height:12px;z-index:6;pointer-events:none;
  border:2px solid #ead27d;box-shadow:0 0 10px rgba(232,202,118,.22);
}
#furnaceOverlay .rpgInvCorner.tl{top:6px;left:6px;border-right:0;border-bottom:0}
#furnaceOverlay .rpgInvCorner.tr{top:6px;right:6px;border-left:0;border-bottom:0}
#furnaceOverlay .rpgInvCorner.bl{bottom:6px;left:6px;border-right:0;border-top:0}
#furnaceOverlay .rpgInvCorner.br{bottom:6px;right:6px;border-left:0;border-top:0}
#furnaceOverlay .rpgInvShine{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(circle at 42% 18%,rgba(255,160,70,.12),transparent 44%);
}
.furnaceBody{display:flex;flex-direction:column;gap:12px;padding:6px 2px 4px}
.furnaceForge{
  display:grid;grid-template-columns:1fr 64px 1fr;gap:8px;align-items:center;
  padding:10px 8px;background:linear-gradient(180deg,rgba(28,18,12,.55),rgba(12,10,8,.4));
  border:1px solid rgba(232,202,118,.22);box-shadow:inset 0 1px 0 rgba(255,220,160,.08);
}
.furnaceCol{display:flex;flex-direction:column;align-items:center;gap:6px}
.furnaceLabel{
  font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:#ead27d;
}
.furnaceHint{font-size:9px;color:#cbb892;opacity:.85}
.furnaceSlotRow{display:flex;justify-content:center}
#furnaceOverlay .invSlot{
  width:56px;height:56px;position:relative;
  background:linear-gradient(180deg,#2a221c,#1a1612);
  border:2px solid #1e1612;box-shadow:inset 0 1px 0 rgba(255,244,214,.1),0 0 0 1px #8d6e48;
}
#furnaceOverlay .invSlot img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated}
#furnaceOverlay .invSlot.furnaceHole{
  box-shadow:inset 0 8px 10px rgba(0,0,0,.45),0 0 0 1px #8d6e48;
  background:radial-gradient(circle at 50% 40%,#2c2018,#120e0c);
}
#app.is-slot-dragging #furnaceOverlay .invSlot{cursor:copy}
#furnaceOverlay .invSlot.dropTarget{outline:2px solid #ead27d;box-shadow:0 0 12px rgba(255,140,50,.35)}
#furnaceOverlay .invSlot.is-dragging{opacity:.4}
.furnaceFire{display:flex;flex-direction:column;align-items:center;gap:6px}
.furnaceFlame{
  width:32px;height:44px;
  background:none;border-radius:0;box-shadow:none;
  opacity:.22;filter:grayscale(.85) brightness(.7);
}
#furnaceOverlay.is-lit .furnaceFlame{
  opacity:1;filter:none;
}
.furnaceBar{
  width:56px;height:10px;background:#120e0c;border:2px solid #8d6e48;overflow:hidden;
}
.furnaceBar i{
  display:block;height:100%;width:0;background:linear-gradient(90deg,#8a4020,#e87828 40%,#ffe878);
  box-shadow:0 0 8px rgba(255,140,40,.45);
  transition:width .15s linear;
}
.furnaceOutWrap{display:flex;flex-direction:column;gap:8px;padding:4px 4px 0}
.furnaceOutGrid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:6px;
}
#furnaceOverlay .furnaceOutGrid .invSlot{width:100%;height:48px;cursor:pointer}
.furnaceMenu{
  position:absolute;z-index:20;min-width:156px;padding:6px;
  background:linear-gradient(180deg,#3a342c,#2a241e);
  border:2px solid #1e1612;box-shadow:0 0 0 1px #8d6e48,0 10px 22px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:4px;
}
.furnaceMenu.hidden{display:none}
.furnaceMenu button{
  width:100%;text-align:left;padding:8px 10px;
  background:#2a2218;border:1px solid #8d6e48;color:#f4e6c2;
  font:700 12px "Trebuchet MS",Verdana,Arial,sans-serif;
}
.furnaceMenu button:hover{background:#3a3228;border-color:#ead27d;color:#fff4c8}
.furnaceQty{
  position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:rgba(8,8,6,.45);
}
.furnaceQty.hidden{display:none}
.furnaceQtyCard{
  width:min(280px,86vw);padding:16px 16px 14px;text-align:center;
  background:linear-gradient(180deg,#4a3d30,#2b261f 58%,#171512);
  border:2px solid #1e1612;box-shadow:0 0 0 1px #8d6e48,0 16px 28px rgba(0,0,0,.5);
}
.furnaceQtyCard .eyebrow{font-size:9px;letter-spacing:2px;color:#ead27d;margin-bottom:6px}
.furnaceQtyCard p{margin:0 0 10px;color:#f4e6c2;font-size:13px}
#furnaceQtyInput{
  width:100%;height:40px;text-align:center;font:800 18px "Trebuchet MS",Verdana,sans-serif;
  color:#f4e6c2;background:#1a1612;border:1px solid #8d6e48;outline:none;
}
#furnaceQtyInput:focus{border-color:#ead27d;box-shadow:0 0 0 2px rgba(232,202,118,.25)}
.furnaceQtyBtns{display:flex;gap:8px;margin-top:12px}
.furnaceQtyBtns button{
  flex:1;padding:8px 10px;border:1px solid #8d6e48;background:#2c3a28;color:#d8f0c8;
}
.furnaceQtyBtns .furnaceQtyGhost{background:#2a2218;color:#cbb892}

/* ===== LEDGER MENUS — MAIN / PAUSE / SAVE / LOAD / ATELIER ===== */
#menu::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 42%,rgba(6,8,7,.32) 78%,rgba(4,5,4,.58) 100%);
}
.menuStage{animation:menuRise .72s cubic-bezier(.16,1,.3,1) both}
@keyframes menuRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rpgLedger{
  position:relative;
  background:
    repeating-linear-gradient(90deg,rgba(255,236,196,.045) 0 2px,transparent 2px 10px),
    linear-gradient(180deg,#4a3d30 0%,#2b261f 48%,#171512 100%);
  border:2px solid #1e1612;
  box-shadow:
    0 0 0 1px #8d6e48,
    0 0 0 3px #1e1612,
    inset 0 1px 0 rgba(255,244,214,.18),
    inset 0 0 0 4px rgba(28,22,16,.5),
    inset 0 0 0 5px rgba(232,202,118,.28),
    0 26px 60px rgba(0,0,0,.6);
}
.rpgLedger::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 38% 12%,rgba(255,240,200,.14),transparent 42%);
}
.rpgCorner{
  position:absolute;width:12px;height:12px;z-index:6;pointer-events:none;
  border:2px solid #ead27d;box-shadow:0 0 10px rgba(232,202,118,.22);
}
.heroFrame > .rpgCorner{position:absolute;z-index:6}
.rpgCorner.tl{top:6px;left:6px;border-right:0;border-bottom:0}
.rpgCorner.tr{top:6px;right:6px;border-left:0;border-bottom:0}
.rpgCorner.bl{bottom:6px;left:6px;border-right:0;border-top:0}
.rpgCorner.br{bottom:6px;right:6px;border-left:0;border-top:0}
.rpgBuckle{
  position:relative;z-index:3;display:flex;align-items:center;gap:8px;
  margin:2px 4px 10px;flex:0 0 auto;
}
.rpgBuckle i{
  flex:1;height:3px;
  background:linear-gradient(90deg,transparent,#8d6a4b,#ead27d,#8d6a4b,transparent);
  box-shadow:0 1px 0 #1e1612;
}
.rpgBuckle b{
  width:12px;height:12px;flex:0 0 12px;transform:rotate(45deg);
  background:#e8ca76;border:2px solid #1e1612;
  box-shadow:inset 1px 1px 0 #fff4c8,0 0 10px rgba(232,202,118,.35);
}

.menuCard.rpgLedger{padding:10px 16px 12px;max-width:320px}
.menuCard > *:not(.rpgCorner){position:relative;z-index:3}
.menuCard button,
#pauseSidebar button,
.modalBox .btn,
.heroGhost,.heroReady,.heroIconBtn,.heroCat{
  width:100%;padding:10px 14px;letter-spacing:1.4px;
  border:2px solid #1e1612;
  background:linear-gradient(180deg,#8d6a4b,#64472f);
  box-shadow:inset 0 0 0 1px #b38b60,inset 0 1px 0 rgba(255,244,214,.22),0 5px 0 #1a140f;
  color:#fff4d2;text-shadow:0 1px 0 #2a1b14;
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;
}
#pauseSidebar button{
  padding:9px 12px;letter-spacing:1.3px;
}
.menuCard button:hover,
#pauseSidebar button:hover,
.modalBox .btn:hover,
.heroReady:hover,.heroGhost:hover,.heroIconBtn:hover{
  transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:inset 0 0 0 1px #ead27d,inset 0 1px 0 rgba(255,244,214,.28),0 7px 0 #1a140f,0 0 16px rgba(232,202,118,.28);
}
.menuCard button:active,
#pauseSidebar button:active,
.modalBox .btn:active{transform:translateY(1px);box-shadow:inset 0 0 0 1px #b38b60,0 2px 0 #1a140f}
.menuCta,.heroReady{
  box-shadow:inset 0 0 0 1px #ead27d,inset 0 1px 0 rgba(255,244,214,.28),0 5px 0 #1a140f,0 0 14px rgba(232,202,118,.22);
  animation:ctaPulse 2.6s ease-in-out infinite;
  background:linear-gradient(180deg,#c4a056,#8a5c2e);
  color:#fff8e4;
}
.menuCard button{
  background:linear-gradient(180deg,#7a5a3f,#513820);
}
.menuCard .menuCta{
  padding:11px 14px;font-size:13px;letter-spacing:2px;
  background:linear-gradient(180deg,#c4a056,#8a5c2e);
}
@keyframes ctaPulse{
  0%,100%{box-shadow:inset 0 0 0 1px #ead27d,inset 0 1px 0 rgba(255,244,214,.28),0 5px 0 #1a140f,0 0 10px rgba(232,202,118,.18)}
  50%{box-shadow:inset 0 0 0 1px #fff1a0,inset 0 1px 0 rgba(255,244,214,.4),0 5px 0 #1a140f,0 0 22px rgba(232,202,118,.48)}
}
.secondaryBtn,.modalBox .btn.secondaryBtn,.heroGhost{
  background:linear-gradient(180deg,#5f6258,#3d413b)!important;
  box-shadow:inset 0 0 0 1px #8a8d82,inset 0 1px 0 rgba(255,255,255,.12),0 5px 0 #1a1c18!important;
  color:#eadab7!important;animation:none!important;
}
#menuMsg{
  min-height:16px;margin:0;padding:4px 12px;
  font-size:11px;letter-spacing:.4px;color:#ead27d;
  text-shadow:0 1px 0 #120e0b,0 0 12px rgba(232,202,118,.25);
}

#pauseVeil{
  position:absolute;inset:0;z-index:318;
  background:rgba(6,8,7,.52);backdrop-filter:blur(3px);
  opacity:1;transition:opacity .3s ease;
}
#pauseVeil.hidden{
  display:block!important;opacity:0;pointer-events:none;visibility:hidden;
}
#pauseSidebar{
  position:absolute;top:10px;right:10px;bottom:10px;width:268px;z-index:322!important;
  padding:12px 14px 10px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:5px;
  border-radius:4px;
  transform:translateX(0);opacity:1;
  transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .28s ease;
}
#pauseSidebar.hidden{
  display:flex!important;transform:translateX(108%);opacity:0;pointer-events:none;visibility:hidden;
}
#pauseSidebar>*:not(.rpgCorner){position:relative;z-index:3}
#pauseSidebar::after{
  content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,transparent,#ead27d,transparent);opacity:.55;
}
.pauseBrand{display:flex;justify-content:center;line-height:0;margin-bottom:2px}
.pauseEyebrow{font-size:8px;letter-spacing:3px;color:#d7c49a;text-align:center}
.pauseTitle{
  margin:0;letter-spacing:2px;text-align:center;color:#f3e2b4;
  text-shadow:2px 2px #171310,0 0 16px rgba(232,202,118,.22);
}
.pauseWorld{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  margin:0 0 6px;padding:8px;
  background:rgba(12,10,8,.38);border:1px solid rgba(232,202,118,.2);
  box-shadow:inset 0 1px 0 rgba(255,244,214,.06);
}
.pauseStat{display:flex;flex-direction:column;gap:2px;text-align:center;min-width:0}
.pauseStat span{font-size:7px;letter-spacing:1.8px;color:#cbb892}
.pauseStat strong{font-size:14px;letter-spacing:1px;color:#fff4d2;text-shadow:0 1px 0 #120e0b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pauseHint{margin-top:8px;text-align:center;font-size:8px;letter-spacing:1.6px;color:#a89f8d}

#modal{
  z-index:380!important;pointer-events:auto;
  background:rgba(6,8,7,.62);backdrop-filter:blur(4px);
}
#modal.hidden{display:none!important;visibility:hidden!important;pointer-events:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#app.is-companion-talk #modal{display:none!important;visibility:hidden!important;pointer-events:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#modal .modalBox.rpgLedger{
  width:min(420px,86%);padding:18px 18px 16px;max-height:min(560px,88%);
  display:flex;flex-direction:column;overflow:hidden;
  animation:menuRise .45s cubic-bezier(.16,1,.3,1) both;
}
#modal .modalBox > *:not(.rpgCorner){position:relative;z-index:3}
#modal .modalBox > .rpgCorner{position:absolute}
.modalBrand{display:flex;align-items:center;gap:12px;margin:0 0 4px}
.modalTitle{flex:1;text-align:left}
.modalBrand .eyebrow,.modalTitle .eyebrow{font-size:8px;letter-spacing:2.4px;color:#d7c49a}
.modalBrand h2,.modalTitle h2{
  margin:2px 0 0;letter-spacing:2px;color:#f3e2b4;
  text-shadow:2px 2px #171310,0 0 12px rgba(232,202,118,.16);
}
.modalLead{margin:0 0 10px;line-height:1.45;color:#eadab7;text-align:left;opacity:.9}
.modalRow{display:flex;gap:8px;margin-bottom:10px}
.modalRow input{
  flex:1;min-width:0;padding:11px 12px;
  background:linear-gradient(180deg,#e9dfc2,#d9cdb0);border:2px solid #1e1612;
  color:#2b2024;font:800 12px "Trebuchet MS",Verdana,sans-serif;letter-spacing:.3px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.18),0 0 0 1px #8d6e48;
}
.modalRow input:focus{outline:none;box-shadow:inset 0 2px 6px rgba(0,0,0,.18),0 0 0 1px #ead27d,0 0 12px rgba(232,202,118,.28)}
.modalRow .btn{width:auto;flex:0 0 auto;padding:11px 16px}
.slotList::-webkit-scrollbar-thumb{background:#8d6a4b;border:1px solid #1e1612}
.cmpBondPanel{flex-shrink:0;margin:0 0 12px;padding:10px 12px;background:linear-gradient(180deg,rgba(36,28,22,.92),rgba(24,18,14,.88));border:2px solid #1e1612;box-shadow:inset 0 0 0 1px rgba(206,168,110,.22)}
.cmpBondRow{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:center;margin:0 0 8px;font-size:11px;color:#e8dcc8}
.cmpBondRow:last-child{margin-bottom:0}
.cmpBondLbl{font-weight:700;letter-spacing:.4px;color:#fff0c8;text-shadow:0 1px 0 #120e0b}
.cmpBondTrack{position:relative;display:block;width:100%;min-width:0;height:16px;background:#2a2218;border:2px solid #4a3828;box-shadow:inset 0 2px 5px rgba(0,0,0,.55);overflow:hidden;border-radius:3px}
.cmpBondTrack::after{content:'';position:absolute;inset:1px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(255,240,200,.06) 0 6px,transparent 6px 12px);pointer-events:none}
.cmpBondTrack.cmpBondFull{box-shadow:inset 0 2px 5px rgba(0,0,0,.55),0 0 8px rgba(232,202,118,.35)}
.cmpBondFill{position:relative;z-index:1;display:block;height:100%;min-width:0;transition:width .45s ease;border-radius:1px}
.cmpBondFill.cmpBondFill--friend,.cmpBondFill.friend{background:linear-gradient(90deg,#3d6a3d,#7bc068,#b8e0a8)}
.cmpBondFill.cmpBondFill--love,.cmpBondFill.love{background:linear-gradient(90deg,#8a3a4a,#d07088,#efb0bc)}
.slotList{flex:1;overflow:auto;max-height:min(280px,38vh);padding-right:2px;margin-bottom:10px}
.slotList::-webkit-scrollbar{width:8px}
.slotList::-webkit-scrollbar-thumb{background:#8d6a4b;border:1px solid #1e1612}
.slotRow{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:linear-gradient(180deg,#4d4037,#322823);border:2px solid #1e1612;
  box-shadow:inset 0 0 0 1px rgba(206,168,110,.35),0 3px 0 #1a140f;
  padding:10px 10px;margin:0 0 8px;
}
.slotMeta{text-align:left;min-width:0}
.slotMeta b{display:block;font-size:13px;letter-spacing:.6px;color:#fff4d2;text-shadow:0 1px 0 #120e0b}
.slotMeta small{display:block;margin-top:3px;font-size:9px;letter-spacing:.3px;color:#cbb892}
.slotRow .btn{width:auto;flex:0 0 auto;padding:9px 12px;font-size:11px;animation:none}
.slotActions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.slotDel{
  width:34px;height:34px;padding:0;flex:0 0 34px;flex-shrink:0;display:grid;place-items:center;
  border:2px solid #1e1612;cursor:pointer;color:#ead27d;
  background:linear-gradient(180deg,#5c3a34,#3e2a22);
  box-shadow:inset 0 0 0 1px rgba(232,202,118,.22),0 3px 0 #1a140f;
}
.slotDel:focus-visible{outline:2px solid #ead27d;outline-offset:1px}
.slotDel svg{width:15px;height:15px;display:block}
.slotDel:hover{background:linear-gradient(180deg,#a85a52,#6b322c);color:#fff4d2}
.slotDel:active{transform:translateY(1px);box-shadow:inset 0 0 0 1px rgba(232,202,118,.22),0 2px 0 #1a140f}
.slotRow .slotLoad{
  box-shadow:inset 0 0 0 1px #ead27d,inset 0 1px 0 rgba(255,244,214,.22),0 4px 0 #1a140f,0 0 10px rgba(232,202,118,.16);
}
.slotEmpty{
  padding:22px 12px;text-align:center;
  background:rgba(12,10,8,.35);border:1px dashed rgba(232,202,118,.28);
}
.slotEmpty b{display:block;font-size:13px;letter-spacing:1px;color:#f3e2b4}
.slotEmpty p{margin:6px 0 0;font-size:10px;color:#cbb892}
#modal .secondaryBtn{width:100%}
.saveConfirm{
  position:absolute;inset:0;z-index:12;
  display:grid;place-items:center;
  background:rgba(8,7,6,.78);
  padding:16px;
}
.saveConfirm.hidden{display:none!important}
.saveConfirmCard{
  width:min(300px,94%);
  padding:16px 16px 14px;
  text-align:center;
}
.saveConfirmCard > *:not(.rpgCorner){position:relative;z-index:3}
.saveConfirmCard p{
  margin:4px 0 14px;
  font-size:12px;line-height:1.5;color:#eadab7;
}
.saveConfirmCard p b{color:#fff4d2}
.saveConfirmRow{display:flex;flex-direction:column;gap:8px}
.saveConfirmRow .btn{width:100%}


#heroAtelier{
  z-index:420;
  background:radial-gradient(ellipse at 50% 40%,rgba(12,14,12,.28),rgba(6,8,7,.78));
  backdrop-filter:blur(5px);
}
#heroAtelier .heroFrame.rpgLedger{
  width:min(1020px,100%);height:min(612px,100%);overflow:hidden;
  display:grid;grid-template-columns:270px 1fr;
  padding:0;border-radius:2px;
}
#heroAtelier .heroFrame.rpgLedger::before{z-index:2}
#heroAtelier .heroPreviewPane,#heroAtelier .heroStudio{position:relative;z-index:3}
#heroAtelier .heroStudio{min-height:0;overflow:hidden}
#heroAtelier .heroSex button.on{background:linear-gradient(#8d6a4b,#64472f);color:#fff4d2;box-shadow:inset 0 0 0 1px #ead27d}
#heroAtelier .heroCoins{background:rgba(12,10,8,.5);border:1px solid rgba(232,202,118,.28)}
#heroAtelier .heroCats{grid-template-columns:repeat(4,1fr);gap:5px}
#heroAtelier .heroOptions{
  grid-template-columns:repeat(4,1fr);gap:6px;overflow-y:auto;min-height:0;padding-right:6px;
  scrollbar-width:thin;scrollbar-color:#8d6a4b #1a140f;
}
#heroAtelier .heroOptions::-webkit-scrollbar{width:8px}
#heroAtelier .heroOptions::-webkit-scrollbar-track{background:#1a140f}
#heroAtelier .heroOptions::-webkit-scrollbar-thumb{background:linear-gradient(#8d6a4b,#64472f);border:1px solid #ead27d}
#heroAtelier .heroPreviewPane{
  padding:14px 14px 16px;
  background:linear-gradient(180deg,rgba(28,24,18,.55),rgba(14,12,10,.62));
  border-right:1px solid rgba(232,202,118,.22);
}
#heroAtelier .heroEyebrow{font-size:8px;letter-spacing:2.6px;color:#d7c49a}
#heroAtelier .heroPreviewPane h2{
  margin:2px 0 0;font-size:22px;letter-spacing:3px;color:#f3e2b4;
  text-shadow:2px 2px #171310,0 0 12px rgba(232,202,118,.16);
}
#heroAtelier .heroDais{
  width:184px;height:248px;margin-top:2px;
  background:
    radial-gradient(ellipse at 50% 78%,rgba(232,202,118,.16),transparent 52%),
    repeating-linear-gradient(90deg,#3a342c 0 8px,#322c26 8px 16px),
    linear-gradient(180deg,#4a4238,#25201c);
  border:2px solid #1e1612;
  box-shadow:inset 0 0 0 1px #8d6e48,inset 0 0 0 5px rgba(232,202,118,.2),0 14px 28px #0008;
}
#heroAtelier .heroDais::after{
  content:"";position:absolute;inset:5px;border:1px solid rgba(232,202,118,.16);pointer-events:none;
}
#heroAtelier .heroRug{
  background:radial-gradient(ellipse at 50% 50%,rgba(232,202,118,.35),#7a4e48 42%,#5c3a34 62%,transparent 74%);
}
#heroAtelier .heroCat{
  padding:7px 2px;font-size:7px;width:auto;animation:none;letter-spacing:.35px;
  background:linear-gradient(#3f342c,#2c241e);color:#eadab7;
  box-shadow:inset 0 0 0 1px rgba(180,145,106,.28),0 3px 0 #1a140f;
}
#heroAtelier .heroCat.on{
  background:linear-gradient(#8d6a4b,#64472f);color:#fff4d2;
  box-shadow:inset 0 0 0 1px #ead27d,0 3px 0 #30241f;
}
#heroAtelier .heroCard{
  background:linear-gradient(180deg,#4a3b32,#322823);
  border:2px solid #1e1612;
  box-shadow:inset 0 0 0 1px rgba(206,168,110,.28),0 4px 0 #1a140f;
}
#heroAtelier .heroCard.sel{
  outline:none;border-color:#ead27d;
  box-shadow:inset 0 0 0 1px #ead27d,0 0 0 1px #5b472d,0 4px 0 #1a140f,0 0 14px rgba(232,202,118,.28);
}
#heroAtelier .heroBar{border-top:1px solid rgba(232,202,118,.22)}
#heroAtelier .heroIconBtn{width:36px;height:32px;padding:0;animation:none}
#heroAtelier .heroLookName{
  background:rgba(12,10,8,.42);border:1px solid rgba(232,202,118,.22);
  box-shadow:inset 0 1px 0 rgba(255,244,214,.06);
}

@media (max-width:900px){
  .brandLogo--menu{width:150px;max-height:136px}
  #pauseSidebar{width:min(248px,46vw)}
  .menuCard.rpgLedger{max-width:300px}
}

.pauseTrack{
  margin:0 0 4px;text-align:center;font-size:8px;letter-spacing:1.2px;color:#ead27d;
  text-shadow:0 1px 0 #120e0b;opacity:.88;
}
#pauseSidebar .pauseTitle{letter-spacing:2px}

#settingsOverlay{
  position:absolute;inset:0;z-index:380;display:flex;align-items:center;justify-content:center;
  padding:12px;
}
#settingsOverlay.hidden{display:none!important}
.settingsVeil{
  position:absolute;inset:0;background:rgba(6,8,7,.58);backdrop-filter:blur(4px);
}
.settingsFrame.rpgLedger{
  position:relative;z-index:2;width:min(520px,94%);max-height:min(600px,94%);
  display:flex;flex-direction:column;padding:14px 16px 12px;overflow:hidden;
  animation:menuRise .42s cubic-bezier(.16,1,.3,1) both;
}
.settingsFrame > *:not(.rpgCorner){position:relative;z-index:3}
.settingsFrame > .rpgCorner{position:absolute}
.settingsTop{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.settingsTitle{flex:1;min-width:0;text-align:left}
.settingsTitle .eyebrow{font-size:8px;letter-spacing:2.4px;color:#d7c49a}
.settingsTitle h2{
  margin:2px 0 0;letter-spacing:2px;color:#f3e2b4;
  text-shadow:2px 2px #171310,0 0 12px rgba(232,202,118,.16);
}
.settingsNow{
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2px 12px;
  align-items:center;margin:0 0 10px;padding:8px 10px;
  background:rgba(12,10,8,.4);border:1px solid rgba(232,202,118,.22);
  box-shadow:inset 0 1px 0 rgba(255,244,214,.06);
}
.settingsNow span{grid-column:1;font-size:7px;letter-spacing:1.8px;color:#cbb892}
.settingsNow>b{grid-column:1;font-size:12px;letter-spacing:1px;color:#fff4d2;text-shadow:0 1px 0 #120e0b}
.settingsNow .eq{grid-column:2;grid-row:1 / span 2;display:flex;gap:3px;align-items:flex-end;height:18px}
.settingsNow .eq b{
  display:block;width:3px;background:#ead27d;box-shadow:0 0 6px rgba(232,202,118,.45);
  animation:eqPulse .7s ease-in-out infinite alternate;
}
.settingsNow .eq b:nth-child(2){animation-delay:.12s}
.settingsNow .eq b:nth-child(3){animation-delay:.24s}
.settingsNow .eq b:nth-child(4){animation-delay:.36s}
@keyframes eqPulse{from{height:4px}to{height:18px}}
#settingsOverlay.is-muted .eq b,#app.reduce-motion .eq b{animation:none;height:7px;opacity:.35}
.settingsTabs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px}
.settingsTab{
  padding:8px 4px;font-size:9px;letter-spacing:1px;width:auto;
  border:2px solid #1e1612;background:linear-gradient(#3f342c,#2c241e);color:#eadab7;
  box-shadow:inset 0 0 0 1px rgba(180,145,106,.28),0 3px 0 #1a140f;
}
.settingsTab:hover{filter:brightness(1.08)}
.settingsTab.on{
  background:linear-gradient(#8d6a4b,#64472f);color:#fff4d2;
  box-shadow:inset 0 0 0 1px #ead27d,0 3px 0 #30241f;
}
.langGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.langOpt{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;text-align:left;width:100%;
  border:2px solid #1e1612;background:linear-gradient(#3f342c,#2c241e);color:#eadab7;
  box-shadow:inset 0 0 0 1px rgba(180,145,106,.28),0 3px 0 #1a140f;
  font-size:11px;letter-spacing:.3px;
}
.langOpt:hover{filter:brightness(1.08)}
.langOpt.on{
  background:linear-gradient(#8d6a4b,#64472f);color:#fff4d2;
  box-shadow:inset 0 0 0 1px #ead27d,0 3px 0 #30241f;
}
.langOpt small{font-size:8px;letter-spacing:.8px;color:#cbb892}
.langOpt.on small{color:#ead27d}
.langOpt[data-lang="auto"]{grid-column:1/-1}
.settingsBody{flex:1;min-height:0;overflow:auto;padding-right:4px}
.settingsBody::-webkit-scrollbar{width:8px}
.settingsBody::-webkit-scrollbar-thumb{background:#8d6a4b;border:1px solid #1e1612}
.setSection{margin:0 0 12px}
.setSection h3{
  margin:0 0 8px;font-size:8px;letter-spacing:2.2px;color:#d7c49a;font-weight:800;
  text-align:left;
}
.setRow{
  display:grid;grid-template-columns:minmax(108px,1fr) minmax(168px,1.15fr) 46px;gap:8px;align-items:center;
  margin:0 0 8px;padding:7px 8px;
  background:rgba(12,10,8,.28);border:1px solid rgba(232,202,118,.14);
}
.setRow label{text-align:left;font-size:11px;letter-spacing:.4px;color:#f4e6c2}
.setRow .setVal{
  font-size:11px;color:#ead27d;text-align:right;font-weight:800;
  font-variant-numeric:tabular-nums;min-width:42px;letter-spacing:.2px;
}
.setRow input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;cursor:pointer;
  --vol:0%;
  background:
    linear-gradient(#f0d78a,#c9a24e) 0 / var(--vol) 100% no-repeat,
    linear-gradient(90deg,#1a140f,#3a3028);
  border:1px solid rgba(232,202,118,.35);
  box-shadow:inset 0 1px 3px #0008;
  border-radius:1px;
  accent-color:#e8ca76;
}
.setRow input[type=range]:focus{outline:none}
.setRow input[type=range]:focus-visible{outline:1px solid #ead27d;outline-offset:3px}
.setRow input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;
  transform:rotate(45deg);background:#e8ca76;border:2px solid #1e1612;
  box-shadow:inset 1px 1px 0 #fff4c8,0 0 8px rgba(232,202,118,.4);
}
.setRow input[type=range]::-moz-range-track{
  height:8px;border:1px solid rgba(232,202,118,.35);border-radius:1px;
  background:linear-gradient(90deg,#1a140f,#3a3028);box-shadow:inset 0 1px 3px #0008;
}
.setRow input[type=range]::-moz-range-progress{
  height:8px;border-radius:1px;background:linear-gradient(#f0d78a,#c9a24e);
}
.setRow input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border:2px solid #1e1612;border-radius:1px;
  background:#e8ca76;box-shadow:inset 1px 1px 0 #fff4c8,0 0 8px rgba(232,202,118,.4);
}
@supports (-moz-appearance:none){
  .setRow input[type=range]{background:#1a140f;height:8px}
}
.setRow.toggle{grid-template-columns:1fr auto}
.setToggle{
  width:auto!important;min-width:64px;padding:7px 12px!important;font-size:10px;letter-spacing:1px;
  border:2px solid #1e1612;background:linear-gradient(#5f6258,#3d413b);color:#eadab7;
  box-shadow:inset 0 0 0 1px #8a8d82,0 3px 0 #1a1c18;
}
.setToggle.on{
  background:linear-gradient(#8d6a4b,#64472f);color:#fff4d2;
  box-shadow:inset 0 0 0 1px #ead27d,0 3px 0 #1a140f;
}
.setKeys{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.setKey{
  display:flex;justify-content:space-between;gap:8px;padding:7px 8px;
  background:rgba(12,10,8,.28);border:1px solid rgba(232,202,118,.14);font-size:10px;
}
.setKey b{color:#ead27d;letter-spacing:.6px}
.setKey span{color:#eadab7}
.settingsFoot{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(232,202,118,.2)}
.settingsFoot button{flex:1}
.setHint{margin:4px 0 0;font-size:9px;line-height:1.45;color:#cbb892;text-align:left}

/* ===== RPG BRASS GPS DIAL ===== */
#minimapWrap.gpsDial{
  position:absolute;top:6px;right:6px;z-index:25;
  width:220px;height:220px;pointer-events:none;
  overflow:visible;
}
.gpsBezel{
  position:absolute;inset:0;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,244,214,.05) 0deg .22deg, transparent .22deg 1.9deg),
    radial-gradient(circle at 46% 30%, #8a6a4c 0%, #5a4434 38%, #3a2c22 68%, #231c18 100%);
  border:2px solid #1e1612;
  box-shadow:
    0 0 0 1px #c4a06a,
    0 0 0 3px #1e1612,
    inset 0 1px 0 rgba(255,244,214,.3),
    inset 0 0 18px rgba(0,0,0,.34),
    0 10px 22px rgba(0,0,0,.48);
}
.gpsBezel::before{
  content:"";position:absolute;inset:16px;border-radius:50%;pointer-events:none;
  border:2px solid #1e1612;
  box-shadow:
    0 0 0 1px #ead27d,
    0 0 0 3px #2a2018,
    inset 0 0 0 2px #1a1410,
    inset 0 0 18px rgba(0,0,0,.45);
}
.gpsBezel::after{
  content:"";position:absolute;inset:6px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(255,244,214,.16);
}
.gpsTick{
  position:absolute;z-index:2;background:#ead27d;box-shadow:0 0 0 1px #1e1612;
}
.gpsTick.n{left:50%;top:7px;width:2px;height:9px;margin-left:-1px}
.gpsTick.s,.gpsRivet.sv{display:none}
.gpsTick.e{right:7px;top:50%;width:8px;height:2px;margin-top:-1px;opacity:.75}
.gpsTick.o{left:7px;top:50%;width:8px;height:2px;margin-top:-1px;opacity:.75}
.gpsRivet{
  position:absolute;z-index:3;width:8px;height:8px;
  background:linear-gradient(135deg,#fff4c8,#e8ca76 42%,#8d6a3a);
  border:2px solid #1e1612;
  box-shadow:inset 1px 1px 0 #fff6d8;
  transform:rotate(45deg);
}
.gpsRivet.nv{top:26px;left:50%;margin-left:-6px}
.gpsRivet.sv{bottom:26px;left:50%;margin-left:-6px}
.gpsRivet.ev{right:26px;top:50%;margin-top:-6px}
.gpsRivet.ov{left:26px;top:50%;margin-top:-6px}
.gpsGlass{
  position:absolute;z-index:1;top:24px;left:24px;width:172px;height:172px;
  border-radius:50%;overflow:hidden;
  background:#2a658c;border:0;
  box-shadow:0 0 0 2px #14110e,inset 0 0 0 1px rgba(232,202,118,.22),inset 0 0 16px rgba(0,0,0,.35);
}
#minimap{
  position:absolute;inset:0;width:172px;height:172px;display:block;
  border:0;border-radius:50%;background:transparent;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
.gpsShine{
  position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at 30% 22%,rgba(255,244,214,.2),transparent 44%);
  box-shadow:inset 0 0 0 1px rgba(255,244,214,.08);
}
.gpsRose{
  position:absolute;z-index:5;inset:0;pointer-events:none;
  font-size:9px;font-weight:900;letter-spacing:.6px;color:#fff4d2;
  text-shadow:1px 1px 0 #1e1612,0 0 6px rgba(232,202,118,.25);
}
.gpsRose b{position:absolute;line-height:1}
.gpsRose .n{top:3px;left:50%;transform:translateX(-50%);color:#ead27d;font-size:10px}
.gpsRose .s{bottom:32px;left:50%;transform:translateX(-50%);color:#ead27d;font-size:9px}
.gpsRose .e{right:5px;top:50%;transform:translateY(-50%);opacity:.82}
.gpsRose .o{left:5px;top:50%;transform:translateY(-50%);opacity:.82}
.gpsOrbit{
  position:absolute;z-index:7;inset:18px;border-radius:50%;pointer-events:none;
}
.gpsCelestial{
  position:absolute;left:50%;top:0;width:10px;height:10px;margin-left:-6px;
  border:2px solid #1e1612;
}
.gpsCelestial.sun{
  background:linear-gradient(135deg,#fff6d0,#e8ca76 46%,#c48a38);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.45),0 0 10px rgba(232,202,118,.55);
}
.gpsCelestial.moon{
  background:linear-gradient(135deg,#eef3f8,#8fa0b4 55%,#5a6a7a);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.5),0 0 10px rgba(160,190,220,.4);
}
.gpsLegend{
  position:absolute;inset:0;z-index:8;width:100%;height:100%;
  overflow:visible;pointer-events:none;
}
.gpsSouthMark{
  fill:#ead27d;stroke:#1e1612;stroke-width:1.15;
}
.gpsDayText,.gpsTimeText{
  font-family:"Trebuchet MS",Verdana,Arial,sans-serif;
  font-weight:800;
  paint-order:stroke fill;
  stroke:#171310;stroke-width:1.7;stroke-linejoin:round;
}
.gpsDayText{
  fill:#e8ca76;font-size:9px;
}
.gpsDayText tspan{fill:#fff1c4;font-size:10.4px}
.gpsTimeText{
  fill:#fff1c4;font-size:9.7px;
}
.gpsZoom{
  position:absolute;z-index:12;top:2px;right:-3px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:5px 4px 6px;
  pointer-events:auto;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,244,214,.16), transparent 52%),
    linear-gradient(180deg,#6a5040 0%,#3e2e24 55%,#2a2018 100%);
  border:2px solid #1e1612;
  border-radius:16px;
  box-shadow:
    0 0 0 1px #c4a06a,
    inset 1px 1px 0 rgba(255,244,214,.28),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 4px 10px rgba(0,0,0,.35);
}
.gpsZoom::before{
  content:"";position:absolute;inset:3px;border-radius:13px;pointer-events:none;
  border:1px solid rgba(232,202,118,.22);
}
.gpsZoomBtn{
  position:relative;z-index:1;
  width:22px;height:22px;padding:0;margin:0;
  border-radius:50%;
  border:2px solid #1e1612;
  background:linear-gradient(135deg,#fff4c8,#e8ca76 42%,#8d6a3a);
  box-shadow:inset 1px 1px 0 #fff6d8,0 1px 0 #5a4030;
  color:#1e1612;
  font:900 15px/1 "Trebuchet MS",Verdana,sans-serif;
  cursor:pointer;
  display:grid;place-items:center;
  -webkit-appearance:none;appearance:none;
}
.gpsZoomBtn:hover{filter:brightness(1.08)}
.gpsZoomBtn:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 3px rgba(30,22,18,.4);
}
.gpsZoomBtn:disabled{
  opacity:.38;cursor:default;filter:none;transform:none;
}
.gpsZoomBtn:focus-visible{outline:2px solid #ead27d;outline-offset:1px}
@media(max-width:900px){
  #minimapWrap.gpsDial{transform:scale(.9);transform-origin:top right}
}
#app.reduce-motion .gpsOrbit,
#app.reduce-motion .gpsCelestial{transition:none!important}

#app.hide-hud #hud{display:none!important}
#app.hide-minimap #minimapWrap{display:none!important}
#app.hide-hints #controlHint,#app.hide-hints #contextHint{display:none!important}
#app.reduce-motion .menuBackdrop,
#app.reduce-motion .menuMotes,
#app.reduce-motion .menuStage,
#app.reduce-motion .menuCta,
#app.reduce-motion .heroReady{animation:none!important}
#app.reduce-motion .settingsFrame{animation:none!important}

#worldSetup{
  position:absolute;inset:0;z-index:390;display:flex;align-items:center;justify-content:center;
  padding:10px;
}
#worldSetup.hidden{display:none!important}
.setupFrame{
  width:min(540px,96%);max-height:min(620px,96%);
}
.setupBody{
  flex:1;min-height:0;overflow:auto;padding-right:4px;margin:0 0 8px;
}
.setupBody::-webkit-scrollbar{width:8px}
.setupBody::-webkit-scrollbar-thumb{background:#8d6a4b;border:1px solid #1e1612}
.setupField{
  display:flex;flex-direction:column;gap:4px;margin:0 0 8px;
  text-align:left;font-size:8px;letter-spacing:1.6px;color:#d7c49a;font-weight:800;
}
.setupField input{
  width:100%;padding:10px 12px;
  background:linear-gradient(180deg,#e9dfc2,#d9cdb0);border:2px solid #1e1612;
  color:#2b2024;font:800 13px "Trebuchet MS",Verdana,sans-serif;letter-spacing:.3px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.18),0 0 0 1px #8d6e48;
}
.setupField input:focus{outline:none;box-shadow:inset 0 2px 6px rgba(0,0,0,.18),0 0 0 1px #ead27d,0 0 12px rgba(232,202,118,.28)}
.setupPicks{display:flex;gap:6px;flex-wrap:wrap}
.setupPicks button{
  flex:1;min-width:0;padding:9px 6px;font-size:10px;letter-spacing:.8px;width:auto;
  border:2px solid #1e1612;background:linear-gradient(#3f342c,#2c241e);color:#eadab7;
  box-shadow:inset 0 0 0 1px rgba(180,145,106,.28),0 3px 0 #1a140f;
}
.setupPicks button:hover{filter:brightness(1.08)}
.setupPicks button.on{
  background:linear-gradient(#8d6a4b,#64472f);color:#fff4d2;
  box-shadow:inset 0 0 0 1px #ead27d,0 3px 0 #30241f;
}
.setupTime button{flex:1 1 14%;padding:8px 2px;letter-spacing:0}
.setupHint{
  margin:6px 0 0;min-height:28px;text-align:left;
  font-size:10px;line-height:1.4;color:#eadab7;opacity:.92;
}

/* BOOT / LOADING */
#bootLoad{
  position:absolute;inset:0;z-index:900;
  display:flex;align-items:center;justify-content:center;
  background:#080a09;overflow:hidden;text-align:center;
  pointer-events:auto;opacity:0;
  transition:opacity .28s ease-out;
}
#bootLoad.hidden{display:none!important;opacity:0;transition:none}
#bootLoad.bootOn{opacity:1}
#bootLoad.bootOut{opacity:0;pointer-events:none;transition:opacity .45s ease-in}
#app.is-booting #menu,
#app.is-booting #worldSetup,
#app.is-booting #heroAtelier,
#app.is-booting #settingsOverlay,
#app.is-booting #modal,
#app.is-booting #pauseSidebar,
#app.is-booting #pauseVeil{
  visibility:hidden!important;pointer-events:none!important;
}
.bootLoadScene{
  position:absolute;inset:-10%;pointer-events:none;
  background:url("assets/lone_genesis_2026_showcase.png") center/cover;
  filter:saturate(1.08) contrast(1.06) blur(10px) brightness(.38);
  transform:scale(1.12);
}
.bootLoadVeil{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 42%,rgba(10,16,12,.18),rgba(6,8,7,.78) 62%),
    linear-gradient(180deg,rgba(8,10,9,.35),rgba(6,8,7,.82));
}
.bootLoadGlow{
  position:absolute;inset:-20%;pointer-events:none;
  background:
    radial-gradient(circle at 50% 42%,rgba(232,202,118,.18),transparent 30%),
    radial-gradient(circle at 50% 70%,rgba(70,110,70,.12),transparent 38%),
    radial-gradient(ellipse at 50% 100%,rgba(8,10,9,.92),transparent 48%);
}
.bootLoadDust{
  position:absolute;inset:0;pointer-events:none;opacity:.7;
  background:
    radial-gradient(1.5px 1.5px at 18% 32%,rgba(255,236,180,.55),transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 28%,rgba(232,202,118,.4),transparent 60%),
    radial-gradient(1px 1px at 62% 62%,rgba(255,244,210,.65),transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 74%,rgba(180,220,140,.3),transparent 60%),
    radial-gradient(1px 1px at 88% 70%,rgba(232,202,118,.4),transparent 60%);
  animation:menuMote 10s linear infinite;
}
.bootLoadStage{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  width:min(380px,86%);gap:8px;padding:16px 8px;
}
.bootRing{
  position:relative;width:104px;height:104px;margin:6px 0 4px;
}
.bootRingHalo{
  position:absolute;inset:-10px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(232,202,118,.16),transparent 62%);
  animation:bootHalo 2.2s ease-in-out infinite;
}
@keyframes bootHalo{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.bootRing svg{width:104px;height:104px;display:block;transform:rotate(-90deg);position:relative;z-index:1}
.bootTrack,.bootMarks,.bootInner{
  fill:none;stroke-linecap:round;
}
.bootTrack{stroke:rgba(232,202,118,.18);stroke-width:2.6}
.bootMarks{
  stroke:rgba(234,210,125,.42);stroke-width:2.6;
  stroke-dasharray:2.4 11.2;
}
.bootInner{stroke:rgba(232,202,118,.12);stroke-width:1.4}
.bootArc{
  position:absolute;left:8px;top:8px;z-index:2;
  width:88px;height:88px;border-radius:50%;
  border:3px solid transparent;
  border-top-color:#ead27d;
  border-right-color:rgba(234,210,125,.55);
  box-shadow:0 0 12px rgba(232,202,118,.28);
  animation:bootSpin .9s linear infinite;
  will-change:transform;
}
@keyframes bootSpin{to{transform:rotate(360deg)}}
.bootGem{
  position:absolute;left:50%;top:50%;width:11px;height:11px;z-index:2;
  margin:-5.5px 0 0 -5.5px;transform:rotate(45deg);
  background:linear-gradient(180deg,#fff4d2,#e8ca76);
  border:1px solid #1e1612;
  box-shadow:inset 1px 1px 0 #fff8e4,0 0 12px rgba(232,202,118,.6);
  animation:bootGem 1.6s ease-in-out infinite;
}
@keyframes bootGem{0%,100%{opacity:.75;transform:rotate(45deg) scale(1)}50%{opacity:1;transform:rotate(45deg) scale(1.14)}}
.bootLoadEyebrow{
  margin:8px 0 0;font-size:8px;letter-spacing:3.4px;color:#d7c49a;font-weight:800;
}
.bootLoadLabel{
  margin:0;min-height:24px;font-size:16px;letter-spacing:1.5px;font-weight:800;
  color:#f3e2b4;text-shadow:2px 2px #171310,0 0 18px rgba(232,202,118,.24);
  transition:opacity .2s ease;
}
.bootLoadHint{
  margin:2px 0 0;font-size:10px;letter-spacing:.45px;line-height:1.5;color:#eadab7;opacity:.88;
}
#app.reduce-motion .bootLoadDust,
#app.reduce-motion .bootArc,
#app.reduce-motion .bootGem,
#app.reduce-motion .bootRingHalo{animation:none!important}
#app.reduce-motion #bootLoad{transition:none!important}
#app.reduce-motion .bootArc{border-top-color:#ead27d;border-right-color:#ead27d;opacity:.85}

/* ===== DEV CONSOLE (F8) ===== */
#devConsole{
  position:absolute;inset:0;z-index:940;
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:8vh;
  background:rgba(8,11,10,.52);backdrop-filter:blur(2px);
}
.devWindow{
  position:relative;
  width:min(660px,92vw);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(28,30,25,.98),rgba(18,21,18,.98));
  border:2px solid rgba(236,217,159,.28);
  box-shadow:0 24px 70px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,244,214,.08);
  padding:12px 14px 12px;
}
.devWindow .menuCorner{width:14px;height:14px;opacity:.55}
.devWindow .menuCorner.tl{top:6px;left:6px}
.devWindow .menuCorner.tr{top:6px;right:6px}
.devWindow .menuCorner.bl{bottom:6px;left:6px}
.devWindow .menuCorner.br{bottom:6px;right:6px}
.devTop{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding-bottom:8px;margin-bottom:9px;border-bottom:1px solid var(--line);
}
.devTop h2{margin:2px 0 0;font-size:17px;letter-spacing:2.4px;color:#f3e2b4;text-shadow:2px 2px #171310}
.devLog{
  height:min(300px,38vh);overflow-y:auto;overscroll-behavior:contain;
  padding:9px 10px;margin:0;
  background:rgba(10,13,11,.72);
  border:1px solid rgba(236,217,159,.14);
  box-shadow:inset 0 1px 0 rgba(255,244,214,.05);
  font:400 12px/1.55 "Consolas","SF Mono",Menlo,monospace;
  color:#d8cfba;
  scrollbar-width:thin;scrollbar-color:rgba(232,202,118,.35) transparent;
}
.devLog::-webkit-scrollbar{width:8px}
.devLog::-webkit-scrollbar-thumb{background:rgba(232,202,118,.3)}
.devProf{
  margin:0 0 8px;padding:7px 9px;
  background:rgba(8,12,10,.88);
  border:1px solid rgba(232,202,118,.28);
  font:400 10px/1.45 "Consolas","SF Mono",Menlo,monospace;
  color:#c8e8b8;white-space:pre-wrap;user-select:none;
}
.devProf.hidden{display:none!important}
.devLine{margin:0 0 2px;white-space:pre-wrap;word-break:break-word}
.devLine--echo{color:#9e947f}
.devLine--ok{color:#9ed488}
.devLine--err{color:#e0857f}
.devLine--sys{color:#e8ca76}
.devInputRow{
  display:flex;align-items:center;gap:8px;margin-top:9px;padding:0 10px;
  background:rgba(10,13,11,.72);
  border:1px solid rgba(236,217,159,.22);
  box-shadow:inset 0 1px 0 rgba(255,244,214,.05);
}
.devPrompt{font:800 13px "Consolas","SF Mono",Menlo,monospace;color:#e8ca76;user-select:none}
#devInput{
  flex:1;min-width:0;padding:10px 0;
  background:transparent;border:0;outline:0;
  font:400 13px "Consolas","SF Mono",Menlo,monospace;
  color:#f5eedc;caret-color:#e8ca76;
}
#app.reduce-motion #devConsole{backdrop-filter:none}
@media (max-width:900px){
  .devWindow{width:94vw;padding:10px}
  .devLog{height:34vh;font-size:11px}
}

/* =====================================================================
   FINAL PASS — LEGIBILITY, FOCUS, CONSISTENCY
   The status HUD is intentionally frameless. It still has to stay readable
   over grass, sand, snow and water, so it gets a soft scrim instead of a
   panel: the minimal look survives, the contrast problem does not.
   ===================================================================== */
.statusPanel{
  padding:7px 14px 7px 11px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,rgba(14,17,14,.50),rgba(9,12,10,.62)) !important;
  box-shadow:0 6px 22px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,244,214,.07) !important;
  backdrop-filter:blur(3px) saturate(.92) !important;
  -webkit-backdrop-filter:blur(3px) saturate(.92) !important;
}
.statusRow .bar{
  border:1px solid rgba(6,9,7,.9) !important;
  background:rgba(10,14,11,.88) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.72),0 0 0 1px rgba(255,244,205,.06) !important;
}
.statusRow .bar i{filter:saturate(1.08)}
.statusIcon svg{filter:drop-shadow(0 1px 0 rgba(8,10,8,.95)) drop-shadow(0 0 3px rgba(0,0,0,.5)) !important}

/* Control legend: was grey-on-grass and unreadable. */
#controlHint{
  padding:5px 10px;
  font-size:9px;
  letter-spacing:.5px;
  color:#eadfc6;
  opacity:.9;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(14,17,14,.48),rgba(9,12,10,.6));
  box-shadow:0 4px 14px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,244,214,.06);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  text-shadow:1px 1px 0 #10130f;
}
#app.reduce-motion .statusPanel,
#app.reduce-motion #controlHint{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}

/* One focus treatment for every control, so keyboard users get the same
   affordance everywhere instead of the browser default outline. */
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.invSlot:focus-visible,
.slot:focus-visible{
  outline:2px solid #ead27d;
  outline-offset:2px;
  border-radius:3px;
}
button:disabled,button[disabled]{opacity:.45;cursor:not-allowed;filter:saturate(.5)}

/* Shared scrollbar so every scrollable panel matches the ledger palette. */
#buildUI,.devLog,.setupBody,#settingsBody,.slotList,.inventoryBody,#benchOverlay .benchGrid{
  scrollbar-width:thin;
  scrollbar-color:rgba(232,202,118,.34) transparent;
}
#buildUI::-webkit-scrollbar,.devLog::-webkit-scrollbar,.setupBody::-webkit-scrollbar,
#settingsBody::-webkit-scrollbar,.slotList::-webkit-scrollbar,.inventoryBody::-webkit-scrollbar,#benchOverlay .benchGrid::-webkit-scrollbar{width:9px;height:9px}
#buildUI::-webkit-scrollbar-track,.devLog::-webkit-scrollbar-track,.setupBody::-webkit-scrollbar-track,
#settingsBody::-webkit-scrollbar-track,.slotList::-webkit-scrollbar-track,.inventoryBody::-webkit-scrollbar-track,#benchOverlay .benchGrid::-webkit-scrollbar-track{background:rgba(10,13,11,.5)}
#buildUI::-webkit-scrollbar-thumb,.devLog::-webkit-scrollbar-thumb,.setupBody::-webkit-scrollbar-thumb,
#settingsBody::-webkit-scrollbar-thumb,.slotList::-webkit-scrollbar-thumb,.inventoryBody::-webkit-scrollbar-thumb,#benchOverlay .benchGrid::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(232,202,118,.42),rgba(150,120,64,.42));
  border:1px solid rgba(8,10,8,.7);
}

/* The context prompt sits over the world; give it the same scrim language. */
#contextHint{
  border-radius:999px;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

/* ===== PHONE ONLY (never applied on PC) ===== */
.phoneTurn,.phonePad{display:none!important}
html.is-phone{
  -webkit-text-size-adjust:100%;
  touch-action:manipulation;
}
html.is-phone,html.is-phone body,html.is-phone #app{
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
}
html.is-phone input,html.is-phone textarea{-webkit-user-select:text;user-select:text}
html.is-phone #world{touch-action:none}
html.is-phone #controlHint{display:none!important}
html.is-phone .statusPanel,
html.is-phone #controlHint,
html.is-phone #contextHint{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html.is-phone.is-portrait #phoneTurn{
  display:flex!important;
  position:fixed;inset:0;z-index:5000;
  align-items:center;justify-content:center;
  padding:24px 18px;
  background:#070908;
  background-image:
    radial-gradient(ellipse at 50% 38%,rgba(232,202,118,.12),transparent 42%),
    linear-gradient(180deg,#10140f 0%,#070908 70%);
}
.phoneTurnCard{
  position:relative;z-index:2;width:min(420px,92vw);
  padding:28px 22px 22px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.phoneTurnCard h2{margin:4px 0 0;font-size:22px;letter-spacing:2px;color:#f5eedc;text-shadow:2px 2px #171512}
.phoneTurnHint{margin:0 0 8px;font-size:12px;color:#eadab7;letter-spacing:.4px;max-width:28em}
.phoneTurnCard .menuCta{width:min(240px,80%);margin-top:6px}
.phoneTurnGlyph{width:88px;height:88px;display:grid;place-items:center;margin-bottom:4px}
.phoneTurnDevice{
  display:block;width:36px;height:58px;border-radius:7px;
  border:3px solid #ead27d;background:linear-gradient(180deg,#2a221c,#161310);
  box-shadow:0 8px 18px #0008,inset 0 0 0 1px #5a4636;
  animation:phoneTurnSpin 1.6s ease-in-out infinite;
}
.phoneTurnDevice i{
  display:block;width:10px;height:3px;margin:5px auto 0;border-radius:2px;background:#ead27d;opacity:.85;
}
@keyframes phoneTurnSpin{
  0%,18%{transform:rotate(0deg)}
  45%,70%{transform:rotate(90deg)}
  100%{transform:rotate(90deg)}
}
html.is-phone.reduce-motion .phoneTurnDevice,html.is-phone #app.reduce-motion .phoneTurnDevice{animation:none;transform:rotate(90deg)}
html.is-phone.is-landscape #phonePad{
  display:block!important;
  position:absolute;inset:0;z-index:80;pointer-events:none;
  contain:strict;
}
.phoneStick{
  position:absolute;left:max(12px,env(safe-area-inset-left));
  bottom:max(12px,env(safe-area-inset-bottom));
  width:128px;height:128px;pointer-events:auto;touch-action:none;
  contain:strict;
}
.phoneStickRing{
  position:absolute;inset:8px;border-radius:50%;
  border:3px solid rgba(234,210,125,.55);
  background:radial-gradient(circle at 50% 42%,rgba(42,36,28,.35),rgba(8,10,9,.55));
  box-shadow:0 8px 20px #0007,inset 0 0 0 2px #1e1612;
}
.phoneStickKnob{
  position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;
  border-radius:50%;pointer-events:none;will-change:transform;
  background:linear-gradient(180deg,#c4a072,#6a4a32);
  border:3px solid #1e1612;
  box-shadow:inset 0 2px 0 rgba(255,244,210,.28),0 4px 10px #0008;
}
.phoneActs{
  position:absolute;right:max(10px,env(safe-area-inset-right));
  bottom:max(10px,env(safe-area-inset-bottom));
  display:grid;grid-template-columns:auto auto;gap:8px;align-items:end;justify-items:end;
  pointer-events:auto;contain:layout;
}
.phoneBtn{
  min-width:64px;min-height:64px;padding:8px 10px;
  border:3px solid #1e1612!important;
  background:linear-gradient(180deg,#7e5c43,#5d412f)!important;
  box-shadow:inset 0 0 0 2px #a77b52,0 6px 14px #0007!important;
  color:#fff4d2!important;font-size:11px;letter-spacing:.8px;font-weight:900;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.phoneBtn--use{min-width:86px;min-height:86px;font-size:13px;grid-column:2;grid-row:1/3}
.phoneBtn--hit{min-width:72px;min-height:72px}
.phoneBtn--run{min-width:72px;min-height:56px}
.phoneBtn.is-down,.phoneBtn:active{filter:brightness(1.12);transform:translateY(1px)}
.phoneMini{display:flex;gap:6px;grid-column:1/-1;justify-content:flex-end}
.phoneBtn--mini{min-width:44px;min-height:44px;width:44px;padding:0;font-size:13px}
html.is-phone.is-landscape #hotbar{
  bottom:max(8px,env(safe-area-inset-bottom));
  transform:translateX(-50%) scale(.86);
  transform-origin:center bottom;
}
html.is-phone.is-landscape #minimapWrap.gpsDial{
  transform:scale(.78);transform-origin:top right;
  top:max(6px,env(safe-area-inset-top));right:max(6px,env(safe-area-inset-right));
}
html.is-phone.is-landscape #hud{top:max(6px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left))}
html.is-phone.is-landscape #contextHint{bottom:92px}
html.is-phone.is-landscape #buildUI.rpgBuild{
  top:max(8px,env(safe-area-inset-top));bottom:96px;left:max(8px,env(safe-area-inset-left));
  width:min(280px,42vw);max-height:none;
}
html.is-phone .inventoryWindow{width:min(96vw,820px);max-height:86vh;overflow:auto}
html.is-phone #benchOverlay .inventoryWindow.rpgBench{
  width:min(92vw,380px)!important;max-height:min(78vh,calc(100dvh - 112px))!important;overflow:hidden!important;
}
html.is-phone #benchOverlay .benchGrid{
  max-height:min(36vh,calc(100dvh - 248px));
}
html.is-phone #pauseSidebar{width:min(320px,86vw)}
@media (max-height:420px){
  html.is-phone.is-landscape .phoneStick{width:108px;height:108px}
  html.is-phone.is-landscape .phoneBtn--use{min-width:72px;min-height:72px}
}

/* Phone menu: fit + center, no Ken Burns cost */
html.is-phone #menu{
  justify-content:center;
  align-items:center;
  gap:0;
  padding:max(4px,env(safe-area-inset-top,0px)) 8px max(8px,env(safe-area-inset-bottom,0px));
}
html.is-phone .menuBackdrop{
  animation:none!important;
  filter:none;
  transform:scale(1.1);
  inset:-6%;
}
html.is-phone .menuMotes,
html.is-phone .menuStage{animation:none!important}
html.is-phone .menuCorner{width:16px;height:16px;opacity:.6}
html.is-phone .menuCorner.tl{top:8px;left:8px}
html.is-phone .menuCorner.tr{top:8px;right:8px}
html.is-phone .menuCorner.bl{bottom:8px;left:8px}
html.is-phone .menuCorner.br{bottom:8px;right:8px}
html.is-phone .menuStage{
  width:min(400px,94%);
  max-height:none;
  padding:2px 0 0;
  gap:4px;
  flex:0 1 auto;
}
html.is-phone .brandLogo--menu{
  width:clamp(108px,20vh,240px);
  max-height:min(112px,22vh);
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.72));
}
html.is-phone .menuBanner,
html.is-phone #menu .menuBanner.tag{
  max-width:min(360px,94%);
  padding:0 6px;
  margin:2px auto 4px;
}
html.is-phone .menuBanner span,
html.is-phone #menu .menuBanner > span{
  padding:4px 8px!important;
  font-size:clamp(5.5px,2.4vw,7.5px)!important;
  letter-spacing:clamp(.2px,.4vw,1px)!important;
  white-space:nowrap!important;
  overflow:hidden;
  text-overflow:ellipsis;
  animation:none!important;
}
html.is-phone .menuBanner{animation:none!important}
html.is-phone .menuCard.rpgLedger{
  padding:8px 12px 8px;
  gap:4px;
  max-width:min(300px,92%);
}
html.is-phone .rpgBuckle{margin:0 4px 6px}
html.is-phone .menuCard button{
  padding:7px 12px;
  box-shadow:inset 0 0 0 1px #b38b60,inset 0 1px 0 rgba(255,244,214,.22),0 3px 0 #1a140f;
}
html.is-phone .menuCard button:hover{
  transform:none;
  box-shadow:inset 0 0 0 1px #b38b60,inset 0 1px 0 rgba(255,244,214,.22),0 3px 0 #1a140f;
}
html.is-phone #menuMsg{min-height:12px;margin:0;font-size:10px}
html.is-phone .menuFeatures{
  flex-wrap:wrap;
  justify-content:center;
  gap:4px 6px;
  margin:4px 8px 2px;
  font-size:7px;
  letter-spacing:.6px;
  max-width:min(440px,96%);
  flex:0 0 auto;
}
html.is-phone .menuFeatures span{padding:3px 7px}
html.is-phone .menuCta,
html.is-phone .heroReady,
html.is-phone .menuLogoAura,
html.is-phone .phoneTurnDevice{
  animation:none!important;
}
html.is-phone .menuCta,
html.is-phone .heroReady{
  box-shadow:inset 0 0 0 1px #ead27d,inset 0 1px 0 rgba(255,244,214,.28),0 5px 0 #1a140f;
}
html.is-phone .menuBackdrop{
  transform:none!important;
  inset:0!important;
  filter:none!important;
}
html.is-phone .phoneTurnDevice{transform:rotate(90deg)}
html.is-phone #heroAtelier,
html.is-phone #pauseVeil,
html.is-phone .settingsVeil,
html.is-phone #modal,
html.is-phone .overlay,
html.is-phone #devConsole,
html.is-phone #bootLoad .bootLoadScene{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html.is-phone .bootLoadScene{
  filter:brightness(.35)!important;
  transform:none!important;
  inset:0!important;
  background-color:#0a100c;
}
html.is-phone .bootLoadDust,
html.is-phone .bootRingHalo,
html.is-phone .atelierDaisGlow{
  animation:none!important;
}
@media (max-height:430px){
  html.is-phone .brandLogo--menu{
    width:clamp(72px,15vh,140px);
    max-height:min(64px,15vh);
  }
  html.is-phone .menuStage{gap:2px}
  html.is-phone .menuCard.rpgLedger{padding:6px 10px 6px;gap:3px}
  html.is-phone .menuCard button{padding:5px 10px;font-size:12px;letter-spacing:1px}
  html.is-phone .rpgBuckle{margin:0 2px 4px}
  html.is-phone .menuBanner span,
  html.is-phone #menu .menuBanner > span{
    padding:3px 6px!important;
    font-size:clamp(5px,2.2vw,6.5px)!important;
    letter-spacing:clamp(.15px,.3vw,.8px)!important;
  }
  html.is-phone .menuFeatures{margin:2px 6px 0}
  html.is-phone .menuFeatures span{padding:2px 6px}
  html.is-phone .menuCorner{display:none}
}