/* MAZON.IS · MZN CRT-2600 ------------------------------------------------- */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  background:#050607;
  background-image:radial-gradient(70% 65% at 50% 42%, #16181d 0%, #0a0b0d 55%, #040405 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:'VT323',ui-monospace,Menlo,Consolas,monospace;
  color:#dfe6e2;
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- the room: wall / window / outside ---------- */
#scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#wall{
  position:absolute;inset:-3%;
  background:
    radial-gradient(120% 80% at 50% 108%, rgba(0,0,0,.55), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 2px, transparent 2px 58px),
    linear-gradient(180deg,#1a1b20 0%,#121317 55%,#0b0c0f 100%);
  will-change:transform;
}
#wall.has-img{
  background:linear-gradient(180deg, rgba(5,6,8,.55), rgba(5,6,8,.8)), var(--img) center/cover no-repeat;
}
#window{
  position:absolute;left:6%;top:9%;
  width:clamp(150px,17vw,300px);aspect-ratio:3/4.1;
}
#outside{position:absolute;inset:-9%;will-change:transform}
#outside svg{width:100%;height:100%;display:block}
#outside.has-img{background:var(--img) center/cover no-repeat}
#outside.has-img svg{visibility:hidden}
#frame{
  position:absolute;inset:0;
  border:clamp(8px,.9vw,14px) solid #221c15;
  border-bottom-width:clamp(14px,1.5vw,24px);
  box-shadow:
    inset 0 0 0 2px #3a3128,
    inset 0 0 34px rgba(150,175,230,.14),
    0 10px 40px rgba(0,0,0,.6),
    0 0 60px rgba(170,195,245,.05);
}
#frame::before{ /* vertical muntin */
  content:"";position:absolute;top:0;bottom:0;left:50%;width:clamp(6px,.6vw,10px);
  transform:translateX(-50%);background:#221c15;box-shadow:inset 0 0 0 1px #3a3128;
}
#frame::after{ /* horizontal muntin */
  content:"";position:absolute;left:0;right:0;top:46%;height:clamp(6px,.6vw,10px);
  background:#221c15;box-shadow:inset 0 0 0 1px #3a3128;
}
#beacon{animation:beacon 2.6s infinite}
@keyframes beacon{0%,64%{opacity:.95}78%,100%{opacity:.1}}

#room{
  position:fixed;inset:-12%;z-index:1;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 44%, var(--room-c, rgba(90,110,135,.5)) 0%, transparent 68%);
  opacity:.1;
  will-change:opacity,transform;
}

/* ---------- stage: shelf, plant, antenna, set ---------- */
#stage{position:relative;z-index:2}
#tv{position:relative;z-index:2;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

#antenna{
  position:absolute;bottom:calc(100% - 10px);left:50%;
  width:clamp(130px,20vw,240px);transform:translateX(-46%);
  z-index:0;opacity:.95;
}
#antenna svg{width:100%;display:block}

#shelf{
  position:absolute;top:calc(100% - 6px);left:50%;transform:translateX(-50%);
  width:min(128%,97vw);z-index:0;
}
#shelf-top{
  height:clamp(10px,1.6vh,16px);border-radius:3px 3px 0 0;
  background:
    radial-gradient(60% 140% at 50% 0%, rgba(0,0,0,.55), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 3px, transparent 3px 40px),
    linear-gradient(180deg,#584129 0%,#3e2d1c 100%);
}
#shelf-front{
  height:clamp(13px,2.2vh,22px);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 34px),
    linear-gradient(180deg,#2c2013 0%,#181008 100%);
  border-radius:0 0 3px 3px;
  box-shadow:0 22px 40px rgba(0,0,0,.75);
}
#shelf.has-img #shelf-top,#shelf.has-img #shelf-front{background:var(--img) center/cover}

#plant{
  position:absolute;bottom:-4px;right:calc(-1 * clamp(50px,7.5vw,120px));
  width:clamp(58px,7.5vw,110px);z-index:1;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.6));
  will-change:transform;
}
#plant svg{width:100%;display:block}
#plant.has-img{background:var(--img) bottom/contain no-repeat;aspect-ratio:11/15}
#plant.has-img svg{visibility:hidden}

#bezel{
  width:min(92vw, calc((92vh - 170px) * 4 / 3));
  padding:clamp(10px,1.8vw,22px);
  border-radius:26px;
  background:linear-gradient(172deg,#2b2d32 0%,#1a1c20 45%,#111216 100%);
  border:1px solid #3a3d44;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -6px 18px rgba(0,0,0,.6),
    0 30px 80px rgba(0,0,0,.75),
    0 0 130px 6px color-mix(in srgb, var(--glow,#233) 22%, transparent);
  transition:box-shadow .8s ease;
}

#screen{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border-radius:clamp(12px,2.2vw,26px);
  background:#020304;
  overflow:hidden;
  box-shadow:inset 0 0 60px rgba(0,0,0,.9), inset 0 0 8px #000;
  cursor:crosshair;
}

@media (orientation:portrait){
  #bezel{width:min(87vw, calc((92vh - 170px) * 3 / 4))}
  #screen{aspect-ratio:3/4}
  #window{left:auto;right:5%;top:2.5%;width:clamp(110px,32vw,200px)}
  #plant{right:calc(-1 * clamp(28px,9vw,60px));width:clamp(52px,15vw,84px)}
  #shelf{width:min(120%,98vw)}
}

/* ---------- layers ---------- */
#glass{position:absolute;inset:0;transform-origin:50% 50%}
#glass.crt-on{animation:crt-on .55s cubic-bezier(.2,.8,.3,1) both}
#glass.crt-off{animation:crt-off .4s cubic-bezier(.7,0,.9,.4) both}
@keyframes crt-on{
  0%{transform:scale(0,.004);filter:brightness(6)}
  35%{transform:scale(1,.004);filter:brightness(8)}
  70%{transform:scale(1,1);filter:brightness(2.4)}
  100%{transform:scale(1,1);filter:brightness(1)}
}
#glass.degauss{animation:degauss .75s ease-out}
@keyframes degauss{
  0%{transform:scale(1)}
  12%{transform:scale(1.025,.975) skewX(1.4deg);filter:hue-rotate(20deg) saturate(1.7)}
  28%{transform:scale(.982,1.018) skewX(-1.1deg);filter:hue-rotate(-15deg) saturate(1.3)}
  46%{transform:scale(1.012,.99) skewX(.6deg);filter:hue-rotate(8deg)}
  70%{transform:scale(.996,1.004);filter:hue-rotate(-3deg)}
  100%{transform:none;filter:none}
}
@keyframes crt-off{
  0%{transform:scale(1,1);filter:brightness(1);opacity:1}
  30%{transform:scale(1.04,.6);filter:brightness(1.6);opacity:1}
  55%{transform:scale(1.06,.006);filter:brightness(10);opacity:1}
  80%{transform:scale(.08,.004);filter:brightness(14);opacity:1}
  100%{transform:scale(0,.002);filter:brightness(16);opacity:0}
}

/* phosphor dot that lingers after switch-off */
#dot{
  position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;z-index:9;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0%,#cfeaff 35%,rgba(140,190,255,.5) 60%,transparent 75%);
  filter:blur(.4px);
}
#dot.zap{animation:dot-fade 1.7s ease-out forwards}
@keyframes dot-fade{
  0%{opacity:1;transform:scale(1.9);filter:blur(.4px) brightness(2)}
  18%{opacity:1;transform:scale(1)}
  60%{opacity:.5;transform:scale(.55)}
  100%{opacity:0;transform:scale(.15)}
}

#static{
  position:absolute;inset:0;width:100%;height:100%;
  image-rendering:pixelated;
  opacity:0;
  z-index:3;
  pointer-events:none;
  transition:opacity .18s linear;
}

#scanlines{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 3px),
    repeating-linear-gradient(90deg, rgba(255,60,60,.035) 0 1px, rgba(60,255,120,.03) 1px 2px, rgba(80,120,255,.035) 2px 3px);
  mix-blend-mode:multiply;
  opacity:.85;
}
#rollband{
  position:absolute;left:0;right:0;height:14%;z-index:5;pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.045), transparent);
  animation:roll 8s linear infinite;
}
@keyframes roll{from{top:-16%}to{top:112%}}
#vignette{
  position:absolute;inset:0;z-index:7;pointer-events:none;
  background:radial-gradient(ellipse 108% 104% at 50% 48%, transparent 58%, rgba(0,0,0,.42) 88%, rgba(0,0,0,.85) 100%);
  border-radius:inherit;
}
body.standby #scanlines, body.standby #rollband{opacity:0}

/* ---------- splash / test card ---------- */
#splash{
  position:absolute;inset:0;z-index:4;cursor:pointer;outline:none;
  transition:opacity .45s ease;
}
#splash svg{width:100%;height:100%;display:block}
#splash:focus-visible svg{filter:brightness(1.15)}
#splash.gone{opacity:0;pointer-events:none}
#tc-blink{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- channels ---------- */
.channel{
  position:absolute;inset:0;z-index:2;
  display:none;
  flex-direction:column;justify-content:flex-start;align-items:flex-start;
  gap:clamp(.6rem,2vh,1.2rem);
  padding:clamp(1.2rem,6%,3.4rem);
  padding-top:clamp(2.9rem,9.5%,3.8rem); /* keep clear of the OSD clock line */
  text-shadow:0 0 8px color-mix(in srgb, var(--accent) 35%, transparent);
  will-change:transform;
}
.channel.active{display:flex;animation:tune-in .25s ease-out}
/* safe vertical centering: respects padding when content overflows */
.channel > :first-child{margin-top:auto}
.channel > :last-child{margin-bottom:auto}
@keyframes tune-in{
  0%{transform:translateY(6px) skewX(3deg);filter:brightness(2) saturate(0)}
  100%{transform:none;filter:none}
}

/* optional AI-art backdrop — drop images/ch1.jpg etc. and JS wires it up */
.channel::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--bg) center/cover no-repeat;
  opacity:0;filter:saturate(1.3) contrast(1.15) brightness(.7);
}
.channel.has-bg::before{opacity:.55}
.channel.has-bg{background:linear-gradient(100deg, rgba(2,3,4,.72) 30%, rgba(2,3,4,.25) 75%)}

.ch-head{
  display:flex;gap:1.2em;flex-wrap:wrap;
  font-size:clamp(1rem,2.6vmin,1.4rem);letter-spacing:.22em;
  color:#9fb0a8;
}
.ch-head span:first-child{color:var(--accent)}
.ch-title{
  font-weight:400;
  font-size:clamp(2.6rem,11vmin,6.5rem);
  line-height:.88;
  letter-spacing:.02em;
  color:var(--accent);
  text-shadow:
    -2px 0 rgba(255,0,60,.45),
    2px 0 rgba(0,220,255,.45),
    0 0 22px color-mix(in srgb, var(--accent) 60%, transparent);
}
.ch-desc{
  max-width:36ch;
  font-size:clamp(1.15rem,3.4vmin,1.7rem);
  line-height:1.25;
  color:#cfd6d3;
}
.tune{
  margin-top:.4em;
  display:inline-block;
  font-size:clamp(1.3rem,4vmin,2rem);
  letter-spacing:.18em;
  color:var(--accent);
  text-decoration:none;
  border:2px solid var(--accent);
  padding:.35em 1.1em .3em;
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow:0 0 18px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 0 14px color-mix(in srgb, var(--accent) 12%, transparent);
  transition:background .15s, transform .1s;
}
.tune b{animation:blink 1.1s steps(1) infinite;font-weight:400}
.tune:hover,.tune:focus-visible{background:color-mix(in srgb, var(--accent) 22%, transparent);outline:none}
.tune:active{transform:scale(.97)}
.ch-foot{
  font-size:clamp(.9rem,2.4vmin,1.2rem);letter-spacing:.2em;color:#7d8a84;
}

/* ---------- CH 04 · programme guide ---------- */
.guide .ch-title{font-size:clamp(1.8rem,7vmin,3.4rem)}
.guide-rows{display:flex;flex-direction:column;gap:clamp(.35rem,1.2vh,.6rem);width:100%;max-width:580px}
.guide-row{
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num name" "num now";
  column-gap:1.1ch;align-items:center;text-align:left;
  font-family:inherit;font-size:clamp(1.05rem,3vmin,1.55rem);letter-spacing:.08em;
  background:color-mix(in srgb, var(--accent) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color:#cfd6d3;padding:.45em .8em;cursor:pointer;
}
.guide-row:hover,.guide-row:focus-visible{
  background:color-mix(in srgb, var(--accent) 20%, transparent);outline:none;color:#fff;
}
.guide-row:active{transform:scale(.99)}
.g-num{grid-area:num;color:var(--accent);font-size:1.5em;line-height:1}
.g-name{grid-area:name;color:#eef3f0}
.g-now{grid-area:now;font-size:.68em;color:#7d8a84;letter-spacing:.22em}

/* ---------- OSD ---------- */
#osd{position:absolute;inset:0;z-index:8;pointer-events:none;
  font-size:clamp(1.1rem,3vmin,1.7rem);
  color:#7dff9e;
  text-shadow:0 0 6px rgba(60,255,130,.7), 1px 0 rgba(255,0,60,.35), -1px 0 rgba(0,200,255,.35);
  letter-spacing:.12em;
}
#osd-clock{position:absolute;top:4.5%;left:5.5%}
#osd-ch{position:absolute;top:4.5%;right:5.5%;text-align:right;transition:opacity .6s}
#osd-ch.dim{opacity:0}
#osd-msg{
  position:absolute;bottom:5.5%;left:0;right:0;text-align:center;
  font-size:clamp(.95rem,2.4vmin,1.3rem);
  opacity:0;transition:opacity .5s;
}
#osd-msg.show{opacity:1}
body.presplash #osd, body.standby #osd{visibility:hidden}

/* ---------- control strip ---------- */
#controls{
  display:flex;align-items:center;gap:1rem;
  padding:clamp(.6rem,1.6vw,1.1rem) clamp(.2rem,1vw,.8rem) 0;
}
.brand{font-size:clamp(1.1rem,2.4vw,1.5rem);letter-spacing:.3em;color:#b9bec7}
.brand span{color:#5c626c;letter-spacing:.12em;font-size:.72em}
.btns{display:flex;gap:clamp(.5rem,1.6vw,1rem);margin-left:auto}
.knob{
  width:clamp(44px,7vw,56px);height:clamp(44px,7vw,56px);
  border-radius:50%;
  border:1px solid #43464e;
  background:radial-gradient(circle at 34% 30%, #34373d, #1b1d21 70%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.09), inset 0 -3px 6px rgba(0,0,0,.6), 0 3px 6px rgba(0,0,0,.5);
  color:#c6ccd4;font-family:inherit;font-size:clamp(.85rem,1.8vw,1.05rem);
  letter-spacing:.05em;cursor:pointer;
}
.knob:hover{color:#fff}
.knob:active{transform:translateY(1px);box-shadow:inset 0 2px 8px rgba(0,0,0,.7)}
.knob:focus-visible{outline:2px solid #7dff9e;outline-offset:2px}
.knob.power{color:#e8b34b;font-size:clamp(1.1rem,2.2vw,1.4rem)}
.knob[aria-pressed="true"]{color:#5c626c;text-decoration:line-through}
#led{
  width:10px;height:10px;border-radius:50%;
  background:#ff4433;box-shadow:0 0 8px #ff4433;
  transition:background .3s, box-shadow .3s;
}
body.on #led{background:#59ff8a;box-shadow:0 0 10px #59ff8a}

/* ---------- misc ---------- */
@media (prefers-reduced-motion:reduce){
  #rollband{animation:none;opacity:0}
  #tc-blink,.tune b{animation:none}
  #glass.crt-on,#glass.crt-off{animation-duration:.01s}
  #glass.degauss{animation:none}
  #dot.zap{animation-duration:.4s}
  #beacon{animation:none}
  .channel.active{animation:none}
}