/* Fit the whole sidebar to the available window, including browser chrome. */
.sidebar{height:100vh;height:100dvh;min-height:0;overflow-y:auto;scrollbar-width:thin}
.sidebar>*{flex-shrink:0}
.sidebar .side-note{margin:auto 12px 18px;padding-top:24px}
.daily-heading{display:flex;align-items:center;gap:9px;color:#889473;font-size:10px}
.daily-heading .little-sun{font-size:27px;line-height:1.2}
.daily-heading time{display:block;margin-top:3px;font-size:9px;font-variant-numeric:tabular-nums}
.sidebar .side-note p{font-size:18px;line-height:1.7;margin:10px 0 7px;white-space:pre-line}
.sidebar .side-note small{display:block;line-height:1.8}
@media(min-width:901px) and (max-height:800px){
  .sidebar{padding-top:22px;padding-bottom:16px}
  .sidebar .sidebar-label{margin:22px 12px 10px}
  .sidebar .nav-button{padding-top:10px;padding-bottom:10px;margin:3px 0}
  .sidebar .side-note{padding-top:18px;margin-bottom:13px}
}
@media(min-width:901px) and (max-height:650px){
  .sidebar{padding-top:16px;padding-bottom:12px}
  .sidebar .sidebar-label{margin:14px 12px 7px}
  .sidebar .nav-button{padding-top:8px;padding-bottom:8px;margin:2px 0}
  .sidebar .side-note{padding-top:12px;margin-bottom:10px}
  .sidebar .side-note p{font-size:16px;line-height:1.65;margin:7px 0 5px}
  .daily-heading .little-sun{font-size:23px}
}
@media(min-width:901px) and (max-height:560px){
  .sidebar .nav-button small{display:none}
  .sidebar .nav-button{padding-top:4px;padding-bottom:4px}
  .sidebar .nav-button>span{font-size:20px}
  .sidebar .sidebar-label{margin-top:10px}
  .sidebar .side-note{padding-top:8px}
  .sidebar .side-note p{font-size:14px;line-height:1.5}
}
@media(max-width:900px){
  .sidebar{height:auto;overflow:visible}
  .sidebar .side-note{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;margin:14px 0 0;padding:12px 14px;background:#e7eddd;border-radius:12px}
  .daily-heading{grid-row:1 / 3;gap:7px}
  .daily-heading .little-sun{font-size:24px}
  .sidebar .side-note p{font-family:inherit;font-size:12px;line-height:1.6;white-space:normal;margin:0 0 3px}
  .sidebar .side-note small{font-size:10px}
  /* Keep the daily note in the mobile hall; leave the game viewport to play. */
  body:not(:has(#arcadeView:not([hidden]) .arcade-grid)) .sidebar .side-note{display:none}
}
@media(max-width:360px){
  .sidebar .side-note{column-gap:10px;padding:10px}
  .daily-heading .little-sun{display:none}
}