/* Hogwarts of EVE — public pages (front page, Sorting Hat). Full width, phone first. */

.pub-head {
  position: relative; z-index: 4;
  display: flex; align-items: center; gap: 16px;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right), 2vw) 14px max(16px, env(safe-area-inset-left), 2vw);
  border-bottom: 1px solid rgba(217, 180, 90, .18);
  background: linear-gradient(180deg, rgba(5, 6, 15, .85), rgba(5, 6, 15, .4));
}
.pub-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: "Cinzel", Georgia, serif; font-weight: 700; letter-spacing: .08em; color: var(--gold-hi); }
.pub-brand svg { width: 32px; height: 32px; flex: none; }
.pub-nav { display: flex; gap: 4px; margin-left: auto; }
.pub-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--muted); text-decoration: none; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .9rem;
}
.pub-nav a:hover, .pub-nav a:focus-visible { color: #fff; outline: none; }
.btn.primary { border-color: var(--gold); color: var(--gold-hi); }
@media (max-width: 860px) {
  .pub-head { flex-wrap: wrap; row-gap: 6px; }
  .pub-nav { order: 3; flex: 1 0 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .pub-nav::-webkit-scrollbar { display: none; }
  .pub-head > .btn { margin-left: auto; }
}
@media (max-width: 480px) { .pub-brand b { display: none; } }

.pub-main { position: relative; z-index: 3; width: 100%; padding: 0 max(16px, env(safe-area-inset-right), 2vw) 40px max(16px, env(safe-area-inset-left), 2vw); }
.section { margin-top: 64px; scroll-margin-top: 20px; }
.section > .eyebrow, .eyebrow { font-weight: 600; font-size: .78rem; letter-spacing: .4em; text-transform: uppercase; color: var(--cyan); }
.section h2 {
  margin-top: 6px; font-family: "Cinzel", Georgia, serif; font-weight: 900; line-height: 1.1;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem); letter-spacing: .04em;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, #9c7a2c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section .lede { margin-top: 10px; max-width: 70ch; color: var(--muted); font-size: 1.08rem; }
.panel {
  padding: 22px 24px; background: rgba(10, 15, 36, .62);
  border: 1px solid rgba(95, 212, 255, .18); border-top: 2px solid var(--gold);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.muted { color: var(--muted); }
.pill { display: inline-block; padding: 1px 8px; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; border: 1px solid currentColor; }

.pub-foot { position: relative; z-index: 3; text-align: center; padding: 24px 16px max(24px, env(safe-area-inset-bottom)); font-size: .78rem; line-height: 1.6; color: #6b7397; border-top: 1px solid rgba(217, 180, 90, .12); }
.pub-foot strong { color: var(--muted); font-weight: 600; }

/* House cards (front page + Sorting Hat result) */
.house-cards { margin-top: 22px; display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .house-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .house-cards { grid-template-columns: 1fr; } }
.hc { --house: var(--gold); display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid rgba(138, 147, 181, .18); border-top: 4px solid var(--house); background: rgba(10, 15, 36, .62); }
.hc header { display: flex; align-items: center; gap: 12px; }
.hc header img { width: 56px; height: 56px; }
.hc h3 { font-family: "Cinzel", Georgia, serif; font-size: 1.4rem; color: #fff; line-height: 1.1; }
.hc .trait { color: var(--house); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: .78rem; }
.hc .motto { font-family: "Cinzel", Georgia, serif; color: var(--gold-hi); }
.hc p { color: var(--muted); line-height: 1.5; }
.hc .plays { display: flex; gap: 6px; flex-wrap: wrap; }
.hc .plays span { padding: 2px 8px; font-size: .8rem; border: 1px solid rgba(138, 147, 181, .3); color: var(--text); }
.hc .stat { margin-top: auto; color: var(--muted); font-size: .88rem; }
.hc .stat b { color: var(--text); }