/* Scoped theme tokens keep the shared widget independent of game styles. */
.weekly-challenge, .wc-result {
  --wc-bg: #111e30; --wc-deep: #0b1524; --wc-text: #eef5ff; --wc-muted: #a7b9d0;
  --wc-accent: #82b7ff; --wc-line: #354a66; --wc-radius: 12px;
  box-sizing: border-box; color: var(--wc-text); font-family: system-ui, sans-serif;
}
.tetris-space-theme .weekly-challenge, .tetris-space-theme .wc-result {
  --wc-bg: #071c2e; --wc-deep: #04121f; --wc-accent: #63e5ff; --wc-line: #267a91;
}
.tetris-anime-sakura-girl .weekly-challenge, .tetris-anime-sakura-girl .wc-result {
  --wc-bg: #231422; --wc-deep: #190f1a; --wc-text: #fff5f7; --wc-muted: #d4b1c1;
  --wc-accent: #f39ab9; --wc-line: #845269; --wc-radius: 14px;
}
.tetris-sewage-plant .weekly-challenge, .tetris-sewage-plant .wc-result {
  --wc-bg: #292b25; --wc-deep: #101715; --wc-text: #e9e0cb; --wc-muted: #c4b99b;
  --wc-accent: #efb94f; --wc-line: #827050; --wc-radius: 3px;
}
.weekly-challenge {
  width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--wc-line);
  border-top: 2px solid var(--wc-accent); border-radius: var(--wc-radius);
  background: linear-gradient(145deg, var(--wc-bg), var(--wc-deep));
  box-shadow: 0 3px 12px #0003; text-align: left; font-size: 12px; line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.weekly-challenge [hidden], .wc-result[hidden] { display: none !important; }
.weekly-challenge .wc-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.weekly-challenge .wc-title { font-size: 13px; font-weight: 700; }
.weekly-challenge .wc-title::before { content: '◆'; color: var(--wc-accent); margin-right: 5px; }
.weekly-challenge .wc-link { font-size: 11px; color: var(--wc-accent); text-decoration: none; }
.weekly-challenge .wc-link:hover { text-decoration: underline; }
.weekly-challenge .wc-standing { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 8px 0 6px; }
.weekly-challenge .wc-rank { font-size: 29px; letter-spacing: -1px; line-height: 1.1; }
.weekly-challenge .wc-players { color: var(--wc-muted); font-size: 11px; }
.weekly-challenge .wc-best-row { display: flex; justify-content: space-between; gap: 8px; }
.weekly-challenge .wc-best { color: var(--wc-accent); font-size: 15px; }
.weekly-challenge .wc-target { border-top: 1px solid var(--wc-line); padding-top: 8px; margin-top: 8px; }
.weekly-challenge .wc-gap { display: block; color: var(--wc-accent); font-size: clamp(17px, 1.4vw, 22px); line-height: 1.25; overflow-wrap: anywhere; }
.weekly-challenge .wc-progress { display: block; appearance: none; border: 0; border-radius: 8px; width: 100%; height: 5px; margin-top: 8px; overflow: hidden; background: var(--wc-line); accent-color: var(--wc-accent); }
.weekly-challenge .wc-progress::-webkit-progress-bar { background: var(--wc-line); }
.weekly-challenge .wc-progress::-webkit-progress-value { background: var(--wc-accent); }
.weekly-challenge .wc-progress::-moz-progress-bar { background: var(--wc-accent); }
.weekly-challenge .wc-note { color: var(--wc-muted); margin: 7px 0 0; font-size: 11px; }
.weekly-challenge .wc-details { margin-top: 5px; color: var(--wc-muted); font-size: 11px; }
.weekly-challenge .wc-details summary { cursor: pointer; padding: 3px 0; }
.weekly-challenge .wc-details p { margin: 5px 0; }
.weekly-challenge .wc-retry { color: var(--wc-accent); background: transparent; border: 1px solid var(--wc-line); border-radius: 4px; padding: 6px 12px; margin-top: 8px; cursor: pointer; font: inherit; }
.weekly-challenge :focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 3px; }
.weekly-challenge.wc-compact { grid-column: 1 / -1; grid-row: 1; margin: 0 auto 10px; max-width: 520px; display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 9px 12px; }
.wc-compact .wc-header { grid-column: 1 / -1; }
.wc-compact .wc-standing { margin: 0; gap: 6px; }
.wc-compact .wc-rank { font-size: 20px; }
.wc-compact .wc-best-row { align-items: center; gap: 8px; }
.wc-compact .wc-target { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; }
.wc-compact .wc-details { display: none; }
.wc-compact .wc-gap { font-size: 16px; }
.wc-compact .wc-progress { margin-top: 4px; height: 3px; }
.wc-compact .wc-note { grid-column: 1 / -1; margin: 0; }
.wc-compact .wc-players { display: none; }
.wc-result { border: 1px solid var(--wc-line); border-radius: var(--wc-radius); background: var(--wc-bg); padding: 12px; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 13px; }
.wc-result strong { width: 100%; color: var(--wc-accent); }
.weekly-retro-page .weekly-challenge { --wc-bg: #a4b17e; --wc-deep: #bac69a; --wc-text: #1b281c; --wc-muted: #33482e; --wc-accent: #263d20; --wc-line: #66764a; margin: 12px auto; position: relative; z-index: 2; }
@media (max-width: 900px) {
  .tetris-pc-page.has-weekly-challenge .game-main { grid-row: 2; }
  .tetris-pc-page.has-weekly-challenge .game-sidebar.left { grid-row: 3; }
  .tetris-pc-page.has-weekly-challenge .game-sidebar.right { grid-row: 3; }
}
@media (max-width: 720px) {
  .has-weekly-challenge .board-column { grid-row: 2; }
}
@media (max-width: 640px) {
  .tetris-pc-page.has-weekly-challenge .game-sidebar.right { grid-row: 4; }
}
@media (pointer: coarse) {
  .weekly-challenge .wc-link, .weekly-challenge .wc-retry, .weekly-challenge summary { min-height: 44px; display: inline-flex; align-items: center; }
}
[data-theme="space-theme"] .weekly-challenge, [data-theme="space-theme"] .wc-result {
  --wc-bg: #071c2e; --wc-deep: #04121f; --wc-accent: #63e5ff; --wc-line: #267a91;
}
@media (max-width: 720px) {
  .has-weekly-challenge .game-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .weekly-challenge.wc-compact { max-width: calc(100vw - 28px); justify-self: center; }
}
@media (max-width: 720px) {
  .has-weekly-challenge .left-rail { grid-row: 3; grid-column: 1; }
  .has-weekly-challenge .right-rail { grid-row: 3; grid-column: 2; }
}
@media (min-width: 721px) and (max-height: 850px) {
  .right-rail .weekly-challenge { padding: 9px 11px; }
  .right-rail .wc-standing { margin: 5px 0; }
  .right-rail .wc-rank { font-size: 24px; }
  .right-rail .wc-gap { margin-top: 6px; }
  .right-rail .wc-note { font-size: 10px; }
}

@media (max-width: 480px) {
  .tetris-anime-sakura-girl.has-weekly-challenge .game-stage { grid-template-columns: minmax(0, 1fr); }
  .tetris-anime-sakura-girl.has-weekly-challenge .right-rail { grid-row: 4; grid-column: 1; }
}
.tetris-sewage-plant .weekly-challenge .wc-title { font-size: 11px; }
.tetris-sewage-plant .weekly-challenge .wc-title::before { display: none; }
.game-sidebar .weekly-challenge { margin-bottom: 16px; }
@media (max-width: 720px) {
  .has-weekly-challenge .board-column { grid-column: 1 / -1; }
  .has-weekly-challenge .left-rail, .has-weekly-challenge .right-rail { width: 100%; }
}
@media (max-width: 360px) {
  .weekly-challenge.wc-compact { gap: 3px 8px; }
  .wc-compact .wc-best-row { flex-wrap: wrap; justify-content: flex-end; gap: 2px 5px; }
}

/* Each state has one clear action, rather than repeated target numbers. */
.weekly-challenge .wc-intro { margin: 14px 0 6px; font-size: 16px; font-weight: 600; line-height: 1.5; }
.weekly-challenge .wc-participants { margin: 0; color: var(--wc-muted); font-size: 12px; }
.weekly-challenge .wc-summary { margin: 8px 0; color: var(--wc-accent); font-size: 13px; }
.weekly-challenge .wc-gap { font-size: 15px; line-height: 1.5; overflow-wrap: normal; }
.weekly-challenge .wc-note:empty { display: none; }
.wc-compact .wc-intro, .wc-compact .wc-participants, .wc-compact .wc-summary { grid-column: 1 / -1; }
.wc-compact .wc-intro { margin: 4px 0 0; font-size: 14px; }
.wc-compact .wc-gap { font-size: 13px; }