/* v5.3: viewport-sized adventure rooms, readable grammar and companion satellites. */
#adventureDialog,#petDexDialog,#leaderboardDialog{inset:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;padding:0;border:0;border-radius:0;box-sizing:border-box;overflow:hidden}
#adventureDialog[open]{display:flex;flex-direction:column}
#adventureDialog .adventure-dialog-header,#adventureDialog .adventure-tabs{flex-shrink:0;position:relative;top:auto}
#adventureDialog .adventure-dialog-header{padding:18px clamp(16px,2vw,36px)}
#adventureDialog .adventure-tabs{padding:10px clamp(12px,2vw,36px)}
#adventureContent{flex:1;min-height:0;overflow:auto;scrollbar-gutter:stable}
#adventureDialog .boutique-layout{width:100%;max-width:none;grid-template-columns:clamp(270px,22vw,380px) minmax(0,1fr);gap:clamp(18px,2vw,34px);padding:clamp(16px,2vw,32px);box-sizing:border-box;align-items:start}
#adventureDialog .boutique-preview{top:16px;padding:20px;max-height:calc(100dvh - 180px);overflow:auto}
#adventureDialog .boutique-art{max-width:280px;margin:auto}
#adventureDialog .fashion-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
#adventureDialog .fashion-card{min-width:0;align-self:start}
#adventureDialog .fashion-art{height:220px}
#adventureDialog .fashion-info h3{font-size:19px;line-height:1.4}
#adventureDialog .fashion-info button{min-height:48px;font-size:15px}
#adventureDialog .boutique-categories{flex-wrap:wrap;gap:7px;padding:12px 0;margin:0}
#adventureDialog .boutique-categories button{font-size:16px;min-height:48px}
#adventureDialog .wardrobe-slots>div{min-height:76px}
#adventureDialog .adventure-profile{grid-template-columns:clamp(280px,28vw,460px) minmax(0,1fr);max-width:none;gap:clamp(24px,4vw,70px)}
.satellite-note{font-size:16px;line-height:1.6;color:#65547c;margin:8px 0 18px}
.spirit-satellite{transform-box:fill-box;transform-origin:center;animation:satellite-float 3.8s ease-in-out infinite;animation-delay:var(--satellite-delay)}
@keyframes satellite-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
/* The former 1,180 px inner cap caused the empty left and right margins. */
#petDexDialog .pet-dex-shell{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#petDexDialog .pet-dex-header{flex:none;min-height:110px;padding:18px 28px}
#petDexDialog .pet-dex-toolbar{flex:none;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:14px 26px;gap:14px;background:#fffdf9ef;border-bottom:1px solid #e1d8ec}
#petDexDialog .dex-stats span,#petDexDialog .dex-filters button,#petDexDialog .pet-dex-toolbar>b{font-size:15px}
#petDexDialog .dex-filters button{min-height:44px}
#petDexGrid{flex:1;min-height:0;overflow:auto;scrollbar-gutter:stable;max-width:none;width:100%;box-sizing:border-box;margin:0;padding:20px 26px 32px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;align-content:start}
#petDexGrid .dex-card{min-width:0;min-height:360px;padding:16px;display:flex;flex-direction:column;align-items:stretch}
#petDexGrid .dex-art{height:auto;aspect-ratio:1;max-width:240px;margin:0 auto 8px}
#petDexGrid .dex-art .pet-svg{width:100%;height:100%}
#petDexGrid .dex-card h4{font-size:23px}
#petDexGrid .dex-card p{font-size:14px;line-height:1.5;margin:8px 0 12px}
#petDexGrid .dex-number{font-size:12px;z-index:1}
#petDexGrid .dex-rarity{font-size:12px;align-self:center}
#petDexGrid .dex-use{margin-top:auto;min-height:48px;font-size:15px}
/* Fill the available height, while the ranking rows can continue scrolling. */
#leaderboardDialog .leaderboard-shell{height:100%;max-height:none;min-height:0;display:flex;flex-direction:column;overflow:auto}
#leaderboardDialog .leaderboard-hero,#leaderboardDialog .leaderboard-grade-tabs,#leaderboardDialog .leaderboard-mode-tabs,#leaderboardDialog .leaderboard-footer{flex-shrink:0}
#leaderboardDialog .leaderboard-grade-tabs,#leaderboardDialog .leaderboard-mode-tabs{position:static}
#leaderboardDialog .leaderboard-content{flex:1;display:flex;flex-direction:column;padding:18px clamp(16px,2vw,40px);gap:14px}
#leaderboardDialog .leaderboard-podium{flex:1;min-height:310px;padding:22px 8px 12px;gap:20px;background:radial-gradient(ellipse at 50% 80%,#e5d7fa80,transparent 65%)}
#leaderboardDialog .podium-card{width:clamp(200px,20vw,360px);min-height:260px;padding:20px 16px 0}
#leaderboardDialog .podium-card.rank-1{min-height:310px}
#leaderboardDialog .podium-card .leader-avatar{width:116px;height:116px}
#leaderboardDialog .podium-card.rank-1 .leader-avatar{width:140px;height:140px}
#leaderboardDialog .podium-card h3{font-size:21px;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
#leaderboardDialog .podium-card p,#leaderboardDialog .podium-card>b{font-size:16px}
#leaderboardDialog .crown-title{font-size:12px;white-space:normal}
#leaderboardDialog .leaderboard-grade-tabs button,#leaderboardDialog .leaderboard-mode-tabs button>span{font-size:17px;min-height:44px}
#leaderboardDialog .leaderboard-grade-tabs button small,#leaderboardDialog .leaderboard-mode-tabs button>small{font-size:12px}
#leaderboardDialog .leaderboard-scorebar p,#leaderboardDialog .leaderboard-participants{font-size:14px}
#leaderboardDialog .leaderboard-table-head,#leaderboardDialog .leader-name b,#leaderboardDialog .leader-class,#leaderboardDialog .leader-score{font-size:16px}
#leaderboardDialog .leaderboard-empty{padding:22px;font-size:16px}
#leaderboardDialog .leaderboard-me{margin-top:auto;min-height:76px}
#leaderboardDialog .leaderboard-footer{font-size:12px}
/* Let the question area use the room instead of retaining a narrow central card. */
#grammarDialog .grammar-body{grid-template-columns:clamp(310px,23vw,420px) minmax(0,1fr)}
#grammarDialog .grammar-main{padding:18px clamp(14px,2vw,32px)}
#grammarDialog #grammarContent,#grammarDialog .grammar-play{max-width:none;width:100%;margin:0;min-width:0}
#grammarDialog .grammar-play{min-height:100%;display:flex;flex-direction:column}
#grammarDialog .grammar-question-card{flex:1;padding:clamp(22px,3vw,48px);min-height:480px;background:radial-gradient(ellipse at 50% 0%,#fff6d8a0,transparent 65%),linear-gradient(140deg,#fffef9,#f7f2ff);box-shadow:0 12px 35px #65467d12}
#grammarDialog .grammar-question-card h4{font-size:clamp(26px,2.4vw,42px);max-width:1200px}
#grammarDialog .grammar-choice-grid{max-width:none;width:100%;gap:18px}
#grammarDialog .grammar-choice-grid button{font-size:clamp(19px,1.8vw,28px);min-height:86px}
#grammarDialog .jumbo-answer-zone{min-height:120px;font-size:19px;border:2px dashed #baa3df;background:#f3edfc}
#grammarDialog .jumbo-answer-zone>span{font-size:17px;color:#736089}
#grammarDialog .jumbo-pool{max-width:none;gap:12px;padding:22px 0}
#grammarDialog .jumbo-answer-zone button,#grammarDialog .jumbo-pool button{font-size:clamp(20px,1.9vw,28px);min-height:58px;padding:12px 18px}
#grammarDialog .grammar-action-row button{font-size:18px;min-height:52px}
#grammarDialog .grammar-map-panel{background:radial-gradient(ellipse at 0 0,#e7e1ff,transparent 55%),linear-gradient(155deg,#fffdf7,#f1edf9);padding:20px 16px}
#grammarDialog .grammar-map-head h3{font-size:30px}
#grammarDialog .grammar-map-head>span{font-size:15px;line-height:1.5}
#grammarDialog .grammar-term-tabs button{font-size:18px;min-height:52px}
#grammarDialog .grammar-mission-list{gap:12px}
#grammarDialog .grammar-mission{border-radius:20px;box-shadow:0 4px 0 #dbd0ea55}
#grammarDialog .grammar-mission div>b{font-size:18px;line-height:1.4}
#grammarDialog .grammar-mission div>small{font-size:16px;line-height:1.5;color:#695987;margin-top:5px}
#grammarDialog .grammar-mission.active div>small{color:#fff4dd}
#grammarDialog .grammar-focus-chips{gap:10px}
#grammarDialog .grammar-focus-chips span{font-size:19px;line-height:1.5;padding:10px 16px;border:1px solid #cdbcdf;background:linear-gradient(130deg,#f3eaff,#fff8dc);color:#584080;border-radius:15px}
#grammarDialog .grammar-rule-scroll p{font-size:20px;line-height:1.7}
#grammarDialog .grammar-example-list p{font-size:19px;line-height:1.65}
#grammarDialog .grammar-side-feature b,#grammarDialog .grammar-boss-btn b{font-size:17px}
#grammarDialog .grammar-side-feature small,#grammarDialog .grammar-boss-btn small{font-size:14px;line-height:1.5}
@media (min-width:901px){
 #grammarDialog .grammar-body:has(.grammar-play){grid-template-columns:minmax(0,1fr)}
 #grammarDialog .grammar-body:has(.grammar-play) .grammar-map-panel{display:none}
 #grammarDialog .grammar-main:has(.grammar-play),#grammarDialog #grammarContent:has(.grammar-play){height:100%;box-sizing:border-box}
}
@media (max-width:1000px){
 #adventureDialog .boutique-layout{grid-template-columns:260px minmax(0,1fr);gap:16px}
 #adventureDialog .fashion-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
 #petDexGrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));padding:16px}
 #leaderboardDialog .podium-card{width:30%;min-width:0}
}
@media (max-width:900px){
 #grammarDialog .grammar-body{display:block}
 #grammarDialog .grammar-mission-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 #grammarDialog .grammar-body:has(.grammar-play) .grammar-map-panel{display:none}
 #grammarDialog .grammar-question-card{min-height:420px;padding:22px 16px}
}
@media (max-width:650px){
 #adventureDialog .boutique-layout,#adventureDialog .adventure-profile{display:block;padding:14px}
 #adventureDialog .boutique-preview{position:relative;top:auto;max-height:none;padding:18px;margin-bottom:20px}
 #adventureDialog .boutique-art{max-width:230px}
 #adventureDialog .wardrobe-slots{grid-template-columns:repeat(3,minmax(0,1fr))}
 #adventureDialog .boutique-categories button{font-size:14px;padding:9px 12px}
 #adventureDialog .fashion-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #adventureDialog .fashion-art{height:170px}
 #adventureDialog .fashion-info{padding:12px}
 #adventureDialog .fashion-info h3{font-size:16px}
 #adventureDialog .fashion-info button{font-size:14px;grid-column:1/-1}
 #adventureDialog .fashion-detail{width:46px;height:54px;right:4px;bottom:8px}
 #petDexDialog .pet-dex-header{padding:16px;min-height:100px}
 #petDexDialog .pet-dex-toolbar{padding:10px 12px;gap:8px;grid-template-columns:1fr}
 #petDexDialog .dex-stats span,#petDexDialog .pet-dex-toolbar>b{font-size:13px}
 #petDexGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}
 #petDexGrid .dex-card{min-height:300px;padding:10px}
 #petDexGrid .dex-card h4{font-size:20px}
 #petDexGrid .dex-card p{font-size:13px}
 #petDexGrid .dex-use{font-size:13px}
 #leaderboardDialog .leaderboard-content{padding:12px;gap:12px}
 #leaderboardDialog .leaderboard-podium{min-height:250px;gap:8px;padding:15px 0}
 #leaderboardDialog .podium-card{padding:12px 6px 0;min-height:210px}
 #leaderboardDialog .podium-card.rank-1{min-height:245px}
 #leaderboardDialog .podium-card .leader-avatar{width:65px;height:65px}
 #leaderboardDialog .podium-card.rank-1 .leader-avatar{width:78px;height:78px}
 #leaderboardDialog .podium-card h3{font-size:14px}
 #leaderboardDialog .podium-card p,#leaderboardDialog .podium-card>b{font-size:13px}
 #leaderboardDialog .crown-title{font-size:10px}
 #leaderboardDialog .leaderboard-mode-tabs button>span{font-size:13px}
 #leaderboardDialog .leader-name b,#leaderboardDialog .leader-class,#leaderboardDialog .leader-score{font-size:13px}
 #leaderboardDialog .leader-row{grid-template-columns:30px minmax(0,1fr) 38px 55px;gap:5px}
 #grammarDialog .grammar-mission-list{grid-template-columns:1fr}
 #grammarDialog .grammar-mission div>b{font-size:18px}
 #grammarDialog .grammar-mission div>small{font-size:16px}
 #grammarDialog .grammar-focus-chips span{font-size:17px}
 #grammarDialog .grammar-question-card h4{font-size:26px}
 #grammarDialog .jumbo-answer-zone button,#grammarDialog .jumbo-pool button{font-size:20px;padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){.spirit-satellite{animation:none}}
.fashion-art .spirit-satellite,.dex-art .spirit-satellite{animation:none}
#grammarDialog .grammar-quest-icon .quest-glyph{width:100%;height:100%}
#grammarDialog .grammar-back-learn{min-height:44px;font-size:16px}
#grammarDialog .detective-sentence button{font-size:clamp(20px,1.9vw,28px);min-height:54px}

#grammarDialog .grammar-battle-arena,#grammarDialog .grammar-runner-world,#grammarDialog .grammar-game-top,#grammarDialog .grammar-game-progress{flex-shrink:0}