/* ── NO WAY HOA ────────────────────────────────────────────────────────────
   Loaded only on /hoa. Two distinct skins on purpose: the portal is drab,
   gray, Arial-era government-form energy; the arcade stage overlay (full
   screen, fixed) is the loud colorful payoff every time you tap Appeal. */

body.hoa-noscroll { overflow: hidden; }

.hoa-wrap {
  --hoa-gray:      #E4E3E0;
  --hoa-gray-dark: #C9C7C2;
  --hoa-panel:     #F4F3F1;
  --hoa-line:      #A8A6A0;
  --hoa-ink:       #33322F;
  --hoa-muted:     #6E6C67;
  --hoa-blue:      #1A4FA0;
  --hoa-green:     #2F6B34;
  --hoa-red:       #A32638;
  max-width: 560px;
  margin: 0 auto;
  padding: 0.9rem 0.75rem 3rem;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--hoa-ink);
}

/* ── Header ── */
.hoa-portal-header {
  display: flex; align-items: center; gap: 0.65rem;
  background: var(--hoa-panel);
  border: 1px solid var(--hoa-line);
  border-bottom: 3px solid var(--hoa-blue);
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.6rem;
}
.hoa-seal {
  flex: 0 0 auto;
  width: 2.4rem; height: 2.4rem;
  border: 2px solid var(--hoa-ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  color: var(--hoa-ink);
  background: #fff;
}
.hoa-portal-title {
  font-size: 1.05rem; font-weight: bold; letter-spacing: 0.01em;
  color: var(--hoa-ink); line-height: 1.2;
}
.hoa-portal-sub { font-size: 0.68rem; color: var(--hoa-muted); }
.hoa-mute-btn {
  margin-left: auto;
  background: #fff; border: 1px solid var(--hoa-line);
  width: 2rem; height: 2rem; border-radius: 2px;
  font-size: 0.95rem; cursor: pointer;
}
.hoa-mute-btn:hover { background: var(--hoa-gray); }

/* ── Status bar ── */
.hoa-status-bar {
  background: #FCEFC7;
  border: 1px solid #D8C48A;
  color: #6B5410;
  font-size: 0.82rem; font-weight: bold;
  padding: 0.45rem 0.7rem;
  margin-bottom: 0.75rem;
}

/* ── Case list ── */
.hoa-case-list { display: flex; flex-direction: column; gap: 0.55rem; }
.hoa-case-row {
  background: var(--hoa-panel);
  border: 1px solid var(--hoa-line);
  transition: opacity 0.2s;
}
.hoa-case-row--cleared, .hoa-case-row--denied { opacity: 0.72; }
.hoa-case-head {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  background: var(--hoa-gray);
  border-bottom: 1px solid var(--hoa-line);
}
.hoa-case-num { font-size: 0.72rem; color: var(--hoa-muted); font-weight: bold; }
.hoa-case-icon { font-size: 1.1rem; }
.hoa-case-titlewrap { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.hoa-case-title { font-size: 0.88rem; font-weight: bold; color: var(--hoa-ink); }
.hoa-case-code { font-size: 0.64rem; color: var(--hoa-muted); font-family: 'Courier New', monospace; }
.hoa-case-badge {
  flex: 0 0 auto;
  font-size: 0.62rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.2rem 0.45rem; border-radius: 2px;
  background: #fff; border: 1px solid var(--hoa-line); color: var(--hoa-muted);
}
.hoa-case-row--cleared .hoa-case-badge { color: var(--hoa-green); border-color: var(--hoa-green); }
.hoa-case-row--denied .hoa-case-badge { color: var(--hoa-red); border-color: var(--hoa-red); }

.hoa-case-body { padding: 0.6rem 0.7rem 0.7rem; }
.hoa-evidence-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.hoa-pdf-icon { font-size: 0.95rem; }
.hoa-evidence-text { font-size: 0.72rem; color: var(--hoa-blue); text-decoration: underline; }
.hoa-case-desc { font-size: 0.78rem; color: var(--hoa-ink); margin-bottom: 0.55rem; line-height: 1.45; }

.hoa-case-actions { display: flex; align-items: center; gap: 0.5rem; }
.hoa-btn {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.76rem; font-weight: bold;
  padding: 0.42rem 0.75rem;
  border-radius: 2px; cursor: pointer;
  border: 1px solid var(--hoa-line);
  background: linear-gradient(#fdfdfc, #e2e0db);
}
.hoa-btn:active { background: linear-gradient(#dcdad4, #c9c7c2); }
.hoa-btn-view { color: var(--hoa-ink); }
.hoa-btn-appeal {
  color: #fff; border-color: #123a78;
  background: linear-gradient(#2c65c9, var(--hoa-blue));
}
.hoa-btn-appeal:active { background: linear-gradient(#1a4fa0, #123a78); }
.hoa-resolved-tag { font-size: 0.76rem; font-weight: bold; color: var(--hoa-muted); }
.hoa-resolved-tag[class*="--cleared"] { color: var(--hoa-green); }
.hoa-resolved-tag[class*="--denied"] { color: var(--hoa-red); }

.hoa-portal-footer {
  margin-top: 1.1rem; text-align: center;
  font-size: 0.65rem; color: var(--hoa-muted); line-height: 1.6;
}

/* ── Arcade stage overlay ── */
.hoa-stage-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column;
  background: radial-gradient(circle at 50% 20%, #3d2a6b, #1a1330 70%);
  color: #fff;
  overflow: hidden;
  touch-action: none;
}
.hoa-stage-overlay[hidden] { display: none; }
.hoa-stage-enter { animation: hoa-tear-in 0.45s cubic-bezier(.2,.9,.3,1); }
.hoa-stage-exit { animation: hoa-fold-out 0.35s ease-in forwards; }
@keyframes hoa-tear-in {
  from { transform: scale(0.4) rotate(-6deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes hoa-fold-out {
  from { transform: scale(1) rotate(0deg); opacity: 1; }
  to   { transform: scale(0.86) rotate(5deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hoa-stage-enter, .hoa-stage-exit { animation: none; }
}

.hoa-stage-inner {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding: max(1rem, env(safe-area-inset-top)) 1rem 1.2rem;
}
.hoa-stage-inner[hidden] { display: none; }
.hoa-stage-hud { flex: 0 0 auto; text-align: center; margin-bottom: 1rem; }
.hoa-stage-title {
  display: block;
  font-family: 'Oswald', Arial, sans-serif;
  font-weight: 600; letter-spacing: 0.03em;
  font-size: clamp(1.1rem, 5vw, 1.5rem);
  margin-bottom: 0.6rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.hoa-timer-bar {
  width: min(90vw, 360px); height: 10px; margin: 0 auto;
  background: rgba(255,255,255,0.18);
  border-radius: 6px; overflow: hidden;
}
.hoa-timer-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #FFD166, #EF476F);
  border-radius: 6px;
}
.hoa-stage-play {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  min-height: 0;
}

/* ── Tap mechanic ── */
.hoa-tap-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.hoa-tap-label { font-family: 'Oswald', Arial, sans-serif; font-size: 1.4rem; font-weight: 600; letter-spacing: 0.08em; }
.hoa-tap-btn {
  width: min(48vw, 190px); height: min(48vw, 190px);
  border-radius: 50%; border: 6px solid rgba(255,255,255,0.5);
  background: radial-gradient(circle at 35% 30%, #FFD166, #EF476F 80%);
  font-size: min(20vw, 80px);
  box-shadow: 0 8px 0 rgba(0,0,0,0.25);
  cursor: pointer; touch-action: none;
  transform: translateY(0);
}
.hoa-tap-btn.hoa-pulse { animation: hoa-tap-pulse 0.16s ease-out; }
@keyframes hoa-tap-pulse {
  0% { transform: scale(0.85) translateY(6px); box-shadow: 0 2px 0 rgba(0,0,0,0.25); }
  100% { transform: scale(1) translateY(0); box-shadow: 0 8px 0 rgba(0,0,0,0.25); }
}
.hoa-tap-count { font-size: 1.1rem; font-weight: bold; }

/* ── Hold mechanic ── */
.hoa-hold-wrap { display: flex; align-items: center; gap: 1.4rem; }
.hoa-hold-track {
  position: relative;
  width: 34px; height: min(48vh, 320px);
  background: rgba(255,255,255,0.15);
  border-radius: 17px; overflow: hidden;
  border: 3px solid rgba(255,255,255,0.4);
}
.hoa-hold-zone { position: absolute; left: 0; right: 0; background: rgba(255,255,255,0.35); }
.hoa-hold-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(0deg, #06D6A0, #FFD166);
}
.hoa-hold-btn {
  width: min(42vw, 160px); height: min(42vw, 160px);
  border-radius: 50%; border: 6px solid rgba(255,255,255,0.5);
  background: radial-gradient(circle at 35% 30%, #06D6A0, #118AB2 85%);
  font-size: min(16vw, 64px);
  cursor: pointer; touch-action: none;
  transition: transform 0.1s;
}
.hoa-hold-btn.hoa-active { transform: scale(0.92); }

/* ── Drag mechanic ── */
.hoa-drag-wrap {
  position: relative;
  width: 100%; max-width: 420px; height: min(55vh, 360px);
  background: rgba(255,255,255,0.08);
  border: 2px dashed rgba(255,255,255,0.35);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.hoa-drag-zone {
  position: absolute; right: 8%; top: 50%; transform: translateY(-50%);
  width: 34%; height: 60%;
  border: 3px dashed #06D6A0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', Arial, sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em;
  color: #06D6A0;
}
.hoa-drag-edge-hint {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 1.8rem; opacity: 0.6; animation: hoa-hint-pulse 1.1s ease-in-out infinite;
}
.hoa-drag-edge-hint--l { left: 6px; }
.hoa-drag-edge-hint--r { right: 6px; }
@keyframes hoa-hint-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 0.85; } }
.hoa-drag-item {
  font-size: min(18vw, 72px);
  cursor: grab; touch-action: none;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,0.35));
}
.hoa-drag-item.hoa-dragging { cursor: grabbing; z-index: 2; }

/* ── Swipe / chalk mechanic ── */
.hoa-swipe-wrap {
  display: grid; gap: 6px;
  width: min(80vw, 320px); height: min(80vw, 320px);
  touch-action: none;
}
.hoa-chalk-cell {
  background: repeating-linear-gradient(45deg, #FFD166, #FFD166 6px, #FDE7A8 6px, #FDE7A8 12px);
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 6px;
  transition: opacity 0.15s, transform 0.15s;
}
.hoa-chalk-cell.hoa-erased { opacity: 0; transform: scale(0.7); }

/* ── Stop / timing mechanic ── */
.hoa-stop-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; width: 100%; }
.hoa-stop-track {
  position: relative;
  width: min(90vw, 380px); height: 20px;
  background: rgba(255,255,255,0.15);
  border-radius: 10px; border: 3px solid rgba(255,255,255,0.4);
}
.hoa-stop-zone { position: absolute; top: -3px; bottom: -3px; background: rgba(6,214,160,0.55); border-radius: 8px; }
.hoa-stop-needle {
  position: absolute; top: -8px; bottom: -8px;
  width: 6px; left: 0%;
  background: #fff; border-radius: 3px;
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(255,255,255,0.8);
}
.hoa-stop-needle--hit { background: #06D6A0; }
.hoa-stop-needle--miss { background: #EF476F; }
.hoa-stop-btn {
  font-family: 'Oswald', Arial, sans-serif; font-weight: 600; letter-spacing: 0.08em;
  width: min(45vw, 170px); height: min(45vw, 170px);
  border-radius: 50%; border: 6px solid rgba(255,255,255,0.5);
  background: radial-gradient(circle at 35% 30%, #EF476F, #A32638 85%);
  color: #fff; font-size: 1.3rem;
  cursor: pointer; touch-action: none;
}
.hoa-stop-btn:active { transform: scale(0.94); }

/* ── Sort / weeds mechanic ── */
.hoa-sort-wrap {
  display: grid; gap: 10px;
  width: min(80vw, 320px);
}
.hoa-sort-cell {
  aspect-ratio: 1;
  font-size: min(10vw, 42px);
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.12);
  cursor: pointer; touch-action: none;
  transition: opacity 0.15s, transform 0.15s;
}
.hoa-sort-cell.hoa-sort-gone { opacity: 0; transform: scale(0.5); pointer-events: none; }
.hoa-sort-cell.hoa-sort-wrong { animation: hoa-shake 0.2s; background: rgba(239,71,111,0.4); }
@keyframes hoa-shake {
  25% { transform: translateX(-5px); } 75% { transform: translateX(5px); }
}

/* ── Verdict stamp ── */
.hoa-verdict {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.8rem;
  opacity: 0; transition: opacity 0.2s;
}
.hoa-verdict--show { opacity: 1; }
.hoa-verdict[hidden] { display: none; }
.hoa-stamp {
  font-family: 'Oswald', Arial, sans-serif;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: clamp(1.5rem, 8vw, 2.4rem);
  padding: 0.5rem 1.2rem;
  border: 5px solid currentColor; border-radius: 10px;
  transform: scale(2.2) rotate(-8deg); opacity: 0;
  transition: transform 0.35s cubic-bezier(.2,1.6,.4,1), opacity 0.2s;
}
.hoa-stamp--show { transform: scale(1) rotate(-8deg); opacity: 1; }
.hoa-stamp--accept { color: #06D6A0; }
.hoa-stamp--deny { color: #EF476F; }
.hoa-verdict-line { font-size: 1rem; color: rgba(255,255,255,0.85); }

/* ── Compliance report modal ── */
.hoa-modal-backdrop {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(20,19,26,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.hoa-modal-backdrop[hidden] { display: none; }
.hoa-modal {
  background: var(--hoa-panel, #F4F3F1);
  color: var(--hoa-ink, #33322F);
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 6px;
  max-width: 420px; width: 100%;
  padding: 1.4rem 1.3rem;
  max-height: 85vh; overflow-y: auto;
}
.hoa-modal h2 {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 1.3rem; margin-bottom: 0.5rem;
}
.hoa-report-grid { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.9rem 0 1.2rem; }
.hoa-report-item {
  font-size: 0.85rem; padding: 0.4rem 0.6rem;
  border-radius: 4px; border: 1px solid var(--hoa-line, #A8A6A0);
}
.hoa-report-item--win { background: #E4F7EE; border-color: #2F6B34; }
.hoa-report-item--lose { background: #FBE9EB; border-color: #A32638; }
.hoa-btn-primary {
  color: #fff; border-color: #123a78;
  background: linear-gradient(#2c65c9, #1A4FA0);
  width: 100%; padding: 0.6rem; font-size: 0.9rem;
}

@media (min-width: 700px) {
  .hoa-wrap { padding-top: 1.4rem; }
}