.fhendo-game-picker {
  max-width:540px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin:0 auto 16px;
  padding:5px;
  border:1px solid #c9cbc8;
  border-radius:14px;
  background:#e0e1dd;
}

.fhendo-game-picker button {
  min-height:40px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#555b57;
  font-size:.68rem;
  font-weight:900;
  cursor:pointer;
}

.fhendo-game-picker button.active {
  background:#111;
  color:#fff;
  box-shadow:0 3px 0 #777;
}

.quest-hud {
  grid-template-columns:repeat(4,1fr);
}

.quest-game-screen canvas {
  min-height:0;
}

#kaplakriki-quest-view .game-dpad button {
  -webkit-user-select:none;
  user-select:none;
  touch-action:none;
}

#kaplakriki-quest-view .game-dpad button:active {
  background:#050705;
  outline:3px solid #8bac0f;
  outline-offset:-3px;
}

.quest-message {
  min-height:48px;
  justify-content:flex-start;
  text-align:left;
  line-height:1.35;
  text-transform:none;
}

.quest-action-f {
  background:#fff;
  color:#111;
  box-shadow:inset 3px 3px 0 rgba(255,255,255,.7),0 6px 0 #666;
}

.quest-action-h {
  background:#111;
  color:#fff;
  box-shadow:inset 3px 3px 0 #4a4a4a,0 6px 0 #666;
}

.quest-action-f:active {
  background:#e6e6e6;
}

.quest-action-h:active {
  background:#000;
}

.quest-objectives {
  max-width:540px;
  margin:16px auto 0;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}

.quest-objectives-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.quest-objectives h3 {
  margin:0;
  font-size:.86rem;
}

.quest-objectives p {
  margin:4px 0 0;
  color:var(--muted);
  font-size:.62rem;
  line-height:1.45;
}

.quest-progress {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}

.quest-progress div {
  display:grid;
  place-items:center;
  min-height:54px;
  padding:7px;
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--muted);
  font-size:.57rem;
  font-weight:850;
  text-align:center;
}

.quest-progress div::before {
  content:"○";
  font-size:1rem;
}

.quest-progress div.complete {
  border-color:#111;
  background:#111;
  color:#fff;
}

.quest-progress div.complete::before {
  content:"●";
}

.quest-best {
  color:var(--muted);
  font-size:.58rem;
  font-weight:800;
  text-align:right;
}

.quest-best strong {
  display:block;
  color:var(--ink);
  font-size:.78rem;
}

@media (max-width:680px) {
  .fhendo-game-picker { margin-bottom:13px; }
  .quest-objectives { padding:14px; }
  .quest-message { min-height:53px; font-size:.62rem; }
}
