/* GONZOWIRE OS - apps3 styles */

/* === BLOOMBERG === */
.bloomberg { font-family: var(--mono); color: #ff7a00; background: #000; padding: 0; min-height: 360px; }
.bb-header {
  background: #ff7a00;
  color: #000;
  padding: 6px 12px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bb-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: #ff7a00;
  padding: 1px;
  min-height: 280px;
}
.bb-cell {
  background: #000;
  padding: 14px 10px;
  text-align: center;
  cursor: default;
  position: relative;
}
.bb-cell.click { cursor: pointer; }
.bb-cell.click:hover { background: #1a0d04; }
.bb-cell.click::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px dashed #ff7a00;
  animation: bbBlink 1.2s steps(2) infinite;
  pointer-events: none;
}
@keyframes bbBlink { 50% { opacity: .3; } }
.bb-sym { font-family: var(--display); font-size: 14px; color: #ff7a00; letter-spacing: .1em; }
.bb-val { font-family: var(--mono); font-size: 22px; margin-top: 4px; }
.bb-cell.up   .bb-val { color: #06FFA5; }
.bb-cell.down .bb-val { color: #ff2a1f; }
.bb-cell.flat .bb-val { color: #ffe21a; }
.bb-spark { height: 18px; margin-top: 6px; background: linear-gradient(90deg, transparent, #ff7a00 50%, transparent); opacity: .3; }
.bb-footer {
  background: #ff7a00;
  color: #000;
  padding: 6px 12px;
  font-size: 12px;
  font-family: var(--display);
}
.bb-grid.bb-shattering { animation: bbShake .08s steps(2) infinite; }
@keyframes bbShake {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(2px,-1px); filter: hue-rotate(20deg); }
}
.bb-reveal {
  grid-column: 1 / -1;
  background: #1a0d04;
  color: #f4e9c1;
  padding: 24px;
  font-family: var(--mono);
  border: 3px dashed #ff2b8f;
  animation: revealCrack .6s ease-out;
}
@keyframes revealCrack {
  0% { clip-path: polygon(50% 50%, 50% 50%, 50% 50%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
.bb-reveal h2 { color: #ff2b8f; font-family: var(--psy); margin-top: 0; }

/* === WIRETAP === */
.wiretap .wt-list { list-style: none; padding: 0; margin: 0 0 14px; }
.wiretap .wt-item {
  background: #000;
  border: 2px solid var(--sand);
  padding: 10px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  font-family: var(--mono);
  color: var(--neon-acid);
}
.wiretap .wt-item:hover { background: var(--neon-acid); color: var(--ink); }
.wiretap .wt-icon { color: var(--neon-blood); margin-right: 8px; }
.wiretap .wt-stage {
  min-height: 140px;
  background: #000;
  border: 2px dashed var(--neon-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--psy);
  color: var(--neon-yellow);
  text-shadow: 0 0 24px rgba(255,226,26,.7), 0 0 48px rgba(255,43,143,.5);
  text-align: center;
  padding: 14px;
}
.wiretap .wt-flash { animation: wtFlash .3s ease-out; }
@keyframes wtFlash {
  0%   { opacity: 0; transform: scale(1.4); }
  20%  { opacity: 1; }
  100% { opacity: .9; transform: scale(1); }
}

/* === RECEIPT STRIP === */
.receipt-strip {
  background: #f4e9c1;
  color: #1a0d04;
  font-family: 'Cutive Mono', 'Courier Prime', monospace;
  font-size: 13px;
  padding: 20px 24px;
  height: 100%;
  overflow-y: auto;
  line-height: 1.7;
  border-left: 1px dashed #5c4033;
  border-right: 1px dashed #5c4033;
  position: relative;
}
.receipt-strip::before, .receipt-strip::after {
  content: '';
  display: block;
  height: 12px;
  background: repeating-linear-gradient(45deg, #f4e9c1 0 6px, transparent 6px 12px);
  margin-bottom: 4px;
}
.receipt-strip .r-meta { text-align: center; font-weight: bold; }
.receipt-strip .r-item { font-weight: bold; color: #5c4033; }
.receipt-strip .r-prose { padding: 6px 0; font-style: italic; border-top: 1px dashed #8a5a2b; border-bottom: 1px dashed #8a5a2b; margin: 8px 0; }

/* === POLYQUIZ === */
.polyquiz .pq-q { font-family: var(--display); color: var(--neon-yellow); font-size: 18px; margin: 14px 0; }
.polyquiz .pq-opts { display: grid; gap: 8px; }
.polyquiz .pq-opt {
  background: var(--asphalt);
  border: 2px solid var(--sand);
  color: var(--bone);
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.polyquiz .pq-opt:hover { background: #1a0d04; border-color: var(--neon-yellow); }
.polyquiz .pq-opt .pq-odds { color: var(--neon-acid); font-family: var(--display); font-size: 13px; }
.polyquiz .pq-opt.won { background: #06FFA5; color: #000; }
.polyquiz .pq-opt.lost { background: #ff2a1f; color: #fff; }
.polyquiz.margin-call { animation: marginCall 1s steps(2) infinite; }
@keyframes marginCall {
  0%,100% { background: rgba(255,42,31,.0); }
  50%     { background: rgba(255,42,31,.4); }
}

/* === SHREDDER === */
.shredder .docs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 14px 0;
}
.shredder .doc {
  background: #f4e9c1;
  color: #1a0d04;
  padding: 12px;
  font-family: var(--mono);
  font-size: 13px;
  cursor: grab;
  border: 1px solid #5c4033;
  box-shadow: 3px 3px 0 #000;
  user-select: none;
  transition: transform .15s;
}
.shredder .doc:hover { transform: rotate(-2deg) scale(1.04); }
.shredder .doc.dragging { opacity: .5; }
.shredder .doc.shredded { animation: shredFall .8s ease-in forwards; }
@keyframes shredFall {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(80px) scaleY(.1); opacity: 0; }
}
.shredder .shred-zone {
  margin: 14px 0;
  padding: 18px;
  background: #1a0d04;
  border: 3px dashed var(--neon-blood);
  text-align: center;
  font-family: var(--display);
  color: var(--neon-blood);
  font-size: 16px;
  letter-spacing: .12em;
  cursor: pointer;
}
.shredder .shred-zone.hover { background: var(--neon-blood); color: var(--ink); }
.shredder .shred-zone.chewing .shred-mouth { animation: chew .15s steps(2) infinite; }
.shredder .shred-mouth { font-size: 18px; color: var(--neon-yellow); letter-spacing: .3em; }
.shredder .shred-label { margin: 6px 0; }
@keyframes chew {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(2px); }
}