/* styles.css — updated to match the screenshot layout more closely
   Author: Your Name (replace)
   Date: 2025-10-11
*/
*{box-sizing:border-box}
body{margin:0;font-family: 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;background:#eee;color:#222}
.topbar{background:#1f73a8;padding:18px 0;border-bottom:6px solid #f4c45a}
.topbar-inner{max-width:1100px;margin:0 auto;padding:0 20px}
.topbar h1{color:white;font-weight:700;margin:0;font-size:36px;letter-spacing:1px;text-align:center}

.container{max-width:1100px;margin:24px auto;padding:0 20px}
.content-card{background:#f4c45a;padding:18px;border-radius:2px}
.content-inner{display:grid;grid-template-columns:1fr 420px;gap:18px;align-items:start}
.left-col{padding-right:8px}
.center{text-align:center;margin-top:6px}
.lead{line-height:1.6;margin:8px 0 18px;padding-right:8px;color:#111;max-width:520px}

.bucket-wrap{margin-top:12px}
#photo_bucket{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#fff;padding:10px;border:4px solid rgba(0,0,0,0.04);min-height:96px;align-items:center}
#photo_bucket img{width:100%;height:64px;object-fit:cover;cursor:pointer;border:3px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,0.12)}

.small{font-size:0.9rem;color:#222;margin-top:6px}

/* Right column ranked list styled like the example — two columns with numbers */
.right-col{padding-left:6px}
.rank-list{counter-reset:item;list-style:none;margin:0;padding:10px 12px;column-count:2;column-gap:24px;width:100%}
.rank-list li{display:flex;align-items:center;gap:12px;margin:10px 0;padding:6px;background:#fff}
.rank-list li img{width:160px;height:100px;object-fit:cover;cursor:pointer;display:block}
.rank-list li:before{counter-increment:item;content:counter(item) ".";font-weight:700;margin-right:8px;color:#222;width:26px}

/* Footer */
.footer{margin-top:14px;padding:10px 12px;font-size:0.9rem;color:#222}
.footer a{color:#0b5ea8;text-decoration:underline}

/* Responsive */
@media (max-width:900px){
  .content-inner{grid-template-columns:1fr}
  .rank-list{column-count:1}
  #photo_bucket img{height:56px}
  .rank-list li img{width:100%;height:auto}
}