/* Player Hub: the game, the study pages and the wordbook in one directory page. */
.hub-page{max-width:1180px;margin:auto;padding:42px 28px 64px;color:#635242;min-height:60vh}
.hub-hero{position:relative;min-height:190px;padding-right:150px}
.hub-hero h1{font-family:Georgia,serif;font-weight:500;font-size:clamp(30px,3.4vw,44px);line-height:1.15;color:#514564;margin:14px 0 0}
.hub-lede{max-width:100%;font-size:15px;line-height:1.75;color:#756579;margin:38px 0 0}
.hub-lede strong{color:#80669e}
/* Keep the return-to-game control at the far right, with its mark above the label. */
.hub-hero .player-hub{position:absolute;right:35px;top:12px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;font-size:15px;text-align:center;text-decoration:none;color:#80669e}
.hub-hero .player-hub .brand-icon{width:64px;height:64px;font-size:40px;border-radius:16px}
.hub-dashboard{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:34px 0 0}
.hub-dashboard>.hub-card{box-sizing:border-box;min-width:0;margin:0;padding:24px;border:2px solid #e2d5aa;border-radius:24px;background:#fff9e4;box-shadow:0 8px 22px #7766410c;overflow-wrap:anywhere}
.hub-progress-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.hub-progress-item,.hub-progress-list>p{display:inline-flex;align-items:center;min-height:46px;margin:0;padding:9px 16px;border:2px solid #d7c797;border-bottom-width:4px;border-radius:16px;background:#fffdf2;color:#80669e;font-size:16px;font-weight:750}
.hub-progress-list>p:not(.hub-progress-item){width:100%;border:0;background:transparent;color:#756579;font-weight:500;padding:4px 0}
.hub-wordbook-levels{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.hub-wordbook-level{display:inline-flex;align-items:center;min-height:46px;padding:9px 16px;border:2px solid #d7c797;border-bottom-width:4px;border-radius:16px;background:#fffdf2;color:#80669e;font-size:16px;font-weight:750}
.hub-wordbook-empty{color:#756579}
.hub-section{margin:46px 0 0}
.hub-section h2{font-family:Georgia,serif;font-weight:500;font-size:24px;color:#514564;margin:0 0 12px}
.hub-section p{font-size:14px;line-height:1.8;color:#756579;margin:0 0 14px}
.hub-steps{margin:0 0 16px;padding-left:22px;font-size:14px;line-height:1.8;color:#756579}
.hub-steps li{margin:0 0 8px}
.hub-steps strong{color:#635242}
.hub-figure{margin:20px 0 0}
.hub-figure img{display:block;width:min(100%,460px);height:auto;border:2px solid #e1d2ab;border-radius:20px;background:#fff9df}
.hub-cta-row{margin:22px 0 0}
.hub-cta{display:inline-block;padding:14px 26px;border:2px solid #89b354;border-bottom:5px solid #6f9b40;border-radius:16px;background:#b5dc7b;color:#415b28;font-size:15px;font-weight:800;text-decoration:none;box-shadow:inset 0 2px #e2f4bd}
.hub-cta:hover{background:#c2e58e}
.hub-cta-alt{border-color:#b59ddc;border-bottom-color:#9a7fc6;background:#e4d6f8;color:#4d3b6b;box-shadow:inset 0 2px #f3ecfd}
.hub-cta-alt:hover{background:#ece1fb}
.hub-cta:focus-visible{outline:3px solid #7560bc;outline-offset:3px}
/* The study-level directory keeps the styles the game page uses for the same block. */
.hub-page .study-links{max-width:none;margin:46px 0 0;padding:0}
@media(max-width:600px){
 .hub-page{padding:24px 16px 48px}
 .hub-hero{min-height:190px;padding-right:112px}
 .hub-hero .player-hub{right:0;top:4px;gap:6px;font-size:12px}
 .hub-hero .player-hub .brand-icon{width:48px;height:48px;font-size:30px;border-radius:12px}
 .hub-section{margin-top:34px}
 .hub-dashboard{gap:16px;margin-top:28px}
 .hub-dashboard>.hub-card{padding:20px}
 .hub-page .study-links{margin-top:34px}
 .hub-cta{display:block;text-align:center;padding:14px 18px}
}

.hub-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:22px;margin-top:42px}
.hub-columns>.hub-card{box-sizing:border-box;min-width:0;margin:0;padding:24px;border:2px solid #e2d5aa;border-radius:24px;background:#fff9e4;box-shadow:0 8px 22px #7766410c;overflow-wrap:anywhere}
.hub-columns .hub-card h2{font-family:Georgia,serif;font-weight:500;color:#514564;font-size:22px;line-height:1.25;margin:0 0 14px}
.hub-columns .hub-card p,.hub-columns .hub-steps{font-size:13px;line-height:1.65}
.hub-columns .hub-figure{margin-top:auto;padding-top:12px}
.hub-columns .hub-figure img{width:100%;max-width:100%}
.hub-columns .hub-cta-row{display:grid;gap:10px;margin-top:auto;padding-top:12px}
.hub-columns .hub-cta{display:block;text-align:center;padding:12px 14px;font-size:13px}
.hub-page .hub-columns .study-links{max-width:none;margin:0;padding:24px}
.hub-columns .study-links>p{font-size:13px;line-height:1.65}
.hub-columns .study-links nav{grid-template-columns:minmax(0,1fr);gap:9px}
.hub-columns .study-links nav a{min-height:48px;padding:10px 12px;font-size:13px}
@media(max-width:900px){.hub-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.hub-columns>#wordbook{grid-column:1/-1}}
@media(max-width:600px){.hub-columns{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:30px}.hub-columns>#wordbook{grid-column:auto}.hub-columns>.hub-card{padding:20px}.hub-page .hub-columns .study-links{padding:20px}}

.game-info{padding-top:26px;padding-bottom:52px}.game-info .hub-columns{margin-top:0}
.game-info.hub-page .hub-columns .study-links{padding:0}
@media(max-width:600px){.game-info{padding-top:12px;padding-bottom:32px}}


/* Keep both Player Hub shortcuts visible and make summary chips real links. */
.hub-hero{padding-right:480px}
.hub-hero-actions{position:absolute;right:18px;top:63px;display:flex;align-items:flex-start;gap:12px}
.hub-hero .player-hub{position:static;right:auto;top:auto;flex-shrink:0}

.hub-progress-list a.hub-progress-item,.hub-wordbook-level{text-decoration:none}
.hub-progress-list a.hub-progress-item:hover,.hub-wordbook-level:hover{background:#eee3fb;border-color:#b59ddc}
.hub-progress-list a.hub-progress-item:focus-visible,.hub-wordbook-level:focus-visible{outline:3px solid #7560bc;outline-offset:3px}
@media(max-width:900px){.hub-hero{padding-right:245px}.hub-hero-actions{right:0;gap:8px}.hub-hero .player-hub{font-size:13px}}
@media(max-width:600px){.hub-hero{min-height:0;padding:0}.hub-hero-actions{position:static;justify-content:flex-end;align-items:center;margin:0 0 14px;gap:9px}.hub-hero .player-hub{flex-direction:column;gap:4px;font-size:12px}.hub-hero .player-hub .brand-icon{width:46px;height:46px;font-size:29px;border-radius:12px}}
.hub-hero-actions .learn-vocab-link{box-sizing:border-box;width:108px;flex:0 0 108px;gap:10px;font-size:16px;line-height:1.2;color:#635242;white-space:nowrap}
.hub-hero-actions .player-hub{box-sizing:border-box;width:108px;flex:0 0 108px;gap:8px;font-size:15px;line-height:1.2;color:#80669e;white-space:nowrap}
.hub-hero-actions .learn-vocab-icon{width:60px;height:60px;border-radius:16px}
.hub-hero-actions .learn-vocab-icon img{width:42px;height:42px}
.hub-hero-actions .learn-vocab-link:hover,.hub-hero-actions .player-hub:hover{color:#9476cf}
@media(max-width:900px){.hub-hero{padding-right:360px}.hub-hero-actions{right:0;gap:8px}.hub-hero-actions .learn-vocab-link{width:100px;flex-basis:100px;gap:10px;font-size:13px}.hub-hero-actions .player-hub{width:100px;flex-basis:100px;font-size:12px;gap:6px}.hub-hero-actions .learn-vocab-icon{width:52px;height:52px;border-radius:14px}.hub-hero-actions .learn-vocab-icon img{width:36px;height:36px}.hub-hero-actions .player-hub .brand-icon{width:48px;height:48px;font-size:30px;border-radius:12px}}
@media(max-width:600px){.hub-hero{min-height:0;padding:0}.hub-lede{max-width:100%}.hub-hero-actions{position:static;justify-content:flex-end;align-items:center;margin:0 0 14px;gap:9px}.hub-hero-actions .learn-vocab-link{width:92px;flex-basis:92px;font-size:12px;gap:6px}.hub-hero-actions .player-hub{width:92px;flex-basis:92px;font-size:12px;gap:6px}.hub-hero-actions .learn-vocab-icon{width:46px;height:46px;border-radius:13px}.hub-hero-actions .learn-vocab-icon img{width:32px;height:32px}.hub-hero-actions .player-hub .brand-icon{width:46px;height:46px;font-size:30px;border-radius:13px}}
.hub-hero-actions .player-hub .brand-icon img{display:block;width:42px;height:42px;object-fit:contain}
@media(max-width:900px){.hub-hero-actions .player-hub .brand-icon img{width:36px;height:36px}}
@media(max-width:600px){.hub-hero-actions .player-hub .brand-icon img{width:32px;height:32px}}