/* Reset & base */
:root { --brand-red:#ff1a3a; }

html, body{
  margin:0; padding:0;
  font-family:"Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
  font-size:16px; line-height:1.4;
  background:#000; color:#fff;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body{ font-family:'Roboto', sans-serif; }
h1,h2,h3,h4{ font-weight:700; margin:0 0 10px; color:#f1f1f1; }

/* Layout */
.layout{
  display:grid;
  grid-template-areas:
    "b a c"
    "d a c"
    "f a c"
    "g g g"
    "i i i"
    "h h h";
  grid-template-columns:450px 450px 1fr;
  grid-template-rows:auto auto auto auto auto auto;
  width:100%; min-height:100vh; background:#000; color:#fff;
}

/* A: Top 10 list */
.panel-a{ grid-area:a; background:#000; padding:10px; overflow-y:auto; }
#top10-list{ list-style:none; margin:0; padding:0; }
.top10-item{
  display:flex; width:100%; border:1px solid #444; border-radius:6px;
  margin:4px 0; background:#222; color:#fff; cursor:pointer; overflow:hidden;
  transition:border-color .2s;
}
.top10-item:hover{ border-color:var(--brand-red); }
.top10-thumb{ flex:0 0 100px; height:60px; overflow:hidden; }
.top10-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.top10-info{ flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.top10-rank{ background:var(--brand-red); color:#fff; font-weight:700; padding:3px 6px; font-size:.8rem; }
.top10-title{ font-size:.82rem; font-weight:700; margin:2px 6px 0; line-height:1.2; }
.top10-artist{ font-size:.72rem; color:#bbb; margin:0 6px 4px; }

/* B: Logo/Zastava */
.panel-b{
  grid-area:b; width:450px; height:270px; background:#000; background-size:cover; background-position:center;
  background-repeat:no-repeat; display:flex; align-items:center; justify-content:center; position:relative;
}
.main-logo{ width:450px; height:270px; z-index:2; }


/* C: Player (video + 100px trak) */
.panel-c{ grid-area:c; background:#000; display:flex; }
.player-wrap{
  display:grid; grid-template-rows:1fr 100px; width:100%; height:100%;
}
.player-wrap #ytPlayer{
  width:100%; height:100%; border:none; aspect-ratio:16/9;
}

/* 100px trak za kvadratke (vodoravni scroll) */
.recent-strip{
  grid-row:2;
  height:80px; min-height:80px; max-height:80px;
  display:flex; flex-wrap:nowrap; align-items:center; gap:12px;
  padding:4px 6px;
  background:#000; border-top:1px solid #333;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  scrollbar-gutter:stable both-edges;
}

/* kvadratki 100x100 */
.recent-thumb{
  flex:0 0 80px; width:80px; height:80px;
  border-radius:5px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);
  background:#222; cursor:pointer; padding:0;
}
.recent-thumb img{
  width:100%; height:100%; display:block; object-fit:cover; max-width:none;
}

/* Clear gumb pred kvadratki (če ga dodaš v HTML/JS) */
.recent-clear{
  flex:0 0 auto; height:32px; padding:0 10px; margin-right:8px;
  border-radius:8px; border:1px solid rgba(255,255,255,0.18);
  background:transparent; color:#ddd;
  font:500 13px/32px Roboto, system-ui, sans-serif; cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.recent-clear:hover{
  background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.28); color:#fff;
}
.recent-clear:active{ transform:translateY(1px); }

/* D: Izbire */
.panel-d {
  grid-area: d;
  background: #000;
  padding: 0;

  display: grid;          /* ali flex */
  align-content: start;   /* vsebina se prilepi na vrh */
}







/* F: graf */
.panel-f{grid-area:f; background:#000; padding:0; }



/* Header trak */
.choose-country-header{
  background:var(--brand-red); color:#fff; font-weight:700; text-align:center;
  padding:4px 0; border-radius:4px; margin-bottom:4px; font-size:.85rem;
}

.choose-country-header1{
  background:var(--brand-red); color:#fff; font-weight:700; text-align:center;
  padding:4px 0; border-radius:4px; margin-bottom:4px; font-size:.85rem;
}

/* Select box (country/date/continent) */
.country-select-box, .continent-select-box{ padding:8px; }
#countrySelect, #dateSelect, #continentSelect{
  width:100%; padding:12px 10px; font-size:1.1rem; font-weight:600;
  border:1px solid #444; border-radius:6px; background:#222; color:#fff; outline:none; cursor:pointer;
}
#countrySelect option, #dateSelect option, #continentSelect option{
  background:#000; color:#fff; font-size:1rem; padding:6px;
}

/* (če uporabljaš panel-f za graf) */
.panel-f{ grid-area:f; background:#1c1c1c; overflow-x:auto; }
.panel-date{ display:flex; flex-direction:column; height:100%; min-height:0; }

/* Graf – fiksna višina 200px */
.chart-area{ position:relative; height:200px; min-height:200px; }
.chart-area canvas{ width:100% !important; height:100% !important; display:block; }

/* G + I: Top 10 škatle */
.panel-g, .panel-i{
  background:#000; border-top:2px solid #333; padding:10px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.panel-g{ grid-area:g; }
.panel-i{ grid-area:i; }

.world-top{ display:flex; flex-direction:row; gap:10px; min-width:max-content; }
.world-item{
  flex:0 0 9%; max-width:170px; height:260px;
  border:1px solid #444; border-radius:6px; overflow:hidden;
  background:#222; color:#fff; text-align:center;
  display:flex; flex-direction:column; justify-content:space-between;
  cursor:pointer; transition:border-color .2s;
}
.world-item:hover{ border-color:var(--brand-red); }
.world-rank{ background:var(--brand-red); color:#fff; font-weight:700; padding:4px; }
.world-thumb{ width:100%; height:120px; background-size:cover; background-position:top; }
.world-info{ flex:1; display:flex; flex-direction:column; justify-content:space-between; padding:4px; }
.world-title{ font-weight:700; font-size:.75rem; margin:2px 0; }
.world-artist{ font-size:.65rem; color:#bbb; }
.world-points{ background:#fff; color:var(--brand-red); font-weight:700; font-size:.75rem; padding:3px; }

@media (max-width:1400px){ .world-item{ flex:0 0 18%; max-width:180px; } }
@media (max-width:1000px){ .world-item{ flex:0 0 28%; max-width:200px; } }
@media (max-width:768px){ .world-item{ flex:0 0 45%; max-width:220px; } }

/* H: Footer */
.panel-h{ grid-area:h; background:#000; color:#888; text-align:center; padding:8px; font-size:.8rem; }

/* Dots (#1/#2/#3) */
.dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-left:6px; }
.dot-green{ background:#2ecc71; } .dot-blue{ background:#3498db; } .dot-yellow{ background:#f1c40f; }

/* --- Mobile (tvoj zahtevani media blok) --- */
@media (max-width:768px){
  .layout{
    grid-template-areas:"b" "d" "a" "c" "f" "g" "i" "h";
    grid-template-columns:1fr; grid-template-rows:auto;
  }
  .panel-c{ height:400px; }          /* ostane kot prej */
  .player-wrap #ytPlayer{ width:100%; height:auto; }
  /* trak ostane 100px; nič posebnega ni treba – pravila zgoraj ga že fiksirajo */
}