/* ————— Fyrklöver — Scandinavian newspaper-puzzle ————— */

:root {
  --paper: #f5efe2;
  --paper-deep: #ece4d2;
  --tile: #fffdf6;
  --ink: #221e18;
  --ink-soft: #6d6455;
  --rule: rgba(34, 30, 24, .22);
  --n1: #e7c65c;
  --n2: #93b56f;
  --n3: #7f9fc9;
  --n4: #b48ec2;
  --accent: #2f7d4f;
  --danger: #b3543e;
  --shadow: 0 1px 2px rgba(34,30,24,.08), 0 4px 14px rgba(34,30,24,.07);
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1913;
    --paper-deep: #15130e;
    --tile: #2a251c;
    --ink: #ece5d4;
    --ink-soft: #a89c86;
    --rule: rgba(236, 229, 212, .25);
    --n1: #c8a94a;
    --n2: #7d9c5e;
    --n3: #6f8cb3;
    --n4: #9d7bab;
    --accent: #5aa578;
    --danger: #c96f58;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif;
  display: flex; flex-direction: column; align-items: center;
  min-height: 100dvh;
  padding: 0 14px env(safe-area-inset-bottom);
}

/* ————— Masthead ————— */
.masthead { width: 100%; max-width: 560px; text-align: center; padding-top: 22px; }
.brand { display: flex; align-items: center; justify-content: center; gap: 12px; }
.clover { width: 42px; height: 45px; }
.brand h1 {
  font-family: "Fraunces", serif;
  font-weight: 650;
  font-size: clamp(2.1rem, 9vw, 2.9rem);
  letter-spacing: .01em;
  margin: 0;
}
.dateline {
  margin-top: 10px;
  padding: 7px 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.dateline .dot { opacity: .5; }
.toolbar { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.tool {
  background: none; border: none; color: var(--ink-soft);
  font: 600 .82rem "Archivo", sans-serif;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  transition: background .15s, color .15s;
}
.tool:hover { background: var(--paper-deep); color: var(--ink); }
.tool .ico { font-size: .9em; margin-right: 2px; }

/* ————— Board ————— */
main { width: 100%; max-width: 560px; flex: 1; }
#board { margin-top: 18px; }
#solved { display: flex; flex-direction: column; gap: 8px; }
#solved:not(:empty) { margin-bottom: 8px; }

.bar {
  border-radius: var(--radius);
  padding: 12px 10px;
  text-align: center;
  color: #26221a;
  animation: bar-in .45s cubic-bezier(.2, 1.2, .35, 1);
}
.bar.n1 { background: var(--n1); } .bar.n2 { background: var(--n2); }
.bar.n3 { background: var(--n3); } .bar.n4 { background: var(--n4); }
@media (prefers-color-scheme: dark) { .bar { color: #16130d; } }
.bar .bar-name { font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; }
.bar .bar-words { font-size: .82rem; font-weight: 500; margin-top: 3px; opacity: .85; }
.bar.revealed { opacity: .78; outline: 2px dashed rgba(0,0,0,.25); outline-offset: -6px; }
@keyframes bar-in { from { transform: scale(.6) translateY(14px); opacity: 0; } }

#grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile {
  appearance: none; border: 1px solid var(--rule);
  background: var(--tile); color: var(--ink);
  border-radius: var(--radius);
  min-height: 68px; padding: 4px 3px;
  font: 700 .92rem/1.15 "Archivo", sans-serif;
  text-transform: uppercase; letter-spacing: .01em;
  cursor: pointer; box-shadow: var(--shadow);
  transition: transform .12s cubic-bezier(.2,1.4,.4,1), background .12s, color .12s;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.tile:active { transform: scale(.93); }
.tile.sel {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
  transform: scale(1.04);
  animation: pop .18s cubic-bezier(.2,1.6,.4,1);
}
@keyframes pop { 50% { transform: scale(1.12); } }
.tile.shake { animation: shake .45s; }
@keyframes shake {
  20%, 60% { transform: translateX(-6px) rotate(-1.2deg); }
  40%, 80% { transform: translateX(6px) rotate(1.2deg); }
}
.tile.solving { animation: leap .5s cubic-bezier(.3,1.4,.5,1); }
@keyframes leap { 40% { transform: translateY(-12px) scale(1.06); } }
.tile.dealt { animation: deal .35s backwards cubic-bezier(.2,1.2,.35,1); }
@keyframes deal { from { transform: translateY(10px) scale(.92); opacity: 0; } }

/* ————— Status + controls ————— */
.status {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 20px; position: relative;
}
.status::before, .status::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
.status-label { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.badge {
  min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--ink); border-radius: 50%;
  font-weight: 700; font-size: 1rem; background: var(--tile);
}
.badge.bump { animation: bump .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes bump { 40% { transform: scale(1.35); background: var(--danger); color: #fff; border-color: var(--danger); } }

.controls { display: flex; justify-content: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.ctl {
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--ink); font: 600 .85rem "Archivo", sans-serif;
  padding: 9px 16px; cursor: pointer;
  transition: background .15s, transform .12s;
}
.ctl:hover { background: var(--paper-deep); }
.ctl:active { transform: scale(.95); }
.ctl:disabled { opacity: .4; cursor: default; }
.ctl-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

#submit, #btn-result {
  display: block; width: 100%; margin: 18px auto 8px;
  padding: 16px; border-radius: 999px; border: none;
  font: 700 1.05rem "Archivo", sans-serif;
  background: var(--ink); color: var(--paper); cursor: pointer;
  transition: opacity .15s, transform .12s;
}
#submit:disabled { opacity: .25; cursor: default; }
#submit:not(:disabled):active, #btn-result:active { transform: scale(.97); }
#archive-note { text-align: center; font-size: .85rem; color: var(--ink-soft); }
#archive-note a { color: var(--accent); font-weight: 600; }

/* ————— Hint bar ————— */
#hintbar { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.hint-pill {
  border: 1px dashed var(--accent); color: var(--ink);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: 999px; padding: 8px 14px; text-align: center;
  font-size: .88rem; animation: bar-in .4s cubic-bezier(.2,1.2,.35,1);
}
.hint-pill b { color: var(--accent); }

/* ————— Toast ————— */
#toast {
  position: fixed; top: 18px; left: 50%; translate: -50% 0;
  background: var(--ink); color: var(--paper);
  padding: 10px 20px; border-radius: 999px;
  font-weight: 700; font-size: .92rem; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s;
  z-index: 60;
}
#toast.show { opacity: 1; translate: -50% 6px; }

/* ————— Dialogs ————— */
dialog {
  border: none; border-radius: 18px; background: var(--paper);
  color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.3);
  width: min(92vw, 430px); padding: 26px 24px;
  font-family: "Archivo", sans-serif;
}
dialog::backdrop { background: rgba(20, 17, 12, .55); backdrop-filter: blur(2px); }
dialog h2 { font-family: "Fraunces", serif; font-weight: 650; margin: 0 0 12px; font-size: 1.5rem; }
dialog h3 { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 18px 0 8px; }
dialog p { line-height: 1.55; font-size: .93rem; margin: 10px 0; }
dialog button {
  font: 700 .95rem "Archivo", sans-serif; cursor: pointer;
  border-radius: 999px; padding: 12px 22px;
  border: 1px solid var(--rule); background: none; color: var(--ink);
}
dialog button.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); width: 100%; margin-top: 12px; }
dialog button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
dialog button.linkish { border: none; color: var(--ink-soft); font-weight: 600; width: 100%; }
dialog .row { display: flex; gap: 8px; margin-top: 14px; }
dialog .row > * { flex: 1; }

.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: .85rem; }
.legend .sw { display: inline-block; width: 13px; height: 13px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.sw.n1 { background: var(--n1); } .sw.n2 { background: var(--n2); }
.sw.n3 { background: var(--n3); } .sw.n4 { background: var(--n4); }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.stat .num { font-family: "Fraunces", serif; font-size: 1.7rem; font-weight: 650; }
.stat .lbl { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

#dist { display: flex; flex-direction: column; gap: 5px; }
.dist-row { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.dist-row .k { width: 22px; text-align: right; font-weight: 700; }
.dist-row .bar-track { flex: 1; }
.dist-row .fill {
  background: var(--accent); color: #fff; border-radius: 5px;
  min-width: 20px; padding: 2px 7px; font-weight: 700; font-size: .78rem; text-align: right;
}
.dist-row .fill.zero { background: var(--paper-deep); color: var(--ink-soft); }

#archive-list { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
#archive-list li a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 6px; border-bottom: 1px solid var(--rule);
  color: var(--ink); text-decoration: none; font-size: .92rem;
}
#archive-list li a:hover { background: var(--paper-deep); }
#archive-list .st { font-size: 1rem; }

#result-grid {
  font-size: 1.35rem; line-height: 1.3; text-align: center;
  background: var(--paper-deep); border-radius: 12px; padding: 14px; margin: 14px 0;
  font-family: "Archivo", sans-serif;
}
#result-title { text-align: center; font-size: 1.8rem; }
#result-sub, #result-next { text-align: center; color: var(--ink-soft); }
#result-next a { color: var(--accent); font-weight: 700; }

/* ————— Confetti ————— */
.confetto {
  position: fixed; top: -14px; width: 9px; height: 14px; z-index: 50;
  pointer-events: none; border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(105vh) rotate(720deg); opacity: .7; }
}

footer {
  margin: 26px 0 18px; font-size: .78rem; color: var(--ink-soft);
  letter-spacing: .05em;
}

/* ————— No puzzle ————— */
.nopuzzle { text-align: center; padding: 40px 10px; color: var(--ink-soft); }
.nopuzzle .big { font-size: 2.4rem; }

@media (max-width: 380px) {
  .tile { min-height: 60px; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}