:root{
  --blue:#123A6D;
  --blue-2:#1D5A96;
  --blue-dark:#07192D;
  --blue-deep:#0B2341;
  --orange:#F2A900;
  --orange-soft:#FFD777;
  --green:#5C9E3A;
  --green-soft:#A9D08E;
  --pale:#EAF1F7;
  --ink:#172534;
  --muted:#66788A;
  --line:#D8E1EA;
  --white:#FFFFFF;
  --danger:#B43A3A;
  --shadow:0 30px 80px rgba(7,25,45,.16);
  --shadow-soft:0 18px 45px rgba(7,25,45,.11);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#F3F7FA}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
[hidden]{display:none!important}
body{min-height:100vh}
a{color:inherit}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.eyebrow{margin:0 0 10px;color:var(--blue);font-weight:900;font-size:.72rem;letter-spacing:.17em}
.eyebrow.light{color:#A9C2DE}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(2.5rem,8vw,4.9rem);line-height:.94;letter-spacing:-.055em}
h1 em{font-style:normal;color:var(--orange)}
h2{font-size:clamp(1.9rem,5vw,3.1rem);letter-spacing:-.04em}
.lead{font-size:1.04rem;line-height:1.7;color:var(--muted)}
.panel{
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(248,251,253,.92));
  border:1px solid rgba(18,58,109,.11);
  box-shadow:var(--shadow);
  border-radius:30px;
  backdrop-filter:blur(18px);
}
.stack{display:grid;gap:12px}
label,.field-label{font-size:.84rem;font-weight:800;color:var(--blue)}
input,select{
  width:100%;border:1px solid var(--line);border-radius:15px;background:#fff;
  padding:14px 15px;outline:none;transition:.22s ease;color:var(--ink)
}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(18,58,109,.1)}
.primary-button,.secondary-button,.reveal-button,.danger-outline-button,.text-button,.ghost-button{
  border:0;border-radius:15px;text-decoration:none;font-weight:850;display:inline-flex;
  align-items:center;justify-content:center;gap:10px;transition:.22s ease
}
.primary-button{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;padding:15px 18px;box-shadow:0 12px 28px rgba(18,58,109,.24)}
.primary-button:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(18,58,109,.3)}
.primary-button i{font-style:normal;transition:transform .22s ease}
.primary-button:hover i{transform:translateX(4px)}
.primary-button.is-loading{opacity:.72}
.secondary-button{background:var(--pale);color:var(--blue);padding:11px 15px;border:1px solid #d4e1ed}
.text-button{color:var(--muted);padding:10px;background:transparent}
.ghost-button{padding:10px 13px;background:#F7FAFC;color:var(--blue);border:1px solid var(--line)}
.reveal-button{width:100%;padding:17px;background:linear-gradient(135deg,var(--orange),#FFC840);color:#392600;text-transform:uppercase;letter-spacing:.06em;box-shadow:0 14px 30px rgba(242,169,0,.22)}
.reveal-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 36px rgba(242,169,0,.3)}
.reveal-button:disabled{opacity:.4}
.danger-outline-button{padding:13px 16px;background:#fff;color:var(--danger);border:1px solid rgba(180,58,58,.32)}
.danger-outline-button:disabled{opacity:.42}
.error-message{color:var(--danger);font-weight:800;font-size:.9rem}
.status-message{min-height:1.3em;color:var(--green);font-weight:800}
.status-message.error{color:var(--danger)}
.muted{color:var(--muted);line-height:1.55}
.tiny{font-size:.8rem}
.microcopy{font-size:.78rem;color:#8091A2;margin:16px 0 0}
.brand-mark{display:flex;gap:5px;margin-bottom:22px;position:relative;z-index:3}
.brand-mark span{display:block;width:34px;height:6px;border-radius:20px}
.brand-mark span:nth-child(1){background:var(--blue)}
.brand-mark span:nth-child(2){background:var(--orange)}
.brand-mark span:nth-child(3){background:var(--green)}

.three-backdrop{
  position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  opacity:.86;transition:opacity .4s ease
}
.three-fallback .three-backdrop{opacity:0}
.ambient-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.32;
  background-image:
    linear-gradient(rgba(18,58,109,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,58,109,.045) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(circle at center,#000 20%,transparent 78%);
}

/* PARTICIPANT EXPERIENCE */
.participant-page{
  position:relative;overflow-x:hidden;
  background:
    radial-gradient(circle at 12% 5%,rgba(242,169,0,.15),transparent 28%),
    radial-gradient(circle at 92% 90%,rgba(92,158,58,.14),transparent 32%),
    linear-gradient(145deg,#F8FBFD,#EAF1F7);
}
.participant-shell{width:min(660px,100%);margin:auto;padding:28px 18px 48px;position:relative;z-index:2}
.participant-panel{padding:clamp(26px,6vw,44px);position:relative;overflow:hidden;animation:panelIn .5s cubic-bezier(.2,.8,.2,1)}
.participant-panel h1{color:var(--blue)}
.hero-panel::after{
  content:"";position:absolute;right:-110px;top:-120px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,169,0,.22),transparent 68%);pointer-events:none
}
.panel-orbit{position:absolute;right:28px;top:28px;width:74px;height:74px;border:1px solid rgba(18,58,109,.13);border-radius:50%}
.panel-orbit:before,.panel-orbit:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(18,58,109,.1)}
.panel-orbit:before{inset:10px}.panel-orbit:after{inset:21px}
.panel-orbit span,.panel-orbit i,.panel-orbit b{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 16px rgba(242,169,0,.6)}
.panel-orbit span{left:4px;top:32px}.panel-orbit i{right:10px;top:8px;background:var(--green)}.panel-orbit b{right:14px;bottom:9px;background:var(--blue)}
.card-stage-panel{perspective:1200px}
.card-choice-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px;
  perspective:1200px;transform-style:preserve-3d
}
.mystery-card{
  aspect-ratio:1.18;border:1px solid rgba(255,255,255,.34);border-radius:24px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 35% 25%,rgba(255,255,255,.18),transparent 32%),
    linear-gradient(145deg,var(--blue-deep),var(--blue));
  color:#fff;box-shadow:0 22px 42px rgba(7,25,45,.2);
  font-size:2rem;font-weight:950;transform-style:preserve-3d;transition:.55s cubic-bezier(.18,.86,.24,1)
}
.mystery-card:before{
  content:"";position:absolute;inset:8px;border-radius:18px;border:1px solid rgba(255,255,255,.12);
  background-image:linear-gradient(135deg,rgba(255,255,255,.06),transparent 55%)
}
.mystery-card:after{
  content:"";position:absolute;width:80px;height:180%;top:-35%;left:-120%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:rotate(18deg);transition:left .6s ease
}
.mystery-card:hover:after{left:135%}
.mystery-card:hover{transform:translateY(-6px) rotateX(5deg) rotateY(-3deg);box-shadow:0 30px 58px rgba(7,25,45,.27)}
.mystery-card .card-face{position:relative;z-index:2;display:inline-grid;place-items:center;width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15)}
.mystery-card.picked{transform:rotateY(180deg) scale(.92);filter:saturate(1.2);box-shadow:0 12px 28px rgba(7,25,45,.18)}
.card-choice-grid.has-selection .mystery-card:not(.picked){opacity:.2;transform:scale(.92);filter:blur(1px)}
.card-a{--tilt:-1deg}.card-b{--tilt:1.5deg}.card-c{--tilt:1deg}.card-d{--tilt:-1.4deg}
.participant-name{font-weight:850;color:var(--muted);margin-bottom:10px}
.concept-panel{isolation:isolate}
.concept-halo{
  position:absolute;left:50%;top:42%;width:420px;height:420px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(242,169,0,.17),rgba(18,58,109,.06) 38%,transparent 70%);
  filter:blur(8px);z-index:-1;animation:haloPulse 4s ease-in-out infinite
}
.concept-card{
  position:relative;padding:28px;border-radius:26px;
  background:
    linear-gradient(145deg,rgba(7,25,45,.98),rgba(18,58,109,.97));
  color:#fff;box-shadow:0 28px 65px rgba(7,25,45,.29);overflow:hidden;animation:cardIn .65s ease-out
}
.concept-card:before{
  content:"";position:absolute;inset:-50% auto auto -15%;width:130px;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:rotate(18deg)
}
.concept-kicker{display:block;color:#B7CCE3;font-size:.76rem;text-transform:uppercase;font-weight:900;letter-spacing:.14em}
.concept-card>strong{display:block;font-size:clamp(2.2rem,9vw,3.8rem);margin:10px 0 22px;color:#fff;letter-spacing:-.05em}
.hint-box{border-top:1px solid rgba(255,255,255,.16);padding-top:18px}
.hint-box span{font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;color:var(--orange);font-weight:950}
.hint-box p{margin:8px 0 0;color:#E8EFF7;line-height:1.6}
.mission-card{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin-top:20px;padding:16px;border-radius:19px;background:#F5F8FB;border:1px solid #DCE6EF}
.mission-number{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--blue);color:#fff;font-size:.72rem;font-weight:900}
.mission{margin:0;line-height:1.65;color:var(--muted)}
.surprise-message{margin:24px 0;padding:19px;border-radius:19px;background:linear-gradient(135deg,#FFF5D9,#FFE8A0);border:1px solid #F7D672}
.surprise-message span{display:block;color:#8A5F00;font-weight:950;text-transform:uppercase;font-size:.78rem;letter-spacing:.12em}
.surprise-message strong{display:block;margin-top:5px;color:#4F3900;font-size:1.1rem}
.partner-list{display:grid;gap:10px}
.partner-chip{padding:16px 18px;border-radius:18px;background:var(--pale);border:1px solid #D5E2EE}
.partner-chip.self{background:#EDF5E9;border-color:#D2E6C6}
.partner-chip span,.partner-chip em{display:block;font-size:.75rem;color:var(--muted);font-style:normal}
.partner-chip strong{display:block;font-size:1.2rem;margin:3px 0;color:var(--blue)}
.commitment{color:var(--muted);line-height:1.65}
@keyframes panelIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) rotateX(-7deg) scale(.98)}to{opacity:1;transform:none}}
@keyframes haloPulse{0%,100%{transform:translate(-50%,-50%) scale(.95);opacity:.7}50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}}

/* PROJECTION SCREEN */
.screen-page{position:relative;background:#07192D;color:#fff;overflow:hidden}
.screen-page:after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 20% 20%,rgba(29,90,150,.22),transparent 34%),linear-gradient(180deg,rgba(7,25,45,.12),rgba(7,25,45,.58))
}
.screen-noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.13;background-image:radial-gradient(rgba(255,255,255,.8) .55px,transparent .55px);background-size:4px 4px}
.screen-shell{min-height:100vh;padding:clamp(30px,4vw,64px);display:flex;align-items:center;position:relative;z-index:2}
.screen-stage{width:min(1500px,100%);margin:auto}
.waiting-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);align-items:center;gap:clamp(45px,7vw,110px);animation:stageIn .7s ease-out}
.screen-badge{display:inline-flex;padding:9px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#C7D9EA;font-size:.78rem;letter-spacing:.14em;font-weight:900}
.screen-copy h1{font-size:clamp(4.8rem,8.4vw,9.4rem);max-width:1000px;margin:18px 0 24px}
.screen-copy p{font-size:clamp(1.15rem,1.7vw,1.75rem);color:#CBD9E8;max-width:780px;line-height:1.5}
.screen-meta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.counter{display:flex;align-items:baseline;gap:10px;margin-top:26px}
.counter strong{font-size:clamp(2.5rem,5vw,5.1rem);color:var(--orange)}
.counter span{font-size:2rem;color:#6E8BAB}
.counter small{font-size:1rem;color:#AAC0D7;margin-left:8px;text-transform:uppercase;letter-spacing:.1em}
.live-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border-radius:999px;background:rgba(92,158,58,.14);border:1px solid rgba(92,158,58,.35);color:#C9E3BD;font-weight:850}
.live-pill i{display:block;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(92,158,58,.6);animation:livePulse 1.8s infinite}
.short-url{display:inline-block;margin-top:18px;padding:10px 15px;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#DBE6F1;background:rgba(255,255,255,.06)}
.qr-stage{position:relative;display:grid;place-items:center;min-height:480px}
.qr-frame{
  position:relative;z-index:2;background:linear-gradient(145deg,#fff,#F0F5F8);padding:18px;border-radius:32px;
  box-shadow:0 36px 100px rgba(0,0,0,.3);transform:rotateY(-7deg) rotateX(4deg);transition:transform .5s ease
}
.qr-frame:hover{transform:rotateY(-2deg) rotateX(1deg) scale(1.02)}
.qr-label{color:var(--blue);font-size:.72rem;font-weight:950;letter-spacing:.14em;text-align:center;padding:5px 0 14px}
.qr-frame img{display:block;width:min(30vw,380px);height:auto;border-radius:14px}
.qr-orbit{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.11);animation:orbitSpin 12s linear infinite}
.orbit-a{width:470px;height:470px}
.orbit-b{width:380px;height:380px;animation-direction:reverse;animation-duration:9s}
.qr-orbit:before{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:var(--orange);left:50%;top:-6px;box-shadow:0 0 25px rgba(242,169,0,.7)}
.reveal-stage{text-align:center;animation:stageIn .65s ease-out}
.reveal-stage>h2{font-size:clamp(3rem,5vw,5.2rem);margin:16px 0 12px}
.reveal-intro{color:#B8CBDE;font-size:1.1rem;margin-bottom:30px}
.connection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:18px;text-align:left}
.connection-card{
  padding:24px;border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);box-shadow:0 20px 48px rgba(0,0,0,.15);
  animation:connectionIn .7s both;animation-delay:var(--delay);position:relative;overflow:hidden
}
.connection-card:after{content:"";position:absolute;right:-55px;top:-55px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(242,169,0,.16),transparent 70%)}
.connection-card-head{display:flex;align-items:center;justify-content:space-between}
.connection-card-head>small{color:#8EACCA;letter-spacing:.13em;font-weight:900}
.connection-card-head>span{color:var(--green);text-shadow:0 0 15px rgba(92,158,58,.7)}
.connection-card h3{font-size:1.55rem;margin:9px 0 20px}
.connection-members{display:grid;gap:9px}
.connection-member{display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.075);padding:13px 14px;border-radius:14px}
.connection-member div small{display:block;color:#7897B5;font-size:.63rem;letter-spacing:.1em;margin-bottom:2px}
.connection-member strong{display:block;color:var(--orange);font-size:1.05rem}
.connection-member>span{color:#D7E3EE;font-weight:800}
.connection-line{display:flex;align-items:center;gap:10px;color:#8FA9C3}
.connection-line span{height:1px;background:#466583;flex:1}
.connection-line i{font-style:normal;color:var(--green);font-weight:950}
.screen-surprise{margin:34px auto 16px;max-width:980px}
.screen-surprise span{display:block;color:var(--orange);font-size:1rem;font-weight:950;letter-spacing:.16em}
.screen-surprise strong{display:block;font-size:clamp(1.9rem,3vw,3.3rem);margin-top:8px}
.screen-commitment{max-width:920px;margin:auto;color:#B8CADA;font-size:1.12rem;line-height:1.58}
@keyframes stageIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes connectionIn{from{opacity:0;transform:translateY(28px) scale(.95) rotateX(-8deg)}to{opacity:1;transform:none}}
@keyframes livePulse{70%{box-shadow:0 0 0 9px rgba(92,158,58,0)}100%{box-shadow:0 0 0 0 rgba(92,158,58,0)}}
@keyframes orbitSpin{to{transform:rotate(360deg)}}

/* FACILITATOR */
.admin-page{
  background:
    radial-gradient(circle at 8% 0,rgba(18,58,109,.09),transparent 26%),
    radial-gradient(circle at 95% 100%,rgba(242,169,0,.08),transparent 28%),
    #EDF2F7;
}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-panel{width:min(460px,100%);padding:36px}
.login-panel h1{font-size:2.3rem;color:var(--blue);margin-bottom:12px}
.warning-box{padding:14px;border-radius:14px;background:#FFF3D7;color:#735100;margin-bottom:18px;line-height:1.5}
.admin-shell{width:min(1280px,calc(100% - 32px));margin:0 auto;padding:30px 0 56px}
.admin-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.admin-header h1{font-size:2.45rem;color:var(--blue);margin:0}
.admin-header p:not(.eyebrow){margin:4px 0 0;color:var(--muted)}
.admin-header-actions{display:flex;gap:8px;align-items:center}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.admin-stats article{padding:18px 19px;border-radius:19px;background:rgba(255,255,255,.9);border:1px solid #E1E8EF;box-shadow:0 10px 28px rgba(7,25,45,.05)}
.admin-stats span{display:block;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;font-weight:900}
.admin-stats strong{display:block;margin-top:5px;color:var(--blue);font-size:1.48rem}
.admin-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:16px}
.admin-panel{padding:25px}
.admin-panel.full-width{grid-column:1/-1}
.panel-heading,.setup-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}
.panel-heading h2,.admin-panel h2{font-size:1.52rem;color:var(--blue);margin-bottom:14px}
.toggle-line{display:flex;align-items:center;gap:8px;white-space:nowrap}
.toggle-line input{width:auto}
.participants-table{display:grid;gap:8px}
.participant-row{display:grid;grid-template-columns:38px 1.15fr .9fr auto;align-items:center;gap:10px;padding:12px;border-radius:14px;background:#F7F9FB;border:1px solid #EDF1F4}
.row-number{color:#8B9BAC;font-weight:900;font-size:.78rem}
.participant-meta strong{display:block;color:var(--ink)}
.participant-meta small{display:block;margin-top:3px;font-size:.72rem;font-weight:800}
.participant-meta small.ready{color:var(--green)}
.participant-meta small.waiting{color:#9B7B22}
.row-concept{color:var(--muted);font-weight:750}
.remove-button{border:0;background:transparent;color:var(--danger);font-weight:850}
.remove-button:disabled{opacity:.35}
.empty-state{padding:34px;text-align:center;color:var(--muted);border:1px dashed #CBD7E2;border-radius:18px}
.empty-state strong,.empty-state span{display:block}.empty-state strong{color:var(--blue);margin-bottom:5px}
.reveal-control-panel{position:relative;overflow:hidden}
.reveal-control-panel:after{content:"";position:absolute;right:-60px;top:-65px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(242,169,0,.16),transparent 70%);pointer-events:none}
.reveal-orb{width:110px;height:110px;margin:10px auto 22px;position:relative;border-radius:50%;border:1px solid rgba(18,58,109,.1);animation:orbitSpin 16s linear infinite}
.reveal-orb:before,.reveal-orb:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(18,58,109,.08)}
.reveal-orb:before{inset:14px}.reveal-orb:after{inset:30px}
.reveal-orb span,.reveal-orb i,.reveal-orb b{position:absolute;width:10px;height:10px;border-radius:50%;box-shadow:0 0 18px rgba(18,58,109,.18)}
.reveal-orb span{background:var(--orange);top:4px;left:49%}
.reveal-orb i{background:var(--green);right:8px;bottom:20px}
.reveal-orb b{background:var(--blue);left:5px;top:48%}
.setup-panel{overflow:hidden}
.setup-state{display:inline-flex;padding:8px 11px;border-radius:999px;background:#EDF5E9;color:#4D7F35;border:1px solid #D2E6C6;font-size:.74rem;font-weight:900;white-space:nowrap}
.setup-state.pending{background:#FFF4D8;color:#886100;border-color:#F5D88A}
.setup-grid{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start;margin-top:10px}
.setup-column{min-width:0}
.setup-counter{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;margin-top:16px;border-radius:14px;background:#F6F9FB;border:1px solid #E1E8EF}
.setup-counter span{color:var(--muted);font-size:.78rem;font-weight:800}.setup-counter strong{color:var(--blue)}
.setup-hint{min-height:1.35em;margin:10px 0;color:var(--muted);font-size:.82rem;font-weight:700}
.setup-actions-inline{display:flex;gap:8px;flex-wrap:wrap}
.pair-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:8px}
.pair-options label{
  display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#FAFCFD;cursor:pointer;transition:.2s ease
}
.pair-options label:hover{border-color:#B8CBDD;background:#F5F9FC}
.pair-options label:has(input:checked){border-color:rgba(18,58,109,.35);background:#EEF4F9;box-shadow:inset 0 0 0 1px rgba(18,58,109,.08)}
.pair-options input{width:auto;accent-color:var(--blue)}
.pair-options span{display:grid;grid-template-columns:auto auto auto;column-gap:7px;align-items:center;min-width:0}
.pair-options span strong{font-size:.82rem;color:var(--blue)}.pair-options span i{font-style:normal;color:var(--orange);font-weight:950}
.pair-options span small{grid-column:1/-1;margin-top:3px;color:var(--muted);font-weight:650}
.setup-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;padding-top:18px;border-top:1px solid #E7EDF2}
.setup-footer p{margin:0;max-width:720px}

@media(max-width:900px){
  .waiting-stage{grid-template-columns:1fr;text-align:center}
  .qr-stage{min-height:auto}.qr-frame{justify-self:center}
  .screen-copy p{margin-inline:auto}.screen-meta-row,.counter{justify-content:center}
  .admin-stats{grid-template-columns:repeat(2,1fr)}
  .admin-grid{grid-template-columns:1fr}
  .setup-grid{grid-template-columns:1fr}
  .pair-options{grid-template-columns:1fr 1fr}
  .participant-row{grid-template-columns:34px 1fr auto}
  .row-concept{grid-column:2}
}
@media(max-width:600px){
  .participant-shell{padding:18px 14px 34px}
  .participant-panel{border-radius:24px}
  .admin-header{align-items:flex-start;flex-direction:column}
  .admin-header-actions{width:100%;flex-wrap:wrap}
  .admin-stats{grid-template-columns:1fr 1fr}
  .card-choice-grid{gap:10px}
  .pair-options{grid-template-columns:1fr}
  .setup-footer{align-items:stretch;flex-direction:column}
  .setup-footer .danger-outline-button{width:100%}
}
@media(hover:none){
  .mystery-card:hover{transform:none}
  .qr-frame:hover{transform:rotateY(-7deg) rotateX(4deg)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}


/* ===== MOTION + DEPTH UPGRADE ===== */
.three-backdrop{opacity:1}
.screen-page:after{
  background:
    radial-gradient(circle at 18% 18%,rgba(29,90,150,.16),transparent 34%),
    radial-gradient(circle at 78% 52%,rgba(242,169,0,.055),transparent 28%),
    linear-gradient(180deg,rgba(7,25,45,.04),rgba(7,25,45,.30))
}

.screen-title-3d{
  margin:22px 0 28px!important;
  perspective:900px;
  transform-style:preserve-3d;
  isolation:isolate;
}
.screen-title-3d .title-line{
  position:relative;
  display:block;
  width:max-content;
  max-width:100%;
  transform-style:preserve-3d;
  will-change:transform;
  letter-spacing:-.06em;
  line-height:.88;
}
.screen-title-3d .title-white{
  color:#fff;
  text-shadow:
    1px 1px 0 #d6e2ee,
    2px 2px 0 #c0d1e1,
    3px 3px 0 #a7bdd2,
    4px 4px 0 #8fa8c0,
    5px 5px 0 #718ca7,
    6px 6px 0 #58758f,
    8px 10px 18px rgba(0,0,0,.34);
  animation:titleFloatA 5.8s ease-in-out infinite;
}
.screen-title-3d .title-orange{
  color:var(--orange);
  text-shadow:
    1px 1px 0 #d79200,
    2px 2px 0 #c38300,
    3px 3px 0 #ae7300,
    4px 4px 0 #965f00,
    5px 5px 0 #7d4e00,
    6px 6px 0 #673d00,
    8px 11px 20px rgba(0,0,0,.35);
  animation:titleFloatB 6.3s ease-in-out infinite;
}
.screen-title-3d .title-line::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  z-index:-1;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.08);
  transform:translate3d(8px,11px,-30px);
  filter:blur(.2px);
}
@keyframes titleFloatA{
  0%,100%{transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg)}
  50%{transform:translate3d(0,-7px,16px) rotateX(1.2deg) rotateY(-1.2deg)}
}
@keyframes titleFloatB{
  0%,100%{transform:translate3d(0,0,2px) rotateX(0deg) rotateY(0deg)}
  50%{transform:translate3d(4px,-6px,19px) rotateX(-1deg) rotateY(1.5deg)}
}

.qr-stage{perspective:1200px}
.qr-frame{
  animation:qrFloat 5.5s ease-in-out infinite;
  transform-style:preserve-3d;
}
@keyframes qrFloat{
  0%,100%{transform:translate3d(0,0,0) rotateY(-7deg) rotateX(4deg)}
  50%{transform:translate3d(0,-10px,24px) rotateY(-3deg) rotateX(1deg)}
}
.qr-orbit{box-shadow:inset 0 0 35px rgba(116,166,210,.03),0 0 28px rgba(116,166,210,.04)}

.participant-panel{
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
.card-choice-grid{transform-style:preserve-3d}
.mystery-card{
  transform-style:preserve-3d;
  box-shadow:
    0 7px 0 #07192d,
    0 13px 0 rgba(7,25,45,.28),
    0 28px 48px rgba(7,25,45,.22);
}
.mystery-card::before{transform:translateZ(4px)}
.mystery-card .card-face{
  transform:translateZ(26px);
  box-shadow:inset 0 0 28px rgba(255,255,255,.05),0 8px 22px rgba(0,0,0,.18);
}
.mystery-card:hover{
  box-shadow:
    0 10px 0 #07192d,
    0 17px 0 rgba(7,25,45,.23),
    0 38px 62px rgba(7,25,45,.30);
}
.card-stage-panel.is-active .mystery-card{will-change:transform,opacity}

.concept-card{
  transform-style:preserve-3d;
  box-shadow:
    0 8px 0 #07192d,
    0 18px 48px rgba(7,25,45,.30),
    0 34px 78px rgba(7,25,45,.16);
}
.concept-card .concept-kicker,
.concept-card>strong,
.concept-card .hint-box{position:relative;transform:translateZ(18px)}
.concept-card>strong{text-shadow:0 6px 18px rgba(0,0,0,.22)}

.toggle-line{
  padding:7px 10px;
  border-radius:999px;
  transition:.2s ease;
}
.toggle-line.is-on{background:#edf5e9;color:#4d7f35}
.concept-pill{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  background:#eef2f5;
  color:#6f8192;
  font-size:.76rem;
  font-weight:850;
  transition:.24s ease;
}
.concept-pill.visible{
  background:linear-gradient(135deg,#e9f1f8,#dbe9f5);
  color:var(--blue);
  border:1px solid #c7d8e8;
  box-shadow:0 7px 16px rgba(18,58,109,.08);
  animation:conceptPillIn .28s ease-out;
}
@keyframes conceptPillIn{
  from{opacity:0;transform:translateY(5px) scale(.94)}
  to{opacity:1;transform:none}
}

.connection-card{
  transform-style:preserve-3d;
  box-shadow:0 9px 0 rgba(0,0,0,.11),0 30px 58px rgba(0,0,0,.20);
}
.connection-card h3{transform:translateZ(16px)}
.connection-member{transform:translateZ(10px)}

@media(max-width:900px){
  .screen-title-3d .title-line{width:auto}
}
@media(prefers-reduced-motion:reduce){
  .screen-title-3d .title-white,
  .screen-title-3d .title-orange,
  .qr-frame{animation:none!important}
}


/* ===== LIVE CONCEPT CHOICES ===== */
.availability-strip{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:18px 0 4px;padding:12px 14px;border-radius:16px;
  background:linear-gradient(135deg,#F5F8FB,#EDF3F8);
  border:1px solid #DCE6EF;color:var(--muted);font-size:.82rem;font-weight:800
}
.availability-strip strong{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:72px;padding:6px 10px;border-radius:999px;
  background:#fff;color:var(--blue);border:1px solid #D3E0EC;
  box-shadow:0 6px 15px rgba(18,58,109,.06)
}
.concept-choice-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch
}
.concept-choice-card{
  min-height:150px;aspect-ratio:auto;padding:16px;text-align:left;
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;
  align-items:start;gap:8px;
  background:
    radial-gradient(circle at 20% 15%,rgba(255,255,255,.18),transparent 26%),
    linear-gradient(145deg,#102F54,#174B80 58%,#0A2748);
}
.concept-choice-card:nth-child(3n+2){
  background:
    radial-gradient(circle at 25% 18%,rgba(255,255,255,.17),transparent 25%),
    linear-gradient(145deg,#263D16,#5C9E3A 68%,#244117)
}
.concept-choice-card:nth-child(3n){
  background:
    radial-gradient(circle at 25% 18%,rgba(255,255,255,.18),transparent 25%),
    linear-gradient(145deg,#6B4900,#F2A900 70%,#9D6800)
}
.choice-card-number{
  color:rgba(255,255,255,.58);font-size:.68rem;font-weight:950;letter-spacing:.13em;
  position:relative;z-index:2;transform:translateZ(18px)
}
.choice-card-orb{
  width:14px;height:14px;border-radius:50%;background:#fff8;box-shadow:0 0 0 6px #fff1,0 0 28px rgba(255,255,255,.22);
  position:relative;z-index:2;transform:translateZ(24px)
}
.choice-card-label{
  grid-column:1/-1;align-self:center;
  color:#fff;font-size:clamp(1.02rem,4vw,1.4rem);line-height:1.08;font-weight:950;
  letter-spacing:-.025em;position:relative;z-index:2;transform:translateZ(28px);
  text-shadow:0 4px 12px rgba(0,0,0,.2)
}
.choice-card-status{
  grid-column:1/-1;
  display:inline-flex;justify-self:start;
  padding:5px 8px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.13);
  color:#DCE8F3;font-size:.67rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  position:relative;z-index:2;transform:translateZ(18px)
}
.concept-choice-card.is-taken{
  opacity:.34;filter:saturate(.3) grayscale(.15);transform:translateZ(-30px) scale(.95)!important;
  box-shadow:0 8px 18px rgba(7,25,45,.12)
}
.concept-choice-card.is-taken .choice-card-status{
  background:rgba(255,255,255,.16);color:#fff
}
.concept-choice-card.is-selecting{
  z-index:20;
  box-shadow:0 18px 0 rgba(7,25,45,.58),0 42px 80px rgba(7,25,45,.34)
}
.selection-clone{
  border-radius:24px!important;
  overflow:hidden!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important
}

/* ===== CLEANER TEXTURED 3D TITLE ===== */
.screen-title-3d .title-line{
  text-shadow:none!important;
  -webkit-text-stroke:0!important;
  background-size:220% 100%,100% 100%;
  background-position:15% 50%,50% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.28));
}
.screen-title-3d .title-white{
  background-image:
    repeating-linear-gradient(115deg,rgba(255,255,255,.20) 0 1px,rgba(255,255,255,0) 1px 5px),
    linear-gradient(105deg,#FFFFFF 0%,#DDE8F2 24%,#FFFFFF 46%,#B8C9D9 73%,#F8FBFD 100%);
  animation:titleFloatA 5.8s ease-in-out infinite,titleSheen 7.8s ease-in-out infinite;
}
.screen-title-3d .title-orange{
  background-image:
    repeating-linear-gradient(115deg,rgba(255,255,255,.12) 0 1px,rgba(255,255,255,0) 1px 5px),
    linear-gradient(105deg,#FFBD22 0%,#F2A900 24%,#FFD462 48%,#C98300 75%,#F2A900 100%);
  animation:titleFloatB 6.3s ease-in-out infinite,titleSheen 8.6s ease-in-out infinite reverse;
}
.screen-title-3d .title-line::after{
  content:attr(data-text);
  position:absolute;inset:0;z-index:-1;
  color:rgba(5,16,29,.22);
  -webkit-text-fill-color:rgba(5,16,29,.22);
  -webkit-text-stroke:1px rgba(255,255,255,.06);
  transform:translate3d(4px,6px,-14px);
  filter:blur(.1px);
  text-shadow:none
}
.screen-title-3d .title-line::before{
  content:attr(data-text);
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.44) 47%,transparent 67%);
  background-size:220% 100%;
  background-position:-120% 50%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:.42;
  animation:textGlint 6.5s ease-in-out infinite
}
@keyframes titleSheen{
  0%,100%{background-position:12% 50%,50% 50%}
  50%{background-position:88% 50%,50% 50%}
}
@keyframes textGlint{
  0%,28%{background-position:-130% 50%}
  62%,100%{background-position:150% 50%}
}

/* ===== CONCEPT REVEAL STAGING ===== */
.concept-panel.is-active .concept-card{
  transform-style:preserve-3d
}
.concept-panel .mission-card{
  transform-origin:50% 0
}
.concept-panel .hint-box{
  transform-origin:50% 0
}

@media(max-width:520px){
  .concept-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .concept-choice-card{min-height:132px;padding:13px}
  .choice-card-label{font-size:1rem}
}


/* ===== CELEBRATION CONFETTI ===== */
.celebration-confetti{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:10000;
  pointer-events:none;
  user-select:none;
}