:root{
  --bg:#0d0f14;
  --surface:#151820;
  --surface2:#1b1f29;
  --line:#2a2f3b;
  --text:#f4f1ea;
  --muted:#989eaa;
  /* Orange Plus palette: orange 50% / blue 30% / purple 20% */
  --orange:#ff7a18;
  --orange2:#ff9a3d;
  --blue:#28aee8;
  --blue2:#5bc8f2;
  --purple:#8a63ff;
  --purple2:#aa8cff;
  --good:#58d68d;
  --radius:14px;
  --shadow:0 16px 50px rgba(0,0,0,.32);
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,textarea,select{font:inherit}
button{color:inherit}
.topbar{height:66px;position:sticky;top:0;z-index:20;display:grid;grid-template-columns:270px 1fr auto;align-items:center;border-bottom:1px solid var(--line);background:rgba(13,15,20,.94);backdrop-filter:blur(12px);padding:0 22px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-size:19px;font-weight:800;letter-spacing:-.4px}
.brand b{color:var(--orange)}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:linear-gradient(145deg,#3a210f,#16283a);border:1px solid #74451e;border-radius:10px;box-shadow:inset 0 0 18px rgba(40,174,232,.10)}
.search-wrap{display:flex;justify-content:center}
.search{width:min(620px,75vw);background:#11141a;border:1px solid var(--line);border-radius:10px;padding:10px 14px;outline:0;color:var(--text)}
.search:focus{border-color:#5a6170}
.top-actions{display:flex;gap:8px;align-items:center}
.icon-btn,.avatar-btn,.nav-item,.secondary,.reaction{border:1px solid var(--line);background:var(--surface);border-radius:10px;cursor:pointer}
.icon-btn{width:40px;height:40px}
.avatar-btn{padding:9px 13px;font-weight:700}
.layout{display:grid;grid-template-columns:250px minmax(0,820px) 300px;gap:26px;max-width:1440px;margin:auto;padding:25px}
.sidebar,.rightbar{position:sticky;top:90px;height:max-content}
.nav-caption,.eyebrow{font-size:11px;letter-spacing:.16em;color:#767d8a;font-weight:800}
.nav-caption{margin:24px 10px 8px}
.nav-item{width:100%;display:flex;gap:10px;align-items:center;padding:10px 12px;margin:3px 0;text-align:left;background:transparent;border-color:transparent;color:#c5c9d1}
.nav-item:hover,.nav-item.active{background:var(--surface);border-color:var(--line);color:#fff}
.mascot-card{margin-top:26px;border:1px solid #263b4d;background:linear-gradient(145deg,rgba(40,174,232,.12),rgba(138,99,255,.08) 62%,rgba(255,122,24,.08));border-radius:var(--radius);padding:12px;display:flex;gap:10px;align-items:center}
.mascot-card p{margin:2px 0 0;color:var(--muted);font-size:12px}
.mascot{width:64px;height:64px;object-fit:contain;image-rendering:auto}
.content{min-width:0}
.hero{border:1px solid #3a2c23;background:
radial-gradient(circle at 100% 0%,rgba(255,122,24,.20),transparent 38%),
radial-gradient(circle at 5% 100%,rgba(40,174,232,.13),transparent 34%),
radial-gradient(circle at 70% 100%,rgba(138,99,255,.08),transparent 28%),
linear-gradient(180deg,#17181c,#111318);
border-radius:18px;padding:28px;display:flex;justify-content:space-between;gap:20px;align-items:flex-end;box-shadow:var(--shadow)}
.hero h1{font-size:36px;line-height:1.03;letter-spacing:-1.6px;margin:8px 0 12px}
.hero h1 span{color:var(--orange)}
.hero p{max-width:600px;color:#b7bbc3;margin:0}
.primary{border:0;border-radius:10px;background:var(--orange);color:#130b04;font-weight:900;padding:10px 15px;cursor:pointer;box-shadow:inset 0 -2px rgba(0,0,0,.12)}
.primary:hover{background:var(--orange2)}
.primary:disabled{opacity:.45;cursor:not-allowed}
.secondary{padding:9px 13px;cursor:pointer}
.grow{flex:1}
.stats-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:12px;background:#11141a;margin:14px 0 24px;overflow:hidden}
.stats-strip div{padding:11px 15px;border-right:1px solid var(--line);display:flex;align-items:baseline;gap:8px}.stats-strip div:last-child{border:0}
.stats-strip b{font-size:18px;color:var(--blue2)}.stats-strip span{font-size:12px;color:var(--muted)}
.section-head{display:flex;justify-content:space-between;align-items:end;margin:0 2px 10px}
.section-head h2{margin:2px 0;font-size:22px}
.select,input,textarea{background:#101319;border:1px solid var(--line);border-radius:10px;color:var(--text);padding:10px 12px;outline:0}
input:focus,textarea:focus,.select:focus{border-color:#596171}
.select.full{width:100%}
.feed{display:grid;gap:9px}
.post-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:17px 18px;cursor:pointer;transition:.15s ease}
.post-card:hover{border-color:#444b59;transform:translateY(-1px);background:#181b24}
.post-card h3{font-size:18px;margin:9px 0 5px;letter-spacing:-.25px}
.post-preview{white-space:pre-line;color:#bdc1ca;margin:0}
.post-meta,.post-foot,.comment-meta{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px;flex-wrap:wrap}
.post-foot{margin-top:13px}
.chip{color:#eacbb5;background:#2a1d14;border:1px solid #55311a;padding:2px 7px;border-radius:999px}
.level-pill{font-size:10px;color:#c6bdff;background:#211d38;border:1px solid #3c3461;padding:2px 6px;border-radius:999px}
.rightbar{display:grid;gap:12px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.panel-title{font-weight:800;margin-bottom:10px}
.panel.tiny p{color:var(--muted);font-size:13px;margin:4px 0}
.quest{padding:10px 0;border-bottom:1px solid var(--line)}.quest:last-child{border:0}
.quest-top{display:flex;justify-content:space-between;gap:10px}
.quest p{margin:5px 0}
.progress{height:6px;background:#292d36;border-radius:99px;overflow:hidden;margin:8px 0 4px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--orange) 0 50%,var(--blue) 50% 80%,var(--purple) 80% 100%);border-radius:99px}
.xp{color:var(--orange);font-size:12px}
.done{display:inline-block;margin-top:7px;color:var(--good);font-size:12px}
.league-row{display:grid;grid-template-columns:25px 1fr auto auto;gap:7px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
.league-row:last-child{border:0}.rank{font-weight:900;color:#737986}.muted{color:var(--muted)}
.empty{text-align:center;padding:55px 15px;color:var(--muted)}.empty h3{color:var(--text)}.empty-gif{width:100px;height:100px;object-fit:contain}.hidden{display:none!important}
.modal{border:0;padding:0;background:transparent;max-width:none;max-height:none}
.modal::backdrop{background:rgba(3,4,7,.78);backdrop-filter:blur(3px)}
.modal-card{position:relative;width:min(440px,calc(100vw - 24px));max-height:88vh;overflow:auto;background:#151820;border:1px solid #343946;border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.modal-card.wide{width:min(760px,calc(100vw - 24px))}
.modal-card h2{margin:5px 0 4px;font-size:27px;letter-spacing:-.7px}
.modal-card input,.modal-card textarea,.modal-card select{width:100%;margin-top:10px}
.modal-card label{display:block;margin-top:12px;color:var(--muted);font-size:12px}
.close{position:absolute;right:13px;top:11px;border:0;background:transparent;color:#8c929e;font-size:25px;cursor:pointer}
.google{width:100%;margin:16px 0 8px;background:#f6f6f6;color:#171717;border:0;border-radius:10px;padding:10px;font-weight:800;cursor:pointer}
.or{text-align:center;border-top:1px solid var(--line);margin:16px 0}.or span{position:relative;top:-11px;background:#151820;padding:0 9px;color:var(--muted);font-size:12px}
.row{display:flex;gap:8px;margin-top:12px}.error{color:#ff7272;font-size:12px;margin-top:9px;min-height:18px}
.editor-foot{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;margin-top:8px}
.thread-body{white-space:pre-line;font-size:16px;color:#d1d4db}
.thread-sub{border-top:1px solid var(--line);padding-top:18px}
.reaction-row{display:flex;gap:6px;margin:15px 0}.reaction{padding:7px 10px;cursor:pointer}.reaction:hover{border-color:#626a79}
.comment{padding:12px 0;border-bottom:1px solid var(--line)}.comment p{white-space:pre-line;margin:4px 0}
.comment-form{display:flex;gap:8px;margin-top:15px;align-items:end}.comment-form textarea{flex:1;margin:0;resize:vertical}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}.badge{font-size:12px;border:1px solid var(--line);background:#11141a;padding:5px 8px;border-radius:8px}
.toast{position:fixed;z-index:100;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#f1eee7;color:#171717;border-radius:10px;padding:9px 13px;font-weight:800;transition:.2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1100px){.layout{grid-template-columns:210px minmax(0,1fr)}.rightbar{display:none}.topbar{grid-template-columns:220px 1fr auto}}
@media(max-width:760px){
 .topbar{height:auto;grid-template-columns:1fr auto;padding:10px 12px;gap:8px}.search-wrap{grid-row:2;grid-column:1/-1}.search{width:100%}
 .layout{display:block;padding:12px}.sidebar{position:static}.sidebar>.nav-item,.nav-caption,#categoryNav{display:none}.mascot-card{margin:0 0 12px}
 .hero{padding:20px;display:block}.hero h1{font-size:29px}.hero .primary{margin-top:17px}
 .stats-strip{margin-bottom:18px}.league-row{grid-template-columns:24px 1fr auto}.league-row .muted{display:none}
}

/* Mascot flight overlay.
   Uses the browser Top Layer via the Popover API, so it stays above <dialog>::backdrop
   and is not blurred by modal backdrops. */
#mascot-flight-layer[popover] {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 2147483647 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#mascot-flight-layer[popover]::backdrop {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

#flying-mascot {
  position: fixed !important;
  top: 4px;
  left: -150px;
  width: 120px;
  height: 120px;
  object-fit: contain;
  pointer-events: none !important;
  user-select: none;
  opacity: 0;
  z-index: 2147483647 !important;
  filter:
    drop-shadow(0 9px 18px rgba(0, 0, 0, .40))
    drop-shadow(0 0 18px rgba(46, 190, 255, .40));
}

#flying-mascot.fly {
  animation: orangeplus-mascot-flight 7s linear forwards;
}

@keyframes orangeplus-mascot-flight {
  0% {
    left: -150px;
    opacity: 0;
    transform: translateY(8px) rotate(-5deg) scale(.9);
  }
  7% { opacity: 1; }
  25% { transform: translateY(-5px) rotate(2deg) scale(1); }
  50% { transform: translateY(8px) rotate(-2deg) scale(1.05); }
  75% { transform: translateY(-4px) rotate(2deg) scale(1); }
  93% { opacity: 1; }
  100% {
    left: calc(100vw + 150px);
    opacity: 0;
    transform: translateY(5px) rotate(5deg) scale(.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  #mascot-flight-layer[popover] { display: none !important; }
}

.language-select {
  min-width: 118px;
  height: 38px;
  padding: 0 30px 0 10px;
}

@media (max-width: 760px) {
  .language-select { min-width: 104px; max-width: 118px; }
}

/* Accent distribution: orange leads, blue supports interaction, purple marks progression. */
.search:focus,input:focus,textarea:focus,.select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(40,174,232,.08)}
.icon-btn:hover,.avatar-btn:hover,.secondary:hover,.reaction:hover{border-color:var(--blue);background:rgba(40,174,232,.08)}
.nav-item:hover{border-color:rgba(40,174,232,.28)}
.nav-item.active{border-color:rgba(255,122,24,.38);box-shadow:inset 3px 0 var(--orange)}
.level-pill,.badge{border-color:rgba(138,99,255,.38)}
.badge{background:rgba(138,99,255,.08)}
.league-row .xp{color:var(--purple2)}
.mascot{filter:drop-shadow(0 7px 16px rgba(40,174,232,.18))}
.mascot.is-celebrating{animation:mascot-pop .38s cubic-bezier(.2,.9,.3,1.25)}
@keyframes mascot-pop{0%{transform:scale(.92)}55%{transform:scale(1.1) rotate(-2deg)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* Post opening and moderation */
.post-card{position:relative}
.post-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.post-open-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:13px}
.post-open{border:0;background:transparent;color:var(--blue2);font-weight:800;cursor:pointer;padding:4px 0}
.post-open:hover{text-decoration:underline}
.thread-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.report-btn{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:9px;padding:7px 10px;cursor:pointer}
.report-btn:hover{border-color:var(--orange);color:var(--text)}
.moderation-card{width:min(900px,calc(100vw - 24px))}
.moderation-toolbar{display:flex;gap:8px;align-items:center;margin:14px 0}
.moderation-list{display:grid;gap:9px}
.mod-item{border:1px solid var(--line);background:#101319;border-radius:12px;padding:14px}
.mod-item h3{margin:5px 0 6px;font-size:17px}
.mod-item p{margin:0;color:var(--muted);white-space:pre-line;max-height:110px;overflow:hidden}
.mod-meta{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.mod-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.mod-danger{border-color:#71404a;color:#ff9aa5}
.mod-warning{border-color:#74451e;color:#ffc08a}