/* style.css */
:root{
    --bg-deep:#0A0710;
    --bg-surface:#150F20;
    --bg-surface-2:#1C1428;
    --border:#2C2138;
    --border-soft:#221A2E;
    --text-primary:#F3F0F8;
    --text-dim:#A79CC0;
    --text-faint:#6B5F82;

    --pink:#E94FA1;
    --purple:#8B5CF6;
    --orange:#F0713D;
    --orange-2:#C23B1F;
    --blue:#2F6FED;
    --blue-2:#12356E;
    --green:#34A853;
    --green-2:#0F5B2C;
    --magenta:#B5308C;
    --magenta-2:#6C1848;

    --grad-brand:linear-gradient(90deg,#E94FA1 0%,#8B5CF6 55%,#5B6FF0 100%);
    --grad-cta:linear-gradient(90deg,#8B5CF6 0%,#E94FA1 100%);

    --serif:'Playfair Display', serif;
    --heading:'Poppins', sans-serif;
    --sans:'Inter', sans-serif;
    --mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
    margin:0;
    background:var(--bg-deep);
    color:var(--text-primary);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
#app{min-height:100vh; display:flex; flex-direction:column;}
.screen{display:none; flex:1; min-height:100vh;}
.screen.active{display:flex;}
button{font-family:inherit; cursor:pointer;}
input{font-family:inherit;}

/* ---------- Wordmark ---------- */
.brand{ display:flex; align-items:center; gap:12px; }
.brand .logo{
    font-family:var(--heading); font-weight:400; font-size:22px; letter-spacing:-0.01em;
    background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sidebar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.brand .tag{ font-family:var(--mono); font-size:13px; color:var(--text-faint); }

/* ================= LANDING ================= */
#landing{
    flex-direction:column; width:100%;
    background:
      radial-gradient(760px 420px at 8% -6%, rgba(139,92,246,0.22), transparent 60%),
      radial-gradient(700px 460px at 96% 8%, rgba(233,79,161,0.14), transparent 60%),
      radial-gradient(900px 600px at 50% 115%, rgba(47,111,237,0.12), transparent 60%),
      var(--bg-deep);
}
.landing-header{
    padding:24px 40px; display:flex; justify-content:space-between; align-items:center;
    border-bottom:1px solid var(--border-soft);
}
.landing-body{ flex:1; display:flex; align-items:center; justify-content:center; padding:48px 24px; }
.hero{ width:100%; max-width:1040px; }

.badge{
    display:inline-flex; align-items:center; gap:8px; background:var(--bg-surface);
    border:1px solid var(--border); padding:7px 14px 7px 10px; border-radius:999px;
    font-family:var(--mono); font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--text-dim); margin-bottom:22px;
}
.badge .icon{ color:var(--pink); font-weight:700; }
.badge .underline{
    width:26px; height:2px; margin-left:4px; border-radius:2px;
    background:var(--grad-cta);
}

.hero-title{
    font-family:var(--serif); font-weight:800; font-size:clamp(30px,4.6vw,50px);
    line-height:1.14; margin:0 0 18px; color:var(--text-primary);
}
.hero-title .g-orange{
    background:linear-gradient(90deg,#F0713D,#E94FA1);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-title .g-blue{
    background:linear-gradient(90deg,#5B6FF0,#2F6FED);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ color:var(--text-dim); font-size:15.5px; max-width:600px; line-height:1.65; margin:0 0 30px; }

.hero-top{ margin-bottom:44px; }
.sidebar-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
  display: block;
}

/* ---------- room-entry cards ---------- */
.panels{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.card{
    border-radius:16px; padding:28px 26px; position:relative; overflow:hidden;
    border:1px solid; display:flex; flex-direction:column; gap:14px;
}
.card.card-create{
    background:linear-gradient(150deg, rgba(240,113,61,0.22), rgba(10,7,16,0.6) 60%);
    border-color:rgba(240,113,61,0.4);
}
.card.card-join{
    background:linear-gradient(150deg, rgba(47,111,237,0.22), rgba(10,7,16,0.6) 60%);
    border-color:rgba(47,111,237,0.4);
}
.card-icon{
    width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:20px; color:#fff;
}
.card-create .card-icon{ background:linear-gradient(135deg,#F0713D,#C23B1F); }
.card-join .card-icon{ background:linear-gradient(135deg,#2F6FED,#12356E); }

.card h2{ margin:0; font-family:var(--heading); font-weight:700; font-size:19px; }
.card p.desc{ margin:0; color:var(--text-dim); font-size:13.5px; line-height:1.55; }

label.field-label{
    font-size:11.5px; color:var(--text-faint); font-family:var(--mono);
    text-transform:uppercase; letter-spacing:0.08em; margin-bottom:6px; display:block;
}
.field{ margin-top:2px; }
input.text-input{
    width:100%; background:rgba(10,7,16,0.55); border:1px solid var(--border);
    color:var(--text-primary); padding:12px 14px; border-radius:10px; font-size:14.5px;
    outline:none; transition:border-color .15s ease;
}
input.text-input::placeholder{ color:var(--text-faint); }
input.text-input:focus{ border-color:var(--pink); }
input.code-input{
    font-family:var(--mono); letter-spacing:0.28em; text-transform:uppercase;
    text-align:center; font-size:18px; font-weight:600;
}

.btn{
    border:none; border-radius:10px; padding:12px 18px; font-size:14.5px; font-weight:600;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    transition:transform .12s ease, filter .12s ease; width:100%; font-family:var(--heading);
    color:#fff;
}
.btn:active{ transform:scale(0.98); }
.btn-create{ background:linear-gradient(90deg,#F0713D,#E94FA1); }
.btn-create:hover{ filter:brightness(1.08); }
.btn-join{ background:linear-gradient(90deg,#2F6FED,#8B5CF6); }
.btn-join:hover{ filter:brightness(1.08); }
.btn:disabled{ opacity:0.45; cursor:not-allowed; }

.error-msg{ color:#F2879A; font-size:12.5px; font-family:var(--mono); min-height:16px; }

.foot-note{ text-align:center; color:var(--text-faint); font-size:12.5px; margin-top:30px; font-family:var(--mono); }

@media (max-width:720px){ .panels{ grid-template-columns:1fr; } }

/* ================= ROOM ================= */
#room{ flex-direction:column; width:100%; background:var(--bg-deep); }
.room-topbar{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:14px 22px; background:var(--bg-surface); border-bottom:1px solid var(--border);
    flex-wrap:wrap;
}
.room-left{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.code-chip{
    display:flex; align-items:center; gap:8px; background:var(--bg-surface-2);
    border:1px solid var(--border); padding:7px 12px; border-radius:10px;
    font-family:var(--mono); font-size:14px; letter-spacing:0.18em; font-weight:700;
    background-image:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.code-chip button{
    background:none; border:none; color:var(--text-faint); padding:0 0 0 4px;
    font-size:13px; letter-spacing:normal; font-weight:400; font-family:var(--sans);
    -webkit-background-clip:initial; background-clip:initial;
}
.code-chip button:hover{ color:var(--text-primary); }

.sync-status{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; color:var(--text-faint); }
.sync-status .pulse{ width:8px; height:8px; border-radius:50%; background:var(--purple); }
.sync-status.syncing .pulse{ background:var(--orange); }
@media (prefers-reduced-motion:no-preference){ .sync-status .pulse{ animation:pulseGlow 2s ease-in-out infinite; } }
@keyframes pulseGlow{
    0%,100%{ box-shadow:0 0 0 0 rgba(139,92,246,0.4); }
    50%{ box-shadow:0 0 0 5px rgba(139,92,246,0); }
}

.lang-select{
    background:var(--bg-surface-2); border:1px solid var(--border); color:var(--text-primary);
    padding:7px 10px; border-radius:8px; font-family:var(--mono); font-size:12.5px;
}

.participants{ display:flex; align-items:center; }
.avatar{
    width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:11px; font-weight:700; color:#0A0710;
    border:2px solid var(--bg-surface); margin-left:-8px; position:relative;
}
.avatar:first-child{ margin-left:0; }
.avatar .tip{
    position:absolute; top:34px; left:50%; transform:translateX(-50%);
    background:var(--bg-surface-2); border:1px solid var(--border); padding:3px 8px;
    border-radius:6px; font-size:11px; font-family:var(--sans); color:var(--text-primary);
    white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s ease;
}
.avatar:hover .tip{ opacity:1; }

.room-right{ display:flex; align-items:center; gap:12px; }
.btn-leave{
    background:transparent; border:1px solid var(--border); color:var(--text-dim);
    padding:7px 14px; border-radius:8px; font-size:12.5px; font-family:var(--sans);
}
.btn-leave:hover{ border-color:var(--pink); color:var(--pink); }

.editor-wrap{ flex:1; display:flex; background:var(--bg-deep); position:relative; min-height:0; }
.gutter{
    font-family:var(--mono); font-size:14px; line-height:22px; color:var(--text-faint);
    padding:18px 12px 18px 18px; text-align:right; background:var(--bg-surface);
    border-right:1px solid var(--border); user-select:none; overflow:hidden; white-space:pre;
}
#editor{
    flex:1; resize:none; border:none; outline:none; background:var(--bg-deep);
    color:var(--text-primary); font-family:var(--mono); font-size:14px; line-height:22px;
    padding:18px 24px; tab-size:2;
}
#editor::placeholder{ color:var(--text-faint); }

.room-footer{
    padding:8px 22px; background:var(--bg-surface); border-top:1px solid var(--border);
    display:flex; justify-content:space-between; align-items:center;
    font-family:var(--mono); font-size:11.5px; color:var(--text-faint);
}

::selection{ background:rgba(233,79,161,0.28); }