/* Weave, the daily word game. The look is loose and game-like: no card borders, big tactile letter tiles, a bouncing cast. Colours are set here (graphite,
   same as the rest of the site) so the page does not depend on the rest of the site's cards. */

.weave {
  --wv-bg: #17171b;
  --wv-ink: #f4f4f6;
  --wv-soft: #b5b5bf;
  --wv-tile: #2a2a31;
  --wv-edge: #0e0e11;
  --wv-dot: #34343c;
  --wv-accent: #f97316;
  --wv-accent-edge: #ffb376;
  --wv-bonus: #5a3a17;
  --wv-bonus-edge: #2f1a05;
  --wv-bonus-ink: #ffcb91;
  --wv-error: #ff9c92;
  background: var(--wv-bg);
  color: var(--wv-ink);
  border-radius: 20px;
  padding: 1.4rem 1.6rem 2rem;
  margin: 0 auto 2rem;
  max-width: 760px;
}


.weave h1 { font-size: 2.5rem; font-weight: 500; letter-spacing: -0.02em; margin: 0; line-height: 1; color: var(--wv-ink); }
.weave h2 { font-size: 1.1rem; font-weight: 500; color: var(--wv-ink); }
.weave a { color: var(--wv-accent-edge); }
[data-bs-theme="dark"] .weave a { color: #ffb376; }
.wv-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 1rem; }
.wv-sub { font-size: 1rem; color: var(--wv-soft); margin: 0.4rem 0 0.8rem; flex-basis: 100%; }
.wv-note { text-align: center; color: var(--wv-soft); }

.wv-top { display: flex; justify-content: space-between; align-items: flex-end; margin: 0 0 1rem; }
.wv-no { font-size: 0.85rem; color: var(--wv-soft); }
.wv-no b { display: inline; font-size: 1.9rem; font-weight: 500; color: var(--wv-accent); line-height: 1; margin-right: 0.4rem; }

.wv-tabs { display: flex; gap: 1.5rem; margin: 0 0 1.3rem; }
.wv-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; color: var(--wv-soft); padding: 0 0 4px; font-size: 1rem; cursor: pointer; }
.wv-tabs button.on { color: var(--wv-ink); font-weight: 500; border-bottom-color: var(--wv-accent); }

.wv-hint { font-size: 0.9rem; color: var(--wv-soft); text-align: center; margin: 0 0 0.5rem; }
.wv-line { display: flex; justify-content: center; gap: 8px; min-height: 86px; padding: 10px 0 8px; border-bottom: 4px solid var(--wv-accent); margin: 0 0 6px; flex-wrap: wrap; align-items: flex-end; }
.wv-line.over { border-bottom-color: var(--wv-ink); }
.wv-dot { width: 56px; height: 8px; border-radius: 4px; background: var(--wv-dot); align-self: flex-end; margin-bottom: 6px; }
.wv-scat { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 12px; padding: 22px 0 12px; min-height: 130px; align-items: center; }

.wv-tile {
  width: 60px; height: 68px; border-radius: 14px; background: var(--wv-tile); border-bottom: 6px solid var(--wv-edge);
  display: flex; align-items: center; justify-content: center; font-size: 1.75rem; font-weight: 500; position: relative; cursor: grab; user-select: none; color: var(--wv-ink);
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px)); transition: transform 0.15s;
}
.wv-tile:hover, .wv-tile:focus-visible { transform: rotate(0deg) translateY(calc(var(--y, 0px) - 6px)) scale(1.07); outline: none; }
.wv-tile i { position: absolute; right: 6px; bottom: 3px; font-size: 10px; font-style: normal; font-weight: 400; color: var(--wv-soft); }
.wv-tile.bonus { background: var(--wv-bonus); border-bottom-color: var(--wv-bonus-edge); color: var(--wv-bonus-ink); }
.wv-tile.bonus i { color: var(--wv-bonus-ink); }
.wv-tile.big { width: 58px; height: 72px; font-size: 2rem; }
.wv-tile.still { cursor: default; }
.wv-tile.pop { animation: wv-pop 0.28s; }
.wv-tile.bounce { animation: wv-bounce 0.5s; }
@keyframes wv-pop { 0% { transform: scale(0.6); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes wv-bounce { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-16px); } }
@media (prefers-reduced-motion: reduce) { .wv-tile, .wv-tile.pop, .wv-tile.bounce { animation: none; transition: none; } }

.wv-info { text-align: center; font-size: 1rem; min-height: 1.5rem; margin: 10px 0 0; }
.wv-info b { font-weight: 500; }
.wv-error { text-align: center; font-size: 0.9rem; color: var(--wv-error); min-height: 1.1rem; margin: 4px 0 0; }
.wv-actions { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.wv-link { background: none; border: 0; color: var(--wv-soft); font-size: 0.95rem; cursor: pointer; padding: 6px 8px; }
.wv-link:hover { color: var(--wv-ink); }
.wv-cast {
  background: var(--wv-accent); color: #fff; border: 0; border-bottom: 5px solid var(--wv-accent-edge); border-radius: 999px; font-size: 1.1rem; font-weight: 500;
  padding: 10px 34px; cursor: pointer; text-decoration: none; display: inline-block;
}
.wv-cast:hover { color: #fff; }
.wv-cast:active { transform: translateY(3px); border-bottom-width: 2px; }
.wv-cast[disabled] { opacity: 0.6; cursor: default; }
a.wv-cast, a.wv-cast:visited { color: #fff; }

.wv-score { font-size: 4rem; font-weight: 500; color: var(--wv-accent); text-align: center; line-height: 1; margin: 14px 0 2px; }
.wv-cap { text-align: center; font-size: 0.9rem; color: var(--wv-soft); }
.wv-facts { display: flex; justify-content: center; gap: 30px; margin: 16px 0; flex-wrap: wrap; }
.wv-facts div { text-align: center; }
.wv-facts b { display: block; font-size: 1.9rem; font-weight: 500; }
.wv-facts span { font-size: 0.85rem; color: var(--wv-soft); }
.wv-share { text-align: center; margin-top: 14px; font-family: var(--bs-font-monospace, monospace); font-size: 0.85rem; }
.wv-lock { text-align: center; font-size: 0.9rem; color: var(--wv-soft); margin: 18px auto 0; max-width: 460px; }
.wv-h { font-size: 0.95rem; font-weight: 500; margin: 22px 0 8px; text-align: center; }
.wv-list { max-width: 440px; margin: 0 auto; }
.wv-row { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 1.05rem; }
.wv-row em { font-style: normal; font-size: 1.5rem; font-weight: 500; color: var(--wv-accent); width: 34px; }
.wv-row span { flex: 1; }
.wv-row b { font-weight: 500; }
.wv-row.me { color: var(--wv-bonus-ink); }
[data-bs-theme="dark"] .wv-row.me { color: #ffcb91; }
.wv-who { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 16px; margin: 12px 0 34px; }
.wv-av { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 500; background: var(--wv-tile); border-bottom: 5px solid var(--wv-edge); position: relative; }
.wv-av small { position: absolute; bottom: -22px; font-size: 0.75rem; font-weight: 400; color: var(--wv-soft); white-space: nowrap; }
.wv-bars { display: flex; gap: 16px; align-items: flex-end; height: 110px; justify-content: center; margin-top: 24px; }
.wv-bars div { width: 54px; background: var(--wv-tile); border-bottom: 5px solid var(--wv-edge); border-radius: 10px 10px 0 0; position: relative; min-height: 4px; }
.wv-bars em { position: absolute; top: -20px; left: 0; right: 0; text-align: center; font-size: 0.8rem; font-style: normal; }
.wv-bl { display: flex; gap: 16px; justify-content: center; font-size: 0.75rem; color: var(--wv-soft); margin-top: 5px; }
.wv-bl span { width: 54px; text-align: center; }
.wv-servers { display: flex; justify-content: center; gap: 6px 18px; flex-wrap: wrap; font-size: 0.95rem; margin-top: 6px; }
.wv-servers label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.wv-pick { display: block; margin: 0 auto 10px; max-width: 320px; }

.wv-how { max-width: 620px; margin: 2.2rem auto 0; color: var(--wv-soft); font-size: 0.95rem; }
.wv-how h2 { text-align: center; }
.wv-how ol { padding-left: 1.2rem; }

@media (max-width: 575.98px) {
  .weave { padding: 1.1rem 0.9rem 1.6rem; border-radius: 14px; }
  .weave h1 { font-size: 2rem; }
  .wv-tile { width: 48px; height: 56px; font-size: 1.4rem; }
  .wv-tile.big { width: 40px; height: 54px; font-size: 1.4rem; }
  .wv-line { gap: 5px; }
  .wv-scat { gap: 8px; }
  .wv-score { font-size: 3rem; }
}

/* ---------- the loading screen and the "something went wrong" screen (website and Discord) ---------- */

.wv-loading { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: 2.2rem 0 1.6rem; }
.wv-loading-title { display: none; margin: 0; font-size: 1.7rem; font-weight: 500; letter-spacing: -0.02em; color: var(--wv-ink); }
.wv-loading-tiles { display: flex; gap: clamp(4px, 1.2vw, 9px); }
.wv-loading-tiles i {
  display: grid; place-items: center; width: clamp(28px, 7.6vw, 46px); height: clamp(34px, 9.2vw, 54px); border-radius: 11px; background: var(--wv-tile);
  border-bottom: 5px solid var(--wv-edge); color: var(--wv-ink); font-style: normal; font-weight: 500; font-size: clamp(1rem, 3.4vw, 1.45rem);
  transform: rotate(var(--r, 0deg)); animation: wv-wave 1.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.09s);
}
.wv-loading-tiles i.bonus { background: var(--wv-bonus); border-bottom-color: var(--wv-bonus-edge); color: var(--wv-bonus-ink); }
.wv-loading-text { margin: 0; min-height: 1.5em; color: var(--wv-soft); font-size: 1rem; text-align: center; }
@keyframes wv-wave { 0%, 55%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 27% { transform: translateY(-14px) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .wv-loading-tiles i { animation: none; } }

.wv-problem { text-align: center; padding: 1.8rem 0 1rem; }
.wv-problem h2 { margin: 0 0 0.4rem; font-size: 1.35rem; font-weight: 500; }
.wv-problem p { max-width: 460px; margin: 0.3rem auto; color: var(--wv-soft); }
.wv-problem .wv-detail { font-size: 0.8rem; opacity: 0.75; word-break: break-word; }

/* the result screen's two parts: one column on the website, side by side on a wide Discord frame (below) */
.wv-cast-grid, .wv-cols { display: block; }

/* ---------- inside Discord: the Weave Activity (Pages/WeaveActivity.cshtml) ----------
   The frame can be any size and has no page scroll of its own, so everything is made to fit it: the game fills the whole frame, the name, tabs and countdown share one bar, the letters,
   score and spacing scale with the frame's height, a wide frame shows the result in two columns, and only the part under the tabs scrolls, so nothing is ever cut off. */

.weave-activity-body { height: 100vh; height: 100dvh; margin: 0; overflow: hidden; }
.weave-activity-main { height: 100%; box-sizing: border-box; padding: clamp(6px, 1.6vh, 14px) clamp(8px, 1.6vw, 18px); }

.weave.weave-activity {
  display: flex; flex-direction: column; box-sizing: border-box; height: 100%; max-width: none; margin: 0; overflow: hidden; border-radius: 16px;
  padding: clamp(10px, 2.2vh, 20px) clamp(12px, 2vw, 26px);
}
.weave-activity #weave-app { display: flex; flex: 1; flex-direction: column; min-height: 0; }

.weave-activity .wv-loading { flex: 1; justify-content: center; padding: 0; }
.weave-activity .wv-loading-title { display: block; }
.weave-activity .wv-problem { margin: auto; }

.weave-activity .wv-bar { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.4rem; margin-bottom: clamp(6px, 1.6vh, 14px); }
.weave-activity .wv-brand { order: 1; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; }
.weave-activity .wv-tabs { order: 2; margin: 0; gap: 1.1rem; }
.weave-activity .wv-top { order: 3; margin: 0 0 0 auto; align-items: center; }
.weave-activity .wv-no b { font-size: 1.4rem; }
.weave-activity .wv-view { flex: 1; min-height: 0; padding-right: 4px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }

.weave-activity .wv-hint { margin: 0 0 4px; }
.weave-activity .wv-tile { width: clamp(40px, 7.4vh, 60px); height: clamp(46px, 8.6vh, 68px); border-bottom-width: 5px; border-radius: 12px; font-size: clamp(1.3rem, 3.6vh, 1.75rem); }
.weave-activity .wv-tile.big { width: clamp(38px, 7.2vh, 58px); height: clamp(46px, 8.8vh, 72px); font-size: clamp(1.4rem, 4vh, 2rem); }
.weave-activity .wv-line { min-height: clamp(60px, 11vh, 86px); padding: 4px 0 6px; }
.weave-activity .wv-scat { min-height: 0; gap: 8px 10px; padding: clamp(8px, 2vh, 22px) 0 clamp(4px, 1vh, 12px); }
.weave-activity .wv-info { margin-top: 6px; }
.weave-activity .wv-actions { margin-top: clamp(6px, 1.5vh, 14px); }
.weave-activity .wv-score { margin: 4px 0 0; font-size: clamp(2.4rem, 9vh, 4rem); }
.weave-activity .wv-facts { margin: clamp(6px, 1.5vh, 16px) 0; gap: 22px; }
.weave-activity .wv-facts b { font-size: clamp(1.3rem, 3.8vh, 1.9rem); }
.weave-activity .wv-share { margin-top: 8px; }
.weave-activity .wv-h { margin: clamp(8px, 1.8vh, 22px) 0 6px; }
.weave-activity .wv-lock { margin-top: 10px; }
.weave-activity .wv-bars { height: clamp(60px, 14vh, 110px); margin-top: 20px; }
.weave-activity .wv-row { padding: 3px 0; font-size: 0.98rem; }
.weave-activity .wv-row em { font-size: 1.25rem; }
.weave-activity .wv-who { margin: 8px 0 28px; }

/* a wide frame: your result on the left and everyone's words on the right (and the same split for the server board and the ranking), each column scrolling by itself if it is long */
@media (min-width: 820px) {
  .weave-activity .wv-cast-grid, .weave-activity .wv-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(16px, 3vw, 40px); height: 100%; }
  .weave-activity .wv-cast-main, .weave-activity .wv-cast-side, .weave-activity .wv-col { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .weave-activity .wv-cast-side > .wv-h:first-child, .weave-activity .wv-col > .wv-h:first-child { margin-top: 4px; }
}

/* a short frame: the hints and long notes go, so the letters and buttons keep their room */
@media (max-height: 520px) {
  .weave-activity .wv-hint, .weave-activity .wv-lock { display: none; }
  .weave-activity .wv-loading { gap: 0.6rem; }
}

/* the ranking's period buttons: this week, this month, all time */
.wv-periods {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 0 14px;
  flex-wrap: wrap;
}

.wv-period {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.wv-period[aria-pressed="true"] {
  background: rgba(249, 115, 22, 0.28);
  border-color: rgba(249, 115, 22, 0.7);
  font-weight: 700;
}

/* ---- Supporter extras: the streak freeze note, the archive, the fuller stats and private leagues ---- */

.wv-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--wv-bonus);
  color: var(--wv-bonus-ink);
  font-size: 0.95rem;
}

[data-bs-theme="dark"] .wv-save { color: #ffe3c7; }
.wv-save > div { flex: 1 1 14rem; }
.wv-save .wv-cast { font-size: 0.95rem; padding: 7px 16px; }
.wv-save .wv-link { color: inherit; }

.wv-mini {
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--wv-accent);
  background: transparent;
  color: var(--wv-accent-edge);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

[data-bs-theme="dark"] .wv-mini { color: #ffb376; }
.wv-mini:hover { background: rgba(249, 115, 22, 0.16); }

.wv-soft { color: var(--wv-soft); font-size: 0.85rem; }
.wv-code { letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.wv-day { font-size: 0.85rem !important; width: auto !important; color: var(--wv-soft) !important; }

.wv-scroll { max-height: 15rem; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.wv-scroll .wv-row em { font-size: 1rem; width: 44px; color: var(--wv-soft); }
.wv-row button { margin-left: auto; }

.wv-form { display: flex; gap: 0.5rem; max-width: 26rem; margin: 8px auto 0; align-items: center; }
.wv-form input { flex: 1; min-width: 0; }

/* the calendar: a column per week, Monday at the top */
.wv-cal {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: 4px;
  justify-content: center;
  margin: 14px auto 6px;
}

.wv-cal i, .wv-legend i {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: rgba(127, 127, 160, 0.25);
}

.wv-cal i.gap { background: transparent; }
.wv-cal i.played, .wv-legend i.played { background: rgba(249, 115, 22, calc(0.35 + var(--p, 0.5) * 0.65)); }
.wv-cal i.archive, .wv-legend i.archive { background: transparent; box-shadow: inset 0 0 0 2px rgba(249, 115, 22, 0.8); }
.wv-cal i.frozen, .wv-legend i.frozen { background: #7cc4ff; }
.wv-cal i.today { box-shadow: inset 0 0 0 2px var(--wv-ink); background: transparent; }
.wv-legend i.played { --p: 0.7; }

.wv-legend { display: flex; justify-content: center; gap: 14px; font-size: 0.75rem; color: var(--wv-soft); flex-wrap: wrap; }
.wv-legend span { display: inline-flex; align-items: center; gap: 5px; }
.wv-legend i { width: 11px; height: 11px; border-radius: 3px; }

.wv-spark { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 70px; margin: 8px 0 4px; }
.wv-spark i { width: 12px; background: var(--wv-tile); border-bottom: 3px solid var(--wv-edge); border-radius: 4px 4px 0 0; }

/* what a free player is shown instead of the fuller stats: the real thing, faded, with the reason to want it */
.wv-teaser { margin: 18px 0 0; padding: 14px; border-radius: 16px; border: 1px dashed var(--wv-edge); text-align: center; }
.wv-teaser .wv-cal { opacity: 0.45; filter: saturate(0.7); }
.wv-teaser p { margin: 8px 0 0; font-size: 0.95rem; }

.weave-activity .wv-save { margin-bottom: 8px; padding: 6px 10px; font-size: 0.85rem; }
.weave-activity .wv-cal i { width: 12px; height: 12px; }
@media (max-width: 520px) {
  .wv-tabs { gap: 1rem; flex-wrap: wrap; }
  .wv-cal i { width: 12px; height: 12px; }
}

/* ---------- past days ---------- */

.wv-archive .wv-soft, .wv-archive-day .wv-soft { color: var(--wv-soft); }
.wv-archive .wv-note { font-size: 0.95rem; margin: 0.8rem 0; text-align: left; }
.wv-archive .wv-lock { color: var(--wv-soft); font-size: 0.9rem; }
.wv-archive-list { display: grid; gap: 0.8rem; margin: 1rem 0; }
.wv-archive-day { background: var(--wv-tile); border-radius: 14px; padding: 0.8rem 1rem 0.9rem; }
.wv-archive-day header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1rem; margin-bottom: 0.5rem; }
.wv-archive-letters { display: flex; gap: 5px; }
.wv-archive-tile { flex: 1 1 0; min-width: 0; max-width: 34px; height: 40px; border-radius: 8px; background: var(--wv-edge); display: inline-flex; align-items: center; justify-content: center; font-weight: 500; font-size: 1.1rem; }
.wv-archive-tile.bonus { background: var(--wv-bonus); color: var(--wv-bonus-ink); }
.wv-archive-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1rem; margin: 0.6rem 0 0; font-size: 0.95rem; }
.wv-archive-mine { color: var(--wv-accent-edge); }