:root{--ink:#fff6fd;--muted:#f4dfe9;--soft:#f6d0e6;--plum:#4e3e63;--panel:#514862e3;--pink:#edc1de;--shadow:rgba(79,51,94,.16)}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:Inter,'Segoe UI',Arial,sans-serif;background:#f9f0f8;color:var(--ink);overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit}
.wallpaper{position:fixed;z-index:0;inset:-2px;background-color:#f9f0f8;background-image:url('./assets/background-pixel.gif');background-repeat:repeat;background-position:center top;background-size:1253px 704px;pointer-events:none}
.petals-layer{position:fixed;z-index:7;inset:0;overflow:hidden;pointer-events:none}
.steam-shell{position:relative;z-index:2;width:min(calc(100% - 36px),1000px);margin:0 auto;padding:17px 0 55px}
/* Steam-inspired free-floating header — no long glass rectangle */
.profile-head{display:grid;grid-template-columns:95px minmax(0,1fr) auto;align-items:start;gap:13px;min-height:114px;padding:5px 12px 4px;background:transparent;border:none;box-shadow:none}
.avatar-frame{width:95px;height:95px;overflow:hidden;background:#c0adc6;border:2px solid #f8e5f4;box-shadow:0 2px 0 #8c6e9c,0 6px 20px rgba(74,57,85,.15)}
.avatar-frame img{width:100%;height:100%;display:block;object-fit:cover}
.profile-meta{padding-top:7px;color:#51405e;text-shadow:0 1px 0 rgba(255,255,255,.75),0 0 8px #fff7ff}
.name-line{display:flex;gap:7px;align-items:center}.name-line h1{font-weight:650;font-size:29px;line-height:1.1;margin:0;letter-spacing:-.8px}.name-caret{font-size:11px;color:#79698a;margin-top:5px}
.handle{font-size:14px;font-weight:600;margin:5px 0 2px}.tagline{font-size:12px;font-weight:500;margin:4px 0;color:#665273}
.level-wrap{display:flex;align-items:center;align-self:start;gap:7px;padding-top:11px;color:#584765;text-shadow:0 1px 1px #fff7fe;white-space:nowrap}
.level-label{font-size:15px;line-height:31px;height:31px}.level-badge{border:2px solid #e6acd3;background:rgba(244,225,240,.72);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;color:#624d70}
.main-grid{display:grid;grid-template-columns:minmax(0,1.58fr) minmax(250px,.64fr);gap:13px;margin-top:20px;align-items:stretch}
.left-column{display:flex;flex-direction:column;gap:14px;min-width:0}
/* Retro Windows 95/98 bevel in lilac, minimal title bars */
.window-panel{min-width:0;position:relative;background:linear-gradient(155deg,rgba(99,80,112,.87),rgba(80,65,99,.84));border-style:solid;border-width:2px;border-color:#f3dff3 #867291 #766480 #f5e2f4;box-shadow:inset 1px 1px 0 rgba(255,255,255,.25),inset -1px -1px 0 rgba(48,35,64,.28),3px 5px 0 rgba(125,98,136,.1),0 16px 27px var(--shadow);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.win-titlebar{height:28px;display:flex;align-items:center;justify-content:space-between;padding:3px 5px 3px 9px;background:linear-gradient(90deg,rgba(151,126,169,.77),rgba(213,183,213,.66));border-bottom:1px solid rgba(44,29,64,.35);user-select:none}
.win-caption{font:600 12px 'Segoe UI',Arial,sans-serif;color:#fff8fd;letter-spacing:.15px;text-shadow:1px 1px 0 rgba(72,50,92,.32)}
.win-controls{display:flex;gap:3px}.win-controls i{font-style:normal;width:17px;height:17px;display:flex;align-items:center;justify-content:center;color:#5b4566;background:#f0deee;border:1px solid;border-color:#fff6ff #786486 #786486 #fff6ff;font:700 12px monospace;line-height:1}
.showcase{display:flex;flex-direction:column;min-height:342px}
.showcase-media{position:relative;min-height:310px;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:34px 40px;background:radial-gradient(ellipse at 50% 41%,rgba(250,230,248,.84),rgba(228,207,234,.56) 53%,rgba(196,174,211,.35) 100%);border-top:1px solid rgba(255,255,255,.12)}
.showcase-media::before{content:'';position:absolute;inset:14px;border:1px solid rgba(255,247,254,.36);box-shadow:inset 0 0 0 1px rgba(118,90,138,.11);pointer-events:none}
.showcase-card{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:none;border:none;box-shadow:none;width:100%;max-width:480px;color:#584469;padding:8px}
.showcase-card.changing{animation:softPop .35s ease}
.showcase-card h2{font-size:clamp(24px,3vw,35px);letter-spacing:-.8px;margin:0;line-height:1.16;font-weight:700;color:#58436b;text-shadow:0 1px 0 #fff7ff}
.showcase-card p{font-size:14px;line-height:1.55;max-width:36ch;margin:13px auto 0;color:#756186;font-weight:500}
.showcase-button{margin-top:23px;border:1px solid;border-color:#fff5fd #b997b6 #b997b6 #fff5fd;background:linear-gradient(180deg,#f7dced,#e9c0dd);box-shadow:2px 3px 0 rgba(120,83,127,.23);color:#674871;padding:11px 22px;font-size:13px;font-weight:700;border-radius:5px;min-height:42px;cursor:pointer;transition:transform .15s ease,filter .15s ease}
.showcase-button:hover{filter:brightness(1.06);transform:translateY(-2px)}.showcase-button:active{transform:translateY(1px)}
.spark{position:absolute;z-index:1;color:rgba(178,132,180,.42);font-size:25px;user-select:none;pointer-events:none}.spark-one{top:35px;left:50px}.spark-two{bottom:35px;right:55px}.spark-three{top:35px;right:74px;font-size:20px}
.badge-panel{height:179px;display:flex;flex-direction:column}
.badge-row{flex:1;display:flex;align-items:center;justify-content:center;gap:13px;padding:16px 20px}
.flower-badge{width:58px;height:58px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:7px;border:1px solid;border-color:#f2d6ea #8d7799 #8d7799 #f2d6ea;box-shadow:inset 1px 1px 0 rgba(255,255,255,.16),2px 2px 0 rgba(57,37,67,.14);background:rgba(232,191,218,.23);color:#ffd5eb;font-size:32px;cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease}
.flower-badge:hover{transform:translateY(-3px);background:rgba(250,217,239,.39)}
.flower-badge.active{background:rgba(246,206,231,.49);box-shadow:inset 0 0 0 2px #f5c8e6,0 0 0 1px #7c617d;color:#fff0fa}
.right-panel{min-height:100%;display:flex;flex-direction:column}.right-body{padding:13px 12px 16px;flex:1}
.status-card{padding:0 0 15px;color:#f4d9eb}.status-card p{font-size:14px;margin:0}
.stat-block{padding-bottom:12px}.aside-title{font-size:14px;font-weight:600;margin:0;color:#fff6fd}.aside-title span{font-weight:500;font-size:23px;color:#f7e8f7;margin-left:4px}
.favorite-icons{display:flex;gap:14px;align-items:center;margin:10px 0 4px;color:#ffd6eb;font-size:25px}
.steam-links{display:flex;flex-direction:column;gap:0}.link-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center;padding:12px 1px;border-top:1px solid rgba(248,218,238,.24);transition:background .16s ease,padding .16s ease}
.link-item.live:hover{background:rgba(250,218,242,.13);padding-left:8px}
.link-main{display:flex;flex-direction:column;gap:4px}.link-name{font-weight:600;color:#fff6fc;font-size:14px}.link-caption{color:#e6ccdf;font-size:11px;line-height:1.4}.link-number{font-size:13px;color:#ffe4f2}.link-number:empty{display:none}
.group-card{padding-top:12px;border-top:1px solid rgba(248,218,238,.24)}.group-card p{margin:10px 0 0;color:#eed7e7;font-size:12px;line-height:1.7}
.petal{position:absolute;top:-9vh;font-size:18px;color:#dd8cbb;opacity:0;animation:fall linear forwards;text-shadow:0 0 5px #fff0fc}
@keyframes fall{0%{transform:translate3d(0,-10vh,0) rotate(0deg);opacity:0}8%{opacity:.8}100%{transform:translate3d(var(--drift),112vh,0) rotate(280deg);opacity:0}}
@keyframes softPop{0%{opacity:.55;transform:translateY(7px)}100%{opacity:1;transform:translateY(0)}}
button:focus-visible,a:focus-visible{outline:3px solid #f9bfdc;outline-offset:3px}
@media(min-width:1600px){.wallpaper{background-size:1253px 704px;background-position:center top}}
@media(max-width:800px){.steam-shell{width:min(calc(100% - 28px),680px);padding-top:16px}.main-grid{grid-template-columns:minmax(0,1fr);margin-top:13px}.showcase{min-height:320px}.showcase-media{min-height:288px}.right-panel{min-height:0}.profile-head{grid-template-columns:86px 1fr auto;min-height:100px;gap:11px;padding:3px 2px}.avatar-frame{height:85px;width:85px}.name-line h1{font-size:26px}.level-wrap{padding-top:9px}}
@media(max-width:480px){.wallpaper{background-size:900px auto;background-position:center top}.steam-shell{width:calc(100% - 22px);padding-top:12px}.profile-head{grid-template-columns:72px minmax(0,1fr) auto;gap:9px;min-height:90px;padding:1px 1px}.avatar-frame{width:72px;height:72px}.profile-meta{padding-top:3px}.name-line h1{font-size:23px}.handle{font-size:12px}.tagline{font-size:11px}.level-wrap{gap:4px;padding-top:4px}.level-label{font-size:11px;line-height:25px;height:25px}.level-badge{height:25px;width:25px;font-size:11px}.main-grid{gap:11px;margin-top:10px}.left-column{gap:11px}.showcase{min-height:297px}.showcase-media{min-height:267px;padding:29px 17px}.showcase-media::before{inset:9px}.showcase-card h2{font-size:24px}.showcase-card p{font-size:13px}.showcase-button{font-size:12px;padding:9px 14px}.badge-panel{height:139px}.badge-row{gap:6px;padding:10px 5px}.flower-badge{width:48px;height:48px;font-size:27px}.right-body{padding:15px 13px}.spark-one{left:27px}.spark-three{right:30px}}
@media(max-width:350px){.flower-badge{width:43px;height:43px;font-size:25px}.badge-row{gap:4px}.level-label{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.wallpaper{background-image:url('./assets/background-pixel-still.png')}}




/* ===== V5 adjustments ===== */
/* True seamless pixel pattern. The tile wraps perfectly at all edges. */
.wallpaper {
  inset:0;
  background-color:#faf1f7;
  background-image:url('./assets/background-pixel.gif');
  background-size:1040px 660px;
  background-position:0 0;
  background-repeat:repeat;
  image-rendering:pixelated;
  animation:wallpaperPan 95s linear infinite;
}
@keyframes wallpaperPan {to {background-position:1040px 0}}
/* No underline, no doubled bottom edge under the avatar. */
.avatar-frame{
  border:1px solid #a88eae;
  background:#e8d9eb;
  box-shadow:0 5px 13px rgba(90,65,107,.14);
  outline:none;
  padding:0;
  display:block;
}
.avatar-frame img{height:100%;width:100%;display:block;object-fit:cover;border:0;vertical-align:top}
/* A clearer, prettier single-surface featured window, without an inner panel. */
.showcase{min-height:344px}
.showcase-media{
  min-height:315px;
  background:linear-gradient(132deg,#e7d6ea 0%,#f1e4f2 48%,#e5d5eb 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.38);
  padding:20px 25px;
}
.showcase-media::before{
  inset:14px;
  border:1px solid rgba(159,126,177,.38);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.27);
}
.showcase-media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 8% 19%,rgba(255,255,255,.5),transparent 16%),radial-gradient(circle at 93% 87%,rgba(221,202,234,.55),transparent 22%);
}
.showcase-card{
  position:relative;z-index:2;
  color:#665475;
  gap:0;
  width:100%;max-width:450px;
  padding:12px 10px;
}
.showcase-heart{
  height:46px;width:46px;display:grid;place-items:center;
  font-family:Georgia,serif;font-size:37px;line-height:1;
  color:#a58ab4; text-shadow:2px 2px #fff9ff;
  margin:0 auto 13px;
}
.showcase-card h2{
  font-size:clamp(23px,2.45vw,30px);line-height:1.2;
  letter-spacing:-.6px;font-weight:650;color:#604d70;
  margin:0;text-shadow:0 1px rgba(255,255,255,.72);
}
.showcase-card p{
  font-size:13px;line-height:1.5;color:#887092;
  font-weight:500;margin:8px auto 0;max-width:40ch;
}
.showcase-divider{display:flex;gap:17px;align-items:center;justify-content:center;margin-top:14px;color:#baa1c6;font-size:11px}
.showcase-divider span:nth-child(2){color:#d5a7c7;font-size:17px}
.showcase-button{
  margin-top:13px;
  color:#685274;
  border-radius:20px;
  border:1px solid #c4a4c9;
  background:linear-gradient(180deg,#fff6fd,#f3d9ed);
  box-shadow:0 3px 0 #cfb6d8,0 8px 18px rgba(117,83,127,.08);
  font-weight:650; padding:9px 19px; min-height:38px;
}
.showcase-hint{display:block;margin-top:12px;font-size:11px;color:#9d85a9;letter-spacing:.03em}
.showcase-hint:empty{display:none}
.showcase-decoration{position:absolute;z-index:1;font-size:19px;color:#c5afd2;opacity:.62;pointer-events:none}
.decoration-a{top:29px;left:42px}.decoration-b{right:45px;bottom:28px;color:#d9b4ca}.decoration-c{right:55px;top:35px}
/* Pixel pointer from the user, recolored lavender & sized down. */
html,body,a,button,.flower-badge{cursor:url('./assets/pixel-cursor-violet.png') 3 3,auto!important}
@media(max-width:800px){.showcase{min-height:325px}.showcase-media{min-height:298px}}
@media(max-width:480px){
  .wallpaper{background-size:780px 495px;animation-name:wallpaperPanMobile}
  .showcase-media{min-height:275px;padding:16px}
  .showcase-card h2{font-size:24px}
  .showcase-heart{height:38px;font-size:30px;margin-bottom:7px}
  .showcase-divider{margin-top:9px}
  .showcase-button{margin-top:8px}
  .showcase-hint{margin-top:7px}
  .showcase-decoration{font-size:14px}
}
@keyframes wallpaperPanMobile{to{background-position:780px 0}}
@media(prefers-reduced-motion:reduce){
  .wallpaper{animation:none;background-image:url('./assets/background-pixel-still.png')}
}

/* V6 — Windows pastel audio mini player, with no oversized heart illustration */
.showcase-heart{display:none!important}
.showcase{min-height:465px}
.showcase-media{min-height:435px;padding:20px 27px}
.showcase-card{max-width:530px;padding:14px 10px 11px}
.showcase-card h2{font-size:clamp(23px,2.35vw,29px)}
.showcase-card p{margin-top:6px}
.music-widget{
  position:relative; width:min(100%,398px); color:#594766;
  margin:18px auto 0;text-align:left;
  background:#ecdfef; border:1px solid;
  border-color:#fffafd #82708c #82708c #fffafd;
  box-shadow:2px 3px 0 rgba(83,65,96,.15);
}
.music-top{height:24px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 9px;background:linear-gradient(90deg,#a48cab,#c2acc9);color:#fff7ff;font:700 11px 'Segoe UI',Arial,sans-serif;letter-spacing:.2px;box-shadow:inset 0 -1px rgba(76,55,89,.19)}
.music-top-decoration{font-size:9px;font-weight:600;opacity:.9;white-space:nowrap}
.music-content{display:grid;grid-template-columns:98px minmax(0,1fr);gap:11px;padding:11px 11px 4px;align-items:center}
.music-art{height:92px;width:98px;display:grid;place-items:center;background:linear-gradient(145deg,#f9f4fa,#e8ddee);border:1px solid;border-color:#fff #ad9db7 #ad9db7 #fff;overflow:hidden}
.music-art img{width:85px;height:85px;object-fit:contain;image-rendering:pixelated;animation:cdRotate 7s linear infinite;animation-play-state:paused}
.music-art img.spinning{animation-play-state:running}
.music-right{min-width:0}
.music-track{height:27px;display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;padding:2px 8px;background:#faf5fb;border:1px solid;border-color:#aa97b1 #fff #fff #aa97b1;box-shadow:inset 1px 1px 0 #e8daec}
.music-track-title{font-size:13px;font-weight:800;color:#625072;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-track-artist{font-size:11px;color:#a08aa9;white-space:nowrap}
.music-progress{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:10px;font-weight:600;color:#786386;font-variant-numeric:tabular-nums}
.music-progress input{flex:1;min-width:0}
.music-control-row{display:flex;align-items:center;gap:6px;margin-top:8px}
.music-control{flex:0 0 auto;width:29px;height:25px;display:grid;place-items:center;border:1px solid;border-color:#fff8ff #87728f #87728f #fff8ff;background:linear-gradient(#fff5fd,#e4d3e9);color:#614d71;box-shadow:1px 1px 0 #bea7c5;cursor:pointer;font:800 13px 'Segoe UI',Arial,sans-serif}
.music-control:hover{filter:brightness(1.04)}.music-control:active{transform:translate(1px,1px);box-shadow:none}
.music-play{width:45px;color:#6a4f7b}
#music-volume{min-width:0;width:72px;flex:1}
.music-widget input[type=range]{height:15px;accent-color:#9f7daf;cursor:pointer}
.music-status{margin:0!important;padding:2px 12px 8px;color:#9b85a4!important;text-align:right;font-size:10px!important;max-width:none!important}
.showcase-divider{margin-top:6px}
.showcase-button{margin-top:7px}
.showcase-hint{margin-top:9px}
@keyframes cdRotate{to{transform:rotate(360deg)}}
@media(max-width:800px){.showcase{min-height:458px}.showcase-media{min-height:429px}}
@media(max-width:480px){
  .showcase{min-height:445px}.showcase-media{min-height:415px;padding:10px 12px}
  .showcase-card{padding:5px 2px}.showcase-card h2{font-size:22px}
  .music-widget{margin-top:14px}.music-content{grid-template-columns:74px minmax(0,1fr);gap:8px;padding:8px 7px 3px}
  .music-art{height:82px;width:74px}.music-art img{width:72px;height:72px}
  .music-control-row{gap:4px}.music-control{width:25px;height:24px}.music-play{width:38px}
  .music-track-title{font-size:12px}.music-track-artist{font-size:10px}
  #music-volume{width:44px}.showcase-divider{margin-top:6px}
}
@media(prefers-reduced-motion:reduce){.music-art img{animation:none!important}}