@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');

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

/* ── layout ─────────────────────────────────────────────────────────────── */
body{
    background:#000;
    color:#0f0;
    font-family:'Fira Code',monospace;
    height:100vh;

    display:flex;
    flex-direction:column;
    align-items:center;

    justify-content:flex-start;  /* keep terminal a bit higher */
    padding-top:6vh;
    padding-bottom:4vh;
}

/* ── terminal window ────────────────────────────────────────────────────── */
#terminal{
    width:90%;
    max-width:720px;
    background:#000;
    border:2px solid #0f0;
    padding:1.5rem;
    overflow:hidden;

    animation:glow 2.5s ease-in-out infinite;
}
@keyframes glow{
    0%,100%{box-shadow:0 0 4px #0f0, inset 0 0 4px #0f0;}
    50%      {box-shadow:0 0 14px #0f0, inset 0 0 14px #0f0;}
}

/* ── banner + mascot ────────────────────────────────────────────────────── */
#banner{text-align:center;margin-bottom:1rem}

#doggo{
    width:140px;
    filter:drop-shadow(0 0 5px #0f0);
    margin-bottom:.5rem;

    cursor:pointer;
    transition:transform .25s ease, filter .25s ease;
}
#doggo:hover{
    transform:scale(1.12) rotate(-2deg);
    filter:drop-shadow(0 0 10px #0f0);
}

h1{font-size:1.5rem;margin-bottom:.25rem}

/* ── output log ─────────────────────────────────────────────────────────── */
#output{
    min-height:300px;
    margin-bottom:.75rem;
    white-space:pre-wrap;
}

/* ── input line ─────────────────────────────────────────────────────────── */
#input-line{display:flex;align-items:center}
.prompt{margin-right:.5rem}

/* mirror span that shows what the user typed */
#typed{white-space:pre}

/* hidden real input */
#command{
    position:absolute;
    opacity:0;
    left:-9999px;
    top:-9999px;
    font-family:inherit;
}

/* thick blinking block cursor (shared) */
.block-cursor{
    display:inline-block;
    width:0.66em;
    height:1.05em;
    background:#0f0;
    margin-left:.15em;

    animation:blockblink .8s steps(1) infinite;
}
@keyframes blockblink{
    0%,50%   {opacity:1}
    50.01%,100%{opacity:0}
}

/* ── contract address ───────────────────────────────────────────────────── */
#contract{
    margin-top:auto;
    color:#0f0;
    font-family:'Fira Code',monospace;
    text-align:center;
    font-size:2.6rem;     /* huge */
    line-height:1.15;

    animation:flicker 3.5s linear infinite;
}
.label{opacity:.75;margin-right:.4rem}
.addr{font-weight:700;letter-spacing:.4px}

@keyframes flicker{
    0%,97%,100%{opacity:1}
    98%{opacity:.4}
    99%{opacity:.15}
}