/* Sandbox design: wood-grain cabinet, beige control panel, red LED channel readout. */

.tv {
  border-radius: 34px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(110,150,255,.16), rgba(110,150,255,0) 60%),
    repeating-linear-gradient(2deg, rgba(25,10,3,.28) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-1deg, rgba(255,200,140,.06) 0 3px, transparent 3px 19px),
    linear-gradient(180deg, #70411f, #3a1d0b);
  background-color: #5a3018;
  box-shadow:
    inset 0 2px 0 rgba(255,220,180,.18),
    inset 0 -8px 0 rgba(0,0,0,.35),
    0 0 120px rgba(70,120,255,.2),
    0 30px 60px rgba(0,0,0,.7);
}

.bezel {
  border-radius: 40px;
  background: linear-gradient(160deg, #24211f, #0e0c0b);
  box-shadow: inset 0 0 0 3px #070605, inset 0 4px 10px rgba(255,255,255,.06);
}
.well { background: #0b0b0b; box-shadow: 0 0 0 5px #050505, 0 0 60px rgba(110,160,255,.45); }
.on.glow .well { box-shadow: 0 0 0 5px #050505, 0 0 70px rgba(110,160,255,.6); }

/* ---- beige side panel ---- */
.panel {
  left: 762px;
  width: 194px;
  border-radius: 14px;
  background: linear-gradient(180deg, #bdb6a8, #8c8576);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.45);
  font-family: "Archivo Narrow", Arial, sans-serif;
}
.brand { top: 12px; gap: 0; }
.logo {
  font: italic 400 26px/1.1 "Righteous", sans-serif;
  background: none;
  color: #e9c97a;
  -webkit-text-fill-color: #e9c97a;
  filter: none;
  text-shadow: 1px 1px 0 #2a1408;
}
.model { color: #2b241b; font-weight: 700; letter-spacing: .25em; font-size: 9px; }
.badge { display: none; }

.grille {
  position: absolute;
  left: 18px; right: 18px; top: 70px;
  height: 58px;
  border-radius: 6px;
  background: repeating-linear-gradient(0deg, #1e1b18 0 3px, #a9a190 3px 7px);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
.led-ch {
  position: absolute;
  left: 18px; right: 18px; top: 136px;
  height: 40px;
  padding: 0 12px;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 4px;
  background: #120a08;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.8);
}
.led-ch small { font: 700 10px "Archivo Narrow", sans-serif; letter-spacing: 1px; color: #9a8f7a; }
.led-ch span { font: 36px/1 "VT323", monospace; color: #3a0f0b; }
.tv-on .led-ch span { color: #ff4a3a; text-shadow: 0 0 10px rgba(255,74,58,.9); }

/* year knob, on beige */
.dial { top: 172px; height: 160px; }
.dial-caption { display: none; }
.knob { top: 34px; }
.dial-label { color: #4a4135; }
.dial-label.active { color: #120a08; text-shadow: 0 0 6px rgba(255,255,255,.7); }
.dial-caption { top: 150px; color: #2b241b; font-weight: 700; }

/* buttons */
.controls { top: 330px; row-gap: 3px; }
.ctl-label { color: #2b241b; font-weight: 700; font-family: "Archivo Narrow", sans-serif; }
.btn {
  height: 32px;
  border-radius: 5px;
  background: linear-gradient(180deg, #dcd6c9, #aaa391);
  color: #2b241b;
  font: 700 14px/1 "Archivo Narrow", sans-serif;
  box-shadow: 0 2px 0 #6b6455, inset 0 1px 0 rgba(255,255,255,.6);
}
.btn:active, .btn.pressed { box-shadow: 0 0 0 #6b6455, inset 0 1px 2px rgba(0,0,0,.25); }
.btn.small {
  height: 28px; margin-top: 6px;
  background: #45403a; color: #f2eee4;
  box-shadow: 0 2px 0 #221f1c;
}
.btn.power {
  order: -1;
  margin: 0 0 4px;
  height: 34px;
  background: linear-gradient(180deg, #c9433a, #8f231c);
  color: #fff;
  box-shadow: 0 3px 0 #5a130f;
}

/* ---- phone remote, matching the beige panel ---- */
.remote {
  background: linear-gradient(180deg, #bdb6a8, #8c8576);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.3), 0 20px 40px rgba(0,0,0,.6);
  font-family: "Archivo Narrow", Arial, sans-serif;
}
.r-btn, .r-rocker button {
  background: linear-gradient(180deg, #dcd6c9, #aaa391);
  color: #2b241b;
  font-family: "Archivo Narrow", sans-serif;
  box-shadow: 0 3px 0 #6b6455, inset 0 1px 0 rgba(255,255,255,.6);
}
.r-rocker { background: #8a8372; box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
.r-rocker span { color: #2b241b; }
.r-power { background: linear-gradient(180deg, #c9433a, #8f231c); color: #fff; box-shadow: 0 3px 0 #5a130f; }
.r-guide { background: linear-gradient(180deg, #70411f, #3a1d0b); color: #e9c97a; box-shadow: 0 3px 0 #24110a; }
.r-row:last-of-type .r-btn { background: #45403a; color: #f2eee4; box-shadow: 0 3px 0 #221f1c; }
.r-year-display { background: #120a08; color: #ff4a3a; text-shadow: 0 0 8px rgba(255,74,58,.8); }
.r-brand { color: #e9c97a; font: italic 400 16px "Righteous", sans-serif; text-shadow: 1px 1px 0 #2a1408; }

/* ---- CATEGORIES panel and its tab, in the same wood cabinet ---- */
.guide, .guide-tab {
  background:
    repeating-linear-gradient(2deg, rgba(25,10,3,.28) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-1deg, rgba(255,200,140,.06) 0 3px, transparent 3px 19px),
    linear-gradient(180deg, #70411f, #3a1d0b);
  background-color: #5a3018;
  box-shadow: inset 0 2px 0 rgba(255,220,180,.18), inset 0 -6px 0 rgba(0,0,0,.35), 0 0 60px rgba(70,120,255,.15), 0 22px 40px rgba(0,0,0,.7);
  font-family: "Archivo Narrow", Arial, sans-serif;
}
.guide-tab { color: #e9c97a; }
.guide-tab:hover { filter: brightness(1.12); }
.guide-tab-arrow { color: #ff4a3a; text-shadow: 0 0 6px rgba(255,74,58,.8); }
.guide-title { font-family: "Righteous", sans-serif; font-size: 22px; font-style: italic; letter-spacing: .04em; color: #e9c97a; text-shadow: 1px 1px 0 #2a1408; }
.guide-close { background: #45403a; color: #f2eee4; box-shadow: 0 2px 0 #221f1c; }

.g-item, .g-only {
  background: linear-gradient(180deg, #dcd6c9, #aaa391);
  color: #4a4135;
  box-shadow: 0 2px 0 #6b6455, inset 0 1px 0 rgba(255,255,255,.6);
  font-family: "Archivo Narrow", sans-serif;
}
.g-item:hover { background: linear-gradient(180deg, #e6e1d6, #b5ae9d); color: #2b241b; }
.g-row.on .g-item { background: linear-gradient(180deg, #ece7dc, #bdb6a5); color: #1e1913; }
.g-lamp { background: #6e6656; }
.g-count { color: #7a7060; }
.g-row.on .g-count { color: #a3271c; }
.g-only { color: #6b6455; }
.g-only:hover { color: #a3271c; }
.g-row.empty .g-item { opacity: .55; }

.guide-actions button { background: #45403a; color: #f2eee4; box-shadow: 0 2px 0 #221f1c; }
.guide-sub { color: #e9c97a; }
.guide-years button { background: linear-gradient(180deg, #dcd6c9, #aaa391); color: #2b241b; box-shadow: 0 2px 0 #6b6455; }
.guide-years button[aria-pressed="true"] { background: #120a08; color: #ff4a3a; text-shadow: 0 0 8px rgba(255,74,58,.8); box-shadow: inset 0 2px 4px rgba(0,0,0,.8); }
.guide-count { background: #120a08; color: #ff4a3a; text-shadow: 0 0 8px rgba(255,74,58,.8); }
.guide-playlist { color: #e9c97a; }
.g-item:focus-visible, .g-only:focus-visible, .guide-close:focus-visible,
.guide-actions button:focus-visible, .guide-years button:focus-visible { outline-color: #e9c97a; }