:root{--pink:#ff68ae;--purple:#7654bb;--cream:#fff8e9}*{box-sizing:border-box}body{min-height:100vh}.dg-nav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:10px;background:#fff9;position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}.dg-nav button,.dg-button{border:0;border-radius:18px;padding:12px 16px;font-weight:850;font-size:16px;background:#fff;color:#704e9c;box-shadow:0 4px 0 #dbc4ef;cursor:pointer}.dg-nav button[aria-current=page],.dg-button.primary{background:#875bd1;color:white}.dg-screen{max-width:940px;margin:18px auto;padding:26px 18px;border-radius:30px;background:linear-gradient(130deg,#ffe2f1,#fff3c6,#d7f1ff);border:6px solid white;box-shadow:0 12px 28px #8555a933}.dg-screen h2{font-size:clamp(28px,6vw,50px);margin:10px 0}.dg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:22px auto}.dg-tile{background:#fffdf7;border:4px solid white;border-radius:24px;padding:22px 12px;font-weight:850;font-size:20px;box-shadow:0 6px 0 #e8c5df}.dg-tile span{display:block;font-size:44px;margin-bottom:10px}.dg-screen[hidden],.dg-game[hidden]{display:none!important}.dg-settings{display:grid;gap:14px;max-width:380px;margin:auto;text-align:left}.dg-settings label{background:#fff9;padding:14px;border-radius:16px;font-weight:700}.dg-settings input{width:24px;height:24px;vertical-align:middle}.dg-note{font-size:15px;opacity:.8}.dg-character-slot{min-height:140px;display:grid;place-items:center;border:3px dashed #d9b6df;border-radius:20px;background:#fff9}.dg-character-slot img{width:100%;max-width:180px;height:180px;object-fit:contain}.dg-character-slot small{display:block}.dg-game .chooser{margin-top:15px}@media(max-width:480px){.dg-screen{margin:10px;padding:14px 10px}.dg-nav button{font-size:14px;padding:10px}.dg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}\n.dg-nav .avatar{position:static;flex:0 0 54px;width:54px;height:54px;font-size:25px;margin-right:6px}.dg-nav .avatar img{width:100%;height:100%;object-fit:cover}\n

/* Dani's Games immersive visual system */
:root{--dg-pink:#ff58ad;--dg-purple:#8637be;--dg-yellow:#ffcf3d;--dg-green:#61ce23}
body{background:#ffddf0 url('./homepage%202.png') center center/cover fixed no-repeat!important;color:#653873}
.dg-nav{background:linear-gradient(90deg,#ffe4f5f2,#fff1bff2,#e6d4fff2);border-bottom:4px solid white;box-shadow:0 5px 20px #9e4a9a44;gap:8px}
.dg-nav button{border:3px solid white;border-radius:22px;background:linear-gradient(#fff,#ffe9f9);box-shadow:0 5px 0 #c99edc,0 8px 12px #803d8a2a;font-size:15px;color:#713394}
.dg-nav button[aria-current=page]{background:linear-gradient(#b779f2,#873bd2);box-shadow:0 5px 0 #5d239b;color:white}
.dg-screen{position:relative;overflow:hidden;text-align:center;max-width:1080px;margin:18px auto;padding:26px 26px 35px;border:7px solid #fff;background:linear-gradient(120deg,#ffd5e9b8,#fff0c5ad,#d8bdf6ad);box-shadow:0 18px 45px #8e4b7c55, inset 0 0 30px #ffffff66;min-height:570px}
.dg-sparkle{font-size:30px;filter:drop-shadow(0 2px white)}
.dg-screen .dg-game-title{font-family:ui-rounded,system-ui,sans-serif;font-weight:1000;font-size:clamp(39px,7.5vw,88px);line-height:.98;letter-spacing:-2px;color:#f858b3;-webkit-text-stroke:2px #7b249f;text-shadow:0 4px 0 white,0 8px 0 #71318f,0 12px 15px #7d337a77;margin:8px 0 18px}
.dg-game-title em{font-style:normal;color:#ffc83b;-webkit-text-stroke:2px #8c36ac}
.dg-subtitle,.dg-selected-kitty{font-size:clamp(19px,3vw,26px);font-weight:900;color:#78388e;text-shadow:0 2px white}
.dg-hero-choices{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end;max-width:930px;margin:15px auto}
.dg-hero-choice{border:0;background:transparent;cursor:pointer;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;transition:transform .18s;filter:drop-shadow(0 12px 10px #8d49714d)}
.dg-hero-choice img{display:block;width:100%;max-width:350px;height:clamp(170px,32vw,350px);object-fit:contain;animation:dg-float 2.5s ease-in-out infinite}
.dg-hero-choice:nth-child(2) img{animation-delay:-1.2s}
.dg-hero-choice strong{display:block;width:100%;max-width:385px;border:5px solid white;border-radius:50px;padding:13px 7px;font-size:clamp(14px,2.7vw,27px);font-weight:1000;color:white;text-shadow:0 3px #a62d67;background:linear-gradient(#ff99c6,#ff4ca3 65%,#dc2580);box-shadow:0 6px 0 #b52d79,0 9px 14px #7e3c7650}
.dg-hero-choice:nth-child(2) strong{background:linear-gradient(#ffe78d,#ffbc29 65%,#f09b10);box-shadow:0 6px 0 #c87c15,0 9px 14px #7e3c7650;text-shadow:0 3px #9e6512}
.dg-hero-choice[aria-pressed=true]{transform:translateY(-7px) scale(1.025)}
.dg-hero-choice[aria-pressed=true] strong{outline:5px solid #8fea51;outline-offset:3px}
.dg-big-play,.dg-home-actions .dg-button{border:6px solid white;border-radius:55px;background:linear-gradient(#a5fa47 0%,#60d51e 45%,#28b319 100%);color:white;font-size:clamp(23px,4vw,40px);font-weight:1000;text-shadow:0 3px #258b17;box-shadow:0 8px 0 #289b1b,0 14px 22px #48763266;padding:14px 36px;margin:14px 6px;cursor:pointer}
.dg-home-heroes{display:flex;justify-content:center;align-items:end;gap:12px}
.dg-home-heroes img{width:45%;max-width:320px;height:clamp(160px,29vw,310px);object-fit:contain;filter:drop-shadow(0 12px 9px #98577866);animation:dg-float 2.7s ease-in-out infinite}
.dg-home-heroes img:nth-child(2){animation-delay:-1.2s}
.dg-home-actions{display:flex;justify-content:center;flex-wrap:wrap}
.dg-home-actions .dg-button{font-size:clamp(17px,3vw,25px);padding:13px 20px}
.dg-home-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:650px;margin:25px auto 0}
.dg-home-more .dg-tile,.dg-screen .dg-tile{border:4px solid white;border-radius:28px;background:linear-gradient(130deg,#fff9f7ed,#ffe6f8e8);box-shadow:0 7px 0 #d995d4,0 11px 18px #7f498038}
.dg-screen:not(:has(.dg-game-title)) .dg-button.primary{background:linear-gradient(#b97bf1,#813cbe);border:3px solid white;box-shadow:0 5px 0 #65299a}
.dg-game .chooser{background:linear-gradient(130deg,#ffd7eff0,#fff4bce8,#e2d4ffec)}
.dg-game .room{border:8px solid white;box-shadow:0 12px 25px #85509166}
@keyframes dg-float{50%{transform:translateY(-12px) rotate(2deg)}}
@media(max-width:600px){body{background-attachment:scroll!important}.dg-screen{margin:10px;padding:16px 10px 24px;min-height:480px}.dg-hero-choices{gap:5px}.dg-hero-choice img{height:clamp(155px,45vw,250px)}.dg-hero-choice strong{padding:9px 4px;border-width:3px}.dg-nav{gap:5px}.dg-nav button{font-size:12px;padding:8px 9px}.dg-game-title{letter-spacing:-1px!important}.dg-big-play{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.dg-hero-choice img,.dg-home-heroes img{animation:none}}


/* Layout corrections: one hero image, one selection, one playroom */
body{background:#ffe6f2!important}
.dg-screen{background:linear-gradient(130deg,#ffe7f4,#fff5da,#e4f0ff);max-width:1080px}
.dg-screen:has(.dg-home-poster){padding:0 0 24px;background:linear-gradient(#fff4fc,#fff0d7)}
.dg-home-poster{position:relative;width:100%;aspect-ratio:3/2;background:url('./homepage%202.png') center/contain no-repeat;border-radius:25px;overflow:hidden}
.dg-home-hotspots{position:absolute;bottom:3%;left:0;right:0;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:0 10px}
.dg-home-hotspots button{font-weight:1000;color:white;text-shadow:0 2px #287e1b;border:4px solid white;border-radius:40px;background:linear-gradient(#a3f455,#54c924,#2eae17);padding:12px 19px;box-shadow:0 5px 0 #238c20;cursor:pointer;font-size:clamp(14px,2.5vw,23px)}
.dg-home-hotspots button:first-child{background:linear-gradient(#ff9bd2,#ef4fa6,#cc2c8a);box-shadow:0 5px 0 #a92577;text-shadow:0 2px #a92577}
.dg-home-more{padding:10px 18px 0}
.dg-game .room{background:linear-gradient(180deg,#e8f7ff 0%,#ffeff9 60%,#ffe5b2 100%)!important;max-width:880px;margin:20px auto;min-height:460px}
.dg-game .chooser{display:none!important}
.dg-game{max-width:100%;margin:auto;text-align:center}
.dg-game .room .playkitty{z-index:2}
.dg-nav .avatar{position:relative!important;top:auto!important;left:auto!important;display:flex;align-items:center;justify-content:center;flex:0 0 58px!important;width:58px!important;height:58px!important;border:3px solid #fff!important;border-radius:18px!important;background:linear-gradient(#ffe1f2,#e3d4ff)!important;overflow:hidden!important;padding:0!important;box-shadow:0 4px 0 #d4b4e8!important}
.dg-nav .avatar img{display:block;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;border-radius:13px}
@media(max-width:600px){.dg-home-poster{aspect-ratio:4/5;background-size:cover;background-position:center}.dg-home-hotspots{bottom:3%}.dg-home-hotspots button{padding:9px 12px;font-size:13px}.dg-game .room{min-height:390px}.dg-nav .avatar{flex-basis:48px!important;width:48px!important;height:48px!important}}


/* Home, profile and sound toys */
.dg-nav{justify-content:center;align-items:center;padding-right:10px}
.dg-nav #avatar{margin-left:auto!important;margin-right:0!important;order:20;cursor:default!important;pointer-events:none}
#dg-edit-avatar{order:21;border:3px solid white;border-radius:50%;background:#ffbde5;color:#70317f;font-size:18px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;margin-left:-21px;margin-top:37px;z-index:2;box-shadow:0 3px 0 #bf83bc;padding:0}
.dg-welcome-title{font-family:ui-rounded,system-ui,sans-serif;font-size:clamp(25px,4.4vw,48px)!important;color:#ff54a9;text-shadow:0 3px white,0 5px #833bb1;-webkit-text-stroke:1px #8d3da4;margin:20px 8px!important}
.dg-screen:has(.dg-home-poster){padding-top:4px}
.dg-mini-link{display:inline-block;margin:16px auto;padding:16px 23px;border:4px solid white;border-radius:26px;background:linear-gradient(#ffdc8e,#ffb43e);box-shadow:0 6px 0 #d28b20;color:#704088;font-size:clamp(17px,3vw,23px);font-weight:1000;text-decoration:none}
#dg-sound-toys{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:18px auto;max-width:850px}
#dg-sound-toys button{font:inherit;font-size:clamp(15px,2.7vw,20px);font-weight:900;background:linear-gradient(#ffe1f5,#fbb3e2);border:3px solid white;color:#693b7c;border-radius:20px;padding:12px;box-shadow:0 5px 0 #d7a3d6;cursor:pointer}
@media(max-width:600px){.dg-nav{justify-content:flex-start}.dg-nav #avatar{flex-basis:42px!important;width:42px!important;height:42px!important}#dg-edit-avatar{width:30px;height:30px;margin-left:-18px;margin-top:29px}}

/* Wonderverse milestone: tactile cards and character guide on home */
.dg-tile,.dg-hero-choice,.dg-nav button,.dg-button,.dg-big-play{transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
@media(hover:hover){.dg-tile:hover,.dg-hero-choice:hover,.dg-nav button:hover,.dg-button:hover{transform:translateY(-5px);box-shadow:0 12px 0 #d6a5e3,0 18px 22px #784aa644;filter:saturate(1.08)}}
.dg-tile:active,.dg-hero-choice:active,.dg-nav button:active{transform:translateY(2px)}
.dg-home-guide{display:flex;align-items:center;justify-content:center;gap:15px;background:#fff9;border:5px solid white;border-radius:28px;padding:12px;margin:18px auto;box-shadow:0 10px 0 #d8b5e6,0 15px 25px #8c5f9a44}.dg-home-guide img{width:clamp(90px,17vw,160px);height:clamp(95px,18vw,170px);object-fit:contain;filter:drop-shadow(0 7px 4px #aa79a355);animation:dgWiggle 3s ease-in-out infinite}.dg-home-guide p{font-size:clamp(19px,3vw,26px);font-weight:900;color:#8742a4}.dg-home-guide button{background:#aa54d7;border:3px solid white;border-radius:17px;padding:12px;color:white;font-weight:900;font-size:17px;cursor:pointer}@keyframes dgWiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg) translateY(-6px)}}@media(prefers-reduced-motion:reduce){.dg-home-guide img{animation:none}}@media(max-width:550px){.dg-home-guide{flex-wrap:wrap}.dg-home-guide img{width:90px;height:95px}.dg-home-guide p{font-size:18px}}