@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@700&family=Cairo:wght@700;900&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

body{
    font-family:Cairo,Tahoma,Arial,sans-serif;
    overflow:hidden;
    color:white;
    background:linear-gradient(180deg,#061521,#0b2b3a,#03080d);
}

.screen{
    width:100vw;
    height:100vh;
    padding:10px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
}

.header{text-align:center;width:100%}

.mosque-name{
    font-family:Amiri,Cairo,serif;
    font-size:clamp(54px,6vw,100px);
    font-weight:700;
    color:#ffd166;
    line-height:.95;
    margin-bottom:4px;
}

#dateLine{
    font-size:clamp(24px,3vw,46px);
    font-weight:900;
    color:#fff;
    line-height:1.15;
}

.main-clock{
    text-align:center;
    background:#ffd166;
    color:#061018;
    border-radius:24px;
    padding:8px 28px;
    border:5px solid white;
}

#bigClock{
    font-size:clamp(82px,10vw,155px);
    font-weight:900;
    line-height:.92;
}

#bigPeriod{
    font-size:clamp(26px,3vw,44px);
    font-weight:900;
}

.iqama-alert{
    display:none;
    background:#d62828;
    color:white;
    border-radius:32px;
    padding:14px 42px;
    text-align:center;
    border:6px solid white;
    animation:pulse 1s infinite;
}

.iqama-alert.show{display:block}

#iqamaText{
    font-size:clamp(48px,7vw,72px);
    font-weight:900;
}

#iqamaCountdown{
    font-size:clamp(90px,12vw,140px);
    font-weight:900;
    line-height:.95;
}

.prayer-row{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:6px;
    width:100%;
}

.prayer-card{
    background:#12384a;
    color:#fff;
    border-radius:18px;
    text-align:center;
    padding:8px 5px;
    font-weight:900;
    min-height:132px;
    border:3px solid rgba(255,255,255,.25);
    overflow:hidden;
}

.prayer-card.active{
    background:#ffd166;
    color:#061018;
    border:5px solid white;
}

.prayer-name{
    font-size:clamp(34px,4.5vw,52px);
    font-weight:900;
    line-height:1;
    margin-bottom:8px;
}

.time-line{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:4px;
    margin-top:6px;
    padding:6px 8px;
    border-radius:12px;
    background:rgba(0,0,0,.22);
    font-size:clamp(21px,2.6vw,34px);
}

.prayer-card.active .time-line{background:rgba(255,255,255,.35)}

.time-line span,.time-line strong{
    font-weight:900;
    white-space:nowrap;
}

.footer{
    width:100%;
    text-align:center;
    font-size:clamp(22px,2.8vw,34px);
    font-weight:900;
    color:#fff;
    padding:4px;
}

@keyframes pulse{
    0%{transform:scale(1)}
    50%{transform:scale(1.04)}
    100%{transform:scale(1)}
}


/* Fullscreen alert screens */
.fullscreen-alert {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    background: linear-gradient(180deg, #071b2a, #02070b);
    color: #ffffff;
}

.fullscreen-alert.show {
    display: flex;
}

.fullscreen-card {
    width: min(92vw, 1500px);
    min-height: 60vh;
    border-radius: 45px;
    border: 8px solid #ffffff;
    background: #12384a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px;
    box-shadow: 0 0 45px rgba(0,0,0,.45);
}

.adhan-fullscreen .fullscreen-card {
    background: #12384a;
}

.iqama-alert {
    position: fixed !important;
    inset: 0 !important;
    z-index: 998 !important;
    border-radius: 0 !important;
    padding: 30px !important;
    border: none !important;
    background: linear-gradient(180deg, #7a1010, #140202) !important;
    color: white !important;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.iqama-alert.show {
    display: flex !important;
}

.iqama-alert::before {
    content: "";
    position: absolute;
    inset: 30px;
    border: 8px solid white;
    border-radius: 45px;
    pointer-events: none;
}

.iqama-alert > div {
    position: relative;
    z-index: 2;
}

#adhanText,
#prayerStartedText,
#prayerScreenText,
#iqamaText {
    font-size: clamp(60px, 8vw, 130px);
    font-weight: 900;
    line-height: 1.25;
}

#iqamaCountdown {
    font-size: clamp(120px, 17vw, 260px) !important;
    font-weight: 900;
    line-height: 1;
    margin-top: 20px;
}

.alert-icon {
    font-size: clamp(80px, 10vw, 160px);
    margin-bottom: 25px;
}

.blink-text {
    animation: textBlink 1s infinite;
}

@keyframes textBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

body.night-mode {
    background: linear-gradient(180deg, #02070b, #061018) !important;
}

body.night-mode .prayer-card {
    background: #071f2b !important;
}

body.night-mode .main-clock {
    background: #d8b24c !important;
}