:root{--ink:#301557;--purple:#6d35e8;--deep:#452092;--orange:#ff9d2e;--lime:#c9f24b;--pink:#ff6ca8;--mint:#79e6c3;--cream:#fff7dc;--card:#fffdf5;--red:#e74162;--green:#22a874;--shadow:0 10px 0 rgba(48,21,87,.18),0 22px 48px rgba(48,21,87,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:280px;background:radial-gradient(circle at 10% 4%,#c9f24b 0 3px,transparent 4px),radial-gradient(circle at 88% 8%,#ff9d2e 0 4px,transparent 5px),linear-gradient(180deg,#7b42ee 0 420px,#fff2c8 420px 100%);color:var(--ink);font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif}.skip{position:fixed;top:-5rem;left:1rem;z-index:99;background:white;border:3px solid var(--ink);border-radius:12px;padding:.7rem 1rem}.skip:focus{top:1rem}.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.sky-decor{position:absolute;inset:95px 4% auto;display:flex;justify-content:space-between;color:#fff;opacity:.42;font-size:1.4rem;pointer-events:none}.sky-decor span:nth-child(2){color:var(--lime);transform:translateY(90px)}.sky-decor span:nth-child(3){color:var(--orange);transform:translateY(160px)}
header{max-width:1240px;height:94px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;color:#fff}.brand{display:flex;align-items:center;gap:.85rem;color:inherit;text-decoration:none}.brand-icon{display:grid;place-items:center;width:56px;height:56px;background:var(--orange);border:3px solid var(--ink);border-radius:20px 14px 19px 13px;box-shadow:4px 5px 0 var(--ink);font-size:1.7rem;transform:rotate(-4deg)}.brand b{font-size:.82rem;line-height:1;letter-spacing:.16em}.brand small{display:block;margin-top:.32rem;font-size:.7rem;color:#eee5ff}.head-actions{display:flex;gap:.6rem}.pill{min-height:42px;padding:.55rem .9rem;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-weight:900;cursor:pointer}
main{max-width:1240px;margin:auto;padding:28px 24px 70px}.hero{min-height:300px;display:grid;grid-template-columns:1fr 380px;align-items:center;gap:35px;color:#fff}.eyebrow{margin:0 0 .65rem;font-size:.7rem;line-height:1.2;letter-spacing:.16em;font-weight:900;color:#6b2cd7}.hero .eyebrow{color:var(--lime)}h1{margin:0;font-size:clamp(3rem,7vw,6.5rem);line-height:.82;letter-spacing:-.07em;text-shadow:5px 6px 0 var(--ink)}h1 .outline{color:var(--orange);-webkit-text-stroke:2px var(--ink)}.intro{max-width:700px;margin:1.5rem 0 0;font-size:clamp(1rem,1.8vw,1.22rem);font-weight:700;line-height:1.55;color:#f6efff}.moon-scene{position:relative;height:260px}.moon{position:absolute;right:40px;top:10px;width:210px;height:210px;border:4px solid var(--ink);border-radius:50%;background:#fff3b1;box-shadow:10px 10px 0 rgba(48,21,87,.55),inset -22px -16px 0 #ffd66d}.moon span{position:absolute;right:28px;top:10px;font-size:5rem;color:#6d35e8;transform:rotate(-15deg)}.tower{position:absolute;right:84px;bottom:-12px;width:125px;height:145px;background:var(--ink);clip-path:polygon(0 18%,12% 18%,12% 0,30% 18%,48% 18%,48% 0,64% 18%,82% 18%,82% 0,100% 18%,92% 100%,8% 100%)}.tower i{position:absolute;width:17px;height:26px;background:#ffde57;border-radius:9px 9px 3px 3px;box-shadow:0 0 16px #ffde57}.tower i:nth-child(1){left:25px;top:65px}.tower i:nth-child(2){right:25px;top:65px}.tower i:nth-child(3){left:54px;top:100px}.bat{position:absolute;color:var(--ink);font-size:1.4rem;animation:fly 3s ease-in-out infinite}.bat::before,.bat::after{content:"";position:absolute;top:2px;width:22px;height:12px;background:var(--ink);border-radius:90% 20%;}.bat::before{right:12px;transform:rotate(25deg)}.bat::after{left:12px;transform:rotate(-25deg)}.bat-a{left:40px;top:70px}.bat-b{left:120px;top:25px;animation-delay:-1.2s;transform:scale(.7)}
.score-strip{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr) auto;gap:12px;background:var(--card);border:4px solid var(--ink);border-radius:28px;padding:14px;box-shadow:var(--shadow);margin-bottom:30px}.score-strip article{min-height:84px;border:2px solid #dcccf6;border-radius:18px;padding:12px 16px;display:flex;align-items:center;gap:13px;background:#fff}.score-strip small{display:block;font-size:.62rem;letter-spacing:.1em;font-weight:900;color:#775b91}.score-strip strong{display:block;font-size:2rem;line-height:1;margin-top:.22rem;font-variant-numeric:tabular-nums}.score-icon{display:grid;place-items:center;width:48px;height:48px;border:2px solid var(--ink);border-radius:15px;background:var(--orange);font-size:1.4rem;box-shadow:3px 3px 0 var(--ink)}.score-icon.key{background:var(--lime);transform:rotate(-5deg)}.score-icon.door-icon{background:var(--mint);transform:rotate(4deg)}.restart{min-width:145px;border:3px solid var(--ink);border-radius:18px;background:var(--pink);color:#fff;box-shadow:4px 4px 0 var(--ink);font-weight:900;font-size:.95rem;cursor:pointer}.restart span:first-child{font-size:1.3rem;margin-right:.35rem}
.game-card,.history-card{background:var(--card);border:4px solid var(--ink);border-radius:34px;box-shadow:var(--shadow)}.game-card{padding:30px}.game-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:24px}.game-head h2,.history-title h2{margin:0;font-size:clamp(1.55rem,3vw,2.25rem);letter-spacing:-.035em}.game-head>p{max-width:460px;margin:0;color:#6e5c7c;line-height:1.5;font-size:.9rem}.door-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.door-card{position:relative;min-height:270px;border:0;background:none;padding:0;perspective:900px;cursor:pointer}.door-card:disabled{cursor:default}.door-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.8,.2,1)}.door-card.opened .door-inner{transform:rotateY(180deg)}.door-front,.door-back{position:absolute;inset:0;backface-visibility:hidden;border:3px solid var(--ink);border-radius:24px;overflow:hidden;box-shadow:5px 6px 0 var(--ink)}.door-front{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:linear-gradient(145deg,var(--door-light),var(--door-dark));isolation:isolate}.door-front::before{content:"";position:absolute;inset:13px;border:3px dashed rgba(255,255,255,.5);border-radius:17px}.door-front::after{content:"";position:absolute;width:90px;height:90px;right:-30px;top:-25px;border-radius:50%;background:rgba(255,255,255,.18)}.door-number{font-size:4.4rem;line-height:1;font-weight:900;text-shadow:3px 4px 0 rgba(48,21,87,.5)}.door-label{font-size:.65rem;letter-spacing:.16em;font-weight:900;margin-top:.55rem}.knob{position:absolute;right:28px;top:50%;width:18px;height:18px;border:3px solid var(--ink);border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(255,255,255,.35)}.door-card:not(:disabled):hover .door-front{transform:translateY(-5px) rotate(-1deg);filter:brightness(1.08)}.door-card:not(:disabled):hover .door-number{animation:boo .7s ease-in-out infinite alternate}.door-back{transform:rotateY(180deg);background:#fff5cd;padding:15px;display:flex;flex-direction:column;align-items:center;justify-content:center}.door-back img{width:126px;height:126px;object-fit:contain;filter:drop-shadow(0 7px 0 rgba(48,21,87,.13))}.door-back b{font-size:1rem;margin-top:.35rem}.mini-result{margin-top:.45rem;padding:.28rem .65rem;border:2px solid var(--ink);border-radius:999px;font-weight:900;font-size:.8rem;background:#fff}.mini-result.positive{color:#08764f;background:#c9ffe8}.mini-result.negative{color:#b51f42;background:#ffd6df}.mini-result.extra{color:#5b22cb;background:#e8ddff}.game-message{min-height:28px;margin-top:24px;text-align:center;font-weight:900;color:#6d35e8}
.history-card{margin-top:28px;padding:28px}.history-title{display:flex;align-items:center;justify-content:space-between}.history-count{border:2px solid var(--ink);border-radius:999px;background:var(--lime);padding:.55rem .9rem;font-size:.75rem;font-weight:900}.empty{text-align:center;padding:34px 15px 24px;color:#7a6988}.empty span{font-size:2rem}.history-list{display:grid;gap:9px;margin-top:20px}.history-row{display:grid;grid-template-columns:42px 50px 1fr auto auto;align-items:center;gap:12px;border:2px solid #e3d8ef;border-radius:16px;padding:10px 14px;background:#fff}.history-row .order{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#efe8ff;font-weight:900}.history-row img{width:46px;height:46px}.history-row b{display:block}.history-row small{color:#806e8e}.history-row .delta{font-size:1.05rem;font-weight:900;padding:.25rem .55rem;border-radius:9px}.history-row .delta.positive{color:var(--green);background:#dcfff0}.history-row .delta.negative{color:var(--red);background:#ffe2e7}.history-row .delta.extra{color:var(--purple);background:#eee6ff}.history-row .running-total{font-size:.75rem;color:#725c84;white-space:nowrap}
footer{max-width:1240px;margin:0 auto;padding:30px 24px 45px;display:flex;justify-content:space-between;gap:30px;color:#735f7f;font-size:.72rem;line-height:1.5}footer p{max-width:540px}.reveal-dialog,.confirm-dialog,.finish-dialog{width:min(92vw,460px);border:4px solid var(--ink);border-radius:30px;background:#fff9df;color:var(--ink);box-shadow:9px 10px 0 var(--ink),0 30px 80px rgba(31,12,61,.42);text-align:center;padding:28px}.reveal-dialog::backdrop,.confirm-dialog::backdrop,.finish-dialog::backdrop{background:rgba(41,15,77,.72);backdrop-filter:blur(4px)}.reveal-dialog[open]{animation:dialogPop .45s cubic-bezier(.2,1.5,.4,1)}.reveal-dialog img{width:180px;height:180px;filter:drop-shadow(0 10px 0 rgba(48,21,87,.14))}.reveal-dialog h2,.confirm-dialog h2,.finish-dialog h2{font-size:2rem;margin:.2rem 0}.reveal-stars{color:var(--orange);font-size:1.4rem;letter-spacing:.5rem;animation:twinkle 1s ease-in-out infinite alternate}.result-badge{display:inline-block;margin:.5rem 0;padding:.4rem 1rem;border:3px solid var(--ink);border-radius:999px;font-size:1.5rem;font-weight:900;box-shadow:3px 3px 0 var(--ink)}.result-badge.positive{background:#b9ffd9;color:#08764f}.result-badge.negative{background:#ffd1db;color:#b51f42}.result-badge.extra{background:#e5d8ff;color:#5b22cb}.continue{min-height:48px;border:3px solid var(--ink);border-radius:15px;background:var(--purple);color:white;padding:.65rem 1.2rem;box-shadow:4px 4px 0 var(--ink);font-weight:900;cursor:pointer}.confirm-icon,.trophy{font-size:3rem}.confirm-dialog form>p{color:#705e7c;line-height:1.5}.confirm-dialog form>div{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.confirm-dialog button{min-height:46px;border:3px solid var(--ink);border-radius:13px;background:white;font-weight:900}.confirm-dialog .danger{background:var(--pink);color:#fff}.finish-confetti{color:var(--pink);letter-spacing:.45rem;font-size:1.4rem;animation:twinkle .8s infinite alternate}.finish-dialog strong{font-size:2rem;color:var(--purple)}
button:focus-visible,a:focus-visible{outline:5px solid var(--lime);outline-offset:4px}@keyframes fly{50%{transform:translate(10px,-12px) rotate(7deg)}}@keyframes boo{to{transform:scale(1.08) rotate(3deg)}}@keyframes dialogPop{from{transform:scale(.55) rotate(-5deg);opacity:0}to{transform:scale(1);opacity:1}}@keyframes twinkle{to{transform:scale(1.08);filter:brightness(1.15)}}
@media(max-width:850px){body{background:linear-gradient(180deg,#7b42ee 0 520px,#fff2c8 520px)}.hero{grid-template-columns:1fr 260px}.moon-scene{height:220px}.moon{width:170px;height:170px}.score-strip{grid-template-columns:repeat(3,1fr)}.restart{grid-column:1/-1;min-height:50px}.game-head{display:block}.game-head>p{margin-top:10px}.door-grid{gap:13px}.door-card{min-height:235px}.door-back img{width:105px;height:105px}}
@media(max-width:620px){header{height:82px;padding:0 14px}.brand small{display:none}.brand-icon{width:47px;height:47px}.pill{padding:.5rem .65rem}.pill span:first-child{display:none}main{padding:18px 13px 50px}.hero{display:block;min-height:330px}.hero h1{font-size:3.65rem}.intro{font-size:.95rem}.moon-scene{position:absolute;right:8px;top:240px;width:170px;opacity:.42;z-index:-1}.score-strip{grid-template-columns:1fr 1fr;padding:10px;gap:8px}.score-strip article:nth-child(3){grid-column:1/-1}.score-strip article{min-height:72px;padding:9px}.score-icon{width:40px;height:40px}.game-card,.history-card{border-radius:25px}.game-card{padding:18px 12px}.door-grid{grid-template-columns:repeat(2,1fr);gap:11px}.door-card{min-height:210px}.door-number{font-size:3.4rem}.door-back img{width:88px;height:88px}.history-card{padding:20px 13px}.history-row{grid-template-columns:34px 42px 1fr auto;padding:9px 8px;gap:7px}.history-row .running-total{grid-column:3/-1}.history-row img{width:40px;height:40px}footer{display:block;padding:25px 18px 35px}}
@media(max-width:350px){.hero h1{font-size:3.1rem}.score-strip{grid-template-columns:1fr}.score-strip article:nth-child(3){grid-column:auto}.door-grid{grid-template-columns:1fr}.door-card{min-height:220px}.head-actions{gap:.3rem}.pill{font-size:.7rem}.history-title{display:block}.history-count{display:inline-block;margin-top:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.door-card.opening .door-inner{animation:doorShake .16s ease-in-out 3}
@keyframes doorShake{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(7px) rotate(1.5deg)}}
@media(prefers-reduced-motion:reduce){.door-card.opening .door-inner{animation:none!important}}

/* Polished character presentation and browser fallbacks */
.door-back{background:radial-gradient(circle at 50% 40%,#fff 0 29%,transparent 30%),linear-gradient(145deg,#fff8c9,#f2ddff);isolation:isolate}
.door-back::before{content:"";position:absolute;inset:12px;border:2px solid rgba(109,53,232,.18);border-radius:17px;background:radial-gradient(circle at 18% 21%,#ff9d2e 0 3px,transparent 4px),radial-gradient(circle at 82% 30%,#c9f24b 0 4px,transparent 5px),radial-gradient(circle at 76% 74%,#ff6ca8 0 3px,transparent 4px);z-index:-1}
.door-back img{width:138px;height:138px;filter:drop-shadow(0 5px 0 #fff) drop-shadow(0 10px 8px rgba(48,21,87,.25));transition:transform .3s ease}
.door-card.opened:hover .door-back img{transform:translateY(-4px) rotate(-2deg) scale(1.04)}
.reveal-dialog img{width:200px;height:200px;padding:8px;border-radius:50%;background:radial-gradient(circle,#fff 0 48%,#ffe27a 49% 60%,#c5a5ff 61% 68%,transparent 69%);filter:drop-shadow(0 7px 0 #fff) drop-shadow(0 14px 14px rgba(48,21,87,.25));animation:characterFloat 2.5s ease-in-out infinite}
dialog.fallback-open{display:block;position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:1000;margin:0}
.dialog-active::before{content:"";position:fixed;inset:0;background:rgba(41,15,77,.72);z-index:999}
.no-script{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:1200;padding:1rem;border:3px solid var(--ink);border-radius:16px;background:#fff;color:var(--ink);font-weight:900;text-align:center}
@keyframes characterFloat{50%{transform:translateY(-7px) rotate(1.5deg)}}
@media(prefers-reduced-motion:reduce){.reveal-dialog img{animation:none!important}}

/* Anime-style character stage */
.door-back::after{content:"✦";position:absolute;right:18px;top:14px;color:#ff8fb9;font-size:1.3rem;text-shadow:-105px 94px 0 #6d35e8,-92px 12px 0 #ffb42d;animation:twinkle 1.2s ease-in-out infinite alternate}
.door-back img{border-radius:50%;background:rgba(255,255,255,.55);outline:3px solid rgba(255,255,255,.9);outline-offset:-5px;filter:saturate(1.18) contrast(1.04) drop-shadow(0 5px 0 #fff) drop-shadow(0 11px 9px rgba(48,21,87,.28))}
.reveal-dialog{overflow:hidden;background:radial-gradient(circle at 50% 32%,#fff 0 22%,#fff7cd 48%,#eadbff 100%)}
.reveal-dialog::before{content:"";position:absolute;inset:-45%;z-index:-1;background:conic-gradient(from 0deg,transparent,#fff6 9deg,transparent 18deg 42deg,#ffcc5966 51deg,transparent 60deg 90deg);animation:magicSpin 12s linear infinite}
.reveal-dialog img{outline:5px solid #fff;outline-offset:-8px;filter:saturate(1.2) contrast(1.05) drop-shadow(0 7px 0 #fff) drop-shadow(0 14px 14px rgba(48,21,87,.3))}
.reveal-dialog h2{display:inline-block;padding:.22rem .8rem;border-radius:999px;background:#fff;box-shadow:0 4px 0 #d8c4ff;letter-spacing:-.03em}
@keyframes magicSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.door-back::after,.reveal-dialog::before{animation:none!important}}