/* ============================================================================
   claudia-finale.css  ·  The Japanese Gengo — Chapter 8 finale layer
   The Guild hall, the one-page grammar map, the can-do achievement check,
   the cast send-off, and the colophon/credits.
   Link AFTER claudia-gengo-core.css (kana-kazu for .roster/.quest reuse).
   Author: Ms. Claudia · for Cezar Borgkrans / learnjapanese.sparklesnap.dev
   ========================================================================== */

/* ---- 1. Guild hall (grouped roster "houses") ---- */
.house-label { display: flex; align-items: center; gap: 8px; margin: 7px 0 4px; }
.house-label .h { font-family: var(--f-serif-jp); font-weight: 700; font-size: 1rem; color: var(--matcha); }
.house-label .tag { font-family: var(--f-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--matcha); padding: 2px 8px; border-radius: 50px; }
.house-label .rule { flex: 1; height: 2px; background: var(--matcha-bg); border-radius: 2px; }
.guild-count { text-align: center; font-family: var(--f-serif-jp); }
.guild-count .n { font-size: 2.6rem; font-weight: 900; color: var(--kyoto-red); line-height: 1; }
.guild-count .l { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

/* ---- 1b. Dense "trophy wall" roster (extends .roster from kana-kazu) ---- */
.roster.dense { grid-template-columns: repeat(8, 1fr); gap: 4px; }
.roster.dense .roster-cell { padding: 3px 2px; }
.roster.dense .roster-cell .g { font-size: 1.28rem; }
.roster.dense .roster-cell .nm { display: none; }
.roster.dense .roster-cell .rd { font-size: .54rem; }
.roster.dense .roster-cell .tick { width: 13px; height: 13px; font-size: 8px; top: -5px; right: -5px; }

/* ---- 2. One-page grammar map ---- */
.grammar-map { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 6px 0; }
.gmap { border: 2px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
.gmap h5 { margin: 0; padding: 5px 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; color: #fff; background: var(--teal); }
.gmap.c2 h5 { background: var(--kyoto-red); } .gmap.c3 h5 { background: var(--amber); }
.gmap.c4 h5 { background: var(--violet); } .gmap.c5 h5 { background: var(--matcha); }
.gmap .b { padding: 7px 10px; }
.gmap .pat { font-family: var(--f-sans-jp); font-weight: 700; font-size: .98rem; color: var(--ink); }
.gmap .ex { font-size: .76rem; color: var(--ink-soft); margin-top: 2px; }
.gmap .ex .ro { font-family: var(--f-mono); font-size: .68rem; }

/* ---- 3. Achievement / can-do (celebratory) ---- */
.achieve { list-style: none; padding: 0; margin: 6px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.achieve li { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; padding: 3px 0; }
.achieve .box { width: 20px; height: 20px; border: 2px solid var(--teal); border-radius: 5px; flex: 0 0 auto;
  display: grid; place-items: center; color: var(--teal); font-weight: 900; font-size: 13px; }

/* ---- 4. Next steps ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0; }
.step { border: 2px solid var(--line); border-top: 6px solid var(--sakura); border-radius: 12px; background: var(--card);
  padding: 10px 12px; }
.step h4 { margin: 0 0 4px; color: var(--matcha); font-size: 1rem; }
.step p { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--ink-soft); }

/* ---- 5. The send-off (back-cover energy) ---- */
.finale-hero { text-align: center; border-radius: var(--radius); padding: 13px; margin-bottom: 11px;
  background:
    radial-gradient(circle at 20% 18%, var(--sakura-2) 0, transparent 45%),
    radial-gradient(circle at 82% 85%, #d9e6d2 0, transparent 48%),
    linear-gradient(160deg, #fff, var(--paper) 70%, var(--matcha-bg)); }
.finale-hero h1 { margin: 0; }
.sendoff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0; }
.sendoff { border: 2px solid var(--line); border-radius: 12px; background: var(--card); padding: 8px; text-align: center; }
.sendoff .mascot { margin: 0 auto; }
.sendoff .nm { font-family: var(--f-serif-jp); font-weight: 700; color: var(--matcha); margin: 4px 0 2px; }
.sendoff .ln { font-size: .82rem; line-height: 1.5; color: var(--ink-soft); font-style: italic; }
.sendoff.t-tsuki  { border-top: 6px solid #7bbf9e; }
.sendoff.t-selene { border-top: 6px solid var(--violet); }
.sendoff.t-marina { border-top: 6px solid var(--sakura); }

/* ---- 6. Colophon / credits ---- */
.colophon { border: 2.5px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card);
  box-shadow: var(--shadow-soft); }
.colophon__band { background: var(--matcha); color: #fff; font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; padding: 7px 14px; text-align: center; }
.colophon__body { padding: 10px 14px; }
.colophon .by { font-family: var(--f-serif-jp); font-size: 1.5rem; font-weight: 900; color: var(--matcha); text-align: center; }
.colophon .by small { display: block; font-family: var(--f-body); font-size: .8rem; font-weight: 400; color: var(--ink-soft);
  letter-spacing: normal; text-transform: none; margin-top: 2px; }
.credit-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0; }
.credit-links a, .credit-links span { font-family: var(--f-mono); font-size: .8rem; text-decoration: none;
  color: var(--matcha); background: var(--matcha-bg); border: 1px solid rgba(43,76,62,.25); border-radius: 50px;
  padding: 6px 14px; font-weight: 700; }
.credit-links .live { background: var(--kyoto-red); color: #fff; border-color: var(--line); }
.colophon .fine { font-size: .74rem; line-height: 1.45; color: var(--ink-soft); text-align: center; border-top: 1px dotted #d8d2c6;
  padding-top: 8px; margin-top: 4px; }
.brand-seal { display: inline-grid; place-items: center; width: 60px; height: 60px; transform: rotate(-7deg);
  border: 3px solid var(--kyoto-red); border-radius: 14px; color: var(--kyoto-red); font-family: var(--f-serif-jp);
  font-weight: 900; font-size: .8rem; line-height: 1.1; text-align: center; background: rgba(255,255,255,.6); margin: 0 auto; }

/* ---- 7. Back cover (commercial exterior) ---- */
.page.back-cover { justify-content: center; align-items: center; text-align: center;
  background:
    radial-gradient(circle at 16% 12%, var(--sakura-2) 0, transparent 40%),
    radial-gradient(circle at 86% 90%, #d9e6d2 0, transparent 45%),
    linear-gradient(170deg, #fff, var(--paper) 62%, var(--matcha-bg)); }
.back-cover__inner { position: relative; z-index: 2; padding: 0 12mm; max-width: 138mm; margin: 0 auto; }
.back-cover__hook { font-family: var(--f-serif-jp); font-size: 1.7rem; font-weight: 900; color: var(--matcha);
  line-height: 1.3; margin: 0 0 10px; }
.back-cover__hook .accent { color: var(--kyoto-red); }
.back-cover__blurb { font-size: .95rem; line-height: 1.75; color: var(--ink-soft); text-align: left; margin: 0 0 14px; }
.back-cover__feats { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 14px; text-align: left; }
.back-cover__feats li { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; line-height: 1.5;
  color: var(--ink); }
.back-cover__feats .ic { flex: 0 0 auto; font-size: 1rem; line-height: 1.4; }
.back-cover__hug { font-family: var(--f-serif-jp); font-style: italic; font-size: 1.02rem; color: var(--kyoto-red);
  margin: 4px 0 14px; }
.back-cover__cast { display: flex; justify-content: center; gap: 4px; margin: 2px 0 14px; }
.back-cover__meta { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
.back-cover__meta .site { font-family: var(--f-mono); font-size: .82rem; font-weight: 700; color: #fff;
  background: var(--matcha); border-radius: 50px; padding: 7px 16px; }
.back-cover__meta .isbn { border: 1.5px solid var(--line); border-radius: 8px; background: #fff;
  font-family: var(--f-mono); font-size: .62rem; color: var(--ink-soft); padding: 8px 12px; line-height: 1.5; }