:root{
  --wood-dark:#32170c;
  --wood:#6f3d20;
  --wood-light:#9a5c31;
  --cream:#eadfca;
  --paper:#d8c9ac;
  --ink:#0a0908;
  --green:#b5ff55;
  --screen:#101a10;
  --muted:#87927f;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#0e0c0b;color:var(--cream);font-family:Arial,Helvetica,sans-serif}
body{overflow-x:hidden;overflow-y:auto;}
button,a{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}

.basement{
  min-height:100vh;min-height:100svh;position:relative;overflow:hidden;overflow-y:auto;
  background:
    radial-gradient(ellipse at 50% 38%,rgba(170,120,65,.12),transparent 38%),
    linear-gradient(#171311 0 67%,#100d0b 67%);
}
.wall{
  position:absolute;inset:0 0 33% 0;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 110px),
    repeating-linear-gradient(0deg,transparent 0 42px,rgba(0,0,0,.22) 42px 44px),
    #211b17;
  border-bottom:8px solid #0a0908;
}
.floor{
  .floor{
  position:absolute;
  top:70%;
  left:0;
  right:0;
  min-height:40vh;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 3px,transparent 3px 100px),
    #17120f;
}
.floor:after{
  content:"";position:absolute;inset:0;opacity:.2;
  background-image:radial-gradient(#c6a47b .5px,transparent .5px);background-size:8px 8px;
}
.rug{
  position:absolute;left:50%;bottom:7%;transform:translateX(-50%);
  width:min(900px,75vw);height:70%;border-radius:50%;
  background:repeating-linear-gradient(0deg,#201914 0 7px,#272019 7px 10px);
  border:5px solid #0d0b09;opacity:.9;box-shadow:0 20px 40px #000;
}
.poster{
  position:absolute;padding:14px;background:#d8c7a9;color:#17110d;
  font:900 18px/1 "Arial Black",sans-serif;letter-spacing:-1px;
  box-shadow:5px 8px 0 #0b0908;z-index:1
}
.poster span{font-size:27px}
.poster-one{left:7%;top:25%;transform:rotate(-5deg)}
.poster-two{right:8%;top:22%;transform:rotate(6deg);font-size:12px;line-height:1.15}
.wall-note{position:absolute;left:25%;top:20%;font:11px monospace;color:#6e6258;transform:rotate(3deg)}
.cable{position:absolute;border:3px solid #0a0908;border-top:0;border-left:0;width:180px;height:110px;opacity:.8}
.cable-one{left:13%;bottom:5%;transform:rotate(-18deg)}
.cable-two{right:15%;bottom:7%;transform:rotate(12deg)}

.mess{position:absolute;z-index:3}
.mess-left{left:4%;bottom:3%;width:250px;height:170px}
.mess-right{right:3%;bottom:2%;width:280px;height:200px}
.chip-bag{
  position:absolute;left:25px;bottom:20px;width:95px;height:125px;
  padding-top:30px;text-align:center;background:#d58d32;color:#32170c;
  border:4px solid #17100b;border-radius:12px 8px 15px 10px;transform:rotate(-12deg);
  font:900 17px/1 "Arial Black",sans-serif;box-shadow:6px 7px 0 #0b0908
}
.chip-bag small{font:900 9px monospace}
.takeout-box{
  position:absolute;left:130px;bottom:28px;width:80px;height:50px;
  background:#e6d5b7;border:4px solid #17100b;transform:rotate(7deg);
  box-shadow:5px 6px 0 #0b0908
}
.sock{position:absolute;width:80px;height:30px;background:#cfc7b8;border:4px solid #17100b;border-radius:25px 30px 8px 20px}
.sock:after{content:"";position:absolute;left:-28px;top:7px;width:45px;height:22px;background:#cfc7b8;border:4px solid #17100b;border-right:0;border-radius:20px}
.sock-one{right:5px;bottom:2px;transform:rotate(18deg)}.sock-two{left:15px;bottom:0;transform:rotate(-17deg)}
.record-stack{position:absolute;left:155px;bottom:0;width:85px;height:42px}
.record-stack i{position:absolute;width:90px;height:12px;background:#080808;border:3px solid #191919;border-radius:50%;left:0}
.record-stack i:nth-child(1){bottom:0}.record-stack i:nth-child(2){bottom:9px;left:5px}.record-stack i:nth-child(3){bottom:18px;left:-3px}
.fast-food{
  position:absolute;right:20px;bottom:30px;width:85px;height:60px;padding-top:13px;
  text-align:center;background:#e2c49d;border:4px solid #17100b;transform:rotate(-8deg);
  color:#6b2b18;font:900 15px monospace;box-shadow:5px 6px 0 #0b0908
}
.fast-food small{font-size:7px}
.bottle{position:absolute;right:115px;bottom:22px;width:28px;height:75px;background:#53705d;border:4px solid #0b0908;border-radius:5px 5px 12px 12px;transform:rotate(10deg)}
.guitar{
  position:absolute;right:165px;bottom:8px;width:65px;height:185px;transform:rotate(18deg);
  border:5px solid #120b08;background:#8b4b27;border-radius:50% 50% 42% 42%;
  box-shadow:5px 7px 0 #0b0908
}
.guitar:before{content:"";position:absolute;left:26px;top:-95px;width:15px;height:110px;background:#a87849;border:4px solid #120b08}
.guitar:after{content:"";position:absolute;left:21px;top:35px;width:23px;height:23px;border:4px solid #17100b;border-radius:50%}
.guitar span{position:absolute;left:29px;top:-98px;width:3px;height:235px;background:#d6c8a8;box-shadow:7px 0 #d6c8a8}

.tv{
  position:absolute;z-index:5;left:50%;top:0;transform:translateX(-50%);
  width:min(1180px,90vw);
  padding:22px 26px 18px;
  border:6px solid #1c0e08;border-radius:22px 22px 15px 15px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.16),transparent 15%,rgba(255,255,255,.05) 50%,transparent 85%,rgba(0,0,0,.2)),
    linear-gradient(145deg,var(--wood-light),var(--wood) 45%,var(--wood-dark));
  box-shadow:0 32px 70px rgba(0,0,0,.75),inset 0 2px rgba(255,255,255,.2),inset 0 -10px 18px rgba(0,0,0,.35);
}

.tv-antennas{position:absolute;top:-75px;right:105px;width:190px;height:85px}
.tv-antennas:before{content:"";position:absolute;left:93px;bottom:0;width:6px;height:75px;background:#111;border-radius:5px}
.tv-antennas span{position:absolute;top:0;width:6px;height:85px;background:#111;border-radius:5px}
.tv-antennas span:first-child{left:35px;transform:rotate(-36deg)}
.tv-antennas span:last-child{right:25px;transform:rotate(36deg)}
.tv-top{height:46px;display:flex;align-items:center;padding:0 20px;color:#1d1009}
.tv-logo{font:900 15px monospace;letter-spacing:3px;flex:1}
.tv-model{font:900 8px monospace;letter-spacing:1px;opacity:.65}

.tv-front{display:grid;grid-template-columns:minmax(0,1fr) 155px;gap:12px}
.crt-bezel{
  padding:14px;background:#100d0b;border:5px solid #1d1009;
  border-radius:70px 70px 58px 58px;
  box-shadow:inset 0 0 25px #000,0 2px 0 rgba(255,255,255,.12)
}
.crt-screen{
  overflow: auto;
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:52px 52px 43px 43px;
  background:var(--screen);border:3px solid #050505;box-shadow:inset 0 0 45px #000
}
.crt-glow{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(181,255,85,.11),transparent 70%)}
.scanlines{position:absolute;inset:0;z-index:20;pointer-events:none;opacity:.17;background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 3px 4px)}
.screen-noise{position:absolute;inset:0;z-index:19;pointer-events:none;opacity:.05;background-image:radial-gradient(#fff .6px,transparent .6px);background-size:4px 4px}
.screen-ui{position:absolute;inset:0;padding:25px 30px;color:#dce5d4;text-shadow:0 0 6px rgba(181,255,85,.32);z-index:3}
.screen-header{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid rgba(181,255,85,.35);padding-bottom:10px}
.channel-id{font:12px monospace;letter-spacing:2px;color:var(--green)}
.channel-id strong{font-size:17px}
.screen-header h1{margin:7px 0 0;font:900 43px/.9 "Arial Black",sans-serif;letter-spacing:-3px}
.status{font:11px monospace;color:var(--green)}
.channel{display:none;height:calc(100% - 75px);padding-top:17px}
.channel.active{display:block}
.live-layout{display:grid;grid-template-columns:1fr 160px;gap:12px;height:100%}
.broadcast{min-width:0;border:1px solid rgba(181,255,85,.32);background:rgba(3,8,4,.76)}
.stream-placeholder{height:100%;display:flex;align-items:center;justify-content:center;gap:25px;padding:20px}
.stream-placeholder img{width:150px;height:150px;object-fit:contain;background:#fff;border-radius:8px}
.eyebrow{font:10px monospace;letter-spacing:2px;color:var(--green)}
.signal-copy h2{margin:9px 0;font:900 29px/.92 "Arial Black",sans-serif;letter-spacing:-1px}
.signal-copy p{font-size:12px;line-height:1.4;color:#a5b09f;max-width:330px}
.green-button{
  display:inline-block;border:1px solid var(--green);background:var(--green);color:#091008;
  padding:9px 12px;font:900 10px monospace;letter-spacing:1px;text-shadow:none
}
button.green-button{cursor:pointer}
#pumpPlayer{width:100%;height:100%;border:0}
.now-playing{border:1px solid rgba(181,255,85,.32);padding:12px;background:rgba(3,8,4,.76)}
.record-disc{
  width:86px;height:86px;margin:12px auto;border-radius:50%;
  background:radial-gradient(circle,#b21f1b 0 14%,#080808 15% 21%,#181818 22% 24%,#070707 25% 100%);
  box-shadow:inset 0 0 0 8px #080808
}
.now-playing h3{font-size:13px;margin:6px 0}.now-playing p{font:9px monospace;color:#899585}
.equalizer{height:25px;display:flex;align-items:end;gap:3px;margin:14px 0}
.equalizer i{width:5px;background:var(--green);height:45%}.equalizer i:nth-child(2){height:75%}.equalizer i:nth-child(3){height:35%}.equalizer i:nth-child(4){height:90%}.equalizer i:nth-child(5){height:55%}.equalizer i:nth-child(6){height:100%}.equalizer i:nth-child(7){height:65%}
.viewer-count{border-top:1px solid rgba(181,255,85,.25);padding-top:8px;font:9px monospace;color:#7f897a}.viewer-count strong{float:right;color:var(--green)}
.info-screen{height:100%;padding:25px 28px;border:1px solid rgba(181,255,85,.32);background:rgba(3,8,4,.76)}
.info-screen h2{margin:12px 0;font:900 clamp(32px,4.5vw,58px)/.9 "Arial Black",sans-serif;letter-spacing:-3px}
.info-screen p{font-size:15px;line-height:1.45;max-width:700px;color:#b4c0af}
.countdown{margin:22px 0;color:var(--green);font:900 29px monospace}
.joke,.fine-print{font:10px monospace!important;color:#748071!important}
.manifesto{margin-top:25px;color:var(--green);font:900 18px monospace;transform:rotate(-2deg)}
.links{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.links a{padding:14px;border:1px solid rgba(181,255,85,.3);color:var(--green);font:900 12px monospace}
.screen-footer{position:absolute;left:30px;right:30px;bottom:8px;display:flex;justify-content:space-between;color:#697463;font:8px monospace;letter-spacing:1px}

.tv-controls{
  min-width:0;padding:10px 10px 12px;border:3px solid #1a0e08;border-radius:10px;
  background:linear-gradient(145deg,#82502f,#4a2817);box-shadow:inset 0 2px rgba(255,255,255,.12),inset 0 -8px 12px rgba(0,0,0,.4)
}
.speaker{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:5px 4px 12px;border-bottom:1px solid rgba(0,0,0,.3)}
.speaker i{height:4px;border-radius:3px;background:#1b100a;box-shadow:inset 0 1px #000}
.knob-label{margin-top:8px;text-align:center;color:#d8b99b;font:7px monospace;letter-spacing:2px}
.big-knob{
  display:block;margin:5px auto 8px;width:39px;height:39px;border-radius:50%;
  border:4px solid #1a0d07;background:#2b211b;color:#cdbba5;font-size:17px;
  box-shadow:inset 2px 3px 5px #000,0 2px 0 #160a05
}
.channel-dial{display:flex;align-items:center;justify-content:space-between;gap:4px}
.channel-dial button{
  width:27px;height:27px;border-radius:50%;border:2px solid #1a0d07;background:#29201a;color:#d4c0a5;font-weight:900
}
.channel-dial div{background:#0e0c0a;padding:4px 8px;text-align:center;color:var(--green);font-family:monospace}
.channel-dial small{display:block;font-size:7px}.channel-dial strong{font-size:18px}
.channel-buttons{display:grid;gap:5px;margin-top:12px}
.channel-button{
  display:grid;grid-template-columns:24px 1fr;gap:5px;align-items:center;text-align:left;
  padding:8px 6px;border:1px solid #2a160b;background:#8c5633;color:#160d08;border-radius:3px
}
.channel-button b,.channel-button span{font:900 10px monospace}
.channel-button.selected,.channel-button:hover{background:var(--green);color:#081008}
.tv-sticker{margin-top:12px;padding:8px;border:2px solid #241108;background:#d4c3a5;color:#28160c;text-align:center;transform:rotate(-2deg);font:900 9px/1.1 monospace}
.tv-sticker span{font-size:7px}
.tv-bottom{display:flex;justify-content:space-between;padding:9px 8px 0;color:#1d1009;font:700 7px monospace;letter-spacing:1px}

@media(max-width:900px){
  .tv{top:5%;width:95vw}
  .tv-front{grid-template-columns:1fr}
  .tv-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:center}
  .speaker{grid-column:1/-1}
  .channel-buttons{grid-column:1/-1;grid-template-columns:repeat(5,1fr)}
  .channel-button{display:block;text-align:center}.channel-button b{display:block}.tv-sticker{display:none}
  .live-layout{grid-template-columns:1fr}.now-playing{display:none}
  .mess{opacity:.65}
}
@media(max-width:600px){
  .basement{background:linear-gradient(#171311 0 75%,#100d0b 75%)}
  .wall{inset:0 0 25%}.floor{inset:75% 0 0}
  .poster,.wall-note,.mess{display:none}
  .tv{top:5%;width:98vw;padding:12px 12px 10px}
  .tv-top{height:35px;padding:0 8px}.tv-logo{font-size:11px;letter-spacing:1px}.tv-model{display:none}
  .crt-bezel{padding:7px;border-radius:42px}
  .crt-screen{border-radius:34px}
  .screen-ui{padding:17px 18px}.screen-header h1{font-size:30px}
  .stream-placeholder{flex-direction:column;gap:5px;text-align:center;padding:12px}
  .stream-placeholder img{width:95px;height:95px}
  .signal-copy h2{font-size:22px}.signal-copy p{font-size:10px}
  .info-screen{padding:18px}.info-screen h2{font-size:32px}
  .channel-buttons{gap:3px}.channel-button{padding:7px 2px}.channel-button b,.channel-button span{font-size:8px}
  .screen-footer{left:18px;right:18px;font-size:7px}
  .tv-bottom{display:none}
}

/* COIN JAM - landing viewport */
.basement {
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
}

.tv {
  top: 20px;
}

/* COIN JAM - TV stand */
.rug {
  position: absolute;
  left: 50%;
  bottom: auto;
  top: calc(20px + min(1180px, 90vw) * 0.55);
  transform: translateX(-50%);
  width: min(820px, 70vw);
  height: 90px;
  border-radius: 50%;
  z-index: 4;
}

/* Mobile CRT screen: let the TV screen content scroll */
@media (max-width:600px){
  .crt-screen{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  .screen-ui{
    position:relative;
    min-height:100%;
  }

  .channel{
    height:auto;
    min-height:calc(100% - 75px);
  }
}

/* TEMPORARY: remove basement cruft */
.wall,
.mess-left,
.mess-right {
  display: none;
}

.channel-buttons.tv-off .channel-button.selected {
  opacity: 0.35;
  filter: grayscale(1);
  box-shadow: none;
}