:root{--bg:#11142c;--card:#242b4d;--card2:#2e395d;--ink:#fffaf4;--soft:#c2d0ed;--mint:#82eed0;--yellow:#ffda72;--rose:#ff83b0;--blue:#89c9ff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:280px;min-height:100vh;color:var(--ink);font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;background:radial-gradient(ellipse at 8% 3%,#313869 0,transparent 38%),radial-gradient(ellipse at 95% 12%,#51316c 0,transparent 34%),var(--bg)}
button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
button:disabled{cursor:default;opacity:.65}
.app{width:min(100%,1250px);margin:auto;padding:22px clamp(12px,3vw,30px) 35px}
.topbar,.brand,.top-actions,.stats,.stage-header,.heading-row{display:flex;align-items:center;gap:12px}
.topbar{justify-content:space-between;flex-wrap:wrap}.brand{gap:13px}.logo{display:grid;place-items:center;width:56px;height:56px;flex-shrink:0;background:var(--yellow);border-radius:18px;font-size:31px;box-shadow:0 5px 0 #9d7739;transform:rotate(-6deg)}
.brand-name{font-size:clamp(1.35rem,3vw,2rem);font-weight:1000;line-height:1.05;letter-spacing:-.045em;text-transform:uppercase}.brand-credit{font-size:.78rem;color:var(--mint);font-weight:900;letter-spacing:.11em;margin-top:4px}
.top-actions{flex-wrap:wrap;gap:9px}.chip{border:1px solid #586995;background:#2d385d;border-radius:14px;padding:10px 13px;font-size:.88rem;font-weight:900}.chip b{color:var(--yellow)}
.btn{border:0;border-radius:14px;padding:12px 16px;color:#252541;background:var(--yellow);font-weight:1000;min-height:44px;box-shadow:0 4px 0 #a77c37;transition:transform .12s,filter .12s;touch-action:manipulation}
.btn:hover{filter:brightness(1.05)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #a77c37}
.btn.ghost{background:#435477;box-shadow:0 4px 0 #273550;color:white}.btn.pink{background:var(--rose);box-shadow:0 4px 0 #a64f78}.btn.mint{background:var(--mint);box-shadow:0 4px 0 #3a9d87}
.hero{margin:28px 0 21px;padding:24px 27px;border:1px solid #475783;border-radius:25px;background:linear-gradient(115deg,#273761 5%,#3b3264 85%);position:relative;overflow:hidden}
.hero:after{content:'✦';position:absolute;right:30px;top:-43px;color:#ffffff12;font-size:220px;pointer-events:none}
.kicker{color:var(--mint);font-size:.77rem;font-weight:1000;letter-spacing:.16em}.hero h1{margin:8px 0 10px;letter-spacing:-.05em;line-height:1.06;font-size:clamp(1.8rem,4.2vw,3.1rem)}.hero p{color:#e1e9ff;margin:0;line-height:1.5;max-width:670px}.hero strong{color:var(--yellow)}
.heading-row{justify-content:space-between;flex-wrap:wrap;margin:6px 0 14px}.heading-row h2{margin:0;font-size:1.45rem}.small{font-size:.81rem;color:var(--soft)}
.games{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.game-card{display:block;min-width:0;min-height:234px;text-align:left;color:inherit;background:#242f52;border:2px solid #46587e;border-radius:23px;padding:12px;transition:transform .16s,border-color .16s;box-shadow:0 10px 20px #060b2029}
.game-card:hover{transform:translateY(-4px);border-color:var(--yellow)}.game-card.locked{border-color:#394563;background:#1d2642;opacity:.80}.game-card.locked:hover{transform:none;border-color:#65759b}.game-card.locked .card-art{filter:saturate(.35) brightness(.64)}.game-card.locked .play-link{color:#c2d0ed}.game-card.locked h3:after{content:"  🔒";font-size:.86rem}.game-card.unlocked-now{animation:unlocked-pop .5s ease-out}@keyframes unlocked-pop{50%{transform:scale(1.045);border-color:#ffdc78}}.game-card:active{transform:scale(.98)}.card-art{height:119px;border-radius:15px;display:grid;place-items:center;font-size:62px;position:relative;overflow:hidden;isolation:isolate}
.card-art:before{content:'✦ · ✧';position:absolute;left:12px;top:10px;font-size:15px;color:#fff9;z-index:-1}.card-art:after{content:'';position:absolute;width:100px;height:100px;border-radius:50%;background:#ffffff35;right:-29px;bottom:-38px;z-index:-1}
.adventure-art{background:linear-gradient(145deg,#8ad8fa,#6fce80)}.invaders-art{background:linear-gradient(145deg,#3e367f,#8975d2)}.blocks-art{background:linear-gradient(145deg,#f9c965,#f9959e)}.memory-art{background:linear-gradient(145deg,#74d6c6,#63aceb)}
.aim-art{background:linear-gradient(145deg,#ff9c8d,#dc60ab)}.wolves-art{background:linear-gradient(145deg,#7fcb91,#357c76)}.race-art{background:linear-gradient(145deg,#81c5f5,#6366c7)}.maze-art{background:linear-gradient(145deg,#c899ed,#8178e2)}.runner-art{background:linear-gradient(145deg,#657cce,#342f78)}
.game-card h3{font-size:1.05rem;margin:12px 3px 5px}.game-card p{font-size:.83rem;line-height:1.4;color:var(--soft);min-height:39px;margin:0 3px 8px}.play-link{margin-left:3px;color:var(--yellow);font-size:.88rem;font-weight:1000}
.stage{border:2px solid #566b98;border-radius:24px;padding:18px;background:#202a49;margin:22px 0 25px;scroll-margin-top:12px;box-shadow:0 14px 34px #0003}.stage[hidden],.modal[hidden],.touch-controls[hidden]{display:none!important}
.stage-header{justify-content:space-between;flex-wrap:wrap;margin-bottom:15px}.stage-header h2{margin:0;font-size:1.48rem}.stats{flex-wrap:wrap;gap:7px}.stats .chip{font-size:.82rem;padding:8px 11px}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:16px;align-items:start}
.play-main{min-width:0;display:flex;flex-direction:column;align-items:center}.canvas-shell{width:100%;max-width:700px;border:3px solid #63789f;border-radius:15px;overflow:hidden;background:#111c36;line-height:0;box-shadow:0 9px 24px #05081844}.canvas-shell canvas{display:block;width:100%;height:auto;aspect-ratio:auto;touch-action:none}.canvas-shell.narrow{max-width:435px}
.guide-box{background:#2c385d;border:1px solid #475b84;border-radius:17px;padding:16px;line-height:1.5}.guide-box h3{margin:0 0 8px;color:var(--mint);font-size:1.05rem}.guide-box p{margin:0 0 14px;color:#e0e9fa;font-size:.91rem}.guide-box .btn{width:100%}.guide-box .guide-foot{font-size:.78rem;margin:12px 0 0;color:#bbcbea}
.touch-controls{width:100%;display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin:13px auto 0;user-select:none;-webkit-user-select:none;max-width:600px}.touch-btn{display:grid;place-items:center;min-width:64px;min-height:60px;flex:0 1 auto;border-radius:15px;border:2px solid #7891bb;background:#3a4c76;color:#fff;font-size:1.18rem;font-weight:1000;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 4px 0 #1a2644}
.touch-btn.action{background:#ffce6e;border-color:#ffe39c;color:#322d4a;min-width:118px;box-shadow:0 4px 0 #a17a34}.touch-btn:active,.touch-btn.active{transform:translateY(3px);box-shadow:0 1px 0 #1a2644;background:#5b78a6}.touch-btn.action:active{background:#ffdf98}
.unlock-bar{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:14px 17px;margin:0 0 16px;border:1px solid #58678e;border-radius:17px;background:#222e53}.unlock-bar strong{color:#ffe18d}.unlock-info{flex:1;min-width:210px}.unlock-info small{display:block;color:#c1d1ed;margin-top:4px}.unlock-meter{width:100%;height:9px;border-radius:99px;background:#121c34;overflow:hidden;margin-top:9px}.unlock-meter>span{display:block;height:100%;width:0;background:linear-gradient(90deg,#79dfcd,#ffe17b);transition:width .35s}.dart-legend{border-top:1px solid #596a92;margin-top:16px;padding-top:13px}.dart-legend[hidden]{display:none}.dart-legend h4{margin:0 0 10px;color:#ffdf87}.dart-legend .legend-entry{display:flex;align-items:center;gap:9px;font-size:.86rem;padding:4px 0}.dart-legend .legend-dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid #fff9;flex-shrink:0}.progress-note{text-align:center;margin:13px 0 0;font-weight:1000;color:var(--yellow);min-height:22px}.message{font-size:.93rem;text-align:center;color:var(--mint);min-height:22px;margin:8px 0 0;font-weight:900}
.memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;width:min(100%,420px);padding:14px;background:#121d3e;border:3px solid #63789f;border-radius:15px}
.memory-grid.hidden,.canvas-shell.hidden{display:none!important}.memory-card{border:0;aspect-ratio:.95;background:#8375ea;border-radius:12px;color:white;font-size:clamp(1.7rem,4vw,2.8rem);box-shadow:0 4px 0 #4b3e9a;touch-action:manipulation}.memory-card.revealed{background:#faf0d9;color:#243054}.memory-card.matched{background:#91eec9;box-shadow:0 4px 0 #419b81}
.footer{color:#9aacd0;text-align:center;font-size:.84rem;margin:27px 0 0;line-height:1.6}
.modal{position:fixed;z-index:100;inset:0;padding:14px;display:grid;place-items:center;background:#060a1de8}.modal-panel{width:min(100%,445px);padding:28px 25px;background:linear-gradient(145deg,#28395d,#2d2b57);border-radius:26px;border:2px solid #8292bc;text-align:center;box-shadow:0 25px 80px #0008}.modal-panel h2{font-size:2rem;margin:3px 0 8px}.modal-panel p{color:#d4e0f5;line-height:1.5}.modal-panel input{display:block;width:100%;padding:15px;margin:17px 0 7px;border:2px solid #8194bc;border-radius:14px;background:#172342;color:white;font-size:1.12rem}.modal-panel .btn{width:100%;margin-top:5px}
.social-page{margin:16px 0 24px;padding:20px;background:#222d50;border:2px solid #526a91;border-radius:23px}.social-page[hidden]{display:none!important}.social-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.social-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:15px}.social-panel{padding:16px;background:#2b385d;border:1px solid #526a8c;border-radius:17px}.social-panel h3{margin:0 0 10px;color:var(--mint)}.social-page input{background:#141e38;color:white;border:1px solid #7c93be;border-radius:11px;padding:12px;width:100%;max-width:320px;min-height:44px}.social-page .btn{margin:5px}.social-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #465579}.social-line:last-child{border-bottom:0}.social-note{line-height:1.5;color:#cbd8f4;font-size:.87rem}.social-status{color:var(--yellow)}.social-page[aria-busy="true"]{opacity:.85}.block-option{display:flex;gap:9px;align-items:flex-start;margin:12px 0;color:white;font-size:.92rem;cursor:pointer}.block-option input{width:22px;height:22px;accent-color:#85e4d6;flex:0 0 auto}.top-actions button{white-space:nowrap}.name-error{min-height:19px;color:#ffc6d0!important;font-size:.82rem;margin:5px 0!important}
@media(max-width:1000px){.games{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.game-card{min-height:217px}.card-art{height:103px;font-size:52px}.play-layout{grid-template-columns:minmax(0,1fr) 210px}}
@media(max-width:800px){.games{grid-template-columns:repeat(2,minmax(0,1fr))}.play-layout{grid-template-columns:1fr}.guide-box{margin-top:4px}.hero{margin-top:20px}.game-card{min-height:0}.stage{padding:13px}.stage-header h2{font-size:1.25rem}}
@media(max-width:650px){.social-columns{grid-template-columns:1fr}.social-page{padding:12px}.social-panel{padding:12px}}
@media(max-width:480px){.app{padding:13px 10px 28px}.topbar{align-items:flex-start}.logo{height:43px;width:43px;border-radius:13px;font-size:26px}.brand-name{font-size:1.25rem}.brand-credit{font-size:.68rem}.top-actions{width:100%;justify-content:space-between}.top-actions .chip{padding:8px 10px;font-size:.75rem}.top-actions .btn{font-size:.76rem;padding:8px 11px;min-height:39px}.hero{padding:19px 17px;border-radius:19px}.hero h1{font-size:1.75rem}.hero p{font-size:.9rem}.heading-row h2{font-size:1.23rem}.games{gap:9px}.game-card{padding:8px;border-radius:15px}.card-art{height:82px;font-size:43px;border-radius:10px}.game-card h3{font-size:.94rem;margin:10px 2px 3px}.game-card p{font-size:.75rem;min-height:49px;margin:0 2px 7px}.play-link{font-size:.8rem}.stage{border-radius:18px;padding:10px}.stage-header{gap:9px}.stats .chip{padding:7px 8px;font-size:.73rem}.stats .btn{font-size:.79rem;padding:8px}.touch-controls{gap:7px}.touch-btn{min-height:57px;min-width:58px;border-radius:13px}.touch-btn.action{min-width:103px}.memory-grid{gap:8px;padding:9px}.guide-box{padding:13px}.progress-note,.message{font-size:.83rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:0s!important}}
/* Privacy-first interface, v6 */
.site-footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 16px}
.site-footer a,.legal-copy a,.modal-privacy a{color:#aee7ff;text-underline-offset:3px}
.site-footer .copyright{flex-basis:100%;color:#fff;font-weight:700}
.modal-privacy{font-size:.77rem;line-height:1.45;margin:10px 0 0;text-align:left;color:#e0e9fa}
.modal-privacy a{font-weight:bold}.modal-choice{display:flex;align-items:flex-start;gap:10px;text-align:left;line-height:1.45;padding:9px 0;font-size:.87rem}
.modal-choice input{width:19px!important;height:19px;margin:3px 0 0!important;flex:0 0 19px;accent-color:#82eed0}
.modal-hint{background:#152542;padding:9px;border-radius:10px;font-size:.78rem!important;text-align:left}
#onlineConsentFields[hidden],#onlineChoice[hidden]{display:none!important}
.privacy-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;align-items:center}
.privacy-actions .btn{min-height:42px}.privacy-panel{border:1px solid #556b91;border-radius:14px;background:#202e51;padding:16px;margin-top:15px}
.privacy-panel h3{margin:0 0 8px}.privacy-panel p{font-size:.89rem;color:#e1eafb}
.legal-copy{width:min(100%,820px);margin:22px auto;color:#e6edff;line-height:1.68;background:#202d4d;border-radius:18px;padding:clamp(18px,4vw,38px);border:1px solid #53658d}
.legal-copy h1{font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 12px;line-height:1.2}.legal-copy h2{font-size:1.2rem;color:#ffde91;margin:22px 0 6px}
.legal-copy ul{padding-left:24px}.legal-copy li{margin:6px 0}.legal-warning{padding:12px 15px;border-radius:10px;background:#414067;border:1px solid #9a94d1}
@media(max-width:480px){.modal{place-items:center}.modal-panel{padding:17px 16px;max-height:94dvh;overflow:auto}.modal-panel h2{font-size:1.45rem}.modal-panel input#nameInput{margin:9px 0 5px;padding:12px}.modal-hint{padding:7px}.modal-choice{padding:5px 0}.site-footer{font-size:.78rem}}


/* v7: original CIRCLE game, substantial site content, separate advertising location */
.circle-art{background:radial-gradient(circle at 50% 36%,#bdf6b3 0,#65b9cb 24%,#414796 62%,#171d45 100%);color:#fff9af;text-shadow:0 4px 16px #092a6d;font-family:Georgia,serif;font-size:75px}
.about-intro{margin:34px 0 22px;background:#223052;border:1px solid #586a90;border-radius:20px;padding:22px 26px;line-height:1.65}
.about-intro h2{font-size:1.35rem;margin:0 0 11px}
.about-intro p{margin:.6em 0;color:#d6e5fd}
.about-intro a,.legal-copy a{color:#9bead9;text-underline-offset:3px}
.ad-reservation{margin:175px auto 45px;padding:16px 0;max-width:800px;min-height:130px;text-align:center;border-top:1px solid #3c4f77}
.ad-reservation[hidden]{display:none!important}
.ad-label{text-transform:uppercase;letter-spacing:.14em;font-size:.73rem;color:#b7c7e6}
.site-footer{display:flex;align-items:center;justify-content:center;gap:10px 17px;flex-wrap:wrap;padding-top:24px;border-top:1px solid #536185}
.site-footer a{color:#bde6ff}
.legal-copy{font-size:1rem;line-height:1.72}
.legal-copy h1{font-size:clamp(2rem,5vw,2.7rem);line-height:1.12}
.legal-copy h2{margin-top:1.4em}
.legal-copy li{margin:.4em 0}
.legal-copy nav{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:20px}
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.guide-entry{background:#253354;border:1px solid #536c9a;border-radius:17px;padding:17px 19px;line-height:1.62}
.guide-entry h2{margin:0 0 7px;font-size:1.21rem;color:#ffdc83}
.guide-entry p{margin:7px 0}
.guide-entry strong{color:#94ead8}
.legal-warning{background:#403348;border-left:4px solid #ffdd84;padding:12px 16px;border-radius:8px}
@media(max-width:650px){.guide-grid{grid-template-columns:1fr}.about-intro{padding:17px}.ad-reservation{margin-top:175px}}

/* v8 mobile thumb joystick: no separate direction buttons to hunt for */
.joystick-area{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:0 0 148px;min-height:155px;user-select:none;-webkit-user-select:none}
.joystick{width:136px;height:136px;position:relative;display:grid;place-items:center;border-radius:50%;border:3px solid #91a9de;background:radial-gradient(circle at 40% 32%,#516da2,#293b67 77%);box-shadow:inset 0 4px 17px #0a143c91,0 7px 17px #03091a62;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}
.joystick.engaged{border-color:#ffdf8a;cursor:grabbing}
.joystick-ring{pointer-events:none;position:absolute;inset:21px;border:2px dashed #9daee083;border-radius:50%}
.joystick-knob{pointer-events:none;width:57px;height:57px;border:3px solid #ffffffbb;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff1b6,#eab44f);box-shadow:0 4px 12px #020b2b7f;transition:transform .045s linear;will-change:transform}
.joystick-caption{font-size:.72rem;font-weight:900;letter-spacing:.1em;color:#ccdbf7;text-align:center}
@media(any-pointer:coarse){.touch-controls:has(.joystick-area){justify-content:space-evenly;align-items:center;flex-wrap:nowrap;gap:12px;min-height:162px}.touch-controls .joystick-area{display:flex}.touch-controls:has(.joystick-area) .touch-btn.directional{display:none}.touch-controls:has(.joystick-area) .touch-btn.action{min-width:110px;min-height:73px;flex:0 1 152px;font-size:1rem}}
@media(any-pointer:coarse) and (max-width:430px){.joystick-area{flex-basis:138px}.joystick{width:124px;height:124px}.touch-controls:has(.joystick-area) .touch-btn.action{min-width:95px}}