/* Challenges: the list in each dossier and in the arcade */
.challenges { display: grid; gap: 10px; }
.ch-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ch-head h3 { margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pc); font-weight: 600; }
.ch-head span { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.ch-list { display: grid; gap: 8px; }
.ch-item {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; min-height: 64px; padding: 10px 12px; text-align: left; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line));
  background: color-mix(in srgb, var(--c) 7%, rgba(255,255,255,.02));
  transition: transform .15s, border-color .15s, background .15s;
}
.ch-item:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.ch-item:active { transform: scale(.98); }
.ch-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: rgba(255,255,255,.07); }
.ch-txt { min-width: 0; }
.ch-txt b { display: block; font-size: 15px; }
.ch-txt small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.ch-txt em { display: block; margin-top: 2px; font-style: normal; font-family: var(--f-mono); font-size: 11px; color: var(--c); }
.ch-state { font-family: var(--f-mono); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.ch-item.done .ch-state { background: var(--c); color: var(--ci); border-color: transparent; }

/* Modals: challenge + arcade. Centered cards on larger screens, bottom sheets on phones. */
.game-modal {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(5,10,20,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: fade .2s ease-out;
}
.game-modal.arcade { z-index: 48; }
@keyframes fade { from { opacity: 0; } }
.game-box {
  width: min(640px, 100%); max-height: min(860px, calc(100vh - 32px)); max-height: min(860px, calc(100dvh - 32px));
  overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 22px; background: var(--panel-solid);
  box-shadow: 0 30px 90px rgba(0,0,0,.5); padding: 22px; display: grid; gap: 16px; align-content: start;
  animation: rise .3s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes rise { from { transform: translateY(24px) scale(.97); opacity: 0; } }
.sheet-grip { display: none; width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.28); margin: 0 auto -6px; }
.game-head { display: flex; gap: 14px; align-items: flex-start; }
.game-head > div { flex: 1; min-width: 0; }
.game-head h2 { margin: 0; font-family: var(--f-display); font-weight: 400; color: var(--pc); font-size: clamp(22px, 6vw, 36px); line-height: 1.05; }
.game-head p { margin: 6px 0 0; color: var(--muted); }
.game-head .x { width: 44px; height: 44px; }
.pg-best { margin-top: 4px; font-family: var(--f-mono); font-size: 12px; color: var(--pc); min-height: 1em; }
.game-body { min-height: 240px; display: grid; place-items: center; align-content: center; gap: 14px; user-select: none; -webkit-user-select: none; }
.game-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.game-foot .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.game-foot .btn { padding: 10px 16px; font-size: 14px; }
.game-msg { flex: 1 1 220px; min-height: 1.5em; color: var(--muted); font-family: var(--f-mono); font-size: 13px; }
.game-msg.good { color: #8ee5a8; }
.game-msg.bad { color: #ff9892; }

.arcade-box { width: min(820px, 100%); }