/* ============================================
   ColonThreeMC — Dark sakura theme
   Palette: #FF8BA0 | #FFAEC2 | #FFCDD8 | #FFF0EC | #C49DA5
   Most primary → most secondary, left to right.
   ============================================ */

/* --- Fonts --- */
@font-face { font-family:'Quantico'; src:url('/public/fonts/Quantico-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Quantico'; src:url('/public/fonts/Quantico-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Quantico'; src:url('/public/fonts/Quantico-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Quantico'; src:url('/public/fonts/Quantico-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }

/* --- Tokens (dark sakura palette) --- */
:root {
  --bg: #1A0D18;
  --surface: #261422;
  --surface-border: #C49DA5;
  --text: #F0E0E4;
  --text-dim: #A08890;
  --text-bright: #FFF0EC;
  --primary: #FF8BA0;
  --primary-contrast: #1A0D18;
  --secondary: #FFAEC2;
  --tint: #FFCDD8;
  --shadow: rgba(0,0,0,0.3);
  --input-bg: #2E1824;
  --footer-bg: #120A12;
  --code-bg: #2E1824;
  --accent: #FFF0EC;
}

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Quantico',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;line-height:1.6}
main{flex:1;padding-top:100px}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

/* --- Container --- */
.container{max-width:1400px;margin:0 auto;padding:0 1rem;width:100%}

/* --- Utilities --- */
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.text-center{text-align:center}.fw-700{font-weight:700}
.flex{display:flex}.flex-wrap{flex-wrap:wrap}.gap-1{gap:.5rem}.gap-2{gap:1rem}
.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}

/* --- Navbar --- */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:.6rem 0;
  background:color-mix(in srgb,var(--surface) 70%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.navbar.scrolled{background:color-mix(in srgb,var(--surface) 88%,transparent);box-shadow:0 1px 3px var(--shadow)}
.navbar .container{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.navbar-logo img{width:clamp(40px,8vw,60px);height:auto}
.navbar-links{display:flex;align-items:center;gap:.4rem;list-style:none}
.navbar-links a{color:var(--text-bright);font-weight:700;font-size:.9rem;padding:.4rem .7rem;border-radius:8px;transition:background .15s}
.navbar-links a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);text-decoration:none}
.navbar-actions{display:flex;align-items:center;gap:.4rem}
.navbar-toggle{display:none;background:none;border:none;cursor:pointer;padding:.4rem;color:var(--text-bright);font-size:1.3rem}

/* Play Button */
.play-button{
  display:flex;align-items:center;gap:.4rem;background:var(--primary);color:var(--primary-contrast);
  border:none;padding:.5rem 1rem;border-radius:10px;font-family:'Quantico',sans-serif;
  font-weight:700;font-size:.85rem;cursor:pointer;transition:opacity .15s;white-space:nowrap;
}
.play-button:hover{opacity:.9}
.play-button .online-count{font-size:.7rem;opacity:.9;display:flex;align-items:center;gap:.2rem}

/* Mobile Drawer */
.drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:200}
.drawer-overlay.open{display:block}
.drawer{
  position:fixed;top:0;right:-260px;width:260px;height:100vh;
  background:var(--surface);z-index:201;transition:right .3s;padding:1rem;
  box-shadow:-4px 0 12px var(--shadow);
}
.drawer.open{right:0}
.drawer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.drawer-close{background:none;border:none;cursor:pointer;font-size:1.5rem;color:var(--text-bright);padding:.5rem}
.drawer-links{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.drawer-links a{display:block;padding:.7rem;color:var(--text-bright);font-weight:700;border-radius:8px;transition:background .15s}
.drawer-links a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);text-decoration:none}


/* --- Cards --- */
.card{background:var(--surface);border:1px solid var(--surface-border);border-radius:10px;padding:1.5rem 2rem}
.card-primary{background:var(--primary);border-color:transparent;color:var(--primary-contrast)}
.card-hover:hover{box-shadow:0 4px 12px var(--shadow)}

/* --- Blog Grid --- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.blog-card{border-radius:10px;background:var(--surface);border:1px solid var(--surface-border);overflow:hidden;transition:box-shadow .2s,transform .15s;cursor:pointer}
.blog-card:hover{box-shadow:0 4px 12px var(--shadow);transform:translateY(-2px)}
.blog-card-image{width:100%;height:180px;object-fit:cover;display:block}
.blog-card-body{padding:.8rem}
.blog-card-title{font-size:1.1rem;font-weight:700;color:var(--text-bright);margin-bottom:.3rem}
.blog-card-excerpt{font-size:.85rem;color:var(--text-dim);line-height:1.5}
.blog-card-meta{font-size:.78rem;color:var(--text-dim);margin-top:.4rem;display:flex;gap:.4rem;flex-wrap:wrap}

/* --- Blog Detail --- */
.blog-article{max-width:860px;margin:0 auto}
.blog-header{position:relative;padding-top:1.5rem;padding-bottom:1rem}
.back-link{position:absolute;left:0;top:-.5rem;display:flex;align-items:center;gap:.3rem;color:var(--text-bright);font-weight:600;font-size:.9rem}
.blog-meta{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
.blog-author-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:var(--primary-contrast);font-weight:700;font-size:.85rem;flex-shrink:0}
.blog-author-info .name{font-size:1rem;font-weight:600;color:var(--text-bright)}
.blog-author-info .date{font-size:.85rem;color:var(--text-dim)}
.blog-tags{display:flex;gap:.3rem;margin-bottom:.8rem;flex-wrap:wrap}
.tag{display:inline-block;padding:.15rem .5rem;border-radius:4px;font-size:.7rem;font-weight:700;background:color-mix(in srgb,var(--tint) 25%,transparent);color:var(--tint);text-transform:uppercase;letter-spacing:.5px}
.blog-feature-image{width:100%;height:300px;object-fit:cover;border-radius:10px;margin-bottom:1.5rem}
.blog-title{font-size:1.8rem;font-weight:700;color:var(--text-bright);margin-bottom:1rem;line-height:1.2}
.blog-content{font-size:1rem;line-height:1.8;color:var(--text)}
.blog-content h2{font-size:1.4rem;font-weight:700;color:var(--text-bright);margin-top:1.5rem;margin-bottom:.8rem}
.blog-content h3{font-size:1.15rem;font-weight:700;color:var(--text-bright);margin-top:1.2rem;margin-bottom:.6rem}
.blog-content p{margin-bottom:.8rem}
.blog-content ul,.blog-content ol{margin-bottom:.8rem;padding-left:1.5rem}
.blog-content li{margin-bottom:.2rem}
.blog-content a{font-weight:600}
.blog-content strong{color:var(--text-bright)}
.blog-content blockquote{border-left:4px solid var(--accent);padding-left:1rem;margin:1rem 0;color:var(--text-dim);font-style:italic}
.blog-content img{border-radius:8px;margin:1rem auto}
.blog-content code{background:var(--code-bg);padding:.1rem .35rem;border-radius:4px;font-size:.9em}
.blog-content pre{background:var(--code-bg);padding:1rem;border-radius:8px;overflow-x:auto;margin:1rem 0}
.blog-content pre code{background:none;padding:0}
.blog-content table{width:100%;border-collapse:collapse;margin:.8rem 0}
.blog-content th,.blog-content td{border:1px solid var(--surface-border);padding:.4rem .6rem;text-align:left}
.blog-content th{background:var(--code-bg);font-weight:700;color:var(--text-bright)}

/* --- Page Section --- */
.page-section{position:relative;z-index:1;padding-bottom:4rem}
.page-title{font-size:2.2rem;font-weight:700;text-align:center;margin-bottom:.4rem;color:var(--text-bright)}
.page-desc{font-size:1rem;text-align:center;color:var(--text-dim);margin-bottom:1.5rem}

/* --- Vote Grid --- */
.vote-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5rem;margin-bottom:1rem}
.vote-link{display:flex;align-items:center;gap:.4rem;padding:.8rem;background:var(--primary);color:var(--primary-contrast)!important;border-radius:10px;font-size:1rem;font-weight:700;transition:opacity .15s;text-decoration:none!important}
.vote-link:hover{opacity:.9}

/* --- Accordion --- */
.accordion{display:flex;flex-direction:column;gap:.35rem}
.accordion-item{background:var(--surface);border:1px solid var(--surface-border);border-radius:10px;overflow:hidden}
.accordion-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;background:none;border:none;cursor:pointer;font-family:'Quantico',sans-serif;font-size:.95rem;font-weight:700;color:var(--text-bright);text-align:left;transition:background .15s}
.accordion-trigger:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.accordion-trigger::after{content:'+';font-size:1.3rem;color:var(--secondary)}
.accordion-trigger[aria-expanded="true"]::after{content:'−'}
.accordion-panel{max-height:0;overflow:hidden;transition:max-height .25s}
.accordion-panel.open{max-height:200px}
.accordion-panel p{padding:.2rem 1rem .8rem;color:var(--text-dim);font-size:.9rem;line-height:1.6}

/* --- CTA Banner --- */
.cta-banner{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;background:var(--primary);border-radius:10px;margin-top:1rem;gap:1rem;flex-wrap:wrap}
.cta-banner h2{color:var(--primary-contrast);font-size:1.2rem;margin-bottom:.2rem}
.cta-banner p{color:var(--primary-contrast);font-size:.85rem;opacity:.9}
.cta-btn{display:inline-block;background:var(--primary);color:var(--primary-contrast)!important;border:none;padding:.5rem 1.2rem;border-radius:10px;font-family:'Quantico',sans-serif;font-weight:700;font-size:.9rem;cursor:pointer;transition:opacity .15s;text-decoration:none!important}
.cta-btn:hover{opacity:.85}

/* --- Join Modal --- */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:300;opacity:0;transition:opacity .2s}
.modal-overlay.open{display:block;opacity:1}
.join-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);z-index:301;background:var(--surface);border:1px solid var(--surface-border);border-radius:10px;width:90%;max-width:450px;box-shadow:0 8px 32px var(--shadow);opacity:0;transition:opacity .2s,transform .2s}
.join-modal.open{display:block;opacity:1;transform:translate(-50%,-50%) scale(1)}
.join-modal-content{padding:1.2rem}
.join-modal-header{position:relative;margin-bottom:.8rem;padding-right:2rem}
.join-modal-title{font-size:1.15rem;font-weight:700;color:var(--text-bright);margin-bottom:.2rem}
.join-modal-desc{color:var(--text-dim);font-size:.85rem}
.join-modal-close{position:absolute;top:0;right:0;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--text-dim);padding:.2rem;line-height:1}
.join-modal-body{display:flex;flex-direction:column;gap:.6rem;margin-bottom:.8rem}
.ip-group{display:flex;flex-direction:column;gap:.2rem}
.ip-label{font-size:.8rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}
.ip-input-group{display:flex;gap:.3rem}
.ip-input{flex:1;padding:.5rem .7rem;border:1px solid var(--surface-border);border-radius:8px;background:var(--input-bg);color:var(--text-bright);font-family:'Quantico',sans-serif;font-size:.9rem}
.ip-copy-btn{padding:.5rem .8rem;border:1px solid var(--surface-border);border-radius:8px;background:var(--primary);color:var(--primary-contrast);font-family:'Quantico',sans-serif;font-weight:700;font-size:.8rem;cursor:pointer;white-space:nowrap;transition:opacity .15s}
.ip-copy-btn:hover{opacity:.9}
.ip-copy-btn.copied{background:#4CAF50}
.join-modal-footer{display:flex;justify-content:flex-end}
.join-modal-close-btn{padding:.5rem 1.2rem;border:none;border-radius:10px;background:var(--primary);color:var(--primary-contrast);font-family:'Quantico',sans-serif;font-weight:700;font-size:.9rem;cursor:pointer}
.join-modal-close-btn:hover{opacity:.9}

/* --- Footer --- */
.footer{margin-top:auto;padding:.6rem 0;background:var(--footer-bg);border-top:1px solid var(--surface-border)}
.footer .container{display:flex;justify-content:center}
.footer-text{font-size:.8rem;color:var(--text-dim)}

/* --- 404 --- */
.not-found{text-align:center;padding:5rem 1rem}
.not-found h1{font-size:5rem;font-weight:700;color:var(--primary);line-height:1}
.not-found p{font-size:1.1rem;color:var(--text-dim);margin:.8rem 0 1.5rem}

/* --- Animations --- */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .4s ease forwards}

/* --- Responsive --- */
@media(max-width:768px){
  .navbar-links,.hide-mobile{display:none}
  .navbar-toggle{display:block}
  .blog-title{font-size:1.3rem}
  .blog-feature-image{height:200px}
  .vote-grid{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr}
  .page-title{font-size:1.5rem}
  .cta-banner{flex-direction:column;text-align:center}
}
@media(min-width:769px){.hide-desktop{display:none!important}}
@media(max-width:480px){.vote-grid{grid-template-columns:1fr}}