/* Fortochka Radio — CSS-built Russian radio */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #1a1410;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, 'Times New Roman', serif;
  padding: 16px;
}

/* ─── Cabinet ───────────────────────────────────────────────── */

.radio {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(
    160deg,
    #6b4423 0%,
    #5a3518 15%,
    #4a2810 40%,
    #3d2010 60%,
    #4a2810 85%,
    #5a3518 100%
  );
  border-radius: 20px 20px 12px 12px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.7),
    0 2px 0 rgba(255, 255, 255, 0.05) inset,
    0 -2px 8px rgba(0, 0, 0, 0.3) inset;
  border: 3px solid #3a2210;
  overflow: hidden;
  position: relative;
}

.cabinet-top {
  height: 12px;
  background: linear-gradient(180deg, #7a5030, #5a3518);
  border-bottom: 1px solid #3a2210;
}

/* ─── Speaker Grill ─────────────────────────────────────────── */

.speaker-section {
  padding: 16px 24px 12px;
}

.speaker-grill {
  height: 120px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  border: 3px solid #3a2210;
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.05);

  /* Fabric texture — horizontal lines */
  background:
    repeating-linear-gradient(
      0deg,
      #c9b896 0px, #c9b896 1px,
      #bfae86 1px, #bfae86 2px,
      #c4b38e 2px, #c4b38e 3px,
      #b8a67e 3px, #b8a67e 4px
    );
}

/* Diamond pattern overlay on fabric */
.speaker-grill::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0px, transparent 8px,
      rgba(0,0,0,0.03) 8px, rgba(0,0,0,0.03) 9px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0px, transparent 8px,
      rgba(0,0,0,0.03) 8px, rgba(0,0,0,0.03) 9px
    );
}

/* Center badge / emblem */
.grill-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c4a44a, #8b6914);
  border: 2px solid #6b5020;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.power-led {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #555;
  border: 1px solid #333;
  transition: all 0.5s;
}

.power-led.online {
  background: radial-gradient(circle at 40% 40%, #7fff7f, #4caf50, #2e7d32);
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.7), 0 0 20px rgba(76, 175, 80, 0.3);
}

.power-led.offline {
  background: radial-gradient(circle at 40% 40%, #ff7f7f, #f44336, #c62828);
  box-shadow: 0 0 10px rgba(244, 67, 54, 0.5);
}

/* ─── Frequency Band ────────────────────────────────────────── */

.freq-band {
  margin: 0 24px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #f0e0c0, #e4d0a4, #dcc898);
  border-radius: 4px;
  border: 2px solid #3a2210;
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.freq-label {
  font-size: 16px;
  font-weight: bold;
  color: #3d2410;
  letter-spacing: 4px;
}

.freq-status {
  font-size: 11px;
  color: #8b7050;
  font-style: italic;
}

/* ─── Control Panel ─────────────────────────────────────────── */

.control-panel {
  padding: 16px 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Knobs */
.knob {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(145deg, #c4a44a, #8b6914, #6b5010);
  border: 2px solid #4a3510;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
  position: relative;
  cursor: default;
}

.knob-inner {
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border-radius: 50%;
  background: linear-gradient(145deg, #a8872e, #7a6020);
  border: 1px solid #5a4518;
}

.knob-indicator {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 10px;
  background: #e0c060;
  border-radius: 1px;
}

/* Presets container */
.presets {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  min-height: 52px;
  align-items: center;
}

/* Preset buttons */
.preset-btn {
  flex: 1 1 calc(50% - 8px);
  min-width: 100px;
  padding: 10px 8px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12px;
  text-align: center;
  transition: all 0.15s;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;

  background: linear-gradient(180deg, #d4b858, #b89830, #a08020);
  color: #2e1a0c;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  border: 1px solid #7a6020;
}

.preset-btn:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    inset 0 1px 3px rgba(0, 0, 0, 0.2);
  background: linear-gradient(180deg, #c4a848, #a88820, #907010);
}

.preset-btn .btn-name {
  font-weight: bold;
  font-size: 13px;
}

.preset-btn .btn-detail {
  font-size: 9px;
  opacity: 0.7;
}

.preset-btn .btn-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #555;
  border: 1px solid rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 6px;
  right: 6px;
  transition: all 0.3s;
}

.preset-btn.ok .btn-led {
  background: radial-gradient(circle, #7fff7f, #4caf50);
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.6);
}

.preset-btn.down .btn-led {
  background: radial-gradient(circle, #ff7f7f, #f44336);
  box-shadow: 0 0 5px rgba(244, 67, 54, 0.4);
}

.preset-btn.down {
  opacity: 0.45;
  cursor: not-allowed;
  background: linear-gradient(180deg, #9a8a58, #7a6a40);
}

.preset-btn.selected {
  background: linear-gradient(180deg, #e8c860, #c8a830);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 14px rgba(212, 180, 74, 0.25);
}

/* ─── Output Panel ──────────────────────────────────────────── */

.output-panel {
  margin: 0 24px 16px;
  padding: 14px 16px;
  min-height: 70px;
  background: linear-gradient(180deg, #f0e0c0, #e4d0a4);
  border-radius: 4px;
  border: 2px solid #3a2210;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15);
  text-align: center;
  font-size: 13px;
  color: #3d2410;
}

.output-idle {
  color: #8b7050;
  font-style: italic;
  padding: 10px 0;
}

.output-success { color: #2e6b30; }

.output-success .output-link {
  font-family: monospace;
  font-size: 9px;
  word-break: break-all;
  background: rgba(0, 0, 0, 0.05);
  padding: 6px;
  border-radius: 3px;
  margin-top: 6px;
  display: block;
  max-height: 50px;
  overflow: hidden;
}

.output-error { color: #a02020; }

.output-instructions {
  margin-top: 8px;
  font-size: 10px;
  color: #6b5030;
  line-height: 1.4;
}

/* ─── Bottom ────────────────────────────────────────────────── */

.cabinet-bottom {
  padding: 8px 24px 14px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.brand {
  font-size: 9px;
  color: #6b5030;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ─── Responsive ────────────────────────────────────────────── */

@media (max-width: 380px) {
  .control-panel { padding: 12px 16px; }
  .speaker-section { padding: 12px 16px 10px; }
  .freq-band, .output-panel { margin-left: 16px; margin-right: 16px; }
  .knob { width: 42px; height: 42px; }
  .preset-btn { flex: 1 1 100%; }
  .freq-label { font-size: 14px; letter-spacing: 2px; }
}