@import url('/display/base.css');
@import url('/shared/calendarIcon.css');
@import url('/display/game-chooser.css');
@import url('/shared/settings.css');

/* base.css centers a single fixed screen (built for the display, both html
   and body set to overflow:hidden) — this page is a plain scrollable list
   instead. html must stay at its default `visible` here: an explicit
   overflow on html suppresses the standard propagation of body's scroll to
   the viewport, so body would become its own nested scroll box with its
   own scrollbar carved out of its own width — leaving dead space to the
   right of the centered content instead of a true viewport-edge
   scrollbar. */
/* overflow:visible on html (not auto) makes body's overflow propagate to the
   viewport for a true edge scrollbar instead of a nested one — but that also
   means body's own box stays clipped to one viewport-height (base.css's
   html,body{height:100%}) while the document scrolls past it. Past that
   point you're looking at bare html, so it needs the same background as
   body or the bottom of the page shows html's solid --bg instead of the
   pattern. */
html { overflow: visible; background: var(--bg-gradient); background-attachment: fixed; }
/* background-attachment:fixed, not a plain scroll-attached background: the
   pattern must be anchored to the VIEWPORT's own coordinate frame, the
   same frame .daily-hub-header's background below uses, or the two
   diagonal crosshatches drift out of sync the moment the header (inset by
   .daily-hub's own padding, not flush with body's edge) sits over a
   different patch of the page pattern than its own paint — a visible seam
   right where the sticky header meets the scrolling content. Matches
   levels.css's identical body rule. */
body { overflow: auto; background: var(--bg-gradient); background-attachment: fixed; }
#app { display: block; overflow: visible; justify-content: initial; align-items: initial; }

:root {
  --bg-gradient:
    repeating-linear-gradient(45deg, rgba(100,96,84,.11) 0 1.5px, transparent 1.5px 4.5px),
    repeating-linear-gradient(-45deg, rgba(100,96,84,.11) 0 1.5px, transparent 1.5px 4.5px),
    radial-gradient(ellipse 90% 60% at 30% 0%, rgba(212,175,55,.08), transparent 65%),
    var(--bg);
}

/* Account-synced light/dark theme (public/shared/settings.js), separate from
   base.css's display-skin system (default/paper — left untouched). Kept
   self-contained here rather than in display/base.css so display.js/about.js
   aren't affected. Values mirror phone/base.css's dark palette so signed-in
   dark-mode users see a consistent look across phone and this hub. */
html[data-theme="dark"] {
  --bg: #171512;
  --bg-gradient:
    repeating-linear-gradient(45deg, rgba(200,180,140,.12) 0 1.5px, transparent 1.5px 4.5px),
    repeating-linear-gradient(-45deg, rgba(200,180,140,.12) 0 1.5px, transparent 1.5px 4.5px),
    radial-gradient(ellipse at top, #26221C 0%, #171512 55%, #0D0B09 100%),
    var(--bg);
  --surface: #221F1A;
  --text: #F2F0E8;
  --muted: #A8A398;
  --border: #574F3E;
  --shadow: 0 4px 24px rgba(0,0,0,.4);
  --page-bg: var(--bg);
  --panel-bg: var(--surface);
}

.daily-hub {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 28px 60px;
}

.daily-hub-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Same background-attachment:fixed as body above — required for the two
     patterns to share one coordinate frame and stay pixel-aligned, see the
     comment there. */
  background: var(--bg-gradient);
  background-attachment: fixed;
  padding-top: 8px;
  margin-bottom: 4px;
}

.daily-hub-toprow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-bottom: 10px;
}

.daily-back {
  justify-self: start;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}
.daily-back:hover { color: var(--text); }

.daily-hub-calendar {
  justify-self: center;
  display: flex;
  font-size: 20px;
}

.daily-hub-toprow-end {
  justify-self: end;
  width: 34px;
  height: 34px;
}

.daily-hub-title {
  font-size: 30px;
  font-weight: 800;
  text-align: center;
}
.daily-hub-subtitle {
  color: var(--muted);
  font-size: 15px;
  text-align: center;
  margin-bottom: 28px;
}

.daily-card-grid {
  display: grid;
  /* minmax(0, 1fr), not bare 1fr: a grid track's default min-width is
     "auto" (fit its content), so the Easy/Medium/Hard button row's own
     min-content — driven by flex items that are min-width:auto by default,
     see .daily-card-btn--sm — silently overrode the 1fr split and blew the
     column past its share, pushing the second card off-screen. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.daily-card {
  position: relative;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.daily-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.daily-card-info-btn {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.daily-card-info-btn:hover { background: var(--indigo); color: #241F1A; }

/* Art chip + text row (daily.js). The chip is a fixed square; the text
   column takes the rest and stays min-width:0 so long summaries wrap
   instead of pushing the chip out of the card. */
.daily-card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
}
.daily-card-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Override game-art--thumb's default 76px — that size sits below the art's
   own container-query detail thresholds (100px/70px in gameArt.css), so
   letters and glow layers silently drop out. 114px is gameArt.css's
   smallest fully-detailed size — big enough to render every game's full
   art without going larger than a 2-column card comfortably fits. */
.daily-card-art {
  width: 114px;
  height: 114px;
}

/* Two narrow cards side by side leaves too little width for art + text in a
   row (game-chooser.css) — stack them and center the art chip instead
   whenever the card is narrow. This must line up with the button-row
   breakpoint below (also 600px): at exactly 600px wide, row layout leaves
   ~94px for text next to the 114px art chip, which is the narrowest that
   stays legible — any lower and side-by-side clips down toward single
   digits, so both switches happen together instead of at a separate,
   narrower breakpoint. */
@media (max-width: 600px) {
  .daily-hub {
    padding-left: 14px;
    padding-right: 14px;
  }
  .daily-card-grid {
    gap: 12px;
  }
  .daily-card {
    padding-left: 12px;
    padding-right: 12px;
  }
  .daily-card-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.daily-card-name {
  font-size: 19px;
  font-weight: 800;
}
.daily-card-summary {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  flex: 1;
}

.daily-card-btn {
  display: block;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  background: var(--indigo);
  color: #241F1A;
}
.daily-card-btn:hover { opacity: .88; }
.daily-card-btn.done {
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* Easy/Medium/Hard row (daily.js) — three .daily-card-btn side by side when
   the card is wide enough (short label only: "Medium"). Below 600px (see
   the media query above) this switches to one full-width button per
   difficulty and swaps in the longer "Play — Medium" label
   (.daily-card-btn-long/-short toggle with it) since there's room for it. */
.daily-card-btn-row {
  display: flex;
  gap: 8px;
}
.daily-card-btn--sm {
  flex: 1;
  min-width: 0;
  padding: 8px 4px;
  font-size: 13px;
}
.daily-card-btn-long { display: none; }

/* Shares its 600px breakpoint with the art-stacking query above (a
   separate concern — that one's about art + text width, this one's about
   three buttons fitting in a row) but needs its own block since it targets
   different selectors. Below 600px, go full-width per difficulty instead,
   with room for the longer "Play — Medium" label. Must come after the base
   .daily-card-btn-row rules above — same specificity, so source order
   decides the winner and this needs to win under 600px. */
@media (max-width: 600px) {
  .daily-card-btn-row {
    flex-direction: column;
  }
  .daily-card-btn--sm {
    padding: 10px;
    font-size: 14px;
  }
  .daily-card-btn-long { display: inline; }
  .daily-card-btn-short { display: none; }
}

.daily-empty, .daily-loading {
  color: var(--muted);
  font-size: 15px;
}