/* Wallpaper collection and compact, bilingual navigation. */
.wallpaper-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:24px 18px; }
.wallpaper-card { min-width:0; margin:0; }
.wallpaper-preview { display:block; border-radius:16px; overflow:hidden; background:var(--paper-2); border:1px solid var(--line); box-shadow:var(--shadow-s); }
.wallpaper-preview img { width:100%; height:auto; transition:transform .25s; }
.wallpaper-preview:hover img { transform:scale(1.025); }
.wallpaper-card h3 { margin:12px 0 4px; font-size:16px; }
.wallpaper-card p { margin:0 0 10px; font-size:12px; color:var(--ink-3); }
.wallpaper-card .btn { padding:9px 12px; font-size:13px; min-height:44px; }
.wallpaper-dialog { max-width:min(94vw,640px); max-height:94dvh; border:1px solid var(--line-2); border-radius:20px; padding:16px; background:var(--paper-2); color:var(--ink); }
.wallpaper-dialog::backdrop { background:rgba(12,23,20,.82); }
.wallpaper-dialog__head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.wallpaper-dialog__head h2 { font-size:16px; margin:0; }
.wallpaper-dialog__close { min-width:44px; min-height:44px; font-size:24px; border-radius:10px; }
.wallpaper-dialog__close:hover { background:var(--line); }
.wallpaper-dialog img { max-height:66dvh; width:auto; max-width:100%; margin:0 auto; object-fit:contain; }
.wallpaper-dialog__foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; }
.wallpaper-dialog__foot span { font-size:12px; color:var(--ink-3); }
.reward-table td:first-child { font-weight:600; }
.participation-steps { padding-left:24px; }
.participation-steps li { padding:7px 0; }
@media(max-width:720px) {
 .wallpaper-grid { grid-template-columns:minmax(0,1fr); gap:22px 14px; }
 .wallpaper-card h3 { font-size:14px; }
 .wallpaper-dialog { padding:12px; }
}
@media(max-width:480px) {
 .topbar__inner { gap:8px; padding-left:16px; padding-right:16px; }
 .brand { gap:7px; padding-right:0; margin-right:0; min-width:0; }
 .brand__text { display:flex; white-space:nowrap; }
 .brand__name { font-size:14px; letter-spacing:0; }
 .brand__sub,.brand__en { display:none; }
 .brand__mark { width:30px; height:30px; border-radius:8px; }
 .topbar__rule,.topbar__here { display:none; }
 .language-link { padding:7px 6px; font-size:12px; }
 .switcher__btn { padding:8px 9px; gap:5px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .wallpaper-preview img { transition:none; } }

.wallpaper-card { width:100%; max-width:520px; margin-inline:auto; }


/* 2026-10-07: numbered steps keep a dedicated column on narrow screens. */
.participation-steps {
  list-style: none;
  counter-reset: participation-step;
  padding-left: 0;
  margin-left: 0;
}
.participation-steps li {
  counter-increment: participation-step;
  position: relative;
  min-height: 36px;
  padding: 7px 0 12px 48px;
}
.participation-steps li::before {
  content: counter(participation-step);
  position: absolute;
  left: 0;
  top: 4px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--brass-3);
  border-radius: 50%;
  background: var(--brass-4);
  color: var(--brass);
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
}

.campaign-period {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 14px;
  align-items: baseline;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--brass-3);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brass-4), rgba(255, 253, 248, .82));
}
.campaign-period span {
  grid-column: 1 / -1;
  color: var(--ink-4);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.campaign-period strong {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 18px;
}
.campaign-period time {
  color: var(--brass);
  font-size: 14px;
  font-weight: 700;
}

/* Full-screen preview simulates the wallpaper on the current display. */
.wallpaper-dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #111;
}
.wallpaper-dialog[open] { display: block; }
.wallpaper-dialog::backdrop { background: #111; }
.wallpaper-dialog > img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: center;
}
.wallpaper-dialog__head {
  position: absolute;
  z-index: 2;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  margin: 0;
}
.wallpaper-dialog__head h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.wallpaper-dialog__close {
  display: grid;
  place-items: center;
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(20, 20, 20, .58);
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.wallpaper-dialog__close:hover { background: rgba(20, 20, 20, .76); }
.wallpaper-dialog__foot {
  position: absolute;
  z-index: 2;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: block;
  padding: 0;
}
.wallpaper-dialog__foot .btn {
  min-height: 46px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .34);
}

@media(max-width:480px) {
  .campaign-period { grid-template-columns: 1fr; }
  .campaign-period span { grid-column: auto; }
  .campaign-period time { margin-top: 2px; }
  .wallpaper-dialog { padding: 0; }
  .wallpaper-dialog__foot {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
  }
  .wallpaper-dialog__foot .btn { font-size: 12px; }
}