body{margin:0;padding:0;background:#ffe;font-size:14px;font-family:'微软雅黑','宋体',sans-serif;color:#231F20;overflow:auto}
a {color:#000;font-size:14px;}
#main{width:100%;}
#wrap{position:relative;margin:0 auto;width:1100px;height:680px;margin-top:10px;}
#text{width:400px;height:425px;left:60px;top:80px;position:absolute;}
#code{display:none;font-size:16px;}
#right-text{width:300px;height:150px;right:-50px;bottom:20px;position:absolute;text-align:left;}
#right-code{display:none;font-size:16px;}
#clock-box {position:absolute;left:60px;top:550px;font-size:28px;display:none;}
#clock-box a {font-size:28px;text-decoration:none;}
#clock{margin-left:48px;}
#clock .digit {font-size:64px;}
#canvas{margin:0 auto;width:1100px;height:680px;}
#error{margin:0 auto;text-align:center;margin-top:60px;display:none;}
.hand{cursor:pointer;}
.say{margin-left:5px;}
.space{margin-right:150px;}

/* 天气模块样式 */
#weather-widget {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 320px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 1000;
    font-family: '微软雅黑', sans-serif;
}

.weather-header {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #ff4d4f;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.weather-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.weather-item {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 8px;
    border: 1px solid #f0f0f0;
}

.weather-item h3 {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: #333;
    text-align: center;
}

.weather-info {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

.current-weather {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.temperature {
    font-size: 20px;
    font-weight: bold;
    color: #ff4d4f;
}

.weather-desc {
    font-size: 12px;
    color: #666;
}

.weather-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.temp-range {
    font-size: 12px;
    color: #333;
    font-weight: bold;
}

.air-quality {
    font-size: 11px;
    color: #666;
}

.clothing-index {
    font-size: 11px;
    color: #888;
}

.forecast-container {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    border-top: 1px dashed #eee;
    padding-top: 5px;
}

.forecast-day {
    flex: 1;
    text-align: center;
    padding: 0 5px;
}

.forecast-date {
    font-size: 11px;
    color: #666;
    margin-bottom: 2px;
}

.forecast-temp {
    font-size: 11px;
    color: #333;
    font-weight: bold;
    margin-bottom: 2px;
}

.forecast-desc {
    font-size: 10px;
    color: #888;
}

/* iOS/Safari mobile compatibility and responsive layout fixes */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Normalize box-sizing to avoid overflow/misalignment on mobile */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Prevent iOS auto text zooming */
html, body {
  -webkit-text-size-adjust: 100%;
}

/* Respect iPhone notches/safe areas */
@supports(padding: env(safe-area-inset-top)) {
  body {
    padding-top: var(--safe-top);
    padding-right: var(--safe-right);
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
  }
}

/* Tablet and small screen tweaks */
@media (max-width: 768px) {
  #weather-widget {
    right: 8px;
    top: 8px;
    width: calc(100vw - 16px);
    max-width: 420px;
  }
  .weather-header { font-size: 15px; }
  .temperature { font-size: 22px; }
}

/* Phone layout adjustments (iPhone portrait) */
@media (max-width: 480px) {
  /* Make main container and canvas responsive */
  #wrap {
    width: 100vw;
    height: 68vh;
    margin-top: 0;
  }
  #canvas {
    width: 100vw;
    height: 62vh; /* JS reads this height and sets canvas attr accordingly */
  }

  /* Reflow absolute elements into document flow to avoid overlap */
  #text, #right-text, #clock-box {
    position: static;
    width: 100%;
    left: auto; top: auto; right: auto; bottom: auto;
    text-align: left;
    margin: 8px 10px;
  }

  #clock { margin-left: 0; }

  /* Weather card spacing for narrow screens */
  .weather-container { gap: 10px; }
  .current-weather { margin-bottom: 6px; }
  .forecast-container { margin-top: 6px; padding-top: 4px; }
}