/* PS3 World - "Can My PS3 Be Hacked?" (loaded after style.css) */

.hc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: start;
  margin: 8px 0 48px;
}

.hc-form {
  display: grid;
  gap: 22px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
}

.hc-field { display: grid; gap: 8px; }
.hc-field[hidden] { display: none; }

.hc-field label,
.hc-label {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.hc-opt { color: var(--text-3); font-weight: 500; }

.hc-field input,
.hc-field select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.hc-field input:focus,
.hc-field select:focus { border-color: var(--ps-blue-2); box-shadow: var(--ring); }

#hcModel { font-family: var(--font-mono); letter-spacing: 0.5px; text-transform: uppercase; }
#hcModel::placeholder { text-transform: none; letter-spacing: 0; font-family: inherit; }

.hc-help { margin: 0; color: var(--text-3); font-size: 13px; line-height: 1.5; }

.hc-looks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.hc-look {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}

.hc-look:hover { border-color: color-mix(in srgb, var(--ps-sky) 50%, transparent); color: var(--text); }
.hc-look:focus-visible { outline: none; box-shadow: var(--ring); }
.hc-look[aria-checked="true"] {
  border-color: var(--ps-sky);
  background: color-mix(in srgb, var(--ps-sky) 14%, transparent);
  color: #fff;
}

.hc-look-name { font-size: 14px; font-weight: 700; }
.hc-look-desc { color: var(--text-3); font-size: 12px; line-height: 1.4; }
.hc-look[aria-checked="true"] .hc-look-desc { color: var(--text-2); }

/* ---- Result ---- */
.hc-result:empty::before {
  content: 'Your answer appears here.';
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 26px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  color: var(--text-3);
  font-size: 15px;
}

.hc-model {
  margin: 0 0 10px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hc-card {
  --hc: var(--ps-sky);
  padding: 26px;
  border: 1px solid color-mix(in srgb, var(--hc) 45%, var(--border));
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--hc) 14%, transparent), transparent 60%),
    var(--card);
}

.hc-card--yes   { --hc: #3ddc84; }
.hc-card--hen   { --hc: #f5a524; }
.hc-card--maybe { --hc: #4a9eff; }

.hc-verdict { margin: 0 0 10px; }

.hc-badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--hc) 20%, transparent);
  color: color-mix(in srgb, var(--hc) 75%, #fff);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hc-title { margin: 0 0 12px; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; }

.hc-card p,
.hc-card li { color: var(--text-2); font-size: 15px; line-height: 1.6; }
.hc-card p { margin: 0 0 12px; }
.hc-card strong { color: var(--text); }
.hc-card ul { margin: 0 0 12px; padding-left: 20px; }

.hc-next {
  margin: 18px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  letter-spacing: 0.3px;
}

.hc-steps { margin: 0; padding-left: 22px; }
.hc-steps li { margin: 0 0 8px; }
.hc-steps li::marker { color: var(--hc); font-weight: 800; }

.hc-good, .hc-warn {
  padding: 10px 14px;
  border-radius: 10px;
}
.hc-good { background: rgba(61, 220, 132, 0.1); }
.hc-warn { background: rgba(255, 107, 107, 0.12); }
.hc-card .hc-muted { color: var(--text-3); font-size: 14px; }

/* ---- Reference table ---- */
.hc-facts { margin: 0 0 56px; }
.hc-facts h2 { margin-bottom: 16px; }

.hc-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
.hc-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.hc-table th, .hc-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: left; }
.hc-table th { background: var(--card-2); color: var(--text); font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; }
.hc-table td { color: var(--text-2); }
.hc-table tr:last-child td { border-bottom: 0; }
.hc-table .yes   { color: #3ddc84; font-weight: 700; }
.hc-table .no    { color: #ff8a8a; font-weight: 700; }
.hc-table .maybe { color: #f5a524; font-weight: 700; }

.hc-note { margin: 14px 0 0; color: var(--text-3); font-size: 14px; line-height: 1.6; }
.hc-note strong { color: var(--text-2); }

@media (max-width: 860px) {
  .hc { grid-template-columns: minmax(0, 1fr); }
  .hc-form, .hc-card { padding: 20px; }
  .hc-looks { grid-template-columns: minmax(0, 1fr); }
  .hc-look { grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; }
}

@media (max-width: 600px) {
  .hc-table { min-width: 0; font-size: 13px; }
  .hc-table th, .hc-table td { padding: 10px; }
  .hc-table th { font-size: 11px; letter-spacing: 0.4px; }
}

/* Atlas is a tall image: size it by height so it fills the hero like the
   wider characters on other pages instead of running down the whole page */
.page-hero .page-char {
  width: auto;
  height: 600px;
  max-width: none;
}

@media (max-width: 600px) {
  .page-hero .page-char { height: 460px; }
}