/* Profile customization: layouts, widget styles, banners, the scrapbook,
   cursor trails and the extra widgets. */

.profile { position: relative; }

/* Layouts ------------------------------------------------------------------ */
.layout-sidebar .profile-sidebar { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.layout-sidebar .profile-side { display: flex; flex-direction: column; gap: var(--gap); }
.layout-sidebar .profile-side > .widget { display: flex; flex-direction: column; gap: 10px; }
.layout-sidebar .profile-grid { columns: 2 300px; }
.layout-centered .profile-grid { columns: 1; max-width: 640px; margin: 0 auto; width: 100%; }
.layout-centered .profile-hero { flex-direction: column; text-align: center; max-width: 760px; margin: 0 auto; width: 100%; }
.layout-centered .hero-main { align-items: center; }
.layout-centered .hero-actions { justify-content: center; }
.layout-mosaic .profile-grid { columns: 4 230px; column-gap: 12px; }
.layout-mosaic .profile-grid > .widget { margin-bottom: 12px; }
.layout-mosaic .profile-grid > .widget:nth-child(3n + 1) { transform: rotate(-0.6deg); }
.layout-mosaic .profile-grid > .widget:nth-child(3n + 2) { transform: rotate(0.5deg); }
@media (max-width: 900px) {
  .layout-sidebar .profile-sidebar { grid-template-columns: minmax(0, 1fr); }
}

/* Banner ------------------------------------------------------------------- */
.profile-hero.has-banner { padding-top: 96px; }
.profile-banner {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  height: 110px;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-mask: linear-gradient(#000 60%, transparent);
  mask: linear-gradient(#000 60%, transparent);
  pointer-events: none;
}
.profile-hero > :is(.hero-avatar, .hero-main, .hero-actions) { position: relative; z-index: 1; }
.has-banner .hero-avatar { margin-top: -40px; }

/* Status --------------------------------------------------------------------- */
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; background: #9aa7b6; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }
.status-dot.st-online { background: #3fd13a; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 0 6px #3fd13a; }
.status-dot.st-away { background: #ffb000; }
.status-dot.st-busy { background: #e2405a; }
.status-dot.st-invisible { background: transparent; box-shadow: inset 0 0 0 2px #9aa7b6; }
.away-bubble { align-self: flex-start; padding: 5px 12px; border-radius: 14px 14px 14px 4px; font-size: 0.9rem; font-weight: 700; background: rgba(255, 200, 80, 0.3); box-shadow: inset 0 0 0 1px rgba(255, 180, 0, 0.5); }

/* Extra widgets ------------------------------------------------------------ */
.hit-counter { display: flex; justify-content: center; gap: 3px; padding: 6px; background: #111; border-radius: 6px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.4); }
.hit-digit { display: grid; place-items: center; width: 24px; height: 34px; border-radius: 3px; font: 700 22px/1 'Silkscreen', 'Courier New', monospace; color: #7dff6b; text-shadow: 0 0 6px #3dff2f; background: linear-gradient(180deg, #1e1e1e 50%, #0a0a0a 50%); }
.visitor-row { display: flex; flex-wrap: wrap; gap: 6px; }
.visitor { transition: transform 0.3s var(--spring); }
.visitor:hover { transform: translateY(-3px) scale(1.06); }
.link-list { display: flex; flex-direction: column; gap: 6px; }
.link-btn { justify-content: flex-start; }
.countdown { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; }
.cd-num { font-size: 2.6rem; line-height: 1; font-weight: 900; color: var(--accent); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5); }
.cd-label { font-weight: 800; text-align: center; }
.pquote { margin: 0; padding: 4px 4px 4px 16px; font-size: 1.1rem; font-style: italic; border-left: 4px solid var(--accent); }

/* Widget styles -------------------------------------------------------------- */
.profile.wstyle-paper .widget.glass,
.profile.wstyle-pixel .widget.glass,
.profile.wstyle-neon .widget.glass,
.profile.wstyle-window .widget.glass,
.profile.wstyle-sticker .widget.glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: none;
}
.profile:is(.wstyle-paper, .wstyle-pixel, .wstyle-neon, .wstyle-window, .wstyle-sticker) .widget.glass::before,
.profile:is(.wstyle-paper, .wstyle-pixel, .wstyle-neon, .wstyle-window, .wstyle-sticker) .widget.glass::after { display: none; }

.profile.wstyle-paper .widget.glass {
  --ink: #3b3326;
  --ink-rgb: 59, 51, 38;
  --ink-2: rgba(59, 51, 38, 0.78);
  --ink-3: rgba(59, 51, 38, 0.55);
  color: var(--ink);
  border-radius: 4px;
  background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(80, 130, 200, 0.22) 27px 28px), linear-gradient(90deg, transparent 38px, rgba(230, 80, 80, 0.35) 38px 40px, transparent 40px), #fffdf2;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 10px 20px -8px rgba(0, 0, 0, 0.35);
  padding-left: 52px;
  font-family: 'Patrick Hand', var(--font);
}
.profile.wstyle-pixel .widget.glass {
  --ink: #111;
  --ink-rgb: 17, 17, 17;
  --ink-2: #333;
  --ink-3: #666;
  color: var(--ink);
  border-radius: 0;
  background: #fff;
  box-shadow: inset 0 0 0 3px #111, 6px 6px 0 #111;
  image-rendering: pixelated;
}
.profile.wstyle-pixel .widget .card-head h3 { font-family: 'Silkscreen', monospace; font-size: 0.95rem; letter-spacing: 0.04em; }
.profile.wstyle-neon .widget.glass {
  --ink: #f2f0ff;
  --ink-rgb: 242, 240, 255;
  --ink-2: rgba(242, 240, 255, 0.8);
  --ink-3: rgba(242, 240, 255, 0.55);
  color: var(--ink);
  border-radius: 14px;
  background: rgba(12, 6, 32, 0.86);
  box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(var(--accent-rgb), 0.8), inset 0 0 18px rgba(var(--accent-rgb), 0.35);
}
.profile.wstyle-neon .widget .card-head h3 { color: #fff; text-shadow: 0 0 6px var(--accent), 0 0 14px var(--accent); }
.profile.wstyle-window .widget.glass {
  --ink: #000;
  --ink-rgb: 0, 0, 0;
  --ink-2: #222;
  --ink-3: #555;
  color: var(--ink);
  border-radius: 0;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf, 3px 3px 0 rgba(0, 0, 0, 0.3);
}
.profile.wstyle-window .widget > .card-head:first-child { margin: -15px -17px 10px; padding: 3px 6px; background: linear-gradient(90deg, #000080, #1084d0); }
.profile.wstyle-window .widget > .card-head h3 { color: #fff; font-size: 0.9rem; }
.profile.wstyle-sticker .widget.glass {
  --ink: #2a2440;
  --ink-rgb: 42, 36, 64;
  --ink-2: rgba(42, 36, 64, 0.78);
  --ink-3: rgba(42, 36, 64, 0.55);
  color: var(--ink);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(0, 0, 0, 0.08), 0 12px 24px -8px rgba(0, 0, 0, 0.4);
}
.profile.wstyle-sticker .profile-grid > .widget:nth-child(odd) { transform: rotate(-1.2deg); }
.profile.wstyle-sticker .profile-grid > .widget:nth-child(even) { transform: rotate(1deg); }

/* Scrapbook ------------------------------------------------------------------ */
.scrapbook { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.scrap { position: absolute; display: block; line-height: 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25)); transform-origin: center; }
.scrapbook.editing .scrap { pointer-events: auto; cursor: grab; touch-action: none; }
.scrapbook.editing .scrap:active { cursor: grabbing; }
.scrapbook.editing .scrap.selected { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 8px; }

/* Cursor trails and the pixel arrow ---------------------------------------- */
.cursor-bit {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  font-size: 16px;
  color: var(--accent);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -50%);
  animation: cursor-bit 0.8s ease-out forwards;
}
@keyframes cursor-bit { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + 26px)) scale(0.4); opacity: 0; } }
[data-cursor='pixel'] body,
[data-cursor='pixel'] body * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='30' shape-rendering='crispEdges'%3E%3Cpath d='M2 2v22l6-6 4 9 4-2-4-9h8z' fill='%23fff' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 2 2, auto;
}

/* Editor pickers ------------------------------------------------------------- */
.banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.banner-pick { position: relative; height: 46px; border: 0; border-radius: 10px; cursor: pointer; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.15); display: flex; align-items: flex-end; padding: 3px 6px; }
.banner-pick span { padding: 0 5px; border-radius: 6px; background: rgba(255, 255, 255, 0.85); color: #222; font-weight: 800; }
.banner-pick.on { box-shadow: inset 0 0 0 3px var(--accent); }
.layout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.layout-pick { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 0; border-radius: 12px; background: rgba(var(--ink-rgb), 0.05); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.layout-pick.on { box-shadow: inset 0 0 0 2.5px var(--accent); }
.layout-mini { display: grid; gap: 3px; height: 44px; }
.layout-mini i { border-radius: 3px; background: rgba(var(--accent-rgb), 0.45); }
.lm-classic { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.lm-sidebar { grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 1fr; }
.lm-sidebar i:first-child { grid-row: span 2; }
.lm-sidebar i:last-child { display: none; }
.lm-centered { grid-template-columns: 1fr; padding: 0 28%; }
.lm-centered i:nth-child(n + 3) { display: none; }
.lm-mosaic { grid-template-columns: repeat(4, 1fr); }
.lm-mosaic i:nth-child(odd) { transform: rotate(-4deg); }
.link-edit .field:first-child { flex: 0 0 34%; }