/* Public profile page: a wide glass card (avatar beside the
   name, badge pill, boxes row for Discord/widgets, centred socials, views + location footer, audio card below).
   All look-and-feel values are CSS variables set by profile.js from the user's settings. */
:root {
  --accent: #f27db3; --accent-2: #b04680; --light: #f9b6d5; --rgb: 242,125,179; --rgb2: 150,0,20;
  --text: #f6f3f3; --text-rgb: 246,243,243; --muted: rgba(246,243,243,.65); --line: rgba(255,255,255,.12);
  --card-rgb: 10,6,6; --card-a: .45; --card-blur: 18px; --radius: 27px; --bw: 2px; --border: rgba(255,255,255,.18);
  --avatar-r: 50%; --bg: #050303; --bg-blur: 3px; --bg-dim: .45;
  --font: "Satoshi", "Plus Jakarta Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body { font-family: var(--font); color: var(--text); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.cursor-fx { cursor: none; }
body.custom-cursor, body.custom-cursor a, body.custom-cursor button { cursor: var(--cursor-img), auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
@media (hover: none) { body.cursor-fx { cursor: auto; } .cursor, #cfx { display: none; } }

/* ================= background ================= */
#bgVideo, .bg-image, #fx, #cfx, .bg-tint, .overlay { position: fixed; inset: 0; width: 100%; height: 100%; }
#bgVideo { object-fit: cover; z-index: -5; filter: blur(var(--bg-blur)); transform: scale(1.06); }
.bg-image { z-index: -5; background: center/cover no-repeat; filter: blur(var(--bg-blur)); transform: scale(1.06); }
.bg-gradient {
  position: fixed; inset: -20%; z-index: -6;
  background:
    radial-gradient(circle at 20% 25%, rgba(var(--rgb),.32), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(var(--rgb2),.45), transparent 42%), var(--bg);
  animation: swirl 30s ease-in-out infinite alternate;
}
.has-media .bg-gradient { display: none; }
@keyframes swirl { to { transform: rotate(12deg) scale(1.1); } }
.bg-tint { z-index: -4; pointer-events: none;}
.no-media .bg-tint { background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.6)); }
#fx { z-index: -3; pointer-events: none; }
#cfx { z-index: 150; pointer-events: none; }

/* overlays */
.overlay { z-index: 90; pointer-events: none; }
.ov-grain { opacity: .09; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain .5s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); } 50% { transform: translate(2%,-3%); } 75% { transform: translate(-2%,-1%); } }
.ov-scanlines { background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
.ov-vignette { background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.85)); }
.ov-crt { background: repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.75)); animation: crt 4s infinite; }
@keyframes crt { 0%, 100% { opacity: .95; } 48% { opacity: .9; } 50% { opacity: .75; } 52% { opacity: .92; } }
.ov-crt::after { content: ""; position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(transparent, rgba(255,255,255,.04), transparent); animation: roll 7s linear infinite; }
@keyframes roll { from { top: -30%; } to { top: 100%; } }
.ov-vhs { background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px); mix-blend-mode: screen; }
.ov-vhs::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain .3s steps(3) infinite; }
.ov-vhs::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: rgba(255,255,255,.12); filter: blur(1px); animation: roll 5s linear infinite; }
body.vhs-shift main { text-shadow: 1.5px 0 rgba(255,0,60,.45), -1.5px 0 rgba(0,200,255,.45); }

/* ================= enter screen (guns: blurred background, small bold word) ================= */
#enter { position: fixed; inset: 0; z-index: 200;place-items: center;transition: opacity .9s ease, visibility .9s; cursor: pointer; }
#enter.gone { opacity: 0; visibility: hidden; }
#enter span {padding: 0 20px; text-align: center;}
@keyframes pulse { 50% { opacity: .45; } }

/* ================= stage + entrance ================= */
main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;padding: 90px 16px 90px; opacity: 0; }
body.entered main { animation: in-fade 1.1s var(--ease) .1s forwards; }
body.entered.ent-zoom main { animation-name: in-zoom; }
body.entered.ent-blur main { animation-name: in-blur; }
body.entered.ent-flip main { animation-name: in-flip; perspective: 1200px; }
body.entered.ent-slide main { animation-name: in-slide; }
body.entered.ent-none main { animation: none; opacity: 1; }
/* keyframes for every entrance are in effects.css */
body.entered.ent-drop main { animation: in-drop 1s cubic-bezier(.3, 1, .4, 1) .1s forwards; }
body.entered.ent-swing main { animation: in-swing 1.1s cubic-bezier(.3, 1.2, .5, 1) .1s forwards; }
body.entered.ent-spin main { animation: in-spin .9s cubic-bezier(.2, 1, .3, 1) .1s forwards; }
body.entered.ent-curtain main { animation: in-curtain .9s cubic-bezier(.7, 0, .2, 1) .1s forwards; }
body.entered.ent-glitch main { animation: in-glitch .8s steps(1, end) .1s forwards; }

/* ================= card (default = guns' wide layout) ================= */
.card {
  position: relative; width: 100%; max-width: 704px; padding: 26px; border-radius: var(--radius);
  background: rgba(var(--card-rgb), var(--card-a)); border: var(--bw) solid var(--border);
  backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur));
transition: transform .2s ease-out;
  display: flex; flex-direction: column; gap: 18px;
}
.head { display: flex; align-items: center; gap: 22px; min-width: 0; }
.head-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sleek-meta { display: none; }

/* avatar + decorations */
.avatar-wrap { position: relative; width: 110px; height: 110px; flex: none; }
.avatar { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: var(--avatar-r); background: rgba(var(--text-rgb),.08) center/cover; display: grid; place-items: center; font-size: 44px; font-weight: 700; overflow: hidden; color: rgba(var(--text-rgb),.75); }
.discord-deco { position: absolute; z-index: 2; inset: -10%; width: 120%; height: 120%; pointer-events: none; }
/* decorations: effects.css */
@keyframes spin { to { transform: rotate(360deg); } }

/* name row: name + badge pill side by side */
.name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.name-wrap { position: relative; display: inline-block; max-width: 100%; cursor: default; }
.name {font-weight: 600; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; line-height: 1.15; }
#displayName { word-break: break-word; position: relative; display: inline-block; }
/* gradient / rainbow / chrome names: glow around the painted letters */
.glow-name.nfx-glow #displayName, .glow-name.nfx-plain #displayName { filter: none; text-shadow: 0 0 16.5px var(--text); }   /* guns: full-strength text-shadow in the name's own color */
.nfx-glow #displayName { color: var(--text); }
.nfx-sparkle #displayName { background: linear-gradient(90deg, #fff, var(--light), #fff, var(--light), #fff); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 4s linear infinite; }
.nfx-gradient #displayName { background: linear-gradient(90deg, var(--accent), var(--light), var(--accent)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; }
.nfx-rainbow #displayName { background: linear-gradient(90deg, #ff4d4d, #ffb84d, #f9f871, #4dff88, #4dc3ff, #b84dff, #ff4d4d); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 3s linear infinite; }
.nfx-chrome #displayName { background: linear-gradient(180deg, #fff 0%, #9aa1a8 45%, #e8ecef 52%, #6b7280 60%, #fff 100%); background-size: 100% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: chrome 3s ease-in-out infinite alternate; }
@keyframes chrome { to { background-position: 0 100%; } }
.nfx-neon #displayName { color: #fff; text-shadow: 0 0 4px #fff, 0 0 10px var(--accent), 0 0 22px var(--accent), 0 0 42px var(--accent); animation: neonflick 5s infinite; }
@keyframes neonflick { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .55; } }
.nfx-plain #displayName { color: var(--text); }
@keyframes shine { to { background-position: 200% center; } }
/* flicker / pulse / float / shake / jelly: effects.css (on h1.name) */
.nan-glitch #displayName::before, .nan-glitch #displayName::after { content: attr(data-text); position: absolute; inset: 0; -webkit-text-fill-color: currentColor;background: none; opacity: 0;  /* only the animation shows the split copies (none with reduced motion) */ pointer-events: none; }
.nan-glitch #displayName::before { color: #0ff; animation: glitch-a 2.5s infinite steps(2); clip-path: inset(0 0 55% 0); }
.nan-glitch #displayName::after { color: #f0f; animation: glitch-b 2s infinite steps(2); clip-path: inset(45% 0 0 0); }
@keyframes glitch-a { 0%, 85%, 100% { transform: none; opacity: 0; } 87% { transform: translate(-3px, -1px); opacity: .8; } 92% { transform: translate(3px, 1px); opacity: .8; } }
@keyframes glitch-b { 0%, 80%, 100% { transform: none; opacity: 0; } 83% { transform: translate(3px, 1px); opacity: .8; } 90% { transform: translate(-3px, 0); opacity: .8; } }
.letters span { display: inline-block; white-space: pre; }
.nan-wave .letters span { animation: wave 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 80ms); }
.nan-bounce .letters span { animation: bounce 2.2s cubic-bezier(.3,1.6,.6,1) infinite; animation-delay: calc(var(--i) * 70ms); }
@keyframes wave { 50% { transform: translateY(-7px); } }
@keyframes bounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-10px) scale(1.06); } }
#displayName.letters { background: none !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; }
.glow-name #displayName.letters { filter: none; text-shadow: 0 0 14px rgba(var(--rgb),.85); }
.nfx-gradient #displayName.letters span, .nfx-neon #displayName.letters span { color: var(--light); -webkit-text-fill-color: var(--light); }
.nfx-rainbow #displayName.letters span { color: hsl(calc(var(--i) * 38), 90%, 66%); -webkit-text-fill-color: hsl(calc(var(--i) * 38), 90%, 66%); }
.nfx-chrome #displayName.letters span { color: #e5e7eb; -webkit-text-fill-color: #e5e7eb; }
.sparkle { position: absolute; pointer-events: none; color: #fff; font-size: 10px; line-height: 1; text-shadow: 0 0 8px var(--accent), 0 0 14px var(--accent); animation: twinkle 1.2s ease-in-out forwards; }
@keyframes twinkle { 0% { opacity: 0; transform: scale(.2) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } 100% { opacity: 0; transform: scale(.2) rotate(180deg); } }

/* badge pill */
.badges { display: inline-flex; align-items: center; flex-wrap: wrap;border-radius: 25px;max-width: 100%; }
.badges:empty { display: none; }
.bdg { position: relative; display: inline-grid; place-items: center; width: calc(var(--s) + 6px); height: calc(var(--s) + 6px); border-radius: 8px; }
.bdg canvas, .bdg img { width: var(--s); height: var(--s); display: block; transition: transform .25s var(--ease); object-fit: contain; }
.glow-badges .bdg canvas { filter: drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 8px var(--c)); }
.glow-badges .bdg-white canvas { filter: drop-shadow(0 0 3px rgba(255,255,255,.55)) drop-shadow(0 0 8px rgba(255,255,255,.18)); }
.bdg:hover canvas, .bdg:hover img { transform: translateY(-2px) scale(1.15); }
.bdg-tip { display: none; } /* replaced by the shared .tip below */
.name .bdg { margin-left: 2px; }

/* bio, joined */
.bio {font-weight: 570; min-height: 22px; white-space: pre-wrap; line-height: 1.3; }
.bio .caret { display: inline-block; width: 2px; height: 1em; background: var(--text); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(1) infinite; }
.bio.fading #bio { transition: opacity .5s; }
@keyframes blink { 50% { opacity: 0; } }
.joined { font-size: 13px; color: rgba(var(--text-rgb),.65); }

/* boxes row: Discord presence + widgets (two per row like guns) */
.boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));}

.boxes > .span-row { grid-column: 1 / -1; }
.box { position: relative; min-width: 0; border-radius: 25px;overflow: hidden; --box-r: 25px; }
.box.full { grid-column: 1 / -1; }
.presence {align-items: center; gap: 12px; padding: 12px; min-height: 98px; }
.pres-av { position: relative; flex: none; width: 74px; height: 74px; border-radius: 50%; background: rgba(var(--text-rgb),.1) center/cover; display: grid; place-items: center; font-size: 28px; }
.pres-av.has-img i { display: none; }
.status-dot { position: absolute; right: 0; bottom: 2px; width: 20px; height: 20px; border-radius: 50%; background: #747f8d; border: 4px solid rgba(20,20,20,.95); }
.status-dot.online { background: #23a55a; } .status-dot.idle { background: #f0b232; } .status-dot.dnd { background: #f23f43; }
.presence .info { min-width: 0; flex: 1; display: grid; gap: 2px; }
.presence b { font-size: 18.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presence span { font-size: 13.5px; color: rgba(var(--text-rgb),.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presence .elapsed { color: rgba(var(--text-rgb),.55); font-size: 12.5px; }
.presence .elapsed:empty { display: none; }

/* socials + links */
.socials { display: flex;flex-wrap: wrap;}
.socials:empty { display: none; }
.socials a {display: grid; place-items: center;color: var(--icon, var(--text)); transition: transform .3s var(--ease), color .3s, filter .3s; }
.glow-socials .socials a { filter: drop-shadow(1px 0 7px var(--icon, var(--text))); }   /* guns: drop-shadow(icon color 1px 0 7px) */
/* "One-color icons" off: every icon in its brand color, glow too (guns: monochrome = false) */
body:not(.mono-icons) .socials a { color: var(--c, var(--icon)); }
body:not(.mono-icons).glow-socials .socials a { filter: drop-shadow(1px 0 7px var(--c, var(--icon))); }
/* hover like guns: the icon grows a little and keeps its own colour and glow (switching to the accent hid icons whose accent is dark, e.g. the card colour) */
.socials a:hover, .socials a:focus-visible, .socials a:active, .socials a.tap { transform: scale(1.1); }
.links { display: grid;}
.links:empty { display: none; }
.links a { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 20px; font-weight: 550; font-size: 15.5px; background: rgba(var(--text-rgb),.07); border: 2px solid rgba(var(--text-rgb),.05); transition: background .2s, transform .25s var(--ease); }
.links a:hover { background: rgba(var(--text-rgb),.12); transform: translateY(-2px); }
.links a > i:first-child { width: 20px; text-align: center; opacity: .9; }
.links a > i:last-child { margin-left: auto; opacity: .5; font-size: 12px; }
.links a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



/* footer: views | location */
.card-foot { display: flex; align-items: center; gap: 0; font-size: 13px; color: rgba(var(--text-rgb),.85); margin-top: -4px; }
.card-foot:not(:has(> :not([hidden]))) { display: none; }
.foot-item { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.foot-item i { font-size: 13px; }
.foot-item + .foot-item:not([hidden])::before { content: ""; width: 1px; height: 14px; background: rgba(var(--text-rgb),.3); margin: 0 12px; }

/* shared tooltip (guns: dark glass pill above the element) */
.tip { position: fixed; z-index: 300; pointer-events: none; padding: 5px 11px; border-radius: 15px; font-size: 14.4px; white-space: nowrap; color: #fafafa;
  background: rgba(20,20,20,.55); border: 2px solid rgba(26,26,26,.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 45px rgba(0,0,0,.45);
  opacity: 0; transform: translate(-50%, calc(-100% - 4px)) scale(.96); transition: opacity .15s, transform .2s var(--ease); }
.tip.show { opacity: 1; transform: translate(-50%, calc(-100% - 10px)); }

/* ================= layouts =================
   Base styles above are the Modern layout. The others override them. */
.card { --fs: 1; letter-spacing: var(--ls, normal); }
.name { font-size: calc(36px * var(--fs)); }
.bio { font-size: calc(17px * var(--fs)); }
.socials { justify-content: var(--social-align, center); }

/* banner (Default + Modern): image strip on top, content overlapping it */
/* the picture itself fades out at the bottom, so it melts into whatever is under it: the card's colour, or the page
   background when the card is see-through (fading to the card colour left a grey band with a hard edge there) */
.banner { position: absolute; left: 0; right: 0; top: 0; height: 140px; border-radius: calc(var(--radius) - var(--bw)) calc(var(--radius) - var(--bw)) 0 0; background: center/cover; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, rgba(0,0,0,.55) 70%, transparent); mask-image: linear-gradient(180deg, #000 35%, rgba(0,0,0,.55) 70%, transparent); }
.has-banner .card { padding-top: 96px; }
.has-banner .head > * { position: relative; z-index: 1; }

/* Default: centred card, avatar on top */
.layout-default .card { max-width: 640px; text-align: center;}
.layout-default.has-banner .card { padding-top: 80px; }
.layout-default .head { flex-direction: column;}
.layout-default .name-row { justify-content: center; }
.layout-default .avatar-wrap { width: 118px; height: 118px; }
/* guns: boxes and buttons are as wide as the widest one's content (at least 278px), centred; embeds stay full width */
.layout-default .boxes {justify-content: center; }
/* (a full-width box takes its own row and the rest stay two to a row, like Modern; it used to turn every box full width) */
.layout-default .boxes > .box, .layout-default .links a { min-width: 278px; }
.layout-default .links { grid-template-columns: fit-content(100%); justify-content: center; }
.layout-default .player { max-width: 640px; }

/* Simplistic: centred avatar + name, then full-width link buttons (title + URL) */
.layout-simplistic .card {text-align: center; background: none; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; padding: 0; }
.layout-simplistic .head { flex-direction: column;}

.layout-simplistic .name-row { justify-content: center; }

.layout-simplistic .boxes > .box { text-align: left; }   /* the card centres its text; boxes read left to right */
.layout-simplistic .links a { flex-direction: column; justify-content: center; align-items: var(--btn-align, center); text-align: var(--btn-text, center); gap: 2px; padding: 12px 18px;
  border-radius: var(--btn-r, 12px); background: rgba(var(--card-rgb), max(var(--card-a), .35));backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.layout-simplistic .links a > i { display: none; }
.layout-simplistic .links a span {overflow: visible; white-space: normal; }
.layout-simplistic .links a small { font-size: 12.5px; opacity: .65; display: inline-flex; gap: 5px; align-items: center; }
.layout-simplistic .links a small i { font-size: 10px; }

.layout-simplistic .player { max-width: 600px; }

/* Sleek: small avatar top-left, views + location top-right, big name underneath */

.layout-sleek .head { flex-direction: column; align-items: flex-start;}


.layout-sleek .sleek-meta { display: flex;color: rgba(var(--text-rgb),.85); white-space: nowrap; }
.layout-sleek .sleek-meta .foot-item + .foot-item::before { content: "";}
.layout-sleek .card-foot { display: none; }

.layout-sleek .player { max-width: 660px; }

/* Portfolio: no card, big avatar beside the name (or centred), then content modules */
.layout-portfolio main { justify-content: flex-start;}
.layout-portfolio .card { max-width: 1160px; background: none; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; padding: 0;}
.layout-portfolio .avatar-wrap { width: 172px; height: 172px; }
.layout-portfolio .name { font-size: calc(40px * var(--fs)); }

.layout-portfolio.hero-centered .head { flex-direction: column; text-align: center; }
.layout-portfolio.hero-centered .name-row { justify-content: center; }
.layout-portfolio.hero-centered .socials { padding-left: 0; }

.layout-portfolio .box {-webkit-backdrop-filter: blur(var(--card-blur)); }


/* portfolio modules */
.modules {gap: 14px; }
.modules:empty { display: none; }
.mod {border-radius: 22px;-webkit-backdrop-filter: blur(var(--card-blur)); text-align: left; }
.mod h2 { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 10px; }
.mod .md { font-size: 15px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.mod .md a { color: var(--light); text-decoration: underline; }
.mod .md code { background: rgba(var(--text-rgb),.1); padding: 1px 6px; border-radius: 5px; font-size: 13px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tags:empty { display: none; }
.tags span { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; background: rgba(var(--text-rgb),.08); border: 1px solid rgba(var(--text-rgb),.1); }
.projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.project { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: rgba(var(--text-rgb),.06); border: 1px solid rgba(var(--text-rgb),.08); transition: transform .25s var(--ease), border-color .2s; }
a.project:hover { transform: translateY(-3px); border-color: rgba(var(--rgb),.5); }
.project .pcover { aspect-ratio: 16 / 9; background: rgba(var(--rgb),.15) center/cover; display: grid; place-items: center; font-size: 26px; }
.project .pbody { padding: 12px 14px 14px; display: grid; gap: 4px; }
.project b { font-size: 15.5px; font-weight: 600; }
.project p { font-size: 13.5px; opacity: .72; line-height: 1.45; }
.project .tags { margin-top: 6px; }

.no-border .card, .no-border .player { border-width: 0; }
.layout-simplistic.no-border .links a, .layout-portfolio.no-border .mod { border-width: 0; }

/* extra entrance animations (guns: fade / unfold / pop) */
body.entered.ent-unfold main { animation-name: in-unfold; }
body.entered.ent-pop main { animation: in-pop .7s cubic-bezier(.34,1.56,.64,1) .1s forwards; }

/* ================= widgets (inside .boxes) ================= */
.w .w-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--text-rgb),.6); padding: 12px 16px 0; }
.w iframe { display: block; width: 100%; border: 0; }
.w.has-frame { padding: 10px; }
.w.has-frame iframe { border-radius: 15px; }
.w .embed-16x9 { aspect-ratio: 16 / 9; }
.w-card { display: flex; gap: 12px; align-items: center; padding: 12px; min-height: 94px; }
.w-card .ico { flex: none; width: 74px; height: 74px; border-radius: 18px; background: rgba(var(--text-rgb),.1) center/cover; display: grid; place-items: center; font-size: 26px; }
.w-card .ico.round { border-radius: 50%; }
.w-card .txt { flex: 1; min-width: 0; text-align: left; }
.w-card b { display: block; font-size: 17px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-card small { display: block; font-size: 13px; color: rgba(var(--text-rgb),.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-card .stats { display: flex; gap: 4px 10px; margin-top: 4px; font-size: 12.5px; color: rgba(var(--text-rgb),.7); flex-wrap: wrap; }
.w-card .stats > span { white-space: nowrap; }   /* a stat wraps to the next line whole, never mid-number */
.w-card .stats i { margin-right: 4px; }
.w-card .stats .on::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #23a55a; margin-right: 5px; }
/* one button for every widget: the profile's own glass, the platform's colour only on its icon (Discord's green Join is guns') */
.w-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; height: 30px; min-width: 30px; padding: 0 11px;
  border: 0; border-radius: 9px; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
  background: rgba(var(--text-rgb),.12); color: inherit; cursor: pointer; transition: background .15s; }
.w-btn:hover { background: rgba(var(--text-rgb),.2); }
.w-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.w-btn:not(:has(.lbl)) { padding: 0; width: 30px; }
.w-btn i { font-size: 14px; }
.w-btn.yt i { color: #ff0033; } .w-btn.tw i { color: #a970ff; } .w-btn.tg i { color: #2aabee; } .w-btn.lf i { color: #d51007; } .w-btn.lb i { color: #00e054; } .w-btn.al i { color: #02a9ff; }
/* narrow boxes (two to a row, phones): a smaller picture, and buttons shrink to their icon so the name keeps its room */
.box.w { container-type: inline-size; }
/* two boxes in a row take the taller one's height: the shorter one's content sits in the middle of it (under its title,
   if it has one), not stuck to the top with an empty strip below. Several parts (a card and its item row) stay together. */
.box.w { display: flex; flex-direction: column; }
.box.w > .w-label + *, .box.w > :first-child:not(.w-label) { margin-top: auto; }
.box.w > :last-child:not(.w-label) { margin-bottom: auto; }
/* Custom: a widget fills its block, so the same centring applies when the block is taller than the widget */
.layout-custom .cv-cell > .box.w { height: 100%; }
@container (max-width: 380px) {
  .w-card { gap: 10px; }
  .w-card .ico { width: 58px; height: 58px; font-size: 22px; }
  .box .w-card .ico:not(.round) { border-radius: min(15px, calc(var(--box-r) * .6)); }
  .w-card .ico.poster { width: 41px; height: 58px; }
  .box .w-card .ico.poster { border-radius: min(7px, calc(var(--box-r) * .28)); }
  .w-card b { font-size: 16px; }
  .w-btn:has(> i) .lbl { display: none; }
  .w-btn:has(> i) { padding: 0; width: 30px; }
}
.w-text { padding: 16px 18px; font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.w-text a, #bio a { color: var(--light); text-decoration: underline; }
.w-text code, #bio code { background: rgba(var(--text-rgb),.1); padding: 1px 6px; border-radius: 5px; font-size: .87em; }
/* ||spoiler||: blurred until clicked */
.md-spoiler { background: rgba(var(--text-rgb),.16); border-radius: 4px; padding: 0 3px; cursor: pointer; filter: blur(5px); transition: filter .2s, background .2s; }
.md-spoiler.shown { filter: none; background: rgba(var(--text-rgb),.08); cursor: auto; }
.md-spoiler:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.w-count { padding: 16px; text-align: center; }
.w-count .lbl { font-size: 13px; color: rgba(var(--text-rgb),.7); margin-bottom: 8px; }
.w-count .digits { display: flex; justify-content: center; gap: 10px; }
.w-count .digits div { min-width: 58px; padding: 8px 6px; border-radius: 14px; background: rgba(var(--text-rgb),.07); }
.w-count .digits b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.w-count .digits small { font-size: 10.5px; color: rgba(var(--text-rgb),.6); text-transform: uppercase; letter-spacing: .1em; }
/* loading holds the card's height so nothing jumps when it arrives; a failed card only shows (with why) in the owner's preview */
.w-loading { display: grid; place-items: center; box-sizing: border-box; min-height: 94px; padding: 18px; text-align: center; color: rgba(var(--text-rgb),.6); font-size: 13px; }
.w-loading.err { gap: 6px; } .w-loading.err i { font-size: 15px; opacity: .8; }
/* game and stats cards */
.w-card .ico.rank { background-size: contain; background-repeat: no-repeat; background-color: transparent; }
.w-card .w-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: .04em; vertical-align: 2px; background: #b33430; color: #fff; }
.w-card .stats .up { color: #4ade80; } .w-card .stats .down { color: #f87171; }
.w-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 12px 12px; }
.w-item { display: grid; justify-items: center; gap: 2px; padding: 8px; border-radius: 12px; background: rgba(var(--text-rgb),.06); text-align: center; min-width: 0; }
.w-item i { width: 52px; height: 52px; background: center/contain no-repeat; }
.w-item b { font-size: 12px; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-item small { font-size: 11.5px; color: rgba(var(--text-rgb),.65); }
.w-gh-head { display: flex; gap: 12px; align-items: center; padding: 12px 14px 10px; }
.w-gh-head .txt { flex: 1; min-width: 0; text-align: left; }
.w-gh-head b { display: block; font-size: 17px; font-weight: 550; }
.w-gh-head small { display: block; font-size: 13px; color: rgba(var(--text-rgb),.7); }
.w-gh-head .stats { display: flex; gap: 10px; margin-top: 4px; font-size: 12.5px; color: rgba(var(--text-rgb),.7); flex-wrap: wrap; }
.w-gh-head .stats i { margin-right: 4px; }
/* one column per week, like GitHub; squares scale with the box so the whole year fits */
.w-gh { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); grid-auto-columns: 1fr; gap: 2px; padding: 0 14px 14px; }
.w-gh i { aspect-ratio: 1; border-radius: 2px; background: rgba(var(--text-rgb),.08); }
.w-gh i.pad { visibility: hidden; }
.w-gh i.l1 { background: color-mix(in srgb, var(--accent) 35%, transparent); } .w-gh i.l2 { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.w-gh i.l3 { background: color-mix(in srgb, var(--accent) 78%, transparent); } .w-gh i.l4 { background: var(--accent); }

/* ================= player (card under the profile, guns-style) ================= */
.player { position: relative; width: 100%; max-width: 704px; display: flex; align-items: center; gap: 15px; padding: 15px; border-radius: var(--radius);
  background: rgba(var(--card-rgb), var(--card-a)); border: var(--bw) solid var(--border); backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur)); overflow: hidden; }
.viz { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; pointer-events: none; }
.cover, .track, .controls { position: relative; }
.cover { flex: none; width: 65px; height: 65px; border-radius: 17px; background: rgba(var(--text-rgb),.1) center/cover; display: grid; place-items: center; font-size: 24px; }
.cover.img i { display: none; }
.track { flex: 1; min-width: 0; display: grid; gap: 6px; }
.track b { font-size: 17px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.time-row { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(var(--text-rgb),.7); font-variant-numeric: tabular-nums; }
.bar { position: relative; flex: 1; height: 4px; border-radius: 4px; background: rgba(var(--text-rgb),.2); cursor: pointer; }
.bar::before { content: ""; position: absolute; inset: -8px 0; }
.bar div { height: 100%; width: 0; border-radius: inherit; background: var(--text); position: relative; }
.bar div::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--text); transform: translateY(-50%) scale(0); transition: transform .15s; }
.bar:hover div::after { transform: translateY(-50%) scale(1); }
.controls { display: flex; align-items: center; gap: 4px; flex: none; }
.ctrl, .pbtn { border: 0; background: none; cursor: pointer; color: var(--text); display: grid; place-items: center; transition: transform .2s var(--ease), opacity .2s; }
.ctrl { width: 40px; height: 40px; font-size: 24px; }
.pbtn { width: 30px; height: 30px; font-size: 17px; opacity: .85; }
.ctrl:hover, .pbtn:hover { transform: scale(1.12); opacity: 1; }
.pbtn:disabled { opacity: .3; cursor: default; transform: none; }

/* ================= corners (guns: 60×60 glass button top-left) ================= */
.corner { position: fixed; top: 15px; z-index: 120; display: flex; gap: 10px; align-items: center; opacity: 0; transition: opacity .6s .8s; }
body.entered .corner { opacity: 1; }
.corner.left { left: 15px; } .corner.right { right: 15px; }
.icon-btn { height: 52px; min-width: 52px; padding: 0 14px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 18px; font-weight: 600; cursor: pointer; color: var(--text);
  background: rgba(var(--card-rgb),.2); border: 2px solid rgba(var(--text-rgb),.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s, transform .2s var(--ease); }
.icon-btn:hover { background: rgba(var(--text-rgb),.1); }
#volBtn { width: 60px; height: 60px; font-size: 24px; }
.icon-btn.pill { font-size: 14px; height: 44px; }
.vol-wrap {align-items: center; gap: 10px; }
.vol-wrap input { width: 0; opacity: 0; transition: width .3s var(--ease), opacity .25s; accent-color: var(--text); }
.vol-wrap:hover input, .vol-wrap:focus-within input { width: 110px; opacity: 1; }
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; padding: 6px; border-radius: 15px; background: rgba(16,16,16,.92); border: 2px solid rgba(255,255,255,.06); backdrop-filter: blur(14px); box-shadow: 0 20px 50px rgba(0,0,0,.5); display: none; }
.menu.open { display: grid; }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 0; background: none; cursor: pointer; font-size: 14px; text-align: left; }
.menu button:hover, .menu a:hover { background: rgba(255,255,255,.07); }
.menu i { width: 16px; opacity: .7; }

/* sheets, modal, toast */
.sheet { background: rgba(14,14,14,.94); border: 2px solid rgba(255,255,255,.06); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.modal { position: fixed; inset: 0; z-index: 180;place-items: center; background: rgba(0,0,0,.55); padding: 16px; }
.modal-card { width: min(420px, 100%); padding: 22px; border-radius: 22px; display: grid; gap: 12px; }
.modal-card b { font-size: 17px; }
.modal-card p { font-size: 13.5px; color: var(--muted); }
.modal-card select, .modal-card textarea { width: 100%; padding: 11px 12px; border-radius: 14px; border: 2px solid rgba(255,255,255,.06); background: rgba(255,255,255,.05); outline: 0; font-size: 14px; }
.modal-card select option { background: #121212; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-actions button { padding: 10px 16px; border-radius: 12px; border: 2px solid rgba(255,255,255,.06); background: rgba(255,255,255,.05); cursor: pointer; font-weight: 600; }
.modal-actions .primary { background: var(--accent); border-color: transparent; color: #fff; }
.modal-msg { font-size: 13.5px; color: #4ade80; min-height: 18px; }
.toast { position: fixed; left: 50%; top: 18px; transform: translate(-50%, -150%); opacity: 0; visibility: hidden; z-index: 250; padding: 10px 16px; border-radius: 14px; background: rgba(16,16,16,.95); border: 2px solid rgba(255,255,255,.06); font-size: 14px; font-weight: 600;}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast { transition: transform .3s var(--ease), opacity .2s, visibility .2s; }
#reportBtn { height: 44px; min-width: 44px; padding: 0; font-size: 16px; }

/* Custom CSS can't hide, cover or rewrite the report button or the report form.
   !important rules in a cascade layer beat every !important rule outside layers, whatever the selector, and custom CSS
   may not declare layers (CATALOG.checkCss). Its z-index is capped at 9999, far under these. */
@layer protect {
  html:has(> body.custom-css), body.custom-css, body.entered .corner.right, #reportBtn:not([hidden]), #reportModal:not([hidden]), #reportModal:not([hidden]) * {
    visibility: visible !important; opacity: 1 !important; filter: none !important; clip-path: none !important; mask: none !important;
    content-visibility: visible !important; mix-blend-mode: normal !important; zoom: 1 !important; scale: none !important; rotate: none !important; translate: none !important;
  }
  /* html and body too: an effect on them would hide the button along with everything else, while html::before/::after could still show text */
  html:has(> body.custom-css), body.custom-css { transform: none !important; display: block !important; }
  html:has(> body.custom-css)::before, html:has(> body.custom-css)::after { content: none !important; display: none !important; }
  body.entered .corner.right, #reportBtn:not([hidden]), #reportModal:not([hidden]), #reportModal:not([hidden]) * { backdrop-filter: none !important; pointer-events: auto !important; }
  .corner.right, #reportModal { z-index: 2147483647 !important; }
  .corner.right { position: fixed !important; top: 15px !important; right: 15px !important; bottom: auto !important; left: auto !important;
    display: flex !important; transform: none !important; margin: 0 !important; width: auto !important; height: auto !important; overflow: visible !important; }
  .corner.right::before, .corner.right::after, #reportBtn::after, #reportModal *::before, #reportModal *::after { content: none !important; display: none !important; }
  #reportBtn:not([hidden]) { display: inline-flex !important; position: static !important; width: 44px !important; height: 44px !important; min-width: 44px !important;
    margin: 0 !important; padding: 0 !important; font-size: 16px !important; color: #fff !important; background: rgba(18,18,18,.8) !important;
    border: 2px solid rgba(255,255,255,.1) !important; border-radius: 13px !important; transform: none !important; order: 99 !important; }
  #reportBtn i { font-size: 16px !important; color: #fff !important; transform: none !important; }
  #reportBtn i::before { content: "\f024" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
  #reportModal:not([hidden]) { display: grid !important; position: fixed !important; inset: 0 !important; transform: none !important; }
  #reportModal .modal-card { background: #121212 !important; color: #fff !important; transform: none !important; position: relative !important; inset: auto !important; }
}

/* ================= cursor ================= */
.cursor { position: fixed; top: 0; left: 0; z-index: 210; pointer-events: none; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px var(--cur, var(--accent)), 0 0 24px var(--cur, var(--accent)); transform: translate(-50%, -50%); display: none; }
body.cursor-fx .cursor { display: block; }
body.cursor-flashlight .cursor { display: none; }

/* ================= demo customiser ================= */
.cz { position: fixed; top: 80px; right: 15px; z-index: 130; width: min(340px, calc(100% - 30px)); padding: 18px; border-radius: 20px; max-height: calc(100vh - 100px); overflow: auto; opacity: 0; transform: translateY(-8px) scale(.98); visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s; }
.cz.open { opacity: 1; transform: none; visibility: visible; }
.cz h4 { font-size: 15px; margin-bottom: 2px; }
.cz .hint { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.cz-group { margin-bottom: 12px; }
.cz-group > label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: var(--muted); margin-bottom: 7px; text-transform: uppercase; }
.cz-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.cz-opts button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.06); }
.cz-opts button.on { border-color: var(--accent); background: rgba(var(--rgb),.18); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.cz-cta { display: block; text-align: center; margin-top: 8px; padding: 10px; border-radius: 12px; font-size: 13px; font-weight: 700; background: var(--accent); color: #fff; }

/* profile gradient: the card fades from the accent color into the card color */



/* ================= responsive ================= */
@media (max-width: 640px) {
  main { padding: 84px 12px 70px; }
  .card {gap: 16px; }
  .head {text-align: center;}


  .avatar-wrap { width: 96px; height: 96px; }
  .boxes { grid-template-columns: 1fr; }
  .card-foot { justify-content: center; }




  .layout-sleek .name-row { justify-content: flex-start; }

  .projects { grid-template-columns: 1fr; }
  .player { gap: 12px; padding: 12px; }
  .cover { width: 52px; height: 52px; border-radius: 14px; }
  .time-row { font-size: 13px; gap: 8px; }
  #volBtn { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; } }

/* footer moved to <body> in card-less layouts: fade in with the page */
body > .card-foot {transition: opacity .8s .6s; }
body.entered > .card-foot { opacity: 1; }

/* two-color gradient (custom colors when set) */


/* enter screen icon + subtitle */
#enter { gap: 0; }
#enter { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.enter-icon { width: 84px; height: 84px; object-fit: contain; margin-bottom: 18px;}

/* claim bubble */
.promo { position: fixed; left: 50%; bottom: 40px; z-index: 140; display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 999px;   /* guns: floating pill */
  background: rgba(20,20,20,.75); border: 2px solid rgba(171,171,171,.06); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 6px 24px rgba(0,0,0,.55);
  transform: translate(-50%, 24px); opacity: 0; transition: transform .6s var(--ease), opacity .4s; }
.promo.show { transform: translate(-50%, 0); opacity: 1; }
.promo img { width: 31px; height: 31px; }
.promo-txt { display: grid; gap: 4px; line-height: 1.2; color: #fff; text-decoration: none; }
.promo-txt b { font-size: 16px; font-weight: 600; color: #fff; }
.promo-txt span { font-size: 13px; color: #fff; }
.promo-x { padding: 6px; border-radius: 6px; border: 0; background: none; color: #aaa; font-size: 15px; cursor: pointer; transition: color .2s; }
.promo-x:hover { color: #fff; }
@media (max-width: 640px) { .promo { display: none; } }   /* guns shows it on desktop only */

/* custom social icons + glow colors */
.socials a .soc-img { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; }
.socials a.has-glow { filter: drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 2px var(--glow)); }
/* clock widget */
.w-clock { display: flex; align-items: center;padding: 13px; min-height: 100px; }
.w-clock .dial {flex: none; }
.w-clock .face { fill: rgba(0,0,0,.45); stroke: rgba(255,255,255,.18); stroke-width: 2; }
.w-clock .tick { stroke: rgba(255,255,255,.35); stroke-width: 1.5; stroke-linecap: round; }
.w-clock .tick.big { stroke: rgba(255,255,255,.7); stroke-width: 2.4; }
.w-clock .hand { stroke: #fff; stroke-linecap: round; }
.w-clock .hand.h { stroke-width: 4; } .w-clock .hand.m { stroke-width: 2.6; } .w-clock .hand.s {stroke-width: 1.4; }

.w-clock.light .face { fill: rgba(255,255,255,.92); stroke: rgba(0,0,0,.1); }
.w-clock.light .tick, .w-clock.light .tick.big { stroke: rgba(0,0,0,.45); }
.w-clock.light .hand { stroke: #111; } .w-clock.light .hand.s { stroke: var(--accent); }
.w-clock .txt {min-width: 0; }

.w-clock .txt small { font-size: 13px; color: rgba(var(--text-rgb),.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-clock .txt .mine {color: rgba(var(--text-rgb),.5); }
/* portfolio module extras */
.mod-sub { font-size: 14px; opacity: .7; margin: -4px 0 10px; }
.mod-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 14px; text-align: left; }
.mod-cards .box { margin: 0; }

/* swap box colors: inner boxes take the accent color */
.swap-colors .box, .swap-colors .links a, .swap-colors .mod { background: rgba(var(--rgb), .16); border-color: rgba(var(--rgb), .22); }

/* leaving-site warning */
.leave { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); }
.leave-card { width: min(400px, 100%); padding: 22px; border-radius: 22px; display: grid; gap: 10px; text-align: center; animation: in-pop .35s cubic-bezier(.34,1.56,.64,1); }
.leave-card b { font-size: 19px; }
.leave-card p { font-size: 14px; opacity: .7; }
.leave-card code { font: 500 13px ui-monospace, Menlo, Consolas, monospace; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.06); word-break: break-all; }
.leave-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.leave-row button { height: 42px; border-radius: 12px; border: 2px solid rgba(255,255,255,.08); background: rgba(255,255,255,.05); cursor: pointer; font-weight: 600; color: #fff; }
.leave-row .primary { background: var(--accent); border-color: transparent; }

/* ===== guns-style background effects ===== */
#glfx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -3; pointer-events: none; }
.bg-shade { position: fixed; inset: 0; z-index: -2; pointer-events: none; display: none; }
.bg-shade.shade-night { display: block; background: rgba(0,0,0,.55); }
.bg-shade.shade-blurred { display: block; background: #00000042; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.bg-shade.shade-tv { display: block; background: radial-gradient(rgba(0,0,0,.7) 34%, transparent 36%) 0 0 / 3px 3px; }

/* ===== username effects ===== */
#displayName.typing .name-caret { display: inline-block; margin-left: 2px; font-weight: 300; animation: caret 1s steps(1) infinite; -webkit-text-fill-color: currentColor; }
#displayName.fuzzy { background: none !important; animation: none !important; }
#displayName.fuzzy canvas { display: block; }
#displayName.shuffling { white-space: pre; }
#displayName.shuffling .sh-cell { display: inline-block; overflow: hidden; vertical-align: bottom; }
#displayName.shuffling .sh-strip { display: inline-flex; will-change: transform; }
#displayName.shuffling .sh-strip > span { display: inline-block; white-space: pre; }
@keyframes caret { 50% { opacity: 0; } }
.sparkle.sp-white { color: #fff; text-shadow: 0 0 8px #fff, 0 0 14px rgba(255,255,255,.6); }
.sparkle.sp-black { color: #111; text-shadow: 0 0 6px rgba(255,255,255,.55); }
.sparkle.sp-blue { color: #6cb6ff; text-shadow: 0 0 8px #3b8cff, 0 0 14px #3b8cff; }
.sparkle.sp-green { color: #7dffa8; text-shadow: 0 0 8px #22c55e, 0 0 14px #22c55e; }
.sparkle.sp-pink { color: #ffb3dd; text-shadow: 0 0 8px #ff5fb7, 0 0 14px #ff5fb7; }
.sparkle.sp-red { color: #ff8a8a; text-shadow: 0 0 8px #ff3b3b, 0 0 14px #ff3b3b; }
.sparkle.sp-yellow { color: #ffe680; text-shadow: 0 0 8px #facc15, 0 0 14px #facc15; }

/* ===== grayscale badges ===== */
.mono-badges #badges .bdg, .mono-badges #verifiedSlot .bdg { filter: grayscale(1); }

/* ===== weather / YouTube cards ===== */
.w-card .ico.wx { font-size: 32px; color: var(--accent); background: rgba(var(--rgb),.12); }
.w-card .wx-temp { font-size: 30px; font-weight: 700; padding: 0 6px; letter-spacing: -.02em; }

/* ===== synced lyrics ===== */
.lyrics { width: 100%;gap: 4px;border-radius: var(--radius);
-webkit-backdrop-filter: blur(var(--card-blur));}
.lyrics p { margin: 0; min-height: 1.3em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lyrics .ly-prev, .lyrics .ly-next { font-size: calc(13px * var(--fs)); color: var(--muted); opacity: .6; cursor: pointer; }
.lyrics .ly-cur { font-size: calc(17px * var(--fs)); font-weight: 700; color: var(--text); white-space: normal; text-shadow: 0 0 16px rgba(var(--rgb), .5); }
.lyrics .ly-cur.in { animation: lyIn .35s var(--ease, ease) both; }
@keyframes lyIn { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }


/* Discord badges + server tag in the Discord box */
.pres-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pres-top b { min-width: 0; }
.pres-badges { display: inline-flex; gap: 3px; flex: none; }
.pres-badges img { width: 18px; height: 18px; display: block; }
.pres-tag {align-items: center; gap: 4px; flex: none; height: 20px; padding: 0 6px; border-radius: 6px; background: rgba(var(--text-rgb), .1);font-weight: 700; letter-spacing: .02em; }
.pres-tag img { width: 14px; height: 14px; }


/* real brand logos that Font Awesome lacks (public/assets/brands, Simple Icons CC0): coloured like an icon font */
.si { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; background: currentColor; -webkit-mask: var(--si) center / contain no-repeat; mask: var(--si) center / contain no-repeat; }

/* Portfolio like guns: full-screen hero + "Scroll for more" */
.layout-portfolio.pf-tall main { padding-top: 0; }
.pf-hero { position: relative;display: flex; flex-direction: column; justify-content: center;padding: 40px 0 90px; box-sizing: border-box; }
.layout-portfolio.hero-centered .pf-hero { align-items: center; }
.pf-more { position: absolute; left: 0; right: 0; width: max-content; margin-inline: auto; bottom: 18px; display: flex; flex-direction: column; align-items: center;border: 0; background: none; color: inherit; opacity: .75; cursor: pointer; font: inherit;text-shadow: 0 0 12px rgba(0,0,0,.6);animation: pfBob 2.2s ease-in-out infinite; }
.pf-more:hover { opacity: 1; }

@keyframes pfBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
@media (prefers-reduced-motion: reduce) { .pf-more { animation: none; } }

/* Discord box when Lanyard doesn't know the user (guns: "User not found") */
.presence.pres-missing #presLine1 a { color: var(--accent, #f27db3); text-decoration: underline; }
.presence.pres-missing #presLine1 { white-space: normal; overflow: visible; text-overflow: clip; }

/* live presence cards (Steam, Twitch, AniList, Letterboxd) */
.w-card .ico.poster { width: 52px; height: 74px; border-radius: 8px; }
.w-card .pres-dot::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: #80848e; vertical-align: 1px; }
.w-card .pres-dot.online::before { background: #57cbde; }
.w-card .pres-dot.ingame { color: #a3cf06; } .w-card .pres-dot.ingame::before { background: #a3cf06; }
.w-card .pres-dot.live { color: #fff; background: #e91916; padding: 0 7px; border-radius: 5px; font-weight: 700; font-size: 11.5px; letter-spacing: .04em; }
.w-card .pres-dot.live::before { background: #fff; animation: pres-blink 1.4s infinite; }
@keyframes pres-blink { 50% { opacity: .25; } }
.w-card .ico.live-ring { box-shadow: 0 0 0 3px #e91916; }
.w-card.st-ingame .ico { box-shadow: 0 0 0 3px #a3cf06; } .w-card.st-online .ico { box-shadow: 0 0 0 3px #57cbde; }
.w-card .w-game { flex: none; width: 92px; height: 43px; border-radius: 6px; background: center/cover; opacity: .9; }
.w-card .lb-stars { color: #00e054; letter-spacing: 1px; } .w-card .lb-like { color: #ff8000; }
@media (max-width: 480px) { .w-card .w-game { display: none; } }

/* guns hides the scrollbar on profiles: the page still scrolls with wheel, trackpad, keys and touch */
html, body { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

/* Portfolio, wide like guns: the hero stays readable, sections use the full width */
.layout-portfolio .pf-hero .head, .layout-portfolio .pf-hero .socials { max-width: 760px; width: 100%; }
.layout-portfolio.hero-centered .pf-hero .head, .layout-portfolio.hero-centered .pf-hero .socials { margin-inline: auto; }
.layout-portfolio .mod-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .layout-portfolio .mod-cards { grid-template-columns: 1fr; } }

/* guns' reveal: hero parts come in one after another once the page is entered, sections as they scroll into view */
.pf-reveal .rv { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(6px); }
.pf-reveal.entered .rv.rv-in { opacity: 1; transform: none; filter: none;
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1), filter .7s ease; transition-delay: calc(var(--rv, 0) * 90ms); }

/* ================= Custom layout: a grid of blocks (4 columns, 2 on phones) ================= */
.layout-custom main { justify-content: flex-start; padding: 9vh 16px 12vh; }
.layout-custom .card {width: 100%; background: none; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; padding: 0; }


.cv {grid-auto-flow: dense;width: 100%; }
.cv-cell {
background: rgba(var(--card-rgb), max(var(--card-a), .25));-webkit-backdrop-filter: blur(var(--card-blur)); }
.cv-cell::-webkit-scrollbar { display: none; }
.cv-cell:empty, .cv-cell:has(> [hidden]) { display: none; }
.cv-cell > .box, .cv-cell > .mod, .cv-cell > .player, .cv-cell > .links, .cv-cell > .socials {max-width: none; margin: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cv-cell > .box, .cv-cell > .mod, .cv-cell > .player { padding: 0; }
.cv-cell.k-profile .head { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.cv-cell.k-profile .name-row { justify-content: center; }
.cv-cell.k-profile.short .head { flex-direction: row; text-align: left; }
.cv-cell.k-profile.short .avatar-wrap { width: 72px; height: 72px; }
.cv-cell.k-profile.short .name-row { justify-content: flex-start; }
.cv-cell.k-socials .socials { justify-content: var(--social-align); flex-wrap: wrap; }

.cv-cell.k-widget:has(iframe) { padding: 0; } .cv-cell.k-widget iframe { width: 100%; height: 100%; border: 0; display: block; }
.cv-cell.k-widget .embed-16x9 { height: 100%; aspect-ratio: auto; }

/* widget cards bring their own padding */
/* ===== borders like guns: with a profile border on, the boxes and buttons inside take the same border and corner radius ===== */
body:not(.no-border):not(.layout-simplistic):not(.layout-portfolio):not(.layout-custom) .card .box,
body:not(.no-border):not(.layout-simplistic):not(.layout-portfolio):not(.layout-custom) .card .links a { border: var(--bw) solid var(--border); border-radius: var(--radius); }
body:not(.no-border):not(.layout-simplistic):not(.layout-portfolio):not(.layout-custom) .card .box { --box-r: var(--radius); }

/* ===== Portfolio sections (guns): full screen each, big titles, glass cards, pill tags ===== */
.layout-portfolio .pf-hero { min-height: 100vh; min-height: 100svh; }
.layout-portfolio .pf-sec { min-height: 100vh; min-height: 100svh; width: 100%; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 7vh 0; box-sizing: border-box; }
.layout-portfolio.pf-tall .card { padding-bottom: 0; gap: 0; }
.layout-portfolio .pf-hero .links { width: min(100%, 420px); }
.layout-portfolio.hero-centered .pf-hero .links { margin-inline: auto; }
.layout-portfolio .pf-sec .mod { background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; box-shadow: none; }
.layout-portfolio .pf-sec .mod h2 { font-size: calc(36px * var(--fs)); font-weight: 700; letter-spacing: normal; text-transform: none; opacity: 1;}
.layout-portfolio .pf-sec .mod .mod-sub { margin: -8px 0 16px; opacity: .7; }
.layout-portfolio .pf-sec .mod .md, .layout-portfolio .pf-sec .mod-cards > *, .layout-portfolio .pf-boxes .box, .layout-portfolio .pf-sec .project {
  background: rgba(var(--card-rgb), var(--card-a)); border: max(var(--bw), 2px) solid var(--border); border-radius: var(--radius);
  backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); }
.layout-portfolio .pf-sec .mod .md { padding: 28px; font-size: 16px; }
.layout-portfolio .pf-sec .mod-cards { gap: 14px; margin-top: 14px; }
.layout-portfolio .pf-sec .mod-cards > * { padding: 10px; }
.layout-portfolio .pf-sec .tags {margin-top: 14px; }
.layout-portfolio .pf-sec .tags span { padding: 7px 14px; border-radius: 40px; font-size: 14px; font-weight: 500;
  background: rgba(var(--card-rgb), var(--card-a)); border: 2px solid var(--border); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); }
.layout-portfolio .pf-sec .projects { gap: 14px; }
.layout-portfolio .pf-sec .project .pcover { aspect-ratio: 16 / 7; }
.layout-portfolio .pf-sec .project b { font-size: 22px; font-weight: 700; }

.layout-portfolio .pf-boxes .boxes { gap: 14px; }

/* dots: guns' section indicator on the right */
.pf-dots { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 55; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.pf-dots[hidden] { display: none; }
.pf-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--text-rgb), .5); opacity: .45; cursor: pointer; transition: opacity .18s, transform .18s, background .18s, width .18s, height .18s; }
.pf-dots button:hover { opacity: .8; }
.pf-dots button.on { width: 10px; height: 10px; background: var(--text); opacity: 1; }
body:not(.entered) .pf-dots { opacity: 0; }
.pf-more { transition: opacity .26s, translate .26s cubic-bezier(.22,1,.36,1); }
.pf-more.gone { opacity: 0; translate: 0 10px; pointer-events: none; }
/* touch screens scroll natively, snapping to the sections */
@media (pointer: coarse) { html:has(body.layout-portfolio.pf-tall) { scroll-snap-type: y proximity; } .layout-portfolio .pf-hero, .layout-portfolio .pf-sec { scroll-snap-align: start; } }

/* phones: guns' card is 15px from the edges; Default keeps a 118px avatar and Modern keeps the avatar beside the name */
@media (max-width: 640px) {
  main { padding-left: 15px; padding-right: 15px; }
  .name { font-size: calc(36px * var(--fs)); }

  .layout-default .avatar-wrap { width: 118px; height: 118px; }
  .layout-modern .head { flex-direction: row; text-align: left;}
  .layout-modern .name-row { justify-content: flex-start; }


  .layout-portfolio .pf-sec .mod h2 { font-size: calc(28px * var(--fs)); }
  .layout-portfolio .pf-sec .mod .md { padding: 20px; }
  .pf-dots { right: 8px; }
}
/* the claim bubble sits where "Scroll for more" goes: lift it above while the bubble shows */
@media (min-width: 641px) { body:has(.promo.show) .pf-more { bottom: 126px; } }   /* clear of the banner (hidden on phones) */
/* projects fill the row like guns (one project = full width) */
.layout-portfolio .pf-sec .projects { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* Simplistic: widget boxes take the profile border too, like its buttons */
body.layout-simplistic:not(.no-border) .card .box { border: var(--bw) solid var(--border); border-radius: var(--btn-r, 12px); --box-r: var(--btn-r, 12px); }

/* ===== border styles, like guns: Static, Dashed, Shimmer, Pulse =====
   guns runs Shimmer / Pulse on the card and also on the Discord box and the music player.
   Card-less layouts (Simplistic, Portfolio, Custom) have no visible card, so only their boxes get it. */
.bdr-dashed .card, .bdr-dashed .player, .bdr-dashed .mod, .bdr-dashed .card .box, .bdr-dashed .card .links a, .bdr-dashed .cv-cell { border-style: dashed; }
.bdr-pulse .card, .bdr-pulse .player, .bdr-pulse .card .presence { animation: bpulse 2.6s ease-in-out infinite; }
@keyframes bpulse { 50% { border-color: rgba(var(--rgb),.85); box-shadow: 0 0 26px rgba(var(--rgb),.35); } }
.bdr-shimmer .card, .bdr-shimmer .player, .bdr-shimmer .card .presence { border-color: transparent; }
.bdr-shimmer .card::before, .bdr-shimmer .player::before, .bdr-shimmer .card .presence::before { content: ""; position: absolute; inset: calc(var(--bw) * -1); border-radius: inherit; padding: var(--bw); pointer-events: none; z-index: 0;
  background: conic-gradient(from var(--sh, 0deg), transparent 0 60%, var(--light) 75%, var(--accent) 82%, transparent 92%), var(--border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: shimmer 3.5s linear infinite; }
@property --sh { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes shimmer { to { --sh: 360deg; } }
.layout-portfolio.bdr-shimmer .card::before, .layout-simplistic.bdr-shimmer .card::before, .layout-custom.bdr-shimmer .card::before { content: none; }
.layout-portfolio.bdr-shimmer .card, .layout-simplistic.bdr-shimmer .card, .layout-custom.bdr-shimmer .card { border-color: transparent; }
.layout-portfolio.bdr-pulse .card, .layout-simplistic.bdr-pulse .card, .layout-custom.bdr-pulse .card { animation: none; }

/* ===================== Default layout: final metrics =====================
   card 640px, 35px/15px padding · avatar 118 · 7px · name · badge pill on its own row · 14px · bio (5px) · location (20px)
   · boxes (20px) · socials (30px, 9px apart) · views bottom-left */
.card { box-shadow: none; }
.layout-default .card { gap: 0;}

.layout-default .head-text { gap: 0; margin-top: 7px; align-items: center; }
.layout-default .name-row { flex-direction: column; gap: 0; }
.layout-default .name-row .badges { margin: 0 0 14px; }
.layout-default .bio {font-size: calc(17px * var(--fs)); font-weight: 570; }
.layout-default .badges:empty + * , .layout-default .name-row:not(:has(.badges:not(:empty))) { margin-bottom: 0; }
.layout-default .joined { margin-top: 6px; }
.loc-line { display: inline-flex; align-items: center; justify-content: center; gap: 5px;font-size: calc(15px * var(--fs)); font-weight: 450; }
.loc-line i { font-size: 14px; }

.layout-default .socials {padding: 0 15px;}

.layout-default .card-foot { justify-content: flex-start; margin-top: 11px; font-size: 14px; font-weight: 550; }
.layout-default .card-foot .foot-item i { font-size: 16px; margin-right: 0; }
.layout-default.no-avatar .avatar-wrap { display: none; }
.layout-default.no-avatar .head-text { margin-top: 7px; }
.no-avatar .avatar i { font-size: 52%; opacity: .9; }

/* guns' tints (measured on guns.lol/6ixid): boxes and the badge pill are shaded with the TEXT colour, 7% / 5% border,
   which lifts them off the card; Swap Box Colors shades them with the card colour instead (20% / 10%) */
.box { background: rgba(var(--text-rgb), .07); border: 2px solid rgba(var(--text-rgb), .05); }
.badges { background: rgba(var(--text-rgb), .08); border: 2px solid rgba(var(--text-rgb), .04); padding: 6px 10px; gap: 9px; }
.swap-colors .box, .swap-colors .links a { background: rgba(var(--card-rgb), .2); border-color: rgba(var(--card-rgb), .1); }
.swap-colors .badges { background: rgba(var(--card-rgb), .2); border-color: rgba(var(--card-rgb), .04); }
.badges .bdg { width: var(--s); height: var(--s); }   /* 21px icons, 9px apart (guns' 5.5px looked cramped with edge-to-edge glyphs) */

/* the card gradient follows the card opacity (guns: opacity 0 = no visible gradient) */
.card-gradient .card, .card-gradient .player { background: linear-gradient(160deg, rgba(var(--g1), var(--card-a)), rgba(var(--g2), var(--card-a)) 75%); }

/* ===================== Modern layout: final metrics =====================
   head: 10px top padding, 120px avatar, 14px gap, text column gap 3px, badge pill beside the name (5px)
   boxes: two per row, 10px apart, 20px below the head, 104px tall · socials 33px lower · views | location bottom-left */
.layout-modern .card { gap: 0;}
.layout-modern .head {padding-top: 10px; align-items: center; }
.layout-modern .avatar-wrap { width: 120px; height: 120px; }
.layout-modern.no-avatar .avatar-wrap { width: 80px; height: 110px; margin-right: 10px; }
.layout-modern.no-avatar .avatar { background: none; font-size: 80px; }

.layout-modern .name-row { gap: 0 5px; }
.layout-modern .joined { font-size: 13px; color: rgba(var(--text-rgb), .65); }

.layout-modern .presence, .layout-modern .w-card { min-height: 104px; }
.layout-modern .socials {padding: 0 15px;}

.layout-modern .card-foot { position: absolute; left: 18px; bottom: 13px; margin: 0; gap: 13px; font-size: 14px; font-weight: 550; }
.layout-modern .card-foot .foot-item + .foot-item:not([hidden])::before { width: 2px; height: 15px; margin: 0 13px 0 0; border-radius: 100px; background: rgba(var(--text-rgb), .14); }
.layout-modern .card-foot #locWrap { font-size: 15px; font-weight: 450; gap: 5px; }

/* ===================== Sleek layout: final metrics =====================
   640px card, 25px padding · name 36px with the badge pill 5px beside it · bio 5px lower · views | location 15px from the
   top-right corner · socials 30px lower · the Discord box / widgets are separate cards under it (15px apart) */
.layout-sleek .card { max-width: 640px;gap: 0; }
.layout-sleek .head { position: static; gap: 12px; }
.layout-sleek.no-avatar .avatar-wrap { display: none; }
.layout-sleek .head-text { margin-left: 5px; gap: 0; }

.layout-sleek .name-row { gap: 5px; }
.layout-sleek .bio { margin-top: 5px; }
.layout-sleek .sleek-meta { position: absolute; top: 15px; right: 20px; gap: 13px; font-size: 14px; font-weight: 550; }
.layout-sleek .sleek-meta .foot-item + .foot-item::before { width: 2px; height: 15px; margin: 0 13px 0 0; border-radius: 100px; background: rgba(var(--text-rgb), .14); }
.layout-sleek .sleek-meta .foot-item:last-child { font-size: 15px; font-weight: 450; gap: 5px; }
.layout-sleek .socials {padding: 0 11px;}


.layout-sleek main > .boxes { width: 100%; max-width: 640px; grid-template-columns: 1fr; gap: 15px; }
.layout-sleek main > .boxes > .box { background: rgba(var(--card-rgb), var(--card-a)); border: var(--bw) solid var(--border); border-radius: var(--radius);
  backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur)); }
.layout-sleek main > .boxes > .presence { padding: 15px; gap: 13px; min-height: 0; }
.layout-sleek main > .boxes .pres-av { width: 65px; height: 65px; }

/* ===================== Portfolio hero: final metrics =====================
   avatar 176px in a 180px frame that takes the card color + profile border · 26px · name 36px bold, badges below (8px)
   · bio 10px lower · socials 30px lower, centred · views | location bottom-left at 72% · "Scroll for more" 12px */
.layout-portfolio .pf-hero .avatar-wrap { width: 180px; height: 180px; padding: 2px; border-radius: var(--avatar-r); box-sizing: border-box;
  background: rgba(var(--card-rgb), max(var(--card-a), .4)); border: max(var(--bw), 2px) solid var(--border); }
.layout-portfolio.hero-centered .pf-hero .head { gap: 26px; }
.layout-portfolio .pf-hero .head-text { gap: 10px; }
.layout-portfolio .pf-hero .name { font-size: calc(36px * var(--fs)); font-weight: 700; }
.layout-portfolio.hero-centered .pf-hero .name-row { flex-direction: column; gap: 8px; }
.layout-portfolio .pf-hero .bio { font-size: calc(17px * var(--fs)); font-weight: 570; }

.layout-portfolio.hero-centered .pf-hero .socials { justify-content: center; }

.layout-portfolio .pf-hero { gap: 0; }
body.layout-portfolio > .card-foot { left: 11px; bottom: 22px; gap: 8px; font-size: 14px; font-weight: 550; }
body.layout-portfolio > .card-foot .foot-item { opacity: .72; }
body.layout-portfolio > .card-foot .foot-item + .foot-item:not([hidden])::before { content: "|"; width: auto; height: auto; background: none; margin: 0 8px 0 0; font-size: 11px; font-weight: 400; opacity: .5; }
body.layout-portfolio > .card-foot #locWrap { font-size: 13px; font-weight: 400; gap: 5px; }
.pf-more { font-size: 12px; gap: 6px; }
.pf-more strong { font-weight: 560; }
.layout-portfolio .pf-hero .name-row { padding: 6px 0; }
.layout-portfolio .pf-hero .name { line-height: 35px; }
/* Portfolio sections: guns' exact rhythm (title 50px line, 14px between parts, cards 118px, tags 10px apart) */
.layout-portfolio .pf-sec .mod h2 { line-height: 50px;}
.layout-portfolio .pf-sec .mod-cards > .presence { padding: 20px; min-height: 0; }
.layout-portfolio .pf-sec .mod-cards > .box:not(.presence) { padding: 10px; }
.layout-portfolio .pf-sec .mod-cards > .box .w-card { padding: 10px; min-height: 0; }
.layout-portfolio .pf-sec .tags { gap: 10px; }
@media (min-width: 900px) { .layout-portfolio .card { max-width: 80vw; } }
/* clock card like guns: 70px dial · "20:26:23" 18px · "Sun, Oct 11 · GMT+2" 12.5px bold · comparison 11px · "Timezone" tag top-right */
.w-clock { position: relative; gap: 12px; }
.w-clock .dial { width: 70px; height: 70px; }
.w-clock .txt { display: flex; flex-direction: column; gap: 1px; }
.w-clock .txt b { font-size: 18px; font-weight: 450; font-variant-numeric: tabular-nums; }
/* one fade only (a faded colour under a faded opacity left these at a quarter strength, hard to read) */
.w-clock .txt small:not(.mine) { display: flex; gap: 5px; font-size: 12.5px; font-weight: 700; color: rgb(var(--text-rgb)); opacity: .7; }
.w-clock .txt .mine { font-size: 11px; font-weight: 400; color: rgb(var(--text-rgb)); opacity: .62; margin-top: 3px; }
.w-clock .clk-tag { position: absolute; top: 12px; right: 14px; display: inline-flex; align-items: center; gap: 4px; font-size: 11.3px; font-weight: 400; opacity: .62; }
.w-clock .hand.s { stroke: #e53935; } .w-clock .pin { fill: #e53935; }
/* guns' Sleek on phones: views | location move to the bottom-left of the card */
@media (max-width: 640px) {

  .layout-sleek .sleek-meta {top: auto; bottom: 15px; left: 20px; right: auto; flex-wrap: nowrap; }

  .layout-sleek .head { text-align: left; align-items: flex-start; flex-direction: column; }
}
/* card-less layouts never paint the card gradient over the whole page (Custom was missing) */
.layout-custom.card-gradient .card, .layout-portfolio.card-gradient .card, .layout-simplistic.card-gradient .card { background: none; }

/* ===================== Custom layout (free-form): blocks placed freely on a scaled canvas ===================== */
.layout-custom .card { max-width: 1200px; }
.cv-stage { width: 100%; display: flex; justify-content: center; }
.layout-custom .cv { display: block; position: relative; grid-template-columns: none; grid-auto-rows: auto; gap: 0; margin: 0 auto; }
.layout-custom .cv > .cv-cell { position: absolute; grid-column: auto; grid-row: auto; min-width: 0; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: var(--b-valign, center); align-items: var(--b-align, stretch); text-align: var(--b-talign, inherit);
  padding: var(--b-pad, 14px 16px); overflow: auto; scrollbar-width: none; color: var(--b-text, inherit);
  background-color: var(--b-bg, rgba(var(--card-rgb), max(var(--card-a), .25))); background-image: var(--b-img, none);
  background-size: var(--b-img-size, cover); background-repeat: var(--b-img-rep, no-repeat); background-position: center;
  border: var(--b-bd, var(--bw) solid var(--border)); border-radius: var(--b-r, var(--radius));
  backdrop-filter: blur(var(--b-blur, var(--card-blur))); -webkit-backdrop-filter: blur(var(--b-blur, var(--card-blur))); box-shadow: var(--b-glow, none); }
.layout-custom .cv > .cv-cell[hidden] { display: none; }
.layout-custom .cv-cell > .head, .layout-custom .cv-cell > .socials, .layout-custom .cv-cell > .links, .layout-custom .cv-cell > .box, .layout-custom .cv-cell > .mod, .layout-custom .cv-cell > .player { width: 100%; }
.layout-custom .cv-cell .name, .layout-custom .cv-cell .bio, .layout-custom .cv-cell .joined { color: var(--b-text, inherit); }
.layout-custom .cv-cell .links a { background-color: var(--btn-bg, rgba(var(--text-rgb), .07)); background-image: var(--btn-img, none); background-size: cover; background-position: center;
  color: var(--btn-text-c, inherit); border: var(--btn-bd, 2px solid rgba(var(--text-rgb), .05)); border-radius: var(--btn-rad, 16px); }
/* stacked (phones without their own arrangement) */
.layout-custom .cv.cv-flow { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.layout-custom .cv.cv-flow > .cv-cell { position: static; min-height: 0; }
.layout-custom .cv.cv-flow > .cv-cell.k-profile { padding-top: 26px; padding-bottom: 26px; }
/* phones: views / location sit under the page instead of floating over the last block (Custom, Simplistic) */
@media (max-width: 700px) {
  /* Simplistic and Custom keep the pinned views pill (guns); main's 90px bottom padding keeps content clear of it */
}
/* Sleek on phones: leave room under the buttons for views | location */
@media (max-width: 640px) {.layout-sleek .card:has(.links:not(:empty)) .socials { margin-bottom: 0; } }

/* a block whose content is hidden (Discord box before / without Discord) takes no space */
.layout-custom .cv > .cv-cell:has(> [hidden]), .layout-custom .cv > .cv-cell:empty { display: none; }

/* no background effect picked: a plain page like guns (no tinted haze) */
.plain-bg .bg-gradient { background: var(--bg); animation: none; }

/* guns sizes the name per font; with the default font (Satoshi) the Default layout's name is 39.5px */


/* ===================== Simplistic layout: final metrics =====================
   top-aligned (50px down), no card · avatar 118 (none if not set) · name 39.5 Satoshi / 36 · badge pill on its own row right under the name
   · bio 17px lower, 19px/570 · location under the bio (20px) · boxes fit their content, 20px lower · socials 30px lower
   · views alone in a bordered pill pinned bottom-left (border = profile border colour, radius = half the profile radius) */
.layout-simplistic main { justify-content: flex-start; padding-top: 50px; }

.layout-simplistic .avatar-wrap { width: 118px; height: 118px; }
.layout-simplistic.no-avatar .avatar-wrap { display: none; }
.layout-simplistic .head-text { gap: 0; margin-top: 7px; align-items: center; }
.layout-simplistic.no-avatar .head-text { margin-top: 0; }
.layout-simplistic .name-row { flex-direction: column; gap: 0; }
.layout-simplistic .name { font-size: calc(36px * var(--fs)); }

.layout-simplistic .name-row .badges { margin: 0; }
.layout-simplistic .bio { margin-top: 17px; font-size: calc(19px * var(--fs)); font-weight: 570; }
.layout-simplistic .card { max-width: 568px; }
.layout-simplistic .name { line-height: normal; }
/* guns wraps the bio at 432px (Default) / 392px (Simplistic) instead of running across the whole card */
.layout-default .bio { max-width: 432px; margin-inline: auto; }
.layout-simplistic .bio { max-width: 392px; margin-inline: auto; }
.layout-simplistic .boxes { margin-top: 20px;justify-content: center; }
.layout-simplistic .boxes > .box { border-radius: 25px; }


.layout-simplistic .links a span { font-size: calc(17px * var(--fs)); font-weight: 450; }
.layout-simplistic .card-foot, .layout-custom .card-foot {font-weight: 550; color: var(--text);
}
.layout-simplistic .card-foot .foot-item i, .layout-custom .card-foot .foot-item i { font-size: 16px; }

/* ================= Elements (Design > Elements): only active when the owner changed that part ================= */
body.el-name-c #displayName, body.el-name-c #displayName.letters { color: var(--el-name) !important; }
body.el-name-c.nfx-glow #displayName, body.el-name-c.nfx-plain #displayName, body.el-name-c #displayName.letters { -webkit-text-fill-color: var(--el-name) !important; }
body.el-name-c.glow-name.nfx-glow #displayName { text-shadow: 0 0 16.5px var(--el-glow, var(--el-name)); }
body.el-name-s #displayName { font-size: calc(1em * var(--el-name-s)); }
body.el-bio-c .bio, body.el-bio-c .bio .caret { color: var(--el-bio) !important; } body.el-bio-c .bio .caret { background: var(--el-bio); }
body.el-bio-s #bio { font-size: calc(1em * var(--el-bio-s)); }
body.el-bio-off #bioWrap, body.el-bio-off .bio { display: none !important; }
body.el-av-off .avatar-wrap { display: none !important; }
body.el-av-s .avatar-wrap { zoom: var(--el-av-s); }
body.el-av-b .avatar { box-shadow: 0 0 0 var(--el-av-bw) var(--el-av-bc); }
body.el-soc-off .socials { display: none !important; }
body.el-soc-s .socials a { zoom: var(--el-soc-s); }
body.el-loc-off #locWrap, body.el-loc-off .loc-line { display: none !important; }
body.el-box-bg .box { background: var(--el-box-bg) !important; }

body.el-box-r .box { border-radius: var(--el-box-r) !important; --box-r: var(--el-box-r) !important; }
/* what sits inside a box is never rounder than the box: square boxes get square tiles, icons and buttons
   (each keeps its own size at the default 25px corner) */
.box .w-card .ico:not(.round), .box .w-card .ico.wx { border-radius: min(18px, calc(var(--box-r) * .72)); }
.box .w-card .ico.poster { border-radius: min(8px, calc(var(--box-r) * .32)); }
.box .w-dcserver .ico { border-radius: min(16px, calc(var(--box-r) * .64)); }
.box .w-count .digits div { border-radius: min(14px, calc(var(--box-r) * .56)); }
.box .w-item { border-radius: min(12px, calc(var(--box-r) * .5)); }
.box .w-btn { border-radius: min(9px, calc(var(--box-r) * .36)); }
.box.has-frame iframe { border-radius: min(15px, calc(var(--box-r) * .6)); }
.box .wg-item { border-radius: min(max(6px, calc(var(--radius, 20px) * .55)), calc(var(--box-r) * .6)); }
body.el-btn-bg .links a { background: var(--el-btn-bg) !important; }
body.el-btn-tx .links a, body.el-btn-tx .links a small { color: var(--el-btn-tx) !important; }
body.el-btn-bd .links a { border-color: var(--el-btn-bd) !important; }
body.el-pl .player { --accent: var(--el-pl); --light: var(--el-pl); }
body.el-foot .card-foot, body.el-foot .card-foot i { color: var(--el-foot) !important; }
body.el-glow.glow-name.nfx-glow #displayName, body.el-glow.glow-name.nfx-plain #displayName { text-shadow: 0 0 16.5px var(--el-glow) !important; }
body.el-glow.glow-name #displayName { filter: drop-shadow(0 0 10px var(--el-glow)); }
body.el-glow.glow-name.nfx-glow #displayName, body.el-glow.glow-name.nfx-plain #displayName { filter: none; }
body.el-glow.glow-socials .socials a { filter: drop-shadow(1px 0 7px var(--el-glow)) !important; }
body.el-glow.glow-badges .bdg canvas { filter: drop-shadow(0 0 3px var(--el-glow)) drop-shadow(0 0 8px var(--el-glow)) !important; }


/* list widget */
.w-list { display: grid; gap: 2px; padding: 2px 16px 12px; text-align: left; }
.w-list-r { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: 14.5px; }
.w-list-r + .w-list-r { border-top: 1px solid rgba(var(--text-rgb), .07); }
.w-list-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.w-list-v { flex: none; font-size: 13.5px; opacity: .7; font-variant-numeric: tabular-nums; }

/* Friends, About me, Currently, Top 4, Goal */
.w-friends { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px; }
.w-friend { flex: 0 1 124px; display: grid; justify-items: center; gap: 2px; padding: 12px 8px 10px; border-radius: min(14px, calc(var(--box-r) * .55)); background: rgba(var(--text-rgb),.06); color: inherit; text-decoration: none; min-width: 0; transition: background .2s, transform .2s; }
.w-friend:hover { background: rgba(var(--text-rgb),.11); transform: translateY(-2px); }
.w-friend .av { width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: rgba(var(--rgb),.25) center/cover; }
.w-friend b, .w-friend small { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-friend b { font-size: 13.5px; font-weight: 600; }
.w-friend small { font-size: 12px; color: rgba(var(--text-rgb),.65); }
.w-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 12px; }
.w-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 550; background: rgba(var(--text-rgb),.08); }
.w-chip i { font-size: 12px; opacity: .7; }
.w-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-now { display: grid; gap: 2px; padding: 8px 14px; text-align: left; }
.w-now-r { display: flex; align-items: center; gap: 12px; padding: 7px 0; min-width: 0; }
.w-now-r + .w-now-r { border-top: 1px solid rgba(var(--text-rgb),.07); }
.w-now-r > i { flex: none; width: 18px; text-align: center; font-size: 14px; opacity: .7; }
.w-now-r .txt { min-width: 0; }
.w-now-r small { display: block; font-size: 11.5px; color: rgba(var(--text-rgb),.6); }
.w-now-r b { display: block; font-size: 14.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-top4 { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 150px)); justify-content: center; gap: 8px; padding: 12px; }
.t4 { display: grid; gap: 6px; min-width: 0; }
.t4-pic { aspect-ratio: 2 / 3; display: grid; place-items: center; font-size: 20px; border-radius: min(12px, calc(var(--box-r) * .5)); background: rgba(var(--text-rgb),.07) center/cover; }
.t4 b { font-size: 13px; font-weight: 550; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-goal { display: grid; gap: 9px; padding: 14px 16px; text-align: left; }
.w-goal-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.w-goal-top b { font-size: 18px; font-weight: 650; min-width: 0; }
.w-goal-top small { font-size: 13px; font-weight: 500; color: rgba(var(--text-rgb),.65); }
.w-goal-top > span { flex: none; font-size: 13.5px; opacity: .75; }
.w-goal-bar { height: 8px; border-radius: 999px; overflow: hidden; background: rgba(var(--text-rgb),.1); }
.w-goal-bar i { display: block; height: 100%; border-radius: inherit; background: var(--light); }
.w-goal .w-btn { justify-self: start; }
.box.w .w-goal .w-btn:has(> i) { width: auto; padding: 0 12px; }   /* keeps its word in narrow boxes: a lone heart says nothing */
.box.w .w-goal .w-btn:has(> i) .lbl { display: inline; }
/* Bluesky's latest post, under the card */
.w-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin: 0 12px 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; text-align: left; white-space: pre-wrap; word-break: break-word; color: inherit; text-decoration: none; border-radius: min(12px, calc(var(--box-r) * .5)); background: rgba(var(--text-rgb),.06); }
.w-note:hover { background: rgba(var(--text-rgb),.1); }
.w-card .ico.pixel { image-rendering: pixelated; background-size: contain; }
.w-card .stats .lc-easy { color: #1cbbba; }
.w-card .stats .lc-med { color: #ffb700; }
.w-card .stats .lc-hard { color: #f63737; }
/* TikTok: a phone-shaped player, kept phone-sized when the box is full width */
.w .embed-9x16 { aspect-ratio: 9 / 16; max-width: 325px; margin-inline: auto; }
.cv-cell.k-widget .embed-9x16 { height: 100%; aspect-ratio: auto; max-width: none; }

/* Portfolio: Experience, Testimonials, Contact */
.xp { display: grid; gap: 10px; }
.xp-row { padding: 14px 16px; border-radius: 16px; background: rgba(var(--text-rgb),.06); border: 1px solid rgba(var(--text-rgb),.08); text-align: left; }
.xp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.xp-name { min-width: 0; display: grid; gap: 1px; }
.xp-name b { font-size: 15.5px; font-weight: 600; }
.xp-name small { font-size: 13.5px; color: rgba(var(--text-rgb),.7); }
.xp-when { flex: none; font-size: 13px; opacity: .65; font-variant-numeric: tabular-nums; }
.xp-row p { margin-top: 8px; font-size: 13.5px; line-height: 1.5; opacity: .78; white-space: pre-wrap; word-break: break-word; }
.quote { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; margin: 0; padding: 16px; border-radius: 16px; background: rgba(var(--text-rgb),.06); border: 1px solid rgba(var(--text-rgb),.08); text-align: left; }
.quote blockquote { margin: 0; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.quote figcaption { display: grid; gap: 1px; }
.quote figcaption b { font-size: 14px; font-weight: 600; }
.quote figcaption small { font-size: 12.5px; color: rgba(var(--text-rgb),.65); }
.contact-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mod[data-align=center] .contact-row { justify-content: center; }
.mod[data-align=right] .contact-row { justify-content: flex-end; }
.contact-btn { padding: 10px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 550; color: inherit; text-decoration: none; background: rgba(var(--rgb),.22); border: 1px solid rgba(var(--rgb),.4); transition: background .2s; }
.contact-btn:hover { background: rgba(var(--rgb),.34); }
@media (max-width: 560px) { .xp-head { flex-direction: column; gap: 4px; } }

/* player: the song's cover blurred behind it */
.player.cover-bg::before { content: ""; position: absolute; inset: -20%; background: var(--cover-bg, none) center / cover; filter: blur(28px) saturate(1.3) brightness(.55); opacity: .9; pointer-events: none; }
.player.cover-bg > * { position: relative; }

/* ---- layout fixes (Oct 17) ---- */
/* music player + lyrics: the same width as the other layouts, centred (Portfolio stretched them to 1160px) */
.layout-portfolio .player, .layout-portfolio .pf-music .player, .layout-portfolio .lyrics { max-width: 704px; width: 100%; margin-inline: auto; }
.layout-portfolio .pf-music { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.layout-custom .cv-cell .player { max-width: 704px; margin-inline: auto; }

.lyrics .ly-cur.waiting { opacity: .7; }
/* portfolio classic: socials live under the bio, so no fixed offset */
.layout-portfolio .head-text .socials { padding-left: 0; margin-top: 14px; justify-content: flex-start; }
/* views / location pill (Simplistic, Portfolio, Custom): the same pill everywhere, away from the edge, never under "Scroll for more" */
.layout-portfolio .card-foot, .layout-custom .card-foot, .layout-simplistic .card-foot { position: fixed; left: max(20px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 30; margin: 0; padding: 9px 13px; gap: 10px;
  border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; }
@media (max-width: 640px) { .layout-portfolio .pf-more { bottom: 74px; } }
.layout-custom main, .layout-simplistic main { padding-bottom: 110px; }   /* the end of the page clears the pill */
/* Elements fixes: border colours show even when the profile border is off; Sleek's info row follows "hide location" and "details color" */
body.el-btn-bd .links a { border-width: max(var(--bw, 0px), 2px) !important; border-style: solid !important; }
body.el-box-bd .box, body.el-box-bd .cv-cell { border-width: max(var(--bw, 0px), 2px) !important; border-style: solid !important; border-color: var(--el-box-bd) !important; }
body.el-loc-off .sleek-meta .loc-clone { display: none !important; }
body.el-foot .sleek-meta, body.el-foot .sleek-meta i { color: var(--el-foot) !important; }
/* name size like guns in every layout: 39.5px × the font's own factor (Satoshi 1, most fonts .911 = 36px) × Font Size */
:root { --name-k: 1; }
body .card .name, body .layout-sleek .name, body.layout-sleek .name, body.layout-portfolio .name, body.layout-portfolio .pf-hero .name, body.layout-modern .name, body.layout-default .name, body.layout-simplistic .name,
body[data-font="satoshi"].layout-default .name, body[data-font="satoshi"].layout-simplistic .name { font-size: calc(39.5px * var(--name-k) * var(--nfs, 1)); }
/* Sleek avatar like guns (118px, phones too: guns keeps desktop sizes on phones) */
.layout-sleek .avatar-wrap { width: 118px; height: 118px; }
/* Simplistic has no card, so its Discord / widget boxes carry the card colour themselves (guns) */
.layout-simplistic .boxes > .box { background: rgba(var(--card-rgb), max(var(--card-a), .35)); border: var(--bw) solid var(--border); backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur)); }
/* Discord server widget like guns */
.w-card.w-dcserver { position: relative; align-items: center; }
.w-dcserver .ico { width: 70px; height: 70px; border-radius: 16px; flex: none; }
.w-dcserver .txt { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.w-dcserver .txt b { font-size: 17px; }
/* a long name or description ends in "…" inside the box (the name also stays clear of the Discord tag) */
.w-dcserver .txt > b, .w-dcserver .txt > small { max-width: 100%; }
.w-dcserver .txt > b { max-width: calc(100% - 56px); }
.w-dcserver .stats { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; opacity: .8; }
.w-dcserver .stats span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #8a8a8a; vertical-align: 1px; }
.w-dcserver .stats .on::before { background: #23a55a; }
.w-dcserver .w-btn { margin-top: 4px; width: auto; height: auto; padding: 3px 11px; border-radius: min(8px, calc(var(--box-r) * .32)); font-size: 12.5px; line-height: 1.4; background: #23a55a; color: #fff; }
.w-dcserver .w-btn:hover { background: #1f9150; }
.w-dcserver .dc-tag { position: absolute; top: 12px; right: 14px; display: inline-flex; align-items: center; gap: 4px; font-size: 11.3px; font-weight: 300; opacity: .45; }
/* social icons: roomy boxes (38px, 14px apart) like before; the bolder guns-style glyphs are drawn at about the old visual size, not filling the box */
.socials, body .layout-default .socials, .layout-default .socials, .layout-modern .socials, .layout-sleek .socials, .layout-simplistic .socials, .layout-portfolio .pf-hero .socials, .layout-portfolio .head-text .socials { gap: 12px 14px; }
.socials a, .layout-sleek .socials a, .layout-portfolio .pf-hero .socials a { width: 38px; height: 38px; font-size: 33px; }
.socials a .si { width: 30px; height: 30px; }
@media (max-width: 640px) { .socials, .layout-default .socials, .layout-modern .socials, .layout-sleek .socials, .layout-simplistic .socials { gap: 10px 12px; } .socials a, .layout-sleek .socials a, .layout-portfolio .pf-hero .socials a { width: 36px; height: 36px; font-size: 31px; } .socials a .si { width: 28px; height: 28px; } }

/* ---- roomier spacing: card padding, gaps between sections, buttons and boxes ---- */
main { gap: 22px; }
.layout-default .card { padding: 44px 26px 22px; }
.layout-modern .card { padding: 32px 32px 66px; }
.layout-sleek .card { padding: 32px; }
.layout-default .head, .layout-simplistic .head { gap: 16px; }
.layout-modern .head { gap: 20px; }
.layout-default .bio { margin-top: 10px; }
.layout-modern .head-text { gap: 6px; }
.loc-line { margin-top: 26px; }
.layout-default .boxes, .layout-modern .boxes, .layout-sleek main > .boxes { margin-top: 28px; }
.boxes, .layout-modern .boxes { gap: 14px; }
/* no widget showing (only the hidden Discord box): no empty block with its margin between the name and the socials */
.boxes:not(:has(> :not([hidden]))) { display: none !important; }
.layout-default .socials, .layout-sleek .socials, .layout-simplistic .socials { margin-top: 38px; }
.layout-modern .socials { margin-top: 40px; }
.layout-default .links, .layout-modern .links, .layout-sleek .links { margin-top: 28px; }
.links { gap: 14px; }
.layout-simplistic .links { margin-top: 38px; gap: 18px; }

@media (max-width: 640px) {
  main { gap: 18px; }
  .layout-default .card, .layout-sleek .card { padding: 32px 18px 18px; }
  .layout-modern .card { padding: 24px 18px 58px; }
  .layout-default .socials, .layout-sleek .socials, .layout-simplistic .socials, .layout-modern .socials { margin-top: 32px; }
  .layout-default .boxes, .layout-modern .boxes { margin-top: 24px; }
  .links { gap: 12px; }
}
/* Simplistic buttons: a crisp edge and a tighter shadow, so each button reads on its own instead of glowing into the next */
.layout-simplistic .links a { border: max(var(--bw, 0px), 1px) solid rgba(var(--text-rgb), .07); }
.layout-simplistic.btn-shadow .links a { box-shadow: 0 0 10px rgba(var(--text-rgb), .05), 0 4px 12px rgba(0, 0, 0, .3); }

/* entrance in steps, like guns: the card arrives first, then its contents follow one after another (Portfolio and Custom reveal on their own) */
@keyframes in-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.entered:not(.ent-none):not(.layout-portfolio):not(.layout-custom) :is(#card > .head, #boxes, #modules, #socials, #links, #cardFoot) { animation: in-rise .7s var(--ease) both; animation-delay: var(--st, .12s); }
#card > .head { --st: .12s; } #boxes { --st: .28s; } #modules { --st: .34s; } #socials { --st: .42s; } #links { --st: .5s; } #cardFoot { --st: .58s; }
/* Portfolio hero: a little air between the social icons and the buttons under them */
.layout-portfolio .pf-hero .links:not(:empty) { margin-top: 16px; }

/* Custom layout editing inside the dashboard's layout popup (?preview=1&edit=1): the real page, with handles on every block */
.cv-editing .layout-custom .cv > .cv-cell, .cv-editing .cv > .cv-cell { outline: 1px dashed rgba(255, 255, 255, .28); outline-offset: -1px; }
.ed-cover { position: absolute; inset: 0; z-index: 60; cursor: move; touch-action: none; border-radius: inherit; }
.cv-cell:hover > .ed-cover { background: rgba(var(--rgb), .06); }
.cv-cell.ed-sel { outline: 2px solid rgb(var(--rgb)) !important; z-index: 40 !important; }
.ed-h { position: absolute; width: 12px; height: 12px; border-radius: 4px; background: #fff; border: 2px solid rgb(var(--rgb)); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .15s; }
.cv-cell:hover .ed-h, .cv-cell.ed-sel .ed-h { opacity: 1; }
.ed-n, .ed-s { left: calc(50% - 6px); cursor: ns-resize; } .ed-e, .ed-w { top: calc(50% - 6px); cursor: ew-resize; }
.ed-n { top: 3px; } .ed-s { bottom: 3px; } .ed-e { right: 3px; } .ed-w { left: 3px; }
.ed-ne { top: 3px; right: 3px; cursor: nesw-resize; } .ed-nw { top: 3px; left: 3px; cursor: nwse-resize; } .ed-se { bottom: 3px; right: 3px; cursor: nwse-resize; } .ed-sw { bottom: 3px; left: 3px; cursor: nesw-resize; }
.cv-editing .cv > .cv-cell { overflow: hidden; }
.ed-size { position: absolute; left: 20px; top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; font: 600 11px/1.6 system-ui, sans-serif; opacity: 0; transition: opacity .15s; pointer-events: none; }
.cv-cell:hover .ed-size, .cv-cell.ed-sel .ed-size { opacity: 1; }
.ed-dragging, .ed-dragging * { user-select: none !important; }

/* Ambient lyrics (guns' look): one card holds the player and the lyrics, with the song's cover blurred behind them */
.music-card:not(.has-lyr) { display: contents; }
.music-card:not(.has-lyr) > .mc-art, .music-card:not(.has-lyr) > .mc-glow { display: none; }
.music-card.has-lyr { position: relative; isolation: isolate; width: 100%; overflow: hidden; display: grid; gap: 6px; padding: 15px; border-radius: 40px;
  background: rgba(28, 28, 28, .4); border: 2px solid rgba(39, 39, 39, .2); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); }
.music-card.has-lyr > .player { max-width: none; padding: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; overflow: visible; }
.music-card.has-lyr > .player .cover { border-radius: 30px; }
.mc-art { position: absolute; inset: -18% -18%; z-index: -2; background: center / cover no-repeat; transform: scale(1.24); filter: blur(58px) saturate(1.55) brightness(.55); opacity: .62; pointer-events: none; }
.music-card.no-art .mc-art { background: radial-gradient(circle at 30% 30%, rgba(var(--rgb), .9), transparent 60%), radial-gradient(circle at 75% 70%, rgba(var(--rgb2), .9), transparent 60%); }
.mc-glow { position: absolute; z-index: -1; width: 80%; height: 120%; border-radius: 999px; filter: blur(24px); opacity: .55; mix-blend-mode: screen; pointer-events: none; }
.mc-glow.a { left: -9%; top: -16%; background: radial-gradient(circle at 40% 45%, rgba(255, 255, 255, .5), transparent 65%); animation: mcDriftA 11s ease-in-out infinite alternate; }
.mc-glow.b { right: -15%; bottom: -20%; background: radial-gradient(circle at 50% 55%, rgba(255, 232, 207, .45), transparent 70%); animation: mcDriftB 13s ease-in-out infinite alternate; }
@keyframes mcDriftA { from { transform: rotate(18deg) translate(0, 0); } to { transform: rotate(26deg) translate(50px, 24px); } }
@keyframes mcDriftB { from { transform: rotate(-12deg) translate(0, 0); } to { transform: rotate(-20deg) translate(-50px, -20px); } }
/* the wheel: every line is placed by script (current line in the middle); its look depends on how far it is from the current one */
.lyrics.ly-wheel { position: relative;height: 300px; margin: 0; padding: 0; border-radius: 34px; overflow: hidden; background: none; border: 0; text-align: left; max-width: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ly-wheel .ly-l { position: absolute; left: 55px; right: 18px; top: 0; margin: 0; padding: 9.5px 0; white-space: normal; overflow: visible; font-size: calc(19.5px * var(--fs, 1)); font-weight: 760; line-height: 1.16;
  color: rgba(var(--text-rgb), .99); opacity: .3; filter: blur(1.6px); transform-origin: left center; cursor: pointer;
  transition: transform .44s cubic-bezier(.22, .9, .3, 1), opacity .32s, color .26s, text-shadow .26s, filter .28s; }
.ly-wheel .ly-l.past { color: rgba(var(--text-rgb), .8); }
.ly-wheel .ly-l.near { opacity: .55; filter: blur(.65px); }
.ly-wheel .ly-l.on { opacity: 1; filter: none; font-weight: 820; color: rgb(var(--text-rgb)); text-shadow: 0 1px 8px rgba(var(--text-rgb), .18); }
.ly-wheel .ly-l.far { opacity: 0; }
.ly-wheel .ly-l:hover:not(.on) { opacity: .75; filter: none; }
@media (max-width: 640px) {
  .music-card.has-lyr { border-radius: 30px; padding: 12px; }
  .lyrics.ly-wheel { height: 240px; border-radius: 24px; }
  .ly-wheel .ly-l { left: 22px; right: 12px; font-size: calc(17px * var(--fs, 1)); }
}
@media (prefers-reduced-motion: reduce) { .ly-wheel .ly-l { transition: none; } .mc-glow { animation: none; } }

/* enter screen 1:1 with guns: a dark 78% overlay with a light 15px blur, the line big, bold and steady (ours was 20px, pulsing to half opacity on a lighter overlay) */
#enter { background: rgba(0, 0, 0, .776); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
#enter span { font-size: 30px; font-weight: 700; color: #fafafa; animation: none; line-height: 1.25; }
.enter-icon { animation: none; }
.enter-sub { font-size: 15px; opacity: .7; margin-top: 6px; }

/* Portfolio classic, like guns: the avatar + name block sits in the middle of the first screen, and stays side by side on phones */
.layout-portfolio:not(.hero-centered) .pf-hero { align-items: center; }
.layout-portfolio:not(.hero-centered) .pf-hero .head { width: auto; max-width: min(760px, 100%); }
@media (max-width: 640px) {
  .layout-portfolio:not(.hero-centered) .head { flex-direction: row; text-align: left; gap: 16px; }
  .layout-portfolio:not(.hero-centered) .name-row { justify-content: flex-start; }
  .layout-portfolio:not(.hero-centered) .head-text .socials { justify-content: flex-start; }
  .layout-portfolio:not(.hero-centered) .pf-hero .avatar-wrap { width: 120px; height: 120px; flex: none; }
}

/* Sleek: the Discord / widget boxes under the card sit close to it (12px, guns ~8px; was 50px) · or inside the card with the bio when the owner picks that */
.layout-sleek main > .boxes { margin-top: -10px; }
.layout-sleek.sleek-in .card > .boxes { margin-top: 22px; display: grid; grid-template-columns: 1fr; gap: 12px; }
/* Sleek on phones: views | location flow under the bio (pinned to the bottom it covered the bio whenever a profile had no social icons) */
@media (max-width: 640px) { .layout-sleek .sleek-meta { position: static; margin-top: 12px; }}
@media (max-width: 640px) { .layout-sleek .card:has(.links:not(:empty)) { padding-bottom: 25px; } }

/* section text headings (# / ## / ###), like guns' Markdown in portfolio text */
.md .md-h { display: block; white-space: normal; font-weight: 700; line-height: 1.2; color: var(--b-text, var(--text)); }
.md .md-h1 { font-size: 1.55em; margin: .15em 0 .35em; } .md .md-h2 { font-size: 1.3em; margin: .15em 0 .3em; } .md .md-h3 { font-size: 1.12em; margin: .1em 0 .25em; }
.md .md-h + .md-p { display: block; }
/* Portfolio sections follow the card opacity like guns (0 = no boxes; a new profile's 50% looks the same as before) */
/* Portfolio: the Music module's title above the player, like the other section titles */
.layout-portfolio .pf-music > h2 { width: 100%; max-width: 704px; margin: 0 auto 16px; font-size: calc(36px * var(--fs)); font-weight: 700; line-height: 1.1; }
@media (max-width: 640px) { .layout-portfolio .pf-music > h2 { font-size: calc(28px * var(--fs)); } }

/* Portfolio projects with a picture: a full-width image card with the title over it, like guns */
.layout-portfolio .pf-sec .project.has-cover { position: relative;grid-column: 1 / -1; padding: 0; }
.layout-portfolio .pf-sec .project.has-cover .pcover { aspect-ratio: 16 / 5.5; min-height: 180px; }
.layout-portfolio .pf-sec .project.has-cover .pbody { position: absolute; inset: auto 0 0 0; padding: 48px 26px 22px; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); color: #fff; }
.layout-portfolio .pf-sec .project.has-cover b { font-size: calc(26px * var(--fs)); text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.layout-portfolio .pf-sec .project.has-cover p { opacity: .85; }
.layout-portfolio .pf-sec .project.has-cover:hover .pcover { transform: scale(1.03); }
.layout-portfolio .pf-sec .project.has-cover .pcover { transition: transform .5s var(--ease); }
@media (max-width: 640px) { .layout-portfolio .pf-sec .project.has-cover .pcover { aspect-ratio: 16 / 9; min-height: 0; } .layout-portfolio .pf-sec .project.has-cover .pbody { padding: 36px 16px 14px; } .layout-portfolio .pf-sec .project.has-cover b { font-size: calc(20px * var(--fs)); } }
/* Lines lyrics: the wheel centred under the player, no card (floats over the page) */
.lyrics.ly-wheel.ly-plain { height: 220px; max-width: 640px; margin: 6px auto 0; border-radius: 0; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.ly-wheel.ly-plain .ly-l { left: 0; right: 0; text-align: center; transform-origin: center; }
@media (max-width: 640px) { .lyrics.ly-wheel.ly-plain { height: 190px; } .ly-wheel.ly-plain .ly-l { left: 8px; right: 8px; } }

/* ===== Portfolio sections like guns: markdown lists and quotes, skill pills with logos, Skills & Stack groups,
   Read more, one About card in the middle, and the step-by-step reveal ===== */
/* markdown blocks: lists 18px in with 4px between items, quotes with a 2px line and slightly bigger text (guns' sizes) */
.md .md-list { margin: 8px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; white-space: normal; }
.md .md-q { display: block; margin: 8px 0; padding: 4px 0 4px 14px; border-left: 2px solid currentColor; font-size: 1.1em; }
.md > .md-list:first-child, .md > .md-q:first-child, .md-in > .md-list:first-child, .md-in > .md-q:first-child { margin-top: 0; }
.md > .md-list:last-child, .md > .md-q:last-child, .md-in > .md-list:last-child, .md-in > .md-q:last-child { margin-bottom: 0; }
.mod-about .md a { text-underline-offset: 3px; }
/* Custom Text: links are small pills, like guns */
/* inline, so a long label wraps like text and each line gets its own pill (an inline-flex pill turned into one big rounded blob) */
.mod-custom .md a { display: inline; padding: 1px 8px; border-radius: 999px; background: rgba(var(--text-rgb), .08); border: 1px solid rgba(var(--text-rgb), .14); color: var(--text); text-decoration: none;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mod-custom .md a:hover { background: rgba(var(--text-rgb), .14); }

/* skill pills: the tech's logo (brand color, or the text color with Monochrome Icons) and its name */
.sk-row { display: flex; flex-wrap: wrap; gap: 10px; }
.sk-tags { margin-top: 14px; }
.mod[data-align="center"] .sk-row, .mod[data-align="center"] .pj-tags { justify-content: center; }
.mod[data-align="right"] .sk-row, .mod[data-align="right"] .pj-tags { justify-content: flex-end; }
.sk-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--radius, 40px); font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--text);
  background: rgba(var(--card-rgb), var(--card-a)); border: max(var(--bw), 2px) solid var(--border); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); }
.sk-ic { width: 15px; height: 15px; flex: 0 0 15px; display: block; }
.sk-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; }

/* Skills & Stack: one card, the skills in two columns of groups (Frontend, Backend, Tools, Design, Platforms) */
.layout-portfolio .pf-sec .sk-card { padding: 28px; border-radius: var(--radius); background: rgba(var(--card-rgb), var(--card-a)); border: max(var(--bw), 2px) solid var(--border);
  backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); }
.sk-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sk-group { min-width: 0; }
.sk-group h3 { margin: 0 0 8px; font-size: 16px; font-weight: 650; color: rgba(var(--text-rgb), .7); }
/* inside the card the pills are a quieter tint, so the card and the pills don't stack two glass layers */
.sk-card .sk-pill { background: rgba(var(--text-rgb), .06); border: 1px solid rgba(var(--text-rgb), .1); backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 720px) { .sk-groups { grid-template-columns: minmax(0, 1fr); } .layout-portfolio .pf-sec .sk-card { padding: 20px; } }

/* project tags: small logo pills, pinned to the top-left corner of the picture (guns) */
.project { position: relative; }
.pj-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.project.has-cover > .pj-tags { order: 3; margin: -6px 14px 14px; }   /* other layouts: under the text */
/* Portfolio's picture card is a small grid: the tags on top, the text at the bottom, the picture behind both. When the tags and text
   need more room than the picture (a narrow phone, six tags), the card grows instead of the tags covering the title. */
.layout-portfolio .pf-sec .project.has-cover { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
.layout-portfolio .pf-sec .project.has-cover > .pcover { grid-area: 1 / 1 / 4 / 2; }
.layout-portfolio .pf-sec .project.has-cover > .pj-tags { grid-area: 1 / 1 / 2 / 2; order: 0; position: relative; z-index: 2; align-self: start; margin: 12px 12px 0; }
.layout-portfolio .pf-sec .project.has-cover > .pbody { grid-area: 3 / 1 / 4 / 2; position: relative; inset: auto; z-index: 1; }
.pj-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--text);
  background: rgba(var(--text-rgb), .08); border: 1px solid rgba(var(--text-rgb), .14); }
.project.has-cover .pj-tag { color: #fff; background: rgba(0, 0, 0, .45); border-color: rgba(255, 255, 255, .16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pj-ic { width: 12px; height: 12px; flex: 0 0 12px; display: block; }
.pj-tag .sk-dot { width: 7px; height: 7px; flex-basis: 7px; }

/* Custom Text longer than 9 lines folds behind "Read more" (guns: the cut fades out, the button sits under it) */
.md-in { overflow: hidden; transition: max-height .56s cubic-bezier(.2,.7,.2,1); }
.md-in.md-fold { -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
.read-more { margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 12px; border-radius: min(var(--radius, 12px), 14px);
  background: rgba(var(--text-rgb), .08); border: 1px solid rgba(var(--text-rgb), .14); color: var(--text); font: inherit; font-size: 15px; cursor: pointer; transition: background .15s; }
.read-more:hover { background: rgba(var(--text-rgb), .14); }
.read-more[hidden] { display: none; }

/* About: the title block keeps guns' 8px to its subtitle (16px text), one card sits in the middle at 38rem */
.layout-portfolio .pf-sec .mod .mod-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.layout-portfolio .pf-sec .mod .mod-head h2 { margin: 0; }
.layout-portfolio .pf-sec .mod .mod-head .mod-sub { margin: 0; font-size: 16px; line-height: 1.55; opacity: .7; }
.layout-portfolio .pf-sec .mod-cards[data-count="1"] { grid-template-columns: minmax(0, 38rem); justify-content: center; }
/* the Discord box's "last seen 13 minutes ago" is italic, like guns */
.pres-seen { font-style: italic; }

/* the reveal: parts with a reveal order stay hidden until their section plays (zero specificity, so a part's own
   states, like "Scroll for more" fading out, still win once it has landed); the page itself no longer fades in as one */
:where(body.pf-rv [data-rv]:not(.rv-shown)) { opacity: .001; }
body.layout-portfolio.pf-rv.entered main { animation: none; opacity: 1; }

/* ===== the player's lyrics button (opens fullscreen lyrics) ===== */

.ly-btn { font-size: 14px; }
/* one song: previous / next do nothing, so phones drop them and the title gets the room back */
@media (max-width: 640px) { .player.solo #prevBtn, .player.solo #nextBtn { display: none; } }

/* ===== Custom: the lyrics are a block of their own — the wheel fills it; Ambient puts the song's cover blurred behind it ===== */
.layout-custom .cv-cell.k-lyrics > .lyrics { position: relative; z-index: 1; width: 100%; max-width: none; margin: 0; padding: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.layout-custom .cv-cell.k-lyrics > .lyrics.ly-wheel { flex: 1 1 auto; height: auto; min-height: 0; border-radius: 0; }
.layout-custom .cv.cv-flow > .cv-cell.k-lyrics { position: relative; }
.layout-custom .cv.cv-flow > .cv-cell.k-lyrics > .lyrics.ly-wheel { flex: none; height: 220px; }
.layout-custom .cv-cell.k-lyrics:has(> .ly-amb)::before { content: ""; position: absolute; inset: -40px; z-index: 0; pointer-events: none;
  background: var(--ly-art, none) center / cover no-repeat; filter: blur(36px) saturate(1.45) brightness(.62); }
/* the wheel scrolls itself; the block around it never does (the blurred cover reaches past its edges) */
.layout-custom .cv > .cv-cell.k-lyrics { overflow: hidden; }
/* views / location at the foot of the profile block (pinned to the page corner, they lay over the other blocks) */
.layout-custom .cv-cell.k-profile > .card-foot { position: static; z-index: auto; justify-content: center; margin: 14px 0 0; padding: 0; border: 0; border-radius: 0;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: calc(14px * var(--fs)); }
/* no lyrics for the song playing: the block steps aside (the editor keeps it, so it can still be placed) */
.layout-custom .cv > .cv-cell.cv-empty { display: none; }
.layout-custom.cv-editing .cv > .cv-cell.k-lyrics.cv-empty { display: flex; }
.layout-custom.cv-editing .cv > .cv-cell.k-lyrics.cv-empty::after { content: "Lyrics"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 600; opacity: .5; }

/* ===== fullscreen lyrics: the song's cover huge and blurred behind big synced lines, the player's controls underneath ===== */
html.lf-lock { overflow: hidden; }
.ly-full { position: fixed; inset: 0; z-index: 400; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: #fff; background: #050505; overflow: hidden; isolation: isolate;
  opacity: 0; transition: opacity .38s ease; }
.ly-full.open { opacity: 1; }
.ly-full[hidden] { display: none; }
.lf-bg { position: absolute; inset: -14%; z-index: -1; background: var(--ly-art, none) center / cover no-repeat; filter: blur(80px) saturate(1.6) brightness(.5); transform: scale(1.15); }
.lf-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 0%, rgba(0, 0, 0, .55) 78%); }
.lf-top { display: flex; align-items: center; gap: 14px; padding: max(18px, env(safe-area-inset-top)) clamp(18px, 4vw, 44px) 10px; }
.lf-art { width: 54px; height: 54px; flex: none; border-radius: 12px; background: rgba(255, 255, 255, .1) var(--ly-art, none) center / cover no-repeat; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.lf-meta { min-width: 0; display: grid; gap: 2px; }
.lf-meta b { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-meta span { font-size: 14px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-meta span:empty { display: none; }
.lf-x { margin-left: auto; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 18px; cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .15s, transform .15s; }
.lf-x:hover { background: rgba(255, 255, 255, .22); transform: scale(1.05); }
.lf-x:focus-visible, .lf-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ly-full .lf-lines.lyrics.ly-wheel { --ly-gap: 26px; height: auto; width: min(1040px, 100%); max-width: none; margin: 0 auto; padding: 0; border-radius: 0;
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.ly-full .lf-lines .ly-l { left: clamp(18px, 4vw, 44px); right: clamp(18px, 4vw, 44px); font-size: clamp(26px, 4.6vw, 54px); font-weight: 800; line-height: 1.14; letter-spacing: -.015em;
  color: #fff; opacity: .28; filter: blur(2px); text-shadow: none; transform-origin: left center; }
.ly-full .lf-lines .ly-l.near { opacity: .5; filter: blur(.8px); }
.ly-full .lf-lines .ly-l.on { opacity: 1; filter: none; text-shadow: 0 0 28px rgba(255, 255, 255, .28); }
.ly-full .lf-lines .ly-l.far { opacity: 0; }
.ly-full .lf-lines .ly-l:hover:not(.on) { opacity: .7; filter: none; }
.lf-none { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 20px; opacity: .6; }
.lf-foot { display: grid; justify-items: center; gap: 14px; padding: 10px clamp(18px, 4vw, 44px) max(26px, env(safe-area-inset-bottom)); }
.lf-ctl { display: flex; align-items: center; gap: 22px; }
.lf-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: #fff; font-size: 20px; cursor: pointer; transition: transform .15s, opacity .15s; }
.lf-btn:hover { transform: scale(1.1); }
.lf-btn:disabled { opacity: .3; cursor: default; transform: none; }
.lf-btn.lf-play { width: 62px; height: 62px; background: #fff; color: #111; font-size: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.lf-time { width: min(560px, 100%); display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-variant-numeric: tabular-nums; opacity: .85; }
.lf-bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .22); cursor: pointer; overflow: hidden; }
.lf-bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: inherit; }
@media (max-width: 640px) { .ly-full .lf-lines .ly-l { font-size: clamp(22px, 7vw, 32px); } .lf-ctl { gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .ly-full { transition: none; } }

/* long unbroken text (a pasted URL in the bio, a 32-letter name, a 40-letter button label) wraps or trims
   inside the card instead of pushing the page sideways */
#displayName, .bio, .joined, .layout-simplistic .links a span { overflow-wrap: anywhere; }
#displayName { max-width: 100%; }
.links a { min-width: 0; }
.layout-default .links a { min-width: min(278px, 100%); }
.layout-simplistic .links a small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layout-simplistic .links a small i { margin-right: 3px; }/* the footer line (views · location) stays one line; a long location trims with … */
.card-foot, .sleek-meta { max-width: 100%; min-width: 0; }
.layout-modern .card-foot { max-width: calc(100% - 36px); }
.foot-item { min-width: 0; }
#loc, .loc-clone > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---------- status line under the name ---------- */
.status-line { margin: 2px 0 8px; min-width: 0; max-width: 100%; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 12px 5px 10px; border-radius: 999px; font-size: calc(13px * var(--fs, 1)); font-weight: 550; line-height: 1.3;
  color: rgba(var(--text-rgb), .82); background: rgba(var(--text-rgb), .06); border: 1px solid rgba(var(--text-rgb), .08); }
.status-emoji { flex: none; font-size: 1.08em; line-height: 1; }
.status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-pill:not(:has(.status-text)) { padding: 5px 9px; }
.layout-sleek .status-line { margin: 4px 0 6px; }

/* ---------- featured link buttons ---------- */
@property --lk-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.links a.featured { position: relative; isolation: isolate; gap: 14px; padding: 12px 18px 12px 12px; }
.links a.featured::before { content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--lk-a), transparent 0 52%, rgba(var(--rgb), .95) 74%, rgba(var(--rgb), .25) 86%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: lk-spin 5s linear infinite; }
@keyframes lk-spin { to { --lk-a: 360deg; } }
.links a.featured .lk-img, .links a.featured .lk-tile { flex: none; width: 52px; height: 52px; border-radius: max(8px, calc(var(--radius, 20px) * .55)); object-fit: cover; }
.links a.featured .lk-tile { display: grid; place-items: center; font-size: 19px; background: rgba(var(--rgb), .16); color: var(--light, #fff); }
.links a.featured .lk-body { min-width: 0; display: grid; gap: 2px; text-align: left; }
.links a.featured .lk-title { font-weight: 650; font-size: 1.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.links a.featured .lk-sub { font-style: normal; font-weight: 500; font-size: .85em; opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layout-simplistic .links a.featured { flex-direction: row; justify-content: flex-start; text-align: left; }
.layout-simplistic .links a.featured > i:last-child { display: block; }
@media (prefers-reduced-motion: reduce) { .links a.featured::before { animation: none; --lk-a: 200deg; } }

/* ---------- gallery widget + viewer ---------- */
.w-gallery { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 6px; padding: 10px; }
.w .w-label + .w-gallery { padding-top: 10px; }
.wg-item { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: max(6px, calc(var(--radius, 20px) * .55)); overflow: hidden; cursor: zoom-in; background: rgba(var(--text-rgb), .06); }
.w-gallery[style*="--cols: 1"] .wg-item { aspect-ratio: 16 / 10; }
.wg-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--ease, ease), filter .3s; }
.wg-item:hover img { transform: scale(1.045); }
.wg-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wg-item:has(.wg-more) { container-type: inline-size; }
/* the count grows with the tile: small in a narrow column, larger on Portfolio's wide tiles */
.wg-more { position: absolute; inset: 0; border-radius: inherit; display: grid; place-items: center; font-size: clamp(18px, 20cqi, 36px); font-weight: 700; color: #fff; background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); }
.lbx { position: fixed; inset: 0; z-index: 270; display: grid; place-items: center; padding: 56px 16px; background: rgba(0, 0, 0, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity .25s; }
.lbx.open { opacity: 1; }
.lbx-img { max-width: min(1100px, 100%); max-height: 100%; border-radius: 14px; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); transform: scale(.97); transition: transform .3s var(--ease, ease); user-select: none; }
.lbx.open .lbx-img { transform: none; }
.lbx-btn { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .08); color: #fff; font-size: 16px; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.lbx-btn:hover { background: rgba(255, 255, 255, .16); }
.lbx-x { top: 14px; right: 14px; }
.lbx-prev { left: 14px; top: 50%; translate: 0 -50%; }
.lbx-next { right: 14px; top: 50%; translate: 0 -50%; }
.lbx-count { position: absolute; bottom: 18px; left: 50%; translate: -50% 0; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .lbx-prev, .lbx-next { top: auto; bottom: 8px; translate: none; } .lbx-count { bottom: 20px; } }

/* ---------- sensitive content notice ---------- */
.leave.cw { z-index: 280; background: rgba(0, 0, 0, .84); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); }
.leave.cw .leave-card { padding: 26px 22px 22px; }
.cw-mark { justify-self: center; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: rgba(var(--rgb), .16); color: var(--light, #fff); margin-bottom: 2px; }
body.cw-open #enter { visibility: hidden; }

/* ---------- avatar glows with the beat ---------- */
.avatar-pulse .avatar-wrap { scale: calc(1 + var(--pulse, 0) * .04); filter: drop-shadow(0 0 calc(var(--pulse, 0) * 24px) rgba(var(--rgb), calc(var(--pulse, 0) * .85))); will-change: scale, filter; }
@media (prefers-reduced-motion: reduce) { .avatar-pulse .avatar-wrap { scale: none; } }
/* a half-width box with no partner beside it takes the whole row (profile.js pairBoxes) */
.boxes > .box.lone { grid-column: 1 / -1; }

/* ===== Elements: each part's background, blur and outline on its own (dashboard: Advanced > Element Customization) =====
   The switches are on by default and these rules only take away, so a page that never touched them looks the same.
   Custom layout: the block is the surface, so it follows too; a block's own picture stays. */
body.el-mod-bd .mod .md, body.el-mod-bd .project, body.el-mod-bd .xp-row, body.el-mod-bd .quote, body.el-mod-bd .sk-card, body.el-mod-bd .sk-pill, body.el-mod-bd .cv-cell.k-module { border-color: var(--el-mod-bd) !important; }
body.el-pl-bd .player, body.el-pl-bd .music-card.has-lyr, body.el-pl-bd .cv-cell.k-player, body.el-pl-bd .cv-cell.k-lyrics { border-color: var(--el-pl-bd) !important; }
body.el-st-bd .status-pill { border-color: var(--el-st-bd) !important; }
body.el-bdg-bd .badges { border-color: var(--el-bdg-bd) !important; }

/* a box or player inside a block or the music card has no border of its own: the block or card carries it */
body.el-box-lw .box:not(.cv-cell > *), body.el-box-lw .cv-cell.k-widget, body.el-box-lw .cv-cell.k-presence { border-width: var(--el-box-lw) !important; border-style: solid !important; }
body.el-mod-lw .mod .md, body.el-mod-lw .project, body.el-mod-lw .xp-row, body.el-mod-lw .quote, body.el-mod-lw .sk-card, body.el-mod-lw .sk-pill, body.el-mod-lw .cv-cell.k-module { border-width: var(--el-mod-lw) !important; border-style: solid !important; }
body.el-btn-lw .links a { border-width: var(--el-btn-lw) !important; border-style: solid !important; }
body.el-pl-lw .player:not(.cv-cell > *):not(.music-card.has-lyr > *), body.el-pl-lw .music-card.has-lyr, body.el-pl-lw .cv-cell.k-player, body.el-pl-lw .cv-cell.k-lyrics { border-width: var(--el-pl-lw) !important; border-style: solid !important; }
body.el-st-lw .status-pill { border-width: var(--el-st-lw) !important; }
body.el-bdg-lw .badges { border-width: var(--el-bdg-lw) !important; }

body.el-box-nobg .box, body.el-box-nobg .cv-cell.k-widget, body.el-box-nobg .cv-cell.k-presence { background-color: transparent !important; }
body.el-mod-nobg .mod .md, body.el-mod-nobg .project, body.el-mod-nobg .xp-row, body.el-mod-nobg .quote, body.el-mod-nobg .sk-card, body.el-mod-nobg .sk-pill, body.el-mod-nobg .cv-cell.k-module { background-color: transparent !important; }
body.el-btn-nobg .links a, body.el-btn-nobg .cv-cell.k-links { background-color: transparent !important; }
body.el-pl-nobg .player, body.el-pl-nobg .music-card.has-lyr, body.el-pl-nobg .cv-cell.k-player, body.el-pl-nobg .cv-cell.k-lyrics { background-color: transparent !important; }
body.el-st-nobg .status-pill { background: none !important; }
body.el-bdg-nobg .badges { background: none !important; }
body.el-foot-nobg .card-foot { background: none !important; }

body.el-box-noblur .box, body.el-box-noblur .cv-cell.k-widget, body.el-box-noblur .cv-cell.k-presence,
body.el-mod-noblur .mod, body.el-mod-noblur .mod .md, body.el-mod-noblur .project, body.el-mod-noblur .sk-card, body.el-mod-noblur .sk-pill, body.el-mod-noblur .cv-cell.k-module,
body.el-btn-noblur .links a, body.el-btn-noblur .cv-cell.k-links,
body.el-pl-noblur .player, body.el-pl-noblur .music-card.has-lyr, body.el-pl-noblur .lyrics, body.el-pl-noblur .cv-cell.k-player, body.el-pl-noblur .cv-cell.k-lyrics,
body.el-foot-noblur .card-foot { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

body.el-box-noline .box, body.el-box-noline .cv-cell.k-widget, body.el-box-noline .cv-cell.k-presence,
body.el-mod-noline .mod .md, body.el-mod-noline .project, body.el-mod-noline .xp-row, body.el-mod-noline .quote, body.el-mod-noline .sk-card, body.el-mod-noline .sk-pill, body.el-mod-noline .cv-cell.k-module,
body.el-btn-noline .links a, body.el-btn-noline .cv-cell.k-links,
body.el-pl-noline .player, body.el-pl-noline .music-card.has-lyr, body.el-pl-noline .cv-cell.k-player, body.el-pl-noline .cv-cell.k-lyrics,
body.el-st-noline .status-pill, body.el-bdg-noline .badges, body.el-foot-noline .card-foot { border-color: transparent !important; }
/* the moving borders are drawn over the outline, so they go with it */
body.el-box-noline.bdr-shimmer .card .presence::before, body.el-pl-noline.bdr-shimmer .player::before, body.el-btn-noline .links a.featured::before, .links a.featured.no-outline::before { content: none; }
body.el-box-noline.bdr-pulse .card .presence, body.el-pl-noline.bdr-pulse .player { animation: none !important; }