/*
 * Ember: the second built-in look of CraftRank Sites (Pro). Loaded after spawn.css on sites that pick it, and only
 * changes how things look: chunky boxes with a dark outline and a solid shadow under them, like cartoon game art.
 * Your own theme.css still loads after this, so it can change anything here.
 */
:root{--bg:#100c1c;--s1:#1b1433;--s2:#2a2147;--ol:#07040f;--ln:#2e2550;--ln2:#3a3060;--tx:#ddd8f0;--mu:#a59fbf;--ct:#1a0b00;--r:14px}
body.th-ember{font-weight:500}

/* --- the top: a floating menu box, square icon buttons, the logo; no bands of grain or sparkles --- */
.th-ember .top{background:var(--hero) center 55%/cover;padding-bottom:70px}
.th-ember.short .top{padding-bottom:44px}
.th-ember .top:after{background:linear-gradient(rgba(16,12,28,.2),rgba(16,12,28,0) 40%,rgba(16,12,28,.55) 78%,var(--bg))}
.th-ember .bar{width:min(1200px,calc(100% - 32px));margin:18px auto 0;min-height:64px;padding:0 10px 0 22px;background:#171030;border:3px solid var(--ol);border-radius:var(--r);box-shadow:0 5px 0 var(--ol)}
.th-ember .bar .pg{gap:22px}
.th-ember .bar .pg a{color:#e6e0ff;padding:10px 0}
.th-ember .bar .pg a:after{bottom:4px;height:4px;border-radius:2px;transform:scaleX(0)}
.th-ember .bar .pg a:hover:after,.th-ember .bar .pg a:focus-visible:after{transform:scaleX(1)}
.th-ember .bar .pg a.on{color:var(--c)}
.th-ember .bar .cur,.th-ember .bar .ac,.th-ember .bar .mm{min-height:42px;padding:0 12px;background:var(--s2);border:2px solid var(--ol);border-radius:10px;box-shadow:0 3px 0 var(--ol)}
.th-ember .bar .bk{min-height:42px;padding:0 14px;border:2px solid var(--ol);border-radius:10px;box-shadow:0 3px 0 var(--ol);color:var(--ct)}
.th-ember .bar .bk:hover,.th-ember .bar .ac:hover{transform:translateY(-1px)}
.th-ember .bar .ac img{border-radius:4px}
.th-ember .bar .cur option{background:#171030}
.th-ember .mid{margin-top:34px}
.th-ember.short .mid{margin-top:26px}
.th-ember .wm{text-shadow:0 6px 0 var(--ol),0 20px 40px rgba(0,0,0,.6);letter-spacing:-2px}
.th-ember .wm img{max-height:260px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.55))}
.th-ember.short .wm img{max-height:170px}
.th-ember .side .tx b{font-size:19px;text-shadow:0 3px 0 var(--ol)}
.th-ember .side .on{color:#ddd5ff}
.th-ember .side .ic{width:50px;height:50px;clip-path:none;border:3px solid var(--ol);border-radius:12px;box-shadow:0 4px 0 var(--ol);color:var(--ct)}
.th-ember .side .ic.dc{color:#fff}
.th-ember .side:hover .ic{transform:translateY(-2px);filter:none}
.th-ember .side .on i{border-radius:50%}

/* --- bands: plain dark page, no dot grid or glow --- */
.th-ember .band{padding:70px 0}
.th-ember .band.nb{background:var(--bg)}
.th-ember .band.nb:before,.th-ember .band .deco{display:none}
.th-ember .band+.band{padding-top:30px}
.th-ember .band.first{padding-top:34px}
.th-ember .gw+main>.band:first-child,.th-ember.short main>.band:first-child{padding-top:34px}

/* the big headings: smaller, with a dark drop and the second line as a tilted sticker */
.th-ember .word{font-size:clamp(40px,5vw,64px);letter-spacing:-1px;text-shadow:0 5px 0 var(--ol);margin-bottom:56px}
.th-ember .word.s{font-size:clamp(36px,4.4vw,56px);margin-bottom:56px}
.th-ember .word.xs{font-size:clamp(30px,3.6vw,46px);margin-bottom:52px}
.th-ember .word.ns{margin-bottom:26px}
.th-ember .scr{left:14px;bottom:-36px;padding:3px 12px;font:800 italic 15px/1.2 Kanit,sans-serif;text-transform:uppercase;letter-spacing:0;color:var(--ct);background:var(--c);-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;border:3px solid var(--ol);border-radius:8px;transform:rotate(-2deg);text-shadow:none;filter:none}
.th-ember .word.xs .scr{left:10px;font-size:13px;bottom:-34px}
.th-ember .hd>.word{margin-bottom:64px}.th-ember .hd>.word.ns{margin-bottom:30px}
.th-ember .hd>p:not(.word),.th-ember .hd .hx,.th-ember .hd .cdx,.th-ember .hd>.btn{margin-bottom:64px}
.th-ember .hd>p:not(.word),.th-ember .hd .hx{color:var(--mu)}

/* --- boxes --- */
.th-ember .panel,.th-ember .it,.th-ember .nw,.th-ember .fc,.th-ember .rec,.th-ember .bx,.th-ember .vt,.th-ember .staff .sm,.th-ember .pa,.th-ember .just>div,.th-ember .al,.th-ember .kids a,.th-ember .ban,.th-ember .acc .card,.th-ember .acs,.th-ember .lv>div{background:var(--s1);border:3px solid var(--ol);border-radius:var(--r);box-shadow:0 6px 0 var(--ol)}
.th-ember .nw,.th-ember .fc,.th-ember .it,.th-ember .ban{overflow:hidden}
.th-ember .it.best{border-color:var(--c)}
.th-ember .vt:hover,.th-ember .kids a:hover,.th-ember .it:hover,.th-ember .nw:hover{transform:translateY(-2px)}
.th-ember .it,.th-ember .nw,.th-ember .vt,.th-ember .kids a{transition:transform .12s}
.th-ember .it .pic,.th-ember .nw img{border-bottom:3px solid var(--ol)}
.th-ember .it .pic.ni{background:radial-gradient(circle,color-mix(in srgb,var(--c) 22%,var(--s2)),var(--s1) 70%)}
.th-ember .it small{left:10px;top:10px;padding:2px 10px;border:2px solid var(--ol);border-radius:8px;transform:rotate(-4deg);color:var(--ct)}
.th-ember .it .d{color:var(--mu)}
.th-ember .it .pr>span{display:inline-block;padding:1px 10px;font-size:19px;color:var(--ct);background:#fff1dc;border:3px solid var(--ol);border-radius:8px;transform:rotate(-3deg)}
.th-ember .it .pr s{color:var(--mu)}
.th-ember .it .pr a{height:38px;border:3px solid var(--ol);border-radius:10px;box-shadow:0 3px 0 var(--ol);color:var(--ct)}

/* buttons */
.th-ember .btn,.th-ember .b{border:3px solid var(--ol);border-radius:10px;box-shadow:0 4px 0 var(--ol);color:var(--ct)}
.th-ember .btn{height:50px}
.th-ember .btn.o,.th-ember .b.o{background:var(--s2);color:#fff;box-shadow:0 4px 0 var(--ol)}
.th-ember .btn.o:hover,.th-ember .b.o:hover{background:#352a5a;box-shadow:0 4px 0 var(--ol)}
.th-ember .btn:active,.th-ember .b:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ol)}

/* fields */
.th-ember .fi,.th-ember select.fi{background:#120d24;border:3px solid var(--ol);border-radius:10px}
.th-ember .fi:focus{border-color:var(--c)}
.th-ember .pm label{border-radius:10px}

/* --- tab headings on the side boxes ("Categories", "Featured") --- */
.th-ember .stab{position:absolute;top:-17px;left:14px;z-index:2;margin:0;padding:3px 12px;font-size:15px;line-height:1.2;color:var(--ct);background:var(--c);border:3px solid var(--ol);border-radius:8px;transform:rotate(-2deg);text-shadow:none}
.th-ember .stab.b{background:#3fd0ff}

/* --- the side column --- */
.th-ember .grid{grid-template-columns:290px minmax(0,1fr);gap:24px}
.th-ember .side-col{display:grid;gap:30px}
.th-ember .cnav{position:relative;gap:8px;padding:30px 14px 16px;background:var(--s1);border:3px solid var(--ol);border-radius:var(--r);box-shadow:0 6px 0 var(--ol)}
.th-ember .cnav>a{padding:6px 12px 6px 6px;font-size:14px;background:var(--s2);border:2px solid var(--ol);border-radius:9px;box-shadow:0 3px 0 var(--ol);color:#ece8ff}
.th-ember .cnav>a .t{width:34px;height:34px}.th-ember .cnav>a .t img{width:30px;height:30px}
.th-ember .cnav>a:hover{border-color:var(--ol);background:#352a5a}
.th-ember .cnav>a.on{background:var(--c);color:var(--ct);border-color:var(--ol);box-shadow:0 3px 0 var(--ol)}
.th-ember .cnav .n{border:2px solid var(--ol);border-radius:6px}
.th-ember .cnav>a.on .n{background:var(--ct);color:var(--c)}
.th-ember .cnav .sub a{border-left:2px solid var(--ln2)}
.th-ember .rec{position:relative;margin-top:0;padding:28px 16px 12px}
.th-ember .rec>div{border-top:2px solid var(--ln)}.th-ember .rec>div:first-of-type{border-top:0}
.th-ember .rec img,.th-ember .etop img{border-radius:6px}

/* featured packages: one card at a time, swipe or scroll sideways */
.th-ember .efe{position:relative;padding:28px 14px 14px;background:var(--s1);border:3px solid var(--ol);border-radius:var(--r);box-shadow:0 6px 0 var(--ol);min-width:0}
.th-ember .efs{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.th-ember .efs::-webkit-scrollbar{display:none}
.th-ember .ef{scroll-snap-align:start;min-width:0}
.th-ember .ef .pic{position:relative;display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;background:radial-gradient(circle,color-mix(in srgb,var(--c) 22%,var(--s2)),var(--s1) 70%);border:3px solid var(--ol);border-radius:10px}
.th-ember .ef .pic img{width:100%;height:100%;object-fit:cover}
.th-ember .ef .pic small{position:absolute;top:8px;right:8px;padding:1px 9px;font:800 italic 13px Kanit,sans-serif;color:#fff;background:#ff3fa4;border:2px solid var(--ol);border-radius:8px;transform:rotate(6deg)}
.th-ember .ef h3{margin:12px 0 6px;font:700 16px/1.25 Cairo,sans-serif;text-transform:none;color:#fff}
.th-ember .ef .pr{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.th-ember .ef .pr s{font:600 13px Cairo,sans-serif;color:var(--mu)}
.th-ember .ef .pr span{display:inline-block;padding:1px 10px;font:800 italic 20px Kanit,sans-serif;color:var(--ct);background:#fff1dc;border:3px solid var(--ol);border-radius:8px;transform:rotate(-3deg)}
.th-ember .ef .btn{width:100%;height:44px;margin-top:14px;font-size:14px}
.th-ember .efh{margin-top:10px;text-align:center;font:600 12px Cairo,sans-serif;color:var(--mu)}

/* top supporter */
.th-ember .etop{position:relative;padding:28px 16px 16px;background:var(--s1);border:3px solid var(--ol);border-radius:var(--r);box-shadow:0 6px 0 var(--ol)}
.th-ember .etop>div{display:flex;align-items:center;gap:12px}
.th-ember .etop img{width:44px;height:44px;image-rendering:pixelated;border:3px solid var(--ol)}
.th-ember .etop b{display:block;font:700 16px/1.2 Cairo,sans-serif;color:#fff}.th-ember .etop small{font:600 12px Cairo,sans-serif;color:var(--mu)}

/* --- home: category cards with their pictures --- */
.th-ember .eg .content{min-width:0}
.th-ember .etiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.th-ember .et{position:relative;display:flex;flex-direction:column;background:var(--s1);border:3px solid var(--ol);border-radius:var(--r);box-shadow:0 6px 0 var(--ol);overflow:hidden;transition:transform .12s}
.th-ember .et:hover{transform:translateY(-3px)}
.th-ember .ep{display:block;aspect-ratio:4/3;overflow:hidden;border-bottom:3px solid var(--ol);background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c) 26%,var(--s2)),var(--s1) 72%)}
.th-ember .ep img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.th-ember .et:hover .ep img{transform:scale(1.04)}
.th-ember .ep.ic{display:grid;place-items:center}.th-ember .ep.ic img{width:46%;height:auto;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55))}
.th-ember .eb{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px}
.th-ember .eb b{min-width:0;font:800 italic 19px/1.1 Kanit,sans-serif;text-transform:uppercase;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-ember .eb small{flex:none;font:800 italic 12px Kanit,sans-serif;text-transform:uppercase;color:var(--c)}
.th-ember .et em{position:absolute;top:10px;right:10px;padding:1px 9px;font:800 italic 13px Kanit,sans-serif;font-style:normal;color:#fff;background:#ff3fa4;border:2px solid var(--ol);border-radius:8px;transform:rotate(6deg)}
.th-ember .einfo{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;margin-top:30px;padding:22px 26px;background:var(--s1);border:3px solid var(--ol);border-radius:var(--r);box-shadow:0 6px 0 var(--ol)}
.th-ember .einfo h2{font-size:22px}
.th-ember .einfo p{margin-top:6px;color:var(--mu)}
.th-ember .content>.al:first-child{margin:0 0 22px}

/* the goal: a box with a chunky bar (on the home page it sits under the category cards) */
.th-ember .goal{grid-template-columns:220px minmax(0,1fr);gap:24px;margin-top:0;padding:22px 26px;background:var(--s1);border:3px solid var(--ol);border-radius:var(--r);box-shadow:0 6px 0 var(--ol)}
.th-ember .goal.hastop{grid-template-columns:220px minmax(0,1fr) 230px}
.th-ember .goal:before{display:none}
.th-ember .goal .gw .word{margin-bottom:44px}
.th-ember .gw{padding-top:22px}
.th-ember .gv b{font-size:40px;text-shadow:0 4px 0 var(--ol)}
.th-ember .gv span{color:var(--mu)}
.th-ember .gbar{height:22px;transform:none;background:var(--s2);border:3px solid var(--ol);border-radius:8px}
.th-ember .gbar i{background:var(--c);box-shadow:inset 0 -5px 0 rgba(0,0,0,.18)}
.th-ember .gbar s{width:3px;background:var(--ol)}
.th-ember .gs{color:var(--mu)}
.th-ember .goal .gm p{color:var(--mu)}
.th-ember .gp img{bottom:-22px;height:190px}
.th-ember .content .goal{grid-template-columns:minmax(0,1fr);gap:0;margin-top:30px}
.th-ember .content .goal .gw{display:none}
.th-ember .content .goal .gp{display:none}

/* sale, notices and news */
.th-ember .al{border-left-width:3px}
.th-ember .al.sale{border:3px solid var(--ol);border-radius:var(--r);overflow:hidden;box-shadow:0 6px 0 var(--ol)}
.th-ember .al.sale .tk{clip-path:none}
.th-ember .al.sale .cd{clip-path:none;border-left:3px dashed var(--ol)}
.th-ember .sale .cd span{background:var(--s1);border:3px solid var(--ol);border-radius:10px;box-shadow:0 4px 0 var(--ol)}
.th-ember .sale .pct{text-shadow:0 6px 0 var(--ol)}
.th-ember .al.sale .pct{text-shadow:none}
.th-ember .nw time,.th-ember .doc time{color:var(--c)}
.th-ember .doc .lead{border:3px solid var(--ol);border-radius:var(--r)}
.th-ember .md code,.th-ember .cmd{border-radius:6px}
.th-ember .wnav a{border-radius:0 8px 8px 0}
.th-ember .tiles a{background:var(--s1);border:3px solid var(--ol);border-radius:var(--r);box-shadow:0 5px 0 var(--ol)}
.th-ember .tiles a:hover{border-color:var(--ol);box-shadow:0 5px 0 var(--ol);transform:translateY(-2px)}
.th-ember .tiles em,.th-ember .cnav .n{border-radius:6px}
.th-ember .msg{border-radius:10px;border:3px solid var(--ol);border-left:6px solid #3ddc6a}
.th-ember .msg.bad{border-left-color:#ff5a5a}

/* footer */
.th-ember .ft{border-top:3px solid var(--ol);background:#0c0916}

/* --- smaller screens --- */
@media (max-width:1100px){.th-ember .goal,.th-ember .goal.hastop{grid-template-columns:1fr}.th-ember .etiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){
  .th-ember .bar{width:calc(100% - 24px);margin-top:12px;padding:0 8px;min-height:58px}
  .th-ember .bar .mm{padding:0 12px}
  .th-ember .bar .mm div{top:calc(100% + 8px);left:-3px;background:#171030;border:3px solid var(--ol);border-radius:12px;box-shadow:0 5px 0 var(--ol)}
  .th-ember .bar .mm a{border-top:2px solid var(--ln)}
  .th-ember .mid{margin-top:22px}
}
@media (max-width:900px){
  .th-ember .grid{grid-template-columns:minmax(0,1fr)}
  .th-ember .side-col{gap:26px}
  .th-ember .cnav{flex-direction:row;overflow-x:auto;padding:12px 12px 14px}
  .th-ember .cnav .stab{display:none}
  .th-ember .eg .side-col{order:2;margin-top:30px}
  .th-ember .eg .cnav,.th-ember .eg .etop{display:none}
}
@media (max-width:600px){
  .th-ember .band{padding:46px 0}
  .th-ember .etiles{gap:12px}
  .th-ember .eb{padding:10px}
  .th-ember .eb b{font-size:15px}
  .th-ember .eb small{display:none}
  .th-ember .einfo{grid-template-columns:1fr;padding:18px}
  .th-ember .goal{padding:18px}
  .th-ember .wm img{max-height:180px}
}
@media (prefers-reduced-motion:reduce){.th-ember .et,.th-ember .it,.th-ember .nw,.th-ember .vt,.th-ember .ep img{transition:none}}