/* ============ Hen to Men — light-blue party theme ============ */
@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Hanken+Grotesk:wght@400;500;700;800&display=swap');

:root {
  --sky-50:  #f2f9ff;
  --sky-100: #dcefff;
  --sky-200: #bfe1ff;
  --sky-300: #99cdff;
  --sky-400: #6fb2ff;
  --sky-500: #4a93f5;
  --sky-600: #2f6fd6;
  --ink:     #1b3357;
  --ink-soft:#3a5783;
  --pop:     #ff6fae; /* hen-party pink accent */
  --pop-2:   #ffd166; /* warm gold accent */
  --white:   #ffffff;

  --shadow-soft: 0 18px 40px -18px rgba(31, 79, 153, 0.45);
  --shadow-pop:  0 10px 0 0 rgba(31, 79, 153, 0.18);
  --radius: 28px;
  --font-display: 'Caprasimo', cursive;
  --font-body: 'Hanken Grotesk', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(60% 50% at 15% 10%, var(--sky-200) 0%, transparent 60%),
    radial-gradient(55% 45% at 90% 15%, #ffe1ef 0%, transparent 55%),
    radial-gradient(70% 60% at 80% 95%, var(--sky-300) 0%, transparent 60%),
    radial-gradient(50% 50% at 10% 90%, #fff2cc 0%, transparent 55%),
    linear-gradient(160deg, var(--sky-50), var(--sky-100));
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* floating bubble texture */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.6) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.5) 0 4px, transparent 5px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.45) 0 8px, transparent 9px),
    radial-gradient(circle at 85% 25%, rgba(255,255,255,.4) 0 5px, transparent 6px);
  background-size: 38% 38%, 30% 30%, 44% 44%, 26% 26%;
  pointer-events: none; opacity: .5; z-index: 0;
}

.wrap { position: relative; z-index: 1; min-height: 100%; }

/* ---------- shared bits ---------- */
.kicker {
  font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sky-600); font-size: .8rem;
}
.title {
  font-family: var(--font-display);
  line-height: .92; color: var(--ink);
  text-shadow: 0 4px 0 rgba(255,255,255,.7);
}
.title .pop { color: var(--pop); }
.title .blue { color: var(--sky-500); }

.btn {
  font-family: var(--font-display);
  border: none; cursor: pointer;
  color: var(--white); background: var(--pop);
  border-radius: 999px;
  box-shadow: var(--shadow-pop);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.05); transform: translateY(-2px); }
.btn:active { transform: translateY(3px); box-shadow: 0 3px 0 0 rgba(31,79,153,.18); }
.btn:disabled { background: var(--sky-300); cursor: not-allowed; box-shadow: var(--shadow-pop); opacity: .8; }

.card {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

@keyframes pop-in { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06);} 100% { transform: scale(1); opacity: 1; } }
@keyframes float-y { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-10px);} }
@keyframes wiggle { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }
@keyframes fill-bar { from { width: 0; } }

/* ===================================================================
   TV / HOST SCREEN
=================================================================== */
.tv { padding: 3vh 3vw; min-height: 100vh; display: flex; flex-direction: column; }
.tv-head { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.tv-head .title { font-size: clamp(2.4rem, 5vw, 5rem); }
.tv-head .kicker { font-size: clamp(.7rem, 1.2vw, 1rem); }

.code-pill {
  display: flex; align-items: center; gap: 1rem;
  background: var(--white); border-radius: 999px; padding: .6rem .6rem .6rem 1.6rem;
  box-shadow: var(--shadow-soft);
}
.code-pill .lab { font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .15em; font-size: .8rem; }
.code-pill .code { font-family: var(--font-display); font-size: clamp(2rem,4vw,3.4rem); letter-spacing: .1em; color: var(--sky-600); }
.code-pill img { width: clamp(80px,7vw,120px); height: auto; border-radius: 18px; background:#fff; }

/* lobby */
.lobby { flex: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3vw; align-items: center; margin-top: 3vh; }
.lobby-left .join-howto { font-size: clamp(1.1rem, 2vw, 1.8rem); color: var(--ink-soft); font-weight: 500; line-height: 1.4; margin: 1.5rem 0; }
.lobby-left .join-howto b { color: var(--sky-600); }
.bigqr { display: flex; gap: 2rem; align-items: center; }
.bigqr img { width: clamp(160px, 18vw, 280px); border-radius: 24px; box-shadow: var(--shadow-soft); background:#fff; padding: 12px; }

.start-btn { font-size: clamp(1.4rem, 2.6vw, 2.4rem); padding: .7em 1.4em; margin-top: 2rem; background: var(--sky-500); }
.start-hint { color: var(--ink-soft); margin-top: .8rem; font-weight: 600; }

.players-panel { align-self: stretch; padding: 2rem; display: flex; flex-direction: column; }
.players-panel h2 { font-family: var(--font-display); font-size: clamp(1.4rem,2.4vw,2.2rem); color: var(--ink); }
.players-panel .count { color: var(--pop); }
.players { list-style: none; display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; overflow:auto; }
.players li {
  background: var(--white); border-radius: 999px; padding: .55em 1.1em;
  font-weight: 800; color: var(--ink); box-shadow: var(--shadow-pop);
  animation: pop-in .35s ease both; display: flex; align-items: center; gap: .5rem;
}
.players li::before { content: "👑"; font-size: .9em; }
.players .empty { color: var(--ink-soft); font-weight: 600; box-shadow:none; background:transparent; }
.players .empty::before { content: ""; }

/* round / reveal stage */
.stage { flex: 1; display: flex; flex-direction: column; margin-top: 2vh; }
.qbar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.qtext { font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 3.6rem); color: var(--ink); line-height: 1.02; max-width: 70%; }
.qmeta { text-align: right; color: var(--ink-soft); font-weight: 700; }

/* countdown ring */
.ring { --p: 100; width: clamp(90px,9vw,140px); height: clamp(90px,9vw,140px); position: relative; flex: none; }
.ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring .track { stroke: rgba(255,255,255,.85); }
.ring .bar { stroke: var(--pop); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.ring .num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: clamp(1.6rem,3vw,2.6rem); color: var(--ink); }
.ring.low .bar { stroke: #ff4d4d; }

/* men gallery */
.gallery {
  flex: 1; margin-top: 3vh; display: grid; gap: clamp(1rem, 2vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-content: center;
}
.man {
  position: relative; border-radius: 24px; overflow: hidden;
  background: var(--white); box-shadow: var(--shadow-soft);
  border: 4px solid var(--white); animation: pop-in .4s ease both;
  display: flex; flex-direction: column;
}
.man .photo { aspect-ratio: 4/5; width: 100%; object-fit: cover; display: block; background: var(--sky-100); }
.man .tagnum {
  position: absolute; top: 10px; left: 10px; width: 2.2em; height: 2.2em;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--sky-500); color: #fff; font-family: var(--font-display); box-shadow: var(--shadow-pop);
}
/* reveal vote bar overlay */
.man .result { padding: .6rem .8rem; display: flex; flex-direction: column; gap: .3rem; }
.man .result .meter { height: 14px; border-radius: 999px; background: var(--sky-100); overflow: hidden; }
.man .result .meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--pop), var(--pop-2)); animation: fill-bar .8s ease both; }
.man .result .label { font-weight: 800; color: var(--ink); display: flex; justify-content: space-between; font-size: clamp(.8rem,1.3vw,1.1rem); }
.man.winner { border-color: var(--pop-2); box-shadow: 0 0 0 6px rgba(255,209,102,.5), var(--shadow-soft); }
.man.winner .crown { position:absolute; top:-14px; right:10px; font-size: 2rem; animation: float-y 2s ease-in-out infinite; }
.man.correct { border-color: #46d39a; box-shadow: 0 0 0 6px rgba(70,211,154,.45), var(--shadow-soft); }
.man .realname {
  background: var(--ink); color: #fff; text-align: center; padding: .5rem; font-weight: 800;
  font-size: clamp(.85rem,1.4vw,1.25rem);
}

/* end screen */
.end { flex: 1; display: grid; place-items: center; text-align: center; }
.end .title { font-size: clamp(2.6rem, 7vw, 6rem); }
.end p { font-size: clamp(1.1rem,2vw,1.6rem); color: var(--ink-soft); font-weight:600; margin-top: 1rem; }

/* ===================================================================
   PHONE SCREEN
=================================================================== */
.phone { max-width: 520px; margin: 0 auto; padding: 5vh 6vw; min-height: 100vh; display: flex; flex-direction: column; }
.phone .brand { text-align: center; }
.phone .brand .title { font-size: clamp(2.4rem, 12vw, 3.6rem); }
.phone .brand .kicker { margin-top: .4rem; }

.phone .panel { margin-top: auto; margin-bottom: auto; }

.field { margin-top: 2rem; }
.field label { display: block; font-weight: 800; color: var(--ink-soft); margin-bottom: .5rem; letter-spacing: .04em; }
.field input {
  width: 100%; font-family: var(--font-body); font-size: 1.3rem; font-weight: 700;
  padding: 1rem 1.2rem; border-radius: 18px; border: 3px solid var(--sky-200);
  background: #fff; color: var(--ink); outline: none; transition: border-color .15s;
}
.field input:focus { border-color: var(--pop); }
.field .code-in { letter-spacing: .3em; text-transform: uppercase; text-align: center; }

.phone .btn.big { width: 100%; font-size: 1.5rem; padding: .9em 1em; margin-top: 1.6rem; }

.status { text-align: center; }
.status .big { font-family: var(--font-display); font-size: clamp(1.8rem,8vw,2.6rem); color: var(--ink); }
.status .sub { color: var(--ink-soft); font-weight: 600; margin-top: .6rem; }
.dots::after { content: ""; animation: dots 1.4s steps(4,end) infinite; }
@keyframes dots { 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} }

.qcard { text-align: center; }
.qcard .qtext { font-family: var(--font-display); font-size: clamp(1.5rem,7vw,2.2rem); color: var(--ink); line-height: 1.05; max-width: none; }
.qcard .qsub { color: var(--ink-soft); font-weight: 700; margin-top: .5rem; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1.6rem; }
.choice {
  position: relative; border-radius: 20px; overflow: hidden; cursor: pointer;
  border: 4px solid var(--white); background: #fff; box-shadow: var(--shadow-soft);
  transition: transform .1s, border-color .15s; padding: 0; aspect-ratio: 4/5;
}
.choice img { width: 100%; height: 100%; object-fit: cover; display: block; }
.choice .num { position:absolute; top:8px; left:8px; width:2em;height:2em; display:grid;place-items:center; border-radius:50%; background:var(--sky-500); color:#fff; font-family:var(--font-display); }
.choice:active { transform: scale(.97); }
.choice.chosen { border-color: var(--pop); box-shadow: 0 0 0 4px var(--pop), var(--shadow-soft); }
.choice.chosen::after { content: "✓"; position:absolute; inset:auto 8px 8px auto; width:1.8em;height:1.8em; background:var(--pop); color:#fff; border-radius:50%; display:grid;place-items:center; font-weight:800; }
.choices.locked .choice:not(.chosen) { opacity: .45; filter: grayscale(.4); pointer-events: none; }
.choices.locked .choice { pointer-events: none; }

.voted-banner { text-align:center; margin-top: 1.4rem; font-family: var(--font-display); font-size: 1.4rem; color: var(--sky-600); animation: pop-in .3s ease both; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius: 999px; font-weight:700; opacity:0; transition:opacity .3s; z-index: 5; }
.toast.show { opacity: 1; }

.hide { display: none !important; }