/* Main */
.container { max-width:1200px; margin:120px auto 64px; padding:20px; }

.muri {
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
  padding:36px; border-radius:18px; background: linear-gradient(180deg, rgba(255,250,240,0.8), rgba(255,245,230,0.6));
  border:1px solid var(--glass); box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
.muri h1 { font-size:36px; font-weight:900; color:#4a3a2a; letter-spacing:1px; }
.muri p { color:var(--muted); font-weight:700; max-width:720px; }
.cta-row { display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; justify-content:center; }
.btn { padding:12px 28px; border-radius:999px; font-weight:900; cursor:pointer; border:0; display:inline-flex; align-items:center; gap:8px; transition:transform .18s, box-shadow .18s; }
.btn.primary { background: linear-gradient(90deg,var(--accent-pink),var(--accent-cyan)); color:#4a3a2a; box-shadow: 0 10px 20px rgba(255,200,180,0.3);}
.btn.ghost { background:transparent; border:1px solid rgba(74,58,42,0.2); color:var(--muted); }
.btn:hover { transform:translateY(-4px); }

/* block */
.blocks { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px; }
.block { background:var(--card-bg); border-radius:12px; padding:18px; border:1px solid rgba(74,58,42,0.1); overflow:hidden; display:flex; flex-direction:column;}
.block h3 { font-size:16px; color:#4a3a2a; font-weight:900; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; }
.block .more { font-size:13px; color:var(--muted); font-weight:800; }
.items { display:flex; flex-direction:column; gap:8px; flex:1; }
.items li { display:flex; justify-content:space-between; padding:6px 10px; border-radius:8px; background:linear-gradient(180deg, rgba(255,250,240,0.8), rgba(255,245,230,0.6)); font-weight:700; }

.items li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,250,240,0.8), rgba(255,245,230,0.6));
  border: 1px solid rgba(74,58,42,0.1);
  font-weight: 700;
}

/* items */
.items li .trophy {
  display: inline-block;
  width: 24px;
  text-align: center;
  margin-right: 8px;
}

.items li .name {
  flex: 1;
}

.items li .score {
  font-weight: 900;
  margin-left: 12px;
}
.news-list li {
  position: relative;
  padding: 14px 12px 28px;
  display: block;
}

.news-list .title {
  font-weight: 800;
  color: #4a3a2a;
  line-height: 1.5;
}

.news-list .source {
  position: absolute;
  right: 12px;
  bottom: 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  opacity: 0.7;
}

.news-list li {
  position: relative;
  padding: 14px 12px 28px;
  display: block;
}

.news-list .title {
  font-weight: 800;
  color: #4a3a2a;
  line-height: 1.5;
}

.news-list .meta-left {
  position: absolute;
  left: 12px;
  bottom: 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  opacity: 0.7;
}

.news-list .meta-right {
  position: absolute;
  right: 12px;
  bottom: 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  opacity: 0.7;
}

/* typing */
.typing {
  display: inline-block;
  vertical-align: bottom;
  border-right: 2px solid var(--accent-cyan);
  padding-right: 4px;
  white-space: nowrap;
  overflow: hidden;
  animation: caret 0.8s steps(1) infinite;
}


/* more-link */
.more-link {
  display: block;
  text-align: center;
  margin-top: auto;
  padding-top: 10px;
  font-weight: 800;
  font-size: 14px;
  color: #e84c12;
  text-shadow: 0 0 8px rgba(97,230,230,0.3);
  transition: all .25s ease;
}
.more-link:hover {
  color: var(--accent-pink);
  text-shadow: 0 0 12px rgba(255,111,181,0.6);
  transform: translateY(-2px);
}

/* error-popup */
.error-popup {
  position: fixed;
  inset: 0;
  background: rgba(255, 245, 230, 0.65);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  animation: fadeIn 0.25s ease forwards;
}

.popup-content {
  position: relative;
  background: rgba(255, 250, 240, 0.92);
  border: 1px solid rgba(74, 58, 42, 0.15);
  border-radius: 18px;
  padding: 28px 24px 26px;
  text-align: center;
  box-shadow: 0 12px 36px rgba(74, 58, 42, 0.15);
  max-width: 380px;
  width: 90%;
  animation: popupSlide 0.3s cubic-bezier(.2,.9,.3,1);
}

.popup-img {
  width: 96px;
  height: auto;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
}

.popup-text {
  font-size: 16px;
  font-weight: 800;
  color: #4a3a2a;
  line-height: 1.6;
  margin-bottom: 16px;
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: 0;
  color: var(--accent-pink);
  font-size: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: color .2s, transform .2s;
}
.popup-close:hover {
  color: var(--accent-cyan);
  transform: scale(1.25);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes popupSlide {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


@media (max-width: 720px) {
  .muri {
    padding: 24px 12px; 
    width: 100%; 
    box-sizing: border-box;
    text-align: center;
  }

  #muri-title {
    font-size: 24px;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    margin-bottom: 12px;
  }

  #typing-text {
    display: inline-block;
    min-width: 12ch;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 2px solid var(--accent-cyan);
    animation: caret 0.8s steps(1) infinite;
  }

  #muri-desc {
    font-size: 14px;
    color: var(--muted);
    max-width: 100%;
    margin-bottom: 16px;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .cta-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .btn {
    width: auto;
    min-width: 120px;
    font-size: 14px;
  }

  /* Blocks */
  .blocks {
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
  }

  .block {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }

  .block h3 {
    font-size: 18px;
    line-height: 1.2;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    word-break: break-word;
  }

  .block ul.items li {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    padding: 6px 0;
    word-break: break-word;
  }

  .block ul.items li .trophy,
  .block ul.items li .score,
  .block ul.items li span {
    flex-shrink: 0;
    margin: 2px 6px;
  }

  .block ul.items li .name,
  .block ul.items li a {
    flex: 1 1 auto;
    min-width: 0;
  }

  .news-list li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-bottom: 16px;
    box-sizing: border-box;
  }

  .news-list li .title a {
    font-size: 14px;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .news-list li .meta-left,
  .news-list li .meta-right {
    font-size: 12px;
    margin-top: 4px;
    flex-shrink: 0;
  }

  .news-list li .meta-right {
    align-self: flex-end;
  }

  .more-link {
    font-size: 14px;
    margin-top: 12px;
    display: block;
    text-align: center;
  }
}