:root {
  --page: #f7f2e6; --paper: #fffaf0; --ink: #29252e;
  --pink: #ef91b2; --yellow: #f5cb4c; --blue: #86bcde;
  --green: #91b97c; --lilac: #b5a0d8; --dot: var(--pink);
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: system-ui, sans-serif; min-width: 280px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button[hidden] { display: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 8px; border-radius: 4px; }
svg { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.page-note { display: flex; justify-content: space-between; align-items: center; padding: 24px 32px 0; font-size: 12px; letter-spacing: .03em; }
.construction { display: inline-flex; align-items: center; gap: 8px; }
.construction i { width: 9px; height: 10px; background: var(--dot); border: 1.5px solid var(--ink); border-radius: 48% 41% 45% 40%; transform: rotate(-12deg); }
.fine-print { opacity: .7; }
.word-field { position: relative; min-height: 620px; height: calc(100svh - 130px); max-height: 1100px; isolation: isolate; }
.centerpiece { position: absolute; top: 31%; left: 50%; width: 70%; transform: translateX(-50%); text-align: center; pointer-events: none; }
.mis-logo { font: 400 clamp(160px, 20vw, 300px)/.86 'Yuanmo', sans-serif; letter-spacing: -.035em; margin: 0; white-space: nowrap; transform: rotate(-3deg); }
.logo-dot { color: var(--dot); display: inline-block; transform: rotate(9deg); }
.welcome { font: 400 clamp(19px, 2vw, 27px)/1.3 'Yuanmo', sans-serif; margin: 27px 0 18px; }
.reply { max-width: 390px; min-height: 76px; margin: 0 auto; font-size: 14px; line-height: 1.6; text-wrap: balance; }
.reply.has-reply .reply-text { background: var(--reply-color, var(--yellow)); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 3px 7px; box-shadow: 0 1px 0 var(--ink); }
.words { position: absolute; inset: 0; }
.mis-word {
  --c: var(--pink); --angle: 0deg; position: absolute; left: var(--x); top: var(--y);
  padding: 10px 4px; border: 0; background: none;
  font: 400 var(--size, clamp(30px, 3.2vw, 49px))/1.05 'Yuanmo', sans-serif;
  white-space: nowrap; transform: translate(-50%, -50%) rotate(var(--angle)); transition: transform .18s ease;
}
.mis-word span { position: relative; z-index: 0; }
.mis-word span::before { content: ''; position: absolute; z-index: -1; inset: 12% -5% 0; background: var(--c); border-radius: 25% 12% 24% 11%; transform: rotate(-4deg); opacity: .65; }
.mis-word:hover, .mis-word:focus-visible { transform: translate(-50%, -50%) rotate(calc(var(--angle) - 3deg)) scale(1.08); }
.mis-word[data-color=pink] { --c: var(--pink); }
.mis-word[data-color=yellow] { --c: var(--yellow); }
.mis-word[data-color=blue] { --c: var(--blue); }
.mis-word[data-color=green] { --c: var(--green); }
.mis-word[data-color=purple] { --c: var(--lilac); }
.word-1 { --x: 22%; --y: 16%; --angle: -10deg; --size: clamp(34px, 3.8vw, 56px); }
.word-2 { --x: 73%; --y: 14%; --angle: 10deg; --size: clamp(40px, 4.7vw, 70px); }
.word-3 { --x: 90%; --y: 33%; --angle: -8deg; }
.word-4 { --x: 11%; --y: 47%; --angle: -9deg; }
.word-5 { --x: 89%; --y: 59%; --angle: 8deg; --size: clamp(38px, 4.4vw, 62px); }
.word-6 { --x: 18%; --y: 79%; --angle: 8deg; }
.word-7 { --x: 47%; --y: 86%; --angle: -5deg; }
.word-8 { --x: 78%; --y: 81%; --angle: -9deg; }
.scribble { position: absolute; width: 100%; height: 24px; left: 0; bottom: -6px; stroke-width: 2; }
.star { position: absolute; width: 35px; height: 35px; right: -40px; top: -7px; fill: var(--yellow); stroke-width: 1.8; transform: rotate(12deg); }
.color-letter { font-weight: 400; }
.color-letter:nth-of-type(1) { color: #ae406a; }
.color-letter:nth-of-type(2) { color: #497b3b; }
.color-letter:nth-of-type(3) { color: #337ca6; }
.color-letter:nth-of-type(4) { color: #956228; }
.color-letter:nth-of-type(5) { color: #8061b1; }
.little-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); right: -13px; top: 3px; }
.little-dot:nth-of-type(2) { top: 28px; right: -27px; width: 8px; height: 8px; background: var(--yellow); }
.little-dot:nth-of-type(3) { top: 44px; right: -10px; background: var(--blue); }
.wrong-arrow { position: absolute; width: 49px; height: 36px; right: -31px; bottom: -25px; transform: rotate(15deg); }
.hint { position: absolute; top: 26%; left: 27%; transform: rotate(-5deg); margin: 0; font: 400 17px/1.1 'Yuanmo', sans-serif; }
.hint svg { position: absolute; width: 52px; height: 31px; top: -29px; left: -35px; stroke-width: 2; }
.page-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 15px 32px 25px; }
.page-footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; }
.project-link { font: 400 30px/1.1 'Yuanmo', sans-serif; text-decoration: none; }
.project-link:nth-child(1) span { color: #755399; }
.project-link:nth-child(2) span { color: #be503e; }
.project-link:nth-child(3) span { color: #528548; }
/* Wiz: stjarnan úr merki galdrabókarinnar, vinstra megin við nafnið. */
.wiz-stjarna svg { display: inline-block; width: .8em; height: .8em; margin-right: .08em; vertical-align: -.02em; fill: var(--yellow); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; transform: rotate(-8deg); }
/* líf.is-merkið heldur upprunalega í-inu: stílafbrigðið ss01 í KN Yuanmo SC Líf (0.76). Annar texti notar nýja í-ið. */
.project-link[href="https://xn--lf-nja.is/"] { font-feature-settings: "ss01"; }
.project-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.construction-link { display: inline-block; color: var(--ink); transform: rotate(9deg); background: var(--yellow); padding: 1px 8px 3px; border-radius: 8px 5px 9px 4px; }
.shuffle-button { display: inline-flex; gap: 7px; align-items: center; border: 0; border-bottom: 1.5px solid var(--ink); padding: 7px 0 4px; background: none; font: 400 18px/1.1 'Yuanmo', sans-serif; transform: rotate(2deg); }
.shuffle-button svg { width: 19px; height: 19px; }
.no-script { margin: 0 32px 20px; font-size: 13px; }
:root[data-thema] .color-letter { color: var(--ink); }
@media (min-width: 1800px) { .word-field { max-width: 1800px; margin-inline: auto; } }
@media (max-width: 900px) {
  .page-note { padding: 18px 18px 0; font-size: 10px; }
  .word-field { min-height: 590px; height: calc(100svh - 125px); max-height: 850px; }
  .centerpiece { width: 100%; top: 35%; padding: 0 22px; }
  .mis-logo { font-size: clamp(96px, 30vw, 180px); }
  .welcome { margin: 22px 0 16px; font-size: clamp(18px, 4.4vw, 26px); }
  .reply { max-width: 290px; min-height: 92px; font-size: 12px; }
  .mis-word { --size: clamp(24px, 5.9vw, 35px); }
  .word-1 { --x: 31%; --y: 10%; --size: clamp(28px, 7.4vw, 43px); }
  .word-2 { --x: 75%; --y: 23%; --size: clamp(30px, 8.5vw, 52px); }
  .word-3 { --x: 31%; --y: 27%; }
  .word-4 { --x: 23%; --y: 81%; }
  .word-5 { --x: 76%; --y: 81%; --size: clamp(27px, 8vw, 40px); }
  .word-6 { --x: 26%; --y: 95%; }
  .word-7 { --x: 70%; --y: 94%; }
  .word-8 { --x: 78%; --y: 5%; --size: clamp(22px, 5.6vw, 33px); }
  .star { width: 20px; height: 20px; right: -12px; top: -3px; }
  .scribble { height: 17px; bottom: -3px; }
  .wrong-arrow { width: 34px; height: 25px; right: -7px; bottom: -20px; }
  .hint { top: 18%; left: 12%; font-size: 14px; }
  .hint svg { width: 31px; height: 24px; top: -22px; left: -5px; }
  .little-dot { right: -8px; }
  .little-dot:nth-of-type(2) { right: -19px; top: 20px; }
  .little-dot:nth-of-type(3) { right: -8px; top: 37px; }
  .page-footer { padding: 17px 18px 24px; gap: 14px; align-items: flex-end; }
  .page-footer nav { gap: 17px; }
  .project-link { font-size: 25px; }
  .shuffle-button { font-size: 15px; flex-shrink: 0; }
}
@media (min-width: 360px) and (max-width: 500px) {
  .centerpiece { top: 38%; }
}
@media (max-width: 420px) {
  .page-footer { flex-direction: column; align-items: center; gap: 21px; }
  .page-footer nav { gap: 18px; }
  .project-link { font-size: 22px; }
  .word-field { min-height: 540px; height: calc(100svh - 170px); }
  .hint { font-size: 12px; }
}
@media (max-width: 359px) {
  .word-field { height: 780px; min-height: 780px; }
  .centerpiece { top: 39%; }
  .word-1 { --x: 42%; --y: 9%; }
  .word-2 { --x: 75%; --y: 30%; }
  .word-3 { --x: 27%; --y: 27%; }
  .word-4 { --y: 79%; }
  .word-5 { --y: 78%; }
  .word-6 { --y: 94%; }
  .word-7 { --y: 92%; }
  .word-8 { --x: 70%; --y: 20%; }
  .hint { display: none; }
  .fine-print { max-width: 135px; text-align: right; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }