Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,5 +1,4 @@
 import streamlit as st
-import random
 import base64
 import os
 import time
@@ -8,15 +7,13 @@ st.set_page_config(page_title="A Special Invitation 🌸", page_icon="🌸", lay
 
 # ── session state ──────────────────────────────────────────────────────────────
 PASSWORD = "0207"
-defaults = {
+for k, v in {
     "authenticated": False,
-    "no_clicks": 0,
-    "show_yes_dialog": False,
-    "showing_no_image": False,
-    "no_image_index": 0,
-    "no_pos": (1, 3),   # (row, col) in the grid
-}
-for k, v in defaults.items():
+    "show_yes": False,
+    "showing_no": False,
+    "no_index": 0,
+    "no_timer_start": None,
+}.items():
     if k not in st.session_state:
         st.session_state[k] = v
 
@@ -39,136 +36,174 @@ st.markdown("""
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400;700&display=swap');
 
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-html, body, .stApp { background: #080508 !important; min-height: 100vh; overflow-x: hidden; }
+html, body, .stApp { background: #080508 !important; min-height: 100vh; }
 
 header, footer, #MainMenu, .stDeployButton,
 [data-testid="stToolbar"], [data-testid="stDecoration"],
 [data-testid="stStatusWidget"] { display: none !important; }
-.block-container { padding: 0 !important; max-width: 100% !important; }
-
-#heart-canvas { position:fixed; top:0; left:0; width:100vw; height:100vh; pointer-events:none; z-index:0; }
 
-/* ── LOGIN ── */
-.login-page {
-    position: relative; z-index: 10;
-    min-height: 100vh;
-    display: flex; align-items: center; justify-content: center;
-    padding: 20px;
-}
-.login-card {
-    background: linear-gradient(145deg, rgba(28,8,20,0.97), rgba(12,3,10,0.99));
-    border: 1px solid rgba(255,105,180,0.3);
-    border-radius: 28px;
-    padding: 52px 44px 44px;
-    max-width: 380px; width: 100%;
-    text-align: center;
-    box-shadow: 0 0 80px rgba(255,20,147,0.12);
-    animation: floatCard 6s ease-in-out infinite;
+.block-container {
+    padding: 1rem 1rem 1rem !important;
+    max-width: 480px !important;
+    margin: 0 auto !important;
 }
-@keyframes floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
-.login-icon { font-size:48px; display:block; margin-bottom:16px; filter:drop-shadow(0 0 12px rgba(255,20,147,0.5)); }
-.login-eyebrow { font-family:'Lato',sans-serif; font-size:10px; letter-spacing:5px; color:#ff69b4; opacity:.7; text-transform:uppercase; margin-bottom:10px; }
-.login-heading { font-family:'Playfair Display',serif; font-size:26px; color:#fff; margin-bottom:28px; }
 
-div[data-testid="stTextInput"] input {
-    background: rgba(255,182,193,0.06) !important;
-    border: 1px solid rgba(255,105,180,0.3) !important;
-    border-radius: 50px !important; color: #fff !important;
-    padding: 14px 22px !important; font-family: 'Lato',sans-serif !important;
-    letter-spacing: 2px !important; text-align: center !important; font-size: 14px !important;
+#heart-canvas {
+    position: fixed; top:0; left:0;
+    width:100vw; height:100vh;
+    pointer-events:none; z-index:0;
 }
-div[data-testid="stTextInput"] input::placeholder { color:rgba(255,182,193,0.35) !important; }
-div[data-testid="stTextInput"] input:focus { border-color:rgba(255,20,147,0.6) !important; outline:none !important; }
-div[data-testid="stTextInput"] label { display:none !important; }
 
-/* ── MAIN CARD ── */
-.v-wrapper {
-    position: relative; z-index: 10;
-    display: flex; flex-direction: column;
-    align-items: center; justify-content: center;
-    padding: 40px 20px 10px;
-}
+/* ── CARD ── */
 .card {
+    position: relative; z-index: 10;
     background: linear-gradient(155deg, rgba(28,8,20,0.96), rgba(14,3,11,0.98));
     border: 1px solid rgba(255,105,180,0.25);
-    border-radius: 30px;
-    padding: 52px 48px 40px;
-    max-width: 500px; width: 100%;
+    border-radius: 24px;
+    padding: 36px 24px 28px;
     text-align: center;
-    box-shadow: 0 0 80px rgba(255,20,147,0.12), inset 0 1px 0 rgba(255,182,193,0.08);
+    box-shadow: 0 0 60px rgba(255,20,147,0.1), inset 0 1px 0 rgba(255,182,193,0.07);
+    margin-bottom: 20px;
     animation: floatCard 7s ease-in-out infinite;
 }
-.rose { font-size:52px; display:block; margin-bottom:18px; animation:roseGlow 2.5s ease-in-out infinite; filter:drop-shadow(0 0 14px rgba(255,20,147,0.55)); }
-@keyframes roseGlow { 0%,100%{transform:scale(1) rotate(-3deg)} 50%{transform:scale(1.1) rotate(3deg)} }
-.eyebrow { font-family:'Lato',sans-serif; font-size:10px; letter-spacing:5px; text-transform:uppercase; color:#ff69b4; opacity:.7; margin-bottom:12px; }
-.deco { width:48px; height:1px; background:linear-gradient(90deg,transparent,#ff69b4 50%,transparent); margin:0 auto 20px; }
-.question { font-family:'Playfair Display',serif; font-size:28px; font-weight:700; color:#fff; line-height:1.4; margin-bottom:8px; }
+@keyframes floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
+
+.rose { font-size:44px; display:block; margin-bottom:14px;
+    animation:roseGlow 2.5s ease-in-out infinite;
+    filter:drop-shadow(0 0 12px rgba(255,20,147,0.5)); }
+@keyframes roseGlow { 0%,100%{transform:scale(1) rotate(-3deg)} 50%{transform:scale(1.08) rotate(3deg)} }
+
+.eyebrow { font-family:'Lato',sans-serif; font-size:9px; letter-spacing:4px;
+    text-transform:uppercase; color:#ff69b4; opacity:.7; margin-bottom:10px; }
+.deco { width:40px; height:1px;
+    background:linear-gradient(90deg,transparent,#ff69b4 50%,transparent);
+    margin:0 auto 16px; }
+.question { font-family:'Playfair Display',serif; font-size:22px; font-weight:700;
+    color:#fff; line-height:1.45; margin-bottom:6px; }
 .question em { color:#ff69b4; font-style:italic; }
-.hearts-deco { font-size:13px; color:#ff69b4; opacity:.35; letter-spacing:10px; margin:14px 0 18px; }
-.card-sub { font-family:'Lato',sans-serif; font-size:13px; color:rgba(255,182,193,.45); line-height:1.7; margin-bottom:10px; }
+.hearts-deco { font-size:11px; color:#ff69b4; opacity:.3; letter-spacing:8px; margin:10px 0 12px; }
+.card-sub { font-family:'Lato',sans-serif; font-size:12px;
+    color:rgba(255,182,193,.4); line-height:1.6; }
 
-/* ── NO IMAGE OVERLAY ── */
-.no-overlay {
-    position: fixed; top:0; left:0; width:100vw; height:100vh;
-    background: rgba(0,0,0,0.88); backdrop-filter: blur(14px);
-    z-index: 2000;
-    display: flex; flex-direction:column; align-items:center; justify-content:center;
-    animation: fadeIn 0.35s ease; gap: 18px; padding: 30px;
-}
-@keyframes fadeIn { from{opacity:0} to{opacity:1} }
-.no-overlay img {
-    max-width: 320px; width: 88%; border-radius: 20px;
-    border: 1px solid rgba(255,105,180,0.25);
-    box-shadow: 0 0 60px rgba(255,20,147,0.2), 0 20px 50px rgba(0,0,0,0.5);
-    animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
-}
-@keyframes popIn { from{transform:scale(0.7);opacity:0} to{transform:scale(1);opacity:1} }
-.no-overlay-title { font-family:'Playfair Display',serif; font-size:22px; color:#ff69b4; font-style:italic; text-align:center; }
-.no-overlay-sub { font-family:'Lato',sans-serif; font-size:13px; color:rgba(255,182,193,0.45); text-align:center; line-height:1.7; }
-.no-timer-bar-wrap { width:200px; height:3px; background:rgba(255,105,180,0.15); border-radius:3px; overflow:hidden; }
-.no-timer-bar { height:100%; background:linear-gradient(90deg,#ff1493,#ff69b4); border-radius:3px; animation:drainBar 3s linear forwards; }
-@keyframes drainBar { from{width:100%} to{width:0%} }
-
-/* ── YES OVERLAY ── */
-.yes-overlay {
-    position: fixed; top:0; left:0; width:100vw; height:100vh;
-    background: rgba(0,0,0,0.88); backdrop-filter: blur(14px);
-    z-index: 2000;
-    display: flex; flex-direction:column; align-items:center; justify-content:center;
-    animation: fadeIn 0.35s ease; gap: 18px; padding: 30px;
+/* ── BUTTONS ── */
+.btn-row {
+    position: relative; z-index: 10;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 14px;
+    margin-top: 4px;
 }
-.yes-overlay img { max-width: 320px; width: 88%; border-radius: 20px;
-    border: 1px solid rgba(255,105,180,0.25);
-    box-shadow: 0 0 60px rgba(255,20,147,0.25), 0 20px 50px rgba(0,0,0,0.5);
-    animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1); }
-.yes-overlay-title { font-family:'Playfair Display',serif; font-size:26px; font-weight:700; color:#fff; text-align:center; }
-.yes-overlay-sub { font-family:'Lato',sans-serif; font-size:14px; color:rgba(255,182,193,0.55); text-align:center; line-height:1.8; }
 
-/* ── ALL BUTTONS base ── */
 div[data-testid="stButton"] > button {
+    background: linear-gradient(135deg, #ff1493, #ff69b4) !important;
+    color: #fff !important;
+    border: none !important;
     border-radius: 50px !important;
-    font-family: 'Lato',sans-serif !important;
+    font-family: 'Lato', sans-serif !important;
+    font-size: 12px !important;
+    font-weight: 700 !important;
     letter-spacing: 1.3px !important;
     text-transform: uppercase !important;
-    font-weight: 700 !important;
-    font-size: 11px !important;
-    padding: 10px 22px !important;
-    border: none !important;
-    transition: all 0.3s ease !important;
+    padding: 11px 26px !important;
+    box-shadow: 0 4px 18px rgba(255,20,147,0.38) !important;
+    transition: all 0.2s ease !important;
+    width: auto !important;
+    min-width: 100px !important;
+    max-width: 160px !important;
+}
+div[data-testid="stButton"] > button:active {
+    transform: scale(0.96) !important;
 }
 
+/* ── OVERLAY (No image + Yes image) ── */
+.overlay {
+    position: fixed; top:0; left:0; width:100vw; height:100vh;
+    background: rgba(0,0,0,0.88);
+    backdrop-filter: blur(12px);
+    z-index: 2000;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    padding: 24px; gap: 14px;
+    animation: fadeIn 0.3s ease;
+}
+@keyframes fadeIn { from{opacity:0} to{opacity:1} }
+
+.overlay img {
+    max-width: 280px; width: 82%;
+    border-radius: 18px;
+    border: 1px solid rgba(255,105,180,0.2);
+    box-shadow: 0 0 50px rgba(255,20,147,0.18), 0 16px 40px rgba(0,0,0,0.5);
+    animation: popIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
+}
+@keyframes popIn { from{transform:scale(0.75);opacity:0} to{transform:scale(1);opacity:1} }
+
+.overlay-title {
+    font-family: 'Playfair Display', serif;
+    font-size: 22px; color: #ff69b4;
+    font-style: italic; text-align: center;
+}
+.overlay-title.white { color: #fff; font-style: normal; font-weight: 700; }
+.overlay-sub {
+    font-family: 'Lato', sans-serif;
+    font-size: 12px; color: rgba(255,182,193,0.45);
+    text-align: center; line-height: 1.65;
+}
+.timer-bar-wrap { width:140px; height:3px; background:rgba(255,105,180,0.15); border-radius:3px; overflow:hidden; }
+.timer-bar { height:100%; background:linear-gradient(90deg,#ff1493,#ff69b4); border-radius:3px; animation:drain 3s linear forwards; }
+@keyframes drain { from{width:100%} to{width:0%} }
+
 /* ── NO MESSAGE ── */
-.no-msg { font-family:'Playfair Display',serif; font-style:italic; font-size:14px;
-    color:rgba(255,182,193,0.45); text-align:center; margin-top:8px; animation:fadeIn 0.5s ease; }
+.no-msg {
+    position: relative; z-index: 10;
+    font-family: 'Playfair Display', serif;
+    font-style: italic; font-size: 13px;
+    color: rgba(255,182,193,0.4);
+    text-align: center; margin-top: 10px;
+    animation: fadeIn 0.5s ease;
+}
 
-/* ── spacer rows ── */
-.spacer { height: 48px; }
-.spacer-sm { height: 24px; }
+/* ── LOGIN ── */
+.login-wrap {
+    position: relative; z-index: 10;
+    min-height: 100vh;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    padding: 20px;
+}
+.login-card {
+    background: linear-gradient(145deg, rgba(28,8,20,0.97), rgba(12,3,10,0.99));
+    border: 1px solid rgba(255,105,180,0.3);
+    border-radius: 24px;
+    padding: 40px 32px 36px;
+    max-width: 340px; width: 100%;
+    text-align: center;
+    box-shadow: 0 0 60px rgba(255,20,147,0.1);
+    animation: floatCard 6s ease-in-out infinite;
+}
+.login-icon { font-size:42px; display:block; margin-bottom:12px;
+    filter:drop-shadow(0 0 10px rgba(255,20,147,0.5)); }
+.login-eyebrow { font-family:'Lato',sans-serif; font-size:9px; letter-spacing:4px;
+    color:#ff69b4; opacity:.7; text-transform:uppercase; margin-bottom:8px; }
+.login-heading { font-family:'Playfair Display',serif; font-size:22px; color:#fff; margin-bottom:24px; }
+
+div[data-testid="stTextInput"] input {
+    background: rgba(255,182,193,0.06) !important;
+    border: 1px solid rgba(255,105,180,0.3) !important;
+    border-radius: 50px !important; color: #fff !important;
+    padding: 12px 20px !important;
+    font-family: 'Lato',sans-serif !important;
+    letter-spacing: 2px !important; text-align: center !important;
+    font-size: 14px !important;
+}
+div[data-testid="stTextInput"] input::placeholder { color:rgba(255,182,193,0.35) !important; }
+div[data-testid="stTextInput"] input:focus { border-color:rgba(255,20,147,0.6) !important; outline:none !important; }
+div[data-testid="stTextInput"] label { display:none !important; }
 </style>
 """, unsafe_allow_html=True)
 
-# ── hearts canvas ──────────────────────────────────────────────────────────────
-show_confetti = "true" if st.session_state.show_yes_dialog else "false"
+# ── floating hearts ────────────────────────────────────────────────────────────
+show_confetti = "true" if st.session_state.show_yes else "false"
 st.markdown(f"""
 <canvas id="heart-canvas"></canvas>
 <script>
@@ -179,16 +214,16 @@ st.markdown(f"""
   function resize(){{c.width=window.innerWidth;c.height=window.innerHeight;}}
   resize(); window.addEventListener('resize',resize);
   const cols=['#ff69b4','#ff1493','#ffb6c1','#ff85a2','#ff4d8f'];
-  const hearts=[];
-  function H(){{this.reset();}}
+  const H=function(){{this.reset();}};
   H.prototype.reset=function(){{
-    this.x=Math.random()*c.width; this.y=c.height+20;
-    this.s=Math.random()*14+5; this.sp=Math.random()*1.0+0.3;
-    this.op=Math.random()*0.4+0.07; this.sw=Math.random()*1.6-0.8;
-    this.sa=Math.random()*Math.PI*2; this.col=cols[Math.floor(Math.random()*cols.length)];
+    this.x=Math.random()*c.width;this.y=c.height+20;
+    this.s=Math.random()*12+4;this.sp=Math.random()*0.9+0.25;
+    this.op=Math.random()*0.35+0.06;this.sw=Math.random()*1.4-0.7;
+    this.sa=Math.random()*Math.PI*2;this.col=cols[Math.floor(Math.random()*cols.length)];
     this.rot=Math.random()*Math.PI*2;
   }};
-  for(let i=0;i<40;i++){{const h=new H();h.y=Math.random()*c.height;hearts.push(h);}}
+  const hearts=[];
+  for(let i=0;i<30;i++){{const h=new H();h.y=Math.random()*c.height;hearts.push(h);}}
   function dh(x,y,s,col,op,rot){{
     ctx.save();ctx.translate(x,y);ctx.rotate(rot);
     ctx.globalAlpha=op;ctx.fillStyle=col;
@@ -215,23 +250,19 @@ st.markdown(f"""
     const cctx=cc.getContext('2d');
     const pc=['#ff1493','#ff69b4','#ffb6c1','#ffd700','#ff4500','#fff0f5'];
     const pieces=[];
-    for(let i=0;i<150;i++) pieces.push({{
+    for(let i=0;i<120;i++) pieces.push({{
       x:Math.random()*cc.width,y:-10-Math.random()*200,
-      sz:Math.random()*9+3,col:pc[Math.floor(Math.random()*pc.length)],
-      sp:Math.random()*5+3,sw:Math.random()*3-1.5,
-      rot:Math.random()*360,rs:Math.random()*6-3,op:1
+      sz:Math.random()*8+3,col:pc[Math.floor(Math.random()*pc.length)],
+      sp:Math.random()*4+2,sw:Math.random()*2-1,rot:Math.random()*360,rs:Math.random()*4-2,op:1
     }});
     function ac(){{
-      cctx.clearRect(0,0,cc.width,cc.height);
-      let alive=false;
+      cctx.clearRect(0,0,cc.width,cc.height);let alive=false;
       pieces.forEach(p=>{{
-        if(p.y<cc.height+10){{
-          alive=true;p.y+=p.sp;p.x+=p.sw;p.rot+=p.rs;
-          if(p.y>cc.height*.55)p.op-=0.01;
+        if(p.y<cc.height+10){{alive=true;p.y+=p.sp;p.x+=p.sw;p.rot+=p.rs;
+          if(p.y>cc.height*.5)p.op-=0.012;
           cctx.save();cctx.translate(p.x,p.y);cctx.rotate(p.rot*Math.PI/180);
           cctx.globalAlpha=Math.max(0,p.op);cctx.fillStyle=p.col;
-          cctx.fillRect(-p.sz/2,-p.sz/2,p.sz,p.sz*.55);
-          cctx.restore();
+          cctx.fillRect(-p.sz/2,-p.sz/2,p.sz,p.sz*.55);cctx.restore();
         }}
       }});
       if(alive)requestAnimationFrame(ac);else cc.remove();
@@ -247,26 +278,20 @@ st.markdown(f"""
 # ══════════════════════════════════════════════════════════════════════════════
 if not st.session_state.authenticated:
     st.markdown("""
-    <div class="login-page">
+    <div class="login-wrap">
       <div class="login-card">
         <span class="login-icon">🔐</span>
         <p class="login-eyebrow">Private Access</p>
         <p class="login-heading">Enter your secret code</p>
       </div>
     </div>
-    <style>.block-container { margin-top: -26vh !important; }</style>
+    <style>.block-container { margin-top: -20vh !important; }</style>
     """, unsafe_allow_html=True)
-    _, mid, _ = st.columns([1, 2, 1])
+    _, mid, _ = st.columns([1, 4, 1])
     with mid:
-        pwd = st.text_input("code", type="password", placeholder="✦  Access Code  ✦", label_visibility="collapsed")
-        st.markdown("""
-        <style>
-        div[data-testid="stButton"] > button {
-            background: linear-gradient(135deg,#ff1493,#ff69b4) !important;
-            color:#fff !important; box-shadow:0 4px 24px rgba(255,20,147,0.4) !important;
-            width:100% !important; padding:13px 0 !important;
-        }
-        </style>""", unsafe_allow_html=True)
+        pwd = st.text_input("code", type="password",
+                            placeholder="✦  Access Code  ✦",
+                            label_visibility="collapsed")
         if st.button("✦  Unlock  ✦", use_container_width=True):
             if pwd == PASSWORD:
                 st.session_state.authenticated = True
@@ -276,200 +301,100 @@ if not st.session_state.authenticated:
     st.stop()
 
 # ══════════════════════════════════════════════════════════════════════════════
-# YES SCREEN
+# YES OVERLAY
 # ══════════════════════════════════════════════════════════════════════════════
-if st.session_state.show_yes_dialog:
+if st.session_state.show_yes:
     b64, mime = img_to_b64("yes_image")
-    img_tag = f'<img src="data:{mime};base64,{b64}"/>' if b64 else '<div style="font-size:80px">🌸</div>'
+    img_tag = f'<img src="data:{mime};base64,{b64}"/>' if b64 \
+              else '<div style="font-size:72px;margin-bottom:4px">🌸</div>'
     st.markdown(f"""
-    <div class="yes-overlay">
+    <div class="overlay">
       {img_tag}
-      <p class="yes-overlay-title">She said YES! 🎉🌹</p>
-      <p class="yes-overlay-sub">You've made this Valentine's Day absolutely perfect.<br>This means the entire world 🌸</p>
+      <p class="overlay-title white">She said YES! 🎉🌹🤓</p>
+      <p class="overlay-sub"> YAYYYYYY!!!! <br>You've made this Valentine's Day absolutely perfect. 🤓</p>
     </div>
     """, unsafe_allow_html=True)
     st.stop()
 
 # ══════════════════════════════════════════════════════════════════════════════
-# NO IMAGE TIMER (3 seconds)
+# NO OVERLAY (3 second timer — robust)
 # ══════════════════════════════════════════════════════════════════════════════
-if st.session_state.showing_no_image:
-    no_stems = ["no1", "no2", "no3"]
-    idx = st.session_state.no_image_index % len(no_stems)
-    b64, mime = img_to_b64(no_stems[idx])
-    img_tag = f'<img src="data:{mime};base64,{b64}"/>' if b64 else '<div style="font-size:80px">😢</div>'
-    titles = ["Why though... 🥺", "Really? 💔", "My poor heart...", "Please reconsider 🙏"]
-    t = titles[idx % len(titles)]
-    st.markdown(f"""
-    <div class="no-overlay">
-      {img_tag}
-      <p class="no-overlay-title">{t}</p>
-      <p class="no-overlay-sub">Going back in 3 seconds... Maybe reconsider? 😏</p>
-      <div class="no-timer-bar-wrap"><div class="no-timer-bar"></div></div>
-    </div>
-    """, unsafe_allow_html=True)
-    time.sleep(3)
-    st.session_state.showing_no_image = False
-    st.rerun()
+if st.session_state.showing_no:
+    if st.session_state.no_timer_start is None:
+        st.session_state.no_timer_start = time.time()
+
+    elapsed = time.time() - st.session_state.no_timer_start
+
+    if elapsed >= 3.0:
+        st.session_state.showing_no = False
+        st.session_state.no_timer_start = None
+        st.rerun()
+    else:
+        no_stems = ["no1", "no2", "no3"]
+        idx = st.session_state.no_index % 3
+        st.session_state.no_index += 1
+        b64, mime = img_to_b64(no_stems[idx])
+        img_tag = f'<img src="data:{mime};base64,{b64}"/>' if b64 \
+                  else '<div style="font-size:72px;margin-bottom:4px">😢</div>'
+        titles = ["Why though... 🥺", "Really? 💔", "My poor heart...", "Please reconsider 🙏"]
+        t = titles[idx % 4]
+        remaining = max(0.1, 3.0 - elapsed)
+
+        st.markdown(f"""
+        <div class="overlay">
+          {img_tag}
+          <p class="overlay-title">{t}</p>
+          <p class="overlay-sub">Going back in {int(remaining)+1}s... Maybe reconsider? 😏</p>
+          <div class="timer-bar-wrap">
+            <div class="timer-bar" style="animation-duration:{remaining:.2f}s"></div>
+          </div>
+        </div>
+        """, unsafe_allow_html=True)
+
+        time.sleep(remaining)
+        st.session_state.showing_no = False
+        st.session_state.no_timer_start = None
+        st.rerun()
 
 # ══════════════════════════════════════════════════════════════════════════════
-# MAIN CARD
+# MAIN PAGE
 # ══════════════════════════════════════════════════════════════════════════════
 st.markdown("""
-<div class="v-wrapper">
-  <div class="card">
-    <span class="rose">🌹</span>
-    <p class="eyebrow">A Special Request</p>
-    <div class="deco"></div>
-    <p class="question">Chondi, will you give me the honour of being your<br><em>platonic Valentine</em><br>this year?</p>
-    <p class="hearts-deco">♡ &nbsp;&nbsp; ♡ &nbsp;&nbsp; ♡</p>
-    <p class="card-sub">No pressure... but also, just a little. 🌸</p>
-  </div>
+<div class="card">
+  <span class="rose">🌹</span>
+  <p class="eyebrow">A Special Request</p>
+  <div class="deco"></div>
+  <p class="question">Chondi, will you give me the hounour of being your<br><em>platonic Valentine</em><br>this year?</p>
+  <p class="hearts-deco">♡ &nbsp; ♡ &nbsp; ♡</p>
+  <p class="card-sub">No pressure... but also, just a little. 🌸</p>
 </div>
 """, unsafe_allow_html=True)
 
-# ══════════════════════════════════════════════════════════════════════════════
-# 2D BUTTON GRID
-# Layout: 3 rows × 5 cols. YES always at (row1, col2 center).
-# NO moves to one of 8 fixed spots across the grid.
-#
-#  Row 0  [  ]  [  ]  [  ]  [  ]  [  ]   ← top row   (positions 0-3)
-#  Row 1  [  ]  [YES]  [  ]  [  ]  [  ]   ← middle     (positions 4-5, skip center)
-#  Row 2  [  ]  [  ]  [  ]  [  ]  [  ]   ← bottom row (positions 6-7)
-#
-# All NO positions as (row, col_index_in_that_row):
-#   top-left(0,0) top-center-left(0,1) top-center-right(0,3) top-right(0,4)
-#   mid-left(1,0) mid-right(1,4)
-#   bot-left(2,0) bot-center-left(2,1) bot-center-right(2,3) bot-right(2,4)
-# ══════════════════════════════════════════════════════════════════════════════
+# ── Two buttons, same row, centered ───────────────────────────────────────────
+st.markdown("<div class='btn-row'>", unsafe_allow_html=True)
+
+_, c1, gap, c2, _ = st.columns([1, 2, 0.3, 2, 1])
+
+with c1:
+    if st.button("✦ Yes! ✦", key="yes_btn", use_container_width=True):
+        st.session_state.show_yes = True
+        st.rerun()
 
+with c2:
+    if st.button("No", key="no_btn", use_container_width=True):
+        st.session_state.showing_no = True
+        st.session_state.no_timer_start = None
+        st.rerun()
+
+st.markdown("</div>", unsafe_allow_html=True)
+
+# No message shown below buttons
 no_messages = [
     "Are you sure? 🥺", "Please reconsider... 💔",
     "My heart is shattering...", "I'll wait forever 🌸",
     "Pretty please? 🙏", "This wasn't supposed to happen 😢",
     "One more chance? 💗", "Your finger slipped, right? 😭",
 ]
-
-# All valid NO positions: (row, col)  — row 0=top 1=mid 2=bot, col 0-4
-no_positions = [
-    (0, 0), (0, 1), (0, 3), (0, 4),   # top row
-    (1, 0), (1, 4),                    # mid left & right
-    (2, 0), (2, 1), (2, 3), (2, 4),   # bottom row
-]
-
-cur_pos = st.session_state.no_pos
-no_row, no_col = cur_pos
-
-# Button styling
-st.markdown("""
-<style>
-div[data-testid="stButton"] > button {
-    background: linear-gradient(135deg,#ff1493,#ff69b4) !important;
-    color: #fff !important;
-    box-shadow: 0 4px 20px rgba(255,20,147,0.35) !important;
-}
-div[data-testid="stButton"] > button:hover {
-    transform: translateY(-2px) scale(1.05) !important;
-    box-shadow: 0 8px 28px rgba(255,20,147,0.6) !important;
-}
-</style>
-""", unsafe_allow_html=True)
-
-def empty_cell():
-    st.markdown("<div style='height:44px'></div>", unsafe_allow_html=True)
-
-# ── ROW 0 (top) ────────────────────────────────────────────────────────────────
-r0 = st.columns([1, 1, 1, 1, 1])
-for col_i, col in enumerate(r0):
-    with col:
-        if no_row == 0 and no_col == col_i:
-            st.markdown("""
-            <style>
-            div[data-testid="stButton"]:nth-of-type(1) > button {
-                background: rgba(255,182,193,0.05) !important;
-                color: rgba(255,182,193,0.5) !important;
-                border: 1px solid rgba(255,182,193,0.2) !important;
-                box-shadow: none !important;
-            }
-            div[data-testid="stButton"]:nth-of-type(1) > button:hover {
-                transform: none !important; box-shadow: none !important;
-                background: rgba(255,182,193,0.09) !important;
-                color: rgba(255,182,193,0.75) !important;
-            }
-            </style>""", unsafe_allow_html=True)
-            if st.button("No", key="no_btn", use_container_width=True):
-                st.session_state.no_clicks += 1
-                st.session_state.no_image_index = st.session_state.no_clicks - 1
-                st.session_state.showing_no_image = True
-                new = random.choice([p for p in no_positions if p != cur_pos])
-                st.session_state.no_pos = new
-                st.rerun()
-        else:
-            empty_cell()
-
-st.markdown("<div style='height:8px'></div>", unsafe_allow_html=True)
-
-# ── ROW 1 (middle — YES always col 2) ─────────────────────────────────────────
-r1 = st.columns([1, 1, 1, 1, 1])
-for col_i, col in enumerate(r1):
-    with col:
-        if col_i == 2:
-            if st.button("✦ Yes! ✦", key="yes_btn", use_container_width=True):
-                st.session_state.show_yes_dialog = True
-                st.rerun()
-        elif no_row == 1 and no_col == col_i:
-            st.markdown("""
-            <style>
-            div[data-testid="stButton"]:nth-of-type(2) > button {
-                background: rgba(255,182,193,0.05) !important;
-                color: rgba(255,182,193,0.5) !important;
-                border: 1px solid rgba(255,182,193,0.2) !important;
-                box-shadow: none !important;
-            }
-            div[data-testid="stButton"]:nth-of-type(2) > button:hover {
-                transform: none !important; box-shadow: none !important;
-            }
-            </style>""", unsafe_allow_html=True)
-            if st.button("No", key="no_btn", use_container_width=True):
-                st.session_state.no_clicks += 1
-                st.session_state.no_image_index = st.session_state.no_clicks - 1
-                st.session_state.showing_no_image = True
-                new = random.choice([p for p in no_positions if p != cur_pos])
-                st.session_state.no_pos = new
-                st.rerun()
-        else:
-            empty_cell()
-
-st.markdown("<div style='height:8px'></div>", unsafe_allow_html=True)
-
-# ── ROW 2 (bottom) ─────────────────────────────────────────────────────────────
-r2 = st.columns([1, 1, 1, 1, 1])
-for col_i, col in enumerate(r2):
-    with col:
-        if no_row == 2 and no_col == col_i:
-            st.markdown("""
-            <style>
-            div[data-testid="stButton"]:nth-of-type(3) > button {
-                background: rgba(255,182,193,0.05) !important;
-                color: rgba(255,182,193,0.5) !important;
-                border: 1px solid rgba(255,182,193,0.2) !important;
-                box-shadow: none !important;
-            }
-            div[data-testid="stButton"]:nth-of-type(3) > button:hover {
-                transform: none !important; box-shadow: none !important;
-            }
-            </style>""", unsafe_allow_html=True)
-            if st.button("No", key="no_btn", use_container_width=True):
-                st.session_state.no_clicks += 1
-                st.session_state.no_image_index = st.session_state.no_clicks - 1
-                st.session_state.showing_no_image = True
-                new = random.choice([p for p in no_positions if p != cur_pos])
-                st.session_state.no_pos = new
-                st.rerun()
-        else:
-            empty_cell()
-
-# No message
-if st.session_state.no_clicks > 0:
-    idx = (st.session_state.no_clicks - 1) % len(no_messages)
+if st.session_state.no_index > 0:
+    idx = (st.session_state.no_index - 1) % len(no_messages)
     st.markdown(f"<p class='no-msg'>{no_messages[idx]}</p>", unsafe_allow_html=True)