/* Réglages locaux de l'ambiance, au même niveau que les panneaux Son et Personnage. */
#foreground-controls #weather-panel {
  position:absolute; z-index:22; top:calc(78px + env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right));
  width:min(380px,calc(100vw - 24px)); box-sizing:border-box; max-height:calc(100dvh - 94px - env(safe-area-inset-top)); overflow-y:auto;
  padding:24px; color:#263d31; background:linear-gradient(145deg,#f8f2e3,#e9e4d4);
  border:1px solid #c2b393; border-radius:14px; box-shadow:0 12px 40px #14271c4d; pointer-events:auto;
  font:14px/1.45 'Segoe UI',Arial,sans-serif;
}
#weather-panel[hidden] {display:none!important}
#weather-panel h2 {font:700 25px/1.15 Georgia,serif;margin:4px 28px 19px 0;color:#203e2d}
#weather-panel .weather-eyebrow {font-size:10px;letter-spacing:.14em;font-weight:700;color:#7c6848}
#weather-panel [data-weather-close] {position:absolute;top:12px;right:12px;width:34px;height:34px;min-height:34px;padding:0;border:1px solid #cbbd9f;border-radius:50%;background:#fff9ed;color:#38533e;font:24px/1 Arial,sans-serif;cursor:pointer}
#weather-panel fieldset {padding:0;margin:0;border:0;min-width:0}
#weather-panel legend {padding:0;margin:0 0 9px;font-size:14px;font-weight:700}
#weather-panel .weather-choices {display:grid;grid-template-columns:1fr 1fr;gap:9px}
#weather-panel .weather-choices button {display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:61px;padding:10px;border:1px solid #bcb29b;border-radius:9px;color:#43533e;background:#fffaf0;box-shadow:0 2px 5px #6b5c3912;font:600 13px/1.3 'Segoe UI',Arial,sans-serif;cursor:pointer}
#weather-panel .weather-choices svg {width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
#weather-panel .weather-choices button[aria-pressed="true"],#weather-panel .graphics-choices button[aria-pressed="true"] {border-color:#537443;background:#294e36;color:#fff7dc;box-shadow:inset 0 0 0 1px #65815a}
#weather-panel .weather-choices button:hover,#weather-panel .graphics-choices button:hover {border-color:#537443}
#weather-panel button:focus-visible {outline:3px solid #ad8b45;outline-offset:3px}
#weather-panel #weather-status {min-height:40px;margin:11px 0 17px;font-size:12px;color:#66705d}
#weather-panel .graphics-fieldset {padding-top:17px;border-top:1px solid #cbbf9e}
#weather-panel .graphics-choices {display:grid;gap:7px}
#weather-panel .graphics-choices button {display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid #c6bca5;border-radius:8px;background:#fffaf0;color:#3b503a;text-align:left;cursor:pointer;font:13px/1.3 'Segoe UI',Arial,sans-serif}
#weather-panel .graphics-level {display:flex;gap:3px;align-items:flex-end;width:22px;flex:none;height:18px}
#weather-panel .graphics-level i {display:block;width:5px;background:currentColor;border-radius:1px;opacity:.25}
#weather-panel .graphics-level i:nth-child(1){height:7px;opacity:1}
#weather-panel .graphics-level i:nth-child(2){height:12px}
#weather-panel .graphics-level i:nth-child(3){height:17px}
#weather-panel [data-graphics="balanced"] i:nth-child(2),#weather-panel [data-graphics="high"] i {opacity:1}
#weather-panel .graphics-choices strong {display:block;font-size:13px}
#weather-panel .graphics-choices small {display:block;margin-top:2px;font-size:11px;opacity:.78}
#weather-panel .weather-note {margin:14px 0 0;color:#727361;font-size:11px}
#farm-game-header #weather-toggle[data-weather="rainy"] {color:#c7e1e5}
@media (min-width:981px) and (max-width:1440px) {
 #farm-game-header .farm-bar {gap:14px;padding-inline:20px}
 #farm-game-header .farm-bar-place {padding-inline-start:15px}
 #farm-game-header #visit button {padding-inline:7px;gap:5px;font-size:12px}
 #farm-game-header .farm-bar-brand strong {font-size:19px}
 #farm-game-header #weather-toggle span,#farm-game-header #graphics-toggle span {display:none}
 #farm-game-header #weather-toggle,#farm-game-header #graphics-toggle {min-width:38px}
}
@media(max-width:980px){
 #foreground-controls #weather-panel {top:calc(91px + env(safe-area-inset-top));max-height:calc(100dvh - 104px - env(safe-area-inset-top))}
}
@media(max-height:500px) and (max-width:980px){
 #foreground-controls #weather-panel{top:calc(60px + env(safe-area-inset-top));max-height:calc(100dvh - 69px - env(safe-area-inset-top));padding:18px}
}
@media(prefers-reduced-motion:reduce){#weather-panel *{scroll-behavior:auto!important}}

#weather-panel .season-fieldset{margin:0 0 17px;padding:0 0 17px;border-bottom:1px solid #cbbf9e}
#weather-panel .season-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
#weather-panel .season-choices button{display:flex;align-items:center;gap:9px;justify-content:flex-start;min-height:42px;width:100%;padding:8px 11px;background:#fffaf0;color:#43533e;border:1px solid #c6bca5;border-radius:8px;cursor:pointer;font:600 12px/1.3 'Segoe UI',Arial,sans-serif}
#weather-panel .season-choices svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#weather-panel .season-choices button[aria-pressed="true"]{border-color:#537443;background:#294e36;color:#fff7dc;box-shadow:inset 0 0 0 1px #65815a}
#weather-panel .season-choices button:hover{border-color:#537443}

/* Horloge du panneau météo. Aucun panneau supplémentaire ni largeur fixe débordante. */
#weather-panel .clock-fieldset{margin:0 0 17px;padding:0 0 17px;border-bottom:1px solid #cbbf9e}
#weather-panel .clock-mode-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
#weather-panel .clock-mode-choices button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:39px;padding:7px 8px;border:1px solid #c6bca5;border-radius:8px;background:#fffaf0;color:#43533e;font:600 12px/1.3 'Segoe UI',Arial,sans-serif;cursor:pointer}
#weather-panel .clock-mode-choices svg{width:17px;height:17px;flex:none}
#weather-panel .clock-mode-choices button[aria-pressed="true"],#weather-panel .clock-presets button[aria-pressed="true"]{border-color:#537443;background:#294e36;color:#fff7dc;box-shadow:inset 0 0 0 1px #65815a}
#weather-panel .clock-mode-choices button:hover,#weather-panel .clock-presets button:hover{border-color:#537443}
#weather-panel .clock-current{display:flex;align-items:center;gap:14px;margin:13px 0 10px;padding:11px 14px;border:1px solid #d8cdb5;border-radius:11px;background:#fff9eebf}
#weather-panel .clock-dial{display:block;width:65px;height:65px;flex:none}
#weather-panel .clock-rim{fill:#e2d2ab;stroke:#b49a61;stroke-width:1.3}
#weather-panel .clock-face{fill:#fff9e9;stroke:#d0c29f;stroke-width:1}
#weather-panel .clock-ticks{fill:none;stroke:#8e825f;stroke-width:1.3;stroke-linecap:round}
#weather-panel .clock-hour-hand{stroke:#294e36;stroke-width:3.2;stroke-linecap:round}
#weather-panel .clock-minute-hand{stroke:#8f743f;stroke-width:2;stroke-linecap:round}
#weather-panel .clock-pin{fill:#294e36;stroke:#fff9e9;stroke-width:1}
#weather-panel .clock-current-copy{min-width:0;display:grid;align-content:center}
#weather-panel .clock-current-copy label{color:#7c6a48;font-size:10px;font-weight:600}
#weather-panel #weather-clock-time{display:block;box-sizing:border-box;width:128px;max-width:100%;min-height:36px;padding:2px 4px 2px 0;border:0;border-bottom:1px solid #cbbd9e;border-radius:0;color:#294e36;background:transparent;font:600 25px/1.1 'Segoe UI',Arial,sans-serif;font-variant-numeric:tabular-nums;color-scheme:light}
#weather-panel #weather-clock-time:focus-visible,#weather-panel .clock-range:focus-visible{outline:3px solid #ad8b45;outline-offset:3px}
#weather-panel #weather-clock-period{margin-top:3px;color:#67705e;font-size:11px}
#weather-panel .clock-slider-label{display:block;margin-bottom:3px;color:#526049;font-size:11px;font-weight:600}
#weather-panel .clock-range{display:block;width:100%;height:26px;margin:0;padding:0;accent-color:#3b603c;cursor:ew-resize}
#weather-panel .clock-range-labels{display:flex;justify-content:space-between;margin:-1px 0 9px;color:#7c7966;font:10px/1.3 'Segoe UI',Arial,sans-serif;font-variant-numeric:tabular-nums}
#weather-panel .clock-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
#weather-panel .clock-presets button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:58px;padding:7px 2px;border:1px solid #c6bca5;border-radius:8px;background:#fffaf0;color:#43533e;cursor:pointer;font:600 10.5px/1.2 'Segoe UI',Arial,sans-serif;overflow-wrap:anywhere;text-align:center}
#weather-panel .clock-presets svg{display:block;width:20px;height:20px}
#weather-panel .clock-presets span{min-height:25px;display:flex;align-items:center}
#weather-panel .clock-help{margin:10px 0 0;color:#727361;font-size:10.5px;line-height:1.45}
@media(max-width:350px){#weather-panel .clock-presets{gap:3px}#weather-panel .clock-presets button{font-size:10px}#weather-panel .clock-current{padding-inline:10px;gap:10px}}

#weather-panel .ambience-tabs{display:grid;grid-template-columns:.85fr 1.45fr 1.1fr;gap:4px;padding:4px;margin:0 0 19px;border:1px solid #cfc3a5;border-radius:9px;background:#e6ddc8}
#weather-panel .ambience-tabs button{padding:8px 4px;min-height:38px;border:0;border-radius:6px;color:#5a624c;background:transparent;cursor:pointer;font:600 11px/1.2 'Segoe UI',Arial,sans-serif;white-space:normal}
#weather-panel .ambience-tabs button[aria-selected="true"]{background:#fff8e7;color:#2b4d34;box-shadow:0 1px 5px #5b4b2424}
#weather-panel [data-ambience-view][hidden]{display:none!important}
#weather-panel .clock-fieldset{border:0;padding:0;margin:0}
#weather-panel #ambience-view-graphics .graphics-fieldset{border:0;padding:0}

#weather-panel .clock-mode-choices{grid-template-columns:repeat(3,minmax(0,1fr))}
#weather-panel .clock-mode-choices button{gap:4px;font-size:11px;padding-inline:4px}
#weather-panel .clock-duration-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;color:#66705a;font-size:11px}
#weather-panel .clock-duration-row[hidden]{display:none}
#weather-panel #weather-clock-duration{padding:6px 9px;border:1px solid #bfb498;border-radius:6px;background:#fff9ed;color:#294e36;font:600 12px/1.3 'Segoe UI',Arial,sans-serif}