/* ============================================================================
   claudia-sol.css  ·  The Japanese Gengo — Sol's design language ("guide incoming")
   A distinct visual skin for any page where Sol (our Takeshi / local guide) appears.
   Seeing washi paper + kintsugi gold + dawn-gold = the reader's cue: "extra guidance ahead."
   Inspired by the SparkleSnap gengo-sol rooms (washi-workshop / kintsugi-compass).
   Link AFTER claudia-gengo-core.css. Author: Ms. Claudia · for Cezar Borgkrans.

   Sol's sprites are PIXEL-ART (intentional retro local-guide look) → image-rendering: pixelated.
   Noteworthy frames (3×3, pose N = 1-indexed reading order → .fXY):
     greeting:      welcoming        = pose7 .f02
     dialog:        teasing          = pose6 .f21
     sprite (base): debating         = pose4 .f01
     study:         reading a charm  = pose5 .f11
     tea:           clerk pose9 .f22 · awkward-laugh pose8 .f12 · welcome-speech pose6 .f21 · enjoying tea pose4 .f01 / pose5 .f11
     tea_drinking:  full 1–9 sip animation   ·  paints_kanji: stroke-order animation  ·  bow_loop: greeting bow
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700..900&display=swap');

:root {
  --sol:       #c96f2f;   /* terracotta */
  --sol-deep:  #7d3824;
  --sol-gold:  #f3c45c;
  --sol-washi: #fbf8ef;
  --sol-linen: #e8d8b2;
  --sol-fiber: rgba(77,107,71,.10);   /* matcha paper fiber */
  --f-sol-display: 'Fraunces', 'Noto Serif JP', Georgia, serif;
}

/* All Sol sprites render crisp pixel-art */
[class*="mascot--sol"] { image-rendering: pixelated; }

/* sprite-sheet sources (3×3, addressed with .f00–.f22 from core) */
.mascot--sol-greeting { background-image: url('../assets/mascots/sol_greeting.png'); }
.mascot--sol-dialog   { background-image: url('../assets/mascots/sol_dialog.png'); }
.mascot--sol-study    { background-image: url('../assets/mascots/sol_study.png'); }
.mascot--sol-guiding  { background-image: url('../assets/mascots/sol_guiding.png'); }
.mascot--sol-tea      { background-image: url('../assets/mascots/sol_tea.png'); }
.mascot--sol-tea-drinking { background-image: url('../assets/mascots/sol_tea_drinking.png'); }
.mascot--sol-bow      { background-image: url('../assets/mascots/sol_bow_loop.png'); }
/* NOTE: sol_paints_kanji is a 4×4 sheet (gen mistake) — DO NOT use with the 3×3 .fXY system.
   Needs a 4×4-aware crop or a re-gen at 3×3 before book/Web-Module use. */
.mascot--sol-paints   { background-image: url('../assets/mascots/sol_paints_kanji.png'); }

/* ---- Fuku — Sol's pet owl (pixel-art, rendered small) ---- */
[class*="mascot--fuku"] { image-rendering: pixelated; }
.mascot--fuku-study { background-image: url('../assets/mascots/fuku_study.png'); }
/* Fuku is a small pet — size him ~half a human chibi when he appears beside the cast */
.mascot.sz-pet { width: 60px; height: 60px; }

/* ---- 1. THE HERALD — the "guidance incoming" wake-up banner ---- */
.sol-herald {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  margin: 18px 0; padding: 18px 22px;
  border: 2px solid rgba(125,56,36,.34);
  border-radius: 22px 14px 26px 16px;     /* kintsugi-style asymmetry */
  background:
    repeating-linear-gradient(102deg, var(--sol-fiber) 0 1px, transparent 1px 13px),
    radial-gradient(circle at 88% 18%, rgba(243,196,92,.30), transparent 30%),
    radial-gradient(circle at 12% 80%, rgba(201,111,47,.12), transparent 32%),
    linear-gradient(130deg, var(--sol-washi), rgba(232,216,178,.55));
  box-shadow: 12px 12px 0 rgba(125,56,36,.12), 0 18px 40px rgba(45,41,38,.08);
}
/* the kintsugi gold seam streaking through the herald */
.sol-herald::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(108deg, transparent 0 46%, rgba(243,196,92,.95) 47% 48%, transparent 49% 100%),
    linear-gradient(34deg, transparent 0 70%, rgba(243,196,92,.7) 71% 72%, transparent 73% 100%);
  filter: drop-shadow(0 0 5px rgba(243,196,92,.5));
}
/* huge faint dawn glyph */
.sol-herald::after {
  content: "朝"; position: absolute; right: 6px; bottom: -34px; z-index: 0; pointer-events: none;
  font: 900 8.5rem/0.8 var(--f-serif-jp); color: rgba(125,56,36,.06);
}
.sol-herald__body { position: relative; z-index: 2; }
.sol-herald__kicker {
  display: inline-block; font-family: var(--f-mono); font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sol-deep);
  background: rgba(255,255,255,.75); border: 1px solid rgba(201,111,47,.3);
  border-radius: 999px; padding: 4px 12px; box-shadow: 0 8px 22px rgba(201,111,47,.1);
}
.sol-herald .sol-herald__title {
  font-family: var(--f-sol-display); font-weight: 900; font-size: 1.6rem; line-height: 1.08;
  color: var(--ink); margin: 8px 0 4px; letter-spacing: -.5px;
}
.sol-herald__line { font-family: var(--f-body); font-size: .96rem; color: var(--ink-soft); margin: 0; max-width: 34em; }
.sol-herald__art { position: relative; z-index: 2; flex: 0 0 auto; }

/* a warm washi+dawn medallion to seat Sol's sprite on */
.sol-medallion {
  position: relative; display: grid; place-items: center;
  width: 116px; height: 116px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #fff, transparent 55%),
    radial-gradient(circle, rgba(243,196,92,.5), rgba(201,111,47,.18) 60%, transparent 72%);
  border: 2px solid rgba(201,111,47,.3);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.45), 0 12px 26px rgba(201,111,47,.18);
}
.sol-medallion .mascot { filter: drop-shadow(0 6px 8px rgba(45,41,38,.22)); }

/* ---- 2. SOL'S TIP — washi callout for his local guidance ---- */
.sol-tip {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  margin: 22px 0; padding: 16px 18px 16px 16px;
  border: 1px solid rgba(77,107,71,.34);
  border-left: 7px solid var(--sol-gold);
  border-radius: 14px;
  background:
    repeating-linear-gradient(102deg, var(--sol-fiber) 0 1px, transparent 1px 12px),
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.92), transparent 30%),
    linear-gradient(130deg, var(--sol-washi), rgba(232,216,178,.5));
  box-shadow: 10px 10px 0 rgba(77,107,71,.10);
}
.sol-tip::before {
  content: "☀ SOL'S TIP · 地元メモ"; position: absolute; top: -11px; left: 14px;
  font-family: var(--f-mono); font-size: 10px; font-weight: 800; letter-spacing: .08em;
  color: #fff; background: var(--sol); padding: 2px 10px; border-radius: 6px;
  border: 1px solid var(--sol-deep);
}
.sol-tip__art { flex: 0 0 auto; }
.sol-tip__body { font-family: var(--f-body); font-size: .96rem; line-height: 1.6; color: var(--ink); margin-top: 4px; }
.sol-tip__body b { color: var(--sol-deep); }

/* ---- 3. SOL'S PROVERB — kintsugi block for his craft-wisdom ---- */
.sol-proverb {
  position: relative; overflow: hidden; margin: 22px 0; padding: 18px 22px; text-align: center;
  border: 2px solid rgba(125,56,36,.38); border-radius: 24px 16px 28px 18px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.88), transparent 26%),
    linear-gradient(135deg, rgba(96,31,26,.10), rgba(243,196,92,.30), rgba(255,255,255,.74));
  box-shadow: 0 18px 44px rgba(125,56,36,.16), inset 0 0 0 1px rgba(255,255,255,.6);
}
.sol-proverb::before {   /* gold mend-seams */
  content: ""; position: absolute; inset: 10px 16px; pointer-events: none; opacity: .85;
  background:
    linear-gradient(112deg, transparent 0 38%, rgba(243,196,92,.95) 39% 40%, transparent 41% 100%),
    linear-gradient(28deg, transparent 0 54%, rgba(243,196,92,.8) 55% 56%, transparent 57% 100%);
  filter: drop-shadow(0 0 6px rgba(243,196,92,.5));
}
.sol-proverb__jp { position: relative; z-index: 2; font-family: var(--f-serif-jp); font-weight: 700;
  font-size: 1.5rem; color: var(--sol-deep); }
.sol-proverb__ro { position: relative; z-index: 2; font-family: var(--f-mono); font-size: .8rem; color: var(--ink-soft); margin-top: 2px; }
.sol-proverb__en { position: relative; z-index: 2; font-family: var(--f-sol-display); font-style: italic; font-size: 1.05rem; color: var(--ink); margin-top: 6px; }

/* ---- 4. SOL-RULE — a slim dawn ribbon to flag a "Sol zone" page header ---- */
.sol-rule {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 14px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sol-deep);
}
.sol-rule::before { content: "☀"; color: var(--sol); font-size: 14px; }
.sol-rule::after { content: ""; flex: 1; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--sol-gold), var(--sol), transparent); }