/* Calm Wordle. All sizes are in rem so the text-size setting and browser zoom (to 200% and beyond) scale everything. */
:root {
  --scale: 1;
  --tile: clamp(3rem, 14vw, 4.75rem);
  --gap: 0.4rem;
}
html { font-size: calc(125% * var(--scale)); }
html[data-size="150"] { --scale: 1.5; }
html[data-size="200"] { --scale: 2; }

/* ---------- palettes: each state keeps its own fill, border style, symbol and label ---------- */
html[data-palette="standard"] {
  --bg: #FAF8F5; --ink: #1F1A17; --panel: #FFFFFF; --edge: #5F5F5F;
  --accent: #003B5C; --accent-ink: #FFFFFF; --dis-bg: #E2DDD6; --dis-ink: #4A4A4A;
  --focus: #7A00CC; --focus2: #FFFFFF;
  --c-bg: #003B5C; --c-ink: #FFFFFF; --c-edge: #001B2B;
  --p-bg: #FFD166; --p-ink: #1F1A17; --p-edge: #6B4200;
  --a-bg: #767676; --a-ink: #FFFFFF; --a-edge: #222222;
  --stripe: rgba(0, 0, 0, 0.22);
  --err-bg: #FDECEC; --err-edge: #9B1C1C; --note-bg: #EAF3F8; --note-edge: #003B5C;
  --bot-bg: #E0F4F1; --bot-edge: #00706B; --bot-line: #00504C; --bot-head: #7FD8CE; --bot-ear: #FFC857; --bot-ball: #FF8FA3;
  --bot-face: #FFFFFF; --bot-eye: #00504C; --bot-shine: #FFFFFF; --bot-cheek: #FFB3C1;
  --you-bg: #FFF1D6; --you-edge: #8A5A00; --you-bg-av: #FFD98A; --you-fig: #8A5A00;
}
html[data-palette="contrast"] {
  --bg: #000000; --ink: #FFFFFF; --panel: #000000; --edge: #FFFFFF;
  --accent: #FFFF00; --accent-ink: #000000; --dis-bg: #333333; --dis-ink: #D0D0D0;
  --focus: #00FFFF; --focus2: #000000;
  --c-bg: #FFFF00; --c-ink: #000000; --c-edge: #FFFFFF;
  --p-bg: #000000; --p-ink: #FFFF00; --p-edge: #FFFF00;
  --a-bg: #595959; --a-ink: #FFFFFF; --a-edge: #CCCCCC;
  --stripe: rgba(0, 0, 0, 0.22);
  --err-bg: #000000; --err-edge: #FF9E9E; --note-bg: #000000; --note-edge: #FFFF00;
  --bot-bg: #000000; --bot-edge: #FFFF00; --bot-line: #FFFFFF; --bot-head: #FFFF00; --bot-ear: #FFFFFF; --bot-ball: #FFFFFF;
  --bot-face: #000000; --bot-eye: #FFFF00; --bot-shine: #000000; --bot-cheek: #FFFFFF;
  --you-bg: #000000; --you-edge: #FFFFFF; --you-bg-av: #FFFFFF; --you-fig: #000000;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Calibri, "Segoe UI", Arial, sans-serif; line-height: 1.45; }
h1 { margin: 0; font-family: Cambria, Georgia, serif; font-size: 2rem; }
h2 { margin: 0 0 0.5rem; font-size: 1.3rem; }
.small, small { font-size: 0.85rem; }
p { margin: 0.4rem 0; }

.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 0.6rem 1rem; z-index: 10; }
.skip:focus { left: 0.5rem; top: 0.5rem; }

.top { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 0.2rem solid var(--edge); }
.tagline { margin: 0.2rem 0 0; }
.toolbar, .btnrow, .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

main { display: grid; gap: 1.25rem; padding: 1.25rem; max-width: 80rem; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr)); align-items: start; }
.panel { background: var(--panel); border: 0.15rem solid var(--edge); border-radius: 0.6rem; padding: 1rem; margin-bottom: 1rem; }
footer { padding: 1rem 1.25rem 2rem; text-align: center; }

/* ---------- controls (every target is at least 3rem, about 60px at default size) ---------- */
button, .btnlink, input[type="text"] {
  font: inherit; font-size: 1rem; min-height: 3rem; min-width: 3rem; border-radius: 0.6rem;
}
button, .btnlink { padding: 0.5rem 1.1rem; border: 0.15rem solid var(--accent); background: var(--accent); color: var(--accent-ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
button.quiet { background: transparent; color: var(--ink); border-color: var(--edge); }
.btnlink { background: transparent; color: var(--ink); border-color: var(--edge); }
button:disabled { background: var(--dis-bg); color: var(--dis-ink); border-style: dashed; border-color: var(--dis-ink); cursor: not-allowed; }
:focus-visible { outline: 0.25rem solid var(--focus); outline-offset: 0.15rem; box-shadow: 0 0 0 0.45rem var(--focus2); }
.opt { display: flex; align-items: center; gap: 0.6rem; min-height: 3rem; }
.opt input { width: 1.5rem; height: 1.5rem; flex: none; }
fieldset { border: 0.1rem solid var(--edge); border-radius: 0.5rem; margin: 0 0 0.75rem; padding: 0.4rem 0.8rem; }
legend { font-weight: bold; padding: 0 0.3rem; }
ul.plainlist, ul.legend { list-style: none; padding: 0; margin: 0; }
ul.plainlist li { margin: 0.4rem 0; }

.progress { font-weight: bold; font-size: 1.1rem; }

/* ---------- board ---------- */
.board { display: flex; flex-direction: column; gap: var(--gap); align-items: center; margin: 0.5rem 0 1rem; }
.row { display: flex; gap: var(--gap); }
.tile {
  position: relative; width: var(--tile); min-height: max(4.6rem, var(--tile)); padding: 0.1rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
  background: var(--panel); color: var(--ink); border: 0.2rem solid var(--edge); border-radius: 0.4rem;
  font-weight: bold; overflow: hidden;
}
.tile .letter { font-size: 1.8rem; line-height: 1; margin-top: 0.45rem; }
.mark { position: absolute; top: 0.05rem; right: 0.25rem; font-size: 0.95rem; line-height: 1; }
.lbl { font-size: 0.62rem; line-height: 1.05; text-align: center; font-weight: bold; }
.tile.typing { border-color: var(--ink); border-width: 0.3rem; }
.tile.pop { animation: pop 0.3s ease-out; }
@keyframes pop { from { transform: scale(0.85); } to { transform: scale(1); } }

.state-correct { background: var(--c-bg); color: var(--c-ink); border: 0.3rem solid var(--c-edge); }
.state-present { background: var(--p-bg); color: var(--p-ink); border: 0.3rem dashed var(--p-edge); }
.state-absent  { background: var(--a-bg); color: var(--a-ink); border: 0.25rem dotted var(--a-edge);
  background-image: repeating-linear-gradient(135deg, var(--stripe) 0 0.35rem, transparent 0.35rem 0.7rem); }
button.tile { cursor: pointer; }

/* ---------- guess form ---------- */
.guessform label { font-weight: bold; font-size: 1.15rem; }
.guessrow { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.3rem 0; }
#guess { flex: 1 1 10rem; padding: 0.4rem 0.8rem; font-size: 1.6rem; letter-spacing: 0.2rem; text-transform: uppercase;
  background: var(--panel); color: var(--ink); border: 0.2rem solid var(--ink); }

.notice { margin: 0.75rem 0; padding: 0.75rem 1rem; font-size: 1.15rem; background: var(--note-bg); border-left: 0.5rem solid var(--note-edge); border-radius: 0.3rem; }
.notice.error { background: var(--err-bg); border-left-color: var(--err-edge); font-weight: bold; }
.notice:empty { display: none; }
.endbox { margin: 0.75rem 0; padding: 1rem; border: 0.25rem double var(--edge); border-radius: 0.6rem; font-size: 1.2rem; }
.endbox[hidden] { display: none; }
.why { min-height: 2.5rem; font-size: 1.1rem; }
.convo { list-style: none; padding: 0; margin: 0.75rem 0 0; max-height: 20rem; overflow-y: auto; font-size: 0.95rem; }
.msg { display: flex; align-items: flex-end; gap: 0.5rem; margin: 0.6rem 0; }
.msg.you { flex-direction: row-reverse; }
.avatar { flex: none; width: 2.75rem; height: 2.75rem; }
.avatar svg { width: 100%; height: 100%; display: block; }
.bubble { max-width: 82%; padding: 0.45rem 0.8rem; border: 0.15rem solid; }
.bubble .who { display: block; font-size: 0.8rem; font-weight: bold; }
.msg.bot .bubble { background: var(--bot-bg); border-color: var(--bot-edge); border-style: solid; border-radius: 0.3rem 1rem 1rem 1rem; }
.msg.you .bubble { background: var(--you-bg); border-color: var(--you-edge); border-style: dashed; border-radius: 1rem 0.3rem 1rem 1rem; text-align: right; }

.b-line { stroke: var(--bot-line); stroke-width: 2.5; stroke-linecap: round; }
.b-ball { fill: var(--bot-ball); stroke: var(--bot-line); stroke-width: 1.5; }
.b-ear { fill: var(--bot-ear); stroke: var(--bot-line); stroke-width: 2; }
.b-head { fill: var(--bot-head); stroke: var(--bot-line); stroke-width: 2.5; }
.b-face { fill: var(--bot-face); stroke: var(--bot-line); stroke-width: 1.5; }
.b-eye { fill: var(--bot-eye); }
.b-shine { fill: var(--bot-shine); }
.b-cheek { fill: var(--bot-cheek); }
.b-smile { fill: none; stroke: var(--bot-eye); stroke-width: 2.5; stroke-linecap: round; }
.u-bg { fill: var(--you-bg-av); stroke: var(--you-edge); stroke-width: 2; }
.u-fig { fill: var(--you-fig); }
button[aria-pressed="true"] { background: var(--c-bg); color: var(--c-ink); border: 0.3rem double var(--c-edge); }

/* ---------- on-screen keyboard: same states and cues as the tiles ---------- */
.keyboard { display: flex; flex-direction: column; gap: var(--gap); align-items: center; margin: 1rem 0; }
.keyrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; }
.key { position: relative; min-width: 2.75rem; min-height: 3rem; padding: 0.1rem; font-size: 1.2rem; font-weight: bold;
  background: var(--panel); color: var(--ink); border: 0.2rem solid var(--edge); }
.key .mark { font-size: 0.7rem; top: 0.05rem; right: 0.15rem; }
.key.state-correct { border: 0.25rem solid var(--c-edge); }
.key.state-present { border: 0.25rem dashed var(--p-edge); }
.key.state-absent  { border: 0.2rem dotted var(--a-edge); background-image: repeating-linear-gradient(135deg, var(--stripe) 0 0.35rem, transparent 0.35rem 0.7rem); }

/* ---------- legend ---------- */
.legend li { display: flex; gap: 0.8rem; align-items: center; margin: 0.6rem 0; }
.legend .tile { flex: none; width: 3.75rem; min-height: 4.4rem; }
.wordlist { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; list-style: none; padding: 0; margin: 0; font-weight: bold; letter-spacing: 0.1rem; }

/* ---------- dialogs ---------- */
dialog { background: var(--panel); color: var(--ink); border: 0.25rem solid var(--edge); border-radius: 0.8rem; max-width: min(40rem, 94vw); max-height: 90vh; overflow: auto; padding: 1.25rem; }
dialog::backdrop { background: rgba(0, 0, 0, 0.65); }
dialog li { margin: 0.4rem 0; }

/* ---------- phones: keep the full QWERTY rows on one line and a shorter board ---------- */
@media (max-width: 600px) {
  :root { --tile: clamp(2.6rem, 15vw, 3.6rem); --gap: 0.3rem; }
  main { padding: 0.75rem; gap: 0.75rem; }
  .top { padding: 0.75rem; }
  h1 { font-size: 1.6rem; }
  .tile { min-height: max(3.8rem, var(--tile)); }
  .tile .letter { font-size: 1.5rem; margin-top: 0.3rem; }
  .lbl { font-size: 0.55rem; }
  .keyboard { width: 100%; }
  .keyrow { flex-wrap: nowrap; width: 100%; gap: 0.2rem; }
  .key { flex: 1 1 0; min-width: 0; min-height: 3.25rem; padding: 0; font-size: min(1.2rem, 5vw); }
  .key .mark { font-size: 0.55rem; right: 0.1rem; }
  .actions button { flex: 1 1 100%; }
}

/* ---------- reduced motion ---------- */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }