:root{
  --roxo:#1d1233; --roxo2:#2e1c52; --ouro:#f2b84b; --ouro2:#ffe3a1;
  --laranja:#f08a1c; --vinho:#7a1f2b; --perg:#f6e7c4; --perg2:#ead0a0; --tinta:#3b2412;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--perg); font:15px/1.55 Verdana,Tahoma,Geneva,sans-serif;
  background:var(--roxo);
  background-image:
    radial-gradient(circle at 20% 10%, #5b2e8f55 0, transparent 40%),
    radial-gradient(circle at 80% 90%, #f08a1c33 0, transparent 45%);
  background-attachment:fixed;
  cursor:default;
}
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.7;
  background-image:
   radial-gradient(2px 2px at 20px 30px,#fff,transparent),
   radial-gradient(2px 2px at 90px 120px,#ffe3a1,transparent),
   radial-gradient(1px 1px at 160px 60px,#fff,transparent),
   radial-gradient(2px 2px at 220px 180px,#fff,transparent),
   radial-gradient(1px 1px at 60px 200px,#ffe3a1,transparent);
  background-size:260px 240px; animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.35}to{opacity:.9}}
#wrap{position:relative;z-index:1;max-width:1000px;margin:12px auto;padding:0 8px}
a{color:var(--ouro2)} a:hover{color:#fff;text-decoration:none;background:#7a1f2b}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;margin:.2em 0 .4em}
h1{font-size:30px;color:var(--ouro);text-shadow:2px 2px 0 #000,0 0 12px #f08a1c}
h2{font-size:22px;color:var(--ouro);text-shadow:1px 1px 0 #000;border-bottom:2px dotted var(--ouro);padding-bottom:3px}

/* header */
#top{border:4px ridge var(--ouro);background:linear-gradient(#3a2168,#1d1233);padding:10px;text-align:center;box-shadow:0 0 18px #f08a1c88}
.logo{display:inline-block;background:none!important}
.logo .frame{width:300px;max-width:80vw;min-height:80px}
.logo .frame img{width:100%;display:block}
.logo .frame.noimg{font:bold 36px Georgia,serif;color:var(--ouro);padding:10px}
.ticker{margin-top:8px;border:2px inset var(--ouro);background:#000;color:var(--ouro2);padding:3px;font-family:"Courier New",monospace}

/* layout */
#cols{display:flex;gap:10px;margin-top:10px;align-items:flex-start}
#side{width:200px;flex:none}
#main{flex:1;min-width:0;border:4px ridge var(--ouro);background:var(--perg);color:var(--tinta);padding:16px;
  background-image:repeating-linear-gradient(0deg,transparent 0 22px,#0000000a 22px 23px);
  box-shadow:inset 0 0 40px #b9894a66}
#main a{color:var(--vinho)} #main a:hover{color:#fff;background:var(--vinho)}
#main h1{color:var(--vinho);text-shadow:2px 2px 0 var(--perg2)}
#main h2{color:var(--vinho);text-shadow:none;border-color:var(--vinho)}

.box{border:3px ridge var(--ouro);background:linear-gradient(#2e1c52,#1d1233);padding:8px;margin-bottom:10px}
.box h3{margin:0 0 6px;text-align:center;color:var(--ouro);font-size:15px;border-bottom:1px dashed var(--ouro)}
.box.center{text-align:center}
.box label{display:block;font-size:13px}

.btn{display:block;margin:4px 0;padding:5px 8px;text-align:center;text-decoration:none;font-weight:bold;
  color:#3b1b00!important;background:linear-gradient(#ffe3a1,#f2b84b 50%,#d98e1f);
  border:3px outset #ffe3a1;border-radius:4px;font-size:13px;cursor:pointer;font-family:inherit}
.btn:hover,.btn.on{background:linear-gradient(#fff3d1,#ffcf6a 50%,#f08a1c)!important;border-style:inset;color:#3b1b00!important}
.btn.small{display:inline-block;margin-top:6px}
.counter{font:bold 22px "Courier New",monospace;background:#000;color:#6dff6d;letter-spacing:3px;border:3px inset #888;padding:2px}
#pollres{font-size:12px;margin-top:6px}
.bar{height:8px;background:var(--laranja);border:1px solid #000;margin-bottom:3px}

/* imagens */
.frame{display:block;position:relative}
.frame img{max-width:100%;display:block}
.frame em{display:none}
.pic{border:5px double var(--vinho);background:#000;box-shadow:4px 4px 0 #0006;margin:10px 0}
.pic img{width:100%}
.pic.noimg{min-height:140px;background:repeating-linear-gradient(45deg,#2e1c52 0 12px,#3a2168 12px 24px);
  display:flex;align-items:center;justify-content:center}
.pic.noimg em{display:block;color:var(--ouro2);font:italic 13px Georgia;padding:10px;text-align:center}
.logo .frame.noimg em{display:block;font-style:normal}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.card{border:3px ridge var(--vinho);background:#fff6dd;padding:10px;box-shadow:3px 3px 0 #0004}
.card h3{margin:4px 0;color:var(--vinho);font-size:18px}
.tag{display:inline-block;background:var(--vinho);color:#ffe3a1;font-size:11px;padding:1px 6px;border-radius:8px;margin:0 3px 3px 0}
.note{border:2px dashed var(--vinho);background:#fff1c9;padding:8px;margin:12px 0;font-size:13px}
.story p:first-of-type::first-letter{font:bold 46px/0.8 Georgia;float:left;padding:4px 6px 0 0;color:var(--vinho)}
.story{font-family:Georgia,serif;font-size:17px}
.under{text-align:center;font:bold 12px "Courier New",monospace;color:var(--vinho)}
hr{border:0;border-top:3px double var(--vinho);margin:14px 0}
.blink{animation:bl 1s steps(2) infinite;color:#ff4a4a;font-weight:bold}
.blink-slow{animation:bl 2s steps(2) infinite}
@keyframes bl{50%{opacity:0}}
footer{margin-top:12px;text-align:center;font-size:12px;border:3px ridge var(--ouro);background:#150c26;padding:8px}
.ring{border:1px dotted var(--ouro);display:inline-block;padding:3px 10px;margin-bottom:6px}
.opt{display:block;width:100%;text-align:left;margin:6px 0}
#result{display:none}
.sparkle{position:fixed;pointer-events:none;z-index:99;font-size:14px;animation:fall 900ms ease-out forwards}
@keyframes fall{to{transform:translateY(24px) scale(.3);opacity:0}}

@media(max-width:760px){
  #cols{flex-direction:column}
  #side{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #side .box{margin:0}
}

/* Content managed by JSON */
.kp-story-card{margin:0 0 15px}.kp-news{padding:6px 0;border-bottom:1px dashed #cba46c}.kp-news p{margin:3px 0 7px}.grid .card .pic{margin:9px 0}