/* NETWAR — world.html styles, part 8 of 9: Card drops: loot toast, flip reveal, drop terminal, card-intel tip.
   Moved out of world.html's <style> block unchanged (2026-10-03); the files load in this
   order, which is the old cascade order — a later file still overrides an earlier one. */
/* --- Card loot UI (collection drops) ------------------------------------ */
/* Bottom-center, docked above the toolbar. `position: fixed` (not
   absolute) so it's anchored to the actual viewport, same as #loot-card-tip —
   its old `position: absolute` was relative to #panel, whose own box bottom
   doesn't line up with the toolbar's, which is what let a static `bottom` value
   land the toast on top of the toolbar buttons instead of above them. `bottom`
   here is just a same-flash-of-position fallback; positionLootToastStack() in
   world.js sets it precisely off the toolbar's live position on every toast. */
#loot-toast-stack { position: fixed; left: 50%; transform: translateX(-50%); bottom: 160px; z-index: 85;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; pointer-events: none;
  max-width: min(280px, 46vw); }
.loot-toast { pointer-events: auto; padding: 10px 12px; background: rgba(10, 6, 20, 0.96);
  border: 1px solid #2c1a55; border-radius: 3px; box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  animation: loot-toast-in 0.4s cubic-bezier(.34,1.56,.64,1) both, loot-toast-flash 0.9s ease-out both; }
.loot-toast.out { animation: loot-toast-out 0.22s ease-in forwards; }
.loot-toast { cursor: pointer; }
.loot-toast .loot-toast-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.loot-toast-head-label { display: inline-flex; align-items: center; gap: 5px; }
.loot-toast-icon { font-size: 12px; line-height: 1; animation: loot-toast-icon-pop 0.5s ease-out both 0.05s; }
.loot-toast-x { background: none; border: 0; color: #6a5f8f; font: inherit; font-size: 10px;
  line-height: 1; padding: 2px 4px; cursor: pointer; }
.loot-toast-x:hover { color: #cfc7e8; }
.loot-toast-foot { margin-top: 6px; font-size: 7px; letter-spacing: 0.8px; color: #6a5f8f; }
.loot-toast.rarity-common { border-color: #3a4a5a; }
.loot-toast.rarity-rare { border-color: #37d5f5; box-shadow: 0 0 14px rgba(55,213,245,0.18); }
.loot-toast.rarity-epic { border-color: #a85cf6; box-shadow: 0 0 14px rgba(168,92,246,0.22); }
.loot-toast.rarity-legendary { border-color: #f5a337; box-shadow: 0 0 16px rgba(245,163,55,0.28); }
.loot-toast-head { font-size: 8px; letter-spacing: 1.2px; color: #6a5f8f; margin-bottom: 6px; font-weight: bold; }
.loot-toast.rarity-rare .loot-toast-head { color: #37d5f5; }
.loot-toast.rarity-epic .loot-toast-head { color: #c89bff; }
.loot-toast.rarity-legendary .loot-toast-head { color: #f5a337; }
@keyframes loot-toast-in {
  0% { opacity: 0; transform: translateX(32px) scale(0.82); }
  55% { opacity: 1; transform: translateX(-4px) scale(1.05); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes loot-toast-flash {
  0% { filter: brightness(1); }
  20% { filter: brightness(1.9); }
  100% { filter: brightness(1); }
}
@keyframes loot-toast-icon-pop {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes loot-toast-out {
  to { opacity: 0; transform: translateX(24px); }
}

#loot-reveal { display: none; position: absolute; inset: 0; z-index: 110;
  background: rgba(4, 2, 10, 0.78); align-items: center; justify-content: center; }
#loot-reveal.show { display: flex; animation: loot-reveal-fade 0.25s ease-out; }
@keyframes loot-reveal-fade { from { opacity: 0; } to { opacity: 1; } }
#loot-reveal-box { width: min(420px, 92%); padding: 20px 18px 16px; background: #0e0919;
  border: 1px solid #3a2170; border-radius: 4px; box-shadow: 0 16px 48px rgba(0,0,0,0.55);
  text-align: center; animation: loot-reveal-pop 0.32s ease-out; }
#loot-reveal.rarity-epic #loot-reveal-box { border-color: #a85cf6; box-shadow: 0 0 36px rgba(168,92,246,0.25); }
#loot-reveal.rarity-legendary #loot-reveal-box { border-color: #f5a337; box-shadow: 0 0 36px rgba(245,163,55,0.28); }
@keyframes loot-reveal-pop {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
#loot-reveal-title { margin: 0 0 4px; font-size: 13px; letter-spacing: 1.5px; color: #37f5a3; }
#loot-reveal-sub { margin: 0 0 14px; font-size: 9px; color: #8a7eb0; letter-spacing: 0.4px; }
#loot-reveal-cards { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 14px; }
#loot-reveal-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
#loot-reveal-actions button { font: inherit; padding: 8px 14px; cursor: pointer; border-radius: 2px;
  letter-spacing: 0.8px; font-size: 9px; font-weight: bold; }
#loot-reveal-safehouse { background: #37f5a3; border: 1px solid #37f5a3; color: #080511; }
#loot-reveal-flipall { background: #130c26; border: 1px solid #5a3fa0; color: #cfc2f5; }
/* Card reveal: backs that drop in and turn over (world.js buildFlipCard). */
#loot-reveal-box { width: min(1000px, 96%); background: radial-gradient(ellipse at 50% 40%, #140a28 0%, #0a0614 75%); }
#loot-reveal-title { font-size: 16px; letter-spacing: 3px; }
#loot-reveal-cards { gap: 26px; perspective: 1400px; margin: 10px 0 18px; }
.fc-slot { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: fc-drop 0.7s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes fc-drop { 0% { opacity: 0; transform: translateY(-120px) rotate(-8deg) scale(.8); } 70% { opacity: 1; transform: translateY(8px) rotate(1deg) scale(1.03); } 100% { opacity: 1; transform: none; } }
.fc-flip { width: 170px; height: 240px; padding: 0; border: 0; background: none; position: relative; cursor: pointer;
  transform-style: preserve-3d; transition: transform .75s cubic-bezier(.3,1.35,.5,1); }
.fc-flip.is-flipped { transform: rotateY(180deg); }
.fc-flip:focus-visible { outline: 2px solid #37f5a3; outline-offset: 4px; }
.fc-side { position: absolute; inset: 0; box-sizing: border-box; border-radius: 8px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: left; }
.fc-back svg { position: absolute; left: 0; top: 0; }
.fc-back-label { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 700 10px Orbitron, sans-serif; letter-spacing: 0.3em; }
.fc-front { transform: rotateY(180deg); display: flex; flex-direction: column; font-family: 'Chakra Petch', sans-serif; }
.fc-common .fc-side { background: linear-gradient(160deg, #1a242d, #0a1016); border: 1px solid #3a4a5a; }
.fc-rare .fc-side { background: linear-gradient(160deg, #06202c, #03101a); border: 1px solid #37d5f5; box-shadow: 0 0 22px rgba(55,213,245,0.4); }
.fc-epic .fc-side { background: linear-gradient(160deg, #1a0c36, #0a0418); border: 1px solid #a85cf6; box-shadow: 0 0 30px rgba(168,92,246,0.5); }
.fc-legendary .fc-side { background: linear-gradient(160deg, #2a1a06, #120a02); border: 1px solid #f5a337; box-shadow: 0 0 36px rgba(245,163,55,0.55); }
.fc-syn-techno_nomads .fc-side { background: linear-gradient(160deg, #0b2a48, #04101c); border: 1px solid #0094d8; box-shadow: 0 0 26px rgba(0,148,216,0.45); }
.fc-syn-street_prolets .fc-side { background: linear-gradient(160deg, #2e2008, #120c04); border: 1px solid #f5a337; box-shadow: 0 0 26px rgba(245,163,55,0.4); }
.fc-syn-neo_yakuza .fc-side { background: linear-gradient(160deg, #26103e, #0e0618); border: 1px solid #c44dff; box-shadow: 0 0 26px rgba(196,77,255,0.45); }
.fc-common .fc-back-label, .fc-common .fc-cost { color: #8aa3b3; } .fc-common .fc-cost { background: #8aa3b3; color: #0a1016; }
.fc-rare .fc-back-label { color: #37d5f5; } .fc-rare .fc-cost { background: #37d5f5; color: #03101a; }
.fc-epic .fc-back-label { color: #c89bff; } .fc-epic .fc-cost { background: #c89bff; color: #0a0418; }
.fc-legendary .fc-back-label { color: #f5a337; } .fc-legendary .fc-cost { background: #f5a337; color: #120a02; }
.fc-syn-techno_nomads .fc-back-label { color: #39c3ff; } .fc-syn-techno_nomads .fc-cost { background: #0094d8; color: #03111a; }
.fc-syn-street_prolets .fc-back-label { color: #ffc46b; } .fc-syn-street_prolets .fc-cost { background: #f5a337; color: #1a1004; }
.fc-syn-neo_yakuza .fc-back-label { color: #e39bff; } .fc-syn-neo_yakuza .fc-cost { background: #c44dff; color: #14061c; }
.fc-syn-emblem { position: absolute; left: 0; right: 0; top: 70px; display: flex; justify-content: center; }
.fc-syn-emblem .syn-emblem-svg { width: 76px; height: 76px; }
.fc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; padding: 12px 12px 4px; }
.fc-name { font-weight: 600; font-size: 15px; color: #eef3ff; }
.fc-cost { font: 700 13px 'IBM Plex Mono', monospace; padding: 1px 6px; border-radius: 3px; }
.fc-meta { display: flex; justify-content: space-between; padding: 2px 12px; font-size: 10px; letter-spacing: 0.14em; color: #8f98ad; }
.fc-text { padding: 12px; font-size: 12px; line-height: 1.45; color: #b3bccd; flex-grow: 1; }
.fc-stats { padding: 0 12px 8px; display: flex; gap: 12px; font: 700 14px 'IBM Plex Mono', monospace; }
.fc-atk { color: #ff6b8a; } .fc-hp { color: #5ee0a8; }
.fc-source { padding: 0 12px 12px; font-size: 10px; letter-spacing: 0.1em; color: #8a7eb0; text-transform: uppercase; }
.fc-front-emblem { position: absolute; right: 10px; bottom: 10px; line-height: 0; }
.fc-caption { font: 11px 'Chakra Petch', sans-serif; letter-spacing: 0.2em; color: #8f98ad; }
.fc-shimmer { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,236,190,0.35) 50%, rgba(255,255,255,0) 65%);
  background-size: 220% 100%; animation: fc-shimmer 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes fc-shimmer { 0% { background-position: -160% 0; } 60%, 100% { background-position: 260% 0; } }
.fc-spin { animation: fc-spin 14s linear infinite; transform-origin: 85px 110px; }
@keyframes fc-spin { to { transform: rotate(360deg); } }
.fc-twinkle { animation: fc-twinkle 1.8s ease-in-out infinite; }
@keyframes fc-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.fc-breathe { animation: fc-breathe 2.2s ease-in-out infinite; }
@keyframes fc-breathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fc-slot, .fc-shimmer, .fc-spin, .fc-twinkle, .fc-breathe { animation: none; }
  .fc-flip { transition: none; }
}
#loot-reveal-dismiss { background: #130c26; border: 1px solid #2c1a55; color: #8a7fb0; }

/* Drop window as a hacker terminal (owner notes 2026-09-28): a decrypt log runs first,
   then the cards drop; scanlines, a scrolling hex dump, HUD corners, a glitching title.
   --lr-acc follows the best rarity in the drop. */
#loot-reveal { --lr-acc: #37f5a3; --lr-acc-rgb: 55,245,163; }
#loot-reveal.rarity-rare { --lr-acc: #37d5f5; --lr-acc-rgb: 55,213,245; }
#loot-reveal.rarity-epic { --lr-acc: #c89bff; --lr-acc-rgb: 200,155,255; }
#loot-reveal.rarity-legendary { --lr-acc: #f5a337; --lr-acc-rgb: 245,163,55; }
#loot-reveal { background: radial-gradient(ellipse at 50% 45%, rgba(8,14,20,0.72), rgba(2,4,8,0.92)); }
#loot-reveal-box { position: relative; overflow: hidden; border-radius: 2px; padding: 0 22px 18px;
  background: linear-gradient(180deg, rgba(4,12,14,0.97), rgba(3,6,10,0.98));
  border: 1px solid rgba(var(--lr-acc-rgb),0.55);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 42px rgba(var(--lr-acc-rgb),0.18), inset 0 0 60px rgba(var(--lr-acc-rgb),0.05);
  font-family: 'IBM Plex Mono', Consolas, monospace; }
#loot-reveal.rarity-epic #loot-reveal-box, #loot-reveal.rarity-legendary #loot-reveal-box {
  border-color: rgba(var(--lr-acc-rgb),0.75); box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 56px rgba(var(--lr-acc-rgb),0.3); }
#loot-reveal-box > * { position: relative; z-index: 1; }
.lr-hexdump { position: absolute !important; z-index: 0 !important; inset: 0; margin: 0; padding: 40px 10px 0;
  font: 10px/1.5 'IBM Plex Mono', Consolas, monospace; color: rgba(var(--lr-acc-rgb),0.07); white-space: pre;
  overflow: hidden; pointer-events: none; animation: lr-scroll 18s linear infinite; }
@keyframes lr-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.lr-scan { position: absolute !important; z-index: 2 !important; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.22) 2px 3px); }
.lr-scan::after { content: ''; position: absolute; left: 0; right: 0; height: 90px; top: -90px;
  background: linear-gradient(180deg, rgba(var(--lr-acc-rgb),0), rgba(var(--lr-acc-rgb),0.07), rgba(var(--lr-acc-rgb),0));
  animation: lr-sweep 3.4s linear infinite; }
@keyframes lr-sweep { to { top: 100%; } }
.lr-corner { position: absolute !important; z-index: 3 !important; width: 18px; height: 18px; border: 2px solid var(--lr-acc); pointer-events: none; }
.lr-corner.tl { left: 6px; top: 6px; border-right: 0; border-bottom: 0; }
.lr-corner.tr { right: 6px; top: 6px; border-left: 0; border-bottom: 0; }
.lr-corner.bl { left: 6px; bottom: 6px; border-right: 0; border-top: 0; }
.lr-corner.br { right: 6px; bottom: 6px; border-left: 0; border-top: 0; }
.lr-bar { display: flex; align-items: center; gap: 12px; margin: 0 -22px 12px; padding: 7px 14px;
  background: rgba(var(--lr-acc-rgb),0.08); border-bottom: 1px solid rgba(var(--lr-acc-rgb),0.3);
  font-size: 10px; letter-spacing: 0.08em; color: rgba(var(--lr-acc-rgb),0.85); text-align: left; }
.lr-dots { display: flex; gap: 5px; } .lr-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--lr-acc-rgb),0.35); }
.lr-dots i:first-child { background: #f55858; }
.lr-path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-sig b { color: var(--lr-acc); letter-spacing: 1px; animation: lr-blink 1.1s steps(2) infinite; }
@keyframes lr-blink { 50% { opacity: 0.35; } }
.lr-log { min-height: 58px; margin: 0 auto 6px; width: min(560px, 100%); text-align: left;
  font-size: 11px; line-height: 1.55; color: rgba(var(--lr-acc-rgb),0.8); }
.lr-log div { white-space: pre; overflow: hidden; }
.lr-log .ok { color: var(--lr-acc); }
.lr-log .dim { color: rgba(170,190,200,0.55); }
.lr-log .cur::after { content: '█'; margin-left: 2px; animation: lr-blink 0.8s steps(2) infinite; }
#loot-reveal-title { position: relative; display: inline-block; font-family: Orbitron, 'IBM Plex Mono', monospace;
  font-size: 22px; letter-spacing: 6px; color: var(--lr-acc); text-shadow: 0 0 14px rgba(var(--lr-acc-rgb),0.6); margin: 4px 0 4px; }
#loot-reveal-title::before, #loot-reveal-title::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%;
  overflow: hidden; pointer-events: none; }
#loot-reveal-title::before { color: #ff2a6d; transform: translate(2px, 0); clip-path: inset(0 0 55% 0); animation: lr-glitch-a 2.8s steps(1) infinite; opacity: 0.8; }
#loot-reveal-title::after { color: #05d9e8; transform: translate(-2px, 0); clip-path: inset(55% 0 0 0); animation: lr-glitch-b 2.3s steps(1) infinite; opacity: 0.8; }
@keyframes lr-glitch-a { 0%, 86%, 100% { transform: translate(0,0); opacity: 0; } 87% { transform: translate(3px,-1px); opacity: .85; } 90% { transform: translate(-3px,1px); opacity: .85; } 93% { opacity: 0; } }
@keyframes lr-glitch-b { 0%, 78%, 100% { transform: translate(0,0); opacity: 0; } 79% { transform: translate(-4px,1px); opacity: .85; } 83% { transform: translate(2px,0); opacity: .85; } 86% { opacity: 0; } }
#loot-reveal-sub { font-size: 10px; letter-spacing: 0.12em; color: rgba(170,190,200,0.7); text-transform: uppercase; }
#loot-reveal-sub::before { content: '// '; color: rgba(var(--lr-acc-rgb),0.7); }
/* The cards wait for the decrypt log. */
#loot-reveal.lr-decrypting #loot-reveal-cards, #loot-reveal.lr-decrypting #loot-reveal-title,
#loot-reveal.lr-decrypting #loot-reveal-sub, #loot-reveal.lr-decrypting #loot-reveal-actions { visibility: hidden; }
#loot-reveal-actions button { font-family: 'IBM Plex Mono', Consolas, monospace; letter-spacing: 0.12em; border-radius: 0; text-transform: uppercase; }
#loot-reveal-safehouse { background: transparent; color: var(--lr-acc); border: 1px solid var(--lr-acc); box-shadow: inset 0 0 12px rgba(var(--lr-acc-rgb),0.15); }
#loot-reveal-safehouse:hover, #loot-reveal-flipall:hover { background: rgba(var(--lr-acc-rgb),0.14); }
#loot-reveal-flipall { background: transparent; border: 1px solid rgba(var(--lr-acc-rgb),0.45); color: rgba(var(--lr-acc-rgb),0.9); }
#loot-reveal-dismiss { background: transparent; border: 1px solid rgba(170,190,200,0.25); color: rgba(170,190,200,0.7); }
@media (prefers-reduced-motion: reduce) {
  .lr-hexdump, .lr-scan::after, .lr-sig b, .lr-log .cur::after, #loot-reveal-title::before, #loot-reveal-title::after { animation: none; }
}

.loot-chip { min-width: 120px; max-width: 160px; padding: 8px 10px; text-align: left;
  background: #0a0614; border: 1px solid #2c1a55; border-radius: 3px; }
.loot-chip.rarity-common { border-color: #3a4a5a; }
.loot-chip.rarity-rare { border-color: #37d5f5; }
.loot-chip.rarity-epic { border-color: #a85cf6; }
.loot-chip.rarity-legendary { border-color: #f5a337; }
.loot-chip-rarity { font-size: 7px; letter-spacing: 1.2px; font-weight: bold; color: #6a5f8f; margin-bottom: 4px; }
.loot-chip.rarity-rare .loot-chip-rarity { color: #37d5f5; }
.loot-chip.rarity-epic .loot-chip-rarity { color: #c89bff; }
.loot-chip.rarity-legendary .loot-chip-rarity { color: #f5a337; }
.loot-chip-name { font-size: 10px; color: #e8e0f8; font-weight: bold; line-height: 1.3;
  word-break: break-word; }
.loot-chip-meta { margin-top: 5px; font-size: 8px; color: #6a5f8f; letter-spacing: 0.3px; }
.loot-chip-hoverable { cursor: help; }
.loot-chip-hoverable:hover { border-color: #6a5f8f; }

/* Card-intel tooltip for a loot drop, hovered straight off the toast/reveal chip —
   same visual language as Safehouse's #sh-card-tip (identical shared .tip-* classes
   from duel-ui.css), just anchored differently since this one lives in a screen
   corner instead of a deck row. See positionLootCardTip() in world.js. */
#loot-card-tip { position: fixed; z-index: 200; width: 280px; max-width: min(280px, calc(100vw - 16px));
  padding: 0; pointer-events: none; opacity: 0; transform: translateY(6px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease; visibility: hidden; }
#loot-card-tip.show { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }
#loot-card-tip-inner { padding: 10px 12px 11px 16px; background: rgba(6, 8, 9, 0.97);
  border: 1px solid #2a3840; box-shadow: 0 0 18px rgba(94, 224, 168, 0.15), 0 8px 24px rgba(0, 0, 0, 0.5);
  position: relative; }
#loot-card-tip-inner::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #5ee0a8, #ffb04d); opacity: 0.55; }
#loot-card-tip .tip-card { max-width: none; width: 100%; grid-template-rows: auto auto auto; gap: 6px; }
#loot-card-tip .tip-quote { white-space: normal; overflow: visible; text-overflow: unset;
  text-align: left; line-height: 1.4; }
#loot-card-tip .tip-chips { flex-wrap: wrap; }