/* ==========================================================================
   Bumppies stage — the design system's fixed 1600 × 900 canvas, scaled to fill.
   Loaded LAST. Screens rebuilt one-to-one from the DS ui_kit use the `bp-` vocabulary
   below; every value is the mock-up's own px/rem (no viewport units inside the stage).
   ========================================================================== */

/* ---- 1. Shell: stage viewport + compact route strip below it (like the kit's switcher) ---- */
.gdd-app{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100dvh;min-height:100dvh;background:#0a1420;overflow:hidden}
.gdd-screen-host{order:1;position:relative;min-height:0;overflow:hidden;background:#0a1420}
.gdd-global-bar{order:2;min-height:0;padding:4px 10px;gap:4px 8px;flex-wrap:wrap;justify-content:center;background:linear-gradient(#2a150c,#140a06);border-top:2px solid #8f4e22;border-bottom:0;box-shadow:none}
.gdd-global-bar nav{gap:4px;flex-wrap:wrap;justify-content:center;overflow:visible}
.gdd-global-bar nav button{min-height:26px;padding:3px 8px;border:2px solid #4a2617;border-radius:9px;background:linear-gradient(#7d411f,#47200f);color:#fff6d8;font:1000 .62rem var(--font-ui);letter-spacing:.09em;text-shadow:none}
.gdd-global-bar nav button:hover{transform:none;background:linear-gradient(#94502a,#5a2a14)}
.gdd-global-bar nav button.is-active{border-color:#67e8f9;background:linear-gradient(#12474f,#0a2b31);color:#bff6ff;box-shadow:none}
.gdd-global-bar .gdd-brand{min-height:26px}
.gdd-global-bar .gdd-brand>span>img{height:22px}
.gdd-global-bar>.gdd-offline{min-height:22px;padding:2px 8px;font-size:.55rem}
.bp-stage{position:absolute;left:50%;top:50%;width:var(--stage-w,1600px);height:var(--stage-h,900px);transform:translate(-50%,-50%) scale(var(--stage-scale,1));transform-origin:center center;overflow:hidden;background:#0a1420;container-type:size;font-family:var(--font-ui);font-weight:var(--weight-ultra,1000)}
.bp-stage>main{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;overflow:hidden}
.bp-stage .gdd-landscape-gate{display:none!important}
.gdd-rotate-gate{display:none}
@media (orientation:portrait){
  /* Portrait: a rotate banner takes the top 38% (PORTRAIT_BANNER in src/ui/stage.js) and the stage
     previews, still interactive, in the remaining 62% so every route stays reachable. */
  .gdd-screen-host>.bp-stage{top:69%}
  .gdd-rotate-gate{position:absolute;left:0;right:0;top:0;height:38%;z-index:5;display:grid;place-items:center;align-content:center;gap:10px;padding:18px;text-align:center;background:linear-gradient(180deg,#123044,#0a1a26 58%,#061119);border-bottom:3px solid #e8a445;color:#fff8df}
  .gdd-rotate-gate h1{margin:0;font:700 2rem var(--font-display)}
  .gdd-rotate-gate p{margin:0;color:#f8d8ac;font:800 1rem var(--font-ui)}
  .gdd-rotate-phone{width:54px;height:96px;border:4px solid #e8a445;border-radius:12px;animation:gdd-rotate 1.6s ease-in-out infinite alternate}
  @keyframes gdd-rotate{to{transform:rotate(90deg)}}
}
@keyframes bp-idle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.02)}}
@keyframes bp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bp-stage *{animation:none!important;transition:none!important}}
.bp-stage button{font-family:inherit}

/* ---- 2. Shared vocabulary (MetaPages / RoundScreens `page`, `panel`, `kick`, `Head`) ---- */
.bp-page{position:relative;width:100%;height:100%;overflow:hidden;font-family:var(--font-ui);color:#fff3d4}
.bp-bg-wood{position:absolute;inset:0;background:linear-gradient(180deg,#123044,#0a1a26 58%,#061119)}
.bp-bg-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 26%,rgba(96,196,232,.16),transparent 52%),radial-gradient(ellipse at 88% 78%,rgba(255,176,86,.13),transparent 40%)}
.bp-panel{border:5px solid #9d5524;border-radius:22px;background:linear-gradient(#783a1c,#51220f);box-shadow:inset 0 0 0 3px #e8a445,inset 0 0 22px #301006,0 12px 26px rgba(0,0,0,.42)}
.bp-panel-sm{border:5px solid #9d5524;border-radius:18px;background:linear-gradient(#783a1c,#51220f);box-shadow:inset 0 0 0 2px var(--gold-400,#e8a445),inset 0 0 18px #301006,0 10px 24px rgba(0,0,0,.42)}
.bp-kick{color:#ffdc6e;font:1000 .68rem var(--font-ui);letter-spacing:.13em}
.bp-head{display:grid;gap:5px;margin-bottom:16px;justify-items:start;text-align:left}
.bp-head.is-center{justify-items:center;text-align:center}
.bp-head>h1{margin:0;color:#fff8df;font:700 2.5rem var(--font-display);line-height:.95;text-shadow:0 3px 0 #361108}
.bp-head>p{margin:0;max-width:84ch;color:#f8d8ac;font:800 .86rem var(--font-ui);line-height:1.38}
.bp-frame{position:absolute;inset:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;padding:30px 40px}
.bp-avatar{display:grid;place-items:center;overflow:hidden;border-radius:50%;border:3px solid #e5ad4b;background:radial-gradient(circle at 50% 38%,#4a2718 0 58%,#241009 100%)}
.bp-avatar>img{width:94%;height:94%;object-fit:contain;object-position:center bottom}
.bp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- 3. Auth (AuthScreen.jsx) ---- */
.bp-auth{position:relative;width:100%;height:100%;overflow:hidden;background:#0b2530;color:#fff3d4;font-family:var(--font-ui)}
.bp-auth-scene{position:absolute;inset:0;display:grid;grid-template-columns:minmax(250px,.88fr) minmax(330px,1.12fr);align-items:center;gap:60px;padding:38px 80px;background:linear-gradient(90deg,rgba(5,32,42,.18),rgba(5,32,42,.08)),var(--bp-auth-bg) center/cover no-repeat,#0b2530}
.bp-auth-vignette{position:absolute;inset:0;background:radial-gradient(circle at 72% 47%,transparent 0 18%,rgba(6,27,35,.28) 78%),linear-gradient(0deg,rgba(4,23,30,.58),transparent 38%);pointer-events:none}
.bp-auth-logo{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:400px;max-height:171px;object-fit:contain;filter:drop-shadow(0 5px 0 rgba(74,14,50,.55))}
.bp-auth-pack{position:relative;align-self:end;display:flex;align-items:flex-end;gap:0;padding-bottom:10px}
.bp-auth-pack>img{object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 7px rgba(16,37,43,.5))}
.bp-auth-pack>img:nth-child(1){width:190px}
.bp-auth-pack>img:nth-child(2){width:155px;margin-left:-34px}
.bp-auth-pack>img:nth-child(3){width:170px;margin-left:-34px}
.bp-auth-card{position:relative;grid-column:2;justify-self:end;width:min(100%,560px);padding:34px;border:9px solid #9d5524;border-radius:38px;background:linear-gradient(#783a1c,#51220f);box-shadow:inset 0 0 0 3px #e8a445,inset 0 0 22px #301006,0 16px 34px rgba(0,0,0,.46)}
.bp-auth-copy{text-align:center}
.bp-auth-copy>.bp-kick{display:inline-block;font-size:.8rem}
.bp-auth-copy>h1{margin:.18em 0 .22em;color:#fff8df;font:700 2.9rem var(--font-display);line-height:.95;text-shadow:0 3px 0 #361108;overflow-wrap:anywhere}
.bp-auth-copy>p{max-width:42ch;margin:0 auto 16px;color:#f8d8ac;font:800 .95rem var(--font-ui);line-height:1.38}
.bp-auth-form,.bp-auth-actions{display:grid;gap:10px}
.bp-auth-links{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.bp-auth-pill{display:grid;justify-items:center;margin-top:12px}
.bp-auth-message{min-height:18px;color:#fff0a8;font:900 .78rem var(--font-ui);text-align:center}
.bp-auth-message:empty{display:none}
.bp-auth .ds-field input{min-height:44px}

/* ---- 4. Home (HomeScreen.jsx — Living Island) ---- */
.bp-home{position:relative;width:100%;height:100%;overflow:hidden;color:#fff;font-family:var(--font-ui)}
.bp-home-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(69,199,236,.09) 0,transparent 52%,rgba(8,45,58,.31) 100%),var(--bp-home-bg) center/cover no-repeat,#2d9bc0}
.bp-home-light{position:absolute;inset:0;background:radial-gradient(ellipse at 55% 34%,rgba(255,255,255,.14) 0 15%,transparent 45%),linear-gradient(90deg,rgba(7,31,47,.33) 0,transparent 21% 79%,rgba(7,31,47,.33) 100%);pointer-events:none}
.bp-home-ground{position:absolute;inset:auto 0 0;height:24%;background:linear-gradient(0deg,rgba(6,30,46,.91) 0,rgba(11,51,65,.49) 36%,transparent 100%);pointer-events:none}
.bp-home-pack{position:absolute;inset:0;pointer-events:none}
.bp-home-puppy{position:absolute;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 5px rgba(16,37,43,.46));animation:bp-idle 2.6s ease-in-out infinite;pointer-events:none}
.bp-home-puppy.is-1{left:18%;top:35%;width:118px;animation-delay:0s}
.bp-home-puppy.is-2{left:29%;top:33%;width:96px;animation-delay:-.4s}
.bp-home-puppy.is-3{left:39%;top:35%;width:104px;animation-delay:-.8s}
.bp-home-puppy.is-4{left:57%;top:29%;width:100px;animation-delay:-1.2s}
.bp-home-puppy.is-5{left:21%;bottom:24%;width:108px;animation-delay:-1.6s}
.bp-home-puppy.is-6{left:41%;bottom:22%;width:98px;animation-delay:-2s}
.bp-home-profile{position:absolute;z-index:32;left:14px;top:12px;width:420px;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;filter:drop-shadow(0 6px 4px rgba(16,37,56,.5))}
.bp-home-profile-grid{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:8px}
.bp-home-avatar{position:relative;width:104px;aspect-ratio:1;display:grid;place-items:center}
.bp-home-avatar>.is-ring{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bp-home-avatar>.is-puppy{position:relative;width:68%;height:68%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 4px 2px rgba(23,53,74,.5))}
.bp-home-copy{position:relative;min-width:0}
.bp-home-copy>strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff7e2;font:700 1.6rem var(--font-display);line-height:1;text-shadow:0 3px 0 #59324b,0 5px 7px rgba(7,24,39,.5)}
.bp-home-meta{display:flex;align-items:center;gap:6px;margin-top:4px}
.bp-home-level{display:grid;place-items:center;width:38px;height:38px;border:3px solid #713a29;border-radius:50%;background:linear-gradient(#ffc849,#e77a1e);color:#fff6d8;font:1000 .8rem var(--font-ui);text-shadow:0 2px 0 #6f3525}
.bp-home-badge{display:flex;align-items:center;gap:5px;min-height:34px;padding:2px 12px 2px 10px;border:3px solid #673529;border-radius:14px;background:linear-gradient(180deg,#45233f,#24142f);box-shadow:0 3px 0 #1a1023;color:#fff6dc;font:1000 .8rem var(--font-ui);letter-spacing:.06em}
.bp-home-badge[data-account-status="GUEST"]{color:#ffe08a}
.bp-home-rank{margin-top:6px}
.bp-home-rank .ds-rank-tier{font-size:.72rem;letter-spacing:.06em}
.bp-home-season>strong{white-space:nowrap}
.bp-home-wallets{display:flex;gap:7px;margin-top:8px;margin-left:112px}
.bp-home-logo{position:absolute;z-index:26;left:50%;top:6px;transform:translateX(-50%);width:420px;max-height:153px;object-fit:contain;filter:drop-shadow(0 9px 5px rgba(18,37,60,.26));pointer-events:none}
.bp-home-utilities{position:absolute;z-index:35;right:14px;top:12px;display:flex;gap:10px}
.bp-home-utility{position:relative;width:66px;height:66px;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 6px 4px rgba(11,34,55,.4))}
.bp-home-utility>img{width:100%;height:100%;object-fit:contain}
.bp-home-utility>i{position:absolute;right:4px;top:2px;width:14px;height:14px;border-radius:50%;border:2px solid #521912;background:#ff4438}
.bp-home-play{position:absolute;z-index:32;right:8%;top:200px;width:220px;height:220px;padding:0;border:0;border-radius:50%;cursor:pointer;background:radial-gradient(circle,#ff5c73 0 47%,#a11b46 49% 62%,#ffd078 64% 69%,#6d3529 71% 100%);box-shadow:0 10px 0 #3e2530,0 18px 28px rgba(11,38,58,.5);transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
.bp-home-play:hover{transform:scale(1.04);filter:saturate(1.08) brightness(1.04);box-shadow:0 10px 0 #3e2530,0 22px 34px rgba(11,38,58,.55)}
.bp-home-play:active{transform:scale(.98)}
.bp-home-play>i{position:absolute;right:-24%;top:38%;z-index:-1;width:38%;height:24%;border:5px solid #6d3529;border-left:0;border-radius:0 12px 12px 0;background:linear-gradient(#a86636,#6c3d24);box-shadow:inset 0 0 0 3px #cf9654}
.bp-home-play>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(97,38,55,.4))}
.bp-home-play>strong{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bp-home-party{position:absolute;z-index:31;right:5%;top:470px;width:440px;aspect-ratio:2.9/1;padding:0;border:0;background:none;color:inherit;cursor:pointer;filter:drop-shadow(0 7px 5px rgba(12,36,58,.44))}
.bp-home-party>.is-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bp-home-party>strong{position:absolute;left:50%;top:21.1%;z-index:2;width:48%;transform:translateX(-50%);text-align:center;color:#fff2d1;font:1000 .92rem var(--font-ui);letter-spacing:.04em;text-shadow:0 2px 0 #4b2a24}
.bp-home-party-slots{position:absolute;z-index:2;left:7.29%;right:7.76%;top:43%;height:35%;display:grid;grid-template-columns:repeat(8,1fr);gap:4.6%}
.bp-home-party-slots>i{display:grid;place-items:center;aspect-ratio:1;align-self:center;overflow:hidden;border-radius:50%;color:#a97e57;font-style:normal;background:transparent}
.bp-home-party-slots>i.is-filled{outline:2px solid #ffd375;background:rgba(138,217,223,.8)}
.bp-home-party-slots>i>img{width:116%;height:116%;object-fit:contain;object-position:center bottom}
.bp-home-party-slots>i>b{font:1000 1rem var(--font-ui);opacity:.9}
.bp-home-season{position:absolute;z-index:34;left:14px;bottom:14px;width:130px;height:160px;display:grid;place-items:center;gap:1px;padding:7px;border:4px solid #7b522d;border-radius:15px;background:linear-gradient(160deg,#18273b,#0a1727);box-shadow:inset 0 0 0 2px #f1bf51,0 6px 0 #121523,0 10px 18px rgba(0,0,0,.45);color:#ffe9b1;cursor:pointer}
.bp-home-season>small{font:1000 .62rem var(--font-ui);letter-spacing:.08em}
.bp-home-season>span{width:86px;height:74px;display:grid;place-items:center}
.bp-home-season>span>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.bp-home-season>strong{font:1000 .68rem var(--font-ui)}
.bp-home-dock{position:absolute;z-index:35;left:50%;bottom:10px;width:880px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.bp-home-dock>*{height:175px}
.bp-home .gdd-home-party-panel{position:absolute;z-index:60;left:50%;top:50%;transform:translate(-50%,-50%);width:560px;max-height:820px}

/* ---- 5. Lobby (LobbyScreen.jsx — Custom Room) ---- */
.bp-lobby{position:relative;width:100%;height:100%;overflow:hidden;background:#163c42;color:#fff2c8;font-family:var(--font-ui);text-shadow:0 2px 0 #39150f,0 0 5px rgba(45,15,10,.65)}
.bp-lobby-bg{position:absolute;inset:0;background:linear-gradient(rgba(3,28,35,.03),rgba(3,28,35,.1)),var(--bp-lobby-bg) center/cover no-repeat}
.bp-lobby-title{position:absolute;z-index:5;left:33.5%;top:2.6%;width:33%}
.bp-lobby-modes{position:absolute;z-index:6;left:.8%;top:3.5%;width:23.5%}
.bp-lobby-modes>.is-rows{position:absolute;inset:12% 13.5% 12%;display:grid;grid-template-rows:repeat(4,1fr);gap:3.5%}
.bp-lobby-settings{position:absolute;z-index:6;right:.4%;top:11.2%;width:22.4%}
.bp-lobby-settings>.is-rows{position:absolute;inset:15% 12% 14%;display:grid;grid-template-rows:1fr .86fr 1fr 1.25fr;align-items:center}
.bp-lobby-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;min-height:44px;border-bottom:1px solid rgba(255,231,178,.3);color:#fff4d6;font:1000 var(--text-body,.88rem) var(--font-ui)}
.bp-lobby-row>span:last-child{color:#ffe9b1}
.bp-lobby-code{display:flex;align-items:center;gap:6px}
.bp-lobby-code>b{color:#ffe9b1;letter-spacing:.09em}
.bp-lobby-code>button{flex:0 0 auto;min-height:28px;padding:.22rem .45rem;border:2px solid #d99b42;border-radius:.42rem;background:#5b2c18;color:#fff6d6;font:1000 .62em var(--font-ui);cursor:pointer}
.bp-lobby-utilities{position:absolute;z-index:7;right:24%;top:4%;display:flex;gap:10px}
.bp-lobby-utilities>button{width:58px;height:58px;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 6px 4px rgba(11,34,55,.45))}
.bp-lobby-utilities>button>img{width:100%;height:100%;object-fit:contain}
.bp-lobby-seats{position:absolute;z-index:4;left:8.5%;right:8.5%;top:43.5%;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0}
.bp-lobby-leave{position:absolute;z-index:8;left:2.2%;bottom:9.5%;width:14%;height:10.5%}
.bp-lobby-start{position:absolute;z-index:8;left:35.5%;bottom:9.6%;width:29%;height:13.5%}
.bp-lobby-ready{position:absolute;z-index:8;right:15.5%;bottom:9.5%;width:13.5%;height:10.5%}
.bp-lobby-ready.is-off{filter:grayscale(.55)}
.bp-lobby-chat{position:absolute;z-index:8;left:33%;bottom:1.4%;width:34%;height:8.6%}
.bp-lobby-friends{position:absolute;z-index:8;right:1.5%;bottom:8.5%;width:11.5%;aspect-ratio:1;padding:0;border:0;background:transparent;color:#fff4d5;cursor:pointer;container-type:inline-size}
.bp-lobby-friends>.is-shell{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bp-lobby-friends>.is-icon{position:absolute;z-index:1;left:30%;right:30%;top:18%;width:40%;height:42%;object-fit:contain}
.bp-lobby-friends>strong{position:absolute;z-index:1;left:15%;right:15%;bottom:18%;font:1000 11cqw var(--font-ui)}
.bp-lobby-spectators{position:absolute;z-index:7;left:2%;top:60%;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.35);color:#f1cf7a;font:1000 .62rem var(--font-ui);letter-spacing:.1em}
.bp-lobby-spectators[hidden]{display:none}
.bp-lobby-status{position:absolute;z-index:9;left:50%;top:52%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:12px;width:min(560px,60%);padding:22px 26px;text-align:center}
.bp-lobby-status>h2{margin:0;color:#fff8df;font:700 1.8rem var(--font-display);line-height:1;text-shadow:0 3px 0 #361108}
.bp-lobby-status>p{margin:0;color:#f8d8ac;font:800 .86rem var(--font-ui)}
.bp-lobby-status>div{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.bp-lobby-join{position:absolute;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;gap:10px;width:min(520px,56%);padding:24px 28px}
.bp-lobby-join>h2{margin:0;color:#fff8df;font:700 1.6rem var(--font-display);line-height:1;text-shadow:0 3px 0 #361108}
.bp-lobby-join>p{margin:0;color:#f8d8ac;font:800 .82rem var(--font-ui)}
.bp-lobby-join>div{display:flex;gap:10px;flex-wrap:wrap}
.bp-lobby-join[hidden],.bp-lobby-join-backdrop[hidden]{display:none}

/* Home world fills the stage (its children are absolutely composed) */
.bp-home-world{position:absolute;inset:0}
.bp-home-party-slots>i>img{object-fit:cover;object-position:center 30%}
/* Home is a full-bleed painted world: no route strip below it */
.gdd-app.screen-home>.gdd-global-bar{display:none}
@media (orientation:portrait){
  /* Home and Lobby gate portrait completely (the stage waits below the viewport); other routes keep the scaled preview. */
  .gdd-app.screen-home .gdd-rotate-gate,.gdd-app.screen-queue .gdd-rotate-gate{height:100%;border-bottom:0}
  .gdd-app.screen-home .gdd-screen-host>.bp-stage,.gdd-app.screen-queue .gdd-screen-host>.bp-stage{top:150%}
}
/* Phone landscape: the route strip would cost 12% of the height — the stage takes the whole viewport */
@media (max-height:520px){.gdd-app>.gdd-global-bar{display:none}}
.gdd-app.screen-title>.gdd-global-bar,.gdd-app.screen-auth>.gdd-global-bar{display:none}
.bp-home-party-slots>i>img{width:100%;height:100%}
.bp-auth-copy>h1{text-transform:uppercase}
/* Legacy "sign in with email" hook: the mock's card already is the form, so the control stays invisible but hit-testable */
.bp-auth .bp-sr[data-testid="auth-sign-in"]{clip:auto;left:6px;top:6px;width:6px;height:6px;opacity:0;z-index:9;overflow:hidden;pointer-events:auto}
/* The profile cluster owns the top-left box; the profile button fills it */
.bp-home-cluster{position:absolute;z-index:32;left:14px;top:12px;width:420px}
.bp-home-cluster>.bp-home-profile{position:relative;left:auto;top:auto;width:100%}

/* Home: LEARN TO PLAY plaque beside PLAY (onboarding spec §3). Progress and lock come from the server. */
.bp-home-learn{position:absolute;z-index:33;right:calc(8% + 244px);top:236px;width:196px;min-height:112px;display:grid;justify-items:center;align-content:center;gap:2px;padding:10px 12px;border:4px solid #7b522d;border-radius:16px;background:linear-gradient(160deg,#2b4d63,#132a3c);box-shadow:inset 0 0 0 2px #f1bf51,0 6px 0 #121523,0 10px 18px rgba(0,0,0,.45);color:#ffe9b1;cursor:pointer;transition:filter .16s ease}
.bp-home-learn:hover{filter:brightness(1.08)}
.bp-home-learn>small{font:1000 .62rem var(--font-ui);letter-spacing:.12em}
.bp-home-learn>strong{font:1000 1.5rem var(--font-display);line-height:1;text-shadow:0 3px 0 #2b1430}
.bp-home-learn>span{padding:2px 10px;border-radius:999px;background:#ffd078;color:#3a1f0d;font:1000 .56rem var(--font-ui);letter-spacing:.1em}
.bp-home-learn[data-locked="true"]{border-color:#ff5c73;box-shadow:inset 0 0 0 2px #ffd078,0 0 0 4px rgba(255,92,115,.35),0 6px 0 #121523,0 10px 18px rgba(0,0,0,.45);animation:bp-learn-nudge 1.4s ease-in-out infinite alternate}
.bp-home-learn[data-locked="true"]>span{background:#ff5c73;color:#fff3cc}
.bp-home-learn[data-completed="3"]>span{background:#83d530;color:#10260a}
@keyframes bp-learn-nudge{from{box-shadow:inset 0 0 0 2px #ffd078,0 0 0 4px rgba(255,92,115,.35),0 6px 0 #121523,0 10px 18px rgba(0,0,0,.45)}to{box-shadow:inset 0 0 0 2px #ffd078,0 0 0 8px rgba(255,92,115,.55),0 6px 0 #121523,0 10px 24px rgba(0,0,0,.5)}}
.bp-home-play-note{position:absolute;z-index:33;right:8%;top:428px;width:220px;margin:0;text-align:center;color:#fff3cc;font:1000 .56rem var(--font-ui);letter-spacing:.1em;text-shadow:0 2px 0 #4b2a24}
@media (orientation:portrait){.bp-home-learn{right:auto;left:14px;top:196px;width:190px}.bp-home-play-note{display:none}}