@import url("../styles.css");

/* ---------- SEARCH (clear button + category select) ---------- */
#searchInput{padding-right:40px;}
.select-wrap select{
  padding:9px 34px 9px 12px; border-radius:var(--radius); border:1px solid var(--line-strong);
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2357617C' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  color:var(--ink); font-size:13.5px; font-family:inherit; appearance:none; cursor:pointer;
}
.filter-groups{display:flex; flex-direction:column; gap:10px; margin-top:12px;}
.filter-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.filter-row .filter-label{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); flex:none; width:64px;}

/* ---------- SUGGESTIONS ---------- */
.suggestions{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; z-index:30; max-height:340px; overflow-y:auto;
}
.suggestion-item{display:flex; align-items:center; gap:10px; padding:9px 14px; cursor:pointer; border-bottom:1px solid var(--line);}
.suggestion-item:last-child{border-bottom:none;}
.suggestion-item:hover, .suggestion-item.active{background:var(--surface-2);}
.suggestion-item .game-icon-svg{width:26px;height:26px;flex:none;}
.suggestion-name{font-weight:600; font-size:13.5px;}
.suggestion-name mark{background:var(--accent-2-soft); color:inherit; border-radius:3px;}
.suggestion-meta{font-size:11.5px; color:var(--ink-faint); margin-left:auto;}

/* ---------- CARD GRID ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px;}
.game-card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:16px; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:10px; transition:transform .12s ease, border-color .12s ease;
}
.game-card:hover{transform:translateY(-2px); border-color:var(--accent);}
.game-card-top{display:flex; align-items:center; gap:12px;}
.game-icon-svg{width:44px;height:44px;flex:none;}
.game-card-title{font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); margin:0; line-height:1.25;}
.game-card-source{font-size:11px; color:var(--ink-faint); margin-top:2px;}
.game-card-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:auto;}

.tag{
  display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:100px;
  font-size:11px; font-weight:700; white-space:nowrap; font-family:var(--font-mono); letter-spacing:.02em;
  background:var(--surface-2); color:var(--ink-soft);
}
.tag-local{background:var(--accent-2-soft); color:var(--accent-2);}
.tag-ramo{background:color-mix(in srgb, var(--sec-purple) 16%, var(--surface-2)); color:var(--sec-purple);}

/* ---------- MODAL ---------- */
.modal-overlay{position:fixed; inset:0; z-index:100; background:rgba(10,14,10,.6); display:flex; align-items:center; justify-content:center; padding:20px;}
.modal-overlay[hidden]{display:none;}
.modal-dialog{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:30px 26px 26px; max-width:680px; width:100%; max-height:88vh; overflow-y:auto;
}
.modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink-soft);
  font-size:1.3rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{background:var(--line); color:var(--ink);}

.detail-top{display:flex; align-items:flex-start; gap:16px; padding-right:28px;}
.detail-top .game-icon-svg{width:56px;height:56px;flex:none;}
.detail-title{font-family:var(--font-display); font-size:1.5rem; font-weight:700; margin:0; color:var(--ink);}
.detail-sub{margin:4px 0 0; color:var(--ink-faint); font-size:0.82rem;}
.detail-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:16px;}

.detail-grid{margin-top:18px; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px;}
.detail-field{background:var(--surface-2); border-radius:var(--radius); padding:10px 14px;}
.detail-field .label{display:block; font-family:var(--font-mono); font-size:0.65rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:3px;}
.detail-field .value{font-weight:600; font-size:0.88rem;}

.detail-section{margin-top:18px; padding-top:16px; border-top:1px dashed var(--line);}
.detail-section h3{font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin:0 0 8px;}
.detail-section p{margin:0; font-size:0.92rem; line-height:1.6; color:var(--ink);}
.detail-section.observ p{color:var(--ink-soft); font-style:italic;}
.detail-illustration{
  width:100%; aspect-ratio:4/3; margin-top:18px; border-radius:12px; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--line);
}
.detail-illustration img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- CTA BAND (attribution note with icon, not the subscribe CTA) ---------- */
.cta-band{
  gap:14px; justify-content:flex-start;
}
:root[data-theme="dark"] .cta-band{border:1px solid var(--line);}
@media (prefers-color-scheme: dark){ .cta-band{border:1px solid var(--line);} }
.cta-band svg{flex:none; width:30px; height:30px; opacity:.9;}
.cta-band p{color:color-mix(in srgb, var(--on-dark) 78%, transparent);}

@media (max-width:760px){
  .filter-row .filter-label{width:auto;}
  .detail-top{flex-wrap:wrap;}
}