:root{--bg:#14100c;--ink:#efe4cc;--dim:#a8977a;--gold:#c9a24a;--maroon:#8c2323;
  --ur:'Gulzar',serif;--serif:'Fraunces',Georgia,serif;--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--serif)}
body{min-height:100vh;background:radial-gradient(ellipse at 50% 30%,#2a1f16 0%,var(--bg) 65%)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ur{font-family:var(--ur);direction:rtl;unicode-bidi:isolate}
.mono{font-family:var(--mono)}

header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px}
.brand{font-size:15px;letter-spacing:.1em;display:flex;align-items:baseline;gap:6px}
.brand .ur{font-size:26px;line-height:1.4;letter-spacing:0}
.clocks{font-size:11.5px;color:var(--dim);letter-spacing:.06em}
.prayer{display:flex;align-items:center;gap:10px;padding:6px 14px;border-radius:999px;border:1px solid rgba(239,228,204,.18);font-family:var(--mono);font-size:12px}
.prayer .ur{font-size:18px;line-height:1.3}
.prayer b{font-weight:500;color:var(--gold)}
.prayer.soon{border-color:var(--gold)}

main{display:flex;justify-content:center;align-items:flex-start;gap:28px;padding:4px 16px 40px}
.stage{display:flex;flex-direction:column;align-items:center;gap:14px;transition:all .5s}

/* the TV: frame around the player, never on top of it */
.stage{--w:min(86vw,960px,calc((100vh - 270px)*1.333 + 60px))}
.tv{width:var(--w);transition:width .5s}
.bezel{padding:22px 24px 18px;border-radius:26px 26px 10px 10px;background:linear-gradient(160deg,#3b3632,#1c1a18 55%,#121110);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 30px 60px rgba(0,0,0,.55)}
.screen{position:relative;aspect-ratio:4/3;background:#050505;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 2px #000,0 0 0 3px #4a4541}
.screen #player,.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.screen.bw iframe{filter:grayscale(1) contrast(1.12) brightness(1.03)}
.screen.tuning iframe{visibility:hidden}
#static{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;display:none}
.screen.tuning #static{display:block}
.card{position:absolute;inset:0;display:none;place-items:center;text-align:center;background:#111;color:#eee}
.card.on{display:grid}
.card .ur{display:block;font-size:clamp(48px,9vw,110px);line-height:1.6}
.card small{font-family:var(--mono);font-size:13px;letter-spacing:.2em;opacity:.8}
.screen.tuning .card.ident{display:grid;background:transparent;text-shadow:0 0 18px #000,0 0 4px #000}
.power{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;background:radial-gradient(ellipse,#1d1d1d,#050505)}
.power .ur{font-size:44px;line-height:1.6}
.power button{padding:12px 26px;border-radius:999px;background:var(--ink);color:#1a120c;font-size:17px}
.power small{font-size:11px;color:var(--dim)}
.power.off{display:none}
.cabinet{display:flex;align-items:center;justify-content:space-between;padding:10px 26px;margin:0 6px;border-radius:0 0 14px 14px;
  background:linear-gradient(#2b2724,#191715);box-shadow:0 18px 30px rgba(0,0,0,.4)}
.badge{display:flex;align-items:center;gap:12px;color:#9fe3a7;font-family:var(--mono);font-size:12px;letter-spacing:.08em;white-space:nowrap;overflow:hidden}
.badge .ur{font-size:22px;line-height:1.3;color:#c6f5cb}
.badge .n{font-size:20px;color:#c6f5cb}
.badge .dot{width:8px;height:8px;border-radius:50%;background:#e33;box-shadow:0 0 6px #f44;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.knobs{display:flex;gap:10px}
.knobs span{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d7d0c3,#6f675c 60%,#2f2b27)}

.now{width:var(--w);display:grid;grid-template-columns:1fr auto;gap:4px 18px;align-items:baseline;padding:0 6px}
.now .t{font-size:21px;line-height:1.25}
.now .m{font-family:var(--mono);font-size:11.5px;color:var(--dim);text-align:right;white-space:nowrap}
.now .nx{font-size:14px;color:var(--dim)}
.now .bar{grid-column:1/-1;height:3px;background:rgba(239,228,204,.12);border-radius:2px;overflow:hidden}
.now .bar i{display:block;height:100%;background:var(--gold)}
.from{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;padding:1px 6px;border-radius:4px;border:1px solid rgba(239,228,204,.2);color:var(--dim);margin-left:8px;vertical-align:middle}

.remote{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;padding:8px 10px;border-radius:18px;background:linear-gradient(#2a2725,#161413);
  box-shadow:0 10px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);font-size:12px}
.remote button{min-width:36px;height:32px;padding:0 11px;border-radius:9px;background:linear-gradient(#4a4642,#2e2b28);box-shadow:0 3px 0 #0c0b0a}
.remote button:active{transform:translateY(2px);box-shadow:0 1px 0 #0c0b0a}
.remote button.on{background:linear-gradient(#f4d27a,#c9a24a);color:#1a120c}
.remote #nums button{font-family:var(--ur);font-size:17px;line-height:1}
.remote .sep{width:1px;height:22px;background:#3e3a36;margin:0 3px}

@media (max-width:640px){.clocks{display:none}}
.now .soon{font-family:var(--mono);font-size:12px;color:var(--gold);margin-top:4px}
.now .soon b{font-family:var(--serif);font-size:14px;font-weight:600;color:var(--ink)}

/* ---- the TV guide: a printed brochure. Folded, it floats beside the TV; open, it sits next to the TV (never over the player) ---- */
.paper{background:#efe6cf;color:#2a1f17;background-image:repeating-linear-gradient(0deg,rgba(120,90,50,.035) 0 1px,transparent 1px 4px),radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.5),transparent 60%)}
.brochure{position:fixed;left:max(18px,calc(50vw - var(--half,480px) - 230px));top:calc(50vh - 150px);width:178px;height:248px;padding:0;z-index:4;cursor:pointer;
  transform:rotate(-7deg);animation:drift 6s ease-in-out infinite;transition:transform .3s,opacity .4s,filter .3s;filter:drop-shadow(0 18px 22px rgba(0,0,0,.55))}
.brochure:hover{animation-play-state:paused;transform:rotate(-3deg) translateY(-8px) scale(1.04)}
@keyframes drift{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-10px)}}
body.guide-open .brochure{opacity:0;pointer-events:none;transform:rotate(0) scale(.6) translateX(40vw)}
.cv{position:relative;width:100%;height:100%;border-radius:2px;overflow:hidden;text-align:center;display:flex;flex-direction:column}
.cv:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 6%,transparent 94%,rgba(0,0,0,.12));pointer-events:none}
.cv .band{background:#8c2323;color:#efe6cf;font-family:var(--mono);font-size:9px;letter-spacing:.24em;padding:5px 0}
.cv .ur{font-size:40px;line-height:1.55;margin-top:8px}
.cv .t{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:.14em;margin-top:-6px}
.cv .wk{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:#6c5a45;margin-top:4px}
.cv .nums{font-family:var(--ur);font-size:19px;letter-spacing:6px;margin:10px 0 6px;color:#8c2323}
.cv .hl{margin:auto 12px 10px;padding:7px 8px;border:1.5px solid #2a1f17;font-size:12.5px;line-height:1.3}
.cv .hl small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:#8c2323;margin-bottom:2px}
.cv .price{position:absolute;right:8px;bottom:6px;font-family:var(--mono);font-size:9px;color:#7a6a55}

.guide{position:relative;width:0;opacity:0;overflow:hidden;transition:width .55s cubic-bezier(.2,.7,.2,1),opacity .4s;perspective:1600px;align-self:center}
body.guide-open .guide{width:min(580px,40vw);opacity:1;overflow:visible}
body.guide-open .stage{--w:min(calc(96vw - min(580px,40vw) - 60px),860px,calc((100vh - 270px)*1.333 + 60px))}
.spread{display:grid;grid-template-columns:1fr 1fr;width:min(580px,40vw);min-width:520px;box-shadow:0 24px 50px rgba(0,0,0,.5);transform:rotate(1deg)}
.page{padding:18px 18px 14px;min-height:520px;position:relative}
.page:first-child{box-shadow:inset -14px 0 18px -14px rgba(0,0,0,.35)}
.page:last-child{box-shadow:inset 14px 0 18px -14px rgba(0,0,0,.3)}
.page h3{font-weight:400;display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px double #2a1f17;padding-bottom:4px;margin-bottom:8px}
.page h3 .ur{font-size:26px;line-height:1.5}
.page h3 small{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em}
.page .row{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:7px 2px;border-bottom:1px dotted #b9a982;cursor:pointer;align-items:start}
.page .row:hover{background:rgba(201,162,74,.22)}
.page .row.cur{background:rgba(140,35,35,.1)}
.page .num{font-family:var(--ur);font-size:20px;line-height:1.3;color:#8c2323}
.page .chn{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:#6c5a45}
.page .chn .ur{font-size:17px;letter-spacing:0;color:#2a1f17;margin-right:4px}
.page b{display:block;font-weight:600;font-size:13.5px;line-height:1.25;margin-top:1px}
.page .sub{display:block;font-family:var(--mono);font-size:9.5px;color:#7a6a55;margin-top:2px}
.page .appt{border:1.5px solid #2a1f17;padding:8px 10px;margin-bottom:10px;cursor:pointer}
.page .appt:hover{background:rgba(201,162,74,.22)}
.page .appt .when{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#8c2323}
.page .appt .ur{float:right;font-size:18px;line-height:1.3}
.page .appt.live{background:#2a1f17;color:#efe6cf}.page .appt.live .when{color:#f4d27a}.page .appt.live .sub{color:#cdbf9d}
.page .key{position:absolute;left:18px;right:18px;bottom:12px;font-family:var(--mono);font-size:9px;line-height:1.5;color:#7a6a55}
.cover{position:absolute;left:0;top:0;width:50%;height:100%;min-height:520px;transform-origin:right center;transform:rotate(1deg) rotateY(0);backface-visibility:hidden;z-index:2;pointer-events:none;display:none}
.guide.opening .cover{display:block;animation:flip .9s cubic-bezier(.4,0,.2,1) forwards}
@keyframes flip{to{transform:rotate(1deg) rotateY(-178deg)}}
.cover .cv .ur{font-size:64px;margin-top:40px}.cover .cv .t{font-size:26px}.cover .cv .nums{font-size:28px}
.fold{position:absolute;right:4px;bottom:-42px;font-size:11px;padding:5px 12px;border-radius:999px;border:1px solid rgba(239,228,204,.25);color:var(--ink)}
@media (max-width:900px){main{flex-direction:column;align-items:center}body.guide-open .guide{width:min(96vw,620px)}body.guide-open .stage{--w:min(86vw,960px)}
  .spread{min-width:0;width:100%;grid-template-columns:1fr}.page{min-height:0}.page .key{position:static;margin-top:10px}.brochure{top:auto;bottom:20px;left:14px;width:120px;height:168px}.cv .ur{font-size:28px}.cv .hl{display:none}}
.card .about{max-width:62%;margin:14px auto 0;font-family:var(--serif);font-style:italic;font-size:clamp(13px,1.6vw,18px);line-height:1.5;opacity:.92}
.chabout{width:var(--w);font-size:13.5px;line-height:1.5;color:var(--dim);font-style:italic;padding:0 6px;margin-top:-4px}
.chabout .ur{font-style:normal;font-size:17px;color:var(--ink)}
.page .about{display:block;font-family:var(--serif);font-style:italic;font-size:11.5px;line-height:1.4;color:#5a4a3a;margin-top:4px}
.screen.tuning .card.ident .about{background:rgba(0,0,0,.72);padding:10px 16px;border-radius:4px;text-shadow:none}

/* ---- farmaish: a postcard floats on the right; open, the letter sits beside the TV like the guide ---- */
.postcard{position:fixed;right:max(18px,calc(50vw - 480px - 240px));top:calc(50vh - 40px);width:200px;padding:14px 14px 12px;z-index:4;text-align:left;cursor:pointer;
  background:#f3ead4;color:#2a1f17;border-radius:3px;transform:rotate(5deg);animation:drift2 7s ease-in-out infinite;filter:drop-shadow(0 16px 20px rgba(0,0,0,.5));transition:transform .3s,opacity .4s;
  background-image:repeating-linear-gradient(0deg,rgba(120,90,50,.035) 0 1px,transparent 1px 4px),linear-gradient(90deg,transparent 58%,rgba(140,35,35,.25) 58%,rgba(140,35,35,.25) 59%,transparent 59%)}
.postcard:hover{animation-play-state:paused;transform:rotate(2deg) translateY(-8px) scale(1.04)}
@keyframes drift2{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(3deg) translateY(-9px)}}
.postcard .stamp{position:absolute;right:10px;top:10px;font-family:var(--ur);font-size:13px;line-height:1.4;padding:4px 6px;border:2px dashed #8c2323;color:#8c2323}
.postcard .ur{display:block;font-size:34px;line-height:1.6;color:#8c2323}
.postcard b{display:block;font-size:15px;margin-top:-4px}
.postcard small{font-family:var(--mono);font-size:9.5px;color:#7a6a55}
/* the letter: one box to write in, the rest folded under "Add details", and this device's letters underneath */
#fform,.thanks{display:flex;flex-direction:column;gap:10px}
#fform[hidden],.thanks[hidden],.mine[hidden]{display:none}
#fsheet .thanks .ur{font-size:30px;line-height:1.4}
.sheet textarea.what{min-height:92px;line-height:1.45}
.sheet .hint{font-size:12.5px;line-height:1.4;color:#7a6a55;font-style:italic;margin-top:-4px}
.more>label,.more>.two{margin-top:10px}.more>.hint{margin-top:4px}
.more summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:#8c2323;padding:2px 0}
.more summary::-webkit-details-marker{display:none}.more summary::before{content:"+ "}.more[open] summary::before{content:"− "}
.sheet label.check{flex-direction:row;align-items:center;gap:8px;font-family:var(--serif);font-size:14px;letter-spacing:0;color:#2a1f17}
.sheet label.check input[type=checkbox]{flex:none;width:17px;height:17px;padding:0;margin:0;accent-color:#8c2323}
.mine{border-top:1px dashed #b9a882;padding-top:10px}
.mine h4{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.18em;color:#5a4a3a;margin:0 0 6px}
.mine ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.mine li{font-size:14px;line-height:1.35}.mine li i{color:#8c2323}.mine li i.skipped{color:#7a6a55}.mine .more-n{font-size:12px;color:#7a6a55}
body.letter-open .postcard,body.letter-open .brochure,body.guide-open .postcard{opacity:0;pointer-events:none}
.letter{position:relative;width:0;opacity:0;overflow:hidden;transition:width .55s cubic-bezier(.2,.7,.2,1),opacity .4s;align-self:center}
body.letter-open .letter{width:min(440px,36vw);opacity:1;overflow:visible}
.sheet{width:min(440px,36vw);min-width:340px;padding:22px 24px;transform:rotate(-1deg);box-shadow:0 24px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:10px}
.lhead{display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px double #2a1f17;padding-bottom:4px}
.lhead .ur{font-size:34px;line-height:1.5;color:#8c2323}.lhead small{font-family:var(--mono);font-size:10px;letter-spacing:.18em}
.sheet .intro{font-size:13.5px;line-height:1.5;color:#5a4a3a}
.sheet label{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#5a4a3a}
.sheet input,.sheet select,.sheet textarea{font-family:var(--serif);font-size:15px;color:#2a1f17;background:#fbf6ea;border:1px solid #cdbf9d;border-radius:4px;padding:7px 9px;letter-spacing:0}
.sheet textarea{min-height:64px;resize:vertical}
.sheet .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sheet .send{margin-top:4px;padding:10px 16px;border-radius:999px;background:#8c2323;color:#f3ead4;font-family:var(--mono);font-size:12px;letter-spacing:.08em;align-self:flex-start}
.sheet .err{color:#8c2323;font-size:13px;min-height:1em}
.thanks{align-items:flex-start}.thanks .ur{font-size:44px;line-height:1.5;color:#8c2323}.thanks b{font-size:19px}.thanks p{font-size:14px;line-height:1.5;color:#5a4a3a}
.now .credit{grid-column:1/-1;font-family:var(--mono);font-size:11.5px;color:#e9b8a8;margin-top:2px}.now .credit .ur{font-size:15px;color:#f3c9b8}
@media (max-width:900px){body.letter-open .letter{width:min(96vw,440px)}.sheet{width:100%;min-width:0}.postcard{top:auto;bottom:20px;right:14px;width:150px}.postcard .ur{font-size:24px}}
.sheet[hidden]{display:none}

/* ---- the living room (from the 2007 photo): a 1600x1000 scene the TV sits in. The camera starts wide, then moves in to the TV ---- */
.room{display:none}
body.roomphoto .room{display:block;position:fixed;inset:0;overflow:hidden;background:#1b1712;z-index:0}
.scene{position:absolute;left:0;top:0;width:1600px;height:1000px;transform-origin:0 0;transition:transform 1.8s cubic-bezier(.6,.05,.25,1)}
.r-photo{position:absolute;inset:0;filter:saturate(1.08) contrast(1.03) sepia(.06)}
.r-photo.r-front{pointer-events:none;filter:saturate(1.08) contrast(1.03) sepia(.06) blur(1.2px) brightness(.92)}
.r-wall{position:absolute;left:0;top:0;width:1600px;height:720px;background:url(room/wall.jpg) center/cover}
.r-floor{position:absolute;left:0;top:700px;width:1600px;height:300px;background:url(room/floorgreen.jpg) center/100% 100%;box-shadow:inset 0 14px 18px -10px rgba(0,0,0,.35)}
.r-painting{position:absolute;left:40px;top:0;width:390px}
.r-frames{position:absolute;left:1120px;top:10px;width:250px}
/* the niche on the right wall: the family's things from the 2005 photo of it (a plate, a cup, a vase, a plaque, the table tennis bat) */
.r-niche{position:absolute;left:1112px;top:292px;width:150px}
.r-chair{position:absolute;left:1365px;top:395px;width:240px;filter:drop-shadow(6px 10px 10px rgba(0,0,0,.25))}
.r-table{position:absolute;left:338px;top:548px;width:268px;height:160px}
.r-table .r-doily{position:absolute;left:-6px;top:0;width:280px;height:14px;border-radius:3px;background:radial-gradient(circle,#fbf8f0 0 2px,transparent 2.6px) 0 0/7px 7px,#ece6d8;box-shadow:0 3px 5px rgba(0,0,0,.25)}
.r-bottles{position:absolute;left:14px;bottom:150px;width:150px;filter:drop-shadow(3px 6px 4px rgba(0,0,0,.25))}
.r-tvtable{position:absolute;left:575px;top:var(--tvbottom,640px);width:560px;height:46px;background:linear-gradient(#4a3424,#2a1b11 30%,#21150d);border-radius:3px;box-shadow:0 18px 22px rgba(0,0,0,.35)}
.r-tvtable .leg{position:absolute;top:44px;width:16px;height:calc(720px - var(--tvbottom,640px) - 44px);background:#21150d}
.r-tvtable:before{content:"";position:absolute;left:40px;right:40px;top:-4px;height:10px;border-radius:3px;background:radial-gradient(circle,#fbf8f0 0 2px,transparent 2.6px) 0 0/7px 7px,#ece6d8}.r-tvtable .leg.l{left:20px}.r-tvtable .leg.r{right:20px}
.r-slot{position:absolute}
#tvslot{left:600px;top:226px;width:480px}
.r-bslot{left:512px;top:440px;transform:rotate(9deg) scale(.42);transform-origin:0 0}
.r-pslot{left:1100px;top:calc(var(--tvbottom,640px) - 118px);transform:rotate(-5deg) scale(.55);transform-origin:0 0}
.r-rug{position:absolute;left:150px;top:752px;width:1300px;height:260px;background:url(room/rug.jpg) center/100% 100%;filter:drop-shadow(0 -4px 8px rgba(0,0,0,.25))}
.r-gadda{position:absolute;left:-80px;top:868px;width:640px;height:180px;border-radius:26px;background:url(room/gadda.jpg) center/100% 100%;box-shadow:0 -10px 24px rgba(0,0,0,.35)}
.r-bolster{position:absolute;left:300px;top:842px;width:230px;height:118px;border-radius:59px;background:url(room/bolster.jpg) center/cover;box-shadow:inset -18px -14px 24px rgba(0,0,0,.35),0 10px 18px rgba(0,0,0,.35)}
.r-cushion{position:absolute;left:1020px;top:888px;width:380px;height:118px;border-radius:14px;background:url(room/cushion.jpg) center/cover;transform:perspective(500px) rotateX(38deg);box-shadow:0 -6px 18px rgba(0,0,0,.3)}
.r-grain{position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .4  0 0 0 .9 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),
  radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(30,20,10,.55))}
/* in the room the TV is an object in the scene; the info and remote sit at the bottom of the screen */
body.roommode .tv{width:480px;--w:480px}
body.roommode header{position:fixed;left:0;right:0;top:0;z-index:4;background:linear-gradient(rgba(16,12,9,.82),transparent)}
body.roommode main{display:block}
body.roommode .stage{position:fixed;left:0;right:0;bottom:0;z-index:4;padding:26px 20px 16px;align-items:center;gap:8px;background:linear-gradient(transparent,rgba(14,10,8,.88) 32%)}
body.roommode .stage .now,body.roommode .stage .chabout{width:min(900px,92vw)}
body.roommode .stage .chabout{display:none}
body.roommode .guide,body.roommode .letter{position:fixed;right:28px;top:76px;z-index:5;max-height:calc(100vh - 220px);overflow:auto}
body.roommode .guide{width:auto}body.roommode .spread{width:min(580px,44vw)}
body.roommode.room-wide .stage,body.roommode.room-wide .r-bslot,body.roommode.room-wide .r-pslot{opacity:0;pointer-events:none}
body.roommode .stage,body.roommode .r-bslot,body.roommode .r-pslot{transition:opacity .8s}
body.roommode .brochure,body.roommode .postcard{position:static;animation:none;transform:none}
body.roommode .brochure:hover,body.roommode .postcard:hover{transform:translateY(-10px)}
body.roommode #roomBtn{background:linear-gradient(#f4d27a,#c9a24a);color:#1a120c}

/* ---- the 3D room ---- */
#room3d{position:fixed;inset:0;z-index:0;background:#d9d4c8}
#room3d canvas{position:absolute;inset:0}
#room3d .css3d{position:absolute;inset:0;pointer-events:none}
body.room3d .tv{width:480px;--w:480px}
body.room3d .brochure,body.room3d .postcard{animation:none}
body.room3d .brochure:hover,body.room3d .postcard:hover{filter:drop-shadow(0 0 14px rgba(255,236,170,.9))}
body.room3d .brochure,body.room3d .postcard{left:0;top:0;right:auto;bottom:auto}

/* ---- the Panasonic: a mid-90s 17" CRT. Boxy charcoal plastic, a deep grey surround around a
   slightly rounded tube, the wordmark under the picture, a control strip with small buttons ---- */
.tv .bezel{padding:34px 30px 10px;border-radius:14px 14px 4px 4px;
  background:linear-gradient(175deg,#4a4b4d 0%,#3a3b3d 40%,#2e2f31 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.4),inset 3px 0 0 rgba(255,255,255,.04),0 30px 60px rgba(0,0,0,.5)}
.tv .screen{border-radius:18px/22px;box-shadow:inset 0 0 0 3px #111,inset 0 0 26px rgba(0,0,0,.9),0 0 0 7px #2a2b2d,0 0 0 9px #1b1c1d,0 2px 0 9px rgba(255,255,255,.06)}
.tv .screen:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 40px rgba(0,0,0,.55)}
.tv-top{position:absolute;left:34px;top:9px;display:flex;align-items:center;gap:7px;color:#cfd0d2;font-family:Arial,Helvetica,sans-serif}
.tv-top b{font-style:italic;font-weight:700;font-size:17px;letter-spacing:-.02em}
.tv-top small{font-size:6.5px;line-height:1.15;letter-spacing:.08em;color:#a9aaad}
.bezel{position:relative}
.pana{text-align:center;margin-top:14px;font-family:'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:17px;letter-spacing:.01em;color:#e6e6e8;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.tv .cabinet{margin:0;border-radius:0 0 10px 10px;padding:8px 22px 10px;gap:16px;
  background:linear-gradient(#2c2d2f,#232426);border-top:1px solid #1a1b1c;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 30px rgba(0,0,0,.45)}
.ctrls{display:flex;align-items:center;gap:7px}
.ctrls i{width:13px;height:7px;border-radius:2px;background:linear-gradient(#5a5b5e,#3a3b3d);box-shadow:0 1px 0 #111}
.ctrls i.pwr{width:15px;height:15px;border-radius:50%;margin-right:6px;background:radial-gradient(circle at 40% 35%,#6a6b6e,#2e2f31)}
.tv .badge{flex:1;justify-content:center;background:#0d140f;border-radius:3px;padding:3px 10px;box-shadow:inset 0 0 0 1px #000;font-size:11px}
.tv .badge .ur{font-size:17px}.tv .badge .n{font-size:15px}
.tv .knobs{align-items:center;gap:12px}
.tv .knobs .led{width:6px;height:6px;border-radius:50%;background:#e8352b;box-shadow:0 0 5px #ff4a3a}
.tv .knobs .grille{width:58px;height:18px;border-radius:2px;background:repeating-linear-gradient(90deg,#151617 0 2px,#3a3b3d 2px 4px)}
.tv .badge{justify-content:flex-start;min-width:0}
.tv .badge .dot{display:none}
.tv .badge>span:last-child{overflow:hidden;text-overflow:ellipsis}

/* drawn pieces in the photo room: a Rooh Afza bottle on the side table, a carrom board leaning on the wall, a floor cushion */
.r-roohafza{position:absolute;left:96px;bottom:150px;width:62px;filter:drop-shadow(4px 8px 5px rgba(0,0,0,.28))}
.r-carrom{position:absolute;left:1040px;top:calc(var(--tvbottom,640px) - 176px);width:220px;filter:drop-shadow(-4px 8px 10px rgba(0,0,0,.28))}
.r-floorcushion{position:absolute;left:1110px;top:598px;width:290px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.r-pslot{left:1168px!important;top:548px!important;z-index:2}
.r-roundcushion{position:absolute;left:1082px;top:calc(var(--tvbottom,640px) - 130px);width:124px;z-index:1;filter:drop-shadow(4px 6px 6px rgba(0,0,0,.3))}
.r-pslot{left:1195px!important;top:calc(var(--tvbottom,640px) - 92px)!important}
.r-tableart{position:absolute;left:0;top:0;width:268px;height:172px;filter:drop-shadow(0 10px 10px rgba(0,0,0,.25))}
.r-cocomo{position:absolute;left:22px;bottom:150px;width:84px;filter:drop-shadow(3px 6px 5px rgba(0,0,0,.25))}

/* top-right: the prayer pill and a black-and-white switch */
.hright{display:flex;align-items:center;gap:10px}
.bwtoggle{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:999px;border:1px solid rgba(239,228,204,.18);font-family:var(--mono);font-size:11px;color:var(--ink)}
.bwtoggle .knob{position:relative;width:30px;height:16px;border-radius:999px;background:#4a4440;transition:background .2s}
.bwtoggle .knob:after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#efe4cc;transition:transform .2s}
.bwtoggle.on .knob{background:linear-gradient(90deg,#111 50%,#eee 50%)}
.bwtoggle.on .knob:after{transform:translateX(14px);background:#c9a24a}

/* ---- the TV guide as a modal: the brochure opens big in the middle of the screen ---- */
body.guide-open .guide,body.roommode.guide-open .guide{position:fixed;inset:0;z-index:30;width:auto;max-height:none;overflow:auto;opacity:1;
  display:grid;place-items:center;padding:40px 20px;background:rgba(12,9,6,.66);backdrop-filter:blur(5px)}
body.guide-open .stage,body.roommode.guide-open .stage{--w:min(86vw,960px,calc((100vh - 270px)*1.333 + 60px))}
.guide .cover{display:none!important}
.guide .spread{width:min(1000px,94vw)!important;min-width:0;transform:rotate(-.5deg);box-shadow:0 40px 90px rgba(0,0,0,.6)}
body.guide-open .guide .spread{animation:gpop .45s cubic-bezier(.2,.8,.25,1)}
@keyframes gpop{from{opacity:0;transform:translateY(30px) scale(.94) rotate(-2deg)}}
.guide .page{padding:26px 28px 20px;min-height:min(640px,78vh)}
.guide .page h3 .ur{font-size:34px}.guide .page b{font-size:15px}.guide .page .sub{font-size:10.5px}
.guide .page .about{font-size:12.5px}
.screen.covered iframe{visibility:hidden}
.screen.covered .card{display:grid}
@media (max-width:900px){.guide .spread{grid-template-columns:1fr}}
.page .chn .ov{font-family:var(--serif);font-style:normal;letter-spacing:0;font-size:12px;color:#6c5a45;text-transform:none}
.card .about.film{margin-top:10px;background:rgba(0,0,0,.72);font-style:normal}
.card .about.film .ur{font-size:20px;line-height:1.4;display:inline;margin-right:6px}
.cv .hl.film b{display:block;font-size:13.5px;line-height:1.25}
/* the TV is a fixed 480px wide in the room, so size the on-screen cards in px, not viewport units */
body.roommode .card .ur{font-size:70px;line-height:1.5}
body.roommode .card small{font-size:10px}
body.roommode .card .about{max-width:78%;font-size:13px;margin-top:8px;padding:6px 10px}
body.roommode .card .about.film{font-size:13px}
body.roommode .card .about.film .ur{font-size:16px;line-height:1.3}

/* the broadcast clock: labels quiet, times readable at a glance */
.clocks{font-size:11px;letter-spacing:.08em;color:rgba(239,228,204,.5);text-shadow:0 1px 6px rgba(0,0,0,.35)}
.clocks .ct{font-size:13px;letter-spacing:.01em;color:rgba(243,234,214,.9);font-weight:500}
.clocks .cs{margin:0 10px;color:rgba(239,228,204,.35)}

/* ---- the weekly guide: an editor's page ---- */
.page.wkly .feat{display:grid;gap:0}
.page .fi{display:grid;grid-template-columns:62px 1fr;gap:8px;padding:7px 2px;border-bottom:1px dotted #b9a982;cursor:pointer}
.page .fi:hover,.page .wkend div:hover{background:rgba(201,162,74,.22)}
.page .fi .when,.page .wkend .when{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:#8c2323;padding-top:2px}
.page .fi.special b,.page .fi.weekly b{font-size:14.5px}
.page .fi.begins b::before{content:"NEW · ";font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:#8c2323;font-weight:400}
.page h4{font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.18em;margin:14px 0 4px;border-bottom:1px solid #2a1f17;padding-bottom:3px}
.page .wkend div{padding:4px 2px;font-size:12.5px;cursor:pointer;border-bottom:1px dotted #d3c6a3}
.page .wkend b{display:inline;font-size:12.5px}.page .wkend .sub{display:inline;margin-left:4px}
.page .rh{display:block;font-family:var(--serif);font-style:italic;font-size:11.5px;line-height:1.35;color:#5a4a3a;margin-top:2px}
.page .an{display:block;font-size:12px;font-weight:600;margin-top:3px}
.page .nw{display:block;font-size:11.5px;margin-top:3px;color:#3a2e22}.page .nw i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:#8c2323;margin-right:3px}
.page .nw .sub{display:inline}
.page.wkly .key{position:static;margin-top:12px}

.page .pick{border:2px solid #2a1f17;padding:10px 12px;margin:2px 0 12px;cursor:pointer;background:rgba(140,35,35,.06)}
.page .pick small{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:#8c2323}.page .pick b{font-size:18px;margin-top:3px}
.page .pick p{font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.4;margin:6px 0 0;color:#3a2e22}
.page .evts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.page .evt{border:1.5px solid #2a1f17;padding:9px 10px;cursor:pointer}.page .evt:hover,.page .pick:hover,.page .lst div:hover{background:rgba(201,162,74,.22)}
.page .evt .when{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:#8c2323}.page .evt b{font-size:15.5px;line-height:1.2;margin-top:3px}
.page .lst div{display:grid;grid-template-columns:auto 1fr;column-gap:8px;padding:4px 2px;border-bottom:1px dotted #d3c6a3;cursor:pointer;align-items:baseline}
.page .lst div > b:first-child{grid-column:1/-1}.page .lst div > b:first-child + .sub{grid-column:1/-1}
.page .lst .when{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#8c2323;min-width:30px}
.page .lst b{font-size:13px;display:inline}.page .lst .sub{grid-column:2}
.page .lst.films div{grid-template-columns:34px 1fr}
.page .evts{grid-template-columns:repeat(3,1fr)}.page .evt b{font-size:14px}
.page .lst.two{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}

/* ---- modals: the guide and the farmaish letter take the whole screen; their content fits it and scrolls inside ---- */
body.guide-open .guide,body.roommode.guide-open .guide,body.letter-open .letter,body.roommode.letter-open .letter{
  position:fixed;inset:0;height:100vh;height:100dvh;max-height:none;width:auto;z-index:30;opacity:1;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(12,9,6,.7);backdrop-filter:blur(5px)}
.guide .spread{max-height:calc(100dvh - 48px)}
.guide .page{max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;min-height:0}
.guide .page.wkly .key{position:static}
body.letter-open .letter .sheet{width:min(520px,92vw);min-width:0;max-height:calc(100dvh - 48px);overflow-y:auto;animation:gpop .45s cubic-bezier(.2,.8,.25,1)}
body:not(.guide-open) .guide,body:not(.letter-open) .letter{pointer-events:none}

/* the clock is set by ?at= (demos, play-testing): say so, quietly, out of the player's way */
.timetravel{position:fixed;left:14px;bottom:12px;z-index:40;font-size:10.5px;letter-spacing:.06em;color:#efe4cc;background:rgba(150,40,30,.85);padding:6px 10px;border-radius:999px;text-decoration:none}

/* ---- UX pass: close on the object, B&W state, channel names, prayer city, no layout jump, cover fits ---- */
.gwrap,.lwrap{position:relative;max-height:calc(100dvh - 48px)}
.gwrap>.fold,.lwrap>.fold{position:absolute;top:-14px;right:-14px;bottom:auto;z-index:5;font-size:11.5px;padding:7px 14px;background:#1c140e;border:1px solid rgba(239,228,204,.35);color:#efe4cc;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.lwrap>.sheet[hidden]{display:none}
.remote #nums button .nm{display:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em}
.remote #nums button.on{width:auto;padding:0 12px}.remote #nums button.on .nm{display:inline}
.prayer .city{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;border:1px dashed rgba(239,228,204,.35)}
.prayer .city i{font-style:normal;color:var(--gold)}
.prayer:hover .city{border-style:solid;border-color:var(--gold)}
.prayer.switched .city{animation:cityflash 1.2s ease}
@keyframes cityflash{0%{background:rgba(201,162,74,.55)}100%{background:transparent}}
.cv .hl.film b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cv .nums{margin:6px 0 4px}.cv .hl{margin-bottom:22px}       /* the headline box sits clear of the price, so the film's name never runs off the cover */

/* ---- the TV's front panel is real: channel knob, five buttons (Power · CH− · CH+ · B&W · Guide), on/off light ---- */
.tv .ctrls{gap:9px;align-items:flex-start}
.tv .ctrls .dial{--turn:-120deg;position:relative;width:24px;height:24px;margin:-2px 8px 0 0;border-radius:50%;cursor:pointer;padding:0;border:0;
  background:radial-gradient(circle at 40% 35%,#7a7b7e,#2e2f31 70%);box-shadow:0 2px 3px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.15);transform:rotate(var(--turn));transition:transform .25s cubic-bezier(.3,.7,.3,1.3)}
.tv .ctrls .dial .tick{position:absolute;left:50%;top:3px;width:2px;height:7px;margin-left:-1px;border-radius:1px;background:#e8e2d6}
.tv .ctrls .dial:hover{box-shadow:0 0 0 2px rgba(201,162,74,.55),0 2px 3px rgba(0,0,0,.6)}
.tv .ctrls .pb{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;border:0;background:none;cursor:pointer}
.tv .ctrls .pb i{display:block;width:17px;height:8px;border-radius:2px;background:linear-gradient(#5a5b5e,#3a3b3d);box-shadow:0 1px 0 #111;transition:transform .08s}
.tv .ctrls .pb small{font-family:var(--mono);font-size:6.5px;letter-spacing:.08em;color:#8d8a84;white-space:nowrap}
.tv .ctrls .pb:hover i{background:linear-gradient(#6d6e71,#45464a)}.tv .ctrls .pb:hover small{color:#d8d2c4}
.tv .ctrls .pb:active i{transform:translateY(1px);box-shadow:none}
.tv .knobs .led.off{background:#3a1512;box-shadow:none}
.screen.tvoff{background:#000}.screen.tvoff #player,.screen.tvoff .card,.screen.tvoff #static{opacity:0;transition:opacity .25s}
.screen.tvoff:after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px rgba(255,255,255,.6);animation:crtoff .6s ease forwards}
@keyframes crtoff{0%{opacity:1;transform:scale(40,1)}60%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(.2)}}
.tv .badge{gap:8px;padding:3px 8px;letter-spacing:.04em}.tv .badge .ur{font-size:18px}.tv .badge .n{font-size:16px}   /* room for the whole channel name beside the real buttons */
.tv .cabinet{gap:12px;padding-left:16px;padding-right:16px}.tv .ctrls{gap:7px}
.tv .badge .vol{letter-spacing:1px;font-size:12px}

/* ---- the phone: a narrow or a short window (body.phone, set in index.html; body.land when it's a short landscape one).
   No room around the set: the Panasonic fills the width, with two pieces from the room (the niche, the Rooh Afza) on a
   shelf. The clocks are one quiet line, channels are a ribbon, and the guide, the letter and ≡ are sheets from the bottom.
   Only transforms and opacity animate; nothing blurs what's behind it ---- */
.pline,.menu,.mdecor,.ribbon,.dock,.shead,.grab,.msheet,.power .touch{display:none}
body.phone{--gut:max(16px,env(safe-area-inset-left));--tvw:min(100vw - 40px,max(560px,(100dvh - 445px) * 4 / 3));display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,rgba(20,14,10,.62) 0,rgba(20,14,10,.12) 110px,rgba(20,14,10,.25) 300px,rgba(20,14,10,.94) 470px,var(--bg) 600px),url(room/wall.jpg) center top/auto 620px no-repeat,var(--bg)}
body.phone button{touch-action:manipulation}
body.phone header{flex-wrap:wrap;gap:0 10px;padding:max(10px,env(safe-area-inset-top)) var(--gut) 2px}
body.phone .brand{font-size:12px;letter-spacing:.12em}body.phone .brand .ur{font-size:23px}
body.phone .hright,body.phone .clocks{display:none}
body.phone .menu{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(239,228,204,.22);background:rgba(20,14,10,.45);font-size:17px}
body.phone .menu:active{background:rgba(239,228,204,.12)}
body.phone .pline{display:flex;order:3;width:100%;gap:12px;align-items:baseline;padding-top:1px;font-size:10px;letter-spacing:.08em;color:rgba(239,228,204,.45);white-space:nowrap;overflow:hidden}
.pline b{font-weight:500;color:rgba(239,228,204,.68)}
.pline .p{margin-left:auto}.pline .p .ur{font-size:13px;line-height:1;margin-right:5px;color:rgba(239,228,204,.75)}
.pline .p.on,.pline .p.on .ur{color:var(--gold)}

/* the set, in its slot from the room (moving it would reload the player), on a shelf */
body.phone .room{display:block;position:relative;padding:10px 0 12px;overflow:hidden}
body.phone .scene{position:static;width:auto;height:auto;transform:none!important;transition:none}
body.phone .r-photo,body.phone .r-grain,body.phone .r-bslot,body.phone .r-pslot{display:none}
body.phone #tvslot{position:relative;left:auto;top:auto;width:auto;z-index:2}
body.phone .tv{width:var(--tvw);margin:0 auto;transition:none}   /* the width, less 20px a side; taller windows (tablets) let it grow */
body.phone .mdecor{display:block;position:absolute;left:50%;top:0;bottom:0;width:min(100vw,var(--tvw) + 40px);transform:translateX(-50%)}   /* the pieces stay beside the set */
.m-niche{position:absolute;right:-52px;top:18%;width:84px;z-index:1;opacity:.9}
.m-shelf{position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);bottom:0;height:12px;z-index:1;background:linear-gradient(#6b4528,#3a2416);box-shadow:0 8px 14px rgba(0,0,0,.45)}
.m-rooh{position:absolute;left:3px;bottom:11px;width:22px;z-index:3;filter:drop-shadow(3px 6px 4px rgba(0,0,0,.35))}
body.phone .tv .bezel{padding:27px 14px 6px;border-radius:12px 12px 4px 4px;touch-action:pan-y pinch-zoom}
body.phone .tv-top{left:18px;top:6px}body.phone .tv-top b{font-size:13px}body.phone .tv-top small{font-size:5.5px}
body.phone .tv .screen{border-radius:14px/17px}
body.phone .pana{margin-top:9px;font-size:13px}
body.phone .tv .cabinet{padding:6px 10px 8px;gap:8px;touch-action:pan-y pinch-zoom}
body.phone .tv .ctrls{gap:4px;align-items:center}
body.phone .tv .ctrls .pb{pointer-events:none}body.phone .tv .ctrls .pb small{display:none}body.phone .tv .ctrls .pb i{width:12px;height:7px}   /* too small for a thumb: there to look at */
body.phone .tv .ctrls .dial{width:22px;height:22px;margin:0 6px 0 2px}
body.phone .tv .ctrls .dial::before{content:"";position:absolute;inset:-14px;border-radius:50%}   /* the volume knob takes a thumb-sized touch round it */
body.phone .tv .knobs .grille{display:none}
body.phone .tv .badge{font-size:10px;padding:2px 7px;gap:6px}body.phone .tv .badge .ur{font-size:15px}body.phone .tv .badge .n{font-size:14px}
body.phone .power{gap:10px}body.phone .power .ur{font-size:34px}body.phone .power button{padding:11px 22px;font-size:15px}
body.phone .power .desk{display:none}body.phone .power .touch{display:block}
body.phone .card .ur{font-size:38px;line-height:1.5}body.phone .card small{font-size:9.5px;letter-spacing:.16em}
body.phone .card .about{max-width:88%;font-size:11.5px;line-height:1.4;margin-top:6px}
body.phone .screen.tuning .card.ident .about{padding:5px 9px}
body.phone .card .about.film .ur{font-size:14px}

/* under the set: what's on, the channel ribbon, and the dock (guide, B&W, the postcard) */
body.phone main{display:flex;flex-direction:column;flex:1;padding:0;gap:0}
body.phone .stage{--w:100%;flex:1;width:100%;gap:12px;padding:12px var(--gut) max(12px,env(safe-area-inset-bottom));transition:none}
body.phone .chabout,body.phone .remote,body.phone .brochure,body.phone .postcard{display:none}
body.phone .now{padding:0;gap:3px 12px;touch-action:pan-y pinch-zoom}
body.phone .now .t{font-size:18px;font-weight:600;line-height:1.22}
body.phone .now .m{font-size:10.5px}
body.phone .now .nx{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.phone .now .soon{font-size:10.5px;margin-top:2px}body.phone .now .soon b{font-size:12.5px}
body.phone .ribbon{display:flex;position:relative;gap:8px;align-self:stretch;margin:0 calc(-1 * var(--gut));padding:2px 48px 2px var(--gut);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline-start:44px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 60px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 60px),transparent)}
.ribbon::-webkit-scrollbar{display:none}
.ribbon .chip{flex:none;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;height:56px;min-width:52px;border-radius:14px;
  border:1px solid rgba(239,228,204,.16);background:rgba(28,20,14,.85);transition:transform .1s}
.ribbon .chip .n{font-family:var(--ur);font-size:21px;line-height:1}
.ribbon button.chip:active{transform:scale(.94)}
.ribbon .chip.on{gap:0;padding:0 3px;background:linear-gradient(#f4d27a,#c9a24a);border-color:#e0bb5e;color:#1a120b}
.ribbon .ca{width:34px;height:50px;display:grid;place-items:center;border-radius:11px;font-size:10px;opacity:.7}
.ribbon .ca:active,.ribbon .cm:active{background:rgba(26,18,11,.14)}
.ribbon .cm{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:132px;height:50px;padding:0 6px;border-radius:11px;text-align:left;color:inherit}
.ribbon .cm .r1{display:flex;gap:8px;align-items:baseline}
.ribbon .cm .nm{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em}
.ribbon .cm .w{max-width:100%;margin-top:3px;font-size:12px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.phone .dock{display:flex;align-self:stretch;margin-top:auto;padding:6px;border-radius:22px;background:rgba(28,20,14,.9);border:1px solid rgba(239,228,204,.12)}
.dock button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;height:64px;padding:0 0 6px;border-radius:16px;font-size:9.5px;letter-spacing:.12em;color:var(--dim)}
.dock button:active{background:rgba(239,228,204,.08)}
.dock button.on{color:var(--ink)}
.dock .ico{display:block;position:relative}
.dock .ibro{width:24px;height:31px;overflow:hidden;border-radius:2px;background:#efe6cf;transform:rotate(-6deg);box-shadow:0 3px 6px rgba(0,0,0,.4)}
.dock .ibro:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--maroon)}
.dock .ibro:after{content:"ٹی وی";position:absolute;left:0;right:0;top:7px;text-align:center;font-family:var(--ur);font-size:9px;line-height:1.6;color:#2a1f17}
.dock .ibw{width:38px;height:22px;margin-bottom:5px;border-radius:999px;background:#4a4440;transition:background .2s}
.dock .ibw:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#efe4cc;transition:transform .2s}
.dock .on .ibw{background:linear-gradient(90deg,#111 50%,#eee 50%)}.dock .on .ibw:after{transform:translateX(16px);background:var(--gold)}
.dock .icard{width:40px;height:27px;margin-bottom:3px;border-radius:2px;background:#f3ead4;transform:rotate(5deg);box-shadow:0 3px 6px rgba(0,0,0,.4)}
.dock .icard:before{content:"فرمائش";position:absolute;left:4px;top:0;font-family:var(--ur);font-size:10px;line-height:1.8;color:var(--maroon)}
.dock .icard:after{content:"";position:absolute;right:3px;top:3px;width:8px;height:10px;border:1px dashed var(--maroon)}

/* sheets: the guide (paper, two tabs), the letter (paper), ≡ (dark). Each slides up, scrolls inside, and closes with
   its button, the backdrop, Esc, or a pull down on its handle */
body.phone .guide,body.phone .letter{display:none}
body.phone.guide-open .guide,body.phone.letter-open .letter,body.phone.menu-open .msheet{display:flex;position:fixed;inset:0;z-index:30;width:auto;height:100%;padding:0;opacity:1;overflow:hidden;
  align-items:flex-end;justify-content:center;background:rgba(10,7,5,.62);backdrop-filter:none;-webkit-backdrop-filter:none}
body.phone .gwrap,body.phone .lwrap,body.phone .mwrap{position:relative;display:flex;flex-direction:column;width:100%;max-width:640px;max-height:calc(100% - 44px);
  padding-bottom:env(safe-area-inset-bottom);border-radius:22px 22px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.5);animation:sheetup .32s cubic-bezier(.2,.8,.25,1);transition:transform .22s ease}
@keyframes sheetup{from{transform:translateY(100%)}}
body.phone .gwrap,body.phone .lwrap{background:#efe6cf;color:#2a1f17}
body.phone .mwrap{background:#1c140e;border-top:1px solid rgba(239,228,204,.14)}
body.phone .grab{display:block;position:relative;flex:none;height:22px;touch-action:none}
.grab:after{content:"";position:absolute;left:50%;top:8px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:rgba(42,31,23,.28)}
.mwrap .grab:after{background:rgba(239,228,204,.25)}
body.phone .shead{display:block;position:relative;flex:none;padding:22px 16px 10px;touch-action:none}
body.phone .shead .grab{position:absolute;left:0;right:0;top:0}
.gtabs{display:flex;gap:6px}
.gtabs button{height:36px;padding:0 13px;border-radius:999px;border:1px solid rgba(42,31,23,.28);font-size:10.5px;letter-spacing:.12em;color:#2a1f17}
.gwrap[data-tab=week] [data-tab=week],.gwrap[data-tab=now] [data-tab=now]{background:#2a1f17;border-color:#2a1f17;color:#efe4cc}
body.phone .gwrap>.fold,body.phone .lwrap>.fold,body.phone .mwrap>.fold{position:absolute;top:22px;right:14px;bottom:auto;z-index:5;height:36px;padding:0 14px;font-size:11px;
  border:0;border-radius:999px;background:#2a1f17;color:#efe4cc;box-shadow:none}
body.phone .mwrap>.fold{background:rgba(239,228,204,.1)}
body.phone .fold .esc{display:none}
body.phone .guide .spread{display:block;flex:1;min-height:0;width:100%!important;max-height:none;overflow-y:auto;overscroll-behavior:contain;transform:none;box-shadow:none;animation:none}
body.phone .guide .page{min-height:0;max-height:none;overflow:visible;padding:4px 18px 26px;box-shadow:none}
body.phone .gwrap[data-tab=week] .page:not(.wkly),body.phone .gwrap[data-tab=now] .page.wkly{display:none}
body.phone .guide .page h3 .ur{font-size:28px}
body.phone .page .evts{display:flex;gap:8px;margin:0 -18px 4px;padding:0 18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
body.phone .page .evt{flex:0 0 64%;scroll-snap-align:start;scroll-margin-left:18px}
body.phone .page .row{padding:10px 4px}
body.phone .lwrap>.grab{height:22px}
body.phone.letter-open .letter .sheet{flex:1;width:100%;min-width:0;min-height:0;max-height:none;padding:10px 18px 22px;overflow-y:auto;overscroll-behavior:contain;transform:none;box-shadow:none;animation:none}
body.phone .lhead{padding-right:100px}
body.phone .sheet input,body.phone .sheet select,body.phone .sheet textarea{font-size:16px}   /* under 16px, iOS zooms the page when a field is tapped */
#mbody{overflow-y:auto;overscroll-behavior:contain;padding:14px 18px 22px}
.mh{margin:0 0 12px;font-weight:400;font-size:10px;letter-spacing:.18em;color:var(--dim)}
.prayers + .mh{margin-top:22px}
.cities{display:flex;gap:6px;margin-bottom:8px;padding-right:96px}
.cities button{flex:1;height:38px;border-radius:999px;border:1px solid rgba(239,228,204,.22);font-size:11px;letter-spacing:.12em;color:var(--dim)}
.cities button.on{background:var(--ink);border-color:var(--ink);color:#1a120c}
.prayers div{display:grid;grid-template-columns:56px 1fr auto;align-items:baseline;gap:10px;padding:7px 4px;border-bottom:1px solid rgba(239,228,204,.08);font-size:14px}
.prayers .ur{font-size:18px;line-height:1.4}
.prayers b{font-weight:500;font-size:12.5px}
.prayers .past{opacity:.42}.prayers .nx{color:var(--gold)}
.mabout{font-size:13.5px;line-height:1.5;font-style:italic;color:var(--dim)}.mabout .ur{font-style:normal;font-size:17px;color:var(--ink)}
body.phone .timetravel{left:50%;bottom:auto;top:max(3px,env(safe-area-inset-top));transform:translateX(-50%);padding:3px 8px;font-size:9px;white-space:nowrap}

/* a phone on its side: the set fills the height on the left; the clock line, what's on, the ribbon and the dock stack on the right */
body.phone.land{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:16px;height:100vh;height:100dvh;overflow:hidden;
  padding:8px max(14px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));--gut:0px;background:radial-gradient(ellipse at 30% 40%,#2a1f16 0%,var(--bg) 70%)}
body.phone.land .room{grid-column:1;grid-row:1/3;align-self:center;padding:0;overflow:visible}
body.phone.land .mdecor{display:none}
body.phone.land .tv{width:calc((100dvh - 16px - 95px) * 4 / 3 + 28px);margin:0}
body.phone.land header{grid-column:2;grid-row:1;padding:0 0 2px}
body.phone.land main{grid-column:2;grid-row:2;min-height:0;overflow-y:auto}
body.phone.land .stage{gap:9px;padding:6px 0 0}
body.phone.land .now .t{font-size:16px}
body.phone.land .ribbon{padding-left:0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
body.phone.land .dock button{height:54px}
body.phone.land .gwrap,body.phone.land .lwrap,body.phone.land .mwrap{max-height:calc(100% - 16px)}
body.phone .page .row{gap:6px;padding:8px 4px}body.phone .page .row .num{font-size:18px}
body.phone .page .chn .ur{font-size:15px;line-height:1.15}body.phone .page .row b{margin-top:0}
body.phone .page .lst.two:has(.when):not(.films){grid-template-columns:1fr}   /* "also this week" has a label column: one column on a phone */
body.phone .sheet .two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}body.phone .sheet input,body.phone .sheet select{width:100%;min-width:0}
body.phone.land .ribbon{scroll-padding-inline-start:0}body.phone.land .ribbon .cm{width:112px}
body.phone:not(.land) .stage{max-width:calc(var(--tvw) + 40px);align-self:center}   /* a portrait tablet: the column stays the set's width */
body.phone:not(.land) header{width:100%;max-width:calc(var(--tvw) + 40px);align-self:center}
/* the narrowest phones (iPhone SE 1st gen, 320 wide): the set takes more of the width so the picture stays at least
   200px tall, YouTube's minimum player size. The Rooh Afza would stand in front of the screen's corner, so it steps out */
@media (max-width:340px){body.phone:not(.land){--tvw:calc(100vw - 24px)}body.phone .tv .bezel{padding-left:12px;padding-right:12px}body.phone .m-rooh{display:none}}

/* ---- polish from the first iPhone pass ---- */
/* a repeat is tagged in front of the title */
.rp{display:inline-block;margin-right:6px;padding:1px 5px;border:1px solid currentColor;border-radius:3px;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.14em;line-height:1.35;vertical-align:.2em;color:var(--gold)}
.page .rp{color:var(--maroon);font-size:8.5px}
/* the phone's "what's on" keeps one shape whatever is airing: a one-line title, the next line, and one line kept for an
   extra (a farmaish credit, tonight's film, what's coming up), so the ribbon and the dock never move */
body.phone .now{grid-template-rows:auto 3px auto 1.4em;row-gap:5px}
body.phone .now>*{min-width:0}
body.phone .now .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.phone .now>:nth-child(n+6){grid-column:1/-1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0}
body.phone .now>:nth-child(n+7){display:none}
/* specials stack at the page's width, like every other section */
body.phone .page .evts{display:grid;grid-template-columns:1fr;gap:8px;margin:0 0 4px;padding:0;overflow:visible}
body.phone .page .evt{scroll-snap-align:none}
/* lists with a label column ("GAME SHOW", "OCT 10") keep the titles on one line up */
.page .lst:not(.films) div{grid-template-columns:62px 1fr}
body.phone .page .lst:not(.films) div{grid-template-columns:86px 1fr}
/* in the desktop guide's two narrow columns, the label sits above the title instead (no room for a column beside it) */
.page .lst.two:not(.films) div{grid-template-columns:1fr}.page .lst.two:not(.films) .sub{grid-column:1}
body.phone .page .lst.two:not(.films) div{grid-template-columns:86px 1fr}body.phone .page .lst.two:not(.films) .sub{grid-column:2}
body.phone .page .lst.two:not(.films) div>b:first-child,body.phone .page .lst.two:not(.films) div>b:first-child+.sub{grid-column:1/-1}
/* phone sheets: the close button gets its own strip above the scrolling letter and ≡ content, so nothing scrolls under it */
body.phone .lwrap>.grab,body.phone .mwrap>.grab{height:64px}
body.phone .lwrap>.fold,body.phone .mwrap>.fold{top:14px}

/* ---- sharing a channel, and the analytics notice ---- */
.toast{position:fixed;left:50%;bottom:96px;z-index:50;transform:translate(-50%,8px);padding:8px 16px;border-radius:999px;background:#efe4cc;color:#1a120c;
  font-size:11px;letter-spacing:.12em;box-shadow:0 8px 24px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translate(-50%,0)}
body.phone .toast{bottom:calc(30px + env(safe-area-inset-bottom))}
.pnote{font-size:12px;line-height:1.45;color:var(--dim)}
.pnote button{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(239,228,204,.4);text-underline-offset:3px}
#pnote{height:15px;margin-top:-2px;font-size:11px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:rgba(239,228,204,.38)}   /* one line, set in the page so nothing moves when it's filled in */
#pnote button{color:rgba(239,228,204,.6)}
body.roommode .stage{padding-bottom:8px}
body.phone #pnote{display:none}
.mshare{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:40px;margin-top:14px;border-radius:999px;border:1px solid rgba(239,228,204,.22);
  font-size:11px;letter-spacing:.12em;color:var(--ink)}
.mshare:active{background:rgba(239,228,204,.1)}
#mnote{margin-top:24px;padding-top:14px;border-top:1px solid rgba(239,228,204,.08);font-size:11.5px}