:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #f7efda;
  --muted: #c5ccb9;
  --panel: rgba(15, 31, 25, 0.94);
  --panel-2: rgba(24, 48, 38, 0.96);
  --line: rgba(229, 201, 128, 0.36);
  --gold: #e3b85c;
  --green: #69bf68;
  --green-2: #9be47f;
  --danger: #d87569;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #09120f; }
button { font: inherit; }

#game-shell { position: relative; width: 100%; height: 100%; min-height: 32rem; isolation: isolate; }
#game { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; background: #1b3b2d; }
.save-gate { position:absolute; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:flex-end; padding:clamp(1rem,5vw,4rem); background-color:#152c22; background-image:url('/assets/title-screen/omni-realms.jpeg'),linear-gradient(rgba(6,19,15,.68),rgba(6,19,15,.68)),url('/assets/title-screen/omni-realms.jpeg'); background-position:center; background-size:contain,cover,cover; background-repeat:no-repeat; color:var(--ink); isolation:isolate; }
.save-gate[hidden] { display:none; }
.save-gate::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(5,14,13,.08) 0%,rgba(5,14,13,.06) 36%,rgba(4,13,12,.68) 100%),linear-gradient(90deg,rgba(3,12,12,.18),transparent 50%,rgba(3,12,12,.15)); pointer-events:none; }
.save-gate-art { display:none; }
.save-gate-card { width:min(27rem,100%); padding:clamp(1.35rem,3vw,2rem); border:1px solid rgba(241,199,113,.58); border-radius:1rem; background:linear-gradient(145deg,rgba(16,35,29,.96),rgba(8,22,19,.93)); box-shadow:0 24px 75px rgba(0,0,0,.56),inset 0 1px rgba(255,235,174,.16); backdrop-filter:blur(12px); text-align:center; }
.save-gate-card .eyebrow { display:block; color:#f3d38a; font-size:.72rem; letter-spacing:.23em; }
.save-gate-card h1 { margin:.45rem 0 .25rem; color:#fff5d7; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.4rem); font-weight:700; text-shadow:0 2px 12px rgba(0,0,0,.38); }
.save-gate-card p { color:#d7dbcd; line-height:1.45; }
.save-gate-card #save-gate-message { margin:.55rem 0 1.35rem; font-size:.96rem; }
.save-gate-card button,.save-gate-card a.facility-action { display:block; width:100%; min-height:3.35rem; margin:.72rem 0; border-radius:.65rem; font-size:1rem; font-weight:800; transition:transform .15s ease,background .15s ease,box-shadow .15s ease; }
.save-gate-card a.facility-action { padding:.9rem 1rem; text-decoration:none; line-height:1.5rem; box-sizing:border-box; }
.save-gate-card button:hover,.save-gate-card a.facility-action:hover { transform:translateY(-2px); }
.save-gate-card button:focus-visible,.save-gate-card a.facility-action:focus-visible { outline:3px solid #ffe1a0; outline-offset:3px; }
.save-gate-card button:disabled,.save-gate-card a.facility-action[aria-disabled="true"] { transform:none; cursor:wait; opacity:.75; }
.save-gate-card #sign-in-game,.save-gate-card #retry-save-load,.save-gate-card #start-new-game { color:#17241b; border:1px solid #f5dc9a; background:linear-gradient(180deg,#ffe1a0,#dcae5c); box-shadow:0 5px 18px rgba(233,178,75,.18); }
.save-gate-card #play-as-guest { color:#f8f1df; border:1px solid rgba(240,207,139,.63); background:rgba(247,234,196,.09); }
.save-gate-card #play-as-guest:hover { background:rgba(247,234,196,.18); }
.save-gate-card button[hidden] { display:none; }
#save-gate-note { margin:1.1rem 0 0; font-size:.82rem; }
#save-gate-note[hidden] { display:none; }
@media (max-width: 760px) {
  .save-gate { justify-content:center; padding:1rem max(1rem,env(safe-area-inset-right)) max(1.2rem,env(safe-area-inset-bottom)); background-image:linear-gradient(rgba(5,17,14,.66),rgba(5,17,14,.78)),url('/assets/title-screen/omni-realms.jpeg'); background-size:cover; }
  .save-gate::before { background:linear-gradient(180deg,rgba(3,14,13,.12) 0%,transparent 32%,rgba(3,14,13,.86) 100%); }
  .save-gate-art { position:absolute; display:block; top:max(1rem,env(safe-area-inset-top)); left:.6rem; right:.6rem; border:1px solid rgba(241,199,113,.58); border-radius:.55rem; overflow:hidden; box-shadow:0 12px 35px rgba(0,0,0,.45); }
  .save-gate-art img { display:block; width:100%; height:auto; }
  .save-gate-card { position:relative; width:min(27rem,100%); padding:1.45rem; }
}
@media (max-height: 650px) {
  .save-gate { overflow-y:auto; align-items:flex-end; }
  .save-gate-card { margin:auto 0 0; }
}
@media (max-width: 760px) and (max-height: 650px) {
  .save-gate { flex-direction:column; justify-content:flex-start; align-items:center; overflow-y:auto; }
  .save-gate-art { position:relative; top:auto; left:auto; right:auto; width:100%; flex:0 0 auto; }
  .save-gate-card { flex:0 0 auto; margin:1rem 0 0; }
}
.quest-check { display:inline-grid; place-items:center; width:1.25rem; height:1.25rem; border-radius:50%; background:#2f7650; color:#e2ffe6; font-weight:900; margin-right:0.25rem; }

.hud-card, .panel, .bottom-bar, .round-button {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(24, 48, 38, 0.97), rgba(10, 24, 19, 0.96));
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255,255,255,0.05);
  color: var(--ink);
}

.hud-card { position: absolute; z-index: 5; border-radius: 0.85rem; backdrop-filter: blur(10px); }
.player-card { top: max(0.8rem, env(safe-area-inset-top)); left: max(0.8rem, env(safe-area-inset-left)); width: 15.5rem; padding: 0.7rem; display: flex; gap: 0.75rem; }
.avatar-mark { width: 3rem; height: 3rem; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--gold); background: #183f2d; color: var(--gold); font-weight: 900; }
.player-copy { min-width: 0; flex: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.14rem 0.5rem; }
.player-copy strong { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
.player-heading { grid-column: 1 / -1; min-width: 0; display:flex; align-items:baseline; gap:.35rem; white-space:nowrap; }
.player-heading span { flex:0 0 auto; color:var(--muted); font-size:.78rem; }
.player-heading strong { min-width:0; }
.player-copy small { color: var(--muted); font-size: 0.78rem; }
.player-copy small { grid-column: 1 / -1; }
.player-copy .gold-line { color: var(--gold); font-weight: 800; }

.meter { height: 0.48rem; overflow: hidden; border-radius: 99px; background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.06); }
.meter i { display: block; width: 100%; height: 100%; border-radius: inherit; transition: width 180ms ease; }
.hp-meter { grid-column: 1 / -1; }
.hp-meter i { background: linear-gradient(90deg, #c94f4f, #ef846c); }

.action-card { top: max(0.8rem, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(31rem, 42vw); padding: 0.65rem 0.9rem; text-align: center; display: grid; gap: 0.2rem; }
.action-card[hidden] { display: none; }
.action-card strong { font-size: 0.9rem; }
.action-card span { color: var(--muted); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-meter { height: 0.3rem; margin-top: 0.25rem; }
.action-meter i { width: 0; background: linear-gradient(90deg, var(--gold), #f5dd84); }
.boss-card { top:4.9rem; left:50%; transform:translateX(-50%); width:min(34rem,48vw); padding:.62rem .85rem; border-color:rgba(224,105,84,.62); background:linear-gradient(145deg,rgba(63,25,22,.96),rgba(13,22,18,.97)); display:grid; gap:.35rem; box-shadow:0 12px 38px rgba(0,0,0,.42),0 0 24px rgba(190,70,49,.16); }
.boss-card[hidden] { display:none; }
.boss-heading,.boss-title { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.boss-heading span { color:#ef927f; font-size:.64rem; font-weight:900; letter-spacing:.14em; }
.boss-heading strong { color:var(--gold); font-size:.68rem; }
.boss-title strong { font-family:Georgia,serif; font-size:1.05rem; }
.boss-title span { color:var(--muted); font-size:.73rem; font-variant-numeric:tabular-nums; }
.boss-meter { height:.58rem; border-color:rgba(255,255,255,.1); }
.boss-meter i { background:linear-gradient(90deg,#8f2f2c,#e56855); }

.world-card { top: max(0.8rem, env(safe-area-inset-top)); right: max(3.9rem, calc(env(safe-area-inset-right) + 3.9rem)); padding: 0.6rem 0.8rem; display: grid; text-align: right; }
.world-card span { color: var(--gold); letter-spacing: 0.12em; font-size: 0.7rem; font-weight: 900; }
.world-card strong { font-size: 0.85rem; }
.world-card small { color:#a5dcaa; font-size:.73rem; }
.round-button { position: absolute; z-index: 8; width: 2.65rem; height: 2.65rem; border-radius: 50%; color: var(--gold); font-weight: 900; font-size: 1.1rem; cursor: pointer; }
.top-help { top: max(0.8rem, env(safe-area-inset-top)); right: max(0.8rem, env(safe-area-inset-right)); }
.sound-button { bottom:max(4.7rem, calc(env(safe-area-inset-bottom) + 4.7rem)); right:max(0.8rem, env(safe-area-inset-right)); z-index:8; }
.sound-button { font-size:1.35rem; }
.quest-button { bottom:max(4.7rem, calc(env(safe-area-inset-bottom) + 4.7rem)); left:max(0.8rem, env(safe-area-inset-left)); font-family:Georgia,serif; }
#quest-ready-count { position:absolute; top:-.4rem; right:-.4rem; min-width:1.25rem; height:1.25rem; padding:0 .2rem; display:grid; place-items:center; border-radius:2rem; background:var(--green); color:#10251d; font:900 .7rem Inter,system-ui,sans-serif; }
#quest-ready-count[hidden] { display:none; }

.bottom-bar { position: absolute; z-index: 7; left: 50%; bottom: max(0.65rem, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 0.36rem; border-radius: 0.85rem; display: flex; align-items: center; justify-content: center; gap: 0.32rem; }
.menu-button, .quick-slot { height: 2.75rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.58rem; background: rgba(255,255,255,0.045); color: var(--ink); }
.menu-button { width: 4.35rem; display: grid; place-items: center; gap: 0; cursor: pointer; }
.menu-button:hover, .menu-button:focus-visible { border-color: var(--gold); background: rgba(227,184,92,0.1); outline: none; }
.menu-button b { font-size: 0.65rem; }
.menu-icon { font-size: 0.82rem; color: var(--gold); font-weight: 900; }
.bag-icon { width: 1.15rem; height: 1rem; border: 2px solid var(--gold); border-radius: 0.25rem; position: relative; }
.bag-icon::before { content: ""; position: absolute; width: 0.55rem; height: 0.35rem; border: 2px solid var(--gold); border-bottom: 0; border-radius: 0.4rem 0.4rem 0 0; left: 50%; top: -0.46rem; transform: translateX(-50%); }
.hotbar-divider { width: 1px; height: 1.8rem; margin: 0 0.08rem; background: var(--line); }
.quick-slot { width: 2.75rem; position: relative; display: grid; place-items: center; }
.quick-slot.empty { border-style: dashed; border-color: rgba(229,201,128,0.3); }
.quick-slot.drag-over { border-color: var(--green-2); background: rgba(105,191,104,.22); }
.hotbar-key { position: absolute; top: 0.06rem; left: 0.22rem; color: var(--gold); font-weight: 800; font-size: 0.61rem; z-index: 1; }
.quick-slot .hotbar-count { position: absolute; right: 0.18rem; bottom: 0.07rem; color: var(--ink); font-size: 0.59rem; font-weight: 800; text-shadow: 0 1px 3px #000; }
.quick-slot .hotbar-equipped { position: absolute; right: 0.14rem; top: 0.08rem; color: var(--green-2); font-size: 0.6rem; font-weight: 900; }
.quick-slot .hotbar-unavailable { opacity: .45; }
.consumable-cooldown { position:absolute; left:50%; top:50%; width:78%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; z-index:2; pointer-events:none; display:grid; place-items:center; background:conic-gradient(rgba(5,17,15,.79) var(--cooldown-progress,100%),transparent 0); box-shadow:inset 0 0 0 2px rgba(248,212,139,.8),0 0 0 1px rgba(0,0,0,.5); }
.consumable-cooldown[hidden] { display:none; }
.consumable-cooldown-time { color:#fff1cb; font-size:clamp(.56rem,1vw,.72rem); line-height:1; font-weight:900; text-shadow:0 1px 3px #000,0 0 4px #000; }
.hotbar-drag-ghost { position: fixed; z-index: 100; pointer-events: none; width: 2.75rem; height: 2.75rem; padding: .18rem; border: 1px solid var(--green-2); border-radius: .6rem; background: var(--panel); transform: translate(-50%,-50%); box-shadow: 0 8px 20px #0008; }
.hotbar-drag-ghost img { width: 100%; height: 100%; object-fit: contain; }
.quick-slot:is(button) { cursor: pointer; }
.quick-slot:is(button):hover, .quick-slot:is(button):focus-visible { border-color: var(--gold); background: rgba(227,184,92,0.1); outline: none; }
.quick-item-art { width:2.15rem; height:2.15rem; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.quick-slot small { position: absolute; right: 0.28rem; bottom: 0.16rem; color: var(--muted); font-size: 0.64rem; }

.panel { position: absolute; z-index: 10; width: min(28rem, calc(100vw - 1.5rem)); max-height: min(75vh, 38rem); overflow: auto; border-radius: 1rem; padding: 1rem; }
.inventory-panel, .skills-panel, .production-panel, .facility-panel, .map-panel, .pets-panel { right: max(0.75rem, env(safe-area-inset-right)); bottom: 4.5rem; }
.map-panel { width: min(25rem, calc(100vw - 1.5rem)); }
#map-canvas { display:block; width:100%; max-width:320px; height:auto; margin:auto; border:1px solid var(--line); border-radius:0.65rem; cursor:crosshair; }
.map-hint,.map-legend { color:var(--muted); font-size:0.8rem; line-height:1.4; }
.facility-list { display:grid; gap:0.45rem; }
.facility-row { display:flex; gap:0.6rem; align-items:center; justify-content:space-between; padding:0.55rem; border:1px solid rgba(229,201,128,0.2); border-radius:0.55rem; background:rgba(0,0,0,0.15); }
.facility-row span { font-size:0.83rem; }
.facility-row small { display:block; color:var(--muted); font-size:0.72rem; }
.facility-row button,.facility-action { min-height:2rem; padding:0.3rem 0.55rem; border:1px solid var(--line); border-radius:0.45rem; background:rgba(227,184,92,0.14); color:var(--ink); cursor:pointer; }
.facility-row button:disabled,.facility-action:disabled { opacity:0.45; cursor:not-allowed; }
.item-list-label { display:flex; align-items:center; gap:.45rem; min-width:0; }
.item-list-label > span { min-width:0; }
.list-item-art { width:2.1rem; height:2.1rem; object-fit:contain; flex:0 0 auto; }
.shop-actions { display:flex; flex-wrap:wrap; gap:.35rem; justify-content:flex-end; }
.facility-input { width:100%; min-height:2.3rem; padding:0.45rem; margin:0.4rem 0; border:1px solid var(--line); border-radius:0.45rem; background:#12291e; color:var(--ink); font:inherit; }
.facility-note { color:var(--muted); font-size:0.82rem; line-height:1.45; }
.leaderboard-picker { display:grid; gap:.15rem; color:var(--gold); font-weight:800; font-size:.86rem; }
.leaderboard-picker select { margin:.25rem 0 .5rem; cursor:pointer; }
.leaderboard-rank { display:grid; grid-template-columns:3rem minmax(0,1fr) auto; align-items:center; gap:.65rem; padding:.62rem .72rem; border:1px solid rgba(229,201,128,.23); border-radius:.55rem; background:rgba(0,0,0,.16); }
.leaderboard-rank .rank-number { color:var(--gold); font-weight:900; }
.leaderboard-rank .rank-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard-rank strong { font-variant-numeric:tabular-nums; }
.bank-summary { display:grid; gap:.3rem; padding:.75rem; background:rgba(227,184,92,.09); border:1px solid var(--line); border-radius:.65rem; }
.bank-summary strong { color:var(--gold); }
.bank-summary span,.bank-storage-head small,.bank-upgrade span { color:var(--muted); font-size:.78rem; }
.bank-gold-controls { display:grid; grid-template-columns:minmax(8rem,1fr) auto; gap:.6rem; align-items:center; margin:.7rem 0; }
.bank-gold-controls .recipe-actions { margin:0; flex-wrap:wrap; }
.bank-storage-head,.bank-upgrade { display:flex; align-items:center; justify-content:space-between; gap:.55rem; }
.bank-storage-head h3 { margin:.5rem 0; }
.bank-storage-head small { display:block; font-weight:400; }
.bank-deposit-all { display:block; width:100%; margin:.25rem 0 .5rem; font-weight:800; }
.bank-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.36rem; max-height:20rem; overflow-y:auto; padding:.12rem; }
.bank-slot { aspect-ratio:1; min-width:0; position:relative; border:1px solid rgba(229,201,128,.22); border-radius:.5rem; background:rgba(0,0,0,.23); display:grid; place-items:center; padding:.12rem; color:var(--ink); }
.bank-slot.filled { background:linear-gradient(145deg,rgba(73,105,73,.42),rgba(12,29,22,.5)); cursor:grab; touch-action:none; }
.bank-slot.filled:hover,.bank-slot.filled:focus-visible,.bank-grid.drag-over,.inventory-grid.bank-drag-over { border-color:var(--green-2); outline:none; }
.bank-slot .item-art { margin-bottom:.4rem; }
.bank-slot.locked { opacity:.37; font-size:1.2rem; }
.bank-transfer-menu { position:fixed; z-index:30; width:min(16.5rem,calc(100vw - 1rem)); padding:.7rem; border:1px solid var(--gold); border-radius:.7rem; background:#10271e; box-shadow:0 14px 36px rgba(0,0,0,.65); color:var(--ink); }
.bank-transfer-menu[hidden] { display:none; }
.bank-transfer-menu strong { display:block; margin-bottom:.55rem; font-size:.85rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.bank-transfer-menu .recipe-actions { display:flex; gap:.45rem; margin:0; }
.bank-transfer-menu button { flex:1; min-height:2.45rem; padding:.25rem; border:1px solid var(--line); border-radius:.45rem; background:rgba(227,184,92,.14); color:var(--ink); font-size:.8rem; font-weight:800; cursor:pointer; }
.bank-transfer-menu button:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.bank-transfer-menu button:disabled { opacity:.5; cursor:not-allowed; }
.bank-transfer-menu small { display:block; margin-top:.5rem; color:var(--gold); }
.bank-upgrade { border-top:1px solid var(--line); padding-top:.7rem; }
#game-shell.bank-split #facility-panel { width:min(36rem,calc((100vw - 2.25rem)/2)); right:.75rem; }
#game-shell.bank-split #inventory-panel { width:min(28rem,calc((100vw - 2.25rem)/2)); left:.75rem; right:auto; }
.help-panel { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.settings-panel { right:max(0.75rem, env(safe-area-inset-right)); bottom:9rem; width:min(23rem, calc(100vw - 1.5rem)); }
.quest-journal { left:max(0.75rem, env(safe-area-inset-left)); bottom:9rem; }
.quest-journal h3 { margin:1rem 0 .5rem; color:var(--gold); font-size:.95rem; }
.journal-row { display:grid; gap:.3rem; padding:.6rem .7rem; border:1px solid rgba(229,201,128,.2); border-radius:.55rem; background:rgba(0,0,0,.15); }
.journal-row strong { font-size:.87rem; }
.journal-row small { color:var(--muted); font-size:.78rem; }
.journal-row.ready small { color:var(--green-2); }
.settings-panel h3 { margin:1.1rem 0 .5rem; color:var(--gold); font-size:.95rem; }
.setting-toggle,.setting-range { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.65rem 0; border-bottom:1px solid rgba(229,201,128,.14); font-size:.9rem; }
.setting-toggle small { display:block; margin-top:.2rem; color:var(--muted); font-size:.75rem; line-height:1.4; }
.setting-toggle input { flex:0 0 auto; width:1.3rem; height:1.3rem; accent-color:#80c576; cursor:pointer; }
.setting-range { display:grid; gap:.35rem; }
.setting-range span { display:flex; justify-content:space-between; }
.setting-range output { color:var(--gold); }
.setting-range input { width:100%; accent-color:#80c576; cursor:pointer; }
.settings-note { color:var(--muted); font-size:.8rem; line-height:1.4; }
.rename-form { display:grid; gap:.45rem; font-size:.9rem; }
.rename-form > div { display:flex; gap:.5rem; align-items:center; }
.rename-form input { min-width:0; flex:1; padding:.7rem; border:1px solid var(--line); border-radius:.5rem; background:#10251d; color:var(--ink); font:inherit; }
.rename-form small { color:var(--muted); line-height:1.35; }
.panel[hidden] { display: none; }
.panel header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 0.75rem; }
.panel h2 { margin: 0.15rem 0 0; font-family: Georgia, serif; font-size: 1.55rem; }
.eyebrow { color: var(--gold); font-size: 0.7rem; letter-spacing: 0.13em; font-weight: 900; }
.close-button { width: 2.25rem; height: 2.25rem; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--ink); border-radius: 50%; font-size: 1.3rem; cursor: pointer; }
.slot-count { color: var(--muted); margin: 0 0 0.7rem; font-size: 0.84rem; }
.lantern-slot { display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;padding:.45rem .55rem;margin-bottom:.7rem;border:1px solid rgba(235,187,94,.43);border-radius:.5rem;background:rgba(111,76,30,.18);font-size:.84rem; }
.lantern-slot strong { color:#ffe2a4; }
.lantern-slot small { flex-basis:100%;color:var(--muted);font-size:.75rem; }
.lantern-slot button { margin-left:auto;border:1px solid var(--line);border-radius:.4rem;background:rgba(226,188,85,.18);color:var(--ink);padding:.25rem .55rem;cursor:pointer; }
.lantern-art { display:inline-grid;place-items:center;font-size:1.55rem;line-height:1;filter:drop-shadow(0 0 7px #ffcd7b); }
.inventory-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.38rem; }
.inventory-slot { aspect-ratio: 1; position: relative; border: 1px solid rgba(229,201,128,0.18); border-radius: 0.45rem; background: rgba(0,0,0,0.24); display: grid; place-items: center; padding: 0.18rem; }
.inventory-slot.filled { background: linear-gradient(145deg, rgba(73,105,73,0.38), rgba(12,29,22,0.42)); }
.inventory-slot:is(button) { color: var(--ink); cursor: pointer; }
.inventory-slot:is(button):hover, .inventory-slot:is(button):focus-visible { border-color: var(--green-2); outline: none; }
.inventory-slot.filled { touch-action: none; }
.inventory-slot.enhanced,.bank-slot.enhanced { border-color:#efcf77; background:linear-gradient(135deg,rgba(151,111,40,.4),rgba(22,42,37,.48) 65%,rgba(224,188,88,.22)); box-shadow:inset 0 0 11px rgba(250,214,114,.25),0 0 9px rgba(244,195,74,.34); overflow:hidden; }
.inventory-slot.enhanced::after,.bank-slot.enhanced::after { content:'✦'; position:absolute; left:52%; top:11%; color:#fff4bd; font-size:1rem; text-shadow:0 0 7px #fff,0 0 15px #ffca55; pointer-events:none; animation:gear-sparkle 2.7s ease-in-out infinite; }
.inventory-slot.enhanced .item-art,.bank-slot.enhanced .item-art { filter:drop-shadow(0 0 7px #ffdc79); }
@keyframes gear-sparkle { 0%,100% {opacity:.28;transform:scale(.7) rotate(-15deg)} 50% {opacity:1;transform:scale(1.12) rotate(20deg)} }
@media (prefers-reduced-motion:reduce) { .inventory-slot.enhanced::after,.bank-slot.enhanced::after {animation:none;opacity:.85} }
.sigil-art { display:inline-grid;place-items:center;color:#ffe5a3;text-shadow:0 0 8px #ffdc79,0 0 15px #f69e40;font-size:1.8rem;line-height:1; }
.engrave-option { margin-top:.5rem; }
.engrave-option .ingredient-art { width:1rem;height:1rem;font-size:1rem;display:inline-grid;vertical-align:middle; }
.recipe-tabs { display:flex;gap:.4rem;flex-wrap:wrap; }
.recipe-tabs button { border:1px solid rgba(239,207,119,.38);border-radius:.45rem;background:rgba(0,0,0,.22);padding:.5rem .7rem;color:var(--ink);cursor:pointer; }
.recipe-tabs button[aria-pressed="true"] { background:rgba(202,157,57,.28);border-color:#efcf77;color:#fff0b8; }
.gear-details { margin-top:.75rem;padding:.7rem;border:1px solid rgba(239,207,119,.55);border-radius:.7rem;background:linear-gradient(135deg,rgba(104,78,28,.28),rgba(9,34,27,.92));box-shadow:inset 0 0 16px rgba(230,188,88,.09); }
.gear-details[hidden] { display:none; }
.gear-details:not([hidden]) + .inventory-grid { margin-top:.7rem; }
.gear-details-heading { display:flex;align-items:center;gap:.7rem; }
.gear-details-heading .item-art { flex:0 0 2.5rem;width:2.5rem;height:2.5rem;margin:0; }
.gear-details-heading > div { flex:1;min-width:0; }
.gear-details-heading strong { display:block;color:#fff1c1;font-size:1rem; }
.gear-details-heading small { display:block;color:var(--muted);font-size:.8rem;line-height:1.35; }
.gear-detail-close { background:none;border:0;color:var(--ink);font-size:1.5rem;cursor:pointer; }
.gear-details dl { margin:.7rem 0;display:grid;gap:.35rem; }
.gear-details dl > div { display:flex;justify-content:space-between;gap:.65rem;border-top:1px solid rgba(239,207,119,.14);padding-top:.35rem;font-size:.85rem; }
.gear-details dt { color:var(--muted); }
.gear-details dd { margin:0;text-align:right;color:var(--ink);font-weight:700; }
.gear-detail-actions { display:flex;gap:.6rem;align-items:center;flex-wrap:wrap; }
.gear-detail-actions button { padding:.5rem .9rem;border:1px solid #e5c980;border-radius:.45rem;background:rgba(226,188,85,.2);color:var(--ink);font-weight:800;cursor:pointer; }
.gear-detail-actions button:disabled { opacity:.5;cursor:default; }
.gear-detail-actions small { color:var(--muted); }
.engrave-options { padding:.25rem 0; }
.upgrade-preview { display:block;margin:.3rem 0;color:#f3dda0;font-size:.79rem;line-height:1.35; }
.item-art { width: min(2.25rem, 88%); height: min(2.25rem, 88%); object-fit:contain; margin-bottom:.4rem; filter:drop-shadow(0 3px 4px rgba(0,0,0,0.35)); }
.item-name { position: absolute; left: 0.16rem; right: 0.16rem; bottom: 0.12rem; text-align: center; color: #e8eedf; font-size: 0.56rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-count { position: absolute; top: 0.12rem; right: 0.18rem; color: white; font-weight: 900; font-size: 0.68rem; text-shadow: 0 1px 3px black; }
.equipped-mark { position: absolute; top: 0.12rem; left: 0.18rem; min-width: 0.85rem; height: 0.85rem; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #17231a; font-size: 0.55rem; font-weight: 900; }
.durability-mark { position:absolute; right:.14rem; top:.1rem; padding:.04rem .12rem; border-radius:.2rem; background:#17392e; color:#d1e8b8; font-size:.58rem; font-weight:800; font-variant-numeric:tabular-nums; }
.durability-mark.broken { color:#fff3e1; background:#a23931; }

.skills-list { display: grid; gap: 0.75rem; }
.skill-row { display: grid; grid-template-columns: 1fr auto; gap: 0.28rem 0.8rem; }
.skill-row strong { font-size: 0.9rem; }
.skill-row span { color: var(--muted); font-size: 0.78rem; }
.skill-meter { grid-column: 1 / -1; height: 0.48rem; }
.skill-meter i { background: linear-gradient(90deg, #4fa854, var(--green-2)); }
.station-detail { margin: -0.2rem 0 0.85rem; color: var(--muted); font-size: 0.88rem; }
.recipe-list { display: grid; gap: 0.65rem; }
.recipe-card { padding: 0.7rem; border: 1px solid rgba(229,201,128,0.19); border-radius: 0.75rem; background: rgba(0,0,0,0.18); display: grid; gap: 0.55rem; }
.recipe-copy { display: flex; align-items: center; gap: 0.65rem; }
.recipe-copy > div { display: grid; gap: 0.08rem; }
.recipe-copy strong { font-size: 0.92rem; }
.recipe-copy small { color: var(--muted); font-size: 0.76rem; }
.recipe-icon { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; border-radius: 0.5rem; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(83,119,78,0.28); }
.recipe-icon .item-art { width:2.2rem; height:2.2rem; margin:0; }
.recipe-materials { display: flex; flex-wrap: wrap; gap: 0.32rem; }
.recipe-materials span { padding: 0.24rem 0.4rem; border-radius: 0.35rem; font-size: 0.72rem; background: rgba(255,255,255,0.05); }
.ingredient-art { width:1.15rem; height:1.15rem; object-fit:contain; vertical-align:middle; margin-right:.2rem; }
.recipe-materials .ready { color: #a9e797; }
.recipe-materials .missing { color: #e5a49b; }
.recipe-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.recipe-actions button { min-height: 2.3rem; border: 1px solid rgba(227,184,92,0.48); border-radius: 0.55rem; background: rgba(227,184,92,0.11); color: var(--ink); cursor: pointer; font-weight: 800; }
.recipe-actions button small { display: block; color: var(--muted); font-size: 0.65rem; font-weight: 600; }
.recipe-actions button:hover, .recipe-actions button:focus-visible { border-color: var(--gold); background: rgba(227,184,92,0.2); outline: none; }
.recipe-actions button:disabled { opacity: 0.36; cursor: not-allowed; }
.production-note { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.75rem; line-height: 1.45; }
.production-status { margin:.6rem 0; padding:.6rem .7rem; border:1px solid rgba(126,197,118,.45); border-radius:.55rem; color:var(--ink); background:rgba(62,110,65,.2); font-size:.86rem; }
.production-status[hidden] { display:none; }
.production-meter { margin-top:.45rem; height:.45rem; }
.production-meter i { width:0; background:linear-gradient(90deg,#71c786,#f0d277); }
@media (max-width:760px) { .production-status:not([hidden]) { position:sticky; top:0; z-index:2; background:#203c2d; box-shadow:0 6px 16px #07150fbd; } }
.help-panel ul { color: var(--muted); padding-left: 1.2rem; line-height: 1.55; }
.danger-button { border: 1px solid rgba(216,117,105,0.6); background: rgba(216,117,105,0.1); color: #ffb6ad; border-radius: 0.65rem; padding: 0.65rem 0.8rem; cursor: pointer; }

.toast-region { position: absolute; z-index: 20; left: max(0.8rem, env(safe-area-inset-left)); top: 7.4rem; display: grid; gap: 0.45rem; pointer-events: none; }
.toast .pvp-winner { color: #7ee59a; font-weight: 700; }
.toast .pvp-defeated { color: #ff8787; font-weight: 700; }
.toast { max-width: min(24rem, calc(100vw - 2rem)); border: 1px solid var(--line); border-left: 4px solid var(--gold); background: rgba(9,25,18,0.96); color: var(--ink); border-radius: 0.6rem; padding: 0.7rem 0.8rem; box-shadow: 0 10px 24px rgba(0,0,0,0.32); animation: toast-in 180ms ease-out; font-size: 0.82rem; }
@keyframes toast-in { from { opacity: 0; transform: translateX(0.6rem); } }

@media (max-width: 760px) {
  .player-card { width: 12.5rem; }
  .action-card { top: 5.15rem; width: min(18rem, 72vw); padding: 0.38rem 0.55rem; gap: 0.08rem; }
  .action-card strong { font-size: 0.76rem; }
  .action-card span { font-size: 0.64rem; }
  .action-meter { margin-top: 0.1rem; height: 0.2rem; }
  .boss-card { top:8.05rem; width:min(22rem,88vw); padding:.45rem .62rem; gap:.22rem; }
  .boss-title strong { font-size:.88rem; }
  .boss-heading span,.boss-heading strong,.boss-title span { font-size:.61rem; }
  .boss-meter { height:.42rem; }
  .world-card { padding: 0.52rem 0.65rem; right: 3.7rem; }
  .world-card span { display: none; }
  .bottom-bar { min-width: 0; width: calc(100vw - 1rem); bottom: max(0.5rem, env(safe-area-inset-bottom)); }
  .menu-button { width: 3.65rem; }
  .quick-slot { width: 2.45rem; }
  .inventory-grid { grid-template-columns: repeat(7, minmax(2.25rem, 1fr)); overflow-x: auto; }
  .inventory-panel, .skills-panel, .production-panel, .facility-panel, .map-panel, .pets-panel { right: 0.5rem; bottom: 4rem; }
  .settings-panel { right:.5rem; bottom:7rem; max-height:calc(100dvh - 8rem); }
  .quest-journal { left:.5rem; bottom:7rem; max-height:calc(100dvh - 8rem); }
  .bottom-bar { max-width: calc(100vw - .5rem); overflow-x:auto; justify-content:flex-start; }
  .bottom-bar > * { flex:0 0 auto; }
  .toast-region { top: 11.9rem; left: 0.6rem; }
}

@media (max-width: 760px) {
  .bank-gold-controls { grid-template-columns:1fr; }
  .bank-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  #game-shell.bank-split #facility-panel { left:.5rem; right:.5rem; width:auto; top:4.7rem; bottom:auto; max-height:calc((100dvh - 9rem)*.55); }
  #game-shell.bank-split #inventory-panel { left:.5rem; right:.5rem; width:auto; bottom:4rem; max-height:calc((100dvh - 9rem)*.45); }
}

@media (max-width: 430px) {
  .avatar-mark { width: 2.55rem; height: 2.55rem; font-size: 0.8rem; }
  .player-card { width: 10.8rem; padding: 0.52rem; gap: 0.45rem; }
  .player-copy strong { font-size: 0.84rem; }
  .player-copy > span, .player-copy small { font-size: 0.67rem; }
  .world-card { display: grid; top:4.05rem; right:.6rem; padding:.38rem .6rem; }
  .world-card strong { font-size:.72rem; }
  .menu-button { width: 3.25rem; height: 2.45rem; }
  .menu-button b { font-size:.57rem; }
  .quick-slot { width: 2.13rem; height: 2.45rem; }
  .quick-item-art { width:1.75rem; height:1.75rem; }
  .bottom-bar { gap: 0.14rem; padding: 0.28rem; }
}

@media (max-width: 370px) {
  .menu-button { width: 2.9rem; }
  .quick-slot { width: 1.85rem; }
  .quick-item-art { width: 1.55rem; height: 1.55rem; }
  .bottom-bar { gap: .08rem; }
}
.pet-card{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid rgba(219,190,114,.35);border-radius:12px;background:rgba(17,37,30,.78);margin:8px 0}
.pet-portrait{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#1c342b;border:2px solid #e7cb89;box-shadow:0 2px 10px #0006}
.pet-portrait canvas{display:block;width:100%;height:100%}.pet-copy{flex:1;min-width:0;display:grid;gap:4px}.pet-copy small{display:block;color:#b8c6b5;font-size:12px}.pet-card button{flex:none;max-width:145px}
.pet-card button:not(:disabled){min-height:2.6rem;padding:.55rem .8rem;border:1px solid #ffdc85;border-radius:.5rem;background:#d79d3d;color:#17251a;font-weight:800;box-shadow:0 2px 10px rgba(233,173,72,.25);cursor:pointer}
.pet-card button:disabled{opacity:.65}
.sword-break-notice[hidden]{display:none}.sword-break-notice{position:absolute;z-index:30;top:max(4.8rem,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:.15rem;width:min(27rem,calc(100% - 2rem));padding:.8rem 1rem;border:2px solid #f3a178;border-radius:.75rem;background:rgba(48,13,13,.95);color:#fff3e7;text-align:center;box-shadow:0 10px 35px #0009;pointer-events:none}.sword-break-notice span{font-size:2.5rem;color:#ffb88b;transform:rotate(22deg)}.sword-break-notice strong{font-size:1.35rem}.sword-break-notice small{font-size:.82rem}.sword-break-notice.show{animation:sword-break-enter .25s ease-out, sword-break-border .5s ease-out 2}@keyframes sword-break-enter{from{opacity:0;transform:translate(-50%,-1rem)}to{opacity:1;transform:translate(-50%,0)}}@keyframes sword-break-border{50%{box-shadow:0 0 0 100vmax rgba(190,28,26,.12),0 10px 35px #0009}}
#game-shell.damage-flash::after{content:"";position:absolute;z-index:25;inset:0;pointer-events:none;animation:damage-edge .7s ease-out}@keyframes damage-edge{0%{box-shadow:inset 0 0 0 0 transparent}25%{box-shadow:inset 0 0 65px 16px rgba(230,37,30,.65)}100%{box-shadow:inset 0 0 0 0 transparent}}
.pet-xp-bar{height:6px;border-radius:5px;background:#172b25;overflow:hidden;border:1px solid rgba(228,194,111,.35)}.pet-xp-bar span{display:block;height:100%;background:linear-gradient(90deg,#76cb91,#e5c674);border-radius:5px}
@media(max-width:600px){.pet-card{flex-wrap:wrap}.pet-card button{margin-left:60px}}