/* Ghost Town — playful UI refresh, layered after style.css */
:root{--f-title:'Fredoka',sans-serif;--f-body:'Nunito',sans-serif}
body{font-family:var(--f-body)}
#title{background:#160e35}
#title::after{background:linear-gradient(90deg,rgba(15,8,40,.24),transparent 62%),linear-gradient(0deg,rgba(18,9,43,.62),transparent 38%),radial-gradient(ellipse at center,transparent 48%,rgba(10,5,27,.34))}
.title-actions{left:50%;top:auto;bottom:clamp(25px,8vh,90px);width:min(335px,80vw);gap:12px}
.title-actions .cta{min-height:58px;letter-spacing:.2px}
.title-actions .cta:nth-child(1){font:650 clamp(23px,2vw,30px) var(--f-title);padding:14px 24px}
.title-actions .cta:nth-child(2){font:600 clamp(17px,1.4vw,21px) var(--f-title);padding:12px 20px}
.cta{font-family:var(--f-title);font-weight:600;outline-offset:5px}
.cta:focus-visible,.char:focus-visible,.back-btn:focus-visible,.tool:focus-visible{outline:3px solid #ffe59a}
.cta.yellow,.cta.orange{font-family:var(--f-title);font-weight:650;background:linear-gradient(#fff0ac 0%,#ffcd56 48%,#f5a72f 100%);border:2px solid #ffefb3;color:#4f2b56;box-shadow:0 5px 0 #a96a2c,0 10px 25px #0d062a66,inset 0 2px 0 #ffffffbd}
.cta.purple,.cta.blue,.cta.ghostbtn{background:linear-gradient(#9775e1,#6343b1);border:2px solid #c3a9ff;box-shadow:0 4px 0 #342065,0 10px 25px #0d062a66,inset 0 2px 0 #ffffff55}
.cta:hover{filter:brightness(1.06);transform:translateY(-3px)}
.cta:active{transform:translateY(2px)}
#lobby::after{background:linear-gradient(0deg,#130b34a6,#130b3466),radial-gradient(ellipse at center,transparent 20%,#08041d88 100%)}
.panel{width:min(900px,96vw);border-radius:32px;border:1.5px solid #b49ae680;background:linear-gradient(145deg,#38265ddf,#21163fe8);box-shadow:0 30px 85px #09041bc9,inset 0 2px 0 #ffffff20;backdrop-filter:blur(14px);gap:clamp(20px,3vw,42px);padding:clamp(22px,4vw,42px)}
.chip{font-family:var(--f-title);font-weight:600;letter-spacing:.1px;background:#241742c9;border:1px solid #a486e4aa;padding:9px 18px;color:#fff1dc}
.char{border-radius:24px;border:2px solid #7960af;background:linear-gradient(160deg,#4a337b,#241743);box-shadow:inset 0 2px 0 #ffffff1f,0 9px 18px #12082244;transition:transform .2s,border-color .2s,box-shadow .2s}
.char:hover{transform:translateY(-5px)}
.char span{font:650 23px var(--f-title)}
.char small{font:700 13px var(--f-body);color:#e3d3ff}
.char.boy.selected{border-color:#ffcf72;box-shadow:0 0 0 3px #ffbe502c,0 12px 30px #e99f3929}
.char.ghost.selected{border-color:#a6e8ff;box-shadow:0 0 0 3px #8adfff2b,0 12px 30px #7ec6fc31}
.divider{font:700 13px var(--f-body);text-transform:uppercase;letter-spacing:1px;color:#d0c1f5}
.join input{font:800 20px var(--f-title);letter-spacing:5px;border:2px solid #8065b2;background:#160e31d9}
.back-btn{font:650 16px var(--f-title);padding:11px 19px;background:#2b1b56d9;border-color:#aa8bea}
.howto-card,.pause-card{border-radius:28px;border:1.5px solid #b399e7;background:linear-gradient(160deg,#493373f7,#22153ff9);box-shadow:0 26px 75px #09051ac0}
.hero{border-radius:19px;border-color:#8e70bd;background:#251846bb}
.hero b{font:650 21px var(--f-title)}
.hero small,.howto-rules li,.howto-note{font-family:var(--f-body)}
.stage{border-radius:18px;border-color:#7656ae;box-shadow:0 23px 70px #09041bcc,0 0 36px #a87bff22}
.tool{background:#2e205bbd;border-color:#9474d0;font-family:var(--f-title);opacity:.95}
@media(max-width:700px){.title-actions{bottom:7vh}.panel{padding:20px 16px;border-radius:24px;overflow:auto}.char{width:min(42vw,165px)}.pick{gap:10px}}
@media(max-height:600px){.title-actions{bottom:14px;gap:7px}.title-actions .cta{min-height:42px}.panel{padding:14px}.char canvas{width:90px}}
@media(prefers-reduced-motion:reduce){.title-scene,.title-actions .cta,.title-art,.cta{animation:none!important;transition:none!important}}

/* V2 — substantial screen composition upgrade */
#title .title-edition{position:absolute;z-index:2;top:clamp(15px,3.5vh,40px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:9px 22px;border:1px solid #fff2cc65;border-radius:999px;background:#21153c99;backdrop-filter:blur(12px);font:800 clamp(11px,1vw,14px) var(--f-body);letter-spacing:2px;text-transform:uppercase;color:#ffe8b1;text-shadow:0 2px 10px #160b37}
#title .title-actions{width:min(340px,78vw);bottom:clamp(24px,5.8vh,68px);gap:11px}
#title .title-actions .cta{min-height:57px;border-radius:18px;box-shadow:0 5px 0 #402560,0 12px 28px #0a052b90}
#title .title-actions .cta.yellow{box-shadow:0 5px 0 #9d5a23,0 12px 32px #0a052b90,0 0 30px #ffd26133}
#title .title-footnote{margin:9px 0 0;text-align:center;color:#f9e4d9;font:800 12px var(--f-body);letter-spacing:1px;text-shadow:0 2px 8px #150928}
#title::after{background:linear-gradient(0deg,#110a2dc9 0%,#110a2d44 26%,transparent 55%),linear-gradient(90deg,#0e092c4d,transparent 45%,#0e092c22),radial-gradient(ellipse at center,transparent 43%,#08031e50)}
#lobby{background:radial-gradient(circle at 50% 15%,#573c87,#140c30 70%)}
#lobby .panel{width:min(990px,96vw);grid-template-columns:1fr 1fr;align-items:stretch;column-gap:clamp(25px,4vw,60px);row-gap:16px;padding:clamp(22px,3.4vw,42px);border-radius:32px;border:2px solid #c8a9ff72;background:linear-gradient(145deg,#39265eea,#1c1239f5);box-shadow:0 34px 100px #080319e8,inset 0 2px 0 #ffffff28}
.lobby-header{grid-column:1/-1;text-align:center;padding:0 0 18px;border-bottom:1px solid #b8a1e635}
.lobby-header .eyebrow{font:800 11px var(--f-body);letter-spacing:3px;color:#ffd884}
.lobby-header h2{font:650 clamp(27px,3.1vw,40px)/1.1 var(--f-title);color:#fff2d9;margin:9px 0 6px;text-shadow:0 3px 0 #382159}
.lobby-header p{font:600 14px var(--f-body);color:#d7c6f4;margin:0}
.lobby-sparkle{color:#ffd66e}
#lobby .col{justify-content:flex-start}
#lobby .col.left{padding:0 12px 0 0}
#lobby .col.right{padding:0 0 0 12px}
#lobby .col .chip{font-size:15px;padding:8px 16px;align-self:center;margin:0 0 19px;background:#51357e77}
#lobby .pick{width:100%;gap:14px}
#lobby .char{flex:1;width:auto;max-width:210px;min-width:0;padding:15px 8px 18px;border:2px solid #a17dd1;border-radius:24px;background:radial-gradient(circle at 50% 25%,#70519b8c,#271846 80%);box-shadow:inset 0 2px 0 #ffffff28,0 10px 24px #09041d77}
#lobby .char canvas{width:min(100%,155px);height:auto;filter:drop-shadow(0 9px 9px #08031a80)}
#lobby .char span{font:650 24px var(--f-title);margin-top:8px}
#lobby .char small{font:800 12px var(--f-body);letter-spacing:.3px}
#lobby .char.selected{transform:translateY(-5px)}
#lobby .char.boy.selected{background:radial-gradient(circle at 50% 22%,#a46b7e77,#38224e 80%);border-color:#ffd279}
#lobby .char.ghost.selected{background:radial-gradient(circle at 50% 22%,#76bbd477,#28204f 80%);border-color:#a7e6ff}
.mode-caption{font:800 12px var(--f-body);color:#e7d5ff;text-align:center;margin:-3px 0 12px;letter-spacing:.3px}
#lobby .col.right .cta{min-height:56px;border-radius:17px;font-size:21px}
#lobby .divider{margin:14px 0}
#lobby .divider.wide{margin:16px 0 12px}
#lobby .join{gap:8px}
#lobby .join input{height:54px;border-radius:16px;font-size:21px;letter-spacing:5px}
#lobby .join .cta{min-height:54px;width:auto;padding:8px 18px;font-size:18px}
#lobby .err{margin-top:10px}
#lobby .back-btn{top:20px;left:20px}
.howto-card{width:min(600px,95vw);padding:30px;gap:18px}
.howto-card .hero{padding:20px 10px;background:linear-gradient(150deg,#62458d66,#22153f);border-radius:20px}
.howto-card .hero img{height:90px}
.howto-rules li{padding:6px 0;border-bottom:1px solid #b69bdd25}
.pause-card{padding:28px}
#game{background:radial-gradient(ellipse at 50% 30%,#352357,#100a27 72%)}
#game .stage{border:4px solid #8d69c4;border-radius:20px;box-shadow:0 28px 90px #05020fc9,0 0 0 5px #33214e}
#game .tool{width:46px;height:46px;background:linear-gradient(160deg,#5a3f87,#2a1c4d);border:1.5px solid #aa89db;box-shadow:0 5px 16px #08031c77}
@media(max-width:760px){#lobby .panel{grid-template-columns:1fr;gap:12px;overflow:auto;max-height:calc(100dvh - 20px);padding:22px 16px}#lobby .col.left,#lobby .col.right{padding:0}#lobby .col .chip{margin-bottom:10px}#lobby .char{padding:5px 8px 10px}#lobby .char canvas{width:min(100%,105px)}#lobby .char span{font-size:20px;margin-top:2px}.lobby-header{padding-bottom:12px}.lobby-header h2{font-size:27px}#title .title-edition{font-size:9px;letter-spacing:1px;max-width:95vw}#lobby .col.right .cta{min-height:48px}#lobby .divider{margin:6px 0}#lobby .divider.wide{margin:7px 0}}
@media(max-height:640px) and (min-width:761px){#lobby .panel{padding:14px 30px;row-gap:8px}.lobby-header{padding-bottom:8px}.lobby-header h2{font-size:27px;margin:4px 0}.lobby-header p{font-size:12px}#lobby .col .chip{margin-bottom:9px}#lobby .char canvas{width:100px}#lobby .char{padding:5px}#lobby .col.right .cta{min-height:43px}#lobby .divider{margin:6px 0}}

/* V3 — quieter, immersive game menus */
#title .title-edition,#title .title-footnote,.lobby-header,.mode-caption{display:none!important}
#title .title-scene{inset:-2%;transform-origin:center;filter:saturate(1.04)}
#title .title-art{object-fit:cover;object-position:center 40%;filter:contrast(1.025)}
#title::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 80% 22%,#d2baff17,transparent 25%),linear-gradient(0deg,#0c0925b5,transparent 43%)}
#title .title-actions{bottom:clamp(32px,8vh,96px);width:min(295px,72vw);gap:12px}
#title .title-actions .cta{min-height:55px;border-radius:17px}
#lobby .panel{width:min(900px,90vw);grid-template-columns:1.04fr .96fr;gap:clamp(25px,4vw,55px);padding:clamp(28px,4vw,50px);border:1px solid #c3a3ef70;border-radius:30px;background:linear-gradient(130deg,#2c1b4dd9,#1d1438e3);box-shadow:0 25px 85px #0a041bb0;backdrop-filter:blur(20px)}
#lobby .col .chip{background:transparent;border:0;box-shadow:none;font:650 22px var(--f-title);color:#fff2db;padding:0;margin:0 0 22px}
#lobby .col .chip::before{content:none}
#lobby .char{background:linear-gradient(155deg,#58417873,#2a1b4880);border:1.5px solid #9e83c0a6;border-radius:22px;padding:12px 8px 16px;box-shadow:inset 0 1px 0 #ffffff26}
#lobby .char span{font-size:23px;margin-top:3px}
#lobby .char small{font-size:12px;color:#cdbfe6;opacity:.85}
#lobby .char.selected{transform:translateY(-3px)}
#lobby .col.right .cta{font-size:21px;min-height:56px}
#lobby .divider{font-size:12px;letter-spacing:1px;color:#b9a9d5;margin:13px 0}
#lobby .divider.wide{margin:16px 0 12px}
#lobby .back-btn{top:22px;left:22px}
#lobby::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 20%,#b58cfc20,transparent 32%),radial-gradient(circle at 88% 70%,#ffc07812,transparent 30%);z-index:0}
#lobby .panel::before{content:"";position:absolute;inset:-100px;pointer-events:none;background:radial-gradient(circle at 45% 20%,#ffffff09,transparent 55%);z-index:-1}
@media(max-width:760px){#lobby .panel{width:min(480px,96vw);grid-template-columns:1fr;padding:20px 18px;gap:16px}#lobby .col .chip{font-size:19px;margin-bottom:10px}#lobby .char{padding:6px 6px 10px}#lobby .char canvas{width:100px}#lobby .col.right .cta{min-height:46px}#lobby .divider{margin:6px 0}#lobby .divider.wide{margin:8px 0}#title .title-actions{bottom:6vh}}


/* GhostTown V4 — compact portrait-inspired menu. */
#title{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;padding:22px;background:radial-gradient(ellipse at 50% 36%,#37215f 0%,#20143f 45%,#100b29 100%);overflow:auto}
#title::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 16% 20%,#a88bfa12,transparent 30%),radial-gradient(circle at 85% 85%,#e5a7ff0d,transparent 28%);z-index:0}
#title::after{display:none}
#title .title-shell{position:relative;z-index:2;width:min(410px,100%);display:flex;flex-direction:column;align-items:center;gap:18px;animation:menu-arrive .6s ease-out both}
#title .game-logo{display:block;font:650 clamp(49px,8vw,72px)/1 var(--f-title);letter-spacing:-2px;margin:0 0 2px;text-align:center;background:none;color:#f5eaff;filter:drop-shadow(0 5px 0 #39215f) drop-shadow(0 8px 12px #0c0626);white-space:nowrap}
#title .game-logo::after{display:none}
#title .game-logo span{color:#f4eaff}
#title .game-logo em{font-style:normal;color:#ffcf79}
#title .title-scene{position:relative;inset:auto;display:block;transform:none!important;width:100%;aspect-ratio:1.62/1;overflow:hidden;border-radius:24px;background:linear-gradient(180deg,#38265e 0%,#60418b 54%,#44305e 100%);border:2px solid #a58bd0;box-shadow:0 16px 35px #0b062a99,inset 0 1px 0 #ffffff38;filter:none;transition:none;will-change:auto}
#title .title-moon{position:absolute;top:11%;right:17%;width:24%;aspect-ratio:1;border-radius:50%;background:#d7c7ff;box-shadow:0 0 0 12px #d4baff12,0 0 35px #dac7ff80}
#title .title-hills{position:absolute;left:-10%;width:120%;border-radius:50% 50% 0 0}
#title .title-hills.far{height:40%;bottom:18%;background:#392652;clip-path:polygon(0 80%,10% 50%,21% 70%,32% 25%,42% 55%,58% 35%,70% 70%,84% 30%,100% 75%,100% 100%,0 100%)}
#title .title-hills.near{height:24%;bottom:0;background:#2c1c48;clip-path:polygon(0 50%,12% 30%,25% 65%,41% 38%,54% 70%,68% 34%,80% 60%,100% 30%,100% 100%,0 100%)}
#title .title-houses{position:absolute;inset:0}
#title .title-houses i{position:absolute;bottom:21%;width:11%;height:23%;background:#322144;border-radius:3px 3px 0 0;box-shadow:inset 6px 0 0 #ffffff06}
#title .title-houses i::before{content:"";position:absolute;left:-18%;top:-31%;width:136%;height:40%;background:#322144;clip-path:polygon(50% 0,100% 100%,0 100%)}
#title .title-houses i::after{content:"";position:absolute;top:30%;left:40%;width:24%;height:22%;background:#ffd58b;box-shadow:0 0 12px #ffc96d90}
#title .title-houses i:nth-child(1){left:7%;height:16%;width:9%}
#title .title-houses i:nth-child(2){left:23%;height:28%;width:12%}
#title .title-houses i:nth-child(3){left:47%;height:20%;width:10%}
#title .title-houses i:nth-child(4){left:70%;height:32%;width:11%}
#title .title-houses i:nth-child(5){left:87%;height:20%;width:9%}
#title .title-ground{position:absolute;bottom:-9%;left:-5%;width:110%;height:24%;background:radial-gradient(ellipse at 50% 0%,#71539b,#2b1b4d 80%);border-radius:50%}
#title #title-fx{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
#title .title-actions{position:static;transform:none;display:flex;flex-direction:column;width:100%;gap:12px;max-width:340px;margin:3px auto 0}
#title .title-actions .cta{width:100%;border-radius:16px;min-height:55px;animation:none;font:650 23px var(--f-title)}
#title .title-actions .cta:nth-child(2){font:600 20px var(--f-title);min-height:50px}
#title #play-game::before{animation:none;display:none}
#title .title-actions .cta.yellow::after{display:none}
#title .title-actions .cta:focus-visible{outline:3px solid #fff3be}
#title .modal{position:fixed}
@keyframes menu-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:680px){#title .title-shell{width:min(330px,100%);gap:10px}#title .game-logo{font-size:49px}#title .title-actions{gap:8px}#title .title-actions .cta{min-height:45px;font-size:20px}#title .title-actions .cta:nth-child(2){min-height:42px}}
@media(max-width:450px){#title{padding:16px}#title .title-shell{gap:16px}#title .game-logo{font-size:clamp(45px,12vw,65px)}}
@media(prefers-reduced-motion:reduce){#title .title-shell{animation:none}}


/* V5: expressive logo, layered over the illustration instead of a plain heading */
#title .title-shell{gap:0;padding-top:0}
#title .game-logo{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;margin:0 0 -30px;font-family:'Chewy',var(--f-title);font-weight:400;letter-spacing:1px;line-height:.84;white-space:normal;transform:rotate(-2deg);pointer-events:none;filter:drop-shadow(0 5px 0 #39245e) drop-shadow(0 9px 11px #120925a6)}
#title .game-logo .logo-ghost{display:flex;align-items:center;justify-content:center;color:#f5e9ff;font-size:clamp(64px,13vw,88px);text-shadow:-2px -2px 0 #b99afa,2px 2px 0 #a47bd8,0 0 15px #c8a6ff7a}
#title .game-logo .logo-town{display:block;color:#ffdda2;font-size:clamp(61px,12vw,82px);margin-top:-4px;margin-left:54px;text-shadow:-2px -2px 0 #ffe9c2,2px 3px 0 #bb74ac,0 0 16px #ffb9a277}
#title .logo-ghost-icon{position:relative;display:inline-block;flex:none;width:.68em;height:.75em;margin:0 -.005em -.02em .01em;border-radius:50% 50% 17% 17%;background:linear-gradient(#fff,#e9d5ff);box-shadow:inset -5px -5px 0 #cfb1ed,0 0 9px #e6caff80;transform:rotate(3deg)}
#title .logo-ghost-icon::after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:25%;background:linear-gradient(135deg,transparent 22%,#e9d5ff 23% 45%,transparent 46% 54%,#e9d5ff 55% 78%,transparent 79%);border-radius:0 0 40% 40%}
#title .logo-ghost-icon i{position:absolute;top:37%;width:10%;height:16%;border-radius:50%;background:#51356e;z-index:1}
#title .logo-ghost-icon i:first-child{left:33%}
#title .logo-ghost-icon i:last-child{right:33%}
#title .title-scene{margin-top:0}
#title .title-actions{margin-top:24px}
@media(max-width:450px){#title .game-logo{margin-bottom:-23px}#title .game-logo .logo-ghost{font-size:clamp(55px,15vw,76px)}#title .game-logo .logo-town{font-size:clamp(52px,14vw,72px)}#title .title-actions{margin-top:20px}}
@media(max-height:680px){#title .game-logo .logo-ghost{font-size:54px}#title .game-logo .logo-town{font-size:51px}#title .game-logo{margin-bottom:-19px}#title .title-actions{margin-top:12px}}

/* V6 — quiet welcome line, subordinate to the game title */
#title .game-logo .logo-welcome{display:block;font:700 clamp(13px,2.6vw,17px)/1.1 var(--f-body);letter-spacing:4px;text-transform:uppercase;color:#f3dba7;text-shadow:0 2px 8px #1a0c39;transform:rotate(2deg);margin:0 0 13px;white-space:nowrap}
@media(max-height:680px){#title .game-logo .logo-welcome{font-size:12px;letter-spacing:3px;margin-bottom:8px}}


/* V7: restrained life and motion in the existing menu */
#title .title-shell{position:relative}
#title .menu-bat{position:absolute;z-index:8;top:clamp(20px,5vw,45px);right:-7px;width:46px;height:38px;pointer-events:none;transform-origin:50% 50%;animation:menu-bat-flight 9s ease-in-out infinite}
#title .menu-bat img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 4px #100729);animation:menu-bat-flap 1.3s ease-in-out infinite}
#title .title-moon{animation:menu-moon-glow 6s ease-in-out infinite}
#title .title-houses i::after{animation:menu-window-flicker 5.5s ease-in-out infinite}
#title .title-houses i:nth-child(2)::after{animation-delay:-1.7s}
#title .title-houses i:nth-child(4)::after{animation-delay:-3.2s}
#title .logo-ghost-icon{animation:menu-ghost-sway 4s ease-in-out infinite}
@keyframes menu-bat-flight{0%,100%{transform:translate(0,0) rotate(-7deg)}25%{transform:translate(-16px,-13px) rotate(6deg)}50%{transform:translate(-35px,0) rotate(-5deg)}75%{transform:translate(-18px,9px) rotate(5deg)}}
@keyframes menu-bat-flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.7)}}
@keyframes menu-moon-glow{0%,100%{box-shadow:0 0 0 12px #d4baff12,0 0 35px #dac7ff80}50%{box-shadow:0 0 0 15px #d4baff16,0 0 45px #dac7ff90}}
@keyframes menu-window-flicker{0%,100%{opacity:.88}46%,54%{opacity:1}50%{opacity:.7}}
@keyframes menu-ghost-sway{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-3px) rotate(-2deg)}}
@media(prefers-reduced-motion:reduce){#title .menu-bat,#title .menu-bat img,#title .title-moon,#title .title-houses i::after,#title .logo-ghost-icon{animation:none!important}}

/* Ensure the title actually disappears when Play Game switches to the lobby. */
#title[hidden]{display:none!important}


/* V9: legible arched welcome, a larger, more expressive title composition. */
#title .game-logo{padding-top:64px;margin-bottom:-36px;overflow:visible}
#title .game-logo .logo-welcome{position:absolute;top:1px;left:50%;width:295px;height:92px;margin:0;transform:translateX(-50%) rotate(-2deg);display:block;font:800 24px/1 'Fredoka',sans-serif;letter-spacing:0;color:#ffe2a1;text-transform:none;text-shadow:0 3px 0 #624078,0 5px 12px #100726}
#title .logo-welcome>span{position:absolute;left:calc(50% - 12px);top:0;width:24px;height:100%;text-align:center;transform-origin:50% 100%;padding-top:0}
#title .logo-welcome>span:nth-child(1){transform:rotate(-38deg)}
#title .logo-welcome>span:nth-child(2){transform:rotate(-30deg)}
#title .logo-welcome>span:nth-child(3){transform:rotate(-22deg)}
#title .logo-welcome>span:nth-child(4){transform:rotate(-14deg)}
#title .logo-welcome>span:nth-child(5){transform:rotate(-6deg)}
#title .logo-welcome>span:nth-child(6){transform:rotate(2deg)}
#title .logo-welcome>span:nth-child(7){transform:rotate(10deg)}
#title .logo-welcome>span:nth-child(8){display:none}
#title .logo-welcome>span:nth-child(9){transform:rotate(24deg)}
#title .logo-welcome>span:nth-child(10){transform:rotate(32deg)}
#title .game-logo .logo-ghost{font-size:clamp(72px,14vw,96px)}
#title .game-logo .logo-town{font-size:clamp(67px,13vw,89px)}
#title .menu-bat{top:35px;right:-28px;width:72px;height:55px;filter:drop-shadow(0 0 6px #c69dff55);animation-duration:7s}
#title .title-scene{border-color:#b89add;box-shadow:0 16px 38px #0b062a99,0 0 24px #a07aff22}
@media(max-width:450px){#title .game-logo{padding-top:58px;margin-bottom:-28px}#title .game-logo .logo-welcome{width:250px;height:78px;font-size:21px}#title .game-logo .logo-ghost{font-size:clamp(60px,16vw,78px)}#title .game-logo .logo-town{font-size:clamp(56px,15vw,73px)}#title .menu-bat{width:56px;height:43px;top:27px;right:-8px}}
@media(max-height:680px){#title .game-logo{padding-top:50px}#title .game-logo .logo-welcome{font-size:19px;height:72px}#title .menu-bat{width:50px;right:0}}


/* V10 — rebalance the title hierarchy based on the actual screenshot. */
#title .game-logo{padding-top:78px;margin-bottom:-23px}
#title .game-logo .logo-welcome{top:0;width:310px;height:106px;font-size:32px;line-height:1;letter-spacing:0}
#title .game-logo .logo-ghost{font-size:clamp(58px,10vw,74px)}
#title .game-logo .logo-town{font-size:clamp(55px,9.5vw,69px);margin-left:34px;margin-top:-3px}
#title .menu-bat{top:51px;right:4px;width:53px;height:42px}
@media(max-width:450px){#title .game-logo{padding-top:70px;margin-bottom:-19px}#title .game-logo .logo-welcome{top:0;width:270px;height:94px;font-size:27px}#title .game-logo .logo-ghost{font-size:clamp(54px,14vw,66px)}#title .game-logo .logo-town{font-size:clamp(51px,13vw,63px)}#title .menu-bat{top:45px;right:1px;width:45px;height:36px}}
@media(max-height:680px){#title .game-logo{padding-top:64px}#title .game-logo .logo-welcome{font-size:25px;height:88px}#title .game-logo .logo-ghost{font-size:56px}#title .game-logo .logo-town{font-size:53px}}


/* V11 — the ghost in the logo blinks both eyes together, with a quick double blink. */
#title .logo-ghost-icon i{transform-origin:center center;animation:ghost-eye-blink 6.8s infinite}
@keyframes ghost-eye-blink{
  0%,39%,42%,45%,100%{transform:scaleY(1)}
  40%,44%{transform:scaleY(.09)}
  41%,43%{transform:scaleY(1)}
}
@media(prefers-reduced-motion:reduce){#title .logo-ghost-icon i{animation:none!important}}


/* V12 — compact shallow arc, with lettering that belongs to the logo. */
#title .game-logo{padding-top:67px}
#title .game-logo .logo-welcome{top:13px;left:50%;width:230px;height:53px;font:800 27px/1 'Fredoka',sans-serif;transform:translateX(-50%) rotate(-5deg);text-shadow:0 2px 0 #69477d,0 4px 0 #44275f,0 6px 10px #100726}
#title .logo-welcome>span{left:auto;top:auto;width:27px;height:30px;transform-origin:center center;padding:0}
#title .logo-welcome>span:nth-child(1){left:0;top:21px;transform:rotate(-20deg)}
#title .logo-welcome>span:nth-child(2){left:23px;top:12px;transform:rotate(-15deg)}
#title .logo-welcome>span:nth-child(3){left:46px;top:6px;transform:rotate(-10deg)}
#title .logo-welcome>span:nth-child(4){left:67px;top:2px;transform:rotate(-5deg)}
#title .logo-welcome>span:nth-child(5){left:91px;top:0;transform:rotate(0deg)}
#title .logo-welcome>span:nth-child(6){left:117px;top:2px;transform:rotate(5deg)}
#title .logo-welcome>span:nth-child(7){left:144px;top:7px;transform:rotate(10deg)}
#title .logo-welcome>span:nth-child(8){display:none}
#title .logo-welcome>span:nth-child(9){left:182px;top:15px;transform:rotate(16deg)}
#title .logo-welcome>span:nth-child(10){left:207px;top:22px;transform:rotate(21deg)}
@media(max-width:450px){#title .game-logo{padding-top:62px}#title .game-logo .logo-welcome{top:12px;width:230px;height:53px;font-size:27px}}
@media(max-height:680px){#title .game-logo{padding-top:60px}#title .game-logo .logo-welcome{top:8px;font-size:26px;height:53px}}


/* V13: cohesive wordmark with real curved text; no per-letter spacing artifacts. */
#title .game-logo{padding-top:67px;margin-bottom:-23px}
#title .game-logo .logo-welcome{display:none}
#title .game-logo .logo-welcome-arc{position:absolute;display:block;top:0;left:50%;width:290px;height:82px;overflow:visible;transform:translateX(-50%) rotate(-3deg);filter:drop-shadow(0 3px 0 #56316d) drop-shadow(0 4px 5px #100726)}
#title .logo-welcome-arc text{fill:#ffdc89;font-family:'Fredoka',sans-serif;font-size:27px;font-weight:700;letter-spacing:2px}
#title .game-logo .logo-ghost{font-size:clamp(58px,10vw,74px)}
#title .game-logo .logo-town{font-size:clamp(55px,9.5vw,69px)}
#title .menu-stars{position:absolute;inset:-20px -30px auto;height:190px;z-index:1;pointer-events:none}
#title .menu-stars i{position:absolute;display:block;width:4px;height:4px;border-radius:50%;background:#ffe5a0;box-shadow:0 0 9px #ffe5a099;animation:menu-star-twinkle 5s ease-in-out infinite}
#title .menu-stars i:nth-child(1){left:9%;top:36%;width:8px;height:8px;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
#title .menu-stars i:nth-child(2){left:87%;top:14%;animation-delay:-2s}
#title .menu-stars i:nth-child(3){left:94%;top:72%;width:7px;height:7px;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation-delay:-3s}
#title .menu-stars i:nth-child(4){left:4%;top:90%;width:3px;height:3px;animation-delay:-1s}
#title .menu-stars i:nth-child(5){left:72%;top:5%;width:3px;height:3px;animation-delay:-4s}
#title .menu-stars i:nth-child(6){left:24%;top:6%;width:3px;height:3px;animation-delay:-2.7s}
@keyframes menu-star-twinkle{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.12)}}
@media(max-width:450px){#title .game-logo{padding-top:61px}#title .game-logo .logo-welcome-arc{width:255px;height:75px;top:0}#title .logo-welcome-arc text{font-size:27px}#title .menu-stars{inset:-10px -10px auto}}
@media(max-height:680px){#title .game-logo{padding-top:59px}#title .game-logo .logo-welcome-arc{height:70px;width:255px}#title .menu-stars{height:130px}}
@media(prefers-reduced-motion:reduce){#title .menu-stars i{animation:none!important}}


/* V14: slightly higher, fuller U-shaped welcome arc. */
#title .game-logo{padding-top:72px}
#title .game-logo .logo-welcome-arc{top:-13px;height:91px;width:290px;transform:translateX(-50%) rotate(-2deg)}
@media(max-width:450px){#title .game-logo{padding-top:67px}#title .game-logo .logo-welcome-arc{top:-11px;height:85px;width:255px}}
@media(max-height:680px){#title .game-logo{padding-top:64px}#title .game-logo .logo-welcome-arc{top:-9px;height:79px}}


/* V15 — invitation card: compact, centered, with readable URL and clear action. */
#game .share{position:absolute;left:50%;bottom:clamp(12px,4%,28px);transform:translateX(-50%);z-index:8;display:flex;flex-direction:column;align-items:stretch;gap:13px;width:min(510px,calc(100% - 28px));max-width:none;margin:0;padding:18px 20px;border:1.5px solid #aa89df;border-radius:20px;background:linear-gradient(150deg,#342355f7,#1d143af9);box-shadow:0 18px 48px #0a061bd9,0 0 0 3px #a77bff16;font-family:var(--f-body);color:#f8f0ff}
#game .share[hidden]{display:none!important}
#game .share-top{display:flex;align-items:center;gap:12px;min-width:0}
#game .share-icon{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:14px;background:#68479e;color:#ffe39a;font-size:24px}
#game .share-top>div{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
#game .share-top strong{font:700 21px/1.1 var(--f-title);color:#fff1dc}
#game .share-top small{font:600 12px/1.3 var(--f-body);color:#d6c7ed}
#game .share-room{flex:none;padding:7px 10px;border:1px solid #9477c4;border-radius:999px;background:#26183f;font:800 12px var(--f-body);color:#ffe0a0}
#game .share-bottom{display:flex;align-items:center;gap:9px;min-width:0}
#game .share code{display:block;flex:1;min-width:0;padding:12px;border:1px solid #5c4681;border-radius:10px;background:#140d2a;color:#e4d5ff;font:600 12px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:normal}
#game .share button{flex:none;min-height:43px;padding:10px 15px;border:1px solid #ffe7ac;border-radius:11px;background:linear-gradient(#ffe99e,#ffc65b);color:#38204f;font:800 14px var(--f-title);box-shadow:0 3px 0 #a46a30;cursor:pointer}
#game .share button:hover{filter:brightness(1.07)}
/* The how-to dialog must fit as a single page, including its action. */
#title #howto{position:fixed;inset:0;padding:clamp(8px,1.5vh,16px);overflow:hidden;z-index:20}
#title #howto .howto-card{box-sizing:border-box;width:min(670px,100%);max-height:calc(100dvh - 20px);height:auto;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(5px,1.3vh,11px);padding:clamp(12px,2.3vh,23px) clamp(14px,3vw,26px);border-radius:22px}
#title #howto .howto-card .chip{font-size:clamp(16px,2.7vh,20px);padding:7px 16px}
#title #howto .howto-heroes{gap:12px}
#title #howto .hero{gap:4px;padding:clamp(6px,1vh,10px) 7px;border-radius:16px}
#title #howto .hero img{height:clamp(48px,11vh,84px);max-width:100%;object-fit:contain}
#title #howto .hero b{font-size:clamp(17px,2.8vh,22px)}
#title #howto .hero small{font-size:clamp(11px,1.9vh,14px);line-height:1.25}
#title #howto .hero span{display:flex;gap:3px}
#title #howto kbd{font-size:clamp(10px,1.8vh,13px);padding:3px 6px}
#title #howto .howto-rules{gap:0}
#title #howto .howto-rules li{padding:clamp(3px,.8vh,7px) 0;gap:10px;font-size:clamp(12px,2vh,15px);line-height:1.3}
#title #howto .howto-rules .ic{width:42px}
#title #howto .howto-rules img{height:clamp(19px,3vh,25px)}
#title #howto .howto-note{font-size:clamp(11px,1.7vh,13px);line-height:1.25}
#title #howto #howto-close{width:min(240px,75%);min-height:clamp(36px,5vh,46px);font-size:clamp(16px,2.5vh,20px);padding:5px 12px;flex:none}
@media(max-height:650px){#title #howto .howto-card{gap:4px;padding:9px 15px}#title #howto .hero img{height:44px}#title #howto .hero{gap:2px;padding:5px}#title #howto .howto-rules li{padding:2px 0}#title #howto .howto-note{font-size:11px}}
@media(max-width:480px){#game .share{padding:13px;gap:10px}#game .share-room{font-size:10px;padding:6px}#game .share-top strong{font-size:17px}#game .share-bottom{flex-wrap:wrap}#game .share code{flex-basis:100%}#game .share button{width:100%}#title #howto .howto-card{padding:10px;gap:6px}#title #howto .howto-heroes{gap:6px}#title #howto .hero img{height:clamp(40px,9vh,65px)}#title #howto .hero small{font-size:11px}#title #howto .howto-rules li{font-size:12px}}


/* V16 — visually join the welcome arch to the main logo. */
#title .game-logo{padding-top:64px}
#title .game-logo .logo-welcome-arc{top:0;width:266px;height:76px;transform:translateX(-50%) rotate(-1deg)}
#title .logo-welcome-arc text{font-size:26px;letter-spacing:1px}
@media(max-width:450px){#title .game-logo{padding-top:60px}#title .game-logo .logo-welcome-arc{top:0;width:245px;height:70px}#title .logo-welcome-arc text{font-size:25px}}
@media(max-height:680px){#title .game-logo{padding-top:58px}#title .game-logo .logo-welcome-arc{top:0;width:242px;height:68px}}


/* V17 — minimal, deliberately narrow help and share surfaces. */
#title #howto .howto-card{width:min(530px,calc(100vw - 24px));padding:clamp(12px,2vh,20px);gap:clamp(6px,1.2vh,11px);background:#281a49f8;border:1.5px solid #9779c8;border-radius:20px;box-shadow:0 20px 65px #08051abf}
#title #howto .howto-card .chip{border:0;background:none;box-shadow:none;font-size:21px;padding:0;color:#ffe5b5}
#title #howto .howto-heroes{gap:10px}
#title #howto .hero{background:#3c2a60;border:1px solid #735796;padding:9px 6px;border-radius:13px}
#title #howto .hero img{height:clamp(45px,9vh,67px)}
#title #howto .hero b{font-size:18px}
#title #howto .hero small{font-size:12px;line-height:1.25}
#title #howto .howto-rules li{font-size:13px;padding:6px 0;border-bottom:1px solid #ad90cf24}
#title #howto .howto-rules .ic{width:34px}
#title #howto .howto-rules img{height:22px}
#title #howto .howto-note{font-size:11px;max-width:440px}
#title #howto #howto-close{width:180px;min-height:39px;padding:5px 12px;font-size:17px}
#game .share{width:min(440px,calc(100% - 30px));padding:14px 16px;gap:10px;border-radius:16px;border:1px solid #9573ca;background:#24183ef7;box-shadow:0 12px 38px #0a051ac0}
#game .share-top strong{font-size:18px}
#game .share-top small{font-size:12px}
#game .share-icon{width:34px;height:34px;font-size:20px;border-radius:10px}
#game .share-bottom{gap:8px}
#game .share code{padding:10px;font-size:11px}
#game .share button{min-height:39px;padding:8px 13px;font-size:13px}
@media(max-height:620px){#title #howto .howto-card{gap:4px;padding:9px}#title #howto .hero img{height:40px}#title #howto .hero{padding:4px}#title #howto .howto-rules li{padding:2px 0}#title #howto .howto-note{font-size:10px}}


/* V18 — minimal invite: one headline, room pill, compact copy row. */
#game .share{width:min(400px,calc(100% - 32px));padding:13px 15px;gap:10px;border:1px solid #8165b3;border-radius:14px;background:#211638f2;box-shadow:0 10px 28px #0a061a99}
#game .share-top{gap:9px}
#game .share-icon{display:none}
#game .share-top strong{font:700 17px/1.2 var(--f-title);color:#fff0dc}
#game .share-top small{display:none}
#game .share-room{padding:5px 9px;font-size:11px;background:#35234f;border-color:#745b9f}
#game .share-bottom{gap:7px}
#game .share code{padding:10px 11px;border:1px solid #4d3a70;border-radius:9px;background:#140e27;color:#cfc0e6;font-size:11px;font-weight:500}
#game .share button{min-height:38px;padding:8px 12px;border:0;border-radius:9px;background:#b18af9;box-shadow:none;color:#1e1235;font:700 13px var(--f-title)}
#game .share button:hover{background:#c6a7ff}
@media(max-width:480px){#game .share{padding:12px}#game .share-bottom{flex-wrap:nowrap}#game .share code{flex-basis:auto}#game .share button{width:auto;white-space:nowrap}}


/* V19: move invitation into the scene, closer to visual center. */
#game .share{bottom:clamp(60px,15%,130px);width:min(390px,calc(100% - 28px));padding:14px 15px;border-radius:15px;background:#211637f5}
#game .share-top{justify-content:space-between}
#game .share-top strong{font-size:17px}
#game .share-room{font-size:11px}
#game .share-bottom{align-items:stretch}
#game .share code{align-content:center}
#game .share button{min-width:91px;min-height:40px;transition:background .15s ease}
#game .share button:focus-visible{outline:2px solid #ffe5a0;outline-offset:3px}
@media(max-height:600px){#game .share{bottom:8%;padding:10px 12px;gap:7px}}


/* V20 — prevent the invite card from overflowing or clipping on narrow screens. */
#game .share{box-sizing:border-box;position:fixed;left:50%;right:auto;bottom:clamp(16px,10dvh,110px);transform:translateX(-50%);width:min(390px,calc(100vw - 32px));max-width:calc(100vw - 32px);min-width:0;display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;overflow:hidden;z-index:30}
#game .share-top,#game .share-bottom{box-sizing:border-box;width:100%;min-width:0;max-width:100%;display:flex;flex-wrap:nowrap;align-items:center}
#game .share-top>div{min-width:0;flex:1}
#game .share-room{flex:0 0 auto;max-width:44%;white-space:nowrap}
#game .share code{box-sizing:border-box;display:block;flex:1 1 0;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#game .share button{box-sizing:border-box;display:block;flex:0 0 auto;width:auto;max-width:45%;white-space:nowrap;padding:9px 12px;font-size:12px}
@media(max-width:380px){#game .share{width:calc(100vw - 20px);max-width:calc(100vw - 20px);padding:11px}#game .share-top strong{font-size:15px}#game .share-room{font-size:10px}#game .share button{min-width:76px;padding:8px;font-size:11px}}


/* V21: invite is a direct child of #game, outside .stage overflow:hidden. */
#game>.share{position:fixed;left:50%;right:auto;top:auto;bottom:clamp(22px,13dvh,140px);transform:translateX(-50%);z-index:50;width:min(390px,calc(100vw - 32px));max-width:calc(100vw - 32px);overflow:hidden;box-sizing:border-box}
#game>.share[hidden]{display:none!important}
@media(max-height:650px){#game>.share{bottom:18px}}


/* V22: invite card sits right under the "Waiting for a friend…" line (centre of the game). */
#game>.share{top:calc(50dvh - 30px);bottom:auto}
@media(max-height:650px){#game>.share{top:calc(50dvh - 40px);bottom:auto}}

/* V23: party-game style waiting screen: big room code tiles, then a slim invite card. */
#game>.share{width:min(400px,calc(100vw - 32px));padding:0;gap:18px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;align-items:center}
#game .share-code{display:flex;flex-direction:column;align-items:center;gap:9px}
#game .share-code small{font:800 11px/1 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:#bba6e3}
#game .share-tiles{display:flex;gap:9px}
#game .share-tiles b{width:50px;height:58px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(#fff6e4,#ffe2a8);color:#2b1748;font:700 34px/1 var(--f-title);box-shadow:0 4px 0 #b9823a,0 12px 26px #07031599;animation:tileIn .45s cubic-bezier(.2,1.4,.4,1) both}
#game .share-tiles b:nth-child(2){animation-delay:.06s}#game .share-tiles b:nth-child(3){animation-delay:.12s}#game .share-tiles b:nth-child(4){animation-delay:.18s}
@keyframes tileIn{from{opacity:0;transform:translateY(10px) scale(.85)}}
#game .share-card{box-sizing:border-box;width:100%;display:flex;flex-direction:column;gap:10px;padding:13px 14px;border:1px solid #7a5fab;border-radius:14px;background:#1f1535f2;box-shadow:0 10px 28px #0a061a99}
#game .share-card small{font:600 12.5px/1.4 var(--f-body);color:#cbbbe8;text-align:center}
#game .share-card em{font-style:normal;color:#ffe0a0;font-weight:700}
@media(max-height:650px){#game>.share{gap:12px}#game .share-tiles b{width:42px;height:48px;font-size:28px}}
@media(prefers-reduced-motion:reduce){#game .share-tiles b{animation:none}}

/* V24: even rhythm: title -> code -> card */
#game>.share{gap:28px}
#game .share-code{gap:10px}
#game .share-card{gap:12px;padding:14px 16px 16px}
@media(max-height:650px){#game>.share{gap:18px}}

/* V25: more air between the code tiles and the invite card */
#game .share-card{margin-top:14px}
@media(max-height:650px){#game .share-card{margin-top:10px}}

/* V26: wider invite card so the full link fits */
#game>.share{width:min(530px,calc(100vw - 32px))}