/* ===== HUD layer: game-style panels, inventory slots, menu, bars. Pure CSS, loaded after style.css ===== */
:root{--t-common:#9aa3ad;--t-uncommon:#4be38a;--t-rare:#3e9bff;--t-epic:#b45cff;--t-black:#ffb02e;--metal:linear-gradient(180deg,#2a3346,#131a28 48%,#0b101b 52%,#161e2e);--cut:12px;
 --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
/* page scene backdrop: fixed layer, dimmed, slight parallax-lite scale; nothing is flat */
body::before{content:"";position:fixed;inset:-4%;z-index:-2;background:url(/img/scenes/bg.webp) center/cover;filter:saturate(.8) brightness(.32) blur(1.5px);transform:scale(1.04);transition:background-image .3s}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 30%,#0000 30%,#02040acc 100%),repeating-linear-gradient(0deg,#0000 0 2px,#0000001f 2px 3px),var(--noise)}
body[data-scene=hero]::before{background-image:url(/img/scenes/hero.webp)}body[data-scene=family]::before{background-image:url(/img/scenes/family.webp)}body[data-scene=vault]::before{background-image:url(/img/scenes/vault.webp)}
body{background:var(--bg)}
@media (min-width:768px) and (prefers-reduced-motion:no-preference){body::before{animation:drift 40s ease-in-out infinite alternate}}
@keyframes drift{to{transform:scale(1.08) translate(-1%,-.6%)}}
/* top bar */
#top{background:linear-gradient(180deg,#141c2cf0,#070b16f0);border-bottom:1px solid #2c3a56;box-shadow:0 1px 0 #3ee8ff22,0 6px 18px #000a}
#sfx{margin-left:.5rem;background:#0b111d;border:1px solid #2c3a56;border-radius:4px;padding:.15rem .5rem;font-size:1rem;min-height:0;box-shadow:inset 0 1px 0 #ffffff14}
#topStats:not(:empty)~#sfx,#topStats:empty~#sfx{margin-left:auto}
/* HUD panels: angled corners, metal edge, scanlines */
.card,#chatlog{position:relative;border:0;border-radius:0;background:linear-gradient(180deg,#121a2bf0,#0a0f1bf2);
 clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
 box-shadow:inset 0 0 0 1px #2a3a58,inset 0 1px 0 #6fd8ff33,inset 0 0 24px #000a}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#ffffff05 2px 3px),var(--noise);mix-blend-mode:screen}
.card::before{content:"";position:absolute;left:0;top:0;width:calc(var(--cut) + 18px);height:2px;background:var(--acc);box-shadow:0 0 8px var(--acc);opacity:.7}
.card>h3:first-child{margin:-.8rem -1rem .6rem;padding:.45rem 1rem;background:var(--metal);border-bottom:1px solid #3a4a68;color:#d8e6f5;text-shadow:0 1px 0 #000,0 0 8px #3ee8ff44;font-size:.85rem}
@media (max-width:767px){.card{border-radius:0}.card>h3:first-child{margin:-.9rem -.9rem .6rem}}
/* thumbs inside any list card get a mini slot frame */
.hasthumb .thumb:not(.sm):not(.xs){border-radius:6px;border:1px solid #3a4a68;background:radial-gradient(circle at 50% 45%,#2a3d5f 0,#0a0f1a 70%);box-shadow:inset 0 0 10px #000,0 0 0 2px #05080f,0 0 10px #3ee8ff22;object-fit:contain;padding:3px}
.thumb.sm{border-color:#3a4a68;background:radial-gradient(circle,#22324f,#080c15);object-fit:contain}
/* ===== inventory / shop slot grid ===== */
.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.7rem;margin:.4rem 0 1rem}
.slot{--tc:var(--t-common);position:relative;display:flex;flex-direction:column;gap:.3rem;padding:.45rem .45rem .5rem;outline:0;
 background:linear-gradient(160deg,#1b2436,#0b101b 60%,#121a29);border-radius:3px;
 clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 55%,#000),inset 0 1px 0 #ffffff1c,inset 0 -2px 0 #0008,inset 0 0 18px #000c;transition:transform .12s,box-shadow .12s}
.slot.t-uncommon{--tc:var(--t-uncommon)}.slot.t-rare{--tc:var(--t-rare)}.slot.t-epic{--tc:var(--t-epic)}.slot.t-black{--tc:var(--t-black)}
.slot-art{position:relative;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:2px;
 background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--tc) 30%,#1d2a44) 0,#0c1220 55%,#03050a 100%);
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 70%,#000),inset 0 0 22px #000,0 0 12px color-mix(in srgb,var(--tc) 30%,transparent)}
.slot-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,#0000 50%,#000b 100%),linear-gradient(135deg,#ffffff1a,#0000 40%)}
.slot-art .thumb{width:88%;height:88%;flex:none;border:0;border-radius:0;background:none;object-fit:contain;font-size:2.4rem;
 -webkit-mask:radial-gradient(circle closest-side,#000 62%,#0000 100%);mask:radial-gradient(circle closest-side,#000 62%,#0000 100%);filter:drop-shadow(0 4px 6px #000)}
.slot-art .thumb.ph{-webkit-mask:none;mask:none;opacity:.8;color:var(--tc);text-shadow:0 0 12px var(--tc)}
.slot.t-black .slot-art{background:radial-gradient(circle at 50% 42%,#5a3a10 0,#2a0c10 55%,#050203 100%);box-shadow:inset 0 0 0 1px #ffb02e,inset 0 0 22px #000,0 0 14px #ff4a3a66}
.qty{position:absolute;right:3px;bottom:3px;z-index:1;font:700 .72rem/1 system-ui;padding:.18rem .35rem;border-radius:3px;background:#000c;border:1px solid var(--tc);color:#fff}
.rar{position:absolute;left:3px;top:3px;z-index:1;font:600 .55rem/1 system-ui;letter-spacing:.12em;text-transform:uppercase;padding:.15rem .3rem;background:#000a;color:var(--tc);border-radius:2px}
.slot-name{font-weight:600;font-size:.82rem;line-height:1.2;color:#eaf3fb;min-height:2.4em}
.slot-tags .tag{margin:0;font-size:.62rem}
.slot-act{margin-top:auto}.slot-act button{width:100%;font-size:.78rem;padding:.35rem .3rem}.slot-act .small{font-size:.72rem;display:block;text-align:center}
.slot-act button[data-act=buy],.slot-act button[data-act=home],.slot-act button[data-act=security]{background:linear-gradient(180deg,#3a2f10,#1d1606);border-color:#d9a646;color:#ffd77a}
.slot-tip{position:absolute;left:50%;bottom:calc(100% - 2.2rem);transform:translate(-50%,6px);z-index:8;width:max(100%,190px);pointer-events:none;opacity:0;
 padding:.5rem .6rem;font-size:.76rem;color:#dbe8f5;background:#060a13f5;border:1px solid var(--tc);border-radius:3px;box-shadow:0 8px 24px #000c,0 0 10px color-mix(in srgb,var(--tc) 40%,transparent);transition:opacity .12s,transform .12s}
.slot{clip-path:none}.slotgrid{overflow:visible}
.slot:hover,.slot:focus-within{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--tc),inset 0 1px 0 #ffffff2a,inset 0 0 18px #000c,0 0 16px color-mix(in srgb,var(--tc) 45%,transparent);z-index:3}
.slot:hover .slot-tip,.slot:focus .slot-tip,.slot:focus-within .slot-tip{opacity:1;transform:translate(-50%,0)}
@media (hover:none){.slot-tip{position:static;transform:none;opacity:1;width:auto;padding:0;border:0;background:none;box-shadow:none;font-size:.7rem;color:var(--mut)}.slot:hover .slot-tip,.slot:focus .slot-tip{transform:none}}
@media (max-width:767px){.slotgrid{grid-template-columns:repeat(3,1fr);gap:.45rem}.slot{padding:.3rem}.slot-name{font-size:.72rem}.slot-art .thumb{font-size:1.8rem}.rar{display:none}}
/* icon tabs (shop categories) */
.itabs{display:flex;flex-wrap:wrap;gap:.3rem;margin:.2rem 0 .8rem}
.itab{display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .7rem;font:600 .74rem/1 system-ui;letter-spacing:.1em;text-transform:uppercase;color:#9fb3cc;text-decoration:none;
 background:var(--metal);border:1px solid #2f3e5c;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transition:color .12s}
.itab::before{font-size:.95rem;filter:grayscale(.3)}
.itab:hover{color:#fff}.itab.on{color:#fff;background:linear-gradient(180deg,#1e8ea6,#0b4a5a);border-color:var(--acc);box-shadow:0 0 12px #3ee8ff66;text-shadow:0 0 6px #3ee8ff}
.t-weapons::before{content:"🗡"}.t-guns::before{content:"🔫"}.t-ammo::before{content:"⁂"}.t-armor::before{content:"🛡"}.t-gadgets::before{content:"⚙"}.t-implants::before{content:"⚡"}.t-consumables::before{content:"✚"}.t-homes::before{content:"⌂"}.t-security::before{content:"🔒"}
@media (max-width:767px){.itabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-.2rem;margin-right:-1rem;padding-bottom:.2rem}.itab{flex:none;min-height:40px}}
/* ===== game menu nav ===== */
#nav{background:linear-gradient(90deg,#070b16f0,#0a1020e0)!important;box-shadow:inset -1px 0 0 #2c3a56}
#nav .grp{font-family:"Cinzel",serif;color:#c9a95a;letter-spacing:.2em;border-bottom:1px solid #2a3550;padding-bottom:.2rem}
#nav a{position:relative;display:flex;align-items:center;gap:.55rem;border-radius:0;border-left:0;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%);transition:background .12s,color .12s}
#nav a::before{content:"•";width:1.4em;text-align:center;font-size:1rem;opacity:.75}
#nav a:hover{background:linear-gradient(90deg,#1a2740,#0000)}
#nav a.on{color:#fff;background:linear-gradient(90deg,#16677a,#0e2a3c 70%,#0000);text-shadow:0 0 8px var(--acc);box-shadow:inset 3px 0 0 var(--acc)}
#nav a.on::before{opacity:1;filter:drop-shadow(0 0 4px var(--acc))}
#nav a[href="/home"]::before{content:"⌂"}#nav a[href="/events"]::before{content:"☰"}#nav a[href="/travel"]::before{content:"➤"}#nav a[href="/map/"]::before{content:"🗺"}#nav a[href="/market"]::before{content:"⇄"}
#nav a[href="/crimes"]::before{content:"☠"}#nav a[href="/gym"]::before{content:"💪"}#nav a[href="/jail"]::before{content:"⛓"}#nav a[href="/hospital"]::before{content:"✚"}
#nav a[href="/research"]::before{content:"⚗"}#nav a[href="/buildings"]::before{content:"🏢"}#nav a[href="/enterprises"]::before{content:"🏭"}#nav a[href="/shop"]::before{content:"◈"}#nav a[href="/inventory"]::before{content:"🎒"}#nav a[href="/bank"]::before{content:"🏦"}
#nav a[href="/players"]::before{content:"👥"}#nav a[href="/family"]::before{content:"♛"}#nav a[href="/turf"]::before{content:"⚑"}#nav a[href="/chat"]::before{content:"💬"}#nav a[href="/logout"]::before{content:"⏻"}
#tabs{background:linear-gradient(180deg,#141c2cf5,#05080ff8)!important;border-top:1px solid #2c3a56;box-shadow:0 -1px 0 #3ee8ff22}
#tabs a.on{color:#fff!important;background:radial-gradient(ellipse at 50% 0,#3ee8ff40,#0000 70%);box-shadow:inset 0 2px 0 var(--acc)!important;text-shadow:0 0 8px var(--acc)}
#tabs a.on b{filter:drop-shadow(0 0 6px var(--acc))}
/* ===== stats as HUD ===== */
#stats{background:linear-gradient(180deg,#0c1322f0,#070b16e8)!important;box-shadow:inset 1px 0 0 #2c3a56}
.bar{height:12px;border-radius:0;background:repeating-linear-gradient(90deg,#0000 0 9px,#000a 9px 11px),#04070d;border:1px solid #2c3a56;box-shadow:inset 0 2px 4px #000;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);position:relative}
.bar i{box-shadow:0 0 10px currentColor,inset 0 1px 0 #ffffff66;position:relative}
.hp i{color:#ff5a6e}.sta i{color:#3ee8ff}.xp i{color:#b45cff}
.bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#0000 0 9px,#000c 9px 11px);pointer-events:none}
.stat{border-bottom:1px solid #1a2438;font-size:.86rem}
.stat b{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-variant-numeric:tabular-nums;color:#7ff3ff;text-shadow:0 0 6px #3ee8ff55}
/* ===== buttons: beveled, press animation ===== */
button,.btn{border-radius:3px;font-weight:600;letter-spacing:.04em;text-shadow:0 1px 0 #0008;
 box-shadow:inset 0 1px 0 #ffffff40,inset 0 -2px 0 #0006,0 2px 0 #000a,0 0 0 1px #0006;transition:transform .06s,box-shadow .06s,filter .12s}
button:hover:not(:disabled),.btn:hover{filter:brightness(1.15)}
button:active:not(:disabled),.btn:active{transform:translateY(2px);box-shadow:inset 0 2px 4px #0008,0 0 0 1px #0006}
input,select{border-radius:2px;box-shadow:inset 0 2px 5px #000a;border-color:#2c3a56}
table td,table th{border-bottom-color:#1a2438}
.tag{border-radius:2px;background:#0008}
.scene{border-top:0;border-bottom:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);box-shadow:inset 0 -1px 0 #c9a95a88}
#main>p.muted,#main>p.small{background:#05080fb0;padding:.4rem .6rem;border-left:2px solid #c9a95a66}
@media (prefers-reduced-motion:reduce){.slot,.slot-tip,button{transition:none!important}.slot:hover{transform:none}}
.slot.empty{opacity:.55;pointer-events:none}.slot.empty .slot-art{background:radial-gradient(circle,#141d30,#05080f);box-shadow:inset 0 0 0 1px #24314c,inset 0 0 18px #000}

/* phone inventory: kill the dark flat band above scene art */
@media (max-width:767px){
  body[data-scene=vault] #main > .scene{margin-top:0}
  body[data-scene=vault] #main{background:transparent}
  body[data-scene=vault] #main > p.muted, body[data-scene=vault] #main > p.small{background:transparent;border:0;padding:.2rem 0}
  .slot.t-legendary{box-shadow:0 0 0 1px #f0c14b,0 0 12px #f0c14b55}
  .slot.t-mythic{box-shadow:0 0 0 1px #c9a95a,0 0 16px #ff4ad855;animation:mythicPulse 2.4s ease-in-out infinite}
}
@keyframes mythicPulse{50%{box-shadow:0 0 0 1px #e8d5a3,0 0 22px #ff4ad8aa}}
.slot.t-legendary .rar{color:#f0c14b}.slot.t-mythic .rar{color:#ff4ad8}

/* place descriptions: real facts vs fictional 2030 state kept visually distinct */
.pdesc{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.3rem 0}.pdesc p{margin:.15rem 0;font-size:.9rem}
.pd-h{font:600 .72rem/1.2 system-ui;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.25rem}
.pd-real{background:#0d1420cc;border-left:3px solid #7fb3ff;padding:.5rem .7rem}.pd-real .pd-h{color:#7fb3ff}
.pd-game{background:#1a0d0dcc;border-left:3px solid #ff5a3c;padding:.5rem .7rem;font-family:ui-monospace,monospace}.pd-game .pd-h{color:#ff5a3c}
@media (max-width:767px){.pdesc{grid-template-columns:1fr}}