@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;800&display=swap");

/* ---------- tokens ---------- */
.devdle {
  --dv-ink: #17212b;
  --dv-soft: #5d6873;
  --dv-line: #d5dade;
  --dv-surface: #ffffff;
  --dv-raised: #f3f5f6;
  --dv-hit: #2e7d59;
  --dv-near: #c99a1e;
  --dv-miss: #7b848d;
  --dv-on-tile: #ffffff;
  --dv-cond: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --dv-radius: 6px;

  color: var(--dv-ink);
  max-width: 640px;
  margin: 1.5rem auto 3rem;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}
body.quarto-dark .devdle,
.devdle[data-theme="dark"] {
  --dv-ink: #e8ecef;
  --dv-soft: #9aa5ae;
  --dv-line: #3a434b;
  --dv-surface: #1c2329;
  --dv-raised: #252e35;
  --dv-hit: #3a9a6d;
  --dv-near: #c7a02c;
  --dv-miss: #4d565e;
}
@media (prefers-color-scheme: dark) {
  body:not(.quarto-light) .devdle:not([data-theme="light"]) {
    --dv-ink: #e8ecef; --dv-soft: #9aa5ae; --dv-line: #3a434b;
    --dv-surface: #1c2329; --dv-raised: #252e35;
    --dv-hit: #3a9a6d; --dv-near: #c7a02c; --dv-miss: #4d565e;
  }
}
.devdle [hidden] { display: none !important; }
.devdle *, .devdle *::before, .devdle *::after { box-sizing: border-box; }
.devdle button { font: inherit; color: inherit; cursor: pointer; }
.devdle :focus-visible { outline: 3px solid var(--dv-near); outline-offset: 2px; }

/* ---------- header ---------- */
.dv-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  border-bottom: 2px solid var(--dv-ink); padding-bottom: .4rem; margin-bottom: 1.25rem;
}
.dv-title {
  font-family: var(--dv-cond); font-weight: 800; font-size: clamp(2.6rem, 9vw, 3.6rem);
  line-height: .85; letter-spacing: -.01em; margin: 0;
}
.dv-meta { display: flex; align-items: center; gap: .9rem; font-family: var(--dv-cond); font-size: 1.15rem; font-weight: 600; color: var(--dv-soft); }
.dv-streak[data-live="true"] { color: var(--dv-ink); }
.dv-help {
  width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--dv-line);
  background: none; font-family: var(--dv-cond); font-weight: 800; font-size: 1.1rem; line-height: 1;
}
.dv-help:hover { border-color: var(--dv-ink); }

/* ---------- board ---------- */
.dv-board { display: grid; gap: .45rem; }
.dv-cols, .dv-row {
  display: grid; gap: .45rem;
  grid-template-columns: minmax(0, 1.45fr) repeat(var(--dv-n, 4), minmax(0, 1fr));
}
.dv-cols span {
  font-family: var(--dv-cond); font-weight: 600; font-size: .95rem; color: var(--dv-soft);
  padding-left: .15rem;
}
.dv-name, .dv-tile {
  min-height: 4.1rem; border-radius: var(--dv-radius);
  display: flex; align-items: center;
  font-family: var(--dv-cond); font-weight: 600; line-height: 1.05;
}
.dv-name {
  gap: .5rem; padding: .4rem .6rem; font-size: 1.12rem;
  border: 2px solid var(--dv-line); background: var(--dv-surface);
}
.dv-name .dv-icon { font-size: 1.45rem; line-height: 1; }
.dv-name > span:last-child, .dv-card > span:last-child { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.dv-tile {
  justify-content: center; text-align: center; padding: .3rem; font-size: .98rem;
  border: 2px solid var(--dv-line); background: var(--tile-bg, transparent);
  hyphens: auto; overflow-wrap: break-word; letter-spacing: -.005em;
}
.dv-tile[data-s] { border-color: transparent; color: var(--dv-on-tile); }
.dv-tile[data-s="hit"]  { --tile-bg: var(--dv-hit); }
.dv-tile[data-s="near"] { --tile-bg: var(--dv-near); }
.dv-tile[data-s="miss"] { --tile-bg: var(--dv-miss); }

/* the active row */
.dv-row.is-active .dv-name { border-style: dashed; color: var(--dv-soft); font-weight: 500; }
.dv-row.is-active .dv-name.has-card { border-style: solid; border-color: var(--dv-ink); color: var(--dv-ink); font-weight: 600; }
.dv-row.is-active .dv-name.is-over { border-color: var(--dv-hit); background: var(--dv-raised); }

/* ---------- actions ---------- */
.dv-actions { display: flex; justify-content: flex-end; margin: .9rem 0 1.4rem; min-height: 2.9rem; }
.dv-go {
  font-family: var(--dv-cond); font-weight: 800; font-size: 1.3rem;
  padding: .35rem 1.6rem; border-radius: var(--dv-radius);
  border: 2px solid var(--dv-ink); background: var(--dv-ink); color: var(--dv-surface) !important;
}
.dv-go:disabled { opacity: .25; cursor: default; }

/* ---------- deck ---------- */
.dv-search {
  width: 100%; margin-bottom: .6rem; padding: .55rem .7rem; font: inherit;
  border: 2px solid var(--dv-line); border-radius: var(--dv-radius);
  background: var(--dv-surface); color: var(--dv-ink);
}
.dv-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.2rem, 1fr)); gap: .45rem; }
.dv-card {
  display: flex; align-items: center; gap: .5rem; text-align: left;
  padding: .55rem .6rem; min-height: 3.4rem; border-radius: var(--dv-radius);
  border: 2px solid var(--dv-line); background: var(--dv-raised);
  font-family: var(--dv-cond); font-weight: 600; font-size: 1.05rem; line-height: 1.05;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.dv-card .dv-icon { font-size: 1.35rem; }
.dv-card:hover:not(:disabled) { border-color: var(--dv-ink); }
.dv-card.is-picked { border-color: var(--dv-ink); background: var(--dv-surface); }
.dv-card:disabled { opacity: .32; cursor: default; text-decoration: line-through; }
@media (pointer: fine) { .dv-card:not(:disabled) { cursor: grab; } }
.dv-ghost {
  position: fixed; z-index: 1000; pointer-events: none; margin: 0;
  transform: translate(-50%, -50%) rotate(-2deg); box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  background: var(--dv-surface); border-color: var(--dv-ink);
}

/* ---------- result ---------- */
.dv-result { border-top: 2px solid var(--dv-ink); margin-top: 1.6rem; padding-top: 1.1rem; }
.dv-result[hidden] { display: none; }
.dv-verdict { font-family: var(--dv-cond); font-weight: 800; font-size: 1.9rem; margin: 0 0 .8rem; line-height: 1; }
.dv-answer { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: start; }
.dv-answer .dv-big { font-size: 3.2rem; line-height: 1; grid-column: 1; grid-row: 1 / span 6; }
.dv-answer > :not(.dv-big) { grid-column: 2; }
.dv-answer h3 { font-family: var(--dv-cond); font-weight: 800; font-size: 1.6rem; margin: 0; line-height: 1.05; }
.dv-answer p { margin: .15rem 0 .5rem; max-width: 62ch; line-height: 1.5; }
.dv-answer .dv-why { color: var(--dv-soft); }
.dv-sources { font-size: .88rem; color: var(--dv-soft); margin: .4rem 0 0; padding: 0; list-style: none; }
.dv-draft { font-size: .85rem; color: var(--dv-soft); font-style: italic; }
.dv-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; flex-wrap: wrap; }
.dv-next { font-family: var(--dv-cond); font-size: 1.1rem; color: var(--dv-soft); }
.dv-share {
  font-family: var(--dv-cond); font-weight: 800; font-size: 1.25rem; padding: .35rem 1.4rem;
  border-radius: var(--dv-radius); border: 2px solid var(--dv-hit); background: var(--dv-hit); color: #fff !important;
}

/* ---------- help dialog & toast ---------- */
.dv-dialog {
  max-width: 26rem; width: calc(100% - 2rem); border: 2px solid var(--dv-ink); border-radius: var(--dv-radius);
  padding: 1.2rem 1.3rem; background: var(--dv-surface); color: var(--dv-ink);
}
.dv-dialog::backdrop { background: rgba(10, 15, 20, .45); }
.dv-dialog h2 { font-family: var(--dv-cond); font-weight: 800; font-size: 1.7rem; margin: 0 0 .5rem; }
.dv-dialog p { margin: .4rem 0; line-height: 1.45; }
.dv-key { display: grid; grid-template-columns: 2.2rem 1fr; gap: .45rem .7rem; align-items: center; margin: .8rem 0; }
.dv-key .dv-tile { min-height: 2.2rem; }
.dv-close { margin-top: .6rem; }
.dv-toast {
  position: fixed; left: 50%; top: 12%; transform: translateX(-50%); z-index: 1001;
  background: var(--dv-ink); color: var(--dv-surface); padding: .5rem 1rem; border-radius: var(--dv-radius);
  font-family: var(--dv-cond); font-weight: 600; font-size: 1.1rem; opacity: 0; transition: opacity .2s;
  pointer-events: none;
}
.dv-toast.is-on { opacity: 1; }

/* ---------- motion ---------- */
.dv-tile.flip { animation: dv-flip .52s ease-in-out both; animation-delay: calc(var(--i) * 190ms); }
@keyframes dv-flip {
  0%   { transform: rotateX(0);     background: transparent; color: transparent; border-color: var(--dv-line); }
  49%  { transform: rotateX(90deg); background: transparent; color: transparent; border-color: var(--dv-line); }
  50%  { transform: rotateX(90deg); background: var(--tile-bg); color: var(--dv-on-tile); border-color: transparent; }
  100% { transform: rotateX(0);     background: var(--tile-bg); color: var(--dv-on-tile); border-color: transparent; }
}
.dv-name.pop { animation: dv-pop .16s ease-out; }
@keyframes dv-pop { 50% { transform: scale(1.04); } }
.dv-row.shake { animation: dv-shake .4s; }
@keyframes dv-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.dv-row.win .dv-tile { animation: dv-hop .45s ease both; animation-delay: calc(var(--i) * 90ms); }
@keyframes dv-hop { 40% { transform: translateY(-14px); } 70% { transform: translateY(3px); } }

@media (prefers-reduced-motion: reduce) {
  .devdle .flip, .devdle .pop, .devdle .shake, .devdle .win .dv-tile { animation: none !important; }
}

/* ---------- narrow screens: name on its own line above the tiles ---------- */
@media (max-width: 540px) {
  .dv-cols { grid-template-columns: repeat(var(--dv-n, 4), minmax(0, 1fr)); }
  .dv-cols span:first-child { display: none; }
  .dv-row { grid-template-columns: repeat(var(--dv-n, 4), minmax(0, 1fr)); row-gap: .3rem; }
  .dv-row .dv-name { grid-column: 1 / -1; min-height: 2.6rem; }
  .dv-row + .dv-row { margin-top: .35rem; }
  .dv-tile { min-height: 3.4rem; font-size: .8rem; padding: .25rem .15rem; }
  .dv-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}