/* Ludus: The Beginning — 3D backdrop, title, intro cinematic. Phone first; scales to desktop. */
#bg3d{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:20;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
body.s3d #bg3d{opacity:1}
body.s3d #auth{background:transparent}
body.s3d #auth .t-art{opacity:0;transition:opacity 1.2s}
body.s3d #villa{background:transparent}
body.s3d .v-art{background:linear-gradient(rgba(14,8,6,.5),rgba(14,8,6,0) 22%,rgba(14,8,6,0) 60%,rgba(14,8,6,.55))!important}
body.s3d .v-art::after{display:none}
body.s3d .v-panel{background:linear-gradient(rgba(30,15,10,.78),rgba(22,10,7,.86));-webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1)}
body.s3d #pick{background:radial-gradient(ellipse at 50% 30%,rgba(40,18,10,.55),rgba(10,5,3,.82))}
body.in-intro #villa,body.in-intro #auth,body.in-intro #pick{visibility:hidden}
/* title: LUDUS / THE BEGINNING */
.logo .l1{position:relative}
.logo .l2.beg{letter-spacing:.42em;padding-left:.42em;background:linear-gradient(90deg,#c9963e,#fff1c4 45%,#e8b860 55%,#c9963e);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 #3a0804);animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.a-tagline{margin:-2px 0 14px;font:italic 15px/1.4 Georgia,serif;color:#f2deb4;text-shadow:0 1px 3px #000,0 0 12px rgba(0,0,0,.8)}
body.s3d #auth .a-card{background:linear-gradient(rgba(46,18,12,.82),rgba(26,12,8,.9));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* intro */
#intro{position:fixed;inset:0;z-index:45;pointer-events:auto;color:#f6e7c4;font-family:Georgia,serif;opacity:0;transition:opacity .8s}
#intro[hidden]{display:none}#intro.on{opacity:1}
#intro.tap{cursor:pointer}
.in-bar{position:absolute;left:0;right:0;height:0;background:#000;transition:height 1.2s cubic-bezier(.2,.8,.2,1);z-index:1}
.in-bar.top{top:0}.in-bar.bot{bottom:0}
#intro.on .in-bar{height:8vh}
.in-veil{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,transparent 40%,rgba(0,0,0,.45));pointer-events:none}
.in-cap{position:absolute;left:max(5vw,18px);right:max(5vw,18px);bottom:calc(8vh + 28px);max-width:760px;opacity:0;transform:translateY(14px);transition:opacity 1.1s,transform 1.1s;z-index:2;pointer-events:none}
#intro.cap-on .in-cap{opacity:1;transform:none}
.in-cap h2{font:700 clamp(24px,3.6vw,46px)/1.12 Cinzel,Georgia,serif;letter-spacing:.04em;margin:0 0 10px;color:#ffe9b8;text-shadow:0 2px 0 rgba(60,10,4,.9),0 0 30px rgba(0,0,0,.9)}
.in-cap p{font:clamp(15px,1.6vw,20px)/1.5 Georgia,serif;margin:0;color:#f3e2bd;text-shadow:0 1px 2px #000,0 0 18px rgba(0,0,0,.95);max-width:640px}
.in-say{position:absolute;left:50%;bottom:calc(8vh + 18px);transform:translate(-50%,16px);width:min(680px,calc(100vw - 28px));opacity:0;transition:opacity .7s,transform .7s;z-index:3;
  background:linear-gradient(rgba(34,16,10,.86),rgba(20,9,6,.92));border:1.5px solid #b98a46;border-radius:12px;padding:14px 16px 14px;box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,220,160,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#intro.say-on .in-say{opacity:1;transform:translate(-50%,0)}
.in-who{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}.in-who b{font:700 18px Cinzel,Georgia,serif;letter-spacing:.08em;color:#ffd36a}.in-who small{font:italic 13px Georgia,serif;color:#cbb08a}
.in-say p{font:17px/1.5 Georgia,serif;margin:0 0 12px;min-height:3em;color:#f8ead0}
.in-act{display:flex;gap:10px;flex-wrap:wrap}
.in-act button{flex:1;min-width:130px;font:700 17px Cinzel,Georgia,serif;letter-spacing:.06em;padding:12px 14px;border-radius:8px;border:1.5px solid #e2b462;background:linear-gradient(#8a301c,#4e150c);color:#fff3d8;cursor:pointer;box-shadow:0 0 18px rgba(226,140,60,.25);transition:transform .15s,box-shadow .2s}
.in-act button:hover{transform:translateY(-1px);box-shadow:0 0 26px rgba(255,160,70,.45)}
.in-name{display:flex;gap:8px;width:100%}.in-name input{flex:1;min-width:0;font:20px Georgia,serif;padding:11px 12px;border-radius:8px;border:1.5px solid #a8783a;background:#140a07;color:#ffeccb;text-transform:none}
.in-name input:focus{outline:2px solid #e2b462;outline-offset:1px}.in-name button{flex:none;min-width:0}
.in-go{animation:glow 2.4s ease-in-out infinite}
.in-est{position:absolute;left:50%;top:27%;transform:translate(-50%,-50%) scale(.94);text-align:center;opacity:0;transition:opacity 1.4s,transform 1.6s cubic-bezier(.2,.8,.2,1);z-index:2;pointer-events:none;width:min(92vw,900px)}
#intro.est-on .in-est{opacity:1;transform:translate(-50%,-50%) scale(1)}
.in-est small{display:block;font:600 clamp(12px,1.3vw,16px) Cinzel,Georgia,serif;letter-spacing:.4em;color:#f0cf8a;text-shadow:0 2px 8px #000}
.in-est b{display:block;font:700 clamp(40px,7.5vw,104px)/1.05 Cinzel,Georgia,serif;letter-spacing:.06em;margin:6px 0 4px;background:linear-gradient(#fff4cf,#f0c060 50%,#b86a18);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #3a0a04) drop-shadow(0 0 30px rgba(255,150,60,.45));overflow-wrap:anywhere}
.in-est span{display:block;font:700 clamp(16px,2vw,26px) Cinzel,Georgia,serif;letter-spacing:.3em;color:#ffe4a8;text-shadow:0 2px 10px #000}
.in-est i{display:block;margin-top:10px;font:italic clamp(13px,1.3vw,16px) Georgia,serif;color:#e6cfa4;text-shadow:0 1px 6px #000}
.in-est::before,.in-est::after{content:'';display:block;margin:14px auto;width:min(420px,70vw);height:2px;background:linear-gradient(90deg,transparent,#e2b462,transparent)}
.in-skip{position:absolute;top:calc(8vh + 12px);right:14px;z-index:4;font:600 13px Georgia,serif;color:#e8d3a6;background:rgba(10,5,3,.5);border:1px solid rgba(232,211,166,.4);border-radius:20px;padding:7px 14px;cursor:pointer}
.in-tap{position:absolute;bottom:calc(8vh - 26px);left:0;right:0;text-align:center;z-index:4;font:12px Georgia,serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(232,211,166,.6);opacity:0;transition:opacity .6s;pointer-events:none}
#intro.tap.cap-on .in-tap{opacity:1}
@media (max-width:600px){#intro.on .in-bar{height:6vh}.in-cap{bottom:calc(6vh + 22px)}.in-say{bottom:calc(6vh + 10px);padding:12px}.in-say p{font-size:16px}.in-skip{top:calc(6vh + 8px)}}
/* settings: scene quality */
.s-fps{font:12px Georgia,serif;color:#cbb895;margin-left:6px}