:root{font-family:ui-rounded,"SF Pro Rounded","PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#292344;background:#f6f7fb;font-synthesis:none;--purple:#6e48ed;--ink:#292344;--muted:#777387;--line:#e5e3ed}*{box-sizing:border-box}body{margin:0}button,a,canvas{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #8867ef;outline-offset:5px}button{touch-action:manipulation}button:active:not(:disabled){transform:translateY(2px)}button:disabled{opacity:.55}.header{max-width:1400px;height:110px;margin:auto;padding:0 48px;display:flex;align-items:center;justify-content:space-between}.wordmark{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:900;letter-spacing:.07em}.brand-dot{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:var(--purple);color:white;font:bold 38px/1 Georgia;padding-bottom:8px;letter-spacing:-5px;padding-right:5px}.wordmark small{display:block;font-size:12px;letter-spacing:.19em;margin-top:4px;font-weight:500;color:var(--muted)}.header-note{font-size:14px;color:var(--muted);letter-spacing:.1em}.icon-button{border:1px solid var(--line);background:white;border-radius:25px;min-height:42px;padding:8px 15px;font-size:19px;display:flex;gap:8px;align-items:center}.icon-button span{font-size:12px}.workspace{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(210px,1fr) minmax(300px,460px) minmax(210px,1fr);gap:46px;padding:0 32px;align-items:center}.left-panel{padding:14px 0 20px}.edition,.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:750;color:var(--muted)}.edition{color:var(--purple);margin-bottom:20px}h1{font-size:clamp(36px,3.7vw,53px);line-height:1.27;letter-spacing:-.065em;margin:0;font-weight:900}h1 span{color:var(--purple)}.intro{font-size:15px;color:var(--muted);line-height:1.9;margin:19px 0 26px}.scoreboard{background:white;border:1px solid var(--line);border-radius:22px;padding:21px 23px;margin-bottom:30px;box-shadow:0 5px 0 #edebf3;max-width:242px}.score-label{font-size:14px;display:flex;justify-content:space-between;gap:5px}.score-label span{color:var(--purple);font-weight:750;font-size:12px;white-space:nowrap}.scoreboard>strong{font-size:58px;font-weight:850;letter-spacing:-.055em;display:block;line-height:1.25;font-variant-numeric:tabular-nums}.best-line{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;border-top:1px solid #eeecf4;margin-top:10px;padding-top:13px}.best-line b{color:var(--ink);font-variant-numeric:tabular-nums}.desktop-tip{display:flex;gap:13px;align-items:center;margin:18px 0}.tip-number{font-size:12px;color:var(--purple);border:1px solid #dcd4f6;border-radius:50%;padding:7px}.desktop-tip p{font-size:13px;color:var(--muted);margin:0;line-height:1.9}.desktop-tip b{font-weight:500;color:#4c4660}.game-panel{width:100%;min-width:0}.game-top{display:flex;align-items:center;height:60px;gap:12px;padding:0 9px}.live-label{font-size:13px;color:#666177;display:flex;align-items:center;gap:8px;flex:1}.live-label>span:first-child{width:7px;height:7px;background:#9679ef;border-radius:50%}.next{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}.next canvas{width:42px;height:42px}.small-button{border:1px solid var(--line);background:white;border-radius:13px;width:39px;height:39px;font-size:17px}.arena{position:relative;aspect-ratio:460/610;width:100%;border-radius:28px;background:#eeebf8;box-shadow:0 14px 36px #3a245212;overflow:hidden;border:1px solid #dfdaec}.arena>canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-5px}.game-bottom{display:flex;justify-content:space-between;gap:6px;padding:13px 3px;font-size:12px;color:var(--muted)}.keyboard-hint{font-size:11px;color:#938d9f}.right-panel{padding-top:16px}.shake-card{border-radius:22px;padding:24px 22px;background:#e9e2ff;border:1px solid #ded3fc}.shake-card .eyebrow{color:#8069b7;font-size:11px}.shake-card h2{font-size:23px;margin:10px 0;letter-spacing:-.045em}.shake-card p{font-size:13px;line-height:1.8;color:#74658f;margin:0 0 21px}.shake-button{display:flex;align-items:center;justify-content:center;width:100%;gap:9px;background:var(--purple);color:white;border:0;border-radius:14px;padding:12px 8px;font-size:17px;font-weight:650;box-shadow:0 4px 0 #5132bd}.shake-icon{font-size:27px;line-height:1}.shake-button small{border:1px solid #ffffff55;padding:0 5px;border-radius:4px;font-size:11px;font-weight:400;margin-left:3px}.charge{margin-top:20px}.charge>div{display:flex;justify-content:space-between;font-size:11px;color:#7c6b9d}.charge b{font-weight:500}.charge progress{appearance:none;width:100%;height:6px;display:block;margin-top:9px;border:0;border-radius:10px;background:#d9cff2;overflow:hidden}.charge progress::-webkit-progress-bar{background:#d9cff2}.charge progress::-webkit-progress-value{background:var(--purple);border-radius:10px}.charge progress::-moz-progress-bar{background:var(--purple)}.discovery{text-align:center;padding-top:31px}.discovery .eyebrow{font-size:10px;letter-spacing:.13em}.discovery h2{font-size:16px;margin:7px 0 0;font-weight:650}.featured{width:135px;height:132px;margin:3px auto 0;background:radial-gradient(ellipse,#e9e5f8 0%,transparent 70%)}.featured canvas{width:100%;height:100%}.level-label{font-size:10px;font-weight:800;color:var(--purple);letter-spacing:.12em}.discovery h3{font-size:18px;margin:5px 0}.discovery p{font-size:12px;color:var(--muted);margin:0}.restart{display:block;margin:23px auto 0;border:0;background:none;color:var(--muted);font-size:13px;padding:10px 20px}.collection{max-width:1176px;margin:26px auto 0;border-top:1px solid var(--line);padding-top:22px;display:flex;gap:44px;align-items:center}.collection-heading{min-width:100px}.collection-heading h2{font-size:16px;margin:0 0 6px}.collection-heading span{font-size:12px;color:var(--muted)}.evolution{display:flex;flex:1;justify-content:space-between;align-items:center;gap:8px}.buddy-slot{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;flex:1}.buddy-slot:not(:last-child):after{content:'·';position:absolute;right:-6px;top:28px;color:#c5bfd3}.buddy-slot canvas{width:64px;height:64px;max-width:100%;object-fit:contain;transition:filter .3s,opacity .3s}.buddy-slot.locked canvas{filter:grayscale(1);opacity:.25}.buddy-slot span{font-size:10px;color:#9890a4;margin-top:2px}.buddy-slot.unlocked span{color:var(--purple);font-weight:700}footer{max-width:1176px;display:flex;justify-content:space-between;margin:24px auto 22px;font-size:11px;color:#a19aaa;letter-spacing:.02em}.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--purple);font-size:15px;background:#f5f2fa}.loading[hidden]{display:none}.toast{position:absolute;left:50%;top:32%;transform:translate(-50%,-5px);background:#302143e8;color:white;border-radius:30px;padding:11px 19px;white-space:nowrap;font-size:14px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}.toast.visible{opacity:1;transform:translate(-50%,0)}.overlay{position:absolute;inset:0;background:#ebe5f0b8;backdrop-filter:blur(8px);display:grid;place-items:center;padding:25px}.overlay[hidden]{display:none}.overlay-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:35px 27px;text-align:center;width:100%;max-width:340px;box-shadow:0 12px 40px #2d1c4220}.overlay-card h2{font-size:29px;letter-spacing:-.04em;margin:14px 0}.overlay-card p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 25px}.primary{background:var(--purple);color:white;border:0;border-radius:14px;padding:14px 20px;width:100%;font-weight:650}.text-button{border:0;background:none;margin-top:12px;padding:10px;font-size:14px;color:var(--muted)}.text-button[hidden]{display:none}
@media(min-width:1000px) and (max-height:880px){.header{height:84px}.workspace{grid-template-columns:230px minmax(300px,390px) 230px;justify-content:center;gap:42px}.collection{margin-top:18px;padding-top:16px;max-width:1090px}.left-panel{padding-top:0}.intro{margin:14px 0 19px}.scoreboard{margin-bottom:20px}.desktop-tip{margin:12px 0}.discovery{padding-top:22px}.shake-card{padding:20px}.featured{width:114px;height:108px}footer{max-width:1090px;margin-top:16px}}
@media(max-width:1050px){.workspace{gap:25px;padding:0 25px;grid-template-columns:minmax(160px,1fr) minmax(300px,410px) minmax(160px,1fr)}.shake-card{padding:20px 15px}.shake-card h2{font-size:21px}.collection,footer{margin-left:25px;margin-right:25px}.header{padding:0 25px}.keyboard-hint{display:none}h1{font-size:36px}.scoreboard{padding:17px}.scoreboard>strong{font-size:47px}.collection{gap:20px}}
@media(max-width:760px){.header{height:70px;padding:0 18px}.header-note{display:none}.wordmark{font-size:12px;gap:9px}.wordmark small{font-size:10px}.brand-dot{width:36px;height:36px;border-radius:12px;font-size:32px}.icon-button{min-height:36px;padding:5px 12px}.workspace{display:flex;flex-direction:column;gap:0;padding:0 16px;max-width:480px}.left-panel{width:100%;padding:0}.edition,h1,.intro,.desktop-tip{display:none}.scoreboard{max-width:none;border:0;border-radius:0;box-shadow:none;background:none;padding:8px 4px 0;margin:0;display:flex;align-items:center;gap:12px}.score-label{font-size:13px;gap:5px;flex-direction:column}.scoreboard>strong{font-size:35px;line-height:1}.best-line{margin:0 0 0 auto;padding:0;border:0;gap:9px;font-size:12px}.game-top{height:49px;padding:0 4px}.next canvas{width:36px;height:36px}.small-button{height:32px;width:34px;border-radius:10px}.arena{border-radius:23px}.game-panel{max-width:min(100%,calc((100svh - 255px)*.7541));min-width:245px;margin:auto}.game-bottom{padding:9px 0;justify-content:center;font-size:11px}.right-panel{display:flex;align-items:center;gap:10px;width:100%;padding:4px 0 0;max-width:390px}.shake-card{display:flex;align-items:center;gap:14px;padding:0;background:none;border:0;flex:1}.shake-card>.eyebrow,.shake-card>h2,.shake-card>p,.discovery{display:none}.shake-button{max-width:166px;min-width:136px;padding:9px 10px;font-size:15px;border-radius:12px}.shake-button small{display:none}.charge{flex:1;margin:0}.charge>div{font-size:10px;gap:5px;white-space:nowrap}.charge progress{margin-top:6px}.restart{margin:0;padding:10px 7px;white-space:nowrap;font-size:12px}.collection{display:block;max-width:448px;margin:22px auto 0;padding:16px 16px 0;border-top:0}.collection-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.collection-heading h2{font-size:14px;margin:0}.collection-heading span{font-size:11px}.evolution{gap:3px}.buddy-slot canvas{width:43px;height:43px}.buddy-slot span{font-size:9px}.buddy-slot:not(:last-child):after{top:17px;right:-3px}.buddy-slot.locked span{visibility:hidden}footer{justify-content:center;margin:18px 10px;font-size:10px}footer>span{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

.retry-loading{cursor:pointer}.wordmark small{letter-spacing:.1em}.intro{font-size:16px}.shake-card p{font-size:14px}.desktop-tip p{font-size:14px}.discovery p{font-size:14px}.game-bottom{font-size:13px}.score-label{font-size:14px}
@media(min-width:761px) and (max-height:760px){.header{height:60px}.workspace{grid-template-columns:minmax(170px,230px) minmax(250px,350px) minmax(170px,230px);gap:25px}.game-panel{max-width:calc((100svh - 155px)*.7541);margin:auto}.desktop-tip,.left-panel>.intro,.edition{display:none}.left-panel h1{font-size:36px;margin-bottom:22px}.scoreboard{margin-bottom:0}.shake-card{padding:16px}.shake-card p{margin-bottom:12px}.discovery{padding-top:15px}.featured{height:95px;width:95px}.discovery h2{font-size:14px}.restart{margin-top:10px}.collection{margin-top:12px;padding-top:12px}}
@media(max-width:760px){.game-bottom{font-size:11px}.score-label{font-size:12px}.header .wordmark small{font-size:9px}.shake-button{min-width:110px}.charge>div{white-space:normal}.collection{margin-top:12px}}

/* Keep the fixed 460x610 game world, but give the playable surface priority
   inside wide QuestHub iframes. Secondary copy stays below the game instead of
   competing with the arena. */
@media (min-width:761px){
  .header{height:64px;padding:0 28px}.header-note{display:none}
  .workspace{max-width:1120px;grid-template-columns:minmax(120px,150px) minmax(300px,1fr) minmax(132px,165px);gap:18px;padding:0 18px;align-items:start}
  .left-panel{padding:48px 0 0}.edition,.left-panel>h1,.left-panel>.intro,.desktop-tip{display:none}
  .scoreboard{max-width:none;margin:0;padding:15px 14px;border-radius:18px}.scoreboard>strong{font-size:48px}.best-line{font-size:11px;padding-top:9px;margin-top:7px}.score-label{font-size:12px}
  .game-panel{justify-self:center;max-width:min(540px,calc((100svh - 144px)*.7541));margin:0}
  .game-top{height:48px;padding:0 4px}.game-bottom{min-height:32px;padding:8px 2px}
  .right-panel{padding-top:48px}.shake-card{padding:14px 12px}.shake-card>.eyebrow,.shake-card>h2,.shake-card>p{display:none}.shake-button{padding:10px 7px;font-size:15px}.charge{margin-top:12px}.charge>div{font-size:10px}.charge progress{margin-top:6px}
  .discovery{padding-top:13px}.discovery>.eyebrow,.discovery>h2,.featured,.discovery>p{display:none}.discovery h3{font-size:15px;margin:3px 0}.level-label{font-size:9px}.restart{margin-top:9px;padding:8px 6px;font-size:12px}
  .collection{max-width:1040px;margin-top:18px;padding-top:14px;gap:22px}.buddy-slot canvas{width:52px;height:52px}.buddy-slot:not(:last-child):after{top:22px}
  footer{max-width:1040px;margin-top:16px}
}
@media (min-width:761px) and (max-height:560px){
  .header{height:44px;padding:0 18px}.brand-dot{width:34px;height:34px;border-radius:11px;font-size:29px}.wordmark{font-size:12px}.wordmark small{font-size:9px;margin-top:2px}.icon-button{min-height:32px;padding:4px 10px}
  .workspace{grid-template-columns:minmax(110px,132px) minmax(210px,1fr) minmax(122px,142px);gap:14px;padding:0 14px}
  .left-panel,.right-panel{padding-top:38px}.scoreboard{padding:10px 9px}.scoreboard>strong{font-size:37px}.best-line{padding-top:6px;margin-top:5px}.score-label{font-size:10px}
  .game-panel{max-width:min(340px,calc((100svh - 108px)*.7541))}.game-top{height:38px}.next canvas{width:31px;height:31px}.small-button{width:31px;height:31px}.game-bottom{min-height:22px;padding:4px 1px;font-size:10px}.keyboard-hint{display:none}
  .shake-card{padding:10px 8px}.shake-button{padding:8px 5px;font-size:13px}.shake-icon{font-size:21px}.charge{margin-top:8px}.charge>div{font-size:9px}.discovery{display:none}.restart{margin-top:6px;padding:6px 4px;font-size:11px}
  .collection,footer{display:none}
}

/* Desktop balance pass: keep the larger board, but restore the visual anchors
   that make Jelly Buddies feel like a designed game rather than a bare canvas. */
@media (min-width:860px) and (min-height:580px){
  html,body{overflow:hidden}
  .workspace{max-width:1100px;grid-template-columns:minmax(170px,190px) minmax(300px,480px) minmax(180px,200px);justify-content:center;gap:24px;padding:0 16px;align-items:start}
  .left-panel{padding:52px 0 0}.edition,.desktop-tip{display:none}
  .left-panel>h1{display:block;font-size:clamp(28px,2.8vw,34px);line-height:1.15;letter-spacing:-.055em;margin:0 0 10px}
  .left-panel>.intro{display:block;max-width:185px;font-size:12px;line-height:1.5;margin:0 0 18px}
  .scoreboard{max-width:190px;padding:17px 16px;border-radius:20px}.scoreboard>strong{font-size:50px}.best-line{font-size:12px;padding-top:10px;margin-top:8px}.score-label{font-size:12px}
  .game-panel{max-width:min(500px,calc((100svh - 144px)*.7541))}
  .right-panel{padding-top:48px}.shake-card{padding:14px 13px}.shake-card>.eyebrow,.shake-card>p{display:none}.shake-card>h2{display:block;font-size:16px;margin:0 0 11px;letter-spacing:-.025em}
  .discovery{padding-top:18px}.discovery>.eyebrow{display:block;font-size:9px}.discovery>h2,.discovery>p{display:none}.featured{display:block;width:104px;height:100px;margin:4px auto 0}.level-label{font-size:9px}.discovery h3{font-size:16px;margin:4px 0}.restart{margin-top:10px;padding:8px 6px;font-size:12px}
  .collection,footer{display:none}
}

/* Treat scaled desktop viewports as desktop too. At common 125% browser/OS
   scaling the Portal iframe can fall just below the spacious desktop query. */
@media (min-width:800px) and (min-height:520px) and (max-height:579.98px),
       (min-width:800px) and (max-width:859.98px) and (min-height:520px){
  html,body{overflow:hidden}
  .workspace{max-width:820px;grid-template-columns:minmax(135px,155px) minmax(280px,1fr) minmax(140px,160px);justify-content:center;gap:16px;padding:0 12px;align-items:start}
  .left-panel{padding-top:38px}.edition,.desktop-tip{display:none}
  .left-panel>h1{display:block;font-size:22px;line-height:1.12;letter-spacing:-.05em;margin:0 0 8px}
  .left-panel>.intro{display:block;max-width:155px;font-size:11px;line-height:1.4;margin:0 0 12px}.left-panel>.intro br{display:none}
  .scoreboard{max-width:155px;padding:12px 11px;border-radius:16px}.scoreboard>strong{font-size:40px}.best-line{font-size:10px;padding-top:7px;margin-top:6px}.score-label{font-size:10px}
  .right-panel{padding-top:38px}.shake-card{padding:10px 9px}.shake-card>.eyebrow,.shake-card>p{display:none}.shake-card>h2{display:block;font-size:14px;margin:0 0 8px;letter-spacing:-.02em}
  .discovery{display:block;padding-top:10px}.discovery>.eyebrow{display:block;font-size:8px}.discovery>h2,.discovery>p{display:none}.featured{display:block;width:78px;height:74px;margin:2px auto 0}.level-label{font-size:8px}.discovery h3{font-size:14px;margin:2px 0}.restart{margin-top:6px;padding:6px 4px;font-size:10px}
  .collection,footer{display:none}
}