/* WITCRAFT Practice Hall monthly competition V1 — isolated phc-* styles */
.phc-root { width: 100%; color: var(--text); }
.phc-shell { display: grid; gap: 16px; width: 100%; max-width: 980px; margin: 0 auto; }
.phc-hero, .phc-question, .phc-board, .phc-subject-card {
  border: 1px solid color-mix(in srgb, var(--violet) 34%, transparent);
  background: linear-gradient(145deg, rgba(28,22,65,.94), rgba(14,18,44,.94));
  box-shadow: 0 18px 48px rgba(4,5,18,.24);
}
.phc-hero { border-radius: 22px; padding: 22px; text-align: center; }
.phc-rune { font-size: 44px; filter: drop-shadow(0 0 16px rgba(167,104,255,.6)); }
.phc-hero h2 { margin: 8px 0 4px; font: 700 clamp(22px,3vw,32px)/1.2 "Cinzel Decorative","IBM Plex Sans Thai",sans-serif; }
.phc-hero p, .phc-hero small { margin: 0; color: var(--muted); line-height: 1.55; }
.phc-status { display: flex; justify-content: center; gap: 8px 16px; flex-wrap: wrap; margin: 14px auto 10px; }
.phc-status strong { color: #d8c6ff; }
.phc-status span { color: var(--muted); }
.phc-prizes { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.phc-prizes span { padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.07); font-weight: 700; }
.phc-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.phc-subject-card { border-radius: 18px; padding: 16px; display: grid; gap: 14px; }
.phc-subject-head { display: flex; align-items: center; gap: 10px; }
.phc-subject-emoji { font-size: 32px; }
.phc-subject-head h3 { margin: 0; font-size: 17px; }
.phc-subject-head p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.phc-stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.phc-stat-grid div { min-width: 0; padding: 8px 4px; text-align: center; border-radius: 10px; background: rgba(255,255,255,.05); }
.phc-stat-grid span, .phc-stat-grid b { display: block; }
.phc-stat-grid span { color: var(--muted); font-size: 10px; }
.phc-stat-grid b, .phc-board-score, .phc-rank { font-variant-numeric: tabular-nums; }
.phc-stat-grid b { margin-top: 3px; font-size: 16px; }
.phc-action, .phc-submit, .phc-secondary, .phc-inline-btn, .phc-back, .phc-board-tab {
  min-height: 44px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; font: inherit;
}
.phc-action, .phc-submit { padding: 10px 14px; color: #fff; font-weight: 800; background: linear-gradient(135deg,#7c3aed,#4f46e5); }
.phc-action:disabled, .phc-submit:disabled { cursor: not-allowed; opacity: .48; }
.phc-secondary, .phc-back, .phc-inline-btn { padding: 9px 12px; color: var(--text); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.phc-inline-btn { min-height: 44px; margin-left: 6px; }
.phc-loading, .phc-notice, .phc-board-empty { padding: 18px; border-radius: 14px; text-align: center; color: var(--muted); background: rgba(255,255,255,.05); }
.phc-notice.is-error { color: #fecaca; border: 1px solid rgba(248,113,113,.28); }
.phc-board { border-radius: 20px; padding: 18px; }
.phc-board-title h3 { margin: 0; }
.phc-board-title p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.phc-board-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 14px 0; }
.phc-board-tab { padding: 8px; color: var(--muted); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.phc-board-tab.is-active { color: #fff; border-color: rgba(167,104,255,.7); background: rgba(124,58,237,.24); }
.phc-board-list { display: grid; gap: 6px; }
.phc-board-row { display: grid; grid-template-columns: 44px minmax(0,1fr) 76px; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 11px; background: rgba(255,255,255,.04); }
.phc-board-row.is-self { outline: 1px solid rgba(45,212,191,.55); background: rgba(20,184,166,.1); }
.phc-board-row.is-my-rank { margin-top: 8px; border-top: 1px dashed rgba(255,255,255,.2); }
.phc-rank { text-align: center; font-weight: 900; }
.phc-player { min-width: 0; }
.phc-player b, .phc-player small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.phc-player small, .phc-board-score small { color: var(--muted); font-size: 10px; }
.phc-board-score { text-align: right; font-weight: 900; }
.phc-board-score small { display: block; }
.phc-attempt-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.phc-attempt-head > span { padding: 8px 12px; border-radius: 999px; background: rgba(124,58,237,.18); font-weight: 800; }
.phc-question { border-radius: 20px; padding: clamp(14px,3vw,24px); display: grid; gap: 18px; }
.phc-question-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.phc-question-meta b { color: #d8c6ff; }
.phc-question-text { font-size: clamp(16px,2.2vw,20px); line-height: 1.72; overflow-wrap: anywhere; }
.phc-question-figure { margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: #fff; }
.phc-question-figure a { display: block; cursor: zoom-in; }
.phc-question-figure img { display: block; width: 100%; height: auto; background: #fff; }
.phc-question-figure figcaption { padding: 8px 12px; color: #d8c6ff; text-align: center; background: #17152f; font-size: 12px; }
.phc-question-fallback { padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.04); }
.phc-question-fallback summary { min-height: 44px; display: flex; align-items: center; color: #d8c6ff; cursor: pointer; font-weight: 700; }
.phc-question-fallback .phc-question-text { margin-top: 8px; font-size: 15px; }
.phc-question-fallback ol { display: grid; gap: 7px; margin: 10px 0 0; padding-left: 24px; line-height: 1.55; }
.phc-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.phc-choices { display: grid; gap: 9px; }
.phc-choices.is-image-choices { grid-template-columns: repeat(5,minmax(0,1fr)); }
.phc-choice { width: 100%; min-height: 50px; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; color: var(--text); text-align: left; background: rgba(255,255,255,.04); cursor: pointer; }
.phc-choice > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(124,58,237,.2); }
.phc-choice > b { font-weight: 500; line-height: 1.55; }
.phc-choice.is-image-choice { min-width: 0; min-height: 76px; grid-template-columns: 1fr; justify-items: center; gap: 3px; padding: 7px 3px; text-align: center; }
.phc-choice.is-image-choice > span { width: 32px; height: 32px; }
.phc-image-choice-copy { max-width: 100%; font-size: 12px; white-space: nowrap; }
.phc-choice.is-selected { border-color: #a78bfa; background: rgba(124,58,237,.18); box-shadow: 0 0 0 2px rgba(167,139,250,.14); }
.phc-choice:disabled { cursor: default; opacity: .82; }
.phc-submit { width: 100%; }
.phc-result { display: grid; gap: 10px; padding: 16px; border-radius: 15px; }
.phc-result.is-correct { border: 1px solid rgba(52,211,153,.35); background: rgba(16,185,129,.1); }
.phc-result.is-wrong { border: 1px solid rgba(248,113,113,.35); background: rgba(239,68,68,.09); }
.phc-result h3, .phc-result p { margin: 0; }
.phc-answer-reveal { display: flex; align-items: center; gap: 12px; }
.phc-answer-reveal span { color: var(--muted); }
.phc-answer-reveal b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); font-size: 18px; }
.phc-explanation { padding: 12px; border-radius: 12px; line-height: 1.65; background: rgba(0,0,0,.14); overflow-wrap: anywhere; }
.phc-source { color: var(--muted); }
.phc-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 760px) {
  .phc-cards { grid-template-columns: 1fr; }
  .phc-hero { padding: 16px 12px; }
  .phc-rune { font-size: 34px; }
  .phc-board { padding: 13px; }
}
@media (max-width: 480px) {
  .phc-shell { gap: 12px; }
  .phc-choices.is-image-choices { gap: 5px; }
  .phc-choice.is-image-choice { min-height: 72px; }
  .phc-board-title p { display: none; }
  .phc-board-row { grid-template-columns: 36px minmax(0,1fr) 64px; padding: 8px 6px; }
  .phc-question-meta { display: grid; }
  .phc-result-actions { grid-template-columns: 1fr; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .phc-hero { padding: 10px; }
  .phc-rune { font-size: 26px; }
  .phc-hero h2 { margin: 3px 0; font-size: 20px; }
  .phc-cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
