/* The library borrows the tactile tiles and coloured questions of the game. */
.quiz-library { --library-navy:#20204e; --library-ink:#26264d; color:var(--library-ink); }
.library-welcome { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 140px auto; gap:24px; align-items:center; padding:30px 32px; background:var(--library-navy); border:2px solid #323265; border-radius:26px; color:#fff; box-shadow:0 6px 0 #d7dcec; }
.library-welcome-copy { min-width:0; }
.library-welcome h1 { margin:0 0 12px; font-size:clamp(1.8rem,3vw,2.65rem); letter-spacing:-.045em; }
.library-welcome-copy>p { margin:0 0 6px; color:#ffda8c; font-size:1.22rem; font-weight:750; }
.library-pipin { align-self:end; margin-block:-18px -30px; }
.library-pipin picture,.library-pipin img { display:block; }
.library-pipin img { width:144px; height:180px; object-fit:contain; }
.library-management { display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.library-management .button { min-height:48px; padding:11px 18px; white-space:nowrap; font-size:.94rem; }
.library-create { background:#fff; border-color:#fff; color:var(--library-navy); box-shadow:0 3px 0 #aaaaca; }
.library-create:hover { background:#efedff; border-color:#efedff; }
.library-create>span { font-size:1.4rem; font-weight:500; line-height:1; }
.library-resume { border-color:#f9cf7d; background:#ffda8c; color:var(--library-navy); box-shadow:0 3px 0 #c79b50; }
.library-resume:hover { background:#ffe3a5; }
.library-welcome .button:focus-visible { outline-color:#ffda8c; }
.library-evening { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-top:20px; padding:15px 20px; border:1px solid #aad5c5; border-radius:14px; background:#e4f5ed; color:#245941; font-size:.9rem; }
.library-evening strong { font-size:1rem; }
.library-evening .button { min-height:42px; padding:7px 11px; font-size:.9rem; }
.library-evening a { margin-left:auto; }
.library-browse { margin-top:38px; }
.library-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px; }
.library-section-heading h2 { margin:0; font-size:1.35rem; letter-spacing:-.025em; }
.library-section-heading p { margin:0; font-size:.9rem; color:#5d6481; }
.library-categories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.library-theme--all { --tile:#ece9ff; --tile-line:#bfb4ec; --tile-ink:#493b87; }
.library-theme--culture { --tile:#fff0b8; --tile-line:#d7bd65; --tile-ink:#685014; }
.library-theme--science { --tile:#d6f1df; --tile-line:#8abd9c; --tile-ink:#245c3d; }
.library-theme--geography { --tile:#d8edff; --tile-line:#93bada; --tile-ink:#285777; }
.library-theme--history { --tile:#ffe0ca; --tile-line:#d6ab8c; --tile-ink:#75472a; }
.library-theme--cinema { --tile:#ebdfff; --tile-line:#bba3db; --tile-ink:#624484; }
.library-theme--music { --tile:#ffdfe8; --tile-line:#d3a0b0; --tile-ink:#843b56; }
.library-theme--demo { --tile:#e6eaf2; --tile-line:#aab5c8; --tile-ink:#4d5a72; }
.library-category { position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:12px; row-gap:4px; align-content:center; min-width:0; min-height:104px; padding:18px; border:2px solid var(--tile-line); border-radius:17px; background:var(--tile); color:var(--library-ink); text-align:left; box-shadow:0 4px 0 var(--tile-line); transition:transform 140ms,box-shadow 140ms,border-color 140ms; }
.library-category-symbol { grid-row:1 / 3; display:grid; place-items:center; width:44px; height:48px; font-size:2rem; line-height:1; font-weight:850; color:var(--tile-ink); }
.library-category-name { align-self:end; padding-right:9px; font-size:1rem; line-height:1.3; font-weight:800; overflow-wrap:anywhere; }
.library-category-count { color:var(--tile-ink); font-size:.8rem; line-height:1.4; }
.library-category-check { display:none; position:absolute; top:-7px; right:-7px; width:25px; height:25px; align-items:center; justify-content:center; border:3px solid #f0f6ff; border-radius:50%; background:var(--library-navy); color:#fff; font-size:.75rem; font-weight:900; }
.library-category[aria-pressed=true] { border-color:var(--library-navy); box-shadow:0 4px 0 var(--library-navy); }
.library-category[aria-pressed=true] .library-category-check { display:flex; }
.library-category:hover { transform:translateY(-2px); box-shadow:0 6px 0 var(--tile-line); }
.library-category[aria-pressed=true]:hover { box-shadow:0 6px 0 var(--library-navy); }
.library-category:active { transform:translateY(2px); box-shadow:0 2px 0 var(--tile-line); }
.library-category:focus-visible { outline:3px solid #5b43b5; outline-offset:6px; }
.library-results { margin-top:38px; }
.library-results-heading { align-items:center; padding-bottom:17px; border-bottom:1px solid #cdd7e9; }
.library-results-heading h2 { font-size:1.6rem; }
.library-results-heading p { margin-top:5px; }
.library-result-count { flex-shrink:0; color:#5d6481; font-size:.85rem; }
.library-quiz-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.library-quiz { display:flex; flex-direction:column; min-width:0; padding:21px; border:1px solid #cbd3e5; border-top:5px solid var(--tile-line); border-radius:18px; background:#fff; box-shadow:0 4px 0 #dce3ef; }
.library-quiz-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.library-quiz-category { display:inline-flex; align-items:center; gap:6px; min-width:0; padding:5px 9px; border-radius:7px; background:var(--tile); color:var(--tile-ink); font-size:.76rem; font-weight:750; overflow-wrap:anywhere; }
.library-quiz-category>span { font-size:1rem; line-height:1; }
.library-quiz-mode { color:#67708a; font-size:.75rem; font-weight:650; }
.library-quiz h3 { margin:20px 0 10px; font-size:1.3rem; line-height:1.25; letter-spacing:-.025em; }
.library-quiz-meta { margin:0 0 25px; color:#5d6481; font-size:.83rem; line-height:1.6; }
.library-quiz-actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:auto; }
.library-quiz-actions .button { min-height:44px; font-size:.8rem; padding:10px 12px; border-radius:10px; }
.library-quiz-actions .button--primary { flex:1 1 auto; background:#5e49b8; border-color:#5641ad; box-shadow:0 3px 0 #392a78; color:#fff; }
.library-quiz-actions .button--primary:hover { background:#6a54c8; box-shadow:0 4px 0 #392a78; }
.library-quiz-actions .button--quiet { color:#525674; font-weight:650; }
.library-quiz-actions .button--quiet:hover { background:#f0edfa; }
.library-empty { margin-top:32px; padding:48px 24px; text-align:center; border:2px dashed #b7bfd9; border-radius:22px; }
.library-empty>span { display:block; margin-bottom:14px; font-size:2.5rem; color:#6b54b8; }
.library-empty h2 { margin:0; }
.library-empty p { margin:12px auto 24px; max-width:430px; color:#5d6481; }
@media (max-width:1050px) {
  .library-welcome { grid-template-columns:minmax(0,1fr) 120px; gap:18px; }
  .library-management { grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; }
  .library-pipin { margin-block:-15px -20px; }
  .library-pipin img { width:120px; height:150px; }
  .library-quiz-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .library-category { padding:15px 12px; grid-template-columns:32px minmax(0,1fr); column-gap:8px; }
  .library-category-symbol { width:32px; font-size:1.7rem; }
  .library-category-name { font-size:.9rem; }
}
@media (max-width:700px) {
  .library-welcome { padding:24px; border-radius:21px; grid-template-columns:minmax(0,1fr) 88px; gap:18px 8px; }
  .library-welcome h1 { font-size:1.85rem; }
  .library-welcome-copy>p { font-size:1.05rem; }
  .library-pipin { align-self:center; margin:0 -10px 0 0; }
  .library-pipin img { width:100px; height:125px; }
  .library-management .button { font-size:.85rem; min-height:46px; padding:10px 14px; }
  .library-categories { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .library-category { min-height:88px; padding:14px; }
  .library-browse,.library-results { margin-top:30px; }
  .library-section-heading { align-items:flex-start; flex-direction:column; gap:6px; margin-bottom:15px; }
  .library-section-heading h2 { font-size:1.2rem; }
  .library-section-heading p { font-size:.84rem; }
  .library-results-heading { flex-direction:row; align-items:center; }
  .library-results-heading h2 { font-size:1.4rem; }
  .library-result-count { font-size:.75rem; }
  .library-quiz-grid { gap:15px; }
  .library-quiz { padding:18px; }
}
@media (max-width:540px) {
  .library-quiz-grid { grid-template-columns:1fr; }
  .library-quiz h3 { margin-top:17px; font-size:1.35rem; }
  .library-quiz-meta { margin-bottom:21px; }
  .library-quiz-actions .button { font-size:.9rem; min-height:46px; }
  .library-results-heading { align-items:flex-start; flex-direction:column; }
}
@media (max-width:370px) {
  .library-welcome { padding:20px; grid-template-columns:minmax(0,1fr) 64px; }
  .library-welcome h1 { font-size:1.6rem; }
  .library-pipin img { width:78px; height:100px; }
  .library-category { grid-template-columns:25px minmax(0,1fr); padding:12px 9px; column-gap:7px; }
  .library-category-symbol { width:25px; font-size:1.4rem; }
  .library-category-name { font-size:.83rem; }
}
@media (prefers-reduced-motion:reduce) {
  .library-category { transition:none; }
  .library-category:hover,.library-category:active { transform:none; }
}