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

.og {
  --og-grid: min(440px, calc(100vw - 52px)); /* clears the page frame on phones */
  --og-gap: clamp(6px, 1.4vw, 10px);
  --og-cell: calc((var(--og-grid) - 4 * var(--og-gap)) / 5);
}

/* ---------- Main: grid on the left, word list on the right ---------- */
.og-main { display: grid; grid-template-columns: var(--og-grid) minmax(0, 1fr); gap: 56px; align-items: start; }
.og-clue { margin: 0 0 6px; display: flex; flex-direction: column; gap: 6px; }
.og-clue span { color: var(--og-teal); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.og-clue b { font-size: clamp(34px, 4vw, 48px); line-height: 1.05; font-weight: 500; letter-spacing: -.01em; }
.og-msg.is-good::first-line { font-weight: 500; }

.og-grid-wrap { position: relative; width: var(--og-grid); }
.og-grid { display: grid; grid-template-columns: repeat(5, var(--og-cell)); gap: var(--og-gap); touch-action: none; }
.og-cell {
  width: var(--og-cell); height: var(--og-cell);
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 8px;
  background: #fff; color: var(--og-navy);
  font-size: calc(var(--og-cell) * .44); font-weight: 700; line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
  transition: background-color .08s linear, transform .12s ease-out; /* quick, so the selection keeps up with the finger */
  -webkit-tap-highlight-color: transparent;
}
.og-cell span { pointer-events: none; }
.og-cell:disabled { cursor: default; }
@media (hover: hover) { .og-grid:not(.is-dragging) .og-cell:not(:disabled):not(.is-trail):hover { background: #eefafb; } } /* no hover colour while dragging */
.og-cell.is-trail { background: var(--og-yellow); transform: scale(1.06); }
.og-cell.is-found { background: var(--c); color: var(--og-navy); box-shadow: none; }
.og-cell.is-hint { box-shadow: inset 0 0 0 4px var(--og-yellow); animation: og-hint 1.4s ease-in-out infinite; }
.og-cell.is-wrong { background: var(--og-coral); color: #fff; animation: og-shake .4s ease; }
.og-cell.is-flash { background: var(--f); transform: scale(1.06); animation: og-pop .45s ease calc(var(--k) * 50ms) both; }
/* A letter whose job is done: fades out after the flash and leaves its square empty */
/* used letters: the tile stays as an empty dark square, so you can see what you have done */
.og-cell.is-gone { background: rgba(0, 0, 0, .22); color: transparent; box-shadow: none; transform: none; pointer-events: none; transition: background-color .3s ease .4s, color .25s ease .4s, box-shadow .3s ease .4s; }
.og-noanim .og-cell { transition: none !important; }
/* Solved: the letters come back in their words' colours, in a diagonal wave */
.og-cell.is-back { animation: og-back .5s cubic-bezier(.3, 1.4, .6, 1) calc(var(--w) * 70ms) both; }
@keyframes og-hint { 50% { box-shadow: inset 0 0 0 4px rgba(255,196,82,.35); } }
@keyframes og-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes og-pop { 50% { transform: scale(1.14); } }
@keyframes og-back { from { opacity: 0; transform: scale(.4); } }
@media (prefers-reduced-motion: reduce) { .og-cell { transition: none; } .og-cell.is-hint, .og-cell.is-wrong, .og-cell.is-flash, .og-cell.is-back { animation: none; } }

.og-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.og-lines polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.og-line-trail { stroke: rgba(0,52,73,.32); }

/* ---------- Word list ---------- */
.og-count { margin: 0 0 18px; color: rgba(255,255,255,.72); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.og-count b { color: #fff; }
.og-words { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: og; }
.og-word { display: grid; grid-template-columns: 22px auto; column-gap: 12px; row-gap: 6px; align-items: center; counter-increment: og; }
.og-word::before { content: counter(og); grid-row: 1; color: rgba(255,255,255,.45); font-size: 12px; font-weight: 700; }
.og-slots { display: flex; gap: 4px; flex-wrap: wrap; }
.og-slots span { width: 30px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.3); font-size: 16px; font-weight: 700; text-transform: uppercase; }
.og-word.is-found .og-slots span { border-color: var(--c); background: var(--c); color: var(--og-navy); }
.og-slots span:not(:empty) { border-color: rgba(255,255,255,.7); }
.og-meaning { grid-column: 2; color: rgba(255,255,255,.75); font-size: 14px; line-height: 1.35; font-weight: 300; }
.og-meaning.is-hint { color: var(--og-yellow); font-style: italic; }

@media (max-width: 900px) {
  .og-main { grid-template-columns: 1fr; gap: 36px; justify-items: center; }
  .og-play, .og-side { width: var(--og-grid); }
}
@media (max-width: 640px) {
  .og-slots span { width: 26px; height: 30px; font-size: 14px; }
}
@media (min-width: 1536px) {
  .og { --og-grid: min(500px, 54vh); }
}

/* Wide screens: the word list starts level with the top of the letter grid (the clue and message sit above both) */
@media (min-width: 901px) {
  .og-main { grid-template-rows: auto auto auto 1fr; row-gap: 0; }
  .og-play { display: contents; }
  .og-clue { grid-column: 1; grid-row: 1; }
  .og-msg { grid-column: 1 / -1; grid-row: 2; }
  .og-grid-wrap { grid-column: 1; grid-row: 3; }
  .og-done { grid-column: 1; grid-row: 4; }
  .og-side { grid-column: 2; grid-row: 3 / 5; }
}

/* The message line above the grid (traced letters, found word, hints) has a fixed height, so the grid never moves */
.og-msg, .og-msg.is-trail { height: 44px; min-height: 0; margin: 8px 0 12px; display: flex; align-items: flex-end; overflow: hidden; }