/* pasted.pics — StOOpid.org dark-terminal register
   bg #0a0a0a · Signature Green #20D4A7 body · Share Tech Mono / VT323 / Space Mono */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Space+Mono:wght@400;700&family=VT323&display=swap');

:root {
  --bg:        #0a0a0a;
  --green:     #20D4A7;   /* Signature Green — default body */
  --orange:    #FF5E00;
  --pink:      #FF3C78;
  --yellow:    #FFE66D;
  --red:       #D41210;
  --blue-d:    #404378;
  --blue-l:    #1793FE;
  --white:     #F1DDEE;   /* Whitest of White */
  --mono:      'Share Tech Mono', monospace;
  --pixel:     'VT323', monospace;
  --body:      'Space Mono', monospace;
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--green);
  font-family: var(--body);
}

/* faint scanline / grain atmosphere */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(
    0deg, transparent 0 2px, rgba(0,0,0,0.18) 2px 4px);
  mix-blend-mode: multiply; opacity: .35;
}

a { color: var(--blue-l); text-decoration: none; }
a:hover { color: var(--green); }

/* ---------------------------------------------------------------- home */
.home {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.bar {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1rem 1.4rem; border-bottom: 1px solid rgba(32,212,167,.18);
  font-family: var(--mono); font-size: .82rem; letter-spacing: .04em;
}
.wordmark { font-family: var(--mono); color: var(--green); font-size: 1rem; }
.wordmark .dot { color: var(--orange); }
.meta { color: rgba(241,221,238,.45); }

.target {
  display: grid; place-content: center; place-items: center;
  text-align: center; padding: 2rem; position: relative;
  cursor: text;
}

.paste-word {
  font-family: var(--mono);
  font-size: clamp(4rem, 22vw, 16rem);
  line-height: .9; color: var(--green);
  text-shadow: 0 0 22px rgba(32,212,167,.35), 0 0 2px rgba(32,212,167,.9);
  letter-spacing: -.02em; user-select: none;
}
.paste-word .caret {
  display: inline-block; width: .08em; margin-left: .04em;
  background: var(--orange); animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hint {
  margin-top: 1.6rem; font-family: var(--pixel);
  font-size: clamp(1rem, 2.4vw, 1.5rem); color: rgba(241,221,238,.55);
}
.hint kbd {
  font-family: var(--mono); color: var(--yellow);
  border: 1px solid rgba(255,230,109,.35); border-radius: 3px;
  padding: 0 .35em; font-size: .85em;
}

.foot {
  padding: 1rem 1.4rem; border-top: 1px solid rgba(32,212,167,.18);
  font-family: var(--mono); font-size: .78rem; color: rgba(241,221,238,.4);
  text-align: center;
}

/* ---------------------------------------------------------------- confirm card */
.card {
  position: fixed; inset: 0; z-index: 50;
  display: none; place-content: center; place-items: center;
  background: rgba(10,10,10,.94); padding: 1.5rem;
  animation: fade .18s ease;
}
.card.show { display: grid; }
@keyframes fade { from { opacity: 0; } }

.card-inner {
  width: min(560px, 100%);
  border: 1px solid rgba(32,212,167,.3);
  background: #0d0d0d;
  box-shadow: 0 0 60px rgba(32,212,167,.12);
}
.card-img {
  background: #000 repeating-conic-gradient(#111 0 25%, #0a0a0a 0 50%) 0 0 / 22px 22px;
  display: grid; place-items: center; max-height: 46vh; overflow: hidden;
  border-bottom: 1px solid rgba(32,212,167,.2);
}
.card-img img { max-width: 100%; max-height: 46vh; display: block; }

.card-body { padding: 1.2rem 1.3rem 1.4rem; }
.card-label {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(241,221,238,.4); margin-bottom: .4rem;
}
.slug-show {
  font-family: var(--mono); font-size: 2.6rem; color: var(--yellow);
  word-break: break-all; line-height: 1.1; min-height: 1.1em;
  text-shadow: 0 0 16px rgba(255,230,109,.25);
}
.slug-url {
  font-family: var(--body); font-size: .82rem; color: rgba(241,221,238,.45);
  margin-top: .4rem; word-break: break-all;
}

.row { display: flex; gap: .6rem; margin-top: 1.2rem; flex-wrap: wrap; }
button, .btn {
  font-family: var(--mono); font-size: .9rem; cursor: pointer;
  padding: .6rem 1rem; border: 1px solid; background: transparent;
  letter-spacing: .03em; transition: all .12s ease;
}
.btn-reroll { color: var(--pink); border-color: rgba(255,60,120,.5); }
.btn-reroll:hover { background: rgba(255,60,120,.12); }
.btn-custom { color: var(--blue-l); border-color: rgba(23,147,254,.5); }
.btn-custom:hover { background: rgba(23,147,254,.12); }
.btn-confirm { color: var(--bg); background: var(--green); border-color: var(--green); margin-left: auto; }
.btn-confirm:hover { background: var(--yellow); border-color: var(--yellow); }
.btn-ghost { color: rgba(241,221,238,.5); border-color: rgba(241,221,238,.2); }

.custom-wrap { margin-top: .9rem; display: none; }
.custom-wrap.show { display: block; }
.custom-wrap input {
  width: 100%; font-family: var(--mono); font-size: 1.4rem;
  background: #000; color: var(--green); border: 1px solid rgba(32,212,167,.4);
  padding: .5rem .7rem; outline: none;
}
.custom-wrap input:focus { border-color: var(--yellow); }
.custom-note { font-family: var(--body); font-size: .72rem; color: rgba(241,221,238,.4); margin-top: .35rem; }

.err { color: var(--red); font-family: var(--mono); font-size: .82rem; margin-top: .6rem; min-height: 1em; }

.done .slug-url a { color: var(--green); font-size: 1.1rem; }

/* ---------------------------------------------------------------- view page */
.view { display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; }
.view .stage-img { display: grid; place-items: center; padding: 2rem; }
.view .stage-img img { max-width: 100%; max-height: 80vh; box-shadow: 0 0 50px rgba(0,0,0,.6); }