*{box-sizing:border-box}html,body{height:100%;margin:0;background:#020617;color:#e2e8f0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}

.overlay{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%, rgba(59,130,246,.25), rgba(2,6,23,.92) 70%);backdrop-filter:blur(6px);z-index:10}
.card{width:min(820px,92vw);background:rgba(15,23,42,.78);border:1px solid rgba(148,163,184,.18);border-radius:14px;padding:18px 18px 16px;box-shadow:0 15px 60px rgba(0,0,0,.55)}
.card h1{margin:0 0 8px;font-size:22px;letter-spacing:.2px}
.subtitle{margin:0 0 10px;opacity:.9;line-height:1.35}
textarea{width:100%;min-height:150px;resize:vertical;border-radius:10px;border:1px solid rgba(148,163,184,.25);background:rgba(2,6,23,.75);color:#e2e8f0;padding:10px;font-size:14px;outline:none}
textarea:focus{border-color:rgba(56,189,248,.7)}
.row{display:flex;gap:10px;margin-top:10px}
button{border-radius:10px;border:1px solid rgba(148,163,184,.22);background:linear-gradient(180deg, rgba(59,130,246,.95), rgba(37,99,235,.95));color:white;padding:10px 14px;font-weight:650;cursor:pointer}
button.secondary{background:rgba(148,163,184,.10);color:#e2e8f0}
button:hover{filter:brightness(1.05)}
.hint{margin:10px 0 0;font-size:13px;opacity:.85}

#game{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#crosshair{position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);border:2px solid rgba(226,232,240,.9);border-radius:50%;box-shadow:0 0 18px rgba(56,189,248,.25)}
#topLeft{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;gap:8px}
.pill{pointer-events:none;background:rgba(2,6,23,.55);border:1px solid rgba(148,163,184,.18);padding:7px 10px;border-radius:999px;font-size:13px;backdrop-filter:blur(5px)}

#chatLog{position:absolute;left:10px;right:10px;bottom:64px;max-width:980px;max-height:34vh;overflow:auto;display:flex;flex-direction:column;gap:8px;margin-inline:auto;padding-right:6px}
#chatLog{scrollbar-width:thin}
#chatLog::-webkit-scrollbar{width:10px}
#chatLog::-webkit-scrollbar-thumb{background:rgba(148,163,184,.25);border-radius:999px}
.chatLine{pointer-events:none;align-self:flex-start;max-width:min(980px,92vw);background:rgba(15,23,42,.65);border:1px solid rgba(148,163,184,.18);padding:8px 10px;border-radius:10px;font-size:13px;line-height:1.25}
.chatLine.you{align-self:flex-end;background:rgba(2,6,23,.55);border-color:rgba(56,189,248,.25)}
.chatLine .who{font-weight:750;margin-right:6px}

#chatBar{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:min(980px,92vw);display:flex;gap:10px;pointer-events:auto}
#chatInput{flex:1;border-radius:12px;border:1px solid rgba(148,163,184,.22);background:rgba(2,6,23,.80);color:#e2e8f0;padding:10px 12px;outline:none}
#chatInput:focus{border-color:rgba(56,189,248,.8)}
#chatBar button{padding:10px 14px}
#chatBar input:disabled,#chatBar button:disabled{opacity:.55;cursor:not-allowed}

/* Speech bubbles (CSS2DRenderer) */
.speech{padding:6px 8px;border-radius:10px;background:rgba(15,23,42,.75);border:1px solid rgba(148,163,184,.18);font-size:12px;max-width:260px;line-height:1.2;color:#e2e8f0;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.speech .name{font-weight:750;margin-bottom:4px;opacity:.95}
.speech .text{opacity:.95}