:root{
  --bg:#0b0c10;
  --surface:#14151b;
  --surface-2:#1b1d25;
  --border: rgba(255,255,255,.09);
  --text:#eef0f3;
  --muted:#9aa0ae;
  --brand:#e11d48;
  --brand-2:#10b981;
  --brand-3:#3b82f6;
  --warning:#f59e0b;
  --radius:14px;
  --radius-sm:10px;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Open Sans', -apple-system, Segoe UI, Roboto, sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
.icon{ width:20px; height:20px; stroke:currentColor; stroke-width:1.75; fill:none; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

.wrap{ max-width:1040px; margin:0 auto; padding:0 1.5rem; }

/* ---------- Site navbar ---------- */
.site-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(11,12,16,.9);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:1.75rem;
  padding:.8rem 1.5rem;
}
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; margin-right:auto; }
.brand img{ height:2.1rem; width:2.1rem; border-radius:6px; display:block; }
.brand span{ color:#fff; font-weight:800; font-size:1.05rem; letter-spacing:.2px; }
.nav-links{ display:flex; gap:1.6rem; }
.nav-links .nav-link{
  color:#fff; opacity:.82; text-decoration:none; font-size:.92rem; font-weight:600;
  position:relative; padding-bottom:5px; white-space:nowrap;
}
.nav-links .nav-link::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-3));
  transition:width .2s ease;
}
.nav-links .nav-link:hover{ opacity:1; }
.nav-links .nav-link:hover::after{ width:100%; }
.nav-links .nav-link.current{ opacity:1; }
.nav-links .nav-link.current::after{ width:100%; background:var(--brand); }
.nav-social{ display:flex; gap:.85rem; margin-left:.5rem; }
.nav-social a{ color:#fff; opacity:.65; display:flex; }
.nav-social a:hover{ opacity:1; color:var(--brand); }
.nav-social svg{ width:17px; height:17px; stroke-width:1.75; }
.nav-toggle{ display:none; background:none; border:0; color:#fff; padding:.4rem; cursor:pointer; }
@media (max-width:860px){
  .nav-links, .nav-social{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ---------- Hero ---------- */
.hero{
  background: radial-gradient(900px 380px at 100% -20%, rgba(225,29,72,.16), transparent 60%), var(--surface);
  border-bottom:1px solid var(--border);
}
.hero-inner{
  display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center;
  padding:4rem 0 3.5rem;
}
.hero-inner.single{ grid-template-columns:1fr; text-align:center; padding:3.5rem 0; }
.hero-inner.single .lede{ margin-left:auto; margin-right:auto; }
.hero-inner.single .hero-actions{ justify-content:center; }
.kicker{ text-transform:uppercase; letter-spacing:.09em; font-size:.78rem; font-weight:700; color:var(--brand); margin:0 0 .9rem; }
h1.title{
  font-family:'Bangers', cursive; font-weight:400;
  font-size:clamp(2.6rem,4.5vw,3.6rem); line-height:1.05; letter-spacing:.5px;
  color:#fff; margin:0 0 1rem;
}
.lede{ color:var(--muted); font-size:1.08rem; max-width:34rem; margin:0 0 1.75rem; }
.hero-actions{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:.55rem; border:0; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:1rem;
  padding:.85rem 1.5rem; border-radius:var(--radius-sm);
  transition: filter .15s ease, transform .15s ease;
  text-decoration:none;
}
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-primary .icon{ stroke:#fff }
.btn-secondary{ background:var(--brand-2); color:#fff; }
.btn-secondary:hover{ filter:brightness(1.08); }
.btn-secondary .icon{ stroke:#fff }
.btn:disabled{ opacity:.55; cursor:not-allowed; filter:none; }
.hero-meta{ display:flex; align-items:center; gap:1.1rem; color:var(--muted); font-size:.9rem; flex-wrap:wrap; }
.hero-meta span{ display:inline-flex; align-items:center; gap:.4rem; }
.hero-meta .icon{ width:16px; height:16px; stroke:var(--muted) }
.hero-media{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
.hero-media img{ display:block; width:100%; height:auto; }

/* ---------- Glow banner ---------- */
.glow-band{ padding:2.25rem 0 0; }
.glow-banner{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  background: linear-gradient(120deg, rgba(225,29,72,.14), rgba(59,130,246,.07));
  border:1px solid rgba(225,29,72,.4);
  border-radius: var(--radius);
  padding:1.4rem 1.9rem;
  animation: glowPulse 3.2s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{ box-shadow:0 0 18px rgba(225,29,72,.18); }
  50%{ box-shadow:0 0 34px rgba(225,29,72,.4); }
}
.glow-left{ display:flex; align-items:center; gap:1rem; }
.glow-icon{
  width:48px; height:48px; border-radius:12px; flex-shrink:0;
  display:grid; place-items:center;
  background:rgba(225,29,72,.16);
  border:1px solid rgba(225,29,72,.45);
}
.glow-icon .icon{ stroke:#ff6b8a; width:24px; height:24px; }
.glow-title{ display:flex; align-items:center; gap:.6rem; margin:0 0 .2rem; }
.glow-title h3{ margin:0; font-size:1.1rem; color:#fff; font-weight:800; }
.live-dot{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:#ff6b8a;
}
.live-dot::before{
  content:''; width:7px; height:7px; border-radius:50%; background:#ff6b8a;
  animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.7);} }
.glow-copy p{ margin:0; color:var(--muted); font-size:.92rem; }
@media (prefers-reduced-motion: reduce){
  .glow-banner, .live-dot::before{ animation:none !important; }
}
@media (max-width:600px){
  .glow-banner{ flex-direction:column; align-items:flex-start; }
}

section{ padding:3.25rem 0; border-bottom:1px solid var(--border); }
section:last-of-type{ border-bottom:0; }
h2.h2{ font-size:1.5rem; font-weight:800; color:#fff; margin:0 0 .4rem; }
.section-sub{ color:var(--muted); font-size:.98rem; margin:0 0 2rem; max-width:38rem; }

/* Tabs */
.tabs{ display:flex; gap:2rem; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.tab{
  color:var(--muted); text-decoration:none; font-weight:600; font-size:.95rem;
  padding:0 0 1rem; border-bottom:2px solid transparent; display:inline-flex; align-items:center; gap:.5rem;
}
.tab .icon{ width:17px; height:17px; }
.tab.active{ color:#fff; border-bottom-color:var(--brand); }
.tab:hover:not(.active){ color:#fff; }

/* Row list */
.row-list{ display:flex; flex-direction:column; }
.row-item{
  display:grid; grid-template-columns:44px 1fr; gap:1.1rem;
  padding:1.3rem 0; border-top:1px solid var(--border);
}
.row-item:first-child{ border-top:0; }
.row-icon{ width:44px; height:44px; border-radius:10px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--border); flex-shrink:0; }
.row-icon .icon{ stroke:var(--brand) }
.row-item h3{ margin:0 0 .3rem; font-size:1.05rem; color:#fff; }
.row-item p{ margin:0; color:var(--muted); font-size:.94rem; }

/* ---------- Generator (slot machine) ---------- */
.machine{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:2.5rem 2rem; text-align:center;
}
.slots-container{ display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; margin:0 0 1.75rem; }
.slot{
  width:64px; height:64px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:2rem; background:var(--surface-2); border:1px solid var(--border);
  transition: transform .2s ease, border-color .2s ease;
}
.slot.spinning{ border-color: rgba(225,29,72,.6); }
.spin-button{
  display:inline-flex; align-items:center; gap:.55rem; border:0; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:1rem;
  padding:.85rem 1.5rem; border-radius:var(--radius-sm);
  background:var(--brand); color:#fff;
  transition: filter .15s ease;
}
.spin-button:hover{ filter:brightness(1.08); }
.spin-button:disabled{ opacity:.6; cursor:not-allowed; }
.emoji-display{
  margin-top:1.75rem; padding:1.25rem; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border);
}
.emoji-display h3{ margin:0 0 .6rem; font-size:.95rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.emoji-list{ font-size:1.9rem; line-height:1.5; letter-spacing:.4rem; }

/* Instructions box */
.instructions{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1.5rem 1.75rem; margin-bottom:2rem;
}
.instructions h3{ margin:0 0 .9rem; font-size:1rem; color:#fff; }
.instructions ul{ margin:0; padding-left:1.2rem; }
.instructions li{ margin:.45rem 0; color:var(--muted); font-size:.92rem; }
.instructions li strong{ color:var(--text); }

/* ---------- Story form ---------- */
.story-panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; }
.story-form{ display:grid; gap:1.1rem; }
.form-group{ display:flex; flex-direction:column; gap:.45rem; }
.form-group label{ display:flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.85rem; font-weight:600; }
.form-group label .icon{ width:15px; height:15px; stroke:var(--muted) }
.form-input{
  width:100%; padding:.75rem .85rem; border-radius:8px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-size:.96rem; font-family:inherit;
}
.form-input:focus{ outline:none; border-color:rgba(225,29,72,.6); }
select.form-input{ appearance:none; }
select.form-input option{ background:var(--surface-2); color:var(--text); }
.story-textarea{ min-height:180px; resize:vertical; font-family:Georgia,serif; }
.word-counter{ text-align:right; font-size:.85rem; font-weight:700; margin-top:-.3rem; }
.word-counter.incomplete{ color:var(--warning); }
.word-counter.complete{ color:var(--brand-2); }
.submit-button{
  display:inline-flex; align-items:center; gap:.55rem; border:0; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:1rem; justify-self:start;
  padding:.85rem 1.5rem; border-radius:var(--radius-sm);
  background:var(--brand-2); color:#fff;
  transition: filter .15s ease;
}
.submit-button:hover{ filter:brightness(1.08); }
.submit-button:disabled{ opacity:.55; cursor:not-allowed; }

.tip{
  display:flex; gap:.7rem; align-items:flex-start;
  margin-top:1.25rem; padding:.9rem 1.1rem;
  background:rgba(16,185,129,.08); border-left:3px solid var(--brand-2); border-radius:8px;
  color:#cdece0; font-size:.9rem;
}
.tip .icon{ stroke:var(--brand-2); width:18px; height:18px; margin-top:.1rem; flex-shrink:0; }

.success-message, .error-message{
  padding:1rem 1.25rem; border-radius:var(--radius-sm); margin-bottom:1.25rem; display:none;
  font-weight:600; font-size:.92rem;
}
.success-message{ background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.4); color:#8ff0cf; }
.error-message{ background:rgba(225,29,72,.12); border:1px solid rgba(225,29,72,.4); color:#ffb3c1; }

/* ---------- Stories feed ---------- */
.stories-header{ text-align:left; margin-bottom:2rem; }
.stories-count{ color:var(--muted); font-size:.95rem; }
.loading, .no-stories{ text-align:center; padding:3rem 1rem; color:var(--muted); }
.no-stories a{ color:var(--brand); font-weight:700; text-decoration:none; }

.story-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.75rem; margin-bottom:1.75rem;
}
.story-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.1rem; flex-wrap:wrap; gap:.75rem; }
.story-title{ color:#fff; font-size:1.25rem; font-weight:800; margin-bottom:.25rem; }
.story-author{ color:var(--text); font-size:.95rem; margin-bottom:.2rem; }
.story-date{ color:var(--muted); font-size:.82rem; }
.story-emojis{
  background:var(--surface-2); padding:1rem; border-radius:var(--radius-sm); text-align:center;
  margin-bottom:1.1rem; border:1px solid var(--border);
}
.story-emojis h4{ margin:0 0 .5rem; font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.story-content{
  color:var(--text); line-height:1.8; font-size:1.05rem; font-family:Georgia,'Times New Roman',serif;
  text-align:justify; background:var(--surface-2); padding:1.25rem; border-radius:var(--radius-sm);
  border:1px solid var(--border); margin:.9rem 0;
}
.story-stats{
  display:flex; justify-content:space-between; align-items:center; margin-top:1.1rem; padding-top:1.1rem;
  border-top:1px solid var(--border); font-size:.85rem; color:var(--muted); flex-wrap:wrap; gap:.5rem;
}
.word-count{ color:var(--brand-2); font-weight:700; }

.rating-section{ margin-top:1.1rem; padding:1.1rem; background:var(--surface-2); border-radius:var(--radius-sm); border:1px solid var(--border); }
.rating-display{ display:flex; align-items:center; gap:.6rem; margin-bottom:.75rem; flex-wrap:wrap; }
.rating-label{ color:var(--muted); font-weight:700; font-size:.88rem; }
.rating-value{ color:var(--warning); font-weight:800; font-size:1rem; }
.rating-count{ color:var(--muted); font-size:.85rem; }
.rating-stars{ display:flex; gap:.3rem; align-items:center; }
.star{ font-size:1.3rem; cursor:pointer; transition:transform .15s ease, opacity .15s ease; opacity:.35; }
.star:hover, .star.active{ opacity:1; transform:scale(1.1); }

.comments-section{ margin-top:1.1rem; padding:1.1rem; background:var(--surface-2); border-radius:var(--radius-sm); border:1px solid var(--border); }
.comments-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.9rem; flex-wrap:wrap; gap:.6rem; }
.comments-header h4{ margin:0; color:#fff; font-size:.95rem; }
.toggle-comments{
  background:var(--brand-3); color:#fff; border:0; padding:.5rem 1rem; border-radius:20px;
  cursor:pointer; font-size:.82rem; font-weight:700; transition:filter .15s ease;
}
.toggle-comments:hover{ filter:brightness(1.1); }
.comments-container{ margin-top:.9rem; }
.comments-list{ max-height:300px; overflow-y:auto; margin-bottom:1.1rem; }
.comment-item{
  background:rgba(255,255,255,.03); padding:.9rem; border-radius:8px; margin-bottom:.6rem;
  border-left:3px solid var(--brand-3);
}
.comment-author{ color:var(--warning); font-weight:700; margin-bottom:.25rem; font-size:.9rem; }
.comment-text{ color:var(--text); line-height:1.5; margin-bottom:.25rem; font-size:.92rem; }
.comment-date{ color:var(--muted); font-size:.78rem; }
.add-comment-form{ background:rgba(255,255,255,.03); padding:1.1rem; border-radius:var(--radius-sm); border:1px solid var(--border); }
.add-comment-form h5{ color:#fff; margin:0 0 .8rem; font-size:.9rem; }
input.comment-name, textarea.comment-text{
  width:100%; padding:.7rem .8rem; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--text); font-size:.92rem; margin-bottom:.6rem; box-sizing:border-box; font-family:inherit;
}
textarea.comment-text{ min-height:80px; resize:vertical; }
input.comment-name:focus, textarea.comment-text:focus{ outline:none; border-color:rgba(225,29,72,.6); }
.submit-comment{
  background:var(--brand-2); color:#fff; border:0; padding:.65rem 1.3rem; border-radius:20px;
  cursor:pointer; font-weight:700; font-size:.88rem; transition:filter .15s ease;
}
.submit-comment:hover{ filter:brightness(1.08); }
.submit-comment:disabled{ opacity:.6; cursor:not-allowed; }

/* ---------- About page ---------- */
.features-grid, .benefits-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; }
.feature-card, .benefit-item{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1.6rem;
}
.feature-card{ text-align:left; }
.feature-card .row-icon{ margin-bottom:1rem; }
.feature-card h3{ color:#fff; font-size:1.05rem; margin:0 0 .6rem; }
.feature-card p{ color:var(--muted); font-size:.92rem; margin:0; line-height:1.6; }
.benefit-item{ border-left:3px solid var(--brand); border-radius:8px; }
.benefit-item h4{ color:#fff; margin:0 0 .4rem; font-size:.98rem; }
.benefit-item p{ color:var(--muted); margin:0; font-size:.9rem; }
.testimonial{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--brand-3);
  border-radius:var(--radius-sm); padding:1.6rem; margin-bottom:1.25rem;
}
.testimonial p{ font-style:italic; color:var(--text); font-size:1rem; margin:0 0 .8rem; }
.testimonial .author{ color:var(--warning); font-weight:700; font-size:.9rem; }
.cta-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:2.75rem 2rem; text-align:center;
}
.cta-panel h2{ font-family:'Bangers', cursive; font-weight:400; font-size:2rem; color:#fff; margin:0 0 .75rem; letter-spacing:.5px; }
.cta-panel p{ color:var(--muted); margin:0 0 1.5rem; font-size:1.02rem; }
.cta-secondary-link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem; color:var(--brand); text-decoration:none; font-weight:700; font-size:.95rem; }
.cta-secondary-link:hover{ text-decoration:underline; }

@media (max-width:820px){
  .hero-inner{ grid-template-columns:1fr; padding:2.75rem 0 2.25rem; }
  .hero-media{ order:-1; }
  .tabs{ gap:1.25rem; }
  .story-stats{ flex-direction:column; align-items:flex-start; }
}