/* library.css */
/* ============================================================
   Classroom Showdown — My Games (games.html): the sky-blue side rail,
   the header with search and sort, the folder path, folder tiles, game
   cards, the pop-up menu, the "Move to…" tree, and drag & drop.
   ============================================================ */
body.lb{min-height:100vh;background:var(--bg)}
.lb-main{margin-left:248px;min-height:100vh;padding:22px clamp(16px,3vw,36px) 60px}

/* ------------------------------------------------------------ side rail */
.lb-side{
  position:fixed;left:0;top:0;bottom:0;width:248px;z-index:40;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;padding:18px 14px 20px;
  background:linear-gradient(180deg,#3DB4FA 0%,#1C86D6 100%);color:#fff;
  box-shadow:4px 0 18px rgba(27,42,107,.12);
}
.lb-side-logo{display:block;padding:2px 6px 4px}
.lb-side-logo img{display:block;width:100%;max-width:200px;height:auto;filter:drop-shadow(0 3px 0 rgba(0,0,0,.12))}
.lb-create{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:13px 16px;border:0;border-radius:16px;cursor:pointer;
  background:var(--sun);color:var(--navy);box-shadow:0 5px 0 var(--sun-d);
  font-family:'Fredoka',sans-serif;font-size:21px;font-weight:600;
  transition:transform .08s,box-shadow .08s;
}
.lb-create:active{transform:translateY(4px);box-shadow:0 1px 0 var(--sun-d)}
.lb-nav{display:flex;flex-direction:column;gap:4px}
.lb-nav-a{
  display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:13px;
  background:transparent;color:#fff;text-decoration:none;cursor:pointer;text-align:left;
  font-family:'Fredoka',sans-serif;font-size:17.5px;font-weight:500;
}
.lb-nav-a img{width:28px;height:28px;object-fit:contain;flex:none}
.lb-nav-a:hover{background:rgba(255,255,255,.16)}
.lb-nav-on{background:rgba(255,255,255,.24)}
.lb-side-plan{margin-top:auto;padding:14px;border-radius:16px;background:rgba(255,255,255,.18);text-align:center}
.lb-side-plan:empty{display:none}
.lb-sp-h{font-family:'Fredoka',sans-serif;font-size:18px;font-weight:600}
.lb-sp-t{font-size:13.5px;font-weight:700;opacity:.92;margin:2px 0 10px}

/* ------------------------------------------------------------ header */
.lb-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.lb-head h1{font-size:34px;margin-right:auto}
.lb-menu{display:none;border:0;background:#fff;border-radius:12px;width:44px;height:44px;font-size:22px;cursor:pointer;color:var(--navy);box-shadow:0 3px 0 var(--line-2)}
.lb-search{
  display:flex;align-items:center;gap:8px;min-width:220px;flex:0 1 320px;
  padding:9px 14px;border:2px solid var(--line-2);border-radius:14px;background:#fff;
}
.lb-search:focus-within{border-color:var(--sky)}
.lb-search input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-weight:700;color:var(--ink);background:transparent}
.lb-sort{padding:10px 12px;border:2px solid var(--line-2);border-radius:14px;background:#fff;font:inherit;font-weight:800;color:var(--ink);cursor:pointer}
.lb-me{display:flex;align-items:center;gap:10px}
.lb-me:empty{display:none}

/* ------------------------------------------------------------ path */
.lb-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:6px 0 14px;font-family:'Fredoka',sans-serif;font-size:19px}
.lb-crumb{border:0;background:transparent;padding:4px 10px;border-radius:10px;font:inherit;color:var(--sky-d);cursor:pointer;font-weight:500}
.lb-crumb:hover{background:var(--sky-l)}
.lb-crumb-here{color:var(--navy);font-weight:600;cursor:default}
.lb-crumb-here:hover{background:transparent}
.lb-crumb-sep{color:var(--faint)}

/* ------------------------------------------------------------ folders */
.lb-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:22px}
.lb-folder{
  position:relative;display:flex;align-items:center;gap:12px;min-height:72px;
  padding:12px 44px 12px 14px;border-radius:16px;cursor:pointer;text-align:left;
  background:#fff;border:2px solid var(--line);border-bottom:5px solid var(--fc,var(--sky));
  box-shadow:0 6px 16px rgba(27,42,107,.06);transition:transform .1s,box-shadow .1s;
  font:inherit;color:inherit;
}
.lb-folder:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(27,42,107,.1)}
.lb-folder:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.lb-ficon{width:42px;height:35px;flex:none}
.lb-folder-t{min-width:0}
.lb-folder-name{font-family:'Fredoka',sans-serif;font-size:18px;font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-folder-meta{font-size:13px;font-weight:700;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-folder-new{border-style:dashed;border-bottom-width:2px;border-color:var(--line-2);background:transparent;box-shadow:none;padding-right:14px;color:var(--sky-d)}
.lb-folder-new .lb-folder-name{color:var(--sky-d)}
.lb-folder-plus{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--sky-l);font-size:28px;font-weight:800;line-height:1}
.lb-more{
  border:0;background:transparent;cursor:pointer;width:34px;height:34px;border-radius:10px;
  font-size:22px;line-height:1;color:var(--muted);font-weight:900;
}
.lb-more:hover{background:var(--sky-l);color:var(--navy)}
.lb-folder .lb-more{position:absolute;right:6px;top:50%;transform:translateY(-50%)}

/* ------------------------------------------------------------ game cards */
.lb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.lb-card{
  display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:#fff;
  border:2px solid var(--line);box-shadow:0 8px 22px rgba(27,42,107,.07);transition:transform .1s,box-shadow .1s;
}
.lb-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(27,42,107,.12)}
.lb-cover{
  position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;border:0;cursor:pointer;overflow:hidden;
  background:var(--sky-l);
}
.lb-cover-empty{background:linear-gradient(160deg,#BFE6FF,#E8F6FF 60%,#DDF8F1)}
.lb-cover-pic{width:100%;height:100%;object-fit:cover;display:block}
.lb-cover-mon{position:absolute;left:50%;top:52%;height:84%;width:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 0 rgba(27,42,107,.12))}
.lb-qn{
  position:absolute;right:10px;bottom:10px;padding:4px 10px;border-radius:10px;
  background:rgba(27,42,107,.82);color:#fff;font-weight:800;font-size:13px;
}
.lb-lock{
  position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:10px;
  background:var(--sun);color:var(--navy);font-family:'Fredoka',sans-serif;font-weight:600;font-size:13.5px;box-shadow:0 3px 0 var(--sun-d);
}
.lb-card-b{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px;flex:1}
.lb-card-name{
  border:0;background:transparent;padding:0;text-align:left;cursor:pointer;
  font-family:'Fredoka',sans-serif;font-size:20px;font-weight:600;color:var(--navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lb-card-name:hover{color:var(--sky-d)}
.lb-card-meta{font-size:13.5px;font-weight:700;color:var(--muted)}
.lb-card-where{align-self:flex-start;border:0;background:var(--sky-l);color:var(--sky-d);border-radius:8px;padding:2px 8px;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-shared{align-self:flex-start;background:var(--teal-l);color:var(--teal-d);border-radius:8px;padding:2px 8px;font-size:12px;font-weight:900}
.lb-card-acts{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px}
.lb-card-acts .lb-more{margin-left:auto}

/* ------------------------------------------------------------ empty */
.lb-empty{text-align:center;padding:30px 16px 10px}
.lb-empty img{width:160px;height:auto}
.lb-empty p{font-family:'Fredoka',sans-serif;font-size:21px;color:var(--navy);margin:8px 0 16px}

/* ------------------------------------------------------------ pop-up menu */
.lb-menu-pop{
  position:absolute;z-index:120;min-width:200px;padding:6px;border-radius:14px;background:#fff;
  border:2px solid var(--line);box-shadow:0 18px 40px rgba(27,42,107,.18);
}
.lb-menu-item{display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;border-radius:10px;font:inherit;font-weight:800;color:var(--ink);cursor:pointer}
.lb-menu-item:hover,.lb-menu-item:focus{background:var(--sky-l);outline:0}
.lb-menu-danger{color:var(--red-d)}
.lb-menu-danger:hover,.lb-menu-danger:focus{background:var(--red-l)}

/* ------------------------------------------------------------ folder dialogs */
.lb-swatches{display:flex;flex-wrap:wrap;gap:10px}
.lb-swatch{width:36px;height:36px;border-radius:50%;border:3px solid #fff;cursor:pointer;box-shadow:0 0 0 2px var(--line-2)}
.lb-swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--navy)}
.lb-tree{max-height:min(52vh,420px);overflow-y:auto;margin-top:10px;padding:4px;border:2px solid var(--line);border-radius:14px}
.lb-tree-row{
  display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;cursor:pointer;
  padding:8px 12px;border-radius:10px;font:inherit;font-weight:800;color:var(--ink);text-align:left;
}
.lb-tree-row .lb-ficon{width:28px;height:24px}
.lb-tree-row img.lb-ficon{object-fit:contain}
.lb-tree-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-tree-row:hover{background:var(--sky-l)}
.lb-tree-row[aria-selected="true"]{background:var(--sky);color:#fff}
.lb-tree-row:disabled{opacity:.4;cursor:not-allowed;background:transparent;color:var(--ink)}
.lb-tree-new{margin-top:12px}

/* ------------------------------------------------------------ drag & drop */
.lb-dragging .lb-folder,.lb-dragging .lb-crumb{outline:2px dashed transparent}
.lb-dragging .lb-folder:not(.lb-folder-new){outline-color:var(--line-2);outline-offset:2px}
.lb-drop{outline:3px solid var(--sky) !important;outline-offset:2px;background:var(--sky-l) !important}

/* ------------------------------------------------------------ the editor on this page */
#editorView .gm-editor{max-width:1200px;margin:0 auto;border:2px solid var(--line);border-radius:20px;box-shadow:0 8px 22px rgba(27,42,107,.06)}
/* The editor's title row was made to stick under the old dashboard's 65px
   bar; this page has no top bar, so it sticks at the very top. */
#editorView .gm-ed-head{top:0;border-radius:20px 20px 0 0}
#editorView .gm-ed-head h3{font-family:'Fredoka',sans-serif;font-size:20px;font-weight:600;color:var(--navy)}
#editorView .gq-card-thumb-none{background:linear-gradient(135deg,#E8F6FF,#CFE9FF)}

/* ------------------------------------------------------------ small screens */
@media (max-width:900px){
  .lb-main{margin-left:0;padding-top:14px}
  .lb-side{transform:translateX(-100%);transition:transform .2s}
  .lb-side-open .lb-side{transform:none}
  .lb-menu{display:inline-grid;place-items:center}
  .lb-head h1{font-size:28px}
  .lb-search{flex:1 1 100%;order:5}
}
@media (prefers-reduced-motion:reduce){.lb-card,.lb-folder,.lb-side{transition:none}}