/* Palettes, the month ring, the reward, the jebena, the chessboard,
 * the ink cursor and other flourishes. Tokens come from brana.css. */

/* ---------- Palettes: each one only redefines tokens ---------- */
:root[data-theme="buna"] {
  --bg: #2b1b12; --fg: #f0e2c8; --panel: #3a2618; --vellum: #4a3122; --disc: #f0e2c8;
  --line: rgba(240, 226, 200, .2); --shadow: rgba(0, 0, 0, .45); --ink-soft: #cfb48f;
  --rubric: #e0913f; --blue: #8fb3c4; --green: #9db06a; --ochre: #e8b04b; --word: #d9bf86;
  --board-light: #5a3b27; --board-dark: #3a2618;
  --piece-light: #f0e2c8; --piece-light-edge: #160d07; --piece-dark: #160d07; --piece-dark-edge: #d9bf86;
}
:root[data-theme="adey"] {
  --bg: #fbf1c7; --fg: #2a230d; --panel: #fff8dc; --vellum: #f3dd8a; --disc: #fffbe8;
  --line: rgba(42, 35, 13, .25); --shadow: rgba(42, 35, 13, .2); --ink-soft: #5e5226;
  --rubric: #b8460b; --blue: #3f7a2c; --green: #2f6b2f; --ochre: #f2c200; --word: #4f7a2a;
  --board-light: #fffbe8; --board-dark: #e6c44a;
}
:root[data-theme="abay"] {
  --bg: #e4eeea; --fg: #0f2a33; --panel: #f2f7f4; --vellum: #cfe0d9; --disc: #f5faf7;
  --line: rgba(15, 42, 51, .25); --shadow: rgba(15, 42, 51, .2); --ink-soft: #3b5a63;
  --rubric: #1f6f8b; --blue: #0b3d91; --green: #2f7d5b; --ochre: #c99a2e; --word: #9a7420;
  --board-light: #f5faf7; --board-dark: #93bcc4; --piece-light-edge: #0f2a33; --piece-dark: #0f2a33;
}
/* ላሊበላ: the rose-red tuff of the rock-hewn churches */
:root[data-theme="lalibela"] {
  --bg: #e9d3c4; --fg: #2b1712; --panel: #f4e6dc; --vellum: #d9b8a3; --disc: #f6ebe3;
  --line: rgba(43, 23, 18, .26); --shadow: rgba(43, 23, 18, .2); --ink-soft: #5e3a2e;
  --rubric: #8e2f22; --blue: #3e5a7a; --green: #5a6b3a; --ochre: #c08a3e; --word: #7c4a2a;
  --board-light: #f6ebe3; --board-dark: #b9846c; --piece-light-edge: #2b1712; --piece-dark: #2b1712;
}
/* ዳሎል: sulfur yellow, acid teal and salt white, in the Danakil */
:root[data-theme="dallol"] {
  --bg: #f4f1d6; --fg: #1f2a12; --panel: #fbf9e8; --vellum: #e6e2a8; --disc: #fffde9;
  --line: rgba(31, 42, 18, .25); --shadow: rgba(31, 42, 18, .18); --ink-soft: #4e5a2c;
  --rubric: #b5431b; --blue: #1d8a7a; --green: #7aa22b; --ochre: #e7c516; --word: #1d7a62;
  --board-light: #fffde9; --board-dark: #d6cf5e; --piece-light-edge: #1f2a12; --piece-dark: #1f2a12;
}
/* ሰሜን: the Simien mountains at dusk */
:root[data-theme="simien"] {
  --bg: #142026; --fg: #e3ece6; --panel: #1d2c33; --vellum: #22343c; --disc: #e9efe8;
  --line: rgba(227, 236, 230, .2); --shadow: rgba(0, 0, 0, .45); --ink-soft: #a3b8b4;
  --rubric: #e07a4f; --blue: #6fa8c2; --green: #8fbf7a; --ochre: #e2b85c; --word: #a8d3a0;
  --board-light: #2f444c; --board-dark: #18252b;
  --piece-light: #e9efe8; --piece-light-edge: #0b1418; --piece-dark: #0b1418; --piece-dark-edge: #a3b8b4;
}
/* ጠጅ: honey wine */
:root[data-theme="tej"] {
  --bg: #f6e3b0; --fg: #3a240c; --panel: #fcefc8; --vellum: #ecd08a; --disc: #fff6dc;
  --line: rgba(58, 36, 12, .25); --shadow: rgba(58, 36, 12, .2); --ink-soft: #6b4a22;
  --rubric: #a8461a; --blue: #3d5f6e; --green: #6b7a2a; --ochre: #e09a1a; --word: #8a5a10;
  --board-light: #fff6dc; --board-dark: #d6a24a; --piece-light-edge: #3a240c; --piece-dark: #3a240c;
}
:root[data-theme="simien"] body::after { background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0, 0, 0, .45) 100%) }
:root[data-theme="buna"] body::after { background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0, 0, 0, .45) 100%) }
html { transition: background-color .4s }


/* ---------- The month ring around the medallion ---------- */
.months .month, .months .month13 { fill: none; stroke: var(--line); stroke-width: 6; transition: stroke .6s, filter .6s }
.months .month.found { stroke: var(--rubric); filter: drop-shadow(0 0 3px var(--rubric)) }
.pagume .months .month, .pagume .months .month13 { stroke: var(--ochre); filter: drop-shadow(0 0 4px var(--ochre)) }
.point { fill: var(--ochre); stroke: var(--fg); stroke-width: 1.2; animation: point 8s ease-in-out infinite }
.tilt.burst { animation: burst 4.2s ease-out }
@keyframes burst {
  0% { filter: drop-shadow(0 0 0 var(--ochre)) }
  15% { filter: drop-shadow(0 0 40px var(--ochre)) brightness(1.15) }
  100% { filter: drop-shadow(0 0 0 var(--ochre)) }
}
.pagume .cartouche { box-shadow: 6px 6px 0 var(--ochre) }

/* ---------- The reward ---------- */
#rewardBtn { display: none; color: var(--ochre); font-size: 16px }
.pagume #rewardBtn { display: flex; animation: glint 2.4s ease-in-out infinite }
@keyframes glint { 50% { color: var(--rubric); transform: scale(1.15) } }
.rain { position: fixed; top: -50px; z-index: 70; pointer-events: none; color: var(--rubric); animation: rain var(--d) cubic-bezier(.3, .1, .6, 1) both }
.rain:nth-child(3n) { color: var(--ochre) }
.rain:nth-child(5n) { color: var(--blue) }
@keyframes rain { to { transform: translate(var(--x), 112vh) rotate(var(--r)); opacity: .15 } }
.win.rewardwin { width: min(540px, calc(100vw - 32px)); height: auto; max-height: calc(100vh - 80px) }
.reward { text-align: center; padding: 6px 4px 4px }
.reward-head span { display: block; font-size: 72px; line-height: 1; color: var(--ochre); text-shadow: 3px 3px 0 var(--fg) }
.reward-head small { display: block; letter-spacing: .3em; text-transform: uppercase; font-size: 10px; color: var(--ink-soft); margin: 6px 0 14px }
.reward p { margin: 0 auto 10px; font-family: var(--serif); font-size: 18px }
.challenge {
  display: inline-block; margin-top: 8px; padding: 10px 18px; font-size: 14px; font-weight: 600;
  background: var(--fg); color: var(--bg); text-decoration: none; border: 2px solid var(--fg);
  box-shadow: 5px 5px 0 var(--ochre); transition: transform .15s, box-shadow .15s;
}
.challenge:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--rubric) }
.reward-inline { border: 2px solid var(--ochre); padding: 12px; margin: 10px 0 }

/* the Secrets window */
.months-list, ol.months { list-style: none; padding: 0; margin: 0 }
ol.months li { display: grid; grid-template-columns: 74px 1fr; gap: 2px 12px; padding: 7px 0; border-bottom: 1px dashed var(--line) }
ol.months li .m { color: var(--ink-soft); grid-row: span 2 }
ol.months li.got .m { color: var(--rubric) }
ol.months li b { color: var(--rubric); font-weight: 400; font-size: 16px }
ol.months li span:not(.m) { font-size: 12px }
ol.months li i { color: var(--ink-soft); font-size: 12px }
ol.months li.locked { opacity: .55 }
.wordlist .tag { margin-bottom: 6px }
.wordlist b { color: var(--rubric); font-weight: 400 }
.t-month { font-size: 11px; color: var(--ink-soft) }

/* ---------- The jebena ---------- */
.jebena-icon { width: 30px; height: 30px; display: block }
@keyframes smoke { 0% { opacity: 0; transform: translateY(8px) } 30% { opacity: .6 } 100% { opacity: 0; transform: translateY(-16px) } }

/* ---------- The chessboard ---------- */
.chess { margin: 8px 0 4px }
.board8 {
  position: relative; width: 212px; height: 212px; border: 2px solid var(--fg);
  background: conic-gradient(var(--board-dark) 0 90deg, var(--board-light) 90deg 180deg, var(--board-dark) 180deg 270deg, var(--board-light) 270deg) 0 0 / 52px 52px;
  box-shadow: 5px 5px 0 var(--shadow);
}
.pc {
  position: absolute; left: calc(var(--f) * 26px); top: calc(var(--r) * 26px); width: 26px; height: 26px; padding: 0;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", serif; font-size: 20px; line-height: 26px; text-align: center;
  transition: left .55s cubic-bezier(.3, .8, .3, 1), top .55s cubic-bezier(.3, .8, .3, 1);
}
.pc.w { color: var(--piece-light); -webkit-text-stroke: 1.2px var(--piece-light-edge); paint-order: stroke fill }
.pc.b { color: var(--piece-dark); -webkit-text-stroke: 1px var(--piece-dark-edge); paint-order: stroke fill }
.pc.hint { color: var(--rubric); -webkit-text-stroke: 0; animation: hint 1.6s ease-in-out infinite }
@keyframes hint { 50% { transform: translateY(-3px) } }
.pc.nope { animation: nope .35s }
@keyframes nope { 25% { transform: translateX(-3px) } 75% { transform: translateX(3px) } }
.chess-cap { font-size: 12px; margin: 8px 0 0; min-height: 2.4em }

/* ---------- Flourishes ---------- */
.hero, .corner { transition: opacity .7s ease, filter .7s ease }
.writing .hero { opacity: .1; filter: blur(2px) }
.writing .corner { opacity: .35 }

.ink-cursor {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
  width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  border: 1.5px solid var(--rubric); transition: width .2s, height .2s, margin .2s, background-color .2s, border-width .2s;
}
.ink-cursor.over { width: 46px; height: 46px; margin: -23px 0 0 -23px; background-color: color-mix(in srgb, var(--rubric) 10%, transparent) }
.ink-cursor.press { border-width: 4px }
.tcaret { color: var(--rubric); animation: blink 1s steps(2) infinite; margin-left: 1px }
.lede-about { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--rubric); margin: 0 0 10px }
.jr-foot .big { font-size: 40px; color: var(--rubric); margin: 0; line-height: 1.1 }
.cta { margin-top: 12px; padding: 8px 16px; border: 2px solid var(--fg); background: var(--fg); color: var(--bg); font-size: 13px; transition: transform .15s, box-shadow .15s }
.cta:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--rubric) }

/* windows unroll like a scroll instead of popping */
.win { animation: unroll-in .42s cubic-bezier(.2, .8, .2, 1) }
@keyframes unroll-in {
  from { clip-path: inset(0 0 100% 0); opacity: .5 }
  to { clip-path: inset(-30px -30px -30px -30px); opacity: 1 }
}
@media (prefers-reduced-motion: reduce) {
  .ink-cursor, .rain { display: none }
}