/* Every pinned item on the wall: newsprint scraps with pushpins and
   hand-drawn acid pattern frames (zigzag by default, diamonds on .frame-alt). */

.pin-item {
  position: relative;
  width: min(320px, 92vw);
  max-width: 92vw;
  padding: 46px 20px 20px;
  background-color: var(--paper);
  background-image: var(--noise);
  color: var(--ink);
  border: 2px solid #000;
  box-shadow: 8px 9px 0 rgba(207, 194, 58, 0.16);
  transform: rotate(var(--tilt, 0deg));
}
@media (min-width: 760px) {
  .pin-item {
    position: absolute;
    touch-action: none;
    cursor: grab;
  }
  .pin-item:hover { animation: wobble 0.45s ease; }
}
.pin-item.dragging {
  animation: none !important;
  cursor: grabbing;
  transform: rotate(0deg) scale(1.03);
  box-shadow: 14px 16px 0 rgba(207, 194, 58, 0.28);
}
@keyframes wobble {
  0% { transform: rotate(var(--tilt, 0deg)); }
  40% { transform: rotate(calc(var(--tilt, 0deg) + 2.5deg)); }
  100% { transform: rotate(var(--tilt, 0deg)); }
}

/* pushpin */
.pin-item::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), transparent 45%),
    var(--pin, var(--red));
  border: 2px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.5);
  z-index: 3;
}

/* hand-drawn pattern frame */
.pin-item::after {
  content: '';
  position: absolute;
  inset: -13px;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Cpath d='M0 8 L4.5 2 L9 8 L13.5 2 L18 8' fill='none' stroke='%23cfc23a' stroke-width='2.2'/%3E%3C/svg%3E") left top repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Cpath d='M0 8 L4.5 2 L9 8 L13.5 2 L18 8' fill='none' stroke='%23cfc23a' stroke-width='2.2'/%3E%3C/svg%3E") left bottom repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='18'%3E%3Cpath d='M8 0 L2 4.5 L8 9 L2 13.5 L8 18' fill='none' stroke='%23cfc23a' stroke-width='2.2'/%3E%3C/svg%3E") left top repeat-y,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='18'%3E%3Cpath d='M8 0 L2 4.5 L8 9 L2 13.5 L8 18' fill='none' stroke='%23cfc23a' stroke-width='2.2'/%3E%3C/svg%3E") right top repeat-y;
}
.frame-alt::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12'%3E%3Cpath d='M9 2 L15 6 L9 10 L3 6 Z' fill='none' stroke='%23cfc23a' stroke-width='2'/%3E%3C/svg%3E") left top repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12'%3E%3Cpath d='M9 2 L15 6 L9 10 L3 6 Z' fill='none' stroke='%23cfc23a' stroke-width='2'/%3E%3C/svg%3E") left bottom repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18'%3E%3Cpath d='M6 3 L10 9 L6 15 L2 9 Z' fill='none' stroke='%23cfc23a' stroke-width='2'/%3E%3C/svg%3E") left top repeat-y,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18'%3E%3Cpath d='M6 3 L10 9 L6 15 L2 9 Z' fill='none' stroke='%23cfc23a' stroke-width='2'/%3E%3C/svg%3E") right top repeat-y;
}

/* red label blocks for headings */
.pin-item h2 {
  display: table;
  margin: 0 0 12px;
  padding: 3px 9px;
  background: var(--red);
  color: #f8f4e6;
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 2px;
  transform: rotate(-1.5deg);
}
.tiny { font-size: 0.68rem; color: #6f6753; margin: 10px 0 0; }

/* dark scraps */
.radio, .stickypad, .note-label {
  background-color: #14110c;
  color: var(--paper);
  box-shadow: 8px 9px 0 rgba(224, 31, 31, 0.18);
}
.radio .tiny, .stickypad .tiny, .note-label .tiny { color: #a89f82; }

/* chunky buttons */
.push-btn {
  background: var(--red);
  color: #fdf6e4;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 var(--acid);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 2px;
  padding: 7px 12px;
  cursor: pointer;
}
.push-btn.alt { background: var(--acid); color: #0d0c0a; box-shadow: 3px 3px 0 var(--red); }
.push-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--acid); }
.push-btn.alt:hover { box-shadow: 4px 4px 0 var(--red); }
.push-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--acid); }

/* ---------- HELLO card ---------- */
.hello { width: min(340px, 92vw); }
.hello-sticker {
  margin: -46px -20px 16px;
  padding: 12px 10px 10px;
  background: var(--red);
  color: #fdf8ec;
  text-align: center;
  border-bottom: 2px solid #000;
}
.hello-sticker .hi { display: block; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 6px; }
.hello-sticker small { display: block; font-size: 0.58rem; letter-spacing: 3px; text-transform: uppercase; margin: 4px 0 8px; }
.hello-sticker strong {
  display: block;
  margin: 0 18px;
  padding: 2px 0 4px;
  background: var(--paper);
  color: var(--red);
  font-family: var(--font-scrawl);
  font-size: 1.8rem;
  transform: rotate(-2deg);
}
#aboutText p { font-size: 0.8rem; line-height: 1.6; margin: 0 0 10px; }

/* ---------- projects label ---------- */
.note-label { width: 230px; }
.note-label .tiny a { color: var(--acid); }

/* ---------- repo cards: 2003 eBay listings pasted on the wall ---------- */
.repo-card { width: 300px; background-color: #fff; font-family: Arial, Helvetica, sans-serif; }
.ebay-cat { font-size: 0.6rem; color: #666; margin: 0 0 6px; }
.repo-card h3 {
  margin: 0 0 6px;
  color: #0000cc;
  text-decoration: underline;
  font-size: 0.95rem;
  word-break: break-word;
}
.ebay-deal { font-size: 0.72rem; margin: 0 0 8px; }
.ebay-deal .lk { color: var(--red); font-weight: bold; }
.ebay-deal .price { color: #0a7d00; font-size: 0.9rem; }
.ebay-deal s { color: #999; }
.repo-desc { font-size: 0.76rem; line-height: 1.5; margin: 0 0 8px; }
.repo-meta { font-size: 0.7rem; color: #333; margin: 0 0 4px; }
.seller-line { font-size: 0.62rem; color: #666; margin: 0 0 10px; }
.lang-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #000;
  margin-right: 6px;
  vertical-align: -2px;
}
.buy-btn {
  display: inline-block;
  background: #ffcc00;
  color: #000;
  border: 2px solid #0000cc;
  box-shadow: 2px 2px 0 #0000cc;
  font-weight: bold;
  font-size: 0.76rem;
  text-decoration: none;
  padding: 5px 10px;
}
.buy-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #0000cc; }

.starburst {
  position: absolute;
  top: -18px;
  right: -16px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--acid);
  clip-path: polygon(50% 0%, 61% 20%, 82% 7%, 80% 31%, 100% 35%, 85% 52%, 100% 70%, 78% 70%, 76% 94%, 58% 80%, 50% 100%, 41% 80%, 24% 94%, 22% 70%, 0% 70%, 15% 52%, 0% 35%, 20% 31%, 18% 7%, 39% 20%);
  font-family: var(--font-display);
  font-size: 0.7rem;
  transform: rotate(12deg);
  animation: starburst-pulse 0.9s infinite alternate;
  z-index: 4;
}
@keyframes starburst-pulse { to { transform: rotate(12deg) scale(1.15); } }

/* ---------- badge wall ---------- */
.badge-wall { width: 300px; }
#badgeGrid { display: flex; flex-wrap: wrap; gap: 8px; }
.badge88 {
  width: 108px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bbg, #0d0c0a);
  color: #f2ecdc;
  border: 2px solid var(--acid);
  box-shadow: 3px 3px 0 rgba(224, 31, 31, 0.55);
  font-family: var(--font-mono);
  font-weight: bold;
  font-size: 0.58rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}
a.badge88:hover { background: var(--red); border-color: #f2ecdc; }
.badge88.soon { opacity: 0.4; border-style: dashed; box-shadow: none; cursor: not-allowed; }

/* ---------- guestbook: the /jxk/ imageboard ---------- */
.guestbook { width: min(340px, 92vw); background-color: #ffffee; font-family: Arial, Helvetica, sans-serif; }
.chan-top {
  color: #800000;
  font-weight: bold;
  font-size: 1.05rem;
  text-align: center;
  font-family: Tahoma, Arial, sans-serif;
  margin: 0 0 10px;
}
.guestbook input {
  width: 100%;
  margin-bottom: 4px;
  padding: 4px 6px;
  background: #fff;
  border: 1px solid #aaa;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.76rem;
}
#gbList {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-height: 250px;
  overflow: auto;
}
.chan-post {
  background: #f0e0d6;
  border: 1px solid #d9bfb7;
  padding: 5px 7px;
  margin: 0 0 5px;
  font-size: 0.68rem;
}
.chan-name { color: #117743; font-weight: bold; }
.chan-date { color: #555; }
.chan-no { color: #800000; }
.chan-post blockquote { margin: 4px 0 0; font-size: 0.76rem; color: #111; }
.chan-post .greentext { color: #789922; }

/* ---------- KIRBY FM ---------- */
.radio { width: 240px; }
#radioBtn { width: 100%; }
.eq { display: none; gap: 4px; height: 26px; align-items: flex-end; margin-top: 12px; }
.radio.playing .eq { display: flex; }
.eq span { width: 9px; background: var(--acid); animation: eq-bounce 0.5s infinite alternate; }
.eq span:nth-child(odd) { background: var(--red); }
.eq span:nth-child(2) { animation-delay: 0.1s; }
.eq span:nth-child(3) { animation-delay: 0.22s; }
.eq span:nth-child(4) { animation-delay: 0.34s; }
.eq span:nth-child(5) { animation-delay: 0.15s; }
@keyframes eq-bounce { from { height: 4px; } to { height: 26px; } }

/* ---------- visitor counter ---------- */
.counter-card { width: 210px; text-align: center; }
.counter-card h2 { margin-left: auto; margin-right: auto; }
.lcd {
  background: #1a0505;
  color: #ff4136;
  font-family: var(--font-mono);
  font-weight: bold;
  font-size: 1.6rem;
  letter-spacing: 4px;
  padding: 8px 10px;
  border: 3px inset #4a3a3a;
  text-shadow: 0 0 7px #ff4136;
}

/* ---------- KIRBY CHRONO wristwatch ---------- */
.watch-card { width: 250px; }
.watch {
  background: linear-gradient(145deg, #eceff3, #9b9ea8 55%, #d7dae0);
  border: 2px solid #4c4f58;
  border-radius: 16px;
  padding: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.watch-bezel {
  background: #0e0d12;
  border-radius: 12px;
  padding: 8px 10px 9px;
  box-shadow: inset 0 0 0 2px #2c67a8;
}
.watch-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.watch-head b { color: #f5f2ea; font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 1px; }
.watch-head span { color: #d3a93c; font-size: 0.55rem; font-weight: bold; letter-spacing: 1px; }
.lcd-face {
  background: #c9d0bd;
  border: 2px solid #000;
  border-radius: 3px;
  padding: 3px 8px 5px;
  color: #20241c;
}
.lcd-row-top { display: flex; justify-content: space-between; font-size: 0.62rem; font-weight: bold; letter-spacing: 3px; }
.lcd-row-main { display: flex; justify-content: space-between; align-items: baseline; }
#watchTime { font-size: 1.7rem; font-weight: bold; letter-spacing: 2px; }
#watchTime small { font-size: 0.8rem; }
#watchTime .colon { animation: colon-blink 1s steps(1) infinite; }
@keyframes colon-blink { 50% { opacity: 0; } }
#watchSecs { font-size: 0.95rem; font-weight: bold; }
.watch-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 7px; }
.wrs {
  flex: 1;
  background: #2c67a8;
  color: #eef3f8;
  font-size: 0.55rem;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 1px;
  text-align: center;
  padding: 2px 8px;
  border-radius: 2px;
}
.wr { background: #b1201c; color: #f5f2ea; font-family: var(--font-display); font-size: 0.6rem; padding: 2px 6px; border-radius: 3px; }
.watch-btn {
  display: block;
  margin: 8px auto 0;
  background: #0d0c0a;
  color: var(--acid);
  border: 2px solid var(--acid);
  font-family: var(--font-mono);
  font-weight: bold;
  font-size: 0.6rem;
  letter-spacing: 1px;
  padding: 3px 8px;
  cursor: pointer;
}
.watch-btn:hover { background: var(--red); color: var(--paper); }

/* ---------- the life of joseph (orange TLOP panel) ---------- */
.tlop { width: 290px; background-color: #f76b15; color: #120c07; }
.tlop-inner p {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.05rem;
  letter-spacing: 1px;
  line-height: 1.45;
}
.tlop-inner p.wh { color: #fff; }
.tlop-photo {
  float: right;
  width: 86px;
  padding: 5px 5px 14px;
  background: #fff;
  border: 1px solid #999;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.4);
  transform: rotate(6deg);
  margin: 0 0 6px 8px;
}
.tlop-photo img { width: 100%; display: block; }
.barcode {
  clear: both;
  height: 26px;
  margin-top: 12px;
  background: repeating-linear-gradient(90deg, #120c07 0 2px, transparent 2px 5px, #120c07 5px 6px, transparent 6px 10px);
}
.tlop .tiny { color: #5c2c07; }

/* ---------- scattered draggable stickers (desktop only) ---------- */
.scrap { display: none; }
@media (min-width: 760px) {
  .scrap {
    display: block;
    position: absolute;
    transform: rotate(var(--tilt, 0deg));
    cursor: grab;
    user-select: none;
    touch-action: none;
    z-index: 5;
  }
  .scrap.dragging { cursor: grabbing; }
}
.scrap.scrawl {
  font-family: var(--font-scrawl);
  color: var(--red);
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}
.scrap.burst {
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--acid);
  color: #0d0c0a;
  clip-path: polygon(50% 0%, 61% 20%, 82% 7%, 80% 31%, 100% 35%, 85% 52%, 100% 70%, 78% 70%, 76% 94%, 58% 80%, 50% 100%, 41% 80%, 24% 94%, 22% 70%, 0% 70%, 15% 52%, 0% 35%, 20% 31%, 18% 7%, 39% 20%);
  font-family: var(--font-display);
  font-size: 0.68rem;
}
.scrap.price {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--acid);
  color: #0d0c0a;
  border: 2px dashed #0d0c0a;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.6rem;
  text-align: center;
  padding: 4px;
}
.scrap.tape {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid #000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-weight: bold;
  font-size: 0.66rem;
  letter-spacing: 1px;
}

/* ---------- scrap paper notes ---------- */
.stickypad { width: 230px; }
.sticky-note {
  width: 205px;
  min-height: 175px;
  padding: 36px 14px 14px;
  background-color: var(--note, #f2ecdc);
  box-shadow: 6px 7px 0 rgba(207, 194, 58, 0.2);
}
.sticky-note::after { content: none; }
.sticky-note::before {
  /* torn tape instead of a pin */
  width: 84px;
  height: 24px;
  margin-left: -42px;
  top: -10px;
  border: none;
  border-radius: 0;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0 6px, rgba(255, 255, 255, 0.16) 6px 12px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
  transform: rotate(-2.5deg);
}
.sticky-note textarea {
  width: 100%;
  height: 120px;
  background: transparent;
  border: none;
  resize: none;
  outline: none;
  font-family: var(--font-scrawl);
  font-size: 0.85rem;
  color: var(--ink);
}
.note-del {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: bold;
  color: var(--red);
  cursor: pointer;
  z-index: 4;
}