/* ===========================================================================
   The Daily Challenge row on the website's signed-in home.
   ===========================================================================

   Companion to js/home-daily.js, and the web counterpart of the `.apph-daily`
   block in css/home-app.css. The two are deliberately NOT one rule set, which
   is why the markup they share (js/daily-board.js) takes a class prefix instead
   of hard-coding one:

     * the app's is a CAPTION - no card, a hairline under it, stepped out over
       the layout gutter so it reaches both edges of a phone, printed straight
       on the page directly beneath a board that runs edge to edge;
     * this one is a ROW INSIDE the lobby card, beside the board rather than
       under it, and the lobby's own idiom for a row you can click is a soft
       tinted tile with a transparent border that appears on hover - see
       `.hp-game` in styles.css, which is the only other one on this card.

   Same facts in the same order, two shapes. Borrowing the phone's full-bleed
   hairline here would put a divider across a card whose every other divider is
   inset to the content, and borrowing this tile there would put a rounded box
   immediately under an edge-to-edge board.

   Its own file rather than a block in styles.css for the reason home-app.css
   gives for being one: the home is under active work in more than one place at
   once, and a separate sheet cannot collide with an edit to that one. Nothing
   here depends on the panel's padding, so it needs no per-breakpoint copy of
   it either.

   THE GATE. `body.signed-in`, not in a game, not in the analyzer: exactly what
   `.home-panel` itself is drawn behind in styles.css, so the row can never
   outlive the card it sits in. And `:not(.has-tabbar)` keeps it off the app,
   where tabbar.js sets that class and the caption above is the right drawing.
   Spelled on the rules that position the row; the rules that only colour its
   insides ride on the `hp-daily-` prefix, which nothing else draws.
   ======================================================================== */

body.signed-in:not(.has-tabbar):not(.in-game):not(.review-mode) .hp-daily {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: var(--radius-sm);
  /* A shade above `.hp-game`'s .03: this row is the caption for the largest
     thing on the screen, and the recent-games tiles are a list under a heading.
     Still far below the filled green Play now directly beneath it - that is the
     card's one loud offer and these must not read as the same one. */
  background: rgba(255, 255, 255, .05);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--color-text-primary);
  transition: var(--transition-fast);
}
body.signed-in:not(.has-tabbar):not(.in-game):not(.review-mode) a.hp-daily:hover {
  background: rgba(255, 255, 255, .09);
  border-color: var(--color-border);
}

/* The state badge. Open is the gold star the puzzles UI already uses for a
   daily; played is a tick or a cross, because which one you got is the fact
   worth carrying back to this screen. Sized to `.hp-game-res`, the only other
   badge on this card. */
.hp-daily-mark {
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  font-size: 13px; font-weight: 800; line-height: 1;
}
.hp-daily-mark.is-open { background: rgba(240, 198, 116, .18); color: #f0c674; }
.hp-daily-mark.is-won  { background: rgba(90, 158, 63, .18); color: #8fd06a; }
.hp-daily-mark.is-lost { background: rgba(214, 90, 74, .16); color: #e08a7c; }

.hp-daily-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.hp-daily-title { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.hp-daily-sub {
  font-size: 11.5px;
  color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The numbers inside the subtitle carry the weight, not the words around them:
   a rating and a streak are what a returning player is scanning for. */
.hp-daily-sub b { color: var(--color-text-primary); font-weight: 800; }

/* Green words, not a green pill. On the phone this is a filled shape because
   the caption has no card edge around it and plain coloured text would read as
   part of the sentence beside it; here the tile already says "press me", and a
   second filled shape inside it directly above the filled Play now is one
   button too many. */
.hp-daily-cta {
  flex: none;
  display: inline-flex; align-items: center; gap: 1px;
  font-size: 12px; font-weight: 800;
  color: #8fd06a;
}
a.hp-daily:hover .hp-daily-cta { color: #a6dd85; }

/* Very narrow phones: the subtitle is the first thing that can go - the badge
   and the title still say what this is, and the row must not wrap to two. */
@media (max-width: 380px) {
  .hp-daily-sub { display: none; }
}

/* =======================================================================
   The invitation, centred on the board
   =======================================================================
   The row above is the daily's label; this is its offer, and it sits on the
   board because the board is what it is offering. It is the signed-in
   counterpart of `.landing-card` - the card the signed-out visitor gets on the
   same square - and it borrows that card's material (near-opaque dark, a
   hairline, a blur behind it) so the two read as the same kind of object rather
   than two different ideas of what floats over a board.

   THE LAYER takes no pointer events; the card takes them back. `.board > div`
   in styles.css makes this child the full square, and a full square that
   swallowed clicks would be an invisible sheet over the board for the whole
   time the home screen is up.

   THE GATE is the row's, plus the board's own states. `:not(.in-game)` and
   `:not(.review-mode)` are what take it off the board the moment a game or the
   analyzer owns it - the element stays in the DOM (the daily is still what the
   board goes back to when the game ends, and keepPainted repaints it), so the
   only thing that may reveal it again is the gate itself. */
.hp-daily-pop-layer { display: none; }
body.signed-in:not(.has-tabbar):not(.in-game):not(.review-mode) .hp-daily-pop-layer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  /* Above the pawns (5), below the wall preview and ghost (15/16) - which only
     exist mid-game, when this is gated off anyway. Same rank the tutorial mask
     takes, and deliberately not the 25/40 the result layer and the seat menus
     use: those numbers are not scoped to the board (see the stacking note in
     styles.css) and nothing on an idle home needs out-ranking. */
  z-index: 6;
  pointer-events: none;
}

body.signed-in:not(.has-tabbar):not(.in-game):not(.review-mode) .hp-daily-pop {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 92%;
  padding: 15px 16px 15px 22px;
  border-radius: var(--radius-lg);
  background: rgba(30, 30, 30, .96);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(8px);
  color: var(--color-text-primary);
  text-decoration: none;
  /* Tracks the board, not the viewport: the square is sized from vh/vw terms
     and can be a good deal smaller than the window on a short screen, where a
     fixed 17px would crowd the card against its own edges. */
  font-size: clamp(13px, calc(var(--board-size, 420px) / 26), 17px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-align: left;
  transition: var(--transition-fast);
  animation: hpDailyPopIn .32s cubic-bezier(.2, .9, .3, 1.2) both;
}
body.signed-in:not(.has-tabbar):not(.in-game):not(.review-mode) a.hp-daily-pop:hover {
  background: rgba(38, 38, 38, .97);
  border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}
body.signed-in:not(.has-tabbar):not(.in-game):not(.review-mode) a.hp-daily-pop:active {
  transform: scale(.98);
}

/* The arrow is the only colour on the card, so it is the thing the eye follows
   to the way in. It steps right on hover because that is the direction it is
   pointing - the whole card is the link, and the arrow is what says so. */
.hp-daily-pop-arrow {
  flex: none;
  width: 1.2em; height: 1.2em;
  color: #8fd06a;
  transition: var(--transition-fast);
}
a.hp-daily-pop:hover .hp-daily-pop-arrow { transform: translateX(3px); }

@keyframes hpDailyPopIn {
  from { opacity: 0; transform: translateY(6px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-daily,
  .hp-daily-pop,
  .hp-daily-pop-arrow { transition: none; }
  /* Still `both`-filled from its end state, so the card is simply there. */
  .hp-daily-pop { animation-duration: .01ms; }
  a.hp-daily-pop:hover { transform: none; }
  a.hp-daily-pop:hover .hp-daily-pop-arrow { transform: none; }
}