/* ============================================
   MASJID DISPLAY SYSTEM
   Main Stylesheet
   ============================================ */

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

:root {
    --background: #08342a;
    --panel: #0d4d3c;
    --card: #145642;
    --table-header: #1c7258;
    --gold: #ffd54f;
    --gold-dark: #d4af37;
    --white: #ffffff;
    --muted: #9e9e9e;
    --black: #000000;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--background);
    color: var(--white);
    font-family: "Poppins", "Segoe UI", Arial, sans-serif;
}

/* ============================================
   SCREEN SYSTEM
   ============================================ */

/* ============================================
   SCREEN TRANSITIONS
   ============================================ */

.screen {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    z-index: 0;

    transition:
        opacity 0.45s ease-in-out,
        visibility 0.45s linear;

    will-change: opacity;
}

.screen.active {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    z-index: 100;

    transition-delay: 0s;
}

/* ============================================
   NORMAL SCREEN
   ============================================ */

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ============================================
   HEADER
   ============================================ */

header {
    min-height: 145px;
    background: var(--panel);
    border-bottom: 4px solid var(--gold-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 48px;
}

.mosque {
    font-size: 46px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.5px;
}

.datetime {
    width: 460px;
    text-align: right;
}

#clock {
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
}

#date {
    margin-top: 10px;
    font-size: 24px;
    line-height: 1.25;
}

#hijriDate {
    margin-top: 5px;
    font-size: 23px;
    color: var(--gold);
    line-height: 1.25;
}

/* ============================================
   MAIN AREA
   ============================================ */

main {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 40% 60%;
}

/* ============================================
   NEXT PRAYER CARD
   ============================================ */

.left {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 38px;
}

.card {
    width: 100%;
    max-width: 680px;
    min-height: 560px;
    background: var(--card);
    border: 4px solid var(--gold-dark);
    border-radius: 28px;
    padding: 45px 38px;
    text-align: center;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card h2 {
    font-size: 36px;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 1px;
}

#nextPrayer {
    margin-top: 35px;
    font-size: 82px;
    line-height: 1.05;
    font-weight: 700;
    text-transform: uppercase;
}

#nextTime {
    margin-top: 22px;
    font-size: 64px;
    line-height: 1;
    font-weight: 600;
}

.countdown-label {
    margin-top: 42px;
    font-size: 29px;
    font-weight: 400;
}

#countdown {
    margin-top: 12px;
    font-size: 52px;
    line-height: 1;
    font-weight: 700;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

/* ============================================
   PRAYER TABLE
   ============================================ */

.right {
    padding: 38px 42px 38px 10px;
    display: flex;
    align-items: center;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22);
}

thead th {
    background: var(--table-header);
    color: var(--white);
    padding: 22px 16px;
    font-size: 29px;
    font-weight: 600;
}

thead th:first-child {
    border-top-left-radius: 18px;
}

thead th:last-child {
    border-top-right-radius: 18px;
}

tbody td {
    padding: 21px 16px;
    font-size: 28px;
    line-height: 1.15;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-variant-numeric: tabular-nums;
}

tbody tr:last-child td {
    border-bottom: none;
}

.completed-row {
    color: var(--muted);
}

.completed-row td:last-child {
    font-weight: 700;
}

.next-row {
    background: var(--gold);
    color: var(--black);
    font-weight: 700;
}

.next-row td {
    border-bottom-color: rgba(0, 0, 0, 0.15);
}

.upcoming-row {
    color: var(--white);
}

/* ============================================
   FOOTER
   ============================================ */

footer {
    height: 68px;
    flex-shrink: 0;
    background: var(--panel);
    border-top: 2px solid rgba(212, 175, 55, 0.45);
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--gold);
    font-size: 25px;
    font-weight: 500;
}

footer marquee {
    width: 100%;
}

/* ============================================
   FULLSCREEN PRAYER STATES
   ============================================ */

.fullscreen {
    width: 100%;
    height: 100%;
    background: var(--black);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px;
}

.fullscreen-title {
    font-size: 100px;
    line-height: 1;
}

.fullscreen-heading {
    margin-top: 28px;
    font-size: 76px;
    line-height: 1.1;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 1px;
}

.fullscreen-prayer {
    margin-top: 34px;
    font-size: 112px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
}

.fullscreen-message {
    margin-top: 42px;
    font-size: 43px;
    line-height: 1.3;
    font-weight: 500;
}

.fullscreen-small {
    margin-top: 32px;
    font-size: 31px;
    line-height: 1.35;
    color: #d9d9d9;
}

.fullscreen-countdown {
    margin-top: 30px;
    font-size: 132px;
    line-height: 1;
    color: var(--gold);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ============================================
   STATE-SPECIFIC APPEARANCE
   ============================================ */

#adhanScreen .fullscreen {
    background:
        radial-gradient(
            circle at center,
            rgba(20, 86, 66, 0.55) 0%,
            rgba(0, 0, 0, 1) 68%
        );
}

#iqamahScreen .fullscreen {
    background:
        radial-gradient(
            circle at center,
            rgba(28, 114, 88, 0.42) 0%,
            rgba(0, 0, 0, 1) 70%
        );
}

#prayerScreen .fullscreen {
    background: #000;
}

/* ============================================
   SUBTLE ANIMATIONS
   ============================================ */

#adhanScreen.active .fullscreen-title,
#adhanScreen.active .fullscreen-heading,
#adhanScreen.active .fullscreen-prayer,
#adhanScreen.active .fullscreen-message,
#adhanScreen.active .fullscreen-small,
#iqamahScreen.active .fullscreen-heading,
#iqamahScreen.active .fullscreen-prayer,
#iqamahScreen.active .fullscreen-message,
#iqamahScreen.active .fullscreen-countdown,
#prayerScreen.active .fullscreen-title,
#prayerScreen.active .fullscreen-heading,
#prayerScreen.active .fullscreen-small {
    animation: fadeUp 0.65s ease both;
}

#adhanScreen.active .fullscreen-prayer,
#iqamahScreen.active .fullscreen-prayer {
    animation-delay: 0.08s;
}

#adhanScreen.active .fullscreen-message,
#iqamahScreen.active .fullscreen-message {
    animation-delay: 0.14s;
}

#adhanScreen.active .fullscreen-small,
#iqamahScreen.active .fullscreen-countdown {
    animation-delay: 0.2s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   LOWER RESOLUTION FALLBACK
   ============================================ */

@media (max-width: 1500px) {

    .mosque {
        font-size: 37px;
    }

    #clock {
        font-size: 53px;
    }

    #date,
    #hijriDate {
        font-size: 20px;
    }

    .card {
        min-height: 460px;
    }

    #nextPrayer {
        font-size: 64px;
    }

    #nextTime {
        font-size: 50px;
    }

    #countdown {
        font-size: 42px;
    }

    thead th {
        font-size: 24px;
        padding: 16px 12px;
    }

    tbody td {
        font-size: 23px;
        padding: 15px 12px;
    }

    footer {
        font-size: 21px;
    }
}

/* ============================================
   MODERN ANNOUNCEMENT TICKER
   ============================================ */

.ticker {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.ticker-text {
    display: inline-block;
    min-width: max-content;
    white-space: nowrap;
    padding-left: 100%;
    animation: tickerScroll 28s linear infinite;
}

@keyframes tickerScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* Pure black prayer screen when enabled */

#prayerScreen.blank-mode .prayer-message-content {
    display: none;
}

#prayerScreen.blank-mode .fullscreen {
    background: #000;
}

/* ============================================
   POSTER SCREEN
   ============================================ */

.poster-screen {
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.poster-image{

    width:100%;
    height:100%;

    object-fit:contain;

    opacity:0;

    transition:
        opacity .8s ease,
        transform .8s ease;

    transform:scale(.98);

}

.poster-image.loaded{

    opacity:1;

    transform:scale(1);

}

@keyframes posterFadeIn {
    from {
        opacity: 0;
        transform: scale(0.99);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   CARD ANIMATION
   ============================================ */

.card{

    animation:cardAppear .6s ease;

}

@keyframes cardAppear{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ============================================
   NEXT PRAYER PROGRESS BAR
   ============================================ */

.prayer-progress {
    width: 100%;
    height: 16px;
    margin-top: 30px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 213, 79, 0.45);
    border-radius: 999px;
}

.prayer-progress-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        #d4af37,
        #ffd54f
    );
    border-radius: inherit;
    transition: width 1s linear;
}

/* ============================================
   MOSQUE BRANDING
   ============================================ */

.mosque-brand {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

.header-logo {
    width: 82px;
    height: 102px;
    flex-shrink: 0;
    object-fit: contain;
}

.mosque-brand-text {
    min-width: 0;
}

.mosque-name {
    color: var(--gold);
    font-size: 43px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.mosque-tagline {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 21px;
    line-height: 1.2;
    font-weight: 400;
}

.state-logo {
    width: 190px;
    height: 245px;
    object-fit: contain;
    margin-bottom: 12px;
}

/* ============================================
   STARTUP SCREEN
   ============================================ */

.startup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            #145642 0%,
            #08342a 52%,
            #02110d 100%
        );

    color: #ffffff;
    text-align: center;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}

.startup-overlay.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.startup-logo {
    width: 260px;
    height: 335px;
    object-fit: contain;

    animation: startupLogoAppear 0.9s ease both;
}

.startup-name {
    margin-top: 26px;

    color: var(--gold);
    font-size: 52px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 1px;
}

.startup-subtitle {
    margin-top: 14px;

    font-size: 28px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
}

.startup-status {
    margin-top: 42px;

    color: rgba(255, 255, 255, 0.75);
    font-size: 21px;
    letter-spacing: 0.5px;
}

.startup-progress {
    width: 430px;
    height: 9px;
    margin-top: 20px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
}

.startup-progress-bar {
    width: 0;
    height: 100%;

    background: linear-gradient(
        90deg,
        var(--gold-dark),
        var(--gold)
    );

    border-radius: inherit;

    animation: startupLoading 2.6s ease forwards;
}

@keyframes startupLoading {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes startupLogoAppear {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 1500px) {

    .header-logo {
        width: 66px;
        height: 82px;
    }

    .mosque-name {
        font-size: 34px;
    }

    .mosque-tagline {
        font-size: 17px;
    }

    .state-logo {
        width: 150px;
        height: 194px;
    }
}

/* Automatically close startup screen after 3 seconds */

.startup-overlay {
    animation: startupOverlayExit 0.8s ease 3s forwards;
}

@keyframes startupOverlayExit {
    0% {
        opacity: 1;
        visibility: visible;
    }

    99% {
        opacity: 0;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* ============================================
   INFORMATION CARD
   ============================================ */

/* ============================================
   INFORMATION CARD
   ============================================ */

.card-page {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    overflow: hidden;

    padding:
        70px
        90px
        135px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(28, 114, 88, 0.95) 0%,
            rgba(13, 63, 51, 1) 50%,
            rgba(3, 25, 20, 1) 100%
        );
}

/* Decorative geometric shapes */

.card-pattern {
    position: absolute;

    width: 520px;
    height: 520px;

    border:
        2px solid
        rgba(255, 213, 79, 0.11);

    transform: rotate(45deg);

    pointer-events: none;
}

.card-pattern::before,
.card-pattern::after {
    content: "";

    position: absolute;

    inset: 70px;

    border:
        2px solid
        rgba(255, 213, 79, 0.07);
}

.card-pattern::after {
    inset: 145px;
}

.card-pattern-top {
    top: -310px;
    left: -260px;
}

.card-pattern-bottom {
    right: -260px;
    bottom: -310px;
}

/* Main information panel */

.information-card {
    position: relative;
    z-index: 2;

    width: min(
        1450px,
        92vw
    );

    min-height: 660px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    padding:
        55px
        95px
        65px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.085),
            rgba(255, 255, 255, 0.025)
        );

    border:
        1px solid
        rgba(255, 213, 79, 0.38);

    border-radius: 34px;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(4px);
}

.card-icon {
    min-height: 76px;

    font-size: 68px;
    line-height: 1;

    filter:
        drop-shadow(
            0 8px 16px
            rgba(0, 0, 0, 0.25)
        );
}

.card-category {
    margin-top: 20px;

    color: rgba(255, 213, 79, 0.92);

    font-size: 23px;
    line-height: 1.2;

    font-weight: 600;

    letter-spacing: 5px;

    text-transform: uppercase;
}

.card-title {
    margin-top: 24px;

    max-width: 1250px;

    color: var(--gold);

    font-size: 58px;
    line-height: 1.18;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.card-divider {
    width: 150px;
    height: 4px;

    margin-top: 32px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );
}

.card-arabic {
    margin-top: 42px;

    max-width: 1380px;

    color: var(--white);

    font-family:
        "Traditional Arabic",
        "Amiri",
        "Noto Naskh Arabic",
        serif;

    font-size: 70px;
    line-height: 1.65;

    direction: rtl;
}

.card-translation {
    margin-top: 38px;

    max-width: 1280px;

    color: rgba(255, 255, 255, 0.96);

    font-size: 36px;
    line-height: 1.55;

    font-weight: 500;
}

.card-reference {
    margin-top: 38px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        12px
        30px;

    color: var(--gold);

    font-size: 24px;
    line-height: 1.3;

    border:
        1px solid
        rgba(255, 213, 79, 0.52);

    border-radius: 999px;

    background:
        rgba(0, 0, 0, 0.12);
}

/* Branded footer */

.card-footer {
    position: absolute;

    left: 72px;
    right: 72px;
    bottom: 32px;

    z-index: 3;

    display: flex;

    align-items: center;
    justify-content: center;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.13);
}

.card-footer-brand {
    display: flex;

    align-items: center;

    gap: 16px;

    text-align: left;
}

.card-footer-logo {
    width: 44px;
    height: 58px;

    object-fit: contain;
}

.card-footer-name {
    color: var(--gold);

    font-size: 19px;
    line-height: 1.1;

    font-weight: 700;

    letter-spacing: 0.7px;
}

.card-footer-subtitle {
    margin-top: 5px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 14px;
    line-height: 1.2;
}

/* Card entrance animation */

#cardScreen.active .information-card {
    animation:
        informationCardAppear
        0.7s ease
        both;
}

#cardScreen.active .card-icon,
#cardScreen.active .card-category,
#cardScreen.active .card-title,
#cardScreen.active .card-divider,
#cardScreen.active .card-arabic,
#cardScreen.active .card-translation,
#cardScreen.active .card-reference {
    animation:
        informationContentAppear
        0.65s ease
        both;
}

#cardScreen.active .card-title {
    animation-delay: 0.08s;
}

#cardScreen.active .card-arabic,
#cardScreen.active .card-translation {
    animation-delay: 0.15s;
}

#cardScreen.active .card-reference {
    animation-delay: 0.22s;
}

@keyframes informationCardAppear {
    from {
        opacity: 0;

        transform:
            translateY(20px)
            scale(0.985);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes informationContentAppear {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Lower-resolution adjustment */

@media (max-width: 1500px) {

    .card-page {
        padding:
            45px
            65px
            105px;
    }

    .information-card {
        min-height: 500px;

        padding:
            36px
            65px
            45px;
    }

    .card-icon {
        min-height: 55px;
        font-size: 50px;
    }

    .card-category {
        margin-top: 13px;
        font-size: 17px;
    }

    .card-title {
        margin-top: 17px;
        font-size: 43px;
    }

    .card-divider {
        margin-top: 22px;
    }

    .card-arabic {
        margin-top: 28px;
        font-size: 53px;
    }

    .card-translation {
        margin-top: 26px;
        font-size: 28px;
    }

    .card-reference {
        margin-top: 26px;
        font-size: 18px;
    }

    .card-footer {
        bottom: 20px;
    }
}

/* ============================================
   ENHANCED INFORMATION CARDS
   ============================================ */

.card-page {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(28, 114, 88, 0.95) 0%,
            rgba(13, 63, 51, 1) 52%,
            rgba(3, 25, 20, 1) 100%
        );
}

.card-page::before,
.card-page::after {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    border: 2px solid rgba(255, 213, 79, 0.12);
    transform: rotate(45deg);
}

.card-page::before {
    top: -220px;
    left: -220px;
}

.card-page::after {
    right: -220px;
    bottom: -220px;
}

.card-title,
.card-arabic,
.card-translation,
.card-reference {
    position: relative;
    z-index: 2;
}

.card-title {
    text-transform: uppercase;
    letter-spacing: 3px;
}

.card-translation {
    line-height: 1.55;
    font-weight: 500;
}

.card-reference {
    padding: 12px 28px;
    border: 1px solid rgba(255, 213, 79, 0.55);
    border-radius: 999px;
}