/* The daily puzzle. Loads after landing.css, which supplies the palette, nav,
   buttons and footer. */

.gTop{padding:44px 0 8px}
@media(min-width:900px){.gTop{padding:60px 0 10px}}
.gTop h1{font-size:clamp(28px,5vw,44px);margin:0 0 12px}
.gLede{color:var(--text);font-size:16px;line-height:1.65;max-width:620px;margin:0}

.gWrap{display:grid;gap:20px;padding-bottom:36px}
@media(min-width:960px){.gWrap{grid-template-columns:1fr 300px;gap:26px;align-items:start}}

/* ---------- mode tabs ----------
   Tabs rather than two pages. The streak, the stats and the guess box are the
   same furniture in both modes, and a second URL would split the search value
   of this one for nothing. */
.gModes{display:flex;gap:8px;margin:0 0 14px}
.gMode{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left;
  background:#0b1524;border:1px solid var(--line);border-radius:12px;padding:10px 13px;
  color:var(--muted);cursor:pointer;font:inherit;transition:.15s}
.gMode b{font-size:14.5px;color:var(--text)}
.gMode small{font-size:11px;color:var(--dim);line-height:1.3}
.gMode:hover{border-color:rgba(242,204,123,.35)}
.gMode.on{background:rgba(242,204,123,.13);border-color:rgba(242,204,123,.5)}
.gMode.on small{color:var(--muted)}

/* ---------- the art window ----------
   The blurred layer sits inset past the edges of its frame on purpose: a CSS
   blur fades an element's own border out into transparency, and without the
   overhang the picture would carry a soft halo all the way round.

   The crop is set in game.js, not here. It has to stay above the card's name
   plate, because a Riftbound card has its own name printed on it. */
.gArtWrap{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--line);
  background:#0b1524;aspect-ratio:1.7;margin:0 0 10px}
.gArt{position:absolute;inset:-5%;background-repeat:no-repeat;background-position:50% 20%;
  transition:filter .45s ease, background-size .45s ease}
.gArtNote{color:var(--dim);font-size:12.5px;margin:0 0 12px;text-align:center}
@media(prefers-reduced-motion:reduce){.gArt{transition:none}}

/* ---------- art mode guesses ----------
   No columns to compare, so a wrong guess is just a card that was not it.
   The thumbnail earns its place: half of getting better at this is learning
   which cards look like which. */
.gArtList{display:flex;flex-direction:column;gap:6px}
.gArtRow{display:flex;align-items:center;gap:10px;background:#0b1524;
  border:1px solid var(--line);border-radius:10px;padding:6px 10px;
  animation:gFlip .32s ease both}
.gArtRow img{width:26px;height:36px;object-fit:cover;border-radius:4px;flex-shrink:0}
.gArtRow b{flex:1;min-width:0;font-size:13px;line-height:1.25}
.gArtRow .gNo{color:var(--red);font-size:17px;font-weight:900;line-height:1}
@media(prefers-reduced-motion:reduce){.gArtRow{animation:none}}

/* ---------- the clues ----------
   Above the board, because this is what you read before your first guess. The
   size of the field is always there. The initial tile stays visibly locked
   rather than absent, so nobody wonders whether they missed something. */
.gClues{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.gClue{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:4px;
  background:#0b1524;border:1px solid var(--line);border-radius:11px;padding:9px 12px}
.gClue small{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);font-weight:800}
.gClue b{font-size:17px;line-height:1.2;display:flex;align-items:center;gap:7px}
.gClue.got{background:rgba(242,204,123,.12);border-color:rgba(242,204,123,.42)}
.gClue.got b{font-size:22px;letter-spacing:.04em}
.gClue.locked b{font-size:12.5px;font-weight:600;color:var(--dim)}

/* ---------- the board ----------
   Seven columns: the card, then six attributes. The name column is wider
   because a card name is the only cell with real text in it. */
.gGrid{display:grid;grid-template-columns:minmax(96px,1.6fr) repeat(6,minmax(0,1fr));gap:5px}
@media(min-width:700px){.gGrid{gap:7px;grid-template-columns:minmax(150px,1.5fr) repeat(6,minmax(0,1fr))}}
.gBody{margin-top:5px}
.gHeadCell{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  font-weight:800;padding:0 2px 3px;text-align:center}
.gHeadCell.gName{text-align:left}
@media(min-width:700px){.gHeadCell{font-size:11px}}

/* At 375px the six attribute columns come out around 36px each, and "Domain"
   at the desktop header size wants 49px, so four of the six labels ran into
   their neighbours. The header shrinks rather than the card column: a label is
   read once, a clipped card name is read on every row. */
@media(max-width:699px){
  .gHeadCell{font-size:7.5px;letter-spacing:0;padding:0 0 3px}
}

.gRow{display:contents}
.gName{display:flex;align-items:center;gap:7px;min-width:0;background:#0b1524;
  border:1px solid var(--line);border-radius:9px;padding:5px 7px;margin-bottom:5px}
.gName img{width:22px;height:31px;object-fit:cover;border-radius:3px;flex-shrink:0}
.gName b{font-size:11.5px;line-height:1.2;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
@media(min-width:700px){
  .gName{gap:10px;padding:7px 10px}
  .gName img{width:30px;height:42px}
  .gName b{font-size:13.5px}
}

/* A cell earns its colour from the comparison, not from being a guess. Amber
   for "close" is what makes this a puzzle rather than a coin flip. */
.gCell{display:grid;place-items:center;text-align:center;border-radius:9px;
  border:1px solid var(--line);padding:5px 3px;margin-bottom:5px;min-height:44px;
  font-size:10.5px;font-weight:700;line-height:1.25;word-break:break-word;
  animation:gFlip .32s ease both}
@media(min-width:700px){.gCell{font-size:12.5px;padding:8px 6px;min-height:58px}}
.gCell.hit{background:rgba(101,217,166,.17);border-color:rgba(101,217,166,.55);color:#bff0d9}
.gCell.near{background:rgba(242,204,123,.15);border-color:rgba(242,204,123,.5);color:#f4dfae}
.gCell.miss{background:#0b1524;color:var(--muted)}
.gCell .ar{font-style:normal;margin-left:3px;opacity:.9}
.gCell .dots{display:flex;gap:3px;justify-content:center;margin-bottom:3px}
.gCell .dots i{width:7px;height:7px;border-radius:2px;display:block}
.gCell .narrow{display:none}

/* "Spiritforged" cannot fit a 36px column at any readable size, so phones show
   the set code instead. This has to sit after the base rules above rather than
   up with the header override: the selectors have equal specificity, a media
   query adds none, and source order decides. Higher up, the base rule won and
   the short code never appeared. */
@media(max-width:699px){
  .gCell{padding:5px 1px}
  .gCell .wide{display:none}
  .gCell .narrow{display:inline}
}

@keyframes gFlip{from{transform:rotateX(-90deg);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.gCell{animation:none}}

.gLeft{color:var(--dim);font-size:12.5px;font-weight:600;margin:12px 0 0;text-align:center}
.gErr{color:var(--muted);font-size:15px;line-height:1.6;padding:20px;text-align:center;
  border:1px dashed var(--line);border-radius:14px}

/* ---------- guessing ---------- */
.gInputWrap{position:relative;margin-top:14px}
.gInputWrap input{width:100%;background:#091321;border:1px solid var(--line);color:#fff;
  border-radius:13px;padding:13px 16px;outline:none;font-size:15px}
.gInputWrap input:focus{border-color:rgba(242,204,123,.7);box-shadow:0 0 0 3px rgba(242,204,123,.08)}
.gSuggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;
  background:#0d1726;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);max-height:320px;overflow-y:auto}
.gSug{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;border-bottom:1px solid var(--line);padding:9px 12px;color:inherit}
.gSug:last-child{border-bottom:0}
.gSug:hover{background:#16243a}
.gSug img{width:26px;height:36px;object-fit:cover;border-radius:3px;flex-shrink:0}
.gSug b{display:block;font-size:13.5px;line-height:1.25}
.gSug small{display:block;color:var(--dim);font-size:11.5px;margin-top:2px}

/* ---------- the reveal ---------- */
.gResult{margin-top:18px}
.gDone{display:flex;gap:18px;border:1px solid var(--line);border-radius:18px;padding:18px;
  background:linear-gradient(145deg,rgba(17,29,47,.96),rgba(9,18,31,.96))}
.gDone.won{border-color:rgba(101,217,166,.4)}
.gDone.lost{border-color:rgba(255,129,137,.32)}
@media(max-width:620px){.gDone{flex-direction:column;align-items:center;text-align:center}}
.gDoneArt{width:120px;flex-shrink:0}
.gDoneArt img{width:100%;border-radius:10px;display:block;border:1px solid var(--line)}
.gDone h2{margin:6px 0 4px;font-size:23px;line-height:1.2;letter-spacing:-.01em}
.gDoneSub{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.gDoneBtns{display:flex;gap:9px;flex-wrap:wrap}
@media(max-width:620px){.gDoneBtns{justify-content:center}}
.gNext{color:var(--dim);font-size:12.5px;margin:14px 0 0}
.gNext b{color:var(--muted)}

/* ---------- sidebar ---------- */
.gStats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
@media(min-width:960px){.gStats{grid-template-columns:repeat(2,1fr);gap:10px}}
.gStats div{background:#0b1524;border:1px solid var(--line);border-radius:13px;
  padding:11px 8px;text-align:center}
.gStats b{display:block;font-size:21px;line-height:1;letter-spacing:-.02em}
.gStats span{display:block;color:var(--muted);font-size:10.5px;margin-top:5px;font-weight:600}

.gKey{background:#0b1524;border:1px solid var(--line);border-radius:15px;padding:15px 17px;
  margin-bottom:14px}
.gKey h2{margin:0 0 11px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.gKey p{display:flex;align-items:center;gap:9px;margin:0 0 8px;color:var(--muted);
  font-size:13px;line-height:1.45}
.kSq{width:14px;height:14px;border-radius:4px;flex-shrink:0;border:1px solid var(--line)}
.kSq.hit{background:rgba(101,217,166,.35);border-color:rgba(101,217,166,.6)}
.kSq.near{background:rgba(242,204,123,.32);border-color:rgba(242,204,123,.55)}
.kSq.miss{background:#0b1524}
.gKeyNote{color:var(--dim)!important;font-size:12px!important;margin-top:11px!important}

.gPromo{border:1px solid rgba(242,204,123,.3);border-radius:15px;padding:16px 18px;
  background:radial-gradient(circle at 12% 0,rgba(200,140,66,.15) 0,transparent 60%),
  linear-gradient(145deg,rgba(17,29,47,.96),rgba(9,18,31,.96))}
.gPromo p{color:var(--text);font-size:13.5px;line-height:1.6;margin:0 0 13px}
.gPromo b{color:var(--text)}

/* ---------- the prose underneath ----------
   A bare game gives Google nothing to rank, and "riftbound wordle" is a search
   that will exist the moment this is any good. */
.gProse{max-width:760px;padding-bottom:56px}
.gProse h2{font-size:23px;margin:36px 0 12px;letter-spacing:-.01em}
.gProse h3{font-size:17.5px;margin:26px 0 10px;color:var(--text)}
.gProse p,.gProse li{color:var(--text);font-size:15.5px;line-height:1.7}
.gProse p{margin:0 0 15px}
.gProse ul{padding-left:20px;margin:0 0 15px}
.gProse li{margin-bottom:9px}
.gProse a{color:var(--gold)}
/* The FAQ boxes are already styled by landing.css, which supplies the border,
   the padding and the +/- marker. An earlier version restyled them here and
   produced a plus sign on both sides of every question, with the answer text
   pressed against the box edge. Only the type size differs, so only that is
   set. */
.gProse summary{font-size:16px}
.gProse details p{font-size:15px}