/* =========================================================
   maljosim.com v2 -- goblincore comment verifier (forest-floor edition)
   Palette: Forest Dark / Neon Moss / Neon Fungi / Damp Cream /
            Bark Dark / Grain Brown / Tropical Coral
   Fonts:   Fira Code (logotype + headings), Nunito (body),
            Noto Sans KR (Korean glyphs)
   ========================================================= */

:root {
    --forest-dark: #0A1208;
    --neon-moss: #39FF14;
    --neon-fungi: #C840FF;
    --grain-brown: #3A2818;
    --damp-cream: #D8D0C0;
    --bark-dark: #1A1A10;
    --tropical-coral: #FF6B6B;

    --font-mono: "Fira Code", ui-monospace, "Menlo", monospace;
    --font-body: "Nunito", "Helvetica Neue", system-ui, sans-serif;
    --font-kor: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;

    --pulse-shadow: 0 0 0 0 rgba(57, 255, 20, 0.4);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    min-height: 100vh;
    background: var(--forest-dark);
    color: var(--damp-cream);
    font-family: var(--font-body);
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.7;
    overflow-x: hidden;
}

body {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 18% 22%, rgba(57, 255, 20, 0.06), transparent 60%),
        radial-gradient(ellipse at 82% 78%, rgba(200, 64, 255, 0.05), transparent 60%),
        var(--forest-dark);
}

::selection {
    background: rgba(57, 255, 20, 0.35);
    color: var(--forest-dark);
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Atmospheric glows ---------- */
.atmosphere {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.08;
    will-change: transform, opacity;
}
.glow-moss {
    width: 520px; height: 520px;
    top: -120px; left: -100px;
    background: radial-gradient(circle, var(--neon-moss), transparent 65%);
    animation: drift-a 18s ease-in-out infinite alternate;
}
.glow-fungi {
    width: 440px; height: 440px;
    bottom: -80px; right: -60px;
    background: radial-gradient(circle, var(--neon-fungi), transparent 65%);
    animation: drift-b 22s ease-in-out infinite alternate;
}
.glow-moss-2 {
    width: 320px; height: 320px;
    top: 45%; right: 20%;
    background: radial-gradient(circle, var(--neon-moss), transparent 70%);
    opacity: 0.05;
    animation: drift-c 26s ease-in-out infinite alternate;
}
.glow-fungi-2 {
    width: 380px; height: 380px;
    bottom: 25%; left: 12%;
    background: radial-gradient(circle, var(--neon-fungi), transparent 70%);
    opacity: 0.06;
    animation: drift-d 30s ease-in-out infinite alternate;
}

@keyframes drift-a {
    0%   { transform: translate(0,0)         scale(1); }
    100% { transform: translate(60px, 40px)  scale(1.08); }
}
@keyframes drift-b {
    0%   { transform: translate(0,0)         scale(1); }
    100% { transform: translate(-50px, -30px) scale(1.05); }
}
@keyframes drift-c {
    0%   { transform: translate(0,0)         scale(0.95); }
    100% { transform: translate(-40px, 20px) scale(1.1); }
}
@keyframes drift-d {
    0%   { transform: translate(0,0)         scale(1); }
    100% { transform: translate(30px, -40px) scale(1.07); }
}

/* ---------- Grain overlay (heavy, warm) ---------- */
.grain {
    position: fixed;
    inset: -10%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.12;
    mix-blend-mode: overlay;
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.227  0 0 0 0 0.157  0 0 0 0 0.094  0 0 0 1 0'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='1'/></svg>");
    background-size: 240px 240px;
    animation: grain-shift 6s steps(8) infinite;
}
@keyframes grain-shift {
    0%   { transform: translate(0,0); }
    20%  { transform: translate(-12px, 10px); }
    40%  { transform: translate(6px, -14px); }
    60%  { transform: translate(-8px, -6px); }
    80%  { transform: translate(14px, 8px); }
    100% { transform: translate(0, 0); }
}

/* ---------- Tropical fish layer ---------- */
.fish-tank {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.fish {
    position: absolute;
    width: 38px;
    height: 22px;
    color: var(--neon-moss);
    filter: drop-shadow(0 0 6px currentColor);
    opacity: 0.85;
    will-change: transform;
}
.fish svg { width: 100%; height: 100%; }
.fish.flipped svg { transform: scaleX(-1); }
.fish.fish-moss   { color: var(--neon-moss); }
.fish.fish-fungi  { color: var(--neon-fungi); }
.fish.fish-coral  { color: var(--tropical-coral); }

/* ---------- Forest floor / main ---------- */
.forest-floor {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 4vw 120px;
}

/* ---------- Asymmetric blocks ---------- */
.block {
    position: relative;
    margin: 110px 0;
    padding: 40px 36px;
}

.block:first-child { margin-top: 40px; }

.block::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 12px;
    width: 18px;
    height: 18px;
    border-top: 1px solid rgba(57, 255, 20, 0.35);
    border-left: 1px solid rgba(57, 255, 20, 0.35);
}
.block::after {
    content: "";
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 18px;
    height: 18px;
    border-bottom: 1px solid rgba(200, 64, 255, 0.3);
    border-right: 1px solid rgba(200, 64, 255, 0.3);
}

/* Per-block asymmetry */
.block-hero      { margin-left: 2%;   margin-right: 30%; max-width: 720px; }
.block-prompt    { margin-left: 38%;  margin-right: 2%;  max-width: 60%; }
.block-verifier  { margin-left: 6%;   margin-right: 6%;  max-width: 88%; }
.block-lexicon   { margin-left: 28%;  margin-right: 4%;  max-width: 65%; }
.block-method    { margin-left: 4%;   margin-right: 32%; max-width: 62%; }
.block-foot      { margin-left: 14%;  margin-right: 14%; max-width: 70%; text-align: center; }

@media (max-width: 760px) {
    .block-hero, .block-prompt, .block-verifier,
    .block-lexicon, .block-method, .block-foot {
        margin-left: 0; margin-right: 0; max-width: 100%;
    }
    .block { padding: 28px 18px; }
}

.block-tag {
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(57, 255, 20, 0.55);
    letter-spacing: 0.06em;
    margin-bottom: 18px;
    text-transform: lowercase;
}

.block-heading {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.3;
    color: var(--damp-cream);
    margin-bottom: 22px;
    letter-spacing: -0.01em;
}

.block-body {
    color: var(--damp-cream);
    opacity: 0.86;
    font-size: clamp(15px, 1.05vw, 17px);
}

/* ---------- Vines / mushrooms ---------- */
.vine {
    position: absolute;
    width: 200px;
    height: 80px;
    color: rgba(216, 208, 192, 0.18);
    pointer-events: none;
}
.vine-hero    { top: -28px;  right: -40px; transform: rotate(8deg); }
.vine-lexicon { bottom: -22px; left: -50px; transform: rotate(-12deg); }
.vine-foot    { top: -30px;  left: 50%; transform: translateX(-50%) rotate(-2deg); }

.mushroom {
    position: absolute;
    width: 56px;
    height: 56px;
    color: var(--neon-fungi);
    filter: drop-shadow(0 0 8px rgba(200, 64, 255, 0.5));
    opacity: 0.85;
    pointer-events: none;
    animation: mush-bob 5s ease-in-out infinite alternate;
}
.mushroom-prompt { top: -18px; right: -8px; }
.mushroom-method { bottom: -10px; right: -22px; color: var(--neon-moss);
                   filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.45)); }

@keyframes mush-bob {
    0%   { transform: translateY(0)    rotate(-3deg); }
    100% { transform: translateY(-6px) rotate(3deg); }
}

/* ---------- Hero / logotype ---------- */
.block-hero { padding-top: 70px; padding-bottom: 70px; }

.logotype {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(40px, 7vw, 88px);
    color: var(--neon-moss);
    letter-spacing: -0.02em;
    line-height: 1;
    text-shadow:
        0 0 10px rgba(57, 255, 20, 0.55),
        0 0 26px rgba(57, 255, 20, 0.25);
    display: flex;
    align-items: baseline;
    gap: 0.05em;
}
.logotype-line { display: inline-block; }
.logotype-cursor {
    display: inline-block;
    color: var(--neon-moss);
    animation: cursor-blink 1.05s steps(2) infinite;
}
@keyframes cursor-blink {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.logotype-korean {
    margin-top: 12px;
    font-family: var(--font-kor);
    font-weight: 500;
    font-size: clamp(18px, 1.6vw, 24px);
    color: var(--neon-fungi);
    letter-spacing: 0.06em;
    text-shadow: 0 0 10px rgba(200, 64, 255, 0.45);
    opacity: 0.95;
}

.purpose-statement {
    margin-top: 30px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    max-width: 60ch;
    color: var(--damp-cream);
    opacity: 0.92;
    font-size: clamp(15px, 1.1vw, 18px);
}

.pulse-dot {
    flex: 0 0 12px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--neon-moss);
    margin-top: 0.55em;
    box-shadow: var(--pulse-shadow);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0   rgba(57,255,20,0.4); }
    70%  { box-shadow: 0 0 0 20px rgba(57,255,20,0); }
    100% { box-shadow: 0 0 0 0   rgba(57,255,20,0); }
}

.purpose-text { display: inline-block; }

/* ---------- Verifier UI ---------- */
.block-verifier { padding: 56px 40px; }

.verifier {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 36px;
    align-items: stretch;
}
@media (max-width: 860px) {
    .verifier { grid-template-columns: 1fr; }
}

.verifier-frame {
    position: relative;
    background: var(--bark-dark);
    border: 1px solid rgba(57, 255, 20, 0.3);
    border-radius: 4px;
    padding: 24px 22px 20px;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.verifier-frame:focus-within {
    border-color: var(--neon-moss);
    box-shadow: 0 0 0 1px rgba(57, 255, 20, 0.35),
                0 0 28px rgba(57, 255, 20, 0.18);
}

.verifier-corner {
    position: absolute;
    width: 14px; height: 14px;
    border-color: var(--neon-fungi);
    opacity: 0.55;
}
.corner-tl { top: -1px; left: -1px;
             border-top: 1px solid; border-left: 1px solid; }
.corner-tr { top: -1px; right: -1px;
             border-top: 1px solid; border-right: 1px solid; }
.corner-bl { bottom: -1px; left: -1px;
             border-bottom: 1px solid; border-left: 1px solid; }
.corner-br { bottom: -1px; right: -1px;
             border-bottom: 1px solid; border-right: 1px solid; }

.verifier-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(57, 255, 20, 0.7);
    margin-bottom: 12px;
    letter-spacing: 0.04em;
}
.label-prefix { color: var(--neon-fungi); margin-right: 6px; }

.verifier-input {
    width: 100%;
    min-height: 200px;
    background: transparent;
    color: var(--damp-cream);
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1.65;
    border: 0;
    outline: none;
    resize: vertical;
    caret-color: var(--neon-moss);
    padding: 4px 2px;
}
.verifier-input::placeholder {
    color: rgba(216, 208, 192, 0.32);
    font-style: italic;
}

.verifier-meta {
    margin-top: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(216, 208, 192, 0.55);
}
.meta-divider { color: rgba(57, 255, 20, 0.4); }
.meta-mode    { color: var(--neon-fungi); opacity: 0.85; }

.verifier-actions {
    margin-top: 22px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.verify-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: transparent;
    color: var(--neon-moss);
    border: 1px solid var(--neon-moss);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.3s ease, color 0.3s ease;
}
.verify-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(57, 255, 20, 0.08);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
    z-index: 0;
}
.verify-btn:hover::before { transform: translateX(0); }
.verify-btn .verify-btn-glyph,
.verify-btn .verify-btn-label { position: relative; z-index: 1; }
.verify-btn-glyph { color: var(--neon-fungi); }

.pulse-glow {
    box-shadow: var(--pulse-shadow);
    animation: pulse 2s infinite;
}

.clear-btn {
    background: transparent;
    color: rgba(216, 208, 192, 0.7);
    border: 1px dashed rgba(216, 208, 192, 0.3);
    padding: 12px 18px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease;
    letter-spacing: 0.05em;
}
.clear-btn:hover {
    color: var(--tropical-coral);
    border-color: rgba(255, 107, 107, 0.45);
}

/* ---------- Verifier result ---------- */
.verifier-result {
    position: relative;
    background:
        linear-gradient(180deg, rgba(26, 26, 16, 0.85), rgba(10, 18, 8, 0.85)),
        radial-gradient(circle at 50% 0%, rgba(200, 64, 255, 0.08), transparent 70%);
    border: 1px solid rgba(216, 208, 192, 0.12);
    border-radius: 4px;
    padding: 22px 22px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.result-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(216, 208, 192, 0.45);
    font-family: var(--font-mono);
    font-size: 14px;
    text-align: center;
    line-height: 1.6;
    padding: 12px;
}
.result-empty-mark {
    font-size: 28px;
    color: var(--neon-moss);
    opacity: 0.55;
    animation: blink 2.6s ease-in-out infinite;
}
@keyframes blink {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.7; }
}

.result-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.result-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-family: var(--font-mono);
}
.result-verdict {
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--damp-cream);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.result-score {
    font-size: 14px;
    color: rgba(216, 208, 192, 0.7);
}

.result-card.verdict-moss   .result-verdict {
    color: var(--neon-moss);
    text-shadow: 0 0 12px rgba(57, 255, 20, 0.5);
}
.result-card.verdict-fungi  .result-verdict {
    color: var(--neon-fungi);
    text-shadow: 0 0 12px rgba(200, 64, 255, 0.5);
}
.result-card.verdict-coral  .result-verdict {
    color: var(--tropical-coral);
    text-shadow: 0 0 12px rgba(255, 107, 107, 0.5);
}

.result-bar {
    width: 100%;
    height: 6px;
    background: rgba(216, 208, 192, 0.08);
    border-radius: 3px;
    overflow: hidden;
}
.result-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--neon-moss), var(--neon-fungi), var(--tropical-coral));
    transition: width 0.6s ease;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.4);
}

.result-flags {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.result-flags li {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    color: var(--damp-cream);
    opacity: 0.88;
    padding: 8px 12px;
    background: rgba(10, 18, 8, 0.6);
    border-left: 2px solid rgba(57, 255, 20, 0.4);
    border-radius: 2px;
}
.result-flags li.flag-fungi { border-left-color: rgba(200, 64, 255, 0.6); }
.result-flags li.flag-coral { border-left-color: rgba(255, 107, 107, 0.7); }

.result-flag-key {
    font-weight: 700;
    color: var(--neon-moss);
    margin-right: 8px;
}
.flag-fungi .result-flag-key { color: var(--neon-fungi); }
.flag-coral .result-flag-key { color: var(--tropical-coral); }

.result-advice {
    color: rgba(216, 208, 192, 0.85);
    font-size: 14px;
    line-height: 1.6;
    font-style: italic;
}

/* ---------- Lexicon ---------- */
.lexicon-list {
    list-style: none;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.lex-item {
    display: grid;
    grid-template-columns: 28px 140px 1fr;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid rgba(216, 208, 192, 0.1);
}
.lex-item:first-child { border-top: 0; }

.lex-swatch {
    width: 18px; height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 12px currentColor;
}
.lex-moss  .lex-swatch { background: var(--neon-moss);     color: var(--neon-moss); }
.lex-fungi .lex-swatch { background: var(--neon-fungi);    color: var(--neon-fungi); }
.lex-coral .lex-swatch { background: var(--tropical-coral); color: var(--tropical-coral); }

.lex-name {
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.05em;
    color: var(--damp-cream);
}
.lex-moss  .lex-name { color: var(--neon-moss); }
.lex-fungi .lex-name { color: var(--neon-fungi); }
.lex-coral .lex-name { color: var(--tropical-coral); }

.lex-desc {
    color: var(--damp-cream);
    opacity: 0.85;
    font-size: 14px;
}

/* ---------- Method list ---------- */
.method-list {
    list-style: none;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.method-list li {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    align-items: start;
    padding: 12px 14px;
    border-left: 1px solid rgba(57, 255, 20, 0.18);
    background: rgba(26, 26, 16, 0.4);
    border-radius: 0 4px 4px 0;
    transition: border-color 0.4s ease, background 0.4s ease;
}
.method-list li:hover {
    border-left-color: var(--neon-moss);
    background: rgba(26, 26, 16, 0.65);
}
.method-num {
    font-family: var(--font-mono);
    color: var(--neon-fungi);
    font-size: 18px;
    letter-spacing: 0.04em;
}
.method-list p {
    color: var(--damp-cream);
    opacity: 0.88;
    font-size: 14.5px;
    line-height: 1.65;
}

/* ---------- Foot ---------- */
.block-foot { padding-top: 60px; padding-bottom: 60px; }

.foot-note {
    font-family: var(--font-body);
    color: var(--damp-cream);
    opacity: 0.85;
    line-height: 1.75;
    max-width: 60ch;
    margin: 0 auto 22px;
}

.foot-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(216, 208, 192, 0.55);
    letter-spacing: 0.05em;
}
.foot-divider { color: rgba(200, 64, 255, 0.45); }
#footClock    { color: var(--neon-moss); }

/* ---------- Misc reveal ---------- */
.block {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.block.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.block-hero { transition-delay: 0s; }

/* hide cursor once typing complete */
.logotype.is-typed .logotype-cursor {
    animation: cursor-blink 1.05s steps(2) infinite;
    opacity: 0.6;
}