@font-face{
    font-family:med;
    src:url(../fonts/med.woff) format("woff");
    font-style:normal
}

@font-face{
    font-family:reg;
    src:url(../fonts/reg.woff) format("woff");
    font-style:normal
}

@font-face{
    font-family:body;
    src:url(../fonts/body.woff) format("woff");
    font-style:normal
}

:root{
  --bg:#f3ede7;
  --card:#fff;
  --muted:#9aa4ad;
  --accent:#111827;
  --gap:16px;
}

*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; background-color:var(--bg); color:var(--accent); -webkit-font-smoothing:antialiased;
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
}
.container{width: 95%; max-width: 1200px;margin:0 auto;height: 100vh;display: flex; flex-direction: column;justify-content: center;}
.header{text-align:center;margin-bottom:28px}
.h1{font-size:28px;margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 16px}
.btn{display:inline-block;background:#111827;color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;border:none;cursor:pointer}
.btn.secondary{background:#f3f4f6;color:var(--accent);border:1px solid #e6e9ee}
.center{display:flex;align-items:center;justify-content:center}

/* Vertical roulette */
.roulette-vert{height:240px;width:260px;margin:0 auto;overflow:hidden;position:relative}
.roulette-list{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;transition:transform .22s}
.roulette-item{width:220px;height:72px;display:flex;align-items:center;justify-content:center;background:var(--card);border-radius:10px;box-shadow:0 6px 16px rgba(16,24,40,.06);margin:6px 0;font-weight:600;transition:opacity .15s, transform .15s}
.roulette-item.fade{opacity:.35;transform:scale(.96)}
.roulette-frame{position:absolute;left:50%;transform:translateX(-50%);top:50%;height:72px;width:220px;pointer-events:none;border-radius:12px;box-shadow:0 8px 26px rgba(16,24,40,.06);}

/* Horizontal carousel */
.carousel{height:360px;overflow:hidden;position:relative;margin:30px 0}
.carousel-list{display:flex;align-items:center;transition:transform .22s}
.card{width:260px;height:340px;margin:0 10px;background:var(--card);border-radius:12px;box-shadow:0 8px 20px rgba(16,24,40,.06);padding:14px;display:flex;flex-direction:column;justify-content:space-between}
.card img{width:100%;height:180px;object-fit:contain;border-radius:8px}
.card .meta{font-size:14px;color:var(--muted)}
.card.centered{transform:scale(1.02)}
.card.fade{opacity:.45;transform:scale(.96)}

/* small helpers */
.controls{display:flex;gap:12px;justify-content:center;margin-top:18px}
.small{font-size:13px;color:var(--muted)}
.hidden{display:none}

/* Responsive */
@media (max-width:640px){
  .container{padding:16px}
  .roulette-vert{width:220px;height:220px}
  .roulette-item{width:180px}
  .card{width:220px;height:320px}
}

.result-card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    margin-bottom: 24px;
}

.result-card h2 {
    margin: 0 0 6px;
}

.result-card .brand {
    color:#7c8490;
    font-size:14px;
    margin-bottom:8px;
}

.result-card .score {
    font-weight: bold;
    margin-bottom: 16px;
}

.result-card .notes {
    display: flex;
    gap: 40px;
}

.result-card .notes h4 {
    margin-bottom:6px;
}

.result-card .notes ul {
    margin:0;
    padding-left:18px;
}

header h1{
  color: #ab875c;
  font-family: med;
  text-align: center;
  margin: 0;
  margin-bottom: 10px;
}

header p{
  color: #707070;
  font-family: body;
  text-align: center;
  margin: 0 auto;
  width: 80%;
  max-width: 700px;
}

footer{
  text-align: center;
}

footer img{
  display: block;
  margin: 0 auto;
  width: 280px;
}

@media (min-width: 1400px) {
  
}

@media (min-width: 1200px) {

}

@media (min-width: 992px) {

}

@media (min-width: 768px) {

}

@media (min-width: 576px) {

}