/* Library hub. Sits on styles.css tokens; Comfortaa backs Fredoka for Cyrillic. */
.hub-body h1, .hub-body h2, .hub-body h3, .hub-body .btn,
.hub-body .tile-title, .hub-body .lang-toggle{
  font-family:'Fredoka','Comfortaa','Nunito',system-ui,sans-serif}
.hub-body .screen{display:none;place-items:start center;padding:46px 14px 28px;min-height:100vh}
.hub-body .screen.active{display:grid}
.library-card{max-width:520px;padding:24px 20px;text-align:center}
.small{font-size:13.5px}

.lang-toggle{position:fixed;top:12px;right:12px;z-index:20;font-family:'Nunito',sans-serif;font-size:12.5px;
  font-weight:800;letter-spacing:.4px;background:var(--sand);color:#8a807a;border:2px solid var(--stone);
  border-radius:20px;padding:4px 12px;min-height:0;width:auto;cursor:pointer}
.lang-toggle:active{transform:scale(.95)}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;margin:16px 0 6px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;
  background:var(--sand);border:2px solid var(--stone);border-radius:var(--radius);padding:18px 12px 16px;
  text-decoration:none;color:var(--charcoal);transition:transform .06s ease,border-color .15s ease,background .15s ease}
.tile:hover{border-color:var(--green);background:#f3f8f6}
.tile:active{transform:scale(.97)}
.tile-emoji{font-size:44px;line-height:1.1}
.tile-title{font-size:17px;font-weight:600;line-height:1.25}
.tile-sub{font-size:12.5px;color:#8a807a;font-weight:700;line-height:1.3}
.tile.locked{opacity:.55;background:#f4f1ec;border-style:dashed;pointer-events:none}
.tile .lock{font-size:12px;font-weight:800;color:#8a807a;margin-top:2px}
.tile.soon{opacity:.5;border-style:dashed;pointer-events:none}