:root {
    --manga-bg: #ffffff;
    --manga-text: #000000;
    --manga-primary: #ff3366;
    --manga-secondary: #ffcc00;
    --manga-border: #000000;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--manga-bg); color: var(--manga-text);
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
    line-height: 1.6;
    background-image: radial-gradient(#000 1px, transparent 1px);
    background-size: 15px 15px;
    background-position: 0 0;
}

a { text-decoration: none; color: inherit; }

.manga-container { max-width: 1000px; margin: 0 auto; padding: 20px; background: #fff; border-left: 4px solid #000; border-right: 4px solid #000; min-height: 100vh;}

/* Panel Style */
.panel {
    border: 4px solid var(--manga-border);
    background: #fff;
    position: relative;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.1);
    margin-bottom: 30px;
    overflow: hidden;
}

/* Header */
.manga-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; border-bottom: 4px solid #000;
    background: var(--manga-secondary);
}
.manga-brand {
    font-size: 32px; font-weight: 900;
    text-transform: uppercase; transform: skew(-5deg);
    text-shadow: 3px 3px 0 #fff, 5px 5px 0 #000;
}
.manga-nav { display: flex; gap: 20px; }
.manga-nav a {
    font-weight: bold; font-size: 18px; padding: 5px 10px;
    border: 2px solid transparent; transition: all 0.2s;
}
.manga-nav a:hover, .manga-nav a.active {
    border: 2px solid #000; background: #fff; transform: rotate(-2deg);
}

/* Hero Panel */
.manga-hero {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 60px 20px; background: repeating-linear-gradient(45deg, #fff, #fff 10px, #f0f0f0 10px, #f0f0f0 20px);
}
.hero-bubble {
    background: #fff; border: 4px solid #000; border-radius: 50%;
    padding: 30px 50px; position: relative; margin-bottom: 40px;
    box-shadow: 8px 8px 0 rgba(0,0,0,0.2);
}
.hero-bubble::after {
    content: ''; position: absolute; bottom: -20px; left: 50%;
    border-width: 20px 20px 0; border-style: solid;
    border-color: #000 transparent transparent transparent;
    transform: translateX(-50%);
}
.hero-bubble::before {
    content: ''; position: absolute; bottom: -14px; left: 50%;
    border-width: 16px 16px 0; border-style: solid;
    border-color: #fff transparent transparent transparent;
    transform: translateX(-50%); z-index: 1;
}
.manga-hero h1 { font-size: 42px; font-weight: 900; text-transform: uppercase; line-height: 1.2;}
.manga-hero p { font-size: 20px; font-weight: bold; margin-top: 10px; color: #555;}
.action-lines {
    display: flex; gap: 20px; margin-top: 20px;
}
.btn-manga {
    display: inline-block; padding: 15px 30px; font-size: 20px; font-weight: 900;
    color: #fff; background: var(--manga-primary); border: 4px solid #000;
    text-transform: uppercase; transform: skew(-5deg); transition: all 0.1s;
    box-shadow: 5px 5px 0 #000; cursor: pointer;
}
.btn-manga:active { transform: skew(-5deg) translate(5px, 5px); box-shadow: 0 0 0 #000;}
.btn-manga-alt {
    display: inline-block; padding: 15px 30px; font-size: 20px; font-weight: 900;
    color: #000; background: #fff; border: 4px solid #000;
    text-transform: uppercase; transform: skew(5deg); transition: all 0.1s;
    box-shadow: 5px 5px 0 #000; cursor: pointer;
}
.btn-manga-alt:active { transform: skew(5deg) translate(5px, 5px); box-shadow: 0 0 0 #000;}

/* Stats Panels */
.manga-stats { display: flex; gap: 15px; margin-bottom: 30px;}
.ms-panel {
    flex: 1; border: 4px solid #000; padding: 20px; text-align: center;
    background: var(--manga-secondary); box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}
.ms-val { font-size: 36px; font-weight: 900; text-shadow: 2px 2px 0 #fff;}
.ms-lbl { font-size: 16px; font-weight: bold; text-transform: uppercase;}

/* Feature Grid */
.manga-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px;}
.mg-panel {
    border: 4px solid #000; padding: 30px 20px; text-align: center;
    background: #fff; position: relative;
}
.mg-panel::before {
    content: 'BAM!'; position: absolute; top: -15px; left: -15px;
    background: var(--manga-primary); color: #fff; padding: 5px 10px;
    font-weight: 900; border: 3px solid #000; transform: rotate(-15deg);
    font-size: 14px;
}
.mg-panel:nth-child(2)::before { content: 'ZAP!'; background: var(--manga-secondary); color: #000;}
.mg-panel:nth-child(3)::before { content: 'POW!'; background: #00ccff;}
.mg-icon { font-size: 50px; margin-bottom: 15px;}
.mg-panel h3 { font-size: 22px; font-weight: 900; margin-bottom: 10px; text-transform: uppercase;}
.mg-panel p { font-size: 16px; font-weight: bold;}

/* Nodes */
.manga-nodes { border: 4px solid #000; padding: 30px; margin-bottom: 30px; background: #e6f7ff;}
.manga-nodes h2 { font-size: 28px; font-weight: 900; text-align: center; margin-bottom: 20px; text-transform: uppercase;}
.node-list { display: flex; flex-direction: column; gap: 10px;}
.node-item {
    display: flex; justify-content: space-between; padding: 15px;
    background: #fff; border: 3px solid #000; font-weight: bold;
    transform: skew(-2deg);
}

/* FAQ */
.manga-faq { border: 4px solid #000; padding: 30px; margin-bottom: 30px; background: #fff0f5;}
.manga-faq h2 { font-size: 28px; font-weight: 900; text-align: center; margin-bottom: 20px; text-transform: uppercase;}
.faq-wrap { display: flex; flex-direction: column; gap: 20px;}
.faq-item { background: #fff; border: 3px solid #000; padding: 20px; position: relative;}
.fq-q { font-size: 18px; font-weight: 900; margin-bottom: 10px; color: var(--manga-primary);}
.fq-a { font-size: 16px; font-weight: bold;}

footer { text-align: center; padding: 20px; font-weight: 900; border-top: 4px solid #000; background: var(--manga-secondary);}

@media (max-width: 900px) {
    .manga-header { flex-direction: column; gap: 15px;}
    .manga-stats { flex-wrap: wrap;}
    .ms-panel { min-width: 45%;}
    .manga-grid { grid-template-columns: 1fr;}
    .action-lines { flex-direction: column; width: 100%;}
    .btn-manga, .btn-manga-alt { width: 100%;}
}