/* Trevo on top of tokens.css. The mark is indigo, like ink. The tiles keep to
   the warm palette and differ in lightness as well as hue: dark green with
   white letters, light ochre with dark letters, a pale or sunken gray for the
   misses. High contrast swaps in orange and blue and adds a mark to each. */
:root {
  --highlight: #2e4a7d; --on-highlight: #fff;
  --correct: #3d7a4a; --on-correct: #fff;
  --present: #d4a44c; --on-present: #1c1914;
  --absent: #e6e1da; --on-absent: #6b6b6b;
  --tile-line: #bbb; --key: #ece8e2; --on-key: #111;
}
@media (prefers-color-scheme: dark) {
  :root {
    --highlight: #9db4dc; --on-highlight: #111a2b;
    --correct: #4f8a5a; --on-correct: #fff;
    --present: #c99a45; --on-present: #1c1914;
    --absent: #3a352e; --on-absent: #aaa;
    --tile-line: #555; --key: #4a443c; --on-key: #e8e8e8;
  }
}
body.hc { --correct: #e07a2e; --on-correct: #1c1914; --present: #2f6db3; --on-present: #fff; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.puzzle { margin: 0; }

/* Board: six rows of five, sized so header, board and keyboard fit one phone
   screen; the message floats over the top of it */
.play { position: relative; }
.board { display: grid; gap: 6px; width: max(13rem, min(100%, 23rem, calc((100svh - 20.5rem) * .86))); margin: .2rem auto 0; container-type: inline-size; }
.row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tile { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--rule-row);
        border-radius: 3px; font: 700 max(1.3rem, 9.5cqi)/1 var(--sans); color: var(--head); text-transform: uppercase; user-select: none; -webkit-user-select: none; }
.tile.filled { border-color: var(--tile-line); }
.tile.correct { background: var(--correct); color: var(--on-correct); border-color: var(--correct); }
.tile.present { background: var(--present); color: var(--on-present); border-color: var(--present); }
.tile.absent { background: var(--absent); color: var(--on-absent); border-color: var(--absent); }
.row.spent .tile { border-style: dotted; opacity: .45; }

/* High contrast: a filled corner for the right place, an open one for the
   right letter, so color is never the only sign */
body.hc .tile.correct::after, body.hc .tile.present::after, body.hc .key.correct::after, body.hc .key.present::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; border: 1.5px solid currentColor; }
body.hc .tile.correct::after, body.hc .key.correct::after { background: currentColor; }

.msg { position: absolute; top: .4rem; left: 50%; transform: translateX(-50%); z-index: 1; margin: 0; max-width: 100%;
       font: 700 .8125em/1.6 var(--sans); text-transform: uppercase; letter-spacing: 1px; text-align: center;
       background: var(--head); color: var(--bg); border-radius: 4px; padding: .35em .8em; }
.msg:empty { display: none; }
.hint-shown { text-align: center; font-style: italic; margin: 0 0 .5rem; }

/* Keyboard: ten keys across, Ñ at the end of the middle row */
.keyboard { display: grid; gap: 6px; margin: .7rem 0 0; }
.krow { display: flex; gap: 5px; justify-content: center; }
.key { position: relative; flex: 1 1 0; min-width: 0; max-width: 3rem; min-height: 50px; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
       background: var(--key); color: var(--on-key); font: 700 1em var(--sans); text-transform: uppercase; touch-action: manipulation; }
.key.wide { flex: 1.6 1 0; max-width: 4.8rem; font-size: .6875em; letter-spacing: .5px; }
.key[data-key="back"] { font-size: 1.15em; }
.key.correct { background: var(--correct); color: var(--on-correct); }
.key.present { background: var(--present); color: var(--on-present); }
.key.absent { opacity: .35; }
.key:active { filter: brightness(.9); }

.hint-row { text-align: center; margin: .9rem 0 0; }
.link { background: none; border: 0; padding: .6em 0; min-height: 44px; cursor: pointer; color: var(--head);
        font: inherit; text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }

/* The reveal */
.reveal { margin: .6rem 0 0; padding-top: .6rem; border-top: 1px dotted var(--rule); }
.reveal > .small:first-child { margin: 0; }
.answer { font: 700 2em/1.2 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--head); margin: .1rem 0 0; outline: none; }
.in-langs { margin: .1rem 0 .6rem; font-style: italic; }
.sense { padding: .5rem 0; border-top: 1px dotted var(--rule-row); }
.sense > .small { margin: 0 0 .2rem; }
.lang { display: inline-block; font: 700 .75rem/1.4 var(--sans); letter-spacing: 1px; color: var(--head); border: 1px solid currentColor; border-radius: 3px; padding: 0 .3em; font-style: normal; }
.def { font-style: italic; margin: 0 0 .3rem; }
.gloss { display: grid; grid-template-columns: 2.2em 1fr; gap: .1rem .5rem; margin: 0; }
.gloss dt { font: 700 .75em/2.1 var(--sans); letter-spacing: 1px; color: var(--muted); }
.gloss dd { margin: 0; }
.share-row { margin: .9rem 0 .3rem; display: flex; align-items: center; gap: .8rem; }
.share-text { font: .9375em/1.35 var(--sans); white-space: pre-wrap; margin: .4rem 0 .6rem; padding: .5rem .7rem; background: var(--field); border: 1px dotted var(--rule-row); border-radius: 4px; user-select: all; -webkit-user-select: all; }
.next { margin: .4rem 0 0; }
#countdown { font-style: normal; font-variant-numeric: tabular-nums; color: var(--head); }

/* How to play */
.example { margin: 1rem 0; }
.example .row { width: min(100%, 14rem); }
.example .row { container-type: inline-size; }
.example p { margin: .4rem 0 0; }

/* Stats */
.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: .6rem 0; text-align: center; }
.nums.three { grid-template-columns: repeat(3, 1fr); }
.num { display: flex; flex-direction: column; align-items: center; }
.num-v { font: 700 1.6em/1.2 var(--sans); color: var(--head); }
.bars { display: grid; gap: 4px; }
.bar-row { display: grid; grid-template-columns: 1.2em 1fr; align-items: center; gap: .5rem; font: 700 .8125em var(--sans); }
.bar { display: block; min-width: 1.8em; padding: .1em .45em; text-align: right; background: var(--absent); color: var(--on-absent); border-radius: 2px; }
.bar.today { background: var(--correct); color: var(--on-correct); }
.w0 { width: 0; } .w1 { width: 5%; } .w2 { width: 10%; } .w3 { width: 15%; } .w4 { width: 20%; } .w5 { width: 25%; } .w6 { width: 30%; }
.w7 { width: 35%; } .w8 { width: 40%; } .w9 { width: 45%; } .w10 { width: 50%; } .w11 { width: 55%; } .w12 { width: 60%; } .w13 { width: 65%; }
.w14 { width: 70%; } .w15 { width: 75%; } .w16 { width: 80%; } .w17 { width: 85%; } .w18 { width: 90%; } .w19 { width: 95%; } .w20 { width: 100%; }
.backup { margin-top: 1.6rem; }
.backup summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.backup textarea { width: 100%; font: .8125em/1.4 ui-monospace, Menlo, monospace; background: var(--field); color: var(--text); border: 1px dotted var(--rule); border-radius: 4px; padding: .5rem; }

/* Settings */
.seg button:disabled { opacity: .45; cursor: default; }
.credits { padding-left: 1.1rem; }
.credits li { margin: .2rem 0; }

/* Motion: a flip as each guess is marked, a shake for a word that isn't one */
@media (prefers-reduced-motion: no-preference) {
  .row.flip .tile { animation: flip .35s ease-in-out backwards; }
  .row.flip .tile:nth-child(2) { animation-delay: .15s; }
  .row.flip .tile:nth-child(3) { animation-delay: .3s; }
  .row.flip .tile:nth-child(4) { animation-delay: .45s; }
  .row.flip .tile:nth-child(5) { animation-delay: .6s; }
  .row.shake { animation: shake .35s; }
}
@keyframes flip {
  0%, 49.9% { background: var(--bg); color: var(--head); border-color: var(--tile-line); }
  0% { transform: rotateX(0); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

@media (max-height: 640px) { .key { min-height: 46px; } }