/* Power Move — Life Legally Single
   Version: 1.0.1 — responsive sizing, above-the-fold optimized
   -------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

:root {
    --pm-purple:       #6427b0;
    --pm-purple-mid:   #7c3fd6;
    --pm-purple-light: #a97ef5;
    --pm-purple-glow:  rgba(100, 39, 176, 0.35);
    --pm-dark:         #0e0a1a;
    --pm-card-bg:      rgba(255, 255, 255, 0.04);
    --pm-card-border:  rgba(255, 255, 255, 0.09);
    --pm-card-hover:   rgba(100, 39, 176, 0.18);
    --pm-selected-bg:  rgba(100, 39, 176, 0.28);
    --pm-text:         #f0eaf9;
    --pm-muted:        rgba(240, 234, 249, 0.45);
    --pm-radius:       12px;
}

/* -----------------------------------------------------------------------
   Container — clamp-based padding keeps it compact on small screens
------------------------------------------------------------------------ */

#pm-wrap {
    font-family:   'DM Sans', sans-serif;
    background:    var(--pm-dark);
    border-radius: 20px;
    padding:       clamp(22px, 4vw, 40px) clamp(16px, 4vw, 36px);
    max-width:     560px;
    width:         100%;
    margin:        0 auto;
    color:         var(--pm-text);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.07),
        0 20px 60px rgba(0,0,0,0.7),
        0 0 90px var(--pm-purple-glow);
    position:      relative;
    overflow:      hidden;
}

#pm-wrap::before {
    content:''; position:absolute; top:-80px; right:-80px;
    width:240px; height:240px;
    background:radial-gradient(circle, rgba(124,63,214,0.4) 0%, transparent 70%);
    pointer-events:none;
}

/* -----------------------------------------------------------------------
   Heading — fluid type, no wrapping on most screens
------------------------------------------------------------------------ */

.pm-question {
    font-family:    'DM Sans', sans-serif;
    font-size:      clamp(16px, 3.2vw, 21px);
    font-weight:    600;
    text-align:     center;
    margin:         0 0 clamp(14px, 2.5vw, 22px);
    line-height:    1.2;
    color:          rgba(255,255,255,0.88);
    letter-spacing: -0.01em;
}

.pm-bracket {
    color:       var(--pm-purple-light);
    font-weight: 700;
}

/* -----------------------------------------------------------------------
   Move cards — 5 columns on desktop, 3+2 on mobile
------------------------------------------------------------------------ */

#pm-moves {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   clamp(6px, 1.2vw, 10px);
    margin-bottom:         clamp(10px, 2vw, 16px);
}

.pm-move-btn {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            5px;
    background:     var(--pm-card-bg);
    border:         1px solid var(--pm-card-border);
    border-radius:  var(--pm-radius);
    padding:        clamp(10px, 1.8vw, 16px) clamp(4px, 0.8vw, 8px);
    cursor:         pointer;
    transition:     all 0.18s ease;
    color:          var(--pm-text);
    text-align:     center;
    position:       relative;
    overflow:       hidden;
}

.pm-move-btn::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg, var(--pm-purple-glow), transparent);
    opacity:0; transition:opacity 0.18s; border-radius:var(--pm-radius);
}

.pm-move-btn:hover {
    border-color: var(--pm-purple-light);
    background:   var(--pm-card-hover);
    transform:    translateY(-2px);
    box-shadow:   0 6px 20px rgba(100,39,176,0.28);
}
.pm-move-btn:hover::before { opacity:1; }

.pm-move-btn.pm-selected {
    border-color: var(--pm-purple-light);
    background:   var(--pm-selected-bg);
    box-shadow:   0 0 0 2px var(--pm-purple), 0 6px 24px rgba(100,39,176,0.4);
    transform:    translateY(-2px);
}
.pm-move-btn.pm-selected::before { opacity:1; }

.pm-emoji {
    font-size:   clamp(18px, 2.8vw, 24px);
    line-height: 1;
    position:    relative; z-index:1;
    transition:  transform 0.18s ease;
}
.pm-move-btn:hover .pm-emoji,
.pm-move-btn.pm-selected .pm-emoji { transform: scale(1.12); }

.pm-move-label {
    font-size:      clamp(10px, 1.6vw, 13px);
    font-weight:    700;
    letter-spacing: 0.01em;
    position:       relative; z-index:1;
}

.pm-move-desc {
    font-size:   clamp(9px, 1.2vw, 11px);
    color:       var(--pm-muted);
    line-height: 1.2;
    position:    relative; z-index:1;
}

/* -----------------------------------------------------------------------
   Selected indicator
------------------------------------------------------------------------ */

.pm-indicator {
    text-align:    center;
    font-size:     12px;
    color:         var(--pm-purple-light);
    min-height:    1.3em;
    font-weight:   500;
    margin-bottom: 8px;
}

/* -----------------------------------------------------------------------
   Email row
------------------------------------------------------------------------ */

#pm-email-row {
    display: flex;
    gap:     8px;
}

#pm-email {
    flex:          1;
    min-width:     0;
    background:    rgba(255,255,255,0.06);
    border:        1px solid rgba(255,255,255,0.11);
    border-radius: 10px;
    padding:       clamp(10px, 1.8vw, 14px) 14px;
    font-size:     clamp(13px, 1.8vw, 15px);
    font-family:   'DM Sans', sans-serif;
    color:         var(--pm-text);
    outline:       none;
    transition:    all 0.18s;
    box-sizing:    border-box;
}
#pm-email::placeholder { color: rgba(255,255,255,0.28); }
#pm-email:focus {
    border-color: var(--pm-purple-light);
    background:   rgba(100,39,176,0.1);
    box-shadow:   0 0 0 3px rgba(100,39,176,0.18);
}

#pm-submit {
    background:     linear-gradient(135deg, var(--pm-purple) 0%, var(--pm-purple-mid) 100%);
    color:          #fff;
    border:         none;
    border-radius:  10px;
    padding:        clamp(10px, 1.8vw, 14px) clamp(14px, 2.2vw, 20px);
    font-size:      clamp(13px, 1.8vw, 15px);
    font-weight:    700;
    font-family:    'DM Sans', sans-serif;
    cursor:         pointer;
    white-space:    nowrap;
    transition:     all 0.18s ease;
    letter-spacing: 0.02em;
    box-shadow:     0 4px 14px rgba(100,39,176,0.38);
    flex-shrink:    0;
}
#pm-submit:hover:not(:disabled) {
    transform:  translateY(-1px);
    box-shadow: 0 8px 24px rgba(100,39,176,0.55);
    background: linear-gradient(135deg, var(--pm-purple-mid) 0%, #9d5fef 100%);
}
#pm-submit:disabled {
    opacity:0.35; cursor:not-allowed; transform:none; box-shadow:none;
}

/* -----------------------------------------------------------------------
   Legal + status
------------------------------------------------------------------------ */

.pm-legal {
    font-size:  11px;
    color:      var(--pm-muted);
    text-align: center;
    margin:     10px 0 0;
}

#pm-status {
    font-size:  12px;
    color:      #f87171;
    text-align: center;
    min-height: 1.2em;
    margin:     6px 0 0;
}

/* -----------------------------------------------------------------------
   Success state
------------------------------------------------------------------------ */

#pm-success-view { text-align:center; padding:16px 0; }

.pm-success-icon {
    font-size:     48px;
    display:       block;
    margin-bottom: 12px;
    animation:     pm-pop 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes pm-pop {
    from { transform:scale(0.4); opacity:0; }
    to   { transform:scale(1);   opacity:1; }
}

.pm-success-title {
    font-family: 'Playfair Display', serif;
    font-size:   clamp(22px, 4vw, 28px);
    font-weight: 700;
    margin:      0 0 10px;
    background:  linear-gradient(135deg, #fff 0%, var(--pm-purple-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pm-success-msg {
    color:       var(--pm-muted);
    font-size:   15px;
    line-height: 1.6;
}

/* -----------------------------------------------------------------------
   Responsive — mobile breakpoints
------------------------------------------------------------------------ */

/* Narrow phones — stack to 3+2 grid */
@media (max-width: 380px) {
    #pm-moves {
        grid-template-columns: repeat(3, 1fr);
    }
    #pm-email-row {
        flex-direction: column;
    }
    #pm-submit {
        width:      100%;
        text-align: center;
    }
}

/* Tablets embedded in narrower columns */
@media (max-width: 480px) {
    .pm-move-desc { display: none; } /* hide subtitles on very small to save height */
}

/* =======================================================================
   SUCCESS SCREEN ADDITIONS — v1.1.0
   ======================================================================= */

/* Header */
.pm-success-header { text-align:center; margin-bottom:20px; }
.pm-success-icon-lg { font-size:44px; display:block; margin-bottom:10px; animation:pm-pop 0.45s cubic-bezier(0.34,1.56,0.64,1) both; }
.pm-success-title { font-family:'DM Sans',sans-serif; font-size:clamp(17px,3vw,22px); font-weight:700; margin:0 0 6px; color:var(--pm-text); }
.pm-success-confirm { font-size:13px; color:var(--pm-muted); margin:0; }

/* Progress bar */
.pm-progress-wrap { margin:20px 0; }
.pm-progress-label { font-size:12px; font-weight:600; color:var(--pm-purple-light); text-align:center; margin:0 0 8px; letter-spacing:0.02em; }
.pm-progress-bar { background:rgba(255,255,255,0.08); border-radius:99px; height:8px; overflow:hidden; margin-bottom:10px; }
.pm-progress-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--pm-purple),var(--pm-purple-light)); border-radius:99px; }
.pm-progress-steps { display:flex; justify-content:space-between; gap:4px; flex-wrap:wrap; }
.pm-step { font-size:11px; color:var(--pm-muted); font-weight:500; }
.pm-step-done { color:var(--pm-purple-light); font-weight:700; }
.pm-step-locked { color:rgba(255,255,255,0.2); }

/* SAH CTA */
.pm-sah-cta { background:rgba(100,39,176,0.12); border:1px solid rgba(100,39,176,0.3); border-radius:12px; padding:16px; margin:16px 0; text-align:center; }
.pm-sah-hook { font-size:13px; color:var(--pm-text); line-height:1.5; margin:0 0 12px; }
.pm-sah-btn { display:inline-block; background:linear-gradient(135deg,var(--pm-purple),var(--pm-purple-mid)); color:#fff; text-decoration:none; font-weight:700; font-size:14px; padding:11px 20px; border-radius:8px; transition:all 0.18s; box-shadow:0 4px 14px rgba(100,39,176,0.38); }
.pm-sah-btn:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(100,39,176,0.55); color:#fff; }
.pm-sah-meta { font-size:11px; color:var(--pm-muted); margin:8px 0 0; }

/* Suggestions */
.pm-suggestions-wrap { margin-top:16px; }
.pm-suggestions-label { font-size:12px; font-weight:700; color:var(--pm-purple-light); margin:0 0 8px; letter-spacing:0.03em; text-transform:uppercase; }
.pm-suggestion-item { font-size:13px; color:var(--pm-text); line-height:1.5; padding:7px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.pm-suggestion-item:last-child { border-bottom:none; }
.pm-refresh-btn { margin-top:10px; background:transparent; border:1px solid rgba(255,255,255,0.15); color:var(--pm-muted); border-radius:6px; padding:6px 14px; font-size:12px; cursor:pointer; transition:all 0.18s; font-family:'DM Sans',sans-serif; }
.pm-refresh-btn:hover { border-color:var(--pm-purple-light); color:var(--pm-purple-light); }

/* =======================================================================
   TIP CARD + SHARE BUTTONS — v1.1.1
   ======================================================================= */

.pm-tip-card {
    background:    rgba(100, 39, 176, 0.12);
    border:        1px solid rgba(100, 39, 176, 0.3);
    border-left:   3px solid var(--pm-purple-light);
    border-radius: 10px;
    padding:       14px 16px;
    margin:        16px 0 0;
}
.pm-tip-label {
    font-size:   11px;
    font-weight: 700;
    color:        var(--pm-purple-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin:      0 0 6px;
}
.pm-tip-text {
    font-size:   14px;
    color:       var(--pm-text);
    line-height: 1.6;
    margin:      0 0 14px;
}

/* Share row — sits right under tip */
.pm-share-row {
    display:   flex;
    gap:       8px;
    flex-wrap: wrap;
}
.pm-share-btn {
    font-family:    'DM Sans', sans-serif;
    font-size:      12px;
    font-weight:    600;
    padding:        6px 12px;
    border-radius:  6px;
    border:         1px solid rgba(255,255,255,0.15);
    background:     rgba(255,255,255,0.05);
    color:          var(--pm-muted);
    cursor:         pointer;
    text-decoration:none;
    transition:     all 0.16s;
    white-space:    nowrap;
}
.pm-share-btn:hover {
    border-color: var(--pm-purple-light);
    color:        var(--pm-purple-light);
    background:   rgba(100,39,176,0.12);
}