:root{--accent:#ffd98a;--text:#f8fcff;--muted:#c9e9ff;--glass:rgba(0,28,67,.26);--line:rgba(255,255,255,.22);--bg1:#087fd2;--bg2:#004f9b}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#045da9;color:var(--text)}body{font-family:Georgia,"Times New Roman",serif}.screen{position:relative;isolation:isolate;width:100%;height:100svh;min-height:100svh;display:grid;grid-template-rows:auto auto auto 1fr auto auto auto;padding:clamp(13px,2.6vh,38px) clamp(14px,3.5vw,50px) clamp(10px,1.8vh,26px);background:radial-gradient(circle at 50% -15%,rgba(89,204,255,.5),transparent 42%),linear-gradient(160deg,var(--bg1),var(--bg2));text-shadow:0 2px 4px rgba(0,40,85,.55);transition:background 1s}.ambient{position:absolute;inset:0;z-index:-1;opacity:.16;background-image:repeating-radial-gradient(circle at 0 0,transparent 0 18px,rgba(255,255,255,.45) 19px 20px),repeating-radial-gradient(circle at 100% 100%,transparent 0 28px,rgba(255,255,255,.3) 29px 30px);background-size:86px 86px,118px 118px}.screen.custom-bg{background-position:center;background-size:cover}.screen.custom-bg:after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,28,55,.52)}button,input,select,textarea{font:inherit}.topbar{display:grid;grid-template-columns:auto auto 1fr auto;align-items:start;gap:clamp(8px,2vw,22px);font-family:Arial,sans-serif}.icon-btn{width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--glass);color:#fff;font-size:25px;cursor:pointer}.weather{display:flex;flex-direction:column;font-size:clamp(12px,1.5vh,18px);color:var(--muted)}.weather strong{font-size:clamp(19px,2.7vh,34px);color:#fff}.dates{text-align:center;line-height:1.2;font-size:clamp(16px,2.2vh,28px)}.dates>*{display:block}.dates span{margin-top:.25em;color:var(--muted)}.hero{position:relative;text-align:center}.mosque{font-size:clamp(17px,2.4vh,32px);margin:.35em 0}.clockline{display:flex;justify-content:center;align-items:flex-start;font-family:Arial,sans-serif;font-variant-numeric:tabular-nums}.clockline #clock{font-size:clamp(68px,12vh,156px);line-height:.9;font-weight:800;letter-spacing:.025em}.clockline #seconds{font-size:clamp(20px,3.8vh,48px);font-weight:700;margin:.08em 0 0 .24em}.clockline #ampm{font-size:clamp(13px,2vh,25px);margin:.4em 0 0 .25em}.next-card{position:absolute;right:0;top:45%;transform:translateY(-50%);display:flex;flex-direction:column;min-width:clamp(95px,16vw,210px);padding:.65em .8em;border:1px solid rgba(255,217,138,.48);border-radius:50%;background:rgba(0,39,86,.28);font-family:Arial,sans-serif}.next-card span,.next-card small{font-size:clamp(10px,1.5vh,18px);color:var(--muted)}.next-card strong{font-size:clamp(22px,4vh,50px);color:var(--accent);font-variant-numeric:tabular-nums}.verse{text-align:center;direction:rtl;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(19px,2.8vh,38px);line-height:1.45;color:var(--accent);padding:.25em}.prayer-table{align-self:center;width:100%;max-width:1000px;margin:auto}.prayer-head,.row{display:grid;grid-template-columns:1.3fr 1fr 1fr;align-items:center}.prayer-head{padding:0 .5em .35em;border-bottom:1px solid var(--line);font:clamp(12px,1.5vh,18px) Arial,sans-serif;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}.prayer-head span:nth-child(n+2){text-align:center}.row{min-height:clamp(42px,6.2vh,78px);padding:0 .5em;border-bottom:1px solid var(--line);transition:.35s}.row.past{opacity:.38}.row.active{opacity:1;margin:.2em -.5em;padding:0 1em;border:1px solid rgba(255,217,138,.6);border-radius:12px;background:rgba(0,35,80,.3);box-shadow:0 5px 22px rgba(0,35,78,.2)}.name{font-size:clamp(20px,3.3vh,43px);font-weight:700}.arabic-name{display:block;font:500 .45em Arial,sans-serif;color:var(--muted)}.time,.iqama{text-align:center;font:800 clamp(24px,4vh,52px) Arial,sans-serif;letter-spacing:.045em;font-variant-numeric:tabular-nums}.iqama{color:#fff0bd}.sunrise .iqama{font-size:clamp(13px,1.8vh,22px);font-weight:500;color:var(--muted)}.extras{display:flex;justify-content:center;gap:clamp(8px,4vw,55px);margin-top:.5em;font-family:Arial,sans-serif}.extras div{display:flex;gap:.6em;align-items:center}.extras span{font-size:clamp(11px,1.45vh,18px);color:var(--muted)}.extras strong{font-size:clamp(14px,1.9vh,24px);color:var(--accent)}.dhikr{text-align:center;direction:rtl;font-size:clamp(15px,2vh,25px);min-height:1.4em;color:var(--accent);padding:.25em}footer{text-align:center;font-family:Arial,sans-serif;font-size:clamp(11px,1.45vh,18px);color:var(--muted)}.ticker{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);padding-top:.45em}.ticker span{display:inline-block;min-width:100%;animation:ticker 24s linear infinite}.hadith{direction:rtl;margin-top:.35em}@keyframes ticker{from{transform:translateX(100%)}to{transform:translateX(-100%)}}.no-data{display:none;align-self:center;text-align:center;font:clamp(22px,4vh,50px) Arial,sans-serif;padding:1em;border:1px solid var(--line);border-radius:18px;background:var(--glass)}.prayer-overlay{display:none;position:fixed;inset:0;z-index:5;align-items:center;justify-content:center;flex-direction:column;background:#030b13;color:white;text-align:center;font-family:Arial,sans-serif}.prayer-overlay.show{display:flex}.prayer-overlay span{font-size:clamp(24px,4vw,55px);color:var(--muted)}.prayer-overlay strong{font-size:clamp(70px,16vw,220px);font-variant-numeric:tabular-nums}
.settings{width:min(940px,96vw);height:min(820px,94vh);padding:0;border:0;border-radius:24px;color:#17283a;background:#f4f7fa;box-shadow:0 30px 100px #001b35}.settings::backdrop{background:rgba(0,15,30,.72);backdrop-filter:blur(6px)}.settings-shell{height:100%;display:grid;grid-template-rows:auto auto 1fr}.settings header{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;background:#063e6d;color:white}.settings header span{font:14px Arial,sans-serif;color:#afdafa}.settings h1{margin:2px 0 0;font:700 27px Arial,sans-serif}.close{border:0;background:transparent;color:#fff;font:36px Arial;cursor:pointer}.tabs{display:flex;overflow:auto;background:#e7eef4;border-bottom:1px solid #ccdae6}.tabs button{flex:1;min-width:105px;padding:15px 10px;border:0;border-bottom:3px solid transparent;background:none;color:#53687a;font:600 14px Arial,sans-serif;cursor:pointer}.tabs button.active{color:#0566ad;border-color:#057bc9;background:#f4f7fa}.panels{overflow:auto;padding:24px 28px 34px}.panel{display:none;font-family:Arial,sans-serif}.panel.active{display:block}.panel h2{margin:0 0 20px;font-size:22px}.panel label{display:flex;flex-direction:column;gap:7px;margin:0 0 17px;font-size:14px;font-weight:700;color:#34495d}.panel input[type=text],.panel input[type=number],.panel select,.panel textarea{width:100%;border:1px solid #b9cad8;border-radius:10px;background:white;padding:11px 12px;color:#17283a;font:16px Arial,sans-serif}.panel textarea{resize:vertical;line-height:1.45}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.check{flex-direction:row!important;align-items:center;font-weight:500!important;font-size:16px!important}.check input{width:20px;height:20px;accent-color:#057bc9}.upload{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px;margin:0 0 14px;border:1px dashed #a9bfce;border-radius:12px;background:white;font:15px Arial,sans-serif}.hint{color:#647789;line-height:1.45}.actions{display:flex;gap:12px;flex-wrap:wrap}.panel button,.file-btn{display:inline-block;border:0;border-radius:10px;padding:12px 17px;background:#057bc9;color:white;font:700 14px Arial,sans-serif;cursor:pointer}.file-btn input{display:none}.panel .danger{margin-top:24px;background:#c73d4d}.status{padding:12px;border-radius:10px;background:#e4f3e8;color:#26723a}.iqama-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.iqama-grid label{margin:0}.force-portrait{max-width:min(56.25vh,100vw);margin:auto}.force-landscape{max-height:min(56.25vw,100vh);margin:auto}
@media (orientation:landscape){.screen:not(.force-portrait){grid-template-columns:.86fr 1.14fr;grid-template-rows:auto auto 1fr auto auto;column-gap:4vw}.screen:not(.force-portrait) .topbar{grid-column:1/3}.screen:not(.force-portrait) .hero{grid-column:1;align-self:end}.screen:not(.force-portrait) .verse{grid-column:1;white-space:normal;align-self:start}.screen:not(.force-portrait) .prayer-table,.screen:not(.force-portrait) .no-data{grid-column:2;grid-row:2/5}.screen:not(.force-portrait) .rows{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.screen:not(.force-portrait) .prayer-head{display:none}.screen:not(.force-portrait) .row{display:flex;flex-direction:column;justify-content:center;min-height:17vh;border:1px solid var(--line);border-radius:13px;background:rgba(0,35,78,.17)}.screen:not(.force-portrait) .name{text-align:center;font-size:clamp(16px,2.3vw,34px)}.screen:not(.force-portrait) .time,.screen:not(.force-portrait) .iqama{font-size:clamp(22px,3.7vw,48px)}.screen:not(.force-portrait) .extras{grid-column:1}.screen:not(.force-portrait) .dhikr{grid-column:1}.screen:not(.force-portrait) footer{grid-column:1/3}.screen:not(.force-portrait) .next-card{position:static;transform:none;width:160px;margin:.6em auto 0}.screen:not(.force-portrait) .row.active{margin:0}}
@media(max-width:620px){.topbar{grid-template-columns:auto 1fr auto}.weather{display:none}.grid2{grid-template-columns:1fr}.settings{width:100vw;height:100vh;max-height:none;border-radius:0}.panels{padding:20px}.iqama-grid{grid-template-columns:1fr 1fr}.next-card{right:-4px}.extras{justify-content:space-between}.extras div{flex-direction:column;gap:0}.verse{white-space:normal}}
@media(prefers-reduced-motion:reduce){.ticker span{animation:none}}
.ambient{background-position:var(--drift,0) var(--drift,0);transition:opacity .8s,background-image .8s}.screen.after-prayer .ambient{opacity:.88;background-position:center;background-size:cover}.screen.after-prayer:after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,25,48,.3)}
.format-setting{margin:0 0 20px}.format-setting>span{display:block;margin-bottom:8px;font:700 14px Arial,sans-serif;color:#34495d}.format-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.panel .format-picker button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 8px;border:2px solid #c8d7e2;background:#fff;color:#486074;font-size:28px}.panel .format-picker button small{font-size:13px}.panel .format-picker button.active{border-color:#057bc9;background:#e5f4ff;color:#0566ad}
.screen.force-landscape{grid-template-columns:.86fr 1.14fr;grid-template-rows:auto auto 1fr auto auto;column-gap:4vw}.screen.force-landscape .topbar{grid-column:1/3}.screen.force-landscape .hero{grid-column:1;align-self:end}.screen.force-landscape .verse{grid-column:1;white-space:normal;align-self:start}.screen.force-landscape .prayer-table,.screen.force-landscape .no-data{grid-column:2;grid-row:2/5}.screen.force-landscape .rows{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.screen.force-landscape .prayer-head{display:none}.screen.force-landscape .row{display:flex;flex-direction:column;justify-content:center;min-height:17vh;border:1px solid var(--line);border-radius:13px;background:rgba(0,35,78,.17)}.screen.force-landscape .name{text-align:center;font-size:clamp(16px,2.3vw,34px)}.screen.force-landscape .time,.screen.force-landscape .iqama{font-size:clamp(22px,3.7vw,48px)}.screen.force-landscape .extras{grid-column:1}.screen.force-landscape .dhikr{grid-column:1}.screen.force-landscape footer{grid-column:1/3}.screen.force-landscape .next-card{position:static;transform:none;width:160px;margin:.6em auto 0}.screen.force-landscape .row.active{margin:0}

/* Tawkit-inspirerat liggande TV-läge: en enda scen och alla böner längst ner. */
.screen.layout-landscape{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr auto auto;column-gap:0;padding:clamp(12px,2.2vh,26px) clamp(20px,3vw,48px) clamp(8px,1.3vh,16px)}
.screen.layout-landscape .topbar{grid-column:1;grid-row:1}.screen.layout-landscape .dates{font-size:clamp(16px,2vw,28px)}
.screen.layout-landscape .hero{grid-column:1;grid-row:2;align-self:center}.screen.layout-landscape .mosque{font-size:clamp(16px,1.8vw,27px);margin:.05em 0 .2em}.screen.layout-landscape .clockline #clock{font-size:clamp(78px,12vw,168px);line-height:.82}.screen.layout-landscape .clockline #seconds{font-size:clamp(25px,3.3vw,48px)}
.screen.layout-landscape .next-card{position:absolute;right:1.5vw;top:55%;transform:translateY(-50%);width:clamp(115px,11vw,175px);min-width:0;margin:0;padding:.65em .5em}.screen.layout-landscape .next-card strong{font-size:clamp(25px,3.1vw,45px)}
.screen.layout-landscape .verse{grid-column:1;grid-row:3;align-self:center;white-space:nowrap;font-size:clamp(21px,2.6vw,38px);padding:.15em 8vw .3em}
.screen.layout-landscape .extras{grid-column:1;grid-row:4;align-self:start;margin:.15em 0 0;gap:5vw}.screen.layout-landscape .dhikr{grid-column:1;grid-row:4;align-self:end;padding:.1em}
.screen.layout-landscape .prayer-table,.screen.layout-landscape .no-data{grid-column:1;grid-row:5;width:100%;max-width:none;margin:0;align-self:end}.screen.layout-landscape .prayer-head{display:none}.screen.layout-landscape .rows{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(5px,1vw,15px)}
.screen.layout-landscape .row{display:flex;flex-direction:column;justify-content:center;min-height:clamp(120px,19vh,190px);margin:0;padding:.5em .3em;border:1px solid var(--line);border-radius:14px;background:rgba(0,35,78,.2)}.screen.layout-landscape .row.active{margin:0;padding:.5em .3em;border-color:var(--accent);background:rgba(0,35,78,.42)}
.screen.layout-landscape .name{order:1;text-align:center;font-size:clamp(17px,1.8vw,29px);line-height:1.05}.screen.layout-landscape .arabic-name{font-size:.5em;margin-top:.18em}.screen.layout-landscape .time{order:2;font-size:clamp(28px,3.7vw,56px);line-height:1.05;margin:.12em 0}.screen.layout-landscape .iqama{order:0;font-size:clamp(14px,1.45vw,22px);line-height:1.2;margin-bottom:.2em}.screen.layout-landscape .sunrise .iqama{font-size:clamp(12px,1.2vw,18px)}
.screen.layout-landscape footer{grid-column:1;grid-row:6;margin-top:.3em}.screen.layout-landscape .ticker{padding-top:.25em}.screen.layout-landscape .hadith{margin-top:.2em}

.iqama-offset,.brand-signature{display:none}
/* Finjusterad liggande placering enligt skissen. */
.screen.layout-landscape{display:block;position:relative;padding:0 2.2vw}
.screen.layout-landscape .topbar{position:absolute;z-index:2;top:2.2vh;left:2.2vw;right:2.2vw;height:6vh;display:flex;align-items:flex-start;gap:1vw}
.screen.layout-landscape .topbar .weather{margin-right:auto}.screen.layout-landscape .topbar #fullBtn{margin-left:auto}
.screen.layout-landscape .dates{position:absolute;top:0;left:24vw;right:24vw;display:flex;flex-direction:row;justify-content:space-between;align-items:center;text-align:left;font-size:clamp(17px,1.55vw,28px);line-height:1.15}
.screen.layout-landscape .dates #gregorian{order:1;margin:0}.screen.layout-landscape .dates #hijri{order:2;margin:0;text-align:right}
.screen.layout-landscape .hero{position:absolute;top:7.2vh;left:0;right:0;height:25vh;padding-top:4.5vh;text-align:center}
.screen.layout-landscape .mosque{position:absolute;top:0;left:0;right:0;margin:0;font-size:clamp(20px,1.8vw,32px)}
.screen.layout-landscape .clockline #clock{font-size:clamp(92px,10.5vw,180px);line-height:.9}.screen.layout-landscape .clockline #seconds{font-size:clamp(28px,3vw,52px)}
.screen.layout-landscape .next-card{right:7vw;top:60%;transform:translateY(-50%);width:clamp(125px,11vw,185px);padding:.7em .5em}
.screen.layout-landscape .verse{position:absolute;top:33vh;left:9vw;right:9vw;height:16vh;display:flex;align-items:center;justify-content:center;padding:0;white-space:normal;overflow:visible;text-overflow:clip;font-size:clamp(34px,3.55vw,65px);line-height:1.45}
.screen.layout-landscape .prayer-table,.screen.layout-landscape .no-data{position:absolute;top:51.5vh;left:2.2vw;right:2.2vw;width:auto;height:27vh;margin:0;align-self:auto}
.screen.layout-landscape .rows{height:100%;align-items:stretch}.screen.layout-landscape .row{min-height:0;height:100%;padding:.65em .25em;background:rgba(0,35,78,.16)}.screen.layout-landscape .row.active{padding:.65em .25em}
.screen.layout-landscape .name{font-size:clamp(20px,1.85vw,32px)}.screen.layout-landscape .time{font-size:clamp(38px,3.8vw,66px);margin:.12em 0}.screen.layout-landscape .iqama{font-size:clamp(17px,1.45vw,25px);font-weight:700;color:var(--accent)}
.screen.layout-landscape .iqama-time{display:none}.screen.layout-landscape .iqama-offset{display:inline}.screen.layout-landscape .sunrise .iqama{font-size:clamp(15px,1.3vw,22px)}
.screen.layout-landscape .extras{position:absolute;z-index:2;left:2.2vw;bottom:1.7vh;margin:0;display:block}.screen.layout-landscape .extras div{display:flex;flex-direction:row;gap:.55em}.screen.layout-landscape .extras span{font-size:clamp(14px,1.1vw,19px)}.screen.layout-landscape .extras strong{font-size:clamp(17px,1.35vw,24px)}
.screen.layout-landscape .dhikr{position:absolute;left:8vw;right:8vw;bottom:14vh;padding:0;font-size:clamp(20px,1.8vw,31px)}
.screen.layout-landscape footer{position:absolute;left:10vw;right:10vw;bottom:2vh;height:15vh;margin:0;display:flex;align-items:flex-start;justify-content:center}
.screen.layout-landscape .hadith{margin:0;padding-top:1.5vh;font-size:clamp(26px,2.45vw,44px);line-height:1.55;color:#fff}
.screen.layout-landscape .brand-signature{display:block;position:fixed;right:2.2vw;bottom:1.8vh;font:clamp(12px,.95vw,17px) Arial,sans-serif;color:rgba(255,255,255,.68);letter-spacing:.02em}.screen.layout-landscape .brand-signature strong{color:var(--accent);font-weight:700}

/* Central admin + tydligare TV-visning */
.icon-btn{text-decoration:none;display:grid;place-items:center}
.dates{font-weight:600;color:var(--text)}
.column-label{display:none}
.time-value,.iqama-value{display:block}
.sync-state{position:fixed;left:50%;bottom:18px;z-index:20;transform:translateX(-50%);font:600 14px Arial,sans-serif;color:#dff4ff}
.announcement{font:600 clamp(13px,1.4vh,18px) Arial,sans-serif;color:var(--accent)}
.brand-signature img{display:block;width:clamp(150px,18vw,280px);height:auto;filter:invert(98%) sepia(22%) saturate(856%) hue-rotate(332deg) brightness(108%);opacity:.82}
.brand-signature span{font:500 clamp(10px,.85vw,14px) Arial,sans-serif;color:rgba(255,255,255,.65);letter-spacing:.08em;text-transform:uppercase}
.next-card strong{white-space:nowrap;letter-spacing:.04em}

.screen.layout-landscape .dates{left:18vw;right:18vw;display:block;text-align:center;font-weight:600;color:var(--text);white-space:nowrap}
.screen.layout-landscape .next-card{right:6vw;border-radius:50% 50% 46% 46%;padding:.9em .45em}
.screen.layout-landscape .next-card strong{font-size:clamp(22px,2.45vw,40px)}
.screen.layout-landscape .rows{gap:clamp(7px,1vw,18px)}
.screen.layout-landscape .row{position:relative;overflow:hidden;clip-path:polygon(50% 0,64% 10%,79% 27%,91% 49%,100% 100%,0 100%,9% 49%,21% 27%,36% 10%);border:0;border-radius:0;padding:clamp(24px,3.6vh,44px) .3em .7em;background:linear-gradient(180deg,rgba(13,71,119,.23),rgba(0,25,64,.45));box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.screen.layout-landscape .row:before{content:"";position:absolute;inset:4px;z-index:-1;clip-path:inherit;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 55%)}
.screen.layout-landscape .row.active{padding:clamp(24px,3.6vh,44px) .3em .7em;background:linear-gradient(180deg,rgba(255,217,138,.3),rgba(0,35,78,.55));filter:drop-shadow(0 0 8px rgba(255,217,138,.65));box-shadow:inset 0 0 0 2px var(--accent)}
.screen.layout-landscape .name{font-size:clamp(18px,1.65vw,29px)}
.screen.layout-landscape .time{margin:.08em 0}.screen.layout-landscape .time,.screen.layout-landscape .iqama{display:flex;flex-direction:column;align-items:center;line-height:1}
.screen.layout-landscape .column-label{display:block;margin-bottom:.2em;font:600 clamp(10px,.72vw,13px) Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.screen.layout-landscape .time-value{font-size:clamp(31px,3.15vw,54px)}
.screen.layout-landscape .iqama-value{font:700 clamp(14px,1.25vw,21px) Arial,sans-serif;color:var(--accent)}
.screen.layout-landscape .sunrise .iqama{min-height:1.35em}
.screen.layout-landscape footer{left:7vw;right:7vw}
.screen.layout-landscape .brand-signature{display:flex;position:fixed;right:1.8vw;bottom:1.2vh;align-items:center;gap:.65em;text-align:left}
.screen.layout-landscape .brand-signature img{width:clamp(150px,14vw,245px)}

@media(max-aspect-ratio:1/1){.brand-signature{display:none}.dates{font-weight:600}.column-label{display:none}}

/* Publika vyer har inga lokala kontroller. */
.mobile-view .topbar,.tv-view .topbar{grid-template-columns:auto 1fr}
.mobile-view .dates,.tv-view .dates{text-align:center}
@media(max-width:620px){.mobile-view .topbar{grid-template-columns:1fr}}

/* Stående TV via liggande webbläsare: en virtuell porträttskärm roteras 90 grader. */
.rotated-tv-view.screen{
  position:fixed;
  top:50%;
  left:50%;
  width:100vh;
  height:100vw;
  min-height:100vw;
  max-width:none;
  margin:0;
  transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center;
  grid-template-columns:1fr;
  grid-template-rows:auto auto auto 1fr auto auto auto;
  padding:clamp(22px,3vh,44px) clamp(24px,4vh,58px) clamp(18px,2.5vh,38px);
}
.rotated-tv-view .topbar{grid-template-columns:1fr}
.rotated-tv-view .weather{display:none}
.rotated-tv-view .dates{font-size:clamp(20px,2.5vh,32px)}
.rotated-tv-view .mosque{font-size:clamp(24px,3vh,40px);margin:.5em 0}
.rotated-tv-view .clockline #clock{font-size:clamp(110px,16vh,190px)}
.rotated-tv-view .clockline #seconds{font-size:clamp(30px,4.5vh,54px)}
.rotated-tv-view .next-card{min-width:clamp(150px,19vh,225px);padding:.8em 1em}
.rotated-tv-view .next-card span,.rotated-tv-view .next-card small{font-size:clamp(15px,1.8vh,22px)}
.rotated-tv-view .next-card strong{font-size:clamp(31px,4.5vh,54px)}
.rotated-tv-view .verse{white-space:normal;font-size:clamp(28px,3.7vh,48px);padding:.4em}
.rotated-tv-view .prayer-table{max-width:920px}
.rotated-tv-view .row{min-height:clamp(76px,8.2vh,112px)}
.rotated-tv-view .name{font-size:clamp(29px,4vh,50px)}
.rotated-tv-view .time,.rotated-tv-view .iqama{font-size:clamp(34px,5vh,60px)}
.rotated-tv-view .prayer-head{font-size:clamp(15px,1.8vh,22px)}
.rotated-tv-view .extras span{font-size:clamp(15px,1.8vh,22px)}
.rotated-tv-view .extras strong{font-size:clamp(20px,2.5vh,30px)}
.rotated-tv-view .hadith{font-size:clamp(19px,2.5vh,31px);line-height:1.5}

/* Slutlig stående TV-layout. Sidan är liggande för äldre TV-webbläsare,
   medan hela porträttscenen roteras tillsammans med den fysiska skärmen. */
.rotated-tv-view.screen{
  display:block;
  padding:0;
  overflow:hidden;
}
.rotated-tv-view .topbar{
  position:absolute;
  top:1.4%;
  left:4%;
  right:4%;
  height:3.2%;
  display:block;
}
.rotated-tv-view .dates{
  text-align:center;
  white-space:nowrap;
  font:600 clamp(18px,2.25vh,29px)/1.2 Arial,sans-serif;
}
.rotated-tv-view .hero{position:static}
.rotated-tv-view .mosque{
  position:absolute;
  top:4.5%;
  left:5%;
  right:5%;
  margin:0;
  text-align:center;
  font-size:clamp(20px,2.6vh,34px);
}
.rotated-tv-view .clockline{
  position:absolute;
  top:7.2%;
  left:0;
  right:0;
}
.rotated-tv-view .clockline #clock{
  font-size:clamp(86px,13vh,152px);
  line-height:.9;
}
.rotated-tv-view .clockline #seconds{font-size:clamp(24px,3.6vh,43px)}
.rotated-tv-view .verse:not([hidden]){
  position:absolute;
  top:17.5%;
  left:4%;
  right:4%;
  height:10.5%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.25em .4em;
  overflow:visible;
  white-space:normal;
  text-overflow:clip;
  color:var(--accent);
  font-size:clamp(31px,4.35vh,53px);
  font-weight:700;
  line-height:1.55;
}
.rotated-tv-view .next-card{
  position:absolute;
  top:28.8%;
  left:50%;
  right:auto;
  width:clamp(168px,21vh,235px);
  min-width:0;
  min-height:clamp(105px,13vh,150px);
  margin:0;
  padding:.9em .6em;
  transform:translateX(-50%);
  align-items:center;
  justify-content:center;
  border-width:2px;
  background:rgba(0,39,86,.38);
}
.rotated-tv-view .next-card span,.rotated-tv-view .next-card small{font-size:clamp(14px,1.75vh,21px)}
.rotated-tv-view .next-card strong{
  font-size:clamp(27px,3.8vh,45px);
  letter-spacing:0;
}
.rotated-tv-view .prayer-table,.rotated-tv-view .no-data{
  position:absolute;
  top:39.2%;
  left:4%;
  right:4%;
  width:auto;
  height:36.5%;
  max-width:none;
  margin:0;
}
.rotated-tv-view .prayer-head{height:5.5%;padding:0 .6em .25em;font-size:clamp(13px,1.55vh,19px)}
.rotated-tv-view .rows{height:94.5%}
.rotated-tv-view .row{height:16.666%;min-height:0;padding:0 .65em}
.rotated-tv-view .row.active{margin:0 -.35em;padding:0 1em}
.rotated-tv-view .name{font-size:clamp(25px,3.35vh,42px)}
.rotated-tv-view .time,.rotated-tv-view .iqama{font-size:clamp(29px,4.1vh,50px)}
.rotated-tv-view .row:not(.sunrise) .iqama-value{color:var(--accent)}
.rotated-tv-view .dhikr{
  position:absolute;
  top:76.4%;
  left:5%;
  right:5%;
  padding:0;
  font-size:clamp(16px,2.1vh,27px);
}
.rotated-tv-view footer{position:static}
.rotated-tv-view .announcement{
  position:absolute;
  top:77.5%;
  left:5%;
  right:5%;
}
.rotated-tv-view .hadith:not([hidden]){
  position:absolute;
  top:79.5%;
  left:4%;
  right:4%;
  height:12.5%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:.25em .5em;
  color:var(--accent);
  font-size:clamp(27px,3.65vh,46px);
  font-weight:700;
  line-height:1.6;
}
.rotated-tv-view .extras{
  position:absolute;
  left:4%;
  bottom:1.7%;
  z-index:2;
  margin:0;
  display:block;
}
.rotated-tv-view .extras div{display:flex;flex-direction:row;gap:.6em}
.rotated-tv-view .extras span{font-size:clamp(14px,1.65vh,21px)}
.rotated-tv-view .extras strong{font-size:clamp(19px,2.35vh,29px);color:var(--accent)}
.rotated-tv-view .brand-signature{
  position:absolute;
  right:3.5%;
  bottom:1.1%;
  display:flex;
  align-items:center;
  gap:.55em;
  text-align:left;
}
.rotated-tv-view .brand-signature span{font-size:clamp(9px,1vh,13px)}
.rotated-tv-view .brand-signature img{width:clamp(125px,15vh,180px)}
.rotated-tv-view .prayer-overlay{position:absolute;inset:0}

/* Mobilbesökare ska alltid kunna se tidtabellen under nedräkning och bön. */
.mobile-view .prayer-overlay{
  position:fixed;
  top:auto;
  left:14px;
  right:14px;
  bottom:14px;
  width:auto;
  min-height:88px;
  padding:14px 18px;
  border:1px solid rgba(255,217,138,.72);
  border-radius:18px;
  background:rgba(2,27,54,.94);
  box-shadow:0 14px 42px rgba(0,15,35,.45);
  backdrop-filter:blur(12px);
}
.mobile-view .prayer-overlay span{font-size:clamp(18px,5vw,24px);color:var(--accent)}
.mobile-view .prayer-overlay strong{font-size:clamp(32px,10vw,48px);line-height:1.05}
.mobile-view .prayer-overlay strong:empty{display:none}

.admin-subheading{margin:26px 0 4px;font-size:18px}

/* Tajtare vertikal rytm för stående TV: jämna mellanrum i toppen,
   fristående nedräkning och större, luftigare bönetabell. */
.rotated-tv-view .topbar{top:1.1%;height:2.8%}
.rotated-tv-view .mosque{top:3.6%;font-size:clamp(17px,2.1vh,28px)}
.rotated-tv-view .clockline{top:5.2%}
.rotated-tv-view .clockline #clock{font-size:clamp(82px,12vh,142px)}
.rotated-tv-view .clockline #seconds{font-size:clamp(22px,3.25vh,39px)}
.rotated-tv-view .verse:not([hidden]){
  top:14.8%;
  height:8.8%;
  left:3.5%;
  right:3.5%;
  padding:0;
  overflow:hidden;
  white-space:nowrap;
  font-size:clamp(29px,4vh,49px);
}
.verse #verseText{display:inline-block;white-space:nowrap}
.verse.marquee{justify-content:flex-start}
.verse.marquee #verseText{min-width:max-content;animation:verse-marquee 16s linear infinite}
@keyframes verse-marquee{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
.rotated-tv-view .next-card{
  top:24.8%;
  width:clamp(158px,19vh,218px);
  min-height:clamp(92px,11.5vh,132px);
  padding:.65em .55em;
  z-index:2;
}
.rotated-tv-view .next-card strong{font-size:clamp(26px,3.55vh,42px)}
.rotated-tv-view .prayer-table,.rotated-tv-view .no-data{
  top:35.2%;
  height:45.5%;
}
.rotated-tv-view .prayer-head{height:5%;font-size:clamp(15px,1.8vh,22px)}
.rotated-tv-view .rows{height:95%}
.rotated-tv-view .row{height:16.666%;min-height:0}
.rotated-tv-view .name{font-size:clamp(29px,4vh,50px)}
.rotated-tv-view .time,.rotated-tv-view .iqama{font-size:clamp(34px,5vh,60px)}
.rotated-tv-view .sunrise .iqama,
.rotated-tv-view .sunrise .iqama-value{
  font:600 clamp(14px,1.75vh,21px)/1.2 Arial,sans-serif;
  letter-spacing:0;
  color:var(--muted);
}
.rotated-tv-view .dhikr{top:80.7%}
.rotated-tv-view .announcement{top:81.2%}
.rotated-tv-view .hadith:not([hidden]){
  top:82%;
  height:9.2%;
  font-size:clamp(25px,3.35vh,42px);
  line-height:1.45;
}
.rotated-tv-view .extras{bottom:1.25%}
.rotated-tv-view .brand-signature{bottom:.65%}

/* Samma tydliga ordning i mobilvyn: klocka, vers, nedräkning, tabell. */
.mobile-view.screen{
  grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto auto;
  row-gap:clamp(3px,.7vh,8px);
}
.mobile-view .hero{display:flex;flex-direction:column;justify-content:center}
.mobile-view .mosque{margin:.15em 0}
.mobile-view .clockline #clock{font-size:clamp(62px,10.5vh,112px)}
.mobile-view .verse{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:clamp(48px,7.5vh,76px);
  padding:0;
  overflow:hidden;
  white-space:nowrap;
}
.mobile-view .next-card{
  position:static;
  place-self:center;
  transform:none;
  width:clamp(118px,34vw,154px);
  min-width:0;
  margin:.15em 0 .25em;
  padding:.55em .65em;
}
.mobile-view .next-card span,.mobile-view .next-card small{font-size:clamp(11px,2.9vw,14px)}
.mobile-view .next-card strong{font-size:clamp(23px,6.5vw,31px)}
.mobile-view .prayer-table{align-self:stretch;margin:0 auto}
.mobile-view .row{min-height:clamp(50px,7vh,68px)}
.mobile-view .sunrise .iqama,
.mobile-view .sunrise .iqama-value{font-size:clamp(11px,2.8vw,15px);letter-spacing:0;color:var(--muted)}
.mobile-view .hadith{margin-top:0;color:var(--accent);font-size:clamp(16px,4vw,20px);font-weight:700;line-height:1.35}

@media(prefers-reduced-motion:reduce){.verse.marquee #verseText{animation:none}}

/* Slutjustering efter provkörning på den riktiga stående TV-skärmen. */
.rotated-tv-view .prayer-table,.rotated-tv-view .no-data{top:37.7%}
.rotated-tv-view .dhikr{top:83.2%}
.rotated-tv-view .announcement{top:83.7%}
.rotated-tv-view .hadith:not([hidden]){top:84.5%}
.rotated-tv-view .next-card small{color:var(--accent)}
.rotated-tv-view .brand-signature{gap:.12em}
.rotated-tv-view .brand-signature img{
  filter:brightness(0) invert(1);
  opacity:1;
}
.rotated-tv-view .brand-signature span{color:#fff}

/* Mobilvyn får naturligt flöde så att cirkeln aldrig kan hamna över tabellen. */
.mobile-view.screen{
  height:auto;
  min-height:100svh;
  overflow-y:auto;
  grid-template-rows:auto auto auto auto auto auto auto;
  padding-top:clamp(10px,1.5vh,16px);
  padding-bottom:clamp(64px,8vh,82px);
}
.mobile-view .topbar{min-height:0}
.mobile-view .dates{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:clip;
  font-size:clamp(11px,3vw,15px);
  line-height:1.15;
}
.mobile-view .hero{margin-top:0}
.mobile-view .mosque{font-size:clamp(15px,4vw,19px);margin:.05em 0}
.mobile-view .clockline #clock{font-size:clamp(60px,9.5vh,102px)}
.mobile-view .clockline #seconds{font-size:clamp(18px,3vh,30px)}
.mobile-view .verse{
  width:100%;
  min-height:clamp(56px,8vh,78px);
  font-size:clamp(23px,6.5vw,32px);
  line-height:1.5;
}
.mobile-view .next-card{margin:.35em 0 0}
.mobile-view .next-card small{color:var(--accent)}
.mobile-view .prayer-table{margin-top:clamp(12px,2vh,20px)}
.mobile-view .row:not(.sunrise) .iqama,
.mobile-view .row:not(.sunrise) .iqama-value{color:var(--accent)}
.mobile-view .verse,
.mobile-view .next-card strong,
.mobile-view .next-card small,
.mobile-view .extras strong,
.mobile-view .hadith{color:var(--accent)}
.mobile-view .dhikr{margin-top:.25em}
.mobile-view footer{position:static;margin-top:clamp(8px,1.5vh,16px)}
.mobile-view .hadith{
  margin:0;
  padding:.25em .2em;
  font-size:clamp(19px,5.2vw,25px);
  line-height:1.45;
}
.mobile-view .extras{
  position:absolute;
  left:14px;
  bottom:12px;
  z-index:2;
  margin:0;
}
.mobile-view .extras div{display:flex;flex-direction:row;gap:.45em}
.mobile-view .extras span{font-size:clamp(11px,3vw,14px)}
.mobile-view .extras strong{font-size:clamp(14px,3.8vw,18px)}
.mobile-view .brand-signature{
  position:absolute;
  right:12px;
  bottom:8px;
  display:flex;
  align-items:center;
  gap:.05em;
  text-align:left;
}
.mobile-view .brand-signature span{font-size:clamp(7px,2vw,10px);color:#fff}
.mobile-view .brand-signature img{
  width:clamp(92px,25vw,124px);
  filter:brightness(0) invert(1);
  opacity:1;
}

/* Mobilkorrigering för Safari och installerad webbapp. */
.next-card{align-items:center;justify-content:center;text-align:center}
.next-card>*{width:100%;text-align:center}
.verse.marquee #verseText{animation:none}
.rotated-tv-view .verse.compact{font-size:clamp(24px,3.35vh,41px)}
.rotated-tv-view .verse.compact-more{font-size:clamp(20px,2.8vh,34px)}
.screen.layout-landscape .verse.compact{font-size:clamp(18px,2.2vw,32px)}
.screen.layout-landscape .verse.compact-more{font-size:clamp(15px,1.8vw,27px)}

.mobile-view.screen{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  row-gap:clamp(3px,.55vh,7px);
  padding-bottom:0;
}
.mobile-view .ambient{position:fixed}
.mobile-view .topbar,
.mobile-view .hero,
.mobile-view .verse,
.mobile-view .next-card,
.mobile-view .prayer-table,
.mobile-view .dhikr,
.mobile-view footer,
.mobile-view .bottom-meta{flex:0 0 auto}
.mobile-view .verse.compact{font-size:clamp(18px,5vw,25px)}
.mobile-view .verse.compact-more{font-size:clamp(14px,3.9vw,20px)}
.mobile-view .prayer-table{width:100%}
.mobile-view .sunrise .name{font-size:clamp(22px,6.3vw,28px)}
.mobile-view footer{margin-top:clamp(5px,.9vh,10px)}
.mobile-view .bottom-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  margin-top:clamp(5px,.9vh,10px);
  padding:4px 0 max(10px,env(safe-area-inset-bottom));
  font-family:Arial,sans-serif;
}
.mobile-view .extras{
  position:static;
  flex:0 0 auto;
  margin:0;
}
.mobile-view .brand-signature{
  position:static;
  flex:0 1 auto;
  margin:0;
}

/* Fast virtuell mobilskärm som skalas till webbläsarens faktiskt synliga yta. */
.mobile-view.screen.fit-mobile{
  position:fixed;
  top:0;
  left:0;
  width:430px;
  height:932px;
  min-height:0;
  max-width:none;
  margin:0;
  padding:12px 18px 10px;
  overflow:hidden;
  row-gap:4px;
  transform-origin:0 0;
}
.mobile-view.fit-mobile .ambient{position:absolute}
.mobile-view.fit-mobile .dates{font-size:15px;line-height:18px}
.mobile-view.fit-mobile .mosque{font-size:18px;line-height:21px;margin:1px 0}
.mobile-view.fit-mobile .clockline #clock{font-size:96px;line-height:.88}
.mobile-view.fit-mobile .clockline #seconds{font-size:27px}
.mobile-view.fit-mobile .verse{min-height:68px;font-size:31px;line-height:1.45}
.mobile-view.fit-mobile .verse.compact{font-size:24px}
.mobile-view.fit-mobile .verse.compact-more{font-size:18px}
.mobile-view.fit-mobile .next-card{
  width:148px;
  min-height:94px;
  margin:3px auto 0;
  padding:9px 10px;
}
.mobile-view.fit-mobile .next-card span,
.mobile-view.fit-mobile .next-card small{font-size:14px;line-height:18px}
.mobile-view.fit-mobile .next-card strong{font-size:32px;line-height:38px}
.mobile-view.fit-mobile .prayer-table{margin-top:9px}
.mobile-view.fit-mobile .prayer-head,
.mobile-view.fit-mobile .row{
  grid-template-columns:minmax(0,44%) minmax(0,28%) minmax(0,28%);
  width:100%;
  padding-left:8px;
  padding-right:8px;
}
.mobile-view.fit-mobile .prayer-head{height:22px;padding-bottom:4px;font-size:14px}
.mobile-view.fit-mobile .row{min-height:62px}
.mobile-view.fit-mobile .row.active{margin:2px 0;padding-left:8px;padding-right:8px}
.mobile-view.fit-mobile .prayer-head>*,
.mobile-view.fit-mobile .row>*{min-width:0}
.mobile-view.fit-mobile .name{overflow:hidden;font-size:31px;line-height:1.02}
.mobile-view.fit-mobile .time,
.mobile-view.fit-mobile .iqama{
  width:100%;
  justify-self:stretch;
  text-align:center;
  font-size:39px;
  line-height:1;
  letter-spacing:.02em;
}
.mobile-view.fit-mobile .time-value,
.mobile-view.fit-mobile .iqama-value{width:100%;text-align:center}
.mobile-view.fit-mobile .sunrise .name{
  overflow:visible;
  white-space:nowrap;
  font-size:26px;
  letter-spacing:-.035em;
}
.mobile-view.fit-mobile .sunrise .iqama,
.mobile-view.fit-mobile .sunrise .iqama-value{font-size:13px;letter-spacing:-.02em}
.mobile-view.fit-mobile .arabic-name{margin-top:3px}
.mobile-view.fit-mobile .dhikr{min-height:0;margin-top:2px;font-size:18px}
.mobile-view.fit-mobile footer{margin-top:5px}
.mobile-view.fit-mobile .hadith{padding:4px 2px;font-size:23px;line-height:1.4}
.mobile-view.fit-mobile .bottom-meta{
  min-height:42px;
  margin-top:auto;
  padding:4px 0 2px;
}
.mobile-view.fit-mobile .extras span{font-size:13px}
.mobile-view.fit-mobile .extras strong{font-size:17px}
.mobile-view.fit-mobile .brand-signature span{font-size:9px}
.mobile-view.fit-mobile .brand-signature img{width:112px}

/* Pixelbundna mobilkolumner: långa bönenamn kan aldrig flytta tiderna. */
.mobile-view.fit-mobile .prayer-head,
.mobile-view.fit-mobile .row{
  position:relative;
  display:block;
  padding-left:0;
  padding-right:0;
}
.mobile-view.fit-mobile .prayer-head>span,
.mobile-view.fit-mobile .row>.name,
.mobile-view.fit-mobile .row>.time,
.mobile-view.fit-mobile .row>.iqama{position:absolute;margin:0}
.mobile-view.fit-mobile .prayer-head>span:nth-child(1),
.mobile-view.fit-mobile .row>.name{
  left:0;
  width:45%;
  text-align:left;
}
.mobile-view.fit-mobile .prayer-head>span:nth-child(2),
.mobile-view.fit-mobile .row>.time{
  left:45%;
  width:27.5%;
  text-align:center;
}
.mobile-view.fit-mobile .prayer-head>span:nth-child(3),
.mobile-view.fit-mobile .row>.iqama{
  left:72.5%;
  width:27.5%;
  text-align:center;
}
.mobile-view.fit-mobile .prayer-head>span{top:0}
.mobile-view.fit-mobile .row>.name,
.mobile-view.fit-mobile .row>.time,
.mobile-view.fit-mobile .row>.iqama{
  top:50%;
  transform:translateY(-50%);
}
.mobile-view.fit-mobile .row.active{padding-left:0;padding-right:0}
.mobile-view.fit-mobile .sunrise .name{
  padding-left:0;
  font-size:25px;
  letter-spacing:-.045em;
}

/* Kompaktare topp ger en tydlig, alltid synlig nederdel. */
.mobile-view.fit-mobile .verse{min-height:58px;margin-top:-3px}
.mobile-view.fit-mobile .next-card{
  width:138px;
  min-height:70px;
  margin:-1px auto 0;
  padding:7px 9px;
}
.mobile-view.fit-mobile .next-card small{display:none}
.mobile-view.fit-mobile .next-card span{font-size:14px;line-height:18px}
.mobile-view.fit-mobile .next-card strong{font-size:31px;line-height:36px}
.mobile-view.fit-mobile .prayer-table{margin-top:4px}
.mobile-view.fit-mobile .bottom-meta{min-height:38px;padding-top:2px}

/* Vanlig mobilwebb: hel bredd och naturlig vertikal scrollning. */
.mobile-view.screen{
  position:relative;
  top:auto;
  left:auto;
  width:100%;
  height:auto;
  min-height:100svh;
  max-width:none;
  margin:0;
  padding:12px 18px max(18px,env(safe-area-inset-bottom));
  overflow:visible;
  transform:none;
  row-gap:4px;
}
.mobile-view.screen.force-portrait{max-width:none;margin:0}
.mobile-view .ambient{position:absolute}
.mobile-view .verse{min-height:58px;margin-top:-3px}
.mobile-view .next-card{
  width:138px;
  min-height:70px;
  margin:-1px auto 0;
  padding:7px 9px;
}
.mobile-view .next-card small{display:none}
.mobile-view .next-card span{font-size:14px;line-height:18px}
.mobile-view .next-card strong{font-size:31px;line-height:36px}
.mobile-view .prayer-table{margin-top:4px}
.mobile-view .prayer-head,
.mobile-view .row{
  position:relative;
  display:block;
  width:100%;
  padding-left:0;
  padding-right:0;
}
.mobile-view .prayer-head{height:22px;padding-bottom:4px;font-size:14px}
.mobile-view .row{min-height:62px}
.mobile-view .prayer-head>span,
.mobile-view .row>.name,
.mobile-view .row>.time,
.mobile-view .row>.iqama{position:absolute;margin:0;min-width:0}
.mobile-view .prayer-head>span:nth-child(1),
.mobile-view .row>.name{left:0;width:45%;text-align:left}
.mobile-view .prayer-head>span:nth-child(2),
.mobile-view .row>.time{left:45%;width:27.5%;text-align:center}
.mobile-view .prayer-head>span:nth-child(3),
.mobile-view .row>.iqama{left:72.5%;width:27.5%;text-align:center}
.mobile-view .prayer-head>span{top:0}
.mobile-view .row>.name,
.mobile-view .row>.time,
.mobile-view .row>.iqama{top:50%;transform:translateY(-50%)}
.mobile-view .row.active{padding-left:0;padding-right:0}
.mobile-view .name{overflow:hidden;font-size:clamp(27px,7.2vw,31px);line-height:1.02}
.mobile-view .time,
.mobile-view .iqama{
  justify-self:stretch;
  font-size:clamp(34px,9vw,39px);
  line-height:1;
  letter-spacing:.02em;
}
.mobile-view .time-value,
.mobile-view .iqama-value{width:100%;text-align:center}
.mobile-view .sunrise .name{
  overflow:visible;
  white-space:nowrap;
  padding-left:0;
  font-size:clamp(22px,6.1vw,25px);
  letter-spacing:-.045em;
}
.mobile-view .sunrise .iqama,
.mobile-view .sunrise .iqama-value{font-size:13px;letter-spacing:-.02em}
.mobile-view .bottom-meta{
  min-height:38px;
  margin-top:10px;
  padding:4px 0 max(6px,env(safe-area-inset-bottom));
}

/* Luftig mobiltabell med fasta, exakt linjerade kolumner. */
.mobile-view .next-card{
  width:196px;
  min-width:196px;
  min-height:70px;
  padding:7px 14px;
  border-radius:50%;
}
.mobile-view .next-card strong{white-space:nowrap}
.mobile-view .prayer-head,
.mobile-view .row,
.mobile-view.fit-mobile .prayer-head,
.mobile-view.fit-mobile .row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(0,.92fr) minmax(0,.92fr);
  column-gap:8px;
  width:100%;
  padding-left:8px;
  padding-right:8px;
}
.mobile-view .prayer-head>span,
.mobile-view .row>.name,
.mobile-view .row>.time,
.mobile-view .row>.iqama,
.mobile-view.fit-mobile .prayer-head>span,
.mobile-view.fit-mobile .row>.name,
.mobile-view.fit-mobile .row>.time,
.mobile-view.fit-mobile .row>.iqama{
  position:static;
  width:auto;
  min-width:0;
  margin:0;
  transform:none;
}
.mobile-view .prayer-head>span:nth-child(n),
.mobile-view.fit-mobile .prayer-head>span:nth-child(n){width:auto}
.mobile-view .prayer-head>span:nth-child(n+2),
.mobile-view.fit-mobile .prayer-head>span:nth-child(n+2){text-align:center}
.mobile-view .row>.name,
.mobile-view .row>.time,
.mobile-view .row>.iqama,
.mobile-view.fit-mobile .row>.name,
.mobile-view.fit-mobile .row>.time,
.mobile-view.fit-mobile .row>.iqama{
  align-self:center;
}
.mobile-view .row>.name,
.mobile-view.fit-mobile .row>.name{text-align:left}
.mobile-view .row>.time,
.mobile-view .row>.iqama,
.mobile-view.fit-mobile .row>.time,
.mobile-view.fit-mobile .row>.iqama{text-align:center}
.mobile-view .time,
.mobile-view .iqama,
.mobile-view.fit-mobile .time,
.mobile-view.fit-mobile .iqama{
  font-size:clamp(31px,8.2vw,36px);
  letter-spacing:.01em;
}
.mobile-view .sunrise .name,
.mobile-view.fit-mobile .sunrise .name{
  overflow:visible;
  white-space:nowrap;
  font-size:clamp(22px,5.9vw,25px);
  letter-spacing:-.045em;
}
.mobile-view .row.active,
.mobile-view.fit-mobile .row.active{
  margin:2px 0;
  padding-left:8px;
  padding-right:8px;
}
.mobile-view footer{margin-top:0}
.mobile-view .hadith{padding-top:0;padding-bottom:0}
.mobile-view .bottom-meta{margin-top:2px;padding-top:0}

/* Safari får naturlig scroll; installerad webbapp hålls stilla. */
.mobile-view.screen.standalone-mobile{
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
}
.mobile-view.screen.standalone-mobile .bottom-meta{margin-top:auto}

/* Hadith visas alltid på en enda rad och skalas av JavaScript endast vid behov. */
.hadith{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:clip}
.brand-signature{color:inherit;text-decoration:none;cursor:pointer}
.brand-signature:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}

/* TVS visas åt motsatt håll när den fysiska TV:n vänds 180 grader. */
.rotated-tv-view.screen{transform:translate(-50%,-50%) rotate(-90deg)}

/* Installationshjälp visas endast i den vanliga mobilwebbläsaren. */
.install-prompt{
  position:fixed;
  z-index:20;
  left:14px;
  right:14px;
  bottom:max(14px,env(safe-area-inset-bottom));
  padding:18px 16px 16px;
  border:1px solid rgba(255,217,138,.72);
  border-radius:20px;
  background:rgba(2,35,75,.96);
  box-shadow:0 18px 50px rgba(0,18,48,.5);
  backdrop-filter:blur(16px);
  font-family:Arial,sans-serif;
  text-align:center;
  opacity:0;
  transform:translateY(calc(100% + 30px));
  transition:transform .28s ease,opacity .28s ease;
  animation:install-in .42s ease .55s both;
}
.install-prompt.show{opacity:1;transform:translateY(0)}
.install-prompt.dismissed{animation:none;opacity:0;transform:translateY(calc(100% + 30px))}
@keyframes install-in{from{opacity:0;transform:translateY(calc(100% + 30px))}to{opacity:1;transform:translateY(0)}}
.install-prompt>strong{display:block;font-size:20px;color:#fff}
.install-prompt>span{display:block;margin-top:4px;font-size:14px;color:var(--muted)}
.install-close{position:absolute;top:7px;right:10px;width:34px;height:34px;border:0;background:transparent;color:#fff;font:28px/1 Arial,sans-serif;cursor:pointer}
.install-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.install-actions button{min-height:46px;padding:8px;border:1px solid rgba(255,255,255,.25);border-radius:13px;background:#087dcc;color:#fff;font:700 14px Arial,sans-serif;cursor:pointer}
.install-actions button:active{transform:scale(.98)}
.install-help{margin:12px 2px 0;color:var(--accent);font:600 14px/1.4 Arial,sans-serif}
.standalone-mobile .install-prompt{display:none!important}
@media(display-mode:standalone){.install-prompt{display:none!important}}

/* Mobil: bönestatusen ligger i samma fält som nedräkningen. */
.mobile-view .next-slot{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  min-width:0;
}
.mobile-view .next-slot .prayer-overlay{
  position:absolute;
  z-index:12;
  top:50%;
  right:0;
  bottom:auto;
  left:0;
  width:100%;
  min-height:92px;
  padding:14px 18px;
  overflow:hidden;
  isolation:isolate;
  transform:translateY(-50%);
  border:0;
  border-radius:22px;
  background:transparent;
  box-shadow:0 14px 42px rgba(0,15,35,.42);
}
.mobile-view .next-slot .prayer-overlay::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-230%;
  background:conic-gradient(from 0deg,rgba(255,217,138,.2),rgba(255,255,255,.98),#ffd98a,rgba(255,217,138,.18) 24%,rgba(255,217,138,.18) 76%,#ffd98a,rgba(255,255,255,.98),rgba(255,217,138,.2));
  animation:prayer-border-orbit 12s linear infinite;
}
.mobile-view .next-slot .prayer-overlay::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:2px;
  border-radius:20px;
  background:rgba(2,27,54,.96);
  backdrop-filter:blur(12px);
}
.mobile-view .next-slot .prayer-overlay>*{position:relative;z-index:2}
@keyframes prayer-border-orbit{to{transform:rotate(360deg)}}

/* Qibla Finder */
.qibla-launch{
  position:absolute;
  z-index:8;
  top:38%;
  right:0;
  display:flex;
  width:46px;
  height:46px;
  align-items:center;
  justify-content:center;
  padding:4px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:14px;
  color:#fff;
  background:rgba(2,35,75,.46);
  box-shadow:0 5px 16px rgba(0,24,58,.18);
  backdrop-filter:blur(10px);
  cursor:pointer;
  text-shadow:none;
}
.qibla-launch-kaaba{font-size:27px;line-height:1;filter:saturate(.78) brightness(1.12)}
.qibla-launch:active{transform:scale(.96)}
.qibla-launch:focus-visible,.qibla-close:focus-visible,.qibla-activate:focus-visible{outline:3px solid #fff;outline-offset:3px}
.qibla-backdrop{
  position:fixed;
  z-index:60;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,15,35,.72);
  backdrop-filter:blur(12px);
  font-family:Arial,sans-serif;
  text-shadow:none;
  animation:qibla-fade-in .2s ease both;
}
.qibla-dialog{
  position:relative;
  width:min(420px,100%);
  max-height:min(720px,92svh);
  overflow:auto;
  padding:25px 22px 22px;
  border:1px solid rgba(255,217,138,.58);
  border-radius:26px;
  color:#f8fcff;
  background:linear-gradient(160deg,rgba(5,77,144,.98),rgba(1,29,67,.99));
  box-shadow:0 26px 80px rgba(0,10,30,.58);
  text-align:center;
  animation:qibla-rise .28s ease both;
}
.qibla-dialog.is-aligned{border-color:#8fffc0;box-shadow:0 0 0 1px rgba(143,255,192,.34),0 26px 80px rgba(0,10,30,.58),0 0 38px rgba(76,255,155,.2)}
.qibla-close{position:absolute;top:12px;right:12px;display:grid;width:40px;height:40px;place-items:center;padding:0;border:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.1);cursor:pointer}
.qibla-close svg{width:22px;height:22px}
.qibla-eyebrow{display:block;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.qibla-dialog h2{margin:6px 35px 9px;font-size:23px;line-height:1.15}
.qibla-compass{
  position:relative;
  width:min(270px,72vw);
  aspect-ratio:1;
  margin:0 auto 18px;
  border:2px solid rgba(255,217,138,.8);
  border-radius:50%;
  background:repeating-conic-gradient(from -1deg,rgba(255,255,255,.17) 0 1deg,transparent 1deg 15deg),radial-gradient(circle,rgba(11,125,203,.28) 0 11%,rgba(0,34,79,.4) 12% 63%,rgba(255,255,255,.08) 64% 65%,rgba(0,28,67,.46) 66%);
  box-shadow:inset 0 0 35px rgba(0,17,45,.5),0 10px 30px rgba(0,16,45,.26);
}
.qibla-compass::before,.qibla-compass::after{content:"";position:absolute;background:rgba(255,255,255,.2)}
.qibla-compass::before{top:8%;bottom:8%;left:50%;width:1px}
.qibla-compass::after{left:8%;right:8%;top:50%;height:1px}
.qibla-cardinals{position:absolute;z-index:2;inset:0;transform-origin:center;will-change:transform}.qibla-north,.qibla-east,.qibla-south,.qibla-west{position:absolute;z-index:2;color:var(--muted);font-size:13px;font-weight:800}.qibla-cardinals b{display:block;transform:rotate(var(--compass-upright,0deg));will-change:transform}
.qibla-north{top:9px;left:50%;transform:translateX(-50%);color:var(--accent)}
.qibla-south{bottom:9px;left:50%;transform:translateX(-50%)}
.qibla-east{right:12px;top:50%;transform:translateY(-50%)}
.qibla-west{left:12px;top:50%;transform:translateY(-50%)}
.qibla-direction{position:absolute;z-index:3;inset:0;transform-origin:center;will-change:transform}
.qibla-kaaba{position:absolute;top:20px;left:50%;font-size:40px;line-height:1;transform:translateX(-50%);filter:drop-shadow(0 3px 7px rgba(0,0,0,.32))}
.qibla-pointer{position:absolute;top:62px;bottom:50%;left:50%;width:3px;border-radius:4px;background:linear-gradient(to bottom,var(--accent),rgba(255,217,138,.28));transform:translateX(-50%)}
.qibla-pointer::before{content:"";position:absolute;top:-3px;left:50%;width:9px;height:9px;border-top:2px solid var(--accent);border-left:2px solid var(--accent);transform:translateX(-50%) rotate(45deg)}
.qibla-center{position:absolute;z-index:4;top:50%;left:50%;width:15px;height:15px;border:3px solid #fff;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);box-shadow:0 0 16px rgba(255,217,138,.75)}
.qibla-degrees{display:block;margin:0 0 10px;color:rgba(232,245,255,.68);font-size:12px;font-weight:600;letter-spacing:.08em}
.qibla-message{display:flex;min-height:56px;align-items:center;justify-content:center;color:var(--accent);font-size:22px;line-height:1.25}
.qibla-dialog.is-aligned .qibla-message{color:#9affc6}
.qibla-dialog p{display:flex;min-height:42px;align-items:flex-start;justify-content:center;margin:8px auto 0;max-width:330px;color:var(--muted);font-size:14px;line-height:1.45}
.qibla-activate{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:15px;padding:9px 18px;border:1px solid rgba(255,255,255,.3);border-radius:13px;color:#fff;background:#087dcc;font:700 14px Arial,sans-serif;cursor:pointer}.qibla-activate svg{width:17px}.qibla-warning{color:#ffe0a0!important}.qibla-warning svg{flex:0 0 auto;width:18px;margin-right:7px}
@keyframes qibla-fade-in{from{opacity:0}to{opacity:1}}
@keyframes qibla-rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:380px){.qibla-launch{right:-5px;width:42px;height:42px}.qibla-launch-kaaba{font-size:24px}.qibla-dialog{padding-left:16px;padding-right:16px}}
@media(prefers-reduced-motion:reduce){.mobile-view .next-slot .prayer-overlay::before,.qibla-backdrop,.qibla-dialog{animation:none}.qibla-direction,.qibla-cardinals,.qibla-cardinals b{transition:none}}
.role-callout{position:absolute;z-index:4;display:flex;min-width:250px;max-width:36%;flex-direction:column;gap:.28em;padding:.72em 1em;border:1px solid rgba(255,217,138,.62);border-radius:16px;background:rgba(0,34,78,.86);box-shadow:0 10px 30px rgba(0,22,55,.32);font-family:Arial,sans-serif;text-align:left;backdrop-filter:blur(9px)}.role-callout[hidden]{display:none}.role-callout>span{color:var(--muted);font-size:clamp(11px,1.35vh,16px);font-weight:800;letter-spacing:.025em}.role-callout ol{margin:.15em 0;padding-left:1.45em;color:var(--accent);font-size:clamp(14px,1.75vh,21px);font-weight:750;line-height:1.3}.role-callout li{padding-left:.12em}.role-callout small{color:rgba(220,241,255,.75);font-size:clamp(10px,1.15vh,14px)}.tv-view .role-callout{left:0;top:45%;transform:translateY(-50%)}.rotated-tv-view .role-callout{top:28.2%;left:4%;width:34%;max-width:34%;min-width:0;padding:.55em .75em}.rotated-tv-view .role-callout ol{display:grid;grid-template-columns:1fr 1fr;column-gap:1.5em;margin:.1em 0;font-size:clamp(12px,1.45vh,17px);line-height:1.22}.mobile-view .role-callout{z-index:11;top:50%;left:50%;width:min(94%,360px);max-width:none;min-width:0;transform:translate(-50%,-50%);padding:.65em .9em}.mobile-view .role-callout ol{display:grid;grid-template-columns:1fr 1fr;column-gap:1.2em;margin:.1em 0;font-size:14px}

/* Notisinställningar */
.notification-launch{
  position:absolute;
  z-index:8;
  top:calc(38% - 58px);
  right:0;
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.24);
  border-radius:14px;
  color:#fff;
  background:rgba(2,35,75,.46);
  box-shadow:0 5px 16px rgba(0,24,58,.18);
  backdrop-filter:blur(10px);
  cursor:pointer;
}
.notification-launch svg{width:23px;height:23px;stroke-width:1.8}
.notification-launch:active{transform:scale(.96)}
.notification-launch:focus-visible,.notification-close:focus-visible,.notification-save:focus-visible,.notification-disable:focus-visible,.notification-switch:focus-visible{outline:3px solid #fff;outline-offset:3px}
.notification-active-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border:2px solid #075da8;border-radius:50%;background:#8fffc0;box-shadow:0 0 8px rgba(143,255,192,.9)}
.notification-backdrop{position:fixed;z-index:65;inset:0;display:grid;place-items:center;padding:20px;background:rgba(0,15,35,.72);backdrop-filter:blur(12px);font-family:Arial,sans-serif;text-shadow:none;animation:qibla-fade-in .2s ease both}
.notification-dialog{position:relative;width:min(450px,100%);max-height:min(760px,92svh);overflow:auto;padding:25px 20px 21px;border:1px solid rgba(255,217,138,.58);border-radius:26px;color:#f8fcff;background:linear-gradient(160deg,rgba(5,77,144,.98),rgba(1,29,67,.99));box-shadow:0 26px 80px rgba(0,10,30,.58);animation:qibla-rise .28s ease both}
.notification-close{position:absolute;top:12px;right:12px;display:grid;width:40px;height:40px;place-items:center;padding:0;border:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.1);cursor:pointer}
.notification-close svg{width:22px;height:22px}
.notification-eyebrow{display:block;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.notification-dialog h2{margin:6px 40px 18px;font-size:24px;line-height:1.15;text-align:center}
.notification-options{display:grid;gap:10px}
.notification-option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;min-height:68px;padding:12px 13px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(1,28,65,.34)}
.notification-option.with-minutes{grid-template-columns:minmax(0,1fr) auto auto}
.notification-option>div{display:grid;gap:3px;min-width:0;text-align:left}
.notification-option strong{font-size:16px;line-height:1.2}
.notification-option>div>span{color:rgba(232,245,255,.7);font-size:13px;line-height:1.25}
.notification-option>label{display:flex;align-items:center;gap:3px;color:var(--muted);font-size:13px}
.notification-option input{width:52px;min-height:38px;padding:5px;border:1px solid rgba(255,255,255,.25);border-radius:10px;color:#fff;background:rgba(0,24,56,.68);font:700 16px Arial,sans-serif;text-align:center}
.notification-option input:disabled{opacity:.42}
.notification-option.iqama-option{border-color:rgba(255,217,138,.42);background:rgba(255,217,138,.08)}
.notification-option.iqama-option strong{color:var(--accent)}
.notification-switch{position:relative;width:48px;height:28px;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(0,20,49,.7);cursor:pointer;transition:background .2s,border-color .2s}
.notification-switch span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#dbeaf7;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .2s,background .2s}
.notification-switch.is-on{border-color:rgba(143,255,192,.7);background:#118d72}
.notification-switch.is-on span{background:#fff;transform:translateX(20px)}
.notification-message{min-height:40px;margin:14px 4px 10px;color:rgba(232,245,255,.75);font-size:14px;line-height:1.4;text-align:center}
.notification-save{width:100%;min-height:48px;padding:10px 16px;border:1px solid rgba(255,217,138,.78);border-radius:14px;color:#06274a;background:var(--accent);font:800 15px Arial,sans-serif;cursor:pointer}
.notification-actions{display:grid;gap:9px}
.notification-disable{width:100%;min-height:43px;padding:9px 16px;border:1px solid rgba(255,255,255,.3);border-radius:13px;color:#fff;background:rgba(255,255,255,.08);font:700 14px Arial,sans-serif;cursor:pointer}
.notification-save:disabled,.notification-disable:disabled{cursor:wait;opacity:.7}
@media(max-width:380px){.notification-launch{right:-5px;width:42px;height:42px;top:calc(38% - 53px)}.notification-launch svg{width:21px;height:21px}.notification-dialog{padding-left:14px;padding-right:14px}.notification-option{gap:8px;padding-left:10px;padding-right:10px}.notification-option input{width:46px}}
@media(prefers-reduced-motion:reduce){.notification-backdrop,.notification-dialog{animation:none}.notification-switch,.notification-switch span{transition:none}}

/* Mobil finjustering: funktionsikoner och bönestatus enligt skissen. */
.mobile-view .qibla-launch{
  top:calc(62% + 22px);
  right:-7px;
}
.mobile-view .notification-launch{
  top:calc(62% - 36px);
  right:-7px;
}
.mobile-view .next-slot .prayer-overlay{
  top:auto;
  bottom:0;
  min-height:116px;
  transform:none;
}
@media(max-width:380px){
  .mobile-view .qibla-launch{top:calc(62% + 20px);right:-3px}
  .mobile-view .notification-launch{top:calc(62% - 33px);right:-3px}
  .mobile-view .next-slot .prayer-overlay{min-height:108px}
}

/* Imamlistan kan visas direkt på Iqama-nedräkningen. */
.overlay-role{width:min(88vw,760px);margin-top:clamp(18px,3vh,38px);padding:clamp(12px,2vh,22px) clamp(16px,3vw,34px);border:1px solid rgba(255,217,138,.62);border-radius:18px;background:rgba(11,35,62,.82);box-shadow:0 12px 34px rgba(0,0,0,.28);text-align:left}
.overlay-role[hidden]{display:none}
.overlay-role>span{display:block;color:var(--muted);font-size:clamp(15px,2.2vh,27px);font-weight:800}
.overlay-role ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.2em 2.2em;margin:.5em 0;padding-left:1.5em;color:var(--accent);font-size:clamp(17px,2.5vh,31px);font-weight:750;line-height:1.25}
.overlay-role small{color:rgba(220,241,255,.78);font-size:clamp(12px,1.65vh,20px)}
.mobile-view .next-slot .prayer-overlay.with-roster{min-height:190px;padding:12px 14px}
.mobile-view .next-slot .overlay-role{width:100%;margin-top:7px;padding:7px 10px;border-radius:12px;background:rgba(7,42,75,.72)}
.mobile-view .next-slot .overlay-role>span{font-size:12px}
.mobile-view .next-slot .overlay-role ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 18px;margin:3px 0;padding-left:20px;font-size:13px;line-height:1.18}
.mobile-view .next-slot .overlay-role small{font-size:10px}

/* TV: kompakt prioriteringsruta med säker luft mot alla skärmkanter. */
.tv-view .role-callout,
.rotated-tv-view .role-callout{
  left:50%;
  width:min(52%,520px);
  max-width:calc(100% - 80px);
  min-width:280px;
  padding:clamp(12px,1.8vh,20px) clamp(16px,2.2vw,26px);
  transform:translate(-50%,-50%);
}
.tv-view .role-callout{top:45%}
.rotated-tv-view .role-callout{top:27.5%}
.tv-view .role-callout ol,
.rotated-tv-view .role-callout ol{
  display:block;
  margin:.45em 0;
  padding-left:1.55em;
  font-size:clamp(15px,1.9vh,23px);
  line-height:1.38;
}
.tv-view .role-callout li,
.rotated-tv-view .role-callout li{margin:.16em 0}
.tv-view .overlay-role,
.rotated-tv-view .overlay-role{
  width:min(62%,520px);
  max-width:calc(100% - 80px);
  margin-top:clamp(14px,2.2vh,28px);
  padding:clamp(13px,1.8vh,21px) clamp(18px,2.4vw,28px);
}
.tv-view .overlay-role ol,
.rotated-tv-view .overlay-role ol{
  display:block;
  margin:.45em 0;
  padding-left:1.55em;
  font-size:clamp(17px,2.25vh,28px);
  line-height:1.34;
}
.tv-view .overlay-role li,
.rotated-tv-view .overlay-role li{margin:.16em 0}

/* Helskärmsvy för imam- och muadhinlistor. */
.duty-overlay{position:fixed;z-index:20;inset:0;display:flex;flex-direction:column;align-items:center;padding:clamp(28px,4vh,64px) clamp(24px,6vw,88px);overflow:hidden;background-image:linear-gradient(180deg,rgba(0,31,88,.08),rgba(0,28,72,.18)),url('/duty-list-background.webp');background-position:center;background-size:cover;color:#fff;font-family:Georgia,"Times New Roman",serif;text-align:center;text-shadow:0 3px 9px rgba(0,20,60,.75)}
.duty-overlay[hidden]{display:none}
.rotated-tv-view .duty-overlay{position:absolute}
.tv-view .duty-overlay,.rotated-tv-view .duty-overlay{justify-content:center;padding-top:clamp(40px,4vh,64px);padding-bottom:clamp(155px,14vh,230px)}
.duty-countdown{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;margin-bottom:clamp(16px,2.4vh,34px);font-family:Arial,sans-serif}
.duty-countdown span{color:#ffe098;font-size:clamp(20px,2.5vh,32px);font-weight:750;letter-spacing:.035em}
.duty-countdown strong{color:#fff;font-size:clamp(70px,11vh,138px);font-variant-numeric:tabular-nums;line-height:.95;text-shadow:0 0 22px rgba(255,255,255,.28),0 5px 10px rgba(0,20,62,.72)}
.duty-list-panel{display:flex;width:min(82%,760px);max-height:calc(100% - 150px);flex-direction:column;padding:clamp(20px,2.7vh,38px);overflow:hidden;border:2px solid rgba(255,218,133,.88);border-radius:clamp(20px,2.6vh,34px);background:linear-gradient(155deg,rgba(0,47,112,.9),rgba(0,25,72,.92));box-shadow:0 0 24px rgba(255,216,130,.18),0 24px 70px rgba(0,16,56,.48);backdrop-filter:blur(10px)}
.duty-list-panel h2{margin:0 0 clamp(14px,2vh,26px);color:#ffdc89;font-size:clamp(40px,5.5vh,68px);line-height:1.05;text-align:center}
.duty-list-panel>small{margin-top:clamp(10px,1.4vh,18px);color:rgba(225,242,255,.82);font:600 clamp(14px,1.65vh,21px)/1.25 Arial,sans-serif;text-align:center}
.duty-groups{display:grid;min-height:0;gap:clamp(10px,1.4vh,18px);overflow:hidden}
.duty-group{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(10px,1.45vh,18px) clamp(14px,2vw,24px);border:1.5px solid rgba(255,218,133,.84);border-radius:clamp(14px,1.9vh,24px);background:linear-gradient(150deg,rgba(12,91,171,.42),rgba(0,48,118,.55));box-shadow:inset 0 0 25px rgba(67,173,255,.08),0 7px 18px rgba(0,19,59,.2)}
.duty-group h3{margin:0 0 .18em;color:#ffdc89;font-size:clamp(22px,2.7vh,34px);line-height:1.1;text-align:center}
.duty-group div{color:#fff;font-size:clamp(28px,4vh,50px);font-weight:700;line-height:1.18;text-align:center}
.duty-groups:has(.duty-group:nth-child(5)) .duty-group{padding-block:clamp(7px,1vh,12px)}
.duty-groups:has(.duty-group:nth-child(5)) .duty-group h3{font-size:clamp(18px,2.2vh,28px)}
.duty-groups:has(.duty-group:nth-child(5)) .duty-group div{font-size:clamp(23px,3.2vh,40px)}
.duty-brand-signature{position:absolute;right:clamp(24px,4vw,64px);bottom:clamp(18px,2.2vh,34px);display:flex;align-items:center;gap:clamp(9px,1.2vw,18px);color:rgba(236,247,255,.9);font:600 clamp(13px,1.55vh,20px)/1.1 Arial,sans-serif;letter-spacing:.06em;text-decoration:none;text-transform:uppercase;text-shadow:0 2px 7px rgba(0,21,57,.7)}
.duty-brand-signature img{display:block;width:clamp(145px,17vw,235px);height:auto}
.mobile-view .duty-overlay{padding:24px 16px}.mobile-view .duty-countdown{margin-bottom:14px}.mobile-view .duty-countdown span{font-size:17px}.mobile-view .duty-countdown strong{font-size:56px}.mobile-view .duty-list-panel{width:min(94%,430px);max-height:calc(100% - 105px);padding:16px;border-radius:20px}.mobile-view .duty-list-panel h2{font-size:36px}.mobile-view .duty-groups{gap:9px}.mobile-view .duty-group{padding:9px 12px}.mobile-view .duty-group h3{font-size:18px}.mobile-view .duty-group div{font-size:26px}