:root {
  --ink: #153f50;
  --ink-soft: #5c7a84;
  --line: rgba(32, 86, 102, .16);
  --sky: #22a7c0;
  --sky-soft: #dff7f8;
  --mint: #8edac4;
  --paper: rgba(255, 255, 255, .88);
  --paper-soft: rgba(247, 253, 251, .82);
  --sidebar: 248px;
  color: var(--ink);
  font-family: "SUIT Variable", "SUIT", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  font-size: 16px;
}

* { box-sizing: border-box; }
.visually-hidden {
  width: 1px;
  height: 1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
html {
  min-width: 300px;
  height: 100%;
  overflow: hidden;
  scroll-behavior: smooth;
}
body {
  min-width: 300px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 2%, rgba(255, 255, 255, .72) 0 12%, transparent 31%),
    linear-gradient(145deg, #c4ebed 0%, #edf8f0 50%, #dcefcf 100%);
  background-attachment: fixed;
}
body::before {
  position: fixed;
  z-index: -1;
  width: 340px;
  height: 340px;
  left: -150px;
  bottom: -130px;
  border-radius: 50%;
  background: rgba(139, 218, 193, .22);
  content: "";
}
button,
input { font: inherit; }
button { color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.app-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.app-nav {
  position: fixed;
  z-index: 20;
  inset: 18px auto 18px 18px;
  width: var(--sidebar);
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  border: 1px solid rgba(36, 95, 112, .13);
  border-radius: 24px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 22px 55px rgba(24, 88, 104, .18);
  backdrop-filter: blur(18px);
}
.side-brand {
  min-height: 66px;
  padding: 2px 8px 12px;
}
.side-brand-link {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 0;
  background: transparent;
  text-align: left;
}
.side-brand-link strong {
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.05em;
}
.side-brand-link small {
  margin-top: 4px;
  color: #62a9b9;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
}
.side-brand-link:focus-visible,
.app-nav > button:focus-visible,
.subnav button:focus-visible {
  outline: 3px solid rgba(34, 167, 192, .35);
  outline-offset: 2px;
}
.nav-section-title {
  margin: 4px 9px 5px;
  color: #82a0a9;
  font-size: 13px;
  font-weight: 900;
}
.nav-section-title--contents {
  margin-top: 14px;
}
.app-nav > button {
  position: relative;
  width: 100%;
  min-height: 50px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #294f5c;
  text-align: left;
  transition: background .15s, border-color .15s, transform .15s;
}
.app-nav > button > span {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 10px;
  background: #e9f5f7;
  font-size: 18px;
}
.app-nav > button > span svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-nav > button[data-view-button="notice"] > span { background: #ffe8ef; }
.app-nav > button[data-view-button="patchnote"] > span { background: #e8efff; }
.app-nav > button[data-view-button="rewards"] > span { background: #dff6fb; }
.app-nav > button[data-view-button="gmbase"] > span { background: #fff0dc; }
.app-nav > button > b { font-size: 15px; font-weight: 850; }
.app-nav > button:hover {
  border-color: #c7e4e8;
  background: #edf8f8;
  transform: translateX(2px);
}
.app-nav > button.is-active {
  border-color: #81d6dc;
  background: linear-gradient(90deg, #d8f6f4, #edfafa);
  color: #0d5263;
  box-shadow: 0 7px 18px rgba(31, 135, 151, .12);
}
.app-nav > button.is-active::before {
  position: absolute;
  left: -5px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 99px;
  background: #19a9bf;
  box-shadow: 0 0 0 3px rgba(25, 169, 191, .1);
  content: "";
}
.app-nav > button.has-unseen::after {
  position: absolute;
  right: 11px;
  top: 8px;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #f04444;
  box-shadow: 0 2px 7px rgba(184, 36, 36, .35);
  content: "";
}

.app-main {
  min-height: 100vh;
  margin-left: calc(var(--sidebar) + 36px);
  padding: 28px;
}
.app-view {
  display: none;
  width: min(1180px, 100%);
  margin: 0 auto;
}
.app-view.is-visible {
  display: block;
}
.main-placeholder-view.is-visible {
  min-height: calc(100vh - 88px);
  display: grid;
  place-items: center;
}
.main-placeholder-view h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: -.07em;
}
.view-header {
  min-height: 92px;
  margin-bottom: 22px;
  padding: 8px 4px 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(18, 61, 80, .2);
}
.view-header > div > span,
.eyebrow,
.catalog-group > header span {
  display: block;
  margin: 0 0 7px;
  color: #258da6;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .11em;
}
.view-header h1 {
  margin: 0;
  font-size: clamp(32px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: -.06em;
}
.loading-message {
  margin: 0;
  padding: 34px 20px;
  border: 1px dashed rgba(22, 93, 110, .24);
  border-radius: 18px;
  background: rgba(255, 255, 255, .58);
  color: var(--ink-soft);
  text-align: center;
}
.loading-message.is-error {
  border-color: rgba(190, 78, 68, .28);
  color: #a34e45;
}

.expand-list { display: grid; gap: 12px; }
.post-card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 21px;
  background: rgba(255, 255, 255, .79);
  box-shadow: 0 13px 30px rgba(23, 91, 108, .08);
}
.post-card[open] {
  border-color: rgba(42, 169, 194, .48);
  box-shadow: 0 18px 36px rgba(24, 124, 147, .13);
}
.post-card summary {
  min-height: 92px;
  padding: 15px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 70px;
  align-items: center;
  gap: 13px;
  list-style: none;
  background: linear-gradient(
    to bottom,
    #fff8e6 0,
    #fff8e6 calc(100% - 16px),
    #fffcf5 100%
  );
  cursor: pointer;
}
.post-card summary::-webkit-details-marker { display: none; }
.post-card summary:hover {
  background: linear-gradient(
    to bottom,
    #fff6df 0,
    #fff6df calc(100% - 16px),
    #fffcf5 100%
  );
}
.post-tag {
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff0aa;
  color: #755915;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
.expand-list--patch .post-tag {
  background: #dcf2f6;
  color: #26798c;
}
.post-heading strong {
  display: block;
  color: #29443e;
  font-size: 21px;
  line-height: 1.35;
}
.post-card time {
  color: #596b68;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}
.post-toggle {
  min-width: 66px;
  height: 32px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(23, 108, 132, .24);
  border-radius: 7px;
  background: #e4f1ed;
  color: #356776;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}
.post-toggle-label::before { content: "펼치기"; }
.post-card[open] .post-toggle {
  border-color: #176c84;
  background: #176c84;
  color: #fff;
}
.post-card[open] .post-toggle-label::before { content: "접기"; }
.post-body {
  padding: 30px 24px 28px;
  border-top: 0;
  background: #fffcf5;
  color: #202020;
  font-size: 15px;
  line-height: 1.74;
}
.post-content {
  width: min(100%, 760px);
  margin-inline: auto;
}
.post-content > :first-child { margin-top: 0; }
.post-content > :last-child { margin-bottom: 0; }
.post-body h2 {
  margin: 34px 0 14px;
  color: #181818;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
}
.post-body h3 {
  margin: 30px 0 10px;
  color: #202020;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
}
.post-body p { margin: 0 0 16px; }
.post-body ul,
.post-body ol { margin: 10px 0 24px; padding-left: 1.5em; }
.post-body li + li { margin-top: 10px; }
.post-body li::marker {
  color: #3f3f3f;
  font-weight: 800;
}
.post-body li > ul,
.post-body li > ol {
  margin: 8px 0 4px;
  padding-left: 1.4em;
}
.post-body li > ul { list-style-type: circle; }
.post-body li > ol { list-style-type: lower-alpha; }
.post-body li li + li { margin-top: 6px; }
.post-body li li::marker { color: #6b6b6b; }
.post-body a { color: #244f63; text-decoration: underline; }
.post-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 14px auto;
  border-radius: 12px;
}
.post-body blockquote {
  margin: 14px 0;
  padding: 11px 15px;
  border-left: 4px solid #9a9a92;
  background: #f5f5f2;
}
.post-body pre {
  overflow: auto;
  padding: 13px;
  border-radius: 10px;
  background: #123d50;
  color: #eefafa;
}
.post-body .ql-align-center { text-align: center; }
.post-body .ql-align-right { text-align: right; }
.post-body .ql-align-justify { text-align: justify; }
.post-body .ql-size-small { font-size: .8em; }
.post-body .ql-size-large { font-size: 1.5em; }
.post-body .ql-size-huge { font-size: 2.5em; }

.subnav {
  margin-bottom: 20px;
  padding: 6px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border: 1px solid rgba(37, 111, 127, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .65);
}
.subnav button {
  min-height: 42px;
  padding: 9px 15px;
  flex: 1 0 auto;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #55737d;
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
}
.subnav button[aria-selected="true"] {
  background: #176c84;
  color: #fff;
  box-shadow: 0 7px 17px rgba(23, 108, 132, .22);
}
.village-intro {
  margin-bottom: 14px;
  padding: 28px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 23px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(222, 248, 241, .86));
  box-shadow: 0 13px 30px rgba(23, 91, 108, .08);
}
.village-intro::after {
  position: absolute;
  right: -35px;
  top: -52px;
  width: 180px;
  height: 180px;
  border: 32px solid rgba(52, 177, 193, .08);
  border-radius: 50%;
  content: "";
}
.village-intro h2 {
  max-width: 680px;
  margin: 0;
  position: relative;
  z-index: 1;
  font-size: clamp(24px, 3.5vw, 34px);
  letter-spacing: -.05em;
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.guide-grid article {
  min-height: 132px;
  padding: 18px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 20px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 12px 27px rgba(23, 91, 108, .07);
}
.guide-grid article > span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #def3f1;
  font-size: 25px;
}
.guide-grid h3 {
  margin: 1px 0 7px;
  font-size: 18px;
}
.guide-grid p {
  margin: 0;
  color: #607d87;
  font-size: 14px;
  line-height: 1.7;
}
.guide-grid article:last-child { grid-column: 1 / -1; }

.section-heading {
  margin-bottom: 16px;
  padding: 4px 2px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.section-heading h2 {
  margin: 0;
  font-size: 29px;
  letter-spacing: -.05em;
}
.item-search {
  width: min(330px, 100%);
  height: 48px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(35, 103, 120, .2);
  border-radius: 13px;
  background: rgba(255, 255, 255, .8);
}
.item-search span { color: #3b8495; font-size: 21px; }
.item-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
}

.reward-catalog { display: block; }
.catalog-sections { display: grid; gap: 30px; }
.reward-family-board {
  display: grid;
  gap: 15px;
}
.reward-family {
  --family-accent: #4f9c6d;
  --family-muted: #9ed1af;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #8fa6aa;
  border-top: 3px solid var(--family-accent);
  border-radius: 7px;
  background: #e8eeeb;
  box-shadow: 0 3px 0 rgba(19, 57, 67, .1);
}
.reward-family.rarity-rare {
  --family-accent: #426faf;
  --family-muted: #9ab5dc;
}
.reward-family.rarity-epic {
  --family-accent: #7950a1;
  --family-muted: #b9a0d1;
}
.reward-family-header {
  min-height: 104px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #0f3039;
  background: #173f4b;
  color: #f6f9f7;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.reward-family-header:hover { background: #1b4855; }
.reward-family-header:focus-visible {
  outline: 3px solid rgba(111, 220, 207, .65);
  outline-offset: -4px;
}
.reward-family-header > .item-visual {
  width: 86px;
  height: 86px;
  border: 1px solid rgba(230, 242, 239, .35);
  border-radius: 4px;
  background: #dfe9e5;
}
.reward-family-header > .item-visual img {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 4px 3px rgba(7, 28, 34, .25));
}
.reward-family-header > .item-visual--emoji { font-size: 54px; }
.reward-family-heading { min-width: 0; }
.reward-family-title {
  display: block;
  margin: 0;
  color: #fff;
  font-size: 24px;
  letter-spacing: -.05em;
}
.reward-family-title > span {
  color: var(--family-muted);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.reward-family-amounts {
  margin: 9px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.reward-family-amounts > span {
  min-height: 30px;
  padding: 3px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 1px solid rgba(228, 241, 238, .24);
}
.reward-family-amounts > span:first-child { padding-left: 0; border-left: 0; }
.reward-family-amount {
  color: #f1f6f4;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.reward-family-quantity {
  margin: 0;
  color: #c3d4d6;
  font-size: 15px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}
.reward-family-quantity b {
  color: var(--family-muted);
  font-size: 18px;
}
.reward-family-contents {
  min-width: 0;
  padding: 12px 14px 15px;
}
.reward-filter-list {
  min-width: 0;
  margin-bottom: 10px;
  padding-bottom: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid #b4c2c1;
}
.reward-filter-list button {
  min-height: 32px;
  padding: 5px 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #596f74;
  font-size: 13px;
  font-weight: 800;
}
.reward-filter-list button:hover { color: #173f4b; }
.reward-filter-list button[aria-pressed="true"] {
  border-bottom-color: var(--family-accent);
  background: rgba(255, 255, 255, .38);
  color: #173f4b;
}
.reward-family-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.reward-item-card {
  min-width: 0;
  min-height: 154px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  border: 1px solid #aab9b8;
  border-top: 3px solid var(--rarity-accent);
  border-radius: 5px;
  background: #f7f9f6;
  box-shadow: none;
  color: var(--ink);
  text-align: left;
  transition: border-color .15s, background .15s;
}
.reward-item-card .item-visual {
  width: 100%;
  height: 96px;
  margin: 0 0 7px;
  flex: none;
  border-color: #c4d0ce;
  border-radius: 3px;
  background: #e3eae6;
}
.reward-item-card .item-visual img { width: 90px; height: 90px; }
.reward-item-card .item-visual--emoji { font-size: 50px; }
.reward-item-rarity {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rarity-accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}
.reward-item-card > strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.3;
}
.reward-item-description {
  width: 100%;
  margin: 8px 0 0;
  color: #675d4c;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.reward-item-duration {
  width: 100%;
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px dashed #d4bf93;
  color: #6f6656;
}
.reward-item-duration > strong {
  color: #176d66;
  font-weight: 900;
}
.reward-special {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid #9f987d;
  border-top: 3px solid #b27b26;
  border-radius: 7px;
  background: #eeeade;
  box-shadow: 0 3px 0 rgba(61, 52, 31, .1);
}
.reward-special > header {
  padding: 14px 16px;
  border-bottom: 1px solid #2e3b38;
  background: #3e443d;
}
.reward-special > header h2 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  letter-spacing: -.05em;
}
.reward-special-items {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.reward-special-items .reward-item-card {
  min-height: 124px;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  grid-template-rows: repeat(3, auto);
  align-content: start;
  align-items: start;
  column-gap: 12px;
  text-align: left;
}
.reward-special-items .reward-item-card .item-visual {
  width: 94px;
  height: 94px;
  margin: 0;
  grid-row: 1 / -1;
}
.reward-special-items .reward-item-card .item-visual img { width: 88px; height: 88px; }
.reward-special-items .reward-item-card > strong { margin-top: 5px; font-size: 17px; }
.reward-special-items .reward-item-description,
.reward-special-items .reward-item-duration { grid-column: 2; }
.reward-special-items .reward-item-description { margin-top: 7px; }
.reward-special-items .reward-item-duration { margin-top: 8px; }
.catalog-group {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 24px;
  background: rgba(255, 255, 255, .56);
  box-shadow: 0 15px 34px rgba(23, 91, 108, .07);
  backdrop-filter: blur(7px);
}
.catalog-group > header {
  min-height: 55px;
  padding: 0 2px 13px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.catalog-group > header h2 {
  margin: 0;
  font-size: 27px;
  letter-spacing: -.05em;
}
.catalog-group > header b {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(229, 245, 242, .9);
  color: #4c8379;
  font-size: 12px;
  white-space: nowrap;
}
.item-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 12px;
}
.item-card {
  --rarity-accent: #6e8188;
  --rarity-border: rgba(110, 129, 136, .42);
  --rarity-tint: rgba(236, 241, 242, .9);
  min-height: 146px;
  padding: 13px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  overflow: hidden;
  border: 1px solid var(--rarity-border);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--rarity-tint), rgba(255, 255, 255, .9) 58%);
  box-shadow: inset 4px 0 0 var(--rarity-accent), 0 9px 22px rgba(31, 91, 105, .06);
}
.item-visual {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(38, 101, 117, .09);
  border-radius: 17px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .92), transparent 38%),
    linear-gradient(145deg, #e8f6f5, #d8edee);
}
.item-visual img {
  width: 88px;
  height: 88px;
  position: relative;
  z-index: 1;
  object-fit: contain;
  filter: drop-shadow(0 6px 6px rgba(17, 66, 78, .14));
}
.item-visual--emoji {
  font-size: 48px;
  filter: drop-shadow(0 5px 5px rgba(17, 66, 78, .13));
}
.image-fallback {
  display: none;
  position: absolute;
  font-size: 42px;
}
.item-visual.has-image-error img { display: none; }
.item-visual.has-image-error .image-fallback { display: block; }
.item-copy { min-width: 0; }
.item-meta {
  min-height: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.item-meta > span:first-child {
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid var(--rarity-border);
  background: var(--rarity-tint);
  color: var(--rarity-accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.item-price {
  color: #3b7e70;
  font-size: 11px;
  font-weight: 850;
}
.item-copy h3 {
  margin: 7px 0 5px;
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.35;
}
.item-copy p {
  margin: 0;
  color: #68828a;
  font-size: 12px;
  line-height: 1.55;
}
.rarity-common {
  --rarity-accent: #667a82;
  --rarity-border: rgba(102, 122, 130, .44);
  --rarity-tint: rgba(234, 239, 241, .94);
}
.rarity-uncommon {
  --rarity-accent: #268a52;
  --rarity-border: rgba(38, 138, 82, .43);
  --rarity-tint: rgba(218, 243, 227, .95);
}
.rarity-rare {
  --rarity-accent: #346db6;
  --rarity-border: rgba(52, 109, 182, .42);
  --rarity-tint: rgba(224, 236, 250, .95);
}
.rarity-epic {
  --rarity-accent: #7744a8;
  --rarity-border: rgba(119, 68, 168, .42);
  --rarity-tint: rgba(239, 227, 249, .95);
}
.rarity-legendary {
  --rarity-accent: #a96d13;
  --rarity-border: rgba(195, 125, 21, .46);
  --rarity-tint: rgba(255, 240, 209, .96);
}

@media (max-width: 1100px) and (min-width: 681px) {
  :root { --sidebar: clamp(172px, 22vw, 218px); }
  .app-nav {
    inset: 12px auto 12px 12px;
    padding: 16px 12px 13px;
    border-radius: 20px;
  }
  .side-brand { min-height: 57px; padding: 1px 7px 10px; }
  .side-brand-link strong { font-size: 19px; }
  .side-brand-link small { display: none; }
  .nav-section-title { margin-inline: 7px; font-size: 11px; }
  .nav-section-title--contents { margin-top: 10px; }
  .app-nav > button { min-height: 46px; padding: 5px 7px; gap: 8px; }
  .app-nav > button > span { width: 29px; height: 29px; border-radius: 9px; font-size: 16px; }
  .app-nav > button > b { font-size: 14px; white-space: nowrap; }
  .app-main {
    margin-left: calc(var(--sidebar) + 28px);
    padding: 20px clamp(14px, 1.8vw, 20px) 24px;
  }
  .item-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
  .reward-family { border-radius: 6px; }
  .reward-family-header { min-height: 84px; padding: 11px 12px; grid-template-columns: 68px minmax(0, 1fr); gap: 12px; }
  .reward-family-header > .item-visual { width: 68px; height: 68px; }
  .reward-family-header > .item-visual img { width: 64px; height: 64px; }
  .reward-family-title { font-size: 21px; }
  .reward-family-title > span { font-size: 13px; }
  .reward-family-amounts { margin-top: 6px; gap: 5px; }
  .reward-family-amounts > span { min-height: 30px; padding: 3px 7px; }
  .reward-family-amount { font-size: 12px; }
  .reward-family-quantity b { font-size: 16px; }
  .reward-family-contents { padding: 10px 11px 12px; }
  .reward-filter-list { gap: 5px; }
  .reward-filter-list button { min-height: 32px; padding: 4px 7px; font-size: 12px; }
  .reward-family-items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .reward-item-card { min-height: 140px; padding: 6px; border-radius: 4px; }
  .reward-item-card .item-visual { width: 100%; height: 78px; margin-bottom: 7px; }
  .reward-item-card .item-visual img { width: 72px; height: 72px; }
  .reward-item-rarity { font-size: 10px; }
  .reward-item-card > strong { margin-top: 5px; font-size: 14px; }
  .reward-special { border-radius: 6px; }
  .reward-special-items { padding: 12px; }
  .reward-special-items .reward-item-card .item-visual { width: 82px; height: 82px; }
  .reward-special-items .reward-item-card .item-visual img { width: 78px; height: 78px; }
}

@media (max-width: 680px) {
  .app-nav {
    position: sticky;
    inset: 0;
    width: 100%;
    padding: 8px;
    flex-direction: row;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0 0 18px 18px;
  }
  .side-brand { min-width: max-content; min-height: 52px; padding: 7px 11px; }
  .side-brand-link { justify-content: center; }
  .side-brand-link strong { font-size: 16px; }
  .side-brand-link small,
  .nav-section-title { display: none; }
  .app-nav > button { width: auto; min-width: max-content; min-height: 52px; padding: 7px 11px; }
  .app-nav > button:hover { transform: none; }
  .app-nav > button > span { width: 31px; height: 31px; font-size: 17px; }
  .app-nav > button.is-active::before {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 2px;
    width: auto;
    height: 3px;
  }
  .app-nav > button.has-unseen::after { right: 5px; top: 4px; }
  .app-main { margin-left: 0; padding: 16px 13px 20px; }
  .main-placeholder-view.is-visible { min-height: calc(100vh - 92px); }
  .post-card summary { grid-template-columns: auto minmax(0, 1fr) 64px; gap: 10px; }
  .post-card time { grid-column: 2; }
  .post-toggle { grid-column: 3; grid-row: 1 / 3; min-width: 60px; }
  .post-body { padding: 26px 17px 22px; }
  .guide-grid { grid-template-columns: 1fr; }
  .guide-grid article:last-child { grid-column: auto; }
  .section-heading { align-items: stretch; flex-direction: column; }
  .item-search { width: 100%; }
  .catalog-group { padding: 17px; }
  .item-grid { grid-template-columns: 1fr; }
  .reward-family-board { gap: 12px; }
  .reward-family { border-radius: 6px; }
  .reward-family-header { min-height: 90px; padding: 12px; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; }
  .reward-family-header > .item-visual { width: 74px; height: 74px; }
  .reward-family-header > .item-visual img { width: 70px; height: 70px; }
  .reward-family-title { font-size: 22px; }
  .reward-family-title > span { font-size: 13px; }
  .reward-family-contents { padding: 11px 12px 13px; }
  .reward-family-items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .reward-item-card { min-height: 146px; padding: 7px; }
  .reward-item-card .item-visual { width: 100%; height: 86px; }
  .reward-item-card .item-visual img { width: 82px; height: 82px; }
  .reward-special { border-radius: 6px; }
  .reward-special-items { padding: 12px; }
}

@media (max-width: 480px) {
  .view-header { min-height: 82px; align-items: flex-start; flex-direction: column; gap: 12px; }
  .reward-family-header { grid-template-columns: 78px minmax(0, 1fr); gap: 11px; }
  .reward-family-header > .item-visual { width: 78px; height: 78px; }
  .reward-family-header > .item-visual img { width: 74px; height: 74px; }
  .reward-family-title { font-size: 21px; }
  .reward-family-amounts > span { padding: 4px 8px; }
  .reward-filter-list button { min-height: 34px; padding: 5px 8px; font-size: 12px; }
  .reward-family-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reward-item-card { min-height: 150px; }
  .reward-item-card .item-visual { width: 100%; height: 84px; }
  .reward-item-card .item-visual img { width: 80px; height: 80px; }
  .reward-item-card > strong { font-size: 15px; }
  .reward-special-items { grid-template-columns: 1fr; }
}

@media (max-width: 350px) {
  .app-main { padding-inline: 10px; }
  .reward-family-header { padding: 9px; grid-template-columns: 68px minmax(0, 1fr); gap: 9px; }
  .reward-family-contents { padding: 9px; }
  .reward-family-header > .item-visual { width: 68px; height: 68px; }
  .reward-family-header > .item-visual img { width: 64px; height: 64px; }
  .reward-family-title { font-size: 19px; }
  .reward-family-title > span { font-size: 12px; }
  .reward-family-amounts { gap: 4px; }
  .reward-filter-list button { padding-inline: 7px; }
}

/* Fantasy guide theme */
:root {
  --ink: #29443e;
  --ink-soft: #706957;
  --line: rgba(137, 109, 66, .25);
  --sky: #218f83;
  --sky-soft: #e1f0e4;
  --mint: #8eaf62;
  --paper: #faf5df;
  --paper-soft: #eadbb5;
  --sidebar: 300px;
}

html { background: #10241e; }
body {
  background:
    radial-gradient(circle at 6% 92%, rgba(111, 153, 72, .48) 0 3%, transparent 15%),
    radial-gradient(circle at 95% 4%, rgba(74, 135, 119, .3) 0 4%, transparent 20%),
    linear-gradient(135deg, #29463a 0%, #17342d 52%, #0c211b 100%);
  background-attachment: fixed;
}
body::before {
  z-index: 0;
  width: 390px;
  height: 190px;
  left: -85px;
  bottom: -42px;
  border-radius: 0;
  background:
    radial-gradient(circle at 8% 72%, #517d34 0 25px, transparent 26px),
    radial-gradient(circle at 23% 48%, #6b9640 0 34px, transparent 35px),
    radial-gradient(circle at 42% 70%, #416e32 0 38px, transparent 39px),
    radial-gradient(circle at 62% 44%, #78a94a 0 30px, transparent 31px),
    radial-gradient(circle at 82% 73%, #4d7c34 0 44px, transparent 45px);
  opacity: .58;
  filter: saturate(.82);
  pointer-events: none;
}
body::after {
  position: fixed;
  z-index: 0;
  width: 280px;
  height: 210px;
  right: -85px;
  top: -72px;
  background:
    radial-gradient(ellipse at 25% 50%, rgba(102, 148, 72, .6) 0 20%, transparent 21%),
    radial-gradient(ellipse at 58% 26%, rgba(70, 112, 58, .65) 0 22%, transparent 23%),
    radial-gradient(ellipse at 74% 70%, rgba(109, 151, 78, .45) 0 25%, transparent 26%);
  content: "";
  opacity: .55;
  filter: saturate(.85);
  pointer-events: none;
}
.app-shell { position: relative; z-index: 1; }

.app-nav {
  inset: 12px auto 12px 12px;
  width: var(--sidebar);
  padding: 20px 16px 104px;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overscroll-behavior: contain;
  border: 2px solid #aa8250;
  border-radius: 24px;
  background:
    radial-gradient(circle at 84% 8%, rgba(255, 255, 255, .46) 0 5%, transparent 21%),
    linear-gradient(105deg, #e8d19d 0%, #faedca 48%, #e4c88e 100%);
  box-shadow:
    inset 0 0 0 4px rgba(255, 250, 224, .58),
    inset 0 0 20px rgba(128, 83, 34, .11),
    0 18px 38px rgba(5, 19, 13, .38);
  backdrop-filter: none;
}
.app-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.app-nav::before {
  position: absolute;
  z-index: 0;
  inset: 7px;
  border: 1px solid rgba(145, 104, 53, .28);
  border-radius: 18px;
  content: "";
  pointer-events: none;
}
.app-nav::after {
  position: absolute;
  z-index: 1;
  left: -12px;
  right: -12px;
  bottom: -8px;
  height: 94px;
  background:
    radial-gradient(circle at 4% 88%, #557d31 0 31px, transparent 32px),
    radial-gradient(circle at 20% 72%, #75a246 0 39px, transparent 40px),
    radial-gradient(circle at 40% 91%, #466f2f 0 44px, transparent 45px),
    radial-gradient(circle at 63% 69%, #7aa848 0 34px, transparent 35px),
    radial-gradient(circle at 83% 90%, #4c7732 0 43px, transparent 44px),
    radial-gradient(circle at 101% 70%, #6b9740 0 37px, transparent 38px);
  content: "";
  opacity: .58;
  filter: saturate(.82);
  pointer-events: none;
}
.app-nav > * { position: relative; z-index: 2; }

.side-brand {
  min-height: 94px;
  margin: 0 0 18px;
  padding: 7px;
  border: 2px solid #674328;
  border-radius: 16px;
  background:
    linear-gradient(9deg, rgba(255, 255, 255, .06), transparent 38%),
    linear-gradient(135deg, #b57d42, #86532f 58%, #a36938);
  box-shadow: inset 0 0 0 2px rgba(224, 177, 103, .4), 0 3px 0 rgba(91, 55, 29, .2);
}
.side-brand::before,
.side-brand::after {
  position: absolute;
  z-index: 3;
  width: 26px;
  height: 14px;
  border: 1px solid #466b2e;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #9bbb57, #557f36);
  content: "";
  pointer-events: none;
}
.side-brand::before { left: -7px; top: -7px; transform: rotate(23deg); }
.side-brand::after { right: -5px; bottom: 7px; transform: rotate(205deg); }
.side-brand-link {
  min-height: 74px;
  padding: 13px 12px;
  position: relative;
  align-items: center;
  justify-content: center;
  border: 2px solid #c29152;
  border-radius: 10px;
  background:
    repeating-linear-gradient(0deg, rgba(133, 95, 45, .025) 0 1px, transparent 1px 5px),
    #fff0c7;
  box-shadow: inset 0 0 0 2px rgba(255, 250, 222, .72);
  text-align: center;
}
.side-brand-link::before,
.side-brand-link::after {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid #805a31;
  border-radius: 50%;
  background: #c99b59;
  box-shadow: inset 0 1px rgba(255, 235, 181, .65);
  content: "";
  transform: translateY(-50%);
}
.side-brand-link::before { left: 8px; }
.side-brand-link::after { right: 8px; }
.side-brand-link strong { color: #4b3624; font-size: 30px; text-shadow: 0 1px #fff7df; }
.side-brand-link small { display: none; }

.nav-section-title,
.nav-section-title--contents {
  width: calc(100% - 8px);
  min-height: 36px;
  margin: 4px 4px 8px;
  padding: 6px 10px 6px 30px;
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid rgba(151, 111, 59, .38);
  border-left: 4px solid #2a9084;
  border-radius: 8px;
  background: linear-gradient(90deg, #e5c98f, #f3dfb3);
  color: #57432d;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .025em;
  box-shadow: inset 0 1px rgba(255, 249, 226, .62), 0 2px 4px rgba(101, 72, 35, .08);
  text-shadow: 0 1px rgba(255, 255, 255, .65);
}
.nav-section-title::before {
  position: absolute;
  left: 11px;
  width: 9px;
  height: 13px;
  border: 1px solid #59783f;
  border-radius: 80% 20% 70% 30%;
  background: linear-gradient(145deg, #a8bd67, #668642);
  content: "";
  transform: rotate(-35deg);
}
.nav-section-title--contents {
  margin-top: 16px;
}
.app-nav > button {
  --nav-accent: #2b8d82;
  --nav-tint: #dceee4;
  height: 56px;
  min-height: 56px;
  padding: 7px 10px;
  gap: 10px;
  border: 1px solid transparent;
  border-bottom-color: rgba(155, 118, 67, .28);
  border-radius: 10px;
  background: rgba(255, 249, 226, .22);
  color: #453a2d;
}
.app-nav > button[data-view-button="notice"] { --nav-accent: #c95d55; --nav-tint: #f4ded4; }
.app-nav > button[data-view-button="patchnote"] { --nav-accent: #3b7e9a; --nav-tint: #dcebf0; }
.app-nav > button[data-view-button="rewards"] { --nav-accent: #238f83; --nav-tint: #dceee4; }
.app-nav > button[data-view-button="gmbase"] { --nav-accent: #a77237; --nav-tint: #f1e2c2; }
.app-nav > button > span {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid var(--nav-accent);
  border-radius: 10px;
  background: linear-gradient(145deg, #fff9e8, var(--nav-tint)) !important;
  color: var(--nav-accent);
  box-shadow: inset 0 0 0 2px rgba(255, 253, 237, .66), 0 2px 3px rgba(100, 72, 37, .1);
}
.app-nav > button > b { font-size: 15px; line-height: 1.25; }
.app-nav > button:hover {
  border-color: #bda06d;
  background: rgba(255, 249, 225, .74);
  transform: translateX(1px);
}
.app-nav > button.is-active {
  border: 2px solid #2b9487;
  background: linear-gradient(90deg, #e5f1df, #fff6d8);
  color: #0d665f;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 235, .88), 0 4px 8px rgba(77, 95, 51, .14);
}
.app-nav > button.is-active::before {
  left: -7px;
  top: 11px;
  bottom: 11px;
  width: 7px;
  border-radius: 3px;
  background: #238c7f;
  box-shadow: 0 0 0 2px rgba(235, 244, 204, .9);
}
.app-nav > button.has-unseen::after { border-color: #fff3cf; }

.app-main {
  position: fixed;
  inset: 0;
  min-height: 0;
  margin: 12px 12px 12px calc(var(--sidebar) + 24px);
  padding: 30px 38px;
  overflow: hidden;
  border: 2px solid #bea16c;
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 5%, rgba(91, 157, 134, .1) 0 2%, transparent 19%),
    radial-gradient(circle at 8% 90%, rgba(191, 157, 91, .09) 0 4%, transparent 21%),
    linear-gradient(100deg, #faf4dd, #fffdf0 54%, #eee4c8);
  background-attachment: fixed;
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 244, .66),
    inset 0 0 28px rgba(143, 103, 48, .08),
    0 16px 40px rgba(3, 17, 11, .34);
}
.app-main::before {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(161, 124, 70, .24);
  border-radius: 17px;
  content: "";
  pointer-events: none;
}
.app-main::after {
  position: absolute;
  top: -2px;
  left: 32px;
  width: 148px;
  height: 5px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, #2b9588, #89bd8a);
  box-shadow: 0 1px rgba(255, 255, 255, .28);
  content: "";
  pointer-events: none;
}
.app-view { position: relative; z-index: 1; }
.app-view.is-visible {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.app-view.is-visible::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.main-placeholder-view.is-visible { min-height: 100%; }

.view-header {
  min-height: 106px;
  margin-bottom: 22px;
  padding: 10px 8px 20px;
  position: relative;
  border-bottom: 2px dashed #bea66f;
}
.view-header::after {
  position: absolute;
  right: 3px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border: 2px solid #2b9886;
  background: #fff8df;
  content: "";
  transform: rotate(45deg);
}
.view-header > div > span { color: #168473; font-size: 13px; letter-spacing: .12em; }
.view-header > div > span::before {
  width: 8px;
  height: 8px;
  margin-right: 9px;
  display: inline-block;
  border: 2px solid #2b9a89;
  content: "";
  transform: rotate(45deg);
}
.view-header > div > span::after { content: none; }
.view-header h1 { color: #114c48; font-size: clamp(35px, 4.2vw, 48px); text-shadow: 0 2px #fff; }

.loading-message,
.post-card,
.subnav,
.village-intro,
.guide-grid article,
.catalog-group {
  border-color: #d7c08e;
  background: rgba(255, 248, 223, .88);
  box-shadow: 0 5px 12px rgba(111, 82, 39, .08);
  backdrop-filter: none;
}

.reward-family {
  --family-dark: #084b49;
  --family-mid: #0b6862;
  --family-edge: #2a9184;
  --family-muted: #a9d65d;
  border: 2px solid var(--family-edge);
  border-radius: 16px;
  background: #f8edcf;
  box-shadow: inset 0 0 0 2px rgba(255, 250, 224, .68), 0 5px 12px rgba(69, 59, 31, .13);
}
.reward-family.rarity-rare {
  --family-dark: #103f67;
  --family-mid: #17628f;
  --family-edge: #2d80b5;
  --family-muted: #83cde7;
}
.reward-family.rarity-epic {
  --family-dark: #49335e;
  --family-mid: #65437f;
  --family-edge: #8b61a8;
  --family-muted: #d1a8e4;
}
.reward-family-header,
.reward-family-header:hover {
  min-height: 116px;
  padding: 15px 18px;
  position: relative;
  overflow: hidden;
  grid-template-columns: 92px minmax(0, 1fr);
  border-bottom: 2px solid #d8bd83;
  background-color: var(--family-dark);
  background-image:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, .1), transparent 28%),
    linear-gradient(180deg, var(--family-mid), var(--family-dark));
  box-shadow: inset 0 0 0 2px rgba(119, 222, 204, .15), inset 0 -8px 18px rgba(0, 0, 0, .1);
}
.reward-family-header:hover { filter: brightness(1.045); }
.reward-family-header::before {
  position: absolute;
  z-index: 0;
  inset: 6px;
  border: 1px solid rgba(206, 241, 228, .18);
  border-radius: 10px;
  content: "";
  pointer-events: none;
}
.reward-family-header::after {
  position: absolute;
  z-index: 0;
  right: 18px;
  bottom: 7px;
  width: 78px;
  height: 68px;
  background:
    radial-gradient(ellipse at 50% 68%, rgba(235, 248, 225, .085) 0 25%, transparent 26%),
    radial-gradient(circle at 18% 34%, rgba(235, 248, 225, .085) 0 9%, transparent 10%),
    radial-gradient(circle at 40% 20%, rgba(235, 248, 225, .085) 0 9%, transparent 10%),
    radial-gradient(circle at 63% 20%, rgba(235, 248, 225, .085) 0 9%, transparent 10%),
    radial-gradient(circle at 84% 35%, rgba(235, 248, 225, .085) 0 9%, transparent 10%);
  content: "";
  pointer-events: none;
  transform: rotate(-12deg);
}
.reward-family-header > * { position: relative; z-index: 1; }
.reward-family-header > .item-visual {
  width: 92px;
  height: 92px;
  border: 2px solid #e2c992;
  border-radius: 11px;
  background: linear-gradient(145deg, #fff9e5, #ead9b5);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .66), 0 3px 6px rgba(0, 0, 0, .18);
}
.reward-family-header > .item-visual img { width: 84px; height: 84px; }
.reward-family-title { color: #fffdf0; font-size: 28px; text-shadow: 0 2px rgba(0, 0, 0, .24); }
.reward-family-title > span { color: var(--family-muted); font-size: 17px; }
.reward-family-amounts { margin-top: 9px; }
.reward-family-amounts > span { border-left-color: rgba(255, 247, 218, .32); }
.reward-family-amount { color: #fff9e8; }
.reward-family-quantity { color: #d7e7e0; }
.reward-family-quantity b { color: var(--family-muted); }
.reward-family-contents {
  padding: 14px 16px 17px;
  background:
    radial-gradient(circle at 96% 6%, rgba(46, 143, 126, .055), transparent 24%),
    linear-gradient(100deg, #f8f0d7, #fffaf0 52%, #ecdfbd);
}
.reward-filter-list {
  min-height: 52px;
  margin: -14px -16px 15px;
  padding: 0 16px;
  align-items: flex-end;
  gap: 4px;
  border-bottom: 1px solid #d5b87e;
  background: linear-gradient(#ead4a4, #f8e9c4);
  box-shadow: inset 0 -2px 6px rgba(124, 87, 39, .07);
}
.reward-filter-list button {
  min-height: 46px;
  padding: 8px 15px 7px;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
  color: #69563b;
  font-size: 14px;
}
.reward-filter-list button:hover { color: #176d66; background: rgba(255, 250, 225, .45); }
.reward-filter-list button[aria-pressed="true"] {
  border-color: #dfc896;
  border-bottom-color: var(--family-edge);
  background: #fff8df;
  color: #0d6962;
  box-shadow: 0 -2px 5px rgba(104, 79, 38, .08);
}
.reward-family-items { gap: 11px; }
.reward-item-card {
  min-height: 188px;
  padding: 9px;
  border: 1px solid #d3bd8c;
  border-top: 3px solid var(--rarity-accent);
  border-radius: 10px;
  background: linear-gradient(145deg, #fbf7e9, #eee3c6);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .56), 0 3px 7px rgba(115, 83, 38, .11);
}
.reward-item-card .item-visual {
  width: 100%;
  height: 118px;
  margin-bottom: 8px;
  border: 1px solid #d7c49d;
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .72), transparent 52%),
    #f1e9d7;
  box-shadow: inset 0 0 10px rgba(126, 91, 44, .08);
}
.reward-item-card .item-visual img { width: 110px; height: 110px; }
.reward-item-rarity {
  top: 13px;
  left: 13px;
  padding: 4px 7px;
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 5px;
  background: var(--rarity-accent);
  color: #fff;
  font-size: 11px;
  letter-spacing: .02em;
  box-shadow: 0 2px 4px rgba(65, 45, 22, .18);
  text-shadow: 0 1px rgba(0, 0, 0, .2);
}
.reward-item-card > strong {
  width: 100%;
  margin-top: 0;
  padding-top: 7px;
  border-top: 1px dashed #d4bf93;
  color: #2b493f;
  font-size: 16px;
}

.reward-special {
  border: 2px solid #b7924e;
  border-radius: 16px;
  background: #f6e7bd;
  box-shadow: inset 0 0 0 2px rgba(255, 250, 224, .68), 0 5px 12px rgba(71, 55, 27, .13);
}
.reward-special > header {
  padding: 16px 18px;
  border-bottom-color: #b9914e;
  background:
    radial-gradient(circle at 90% 5%, rgba(255, 255, 255, .08), transparent 30%),
    linear-gradient(180deg, #67664b, #3e5148);
  box-shadow: inset 0 0 0 3px rgba(255, 244, 195, .09);
}
.reward-special-items { padding: 16px; gap: 11px; }

@media (max-width: 1100px) and (min-width: 681px) {
  :root { --sidebar: clamp(172px, 22vw, 218px); }
  .app-nav { inset: 9px auto 9px 9px; padding: 13px 10px 76px; border-radius: 17px; }
  .app-nav::before { inset: 4px; border-radius: 12px; }
  .app-nav::after { height: 66px; }
  .side-brand { min-height: 66px; margin-bottom: 14px; padding: 6px; border-width: 2px; border-radius: 12px; }
  .side-brand::before,
  .side-brand::after { width: 18px; height: 10px; }
  .side-brand-link { min-height: 50px; padding: 8px 6px; border-radius: 7px; }
  .side-brand-link strong { font-size: 21px; }
  .nav-section-title,
  .nav-section-title--contents {
    width: calc(100% - 8px);
    min-height: 28px;
    margin: 4px 4px 7px;
    padding: 5px 7px 5px 23px;
    font-size: 11px;
  }
  .nav-section-title::before { left: 7px; }
  .nav-section-title--contents { margin-top: 12px; }
  .app-nav > button { height: 46px; min-height: 46px; padding: 5px 7px; gap: 8px; }
  .app-nav > button > span { width: 30px; height: 30px; flex-basis: 30px; border-radius: 7px; }
  .app-nav > button > span svg { width: 18px; height: 18px; }
  .app-nav > button > b { font-size: 14px; white-space: nowrap; }
  .app-main {
    min-height: 0;
    margin: 8px 8px 8px calc(var(--sidebar) + 28px);
    padding: 22px 16px 24px;
    border-radius: 18px;
  }
  .app-main::before { inset: 5px; border-radius: 13px; }
  .view-header { min-height: 94px; margin-bottom: 18px; padding-inline: 4px; }
  .view-header h1 { font-size: 34px; }
  .reward-family { border-radius: 12px; }
  .reward-family-header,
  .reward-family-header:hover { min-height: 94px; padding: 11px 12px; grid-template-columns: 68px minmax(0, 1fr); gap: 12px; }
  .reward-family-header > .item-visual { width: 68px; height: 68px; border-radius: 8px; }
  .reward-family-header > .item-visual img { width: 62px; height: 62px; }
  .reward-family-title { font-size: 21px; }
  .reward-family-title > span { font-size: 13px; }
  .reward-family-amounts { margin-top: 6px; gap: 4px; }
  .reward-family-amounts > span { min-height: 28px; padding: 2px 7px; }
  .reward-family-amount { font-size: 12px; }
  .reward-family-quantity b { font-size: 16px; }
  .reward-family-contents { padding: 11px 11px 13px; }
  .reward-filter-list { min-height: 44px; margin: -11px -11px 12px; padding-inline: 11px; }
  .reward-filter-list button { min-height: 40px; padding: 6px 8px 5px; font-size: 12px; }
  .reward-family-items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .reward-item-card { min-height: 148px; padding: 6px; border-radius: 8px; }
  .reward-item-card .item-visual { height: 82px; margin-bottom: 6px; border-radius: 5px; }
  .reward-item-card .item-visual img { width: 76px; height: 76px; }
  .reward-item-rarity { top: 9px; left: 9px; padding: 3px 5px; font-size: 9px; }
  .reward-item-card > strong { padding-top: 5px; font-size: 14px; }
  .reward-special { border-radius: 12px; }
  .reward-special > header { padding: 13px 15px; }
  .reward-special-items { padding: 12px; }
}

@media (max-width: 680px) {
  .app-nav {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    height: 68px;
    padding: 7px;
    flex-direction: row;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    border-width: 0 0 2px;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 6px 16px rgba(29, 39, 20, .22);
  }
  .app-nav::before,
  .app-nav::after,
  .side-brand::before,
  .side-brand::after,
  .side-brand-link::before,
  .side-brand-link::after { display: none; }
  .side-brand { min-width: max-content; min-height: 52px; margin: 0; padding: 3px; border-width: 1px; border-radius: 9px; }
  .side-brand-link { min-height: 44px; padding: 7px 10px; border-width: 1px; background: #fff0c7; }
  .side-brand-link strong { font-size: 16px; }
  .nav-section-title { display: none; }
  .app-nav > button { width: auto; min-width: max-content; height: 52px; min-height: 52px; padding: 6px 10px; border-bottom-color: transparent; }
  .app-nav > button:hover { transform: none; }
  .app-nav > button > span { width: 32px; height: 32px; flex-basis: 32px; }
  .app-nav > button > span svg { width: 19px; height: 19px; }
  .app-nav > button.is-active::before {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 2px;
    width: auto;
    height: 3px;
  }
  .app-main {
    inset: 68px 0 0;
    min-height: 0;
    margin: 7px;
    padding: 17px 13px 20px;
    border-radius: 17px;
  }
  .app-main::before { inset: 5px; border-radius: 12px; }
  .view-header { min-height: 90px; margin-bottom: 17px; padding: 7px 3px 17px; }
  .view-header h1 { font-size: 34px; }
  .reward-family { border-radius: 12px; }
  .reward-family-header,
  .reward-family-header:hover { min-height: 98px; padding: 12px; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; }
  .reward-family-header > .item-visual { width: 74px; height: 74px; border-radius: 8px; }
  .reward-family-header > .item-visual img { width: 68px; height: 68px; }
  .reward-family-title { font-size: 22px; }
  .reward-family-title > span { font-size: 13px; }
  .reward-family-contents { padding: 11px 12px 14px; }
  .reward-filter-list { min-height: 46px; margin: -11px -12px 12px; padding-inline: 12px; }
  .reward-filter-list button { min-height: 42px; padding: 6px 9px 5px; font-size: 12px; }
  .reward-family-items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .reward-item-card { min-height: 154px; padding: 7px; border-radius: 8px; }
  .reward-item-card .item-visual { height: 88px; margin-bottom: 6px; }
  .reward-item-card .item-visual img { width: 82px; height: 82px; }
  .reward-item-rarity { top: 10px; left: 10px; padding: 3px 5px; font-size: 9px; }
  .reward-item-card > strong { padding-top: 6px; font-size: 14px; }
  .reward-special { border-radius: 12px; }
  .reward-special-items { padding: 12px; }
}

@media (max-width: 480px) {
  .app-main { margin: 5px; padding: 15px 10px 18px; border-radius: 14px; }
  .view-header { min-height: 84px; }
  .view-header > div > span { font-size: 11px; }
  .view-header h1 { font-size: 31px; }
  .reward-family-header,
  .reward-family-header:hover { grid-template-columns: 78px minmax(0, 1fr); gap: 11px; }
  .reward-family-contents { padding: 10px; }
  .reward-filter-list { margin: -10px -10px 11px; padding-inline: 9px; }
  .reward-filter-list button { min-height: 40px; padding-inline: 8px; }
  .reward-family-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reward-item-card { min-height: 158px; }
  .reward-item-card .item-visual { height: 90px; }
  .reward-item-card .item-visual img { width: 84px; height: 84px; }
  .reward-item-card > strong { font-size: 15px; }
  .reward-special-items { grid-template-columns: 1fr; }
}

@media (max-width: 350px) {
  .app-main { margin: 3px; padding-inline: 8px; }
  .reward-family-header,
  .reward-family-header:hover { padding: 9px; grid-template-columns: 68px minmax(0, 1fr); gap: 9px; }
  .reward-family-header > .item-visual { width: 68px; height: 68px; }
  .reward-family-header > .item-visual img { width: 62px; height: 62px; }
  .reward-family-title { font-size: 19px; }
  .reward-family-title > span { font-size: 12px; }
  .reward-family-contents { padding: 8px; }
  .reward-filter-list { margin: -8px -8px 9px; padding-inline: 7px; }
  .reward-filter-list button { padding-inline: 6px; }
}

@media (min-width: 681px) and (max-height: 620px) {
  .app-nav {
    padding: 10px 9px 28px;
    gap: 3px;
  }
  .app-nav::after { height: 44px; opacity: .42; }
  .side-brand {
    min-height: 54px;
    margin-bottom: 5px;
    padding: 3px;
    border-radius: 10px;
  }
  .side-brand::before,
  .side-brand::after { display: none; }
  .side-brand-link {
    min-height: 46px;
    padding: 5px 8px;
    border-radius: 6px;
  }
  .side-brand-link strong { font-size: 20px; }
  .nav-section-title,
  .nav-section-title--contents {
    min-height: 24px;
    margin: 2px 4px 5px;
    padding-block: 4px;
  }
  .nav-section-title--contents { margin-top: 4px; }
  .app-nav > button {
    height: 42px;
    min-height: 42px;
    padding-block: 4px;
  }
  .app-nav > button > span {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
  }
  .app-nav > button > span svg { width: 17px; height: 17px; }
}

[data-rough-title] {
  position: relative;
  display: inline-block;
}

.collapse-panel {
  min-width: 0;
  overflow: hidden;
}
details[data-sliding="true"] > .collapse-panel { pointer-events: none; }

.post-toggle {
  border-color: #c7ad75;
  background: rgba(255, 249, 226, .72);
  color: #66573d;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 244, .48);
}
.post-card[open] .post-toggle {
  border-color: #257f75;
  background: #257f75;
  color: #fffbe9;
}

.village-map-card {
  margin: 0 0 14px;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(210px, 286px) minmax(280px, 420px);
  justify-content: center;
  align-items: stretch;
  gap: clamp(24px, 4vw, 38px);
  border: 2px solid #cbb17a;
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 14%, rgba(42, 145, 132, .1), transparent 27%),
    linear-gradient(110deg, #f7edcf, #fff9e7 54%, #ecdfbd);
  box-shadow: inset 0 0 0 3px rgba(255, 252, 232, .72), 0 5px 12px rgba(85, 65, 31, .1);
}
.village-map-open {
  width: 100%;
  padding: 0;
  position: relative;
  overflow: hidden;
  border: 2px solid #8e7650;
  border-radius: 12px;
  background: #123f46;
  box-shadow: 0 5px 12px rgba(37, 42, 27, .2);
}
.village-map-open img {
  width: 100%;
  height: auto;
  max-height: 424px;
  display: block;
  object-fit: contain;
  transition: transform .18s ease-out, filter .18s ease-out;
}
.village-map-open > span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 244, 211, .5);
  border-radius: 7px;
  background: rgba(7, 53, 56, .88);
  color: #fff9e6;
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.village-map-open:hover img { transform: scale(1.012); filter: saturate(1.04); }
.village-map-open:focus-visible {
  outline: 4px solid rgba(43, 152, 134, .42);
  outline-offset: 3px;
}
.village-map-card figcaption {
  min-width: 0;
  padding: 24px clamp(8px, 3vw, 28px) 24px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.village-map-copy h2 {
  margin: 0;
  color: #154f4a;
  font-size: clamp(20px, 3vw, 24px);
  letter-spacing: -.035em;
}
.village-map-copy p {
  max-width: 430px;
  margin: 10px 0 0;
  color: #665f4e;
  font-size: 16px;
  line-height: 1.75;
}
.village-map-legend {
  width: min(100%, 360px);
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  list-style: none;
}
.village-map-legend li {
  min-width: 0;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: #3f493d;
}
.village-map-legend i {
  width: 12px;
  height: 12px;
  display: block;
  border: 2px solid #6a5b31;
  border-radius: 50%;
  background: #e4d537;
  box-shadow: 0 0 0 2px rgba(255, 250, 226, .86), 0 2px 4px rgba(65, 48, 28, .16);
}
.village-map-legend li.is-restricted i {
  border: 3px solid #d9473f;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
}
.village-map-legend li.is-start i {
  border-color: #415c58;
  background: #fffdf0;
  box-shadow: 0 0 0 2px rgba(65, 92, 88, .2), 0 2px 4px rgba(65, 48, 28, .14);
}
.village-map-legend b {
  overflow-wrap: anywhere;
  color: #314943;
  font-size: 16px;
  line-height: 1.4;
}

.village-map-dialog {
  width: min(900px, calc(100vw - 28px));
  max-width: none;
  height: min(900px, calc(100dvh - 28px));
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 2px solid #c5a76d;
  border-radius: 18px;
  background: #f5e9c9;
  color: #153f50;
  box-shadow: inset 0 0 0 3px rgba(255, 252, 232, .7), 0 26px 70px rgba(0, 21, 23, .42);
}
.village-map-dialog::backdrop {
  background: rgba(4, 27, 29, .72);
  backdrop-filter: blur(4px);
}
.village-map-dialog-panel {
  height: 100%;
  padding: 10px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 9px;
}
.village-map-dialog header {
  min-height: 52px;
  padding: 2px 4px 2px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.village-map-dialog h2 {
  margin: 0;
  color: #154f4a;
  font-size: 22px;
  letter-spacing: -.04em;
}
.village-map-dialog header button,
.village-map-controls button {
  min-width: 44px;
  min-height: 40px;
  border: 1px solid #b99c67;
  border-radius: 8px;
  background: #fff8df;
  color: #174e4b;
  font-weight: 850;
}
.village-map-dialog header button { font-size: 25px; line-height: 1; }
.village-map-dialog button:hover:not(:disabled) {
  border-color: #2b9487;
  background: #e8f1dd;
}
.village-map-dialog button:focus-visible {
  outline: 3px solid rgba(43, 148, 135, .38);
  outline-offset: 2px;
}
.village-map-viewport {
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 2px solid #746343;
  border-radius: 11px;
  background:
    linear-gradient(45deg, rgba(255, 255, 255, .025) 25%, transparent 25% 75%, rgba(255, 255, 255, .025) 75%),
    #0c3439;
  background-size: 24px 24px;
  cursor: grab;
  touch-action: none;
}
.village-map-viewport:active { cursor: grabbing; }
.village-map-viewport img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.village-map-controls {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.village-map-controls button { padding: 7px 13px; font-size: 15px; }
.village-map-controls button:first-child,
.village-map-controls button:last-child { font-size: 22px; line-height: 1; }
.village-map-controls button:disabled { opacity: .45; cursor: wait; }

@media (max-width: 680px) {
  .village-map-card {
    padding: 13px;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .village-map-open { width: min(100%, 340px); justify-self: center; }
  .village-map-card figcaption { width: min(100%, 420px); padding: 0 5px 7px; justify-self: center; text-align: center; }
  .village-map-copy p { margin-inline: auto; }
  .village-map-legend { width: min(100%, 320px); margin: 20px auto 0; text-align: left; }
  .village-map-dialog {
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
    border-radius: 12px;
  }
  .village-map-dialog-panel { padding: 7px; gap: 6px; }
  .village-map-dialog h2 { font-size: 19px; }
}

@media (max-width: 480px) {
  .post-toggle { min-width: 56px; padding-inline: 7px; font-size: 10px; }
  .village-map-open > span { right: 7px; bottom: 7px; }
  .village-map-dialog header { min-height: 46px; padding-left: 7px; }
  .village-map-controls { min-height: 44px; }
  .village-map-controls button { min-height: 38px; padding-inline: 11px; }
}

.shop-family-board {
  display: grid;
  gap: 15px;
}
.shop-family {
  --shop-dark: #114f4a;
  --shop-mid: #177168;
  --shop-edge: #319b89;
  --shop-accent: #b4db6d;
  min-width: 0;
  overflow: hidden;
  border: 2px solid var(--shop-edge);
  border-radius: 16px;
  background: #f8edcf;
  box-shadow: inset 0 0 0 2px rgba(255, 250, 224, .68), 0 5px 12px rgba(69, 59, 31, .13);
}
.shop-family[data-catalog-key="gacha"] {
  --shop-dark: #49385d;
  --shop-mid: #6b4b82;
  --shop-edge: #9570ad;
  --shop-accent: #f0c96a;
}
.shop-family[data-catalog-key="PalUpgrade"] {
  --shop-dark: #174766;
  --shop-mid: #1f6688;
  --shop-edge: #4e94b5;
  --shop-accent: #9ed7e7;
}
.shop-family[data-catalog-key="resources"] {
  --shop-dark: #57462f;
  --shop-mid: #78623f;
  --shop-edge: #a48a5b;
  --shop-accent: #e0c675;
}
.shop-family-header {
  min-height: 104px;
  padding: 14px 17px;
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  overflow: hidden;
  border-bottom: 2px solid #d8bd83;
  background:
    radial-gradient(circle at 89% 15%, rgba(255, 255, 255, .11), transparent 27%),
    linear-gradient(180deg, var(--shop-mid), var(--shop-dark));
  color: #fffdf0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  box-shadow: inset 0 0 0 2px rgba(207, 240, 224, .13), inset 0 -8px 18px rgba(0, 0, 0, .1);
}
.shop-family-header:hover { filter: brightness(1.045); }
.shop-family-header:focus-visible {
  outline: 4px solid rgba(213, 227, 115, .48);
  outline: 4px solid color-mix(in srgb, var(--shop-accent) 62%, transparent);
  outline-offset: -5px;
}
.shop-family-header > * { position: relative; z-index: 1; }
.shop-family-header > .item-visual {
  width: 80px;
  height: 80px;
  border: 2px solid #e2c992;
  border-radius: 10px;
  background: linear-gradient(145deg, #fff9e5, #ead9b5);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .66), 0 3px 6px rgba(0, 0, 0, .18);
}
.shop-family-header > .item-visual img { width: 74px; height: 74px; }
.shop-family-heading { min-width: 0; }
.shop-family-heading > span {
  display: block;
  margin-bottom: 4px;
  color: var(--shop-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
}
.shop-family-heading > strong {
  display: block;
  overflow-wrap: anywhere;
  color: #fffdf0;
  font-size: 26px;
  letter-spacing: -.05em;
  text-shadow: 0 2px rgba(0, 0, 0, .23);
}
.shop-family-contents {
  padding: 15px;
  background:
    radial-gradient(circle at 96% 6%, rgba(46, 143, 126, .055), transparent 24%),
    linear-gradient(100deg, #f8f0d7, #fffaf0 52%, #ecdfbd);
}
.shop-family .item-grid {
  margin-top: 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.shop-family .item-card {
  min-width: 0;
  min-height: 154px;
  padding: 14px 16px 14px 14px;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 16px;
  border: 1px solid #c9b98e;
  border: 1px solid color-mix(in srgb, var(--rarity-accent) 52%, #c9b98e);
  border-left: 5px solid var(--rarity-accent);
  border-radius: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rarity-tint) 72%, #fff8e5), rgba(255, 253, 244, .94) 62%),
    #fffaf0;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .52), 0 4px 9px rgba(94, 72, 39, .1);
}
.shop-family .item-card > .item-visual {
  width: 100px;
  height: 100px;
  border-color: #d4c59f;
  border-color: color-mix(in srgb, var(--rarity-accent) 20%, #d4c59f);
  border-radius: 12px;
  background:
    radial-gradient(circle at 33% 27%, rgba(255, 255, 255, .95), transparent 38%),
    linear-gradient(145deg, #eef8f4, #d9ece8);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}
.shop-family .item-card > .item-visual img { width: 94px; height: 94px; }
.shop-family .item-copy {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.shop-family .item-meta {
  min-height: 24px;
  gap: 7px;
}
.shop-family .item-meta > span:first-child {
  padding: 4px 8px;
  font-size: 10px;
}
.shop-family .item-price {
  padding: 4px 8px;
  border: 1px solid rgba(49, 116, 102, .17);
  border-radius: 999px;
  background: rgba(231, 244, 232, .82);
  color: #287263;
  font-size: 12px;
  white-space: nowrap;
}
.shop-family .item-copy h3 {
  margin: 9px 0 0;
  color: #2f443e;
  font-size: 18px;
  line-height: 1.38;
  overflow-wrap: break-word;
  word-break: keep-all;
}
.shop-family[data-catalog-key="gacha"] .item-card {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rarity-tint) 70%, #f5e9ff), rgba(255, 251, 240, .95) 64%),
    #fffaf0;
}
.shop-family[data-catalog-key="gacha"] .item-card > .item-visual {
  background:
    radial-gradient(circle at 33% 27%, rgba(255, 255, 255, .95), transparent 38%),
    linear-gradient(145deg, #f1e9fa, #dfeaf2);
}
.item-card--jump {
  position: relative;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-width: 2px;
  background: linear-gradient(145deg, #fffaf0, #ede2c8);
  transition: transform .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out;
}
.item-card--jump:hover {
  border-color: var(--rarity-accent);
  box-shadow: 0 7px 15px rgba(78, 57, 30, .16);
  transform: translateY(-2px);
}
.item-card--jump:focus-visible {
  outline: 4px solid rgba(124, 84, 153, .3);
  outline: 4px solid color-mix(in srgb, var(--rarity-accent) 38%, transparent);
  outline-offset: 2px;
}
.item-card-jump-label {
  width: 100%;
  margin-top: auto;
  padding-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  border-top: 1px dashed rgba(113, 86, 135, .24);
  color: #715687;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.item-card-jump-label > span { font-size: 16px; line-height: 1; }
.catalog-group[id^="gacha-"] { scroll-margin-top: 26px; }
.catalog-group[id^="gacha-"]:target {
  border-color: #9b78b0;
  box-shadow: 0 0 0 4px rgba(135, 91, 163, .14), 0 7px 16px rgba(74, 49, 31, .1);
}
.catalog-group > header:focus-visible {
  outline: 3px solid rgba(92, 63, 116, .36);
  outline-offset: 5px;
  border-radius: 5px;
}

@media (max-width: 680px) {
  .shop-family-board { gap: 12px; }
  .shop-family { border-radius: 12px; }
  .shop-family-header {
    min-height: 92px;
    padding: 11px 12px;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px;
  }
  .shop-family-header > .item-visual { width: 68px; height: 68px; border-radius: 8px; }
  .shop-family-header > .item-visual img { width: 62px; height: 62px; }
  .shop-family-heading > span { font-size: 9px; }
  .shop-family-heading > strong { font-size: 21px; }
  .shop-family-contents { padding: 11px; }
  .shop-family .item-grid { grid-template-columns: 1fr; gap: 10px; }
  .shop-family .item-card {
    min-height: 132px;
    padding: 11px 12px 11px 10px;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
  }
  .shop-family .item-card > .item-visual { width: 86px; height: 86px; border-radius: 10px; }
  .shop-family .item-card > .item-visual img { width: 82px; height: 82px; }
  .shop-family .item-copy h3 { margin-top: 7px; font-size: 16px; }
  .shop-family .item-price { padding: 3px 7px; font-size: 11px; }
  .item-card-jump-label { padding-top: 7px; }
  .catalog-group[id^="gacha-"] { scroll-margin-top: 88px; }
}

@media (max-width: 480px) {
  .shop-family-header {
    min-height: 100px;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 9px 11px;
  }
  .shop-family-header > .item-visual { grid-row: auto; }
  .shop-family-heading > strong { font-size: 20px; }
  .shop-family-contents { padding: 9px; }
  .shop-family .item-card {
    min-height: 122px;
    padding: 9px 10px 9px 8px;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
  }
  .shop-family .item-card > .item-visual { width: 76px; height: 76px; }
  .shop-family .item-card > .item-visual img { width: 72px; height: 72px; }
  .shop-family .item-meta { gap: 5px; }
  .shop-family .item-meta > span:first-child { padding: 3px 6px; font-size: 9px; }
  .shop-family .item-copy h3 { font-size: 15px; }
  .item-card-jump-label { font-size: 11px; }
}

/* Fluid shop cards: size-limited and independent of the item count. */
.shop-family-header {
  min-height: 76px;
  padding: 9px 13px;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 0;
}
.shop-family-header > .item-visual {
  width: 56px;
  height: 56px;
  border-radius: 9px;
}
.shop-family-header > .item-visual img { width: 52px; height: 52px; }
.shop-family-heading > strong {
  font-size: 25px;
  word-break: keep-all;
}
.shop-family-contents {
  padding: 14px;
  background:
    radial-gradient(circle at 96% 6%, rgba(46, 143, 126, .05), transparent 24%),
    linear-gradient(100deg, #eee2bf, #f8efd6 52%, #e6d5ad);
}
.shop-family .item-grid {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  justify-content: stretch;
  align-items: stretch;
  gap: 12px;
}
.shop-family .item-card,
.shop-family[data-catalog-key="gacha"] .item-card {
  width: 100%;
  max-width: 300px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 10px 11px 12px;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: stretch;
  justify-self: center;
  gap: 0;
  overflow: hidden;
  border: 1px solid #b9aa82;
  border-top: 3px solid var(--rarity-accent);
  border-left-width: 1px;
  border-radius: 10px;
  background: #fffdf8;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .78), 0 3px 8px rgba(78, 58, 29, .12);
}
.shop-family .item-card > .item-visual,
.shop-family[data-catalog-key="gacha"] .item-card > .item-visual {
  width: 100%;
  height: 126px;
  flex: 0 0 126px;
  margin: 0 0 11px;
  border: 1px solid #b9c9be;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .72), transparent 38%),
    linear-gradient(145deg, #d8e8e1, #c7dcd6);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.shop-family .item-card > .item-visual img { width: 112px; height: 112px; }
.shop-family .item-card > .item-visual--emoji { font-size: 62px; }
.shop-family .item-copy {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.shop-family .item-meta {
  min-height: 0;
  margin-bottom: 6px;
  display: block;
}
.shop-family .item-meta > span:first-child {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rarity-accent);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .07em;
}
.shop-item-primary {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.shop-family .shop-item-primary h3 {
  min-width: 0;
  min-height: 0;
  margin: 0;
  flex: 1;
  color: #263d37;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 900;
  overflow-wrap: break-word;
  word-break: keep-all;
}
.shop-family .item-copy p {
  margin-bottom: 8px;
  word-break: keep-all;
}
.shop-item-price {
  margin: 0;
  flex: none;
  align-self: baseline;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: #57421d;
  white-space: nowrap;
}
.shop-item-price > strong {
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.025em;
}
.shop-item-price > small {
  color: #7d7056;
  font-size: 11px;
  font-weight: 850;
}
.shop-family .item-card-jump-label {
  width: 100%;
  margin-top: 9px;
  padding-top: 8px;
  justify-content: space-between;
  border-top: 1px dashed rgba(113, 86, 135, .26);
  font-size: 11px;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .shop-family-header {
    min-height: 74px;
    padding: 9px 10px;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
  }
  .shop-family-header > .item-visual { width: 54px; height: 54px; }
  .shop-family-header > .item-visual img { width: 50px; height: 50px; }
  .shop-family-heading > strong { font-size: 21px; }
  .shop-family-contents { padding: 10px; }
}

@media (max-width: 420px) {
  .shop-family-header {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px;
  }
  .shop-family-header > .item-visual { width: 48px; height: 48px; grid-row: auto; }
  .shop-family-header > .item-visual img { width: 44px; height: 44px; }
  .shop-family-heading > strong { font-size: 19px; }
  .shop-family .item-card > .item-visual,
  .shop-family[data-catalog-key="gacha"] .item-card > .item-visual {
    height: 112px;
    flex-basis: 112px;
  }
  .shop-family .item-card > .item-visual img { width: 100px; height: 100px; }
  .shop-family .shop-item-primary h3 { font-size: 17px; }
  .shop-item-primary { gap: 8px; }
  .shop-item-price > strong { font-size: 20px; }
}

/* Classified gacha rewards: compact families and readable effect cards. */
.gacha-section-board {
  display: grid;
  gap: 16px;
}
.gacha-section {
  --gacha-dark: #49385d;
  --gacha-mid: #6b4b82;
  --gacha-edge: #9570ad;
  --gacha-accent: #f0c96a;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--gacha-edge);
  border-radius: 16px;
  background: #f5e8c8;
  box-shadow: inset 0 0 0 2px rgba(255, 250, 224, .68), 0 5px 12px rgba(69, 59, 31, .13);
}
.gacha-section[data-catalog-key="awakening"] {
  --gacha-dark: #103f67;
  --gacha-mid: #17628f;
  --gacha-edge: #2d80b5;
  --gacha-accent: #8ed9ed;
}
.gacha-section > .gacha-section-header {
  min-height: 80px;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, .1), transparent 28%),
    linear-gradient(180deg, var(--gacha-mid), var(--gacha-dark));
  color: #fffdf0;
  box-shadow: inset 0 0 0 2px rgba(207, 240, 224, .13), inset 0 -8px 18px rgba(0, 0, 0, .1);
}
.gacha-section-header > .item-visual {
  width: 60px;
  height: 60px;
  margin: 0;
  display: grid;
  border: 2px solid #e2c992;
  border-radius: 10px;
  background: linear-gradient(145deg, #fff9e5, #ead9b5);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .66), 0 3px 6px rgba(0, 0, 0, .18);
}
.gacha-section-header > .item-visual img { width: 56px; height: 56px; }
.gacha-section-header > div > span {
  margin: 0 0 4px;
  color: var(--gacha-accent);
  font-size: 11px;
  letter-spacing: .08em;
}
.gacha-section-header > div > h2 {
  margin: 0;
  color: #fffdf0;
  font-size: 27px;
  line-height: 1.18;
  text-shadow: 0 2px rgba(0, 0, 0, .22);
}
.gacha-family-list {
  padding: 14px;
  display: grid;
  gap: 10px;
  background:
    radial-gradient(circle at 96% 6%, rgba(46, 143, 126, .05), transparent 24%),
    linear-gradient(100deg, #eee2bf, #f8efd6 52%, #e6d5ad);
}
.gacha-family {
  container-type: inline-size;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gacha-edge) 72%, #91784f);
  border-radius: 11px;
  background: #f6ebcf;
  box-shadow: 0 3px 8px rgba(75, 57, 31, .1);
}
.gacha-family-summary {
  min-height: 68px;
  padding: 8px 11px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid transparent;
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 255, 255, .08), transparent 27%),
    linear-gradient(180deg, color-mix(in srgb, var(--gacha-mid) 78%, #234c47), color-mix(in srgb, var(--gacha-dark) 82%, #183a36));
  color: #fff9e8;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.gacha-family-summary:hover { filter: brightness(1.045); }
.gacha-family-summary:focus-visible {
  outline: 4px solid color-mix(in srgb, var(--gacha-accent) 60%, transparent);
  outline-offset: -5px;
}
.gacha-family-summary > .item-visual {
  width: 52px;
  height: 52px;
  margin: 0;
  border: 1px solid #dcc68f;
  border-radius: 7px;
  background: linear-gradient(145deg, #fff9e5, #ead9b5);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .62);
}
.gacha-family-summary > .item-visual img { width: 48px; height: 48px; }
.gacha-family-heading { min-width: 0; }
.gacha-family-heading > strong {
  display: block;
  color: #fff9e8;
  font-size: 19px;
  line-height: 1.25;
  word-break: keep-all;
}
.gacha-family-body {
  padding: 12px;
  background: linear-gradient(100deg, #eee2bf, #fbf3dc 52%, #e6d5ad);
}
.gacha-card-grid {
  --gacha-card-columns: 3;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(var(--gacha-card-columns), minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}
.gacha-family .gacha-reward-card {
  min-width: 0;
  min-height: 126px;
  height: 100%;
  padding: 10px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid #b9aa82;
  border-top: 3px solid var(--rarity-accent);
  border-radius: 10px;
  background: #fffdf8;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 3px 8px rgba(78, 58, 29, .12);
}
.gacha-family .gacha-reward-card > .item-visual {
  width: 92px;
  height: 92px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--rarity-accent) 42%, #516a66);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, .16), transparent 38%),
    linear-gradient(145deg, #254541, #102727);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06);
}
.gacha-family .gacha-reward-card > .item-visual img {
  width: 86px;
  height: 86px;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .34));
}
.gacha-card-copy {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.gacha-card-meta {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #5a654f;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
}
.gacha-card-rarity { color: var(--rarity-accent); }
.gacha-card-element {
  padding: 2px 5px;
  border-radius: 4px;
  background: #eee2c5;
  color: #67563b;
  letter-spacing: 0;
}
.gacha-card-name {
  color: #263d37;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 900;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.gacha-card-copy .gacha-card-effects {
  margin: 7px 0 0;
  display: grid;
  gap: 3px;
  color: #4f655f;
  font-size: 13px;
  line-height: 1.45;
  word-break: keep-all;
}
.gacha-card-effects > span + span {
  padding-top: 3px;
  border-top: 1px dashed rgba(79, 101, 95, .2);
}
.gacha-empty {
  margin: 14px 0 0;
  padding: 22px;
  border: 1px dashed #af9462;
  border-radius: 11px;
  background: rgba(255, 248, 223, .86);
  color: #67563b;
  text-align: center;
  font-weight: 800;
}

@container (max-width: 950px) {
  .gacha-card-grid { --gacha-card-columns: 2; }
}

@container (max-width: 600px) {
  .gacha-card-grid { --gacha-card-columns: 1; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 1100px) {
    .gacha-card-grid { --gacha-card-columns: 2; }
  }
  @media (max-width: 680px) {
    .gacha-card-grid { --gacha-card-columns: 1; }
  }
}

@media (max-width: 680px) {
  .gacha-section { border-radius: 12px; }
  .gacha-section > .gacha-section-header {
    min-height: 82px;
    padding: 10px 11px;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 11px;
  }
  .gacha-section-header > .item-visual { width: 62px; height: 62px; }
  .gacha-section-header > .item-visual img { width: 56px; height: 56px; }
  .gacha-section-header > div > h2 { font-size: 23px; }
  .gacha-family-list { padding: 10px; gap: 8px; }
  .gacha-family-summary {
    min-height: 62px;
    padding: 7px 9px;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 9px;
  }
  .gacha-family-summary > .item-visual { width: 46px; height: 46px; }
  .gacha-family-summary > .item-visual img { width: 42px; height: 42px; }
  .gacha-family-heading > strong { font-size: 18px; }
  .gacha-family-body { padding: 9px; }
}

@media (max-width: 480px) {
  .gacha-section > .gacha-section-header {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 9px;
  }
  .gacha-section-header > .item-visual { width: 54px; height: 54px; }
  .gacha-section-header > .item-visual img { width: 50px; height: 50px; }
  .gacha-section-header > div > span { font-size: 9px; }
  .gacha-section-header > div > h2 { font-size: 20px; }
  .gacha-family .gacha-reward-card {
    min-height: 108px;
    padding: 8px;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
  }
  .gacha-family .gacha-reward-card > .item-visual { width: 76px; height: 76px; }
  .gacha-family .gacha-reward-card > .item-visual img { width: 70px; height: 70px; }
  .gacha-card-name { font-size: 16px; }
  .gacha-card-copy .gacha-card-effects { font-size: 12px; }
}

/* Item catalogs stay fully visible; only notice and patch posts remain collapsible. */
.reward-family-header,
.shop-family-header {
  cursor: default;
  user-select: text;
}
.reward-family-header:hover,
.shop-family-header:hover { filter: none; }

/* Count-free catalog headers: compact, balanced, and distinct from item panels. */
.reward-family-header,
.reward-family-header:hover {
  min-height: 96px;
  padding: 11px 14px;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  border-bottom: 0;
  box-shadow: inset 0 -7px 16px rgba(0, 0, 0, .09);
}
.reward-family-header::before { display: none; }
.reward-family-header > .item-visual { width: 74px; height: 74px; }
.reward-family-header > .item-visual img { width: 68px; height: 68px; }

.shop-family-header {
  min-height: 76px;
  padding: 9px 13px;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 0;
  box-shadow: inset 0 -7px 16px rgba(0, 0, 0, .09);
}
.shop-family-header > .item-visual { width: 56px; height: 56px; }
.shop-family-header > .item-visual img { width: 52px; height: 52px; }

.gacha-section > .gacha-section-header {
  min-height: 80px;
  padding: 10px 13px;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 0;
  box-shadow: inset 0 -7px 16px rgba(0, 0, 0, .09);
}
.gacha-section-header > .item-visual { width: 60px; height: 60px; }
.gacha-section-header > .item-visual img { width: 56px; height: 56px; }

.reward-family-title,
.shop-family-heading > strong,
.gacha-section-header > div > h2,
.gacha-family-heading > strong { letter-spacing: -.025em; }

@media (max-width: 680px) {
  .reward-family-header,
  .reward-family-header:hover {
    min-height: 86px;
    padding: 10px 11px;
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 11px;
  }
  .reward-family-header > .item-visual { width: 66px; height: 66px; }
  .reward-family-header > .item-visual img { width: 60px; height: 60px; }
  .shop-family-header {
    min-height: 70px;
    padding: 8px 10px;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
  }
  .shop-family-header > .item-visual { width: 52px; height: 52px; }
  .shop-family-header > .item-visual img { width: 48px; height: 48px; }
  .gacha-section > .gacha-section-header {
    min-height: 72px;
    padding: 8px 10px;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
  }
  .gacha-section-header > .item-visual { width: 54px; height: 54px; }
  .gacha-section-header > .item-visual img { width: 50px; height: 50px; }
}

.gacha-family-list {
  padding: 18px;
  gap: 0;
}
.gacha-family {
  min-width: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  container-type: inline-size;
}
.gacha-family + .gacha-family {
  margin-top: 26px;
  padding-top: 0;
}
.gacha-family-summary {
  min-height: 0;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(149, 112, 173, .17), rgba(255, 248, 223, .62) 72%, transparent);
  color: #2b493f;
  cursor: default;
  user-select: text;
}
.gacha-section[data-catalog-key="awakening"] .gacha-family-summary {
  background: linear-gradient(90deg, rgba(45, 128, 181, .17), rgba(255, 248, 223, .62) 72%, transparent);
}
.gacha-family-summary::before {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 3px;
  background: var(--gacha-edge);
  box-shadow: 0 1px 2px rgba(61, 43, 24, .18);
  content: "";
  transform: rotate(45deg);
}
.gacha-family-summary:hover { filter: none; }
.gacha-family-heading > strong {
  color: #5a3d6d;
  font-size: 21px;
  line-height: 1.3;
}
.gacha-section[data-catalog-key="awakening"] .gacha-family-heading > strong {
  color: #174f73;
}
.gacha-family-body {
  padding: 11px 0 0;
  background: transparent;
}

@media (max-width: 680px) {
  .gacha-family-list { padding: 13px; }
  .gacha-family + .gacha-family { margin-top: 22px; padding-top: 0; }
  .gacha-family-summary { padding: 8px 10px; }
  .gacha-family-heading > strong { font-size: 19px; }
  .gacha-family-body { padding: 9px 0 0; }
}

@media (max-width: 480px) {
  .gacha-family-heading > strong { font-size: 18px; }
}

/* Reward cards follow the embed panel width and never exceed four columns. */
.reward-family-contents { container-type: inline-size; }
.reward-family-items { grid-template-columns: 1fr; }
@container (min-width: 410px) {
  .reward-family-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 620px) {
  .reward-family-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 860px) {
  .reward-family-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Unified type scale: H1 24-32, H2 20-24, H3 18, body 16, supporting text 12-14. */
:root {
  --type-h1: clamp(28px, 3vw, 32px);
  --type-h2: clamp(21px, 2.3vw, 24px);
  --type-h3: 18px;
  --type-body: 16px;
  --type-small: 13px;
  --type-label: 12px;
}

body,
button,
input { font-size: var(--type-body); }

.main-placeholder-view h1,
.view-header h1 { font-size: var(--type-h1); }

.post-body h2,
.village-intro h2,
.section-heading h2,
.village-map-copy h2,
.reward-family-title,
.reward-special > header h2,
.shop-family-heading > strong,
.gacha-section-header > div > h2,
.village-map-dialog h2 { font-size: var(--type-h2); }

.post-body h3,
.guide-grid h3,
.reward-item-card > strong,
.item-copy h3,
.shop-family .shop-item-primary h3,
.gacha-family-heading > strong,
.gacha-card-name { font-size: var(--type-h3); }

.post-heading strong { font-size: clamp(21px, 2vw, 22px); }
.post-body h2 { font-size: 24px; }

.loading-message,
.post-body,
.guide-grid p,
.item-search input,
.reward-item-description,
.item-copy p,
.shop-family .item-copy p,
.gacha-card-copy .gacha-card-effects,
.gacha-empty,
.village-map-copy p { font-size: var(--type-body); }

.app-nav > button > b,
.subnav button { font-size: 15px; }

.reward-family-amount,
.reward-filter-list button { font-size: 14px; }

.side-brand-link small,
.nav-section-title,
.post-tag,
.post-card time,
.post-toggle,
.reward-family-title > span,
.reward-item-duration,
.item-price,
.shop-item-price > small,
.item-card-jump-label,
.village-map-open > span { font-size: var(--type-small); }

.view-header > div > span,
.eyebrow,
.catalog-group > header span,
.reward-item-rarity,
.item-meta > span:first-child,
.shop-family-heading > span,
.shop-family .item-meta > span:first-child,
.gacha-section-header > div > span,
.gacha-card-meta,
.gacha-card-rarity,
.gacha-card-element { font-size: var(--type-label); }

.reward-family-quantity { font-size: var(--type-body); }
.reward-family-quantity b,
.shop-item-price > strong { font-size: var(--type-h3); }
.reward-special-items .reward-item-card > strong { font-size: var(--type-h3); }
.shop-family .item-card-jump-label { font-size: var(--type-small); }

.post-body .ql-size-small { font-size: var(--type-small); }
.post-body .ql-size-large { font-size: var(--type-h2); }
.post-body .ql-size-huge { font-size: var(--type-h1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* Home dashboard: the former embed overview, adapted to the current guide routes. */
.home-view.is-visible {
  min-height: 100%;
  padding: 2px 4px 12px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.home-hero {
  min-height: clamp(240px, 36vh, 330px);
  padding: clamp(28px, 4vw, 48px);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 31%);
  align-items: center;
  gap: 28px;
  border: 2px solid #b99a58;
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 16%, rgba(242, 224, 152, .18) 0 4%, transparent 22%),
    linear-gradient(125deg, #0e655e 0%, #10594f 58%, #294e3f 100%);
  box-shadow:
    inset 0 0 0 4px rgba(255, 244, 191, .13),
    inset 0 -18px 34px rgba(5, 40, 34, .16),
    0 12px 24px rgba(76, 57, 27, .14);
}
.home-hero::before {
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(248, 225, 155, .26);
  border-radius: 13px;
  content: "";
  pointer-events: none;
}
.home-hero::after {
  position: absolute;
  width: 360px;
  height: 160px;
  right: -94px;
  bottom: -92px;
  background:
    radial-gradient(circle at 15% 64%, rgba(140, 177, 74, .48) 0 34px, transparent 35px),
    radial-gradient(circle at 37% 35%, rgba(105, 155, 67, .44) 0 42px, transparent 43px),
    radial-gradient(circle at 61% 68%, rgba(83, 132, 61, .48) 0 50px, transparent 51px),
    radial-gradient(circle at 86% 34%, rgba(132, 167, 72, .42) 0 43px, transparent 44px);
  content: "";
  opacity: .7;
  pointer-events: none;
}

.home-hero-copy {
  position: relative;
  z-index: 2;
}
.home-kicker {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #d9e99a;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
}
.home-kicker i {
  width: 10px;
  height: 10px;
  flex: none;
  border: 2px solid #b8d76a;
  transform: rotate(45deg);
}
.home-hero h1 {
  margin: 0;
  color: #fff9df;
  font-size: clamp(30px, 4.3vw, 48px);
  line-height: 1.13;
  letter-spacing: -.055em;
  text-shadow: 0 3px 0 rgba(3, 44, 39, .3);
}
.home-hero h1 em {
  color: #f2dc73;
  font-style: normal;
}
.home-intro {
  margin: 18px 0 0;
  color: rgba(255, 249, 223, .82);
  font-size: 16px;
  font-weight: 650;
}

.home-crest {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}
.home-crest::before,
.home-crest::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}
.home-crest::before {
  width: clamp(160px, 20vw, 218px);
  height: clamp(160px, 20vw, 218px);
  border: 1px dashed rgba(240, 220, 143, .44);
}
.home-crest::after {
  width: clamp(124px, 16vw, 174px);
  height: clamp(124px, 16vw, 174px);
  background: rgba(5, 54, 47, .25);
  box-shadow: 0 0 0 13px rgba(221, 226, 144, .05);
}
.home-crest-mark {
  width: clamp(118px, 15vw, 164px);
  aspect-ratio: 1;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid #c19a55;
  border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%;
  background:
    repeating-linear-gradient(0deg, rgba(135, 95, 43, .025) 0 1px, transparent 1px 5px),
    #fff0c7;
  color: #3f6b56;
  box-shadow:
    inset 0 0 0 5px rgba(255, 251, 221, .72),
    0 12px 22px rgba(1, 34, 30, .26);
  transform: rotate(2deg);
}
.home-crest-mark span {
  font-size: clamp(48px, 6vw, 68px);
  font-weight: 950;
  line-height: .95;
  letter-spacing: -.08em;
}
.home-crest-mark small {
  margin-top: 8px;
  color: #91652f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
}

.home-overview-head {
  min-height: 56px;
  padding: 0 5px 12px;
  display: flex;
  align-items: flex-end;
  border-bottom: 2px dashed rgba(166, 132, 75, .6);
}
.home-overview-head span {
  display: block;
  margin-bottom: 4px;
  color: #168473;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}
.home-overview-head h2 {
  margin: 0;
  color: #2f493e;
  font-size: var(--type-h2);
  line-height: 1.15;
  letter-spacing: -.035em;
}

.home-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.home-menu-card {
  --home-accent: #278f82;
  --home-tint: #dceee4;
  min-width: 0;
  min-height: 132px;
  padding: 18px;
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 12px 14px;
  overflow: hidden;
  border: 1px solid #c6aa74;
  border-top: 4px solid var(--home-accent);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .68), transparent 52%),
    #f7edcf;
  color: #3f463b;
  box-shadow:
    inset 0 0 0 2px rgba(255, 252, 231, .7),
    0 7px 14px rgba(85, 62, 29, .11);
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.home-menu-card::after {
  position: absolute;
  width: 72px;
  height: 72px;
  right: -28px;
  bottom: -30px;
  border-radius: 50%;
  background: var(--home-tint);
  content: "";
  opacity: .72;
}
.home-menu-card--control {
  --home-accent: #d2554f;
  --home-tint: #f0d8cf;
  grid-column: span 2;
}
.home-menu-card--control::before {
  position: absolute;
  width: 116px;
  height: 116px;
  right: 32px;
  top: 50%;
  border: 1px solid color-mix(in srgb, var(--home-accent) 24%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 16px color-mix(in srgb, var(--home-accent) 7%, transparent),
    0 0 0 34px color-mix(in srgb, var(--home-accent) 5%, transparent);
  content: "";
  transform: translateY(-50%);
  pointer-events: none;
}
.home-menu-card--notice { --home-accent: #c95d55; --home-tint: #f0d8cf; }
.home-menu-card--patchnote { --home-accent: #3b7e9a; --home-tint: #d6e7ed; }
.home-menu-card--rewards { --home-accent: #238f83; --home-tint: #d7ebe1; }
.home-menu-card--gmbase { --home-accent: #a77237; --home-tint: #efdfbd; }
.home-menu-card:hover {
  border-color: var(--home-accent);
  box-shadow:
    inset 0 0 0 2px rgba(255, 252, 231, .78),
    0 11px 20px rgba(85, 62, 29, .16);
  transform: translateY(-3px);
}
.home-menu-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--home-accent) 35%, transparent);
  outline-offset: 3px;
}
.home-menu-icon {
  width: 52px;
  height: 52px;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  border: 1px solid var(--home-accent);
  border-radius: 12px;
  background: linear-gradient(145deg, #fffdf0, var(--home-tint));
  color: var(--home-accent);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 244, .72);
}
.home-menu-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-menu-copy {
  min-width: 0;
  align-self: end;
}
.home-menu-copy small {
  display: block;
  margin-bottom: 5px;
  color: var(--home-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}
.home-menu-copy strong {
  display: block;
  overflow-wrap: anywhere;
  color: #34463e;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.03em;
}
.home-menu-arrow {
  align-self: end;
  justify-self: end;
  position: relative;
  z-index: 1;
  color: var(--home-accent);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  transition: transform .16s ease;
}
.home-menu-card:hover .home-menu-arrow { transform: translateX(3px); }

.home-live-preview {
  margin-top: 2px;
  padding: 0 5px;
}
.home-live-head {
  min-height: 60px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.home-live-head span {
  display: block;
  margin-bottom: 4px;
  color: #c6534d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}
.home-live-head h2 {
  margin: 0;
  color: #2f493e;
  font-size: var(--type-h2);
  line-height: 1.15;
  letter-spacing: -.035em;
}
.home-live-head > button {
  padding: 7px 2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #9d4843;
  font-size: 14px;
  font-weight: 850;
}
.home-live-head > button i {
  font-size: 18px;
  font-style: normal;
  transition: transform .16s ease;
}
.home-live-head > button:hover i { transform: translateX(3px); }
.home-live-empty {
  min-height: 86px;
  margin-top: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-top: 1px solid rgba(174, 141, 82, .58);
  border-bottom: 1px solid rgba(174, 141, 82, .58);
  color: #6d7469;
}
.home-live-empty > i {
  width: 11px;
  height: 11px;
  flex: none;
  border: 3px solid rgba(198, 83, 77, .23);
  border-radius: 50%;
  background: #c6534d;
  box-shadow: 0 0 0 4px rgba(198, 83, 77, .08);
}
.home-live-empty p {
  margin: 0;
  font-size: var(--type-body);
}

@media (max-width: 1100px) {
  .home-hero { grid-template-columns: minmax(0, 1fr) minmax(160px, 28%); }
  .home-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-menu-card { min-height: 112px; }
}

@media (max-width: 680px) {
  .home-view.is-visible { gap: 19px; padding-inline: 0; }
  .home-hero {
    min-height: 240px;
    padding: 28px 22px;
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 10px;
    border-radius: 15px;
  }
  .home-hero h1 { font-size: clamp(30px, 8vw, 40px); }
  .home-intro { font-size: 15px; }
  .home-crest::before { width: 120px; height: 120px; }
  .home-crest::after { width: 96px; height: 96px; }
  .home-crest-mark { width: 92px; }
  .home-crest-mark span { font-size: 42px; }
  .home-crest-mark small { margin-top: 5px; font-size: 8px; }
  .home-overview-head { min-height: 50px; }
  .home-menu-card { min-height: 106px; padding: 15px; }
}

@media (max-width: 480px) {
  .home-hero {
    min-height: 238px;
    padding: 27px 20px;
    grid-template-columns: 1fr;
  }
  .home-crest { display: none; }
  .home-kicker { font-size: 11px; }
  .home-overview-grid { grid-template-columns: 1fr; gap: 10px; }
  .home-menu-card--control { grid-column: auto; }
  .home-menu-card--control::before { right: 14px; width: 76px; height: 76px; }
  .home-menu-card {
    min-height: 92px;
    padding: 13px 15px;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
  }
  .home-menu-icon { width: 48px; height: 48px; grid-row: auto; }
  .home-menu-copy { align-self: center; }
  .home-menu-copy small { margin-bottom: 3px; }
  .home-menu-arrow { align-self: center; }
  .home-live-head { min-height: 54px; }
  .home-live-head > button { font-size: 13px; }
  .home-live-empty { min-height: 74px; padding-inline: 12px; }
}

/* SOOP control room and participant directory. */
.app-nav > button[data-view-button="streamers"] { --nav-accent: #c6534d; --nav-tint: #f2d9d2; }
.control-room-content {
  padding: 0 4px 8px;
  display: grid;
  gap: 38px;
}
.streamer-section { min-width: 0; }
.streamer-section-heading {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.streamer-section-heading > span {
  display: block;
  margin-bottom: 4px;
  color: #c6534d;
  font-size: var(--type-label);
  font-weight: 900;
  letter-spacing: .12em;
}
.streamer-section-heading h2 {
  margin: 0;
  color: #344b40;
  font-size: var(--type-h2);
  letter-spacing: -.035em;
}
.streamer-state {
  min-height: 104px;
  padding: 24px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(174, 141, 82, .65);
  border-radius: 12px;
  background: rgba(255, 249, 226, .48);
  color: #6d7469;
  text-align: center;
}
.streamer-state p {
  margin: 0;
  font-size: var(--type-body);
}

.home-live-grid,
.streamer-live-grid {
  display: grid;
  gap: 13px;
}
.home-live-grid {
  margin-top: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.home-live-team-list {
  margin-top: 14px;
  display: grid;
  gap: 24px;
}
.home-live-team { min-width: 0; }
.home-live-team-heading { margin-bottom: 9px; }
.home-live-team .home-live-grid { margin-top: 0; }
.streamer-live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.streamer-live-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #c4a873;
  border-radius: 13px;
  background: #fff9e8;
  box-shadow: 0 6px 13px rgba(80, 59, 29, .12);
}
.streamer-thumbnail {
  aspect-ratio: 16 / 8.5;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 76% 24%, rgba(233, 103, 83, .25), transparent 26%),
    linear-gradient(145deg, #254f4d, #173c3b);
  color: rgba(255, 245, 220, .32);
  text-decoration: none;
}
.streamer-thumbnail::before {
  position: absolute;
  content: attr(data-fallback);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 950;
  letter-spacing: .08em;
}
.streamer-thumbnail img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  display: block;
  object-fit: cover;
  transition: transform .22s ease;
}
.streamer-live-card:hover .streamer-thumbnail img { transform: scale(1.025); }
.streamer-live-badge {
  padding: 4px 7px;
  position: absolute;
  z-index: 2;
  left: 9px;
  top: 9px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 6px;
  background: #d84f47;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .05em;
  box-shadow: 0 2px 6px rgba(77, 19, 15, .28);
}
.streamer-live-details {
  min-width: 0;
  padding: 10px 11px 12px;
}
.streamer-live-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #34483e;
  text-decoration: none;
}
.streamer-avatar,
.streamer-participant-avatar {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: none;
  border: 2px solid #d5bd85;
  border-radius: 50%;
  background: #e8d9b6;
  color: #745d3c;
  font-weight: 900;
}
.streamer-avatar {
  width: 40px;
  height: 40px;
}
.streamer-participant-avatar {
  width: 52px;
  height: 52px;
}
.streamer-avatar::before,
.streamer-participant-avatar::before {
  content: attr(data-fallback);
  font-size: 18px;
}
.streamer-avatar img,
.streamer-participant-avatar img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
}
.streamer-live-identity > span:last-child,
.streamer-participant-card > span:nth-child(2) {
  min-width: 0;
}
.streamer-live-identity strong,
.streamer-live-identity small,
.streamer-participant-card strong,
.streamer-participant-card small { display: block; }
.streamer-live-identity strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.streamer-live-identity small,
.streamer-participant-card small {
  margin-top: 2px;
  overflow: hidden;
  color: #927f5f;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.streamer-participant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.streamer-participant-card {
  min-width: 0;
  min-height: 78px;
  padding: 11px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid #cbb485;
  border-radius: 12px;
  background: rgba(255, 250, 232, .82);
  color: #35493f;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(84, 62, 31, .08);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.streamer-participant-card:hover {
  border-color: #8a9e68;
  background: #fffbed;
  transform: translateY(-2px);
}
.streamer-participant-card strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.streamer-status {
  min-width: 34px;
  padding: 5px 6px;
  border: 1px solid #b5af9e;
  border-radius: 7px;
  background: #e8e3d7;
  color: #77756e;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.streamer-participant-card.is-live { border-color: rgba(203, 75, 68, .48); }
.streamer-participant-card.is-live .streamer-status {
  border-color: #c94d46;
  background: #d9534c;
  color: #fff;
}
.streamer-participant-card.is-unknown .streamer-status {
  border-color: #b98c48;
  background: #f5e3b5;
  color: #765422;
}

@media (max-width: 1100px) {
  .home-live-grid,
  .streamer-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .control-room-content { padding-inline: 0; gap: 32px; }
  .streamer-participant-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

@media (max-width: 480px) {
  .home-live-grid,
  .streamer-live-grid { grid-template-columns: 1fr; }
  .streamer-section-heading { margin-bottom: 13px; }
  .streamer-participant-grid { grid-template-columns: 1fr; }
  .streamer-live-details > p { min-height: auto; }
}

/* One scroll owner: wheel input works over content, spacing, and the outer panel. */
.app-main {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(126, 99, 57, .72) transparent;
}
.app-main::-webkit-scrollbar { width: 9px; }
.app-main::-webkit-scrollbar-track { background: transparent; }
.app-main::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 99px;
  background: rgba(126, 99, 57, .62);
  background-clip: padding-box;
}
.app-main::before,
.app-main::after { display: none; }
.app-view.is-visible {
  height: auto;
  min-height: 100%;
  overflow: visible;
  overscroll-behavior: auto;
  scrollbar-width: auto;
  -ms-overflow-style: auto;
}

/* Streamer content stays flat inside the single outer guide panel. */
.control-room-content { padding-inline: 0; }
.streamer-state {
  border-width: 1px 0;
  border-radius: 0;
  background: transparent;
}
.streamer-live-card {
  overflow: hidden;
  border: 1px solid #bda16d;
  border-radius: 12px;
  background: linear-gradient(145deg, #fffaf0, #f7eed7);
  box-shadow: 0 5px 12px rgba(80, 59, 29, .12);
}
.streamer-thumbnail {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.streamer-live-details { padding: 10px 11px 12px; }
.streamer-live-inline-title {
  margin-top: 4px;
  overflow: hidden;
  color: #6d6657;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.streamer-participant-card {
  border: 0;
  border-bottom: 1px solid rgba(181, 153, 103, .58);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.streamer-participant-card:hover {
  border-color: rgba(88, 132, 92, .62);
  background: rgba(255, 251, 235, .66);
  transform: none;
}
.streamer-participant-card.is-live { border-color: rgba(203, 75, 68, .42); }

/* Team directory: one full-width team row at a time. */
.streamer-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 28px;
}
.streamer-team { min-width: 0; }
.streamer-team-heading {
  min-height: 34px;
  margin: 0 0 7px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #365348;
  font-size: var(--type-h3);
  font-weight: 900;
  letter-spacing: -.02em;
}
.streamer-team-heading::before {
  width: 8px;
  height: 8px;
  flex: none;
  border: 2px solid #c6534d;
  content: "";
  transform: rotate(45deg);
}
.streamer-team-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: 0 12px;
}
.streamer-team-members .streamer-participant-card {
  min-height: 62px;
  padding: 8px 2px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 9px;
}
.streamer-team-members .streamer-participant-avatar {
  width: 40px;
  height: 40px;
}
.streamer-team-members .streamer-participant-avatar::before { font-size: 15px; }
.streamer-team-members .streamer-participant-card strong { font-size: 15px; }
.streamer-team-members .streamer-participant-card small { font-size: 12px; }

@media (max-width: 480px) {
  .streamer-team-grid { gap: 25px; }
}

/* Home is a status view, not a second copy of the sidebar navigation. */
.home-view.is-visible {
  padding: 2px 4px 22px;
  gap: clamp(30px, 5vh, 46px);
}
.home-hero {
  min-height: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 1px solid #ad9568;
  border-radius: 16px;
  background: #d8e9d1;
  box-shadow: 0 8px 18px rgba(74, 56, 28, .14);
}
.home-hero::before,
.home-hero::after { display: none; }
.home-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 1898 / 829;
  display: block;
  object-fit: cover;
}
.home-live-preview,
.home-recent {
  margin: 0;
  padding: 0 5px;
}
.home-live-head,
.home-recent-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.home-live-head h2,
.home-recent-head h2 {
  margin: 0;
  color: #2f493e;
  font-size: var(--type-h2);
  line-height: 1.2;
  letter-spacing: -.035em;
}
.home-live-head > button {
  padding: 7px 2px;
  align-self: center;
  color: #8e4742;
}
.home-live-grid { margin-top: 14px; }

.home-recent-list {
  margin-top: 10px;
  border-top: 1px solid rgba(174, 141, 82, .5);
}
.home-recent-message {
  min-height: 68px;
  margin: 0;
  padding: 20px 4px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(174, 141, 82, .5);
  color: #71766d;
  font-size: var(--type-body);
}
.home-recent-message.is-error { color: #9d4843; }
.home-recent-item {
  width: 100%;
  min-height: 60px;
  padding: 11px 4px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid rgba(174, 141, 82, .5);
  background: transparent;
  color: #34483e;
  text-align: left;
  transition: background-color .15s ease;
}
.home-recent-item:hover,
.home-recent-item:focus-visible { background: rgba(255, 250, 230, .72); }
.home-recent-item:focus-visible {
  outline: 2px solid rgba(42, 139, 123, .62);
  outline-offset: -2px;
}
.home-recent-type {
  justify-self: start;
  color: #397367;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.home-recent-type.is-patchnote { color: #3e7290; }
.home-recent-item strong {
  min-width: 0;
  overflow: hidden;
  color: #34483e;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-recent-item time {
  color: #807565;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.home-recent-dot {
  width: 8px;
  height: 8px;
  justify-self: center;
  border-radius: 50%;
  background: #d34843;
  box-shadow: 0 0 0 3px rgba(211, 72, 67, .12);
}
.home-recent-item:not(.is-unseen) .home-recent-dot { visibility: hidden; }

@media (max-width: 680px) {
  .home-view.is-visible { gap: 28px; padding-bottom: 18px; }
  .home-hero { min-height: 0; padding: 0; border-radius: 11px; }
  .home-live-preview,
  .home-recent { padding-inline: 0; }
  .home-live-head,
  .home-recent-head { min-height: 38px; }
  .home-recent-item {
    min-height: 56px;
    padding-inline: 2px;
    grid-template-columns: 46px minmax(0, 1fr) auto 10px;
    gap: 9px;
  }
  .home-recent-type,
  .home-recent-item time { font-size: 12px; }
  .home-recent-item strong { font-size: 15px; }
}