@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;600;700&display=swap');
:root {
  --neon-pink: #ff2bd6;
  --neon-purple: #b24bff;
  --neon-cyan: #00f0ff;
  --neon-gold: #ffe566;
  --bg-deep: #050011;
  --panel: rgba(12, 0, 28, 0.88);
  --glass: rgba(20, 0, 40, 0.72);
  --border: rgba(216, 140, 255, 0.55);
}
* { box-sizing: border-box; }
body {
  margin: 0; overflow: hidden; color: #fff;
  font-family: 'Rajdhani', 'Courier New', monospace;
  user-select: none; background: var(--bg-deep);
}

#lobby-ui {
  position: absolute; inset: 0; z-index: 100; overflow: hidden;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 90% 55% at 50% -5%, rgba(178,75,255,.4) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 15%, rgba(0,240,255,.14) 0%, transparent 50%),
    radial-gradient(ellipse 40% 35% at 10% 80%, rgba(255,43,214,.1) 0%, transparent 45%),
    linear-gradient(180deg, #14002e 0%, #050011 42%, #0a001a 100%);
}
#lobby-ui::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 30% 40%, rgba(255,43,214,.08), transparent 40%);
  animation: lobbyGlow 7s ease-in-out infinite alternate;
}
@keyframes lobbyGlow { from { opacity: .6; } to { opacity: 1; } }
#lobby-ui::after {
  content: ""; position: absolute; top: 46%; left: -50%; width: 200%; height: 110%;
  background:
    linear-gradient(rgba(0,240,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,43,214,.22) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(520px) rotateX(66deg);
  transform-origin: top center; z-index: 1;
  box-shadow: inset 0 140px 160px #050011;
  animation: gridScroll 18s linear infinite;
}
@keyframes gridScroll { to { background-position: 0 46px; } }

.menu-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 32px 52px; z-index: 2; position: relative;
}
#edp-title {
  margin: 0; font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: clamp(36px, 6.5vw, 68px); letter-spacing: 3px;
  background: linear-gradient(90deg, #ff6ec7, #c46ee0, #00f0ff, #ff6ec7);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(255,43,214,.55));
  animation: titleShine 5s linear infinite;
}
@keyframes titleShine { to { background-position: 220% center; } }
#cupcakes-count {
  font-family: 'Orbitron', sans-serif; font-size: clamp(14px, 2.4vw, 20px);
  color: #f0c8ff; padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(30,0,50,.7), rgba(10,0,25,.85));
  box-shadow: 0 0 22px rgba(178,75,255,.35), inset 0 0 12px rgba(178,75,255,.15);
  text-shadow: 0 0 10px #d88cff;
}
.menu-content {
  display: flex; justify-content: space-between; align-items: center;
  flex: 1; padding: 0 72px; z-index: 2; position: relative;
}
.menu-buttons { display: flex; flex-direction: column; gap: 16px; }
.menu-btn {
  position: relative; width: 280px; padding: 14px 28px;
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 22px;
  letter-spacing: 2px; color: #fff; cursor: pointer; text-align: center;
  border-radius: 12px; border: 2px solid var(--neon-purple);
  background: linear-gradient(135deg, rgba(178,75,255,.28), rgba(0,240,255,.1));
  box-shadow: 0 0 20px rgba(178,75,255,.35), inset 0 0 18px rgba(178,75,255,.12);
  transition: transform .15s, box-shadow .2s, border-color .2s, background .2s;
  overflow: hidden;
}
.menu-btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .45s;
}
.menu-btn:hover {
  transform: scale(1.05) translateX(8px);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 32px rgba(0,240,255,.4), 0 0 48px rgba(178,75,255,.3);
  background: linear-gradient(135deg, rgba(0,240,255,.2), rgba(178,75,255,.35));
}
.menu-btn:hover::after { transform: translateX(120%); }
.menu-character { display: flex; flex-direction: column; align-items: center; gap: 24px; }
#username {
  width: min(340px, 80vw); padding: 12px 16px; text-align: center; outline: none;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 22px; color: #fff;
  background: rgba(8,0,18,.9); border: 2px solid var(--neon-purple); border-radius: 12px;
  box-shadow: 0 0 24px rgba(178,75,255,.35); transition: border-color .2s, box-shadow .2s;
}
#username:focus { border-color: var(--neon-cyan); box-shadow: 0 0 28px rgba(0,240,255,.4); }
#menu-preview-wrap {
  position: relative;
  width: min(320px, 72vw);
  height: min(380px, 58vh);
  border-radius: 22px;
  overflow: hidden;
  border: 2px solid var(--neon-purple);
  background:
    radial-gradient(ellipse at 50% 70%, rgba(160,32,240,.35) 0%, transparent 55%),
    linear-gradient(180deg, #1a0033 0%, #050011 100%);
  box-shadow:
    0 0 0 4px rgba(178,75,255,.22),
    0 0 48px rgba(178,75,255,.45),
    inset 0 0 40px rgba(0,0,0,.5);
}
#menu-preview-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}
#menu-preview-canvas:active { cursor: grabbing; }
#menu-preview-label {
  position: absolute; bottom: 10px; left: 0; right: 0; z-index: 3;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: #e0b0ff;
  text-shadow: 0 0 10px #a020f0;
  pointer-events: none;
}

#ui {
  position: absolute; top: 16px; left: 16px; z-index: 5; display: none;
  min-width: 220px; padding: 14px 16px; border-radius: 14px;
  font-family: 'Orbitron', sans-serif; font-size: 13px; color: #f0c8ff;
  background: linear-gradient(145deg, rgba(10,0,22,.9), rgba(35,0,55,.78));
  border: 1px solid var(--border);
  box-shadow: 0 0 24px rgba(178,75,255,.28), inset 0 0 16px rgba(178,75,255,.08);
  backdrop-filter: blur(10px); text-shadow: 0 0 8px #a020f0;
}
#ui #score { color: #fff; font-size: 22px; letter-spacing: 1px; }
#weapon-ui {
  position: absolute; bottom: 18px; right: 18px; z-index: 5; display: none;
  min-width: 170px; padding: 14px 20px; text-align: right; border-radius: 14px;
  font-family: 'Orbitron', sans-serif; color: #fff;
  background: linear-gradient(225deg, rgba(10,0,22,.92), rgba(30,0,50,.8));
  border: 1px solid rgba(0,240,255,.45);
  box-shadow: 0 0 26px rgba(0,240,255,.2), inset 0 0 14px rgba(178,75,255,.1);
  backdrop-filter: blur(10px);
}
#weapon-name {
  display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #9ae8ff;
}
#ammo-text {
  display: block; margin-top: 2px; font-size: 32px; color: var(--neon-gold);
  text-shadow: 0 0 14px rgba(255,230,100,.5); font-variant-numeric: tabular-nums;
}
#health-bar, #shield-bar {
  width: 200px; margin-top: 10px; border-radius: 6px; overflow: hidden;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.3);
  box-shadow: inset 0 0 8px rgba(0,0,0,.55);
}
#health-bar { height: 12px; }
#shield-bar { height: 8px; margin-top: 5px; }
#health-fill {
  height: 100%; width: 100%; transition: width .2s;
  background: linear-gradient(90deg, #00c853, #69f0ae);
  box-shadow: 0 0 10px rgba(0,255,120,.5);
}
#shield-fill {
  height: 100%; width: 100%; transition: width .2s;
  background: linear-gradient(90deg, #00b0ff, #40c4ff);
  box-shadow: 0 0 8px rgba(0,200,255,.45);
}
#inventory-ui {
  position: absolute; bottom: 128px; right: 18px; z-index: 5; display: none;
  padding: 10px 12px; border-radius: 12px; font-size: 13px; text-align: right; color: #bbb;
  background: linear-gradient(225deg, rgba(8,0,16,.85), rgba(22,0,38,.75));
  border: 1px solid rgba(178,75,255,.4); box-shadow: 0 0 16px rgba(178,75,255,.2);
  backdrop-filter: blur(8px);
}
.inv-slot { margin-bottom: 4px; padding: 3px 8px; border-radius: 6px; }
.inv-active {
  color: #fff; font-weight: 700; background: rgba(178,75,255,.28);
  border: 1px solid rgba(216,140,255,.45); text-shadow: 0 0 8px #d88cff;
}

#crosshair {
  position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
  transform: translate(-50%, -50%); pointer-events: none; display: none; z-index: 5;
}
#crosshair::before, #crosshair::after {
  content: ""; position: absolute; background: #ffe566; box-shadow: 0 0 8px #ff0;
}
#crosshair::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
#crosshair::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }
#hit-marker {
  position: absolute; top: 50%; left: 50%; width: 30px; height: 30px;
  transform: translate(-50%, -50%) scale(.55); pointer-events: none; opacity: 0; z-index: 6;
  transition: opacity .08s, transform .08s;
}
#hit-marker.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#hit-marker span { position: absolute; width: 11px; height: 2px; background: #fff; box-shadow: 0 0 5px #fff; }
#hit-marker span:nth-child(1) { top: 2px; left: 2px; transform: rotate(45deg); }
#hit-marker span:nth-child(2) { top: 2px; right: 2px; transform: rotate(-45deg); }
#hit-marker span:nth-child(3) { bottom: 2px; left: 2px; transform: rotate(-45deg); }
#hit-marker span:nth-child(4) { bottom: 2px; right: 2px; transform: rotate(45deg); }
#damage-flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0;
  background: radial-gradient(circle at center, transparent 35%, rgba(180,0,40,.55) 100%);
  transition: opacity .15s;
}

#instructions {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 10; display: none; cursor: pointer; text-align: center; max-width: 440px;
  padding: 34px 38px; border-radius: 18px; color: #f0c8ff;
  background: linear-gradient(160deg, rgba(14,0,30,.96), rgba(42,0,72,.93));
  border: 2px solid var(--neon-purple);
  box-shadow: 0 0 42px rgba(178,75,255,.45), inset 0 0 28px rgba(178,75,255,.1);
  backdrop-filter: blur(12px);
}
#instructions h2 {
  margin: 0 0 12px; font-family: 'Orbitron', sans-serif; font-size: 26px; color: #fff;
  text-shadow: 0 0 16px #d88cff;
}

#freeze-cam-ui {
  display: none; position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%);
  z-index: 25; text-align: center; pointer-events: none;
  font-family: 'Orbitron', sans-serif;
  text-shadow: 0 2px 8px #000, 0 0 18px rgba(0,0,0,.9);
}
#freeze-cam-ui.show { display: block; animation: freezeIn .35s ease-out; }
@keyframes freezeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(18px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#freeze-cam-label { font-size: 13px; letter-spacing: 3px; color: #ffcc66; margin-bottom: 4px; text-transform: uppercase; }
#freeze-cam-name { font-size: clamp(28px, 5vw, 48px); font-weight: 900; color: #fff; letter-spacing: 2px; line-height: 1.1; }
#freeze-cam-weapon { margin-top: 6px; font-size: 14px; color: #c8b0ff; letter-spacing: 1px; }
#freeze-cam-vignette {
  display: none; position: fixed; inset: 0; z-index: 8; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.55) 100%);
}
#freeze-cam-vignette.show { display: block; }

#game-over {
  display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 10; text-align: center; padding: 44px 48px; border-radius: 20px;
  font-family: 'Orbitron', sans-serif; font-size: 48px; font-weight: 900; color: #ff4d6d;
  text-shadow: 0 0 22px rgba(255,40,80,.7);
  background: linear-gradient(160deg, rgba(22,0,12,.96), rgba(60,0,22,.92));
  border: 2px solid #ff4d6d; box-shadow: 0 0 50px rgba(255,40,80,.35);
}
#respawn-btn {
  margin-top: 20px; padding: 12px 28px; cursor: pointer; border-radius: 12px;
  border: 2px solid #fff; color: #fff; font-family: 'Orbitron', sans-serif; font-size: 18px;
  background: linear-gradient(135deg, #ff1744, #c51162);
  box-shadow: 0 0 20px rgba(255,20,60,.4); transition: transform .15s, box-shadow .15s;
}
#respawn-btn:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(255,20,60,.55); }

#chat-container {
  position: absolute; bottom: 18px; left: 18px; width: 360px; max-height: 240px;
  display: none; flex-direction: column; z-index: 20; pointer-events: none;
}
#chat-log {
  background: linear-gradient(180deg, rgba(8,0,16,.8), rgba(16,0,30,.85));
  border: 1px solid rgba(178,75,255,.5); border-radius: 12px 12px 0 0;
  padding: 10px 12px; overflow-y: auto; max-height: 170px; font-size: 13px;
  line-height: 1.4; pointer-events: auto; backdrop-filter: blur(8px);
  box-shadow: 0 0 18px rgba(178,75,255,.2);
}
#chat-log div { margin-bottom: 4px; word-wrap: break-word; }
#chat-log .sys { color: #9a9aaa; font-style: italic; }
#chat-log .me { color: #e8b8ff; }
#chat-log .other { color: #7dffb3; }
#chat-input-row { display: flex; pointer-events: auto; }
#chat-input {
  flex: 1; padding: 10px 12px; outline: none; color: #fff; font-size: 14px;
  font-family: 'Rajdhani', monospace;
  background: rgba(12,0,22,.94); border: 1px solid rgba(178,75,255,.5);
  border-top: none; border-radius: 0 0 0 12px;
}
#chat-input:focus { border-color: var(--neon-cyan); }
#chat-send {
  width: 64px; padding: 10px; cursor: pointer; font-weight: 700; color: #fff;
  border: 1px solid rgba(178,75,255,.5); border-left: none; border-top: none;
  border-radius: 0 0 12px 0;
  background: linear-gradient(135deg, #7d27b7, #a020f0);
  transition: background .15s;
}
#chat-send:hover { background: linear-gradient(135deg, #a020f0, #00c8ff); }
#chat-hint { font-size: 11px; color: #aaa; margin-top: 5px; text-shadow: 1px 1px 2px #000; }
#player-count {
  position: absolute; top: 16px; right: 16px; z-index: 5; display: none;
  padding: 8px 14px; border-radius: 10px; font-family: 'Orbitron', sans-serif;
  font-size: 13px; color: #e0b0ff; text-shadow: 0 0 8px #a020f0;
  background: linear-gradient(135deg, rgba(12,0,24,.88), rgba(30,0,50,.75));
  border: 1px solid var(--border); box-shadow: 0 0 16px rgba(178,75,255,.25);
  backdrop-filter: blur(8px);
}
#kill-feed {
  position: absolute; top: 54px; right: 16px; width: 320px; z-index: 10;
  display: flex; flex-direction: column; align-items: flex-end; pointer-events: none;
}
.kill-feed-item {
  background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(30,0,50,.82));
  color: #fff; padding: 8px 14px; margin-bottom: 6px; border-radius: 8px;
  border-right: 3px solid var(--neon-purple); font-size: 13px;
  animation: fadeOut 5s forwards; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 0 12px rgba(178,75,255,.2);
}
.kill-feed-killer { color: #7dffb3; font-weight: 700; }
.kill-feed-victim { color: #ff6b7a; font-weight: 700; }
.kill-feed-weapon { color: #aaa; font-size: 11px; font-style: italic; }
@keyframes fadeOut {
  0%, 80% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(24px); }
}

#mode-modal {
  position: fixed; inset: 0; display: none; place-items: center; z-index: 200;
  padding: 28px; background: rgba(0,0,0,.8); backdrop-filter: blur(6px);
}
#mode-panel {
  width: min(1180px, 94vw); max-height: 92vh; overflow: auto; padding: 30px;
  border-radius: 22px; text-align: center;
  background: linear-gradient(160deg, rgba(14,0,28,.97), rgba(28,0,48,.95));
  border: 2px solid var(--neon-purple);
  box-shadow: 0 0 50px rgba(178,75,255,.45);
}
#mode-panel h2 {
  font-family: 'Orbitron', sans-serif; font-size: 36px; margin: 0 0 24px;
  letter-spacing: 2px; color: #fff; text-shadow: 0 0 18px #d88cff;
}
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mode-choice {
  position: relative; display: flex; align-items: flex-end; min-height: 230px;
  overflow: hidden; border: 2px solid var(--neon-purple); border-radius: 16px;
  background-color: #1b1024; background-position: center; background-size: cover;
  color: #fff; cursor: pointer; text-align: left;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.mode-choice::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.08) 100%);
}
.mode-choice:hover {
  transform: scale(1.03); border-color: var(--neon-cyan);
  box-shadow: 0 15px 38px rgba(0,240,255,.3);
}
.mode-choice-content { position: relative; z-index: 2; padding: 20px; width: 100%; }
.mode-choice-title { display: block; font: 700 28px 'Orbitron', sans-serif; text-shadow: 0 3px 8px #000; margin-bottom: 6px; }
.mode-choice-subtitle { display: block; font: 15px 'Rajdhani', monospace; color: #ddd; }
.mode-choice-1{background-image:url('images/ffa.png')}
.mode-choice-2{background-image:url('images/ctf.jpg')}
.mode-choice-3{background-image:url('images/pve.jpg')}
.mode-choice-4{background-image:url('images/story.png')}
.mode-choice-number {
  position: absolute; z-index: 3; top: 12px; left: 14px; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.75); background: rgba(0,0,0,.62);
  font: 700 16px 'Orbitron', monospace;
}
.mode-key-hint { margin-top: 18px; color: #cdb6d9; font: 700 13px 'Rajdhani', monospace; }
#room-label { position: absolute; top: 70px; left: 18px; color: #fff; font-size: 15px; z-index: 6; font-family: 'Orbitron', sans-serif; text-shadow: 0 0 8px #a020f0; }
#team-badge { position: absolute; top: 100px; left: 18px; width: 64px; height: 64px; object-fit: contain; display: none; z-index: 6; }
#objective-ui {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 6; display: none;
  color: #fff; padding: 10px 20px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(20,0,40,.88), rgba(40,0,70,.8));
  border: 1px solid var(--border); box-shadow: 0 0 18px rgba(178,75,255,.3);
  font-family: 'Orbitron', sans-serif; font-size: 13px;
}

#story-overlay{position:fixed;inset:0;display:none;place-items:center;background:rgba(5,0,18,.92);z-index:600;color:#fff}
#story-panel{width:min(720px,88vw);background:linear-gradient(145deg,#160022,#45105f);border:2px solid #d88cff;box-shadow:0 0 50px #a020f0;padding:34px;border-radius:22px;text-align:left}
#story-panel h2{font:italic bold 38px Georgia;margin:0 0 8px;color:#f0c8ff}
#story-chapter{font:bold 18px "Courier New";color:#d88cff;margin-bottom:18px}
#story-text{font:18px/1.55 "Courier New";color:#eee;min-height:130px;white-space:pre-line}
#story-objective{font:bold 18px "Courier New";color:#7dffb3;margin:18px 0}
#story-key-hint{margin-top:12px;color:#d8b5ff;font:bold 14px 'Courier New';text-align:right}
#story-continue{display:none;margin:18px 0 0 auto;padding:12px 28px;background:linear-gradient(135deg,#8a2be2,#00c8ff);color:#fff;border:2px solid #fff;border-radius:10px;font:bold 18px Georgia;cursor:pointer}
#story-continue:hover{filter:brightness(1.15)}
#story-banner{position:absolute;top:72px;left:50%;transform:translateX(-50%);display:none;z-index:8;background:rgba(20,0,40,.86);border:1px solid #d88cff;border-radius:10px;padding:9px 18px;color:#fff;font:bold 17px "Courier New";text-align:center}
#story-phone{position:fixed;right:24px;bottom:24px;width:min(360px,88vw);display:none;z-index:650;background:#101016;border:2px solid #8a2be2;border-radius:24px;box-shadow:0 15px 60px #000;padding:16px;color:#fff;font-family:Arial}
#story-phone-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #444;padding-bottom:10px;margin-bottom:10px}
#story-phone-name{font-weight:bold;color:#e5b6ff;font-size:18px}
#story-phone-close{background:none;border:0;color:#aaa;font-size:22px;cursor:pointer}
#story-messages{height:230px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:4px}
.story-msg{max-width:82%;padding:9px 11px;border-radius:14px;line-height:1.3;font-size:14px}
.story-msg.them{align-self:flex-start;background:#292936}
.story-msg.me{align-self:flex-end;background:#7d27b7}
#story-replies{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.story-reply{flex:1;min-width:100px;background:#24242e;color:#fff;border:1px solid #8a2be2;border-radius:12px;padding:8px;cursor:pointer}
.story-reply:hover{background:#5d237a}
#story-interact{position:fixed;left:50%;bottom:82px;transform:translateX(-50%);display:none;z-index:30;background:rgba(0,0,0,.8);border:1px solid #e0b0ff;border-radius:10px;padding:8px 14px;color:#fff;font:bold 15px Arial}
#story-dialog{position:fixed;inset:0;display:none;place-items:end center;z-index:700;pointer-events:none;padding-bottom:55px}
.story-dialog-card{width:min(760px,90vw);background:rgba(8,8,12,.95);border:2px solid #d88cff;border-radius:16px;padding:18px 22px;box-shadow:0 10px 50px #000;pointer-events:auto}
.story-dialog-name{font:bold 22px Arial;color:#d88cff;margin-bottom:8px}
.story-dialog-text{font:18px/1.45 Arial;color:#fff;min-height:54px}
.story-dialog-next{display:none;margin-top:12px;padding:9px 18px;border-radius:9px;border:1px solid #fff;background:#7d27b7;color:#fff;font-weight:bold;cursor:pointer}

.menu-small-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 105px; min-height: 42px; padding: 8px 16px;
  border: 2px solid var(--neon-purple); border-radius: 12px;
  background: linear-gradient(135deg, rgba(178,75,255,.45), rgba(100,20,160,.6));
  color: #fff; font: 700 15px 'Orbitron', sans-serif; letter-spacing: 1px;
  cursor: pointer; box-shadow: 0 0 16px rgba(178,75,255,.35); transition: transform .15s, box-shadow .15s;
}
.menu-small-btn:hover { transform: scale(1.05); box-shadow: 0 0 24px rgba(0,240,255,.35); border-color: var(--neon-cyan); }
.menu-account-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.menu-account-btn.signup { background: linear-gradient(135deg, #d88cff, #7d27b7); color: #12001c; }

#account-ui, #shop-ui, #locker-ui {
  position: fixed; inset: 0; z-index: 1000; display: none; place-items: center;
  padding: 24px; background: rgba(5,0,15,.9); backdrop-filter: blur(8px);
}
.account-panel, .store-panel {
  width: min(960px, 94vw); max-height: 90vh; overflow: auto; padding: 28px 30px;
  border-radius: 22px; text-align: center; color: #fff;
  border: 2px solid var(--neon-purple);
  background: linear-gradient(150deg, #10001c 0%, #2a0848 50%, #12001c 100%);
  box-shadow: 0 0 50px rgba(178,75,255,.5), inset 0 0 40px rgba(178,75,255,.08);
}
.account-panel h2, .store-panel h2 {
  margin: 0 0 18px; font-family: 'Orbitron', sans-serif; font-size: 32px;
  color: #f0c8ff; text-shadow: 0 0 16px #d88cff;
}
#store-balance {
  display: inline-block; margin-left: 10px; padding: 4px 12px; border-radius: 999px;
  font-size: 14px; background: rgba(0,0,0,.35); border: 1px solid var(--border);
  color: var(--neon-gold);
}
.auth-tabs, .store-tabs {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.auth-tabs button, .store-tabs button, .account-actions button,
.store-card button, .locker-slot button, .crate-actions button {
  border: 1px solid rgba(255,255,255,.7); border-radius: 10px; padding: 10px 16px;
  background: linear-gradient(135deg, #7d27b7, #5a1a90); color: #fff;
  font: 700 14px 'Orbitron', monospace; cursor: pointer; letter-spacing: .5px;
  transition: transform .12s, box-shadow .12s, background .12s;
}
.auth-tabs button:hover, .store-tabs button:hover, .account-actions button:hover,
.store-card button:hover, .locker-slot button:hover, .crate-actions button:hover {
  background: linear-gradient(135deg, #a020f0, #00c8ff); transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(0,240,255,.3);
}
.auth-tabs button.active, .store-tabs button.active {
  background: linear-gradient(135deg, #d88cff, #00e5ff); color: #12001c;
  box-shadow: 0 0 18px rgba(0,240,255,.35);
}
.account-field {
  display: block; width: min(520px, 100%); margin: 10px auto; padding: 13px 15px;
  border: 2px solid #8a2be2; border-radius: 10px; background: #09000e; color: #fff;
  font: 16px 'Rajdhani', monospace; outline: none;
}
.account-field:focus { border-color: var(--neon-cyan); }
.account-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
#auth-status { min-height: 22px; margin-top: 14px; color: #bfffcf; }

.store-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; text-align: left;
}
.store-card, .locker-slot {
  padding: 14px; border: 1px solid rgba(178,75,255,.45); border-radius: 14px;
  background: linear-gradient(160deg, rgba(0,0,0,.4), rgba(40,0,70,.35));
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.store-card:hover {
  transform: translateY(-3px); border-color: var(--neon-cyan);
  box-shadow: 0 8px 24px rgba(0,240,255,.2);
}
.store-card-image {
  width: 100%; height: 140px; object-fit: contain; display: block; margin: 0 auto 10px;
  border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.store-card h3 { margin: 0 0 6px; color: #f0c8ff; font-family: 'Orbitron', sans-serif; font-size: 15px; }
.store-card .rarity {
  display: inline-block; margin-bottom: 6px; padding: 3px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 900; text-transform: uppercase; background: #252525; color: #ddd;
}
.store-card .rarity.common{color:#ddd}.store-card .rarity.uncommon{color:#7dff9b}
.store-card .rarity.rare{color:#71b7ff}.store-card .rarity.epic{color:#d98cff}
.store-card .rarity.legendary{color:#ffb14a}.store-card .rarity.mythic{color:#ff5f9e}

.crate-section { display: none; text-align: left; margin-bottom: 8px; }
#market-section { display:none; text-align:left; margin-bottom:12px; }
#market-section.show { display:block; }
.market-listing {
  display:grid; grid-template-columns: 72px 1fr auto; gap:12px; align-items:center;
  padding:12px; margin-bottom:10px; border-radius:12px;
  background:rgba(20,0,40,.55); border:1px solid rgba(178,75,255,.35);
  transition: border-color .15s, box-shadow .15s;
}
.market-listing:hover {
  border-color: rgba(0,240,255,.45);
  box-shadow: 0 0 18px rgba(178,75,255,.2);
}
.market-listing img { width:72px; height:72px; object-fit:contain; border-radius:8px; background:rgba(0,0,0,.3); }
.market-listing .ml-name { font-family:Orbitron,sans-serif; font-size:14px; color:#fff; }
.market-listing .ml-meta { font-size:12px; color:#b8a0d8; margin-top:4px; }
.market-listing .ml-desc { font-size:12px; color:#9ad; margin-top:4px; font-style:italic; }
.market-listing .ml-price { font-family:Orbitron,sans-serif; color:#5ef0c0; font-size:16px; white-space:nowrap; }
.market-listing .ml-actions { display:flex; flex-direction:column; gap:6px; align-items:stretch; margin-top:8px; }
.market-listing .ml-actions button {
  border:1px solid rgba(255,255,255,.55); border-radius:8px; padding:8px 12px;
  font:700 12px Orbitron,sans-serif; letter-spacing:.5px; cursor:pointer; color:#fff;
  background:linear-gradient(135deg,#7d27b7,#5a1a90);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.market-listing .ml-actions button:hover {
  background:linear-gradient(135deg,#a020f0,#00c8ff); transform:translateY(-1px);
  box-shadow:0 0 12px rgba(0,240,255,.3);
}
.market-listing .ml-actions button.ml-inspect {
  background:linear-gradient(135deg,#1a2040,#2a3060); border-color:rgba(0,240,255,.5);
}
.market-listing .ml-actions button.ml-buy {
  background:linear-gradient(135deg,#0a6040,#108050); border-color:rgba(94,240,192,.55);
}
.market-listing .ml-actions button.ml-cancel {
  background:linear-gradient(135deg,#602020,#903030); border-color:rgba(255,100,100,.5);
}
.market-listing .ml-actions button:disabled { opacity:.45; cursor:not-allowed; transform:none; }

.crate-section.show { display: block; }
.crate-hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; margin-bottom: 18px;
}
@media (max-width: 700px) { .crate-hero { grid-template-columns: 1fr; } }
.crate-card {
  position: relative; padding: 20px; border-radius: 16px; overflow: hidden;
  border: 2px solid rgba(255,180,50,.45);
  background:
    radial-gradient(circle at 80% 20%, rgba(255,180,50,.2), transparent 50%),
    linear-gradient(145deg, rgba(40,20,0,.7), rgba(20,0,30,.85));
  box-shadow: 0 0 28px rgba(255,160,0,.2);
}
.crate-card.legendary {
  border-color: rgba(255,43,214,.55);
  background:
    radial-gradient(circle at 80% 20%, rgba(255,43,214,.25), transparent 50%),
    linear-gradient(145deg, rgba(50,0,40,.75), rgba(15,0,30,.9));
  box-shadow: 0 0 28px rgba(255,43,214,.25);
}
.crate-card h3 {
  margin: 0 0 8px; font-family: 'Orbitron', sans-serif; font-size: 20px; color: #ffe8a0;
}
.crate-card.legendary h3 { color: #ffb0ef; }
.crate-card p { margin: 0 0 14px; color: #ccc; font-size: 14px; line-height: 1.4; }
.crate-price {
  display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 8px;
  background: rgba(0,0,0,.4); color: var(--neon-gold); font-weight: 700; font-size: 14px;
}
.crate-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 0 0 16px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(178,75,255,.5);
  background: linear-gradient(90deg, rgba(30,0,45,.55), rgba(10,0,25,.6));
}
.crate-counts { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 800; font-size: 14px; }
.crate-counts b { color: var(--neon-cyan); }
.crate-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.crate-actions button.primary {
  background: linear-gradient(135deg, #ff9800, #ff2bd6); border-color: #fff;
  box-shadow: 0 0 16px rgba(255,100,50,.35);
}
.crate-result {
  display: none; margin: 0 0 16px; padding: 18px; text-align: center;
  border: 2px solid #d88cff; border-radius: 14px;
  background: radial-gradient(circle at center, rgba(80,0,120,.45), rgba(0,0,0,.55));
  animation: cratePop .35s ease;
}
.crate-result.show { display: block; }
.crate-result img { width: 110px; height: 110px; object-fit: contain; display: block; margin: 0 auto 8px; border-radius: 10px; background: rgba(255,255,255,.04); }
@keyframes cratePop {
  from { transform: scale(.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
#crate-shop-grid { display: none; }
#crate-shop-grid.show { display: grid; }

.locker-layout {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px; text-align: left;
}
.locker-layout > div {
  padding: 16px; border: 1px solid rgba(178,75,255,.45); border-radius: 14px;
  background: rgba(0,0,0,.32);
}
.locker-layout h3 { margin-top: 0; color: #d88cff; font-family: 'Orbitron', sans-serif; }
.locker-slot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px;
}

#settings-ui { position: fixed; inset: 0; display: none; place-items: center; background: rgba(0,0,0,.8); z-index: 900; }
#settings-panel {
  width: min(520px, 92vw); padding: 28px; border-radius: 18px; color: #fff;
  border: 2px solid var(--neon-purple);
  background: linear-gradient(150deg, #120018, #2a0840);
  box-shadow: 0 0 40px rgba(178,75,255,.4);
}
#settings-panel h2 { margin: 0 0 20px; font-family: 'Orbitron', sans-serif; font-size: 28px; color: #d88cff; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 0; border-bottom: 1px solid #492050;
}
.settings-row select { font: 700 16px 'Rajdhani', sans-serif; padding: 9px 12px; border: 2px solid #000; border-radius: 8px; }
.settings-note { color: #aaa; font: 14px 'Rajdhani', sans-serif; margin-top: 14px; line-height: 1.5; }
#loading-status {
  position: fixed; inset: 0; display: none; place-items: center; z-index: 850;
  background: #08000d; color: #d88cff; font: 700 26px 'Orbitron', sans-serif; text-align: center;
}
#loading-status span { display: block; font-size: 14px; color: #aaa; margin-top: 10px; font-weight: 500; font-family: 'Rajdhani', sans-serif; }

@media (max-width: 760px) {
  .mode-grid { grid-template-columns: 1fr; }
  .menu-content { flex-direction: column; padding: 20px; gap: 30px; }
  .menu-btn { width: 100%; max-width: 300px; }
  .menu-small-btn { min-width: auto; padding: 7px 10px; font-size: 12px; }
  .account-panel, .store-panel { padding: 18px; }
}

.crate-card-featured {
  max-width: 420px; margin: 0 auto; text-align: center;
  border: 2px solid #ffb14a !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,180,50,.28), transparent 55%),
    linear-gradient(145deg, rgba(40,22,0,.85), rgba(20,0,30,.92)) !important;
  box-shadow: 0 0 40px rgba(255,160,0,.35), inset 0 0 30px rgba(255,180,50,.08) !important;
  position: relative; overflow: hidden;
}
.crate-card-glow {
  position: absolute; inset: -40%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent, rgba(255,180,50,.2), transparent 30%);
  animation: crateSpin 8s linear infinite;
}
@keyframes crateSpin { to { transform: rotate(360deg); } }
.crate-buy-btn {
  display: inline-block; margin-top: 8px; padding: 14px 32px; cursor: pointer;
  border: 2px solid #fff; border-radius: 12px;
  font: 800 16px Orbitron, sans-serif; letter-spacing: 1px; color: #1a0a00;
  background: linear-gradient(135deg, #ffcc66, #ff8a00 45%, #ff2bd6);
  box-shadow: 0 0 24px rgba(255,140,0,.5), 0 6px 0 #a05000;
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.crate-buy-btn:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.08); }
.crate-roll-overlay {
  display: none; position: fixed; inset: 0; z-index: 1200; place-items: center;
  background: rgba(0,0,0,.88); backdrop-filter: blur(6px);
}
.crate-roll-overlay.show { display: grid; }
.crate-roll-panel {
  width: min(720px, 94vw); padding: 24px; border-radius: 18px; text-align: center;
  border: 2px solid #d88cff; background: linear-gradient(160deg, #12001c, #2a0848);
  box-shadow: 0 0 50px rgba(178,75,255,.45);
}
.crate-roll-title { font: 800 22px Orbitron, sans-serif; color: #f0c8ff; margin-bottom: 16px; letter-spacing: 2px; }
.crate-roll-window {
  position: relative; height: 120px; overflow: hidden; border-radius: 12px;
  border: 2px solid rgba(255,255,255,.25); background: #0a0014;
}
.crate-roll-track { display: flex; height: 100%; will-change: transform; }
.crate-roll-item {
  flex: 0 0 110px; width: 110px; height: 100%; box-sizing: border-box;
  border-right: 1px solid rgba(255,255,255,.08); padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.crate-roll-item img { width: 64px; height: 64px; object-fit: contain; }
.crate-roll-item span { font-size: 10px; color: #ddd; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crate-roll-item.crate-roll-mystery {
  background: radial-gradient(circle at 50% 40%, rgba(255,43,214,.25), transparent 70%);
  box-shadow: inset 0 0 18px rgba(255,43,214,.35);
}
.crate-roll-item.crate-roll-mystery img {
  filter: drop-shadow(0 0 8px #ff2bd6);
  animation: mysteryPulse 1.4s ease-in-out infinite alternate;
}
@keyframes mysteryPulse {
  from { transform: scale(0.92); opacity: 0.85; }
  to { transform: scale(1.05); opacity: 1; }
}
.crate-roll-marker {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%);
  background: #ffe566; box-shadow: 0 0 12px #ff0; z-index: 2; pointer-events: none;
}
.crate-roll-result { min-height: 40px; margin-top: 14px; color: #fff; font: 700 16px Rajdhani, sans-serif; }
.crate-roll-close { display: none; margin-top: 12px; padding: 10px 22px; border-radius: 10px; border: 1px solid #fff; background: #7d27b7; color: #fff; font-weight: 800; cursor: pointer; }
.crate-roll-close.show { display: inline-block; }
.quality-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; text-transform: uppercase; margin-right: 6px; }
.quality-normal { color: #1a1a00; background: #ffe566; }
.quality-strange { color: #1a0a00; background: #ff9800; }
.quality-unusual { color: #fff; background: linear-gradient(135deg,#9c27b0,#7c4dff); }
.quality-gifted { color: #1a0010; background: #ff5f9e; }
.store-card.owned-card { opacity: .92; border-style: dashed; }
.store-card .owned-tag { color: #7dff9b; font-weight: 800; font-size: 12px; }
.tf2-inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; text-align: left; }
.tf2-slot {
  position: relative; min-height: 170px; padding: 10px; border-radius: 10px;
  background: linear-gradient(180deg, #2a2a32, #15151a); border: 2px solid #555; cursor: pointer;
}
.tf2-slot:hover { border-color: #d88cff; }
.tf2-slot img { width: 100%; height: 80px; object-fit: contain; display: block; margin-bottom: 6px; }
.tf2-slot .tf2-name { font: 700 13px Rajdhani, sans-serif; color: #eee; }
.tf2-slot .tf2-desc { font-size: 11px; color: #999; margin-top: 4px; max-height: 34px; overflow: hidden; }
.tf2-slot .tf2-meta { font-size: 11px; margin-top: 6px; color: #ccc; }
.tf2-slot.equipped { outline: 2px solid #7dff9b; }
.tf2-slot.q-normal { border-color: #c9b44a; box-shadow: inset 0 0 18px rgba(255,230,100,.12); }
.tf2-slot.q-strange { border-color: #ff9800; box-shadow: inset 0 0 18px rgba(255,152,0,.18); }
.tf2-slot.q-unusual { border-color: #9c27b0; box-shadow: inset 0 0 22px rgba(156,39,176,.25); }
.tf2-slot.q-gifted { border-color: #ff5f9e; box-shadow: inset 0 0 18px rgba(255,95,158,.2); }
.tf2-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.tf2-actions button { flex: 1; min-width: 60px; padding: 6px 8px; font-size: 11px; }
.item-tooltip-gifted { color: #ff9ec8; font-style: italic; font-size: 12px; margin-bottom: 4px; }

.tf2-actions button, .store-card-actions button {
  flex: 1; min-width: 58px; padding: 8px 10px; font-size: 11px; font-weight: 800;
  letter-spacing: .4px; border-radius: 8px; cursor: pointer; border: 1px solid transparent;
  font-family: Orbitron, sans-serif; transition: transform .12s, filter .12s, box-shadow .12s;
}
.tf2-actions button:hover, .store-card-actions button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-equip {
  color: #041a0a !important; background: linear-gradient(135deg,#7dff9b,#2ecc71) !important;
  border-color: #b6ffcb !important; box-shadow: 0 0 12px rgba(46,204,113,.35);
}
.btn-equip.is-equipped {
  color: #c8ffd8 !important; background: linear-gradient(135deg,#1e4630,#0d2818) !important;
  border-color: #7dff9b !important;
}
.btn-sell {
  color: #1a1200 !important; background: linear-gradient(135deg,#ffd27a,#ff9800) !important;
  border-color: #ffe0a0 !important; box-shadow: 0 0 12px rgba(255,152,0,.3);
}
.btn-gift {
  color: #1a0010 !important; background: linear-gradient(135deg,#ff9ec8,#ff2bd6) !important;
  border-color: #ffc0e0 !important; box-shadow: 0 0 12px rgba(255,43,214,.35);
}
.btn-buy {
  color: #0a0618 !important; background: linear-gradient(135deg,#d88cff,#7d27b7) !important;
  border-color: #f0c8ff !important; box-shadow: 0 0 12px rgba(178,75,255,.35);
}
.store-card-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.store-card-image {
  width: 100%; height: 140px; object-fit: contain; border-radius: 10px;
  background: radial-gradient(circle at 50% 40%, #2a1040, #0a0014 70%);
  border: 1px solid rgba(216,140,255,.25);
}

.btn-redeem {
  width: 100%; padding: 12px 18px; cursor: pointer; border-radius: 10px;
  border: 2px solid #fff; font: 800 14px Orbitron, sans-serif; letter-spacing: 1px;
  color: #1a0010;
  background: linear-gradient(135deg, #ff9ec8, #ff2bd6 50%, #a020f0);
  box-shadow: 0 0 20px rgba(255,43,214,.45), 0 4px 0 #7a1058;
  transition: transform .12s, filter .12s, box-shadow .12s;
}
.btn-redeem:hover {
  transform: translateY(-2px) scale(1.02); filter: brightness(1.08);
  box-shadow: 0 0 28px rgba(255,43,214,.6), 0 6px 0 #7a1058;
}
.btn-redeem:active { transform: translateY(2px); box-shadow: 0 0 12px rgba(255,43,214,.35), 0 2px 0 #7a1058; }

.quality-decorated_unusual, .quality-decorated { color: #fff; background: linear-gradient(135deg,#ff1a1a,#8b0000); border: 1px solid #ff6666; }
.quality-limited { color: #003300; background: linear-gradient(135deg,#39ff14,#00c853); border: 1px solid #69f0ae; box-shadow: 0 0 10px rgba(57,255,20,.35); }
.quality-mutated { color: #001a12; background: linear-gradient(135deg,#00e5a0,#00b4d8); border: 1px solid #5ef0c0; box-shadow: 0 0 12px rgba(0,229,160,.35); }
.tf2-slot.q-mutated { border-color: #00e5a0; box-shadow: inset 0 0 18px rgba(0,229,160,.18); }
.tf2-slot.q-limited { border-color: #39ff14; box-shadow: inset 0 0 20px rgba(57,255,20,.2), 0 0 12px rgba(0,200,83,.25); }
.quality-badge.limited-tag { margin-left: 4px; }
.tf2-slot.q-decorated_unusual { border-color: #ff1a1a; box-shadow: inset 0 0 24px rgba(255,30,30,.35), 0 0 12px rgba(255,0,0,.25); }
.strange-title { color: #ffb14a; font-weight: 800; font-size: 11px; margin-top: 2px; }

#inspect-overlay {
  display:none; position:fixed; inset:0; z-index:2500; place-items:center;
  background:radial-gradient(ellipse at center, rgba(40,0,70,.55), rgba(0,0,0,.92));
  backdrop-filter:blur(10px); padding:16px;
}
#inspect-panel {
  width:min(920px,96vw); max-height:92vh; overflow:auto; padding:0; border-radius:20px;
  background:linear-gradient(165deg,rgba(12,0,26,.98),rgba(28,0,48,.96) 50%, rgba(8,0,18,.98));
  border:2px solid rgba(216,140,255,.55);
  box-shadow:0 0 60px rgba(178,75,255,.45), inset 0 0 40px rgba(178,75,255,.08);
}
#inspect-header {
  padding:18px 22px 12px; border-bottom:1px solid rgba(216,140,255,.25);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
}
#inspect-title {
  margin:0; font-family:Orbitron,sans-serif; font-size:clamp(16px,2.4vw,22px);
  letter-spacing:1px; color:#fff; text-shadow:0 0 14px rgba(216,140,255,.6);
}
#inspect-quality-pill {
  font-family:Orbitron,sans-serif; font-size:11px; letter-spacing:1px; padding:6px 12px;
  border-radius:999px; border:1px solid currentColor; text-transform:uppercase;
}
#inspect-body {
  display:grid; grid-template-columns:1.15fr 0.95fr; gap:0;
}
@media (max-width:760px){ #inspect-body { grid-template-columns:1fr; } }
#inspect-stage {
  position:relative; min-height:340px; background:
    radial-gradient(ellipse at 50% 70%, rgba(160,32,240,.28), transparent 55%),
    linear-gradient(180deg,#120024 0%,#050011 100%);
  border-right:1px solid rgba(216,140,255,.2);
}
#inspect-canvas { display:block; width:100%; height:360px; }
#inspect-drag-hint {
  position:absolute; bottom:10px; left:0; right:0; text-align:center;
  font-size:11px; letter-spacing:1px; color:rgba(224,176,255,.7); pointer-events:none;
  font-family:Orbitron,sans-serif;
}
#inspect-side { padding:18px 20px 22px; text-align:left; }
#inspect-meta { font-size:13px; color:#d8c0ff; line-height:1.55; }
#inspect-meta .insp-name { font-family:Orbitron,sans-serif; font-size:18px; color:#fff; margin-bottom:6px; }
#inspect-meta .insp-desc { color:#b8a0d8; margin-bottom:10px; }
#inspect-meta .insp-row {
  display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.06); font-size:12px;
}
#inspect-meta .insp-row span:first-child { color:#9a88b8; text-transform:uppercase; letter-spacing:1px; font-size:10px; }
#inspect-meta .insp-row span:last-child { color:#f0e4ff; font-weight:600; text-align:right; }
.float-bar {
  height:10px; border-radius:6px;
  background:linear-gradient(90deg,#4caf50 0%,#8bc34a 7%,#ffeb3b 15%,#ffc107 38%,#ff9800 45%,#f44336 100%);
  position:relative; margin:10px 0 4px; box-shadow:inset 0 0 8px rgba(0,0,0,.4);
}
.float-marker {
  position:absolute; top:-4px; width:4px; height:18px; background:#fff;
  border-radius:2px; box-shadow:0 0 10px #fff, 0 0 4px #000; transform:translateX(-50%);
}
.float-labels { display:flex; justify-content:space-between; font-size:9px; color:#8870a8; letter-spacing:.5px; }

#inspect-seed-panel {
  display:none; margin-top:14px; padding:12px 14px; border-radius:12px;
  background:rgba(20,0,40,.55); border:1px solid rgba(216,140,255,.35);
}
#inspect-seed-panel.show { display:block; }
#inspect-seed-panel label {
  display:flex; justify-content:space-between; align-items:center;
  font-family:Orbitron,sans-serif; font-size:11px; letter-spacing:1px;
  color:#d8c0ff; margin-bottom:8px;
}
#inspect-seed-panel label b { color:#fff; font-size:13px; }
#inspect-seed-slider {
  width:100%; height:8px; cursor:pointer; accent-color:#b24bff;
}
#inspect-seed-actions {
  display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;
}
#inspect-seed-actions button {
  flex:1; min-width:90px; padding:8px 10px; cursor:pointer; border-radius:8px;
  font-family:Orbitron,sans-serif; font-size:10px; letter-spacing:1px; color:#fff;
  border:1px solid rgba(216,140,255,.45);
  background:linear-gradient(135deg,rgba(178,75,255,.3),rgba(0,240,255,.1));
}
#inspect-seed-actions button:hover { box-shadow:0 0 12px rgba(178,75,255,.35); }
#inspect-seed-note {
  margin-top:8px; font-size:11px; color:#9a88b8; line-height:1.35;
}

#inspect-actions {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;
}
#inspect-actions button {
  flex:1; min-width:100px; padding:10px 12px; cursor:pointer; border-radius:10px;
  font-family:Orbitron,sans-serif; font-size:11px; letter-spacing:1px; color:#fff;
  border:1px solid rgba(216,140,255,.5);
  background:linear-gradient(135deg,rgba(178,75,255,.35),rgba(0,240,255,.12));
  transition:transform .12s, box-shadow .12s;
}
#inspect-actions button:hover { transform:translateY(-1px); box-shadow:0 0 16px rgba(178,75,255,.4); }
#inspect-actions .insp-close {
  border-color:rgba(255,100,120,.5);
  background:linear-gradient(135deg,rgba(80,0,20,.6),rgba(40,0,10,.7));
}
.locker-tabs {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; justify-content:flex-start;
}
.locker-tabs button {
  padding:8px 14px; cursor:pointer; border-radius:10px;
  font-family:Orbitron,sans-serif; font-size:11px; letter-spacing:1px; color:#d8c0ff;
  border:1px solid rgba(178,75,255,.4);
  background:rgba(20,0,40,.6);
  transition:border-color .15s, background .15s, color .15s;
}
.locker-tabs button:hover { border-color:var(--neon-cyan); color:#fff; }
.locker-tabs button.active {
  color:#fff; border-color:var(--neon-cyan);
  background:linear-gradient(135deg,rgba(0,240,255,.2),rgba(178,75,255,.35));
  box-shadow:0 0 14px rgba(0,240,255,.25);
}

/* Scoreboard */
#scoreboard {
  display: none;
}
/* Reconnect overlay */
#reconnect-overlay {
  display: none;
}
/* PTT indicator */
#ptt-indicator {
  display: none;
}

/* ---- Profile UI ---- */
#profile-ui {
  position: fixed; inset: 0; z-index: 1100; display: none; place-items: center;
  padding: 24px; background: rgba(5,0,15,.9); backdrop-filter: blur(8px);
}
#profile-ui.show { display: grid; }
.profile-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px; margin-top: 16px;
}
.profile-stat-card {
  background: linear-gradient(160deg, rgba(0,0,0,.4), rgba(40,0,70,.35));
  border: 1px solid rgba(178,75,255,.4); border-radius: 12px; padding: 12px;
  text-align: center;
}
.profile-stat-card .ps-val {
  font-family: Orbitron, sans-serif; font-size: 22px; color: #fff;
  text-shadow: 0 0 10px #d88cff;
}
.profile-stat-card .ps-label {
  font-size: 11px; color: #b8a0d8; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px;
}
.profile-loadout-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
}
.profile-eq-card {
  background: rgba(20,0,40,.55); border: 1px solid rgba(178,75,255,.35);
  border-radius: 12px; padding: 10px; text-align: center;
}
.profile-eq-card img {
  width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 auto 6px;
  border-radius: 8px; background: rgba(0,0,0,.3);
}
.profile-eq-card .pe-slot {
  font-size: 10px; color: #9a88b8; letter-spacing: 1px; text-transform: uppercase;
}
.profile-eq-card .pe-name {
  font-family: Orbitron, sans-serif; font-size: 12px; color: #fff; margin-top: 4px;
}
.profile-clickable {
  cursor: pointer; text-decoration: underline; text-decoration-color: rgba(216,140,255,.4);
}
.profile-clickable:hover { color: #00f0ff !important; text-decoration-color: #00f0ff; }

/* Grenade ammo hint in weapon UI */
#grenade-hint {
  display: block; margin-top: 4px; font-size: 11px; letter-spacing: 1px; color: #9ae8ff;
}


/* Awakened — rarer than Decorated Unusual */
.quality-awakened {
  color: #041018 !important;
  background: linear-gradient(135deg, #00f0ff, #ff2bd6 45%, #ffe566 80%, #b24bff) !important;
  border: 1px solid #fff !important;
  box-shadow: 0 0 14px rgba(0,240,255,.55), 0 0 22px rgba(255,43,214,.35);
  animation: awakenedShimmer 2.8s linear infinite;
  background-size: 220% auto !important;
}
@keyframes awakenedShimmer {
  to { background-position: 220% center; }
}
.tf2-slot.q-awakened {
  border-color: #00f0ff;
  box-shadow: inset 0 0 28px rgba(0,240,255,.25), 0 0 16px rgba(255,43,214,.3);
}


/* Item Dex */
#dex-section { margin-top: 8px; }
.dex-card.dex-missing {
  opacity: 0.95;
  border-style: solid;
}
.dex-card.dex-missing .owned-tag {
  background: rgba(255,177,74,.15);
}
.dex-silhouette {
  display: grid !important;
  place-items: center;
  font-family: Orbitron, sans-serif;
  font-size: 48px;
  font-weight: 900;
  color: rgba(216,140,255,.45);
  background: radial-gradient(circle at 50% 40%, #1a0030, #050011 70%) !important;
  text-shadow: 0 0 20px rgba(178,75,255,.4);
}
.dex-card.dex-owned {
  box-shadow: 0 0 18px rgba(0,240,255,.2);
}


/* Locker bulk select / sell */
.locker-bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 10px 12px; border-radius: 12px;
  background: rgba(20,0,40,.55); border: 1px solid rgba(178,75,255,.35);
}
.locker-bulk-select-all {
  display: flex; align-items: center; gap: 8px;
  font-family: Orbitron, sans-serif; font-size: 11px; letter-spacing: 1px; color: #d8c0ff;
  cursor: pointer;
}
.locker-selected-count {
  font-family: Orbitron, sans-serif; font-size: 12px; color: #9ae8ff; min-width: 90px;
}
.locker-bulk-bar .btn-sell[disabled] {
  opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4);
}
.tf2-slot { position: relative; padding-top: 4px; }
.tf2-slot > .quality-badge {
  display: inline-block;
  max-width: calc(100% - 36px);
  position: relative;
  z-index: 1;
}
.locker-check {
  position: absolute; top: 6px; right: 6px; left: auto; z-index: 3;
  background: rgba(0,0,0,.7); border-radius: 6px; padding: 3px 5px;
  border: 1px solid rgba(216,140,255,.45);
  line-height: 0;
}
.locker-check input { width: 15px; height: 15px; cursor: pointer; accent-color: #b24bff; margin: 0; }
.tf2-slot.locker-selected {
  outline: 2px solid #00f0ff;
  box-shadow: 0 0 16px rgba(0,240,255,.35), inset 0 0 12px rgba(0,240,255,.1);
}

.dex-card.dex-awakened {
  box-shadow: 0 0 18px rgba(0,240,255,.28), 0 0 28px rgba(255,43,214,.18);
  border-color: rgba(0,240,255,.45);
}