/* v5.4: integrated learning illustrations and Starlight Bridge. */
.world-portals .world-portal .portal-icon{aspect-ratio:2/1;min-height:0;max-height:none;height:auto;width:100%;display:block}
.world-portals .world-portal .portal-icon .integrated-portal-art{width:100%;height:auto;aspect-ratio:2/1;object-fit:contain;object-position:center;display:block}
.world-portals .world-portal .portal-icon:after{content:none}
#petDexDialog .pet-dex-header{padding:22px clamp(16px,2vw,36px);width:100%;box-sizing:border-box}
#petDexDialog .pet-dex-toolbar,#petDexDialog #petDexGrid{max-width:none;width:100%;margin-left:0;margin-right:0}
#petDexDialog #petDexGrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));align-content:start}
#petDexDialog .pet-dex-header>div{max-width:none}
#grammarDialog .starlight-run-stage{display:flex;flex-direction:column;min-width:0;gap:0;align-self:stretch}
#grammarDialog #grammarRunnerWorld.starlight-run{--run-gold:#f5d487;--run-colour:#9bdde0;position:relative;isolation:isolate;height:380px;min-height:330px;flex:1;border:1px solid #aaa4de;border-radius:24px;overflow:hidden;background:#344a70;box-shadow:0 10px 32px #27355222;transform:none}
#grammarRunnerWorld .starlight-landscape{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#1c294c75,transparent 55%,#413b6585),url('/rpg/scenes/celestial-arena.webp') center/cover;opacity:.95}
#grammarRunnerWorld[data-tier="1"]{--run-colour:#a6c9ff}#grammarRunnerWorld[data-tier="2"]{--run-colour:#c4a1ff}#grammarRunnerWorld[data-tier="3"]{--run-colour:#ffc08b}#grammarRunnerWorld[data-tier="4"]{--run-colour:#ffe797}
#grammarRunnerWorld .run-heading{position:absolute;inset:18px 20px auto;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#fff6d7;text-shadow:0 2px 5px #203052}
.run-heading small{display:block;font-size:11px;letter-spacing:.15em;margin-bottom:5px}.run-heading b{font-size:clamp(21px,2vw,30px)}
.run-heading>span{font-size:13px;padding:7px 11px;border:1px solid #d7c29880;background:#233954ce;border-radius:99px;white-space:nowrap}
#grammarRunnerWorld .run-checkpoints{position:absolute;inset:90px 10% auto;z-index:3;display:flex;justify-content:space-between;gap:12px}
.run-checkpoints:before{content:'';position:absolute;left:0;right:0;top:17px;border-top:2px solid #ece0bb77;z-index:-1}
.run-checkpoints>span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#344265;border:1px solid #b9b6d2;color:#fff6dc;font-size:16px;font-weight:800;box-shadow:0 3px 8px #24334d55}
.run-checkpoints>span.current{border:2px solid #fff0bc;background:#8666bd;box-shadow:0 0 0 5px #fff5d323}
.run-checkpoints>span.passed{background:#e0bf6f;color:#48355b;border-color:#fff1b8}.run-checkpoints>span.missed{background:#e4d8ee;color:#75598e}
#grammarRunnerWorld .starbridge{position:absolute;left:-4%;right:-4%;height:82px;bottom:62px;transform:skewY(-2deg);background:linear-gradient(180deg,#dce8e9ed,#838bbdbd 18%,#45406eeb 70%);border-top:5px solid #f4ddb0;border-bottom:3px solid #b19ce5;box-shadow:0 10px 35px #bba7ec66;overflow:hidden}
.starbridge:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 74px,#e7d8b53d 75px 78px,transparent 79px 130px);animation:bridge-scroll 2s linear infinite}
.starbridge i{position:absolute;left:0;right:0;top:12px;border-top:1px solid #bce7eb77}.starbridge i:nth-child(2){top:36px}.starbridge i:nth-child(3){top:62px}
#grammarRunnerWorld .runner-pet-wrap{position:absolute;left:6%;bottom:104px;width:clamp(145px,17vw,235px);display:block;z-index:4;transform:none;animation:none;transition:left .65s ease-in,filter .25s}
#grammarRunnerWorld .runner-solo-pet{width:100%;height:auto;aspect-ratio:1;filter:none;animation:run-prance .55s ease-in-out infinite}
#grammarRunnerWorld .runner-solo-pet .world-sprite,#grammarRunnerWorld .runner-solo-pet .pet-svg{width:100%;height:100%;filter:none!important}
#grammarRunnerWorld .runner-pet-wrap small{display:block;width:max-content;max-width:100%;margin:-7px auto 0;padding:5px 12px;color:#fff9dd;background:#253952e8;border:1px solid #dac19a;font-size:14px;position:relative;z-index:2}
#grammarRunnerWorld .runner-pet-wrap:before{content:'';position:absolute;inset:15% -12% 0;background:radial-gradient(ellipse,#fff5d89c,transparent 70%);z-index:-1}
.run-dust{position:absolute;left:4%;bottom:17px;width:42%;height:9px;border-radius:50%;background:#fff1b4;filter:blur(4px);opacity:.8}
#grammarRunnerWorld .run-star-trail{position:absolute;left:36%;right:5%;bottom:165px;display:flex;justify-content:space-around;gap:8px;z-index:2;transform:rotate(-4deg)}
.run-star-trail i{font-size:23px;color:#fff4cd;font-style:normal;opacity:.5;text-shadow:0 0 10px #bc97ef;transition:scale .25s,color .25s}
.run-star-trail i.collected{color:#ffdc6d;opacity:1;text-shadow:0 0 20px #fff1ac;scale:1.3}
#grammarRunnerWorld .run-portals{position:absolute;right:7%;bottom:129px;width:38%;height:134px;display:flex;align-items:flex-end;gap:8px;z-index:3;perspective:450px}
.run-portal{position:relative;flex:1;height:100%;min-width:0;border:3px solid #ecd09b;border-radius:48% 48% 9px 9px;background:radial-gradient(ellipse,var(--run-colour),#a38fd8 48%,#554878c7 78%);box-shadow:0 0 0 4px #6d669e,0 0 22px #c1aeffaa,inset 0 0 24px #f8f1c199;display:grid;place-items:center;transform:rotateY(-12deg);transition:filter .25s,scale .3s}
.run-portal:nth-child(even){height:88%}.run-portal i{position:absolute;inset:10px 6px;border:1px solid #fff0c899;border-radius:inherit}
.run-portal b{font-size:22px;color:#fffbe1;text-shadow:0 2px 5px #453973}.run-portal.opened{scale:1.12;background:#fff2af;box-shadow:0 0 40px #ffec9a}.run-portal.sealed{filter:grayscale(.6);opacity:.6}
#grammarRunnerWorld .run-message{position:absolute;left:16px;right:16px;bottom:18px;padding:10px 12px;border-radius:14px;background:#243450e8;border:1px solid #b7a3d273;color:#fff3ce;font-size:15px;text-align:center;z-index:5;line-height:1.4}
#grammarRunnerWorld .runner-distance{top:auto;left:18px;right:18px;bottom:5px;height:5px;background:#e4def055;border:0}
#grammarRunnerWorld .runner-distance i{background:linear-gradient(90deg,#85e7da,#fff0a1);transition:width .4s}
#grammarRunnerWorld.gate-cleared .runner-pet-wrap{left:53%;filter:drop-shadow(0 0 12px #fff0ac)}
#grammarRunnerWorld.gate-cleared .runner-solo-pet{animation:run-leap .7s ease-out}
#grammarRunnerWorld.gate-missed .runner-solo-pet{animation:run-shield .65s ease-out}
#grammarRunnerWorld.gate-missed .runner-pet-wrap:after{content:'';position:absolute;inset:5%;border:3px solid #c5e8ff;border-radius:50%;box-shadow:0 0 25px #e0f4ff,inset 0 0 25px #d4d2ff}
#grammarRunnerWorld.pet-boost .runner-pet-wrap:before{background:radial-gradient(ellipse,#c5f9ffc9,transparent 70%)}
#grammarRunnerWorld.last-seconds .run-heading>span{background:#81482e;border-color:#ffd492}
#grammarRunnerWorld .run-pause-curtain{display:none;position:absolute;inset:135px 12px 68px;z-index:7;border-radius:20px;background:#243354e8;color:#fff2cc;place-items:center;font-size:24px;font-weight:bold;backdrop-filter:blur(5px)}
#grammarRunnerWorld.run-paused .run-pause-curtain{display:grid}
#grammarRunnerWorld.run-paused *{animation-play-state:paused!important}
.starlight-controls{display:flex;align-items:center;gap:12px;padding:14px;background:#ede8f8;border:1px solid #ded3ed;border-radius:0 0 18px 18px;color:#514372;flex:none}
.starlight-controls>span{font-size:12px;font-weight:bold}.starlight-controls>b{font-size:25px;min-width:32px;text-align:center}
.starlight-controls .grammar-runner-timer{flex:1;height:12px;background:#fff;border:1px solid #c8bade;border-radius:99px;overflow:hidden}
.starlight-controls .grammar-runner-timer i{display:block;height:100%;background:linear-gradient(90deg,#76d8d2,#b396df,#f8d27b);transition:width .3s}
.starlight-controls button{min-height:46px;min-width:85px;padding:8px 14px;background:#fffaf0;border:1px solid #c7b3dd;color:#604c7d;border-radius:12px;font-size:16px;font-weight:bold}
.run-instructions{font-size:14px;color:#695981;text-align:center;margin:10px 4px 0;line-height:1.5}
#grammarDialog .runner-mode .grammar-question-card{min-height:0;padding:26px 20px;border:1px solid #decfea;border-radius:24px;display:flex;flex-direction:column;justify-content:center}
#grammarDialog .runner-mode .grammar-question-card h4{font-size:clamp(23px,2.1vw,34px);line-height:1.5;margin:12px 0 22px}
#grammarDialog .runner-mode .grammar-question-orb{width:54px;height:54px}.runner-mode .grammar-question-orb .quest-glyph{width:50px;height:50px}
#grammarDialog .runner-mode .runner-lanes{grid-template-columns:1fr;gap:12px;margin:0}
#grammarDialog .runner-mode .runner-lanes button{min-height:66px;font-size:20px;border:2px solid #d7c7e8;border-bottom-width:4px;background:linear-gradient(110deg,#fffef8,#f0e9fb);border-radius:15px;text-align:left;transition:transform .15s,box-shadow .15s}
#grammarDialog .runner-lanes button>span{display:grid;place-items:center;flex:none;width:40px;height:46px;background:linear-gradient(140deg,#a490d0,#7058a6);border:2px solid #e6c482;border-radius:45% 45% 8px 8px;color:#fff8df;font-size:19px}
#grammarDialog .runner-lanes button.correct{background:#e3fae7;border-color:#74be9d}
#grammarDialog .runner-lanes button.wrong{background:#fff0e5;border-color:#dca788}
#grammarDialog .runner-lanes button:disabled{cursor:default;opacity:.65}
#grammarDialog .runner-lanes button:hover:not(:disabled){transform:translateX(3px);box-shadow:0 4px 16px #8970b829}
#grammarDialog .runner-mode .grammar-feedback{font-size:17px;line-height:1.5;min-height:42px;margin:14px 0 0}
@media (min-width:1200px){
 #grammarDialog .runner-mode{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto auto minmax(460px,1fr);gap:0 20px}
 #grammarDialog .runner-mode>.difficulty-ladder,#grammarDialog .runner-mode>.grammar-game-top,#grammarDialog .runner-mode>.grammar-game-progress{grid-column:1/-1}
 #grammarDialog .runner-mode>.starlight-run-stage{grid-column:1;grid-row:4;padding-top:18px}
 #grammarDialog .runner-mode>.grammar-question-card{grid-column:2;grid-row:4;margin-top:18px}
}
@media (max-width:1199px){
 #grammarDialog .runner-mode .starlight-run-stage{margin-bottom:18px}
 #grammarDialog #grammarRunnerWorld.starlight-run{height:340px;flex:none}
 #grammarRunnerWorld .runner-pet-wrap{width:180px;bottom:106px}
}
@media (max-width:760px){
 .world-portals .world-portal .portal-icon{grid-row:auto;height:auto;min-height:0;border-right:0}
 .world-portals .world-portal{display:flex;flex-direction:column}
 #petDexDialog #petDexGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #grammarRunnerWorld .run-heading{inset:14px 12px auto}.run-heading b{font-size:23px}.run-heading>span{font-size:11px}
 #grammarRunnerWorld .run-checkpoints{inset:82px 7% auto}
 #grammarDialog #grammarRunnerWorld.starlight-run{height:330px;min-height:330px}
 #grammarRunnerWorld .runner-pet-wrap{width:145px;left:2%;bottom:101px}
 #grammarRunnerWorld .run-portals{right:5%;width:43%;height:103px;gap:7px;bottom:125px}
 .run-portal{border-width:2px}.run-portal b{font-size:16px}
 #grammarRunnerWorld .run-star-trail{bottom:156px;left:40%}.run-star-trail i{font-size:18px}
 #grammarRunnerWorld .run-message{font-size:13px;left:10px;right:10px}
 .starlight-controls{gap:8px;padding:10px}.starlight-controls>span{font-size:10px}.starlight-controls button{min-width:74px;font-size:14px}
 #grammarDialog .runner-mode .grammar-question-card{padding:22px 14px}
}
@keyframes bridge-scroll{to{translate:-130px 0}}
@keyframes run-prance{0%,100%{translate:0 0;rotate:-1deg}50%{translate:0 -7px;rotate:1deg}}
@keyframes run-leap{0%{translate:0 0}40%{translate:0 -35px;rotate:5deg}100%{translate:0 0}}
@keyframes run-shield{0%,100%{translate:0 0}35%{translate:-12px -5px;rotate:-8deg}}
@media (prefers-reduced-motion:reduce){#grammarRunnerWorld *,#grammarRunnerWorld *:before{animation:none!important;transition:none!important}#grammarRunnerWorld.gate-cleared .runner-pet-wrap{left:6%}.world-portals .world-portal:hover .portal-icon img{transform:none}}
/* Reserve separate vertical space for checkpoints, fighter and controls. */
#grammarDialog #grammarRunnerWorld.starlight-run{min-height:400px}
#grammarRunnerWorld .runner-pet-wrap{width:150px;bottom:95px}
@media (max-width:760px){#grammarDialog #grammarRunnerWorld.starlight-run{height:380px;min-height:380px}#grammarRunnerWorld .runner-pet-wrap{width:130px;bottom:95px}}