body {
  background: #f3efe7;
  color: #1c1915;
}

.navbar {
  background: #1c1915 !important;
}

.navbar-brand {
  font-weight: 650;
  letter-spacing: .02em;
}

.aihe {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.15;
  font-weight: 650;
}

.card {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(40, 30, 20, .06);
}

.aikataulu {
  display: grid;
  gap: .75rem;
}

.aikataulu .vaihe {
  background: #fff;
  border-radius: .9rem;
  padding: .9rem 1rem;
  box-shadow: 0 8px 24px rgba(40, 30, 20, .05);
}

.aikataulu .vaihe.nyt {
  outline: 2px solid #9a3412;
}

.kuva-kehys {
  background: #141210;
  border-radius: 1rem 1rem 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 180px;
}

.kuva-kehys img {
  max-height: 72vh;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.pre {
  white-space: pre-wrap;
}

.sijoitus {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.4rem;
}

footer a {
  color: inherit;
}

.arv-info {
  background: #e8f4fd;
  border-left: 4px solid #1565c0;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 10px 0;
  font-size: .92em;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.arv-info svg {
  flex-shrink: 0;
  fill: #1565c0;
  margin-top: 2px;
}

.arv-info > div {
  flex: 1;
}

.arv-virhe {
  color: #c62828;
  font-size: .88em;
  margin-top: 6px;
}

.arv-ohjeet h2 {
  font-size: 1.15em;
  margin: 1.2em 0 .6em;
}

.arv-ohjeet h3 {
  font-size: 1em;
  margin: .8em 0 .3em;
}

.arv-ohjeet ul {
  margin: 0 0 .6em;
  padding-left: 1.4em;
}

.arv-ohjeet blockquote {
  font-style: italic;
  color: #555;
  border-left: 4px solid #ccc;
  padding-left: 10px;
  margin: .8em 0;
}

#sortBar {
  margin: .5em 0 .7em;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.sortBtn {
  padding: 5px 13px;
  border: 1px solid #aaa;
  border-radius: 20px;
  background: #f5f5f5;
  cursor: pointer;
  font-size: .88em;
  color: #333;
}

.sortBtn.active {
  background: #2196f3;
  color: #fff;
  border-color: #1976d2;
  font-weight: bold;
}

#dragHint {
  font-size: .82em;
  color: #888;
  margin-left: 4px;
}

#imageGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 4px 0;
}

.pts-group-break {
  grid-column: 1 / -1;
  border-top: 2px solid #bbb;
  margin: 2px 0;
}

.pts-group-label {
  grid-column: 1 / -1;
  font-size: .85em;
  font-weight: bold;
  color: #555;
  margin: 2px 0 0 2px;
}

#imageGrid.rank-mode {
  display: block;
}

.pts-zone-section {
  margin-bottom: 18px;
}

.pts-zone-header {
  font-size: .92em;
  font-weight: bold;
  color: #fff;
  background: #555;
  padding: 4px 10px;
  border-radius: 4px 4px 0 0;
}

.pts-zone {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 8px;
  min-height: 70px;
  border: 2px dashed #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: #f9f9f9;
  transition: border-color .15s, background .15s;
}

.pts-zone.drag-over-zone {
  border-color: #2196f3;
  background: #e3f2fd;
}

.kuvadiv {
  width: 100%;
  background: #eee;
  border: 2px solid #ccc;
  border-radius: 6px;
  padding: 7px;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  transition: transform .15s, box-shadow .15s;
  user-select: none;
}

.kuvadiv:hover {
  border-color: #2196f3;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}

.kuvadiv.dragging {
  opacity: .45;
  transform: scale(.97);
  border-color: #2196f3 !important;
}

.kuvadiv.drag-over {
  border: 2px dashed #2196f3;
  background: #e3f2fd;
}

.kuvadiv .thumb-wrap {
  background: linear-gradient(90deg, #2a2a2a 25%, #3d3d3d 50%, #2a2a2a 75%);
  background-size: 200% 100%;
  animation: thumb-shimmer 1.4s ease-in-out infinite;
  text-align: center;
  border-radius: 3px;
  overflow: hidden;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kuvadiv .thumb-wrap.thumb-loaded {
  background: #000;
  animation: none;
}

.kuvadiv .thumb-wrap img {
  max-width: 100%;
  max-height: 180px;
  display: block;
  object-fit: contain;
  opacity: 0;
  transition: opacity .25s;
}

@keyframes thumb-shimmer {
  to { background-position: -200% 0; }
}

.kuvadiv .kuvadiv-name {
  font-size: .78em;
  text-align: center;
  margin-top: 5px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kuvadiv .kuvadiv-pts {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #2196f3;
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: .82em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kuvadiv .kuvadiv-pts.unrated {
  background: #bbb;
}

.kuvadiv .rank-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: .75em;
}

.kuvadiv .comment-icon {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: .85em;
  opacity: .85;
  line-height: 1;
  pointer-events: none;
}

#progressInfo {
  font-size: .85em;
  color: #666;
  margin-left: 6px;
}

#lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .92);
  z-index: 9000;
}

#lb-box {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9100;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}

#lb-box.open { display: flex; }
#lb-overlay.open { display: block; }

#lb-img-area {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  background: transparent;
}

#lb-img-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#lb-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  background: rgba(0, 0, 0, .45);
  border: none;
  color: #fff;
  font-size: 1.4em;
  cursor: pointer;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lb-close:hover { background: rgba(0, 0, 0, .75); }

#lb-counter {
  font-size: .7em;
  font-weight: normal;
  color: rgba(255, 255, 255, .65);
  white-space: nowrap;
  flex-shrink: 0;
}

.lb-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, .35);
  border: none;
  color: #fff;
  font-size: 2.2em;
  cursor: pointer;
  border-radius: 8px;
  padding: 10px 13px;
  z-index: 10;
  line-height: 1;
}

#lb-prev { left: 8px; }
#lb-next { right: 8px; }
.lb-nav-btn:hover { background: rgba(0, 0, 0, .7); }
.lb-nav-btn:disabled { opacity: .2; cursor: default; }

#lb-info {
  width: 360px;
  min-width: 300px;
  max-width: 360px;
  background: rgba(28, 28, 32, .96);
  border-left: 1px solid rgba(255, 255, 255, .08);
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  color: #e0e0e0;
}

@media (max-width: 640px) {
  #lb-box { flex-direction: column; }
  #lb-img-area { flex: 1; min-height: 0; }
  #lb-info {
    width: 100%;
    max-width: none;
    min-width: 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, .1);
    flex-shrink: 0;
    max-height: 42vh;
  }
  .lb-nav-btn { font-size: 1.6em; padding: 7px 9px; }
  #lb-rating-wrap { flex-wrap: wrap; }
}

#lb-name {
  width: 100%;
  z-index: 12;
  background: rgba(0, 0, 0, .75);
  color: #e8e8e8;
  font-size: 1.35em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 90px 8px 12px;
  flex-shrink: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s;
}

.lb-controls-ready #lb-name { visibility: visible; opacity: 1; }

#lb-name-txt {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#lb-rating-wrap {
  width: 100%;
  z-index: 11;
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 8px 12px;
  background: rgba(0, 0, 0, .6);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s;
}

.lb-controls-ready #lb-rating-wrap { visibility: visible; opacity: 1; }

.lb-piste {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #ccc;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.lb-piste:hover {
  background: rgba(255, 255, 255, .22);
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
}

.lb-piste.selected {
  background: #1565c0;
  border-color: #42a5f5;
  color: #fff;
}

.lb-nav-circle { background: rgba(255, 255, 255, .12); font-size: 1.1em; }
.lb-nav-circle:hover { background: rgba(255, 255, 255, .28); }

#lb-comment-wrap {
  margin-top: 6px;
  flex: 1;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s;
}

.lb-controls-ready #lb-comment-wrap { visibility: visible; opacity: 1; }

#lb-comment-wrap label {
  color: #999;
  font-size: 1.3em;
  font-weight: normal;
  display: block;
  margin-bottom: 3px;
}

#lb-comment {
  flex: 1;
  min-height: 60px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #bbb;
  background: #fff;
  color: #222;
  padding: 6px;
  font-size: 1.3em;
  font-weight: normal;
  resize: vertical;
}

#lb-save-status { font-size: .78em; color: #66bb6a; }

#lb-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
  outline: 2px solid rgba(180, 180, 180, .4);
}

#lb-spinner {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 15;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  flex-direction: column;
  gap: 22px;
  background: rgba(0, 0, 0, .45);
}

#lb-spinner.active { display: flex; }

.lb-spin-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 8px solid rgba(255, 255, 255, .15);
  border-top-color: rgba(255, 255, 255, .9);
  animation: lb-spin .8s linear infinite;
}

#lb-spinner-txt {
  color: #fff;
  font-size: 1.35em;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}

@keyframes lb-spin { to { transform: rotate(360deg); } }