:root{
  --pink:#ff2f92; --purple:#9333ea; --purple-neon:#c850ff; --gold:#ffd84d; --cyan:#28d8ff;
  --ink:#fff; --ink-dim:#e9d5ff;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
html,body{height:100%;overscroll-behavior:none}
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
body{
  font-family:var(--font);color:var(--ink);
  position:relative;
  overflow-x:hidden;
  background:#0a0312;
}
.lobby-link{position:fixed;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));z-index:60;
  min-width:72px;min-height:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(20,8,38,.72);
  color:var(--cyan);font-size:12px;font-weight:850;letter-spacing:.02em;text-decoration:none;
  box-shadow:inset 0 0 18px rgba(150,44,255,.12),0 0 18px rgba(150,44,255,.12);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .12s ease,background .2s ease}
.lobby-link:active{transform:scale(.96)}
.lobby-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#app button:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:18px}
.modal-open{overflow:hidden}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(5,2,10,.35) 0%, rgba(5,2,10,.15) 40%, rgba(5,2,10,.55) 100%),
    url("../images/background.webp") center top / cover no-repeat;
}
#app{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;padding:calc(env(safe-area-inset-top) + clamp(8px,2dvh,14px)) 18px calc(env(safe-area-inset-bottom) + clamp(14px,2.4dvh,22px));
  display:flex;flex-direction:column;align-items:center;}

/* logo */
.logo{width:min(76%,320px);margin:0 auto clamp(10px,1.8dvh,16px);display:block;
  filter:drop-shadow(0 6px 26px rgba(255,47,146,.35));}

/* the two big cards */
.cards{display:flex;gap:clamp(10px,3.5vw,16px);width:100%;justify-content:center;align-items:stretch;margin-top:2px}
.card-btn{flex:1;max-width:215px;border:none;background:none;cursor:pointer;padding:0;position:relative;touch-action:manipulation;
  transition:transform .12s ease, filter .2s ease;}
.card-btn img{width:100%;aspect-ratio:560/832;object-fit:contain;display:block;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.55));}
.card-btn:active{transform:scale(.94)}
.card-btn.truth:hover img{filter:drop-shadow(0 0 26px rgba(255,47,146,.65))}
.card-btn.dare:hover img{filter:drop-shadow(0 0 26px rgba(147,51,234,.75))}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.card-btn.truth{animation:bob 3.4s ease-in-out infinite}
.card-btn.dare{animation:bob 3.4s ease-in-out .8s infinite}

/* random button */
.random-btn{border:none;background:none;cursor:pointer;padding:0;margin-top:clamp(8px,1.8dvh,12px);width:100%;touch-action:manipulation;
  transition:transform .12s ease;}
.random-btn img{width:100%;display:block;filter:drop-shadow(0 8px 24px rgba(255,216,77,.35));}
.random-btn:active{transform:scale(.95)}

.disclaimer{margin-top:auto;padding-top:clamp(14px,2.8dvh,22px);text-align:center;font-size:11px;letter-spacing:2px;color:var(--ink-dim);opacity:.85;line-height:1.7}
.disclaimer b{color:var(--pink)}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(4,1,10,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:50;}
.overlay.show{display:flex;animation:fadeIn .22s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.prompt-wrap{width:min(100%,380px,calc((100dvh - 40px) * 941 / 1672));display:flex;flex-direction:column;align-items:center;gap:14px;
  animation:pop .35s cubic-bezier(.2,.9,.3,1.25) both;}
@keyframes pop{from{opacity:0;transform:scale(.82) translateY(14px)}to{opacity:1;transform:none}}

.flip-card{width:100%;perspective:1800px;-webkit-perspective:1800px;touch-action:manipulation;cursor:pointer}
.flip-card:focus-visible{outline:2px solid var(--gold);outline-offset:5px;border-radius:22px}
.flip-inner{position:relative;width:100%;aspect-ratio:941/1672;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .8s cubic-bezier(.22,.9,.24,1.04);border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.65), 0 0 42px rgba(255,47,146,.55);}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border:2px solid rgba(255,255,255,.35);}
.flip-face.flip-back.truth-back{background:linear-gradient(160deg,#ff2f92,#b3125e 70%,#7a0c40)}
.flip-face.flip-back.dare-back{background:linear-gradient(160deg,#a855f7,#7222c9 70%,#4a148c)}
.flip-face img{width:100%;height:100%;object-fit:cover;display:block}
.flip-face.flip-front{transform:rotateY(180deg)}
.flip-back .mark{font-size:64px;font-weight:900;color:#fff;text-shadow:0 0 28px rgba(255,255,255,.8)}
.flip-back .label{font-size:14px;font-weight:900;letter-spacing:5px;background:rgba(0,0,0,.5);padding:8px 20px;border-radius:12px;color:#ff8dc0}
.flip-back.dare-back .label{color:#d9b3ff}

@media (max-height:740px){
  .logo{width:min(62%,270px)}
  .disclaimer{font-size:10px;line-height:1.45}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}