/* Naruto theme "village-square" (docs/design-system.md "Naruto theme layer"): the Discord page as the Hidden Leaf's
   village square at night. Warm lantern light over the hero and a stone-paved square under it; what is in the server
   as paper slips on a wooden notice pillar; the rules as numbered papers on the square's board; the bug report guide
   as a pinned notice; the closing call as a wooden sign. Textures are CSS; the card art and logo as they are. */
/* a wider metric fallback for the brush font (Shojumaru runs about 20 % wider than Arial Black), so brush titles take
   the same lines before and after the web font arrives (no layout shift); naruto.css's own fallback is narrower */
@font-face { font-family: "Shojumaru Fallback Wide"; src: local("Arial Black"), local("Arial Bold"), local("Arial"); size-adjust: 120%; ascent-override: 80%; descent-override: 22%; line-gap-override: 0%; }
body[data-theme="village-square"] {
  --nk-brush: "Shojumaru", "Shojumaru Fallback Wide", var(--head);
  --theme-accent: #ffb547;            /* lantern light */
  --theme-accent-2: #ffd98a;
  --theme-chakra: #8c95ff;            /* the Discord blurple as the chakra line */
  --theme-cloth: #2a2350; --theme-cloth-hi: #3a3170; --theme-cloth-lo: #1a1636;
  --theme-glow: rgba(255, 170, 70, 0.12); --theme-glow-2: rgba(140, 149, 255, 0.07);
  --theme-texture: var(--nk-leaf-url); --theme-texture-size: 180px; --theme-texture-opacity: 0.03;
  --theme-mark: var(--nk-leaf-url);
  /* stone paving: offset flagstones with soft joints */
  --vs-stone:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 92px),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 30px),
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(255, 190, 110, 0.12), transparent 70%),
    linear-gradient(180deg, #3a3a40, #26262c);
}

/* the hero: lantern glows from the top corners and a paved square along the bottom */
[data-theme="village-square"] .dc-hero { background:
  radial-gradient(420px 260px at 12% 0%, rgba(255, 170, 70, 0.20), transparent 70%),
  radial-gradient(420px 260px at 88% 0%, rgba(255, 170, 70, 0.16), transparent 70%),
  radial-gradient(700px 420px at 72% 50%, rgba(140, 149, 255, 0.10), transparent 70%); }
[data-theme="village-square"] .dc-hero .xhero-grid { background: none; padding-bottom: 54px; }
[data-theme="village-square"] .dc-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30px; opacity: 1; pointer-events: none; background: var(--vs-stone);
  box-shadow: inset 0 8px 10px -6px rgba(0, 0, 0, 0.8); -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
[data-theme="village-square"] .dc-hero h1 { font-family: var(--nk-brush); font-weight: 400; letter-spacing: 0.01em; color: #fff3d6; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 26px rgba(255, 170, 70, 0.25); }
[data-theme="village-square"] .dc-hero .dc-text { color: #a9b0ff; }
.vs-kicker { margin: 0 0 14px; }
.vs-kicker svg { width: 14px; height: 14px; }
@media (max-width: 600px) { [data-theme="village-square"] .dc-hero h1 { font-size: 1.9rem; line-height: 1.15; letter-spacing: 0; } }
[data-theme="village-square"] #discord-lead { display: flex; gap: 8px; align-items: flex-start; }

/* what's in there: paper slips pinned down a wooden notice pillar */
[data-theme="village-square"] .dc-what { align-items: center; }
[data-theme="village-square"] .dc-what .plain-list { position: relative; gap: 12px; padding: 18px 18px 18px 34px; border-radius: 4px; background: var(--nk-wood-planks);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 4px #2a1708, inset 0 0 0 5px rgba(255, 210, 160, 0.12), var(--shadow-card); }
[data-theme="village-square"] .dc-what .plain-list::before { content: ""; position: absolute; left: 12px; top: 10px; bottom: 10px; width: 8px; border-radius: 4px; background: var(--nk-rod-v); }
[data-theme="village-square"] .dc-what .plain-list li { position: relative; padding: 10px 14px 10px 16px; border-radius: 1px; background: var(--nk-parchment); color: var(--nk-ink-2); font-size: 0.9375rem;
  box-shadow: inset 0 0 18px rgba(120, 70, 20, 0.2), 0 4px 8px -4px rgba(0, 0, 0, 0.7); }
[data-theme="village-square"] .dc-what .plain-list li::before { content: ""; position: absolute; left: -20px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8a7a, var(--nk-red) 55%, #5a0f0b); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
[data-theme="village-square"] .dc-what .plain-list li:nth-child(odd) { transform: rotate(-0.3deg); }
[data-theme="village-square"] .dc-what .plain-list li:nth-child(even) { transform: rotate(0.3deg); }
[data-theme="village-square"] .dc-what .plain-list b { color: var(--nk-ink); }
[data-theme="village-square"] .dc-what .plain-list a { color: var(--nk-red-ink); text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { [data-theme="village-square"] .dc-what .plain-list li { transform: none; } }
@media (max-width: 600px) { [data-theme="village-square"] .dc-what .plain-list { padding: 14px 12px 14px 30px; } }

/* the rules: the square's notice board, each rule a numbered paper */
[data-theme="village-square"] .rules-card { border: 0; border-radius: 4px; color: #ead9c3; background: var(--nk-wood-planks);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 4px #2a1708, inset 0 0 0 5px rgba(255, 210, 160, 0.12), var(--shadow-card); }
[data-theme="village-square"] .rules-card h2, [data-theme="village-square"] .bug-card h2, [data-theme="village-square"] .cta-band h2 { font-family: var(--nk-brush); font-weight: 400; letter-spacing: 0.01em; }
[data-theme="village-square"] .rules-card h2 { color: #fff3d6; }
[data-theme="village-square"] .rules { display: grid; gap: 10px; }
[data-theme="village-square"] .rules li { border: 0; padding: 12px 14px 12px 62px; min-height: 0; border-radius: 1px; background: var(--nk-parchment); box-shadow: inset 0 0 18px rgba(120, 70, 20, 0.2), 0 4px 8px -4px rgba(0, 0, 0, 0.7); }
[data-theme="village-square"] .rules li::before { left: 12px; top: 50%; width: 38px; height: 38px; margin-top: -19px; display: grid; place-items: center; border-radius: 50%;
  font: 400 1rem/1 var(--nk-brush); color: var(--nk-red-ink); box-shadow: inset 0 0 0 2px rgba(168, 35, 27, 0.8); transform: rotate(-8deg); }
[data-theme="village-square"] .rules h3 { color: var(--nk-ink); font-size: 1.05rem; }
[data-theme="village-square"] .rules p { color: var(--nk-ink-2); }

/* the bug report guide: a pinned paper notice */
[data-theme="village-square"] .bug-card { position: relative; border: 0; border-radius: 2px; background: var(--nk-parchment); color: var(--nk-ink-2);
  box-shadow: inset 0 0 34px rgba(120, 70, 20, 0.24), inset 0 0 0 1px rgba(90, 53, 25, 0.3), 0 14px 26px -14px rgba(0, 0, 0, 0.85); }
[data-theme="village-square"] .bug-card::before { content: ""; position: absolute; top: -6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8a7a, var(--nk-red) 55%, #5a0f0b); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.55); }
[data-theme="village-square"] .bug-card h2 { color: var(--nk-red-ink); }
[data-theme="village-square"] .bug-card .muted, [data-theme="village-square"] .checks span { color: var(--nk-ink-3); }
[data-theme="village-square"] .checks li { border-top-color: rgba(90, 53, 25, 0.22); color: var(--nk-ink-2); }
[data-theme="village-square"] .checks strong { color: var(--nk-ink); }
[data-theme="village-square"] .checks li::before { background-color: rgba(23, 102, 58, 0.12); border-color: rgba(23, 102, 58, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317663a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
[data-theme="village-square"] .bug-card .warn-note { background: rgba(168, 35, 27, 0.08); border-color: rgba(168, 35, 27, 0.45); color: var(--nk-red-ink); }
[data-theme="village-square"] .bug-card .warn-note svg.i { color: var(--nk-red); }
[data-theme="village-square"] .bug-card a { color: var(--nk-red-ink); text-decoration: underline; text-underline-offset: 2px; }

/* the closing call: a wooden sign with the logo */
[data-theme="village-square"] .cta-band { border: 0; border-radius: 4px; background: var(--nk-wood-planks);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 4px #2a1708, inset 0 0 0 5px rgba(255, 210, 160, 0.12), var(--shadow-card); }
[data-theme="village-square"] .cta-band h2 { color: #fff3d6; }
[data-theme="village-square"] .cta-band .muted { color: #e8cfae; }
[data-theme="village-square"] .widget { border-radius: 3px; box-shadow: 0 0 0 4px var(--nk-wood), 0 0 0 5px #2a1708; }
@media (min-width: 861px) { [data-theme="village-square"] .cta-band:has(> .btn + .btn) { grid-template-columns: auto minmax(0, 1fr) auto auto; } }