:root {
    --deep-blue:#000814;
    --mid-blue:#001D3D;
    --bright-blue:#003566;
    --teal:#0F4C5C;
    --teal-mid:#1B5E6A;
    --cyan:#1B9AAA;
    --cyan-light:#48CAE4;
    --gold:#FFC107;
    --purple:#7B2CBF;
    --purple-light:#9B5DE5;
    --white:#ffffff;
    --white-70:rgba(255,255,255,0.7);
    --white-40:rgba(255,255,255,0.4);
    --white-15:rgba(255,255,255,0.15);
    --white-08:rgba(255,255,255,0.08);
    --glass-border:rgba(255,255,255,0.09);
    --glass-bg:rgba(255,255,255,0.04);
    --shadow-cyan:0 4px 24px rgba(27,154,170,0.25);
    --shadow-purple:0 4px 24px rgba(155,93,229,0.25)
  }
  *,*::before,*::after {
    margin:0;
    padding:0;
    box-sizing:border-box
  }
  html {
    height:100%;
    overflow:hidden;
    background:#010d08
  }
  #global-bg {
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background-image:url('bg.png');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    will-change:auto
  }
  #globalSpiralCanvas,#auth-spiral-bg,#modeSpiralBg,#welcomeCanvas,#logoSpiralCanvas {
    will-change:transform;
    contain:strict
  }
  #global-bg::after {
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,4,12,0.38)
  }
  .welcome-title {
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size:clamp(2.8rem,13vw,6.5rem);
    letter-spacing:0.10em;
    line-height:0.95;
    text-align:center;
    margin-bottom:0;
    color:#ffffff;
    -webkit-text-fill-color:#ffffff;
    background:none;
    -webkit-background-clip:unset;
    background-clip:unset;
    filter:none;
    will-change:transform;
    text-shadow:0px 0px 10px rgba(0,0,0,0.5),0 0 40px rgba(180,160,255,0.4),0 0 80px rgba(120,100,220,0.2);
    animation:wFadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.4s both,titleBreathe 7s ease-in-out 1.6s infinite
  }
  @keyframes titleBreathe {
    0%,100% {
      transform:scale(1)
    }
    50% {
      transform:scale(1.022)
    }
  }
  .welcome-divider {
    width:50px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,210,80,0.5),transparent);
    margin:1.1rem auto 1.4rem
  }
  .welcome-subtitle {
    font-family:'Cormorant Garamond',serif;
    font-style:italic;
    font-weight:400;
    font-size:1.12rem;
    color:rgba(255,255,255,0.97);
    -webkit-text-fill-color:rgba(255,255,255,0.97);
    text-align:center;
    line-height:1.9;
    letter-spacing:0.07em;
    margin-bottom:auto;
    text-shadow:0 1px 12px rgba(0,0,0,0.55),0 0 28px rgba(72,202,228,0.28);
    padding-top:0.2rem
  }
  .btn-next-q-arrow {
    width:60px;
    height:60px;
    border-radius:50%;
    background:rgba(1,50,32,0.55);
    border:none;
    box-shadow:none;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity 0.28s ease,transform 0.28s ease;
    color:transparent;
    font-size:0
  }
  .btn-next-q-arrow::after {
    content:'';
    display:block;
    width:13px;
    height:13px;
    border-right:2.5px solid rgba(100,240,160,0.9);
    border-bottom:2.5px solid rgba(100,240,160,0.9);
    transform:rotate(-45deg) translate(-3px,0px);
    border-radius:1px;
    filter:drop-shadow(0 0 5px rgba(0,200,80,0.55))
  }
  .btn-next-q:hover .btn-next-q-arrow {
    background:rgba(1,70,40,0.75);
    border:none;
    box-shadow:none;
    transform:scale(1.1)
  }
  .btn-next-q:hover .btn-next-q-arrow::after {
    filter:drop-shadow(0 0 9px rgba(0,230,100,0.9))
  }
  .btn-next-q:active .btn-next-q-arrow {
    transform:scale(0.95)
  }
  body {
    font-family:'DM Sans',sans-serif;
    background:transparent;
    color:var(--white);
    width:100vw;
    height:100vh;
    height:100dvh
  }
  .screen {
    position:absolute;
    inset:0;
    display:none;
    flex-direction:column;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    opacity:0;
    pointer-events:none;
    transform:translateZ(0)
  }
  .screen.active,.screen.entering,.screen.exit {
    display:flex
  }
  .screen.active {
    opacity:1;
    pointer-events:auto;
    transform:translateZ(0);
    will-change:auto
  }
  .screen.entering {
    opacity:0;
    transform:translate3d(0,18px,0);
    pointer-events:none;
    transition:opacity 0.42s cubic-bezier(0.16,1,0.3,1),transform 0.42s cubic-bezier(0.16,1,0.3,1);
    will-change:opacity,transform
  }
  .screen.entering.active {
    opacity:1;
    transform:translate3d(0,0,0)
  }
  .screen.exit {
    opacity:0;
    transform:translate3d(0,-8px,0);
    pointer-events:none;
    transition:opacity 0.26s cubic-bezier(0.4,0,0.8,0),transform 0.26s cubic-bezier(0.4,0,0.8,0);
    will-change:opacity,transform
  }
  .screen:not(.active):not(.entering) * {
    animation-play-state:paused!important
  }
  body:not([data-screen="welcome"]) .ring-circle,body:not([data-screen="welcome"]) .ring-circle-small {
    animation-play-state:paused
  }
  .tab-hidden * {
    animation-play-state:paused!important
  }
  .mandala-bg {
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
    contain:strict
  }
  .mandala-bg canvas {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    will-change:transform;
    transform:translateZ(0)
  }
  #auth-screen,#auth-signup,#auth-login {
    background:#000814;
    justify-content:center;
    align-items:center;
    padding-bottom:env(safe-area-inset-bottom,0px)
  }
  #auth-screen::before,#auth-signup::before,#auth-login::before {
    content:none
  }
  #auth-inner-circle {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:min(88vw,88vh);
    height:min(88vw,88vh);
    border-radius:50%;
    background:radial-gradient(circle at 38% 35%,rgba(72,202,228,0.55),rgb(0,15,40));
    box-shadow:inset 0 0 22px rgba(72,202,228,0.2);
    pointer-events:none;
    z-index:1
  }
  @media (max-height:700px) {
    #auth-inner-circle {
      width:min(84vw,84vh);
      height:min(84vw,84vh)
    }
    #auth-screen::after {
      width:min(84vw,84vh)!important;
      height:min(84vw,84vh)!important
    }
    .auth-content {
      width:min(74vw,74vh);
      padding:1.4rem 1.6rem 1.6rem
    }
    .auth-tagline {
      margin-bottom:1.4rem
    }
  }
  @media (max-height:580px) {
    #auth-inner-circle {
      width:min(78vw,78vh);
      height:min(78vw,78vh)
    }
    #auth-screen::after {
      width:min(78vw,78vh)!important;
      height:min(78vw,78vh)!important
    }
    .auth-content {
      width:min(68vw,68vh);
      padding:1rem 1.2rem 1.2rem
    }
    .auth-tagline {
      margin-bottom:1rem
    }
    .auth-logo {
      font-size:clamp(1.4rem,6vw,1.9rem)
    }
  }
  #auth-screen::after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:min(88vw,88vh);
    height:min(88vw,88vh);
    border-radius:50%;
    border:2px solid rgba(72,202,228,0.55);
    box-shadow:0 0 28px rgba(27,154,170,0.35),inset 0 0 28px rgba(27,154,170,0.12);
    pointer-events:none;
    z-index:3
  }
  #auth-spiral-bg {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:0;
    display:block
  }
  .auth-content {
    position:relative;
    z-index:2;
    width:min(80vw,80vh);
    max-width:420px;
    padding:2.2rem 2rem 2.4rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    background:transparent;
    border-radius:0;
    border:none;
    box-shadow:none
  }
  .auth-logo {
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size:clamp(1.8rem,8vw,2.5rem);
    letter-spacing:0.1em;
    text-align:center;
    margin-bottom:0.25rem;
    color:#ffffff;
    -webkit-text-fill-color:#ffffff;
    text-shadow:0 0 30px rgba(72,202,228,0.5),0 0 60px rgba(27,154,170,0.25)
  }
  .auth-tagline {
    font-size:0.72rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:rgba(72,202,228,0.7);
    margin-bottom:2.4rem;
    text-align:center
  }
  .auth-google-btn {
    width:100%;
    padding:0.9rem 1.2rem;
    border:1px solid rgba(72,202,228,0.35);
    border-radius:50px;
    color:rgba(255,255,255,0.88);
    font-family:'DM Sans',sans-serif;
    font-size:0.92rem;
    font-weight:400;
    cursor:pointer;
    transition:opacity 0.25s ease,transform 0.25s ease,background 0.25s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.7rem;
    background:rgba(72,202,228,0.15);
    border-color:rgba(72,202,228,0.65);
    transform:translateY(-1px);
    box-shadow:0 0 18px rgba(27,154,170,0.3)
  }
  .auth-google-icon {
    width:18px;
    height:18px;
    flex-shrink:0
  }
  .auth-or {
    display:flex;
    align-items:center;
    gap:0.9rem;
    width:100%;
    margin:1.1rem 0
  }
  .auth-or span {
    font-size:0.72rem;
    color:rgba(72,202,228,0.4);
    letter-spacing:0.12em;
    text-transform:uppercase;
    white-space:nowrap
  }
  .auth-or::before,.auth-or::after {
    content:'';
    flex:1;
    height:1px;
    background:rgba(72,202,228,0.15)
  }
  .auth-input {
    width:100%;
    padding:0.9rem 1rem;
    background:rgba(72,202,228,0.06);
    border:1px solid rgba(72,202,228,0.25);
    border-radius:50px;
    color:white;
    font-family:'DM Sans',sans-serif;
    font-size:0.92rem;
    outline:none;
    transition:border-color 0.2s,background 0.2s;
    margin-bottom:0.75rem
  }
  .auth-input:focus {
    border-color:rgba(72,202,228,0.7);
    background:rgba(72,202,228,0.1);
    box-shadow:0 0 14px rgba(27,154,170,0.2)
  }
  .auth-input::placeholder {
    color:rgba(255,255,255,0.25)
  }
  .auth-email-btn {
    width:100%;
    padding:0.9rem 1.2rem;
    background:rgba(72,202,228,0.2);
    border:1.5px solid rgba(72,202,228,0.7);
    border-radius:50px;
    color:#ffffff;
    font-family:'DM Sans',sans-serif;
    font-size:0.92rem;
    font-weight:500;
    cursor:pointer;
    transition:background 0.25s ease,box-shadow 0.25s ease,transform 0.25s ease;
    box-shadow:0 0 18px rgba(27,154,170,0.25),inset 0 0 12px rgba(72,202,228,0.08)
  }
  .auth-email-btn:hover {
    background:rgba(72,202,228,0.32);
    transform:translateY(-1px);
    box-shadow:0 0 28px rgba(27,154,170,0.5)
  }
  .auth-email-btn:disabled {
    opacity:0.45;
    cursor:not-allowed;
    transform:none
  }
  .auth-guest-link {
    margin-top:1.5rem;
    background:none;
    border:none;
    color:rgba(72,202,228,0.5);
    font-family:'DM Sans',sans-serif;
    font-size:0.82rem;
    cursor:pointer;
    transition:color 0.2s;
    letter-spacing:0.05em
  }
  .auth-guest-link:hover {
    color:rgba(72,202,228,0.9)
  }
  .auth-form-header {
    width:100%;
    display:flex;
    align-items:center;
    gap:0.8rem;
    margin-bottom:1.8rem
  }
  .auth-back-btn {
    background:rgba(255,255,255,0.92);
    border:none;
    color:#0a0a0a;
    font-size:1.3rem;
    cursor:pointer;
    width:42px;
    height:42px;
    padding:0;
    line-height:1;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.2s ease,transform 0.2s ease;
    flex-shrink:0
  }
  .auth-back-btn:hover {
    background:#ffffff;
    transform:scale(1.08);
    box-shadow:0 4px 16px rgba(0,0,0,0.25)
  }
  .auth-form-title {
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size:1.5rem;
    letter-spacing:0.08em;
    color:white
  }
  .auth-form {
    width:100%;
    display:flex;
    flex-direction:column
  }
  .auth-submit-btn {
    width:100%;
    padding:0.9rem;
    background:rgba(255,255,255,0.92);
    border:none;
    border-radius:14px;
    color:#0a0a0a;
    font-family:'DM Sans',sans-serif;
    font-size:0.92rem;
    font-weight:500;
    cursor:pointer;
    transition:opacity 0.25s ease,transform 0.25s ease;
    margin-top:0.2rem
  }
  .auth-submit-btn:hover {
    background:white;
    transform:translateY(-1px);
    box-shadow:0 6px 24px rgba(255,255,255,0.15)
  }
  .auth-submit-btn:disabled {
    opacity:0.45;
    cursor:not-allowed;
    transform:none
  }
  .auth-error {
    font-size:0.75rem;
    color:#ff6b6b;
    text-align:center;
    padding:0.5rem 0.8rem;
    background:rgba(255,107,107,0.08);
    border-radius:8px;
    border:1px solid rgba(255,107,107,0.15);
    display:none;
    margin-bottom:0.6rem
  }
  .auth-error.show {
    display:block
  }
  .auth-success {
    font-size:0.75rem;
    color:#48CAE4;
    text-align:center;
    padding:0.5rem 0.8rem;
    background:rgba(72,202,228,0.08);
    border-radius:8px;
    border:1px solid rgba(72,202,228,0.15);
    display:none;
    margin-bottom:0.6rem
  }
  .auth-success.show {
    display:block
  }
  .auth-forgot {
    background:none;
    border:none;
    color:rgba(255,255,255,0.25);
    font-family:'DM Sans',sans-serif;
    font-size:0.73rem;
    cursor:pointer;
    align-self:flex-end;
    transition:color 0.2s;
    margin-bottom:0.8rem
  }
  .auth-forgot:hover {
    color:rgba(255,255,255,0.5)
  }
  #auth-otp {
    background:transparent;
    justify-content:center;
    align-items:center
  }
  #auth-otp::before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 50% 42%,rgba(27,154,170,0.13) 0%,rgba(72,202,228,0.05) 30%,transparent 65%);
    pointer-events:none;
    z-index:1
  }
  .otp-hint {
    font-size:0.78rem;
    color:rgba(255,255,255,0.35);
    text-align:center;
    margin-bottom:1.8rem;
    line-height:1.6
  }
  .otp-hint span {
    color:rgba(72,202,228,0.7)
  }
  .otp-boxes {
    display:flex;
    gap:0.6rem;
    justify-content:center;
    width:100%;
    margin-bottom:1.2rem
  }
  .otp-box {
    width:46px;
    height:54px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:12px;
    color:white;
    font-family:'DM Sans',sans-serif;
    font-size:1.3rem;
    font-weight:300;
    text-align:center;
    outline:none;
    transition:border-color 0.2s,background 0.2s;
    caret-color:#48CAE4
  }
  .otp-box:focus {
    border-color:rgba(27,154,170,0.6);
    background:rgba(255,255,255,0.08)
  }
  .otp-box.filled {
    border-color:rgba(27,154,170,0.4)
  }
  .otp-resend {
    background:none;
    border:none;
    color:rgba(255,255,255,0.25);
    font-family:'DM Sans',sans-serif;
    font-size:0.75rem;
    cursor:pointer;
    transition:color 0.2s;
    margin-top:0.4rem
  }
  .otp-resend:hover {
    color:rgba(255,255,255,0.5)
  }
  .otp-resend:disabled {
    opacity:0.3;
    cursor:not-allowed
  }
  .user-pill {
    display:flex;
    align-items:center;
    gap:0.6rem;
    position:absolute;
    top:1.1rem;
    right:1.2rem;
    z-index:10;
    cursor:pointer;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:0.38rem 0.7rem 0.38rem 0.42rem;
    transition:background 0.2s,border-color 0.2s;
    text-decoration:none
  }
  .user-pill:hover {
    background:rgba(255,255,255,0.07);
    border-color:rgba(255,255,255,0.14)
  }
  .user-pill-info {
    display:flex;
    flex-direction:column;
    gap:0.05rem;
    min-width:0
  }
  .user-pill-name-text {
    font-size:0.78rem;
    font-weight:500;
    color:rgba(255,255,255,0.82);
    letter-spacing:0.01em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:90px;
    font-family:'DM Sans',sans-serif;
    line-height:1.2
  }
  .user-pill-link {
    font-size:0.6rem;
    color:rgba(72,202,228,0.55);
    letter-spacing:0.06em;
    text-transform:uppercase;
    font-family:'DM Sans',sans-serif;
    line-height:1
  }
  .user-pill:hover .user-pill-link {
    color:rgba(72,202,228,0.85)
  }
  @keyframes pulse-green {
    0%,100% {
      opacity:1
    }
    50% {
      opacity:0.6
    }
  }
  #auth-username {
    background:transparent;
    justify-content:center;
    align-items:center
  }
  #auth-username::before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 50% 42%,rgba(27,154,170,0.13) 0%,rgba(72,202,228,0.05) 30%,transparent 65%);
    pointer-events:none;
    z-index:1
  }
  .username-content {
    position:relative;
    z-index:2;
    width:100%;
    max-width:320px;
    padding:2rem 1.8rem;
    display:flex;
    flex-direction:column;
    align-items:center
  }
  .username-logo {
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size:1.6rem;
    letter-spacing:0.1em;
    background:linear-gradient(135deg,#ffffff 0%,#48CAE4 60%,#9B5DE5 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-bottom:0.2rem;
    text-align:center
  }
  .username-tagline {
    font-size:0.7rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.3);
    margin-bottom:2rem;
    text-align:center
  }
  .username-label {
    font-size:0.72rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.3);
    margin-bottom:0.5rem;
    align-self:flex-start
  }
  .username-input-wrap {
    width:100%;
    margin-bottom:0.4rem
  }
  .username-input {
    width:100%;
    padding:0.9rem 1rem;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:14px;
    color:white;
    font-family:'DM Sans',sans-serif;
    font-size:0.92rem;
    outline:none;
    transition:border-color 0.2s,background 0.2s
  }
  .username-input:focus {
    border-color:rgba(27,154,170,0.55);
    background:rgba(255,255,255,0.08)
  }
  .username-input::placeholder {
    color:rgba(255,255,255,0.22)
  }
  .username-status {
    font-size:0.73rem;
    min-height:1.1rem;
    margin-bottom:0.7rem;
    align-self:flex-start;
    transition:color 0.2s
  }
  .username-status.ok {
    color:#22c55e
  }
  .username-status.taken {
    color:#ff6b6b
  }
  .username-status.checking {
    color:rgba(255,255,255,0.3)
  }
  .username-hint {
    font-size:0.71rem;
    color:rgba(255,255,255,0.22);
    margin-bottom:1.4rem;
    align-self:flex-start;
    line-height:1.5
  }
  .username-submit {
    width:100%;
    padding:0.9rem;
    background:rgba(255,255,255,0.92);
    border:none;
    border-radius:14px;
    color:#0a0a0a;
    font-family:'DM Sans',sans-serif;
    font-size:0.92rem;
    font-weight:500;
    cursor:pointer;
    transition:opacity 0.25s ease,transform 0.25s ease
  }
  .username-submit:hover {
    background:white;
    transform:translateY(-1px);
    box-shadow:0 6px 20px rgba(255,255,255,0.15)
  }
  .username-submit:disabled {
    opacity:0.3;
    cursor:not-allowed;
    transform:none
  }
  .user-online-dot {
    display:none
  }
  .profile-avatar-ring {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center
  }
  .profile-avatar-ring svg.ring-svg {
    position:absolute;
    top:-5px;
    left:-5px;
    width:calc(100% + 10px);
    height:calc(100% + 10px);
    pointer-events:none
  }
  .ring-circle {
    fill:none;
    stroke:#22c55e;
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-dasharray:251;
    stroke-dashoffset:0;
    filter:drop-shadow(0 0 4px #22c55e);
    animation:ring-pulse 2.5s ease-in-out infinite;
    transform-origin:center;
    transform:rotate(-90deg);
    will-change:opacity,transform
  }
  @keyframes ring-pulse {
    0%,100% {
      opacity:1;
      transform:rotate(-90deg) scale(1)
    }
    50% {
      opacity:0.6;
      transform:rotate(-90deg) scale(1.05)
    }
  }
  .user-avatar {
    position:relative;
    overflow:visible
  }
  .user-avatar svg.ring-svg-small {
    position:absolute;
    top:-3px;
    left:-3px;
    width:calc(100% + 6px);
    height:calc(100% + 6px);
    pointer-events:none
  }
  .ring-circle-small {
    fill:none;
    stroke:#22c55e;
    stroke-width:2;
    stroke-dasharray:100;
    stroke-dashoffset:0;
    filter:drop-shadow(0 0 3px #22c55e);
    animation:ring-pulse 2.5s ease-in-out infinite;
    transform-origin:center;
    transform:rotate(-90deg);
    will-change:opacity,transform
  }
  .profile-avatar-clickable {
    cursor:pointer
  }
  .profile-avatar-overlay {
    position:absolute;
    inset:0;
    border-radius:50%;
    background:rgba(0,0,0,0.45);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 0.2s
  }
  .profile-avatar-clickable:hover .profile-avatar-overlay {
    opacity:1
  }
  #profile-photo-input {
    display:none
  }
  .profile-avatar-img {
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    display:none;
    position:absolute;
    inset:0
  }
  #profile {
    background:#ffffff;
    overflow:hidden;
    flex-direction:row
  }
  .profile-layout {
    display:flex;
    flex-direction:row;
    width:100%;
    height:100%;
    overflow:hidden
  }
  .profile-sidemenu {
    width:72px;
    min-width:72px;
    background:rgba(0,0,0,0.3);
    border-right:1px solid rgba(255,255,255,0.06);
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:1.2rem 0.5rem;
    gap:0.6rem;
    overflow:hidden;
    flex-shrink:0
  }
  .profile-sidemenu-btn {
    width:56px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.3rem;
    background:none;
    border:1px solid transparent;
    border-radius:14px;
    padding:0.6rem 0.4rem;
    cursor:pointer;
    transition:opacity 0.2s ease,transform 0.2s ease;
    color:rgba(255,255,255,0.3);
    font-family:'DM Sans',sans-serif;
    font-size:0.55rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    text-align:center;
    line-height:1.3
  }
  .profile-sidemenu-btn:hover {
    background:rgba(255,255,255,0.05);
    border-color:rgba(255,255,255,0.1);
    color:rgba(255,255,255,0.6)
  }
  .profile-sidemenu-btn.active {
    background:rgba(27,154,170,0.12);
    border-color:rgba(27,154,170,0.3);
    color:#48CAE4
  }
  .profile-sidemenu-btn svg {
    flex-shrink:0
  }
  #profileOverlayContent .profile-sidemenu {
    width:100%!important;
    min-width:unset!important;
    flex-direction:row!important;
    border-right:none!important;
    border-top:1px solid rgba(0,0,0,0.07)!important;
    padding:0.5rem 1rem!important;
    gap:0!important;
    justify-content:space-around!important;
    background:#f4f4f6!important;
    flex-shrink:0!important
  }
  #profileOverlayContent .profile-sidemenu-btn {
    width:auto!important;
    flex:1!important;
    flex-direction:column!important;
    border-radius:12px!important;
    padding:0.4rem 0.3rem!important;
    font-size:0.55rem!important
  }
  .profile-main {
    flex:1;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-width:0
  }
  #raccolta {
    background:transparent;
    overflow:hidden;
    flex-direction:row
  }
  .raccolta-layout {
    display:flex;
    flex-direction:row;
    width:100%;
    height:100%;
    overflow:hidden
  }
  .raccolta-main {
    flex:1;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-width:0
  }
  .raccolta-header {
    display:flex;
    align-items:center;
    gap:0.8rem;
    padding:1.2rem 1.4rem 1rem;
    flex-shrink:0;
    border-bottom:1px solid rgba(255,255,255,0.07)
  }
  .raccolta-title {
    font-family:'Cormorant Garamond',serif;
    font-weight:400;
    font-size:1.3rem;
    letter-spacing:0.06em;
    color:rgba(255,255,255,0.85)
  }
  .raccolta-body {
    padding:1.2rem 1.4rem 2rem;
    display:flex;
    flex-direction:column;
    gap:1.1rem;
    overflow-y:auto;
    flex:1
  }
  .profile-header {
    display:flex;
    align-items:center;
    gap:0.8rem;
    padding:1.2rem 1.4rem 1rem;
    flex-shrink:0;
    border-bottom:1px solid rgba(255,255,255,0.07)
  }
  .profile-header-actions {
    margin-left:auto
  }
  .profile-community-btn {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:20px;
    padding:0.3rem 0.75rem;
    font-size:0.73rem;
    color:rgba(255,255,255,0.45);
    font-family:'DM Sans',sans-serif;
    cursor:pointer;
    transition:opacity 0.2s ease,transform 0.2s ease;
    display:flex;
    align-items:center;
    gap:0.35rem
  }
  .profile-community-btn:hover {
    border-color:rgba(27,154,170,0.5);
    color:#48CAE4;
    background:rgba(27,154,170,0.08)
  }
  .profile-back {
    background:none;
    border:none;
    color:rgba(255,255,255,0.3);
    font-size:1.4rem;
    cursor:pointer;
    transition:color 0.2s;
    padding:0;
    line-height:1
  }
  .profile-back:hover {
    color:white
  }
  .profile-title {
    font-family:'Cormorant Garamond',serif;
    font-weight:400;
    font-size:1.3rem;
    letter-spacing:0.06em;
    color:rgba(255,255,255,0.85)
  }
  .profile-body {
    padding:1.2rem 1.4rem 2rem;
    display:flex;
    flex-direction:column;
    gap:1.1rem;
    overflow-y:auto;
    flex:1;
    align-items:center
  }
  #profileOverlayContent .profile-body {
    align-items:center
  }
  #profileOverlayContent .profile-stats {
    width:100%
  }
  #profileOverlayContent .profile-card {
    width:100%
  }
  #profileOverlayContent .profile-save-btn {
    width:100%
  }
  #profileOverlayContent .profile-logout-btn {
    width:100%
  }
  .profile-spiral-wrap {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:88px;
    height:88px;
    background:#0a0f1e;
    border-radius:50%;
    box-shadow:0 0 0 2.5px rgba(34,197,94,0.7),0 0 18px 4px rgba(34,197,94,0.35),0 0 40px 8px rgba(34,197,94,0.12);
    transition:none
  }
  .profile-spiral-wrap.offline {
    box-shadow:0 0 0 2.5px rgba(239,68,68,0.7),0 0 18px 4px rgba(239,68,68,0.35),0 0 40px 8px rgba(239,68,68,0.12)
  }
  .profile-spiral-canvas {
    width:80px;
    height:80px;
    display:block;
    border-radius:50%;
    will-change:transform
  }
  .profile-status-dot {
    display:none
  }
  .profile-status-dot:hover {
    transform:scale(1.15)
  }
  .profile-status-dot.online {
    background:#22c55e;
    box-shadow:0 0 6px rgba(34,197,94,0.5)
  }
  .profile-status-dot.offline {
    background:#ef4444;
    box-shadow:0 0 6px rgba(239,68,68,0.5)
  }
  .status-menu {
    position:absolute;
    bottom:-2px;
    right:-80px;
    background:#0d1e2c;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    box-shadow:0 8px 32px rgba(0,0,0,0.6);
    overflow:hidden;
    z-index:10;
    min-width:110px;
    display:none
  }
  .status-menu.open {
    display:block
  }
  .status-menu-item {
    display:flex;
    align-items:center;
    gap:0.5rem;
    padding:0.55rem 0.85rem;
    font-size:0.8rem;
    color:rgba(255,255,255,0.65);
    cursor:pointer;
    transition:background 0.15s;
    font-family:'DM Sans',sans-serif
  }
  .status-menu-item:hover {
    background:rgba(255,255,255,0.06)
  }
  .status-dot-sm {
    width:9px;
    height:9px;
    border-radius:50%;
    flex-shrink:0
  }
  .profile-username-display {
    font-size:1rem;
    color:rgba(255,255,255,0.9);
    font-weight:600;
    letter-spacing:0.02em;
    text-align:center;
    min-height:1.2rem
  }
  .profile-stats {
    display:flex;
    gap:0.6rem
  }
  .profile-stat {
    flex:1;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.09);
    border-radius:12px;
    padding:0.75rem 0.5rem;
    text-align:center
  }
  .profile-stat-num {
    font-family:'Cormorant Garamond',serif;
    font-size:1.5rem;
    font-weight:400;
    color:rgba(255,255,255,0.9);
    line-height:1
  }
  .profile-stat-label {
    font-size:0.6rem;
    color:rgba(255,255,255,0.3);
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin-top:0.2rem
  }
  .profile-card {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    overflow:hidden
  }
  .garden-section {
    display:flex;
    flex-direction:column;
    gap:0.6rem
  }
  .garden-header-row {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    padding:0 0.1rem
  }
  .garden-section-title {
    font-size:0.65rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.25)
  }
  .garden-progress-label {
    font-size:0.62rem;
    color:rgba(255,255,255,0.22);
    letter-spacing:0.06em
  }
  .garden-progress-track {
    height:2px;
    background:rgba(255,255,255,0.07);
    border-radius:2px;
    overflow:hidden;
    margin-bottom:0.1rem
  }
  .garden-progress-fill {
    height:100%;
    background:linear-gradient(90deg,#1b6aaa,#60b0ff);
    border-radius:2px;
    transition:width 0.6s cubic-bezier(0.16,1,0.3,1)
  }
  .garden-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0.55rem
  }
  @media (min-width:600px) {
    .garden-grid {
      grid-template-columns:repeat(6,1fr);
      gap:0.5rem
    }
  }
  @media (min-width:900px) {
    .garden-grid {
      grid-template-columns:repeat(8,1fr);
      gap:0.45rem
    }
  }
  .gfc-wrapper {
    display:flex;
    flex-direction:column;
    gap:0.28rem;
    align-items:stretch
  }
  .gfc-eat-btn {
    width:100%;
    padding:0.28rem 0.2rem;
    background:linear-gradient(135deg,rgba(27,154,170,0.22),rgba(72,202,228,0.12));
    border:1px solid rgba(72,202,228,0.30);
    border-radius:6px;
    color:rgba(255,255,255,0.75);
    font-family:'DM Sans',sans-serif;
    font-size:0.55rem;
    font-weight:500;
    letter-spacing:0.06em;
    text-transform:uppercase;
    cursor:pointer;
    transition:opacity 0.2s ease,transform 0.2s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.2rem;
    white-space:nowrap
  }
  .gfc-eat-btn:hover {
    background:linear-gradient(135deg,rgba(27,154,170,0.40),rgba(72,202,228,0.25));
    border-color:rgba(72,202,228,0.60);
    color:white;
    transform:translateY(-1px)
  }
  .gfc-eat-btn:active {
    transform:scale(0.96)
  }
  .gfc-eat-btn.gfc-eaten {
    background:linear-gradient(135deg,rgba(155,93,229,0.20),rgba(123,44,191,0.12));
    border-color:rgba(155,93,229,0.30);
    color:rgba(155,93,229,0.70);
    cursor:default;
    pointer-events:none
  }
  .gfc-wrapper.gfc-locked-wrap .gfc-eat-btn {
    display:none
  }
  .garden-fruit-card {
    position:relative;
    aspect-ratio:300/430;
    border-radius:8px;
    overflow:hidden;
    cursor:pointer;
    transition:transform 0.22s cubic-bezier(0.16,1,0.3,1),box-shadow 0.22s;
    -webkit-tap-highlight-color:transparent;
    user-select:none
  }
  .garden-fruit-card.gfc-locked .gfc-bg {
    filter:grayscale(1) brightness(0.28)
  }
  .garden-fruit-card.gfc-locked .gfc-fruit {
    filter:grayscale(1) brightness(0.2);
    opacity:0.45
  }
  .garden-fruit-card.gfc-locked .gfc-name {
    color:rgba(255,255,255,0.14)
  }
  .garden-fruit-card.gfc-locked .gfc-lock {
    opacity:1
  }
  .garden-fruit-card.gfc-unlocked .gfc-lock {
    opacity:0
  }
  .garden-fruit-card.gfc-unlocked:active {
    transform:scale(0.95)
  }
  .garden-fruit-card.gfc-unlocked:hover {
    transform:translateY(-3px) scale(1.04);
    box-shadow:0 8px 28px rgba(0,0,0,0.55)
  }
  .garden-fruit-card.gfc-just-unlocked {
    animation:gfcBloom 0.55s cubic-bezier(0.16,1,0.3,1) forwards
  }
  @keyframes gfcBloom {
    0% {
      transform:scale(0.82);
      opacity:0.6
    }
    55% {
      transform:scale(1.07);
      opacity:0.95
    }
    100% {
      transform:scale(1);
      opacity:1
    }
  }
  .gfc-bg {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    transition:filter 0.35s
  }
  .gfc-fruit {
    position:absolute;
    left:50%;
    top:40%;
    transform:translate(-50%,-50%);
    width:68%;
    z-index:1;
    pointer-events:none;
    transition:filter 0.35s,opacity 0.35s
  }
  .gfc-footer {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:0.18rem 0.2rem 0.22rem;
    background:linear-gradient(transparent,rgba(0,0,0,0.72));
    text-align:center;
    z-index:2
  }
  .gfc-name {
    font-family:'Cormorant Garamond',serif;
    font-size:0.5rem;
    letter-spacing:0.12em;
    text-transform:capitalize;
    color:rgba(255,255,255,0.72);
    transition:color 0.35s
  }
  .gfc-lock {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:3;
    font-size:0.85rem;
    opacity:0;
    transition:opacity 0.3s;
    pointer-events:none
  }
  .gfc-count {
    position:absolute;
    top:4px;
    right:4px;
    z-index:5;
    background:rgba(0,0,0,0.65);
    border:1px solid rgba(255,255,255,0.22);
    border-radius:10px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    font-family:'DM Sans',sans-serif;
    font-size:0.52rem;
    font-weight:600;
    color:rgba(255,255,255,0.90);
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    line-height:1
  }
  .gfc-count.hidden {
    display:none
  }
  .garden-fruit-card::after {
    content:'';
    position:absolute;
    inset:0;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.08);
    pointer-events:none;
    z-index:4
  }
  .garden-fruit-card.gfc-unlocked::after {
    border-color:rgba(255,255,255,0.14)
  }
  .session-summary-overlay {
    position:fixed;
    inset:0;
    z-index:300;
    background:rgba(0,0,0,0.85);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.4s cubic-bezier(0.16,1,0.3,1)
  }
  .session-summary-overlay.ss-open {
    opacity:1;
    pointer-events:all
  }
  .session-summary-card {
    position:relative;
    width:min(380px,92vw);
    max-height:88vh;
    overflow-y:auto;
    background:linear-gradient(160deg,#0d2535 0%,#071520 60%,#020b12 100%);
    border:1px solid rgba(72,202,228,0.18);
    border-radius:24px;
    padding:2rem 1.6rem 1.6rem;
    box-shadow:0 30px 80px rgba(0,0,0,0.9),0 0 60px rgba(27,154,170,0.08);
    transform:translateY(30px) scale(0.95);
    transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
    scrollbar-width:none
  }
  .session-summary-card::-webkit-scrollbar {
    display:none
  }
  .session-summary-overlay.ss-open .session-summary-card {
    transform:translateY(0) scale(1)
  }
  .ss-header {
    text-align:center;
    margin-bottom:1.5rem
  }
  .ss-icon {
    font-size:2.4rem;
    margin-bottom:0.6rem;
    display:block;
    filter:drop-shadow(0 0 14px rgba(72,202,228,0.5))
  }
  .ss-title {
    font-family:'Cormorant Garamond',serif;
    font-size:1.65rem;
    font-weight:400;
    letter-spacing:0.02em;
    color:rgba(255,255,255,0.92);
    margin:0 0 0.3rem
  }
  .ss-subtitle {
    font-family:'DM Sans',sans-serif;
    font-size:0.78rem;
    color:rgba(72,202,228,0.6);
    letter-spacing:0.08em;
    text-transform:uppercase
  }
  .ss-divider {
    width:100%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(72,202,228,0.25),transparent);
    margin:0 0 1.2rem
  }
  .ss-section-label {
    font-family:'DM Sans',sans-serif;
    font-size:0.68rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(72,202,228,0.5);
    margin-bottom:0.9rem
  }
  .ss-participants {
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    margin-bottom:1.6rem;
    justify-content:center
  }
  .ss-participant {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.45rem;
    position:relative;
    cursor:pointer
  }
  .ss-avatar {
    width:52px;
    height:52px;
    border-radius:50%;
    background:linear-gradient(135deg,#1B9AAA,#9B5DE5);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Cormorant Garamond',serif;
    font-size:1.3rem;
    color:white;
    font-weight:400;
    border:2px solid rgba(72,202,228,0.25);
    overflow:hidden;
    position:relative;
    transition:border-color 0.2s,transform 0.18s;
    flex-shrink:0
  }
  .ss-avatar img {
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    position:absolute;
    inset:0
  }
  .ss-participant:hover .ss-avatar {
    border-color:rgba(72,202,228,0.6);
    transform:translateY(-2px)
  }
  .ss-participant-name {
    font-family:'DM Sans',sans-serif;
    font-size:0.72rem;
    color:rgba(255,255,255,0.55);
    text-align:center;
    max-width:60px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .ss-profile-popup {
    position:absolute;
    bottom:calc(100% + 10px);
    left:50%;
    transform:translateX(-50%) scale(0.85);
    background:#0d2535;
    border:1px solid rgba(72,202,228,0.25);
    border-radius:12px;
    padding:0.35rem 0.7rem;
    white-space:nowrap;
    z-index:10;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.18s,transform 0.18s;
    box-shadow:0 8px 24px rgba(0,0,0,0.6)
  }
  .ss-profile-popup.ss-popup-open {
    opacity:1;
    pointer-events:all;
    transform:translateX(-50%) scale(1)
  }
  .ss-profile-popup-btn {
    background:none;
    border:none;
    cursor:pointer;
    font-family:'DM Sans',sans-serif;
    font-size:0.8rem;
    color:#48CAE4;
    padding:0.2rem 0;
    display:flex;
    align-items:center;
    gap:0.35rem
  }
  .ss-profile-popup-btn svg {
    opacity:0.8
  }
  .ss-thoughts-area {
    margin-bottom:1.2rem
  }
  .ss-thoughts-input {
    width:100%;
    box-sizing:border-box;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(72,202,228,0.2);
    border-radius:14px;
    padding:0.9rem 1rem;
    color:rgba(255,255,255,0.85);
    font-family:'DM Sans',sans-serif;
    font-size:0.88rem;
    resize:none;
    outline:none;
    min-height:90px;
    transition:border-color 0.2s;
    display:none
  }
  .ss-thoughts-input::placeholder {
    color:rgba(255,255,255,0.25)
  }
  .ss-thoughts-input:focus {
    border-color:rgba(72,202,228,0.45)
  }
  .ss-thoughts-input.ss-visible {
    display:block
  }
  .ss-share-btn {
    width:100%;
    padding:0.8rem;
    background:linear-gradient(135deg,rgba(27,154,170,0.22),rgba(72,202,228,0.12));
    border:1px solid rgba(72,202,228,0.28);
    border-radius:14px;
    color:#48CAE4;
    font-family:'DM Sans',sans-serif;
    font-size:0.88rem;
    font-weight:500;
    cursor:pointer;
    transition:opacity 0.22s ease,transform 0.22s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem
  }
  .ss-share-btn:hover {
    background:linear-gradient(135deg,rgba(27,154,170,0.38),rgba(72,202,228,0.22));
    border-color:rgba(72,202,228,0.5);
    color:white;
    transform:translateY(-1px)
  }
  .ss-send-btn {
    width:100%;
    margin-top:0.6rem;
    padding:0.8rem;
    background:linear-gradient(135deg,#1B9AAA 0%,#0a6b79 100%);
    border:none;
    border-radius:14px;
    color:white;
    font-family:'DM Sans',sans-serif;
    font-size:0.88rem;
    font-weight:500;
    cursor:pointer;
    transition:opacity 0.22s ease,transform 0.22s ease;
    display:none
  }
  .ss-send-btn:hover {
    opacity:0.88;
    transform:translateY(-1px)
  }
  .ss-send-btn.ss-visible {
    display:block
  }
  .ss-sent-msg {
    text-align:center;
    padding:0.5rem;
    font-family:'DM Sans',sans-serif;
    font-size:0.82rem;
    color:rgba(72,202,228,0.7);
    display:none
  }
  .ss-sent-msg.ss-visible {
    display:block
  }
  .ss-thoughts-feed {
    margin-bottom:1.3rem
  }
  .ss-thought-bubble {
    background:rgba(155,93,229,0.08);
    border:1px solid rgba(155,93,229,0.18);
    border-radius:14px;
    padding:0.7rem 0.9rem;
    margin-bottom:0.5rem
  }
  .ss-thought-name {
    font-family:'DM Sans',sans-serif;
    font-size:0.68rem;
    color:rgba(155,93,229,0.7);
    letter-spacing:0.06em;
    text-transform:uppercase;
    margin-bottom:0.3rem
  }
  .ss-thought-text {
    font-family:'DM Sans',sans-serif;
    font-size:0.84rem;
    color:rgba(255,255,255,0.72);
    line-height:1.45
  }
  .ss-footer {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0.7rem;
    margin-top:0.4rem
  }
  .ss-btn-continue {
    padding:0.75rem 0.5rem;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:14px;
    color:rgba(255,255,255,0.55);
    font-family:'DM Sans',sans-serif;
    font-size:0.82rem;
    cursor:pointer;
    transition:opacity 0.2s ease,transform 0.2s ease;
    text-align:center
  }
  .ss-btn-continue:hover {
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.22);
    color:rgba(255,255,255,0.8)
  }
  .ss-btn-home {
    padding:0.75rem 0.5rem;
    background:linear-gradient(135deg,rgba(27,154,170,0.2),rgba(72,202,228,0.1));
    border:1px solid rgba(72,202,228,0.28);
    border-radius:14px;
    color:#48CAE4;
    font-family:'DM Sans',sans-serif;
    font-size:0.82rem;
    font-weight:500;
    cursor:pointer;
    transition:opacity 0.2s ease,transform 0.2s ease;
    text-align:center
  }
  .ss-btn-home:hover {
    background:linear-gradient(135deg,rgba(27,154,170,0.35),rgba(72,202,228,0.2));
    border-color:rgba(72,202,228,0.5);
    color:white
  }
  .garden-modal {
    position:fixed;
    inset:0;
    z-index:200;
    background:rgba(0,0,0,0.78);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.28s
  }
  .garden-modal.gm-open {
    opacity:1;
    pointer-events:all
  }
  .gm-card {
    position:relative;
    width:min(220px,52vw);
    aspect-ratio:300/430;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 20px 70px rgba(0,0,0,0.85);
    transform:scale(0.82);
    transition:transform 0.32s cubic-bezier(0.16,1,0.3,1)
  }
  .garden-modal.gm-open .gm-card {
    transform:scale(1)
  }
  .gm-bg {
    position:absolute;
    inset:0;
    width:100%;
    height:100%
  }
  .gm-fruit {
    position:absolute;
    left:50%;
    top:40%;
    transform:translate(-50%,-50%);
    width:80%;
    pointer-events:none
  }
  .gm-footer {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:0.7rem 0.6rem 0.8rem;
    background:linear-gradient(transparent,rgba(0,0,0,0.85));
    text-align:center;
    z-index:2
  }
  .gm-name {
    font-family:'Cormorant Garamond',serif;
    font-size:1.05rem;
    letter-spacing:0.12em;
    text-transform:capitalize;
    color:rgba(255,255,255,0.92)
  }
  .gm-close {
    position:fixed;
    top:1.2rem;
    right:1.2rem;
    background:rgba(0,0,0,0.55);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:50%;
    width:34px;
    height:34px;
    color:rgba(255,255,255,0.65);
    font-size:1.1rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity 0.2s ease,transform 0.2s ease;
    z-index:201
  }
  .gm-close:hover {
    background:rgba(255,255,255,0.1);
    color:white
  }
  .profile-card-title {
    font-size:0.65rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.25);
    padding:0.8rem 1rem 0.3rem
  }
  .profile-field {
    padding:0.65rem 1rem;
    border-bottom:1px solid rgba(255,255,255,0.06)
  }
  .profile-field:last-child {
    border-bottom:none
  }
  .profile-field-label {
    font-size:0.63rem;
    color:rgba(255,255,255,0.3);
    letter-spacing:0.06em;
    text-transform:uppercase;
    margin-bottom:0.18rem
  }
  .profile-field-textarea {
    background:none;
    border:none;
    color:rgba(255,255,255,0.8);
    font-family:'DM Sans',sans-serif;
    font-size:0.87rem;
    outline:none;
    width:100%;
    resize:none;
    line-height:1.5;
    min-height:70px;
    padding:0
  }
  .profile-field-textarea::placeholder {
    color:rgba(255,255,255,0.2)
  }
  .profile-save-btn {
    width:100%;
    padding:0.85rem;
    background:linear-gradient(135deg,#1B9AAA 0%,#0a6b79 100%);
    border:none;
    border-radius:14px;
    color:white;
    font-family:'DM Sans',sans-serif;
    font-size:0.9rem;
    font-weight:500;
    cursor:pointer;
    transition:opacity 0.25s ease,transform 0.25s ease;
    box-shadow:0 4px 20px rgba(27,154,170,0.3)
  }
  .profile-save-btn:hover {
    transform:translateY(-1px);
    box-shadow:0 8px 30px rgba(27,154,170,0.5)
  }
  .profile-logout-btn {
    width:100%;
    padding:0.85rem;
    background:rgba(239,68,68,0.06);
    border:1px solid rgba(239,68,68,0.2);
    border-radius:14px;
    color:#ef4444;
    font-family:'DM Sans',sans-serif;
    font-size:0.87rem;
    cursor:pointer;
    transition:opacity 0.25s ease,transform 0.25s ease
  }
  .profile-logout-btn:hover {
    background:rgba(239,68,68,0.12);
    border-color:rgba(239,68,68,0.4)
  }
  #social {
    background:#ffffff;
    overflow-y:auto;
    flex-direction:column
  }
  .social-header {
    display:flex;
    align-items:center;
    gap:0.8rem;
    padding:1.2rem 1.4rem 0.8rem;
    flex-shrink:0;
    border-bottom:1px solid rgba(0,0,0,0.07)
  }
  .social-header .profile-back {
    color:rgba(0,0,0,0.4)
  }
  .social-header .profile-back:hover {
    color:rgba(0,0,0,0.75)
  }
  .social-header .profile-title {
    color:rgba(0,0,0,0.75)
  }
  .social-tabs {
    display:flex;
    padding:0 1.4rem;
    flex-shrink:0;
    border-bottom:1px solid rgba(0,0,0,0.07);
    background:#ffffff
  }
  .social-tab {
    flex:1;
    padding:0.7rem 0;
    text-align:center;
    font-size:0.78rem;
    color:rgba(0,0,0,0.3);
    background:none;
    border:none;
    border-bottom:2px solid transparent;
    cursor:pointer;
    font-family:'DM Sans',sans-serif;
    transition:opacity 0.2s ease,transform 0.2s ease;
    margin-bottom:-1px
  }
  .social-tab.active {
    color:rgba(0,0,0,0.75);
    border-bottom-color:#1B9AAA;
    font-weight:500
  }
  .social-body {
    flex:1;
    overflow-y:auto;
    background:#ffffff
  }
  .social-search-wrap {
    padding:0.9rem 1.4rem 0.4rem;
    position:relative
  }
  .social-search-icon {
    position:absolute;
    left:2.1rem;
    top:50%;
    transform:translateY(-50%);
    color:rgba(0,0,0,0.25);
    pointer-events:none;
    font-size:0.9rem
  }
  .social-search {
    width:100%;
    padding:0.65rem 1rem 0.65rem 2.2rem;
    background:rgba(0,0,0,0.04);
    border:1px solid rgba(0,0,0,0.1);
    border-radius:12px;
    color:rgba(0,0,0,0.75);
    font-family:'DM Sans',sans-serif;
    font-size:0.85rem;
    outline:none;
    transition:border-color 0.2s;
    box-sizing:border-box
  }
  .social-search:focus {
    border-color:rgba(27,154,170,0.5);
    background:rgba(27,154,170,0.03)
  }
  .social-search::placeholder {
    color:rgba(0,0,0,0.25)
  }
  .social-section-title {
    font-size:0.62rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:rgba(0,0,0,0.3);
    padding:0.8rem 1.4rem 0.2rem
  }
  .social-user-card {
    display:flex;
    align-items:center;
    gap:0.85rem;
    padding:0.65rem 1.4rem;
    transition:background 0.15s
  }
  .social-user-card:hover {
    background:rgba(0,0,0,0.02)
  }
  .social-user-avatar {
    width:40px;
    height:40px;
    border-radius:50%;
    flex-shrink:0;
    background:linear-gradient(135deg,#1B9AAA,#9B5DE5);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.95rem;
    color:white;
    font-family:'Cormorant Garamond',serif;
    overflow:hidden;
    position:relative
  }
  .social-user-avatar img {
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%
  }
  .social-status-ring {
    position:absolute;
    bottom:-1px;
    right:-1px;
    width:11px;
    height:11px;
    border-radius:50%;
    border:2px solid #ffffff
  }
  .social-status-ring.online {
    background:#22c55e
  }
  .social-status-ring.offline {
    background:rgba(0,0,0,0.15)
  }
  .social-user-info {
    flex:1;
    min-width:0
  }
  .social-user-name {
    font-size:0.87rem;
    color:rgba(0,0,0,0.75);
    font-weight:500
  }
  .social-user-sub {
    font-size:0.72rem;
    color:rgba(0,0,0,0.35);
    margin-top:0.08rem
  }
  .social-add-btn {
    background:rgba(27,154,170,0.1);
    border:1px solid rgba(27,154,170,0.3);
    border-radius:20px;
    color:#1B9AAA;
    font-size:0.72rem;
    padding:0.3rem 0.8rem;
    font-family:'DM Sans',sans-serif;
    cursor:pointer;
    transition:opacity 0.2s ease,transform 0.2s ease;
    white-space:nowrap
  }
  .social-add-btn:hover {
    background:rgba(27,154,170,0.18);
    border-color:rgba(27,154,170,0.55)
  }
  .social-add-btn.added {
    background:rgba(0,0,0,0.04);
    border-color:rgba(0,0,0,0.1);
    color:rgba(0,0,0,0.3);
    cursor:default;
    pointer-events:none
  }
  .social-friend-row {
    display:flex;
    align-items:center;
    gap:0.85rem;
    padding:0.65rem 1.4rem;
    border-bottom:1px solid rgba(0,0,0,0.05);
    cursor:pointer;
    transition:background 0.15s
  }
  .social-friend-row:hover {
    background:rgba(0,0,0,0.02)
  }
  .social-friend-info {
    flex:1;
    min-width:0
  }
  .social-friend-name {
    font-size:0.87rem;
    color:rgba(0,0,0,0.75);
    font-weight:500
  }
  .social-friend-stats {
    font-size:0.71rem;
    color:rgba(0,0,0,0.35);
    margin-top:0.08rem
  }
  .social-friend-actions {
    display:flex;
    gap:0.4rem
  }
  .social-invite-btn {
    background:rgba(27,154,170,0.1);
    border:1px solid rgba(27,154,170,0.3);
    border-radius:20px;
    color:#1B9AAA;
    font-size:0.72rem;
    padding:0.28rem 0.7rem;
    font-family:'DM Sans',sans-serif;
    cursor:pointer;
    transition:opacity 0.2s ease,transform 0.2s ease;
    white-space:nowrap
  }
  .social-invite-btn:hover {
    background:rgba(27,154,170,0.18);
    border-color:rgba(27,154,170,0.55)
  }
  .social-invite-btn:disabled {
    background:rgba(0,0,0,0.04);
    border-color:rgba(0,0,0,0.08);
    color:rgba(0,0,0,0.25);
    cursor:default
  }
  .social-empty {
    padding:2.5rem 1.4rem;
    text-align:center;
    color:rgba(0,0,0,0.28);
    font-size:0.82rem;
    line-height:1.7
  }
  .social-remove-btn {
    background:none;
    border:none;
    color:rgba(0,0,0,0.2);
    font-size:1rem;
    cursor:pointer;
    padding:0.2rem 0.4rem;
    border-radius:8px;
    transition:opacity 0.15s ease,transform 0.15s ease;
    line-height:1
  }
  .social-remove-btn:hover {
    color:rgba(200,50,50,0.7);
    background:rgba(200,50,50,0.06)
  }
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:150px;
  opacity:0.5;
  }
  #splash {
    background:transparent;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    overflow:hidden;
    position:relative
  }
  #splash canvas.splash-canvas {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    will-change:transform
  }
  #splash .splash-content {
    position:absolute;
    inset:0;
    z-index:10;
    text-align:center;
    pointer-events:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:22vh 1.5rem 0
  }
  .brand-amp {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.8rem,7.5vw,3.8rem);
    display:block;
    animation:titleRise 2.2s 1.8s cubic-bezier(0.16,1,0.3,1) forwards;
    opacity:0;
    color:#60b0ff!important;
    -webkit-text-fill-color:#60b0ff!important;
    text-shadow:0px 0px 10px rgba(0,0,0,0.5),0 0 30px rgba(60,140,255,0.8);
    background:none!important;
    -webkit-background-clip:unset!important;
    background-clip:unset!important;
    filter:none
  }
  #welcome {
    background:transparent
  }
  .welcome-content {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    min-height:100%;
    padding:2.5rem 1.8rem 2rem;
    max-width:480px;
    margin:0 auto;
    width:100%;
    align-items:center
  }
  .spiral-logo {
    width:72px;
    height:72px;
    margin:0 auto 1.2rem;
    animation:slowSpin 24s linear infinite;
    filter:drop-shadow(0 0 12px rgba(0,210,60,0.55)) drop-shadow(0 0 26px rgba(0,160,40,0.3));
    will-change:transform
  }
  #welcome:not(.active) .spiral-logo {
    animation-play-state:paused
  }
  @keyframes slowSpin {
    to {
      transform:rotate(360deg)
    }
  }
  @keyframes spin {
    to {
      transform:rotate(360deg)
    }
  }
  .welcome-tagline {
    font-family:'DM Sans',sans-serif;
    font-size:0.65rem;
    color:rgba(72,202,228,0.5);
    text-align:center;
    letter-spacing:0.35em;
    text-transform:uppercase;
    margin-bottom:0.6rem
  }
  .welcome-title-unused {
    display:none
  }
  .welcome-subtitle-unused {
    display:none
  }
  .app-download-row {
    display:flex;
    gap:0.6rem;
    justify-content:center;
    margin:1.4rem 0 1rem;
    width:100%
  }
  .app-badge {
    position:relative;
    cursor:not-allowed;
    pointer-events:auto
  }
  .app-badge:hover {
    background:rgba(255,255,255,0.04);
    border-color:rgba(255,255,255,0.1);
    color:rgba(255,255,255,0.35);
    transform:none
  }
  .app-badge-tooltip {
    position:absolute;
    bottom:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%) scale(0.88);
    background:rgba(10,12,22,0.96);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:8px;
    padding:0.35rem 0.75rem;
    font-size:0.68rem;
    font-family:'DM Sans',sans-serif;
    color:rgba(255,255,255,0.55);
    white-space:nowrap;
    letter-spacing:0.06em;
    text-transform:uppercase;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.18s ease,transform 0.18s ease;
    z-index:99
  }
  .app-badge-tooltip::after {
    content:'';
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    border:5px solid transparent;
    border-top-color:rgba(255,255,255,0.12)
  }
  .app-badge:hover .app-badge-tooltip,.app-badge.tooltip-show .app-badge-tooltip,.btn-disabled-tooltip:hover .app-badge-tooltip,.btn-disabled-tooltip.tooltip-show .app-badge-tooltip {
    opacity:1;
    transform:translateX(-50%) scale(1)
  }
  .app-badge .badge-icon {
    font-size:1rem;
    flex-shrink:0;
    opacity:0.7
  }
  .app-badge .badge-sub {
    opacity:0.45;
    font-size:0.55rem;
    display:block;
    line-height:1.2
  }
  .app-badge .badge-name {
    font-weight:500;
    font-size:0.7rem
  }
  .welcome-buttons {
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    width:100%
  }
  .welcome-buttons .btn-primary {
    margin-bottom:0.3rem
  }
  @keyframes wFadeUp {
    from {
      opacity:0;
      transform:translateY(22px)
    }
    to {
      opacity:1;
      transform:translateY(0)
    }
  }
  .welcome-content .spiral-logo {
    animation:wFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.1s both,slowSpin 20s linear 0.9s infinite
  }
  .welcome-content .welcome-tagline {
    animation:wFadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.25s both
  }
  .welcome-content .welcome-title {
    animation:wFadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.4s both,titleBreathe 7s ease-in-out 1.6s infinite
  }
  .welcome-content .welcome-subtitle {
    animation:wFadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.58s both
  }
  .welcome-content .app-download-row {
    animation:wFadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.7s both
  }
  .welcome-content .welcome-buttons {
    animation:wFadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.82s both
  }
  .btn-primary {
    width:100%;
    padding:1.05rem;
    background:linear-gradient(135deg,var(--cyan) 0%,#0a6b79 100%);
    border:none;
    border-radius:50px;
    color:white;
    font-family:'DM Sans',sans-serif;
    font-size:0.88rem;
    font-weight:500;
    cursor:pointer;
    transition:opacity 0.35s ease,transform 0.35s ease-bezier(0.4,0,0.2,1);
    box-shadow:0 4px 24px rgba(27,154,170,0.4),inset 0 1px 0 rgba(255,255,255,0.15),inset 0 -1px 0 rgba(0,0,0,0.1);
    letter-spacing:0.1em;
    text-transform:uppercase;
    position:relative;
    overflow:hidden
  }
  .btn-primary::before {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,0.12) 0%,transparent 55%);
    border-radius:50px;
    pointer-events:none;
    transition:opacity 0.2s ease
  }
  .btn-primary::after {
    content:'';
    position:absolute;
    top:-50%;
    left:-60%;
    width:40%;
    height:200%;
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,0.13) 50%,transparent 70%);
    transform:skewX(-15deg) translateX(-100%);
    transition:transform 0.55s ease;
    pointer-events:none
  }
  .btn-primary:hover {
    transform:translateY(-2px);
    box-shadow:0 14px 44px rgba(27,154,170,0.6),inset 0 1px 0 rgba(255,255,255,0.22)
  }
  .btn-primary:hover::after {
    transform:skewX(-15deg) translateX(480%)
  }
  .btn-primary:active {
    transform:translateY(1px) scale(0.985);
    box-shadow:0 3px 12px rgba(27,154,170,0.3);
    transition-duration:0.1s
  }
  .btn-outline {
    width:100%;
    padding:0.85rem;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.28);
    border-radius:50px;
    color:rgba(255,255,255,0.82);
    font-family:'DM Sans',sans-serif;
    font-size:0.82rem;
    font-weight:400;
    cursor:pointer;
    transition:opacity 0.3s ease,transform 0.3s ease;
    letter-spacing:0.04em
  }
  .btn-outline:hover {
    background:rgba(255,255,255,0.14);
    border-color:rgba(72,202,228,0.55);
    color:rgba(255,255,255,1);
    transform:translateY(-1px)
  }
  .btn-outline:has(.btn-icon-bell):hover {
    background:rgba(255,215,0,0.10);
    border-color:rgba(255,215,0,0.55);
    color:#FFD700;
    box-shadow:0 0 18px rgba(255,215,0,0.18)
  }
  .btn-outline:has(.btn-icon-gold):hover {
    background:rgba(155,93,229,0.12);
    border-color:rgba(155,93,229,0.6);
    color:#c084fc;
    box-shadow:0 0 18px rgba(155,93,229,0.22)
  }
  .btn-primary,.btn-outline {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.6rem
  }
  .btn-svg-icon {
    display:flex;
    align-items:center;
    flex-shrink:0
  }
  .btn-icon-gold {
    color:#9B5DE5;
    filter:drop-shadow(0 0 6px rgba(155,93,229,0.65))
  }
  .btn-outline:hover .btn-icon-gold {
    filter:drop-shadow(0 0 10px rgba(155,93,229,0.95))
  }
  .btn-icon-cyan {
    color:#48CAE4;
    filter:drop-shadow(0 0 5px rgba(72,202,228,0.55))
  }
  .btn-outline:hover .btn-icon-cyan {
    filter:drop-shadow(0 0 9px rgba(72,202,228,0.9))
  }
  .btn-icon-bell {
    color:#FFD700;
    filter:drop-shadow(0 0 5px rgba(255,215,0,0.55))
  }
  .btn-outline:hover .btn-icon-bell {
    filter:drop-shadow(0 0 10px rgba(255,215,0,0.9))
  }
  .btn-share {
    background:none;
    border:none;
    color:var(--white-40);
    cursor:pointer;
    padding:0.5rem;
    transition:opacity 0.3s ease,transform 0.3s ease;
    margin-top:0.3rem
  }
  .btn-share:hover {
    color:var(--cyan-light);
    transform:scale(1.1)
  }
  .btn-icon {
    width:40px;
    height:40px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    color:rgba(255,255,255,0.7);
    font-size:1.2rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity 0.3s ease,transform 0.3s ease;
    flex-shrink:0
  }
  .btn-icon:hover {
    background:rgba(255,255,255,0.1);
    border-color:rgba(72,202,228,0.4);
    color:white
  }
  #name-entry {
    background:radial-gradient(ellipse at 20% 50%,rgba(123,44,191,0.25) 0%,transparent 50%),radial-gradient(ellipse at 80% 30%,rgba(27,154,170,0.2) 0%,transparent 45%),radial-gradient(ellipse at 50% 80%,rgba(155,93,229,0.2) 0%,transparent 40%),var(--deep-blue)
  }
  .name-entry-content {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:100%;
    padding:1.5rem 2rem 2rem;
    max-width:480px;
    margin:0 auto;
    width:100%
  }
  .sacred-geometry {
    width:80px;
    height:80px;
    margin:1.2rem auto 0.8rem;
    display:block
  }
  .name-entry-title {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.8rem,7vw,2.5rem);
    font-weight:300;
    text-align:center;
    line-height:1.2;
    margin-bottom:0.5rem;
    letter-spacing:0.05em
  }
  .name-entry-subtitle {
    color:var(--white-40);
    font-size:0.82rem;
    text-align:center;
    letter-spacing:0.05em;
    line-height:1.6;
    margin-bottom:2rem
  }
  .name-input {
    width:100%;
    padding:1rem 0;
    background:none;
    border:none;
    border-bottom:1px solid var(--white-15);
    color:white;
    font-family:'Cormorant Garamond',serif;
    font-size:1.5rem;
    font-weight:300;
    text-align:center;
    letter-spacing:0.1em;
    outline:none;
    transition:border-color 0.3s
  }
  .name-input:focus {
    border-bottom-color:var(--cyan)
  }
  .name-input::placeholder {
    color:var(--white-40);
    font-size:1rem
  }
  .name-hint {
    color:var(--white-40);
    font-size:0.75rem;
    text-align:center;
    font-style:italic;
    margin:0.8rem 0 auto
  }
  #instructions {
    background:transparent
  }
  .instructions-inner {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    min-height:100%;
    max-width:480px;
    margin:0 auto;
    width:100%;
    padding:1.5rem 1.5rem 0
  }
  .page-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:1.5rem;
    padding:0 0.2rem
  }
  .page-title-text {
    font-size:1rem;
    font-weight:400;
    letter-spacing:0.1em;
    color:var(--white-70);
    text-transform:uppercase;
    font-size:0.85rem
  }
  .instructions-scroll {
    flex:1;
    overflow-y:auto;
    padding-bottom:1rem
  }
  .instructions-card {
    background:var(--white-08);
    border:1px solid var(--white-15);
    border-radius:20px;
    padding:1.8rem
  }
  .inst-quote {
    font-family:'Cormorant Garamond',serif;
    font-size:1.6rem;
    font-style:italic;
    text-align:center;
    color:var(--cyan-light);
    margin-bottom:0.3rem
  }
  .inst-author {
    color:var(--white-40);
    text-align:center;
    font-size:0.8rem;
    margin-bottom:1.2rem
  }
  .inst-divider {
    border:none;
    border-top:1px solid var(--white-15);
    margin:1.2rem 0
  }
  .inst-section-title {
    font-size:0.85rem;
    font-weight:500;
    letter-spacing:0.08em;
    color:var(--cyan-light);
    margin-bottom:0.5rem;
    text-transform:uppercase
  }
  .inst-text {
    color:var(--white-70);
    font-size:0.9rem;
    line-height:1.7;
    font-weight:300
  }
  .inst-highlight {
    background:rgba(72,202,228,0.08);
    border-left:3px solid var(--cyan);
    border-radius:0 10px 10px 0;
    padding:0.8rem 1rem;
    margin:0.8rem 0;
    color:var(--white-70);
    font-size:0.88rem;
    line-height:1.6
  }
  .body-map-container {
    display:flex;
    justify-content:center;
    margin:1.6rem 0 0.4rem
  }
  .body-map-card {
    max-width:80%;
    width:100%;
    border-radius:16px;
    background:#000;
    border:1.5px solid rgba(180,150,60,0.6);
    box-shadow:0 0 0 1px rgba(180,150,60,0.15),0 0 0 6px rgba(180,150,60,0.08),0 12px 40px rgba(0,0,0,0.6),0 0 60px rgba(72,202,228,0.06),inset 0 1px 0 rgba(255,245,220,0.1);
    padding:0;
    position:relative;
    overflow:hidden
  }
  .body-map-card::before {
    content:'';
    position:absolute;
    inset:5px;
    border:0.5px solid rgba(180,150,60,0.25);
    border-radius:12px;
    pointer-events:none;
    z-index:2
  }
  .body-map-card::after {
    content:'';
    position:absolute;
    inset:0;
    border-radius:16px;
    box-shadow:inset 0 0 40px rgba(0,0,0,0.4);
    pointer-events:none;
    z-index:2
  }
  .body-map-card img {
    width:100%;
    height:auto;
    display:block;
    border-radius:16px;
    position:relative;
    z-index:1
  }
  .body-map-placeholder {
    width:100%;
    aspect-ratio:3 / 4;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    color:rgba(180,150,60,0.55);
    font-family:'Caveat',cursive;
    font-size:1rem;
    letter-spacing:0.06em;
    position:relative;
    z-index:1
  }
  .body-map-placeholder svg {
    opacity:0.4
  }
  .inst-bottom {
    padding:1rem 0
  }
  .inst-action-row {
    display:flex;
    gap:0.8rem;
    align-items:center;
    margin-top:1rem
  }
  .btn-review {
    flex:1;
    padding:0.7rem 1rem;
    background:var(--teal);
    border:none;
    border-radius:50px;
    color:white;
    font-family:'DM Sans',sans-serif;
    font-size:0.85rem;
    cursor:pointer;
    transition:opacity 0.3s ease,transform 0.3s ease
  }
  .btn-icon-sm {
    width:36px;
    height:36px;
    background:var(--white-08);
    border:1px solid var(--white-15);
    border-radius:10px;
    color:white;
    font-size:1rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:opacity 0.3s ease,transform 0.3s ease
  }
  .btn-icon-sm:hover {
    background:var(--teal-mid)
  }
  #language {
    background:transparent
  }
  .language-inner {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    min-height:100%;
    max-width:480px;
    margin:0 auto;
    width:100%;
    padding:1.5rem
  }
  .lang-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0.8rem;
    flex:1;
    padding-bottom:1rem
  }
  .lang-btn {
    padding:1rem;
    background:var(--white-08);
    border:1px solid var(--white-15);
    border-radius:14px;
    color:white;
    font-family:'DM Sans',sans-serif;
    font-size:0.9rem;
    cursor:pointer;
    transition:opacity 0.3s ease,transform 0.3s ease;
    display:flex;
    align-items:center;
    gap:0.6rem;
    text-align:left
  }
  .lang-btn:hover {
    background:var(--white-15);
    border-color:var(--cyan);
    transform:translateY(-2px)
  }
  .lang-btn.selected {
    background:rgba(27,154,170,0.2);
    border-color:var(--cyan);
    color:var(--cyan-light)
  }
  .lang-flag {
    font-size:1.3rem
  }
  .lang-name {
    font-size:0.9rem;
    font-weight:300
  }
  #game {
    background:transparent;
    overflow:hidden!important
  }
  .game-inner {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    height:100dvh;
    max-width:480px;
    margin:0 auto;
    width:100%;
    padding:0 1.3rem 1rem;
    box-sizing:border-box
  }
  
  .game-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1rem 0 0.8rem;
    gap:0.6rem
  }
  .game-mode-pill {
    display:flex;
    align-items:center;
    gap:0.5rem;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.09);
    border-radius:50px;
    padding:0.35rem 0.9rem;
    font-size:0.72rem;
    color:rgba(255,255,255,0.4);
    letter-spacing:0.08em;
    text-transform:uppercase;
    flex:1;
    min-width:0
  }
  .game-mode-pill span:last-child {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .game-body {
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0
  }
  .question-card {
    background:var(--white-08);
    border:1px solid var(--white-15);
    border-radius:24px;
    padding:2rem 1.8rem;
    margin-bottom:1.2rem;
    box-shadow:0 8px 40px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.04),inset 0 1px 0 rgba(255,255,255,0.08);
    position:relative;
    overflow:hidden
  }
  .question-card::before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 50% 0%,rgba(27,154,170,0.06) 0%,transparent 65%);
    pointer-events:none
  }
  }
  .question-number {
    font-size:0.7rem;
    letter-spacing:0.25em;
    color:var(--cyan);
    text-transform:uppercase;
    margin-bottom:1rem;
    text-align:center
  }
  .question-text {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.35rem,4.8vw,1.8rem);
    font-weight:300;
    text-align:center;
    line-height:1.5;
    letter-spacing:0.02em;
    color:rgba(255,255,255,0.95);
    animation:fadeIn 0.8s ease;
    text-shadow:0 2px 20px rgba(0,0,0,0.3)
  }
  @keyframes fadeIn {
    from {
      opacity:0;
      transform:translateY(8px)
    }
    to {
      opacity:1;
      transform:translateY(0)
    }
  }
  .waiting-badge {
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:130px;
    height:130px;
    border-radius:50%;
    background:radial-gradient(circle at 40% 34%,rgba(210,140,255,1) 0%,rgba(150,60,240,1) 35%,rgba(90,15,180,1) 65%,rgba(20,2,50,1) 100%);
    box-shadow:inset 0 2px 8px rgba(255,255,255,0.12),inset 0 0 30px rgba(180,90,255,0.35),0 0 50px rgba(155,80,240,0.7),0 0 100px rgba(120,40,220,0.35);
    border:1px solid rgba(220,150,255,0.30);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:11;
    overflow:visible;
    animation:waitingCircleBreathe 3s ease-in-out infinite
  }
  @keyframes waitingCircleBreathe {
    0%,100% {
      transform:translate(-50%,-50%) scale(1);
      box-shadow:inset 0 2px 8px rgba(255,255,255,0.12),inset 0 0 30px rgba(180,90,255,0.35),0 0 50px rgba(155,80,240,0.7),0 0 100px rgba(120,40,220,0.35)
    }
    50% {
      transform:translate(-50%,-50%) scale(1.08);
      box-shadow:inset 0 2px 10px rgba(255,255,255,0.16),inset 0 0 42px rgba(200,110,255,0.5),0 0 80px rgba(170,70,255,0.9),0 0 160px rgba(130,40,230,0.45)
    }
  }
  .waiting-radar {
    position:relative;
    width:36px;
    height:36px;
    flex-shrink:0
  }
  .waiting-radar-dot {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:6px;
    height:6px;
    background:#e0aaff;
    border-radius:50%;
    box-shadow:0 0 10px #e0aaff,0 0 22px rgba(200,130,255,0.7)
  }
  .waiting-radar-ring {
    position:absolute;
    inset:0;
    border:1.5px solid rgba(200,130,255,0.75);
    border-radius:50%;
    opacity:0;
    animation:radarPulse 2.2s ease-out infinite
  }
  .waiting-radar-ring:nth-child(2) {
    animation-delay:0.73s
  }
  .waiting-radar-ring:nth-child(3) {
    animation-delay:1.46s
  }
  @keyframes radarPulse {
    0% {
      transform:scale(0.2);
      opacity:0.9
    }
    100% {
      transform:scale(2.6);
      opacity:0
    }
  }
  .waiting-badge-text {
    position:absolute;
    top:calc(100% + 1.1rem);
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.2rem;
    pointer-events:none
  }
  .waiting-badge-title {
    color:rgba(225,190,255,0.92);
    font-family:'Cormorant Garamond',serif;
    font-size:0.95rem;
    font-style:italic;
    letter-spacing:0.12em;
    font-weight:300;
    text-shadow:0 0 18px rgba(180,100,255,0.9),0 0 40px rgba(140,60,230,0.5)
  }
  .waiting-badge-sub {
    color:rgba(200,150,255,0.45);
    font-size:0.62rem;
    letter-spacing:0.06em
  }
  .waiting-dots span {
    animation:wdot 1.4s ease-in-out infinite;
    opacity:0
  }
  .waiting-dots span:nth-child(1) {
    animation-delay:0s
  }
  .waiting-dots span:nth-child(2) {
    animation-delay:0.2s
  }
  .waiting-dots span:nth-child(3) {
    animation-delay:0.4s
  }
  .waiting-dots span:nth-child(4) {
    animation-delay:0.6s
  }
  .waiting-dots span:nth-child(5) {
    animation-delay:0.8s
  }
  .waiting-dots span:nth-child(6) {
    animation-delay:1.0s
  }
  @keyframes wdot {
    0%,100% {
      opacity:0
    }
    40%,60% {
      opacity:1
    }
  }
  .online-turn-pill {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    padding:0.38rem 0.9rem;
    border-radius:50px;
    font-size:0.72rem;
    font-weight:500;
    letter-spacing:0.04em;
    animation:fadeIn 0.4s ease;
    flex-shrink:0;
    white-space:nowrap
  }
  .online-turn-pill.my-turn {
    background:rgba(27,154,170,0.18);
    border:1.5px solid rgba(27,154,170,0.55);
    color:#7DF9F0
  }
  .online-turn-pill.their-turn {
    background:rgba(255,255,255,0.06);
    border:1.5px solid rgba(255,255,255,0.15);
    color:rgba(255,255,255,0.5)
  }
  .turn-dot {
    width:7px;
    height:7px;
    border-radius:50%
  }
  .online-turn-pill.my-turn .turn-dot {
    background:#7DF9F0;
    box-shadow:0 0 6px #7DF9F0;
    animation:pulseDot 1.5s infinite;
    will-change:opacity,transform
  }
  .online-turn-pill.their-turn .turn-dot {
    background:rgba(255,255,255,0.3)
  }
  .turn-indicator-new {
    display:none
  }
  .waiting-opponent {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.6rem;
    padding:0.8rem 0;
    animation:fadeIn 0.5s ease
  }
  .waiting-icon {
    position:relative;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem
  }
  .pulse-ring {
    position:absolute;
    inset:-6px;
    border:2px solid rgba(255,193,7,0.4);
    border-radius:50%;
    animation:pulseRing 2s infinite;
    will-change:transform,opacity
  }
  @keyframes pulseRing {
    0% {
      transform:scale(0.8);
      opacity:1
    }
    100% {
      transform:scale(1.3);
      opacity:0
    }
  }
  .waiting-text {
    font-size:0.82rem;
    color:var(--white-40);
    text-align:center
  }
  .waiting-text span {
    color:var(--cyan-light);
    font-weight:500
  }
  .chat-area {
    display:flex;
    flex-direction:column;
    gap:0.6rem;
    margin-top:0.8rem;
    width:100%
  }
  .my-answer-box {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    animation:bubbleRight 0.4s cubic-bezier(0.22,1,0.36,1)
  }
  @keyframes bubbleRight {
    from {
      opacity:0;
      transform:translateX(16px) scale(0.95)
    }
    to {
      opacity:1;
      transform:translateX(0) scale(1)
    }
  }
  .my-answer-label {
    font-size:0.62rem;
    color:var(--cyan);
    letter-spacing:0.1em;
    text-transform:uppercase;
    margin-bottom:0.3rem;
    padding-right:0.4rem
  }
  .my-answer-bubble {
    background:linear-gradient(135deg,var(--cyan) 0%,#0a6b79 100%);
    color:white;
    font-size:0.92rem;
    line-height:1.55;
    font-weight:400;
    padding:0.75rem 1.1rem;
    border-radius:18px 18px 4px 18px;
    max-width:88%;
    word-break:break-word;
    box-shadow:0 4px 16px rgba(27,154,170,0.3)
  }
  .opponent-answer-box {
    width:100%;
    animation:cardReveal 0.6s cubic-bezier(0.22,1,0.36,1)
  }
  @keyframes cardReveal {
    from {
      opacity:0;
      transform:translateY(20px) scale(0.96)
    }
    to {
      opacity:1;
      transform:translateY(0) scale(1)
    }
  }
  .opp-answer-card {
    position:relative;
    overflow:hidden;
    background:linear-gradient(148deg,rgba(30,12,54,0.97) 0%,rgba(18,7,36,0.95) 60%,rgba(10,4,22,0.93) 100%);
    border:1px solid rgba(155,93,229,0.22);
    border-radius:20px;
    padding:1.8rem 1.25rem 1.4rem;
    box-shadow:0 8px 32px rgba(0,0,0,0.35),inset 0 1px 0 rgba(155,93,229,0.12);
    display:flex;
    flex-direction:column;
    transition:border-color 0.4s;
    contain:layout style paint
  }
  .opp-answer-card::before {
    content:'';
    position:absolute;
    top:0;
    left:1.4rem;
    right:1.4rem;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(155,93,229,0.5),transparent)
  }
  .opp-answer-card::after {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    background-image:radial-gradient(circle,rgba(155,93,229,0.07) 1px,transparent 1px);
    background-size:22px 22px;
    mask-image:radial-gradient(ellipse at 50% 100%,black 0%,transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse at 50% 100%,black 0%,transparent 70%)
  }
  .opp-answer-corner-glow {
    position:absolute;
    top:-50px;
    right:-50px;
    width:160px;
    height:160px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(155,93,229,0.18) 0%,rgba(155,93,229,0.06) 55%,transparent 75%);
    pointer-events:none;
    z-index:0
  }
  .opponent-answer-box.glow-in .opp-answer-card {
    animation:glowReveal 0.7s cubic-bezier(0.22,1,0.36,1) 0.3s both
  }
  @keyframes glowReveal {
    0% {
      opacity:0;
      transform:translateY(16px) scale(0.94)
    }
    40% {
      opacity:1;
      transform:translateY(-3px) scale(1.025)
    }
    70% {
      transform:translateY(1px) scale(0.998)
    }
    100% {
      opacity:1;
      transform:translateY(0) scale(1)
    }
  }
  .opp-answer-shine {
    position:absolute;
    top:-60%;
    left:-40%;
    width:55%;
    height:200%;
    background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.04) 50%,transparent 60%);
    pointer-events:none;
    animation:shineSlide 4s ease 1s infinite;
    z-index:0
  }
  @keyframes shineSlide {
    0% {
      transform:translateX(-10%);
      opacity:0
    }
    8% {
      opacity:1
    }
    42% {
      transform:translateX(280%);
      opacity:1
    }
    48% {
      opacity:0
    }
    100% {
      transform:translateX(280%);
      opacity:0
    }
  }
  #game:not(.active) .opp-answer-shine,.opponent-answer-box:not(.glow-in) .opp-answer-shine {
    animation-play-state:paused
  }
  .opp-answer-top {
    display:none
  }
  .opp-avatar {
    display:none
  }
  .opp-answer-meta {
    display:flex;
    flex-direction:column;
    gap:0.07rem;
    flex:1;
    min-width:0
  }
  .opp-answer-name {
    font-size:0.76rem;
    font-weight:500;
    color:rgba(255,255,255,0.82);
    letter-spacing:0.03em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .opp-answer-tag {
    font-size:0.56rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:rgba(155,93,229,0.65)
  }
  .opp-answer-check {
    font-size:0.78rem;
    color:rgba(155,93,229,0.55);
    flex-shrink:0
  }
  .opp-answer-body {
    font-family:'Cormorant Garamond',serif;
    font-size:1.55rem;
    font-weight:400;
    font-style:italic;
    line-height:1.65;
    color:rgba(255,255,255,0.88);
    letter-spacing:0.01em;
    word-break:break-word;
    position:relative;
    z-index:1;
    padding:0 0.2rem
  }
  .opponent-answer-header {
    display:none
  }
  .opponent-answer-bubble {
    display:none
  }
  .opponent-answer-text {
    display:none
  }
  .typing-indicator {
    display:flex;
    align-items:center;
    gap:0.5rem;
    padding:0.4rem 0.6rem;
    animation:fadeIn 0.3s ease
  }
  .typing-bubble {
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px 18px 18px 4px;
    padding:0.55rem 0.9rem;
    display:flex;
    align-items:center;
    gap:4px
  }
  .typing-bubble span {
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(255,255,255,0.4);
    animation:typingBounce 1.2s ease infinite;
    display:block
  }
  @keyframes typingBounce {
    0%,70%,100% {
      transform:translateY(0) scaleY(1);
      opacity:0.25
    }
    35% {
      transform:translateY(-6px) scaleY(0.85);
      opacity:1
    }
  }
  .typing-bubble span:nth-child(1) {
    animation-delay:0s
  }
  .typing-bubble span:nth-child(2) {
    animation-delay:0.18s
  }
  .typing-bubble span:nth-child(3) {
    animation-delay:0.36s
  }
  .typing-name {
    font-size:0.72rem;
    color:rgba(255,255,255,0.3);
    letter-spacing:0.04em
  }
  .answer-sent-badge {
    display:none
  }
  .answer-sent-dot {
    display:none
  }
  @keyframes answerReveal {
    from {
      opacity:0;
      transform:translateY(14px) scale(0.97)
    }
    to {
      opacity:1;
      transform:translateY(0) scale(1)
    }
  }
  @keyframes glowFade {
    from {
      border-color:rgba(155,93,229,0.6);
      box-shadow:0 0 24px rgba(155,93,229,0.3)
    }
    to {
      border-color:rgba(255,255,255,0.12);
      box-shadow:none
    }
  }
  .answer-container {
    margin-top:0.5rem
  }
  .answer-input-wrap {
    display:flex;
    align-items:center;
    background:var(--white-08);
    border:1px solid var(--white-15);
    border-radius:50px;
    padding:0.3rem 0.3rem 0.3rem 1.2rem;
    gap:0.5rem;
    transition:border-color 0.3s
  }
  .answer-input-wrap:focus-within {
    border-color:var(--cyan);
    box-shadow:0 0 0 3px rgba(27,154,170,0.15),0 0 20px rgba(27,154,170,0.12)
  }
  .answer-input {
    flex:1;
    background:none;
    border:none;
    color:white;
    font-family:'DM Sans',sans-serif;
    font-size:0.9rem;
    font-weight:300;
    outline:none;
    letter-spacing:0.02em
  }
  .answer-input::placeholder {
    color:var(--white-40)
  }
  .btn-send {
    width:38px;
    height:38px;
    background:linear-gradient(135deg,var(--cyan),#0d7a8a);
    border:none;
    border-radius:50%;
    color:white;
    font-size:1.2rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity 0.3s ease,transform 0.3s ease;
    box-shadow:0 3px 12px rgba(27,154,170,0.4);
    flex-shrink:0
  }
  .btn-send:hover {
    transform:scale(1.1);
    box-shadow:0 4px 16px rgba(27,154,170,0.6)
  }
  .btn-next-q {
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    display:none;
    width:100%;
    align-items:center;
    justify-content:center;
    gap:0.6rem;
    margin-top:0.8rem;
    transition:color 0.3s
  }
  .btn-next-q.offline-next {
    display:flex;
    position:fixed;
    bottom:4.5rem;
    left:50%;
    transform:translateX(-50%);
    z-index:100;
    width:auto;
    padding:0;
    background:none;
    border:none!important;
    border-radius:0;
    gap:0;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:none;
    margin-top:0
  }
  .btn-next-q.offline-next .btn-next-q-label {
    display:none!important
  }
  .btn-next-q-inner {
    display:none
  }
  .btn-next-q-inner::before {
    display:none
  }
  @keyframes btnShineQ {
    0% {
      left:-80%
    }
    100% {
      left:160%
    }
  }
  .btn-next-badge-wrap {
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:0.18rem
  }
  .btn-next-hint-label {
    font-family:'DM Sans',sans-serif;
    font-size:0.6rem;
    font-weight:500;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.35);
    line-height:1;
    transition:color 0.3s ease
  }
  .btn-next-badge-wrap:has(.btn-next-ready-badge.one) .btn-next-hint-label {
    color:rgba(72,202,228,0.65)
  }
  .btn-next-badge-wrap:has(.btn-next-ready-badge.both) .btn-next-hint-label {
    color:rgba(74,222,128,0.75)
  }
  .btn-next-ready-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:2.6rem;
    height:2.6rem;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.15);
    font-family:'DM Sans',sans-serif;
    font-size:0.78rem;
    font-weight:500;
    color:rgba(255,255,255,0.5);
    flex-shrink:0;
    transition:opacity 0.3s ease,transform 0.3s ease;
    letter-spacing:0.02em
  }
  .btn-next-ready-badge.one {
    color:var(--cyan-light);
    border-color:rgba(72,202,228,0.4);
    background:rgba(72,202,228,0.1)
  }
  .btn-next-ready-badge.both {
    color:#4ade80;
    border-color:rgba(74,222,128,0.5);
    background:rgba(74,222,128,0.12)
  }
  .btn-next-q.pressed .btn-next-q-inner {
    opacity:0.65
  }
  .btn-next-q.pressed .btn-next-q-label::after {
    content:' ✓'
  }
  .game-footer {
    display:none!important
  }
  .players-bar {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.5rem;
    padding:0.7rem 1.2rem;
    background:var(--white-08);
    border:1px solid var(--white-15);
    border-radius:50px
  }
  .player-slot {
    display:flex;
    align-items:center;
    gap:0.5rem
  }
  .player-name {
    font-size:0.78rem;
    color:var(--white-40);
    letter-spacing:0.05em;
    font-weight:300
  }
  .player-name.active {
    color:var(--white-70)
  }
  .player-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--white-15);
    transition:opacity 0.5s ease,transform 0.5s ease
  }
  .player-dot.active {
    background:var(--cyan);
    box-shadow:0 0 8px var(--cyan);
    animation:pulseDot 2s infinite;
    will-change:opacity,transform
  }
  .player-dot.connected {
    background:#4CAF50;
    box-shadow:0 0 8px #4CAF50;
    animation:pulseGreen 2s infinite;
    will-change:opacity
  }
  @keyframes pulseDot {
    0%,100% {
      opacity:1;
      transform:scale(1)
    }
    50% {
      opacity:0.7;
      transform:scale(1.2)
    }
  }
  @keyframes pulseGreen {
    0%,100% {
      opacity:1
    }
    50% {
      opacity:0.6
    }
  }
  .players-divider {
    width:1px;
    height:24px;
    background:var(--white-15)
  }
  #unlock {
    background:transparent
  }
  .unlock-stars {
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none
  }
  .unlock-inner {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    min-height:100%;
    max-width:480px;
    margin:0 auto;
    width:100%
  }
  .unlock-content {
    flex:1;
    overflow-y:auto;
    padding:0 2rem 2rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:1rem
  }
  .unlock-title {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(2rem,8vw,3rem);
    font-weight:300;
    text-align:center;
    line-height:1.1;
    letter-spacing:0.03em
  }
  .unlock-desc {
    color:var(--white-70);
    font-size:0.85rem;
    line-height:1.7;
    text-align:center
  }
  .unlock-pill {
    background:rgba(123,44,191,0.2);
    border:1px solid rgba(123,44,191,0.4);
    border-radius:50px;
    padding:0.4rem 1rem;
    font-size:0.78rem;
    color:#b07ee0;
    letter-spacing:0.05em
  }
  .btn-support {
    width:100%;
    padding:1rem;
    background:linear-gradient(135deg,var(--purple),var(--purple-light));
    border:none;
    border-radius:50px;
    color:white;
    font-family:'DM Sans',sans-serif;
    font-size:0.95rem;
    font-weight:500;
    cursor:pointer;
    transition:opacity 0.3s ease,transform 0.3s ease;
    box-shadow:0 4px 25px rgba(123,44,191,0.4);
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem
  }
  .btn-support:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 35px rgba(123,44,191,0.6)
  }
  .unlock-code-field {
    width:100%;
    padding:1rem 1.5rem;
    background:var(--white-08);
    border:1px solid rgba(255,255,255,0.25);
    border-radius:50px;
    color:white;
    font-family:'Cormorant Garamond',serif;
    font-size:1.1rem;
    font-weight:300;
    text-align:center;
    letter-spacing:0.15em;
    outline:none;
    transition:opacity 0.3s ease,transform 0.3s ease
  }
  .unlock-code-field:focus {
    border-color:var(--purple-light);
    background:rgba(155,93,229,0.1)
  }
  .unlock-code-field::placeholder {
    color:var(--white-40);
    font-size:0.85rem;
    letter-spacing:0.05em;
    font-family:'DM Sans',sans-serif
  }
  .btn-unlock {
    width:100%;
    padding:1rem;
    background:linear-gradient(135deg,var(--gold),#e6a800);
    border:none;
    border-radius:50px;
    color:#1a1000;
    font-family:'DM Sans',sans-serif;
    font-size:1rem;
    font-weight:700;
    cursor:pointer;
    transition:opacity 0.3s ease,transform 0.3s ease;
    box-shadow:0 4px 25px rgba(255,193,7,0.3);
    letter-spacing:0.05em
  }
  .btn-unlock:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 35px rgba(255,193,7,0.5)
  }
  .unlock-error {
    color:#ff6b6b;
    font-size:0.82rem;
    text-align:center
  }
  @media (max-width:500px) {
    .mode-back-fade {
      margin-top:-1.2rem!important;
      margin-bottom:0.7rem!important
    }
  }
  @media (max-width:500px) and (max-height:700px) {
    .mode-back-fade {
      margin-top:-0.8rem!important;
      margin-bottom:0.5rem!important
    }
  }
  .modal-overlay {
    position:fixed;
    inset:0;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10002;
    padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
    pointer-events:auto
  }
  .modal-overlay:not(.circle-modal)::before {
    content:'';
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.72);
    z-index:-1;
    animation:modalOverlayIn 0.38s cubic-bezier(0.16,1,0.3,1) both
  }
  @keyframes modalOverlayIn {
    from {
      opacity:0
    }
    to {
      opacity:1
    }
  }
  .modal-box {
    background:rgba(5,16,32,0.96);
    padding:1.2rem 2rem 2rem 2rem;
    border-radius:24px;
    max-width:420px;
    width:100%;
    box-shadow:0 24px 64px rgba(0,0,0,0.6),0 4px 24px rgba(0,0,0,0.3);
    border:1px solid rgba(72,202,228,0.18);
    animation:modalBoxIn 0.52s cubic-bezier(0.16,1,0.3,1) both;
    pointer-events:auto
  }
  @keyframes modalBoxIn {
    0% {
      opacity:0;
      transform:translateY(28px) scale(0.94)
    }
    60% {
      opacity:1
    }
    100% {
      opacity:1;
      transform:translateY(0) scale(1)
    }
  }
  .mode-circle {
    position:relative;
    width:min(88vw,88vh);
    height:min(88vw,88vh);
    border-radius:50%;
    background:radial-gradient(circle at 38% 35%,rgb(18,90,110),rgb(0,8,22));
    border:2px solid rgba(72,202,228,0.85);
    box-shadow:0 0 28px rgba(27,154,170,0.35),inset 0 0 28px rgba(27,154,170,0.12);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    pointer-events:auto;
    animation:modeCircleIn 0.48s cubic-bezier(0.16,1,0.3,1) both;
    overflow:hidden
  }
  @media (max-height:700px) {
    .mode-circle {
      width:min(84vw,84vh);
      height:min(84vw,84vh)
    }
    .mode-btn {
      width:min(64vw,64vh);
      padding:0.65rem 0.9rem;
      min-height:60px;
      margin-bottom:0.4rem
    }
    .mode-btn .mode-icon {
      width:44px;
      height:44px
    }
    .mode-btn .mode-title {
      font-size:0.9rem
    }
    .mode-btn .mode-sub {
      font-size:0.72rem
    }
  }
  @media (max-height:580px) {
    .mode-circle {
      width:min(78vw,78vh);
      height:min(78vw,78vh)
    }
    .mode-btn {
      width:min(58vw,58vh);
      padding:0.5rem 0.8rem;
      min-height:52px;
      margin-bottom:0.3rem
    }
    .mode-btn .mode-sub {
      display:none
    }
  }
  @keyframes modeCircleIn {
    0% {
      opacity:0;
      transform:scale(0.88)
    }
    100% {
      opacity:1;
      transform:scale(1)
    }
  }
  .modal-title {
    font-family:'Cormorant Garamond',serif;
    font-size:2rem;
    margin-bottom:1.2rem;
    text-align:center;
    letter-spacing:0.05em
  }
  @keyframes starFadeIn {
    0% {
      opacity:0;
      transform:translateY(18px) scale(0.96)
    }
    100% {
      opacity:1;
      transform:translateY(0) scale(1)
    }
  }
  .mode-star-1 {
    opacity:0;
    animation:starFadeIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.15s forwards
  }
  .mode-star-2 {
    opacity:0;
    animation:starFadeIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.35s forwards
  }
  .mode-star-3 {
    opacity:0;
    animation:starFadeIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.55s forwards
  }
  .mode-back-fade {
    opacity:0;
    animation:starFadeIn 0.4s cubic-bezier(0.22,1,0.36,1) 0.05s forwards
  }
  @keyframes iconBreath {
    0%,100% {
      opacity:0.55
    }
    50% {
      opacity:1
    }
  }
  @keyframes iconGlowFloat {
    0%,100% {
      opacity:0.25
    }
    50% {
      opacity:0.55
    }
  }
  .circle-a {
    animation:iconBreath 2.2s ease-in-out infinite
  }
  .circle-b {
    animation:iconBreath 2.2s ease-in-out infinite 1.1s
  }
  .globe-glow {
    animation:iconGlowFloat 2.6s ease-in-out infinite
  }
  .globe-lines {
    animation:iconBreath 2.6s ease-in-out infinite
  }
  .keyhole-shape {
    animation:iconBreath 2.4s ease-in-out infinite
  }
  .keyhole-glow {
    animation:iconGlowFloat 2.4s ease-in-out infinite
  }
  .mode-btn {
    width:min(68vw,68vh);
    padding:0.85rem 1.1rem;
    border:1.5px solid rgba(255,255,255,0.22);
    border-radius:16px;
    color:#ffffff;
    font-family:'DM Sans',sans-serif;
    font-size:0.95rem;
    margin-bottom:0.6rem;
    cursor:pointer;
    transition:opacity 0.3s ease,transform 0.3s ease,background 0.2s ease,border-color 0.2s ease;
    display:flex;
    align-items:center;
    gap:0.85rem;
    text-align:left;
    min-height:72px;
    box-sizing:border-box;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px)
  }
  .mode-btn.solo-btn {
    background:linear-gradient(135deg,rgba(27,154,170,0.38),rgba(0,20,40,0.75));
    border-color:rgba(72,202,228,0.65);
    box-shadow:0 4px 24px rgba(27,154,170,0.25),inset 0 1px 0 rgba(72,202,228,0.15)
  }
  .mode-btn.online-btn {
    background:linear-gradient(135deg,rgba(155,93,229,0.35),rgba(20,0,50,0.75));
    border-color:rgba(155,93,229,0.65);
    box-shadow:0 4px 24px rgba(155,93,229,0.25),inset 0 1px 0 rgba(180,130,255,0.15)
  }
  .mode-btn.room-btn {
    background:linear-gradient(135deg,rgba(255,180,50,0.35),rgba(40,20,0,0.75));
    border-color:rgba(255,180,50,0.65);
    box-shadow:0 4px 24px rgba(255,160,40,0.22),inset 0 1px 0 rgba(255,213,128,0.15)
  }
  .mode-btn:hover,.mode-btn:active {
    transform:translateY(-2px)
  }
  .mode-btn.solo-btn:hover,.mode-btn.solo-btn:active {
    background:linear-gradient(135deg,rgba(72,202,228,0.48),rgba(0,30,55,0.85));
    border-color:rgba(72,202,228,0.85);
    box-shadow:0 4px 28px rgba(27,154,170,0.4),0 0 14px rgba(72,202,228,0.2)
  }
  .mode-btn.online-btn:hover,.mode-btn.online-btn:active {
    background:linear-gradient(135deg,rgba(155,93,229,0.24),rgba(155,93,229,0.12));
    border-color:rgba(155,93,229,0.7);
    box-shadow:0 4px 24px rgba(155,93,229,0.28),0 0 12px rgba(200,130,255,0.15)
  }
  .mode-btn.room-btn:hover,.mode-btn.room-btn:active {
    background:linear-gradient(135deg,rgba(255,180,50,0.28),rgba(255,140,30,0.13));
    border-color:rgba(255,180,50,0.7);
    box-shadow:0 4px 24px rgba(255,160,40,0.25),0 0 12px rgba(255,213,128,0.15)
  }
  .mode-btn .mode-emoji {
    font-size:1.6rem
  }
  .mode-btn .mode-icon {
    width:56px;
    height:56px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center
  }
  .mode-btn .mode-title {
    font-weight:600;
    font-size:1rem;
    margin-bottom:0.2rem;
    letter-spacing:0.01em
  }
  .mode-btn .mode-sub {
    font-size:0.79rem;
    opacity:0.75;
    font-weight:300
  }
  .room-overlay {
    position:fixed;
    inset:0;
    background:radial-gradient(ellipse at center,rgba(10,26,31,0.97) 0%,rgba(5,10,15,0.99) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10001;
    padding:1.2rem;
    animation:modalOverlayIn 0.28s cubic-bezier(0.22,1,0.36,1) both
  }
  .room-box {
    background:linear-gradient(160deg,#110820 0%,#080415 60%,#020208 100%);
    border:1px solid rgba(255,180,50,0.2);
    border-radius:22px;
    padding:1.4rem 1.6rem 1.6rem;
    max-width:340px;
    width:100%;
    text-align:center;
    box-shadow:0 24px 64px rgba(0,0,0,0.8),0 0 40px rgba(255,160,40,0.06);
    max-height:92vh;
    overflow-y:auto;
    animation:modalBoxIn 0.32s cubic-bezier(0.22,1,0.36,1) both
  }
  .room-back-btn {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:50%;
    color:rgba(255,255,255,0.6);
    width:38px;
    height:38px;
    font-size:1.1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:opacity 0.25s ease,transform 0.25s ease;
    flex-shrink:0;
    line-height:1
  }
  .room-back-btn:hover {
    color:white;
    background:rgba(255,255,255,0.1);
    border-color:rgba(255,255,255,0.3)
  }
  .room-title {
    font-family:'Cormorant Garamond',serif;
    font-size:1.5rem;
    color:#ffd580;
    margin-bottom:0.2rem;
    letter-spacing:0.05em
  }
  .room-sub {
    font-size:0.72rem;
    color:rgba(255,213,128,0.4);
    margin-bottom:1.2rem;
    letter-spacing:0.04em
  }
  .room-label {
    font-size:0.6rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(255,213,128,0.35);
    margin-bottom:0.4rem;
    text-align:left
  }
  .room-code-row {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.6rem;
    background:rgba(255,180,50,0.06);
    border:1px solid rgba(255,180,50,0.2);
    border-radius:12px;
    padding:0.65rem 0.9rem;
    margin-bottom:0.9rem
  }
  .room-code-text {
    font-family:'DM Sans',sans-serif;
    font-size:1.25rem;
    font-weight:500;
    letter-spacing:0.28em;
    color:#ffd580;
    line-height:1;
    display:flex;
    align-items:center
  }
  .room-link-row {
    display:flex;
    align-items:center;
    gap:0.5rem;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    padding:0.5rem 0.7rem;
    margin-bottom:0.9rem
  }
  .room-link-text {
    flex:1;
    font-size:0.68rem;
    color:rgba(255,255,255,0.45);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:left
  }
  .room-copy-btn {
    background:rgba(255,180,50,0.12);
    border:1px solid rgba(255,180,50,0.28);
    border-radius:7px;
    color:#ffd580;
    font-size:0.68rem;
    padding:0.25rem 0.6rem;
    cursor:pointer;
    flex-shrink:0;
    transition:opacity 0.2s ease,transform 0.2s ease
  }
  .room-copy-btn:hover {
    background:rgba(255,180,50,0.25)
  }
  .room-icon-btn {
    width:100%;
    padding:0.8rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.55rem;
    border-radius:14px;
    font-family:'DM Sans',sans-serif;
    font-size:0.88rem;
    font-weight:500;
    cursor:pointer;
    transition:opacity 0.22s ease,transform 0.22s ease;
    margin-bottom:0.7rem
  }
  .room-btn-gold {
    background:linear-gradient(135deg,rgba(255,180,50,0.28),rgba(255,140,30,0.14));
    border:1px solid rgba(255,180,50,0.45);
    color:#ffd580
  }
  .room-btn-gold:hover {
    background:linear-gradient(135deg,rgba(255,180,50,0.42),rgba(255,140,30,0.26))
  }
  .room-btn-purple {
    background:linear-gradient(135deg,rgba(155,93,229,0.2),rgba(123,44,191,0.1));
    border:1px solid rgba(155,93,229,0.35);
    color:rgba(200,160,255,0.9)
  }
  .room-btn-purple:hover {
    background:linear-gradient(135deg,rgba(155,93,229,0.32),rgba(123,44,191,0.2))
  }
  .room-qr-wrap {
    background:white;
    border-radius:12px;
    padding:10px;
    display:inline-block;
    margin-bottom:1rem;
    position:relative;
    box-shadow:0 4px 20px rgba(255,160,40,0.22)
  }
  .room-qr-wrap::after {
    content:'';
    position:absolute;
    inset:-6px;
    border-radius:16px;
    box-shadow:0 0 22px 6px rgba(255,180,40,0.32);
    opacity:0;
    animation:qrGlowOpacity 2.5s ease-in-out infinite;
    pointer-events:none
  }
  @keyframes qrGlowOpacity {
    0%,100% {
      opacity:0
    }
    50% {
      opacity:1
    }
  }
  .room-qr-wrap img {
    display:block;
    border-radius:6px
  }
  .room-waiting-row {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    font-size:0.78rem;
    color:rgba(255,213,128,0.55);
    margin-bottom:1rem
  }
  .room-waiting-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#ffd580;
    box-shadow:0 0 6px #ffd580;
    animation:pulseDot 1.5s infinite;
    flex-shrink:0
  }
  .room-cancel-btn {
    background:none;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    color:rgba(255,255,255,0.28);
    font-size:0.75rem;
    padding:0.55rem 1.2rem;
    cursor:pointer;
    transition:opacity 0.2s ease,transform 0.2s ease;
    width:100%
  }
  .room-cancel-btn:hover {
    color:rgba(255,255,255,0.55);
    border-color:rgba(255,255,255,0.18)
  }
  .room-divider {
    height:1px;
    background:rgba(255,255,255,0.06);
    margin:0.8rem 0
  }
  .room-friends-panel {
    display:none;
    width:100%;
    margin-bottom:0.8rem;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:14px;
    overflow:hidden;
    text-align:left
  }
  .room-friend-row {
    display:flex;
    align-items:center;
    gap:0.7rem;
    padding:0.6rem 0.9rem;
    border-bottom:1px solid rgba(255,255,255,0.04)
  }
  .room-friend-row:last-child {
    border-bottom:none
  }
  .room-friend-avatar {
    width:34px;
    height:34px;
    border-radius:50%;
    flex-shrink:0;
    background:linear-gradient(135deg,#1B9AAA,#9B5DE5);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Cormorant Garamond',serif;
    font-size:0.95rem;
    color:white;
    position:relative
  }
  .room-friend-dot {
    position:absolute;
    bottom:-1px;
    right:-1px;
    width:10px;
    height:10px;
    border-radius:50%;
    border:2px solid #080415
  }
  .room-friend-name {
    font-size:0.83rem;
    color:rgba(255,255,255,0.85);
    font-weight:500
  }
  .room-friend-status {
    font-size:0.68rem;
    margin-top:0.05rem
  }
  .room-friend-invite {
    background:rgba(155,93,229,0.2);
    border:1px solid rgba(155,93,229,0.35);
    border-radius:8px;
    color:rgba(200,160,255,0.9);
    font-size:0.7rem;
    padding:0.25rem 0.65rem;
    cursor:pointer;
    font-family:'DM Sans',sans-serif;
    transition:opacity 0.2s ease,transform 0.2s ease;
    white-space:nowrap;
    flex-shrink:0
  }
  .room-friend-invite:hover {
    background:rgba(155,93,229,0.35)
  }
  .room-friend-invite:disabled {
    background:rgba(255,255,255,0.05);
    border-color:rgba(255,255,255,0.08);
    color:rgba(255,255,255,0.2);
    cursor:default
  }
  .room-input {
    width:100%;
    padding:0.85rem 1rem;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,180,50,0.25);
    border-radius:14px;
    color:white;
    font-family:'DM Sans',sans-serif;
    font-size:0.95rem;
    text-align:center;
    outline:none;
    transition:border-color 0.2s;
    margin-bottom:1rem;
    box-sizing:border-box
  }
  .room-input:focus {
    border-color:rgba(255,180,50,0.5)
  }
  .room-input::placeholder {
    color:rgba(255,255,255,0.25)
  }
  .room-input-cyan {
    border-color:rgba(72,202,228,0.25)
  }
  .room-input-cyan:focus {
    border-color:rgba(72,202,228,0.5)
  }
  .room-input-code {
    font-size:1.25rem;
    letter-spacing:0.25em;
    text-transform:uppercase
  }
  .room-btn-cyan {
    background:linear-gradient(135deg,rgba(72,202,228,0.25),rgba(27,154,170,0.15));
    border:1px solid rgba(72,202,228,0.4);
    color:rgba(200,240,255,0.92)
  }
  .room-btn-cyan:hover {
    background:linear-gradient(135deg,rgba(72,202,228,0.38),rgba(27,154,170,0.25))
  }
  .toast {
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%) translateY(-80px);
    padding:0.9rem 1.8rem;
    border-radius:16px;
    z-index:10001;
    font-size:0.9rem;
    font-weight:500;
    letter-spacing:0.03em;
    text-align:center;
    transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
    max-width:90vw;
    white-space:nowrap;
    will-change:transform;
    contain:layout style
  }
  .toast.show {
    transform:translateX(-50%) translateY(0)
  }
  .toast.match-found {
    background:linear-gradient(135deg,var(--cyan),#0d7a8a);
    box-shadow:0 8px 30px rgba(27,154,170,0.5)
  }
  .toast.opponent-answered {
    background:linear-gradient(135deg,rgba(155,93,229,0.95),rgba(123,44,191,0.95));
    box-shadow:0 8px 30px rgba(155,93,229,0.4)
  }
  #friendInviteBanner {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:12000;
    display:flex;
    justify-content:center;
    pointer-events:none;
    transform:translateY(-120%);
    transition:transform 0.38s cubic-bezier(0.16,1,0.3,1);
    will-change:transform
  }
  #friendInviteBanner.fib-show {
    transform:translateY(0);
    pointer-events:auto
  }
  .fib-card {
    margin:0.75rem 1rem 0;
    background:#ffffff;
    border:1px solid rgba(27,154,170,0.25);
    border-radius:18px;
    box-shadow:0 8px 32px rgba(0,0,0,0.14),0 2px 8px rgba(27,154,170,0.12);
    padding:0.9rem 1.1rem;
    display:flex;
    align-items:center;
    gap:0.9rem;
    max-width:400px;
    width:100%
  }
  .fib-avatar {
    width:42px;
    height:42px;
    border-radius:50%;
    flex-shrink:0;
    background:linear-gradient(135deg,#1B9AAA,#9B5DE5);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.05rem;
    color:white;
    font-family:'Cormorant Garamond',serif
  }
  .fib-text {
    flex:1;
    min-width:0
  }
  .fib-title {
    font-size:0.87rem;
    font-weight:600;
    color:rgba(0,0,0,0.75);
    font-family:'DM Sans',sans-serif
  }
  .fib-sub {
    font-size:0.72rem;
    color:rgba(0,0,0,0.38);
    margin-top:0.1rem;
    font-family:'DM Sans',sans-serif
  }
  .fib-btns {
    display:flex;
    gap:0.4rem;
    flex-shrink:0
  }
  .fib-accept {
    background:#1B9AAA;
    border:none;
    border-radius:20px;
    color:white;
    font-size:0.72rem;
    font-weight:600;
    padding:0.35rem 0.85rem;
    font-family:'DM Sans',sans-serif;
    cursor:pointer;
    transition:background 0.15s
  }
  .fib-accept:hover {
    background:#15848f
  }
  .fib-dismiss {
    background:rgba(0,0,0,0.05);
    border:1px solid rgba(0,0,0,0.1);
    border-radius:20px;
    color:rgba(0,0,0,0.4);
    font-size:0.72rem;
    padding:0.35rem 0.7rem;
    font-family:'DM Sans',sans-serif;
    cursor:pointer
  }
  #friendProfileSheet {
    position:fixed;
    inset:0;
    z-index:5000;
    background:rgba(0,0,0,0.35);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease
  }
  #friendProfileSheet.fps-open {
    opacity:1;
    pointer-events:auto
  }
  .fps-box {
    width:100%;
    max-width:480px;
    background:#ffffff;
    border-radius:22px 22px 0 0;
    padding:0 0 2rem;
    transform:translateY(100%);
    transition:transform 0.28s cubic-bezier(0.16,1,0.3,1)
  }
  #friendProfileSheet.fps-open .fps-box {
    transform:translateY(0)
  }
  .fps-handle {
    display:flex;
    justify-content:center;
    padding:0.7rem 0 0.4rem
  }
  .fps-handle-bar {
    width:38px;
    height:4px;
    background:rgba(0,0,0,0.1);
    border-radius:99px
  }
  .fps-header {
    display:flex;
    align-items:center;
    gap:1rem;
    padding:0.8rem 1.4rem 1rem
  }
  .fps-avatar {
    width:54px;
    height:54px;
    border-radius:50%;
    flex-shrink:0;
    background:linear-gradient(135deg,#1B9AAA,#9B5DE5);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
    color:white;
    font-family:'Cormorant Garamond',serif
  }
  .fps-name {
    font-size:1.05rem;
    font-weight:600;
    color:rgba(0,0,0,0.78);
    font-family:'DM Sans',sans-serif
  }
  .fps-meta {
    font-size:0.72rem;
    color:rgba(0,0,0,0.35);
    margin-top:0.15rem;
    font-family:'DM Sans',sans-serif
  }
  .fps-stats {
    display:flex;
    gap:0.6rem;
    padding:0 1.4rem 1rem
  }
  .fps-stat {
    flex:1;
    background:rgba(0,0,0,0.03);
    border:1px solid rgba(0,0,0,0.07);
    border-radius:12px;
    padding:0.65rem 0.4rem;
    text-align:center
  }
  .fps-stat-num {
    font-family:'Cormorant Garamond',serif;
    font-size:1.4rem;
    color:rgba(0,0,0,0.75);
    line-height:1
  }
  .fps-stat-label {
    font-size:0.58rem;
    color:rgba(0,0,0,0.3);
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin-top:0.15rem;
    font-family:'DM Sans',sans-serif
  }
  .fps-bio {
    margin:0 1.4rem 1rem;
    padding:0.75rem 1rem;
    background:rgba(0,0,0,0.03);
    border-radius:12px;
    font-size:0.82rem;
    color:rgba(0,0,0,0.55);
    font-family:'DM Sans',sans-serif;
    line-height:1.5;
    font-style:italic
  }
  .fps-actions {
    padding:0 1.4rem;
    display:flex;
    flex-direction:column;
    gap:0.5rem
  }
  .fps-play-btn {
    background:#1B9AAA;
    border:none;
    border-radius:14px;
    color:white;
    font-size:0.85rem;
    font-weight:600;
    padding:0.75rem;
    font-family:'DM Sans',sans-serif;
    cursor:pointer;
    transition:background 0.15s;
    letter-spacing:0.02em
  }
  .fps-play-btn:hover {
    background:#15848f
  }
  .fps-play-btn:disabled {
    background:rgba(0,0,0,0.08);
    color:rgba(0,0,0,0.3);
    cursor:default
  }
  .fps-remove-btn {
    background:none;
    border:1px solid rgba(200,50,50,0.2);
    border-radius:14px;
    color:rgba(200,50,50,0.65);
    font-size:0.78rem;
    padding:0.6rem;
    font-family:'DM Sans',sans-serif;
    cursor:pointer;
    transition:opacity 0.15s ease,transform 0.15s ease
  }
  .fps-remove-btn:hover {
    background:rgba(200,50,50,0.05);
    border-color:rgba(200,50,50,0.4)
  }
  .offline-player-chip.active {
    color:#7DF9F0;
    background:rgba(27,154,170,0.22);
    border-color:rgba(27,154,170,0.7);
    font-weight:600;
    box-shadow:0 0 12px rgba(27,154,170,0.5),0 0 4px rgba(125,249,240,0.3);
    transform:scale(1.08);
    letter-spacing:0.04em
  }
  .offline-turn-banner {
    text-align:center;
    padding:0.45rem 1.2rem 0.5rem;
    border-radius:50px;
    background:linear-gradient(135deg,rgba(27,154,170,0.2),rgba(27,154,170,0.08));
    border:1.5px solid rgba(27,154,170,0.45);
    margin-bottom:0.45rem;
    animation:fadeIn 0.4s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.4rem
  }
  .offline-turn-name {
    font-size:0.88rem;
    font-weight:600;
    color:#7DF9F0;
    letter-spacing:0.06em
  }
  .offline-turn-sub {
    font-size:0.7rem;
    color:rgba(255,255,255,0.45);
    margin-top:0;
    white-space:nowrap
  }
  #offline-setup,#offline-names {
    background:transparent
  }
  .offline-setup-content {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:100%;
    padding:1.5rem 2rem 2rem;
    max-width:480px;
    margin:0 auto;
    width:100%
  }
  .offline-setup-title {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.8rem,7vw,2.5rem);
    font-weight:300;
    text-align:center;
    line-height:1.2;
    margin-bottom:0.4rem;
    letter-spacing:0.05em
  }
  .offline-setup-sub {
    color:var(--white-40);
    font-size:0.82rem;
    text-align:center;
    margin-bottom:1.8rem
  }
  .player-count-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0.6rem;
    width:100%;
    margin-bottom:2rem
  }
  .player-count-btn {
    aspect-ratio:1;
    border-radius:16px;
    background:var(--white-08);
    border:1.5px solid var(--white-15);
    color:white;
    font-family:'DM Sans',sans-serif;
    font-size:1.3rem;
    font-weight:500;
    cursor:pointer;
    transition:opacity 0.25s ease,transform 0.25s ease;
    display:flex;
    align-items:center;
    justify-content:center
  }
  .player-count-btn:hover,.player-count-btn.selected {
    background:rgba(27,154,170,0.2);
    border-color:var(--cyan);
    color:var(--cyan-light);
    transform:scale(1.05);
    box-shadow:0 0 14px rgba(27,154,170,0.35)
  }
  .offline-names-list {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:0.7rem;
    margin-bottom:1.5rem;
    flex:1;
    overflow-y:auto
  }
  .offline-name-row {
    display:flex;
    align-items:center;
    gap:0.8rem
  }
  .offline-name-label {
    font-size:0.78rem;
    color:var(--white-40);
    letter-spacing:0.05em;
    min-width:80px;
    flex-shrink:0
  }
  .offline-name-input {
    flex:1;
    padding:0.7rem 1rem;
    background:var(--white-08);
    border:1px solid var(--white-15);
    border-radius:12px;
    color:white;
    font-family:'DM Sans',sans-serif;
    font-size:0.9rem;
    outline:none;
    transition:border-color 0.3s
  }
  .offline-name-input:focus {
    border-color:var(--cyan)
  }
  .offline-name-input::placeholder {
    color:var(--white-40)
  }
  .fruit-sync-modal-wrap {
    position:fixed;
    inset:0;
    z-index:300;
    background:rgba(5,10,20,0.88);
    display:flex;
    align-items:center;
    justify-content:center
  }
  .fruit-sync-box {
    background:linear-gradient(135deg,rgba(20,28,40,0.98),rgba(10,18,30,0.98));
    border:1.5px solid rgba(255,255,255,0.12);
    border-radius:24px;
    padding:2rem 1.8rem;
    max-width:340px;
    width:90%;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,0.7);
    animation:scaleIn 0.3s cubic-bezier(0.34,1.56,0.64,1)
  }
  @keyframes scaleIn {
    from {
      transform:scale(0.85);
      opacity:0
    }
    to {
      transform:scale(1);
      opacity:1
    }
  }
  .fruit-sync-icon {
    font-size:3rem;
    margin-bottom:0.6rem
  }
  .fruit-sync-title {
    font-family:'Cormorant Garamond',serif;
    font-size:1.6rem;
    font-weight:300;
    letter-spacing:0.06em;
    margin-bottom:0.3rem
  }
  .fruit-sync-sub {
    font-size:0.8rem;
    color:rgba(255,255,255,0.45);
    margin-bottom:1.4rem
  }
  .fruit-sync-players {
    display:flex;
    flex-direction:column;
    gap:0.6rem
  }
  .fruit-sync-player-btn {
    padding:0.75rem 1rem;
    border-radius:14px;
    background:rgba(255,255,255,0.06);
    border:1.5px solid rgba(255,255,255,0.12);
    color:white;
    font-family:'DM Sans',sans-serif;
    font-size:0.95rem;
    cursor:pointer;
    transition:opacity 0.25s ease,transform 0.25s ease
  }
  .fruit-sync-player-btn:hover {
    background:rgba(220,50,50,0.2);
    border-color:rgba(220,80,80,0.6);
    color:#ffaaaa;
    box-shadow:0 0 16px rgba(220,50,50,0.35)
  }
  .offline-player-chip.fruit-chosen {
    color:#ffaaaa;
    background:rgba(200,30,30,0.22);
    border-color:rgba(220,60,60,0.8);
    font-weight:600;
    box-shadow:0 0 16px rgba(220,40,40,0.6),0 0 5px rgba(255,150,150,0.3);
    transform:scale(1.1)
  }
  ::-webkit-scrollbar {
    width:3px
  }
  ::-webkit-scrollbar-track {
    background:transparent
  }
  ::-webkit-scrollbar-thumb {
    background:rgba(27,154,170,0.3);
    border-radius:2px
  }
  @keyframes shake {
    0%,100% {
      transform:translateX(0)
    }
    20% {
      transform:translateX(-10px)
    }
    40% {
      transform:translateX(10px)
    }
    60% {
      transform:translateX(-8px)
    }
    80% {
      transform:translateX(8px)
    }
  }
  .shake {
    animation:shake 0.5s ease
  }
  @media (min-width:600px) {
    .welcome-content,.name-entry-content,.unlock-inner,.game-inner,.instructions-inner,.language-inner {
      max-width:520px
    }
    .lang-grid {
      grid-template-columns:repeat(3,1fr)
    }
  }
  @media (max-height:750px) and (max-width:500px) {
    #letsplay-wrapper {
      top:42%!important
    }
    #welcome .welcome-title {
      font-size:clamp(2.2rem,10vw,3.2rem)!important;
      margin-bottom:0.4rem!important
    }
    #welcome .welcome-content>div:first-child {
      margin-top:1vh!important
    }
    #welcome .welcome-buttons {
      padding-bottom:1.5rem!important;
      gap:0.35rem!important
    }
    #welcome .welcome-subtitle {
      font-size:0.88rem!important;
      line-height:1.6!important
    }
  }
  @media (max-height:650px) and (max-width:500px) {
    #letsplay-wrapper {
      top:38%!important
    }
    #welcome .welcome-title {
      font-size:clamp(1.9rem,9vw,2.8rem)!important
    }
    #welcome .welcome-content {
      padding:0.8rem 1.8rem 1rem!important
    }
    #welcome .welcome-divider {
      margin:0.5rem auto 0.5rem!important
    }
  }
  @media (max-width:500px) and (max-height:900px) {
    .mode-circle {
      width:min(92vw,82vh);
      height:min(92vw,82vh)
    }
    .mode-btn {
      width:min(74vw,66vh);
      padding:0.75rem 1rem;
      min-height:64px;
      margin-bottom:0.5rem
    }
  }
  @media (max-width:500px) and (max-height:700px) {
    .mode-circle {
      width:min(90vw,78vh);
      height:min(90vw,78vh)
    }
    .mode-btn {
      width:min(72vw,60vh);
      padding:0.6rem 0.85rem;
      min-height:56px;
      margin-bottom:0.35rem
    }
    .mode-btn .mode-icon {
      width:42px;
      height:42px
    }
    .mode-btn .mode-title {
      font-size:0.88rem
    }
    .mode-btn .mode-sub {
      font-size:0.70rem
    }
  }
  @media (max-width:500px) and (max-height:600px) {
    .mode-circle {
      width:min(88vw,72vh);
      height:min(88vw,72vh)
    }
    .mode-btn {
      width:min(70vw,56vh);
      padding:0.5rem 0.8rem;
      min-height:50px;
      margin-bottom:0.3rem
    }
    .mode-btn .mode-sub {
      display:none
    }
    .mode-btn .mode-icon {
      width:36px;
      height:36px
    }
  }
  @media (max-width:500px) {
    #welcome h1.welcome-title {
      font-size:clamp(2rem,10vw,3.2rem)!important;
      line-height:0.92!important
    }
    #welcome .welcome-subtitle {
      line-height:1.5!important
    }
    .app-download-row {
      gap:0.4rem;
      margin:0.25rem 0 0!important
    }
    .app-badge {
      padding:0.35rem 0.6rem;
      font-size:0.62rem
    }
    #welcome .welcome-buttons {
      padding-bottom:max(1.5rem,env(safe-area-inset-bottom,1.5rem))!important
    }
    #welcome .btn-share {
      margin-top:0!important
    }
  }
  @keyframes slideInFromRight {
    from {
      transform:translateX(60%) rotateY(-8deg);
      opacity:0
    }
    to {
      transform:translateX(0) rotateY(0deg);
      opacity:1
    }
  }
  @keyframes slideInFromLeft {
    from {
      transform:translateX(-60%) rotateY(8deg);
      opacity:0
    }
    to {
      transform:translateX(0) rotateY(0deg);
      opacity:1
    }
  }
  @keyframes slideOutToLeft {
    from {
      transform:translateX(0) rotateY(0deg);
      opacity:1
    }
    to {
      transform:translateX(-60%) rotateY(8deg);
      opacity:0
    }
  }
  @keyframes slideOutToRight {
    from {
      transform:translateX(0) rotateY(0deg);
      opacity:1
    }
    to {
      transform:translateX(60%) rotateY(-8deg);
      opacity:0
    }
  }
  .card-scene.swipe-in-right .card-3d {
    will-change:transform;
    animation:slideInFromRight 0.38s cubic-bezier(0.22,1,0.36,1) forwards
  }
  .card-scene.swipe-in-left .card-3d {
    animation:slideInFromLeft 0.38s cubic-bezier(0.22,1,0.36,1) forwards
  }
  .card-3d.dragging {
    transition:none!important
  }
  .offline-game-area {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.8rem;
    width:100%;
    margin-top:0
  }
  .offline-game-area .card-scene {
    max-width:390px;
    margin:0;
    flex-shrink:0
  }
  .card-scene {
    width:min(360px, calc((100dvh - 120px) * 0.71));
    margin:0 auto;
    perspective:1200px;
    flex-shrink:0;
    contain:layout style
  }
  .card-scene-inner {
    width:100%;
    aspect-ratio:5/7;
    position:relative
  }
  .card-3d {
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
    transition:transform 0.6s cubic-bezier(0.34,1.4,0.64,1);
    cursor:pointer;
    border-radius:14px
  }
  .card-3d:not(.is-flipped):not(.dragging):hover {
    transform:rotateY(4deg) rotateX(-2deg) translateZ(6px)
  }
  .card-3d.is-flipped {
    transform:rotateY(180deg)
  }
  .card-face {
    position:absolute;
    inset:0;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 24px 80px rgba(0,0,0,0.7),0 8px 24px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.04)
  }
  .card-face-back canvas {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block
  }
  .card-back-overlay {
    display:none!important
  }
  .card-back-footer {
    width:100%;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 18px
  }
  .card-face-front {
    transform:rotateY(180deg);
    background:#000
  }
  .card-face-front canvas.bg-canvas {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0
  }
  .card-overlay-front {
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:clamp(6px,1.7%,10px) clamp(20px,5.5%,28px) clamp(10px,2.8%,16px)
  }
  .card-fruit-zone {
    width:100%;
    height:72px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
    padding-top:4px;
    margin-bottom:18px
  }
  .card-title-front {
    width:100%;
    text-align:center;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(0.82rem,2.5vw,1.0rem);
    letter-spacing:0.12em;
    color:rgba(30,30,25,0.82);
    font-weight:600;
    font-style:normal;
    padding:clamp(22px,9.2%,34px) 0 0;
    flex-shrink:0
  }
  .card-question-zone {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 20px 0
  }
  .card-question-text {
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(1.35rem,5.5vw,1.65rem);
    font-style:normal;
    color:#111111;
    text-align:center;
    line-height:1.45;
    font-weight:400;
    letter-spacing:0.00em;
    opacity:1
  }
  .card-footer-zone {
    width:100%;
    display:flex;
    align-items:center;
    gap:5px;
    flex-shrink:0
  }
  .card-divider-line {
    height:1px;
    flex:1
  }
  .card-logo-text {
    font-family:'Cormorant Garamond',serif;
    font-size:0.45rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    white-space:nowrap
  }
  .fruit-only-overlay {
    position:absolute;
    inset:0;
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    padding-bottom:10px
  }
  .tap-hint {
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:20;
    transition:opacity 0.5s ease;
    border-radius:14px;
    overflow:hidden
  }
  .tap-hint-ripple {
    position:absolute;
    width:59%;
    aspect-ratio:1;
    left:50%;
    top:38.5%;
    transform:translate(-50%,-50%)
  }
  .tap-hint-ripple::before,.tap-hint-ripple::after {
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1.5px solid rgba(255,215,60,0.75);
    animation:tapRipple 2.6s cubic-bezier(0.2,0.6,0.4,1) infinite
  }
  .tap-hint-ripple::after {
    animation-delay:1.3s
  }
  .tap-hint-text {
    position:absolute;
    top:63%;
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
    font-family:'Cormorant Garamond',serif;
    font-style:italic;
    font-size:1.15rem;
    font-weight:500;
    color:rgba(255,240,170,1);
    letter-spacing:0.2em;
    text-transform:lowercase;
    text-shadow:0 0 12px rgba(255,190,0,0.55),0 1px 4px rgba(0,0,0,0.85);
    animation:tapDotPulse 2.2s ease-in-out infinite
  }
  @keyframes tapRipple {
    0% {
      transform:scale(1);
      opacity:0.85;
      border-width:2px
    }
    40% {
      transform:scale(1.35);
      opacity:0.4;
      border-width:1.2px
    }
    100% {
      transform:scale(1.75);
      opacity:0;
      border-width:0.3px
    }
  }
  @keyframes tapDotPulse {
    0%,100% {
      opacity:0.55
    }
    50% {
      opacity:1.0
    }
  }
  .card-collapsed-btn {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.7rem;
    padding:0.65rem 1.1rem;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    color:rgba(255,255,255,0.5);
    font-family:'DM Sans',sans-serif;
    font-size:0.78rem;
    letter-spacing:0.04em;
    cursor:pointer;
    transition:opacity 0.25s ease,transform 0.25s ease;
    margin-bottom:0.6rem;
    flex-shrink:0
  }
  .card-collapsed-btn:hover {
    background:rgba(255,255,255,0.07);
    border-color:rgba(72,202,228,0.3);
    color:rgba(255,255,255,0.75)
  }
  .card-collapsed-btn .ccb-left {
    display:flex;
    align-items:center;
    gap:0.55rem
  }
  .card-collapsed-btn .ccb-symbol {
    width:22px;
    height:22px;
    border-radius:8px;
    background:rgba(72,202,228,0.12);
    border:1px solid rgba(72,202,228,0.25);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.7rem;
    color:var(--cyan-light);
    flex-shrink:0
  }
  .card-collapsed-btn .ccb-label {
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.12em
  }
  .card-collapsed-btn .ccb-arrow {
    font-size:0.8rem;
    opacity:0.4;
    transition:transform 0.2s
  }
  .card-scene.is-collapsed {
    display:none!important
  }
  .show-question-btn {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:0;
    padding:0;
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:14px;
    overflow:hidden;
    cursor:pointer;
    transition:border-color 0.22s;
    margin-bottom:0.5rem;
    flex-shrink:0;
    text-align:left
  }
  .show-question-btn:hover {
    border-color:rgba(72,202,228,0.2)
  }
  .sqb-header-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.62rem 0.9rem;
    gap:0.6rem
  }
  .show-question-btn .sqb-icon {
    width:20px;
    height:20px;
    border-radius:7px;
    background:rgba(72,202,228,0.08);
    border:1px solid rgba(72,202,228,0.18);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.62rem;
    color:var(--cyan-light);
    flex-shrink:0
  }
  .sqb-label-text {
    font-size:0.65rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.3);
    font-family:'DM Sans',sans-serif
  }
  .show-question-btn .sqb-arrow {
    font-size:0.65rem;
    color:rgba(255,255,255,0.2);
    transition:transform 0.25s;
    flex-shrink:0
  }
  .show-question-btn.sqb-open .sqb-arrow {
    transform:rotate(180deg)
  }
  .show-question-btn.sqb-open {
    border-color:rgba(255,255,255,0.09)
  }
  .sqb-question-text {
    display:none;
    padding:0 1rem 0.9rem 1rem;
    border-top:1px solid rgba(255,255,255,0.05);
    padding-top:0.7rem;
    font-family:'Cormorant Garamond',serif;
    font-size:1.08rem;
    font-style:italic;
    font-weight:400;
    color:rgba(255,255,255,0.62);
    line-height:1.6;
    letter-spacing:0.01em
  }
  .show-question-btn.sqb-open .sqb-question-text {
    display:block
  }
  .game-players-strip {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.55rem 0.75rem;
    background:rgba(255,255,255,0.025);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:20px;
    margin-bottom:0.55rem;
    flex-shrink:0;
    position:relative;
    overflow:visible
  }
  .gps-player {
    display:flex;
    align-items:center;
    gap:0.6rem;
    flex:1;
    min-width:0
  }
  .gps-player.gps-right {
    flex-direction:row-reverse
  }
  .gps-avatar {
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.78rem;
    font-weight:700;
    color:rgba(255,255,255,0.9);
    flex-shrink:0;
    position:relative;
    overflow:visible;
    letter-spacing:0
  }
  .gps-avatar.gps-me {
    background:rgba(27,154,170,0.18);
    border:1.5px solid rgba(27,154,170,0.45);
    box-shadow:0 0 14px rgba(27,154,170,0.18),inset 0 1px 0 rgba(255,255,255,0.08)
  }
  .gps-avatar.gps-me.is-logged {
    background:rgba(27,154,170,0.28);
    border:1.5px solid rgba(27,154,170,0.75);
    box-shadow:0 0 18px rgba(27,154,170,0.35),inset 0 1px 0 rgba(255,255,255,0.14)
  }
  .gps-avatar.gps-me.is-guest {
    background:rgba(255,255,255,0.04);
    border:1.5px dashed rgba(255,255,255,0.18);
    box-shadow:none
  }
  .gps-avatar.gps-me.is-guest span {
    color:rgba(255,255,255,0.38)
  }
  .gps-avatar.gps-opp {
    background:rgba(155,93,229,0.18);
    border:1.5px solid rgba(155,93,229,0.4);
    box-shadow:0 0 14px rgba(155,93,229,0.18),inset 0 1px 0 rgba(255,255,255,0.08)
  }
  .gps-avatar.gps-opp.is-logged {
    background:rgba(155,93,229,0.28);
    border:1.5px solid rgba(155,93,229,0.7);
    box-shadow:0 0 18px rgba(155,93,229,0.32),inset 0 1px 0 rgba(255,255,255,0.14)
  }
  .gps-avatar.gps-opp.is-guest {
    background:rgba(255,255,255,0.04);
    border:1.5px dashed rgba(255,255,255,0.18);
    box-shadow:none
  }
  .gps-avatar.gps-opp.is-guest span {
    color:rgba(255,255,255,0.38)
  }
  .gps-guest-badge {
    position:absolute;
    bottom:-2px;
    right:-2px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:rgba(30,35,50,0.95);
    border:1px solid rgba(255,255,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:7px;
    line-height:1
  }
  .gps-avatar-img {
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    display:none;
    position:absolute;
    inset:0
  }
  .gps-online-dot {
    position:absolute;
    bottom:-1px;
    right:-1px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#22c55e;
    border:1.5px solid rgba(5,10,20,0.9);
    box-shadow:0 0 6px rgba(34,197,94,0.7)
  }
  .gps-online-ring {
    position:absolute;
    bottom:-1px;
    right:-1px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#22c55e;
    border:1.5px solid rgba(5,10,20,0.9);
    box-shadow:0 0 6px rgba(34,197,94,0.7)
  }
  .gps-info {
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:0.05rem
  }
  .gps-player.gps-right .gps-info {
    align-items:flex-end
  }
  .gps-name {
    font-size:0.80rem;
    font-weight:500;
    color:rgba(255,255,255,0.82);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.2;
    letter-spacing:0.01em;
    transition:color 0.15s
  }
  .gps-tag {
    display:none
  }
  .gps-divider {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    padding:0 0.4rem
  }
  .gps-amp {
    font-family:'Cormorant Garamond',serif;
    font-size:1.0rem;
    font-weight:300;
    font-style:italic;
    color:rgba(255,255,255,0.18);
    line-height:1
  }
  .gps-clickable {
    transition:opacity 0.15s
  }
  .gps-clickable:hover .gps-name {
    color:rgba(255,255,255,0.98)
  }
  .gps-clickable:hover .gps-avatar {
    transform:scale(1.06)
  }
  .gps-clickable .gps-avatar {
    transition:transform 0.18s ease
  }
  .gps-clickable:active {
    opacity:0.75
  }
  .gps-actions {
    display:none
  }
  .gps-action-btn {
    display:none
  }
  .gps-vs-dot {
    display:none
  }
  .gps-popup {
    position:fixed;
    z-index:100000;
    min-width:200px;
    max-width:260px;
    background:rgba(12,18,30,0.97);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:16px;
    box-shadow:0 12px 48px rgba(0,0,0,0.6),0 2px 12px rgba(0,0,0,0.4);
    animation:popupIn 0.18s cubic-bezier(0.34,1.56,0.64,1) both;
    overflow:hidden
  }
  @keyframes popupIn {
    from {
      opacity:0;
      transform:translateY(-6px) scale(0.94)
    }
    to {
      opacity:1;
      transform:translateY(0) scale(1)
    }
  }
  .gps-popup.popup-left {
    animation-name:popupIn
  }
  #profileOverlay {
    position:fixed;
    inset:0;
    z-index:90000;
    background:rgba(3,7,16,0.65);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.28s ease
  }
  #profileOverlay.po-open {
    opacity:1;
    pointer-events:all
  }
  #profileOverlayBox {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:88vh;
    background:#ffffff;
    border-top:1px solid rgba(0,0,0,0.08);
    border-radius:22px 22px 0 0;
    box-shadow:0 -16px 60px rgba(0,0,0,0.5);
    transform:translateY(100%);
    transition:transform 0.32s cubic-bezier(0.32,0.72,0,1);
    overflow:hidden;
    display:flex;
    flex-direction:column
  }
  #profile,#profileOverlayContent .profile-layout {
    background:#ffffff
  }
  #profile .profile-sidemenu,#profileOverlayContent .profile-sidemenu {
    background:#f4f4f6;
    border-right:1px solid rgba(0,0,0,0.07)
  }
  #profile .profile-sidemenu-btn,#profileOverlayContent .profile-sidemenu-btn {
    color:rgba(0,0,0,0.35)
  }
  #profile .profile-sidemenu-btn:hover,#profileOverlayContent .profile-sidemenu-btn:hover {
    background:rgba(0,0,0,0.05);
    border-color:rgba(0,0,0,0.1);
    color:rgba(0,0,0,0.6)
  }
  #profile .profile-sidemenu-btn.active,#profileOverlayContent .profile-sidemenu-btn.active {
    background:rgba(27,154,170,0.1);
    border-color:rgba(27,154,170,0.35);
    color:#1B9AAA
  }
  #profile .profile-main,#profileOverlayContent .profile-main {
    background:#ffffff
  }
  #profile .profile-header,#profileOverlayContent .profile-header {
    border-bottom:1px solid rgba(0,0,0,0.07)
  }
  #profile .profile-title,#profileOverlayContent .profile-title {
    color:rgba(0,0,0,0.75)
  }
  #profile .profile-back,#profileOverlayContent .profile-back {
    color:rgba(0,0,0,0.4)
  }
  #profile .profile-community-btn,#profileOverlayContent .profile-community-btn {
    background:rgba(0,0,0,0.04);
    border-color:rgba(0,0,0,0.1);
    color:rgba(0,0,0,0.45)
  }
  #profile .profile-community-btn:hover,#profileOverlayContent .profile-community-btn:hover {
    border-color:rgba(27,154,170,0.5);
    color:#1B9AAA;
    background:rgba(27,154,170,0.06)
  }
  #profile .profile-username-display,#profileOverlayContent .profile-username-display {
    color:rgba(0,0,0,0.8)
  }
  #profile .profile-stat,#profileOverlayContent .profile-stat {
    background:rgba(0,0,0,0.03);
    border-color:rgba(0,0,0,0.07)
  }
  #profile .profile-stat-num,#profileOverlayContent .profile-stat-num {
    color:rgba(0,0,0,0.8)
  }
  #profile .profile-stat-label,#profileOverlayContent .profile-stat-label {
    color:rgba(0,0,0,0.35)
  }
  #profile .profile-card,#profileOverlayContent .profile-card {
    background:rgba(0,0,0,0.03);
    border-color:rgba(0,0,0,0.07)
  }
  #profile .profile-card-title,#profileOverlayContent .profile-card-title {
    color:rgba(0,0,0,0.5)
  }
  #profile .profile-field-textarea,#profileOverlayContent .profile-field-textarea {
    background:rgba(0,0,0,0.03);
    border-color:rgba(0,0,0,0.1);
    color:rgba(0,0,0,0.75)
  }
  #profile .profile-field-textarea::placeholder,#profileOverlayContent .profile-field-textarea::placeholder {
    color:rgba(0,0,0,0.25)
  }
  #profile .profile-save-btn,#profileOverlayContent .profile-save-btn {
    background:#1B9AAA;
    color:white;
    border-color:transparent
  }
  #profile .profile-logout-btn,#profileOverlayContent .profile-logout-btn {
    color:rgba(0,0,0,0.35);
    border-color:rgba(0,0,0,0.1)
  }
  #profile .profile-logout-btn:hover,#profileOverlayContent .profile-logout-btn:hover {
    color:rgba(200,50,50,0.8);
    border-color:rgba(200,50,50,0.3)
  }
  #profile .raccolta-title,#profileOverlayContent .raccolta-title {
    color:rgba(0,0,0,0.7)
  }
  #profile .raccolta-header,#profileOverlayContent .raccolta-header {
    border-bottom:1px solid rgba(0,0,0,0.07)
  }
  #profile .garden-section-title,#profileOverlayContent .garden-section-title {
    color:rgba(0,0,0,0.35)
  }
  #profile .garden-progress-label,#profileOverlayContent .garden-progress-label {
    color:rgba(0,0,0,0.3)
  }
  #profile .garden-progress-track,#profileOverlayContent .garden-progress-track {
    background:rgba(0,0,0,0.08)
  }
  #profile .status-menu,#profileOverlayContent .status-menu {
    background:#ffffff;
    border-color:rgba(0,0,0,0.1)
  }
  #profile .status-menu-item,#profileOverlayContent .status-menu-item {
    color:rgba(0,0,0,0.65)
  }
  #profile .status-menu-item:hover,#profileOverlayContent .status-menu-item:hover {
    background:rgba(0,0,0,0.04)
  }
  #profileOverlay.po-open #profileOverlayBox {
    transform:translateY(0)
  }
  #profileOverlayBox::before {
    content:'';
    display:block;
    width:36px;
    height:4px;
    border-radius:2px;
    background:rgba(0,0,0,0.12);
    margin:10px auto 0;
    flex-shrink:0
  }
  #profileOverlayContent .profile-layout {
    height:100%;
    min-height:0
  }
  #profileOverlayContent .profile-back {
    display:none!important
  }
  #profileOverlayClose {
    position:absolute;
    top:0.85rem;
    right:0.85rem;
    width:30px;
    height:30px;
    border-radius:50%;
    background:rgba(0,0,0,0.05);
    border:1px solid rgba(0,0,0,0.1);
    color:rgba(0,0,0,0.4);
    font-size:1rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity 0.15s ease,transform 0.15s ease;
    z-index:2;
    line-height:1
  }
  #profileOverlayClose:hover {
    background:rgba(0,0,0,0.1);
    color:rgba(0,0,0,0.8)
  }
  #profileOverlayContent {
    padding:1.2rem 1.2rem 1.4rem
  }
  .gps-popup.popup-right {
    animation-name:popupInRight
  }
  @keyframes popupInLeft {
    from {
      opacity:0;
      transform:translateY(-6px) scale(0.94)
    }
    to {
      opacity:1;
      transform:translateY(0) scale(1)
    }
  }
  @keyframes popupInRight {
    from {
      opacity:0;
      transform:translateY(-6px) scale(0.94)
    }
    to {
      opacity:1;
      transform:translateY(0) scale(1)
    }
  }
  .gps-popup-arrow {
    position:absolute;
    top:-7px;
    left:50%;
    transform:translateX(-50%);
    width:14px;
    height:7px;
    overflow:visible
  }
  .gps-popup-arrow::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-bottom:7px solid rgba(255,255,255,0.12)
  }
  .gps-popup-arrow::after {
    content:'';
    position:absolute;
    top:1px;
    left:1px;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:6px solid rgba(12,18,30,0.97)
  }
  .gps-popup-inner {
    padding:0.85rem 1rem 0.7rem
  }
  .gps-popup-header {
    display:flex;
    align-items:center;
    gap:0.7rem;
    margin-bottom:0.75rem;
    padding-bottom:0.65rem;
    border-bottom:1px solid rgba(255,255,255,0.07)
  }
  .gps-popup-avatar {
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    font-weight:700;
    color:white;
    flex-shrink:0
  }
  .gps-popup-avatar.popup-me {
    background:linear-gradient(135deg,#1B9AAA,#0a6b79);
    box-shadow:0 0 12px rgba(27,154,170,0.4)
  }
  .gps-popup-avatar.popup-opp {
    background:linear-gradient(135deg,#7B2CBF,#9B5DE5);
    box-shadow:0 0 12px rgba(123,44,191,0.4)
  }
  .gps-popup-name {
    font-size:0.88rem;
    font-weight:600;
    color:rgba(255,255,255,0.92);
    letter-spacing:0.02em
  }
  .gps-popup-status {
    font-size:0.62rem;
    color:rgba(255,255,255,0.3);
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin-top:0.15rem
  }
  .gps-popup-btns {
    display:flex;
    flex-direction:column;
    gap:0.35rem
  }
  .gps-popup-btn {
    display:flex;
    align-items:center;
    gap:0.55rem;
    padding:0.5rem 0.6rem;
    border-radius:10px;
    border:none;
    background:rgba(255,255,255,0.04);
    color:rgba(255,255,255,0.65);
    font-size:0.75rem;
    font-family:'DM Sans',sans-serif;
    letter-spacing:0.04em;
    cursor:pointer;
    transition:opacity 0.16s ease,transform 0.16s ease;
    width:100%;
    text-align:left
  }
  .gps-popup-btn:hover {
    background:rgba(27,154,170,0.12);
    color:rgba(255,255,255,0.9);
    border-color:rgba(27,154,170,0.2)
  }
  .gps-popup-btn.btn-add:hover {
    background:rgba(155,93,229,0.12);
    color:#c4a0f0
  }
  .gps-popup-btn-icon {
    width:24px;
    height:24px;
    border-radius:7px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.8rem;
    background:rgba(255,255,255,0.06);
    flex-shrink:0
  }
  .gps-popup-guest-block {
    display:flex;
    align-items:center;
    gap:0.6rem;
    padding:0.5rem 0.6rem 0.6rem;
    border-radius:10px;
    background:rgba(255,60,60,0.06);
    border:1px solid rgba(255,60,60,0.14);
    margin-bottom:0.35rem
  }
  .gps-popup-guest-icon {
    font-size:1.3rem;
    flex-shrink:0;
    line-height:1
  }
  .gps-popup-guest-text {
    font-size:0.72rem;
    color:rgba(255,255,255,0.5);
    line-height:1.4
  }
  .gps-popup-guest-text span {
    font-size:0.62rem;
    color:rgba(255,255,255,0.28)
  }
  .gps-popup-btn-register {
    border-color:rgba(27,154,170,0.25)!important;
    color:rgba(27,154,170,0.8)!important
  }
  .gps-popup-btn-register:hover {
    background:rgba(27,154,170,0.1)!important;
    color:#48cae4!important
  }
  .answers-section {
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    width:100%;
    flex-shrink:0
  }
  .answer-reveal-group {
    display:flex;
    flex-direction:column;
    gap:0.55rem;
    width:100%
  }
  .offline-answer-card {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.09);
    border-radius:16px;
    padding:0.75rem 1rem;
    animation:answerReveal 0.45s cubic-bezier(0.22,1,0.36,1)
  }
  .offline-answer-card .oac-header {
    display:none!important
  }
  .offline-player-chip {
    display:none!important
  }
  .offline-players-col {
    display:none!important
  }
  display:flex;
  align-items:center;
  gap:0.45rem;
  margin-bottom:0.4rem;
  }
  .offline-answer-card .oac-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 6px var(--cyan);
    flex-shrink:0
  }
  .offline-answer-card .oac-name {
    font-size:0.68rem;
    font-weight:500;
    color:rgba(255,255,255,0.5);
    letter-spacing:0.06em;
    text-transform:uppercase;
    flex:1
  }
  .offline-answer-card .oac-text {
    font-family:'Cormorant Garamond',serif;
    font-size:1.05rem;
    font-style:italic;
    color:rgba(255,255,255,0.88);
    line-height:1.55;
    word-break:break-word
  }
  #debugPanel {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.92);
    color:#0f0;
    font-family:monospace;
    font-size:10px;
    padding:6px 8px;
    z-index:99999;
    max-height:38vh;
    overflow-y:auto;
    border-top:1px solid #0f0;
    display:none
  }
  #debugToggle {
    position:fixed;
    bottom:4px;
    right:4px;
    background:rgba(0,200,0,0.3);
    border:1px solid #0f0;
    color:#0f0;
    font-size:9px;
    padding:3px 6px;
    border-radius:4px;
    z-index:999999;
    cursor:pointer;
    font-family:monospace
  }
  #print-deck {
    background:radial-gradient(ellipse at 50% 30%,#0d1f14 0%,#060e08 50%,#020a04 100%);
    overflow-y:auto
  }
  #print-deck::before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 50% 35%,rgba(80,160,80,0.10) 0%,transparent 65%);
    pointer-events:none;
    z-index:0
  }
  .pd-inner {
    position:relative;
    z-index:1;
    width:100%;
    max-width:420px;
    margin:0 auto;
    padding:0 1.4rem 3rem;
    display:flex;
    flex-direction:column;
    align-items:center
  }
  .pd-back-btn {
    align-self:flex-start;
    background:none;
    border:none;
    color:rgba(255,255,255,0.35);
    font-size:1.6rem;
    cursor:pointer;
    padding:1.2rem 0 0;
    transition:color 0.2s
  }
  .pd-back-btn:hover {
    color:rgba(255,255,255,0.7)
  }
  .pd-header {
    text-align:center;
    padding:1.2rem 0 0.5rem
  }
  .pd-title {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.7rem,7vw,2.3rem);
    font-weight:300;
    letter-spacing:0.06em;
    color:#fff;
    margin-bottom:0.3rem
  }
  .pd-subtitle {
    font-size:0.78rem;
    color:rgba(255,255,255,0.35);
    letter-spacing:0.10em;
    text-transform:uppercase
  }
  .pd-divider {
    width:40px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,193,7,0.4),transparent);
    margin:1.2rem auto
  }
  .pd-desc {
    font-size:0.83rem;
    color:rgba(255,255,255,0.45);
    text-align:center;
    line-height:1.6;
    max-width:300px;
    margin-bottom:1.6rem
  }
  .pd-lang-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0.75rem;
    width:100%
  }
  .pd-lang-btn {
    display:flex;
    align-items:center;
    gap:0.7rem;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    padding:0.85rem 1rem;
    cursor:pointer;
    transition:opacity 0.22s ease,transform 0.22s ease;
    text-decoration:none;
    color:rgba(255,255,255,0.75);
    font-family:'DM Sans',sans-serif;
    font-size:0.84rem
  }
  .pd-lang-btn:hover {
    background:rgba(255,193,7,0.08);
    border-color:rgba(255,193,7,0.3);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 6px 20px rgba(0,0,0,0.3)
  }
  .pd-lang-flag {
    font-size:1.3rem;
    flex-shrink:0
  }
  .pd-lang-name {
    font-weight:500
  }
  .pd-lang-sub {
    font-size:0.68rem;
    color:rgba(255,255,255,0.3);
    margin-top:0.05rem
  }
  .pd-note {
    margin-top:1.8rem;
    font-size:0.72rem;
    color:rgba(255,255,255,0.2);
    text-align:center;
    line-height:1.6;
    max-width:280px
  }
  .pd-note strong {
    color:rgba(255,255,255,0.35)
  }
  .card-overlay-fruit {
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:5px 10px 8px
  }
  .card-fruit-title {
    width:100%;
    text-align:center;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(0.82rem,2.5vw,1.0rem);
    letter-spacing:0.12em;
    font-weight:600;
    padding:clamp(22px,9.2%,34px) 0 0;
    flex-shrink:0
  }
  .card-fruit-wrapper {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:0
  }
  .hover-auth-guest:hover {
    color:white!important;
    border-color:rgba(255,255,255,0.6)!important
  }
  .hover-photo-btn:hover {
    background:#15848f!important
  }
  .hover-teal-glow:hover {
    background:rgba(27,154,170,0.32)!important;
    border-color:rgba(72,202,228,0.9)!important;
    box-shadow:0 0 18px rgba(27,154,170,0.6),inset 0 0 10px rgba(72,202,228,0.15)!important;
    color:rgba(120,230,255,1)!important
  }
  .hover-cyan-btn:hover {
    border-color:rgba(72,202,228,0.9)!important;
    box-shadow:0 0 18px rgba(27,154,170,0.7),inset 0 0 10px rgba(72,202,228,0.15)!important;
    color:rgba(120,230,255,1)!important
  }
  .hover-red-btn:hover {
    border-color:rgba(255,80,80,0.85)!important;
    box-shadow:0 0 18px rgba(220,50,50,0.55),inset 0 0 8px rgba(220,50,50,0.1)!important;
    background:rgba(220,50,50,0.08)!important
  }
  .hover-white-btn:hover {
    background:rgba(255,255,255,0.1)!important;
    border-color:rgba(255,255,255,0.3)!important;
    color:white!important
  }
  .hover-row:hover {
    background:rgba(0,0,0,0.02)!important
  }