/* =========================================================

   Organized clean.css

   Formatting/sectioning only — CSS declarations preserved.

   ========================================================= */


/* =========================================================
   01 Root & Global Reset
   ========================================================= */

:root {
    --standalone-font:"Unbounded","Sora","Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;
}

html,
body {
    width:100%;
    min-height:100%;
    margin:0;
    overflow:hidden;
    background:radial-gradient(circle at 50% 12%,rgba(147,63,202,.3),transparent 34%),radial-gradient(circle at 80% 90%,rgba(147,63,202,.16),transparent 35%),#090909;
}

body,
button,
a,
span,
div,
p,
h1,
h2,
h3 {
    font-family:var(--standalone-font)!important;
}



/* =========================================================
   02 Main Layout & Background
   ========================================================= */

main {
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    min-height:100vh!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:24px!important;
    box-sizing:border-box!important;
}

main:before {
    content:"";
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:.42;
    filter:blur(16px);
    transform:scale(1.05);
    background:radial-gradient(circle at 50% 22%,rgba(147,63,202,.5),transparent 25%),linear-gradient(135deg,rgba(147,63,202,.22),transparent 35%),#090909;
}

#profileContent img.avatar-radius,
#profileContent [class*="avatar"] img {
    animation: avatarGlow 2s ease-in-out infinite;
}

#profileContent h1 {
    color:transparent!important;
    -webkit-text-fill-color:transparent!important;
    background-image:radial-gradient(circle at 15% 25%,#fff 0 1px,transparent 2px),radial-gradient(circle at 65% 35%,#d9a8ff 0 1.2px,transparent 2.4px),radial-gradient(circle at 40% 78%,#933fca 0 1.2px,transparent 2.5px),linear-gradient(90deg,#933fca,#fff,#e7c9ff,#b55cff,#933fca,#fff,#e7c9ff,#b55cff,#933fca)!important;
    background-size:54px 34px,74px 44px,92px 54px,200% 100%!important;
/*  background-position:0 0,12px 4px,22px 10px,0 50%!important; */
    -webkit-background-clip:text!important;
    background-clip:text!important;
    text-shadow:0 0 8px rgba(147,63,202,.75),0 0 20px rgba(147,63,202,.45)!important;
    opacity:1!important;
    visibility:visible!important;
    position:relative!important;
    display:inline-block!important;
    animation:nameSparkle 1.5s linear infinite!important;
}

.clean-views-box {
    position:absolute!important;
    top:16px!important;
    right:16px!important;
    z-index:99999!important;
    min-width:62px!important;
    height:27px!important;
    padding:0 11px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    border-radius:10px!important;
    border:1px solid rgba(147,63,202,.28)!important;
    background:rgba(255,255,255,.055)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    box-shadow:0 0 18px rgba(147,63,202,.18),inset 0 1px 0 rgba(255,255,255,.045)!important;
    color:var(--secondary-text-color,#a8a29e)!important;
    font-size:12px!important;
    font-weight:700!important;
    line-height:1!important;
    user-select:none!important;
    pointer-events:auto!important;
}

.box-style > .views {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 65px;
    height: 25px;
    padding: 0 10px;
    background: rgba(67,66,66,0.30);
    border: 1px solid rgba(147,63,202,0.35);
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(147,63,202,0.30);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--secondary-text-color, #B8B8B8);
    font-family: var(--standalone-font, Inter, sans-serif);
    font-weight: 600;
    font-size: 10px;
    user-select: none;
    pointer-events: auto;
}

.box-style > .views:hover::after {
    content: attr(data-custom-title);
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(28,29,31,1);
    color: #B8B8B8;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 1;
    box-shadow: 0 0 10px rgba(0,0,0,.5);
}



/* =========================================================
   03 Reveal / Click-to-Enter Screen
   ========================================================= */

#revealButton {
    position:fixed!important;
    inset:0!important;
    z-index:999999!important;
    width:100vw!important;
    height:100vh!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    cursor:pointer!important;
    user-select:none!important;
}

#revealButton,
#revealButton * {
    cursor:pointer!important;
    user-select:none!important;
}

#revealButton.clean-hidden {
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .35s ease,visibility .35s ease!important;
}

#revealButton>* {
    animation:revealPulse 1.6s ease-in-out infinite!important;
}



/* =========================================================
   04 Profile Container & Visibility
   ========================================================= */

#profileContent {
    position:relative!important;
    z-index:50!important;
    width:min(100%,900px)!important;
    max-height:calc(100vh - 48px)!important;
    height:auto!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
    transform-origin:center center!important;
    transform-style:flat!important;
    will-change:transform!important;
    transition:filter .18s ease-out!important;
    cursor:default!important;
}

#profileContent,
#profileContent * {
    cursor:default!important;
}

#profileContent a,
#profileContent a *,
#profileContent button,
#profileContent button *,
#profileContent .rhap_progress-container,
#profileContent .rhap_progress-container *,
#profileContent .rhap_volume-bar-area,
#profileContent .rhap_volume-bar-area * {
    cursor:pointer!important;
}

#profileContent:not(.clean-visible) {
    display:none!important;
}

#profileContent.clean-visible {
    display:block!important;
    animation:profileEnter 0.0s cubic-bezier(.2,.9,.22,1.15) both!important;
}

#profileContent.clean-tilting {
    filter:drop-shadow(0 20px 38px rgba(147,63,202,.22))!important;
}



/* =========================================================
   05 Profile Card Layout Fixes
   ========================================================= */

#profileContent .size-full,
#profileContent .h-full,
#profileContent .min-h-full {
    height:auto!important;
    min-height:0!important;
}

#profileContent .table,
#profileContent [class*="table"] {
    display:block!important;
}

#profileContent .table-cell,
#profileContent [class*="table-cell"] {
    display:block!important;
    vertical-align:initial!important;
}

#profileContent,
#profileContent>div,
#profileContent>div>div,
#profileContent .box-style,
#profileContent .box-style-simple {
    max-width:100%!important;
    overflow:visible!important;
}



/* =========================================================
   06 Username Sparkle Effects
   ========================================================= */

#profileContent h1:before,
#profileContent h1:after {
    content:"✦";
    position:absolute;
    color:#b85cff!important;
    -webkit-text-fill-color:#b85cff!important;
    font-size:.55em;
    text-shadow:0 0 10px rgba(147,63,202,.95);
    pointer-events:none;
    animation:sparkleFloat 1.8s ease-in-out infinite;
}

#profileContent h1:before {
    top:-.65em;
    left:-.55em;
}

#profileContent h1:after {
    top:-.28em;
    right:-.7em;
    animation-delay:.55s;
}



/* =========================================================
   07 Views Counter
   ========================================================= */

.clean-views-box:before {
    content:"◉";
    color:var(--theme-color,#933fca);
    filter:drop-shadow(0 0 4px var(--theme-color,#933fca));
}

/* .box-style is now the tilt target — give it transform-style so .views rides with it */

/* .views is already a direct child of .box-style with position:relative on it. Simple absolute positioning — no z-index, no !important. */

.box-style > .views .view-icon {
    color: var(--theme-color, #933fca);
    filter: drop-shadow(0 0 5px var(--theme-color, #933fca));
    font-size: 11px;
    line-height: 1;
}

.box-style > .views .view-count {
    line-height: 1;
}



/* =========================================================
   08 Links, Icons & Hover Effects
   ========================================================= */

#profileContent a,
#profileContent a img,
#profileContent a svg,
#profileContent [class*="badge"],
#profileContent [class*="badge"] svg,
#profileContent .iconify,
#profileContent svg {
    opacity:1!important;
    visibility:visible!important;
    transition:transform .18s ease,filter .18s ease,opacity .18s ease!important;
}

#profileContent a:hover,
#profileContent a:hover img,
#profileContent a:hover svg,
#profileContent [class*="badge"]:hover,
#profileContent [class*="badge"]:hover svg,
#profileContent svg:hover {
    animation-name:none!important;
    opacity:1!important;
    visibility:visible!important;
}

#profileContent a:hover img,
#profileContent a:hover svg,
#profileContent [class*="badge"]:hover,
#profileContent [class*="badge"]:hover svg {
    transform:scale(1.16)!important;
    filter:drop-shadow(0 0 8px var(--theme-color,#933fca)) brightness(1.08)!important;
}



/* =========================================================
   09 Tilt Target
   ========================================================= */

.box-style {
    transform-style: preserve-3d;
    transform-origin: center center;
    will-change: transform;
}

.box-style.clean-tilting {
    filter: drop-shadow(0 20px 38px rgba(147,63,202,.22));
}



/* =========================================================
   10 Responsive Rules
   ========================================================= */

@media (max-height:720px),(max-width:640px) {
    html,
    body,
    main {
        overflow-y:auto!important;
    }

    main {
        position:relative!important;
        min-height:100vh!important;
        height:auto!important;
        align-items:flex-start!important;
        padding-top:24px!important;
        padding-bottom:24px!important;
    }

    #profileContent {
        max-height:none!important;
    }
}



/* =========================================================
   11 Animations / Keyframes
   ========================================================= */

@keyframes revealPulse {
    0%,
    100% {
        transform:translateY(0) scale(1);
        opacity:.86;
    }

    50% {
        transform:translateY(-4px) scale(1.035);
        opacity:1;
    }
}

@keyframes profileEnter {
    0% {
        opacity:0;
        transform:translateY(60px) scale(.96);
        filter:blur(12px);
    }

    60% {
        opacity:1;
        transform:translateY(-5px) scale(1.01);
        filter:blur(0);
    }

    100% {
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
    }
}

@keyframes avatarGlow {
    0%, 100% {
        box-shadow: 0 0 18px rgba(147,63,202,.6), 0 0 40px rgba(147,63,202,.25);
    }
    50% {
        box-shadow: 0 0 28px rgba(147,63,202,.9), 0 0 60px rgba(147,63,202,.45);
    }
}

@keyframes nameSparkle {
    0% {
        background-position:0 0,12px 4px,22px 10px,0% 50%;
    }

    /*50% {
        background-position:28px 14px,44px 18px,62px 26px,50% 50%;
    }*/

    100% {
        background-position:54px 34px,86px 48px,114px 64px,-100% 50%;
    }
}

@keyframes sparkleFloat {
    0%,
    100% {
        opacity:.55;
        transform:translateY(0) scale(.85) rotate(0);
    }

    50% {
        opacity:1;
        transform:translateY(-3px) scale(1.2) rotate(18deg);
    }
}

.terminal-reveal {
  position: relative;
  display: block;
  white-space: pre;
  text-align: left;
  min-width: min(520px, 86vw);
  padding: 18px 22px;
  border: 1px solid rgba(147,63,202,.42);
  border-radius: 14px;
  background:
    linear-gradient(rgba(255,255,255,.035) 50%, rgba(0,0,0,.08) 50%),
    radial-gradient(circle at 25% 0%, rgba(147,63,202,.22), transparent 40%),
    rgba(6, 3, 10, .72);
  background-size: 100% 4px, 100% 100%, 100% 100%;
  box-shadow:
    0 0 24px rgba(147,63,202,.34),
    inset 0 0 24px rgba(147,63,202,.10);
  color: #e9d5ff;
  font-family: "Courier New", monospace!important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .4px;
  text-shadow: 0 0 8px rgba(147,63,202,.85);
  animation: terminalFloat 2.4s ease-in-out infinite, terminalGlitch 5s steps(1) infinite;
}

.terminal-reveal::before {
  content: "MANAPLUS SECURE TERMINAL";
  display: block;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(147,63,202,.25);
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255,255,255,.75);
}



.terminal-reveal.terminal-complete {
  box-shadow:
    0 0 34px rgba(147,63,202,.48),
    inset 0 0 30px rgba(147,63,202,.14);
}

.terminal-cursor {
  color: #ffffff;
  text-shadow: 0 0 12px #ffffff, 0 0 22px var(--theme-color,#933fca);
  animation: terminalBlink .75s infinite;
}

@keyframes terminalBlink {
  0%,50% { opacity:1; }
  51%,100% { opacity:0; }
}

@keyframes terminalFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes terminalGlitch {
  0%, 92%, 100% { filter: none; }
  93% { filter: hue-rotate(18deg) brightness(1.35); }
  94% { filter: none; }
}

@media (max-width: 640px) {
  .terminal-reveal {
    min-width: 82vw;
    font-size: 11px;
    padding: 14px 16px;
  }
}