html { 
    font-size: 16px; /* Fallback */
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-color: #fff;
    color: #000;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-text-size-adjust: 100%;
}

#app-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Horizontal positioning */
.top-section { height: 12%; position: relative; width: 100%; overflow: hidden; }
.mid-section { height: 58%; position: relative; width: 100%; overflow: hidden; }
.bot-section { height: 30%; position: relative; width: 100%; border-top: 0.1rem solid #000; overflow: hidden; }

/* Centering helper */
.center-content {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    width: 100%;
}

.location {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    font-size: 1.7rem;
    font-weight: bold;
    color: #444;
    cursor: pointer;
    border-bottom: 0.1rem dashed #ccc;
    text-decoration: none;
    display: inline-block;
}

.time {
    font-size: 9rem;
    font-weight: bold;
    letter-spacing: -0.1rem;
    cursor: pointer;
    line-height: 1;
}

.period {
    font-size: 2rem;
    margin-right: 1rem;
    vertical-align: middle;
}

.date-section {
    margin-top: 2rem;
    font-size: 2.5rem;
}

.lunar {
    font-size: 1.8rem;
    margin-top: 1rem;
    color: #444;
}

.festival {
    margin-left: 1.5rem;
    font-weight: bold;
    color: #000;
}

/* Weather layout using floats or inline-block for maximum compatibility */
.weather-container {
    width: 95%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top: 1rem;
}

.weather-card {
    display: inline-block;
    width: 32%;
    vertical-align: top;
    margin-top: 1.5rem;
}

.weather-day { font-size: 1.5rem; font-weight: bold; margin-bottom: 0.8rem; }
.weather-icon { font-size: 3.6rem; height: 3.8rem; line-height: 3.8rem; }
.weather-temp { font-size: 1.8rem; margin: 0.3rem 0; }
.weather-desc { font-size: 1.2rem; }

/* Rotation specific adjustments - still using rem so they scale */
html.rotate-90 .time, 
html.rotate-270 .time {
    font-size: 8rem;
}
html.rotate-90 .top-section, 
html.rotate-270 .top-section { height: 15%; }
html.rotate-90 .mid-section, 
html.rotate-270 .mid-section { height: 50%; }
html.rotate-90 .bot-section, 
html.rotate-270 .bot-section { height: 35%; }

html.rotate-90 .weather-card, 
html.rotate-270 .weather-card {
    margin-top: 1rem;
}
html.rotate-90 .weather-icon, 
html.rotate-270 .weather-icon {
    font-size: 3.2rem;
    height: 3.4rem;
    line-height: 3.4rem;
}
html.rotate-90 .weather-day, 
html.rotate-270 .weather-day {
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}
html.rotate-90 .weather-temp, 
html.rotate-270 .weather-temp {
    font-size: 1.6rem;
}