/* 3D-only additions on top of style.css */

body.three { background: #0d1220; }

#title { background: radial-gradient(ellipse at 35% 50%, rgba(178,147,112,.78), rgba(32,26,30,.55) 70%); }
.badge {
  display: inline-block; background: var(--red); color: #fff; font-weight: 900; font-size: 12px; letter-spacing: .14em;
  padding: 5px 10px; border-radius: 999px; margin-bottom: 10px; box-shadow: 0 4px 0 rgba(0,0,0,.2);
}
.links { font-weight: 800; color: var(--ink); opacity: .85; }
.links a { color: inherit; }

/* round, rotating minimap */
#minimap {
  width: 190px; height: 190px; border-radius: 50%; border: 4px solid var(--ink); background: #2b6f8a;
  image-rendering: auto; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* floating labels */
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.lbl {
  position: absolute; left: 0; top: 0; white-space: nowrap; font-weight: 800; will-change: transform;
  font-family: var(--font);
}
.lbl.tag { color: #fff; font-size: 12px; padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.lbl.place { color: var(--cream); background: rgba(27,21,18,.82); font-size: 13px; padding: 5px 11px; border-radius: 999px; }
.lbl.bubble {
  color: var(--ink); background: #fffdf7; font-size: 14px; padding: 6px 11px; border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,.25); margin-top: -8px;
}
.lbl.bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #fffdf7; border-bottom: 0;
}

/* speedometer */
#speedo {
  position: absolute; right: 20px; bottom: 56px; background: var(--panel); border-radius: 18px; padding: 10px 16px 9px;
  text-align: right; min-width: 120px; box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
#speedo b { font-size: 40px; font-weight: 900; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#speedo span { font-size: 13px; font-weight: 800; opacity: .7; margin-left: 4px; }
#speedo small { display: block; font-size: 12px; font-weight: 800; opacity: .7; margin-top: 2px; }

/* arrow toward the delivery when it is off screen */
#jobArrow {
  position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none;
  border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-left: 34px solid #ff5a3a;
  filter: drop-shadow(0 0 6px rgba(255,90,58,.8)) drop-shadow(0 2px 2px rgba(0,0,0,.5));
}

#objective { max-width: calc(100vw - 470px); }
.three #toasts { top: 164px; }
#objective.mission { background: rgba(27,21,18,.9); box-shadow: inset 4px 0 0 #f2c230; color: #fff3c4; }

/* ---------- GTA layer ---------- */
.energy.hp .bar i { background: #5fd36a; }
.energy.hp .bar i.low { background: #e23b2b; animation: blink .5s steps(2) infinite; }
.energy.armor .bar i { background: #5aa9ff; }
@keyframes blink { 50% { opacity: .35; } }

#wanted {
  position: absolute; top: 214px; right: 16px; width: 190px; text-align: center; font-size: 25px; line-height: 1;
  letter-spacing: 2px; text-shadow: 0 2px 0 #000, 0 0 2px #000;
}
#wanted i { font-style: normal; color: rgba(255,255,255,.16); -webkit-text-stroke: 1px rgba(0,0,0,.6); }
#wanted i.on { color: #f2c230; -webkit-text-stroke: 1px #3a2a00; }
#wanted.flash i.on { animation: blink .45s steps(2) infinite; }
#wanted.bump { animation: bump .5s ease-out; }
@keyframes bump { 30% { transform: scale(1.25); } }

#weapon {
  position: absolute; top: 248px; right: 16px; display: flex; align-items: center; gap: 10px; background: var(--panel);
  padding: 7px 14px 7px 10px; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.3); min-width: 150px;
}
#wIcon { font-size: 28px; }
#weapon b { display: block; font-size: 13px; font-weight: 900; letter-spacing: .02em; }
#weapon small { display: block; font-size: 17px; font-weight: 900; color: #fff3c4; font-variant-numeric: tabular-nums; }
#weapon small i { font-style: normal; opacity: .55; font-size: 13px; }
#weapon.reloading small { color: #f2c230; animation: blink .3s steps(2) infinite; }

#crosshair {
  position: fixed; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none;
}
#crosshair::before, #crosshair::after {
  content: ''; position: absolute; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.7);
}
#crosshair::before { left: 12px; top: 0; width: 2px; height: 26px; }
#crosshair::after { top: 12px; left: 0; height: 2px; width: 26px; }
#crosshair.enemy::before, #crosshair.enemy::after { background: #ff3b30; }
#crosshair.wide { transform: scale(1.6); }

#subs {
  position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); max-width: min(760px, 86vw); text-align: center;
  font-size: 19px; font-weight: 800; color: #fff; text-shadow: 0 2px 3px #000, 0 0 6px rgba(0,0,0,.8); line-height: 1.35;
}
#subs b { font-weight: 900; }

#radioName {
  position: absolute; left: 50%; top: 66px; transform: translateX(-50%); text-align: center; pointer-events: none;
  opacity: 0; transition: opacity .5s; text-shadow: 0 2px 3px #000;
}
#radioName.show { opacity: 1; transition: opacity .15s; }
#radioName b { display: block; font-size: 22px; font-weight: 900; color: #f2c230; letter-spacing: .04em; }
#radioName small { font-size: 13px; font-weight: 800; opacity: .85; }

#hurt {
  position: fixed; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(160,0,0,0) 45%, rgba(170,0,0,.75) 100%);
}
#bigtext {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; text-align: center; animation: bigIn .5s ease-out;
}
#bigtext b {
  font: 900 clamp(48px, 11vw, 124px)/1 Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif;
  letter-spacing: .03em; color: #e23b2b; -webkit-text-stroke: 3px #000; text-shadow: 0 6px 0 rgba(0,0,0,.6);
}
#bigtext small {
  margin-top: 10px; font-size: clamp(16px, 2.4vw, 26px); font-weight: 900; color: #fff; text-shadow: 0 2px 3px #000;
}
#bigtext.small b { font-size: clamp(36px, 7vw, 76px); -webkit-text-stroke: 2px #000; }
@keyframes bigIn { from { opacity: 0; transform: scale(1.25); } }
body.dead canvas#game { filter: grayscale(.92) contrast(1.08) brightness(.85); transition: filter 1.4s; }

/* touch: fire and weapon buttons */
#fireBtn, #swapBtn {
  position: absolute; pointer-events: auto; touch-action: none; border-radius: 50%; color: #fff; font-weight: 900;
  border: 2px solid rgba(246,234,216,.35);
}
#fireBtn { right: 22px; bottom: 300px; width: 78px; height: 78px; font-size: 30px; background: rgba(214,64,43,.8); }
#fireBtn small { position: absolute; left: 0; right: 0; bottom: 8px; font-size: 11px; }
#swapBtn { right: 36px; bottom: 390px; width: 50px; height: 50px; font-size: 20px; background: rgba(27,21,18,.55); }
body.incar #fireBtn, body.incar #swapBtn { display: none; }
.three .tbtns { grid-template-columns: repeat(3, 54px); gap: 8px; }
.three .tbtns button { width: 54px; height: 54px; font-size: 20px; }
.three .tbtns .big { grid-column: span 3; width: 178px; height: 58px; }

@media (max-width: 720px) {
  #minimap { width: 124px; height: 124px; }
  #wanted { top: 128px; width: 124px; font-size: 16px; letter-spacing: 0; }
  #weapon { display: none; }
  #subs { bottom: 300px; font-size: 15px; }
  #radioName { top: 200px; }
  #speedo { bottom: 212px; right: 16px; min-width: 96px; padding: 8px 12px; }
  #speedo b { font-size: 28px; }
  #objective { top: 152px; max-width: calc(100vw - 32px); }
  .three #toasts { top: 198px; }
  #prompt { bottom: 228px; }
}
@media (pointer: coarse) { .three #prompt { bottom: 228px; } }

/* ---------- the luxury look: black, cream and gold ---------- */
:root { --gold: #d4af37; --gold2: #f2d27a; --serif: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", "Times New Roman", Georgia, serif; }
.three { --panel: rgba(10, 10, 12, 0.86); }
.three .stats { border: 1px solid rgba(212,175,55,.35); }
.three .money {
  background: linear-gradient(180deg, #fbe9b7, #d4af37 60%, #a5822a); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-family: var(--serif); font-weight: 700; font-size: 30px; letter-spacing: .01em;
}
.followers { font-size: 12px; font-weight: 700; opacity: .85; margin-top: 1px; }
.followers b { color: #ff9cc8; font-weight: 900; }
.three .toast { border-left: 3px solid var(--gold); }
.three #objective { border: 1px solid rgba(212,175,55,.3); }
.three #prompt { background: #f6efdf; box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(212,175,55,.6); }
.three .panel { background: #0f0f11; border-color: rgba(212,175,55,.28); }
.three .ph { background: #0f0f11; }
.three .ph h2 { font-family: var(--serif); font-weight: 700; letter-spacing: .02em; }
.three .ir { color: var(--gold2); }
.three .sec h3 { color: var(--gold2); opacity: .8; }
.three .item { background: rgba(246,234,216,.05); }
.three .item:hover:not(:disabled) { background: rgba(212,175,55,.14); }

#title { background: radial-gradient(ellipse at 30% 55%, rgba(60,48,26,.92), rgba(8,8,10,.97) 70%); color: #efe7d6; }
#title .title-copy h1 { font-family: var(--serif); font-weight: 700; letter-spacing: .02em; color: #f4ecd9; }
#title .title-copy h1 span {
  background: linear-gradient(180deg, #fbe9b7, #d4af37 55%, #9c7a24); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#title .badge { background: transparent; color: var(--gold2); border: 1px solid var(--gold); box-shadow: none; letter-spacing: .22em; }
#title .primary { background: linear-gradient(180deg, #f2d27a, #c9a032); color: #121212; box-shadow: 0 6px 0 rgba(0,0,0,.4); }
#title .controls kbd { background: rgba(246,234,216,.1); border-color: rgba(212,175,55,.4); color: #efe7d6; }
#title .handle, #title .links { color: #efe7d6; }
#title .hero { filter: drop-shadow(0 18px 40px rgba(212,175,55,.25)); }

#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#flash.go { animation: shutter .55s ease-out; }
@keyframes shutter { 0% { opacity: .9; } 100% { opacity: 0; } }