/* ==========================================================================
   SENSER TAPE DECK - Retro 80s/90s VHS Camcorder Soundboard Styling
   ========================================================================== */

:root {
  --bg-dark: #0e0f14;
  --chassis-dark: #16171f;
  --chassis-border: #2a2d3c;
  --chassis-highlight: #3b3f54;
  
  --osd-green: #39ff14;
  --osd-red: #ff2a55;
  --osd-cyan: #00f0ff;
  --osd-gold: #ffb703;
  --osd-white: #e6ebf5;

  --stripe-red: #e63946;
  --stripe-blue: #0077b6;
  --stripe-gold: #f4a261;

  --font-osd: 'VT323', 'Share Tech Mono', 'Courier New', monospace;
  --font-mono: 'Share Tech Mono', monospace;
  --font-label: 'Impact', 'Arial Black', 'Helvetica Neue', sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

body {
  background-color: var(--bg-dark);
  color: var(--osd-white);
  font-family: var(--font-mono);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: calc(12px + var(--safe-top)) 12px calc(24px + var(--safe-bottom));
  overflow-x: hidden;
  position: relative;
}

/* --- CRT Scanlines & Vignette Overlay --- */
.crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999;
  background: 
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0.22) 2px,
      rgba(0, 0, 0, 0.22) 4px
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0.65) 100%
    );
  opacity: 0.85;
}

/* --- Tape Deck Chassis Container --- */
.deck-container {
  width: 100%;
  max-width: 900px;
  background: linear-gradient(180deg, #1b1c26 0%, #12131a 100%);
  border: 3px solid var(--chassis-border);
  border-radius: 18px;
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.8),
    inset 0 1px 1px rgba(255, 255, 255, 0.15),
    inset 0 -2px 4px rgba(0, 0, 0, 0.7);
  padding: 18px 20px 24px;
  position: relative;
  z-index: 1;
}

/* --- Camcorder / VHS OSD Header --- */
.osd-header {
  background: #08090d;
  border: 2px solid #232533;
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin-bottom: 24px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.9);
}

.osd-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-osd);
  font-size: 1.4rem;
  letter-spacing: 2px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #242738;
}

.osd-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rec-status {
  color: var(--osd-red);
  font-weight: bold;
}

.rec-dot {
  width: 10px;
  height: 10px;
  background-color: var(--osd-red);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--osd-red);
  animation: rec-blink 1.2s infinite steps(1);
}

@keyframes rec-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.tape-mode {
  color: var(--osd-cyan);
}

.counter {
  color: var(--osd-green);
  font-size: 1.5rem;
}

.osd-label {
  font-size: 1.1rem;
  color: #838b9e;
  margin-right: 4px;
}

.battery-icon {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--osd-green);
  border-radius: 2px;
}

.battery-icon span {
  display: block;
  width: 4px;
  height: 8px;
  background-color: var(--osd-green);
}

/* --- Brand Plate & Stripes --- */
.brand-plate {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0 14px;
}

.brand-stripes {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 8px;
  height: 48px;
}

.stripe {
  flex: 1;
  border-radius: 2px;
}

.stripe-red { background-color: var(--stripe-red); box-shadow: 0 0 6px var(--stripe-red); }
.stripe-blue { background-color: var(--stripe-blue); box-shadow: 0 0 6px var(--stripe-blue); }
.stripe-gold { background-color: var(--stripe-gold); box-shadow: 0 0 6px var(--stripe-gold); }

.brand-title-box {
  flex: 1;
}

.deck-title {
  font-family: var(--font-osd);
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 
    0 0 10px rgba(0, 240, 255, 0.4),
    2px 2px 0px #1a1c29;
}

.deck-subtitle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #7b8396;
  letter-spacing: 1.5px;
  margin-top: 4px;
}

/* --- Controls Panel & CHEESE IT! Button --- */
.controls-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid #1a1c26;
  flex-wrap: wrap;
}

.deck-status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #12141c;
  border: 1px solid #282c3d;
  padding: 6px 12px;
  border-radius: 20px;
}

.pulse-light {
  width: 8px;
  height: 8px;
  background: var(--osd-green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--osd-green);
  animation: pulse-green 2s infinite ease-in-out;
}

@keyframes pulse-green {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

.status-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #9299aa;
  letter-spacing: 1px;
  font-weight: bold;
}

/* --- CHEESE IT! Button --- */
.cheese-it-button {
  display: inline-flex;
  align-items: stretch;
  background: linear-gradient(180deg, #333644 0%, #1b1d26 100%);
  border: 2px solid #5a5f75;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  box-shadow: 
    0 4px 0 #0f1015,
    0 6px 12px rgba(0, 0, 0, 0.6);
  transition: all 0.08s ease;
  touch-action: manipulation;
  outline: none;
}

.cheese-it-button:active {
  transform: translateY(3px);
  box-shadow: 
    0 1px 0 #0f1015,
    0 2px 4px rgba(0, 0, 0, 0.8);
}

.btn-core {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #e62247 0%, #b31030 100%);
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.4);
}

.stop-icon {
  font-size: 1rem;
  line-height: 1;
  color: #fff;
}

.btn-text {
  font-family: var(--font-label);
  font-size: 1.15rem;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.hazard-stripe {
  width: 14px;
  background: repeating-linear-gradient(
    45deg,
    #ffcc00,
    #ffcc00 4px,
    #1b1d26 4px,
    #1b1d26 8px
  );
  border-radius: 2px;
}

/* --- Soundboard Grid --- */
.soundboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

/* --- Dymo / Embossed Tape Buttons --- */
.tape-button {
  position: relative;
  background: #15161e;
  border: 2px solid #2c3040;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
  box-shadow: 
    0 5px 0 #0a0b0e,
    0 8px 15px rgba(0, 0, 0, 0.7);
  transition: transform 0.06s ease, box-shadow 0.06s ease, border-color 0.15s ease;
  touch-action: manipulation;
  outline: none;
  overflow: hidden;
}

.tape-button:active {
  transform: translateY(4px);
  box-shadow: 
    0 1px 0 #0a0b0e,
    0 3px 6px rgba(0, 0, 0, 0.8);
}

/* Embossed Tape Strip */
.tape-label {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 1;
  padding: 10px 14px;
  border-radius: 4px;
  margin-right: 8px;
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -1px 2px rgba(0, 0, 0, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.4);
}

.quote-text {
  font-family: var(--font-label);
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  word-break: break-word;
  /* Embossed 3D Dymo punch effect */
  text-shadow: 
    0 -1px 0 rgba(0, 0, 0, 0.9),
    0 1px 1px rgba(255, 255, 255, 0.4),
    0 0 2px rgba(255, 255, 255, 0.2);
}

/* Side cut notches for authentic label tape look */
.tape-cut-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
}
.tape-cut-edge.left {
  left: 0;
  border-left: 2px dashed rgba(0, 0, 0, 0.4);
}
.tape-cut-edge.right {
  right: 0;
  border-right: 2px dashed rgba(0, 0, 0, 0.4);
}

/* Tape Colors */
.tape-black .tape-label {
  background: linear-gradient(180deg, #2a2b33 0%, #131418 100%);
  border: 1px solid #3c3e4a;
}

.tape-red .tape-label {
  background: linear-gradient(180deg, #a61c2d 0%, #6e0e1b 100%);
  border: 1px solid #c2293d;
}

.tape-blue .tape-label {
  background: linear-gradient(180deg, #1b4f8c 0%, #0d2f59 100%);
  border: 1px solid #256bb8;
}

.tape-green .tape-label {
  background: linear-gradient(180deg, #1d6b46 0%, #0f4028 100%);
  border: 1px solid #288f5f;
}

.tape-gold .tape-label {
  background: linear-gradient(180deg, #ab7d07 0%, #6b4d00 100%);
  border: 1px solid #d49e10;
}

/* --- VU Meter Visualizer (Active State) --- */
.vu-meter {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
  width: 15px;
  opacity: 0.25;
  transition: opacity 0.2s ease;
}

.vu-meter span {
  flex: 1;
  background-color: var(--osd-green);
  border-radius: 1px;
  height: 4px;
  transition: height 0.1s ease;
}

.vu-meter span:nth-child(1) { height: 6px; }
.vu-meter span:nth-child(2) { height: 10px; }
.vu-meter span:nth-child(3) { height: 14px; background-color: var(--osd-gold); }

/* Playing State on Tape Button */
.tape-button.is-playing {
  border-color: var(--osd-green);
  box-shadow: 
    0 0 16px rgba(57, 255, 20, 0.4),
    0 5px 0 #0a0b0e;
}

.tape-button.is-playing .vu-meter {
  opacity: 1;
}

.tape-button.is-playing .vu-meter span:nth-child(1) {
  animation: vu-bounce-1 0.4s infinite alternate ease-in-out;
}
.tape-button.is-playing .vu-meter span:nth-child(2) {
  animation: vu-bounce-2 0.35s infinite alternate ease-in-out 0.1s;
}
.tape-button.is-playing .vu-meter span:nth-child(3) {
  animation: vu-bounce-3 0.45s infinite alternate ease-in-out 0.2s;
}

@keyframes vu-bounce-1 {
  0% { height: 4px; }
  100% { height: 18px; }
}
@keyframes vu-bounce-2 {
  0% { height: 6px; }
  100% { height: 22px; }
}
@keyframes vu-bounce-3 {
  0% { height: 8px; }
  100% { height: 20px; }
}

/* --- Footer --- */
.deck-footer {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px dashed #282c3c;
  display: flex;
  justify-content: center;
}

.footer-osd {
  font-family: var(--font-osd);
  font-size: 1.1rem;
  color: #636b80;
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 2px;
}

.footer-osd .separator {
  color: #3b4052;
  font-size: 0.6rem;
}

/* --- Responsive Adjustments --- */
@media (max-width: 640px) {
  body {
    padding: calc(6px + var(--safe-top)) 6px calc(16px + var(--safe-bottom));
  }

  .deck-container {
    padding: 12px 10px 18px;
    border-radius: 12px;
  }

  .osd-header {
    padding: 10px 12px 12px;
    margin-bottom: 16px;
  }

  .osd-topbar {
    font-size: 1.15rem;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  .deck-title {
    font-size: 1.8rem;
    letter-spacing: 2px;
  }

  .deck-subtitle {
    font-size: 0.65rem;
  }

  .soundboard-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tape-button {
    min-height: 72px;
    padding: 8px 10px;
  }

  .quote-text {
    font-size: 0.95rem;
    letter-spacing: 1px;
  }

  .controls-panel {
    justify-content: space-between;
  }

  .btn-text {
    font-size: 1rem;
  }
}