/* tales.css — in-world storyteller overlay + "Hear a tale" buttons (shop_v1). Self-contained colors: used on many pages. */
.tale-ov { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(30,18,8,.72), rgba(10,6,2,.9)); }
.tale-card { position: relative; width: min(420px, 94vw); max-height: 92vh; overflow-y: auto; text-align: center; color: #2a1c12;
  padding: 18px 20px 14px; border-radius: 10px; font-family: "Cormorant Garamond", Palatino, Georgia, serif;
  background: radial-gradient(ellipse at 50% 30%, #fbf1d8, #ecd6a4 70%, #d9bb7c);
  border: 3px solid #8a6326; box-shadow: 0 0 0 2px #e8cf8a inset, 0 18px 40px rgba(0,0,0,.6); }
.tale-teller { position: relative; width: 108px; height: 108px; margin: 0 auto 4px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, #f6e7c2, #c9a462); border: 3px solid #8a6326; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.tale-teller img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tale-teller .tale-badge { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; }
.tale-teller img + .tale-badge { inset: auto 0 0 auto; width: 34px; height: 34px; font-size: 20px; background: #fbf1d8; border-radius: 50%; border: 2px solid #8a6326; }
.tale-who { margin: 2px 0 0; font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; }
.tale-ask { margin: 2px 0 8px; font-style: italic; font-size: 1.1rem; }
.tale-text { margin: 0 0 12px; padding: 10px 12px; font-size: 1.08rem; line-height: 1.35; text-align: left;
  border-left: 4px solid #9c1e1e; background: rgba(255,255,255,.35); border-radius: 4px; }
.tale-count { display: flex; align-items: center; gap: 10px; margin: 0 4px 10px; font-family: system-ui, sans-serif; }
.tale-sand { flex: 1; height: 12px; border-radius: 6px; background: rgba(90,60,20,.25); overflow: hidden; border: 1px solid #8a6326; }
.tale-sand i { display: block; height: 100%; background: linear-gradient(90deg, #d7a640, #f0cf7a); transition: width .2s linear; }
.tale-count b { min-width: 28px; font-size: 1.3rem; }
.tale-count.done b { color: #2e7a3a; }
.tale-take { display: block; width: 100%; min-height: 54px; font: 700 1.15rem system-ui, sans-serif; color: #fff7e0; cursor: pointer;
  border: 2px solid #5a3a12; border-radius: 10px; background: linear-gradient(180deg, #8a7a5a, #6a5a3a); }
.tale-take.ready { background: linear-gradient(180deg, #3f9a4a, #2a7034); box-shadow: 0 4px 0 #1d4f24; animation: talePop .5s ease; }
.tale-take:disabled { opacity: .75; cursor: default; }
@keyframes talePop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.tale-for { margin: 8px 0 2px; font-size: 1rem; }
.tale-pass { margin: 4px 0; font-size: .95rem; }
.tale-pass.on { color: #6a2a8a; }
.tale-pass-btn { border: none; background: none; color: #6a2a8a; font: 700 .95rem "Cormorant Garamond", Georgia, serif; text-decoration: underline; cursor: pointer; }
.tale-skip { margin-top: 6px; border: none; background: none; color: #5a4020; font: .85rem system-ui, sans-serif; text-decoration: underline; cursor: pointer; }

/* the opt-in button that sits next to a timer */
.tale-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; cursor: pointer;
  font: 700 .95rem system-ui, sans-serif; color: #2a1c12; text-align: left;
  border: 2px solid #8a6326; border-radius: 10px; background: linear-gradient(180deg, #fbf1d8, #e6cd93); box-shadow: 0 3px 0 #6b4a1c; }
.tale-btn:hover { filter: brightness(1.05); }
.tale-btn .tale-ico { font-size: 1.2rem; }
.tale-btn .tale-what { font-weight: 600; font-size: .85rem; color: #6a4a1a; }
.tale-btn .tale-what:empty { display: none; }
.tale-btn .tale-what::before { content: "· "; color: #8a6326; }
.tale-btn.block { display: flex; width: 100%; justify-content: center; margin: 8px 0 0; }
.tale-btn.tale-sm { min-height: 34px; padding: 3px 8px; font-size: .78rem; gap: 4px; margin-top: 4px; }
.tale-btn.tale-sm .tale-ico { font-size: .95rem; }
.tale-btn.tale-sm .tale-what { font-size: .72rem; }

/* top-up window: 10-second "Double it?" chip (town collect, stalls, armory chest) */
.dbl-chip { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.dbl-chip .tale-btn.block { flex: 1; margin: 0; }
.dbl-clock { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font: 800 1rem system-ui, sans-serif; color: #fff7e0; background: radial-gradient(circle at 40% 35%, #c8473b, #8a1f17); border: 2px solid #5a1010; }
.sh-dbl { margin-top: 4px; gap: 4px; }
.sh-dbl .dbl-clock { min-width: 30px; height: 30px; font-size: .8rem; }