@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root{
  --bg: #061226;
  --surface: #0f1724;
  --text: #e6eef6;
  --muted: #9fb0c8;
  --accent: #3b82f6;
  --accent-2: #7c3aed;
  --success: #16a34a;
  --danger: #ef4444;
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  --shadow: 0 8px 30px rgba(2,6,23,0.6);
  --container: 1100px;
  --card-min-height: 160px;
  --card-img-width: 90px;
  --card-img-height: 120px;
  --focus: rgba(59,130,246,0.9);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:'Inter','Segoe UI',Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg) 0%,#071226 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

header,footer{padding:1rem;text-align:center;color:var(--muted)}
header h1{margin:0;font-size:1.5rem}
main{max-width:var(--container);margin:2rem auto;padding:0 1rem}

/* Card base */
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:1rem;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,0.03);transition:background 0.2s ease}

/* Buttons */
.btn-primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  padding:.6rem 1rem;
  border-radius:10px;
  border:none;
  cursor:pointer;
  box-shadow:0 8px 30px rgba(59,130,246,0.12);
  transition:transform 0.1s ease, box-shadow 0.18s ease;
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 32px rgba(59,130,246,0.14);
}
.btn-primary:focus{outline:3px solid var(--focus);outline-offset:2px}
.btn-secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:.5rem .85rem;border-radius:8px;cursor:pointer}
.btn-link{background:none;border:none;color:var(--muted);cursor:pointer}

/* Forms */
.form-row{display:flex;gap:.75rem}
input[type=text],input[type=number],textarea,select{
  flex:1;
  padding:.6rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
  color:var(--text);
  transition:box-shadow .12s ease,transform .08s ease,background .2s ease;
}
input:focus,textarea:focus,select:focus{
  outline:none;
  box-shadow:0 8px 24px rgba(59,130,246,0.08);
  transform:translateY(-1px);
}
textarea{min-height:90px}
select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:2rem;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23ffffff" d="M2 0L0 2h4z"/></svg>');
  background-repeat:no-repeat;
  background-position:right 0.75rem center;
}

/* Form actions */
.form-actions{margin-top:.5rem}
.small{font-size:.85rem;color:var(--muted)}
.hidden{display:none}

/* Grid results */
.movie-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:0.9rem;
  padding:0;
  margin:1rem 0 0 0;
  list-style:none;
  align-items:start;
  min-width:0;
}
.movie-grid li{
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  padding:0.6rem;
  border-radius:12px;
  cursor:pointer;
  display:flex;
  gap:0.6rem;
  align-items:stretch;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  height:var(--card-min-height);
  overflow:hidden;
}
.movie-grid li:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(2,6,23,0.55)}
.movie-grid img{width:var(--card-img-width);height:var(--card-img-height);object-fit:cover;border-radius:6px;flex-shrink:0}
.movie-meta{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding-left:0.5rem}
.movie-title{font-weight:700;font-size:1rem;color:var(--text);margin:0;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.movie-sub{font-size:0.85rem;color:var(--muted);margin-top:0.15rem;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.movie-meta .meta-actions{margin-top:auto;display:flex;gap:0.5rem;align-items:center}

/* Movie details */
#movie-details{margin-top:1rem}

/* Feedback form */
#feedback-form .form-row,#feedback-form .form-actions{display:flex;gap:.6rem}
#feedback-form textarea{min-height:90px}

/* Tabs */
#tools-section{padding:.75rem}
#tools-tabs{display:flex;gap:.5rem;margin-bottom:.75rem}
.tab-btn{
  background:rgba(255,255,255,0.02);
  color:var(--muted);
  border:1px solid rgba(255,255,255,0.03);
  padding:.45rem .75rem;
  border-radius:8px;
  cursor:pointer;
  transition:background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.tab-btn[aria-selected="true"]{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  box-shadow:0 6px 18px rgba(59,130,246,0.12);
}

/* Spinner */
.spinner{
  width:48px;height:48px;
  border-radius:50%;
  border:6px solid rgba(255,255,255,0.06);
  border-top-color:var(--accent);
  animation:spin 1s linear infinite;
  margin:1rem auto;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Game Module */
#game-card{border:2px solid var(--accent-2);padding:1rem;margin-top:1rem;border-radius:12px;background:var(--surface);max-width:400px;margin-left:auto;margin-right:auto}
#game-prompt{text-align:center;font-weight:600;margin-bottom:1rem}
#game-poster{display:block;margin:0 auto 1rem;max-width:200px;border-radius:6px}
#game-slider-container{display:flex;flex-direction:column;align-items:center;margin-bottom:1rem;width:100%}
#game-slider{width:100%;cursor:pointer}
#game-feedback{text-align:center;font-weight:600;margin:0.5rem 0;color:var(--accent)}
#game-score-val{font-size:1.2rem;font-weight:bold;text-align:center;margin-bottom:0.5rem}
.btn-game{display:inline-block;margin:0.25rem;padding:0.5rem 1rem;border-radius:6px;background:var(--accent-2);color:#fff;font-weight:bold;cursor:pointer;border:none;transition:transform 0.1s}
.btn-game:hover{transform:scale(1.05)}
.btn-game:disabled{background:#555;cursor:not-allowed}

/* Focus states */
.movie-grid li:focus,.movie-grid li:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Animations */
.fade-in{animation:fadeIn .32s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Responsive */
@media (max-width:900px){.movie-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.form-row{flex-direction:column}.movie-grid{grid-template-columns:repeat(2,1fr)}header h1{font-size:1.2rem}}
@media (max-width:520px){.movie-grid{grid-template-columns:repeat(2,1fr)}.movie-grid img{width:60px;height:90px}}