@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#120d18;--panel:#1e1626;--panel2:#271d32;--line:#44334f;--pink:#f4a0c8;--violet:#b89aff;--white:#f7f2fa;--muted:#b9adbf;--gold:#f0cf8a}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#2a1835 0%,var(--bg) 48%);color:var(--white);font-family:Manrope,Arial,sans-serif;min-height:100vh}.topbar{height:74px;display:flex;align-items:center;gap:12px;padding:0 max(20px,calc((100vw - 960px)/2));border-bottom:1px solid #ffffff16;background:#100b16d9;position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}.brand-mark{font-size:34px;color:var(--pink);font-weight:800}.brand{font-size:13px;font-weight:800;letter-spacing:.19em}.subbrand{font:10px 'DM Mono',monospace;color:var(--muted);letter-spacing:.16em;margin-top:3px}.quiet{margin-left:auto;background:transparent;border:1px solid var(--line);color:var(--white);border-radius:8px;padding:9px 12px;font:11px 'DM Mono',monospace;letter-spacing:.1em}main{max-width:760px;margin:auto;padding:24px 16px 30px}.hero{padding:32px 8px 22px}.eyebrow,.result-meta,.room-line span,footer,.step{font:11px 'DM Mono',monospace;letter-spacing:.14em;color:var(--pink)}h1{font-size:clamp(36px,8vw,64px);line-height:1.02;letter-spacing:-.055em;margin:15px 0}.hero h1 span{color:var(--pink)}.intro{max-width:530px;line-height:1.7;color:var(--muted);font-size:15px}.notice{margin-top:22px;border:1px solid #f4a0c855;border-left:3px solid var(--pink);border-radius:9px;padding:13px 15px;background:#f4a0c80b;line-height:1.6;font-size:13px;color:#e7dce9}.panel{background:linear-gradient(145deg,#241a2d,#191320);border:1px solid var(--line);border-radius:16px;padding:22px;margin:16px 0;box-shadow:0 14px 45px #00000018}.panel-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}.step{border:1px solid #f4a0c84c;border-radius:6px;padding:6px 8px}.panel h2{font-size:20px;letter-spacing:-.03em;margin:0}.rules-list{padding-left:22px;color:#e5dce9;line-height:1.75;font-size:13px}.rules-list li{padding:5px 0}.fineprint,.muted{font-size:12px;color:var(--muted);line-height:1.65}.fineprint{border-top:1px solid #ffffff12;padding-top:12px;margin-top:18px}label{display:block;font-size:12px;color:#d7cbdc;margin:14px 0 7px}input{width:100%;background:#120d18;border:1px solid var(--line);border-radius:9px;padding:13px 14px;color:var(--white);font:14px Manrope,Arial;outline:none}input:focus{border-color:var(--pink);box-shadow:0 0 0 3px #f4a0c81a}button{cursor:pointer;font-family:Manrope,Arial;font-weight:700;border-radius:9px;padding:12px 15px;border:1px solid transparent;transition:transform .15s,opacity .15s}button:active{transform:scale(.99)}.primary{background:var(--pink);color:#251329;width:100%;margin-top:17px}.secondary{background:var(--panel2);color:var(--white);border-color:var(--line)}.button-row{display:flex;gap:10px;flex-wrap:wrap}.button-row button{flex:1}.message {
  font-size: 13px;
  font-weight: 700;
  color: #ffe08a;
  line-height: 1.6;
  min-height: 20px;
  overflow-wrap: anywhere;
  .message.error {
  color: #ffb4b4;
  background: #3b1722;
  border: 1px solid #ff7777;
  border-radius: 8px;
  padding: 9px 12px;
}

.message.success {
  color: #a8f0c6;
  background: #132b22;
  border: 1px solid #54c98b;
  border-radius: 8px;
  padding: 9px 12px;
}
}.room-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#120d18;padding:12px;border-radius:9px}.room-line strong{font:16px 'DM Mono',monospace;letter-spacing:.15em}.pill{margin-left:auto;border:1px solid var(--line);border-radius:30px;padding:5px 8px;font-size:10px;color:var(--muted)}.player-list,.vote-list{display:grid;gap:8px;margin-top:15px}.player-row,.vote-row{display:flex;align-items:center;gap:10px;background:#120d18;border:1px solid #ffffff12;border-radius:9px;padding:11px 12px;font-size:13px}.avatar{width:30px;height:30px;border-radius:8px;background:#34233e;display:grid;place-items:center;color:var(--pink);font-weight:800}.vote-row input{width:18px;height:18px;accent-color:var(--pink);margin-left:auto}.result-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);margin-bottom:18px}.pyramid{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 0 22px}.tier {min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;border-radius:8px;border:1px solid #ffffff28;box-shadow:inset 0 1px #ffffff13;font:12px 'DM Mono',monospace}.tier b{font-size:15px}.tier .count{color:#f7e9f1;flex-shrink:0}.tier-content{display:flex;flex-direction:column;gap:5px;min-width:0}.tier-names{font:11px Manrope,Arial,sans-serif;line-height:1.35;overflow-wrap:anywhere;color:#fff3fb}.tier-a{width:29%;background:#694d78}.tier-b{width:43%;background:#7d4b79}.tier-c{width:57%;background:#994e7c}.tier-d{width:71%;background:#b25a80}.tier-e{width:85%;background:#bd7189}.tier-f{width:100%;background:#865766}.tier-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.summary-cell{border:1px solid var(--line);background:#120d18;border-radius:8px;padding:11px}.summary-cell span{display:block;font:10px 'DM Mono',monospace;color:var(--muted);margin-bottom:7px}.summary-cell strong{font-size:20px}footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:25px 4px 5px;color:#9b8da5;font-size:9px}.hidden{display:none!important;}@media(max-width:480px){.panel{padding:17px}.hero{padding-top:24px}.tier{min-height:54px}.tier-summary{grid-template-columns:repeat(2,1fr)}.brand{font-size:12px}.button-row{flex-direction:column}}


/* Private host prototype additions */
.status-pill { margin-left:auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis;font-size:.68rem; letter-spacing:.1em; color:#d5c7e6; border:1px solid #57416a; padding:.5rem .7rem; border-radius:999px; white-space:nowrap; }
.status-pill.is-open { color:#f7c5e3; border-color:#d45b9d; }
button:disabled { opacity:.4; cursor:not-allowed; }
.divider-line { height:1px; background:rgba(225,195,246,.15); margin:1.2rem 0; }
.waiting-card { margin-top:1.25rem; padding:1.5rem; border:1px solid #654b87; border-radius:16px; text-align:center; background:rgba(68,43,91,.28); }
.waiting-orbit { font-size:2.8rem; color:#f4a0c8; margin-bottom:.5rem; }
.waiting-card h3 { margin:.2rem 0 .5rem; }
.waiting-card p { color:#c9bdd8; }
textarea { width:100%; resize:vertical; color:#fff; background:#21182c; border:1px solid #5b466e; border-radius:10px; padding:.85rem; font:inherit; margin:.4rem 0 1rem; }
textarea:focus, input:focus { outline:2px solid #d45b9d; outline-offset:2px; }
body {
  background-color: #080608;
  background-image:
    linear-gradient(
      90deg,
      rgba(5, 4, 7, 0.88),
      rgba(5, 4, 7, 0.55)
    ),
    url("./background.webp");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}
@keyframes pyramidGlow {
  0%, 100% {
    box-shadow: 0 0 6px #e5093540;
  }
  50% {
    box-shadow: 0 0 24px #e5093580;
  }
}

button:not(:disabled):hover {
  animation: pyramidGlow 1.8s ease-in-out infinite;
}

@media (max-width: 600px) {
  body {
    background-attachment: scroll;
  }
  input:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  border-color: #6d5878;
  background: #21182c;
  color: #d7cbdc;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
}

/* Visual Pyramid Results */
#pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 12px;
  margin: 20px auto;
  width: 100%;
  box-sizing: border-box;
}

.pyramid-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.pyramid-tier-label {
  color: #e50935;
  font-weight: 800;
  min-width: 65px;
  text-align: center;
}

.pyramid-player {
  padding: 12px 18px;
  min-width: 90px;
  text-align: center;
  color: #fff;
  background: linear-gradient(145deg, #242424, #101010);
  border: 1px solid #e5093570;
  border-radius: 8px;
  box-shadow: 0 0 12px #e5093520;
  overflow-wrap: anywhere;
}

@media (max-width: 500px) {
  .pyramid-player {
    min-width: 70px;
    padding: 10px;
  }
}


/* PYRAMID GAME BY YAN — RESPONSIVE RESULTS REVEAL */
.results-shell{margin-top:28px;padding:clamp(16px,3vw,28px);overflow:hidden;border:1px solid #e1b0e638;border-radius:20px;background:radial-gradient(ellipse at 50% 0%,#b168ae2b,transparent 55%),linear-gradient(155deg,#23172bfa,#110c18fa);box-shadow:0 24px 70px #0005,inset 0 1px #ffffff0f}
.results-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}.results-kicker{margin:0 0 8px;color:#f0a6d0;font:10px 'DM Mono',monospace;letter-spacing:.2em}.results-heading h2{margin:0;color:#fff7ff;font-size:clamp(23px,4vw,32px);letter-spacing:-.045em}.results-subtitle{margin:8px 0 0;color:#c4b5ca;font-size:13px;line-height:1.55}.results-lock{flex:none;padding:7px 10px;border:1px solid #f0a6d059;border-radius:999px;color:#f4b8dc;background:#f0a6d014;font:9px 'DM Mono',monospace;letter-spacing:.12em}
.results-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:24px}.results-stat{min-width:0;padding:12px 14px;border:1px solid #ffffff17;border-radius:12px;background:#07050b52}.results-stat span{display:block;color:#ad9db5;font:9px 'DM Mono',monospace;letter-spacing:.1em}.results-stat strong{display:block;margin-top:5px;color:#fff5fc;font:700 23px 'DM Mono',monospace}
.pyramid-stage{padding:18px 10px 12px;border:1px solid #ffffff12;border-radius:16px;background:linear-gradient(180deg,#ffffff06,transparent 45%),#0504093d}.pyramid-caption{display:flex;justify-content:space-between;gap:10px;padding:0 3px;color:#8f8099;font:8px 'DM Mono',monospace;letter-spacing:.13em}#pyramid.pyramid{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%;margin:15px auto 0;padding:0 0 8px}
.pyramid-tier{position:relative;display:grid;grid-template-columns:minmax(100px,.8fr) minmax(0,2.5fr) auto;align-items:center;gap:12px;width:var(--tier-width);min-height:76px;padding:12px 15px;overflow:hidden;border:1px solid #ffffff3b;border-radius:13px;color:#fff8ff;box-shadow:0 9px 22px #0003,inset 0 1px #ffffff26}.pyramid-tier:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,#ffffff19,transparent 38%,#ffffff09)}
.tier-a{--tier-width:43%;background:linear-gradient(110deg,#49345f,#76517e)}.tier-b{--tier-width:56%;background:linear-gradient(110deg,#65416e,#92527f)}.tier-c{--tier-width:69%;background:linear-gradient(110deg,#844875,#ad5688)}.tier-d{--tier-width:82%;background:linear-gradient(110deg,#a64f82,#c26791)}.tier-e{--tier-width:93%;background:linear-gradient(110deg,#b9688b,#cf809b)}.tier-f{--tier-width:100%;background:linear-gradient(110deg,#805568,#a86b82)}
.tier-identity{display:flex;align-items:center;gap:9px;min-width:0}.tier-letter{display:grid;place-items:center;flex:none;width:31px;height:31px;border:1px solid #ffffff52;border-radius:9px;background:#140a192e;font-weight:800;font-size:17px}.tier-labels{display:flex;flex-direction:column;gap:3px;min-width:0}.tier-title{font:11px 'DM Mono',monospace;letter-spacing:.12em;white-space:nowrap}.tier-subtitle{color:#fff5fcb3;font:8px 'DM Mono',monospace;letter-spacing:.08em}.tier-names{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}.tier-player{display:inline-block;max-width:100%;padding:5px 8px;border:1px solid #ffffff30;border-radius:7px;background:#1d0c1d24;color:#fffaff;font:11px Manrope,Arial,sans-serif;overflow-wrap:anywhere}.tier-count{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:36px;padding-left:9px;border-left:1px solid #ffffff40}.tier-count strong{font:700 20px 'DM Mono',monospace;line-height:1.1}.tier-count span{margin-top:3px;color:#fff5fcbf;font:7px 'DM Mono',monospace;letter-spacing:.08em}.results-footnote{margin:14px 2px 0;color:#a99aaf;font-size:11px;line-height:1.5}.results-hide{width:100%;margin-top:18px}
#pyramid.is-revealing .pyramid-tier{animation:tierReveal .58s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--tier-order,0)*130ms)}@keyframes tierReveal{from{opacity:0;transform:translateY(13px) scale(.985);filter:brightness(1.35)}to{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}}
@media(max-width:620px){.results-heading{flex-direction:column}.results-stats{gap:6px}.results-stat{padding:10px}.results-stat span{font-size:8px;letter-spacing:.04em}.results-stat strong{font-size:19px}.pyramid-stage{padding:14px 5px 8px}.pyramid-tier{grid-template-columns:minmax(68px,.75fr) minmax(0,2fr) auto;gap:7px;min-height:70px;padding:10px 8px;border-radius:10px}.tier-a{--tier-width:65%}.tier-b{--tier-width:74%}.tier-c{--tier-width:83%}.tier-d{--tier-width:91%}.tier-e{--tier-width:97%}.tier-letter{width:25px;height:25px;font-size:14px}.tier-identity{gap:5px}.tier-title{font-size:9px;letter-spacing:.04em}.tier-subtitle{font-size:7px;letter-spacing:0}.tier-player{padding:4px 6px;font-size:10px}.tier-count{min-width:29px;padding-left:6px}.tier-count strong{font-size:17px}.tier-count span{font-size:6px}}
@media(max-width:380px){.pyramid-tier{grid-template-columns:1fr auto}.tier-identity{grid-column:1/-1}.tier-names{grid-column:1}.tier-count{grid-column:2;grid-row:2}}@media(prefers-reduced-motion:reduce){#pyramid.is-revealing .pyramid-tier{animation:none}}


/* Audio settings */
.audio-controls{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.audio-button{border:1px solid var(--line);border-radius:8px;padding:7px 9px;background:#21172a;color:var(--white);font:10px 'DM Mono',monospace;cursor:pointer}
.audio-volume{display:flex;align-items:center;gap:5px;margin:0;color:var(--muted);font:9px 'DM Mono',monospace}
.audio-volume input{width:65px;padding:0;accent-color:var(--pink)}
@media(max-width:700px){.topbar{height:auto;min-height:74px;flex-wrap:wrap;padding:10px 14px}.audio-controls{width:100%;margin:0 0 3px;justify-content:flex-start}.audio-volume input{width:54px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Individual nomination fields */
.nomination-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 8px}
.nomination-field{min-width:0;padding:11px;border:1px solid var(--line);border-radius:11px;background:#ffffff08}
.nomination-field label{display:block;margin:0 0 7px;color:var(--muted);font:10px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.nomination-field input{width:100%;box-sizing:border-box;margin:0}
.nomination-field input.input-invalid{border-color:#e45b83;box-shadow:0 0 0 2px #e45b8320}
.nomination-feedback{min-height:18px;margin:8px 0 14px;color:var(--muted);font-size:12px}
.nomination-feedback.is-error{color:#e45b83}
.nomination-feedback.is-success{color:#72c9a1}
@media(max-width:520px){.nomination-fields{grid-template-columns:1fr;gap:8px}.nomination-field{padding:9px}}


/* Clear, game-specific rules section */
.rules-heading { margin: 8px 0 18px; }
.rules-heading h2 { font-size: clamp(25px, 5vw, 34px); margin: 5px 0 8px; letter-spacing: -.04em; }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.rule-card { display: flex; gap: 13px; align-items: flex-start; padding: 15px; border: 1px solid #ffffff20; border-radius: 12px; background: linear-gradient(135deg, #ffffff0c, #f4a0c808); }
.rule-number { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border: 1px solid #f4a0c866; border-radius: 9px; color: var(--pink); font: 12px 'DM Mono', monospace; }
.rule-card h3 { margin: 2px 0 6px; font-size: 14px; color: #fff4fb; }
.rule-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.rules-note { margin-top: 15px; padding: 14px 16px; border-left: 3px solid var(--pink); border-radius: 9px; background: #f4a0c80d; color: #e9ddea; font-size: 12px; line-height: 1.7; }
.rules-note strong { color: var(--pink); }
@media (max-width: 560px) { .rules-grid { grid-template-columns: 1fr; } }


/* Site navigation and review / feedback pages */
.site-nav{display:flex;justify-content:center;gap:8px;max-width:760px;margin:14px auto 0;padding:0 16px}
.nav-link{flex:1;max-width:180px;background:#21172a;border:1px solid var(--line);color:#cfc0d7;padding:10px 14px;font:10px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase}
.nav-link.active{background:#f4a0c81a;border-color:#d77eae;color:#ffd5e9}
.page-view[hidden]{display:none!important}
.page-view{animation:pageIn .25s ease-out}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.rating-picker{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:5px;margin:8px 0 18px}
.rating-picker input{position:absolute;opacity:0;width:1px;height:1px}
.rating-picker label{display:block;margin:0;color:#75657f;font-size:32px;line-height:1;cursor:pointer;transition:color .15s,transform .15s}
.rating-picker label:hover,.rating-picker label:hover~label,.rating-picker input:checked~label{color:#f4c66f}
.rating-picker input:focus-visible+label{outline:2px solid var(--pink);outline-offset:4px;border-radius:4px}
.rating-picker label:hover{transform:translateY(-2px)}
select{width:100%;background:#120d18;border:1px solid var(--line);border-radius:9px;padding:13px 14px;color:var(--white);font:14px Manrope,Arial,sans-serif}
textarea{min-height:110px}
@media(max-width:480px){.site-nav{gap:5px}.nav-link{padding:9px 5px;font-size:9px;letter-spacing:.06em}}