:root{font-family:"Trebuchet MS",system-ui,sans-serif;color:#272330;background:#f8f5ed;--purple:#6348db;--muted:#756e7b;--line:#dfdbd3}*{box-sizing:border-box}body{margin:0}a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:3px solid var(--purple);outline-offset:6px}.header,main,footer{max-width:1064px;margin:auto;padding-left:28px;padding-right:28px}.header{padding-top:30px;padding-bottom:24px;display:flex;justify-content:space-between;align-items:center}.brand{text-decoration:none;color:var(--purple);font-size:30px;font-weight:900;letter-spacing:-1.8px}.brand span{color:#272330}.nav{font-size:13px;font-weight:bold;text-decoration:none;color:#272330;min-height:44px;display:flex;align-items:center;gap:20px}.intro{position:relative;padding-top:56px;padding-bottom:64px}.eyebrow{display:block;color:var(--purple);font-size:10px;font-weight:800;letter-spacing:1.8px}h1{font-size:clamp(60px,9vw,108px);line-height:.99;font-weight:900;letter-spacing:-5px;margin:22px 0}h1 em{font-style:normal;color:var(--purple)}.intro>p{color:var(--muted);font-size:18px;line-height:1.6}.doodle{position:absolute;right:15%;top:82px;font-size:140px;color:#b6ce67;transform:rotate(10deg);line-height:1}.section-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;border-top:1px solid var(--line);padding:25px 0}h2{font-size:17px;letter-spacing:-.3px;margin:0}.section-heading>span{font-size:11px;color:var(--muted)}.game-card{display:grid;grid-template-columns:42% 58%;border:1px solid var(--line);background:#fffefa;border-radius:25px;overflow:hidden;box-shadow:0 8px 0 #e8e4d94d}.illustration{background:#e8e0fc;position:relative;min-height:345px;overflow:hidden}.character{position:absolute;border:2px solid #272330;border-radius:65px 65px 30px 30px;width:118px;height:155px;display:flex;align-items:center;justify-content:center;gap:16px;bottom:68px;box-shadow:0 7px 0 #27233012}.character i{background:#272330;width:9px;height:14px;border-radius:50%}.c1{background:#efbd74;left:4%;transform:rotate(-12deg)}.c2{background:var(--purple);left:34%;bottom:82px;z-index:2;transform:rotate(5deg)}.c2 svg{width:88px}.c3{background:#e6ff90;left:64%;transform:rotate(12deg)}.question{position:absolute;font-size:34px;font-weight:bold;color:var(--purple)}.q1{left:20%;top:43px;transform:rotate(-15deg)}.q2{right:19%;top:28px;transform:rotate(16deg)}.art-label{position:absolute;bottom:25px;width:100%;text-align:center;font-weight:800;font-size:10px;letter-spacing:1.6px;color:#65577e}.game-info{padding:32px}.game-top{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}.game-top .eyebrow{font-size:9px;letter-spacing:1.3px}.private{font-size:10px;background:#f0ece3;border-radius:20px;padding:7px 9px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}h3{font-size:38px;letter-spacing:-1.7px;margin:20px 0 12px}.game-info>p{font-size:14px;color:var(--muted);line-height:1.65;margin:0}.details{list-style:none;margin:19px 0 23px;padding:0;display:flex;gap:7px;flex-wrap:wrap}.details li{border:1px solid var(--line);font-size:10px;border-radius:20px;padding:7px 10px}.play{display:flex;justify-content:space-between;align-items:center;gap:30px;width:max-content;min-height:48px;background:var(--purple);color:white;border-radius:12px;text-decoration:none;font-size:13px;font-weight:bold;padding:15px 18px;box-shadow:0 3px 0 #44309d}.play:hover{background:#543bc5}.game-info .access-note{font-size:10px;margin-top:14px}.next{display:flex;align-items:center;gap:18px;padding:28px 0 42px}.next>span{font-size:29px;color:#aaa2b5;width:44px;height:44px;display:grid;place-items:center;border:1px dashed #c8c1d1;border-radius:13px}.next p{font-size:12px;color:var(--muted);line-height:1.65}.next strong{color:#514b58;font-weight:500}footer{border-top:1px solid var(--line);display:flex;align-items:center;gap:27px;padding-top:24px;padding-bottom:28px}footer .brand{font-size:23px}footer>span{font-size:10px;color:var(--muted)}footer .copyright{margin-left:auto}@media(max-width:720px){.header,main,footer{padding-left:21px;padding-right:21px}.header{padding-top:20px}.intro{padding-top:33px;padding-bottom:37px}.eyebrow{font-size:9px;letter-spacing:1.2px}h1{font-size:76px;letter-spacing:-4px}.intro>p{font-size:15px}.doodle{right:2%;top:95px;font-size:95px}.section-heading{gap:10px}.section-heading>span{font-size:9px}.game-card{grid-template-columns:1fr}.illustration{min-height:245px}.character{bottom:49px;height:129px;width:105px}.c1{left:calc(50% - 150px)}.c2{left:calc(50% - 53px);bottom:60px}.c3{left:calc(50% + 44px)}.q1{top:25px;left:25%}.q2{top:16px;right:24%}.art-label{bottom:17px}.game-info{padding:26px}.game-top{gap:10px}h3{margin-top:18px;font-size:36px}.play{width:100%}footer{flex-wrap:wrap;gap:16px}footer .copyright{width:100%;margin:0}.next{padding-bottom:28px}}@media(max-width:360px){h1{font-size:65px}.doodle{font-size:65px;top:102px}.game-info{padding:20px}}
@media(max-width:480px){.doodle{display:none}}
.chess-card{margin-top:24px}.chess-art{background:#e1eadc;display:grid;place-items:center}.mini-board{display:grid;grid-template-columns:repeat(4,1fr);width:210px;height:210px;transform:rotate(-8deg);border:7px solid #3f5349;border-radius:8px;overflow:hidden;box-shadow:8px 10px 0 #3f53491c}.mini-board span{display:grid;place-items:center;font-size:36px;background:#ededdc;color:#282e30}.mini-board span:nth-child(8n+2),.mini-board span:nth-child(8n+4),.mini-board span:nth-child(8n+5),.mini-board span:nth-child(8n+7){background:#7d9a82}@media(max-width:720px){.mini-board{width:168px;height:168px;border-width:5px;margin-bottom:15px}.mini-board span{font-size:29px}}
.geography-card{margin-top:24px}.geography-art{background:#dce8de;display:grid;place-items:center}.globe{width:230px;max-width:72%;transform:rotate(-9deg);margin-bottom:16px}@media(max-width:720px){.globe{width:180px}}

.account{max-width:1064px;margin:auto;padding:0 28px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:13px}.account a{color:var(--purple);padding:10px 0}.account small{width:100%;color:var(--muted);line-height:1.5}@media(max-width:720px){.account{padding:0 21px}}
/* Account controls stay usable on the narrowest supported phones. */
.oonaii-header .oonaii-account-panel{width:280px;max-width:calc(100vw - 24px)}
.oonaii-account-panel button{font:inherit;cursor:pointer;min-height:44px;width:100%;padding:10px 12px;border:1px solid #d5cec2;border-radius:8px;background:#fff;color:#272330;white-space:normal}
.oonaii-account-panel button:disabled{opacity:.6;cursor:wait}
.oonaii-account-panel button[hidden]{display:none}
[data-google-button]{max-width:100%;min-width:0}
[data-google-status]:empty{display:none}
.privacy-content{max-width:740px;margin:40px auto;padding:0 20px 48px;line-height:1.7}
.privacy-content h1{font-size:clamp(2rem,7vw,3.8rem);line-height:1.1;letter-spacing:-.04em;overflow-wrap:anywhere;hyphens:auto}
.privacy-content h2{font-size:1.3rem;margin-top:1.8em}
.privacy-content .privacy-intro{font-size:1.1rem;color:var(--muted)}
.privacy-content section h2{margin-top:1.4em}
.privacy-content section p{margin:.6em 0}
.privacy-details{margin:28px 0 16px;border:1px solid var(--line);border-radius:16px;background:#fffefa}
.privacy-details summary{padding:16px;min-height:52px;font-weight:700;color:var(--purple);cursor:pointer;overflow-wrap:anywhere}
.privacy-details summary:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:16px}
.privacy-details-body{padding:0 16px 4px}
.privacy-details-body p{margin:0 0 16px}
.privacy-content a{color:var(--purple);text-underline-offset:3px}
.privacy-back{display:inline-flex;align-items:center;min-height:44px}
.privacy-contact a{display:inline-flex;align-items:center;min-height:44px;max-width:100%;overflow-wrap:anywhere}
.profile-page{max-width:760px;padding-top:36px;padding-bottom:48px;min-height:60vh}
.profile-page h1{font-size:clamp(2.3rem,9vw,4rem);margin:16px 0 24px;line-height:1.1}
.profile-fields{margin:24px 0;background:#fffdf8;border:1px solid var(--line);border-radius:20px;padding:8px 20px}
.profile-fields[hidden]{display:none}
.profile-fields>div{padding:16px 0;border-bottom:1px solid var(--line)}
.profile-fields>div:last-child{border-bottom:0}
.profile-fields dt{font-size:13px;color:var(--muted);margin-bottom:6px}
.profile-fields dd{margin:0;overflow-wrap:anywhere;line-height:1.5}
.profile-page>p{line-height:1.6;color:var(--muted)}