/* Only outer slot and page-shell elements are styled. No ad creative selectors. */
html,body{width:100%;height:100%;margin:0;padding:0!important;overflow-x:hidden;overflow-y:hidden;box-sizing:border-box}
#site-shell{width:100%;height:100dvh;display:flex;flex-direction:column;min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
#site-shell>header{width:100%;flex:0 0 auto;min-height:64px;height:64px;box-sizing:border-box}
#site-ad-top-host{width:100%;min-width:0;margin:0;padding:0;flex:0 0 auto;box-sizing:border-box}
#site-scroll{width:100%;min-width:0;min-height:0;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;padding:var(--anchor-top-offset,0px) 0 calc(var(--anchor-bottom-offset,0px) + env(safe-area-inset-bottom));scrollbar-gutter:stable}
main#app,main#app:has(>.hero){display:block;width:100%;min-width:0;max-width:100%;margin:0;padding:0;box-sizing:border-box}
.page-content{width:calc(100% - 56px);max-width:1208px;min-width:0;margin:18px auto 28px;padding:0;box-sizing:border-box}
.home-layout{display:grid;grid-template-columns:224px minmax(0,1fr);column-gap:28px;row-gap:18px;grid-template-areas:'hero hero' 'stats heading' 'stats tabs' 'settings cards' 'note cards' 'study cards';align-items:start}
.home-layout>*,.page-content .game,.page-content .map-game,.quiz-card,.cards{min-width:0;max-width:100%;box-sizing:border-box}
.ad-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:min(300px,100%);width:100%;max-width:100%;height:auto;flex-shrink:0;flex:0 0 auto;align-self:stretch;box-sizing:border-box;margin:8px 0;padding:0;overflow:visible;background:none;border:0}
.ad-slot-top{margin:0!important}
.ad-slot-flow::before{content:'Advertisement';display:block;flex:0 0 auto;font:9px/16px Arial,sans-serif;color:#919886;letter-spacing:.3px;text-align:center}
.ad-slot:empty{display:none!important;height:0;margin:0!important;padding:0!important}
.ad-slot:empty::before{display:none;content:none}
/* A pending SDK wrapper has no label; only injected content determines height. */
.ad-slot:not([data-filled="true"])::before{display:none;content:none}
#site-scroll>footer{width:calc(100% - 56px);max-width:1208px;box-sizing:border-box;margin:0 auto}
.home-layout .hero{margin-bottom:0}
@media(max-width:1279px){.home-layout{grid-template-columns:205px minmax(0,1fr);column-gap:20px;row-gap:16px}}
@media(max-width:1000px) and (min-width:761px){.home-layout{grid-template-columns:180px minmax(0,1fr);column-gap:16px}}
@media(max-width:760px){#site-shell>header{height:58px;min-height:58px;padding:0 10px}#site-shell>header nav{gap:11px}.page-content{width:calc(100% - 20px);margin:10px auto 22px}.home-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:'hero' 'stats' 'heading' 'tabs' 'settings' 'cards' 'note' 'study';row-gap:15px}.ad-slot{width:100%;max-width:100%;min-width:min(300px,100%);height:auto}#site-scroll>footer{width:calc(100% - 20px);margin:0 auto}.map-game,.game{width:100%;margin-left:0;margin-right:0}.map-counters{min-width:0;max-width:100%}.map-svg-scroll{overflow-x:auto;overflow-y:hidden}.map-svg-scroll svg{max-width:none}.brand{white-space:nowrap}.hero .intro{overflow-wrap:anywhere}.hero .eyebrow{letter-spacing:.5px}}

main#app{padding:0!important}#site-shell{padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)!important}#site-scroll{padding-top:var(--anchor-top-offset,0px)!important;padding-bottom:calc(var(--anchor-bottom-offset,0px) + env(safe-area-inset-bottom))!important}

/* Static top strip stays outside the sole scrolling region. */
#site-ad-top-host{position:static}
#all-topics{scroll-margin-top:20px;outline:none}
/* Keep a 10px gap between filled flow ads and the game content. */
#app:is([data-view="quiz"],[data-view="map"])>.ad-slot-flow[data-filled="true"]:first-child{margin-bottom:10px}
#app:is([data-view="quiz"],[data-view="map"])>.ad-slot-flow[data-filled="true"]:last-child{margin-top:10px}

/* Topic-list ads use the full host width; each content card owns its inset. */
.cards:has(>.ad-slot-between){padding:0}
.cards>.ad-slot-between{grid-column:1 / -1;margin:32px 0}
@media(max-width:760px){
 .page-content.home-layout{width:100%;max-width:100%}
 .home-layout>*:not(.cards){width:calc(100% - 20px);margin-left:auto;margin-right:auto}
 .home-layout>.cards{width:100%;max-width:100%;margin:0;padding:0}
 .home-layout>.cards>.quiz-card{width:calc(100% - 20px);margin-left:auto;margin-right:auto}
}

/* Remove stacked wrapper/game margins so the visible gap stays exactly 10px. */
#app:is([data-view="quiz"],[data-view="map"])>.page-content{display:flow-root;margin-top:0;margin-bottom:0}
#app:is([data-view="quiz"],[data-view="map"])>.page-content>.game,
#app:is([data-view="quiz"],[data-view="map"])>.page-content>.map-game{margin-top:0;margin-bottom:0}

/* The review list is a full-width ad host; its content owns horizontal insets. */
#app[data-view="result"]>.page-content{width:100%;max-width:100%}
#app[data-view="result"] .game{width:100%;max-width:960px}
#app[data-view="result"] .game>.result,#app[data-view="result"] .game>.review-title{width:calc(100% - 20px);box-sizing:border-box;margin-left:auto;margin-right:auto}
#app[data-view="result"] .review-list{width:100%;min-width:0;margin:0;padding:0;box-sizing:border-box}
#app[data-view="result"] .review-list>.review-item{width:calc(100% - 20px);box-sizing:border-box;margin-left:auto;margin-right:auto;min-width:0}
.review-list>.ad-slot-review{grid-column:1 / -1;margin:10px 0}

/* Every visible flow ad has exactly 10px between its outer box and content. */
main#app{display:flex;flex-direction:column;gap:10px}
main#app>.site-context{width:calc(100% - 20px);max-width:1208px;min-width:0;margin:10px auto 0;padding:0;box-sizing:border-box}
.site-context>.eyebrow{margin:0;min-height:20px;line-height:20px;font-size:10px;letter-spacing:1px}
.site-context>.game-top{margin:0;padding:10px 12px;box-sizing:border-box;min-width:0}
.site-context>button{display:block;margin:0;padding:9px 14px;border:1px solid #dce5d2;border-radius:9px;background:#edf3e5;color:var(--green);font-size:12px;font-weight:700}
header .nav-home[hidden]{display:none!important}
main#app>.ad-slot{margin-top:0!important;margin-bottom:0!important}
main#app>.page-content{margin-top:0!important;margin-bottom:0!important}
main#app>.page-content:not(.home-layout){display:flow-root}
main#app>.page-content>.game,main#app>.page-content>.map-game{margin-top:0!important;margin-bottom:0!important}
main#app>.page-content>:first-child,main#app>.page-content>.game>:first-child,main#app>.page-content>.map-game>:first-child{margin-top:0}
main#app>.page-content>:last-child,main#app>.page-content>.game>:last-child,main#app>.page-content>.map-game>:last-child{margin-bottom:0}
.cards:has(>.ad-slot-between){row-gap:10px}
.cards>.ad-slot-between,.review-list>.ad-slot-review{margin-top:0!important;margin-bottom:0!important}
#app[data-view="result"] .review-list{row-gap:10px}
#app[data-view="result"] .review-list>.review-item{margin-top:0;margin-bottom:0}
#site-scroll>footer{padding-top:10px}