/* ============================================================
   Guestbook — "Phosphor Wall". A green CRT terminal where every
   signature is a glowing tag burned onto the screen. Deliberately
   single-world (dark CRT) regardless of the site light/dark toggle.
   Scoped to body[data-page="guestbook"]. Class names match guestbook.js.
   ============================================================ */
body[data-page="guestbook"]{
  --p-bg:#020a02; --p-bg2:#04150a; --p-panel:#06180d;
  --p-line:#123f22; --p-line-soft:#0d2b18;
  --p-green:#3bff7a; --p-amber:#ffb638; --p-cyan:#4ff0ff;
  --p-text:#7ff0a6; --p-dim:#3f9d63; --p-faint:#276b41;
  --mono:ui-monospace,"SF Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;
  background:var(--p-bg); color:var(--p-text); font-family:var(--mono);
}

/* baseline CRT: scanlines + faint phosphor glow, always on */
body[data-page="guestbook"]::after{
  content:""; position:fixed; inset:0; z-index:9995; pointer-events:none;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px);
}
body[data-page="guestbook"]::before{
  content:""; position:fixed; inset:0; z-index:9994; pointer-events:none;
  background:radial-gradient(130% 130% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* backdrop canvases */
#gb-stars{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.55;}
#gb-confetti{position:fixed; inset:0; width:100%; height:100%; z-index:9998; pointer-events:none;}
body[data-page="guestbook"] > *:not(#gb-stars):not(#gb-confetti){position:relative; z-index:1;}

/* heavier CRT toggle: extra vignette + flicker */
.gb-crt{position:fixed; inset:0; z-index:9996; pointer-events:none; display:none;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,20,6,.35) 2px 4px);
  box-shadow:inset 0 0 140px 30px rgba(0,0,0,.7);}
@media not (prefers-reduced-motion: reduce){ .gb-crt{animation:gb-flicker 5s steps(60) infinite;} }
@keyframes gb-flicker{ 0%,100%{opacity:.9;} 3%{opacity:.75;} 6%{opacity:.95;} 50%{opacity:.85;} }

.gb-spark{position:fixed; z-index:9997; pointer-events:none; font-size:15px; transform:translate(-50%,-50%);
  text-shadow:0 0 8px currentColor; animation:gb-spark-fade .75s ease-out forwards;}
@keyframes gb-spark-fade{0%{opacity:1; transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0; transform:translate(-50%,-90%) scale(.3) rotate(40deg);}}

/* hero — boot screen */
.gb-hero{background:linear-gradient(180deg, #041a0c, transparent);}
.gb-hero .eyebrow{color:var(--p-amber); text-shadow:0 0 8px rgba(255,182,56,.5); letter-spacing:.24em; font-size:.7rem;}
.gb-title{font-family:var(--mono); font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  color:var(--p-green); text-shadow:0 0 10px rgba(59,255,122,.65), 0 0 26px rgba(59,255,122,.35);}
.gb-hero p{color:var(--p-text);}
.gb-count{display:inline-block; margin-top:6px; color:var(--p-amber); font-weight:700; text-shadow:0 0 8px rgba(255,182,56,.5);}
.gb-toggles{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:18px;}
.gb-toggle{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; cursor:pointer;
  font-family:var(--mono); font-size:.8rem; font-weight:700; text-decoration:none;
  color:var(--p-text); background:var(--p-panel); border:1px solid var(--p-line); border-radius:6px;}
.gb-toggle:hover{border-color:var(--p-green); color:var(--p-green);}
.gb-toggle.on{background:var(--p-green); color:#021107; border-color:var(--p-green); box-shadow:0 0 12px rgba(59,255,122,.5);}

/* marquee ticker */
.gb-marquee{overflow:hidden; white-space:nowrap; border-top:1px solid var(--p-line); border-bottom:1px solid var(--p-line);
  background:var(--p-bg2); padding:7px 0;}
.gb-marquee-track{display:inline-block; padding-left:100%; animation:gb-marq 30s linear infinite;
  color:var(--p-green); text-shadow:0 0 6px rgba(59,255,122,.5); font-size:.9rem; letter-spacing:.05em;}
.gb-marquee-item{padding-right:8px;}
@keyframes gb-marq{to{transform:translateX(-100%);}}
@media (prefers-reduced-motion: reduce){.gb-marquee-track{animation:none; padding-left:12px;}}

.gb-main{max-width:1080px; margin:0 auto; padding:26px 16px 60px;}

/* ---------- signing console ---------- */
.gb-studio{background:var(--p-panel); border:1px solid var(--p-line); border-radius:12px; padding:20px; margin-bottom:34px;
  box-shadow:inset 0 0 60px rgba(0,60,20,.25);}
.gb-studio-h{font-family:var(--mono); text-transform:uppercase; letter-spacing:.05em; font-size:1.25rem; margin:0 0 16px;
  color:var(--p-green); text-shadow:0 0 8px rgba(59,255,122,.5);}
.gb-studio-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:22px; align-items:start;}
@media (max-width:760px){.gb-studio-grid{grid-template-columns:1fr;}}
.gb-field{margin-bottom:15px;}
.gb-label{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--p-dim); margin-bottom:6px;}
.gb-label::before{content:"> "; color:var(--p-faint);}
.gb-input{width:100%; padding:11px 12px; font-family:var(--mono); font-size:16px; color:var(--p-green);
  background:#020d05; border:1px solid var(--p-line); border-radius:7px; caret-color:var(--p-green);}
.gb-input::placeholder{color:var(--p-faint);}
.gb-input:focus{outline:none; border-color:var(--p-green); box-shadow:0 0 10px rgba(59,255,122,.35);}
.gb-textarea{resize:vertical; min-height:72px; text-shadow:0 0 5px rgba(59,255,122,.3);}
.gb-counter{text-align:right; font-size:.68rem; color:var(--p-faint); margin-top:3px;}
.gb-vid-note{font-size:.72rem; margin-top:6px; min-height:1em;}
.gb-vid-note.ok{color:var(--p-green);} .gb-vid-note.warn{color:var(--p-amber);}

.gb-swatches{display:flex; flex-wrap:wrap; gap:8px;}
.gb-swatch{padding:7px 13px; cursor:pointer; font-family:var(--mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--sw); background:#020d05; border:1px solid var(--sw); border-radius:6px; text-shadow:0 0 7px var(--sw); opacity:.7;}
.gb-swatch.on{opacity:1; background:color-mix(in srgb, var(--sw) 18%, #020d05); box-shadow:0 0 12px -2px var(--sw);}

.gb-moods{display:flex; flex-wrap:wrap; gap:6px;}
.gb-mood{font-size:19px; line-height:1; padding:6px; cursor:pointer; border-radius:8px; background:#020d05; border:1px solid var(--p-line);}
.gb-mood:hover{border-color:var(--p-green);}
.gb-mood.on{border-color:var(--p-green); box-shadow:0 0 10px rgba(59,255,122,.45); transform:scale(1.06);}

.gb-fonts{display:flex; flex-wrap:wrap; gap:6px;}
.gb-fontbtn{padding:7px 12px; cursor:pointer; font-size:.82rem; border-radius:7px; color:var(--p-text);
  background:#020d05; border:1px solid var(--p-line); font-family:var(--mono);}
.gb-fontbtn.on{border-color:var(--p-green); color:var(--p-green); box-shadow:inset 0 0 0 1px var(--p-green);}
.gbf-bold,.gb-card-msg.gbf-bold{font-weight:800;}
.gbf-retro,.gb-card-msg.gbf-retro{letter-spacing:.05em;}

/* doodle pad — a phosphor drawing surface */
.gb-doodle-canvas{width:100%; max-width:340px; aspect-ratio:480 / 200; display:block;
  background:#041004; border:1px solid var(--p-line); border-radius:8px; cursor:crosshair; touch-action:none;
  box-shadow:inset 0 0 30px rgba(0,80,30,.3);}
.gb-doodle-tools{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px;}
.gb-pen{width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid transparent; box-shadow:0 0 0 1px var(--p-line);}
.gb-pen.on{border-color:#fff; transform:scale(1.12);}
.gb-tool{padding:5px 11px; cursor:pointer; font-size:.76rem; border-radius:6px; color:var(--p-text);
  background:#020d05; border:1px solid var(--p-line); font-family:var(--mono);}
.gb-tool.on{border-color:var(--p-green); color:var(--p-green);}

/* sticker uploads */
.gb-sticker-tools{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.gb-sticker-add{border-color:var(--p-green); color:var(--p-green);}
.gb-sticker-hint{display:block; font-size:.68rem; color:var(--p-faint); margin-top:6px;}
.gb-sticker-thumbs{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;}
.gb-sticker-thumb{position:relative; width:58px; height:58px;}
.gb-sticker-thumb img{width:100%; height:100%; object-fit:cover; border-radius:7px; border:1px solid var(--p-line);
  filter:saturate(.85) contrast(1.05);}
.gb-sticker-x{position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%; cursor:pointer;
  font-size:11px; line-height:1; color:#021107; background:var(--p-amber); border:1px solid #000;}

/* anti-bot human-check row */
.gb-hc{display:flex; align-items:center; gap:10px;}
.gb-hc-q{font-family:var(--mono); font-size:1.05rem; font-weight:700; color:var(--p-amber);
  text-shadow:0 0 8px rgba(255,182,56,.45); min-width:76px; letter-spacing:.04em;}
.gb-hc-eq{color:var(--p-dim);}
.gb-hc-in{width:80px; text-align:center;}

.gb-honey{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.gb-sign-btn{display:block; width:100%; margin-top:6px; padding:14px; cursor:pointer; font-family:var(--mono);
  text-transform:uppercase; letter-spacing:.08em; font-size:1.05rem; font-weight:800; color:#021107;
  background:var(--p-green); border:0; border-radius:9px; box-shadow:0 0 18px rgba(59,255,122,.5);}
.gb-sign-btn:hover{background:#5cff92;}
.gb-sign-btn:active{transform:translateY(2px);}
.gb-sign-btn:disabled{opacity:.55; cursor:default;}
.gb-status{margin-top:10px; padding:9px 12px; border-radius:8px; font-size:.85rem; text-align:center;}
.gb-status.ok{background:rgba(59,255,122,.12); color:var(--p-green); border:1px solid #1f7a43;}
.gb-status.err{background:rgba(255,120,120,.1); color:#ff9a9a; border:1px solid #7a2a2a;}

.gb-preview-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--p-dim); margin-bottom:8px;}
.gb-preview-label::before{content:"> ";}
.gb-preview-card{position:sticky; top:16px;}

/* ---------- the wall ---------- */
.gb-wall-h{font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:1.6rem; margin:0 0 16px;
  color:var(--p-green); text-shadow:0 0 10px rgba(59,255,122,.5);}
/* the terminal window that frames the wall */
.gb-term{border:1px solid var(--p-line); border-radius:10px; overflow:hidden; margin-bottom:30px; background:#020d05;
  box-shadow:0 0 34px -12px rgba(59,255,122,.4), inset 0 0 70px rgba(0,50,20,.22);}
.gb-term-bar{display:flex; align-items:center; gap:7px; padding:8px 13px; background:#04160a; border-bottom:1px solid var(--p-line);}
.gb-term-dot{width:11px; height:11px; border-radius:50%; opacity:.85;}
.gb-term-dot.r{background:#ff5f56;} .gb-term-dot.y{background:#ffbd2e;} .gb-term-dot.g{background:#27c93f;}
.gb-term-title{margin-left:6px; color:var(--p-dim); font-size:.76rem;}
.gb-term-bar .gb-count{margin-left:auto; color:var(--p-amber); font-size:.72rem; text-shadow:0 0 6px rgba(255,182,56,.4);}
.gb-screen{max-height:min(66vh,600px); overflow-y:auto; padding:2px 16px 10px; position:relative;
  scrollbar-width:thin; scrollbar-color:var(--p-line) transparent;}
.gb-screen::-webkit-scrollbar{width:9px;}
.gb-screen::-webkit-scrollbar-track{background:transparent;}
.gb-screen::-webkit-scrollbar-thumb{background:var(--p-line); border-radius:6px;}

/* wall = single-column terminal log */
.gb-wall{display:block;}
.gb-empty{color:var(--p-dim); padding:26px 4px;}

/* a signature = a terminal log entry, not a blocky card */
.gb-card{margin:0; padding:14px 6px 15px 14px; background:transparent; border:0;
  border-left:2px solid var(--gc,var(--p-green)); border-bottom:1px dashed var(--p-line-soft); border-radius:0;
  color:var(--p-text); box-shadow:none; transform:none !important;}
.gb-card:last-child{border-bottom:0;}
.gb-card.pinned{border-left-width:4px; background:linear-gradient(90deg, rgba(59,255,122,.07), transparent 60%);}
.gb-card:hover{background:rgba(59,255,122,.045);}
.gb-card-doodle, .gb-card-stickers, .gb-card-video{margin-left:14px;}   /* align under the > gutter */
.gb-card-doodle{margin-top:9px;}
.gb-card-doodle img{max-width:320px;}
.gb-card-video{max-width:520px;}
.gb-card-head{display:flex; align-items:baseline; gap:8px; margin-bottom:5px; font-size:.9rem;}
.gb-card-id{color:var(--p-faint); font-size:.74rem; flex:none;}
.gb-card-name{font-weight:800; color:var(--gc,var(--p-green)); text-shadow:0 0 8px var(--gc,var(--p-green)); word-break:break-word;}
.gb-card-mood{font-size:17px;}
.gb-card-pin{font-size:.72rem;}
.gb-card-time{margin-left:auto; flex:none; color:var(--p-faint); font-size:.7rem; padding-left:8px;}
.gb-card-msg{margin:0; word-break:break-word; white-space:pre-wrap; line-height:1.55; color:#a8ffc6; padding-left:14px;
  text-shadow:0 0 5px rgba(59,255,122,.22); position:relative;}
.gb-card-msg::before{content:"> "; position:absolute; left:0; color:var(--p-faint); text-shadow:none;}
.gb-card-doodle{margin-top:10px;}
.gb-card-doodle img{display:block; width:100%; max-width:280px; background:#041004;
  border:1px solid var(--gc,var(--p-line)); border-radius:8px; box-shadow:0 0 12px -4px var(--gc,var(--p-green));}
.gb-card-stickers{display:flex; flex-wrap:wrap; gap:8px; margin-top:11px;}
.gb-sticker-img{width:66px; height:66px; object-fit:cover; border:2px solid var(--gc,var(--p-green)); border-radius:8px;
  box-shadow:0 0 10px -3px var(--gc,var(--p-green)); filter:saturate(.9);}
.gb-card-stickers .gb-sticker-img:nth-child(odd){transform:rotate(-4deg);}
.gb-card-stickers .gb-sticker-img:nth-child(even){transform:rotate(3deg);}
.gb-card-stickers .gb-sticker-img:hover{transform:none; filter:none;}

/* embedded video */
.gb-card-video{margin-top:11px; position:relative; width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  border:1px solid var(--gc,var(--p-line)); box-shadow:0 0 12px -4px var(--gc,var(--p-green)); background:#000;}
.gb-card-video iframe,.gb-card-video video{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}

/* compact reaction strip — dim until used */
.gb-react{display:flex; gap:5px; margin-top:10px; padding-left:14px; flex-wrap:wrap;}
.gb-react-btn{display:inline-flex; align-items:center; gap:3px; cursor:pointer; padding:2px 7px;
  background:transparent; border:1px solid var(--p-line-soft); border-radius:5px; font-size:.78rem; opacity:.5;
  transition:opacity .12s, border-color .12s;}
.gb-react-btn:hover{opacity:1; border-color:var(--gc,var(--p-green));}
.gb-react-btn.has{opacity:1; border-color:var(--p-line);}
.gb-react-btn.popped{animation:gb-pop .3s ease;}
@keyframes gb-pop{50%{transform:scale(1.3);}}
.gb-react-n{font-size:.72rem; color:var(--gc,var(--p-green)); font-weight:700;}

.gb-justsigned{animation:gb-drop .5s cubic-bezier(.2,1.3,.5,1);}
@keyframes gb-drop{0%{opacity:0; transform:translateY(-16px) scale(.96);} 100%{opacity:1;}}

.gb-more-wrap{text-align:center; margin-top:8px;}
.gb-sentinel{min-height:32px; padding:14px 0; text-align:center; color:var(--p-dim); font-size:.8rem; letter-spacing:.05em;}
.gb-disclaimer{text-align:center; color:var(--p-faint); font-size:.72rem; margin-top:26px;}

@media (prefers-reduced-motion: reduce){ *{animation:none !important;} }