/* phone.css — crew lobby and the controller. */

/* ── crew lobby ─────────────────────────────────────────────────────────── */
.crew-lobby { justify-content: center; text-align: center; gap: 16px; }
.cl-code { font-family: var(--font-display); letter-spacing: 0.2em; color: var(--ink-faint); font-size: 18px; }
.cl-who { font-family: var(--font-display); font-size: clamp(34px, 11vw, 60px); text-transform: uppercase; line-height: 1; }
.cl-btnwrap { padding: 10px 0 18px; }
.cl-test { width: min(62vw, 260px); height: min(62vw, 260px); }
.cl-status {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.06em;
  color: var(--amber);
  animation: blink 1.2s steps(2, start) infinite;
}
.cl-status.ok { color: var(--ok); animation: none; }
@keyframes blink { 50% { opacity: 0.35; } }
.cl-wait { color: var(--ink-dim); margin: 0; max-width: 30ch; }
.cl-crew { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cl-mate {
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 999px;
  background: hsl(var(--hue) 55% 22%);
  border: 2px solid hsl(var(--hue) 70% 55%);
  font-size: 16px;
}
.cl-mate.me { background: hsl(var(--hue) 70% 45%); color: #000; }
.cl-mate.off { opacity: 0.4; }

/* ── controller ─────────────────────────────────────────────────────────── */
body[data-screen='phone'] { overflow: hidden; overscroll-behavior: none; touch-action: none; }
.pad {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(8px + var(--safe-t)) 10px calc(10px + var(--safe-b));
  gap: 8px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.pad-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 22px; }
.pad-phase { font-family: var(--font-display); letter-spacing: 0.08em; font-size: 14px; color: var(--ink-faint); }
.pad.calib .pad-phase { color: var(--amber); animation: blink 1.4s steps(2, start) infinite; }
.pad-streak { font-family: var(--font-display); color: var(--amber); font-size: 18px; letter-spacing: 0.05em; }
.pad-cards { display: flex; flex-direction: column; gap: 8px; }
.pad-cards:empty { display: none; }

.pad-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
}
.pad-grid[data-n='2'] { grid-template-rows: 1fr 1fr; }
.pad-grid[data-n='3'], .pad-grid[data-n='4'] { grid-template-columns: 1fr 1fr; }
.pad-grid[data-n='3'] > :first-child { grid-column: span 2; }
.pad-grid[data-n='5'], .pad-grid[data-n='6'] { grid-template-columns: 1fr 1fr; }
.pad-grid[data-n='5'] > :first-child { grid-column: span 2; }
.pad-grid[data-n='7'], .pad-grid[data-n='8'], .pad-grid[data-n='9'] { grid-template-columns: 1fr 1fr 1fr; }
.pad-grid[data-n='10'], .pad-grid[data-n='11'], .pad-grid[data-n='12'] { grid-template-columns: 1fr 1fr 1fr; }
.pad-none { display: flex; align-items: center; justify-content: center; color: var(--ink-dim); font-family: var(--font-display); font-size: 22px; letter-spacing: 0.05em; text-align: center; }

.pbtn {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  touch-action: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  container-type: size;
}
.pbtn-dome {
  position: relative;
  width: min(92cqw, 88cqh);
  height: min(92cqw, 88cqh);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--c) 45%, #fff) 0 10%, var(--c) 40%, color-mix(in srgb, var(--c) 55%, #000) 78%);
  box-shadow: 0 min(4cqh, 14px) 0 var(--d), 0 min(6cqh, 22px) min(8cqh, 30px) rgba(0, 0, 0, 0.6), inset 0 -8px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.04s, box-shadow 0.04s, filter 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pbtn.down .pbtn-dome {
  transform: translateY(min(3.6cqh, 12px));
  box-shadow: 0 2px 0 var(--d), 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 -4px 12px rgba(0, 0, 0, 0.35);
  filter: brightness(1.25);
}
.pbtn-emb, .pbtn-ico { position: absolute; inset: 22%; display: flex; }
.pbtn-emb svg, .pbtn-ico svg { width: 100%; height: 100%; }
.pbtn.known .pbtn-emb { inset: 12%; opacity: 0.35; }
.pbtn-ico { inset: 28%; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.4)); }
.pbtn-lbl {
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  font-size: clamp(12px, 7cqmin, 22px);
  color: var(--ink);
  text-shadow: 0 2px 0 #000;
  pointer-events: none;
}
.pbtn-flt {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--amber);
  color: #000;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
}
.pbtn-flt:empty { display: none; }
.pbtn.faulty .pbtn-dome { animation: jitter 0.2s infinite; }
@keyframes jitter { 25% { translate: 1px 0; } 75% { translate: -1px 0; } }
.pbtn.fresh .pbtn-dome { animation: pop 0.6s ease-out; }
@keyframes pop { 0% { transform: scale(0.3); } 60% { transform: scale(1.08); } }

/* cards */
.card {
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--panel2);
  border: 2px solid var(--line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  animation: card-in 0.3s ease-out;
}
@keyframes card-in { from { transform: translateY(-16px) scale(0.96); opacity: 0; } }
.offer { border-color: var(--amber); background: linear-gradient(180deg, #2b2410, #1a1608); }
.offer-head { display: flex; align-items: center; gap: 10px; }
.offer-ico { font-size: 30px; line-height: 1; }
.offer-title { font-family: var(--font-display); font-size: 26px; letter-spacing: 0.04em; flex: 1; line-height: 1; }
.offer-teaser { color: var(--ink-dim); margin: 4px 0 6px; font-size: 15px; }
.offer-meta { display: flex; gap: 10px; align-items: center; font-family: var(--font-display); letter-spacing: 0.04em; font-size: 16px; }
.offer-stars { color: var(--amber); }
.offer-risk { color: var(--red); }
.offer-reward { margin-left: auto; color: var(--ok); font-size: 20px; }
.offer-bar { height: 6px; border-radius: 3px; background: #000; margin: 8px 0; overflow: hidden; }
.offer-bar i { display: block; height: 100%; background: var(--amber); transition: width 0.25s linear; }
.offer-accept { min-height: 54px; font-size: 26px; }
.offer-foot { font-size: 12px; color: var(--ink-faint); text-align: center; margin-top: 6px; }

.contract { border-color: var(--shield); background: linear-gradient(180deg, #0f2a38, #0a1822); }
.contract.urgent { border-color: var(--red); animation: urgent 0.35s infinite alternate; }
@keyframes urgent { to { background: #3a0d0d; } }
.ch-pts { font-family: var(--font-display); color: var(--ok); font-size: 20px; }
.ch-tell { color: var(--shield); font-family: var(--font-display); letter-spacing: 0.05em; margin: 2px 0 4px; }
.ch-note { color: var(--amber); font-family: var(--font-display); font-size: 30px; letter-spacing: 0.04em; margin: 4px 0; text-align: center; }
.ch-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ch-lines li { display: flex; gap: 8px; align-items: baseline; font-size: 17px; color: #ffb3aa; }
.ch-lines li.ok { color: var(--ok); }
.ch-tick { font-family: var(--font-display); width: 1em; }
.ch-txt { flex: 1; }
.ch-now { font-family: var(--font-mono); font-size: 14px; color: var(--ink-dim); }
.ch-prog { height: 10px; border-radius: 5px; background: #000; margin-top: 8px; overflow: hidden; }
.ch-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--shield), var(--ok)); transition: width 0.2s; }
.ch-left { font-size: 12px; color: var(--ink-faint); text-align: right; margin-top: 3px; }

.info { border-color: var(--weapon); background: linear-gradient(180deg, #2c1024, #1a0a16); }
.info-head { font-family: var(--font-display); letter-spacing: 0.05em; font-size: 18px; color: var(--weapon); display: flex; justify-content: space-between; }
.info-secret { font-size: 12px; background: var(--weapon); color: #000; border-radius: 6px; padding: 1px 6px; }
.info-txt { font-size: 16px; margin-top: 4px; }

.pad-flash {
  position: absolute;
  inset: 30% 6% auto;
  background: var(--amber);
  color: #000;
  border-radius: 18px;
  padding: 18px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  animation: card-in 0.25s ease-out;
  z-index: 5;
}
.pf-title { font-family: var(--font-display); font-size: 30px; letter-spacing: 0.04em; }
.pf-sub { font-size: 15px; margin-top: 4px; }

.pad-results { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.pr-title { font-family: var(--font-display); font-size: 40px; letter-spacing: 0.03em; line-height: 1; }
.pr-title.good { color: var(--ok); }
.pr-title.bad { color: var(--red); }
.pr-score { font-family: var(--font-display); font-size: 64px; line-height: 1; color: var(--amber); }
.award { border-color: var(--amber); text-align: left; width: 100%; }
.award-title { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.04em; color: var(--amber); }
.award-txt { color: var(--ink-dim); }