:root{
  --bg:#0b0d12;
  --card:#121620;
  --text:#e9edf5;
  --muted:#a9b4c7;
  --line:rgba(255,255,255,.12);
  --accent:#6aa7ff;
  --accent2:#7cf6c4;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:var(--text);
}
a{color:var(--text); text-decoration:none;}
a:hover{color:var(--accent);}
.container{max-width:1120px; margin:0 auto; padding:18px;}
.nav{
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.nav .links{display:flex; gap:10px; flex-wrap:wrap;}
.brand{font-weight:900; letter-spacing:.2px;}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  padding:8px 12px;
  border-radius:999px;
  width:auto;
}
h1{font-size:1.8rem; margin:10px 0 6px;}
h2{font-size:1.2rem; margin:18px 0 8px;}
.small{color:var(--muted); font-size:.92rem; line-height:1.35;}

/* Live search hint under the Title box */
.live-search-hint{margin-top:4px; min-height:1em;}
.card{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius:18px;
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
/* Desktop default: 6 columns */
.grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Tablets: 2 columns */
@media (max-width: 920px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid [style*="grid-column"]{ grid-column:auto / span 1 !important; }
}

/* Phones: 1 column */
@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr; }
}


label{display:block; font-size:.92rem; color:var(--muted);}
input, textarea, select, button{
  width:100%;
  margin-top:6px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}

/* When buttons are used as inline pills, don't stretch them full width */
button.pill, button.pill-sm{width:auto;}
select{appearance:none; background-image: linear-gradient(45deg, transparent 50%, rgba(233,237,245,.75) 50%), linear-gradient(135deg, rgba(233,237,245,.75) 50%, transparent 50%); background-position: calc(100% - 16px) calc(1em + 2px), calc(100% - 11px) calc(1em + 2px); background-size: 5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:34px;}
textarea{resize:vertical;}
input:focus, textarea:focus, select:focus{
  border-color: rgba(106,167,255,.7);
  box-shadow: 0 0 0 4px rgba(106,167,255,.15);
}
button{
  cursor:pointer;
  font-weight:800;
  border-color: rgba(106,167,255,.45);
  background: linear-gradient(180deg, rgba(106,167,255,.30), rgba(106,167,255,.12));
}
button:hover{border-color: rgba(106,167,255,.75);}
.table-wrap{overflow:auto; border-radius:18px; border:1px solid var(--line);}
table{width:100%; border-collapse:collapse; min-width:900px; background: rgba(0,0,0,.12);}
th, td{padding:10px 10px; border-bottom:1px solid var(--line); vertical-align:top;}
th{position:sticky; top:0; background: rgba(0,0,0,.22); text-align:left; font-size:.9rem; color:var(--muted);}
tr:hover td{background: rgba(255,255,255,.03);}

tr.inline-editor td{background: rgba(255,255,255,.02);}
.tag{
  display:inline-block;
  border:1px solid var(--line);
  padding:4px 10px;
  border-radius:999px;
  margin:0 6px 6px 0;
  font-size:.85rem;
  color:var(--text);
  background: rgba(255,255,255,.04);
}
.tag:hover{border-color: rgba(124,246,196,.6); color: var(--accent2);}


.result{padding:10px 12px; border:1px solid var(--line); border-radius:12px; margin-top:8px; background: rgba(255,255,255,.04); cursor:pointer;}
.result:hover{border-color: rgba(106,167,255,.7); box-shadow: 0 0 0 4px rgba(106,167,255,.12);}

#cover_preview_link:hover span{color: var(--accent);} 

.btn-ghost{border:1px solid var(--line); background: rgba(255,255,255,.03);} .btn-ghost:hover{border-color: rgba(255,255,255,.25);} 

.actions{display:flex; gap:8px; align-items:center;}


/* Item type pill (Expansion / Game piece) */
.title-stack{display:flex;flex-direction:column;gap:4px;}
.type-pill{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1.4;
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(106,167,255,.12);
  box-shadow: 0 0 0 1px rgba(106,167,255,.15) inset;
  width:fit-content;
}

/* Toggle chips (checkboxes styled as pills) */
.chip-toggle{display:inline-flex; align-items:center; gap:8px; margin:0;}
.chip-toggle input{position:absolute; opacity:0; width:1px; height:1px;}
.chip-toggle span{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  font-weight:900;
  cursor:pointer;
  user-select:none;
}
.chip-toggle input:focus-visible + span{
  border-color: rgba(106,167,255,.75);
  box-shadow: 0 0 0 4px rgba(106,167,255,.12);
}
.chip-toggle input:checked + span{
  border-color: rgba(124,246,196,.55);
  background: rgba(124,246,196,.10);
  box-shadow: 0 0 0 1px rgba(124,246,196,.25) inset;
}

/* Mobile filter chips */
.filter-chips{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:8px 2px 10px;
  margin-bottom:2px;
}
.filter-chip{
  flex:0 0 auto;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.filter-chip.active{
  border-color: rgba(106,167,255,.75);
  box-shadow: 0 0 0 4px rgba(106,167,255,.12);
}
@media (max-width: 920px){
  .filters .grid{grid-template-columns:1fr;}
}

/* Card-style tables (mobile) */
.table-cards{width:100%;}

/* Keep long titles tidy on wide screens too */
td.cell-title{
  min-width: 200px;
  max-width: 400px;
  overflow-wrap: anywhere;
}

/* Mobile-only cell that holds meta pills + actions (keeps desktop table columns aligned) */
td.cell-mobilemeta{display:none;}
@media (max-width: 920px){
  td.cell-mobilemeta{display:block;}
}
@media (max-width: 920px){
  .table-cards{border-radius:16px; overflow:hidden;}
  .table-cards table{min-width:0; width:100%;}
  .table-cards thead{display:none;}
  .table-cards tbody tr{display:block; padding:10px 12px; border-bottom:1px solid var(--line);}
  .table-cards tbody tr:last-child{border-bottom:0;}
  .table-cards tbody td{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:0;}
  .table-cards tbody td::before{content: attr(data-label); color: var(--muted); font-size:.85rem; padding-right:10px;}
}

/* Collection-specific tweaks when in card mode */
@media (max-width: 920px){
  .table-cards td.cell-title{display:block;}
  .table-cards td.cell-title::before{content:''; display:none;}
  .table-cards td.cell-thumb{justify-content:flex-start;}
  .table-cards td.cell-thumb::before{content:''; display:none;}
  .table-cards td.cell-thumb img{max-width:54px !important; border-radius:12px;}
  .table-cards td.cell-actions{justify-content:flex-start;}
  .table-cards td.cell-actions::before{content:''; display:none;}
  .table-cards td.cell-actions .actions{flex-wrap:wrap;}

  /* Hide columns that are duplicated into the meta pills on mobile */
  .table-cards td.cell-year,
  .table-cards td.cell-players,
  .table-cards td.cell-time,
  .table-cards td.cell-age{display:none;}
}

/* --- Mobile collection header layout: [Image][Title] with pills underneath --- */
@media (max-width: 920px){
  .table-cards tbody tr.game-row{
    display:grid;
    grid-template-columns: 64px 1fr;
    column-gap:12px;
    row-gap:8px;
    align-items:start;
  }
  .table-cards tbody tr.game-row td{padding:0;}
  .table-cards tbody tr.game-row td::before{display:none; content:'';}

  /* Override compact-mobile rules that force flex */
  .table-cards tbody tr.game-row td.cell-thumb,
  .table-cards tbody tr.game-row td.cell-title{display:block !important;}

  .table-cards tbody tr.game-row td.cell-thumb{grid-column:1; grid-row:1;}
  .table-cards tbody tr.game-row td.cell-title{grid-column:2; grid-row:1;}
  .table-cards tbody tr.game-row td.cell-mobilemeta{grid-column:1 / -1; grid-row:2;}

  .table-cards tbody tr.game-row td.cell-thumb img{max-width:58px !important; border-radius:12px;}
}

/* Action pills (Edit / Remove) under meta pills */
.card-actions{display:none; gap:8px; flex-wrap:wrap; margin-top:10px;}
.card-actions form{margin:0;}
.card-actions form button{width:auto;}
@media (max-width: 920px){
  .card-actions{display:flex; flex-wrap:nowrap;}
}

/* Meta pills in mobile cards */
.meta-pills{display:none; gap:6px; flex-wrap:wrap; margin-top:8px;}
.meta-pill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.04); font-size:.85rem; font-weight:800;}
.meta-pill .ico{opacity:.9;}
@media (max-width: 920px){
  .meta-pills{display:flex;}
}


/* Compact mobile cards (hide redundant table fields on small screens) */
@media (max-width: 920px){
  .table-compact-mobile tbody td{display:none;}
  .table-compact-mobile tbody td.cell-thumb,
  .table-compact-mobile tbody td.cell-title{display:flex;}
  .table-compact-mobile tbody td.cell-actions{display:none;}
  .table-compact-mobile tbody td.cell-mobilemeta{display:block;}

  /* Ensure inline editor remains usable on mobile */
  .table-compact-mobile tbody tr.inline-editor{display:block; padding:10px 12px;}
  .table-compact-mobile tbody tr.inline-editor td{display:block; width:100%;}

  /* "More info" rows should still be visible on mobile */
  .table-compact-mobile tbody tr.more-row{display:block; padding:0 12px 12px;}
  .table-compact-mobile tbody tr.more-row td{display:block !important; width:100%;}
}

/* Force the same compact card layout when the table would overflow (JS adds body.force-mobile) */
body.force-mobile .table-compact-mobile tbody td{display:none;}
body.force-mobile .table-compact-mobile tbody td.cell-thumb,
body.force-mobile .table-compact-mobile tbody td.cell-title{display:flex;}
body.force-mobile .table-compact-mobile tbody td.cell-actions{display:none;}
body.force-mobile .table-compact-mobile tbody td.cell-mobilemeta{display:block;}
body.force-mobile .table-compact-mobile tbody tr.inline-editor{display:block; padding:10px 12px;}
body.force-mobile .table-compact-mobile tbody tr.inline-editor td{display:block; width:100%;}
body.force-mobile .table-compact-mobile tbody tr.more-row{display:block; padding:0 12px 12px;}
body.force-mobile .table-compact-mobile tbody tr.more-row td{display:block !important; width:100%;}

/* Small pill buttons inside mobile cards */
.pill-sm{padding:5px 10px; font-size:.85rem; border-radius:999px;}
.card-actions{display:none; gap:8px; flex-wrap:wrap; margin-top:10px;}
@media (max-width: 920px){
  .card-actions{display:flex;}
}


.pill-btn{cursor:pointer; border:1px solid var(--line); color:var(--text);}
.pill-btn:hover{border-color:rgba(255,255,255,.25);}

.covers-hidden .cell-thumb img,
.covers-hidden img.game-cover,
.covers-hidden img.cover-preview{display:none !important;}
/* Keep layout neat when covers are hidden */
.covers-hidden .cell-thumb{width:16px !important; padding:0 !important;}

.auth-wrap{min-height:calc(100vh - 60px); display:flex; align-items:center; justify-content:center; padding:18px;}
.auth-card{width:min(520px, 100%); }
.auth-card form{display:flex; flex-direction:column; gap:12px;}
.auth-card input{width:100%;}


/* Scroll-to-top button */
.to-top{position:fixed;right:16px;bottom:16px;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:none;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.08);z-index:50;cursor:pointer;}
.to-top:hover{transform:translateY(-1px);}
/* Scroll-to-top button */
.scrolltop{
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 50;
}
.scrolltop.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}