/* FROM THA COUCH: the interactive room (couch, pillows, TV, FTC Radio).
   Ships together with /js/room.js. */


  /* couch stage */
  .stagewrap{padding:4vh 5vw 0}
  .stage-head{display:flex;justify-content:space-between;align-items:baseline;max-width:1100px;margin:0 auto .6rem;gap:1rem;flex-wrap:wrap}
  .stage-head .hint{color:var(--dim);font-size:.82rem;letter-spacing:.06em}
  .stage-head .hint b{color:var(--ember);font-weight:500}
  #stage{
    position:relative;max-width:1100px;margin:0 auto;height:72vh;min-height:560px;max-height:720px;
    background:linear-gradient(#0e0b08,#0a0806);
    border:1px solid var(--line);
    overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
  }
  /* ---- the 90s room ---- */
  .room-wall{
    position:absolute;left:0;right:0;top:0;bottom:14%;pointer-events:none;
    background:
      radial-gradient(ellipse 130% 90% at 50% 0%, rgba(0,0,0,.35), transparent 60%),
      repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 3px, transparent 3px 92px),
      linear-gradient(#41301c, #2e2011 70%, #241808);
  }
  .room-wall::after{ /* baseboard */
    content:"";position:absolute;left:0;right:0;bottom:0;height:12px;
    background:linear-gradient(#1c1206,#120b03);border-top:2px solid #4a3722;
  }
  .room-floor{
    position:absolute;left:0;right:0;bottom:0;height:14%;pointer-events:none;
    background:
      radial-gradient(ellipse 120% 100% at 50% 0%, rgba(0,0,0,.4), transparent 55%),
      radial-gradient(circle at 12% 40%, rgba(255,122,31,.05) 0 2px, transparent 3px),
      #1f3a36;
    background-size:auto, 26px 26px, auto;
  }
  .room-rug{
    position:absolute;left:50%;transform:translateX(-50%);bottom:2.5%;width:74%;height:9%;
    border-radius:50%;pointer-events:none;
    background:radial-gradient(ellipse at center, #7a2d1c 0 32%, #a8502a 32% 46%, #274b6e 46% 62%, #7a2d1c 62% 78%, #451f12 78%);
    box-shadow:0 4px 14px rgba(0,0,0,.5);
    opacity:.85;
  }
  .room-poster{
    position:absolute;left:4%;top:6%;width:96px;pointer-events:none;
    transform:rotate(-3deg);
    border:4px solid #f4ead8;box-shadow:0 8px 20px rgba(0,0,0,.55);
    background-size:cover;background-position:center;aspect-ratio:1148/1741;
    background-image:url("/img/room/poster.jpg");
  }
  .room-poster::after{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:26px;height:10px;background:rgba(244,234,216,.35)}
  .room-pennant{position:absolute;left:34%;top:5%;pointer-events:none;transform:rotate(6deg)}
  .room-lamp{position:absolute;left:16%;bottom:14%;pointer-events:none}
  @media(max-width:700px){
    .room-poster{width:64px;left:3%;top:4%}
    .room-pennant{display:none}
    .room-lamp{display:none}
  }

  /* the couch (drawn to match the logo couch) */
  .couch{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);width:min(560px,74%);aspect-ratio:560/240;pointer-events:none}
  .couch svg{width:100%;height:100%;display:block;overflow:visible}

  /* pillows */
  .pillow{
    position:absolute;z-index:5;cursor:grab;will-change:transform;touch-action:none;
    display:flex;align-items:center;justify-content:center;
    font-family:'Anton',sans-serif;letter-spacing:.06em;color:rgba(18,11,4,.55);
    box-shadow:inset 0 6px 10px rgba(255,255,255,.16), inset 0 -10px 16px rgba(0,0,0,.35), 0 10px 18px rgba(0,0,0,.45);
  }
  .pillow:active{cursor:grabbing}
  .pillow.cush{border-radius:14px}
  .pillow.throw{border-radius:12px}
  .pillow small{font-size:.62em;opacity:.7;font-family:'Rubik',sans-serif;font-weight:700;letter-spacing:.18em}

  /* the TV, wall-mounted above the couch, always in reach */
  .tv{
    position:absolute;top:3%;right:7%;width:min(380px,38vw);
  }
  .tv .stand{display:none}
  .tv .antenna{display:flex;justify-content:center;height:34px;position:relative}
  .tv .antenna::before,.tv .antenna::after{
    content:"";position:absolute;bottom:0;width:3px;height:38px;background:linear-gradient(#777,#3a3a3a);border-radius:2px;transform-origin:bottom center;
  }
  .tv .antenna::before{transform:rotate(-28deg)}
  .tv .antenna::after{transform:rotate(24deg)}
  .tv .antenna b{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:26px;height:12px;background:#241708;border-radius:6px 6px 0 0}
  .tv .frame{
    position:relative;
    background:
      repeating-linear-gradient(93deg, rgba(0,0,0,.14) 0 2px, transparent 2px 7px),
      linear-gradient(160deg,#43301d 0%, #2c1d0e 55%, #1c1106 100%);
    border:1px solid #56412a;border-radius:12px;
    padding:12px;box-shadow:0 22px 48px rgba(0,0,0,.65), inset 0 2px 4px rgba(255,214,150,.16);
  }
  .tv .screen{
    position:relative;aspect-ratio:16/9;background:#050403;border-radius:10px;overflow:hidden;
    border:3px solid #14100a;box-shadow:inset 0 0 26px rgba(0,0,0,.9), inset 0 0 3px rgba(120,180,255,.28);
  }
  .tv .screen::after{
    content:"";position:absolute;inset:0;pointer-events:none;border-radius:8px;
    background:linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 22%, transparent 40%);
  }
  .tv .panel{display:flex;flex-direction:row;align-items:center;gap:10px;margin-top:10px;height:36px}
  .tv .grille{
    flex:1;height:100%;border-radius:6px;
    background:repeating-linear-gradient(90deg,#0e0903 0 3px,#33231190 3px 7px);
    border:1px solid #0d0802;box-shadow:inset 0 2px 5px rgba(0,0,0,.7);
  }
  .tv .knob{
    width:34px;height:34px;border-radius:50%;cursor:pointer;border:2px solid #0d0802;
    background:radial-gradient(circle at 34% 30%, #6b5335, #2c1d0e 70%);
    box-shadow:0 3px 6px rgba(0,0,0,.55), inset 0 1px 2px rgba(255,214,150,.3);
    position:relative;transition:transform .35s cubic-bezier(.34,1.56,.64,1);padding:0;
  }
  .tv .knob::after{
    content:"";position:absolute;top:3px;left:50%;transform:translateX(-50%);
    width:3px;height:11px;border-radius:2px;background:#f4ead8;opacity:.85;
  }
  .tv.on .knob{transform:rotate(120deg)}
  .tv .knob:hover{filter:brightness(1.25)}
  .tv .screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .tv .off{
    position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
    background:
      repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
      radial-gradient(ellipse at 30% 20%, rgba(244,234,216,.06), transparent 55%),
      #050403;
    color:#4a3f31;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
    transition:opacity .3s;
  }
  .tv.on .off{opacity:0;pointer-events:none}
  .tv .bar{
    display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:0 2px;
  }
  .tv .pwr{
    display:flex;align-items:center;gap:.5rem;background:none;border:1px solid var(--line);
    color:var(--dim);font-family:'Rubik',sans-serif;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
    padding:.4rem .7rem;cursor:pointer;border-radius:3px;transition:all .2s;
  }
  .tv .pwr:hover{border-color:var(--fire);color:var(--ink)}
  .tv .led{width:7px;height:7px;border-radius:50%;background:#4a3f31;box-shadow:none;transition:all .2s}
  .tv.on .led{background:#ff3b30;box-shadow:0 0 8px #ff3b30}
  .tv .np{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#5e5342;text-decoration:none;transition:color .2s;text-align:right}
  .tv .np:hover{color:var(--fire)}
  .tv .np b{color:var(--dim);font-weight:500}
  @media(max-width:700px){
    .tv{width:60%;right:auto;left:50%;transform:translateX(-50%);top:2%}
    #stage{height:68vh;min-height:520px}
  }

  .stage-tools{max-width:1100px;margin:.7rem auto 0;display:flex;gap:.55rem;justify-content:space-between;flex-wrap:wrap;padding-bottom:1rem;align-items:center}
  .fx-group{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}
  .fx-label{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:#5e5342;margin-right:.2rem}
  .minibtn{
    background:transparent;border:1px solid var(--line);color:var(--dim);
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:.55rem 1rem;cursor:pointer;font-family:'Rubik',sans-serif;
    transition:all .2s;
  }
  .minibtn:hover{border-color:var(--fire);color:var(--ink)}
  .minibtn.fx-lbs:hover{border-color:#c22033;color:#ff8d97}
  .minibtn.fx-zzz:hover{border-color:#8a8a8a;color:#eee}
  .minibtn.fx-wav:hover{border-color:#f2c116;color:#ffe27a}
  .minibtn.fx-egg:hover{border-color:#f6f1e6;color:#fff}
  .minibtn.fx-lf:hover{border-color:#c96a1e;color:#ffb066}
  .minibtn:disabled{opacity:.4;cursor:default}
  #shakeBtn{display:none}
  .egg-p{position:absolute;z-index:6;pointer-events:none;background:radial-gradient(ellipse at 35% 30%, #fffdf6, #efe6cf 70%, #d9cdae);box-shadow:inset -2px -3px 6px rgba(0,0,0,.15), 0 6px 10px rgba(0,0,0,.4);border-radius:50% 50% 50% 50%/58% 58% 44% 44%}
  .leaf-p{position:absolute;z-index:6;pointer-events:none;border-radius:0 62% 0 62%;box-shadow:0 4px 8px rgba(0,0,0,.35)}
  .note-p{position:absolute;z-index:7;pointer-events:none;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.65);line-height:1}
  .car-p{position:absolute;z-index:6;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
  .car-p svg{overflow:visible}

  /* ---- FTC Radio: on a stand next to the TV ---- */
  .radio{position:absolute;bottom:4.5%;right:2.5%;width:168px;z-index:6;user-select:none}
  .radio .rbody{
    background:
      repeating-linear-gradient(92deg, rgba(0,0,0,.12) 0 2px, transparent 2px 8px),
      linear-gradient(160deg,#43301d,#241708 70%);
    border:1px solid #56412a;border-radius:10px;padding:9px 10px 8px;
    box-shadow:0 14px 30px rgba(0,0,0,.55), inset 0 2px 3px rgba(255,214,150,.15);
  }
  .radio .rtop{
    display:flex;justify-content:space-between;align-items:center;
    font-size:.5rem;letter-spacing:.18em;color:#c9b391;text-transform:uppercase;margin-bottom:6px;font-weight:700;
  }
  .radio .onair{color:#4a3f31;transition:color .2s,text-shadow .2s}
  .radio.playing .onair{color:#ff3b30;text-shadow:0 0 8px #ff3b30}
  .radio .dial{
    position:relative;height:26px;border-radius:5px;cursor:pointer;touch-action:none;
    background:linear-gradient(#f0e6cf,#dbcfae);
    border:2px solid #14100a;box-shadow:inset 0 2px 5px rgba(0,0,0,.35);
    overflow:hidden;
  }
  .radio .dialscale{
    position:absolute;inset:3px 4px;
    background:repeating-linear-gradient(90deg, rgba(20,16,10,.55) 0 1.5px, transparent 1.5px 12px);
    opacity:.7;
  }
  .radio .dialnums{
    position:absolute;left:6px;top:1px;font-size:7px;letter-spacing:1.4px;color:#5a4a2e;font-weight:700;
  }
  .radio .needle{
    position:absolute;top:0;bottom:0;left:8%;width:3px;background:#c22033;
    box-shadow:0 0 6px rgba(194,32,51,.8);transition:left .12s linear;
  }
  .radio .rrow{display:flex;align-items:center;gap:6px;margin-top:8px}
  .radio .rbtn{
    flex:1;height:26px;border-radius:4px;cursor:pointer;border:1px solid #0d0802;
    background:linear-gradient(#4a3722,#241708);color:#f4ead8;font-size:11px;line-height:1;
    box-shadow:0 2px 4px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,214,150,.25);
    transition:filter .15s, transform .05s;padding:0;
  }
  .radio .rbtn:hover{filter:brightness(1.3)}
  .radio .rbtn:active{transform:translateY(1px)}
  .radio .rknob{
    width:34px;height:34px;border-radius:50%;flex:none;cursor:ew-resize;touch-action:none;
    background:radial-gradient(circle at 34% 30%, #6b5335, #2c1d0e 72%);
    border:2px solid #0d0802;position:relative;
    box-shadow:0 3px 6px rgba(0,0,0,.55), inset 0 1px 2px rgba(255,214,150,.3);
  }
  .radio .rknob::after{
    content:"";position:absolute;top:3px;left:50%;transform:translateX(-50%);
    width:3px;height:10px;border-radius:2px;background:#ffb347;
  }
  .radio .rbot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:7px}
  .radio .rlabel{font-size:.52rem;letter-spacing:.2em;color:#a89a83;font-weight:700}
  .radio .eq{display:flex;gap:2.5px;align-items:flex-end;height:12px}
  .radio .eq i{width:3.5px;background:#ff7a1f;height:3px;border-radius:1px}
  .radio.playing .eq i{animation:eqB .5s ease-in-out infinite alternate}
  .radio.playing .eq i:nth-child(2){animation-duration:.36s;animation-delay:.1s}
  .radio.playing .eq i:nth-child(3){animation-duration:.44s;animation-delay:.05s}
  .radio.playing .eq i:nth-child(4){animation-duration:.3s;animation-delay:.15s}
  @keyframes eqB{from{height:3px}to{height:12px}}
  .radio .rstand{
    margin:0 14px;height:26px;position:relative;
    background:linear-gradient(#31220f,#1a1005);
    border:1px solid #4a3722;border-radius:0 0 4px 4px;
    box-shadow:0 8px 18px rgba(0,0,0,.5);
  }
  .radio .rstand::after{
    content:"";position:absolute;left:8px;bottom:-8px;width:9px;height:8px;background:#171006;
    box-shadow:112px 0 0 #171006;
  }
  /* below desktop: the radio leaves the room and becomes a slim sound-bar pinned to the bottom of the stage */
  @media(max-width:899px){
    .radio{left:8px;right:8px;bottom:8px;width:auto}
    .radio .rstand{display:none}
    .radio .rtop{display:none}
    .radio .rknob{display:none}
    .radio .rbody{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;background:rgba(36,23,8,.96)}
    .radio .rrow{margin:0;order:1;display:flex;gap:5px;flex:none}
    .radio .rbtn{width:36px;height:32px;flex:none}
    .radio .dial{order:2;flex:1;height:28px}
    .radio .rbot{order:3;margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
  }
  .ripple{
    position:absolute;pointer-events:none;z-index:4;border-radius:50%;
    border:3px solid rgba(242,193,22,.8);
    box-shadow:0 0 22px rgba(242,193,22,.35), inset 0 0 14px rgba(242,193,22,.18);
    transform:translate(-50%,-50%) scale(.06);opacity:.95;
    animation:rippleGo 1.5s cubic-bezier(.16,.84,.44,1) forwards;
  }
  @keyframes rippleGo{
    to{transform:translate(-50%,-50%) scale(1);opacity:0}
  }


  .pillow.imgp{background-size:cover;background-position:center;border:3px solid rgba(0,0,0,.45)}

  /* small screens: tighter controls, comfortable tap targets */
  @media(max-width:700px){
    .minibtn{font-size:.64rem;padding:.5rem .7rem;letter-spacing:.12em}
    .fx-label{width:100%;margin-bottom:.1rem}
    .stage-tools{justify-content:flex-start}
  }