*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-color: #0e1013;--gold-sub: #9e824c;--gold-accent: #c29d5b;--gold-hover: #e5c58a;--border-gold: #382e20;--border-gold-focus: #7a633c;--text-main: #ece7dc;--text-muted: #5e574a;--font-serif-title: "Cinzel Decorative", "Cinzel", "Cormorant Garamond", Georgia, serif;--font-serif-sub: "Cinzel", "Cormorant Garamond", Georgia, serif;--font-serif-name: "Cormorant Garamond", Georgia, serif}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-serif-sub);-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}.fog-background{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1;background-color:#0c0e11;overflow:hidden}.mesh-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-image:radial-gradient(ellipse at 50% 50%,#201c1673,#0c0e11e0 65%,#08090c),repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0px,rgba(255,255,255,.02) 1px,transparent 1px,transparent 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0px,rgba(255,255,255,.02) 1px,transparent 1px,transparent 3px);pointer-events:none;z-index:2}.fog-clouds{position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;width:140%;height:140%;background:radial-gradient(circle at 20% 30%,rgba(45,38,28,.18) 0%,transparent 40%),radial-gradient(circle at 75% 65%,rgba(35,30,25,.22) 0%,transparent 45%),radial-gradient(circle at 50% 50%,rgba(25,23,20,.15) 0%,transparent 50%);filter:blur(40px);animation:fogFloat 30s ease-in-out infinite alternate;pointer-events:none;z-index:1}@keyframes fogFloat{0%{transform:translate(-2%,-2%) scale(1)}50%{transform:translate(2%,1%) scale(1.03)}to{transform:translate(-1%,2%) scale(.98)}}.glow-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:2;filter:blur(28px)}.orb-top-left{top:1%;left:3%;width:110px;height:110px;background:radial-gradient(circle,rgba(140,160,180,.16) 0%,transparent 70%)}.orb-center{top:40%;left:50%;transform:translate(-50%,-50%);width:500px;height:350px;background:radial-gradient(ellipse,rgba(160,128,75,.1) 0%,transparent 75%)}.smoke-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3}.center-container{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;padding:0 20px;margin-top:-3vh;text-align:center}.title-group{margin-bottom:34px}.subtitle{font-family:var(--font-serif-sub);font-size:.88rem;font-weight:500;letter-spacing:.32em;color:var(--gold-sub);margin-bottom:12px;text-transform:uppercase;text-shadow:0 0 10px rgba(158,130,76,.25)}.main-title{font-family:var(--font-serif-title);font-size:clamp(2.6rem,5.8vw,4.2rem);font-weight:700;letter-spacing:.05em;color:var(--text-main);text-shadow:0 0 20px rgba(236,231,220,.2),0 0 45px rgba(160,130,75,.15);line-height:1.15}.input-group{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:440px}.name-input{flex:1;background-color:#0b0d10;border:1px solid #332b1d;border-radius:1px;color:#ece7dc;font-family:var(--font-serif-name);font-size:1.05rem;letter-spacing:.02em;padding:13px 18px;outline:none;transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease;box-shadow:inset 0 1px 3px #000000b3}.name-input::placeholder{color:#5b5446;font-family:var(--font-serif-name);font-size:1.05rem;font-style:normal;opacity:1}.name-input:focus{border-color:#6d5631;background-color:#0d0f13;box-shadow:0 0 10px #6d563133,inset 0 1px 3px #000000b3}.enter-btn{background-color:#111215;border:1px solid #332b1d;border-radius:1px;color:#6f5934;font-family:var(--font-serif-sub);font-size:.85rem;font-weight:600;letter-spacing:.24em;padding:13px 26px;cursor:pointer;outline:none;text-transform:uppercase;transition:all .25s ease;-webkit-user-select:none;user-select:none}.enter-btn:hover{background-color:#18191e;border-color:var(--gold-sub);color:var(--gold-hover);box-shadow:0 0 16px #c29d5b40}.enter-btn:active{transform:scale(.98)}@media (max-width: 640px){.input-group{flex-direction:column;max-width:320px;gap:10px}.name-input,.enter-btn{width:100%;text-align:center}.subtitle{font-size:.75rem;letter-spacing:.22em}.main-title{font-size:2.2rem}}