/* ═══════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --pink:   #FF6B9D;
  --purple: #C77DFF;
  --gold:   #FFD166;
  --blue:   #4A6FA5;
  --bg:     #0a0012;
  --bg2:    #130020;
  --bg3:    #1e0035;
  --border: #3a0060;
  --text:   #f0e6ff;
  --text2:  #a78bca;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  touch-action: manipulation;
}

#bgCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

section {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity .35s;
}
section.hidden { opacity: 0; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════
   ROLE SCREEN
═══════════════════════════════════════════════════════════ */
#roleScreen { gap: 1.5rem; padding: 1.5rem; }

.role-hero { text-align: center; }
.logo-mark { font-size: 2.8rem; color: var(--pink); line-height: 1; }
.role-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: .3rem;
}
.role-sub { color: var(--text2); font-size: .95rem; margin-top: .4rem; }
.choose-label { color: var(--text2); font-size: .9rem; }

.role-cards {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.role-card {
  background: var(--bg2);
  border: 2px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem 1.2rem 1rem;
  width: 160px;
  cursor: pointer;
  text-align: center;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.role-card:hover, .role-card:active {
  transform: translateY(-6px) scale(1.03);
}
.him-card:hover  { border-color: #4A6FA5; box-shadow: 0 8px 30px #4A6FA540; }
.her-card:hover  { border-color: var(--pink); box-shadow: 0 8px 30px #FF6B9D40; }

.role-avatar-wrap { height: 140px; display: flex; align-items: flex-end; justify-content: center; }
.role-svg { width: 90px; }
.role-label { font-size: 1.15rem; font-weight: 700; margin-top: .6rem; color: var(--text); }
.role-hint  { font-size: .75rem; color: var(--text2); margin-top: .2rem; }

/* ═══════════════════════════════════════════════════════════
   LOBBY SCREEN
═══════════════════════════════════════════════════════════ */
#lobbyScreen { gap: 1.5rem; padding: 2rem; }

.lobby-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: min(400px, 95vw);
}

.logo-sm {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--pink);
}

.lobby-role-badge {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .3rem 1.2rem;
  font-size: .9rem;
  color: var(--text2);
}

.lobby-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lobby-btn {
  width: 100%;
  padding: .85rem;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
}
.lobby-btn:hover { opacity: .9; transform: scale(1.01); }
.create-btn { background: linear-gradient(135deg, var(--pink), var(--purple)); color: #fff; }
.join-btn   { background: var(--bg3); color: var(--text); border: 1px solid var(--border); width: auto; padding: .85rem 1.5rem; }

.lobby-or { text-align: center; color: var(--text2); font-size: .85rem; }

.lobby-join-row { display: flex; gap: .75rem; }
.lobby-join-row input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: #fff;
  font-size: 1rem;
  padding: .7rem 1rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  outline: none;
}
.lobby-join-row input:focus { border-color: var(--pink); }

.lobby-status {
  font-size: .9rem;
  text-align: center;
  padding: .5rem;
}

/* ═══════════════════════════════════════════════════════════
   SIMULATOR SCREEN
═══════════════════════════════════════════════════════════ */
#simScreen {
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
}

/* Top bar */
.sim-topbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1rem;
  background: rgba(18,0,31,.85);
  border-bottom: 1px solid var(--border);
  z-index: 10;
  flex-shrink: 0;
}
.room-badge {
  font-size: .8rem;
  color: var(--text2);
  font-weight: 600;
  letter-spacing: .06em;
}
.conn-wrap { display: flex; align-items: center; gap: .45rem; }
.conn-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #888;
  flex-shrink: 0;
}
.conn-dot.connected    { background: #4ade80; box-shadow: 0 0 6px #4ade8088; }
.conn-dot.disconnected { background: #f87171; }
.conn-label { font-size: .75rem; color: var(--text2); }

/* Mood strip */
.mood-strip {
  width: 100%;
  text-align: center;
  padding: .4rem;
  background: linear-gradient(135deg, #2a003a88, #00002a88);
  font-size: .82rem;
  color: var(--text2);
  flex-shrink: 0;
}

/* Stage */
.stage {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 1rem 1rem;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

/* Floor line */
.stage::after {
  content: '';
  position: absolute;
  bottom: 3.5rem;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--border), transparent);
}

.effects-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* Characters */
.char-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}

.char-inner { position: relative; }
.char-svg   { width: clamp(90px, 24vw, 150px); display: block; }

.char-name {
  font-size: .72rem;
  color: var(--text2);
  margin-top: .3rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.center-zone {
  flex: 1;
  max-width: 80px;
  position: relative;
  z-index: 2;
}

/* Action toast */
.action-toast {
  position: fixed;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30,0,53,.95);
  border: 1px solid var(--pink);
  border-radius: 24px;
  padding: .6rem 1.4rem;
  font-size: .88rem;
  color: var(--text);
  z-index: 50;
  white-space: nowrap;
  animation: toastIn .3s ease;
  box-shadow: 0 4px 24px #FF6B9D30;
}
.action-toast.hidden { display: none; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.95); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Actions panel */
.actions-panel {
  width: 100%;
  background: rgba(10,0,18,.9);
  border-top: 1px solid var(--border);
  padding: .7rem .75rem .75rem;
  flex-shrink: 0;
  z-index: 10;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-bottom: .5rem;
}

.act-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size: 1.3rem;
  padding: .55rem .4rem .45rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  transition: background .15s, border-color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.act-btn span {
  font-size: .58rem;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: .02em;
}
.act-btn:hover, .act-btn:active {
  background: var(--bg3);
  transform: scale(1.06);
}
.act-btn.active {
  border-color: var(--pink);
  background: rgba(255,107,157,.12);
  box-shadow: 0 0 12px rgba(255,107,157,.25);
}

.react-row {
  display: flex;
  gap: .5rem;
  justify-content: center;
}
.react-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text2);
  font-size: .75rem;
  padding: .35rem .85rem;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.react-btn:hover { border-color: var(--pink); color: var(--pink); }

/* ═══════════════════════════════════════════════════════════
   FLOATING ELEMENTS (hearts, stars, etc.)
═══════════════════════════════════════════════════════════ */
.float-emoji {
  position: absolute;
  font-size: 1.5rem;
  pointer-events: none;
  animation: floatUp 2.2s ease-out forwards;
  z-index: 20;
}
@keyframes floatUp {
  0%   { transform: translateY(0) scale(0) rotate(0deg); opacity: 0; }
  15%  { transform: translateY(-15px) scale(1.2) rotate(-5deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(-140px) scale(.6) rotate(10deg); opacity: 0; }
}

.float-emoji.fast { animation-duration: 1.4s; }
.float-emoji.big  { font-size: 2.8rem; }

.kiss-mark {
  position: absolute;
  font-size: 3rem;
  pointer-events: none;
  animation: kissPop .8s cubic-bezier(.34,1.56,.64,1) forwards;
  z-index: 25;
}
@keyframes kissPop {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.star-burst {
  position: absolute;
  font-size: 1.2rem;
  pointer-events: none;
  animation: starBurst 1s ease-out forwards;
}
@keyframes starBurst {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(2) translateY(-30px); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   AVATAR ANIMATIONS  (CSS classes applied by JS)
═══════════════════════════════════════════════════════════ */

/* Hug — male moves right, female moves left */
.stage.hugging .male-wrap   { transform: translateX(clamp(40px, 12vw, 70px)); }
.stage.hugging .female-wrap { transform: translateX(clamp(-40px, -12vw, -70px)); }
.stage.hugging #maleArmR    { transform: rotate(-130deg) scaleY(1.3); transition: transform .6s .4s ease; }
.stage.hugging #maleArmL    { transform: rotate(30deg); transition: transform .5s .5s ease; }
.stage.hugging #femaleArmL  { transform: rotate(130deg) scaleY(1.3); transition: transform .6s .4s ease; }
.stage.hugging #femaleArmR  { transform: rotate(-30deg); transition: transform .5s .5s ease; }
.stage.hugging .male-blush, .stage.hugging .female-blush { animation: blushIn .5s .8s forwards; }

/* Hold hands */
.stage.holding .male-wrap   { transform: translateX(clamp(25px, 8vw, 45px)); }
.stage.holding .female-wrap { transform: translateX(clamp(-25px, -8vw, -45px)); }
.stage.holding #maleArmR    { transform: rotate(-80deg); transition: transform .5s .3s ease; }
.stage.holding #femaleArmL  { transform: rotate(80deg); transition: transform .5s .3s ease; }
.stage.holding .male-wrap, .stage.holding .female-wrap { animation: holdSway 2s .5s ease-in-out infinite alternate; }

/* Kiss — female leans left */
.stage.kissing .female-wrap { transform: translateX(clamp(-35px, -10vw, -55px)) rotate(-5deg); }
.stage.kissing .male-wrap   { transform: rotate(5deg); }

/* Cuddle — female rests on male's shoulder */
.stage.cuddling .female-wrap { transform: translateX(clamp(-50px, -15vw, -80px)) translateY(10px); }
.stage.cuddling #femaleArmL  { transform: rotate(90deg); transition: transform .6s .4s ease; }
.stage.cuddling #maleArmR    { transform: rotate(-60deg); transition: transform .5s .5s ease; }
.stage.cuddling .male-blush, .stage.cuddling .female-blush { animation: blushIn .5s .7s forwards; }

/* Back hug — male steps behind female */
.stage.backhugging .male-wrap   { transform: translateX(clamp(50px, 15vw, 85px)) translateZ(-1px); }
.stage.backhugging #maleArmL    { transform: rotate(140deg) scaleY(1.4); transition: transform .6s .4s; }
.stage.backhugging #maleArmR    { transform: rotate(-140deg) scaleY(1.4); transition: transform .6s .4s; }
.stage.backhugging .male-blush, .stage.backhugging .female-blush { animation: blushIn .5s .7s forwards; }

/* Head pat — male arm lifts up to female head */
.stage.patting #maleArmR { transform: rotate(-160deg) translateY(-10px); transition: transform .4s; animation: patAnim 0.4s .4s ease-in-out 4; }

/* Dance — both sway */
.stage.dancing .male-wrap   { animation: danceSway 0.8s ease-in-out infinite alternate; }
.stage.dancing .female-wrap { animation: danceSway 0.8s .4s ease-in-out infinite alternate; }
.stage.dancing #maleArmL    { animation: armDance 0.8s ease-in-out infinite alternate; }
.stage.dancing #femaleArmR  { animation: armDance 0.8s .4s ease-in-out infinite alternate; }

/* Good night — sit down slightly */
.stage.goodnight .male-wrap, .stage.goodnight .female-wrap { transform: translateY(12px) scale(.97); transition: transform .8s ease; }

/* Blush animation */
@keyframes blushIn {
  from { opacity: 0; }
  to   { opacity: .65; }
}

/* Bounce */
@keyframes holdSway {
  from { transform: translateX(clamp(25px, 8vw, 45px)) rotate(-1.5deg); }
  to   { transform: translateX(clamp(25px, 8vw, 45px)) rotate(1.5deg); }
}

@keyframes danceSway {
  from { transform: translateY(0) rotate(-4deg); }
  to   { transform: translateY(-12px) rotate(4deg); }
}

@keyframes armDance {
  from { transform: rotate(-40deg); }
  to   { transform: rotate(40deg); }
}

@keyframes patAnim {
  0%, 100% { transform: rotate(-160deg) translateY(-10px); }
  50%       { transform: rotate(-145deg) translateY(-4px); }
}

/* Blush show utility */
.show-blush .male-blush   { opacity: .6 !important; }
.show-blush .female-blush { opacity: .6 !important; }

/* Bounce body */
@keyframes bodyBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.bouncing { animation: bodyBounce .5s ease-in-out 3; }

/* Miss you — character looks sad, slow breathing */
.stage.missing .male-wrap, .stage.missing .female-wrap { animation: sadBreath 2s ease-in-out infinite; }
@keyframes sadBreath {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-height: 700px) {
  .char-svg { width: 80px; }
  .actions-panel { padding: .4rem .6rem .5rem; }
  .act-btn { padding: .4rem .3rem .35rem; font-size: 1.1rem; }
  .act-btn span { display: none; }
  .logo-mark { font-size: 2rem; }
  .role-title { font-size: 1.7rem; }
}

@media (min-width: 600px) {
  .char-svg { width: 160px; }
  .role-cards { gap: 2.5rem; }
  .role-card  { width: 190px; }
  .role-avatar-wrap { height: 170px; }
  .role-svg  { width: 110px; }
}