/* Extra components for the new articles and tools.
   The original palette, fonts, header, homepage and calculator are owned by styles.css. */
[hidden] { display:none !important; }
.skip-link { position:absolute; left:1rem; top:-100px; z-index:10000; padding:.75rem; background:var(--surface); color:var(--ink); }
.skip-link:focus { top:0; }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.menu-toggle { background:transparent; border:0; }
.article-page { position:relative; width:min(1000px,calc(100% - 2rem)); margin:0 auto; padding:3rem 0; }
.article-intro { border-bottom:1px solid var(--line); padding-bottom:1.5rem; margin-bottom:1.5rem; }
.article-intro h1 { font-size:2rem; }
.article-meta { color:var(--muted); font-size:.85rem; }
.article-page h2 { margin:2rem 0 .75rem; color:var(--primary); }
.article-page h3 { margin-top:1.5rem; }
.article-page p,.article-page li { max-width:80ch; }
.article-page li { margin:.5rem 0; }
.article-page a:not(.button):not(.guide-card) { text-underline-offset:3px; }
.article-page .guide-card { display:block; text-decoration:none; }
.article-page .guide-card strong { display:block; margin:.5rem 0; }
.article-page .guide-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.toc { padding:1rem; border:1px solid var(--line); background:var(--surface); }
.toc ul { margin:.5rem 0 0; padding-left:1.25rem; columns:2; }
.toc li { break-inside:avoid; }
.notice { border-left:3px solid var(--primary); padding:1rem; margin:1rem 0; background:var(--surface); }
.article-page table { width:100%; min-width:440px; border-collapse:collapse; }
.article-page td,.article-page th { padding:.75rem; text-align:left; vertical-align:top; border:1px solid var(--line); }
.article-page th { background:var(--surface-header); color:var(--primary); }
.article-page caption { padding:.5rem 0; text-align:left; color:var(--muted); }
.table-scroll { overflow:auto; margin:1rem 0; }
.article-page label { display:grid; gap:.35rem; margin:.75rem 0; }
.article-page input,.article-page select,.article-page textarea { background:var(--surface-soft); color:var(--ink); border:1px solid var(--line); padding:.5rem; width:100%; min-width:0; border-radius:var(--radius-sm); }
.article-page textarea { min-height:100px; resize:vertical; }
.tool-result { padding:1rem; white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid var(--line); background:var(--surface); margin:1rem 0; }
.hud-map { position:relative; aspect-ratio:16/9; background:var(--surface); border:1px solid var(--line); margin:1rem 0; overflow:hidden; }
.hud-map span { position:absolute; display:grid; place-items:center; width:15%; aspect-ratio:1; transform:translate(-50%,-50%); border:2px solid var(--primary); border-radius:50%; background:var(--surface-soft); font-size:clamp(.6rem,2vw,.85rem); }
.hud-map .hud-aim { left:50%; top:50%; width:6%; border-color:var(--muted); }
.name-preview { padding:1rem; min-height:5rem; font-size:clamp(1.4rem,5vw,2.5rem); overflow-wrap:anywhere; border:1px solid var(--line); }
.symbol-grid { display:flex; flex-wrap:wrap; gap:.5rem; }
.symbol-grid button { background:var(--surface); color:var(--ink); border:1px solid var(--line); min-width:44px; min-height:44px; }
.crosshair-preview { height:180px; display:grid; place-items:center; background:var(--surface-soft); margin:1rem 0; }
.crosshair { position:relative; width:50px; height:50px; --cross-color:#fff; --cross-width:3px; }
.crosshair:before,.crosshair:after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--cross-color); }
.crosshair:before { width:100%; height:var(--cross-width); }.crosshair:after { height:100%; width:var(--cross-width); }
#copy-fallback { width:100%; min-height:150px; background:var(--surface); color:var(--ink); }
.quick-answer { background:#111; border:1px solid rgba(255,0,0,0.3); border-left:4px solid var(--primary); padding:1.25rem 1.5rem; margin:1.5rem 0; border-radius:4px; box-shadow:0 4px 16px rgba(0,0,0,0.4); }
.quick-answer strong.qa-title { display:inline-flex; align-items:center; gap:0.5rem; color:var(--primary); font-size:0.95rem; text-transform:uppercase; letter-spacing:1px; margin-bottom:0.5rem; font-weight:700; }
.quick-answer p { margin:0.35rem 0 0; color:#e0e0e0; font-size:0.98rem; line-height:1.6; }
.metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin:1.5rem 0; }
.metric-card { background:var(--surface); border:1px solid var(--line); padding:1rem; border-radius:4px; text-align:center; }
.metric-card .metric-val { font-size:1.75rem; font-weight:800; color:var(--primary); display:block; line-height:1.2; }
.metric-card .metric-label { font-size:0.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-top:0.35rem; display:block; }
.step-box { background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:1.25rem; margin:1.25rem 0; }
.step-box strong.step-num { display:inline-block; background:var(--primary); color:#fff; font-size:0.75rem; font-weight:700; padding:2px 8px; border-radius:2px; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:0.5rem; }
.pro-tip { background:rgba(255,0,0,0.06); border-left:3px solid #ff4444; padding:0.85rem 1.25rem; margin:1rem 0; border-radius:0 4px 4px 0; }
.pro-tip strong { color:#ff5555; }
.faq-section { margin-top:2.5rem; border-top:1px solid var(--line); padding-top:1.5rem; }
.faq-item { background:var(--surface); border:1px solid var(--line); border-radius:4px; margin-bottom:0.75rem; padding:0.85rem 1.15rem; transition:border-color 0.2s; }
.faq-item:hover { border-color:rgba(255,0,0,0.4); }
.faq-item summary { font-weight:600; cursor:pointer; color:var(--ink); font-size:1.05rem; }
.faq-item summary:focus-visible { outline:2px solid var(--primary); }
.faq-item p { margin:0.75rem 0 0.25rem; color:#bbb; font-size:0.95rem; line-height:1.6; }
.chip-grid { display:flex; flex-wrap:wrap; gap:0.5rem; margin:0.75rem 0; }
.chip { background:var(--surface-soft); border:1px solid var(--line); padding:0.25rem 0.65rem; border-radius:3px; font-size:0.82rem; color:var(--ink); }
.chip.active { border-color:var(--primary); color:var(--primary); }
.name-tool-card { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:1.5rem; margin:1.5rem 0; box-shadow:0 4px 20px rgba(0,0,0,0.5); }
.name-input-row { display:flex; gap:0.75rem; align-items:stretch; margin-bottom:0.75rem; }
.name-input-row input { flex:1; font-size:1.15rem; padding:0.85rem 1rem; background:#0c0c0c; border:1px solid var(--line); border-radius:6px; color:#fff; font-weight:600; }
.name-input-row input:focus { border-color:var(--primary); outline:none; box-shadow:0 0 12px rgba(255,0,0,0.25); }
.random-btn { background:var(--surface-soft); border:1px solid var(--primary); color:#fff; padding:0.85rem 1.25rem; font-weight:700; border-radius:6px; cursor:pointer; white-space:nowrap; transition:all 0.2s ease; display:inline-flex; align-items:center; gap:0.5rem; }
.random-btn:hover { background:var(--primary); color:#fff; transform:translateY(-1px); }
.name-status-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; font-size:0.88rem; }
.ff-rule-badge { display:inline-flex; align-items:center; gap:0.35rem; padding:4px 10px; border-radius:4px; font-weight:700; font-size:0.82rem; }
.ff-rule-badge.valid { background:rgba(46,204,113,0.15); color:#2ecc71; border:1px solid rgba(46,204,113,0.4); }
.ff-rule-badge.invalid { background:rgba(231,76,60,0.15); color:#e74c3c; border:1px solid rgba(231,76,60,0.4); }
.style-filters { display:flex; gap:0.5rem; overflow-x:auto; padding:0.5rem 0 1rem; scrollbar-width:none; }
.style-filter-btn { background:var(--surface-soft); border:1px solid var(--line); color:var(--muted); padding:0.5rem 1rem; border-radius:20px; font-size:0.85rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:all 0.2s ease; }
.style-filter-btn:hover { color:var(--ink); border-color:rgba(255,0,0,0.5); }
.style-filter-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 2px 8px rgba(255,0,0,0.4); }
.name-cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; margin:1.5rem 0; }
.name-style-card { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:0.75rem; transition:all 0.2s ease; }
.name-style-card:hover { border-color:var(--primary); background:#141414; transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.6); }
.name-style-card .style-text { font-size:1.15rem; font-weight:600; color:#fff; overflow-x:auto; scrollbar-width:none; white-space:nowrap; flex:1; }
.card-copy-btn { background:var(--surface-soft); border:1px solid var(--line); color:var(--ink); padding:0.45rem 0.85rem; border-radius:4px; font-size:0.82rem; font-weight:700; cursor:pointer; transition:all 0.2s ease; display:inline-flex; align-items:center; gap:0.35rem; flex-shrink:0; }
.card-copy-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.card-copy-btn.copied { background:#27ae60; color:#fff; border-color:#27ae60; }
.invisible-space-box { background:linear-gradient(135deg,#181818,#111); border:1px solid rgba(255,0,0,0.3); border-left:4px solid var(--primary); border-radius:8px; padding:1.25rem 1.5rem; margin:1.5rem 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.invisible-space-box .inv-info h3 { margin:0 0 0.25rem; color:#fff; font-size:1.1rem; }
.invisible-space-box .inv-info p { margin:0; color:var(--muted); font-size:0.88rem; }
.symbol-cat-title { font-size:0.95rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--primary); margin:1.5rem 0 0.5rem; font-weight:700; }
.symbol-grid-wide { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1rem; }
.symbol-grid-wide button { background:var(--surface); color:var(--ink); border:1px solid var(--line); min-width:42px; min-height:42px; border-radius:4px; font-size:1.15rem; cursor:pointer; transition:all 0.15s ease; }
.symbol-grid-wide button:hover { border-color:var(--primary); color:var(--primary); background:rgba(255,0,0,0.1); transform:scale(1.1); }
.name-card-meta { display:flex; align-items:center; gap:0.5rem; margin-top:0.35rem; }
.name-card-tag { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:2px 6px; border-radius:3px; background:rgba(255,255,255,0.08); color:var(--muted); }
.name-card-tag.pro { background:rgba(255,0,0,0.15); color:#ff5555; }
.name-card-tag.clan { background:rgba(52,152,219,0.15); color:#3498db; }
.name-card-tag.gangster { background:rgba(155,89,182,0.15); color:#9b59b6; }
.name-card-tag.aesthetic { background:rgba(230,126,34,0.15); color:#e67e22; }
.name-card-tag.fonts { background:rgba(46,204,113,0.15); color:#2ecc71; }
.name-card-len { font-size:0.75rem; color:var(--muted); }
.name-card-len.warn { color:#e74c3c; font-weight:700; }
.banner-preview-box { background:linear-gradient(135deg,#1f1111,#0d0d0d); border:1px solid rgba(255,0,0,0.4); border-radius:8px; padding:1.25rem 1.5rem; margin:1.5rem 0; display:flex; align-items:center; gap:1.25rem; box-shadow:0 8px 24px rgba(0,0,0,0.6); position:relative; overflow:hidden; }
.banner-preview-box::before { content:''; position:absolute; top:-50%; right:-20%; width:200px; height:200px; background:radial-gradient(circle,rgba(255,0,0,0.15),transparent 70%); pointer-events:none; }
.banner-avatar { width:56px; height:56px; border-radius:8px; border:2px solid #e74c3c; background:#181818; display:grid; place-items:center; font-size:1.75rem; flex-shrink:0; box-shadow:0 0 10px rgba(255,0,0,0.3); }
.banner-details { flex:1; min-width:0; }
.banner-badge-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.25rem; }
.banner-badge { font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; padding:2px 7px; border-radius:3px; background:#e74c3c; color:#fff; }
.banner-lvl { font-size:0.75rem; color:#ffd700; font-weight:700; }
.banner-ign { font-size:1.5rem; font-weight:800; color:#fff; letter-spacing:0.5px; text-shadow:0 2px 8px rgba(0,0,0,0.8); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.banner-sig { font-size:0.8rem; color:#888; font-style:italic; margin-top:2px; }
#toast-notification { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(100px); background:#181818; border:1px solid #2ecc71; color:#fff; padding:0.75rem 1.5rem; border-radius:30px; font-weight:700; font-size:0.9rem; box-shadow:0 8px 25px rgba(0,0,0,0.8); display:flex; align-items:center; gap:0.5rem; z-index:99999; opacity:0; pointer-events:none; transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
#toast-notification.show { transform:translateX(-50%) translateY(0); opacity:1; }

@media(max-width:640px) {
  .top-nav[data-collapsed="true"] { display:none; }
  .top-nav[data-collapsed="false"] { display:flex; animation: menuSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .article-page .guide-grid { grid-template-columns:1fr; }
  .article-page { padding-top:1.5rem; }
  .toc ul { columns:1; }
}
@media print { .site-header,.site-footer,.toc,.skip-link,canvas,button { display:none; } }