/* The Luck page (/luck and /luck/<Player_Name>; markup in index.html #luckPage, behaviour in luck.js). src/seo.js adds
   this file on Luck addresses only; the Luck bits every page shows (top-bar button, dry calculator link, feed bubbles)
   are at the end of style.css. Colours are style.css's variables and tints of them only, so the light, dark and holiday
   themes all carry over. */

/* ---------- on a Luck address the simulator steps aside ---------- */
html[data-route="luck"] #levelbar,
html[data-route="luck"] main.layout,
html[data-route="luck"] .about,
html[data-route="luck"] #mobileBar { display: none; }
html[data-route="luck"] #luckPage { display: block; }
/* The hidden simulator still loads its last monster: that must not dim this page or block its buttons, and its error
   banner (a monster or prices that will not load) is no news here. */
html[data-route="luck"] body.loading { opacity: 1; pointer-events: auto; }
html[data-route="luck"] #banner { display: none; }
@media (max-width: 860px) {   /* no phone kill bar here, so nothing to keep clear of */
  html[data-route="luck"] body { padding-bottom: 0; }
  html[data-route="luck"] .feed { bottom: 12px; }
}

/* ---------- the page ---------- */
.luck-page { max-width: var(--page-max); margin: 0 auto; padding: 1rem; }
@media (max-width: 860px) { .luck-page { padding: 1rem 16px; } }
.luck-title { margin: 0; font-size: 1.6rem; font-weight: 800; line-height: 1.2; color: var(--accent); }   /* a <p>, or the page's <h1> (src/seo.js) */
.luck-lead { margin: .15rem 0 .8rem; font-size: .95rem; }
.luck-form { display: flex; gap: .4rem; max-width: 26rem; }
.luck-form input { flex: 1; }
.luck-msg { margin: .5rem 0 0; font-size: .88rem; }
.luck-msg.warn { color: var(--heading-sm); }   /* like the dry calculator's lookup line */

/* Luck, from dry to lucky: red, a softer red, plain, a softer green, green (band() in luck.js). */
.luck-page .lk0 { color: var(--bad); }
.luck-page .lk1 { color: color-mix(in srgb, var(--bad) 55%, var(--text)); }
.luck-page .lk2 { color: var(--text); }
.luck-page .lk3 { color: color-mix(in srgb, var(--good) 55%, var(--text)); }
.luck-page .lk4 { color: var(--good); }

/* ---------- result: tiles, sentence, Post ---------- */
.luck-result { margin-top: 1rem; }
.luck-who {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 0 .7rem; padding: .5rem .7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}
.luck-who[hidden] { display: none; }
/* Where the ticks came from, when the name's collection log is synced to RuneProfile or TempleOSRS (drawSync() in
   luck.js): a tick on a shield and one plain line for a complete log; for a partial one, what is left to do, in the
   hint's colour. Under the hint, a muted line for a name with no synced log. */
.luck-sync { margin: 0 0 .6rem; font-size: .88rem; line-height: 1.4; }
.luck-sync .ico { margin-right: .35rem; }
.luck-sync.part { color: var(--heading-sm); }
.luck-nosync { margin: .35rem 0 0; }
/* "Checked 12m ago. You can look this name up again in 48m.", under either line: a line of its own, in the accent
   colour and bold, so a second Check that brings the same copy back is plainly answered (Sean, 2026-10-10). */
.luck-again { display: block; margin-top: .15rem; color: var(--heading-sm); font-weight: 700; }
.luck-again:empty { display: none; }
.luck-nosync.wait { visibility: hidden; }   /* the answer is not in yet: the line's room is kept, so nothing jumps when it shows */
/* Six tiles, one more than the simulator's row (style.css lays five out as 3 + 2 when narrow; those spans are undone
   here). Two a row at 600px and under, where a third of the screen is too little for an item's name; three a row from
   601 to 1439px; one row from 1440px, where the page itself widens (--page-max in style.css) and the column beside the
   board has room for six, the two item tiles taking the extra. Any narrower and the Uniques value wraps. */
.luck-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.luck-stats .stat { grid-column: auto; }
@media (max-width: 600px) { .luck-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .luck-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(2, minmax(0, 1.7fr)); } }
.luck-stats .luck-item { display: flex; align-items: center; gap: .45rem; min-height: 32px; font-size: 1rem; line-height: 1.2; }
.luck-stats .luck-item img { flex: none; max-width: 36px; max-height: 32px; image-rendering: pixelated; }
@media (max-width: 520px) { .luck-stats .luck-item { font-size: .88rem; } }
.luck-line { margin: .7rem 0 0; font-size: 1rem; font-weight: 600; }
#luckHint { color: var(--heading-sm); }
.luck-post { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin-top: .7rem; }
.luck-post[hidden] { display: none; }
.luck-post-msg { font-size: .88rem; font-weight: 600; }
.luck-post-msg.ok { color: var(--good); }
.luck-post-msg.warn { color: var(--heading-sm); }

/* ---------- boss cards ---------- */
.luck-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .8rem; align-items: start; margin-top: 1rem; }
.luck-card { padding: .7rem .8rem .6rem; }
.luck-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .45rem; margin-bottom: .55rem; }
.luck-card-head .ico { margin: 0; }
.luck-boss { font-weight: 700; }
.luck-est { color: var(--muted); font-weight: 700; cursor: help; }
.luck-kc { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.luck-card-score { margin-left: auto; font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.luck-card-score strong { margin-left: .35rem; }
.luck-card .bank { min-height: 0; }
.luck-card-foot { display: flex; gap: .9rem; margin-top: .5rem; font-size: .8rem; }
.luck-foot { margin: .9rem 0 0; }
/* The slots are buttons here: tap one to tick it. Unticked items stay easier to recognise than in the simulator's
   log, since picking them out is the whole job; a ticked one gets a tick as well as its green border. */
.luck-card .slot { appearance: none; width: 100%; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.luck-card .slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.luck-card .slot.missing img { opacity: .5; filter: grayscale(.75); }
.luck-card .slot.got { background: color-mix(in srgb, var(--good) 16%, var(--slot-bg)); }
.luck-card .slot.got::before {
  content: "\2713"; position: absolute; top: 1px; left: 3px; pointer-events: none;
  font: 700 10px/1 Verdana, sans-serif; text-shadow: 1px 1px 0 #000, 0 0 2px #000;
  color: color-mix(in srgb, var(--good) 60%, white);   /* slots stay dark in every theme */
}
@media (hover: hover) { .luck-card .slot.missing:hover img { opacity: .9; filter: none; } }
/* Slots to look at, not to change: a board row's posted ticks, or a complete synced log (locked() in luck.js). The
   class is not "locked": style.css uses that for level-locked buttons, dimmed and badged with a padlock. */
.luck-result.luck-readonly .slot { cursor: default; }
@media (hover: hover) { .luck-result.luck-readonly .slot.missing:hover img { opacity: .5; filter: grayscale(.75); } }

/* ---------- this week's board ---------- */
.luck-board { margin-top: 1rem; }
.luck-board h2 { margin-bottom: .3rem; }
.luck-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.2rem; }
.luck-lists[hidden] { display: none; }
/* Wide screens: the board stands beside the result and stays in view while you tick, one list above the other.
   Narrower: it sits between the name box and the result, top five each, the lists side by side until phone width. */
@media (min-width: 1100px) {
  html[data-route="luck"] #luckPage { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 1.2rem; align-items: start; }
  .luck-page > * { grid-column: 1; }
  .luck-page > .luck-side {
    grid-column: 2; grid-row: 1 / span 7; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto;
    display: grid; gap: .8rem; align-content: start;
  }
  .luck-side .luck-board { margin-top: 0; }
  .luck-board .luck-lists { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1099px) {
  /* The side column dissolves: the board keeps its place in the page's order, the card goes to the end. */
  html[data-route="luck"] #luckPage { display: flex; flex-direction: column; }
  .luck-side { display: contents; }
  .luck-source { order: 1; margin-top: 1.2rem; }
  .luck-source + .luck-source { margin-top: .8rem; }
  .luck-form { width: 100%; }
  .luck-list li:nth-child(n+6) { display: none; }
  .luck-lists { gap: .6rem .8rem; }
}

/* ---------- where the logs come from: the line under the title, and a card each for RuneProfile and TempleOSRS ---------- */
.luck-credit { margin: -.5rem 0 .8rem; font-size: .82rem; }
.luck-credit:empty { display: none; }
.luck-source {
  display: grid; gap: .3rem; justify-items: start; padding: .8rem .9rem; color: var(--text); text-decoration: none;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}
.luck-source:hover, .luck-source:focus-visible { border-color: var(--accent); }
.luck-source-tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--heading-sm); }
.luck-source-name { font-size: 1.15rem; font-weight: 800; color: var(--accent); }
.luck-source-text { font-size: .86rem; line-height: 1.35; color: var(--muted); }
.luck-source-go { margin-top: .3rem; }
@media (max-width: 600px) { .luck-lists { grid-template-columns: minmax(0, 1fr); } }   /* phones: names need the full width */
.luck-list h3 { margin: .3rem 0 .35rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--heading-sm); }
.luck-list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.luck-row {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; width: 100%;
  padding: .35rem .5rem; border: 0; border-radius: 6px; background: none; color: var(--text);
  font: inherit; font-size: .9rem; text-align: left;
}
.luck-list li:nth-child(odd) .luck-row { background: var(--panel-2); }
/* A row is a button while its posted ticks can be opened, and a plain <div> when they can't (opens() in luck.js). */
button.luck-row { cursor: pointer; }
button.luck-row:hover, button.luck-row:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.luck-rank { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.luck-name { display: flex; align-items: center; gap: .3rem; min-width: 0; font-weight: 700; }
.luck-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.luck-name .ico { margin: 0; }
.luck-score { font-weight: 800; font-variant-numeric: tabular-nums; }
.luck-odds { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.luck-empty, .luck-last { margin: .6rem 0 0; }