/* DRY Records guess game. Loaded only by [dry_records_guess_game]. */

.dry-records-guess{
  --guess-ink:#111827;
  --guess-muted:#667085;
  --guess-soft:#f3f5f8;
  --guess-line:#e5e7eb;
  --guess-green:#047857;
  --guess-red:#be123c;
  --guess-blue:#1d4ed8;
  width:100%;
  min-height:100svh;
  max-width:100%;
  margin:0;
  overflow-x:hidden;
  color:var(--guess-ink);
  background:#fff;
  font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing:0;
}

:where(.entry-content, .wp-block-post-content, .wp-block-group, .wp-block-column) > .dry-records-guess{
  width:100%;
  max-width:100%;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

:where(.entry-content, .wp-block-post-content) .dry-records-guess{
  clear:both;
}

.dry-records-guess,
.dry-records-guess *{
  box-sizing:border-box;
}


.dry-records-guess button,
.dry-records-guess a{
  -webkit-tap-highlight-color:transparent;
}

.dry-records-guess .guessTopbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:72px;
  padding:14px clamp(18px, 4vw, 54px);
  border-bottom:1px solid var(--guess-line);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
}

.dry-records-guess .guessBack{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid var(--guess-line);
  border-radius:50%;
  color:var(--guess-ink);
  text-decoration:none;
  font-size:27px;
  line-height:1;
}

.dry-records-guess .guessBack:hover{
  background:var(--guess-soft);
}

.dry-records-guess .guessBrand{
  display:flex;
  flex-direction:column;
  gap:2px;
  text-align:center;
}

.dry-records-guess .guessBrand span,
.dry-records-guess .guessScore span,
.dry-records-guess .guessKicker,
.dry-records-guess .guessProgress span{
  color:var(--guess-muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.dry-records-guess .guessBrand strong{
  color:var(--guess-ink);
  font-size:18px;
}

.dry-records-guess .guessScore{
  min-width:68px;
  text-align:right;
}

.dry-records-guess .guessScore strong{
  display:block;
  margin-top:2px;
  color:var(--guess-ink);
  font-size:26px;
  line-height:1;
}

.dry-records-guess .guessIntro,
.dry-records-guess .guessPlay,
.dry-records-guess .guessEnd{
  width:min(980px, calc(100% - 36px));
  min-height:calc(100svh - 72px);
  margin:0 auto;
  padding:clamp(38px, 7vw, 82px) 0 54px;
}

.dry-records-guess .guessIntro,
.dry-records-guess .guessEnd{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

.dry-records-guess h1,
.dry-records-guess h2,
.dry-records-guess p{
  margin:0;
}

.dry-records-guess h1{
  max-width:860px;
  margin-top:10px;
  color:var(--guess-ink);
  font-size:clamp(44px, 8vw, 92px);
  line-height:.94;
  letter-spacing:0;
}

.dry-records-guess h2{
  color:var(--guess-ink);
  font-size:clamp(31px, 5vw, 58px);
  line-height:.98;
  letter-spacing:0;
}

.dry-records-guess .guessLead,
.dry-records-guess .guessEnd p,
.dry-records-guess [data-role="hintText"]{
  max-width:680px;
  margin-top:18px;
  color:#475467;
  font-size:clamp(18px, 2.1vw, 23px);
  line-height:1.38;
}

.dry-records-guess .guessModes{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:34px;
}

.dry-records-guess .guessModes button,
.dry-records-guess .guessChoices button,
.dry-records-guess .guessActions button,
.dry-records-guess .guessRoundTools button,
.dry-records-guess .guessNext{
  border:1px solid #d0d5dd;
  color:var(--guess-ink);
  background:#fff;
  cursor:pointer;
  font:800 16px/1 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dry-records-guess .guessModes button{
  min-height:42px;
  padding:0 15px;
  border-radius:8px;
}

.dry-records-guess .guessModes button:hover,
.dry-records-guess .guessChoices button:hover,
.dry-records-guess .guessActions button:hover,
.dry-records-guess .guessNext:hover{
  border-color:#98a2b3;
  background:#f9fafb;
}

.dry-records-guess .guessLoadStatus{
  margin-top:22px;
  color:var(--guess-muted);
  font-size:14px;
}

.dry-records-guess .guessPlay[hidden],
.dry-records-guess .guessIntro[hidden],
.dry-records-guess .guessEnd[hidden]{
  display:none !important;
}

.dry-records-guess .guessProgress{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  padding-bottom:18px;
  border-bottom:1px solid var(--guess-line);
}

.dry-records-guess .guessQuestion{
  display:flex;
  align-items:center;
  gap:clamp(22px, 5vw, 70px);
  padding:clamp(30px, 6vw, 72px) 0 clamp(24px, 5vw, 54px);
  animation:guessQuestionIn .28s ease both;
}

.dry-records-guess.is-briefing .guessProgress,
.dry-records-guess.is-briefing .guessImageWrap,
.dry-records-guess.is-briefing .guessChoices,
.dry-records-guess.is-briefing .guessActions,
.dry-records-guess.is-briefing .guessRoundTools,
.dry-records-guess.is-briefing .guessFeedback,
.dry-records-guess.is-briefing .guessNext{
  display:none !important;
}

.dry-records-guess.is-briefing .guessQuestion{
  min-height:calc(100svh - 190px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.dry-records-guess.is-briefing .guessPrompt{
  flex:0 1 780px;
  max-width:min(780px, 100%);
  margin:0 auto;
  text-align:center;
  animation:guessBriefingIn .26s ease both;
}

.dry-records-guess.is-briefing .guessPrompt .guessKicker{
  margin-bottom:14px;
  color:var(--guess-blue);
}

.dry-records-guess.is-clean-play .guessQuestion{
  display:block;
  padding:clamp(18px, 4vw, 42px) 0 clamp(14px, 3vw, 26px);
}

.dry-records-guess.is-clean-play .guessPlay{
  display:grid;
  grid-template-columns:minmax(220px, 320px) minmax(360px, 1fr);
  grid-template-areas:
    "progress progress"
    "image choices"
    "feedback feedback"
    "actions actions"
    "tools tools"
    "next next";
  column-gap:clamp(26px, 5vw, 68px);
  row-gap:14px;
  align-items:start;
}

.dry-records-guess.is-clean-play .guessProgress{
  grid-area:progress;
}

.dry-records-guess.is-clean-play .guessQuestion{
  grid-area:image;
}

.dry-records-guess.is-clean-play .guessChoices{
  grid-area:choices;
  align-self:center;
}

.dry-records-guess.is-clean-play .guessFeedback{
  grid-area:feedback;
}

.dry-records-guess.is-clean-play .guessActions{
  grid-area:actions;
}

.dry-records-guess.is-clean-play .guessRoundTools{
  grid-area:tools;
}

.dry-records-guess.is-clean-play .guessNext{
  grid-area:next;
  justify-self:center;
}

.dry-records-guess.is-clean-play .guessPrompt{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
}

.dry-records-guess.is-clean-play .guessImageWrap{
  width:100%;
  margin:0;
  animation:guessCleanIn .24s ease both;
}

.dry-records-guess.is-clean-play .guessChoices{
  max-width:none;
  margin:clamp(18px, 4vw, 42px) 0 0;
  animation:guessCleanIn .28s ease both;
}

.dry-records-guess.is-clean-play .guessActions,
.dry-records-guess.is-clean-play .guessRoundTools{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  justify-content:center;
}

.dry-records-guess .guessImageWrap{
  flex:0 0 clamp(190px, 26vw, 320px);
  margin:0;
}

.dry-records-guess .guessImageWrap img{
  display:block;
  width:100%;
  aspect-ratio:3 / 4;
  object-fit:cover;
  border:1px solid var(--guess-line);
  background:var(--guess-soft);
  filter:grayscale(.12) contrast(1.04);
}

.dry-records-guess .guessPrompt{
  flex:1 1 auto;
  min-width:0;
}

.dry-records-guess .guessPrompt .guessKicker{
  margin-bottom:12px;
}

.dry-records-guess .guessChoices{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:840px;
  animation:guessQuestionIn .32s ease both;
}

.dry-records-guess .guessChoices button{
  width:100%;
  min-height:56px;
  padding:14px 18px;
  text-align:left;
  border-radius:0;
  font-size:clamp(17px, 2vw, 21px);
  line-height:1.25;
}

.dry-records-guess .guessChoices button.is-correct{
  border-color:#86efac;
  background:#ecfdf3;
  color:#064e3b;
}

.dry-records-guess .guessChoices button.is-wrong{
  border-color:#fecdd3;
  background:#fff1f2;
  color:#881337;
}

.dry-records-guess .guessChoices button:disabled{
  cursor:default;
}

.dry-records-guess .guessActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.dry-records-guess .guessRoundTools{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.dry-records-guess .guessActions button,
.dry-records-guess .guessRoundTools button,
.dry-records-guess .guessNext{
  min-height:38px;
  padding:0 13px;
  border-radius:8px;
  font-size:14px;
}

.dry-records-guess .guessRoundTools button{
  color:#344054;
  background:#f9fafb;
}

.dry-records-guess .guessRoundTools button:hover{
  border-color:#98a2b3;
  background:#f2f4f7;
}

.dry-records-guess .guessActions .guessReportButton{
  border-color:#fed7aa;
  color:#9a3412;
  background:#fff7ed;
}

.dry-records-guess .guessActions .guessReportButton:hover{
  border-color:#fdba74;
  background:#ffedd5;
}

.dry-records-guess .guessActions .guessSimilarButton{
  border-color:#bae6fd;
  color:#075985;
  background:#f0f9ff;
}

.dry-records-guess .guessActions .guessSimilarButton:hover{
  border-color:#7dd3fc;
  background:#e0f2fe;
}

.dry-records-guess .guessActions .guessSimilarButton.has-similar-options{
  border-color:#86efac;
  color:#166534;
  background:#f0fdf4;
}

.dry-records-guess .guessActions .guessReportButton.is-disabled,
.dry-records-guess .guessActions .guessReportButton:disabled,
.dry-records-guess .guessActions .guessSimilarButton.is-disabled,
.dry-records-guess .guessActions .guessSimilarButton:disabled{
  color:#98a2b3;
  border-color:#e5e7eb;
  background:#f9fafb;
}

.dry-records-guess .guessFeedback{
  min-height:32px;
  margin-top:18px;
  color:#344054;
  font-size:18px;
  font-weight:750;
  transition:opacity .18s ease, transform .18s ease;
}

.dry-records-guess .guessFeedback.is-good{
  color:var(--guess-green);
  transform:translateY(-1px);
}

.dry-records-guess .guessFeedback.is-bad{
  color:var(--guess-red);
  transform:translateY(-1px);
}

.dry-records-guess .guessNext{
  margin-top:6px;
  color:#fff;
  border-color:var(--guess-ink);
  background:var(--guess-ink);
  opacity:.72;
}

.dry-records-guess .guessNext:hover{
  color:#fff;
  border-color:#000;
  background:#000;
}

@media (max-width:760px){
  .dry-records-guess .guessTopbar{
    min-height:64px;
    padding:10px 14px;
  }

  .dry-records-guess .guessBack{
    width:40px;
    height:40px;
  }

  .dry-records-guess .guessBrand strong{
    font-size:15px;
  }

  .dry-records-guess .guessScore strong{
    font-size:22px;
  }

  .dry-records-guess .guessIntro,
  .dry-records-guess .guessPlay,
  .dry-records-guess .guessEnd{
    width:min(100% - 28px, 980px);
    min-height:calc(100svh - 64px);
    padding:34px 0 38px;
  }

  .dry-records-guess .guessQuestion{
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
  }

  .dry-records-guess.is-clean-play .guessPlay{
    display:block;
  }

  .dry-records-guess.is-clean-play .guessQuestion{
    display:block;
    padding:22px 0 18px;
  }

  .dry-records-guess.is-clean-play .guessImageWrap{
    width:min(210px, 58vw);
    margin:0;
  }

  .dry-records-guess.is-clean-play .guessChoices{
    margin:0;
    max-width:none;
  }

  .dry-records-guess.is-clean-play .guessActions,
  .dry-records-guess.is-clean-play .guessRoundTools{
    max-width:none;
  }

  .dry-records-guess .guessImageWrap{
    width:min(210px, 58vw);
    flex-basis:auto;
  }

  .dry-records-guess .guessChoices button{
    min-height:54px;
    padding:13px 14px;
  }

  .dry-records-guess .guessModes,
  .dry-records-guess .guessActions,
  .dry-records-guess .guessRoundTools{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:7px;
  }

  .dry-records-guess .guessModes button,
  .dry-records-guess .guessActions button,
  .dry-records-guess .guessRoundTools button,
  .dry-records-guess .guessNext{
    width:100%;
    min-height:38px;
    padding:0 9px;
    font-size:13px;
  }
}

@keyframes guessQuestionIn{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes guessBriefingIn{
  from{
    opacity:0;
    transform:translateY(10px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes guessCleanIn{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}