/* ==============================
   Connect the Stars — Styles
   ============================== */
:root {
  --bg:    #040508;
  --bg2:   #0f1126;
  --bg3:   #1d1f34;
  --ftr:   #303348;
  --gold:  #bca356;
  --goldL: #edcf73;
  --white: #fff;
  --w50:   rgba(255,255,255,.5);
  --w20:   rgba(255,255,255,.2);
  --purp:  #5e51ae;
  --red:   #f53e3e;
  --serif: 'Playfair Display', Georgia, serif;
  --mono:  'IBM Plex Mono', 'Courier New', monospace;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;overflow:hidden}
body{
  height:100%;overflow:hidden;
  font:500 12px/1.4 var(--mono);
  color:var(--white);background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-transform:uppercase;
}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--goldL)}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;text-transform:uppercase;letter-spacing:.3px}
input{font:inherit;color:inherit;text-transform:uppercase;background:none;border:none;outline:none}
img{display:block;max-width:100%}

/* ---- Shell ---- */
#app{position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden}
#particles-container{position:fixed;inset:0;z-index:0;pointer-events:none}
#particles-container canvas{position:absolute!important}
.screen{position:absolute;inset:0;display:none;flex-direction:column;z-index:1;height:100%}
.screen.active{display:flex}

/* ---- Common buttons ---- */
.btn-ghost{
  padding:10px 18px;border:1px solid var(--white);font-size:11px;
  transition:all 120ms ease;
}
.btn-ghost:hover{background:var(--goldL);border-color:var(--goldL);color:var(--bg)}
.btn-icon{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--white);color:var(--white);transition:all 120ms;flex-shrink:0;
}
.btn-icon:hover{background:var(--goldL);border-color:var(--goldL);color:var(--bg)}
.btn-text{background:none;border:none;color:var(--gold);padding:4px;font-size:10px}
.btn-text:hover{color:var(--goldL)}

/* ==============
   LOBBY
   ============== */
#lobby{background:linear-gradient(var(--bg),var(--bg3))}
.lobby-header{text-align:center;padding:max(env(safe-area-inset-top,0px),24px) 16px 8px;flex-shrink:0}
.logo{font:700 clamp(24px,6vw,40px)/1.1 var(--serif);text-transform:none}
.tagline{font-size:10px;color:var(--gold);letter-spacing:2px;margin-top:4px}

.lobby-body{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;align-items:center;
  padding:12px 16px 0;gap:14px;
}

/* Actor slots — two side-by-side */
.actor-slots{
  display:flex;gap:12px;width:100%;max-width:480px;justify-content:center;
}
.actor-slot{
  flex:1;max-width:220px;display:flex;flex-direction:column;gap:8px;
}

/* Card */
.actor-slot-card{
  position:relative;width:100%;aspect-ratio:2/3;
  border:1px solid var(--white);overflow:hidden;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  cursor:default;
}
.slot-number{
  position:absolute;top:0;left:0;width:24px;height:24px;
  background:var(--white);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:500;z-index:2;
}
.slot-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 250ms;
}
.slot-img.loaded{opacity:1}
.slot-name{
  position:absolute;bottom:0;left:0;right:0;
  padding:28px 6px 6px;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
  font:clamp(10px,2.2vw,14px)/1.2 var(--serif);
  text-transform:none;text-align:center;z-index:1;
  display:none;
}
.slot-name.visible{display:block}
.slot-placeholder{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--w50);
}
.slot-placeholder.hidden{display:none}

/* Per-slot search */
.slot-search{position:relative;width:100%}
.slot-input{
  width:100%;padding:10px 8px;
  background:var(--bg2);border:1px solid var(--w20);
  font-size:11px;text-align:center;transition:border-color 120ms;
}
.slot-input:focus{border-color:var(--white)}
.slot-input::placeholder{color:var(--w50);font-size:10px}
.slot-results{
  position:absolute;top:100%;left:0;right:0;
  background:var(--bg2);border:1px solid var(--white);border-top:none;
  max-height:200px;overflow-y:auto;z-index:20;display:none;
}
.slot-results.open{display:block}
.slot-results li{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;cursor:pointer;transition:background 80ms;
}
.slot-results li:hover,.slot-results li.hl{background:var(--gold);color:var(--bg)}
.slot-results li img{width:28px;height:42px;object-fit:cover;flex-shrink:0;background:var(--bg3)}
.slot-results .r-name{font-size:11px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-results .r-sub{font-size:9px;color:var(--w50);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-results li:hover .r-sub,.slot-results li.hl .r-sub{color:rgba(0,0,0,.5)}

/* Lobby buttons */
.lobby-buttons{
  display:flex;flex-direction:column;gap:8px;
  width:100%;max-width:480px;
}
.btn-choose{
  width:100%;padding:12px;
  border:1px solid var(--white);
  font-size:11px;transition:all 120ms;
}
.btn-choose:hover{background:var(--goldL);border-color:var(--goldL);color:var(--bg)}
.btn-start{
  width:100%;padding:14px;
  background:var(--white);color:var(--bg);
  font-size:12px;font-weight:500;border:none;
  cursor:pointer;transition:all 120ms;
}
.btn-start:hover:not(:disabled){background:var(--goldL)}
.btn-start:disabled{opacity:.2;cursor:not-allowed}
.btn-start.loading{pointer-events:none;opacity:.5}

.lobby-footer{
  flex-shrink:0;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  text-align:center;font-size:10px;color:var(--w50);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.dot{opacity:.3}

/* ==============
   GAME
   ============== */
#game{background:linear-gradient(var(--bg),var(--bg3))}
.game-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:max(env(safe-area-inset-top,0px),8px) 10px 6px;
  flex-shrink:0;z-index:5;gap:6px;
}
.game-logo-sm{
  flex:1;font:clamp(12px,3vw,17px)/1 var(--serif);
  text-transform:none;text-align:center;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.back-btn{display:flex;align-items:center;gap:4px;padding:6px 8px;font-size:10px}
.back-label{display:none}
@media(min-width:500px){.back-label{display:inline}}

/* Game body — uses JS-set height to avoid keyboard resize */
.game-body{flex:1;position:relative;overflow:hidden;min-height:0}
#cy{position:absolute;inset:0}
.__________cytoscape_container>div,
.game-body>div{width:100%!important;height:100%!important}

/* Node panel */
.node-panel{
  position:absolute;left:10px;top:10px;width:160px;
  border:1px solid var(--white);
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  z-index:10;display:flex;flex-direction:column;
}
.node-panel[hidden]{display:none}
.np-hint,.np-close{
  position:absolute;top:4px;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);font-size:13px;z-index:2;cursor:pointer;
}
.np-hint{left:4px}
.np-hint:hover{color:var(--goldL)}
.np-close{right:4px}
.np-close:hover{color:var(--w50)}
.np-img{width:100%;aspect-ratio:2/3;overflow:hidden}
.np-img img{width:100%;height:100%;object-fit:cover}
.np-title{padding:6px 8px 2px;font:13px/1.2 var(--serif);text-transform:none;text-align:center}
.np-sub{padding:0 8px 8px;font-size:9px;color:var(--w50);text-align:center}

/* Board hints */
.board-hints{
  position:absolute;bottom:6px;right:10px;z-index:5;pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
}
.bh{font-size:9px;color:var(--w50)}
@media(max-width:480px){.board-hints{display:none}}

/* Game footer */
.game-footer{
  flex-shrink:0;background:var(--ftr);
  padding-bottom:env(safe-area-inset-bottom,0px);
  z-index:10;position:relative;
}
.guess-input{
  width:100%;padding:14px 16px;
  background:transparent;border:none;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:clamp(14px,3vw,20px);
}
.guess-input::placeholder{color:var(--w50);font-size:clamp(9px,2vw,11px)}
.guess-input:focus{border-top-color:var(--ftr)}
.game-stats{
  display:flex;align-items:center;justify-content:center;gap:16px;
  padding:4px 16px 8px;font-size:10px;color:var(--w50);
}

/* Spell suggest */
.spell-suggest{
  position:absolute;bottom:100%;left:10px;
  background:var(--gold);color:var(--bg);
  padding:8px 12px;font-size:11px;
  display:flex;align-items:center;gap:8px;z-index:15;
}
.spell-suggest[hidden]{display:none}
.spell-yes{font-weight:500;text-decoration:underline;cursor:pointer}

/* ==============
   TOASTS
   ============== */
#toast-container{
  position:fixed;top:0;left:0;right:0;
  display:flex;flex-direction:column;align-items:center;
  pointer-events:none;z-index:100;
  padding-top:max(env(safe-area-inset-top,0px),8px);
}
.toast{
  margin-top:6px;padding:8px 16px;font-size:11px;
  display:flex;align-items:center;gap:6px;
  pointer-events:auto;max-width:90vw;text-align:center;
  animation:tin 200ms ease,tout 200ms ease 2.3s forwards;
}
.toast-movie{background:var(--gold);color:var(--bg)}
.toast-tv{background:var(--purp);color:var(--white)}
.toast-actor{background:var(--gold);color:var(--bg)}
.toast-error{background:var(--red);color:var(--white)}
.toast-info{background:var(--purp);color:var(--white)}
.toast-hint{background:var(--purp);color:var(--white)}
@keyframes tin{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes tout{from{opacity:1}to{opacity:0;pointer-events:none}}

/* ==============
   MODALS
   ============== */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-box{
  position:relative;background:var(--bg2);
  border:1px solid var(--w20);padding:24px 20px;
  max-width:380px;width:100%;max-height:80vh;overflow-y:auto;text-align:center;
}
.modal-sm{max-width:320px}
.m-close{position:absolute;top:8px;right:8px;font-size:18px;color:var(--w50);width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.m-close:hover{color:var(--white)}
.m-title{font:24px/1 var(--serif);text-transform:none;margin-bottom:6px}
.m-sub{font-size:10px;color:var(--w50);margin-bottom:14px}
.m-detail{font-size:10px;margin-top:10px}
.m-btns{display:flex;gap:8px;justify-content:center;margin-top:16px}

/* Win banner (compact, anchored to top) */
.win-banner{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--gold);color:var(--bg);
  padding:10px 16px 12px;text-align:center;
  box-shadow:0 4px 24px rgba(0,0,0,.5);
  animation:wb-slide .35s ease-out;
}
.win-banner[hidden]{display:none}
@keyframes wb-slide{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.wb-close{position:absolute;top:6px;right:10px;font-size:20px;color:var(--bg);opacity:.5;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.wb-close:hover{opacity:1}
.wb-header{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:2px}
.wb-star{font-size:14px;opacity:.6}
.wb-title{font:20px/1 var(--serif)}
.wb-names{font-size:10px;opacity:.6;margin:0 0 4px}
.wb-steps{font-size:13px;font-weight:600;margin-bottom:6px}
.wb-path{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 4px;margin:0 auto 8px;max-width:480px}
.path-item{font-size:9px;padding:2px 7px;max-width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.path-item.p-actor{background:var(--bg);color:var(--white)}
.path-item.p-movie{border:1px solid var(--bg)}
.path-item.p-tv{background:var(--purp);color:var(--white)}
.path-arrow{font-size:9px;opacity:.4}
.wb-btns{display:flex;gap:8px;justify-content:center}
.wb-btn{font-size:10px;padding:5px 14px;border-color:var(--bg);color:var(--bg)}
.wb-btn:hover{background:var(--bg);color:var(--white)}

/* Hint modal */
.hint-desc{font-size:11px;text-transform:none;line-height:1.6;margin:10px 0}

/* How to Play */
.how-body{text-align:left;font-size:11px;text-transform:none;line-height:1.7}
.how-body ol{padding-left:16px;list-style:decimal}
.how-body li{margin-bottom:4px}
.how-body p:last-child{margin-top:12px;color:var(--gold)}

/* Confetti */
.confetti{position:fixed;width:10px;height:10px;z-index:60;pointer-events:none;animation:cfall linear forwards}
@keyframes cfall{0%{transform:translateY(-10vh) rotate(0);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}