.card-hand-drawn-border {
    position:relative
  }
  .card-hand-drawn-border::before {
    content:'';
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    background:transparent;
    pointer-events:none;
    z-index:0
  }
  @keyframes cardPaperShimmer {
    0%,100% {
      opacity:0.6
    }
    50% {
      opacity:0.85
    }
  }
  #letsplay-circle {
    position:absolute;
    inset:0;
    border-radius:18px;
    border:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0.2rem;
    cursor:pointer;
    pointer-events:auto;
    overflow:visible
  }
  #letsplay-circle::before {
    content:'';
    position:absolute;
    inset:5px;
    border:1px solid rgba(160,120,40,0.35);
    border-radius:12px;
    pointer-events:none;
    z-index:0
  }
  #letsplay-circle::after {
    content:'';
    position:absolute;
    inset:8px;
    border:0.5px solid rgba(160,120,40,0.18);
    border-radius:10px;
    pointer-events:none;
    z-index:0
  }
  #letsplay-circle svg,#letsplay-circle span {
    position:relative;
    z-index:1
  }
  #letsplay-circle span {
    font-family:'Caveat',cursive!important;
    font-size:1.05rem!important;
    font-weight:600!important;
    letter-spacing:0.04em!important;
    color:rgba(255,238,185,0.95)!important;
    text-shadow:0 0 10px rgba(255,210,100,0.4),0 0 20px rgba(180,140,40,0.25)!important;
    text-transform:none!important
  }
  #letsplay-circle .lp-play-icon {
    display:none!important
  }
  #letsplay-circle .lp-question-mark {
    font-family:'Cormorant Garamond',serif;
    font-size:2.2rem;
    font-weight:400;
    color:rgba(160,230,180,0.92);
    line-height:1;
    text-shadow:0 0 14px rgba(0,200,80,0.5);
    position:relative;
    z-index:1
  }
  #auth-screen {
    background:rgba(0,4,18,0.72)!important;
    backdrop-filter:blur(8px)!important;
    -webkit-backdrop-filter:blur(8px)!important
  }
  #auth-inner-circle {
    border-radius:28px!important;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"),linear-gradient(160deg,#fdf8f0 0%,#f5eedd 35%,#ede4d0 70%,#e5d9c4 100%)!important;
    box-shadow:0 0 0 1.5px rgba(180,150,60,0.7),0 0 0 4px rgba(180,150,60,0.22),0 0 0 8px rgba(180,150,60,0.08),0 20px 80px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,245,220,0.8)!important
  }
  #auth-screen::after {
    border-radius:28px!important;
    border:none!important;
    box-shadow:none!important;
    outline:1px solid rgba(160,120,40,0.4)!important;
    outline-offset:-12px!important
  }
  .auth-card-frame {
    position:absolute;
    inset:0;
    border-radius:28px;
    pointer-events:none;
    z-index:0;
    overflow:hidden
  }
  .auth-card-frame::before {
    content:'';
    position:absolute;
    inset:8px;
    border:1px solid rgba(160,120,40,0.38);
    border-radius:22px
  }
  .auth-card-frame::after {
    content:'';
    position:absolute;
    inset:14px;
    border:0.5px solid rgba(160,120,40,0.2);
    border-radius:18px
  }
  .auth-logo {
    color:rgba(60,35,5,0.92)!important;
    -webkit-text-fill-color:rgba(60,35,5,0.92)!important;
    text-shadow:none!important;
    font-family:'Caveat',cursive!important;
    font-size:clamp(1.9rem,8vw,2.7rem)!important;
    font-weight:600!important;
    letter-spacing:0.08em!important
  }
  .auth-tagline {
    color:rgba(120,80,20,0.7)!important;
    font-family:'Caveat',cursive!important;
    font-size:0.95rem!important;
    letter-spacing:0.15em!important
  }
  .auth-google-btn {
    background:rgba(80,50,10,0.08)!important;
    border-color:rgba(140,100,30,0.45)!important;
    color:rgba(50,30,5,0.88)!important;
    box-shadow:0 2px 8px rgba(0,0,0,0.12)!important
  }
  .auth-google-btn:hover {
    background:rgba(80,50,10,0.14)!important;
    box-shadow:0 4px 16px rgba(0,0,0,0.18)!important
  }
  .auth-or span {
    color:rgba(120,80,20,0.55)!important
  }
  .auth-or::before,.auth-or::after {
    background:rgba(160,120,40,0.22)!important
  }
  .auth-input {
    background:rgba(255,248,235,0.7)!important;
    border-color:rgba(160,120,40,0.35)!important;
    color:rgba(40,20,5,0.88)!important;
    border-radius:14px!important
  }
  .auth-input:focus {
    border-color:rgba(180,140,40,0.7)!important;
    background:rgba(255,250,240,0.9)!important;
    box-shadow:0 0 14px rgba(200,150,30,0.2)!important
  }
  .auth-input::placeholder {
    color:rgba(120,80,20,0.4)!important
  }
  .auth-email-btn {
    background:rgba(80,50,10,0.12)!important;
    border-color:rgba(160,120,40,0.6)!important;
    color:rgba(50,30,5,0.88)!important;
    box-shadow:0 2px 8px rgba(0,0,0,0.1)!important
  }
  .auth-email-btn:hover {
    background:rgba(80,50,10,0.2)!important
  }
  .auth-guest-link {
    color:rgba(120,80,20,0.65)!important;
    border-bottom-color:rgba(120,80,20,0.35)!important;
    font-family:'Caveat',cursive!important;
    font-size:1rem!important
  }
  .auth-guest-link:hover {
    color:rgba(100,60,10,0.9)!important
  }
  .circle-modal {
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important
  }
  .circle-modal::before {
    content:'';
    position:fixed;
    inset:0;
    background-image:url('bg.png');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    filter:blur(10px) brightness(0.72);
    -webkit-filter:blur(10px) brightness(0.72);
    z-index:0;
    pointer-events:none;
    transform:scale(1.06)
  }
  .mode-circle::before {
    content:'';
    position:absolute;
    inset:10px;
    border:1px solid rgba(160,120,40,0.35);
    border-radius:20px;
    pointer-events:none;
    z-index:0
  }
  .mode-circle::after {
    content:'';
    position:absolute;
    inset:16px;
    border:0.5px solid rgba(160,120,40,0.18);
    border-radius:16px;
    pointer-events:none;
    z-index:0
  }
  .mode-title {
    color:#2C3E50!important;
    font-family:'Caveat',cursive!important;
    font-size:1.3rem!important;
    font-weight:600!important;
    letter-spacing:0.04em!important
  }
  .mode-sub {
    color:#4a5a6a!important;
    font-family:'Caveat',cursive!important;
    font-size:0.95rem!important;
    font-weight:600!important;
    line-height:1.4!important
  }
  .mode-btn:hover {
    background:rgba(255,252,245,0.98)!important;
    border-color:rgba(160,120,40,0.55)!important
  }
  .mode-btn .mode-title[style*="color:#ffd580"] {
    color:rgba(120,70,0,0.92)!important
  }
  .mode-icon {
    position:relative!important;
    width:56px!important;
    height:56px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-shrink:0!important
  }
  #welcome {
    height:100dvh!important;
    overflow:hidden!important
  }
  #welcome-main-content {
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important
  }
  #welcome-main-content .welcome-buttons {
    display:none!important
  }
  #welcome .welcome-title {
    font-family:'Caveat',cursive!important;
    font-weight:600!important;
    font-size:clamp(2rem,9vw,3.2rem)!important;
    letter-spacing:0.04em!important;
    -webkit-text-fill-color:#ffffff!important;
    color:#ffffff!important;
    background:none!important;
    -webkit-background-clip:unset!important;
    background-clip:unset!important;
    filter:none!important;
    text-shadow:0 0 40px rgba(180,160,255,0.4),0 0 80px rgba(120,100,220,0.2)!important;
    line-height:0.95!important;
    animation:wFadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.4s both,titleBreathe 7s ease-in-out 1.6s infinite!important
  }
  #welcome .welcome-subtitle {
    font-style:normal!important;
    -webkit-text-fill-color:rgba(255,255,255,0.7)!important;
    color:rgba(255,255,255,0.7)!important;
    background:none!important;
    -webkit-background-clip:unset!important;
    background-clip:unset!important;
    text-shadow:0 0 20px rgba(72,202,228,0.22)!important;
    animation:wFadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.58s both!important
  }
  @media (max-height:620px) {
    #welcome .welcome-title {
      font-size:clamp(1.7rem,7vw,2.6rem)!important
    }
    #welcome .welcome-divider {
      display:none!important
    }
    #welcome .welcome-subtitle {
      font-size:0.9rem!important;
      margin-bottom:0.8rem!important
    }
  }
  @media (max-height:520px) {
    #welcome .welcome-subtitle {
      display:none!important
    }
  }
  #letsplay-wrapper {
    border-radius:22px!important;
    width:180px!important;
    height:240px!important
  }
  .mode-circle {
    border-radius:28px!important;
    width:min(82vw,440px)!important;
    height:auto!important;
    min-height:min(70vh,480px)!important;
    padding:2rem 1.4rem 1.8rem!important;
    gap:0.75rem!important;
    justify-content:center!important
  }
  @media (max-height:700px) {
    .mode-circle {
      width:min(80vw,420px)!important;
      min-height:min(68vh,440px)!important;
      padding:1.5rem 1.2rem 1.4rem!important
    }
  }
  @media (max-height:580px) {
    .mode-circle {
      width:min(78vw,400px)!important;
      min-height:unset!important;
      padding:1.2rem 1rem 1.2rem!important
    }
  }
  .mode-btn {
    width:100%!important;
    background:rgba(255,248,230,0.6)!important;
    border-color:rgba(160,120,40,0.35)!important;
    color:rgba(50,30,5,0.88)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:0 2px 10px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.7)!important
  }
  .mode-btn.solo-btn {
    background:rgba(220,245,252,0.55)!important;
    border-color:rgba(72,170,200,0.4)!important;
    box-shadow:0 2px 10px rgba(27,154,170,0.15),inset 0 1px 0 rgba(255,255,255,0.7)!important
  }
  .mode-btn.online-btn {
    background:rgba(235,220,255,0.5)!important;
    border-color:rgba(155,93,229,0.35)!important;
    box-shadow:0 2px 10px rgba(155,93,229,0.15),inset 0 1px 0 rgba(255,255,255,0.7)!important
  }
  .mode-btn.room-btn {
    background:rgba(255,245,210,0.6)!important;
    border-color:rgba(200,150,40,0.4)!important;
    box-shadow:0 2px 10px rgba(200,150,40,0.15),inset 0 1px 0 rgba(255,255,255,0.7)!important
  }
  .mode-btn:hover,.mode-btn:active {
    background:rgba(255,252,240,0.85)!important;
    border-color:rgba(160,120,40,0.6)!important;
    box-shadow:0 4px 18px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.8)!important
  }
  .mode-card-header {
    font-family:'Caveat',cursive;
    font-size:1.5rem;
    font-weight:600;
    color:rgba(70,40,8,0.88);
    text-align:center;
    letter-spacing:0.06em;
    margin-bottom:0.5rem;
    text-shadow:0 1px 3px rgba(0,0,0,0.08)
  }