.clue-screen {
  width: min(100%, 1040px);
  height: calc(100% - max(60px, 13cqh));
  margin: auto;
  padding: 3px 12px 26px;
  overflow: auto;
  scrollbar-width: thin;
}

.clue-heading {
  display: grid;
  grid-template-columns: clamp(72px, 15cqh, 128px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2cqw, 28px);
  margin-bottom: clamp(14px, 2.5cqh, 24px);
}

.clue-mystery {
  width: 100%;
  aspect-ratio: 1;
  padding: 9%;
  display: grid;
  place-items: center;
  border: 3px solid #132451;
  border-radius: 15px;
  background: radial-gradient(ellipse at 40% 35%, #70eaff, #1f6ed4 68%, #2455ad);
  box-shadow: inset 0 3px #bbf3ff6e, 0 5px #11346e;
}

.clue-mystery img { width: 100%; height: 100%; max-height: 110px; object-fit: contain; }
.clue-mystery.revealed {
  background: radial-gradient(ellipse at 50% 70%, #fff4bd, #efad44 57%, #c96d24);
}
.clue-mystery.revealed img { animation: clue-reveal 240ms ease-out; }
.clue-heading h1 { font-size: clamp(22px, 4.6cqh, 44px); line-height: 1.1; }
.clue-heading p { margin-top: 6px; font-size: clamp(11px, 1.7cqh, 16px); color: #e1f7ff; }
.clue-answer-name { color: #ffed88; font-size: clamp(15px, 2.5cqh, 24px); }
.clue-daily { display: block; margin-bottom: 4px; color: #fff2a4; font-size: clamp(10px, 1.4cqh, 14px); }

.clue-attempts {
  display: flex;
  align-items: center;
  gap: clamp(4px, .75cqw, 10px);
  margin-top: clamp(7px, 1.4cqh, 14px);
}

.clue-attempts i {
  width: clamp(12px, 2.45cqh, 25px);
  height: clamp(12px, 2.45cqh, 25px);
  display: grid;
  place-items: center;
  flex: none;
  border: 2px solid #102653;
  border-radius: 99px;
  background: linear-gradient(#ffe96e, #ffbc25);
  box-shadow: inset 0 2px #fff8ad7d;
  color: #fff;
  font: normal clamp(10px, 2cqh, 18px)/1 Brawl, sans-serif;
}

.clue-attempts i.miss { background: #b73155; box-shadow: inset 0 2px #ff93a94f; }
.clue-attempts i.hit { background: #17864d; box-shadow: inset 0 2px #a8ff834f; }
.clue-attempts b { white-space: nowrap; color: #eefbff; font-size: clamp(11px, 1.8cqh, 17px); }

.clue-best {
  display: grid;
  grid-template-columns: 36px auto;
  align-items: center;
  align-self: center;
  gap: 0 8px;
  padding: 8px 12px;
  border: 2px solid #16326b;
  border-radius: 11px;
  background: #08357ab8;
  box-shadow: inset 0 2px #78c5ff33;
}
.clue-best img { width: 36px; height: 36px; grid-row: span 2; }
.clue-best b { font-size: clamp(16px, 3cqh, 25px); color: #fff08d; }
.clue-best small { font-size: 10px; color: #c4e8ff; white-space: nowrap; }

.clue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.3cqw, 16px);
}

.clue-card {
  min-height: clamp(58px, 12cqh, 104px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: clamp(7px, 1.4cqh, 14px);
  text-align: center;
  border: 2px solid #122a5b;
  border-radius: 12px;
  background: linear-gradient(#1652ab, #133a86);
  box-shadow: inset 0 2px #68c7ff45, 0 3px #102e69;
}
.clue-card small { font-size: clamp(10px, 1.6cqh, 15px); color: #d9f0ff; }
.clue-card b { font-size: clamp(15px, 3.2cqh, 29px); line-height: 1.08; overflow-wrap: anywhere; }
.clue-card > span:not(.clue-lock) { color: #c2efff; font-size: clamp(9px, 1.35cqh, 13px); }
.clue-card.open { background: linear-gradient(#318cc8, #1963b7); }
.clue-card.current {
  border-color: #ffdf67;
  background: linear-gradient(#348ed2, #155ebb);
  box-shadow: inset 0 2px #e0f4ff7a, 0 3px #664810;
}
.clue-card.current b { color: #fff09a; }
.clue-card.locked small { color: #abd1f1; }
.clue-card-modifications b { font-size: clamp(11px, 2.2cqh, 19px); }
.clue-card-theme b, .clue-card-ownerClass b, .clue-card-class b {
  font-size: clamp(12px, 2.65cqh, 24px);
}
.clue-lock {
  position: relative;
  display: block;
  width: 16px;
  height: 13px;
  margin-top: 6px;
  border-radius: 3px;
  background: #91b9e5;
}
.clue-lock::before {
  content: '';
  position: absolute;
  width: 7px;
  height: 8px;
  top: -7px;
  left: 2px;
  border: 2px solid #91b9e5;
  border-radius: 7px 7px 0 0;
}

.clue-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(8px, 1.7cqw, 22px);
  margin: clamp(13px, 2.6cqh, 25px) 0 16px;
}
.clue-input-wrap { position: relative; }
.clue-input-wrap input {
  width: 100%;
  min-height: max(46px, 6.1cqh);
  padding: 9px 15px;
  border: 2px solid #112b61;
  border-radius: 10px;
  background: #0e347c;
  color: #fff;
  font-size: clamp(13px, 2.4cqh, 22px);
  user-select: text;
  box-shadow: inset 0 2px #081c4d6a;
}
.clue-input-wrap input::placeholder { color: #9ab8dc; }
.clue-form .action, .clue-end .action {
  min-height: 44px;
  padding: .9cqh clamp(9px, 1.8cqw, 24px);
  font-size: clamp(13px, 2.5cqh, 24px);
}
.clue-form .action:disabled, .clue-reward:disabled { opacity: .55; }

.clue-suggestions {
  position: absolute;
  z-index: 3;
  inset: calc(100% + 5px) 0 auto;
  max-height: min(240px, 35cqh);
  overflow: auto;
  padding: 4px;
  border: 2px solid #73baff;
  border-radius: 11px;
  background: #0f3475;
  box-shadow: 0 5px 16px #091b4ebd;
}
.clue-suggestions[hidden] { display: none; }
.clue-suggestion {
  width: 100%;
  min-height: 45px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  text-align: left;
}
.clue-suggestion:hover, .clue-suggestion.active { background: #2b76c8; }
.clue-suggestion img { width: 34px; height: 37px; }
.clue-suggestion span { overflow-wrap: anywhere; font-size: clamp(12px, 2cqh, 19px); }
.clue-suggestion small { color: #d6ebff; font-size: clamp(8px, 1.3cqh, 12px); }

.clue-end {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 10px 13px;
  margin: clamp(14px, 2.8cqh, 24px) 0 15px;
}
.clue-reward {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 7px 15px;
  border: 2px solid #132b61;
  border-radius: 9px;
  background: linear-gradient(#43b763, #197348);
  box-shadow: inset 0 2px #d7ff8b69, 0 4px #0b3e38;
}
.clue-reward.ad { background: linear-gradient(#a34dd9, #633197); box-shadow: inset 0 2px #f1c4ff69, 0 4px #311953; }
.clue-reward:hover:enabled { filter: brightness(1.12); transform: translateY(1px); }
.clue-reward b, .clue-reward small { display: block; }
.clue-reward b { font-size: clamp(12px, 2.1cqh, 19px); }
.clue-reward small { margin-top: 3px; font-size: clamp(9px, 1.4cqh, 13px); color: #f6edff; }
.clue-reward img { width: 30px; height: 30px; }

.clue-history h2 { font-size: clamp(12px, 1.9cqh, 17px); margin: 0 0 7px; color: #e0f1ff; }
.clue-history ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.clue-history li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 3px 8px;
  border: 1px solid #592952;
  border-radius: 7px;
  background: #74264bcc;
}
.clue-history li.hit { background: #166b4ed6; border-color: #125c46; }
.clue-history img { width: 30px; height: 33px; }
.clue-history b { font-size: clamp(10px, 1.8cqh, 16px); overflow-wrap: anywhere; }
.clue-history li > span { font-size: 20px; font-weight: bold; color: #ffd1dd; }
.clue-history li.hit > span { color: #a3ffbf; }

@keyframes clue-reveal {
  from { transform: scale(.88); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@media (max-aspect-ratio: 4/5) {
  .clue-screen { width: 100%; height: auto; padding-inline: 2px; overflow: visible; }
  .clue-heading { grid-template-columns: 65px minmax(0, 1fr); gap: 11px; }
  .clue-heading h1 { font-size: clamp(20px, 7.1vw, 32px); }
  .clue-best { display: none; }
  .clue-grid, .clue-history ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clue-card { min-height: clamp(64px, 10.5cqh, 90px); }
  .clue-card b { font-size: clamp(14px, 4.4vw, 22px); }
  .clue-card-modifications b { font-size: clamp(11px, 3.3vw, 17px); }
  .clue-form .action { min-width: 90px; }
  .clue-end .action { min-width: 110px; }
  .clue-reward { flex: 1 1 44%; min-height: 43px; padding: 6px 10px; }
  .clue-reward img { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .clue-mystery.revealed img { animation: none; }
}