/* Platform chrome defaults (nav, layout shell) — NOT profile theming.
   Profile pages get their own scoped variables from themes.css so a user's
   custom theme can never bleed into the platform UI around it.

   Fixed dark palette, not a light/dark toggle — the brand (see
   assets/blackbird.png, the rebrand from "Tilt") is hot-pink-on-black by
   design, the same way the platforms it's inspired by were. The wordmark
   itself is a plain white-on-black graffiti mark (no pink in the artwork),
   so it reads directly against this palette's dark surfaces with no extra
   backing treatment needed. --tilt-* custom property names were kept
   as-is through the rename (pure internal identifiers, invisible to any
   user — renaming them site-wide would be all risk for zero visible
   benefit). */

@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Caveat:wght@400;700&display=swap");

:root {
  --tilt-bg: #0b0b0d;
  --tilt-surface: #17151a;
  --tilt-text: #f5f2f5;
  --tilt-text-muted: #a89fae;
  --tilt-border: #322c37;
  --tilt-accent: #ff2d95;
  --tilt-accent-strong: #e6157d;
  --tilt-accent-contrast: #ffffff;
  --tilt-focus-ring: #ff2d95;
  --tilt-radius: 6px;
  --tilt-font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --tilt-font-display: "Permanent Marker", "Segoe UI", sans-serif;
  --tilt-font-accent: "Caveat", "Segoe UI", cursive;

  /* Fixed app-shell chrome dimensions — shared by css/shell.css,
     css/topbar.css and css/player.css so the topbar/sidebar/player-bar
     (all position:fixed, pinned to the viewport) and <main>'s offsetting
     margins never drift out of sync. */
  --shell-topbar-height: 5.5rem;
  --shell-sidebar-width: 16rem;
  --shell-playerbar-height: 4rem;
}

body {
  background: var(--tilt-bg);
  color: var(--tilt-text);
  font-family: var(--tilt-font-body);
}

:focus-visible {
  outline: 3px solid var(--tilt-focus-ring);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 1000;
  background: var(--tilt-accent);
  color: var(--tilt-accent-contrast);
  padding: 0.5rem 1rem;
  border-radius: var(--tilt-radius);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0.5rem;
}

/* Decorative utility system — pure CSS/SVG, no raster assets, so nothing
   here needs hosting beyond the logo itself. Used by the brand chrome and
   (later, Phase C) profile rendering; never by user-authored custom CSS,
   which stays governed by js/theme/css-sanitizer.js regardless. */

.font-display {
  font-family: var(--tilt-font-display);
}

.font-accent {
  font-family: var(--tilt-font-accent);
}

/* Ragged/torn paper edge along the bottom of an element, via a zigzag
   mask — no image needed. Pair with a solid background on the element. */
.torn-edge-bottom {
  -webkit-mask-image: linear-gradient(135deg, transparent 10px, #000 0), linear-gradient(-135deg, transparent 10px, #000 0);
  -webkit-mask-size: 20px 20px;
  -webkit-mask-position: bottom left;
  -webkit-mask-repeat: repeat-x;
  mask-image: linear-gradient(135deg, transparent 10px, #000 0), linear-gradient(-135deg, transparent 10px, #000 0);
  mask-size: 20px 20px;
  mask-position: bottom left;
  mask-repeat: repeat-x;
  padding-bottom: 1rem;
}

/* A strip of "masking tape" — apply to a small span/div positioned over
   the corner of a card. */
.tape {
  position: absolute;
  width: 4.5rem;
  height: 1.5rem;
  background: rgba(245, 242, 240, 0.85);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
  transform: rotate(-4deg);
}

.tape.tape-right {
  transform: rotate(4deg);
}

/* White-bordered photo frame with the classic thick-bottom polaroid look. */
.polaroid {
  background: #f2efe9;
  padding: 0.6rem 0.6rem 2.25rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
  transform: rotate(-2deg);
}

.polaroid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Preset avatar shapes (avatar-customisation pass) — pure CSS clip-path,
   percentage-based coordinates throughout (never `path()`, whose SVG
   syntax uses fixed pixel units and so wouldn't scale correctly with the
   different avatar sizes rendered across the site — identity tile,
   sidebar, friends grid, settings' shape picker, etc. each use a
   different size). Applied directly to whatever element should be
   clipped (usually an <img>) — see js/theme/avatar-frame.js for how this
   composites with an optional border around the clipped shape. */
.avatar-shape-circle {
  clip-path: circle(50%);
}

.avatar-shape-rounded-square {
  clip-path: inset(0 round 20%);
}

.avatar-shape-hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.avatar-shape-diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.avatar-shape-star {
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}

.avatar-shape-heart {
  clip-path: polygon(
    50% 15%, 61% 5%, 75% 0%, 85% 5%, 95% 15%, 100% 30%, 95% 45%, 85% 60%,
    50% 90%, 15% 60%, 5% 45%, 0% 30%, 5% 15%, 15% 5%, 25% 0%, 39% 5%
  );
}

/* Avatar frame base rules (js/theme/avatar-frame.js) — the shape + border
   compositor. Lives here, not css/profile.css, because it's rendered in
   more than one context (the identity tile, border-editor.html's live
   preview) with no shared ancestor to scope it under. All sizing (frame/
   layer/image pixel dimensions) is set inline by avatar-frame.js itself;
   these rules only handle stacking and defaults. */
.avatar-frame {
  position: relative;
  flex-shrink: 0;
}

.avatar-frame-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.avatar-frame-img {
  position: absolute;
  object-fit: cover;
}

/* Jagged "paint splatter / torn paper" burst, for icon badges etc. */
.splat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tilt-accent);
  clip-path: polygon(
    50% 0%, 61% 20%, 82% 8%, 78% 32%, 100% 40%, 78% 55%, 92% 78%, 66% 68%,
    60% 92%, 44% 70%, 22% 88%, 28% 60%, 2% 55%, 24% 38%, 8% 15%, 34% 25%
  );
}

/* A pinned sticky note — same rotation/box-shadow idiom as .polaroid/.tape,
   for the About tile's "pinned note" look. Apply alongside a small
   absolutely-positioned .tape/pin decoration; the rotation is the note's
   own, independent of whatever wraps it. */
.sticky-note {
  background: #fff3a3;
  color: #3a3320;
  padding: 1rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transform: rotate(1.5deg);
}

/* Hand-scrawled underline/emphasis, e.g. under a CTA link. */
.scribble-underline {
  text-decoration: none;
  background-image: linear-gradient(var(--tilt-accent), var(--tilt-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 3px;
}