/* Orðheimar "Samhengi": the play area. Shared parts (bar, dialogs, buttons) are in ../daily.css. */

.sh-main { width: min(620px, 100%); margin: 0 auto; }
.og.sh { width: min(620px, 100%); } /* the top bar lines up with the guess field */

.sh-form { display: flex; gap: 8px; }
.sh-input { flex: 1; min-width: 0; height: 56px; padding: 0 18px; border: 2px solid transparent; border-radius: 0; background: #fff; color: var(--og-navy); font: inherit; font-size: 20px; font-weight: 500; }
.sh-input::placeholder { color: rgba(0,52,73,.4); font-weight: 400; }
.sh-input:focus { outline: none; border-color: var(--og-teal); }
.sh-go { height: 56px; padding: 0 24px; border: 0; background: var(--og-teal); color: var(--og-navy); font-size: 1rem; font-weight: 700; cursor: pointer; transition: background-color .2s; }
.sh-go:hover { background: #7ce1e6; }

.sh-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.sh-count { margin: 0; color: rgba(255,255,255,.72); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.sh-count b { margin-left: 6px; color: #fff; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
/* Time, moved here from the top bar: same look as the guess count, right next to it */
.sh-status .og-time { margin: 0 auto 0 28px; gap: 6px; color: rgba(255,255,255,.72); font-size: .82rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.sh-status .og-time b { color: #fff; font-size: 1.05rem; letter-spacing: .04em; }
.sh-count { margin-right: 0; }
.sh-actions { display: flex; align-items: center; gap: 18px; }
/* Hint: a text link like "Gefast upp", not a box */
.sh-actions .og-hint { height: auto; padding: 0; background: none; color: var(--og-teal); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.sh-actions .og-hint span { text-decoration: none; display: inline-block; }
.sh-actions .og-hint:hover { background: none; color: #7ce1e6; }
.sh-actions .og-hint:disabled { background: none; color: rgba(255,255,255,.35); }
.sh-giveup { color: rgba(255,255,255,.65); font-weight: 500; }

/* Guesses: the word, a bar showing how close it is, and its rank */
.sh-list, .sh-closest { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sh-last { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.14); }
.sh-row {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 46px; padding: 0 16px 4px; overflow: hidden;
  background: rgba(255,255,255,.08); color: #fff; font-size: 17px; font-weight: 500;
}
/* How close: a coloured strip along the bottom, full width at no. 1 */
.sh-row::before { content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: var(--p); background: var(--bar); transition: width .5s ease; }
.sh-row::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bar); }
.sh-row.is-near { --bar: #00d984; }
.sh-row.is-warm { --bar: #ffc452; }
.sh-row.is-far { --bar: #ff734d; }
.sh-rank { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bar); }
.sh-row.is-hint .sh-word { font-style: italic; }
.sh-row.is-last { outline: 2px solid #fff; outline-offset: 2px; }
.sh-empty { margin: 8px 0 0; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.5; }
.sh-loading { margin: 18px 0 0; color: rgba(255,255,255,.7); font-size: 15px; }
.og.is-loading .sh-form, .og.is-loading .sh-status { opacity: .5; pointer-events: none; }

/* Solved (or given up): the answer and its old words */
.sh-done { margin: 0 0 24px; padding: 22px 22px 18px; background: rgba(255,255,255,.07); }
.sh-answer { margin: 0 0 14px; font-size: 18px; }
.sh-answer b { color: var(--og-teal); font-size: 26px; font-weight: 700; margin-left: 6px; }
.sh-old-title { margin: 0 0 8px; color: var(--og-yellow); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sh-old ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.sh-old li { display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 14px; align-items: baseline; font-size: 15px; }
.sh-old li b { font-size: 18px; }
.sh-old li span { color: rgba(255,255,255,.75); font-weight: 300; }
.sh-closest { margin-top: 18px; }
.og.is-done .sh-done { order: -1; }
.sh-main { display: flex; flex-direction: column; }
.sh-main > .sh-done { order: 0; }

@media (max-width: 640px) {
  .sh-input, .sh-go { height: 52px; }
  .sh-input { font-size: 18px; padding: 0 14px; }
  .sh-go { padding: 0 16px; }
  .sh-row { height: 40px; font-size: 16px; padding: 0 12px; }
}

/* Data credits (required by the licences), under the game */
.sh-credits { width: min(620px, 100%); margin: 40px auto 0; color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.5; text-align: center; }
.sh-credits a { color: rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 1536px) { .sh-credits { grid-column: 2; grid-row: 4; } }