:root{
  --bg-top:#040D1B;
  --bg-mid:#061225;
  --bg-bottom:#090E2A;
  --world-panel:#090E2A;
  --panel:#0b1b31;
  --gold:#F0BD56;
  --gold2:#FFE08A;
  --gold-soft:#D59B37;
  --text:#f6eddc;
  --muted:#c7bba7;
  --line:rgba(240,189,86,.72);
  --shadow:0 18px 48px rgba(0,0,0,.34);
  --site-bg:none;
  --parchment:none;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Georgia,"Times New Roman",serif;
  background:
    radial-gradient(circle at 50% 0%,rgba(42,81,139,.18),transparent 32rem),
    radial-gradient(circle at 10% 25%,rgba(44,78,126,.12),transparent 25rem),
    linear-gradient(180deg,
      var(--bg-top) 0,
      var(--bg-mid) 420px,
      var(--bg-bottom) 760px,
      var(--bg-bottom) 100%);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:min(760px,82vh);
  z-index:-2;
  background-image:
    linear-gradient(180deg,
      rgba(4,12,26,.12) 0%,
      rgba(4,12,26,.20) 48%,
      rgba(6,14,34,.42) 70%,
      rgba(9,14,42,.78) 100%),
    var(--site-bg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,black 0 58%,rgba(0,0,0,.92) 72%,transparent 100%);
  mask-image:linear-gradient(180deg,black 0 58%,rgba(0,0,0,.92) 72%,transparent 100%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle at 50% 0,rgba(72,100,160,.08),transparent 44rem);
}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.wrap{width:min(var(--max),calc(100% - 32px));margin:auto}

/* header */
.site-header{position:relative;z-index:8}
.header-row{
  min-height:88px;
  display:flex;
  align-items:center;
  gap:24px;
  padding:8px 0 10px;
  border-bottom:1px solid rgba(231,184,94,.32);
}
.brand{display:flex;align-items:center;gap:14px;min-width:355px}
.logo{width:56px;height:56px;object-fit:contain;display:none;flex:0 0 56px}
.brand-title{font-size:29px;line-height:1;color:#f0c66f;letter-spacing:.2px}
.brand-subtitle{margin-top:5px;color:var(--muted);font-size:14px;line-height:1.2}
.top-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex:1;
  color:#d8c6a6;
  font-size:14px;
  white-space:nowrap;
}
.top-nav a{transition:.16s color}
.top-nav a:hover{color:var(--gold2)}
.top-nav .home-link{
  font-size:21px;color:#f0c66f;display:inline-flex;align-items:center;justify-content:center;min-width:24px
}
.langs{
  display:flex;
  gap:8px;
  align-items:center;
  color:#dac69d;
  font-size:14px;
  white-space:nowrap;
}
.langs button{
  border:0;
  background:transparent;
  color:inherit;
  padding:5px 2px;
}
.langs button.active{
  color:var(--gold2);
  border-bottom:1px solid var(--gold2);
}
.langs span{opacity:.32}

/* home */
.home-prompt{
  display:flex;align-items:center;justify-content:center;gap:15px;
  text-align:center;color:#f4ca70;
  font-size:clamp(21px,2vw,29px);font-weight:normal;
  margin:13px 0 11px;line-height:1.08;
  text-shadow:0 0 14px rgba(231,184,94,.24);
}
.panel{background:rgba(9,14,42,.92);border:1px solid var(--line);box-shadow:var(--shadow)}
.pinned{
  height:270px;
  display:grid;
  grid-template-columns:405px minmax(0,1fr);
  border-radius:18px;overflow:hidden;
}
.pinned-media{
  width:405px;height:270px;position:relative;overflow:hidden;
  background:linear-gradient(145deg,#183354,#4b3d52,#6e4b25)
}
.pinned-media>div,.pinned-media img{width:100%;height:100%}
.pinned-media img{display:block;object-fit:cover}
.pinned-copy{
  position:relative;padding:18px 30px;display:flex;align-items:center;overflow:hidden;isolation:isolate;background:var(--world-panel)
}
.pinned-copy::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(9,14,42,.99),rgba(9,14,42,.95) 38%,rgba(9,14,42,.70));
}
.pinned-copy-bg{
  position:absolute;inset:0;z-index:0;background-repeat:no-repeat;background-size:cover;background-position:right center;opacity:.34
}
.pinned-copy-inner{position:relative;z-index:2;width:100%}
.kicker{color:#bfa46d;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.pinned h2{margin:5px 0 7px;color:#f0c66f;font-size:28px;font-weight:normal;line-height:1.06}
.pinned p{color:#d8cab2;line-height:1.42;margin:7px 0 9px;font-size:14px;max-width:650px}
.tags{display:flex;gap:7px;flex-wrap:wrap}
.tag,.chip{
  border:1px solid rgba(231,184,94,.32);
  border-radius:999px;
  padding:6px 10px;
  color:#dfcda9;
  font-size:12px;
  background:rgba(255,255,255,.025)
}
.pinned-tags{margin:4px 0}
.enter-btn{
  display:inline-block;
  margin-top:9px;
  border:1px solid #FFD977;
  border-radius:10px;
  padding:8px 15px;
  color:#211707;
  background:linear-gradient(180deg,#FFE79D 0%,#F4C35E 54%,#E7A83D 100%);
  box-shadow:0 5px 18px rgba(226,172,73,.15);
  transition:.16s filter,.16s transform,.16s box-shadow;
}
.enter-btn:hover{
  color:#1d1406;
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 7px 22px rgba(226,172,73,.22);
}
.main-enter{min-width:170px;text-align:center}

.filter-area{
  display:grid;
  grid-template-columns:minmax(0,1fr) 245px;
  gap:10px;
  align-items:start;
  margin:10px 0 12px;
}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{
  min-height:34px;border:1px solid rgba(231,184,94,.38);border-radius:10px;
  background:rgba(10,27,51,.78);color:#dec89e;padding:6px 11px;white-space:nowrap
}
.filters button:hover,.filters button.active{border-color:var(--gold2);color:var(--gold2);background:#102745}
.filters .random-filter{box-shadow:0 0 18px rgba(231,184,94,.08) inset}
.search-row{display:flex;justify-content:flex-end}
.search{
  width:100%;height:34px;border:1px solid rgba(231,184,94,.33);border-radius:10px;
  background:rgba(7,15,36,.78);color:#e9dfcf;padding:6px 11px;outline:none
}
.search:focus{border-color:#d7ad58}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.card{
  position:relative;overflow:hidden;border:1px solid rgba(240,189,86,.82);
  border-radius:15px;background:var(--world-panel);box-shadow:0 12px 30px rgba(0,0,0,.24);
  transition:.17s transform,.17s border-color
}
.card:hover{transform:translateY(-2px);border-color:rgba(255,215,122,.76)}
.card-media{
  display:block;
  width:100%;
  aspect-ratio:3 / 2;
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#183354,#4b3d52,#6e4b25);
}
.card-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:.35s transform;
}
.card:hover .card-media img{transform:scale(1.018)}
.status-badge{
  position:absolute;top:10px;left:10px;z-index:4;border-radius:999px;padding:5px 9px 5px 7px;
  font:600 10px/1.1 Arial,sans-serif;letter-spacing:.02em;color:#241805;
  background:linear-gradient(135deg,#FFF3AD,#F3C550);border:1px solid #FFE17E;
  box-shadow:0 0 18px rgba(255,207,69,.38)
}
.status-badge::before{content:"✦";margin-right:5px}
.status-badge.new::before{content:"✧"}
.status-badge.popular::before{content:"✺"}
.card-body{
  padding:11px 13px 13px;
  text-align:center;
  background:linear-gradient(180deg,rgba(9,14,42,.98),rgba(7,13,35,.98));
}
.card h3{
  margin:0 0 7px;
  color:#edc46c;
  font-size:19px;
  font-weight:normal;
  line-height:1.12;
}
.card .tags{
  justify-content:center;
  min-height:23px;
  margin-bottom:2px;
}
.card .tag{font-size:11px;padding:5px 8px}
.card .enter-btn{
  font-size:13px;
  padding:7px 14px;
  margin-top:8px;
  min-width:160px;
  color:#211707;
}
.empty{padding:42px;text-align:center;color:#bbb0a0;border-radius:14px}

/* tale */
.tale-shell{width:min(1020px,calc(100% - 32px));margin:auto}
.back-link{display:inline-flex;color:#c8b17a;font-size:13px;margin:7px 0 10px}
.back-link:hover{color:#f2ce76}
.tale-head{text-align:center;margin:2px 0 15px}
.tale-head h1{color:#f1d489;font-size:38px;margin:0;font-weight:normal}
.cover{
  position:relative;aspect-ratio:3/2;border:1px solid rgba(240,189,86,.78);
  border-radius:18px;overflow:hidden;background:#090e2a;box-shadow:0 20px 55px rgba(0,0,0,.28)
}
.cover img,.cover video{width:100%;height:100%;object-fit:cover;display:block}
.cover video{display:none;cursor:pointer}
.cover-play{
  position:absolute;right:14px;top:14px;z-index:5;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(239,198,109,.92);background:rgba(5,13,28,.76);display:none;place-items:center;padding:0;
  box-shadow:0 0 14px rgba(231,184,94,.12)
}
.cover-play::before{
  content:"";width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;
  border-left:11px solid #f3c86d;transform:translateX(1.5px)
}
.cover-play:hover{background:rgba(8,18,38,.88)}
.tale-cats{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:12px 0 16px}
.intro{font-size:18px;line-height:1.65;text-align:center;color:#ddd1bd;margin:18px auto;max-width:820px}
.listen-box{
  display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:15px 17px;
  border:1px solid rgba(240,189,86,.62);background:rgba(8,14,38,.82);border-radius:14px;margin:17px 0
}
.audio-ui{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center}
.audio-btn{width:38px;height:38px;border-radius:50%;border:1px solid #d5aa55;background:#111a3d;color:#f2ce76}
.audio-range,.volume-range{accent-color:#d8a94f}
.audio-range{width:100%}
.audio-time{min-width:86px;text-align:right;color:#b9a98b;font:12px Arial,sans-serif}
.volume-control{display:flex;align-items:center;gap:6px;min-width:126px}
.volume-icon{width:24px;text-align:center;color:#efc66e;user-select:none;cursor:pointer}
.volume-range{width:90px}
.tts-btn{border:1px solid rgba(225,184,97,.25);background:transparent;color:#9f9588;border-radius:999px;padding:9px 13px;cursor:default}
.paper{
  margin:22px 0 30px;border-radius:12px;padding:clamp(30px,5vw,62px);color:#342819;
  background-color:#ead9b7;background-image:linear-gradient(rgba(244,230,197,.46),rgba(229,206,161,.38)),var(--parchment);
  background-size:auto,560px auto;background-repeat:repeat;box-shadow:0 20px 60px rgba(0,0,0,.28)
}
.story-text{font-family:"Times New Roman","DejaVu Serif",Georgia,serif;font-size:19px;line-height:1.72}
.story-text p{margin:0 0 1.15em}
.inline-story-image{
  display:block;width:min(88%,780px);max-height:650px;object-fit:cover;margin:28px auto;
  border-radius:6px;box-shadow:0 6px 18px rgba(62,42,18,.22);cursor:zoom-in
}
.paper-end{text-align:center;margin-top:31px;color:#765323;font-style:normal;font-size:17px;letter-spacing:.02em}
.section-title-public{
  display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;
  color:#e9ca7d;font-size:27px;font-weight:normal;margin:32px 0 15px
}
.section-title-public::before,.section-title-public::after{
  content:"";height:1px;flex:0 1 90px;background:linear-gradient(90deg,transparent,rgba(231,184,94,.5))
}
.section-title-public::after{background:linear-gradient(90deg,rgba(231,184,94,.5),transparent)}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.gallery figure{margin:0}
.gallery img{
  width:100%;aspect-ratio:3/2;object-fit:cover;display:block;cursor:zoom-in;border-radius:12px;
  border:1px solid rgba(240,189,86,.62);box-shadow:0 10px 28px rgba(0,0,0,.22)
}
.gallery figcaption{font-size:12px;color:#a9936b;margin-top:6px;text-align:center}
.share-section{text-align:center;margin:22px 0 5px;color:#b9a37a}
.share-label{font-size:13px;margin-bottom:9px}
.share-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.share-btn{
  border:1px solid rgba(231,184,94,.35);background:rgba(9,14,42,.72);color:#d9c496;
  border-radius:999px;padding:7px 12px;font-size:12px
}
.share-btn:hover{color:#ffd77a;border-color:#ffd77a}
.share-status{height:18px;font-size:11px;color:#cdb476;margin-top:5px}
.related{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;place-items:center;z-index:100;padding:25px}
.lightbox.open{display:grid}
.lightbox img{max-width:94vw;max-height:90vh;object-fit:contain}
.lightbox button{position:absolute;right:22px;top:18px;border:0;background:transparent;color:white;font-size:30px}

/* footer */
.story-footer{
  margin-top:18px;
  padding:18px 0 14px;
  border-top:1px solid rgba(231,184,94,.34);
  border-bottom:1px solid rgba(231,184,94,.18);
  background:linear-gradient(180deg,rgba(6,16,35,.38),rgba(4,11,27,.58));
  color:#d9bd83;
}
.story-footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.55fr;gap:24px;align-items:center}
.footer-feature{display:flex;align-items:center;gap:12px;min-height:50px;color:#d7bd8b;font-size:14px;line-height:1.2}
.footer-icon{flex:0 0 34px;width:34px;text-align:center;font-size:28px;line-height:1;color:#efbf62}
.footer-quote{
  text-align:right;
  justify-self:end;
  color:#e7c57c;
  font-size:18px;
  line-height:1.22;
  font-style:italic;
  max-width:360px;
}
.footer-ornament{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;color:#a9854a;font-size:18px}
.footer-ornament::before,.footer-ornament::after{content:"";width:80px;height:1px;background:linear-gradient(90deg,transparent,rgba(231,184,94,.42))}
.footer-ornament::after{background:linear-gradient(90deg,rgba(231,184,94,.42),transparent)}
.compact-footer{margin-bottom:0}


@media(max-width:1020px) and (min-width:821px){
  .header-row{flex-wrap:wrap;padding:10px 0}
  .brand{min-width:0;flex:1}
  .top-nav{order:3;width:100%;justify-content:flex-start;overflow:auto;padding:4px 0 7px}
  .filter-area{grid-template-columns:1fr}
}


/* ==========================================================
   MOBILE PUBLIC LAYOUT v2.6.5
   ========================================================== */
@media(max-width:820px){
  .wrap,.tale-shell{
    width:min(100% - 24px,1200px);
  }

  .header-row{
    min-height:0;
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
    padding:10px 0 9px;
  }

  .brand{
    grid-column:1;
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    align-items:center;
    gap:11px;
  }

  .logo{
    width:52px;
    height:52px;
    flex-basis:auto;
  }

  .brand-title{
    font-size:24px;
    line-height:1.02;
    white-space:nowrap;
  }

  .brand-subtitle{
    margin-top:5px;
    font-size:12px;
    line-height:1.2;
    white-space:normal;
  }

  .langs{
    grid-column:1;
    justify-self:end;
    margin:0;
    font-size:13px;
    line-height:1;
    gap:7px;
    padding:0 1px 1px;
  }

  .langs button{
    padding:4px 2px;
  }

  .top-nav{
    grid-column:1;
    order:initial;
    width:100%;
    display:flex;
    justify-content:space-between;
    gap:7px;
    overflow:visible;
    padding:5px 0 2px;
    font-size:12px;
  }

  .top-nav a{
    flex:0 0 auto;
  }

  .top-nav .home-link{
    font-size:18px;
    min-width:18px;
  }

  .home-prompt{
    display:block;
    width:100%;
    max-width:340px;
    margin:15px auto 13px;
    padding:0 6px;
    font-size:20px;
    line-height:1.16;
    text-align:center;
  }

  .home-prompt::before,
  .home-prompt::after{
    display:none;
  }

  .pinned{
    grid-template-columns:1fr;
    height:auto;
  }

  .pinned-media{
    width:100%;
    height:auto;
    aspect-ratio:3/2;
  }

  .pinned-copy{
    padding:20px 20px 22px;
    border-top:1px solid rgba(240,189,86,.66);
  }

  .pinned h2{
    font-size:27px;
    line-height:1.08;
  }

  .kicker{
    color:#F5CB70;
  }

  .tag,.chip{
    border-color:rgba(240,189,86,.76);
    color:#EFD9A8;
  }

  .filters button{
    border-color:rgba(240,189,86,.70);
  }

  .cards,.related{
    grid-template-columns:1fr;
  }

  .card{
    border-color:rgba(240,189,86,.88);
  }

  .card .enter-btn,
  .main-enter{
    background:linear-gradient(180deg,#FFE99F 0%,#F6C75F 55%,#EAA83C 100%);
    border-color:#FFE083;
    color:#1E1404;
    box-shadow:0 5px 18px rgba(244,195,94,.22);
  }

  .status-badge{
    color:#211504;
    background:linear-gradient(135deg,#FFF4B2,#F3C653);
    border-color:#FFE487;
    box-shadow:0 0 16px rgba(255,214,103,.34);
  }

  .cover,
  .gallery img{
    border-color:rgba(240,189,86,.78);
  }

  .tale-cats .tag{
    border-color:rgba(240,189,86,.72);
  }

  .share-btn{
    border-color:rgba(240,189,86,.62);
    color:#E7CF9A;
  }

  .tale-head h1{
    font-size:31px;
  }

  .audio-ui{
    grid-template-columns:auto 1fr auto;
  }

  .volume-control{
    grid-column:1/-1;
    justify-content:flex-end;
  }

  .listen-box{
    grid-template-columns:1fr;
  }

  .gallery{
    grid-template-columns:1fr;
  }

  .paper{
    padding:29px 22px;
  }

  .story-text{
    font-size:18px;
  }

  .story-footer-grid{
    grid-template-columns:1fr 1fr;
  }

  .footer-quote{
    text-align:right;
    justify-self:end;
  }
}

@media(max-width:520px){
  .brand-title{
    font-size:22px;
  }

  .brand-subtitle{
    font-size:11.5px;
  }

  .langs{
    font-size:12.5px;
  }

  .top-nav{
    gap:5px;
    font-size:11.5px;
  }

  .home-prompt{
    max-width:320px;
    font-size:19px;
  }

  .filters button{
    flex:1 1 calc(50% - 8px);
  }

  .story-footer-grid{
    grid-template-columns:1fr;
  }

  .footer-feature{
    min-height:38px;
  }

  .footer-quote{
    font-size:16px;
    text-align:right;
    justify-self:end;
  }
}


/* ==========================================================
   Decorative ornaments v2.8
   Assets must exist at /tales/assets/ornaments/
   ========================================================== */

.home-prompt-wrap{
  display:grid;
  grid-template-columns:minmax(80px,1fr) auto minmax(80px,1fr);
  align-items:center;
  gap:14px;
  margin:14px 0 12px;
}
.home-prompt-wrap .home-prompt{
  margin:0;
}
.home-prompt-ornament{
  width:100%;
  max-width:240px;
  height:28px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.92;
}
.home-prompt-ornament.left{
  justify-self:end;
  background-image:url("ornaments/ornament-title-left.png");
}
.home-prompt-ornament.right{
  justify-self:start;
  background-image:url("ornaments/ornament-title-right.png");
}

/* Story cards */
.card{
  position:relative;
  overflow:hidden;
}
.card > *{
  position:relative;
  z-index:2;
}
.card-enter-wrap{
  display:flex;
  justify-content:center;
  margin:8px 0 9px;
}
.card .enter-btn,
.pinned .main-enter{
  min-width:180px;
  min-height:42px;
  padding:9px 28px;
  border:0 !important;
  background:url("ornaments/button-enter.png") center/100% 100% no-repeat !important;
  box-shadow:none !important;
  color:#241403 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
  font-family:Georgia,"Times New Roman",serif;
  font-weight:600;
}
.card .enter-btn:hover,
.pinned .main-enter:hover{
  filter:brightness(1.04);
  transform:translateY(-1px);
}

/* Bottom corner filigree on cards */
.card::before,
.card::after{
  content:"";
  position:absolute;
  bottom:0;
  width:68px;
  height:68px;
  background-repeat:no-repeat;
  background-position:bottom;
  background-size:contain;
  pointer-events:none;
  z-index:1;
  opacity:.80;
}
.card::before{
  left:0;
  background-image:url("ornaments/ornament-card-corner-left.png");
  background-position:left bottom;
}
.card::after{
  right:0;
  background-image:url("ornaments/ornament-card-corner-right.png");
  background-position:right bottom;
}

/* Footer ornament divider + graphic icons */
.footer-ornament-divider{
  width:min(620px,75vw);
  height:34px;
  margin:0 auto 5px;
  background:url("ornaments/ornament-divider-floral.png") center/contain no-repeat;
  opacity:.88;
}
.footer-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  font-size:0 !important;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}
.footer-icon-music{background-image:url("ornaments/footer-icon-music.png")}
.footer-icon-book{background-image:url("ornaments/footer-icon-book.png")}
.footer-icon-lantern{background-image:url("ornaments/footer-icon-lantern.png")}

/* Keep the star divider in reserve for now. */

@media(max-width:820px){
  .home-prompt-wrap{
    grid-template-columns:38px minmax(0,1fr) 38px;
    gap:7px;
  }
  .home-prompt-ornament{
    max-width:38px;
    height:20px;
  }
  .home-prompt-wrap .home-prompt{
    max-width:none;
    padding:0;
    font-size:20px;
    line-height:1.16;
  }
  .card::before,.card::after{
    width:55px;
    height:55px;
    opacity:.68;
  }
}
@media(max-width:520px){
  .home-prompt-wrap{
    grid-template-columns:26px minmax(0,1fr) 26px;
    gap:4px;
  }
  .home-prompt-ornament{
    max-width:26px;
    height:16px;
  }
  .home-prompt-wrap .home-prompt{
    font-size:19px;
  }
}


/* ==========================================================
   Refinements v2.9
   ========================================================== */

/* No legacy CSS lines: only the PNG title ornaments remain. */
.home-prompt::before,
.home-prompt::after{
  display:none !important;
  content:none !important;
}

/* Bring the PNG ornaments closer to the title. */
.home-prompt-wrap{
  grid-template-columns:190px auto 190px;
  justify-content:center;
  gap:8px;
}
.home-prompt-ornament{
  width:180px;
  max-width:180px;
  height:28px;
}
.home-prompt-ornament.left{justify-self:end}
.home-prompt-ornament.right{justify-self:start}

/* Buttons: exact visual centering of HTML text in button-enter.png */
.card-enter-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:8px 0 9px;
}
.card .enter-btn,
.pinned .main-enter{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  height:42px;
  min-height:42px;
  padding:0 28px 2px !important;
  line-height:1 !important;
  margin-top:0 !important;
}
.pinned .main-enter{
  height:44px;
  min-height:44px;
  margin:8px 0 8px !important;
}
.pinned-tags{
  margin:4px 0 0;
}

/* Pinned decoration: only on the text side.
   Top-right = newly uploaded asset.
   Bottom-right = existing mirrored corner.
   Nothing over the left image. */
.pinned-copy{
  position:relative;
}
.pinned-copy::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:92px;
  height:92px;
  background:url("ornaments/ornament-pinned-corner-top-right.png") right top/contain no-repeat;
  opacity:.78;
  pointer-events:none;
  z-index:3;
}
.pinned-copy-inner::after{
  content:"";
  position:absolute;
  right:-30px;
  bottom:-18px;
  width:82px;
  height:82px;
  background:url("ornaments/ornament-card-corner-right.png") right bottom/contain no-repeat;
  opacity:.70;
  pointer-events:none;
  z-index:-1;
}

/* Existing footer top border is enough; no extra horizontal dividers. */
.footer-ornament-divider,
.footer-ornament{
  display:none !important;
}

/* Preserve the quote as the right-most, two-line footer element. */
.footer-quote{
  white-space:normal;
  text-align:right;
}

@media(max-width:820px){
  .home-prompt-wrap{
    grid-template-columns:34px minmax(0,1fr) 34px;
    gap:6px;
  }
  .home-prompt-ornament{
    width:34px;
    max-width:34px;
    height:18px;
  }
  .pinned-copy::after{
    width:68px;
    height:68px;
    opacity:.62;
  }
  .pinned-copy-inner::after{
    width:62px;
    height:62px;
    right:-20px;
    bottom:-20px;
    opacity:.56;
  }
}
@media(max-width:520px){
  .home-prompt-wrap{
    grid-template-columns:24px minmax(0,1fr) 24px;
    gap:4px;
  }
  .home-prompt-ornament{
    width:24px;
    max-width:24px;
    height:14px;
  }
}


/* ==========================================================
   Corner positioning refinement v2.10
   ========================================================== */

/* Pinned card:
   both ornaments belong to the dark text panel;
   top-right and bottom-right touch the true panel corners. */
.pinned-copy{
  position:relative;
  overflow:hidden;
}
.pinned-copy::after{
  top:0 !important;
  right:0 !important;
  width:92px !important;
  height:92px !important;
  background-position:right top !important;
}
.pinned-copy-inner{
  position:relative;
  z-index:2;
}
.pinned-copy-inner::after{
  content:"";
  position:absolute;
  right:-30px !important;
  bottom:-18px !important;
  width:82px !important;
  height:82px !important;
  background:url("ornaments/ornament-card-corner-right.png") right bottom/contain no-repeat;
  opacity:0 !important; /* old misplaced pseudo-corner disabled */
  pointer-events:none;
}

/* True bottom-right pinned corner, anchored to the pinned panel itself. */
.pinned-copy::before{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:92px;
  height:92px;
  background:url("ornaments/ornament-card-corner-right.png") right bottom/contain no-repeat;
  opacity:.72;
  pointer-events:none;
  z-index:1;
}

/* Standard tale cards:
   explicit left + right bottom corners, ~20% smaller than pinned. */
.card::before,
.card::after{
  bottom:0 !important;
  width:74px !important;
  height:74px !important;
  opacity:.76 !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  pointer-events:none;
  z-index:1;
}
.card::before{
  left:0 !important;
  right:auto !important;
  background-image:url("ornaments/ornament-card-corner-left.png") !important;
  background-position:left bottom !important;
}
.card::after{
  right:0 !important;
  left:auto !important;
  background-image:url("ornaments/ornament-card-corner-right.png") !important;
  background-position:right bottom !important;
}

/* Keep card content above decorative corners. */
.card-body,
.card .tags,
.card-enter-wrap{
  position:relative;
  z-index:2;
}

/* Make enough breathing room so the corner ornaments don't collide
   with the category pills on shorter cards. */
.card-body{
  padding-bottom:14px;
}

@media(max-width:820px){
  .pinned-copy::after,
  .pinned-copy::before{
    width:70px !important;
    height:70px !important;
    opacity:.60;
  }
  .card::before,
  .card::after{
    width:58px !important;
    height:58px !important;
    opacity:.66 !important;
  }
}


/* ==========================================================
   Explicit corner elements — v2.10.2
   Fixes pseudo-element stacking/positioning issues.
   ========================================================== */

/* Restore the original dark gradient overlay on the pinned text panel.
   v2.10 had accidentally reused ::before for an ornament. */
.pinned-copy::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  width:auto !important;
  height:auto !important;
  background:linear-gradient(90deg,rgba(9,14,42,.99),rgba(9,14,42,.95) 38%,rgba(9,14,42,.70)) !important;
  opacity:1 !important;
  pointer-events:none;
}

/* Top-right pinned ornament remains on ::after. */
.pinned-copy::after{
  top:0 !important;
  right:0 !important;
  bottom:auto !important;
  left:auto !important;
  width:92px !important;
  height:92px !important;
  background:url("ornaments/ornament-pinned-corner-top-right.png") right top/contain no-repeat !important;
  opacity:.78 !important;
  z-index:4 !important;
}

/* Disable the older misplaced internal pseudo-corner. */
.pinned-copy-inner::after{
  display:none !important;
  content:none !important;
}

/* Explicit pinned bottom-right corner:
   anchored to the true bottom-right of .pinned-copy. */
.pinned-corner-bottom-right{
  position:absolute;
  right:0;
  bottom:0;
  width:92px;
  height:92px;
  background:url("ornaments/ornament-card-corner-right.png") right bottom/contain no-repeat;
  opacity:.72;
  pointer-events:none;
  z-index:4;
}

/* Disable old card pseudo-elements: they sat underneath the opaque card body. */
.card::before,
.card::after{
  display:none !important;
  content:none !important;
}

/* Explicit bottom corners on ordinary story cards.
   74 px is ~20% smaller than the 92 px pinned ornaments. */
.card-corner{
  position:absolute;
  bottom:0;
  width:74px;
  height:74px;
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
  z-index:5;
  opacity:.78;
}
.card-corner-left{
  left:0;
  background-image:url("ornaments/ornament-card-corner-left.png");
  background-position:left bottom;
}
.card-corner-right{
  right:0;
  background-image:url("ornaments/ornament-card-corner-right.png");
  background-position:right bottom;
}

/* Ensure text/buttons/pills remain above the decorative corners. */
.card-body{
  position:relative;
  z-index:2;
  padding-bottom:16px;
}
.card .tags,
.card-enter-wrap{
  position:relative;
  z-index:6;
}

@media(max-width:820px){
  .pinned-copy::after,
  .pinned-corner-bottom-right{
    width:70px !important;
    height:70px !important;
    opacity:.62 !important;
  }
  .card-corner{
    width:56px;
    height:56px;
    opacity:.68;
  }
}


/* ==========================================================
   Header + title ornament refresh v2.11
   New user-supplied PNG assets:
   ornament-divider-star-2.png      2048 × 180
   ornament-title-left-2.png         544 × 125
   ornament-title-right-2.png        544 × 125
   ========================================================== */

/* Remove the old simple line under the menu/header. */
.header-row{
  border-bottom:0 !important;
}

/* New decorative divider directly under the menu.
   The original asset is very wide and relatively tall, so it is
   intentionally compressed vertically to match the slim header divider
   visible in the reference image. */
.header-divider-wrap{
  height:34px;
  margin-top:-4px;
  margin-bottom:-5px;
  overflow:hidden;
  pointer-events:none;
}
.header-divider-ornament{
  width:100%;
  height:34px;
  background-image:url("ornaments/ornament-divider-star-2.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 34px;
  opacity:.90;
}

/* Replace the title ornaments with the new pair and move them inward. */
.home-prompt-wrap{
  grid-template-columns:170px auto 170px !important;
  justify-content:center;
  gap:5px !important;
  margin-top:8px;
}
.home-prompt-ornament{
  width:160px !important;
  max-width:160px !important;
  height:38px !important;
  background-size:contain !important;
  background-position:center !important;
  opacity:.94;
}
.home-prompt-ornament.left{
  justify-self:end;
  background-image:url("ornaments/ornament-title-left-2.png") !important;
}
.home-prompt-ornament.right{
  justify-self:start;
  background-image:url("ornaments/ornament-title-right-2.png") !important;
}

/* Mobile: divider stays subtle; title ornaments shrink so they never
   force the question into too many lines. */
@media(max-width:820px){
  .header-divider-wrap{
    height:24px;
    margin-top:-2px;
    margin-bottom:-2px;
  }
  .header-divider-ornament{
    height:24px;
    background-size:100% 24px;
  }
  .home-prompt-wrap{
    grid-template-columns:38px minmax(0,1fr) 38px !important;
    gap:4px !important;
    margin-top:8px;
  }
  .home-prompt-ornament{
    width:38px !important;
    max-width:38px !important;
    height:18px !important;
  }
}
@media(max-width:520px){
  .header-divider-wrap{
    height:20px;
  }
  .header-divider-ornament{
    height:20px;
    background-size:100% 20px;
  }
  .home-prompt-wrap{
    grid-template-columns:26px minmax(0,1fr) 26px !important;
  }
  .home-prompt-ornament{
    width:26px !important;
    max-width:26px !important;
    height:14px !important;
  }
}


/* ==========================================================
   Header divider aspect-ratio fix v2.11.1
   Preserve the PNG proportions instead of stretching it.
   Source image: 2048 × 180 (aspect ratio ≈ 11.38:1)
   ========================================================== */

.header-divider-wrap{
  height:auto !important;
  margin-top:-2px !important;
  margin-bottom:-8px !important;
  overflow:visible !important;
  display:flex;
  justify-content:center;
  align-items:center;
}

.header-divider-ornament{
  width:min(760px,72vw) !important;
  aspect-ratio:2048 / 180;
  height:auto !important;
  background-image:url("ornaments/ornament-divider-star-2.png") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  opacity:.90;
  flex:0 0 auto;
}

/* Slightly smaller on narrower screens, still without distortion. */
@media(max-width:1020px){
  .header-divider-ornament{
    width:min(650px,76vw) !important;
  }
}
@media(max-width:820px){
  .header-divider-wrap{
    margin-top:0 !important;
    margin-bottom:-4px !important;
  }
  .header-divider-ornament{
    width:min(430px,82vw) !important;
  }
}
@media(max-width:520px){
  .header-divider-ornament{
    width:min(330px,88vw) !important;
  }
}


/* Tiny spacing refinement v2.11.2:
   a little more air between the main question and pinned tale. */
.home-prompt-wrap{
  margin-bottom:16px !important;
}
@media(max-width:820px){
  .home-prompt-wrap{
    margin-bottom:14px !important;
  }
}


/* Header divider vertical nudge v2.11.3
   Move ONLY the decorative horizontal divider 13px upward.
   Other spacing remains unchanged. */
.header-divider-wrap{
  position:relative;
  top:-13px;
}

/* ==========================================================
   Static content pages v2.12
   ========================================================== */
.content-page{
  width:min(980px,100%);
  margin:18px auto 42px;
}
.content-hero{
  text-align:center;
  margin:14px auto 24px;
}
.content-hero h1{
  margin:0 0 9px;
  font:normal 34px Georgia,"Times New Roman",serif;
  color:#f0d98f;
}
.content-hero p{
  margin:0 auto;
  max-width:760px;
  color:#c8c0b2;
  font-size:16px;
  line-height:1.6;
}
.content-panel{
  padding:28px 32px;
  margin-bottom:20px;
}
.content-copy{
  color:#e9e2d6;
  font:normal 18px/1.72 Georgia,"Times New Roman",serif;
}
.content-copy p{margin:0 0 1.05em}
.content-copy p:last-child{margin-bottom:0}
.section-heading{
  margin:0 0 16px;
  color:#e7c775;
  font:normal 25px Georgia,"Times New Roman",serif;
}
.author-grid{
  display:grid;
  grid-template-columns:minmax(260px,38%) 1fr;
  gap:28px;
  align-items:start;
}
.author-image{
  width:100%;
  border-radius:13px;
  border:1px solid rgba(240,189,86,.55);
  box-shadow:0 14px 40px rgba(0,0,0,.22);
}
.author-song{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(240,189,86,.28);
}
.author-song-player{margin:14px 0}
.author-song-player audio{width:100%}
.song-lyrics{
  margin-top:12px;
  white-space:pre-wrap;
  font:normal 15px/1.58 Georgia,"Times New Roman",serif;
  color:#d7cfbf;
  background:rgba(4,9,28,.42);
  border:1px solid rgba(240,189,86,.2);
  border-radius:10px;
  padding:17px;
  max-height:420px;
  overflow:auto;
}
.follow-block{margin-top:22px}
.social-links{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:14px;
}
.social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 14px;
  border:1px solid rgba(240,189,86,.54);
  border-radius:999px;
  color:#efd58c;
  background:rgba(10,17,48,.7);
  text-decoration:none;
}
.social-link:hover{border-color:#f1c563;background:rgba(27,38,81,.82)}
.contact-card{
  display:grid;
  gap:8px;
  margin-top:18px;
  padding:17px;
  border:1px solid rgba(240,189,86,.28);
  border-radius:12px;
  background:rgba(8,14,39,.52);
}
.contact-card strong{color:#eed386}
.contact-card a{color:#efd58c}
.copyright-line{
  width:min(1200px,calc(100% - 24px));
  margin:0 auto;
  padding:11px 0 14px;
  border-top:1px solid rgba(240,189,86,.15);
  color:#8f8a82;
  text-align:center;
  font-size:11px;
  letter-spacing:.02em;
}
.worlds-page .filter-area{margin-top:20px}
.page-error{display:none;margin:14px 0;color:#e9a8a8}
@media(max-width:820px){
  .content-panel{padding:22px 20px}
  .content-hero h1{font-size:29px}
  .author-grid{grid-template-columns:1fr}
  .author-image{max-width:520px;margin:0 auto}
  .content-copy{font-size:17px}
}


/* v2.12.2 — header alignment refinement */
@media(min-width:901px){
  .header-row nav{
    position:relative;
    left:22px;
  }
}

/* v2.12.3 — home icon micro-alignment */
@media(min-width:901px){
  .header-row nav a:first-child{
    position:relative;
    left:-10px;
  }
}


/* v2.13 — true tale creation date */
.creation-date{
  display:none;
  margin:12px auto 18px;
  text-align:center;
  color:rgba(232,202,126,.78);
  font:italic 13px/1.4 Georgia,"Times New Roman",serif;
  letter-spacing:.02em;
}
@media(max-width:820px){
  .creation-date{margin:10px auto 16px;font-size:12px}
}


/* v2.13.2 — test Cambria on static content pages */
.content-copy,
.song-lyrics{
  font-family:Cambria, "Times New Roman", Georgia, serif !important;
}


/* ==========================================================
   v2.14 — home/worlds visual refinement
   ========================================================== */

/* 1 + 2. Up to 4 columns on wide screens.
   Previous gap was 13px. 25% more is 16.25px -> use 16px. */
.cards,
.related{
  gap:16px;
}
@media(min-width:1101px){
  .cards{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media(min-width:821px) and (max-width:1100px){
  .cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Keep related recommendations less crowded: max 3, but same 16px rhythm. */
.related{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* 3. Card button: move only the label 1px downward.
   Pinned button remains unchanged. */
.card .enter-btn .enter-label{
  position:relative;
  top:1px;
}

/* 4. Status label: move only the text 1px downward.
   The badge pill and decorative symbol stay in place. */
.status-badge .badge-label{
  position:relative;
  top:1px;
}

/* 5. Pinned image/card approx. 26% larger on desktop:
   405x270 -> 510x340, preserving 3:2. */
@media(min-width:821px){
  .pinned{
    height:340px;
    grid-template-columns:510px minmax(0,1fr);
  }
  .pinned-media{
    width:510px;
    height:340px;
  }
}

/* 6. At the extreme right, the old dark overlay was .70.
   Image visibility there was 30%; +25% visibility = 37.5%,
   therefore overlay alpha becomes .625. */
.pinned-copy::before{
  background:linear-gradient(
    90deg,
    rgba(9,14,42,.99),
    rgba(9,14,42,.95) 38%,
    rgba(9,14,42,.625)
  );
}

/* 7. Make “Choose me a tale” visually distinct, but not loud. */
.filters .random-filter{
  position:relative;
  border-color:rgba(244,204,112,.78);
  color:#f1d486;
  font-weight:600;
  background:
    linear-gradient(180deg,rgba(244,204,112,.16),rgba(17,35,73,.88));
  box-shadow:
    0 0 0 1px rgba(244,204,112,.08) inset,
    0 4px 14px rgba(0,0,0,.16),
    0 0 18px rgba(231,184,94,.10);
}
.filters .random-filter::before{
  content:"✦";
  margin-right:6px;
  color:#f4cf72;
}
.filters .random-filter:hover{
  border-color:#f2cf78;
  color:#ffe3a0;
  background:
    linear-gradient(180deg,rgba(244,204,112,.23),rgba(20,42,84,.94));
  box-shadow:
    0 0 0 1px rgba(244,204,112,.12) inset,
    0 5px 18px rgba(0,0,0,.20),
    0 0 22px rgba(231,184,94,.16);
}

/* 8. Share area: more noticeable without turning into social-media chrome. */
.share-section{
  margin:27px 0 8px;
  color:#c9ae78;
}
.share-label{
  margin-bottom:12px;
  font-size:15px;
  font-weight:600;
  color:#dcc38c;
}
.share-actions{
  gap:10px;
}
.share-btn{
  min-height:38px;
  padding:9px 16px;
  border-color:rgba(231,184,94,.52);
  color:#e5ce9d;
  font-size:14px;
  background:rgba(10,17,48,.82);
}
.share-btn:hover{
  color:#ffdc82;
  border-color:#ffd77a;
  background:rgba(18,29,67,.90);
}

/* Existing mobile design stays one-column. */
@media(max-width:820px){
  .cards,
  .related{
    grid-template-columns:1fr;
    gap:16px;
  }
}


/* ==========================================================
   v2.14.1 — wider desktop canvas + card spacing refinement
   ========================================================== */

/* 1. Use more of large monitors.
   Old site max-width: 1200px. New: 1440px. */
:root{
  --max:1440px;
}

/* 2. Card distance: 16px -> 18px. */
.cards,
.related{
  gap:18px;
}

/* Four columns only when there is genuinely enough width.
   This keeps the cards from becoming cramped on medium desktop. */
@media(min-width:1300px){
  .cards{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media(min-width:821px) and (max-width:1299px){
  .cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Related cards remain max 3. */
.related{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* 3. Random tale button: keep only the star already present in the label. */
.filters .random-filter::before{
  content:none !important;
  display:none !important;
}

/* 4. Make the faint image in the right side of the pinned card clearly
   more visible, especially toward the far right. */
.pinned-copy-bg{
  opacity:.52;
}
.pinned-copy::before{
  background:linear-gradient(
    90deg,
    rgba(9,14,42,.99) 0%,
    rgba(9,14,42,.94) 32%,
    rgba(9,14,42,.76) 62%,
    rgba(9,14,42,.45) 100%
  );
}

/* Mobile stays unchanged. */
@media(max-width:820px){
  .cards,
  .related{
    grid-template-columns:1fr;
    gap:16px;
  }
}


/* ==========================================================
   v2.14.2 — section breathing room on Home + Worlds
   ========================================================== */

/* Heading between filters and first row of tale cards. */
.worlds-section-heading{
  margin:22px 0 16px;
  text-align:center;
  color:#e7c775;
  font:normal 24px/1.2 Georgia,"Times New Roman",serif;
}
.worlds-section-heading::before,
.worlds-section-heading::after{
  content:"";
  display:inline-block;
  width:44px;
  height:1px;
  margin:0 12px 6px;
  vertical-align:middle;
  background:linear-gradient(90deg,transparent,rgba(231,199,117,.7));
}
.worlds-section-heading::after{
  background:linear-gradient(90deg,rgba(231,199,117,.7),transparent);
}

/* A little more air after the final row of cards before the footer separator. */
.cards{
  margin-bottom:10px;
}

/* Apply the same rhythm on the dedicated Worlds page. */
.worlds-page .worlds-section-heading{
  margin-top:24px;
}

/* Mobile: keep it compact but present. */
@media(max-width:820px){
  .worlds-section-heading{
    margin:18px 0 13px;
    font-size:21px;
  }
  .worlds-section-heading::before,
  .worlds-section-heading::after{
    width:24px;
    margin-left:8px;
    margin-right:8px;
  }
  .cards{
    margin-bottom:10px;
  }
}


/* ==========================================================
   v2.14.3 — Worlds width + tale title ornaments
   ========================================================== */

/* 1. Dedicated Worlds page should use the same wide canvas as Home.
   .content-page is normally capped at 980px; only Worlds escapes that cap. */
.worlds-page{
  width:100% !important;
  max-width:none !important;
}

/* 4. Tale title with the same left/right ornaments used around the Home prompt. */
.tale-title-wrap{
  display:grid;
  grid-template-columns:minmax(80px,170px) auto minmax(80px,170px);
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0 auto 14px;
}
.tale-title-wrap .tale-title-ornament{
  display:block;
  width:160px;
  height:38px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.94;
}
.tale-title-wrap .tale-title-ornament.left{
  justify-self:end;
  background-image:url("ornaments/ornament-title-left-2.png");
}
.tale-title-wrap .tale-title-ornament.right{
  justify-self:start;
  background-image:url("ornaments/ornament-title-right-2.png");
}
.tale-title-wrap #taleTitle{
  margin:0;
  text-align:center;
}

@media(max-width:820px){
  .tale-title-wrap{
    grid-template-columns:38px minmax(0,1fr) 38px;
    gap:5px;
    margin-bottom:12px;
  }
  .tale-title-wrap .tale-title-ornament{
    width:38px;
    height:18px;
  }
}
@media(max-width:520px){
  .tale-title-wrap{
    grid-template-columns:26px minmax(0,1fr) 26px;
  }
  .tale-title-wrap .tale-title-ornament{
    width:26px;
    height:14px;
  }
}


/* v2.15 — optional audio download */
.audio-download-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 14px;
  border:1px solid rgba(231,184,94,.48);
  border-radius:9px;
  color:#e5ce9d;
  background:rgba(10,17,48,.78);
  text-decoration:none;
  font-size:13px;
  white-space:nowrap;
}
.audio-download-btn:hover{
  color:#ffdc82;
  border-color:#ffd77a;
  background:rgba(18,29,67,.9);
}


/* ==========================================================
   v2.15.3 — tale title gold refinement
   ========================================================== */
.tale-title-wrap #taleTitle,
.tale-head #taleTitle{
  color:#e8bd63 !important;
  text-shadow:0 1px 0 rgba(40,24,5,.35);
}


/* ==========================================================
   v2.15.4 — make music/video discovery unmistakable
   ========================================================== */

/* VIDEO: replace the tiny upper-right play control with one central CTA.
   The uploaded PNG is expected at:
   assets/ornaments/video-play-ornament.png
   Only the ornament/button portion is used as an image; the text remains
   real HTML so BG/RU/EN can be localized. */
.cover-play{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:5;
  width:min(42vw,340px) !important;
  height:auto !important;
  min-height:205px;
  border:0 !important;
  border-radius:20px !important;
  background:rgba(4,10,27,.16) !important;
  display:none;
  grid-template-rows:142px auto auto;
  place-items:center;
  align-content:center;
  padding:8px 12px 13px !important;
  box-shadow:none !important;
  cursor:pointer;
}
.cover-play::before{
  content:none !important;
  display:none !important;
}
.video-play-ornament{
  width:min(100%,330px);
  height:142px;
  display:block;
  background-image:url("ornaments/video-play-ornament.png");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% auto;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.28));
}
.video-play-label{
  display:block;
  margin-top:-3px;
  color:#e8bd63;
  font:normal 29px/1.05 Cambria,Georgia,"Times New Roman",serif;
  text-shadow:0 2px 5px rgba(0,0,0,.82);
  white-space:nowrap;
}
.video-play-sub{
  display:block;
  margin-top:7px;
  color:#d9ae58;
  font:normal 16px/1.1 Cambria,Georgia,"Times New Roman",serif;
  text-shadow:0 2px 4px rgba(0,0,0,.88);
  white-space:nowrap;
}
.cover-play:hover{
  background:rgba(4,10,27,.26) !important;
}
.cover-play:hover .video-play-ornament{
  filter:
    brightness(1.06)
    drop-shadow(0 0 10px rgba(235,188,93,.24))
    drop-shadow(0 3px 8px rgba(0,0,0,.30));
}

/* MUSIC: treble clef + explicit label.  The label starts over the
   beginning knob of the seek bar, NOT over the play button. */
.listen-box{
  grid-template-columns:48px minmax(0,1fr) auto !important;
  gap:13px !important;
  align-items:center;
  padding:12px 16px !important;
}
.audio-music-icon{
  width:42px;
  height:62px;
  display:block;
  background:url("ornaments/footer-icon-music.png") center/contain no-repeat;
}
.audio-stack{
  min-width:0;
}
.audio-label{
  margin:0 0 4px 48px; /* 38px play button + 10px grid gap = seek-bar start */
  color:#e8bd63;
  font:600 14px/1.15 Cambria,Georgia,"Times New Roman",serif;
  white-space:nowrap;
}
.listen-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.listen-box > audio{
  display:none;
}

/* The player remains on one line on normal desktop. */
.audio-ui{
  grid-template-columns:auto minmax(120px,1fr) auto auto;
}

@media(max-width:820px){
  .cover-play{
    width:min(62vw,300px) !important;
    min-height:180px;
    grid-template-rows:120px auto auto;
  }
  .video-play-ornament{height:120px}
  .video-play-label{font-size:24px}
  .video-play-sub{font-size:14px}

  .listen-box{
    grid-template-columns:40px minmax(0,1fr) !important;
  }
  .audio-music-icon{
    width:34px;
    height:52px;
  }
  .listen-actions{
    grid-column:1/-1;
    justify-content:flex-end;
  }
}

@media(max-width:520px){
  .cover-play{
    width:min(76vw,270px) !important;
    min-height:160px;
    grid-template-rows:104px auto auto;
  }
  .video-play-ornament{height:104px}
  .video-play-label{font-size:21px}
  .video-play-sub{font-size:13px}

  .audio-label{
    margin-left:0;
    white-space:normal;
  }
  .audio-ui{
    grid-template-columns:auto minmax(80px,1fr) auto;
  }
  .volume-control{
    grid-column:1/-1;
  }
}


/* ==========================================================
   v2.15.5 — crop baked-in text from video ornament PNG
   ========================================================== */
.video-play-ornament{
  height:112px !important;
  background-size:330px auto !important;
  background-position:center top !important;
  overflow:hidden;
}
.cover-play{
  grid-template-rows:112px auto auto !important;
  min-height:178px !important;
}
.video-play-label{
  margin-top:1px !important;
}

@media(max-width:820px){
  .video-play-ornament{
    height:101px !important;
    background-size:300px auto !important;
  }
  .cover-play{
    grid-template-rows:101px auto auto !important;
    min-height:166px !important;
  }
}
@media(max-width:520px){
  .video-play-ornament{
    height:91px !important;
    background-size:270px auto !important;
  }
  .cover-play{
    grid-template-rows:91px auto auto !important;
    min-height:150px !important;
  }
}


/* ==========================================================
   v2.15.6 — video ornament must be button-only (no baked text)
   ========================================================== */
.video-play-ornament{
  width:min(100%,286px) !important;
  height:86px !important;
  background-size:286px auto !important;
  background-position:center top !important;
  overflow:hidden !important;
}
.cover-play{
  grid-template-rows:86px auto auto !important;
  min-height:152px !important;
  width:min(40vw,300px) !important;
  padding:6px 10px 10px !important;
}
.video-play-label{
  margin-top:2px !important;
}
.video-play-sub{
  margin-top:5px !important;
}
@media(max-width:820px){
  .video-play-ornament{
    width:min(100%,258px) !important;
    height:78px !important;
    background-size:258px auto !important;
  }
  .cover-play{
    grid-template-rows:78px auto auto !important;
    min-height:142px !important;
    width:min(60vw,278px) !important;
  }
}
@media(max-width:520px){
  .video-play-ornament{
    width:min(100%,232px) !important;
    height:70px !important;
    background-size:232px auto !important;
  }
  .cover-play{
    grid-template-rows:70px auto auto !important;
    min-height:128px !important;
    width:min(72vw,246px) !important;
  }
  .video-play-label{font-size:20px !important;}
  .video-play-sub{font-size:12px !important;}
}


/* ==========================================================
   v2.15.7 — move localized video CTA text 17px downward
   ========================================================== */
.video-play-label,
.video-play-sub{
  position:relative;
  top:17px;
}


/* ==========================================================
   v2.15.8 — move the VIDEO TEXT PANEL together with the text
   ========================================================== */

/* Undo the v2.15.7 relative shift: it moved only the letters and left
   the translucent field behind.  Now the spacing is part of the layout. */
.video-play-label,
.video-play-sub{
  position:relative;
  top:auto !important;
  z-index:2;
}

/* The decorative PNG stays where it is. */
.video-play-ornament{
  position:relative;
  z-index:2;
}

/* The old background covered the whole CTA and could not follow the text.
   Make the button itself transparent and draw a separate panel only
   behind the localized text block. */
.cover-play{
  background:transparent !important;
  min-height:169px !important;
  grid-template-rows:86px auto auto !important;
  overflow:visible !important;
}

.cover-play::after{
  content:"";
  position:absolute;
  left:50%;
  top:101px;                    /* panel follows the text downward */
  transform:translateX(-50%);
  width:100%;
  height:68px;                  /* fully includes title + subtitle */
  border-radius:17px;
  background:rgba(4,10,27,.32);
  box-shadow:
    inset 0 0 0 1px rgba(229,184,93,.05),
    0 5px 18px rgba(0,0,0,.10);
  pointer-events:none;
  z-index:1;
}

.video-play-label{
  margin-top:19px !important;   /* old 2px + requested 17px */
}

.video-play-sub{
  margin-top:5px !important;
  padding-bottom:4px;
}

.cover-play:hover{
  background:transparent !important;
}
.cover-play:hover::after{
  background:rgba(4,10,27,.40);
}

@media(max-width:820px){
  .cover-play{
    min-height:157px !important;
    grid-template-rows:78px auto auto !important;
  }
  .cover-play::after{
    top:93px;
    height:64px;
  }
  .video-play-label{
    margin-top:19px !important;
  }
}

@media(max-width:520px){
  .cover-play{
    min-height:143px !important;
    grid-template-rows:70px auto auto !important;
  }
  .cover-play::after{
    top:85px;
    height:58px;
    border-radius:14px;
  }
  .video-play-label{
    margin-top:19px !important;
  }
}


/* ==========================================================
   v2.15.9 — unified video CTA panel (ornament + text together)
   ========================================================== */

/* Final override:
   - remove the separate text-only panel from v2.15.8
   - treat ornament + text as one single button
   - keep the requested lower text position
   - make the whole CTA read as a single actionable control */
.cover-play{
  background:rgba(5,12,28,.40) !important;
  border:1px solid rgba(231,184,94,.14) !important;
  border-radius:18px !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.26),
    inset 0 0 0 1px rgba(255,255,255,.02) !important;
  width:min(42vw,345px) !important;
  min-height:174px !important;
  grid-template-rows:86px auto auto !important;
  padding:9px 12px 14px !important;
  overflow:hidden !important;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.cover-play::after{
  content:none !important;
  display:none !important;
}
.video-play-ornament{
  width:min(100%,286px) !important;
  height:86px !important;
  background-size:286px auto !important;
  background-position:center top !important;
  margin-top:0 !important;
  position:relative;
  z-index:2;
}
.video-play-label{
  margin-top:18px !important;
  color:#e8bd63 !important;
  position:relative;
  z-index:2;
}
.video-play-sub{
  margin-top:6px !important;
  padding-bottom:2px !important;
  position:relative;
  z-index:2;
}
.cover-play:hover{
  background:rgba(5,12,28,.50) !important;
}
.cover-play:hover .video-play-ornament{
  filter:
    brightness(1.04)
    drop-shadow(0 0 10px rgba(235,188,93,.18))
    drop-shadow(0 3px 8px rgba(0,0,0,.30));
}

@media(max-width:820px){
  .cover-play{
    width:min(60vw,320px) !important;
    min-height:164px !important;
    grid-template-rows:78px auto auto !important;
    padding:9px 11px 13px !important;
  }
  .video-play-ornament{
    width:min(100%,258px) !important;
    height:78px !important;
    background-size:258px auto !important;
  }
  .video-play-label{font-size:24px !important;margin-top:17px !important;}
  .video-play-sub{font-size:14px !important;}
}

@media(max-width:520px){
  .cover-play{
    width:min(74vw,282px) !important;
    min-height:148px !important;
    grid-template-rows:70px auto auto !important;
    padding:8px 10px 12px !important;
  }
  .video-play-ornament{
    width:min(100%,232px) !important;
    height:70px !important;
    background-size:232px auto !important;
  }
  .video-play-label{font-size:20px !important;margin-top:15px !important;}
  .video-play-sub{font-size:12px !important;}
}


/* ==========================================================
   v2.15.10 — fine vertical tuning of the unified VIDEO CTA
   User-measured correction on desktop:
   - text block: 30 px upward
   - bottom edge of dark field: 30 px upward
   - ornament remains fixed
   ========================================================== */

/* Move only the localized copy upward. */
.video-cta-copy{
  transform:translateY(-30px) !important;
}

/* Shorten the common dark button field from the bottom.
   Because the CTA is vertically centered, compensate with a +15 px
   button translation so the TOP edge and the ornament remain visually
   in the same place while only the BOTTOM edge rises by 30 px. */
.video-cta{
  padding-bottom:0 !important;
  min-height:0 !important;
  transform:translate(-50%, calc(-50% - 15px)) !important;
}

/* Remove the 30 px from the lower part of the field without changing
   the ornament image dimensions. */
.video-cta::after{
  content:"";
  display:block;
  height:0;
  margin-bottom:-30px;
}

/* Desktop/local measurement is the requested reference.
   Use proportionally smaller corrections on narrow screens. */
@media(max-width:820px){
  .video-cta-copy{
    transform:translateY(-24px) !important;
  }
  .video-cta{
    transform:translate(-50%, calc(-50% - 12px)) !important;
  }
  .video-cta::after{
    margin-bottom:-24px;
  }
}

@media(max-width:520px){
  .video-cta-copy{
    transform:translateY(-18px) !important;
  }
  .video-cta{
    transform:translate(-50%, calc(-50% - 9px)) !important;
  }
  .video-cta::after{
    margin-bottom:-18px;
  }
}


/* Exact final geometry override */
@media(min-width:821px){
  .video-cta{
    gap:0 !important;
    padding-top:14px !important;
    padding-left:22px !important;
    padding-right:22px !important;
    padding-bottom:0 !important;
  }
  .video-cta-copy{
    margin-bottom:-30px !important;
  }
}


/* ==========================================================
   v2.15.11 — final clean VIDEO CTA geometry
   ========================================================== */

/*
   IMPORTANT:
   - one common dark button
   - whole PNG is shown as <img>, never as a cropped background
   - text is below the whole ornament
   - small free space above the ornament
   - field is slightly narrower left/right
*/

.video-cta-final{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:5;

  display:none;
  grid-template-columns:1fr;
  justify-items:center;
  align-items:start;

  /* Narrower field, while still leaving room for the full ornament */
  width:min(34vw,332px);
  min-width:292px;

  /* small breathing room above, comfortable space below */
  padding:10px 12px 14px;

  border:1px solid rgba(232,189,96,.18);
  border-radius:20px;
  background:rgba(4,10,28,.40);
  box-shadow:
    0 8px 28px rgba(0,0,0,.16),
    inset 0 0 0 1px rgba(255,220,139,.025);

  color:#e8bd63;
  cursor:pointer;
  overflow:visible;

  font:inherit;
  appearance:none;
  -webkit-appearance:none;
}

/* Full ornament: no fixed height, no crop, no background slicing */
.video-cta-final-ornament{
  display:block;
  width:min(100%,308px);
  height:auto;
  max-width:100%;
  max-height:none;
  object-fit:contain;
  margin:0 auto 5px;
  pointer-events:none;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.28));
}

/* Text is structurally AFTER the image, so it always stays below it */
.video-cta-final-label{
  display:block;
  margin:0;
  color:#e8bd63;
  font:normal 27px/1.08 Cambria,Georgia,"Times New Roman",serif;
  text-align:center;
  white-space:nowrap;
  text-shadow:0 2px 5px rgba(0,0,0,.78);
  pointer-events:none;
}

.video-cta-final-sub{
  display:block;
  margin:6px 0 0;
  color:#d9ae58;
  font:normal 14.5px/1.12 Cambria,Georgia,"Times New Roman",serif;
  text-align:center;
  white-space:nowrap;
  text-shadow:0 2px 4px rgba(0,0,0,.82);
  pointer-events:none;
}

.video-cta-final:hover{
  background:rgba(4,10,28,.48);
  border-color:rgba(232,189,96,.28);
}

.video-cta-final:hover .video-cta-final-ornament{
  filter:
    brightness(1.04)
    drop-shadow(0 0 8px rgba(235,188,93,.16))
    drop-shadow(0 3px 7px rgba(0,0,0,.30));
}

@media(max-width:820px){
  .video-cta-final{
    width:min(58vw,310px);
    min-width:255px;
    padding:9px 11px 13px;
    border-radius:18px;
  }
  .video-cta-final-ornament{
    width:min(100%,286px);
    margin-bottom:4px;
  }
  .video-cta-final-label{font-size:23px}
  .video-cta-final-sub{font-size:13.5px}
}

@media(max-width:520px){
  .video-cta-final{
    width:min(76vw,278px);
    min-width:0;
    padding:8px 10px 12px;
    border-radius:16px;
  }
  .video-cta-final-ornament{
    width:min(100%,254px);
    margin-bottom:4px;
  }
  .video-cta-final-label{font-size:20px}
  .video-cta-final-sub{font-size:12px}
}

/* Keep the music title aligned above the yellow seek-bar knob. */
.audio-label{
  margin-left:48px !important;
}

/* ==========================================================
   v2.15.12 — precise CTA vertical tuning requested on screen
   ========================================================== */

/*
  Correct structural fix:
  - ornament and top edge stay exactly where they are;
  - the first text line receives a -28px top margin;
  - because this is real layout spacing (not transform), BOTH text lines
    move upward and the auto-height of the common dark field becomes
    28px shorter at the bottom.
*/
.video-cta-final-label{
  margin-top:-28px !important;
  transform:none !important;
}

.video-cta-final-sub{
  margin-top:6px !important;
  margin-bottom:0 !important;
  transform:none !important;
}

/* Keep the original lower breathing room; the container itself is now
   28px shorter because the text block occupies 28px less vertical layout. */
.video-cta-final{
  margin-bottom:0 !important;
}

@media(max-width:820px){
  .video-cta-final-label{
    margin-top:-28px !important;
    transform:none !important;
  }
  .video-cta-final-sub{
    margin-top:6px !important;
    margin-bottom:0 !important;
    transform:none !important;
  }
}

@media(max-width:520px){
  .video-cta-final-label{
    margin-top:-28px !important;
    transform:none !important;
  }
  .video-cta-final-sub{
    margin-top:6px !important;
    margin-bottom:0 !important;
    transform:none !important;
  }
}


/* ==========================================================
   v2.15.40 — Search + media shortcuts on Home
   ========================================================== */

/* Right column of filter area:
   search field first, media-room shortcuts underneath. */
.search-tools{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:7px;
}

.search-row{
  display:flex;
  justify-content:flex-end;
}

/* Same rounded language as the Video wall button,
   intentionally different from the category buttons (10px). */
.search{
  border-radius:16px;
}

.media-buttons{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.media-buttons .video-room-filter,
.media-buttons .music-room-filter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:6px 12px;
  border:1px solid rgba(239,190,83,.78);
  border-radius:16px;
  color:#f3d47d;
  text-decoration:none;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  background:
    linear-gradient(180deg,rgba(240,190,80,.12),rgba(8,22,51,.94));
  box-shadow:
    inset 0 0 0 1px rgba(255,220,130,.06),
    0 0 16px rgba(231,184,94,.08);
  transition:
    border-color .18s ease,
    color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.media-buttons .video-room-filter:hover,
.media-buttons .music-room-filter:hover{
  border-color:#f5d27d;
  color:#ffe5a0;
  background:
    linear-gradient(180deg,rgba(240,190,80,.20),rgba(12,31,66,.96));
  box-shadow:
    inset 0 0 0 1px rgba(255,220,130,.10),
    0 0 20px rgba(231,184,94,.14);
}

@media(max-width:820px){
  .media-buttons .video-room-filter,
.media-buttons .music-room-filter{
    min-height:32px;
    padding:6px 10px;
    font-size:13px;
  }
}


/* ==========================================================
   HOME v2.15.57 — media shortcuts in one right-aligned row
   ========================================================== */
@media (min-width:821px){
  body[data-page="home"] .filter-area{
    grid-template-columns:minmax(0,1fr) 320px;
  }

  body[data-page="home"] .media-buttons{
    flex-wrap:nowrap;
    justify-content:flex-end;
    width:100%;
  }
}


/* ==========================================================
   v2.15.60 — tale audio player, compact visual redesign
   Order: play medallion -> treble clef -> visualizer slot -> controls -> TTS.
   The visualizer canvas is intentionally only a reserved slot for now;
   its final model will be selected separately.
   ========================================================== */
body[data-page="tale"] #listenBox.listen-box-v2{
  position:relative;
  grid-template-columns:76px 44px minmax(0,1fr) auto !important;
  gap:10px !important;
  align-items:center;
  min-height:112px;
  padding:10px 14px !important;
  border:1px solid rgba(240,189,86,.76);
  border-radius:16px;
  background:
    radial-gradient(circle at 54% 34%,rgba(24,60,125,.18),transparent 34%),
    linear-gradient(180deg,rgba(6,18,47,.96),rgba(4,11,30,.97));
  box-shadow:inset 0 0 0 1px rgba(240,189,86,.10),0 12px 28px rgba(0,0,0,.18);
  overflow:hidden;
}
body[data-page="tale"] #listenBox.listen-box-v2::before,
body[data-page="tale"] #listenBox.listen-box-v2::after{
  content:"✦";
  position:absolute;
  top:5px;
  color:rgba(240,189,86,.72);
  font-size:11px;
  pointer-events:none;
}
body[data-page="tale"] #listenBox.listen-box-v2::before{left:8px}
body[data-page="tale"] #listenBox.listen-box-v2::after{right:8px}

body[data-page="tale"] .audio-play-cell{
  display:grid;
  place-items:center;
}
body[data-page="tale"] .audio-medallion-btn{
  position:relative;
  width:70px !important;
  height:66px !important;
  min-width:70px;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  background:transparent !important;
  cursor:pointer;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.34));
}
body[data-page="tale"] .audio-medallion-btn img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
body[data-page="tale"] .audio-toggle-symbol{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  color:#f2c75f;
  font:700 21px/1 Arial,sans-serif;
  text-shadow:0 1px 2px #321d05,0 0 8px rgba(255,204,91,.18);
  transform:translateX(1px);
  pointer-events:none;
}
body[data-page="tale"] .audio-medallion-btn:hover{
  filter:brightness(1.07) drop-shadow(0 0 8px rgba(76,145,255,.16)) drop-shadow(0 3px 7px rgba(0,0,0,.34));
}

body[data-page="tale"] .audio-clef{
  display:grid;
  place-items:center;
  align-self:stretch;
  color:#edbd59;
  font-family:"Segoe UI Symbol","Cambria Math",Georgia,serif;
  font-size:43px;
  line-height:1;
  text-shadow:0 1px 2px #2a1604,0 0 8px rgba(239,190,84,.14);
  border-left:1px solid rgba(240,189,86,.18);
  border-right:1px solid rgba(240,189,86,.18);
}
body[data-page="tale"] .audio-stack-v2{min-width:0}
body[data-page="tale"] .audio-stack-v2 .audio-label{
  margin:0 0 3px 0 !important;
  text-align:center;
  color:#eac56e;
  font:600 15px/1.1 Cambria,Georgia,"Times New Roman",serif;
  letter-spacing:.01em;
}
body[data-page="tale"] .audio-viz-slot{
  position:relative;
  height:38px;
  min-height:38px;
  overflow:hidden;
  border-bottom:1px solid rgba(240,189,86,.16);
  background:radial-gradient(ellipse at center bottom,rgba(44,95,173,.11),transparent 68%);
}
body[data-page="tale"] .audio-viz-slot::after{
  content:"";
  position:absolute;
  left:4%;right:4%;bottom:2px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,189,86,.18) 18%,rgba(240,189,86,.28) 50%,rgba(240,189,86,.18) 82%,transparent);
}
body[data-page="tale"] #taleAudioVisualizer{
  display:block;
  width:100%;
  height:100%;
}
body[data-page="tale"] .audio-ui-v2{
  display:grid !important;
  grid-template-columns:minmax(120px,1fr) 86px auto !important;
  gap:10px !important;
  align-items:center;
  margin-top:4px;
}
body[data-page="tale"] .audio-range,
body[data-page="tale"] .volume-range{
  accent-color:#e1ad43;
}
body[data-page="tale"] .audio-time{
  min-width:86px;
  text-align:center;
  color:#d5be8a;
}
body[data-page="tale"] .volume-control{
  min-width:120px;
}
body[data-page="tale"] .volume-range{width:82px}
body[data-page="tale"] .listen-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-left:10px;
  border-left:1px solid rgba(240,189,86,.16);
}
body[data-page="tale"] .tts-btn{
  min-width:184px;
  padding:10px 16px;
  border:1px solid rgba(225,184,97,.34);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(13,27,56,.82),rgba(7,15,36,.88));
  color:#a99c87;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}

@media(max-width:820px){
  body[data-page="tale"] #listenBox.listen-box-v2{
    grid-template-columns:64px 38px minmax(0,1fr) !important;
    min-height:108px;
    padding:9px 10px !important;
    gap:8px !important;
  }
  body[data-page="tale"] .audio-medallion-btn{
    width:60px !important;height:58px !important;min-width:60px;
  }
  body[data-page="tale"] .audio-toggle-symbol{font-size:18px}
  body[data-page="tale"] .audio-clef{font-size:36px}
  body[data-page="tale"] .audio-viz-slot{height:34px;min-height:34px}
  body[data-page="tale"] .listen-actions{
    grid-column:1/-1;
    border-left:0;
    border-top:1px solid rgba(240,189,86,.13);
    padding:7px 0 0;
    justify-content:flex-end;
  }
}

@media(max-width:560px){
  body[data-page="tale"] #listenBox.listen-box-v2{
    grid-template-columns:58px 34px minmax(0,1fr) !important;
    gap:6px !important;
  }
  body[data-page="tale"] .audio-medallion-btn{width:54px !important;height:52px !important;min-width:54px}
  body[data-page="tale"] .audio-clef{font-size:31px}
  body[data-page="tale"] .audio-stack-v2 .audio-label{font-size:13px;text-align:left}
  body[data-page="tale"] .audio-viz-slot{height:30px;min-height:30px}
  body[data-page="tale"] .audio-ui-v2{
    grid-template-columns:minmax(70px,1fr) 76px !important;
    gap:7px !important;
  }
  body[data-page="tale"] .audio-time{min-width:76px;font-size:11px}
  body[data-page="tale"] .volume-control{
    grid-column:1/-1;
    justify-content:flex-end;
    min-width:0;
  }
  body[data-page="tale"] .volume-range{width:82px}
  body[data-page="tale"] .tts-btn{min-width:0;padding:8px 13px;font-size:12px}
}


/* ==========================================================
   v2.15.61 — tale audio player polish
   - real pinned corner ornaments in the two upper corners
   - project treble-clef icon
   - live Spark visualizer canvas (JS)
   Palette: #254c8d -> #eaa00b -> #fafb9d
   ========================================================== */
body[data-page="tale"] #listenBox.listen-box-v2::before,
body[data-page="tale"] #listenBox.listen-box-v2::after{
  content:"" !important;
  position:absolute;
  z-index:4;
  top:-2px;
  width:48px;
  height:48px;
  color:transparent;
  font-size:0;
  background:url("ornaments/ornament-pinned-corner-top-left.png") center/contain no-repeat;
  opacity:.92;
  pointer-events:none;
}
body[data-page="tale"] #listenBox.listen-box-v2::before{
  left:-2px;
  transform:none;
}
body[data-page="tale"] #listenBox.listen-box-v2::after{
  right:-2px;
  transform:scaleX(-1);
}

body[data-page="tale"] .audio-clef{
  overflow:hidden;
  padding:4px 2px;
  color:transparent !important;
  font-size:0 !important;
}
body[data-page="tale"] .audio-clef img{
  display:block;
  width:38px;
  height:52px;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.30));
}

body[data-page="tale"] .audio-viz-slot{
  height:40px;
  min-height:40px;
  background:
    radial-gradient(ellipse at center bottom,rgba(37,76,141,.12),transparent 72%);
  border-bottom:1px solid rgba(240,189,86,.12);
}
body[data-page="tale"] .audio-viz-slot::after{
  display:none !important;
}
body[data-page="tale"] #taleAudioVisualizer{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}

@media(max-width:820px){
  body[data-page="tale"] #listenBox.listen-box-v2::before,
  body[data-page="tale"] #listenBox.listen-box-v2::after{
    width:40px;height:40px;
  }
  body[data-page="tale"] .audio-clef img{width:32px;height:46px}
  body[data-page="tale"] .audio-viz-slot{height:34px;min-height:34px}
}
@media(max-width:560px){
  body[data-page="tale"] #listenBox.listen-box-v2::before,
  body[data-page="tale"] #listenBox.listen-box-v2::after{
    width:34px;height:34px;
  }
  body[data-page="tale"] .audio-clef img{width:29px;height:40px}
  body[data-page="tale"] .audio-viz-slot{height:30px;min-height:30px}
}